How To Save And Restore Manual Position in Angular Diagram?

In this article, you can learn about how to save and restore manual positions in Angular Diagram. In the Syncfusion® Angular 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:

  storeSegments(): void {
    this.diagram.connectors.forEach(connector => {
      // Clone the segment to avoid circular references while stringifying
      const segments = cloneObject(connector.segments);
      const jsonSegments = JSON.stringify(segments);
      
      // Store in a collection
      connectorSegmentCollection.push({
        id: connector.id,
        segments: jsonSegments
      });
    });
  }

Steps for Restoring Connector Segments:

To restore the connector configurations after performing a doLayout operation, follow these steps:

1. Deserialize JSON Data: Retrieve the 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
  resetSegments(): void {
    this.diagram.connectors.forEach(connector => {
      const storedSegment = connectorSegmentCollection.find(segment => segment.id === connector.id);
      // If a matching id is found, assign its segments to the connector

      if (storedSegment) {
        // Convert JSON string representations back into objects
        const parsedSegments = JSON.parse(storedSegment.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

I hope you have enjoyed learning about how to save and restore manual positions in the Angular Diagram.

You can refer to our Angular 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 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 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!