Browse Source

differentiate freedraw config based on input type

dwelle 1 month ago
parent
commit
3c07ff358a
2 changed files with 28 additions and 9 deletions
  1. 23 5
      packages/element/src/freedraw.ts
  2. 5 4
      packages/excalidraw/components/App.tsx

+ 23 - 5
packages/element/src/freedraw.ts

@@ -6,20 +6,38 @@ import getStroke from "perfect-freehand";
 
 import type { StrokeOptions } from "perfect-freehand";
 
-import type { ExcalidrawFreeDrawElement } from "./types";
+import type { ExcalidrawFreeDrawElement, PointerType } from "./types";
 
-export const DRAWING_CONFIGS = {
+export const DRAWING_CONFIGS: Record<
+  PointerType | "default",
+  { streamline: number; simplify: number }
+> = {
   default: {
     streamline: 0.35,
     simplify: 0.1,
   },
-  // for optimal performance, we use a lower streamline and simplify
-  stylus: {
-    streamline: 0.35,
+  mouse: {
+    streamline: 0.6,
+    simplify: 0.1,
+  },
+  pen: {
+    // for optimal performance, we use a lower streamline and simplify
+    streamline: 0.2,
+    simplify: 0.1,
+  },
+  touch: {
+    streamline: 0.65,
     simplify: 0.1,
   },
 } as const;
 
+export const getFreedrawConfig = (eventType: string | null | undefined) => {
+  return (
+    DRAWING_CONFIGS[(eventType as PointerType | null) || "default"] ||
+    DRAWING_CONFIGS.default
+  );
+};
+
 /**
  * Calculates simulated pressure based on velocity between consecutive points.
  * Fast movement (large distances) -> lower pressure

+ 5 - 4
packages/excalidraw/components/App.tsx

@@ -233,6 +233,7 @@ import {
   isLineElement,
   isSimpleArrow,
   DRAWING_CONFIGS,
+  getFreedrawConfig,
 } from "@excalidraw/element";
 
 import type { LocalPoint, Radians } from "@excalidraw/math";
@@ -7475,6 +7476,8 @@ class App extends React.Component<AppProps, AppState> {
 
     const simulatePressure = event.pressure === 0.5 || event.pressure === 0;
 
+    const freedrawConfig = getFreedrawConfig(event.pointerType);
+
     const element = newFreeDrawElement({
       type: elementType,
       x: gridX,
@@ -7491,10 +7494,8 @@ class App extends React.Component<AppProps, AppState> {
       drawingConfigs: {
         fixedStrokeWidth: this.state.currentItemFixedStrokeWidth,
         streamline:
-          window.h?.debugFreedraw?.streamline ??
-          DRAWING_CONFIGS.default.streamline,
-        simplify:
-          window.h?.debugFreedraw?.simplify ?? DRAWING_CONFIGS.default.simplify,
+          window.h?.debugFreedraw?.streamline ?? freedrawConfig.streamline,
+        simplify: window.h?.debugFreedraw?.simplify ?? freedrawConfig.simplify,
       },
       locked: false,
       frameId: topLayerFrame ? topLayerFrame.id : null,