fix: New arrow preserved projection

packages/element/src/binding.ts

@@ -151,6 +151,7 @@ export const bindOrUnbindBindingElement = (
   opts?: {
     newArrow?: boolean;
     altKey?: boolean;
+    initialBinding?: boolean;
   },
 ) => {
   const { start, end } = getBindingStrategyForDraggingBindingElementEndpoints(
@@ -557,6 +558,7 @@ export const getBindingStrategyForDraggingBindingElementEndpoints = (
     shiftKey?: boolean;
     altKey?: boolean;
     finalize?: boolean;
+    initialBinding?: boolean;
   },
 ): { start: BindingStrategy; end: BindingStrategy } => {
   if (getFeatureFlag("COMPLEX_BINDINGS")) {
@@ -591,6 +593,7 @@ const getBindingStrategyForDraggingBindingElementEndpoints_simple = (
     shiftKey?: boolean;
     altKey?: boolean;
     finalize?: boolean;
+    initialBinding?: boolean;
   },
 ): { start: BindingStrategy; end: BindingStrategy } => {
   const startIdx = 0;
@@ -658,28 +661,6 @@ const getBindingStrategyForDraggingBindingElementEndpoints_simple = (
     (e) => maxBindingGap_simple(e, e.width, e.height, appState.zoom),
   );
   const pointInElement = hit && isPointInElement(globalPoint, hit, elementsMap);
-
-  // Handle outside-outside binding with the same element
-  if (otherBinding && otherBinding.elementId === hit?.id && !pointInElement) {
-    const [startFixedPoint, endFixedPoint] = getGlobalFixedPoints(
-      arrow,
-      elementsMap,
-    );
-
-    return {
-      start: {
-        mode: "inside",
-        element: hit,
-        focusPoint: startDragged ? globalPoint : startFixedPoint,
-      },
-      end: {
-        mode: "inside",
-        element: hit,
-        focusPoint: endDragged ? globalPoint : endFixedPoint,
-      },
-    };
-  }
-
   const otherBindableElement = otherBinding
     ? (elementsMap.get(
         otherBinding.elementId,
@@ -703,6 +684,32 @@ const getBindingStrategyForDraggingBindingElementEndpoints_simple = (
     otherFocusPoint &&
     isPointInElement(otherFocusPoint, otherBindableElement, elementsMap);
 
+  // Handle outside-outside binding with the same element
+  if (
+    otherBinding &&
+    otherBinding.elementId === hit?.id &&
+    !pointInElement &&
+    !otherFocusPointIsInElement
+  ) {
+    const [startFixedPoint, endFixedPoint] = getGlobalFixedPoints(
+      arrow,
+      elementsMap,
+    );
+
+    return {
+      start: {
+        mode: "inside",
+        element: hit,
+        focusPoint: startDragged ? globalPoint : startFixedPoint,
+      },
+      end: {
+        mode: "inside",
+        element: hit,
+        focusPoint: endDragged ? globalPoint : endFixedPoint,
+      },
+    };
+  }
+
   const current: BindingStrategy = hit
     ? pointInElement || opts?.altKey
       ? {
@@ -736,7 +743,9 @@ const getBindingStrategyForDraggingBindingElementEndpoints_simple = (
             mode: "orbit",
             element: otherBindableElement,
             focusPoint:
-              projectFixedPointOntoDiagonal(
+              otherFocusPointIsInElement && !opts?.initialBinding
+                ? otherFocusPoint
+                : projectFixedPointOntoDiagonal(
                     arrow,
                     otherPoint,
                     otherBindableElement,
@@ -762,6 +771,7 @@ const getBindingStrategyForDraggingBindingElementEndpoints_complex = (
     newArrow?: boolean;
     shiftKey?: boolean;
     finalize?: boolean;
+    initialBinding?: boolean;
   },
 ): { start: BindingStrategy; end: BindingStrategy } => {
   const globalBindMode = appState.bindMode || "orbit";

packages/excalidraw/components/App.tsx

@@ -8616,7 +8616,7 @@ class App extends React.Component<AppProps, AppState> {
           ]),
           this.scene,
           this.state,
-          { newArrow: true, altKey: event.altKey },
+          { newArrow: true, altKey: event.altKey, initialBinding: true },
         );
       }