How to achieve the behavior of EJ2 bezier connector like EJ1 bezier connector in Vue Diagram?

In the EJ1 Vue Diagram, after changing the control points of the Bezier connector at runtime and upon multiselecting and dragging the elements of the diagram, the control points of the connector are updated dynamically. However, in EJ2, the control points remain static. To address this issue, we can convert the points into vector points. This can be achieved by handling the ‘collectionChange’ event.

In the ‘collectionChange’ event, you can access essential information such as the ‘sourcePoint,’ ‘targetPoint,’ and the ‘segment points’ of the connectors. The segment points are fixed and cannot be directly modified. However, you can leverage these static segment points to calculate the vector points of the connector dynamically. This allows the vector points to automatically update based on changes in the positions of the source and target nodes. We can calculate the angle and distance by using getAngle and getDistance.

collectionChange:(args) =>{
       if (args.state === 'Changed' && args.type === 'Addition') {
           if (args.element instanceof Connector && args.element.type === 'Bezier') {
             let connector: any = args.element;
             let sourcePoint = connector.sourcePoint;
             let targetPoint = connector.targetPoint;
             let point1 = connector.segments[0].bezierPoint1;
             let point2 = connector.segments[0].bezierPoint2;
             let vector1 = {
               angle: getAngle(sourcePoint, point1),
               distance: getDistance(sourcePoint, point1),
             };
             let vector2 = {
               angle: getAngle(targetPoint, point2),
               distance: getDistance(targetPoint, point2),
             };
             connector.segments[0].vector1 = vector1;
             connector.segments[0].vector2 = vector2;
             diagram.dataBind();
           }
         }
     },

In the getAngle method, we calculate the angle between two points, point1 and point2. It uses the Math.atan2 function, which computes the angle in radians formed by the line connecting point1 and point2 with the x-axis. The result is then converted from radians to degrees by multiplying by (180 / Math.PI). This step converts the angle from radians (common in trigonometry) to degrees (more human-readable). To ensure the angle is always positive and within the range of 0 to 360 degrees, the function adds 360 and takes the modulus 360.

function getAngle(point1: any, point2: any) {
 let angle =
   Math.atan2(point2.y - point1.y, point2.x - point1.x) * (180 / Math.PI);
 angle = (angle + 360) % 360;
 return angle;
}

In getDistance method we calculates the distance between two points point1 and point2. It computes the differences in the x and y coordinates of the two points, resulting in dx (change in x) and dy (change in y).The function then uses the Pythagorean theorem (Math.sqrt(dx * dx + dy * dy)) to find the length of the line connecting the two points, which is the Euclidean distance between them.

function getDistance(point1: any, point2: any) {
     const distancex = point2.x - point1.x;
     const distancey = point2.y - point1.y;
     const distance = Math.sqrt(distancex * distancex + distancey * distancey);
     return distance;
   }

Refer to the working sample for additional details and implementation: Sample

Conclusion

We hope you enjoyed learning about how to achieve the behavior of the EJ2 Bezier connector like the EJ1 Bezier connector in Vue Diagram.

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