Allow binding linear elements to other elements (#1899)

* Refactor: simplify linear element type

* Refactor: dedupe scrollbar handling

* First step towards binding - establish relationship and basic test for dragged lines

* Refactor: use zoom from appstate

* Refactor: generalize getElementAtPosition

* Only consider bindable elements in hit test

* Refactor: pull out pieces of hit test for reuse later

* Refactor: pull out diamond from hit test for reuse later

* Refactor: pull out text from hit test for reuse later

* Suggest binding when hovering

* Give shapes in regression test real size

* Give shapes in undo/redo test real size

* Keep bound element highlighted

* Show binding suggestion for multi-point elements

* Move binding to its on module with functions so that I can use it from actions, add support for binding end of multi-point elements

* Use Id instead of ID

* Improve boundary offset for non-squarish elements

* Fix localStorage for binding on linear elements

* Simplify dragging code and fix elements bound twice to the same shape

* Fix binding for rectangles

* Bind both ends at the end of the linear element creation, needed for focus points

* wip

* Refactor: Renames and reshapes for next commit

* Calculate and store focus points and gaps, but dont use them yet

* Focus points for rectangles

* Dont blow up when canceling linear element

* Stop suggesting binding when a non-compatible tool is selected

* Clean up collision code

* Using Geometric Algebra for hit tests

* Correct binding for all shapes

* Constant gap around polygon corners

* Fix rotation handling

* Generalize update and fix hit test for rotated elements

* Handle rotation realtime

* Handle scaling

* Remove vibration when moving bound and binding element together

* Handle simultenous scaling

* Allow binding and unbinding when editing linear elements

* Dont delete binding when the end point wasnt touched

* Bind on enter/escape when editing

* Support multiple suggested bindable elements in preparation for supporting linear elements dragging

* Update binding when moving linear elements

* Update binding when resizing linear elements

* Dont re-render UI on binding hints

* Update both ends when one is moved

* Use distance instead of focus point for binding

* Complicated approach for posterity, ignore this commit

* Revert the complicated approach

* Better focus point strategy, working for all shapes

* Update snapshots

* Dont break binding gap when mirroring shape

* Dont break binding gap when grid mode pushes it inside

* Dont bind draw elements

* Support alt duplication

* Fix alt duplication to

* Support cmd+D duplication

* All copy mechanisms are supported

* Allow binding shapes to arrows, having arrows created first

* Prevent arrows from disappearing for ellipses

* Better binding suggestion highlight for shapes

* Dont suggest second binding for simple elements when editing or moving them

* Dont steal already bound linear elements when moving shapes

* Fix highlighting diamonds and more precisely highlight other shapes

* Highlight linear element edges for binding

* Highlight text binding too

* Handle deletion

* Dont suggest second binding for simple linear elements when creating them

* Dont highlight bound element during creation

* Fix binding for rotated linear elements

* Fix collision check for ellipses

* Dont show suggested bindings for selected pairs

* Bind multi-point linear elements when the tool is switched - important for mobile

* Handle unbinding one of two bound edges correctly

* Rename boundElement in state to startBoundElement

* Dont double account for zoom when rendering binding highlight

* Fix rendering of edited linear element point handles

* Suggest binding when adding new point to a linear element

* Bind when adding a new point to a linear element and dont unbind when moving middle elements

* Handle deleting points

* Add cmd modifier key to disable binding

* Use state for enabling binding, fix not binding for linear elements during creation

* Drop support for binding lines, only arrows are bindable

* Reset binding mode on blur

* Fix not binding lines

src/math.ts

@@ -2,45 +2,6 @@ import { Point } from "./types";
 import { LINE_CONFIRM_THRESHOLD } from "./constants";
 import { ExcalidrawLinearElement } from "./element/types";
 
-// https://stackoverflow.com/a/6853926/232122
-export const distanceBetweenPointAndSegment = (
-  x: number,
-  y: number,
-  x1: number,
-  y1: number,
-  x2: number,
-  y2: number,
-) => {
-  const A = x - x1;
-  const B = y - y1;
-  const C = x2 - x1;
-  const D = y2 - y1;
-
-  const dot = A * C + B * D;
-  const lenSquare = C * C + D * D;
-  let param = -1;
-  if (lenSquare !== 0) {
-    // in case of 0 length line
-    param = dot / lenSquare;
-  }
-
-  let xx, yy;
-  if (param < 0) {
-    xx = x1;
-    yy = y1;
-  } else if (param > 1) {
-    xx = x2;
-    yy = y2;
-  } else {
-    xx = x1 + param * C;
-    yy = y1 + param * D;
-  }
-
-  const dx = x - xx;
-  const dy = y - yy;
-  return Math.hypot(dx, dy);
-};
-
 export const rotate = (
   x1: number,
   y1: number,
@@ -230,6 +191,10 @@ export const distance2d = (x1: number, y1: number, x2: number, y2: number) => {
   return Math.hypot(xd, yd);
 };
 
+export const centerPoint = (a: Point, b: Point): Point => {
+  return [(a[0] + b[0]) / 2, (a[1] + b[1]) / 2];
+};
+
 // Checks if the first and last point are close enough
 // to be considered a loop
 export const isPathALoop = (
@@ -265,9 +230,9 @@ export const isPointInPolygon = (
   for (let i = 0; i < vertices; i++) {
     const current = points[i];
     const next = points[(i + 1) % vertices];
-    if (doIntersect(current, next, p, extreme)) {
-      if (orientation(current, p, next) === 0) {
-        return onSegment(current, p, next);
+    if (doSegmentsIntersect(current, next, p, extreme)) {
+      if (orderedColinearOrientation(current, p, next) === 0) {
+        return isPointWithinBounds(current, p, next);
       }
       count++;
     }
@@ -276,8 +241,9 @@ export const isPointInPolygon = (
   return count % 2 === 1;
 };
 
-// Check if q lies on the line segment pr
-const onSegment = (p: Point, q: Point, r: Point) => {
+// Returns whether `q` lies inside the segment/rectangle defined by `p` and `r`.
+// This is an approximation to "does `q` lie on a segment `pr`" check.
+const isPointWithinBounds = (p: Point, q: Point, r: Point) => {
   return (
     q[0] <= Math.max(p[0], r[0]) &&
     q[0] >= Math.min(p[0], r[0]) &&
@@ -287,10 +253,10 @@ const onSegment = (p: Point, q: Point, r: Point) => {
 };
 
 // For the ordered points p, q, r, return
-// 0 if p, q, r are collinear
+// 0 if p, q, r are colinear
 // 1 if Clockwise
 // 2 if counterclickwise
-const orientation = (p: Point, q: Point, r: Point) => {
+const orderedColinearOrientation = (p: Point, q: Point, r: Point) => {
   const val = (q[1] - p[1]) * (r[0] - q[0]) - (q[0] - p[0]) * (r[1] - q[1]);
   if (val === 0) {
     return 0;
@@ -299,33 +265,33 @@ const orientation = (p: Point, q: Point, r: Point) => {
 };
 
 // Check is p1q1 intersects with p2q2
-const doIntersect = (p1: Point, q1: Point, p2: Point, q2: Point) => {
-  const o1 = orientation(p1, q1, p2);
-  const o2 = orientation(p1, q1, q2);
-  const o3 = orientation(p2, q2, p1);
-  const o4 = orientation(p2, q2, q1);
+const doSegmentsIntersect = (p1: Point, q1: Point, p2: Point, q2: Point) => {
+  const o1 = orderedColinearOrientation(p1, q1, p2);
+  const o2 = orderedColinearOrientation(p1, q1, q2);
+  const o3 = orderedColinearOrientation(p2, q2, p1);
+  const o4 = orderedColinearOrientation(p2, q2, q1);
 
   if (o1 !== o2 && o3 !== o4) {
     return true;
   }
 
   // p1, q1 and p2 are colinear and p2 lies on segment p1q1
-  if (o1 === 0 && onSegment(p1, p2, q1)) {
+  if (o1 === 0 && isPointWithinBounds(p1, p2, q1)) {
     return true;
   }
 
   // p1, q1 and p2 are colinear and q2 lies on segment p1q1
-  if (o2 === 0 && onSegment(p1, q2, q1)) {
+  if (o2 === 0 && isPointWithinBounds(p1, q2, q1)) {
     return true;
   }
 
   // p2, q2 and p1 are colinear and p1 lies on segment p2q2
-  if (o3 === 0 && onSegment(p2, p1, q2)) {
+  if (o3 === 0 && isPointWithinBounds(p2, p1, q2)) {
     return true;
   }
 
   // p2, q2 and q1 are colinear and q1 lies on segment p2q2
-  if (o4 === 0 && onSegment(p2, q1, q2)) {
+  if (o4 === 0 && isPointWithinBounds(p2, q1, q2)) {
     return true;
   }