Drop target with filter a particular shape (node)

4 posts, 0 answers
  1. Mattia
    Mattia avatar
    20 posts
    Member since:
    Mar 2015

    Posted 29 Sep 2015 Link to this post

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

  2. Mattia
    Mattia avatar
    20 posts
    Member since:
    Mar 2015

    Posted 30 Sep 2015 Link to this post

    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>.
  3. Kendo UI is VS 2017 Ready
  4. Daniel
    Admin
    Daniel avatar
    2118 posts

    Posted 01 Oct 2015 Link to this post

    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!
     
  5. Mattia
    Mattia avatar
    20 posts
    Member since:
    Mar 2015

    Posted 01 Oct 2015 in reply to Daniel Link to this post

    Ok thanks Daniel! I will think about this solution
Back to Top
Kendo UI is VS 2017 Ready