gilles/excalidraw
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

wip

Browse Source
This commit is contained in:
dwelle
2026-04-03 16:34:26 +02:00
parent d9e8a33aa4
commit 3e53dcd956
28 changed files with 986 additions and 56 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/element/src/bounds.ts
+11 -8
View File
@@ -168,12 +168,14 @@ export class ElementBounds {
),
),
);
const padding =
element.strokeShape === "fixed" ? element.strokeWidth / 2 : 0;
return [
minX + element.x,
minY + element.y,
maxX + element.x,
maxY + element.y,
minX + element.x - padding,
minY + element.y - padding,
maxX + element.x + padding,
maxY + element.y + padding,
];
} else if (isLinearElement(element)) {
bounds = getLinearElementRotatedBounds(element, cx, cy, elementsMap);
@@ -703,10 +705,11 @@ const getFreeDrawElementAbsoluteCoords = (
element: ExcalidrawFreeDrawElement,
): [number, number, number, number, number, number] => {
const [minX, minY, maxX, maxY] = getBoundsFromPoints(element.points);
const x1 = minX + element.x;
const y1 = minY + element.y;
const x2 = maxX + element.x;
const y2 = maxY + element.y;
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;
return [x1, y1, x2, y2, (x1 + x2) / 2, (y1 + y2) / 2];
};
packages/element/src/collision.ts
+4 -3
View File
@@ -27,6 +27,7 @@ import type {
import type { FrameNameBounds } from "@excalidraw/excalidraw/types";
import { isLoopFreeDrawElement } from "./freedraw";
import { isPathALoop } from "./utils";
import {
doBoundsIntersect,
@@ -93,7 +94,7 @@ export const shouldTestInside = (element: ExcalidrawElement) => {
}
if (element.type === "freedraw") {
return isDraggableFromInside && isPathALoop(element.points);
return isDraggableFromInside && isLoopFreeDrawElement(element);
}
return isDraggableFromInside || isImageElement(element);
@@ -754,8 +755,8 @@ export const isPointInElement = (
elementsMap: ElementsMap,
) => {
if (
(isLinearElement(element) || isFreeDrawElement(element)) &&
!isPathALoop(element.points)
(isLinearElement(element) && !isPathALoop(element.points)) ||
(isFreeDrawElement(element) && !isLoopFreeDrawElement(element))
) {
// There isn't any "inside" for a non-looping path
return false;
packages/element/src/freedraw.ts
+181
View File
@@ -0,0 +1,181 @@
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);
packages/element/src/index.ts
+1
View File
@@ -69,6 +69,7 @@ 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";
packages/element/src/mutateElement.ts
+27
View File
@@ -1,4 +1,5 @@
import {
DEFAULT_FREE_DRAW_STROKE_SHAPE,
getSizeFromPoints,
randomInteger,
getUpdatedTimestamp,
@@ -18,6 +19,8 @@ import type {
ElementsMap,
ExcalidrawElbowArrowElement,
ExcalidrawElement,
ExcalidrawFreeDrawElement,
FreeDrawStrokeShape,
NonDeletedSceneElementsMap,
} from "./types";
@@ -177,6 +180,30 @@ 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`.
*
packages/element/src/newElement.ts
+2
View File
@@ -445,6 +445,7 @@ export const newFreeDrawElement = (
points?: ExcalidrawFreeDrawElement["points"];
simulatePressure: boolean;
pressures?: ExcalidrawFreeDrawElement["pressures"];
strokeShape?: ExcalidrawFreeDrawElement["strokeShape"];
} & ElementConstructorOpts,
): NonDeleted<ExcalidrawFreeDrawElement> => {
return {
@@ -452,6 +453,7 @@ export const newFreeDrawElement = (
points: opts.points || [],
pressures: opts.pressures || [],
simulatePressure: opts.simulatePressure,
...(opts.strokeShape === "fixed" ? { strokeShape: opts.strokeShape } : {}),
};
};
packages/element/src/renderElement.ts
+13 -2
View File
@@ -417,16 +417,27 @@ 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") {
context.fillStyle =
const strokeColor =
renderConfig.theme === THEME.DARK
? applyDarkModeFilter(element.strokeColor)
: element.strokeColor;
context.fill(new Path2D(shape));
if (isFixedStroke) {
context.strokeStyle = strokeColor;
context.lineWidth = element.strokeWidth;
context.stroke(new Path2D(shape));
} else {
context.fillStyle = strokeColor;
context.fill(new Path2D(shape));
}
} else {
rc.draw(shape);
}
packages/element/src/shape.ts
+119 -9
View File
@@ -1,4 +1,5 @@
import { simplify } from "points-on-curve";
import { DEFAULT_FREE_DRAW_STROKE_SHAPE } from "@excalidraw/common";
import { getStroke } from "perfect-freehand";
import {
@@ -13,6 +14,7 @@ import {
import {
pointFrom,
pointDistance,
round,
type LocalPoint,
pointRotateRads,
} from "@excalidraw/math";
@@ -52,6 +54,10 @@ import {
isIframeLikeElement,
isLinearElement,
} from "./typeChecks";
import {
getRenderableFixedFreeDrawPoints,
isLoopFreeDrawElement,
} from "./freedraw";
import { getCornerRadius, isPathALoop } from "./utils";
import { headingForPointIsHorizontal } from "./heading";
@@ -244,7 +250,12 @@ export const generateRoughOptions = (
}
case "line":
case "freedraw": {
if (isPathALoop(element.points)) {
const isLoop =
element.type === "freedraw"
? isLoopFreeDrawElement(element)
: isPathALoop(element.points);
if (isLoop) {
options.fillStyle = element.fillStyle;
options.fill =
element.backgroundColor === "transparent"
@@ -966,7 +977,7 @@ const _generateElementShape = (
const shapes: ElementShapes[typeof element.type] = [];
// (1) background fill (rc shape), optional
if (isPathALoop(element.points)) {
if (isLoopFreeDrawElement(element)) {
// generate rough polygon to fill freedraw shape
const simplifiedPoints = simplify(
element.points as Mutable<LocalPoint[]>,
@@ -1173,6 +1184,12 @@ export const toggleLinePolygonState = (
// NOTE not cached (-> for SVG export)
const getFreeDrawSvgPath = (element: ExcalidrawFreeDrawElement) => {
if (element.strokeShape === "fixed") {
return getSvgPathFromFixedFreeDrawPoints(
getRenderableFixedFreeDrawPoints(element),
) as SVGPathString;
}
return getSvgPathFromStroke(
getFreedrawOutlinePoints(element),
) as SVGPathString;
@@ -1181,34 +1198,127 @@ 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 = element.simulatePressure
const inputPoints = isFixedStroke
? element.points.length
? element.points
: [[0, 0]]
: 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: element.simulatePressure,
size: element.strokeWidth * 4.25,
thinning: 0.6,
simulatePressure: isFixedStroke ? false : element.simulatePressure,
size: isFixedStroke ? element.strokeWidth : element.strokeWidth * 4.25,
thinning: isFixedStroke ? 0 : 0.6,
smoothing: 0.5,
streamline: 0.5,
easing: (t) => Math.sin((t * Math.PI) / 2), // https://easings.net/#easeOutSine
easing: isFixedStroke ? (t) => t : (t) => Math.sin((t * Math.PI) / 2), // https://easings.net/#easeOutSine
last: true,
}) as [number, number][];
};
const med = (A: number[], B: number[]) => {
const med = (A: readonly number[], B: readonly 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)} `;
// 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 getSvgPathFromStroke = (points: number[][]): string => {
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 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 getSvgPathFromFixedFreeDrawPoints = (
points: ReadonlyArray<readonly 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])}`;
for (let index = 1; index < len - 1; index++) {
const previousPoint = points[index - 1];
const currentPoint = points[index];
const nextPoint = points[index + 1];
path += shouldSmoothFixedFreeDrawPoint(
previousPoint,
currentPoint,
nextPoint,
)
? `Q${roundPoint(currentPoint)}${averagePoint(currentPoint, nextPoint)}`
: `L${roundPoint(currentPoint)}`;
}
return `${path}L${roundPoint(points[len - 1])}`;
};
const getSvgPathFromStroke = (
points: ReadonlyArray<readonly number[]>,
): string => {
if (!points.length) {
return "";
}
packages/element/src/types.ts
+2
View File
@@ -26,6 +26,7 @@ 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;
@@ -390,6 +391,7 @@ export type ExcalidrawFreeDrawElement = _ExcalidrawElementBase &
points: readonly LocalPoint[];
pressures: readonly number[];
simulatePressure: boolean;
strokeShape?: FreeDrawStrokeShape;
}>;
export type FileId = string & { _brand: "FileId" };