Fix z-index so it works on hover

This commit is contained in:
Mark Tolmacs
2025-07-24 14:57:13 +02:00
parent 892d2f425d
commit 57e8734b3f
2 changed files with 44 additions and 11 deletions

View File

@ -24,9 +24,11 @@ import {
import { import {
bindingBorderTest, bindingBorderTest,
CaptureUpdateAction,
deconstructLinearOrFreeDrawElement, deconstructLinearOrFreeDrawElement,
getHoveredElementForBinding, getHoveredElementForBinding,
isPathALoop, isPathALoop,
moveArrowAboveBindable,
type Store, type Store,
} from "@excalidraw/element"; } from "@excalidraw/element";
@ -55,12 +57,16 @@ import {
import { headingIsHorizontal, vectorToHeading } from "./heading"; import { headingIsHorizontal, vectorToHeading } from "./heading";
import { mutateElement } from "./mutateElement"; import { mutateElement } from "./mutateElement";
import { getBoundTextElement, handleBindTextResize } from "./textElement";
import { import {
isArrowElement, getBoundTextElement,
getContainerElement,
handleBindTextResize,
} from "./textElement";
import {
isBindingElement, isBindingElement,
isElbowArrow, isElbowArrow,
isSimpleArrow, isSimpleArrow,
isTextElement,
} from "./typeChecks"; } from "./typeChecks";
import { ShapeCache, toggleLinePolygonState } from "./shape"; import { ShapeCache, toggleLinePolygonState } from "./shape";
@ -383,7 +389,7 @@ export class LinearElementEditor {
linearElementEditor, linearElementEditor,
event[KEYS.CTRL_OR_CMD] ? null : app.getEffectiveGridSize(), event[KEYS.CTRL_OR_CMD] ? null : app.getEffectiveGridSize(),
elements, elements,
app.state, app,
), ),
); );
} }
@ -1930,7 +1936,7 @@ const pointDraggingUpdates = (
linearElementEditor: LinearElementEditor, linearElementEditor: LinearElementEditor,
gridSize: NullableGridSize, gridSize: NullableGridSize,
elements: readonly Ordered<NonDeletedExcalidrawElement>[], elements: readonly Ordered<NonDeletedExcalidrawElement>[],
appState: AppState, app: AppClassProperties,
): PointsPositionUpdates => { ): PointsPositionUpdates => {
const [, , , , cx, cy] = getElementAbsoluteCoords(element, elementsMap, true); const [, , , , cx, cy] = getElementAbsoluteCoords(element, elementsMap, true);
const hasMidPoints = const hasMidPoints =
@ -1971,7 +1977,7 @@ const pointDraggingUpdates = (
newGlobalPointPosition, newGlobalPointPosition,
elements, elements,
elementsMap, elementsMap,
appState.zoom, app.state.zoom,
); );
const otherGlobalPoint = const otherGlobalPoint =
LinearElementEditor.getPointAtIndexGlobalCoordinates( LinearElementEditor.getPointAtIndexGlobalCoordinates(
@ -1985,14 +1991,14 @@ const pointDraggingUpdates = (
hoveredElement, hoveredElement,
otherGlobalPoint, otherGlobalPoint,
elementsMap, elementsMap,
appState.zoom, app.state.zoom,
); );
if ( if (
isBindingEnabled(appState) && isBindingEnabled(app.state) &&
isArrowElement(element) && isBindingElement(element, false) &&
hoveredElement && hoveredElement &&
appState.bindMode === "orbit" && app.state.bindMode === "orbit" &&
!otherPointInsideElement !otherPointInsideElement
) { ) {
newGlobalPointPosition = getOutlineAvoidingPoint( newGlobalPointPosition = getOutlineAvoidingPoint(
@ -2011,6 +2017,35 @@ const pointDraggingUpdates = (
newGlobalPointPosition[1] - linearElementEditor.pointerOffset.y, newGlobalPointPosition[1] - linearElementEditor.pointerOffset.y,
null, null,
); );
// Update z-index of the arrow
if (
isBindingEnabled(app.state) &&
isBindingElement(element) &&
hoveredElement
) {
const boundTextElement = getBoundTextElement(
hoveredElement,
elementsMap,
);
const containerElement = isTextElement(hoveredElement)
? getContainerElement(hoveredElement, elementsMap)
: null;
const newElements = moveArrowAboveBindable(
element,
[
hoveredElement.id,
boundTextElement?.id,
containerElement?.id,
].filter((id): id is NonDeletedExcalidrawElement["id"] => !!id),
app.scene,
);
app.syncActionResult({
elements: newElements,
captureUpdate: CaptureUpdateAction.IMMEDIATELY,
});
}
} }
return [ return [

View File

@ -6,7 +6,6 @@ import {
isArrowElement, isArrowElement,
isValidPolygon, isValidPolygon,
LinearElementEditor, LinearElementEditor,
moveArrowAboveBindable,
} from "@excalidraw/element"; } from "@excalidraw/element";
import { import {
@ -98,7 +97,6 @@ export const actionFinalize = register({
const bindableIds = []; const bindableIds = [];
start.element && bindableIds.push(start.element.id); start.element && bindableIds.push(start.element.id);
end.element && bindableIds.push(end.element.id); end.element && bindableIds.push(end.element.id);
newElements = moveArrowAboveBindable(element, bindableIds, scene);
if (linearElementEditor !== appState.selectedLinearElement) { if (linearElementEditor !== appState.selectedLinearElement) {
// `handlePointerUp()` updated the linear element instance, // `handlePointerUp()` updated the linear element instance,