How To Save And Restore Manual Position In JavaScript Diagram?

This article explains a technique to save and restore manual connector configurations, ensuring consistent connector placement even after layout refreshes. 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.

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:

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.

Refer to the working sample for additional details and implementation: Click Here

Conclusion

We hope you have enjoyed learning about how to save and restore manual positions in JavaScript diagrams.
You can refer to our JavaScript Diagram feature tour page to learn 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, BoldDesk Support, or feedback portal. We are always happy to assist you!