fix: Corner jumping & hints (#10403)

* fix: Corner jumping

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

* fix: Hints

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

* fix: No corner avoidance for simple arrows

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

* show alt/cmd hint when creating/moving arrow point any time

---------

Signed-off-by: Mark Tolmacs <mark@lazycat.hu>
Co-authored-by: dwelle <5153846+dwelle@users.noreply.github.com>

packages/element/src/binding.ts

@@ -1202,23 +1202,26 @@ export const bindPointToSnapToElementOutline = (
   customIntersector?: LineSegment<GlobalPoint>,
 ): GlobalPoint => {
   const elbowed = isElbowArrow(arrowElement);
-  const point =
+  const point = LinearElementEditor.getPointAtIndexGlobalCoordinates(
-    customIntersector && !elbowed
+    arrowElement,
-      ? customIntersector[0]
+    startOrEnd === "start" ? 0 : -1,
-      : LinearElementEditor.getPointAtIndexGlobalCoordinates(
+    elementsMap,
-          arrowElement,
+  );
-          startOrEnd === "start" ? 0 : -1,
-          elementsMap,
-        );
 
   if (arrowElement.points.length < 2) {
     // New arrow creation, so no snapping
     return point;
   }
 
-  const edgePoint = isRectanguloidElement(bindableElement)
+  const edgePoint =
-    ? avoidRectangularCorner(arrowElement, bindableElement, elementsMap, point)
+    isRectanguloidElement(bindableElement) && elbowed
-    : point;
+      ? avoidRectangularCorner(
+          arrowElement,
+          bindableElement,
+          elementsMap,
+          point,
+        )
+      : point;
   const adjacentPoint =
     customIntersector && !elbowed
       ? customIntersector[1]

packages/excalidraw/components/HintViewer.tsx

@@ -62,6 +62,20 @@ const getHints = ({
       shortcut: getTaggedShortcutKey("Alt"),
     });
   }
+
+  const selectedElements = app.scene.getSelectedElements(appState);
+
+  // creating or dragging arrow point
+  if (
+    appState.selectedLinearElement?.isDragging &&
+    selectedElements[0]?.type === "arrow"
+  ) {
+    return t("hints.arrowBindModifiers", {
+      shortcut_1: getTaggedShortcutKey("Ctrl"),
+      shortcut_2: getTaggedShortcutKey("Alt"),
+    });
+  }
+
   if (activeTool.type === "arrow" || activeTool.type === "line") {
     if (multiMode) {
       return t("hints.linearElementMulti", {
@@ -89,8 +103,6 @@ const getHints = ({
     return t("hints.embeddable");
   }
 
-  const selectedElements = app.scene.getSelectedElements(appState);
-
   if (
     isResizing &&
     lastPointerDownWith === "mouse" &&

packages/excalidraw/components/LayerUI.tsx

@@ -646,14 +646,8 @@ const LayerUI = ({
 };
 
 const stripIrrelevantAppStateProps = (appState: AppState): UIAppState => {
-  const {
+  const { startBoundElement, cursorButton, scrollX, scrollY, ...ret } =
-    suggestedBinding,
+    appState;
-    startBoundElement,
-    cursorButton,
-    scrollX,
-    scrollY,
-    ...ret
-  } = appState;
   return ret;
 };
 

packages/excalidraw/locales/en.json

@@ -341,7 +341,7 @@
     "canvasPanning": "To move canvas, hold {{shortcut_1}} or {{shortcut_2}} while dragging, or use the hand tool",
     "linearElement": "Click to start multiple points, drag for single line",
     "arrowTool": "Click to start multiple points, drag for single line. Press {{shortcut}} again to change arrow type.",
-    "arrowBindModifiers": "Hold {{shortcut_1}} to bind inside, or {{shortcut_2}} to disable binding",
+    "arrowBindModifiers": "Hold {{shortcut_1}} to disable binding, or {{shortcut_2}} to bind at a fixed point",
     "freeDraw": "Click and drag, release when you're finished",
     "text": "Tip: you can also add text by double-clicking anywhere with the selection tool",
     "embeddable": "Click-drag to create a website embed",

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

@@ -203,7 +203,7 @@ exports[`move element > rectangles with binding arrow 7`] = `
       0,
     ],
     [
-      79,
+      "79.00000",
       "124.16785",
     ],
   ],
@@ -228,7 +228,7 @@ exports[`move element > rectangles with binding arrow 7`] = `
   "updated": 1,
   "version": 12,
   "versionNonce": 2066753033,
-  "width": 79,
+  "width": "79.00000",
   "x": 111,
   "y": "6.14995",
 }

packages/excalidraw/types.ts

@@ -474,11 +474,7 @@ export type SearchMatch = {
 
 export type UIAppState = Omit<
   AppState,
-  | "suggestedBinding"
+  "startBoundElement" | "cursorButton" | "scrollX" | "scrollY"
-  | "startBoundElement"
-  | "cursorButton"
-  | "scrollX"
-  | "scrollY"
 >;
 
 export type NormalizedZoomValue = number & { _brand: "normalizedZoom" };