Restrict drawing of disconnected connectors

[Martin]

Hello, 

is there a way to disallow disconnected connectors in a diagram? I was looking at the connectionChange event but that does not fire on initial connection of two nodes, only when an existing connector is dragged out / changed.

I need to be able to restrict users from drawing disconnected connectors during runtime. A user adds two nodes on the canvas, then can draw a connector ONLY by hovering over a node and dragging out a connector to target node. Any other drawing of connectors should not be allowed. In other words, a user should be only able to connect nodes, not freely draw any connector anywhere.

Thank you for you help.

Martin.

[Shyam G]

Hi Martin, 

 

We can use collectionChange event to remove the connectors on certain situation by cancelling the event. We have an issue in it and logged “Unable to remove connectors that are drawn at runtime in the collectionChange” a defect report. The fix for this issue is estimated to be available on 3^rd December, 2019. 

 

You can track the status of the issue from the below feedback link. 

 

https://www.syncfusion.com/feedback/10196/unable-to-remove-the-connectors-that-are-drawn-at-runtime-in-the-collectionchange 

 

 

Regards, 

Shyam G 

[Shyam G]

Hi Martin,  

  

Reported Issue : Unable to remove connectors that are drawn at runtime in the collectionChange. 

  

We are glad to announce that our patch release (v17.3.29) is rolled out successfully and In that release, we have added the fix for reported issue.      

       

Please upgrade to the latest version packages to resolve this issue.       

https://www.npmjs.com/package/@syncfusion/ej2-diagrams    

 

We have created a sample in which we have allowed port to port connections alone at runtime. Please refer to a code example and sample below. 

 

Code example: 

collectionChange = {(args)=> {  

          if(args.element && args.element.segments && !(args.element.sourcePortID && args.element.targetPortID)) {  

            args.cancel=true; 

          } 

        }} 

         

 

Sample: https://stackblitz.com/edit/react-rdkvbu?file=index.js 

 

Regards,  

Shyam G  

[Martin]

Thank you, that works. I am yet to add ports but with a slight change (.sourceID & .targetID instead of .sourcePortID/.sourceTargetID) it works well.  

[Shyam G]

Hi Martin, 

Thanks for your update. 

Regards, 

Shyam G