documentToView

Transforms a point from Page document coordinates to View coordinates. View coordinates are relative to the currently visible portion of the Diagram.

Parameters

point Object

The point in Page document coordinates.

Returns

Object the transformed point

Example - get point position in the visible portion of the Diagram

<script>
  $(function () {

    $("#splitter").kendoSplitter({
      panes: [
        { size: "200px" },
        {  }
      ]
    });

    var diagram = $("#diagram").kendoDiagram({
      dataSource: {
        data: [{
          items: [{}, {}]
        }],
        schema: {
          model: {
            children: "items"
          }
        }
      },
      shapeDefaults: {
        width: 120,
        height: 120,
        fill: "#8ebc00"
      },
      layout: {
        type: "tree"
      }
    }).getKendoDiagram();

    $("#shapes").kendoDraggable({
      filter: ".shapeItem",
      hint: function (element) {
        return element.clone();
      }
    });

    $("#diagram").kendoDropTarget({
      drop: function (e) {
        if (e.draggable.hint) {
          var position = diagram.documentToView({ x: e.pageX, y: e.pageY });
/* The result can be observed in the DevTools(F12) console of the browser. */
          console.log("Dropped element at visible position: " + position);
        }
      }
    });
  });
</script>
<div id="splitter">
  <div id="left-pane">
    <div class="pane-content">
      Drag square to Diagram:
      <div id="shapes">
        <span class="shapeItem" data-shape='{"width":120,"height":120,"type":"rectangle"}' style="background-position: 0 0"></span>
      </div>
    </div>
  </div>
  <div>
    <div class="pane-content">
      <div id="diagram"></div>
    </div>
  </div>
</div>

<style>
  html, body, #splitter
  {
    height: 100%;
  }

  .shapeItem
  {
    margin-top: 10px;
    display: inline-block;
    width: 120px;
    height: 120px;
    background-image: url("https://demos.telerik.com/kendo-ui/content/integration/diagram/images/diagram-toolbox.png");
    background-size: auto 100%;
  }
</style>