1. Home
  2. Forum
  3. jQuery
  4. When dragging a Node to a swimlane in the Diagram, how do you determine the Phase where the Node is located ?

When dragging a Node to a swimlane in the Diagram, how do you determine the Phase where the Node is located ?

Hello,

When dragging a Node to a swimlane in the Diagram, how do you determine the Phase where the Node is located ?

Thank you in advance.

7 Replies
SG Shyam G Syncfusion Team September 6, 2018 10:50 AM UTC

Hi songKang, 
 
Could you please confirm us whether you need to get an phase object when we drop a node over the phase and need to change the phase position? If so, we can analyze and provide a solution. If we misunderstood your requirement, please share us more detail such as elaborate your requirement in detail with screenshot or video. 
 
Regards, 
Shyam G 


SO songkang September 10, 2018 02:39 AM UTC

Thank you very much for your reply! As you understand it.I need to determine whether a Node belongs to Phase and return Phase's object!

For example:

var phase = getPhase(element);


The second:

When dragging a Node to the Diagram, the layout will be automatically if the Node and Lane boundaries overlap, while there is no function when the Node and Phase boundaries overlap!As shown in the Attach file!

Thank you in advance.


Attachment: The_sample_1b892d6e.zip

SG Shyam G Syncfusion Team September 10, 2018 09:40 AM UTC

Hi SongKang, 
 
Currently we don’t have option to update phase at runtime. So we have logged “Unable to update swimlane phase offset at runtime” as a defect. The fix for this issue is estimated to be available on volume 3 sp1 which is scheduled to release by the end of October,2018. 
However as a workaround, you can use private method _updatePhase in drop event to update the phase at runtime. Please refer to playground link below. once an issue is fixed, you can use an diagram updateNode method to update an phase at runtime. 
 
Code example: 
 
$("#diagram").ejDiagram({                   
                    drop: function drop(args) { 
                        var diagram = $("#diagram").ejDiagram("instance"); 
                        if (args.element && args.element.type !== "connector") { 
                            var nodebounds = ej.datavisualization.Diagram.Util.bounds(args.element); 
                            var swimlaneCollection = args.model.nodes[0]; 
                            if (swimlaneCollection.isSwimlane) { 
                               //get an swimlane object 
                                var swimlaneObject = diagram.getNode(swimlaneCollection.name); 
                                //iterate an swimlane phase 
                                for (var i = 0; i < swimlaneObject.phases.length; i++) { 
                                    var phase = swimlaneObject.phases[i]; 
                                    if (nodebounds.x + nodebounds.width > phase.offset) { 
                                        var diff = phase.offset + ((nodebounds.x + nodebounds.width) - phase.offset); 
                                        //update phase at runtime 
                                        diagram._updatePhase({ name: phase.name, offset: diff }); 
                                        break; 
                                    } 
 
                                } 
                            } 
                        } 
                    }, 
  
                }); 
 
 
 
Regards, 
Shyam G 


SO songkang September 10, 2018 09:59 AM UTC

Thank you very much for your reply!But you didn't seem to reply to my first question.Get the Phase where the Node is known!



var phaseElement = getPhase(nodeElement) ？？？

SG Shyam G Syncfusion Team September 11, 2018 05:49 AM UTC

Hi SongKang,  
 
By default, the nodes are added into lanes not phases. So, if you need to get a phase object based on the dropped node in lane, then you can check the below highlighted condition to get an phase object in drop event. 
 
Code example: 
$("#diagram").ejDiagram({                    
                    drop: function drop(args) {  
                        var phase =  getPhase(args.element, args.model); 
                    },  
   
                });  
 
    function getPhase(element,model) { 
            var diagram = $("#diagram").ejDiagram("instance"); 
            if (element && element.type !== "connector") { 
                var nodebounds = ej.datavisualization.Diagram.Util.bounds(element); 
                var swimlaneCollection = model.nodes[0]; 
                if (swimlaneCollection.isSwimlane) { 
                    var swimlaneObject = diagram.getNode(swimlaneCollection.name); 
                    for (var i = 0; i < swimlaneObject.phases.length; i++) { 
                        var phase = swimlaneObject.phases[i];                          
                        if (nodebounds.x + nodebounds.width > phase.offset) { 
                            //return an phase object 
                            return phase; 
                        } 
                    } 
                } 
            } 
        } 
 
Also, could you please confirm us whether you need to get all nodes which falls under an phase. If so, please let me know whether you need this requirement at initial rendering(button click) or at runtime(drop or any other event). So that we can provide a solution based on it. 
 
Regards, 
Shyam G 


SO songkang September 11, 2018 06:23 AM UTC

Thank you very much for your reply!

First of all, I understand the design principle of Swimlane, but in the practical application, we pay much attention to Node, Lane and Phase, on the data model.

So.

1、Get Lane and Phase objects according to Node.
2、Get the Nodes object according to Lane.
3、Get the Nodes object according to Phase.

Very necessary!

Currently, only the relationship between Node and Phase can be analyzed, which is very troublesome and bad！

As for your question, we expect to get the relationship between them (phase, node) in both the Data Model and the runtime(drop or any other event).

Thank you very much for your patient reply, which has helped us a lot. Thank you！




SG Shyam G Syncfusion Team September 12, 2018 01:12 PM UTC

Hi SongKang, 
 
We have achieved your requirement in the application level. We have created three methods for three queries in the application level. Please refer to code example and JSplayground link below. Also, you can refer an method definition from playground link. 
 
Code example: 
 
  function findObject() {         
        var swimlane = diagram.getNode("swimlane"); 
        var phaseNodes = getNodesFromPhase(swimlane, swimlane.phases[0]); 
        var laneAndPhase = getLaneAndPhaseFromNode(swimlane, diagram.getNode("Order")); 
        var laneNodes = getNodesFromLane(swimlane.lanes[0]) 
      } 
 
 
Regards, 
Shyam G 


Loader.
Up arrow icon