We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

How to create connector on node drop

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

9 Replies

AP Alvin Phang May 19, 2015 09:54 AM UTC

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 


SG Shyam G Syncfusion Team May 20, 2015 10:16 AM UTC

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



AP Alvin Phang May 27, 2015 10:59 AM UTC

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);



SG Shyam G Syncfusion Team May 28, 2015 09:47 AM UTC

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


AP Alvin Phang May 29, 2015 09:22 AM UTC

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







AP Alvin Phang May 29, 2015 09:29 AM UTC

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


SG Shyam G Syncfusion Team June 1, 2015 11:39 AM UTC

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


AP Alvin Phang August 19, 2015 07:30 AM UTC

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


SG Shyam G Syncfusion Team August 20, 2015 12:40 PM UTC

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

Loader.
Up arrow icon