Nodes and Connectors laying behind Grid and connectionChange event does not get triggered, when connection gets drawn

[Constantin]

Hello,

I'm actually facing two issues.

First: I'm struggling with the appearance of the nodes and connectors in my diagram. The nodes and connectors lay behind the gridlines and I tried to figure out how this happened, but can't find any property or similar issue facing this problem. I attached a screenshot of the diagram below.

Second: My nodes have Input-ports and Output-ports. I set the port constraints of the outputs to Draw, so I can simply drag a new connector out of the port and connect it with another input. Now I wanted to ensure, that only In- and Output ports get connected. Following an earlier forum request (https://www.syncfusion.com/forums/133147/restrict-target-node-port-when-drawing-a-connector ) I used the diagram event "connectionChange". This event gets triggered always an existing connection gets changed. But when I draw a new connection from an output-port to another Input, the connectionChange event does not get triggered (is this behaviour wanted?). However, following another forum request (https://www.syncfusion.com/forums/163850/set-port-connector-draw-constraints) I utilized the "collectionChange" event, which gets triggered when a node or connector is added/deleted. In combination this works fine and fullfills my requirements. But to make it more nicely I would like to show the user while dragging a new node, that the actual connection would be valid or invalid. So is there an event which gets always triggered, WHILE a new connection is drawn and not AFTER?

Bonus: Is there a simple way to visualize something like a SVG graphic or something in the middle of a connector (e.g. instead of text)? To make it more clear: I mean something like such a graphic, to show the current connection would be invalid and deleted if the user drops the endpoint at the actual position... 

Thanks a lot!

Regards,
Constantin

[Gowtham Gunashekar]

 

Hi Constantin, 

 

Please find the response in then below table  

 

 

query	Response
First: I'm struggling with the appearance of the nodes and connectors in my diagram. The nodes and connectors lay behind the gridlines and I tried to figure out how this happened, but can't find any property or similar issue facing this problem. I attached a screenshot of the diagram below.	We cannot be able to replicate the reported issue at our end, we have added the sample link for your references. We request you to share with us more details about the reported issue. Please share a simple sample to replicate the reported issue or replicate the reported issue in the shared a sample, that will help use to go ahead further.   Sample link:  https://stackblitz.com/edit/1bmshi
Second: My nodes have Input-ports and Output-ports. I set the port constraints of the outputs to Draw, so I can simply drag a new connector out of the port and connect it with another input. Now I wanted to ensure, that only In- and Output ports get connected. Following an earlier forum request (https://www.syncfusion.com/forums/133147/restrict-target-node-port-when-drawing-a-connector ) I used the diagram event "connectionChange". This event gets triggered always an existing connection gets changed. But when I draw a new connection from an output-port to another Input, the connectionChange event does not get triggered (is this behaviour wanted?). However, following another forum request (https://www.syncfusion.com/forums/163850/set-port-connector-draw-constraints) I utilized the "collectionChange" event, which gets triggered when a node or connector is added/deleted. In combination this works fine and fullfills my requirements. But to make it more nicely I would like to show the user while dragging a new node, that the actual connection would be valid or invalid. So is there an event which gets always triggered, WHILE a new connection is drawn and not AFTER?	Currently we don’t have any event to notify the port connector drawing tool. Only option is using the collection change event, that will trigger after the connector drawing completed.
Bonus: Is there a simple way to visualize something like a SVG graphic or something in the middle of a connector (e.g. instead of text)? To make it more clear: I mean something like such a graphic, to show the current connection would be invalid and deleted if the user drops the endpoint at the actual position...	We suggest you use the annotation template to render a SVG or HTML content in the connector instead of text. Please refer to the following sample for how to render a SVG element in the connector.       Sample link: https://stackblitz.com/edit/lbnkf5       We can also add the SVG node in diagram. We have added the documentation link for SVG node for your references.   https://ej2.syncfusion.com/documentation/diagram/shapes/#native

 

 

Regards,    

Gowtham    

 

[Constantin]

Hi Gowtham,

thanks for the fast response. I've managed to find the cause for the overlaying gridlines. I did diagram.appendTo('#myDiagramSpace'); twice at different positions in my code. After removing the second call everything works as expected again! :)

To the second question: This is a pity, because it would be a very useful feature for a visualized feedback whether the current connection would be valid or not. Maybe I will try to write my own event, but not in the near future.

Thanks again!

Regards,
Constantin

[Gowtham Gunashekar]

Hi Constantin, 

 

We are validating your requirement and update you with more detail on August 10^th, 2021.  We appreciate your patience until then.  

 

  

Regards,  

Gowtham 

[Gowtham Gunashekar]

Hi Constantin,  

We planned to implement a new feature for adding a new event that will trigger when we draw an object using the drawing tool. We want you to ensure the following functionality will satisfy your requirement. 

 

• When we perform the mouse down action and start to draw the given drawing object (node or connector), a drawing event will trigger with argument state as “start” and target as “diagram” or “node id” or “port id” and cancel argument. We can only cancel drawing at the first trigger of drawing event with “start” state.
• After perform mouse down and start to mouse move the drawing object is resize based on the mouse move the at this the drawing events triggers at every mouse move with argument of state “progress”
• When perform the mouse up the drawing event trigger with state “completed”
• While drawing the node or connector we can cancel the addition of the drawing object at initial for trigger of the drawing event.
•  If we draw a connector with port draw functionality the target argument of the mouse down and mouse up time trigger will be the target node id and target port id.

 

   

Regards,   

Gowtham  

[Constantin]

Hi Gowtham,

thanks for these fantastic news!

The functionalities listed would completely fulfill my requirements.

I am already looking forward to the implementation.

Regards,
Constantin

[Gowtham Gunashekar]

 

Hi Constantin,   

 

Currently we don’t have event support for drawing tools in our diagram control. We have logged “Support to implement an event for drawing tool” as a feature. We does not have any immediate plans to start this feature. We will implement this feature in any one of our upcoming releases.    

  

 

You can track the feature status from the below link 

 

Link:  https://www.syncfusion.com/feedback/27884/support-to-implement-an-event-for-drawing-tool 

 

Regards, 

Gowtham