Merge branch 'master' into mtolmacs/fix/grid-binding

Signed-off-by: Mark Tolmacs <mark@lazycat.hu>

excalidraw-app/App.tsx

@@ -136,7 +136,6 @@ import { useHandleAppTheme } from "./useHandleAppTheme";
 import { getPreferredLanguage } from "./app-language/language-detector";
 import { useAppLangCode } from "./app-language/language-state";
 import DebugCanvas, {
-  ConsoleLogger,
   debugRenderer,
   isVisualDebuggerEnabled,
   loadSavedDebugState,
@@ -1262,7 +1261,6 @@ const ExcalidrawWrapper = () => {
             ref={debugCanvasRef}
           />
         )}
-        {isVisualDebuggerEnabled() && <ConsoleLogger />}
       </Excalidraw>
     </div>
   );

excalidraw-app/app_constants.ts

@@ -42,7 +42,6 @@ export const STORAGE_KEYS = {
   LOCAL_STORAGE_COLLAB: "excalidraw-collab",
   LOCAL_STORAGE_THEME: "excalidraw-theme",
   LOCAL_STORAGE_DEBUG: "excalidraw-debug",
-  LOCAL_STORAGE_DEBUG_CONSOLE: "excalidraw-debug-console",
   VERSION_DATA_STATE: "version-dataState",
   VERSION_FILES: "version-files",
 

excalidraw-app/collab/Collab.tsx

@@ -355,8 +355,6 @@ class Collab extends PureComponent<CollabProps, CollabState> {
   };
 
   stopCollaboration = (keepRemoteState = true) => {
-    this.broadcastElements.flush();
-    this.broadcastElements.cancel();
     this.queueBroadcastAllElements.cancel();
     this.queueSaveToFirebase.cancel();
     this.loadImageFiles.cancel();
@@ -943,9 +941,7 @@ class Collab extends PureComponent<CollabProps, CollabState> {
     this.portal.broadcastIdleChange(userState);
   };
 
-  private _broadcastElements = (
-    elements: readonly OrderedExcalidrawElement[],
-  ) => {
+  broadcastElements = (elements: readonly OrderedExcalidrawElement[]) => {
     if (
       getSceneVersion(elements) >
       this.getLastBroadcastedOrReceivedSceneVersion()
@@ -956,13 +952,6 @@ class Collab extends PureComponent<CollabProps, CollabState> {
     }
   };
 
-  broadcastElements = throttle(
-    (elements: readonly OrderedExcalidrawElement[]) =>
-      this._broadcastElements(elements),
-    10,
-    { leading: true, trailing: true },
-  );
-
   syncElements = (elements: readonly OrderedExcalidrawElement[]) => {
     this.broadcastElements(elements);
     this.queueSaveToFirebase();

excalidraw-app/components/AppMainMenu.tsx

@@ -4,8 +4,7 @@ import {
   eyeIcon,
 } from "@excalidraw/excalidraw/components/icons";
 import { MainMenu } from "@excalidraw/excalidraw/index";
-import DropdownMenuItemCheckbox from "@excalidraw/excalidraw/components/dropdownMenu/DropdownMenuItemCheckbox";
-import React, { useState } from "react";
+import React from "react";
 
 import { isDevEnv } from "@excalidraw/common";
 
@@ -14,29 +13,7 @@ import type { Theme } from "@excalidraw/element/types";
 import { LanguageList } from "../app-language/LanguageList";
 import { isExcalidrawPlusSignedUser } from "../app_constants";
 
-import {
-  isVisualDebuggerEnabled,
-  loadConsoleLoggerState,
-  saveDebugState,
-  setConsoleLoggerEnabled,
-} from "./DebugCanvas";
-
-const ConsoleLoggerToggle = () => {
-  const [checked, setChecked] = useState(() => loadConsoleLoggerState());
-  return (
-    <DropdownMenuItemCheckbox
-      checked={checked}
-      onSelect={(event) => {
-        const next = !checked;
-        setChecked(next);
-        setConsoleLoggerEnabled(next);
-        event.preventDefault();
-      }}
-    >
-      Show console log overlay
-    </DropdownMenuItemCheckbox>
-  );
-};
+import { saveDebugState } from "./DebugCanvas";
 
 export const AppMainMenu: React.FC<{
   onCollabDialogOpen: () => any;
@@ -100,13 +77,7 @@ export const AppMainMenu: React.FC<{
         </MainMenu.Item>
       )}
       <MainMenu.Separator />
-      <MainMenu.DefaultItems.Preferences
-        additionalItems={
-          isDevEnv() && isVisualDebuggerEnabled() ? (
-            <ConsoleLoggerToggle />
-          ) : null
-        }
-      />
+      <MainMenu.DefaultItems.Preferences />
       <MainMenu.DefaultItems.ToggleTheme
         allowSystemTheme
         theme={props.theme}

excalidraw-app/components/DebugCanvas.tsx

@@ -9,7 +9,7 @@ import {
 } from "@excalidraw/excalidraw/renderer/helpers";
 import { type AppState } from "@excalidraw/excalidraw/types";
 import { arrayToMap, throttleRAF } from "@excalidraw/common";
-import { useCallback, useEffect, useRef, useState } from "react";
+import { useCallback } from "react";
 
 import {
   getGlobalFixedPointForBindableElement,
@@ -435,34 +435,6 @@ export const loadSavedDebugState = () => {
 export const isVisualDebuggerEnabled = () =>
   Array.isArray(window.visualDebug?.data);
 
-export const loadConsoleLoggerState = (): boolean => {
-  try {
-    const raw = localStorage.getItem(STORAGE_KEYS.LOCAL_STORAGE_DEBUG_CONSOLE);
-    if (raw !== null) {
-      return JSON.parse(raw) === true;
-    }
-  } catch {}
-  return false;
-};
-
-export const saveConsoleLoggerState = (enabled: boolean) => {
-  try {
-    localStorage.setItem(
-      STORAGE_KEYS.LOCAL_STORAGE_DEBUG_CONSOLE,
-      JSON.stringify(enabled),
-    );
-  } catch {}
-};
-
-const CONSOLE_LOGGER_TOGGLE_EVENT = "excalidraw-debug-console-toggle";
-
-export const setConsoleLoggerEnabled = (enabled: boolean) => {
-  saveConsoleLoggerState(enabled);
-  window.dispatchEvent(
-    new CustomEvent<boolean>(CONSOLE_LOGGER_TOGGLE_EVENT, { detail: enabled }),
-  );
-};
-
 export const DebugFooter = ({ onChange }: { onChange: () => void }) => {
   const moveForward = useCallback(() => {
     if (
@@ -487,7 +459,6 @@ export const DebugFooter = ({ onChange }: { onChange: () => void }) => {
   }, [onChange]);
   const reset = useCallback(() => {
     window.visualDebug!.currentFrame = undefined;
-    _clearLogsCallback?.();
     onChange();
   }, [onChange]);
   const trashFrames = useCallback(() => {
@@ -495,7 +466,6 @@ export const DebugFooter = ({ onChange }: { onChange: () => void }) => {
       window.visualDebug.currentFrame = undefined;
       window.visualDebug.data = [];
     }
-    _clearLogsCallback?.();
     onChange();
   }, [onChange]);
 
@@ -593,181 +563,4 @@ const DebugCanvas = React.forwardRef<HTMLCanvasElement, DebugCanvasProps>(
   },
 );
 
-type LogLevel = "log" | "info" | "warn" | "error";
-
-interface LogEntry {
-  id: number;
-  level: LogLevel;
-  message: string;
-  timestamp: number;
-}
-
-const LOG_COLORS: Record<LogLevel, string> = {
-  log: "rgba(220,220,220,0.9)",
-  info: "rgba(100,180,255,0.9)",
-  warn: "rgba(255,200,60,0.9)",
-  error: "rgba(255,90,90,0.9)",
-};
-
-const MAX_LOGS = 500;
-let logIdCounter = 0;
-let _clearLogsCallback: (() => void) | null = null;
-
-export const ConsoleLogger = () => {
-  const [enabled, setEnabled] = useState(() => loadConsoleLoggerState());
-  const [logs, setLogs] = useState<LogEntry[]>([]);
-  const logsRef = useRef<LogEntry[]>([]);
-  const scrollRef = useRef<HTMLDivElement>(null);
-  const dragState = useRef<{ startY: number; startScrollTop: number } | null>(
-    null,
-  );
-  const isDragging = useRef(false);
-
-  useEffect(() => {
-    const handler = (e: Event) => {
-      setEnabled((e as CustomEvent<boolean>).detail);
-    };
-    window.addEventListener(CONSOLE_LOGGER_TOGGLE_EVENT, handler);
-    return () => {
-      window.removeEventListener(CONSOLE_LOGGER_TOGGLE_EVENT, handler);
-    };
-  }, []);
-
-  useEffect(() => {
-    _clearLogsCallback = () => {
-      logsRef.current = [];
-      setLogs([]);
-    };
-    return () => {
-      _clearLogsCallback = null;
-    };
-  }, []);
-
-  useEffect(() => {
-    const originals: Record<LogLevel, (...args: unknown[]) => void> = {
-      // eslint-disable-next-line no-console
-      log: console.log.bind(console),
-      info: console.info.bind(console),
-      warn: console.warn.bind(console),
-      error: console.error.bind(console),
-    };
-
-    const patch = (level: LogLevel) => {
-      // eslint-disable-next-line no-console
-      console[level] = (...args: unknown[]) => {
-        originals[level](...args);
-        const message = args
-          .map((a) =>
-            typeof a === "object" ? JSON.stringify(a, null, 0) : String(a),
-          )
-          .join(" ");
-        const entry: LogEntry = {
-          id: ++logIdCounter,
-          level,
-          message,
-          timestamp: Date.now(),
-        };
-        logsRef.current = [...logsRef.current, entry].slice(-MAX_LOGS);
-        setLogs([...logsRef.current]);
-        if (!isDragging.current && scrollRef.current) {
-          scrollRef.current.scrollTop = scrollRef.current.scrollHeight;
-        }
-      };
-    };
-
-    (["log", "info", "warn", "error"] as LogLevel[]).forEach(patch);
-
-    return () => {
-      (["log", "info", "warn", "error"] as LogLevel[]).forEach((level) => {
-        // eslint-disable-next-line no-console
-        console[level] = originals[level];
-      });
-    };
-  }, []);
-
-  const onPointerDown = useCallback((e: React.PointerEvent<HTMLDivElement>) => {
-    if (!scrollRef.current) {
-      return;
-    }
-    dragState.current = {
-      startY: e.clientY,
-      startScrollTop: scrollRef.current.scrollTop,
-    };
-    scrollRef.current.setPointerCapture(e.pointerId);
-    isDragging.current = true;
-    e.preventDefault();
-  }, []);
-
-  const onPointerMove = useCallback((e: React.PointerEvent<HTMLDivElement>) => {
-    if (!dragState.current || !scrollRef.current) {
-      return;
-    }
-    const delta = dragState.current.startY - e.clientY;
-    scrollRef.current.scrollTop = dragState.current.startScrollTop + delta;
-    e.preventDefault();
-  }, []);
-
-  const onPointerUp = useCallback(() => {
-    dragState.current = null;
-    isDragging.current = false;
-  }, []);
-
-  if (!enabled || logs.length === 0) {
-    return null;
-  }
-
-  return (
-    <div
-      ref={scrollRef}
-      onPointerDown={onPointerDown}
-      onPointerMove={onPointerMove}
-      onPointerUp={onPointerUp}
-      onPointerCancel={onPointerUp}
-      style={{
-        position: "fixed",
-        top: 8,
-        right: 8,
-        zIndex: 9999,
-        maxWidth: 420,
-        maxHeight: "60vh",
-        overflowY: "auto",
-        display: "flex",
-        flexDirection: "column",
-        gap: 2,
-        pointerEvents: "all",
-        cursor: "grab",
-        userSelect: "none",
-        scrollbarWidth: "none",
-      }}
-    >
-      {logs.map((entry) => (
-        <div
-          key={entry.id}
-          style={{
-            background: "rgba(18,18,20,0.55)",
-            backdropFilter: "blur(8px) saturate(1.4)",
-            WebkitBackdropFilter: "blur(8px) saturate(1.4)",
-            borderLeft: `3px solid ${LOG_COLORS[entry.level]}`,
-            borderRadius: 4,
-            padding: "2px 8px",
-            fontFamily: "monospace",
-            fontSize: 11,
-            lineHeight: 1.5,
-            color: LOG_COLORS[entry.level],
-            wordBreak: "break-all",
-            whiteSpace: "pre-wrap",
-            opacity: 0.95,
-            boxShadow: "0 1px 4px rgba(0,0,0,0.35)",
-          }}
-        >
-          <span style={{ opacity: 0.5, marginRight: 6 }}>
-            {entry.level.toUpperCase()}
-          </span>
-          {entry.message}
-        </div>
-      ))}
-    </div>
-  );
-};
-
 export default DebugCanvas;

packages/common/src/colors.ts

@@ -80,11 +80,7 @@ const cssInvert = (
   return { r: invertedR, g: invertedG, b: invertedB };
 };
 
-export const applyDarkModeFilter = (color: string, enable = true): string => {
-  if (!enable) {
-    return color;
-  }
-
+export const applyDarkModeFilter = (color: string): string => {
   const cached = DARK_MODE_COLORS_CACHE?.get(color);
   if (cached) {
     return cached;

packages/common/src/points.ts

@@ -1,4 +1,5 @@
 import {
+  pointFrom,
   pointFromPair,
   type GlobalPoint,
   type LocalPoint,
@@ -69,12 +70,12 @@ export const getGridPoint = (
   x: number,
   y: number,
   gridSize: NullableGridSize,
-): [number, number] => {
+): GlobalPoint => {
   if (gridSize) {
-    return [
+    return pointFrom<GlobalPoint>(
       Math.round(x / gridSize) * gridSize,
       Math.round(y / gridSize) * gridSize,
-    ];
+    );
   }
-  return [x, y];
+  return pointFrom<GlobalPoint>(x, y);
 };

packages/element/src/binding.ts

@@ -1,6 +1,7 @@
 import {
   arrayToMap,
   getFeatureFlag,
+  getGridPoint,
   invariant,
   isTransparent,
 } from "@excalidraw/common";
@@ -22,7 +23,7 @@ import {
 } from "@excalidraw/math";
 
 import type { LineSegment, LocalPoint, Radians } from "@excalidraw/math";
-import type { AppState } from "@excalidraw/excalidraw/types";
+import type { AppState, NullableGridSize } from "@excalidraw/excalidraw/types";
 import type { MapEntry, Mutable } from "@excalidraw/common/utility-types";
 import type { Bounds } from "@excalidraw/common";
 
@@ -154,6 +155,7 @@ export const bindOrUnbindBindingElement = (
     altKey?: boolean;
     angleLocked?: boolean;
     initialBinding?: boolean;
+    gridSize?: NullableGridSize;
   },
 ) => {
   const { start, end } = getBindingStrategyForDraggingBindingElementEndpoints(
@@ -170,12 +172,16 @@ export const bindOrUnbindBindingElement = (
     },
   );
 
+  const isMidpointSnappingEnabled =
+    appState.isMidpointSnappingEnabled && !appState.gridModeEnabled;
+
   bindOrUnbindBindingElementEdge(
     arrow,
     start,
     "start",
     scene,
     appState.isBindingEnabled,
+    isMidpointSnappingEnabled,
   );
   bindOrUnbindBindingElementEdge(
     arrow,
@@ -183,6 +189,7 @@ export const bindOrUnbindBindingElement = (
     "end",
     scene,
     appState.isBindingEnabled,
+    isMidpointSnappingEnabled,
   );
   if (start.focusPoint || end.focusPoint) {
     // If the strategy dictates a focus point override, then
@@ -227,6 +234,7 @@ const bindOrUnbindBindingElementEdge = (
   startOrEnd: "start" | "end",
   scene: Scene,
   shouldSnapToOutline = true,
+  isMidpointSnappingEnabled = true,
 ): void => {
   if (mode === null) {
     // null means break the binding
@@ -240,6 +248,7 @@ const bindOrUnbindBindingElementEdge = (
       scene,
       focusPoint,
       shouldSnapToOutline,
+      isMidpointSnappingEnabled,
     );
   }
 };
@@ -593,6 +602,7 @@ export const getBindingStrategyForDraggingBindingElementEndpoints = (
     finalize?: boolean;
     initialBinding?: boolean;
     zoom?: AppState["zoom"];
+    gridSize?: NullableGridSize;
   },
 ): { start: BindingStrategy; end: BindingStrategy } => {
   if (getFeatureFlag("COMPLEX_BINDINGS")) {
@@ -633,6 +643,7 @@ const getBindingStrategyForDraggingBindingElementEndpoints_simple = (
     finalize?: boolean;
     initialBinding?: boolean;
     zoom?: AppState["zoom"];
+    gridSize?: NullableGridSize;
   },
 ): { start: BindingStrategy; end: BindingStrategy } => {
   const startIdx = 0;
@@ -695,7 +706,9 @@ const getBindingStrategyForDraggingBindingElementEndpoints_simple = (
     elementsMap,
   );
   const hit = getHoveredElementForBinding(
-    globalPoint,
+    opts?.angleLocked || appState.gridModeEnabled
+      ? pointFrom<GlobalPoint>(scenePointerX, scenePointerY)
+      : globalPoint,
     elements,
     elementsMap,
     maxBindingDistance_simple(appState.zoom),
@@ -747,7 +760,11 @@ const getBindingStrategyForDraggingBindingElementEndpoints_simple = (
           ? globalPoint
           : // NOTE: Can only affect the start point because new arrows always drag the end point
           opts?.newArrow
-          ? appState.selectedLinearElement!.initialState.origin!
+          ? getGridPoint(
+              appState.selectedLinearElement!.initialState.origin![0],
+              appState.selectedLinearElement!.initialState.origin![1],
+              opts.gridSize as NullableGridSize,
+            )
           : LinearElementEditor.getPointAtIndexGlobalCoordinates(
               arrow,
               0,
@@ -806,12 +823,27 @@ const getBindingStrategyForDraggingBindingElementEndpoints_simple = (
           focusPoint:
             projectFixedPointOntoDiagonal(
               arrow,
-              globalPoint,
+              opts?.angleLocked || appState.gridModeEnabled
+                ? snapBoundPointToGrid(
+                    pointFrom<GlobalPoint>(scenePointerX, scenePointerY),
+                    hit,
+                    elementsMap,
+                    appState.gridSize as NullableGridSize,
+                    arrow,
+                    LinearElementEditor.getPointAtIndexGlobalCoordinates(
+                      arrow,
+                      startDragged ? 1 : -2,
+                      elementsMap,
+                    ),
+                  )
+                : globalPoint,
               hit,
               startDragged ? "start" : "end",
               elementsMap,
               appState.zoom,
-              appState.isMidpointSnappingEnabled,
+              appState.isMidpointSnappingEnabled &&
+                !opts?.angleLocked &&
+                !appState.gridModeEnabled,
             ) || globalPoint,
         }
     : { mode: null };
@@ -856,7 +888,7 @@ const getBindingStrategyForDraggingBindingElementEndpoints_simple = (
               startDragged ? "end" : "start",
               elementsMap,
               appState.zoom,
-              appState.isMidpointSnappingEnabled,
+              false,
             ) || otherEndpoint,
         }
       : { mode: undefined }
@@ -1021,6 +1053,7 @@ export const bindBindingElement = (
   scene: Scene,
   focusPoint?: GlobalPoint,
   shouldSnapToOutline = true,
+  isMidpointSnappingEnabled = true,
 ): void => {
   const elementsMap = scene.getNonDeletedElementsMap();
 
@@ -1036,6 +1069,7 @@ export const bindBindingElement = (
         startOrEnd,
         elementsMap,
         shouldSnapToOutline,
+        isMidpointSnappingEnabled,
       ),
     };
   } else {
@@ -1740,6 +1774,92 @@ const extractBinding = (
   };
 };
 
+/**
+ * Snaps a bound arrow endpoint to the grid on the axis parallel to the
+ * bindable element's side, while preserving the binding gap distance on the
+ * perpendicular axis. In other words, the grid axis closest to the side's
+ * perpendicular (normal) is used as the snap axis and the other axis is kept at
+ * the binding gap distance.
+ */
+const snapBoundPointToGrid = (
+  outlinePoint: GlobalPoint,
+  bindableElement: ExcalidrawBindableElement,
+  elementsMap: ElementsMap,
+  gridSize: NullableGridSize,
+  arrowElement: ExcalidrawArrowElement,
+  adjacentPoint?: GlobalPoint,
+): GlobalPoint => {
+  if (!gridSize) {
+    return outlinePoint;
+  }
+
+  const aabb = aabbForElement(bindableElement, elementsMap);
+  // For ellipses and diamonds use the arrow's incoming direction instead of
+  // the position-based heading, which can give the wrong axis when the
+  // outline point is near a cardinal zone or an angled diamond face.
+  const heading =
+    adjacentPoint &&
+    (bindableElement.type === "ellipse" || bindableElement.type === "diamond")
+      ? vectorToHeading(vectorFromPoint(adjacentPoint, outlinePoint))
+      : headingForPointFromElement(bindableElement, aabb, outlinePoint);
+
+  const normalLocal = pointFrom<GlobalPoint>(heading[0], heading[1]);
+  const normalGlobal = pointRotateRads(
+    normalLocal,
+    pointFrom<GlobalPoint>(0, 0),
+    bindableElement.angle,
+  );
+
+  const bindingGap = getBindingGap(bindableElement, arrowElement);
+  const extent =
+    Math.max(bindableElement.width, bindableElement.height) + bindingGap * 2;
+  const center = getCenterForBounds(aabb);
+
+  const absNX = Math.abs(normalGlobal[0]);
+  const absNY = Math.abs(normalGlobal[1]);
+  if (absNX >= absNY) {
+    // Global X is closest to the perpendicular so snap Y, intersect horizontal line
+    const [, snappedY] = getGridPoint(
+      outlinePoint[0],
+      outlinePoint[1],
+      gridSize,
+    );
+    const intersector = lineSegment<GlobalPoint>(
+      pointFrom<GlobalPoint>(center[0] - extent, snappedY),
+      pointFrom<GlobalPoint>(center[0] + extent, snappedY),
+    );
+    const intersection = intersectElementWithLineSegment(
+      bindableElement,
+      elementsMap,
+      intersector,
+      bindingGap,
+    ).sort(
+      (a, b) =>
+        pointDistanceSq(a, outlinePoint) - pointDistanceSq(b, outlinePoint),
+    )[0];
+
+    return intersection ?? pointFrom<GlobalPoint>(outlinePoint[0], snappedY);
+  }
+
+  // Global Y is closest to the perpendicular so snap X, intersect vertical line
+  const [snappedX] = getGridPoint(outlinePoint[0], outlinePoint[1], gridSize);
+  const intersector = lineSegment<GlobalPoint>(
+    pointFrom<GlobalPoint>(snappedX, center[1] - extent),
+    pointFrom<GlobalPoint>(snappedX, center[1] + extent),
+  );
+  const intersection = intersectElementWithLineSegment(
+    bindableElement,
+    elementsMap,
+    intersector,
+    bindingGap,
+  ).sort(
+    (a, b) =>
+      pointDistanceSq(a, outlinePoint) - pointDistanceSq(b, outlinePoint),
+  )[0];
+
+  return intersection ?? pointFrom<GlobalPoint>(snappedX, outlinePoint[1]);
+};
+
 const elementArea = (element: ExcalidrawBindableElement) =>
   element.width * element.height;
 

packages/element/src/index.ts

@@ -81,7 +81,6 @@ export * from "./mutateElement";
 export * from "./newElement";
 export * from "./positionElementsOnGrid";
 export * from "./renderElement";
-export { invalidateFreeDrawIncrementalCanvas } from "./renderFreedraw";
 export * from "./resizeElements";
 export * from "./resizeTest";
 export * from "./Scene";

packages/element/src/linearElementEditor.ts

@@ -359,6 +359,7 @@ export class LinearElementEditor {
       linearElementEditor,
     );
 
+    const angleLocked = shouldRotateWithDiscreteAngle(event);
     LinearElementEditor.movePoints(
       element,
       app.scene,
@@ -370,7 +371,10 @@ export class LinearElementEditor {
       },
       {
         isBindingEnabled: app.state.isBindingEnabled,
-        isMidpointSnappingEnabled: app.state.isMidpointSnappingEnabled,
+        isMidpointSnappingEnabled:
+          app.state.isMidpointSnappingEnabled &&
+          !angleLocked &&
+          !app.state.gridModeEnabled,
       },
     );
     // Set the suggested binding from the updates if available
@@ -427,7 +431,9 @@ export class LinearElementEditor {
                 "start",
                 elementsMap,
                 app.state.zoom,
-                app.state.isMidpointSnappingEnabled,
+                app.state.isMidpointSnappingEnabled &&
+                  !angleLocked &&
+                  !app.state.gridModeEnabled,
               )
             : linearElementEditor.initialState.altFocusPoint,
       },
@@ -554,6 +560,8 @@ export class LinearElementEditor {
       linearElementEditor,
     );
 
+    const angleLocked =
+      shouldRotateWithDiscreteAngle(event) && singlePointDragged;
     LinearElementEditor.movePoints(
       element,
       app.scene,
@@ -565,7 +573,10 @@ export class LinearElementEditor {
       },
       {
         isBindingEnabled: app.state.isBindingEnabled,
-        isMidpointSnappingEnabled: app.state.isMidpointSnappingEnabled,
+        isMidpointSnappingEnabled:
+          app.state.isMidpointSnappingEnabled &&
+          !angleLocked &&
+          !app.state.gridModeEnabled,
       },
     );
 
@@ -661,7 +672,9 @@ export class LinearElementEditor {
                 "start",
                 elementsMap,
                 app.state.zoom,
-                app.state.isMidpointSnappingEnabled,
+                app.state.isMidpointSnappingEnabled &&
+                  !angleLocked &&
+                  !app.state.gridModeEnabled,
               )
             : linearElementEditor.initialState.altFocusPoint,
       },
@@ -2176,6 +2189,7 @@ const pointDraggingUpdates = (
       newArrow: !!app.state.newElement,
       angleLocked,
       altKey,
+      gridSize: app.getEffectiveGridSize(),
     },
   );
 

packages/element/src/renderElement.ts

@@ -65,12 +65,8 @@ import {
 } from "./typeChecks";
 import { getContainingFrame } from "./frame";
 import { getCornerRadius } from "./utils";
+
 import { ShapeCache } from "./shape";
-import {
-  drawFreeDrawSegments,
-  generateOrUpdateFreeDrawIncrementalCanvas,
-  getFreedrawCanvasPadding,
-} from "./renderFreedraw";
 
 import type {
   ExcalidrawElement,
@@ -96,7 +92,7 @@ const isPendingImageElement = (
 const getCanvasPadding = (element: ExcalidrawElement) => {
   switch (element.type) {
     case "freedraw":
-      return getFreedrawCanvasPadding(element);
+      return element.strokeWidth * 12;
     case "text":
       return element.fontSize / 2;
     case "arrow":
@@ -148,15 +144,6 @@ export interface ExcalidrawElementWithCanvas {
   imageCrop: ExcalidrawImageElement["crop"] | null;
   containingFrameOpacity: number;
   boundTextCanvas: HTMLCanvasElement;
-  canvasOriginSceneX?: number;
-  canvasOriginSceneY?: number;
-  /**
-   * Tip canvas for incremental freedraw rendering.  Contains only the last
-   * unfinalised segment (whose Catmull-Rom right-hand tangent changes with
-   * each new point) and is cleared + redrawn every frame.  Composited on top
-   * of `canvas` (the committed accumulation canvas) in drawElementFromCanvas.
-   */
-  tipCanvas?: HTMLCanvasElement;
 }
 
 const cappedElementCanvasSize = (
@@ -266,7 +253,7 @@ const generateElementCanvas = (
 
   const rc = rough.canvas(canvas);
 
-  drawElementOnCanvas(element, rc, context, renderConfig, scale);
+  drawElementOnCanvas(element, rc, context, renderConfig);
 
   context.restore();
 
@@ -402,7 +389,6 @@ const drawElementOnCanvas = (
   rc: RoughCanvas,
   context: CanvasRenderingContext2D,
   renderConfig: StaticCanvasRenderConfig,
-  scale = 1,
 ) => {
   switch (element.type) {
     case "rectangle":
@@ -429,8 +415,23 @@ const drawElementOnCanvas = (
       break;
     }
     case "freedraw": {
+      // Draw directly to canvas
       context.save();
-      drawFreeDrawSegments(element, context, renderConfig, 0, undefined, scale);
+
+      const shapes = ShapeCache.generateElementShape(element, renderConfig);
+
+      for (const shape of shapes) {
+        if (typeof shape === "string") {
+          context.fillStyle =
+            renderConfig.theme === THEME.DARK
+              ? applyDarkModeFilter(element.strokeColor)
+              : element.strokeColor;
+          context.fill(new Path2D(shape));
+        } else {
+          rc.draw(shape);
+        }
+      }
+
       context.restore();
       break;
     }
@@ -554,10 +555,10 @@ const drawElementOnCanvas = (
         context.canvas.setAttribute("dir", rtl ? "rtl" : "ltr");
         context.save();
         context.font = getFontString(element);
-        context.fillStyle = applyDarkModeFilter(
-          element.strokeColor,
-          renderConfig.theme === THEME.DARK,
-        );
+        context.fillStyle =
+          renderConfig.theme === THEME.DARK
+            ? applyDarkModeFilter(element.strokeColor)
+            : element.strokeColor;
         context.textAlign = element.textAlign as CanvasTextAlign;
 
         // Canvas does not support multiline text by default
@@ -615,24 +616,6 @@ const generateElementWithCanvas = (
     : {
         value: 1 as NormalizedZoomValue,
       };
-
-  // Incremental rendering path for freedraw elements being actively drawn.
-  // ShapeCache.delete() clears elementWithCanvasCache on every added point, so
-  // we bypass that cache entirely and use freedrawIncrementalCache instead.
-  if (
-    isFreeDrawElement(element) &&
-    "newElement" in appState &&
-    appState.newElement?.id === element.id
-  ) {
-    return generateOrUpdateFreeDrawIncrementalCanvas(
-      element as ExcalidrawFreeDrawElement,
-      elementsMap,
-      zoom,
-      renderConfig,
-      appState,
-    );
-  }
-
   const prevElementWithCanvas = elementWithCanvasCache.get(element);
   const shouldRegenerateBecauseZoom =
     prevElementWithCanvas &&
@@ -735,39 +718,16 @@ const drawElementFromCanvas = (
     // revert afterwards we don't have account for it during drawing
     context.translate(-cx, -cy);
 
-    // For the incremental freedraw path, the canvas origin is stored explicitly
-    // because the canvas is over-allocated beyond the tight element bounds.
-    const destX =
-      elementWithCanvas.canvasOriginSceneX !== undefined
-        ? (elementWithCanvas.canvasOriginSceneX + appState.scrollX) *
-          window.devicePixelRatio
-        : (x1 + appState.scrollX) * window.devicePixelRatio - padding;
-    const destY =
-      elementWithCanvas.canvasOriginSceneY !== undefined
-        ? (elementWithCanvas.canvasOriginSceneY + appState.scrollY) *
-          window.devicePixelRatio
-        : (y1 + appState.scrollY) * window.devicePixelRatio - padding;
     context.drawImage(
       elementWithCanvas.canvas!,
-      destX,
-      destY,
+      (x1 + appState.scrollX) * window.devicePixelRatio -
+        (padding * elementWithCanvas.scale) / elementWithCanvas.scale,
+      (y1 + appState.scrollY) * window.devicePixelRatio -
+        (padding * elementWithCanvas.scale) / elementWithCanvas.scale,
       elementWithCanvas.canvas!.width / elementWithCanvas.scale,
       elementWithCanvas.canvas!.height / elementWithCanvas.scale,
     );
 
-    // Composite the tip canvas (incremental freedraw path) on top.  It is
-    // the same size and at the same scene origin as the committed canvas, so
-    // it uses identical destX / destY / dimensions.
-    if (elementWithCanvas.tipCanvas) {
-      context.drawImage(
-        elementWithCanvas.tipCanvas,
-        destX,
-        destY,
-        elementWithCanvas.tipCanvas.width / elementWithCanvas.scale,
-        elementWithCanvas.tipCanvas.height / elementWithCanvas.scale,
-      );
-    }
-
     if (
       import.meta.env.VITE_APP_DEBUG_ENABLE_TEXT_CONTAINER_BOUNDING_BOX ===
         "true" &&
@@ -851,10 +811,10 @@ export const renderElement = (
         context.fillStyle = "rgba(0, 0, 200, 0.04)";
 
         context.lineWidth = FRAME_STYLE.strokeWidth / appState.zoom.value;
-        context.strokeStyle = applyDarkModeFilter(
-          FRAME_STYLE.strokeColor,
-          appState.theme === THEME.DARK,
-        );
+        context.strokeStyle =
+          appState.theme === THEME.DARK
+            ? applyDarkModeFilter(FRAME_STYLE.strokeColor)
+            : FRAME_STYLE.strokeColor;
 
         // TODO change later to only affect AI frames
         if (isMagicFrameElement(element)) {
@@ -907,14 +867,6 @@ export const renderElement = (
           return;
         }
 
-        const currentImageSmoothingStatus = context.imageSmoothingEnabled;
-        if (
-          !appState?.shouldCacheIgnoreZoom &&
-          (!element.angle || isRightAngleRads(element.angle))
-        ) {
-          context.imageSmoothingEnabled = false;
-        }
-
         drawElementFromCanvas(
           elementWithCanvas,
           context,
@@ -922,8 +874,6 @@ export const renderElement = (
           appState,
           allElementsMap,
         );
-
-        context.imageSmoothingEnabled = currentImageSmoothingStatus;
       }
 
       break;
@@ -1033,7 +983,7 @@ export const renderElement = (
         }
 
         context.restore();
-        // not exporting -> optimized rendering (cache & render from element
+        // not exporting → optimized rendering (cache & render from element
         // canvases)
       } else {
         const elementWithCanvas = generateElementWithCanvas(

packages/element/src/renderFreedraw.ts

@@ -1,549 +0,0 @@
-import { applyDarkModeFilter, THEME } from "@excalidraw/common";
-
-import type { StaticCanvasRenderConfig } from "@excalidraw/excalidraw/scene/types";
-
-import type {
-  AppState,
-  InteractiveCanvasAppState,
-  StaticCanvasAppState,
-  Zoom,
-} from "@excalidraw/excalidraw/types";
-
-import { getElementAbsoluteCoords } from "./bounds";
-import { getContainingFrame } from "./frame";
-
-import type { ExcalidrawElementWithCanvas } from "./renderElement";
-import type {
-  ExcalidrawFreeDrawElement,
-  NonDeletedSceneElementsMap,
-} from "./types";
-
-const DEFAULT_FREEDRAW_PRESSURE = 0.5;
-
-/**
- * Half-width (in samples) of the triangular smoothing kernel applied to raw
- * pressure values before computing stroke radii.  A radius of R means each
- * pressure sample is averaged with R neighbours on each side, weighted
- * linearly so the centre sample has weight R+1 and the outermost weight 1.
- * Larger values produce a smoother, more uniform stroke width.
- */
-const PRESSURE_SMOOTHING_RADIUS = 6;
-
-/**
- * Draws a single stroke segment primitive for the triplet (pPrev, pCur, pNext).
- *
- * The primitive is a closed quadrilateral with curved top and bottom edges:
- *   A        = midpoint(pPrev, pCur)  — left junction, shared with the previous primitive
- *   B        = midpoint(pCur, pNext)  — right junction, shared with the next primitive
- *   M'1/M'2  at A:    ±rA perpendicular to the pPrev→pCur direction
- *   M1/M2    at pCur: ±rCur along the bisector normal of the two edge directions
- *   M''1/M''2 at B:   ±rB perpendicular to the pCur→pNext direction
- *
- * Shape boundary (clockwise):
- *   M'1 →[quadratic Bezier through M1]→ M''1 →[line]→ M''2
- *       →[quadratic Bezier through M2]→  M'2  →[line]→  M'1
- *
- * Adjacent primitives share their junction points so the stroke outline is
- * geometrically continuous with no gaps or overlaps.
- */
-const drawStrokeSegment = (
-  context: CanvasRenderingContext2D,
-  pPrevX: number,
-  pPrevY: number,
-  rPrev: number,
-  pCurX: number,
-  pCurY: number,
-  rCur: number,
-  pNextX: number,
-  pNextY: number,
-  rNext: number,
-) => {
-  // A = midpoint(pPrev, pCur), B = midpoint(pCur, pNext)
-  const ax = (pPrevX + pCurX) * 0.5;
-  const ay = (pPrevY + pCurY) * 0.5;
-  const rA = (rPrev + rCur) * 0.5;
-  const bx = (pCurX + pNextX) * 0.5;
-  const by = (pCurY + pNextY) * 0.5;
-  const rB = (rCur + rNext) * 0.5;
-
-  // Perpendicular unit vector at A (normal to pPrev→pCur)
-  const daX = pCurX - pPrevX;
-  const daY = pCurY - pPrevY;
-  const daLenInv = 1 / (Math.sqrt(daX * daX + daY * daY) || 1e-10);
-  const nAX = -daY * daLenInv;
-  const nAY = daX * daLenInv;
-
-  // Perpendicular unit vector at B (normal to pCur→pNext)
-  const dbX = pNextX - pCurX;
-  const dbY = pNextY - pCurY;
-  const dbLenInv = 1 / (Math.sqrt(dbX * dbX + dbY * dbY) || 1e-10);
-  const nBX = -dbY * dbLenInv;
-  const nBY = dbX * dbLenInv;
-
-  // Bisector normal at pCur: normalised average of nA and nB
-  const bisRawX = nAX + nBX;
-  const bisRawY = nAY + nBY;
-  const bisLen = Math.sqrt(bisRawX * bisRawX + bisRawY * bisRawY);
-  const bisNX = bisLen > 1e-10 ? bisRawX / bisLen : nAX;
-  const bisNY = bisLen > 1e-10 ? bisRawY / bisLen : nAY;
-
-  // M'1, M'2 at A
-  const mp1x = ax + nAX * rA;
-  const mp1y = ay + nAY * rA;
-  const mp2x = ax - nAX * rA;
-  const mp2y = ay - nAY * rA;
-
-  // M1, M2 at pCur — used directly as the quadratic Bézier control points.
-  // The junction points (M'1, M''1, etc.) are midpoints between consecutive
-  // control points, which is the classic midpoint quadratic B-spline scheme.
-  // This guarantees C1 continuity: the shared junction is always the midpoint
-  // of the two flanking CPs, so the tangent is continuous across segments.
-  const m1x = pCurX + bisNX * rCur;
-  const m1y = pCurY + bisNY * rCur;
-  const m2x = pCurX - bisNX * rCur;
-  const m2y = pCurY - bisNY * rCur;
-
-  // M''1, M''2 at B
-  const mpp1x = bx + nBX * rB;
-  const mpp1y = by + nBY * rB;
-  const mpp2x = bx - nBX * rB;
-  const mpp2y = by - nBY * rB;
-
-  context.beginPath();
-  context.moveTo(mp1x, mp1y);
-  // Top edge: M'1 → M''1, control point = M1 (bisector offset at pCur)
-  context.quadraticCurveTo(m1x, m1y, mpp1x, mpp1y);
-  // Right cap: M''1 → M''2
-  context.lineTo(mpp2x, mpp2y);
-  // Bottom edge: M''2 → M'2, control point = M2
-  context.quadraticCurveTo(m2x, m2y, mp2x, mp2y);
-  // Left cap: M'2 → M'1
-  context.closePath();
-  context.fill();
-
-  // Filled circles at the junction midpoints seal any sub-pixel anti-aliasing
-  // gap where adjacent segment fills share a boundary edge.
-  context.beginPath();
-  context.arc(ax, ay, rA, 0, Math.PI * 2);
-  context.fill();
-  context.beginPath();
-  context.arc(bx, by, rB, 0, Math.PI * 2);
-  context.fill();
-};
-
-/**
- * Draws freedraw points as pressure-aware curved stroke segment primitives.
- * For each consecutive triplet of points (i-1, i, i+1) a curved quadrilateral
- * is drawn whose side edges sit at the midpoints of the consecutive point pairs
- * and whose top/bottom edges are quadratic Bezier curves passing through the
- * stroke-width offset at the centre point.  Adjacent primitives share their
- * side-edge positions, so the rendered outline is continuous with no gaps.
- *
- * @param fromIndex   Draw segments starting from this point index (inclusive).
- *                    Pass 0 to draw from the beginning.
- * @param upToIndex   Draw segments only up to (but not including) this point
- *                    index.  Omit or pass `undefined` to draw all remaining
- *                    points.  Used by the incremental canvas to stop short of
- *                    the last segment so the committed canvas only contains
- *                    segments whose geometry is fully determined by immutable
- *                    points.
- */
-export const drawFreeDrawSegments = (
-  element: ExcalidrawFreeDrawElement,
-  context: CanvasRenderingContext2D,
-  renderConfig: StaticCanvasRenderConfig,
-  fromIndex: number,
-  upToIndex?: number,
-  scale = 1,
-) => {
-  const { points, pressures } = element;
-  const N = points.length;
-  const strokeColor =
-    renderConfig.theme === THEME.DARK
-      ? applyDarkModeFilter(element.strokeColor)
-      : element.strokeColor;
-
-  context.fillStyle = applyDarkModeFilter(
-    strokeColor,
-    renderConfig.theme === THEME.DARK,
-  );
-
-  const baseRadius = (element.strokeWidth * 1.25) / 2;
-
-  // Causal (one-sided) triangular-kernel weighted average of past pressure
-  // samples.  Only looks backward [i-R .. i], so a newly-arrived point never
-  // retroactively changes the smoothed pressure of any previously rendered
-  // segment.  This ensures live and final renders are identical at all points.
-  // When simulatePressure is true, constant pressure is used for all points.
-  const getSmoothedPressure = (i: number): number => {
-    if (element.simulatePressure || pressures.length === 0) {
-      return DEFAULT_FREEDRAW_PRESSURE;
-    }
-    let sum = 0;
-    let totalWeight = 0;
-    for (let k = -PRESSURE_SMOOTHING_RADIUS; k <= 0; k++) {
-      const idx = i + k;
-      if (idx < 0) {
-        continue;
-      }
-      const p =
-        idx < pressures.length ? pressures[idx] : DEFAULT_FREEDRAW_PRESSURE;
-      const w = PRESSURE_SMOOTHING_RADIUS + 1 + k; // 1 at i-R, R+1 at i
-      sum += p * w;
-      totalWeight += w;
-    }
-    return totalWeight > 0 ? sum / totalWeight : DEFAULT_FREEDRAW_PRESSURE;
-  };
-
-  if (
-    fromIndex === 0 &&
-    N === 1 &&
-    (upToIndex === undefined || upToIndex >= 1)
-  ) {
-    // Single-point stroke -> filled circle (dot)
-    const r = baseRadius * getSmoothedPressure(0) * 2;
-    context.beginPath();
-    context.arc(points[0][0], points[0][1], r, 0, Math.PI * 2);
-    context.fill();
-
-    return;
-  }
-
-  const end = upToIndex !== undefined ? Math.min(upToIndex, N) : N;
-  const start = Math.max(fromIndex, 1);
-  for (let i = start; i < end; i++) {
-    const p0 = points[i - 1];
-    const p1 = points[i];
-    const r0 = baseRadius * getSmoothedPressure(i - 1) * 2;
-    const r1 = baseRadius * getSmoothedPressure(i) * 2;
-
-    // Triplet: need i+1; if at the last point, mirror i-1 around i (degenerate tip).
-    let p2x: number;
-    let p2y: number;
-    let r2: number;
-    if (i < N - 1) {
-      p2x = points[i + 1][0];
-      p2y = points[i + 1][1];
-      r2 = baseRadius * getSmoothedPressure(i + 1) * 2;
-    } else {
-      p2x = 2 * p1[0] - p0[0];
-      p2y = 2 * p1[1] - p0[1];
-      r2 = r0;
-    }
-
-    drawStrokeSegment(
-      context,
-      p0[0],
-      p0[1],
-      r0,
-      p1[0],
-      p1[1],
-      r1,
-      p2x,
-      p2y,
-      r2,
-    );
-  }
-};
-
-// ─── Incremental freedraw canvas cache ───────────────────────────────────────
-// A separate WeakMap that survives ShapeCache.delete() calls so that the raster
-// accumulates new capsule segments without full regeneration on every added
-// point.
-
-// screen pixels - minimum extra lookahead space on each side
-// (divided by scale at use)
-const FREEDRAW_CANVAS_OVERSHOOT_MIN = 200;
-
-// allocate current_dimension * factor extra on each side
-const FREEDRAW_CANVAS_OVERSHOOT_FACTOR = 0.5;
-
-interface FreeDrawIncrementalCanvas {
-  /**
-   * Accumulation canvas - contains all segments whose Catmull-Rom tangents are
-   * fully finalised (right-hand neighbour is known).  With N points the last
-   * finalised segment ends at index `committedPointCount - 1`, meaning segment
-   * `[committedPointCount-2 -> committedPointCount-1]` has been drawn with the
-   * correct tangent at `committedPointCount-1` (since point
-   * `committedPointCount` existed when it was drawn).  Never cleared; only
-   * appended to (or copied when bounds grow).
-   */
-  committedCanvas: HTMLCanvasElement;
-  /**
-   * Tip canvas - same pixel dimensions and scene origin as `committedCanvas`.
-   * Cleared and redrawn every frame to contain only the last segment
-   * `[committedPointCount-1 -> N-1]` whose tangent at `N-1` is still
-   * provisional (no right-hand neighbour yet).  Composited on top of
-   * `committedCanvas` at display time.
-   */
-  tipCanvas: HTMLCanvasElement;
-  /**
-   * Number of points that have been permanently drawn on `committedCanvas`.
-   * The committed canvas contains segments through point index
-   * `committedPointCount - 1` with final tangents.  Always lags the current
-   * point count by 1 (the tip holds the last unfinalisable segment).
-   */
-  committedPointCount: number;
-  canvasOriginSceneX: number;
-  canvasOriginSceneY: number;
-  canvasAllocX1: number;
-  canvasAllocY1: number;
-  canvasAllocX2: number;
-  canvasAllocY2: number;
-  scale: number;
-  theme: AppState["theme"];
-}
-
-const freedrawIncrementalCache = new WeakMap<
-  ExcalidrawFreeDrawElement,
-  FreeDrawIncrementalCanvas
->();
-
-export const getFreedrawCanvasPadding = (element: ExcalidrawFreeDrawElement) =>
-  element.strokeWidth * 12;
-
-/**
- * Generates or incrementally updates the two-canvas (committed + tip) raster
- * for a freedraw element being actively drawn.
- *
- * ## Two-canvas split
- *
- * A Catmull-Rom tangent at point `i` depends on `points[i+1]`.  Until
- * `points[i+1]` arrives, the tangent at `i` uses a mirrored fallback and is
- * therefore provisional.  The segment ending at the current tip `[N-2 -> N-1]`
- * is the only one with a provisional tangent.
- *
- * - **`committedCanvas`** - contains all segments whose tangents are final.
- *   With N points: segments `[0->1, ..., N-3->N-2]` (`committedPointCount =
- *   N-1`).  This canvas is append-only; its pixels are never invalidated.
- *   When a new point `N` arrives, the segment `[N-2 -> N-1]` is now
- *   finalised (tangent at `N-1` uses `N` as the right-hand neighbour) and is
- *   drawn onto the committed canvas.  `committedPointCount` advances to `N`.
- *
- * - **`tipCanvas`** - cleared and redrawn every frame to contain only the
- *   last provisional segment `[committedPointCount-1 -> N-1]`.  Composited on
- *   top of `committedCanvas` at display time.
- */
-export const generateOrUpdateFreeDrawIncrementalCanvas = (
-  element: ExcalidrawFreeDrawElement,
-  elementsMap: NonDeletedSceneElementsMap,
-  zoom: Zoom,
-  renderConfig: StaticCanvasRenderConfig,
-  appState: StaticCanvasAppState | InteractiveCanvasAppState,
-): ExcalidrawElementWithCanvas | null => {
-  const scale = zoom.value;
-  const dpr = window.devicePixelRatio;
-  const padding = getFreedrawCanvasPadding(element);
-  const [x1, y1, x2, y2] = getElementAbsoluteCoords(element, elementsMap);
-  const containingFrameOpacity =
-    getContainingFrame(element, elementsMap)?.opacity || 100;
-  const N = element.points.length;
-
-  const prevInc = freedrawIncrementalCache.get(element);
-
-  const boundsExceeded =
-    prevInc !== undefined &&
-    (x1 < prevInc.canvasAllocX1 ||
-      y1 < prevInc.canvasAllocY1 ||
-      x2 > prevInc.canvasAllocX2 ||
-      y2 > prevInc.canvasAllocY2);
-
-  const needsAlloc =
-    prevInc === undefined ||
-    boundsExceeded ||
-    prevInc.scale !== scale ||
-    prevInc.theme !== appState.theme;
-
-  // ── Canvas allocation / reallocation ──────────────────────────────────────
-  let committedCanvas: HTMLCanvasElement;
-  let tipCanvas: HTMLCanvasElement;
-  let canvasOriginSceneX: number;
-  let canvasOriginSceneY: number;
-  let canvasScale: number;
-  // How many points to start the committed-canvas update from.  On a full
-  // regen this is 0; on a bounds-exceeded realloc it is the existing committed
-  // count so we only append the new segments.
-  let committedFromIndex: number;
-
-  if (needsAlloc) {
-    // Over-allocate proportionally to the current bounding box so fast large
-    // strokes trigger far fewer reallocations.
-    const overshootX = Math.max(
-      FREEDRAW_CANVAS_OVERSHOOT_MIN / scale,
-      (x2 - x1) * FREEDRAW_CANVAS_OVERSHOOT_FACTOR,
-    );
-    const overshootY = Math.max(
-      FREEDRAW_CANVAS_OVERSHOOT_MIN / scale,
-      (y2 - y1) * FREEDRAW_CANVAS_OVERSHOOT_FACTOR,
-    );
-    const allocX1 = x1 - overshootX;
-    const allocY1 = y1 - overshootY;
-    const allocX2 = x2 + overshootX;
-    const allocY2 = y2 + overshootY;
-
-    canvasOriginSceneX = allocX1 - padding / dpr;
-    canvasOriginSceneY = allocY1 - padding / dpr;
-
-    const rawW = (allocX2 - allocX1) * dpr + padding * 2;
-    const rawH = (allocY2 - allocY1) * dpr + padding * 2;
-
-    // Respect browser canvas size limits.
-    const AREA_LIMIT = 16777216;
-    const WIDTH_HEIGHT_LIMIT = 32767;
-    canvasScale = scale;
-    if (
-      rawW * canvasScale > WIDTH_HEIGHT_LIMIT ||
-      rawH * canvasScale > WIDTH_HEIGHT_LIMIT
-    ) {
-      canvasScale = Math.min(
-        WIDTH_HEIGHT_LIMIT / rawW,
-        WIDTH_HEIGHT_LIMIT / rawH,
-      );
-    }
-    if (rawW * rawH * canvasScale * canvasScale > AREA_LIMIT) {
-      canvasScale = Math.sqrt(AREA_LIMIT / (rawW * rawH));
-    }
-
-    const canvasWidth = Math.floor(rawW * canvasScale);
-    const canvasHeight = Math.floor(rawH * canvasScale);
-    if (!canvasWidth || !canvasHeight) {
-      return null;
-    }
-
-    committedCanvas = document.createElement("canvas");
-    committedCanvas.width = canvasWidth;
-    committedCanvas.height = canvasHeight;
-
-    tipCanvas = document.createElement("canvas");
-    tipCanvas.width = canvasWidth;
-    tipCanvas.height = canvasHeight;
-
-    if (
-      prevInc !== undefined &&
-      boundsExceeded &&
-      prevInc.scale === canvasScale &&
-      prevInc.theme === appState.theme
-    ) {
-      // Bounds grew: copy committed raster to new canvas at the correct offset
-      // and keep accumulating.  Tip will be redrawn below.
-      const copyX =
-        (prevInc.canvasOriginSceneX - canvasOriginSceneX) * dpr * canvasScale;
-      const copyY =
-        (prevInc.canvasOriginSceneY - canvasOriginSceneY) * dpr * canvasScale;
-      committedCanvas
-        .getContext("2d")!
-        .drawImage(prevInc.committedCanvas, copyX, copyY);
-      committedFromIndex = prevInc.committedPointCount;
-    } else {
-      // Full regeneration: zoom/theme change or first frame.
-      committedFromIndex = 0;
-    }
-
-    freedrawIncrementalCache.set(element, {
-      committedCanvas,
-      tipCanvas,
-      committedPointCount: committedFromIndex,
-      canvasOriginSceneX,
-      canvasOriginSceneY,
-      canvasAllocX1: allocX1,
-      canvasAllocY1: allocY1,
-      canvasAllocX2: allocX2,
-      canvasAllocY2: allocY2,
-      scale: canvasScale,
-      theme: appState.theme,
-    });
-  } else {
-    committedCanvas = prevInc.committedCanvas;
-    tipCanvas = prevInc.tipCanvas;
-    canvasOriginSceneX = prevInc.canvasOriginSceneX;
-    canvasOriginSceneY = prevInc.canvasOriginSceneY;
-    canvasScale = prevInc.scale;
-    committedFromIndex = prevInc.committedPointCount;
-  }
-
-  const inc = freedrawIncrementalCache.get(element)!;
-
-  // ── Helper: draw onto a canvas with the element's scene->pixel transform ──
-  const withElementContext = (
-    target: HTMLCanvasElement,
-    fn: (ctx: CanvasRenderingContext2D) => void,
-  ) => {
-    const ctx = target.getContext("2d")!;
-    const offsetX = (element.x - canvasOriginSceneX) * dpr * canvasScale;
-    const offsetY = (element.y - canvasOriginSceneY) * dpr * canvasScale;
-    ctx.save();
-    ctx.translate(offsetX, offsetY);
-    ctx.scale(dpr * canvasScale, dpr * canvasScale);
-    fn(ctx);
-    ctx.restore();
-  };
-
-  // ── Update committed canvas ───────────────────────────────────────────────
-  // With N points the last finalisable segment ends at N-2 (needs N-1 as
-  // right-hand neighbour for the tangent at N-2, and N-1 is always present).
-  // We draw from `committedFromIndex` up to (but not including) point N-1,
-  // so the committed canvas contains segments [0->1, ..., N-3->N-2].
-  const newCommittedCount = Math.max(1, N - 1);
-  if (committedFromIndex < newCommittedCount) {
-    withElementContext(committedCanvas, (ctx) => {
-      drawFreeDrawSegments(
-        element,
-        ctx,
-        renderConfig,
-        committedFromIndex,
-        newCommittedCount, // upToIndex - stop before the last provisional segment
-        canvasScale,
-      );
-    });
-    inc.committedPointCount = newCommittedCount;
-  }
-
-  // ── Redraw tip canvas ─────────────────────────────────────────────────────
-  // Always cleared and redrawn: contains the single provisional segment
-  // [committedPointCount-1 -> N-1] with a predicted-point ghost if available.
-  withElementContext(tipCanvas, (ctx) => {
-    ctx.clearRect(
-      -(element.x - canvasOriginSceneX),
-      -(element.y - canvasOriginSceneY),
-      tipCanvas.width / (dpr * canvasScale),
-      tipCanvas.height / (dpr * canvasScale),
-    );
-    drawFreeDrawSegments(
-      element,
-      ctx,
-      renderConfig,
-      inc.committedPointCount,
-      undefined, // draw to natural end (the tip segment)
-      canvasScale,
-    );
-  });
-
-  return {
-    element,
-    canvas: committedCanvas,
-    tipCanvas,
-    theme: appState.theme,
-    scale: canvasScale,
-    angle: element.angle,
-    zoomValue: zoom.value,
-    canvasOffsetX: 0,
-    canvasOffsetY: 0,
-    boundTextElementVersion: null,
-    imageCrop: null,
-    containingFrameOpacity,
-    boundTextCanvas: document.createElement("canvas"),
-    canvasOriginSceneX: inc.canvasOriginSceneX,
-    canvasOriginSceneY: inc.canvasOriginSceneY,
-  };
-};
-
-/**
- * Removes the incremental freedraw canvas for the given element.
- * Call this when a freedraw stroke is finalised so the next render
- * produces a fresh tight-bounds canvas instead of the over-allocated one.
- */
-export const invalidateFreeDrawIncrementalCanvas = (
-  element: ExcalidrawFreeDrawElement,
-) => {
-  freedrawIncrementalCache.delete(element);
-};

packages/element/src/shape.ts

@@ -1,4 +1,5 @@
 import { simplify } from "points-on-curve";
+import { getStroke } from "perfect-freehand";
 
 import {
   type GeometricShape,
@@ -27,12 +28,6 @@ import {
 
 import { RoughGenerator } from "roughjs/bin/generator";
 
-import type {
-  ElementShape,
-  ElementShapes,
-  SVGPathString,
-} from "@excalidraw/excalidraw/scene/types";
-
 import type { GlobalPoint } from "@excalidraw/math";
 
 import type { Mutable } from "@excalidraw/common/utility-types";
@@ -41,6 +36,11 @@ import type {
   AppState,
   EmbedsValidationStatus,
 } from "@excalidraw/excalidraw/types";
+import type {
+  ElementShape,
+  ElementShapes,
+  SVGPathString,
+} from "@excalidraw/excalidraw/scene/types";
 
 import { elementWithCanvasCache } from "./renderElement";
 
@@ -218,7 +218,9 @@ export const generateRoughOptions = (
     fillWeight: element.strokeWidth / 2,
     hachureGap: element.strokeWidth * 4,
     roughness: adjustRoughness(element),
-    stroke: applyDarkModeFilter(element.strokeColor, isDarkMode),
+    stroke: isDarkMode
+      ? applyDarkModeFilter(element.strokeColor)
+      : element.strokeColor,
     preserveVertices:
       continuousPath || element.roughness < ROUGHNESS.cartoonist,
   };
@@ -232,7 +234,9 @@ export const generateRoughOptions = (
       options.fillStyle = element.fillStyle;
       options.fill = isTransparent(element.backgroundColor)
         ? undefined
-        : applyDarkModeFilter(element.backgroundColor, isDarkMode);
+        : isDarkMode
+        ? applyDarkModeFilter(element.backgroundColor)
+        : element.backgroundColor;
       if (element.type === "ellipse") {
         options.curveFitting = 1;
       }
@@ -245,7 +249,9 @@ export const generateRoughOptions = (
         options.fill =
           element.backgroundColor === "transparent"
             ? undefined
-            : applyDarkModeFilter(element.backgroundColor, isDarkMode);
+            : isDarkMode
+            ? applyDarkModeFilter(element.backgroundColor)
+            : element.backgroundColor;
       }
       return options;
     }
@@ -380,11 +386,12 @@ const getArrowheadShapes = (
     return [];
   }
 
-  const strokeColor = applyDarkModeFilter(element.strokeColor, isDarkMode);
-  const backgroundFillColor = applyDarkModeFilter(
-    canvasBackgroundColor,
-    isDarkMode,
-  );
+  const strokeColor = isDarkMode
+    ? applyDarkModeFilter(element.strokeColor)
+    : element.strokeColor;
+  const backgroundFillColor = isDarkMode
+    ? applyDarkModeFilter(canvasBackgroundColor)
+    : canvasBackgroundColor;
   const cardinalityOneOrManyOffset = -0.25;
   const cardinalityZeroCircleScale = 0.8;
 
@@ -974,7 +981,7 @@ const _generateElementShape = (
       }
 
       // (2) stroke
-      shapes.push(...getFreeDrawCapsulePaths(element));
+      shapes.push(getFreeDrawSvgPath(element));
 
       return shapes;
     }
@@ -1164,351 +1171,64 @@ export const toggleLinePolygonState = (
 //                         freedraw shape helper
 // -----------------------------------------------------------------------------
 
-const FREEDRAW_DEFAULT_PRESSURE = 0.5;
-const FREEDRAW_BEZIER_SUBDIVIDE_TARGET_SPACING = 3;
-const FREEDRAW_PRESSURE_SMOOTHING_RADIUS = 6;
-
-// Round to 2 dp — sub-pixel accuracy at SVG 96 dpi
-const r2 = (v: number) => Math.round(v * 100) / 100;
-
-/**
- * SVG path `d` string for a single tapered capsule. Uses clockwise arcs
- * (sweep=1) so the geometry matches the canvas 2D
- * `arc(..., anticlockwise=false)` calls.
- */
-const freedrawTaperedCapsulePath = (
-  x0: number,
-  y0: number,
-  r0: number,
-  x1: number,
-  y1: number,
-  r1: number,
-): string => {
-  const dx = x1 - x0;
-  const dy = y1 - y0;
-  const len = Math.sqrt(dx * dx + dy * dy);
-  const r = Math.max(r0, r1);
-
-  if (len < r / 2) {
-    // Degenerate — full circle at midpoint via two clockwise 180° arcs.
-    const cx = r2((x0 + x1) / 2);
-    const cy = r2((y0 + y1) / 2);
-    const rr = r2(r);
-    return (
-      `M ${(cx - rr).toFixed(2)} ${cy.toFixed(2)} ` +
-      `A ${rr} ${rr} 0 1 1 ${(cx + rr).toFixed(2)} ${cy.toFixed(2)} ` +
-      `A ${rr} ${rr} 0 1 1 ${(cx - rr).toFixed(2)} ${cy.toFixed(2)} Z`
-    );
-  }
-
-  const px = -dy / len; // perpendicular unit x
-  const py = dx / len; // perpendicular unit y
-
-  // P0 +/- perp·r0  (start / back cap tangent points)
-  const b0x = r2(x0 + px * r0);
-  const b0y = r2(y0 + py * r0);
-  const b1x = r2(x0 - px * r0);
-  const b1y = r2(y0 - py * r0);
-  // P1 +/- perp·r1  (end / front cap tangent points)
-  const f0x = r2(x1 - px * r1);
-  const f0y = r2(y1 - py * r1);
-  const f1x = r2(x1 + px * r1);
-  const f1y = r2(y1 + py * r1);
-  const rr0 = r2(r0);
-  const rr1 = r2(r1);
-
-  // Back cap: clockwise 180° arc from (b0) to (b1) around P0.
-  // Front cap: clockwise 180° arc from (f0) to (f1) around P1.
-  return (
-    `M ${b0x.toFixed(2)} ${b0y.toFixed(2)} ` +
-    `A ${rr0.toFixed(2)} ${rr0.toFixed(2)} 0 1 1 ${b1x.toFixed(
-      2,
-    )} ${b1y.toFixed(2)} ` +
-    `L ${f0x.toFixed(2)} ${f0y.toFixed(2)} ` +
-    `A ${rr1.toFixed(2)} ${rr1.toFixed(2)} 0 1 1 ${f1x.toFixed(
-      2,
-    )} ${f1y.toFixed(2)} Z`
-  );
+// NOTE not cached (-> for SVG export)
+const getFreeDrawSvgPath = (element: ExcalidrawFreeDrawElement) => {
+  return getSvgPathFromStroke(
+    getFreedrawOutlinePoints(element),
+  ) as SVGPathString;
 };
 
-/**
- * Catmull-Rom tangent at points[i].Identical math to `getCatmullRomTangent`
- * in renderElement.ts (predictedPoint is not needed for finalised strokes).
- */
-const freedrawCatmullRomTangent = (
-  points: readonly (readonly [number, number])[],
-  i: number,
-): [number, number] => {
-  const N = points.length;
-  const cur = points[i];
-
-  let next: readonly [number, number];
-  if (i < N - 1) {
-    next = points[i + 1];
-  } else {
-    const prev2 = i > 0 ? points[i - 1] : cur;
-    next = [2 * cur[0] - prev2[0], 2 * cur[1] - prev2[1]];
-  }
-
-  let tx: number;
-  let ty: number;
-  if (i === 0) {
-    tx = (next[0] - cur[0]) * 0.5;
-    ty = (next[1] - cur[1]) * 0.5;
-  } else {
-    const prev = points[i - 1];
-    tx = (next[0] - prev[0]) * 0.5;
-    ty = (next[1] - prev[1]) * 0.5;
-  }
-
-  // Chord-length clamping (PCHIP-style).
-  const magSq = tx * tx + ty * ty;
-  if (magSq > 0) {
-    const dNx = next[0] - cur[0];
-    const dNy = next[1] - cur[1];
-    const chordNext = Math.sqrt(dNx * dNx + dNy * dNy);
-    let chordPrev = chordNext;
-    if (i > 0) {
-      const prev = points[i - 1];
-      const dPx = cur[0] - prev[0];
-      const dPy = cur[1] - prev[1];
-      chordPrev = Math.sqrt(dPx * dPx + dPy * dPy);
-    }
-    const maxMag = 3 * Math.min(chordNext, chordPrev);
-    const mag = Math.sqrt(magSq);
-    if (mag > maxMag) {
-      const s = maxMag / mag;
-      tx *= s;
-      ty *= s;
-    }
-  }
-
-  return [tx, ty];
-};
-
-/**
- * Triangular-kernel causal weighted pressure average (backward-only window).
- * When `simulatePressure` is true or pressures array is empty, returns the
- * default constant pressure so the geometry mirrors constant-pressure rendering.
- */
-const getFreeDrawSmoothedPressure = (
-  element: ExcalidrawFreeDrawElement,
-  i: number,
-): number => {
-  const { pressures } = element;
-  if (element.simulatePressure || pressures.length === 0) {
-    return FREEDRAW_DEFAULT_PRESSURE;
-  }
-  let sum = 0;
-  let totalWeight = 0;
-  for (let k = -FREEDRAW_PRESSURE_SMOOTHING_RADIUS; k <= 0; k++) {
-    const idx = i + k;
-    if (idx < 0) {
-      continue;
-    }
-    const p =
-      idx < pressures.length ? pressures[idx] : FREEDRAW_DEFAULT_PRESSURE;
-    const w = FREEDRAW_PRESSURE_SMOOTHING_RADIUS + 1 + k;
-    sum += p * w;
-    totalWeight += w;
-  }
-  return totalWeight > 0 ? sum / totalWeight : FREEDRAW_DEFAULT_PRESSURE;
-};
-
-/**
- * Returns one SVG path `d` string per tapered-capsule sub-segment for a
- * freedraw element, using the same Catmull-Rom Bezier subdivision and pressure
- * smoothing as the canvas renderer.
- */
-const getFreeDrawCapsulePaths = (
-  element: ExcalidrawFreeDrawElement,
-): SVGPathString[] => {
-  const { points } = element;
-  const N = points.length;
-  const baseRadius = (element.strokeWidth * 1.25) / 2;
-
-  const getSmoothedPressure = (i: number): number =>
-    getFreeDrawSmoothedPressure(element, i);
-
-  const paths: SVGPathString[] = [];
-
-  if (N === 1) {
-    // Single-point stroke — filled circle.
-    const rr = r2(baseRadius * getSmoothedPressure(0) * 2);
-    const cx = r2(points[0][0]);
-    const cy = r2(points[0][1]);
-    paths.push(
-      `M ${(cx - rr).toFixed(2)} ${cy.toFixed(2)} A ${rr} ${rr} 0 1 1 ${(
-        cx + rr
-      ).toFixed(2)} ${cy.toFixed(2)} A ${rr} ${rr} 0 1 1 ${(cx - rr).toFixed(
-        2,
-      )} ${cy.toFixed(2)} Z` as SVGPathString,
-    );
-    return paths;
-  }
-
-  for (let i = 1; i < N; i++) {
-    const p0 = points[i - 1];
-    const p1 = points[i];
-    const r0 = baseRadius * getSmoothedPressure(i - 1) * 2;
-    const r1 = baseRadius * getSmoothedPressure(i) * 2;
-
-    const t0 = freedrawCatmullRomTangent(points, i - 1);
-    const t1 = freedrawCatmullRomTangent(points, i);
-
-    // Bezier subdivision.
-    const segLen = Math.sqrt((p1[0] - p0[0]) ** 2 + (p1[1] - p0[1]) ** 2);
-    const nSubdiv = Math.max(
-      1,
-      Math.ceil(segLen / FREEDRAW_BEZIER_SUBDIVIDE_TARGET_SPACING),
-    );
-
-    const cp1x = p0[0] + t0[0] / 3;
-    const cp1y = p0[1] + t0[1] / 3;
-    const cp2x = p1[0] - t1[0] / 3;
-    const cp2y = p1[1] - t1[1] / 3;
-
-    let prevX = p0[0];
-    let prevY = p0[1];
-    let prevR = r0;
-
-    for (let k = 1; k <= nSubdiv; k++) {
-      const t = k / nSubdiv;
-      const mt = 1 - t;
-      const mt2 = mt * mt;
-      const t2 = t * t;
-      const mt3 = mt2 * mt;
-      const t3 = t2 * t;
-
-      const x =
-        mt3 * p0[0] + 3 * mt2 * t * cp1x + 3 * mt * t2 * cp2x + t3 * p1[0];
-      const y =
-        mt3 * p0[1] + 3 * mt2 * t * cp1y + 3 * mt * t2 * cp2y + t3 * p1[1];
-      const r = r0 + (r1 - r0) * t;
-
-      paths.push(
-        freedrawTaperedCapsulePath(
-          prevX,
-          prevY,
-          prevR,
-          x,
-          y,
-          r,
-        ) as SVGPathString,
-      );
-      prevX = x;
-      prevY = y;
-      prevR = r;
-    }
-  }
-
-  return paths;
-};
-
-/**
- * Generates an outline polygon for a freedraw element using the same
- * Catmull-Rom Bezier subdivision and pressure smoothing as the canvas renderer.
- * Returns `[x, y]` points in element-local coordinates that form a closed
- * polygon around the stroke (left side + right side reversed), suitable for
- * hit-testing and eraser intersection.
- */
 export const getFreedrawOutlinePoints = (
   element: ExcalidrawFreeDrawElement,
-): [number, number][] => {
-  const { points } = element;
-  const N = points.length;
-  const baseRadius = (element.strokeWidth * 1.25) / 2;
+) => {
+  // If input points are empty (should they ever be?) return a dot
+  const inputPoints = element.simulatePressure
+    ? element.points
+    : element.points.length
+    ? element.points.map(([x, y], i) => [x, y, element.pressures[i]])
+    : [[0, 0, 0.5]];
 
-  if (N === 0) {
-    return [];
+  return getStroke(inputPoints as number[][], {
+    simulatePressure: element.simulatePressure,
+    size: element.strokeWidth * 4.25,
+    thinning: 0.6,
+    smoothing: 0.5,
+    streamline: 0.5,
+    easing: (t) => Math.sin((t * Math.PI) / 2), // https://easings.net/#easeOutSine
+    last: true,
+  }) as [number, number][];
+};
+
+const med = (A: number[], B: number[]) => {
+  return [(A[0] + B[0]) / 2, (A[1] + B[1]) / 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 => {
+  if (!points.length) {
+    return "";
   }
 
-  const radius0 = baseRadius * getFreeDrawSmoothedPressure(element, 0) * 2;
+  const max = points.length - 1;
 
-  if (N === 1) {
-    // Single point case
-    const cx = points[0][0];
-    const cy = points[0][1];
-    const result: [number, number][] = [];
-    for (let i = 0; i < 8; i++) {
-      const angle = (i / 8) * Math.PI * 2;
-      result.push([
-        cx + Math.cos(angle) * radius0,
-        cy + Math.sin(angle) * radius0,
-      ]);
-    }
-    return result;
-  }
-
-  const leftPoints: [number, number][] = [];
-  const rightPoints: [number, number][] = [];
-
-  for (let i = 1; i < N; i++) {
-    const p0 = points[i - 1];
-    const p1 = points[i];
-    const r0 = baseRadius * getFreeDrawSmoothedPressure(element, i - 1) * 2;
-    const r1 = baseRadius * getFreeDrawSmoothedPressure(element, i) * 2;
-
-    const t0 = freedrawCatmullRomTangent(points, i - 1);
-    const t1 = freedrawCatmullRomTangent(points, i);
-
-    const segLen = Math.sqrt((p1[0] - p0[0]) ** 2 + (p1[1] - p0[1]) ** 2);
-    const nSubdiv = Math.max(
-      1,
-      Math.ceil(segLen / FREEDRAW_BEZIER_SUBDIVIDE_TARGET_SPACING),
-    );
-
-    const cp1x = p0[0] + t0[0] / 3;
-    const cp1y = p0[1] + t0[1] / 3;
-    const cp2x = p1[0] - t1[0] / 3;
-    const cp2y = p1[1] - t1[1] / 3;
-
-    // Include the start point of the first segment.
-    const kStart = i === 1 ? 0 : 1;
-
-    for (let k = kStart; k <= nSubdiv; k++) {
-      const tParam = k / nSubdiv;
-      const mt = 1 - tParam;
-      const mt2 = mt * mt;
-      const t2 = tParam * tParam;
-      const mt3 = mt2 * mt;
-      const t3 = t2 * tParam;
-
-      const x =
-        mt3 * p0[0] + 3 * mt2 * tParam * cp1x + 3 * mt * t2 * cp2x + t3 * p1[0];
-      const y =
-        mt3 * p0[1] + 3 * mt2 * tParam * cp1y + 3 * mt * t2 * cp2y + t3 * p1[1];
-
-      // Bezier first derivative for the tangent direction.
-      const dtx =
-        3 *
-        (mt2 * (cp1x - p0[0]) +
-          2 * mt * tParam * (cp2x - cp1x) +
-          t2 * (p1[0] - cp2x));
-      const dty =
-        3 *
-        (mt2 * (cp1y - p0[1]) +
-          2 * mt * tParam * (cp2y - cp1y) +
-          t2 * (p1[1] - cp2y));
-
-      const len = Math.sqrt(dtx * dtx + dty * dty);
-      if (len === 0) {
-        continue;
-      }
-
-      // Perpendicular (left = +, right = −).
-      const px = -dty / len;
-      const py = dtx / len;
-
-      const r = r0 + (r1 - r0) * tParam;
-
-      leftPoints.push([x + px * r, y + py * r]);
-      rightPoints.push([x - px * r, y - py * r]);
-    }
-  }
-
-  // Closed polygon: left side (start -> end) + right side (end -> start).
-  return [...leftPoints, ...rightPoints.reverse()];
+  return points
+    .reduce(
+      (acc, point, i, arr) => {
+        if (i === max) {
+          acc.push(point, med(point, arr[0]), "L", arr[0], "Z");
+        } else {
+          acc.push(point, med(point, arr[i + 1]));
+        }
+        return acc;
+      },
+      ["M", points[0], "Q"],
+    )
+    .join(" ")
+    .replace(TO_FIXED_PRECISION, "$1");
 };
 
 // -----------------------------------------------------------------------------

packages/excalidraw/actions/actionFinalize.tsx

@@ -14,8 +14,6 @@ import {
   isLineElement,
 } from "@excalidraw/element";
 
-import { invalidateFreeDrawIncrementalCanvas } from "@excalidraw/element";
-
 import {
   KEYS,
   arrayToMap,
@@ -29,7 +27,7 @@ import { isInvisiblySmallElement } from "@excalidraw/element";
 
 import { CaptureUpdateAction } from "@excalidraw/element";
 
-import type { GlobalPoint, LocalPoint } from "@excalidraw/math";
+import type { LocalPoint } from "@excalidraw/math";
 import type {
   ExcalidrawElement,
   ExcalidrawLinearElement,
@@ -95,32 +93,40 @@ export const actionFinalize = register<FormData>({
             ? [element.points.length - 1] // New arrow creation
             : appState.selectedLinearElement.selectedPointsIndices;
 
+        const angleLocked = shouldRotateWithDiscreteAngle(event);
+        const effectiveGridSize = event[KEYS.CTRL_OR_CMD]
+          ? null
+          : app.getEffectiveGridSize();
+
         const draggedPoints: PointsPositionUpdates =
           selectedPointsIndices.reduce((map, index) => {
             map.set(index, {
-              point: LinearElementEditor.pointFromAbsoluteCoords(
-                element,
-                pointFrom<GlobalPoint>(
-                  sceneCoords.x - linearElementEditor.pointerOffset.x,
-                  sceneCoords.y - linearElementEditor.pointerOffset.y,
-                ),
-                elementsMap,
-              ),
+              point: angleLocked
+                ? element.points[index]
+                : LinearElementEditor.createPointAt(
+                    element,
+                    elementsMap,
+                    sceneCoords.x - linearElementEditor.pointerOffset.x,
+                    sceneCoords.y - linearElementEditor.pointerOffset.y,
+                    effectiveGridSize,
+                  ),
             });
 
             return map;
           }, new Map()) ?? new Map();
+
         bindOrUnbindBindingElement(
           element,
           draggedPoints,
-          sceneCoords.x - linearElementEditor.pointerOffset.x,
-          sceneCoords.y - linearElementEditor.pointerOffset.y,
+          sceneCoords.x,
+          sceneCoords.y,
           scene,
           appState,
           {
             newArrow,
             altKey: event.altKey,
-            angleLocked: shouldRotateWithDiscreteAngle(event),
+            angleLocked,
+            gridSize: app.getEffectiveGridSize(),
           },
         );
       } else if (isLineElement(element)) {
@@ -315,10 +321,6 @@ export const actionFinalize = register<FormData>({
         }
       : selectedLinearElement;
 
-    if (element && isFreeDrawElement(element)) {
-      invalidateFreeDrawIncrementalCanvas(element);
-    }
-
     return {
       elements: newElements,
       appState: {

packages/excalidraw/actions/actionProperties.tsx

@@ -1,5 +1,3 @@
-import clsx from "clsx";
-
 import { pointFrom } from "@excalidraw/math";
 
 import { useEffect, useMemo, useRef, useState } from "react";
@@ -49,7 +47,6 @@ import {
   isArrowElement,
   isBoundToContainer,
   isElbowArrow,
-  isFreeDrawElement,
   isLinearElement,
   isLineElement,
   isTextElement,
@@ -134,8 +131,6 @@ import {
   ArrowheadCardinalityOneOrManyIcon,
   ArrowheadCardinalityZeroOrManyIcon,
   ArrowheadCardinalityZeroOrOneIcon,
-  FreedrawPressureConstantIcon,
-  FreedrawPressureSensitiveIcon,
 } from "../components/icons";
 
 import { Fonts } from "../fonts";
@@ -2046,89 +2041,3 @@ export const actionChangeArrowType = register<keyof typeof ARROW_TYPE>({
     );
   },
 });
-
-export const actionChangeStrokeShape = register<boolean>({
-  name: "changeStrokeShape",
-  label: "labels.strokeShape",
-  trackEvent: false,
-  perform: (elements, appState, value) => {
-    return {
-      elements: changeProperty(elements, appState, (el) => {
-        if (isFreeDrawElement(el)) {
-          return newElementWith(el, {
-            simulatePressure: value,
-          });
-        }
-        return el;
-      }),
-      appState: { ...appState, currentItemFreedrawConstantPressure: value },
-      captureUpdate: CaptureUpdateAction.IMMEDIATELY,
-    };
-  },
-  PanelComponent: ({ elements, appState, updateData, app }) => {
-    const { isCompact } = getStylesPanelInfo(app);
-
-    const currentValue = getFormValue(
-      elements,
-      app,
-      (element) => {
-        if (isFreeDrawElement(element)) {
-          return element.simulatePressure;
-        }
-        return null;
-      },
-      (element) => isFreeDrawElement(element),
-      (hasSelection) =>
-        hasSelection ? null : appState.currentItemFreedrawConstantPressure,
-    );
-
-    if (isCompact) {
-      const isConstantPressure = currentValue !== false;
-      return (
-        <button
-          type="button"
-          className={clsx("compact-action-button", {
-            active: !isConstantPressure,
-          })}
-          title={
-            isConstantPressure
-              ? t("labels.strokeShape_constant")
-              : t("labels.strokeShape_pressure")
-          }
-          onClick={() => updateData(!isConstantPressure)}
-        >
-          {isConstantPressure
-            ? FreedrawPressureConstantIcon
-            : FreedrawPressureSensitiveIcon}
-        </button>
-      );
-    }
-
-    return (
-      <fieldset>
-        <legend>{t("labels.strokeShape")}</legend>
-        <div className="buttonList">
-          <RadioSelection
-            group="stroke-shape"
-            options={[
-              {
-                value: true,
-                text: t("labels.strokeShape_constant"),
-                icon: FreedrawPressureConstantIcon,
-                testId: "strokeShape-constant",
-              },
-              {
-                value: false,
-                text: t("labels.strokeShape_pressure"),
-                icon: FreedrawPressureSensitiveIcon,
-                testId: "strokeShape-pressure",
-              },
-            ]}
-            value={currentValue}
-            onChange={(value) => updateData(value)}
-          />
-        </div>
-      </fieldset>
-    );
-  },
-});

packages/excalidraw/actions/index.ts

@@ -19,7 +19,6 @@ export {
   actionChangeTextAlign,
   actionChangeVerticalAlign,
   actionChangeArrowProperties,
-  actionChangeStrokeShape,
 } from "./actionProperties";
 
 export {

packages/excalidraw/appState.ts

@@ -40,7 +40,6 @@ export const getDefaultAppState = (): Omit<
     currentItemArrowType: ARROW_TYPE.round,
     currentItemStrokeStyle: DEFAULT_ELEMENT_PROPS.strokeStyle,
     currentItemStrokeWidth: DEFAULT_ELEMENT_PROPS.strokeWidth,
-    currentItemFreedrawConstantPressure: true,
     currentItemTextAlign: DEFAULT_TEXT_ALIGN,
     currentHoveredFontFamily: null,
     cursorButton: "up",
@@ -172,11 +171,6 @@ const APP_STATE_STORAGE_CONF = (<
   currentItemStrokeColor: { browser: true, export: false, server: false },
   currentItemStrokeStyle: { browser: true, export: false, server: false },
   currentItemStrokeWidth: { browser: true, export: false, server: false },
-  currentItemFreedrawConstantPressure: {
-    browser: true,
-    export: false,
-    server: false,
-  },
   currentItemTextAlign: { browser: true, export: false, server: false },
   currentHoveredFontFamily: { browser: false, export: false, server: false },
   cursorButton: { browser: true, export: false, server: false },

packages/excalidraw/components/Actions.tsx

@@ -834,14 +834,6 @@ export const CompactShapeActions = ({
         container={container}
       />
 
-      {/* Stroke Shape Toggle (freedraw only) */}
-      {(appState.activeTool.type === "freedraw" ||
-        targetElements.some((element) => element.type === "freedraw")) && (
-        <div className="compact-action-item">
-          {renderAction("changeStrokeShape")}
-        </div>
-      )}
-
       <CombinedArrowProperties
         appState={appState}
         renderAction={renderAction}
@@ -977,13 +969,6 @@ export const MobileShapeActions = ({
           targetElements={targetElements}
           container={container}
         />
-        {/* Stroke Shape Toggle (freedraw only) */}
-        {(appState.activeTool.type === "freedraw" ||
-          targetElements.some((element) => element.type === "freedraw")) && (
-          <div className="compact-action-item">
-            {renderAction("changeStrokeShape")}
-          </div>
-        )}
         {/* Combined Arrow Properties */}
         <CombinedArrowProperties
           appState={appState}

packages/excalidraw/components/App.tsx

@@ -1995,10 +1995,9 @@ class App extends React.Component<AppProps, AppState> {
               }
             }}
             style={{
-              background: applyDarkModeFilter(
-                this.state.viewBackgroundColor,
-                isDarkTheme,
-              ),
+              background: isDarkTheme
+                ? applyDarkModeFilter(this.state.viewBackgroundColor)
+                : this.state.viewBackgroundColor,
               zIndex: 2,
               border: "none",
               display: "block",
@@ -7264,14 +7263,16 @@ class App extends React.Component<AppProps, AppState> {
       return;
     }
 
-    if (this.state.activeTool.type === "arrow") {
+    // Set suggested binding if we're hovering with an arrow tool
+    // and not dragging out a new element
+    if (this.state.activeTool.type === "arrow" && !this.state.newElement) {
+      const scenePointer = pointFrom<GlobalPoint>(scenePointerX, scenePointerY);
       const hit = getHoveredElementForBinding(
-        pointFrom<GlobalPoint>(scenePointerX, scenePointerY),
+        scenePointer,
         this.scene.getNonDeletedElements(),
         this.scene.getNonDeletedElementsMap(),
         maxBindingDistance_simple(this.state.zoom),
       );
-      const scenePointer = pointFrom<GlobalPoint>(scenePointerX, scenePointerY);
       const elementsMap = this.scene.getNonDeletedElementsMap();
       if (hit && !isPointInElement(scenePointer, hit, elementsMap)) {
         this.setState({
@@ -9024,7 +9025,7 @@ class App extends React.Component<AppProps, AppState> {
       y: gridY,
     });
 
-    const simulatePressure = this.state.currentItemFreedrawConstantPressure;
+    const simulatePressure = event.pressure === 0.5;
 
     const element = newFreeDrawElement({
       type: elementType,
@@ -9042,7 +9043,7 @@ class App extends React.Component<AppProps, AppState> {
       locked: false,
       frameId: topLayerFrame ? topLayerFrame.id : null,
       points: [pointFrom<LocalPoint>(0, 0)],
-      pressures: [event.pressure],
+      pressures: simulatePressure ? [] : [event.pressure],
     });
 
     this.insertNewElement(element);
@@ -9671,61 +9672,10 @@ class App extends React.Component<AppProps, AppState> {
     });
   }
 
-  /**
-   * Returns the timestamp of a pointer event, in milliseconds.
-   * Extracted as a method so tests can spy on it and return a fixed value,
-   * making the One Euro Filter in the freedraw handler deterministic.
-   */
-  protected getPointerEventTimestamp(
-    ev: Pick<PointerEvent, "timeStamp">,
-  ): number {
-    return ev.timeStamp;
-  }
-
   private onPointerMoveFromPointerDownHandler(
     pointerDownState: PointerDownState,
   ) {
-    // Per-stroke One Euro Filter state for mouse freedraw smoothing.
-    // Reference: Casiez et al. 2012 "1€ Filter: A Simple Speed-based Low-pass
-    // Filter for Noisy Input in Interactive Systems".
-    //
-    // The filter adapts its EMA alpha to the current speed of the pointer:
-    //   slow movement  → low cutoff → heavy smoothing (removes jitter)
-    //   fast movement  → high cutoff → near-raw tracking (minimal lag)
-    //
-    // State variables (reset at stroke start via null sentinel):
-    let emaX: number | null = null; // smoothed position x
-    let emaY: number | null = null; // smoothed position y
-    let emaDx = 0; // smoothed derivative x
-    let emaDy = 0; // smoothed derivative y
-    let prevRawX: number | null = null; // previous raw x for derivative
-    let prevRawY: number | null = null;
-    let prevTs: number | null = null; // previous event timestamp (ms)
-
-    // Pen pressure warmup: the first few samples from a pen digitizer are
-    // unreliable (often spike to ~0.5).  We apply an EMA whose alpha ramps
-    // from PEN_PRESSURE_INITIAL_ALPHA up to 1 over PEN_PRESSURE_WARMUP_SAMPLES
-    // so the stroke gradually eases from heavy smoothing into raw pressure.
-    let penPressureEma: number | null = null;
-    let penPressureSampleCount = 0;
-    const PEN_PRESSURE_WARMUP_SAMPLES = 20;
-    const PEN_PRESSURE_INITIAL_ALPHA = 0.1;
-
-    // Tuning constants:
-    //   MIN_CUTOFF  – cutoff frequency (Hz) when speed ≈ 0; smaller = more smoothing
-    //   BETA        – rate at which cutoff grows with speed; larger = quicker adaptation
-    //   D_CUTOFF    – fixed cutoff for the derivative pre-filter
-    const MIN_CUTOFF = 0.5;
-    const BETA = 0.01;
-    const D_CUTOFF = 2.0;
-
-    /** Compute EMA alpha from cutoff frequency (Hz) and timestep (seconds). */
-    const emaAlpha = (cutoff: number, dt: number): number => {
-      const tau = 1 / (2 * Math.PI * cutoff);
-      return 1 / (1 + tau / dt);
-    };
-
-    const handler = (event: PointerEvent) => {
+    return withBatchedUpdatesThrottled((event: PointerEvent) => {
       if (this.state.openDialog?.name === "elementLinkSelector") {
         return;
       }
@@ -10417,98 +10367,23 @@ class App extends React.Component<AppProps, AppState> {
         }
 
         if (newElement.type === "freedraw") {
-          const coalescedEvents: PointerEvent[] =
-            event.getCoalescedEvents?.() ?? [];
-          const allEvents =
-            coalescedEvents.length > 0 ? coalescedEvents : [event];
-          const newPoints: LocalPoint[] = [];
-          const newPressures: number[] = [];
+          const points = newElement.points;
+          const dx = pointerCoords.x - newElement.x;
+          const dy = pointerCoords.y - newElement.y;
 
-          let lastPoint =
-            newElement.points.length > 0
-              ? newElement.points[newElement.points.length - 1]
-              : null;
+          const lastPoint = points.length > 0 && points[points.length - 1];
+          const discardPoint =
+            lastPoint && lastPoint[0] === dx && lastPoint[1] === dy;
 
-          for (const ev of allEvents) {
-            const coords = viewportCoordsToSceneCoords(ev, this.state);
-            const rawDx = coords.x - newElement.x;
-            const rawDy = coords.y - newElement.y;
-            let dx = rawDx;
-            let dy = rawDy;
-
-            if (event.pointerType === "mouse") {
-              // One Euro Filter: speed-adaptive low-pass for mouse events.
-              const evTs = this.getPointerEventTimestamp(ev);
-              const dt = Math.max(
-                prevTs !== null ? (evTs - prevTs) / 1000 : 1 / 60,
-                0.001,
-              ); // seconds
-
-              // 1. Smooth the derivative (fixed D_CUTOFF pre-filter).
-              const alphaD = emaAlpha(D_CUTOFF, dt);
-              const rawDxDt = prevRawX !== null ? (rawDx - prevRawX) / dt : 0;
-              const rawDyDt = prevRawY !== null ? (rawDy - prevRawY) / dt : 0;
-              emaDx = alphaD * rawDxDt + (1 - alphaD) * emaDx;
-              emaDy = alphaD * rawDyDt + (1 - alphaD) * emaDy;
-
-              // 2. Adaptive cutoff: higher speed → higher cutoff → less lag.
-              // Normalize to screen-space pixels/sec so BETA behaves the same
-              // regardless of zoom level (scene units are 1/zoom px at high zoom).
-              const speed =
-                Math.sqrt(emaDx * emaDx + emaDy * emaDy) *
-                this.state.zoom.value;
-              const cutoff = MIN_CUTOFF + BETA * speed;
-              const alphaP = emaAlpha(cutoff, dt);
-
-              // 3. Smooth position with adaptive alpha.
-              emaX =
-                emaX === null ? rawDx : alphaP * rawDx + (1 - alphaP) * emaX;
-              emaY =
-                emaY === null ? rawDy : alphaP * rawDy + (1 - alphaP) * emaY;
-
-              prevRawX = rawDx;
-              prevRawY = rawDy;
-              prevTs = evTs;
-
-              dx = emaX;
-              dy = emaY;
-            }
-
-            if (!lastPoint || lastPoint[0] !== dx || lastPoint[1] !== dy) {
-              const pt = pointFrom<LocalPoint>(dx, dy);
-              newPoints.push(pt);
-
-              let pressure = ev.pressure;
-              if (event.pointerType === "pen") {
-                // Gradually ease from aggressive smoothing into raw pressure to
-                // suppress the unreliable spike at the start of a pen stroke.
-                const progress = Math.min(
-                  1,
-                  penPressureSampleCount / PEN_PRESSURE_WARMUP_SAMPLES,
-                );
-                const alpha =
-                  PEN_PRESSURE_INITIAL_ALPHA +
-                  progress * (1 - PEN_PRESSURE_INITIAL_ALPHA);
-                penPressureEma =
-                  penPressureEma === null
-                    ? pressure
-                    : alpha * pressure + (1 - alpha) * penPressureEma;
-                pressure = penPressureEma;
-                penPressureSampleCount++;
-              }
-
-              newPressures.push(pressure);
-              lastPoint = pt;
-            }
-          }
-
-          if (newPoints.length > 0) {
-            const pressures = [...newElement.pressures, ...newPressures];
+          if (!discardPoint) {
+            const pressures = newElement.simulatePressure
+              ? newElement.pressures
+              : [...newElement.pressures, event.pressure];
 
             this.scene.mutateElement(
               newElement,
               {
-                points: [...newElement.points, ...newPoints],
+                points: [...points, pointFrom<LocalPoint>(dx, dy)],
                 pressures,
               },
               {
@@ -10684,23 +10559,7 @@ class App extends React.Component<AppProps, AppState> {
           });
         }
       }
-    };
-
-    // For freedraw, bypass RAF throttling so every pointer event is processed
-    // synchronously. This preserves coalesced pointer events and eliminates
-    // stroke lag on high-frequency stylus / pointer input.
-    if (this.state.activeTool.type === "freedraw") {
-      const immediate = withBatchedUpdates(handler);
-      const result = immediate as typeof immediate & {
-        flush(): void;
-        cancel(): void;
-      };
-      result.flush = () => {};
-      result.cancel = () => {};
-      return result;
-    }
-
-    return withBatchedUpdatesThrottled(handler);
+    });
   }
 
   // Returns whether the pointer move happened over either scrollbar
@@ -10991,7 +10850,9 @@ class App extends React.Component<AppProps, AppState> {
           dx += 0.0001;
         }
 
-        const pressures = [...newElement.pressures, childEvent.pressure];
+        const pressures = newElement.simulatePressure
+          ? []
+          : [...newElement.pressures, childEvent.pressure];
 
         this.scene.mutateElement(newElement, {
           points: [...points, pointFrom<LocalPoint>(dx, dy)],

packages/excalidraw/components/canvases/InteractiveCanvas.tsx

@@ -253,6 +253,7 @@ const getRelevantAppStateProps = (
   newElement: appState.newElement,
   isBindingEnabled: appState.isBindingEnabled,
   isMidpointSnappingEnabled: appState.isMidpointSnappingEnabled,
+  gridModeEnabled: appState.gridModeEnabled,
   suggestedBinding: appState.suggestedBinding,
   isRotating: appState.isRotating,
   elementsToHighlight: appState.elementsToHighlight,

packages/excalidraw/components/icons.tsx

@@ -1186,26 +1186,6 @@ export const StrokeWidthExtraBoldIcon = createIcon(
   modifiedTablerIconProps,
 );
 
-export const FreedrawPressureConstantIcon = createIcon(
-  <path
-    d="M4 10h12"
-    stroke="currentColor"
-    strokeWidth="3"
-    strokeLinecap="round"
-    strokeLinejoin="round"
-  />,
-  modifiedTablerIconProps,
-);
-
-export const FreedrawPressureSensitiveIcon = createIcon(
-  <path
-    d="M4 10C6 9.5 10 8 16 7L16 13C10 12 6 10.5 4 10Z"
-    fill="currentColor"
-    stroke="none"
-  />,
-  modifiedTablerIconProps,
-);
-
 export const StrokeStyleSolidIcon = React.memo(({ theme }: { theme: Theme }) =>
   createIcon(
     <path

packages/excalidraw/index.tsx

@@ -7,7 +7,6 @@ import React, {
 } from "react";
 
 import {
-  applyDarkModeFilter,
   DEFAULT_IMAGE_OPTIONS,
   DEFAULT_UI_OPTIONS,
   isShallowEqual,
@@ -451,5 +450,3 @@ export function useExcalidrawStateValue(
 // -----------------------------------------------------------------------------
 
 export { _useOnAppStateChange as useOnExcalidrawStateChange };
-
-export { applyDarkModeFilter };

packages/excalidraw/locales/en.json

@@ -30,9 +30,6 @@
     "changeBackground": "Change background color",
     "fill": "Fill",
     "strokeWidth": "Stroke width",
-    "strokeShape": "Pressure",
-    "strokeShape_constant": "Constant pressure",
-    "strokeShape_pressure": "Pressure-sensitive",
     "strokeStyle": "Stroke style",
     "strokeStyle_solid": "Solid",
     "strokeStyle_dashed": "Dashed",

packages/excalidraw/package.json

@@ -103,6 +103,7 @@
     "lodash.throttle": "4.1.1",
     "nanoid": "3.3.3",
     "pako": "2.0.3",
+    "perfect-freehand": "1.2.0",
     "pica": "7.1.1",
     "png-chunk-text": "1.0.0",
     "png-chunks-encode": "1.0.0",

packages/excalidraw/renderer/helpers.ts

@@ -62,10 +62,10 @@ export const bootstrapCanvas = ({
       context.clearRect(0, 0, normalizedWidth, normalizedHeight);
     }
     context.save();
-    context.fillStyle = applyDarkModeFilter(
-      viewBackgroundColor,
-      theme === THEME.DARK,
-    );
+    context.fillStyle =
+      theme === THEME.DARK
+        ? applyDarkModeFilter(viewBackgroundColor)
+        : viewBackgroundColor;
     context.fillRect(0, 0, normalizedWidth, normalizedHeight);
     context.restore();
   } else {

packages/excalidraw/renderer/interactiveScene.ts

@@ -17,6 +17,7 @@ import {
   FRAME_STYLE,
   getFeatureFlag,
   invariant,
+  shouldRotateWithDiscreteAngle,
   THEME,
 } from "@excalidraw/common";
 
@@ -229,6 +230,7 @@ const renderBindingHighlightForBindableElement_simple = (
   elementsMap: ElementsMap,
   appState: InteractiveCanvasAppState,
   pointerCoords: GlobalPoint | null,
+  angleLocked = false,
 ) => {
   const enclosingFrame =
     suggestedBinding.element.frameId &&
@@ -415,6 +417,8 @@ const renderBindingHighlightForBindableElement_simple = (
 
   if (
     appState.isMidpointSnappingEnabled &&
+    !appState.gridModeEnabled &&
+    !angleLocked &&
     (isFrameLikeElement(suggestedBinding.element) ||
       isBindableElement(suggestedBinding.element))
   ) {
@@ -807,7 +811,12 @@ const renderBindingHighlightForBindableElement_complex = (
 
     context.restore();
 
-    if (appState.isMidpointSnappingEnabled) {
+    if (
+      appState.isMidpointSnappingEnabled &&
+      !appState.gridModeEnabled &&
+      (!app.lastPointerMoveEvent ||
+        !shouldRotateWithDiscreteAngle(app.lastPointerMoveEvent))
+    ) {
       // Draw midpoint indicators
       context.save();
       context.translate(
@@ -920,12 +929,16 @@ const renderBindingHighlightForBindableElement = (
         app.lastPointerMoveCoords.y,
       )
     : null;
+  const angleLocked =
+    !!app.lastPointerMoveEvent &&
+    shouldRotateWithDiscreteAngle(app.lastPointerMoveEvent);
   renderBindingHighlightForBindableElement_simple(
     context,
     suggestedBinding,
     allElementsMap,
     appState,
     pointerCoords,
+    angleLocked,
   );
   context.restore();
 };

packages/excalidraw/renderer/staticSvgScene.ts

@@ -377,27 +377,18 @@ const renderElementToSvg = (
     case "freedraw": {
       const wrapper = svgRoot.ownerDocument.createElementNS(SVG_NS, "g");
 
-      // Set fill once on the group so all capsule paths inherit it
-      // instead of repeating the attribute on every child element.
-      wrapper.setAttribute(
-        "fill",
-        renderConfig.theme === THEME.DARK
-          ? applyDarkModeFilter(element.strokeColor)
-          : element.strokeColor,
-      );
-
       const shapes = ShapeCache.generateElementShape(element, renderConfig);
       // always ordered as [background, stroke]
       for (const shape of shapes) {
         if (typeof shape === "string") {
-          // stroke (SVGPathString) — fill inherited from wrapper <g>
+          // stroke (SVGPathString)
+
           const path = svgRoot.ownerDocument.createElementNS(SVG_NS, "path");
           path.setAttribute(
             "fill",
-            applyDarkModeFilter(
-              element.strokeColor,
-              renderConfig.theme === THEME.DARK,
-            ),
+            renderConfig.theme === THEME.DARK
+              ? applyDarkModeFilter(element.strokeColor)
+              : element.strokeColor,
           );
           path.setAttribute("d", shape);
           wrapper.appendChild(path);
@@ -630,10 +621,9 @@ const renderElementToSvg = (
         rect.setAttribute("fill", "none");
         rect.setAttribute(
           "stroke",
-          applyDarkModeFilter(
-            FRAME_STYLE.strokeColor,
-            renderConfig.theme === THEME.DARK,
-          ),
+          renderConfig.theme === THEME.DARK
+            ? applyDarkModeFilter(FRAME_STYLE.strokeColor)
+            : FRAME_STYLE.strokeColor,
         );
         rect.setAttribute("stroke-width", FRAME_STYLE.strokeWidth.toString());
 
@@ -687,10 +677,9 @@ const renderElementToSvg = (
           text.setAttribute("font-size", `${element.fontSize}px`);
           text.setAttribute(
             "fill",
-            applyDarkModeFilter(
-              element.strokeColor,
-              renderConfig.theme === THEME.DARK,
-            ),
+            renderConfig.theme === THEME.DARK
+              ? applyDarkModeFilter(element.strokeColor)
+              : element.strokeColor,
           );
           text.setAttribute("text-anchor", textAnchor);
           text.setAttribute("style", "white-space: pre;");

packages/excalidraw/scene/export.ts

@@ -459,7 +459,9 @@ export const exportToSvg = async (
     rect.setAttribute("height", `${height}`);
     rect.setAttribute(
       "fill",
-      applyDarkModeFilter(viewBackgroundColor, exportWithDarkMode),
+      exportWithDarkMode
+        ? applyDarkModeFilter(viewBackgroundColor)
+        : viewBackgroundColor,
     );
     svgRoot.appendChild(rect);
   }

packages/excalidraw/tests/__snapshots__/contextmenu.test.tsx.snap

@@ -898,7 +898,6 @@ exports[`contextMenu element > right-clicking on a group should select whole gro
   "currentItemFillStyle": "solid",
   "currentItemFontFamily": 5,
   "currentItemFontSize": 20,
-  "currentItemFreedrawConstantPressure": true,
   "currentItemOpacity": 100,
   "currentItemRoughness": 1,
   "currentItemRoundness": "sharp",
@@ -1098,7 +1097,6 @@ exports[`contextMenu element > selecting 'Add to library' in context menu adds e
   "currentItemFillStyle": "solid",
   "currentItemFontFamily": 5,
   "currentItemFontSize": 20,
-  "currentItemFreedrawConstantPressure": true,
   "currentItemOpacity": 100,
   "currentItemRoughness": 1,
   "currentItemRoundness": "sharp",
@@ -1313,7 +1311,6 @@ exports[`contextMenu element > selecting 'Bring forward' in context menu brings
   "currentItemFillStyle": "solid",
   "currentItemFontFamily": 5,
   "currentItemFontSize": 20,
-  "currentItemFreedrawConstantPressure": true,
   "currentItemOpacity": 100,
   "currentItemRoughness": 1,
   "currentItemRoundness": "sharp",
@@ -1645,7 +1642,6 @@ exports[`contextMenu element > selecting 'Bring to front' in context menu brings
   "currentItemFillStyle": "solid",
   "currentItemFontFamily": 5,
   "currentItemFontSize": 20,
-  "currentItemFreedrawConstantPressure": true,
   "currentItemOpacity": 100,
   "currentItemRoughness": 1,
   "currentItemRoundness": "sharp",
@@ -1977,7 +1973,6 @@ exports[`contextMenu element > selecting 'Copy styles' in context menu copies st
   "currentItemFillStyle": "solid",
   "currentItemFontFamily": 5,
   "currentItemFontSize": 20,
-  "currentItemFreedrawConstantPressure": true,
   "currentItemOpacity": 100,
   "currentItemRoughness": 1,
   "currentItemRoundness": "sharp",
@@ -2192,7 +2187,6 @@ exports[`contextMenu element > selecting 'Delete' in context menu deletes elemen
   "currentItemFillStyle": "solid",
   "currentItemFontFamily": 5,
   "currentItemFontSize": 20,
-  "currentItemFreedrawConstantPressure": true,
   "currentItemOpacity": 100,
   "currentItemRoughness": 1,
   "currentItemRoundness": "sharp",
@@ -2434,7 +2428,6 @@ exports[`contextMenu element > selecting 'Duplicate' in context menu duplicates
   "currentItemFillStyle": "solid",
   "currentItemFontFamily": 5,
   "currentItemFontSize": 20,
-  "currentItemFreedrawConstantPressure": true,
   "currentItemOpacity": 100,
   "currentItemRoughness": 1,
   "currentItemRoundness": "sharp",
@@ -2733,7 +2726,6 @@ exports[`contextMenu element > selecting 'Group selection' in context menu group
   "currentItemFillStyle": "solid",
   "currentItemFontFamily": 5,
   "currentItemFontSize": 20,
-  "currentItemFreedrawConstantPressure": true,
   "currentItemOpacity": 100,
   "currentItemRoughness": 1,
   "currentItemRoundness": "sharp",
@@ -3106,7 +3098,6 @@ exports[`contextMenu element > selecting 'Paste styles' in context menu pastes s
   "currentItemFillStyle": "cross-hatch",
   "currentItemFontFamily": 5,
   "currentItemFontSize": 20,
-  "currentItemFreedrawConstantPressure": true,
   "currentItemOpacity": 60,
   "currentItemRoughness": 2,
   "currentItemRoundness": "sharp",
@@ -3600,7 +3591,6 @@ exports[`contextMenu element > selecting 'Send backward' in context menu sends e
   "currentItemFillStyle": "solid",
   "currentItemFontFamily": 5,
   "currentItemFontSize": 20,
-  "currentItemFreedrawConstantPressure": true,
   "currentItemOpacity": 100,
   "currentItemRoughness": 1,
   "currentItemRoundness": "sharp",
@@ -3924,7 +3914,6 @@ exports[`contextMenu element > selecting 'Send to back' in context menu sends el
   "currentItemFillStyle": "solid",
   "currentItemFontFamily": 5,
   "currentItemFontSize": 20,
-  "currentItemFreedrawConstantPressure": true,
   "currentItemOpacity": 100,
   "currentItemRoughness": 1,
   "currentItemRoundness": "sharp",
@@ -4248,7 +4237,6 @@ exports[`contextMenu element > selecting 'Ungroup selection' in context menu ung
   "currentItemFillStyle": "solid",
   "currentItemFontFamily": 5,
   "currentItemFontSize": 20,
-  "currentItemFreedrawConstantPressure": true,
   "currentItemOpacity": 100,
   "currentItemRoughness": 1,
   "currentItemRoundness": "sharp",
@@ -5534,7 +5522,6 @@ exports[`contextMenu element > shows 'Group selection' in context menu for multi
   "currentItemFillStyle": "solid",
   "currentItemFontFamily": 5,
   "currentItemFontSize": 20,
-  "currentItemFreedrawConstantPressure": true,
   "currentItemOpacity": 100,
   "currentItemRoughness": 1,
   "currentItemRoundness": "sharp",
@@ -6752,7 +6739,6 @@ exports[`contextMenu element > shows 'Ungroup selection' in context menu for gro
   "currentItemFillStyle": "solid",
   "currentItemFontFamily": 5,
   "currentItemFontSize": 20,
-  "currentItemFreedrawConstantPressure": true,
   "currentItemOpacity": 100,
   "currentItemRoughness": 1,
   "currentItemRoundness": "sharp",
@@ -7710,7 +7696,6 @@ exports[`contextMenu element > shows context menu for canvas > [end of test] app
   "currentItemFillStyle": "solid",
   "currentItemFontFamily": 5,
   "currentItemFontSize": 20,
-  "currentItemFreedrawConstantPressure": true,
   "currentItemOpacity": 100,
   "currentItemRoughness": 1,
   "currentItemRoundness": "sharp",
@@ -8711,7 +8696,6 @@ exports[`contextMenu element > shows context menu for element > [end of test] ap
   "currentItemFillStyle": "solid",
   "currentItemFontFamily": 5,
   "currentItemFontSize": 20,
-  "currentItemFreedrawConstantPressure": true,
   "currentItemOpacity": 100,
   "currentItemRoughness": 1,
   "currentItemRoundness": "sharp",
@@ -9703,7 +9687,6 @@ exports[`contextMenu element > shows context menu for element > [end of test] ap
   "currentItemFillStyle": "solid",
   "currentItemFontFamily": 5,
   "currentItemFontSize": 20,
-  "currentItemFreedrawConstantPressure": true,
   "currentItemOpacity": 100,
   "currentItemRoughness": 1,
   "currentItemRoundness": "sharp",

packages/excalidraw/tests/__snapshots__/history.test.tsx.snap

@@ -24,7 +24,6 @@ exports[`history > multiplayer undo/redo > conflicts in arrows and their bindabl
   "currentItemFillStyle": "solid",
   "currentItemFontFamily": 5,
   "currentItemFontSize": 20,
-  "currentItemFreedrawConstantPressure": true,
   "currentItemOpacity": 100,
   "currentItemRoughness": 1,
   "currentItemRoundness": "sharp",
@@ -659,7 +658,6 @@ exports[`history > multiplayer undo/redo > conflicts in arrows and their bindabl
   "currentItemFillStyle": "solid",
   "currentItemFontFamily": 5,
   "currentItemFontSize": 20,
-  "currentItemFreedrawConstantPressure": true,
   "currentItemOpacity": 100,
   "currentItemRoughness": 1,
   "currentItemRoundness": "sharp",
@@ -1222,7 +1220,6 @@ exports[`history > multiplayer undo/redo > conflicts in arrows and their bindabl
   "currentItemFillStyle": "solid",
   "currentItemFontFamily": 5,
   "currentItemFontSize": 20,
-  "currentItemFreedrawConstantPressure": true,
   "currentItemOpacity": 100,
   "currentItemRoughness": 1,
   "currentItemRoundness": "sharp",
@@ -1583,7 +1580,6 @@ exports[`history > multiplayer undo/redo > conflicts in arrows and their bindabl
   "currentItemFillStyle": "solid",
   "currentItemFontFamily": 5,
   "currentItemFontSize": 20,
-  "currentItemFreedrawConstantPressure": true,
   "currentItemOpacity": 100,
   "currentItemRoughness": 1,
   "currentItemRoundness": "sharp",
@@ -1946,7 +1942,6 @@ exports[`history > multiplayer undo/redo > conflicts in arrows and their bindabl
   "currentItemFillStyle": "solid",
   "currentItemFontFamily": 5,
   "currentItemFontSize": 20,
-  "currentItemFreedrawConstantPressure": true,
   "currentItemOpacity": 100,
   "currentItemRoughness": 1,
   "currentItemRoundness": "sharp",
@@ -2210,7 +2205,6 @@ exports[`history > multiplayer undo/redo > conflicts in arrows and their bindabl
   "currentItemFillStyle": "solid",
   "currentItemFontFamily": 5,
   "currentItemFontSize": 20,
-  "currentItemFreedrawConstantPressure": true,
   "currentItemOpacity": 100,
   "currentItemRoughness": 1,
   "currentItemRoundness": "sharp",
@@ -2698,7 +2692,6 @@ exports[`history > multiplayer undo/redo > conflicts in bound text elements and
   "currentItemFillStyle": "solid",
   "currentItemFontFamily": 5,
   "currentItemFontSize": 20,
-  "currentItemFreedrawConstantPressure": true,
   "currentItemOpacity": 100,
   "currentItemRoughness": 1,
   "currentItemRoundness": "sharp",
@@ -3002,7 +2995,6 @@ exports[`history > multiplayer undo/redo > conflicts in bound text elements and
   "currentItemFillStyle": "solid",
   "currentItemFontFamily": 5,
   "currentItemFontSize": 20,
-  "currentItemFreedrawConstantPressure": true,
   "currentItemOpacity": 100,
   "currentItemRoughness": 1,
   "currentItemRoundness": "sharp",
@@ -3322,7 +3314,6 @@ exports[`history > multiplayer undo/redo > conflicts in bound text elements and
   "currentItemFillStyle": "solid",
   "currentItemFontFamily": 5,
   "currentItemFontSize": 20,
-  "currentItemFreedrawConstantPressure": true,
   "currentItemOpacity": 100,
   "currentItemRoughness": 1,
   "currentItemRoundness": "sharp",
@@ -3617,7 +3608,6 @@ exports[`history > multiplayer undo/redo > conflicts in bound text elements and
   "currentItemFillStyle": "solid",
   "currentItemFontFamily": 5,
   "currentItemFontSize": 20,
-  "currentItemFreedrawConstantPressure": true,
   "currentItemOpacity": 100,
   "currentItemRoughness": 1,
   "currentItemRoundness": "sharp",
@@ -3904,7 +3894,6 @@ exports[`history > multiplayer undo/redo > conflicts in bound text elements and
   "currentItemFillStyle": "solid",
   "currentItemFontFamily": 5,
   "currentItemFontSize": 20,
-  "currentItemFreedrawConstantPressure": true,
   "currentItemOpacity": 100,
   "currentItemRoughness": 1,
   "currentItemRoundness": "sharp",
@@ -4140,7 +4129,6 @@ exports[`history > multiplayer undo/redo > conflicts in bound text elements and
   "currentItemFillStyle": "solid",
   "currentItemFontFamily": 5,
   "currentItemFontSize": 20,
-  "currentItemFreedrawConstantPressure": true,
   "currentItemOpacity": 100,
   "currentItemRoughness": 1,
   "currentItemRoundness": "sharp",
@@ -4398,7 +4386,6 @@ exports[`history > multiplayer undo/redo > conflicts in bound text elements and
   "currentItemFillStyle": "solid",
   "currentItemFontFamily": 5,
   "currentItemFontSize": 20,
-  "currentItemFreedrawConstantPressure": true,
   "currentItemOpacity": 100,
   "currentItemRoughness": 1,
   "currentItemRoundness": "sharp",
@@ -4670,7 +4657,6 @@ exports[`history > multiplayer undo/redo > conflicts in bound text elements and
   "currentItemFillStyle": "solid",
   "currentItemFontFamily": 5,
   "currentItemFontSize": 20,
-  "currentItemFreedrawConstantPressure": true,
   "currentItemOpacity": 100,
   "currentItemRoughness": 1,
   "currentItemRoundness": "sharp",
@@ -4900,7 +4886,6 @@ exports[`history > multiplayer undo/redo > conflicts in bound text elements and
   "currentItemFillStyle": "solid",
   "currentItemFontFamily": 5,
   "currentItemFontSize": 20,
-  "currentItemFreedrawConstantPressure": true,
   "currentItemOpacity": 100,
   "currentItemRoughness": 1,
   "currentItemRoundness": "sharp",
@@ -5130,7 +5115,6 @@ exports[`history > multiplayer undo/redo > conflicts in bound text elements and
   "currentItemFillStyle": "solid",
   "currentItemFontFamily": 5,
   "currentItemFontSize": 20,
-  "currentItemFreedrawConstantPressure": true,
   "currentItemOpacity": 100,
   "currentItemRoughness": 1,
   "currentItemRoundness": "sharp",
@@ -5378,7 +5362,6 @@ exports[`history > multiplayer undo/redo > conflicts in bound text elements and
   "currentItemFillStyle": "solid",
   "currentItemFontFamily": 5,
   "currentItemFontSize": 20,
-  "currentItemFreedrawConstantPressure": true,
   "currentItemOpacity": 100,
   "currentItemRoughness": 1,
   "currentItemRoundness": "sharp",
@@ -5635,7 +5618,6 @@ exports[`history > multiplayer undo/redo > conflicts in frames and their childre
   "currentItemFillStyle": "solid",
   "currentItemFontFamily": 5,
   "currentItemFontSize": 20,
-  "currentItemFreedrawConstantPressure": true,
   "currentItemOpacity": 100,
   "currentItemRoughness": 1,
   "currentItemRoundness": "sharp",
@@ -5894,7 +5876,6 @@ exports[`history > multiplayer undo/redo > should iterate through the history wh
   "currentItemFillStyle": "solid",
   "currentItemFontFamily": 5,
   "currentItemFontSize": 20,
-  "currentItemFreedrawConstantPressure": true,
   "currentItemOpacity": 100,
   "currentItemRoughness": 1,
   "currentItemRoundness": "sharp",
@@ -6224,7 +6205,6 @@ exports[`history > multiplayer undo/redo > should iterate through the history wh
   "currentItemFillStyle": "solid",
   "currentItemFontFamily": 5,
   "currentItemFontSize": 20,
-  "currentItemFreedrawConstantPressure": true,
   "currentItemOpacity": 100,
   "currentItemRoughness": 1,
   "currentItemRoundness": "sharp",
@@ -6652,7 +6632,6 @@ exports[`history > multiplayer undo/redo > should iterate through the history wh
   "currentItemFillStyle": "solid",
   "currentItemFontFamily": 5,
   "currentItemFontSize": 20,
-  "currentItemFreedrawConstantPressure": true,
   "currentItemOpacity": 100,
   "currentItemRoughness": 1,
   "currentItemRoundness": "sharp",
@@ -7027,7 +7006,6 @@ exports[`history > multiplayer undo/redo > should iterate through the history wh
   "currentItemFillStyle": "solid",
   "currentItemFontFamily": 5,
   "currentItemFontSize": 20,
-  "currentItemFreedrawConstantPressure": true,
   "currentItemOpacity": 100,
   "currentItemRoughness": 1,
   "currentItemRoundness": "sharp",
@@ -7340,7 +7318,6 @@ exports[`history > multiplayer undo/redo > should iterate through the history wh
   "currentItemFillStyle": "solid",
   "currentItemFontFamily": 5,
   "currentItemFontSize": 20,
-  "currentItemFreedrawConstantPressure": true,
   "currentItemOpacity": 100,
   "currentItemRoughness": 1,
   "currentItemRoundness": "sharp",
@@ -7634,7 +7611,6 @@ exports[`history > multiplayer undo/redo > should iterate through the history wh
   "currentItemFillStyle": "solid",
   "currentItemFontFamily": 5,
   "currentItemFontSize": 20,
-  "currentItemFreedrawConstantPressure": true,
   "currentItemOpacity": 100,
   "currentItemRoughness": 1,
   "currentItemRoundness": "sharp",
@@ -7865,7 +7841,6 @@ exports[`history > multiplayer undo/redo > should iterate through the history wh
   "currentItemFillStyle": "solid",
   "currentItemFontFamily": 5,
   "currentItemFontSize": 20,
-  "currentItemFreedrawConstantPressure": true,
   "currentItemOpacity": 100,
   "currentItemRoughness": 1,
   "currentItemRoundness": "sharp",
@@ -8218,7 +8193,6 @@ exports[`history > multiplayer undo/redo > should iterate through the history wh
   "currentItemFillStyle": "solid",
   "currentItemFontFamily": 5,
   "currentItemFontSize": 20,
-  "currentItemFreedrawConstantPressure": true,
   "currentItemOpacity": 100,
   "currentItemRoughness": 1,
   "currentItemRoundness": "sharp",
@@ -8571,7 +8545,6 @@ exports[`history > multiplayer undo/redo > should not let remote changes to inte
   "currentItemFillStyle": "solid",
   "currentItemFontFamily": 5,
   "currentItemFontSize": 20,
-  "currentItemFreedrawConstantPressure": true,
   "currentItemOpacity": 100,
   "currentItemRoughness": 1,
   "currentItemRoundness": "sharp",
@@ -8978,7 +8951,6 @@ exports[`history > multiplayer undo/redo > should not let remote changes to inte
   "currentItemFillStyle": "solid",
   "currentItemFontFamily": 5,
   "currentItemFontSize": 20,
-  "currentItemFreedrawConstantPressure": true,
   "currentItemOpacity": 100,
   "currentItemRoughness": 1,
   "currentItemRoundness": "sharp",
@@ -9093,8 +9065,8 @@ exports[`history > multiplayer undo/redo > should not let remote changes to inte
       20,
     ],
     [
-      "21.04874",
-      "21.04874",
+      50,
+      50,
     ],
     [
       50,
@@ -9109,7 +9081,7 @@ exports[`history > multiplayer undo/redo > should not let remote changes to inte
   ],
   "roughness": 1,
   "roundness": null,
-  "simulatePressure": true,
+  "simulatePressure": false,
   "strokeColor": "#1e1e1e",
   "strokeStyle": "solid",
   "strokeWidth": 2,
@@ -9195,8 +9167,8 @@ exports[`history > multiplayer undo/redo > should not let remote changes to inte
                 20,
               ],
               [
-                "21.04874",
-                "21.04874",
+                50,
+                50,
               ],
               [
                 50,
@@ -9211,7 +9183,7 @@ exports[`history > multiplayer undo/redo > should not let remote changes to inte
             ],
             "roughness": 1,
             "roundness": null,
-            "simulatePressure": true,
+            "simulatePressure": false,
             "strokeColor": "#1e1e1e",
             "strokeStyle": "solid",
             "strokeWidth": 2,
@@ -9258,7 +9230,6 @@ exports[`history > multiplayer undo/redo > should not let remote changes to inte
   "currentItemFillStyle": "solid",
   "currentItemFontFamily": 5,
   "currentItemFontSize": 20,
-  "currentItemFreedrawConstantPressure": true,
   "currentItemOpacity": 100,
   "currentItemRoughness": 1,
   "currentItemRoundness": "sharp",
@@ -9523,7 +9494,6 @@ exports[`history > multiplayer undo/redo > should not override remote changes on
   "currentItemFillStyle": "solid",
   "currentItemFontFamily": 5,
   "currentItemFontSize": 20,
-  "currentItemFreedrawConstantPressure": true,
   "currentItemOpacity": 100,
   "currentItemRoughness": 1,
   "currentItemRoundness": "sharp",
@@ -9789,7 +9759,6 @@ exports[`history > multiplayer undo/redo > should not override remote changes on
   "currentItemFillStyle": "solid",
   "currentItemFontFamily": 5,
   "currentItemFontSize": 20,
-  "currentItemFreedrawConstantPressure": true,
   "currentItemOpacity": 100,
   "currentItemRoughness": 1,
   "currentItemRoundness": "sharp",
@@ -10022,7 +9991,6 @@ exports[`history > multiplayer undo/redo > should override remotely added groups
   "currentItemFillStyle": "solid",
   "currentItemFontFamily": 5,
   "currentItemFontSize": 20,
-  "currentItemFreedrawConstantPressure": true,
   "currentItemOpacity": 100,
   "currentItemRoughness": 1,
   "currentItemRoundness": "sharp",
@@ -10320,7 +10288,6 @@ exports[`history > multiplayer undo/redo > should override remotely added points
   "currentItemFillStyle": "solid",
   "currentItemFontFamily": 5,
   "currentItemFontSize": 20,
-  "currentItemFreedrawConstantPressure": true,
   "currentItemOpacity": 100,
   "currentItemRoughness": 1,
   "currentItemRoundness": "sharp",
@@ -10639,7 +10606,6 @@ exports[`history > multiplayer undo/redo > should redistribute deltas when eleme
   "currentItemFillStyle": "solid",
   "currentItemFontFamily": 5,
   "currentItemFontSize": 20,
-  "currentItemFreedrawConstantPressure": true,
   "currentItemOpacity": 100,
   "currentItemRoughness": 1,
   "currentItemRoundness": "sharp",
@@ -10876,7 +10842,6 @@ exports[`history > multiplayer undo/redo > should redraw arrows on undo > [end o
   "currentItemFillStyle": "solid",
   "currentItemFontFamily": 5,
   "currentItemFontSize": 20,
-  "currentItemFreedrawConstantPressure": true,
   "currentItemOpacity": 100,
   "currentItemRoughness": 1,
   "currentItemRoundness": "sharp",
@@ -11295,6 +11260,489 @@ exports[`history > multiplayer undo/redo > should redraw arrows on undo > [end o
 
 exports[`history > multiplayer undo/redo > should redraw arrows on undo > [end of test] undo stack 1`] = `[]`;
 
+exports[`history > multiplayer undo/redo > should support undo and redo when escape unwinds nested group editing > [end of test] appState 1`] = `
+{
+  "activeEmbeddable": null,
+  "activeLockedId": null,
+  "activeTool": {
+    "customType": null,
+    "fromSelection": false,
+    "lastActiveTool": null,
+    "locked": false,
+    "type": "selection",
+  },
+  "bindMode": "orbit",
+  "bindingPreference": "enabled",
+  "collaborators": Map {},
+  "contextMenu": null,
+  "croppingElementId": null,
+  "currentHoveredFontFamily": null,
+  "currentItemArrowType": "round",
+  "currentItemBackgroundColor": "transparent",
+  "currentItemEndArrowhead": "arrow",
+  "currentItemFillStyle": "solid",
+  "currentItemFontFamily": 5,
+  "currentItemFontSize": 20,
+  "currentItemOpacity": 100,
+  "currentItemRoughness": 1,
+  "currentItemRoundness": "sharp",
+  "currentItemStartArrowhead": null,
+  "currentItemStrokeColor": "#1e1e1e",
+  "currentItemStrokeStyle": "solid",
+  "currentItemStrokeWidth": 2,
+  "currentItemTextAlign": "left",
+  "cursorButton": "up",
+  "defaultSidebarDockedPreference": false,
+  "editingFrame": null,
+  "editingGroupId": null,
+  "editingTextElement": null,
+  "elementsToHighlight": null,
+  "errorMessage": null,
+  "exportBackground": true,
+  "exportEmbedScene": false,
+  "exportScale": 1,
+  "exportWithDarkMode": false,
+  "fileHandle": null,
+  "followedBy": Set {},
+  "frameRendering": {
+    "clip": true,
+    "enabled": true,
+    "name": true,
+    "outline": true,
+  },
+  "frameToHighlight": null,
+  "gridModeEnabled": false,
+  "gridSize": 20,
+  "gridStep": 5,
+  "height": 0,
+  "hoveredElementIds": {},
+  "isBindingEnabled": true,
+  "isCropping": false,
+  "isLoading": false,
+  "isMidpointSnappingEnabled": true,
+  "isResizing": false,
+  "isRotating": false,
+  "lastPointerDownWith": "mouse",
+  "lockedMultiSelections": {},
+  "multiElement": null,
+  "newElement": null,
+  "objectsSnapModeEnabled": false,
+  "offsetLeft": 0,
+  "offsetTop": 0,
+  "openDialog": null,
+  "openMenu": null,
+  "openPopup": null,
+  "openSidebar": null,
+  "originSnapOffset": null,
+  "penDetected": false,
+  "penMode": false,
+  "preferredSelectionTool": {
+    "initialized": true,
+    "type": "selection",
+  },
+  "previousSelectedElementIds": {},
+  "resizingElement": null,
+  "scrollX": 0,
+  "scrollY": 0,
+  "searchMatches": null,
+  "selectedElementIds": {},
+  "selectedElementsAreBeingDragged": false,
+  "selectedGroupIds": {},
+  "selectionElement": null,
+  "shouldCacheIgnoreZoom": false,
+  "showHyperlinkPopup": false,
+  "showWelcomeScreen": true,
+  "snapLines": [],
+  "startBoundElement": null,
+  "stats": {
+    "open": false,
+    "panels": 3,
+  },
+  "suggestedBinding": null,
+  "theme": "light",
+  "toast": null,
+  "userToFollow": null,
+  "viewBackgroundColor": "#ffffff",
+  "viewModeEnabled": false,
+  "width": 0,
+  "zenModeEnabled": false,
+  "zoom": {
+    "value": 1,
+  },
+}
+`;
+
+exports[`history > multiplayer undo/redo > should support undo and redo when escape unwinds nested group editing > [end of test] element 0 1`] = `
+{
+  "angle": 0,
+  "backgroundColor": "transparent",
+  "boundElements": null,
+  "customData": undefined,
+  "fillStyle": "solid",
+  "frameId": null,
+  "groupIds": [
+    "inner",
+    "outer",
+  ],
+  "height": 100,
+  "id": "id0",
+  "index": "a0",
+  "isDeleted": false,
+  "link": null,
+  "locked": false,
+  "opacity": 100,
+  "roughness": 1,
+  "roundness": null,
+  "strokeColor": "#1e1e1e",
+  "strokeStyle": "solid",
+  "strokeWidth": 2,
+  "type": "rectangle",
+  "updated": 1,
+  "version": 2,
+  "width": 100,
+  "x": 0,
+  "y": 0,
+}
+`;
+
+exports[`history > multiplayer undo/redo > should support undo and redo when escape unwinds nested group editing > [end of test] element 1 1`] = `
+{
+  "angle": 0,
+  "backgroundColor": "transparent",
+  "boundElements": null,
+  "customData": undefined,
+  "fillStyle": "solid",
+  "frameId": null,
+  "groupIds": [
+    "outer",
+  ],
+  "height": 100,
+  "id": "id1",
+  "index": "a1",
+  "isDeleted": false,
+  "link": null,
+  "locked": false,
+  "opacity": 100,
+  "roughness": 1,
+  "roundness": null,
+  "strokeColor": "#1e1e1e",
+  "strokeStyle": "solid",
+  "strokeWidth": 2,
+  "type": "rectangle",
+  "updated": 1,
+  "version": 2,
+  "width": 100,
+  "x": 100,
+  "y": 100,
+}
+`;
+
+exports[`history > multiplayer undo/redo > should support undo and redo when escape unwinds nested group editing > [end of test] element 2 1`] = `
+{
+  "angle": 0,
+  "backgroundColor": "transparent",
+  "boundElements": null,
+  "customData": undefined,
+  "fillStyle": "solid",
+  "frameId": null,
+  "groupIds": [
+    "inner",
+    "outer",
+  ],
+  "height": 100,
+  "id": "id2",
+  "index": "a2",
+  "isDeleted": false,
+  "link": null,
+  "locked": false,
+  "opacity": 100,
+  "roughness": 1,
+  "roundness": null,
+  "strokeColor": "#1e1e1e",
+  "strokeStyle": "solid",
+  "strokeWidth": 2,
+  "type": "rectangle",
+  "updated": 1,
+  "version": 2,
+  "width": 100,
+  "x": 200,
+  "y": 200,
+}
+`;
+
+exports[`history > multiplayer undo/redo > should support undo and redo when escape unwinds nested group editing > [end of test] number of elements 1`] = `3`;
+
+exports[`history > multiplayer undo/redo > should support undo and redo when escape unwinds nested group editing > [end of test] number of renders 1`] = `16`;
+
+exports[`history > multiplayer undo/redo > should support undo and redo when escape unwinds nested group editing > [end of test] redo stack 1`] = `[]`;
+
+exports[`history > multiplayer undo/redo > should support undo and redo when escape unwinds nested group editing > [end of test] undo stack 1`] = `
+[
+  {
+    "appState": AppStateDelta {
+      "delta": Delta {
+        "deleted": {
+          "selectedElementIds": {
+            "id0": true,
+            "id1": true,
+            "id2": true,
+          },
+          "selectedGroupIds": {
+            "outer": true,
+          },
+        },
+        "inserted": {
+          "selectedElementIds": {},
+          "selectedGroupIds": {},
+        },
+      },
+    },
+    "elements": {
+      "added": {},
+      "removed": {
+        "id0": {
+          "deleted": {
+            "angle": 0,
+            "backgroundColor": "transparent",
+            "boundElements": null,
+            "customData": undefined,
+            "fillStyle": "solid",
+            "frameId": null,
+            "groupIds": [
+              "inner",
+              "outer",
+            ],
+            "height": 100,
+            "index": "a0",
+            "isDeleted": false,
+            "link": null,
+            "locked": false,
+            "opacity": 100,
+            "roughness": 1,
+            "roundness": null,
+            "strokeColor": "#1e1e1e",
+            "strokeStyle": "solid",
+            "strokeWidth": 2,
+            "type": "rectangle",
+            "version": 2,
+            "width": 100,
+            "x": 0,
+            "y": 0,
+          },
+          "inserted": {
+            "isDeleted": true,
+            "version": 1,
+          },
+        },
+        "id1": {
+          "deleted": {
+            "angle": 0,
+            "backgroundColor": "transparent",
+            "boundElements": null,
+            "customData": undefined,
+            "fillStyle": "solid",
+            "frameId": null,
+            "groupIds": [
+              "outer",
+            ],
+            "height": 100,
+            "index": "a1",
+            "isDeleted": false,
+            "link": null,
+            "locked": false,
+            "opacity": 100,
+            "roughness": 1,
+            "roundness": null,
+            "strokeColor": "#1e1e1e",
+            "strokeStyle": "solid",
+            "strokeWidth": 2,
+            "type": "rectangle",
+            "version": 2,
+            "width": 100,
+            "x": 100,
+            "y": 100,
+          },
+          "inserted": {
+            "isDeleted": true,
+            "version": 1,
+          },
+        },
+        "id2": {
+          "deleted": {
+            "angle": 0,
+            "backgroundColor": "transparent",
+            "boundElements": null,
+            "customData": undefined,
+            "fillStyle": "solid",
+            "frameId": null,
+            "groupIds": [
+              "inner",
+              "outer",
+            ],
+            "height": 100,
+            "index": "a2",
+            "isDeleted": false,
+            "link": null,
+            "locked": false,
+            "opacity": 100,
+            "roughness": 1,
+            "roundness": null,
+            "strokeColor": "#1e1e1e",
+            "strokeStyle": "solid",
+            "strokeWidth": 2,
+            "type": "rectangle",
+            "version": 2,
+            "width": 100,
+            "x": 200,
+            "y": 200,
+          },
+          "inserted": {
+            "isDeleted": true,
+            "version": 1,
+          },
+        },
+      },
+      "updated": {},
+    },
+    "id": "id5",
+  },
+  {
+    "appState": AppStateDelta {
+      "delta": Delta {
+        "deleted": {
+          "editingGroupId": "outer",
+          "selectedElementIds": {},
+          "selectedGroupIds": {
+            "inner": true,
+          },
+        },
+        "inserted": {
+          "editingGroupId": null,
+          "selectedElementIds": {
+            "id1": true,
+          },
+          "selectedGroupIds": {
+            "outer": true,
+          },
+        },
+      },
+    },
+    "elements": {
+      "added": {},
+      "removed": {},
+      "updated": {},
+    },
+    "id": "id7",
+  },
+  {
+    "appState": AppStateDelta {
+      "delta": Delta {
+        "deleted": {
+          "editingGroupId": "inner",
+          "selectedElementIds": {},
+          "selectedGroupIds": {},
+        },
+        "inserted": {
+          "editingGroupId": "outer",
+          "selectedElementIds": {
+            "id2": true,
+          },
+          "selectedGroupIds": {
+            "inner": true,
+          },
+        },
+      },
+    },
+    "elements": {
+      "added": {},
+      "removed": {},
+      "updated": {},
+    },
+    "id": "id9",
+  },
+  {
+    "appState": AppStateDelta {
+      "delta": Delta {
+        "deleted": {
+          "editingGroupId": "outer",
+          "selectedElementIds": {
+            "id2": true,
+          },
+          "selectedGroupIds": {
+            "inner": true,
+          },
+        },
+        "inserted": {
+          "editingGroupId": "inner",
+          "selectedElementIds": {},
+          "selectedGroupIds": {},
+        },
+      },
+    },
+    "elements": {
+      "added": {},
+      "removed": {},
+      "updated": {},
+    },
+    "id": "id19",
+  },
+  {
+    "appState": AppStateDelta {
+      "delta": Delta {
+        "deleted": {
+          "editingGroupId": null,
+          "selectedElementIds": {
+            "id1": true,
+          },
+          "selectedGroupIds": {
+            "outer": true,
+          },
+        },
+        "inserted": {
+          "editingGroupId": "outer",
+          "selectedElementIds": {},
+          "selectedGroupIds": {
+            "inner": true,
+          },
+        },
+      },
+    },
+    "elements": {
+      "added": {},
+      "removed": {},
+      "updated": {},
+    },
+    "id": "id20",
+  },
+  {
+    "appState": AppStateDelta {
+      "delta": Delta {
+        "deleted": {
+          "selectedElementIds": {},
+          "selectedGroupIds": {},
+        },
+        "inserted": {
+          "selectedElementIds": {
+            "id0": true,
+            "id1": true,
+            "id2": true,
+          },
+          "selectedGroupIds": {
+            "outer": true,
+          },
+        },
+      },
+    },
+    "elements": {
+      "added": {},
+      "removed": {},
+      "updated": {},
+    },
+    "id": "id21",
+  },
+]
+`;
+
 exports[`history > multiplayer undo/redo > should update history entries after remote changes on the same properties > [end of test] appState 1`] = `
 {
   "activeEmbeddable": null,
@@ -11319,7 +11767,6 @@ exports[`history > multiplayer undo/redo > should update history entries after r
   "currentItemFillStyle": "solid",
   "currentItemFontFamily": 5,
   "currentItemFontSize": 20,
-  "currentItemFreedrawConstantPressure": true,
   "currentItemOpacity": 100,
   "currentItemRoughness": 1,
   "currentItemRoundness": "sharp",
@@ -11580,7 +12027,6 @@ exports[`history > singleplayer undo/redo > remounting undo/redo buttons should
   "currentItemFillStyle": "solid",
   "currentItemFontFamily": 5,
   "currentItemFontSize": 20,
-  "currentItemFreedrawConstantPressure": true,
   "currentItemOpacity": 100,
   "currentItemRoughness": 1,
   "currentItemRoundness": "sharp",
@@ -11816,7 +12262,6 @@ exports[`history > singleplayer undo/redo > should clear the redo stack on eleme
   "currentItemFillStyle": "solid",
   "currentItemFontFamily": 5,
   "currentItemFontSize": 20,
-  "currentItemFreedrawConstantPressure": true,
   "currentItemOpacity": 100,
   "currentItemRoughness": 1,
   "currentItemRoundness": "sharp",
@@ -12054,7 +12499,6 @@ exports[`history > singleplayer undo/redo > should create entry when selecting f
   "currentItemFillStyle": "solid",
   "currentItemFontFamily": 5,
   "currentItemFontSize": 20,
-  "currentItemFreedrawConstantPressure": true,
   "currentItemOpacity": 100,
   "currentItemRoughness": 1,
   "currentItemRoundness": "sharp",
@@ -12210,7 +12654,7 @@ exports[`history > singleplayer undo/redo > should create entry when selecting f
   ],
   "roughness": 1,
   "roundness": null,
-  "simulatePressure": true,
+  "simulatePressure": false,
   "strokeColor": "#1e1e1e",
   "strokeStyle": "solid",
   "strokeWidth": 2,
@@ -12260,7 +12704,7 @@ exports[`history > singleplayer undo/redo > should create entry when selecting f
   ],
   "roughness": 1,
   "roundness": null,
-  "simulatePressure": true,
+  "simulatePressure": false,
   "strokeColor": "#e03131",
   "strokeStyle": "solid",
   "strokeWidth": 2,
@@ -12399,7 +12843,7 @@ exports[`history > singleplayer undo/redo > should create entry when selecting f
             ],
             "roughness": 1,
             "roundness": null,
-            "simulatePressure": true,
+            "simulatePressure": false,
             "strokeColor": "#e03131",
             "strokeStyle": "solid",
             "strokeWidth": 2,
@@ -12446,7 +12890,6 @@ exports[`history > singleplayer undo/redo > should create new history entry on e
   "currentItemFillStyle": "solid",
   "currentItemFontFamily": 5,
   "currentItemFontSize": 20,
-  "currentItemFreedrawConstantPressure": true,
   "currentItemOpacity": 100,
   "currentItemRoughness": 1,
   "currentItemRoundness": "sharp",
@@ -12657,7 +13100,6 @@ exports[`history > singleplayer undo/redo > should create new history entry on e
   "currentItemFillStyle": "solid",
   "currentItemFontFamily": 5,
   "currentItemFontSize": 20,
-  "currentItemFreedrawConstantPressure": true,
   "currentItemOpacity": 100,
   "currentItemRoughness": 1,
   "currentItemRoundness": "sharp",
@@ -12865,7 +13307,6 @@ exports[`history > singleplayer undo/redo > should create new history entry on i
   "currentItemFillStyle": "solid",
   "currentItemFontFamily": 5,
   "currentItemFontSize": 20,
-  "currentItemFreedrawConstantPressure": true,
   "currentItemOpacity": 100,
   "currentItemRoughness": 1,
   "currentItemRoundness": "sharp",
@@ -13167,7 +13608,6 @@ exports[`history > singleplayer undo/redo > should create new history entry on i
   "currentItemFillStyle": "solid",
   "currentItemFontFamily": 5,
   "currentItemFontSize": 20,
-  "currentItemFreedrawConstantPressure": true,
   "currentItemOpacity": 100,
   "currentItemRoughness": 1,
   "currentItemRoundness": "sharp",
@@ -13466,7 +13906,6 @@ exports[`history > singleplayer undo/redo > should create new history entry on s
   "currentItemFillStyle": "solid",
   "currentItemFontFamily": 5,
   "currentItemFontSize": 20,
-  "currentItemFreedrawConstantPressure": true,
   "currentItemOpacity": 100,
   "currentItemRoughness": 1,
   "currentItemRoundness": "sharp",
@@ -13712,7 +14151,6 @@ exports[`history > singleplayer undo/redo > should disable undo/redo buttons whe
   "currentItemFillStyle": "solid",
   "currentItemFontFamily": 5,
   "currentItemFontSize": 20,
-  "currentItemFreedrawConstantPressure": true,
   "currentItemOpacity": 100,
   "currentItemRoughness": 1,
   "currentItemRoundness": "sharp",
@@ -13950,7 +14388,6 @@ exports[`history > singleplayer undo/redo > should end up with no history entry
   "currentItemFillStyle": "solid",
   "currentItemFontFamily": 5,
   "currentItemFontSize": 20,
-  "currentItemFreedrawConstantPressure": true,
   "currentItemOpacity": 100,
   "currentItemRoughness": 1,
   "currentItemRoundness": "sharp",
@@ -14188,7 +14625,6 @@ exports[`history > singleplayer undo/redo > should iterate through the history w
   "currentItemFillStyle": "solid",
   "currentItemFontFamily": 5,
   "currentItemFontSize": 20,
-  "currentItemFreedrawConstantPressure": true,
   "currentItemOpacity": 100,
   "currentItemRoughness": 1,
   "currentItemRoundness": "sharp",
@@ -14436,7 +14872,6 @@ exports[`history > singleplayer undo/redo > should not clear the redo stack on s
   "currentItemFillStyle": "solid",
   "currentItemFontFamily": 5,
   "currentItemFontSize": 20,
-  "currentItemFreedrawConstantPressure": true,
   "currentItemOpacity": 100,
   "currentItemRoughness": 1,
   "currentItemRoundness": "sharp",
@@ -14768,7 +15203,6 @@ exports[`history > singleplayer undo/redo > should not collapse when applying co
   "currentItemFillStyle": "solid",
   "currentItemFontFamily": 5,
   "currentItemFontSize": 20,
-  "currentItemFreedrawConstantPressure": true,
   "currentItemOpacity": 100,
   "currentItemRoughness": 1,
   "currentItemRoundness": "sharp",
@@ -14939,7 +15373,6 @@ exports[`history > singleplayer undo/redo > should not end up with history entry
   "currentItemFillStyle": "solid",
   "currentItemFontFamily": 5,
   "currentItemFontSize": 20,
-  "currentItemFreedrawConstantPressure": true,
   "currentItemOpacity": 100,
   "currentItemRoughness": 1,
   "currentItemRoundness": "sharp",
@@ -15224,7 +15657,6 @@ exports[`history > singleplayer undo/redo > should not end up with history entry
   "currentItemFillStyle": "solid",
   "currentItemFontFamily": 5,
   "currentItemFontSize": 20,
-  "currentItemFreedrawConstantPressure": true,
   "currentItemOpacity": 100,
   "currentItemRoughness": 1,
   "currentItemRoundness": "sharp",
@@ -15488,7 +15920,6 @@ exports[`history > singleplayer undo/redo > should not modify anything on unrela
   "currentItemFillStyle": "solid",
   "currentItemFontFamily": 5,
   "currentItemFontSize": 20,
-  "currentItemFreedrawConstantPressure": true,
   "currentItemOpacity": 100,
   "currentItemRoughness": 1,
   "currentItemRoundness": "sharp",
@@ -15642,7 +16073,6 @@ exports[`history > singleplayer undo/redo > should not override appstate changes
   "currentItemFillStyle": "solid",
   "currentItemFontFamily": 5,
   "currentItemFontSize": 20,
-  "currentItemFreedrawConstantPressure": true,
   "currentItemOpacity": 100,
   "currentItemRoughness": 1,
   "currentItemRoundness": "sharp",
@@ -15925,7 +16355,6 @@ exports[`history > singleplayer undo/redo > should support appstate name or view
   "currentItemFillStyle": "solid",
   "currentItemFontFamily": 5,
   "currentItemFontSize": 20,
-  "currentItemFreedrawConstantPressure": true,
   "currentItemOpacity": 100,
   "currentItemRoughness": 1,
   "currentItemRoundness": "sharp",
@@ -16088,7 +16517,6 @@ exports[`history > singleplayer undo/redo > should support bidirectional binding
   "currentItemFillStyle": "solid",
   "currentItemFontFamily": 5,
   "currentItemFontSize": 20,
-  "currentItemFreedrawConstantPressure": true,
   "currentItemOpacity": 100,
   "currentItemRoughness": 1,
   "currentItemRoundness": "sharp",
@@ -16838,7 +17266,6 @@ exports[`history > singleplayer undo/redo > should support bidirectional binding
   "currentItemFillStyle": "solid",
   "currentItemFontFamily": 5,
   "currentItemFontSize": 20,
-  "currentItemFreedrawConstantPressure": true,
   "currentItemOpacity": 100,
   "currentItemRoughness": 1,
   "currentItemRoundness": "sharp",
@@ -17486,7 +17913,6 @@ exports[`history > singleplayer undo/redo > should support bidirectional binding
   "currentItemFillStyle": "solid",
   "currentItemFontFamily": 5,
   "currentItemFontSize": 20,
-  "currentItemFreedrawConstantPressure": true,
   "currentItemOpacity": 100,
   "currentItemRoughness": 1,
   "currentItemRoundness": "sharp",
@@ -18134,7 +18560,6 @@ exports[`history > singleplayer undo/redo > should support bidirectional binding
   "currentItemFillStyle": "solid",
   "currentItemFontFamily": 5,
   "currentItemFontSize": 20,
-  "currentItemFreedrawConstantPressure": true,
   "currentItemOpacity": 100,
   "currentItemRoughness": 1,
   "currentItemRoundness": "sharp",
@@ -18885,7 +19310,6 @@ exports[`history > singleplayer undo/redo > should support bidirectional binding
   "currentItemFillStyle": "solid",
   "currentItemFontFamily": 5,
   "currentItemFontSize": 20,
-  "currentItemFreedrawConstantPressure": true,
   "currentItemOpacity": 100,
   "currentItemRoughness": 1,
   "currentItemRoundness": "sharp",
@@ -19655,7 +20079,6 @@ exports[`history > singleplayer undo/redo > should support changes in elements'
   "currentItemFillStyle": "solid",
   "currentItemFontFamily": 5,
   "currentItemFontSize": 20,
-  "currentItemFreedrawConstantPressure": true,
   "currentItemOpacity": 100,
   "currentItemRoughness": 1,
   "currentItemRoundness": "sharp",
@@ -20136,7 +20559,6 @@ exports[`history > singleplayer undo/redo > should support duplication of groups
   "currentItemFillStyle": "solid",
   "currentItemFontFamily": 5,
   "currentItemFontSize": 20,
-  "currentItemFreedrawConstantPressure": true,
   "currentItemOpacity": 100,
   "currentItemRoughness": 1,
   "currentItemRoundness": "sharp",
@@ -20648,7 +21070,6 @@ exports[`history > singleplayer undo/redo > should support element creation, del
   "currentItemFillStyle": "solid",
   "currentItemFontFamily": 5,
   "currentItemFontSize": 20,
-  "currentItemFreedrawConstantPressure": true,
   "currentItemOpacity": 100,
   "currentItemRoughness": 1,
   "currentItemRoundness": "sharp",
@@ -21108,7 +21529,6 @@ exports[`history > singleplayer undo/redo > should support linear element creati
   "currentItemFillStyle": "solid",
   "currentItemFontFamily": 5,
   "currentItemFontSize": 20,
-  "currentItemFreedrawConstantPressure": true,
   "currentItemOpacity": 100,
   "currentItemRoughness": 1,
   "currentItemRoundness": "sharp",

packages/excalidraw/tests/__snapshots__/regressionTests.test.tsx.snap

@@ -24,7 +24,6 @@ exports[`given element A and group of elements B and given both are selected whe
   "currentItemFillStyle": "solid",
   "currentItemFontFamily": 5,
   "currentItemFontSize": 20,
-  "currentItemFreedrawConstantPressure": true,
   "currentItemOpacity": 100,
   "currentItemRoughness": 1,
   "currentItemRoundness": "sharp",
@@ -451,7 +450,6 @@ exports[`given element A and group of elements B and given both are selected whe
   "currentItemFillStyle": "solid",
   "currentItemFontFamily": 5,
   "currentItemFontSize": 20,
-  "currentItemFreedrawConstantPressure": true,
   "currentItemOpacity": 100,
   "currentItemRoughness": 1,
   "currentItemRoundness": "sharp",
@@ -868,7 +866,6 @@ exports[`regression tests > Cmd/Ctrl-click exclusively select element under poin
   "currentItemFillStyle": "solid",
   "currentItemFontFamily": 5,
   "currentItemFontSize": 20,
-  "currentItemFreedrawConstantPressure": true,
   "currentItemOpacity": 100,
   "currentItemRoughness": 1,
   "currentItemRoundness": "sharp",
@@ -1435,7 +1432,6 @@ exports[`regression tests > Drags selected element when hitting only bounding bo
   "currentItemFillStyle": "solid",
   "currentItemFontFamily": 5,
   "currentItemFontSize": 20,
-  "currentItemFreedrawConstantPressure": true,
   "currentItemOpacity": 100,
   "currentItemRoughness": 1,
   "currentItemRoundness": "sharp",
@@ -1643,7 +1639,6 @@ exports[`regression tests > adjusts z order when grouping > [end of test] appSta
   "currentItemFillStyle": "solid",
   "currentItemFontFamily": 5,
   "currentItemFontSize": 20,
-  "currentItemFreedrawConstantPressure": true,
   "currentItemOpacity": 100,
   "currentItemRoughness": 1,
   "currentItemRoundness": "sharp",
@@ -2028,7 +2023,6 @@ exports[`regression tests > alt-drag duplicates an element > [end of test] appSt
   "currentItemFillStyle": "solid",
   "currentItemFontFamily": 5,
   "currentItemFontSize": 20,
-  "currentItemFreedrawConstantPressure": true,
   "currentItemOpacity": 100,
   "currentItemRoughness": 1,
   "currentItemRoundness": "sharp",
@@ -2274,7 +2268,6 @@ exports[`regression tests > arrow keys > [end of test] appState 1`] = `
   "currentItemFillStyle": "solid",
   "currentItemFontFamily": 5,
   "currentItemFontSize": 20,
-  "currentItemFreedrawConstantPressure": true,
   "currentItemOpacity": 100,
   "currentItemRoughness": 1,
   "currentItemRoundness": "sharp",
@@ -2455,7 +2448,6 @@ exports[`regression tests > can drag element that covers another element, while
   "currentItemFillStyle": "solid",
   "currentItemFontFamily": 5,
   "currentItemFontSize": 20,
-  "currentItemFreedrawConstantPressure": true,
   "currentItemOpacity": 100,
   "currentItemRoughness": 1,
   "currentItemRoundness": "sharp",
@@ -2781,7 +2773,6 @@ exports[`regression tests > change the properties of a shape > [end of test] app
   "currentItemFillStyle": "solid",
   "currentItemFontFamily": 5,
   "currentItemFontSize": 20,
-  "currentItemFreedrawConstantPressure": true,
   "currentItemOpacity": 100,
   "currentItemRoughness": 1,
   "currentItemRoundness": "sharp",
@@ -3037,7 +3028,6 @@ exports[`regression tests > click on an element and drag it > [dragged] appState
   "currentItemFillStyle": "solid",
   "currentItemFontFamily": 5,
   "currentItemFontSize": 20,
-  "currentItemFreedrawConstantPressure": true,
   "currentItemOpacity": 100,
   "currentItemRoughness": 1,
   "currentItemRoundness": "sharp",
@@ -3279,7 +3269,6 @@ exports[`regression tests > click on an element and drag it > [end of test] appS
   "currentItemFillStyle": "solid",
   "currentItemFontFamily": 5,
   "currentItemFontSize": 20,
-  "currentItemFreedrawConstantPressure": true,
   "currentItemOpacity": 100,
   "currentItemRoughness": 1,
   "currentItemRoundness": "sharp",
@@ -3516,7 +3505,6 @@ exports[`regression tests > click to select a shape > [end of test] appState 1`]
   "currentItemFillStyle": "solid",
   "currentItemFontFamily": 5,
   "currentItemFontSize": 20,
-  "currentItemFreedrawConstantPressure": true,
   "currentItemOpacity": 100,
   "currentItemRoughness": 1,
   "currentItemRoundness": "sharp",
@@ -3775,7 +3763,6 @@ exports[`regression tests > click-drag to select a group > [end of test] appStat
   "currentItemFillStyle": "solid",
   "currentItemFontFamily": 5,
   "currentItemFontSize": 20,
-  "currentItemFreedrawConstantPressure": true,
   "currentItemOpacity": 100,
   "currentItemRoughness": 1,
   "currentItemRoundness": "sharp",
@@ -4090,7 +4077,6 @@ exports[`regression tests > deleting last but one element in editing group shoul
   "currentItemFillStyle": "solid",
   "currentItemFontFamily": 5,
   "currentItemFontSize": 20,
-  "currentItemFreedrawConstantPressure": true,
   "currentItemOpacity": 100,
   "currentItemRoughness": 1,
   "currentItemRoundness": "sharp",
@@ -4527,7 +4513,6 @@ exports[`regression tests > deselects group of selected elements on pointer down
   "currentItemFillStyle": "solid",
   "currentItemFontFamily": 5,
   "currentItemFontSize": 20,
-  "currentItemFreedrawConstantPressure": true,
   "currentItemOpacity": 100,
   "currentItemRoughness": 1,
   "currentItemRoundness": "sharp",
@@ -4811,7 +4796,6 @@ exports[`regression tests > deselects group of selected elements on pointer up w
   "currentItemFillStyle": "solid",
   "currentItemFontFamily": 5,
   "currentItemFontSize": 20,
-  "currentItemFreedrawConstantPressure": true,
   "currentItemOpacity": 100,
   "currentItemRoughness": 1,
   "currentItemRoundness": "sharp",
@@ -5088,7 +5072,6 @@ exports[`regression tests > deselects selected element on pointer down when poin
   "currentItemFillStyle": "solid",
   "currentItemFontFamily": 5,
   "currentItemFontSize": 20,
-  "currentItemFreedrawConstantPressure": true,
   "currentItemOpacity": 100,
   "currentItemRoughness": 1,
   "currentItemRoundness": "sharp",
@@ -5297,7 +5280,6 @@ exports[`regression tests > deselects selected element, on pointer up, when clic
   "currentItemFillStyle": "solid",
   "currentItemFontFamily": 5,
   "currentItemFontSize": 20,
-  "currentItemFreedrawConstantPressure": true,
   "currentItemOpacity": 100,
   "currentItemRoughness": 1,
   "currentItemRoundness": "sharp",
@@ -5498,7 +5480,6 @@ exports[`regression tests > double click to edit a group > [end of test] appStat
   "currentItemFillStyle": "solid",
   "currentItemFontFamily": 5,
   "currentItemFontSize": 20,
-  "currentItemFreedrawConstantPressure": true,
   "currentItemOpacity": 100,
   "currentItemRoughness": 1,
   "currentItemRoundness": "sharp",
@@ -5892,7 +5873,6 @@ exports[`regression tests > drags selected elements from point inside common bou
   "currentItemFillStyle": "solid",
   "currentItemFontFamily": 5,
   "currentItemFontSize": 20,
-  "currentItemFreedrawConstantPressure": true,
   "currentItemOpacity": 100,
   "currentItemRoughness": 1,
   "currentItemRoundness": "sharp",
@@ -6190,7 +6170,6 @@ exports[`regression tests > draw every type of shape > [end of test] appState 1`
   "currentItemFillStyle": "solid",
   "currentItemFontFamily": 5,
   "currentItemFontSize": 20,
-  "currentItemFreedrawConstantPressure": true,
   "currentItemOpacity": 100,
   "currentItemRoughness": 1,
   "currentItemRoundness": "sharp",
@@ -6933,7 +6912,7 @@ exports[`regression tests > draw every type of shape > [end of test] undo stack
             ],
             "roughness": 1,
             "roundness": null,
-            "simulatePressure": true,
+            "simulatePressure": false,
             "strokeColor": "#1e1e1e",
             "strokeStyle": "solid",
             "strokeWidth": 2,
@@ -6980,7 +6959,6 @@ exports[`regression tests > given a group of selected elements with an element t
   "currentItemFillStyle": "solid",
   "currentItemFontFamily": 5,
   "currentItemFontSize": 20,
-  "currentItemFreedrawConstantPressure": true,
   "currentItemOpacity": 100,
   "currentItemRoughness": 1,
   "currentItemRoundness": "sharp",
@@ -7315,7 +7293,6 @@ exports[`regression tests > given a selected element A and a not selected elemen
   "currentItemFillStyle": "solid",
   "currentItemFontFamily": 5,
   "currentItemFontSize": 20,
-  "currentItemFreedrawConstantPressure": true,
   "currentItemOpacity": 100,
   "currentItemRoughness": 1,
   "currentItemRoundness": "sharp",
@@ -7595,7 +7572,6 @@ exports[`regression tests > given selected element A with lower z-index than uns
   "currentItemFillStyle": "solid",
   "currentItemFontFamily": 5,
   "currentItemFontSize": 20,
-  "currentItemFreedrawConstantPressure": true,
   "currentItemOpacity": 100,
   "currentItemRoughness": 1,
   "currentItemRoundness": "sharp",
@@ -7831,7 +7807,6 @@ exports[`regression tests > given selected element A with lower z-index than uns
   "currentItemFillStyle": "solid",
   "currentItemFontFamily": 5,
   "currentItemFontSize": 20,
-  "currentItemFreedrawConstantPressure": true,
   "currentItemOpacity": 100,
   "currentItemRoughness": 1,
   "currentItemRoundness": "sharp",
@@ -8072,7 +8047,6 @@ exports[`regression tests > key 2 selects rectangle tool > [end of test] appStat
   "currentItemFillStyle": "solid",
   "currentItemFontFamily": 5,
   "currentItemFontSize": 20,
-  "currentItemFreedrawConstantPressure": true,
   "currentItemOpacity": 100,
   "currentItemRoughness": 1,
   "currentItemRoundness": "sharp",
@@ -8253,7 +8227,6 @@ exports[`regression tests > key 3 selects diamond tool > [end of test] appState
   "currentItemFillStyle": "solid",
   "currentItemFontFamily": 5,
   "currentItemFontSize": 20,
-  "currentItemFreedrawConstantPressure": true,
   "currentItemOpacity": 100,
   "currentItemRoughness": 1,
   "currentItemRoundness": "sharp",
@@ -8434,7 +8407,6 @@ exports[`regression tests > key 4 selects ellipse tool > [end of test] appState
   "currentItemFillStyle": "solid",
   "currentItemFontFamily": 5,
   "currentItemFontSize": 20,
-  "currentItemFreedrawConstantPressure": true,
   "currentItemOpacity": 100,
   "currentItemRoughness": 1,
   "currentItemRoundness": "sharp",
@@ -8615,7 +8587,6 @@ exports[`regression tests > key 5 selects arrow tool > [end of test] appState 1`
   "currentItemFillStyle": "solid",
   "currentItemFontFamily": 5,
   "currentItemFontSize": 20,
-  "currentItemFreedrawConstantPressure": true,
   "currentItemOpacity": 100,
   "currentItemRoughness": 1,
   "currentItemRoundness": "sharp",
@@ -8849,7 +8820,6 @@ exports[`regression tests > key 6 selects line tool > [end of test] appState 1`]
   "currentItemFillStyle": "solid",
   "currentItemFontFamily": 5,
   "currentItemFontSize": 20,
-  "currentItemFreedrawConstantPressure": true,
   "currentItemOpacity": 100,
   "currentItemRoughness": 1,
   "currentItemRoundness": "sharp",
@@ -9081,7 +9051,6 @@ exports[`regression tests > key 7 selects freedraw tool > [end of test] appState
   "currentItemFillStyle": "solid",
   "currentItemFontFamily": 5,
   "currentItemFontSize": 20,
-  "currentItemFreedrawConstantPressure": true,
   "currentItemOpacity": 100,
   "currentItemRoughness": 1,
   "currentItemRoundness": "sharp",
@@ -9227,7 +9196,7 @@ exports[`regression tests > key 7 selects freedraw tool > [end of test] undo sta
             ],
             "roughness": 1,
             "roundness": null,
-            "simulatePressure": true,
+            "simulatePressure": false,
             "strokeColor": "#1e1e1e",
             "strokeStyle": "solid",
             "strokeWidth": 2,
@@ -9274,7 +9243,6 @@ exports[`regression tests > key a selects arrow tool > [end of test] appState 1`
   "currentItemFillStyle": "solid",
   "currentItemFontFamily": 5,
   "currentItemFontSize": 20,
-  "currentItemFreedrawConstantPressure": true,
   "currentItemOpacity": 100,
   "currentItemRoughness": 1,
   "currentItemRoundness": "sharp",
@@ -9508,7 +9476,6 @@ exports[`regression tests > key d selects diamond tool > [end of test] appState
   "currentItemFillStyle": "solid",
   "currentItemFontFamily": 5,
   "currentItemFontSize": 20,
-  "currentItemFreedrawConstantPressure": true,
   "currentItemOpacity": 100,
   "currentItemRoughness": 1,
   "currentItemRoundness": "sharp",
@@ -9689,7 +9656,6 @@ exports[`regression tests > key l selects line tool > [end of test] appState 1`]
   "currentItemFillStyle": "solid",
   "currentItemFontFamily": 5,
   "currentItemFontSize": 20,
-  "currentItemFreedrawConstantPressure": true,
   "currentItemOpacity": 100,
   "currentItemRoughness": 1,
   "currentItemRoundness": "sharp",
@@ -9921,7 +9887,6 @@ exports[`regression tests > key o selects ellipse tool > [end of test] appState
   "currentItemFillStyle": "solid",
   "currentItemFontFamily": 5,
   "currentItemFontSize": 20,
-  "currentItemFreedrawConstantPressure": true,
   "currentItemOpacity": 100,
   "currentItemRoughness": 1,
   "currentItemRoundness": "sharp",
@@ -10102,7 +10067,6 @@ exports[`regression tests > key p selects freedraw tool > [end of test] appState
   "currentItemFillStyle": "solid",
   "currentItemFontFamily": 5,
   "currentItemFontSize": 20,
-  "currentItemFreedrawConstantPressure": true,
   "currentItemOpacity": 100,
   "currentItemRoughness": 1,
   "currentItemRoundness": "sharp",
@@ -10248,7 +10212,7 @@ exports[`regression tests > key p selects freedraw tool > [end of test] undo sta
             ],
             "roughness": 1,
             "roundness": null,
-            "simulatePressure": true,
+            "simulatePressure": false,
             "strokeColor": "#1e1e1e",
             "strokeStyle": "solid",
             "strokeWidth": 2,
@@ -10295,7 +10259,6 @@ exports[`regression tests > key r selects rectangle tool > [end of test] appStat
   "currentItemFillStyle": "solid",
   "currentItemFontFamily": 5,
   "currentItemFontSize": 20,
-  "currentItemFreedrawConstantPressure": true,
   "currentItemOpacity": 100,
   "currentItemRoughness": 1,
   "currentItemRoundness": "sharp",
@@ -10476,7 +10439,6 @@ exports[`regression tests > make a group and duplicate it > [end of test] appSta
   "currentItemFillStyle": "solid",
   "currentItemFontFamily": 5,
   "currentItemFontSize": 20,
-  "currentItemFreedrawConstantPressure": true,
   "currentItemOpacity": 100,
   "currentItemRoughness": 1,
   "currentItemRoundness": "sharp",
@@ -11008,7 +10970,6 @@ exports[`regression tests > noop interaction after undo shouldn't create history
   "currentItemFillStyle": "solid",
   "currentItemFontFamily": 5,
   "currentItemFontSize": 20,
-  "currentItemFreedrawConstantPressure": true,
   "currentItemOpacity": 100,
   "currentItemRoughness": 1,
   "currentItemRoundness": "sharp",
@@ -11289,7 +11250,6 @@ exports[`regression tests > pinch-to-zoom works > [end of test] appState 1`] = `
   "currentItemFillStyle": "solid",
   "currentItemFontFamily": 5,
   "currentItemFontSize": 20,
-  "currentItemFreedrawConstantPressure": true,
   "currentItemOpacity": 100,
   "currentItemRoughness": 1,
   "currentItemRoundness": "sharp",
@@ -11413,7 +11373,6 @@ exports[`regression tests > shift click on selected element should deselect it o
   "currentItemFillStyle": "solid",
   "currentItemFontFamily": 5,
   "currentItemFontSize": 20,
-  "currentItemFreedrawConstantPressure": true,
   "currentItemOpacity": 100,
   "currentItemRoughness": 1,
   "currentItemRoundness": "sharp",
@@ -11614,7 +11573,6 @@ exports[`regression tests > shift-click to multiselect, then drag > [end of test
   "currentItemFillStyle": "solid",
   "currentItemFontFamily": 5,
   "currentItemFontSize": 20,
-  "currentItemFreedrawConstantPressure": true,
   "currentItemOpacity": 100,
   "currentItemRoughness": 1,
   "currentItemRoundness": "sharp",
@@ -11934,7 +11892,6 @@ exports[`regression tests > should group elements and ungroup them > [end of tes
   "currentItemFillStyle": "solid",
   "currentItemFontFamily": 5,
   "currentItemFontSize": 20,
-  "currentItemFreedrawConstantPressure": true,
   "currentItemOpacity": 100,
   "currentItemRoughness": 1,
   "currentItemRoundness": "sharp",
@@ -12364,7 +12321,6 @@ exports[`regression tests > single-clicking on a subgroup of a selected group sh
   "currentItemFillStyle": "solid",
   "currentItemFontFamily": 5,
   "currentItemFontSize": 20,
-  "currentItemFreedrawConstantPressure": true,
   "currentItemOpacity": 100,
   "currentItemRoughness": 1,
   "currentItemRoundness": "sharp",
@@ -13005,7 +12961,6 @@ exports[`regression tests > spacebar + drag scrolls the canvas > [end of test] a
   "currentItemFillStyle": "solid",
   "currentItemFontFamily": 5,
   "currentItemFontSize": 20,
-  "currentItemFreedrawConstantPressure": true,
   "currentItemOpacity": 100,
   "currentItemRoughness": 1,
   "currentItemRoundness": "sharp",
@@ -13132,7 +13087,6 @@ exports[`regression tests > supports nested groups > [end of test] appState 1`]
   "currentItemFillStyle": "solid",
   "currentItemFontFamily": 5,
   "currentItemFontSize": 20,
-  "currentItemFreedrawConstantPressure": true,
   "currentItemOpacity": 100,
   "currentItemRoughness": 1,
   "currentItemRoundness": "sharp",
@@ -13764,7 +13718,6 @@ exports[`regression tests > switches from group of selected elements to another
   "currentItemFillStyle": "solid",
   "currentItemFontFamily": 5,
   "currentItemFontSize": 20,
-  "currentItemFreedrawConstantPressure": true,
   "currentItemOpacity": 100,
   "currentItemRoughness": 1,
   "currentItemRoundness": "sharp",
@@ -14104,7 +14057,6 @@ exports[`regression tests > switches selected element on pointer down > [end of
   "currentItemFillStyle": "solid",
   "currentItemFontFamily": 5,
   "currentItemFontSize": 20,
-  "currentItemFreedrawConstantPressure": true,
   "currentItemOpacity": 100,
   "currentItemRoughness": 1,
   "currentItemRoundness": "sharp",
@@ -14369,7 +14321,6 @@ exports[`regression tests > two-finger scroll works > [end of test] appState 1`]
   "currentItemFillStyle": "solid",
   "currentItemFontFamily": 5,
   "currentItemFontSize": 20,
-  "currentItemFreedrawConstantPressure": true,
   "currentItemOpacity": 100,
   "currentItemRoughness": 1,
   "currentItemRoundness": "sharp",
@@ -14493,7 +14444,6 @@ exports[`regression tests > undo/redo drawing an element > [end of test] appStat
   "currentItemFillStyle": "solid",
   "currentItemFontFamily": 5,
   "currentItemFontSize": 20,
-  "currentItemFreedrawConstantPressure": true,
   "currentItemOpacity": 100,
   "currentItemRoughness": 1,
   "currentItemRoundness": "sharp",
@@ -14859,7 +14809,6 @@ exports[`regression tests > updates fontSize & fontFamily appState > [end of tes
   "currentItemFillStyle": "solid",
   "currentItemFontFamily": 8,
   "currentItemFontSize": 20,
-  "currentItemFreedrawConstantPressure": true,
   "currentItemOpacity": 100,
   "currentItemRoughness": 1,
   "currentItemRoundness": "sharp",
@@ -14983,7 +14932,6 @@ exports[`regression tests > zoom hotkeys > [end of test] appState 1`] = `
   "currentItemFillStyle": "solid",
   "currentItemFontFamily": 5,
   "currentItemFontSize": 20,
-  "currentItemFreedrawConstantPressure": true,
   "currentItemOpacity": 100,
   "currentItemRoughness": 1,
   "currentItemRoundness": "sharp",

packages/excalidraw/tests/history.test.tsx

@@ -2120,9 +2120,6 @@ describe("history", () => {
       await render(
         <Excalidraw handleKeyboardGlobally={true} isCollaborating={true} />,
       );
-      // Pin the One Euro Filter clock to a fixed value so the smoothed
-      // intermediate freedraw point is deterministic regardless of system load.
-      vi.spyOn(h.app as any, "getPointerEventTimestamp").mockReturnValue(0);
     });
 
     it("should not override remote changes on different elements", async () => {

packages/excalidraw/types.ts

@@ -224,6 +224,7 @@ export type InteractiveCanvasAppState = Readonly<
     newElement: AppState["newElement"];
     isBindingEnabled: AppState["isBindingEnabled"];
     isMidpointSnappingEnabled: AppState["isMidpointSnappingEnabled"];
+    gridModeEnabled: AppState["gridModeEnabled"];
     suggestedBinding: AppState["suggestedBinding"];
     isRotating: AppState["isRotating"];
     elementsToHighlight: AppState["elementsToHighlight"];
@@ -363,7 +364,6 @@ export interface AppState {
   currentItemBackgroundColor: string;
   currentItemFillStyle: ExcalidrawElement["fillStyle"];
   currentItemStrokeWidth: number;
-  currentItemFreedrawConstantPressure: boolean;
   currentItemStrokeStyle: ExcalidrawElement["strokeStyle"];
   currentItemRoughness: number;
   currentItemOpacity: number;
@@ -846,6 +846,7 @@ export type AppClassProperties = {
   onStateChange: App["onStateChange"];
 
   lastPointerMoveCoords: App["lastPointerMoveCoords"];
+  lastPointerMoveEvent: App["lastPointerMoveEvent"];
   bindModeHandler: App["bindModeHandler"];
 
   setAppState: App["setAppState"];
@@ -910,10 +911,7 @@ export type PointerDownState = Readonly<{
   // We need to have these in the state so that we can unsubscribe them
   eventListeners: {
     // It's defined on the initial pointer down event
-    onMove:
-      | null
-      | ReturnType<typeof throttleRAF>
-      | (((event: PointerEvent) => void) & { flush(): void; cancel(): void });
+    onMove: null | ReturnType<typeof throttleRAF>;
     // It's defined on the initial pointer down event
     onUp: null | ((event: PointerEvent) => void);
     // It's defined on the initial pointer down event

packages/excalidraw/wysiwyg/textWysiwyg.tsx

@@ -392,10 +392,10 @@ export const textWysiwyg = ({
         ),
         textAlign,
         verticalAlign,
-        color: applyDarkModeFilter(
-          updatedTextElement.strokeColor,
-          appState.theme === THEME.DARK,
-        ),
+        color:
+          appState.theme === THEME.DARK
+            ? applyDarkModeFilter(updatedTextElement.strokeColor)
+            : updatedTextElement.strokeColor,
         opacity: updatedTextElement.opacity / 100,
         maxHeight: `${editorMaxHeight}px`,
       });

packages/utils/package.json

@@ -52,6 +52,7 @@
     "@excalidraw/laser-pointer": "1.3.1",
     "browser-fs-access": "0.38.0",
     "pako": "2.0.3",
+    "perfect-freehand": "1.2.0",
     "png-chunk-text": "1.0.0",
     "png-chunks-encode": "1.0.0",
     "png-chunks-extract": "1.0.0",

packages/utils/tests/__snapshots__/export.test.ts.snap

@@ -24,7 +24,6 @@ exports[`exportToSvg > with default arguments 1`] = `
   "currentItemFillStyle": "solid",
   "currentItemFontFamily": 5,
   "currentItemFontSize": 20,
-  "currentItemFreedrawConstantPressure": true,
   "currentItemOpacity": 100,
   "currentItemRoughness": 1,
   "currentItemRoundness": "sharp",

yarn.lock

@@ -8376,6 +8376,11 @@ pepjs@0.5.3:
   resolved "https://registry.yarnpkg.com/pepjs/-/pepjs-0.5.3.tgz#dc755f03d965c20e4b1bb65e42a03a97c382cfc7"
   integrity sha512-5yHVB9OHqKd9fr/OIsn8ss0NgThQ9buaqrEuwr9Or5YjPp6h+WTDKWZI+xZLaBGZCtODTnFtlSHNmhFsq67THg==
 
+perfect-freehand@1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/perfect-freehand/-/perfect-freehand-1.2.0.tgz#706a0f854544f6175772440c51d3b0563eb3988a"
+  integrity sha512-h/0ikF1M3phW7CwpZ5MMvKnfpHficWoOEyr//KVNTxV4F6deRK1eYMtHyBKEAKFK0aXIEUK9oBvlF6PNXMDsAw==
+
 pica@7.1.1, pica@^7.1.0:
   version "7.1.1"
   resolved "https://registry.yarnpkg.com/pica/-/pica-7.1.1.tgz#c68b42f5cfa6cc26eaec5cfa10cc0a5299ef3b7a"