How to create connector on node drop

[Alvin Phang]

Hi,

In my case, when a node is dropped to the canvas, I would like to create a connector which is attached to the node. 

As such, the newly created connector will have only sourceNode but not targetNode. But I wish to show the connector a little ( as attached) by using targetPoint or any other method.

Different node may have different number of ports (e.g port_input, port_output1, port_output2) and I only wish to have connector created at the output port. 

Following is what I have done so far.

In aspx.

<div id="main-right">

            <ej:Diagram ID="DiagramContent" runat="server" Height="100%" Width="100%">

            </ej:Diagram>

</div>

function NodeOnDrop(argument) {

            var node = argument.element;

            var diagramObj = $("#DiagramContent").data("ejDiagram");

            var connectorList = diagramObj.model.connectors;

            for (var i = 0; i < node.ports.length; i++) {

                 //detect if is input port then ignore

                if (node.ports[i].name.toLowerCase() == "port_input") {

                    continue;

                }

                else {

                    connector = { 

                    

                        name: node.name + i.toString(),

                        segments: { type: "orthogonal" },

                        sourcePoint: { x: 0, y: 0 },

                        targetPoint: { x: 0, y: 200 },

                        sourceNode: node.name,

                        targetDecorator:{

                            shape: ej.datavisualization.Diagram.DecoratorShapes.Arrow

                        },

                        sourceDecorator:{  

                            shape: ej.datavisualization.Diagram.DecoratorShapes.None,

                            width: 10,

                            height: 10

                        },

                        sourcePort: "port_Output"

                    }

                    connectorList.push(connector);

                }

            }

            

            // trying to refresh the diagram layout, but seems not working

            var diagram = $("#DiagramContent").ejDiagram("instance");

             

            diagram.layout();

}

Please advise on how to achieve this. Thank you.

Regards,

Alvin

Attachment: node_435c873b.zip

[Alvin Phang]

FYI, in my model.Connectors, it contains many connector(s). So at runtime, when I drop node from palette I want to add new connector to model.Connectors.  Thanks 

[Shyam G]

Hi Alvin

Thanks for using Syncfusion products.

We are glad to let you know that we have created a simple sample to achieve your requirement and it is available in the below link for download. Please refer the code snippet below.

Code snippet:

<ej:Diagram ID="DiagramContent" runat="server" Height="500px" Width="500px">
</ej:Diagram>

DiagramContent.OnClientDrop = "drop";

function drop(argument) {

if (argument && argument.element) {

var node = argument.element;

var diagramObj = $("#DiagramContent").data("ejDiagram");

for (var i = 0; i < node.ports.length; i++) {

if (node.ports[i].name.toLowerCase() == "inport") {

continue;

}

else {

diagramObj.add({ name: "conn", sourcePort: "outport", sourceNode: node.name, targetPoint: { x: node.offsetX + 200, y: node.offsetY } })

}

}

}
}

Here is the sample

Sample:http://www.syncfusion.com/downloads/support/forum/119178/connectionsample1-1904053146.zip

Please let me know if any concerns.

Regards,
Shyam G

[Alvin Phang]

Thanks Shyam for solution it works fine.

Another question.

With the above solution I have also set the constraints for the connector.  I do not want the user to drag the source end while still able to drag the target end. And also, I am expecting the source end will always stick to the source node. But I notice that I can still drag the WHOLE connector, and once I did   that, the source end will detach from its source node and cannot be attached back. I tried to constraint the connector for dragging. But once I set this, I am not able to move the target end as well.

Any solution that I can make sure the source end is always attached to its source node but I can still move the target end?

Following is the way I create the connector and set the constraint.

var conn = {};

conn.constraints = ej.datavisualization.Diagram.ConnectorConstraints.Default & ~(ej.datavisualization.Diagram.ConnectorConstraints.DragSourceEnd);

conn.name = ej.datavisualization.Diagram.Util.randomId();

conn.segments = [{ type: "orthogonal"}];

conn.targetDecorator = { shape: ej.datavisualization.Diagram.DecoratorShapes.Arrow };

conn.targetPoint = { x: argument.element.offsetX, y: argument.element.offsetY + 100 };

conn.targetPort = "port_Input";

conn.sourceNode = argument.element.name;

conn.lineColor = "Red";

conn.sourcePort = "port_Output";

 diagramObj.add(conn);

[Shyam G]

Hi Alvin

Thanks for using Syncfusion products.

Could you please confirm the Essential studio version that you are using in your application? If the version is 13.1.0.21, then it is a known issue and it is fixed in the version 13.1.0.26. So we suggest you to upgrade to the version 13.1.0.26 to resolve your reported issue.

