[Solved] Drop target with filter a particular shape (node)

[Mattia]

Hi Telerik team! I'm trying to use drag and drop with a diagram. All works fine but I can't understand how I can choose a particular node, instead of another, as target of a drop target. I mean, if the shapes (nodes) aren't traditional DOM elements but they're graphic elements (svg), I can't assign an id or a css class to those shapes.
For now I'm using as filter element in drop target area, a <g> element of the DOM, but for my business logic, I have to allow to drop an element if and only if the target isn't a leaf.

I have checked inside the function that handle the event on drop and I have only the <g> DOM element (as Javascript or jQuery object), but I am not able to recognize if it's the root, a child or a leaf or whatever.

Any suggestions? 

I'm using Angular, here some code:

<div kendo-droptargetarea
        k-filter="'g'"
        k-drop="ctrl.add"
        k-dragenter="ctrl.onDragEnter"
        k-dragleave="ctrl.onDragLeave"
        class="k-content col-lg-10 col-sm-11"
        id="sourceEditorCanvas"
        ng-cloak="">
        <div kendo-diagram
                k-options="ctrl.diagramOpts"
                style="margin-left:20px;height:81vh;"
                id="sourceDiagram">
        </div>
    </div>

 this is my HTML with kendo-angular directives, note k-filter="'g'" and k-drop="ctrl.add", the next code snippet instead is the function that handle the drop event:

add: function (e) {
    var draggableElement = {},
        dataItem = {},
        ctrl = this.$angular_scope.ctrl;

    draggableElement = e.draggable.currentTarget;
    dataItem = draggableElement.data().$scope.dataItem;

  

    if ($.isEmptyObject(dataItem)) return;

 

    var shape = {
        name: dataItem.name,
        type: dataItem.type,
        color: colorsUI["teal"]
    };

 

    ctrl.currentSource[0].items.push(shape);
    $('#sourceDiagram').data('kendoDiagram').dataSource.data(ctrl.currentSource);
    ctrl.onDragLeave($('#sourceEditorCanvas'));
},

[Mattia]

Hi I have made some progress for this issue: I will use colors for label a node and then I check inside the <g> element the color, furthermore I can get the name of the node checking inside <g> the value of element <text>.

[Daniel]

Hello Mattia,

A possible approach to find the shape on which the element is dropped is to use the position. After you find the shape you can check if there are any outgoing connections to determine if it is a leaf node e.g.

add: function (e) {
    if (e.draggable.hint) {
        var position = e.draggable.hintOffset;
        var point = diagram.documentToModel(new kendo.dataviz.diagram.Point(position.left, position.top));
        var shapes = diagram.shapes;
        var shape, targetShape;
        for (var idx = 0; idx < shapes.length; idx++) {
            shape = shapes[idx];
            if (shape.bounds().contains(point)) {
                targetShape = shape;
                break;
            }
        }
        if (targetShape && targetShape.connections("out").length > 0) {
            //your logic
        }

Regards,
Daniel
Telerik

 

 

[Mattia]

Ok thanks Daniel! I will think about this solution