Slight movement of connector TargetEnd inside of Node Port Box causing onConnectionChange "changing" state to fire??

[exxon suarez]

I have a function that needs to fire only on the 'changing' in the onConnectionChange state when aconnectors  targetEnd is moved and it works but after looking at the function calls it seems to be firing multiple times before I move the connector Targetend away from a nodes port. This is not the intended behavior for my application. Is there a way to restrict slight adjustments to the connector end within the port? and only allow disconnect and connection of the connector to the port? Thanks

[Moulidharan Gopalakrishnan]

Hi,

When adjusting the connector, the connectionChange event is triggered. This event fires for every slight adjustment, even if the connector endpoint remains within the port area. For example, if the point is moved by just a single pixel, it causes the connectionChange event to be fired. If necessary, either we set the flag value to and restrict to minimum times or we can’t restrict it for slight adjustments.

Sample
https://stackblitz.com/edit/angular-5ew3ws-agftdi?file=src%2Fapp.component.ts,src%2Fapp.component.html

Regards,
Moulidharan G

[exxon suarez]

https://www.syncfusion.com/forums/187022/slight-movement-of-connector-targetend-inside-of-node-port-box-causing-onconnectionchange?reply=z94h4x

Thanks this was helpful. But now I have a problem with the Nodes.ports.InEdges. If I try to loop over a nodes ports to check the ports for any connections and if I just disconnected a connector from it and I want to update the port styles it creates a race condition and my check doesn't update the styles because the connector is disconnected but the inEdges shows the length = 0 and the connector name is still in the array like this ["connector4"] ? can i handle this with async call within onConnectionChange?

[Vivisa Ganesan]

Hi exxon,

We have checked the reported issue, but we couldn't replicate it on our end. Based on the details you provided, it seems that your requirement involves updating the port styles upon disconnecting the connector. We have e created a sample, in this sample we change the fill color of the port to red upon disconnection and change the fill color of the port to green upon reconnection. Please refer to the sample provided below:

Sample: https://stackblitz.com/edit/angular-pdhu8b-axtcfv?file=src%2Fapp.component.html,src%2Fapp.component.ts

Regards,

Vivisa

[exxon suarez]

Ok yes that is working but even your sample does not change the port color when you disconnect the connector from the port and then reconnect to the same node but a different port. Does the ConnectionChange function register changes when you drag the connector end to a new port on the same node? it doesn't seem to do that? I've uploaded a video of what I mean. I attached a video of the behavior the ports stay white when i change between ports.
https://go.screenpal.com/watch/cZehouVKGXD

[Moulidharan Gopalakrishnan]

Hi,

Kindly note that in the previous sample, we changed the fill color of the port to red upon disconnection and switched it to green upon reconnection during the “Changed” state of ConnectionChange event, which triggers on mouse up. To achieve the same requirements while dragging the connector, we can make the necessary modifications in the Changing state. Please refer to the provided sample for reference

Sample

Bsbeg1 (forked) - StackBlitz

Regards,
Moulidharan

[exxon suarez]

Does the "Changing" state register a disconnection of a connector from a port to no port away from a node as a change? what about the "Changed" state? 

[Moulidharan Gopalakrishnan]

Hi,

In the connectionChange event, the "Changing" state register a disconnection of a connector from a port of a node and change in between the ports in same node. In the Changed state the it registers only the connection changed from port of different nodes. It doesnot register the port change with in the same node. We will validate this issue and  update with more details on 11^th March 2024.

Regards,
Moulidharan

[Moulidharan Gopalakrishnan]

Hi,  

 

Reported Issue : ConnectionChange event not triggered for Port change within the same node in 'Changed' state

  

We can reproduce the issue and confirmed this as a defect. We have logged a defect report for this issue. We will fix this issue and provide the patch on March 26th 2024 weekly patch release.  

 

Feedback link: ConnectionChange event not triggered for Port change within the same node in 'Changed' state in Angular | Feedback Portal (syncfusion.com)

 

Disclaimer: Inclusion of this solution in the weekly release may change due to other factors including but not limited to QA checks and works reprioritization.

 

 

Regards, 

Moulidharan

[Moulidharan Gopalakrishnan]

Hi,

 

Due to unforeseen technical challenges, the fix for the reported issue has not been incorporated in this Weekly release. To address this, we have supplied a custom patch as an interim solution. However, we will include the fix for the issue in our upcoming weekly release which is scheduled to release on April 2nd, 2024.

 

Regards,

Moulidharan

Attachment: package_311c4399.zip

[Vivisa Ganesan]

Hi,

We have fixed the reported issue and included it in our latest patch release which is rolled out successfully.

Please upgrade to the latest version (v25.1.38) packages of the diagram to resolve this issue.   

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

 

Regards,

Vivisa