Please let me know if any concerns.

Regards,
Shyam G

[Alvin Phang]

Hi Shyam, 

Thanks for assisting.

Issue 1

Previously I was using 13.1.0.21 and I have upgraded to 13.1.0.26. But still I have the same problem. (refer to video connector2)

In my project, I set the constraint using the code below.

conn.constraints = ej.datavisualization.Diagram.ConnectorConstraints.Default &  (ej.datavisualization.Diagram.ConnectorConstraints.DragSourceEnd);

Issue 2 

On node drag event, I wish to have connectors which are not targeted to any node to move together. So I was trying to update the connector target point as the node is being dragged. Please refer to the code snippet below. 

     function OnNodeDrag(argument) {

            var diagramObj = $("#DiagramContent").data("ejDiagram");

            if (!diagramObj || !argument ) {

                return;

            }

            if (argument.elementType != "node") {

                return;

            }

            var sourceNode = argument.element.name;

            for (var i = 0; i < diagramObj.model.connectors.length; i++) {

                if (diagramObj.model.connectors[i].sourceNode != sourceNode) {

                    continue;

                }

                if (diagramObj.model.connectors[i].targetNode) {

                    continue;

                }

                diagramObj.model.connectors[i].targetPoint = { x: argument.element.offsetX, y: argument.element.offsetY + 75 };

                diagramObj.updateConnector(diagramObj.model.connectors[i].name, {});

            }

        }

[Alvin Phang]

Sorry, I press the submit by mistake.

So continue for the Issue 2. Is there any method to achieve my goal?

As attached are the videos.

connector2 is video for Issue 1.

nodeori is about the initial behavior when I drag then node before applying the OnNodeDrag function.

Node is the result after OnNodeDrag.

Thank you.

Attachment: Video_6bf39917.zip

[Shyam G]

Hi Alvin

Thanks for your update.

Query	Response
Issue 1 Previously I was using 13.1.0.21 and I have upgraded to 13.1.0.26. But still I have the same problem. (refer to video connector2) In my project, I set the constraint using the code below. conn.constraints = ej.datavisualization.Diagram.ConnectorConstraints.Default &  (ej.datavisualization.Diagram.ConnectorConstraints.DragSourceEnd);	Please note that the reported issue is a known issue and it has been fixed in our Essential Studio service pack 2 for Volume 1, 2015 and it is available for download under the following link. http://www.syncfusion.com/forums/119275/essential-studio-2015-volume-1-service-pack-2-release-v13-1-0-30-available-for-download Here is the code snippet to disable DragSourceEnd and Drag of the connector Code snippet: Connector connect = new Connector();   //disable the connector DragSourceEnd and Drag connect.Constraints = ConnectorConstraints.Default & ~(ConnectorConstraints.DragSourceEnd | ConnectorConstraints.Drag);
Issue 2  On node drag event, I wish to have connectors which are not targeted to any node to move together. So I was trying to update the connector target point as the node is being dragged. Please refer to the code snippet below.       function OnNodeDrag(argument) {             var diagramObj = $("#DiagramContent").data("ejDiagram");             if (!diagramObj || !argument ) {                 return;             }             if (argument.elementType != "node") {                 return;             }             var sourceNode = argument.element.name;             for (var i = 0; i < diagramObj.model.connectors.length; i++) {                 if (diagramObj.model.connectors[i].sourceNode != sourceNode) {                     continue;                 }                 if (diagramObj.model.connectors[i].targetNode) {                     continue;                 }                 diagramObj.model.connectors[i].targetPoint = { x: argument.element.offsetX, y: argument.element.offsetY + 75 };                 diagramObj.updateConnector(diagramObj.model.connectors[i].name, {});             }         }	Please note that the connectors targetPoint can be updated at runtime using updateConnector API method, but we have issue in updating connectors targetPoint and it is a known issue. The fix for this issue is estimated to be available on volume 2,2015 release, which is scheduled to release in the end of June,2015.

Please let me know if any concerns.

Regards,
Shyam G

[Alvin Phang]

Hi,

Regarding the Issue 2 - to update connector targetPoint in runtime using updateConnector API method, the version I'm currently using is 13.2460.0.34 but this issue seems yet to be fixed. Please advise thank you.

Regards,

Alvin Phang

[Shyam G]

Hi Alvin

Thanks for using Syncfusion products.

The reported issue is a breaking issue and the fix for this issue is estimated to be available on volume 2 service pack 2 release, which is scheduled to be released by the end of August,2015.

Please let us know if you need further assistance.

Regards,
Shyam G