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,