Make z-index arrow reorder on bind

packages/element/src/binding.ts

@@ -55,6 +55,7 @@ import {
 
 import { aabbForElement, elementCenterPoint } from "./bounds";
 import { updateElbowArrowPoints } from "./elbowArrow";
+import { moveArrowAboveBindable } from "./zindex";
 
 import type { Scene } from "./Scene";
 
@@ -605,6 +606,8 @@ export const bindBindingElement = (
     };
   }
 
+  moveArrowAboveBindable(arrow, hoveredElement, scene);
+
   scene.mutateElement(arrow, {
     [startOrEnd === "start" ? "startBinding" : "endBinding"]: binding,
   });

packages/element/src/linearElementEditor.ts

@@ -68,7 +68,6 @@ import { ShapeCache, toggleLinePolygonState } from "./shape";
 import { getLockedLinearCursorAlignSize } from "./sizeHelpers";
 
 import { isLineElement } from "./typeChecks";
-import { moveAllRight } from "./zindex";
 
 import type { Scene } from "./Scene";
 
@@ -466,15 +465,6 @@ export class LinearElementEditor {
         customLineAngle,
       };
 
-      // When starting to drag an arrow point, bring the arrow to the front
-      if (isArrowElement(element)) {
-        const updatedElements = moveAllRight(
-          app.scene.getElementsIncludingDeleted(),
-          app.state,
-        );
-        app.scene.replaceAllElements(updatedElements);
-      }
-
       return {
         ...app.state,
         editingLinearElement: app.state.editingLinearElement

packages/element/src/zindex.ts

@@ -12,7 +12,12 @@ import { getSelectedElements } from "./selection";
 
 import type { Scene } from "./Scene";
 
-import type { ExcalidrawElement, ExcalidrawFrameLikeElement } from "./types";
+import type {
+  ExcalidrawArrowElement,
+  ExcalidrawBindableElement,
+  ExcalidrawElement,
+  ExcalidrawFrameLikeElement,
+} from "./types";
 
 const isOfTargetFrame = (element: ExcalidrawElement, frameId: string) => {
   return element.frameId === frameId || element.id === frameId;
@@ -139,6 +144,23 @@ const getContiguousFrameRangeElements = (
   return allElements.slice(rangeStart, rangeEnd + 1);
 };
 
+export const moveArrowAboveBindable = (
+  arrow: ExcalidrawArrowElement,
+  bindable: ExcalidrawBindableElement,
+  scene: Scene,
+) => {
+  const elements = scene.getElementsIncludingDeleted();
+  const bindableIdx = elements.findIndex((el) => el.id === bindable.id);
+  const arrowIdx = elements.findIndex((el) => el.id === arrow.id);
+
+  if (arrowIdx !== -1 && bindableIdx !== -1 && arrowIdx < bindableIdx) {
+    const updatedElements = Array.from(elements);
+    const arrow = updatedElements.splice(arrowIdx, 1)[0];
+    updatedElements.splice(bindableIdx, 0, arrow);
+    scene.replaceAllElements(updatedElements);
+  }
+};
+
 /**
  * Returns next candidate index that's available to be moved to. Currently that
  *  is a non-deleted element, and not inside a group (unless we're editing it).