title: polygon weird redrawing by adding & dragging dynamic points (flickering)
body: <p>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 <em><strong>need to be ordered/sorted</strong></em> 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) <em><strong>clockwise</strong></em> using  <em><strong>Graham Scan/ sorting by polar angle</strong></em>.</p>
  <p>My sorting code is</p>
  <p>I find the center of the polygon like</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>function findCenter(points) {
    let x = 0,
      y = 0,
      i,
      len = points.length;
  
    for (i = 0; i &lt; len; i++) {
      x += Number(points[i][0]);
      y += Number(points[i][1]);
    }
  
    return { x: x / len, y: y / len }; // return average position
  }</code></pre>
  </div>
  </div>
  </p>
  <p>Then I sort the points by finding angles of each point from the center like</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>function findAngle(points) {
    const center = findCenter(points);
  
    // find angle
    points.forEach((point) =&gt; {
      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 &gt;= b.angle ? 1 : -1;
    });</code></pre>
  </div>
  </div>
  </p>
  <p>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.</p>
  <p>Here is a pictorial view of the problem I am facing for quick understanding.</p>
  <ul>
  <li><strong>Initially my svg looks like</strong></li>
  </ul>
  <p><a href="https://i.stack.imgur.com/1LZyN.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/1LZyN.png" alt="enter image description here" /></a></p>
  <ul>
  <li><strong>After this I add a point and dragged like</strong></li>
  </ul>
  <p><a href="https://i.stack.imgur.com/Dfn4m.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Dfn4m.png" alt="enter image description here" /></a></p>
  <ul>
  <li><strong>Then I added one more point like</strong></li>
  </ul>
  <p><a href="https://i.stack.imgur.com/6rIcB.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/6rIcB.png" alt="enter image description here" /></a></p>
  <ul>
  <li><strong>once I drag the added point towards down, it redraws the polygon something like (is not it weird ?)</strong></li>
  </ul>
  <p><a href="https://i.stack.imgur.com/WCgu4.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/WCgu4.png" alt="enter image description here" /></a></p>
  <ul>
  <li><strong>Actually It should be like</strong></li>
  </ul>
  <p><a href="https://i.stack.imgur.com/HvLpb.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/HvLpb.png" alt="enter image description here" /></a></p>
  <hr>
  <blockquote>
  <p><strong>NOTE: I really don't know what logic should I apply to get the desire functionality. Seeking help from the community leads.</strong></p>
  </blockquote>
  <blockquote>
  <p><strong><h2><a href="https://codepen.io/jinata92/pen/MWyoepo?editors=0010" rel="nofollow noreferrer">Demo App</a></h2></strong></p>
  </blockquote>
  <blockquote>
  <p>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.</p>
  </blockquote>
  <Hr>
  <h1>EDIT</h1>
  <p><strong>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</strong></p>
  <p><strong><h2><a href="https://codepen.io/jinata92/pen/bGpZZdW" rel="nofollow noreferrer">Updated-Demo</a></h2></strong></p>