Compare commits

..

28 Commits

Author SHA1 Message Date
Ryan Di e98e2cccb8 lint 2026-04-28 21:21:55 +10:00
Ryan Di 8424d78254 fix(line-snap): prefer bindable targets over external snaps 2026-04-28 21:16:32 +10:00
Ryan Di 8763bebb59 perf(line-snap): reuse scene elements while snapping linear points 2026-04-28 21:07:11 +10:00
Ryan Di 483a225eac refactor(line-snap): rename axis snap helpers 2026-04-28 21:06:46 +10:00
Ryan Di 79e802d9ed perf(snapping): reduce line point snap scanning 2026-04-28 17:06:54 +10:00
Ryan Di 309849925d Revert "refactor(linear): split point snapping helpers"
This reverts commit 702e029755.
2026-04-28 16:22:49 +10:00
Ryan Di 971237c0df Revert "refactor(snapping): clarify linear point reference options"
This reverts commit 79beed3f5c.
2026-04-28 16:22:49 +10:00
Ryan Di 79beed3f5c refactor(snapping): clarify linear point reference options 2026-04-28 16:16:10 +10:00
Ryan Di 702e029755 refactor(linear): split point snapping helpers 2026-04-28 16:14:19 +10:00
Ryan Di 0bbaf34187 refactor(app): centralize line snapline state sync 2026-04-28 16:11:43 +10:00
Ryan Di 18febfeaf2 test(linear): cover line snapping interactions 2026-04-28 16:02:13 +10:00
Ryan Di 53557919dd Merge branch 'master' into ryan-di/line-snapping 2026-04-28 15:52:10 +10:00
Márk Tolmács 2e1a529c67 fix(editor): remove extremely large arrows on restore (#11235)
* fix: Temp fix for elbow arrow at restore

Co-authored-by: Copilot <copilot@github.com>
Signed-off-by: Mark Tolmacs <mark@lazycat.hu>

* fix: Speculative fixes to avoid Infinity

Co-authored-by: Copilot <copilot@github.com>
Signed-off-by: Mark Tolmacs <mark@lazycat.hu>

* validate/remove arrow size after point normalization & move binding repairs back

* validate even simple arrows

* remove x/y check

* remove duplicate constant

---------

Signed-off-by: Mark Tolmacs <mark@lazycat.hu>
Co-authored-by: Copilot <copilot@github.com>
Co-authored-by: dwelle <5153846+dwelle@users.noreply.github.com>
2026-04-25 12:03:50 +02:00
David Luzar b1c6bfcf40 chore(docker): bump node (#11208) 2026-04-20 22:07:00 +02:00
Tom Louveau 1caec99b29 docs: change twitter label by X (#11158)
Co-authored-by: David Luzar <5153846+dwelle@users.noreply.github.com>
2026-04-13 10:30:58 +02:00
Nand Gopal Sharma e18c1dd213 Fix typo in Discord badge URL parameter (#11096) 2026-04-02 10:37:02 +02:00
Ryan Di 60a459b135 refactor: remove points function from snapping and move to linear editor 2025-08-04 18:04:59 +10:00
Ryan Di 7332e76d56 refactor: simplify code 2025-08-04 13:46:33 +10:00
Ryan Di dceaa53b0c fix: do not snap to pointer when creating 2025-08-04 12:33:49 +10:00
Ryan Di 6e968324fb fix snapshots 2025-08-04 12:09:06 +10:00
dwelle 09b18cacec Merge branch 'master' into ryan-di/line-snapping
# Conflicts:
#	packages/element/src/linearElementEditor.ts
#	packages/element/src/snapping.ts
#	packages/excalidraw/components/App.tsx
2025-07-31 22:42:52 +02:00
Ryan Di 0e197ef5c4 fix: do not snap to each other when moving multiple points together 2025-06-26 17:22:42 +10:00
Ryan Di a0f7edadec test: update snapshots 2025-06-24 21:02:48 +10:00
Ryan Di 58c9bb4712 merge: with master 2025-06-24 21:00:06 +10:00
Ryan Di d1c6304d42 test: update snapshots 2025-06-24 20:41:27 +10:00
Ryan Di c1a54455bb feat: add snapping on top of angle locking when both enabled 2025-06-24 18:37:07 +10:00
Ryan Di 07640dd756 feat: extend line snapping to creation 2025-06-16 20:55:27 +10:00
Ryan Di 5403fa8a0d feat: line snapping 2025-06-13 17:50:06 +10:00
43 changed files with 1075 additions and 1305 deletions
+1 -1
View File
@@ -1,4 +1,4 @@
FROM node:18-bullseye
FROM node:24-bullseye
# Vite wants to open the browser using `open`, so we
# need to install those utils.
+2 -2
View File
@@ -1,4 +1,4 @@
FROM --platform=${BUILDPLATFORM} node:18 AS build
FROM --platform=${BUILDPLATFORM} node:24 AS build
WORKDIR /opt/node_app
@@ -13,7 +13,7 @@ ARG NODE_ENV=production
RUN npm_config_target_arch=${TARGETARCH} yarn build:app:docker
FROM --platform=${TARGETPLATFORM} nginx:1.27-alpine
FROM nginx:1.27-alpine
COPY --from=build /opt/node_app/excalidraw-app/build /usr/share/nginx/html
+1 -1
View File
@@ -29,7 +29,7 @@
<a href="https://docs.excalidraw.com/docs/introduction/contributing">
<img alt="PRs welcome!" src="https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat" /></a>
<a href="https://discord.gg/UexuTaE">
<img alt="Chat on Discord" src="https://img.shields.io/discord/723672430744174682?color=738ad6&label=Chat%20on%20Discord&logo=discord&logoColor=ffffff&widge=false"/></a>
<img alt="Chat on Discord" src="https://img.shields.io/discord/723672430744174682?color=738ad6&label=Chat%20on%20Discord&logo=discord&logoColor=ffffff&widget=false"/></a>
<a href="https://deepwiki.com/excalidraw/excalidraw">
<img alt="Ask DeepWiki" src="https://deepwiki.com/badge.svg" /></a>
<a href="https://twitter.com/excalidraw">
+2 -2
View File
@@ -97,8 +97,8 @@ const config = {
href: "https://discord.gg/UexuTaE",
},
{
label: "Twitter",
href: "https://twitter.com/excalidraw",
label: "𝕏",
href: "https://x.com/excalidraw",
},
{
label: "Linkedin",
+2 -5
View File
@@ -405,9 +405,8 @@ export const ROUGHNESS = {
export const STROKE_WIDTH = {
thin: 1,
medium: 2,
bold: 4,
extraBold: 8,
bold: 2,
extraBold: 4,
} as const;
export const DEFAULT_ELEMENT_PROPS: {
@@ -430,8 +429,6 @@ export const DEFAULT_ELEMENT_PROPS: {
locked: false,
};
export const DEFAULT_FREE_DRAW_STROKE_SHAPE = "variable" as const;
export const LIBRARY_SIDEBAR_TAB = "library";
export const CANVAS_SEARCH_TAB = "search";
+6 -4
View File
@@ -1943,9 +1943,9 @@ export const calculateFixedPointForElbowArrowBinding = (
return {
fixedPoint: normalizeFixedPoint([
(nonRotatedSnappedGlobalPoint[0] - hoveredElement.x) /
hoveredElement.width,
Math.max(hoveredElement.width, PRECISION),
(nonRotatedSnappedGlobalPoint[1] - hoveredElement.y) /
hoveredElement.height,
Math.max(hoveredElement.height, PRECISION),
]),
};
};
@@ -1976,9 +1976,11 @@ export const calculateFixedPointForNonElbowArrowBinding = (
// Calculate the ratio relative to the element's bounds
const fixedPointX =
(nonRotatedPoint[0] - hoveredElement.x) / hoveredElement.width;
(nonRotatedPoint[0] - hoveredElement.x) /
Math.max(hoveredElement.width, PRECISION);
const fixedPointY =
(nonRotatedPoint[1] - hoveredElement.y) / hoveredElement.height;
(nonRotatedPoint[1] - hoveredElement.y) /
Math.max(hoveredElement.height, PRECISION);
return {
fixedPoint: normalizeFixedPoint([fixedPointX, fixedPointY]),
+8 -11
View File
@@ -168,14 +168,12 @@ export class ElementBounds {
),
),
);
const padding =
element.strokeShape === "fixed" ? element.strokeWidth / 2 : 0;
return [
minX + element.x - padding,
minY + element.y - padding,
maxX + element.x + padding,
maxY + element.y + padding,
minX + element.x,
minY + element.y,
maxX + element.x,
maxY + element.y,
];
} else if (isLinearElement(element)) {
bounds = getLinearElementRotatedBounds(element, cx, cy, elementsMap);
@@ -705,11 +703,10 @@ const getFreeDrawElementAbsoluteCoords = (
element: ExcalidrawFreeDrawElement,
): [number, number, number, number, number, number] => {
const [minX, minY, maxX, maxY] = getBoundsFromPoints(element.points);
const padding = element.strokeShape === "fixed" ? element.strokeWidth / 2 : 0;
const x1 = minX + element.x - padding;
const y1 = minY + element.y - padding;
const x2 = maxX + element.x + padding;
const y2 = maxY + element.y + padding;
const x1 = minX + element.x;
const y1 = minY + element.y;
const x2 = maxX + element.x;
const y2 = maxY + element.y;
return [x1, y1, x2, y2, (x1 + x2) / 2, (y1 + y2) / 2];
};
+3 -4
View File
@@ -27,7 +27,6 @@ import type {
import type { FrameNameBounds } from "@excalidraw/excalidraw/types";
import { isLoopFreeDrawElement } from "./freedraw";
import { isPathALoop } from "./utils";
import {
doBoundsIntersect,
@@ -94,7 +93,7 @@ export const shouldTestInside = (element: ExcalidrawElement) => {
}
if (element.type === "freedraw") {
return isDraggableFromInside && isLoopFreeDrawElement(element);
return isDraggableFromInside && isPathALoop(element.points);
}
return isDraggableFromInside || isImageElement(element);
@@ -755,8 +754,8 @@ export const isPointInElement = (
elementsMap: ElementsMap,
) => {
if (
(isLinearElement(element) && !isPathALoop(element.points)) ||
(isFreeDrawElement(element) && !isLoopFreeDrawElement(element))
(isLinearElement(element) || isFreeDrawElement(element)) &&
!isPathALoop(element.points)
) {
// There isn't any "inside" for a non-looping path
return false;
+2 -2
View File
@@ -2124,8 +2124,8 @@ const normalizeArrowElementUpdate = (
offsetY < -MAX_POS ||
offsetY > MAX_POS ||
offsetX + points[points.length - 1][0] < -MAX_POS ||
offsetY + points[points.length - 1][0] > MAX_POS ||
offsetX + points[points.length - 1][1] < -MAX_POS ||
offsetX + points[points.length - 1][0] > MAX_POS ||
offsetY + points[points.length - 1][1] < -MAX_POS ||
offsetY + points[points.length - 1][1] > MAX_POS
) {
console.error(
-181
View File
@@ -1,181 +0,0 @@
import {
pointDistance,
vectorCross,
vectorDot,
vectorFromPoint,
} from "@excalidraw/math";
import type { LocalPoint } from "@excalidraw/math";
import { isPathALoop } from "./utils";
import type { ExcalidrawFreeDrawElement } from "./types";
type ZoomValue = NonNullable<Parameters<typeof isPathALoop>[1]>;
type FixedFreeDrawSimplificationProfile = {
minPointDistancePx: number;
maxPointDistance: number;
strokeDistanceFactor: number;
collinearityFactor: number;
minAlignment: number;
zoomScaling: "sqrt" | "none";
};
const FIXED_FREEDRAW_CAPTURE_PROFILE: FixedFreeDrawSimplificationProfile = {
minPointDistancePx: 0.35,
maxPointDistance: 0.85,
strokeDistanceFactor: 0.08,
collinearityFactor: 0.3,
minAlignment: 0.985,
zoomScaling: "sqrt",
};
const hasSyntheticLoopClosure = (
points: readonly LocalPoint[],
): points is readonly [LocalPoint, LocalPoint, ...LocalPoint[]] => {
if (points.length < 3) {
return false;
}
const firstPoint = points[0];
const lastPoint = points[points.length - 1];
return firstPoint[0] === lastPoint[0] && firstPoint[1] === lastPoint[1];
};
const stripSyntheticLoopClosure = (points: readonly LocalPoint[]) =>
hasSyntheticLoopClosure(points) ? points.slice(0, -1) : points;
export const isLoopFreeDrawElement = (
element: ExcalidrawFreeDrawElement,
zoomValue: ZoomValue = 1 as ZoomValue,
) => element.strokeShape !== "fixed" && isPathALoop(element.points, zoomValue);
export const getFixedFreeDrawPoints = (
element: ExcalidrawFreeDrawElement,
): readonly LocalPoint[] => stripSyntheticLoopClosure(element.points);
export const getFixedFreeDrawPointSamplingDistance = (
strokeWidth: number,
zoomValue: ZoomValue = 1 as ZoomValue,
profile: FixedFreeDrawSimplificationProfile = FIXED_FREEDRAW_CAPTURE_PROFILE,
) =>
Math.min(
Math.max(
profile.minPointDistancePx /
(profile.zoomScaling === "sqrt"
? Math.max(1, Math.sqrt(zoomValue))
: 1),
strokeWidth * profile.strokeDistanceFactor,
),
profile.maxPointDistance,
);
const isRedundantFixedFreeDrawPoint = (
previousPoint: LocalPoint,
currentPoint: LocalPoint,
nextPoint: LocalPoint,
strokeWidth: number,
zoomValue: ZoomValue,
profile: FixedFreeDrawSimplificationProfile,
) => {
const previousSegmentLength = pointDistance(previousPoint, currentPoint);
const nextSegmentLength = pointDistance(currentPoint, nextPoint);
if (!previousSegmentLength || !nextSegmentLength) {
return true;
}
const previousVector = vectorFromPoint(currentPoint, previousPoint);
const nextVector = vectorFromPoint(nextPoint, currentPoint);
const alignment =
vectorDot(previousVector, nextVector) /
(previousSegmentLength * nextSegmentLength);
if (alignment < profile.minAlignment) {
return false;
}
const chord = vectorFromPoint(nextPoint, previousPoint);
const chordLength = pointDistance(previousPoint, nextPoint);
if (!chordLength) {
return true;
}
const distanceToChord =
Math.abs(vectorCross(vectorFromPoint(currentPoint, previousPoint), chord)) /
chordLength;
return (
distanceToChord <=
getFixedFreeDrawPointSamplingDistance(strokeWidth, zoomValue, profile) *
profile.collinearityFactor
);
};
export const getFixedFreeDrawPointAction = ({
points,
nextPoint,
strokeWidth,
zoomValue,
isFinalPoint = false,
profile,
}: {
points: readonly LocalPoint[];
nextPoint: LocalPoint;
strokeWidth: number;
zoomValue: ZoomValue;
isFinalPoint?: boolean;
profile?: FixedFreeDrawSimplificationProfile;
}) => {
const simplificationProfile = profile ?? FIXED_FREEDRAW_CAPTURE_PROFILE;
const lastPoint = points[points.length - 1];
if (!lastPoint) {
return "append" as const;
}
if (lastPoint[0] === nextPoint[0] && lastPoint[1] === nextPoint[1]) {
return "discard" as const;
}
const samplingDistance = getFixedFreeDrawPointSamplingDistance(
strokeWidth,
zoomValue,
simplificationProfile,
);
if (points.length === 1) {
return !isFinalPoint &&
pointDistance(lastPoint, nextPoint) < samplingDistance
? ("discard" as const)
: ("append" as const);
}
const previousPoint = points[points.length - 2];
if (
isRedundantFixedFreeDrawPoint(
previousPoint,
lastPoint,
nextPoint,
strokeWidth,
zoomValue,
simplificationProfile,
)
) {
return "replace" as const;
}
if (!isFinalPoint && pointDistance(lastPoint, nextPoint) < samplingDistance) {
return "discard" as const;
}
return "append" as const;
};
export const getRenderableFixedFreeDrawPoints = (
element: ExcalidrawFreeDrawElement,
): readonly LocalPoint[] => getFixedFreeDrawPoints(element);
+1 -1
View File
@@ -69,7 +69,6 @@ export * from "./duplicate";
export * from "./elbowArrow";
export * from "./elementLink";
export * from "./embeddable";
export * from "./freedraw";
export * from "./flowchart";
export * from "./arrows/focus";
export * from "./fractionalIndex";
@@ -89,6 +88,7 @@ export * from "./selection";
export * from "./shape";
export * from "./showSelectedShapeActions";
export * from "./sizeHelpers";
export * from "./snapping";
export * from "./sortElements";
export * from "./store";
export * from "./textElement";
+351 -92
View File
@@ -7,6 +7,7 @@ import {
type LocalPoint,
pointDistance,
vectorFromPoint,
line,
curveLength,
curvePointAtLength,
} from "@excalidraw/math";
@@ -29,6 +30,9 @@ import {
isPathALoop,
moveArrowAboveBindable,
projectFixedPointOntoDiagonal,
snapLinearElementPoint,
snapToDiscreteAngle,
type SnapLine,
type Store,
} from "@excalidraw/element";
@@ -48,6 +52,7 @@ import {
calculateFixedPointForNonElbowArrowBinding,
getBindingStrategyForDraggingBindingElementEndpoints,
isBindingEnabled,
maxBindingDistance_simple,
snapToMid,
updateBoundPoint,
} from "./binding";
@@ -56,6 +61,7 @@ import {
getElementPointsCoords,
getMinMaxXYFromCurvePathOps,
} from "./bounds";
import { getHoveredElementForBinding } from "./collision";
import { headingIsHorizontal, vectorToHeading } from "./heading";
import { mutateElement } from "./mutateElement";
@@ -294,7 +300,10 @@ export class LinearElementEditor {
scenePointerX: number,
scenePointerY: number,
linearElementEditor: LinearElementEditor,
): Pick<AppState, "suggestedBinding" | "selectedLinearElement"> | null {
): Pick<
AppState,
"suggestedBinding" | "selectedLinearElement" | "snapLines"
> | null {
const elementsMap = app.scene.getNonDeletedElementsMap();
const elements = app.scene.getNonDeletedElements();
const { elementId } = linearElementEditor;
@@ -311,36 +320,26 @@ export class LinearElementEditor {
linearElementEditor.customLineAngle ??
determineCustomLinearAngle(pivotPoint, element.points[idx]);
// Determine if point movement should happen and how much
let deltaX = 0;
let deltaY = 0;
if (shouldRotateWithDiscreteAngle(event)) {
const [width, height] = LinearElementEditor._getShiftLockedDelta(
element,
const { point: newDraggingPointPosition, snapLines } =
LinearElementEditor._getSnappedPointForLinearElement({
app,
event,
elements,
elementsMap,
pivotPoint,
pointFrom(scenePointerX, scenePointerY),
event[KEYS.CTRL_OR_CMD] ? null : app.getEffectiveGridSize(),
element,
pointIndex: idx,
scenePointerX,
scenePointerY,
pointerOffset: linearElementEditor.pointerOffset,
referencePoint: shouldRotateWithDiscreteAngle(event)
? pivotPoint
: null,
selectedPointsIndices: [idx],
customLineAngle,
);
const target = pointFrom<LocalPoint>(
width + pivotPoint[0],
height + pivotPoint[1],
);
});
deltaX = target[0] - point[0];
deltaY = target[1] - point[1];
} else {
const newDraggingPointPosition = LinearElementEditor.createPointAt(
element,
elementsMap,
scenePointerX - linearElementEditor.pointerOffset.x,
scenePointerY - linearElementEditor.pointerOffset.y,
event[KEYS.CTRL_OR_CMD] ? null : app.getEffectiveGridSize(),
);
deltaX = newDraggingPointPosition[0] - point[0];
deltaY = newDraggingPointPosition[1] - point[1];
}
const deltaX = newDraggingPointPosition[0] - point[0];
const deltaY = newDraggingPointPosition[1] - point[1];
// Apply the point movement if needed
let suggestedBinding: AppState["suggestedBinding"] = null;
@@ -398,6 +397,8 @@ export class LinearElementEditor {
// PERF: Avoid state updates if not absolutely necessary
if (
app.state.selectedLinearElement?.customLineAngle === customLineAngle &&
app.state.snapLines.length === 0 &&
snapLines.length === 0 &&
linearElementEditor.initialState.altFocusPoint &&
(!suggestedBinding ||
isShallowEqual(app.state.suggestedBinding ?? [], suggestedBinding))
@@ -436,6 +437,7 @@ export class LinearElementEditor {
return {
selectedLinearElement: newLinearElementEditor,
suggestedBinding,
snapLines,
};
}
@@ -445,7 +447,10 @@ export class LinearElementEditor {
scenePointerX: number,
scenePointerY: number,
linearElementEditor: LinearElementEditor,
): Pick<AppState, "suggestedBinding" | "selectedLinearElement"> | null {
): Pick<
AppState,
"suggestedBinding" | "selectedLinearElement" | "snapLines"
> | null {
const elementsMap = app.scene.getNonDeletedElementsMap();
const elements = app.scene.getNonDeletedElements();
const { elbowed, elementId, initialState } = linearElementEditor;
@@ -493,7 +498,6 @@ export class LinearElementEditor {
lastClickedPoint = element.points.length - 1;
}
// point that's being dragged (out of all selected points)
const draggingPoint = element.points[lastClickedPoint];
// The adjacent point to the one dragged point
const pivotPoint =
@@ -507,35 +511,27 @@ export class LinearElementEditor {
element.points.length - 1,
);
// Determine if point movement should happen and how much
let deltaX = 0;
let deltaY = 0;
if (shouldRotateWithDiscreteAngle(event) && singlePointDragged) {
const [width, height] = LinearElementEditor._getShiftLockedDelta(
element,
const { point: newDraggingPointPosition, snapLines } =
LinearElementEditor._getSnappedPointForLinearElement({
app,
event,
elements,
elementsMap,
pivotPoint,
pointFrom(scenePointerX, scenePointerY),
event[KEYS.CTRL_OR_CMD] ? null : app.getEffectiveGridSize(),
element,
pointIndex: lastClickedPoint,
scenePointerX,
scenePointerY,
pointerOffset: linearElementEditor.pointerOffset,
referencePoint:
shouldRotateWithDiscreteAngle(event) && singlePointDragged
? pivotPoint
: null,
selectedPointsIndices,
customLineAngle,
);
const target = pointFrom<LocalPoint>(
width + pivotPoint[0],
height + pivotPoint[1],
);
deltaX = target[0] - draggingPoint[0];
deltaY = target[1] - draggingPoint[1];
} else {
const newDraggingPointPosition = LinearElementEditor.createPointAt(
element,
elementsMap,
scenePointerX - linearElementEditor.pointerOffset.x,
scenePointerY - linearElementEditor.pointerOffset.y,
event[KEYS.CTRL_OR_CMD] ? null : app.getEffectiveGridSize(),
);
deltaX = newDraggingPointPosition[0] - draggingPoint[0];
deltaY = newDraggingPointPosition[1] - draggingPoint[1];
}
});
const deltaX = newDraggingPointPosition[0] - draggingPoint[0];
const deltaY = newDraggingPointPosition[1] - draggingPoint[1];
// Apply the point movement if needed
let suggestedBinding: AppState["suggestedBinding"] = null;
@@ -674,6 +670,7 @@ export class LinearElementEditor {
return {
selectedLinearElement: newLinearElementEditor,
suggestedBinding,
snapLines,
};
}
@@ -1178,7 +1175,10 @@ export class LinearElementEditor {
scenePointerX: number,
scenePointerY: number,
app: AppClassProperties,
): LinearElementEditor | null {
): {
editingLinearElement: LinearElementEditor;
snapLines: readonly SnapLine[];
} | null {
const appState = app.state;
if (!appState.selectedLinearElement?.isEditing) {
return null;
@@ -1187,7 +1187,10 @@ export class LinearElementEditor {
const elementsMap = app.scene.getNonDeletedElementsMap();
const element = LinearElementEditor.getElement(elementId, elementsMap);
if (!element) {
return appState.selectedLinearElement;
return {
editingLinearElement: appState.selectedLinearElement,
snapLines: appState.snapLines,
};
}
const { points } = element;
@@ -1199,36 +1202,37 @@ export class LinearElementEditor {
}
return appState.selectedLinearElement?.lastUncommittedPoint
? {
...appState.selectedLinearElement,
lastUncommittedPoint: null,
editingLinearElement: {
...appState.selectedLinearElement,
lastUncommittedPoint: null,
},
snapLines: [],
}
: appState.selectedLinearElement;
: {
editingLinearElement: appState.selectedLinearElement,
snapLines: [],
};
}
let newPoint: LocalPoint;
if (shouldRotateWithDiscreteAngle(event) && points.length >= 2) {
const anchor = points[points.length - 2];
const [width, height] = LinearElementEditor._getShiftLockedDelta(
element,
const anchor = points[points.length - 2];
const elements = app.scene.getNonDeletedElements();
const { point: newPoint, snapLines } =
LinearElementEditor._getSnappedPointForLinearElement({
app,
event,
elements,
elementsMap,
anchor,
pointFrom(scenePointerX, scenePointerY),
event[KEYS.CTRL_OR_CMD] ? null : app.getEffectiveGridSize(),
);
newPoint = pointFrom(width + anchor[0], height + anchor[1]);
} else {
newPoint = LinearElementEditor.createPointAt(
element,
elementsMap,
scenePointerX - appState.selectedLinearElement.pointerOffset.x,
scenePointerY - appState.selectedLinearElement.pointerOffset.y,
event[KEYS.CTRL_OR_CMD] || isElbowArrow(element)
? null
: app.getEffectiveGridSize(),
);
}
pointIndex: points.length - 1,
scenePointerX,
scenePointerY,
pointerOffset: appState.selectedLinearElement.pointerOffset,
referencePoint:
shouldRotateWithDiscreteAngle(event) && points.length >= 2
? anchor
: null,
selectedPointsIndices: [points.length - 1],
});
if (lastPoint === lastUncommittedPoint) {
LinearElementEditor.movePoints(
@@ -1236,7 +1240,7 @@ export class LinearElementEditor {
app.scene,
new Map([
[
element.points.length - 1,
points.length - 1,
{
point: newPoint,
},
@@ -1246,9 +1250,13 @@ export class LinearElementEditor {
} else {
LinearElementEditor.addPoints(element, app.scene, [newPoint]);
}
return {
...appState.selectedLinearElement,
lastUncommittedPoint: element.points[element.points.length - 1],
editingLinearElement: {
...appState.selectedLinearElement,
lastUncommittedPoint: element.points[element.points.length - 1],
},
snapLines,
};
}
@@ -1274,18 +1282,53 @@ export class LinearElementEditor {
static getPointsGlobalCoordinates(
element: NonDeleted<ExcalidrawLinearElement>,
elementsMap: ElementsMap,
options: {
dragOffset?: { x: number; y: number };
excludePointsIndices?: readonly number[];
} = {},
): GlobalPoint[] {
const { dragOffset, excludePointsIndices } = options;
if (!element.points || element.points.length === 0) {
return [];
}
const [x1, y1, x2, y2] = getElementAbsoluteCoords(element, elementsMap);
const cx = (x1 + x2) / 2;
const cy = (y1 + y2) / 2;
return element.points.map((p) => {
const { x, y } = element;
return pointRotateRads(
pointFrom(x + p[0], y + p[1]),
let elementX = element.x;
let elementY = element.y;
if (dragOffset) {
elementX += dragOffset.x;
elementY += dragOffset.y;
}
const globalPoints: GlobalPoint[] = [];
for (let i = 0; i < element.points.length; i++) {
// Skip the point being edited if specified
if (
excludePointsIndices?.length &&
excludePointsIndices.find((index) => index === i) !== undefined
) {
continue;
}
const p = element.points[i];
const globalX = elementX + p[0];
const globalY = elementY + p[1];
const rotated = pointRotateRads<GlobalPoint>(
pointFrom(globalX, globalY),
pointFrom(cx, cy),
element.angle,
);
});
globalPoints.push(rotated);
}
return globalPoints;
}
static getPointAtIndexGlobalCoordinates(
@@ -1839,6 +1882,222 @@ export class LinearElementEditor {
);
}
private static _getPointPlacementGridSize(
element: NonDeleted<ExcalidrawLinearElement>,
app: AppClassProperties,
event: Pick<KeyboardEvent | PointerEvent, typeof KEYS.CTRL_OR_CMD>,
): NullableGridSize {
return event[KEYS.CTRL_OR_CMD] || isElbowArrow(element)
? null
: app.getEffectiveGridSize();
}
private static _shouldSkipExternalSnapForBindableTarget({
appState,
elements,
elementsMap,
element,
pointIndex,
scenePoint,
selectedPointsIndices,
}: {
appState: AppState;
elements: readonly Ordered<NonDeletedExcalidrawElement>[];
elementsMap: NonDeletedSceneElementsMap;
element: NonDeleted<ExcalidrawLinearElement>;
pointIndex: number;
scenePoint: GlobalPoint;
selectedPointsIndices?: readonly number[];
}) {
if (
isElbowArrow(element) ||
!isBindingElement(element) ||
!isBindingEnabled(appState) ||
selectedPointsIndices?.length !== 1
) {
return false;
}
if (pointIndex !== 0 && pointIndex !== element.points.length - 1) {
return false;
}
return !!getHoveredElementForBinding(
scenePoint,
elements,
elementsMap,
maxBindingDistance_simple(appState.zoom),
);
}
private static _getSnappedPointForLinearElement({
app,
event,
elements,
elementsMap,
element,
pointIndex,
scenePointerX,
scenePointerY,
pointerOffset,
referencePoint,
selectedPointsIndices,
customLineAngle,
}: {
app: AppClassProperties;
event: PointerEvent | React.PointerEvent<HTMLCanvasElement>;
elements: readonly Ordered<NonDeletedExcalidrawElement>[];
elementsMap: NonDeletedSceneElementsMap;
element: NonDeleted<ExcalidrawLinearElement>;
pointIndex: number;
scenePointerX: number;
scenePointerY: number;
pointerOffset: Readonly<{ x: number; y: number }>;
referencePoint?: LocalPoint | null;
selectedPointsIndices?: readonly number[];
customLineAngle?: number | null;
}): {
point: LocalPoint;
snapLines: SnapLine[];
} {
const gridSize = LinearElementEditor._getPointPlacementGridSize(
element,
app,
event,
);
if (referencePoint) {
const referencePointCoords =
LinearElementEditor.getPointGlobalCoordinates(
element,
referencePoint,
elementsMap,
);
const [gridX, gridY] = getGridPoint(
scenePointerX,
scenePointerY,
gridSize,
);
let { width: dxFromReference, height: dyFromReference } =
getLockedLinearCursorAlignSize(
referencePointCoords[0],
referencePointCoords[1],
gridX,
gridY,
customLineAngle ?? undefined,
);
const effectiveGridX = referencePointCoords[0] + dxFromReference;
const effectiveGridY = referencePointCoords[1] + dyFromReference;
let snapLines: SnapLine[] = [];
const shouldSkipExternalSnap =
LinearElementEditor._shouldSkipExternalSnapForBindableTarget({
appState: app.state,
elements,
elementsMap,
element,
pointIndex,
scenePoint: pointFrom<GlobalPoint>(effectiveGridX, effectiveGridY),
selectedPointsIndices,
});
if (!isElbowArrow(element)) {
const { snapOffset, snapLines: nextSnapLines } = snapLinearElementPoint(
elements,
element,
pointFrom<GlobalPoint>(effectiveGridX, effectiveGridY),
app,
event,
elementsMap,
{
includeExternalPoints: !shouldSkipExternalSnap,
includeSelfPoints: true,
selectedPointsIndices,
},
);
snapLines = nextSnapLines;
if (nextSnapLines.length > 0) {
const result = snapToDiscreteAngle(
nextSnapLines,
line(
pointFrom(effectiveGridX, effectiveGridY),
pointFrom(referencePointCoords[0], referencePointCoords[1]),
),
pointFrom(gridX, gridY),
referencePointCoords,
);
if (result.snapLines.length > 0) {
dxFromReference = result.dxFromReference;
dyFromReference = result.dyFromReference;
snapLines = result.snapLines;
} else {
dxFromReference =
effectiveGridX + snapOffset.x - referencePointCoords[0];
dyFromReference =
effectiveGridY + snapOffset.y - referencePointCoords[1];
}
}
}
const [rotatedX, rotatedY] = pointRotateRads(
pointFrom(dxFromReference, dyFromReference),
pointFrom(0, 0),
-element.angle as Radians,
);
return {
point: pointFrom(
referencePoint[0] + rotatedX,
referencePoint[1] + rotatedY,
),
snapLines,
};
}
const originalPointerX = scenePointerX - pointerOffset.x;
const originalPointerY = scenePointerY - pointerOffset.y;
const shouldSkipExternalSnap =
LinearElementEditor._shouldSkipExternalSnapForBindableTarget({
appState: app.state,
elements,
elementsMap,
element,
pointIndex,
scenePoint: pointFrom<GlobalPoint>(originalPointerX, originalPointerY),
selectedPointsIndices,
});
const { snapOffset, snapLines } = snapLinearElementPoint(
elements,
element,
pointFrom(originalPointerX, originalPointerY),
app,
event,
elementsMap,
{
includeExternalPoints: !shouldSkipExternalSnap,
includeSelfPoints: true,
selectedPointsIndices,
},
);
return {
point: LinearElementEditor.createPointAt(
element,
elementsMap,
originalPointerX + snapOffset.x,
originalPointerY + snapOffset.y,
gridSize,
),
snapLines,
};
}
static getBoundTextElementPosition = (
element: ExcalidrawLinearElement,
boundTextElement: ExcalidrawTextElementWithContainer,
-27
View File
@@ -1,5 +1,4 @@
import {
DEFAULT_FREE_DRAW_STROKE_SHAPE,
getSizeFromPoints,
randomInteger,
getUpdatedTimestamp,
@@ -19,8 +18,6 @@ import type {
ElementsMap,
ExcalidrawElbowArrowElement,
ExcalidrawElement,
ExcalidrawFreeDrawElement,
FreeDrawStrokeShape,
NonDeletedSceneElementsMap,
} from "./types";
@@ -180,30 +177,6 @@ export const newElementWith = <TElement extends ExcalidrawElement>(
};
};
export const newFreeDrawElementWithStrokeShape = <
TElement extends ExcalidrawFreeDrawElement,
>(
element: TElement,
strokeShape: FreeDrawStrokeShape,
): TElement => {
if (strokeShape === DEFAULT_FREE_DRAW_STROKE_SHAPE) {
if (!("strokeShape" in element)) {
return element;
}
const nextElement = newElementWith(
element,
{} as ElementUpdate<TElement>,
true,
);
delete (nextElement as Mutable<Partial<TElement>>).strokeShape;
return nextElement;
}
return newElementWith(element, {
strokeShape,
} as ElementUpdate<TElement>);
};
/**
* Mutates element, bumping `version`, `versionNonce`, and `updated`.
*
-2
View File
@@ -445,7 +445,6 @@ export const newFreeDrawElement = (
points?: ExcalidrawFreeDrawElement["points"];
simulatePressure: boolean;
pressures?: ExcalidrawFreeDrawElement["pressures"];
strokeShape?: ExcalidrawFreeDrawElement["strokeShape"];
} & ElementConstructorOpts,
): NonDeleted<ExcalidrawFreeDrawElement> => {
return {
@@ -453,7 +452,6 @@ export const newFreeDrawElement = (
points: opts.points || [],
pressures: opts.pressures || [],
simulatePressure: opts.simulatePressure,
...(opts.strokeShape === "fixed" ? { strokeShape: opts.strokeShape } : {}),
};
};
+2 -13
View File
@@ -417,27 +417,16 @@ const drawElementOnCanvas = (
case "freedraw": {
// Draw directly to canvas
context.save();
context.lineJoin = "round";
context.lineCap = "round";
const shapes = ShapeCache.generateElementShape(element, renderConfig);
const isFixedStroke = element.strokeShape === "fixed";
for (const shape of shapes) {
if (typeof shape === "string") {
const strokeColor =
context.fillStyle =
renderConfig.theme === THEME.DARK
? applyDarkModeFilter(element.strokeColor)
: element.strokeColor;
if (isFixedStroke) {
context.strokeStyle = strokeColor;
context.lineWidth = element.strokeWidth;
context.stroke(new Path2D(shape));
} else {
context.fillStyle = strokeColor;
context.fill(new Path2D(shape));
}
context.fill(new Path2D(shape));
} else {
rc.draw(shape);
}
+9 -236
View File
@@ -1,5 +1,4 @@
import { simplify } from "points-on-curve";
import { DEFAULT_FREE_DRAW_STROKE_SHAPE } from "@excalidraw/common";
import { getStroke } from "perfect-freehand";
import {
@@ -14,7 +13,6 @@ import {
import {
pointFrom,
pointDistance,
round,
type LocalPoint,
pointRotateRads,
} from "@excalidraw/math";
@@ -54,10 +52,6 @@ import {
isIframeLikeElement,
isLinearElement,
} from "./typeChecks";
import {
getRenderableFixedFreeDrawPoints,
isLoopFreeDrawElement,
} from "./freedraw";
import { getCornerRadius, isPathALoop } from "./utils";
import { headingForPointIsHorizontal } from "./heading";
@@ -250,12 +244,7 @@ export const generateRoughOptions = (
}
case "line":
case "freedraw": {
const isLoop =
element.type === "freedraw"
? isLoopFreeDrawElement(element)
: isPathALoop(element.points);
if (isLoop) {
if (isPathALoop(element.points)) {
options.fillStyle = element.fillStyle;
options.fill =
element.backgroundColor === "transparent"
@@ -977,7 +966,7 @@ const _generateElementShape = (
const shapes: ElementShapes[typeof element.type] = [];
// (1) background fill (rc shape), optional
if (isLoopFreeDrawElement(element)) {
if (isPathALoop(element.points)) {
// generate rough polygon to fill freedraw shape
const simplifiedPoints = simplify(
element.points as Mutable<LocalPoint[]>,
@@ -1184,13 +1173,6 @@ export const toggleLinePolygonState = (
// NOTE not cached (-> for SVG export)
const getFreeDrawSvgPath = (element: ExcalidrawFreeDrawElement) => {
if (element.strokeShape === "fixed") {
return getSvgPathFromFixedFreeDrawPoints(
getRenderableFixedFreeDrawPoints(element),
element.strokeWidth,
) as SVGPathString;
}
return getSvgPathFromStroke(
getFreedrawOutlinePoints(element),
) as SVGPathString;
@@ -1199,243 +1181,34 @@ const getFreeDrawSvgPath = (element: ExcalidrawFreeDrawElement) => {
export const getFreedrawOutlinePoints = (
element: ExcalidrawFreeDrawElement,
) => {
const strokeShape = element.strokeShape ?? DEFAULT_FREE_DRAW_STROKE_SHAPE;
const isFixedStroke = strokeShape === "fixed";
// If input points are empty (should they ever be?) return a dot
const inputPoints = isFixedStroke
? element.points.length
? element.points
: [[0, 0]]
: element.simulatePressure
const inputPoints = element.simulatePressure
? element.points
: element.points.length
? element.points.map(([x, y], i) => [x, y, element.pressures[i]])
: [[0, 0, 0.5]];
return getStroke(inputPoints as number[][], {
simulatePressure: isFixedStroke ? false : element.simulatePressure,
size: isFixedStroke ? element.strokeWidth : element.strokeWidth * 4.25,
thinning: isFixedStroke ? 0 : 0.6,
simulatePressure: element.simulatePressure,
size: element.strokeWidth * 4.25,
thinning: 0.6,
smoothing: 0.5,
streamline: 0.5,
easing: isFixedStroke ? (t) => t : (t) => Math.sin((t * Math.PI) / 2), // https://easings.net/#easeOutSine
easing: (t) => Math.sin((t * Math.PI) / 2), // https://easings.net/#easeOutSine
last: true,
}) as [number, number][];
};
const med = (A: readonly number[], B: readonly number[]) => {
const med = (A: number[], B: number[]) => {
return [(A[0] + B[0]) / 2, (A[1] + B[1]) / 2];
};
const roundPoint = (point: readonly number[]) =>
`${round(point[0], 2)},${round(point[1], 2)} `;
const averagePoint = (A: readonly number[], B: readonly number[]) =>
`${round((A[0] + B[0]) / 2, 2)},${round((A[1] + B[1]) / 2, 2)} `;
const getReadonlyPointDistance = (
pointA: readonly number[],
pointB: readonly number[],
) => Math.hypot(pointA[0] - pointB[0], pointA[1] - pointB[1]);
// Trim SVG path data so number are each two decimal points. This
// improves SVG exports, and prevents rendering errors on points
// with long decimals.
const TO_FIXED_PRECISION = /(\s?[A-Z]?,?-?[0-9]*\.[0-9]{0,2})(([0-9]|e|-)*)/g;
const getSvgPathFromPoints = (
points: ReadonlyArray<readonly number[]>,
closed = false,
): string => {
const len = points.length;
if (len < 2) {
return "";
}
const path = points
.slice(1)
.map((point) => `L${roundPoint(point)}`)
.join("");
return `M${roundPoint(points[0])}${path}${closed ? "Z" : ""}`;
};
const FIXED_FREEDRAW_MIN_SMOOTH_ALIGNMENT = 0.6;
const FIXED_FREEDRAW_MIN_SMOOTH_SEGMENT_LENGTH = 0.2;
const FIXED_FREEDRAW_MIN_CORNER_ALIGNMENT = -0.25;
const FIXED_FREEDRAW_MIN_CORNER_ROUNDING = 0.75;
const FIXED_FREEDRAW_MAX_CORNER_ROUNDING = 6;
const FIXED_FREEDRAW_CORNER_ROUNDING_FACTOR = 0.35;
const FIXED_FREEDRAW_CORNER_ROUNDING_WIDTH_FACTOR = 1.5;
const FIXED_FREEDRAW_MIN_TERMINAL_STUB = 0.75;
const FIXED_FREEDRAW_MAX_TERMINAL_STUB = 2.5;
const FIXED_FREEDRAW_TERMINAL_STUB_WIDTH_FACTOR = 1.5;
const shouldSmoothFixedFreeDrawPoint = (
previousPoint: readonly number[],
currentPoint: readonly number[],
nextPoint: readonly number[],
) => {
const previousDeltaX = currentPoint[0] - previousPoint[0];
const previousDeltaY = currentPoint[1] - previousPoint[1];
const nextDeltaX = nextPoint[0] - currentPoint[0];
const nextDeltaY = nextPoint[1] - currentPoint[1];
const previousSegmentLength = Math.hypot(previousDeltaX, previousDeltaY);
const nextSegmentLength = Math.hypot(nextDeltaX, nextDeltaY);
if (
previousSegmentLength < FIXED_FREEDRAW_MIN_SMOOTH_SEGMENT_LENGTH ||
nextSegmentLength < FIXED_FREEDRAW_MIN_SMOOTH_SEGMENT_LENGTH
) {
return false;
}
const alignment =
(previousDeltaX * nextDeltaX + previousDeltaY * nextDeltaY) /
(previousSegmentLength * nextSegmentLength);
return alignment >= FIXED_FREEDRAW_MIN_SMOOTH_ALIGNMENT;
};
const getFixedFreeDrawRoundedCorner = (
previousPoint: readonly number[],
currentPoint: readonly number[],
nextPoint: readonly number[],
strokeWidth: number,
) => {
const previousDeltaX = currentPoint[0] - previousPoint[0];
const previousDeltaY = currentPoint[1] - previousPoint[1];
const nextDeltaX = nextPoint[0] - currentPoint[0];
const nextDeltaY = nextPoint[1] - currentPoint[1];
const previousSegmentLength = Math.hypot(previousDeltaX, previousDeltaY);
const nextSegmentLength = Math.hypot(nextDeltaX, nextDeltaY);
if (!previousSegmentLength || !nextSegmentLength) {
return null;
}
const alignment =
(previousDeltaX * nextDeltaX + previousDeltaY * nextDeltaY) /
(previousSegmentLength * nextSegmentLength);
if (
alignment >= FIXED_FREEDRAW_MIN_SMOOTH_ALIGNMENT ||
alignment <= FIXED_FREEDRAW_MIN_CORNER_ALIGNMENT
) {
return null;
}
const cornerRounding = Math.min(
Math.max(
strokeWidth * FIXED_FREEDRAW_CORNER_ROUNDING_WIDTH_FACTOR,
FIXED_FREEDRAW_MIN_CORNER_ROUNDING,
),
previousSegmentLength * FIXED_FREEDRAW_CORNER_ROUNDING_FACTOR,
nextSegmentLength * FIXED_FREEDRAW_CORNER_ROUNDING_FACTOR,
FIXED_FREEDRAW_MAX_CORNER_ROUNDING,
);
if (!cornerRounding) {
return null;
}
return {
entryPoint: [
currentPoint[0] - (previousDeltaX / previousSegmentLength) * cornerRounding,
currentPoint[1] - (previousDeltaY / previousSegmentLength) * cornerRounding,
] as const,
exitPoint: [
currentPoint[0] + (nextDeltaX / nextSegmentLength) * cornerRounding,
currentPoint[1] + (nextDeltaY / nextSegmentLength) * cornerRounding,
] as const,
};
};
const getFixedFreeDrawTerminalStubThreshold = (strokeWidth: number) =>
Math.min(
Math.max(
strokeWidth * FIXED_FREEDRAW_TERMINAL_STUB_WIDTH_FACTOR,
FIXED_FREEDRAW_MIN_TERMINAL_STUB,
),
FIXED_FREEDRAW_MAX_TERMINAL_STUB,
);
const getSvgPathFromFixedFreeDrawPoints = (
points: ReadonlyArray<readonly number[]>,
strokeWidth: number,
): string => {
const len = points.length;
if (len < 2) {
return "";
}
if (len === 2) {
return `M${roundPoint(points[0])}L${roundPoint(points[1])}`;
}
let path = `M${roundPoint(points[0])}`;
const lastPoint = points[len - 1];
let endsAtLastPoint = false;
for (let index = 1; index < len - 1; index++) {
const previousPoint = points[index - 1];
const currentPoint = points[index];
const nextPoint = points[index + 1];
const isLastCurveSegment = index === len - 2;
const terminalStubThreshold = getFixedFreeDrawTerminalStubThreshold(
strokeWidth,
);
const shouldSmooth = shouldSmoothFixedFreeDrawPoint(
previousPoint,
currentPoint,
nextPoint,
);
const roundedCorner = shouldSmooth
? null
: getFixedFreeDrawRoundedCorner(
previousPoint,
currentPoint,
nextPoint,
strokeWidth,
);
const shouldCollapseSmoothTerminalStub =
isLastCurveSegment &&
shouldSmooth &&
getReadonlyPointDistance(currentPoint, nextPoint) / 2 <=
terminalStubThreshold;
const shouldCollapseRoundedTerminalStub =
isLastCurveSegment &&
!!roundedCorner &&
getReadonlyPointDistance(roundedCorner.exitPoint, lastPoint) <=
terminalStubThreshold;
path += shouldSmooth
? `Q${roundPoint(currentPoint)}${
shouldCollapseSmoothTerminalStub
? roundPoint(lastPoint)
: averagePoint(currentPoint, nextPoint)
}`
: roundedCorner
? `L${roundPoint(roundedCorner.entryPoint)}Q${roundPoint(
currentPoint,
)}${
shouldCollapseRoundedTerminalStub
? roundPoint(lastPoint)
: roundPoint(roundedCorner.exitPoint)
}`
: `L${roundPoint(currentPoint)}`;
endsAtLastPoint =
shouldCollapseSmoothTerminalStub || shouldCollapseRoundedTerminalStub;
}
return endsAtLastPoint ? path : `${path}L${roundPoint(lastPoint)}`;
};
const getSvgPathFromStroke = (
points: ReadonlyArray<readonly number[]>,
): string => {
const getSvgPathFromStroke = (points: number[][]): string => {
if (!points.length) {
return "";
}
@@ -1,4 +1,8 @@
import {
isCloseTo,
line,
linesIntersectAt,
pointDistance,
pointFrom,
pointRotateRads,
rangeInclusive,
@@ -13,7 +17,7 @@ import {
getDraggedElementsBounds,
getElementAbsoluteCoords,
} from "@excalidraw/element";
import { isBoundToContainer } from "@excalidraw/element";
import { isBoundToContainer, isElbowArrow } from "@excalidraw/element";
import { getMaximumGroups } from "@excalidraw/element";
@@ -29,14 +33,18 @@ import type { MaybeTransformHandleType } from "@excalidraw/element";
import type {
ElementsMap,
ExcalidrawElement,
ExcalidrawLinearElement,
NonDeletedExcalidrawElement,
NonDeleted,
} from "@excalidraw/element/types";
import type {
AppClassProperties,
AppState,
KeyboardModifiersObject,
} from "./types";
} from "@excalidraw/excalidraw/types";
import { LinearElementEditor } from "./linearElementEditor";
const SNAP_DISTANCE = 8;
@@ -122,6 +130,11 @@ export type SnapLine = PointSnapLine | GapSnapLine | PointerSnapLine;
export class SnapCache {
private static referenceSnapPoints: GlobalPoint[] | null = null;
private static linearElementAxisSnapTargets: {
editingElementId: ExcalidrawElement["id"];
snapTargets: GlobalPoint[];
} | null = null;
private static visibleGaps: {
verticalGaps: Gap[];
horizontalGaps: Gap[];
@@ -135,6 +148,27 @@ export class SnapCache {
return SnapCache.referenceSnapPoints;
};
public static setLinearElementAxisSnapTargets = (
editingElementId: ExcalidrawElement["id"],
snapTargets: GlobalPoint[] | null,
) => {
SnapCache.linearElementAxisSnapTargets = snapTargets
? {
editingElementId,
snapTargets,
}
: null;
};
public static getLinearElementAxisSnapTargets = (
editingElementId: ExcalidrawElement["id"],
) => {
return SnapCache.linearElementAxisSnapTargets?.editingElementId ===
editingElementId
? SnapCache.linearElementAxisSnapTargets.snapTargets
: null;
};
public static setVisibleGaps = (
gaps: {
verticalGaps: Gap[];
@@ -150,6 +184,7 @@ export class SnapCache {
public static destroy = () => {
SnapCache.referenceSnapPoints = null;
SnapCache.linearElementAxisSnapTargets = null;
SnapCache.visibleGaps = null;
};
}
@@ -235,6 +270,19 @@ export const getElementsCorners = (
const halfHeight = (y2 - y1) / 2;
if (
(element.type === "line" || element.type === "arrow") &&
!boundingBoxCorners
) {
// For linear elements, use actual points instead of bounding box
const linearPoints = LinearElementEditor.getPointsGlobalCoordinates(
element as NonDeleted<ExcalidrawLinearElement>,
elementsMap,
{
dragOffset,
},
);
result = linearPoints;
} else if (
(element.type === "diamond" || element.type === "ellipse") &&
!boundingBoxCorners
) {
@@ -633,6 +681,227 @@ export const getReferenceSnapPoints = (
.flatMap((elementGroup) => getElementsCorners(elementGroup, elementsMap));
};
const getExternalAxisSnapTargets = (
elements: readonly NonDeletedExcalidrawElement[],
editingElement: ExcalidrawLinearElement,
appState: AppState,
elementsMap: ElementsMap,
) => {
const cachedAxisSnapTargets = SnapCache.getLinearElementAxisSnapTargets(
editingElement.id,
);
const externalAxisSnapTargets =
cachedAxisSnapTargets ??
getReferenceSnapPoints(elements, [editingElement], appState, elementsMap);
if (!cachedAxisSnapTargets) {
SnapCache.setLinearElementAxisSnapTargets(
editingElement.id,
externalAxisSnapTargets,
);
}
return externalAxisSnapTargets;
};
const getOwnAxisSnapTargets = (
editingElement: ExcalidrawLinearElement,
elementsMap: ElementsMap,
selectedPointsIndices?: readonly number[],
) => {
return LinearElementEditor.getPointsGlobalCoordinates(
editingElement as NonDeleted<ExcalidrawLinearElement>,
elementsMap,
{
excludePointsIndices: selectedPointsIndices,
},
);
};
export const getAxisSnapTargets = (
elements: readonly NonDeletedExcalidrawElement[],
editingElement: ExcalidrawLinearElement,
appState: AppState,
elementsMap: ElementsMap,
options: {
includeSelfPoints?: boolean;
selectedPointsIndices?: readonly number[];
} = {},
) => {
const externalAxisSnapTargets = getExternalAxisSnapTargets(
elements,
editingElement,
appState,
elementsMap,
);
if (!options.includeSelfPoints) {
return externalAxisSnapTargets;
}
return externalAxisSnapTargets.concat(
getOwnAxisSnapTargets(
editingElement,
elementsMap,
options.selectedPointsIndices,
),
);
};
const collectNearestAxisSnapCandidates = (
axisSnapTargets: readonly GlobalPoint[],
pointerPosition: GlobalPoint,
nearestSnapsX: Snaps,
nearestSnapsY: Snaps,
minOffset: Vector2D,
) => {
for (const snapTarget of axisSnapTargets) {
const offsetX = snapTarget[0] - pointerPosition[0];
const offsetY = snapTarget[1] - pointerPosition[1];
const absOffsetX = Math.abs(offsetX);
const absOffsetY = Math.abs(offsetY);
if (absOffsetX > minOffset.x && absOffsetY > minOffset.y) {
continue;
}
if (absOffsetX <= minOffset.x) {
if (absOffsetX < minOffset.x) {
nearestSnapsX.length = 0;
}
nearestSnapsX.push({
type: "point",
points: [pointerPosition, snapTarget],
offset: offsetX,
});
minOffset.x = absOffsetX;
}
if (absOffsetY <= minOffset.y) {
if (absOffsetY < minOffset.y) {
nearestSnapsY.length = 0;
}
nearestSnapsY.push({
type: "point",
points: [pointerPosition, snapTarget],
offset: offsetY,
});
minOffset.y = absOffsetY;
}
}
};
export const snapLinearElementPoint = (
elements: readonly NonDeletedExcalidrawElement[],
editingElement: ExcalidrawLinearElement,
pointerPosition: GlobalPoint,
app: AppClassProperties,
event: KeyboardModifiersObject,
elementsMap: ElementsMap,
options: {
includeExternalPoints?: boolean;
includeSelfPoints?: boolean;
selectedPointsIndices?: readonly number[];
} = {},
) => {
if (
!isSnappingEnabled({ app, event, selectedElements: [editingElement] }) ||
isElbowArrow(editingElement)
) {
return {
snapOffset: { x: 0, y: 0 },
snapLines: [],
};
}
const snapDistance = getSnapDistance(app.state.zoom.value);
const minOffset = {
x: snapDistance,
y: snapDistance,
};
const nearestSnapsX: Snaps = [];
const nearestSnapsY: Snaps = [];
if (options.includeExternalPoints !== false) {
collectNearestAxisSnapCandidates(
getExternalAxisSnapTargets(
elements,
editingElement,
app.state,
elementsMap,
),
pointerPosition,
nearestSnapsX,
nearestSnapsY,
minOffset,
);
}
if (options.includeSelfPoints) {
collectNearestAxisSnapCandidates(
getOwnAxisSnapTargets(
editingElement,
elementsMap,
options.selectedPointsIndices,
),
pointerPosition,
nearestSnapsX,
nearestSnapsY,
minOffset,
);
}
const snapOffset = {
x: nearestSnapsX[0]?.offset ?? 0,
y: nearestSnapsY[0]?.offset ?? 0,
};
// Create snap lines using the snapped position (fixed position)
let pointSnapLines: SnapLine[] = [];
if (snapOffset.x !== 0 || snapOffset.y !== 0) {
const snappedPosition = pointFrom<GlobalPoint>(
pointerPosition[0] + snapOffset.x,
pointerPosition[1] + snapOffset.y,
);
const snappedSnapsX = nearestSnapsX
.filter(
(snap): snap is PointSnap =>
snap.type === "point" && isCloseTo(snap.offset, snapOffset.x, 0.01),
)
.map((snap) => ({
type: "point" as const,
points: [snappedPosition, snap.points[1]] as [GlobalPoint, GlobalPoint],
offset: 0,
}));
const snappedSnapsY = nearestSnapsY
.filter(
(snap): snap is PointSnap =>
snap.type === "point" && isCloseTo(snap.offset, snapOffset.y, 0.01),
)
.map((snap) => ({
type: "point" as const,
points: [snappedPosition, snap.points[1]] as [GlobalPoint, GlobalPoint],
offset: 0,
}));
pointSnapLines = createPointSnapLines(snappedSnapsX, snappedSnapsY);
}
return {
snapOffset,
snapLines: pointSnapLines,
};
};
const getPointSnaps = (
selectedElements: ExcalidrawElement[],
selectionSnapPoints: GlobalPoint[],
@@ -1412,3 +1681,79 @@ export const isActiveToolNonLinearSnappable = (
activeToolType === TOOL_TYPE.text
);
};
/**
* Snaps to discrete angle rotation logic.
* This function handles the common pattern of finding intersections between
* angle lines and snap lines, and updating the snap lines accordingly.
*
* @param snapLines - The original snap lines from snapping
* @param angleLine - The line representing the discrete angle constraint
* @param gridPosition - The grid position (original pointer position)
* @param referencePosition - The reference position (usually the start point)
* @returns Object containing updated snap lines and position deltas
*/
export const snapToDiscreteAngle = (
snapLines: SnapLine[],
angleLine: [GlobalPoint, GlobalPoint],
gridPosition: GlobalPoint,
referencePosition: GlobalPoint,
): {
snapLines: SnapLine[];
dxFromReference: number;
dyFromReference: number;
} => {
if (snapLines.length === 0) {
return {
snapLines: [],
dxFromReference: gridPosition[0] - referencePosition[0],
dyFromReference: gridPosition[1] - referencePosition[1],
};
}
const firstSnapLine = snapLines[0];
if (firstSnapLine.type === "points" && firstSnapLine.points.length > 1) {
const snapLine = line(firstSnapLine.points[0], firstSnapLine.points[1]);
const intersection = linesIntersectAt<GlobalPoint>(
line(angleLine[0], angleLine[1]),
snapLine,
);
if (intersection) {
const dxFromReference = intersection[0] - referencePosition[0];
const dyFromReference = intersection[1] - referencePosition[1];
const furthestPoint = firstSnapLine.points.reduce(
(furthest, point) => {
const distance = pointDistance(intersection, point);
if (distance > furthest.distance) {
return { point, distance };
}
return furthest;
},
{
point: firstSnapLine.points[0],
distance: pointDistance(intersection, firstSnapLine.points[0]),
},
);
const updatedSnapLine: PointSnapLine = {
type: "points",
points: [furthestPoint.point, intersection],
};
return {
snapLines: [updatedSnapLine],
dxFromReference,
dyFromReference,
};
}
}
// If no intersection found, return original snap lines with grid position
return {
snapLines,
dxFromReference: gridPosition[0] - referencePosition[0],
dyFromReference: gridPosition[1] - referencePosition[1],
};
};
-2
View File
@@ -26,7 +26,6 @@ export type PointerType = "mouse" | "pen" | "touch";
export type StrokeRoundness = "round" | "sharp";
export type RoundnessType = ValueOf<typeof ROUNDNESS>;
export type StrokeStyle = "solid" | "dashed" | "dotted";
export type FreeDrawStrokeShape = "variable" | "fixed";
export type TextAlign = typeof TEXT_ALIGN[keyof typeof TEXT_ALIGN];
type VerticalAlignKeys = keyof typeof VERTICAL_ALIGN;
@@ -391,7 +390,6 @@ export type ExcalidrawFreeDrawElement = _ExcalidrawElementBase &
points: readonly LocalPoint[];
pressures: readonly number[];
simulatePressure: boolean;
strokeShape?: FreeDrawStrokeShape;
}>;
export type FileId = string & { _brand: "FileId" };
+1 -30
View File
@@ -6,11 +6,7 @@ import type { LocalPoint } from "@excalidraw/math";
import { getElementAbsoluteCoords, getElementBounds } from "../src/bounds";
import type {
ExcalidrawElement,
ExcalidrawFreeDrawElement,
ExcalidrawLinearElement,
} from "../src/types";
import type { ExcalidrawElement, ExcalidrawLinearElement } from "../src/types";
const _ce = ({
x,
@@ -121,31 +117,6 @@ describe("getElementBounds", () => {
expect(y2).toEqual(42.90569415042095);
});
it("fixed freedraw", () => {
const element = {
..._ce({
x: 40,
y: 30,
w: 10,
h: 0,
a: 0,
t: "freedraw",
}),
strokeWidth: 8,
points: [pointFrom<LocalPoint>(0, 0), pointFrom<LocalPoint>(10, 0)],
pressures: [],
simulatePressure: true,
strokeShape: "fixed",
} as unknown as ExcalidrawFreeDrawElement;
const [x1, y1, x2, y2] = getElementBounds(element, arrayToMap([element]));
expect(x1).toEqual(36);
expect(y1).toEqual(26);
expect(x2).toEqual(54);
expect(y2).toEqual(34);
});
it("curved line", () => {
const element = {
..._ce({
@@ -155,6 +155,24 @@ describe("Test Linear Elements", () => {
});
};
const dragMove = (startPoint: GlobalPoint, endPoint: GlobalPoint) => {
fireEvent.pointerDown(interactiveCanvas, {
clientX: startPoint[0],
clientY: startPoint[1],
});
fireEvent.pointerMove(interactiveCanvas, {
clientX: endPoint[0],
clientY: endPoint[1],
});
};
const dragEnd = (endPoint: GlobalPoint) => {
fireEvent.pointerUp(interactiveCanvas, {
clientX: endPoint[0],
clientY: endPoint[1],
});
};
const deletePoint = (point: GlobalPoint) => {
fireEvent.pointerDown(interactiveCanvas, {
clientX: point[0],
@@ -258,6 +276,73 @@ describe("Test Linear Elements", () => {
expect(h.state.selectedLinearElement?.elementId).toEqual(h.elements[0].id);
});
it("shows snap lines and snaps the endpoint when creating a line", () => {
const rect = API.createElement({
type: "rectangle",
x: 100,
y: 100,
width: 40,
height: 40,
});
API.setElements([rect]);
API.setAppState({ objectsSnapModeEnabled: true });
UI.clickTool("line");
const startPoint = pointFrom<GlobalPoint>(20, 20);
const pointerNearCorner = pointFrom<GlobalPoint>(95, 95);
dragMove(startPoint, pointerNearCorner);
expect(h.state.snapLines.length).toBeGreaterThan(0);
dragEnd(pointerNearCorner);
const line = h.elements.find(
(element): element is ExcalidrawLinearElement => element.type === "line",
);
expect(line).toBeDefined();
const endpoint = LinearElementEditor.getPointGlobalCoordinates(
line!,
line!.points[line!.points.length - 1],
h.app.scene.getNonDeletedElementsMap(),
);
expect(endpoint).toEqual(pointFrom<GlobalPoint>(100, 100));
});
it("prefers binding over external snaps when creating an arrow endpoint", () => {
const rect = API.createElement({
type: "rectangle",
x: 100,
y: 100,
width: 40,
height: 40,
});
API.setElements([rect]);
API.setAppState({ objectsSnapModeEnabled: true });
UI.clickTool("arrow");
const startPoint = pointFrom<GlobalPoint>(20, 20);
const pointerNearBindable = pointFrom<GlobalPoint>(96, 118);
dragMove(startPoint, pointerNearBindable);
expect(h.state.suggestedBinding?.element.id).toBe(rect.id);
expect(h.state.snapLines).toEqual([]);
dragEnd(pointerNearBindable);
const arrow = h.elements.find(
(element): element is ExcalidrawLinearElement => element.type === "arrow",
);
expect(arrow?.endBinding?.elementId).toBe(rect.id);
});
it("should enter line editor via enter (line)", () => {
createTwoPointerLinearElement("line");
expect(h.state.selectedLinearElement?.isEditing).toBe(false);
@@ -401,6 +486,77 @@ describe("Test Linear Elements", () => {
`);
});
it("shows snap lines when dragging a point to another line point axis", () => {
const line = API.createElement({
type: "line",
x: 20,
y: 20,
width: 100,
height: 50,
roughness: 0,
points: [
pointFrom<LocalPoint>(0, 0),
pointFrom<LocalPoint>(50, 50),
pointFrom<LocalPoint>(100, 0),
],
});
API.setElements([line]);
API.setAppState({ objectsSnapModeEnabled: true });
enterLineEditingMode(line);
const middlePoint = pointFrom<GlobalPoint>(70, 70);
const pointerNearEndPointX = pointFrom<GlobalPoint>(117, 65);
dragMove(middlePoint, pointerNearEndPointX);
expect(h.state.snapLines.length).toBeGreaterThan(0);
dragEnd(pointerNearEndPointX);
expect(API.getElement(line).points[1]).toEqual(
pointFrom<LocalPoint>(100, 45),
);
});
it("prefers binding over external snaps when dragging an existing arrow endpoint", () => {
const rect = API.createElement({
type: "rectangle",
x: 100,
y: 100,
width: 40,
height: 40,
});
const arrow = API.createElement({
type: "arrow",
x: 20,
y: 20,
width: 40,
height: 0,
points: [pointFrom<LocalPoint>(0, 0), pointFrom<LocalPoint>(40, 0)],
});
API.setElements([rect, arrow]);
API.setAppState({ objectsSnapModeEnabled: true });
enterLineEditingMode(arrow);
const endPoint = LinearElementEditor.getPointGlobalCoordinates(
arrow,
arrow.points[arrow.points.length - 1],
h.app.scene.getNonDeletedElementsMap(),
);
const pointerNearBindable = pointFrom<GlobalPoint>(96, 118);
dragMove(endPoint, pointerNearBindable);
expect(h.state.suggestedBinding?.element.id).toBe(rect.id);
expect(h.state.snapLines).toEqual([]);
dragEnd(pointerNearBindable);
expect(API.getElement(arrow).endBinding?.elementId).toBe(rect.id);
});
it("should update the midpoints when element roundness changed", async () => {
createThreePointerLinearElement("line");
-160
View File
@@ -1,160 +0,0 @@
import { pointFrom } from "@excalidraw/math";
import { API } from "@excalidraw/excalidraw/tests/helpers/api";
import { vi } from "vitest";
vi.mock("perfect-freehand", () => ({
getStroke: vi.fn(() => []),
}));
import { getStroke } from "perfect-freehand";
import { getFreedrawOutlinePoints, ShapeCache } from "../src/shape";
describe("freedraw stroke shape", () => {
beforeEach(() => {
vi.mocked(getStroke).mockClear();
ShapeCache.destroy();
});
it("renders fixed strokes from the centerline path", () => {
const element = API.createElement({
type: "freedraw",
strokeShape: "fixed",
points: [pointFrom(0, 0), pointFrom(10, 10), pointFrom(20, 15)],
});
const shapes = ShapeCache.generateElementShape(element, null);
expect(shapes).toEqual([expect.any(String)]);
expect(shapes[0]).not.toContain("Z");
expect(vi.mocked(getStroke)).not.toHaveBeenCalled();
});
it("rounds fixed stroke corners without flattening them", () => {
const element = API.createElement({
type: "freedraw",
strokeShape: "fixed",
strokeWidth: 1,
points: [pointFrom(0, 0), pointFrom(10, 0), pointFrom(10, 10)],
});
const [path] = ShapeCache.generateElementShape(element, null);
expect(path).toBe("M0,0 L8.5,0 Q10,0 10,1.5 L10,10 ");
});
it("does not round fixed stroke hairpin turns", () => {
const element = API.createElement({
type: "freedraw",
strokeShape: "fixed",
strokeWidth: 1,
points: [pointFrom(0, 0), pointFrom(10, 0), pointFrom(9, 1)],
});
const [path] = ShapeCache.generateElementShape(element, null);
expect(path).toBe("M0,0 L10,0 L9,1 ");
});
it("curves directly to the endpoint for tiny final smooth segments", () => {
const element = API.createElement({
type: "freedraw",
strokeShape: "fixed",
strokeWidth: 1,
points: [pointFrom(0, 0), pointFrom(0.5, 0.1), pointFrom(0.8, 0.3)],
});
const [path] = ShapeCache.generateElementShape(element, null);
expect(path).toBe("M0,0 Q0.5,0.1 0.8,0.3 ");
});
it("curves directly to the endpoint for tiny final rounded corners", () => {
const element = API.createElement({
type: "freedraw",
strokeShape: "fixed",
strokeWidth: 1,
points: [pointFrom(0, 0), pointFrom(10, 0), pointFrom(10, 1)],
});
const [path] = ShapeCache.generateElementShape(element, null);
expect(path).toBe("M0,0 L9.65,0 Q10,0 10,1 ");
});
it("smooths dense fixed stroke points without dropping them", () => {
const element = API.createElement({
type: "freedraw",
strokeShape: "fixed",
points: [
pointFrom(0, 0),
pointFrom(0.3, 0.1),
pointFrom(0.6, 0.35),
pointFrom(1, 0.9),
],
});
const [path] = ShapeCache.generateElementShape(element, null);
expect(path).toContain("Q0.3,0.1 ");
expect(path).toContain("Q0.6,0.35 ");
});
it("drops synthetic loop closure for fixed strokes", () => {
const element = API.createElement({
type: "freedraw",
strokeShape: "fixed",
points: [pointFrom(0, 0), pointFrom(10, 0), pointFrom(0, 0)],
});
const [path] = ShapeCache.generateElementShape(element, null);
expect(path).toBe("M0,0 L10,0 ");
});
it("uses fixed perfect-freehand settings for fixed strokes", () => {
const element = API.createElement({
type: "freedraw",
strokeShape: "fixed",
strokeWidth: 8,
points: [pointFrom(0, 0), pointFrom(10, 10), pointFrom(20, 15)],
});
getFreedrawOutlinePoints(element);
expect(vi.mocked(getStroke)).toHaveBeenCalledWith(
element.points,
expect.objectContaining({
simulatePressure: false,
size: element.strokeWidth,
thinning: 0,
}),
);
});
it("keeps pressure-aware perfect-freehand settings for variable strokes", () => {
const element = API.createElement({
type: "freedraw",
points: [pointFrom(0, 0), pointFrom(10, 10), pointFrom(20, 15)],
});
getFreedrawOutlinePoints({
...element,
simulatePressure: false,
pressures: [0.2, 0.8, 0.4],
});
expect(vi.mocked(getStroke)).toHaveBeenCalledWith(
[
[0, 0, 0.2],
[10, 10, 0.8],
[20, 15, 0.4],
],
expect.objectContaining({
simulatePressure: false,
size: element.strokeWidth * 4.25,
thinning: 0.6,
}),
);
});
});
@@ -2,7 +2,6 @@ import { pointFrom } from "@excalidraw/math";
import { bindOrUnbindBindingElement } from "@excalidraw/element/binding";
import {
isLoopFreeDrawElement,
isValidPolygon,
LinearElementEditor,
newElementWith,
@@ -243,11 +242,7 @@ export const actionFinalize = register<FormData>({
// If the multi point line closes the loop,
// set the last point to first point.
// This ensures that loop remains closed at different scales.
const isLoop = isLineElement(element)
? isPathALoop(element.points, appState.zoom.value)
: isFreeDrawElement(element)
? isLoopFreeDrawElement(element, appState.zoom.value)
: false;
const isLoop = isPathALoop(element.points, appState.zoom.value);
if (isLoop && (isLineElement(element) || isFreeDrawElement(element))) {
const linePoints = element.points;
@@ -1,5 +1,4 @@
import { queryByTestId } from "@testing-library/react";
import { pointFrom } from "@excalidraw/math";
import {
COLOR_PALETTE,
@@ -11,7 +10,7 @@ import {
import { Excalidraw } from "../index";
import { API } from "../tests/helpers/api";
import { UI } from "../tests/helpers/ui";
import { act, render } from "../tests/test-utils";
import { render } from "../tests/test-utils";
describe("element locking", () => {
beforeEach(async () => {
@@ -81,20 +80,6 @@ describe("element locking", () => {
const centerTextAlign = queryByTestId(document.body, `align-right`);
expect(centerTextAlign).toBeChecked();
});
it("should show the active freedraw stroke type", () => {
UI.clickTool("freedraw");
API.setAppState({
currentItemStrokeShape: "fixed",
});
const fixedStrokeShape = queryByTestId(
document.body,
"strokeShape-fixed",
);
expect(fixedStrokeShape).toBeChecked();
});
});
describe("properties when elements selected", () => {
@@ -159,9 +144,6 @@ describe("element locking", () => {
expect(
queryByTestId(document.body, `strokeWidth-thin`),
).not.toBeChecked();
expect(
queryByTestId(document.body, `strokeWidth-medium`),
).not.toBeChecked();
expect(
queryByTestId(document.body, `strokeWidth-bold`),
).not.toBeChecked();
@@ -177,7 +159,6 @@ describe("element locking", () => {
});
const text = API.createElement({
type: "text",
strokeWidth: STROKE_WIDTH.bold,
fontFamily: FONT_FAMILY["Comic Shanns"],
});
API.setElements([rect, text]);
@@ -188,35 +169,5 @@ describe("element locking", () => {
"active",
);
});
it("should highlight the fixed freedraw stroke type for selected elements", () => {
const freedraw = API.createElement({
type: "freedraw",
strokeShape: "fixed",
points: [pointFrom(0, 0), pointFrom(10, 10), pointFrom(20, 15)],
});
API.setElements([freedraw]);
API.setSelectedElements([freedraw]);
const fixedStrokeShape = queryByTestId(
document.body,
"strokeShape-fixed",
);
expect(fixedStrokeShape).toBeChecked();
});
it("should apply fixed freedraw stroke type to newly drawn strokes", () => {
UI.clickTool("freedraw");
act(() => {
queryByTestId(document.body, "strokeShape-fixed")?.click();
});
const freedraw = UI.createElement("freedraw", {
points: [pointFrom(0, 0), pointFrom(10, 10), pointFrom(20, 15)],
});
expect(freedraw.strokeShape).toBe("fixed");
});
});
});
@@ -3,7 +3,6 @@ import { pointFrom } from "@excalidraw/math";
import { useEffect, useMemo, useRef, useState } from "react";
import {
DEFAULT_FREE_DRAW_STROKE_SHAPE,
DEFAULT_ELEMENT_BACKGROUND_COLOR_PALETTE,
DEFAULT_ELEMENT_BACKGROUND_PICKS,
DEFAULT_ELEMENT_STROKE_COLOR_PALETTE,
@@ -37,7 +36,6 @@ import {
import { LinearElementEditor } from "@excalidraw/element";
import { newElementWith } from "@excalidraw/element";
import { newFreeDrawElementWithStrokeShape } from "@excalidraw/element";
import { getArrowheadForPicker } from "@excalidraw/element";
import {
@@ -49,7 +47,6 @@ import {
isArrowElement,
isBoundToContainer,
isElbowArrow,
isFreeDrawElement,
isLinearElement,
isLineElement,
isTextElement,
@@ -73,7 +70,6 @@ import type {
ElementsMap,
ExcalidrawBindableElement,
ExcalidrawElement,
ExcalidrawFreeDrawElement,
ExcalidrawLinearElement,
ExcalidrawTextElement,
FontFamilyValues,
@@ -109,11 +105,8 @@ import {
SloppinessArtistIcon,
SloppinessCartoonistIcon,
StrokeWidthBaseIcon,
StrokeWidthMediumIcon,
StrokeWidthBoldIcon,
StrokeWidthExtraBoldIcon,
StrokeShapeFixedIcon,
StrokeShapeVariableIcon,
FontSizeSmallIcon,
FontSizeMediumIcon,
FontSizeLargeIcon,
@@ -194,29 +187,6 @@ export const changeProperty = (
});
};
const getFreeDrawStrokeShape = (item: {
strokeShape?: ExcalidrawFreeDrawElement["strokeShape"];
currentItemStrokeShape?: AppState["currentItemStrokeShape"];
}) =>
item.strokeShape ??
item.currentItemStrokeShape ??
DEFAULT_FREE_DRAW_STROKE_SHAPE;
const getAppStateWithCurrentItemStrokeShape = (
appState: AppState,
strokeShape: NonNullable<ExcalidrawFreeDrawElement["strokeShape"]>,
) => {
// if (strokeShape === DEFAULT_FREE_DRAW_STROKE_SHAPE) {
// const { currentItemStrokeShape, ...nextAppState } = appState;
// return nextAppState;
// }
return {
...appState,
currentItemStrokeShape: strokeShape,
};
};
export const getFormValue = function <T extends Primitive>(
elements: readonly ExcalidrawElement[],
app: AppClassProperties,
@@ -604,12 +574,6 @@ export const actionChangeStrokeWidth = register<
icon: StrokeWidthBaseIcon,
testId: "strokeWidth-thin",
},
{
value: STROKE_WIDTH.medium,
text: t("labels.medium"),
icon: StrokeWidthMediumIcon,
testId: "strokeWidth-medium",
},
{
value: STROKE_WIDTH.bold,
text: t("labels.bold"),
@@ -638,60 +602,6 @@ export const actionChangeStrokeWidth = register<
),
});
export const actionChangeStrokeShape = register<
NonNullable<ExcalidrawFreeDrawElement["strokeShape"]>
>({
name: "changeStrokeShape",
label: "labels.strokeShape",
trackEvent: false,
perform: (elements, appState, value) => {
invariant(value, "actionChangeStrokeShape: value must be defined");
return {
elements: changeProperty(elements, appState, (el) =>
isFreeDrawElement(el)
? newFreeDrawElementWithStrokeShape(el, value)
: el,
),
appState: getAppStateWithCurrentItemStrokeShape(appState, value),
captureUpdate: CaptureUpdateAction.IMMEDIATELY,
};
},
PanelComponent: ({ elements, appState, updateData, app }) => (
<fieldset>
<legend>{t("labels.strokeShape")}</legend>
<div className="buttonList">
<RadioSelection
group="stroke-shape"
options={[
{
value: "variable",
text: t("labels.strokeShape_variable"),
icon: StrokeShapeVariableIcon,
testId: "strokeShape-variable",
},
{
value: "fixed",
text: t("labels.strokeShape_fixed"),
icon: StrokeShapeFixedIcon,
testId: "strokeShape-fixed",
},
]}
value={getFormValue(
elements,
app,
(element) =>
getFreeDrawStrokeShape(element as ExcalidrawFreeDrawElement),
isFreeDrawElement,
(hasSelection) =>
hasSelection ? null : getFreeDrawStrokeShape(appState),
)}
onChange={(value) => updateData(value)}
/>
</div>
</fieldset>
),
});
export const actionChangeSloppiness = register<ExcalidrawElement["roughness"]>({
name: "changeSloppiness",
label: "labels.sloppiness",
@@ -1,5 +1,4 @@
import {
DEFAULT_FREE_DRAW_STROKE_SHAPE,
DEFAULT_FONT_SIZE,
DEFAULT_FONT_FAMILY,
DEFAULT_TEXT_ALIGN,
@@ -11,7 +10,6 @@ import {
import { newElementWith } from "@excalidraw/element";
import {
isFreeDrawElement,
hasBoundTextElement,
canApplyRoundnessTypeToElement,
getDefaultRoundnessTypeForElement,
@@ -20,7 +18,6 @@ import {
isExcalidrawElement,
isTextElement,
} from "@excalidraw/element";
import { newFreeDrawElementWithStrokeShape } from "@excalidraw/element";
import {
getBoundTextElement,
@@ -157,17 +154,6 @@ export const actionPasteStyles = register({
});
}
if (
isFreeDrawElement(newElement) &&
isFreeDrawElement(elementStylesToCopyFrom)
) {
newElement = newFreeDrawElementWithStrokeShape(
newElement,
elementStylesToCopyFrom.strokeShape ??
DEFAULT_FREE_DRAW_STROKE_SHAPE,
);
}
if (isFrameLikeElement(element)) {
newElement = newElementWith(newElement, {
roundness: null,
-1
View File
@@ -172,7 +172,6 @@ const APP_STATE_STORAGE_CONF = (<
currentItemStrokeColor: { browser: true, export: false, server: false },
currentItemStrokeStyle: { browser: true, export: false, server: false },
currentItemStrokeWidth: { browser: true, export: false, server: false },
currentItemStrokeShape: { browser: true, export: false, server: false },
currentItemTextAlign: { browser: true, export: false, server: false },
currentHoveredFontFamily: { browser: false, export: false, server: false },
cursorButton: { browser: true, export: false, server: false },
@@ -394,11 +394,6 @@ const CombinedShapeProperties = ({
hasStrokeWidth(element.type),
)) &&
renderAction("changeStrokeWidth")}
{(appState.activeTool.type === "freedraw" ||
targetElements.some(
(element) => element.type === "freedraw",
)) &&
renderAction("changeStrokeShape")}
{(hasStrokeStyle(appState.activeTool.type) ||
targetElements.some((element) =>
hasStrokeStyle(element.type),
+102 -121
View File
@@ -9,7 +9,6 @@ import {
clamp,
pointFrom,
pointDistance,
round,
vector,
pointRotateRads,
vectorFromPoint,
@@ -120,7 +119,6 @@ import {
getElementAbsoluteCoords,
bindOrUnbindBindingElements,
fixBindingsAfterDeletion,
getFixedFreeDrawPointAction,
getHoveredElementForBinding,
isBindingEnabled,
updateBoundElements,
@@ -241,6 +239,16 @@ import {
hitElementBoundingBox,
isLineElement,
isSimpleArrow,
isGridModeEnabled,
SnapCache,
isActiveToolNonLinearSnappable,
getSnapLinesAtPointer,
isSnappingEnabled,
getReferenceSnapPoints,
getVisibleGaps,
snapDraggedElements,
snapNewElement,
snapResizingElements,
StoreDelta,
type ApplyToOptions,
positionElementsOnGrid,
@@ -398,18 +406,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 { Renderer } from "../scene/Renderer";
import {
setEraserCursor,
@@ -617,19 +613,6 @@ const gesture: Gesture = {
initialScale: null,
};
const FREEDRAW_POINT_DECIMALS = 2;
const FREEDRAW_PRESSURE_DECIMALS = 3;
const FREEDRAW_DOT_EPSILON = 1 / 10 ** FREEDRAW_POINT_DECIMALS;
const roundFreeDrawCoordinate = (value: number) =>
round(value, FREEDRAW_POINT_DECIMALS);
const roundFreeDrawPressure = (value: number) =>
round(value, FREEDRAW_PRESSURE_DECIMALS);
const getRoundedFreeDrawPoint = (x: number, y: number) =>
pointFrom<LocalPoint>(roundFreeDrawCoordinate(x), roundFreeDrawCoordinate(y));
class App extends React.Component<AppProps, AppState> {
canvas: AppClassProperties["canvas"];
interactiveCanvas: AppClassProperties["interactiveCanvas"] = null;
@@ -800,6 +783,29 @@ class App extends React.Component<AppProps, AppState> {
return api;
}
private withStableSnapLines<T extends { snapLines: AppState["snapLines"] }>(
state: T,
): T {
const snapLines = updateStable(this.state.snapLines, state.snapLines);
return snapLines === state.snapLines
? state
: {
...state,
snapLines,
};
}
private shouldUpdateSelectedLinearElementState(
selectedLinearElement: AppState["selectedLinearElement"],
snapLines: AppState["snapLines"],
) {
return (
selectedLinearElement !== this.state.selectedLinearElement ||
snapLines !== this.state.snapLines
);
}
constructor(props: AppProps) {
super(props);
const defaultAppState = getDefaultAppState();
@@ -6801,7 +6807,10 @@ class App extends React.Component<AppProps, AppState> {
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(),
@@ -6850,7 +6859,7 @@ class App extends React.Component<AppProps, AppState> {
this.state.selectedLinearElement?.isEditing &&
!this.state.selectedLinearElement.isDragging
) {
const editingLinearElement = this.state.newElement
const result = this.state.newElement
? null
: LinearElementEditor.handlePointerMoveInEditMode(
event,
@@ -6859,18 +6868,33 @@ class App extends React.Component<AppProps, AppState> {
this,
);
if (
editingLinearElement &&
editingLinearElement !== this.state.selectedLinearElement
) {
// Since we are reading from previous state which is not possible with
// automatic batching in React 18 hence using flush sync to synchronously
// update the state. Check https://github.com/excalidraw/excalidraw/pull/5508 for more details.
flushSync(() => {
this.setState({
selectedLinearElement: editingLinearElement,
});
if (result) {
const { editingLinearElement, snapLines } = result;
const nextState = this.withStableSnapLines({
selectedLinearElement: editingLinearElement,
snapLines,
});
if (
editingLinearElement &&
this.shouldUpdateSelectedLinearElementState(
nextState.selectedLinearElement,
nextState.snapLines,
)
) {
// Since we are reading from previous state which is not possible with
// automatic batching in React 18 hence using flush sync to synchronously
// update the state. Check https://github.com/excalidraw/excalidraw/pull/5508 for more details.
flushSync(() => {
this.setState(nextState);
});
}
if (
editingLinearElement.lastUncommittedPoint == null &&
this.state.suggestedBinding
) {
this.setState({ suggestedBinding: null });
}
}
}
@@ -8095,7 +8119,7 @@ class App extends React.Component<AppProps, AppState> {
setCursor(this.interactiveCanvas, CURSOR_TYPE.GRABBING);
let { clientX: lastX, clientY: lastY } = event;
const onPointerMove = ((event: PointerEvent) => {
const onPointerMove = withBatchedUpdatesThrottled((event: PointerEvent) => {
const deltaX = lastX - event.clientX;
const deltaY = lastY - event.clientY;
lastX = event.clientX;
@@ -8161,7 +8185,7 @@ class App extends React.Component<AppProps, AppState> {
window.removeEventListener(EVENT.POINTER_MOVE, onPointerMove);
window.removeEventListener(EVENT.POINTER_UP, teardown);
window.removeEventListener(EVENT.BLUR, teardown);
// onPointerMove.flush();
onPointerMove.flush();
}),
);
window.addEventListener(EVENT.BLUR, teardown);
@@ -8271,14 +8295,14 @@ class App extends React.Component<AppProps, AppState> {
isDraggingScrollBar = true;
pointerDownState.lastCoords.x = event.clientX;
pointerDownState.lastCoords.y = event.clientY;
const onPointerMove = (event: PointerEvent) => {
const onPointerMove = withBatchedUpdatesThrottled((event: PointerEvent) => {
const target = event.target;
if (!(target instanceof HTMLElement)) {
return;
}
this.handlePointerMoveOverScrollbars(event, pointerDownState);
};
});
const onPointerUp = withBatchedUpdates(() => {
lastPointerUp = null;
isDraggingScrollBar = false;
@@ -8289,7 +8313,7 @@ class App extends React.Component<AppProps, AppState> {
this.savePointer(event.clientX, event.clientY, "up");
window.removeEventListener(EVENT.POINTER_MOVE, onPointerMove);
window.removeEventListener(EVENT.POINTER_UP, onPointerUp);
// onPointerMove.flush();
onPointerMove.flush();
});
lastPointerUp = onPointerUp;
@@ -8848,13 +8872,10 @@ class App extends React.Component<AppProps, AppState> {
opacity: this.state.currentItemOpacity,
roundness: null,
simulatePressure,
strokeShape: this.state.currentItemStrokeShape,
locked: false,
frameId: topLayerFrame ? topLayerFrame.id : null,
points: [pointFrom<LocalPoint>(0, 0)],
pressures: simulatePressure
? []
: [roundFreeDrawPressure(event.pressure)],
pressures: simulatePressure ? [] : [event.pressure],
});
this.scene.insertElement(element);
@@ -9496,7 +9517,7 @@ class App extends React.Component<AppProps, AppState> {
private onPointerMoveFromPointerDownHandler(
pointerDownState: PointerDownState,
) {
return (event: PointerEvent) => {
return withBatchedUpdatesThrottled((event: PointerEvent) => {
if (this.state.openDialog?.name === "elementLinkSelector") {
return;
}
@@ -9731,25 +9752,27 @@ class App extends React.Component<AppProps, AppState> {
pointerDownState.lastCoords.x = pointerCoords.x;
pointerDownState.lastCoords.y = pointerCoords.y;
pointerDownState.drag.hasOccurred = true;
const nextState = this.withStableSnapLines(newState);
// NOTE: Optimize setState calls because it
// affects history and performance
if (
newState.suggestedBinding !== this.state.suggestedBinding ||
nextState.suggestedBinding !== this.state.suggestedBinding ||
!isShallowEqual(
newState.selectedLinearElement?.selectedPointsIndices ?? [],
nextState.selectedLinearElement?.selectedPointsIndices ?? [],
this.state.selectedLinearElement?.selectedPointsIndices ?? [],
) ||
newState.selectedLinearElement?.hoverPointIndex !==
nextState.selectedLinearElement?.hoverPointIndex !==
this.state.selectedLinearElement?.hoverPointIndex ||
newState.selectedLinearElement?.customLineAngle !==
nextState.selectedLinearElement?.customLineAngle !==
this.state.selectedLinearElement?.customLineAngle ||
this.state.selectedLinearElement.isDragging !==
newState.selectedLinearElement?.isDragging ||
nextState.selectedLinearElement?.isDragging ||
this.state.selectedLinearElement?.initialState?.altFocusPoint !==
newState.selectedLinearElement?.initialState?.altFocusPoint
nextState.selectedLinearElement?.initialState?.altFocusPoint ||
nextState.snapLines !== this.state.snapLines
) {
this.setState(newState);
this.setState(nextState);
}
return;
@@ -10192,36 +10215,20 @@ class App extends React.Component<AppProps, AppState> {
const points = newElement.points;
const dx = pointerCoords.x - newElement.x;
const dy = pointerCoords.y - newElement.y;
const nextPoint = getRoundedFreeDrawPoint(dx, dy);
const pressure = roundFreeDrawPressure(event.pressure);
const pointAction =
newElement.strokeShape === "fixed"
? getFixedFreeDrawPointAction({
points,
nextPoint,
strokeWidth: newElement.strokeWidth,
zoomValue: this.state.zoom.value,
})
: points.length > 0 &&
points[points.length - 1][0] === nextPoint[0] &&
points[points.length - 1][1] === nextPoint[1]
? "discard"
: "append";
if (pointAction !== "discard") {
const lastPoint = points.length > 0 && points[points.length - 1];
const discardPoint =
lastPoint && lastPoint[0] === dx && lastPoint[1] === dy;
if (!discardPoint) {
const pressures = newElement.simulatePressure
? newElement.pressures
: pointAction === "replace"
? [...newElement.pressures.slice(0, -1), pressure]
: [...newElement.pressures, pressure];
: [...newElement.pressures, event.pressure];
this.scene.mutateElement(
newElement,
{
points:
pointAction === "replace"
? [...points.slice(0, -1), nextPoint]
: [...points, nextPoint],
points: [...points, pointFrom<LocalPoint>(dx, dy)],
pressures,
},
{
@@ -10379,7 +10386,7 @@ class App extends React.Component<AppProps, AppState> {
});
}
}
};
});
}
// Returns whether the pointer move happened over either scrollbar
@@ -10424,7 +10431,7 @@ class App extends React.Component<AppProps, AppState> {
this.removePointer(childEvent);
pointerDownState.drag.blockDragging = false;
if (pointerDownState.eventListeners.onMove) {
// pointerDownState.eventListeners.onMove.flush();
pointerDownState.eventListeners.onMove.flush();
}
const {
newElement,
@@ -10454,8 +10461,7 @@ class App extends React.Component<AppProps, AppState> {
this.lassoTrail.endPath();
this.previousPointerMoveCoords = null;
SnapCache.setReferenceSnapPoints(null);
SnapCache.setVisibleGaps(null);
SnapCache.destroy();
this.savePointer(childEvent.clientX, childEvent.clientY, "up");
@@ -10661,48 +10667,23 @@ class App extends React.Component<AppProps, AppState> {
);
const points = newElement.points;
const dx = pointerCoords.x - newElement.x;
const dy = pointerCoords.y - newElement.y;
let nextPoint = getRoundedFreeDrawPoint(dx, dy);
let dx = pointerCoords.x - newElement.x;
let dy = pointerCoords.y - newElement.y;
// Allows dots to avoid being flagged as infinitely small
if (nextPoint[0] === points[0][0] && nextPoint[1] === points[0][1]) {
nextPoint = getRoundedFreeDrawPoint(
dx + FREEDRAW_DOT_EPSILON,
dy + FREEDRAW_DOT_EPSILON,
);
if (dx === points[0][0] && dy === points[0][1]) {
dy += 0.0001;
dx += 0.0001;
}
const lastPoint = points[points.length - 1];
const pressure = roundFreeDrawPressure(childEvent.pressure);
const pointAction =
newElement.strokeShape === "fixed"
? getFixedFreeDrawPointAction({
points,
nextPoint,
strokeWidth: newElement.strokeWidth,
zoomValue: this.state.zoom.value,
isFinalPoint: true,
})
: !lastPoint ||
lastPoint[0] !== nextPoint[0] ||
lastPoint[1] !== nextPoint[1]
? "append"
: "discard";
const pressures = newElement.simulatePressure
? []
: [...newElement.pressures, childEvent.pressure];
if (pointAction !== "discard") {
this.scene.mutateElement(newElement, {
points:
pointAction === "replace"
? [...points.slice(0, -1), nextPoint]
: [...points, nextPoint],
pressures: newElement.simulatePressure
? []
: pointAction === "replace"
? [...newElement.pressures.slice(0, -1), pressure]
: [...newElement.pressures, pressure],
});
}
this.scene.mutateElement(newElement, {
points: [...points, pointFrom<LocalPoint>(dx, dy)],
pressures,
});
this.actionManager.executeAction(actionFinalize);
@@ -3,6 +3,7 @@ import { CANVAS_SEARCH_TAB, DEFAULT_SIDEBAR } from "@excalidraw/common";
import {
isFlowchartNodeElement,
isImageElement,
isGridModeEnabled,
isLinearElement,
isLineElement,
isTextBindableContainer,
@@ -16,7 +17,6 @@ import type { EditorInterface } from "@excalidraw/common";
import { t } from "../i18n";
import { getShortcutKey } from "../shortcut";
import { isEraserActive } from "../appState";
import { isGridModeEnabled } from "../snapping";
import "./HintViewer.scss";
@@ -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";
+2 -44
View File
@@ -1164,22 +1164,11 @@ export const StrokeWidthBaseIcon = createIcon(
modifiedTablerIconProps,
);
export const StrokeWidthMediumIcon = createIcon(
<path
d="M5 10h10"
stroke="currentColor"
strokeWidth="2.5"
strokeLinecap="round"
strokeLinejoin="round"
/>,
modifiedTablerIconProps,
);
export const StrokeWidthBoldIcon = createIcon(
<path
d="M5 10h10"
stroke="currentColor"
strokeWidth="3.75"
strokeWidth="2.5"
strokeLinecap="round"
strokeLinejoin="round"
/>,
@@ -1190,38 +1179,7 @@ export const StrokeWidthExtraBoldIcon = createIcon(
<path
d="M5 10h10"
stroke="currentColor"
strokeWidth="5"
strokeLinecap="round"
strokeLinejoin="round"
/>,
modifiedTablerIconProps,
);
export const StrokeShapeVariableIcon = createIcon(
<>
<path
d="M3.5 12.5c1.8-3.5 4.1-5.2 6.8-5.2 2.4 0 4.4 1.3 6.2 3.9"
stroke="currentColor"
strokeWidth="1.25"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M7.75 10.8c1-.9 2-1.35 3.05-1.35 1.2 0 2.4.57 3.7 1.72"
stroke="currentColor"
strokeWidth="2.5"
strokeLinecap="round"
strokeLinejoin="round"
/>
</>,
modifiedTablerIconProps,
);
export const StrokeShapeFixedIcon = createIcon(
<path
d="M3.5 12h13"
stroke="currentColor"
strokeWidth="2.5"
strokeWidth="3.75"
strokeLinecap="round"
strokeLinejoin="round"
/>,
+40 -24
View File
@@ -96,12 +96,7 @@ type RestoredAppState = Omit<
"offsetTop" | "offsetLeft" | "width" | "height"
>;
const normalizeFreeDrawStrokeShape = (
strokeShape: unknown,
): AppState["currentItemStrokeShape"] =>
strokeShape === "fixed" || strokeShape === "stable"
? "fixed"
: undefined;
const MAX_ARROW_PX = 75_000;
export const AllowedExcalidrawActiveTools: Record<
AppState["activeTool"]["type"],
@@ -419,12 +414,10 @@ export const restoreElement = (
return element;
case "freedraw": {
const strokeShape = normalizeFreeDrawStrokeShape(element.strokeShape);
return restoreElementWithProperties(element, {
points: element.points,
simulatePressure: element.simulatePressure,
pressures: element.pressures,
...(strokeShape ? { strokeShape } : {}),
});
}
case "image":
@@ -476,8 +469,8 @@ export const restoreElement = (
element.endArrowhead === undefined
? "arrow"
: normalizeArrowhead(element.endArrowhead);
const x: number | undefined = element.x;
const y: number | undefined = element.y;
const x = element.x as number | undefined;
const y = element.y as number | undefined;
const points: readonly LocalPoint[] | undefined = // migrate old arrow model to new one
!Array.isArray(element.points) || element.points.length < 2
? [pointFrom(0, 0), pointFrom(element.width, element.height)]
@@ -502,8 +495,8 @@ export const restoreElement = (
startArrowhead,
endArrowhead,
points,
x,
y,
x: x ?? 0,
y: y ?? 0,
elbowed: (element as ExcalidrawArrowElement).elbowed,
...getSizeFromPoints(points),
};
@@ -522,12 +515,44 @@ export const restoreElement = (
})
: restoreElementWithProperties(element as ExcalidrawArrowElement, base);
return {
const normalizedRestoredElement = {
...restoredElement,
...LinearElementEditor.getNormalizeElementPointsAndCoords(
restoredElement,
),
};
// Last resort fix for extremely large arrows
if (
normalizedRestoredElement.width > MAX_ARROW_PX ||
normalizedRestoredElement.height > MAX_ARROW_PX
) {
console.error(
`Removing extremely large arrow ${
normalizedRestoredElement.id
} (type: ${
isElbowArrow(normalizedRestoredElement) ? "elbow" : "simple"
}, width: ${normalizedRestoredElement.width}, height: ${
normalizedRestoredElement.height
}, x: ${normalizedRestoredElement.x}, y: ${
normalizedRestoredElement.y
})`,
);
return {
...normalizedRestoredElement,
x: 0,
y: 0,
width: 100,
height: 100,
points: [
pointFrom<LocalPoint>(0, 0),
pointFrom<LocalPoint>(100, 100),
],
isDeleted: true,
};
}
return normalizedRestoredElement;
}
// generic elements
@@ -675,6 +700,7 @@ export const restoreElements = <T extends ExcalidrawElement>(
const existingElementsMap = existingElements
? arrayToMap(existingElements)
: null;
const restoredElements = syncInvalidIndices(
(targetElements || []).reduce((elements, element) => {
// filtering out selection, which is legacy, no longer kept in elements,
@@ -771,7 +797,7 @@ export const restoreElements = <T extends ExcalidrawElement>(
}
}
// NOTE (mtolmacs): Temporary fix for extremely large arrows
// NOTE (mtolmacs): Temporary fix for invalid/self-bound elbow arrows
// Need to iterate again so we have attached text nodes in elementsMap
return restoredElements.map((element) => {
if (
@@ -953,16 +979,6 @@ export const restoreAppState = (
return {
...nextAppState,
...(normalizeFreeDrawStrokeShape(
appState.currentItemStrokeShape ?? localAppState?.currentItemStrokeShape,
)
? {
currentItemStrokeShape: normalizeFreeDrawStrokeShape(
appState.currentItemStrokeShape ??
localAppState?.currentItemStrokeShape,
),
}
: {}),
cursorButton: localAppState?.cursorButton || "up",
// reset on fresh restore so as to hide the UI button if penMode not active
penDetected:
-3
View File
@@ -30,9 +30,6 @@
"changeBackground": "Change background color",
"fill": "Fill",
"strokeWidth": "Stroke width",
"strokeShape": "Stroke type",
"strokeShape_variable": "Variable",
"strokeShape_fixed": "Fixed",
"strokeStyle": "Stroke style",
"strokeStyle_solid": "Solid",
"strokeStyle_dashed": "Dashed",
+4 -4
View File
@@ -11,10 +11,10 @@ export const withBatchedUpdates = <
TFunction extends ((event: any) => void) | (() => void),
>(
func: Parameters<TFunction>["length"] extends 0 | 1 ? TFunction : never,
) => func;
// ((event) => {
// unstable_batchedUpdates(func as TFunction, event);
// }) as TFunction;
) =>
((event) => {
unstable_batchedUpdates(func as TFunction, event);
}) as TFunction;
/**
* barches React state updates and throttles the calls to a single call per
+2 -1
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";
+6 -14
View File
@@ -376,11 +376,6 @@ const renderElementToSvg = (
}
case "freedraw": {
const wrapper = svgRoot.ownerDocument.createElementNS(SVG_NS, "g");
const isFixedStroke = element.strokeShape === "fixed";
const strokeColor =
renderConfig.theme === THEME.DARK
? applyDarkModeFilter(element.strokeColor)
: element.strokeColor;
const shapes = ShapeCache.generateElementShape(element, renderConfig);
// always ordered as [background, stroke]
@@ -389,15 +384,12 @@ const renderElementToSvg = (
// stroke (SVGPathString)
const path = svgRoot.ownerDocument.createElementNS(SVG_NS, "path");
if (isFixedStroke) {
path.setAttribute("fill", "none");
path.setAttribute("stroke", strokeColor);
path.setAttribute("stroke-width", `${element.strokeWidth}`);
path.setAttribute("stroke-linecap", "round");
path.setAttribute("stroke-linejoin", "round");
} else {
path.setAttribute("fill", strokeColor);
}
path.setAttribute(
"fill",
renderConfig.theme === THEME.DARK
? applyDarkModeFilter(element.strokeColor)
: element.strokeColor,
);
path.setAttribute("d", shape);
wrapper.appendChild(path);
} else {
@@ -8665,7 +8665,14 @@ exports[`regression tests > key 5 selects arrow tool > [end of test] appState 1`
"openMenu": null,
"openPopup": null,
"openSidebar": null,
"originSnapOffset": null,
"originSnapOffset": {
"x": 0,
"y": 0,
},
"pasteDialog": {
"data": null,
"shown": false,
},
"penDetected": false,
"penMode": false,
"preferredSelectionTool": {
@@ -9322,7 +9329,14 @@ exports[`regression tests > key a selects arrow tool > [end of test] appState 1`
"openMenu": null,
"openPopup": null,
"openSidebar": null,
"originSnapOffset": null,
"originSnapOffset": {
"x": 0,
"y": 0,
},
"pasteDialog": {
"data": null,
"shown": false,
},
"penDetected": false,
"penMode": false,
"preferredSelectionTool": {
@@ -160,40 +160,6 @@ describe("restoreElements", () => {
});
});
it("should restore fixed freedraw element correctly", () => {
const freedrawElement = API.createElement({
type: "freedraw",
id: "id-freedraw02",
strokeShape: "fixed",
points: [pointFrom(0, 0), pointFrom(10, 10)],
});
const restoredFreedraw = restore.restoreElements(
[freedrawElement],
null,
)[0] as ExcalidrawFreeDrawElement;
expect(restoredFreedraw.strokeShape).toBe("fixed");
});
it("should restore legacy stable freedraw element as fixed", () => {
const restoredFreedraw = restore.restoreElements(
[
{
...API.createElement({
type: "freedraw",
id: "id-freedraw03",
points: [pointFrom(0, 0), pointFrom(10, 10)],
}),
strokeShape: "stable",
} as any,
],
null,
)[0] as ExcalidrawFreeDrawElement;
expect(restoredFreedraw.strokeShape).toBe("fixed");
});
it("should restore line and draw elements correctly", () => {
const lineElement = API.createElement({ type: "line", id: "id-line01" });
@@ -675,26 +641,6 @@ describe("restoreAppState", () => {
expect(restoredAppState.name).toBe(stubImportedAppState.name);
});
it("should restore fixed freedraw stroke type from app state", () => {
const restoredAppState = restore.restoreAppState(
{ currentItemStrokeShape: "fixed" } as ImportedDataState["appState"],
null,
);
expect(restoredAppState.currentItemStrokeShape).toBe("fixed");
});
it("should restore legacy stable freedraw stroke type from app state as fixed", () => {
const restoredAppState = restore.restoreAppState(
{
currentItemStrokeShape: "stable",
} as unknown as ImportedDataState["appState"],
null,
);
expect(restoredAppState.currentItemStrokeShape).toBe("fixed");
});
it("should return local app state when imported data state is null", () => {
const stubLocalAppState = getDefaultAppState();
stubLocalAppState.cursorButton = "down";
@@ -1,78 +0,0 @@
import React from "react";
import { Excalidraw } from "../index";
import { API } from "./helpers/api";
import { Pointer, UI } from "./helpers/ui";
import { render } from "./test-utils";
describe("freedraw", () => {
beforeEach(async () => {
await render(<Excalidraw />);
});
it("rounds stored points and drops duplicates after rounding", () => {
const mouse = new Pointer("mouse");
UI.clickTool("freedraw");
mouse.downAt(10, 20);
mouse.moveTo(10.1234, 20.5678);
mouse.moveTo(10.1249, 20.5681);
mouse.upAt(20.9999, 30.0001);
const freedraw = window.h.elements.at(-1);
expect(freedraw).toEqual(expect.objectContaining({ type: "freedraw" }));
expect((freedraw as any).points).toEqual([
[0, 0],
[0.12, 0.57],
[11, 10],
]);
});
it("does not snap fixed strokes closed when ending near the start point", () => {
const mouse = new Pointer("mouse");
API.setAppState({ currentItemStrokeShape: "fixed" });
UI.clickTool("freedraw");
mouse.downAt(10, 10);
mouse.moveTo(40, 10);
mouse.moveTo(30, 30);
mouse.upAt(12, 12);
const freedraw = window.h.elements.at(-1) as any;
expect(freedraw.points[0]).toEqual([0, 0]);
expect(freedraw.points.at(-1)).not.toEqual([0, 0]);
});
it("coalesces nearly straight fixed freedraw points at the tip", () => {
const mouse = new Pointer("mouse");
API.setAppState({ currentItemStrokeShape: "fixed" });
UI.clickTool("freedraw");
mouse.downAt(10, 10);
[
[10.2, 10.01],
[10.4, 10.03],
[10.6, 10.02],
[10.8, 10.04],
[11, 10.03],
[11.2, 10.05],
[11.4, 10.04],
[11.6, 10.06],
[11.8, 10.05],
].forEach(([x, y]) => {
mouse.moveTo(x, y);
});
mouse.upAt(12, 10.05);
const freedraw = window.h.elements.at(-1) as any;
expect(freedraw.points.length).toBeLessThan(5);
expect(freedraw.points).toEqual([
[0, 0],
[2, 0.05],
]);
});
});
-4
View File
@@ -201,9 +201,6 @@ export class API {
? ExcalidrawTextElement["containerId"]
: never;
points?: T extends "arrow" | "line" | "freedraw" ? readonly LocalPoint[] : never;
strokeShape?: T extends "freedraw"
? ExcalidrawFreeDrawElement["strokeShape"]
: never;
locked?: boolean;
fileId?: T extends "image" ? string : never;
scale?: T extends "image" ? ExcalidrawImageElement["scale"] : never;
@@ -321,7 +318,6 @@ export class API {
type: type as "freedraw",
simulatePressure: true,
points: rest.points,
strokeShape: rest.strokeShape ?? appState.currentItemStrokeShape,
...base,
});
break;
+1 -4
View File
@@ -28,7 +28,6 @@ import type { GlobalPoint, LocalPoint, Radians } from "@excalidraw/math";
import type { TransformHandleType } from "@excalidraw/element";
import type {
ExcalidrawElement,
ExcalidrawFreeDrawElement,
ExcalidrawLinearElement,
ExcalidrawTextElement,
ExcalidrawArrowElement,
@@ -433,10 +432,8 @@ type DrawingToolName = Exclude<
"lock" | "selection" | "eraser" | "lasso"
>;
type Element<T extends DrawingToolName> = T extends "line"
type Element<T extends DrawingToolName> = T extends "line" | "freedraw"
? ExcalidrawLinearElement
: T extends "freedraw"
? ExcalidrawFreeDrawElement
: T extends "arrow"
? ExcalidrawArrowElement
: T extends "text"
+3 -4
View File
@@ -10,6 +10,8 @@ import type { LinearElementEditor } from "@excalidraw/element";
import type { MaybeTransformHandleType } from "@excalidraw/element";
import type { SnapLine } from "@excalidraw/element";
import type {
PointerType,
ExcalidrawLinearElement,
@@ -33,7 +35,6 @@ import type {
ExcalidrawNonSelectionElement,
BindMode,
ExcalidrawTextElement,
FreeDrawStrokeShape,
} from "@excalidraw/element/types";
import type {
@@ -56,7 +57,6 @@ import type { ClipboardData } from "./clipboard";
import type App from "./components/App";
import type Library from "./data/library";
import type { ContextMenuItems } from "./components/ContextMenu";
import type { SnapLine } from "./snapping";
import type { ImportedDataState } from "./data/types";
import type { Language } from "./i18n";
@@ -359,7 +359,6 @@ export interface AppState {
currentItemFillStyle: ExcalidrawElement["fillStyle"];
currentItemStrokeWidth: number;
currentItemStrokeStyle: ExcalidrawElement["strokeStyle"];
currentItemStrokeShape?: FreeDrawStrokeShape;
currentItemRoughness: number;
currentItemOpacity: number;
currentItemFontFamily: FontFamilyValues;
@@ -890,7 +889,7 @@ export type PointerDownState = Readonly<{
// We need to have these in the state so that we can unsubscribe them
eventListeners: {
// It's defined on the initial pointer down event
onMove: null | ((event: PointerEvent) => void);
onMove: null | ReturnType<typeof throttleRAF>;
// It's defined on the initial pointer down event
onUp: null | ((event: PointerEvent) => void);
// It's defined on the initial pointer down event
-2
View File
@@ -1,5 +1,3 @@
export const PRECISION = 10e-5;
// Legendre-Gauss abscissae (x values) and weights for n=24
// Refeerence: https://pomax.github.io/bezierinfo/legendre-gauss.html
export const LegendreGaussN24TValues = [