Compare commits
28 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
| e98e2cccb8 | |||
| 8424d78254 | |||
| 8763bebb59 | |||
| 483a225eac | |||
| 79e802d9ed | |||
| 309849925d | |||
| 971237c0df | |||
| 79beed3f5c | |||
| 702e029755 | |||
| 0bbaf34187 | |||
| 18febfeaf2 | |||
| 53557919dd | |||
| 2e1a529c67 | |||
| b1c6bfcf40 | |||
| 1caec99b29 | |||
| e18c1dd213 | |||
| 60a459b135 | |||
| 7332e76d56 | |||
| dceaa53b0c | |||
| 6e968324fb | |||
| 09b18cacec | |||
| 0e197ef5c4 | |||
| a0f7edadec | |||
| 58c9bb4712 | |||
| d1c6304d42 | |||
| c1a54455bb | |||
| 07640dd756 | |||
| 5403fa8a0d |
@@ -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
@@ -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
|
||||
|
||||
|
||||
@@ -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">
|
||||
|
||||
@@ -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",
|
||||
|
||||
@@ -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";
|
||||
|
||||
|
||||
@@ -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]),
|
||||
|
||||
@@ -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];
|
||||
};
|
||||
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -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(
|
||||
|
||||
@@ -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);
|
||||
@@ -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";
|
||||
|
||||
@@ -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,
|
||||
|
||||
@@ -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`.
|
||||
*
|
||||
|
||||
@@ -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 } : {}),
|
||||
};
|
||||
};
|
||||
|
||||
|
||||
@@ -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);
|
||||
}
|
||||
|
||||
@@ -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],
|
||||
};
|
||||
};
|
||||
@@ -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" };
|
||||
|
||||
@@ -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");
|
||||
|
||||
|
||||
@@ -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,
|
||||
|
||||
@@ -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),
|
||||
|
||||
@@ -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";
|
||||
|
||||
@@ -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"
|
||||
/>,
|
||||
|
||||
@@ -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:
|
||||
|
||||
@@ -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",
|
||||
|
||||
@@ -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,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";
|
||||
|
||||
@@ -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],
|
||||
]);
|
||||
});
|
||||
});
|
||||
@@ -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;
|
||||
|
||||
@@ -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"
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -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 = [
|
||||
|
||||
Reference in New Issue
Block a user