How to Preserve Connector Style While Splitting in React Diagram?

This article explains how to preserve connector style while splitting in React Diagram. The Syncfusion® React Diagram component supports splitting a connector between two nodes when a new node is dropped onto an existing connector. This creates connections between the new node and the original nodes. To enable this functionality, set the enableConnectorSplit property to true and enable the AllowDrop constraints for connectors. By default, enableConnectorSplit is set to false. You can refer to the documentation below.

Documentation: Enable Connector Splitting

However, the style properties of the original connector will not automatically apply to the newly created connectors. To ensure consistent styling, you can use the collectionChange event as shown in the code snippet below.

The collectionChange event monitors changes to the diagram’s collection, specifically modifications to connectors. When this event triggers, you can check if the state property in the **args **parameter is set to “Changed”, indicating that an existing element has been modified. If the modified element is a Connector, you can find the node connected at the source end by accessing args.element.sourceID and retrieving the corresponding node using diagramInstance.getObject().

Next, iterate over the incoming edges (inEdges) of this source node to find each connected incoming connector. For each incoming connector, retrieve the style properties (such as color or line type) from the original connector and apply them to the newly modified connector. Finally, call diagramInstance.dataBind() to apply and render any updates in the diagram. This approach ensures that the new connector’s style matches that of the existing connectors linked to the source node.

Kindly refer to the code snippet and sample below.

Code - snippet:

// Enables connector splitting functionality on the diagram
       enableConnectorSplit={true}
       /**
       * Handles the collection change event to update connector styles.
       */
       collectionChange={(args) => {
         // Checks if the state of the change is 'Changed'
         if (args.state === 'Changed') {
           // Checks if the changed element is a connector
          if (args.element instanceof Connector) {
             // Retrieves the source node connected to the connector
             var sourceNode = diagramInstance.getObject(args.element.sourceID);
             // Loops through the inEdges of the source node to apply initial connector style
             for (var i = 0; i < sourceNode.inEdges.length; i++) {
                var initialConnector = diagramInstance.getObject(sourceNode.inEdges[i]);
                // Sets the style of the changed connector to match the initial connector style
                args.element.style = initialConnector.style;
             }
          }
         }
         // Binds the updated data to the diagram
         diagramInstance.dataBind();
        }} 

Refer to the working sample for additional details and implementation: Sample for Connector Split

Conclusion

We hope you enjoyed learning on how to preserve the connector style while splitting in React Diagram.

You can refer to our React Diagram feature tour page to learn about its other groundbreaking feature representations and documentation, and how to quickly get started with configuration specifications. You can also explore our React Diagram example to understand how to create and manipulate data.

For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion®, you can try our 30-day free trial to check out our other controls.

If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, BoldDesk Support, or feedback portal. We are always happy to assist you!