connection constraints

[Tobias Koller]

hi,

can you show me an example of how to use constraints on connections in diagram-control?

What I want:

- only allow drawing from one port to another (that works already)

- don't allow editing of the segments

- dont allow connection-moving to another node

I tried several things with the constrains but couldn't get it work.

Best regards

Tobias

[Sivakumar Sekar]

Hi Tobias, 

We have added the sample link and a video link to demonstrate how to prevent editing of segments and connections between other nodes after creating it using the port draw. We can able to prevent the connector editing and connection by assigning the connector constraints to none. We have added a code snippet and sample for your reference. 

getConnectorDefaults={(obj) => { 

            obj.constraints = ConnectorConstraints.None; 

            obj.targetDecorator.style = { 

                fill: "#024249", 

                strokeColor: "#024249" 

            }; 

} 

Sample link: https://stackblitz.com/edit/react-msrgto  

Video link: https://www.syncfusion.com/downloads/support/directtrac/general/ze/forums170460-1317458001  

Regards, 

Sivakumar      

[Tobias Koller]

hi Sivakumar,

thanks for your support and the code/video.

There are two problems with this code.

1. the connector has to be selectable (so that i can remove it) ...sorry thats my fault, i didn't tell you that ;-)
2. the connection gets only drawed when your mouse reached the target-node. until there you see no connection. Usually the connection is alsways right at the mouse-position when drawing a connection.

Best Regards

Tobias

[Sivakumar Sekar]

Hi Tobias, 

Please find the response for your quires in the below table. 

the connector has to be selectable (so that i can remove it) ...sorry thats my fault, i didn't tell you that ;-)

We have added the sample link and a video link to demonstrate how to prevent the connector source and target connection from changing. We can able to prevent the source and target connection by removing the Drag, DragSourceEnd, and DragTargetEnd constraints from the connector default constraints as shown in the below code. Please refer to the below code snippet and sample.  getConnectorDefaults={(obj) => {              //Sets the default values of a Connector              obj.constraints = ConnectorConstraints.Default & ~(ConnectorConstraints.Drag | ConnectorConstraints.DragSourceEnd | ConnectorConstraints.DragTargetEnd);              obj.targetDecorator.style = {                  fill: "#024249",                  strokeColor: "#024249"              };  Sample link: https://stackblitz.com/edit/react-msrgto

the connection gets only drawed when your mouse reached the target-node. until there you see no connection. Usually the connection is alsways right at the mouse-position when drawing a connection.

By default in the diagram, while creating new connector using the port draw. Connectors target point will be rendered on the mouse position until the mouse is released. We can`t able to restrict the connector drawing while moving the mouse.

Regards, 

Sivakumar