How to Preserve Connector Style While Splitting in Javascript Diagram?

The Syncfusion® Javascript 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 the connector. 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 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 diagram.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 diagram.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 code snippet and sample below.

Code - snippet:

// Enables connector splitting functionality on the diagram
      enableConnectorSplit: true,

function 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 ej.diagrams.Connector) {
   // Retrieves the source node connected to the connector.
   var sourceNode = diagram.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++) {
       // Retrieves the initial connector based on inEdges of the source node.
       var initialConnector = diagram.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
diagram.dataBind();
}

Sample: Sample for Connector Split

Conclusion

I hope you enjoyed learning how to preserve connector style while splitting in the JavaScript Diagram.
You can refer to our JavaScript 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 JavaScript 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, Direct-Trac, or feedback portal. We are always happy to assist you!