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/element/linearElementEditor.ts

@@ -2,6 +2,8 @@ import {
   NonDeleted,
   ExcalidrawLinearElement,
   ExcalidrawElement,
+  PointBinding,
+  ExcalidrawBindableElement,
 } from "./types";
 import { distance2d, rotate, isPathALoop, getGridPoint } from "../math";
 import { getElementAbsoluteCoords } from ".";
@@ -11,6 +13,13 @@ import { mutateElement } from "./mutateElement";
 import { SceneHistory } from "../history";
 
 import Scene from "../scene/Scene";
+import {
+  bindOrUnbindLinearElement,
+  getHoveredElementForBinding,
+  isBindingEnabled,
+} from "./binding";
+import { tupleToCoors } from "../utils";
+import { isBindingElement } from "./typeChecks";
 
 export class LinearElementEditor {
   public elementId: ExcalidrawElement["id"] & {
@@ -21,6 +30,8 @@ export class LinearElementEditor {
   public isDragging: boolean;
   public lastUncommittedPoint: Point | null;
   public pointerOffset: { x: number; y: number };
+  public startBindingElement: ExcalidrawBindableElement | null | "keep";
+  public endBindingElement: ExcalidrawBindableElement | null | "keep";
 
   constructor(element: NonDeleted<ExcalidrawLinearElement>, scene: Scene) {
     this.elementId = element.id as string & {
@@ -33,6 +44,8 @@ export class LinearElementEditor {
     this.lastUncommittedPoint = null;
     this.isDragging = false;
     this.pointerOffset = { x: 0, y: 0 };
+    this.startBindingElement = "keep";
+    this.endBindingElement = "keep";
   }
 
   // ---------------------------------------------------------------------------
@@ -59,6 +72,10 @@ export class LinearElementEditor {
     setState: React.Component<any, AppState>["setState"],
     scenePointerX: number,
     scenePointerY: number,
+    maybeSuggestBinding: (
+      element: NonDeleted<ExcalidrawLinearElement>,
+      startOrEnd: "start" | "end",
+    ) => void,
   ): boolean {
     if (!appState.editingLinearElement) {
       return false;
@@ -88,13 +105,18 @@ export class LinearElementEditor {
         appState.gridSize,
       );
       LinearElementEditor.movePoint(element, activePointIndex, newPoint);
+      if (isBindingElement(element)) {
+        maybeSuggestBinding(element, activePointIndex === 0 ? "start" : "end");
+      }
       return true;
     }
     return false;
   }
 
   static handlePointerUp(
+    event: PointerEvent,
     editingLinearElement: LinearElementEditor,
+    appState: AppState,
   ): LinearElementEditor {
     const { elementId, activePointIndex, isDragging } = editingLinearElement;
     const element = LinearElementEditor.getElement(elementId);
@@ -102,22 +124,40 @@ export class LinearElementEditor {
       return editingLinearElement;
     }
 
+    let binding = {};
     if (
       isDragging &&
-      (activePointIndex === 0 ||
-        activePointIndex === element.points.length - 1) &&
-      isPathALoop(element.points)
+      (activePointIndex === 0 || activePointIndex === element.points.length - 1)
     ) {
-      LinearElementEditor.movePoint(
-        element,
-        activePointIndex,
-        activePointIndex === 0
-          ? element.points[element.points.length - 1]
-          : element.points[0],
-      );
+      if (isPathALoop(element.points)) {
+        LinearElementEditor.movePoint(
+          element,
+          activePointIndex,
+          activePointIndex === 0
+            ? element.points[element.points.length - 1]
+            : element.points[0],
+        );
+      }
+      const bindingElement = isBindingEnabled(appState)
+        ? getHoveredElementForBinding(
+            tupleToCoors(
+              LinearElementEditor.getPointAtIndexGlobalCoordinates(
+                element,
+                activePointIndex!,
+              ),
+            ),
+            Scene.getScene(element)!,
+          )
+        : null;
+      binding = {
+        [activePointIndex === 0
+          ? "startBindingElement"
+          : "endBindingElement"]: bindingElement,
+      };
     }
     return {
       ...editingLinearElement,
+      ...binding,
       isDragging: false,
       pointerOffset: { x: 0, y: 0 },
     };
@@ -128,8 +168,7 @@ export class LinearElementEditor {
     appState: AppState,
     setState: React.Component<any, AppState>["setState"],
     history: SceneHistory,
-    scenePointerX: number,
-    scenePointerY: number,
+    scenePointer: { x: number; y: number },
   ): {
     didAddPoint: boolean;
     hitElement: ExcalidrawElement | null;
@@ -151,14 +190,14 @@ export class LinearElementEditor {
     }
 
     if (event.altKey) {
-      if (!appState.editingLinearElement.lastUncommittedPoint) {
+      if (appState.editingLinearElement.lastUncommittedPoint == null) {
         mutateElement(element, {
           points: [
             ...element.points,
             LinearElementEditor.createPointAt(
               element,
-              scenePointerX,
-              scenePointerY,
+              scenePointer.x,
+              scenePointer.y,
               appState.gridSize,
             ),
           ],
@@ -170,6 +209,10 @@ export class LinearElementEditor {
           ...appState.editingLinearElement,
           activePointIndex: element.points.length - 1,
           lastUncommittedPoint: null,
+          endBindingElement: getHoveredElementForBinding(
+            scenePointer,
+            Scene.getScene(element)!,
+          ),
         },
       });
       ret.didAddPoint = true;
@@ -179,14 +222,31 @@ export class LinearElementEditor {
     const clickedPointIndex = LinearElementEditor.getPointIndexUnderCursor(
       element,
       appState.zoom,
-      scenePointerX,
-      scenePointerY,
+      scenePointer.x,
+      scenePointer.y,
     );
 
     // if we clicked on a point, set the element as hitElement otherwise
     //  it would get deselected if the point is outside the hitbox area
     if (clickedPointIndex > -1) {
       ret.hitElement = element;
+    } else {
+      // You might be wandering why we are storing the binding elements on
+      // LinearElementEditor and passing them in, insted of calculating them
+      // from the end points of the `linearElement` - this is to allow disabling
+      // binding (which needs to happen at the point the user finishes moving
+      // the point).
+      const {
+        startBindingElement,
+        endBindingElement,
+      } = appState.editingLinearElement;
+      if (isBindingEnabled(appState) && isBindingElement(element)) {
+        bindOrUnbindLinearElement(
+          element,
+          startBindingElement,
+          endBindingElement,
+        );
+      }
     }
 
     const [x1, y1, x2, y2] = getElementAbsoluteCoords(element);
@@ -208,8 +268,8 @@ export class LinearElementEditor {
         activePointIndex: clickedPointIndex > -1 ? clickedPointIndex : null,
         pointerOffset: targetPoint
           ? {
-              x: scenePointerX - targetPoint[0],
-              y: scenePointerY - targetPoint[1],
+              x: scenePointer.x - targetPoint[0],
+              y: scenePointer.y - targetPoint[1],
             }
           : { x: 0, y: 0 },
       },
@@ -237,7 +297,7 @@ export class LinearElementEditor {
       if (lastPoint === lastUncommittedPoint) {
         LinearElementEditor.movePoint(element, points.length - 1, "delete");
       }
-      return editingLinearElement;
+      return { ...editingLinearElement, lastUncommittedPoint: null };
     }
 
     const newPoint = LinearElementEditor.createPointAt(
@@ -276,6 +336,40 @@ export class LinearElementEditor {
     });
   }
 
+  static getPointAtIndexGlobalCoordinates(
+    element: NonDeleted<ExcalidrawLinearElement>,
+    indexMaybeFromEnd: number, // -1 for last element
+  ): Point {
+    const index =
+      indexMaybeFromEnd < 0
+        ? element.points.length + indexMaybeFromEnd
+        : indexMaybeFromEnd;
+    const [x1, y1, x2, y2] = getElementAbsoluteCoords(element);
+    const cx = (x1 + x2) / 2;
+    const cy = (y1 + y2) / 2;
+
+    const point = element.points[index];
+    const { x, y } = element;
+    return rotate(x + point[0], y + point[1], cx, cy, element.angle);
+  }
+
+  static pointFromAbsoluteCoords(
+    element: NonDeleted<ExcalidrawLinearElement>,
+    absoluteCoords: Point,
+  ): Point {
+    const [x1, y1, x2, y2] = getElementAbsoluteCoords(element);
+    const cx = (x1 + x2) / 2;
+    const cy = (y1 + y2) / 2;
+    const [x, y] = rotate(
+      absoluteCoords[0],
+      absoluteCoords[1],
+      cx,
+      cy,
+      -element.angle,
+    );
+    return [x - element.x, y - element.y];
+  }
+
   static getPointIndexUnderCursor(
     element: NonDeleted<ExcalidrawLinearElement>,
     zoom: AppState["zoom"],
@@ -343,10 +437,23 @@ export class LinearElementEditor {
     });
   }
 
+  static movePointByOffset(
+    element: NonDeleted<ExcalidrawLinearElement>,
+    pointIndex: number,
+    offset: { x: number; y: number },
+  ) {
+    const [x, y] = element.points[pointIndex];
+    LinearElementEditor.movePoint(element, pointIndex, [
+      x + offset.x,
+      y + offset.y,
+    ]);
+  }
+
   static movePoint(
     element: NonDeleted<ExcalidrawLinearElement>,
     pointIndex: number | "new",
     targetPosition: Point | "delete",
+    otherUpdates?: { startBinding?: PointBinding; endBinding?: PointBinding },
   ) {
     const { points } = element;
 
@@ -412,6 +519,7 @@ export class LinearElementEditor {
     const rotated = rotate(offsetX, offsetY, dX, dY, element.angle);
 
     mutateElement(element, {
+      ...otherUpdates,
       points: nextPoints,
       x: element.x + rotated[0],
       y: element.y + rotated[1],