How to achieve the behavior of EJ2 bezier connector like EJ1 bezier connector

In the EJ1 diagram, after changing the control points of the bezier connector at run-time and on multiselecting 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.

collectionChange: function (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: 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 getAngle method we calculates 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 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.

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;
   }

Sample