fix: Remove duplicated grid snapping

Signed-off-by: Mark Tolmacs <mark@lazycat.hu>
This commit is contained in:
Mark Tolmacs
2026-03-17 20:21:45 +00:00
parent 7b2496bfd7
commit d9ab298526
2 changed files with 4 additions and 94 deletions
+4 -79
View File
@@ -1,7 +1,6 @@
import {
arrayToMap,
getFeatureFlag,
getGridPoint,
invariant,
isTransparent,
} from "@excalidraw/common";
@@ -200,8 +199,6 @@ export const bindOrUnbindBindingElement = (
arrow.startBinding,
start.element,
scene.getNonDeletedElementsMap(),
undefined,
opts?.gridSize,
) || arrow.points[0],
});
}
@@ -215,8 +212,6 @@ export const bindOrUnbindBindingElement = (
arrow.endBinding,
end.element,
scene.getNonDeletedElementsMap(),
undefined,
opts?.gridSize,
) || arrow.points[arrow.points.length - 1],
});
}
@@ -1752,54 +1747,6 @@ const extractBinding = (
const elementArea = (element: ExcalidrawBindableElement) =>
element.width * element.height;
/**
* Snaps a bound arrow endpoint to the grid on the axis parallel to the
* bindable element's side, while preserving the binding gap distance on the
* perpendicular axis. In other words, the grid axis closest to the side's
* perpendicular (normal) is used as the snap axis and the other axis is kept at
* the binding gap distance.
*/
const snapBoundPointToGrid = (
outlinePoint: GlobalPoint,
bindableElement: ExcalidrawBindableElement,
elementsMap: ElementsMap,
gridSize: NullableGridSize,
): GlobalPoint => {
if (!gridSize) {
return outlinePoint;
}
const aabb = aabbForElement(bindableElement, elementsMap);
const heading = headingForPointFromElement(
bindableElement,
aabb,
outlinePoint,
);
const normalLocal = pointFrom<GlobalPoint>(heading[0], heading[1]);
const normalGlobal = pointRotateRads(
normalLocal,
pointFrom<GlobalPoint>(0, 0),
bindableElement.angle,
);
const absNX = Math.abs(normalGlobal[0]);
const absNY = Math.abs(normalGlobal[1]);
if (absNX >= absNY) {
// Global X is closest to the perpendicular → keep X, snap Y
const [, snappedY] = getGridPoint(
outlinePoint[0],
outlinePoint[1],
gridSize,
);
return pointFrom<GlobalPoint>(outlinePoint[0], snappedY);
}
// Global Y is closest to the perpendicular → keep Y, snap X
const [snappedX] = getGridPoint(outlinePoint[0], outlinePoint[1], gridSize);
return pointFrom<GlobalPoint>(snappedX, outlinePoint[1]);
};
export const updateBoundPoint = (
arrow: NonDeleted<ExcalidrawArrowElement>,
startOrEnd: "startBinding" | "endBinding",
@@ -1807,7 +1754,6 @@ export const updateBoundPoint = (
bindableElement: ExcalidrawBindableElement,
elementsMap: ElementsMap,
dragging?: boolean,
gridSize?: NullableGridSize,
): LocalPoint | null => {
if (
binding == null ||
@@ -1927,24 +1873,11 @@ export const updateBoundPoint = (
// and short-circuit to the focus point if the arrow is too short to
// avoid inversion
if (!otherBindable) {
const snapped =
!arrowTooShort && outlinePoint
? snapBoundPointToGrid(
outlinePoint,
bindableElement,
elementsMap,
gridSize ?? null,
)
: null;
return LinearElementEditor.createPointAt(
arrow,
elementsMap,
arrowTooShort
? focusPoint[0]
: snapped?.[0] ?? outlinePoint?.[0] ?? focusPoint[0],
arrowTooShort
? focusPoint[1]
: snapped?.[1] ?? outlinePoint?.[1] ?? focusPoint[1],
arrowTooShort ? focusPoint[0] : outlinePoint?.[0] ?? focusPoint[0],
arrowTooShort ? focusPoint[1] : outlinePoint?.[1] ?? focusPoint[1],
null,
);
}
@@ -1963,19 +1896,11 @@ export const updateBoundPoint = (
}
// 4. In the general case, snap to the outline if possible
const snappedOutline = outlinePoint
? snapBoundPointToGrid(
outlinePoint,
bindableElement,
elementsMap,
gridSize ?? null,
)
: null;
return LinearElementEditor.createPointAt(
arrow,
elementsMap,
snappedOutline?.[0] ?? outlinePoint?.[0] ?? focusPoint[0],
snappedOutline?.[1] ?? outlinePoint?.[1] ?? focusPoint[1],
outlinePoint?.[0] || focusPoint[0],
outlinePoint?.[1] || focusPoint[1],
null,
);
};
@@ -344,9 +344,6 @@ export class LinearElementEditor {
// Apply the point movement if needed
let suggestedBinding: AppState["suggestedBinding"] = null;
const effectiveGridSize = event[KEYS.CTRL_OR_CMD]
? null
: app.getEffectiveGridSize();
const { positions, updates } = pointDraggingUpdates(
[idx],
deltaX,
@@ -360,7 +357,6 @@ export class LinearElementEditor {
shouldRotateWithDiscreteAngle(event),
event.altKey,
linearElementEditor,
effectiveGridSize,
);
const angleLocked = shouldRotateWithDiscreteAngle(event);
@@ -543,9 +539,6 @@ export class LinearElementEditor {
// Apply the point movement if needed
let suggestedBinding: AppState["suggestedBinding"] = null;
const effectiveGridSize = event[KEYS.CTRL_OR_CMD]
? null
: app.getEffectiveGridSize();
const { positions, updates } = pointDraggingUpdates(
selectedPointsIndices,
deltaX,
@@ -559,7 +552,6 @@ export class LinearElementEditor {
shouldRotateWithDiscreteAngle(event) && singlePointDragged,
event.altKey,
linearElementEditor,
effectiveGridSize,
);
const angleLocked =
@@ -2137,7 +2129,6 @@ const pointDraggingUpdates = (
angleLocked: boolean,
altKey: boolean,
linearElementEditor: LinearElementEditor,
gridSize?: NullableGridSize,
): {
positions: PointsPositionUpdates;
updates?: PointMoveOtherUpdates;
@@ -2236,8 +2227,6 @@ const pointDraggingUpdates = (
element.startBinding,
startBindable,
elementsMap,
undefined,
gridSize,
) ?? null;
if (startPoint) {
positions.set(0, { point: startPoint, isDragging: true });
@@ -2257,8 +2246,6 @@ const pointDraggingUpdates = (
element.endBinding,
endBindable,
elementsMap,
undefined,
gridSize,
) ?? null;
if (endPoint) {
positions.set(element.points.length - 1, {
@@ -2432,7 +2419,6 @@ const pointDraggingUpdates = (
endBindable,
elementsMap,
endIsDragged,
endIsDragged ? gridSize : null,
) || nextArrow.points[nextArrow.points.length - 1]
: nextArrow.points[nextArrow.points.length - 1];
@@ -2464,7 +2450,6 @@ const pointDraggingUpdates = (
startBindable,
elementsMap,
startIsDragged,
startIsDragged ? gridSize : null,
) || nextArrow.points[0]
: nextArrow.points[0];