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/actions/actionDeleteSelected.tsx

@@ -11,6 +11,7 @@ import { AppState } from "../types";
 import { newElementWith } from "../element/mutateElement";
 import { getElementsInGroup } from "../groups";
 import { LinearElementEditor } from "../element/linearElementEditor";
+import { fixBindingsAfterDeletion } from "../element/binding";
 
 const deleteSelectedElements = (
   elements: readonly ExcalidrawElement[],
@@ -53,7 +54,12 @@ export const actionDeleteSelected = register({
   name: "deleteSelectedElements",
   perform: (elements, appState) => {
     if (appState.editingLinearElement) {
-      const { elementId, activePointIndex } = appState.editingLinearElement;
+      const {
+        elementId,
+        activePointIndex,
+        startBindingElement,
+        endBindingElement,
+      } = appState.editingLinearElement;
       const element = LinearElementEditor.getElement(elementId);
       if (!element) {
         return false;
@@ -62,7 +68,7 @@ export const actionDeleteSelected = register({
         // case: no point selected → delete whole element
         activePointIndex == null ||
         activePointIndex === -1 ||
-        // case: deleting last point
+        // case: deleting last remaining point
         element.points.length < 2
       ) {
         const nextElements = elements.filter((el) => el.id !== element.id);
@@ -78,6 +84,17 @@ export const actionDeleteSelected = register({
         };
       }
 
+      // We cannot do this inside `movePoint` because it is also called
+      // when deleting the uncommitted point (which hasn't caused any binding)
+      const binding = {
+        startBindingElement:
+          activePointIndex === 0 ? null : startBindingElement,
+        endBindingElement:
+          activePointIndex === element.points.length - 1
+            ? null
+            : endBindingElement,
+      };
+
       LinearElementEditor.movePoint(element, activePointIndex, "delete");
 
       return {
@@ -86,6 +103,7 @@ export const actionDeleteSelected = register({
           ...appState,
           editingLinearElement: {
             ...appState.editingLinearElement,
+            ...binding,
             activePointIndex: activePointIndex > 0 ? activePointIndex - 1 : 0,
           },
         },
@@ -97,6 +115,10 @@ export const actionDeleteSelected = register({
       elements: nextElements,
       appState: nextAppState,
     } = deleteSelectedElements(elements, appState);
+    fixBindingsAfterDeletion(
+      nextElements,
+      elements.filter(({ id }) => appState.selectedElementIds[id]),
+    );
 
     nextAppState = handleGroupEditingState(nextAppState, nextElements);
 

src/actions/actionDuplicateSelection.tsx

@@ -11,6 +11,9 @@ import { getShortcutKey } from "../utils";
 import { LinearElementEditor } from "../element/linearElementEditor";
 import { mutateElement } from "../element/mutateElement";
 import { selectGroupsForSelectedElements } from "../groups";
+import { AppState } from "../types";
+import { fixBindingsAfterDuplication } from "../element/binding";
+import { ActionResult } from "./types";
 
 export const actionDuplicateSelection = register({
   name: "duplicateSelection",
@@ -50,40 +53,8 @@ export const actionDuplicateSelection = register({
       };
     }
 
-    const groupIdMap = new Map();
-    const newElements: ExcalidrawElement[] = [];
-    const finalElements = elements.reduce(
-      (acc: Array<ExcalidrawElement>, element: ExcalidrawElement) => {
-        if (appState.selectedElementIds[element.id]) {
-          const newElement = duplicateElement(
-            appState.editingGroupId,
-            groupIdMap,
-            element,
-            {
-              x: element.x + 10,
-              y: element.y + 10,
-            },
-          );
-          newElements.push(newElement);
-          return acc.concat([element, newElement]);
-        }
-        return acc.concat(element);
-      },
-      [],
-    );
     return {
-      appState: selectGroupsForSelectedElements(
-        {
-          ...appState,
-          selectedGroupIds: {},
-          selectedElementIds: newElements.reduce((acc, element) => {
-            acc[element.id] = true;
-            return acc;
-          }, {} as any),
-        },
-        getNonDeletedElements(finalElements),
-      ),
-      elements: finalElements,
+      ...duplicateElements(elements, appState),
       commitToHistory: true,
     };
   },
@@ -102,3 +73,49 @@ export const actionDuplicateSelection = register({
     />
   ),
 });
+
+const duplicateElements = (
+  elements: readonly ExcalidrawElement[],
+  appState: AppState,
+): Partial<ActionResult> => {
+  const groupIdMap = new Map();
+  const newElements: ExcalidrawElement[] = [];
+  const oldElements: ExcalidrawElement[] = [];
+  const oldIdToDuplicatedId = new Map();
+  const finalElements = elements.reduce(
+    (acc: Array<ExcalidrawElement>, element: ExcalidrawElement) => {
+      if (appState.selectedElementIds[element.id]) {
+        const newElement = duplicateElement(
+          appState.editingGroupId,
+          groupIdMap,
+          element,
+          {
+            x: element.x + 10,
+            y: element.y + 10,
+          },
+        );
+        oldIdToDuplicatedId.set(element.id, newElement.id);
+        oldElements.push(element);
+        newElements.push(newElement);
+        return acc.concat([element, newElement]);
+      }
+      return acc.concat(element);
+    },
+    [],
+  );
+  fixBindingsAfterDuplication(finalElements, oldElements, oldIdToDuplicatedId);
+  return {
+    elements: finalElements,
+    appState: selectGroupsForSelectedElements(
+      {
+        ...appState,
+        selectedGroupIds: {},
+        selectedElementIds: newElements.reduce((acc, element) => {
+          acc[element.id] = true;
+          return acc;
+        }, {} as any),
+      },
+      getNonDeletedElements(finalElements),
+    ),
+  };
+};

src/actions/actionFinalize.tsx

@@ -9,15 +9,32 @@ import { register } from "./register";
 import { mutateElement } from "../element/mutateElement";
 import { isPathALoop } from "../math";
 import { LinearElementEditor } from "../element/linearElementEditor";
+import Scene from "../scene/Scene";
+import {
+  maybeBindLinearElement,
+  bindOrUnbindLinearElement,
+} from "../element/binding";
+import { isBindingElement } from "../element/typeChecks";
 
 export const actionFinalize = register({
   name: "finalize",
   perform: (elements, appState) => {
     if (appState.editingLinearElement) {
-      const { elementId } = appState.editingLinearElement;
+      const {
+        elementId,
+        startBindingElement,
+        endBindingElement,
+      } = appState.editingLinearElement;
       const element = LinearElementEditor.getElement(elementId);
 
       if (element) {
+        if (isBindingElement(element)) {
+          bindOrUnbindLinearElement(
+            element,
+            startBindingElement,
+            endBindingElement,
+          );
+        }
         return {
           elements:
             element.points.length < 2 || isInvisiblySmallElement(element)
@@ -66,11 +83,12 @@ export const actionFinalize = register({
       // If the multi point line closes the loop,
       // set the last point to first point.
       // This ensures that loop remains closed at different scales.
+      const isLoop = isPathALoop(multiPointElement.points);
       if (
         multiPointElement.type === "line" ||
         multiPointElement.type === "draw"
       ) {
-        if (isPathALoop(multiPointElement.points)) {
+        if (isLoop) {
           const linePoints = multiPointElement.points;
           const firstPoint = linePoints[0];
           mutateElement(multiPointElement, {
@@ -83,6 +101,23 @@ export const actionFinalize = register({
         }
       }
 
+      if (
+        isBindingElement(multiPointElement) &&
+        !isLoop &&
+        multiPointElement.points.length > 1
+      ) {
+        const [x, y] = LinearElementEditor.getPointAtIndexGlobalCoordinates(
+          multiPointElement,
+          -1,
+        );
+        maybeBindLinearElement(
+          multiPointElement,
+          appState,
+          Scene.getScene(multiPointElement)!,
+          { x, y },
+        );
+      }
+
       if (!appState.elementLocked) {
         appState.selectedElementIds[multiPointElement.id] = true;
       }
@@ -101,6 +136,8 @@ export const actionFinalize = register({
         draggingElement: null,
         multiElement: null,
         editingElement: null,
+        startBoundElement: null,
+        suggestedBindings: [],
         selectedElementIds:
           multiPointElement && !appState.elementLocked
             ? {

src/actions/actionHistory.tsx

@@ -9,6 +9,7 @@ import { AppState } from "../types";
 import { KEYS } from "../keys";
 import { getElementMap } from "../element";
 import { newElementWith } from "../element/mutateElement";
+import { fixBindingsAfterDeletion } from "../element/binding";
 
 const writeData = (
   prevElements: readonly ExcalidrawElement[],
@@ -31,6 +32,9 @@ const writeData = (
     const nextElements = data.elements;
     const nextElementMap = getElementMap(nextElements);
 
+    const deletedElements = prevElements.filter(
+      (prevElement) => !nextElementMap.hasOwnProperty(prevElement.id),
+    );
     const elements = nextElements
       .map((nextElement) =>
         newElementWith(
@@ -39,14 +43,11 @@ const writeData = (
         ),
       )
       .concat(
-        prevElements
-          .filter(
-            (prevElement) => !nextElementMap.hasOwnProperty(prevElement.id),
-          )
-          .map((prevElement) =>
-            newElementWith(prevElement, { isDeleted: true }),
-          ),
+        deletedElements.map((prevElement) =>
+          newElementWith(prevElement, { isDeleted: true }),
+        ),
       );
+    fixBindingsAfterDeletion(elements, deletedElements);
 
     return {
       elements,