polygon weird redrawing by adding & dragging dynamic points (flickering)

I have co-ordinates for the points by taking which I draw a polygon. I can add points dynamically on the edges of the polygon and when I drag any point it should drag only the connected lines. As points can be added later on the edges so the point co-ordinates need to be ordered/sorted and the polygon should be redrawn by taking the ordered/sorted points so that on dragging any point the lines connected to the dragged point only should be dragged/updated. So to order/sort the points I am sorting the co-ordinates(2D-points) clockwise using Graham Scan/ sorting by polar angle.

My sorting code is

I find the center of the polygon like

function findCenter(points) {
  let x = 0,
    y = 0,
    i,
    len = points.length;

  for (i = 0; i < len; i++) {
    x += Number(points[i][0]);
    y += Number(points[i][1]);
  }

  return { x: x / len, y: y / len }; // return average position
}

Then I sort the points by finding angles of each point from the center like

function findAngle(points) {
  const center = findCenter(points);

  // find angle
  points.forEach((point) => {
    point.angle = Math.atan2(point[1] - center.y, point[0] - center.x);
  });
}

//arrVertexes is the array of points
arrVertexes.sort(function (a, b) {
    return a.angle >= b.angle ? 1 : -1;
  });

But the problem I am facing is if I drag any point more towards opposite side and add a new point on the edges afterward and drag the newly added point the sorting of co-ordinates is not ordered exactly because of which there is a flickering while dragging.

Here is a pictorial view of the problem I am facing for quick understanding.

• Initially my svg looks like

• After this I add a point and dragged like

• Then I added one more point like

• once I drag the added point towards down, it redraws the polygon something like (is not it weird ?)

• Actually It should be like

---

NOTE: I really don't know what logic should I apply to get the desire functionality. Seeking help from the community leads.

Demo App

So I am looking for a solution that won't give me weird redrawing of the lines. Only the connected lines to the dragged point should be dragged.

---

EDIT

I came up with MUCH BETTER solution. The only problem with this approach is, When I try to add a new point on left-vertical line and If I try to move it, that newly added point moves to top-horizontal line

Updated-Demo

from polygon weird redrawing by adding & dragging dynamic points (flickering)