Merge branch 'master' into mtolmacs/fix/lost-focus-point

Signed-off-by: Mark Tolmacs <mark@lazycat.hu>

packages/element/src/arrows/focus.ts

@@ -27,6 +27,7 @@ import type {
   ElementsMap,
   ExcalidrawArrowElement,
   ExcalidrawBindableElement,
+  FixedPointBinding,
   NonDeletedSceneElementsMap,
   PointsPositionUpdates,
 } from "../types";
@@ -110,10 +111,17 @@ const focusPointUpdate = (
 ) => {
   const pointUpdates = new Map();
 
+  const originalAdjacentBinding =
+    appState.selectedLinearElement?.initialState
+      .arrowOtherEndpointInitialBinding;
   const bindingField = isStartBinding ? "startBinding" : "endBinding";
   const adjacentBindingField = isStartBinding ? "endBinding" : "startBinding";
   let currentBinding = arrow[bindingField];
-  let adjacentBinding = arrow[adjacentBindingField];
+  let adjacentBinding =
+    originalAdjacentBinding?.mode === "orbit" &&
+    arrow[adjacentBindingField]?.mode === "inside"
+      ? originalAdjacentBinding
+      : arrow[adjacentBindingField];
 
   // Update the dragged focus point related end
   if (currentBinding && bindableElement) {
@@ -163,7 +171,7 @@ const focusPointUpdate = (
       // Same shape bound on both ends
       const boundToSameElementAfterUpdate =
         bindableElement && adjacentBinding.elementId === bindableElement.id;
-      if (switchToInsideBinding || boundToSameElementAfterUpdate) {
+      if (boundToSameElementAfterUpdate) {
         adjacentBinding = {
           ...adjacentBinding,
           mode: "inside",
@@ -339,6 +347,7 @@ export const handleFocusPointPointerDown = (
 ): {
   hitFocusPoint: "start" | "end" | null;
   pointerOffset: { x: number; y: number };
+  arrowOtherEndpointInitialBinding: FixedPointBinding | null;
 } => {
   const pointerPos = pointFrom(
     pointerDownState.origin.x,
@@ -376,6 +385,7 @@ export const handleFocusPointPointerDown = (
             x: pointerPos[0] - focusPoint[0],
             y: pointerPos[1] - focusPoint[1],
           },
+          arrowOtherEndpointInitialBinding: arrow.endBinding,
         };
       }
     }
@@ -411,6 +421,7 @@ export const handleFocusPointPointerDown = (
             x: pointerPos[0] - focusPoint[0],
             y: pointerPos[1] - focusPoint[1],
           },
+          arrowOtherEndpointInitialBinding: arrow.startBinding,
         };
       }
     }
@@ -419,13 +430,14 @@ export const handleFocusPointPointerDown = (
   return {
     hitFocusPoint: null,
     pointerOffset: { x: 0, y: 0 },
+    arrowOtherEndpointInitialBinding: null,
   };
 };
 
 export const handleFocusPointPointerUp = (
   linearElementEditor: LinearElementEditor,
   scene: Scene,
-) => {
+): { arrowOtherEndpointInitialBinding: FixedPointBinding | null } => {
   invariant(
     linearElementEditor.draggedFocusPointBinding,
     "Must have a dragged focus point at pointer release",
@@ -483,6 +495,10 @@ export const handleFocusPointPointerUp = (
       ],
     });
   }
+
+  return {
+    arrowOtherEndpointInitialBinding: null,
+  };
 };
 
 export const handleFocusPointHover = (

packages/element/src/binding.ts

@@ -694,6 +694,7 @@ const getBindingStrategyForDraggingBindingElementEndpoints_simple = (
     localPoint,
     elementsMap,
   );
+
   const hit = getHoveredElementForBinding(
     globalPoint,
     elements,
@@ -748,6 +749,15 @@ const getBindingStrategyForDraggingBindingElementEndpoints_simple = (
           : // NOTE: Can only affect the start point because new arrows always drag the end point
           opts?.newArrow
           ? appState.selectedLinearElement!.initialState.origin!
+          : otherBindableElement &&
+            appState.selectedLinearElement?.initialState
+              ?.arrowOtherEndpointInitialBinding?.fixedPoint
+          ? getGlobalFixedPointForBindableElement(
+              appState.selectedLinearElement?.initialState
+                .arrowOtherEndpointInitialBinding.fixedPoint,
+              otherBindableElement,
+              elementsMap,
+            )
           : LinearElementEditor.getPointAtIndexGlobalCoordinates(
               arrow,
               0,
@@ -759,6 +769,15 @@ const getBindingStrategyForDraggingBindingElementEndpoints_simple = (
         element: hit,
         focusPoint: endDragged
           ? globalPoint
+          : otherBindableElement &&
+            appState.selectedLinearElement?.initialState
+              ?.arrowOtherEndpointInitialBinding?.fixedPoint
+          ? getGlobalFixedPointForBindableElement(
+              appState.selectedLinearElement?.initialState
+                .arrowOtherEndpointInitialBinding.fixedPoint,
+              otherBindableElement,
+              elementsMap,
+            )
           : LinearElementEditor.getPointAtIndexGlobalCoordinates(
               arrow,
               -1,
@@ -831,36 +850,57 @@ const getBindingStrategyForDraggingBindingElementEndpoints_simple = (
       threshold: maxBindingDistance_simple(appState.zoom),
       overrideShouldTestInside: true,
     });
+  const otherPointWasInsideAtStart =
+    appState.selectedLinearElement?.initialState
+      .arrowOtherEndpointInitialBinding?.mode === "inside";
   const otherNeverOverride = opts?.newArrow
     ? appState.selectedLinearElement?.initialState.arrowStartIsInside
-    : otherBinding?.mode === "inside";
-  const other: BindingStrategy = !otherNeverOverride
-    ? otherBindableElement &&
+    : otherBinding?.mode === "inside" && otherPointWasInsideAtStart;
+
+  let other: BindingStrategy = { mode: undefined };
+  if (!otherNeverOverride) {
+    if (
+      otherBinding?.mode === "inside" &&
+      !otherPointWasInsideAtStart &&
+      otherBindableElement
+    ) {
+      other = {
+        mode: "orbit",
+        element: otherBindableElement,
+        focusPoint: getGlobalFixedPointForBindableElement(
+          otherBinding.fixedPoint,
+          otherBindableElement,
+          elementsMap,
+        ),
+      };
+    } else if (
+      otherBindableElement &&
       !otherFocusPointIsInElement &&
       !pointIsCloseToOtherElement &&
       appState.selectedLinearElement?.initialState.altFocusPoint
-      ? {
-          mode: "orbit",
-          element: otherBindableElement,
-          focusPoint: appState.selectedLinearElement.initialState.altFocusPoint,
-        }
-      : opts?.angleLocked && otherBindableElement
-      ? {
-          mode: "orbit",
-          element: otherBindableElement,
-          focusPoint:
-            projectFixedPointOntoDiagonal(
-              arrow,
-              otherEndpoint,
-              otherBindableElement,
-              startDragged ? "end" : "start",
-              elementsMap,
-              appState.zoom,
-              appState.isMidpointSnappingEnabled,
-            ) || otherEndpoint,
-        }
-      : { mode: undefined }
-    : { mode: undefined };
+    ) {
+      other = {
+        mode: "orbit",
+        element: otherBindableElement,
+        focusPoint: appState.selectedLinearElement.initialState.altFocusPoint,
+      };
+    } else if (opts?.angleLocked && otherBindableElement) {
+      other = {
+        mode: "orbit",
+        element: otherBindableElement,
+        focusPoint:
+          projectFixedPointOntoDiagonal(
+            arrow,
+            otherEndpoint,
+            otherBindableElement,
+            startDragged ? "end" : "start",
+            elementsMap,
+            appState.zoom,
+            appState.isMidpointSnappingEnabled,
+          ) || otherEndpoint,
+      };
+    }
+  }
 
   return {
     start: startDragged ? current : other,

packages/element/src/linearElementEditor.ts

@@ -141,6 +141,7 @@ export class LinearElementEditor {
     };
     arrowStartIsInside: boolean;
     altFocusPoint: Readonly<GlobalPoint> | null;
+    arrowOtherEndpointInitialBinding: FixedPointBinding | null;
   }>;
 
   /** whether you're dragging a point */
@@ -193,6 +194,7 @@ export class LinearElementEditor {
         added: false,
       },
       arrowStartIsInside: false,
+      arrowOtherEndpointInitialBinding: null,
       altFocusPoint: null,
     };
     this.hoverPointIndex = -1;
@@ -764,6 +766,7 @@ export class LinearElementEditor {
         ...editingLinearElement.initialState,
         origin: null,
         arrowStartIsInside: false,
+        arrowOtherEndpointInitialBinding: null,
       },
     };
   }
@@ -1085,6 +1088,7 @@ export class LinearElementEditor {
             !!app.state.newElement &&
             (app.state.bindMode === "inside" || app.state.bindMode === "skip"),
           altFocusPoint: null,
+          arrowOtherEndpointInitialBinding: element.startBinding,
         },
         selectedPointsIndices: [element.points.length - 1],
         lastUncommittedPoint: null,
@@ -1147,6 +1151,9 @@ export class LinearElementEditor {
           !!app.state.newElement &&
           (app.state.bindMode === "inside" || app.state.bindMode === "skip"),
         altFocusPoint: null,
+        arrowOtherEndpointInitialBinding: nextSelectedPointsIndices?.includes(0)
+          ? element.endBinding
+          : element.startBinding,
       },
       selectedPointsIndices: nextSelectedPointsIndices,
       pointerOffset: targetPoint
@@ -2409,22 +2416,21 @@ const pointDraggingUpdates = (
       )! as ExcalidrawBindableElement)
     : null;
 
-  const endLocalPoint = startIsDraggingOverEndElement
-    ? nextArrow.points[nextArrow.points.length - 1]
-    : endIsDraggingOverStartElement &&
-      app.state.bindMode !== "inside" &&
-      getFeatureFlag("COMPLEX_BINDINGS")
-    ? nextArrow.points[0]
-    : endBindable
-    ? updateBoundPoint(
-        nextArrow,
-        "endBinding",
-        nextArrow.endBinding,
-        endBindable,
-        elementsMap,
-        endIsDragged,
-      ) || nextArrow.points[nextArrow.points.length - 1]
-    : nextArrow.points[nextArrow.points.length - 1];
+  const endLocalPoint =
+    endIsDraggingOverStartElement &&
+    app.state.bindMode !== "inside" &&
+    getFeatureFlag("COMPLEX_BINDINGS")
+      ? nextArrow.points[0]
+      : endBindable
+      ? updateBoundPoint(
+          nextArrow,
+          "endBinding",
+          nextArrow.endBinding,
+          endBindable,
+          elementsMap,
+          endIsDragged,
+        ) || nextArrow.points[nextArrow.points.length - 1]
+      : nextArrow.points[nextArrow.points.length - 1];
 
   // We need to keep the simulated next arrow up-to-date, because
   // updateBoundPoint looks at the opposite point
@@ -2458,13 +2464,11 @@ const pointDraggingUpdates = (
       : nextArrow.points[0];
 
   const endChanged =
-    !startIsDraggingOverEndElement &&
     !(
       endIsDraggingOverStartElement &&
       app.state.bindMode !== "inside" &&
       getFeatureFlag("COMPLEX_BINDINGS")
-    ) &&
-    !!endBindable;
+    ) && !!endBindable;
   const startChanged =
     pointDistance(startLocalPoint, nextArrow.points[0]) !== 0;
 

packages/excalidraw/components/App.tsx

@@ -8618,13 +8618,16 @@ class App extends React.Component<AppProps, AppState> {
           ) as any;
 
           if (arrow && isBindingElement(arrow)) {
-            const { hitFocusPoint, pointerOffset } =
-              handleFocusPointPointerDown(
-                arrow,
-                pointerDownState,
-                elementsMap,
-                this.state,
-              );
+            const {
+              hitFocusPoint,
+              pointerOffset,
+              arrowOtherEndpointInitialBinding,
+            } = handleFocusPointPointerDown(
+              arrow,
+              pointerDownState,
+              elementsMap,
+              this.state,
+            );
 
             // If focus point is hit, update state and prevent element selection
             if (hitFocusPoint) {
@@ -8634,6 +8637,10 @@ class App extends React.Component<AppProps, AppState> {
                   hoveredFocusPointBinding: hitFocusPoint,
                   draggedFocusPointBinding: hitFocusPoint,
                   pointerOffset,
+                  initialState: {
+                    ...linearElementEditor.initialState,
+                    arrowOtherEndpointInitialBinding,
+                  },
                 },
               });
               return false;
@@ -10756,14 +10763,19 @@ class App extends React.Component<AppProps, AppState> {
         }
 
         if (this.state.selectedLinearElement.draggedFocusPointBinding) {
-          handleFocusPointPointerUp(
-            this.state.selectedLinearElement,
-            this.scene,
-          );
+          const { arrowOtherEndpointInitialBinding } =
+            handleFocusPointPointerUp(
+              this.state.selectedLinearElement,
+              this.scene,
+            );
           this.setState({
             selectedLinearElement: {
               ...this.state.selectedLinearElement,
               draggedFocusPointBinding: null,
+              initialState: {
+                ...this.state.selectedLinearElement.initialState,
+                arrowOtherEndpointInitialBinding,
+              },
             },
           });
         } else if (

packages/excalidraw/tests/__snapshots__/regressionTests.test.tsx.snap

@@ -8665,6 +8665,7 @@ exports[`regression tests > key 5 selects arrow tool > [end of test] appState 1`
     "hoveredFocusPointBinding": null,
     "initialState": {
       "altFocusPoint": null,
+      "arrowOtherEndpointInitialBinding": null,
       "arrowStartIsInside": false,
       "lastClickedPoint": -1,
       "origin": null,
@@ -8898,6 +8899,7 @@ exports[`regression tests > key 6 selects line tool > [end of test] appState 1`]
     "hoveredFocusPointBinding": null,
     "initialState": {
       "altFocusPoint": null,
+      "arrowOtherEndpointInitialBinding": null,
       "arrowStartIsInside": false,
       "lastClickedPoint": -1,
       "origin": null,
@@ -9321,6 +9323,7 @@ exports[`regression tests > key a selects arrow tool > [end of test] appState 1`
     "hoveredFocusPointBinding": null,
     "initialState": {
       "altFocusPoint": null,
+      "arrowOtherEndpointInitialBinding": null,
       "arrowStartIsInside": false,
       "lastClickedPoint": -1,
       "origin": null,
@@ -9734,6 +9737,7 @@ exports[`regression tests > key l selects line tool > [end of test] appState 1`]
     "hoveredFocusPointBinding": null,
     "initialState": {
       "altFocusPoint": null,
+      "arrowOtherEndpointInitialBinding": null,
       "arrowStartIsInside": false,
       "lastClickedPoint": -1,
       "origin": null,