diff --git a/excalidraw-app/App.tsx b/excalidraw-app/App.tsx index 932743ddfd..40c14ca3e3 100644 --- a/excalidraw-app/App.tsx +++ b/excalidraw-app/App.tsx @@ -134,6 +134,7 @@ import DebugCanvas, { } from "./components/DebugCanvas"; import { AIComponents } from "./components/AI"; import { ExcalidrawPlusIframeExport } from "./ExcalidrawPlusIframeExport"; +import { FreedrawDebugSliders } from "./components/FreedrawDebugSliders"; import "./index.scss"; @@ -1142,6 +1143,7 @@ const ExcalidrawWrapper = () => { ref={debugCanvasRef} /> )} + ); diff --git a/excalidraw-app/components/FreedrawDebugSliders.tsx b/excalidraw-app/components/FreedrawDebugSliders.tsx new file mode 100644 index 0000000000..607e066c3c --- /dev/null +++ b/excalidraw-app/components/FreedrawDebugSliders.tsx @@ -0,0 +1,84 @@ +import { useState, useEffect } from "react"; + +export const FreedrawDebugSliders = () => { + const [streamline, setStreamline] = useState(0.62); + const [simplify, setSimplify] = useState(0.3); + + useEffect(() => { + if (!window.h) { + window.h = {} as any; + } + if (!window.h.debugFreedraw) { + window.h.debugFreedraw = { streamline: 0.62, simplify: 0.3 }; + } + + setStreamline(window.h.debugFreedraw.streamline); + setSimplify(window.h.debugFreedraw.simplify); + }, []); + + const handleStreamlineChange = (value: number) => { + setStreamline(value); + if (window.h && window.h.debugFreedraw) { + window.h.debugFreedraw.streamline = value; + } + }; + + const handleSimplifyChange = (value: number) => { + setSimplify(value); + if (window.h && window.h.debugFreedraw) { + window.h.debugFreedraw.simplify = value; + } + }; + + return ( +
+
+ +
+
+ +
+
+ ); +}; diff --git a/packages/element/src/freedraw.ts b/packages/element/src/freedraw.ts index 3a7e6964df..9fa9d9d2e6 100644 --- a/packages/element/src/freedraw.ts +++ b/packages/element/src/freedraw.ts @@ -50,7 +50,10 @@ const calculateVelocityBasedPressure = ( return Math.max(0.1, Math.min(1.0, pressure)); }; -export const getFreedrawStroke = (element: ExcalidrawFreeDrawElement) => { +export const getFreedrawStroke = ( + element: ExcalidrawFreeDrawElement, + debugParams?: { streamline?: number; simplify?: number }, +) => { // Compose points as [x, y, pressure] let points: [number, number, number][]; if (element.simulatePressure) { @@ -80,10 +83,23 @@ export const getFreedrawStroke = (element: ExcalidrawFreeDrawElement) => { }); } + const streamline = + (typeof window !== "undefined" && + window.h && + window.h.debugFreedraw?.streamline) ?? + debugParams?.streamline ?? + 0.62; + const simplify = + (typeof window !== "undefined" && + window.h && + window.h.debugFreedraw?.simplify) ?? + debugParams?.simplify ?? + 0.3; + const laser = new LaserPointer({ size: element.strokeWidth, - streamline: 0.62, - simplify: 0.3, + streamline: streamline === false ? 0.62 : streamline, + simplify: simplify === false ? 0.3 : simplify, sizeMapping: ({ pressure: t }) => { if (element.simulatePressure) { return t + 0.2; @@ -114,13 +130,14 @@ export const getFreedrawStroke = (element: ExcalidrawFreeDrawElement) => { */ export const getFreeDrawSvgPath = ( element: ExcalidrawFreeDrawElement, + debugParams?: { streamline?: number; simplify?: number }, ): string => { // legacy, for backwards compatibility if (element.pressureSensitivity === null) { return _legacy_getFreeDrawSvgPath(element); } - return getSvgPathFromStroke(getFreedrawStroke(element)); + return getSvgPathFromStroke(getFreedrawStroke(element, debugParams)); }; const roundPoint = (A: Point): string => { diff --git a/packages/excalidraw/components/App.tsx b/packages/excalidraw/components/App.tsx index 45fc5109d8..3e3ccb49fc 100644 --- a/packages/excalidraw/components/App.tsx +++ b/packages/excalidraw/components/App.tsx @@ -11371,6 +11371,10 @@ declare global { app: InstanceType; history: History; store: Store; + debugFreedraw?: { + streamline: number; + simplify: number; + }; }; } } @@ -11379,6 +11383,12 @@ export const createTestHook = () => { if (isTestEnv() || isDevEnv()) { window.h = window.h || ({} as Window["h"]); + // Initialize debug freedraw parameters + window.h.debugFreedraw = window.h.debugFreedraw || { + streamline: 0.62, + simplify: 0.3, + }; + Object.defineProperties(window.h, { elements: { configurable: true,