feat: extend line snapping to creation

This commit is contained in:
Ryan Di 2025-06-16 20:55:27 +10:00
parent 5403fa8a0d
commit 07640dd756
8 changed files with 155 additions and 57 deletions

View File

@ -107,6 +107,7 @@ export * from "./ShapeCache";
export * from "./shapes";
export * from "./showSelectedShapeActions";
export * from "./sizeHelpers";
export * from "./snapping";
export * from "./sortElements";
export * from "./store";
export * from "./textElement";

View File

@ -20,6 +20,11 @@ import {
tupleToCoors,
} from "@excalidraw/common";
import {
type SnapLine,
snapLinearElementPoint,
} from "@excalidraw/element/snapping";
import type { Store } from "@excalidraw/element";
import type { Radians } from "@excalidraw/math";
@ -33,11 +38,6 @@ import type {
Zoom,
} from "@excalidraw/excalidraw/types";
import {
SnapLine,
snapLinearElementPoint,
} from "@excalidraw/excalidraw/snapping";
import type { Mutable } from "@excalidraw/common/utility-types";
import {
@ -388,6 +388,7 @@ export class LinearElementEditor {
app,
event,
elementsMap,
{ includeSelfPoints: true }, // Include element's own points for snapping when editing
);
_snapLines = snapLines;
@ -1045,10 +1046,12 @@ export class LinearElementEditor {
return {
...appState.editingLinearElement,
lastUncommittedPoint: null,
snapLines: [],
};
}
let newPoint: LocalPoint;
let snapLines: SnapLine[] = [];
if (shouldRotateWithDiscreteAngle(event) && points.length >= 2) {
const lastCommittedPoint = points[points.length - 2];
@ -1066,11 +1069,32 @@ export class LinearElementEditor {
height + lastCommittedPoint[1],
);
} else {
const originalPointerX =
scenePointerX - appState.editingLinearElement.pointerOffset.x;
const originalPointerY =
scenePointerY - appState.editingLinearElement.pointerOffset.y;
const { snapOffset, snapLines: snappingLines } = snapLinearElementPoint(
app.scene.getNonDeletedElements(),
element,
points.length - 1,
{ x: originalPointerX, y: originalPointerY },
app,
event,
elementsMap,
{ includeSelfPoints: true },
);
snapLines = snappingLines;
const snappedPointerX = originalPointerX + snapOffset.x;
const snappedPointerY = originalPointerY + snapOffset.y;
newPoint = LinearElementEditor.createPointAt(
element,
elementsMap,
scenePointerX - appState.editingLinearElement.pointerOffset.x,
scenePointerY - appState.editingLinearElement.pointerOffset.y,
snappedPointerX,
snappedPointerY,
event[KEYS.CTRL_OR_CMD] || isElbowArrow(element)
? null
: app.getEffectiveGridSize(),
@ -1096,6 +1120,7 @@ export class LinearElementEditor {
return {
...appState.editingLinearElement,
lastUncommittedPoint: element.points[element.points.length - 1],
snapLines,
};
}

View File

@ -1,4 +1,5 @@
import {
isCloseTo,
pointFrom,
pointRotateRads,
rangeInclusive,
@ -13,7 +14,11 @@ import {
getDraggedElementsBounds,
getElementAbsoluteCoords,
} from "@excalidraw/element";
import { isBoundToContainer, isFrameLikeElement, isElbowArrow } from "@excalidraw/element";
import {
isBoundToContainer,
isFrameLikeElement,
isElbowArrow,
} from "@excalidraw/element";
import { getMaximumGroups } from "@excalidraw/element";
@ -37,7 +42,7 @@ import type {
AppClassProperties,
AppState,
KeyboardModifiersObject,
} from "./types";
} from "@excalidraw/excalidraw/types";
const SNAP_DISTANCE = 8;
@ -200,12 +205,8 @@ export const getLinearElementPoints = (
): GlobalPoint[] => {
const { dragOffset, excludePointIndex } = options;
// Only process linear elements and freedraw
if (
element.type !== "line" &&
element.type !== "arrow" &&
element.type !== "freedraw"
) {
// Only process linear elements
if (element.type !== "line" && element.type !== "arrow") {
return [];
}
@ -292,11 +293,13 @@ export const getElementsCorners = (
const halfHeight = (y2 - y1) / 2;
if (
(element.type === "line" || element.type === "arrow" || element.type === "freedraw") &&
(element.type === "line" || element.type === "arrow") &&
!boundingBoxCorners
) {
// For linear elements, use actual points instead of bounding box
const linearPoints = getLinearElementPoints(element, elementsMap, { dragOffset });
const linearPoints = getLinearElementPoints(element, elementsMap, {
dragOffset,
});
result = linearPoints;
} else if (
(element.type === "diamond" || element.type === "ellipse") &&
@ -710,7 +713,12 @@ export const getReferenceSnapPointsForLinearElementPoint = (
editingPointIndex: number,
appState: AppState,
elementsMap: ElementsMap,
options: {
includeSelfPoints?: boolean;
} = {},
) => {
const { includeSelfPoints = false } = options;
// Get all reference elements (excluding the one being edited)
const referenceElements = getReferenceElements(
elements,
@ -719,21 +727,28 @@ export const getReferenceSnapPointsForLinearElementPoint = (
elementsMap,
);
let allSnapPoints: GlobalPoint[] = [];
const allSnapPoints: GlobalPoint[] = [];
// Add snap points from all reference elements
const referenceGroups = getMaximumGroups(referenceElements, elementsMap)
.filter(
(elementsGroup) =>
!(elementsGroup.length === 1 && isBoundToContainer(elementsGroup[0])),
);
const referenceGroups = getMaximumGroups(
referenceElements,
elementsMap,
).filter(
(elementsGroup) =>
!(elementsGroup.length === 1 && isBoundToContainer(elementsGroup[0])),
);
for (const elementGroup of referenceGroups) {
allSnapPoints.push(...getElementsCorners(elementGroup, elementsMap));
}
// Note: We do not include other points from the same linear element
// as reference points when dragging a point, per user feedback
// Include other points from the same linear element when creating new points or in editing mode
if (includeSelfPoints) {
const elementPoints = getLinearElementPoints(editingElement, elementsMap, {
excludePointIndex: editingPointIndex >= 0 ? editingPointIndex : undefined,
});
allSnapPoints.push(...elementPoints);
}
return allSnapPoints;
};
@ -746,9 +761,14 @@ export const snapLinearElementPoint = (
app: AppClassProperties,
event: KeyboardModifiersObject,
elementsMap: ElementsMap,
options: {
includeSelfPoints?: boolean;
} = {},
) => {
if (!isSnappingEnabled({ app, event, selectedElements: [editingElement] }) ||
isElbowArrow(editingElement)) {
if (
!isSnappingEnabled({ app, event, selectedElements: [editingElement] }) ||
isElbowArrow(editingElement)
) {
return {
snapOffset: { x: 0, y: 0 },
snapLines: [],
@ -771,10 +791,14 @@ export const snapLinearElementPoint = (
editingPointIndex,
app.state,
elementsMap,
options,
);
// Create a snap point for the current point position
const currentPointGlobal = pointFrom<GlobalPoint>(pointPosition.x, pointPosition.y);
const currentPointGlobal = pointFrom<GlobalPoint>(
pointPosition.x,
pointPosition.y,
);
// Find nearest snaps
for (const referencePoint of referenceSnapPoints) {
@ -817,40 +841,40 @@ export const snapLinearElementPoint = (
// Create snap lines using the snapped position (fixed position)
let pointSnapLines: SnapLine[] = [];
if (snapOffset.x !== 0 || snapOffset.y !== 0) {
// Recalculate snap lines with the snapped position
const snappedPosition = pointFrom<GlobalPoint>(
pointPosition.x + snapOffset.x,
pointPosition.y + snapOffset.y
pointPosition.y + snapOffset.y,
);
const snappedSnapsX: Snaps = [];
const snappedSnapsY: Snaps = [];
// Find the reference points that we're snapping to
for (const referencePoint of referenceSnapPoints) {
const offsetX = referencePoint[0] - snappedPosition[0];
const offsetY = referencePoint[1] - snappedPosition[1];
// Only include points that we're actually snapping to
if (Math.abs(offsetX) < 0.01) { // essentially zero after snapping
if (isCloseTo(offsetX, 0, 0.01)) {
snappedSnapsX.push({
type: "point",
points: [snappedPosition, referencePoint],
offset: 0,
});
}
if (Math.abs(offsetY) < 0.01) { // essentially zero after snapping
if (isCloseTo(offsetY, 0, 0.01)) {
snappedSnapsY.push({
type: "point",
type: "point",
points: [snappedPosition, referencePoint],
offset: 0,
});
}
}
pointSnapLines = createPointSnapLines(snappedSnapsX, snappedSnapsY);
}

View File

@ -292,6 +292,20 @@ import { Scene } from "@excalidraw/element";
import { Store, CaptureUpdateAction } from "@excalidraw/element";
import {
getSnapLinesAtPointer,
snapDraggedElements,
isActiveToolNonLinearSnappable,
snapNewElement,
snapResizingElements,
isSnappingEnabled,
getVisibleGaps,
getReferenceSnapPoints,
SnapCache,
isGridModeEnabled,
snapLinearElementPoint,
} from "@excalidraw/element";
import type { ElementUpdate } from "@excalidraw/element";
import type { LocalPoint, Radians } from "@excalidraw/math";
@ -424,18 +438,6 @@ import {
import { Fonts } from "../fonts";
import { editorJotaiStore, type WritableAtom } from "../editor-jotai";
import { ImageSceneDataError } from "../errors";
import {
getSnapLinesAtPointer,
snapDraggedElements,
isActiveToolNonLinearSnappable,
snapNewElement,
snapResizingElements,
isSnappingEnabled,
getVisibleGaps,
getReferenceSnapPoints,
SnapCache,
isGridModeEnabled,
} from "../snapping";
import { convertToExcalidrawElements } from "../data/transform";
import { Renderer } from "../scene/Renderer";
import {
@ -5874,9 +5876,13 @@ class App extends React.Component<AppProps, AppState> {
const scenePointer = viewportCoordsToSceneCoords(event, this.state);
const { x: scenePointerX, y: scenePointerY } = scenePointer;
// snap origin of the new element that's to be created
if (
!this.state.newElement &&
isActiveToolNonLinearSnappable(this.state.activeTool.type)
(isActiveToolNonLinearSnappable(this.state.activeTool.type) ||
((this.state.activeTool.type === "line" ||
this.state.activeTool.type === "arrow") &&
this.state.currentItemArrowType !== ARROW_TYPE.elbow))
) {
const { originOffset, snapLines } = getSnapLinesAtPointer(
this.scene.getNonDeletedElements(),
@ -6047,12 +6053,32 @@ class App extends React.Component<AppProps, AppState> {
gridX,
gridY,
));
} else if (!isElbowArrow(multiElement)) {
const { snapOffset, snapLines } = snapLinearElementPoint(
this.scene.getNonDeletedElements(),
multiElement,
points.length - 1,
{ x: gridX, y: gridY },
this,
event,
this.scene.getNonDeletedElementsMap(),
{ includeSelfPoints: true },
);
const snappedGridX = gridX + snapOffset.x;
const snappedGridY = gridY + snapOffset.y;
dxFromLastCommitted = snappedGridX - rx - lastCommittedX;
dyFromLastCommitted = snappedGridY - ry - lastCommittedY;
this.setState({
snapLines,
});
}
if (isPathALoop(points, this.state.zoom.value)) {
setCursor(this.interactiveCanvas, CURSOR_TYPE.POINTER);
}
// update last uncommitted point
this.scene.mutateElement(
multiElement,
@ -8778,6 +8804,26 @@ class App extends React.Component<AppProps, AppState> {
let dx = gridX - newElement.x;
let dy = gridY - newElement.y;
// snap a two-point line/arrow as well
if (!isElbowArrow(newElement)) {
const { snapOffset, snapLines } = snapLinearElementPoint(
this.scene.getNonDeletedElements(),
newElement,
points.length - 1,
{ x: gridX, y: gridY },
this,
event,
this.scene.getNonDeletedElementsMap(),
{ includeSelfPoints: true },
);
const snappedGridX = gridX + snapOffset.x;
const snappedGridY = gridY + snapOffset.y;
dx = snappedGridX - newElement.x;
dy = snappedGridY - newElement.y;
this.setState({ snapLines });
}
if (shouldRotateWithDiscreteAngle(event) && points.length === 2) {
({ width: dx, height: dy } = getLockedLinearCursorAlignSize(
newElement.x,

View File

@ -10,11 +10,10 @@ import {
import { getShortcutKey } from "@excalidraw/common";
import { isNodeInFlowchart } from "@excalidraw/element";
import { isNodeInFlowchart, isGridModeEnabled } from "@excalidraw/element";
import { t } from "../i18n";
import { isEraserActive } from "../appState";
import { isGridModeEnabled } from "../snapping";
import "./HintViewer.scss";

View File

@ -12,10 +12,11 @@ import { frameAndChildrenSelectedTogether } from "@excalidraw/element";
import { elementsAreInSameGroup } from "@excalidraw/element";
import { isGridModeEnabled } from "@excalidraw/element";
import type { NonDeletedExcalidrawElement } from "@excalidraw/element/types";
import { t } from "../../i18n";
import { isGridModeEnabled } from "../../snapping";
import { useExcalidrawAppState, useExcalidrawSetAppState } from "../App";
import { Island } from "../Island";
import { CloseIcon } from "../icons";

View File

@ -2,7 +2,8 @@ import { pointFrom, type GlobalPoint, type LocalPoint } from "@excalidraw/math";
import { THEME } from "@excalidraw/common";
import type { PointSnapLine, PointerSnapLine } from "../snapping";
import type { PointSnapLine, PointerSnapLine } from "@excalidraw/element";
import type { InteractiveCanvasAppState } from "../types";
const SNAP_COLOR_LIGHT = "#ff6b6b";

View File

@ -11,6 +11,8 @@ import type { LinearElementEditor } from "@excalidraw/element";
import type { MaybeTransformHandleType } from "@excalidraw/element";
import type { SnapLine } from "@excalidraw/element";
import type {
PointerType,
ExcalidrawLinearElement,
@ -56,7 +58,6 @@ import type App from "./components/App";
import type Library from "./data/library";
import type { FileSystemHandle } from "./data/filesystem";
import type { ContextMenuItems } from "./components/ContextMenu";
import type { SnapLine } from "./snapping";
import type { ImportedDataState } from "./data/types";
import type { Language } from "./i18n";