Reintroduce multi-point arrows and add migration for it (#635)

* Revert "Revert "Feature: Multi Point Arrows (#338)" (#634)"

This reverts commit 3d2e59bfed.

* Convert old arrow spec to new one

* Remove unnecessary failchecks and fix context transform issue in retina displays

* Remove old points failcheck from getArrowAbsoluteBounds

* Remove all failchecks for old arrow

* remove the rest of unnecessary checks

* Set default values for the arrow during import

* Add translations

* fix restore using unmigrated elements for state computation

* don't use width/height when migrating from new arrow spec

Co-authored-by: David Luzar <luzar.david@gmail.com>
Co-authored-by: Christopher Chedeau <vjeuxx@gmail.com>

src/math.ts

@@ -1,3 +1,5 @@
+import { Point } from "roughjs/bin/geometry";
+
 // https://stackoverflow.com/a/6853926/232122
 export function distanceBetweenPointAndSegment(
   x: number,
@@ -52,3 +54,66 @@ export function rotate(
     (x1 - x2) * Math.sin(angle) + (y1 - y2) * Math.cos(angle) + y2,
   ];
 }
+
+export const getPointOnAPath = (point: Point, path: Point[]) => {
+  const [px, py] = point;
+  const [start, ...other] = path;
+  let [lastX, lastY] = start;
+  let kLine: number = 0;
+  let idx: number = 0;
+
+  // if any item in the array is true, it means that a point is
+  // on some segment of a line based path
+  const retVal = other.some(([x2, y2], i) => {
+    // we always take a line when dealing with line segments
+    const x1 = lastX;
+    const y1 = lastY;
+
+    lastX = x2;
+    lastY = y2;
+
+    // if a point is not within the domain of the line segment
+    // it is not on the line segment
+    if (px < x1 || px > x2) {
+      return false;
+    }
+
+    // check if all points lie on the same line
+    // y1 = kx1 + b, y2 = kx2 + b
+    // y2 - y1 = k(x2 - x2) -> k = (y2 - y1) / (x2 - x1)
+
+    // coefficient for the line (p0, p1)
+    const kL = (y2 - y1) / (x2 - x1);
+
+    // coefficient for the line segment (p0, point)
+    const kP1 = (py - y1) / (px - x1);
+
+    // coefficient for the line segment (point, p1)
+    const kP2 = (py - y2) / (px - x2);
+
+    // because we are basing both lines from the same starting point
+    // the only option for collinearity is having same coefficients
+
+    // using it for floating point comparisons
+    const epsilon = 0.3;
+
+    // if coefficient is more than an arbitrary epsilon,
+    // these lines are nor collinear
+    if (Math.abs(kP1 - kL) > epsilon && Math.abs(kP2 - kL) > epsilon) {
+      return false;
+    }
+
+    // store the coefficient because we are goint to need it
+    kLine = kL;
+    idx = i;
+
+    return true;
+  });
+
+  // Return a coordinate that is always on the line segment
+  if (retVal === true) {
+    return { x: point[0], y: kLine * point[0], segment: idx };
+  }
+
+  return null;
+};