New to Kendo UI for jQuery? Start a free 30-day trial

DocumentToModel

methods

Transforms a point from Page document coordinates to Model coordinates. Shortcut for viewToModel(documentToView(point)). This method is useful when you want to transform coordinates of a drag operation on top of the Diagram.

documentToModel

Parameters:pointObject

The point in Page document coordinates.

Returns:Object

the transformed point

<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.documentToModel({ x: e.pageX, y: e.pageY });
          var targetShape = shapeByPosition(position);
          if (targetShape) {
            var item = e.draggable.hint.data("shape");
            var newShape = diagram.addShape(item);
            diagram.connect(targetShape, newShape);
            diagram.layout(diagram.options.layout);
          }
        }
      }
    });

    function shapeByPosition(position) {
      var shapes = diagram.shapes;
      var shape;
      for (var idx = 0; idx < shapes.length; idx++) {
        shape = shapes[idx];
        if (shape.bounds().contains(position)) {
          return shape;
        }
      }
    }
  });
</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>