How to Save and Restore Manually Positioned Connectors in JavaScript Diagram

In the Syncfusion® JavaScript Diagram component, connectors are typically auto-aligned when working within layout diagrams. However, any manual adjustments to connector positions are lost when the layout is refreshed using the doLayout method. This article outlines a technique to save and restore manual connector configurations, ensuring consistent connector placement even after layout refreshes.

To effectively save and restore connector segment placements, we employ a strategy of cloning and serializing the connector segments. This involves creating a deep copy of each segment to avoid reference issues and converting the segment data into a JSON string for easy storage and retrieval. The process of saving and restoring a connector’s manual configuration involves the following steps:

Steps for Saving Connector Segments:
Before performing a doLayout operation, save the current connector segment structure.

1. Clone the Segments: Create a deep copy of each connector’s segments. Cloning ensures there are no circular references when serializing.
2. Serialize the Data: Convert the cloned segments data into a JSON string.
3. Store in a Collection: Save the serialized segment data in a collection for future restoration.

Here’s a sample implementation of the storeSegments method:

//method to store the changed segments
function storeSegments() {
  diagram.connectors.forEach(function (connector) {
    //clone the segment to avoid circular references while stringify 
    let segment = ej.diagrams.cloneObject(connector.segments);
    const jsonSegment = JSON.stringify(segment);
    //store in a collection
    connectorSegmentCollection.push({ id: connector.id, segments: jsonSegment });
  });
}

Steps for Restoring Connector Segments:
To restore the connector configurations after performing a doLayout operation, follow these steps:

1. Deserialize JSON Data: Retrieve segments configuration by deserializing the stored JSON strings.
2. Reassign Segments: For each connector, assign the deserialized segments to restore them to their saved positions.

Below is the implementation of the resetSegments method:

// Method to restore the stored segments of the connectors
function resetSegments() {
  diagram.connectors.forEach(function (connector) {
    const foundSegment = connectorSegmentCollection.find(function (item) {
      return item.id === connector.id;
    });
    // If a matching id is found, assign its segments to the connector
    if (foundSegment) {
      //convert JSON string representations back into objects
      let parsedSegments = JSON.parse(foundSegment.segments);
      //returns an array containing the values of all enumerable properties of a segments object.
      let parsedArray = Object.values(parsedSegments);
      connector.segments = parsedArray;
    }
  });
}

By following this approach, you can ensure that manually adjusted connectors maintain their positions even after layout updates, providing a consistent user experience.

Sample: Click Here

Conclusion
Using this method, you can restore the manually positioned connectors after refreshing the automatic layout diagram. This ensures that critical connector configurations remain stable even after refreshing the layout diagram. You can refer to our JavaScript Diagram feature tour page to know about its other groundbreaking feature representations and documentation on 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!