Diagram: Port to Port connection problem in the newest version

Question

Hi Syncfusion,We were upgrading diagram control in our project from version
17.4.39 to 19.4.50, and we discovered a lack of features that we were using on
the collectionChange event.To connect nodes, we are using port-to-port connections like this:[Version 17.4.39 to 18.2.48]In the collectionChange (type=’Addition’ & propName ====
‘connectors’) element, we had info for: sourceID, sourcePortID, targetID, and targetPortID.In the newest version, targetPort doesn’t highlight like in the
picture, and targetID and targetPortID are empty.The last version available in NPM that is working correctly is
18.2.48.Can you tell me if this is a bug or a changed behavior of control?I have created an example where you can see the current(version
19.4.50).https://stackblitz.com/edit/react-833qa1

Aravind Ravi · Accepted Answer

Hi Enova, 

We have modified a sample to get the sourcePortID and targetPortID of connector. Please set the port constraints as Default | Draw instead of Draw to connect the connector to port.  

Please refer to the modified sample and code snippet below 





{ 
      id: 'port_2', 
      shape: 'Circle', 
      offset: { x: 0.5, y: 0 }, 
      visibility: PortVisibility.Connect | PortVisibility.Hover, 
      constraints: PortConstraints.Default | PortConstraints.Draw, 
    }, 

Sample: https://stackblitz.com/edit/react-zgfq4p 

We have attached a video demonstration of how connector gets connected to port when we draw a connector from one port and connect to next port. 

Video: https://www.syncfusion.com/downloads/support/forum/172979/ze/Video-542672985 

Regards 
Aravind Ravi