This is a migrated thread and some comments may be shown as answers.

Drop target with filter a particular shape (node)

3 Answers 67 Views
Diagram
This is a migrated thread and some comments may be shown as answers.
Mattia
Top achievements
Rank 1
Mattia asked on 29 Sep 2015, 09:08 AM

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'));
},

3 Answers, 1 is accepted

Sort by
0
Mattia
Top achievements
Rank 1
answered on 30 Sep 2015, 02:59 PM
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>.
0
Daniel
Telerik team
answered on 01 Oct 2015, 07:57 AM
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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Mattia
Top achievements
Rank 1
answered on 01 Oct 2015, 08:11 AM
Ok thanks Daniel! I will think about this solution
Tags
Diagram
Asked by
Mattia
Top achievements
Rank 1
Answers by
Mattia
Top achievements
Rank 1
Daniel
Telerik team
Share this question
or