How to achieve the behavior of EJ2 bezier connector like EJ1 bezier connector using Angular Diagram?

This article explains how to achieve the behavior of the EJ2 Bézier connector like the EJ1 Bézier connector using Angular Diagram.

In the EJ1 diagram, after changing the control points of the Bézier connector at runtime and on multi-selecting and dragging the elements of the diagram, the control points of the connector are updated dynamically. But in EJ2, the control points remain static. To address this issue, we can convert the points into vector points. We can achieve this 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.

public collectionChange(args: ICollectionChangeEventArgs) {
   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: this.getAngle(sourcePoint, point1),
         distance: this.getDistance(sourcePoint, point1),
       };
       let vector2 = {
         angle: this.getAngle(targetPoint, point2),
         distance: this.getDistance(targetPoint, point2),
       };
       connector.segments[0].vector1 = vector1;
       connector.segments[0].vector2 = vector2;
       this.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 it with (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.

 public 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 the getDistance method, we calculate 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.

 public 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 Bézier connector like the EJ1 Bézier connector.

You can refer to our Angular Diagram feature tour page to learn about its other groundbreaking feature representations and documentation, and 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 explore 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!