feat: Save penDetected and penMode, and detect pen already on ToolButton click (#4955)

* save penMode and penDetected to browser cache

* added on pointer down

* added onPointerDown

* factor out and merge handlers

Co-authored-by: dwelle <luzar.david@gmail.com>

src/appState.ts

@@ -132,8 +132,8 @@ const APP_STATE_STORAGE_CONF = (<
   editingLinearElement: { browser: false, export: false, server: false },
   elementLocked: { browser: true, export: false, server: false },
   elementType: { browser: true, export: false, server: false },
-  penMode: { browser: false, export: false, server: false },
+  penMode: { browser: true, export: false, server: false },
-  penDetected: { browser: false, export: false, server: false },
+  penDetected: { browser: true, export: false, server: false },
   errorMessage: { browser: false, export: false, server: false },
   exportBackground: { browser: true, export: false, server: false },
   exportEmbedScene: { browser: true, export: false, server: false },

src/components/Actions.tsx

@@ -15,7 +15,12 @@ import {
 } from "../scene";
 import { SHAPES } from "../shapes";
 import { AppState, Zoom } from "../types";
-import { capitalizeString, isTransparent, setCursorForShape } from "../utils";
+import {
+  capitalizeString,
+  isTransparent,
+  setCursorForShape,
+  withBatchedUpdates,
+} from "../utils";
 import Stack from "./Stack";
 import { ToolButton } from "./ToolButton";
 import { hasStrokeColor } from "../scene/comparisons";
@@ -192,7 +197,34 @@ export const ShapesSwitcher = ({
   setAppState: React.Component<any, AppState>["setState"];
   onImageAction: (data: { pointerType: PointerType | null }) => void;
   appState: AppState;
-}) => (
+}) => {
+  const onChange = withBatchedUpdates(
+    ({
+      elementType,
+      pointerType,
+    }: {
+      elementType: typeof SHAPES[number]["value"];
+      pointerType: PointerType | null;
+    }) => {
+      if (!appState.penDetected && pointerType === "pen") {
+        setAppState({
+          penDetected: true,
+          penMode: true,
+        });
+      }
+      setAppState({
+        elementType,
+        multiElement: null,
+        selectedElementIds: {},
+      });
+      setCursorForShape(canvas, { ...appState, elementType });
+      if (elementType === "image") {
+        onImageAction({ pointerType });
+      }
+    },
+  );
+
+  return (
     <>
       {SHAPES.map(({ value, icon, key }, index) => {
         const label = t(`toolBar.${value}`);
@@ -213,22 +245,18 @@ export const ShapesSwitcher = ({
             aria-label={capitalizeString(label)}
             aria-keyshortcuts={shortcut}
             data-testid={value}
+            onPointerDown={({ pointerType }) => {
+              onChange({ elementType: value, pointerType });
+            }}
             onChange={({ pointerType }) => {
-            setAppState({
+              onChange({ elementType: value, pointerType });
-              elementType: value,
-              multiElement: null,
-              selectedElementIds: {},
-            });
-            setCursorForShape(canvas, { ...appState, elementType: value });
-            if (value === "image") {
-              onImageAction({ pointerType });
-            }
             }}
           />
         );
       })}
     </>
   );
+};
 
 export const ZoomActions = ({
   renderAction,

src/components/ToolButton.tsx

@@ -48,6 +48,7 @@ type ToolButtonProps =
       type: "radio";
       checked: boolean;
       onChange?(data: { pointerType: PointerType | null }): void;
+      onPointerDown?(data: { pointerType: PointerType }): void;
     });
 
 export const ToolButton = React.forwardRef((props: ToolButtonProps, ref) => {
@@ -149,6 +150,7 @@ export const ToolButton = React.forwardRef((props: ToolButtonProps, ref) => {
       title={props.title}
       onPointerDown={(event) => {
         lastPointerTypeRef.current = event.pointerType || null;
+        props.onPointerDown?.({ pointerType: event.pointerType || null });
       }}
       onPointerUp={() => {
         requestAnimationFrame(() => {