fix: Disable drag drag when arrow is bound

This commit is contained in:
Mark Tolmacs
2025-09-02 16:14:20 +02:00
parent 8dae900bbb
commit 4f43399951

View File

@@ -25,9 +25,7 @@ import {
import { import {
deconstructLinearOrFreeDrawElement, deconstructLinearOrFreeDrawElement,
distanceToElement,
isPathALoop, isPathALoop,
isPointInElement,
moveArrowAboveBindable, moveArrowAboveBindable,
type Store, type Store,
} from "@excalidraw/element"; } from "@excalidraw/element";
@@ -46,7 +44,6 @@ import type {
import { import {
calculateFixedPointForNonElbowArrowBinding, calculateFixedPointForNonElbowArrowBinding,
getBindingStrategyForDraggingBindingElementEndpoints, getBindingStrategyForDraggingBindingElementEndpoints,
getFixedBindingDistance,
isBindingEnabled, isBindingEnabled,
maybeSuggestBindingsForBindingElementAtCoords, maybeSuggestBindingsForBindingElementAtCoords,
updateBoundPoint, updateBoundPoint,
@@ -60,12 +57,7 @@ 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 { getBoundTextElement, handleBindTextResize } from "./textElement";
import { import { isArrowElement, isBindingElement, isElbowArrow } from "./typeChecks";
isArrowElement,
isBindingElement,
isElbowArrow,
isSimpleArrow,
} from "./typeChecks";
import { ShapeCache, toggleLinePolygonState } from "./shape"; import { ShapeCache, toggleLinePolygonState } from "./shape";
@@ -466,14 +458,15 @@ export class LinearElementEditor {
deltaX = target[0] - draggingPoint[0]; deltaX = target[0] - draggingPoint[0];
deltaY = target[1] - draggingPoint[1]; deltaY = target[1] - draggingPoint[1];
} else if ( } else if (
shouldAllowDraggingPoint( // shouldAllowDraggingPoint(
element, // element,
scenePointerX, // scenePointerX,
scenePointerY, // scenePointerY,
selectedPointsIndices, // selectedPointsIndices,
elementsMap, // elementsMap,
app, // app,
) // )
true
) { ) {
const newDraggingPointPosition = LinearElementEditor.createPointAt( const newDraggingPointPosition = LinearElementEditor.createPointAt(
element, element,
@@ -2254,48 +2247,48 @@ const pointDraggingUpdates = (
}; };
}; };
const shouldAllowDraggingPoint = ( // const shouldAllowDraggingPoint = (
element: ExcalidrawLinearElement, // element: ExcalidrawLinearElement,
scenePointerX: number, // scenePointerX: number,
scenePointerY: number, // scenePointerY: number,
selectedPointsIndices: readonly number[], // selectedPointsIndices: readonly number[],
elementsMap: Readonly<NonDeletedSceneElementsMap>, // elementsMap: Readonly<NonDeletedSceneElementsMap>,
app: AppClassProperties, // app: AppClassProperties,
) => { // ) => {
if (!isSimpleArrow(element)) { // if (!isSimpleArrow(element)) {
return true; // return true;
} // }
const scenePointer = pointFrom<GlobalPoint>(scenePointerX, scenePointerY); // const scenePointer = pointFrom<GlobalPoint>(scenePointerX, scenePointerY);
// Do not allow dragging the bound arrow closer to the shape than // // Do not allow dragging the bound arrow closer to the shape than
// the dragging threshold // // the dragging threshold
let allowDrag = true; // let allowDrag = true;
if (selectedPointsIndices.includes(0) && element.startBinding) { // if (selectedPointsIndices.includes(0) && element.startBinding) {
const boundElement = elementsMap.get( // const boundElement = elementsMap.get(
element.startBinding.elementId, // element.startBinding.elementId,
)! as ExcalidrawBindableElement; // )! as ExcalidrawBindableElement;
const dist = distanceToElement(boundElement, elementsMap, scenePointer); // const dist = distanceToElement(boundElement, elementsMap, scenePointer);
const inside = isPointInElement(scenePointer, boundElement, elementsMap); // const inside = isPointInElement(scenePointer, boundElement, elementsMap);
allowDrag = // allowDrag =
allowDrag && (dist > getFixedBindingDistance(boundElement) || inside); // allowDrag && (dist > getFixedBindingDistance(boundElement) || inside);
} // }
if ( // if (
selectedPointsIndices.includes(element.points.length - 1) && // selectedPointsIndices.includes(element.points.length - 1) &&
element.endBinding // element.endBinding
) { // ) {
const boundElement = elementsMap.get( // const boundElement = elementsMap.get(
element.endBinding.elementId, // element.endBinding.elementId,
)! as ExcalidrawBindableElement; // )! as ExcalidrawBindableElement;
const dist = distanceToElement(boundElement, elementsMap, scenePointer); // const dist = distanceToElement(boundElement, elementsMap, scenePointer);
const inside = isPointInElement(scenePointer, boundElement, elementsMap); // const inside = isPointInElement(scenePointer, boundElement, elementsMap);
allowDrag = // allowDrag =
allowDrag && (dist > getFixedBindingDistance(boundElement) || inside); // allowDrag && (dist > getFixedBindingDistance(boundElement) || inside);
} // }
return allowDrag; // return allowDrag;
}; // };
const determineCustomLinearAngle = ( const determineCustomLinearAngle = (
pivotPoint: LocalPoint, pivotPoint: LocalPoint,