Connector and Nodes

[Jean Caiza]

Hello!,

Is there any characteristic of the Diagram component, when a connector appears from a certain Port of a figure, and when it is released, a tooltip or popup appears that shows information about the figures or Nodes that are going to be connected?

For example, in the following image, it can be seen that when the connector is released, the nodes that we can insert appear (they can be all).

[Balasubramanian Manikandan]

Use ‘ConnectionChangeEvent’ to show the information after it released from port. Refer to the below mention code example, sample and documentation.

Code Example:

        connectionChange={(args) => {

          if (args.state == 'Changed') {

            if (diagramInstance.connectors[0].targetPortID == '') {

              diagramInstance.connectors[0].annotations[0].template =

                '<div><span style="color:blue; border: 2px solid red; background-color: #ffcaca;">This is syncfusion</span></div>';

              diagramInstance.dataBind();

            } else {

              diagramInstance.connectors[0].annotations[0].template = '';

              diagramInstance.dataBind();

            }

          }

        }}

Sample:

https://stackblitz.com/edit/react-nju32y-veudys?file=index.js

Documentation:

https://ej2.syncfusion.com/react/documentation/diagram/labels/#template-support-for-annotation