diff --git a/packages/element/src/binding.ts b/packages/element/src/binding.ts index e7bc98c04f..e374008bfa 100644 --- a/packages/element/src/binding.ts +++ b/packages/element/src/binding.ts @@ -67,6 +67,7 @@ import { deconstructRectanguloidElement, projectFixedPointOntoDiagonal, } from "./utils"; +import { moveArrowAboveBindable } from "./zindex"; import type { Scene } from "./Scene"; @@ -1084,6 +1085,7 @@ export const updateBoundElements = ( simultaneouslyUpdated?: readonly ExcalidrawElement[]; changedElements?: Map; indirectArrowUpdate?: boolean; + skipArrowZindexUpdate?: boolean; }, ) => { if (!isBindableElement(changedElement)) { @@ -1152,6 +1154,21 @@ export const updateBoundElements = ( ); if (point) { + if (!options?.skipArrowZindexUpdate) { + moveArrowAboveBindable( + LinearElementEditor.getPointGlobalCoordinates( + element, + point, + elementsMap, + ), + element, + scene.getNonDeletedElements(), + scene.getNonDeletedElementsMap(), + scene, + changedElement, + ); + } + return [ bindingProp === "startBinding" ? 0 : element.points.length - 1, { point }, diff --git a/packages/element/src/delta.ts b/packages/element/src/delta.ts index 97b9403bcc..e0b11bad57 100644 --- a/packages/element/src/delta.ts +++ b/packages/element/src/delta.ts @@ -1970,6 +1970,7 @@ export class ElementsDelta implements DeltaContainer { // TODO: with precise bindings this is quite expensive, so consider optimisation so it's only triggered when the arrow does not intersect (imprecise) element bounds updateBoundElements(element, scene, { changedElements: changed, + skipArrowZindexUpdate: true, }); } } diff --git a/packages/element/src/zindex.ts b/packages/element/src/zindex.ts index c4171c6bbd..7631c05ce1 100644 --- a/packages/element/src/zindex.ts +++ b/packages/element/src/zindex.ts @@ -18,7 +18,6 @@ import type { NonDeletedExcalidrawElement, NonDeletedSceneElementsMap, Ordered, - OrderedExcalidrawElement, } from "./types"; const isOfTargetFrame = (element: ExcalidrawElement, frameId: string) => { @@ -157,7 +156,7 @@ export const moveArrowAboveBindable = ( elementsMap: NonDeletedSceneElementsMap, scene: Scene, hit?: NonDeletedExcalidrawElement, -): readonly OrderedExcalidrawElement[] => { +) => { const hoveredElement = hit ? hit : getHoveredElementForBinding(point, elements, elementsMap);