How to Preserve Connector Style While Splitting in Angular Diagram?

In this article, you can learn about how to preserve connector style while splitting in Angular Diagram. The Syncfusion® Angular 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: 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 this.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 this.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 the code snippet and sample below.

Code - snippet:

// Enables connector splitting functionality on the diagram
   <ejs-diagram #diagram id="diagram" width="100%" height="500px"
     [enableConnectorSplit]="true" 
     (collectionChange)="collectionChange($event)"
   >
   </ejs-diagram>

/**
* Handles the collection change event to update connector styles.
*/
public collectionChange(args:ICollectionChangeEventArgs) {
   // 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 = this.diagram.getObject(args.element.sourceID) as Node;
       // Loops through the inEdges of the source node to apply initial connector style
       for (var i = 0; i < sourceNode.inEdges.length; i++) {
         var initialConnector = this.diagram.getObject(sourceNode.inEdges[i]) as Connector;
         // 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
   this.diagram.dataBind();
 }

Sample: Sample for Connector Split

Conclusion

We hope you enjoyed learning about how to preserve connector styles while splitting in Angular Diagram.

You can refer to our Angular Diagram feature tour page to learn about its other groundbreaking feature representations and documentation to quickly get started with configuration specifications. You can also explore our Angular 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 explore 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!