corkine/excalidraw
1
0
Fork 0
mirror of https://github.com/excalidraw/excalidraw synced 2025-07-25 13:58:22 +08:00
Code Issues Packages Projects Releases Wiki Activity

differentiate between constant/variable stroke type

Browse Source
This commit is contained in:
dwelle
2025-06-27 14:18:48 +02:00
parent 3c07ff358a
commit 0199c82e98
3 changed files with 64 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
excalidraw-app/components/FreedrawDebugSliders.tsx
View File

@ -3,10 +3,10 @@ import { useState, useEffect } from "react";
export const FreedrawDebugSliders = () => {
const [streamline, setStreamline] = useState<number>(
DRAWING_CONFIGS.default.streamline,
DRAWING_CONFIGS.default.variable.streamline,
);
const [simplify, setSimplify] = useState<number>(
DRAWING_CONFIGS.default.simplify,
DRAWING_CONFIGS.default.variable.simplify,
);
useEffect(() => {
@ -14,7 +14,7 @@ export const FreedrawDebugSliders = () => {
window.h = {} as any;
}
if (!window.h.debugFreedraw) {
window.h.debugFreedraw = DRAWING_CONFIGS.default;
window.h.debugFreedraw = DRAWING_CONFIGS.default.variable;
}
setStreamline(window.h.debugFreedraw.streamline);
@ -39,7 +39,7 @@ export const FreedrawDebugSliders = () => {
<div
style={{
position: "absolute",
bottom: "10px",
bottom: "70px",
left: "50%",
transform: "translateX(-50%)",
zIndex: 9999,

70
packages/element/src/freedraw.ts
View File

@ -8,34 +8,70 @@ import type { StrokeOptions } from "perfect-freehand";
import type { ExcalidrawFreeDrawElement, PointerType } from "./types";
type FreedrawStrokeType = "constant" | "variable";
export const getElementStrokeType = (
element: ExcalidrawFreeDrawElement,
): FreedrawStrokeType => {
return element.drawingConfigs?.fixedStrokeWidth ? "constant" : "variable";
};
export const DRAWING_CONFIGS: Record<
PointerType | "default",
{ streamline: number; simplify: number }
Record<FreedrawStrokeType, { streamline: number; simplify: number }>
> = {
default: {
streamline: 0.35,
simplify: 0.1,
constant: {
streamline: 0.35,
simplify: 0.1,
},
variable: {
streamline: 0.35,
simplify: 0.1,
},
},
mouse: {
streamline: 0.6,
simplify: 0.1,
constant: {
streamline: 0.6,
simplify: 0.1,
},
variable: {
streamline: 0.6,
simplify: 0.1,
},
},
pen: {
// for optimal performance, we use a lower streamline and simplify
streamline: 0.2,
simplify: 0.1,
constant: {
// for optimal performance, we use a lower streamline and simplify
streamline: 0.2,
simplify: 0.1,
},
variable: {
// for optimal performance, we use a lower streamline and simplify
streamline: 0.2,
simplify: 0.1,
},
},
touch: {
streamline: 0.65,
simplify: 0.1,
constant: {
streamline: 0.65,
simplify: 0.1,
},
variable: {
streamline: 0.65,
simplify: 0.1,
},
},
} as const;
export const getFreedrawConfig = (eventType: string | null | undefined) => {
return (
export const getFreedrawConfig = (
eventType: string | null | undefined,
strokeType: FreedrawStrokeType,
): { streamline: number; simplify: number } => {
const inputConfig =
DRAWING_CONFIGS[(eventType as PointerType | null) || "default"] ||
DRAWING_CONFIGS.default
);
DRAWING_CONFIGS.default;
return inputConfig[strokeType];
};
/**
@ -105,9 +141,11 @@ export const getFreedrawStroke = (element: ExcalidrawFreeDrawElement) => {
}
const streamline =
element.drawingConfigs?.streamline ?? DRAWING_CONFIGS.default.streamline;
element.drawingConfigs?.streamline ??
getFreedrawConfig("default", getElementStrokeType(element)).streamline;
const simplify =
element.drawingConfigs?.simplify ?? DRAWING_CONFIGS.default.simplify;
element.drawingConfigs?.simplify ??
getFreedrawConfig("default", getElementStrokeType(element)).simplify;
const laser = new LaserPointer({
size: element.strokeWidth,

8
packages/excalidraw/components/App.tsx
View File

@ -7476,7 +7476,10 @@ class App extends React.Component<AppProps, AppState> {
const simulatePressure = event.pressure === 0.5 || event.pressure === 0;
const freedrawConfig = getFreedrawConfig(event.pointerType);
const freedrawConfig = getFreedrawConfig(
event.pointerType,
this.state.currentItemFixedStrokeWidth ? "constant" : "variable",
);
const element = newFreeDrawElement({
type: elementType,
@ -11159,7 +11162,8 @@ export const createTestHook = () => {
window.h = window.h || ({} as Window["h"]);
// Initialize debug freedraw parameters
window.h.debugFreedraw = window.h.debugFreedraw || DRAWING_CONFIGS.default;
window.h.debugFreedraw =
window.h.debugFreedraw || DRAWING_CONFIGS.default.variable;
Object.defineProperties(window.h, {
elements: {