mirror of
https://github.com/excalidraw/excalidraw
synced 2025-07-25 13:58:22 +08:00
Fix z-index so it works on hover
This commit is contained in:
@ -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 [
|
||||||
|
@ -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,
|
||||||
|
Reference in New Issue
Block a user