How To Save And Restore Manual Position Connectors in Vue Diagram?

In the Syncfusion® Vue 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() {
    this.$refs.diagramInstance.ej2Instances.connectors.forEach((connector) => {
      //clone the segment to avoid circular references while stringify 
      let segment = cloneObject(connector.segments);
      const jsonSegment = JSON.stringify(segment);
      //store in a collection
      this.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
  resetSegments() {
    this.$refs.diagramInstance.ej2Instances.connectors.forEach((connector) => {
      const foundSegment = this.connectorSegmentCollection.find(item => 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 position connectors in Vue Diagram.

You can refer to our Vue Diagram feature tour page to know about its other groundbreaking feature representations and documentation and how to quickly get started for configuration specifications.

You can also explore our Vue 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!