debug sliders

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}
           />
         )}
+        <FreedrawDebugSliders />
       </Excalidraw>
     </div>
   );

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 (
+    <div
+      style={{
+        position: "absolute",
+        bottom: "10px",
+        left: "50%",
+        transform: "translateX(-50%)",
+        zIndex: 9999,
+        background: "rgba(255, 255, 255, 0.9)",
+        padding: "10px",
+        borderRadius: "8px",
+        border: "1px solid #ccc",
+        display: "flex",
+        flexDirection: "column",
+        gap: "8px",
+        fontSize: "12px",
+        fontFamily: "monospace",
+      }}
+    >
+      <div>
+        <label>
+          Streamline: {streamline.toFixed(2)}
+          <br />
+          <input
+            type="range"
+            min="0"
+            max="1"
+            step="0.01"
+            value={streamline}
+            onChange={(e) => handleStreamlineChange(parseFloat(e.target.value))}
+            style={{ width: "150px" }}
+          />
+        </label>
+      </div>
+      <div>
+        <label>
+          Simplify: {simplify.toFixed(2)}
+          <br />
+          <input
+            type="range"
+            min="0"
+            max="1"
+            step="0.01"
+            value={simplify}
+            onChange={(e) => handleSimplifyChange(parseFloat(e.target.value))}
+            style={{ width: "150px" }}
+          />
+        </label>
+      </div>
+    </div>
+  );
+};

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,
+    streamline: streamline === false ? 0.62 : streamline,
-    simplify: 0.3,
+    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 => {

packages/excalidraw/components/App.tsx

@@ -11371,6 +11371,10 @@ declare global {
       app: InstanceType<typeof App>;
       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,