Set Port-Connector Draw Constraints

Question

Hello,I have got two questions:1) I currently have nodes with ports and already activated that a connector can be drawn when hovering over the port.Is it possible to directly set constraints on connector that is drawn from a specific port?2) Is it possible to require a connector to be connected to an other port and not just a point for example? So if a user connects a port to any point that this will not be possible and the connector gets cleared.Thank you!

Gowtham Gunashekar · Accepted Answer

Hi Rohansa, 
 




1) I currently have nodes with ports and already activated that a connector can be drawn when hovering over the port. 
Is it possible to directly set constraints on connector that is drawn from a specific port? 
 

We suggest you to set the draw constraints to a specific required port, not for all the port, so the connector can be draw from specific port. We have added a sample to demonstrate how to set draw constraints bottom port of the node. 
 
Sample link: https://stackblitz.com/edit/react-bsxts7-amcfyu?file=index.js 


2) Is it possible to require a connector to be connected to an other port and not just a point for example? So if a user connects a port to any point that this will not be possible and the connector gets cleared. 
 

We suggest you to use collectionChange event to add the your own restriction. whenever a new node or connector added in the diagram the collectionChange event will trigger. In the event we can add restriction and cancel the addition of node and connector if necessary. 
 
Code snippet: 




collectionChange={args => { 
                  if ( 
                    args.element && 
                    (args.element.sourcePortID === "" || 
                      args.element.targetPortID == "") 
                  ) { 
                    args.cancel = true; 
                  } 
                }} 
 
 
Sample link: https://stackblitz.com/edit/react-bsxts7-amcfyu?file=index.js 
 
The above condition allow the port to port connection of connector and cancel the port to node connection. 
 
Regards  
Gowtham

Rohansa · Answer

Thanks a lot, that solved it! :)

Gowtham Gunashekar · Answer

Hi Rohansa, 
 
Thanks for your update. Please let us know whether you need any further assistance on this. 
 
 
Regards, 
Gowtham