moved penMode from state to context

src/actions/actionCanvas.tsx

@@ -62,7 +62,6 @@ export const actionClearCanvas = register({
         theme: appState.theme,
         elementLocked: appState.elementLocked,
         penMode: appState.penMode,
-        penDetected: appState.penDetected,
         exportBackground: appState.exportBackground,
         exportEmbedScene: appState.exportEmbedScene,
         gridSize: appState.gridSize,

src/appState.ts

@@ -44,7 +44,6 @@ export const getDefaultAppState = (): Omit<
     elementLocked: false,
     elementType: "selection",
     penMode: false,
-    penDetected: false,
     errorMessage: null,
     exportBackground: true,
     exportScale: defaultExportScale,
@@ -133,7 +132,6 @@ const APP_STATE_STORAGE_CONF = (<
   elementLocked: { browser: true, export: false, server: false },
   elementType: { browser: true, export: false, server: false },
   penMode: { browser: false, export: false, server: false },
-  penDetected: { browser: false, 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/App.tsx

@@ -258,6 +258,7 @@ import {
 const defaultDeviceTypeContext: DeviceType = {
   isMobile: false,
   isTouchScreen: false,
+  penDetected: false,
 };
 const DeviceTypeContext = React.createContext(defaultDeviceTypeContext);
 export const useDeviceType = () => useContext(DeviceTypeContext);
@@ -295,6 +296,7 @@ class App extends React.Component<AppProps, AppState> {
   deviceType: DeviceType = {
     isMobile: false,
     isTouchScreen: false,
+    penDetected: false,
   };
   detachIsMobileMqHandler?: () => void;
 
@@ -2863,11 +2865,11 @@ class App extends React.Component<AppProps, AppState> {
 
     //fires only once, if pen is detected, penMode is enabled
     //the user can disable this by toggling the penMode button
-    if (!this.state.penDetected && event.pointerType === "pen") {
+    if (!this.deviceType.penDetected && event.pointerType === "pen") {
+      this.deviceType = updateObject(this.deviceType, { penDetected: true });
       this.setState((prevState) => {
         return {
           penMode: true,
-          penDetected: true,
         };
       });
     }

src/components/LayerUI.tsx

@@ -321,7 +321,7 @@ const LayerUI = ({
                       checked={appState.penMode}
                       onChange={onPenModeToggle}
                       title={t("toolBar.penMode")}
-                      penDetected={appState.penDetected}
+                      penDetected={deviceType.penDetected}
                     />
                     <LockButton
                       zenModeEnabled={zenModeEnabled}

src/components/MobileMenu.tsx

@@ -18,6 +18,7 @@ import { UserList } from "./UserList";
 import { BackgroundPickerAndDarkModeToggle } from "./BackgroundPickerAndDarkModeToggle";
 import { LibraryButton } from "./LibraryButton";
 import { PenModeButton } from "./PenModeButton";
+import { useDeviceType } from "./App";
 
 type MobileMenuProps = {
   appState: AppState;
@@ -61,6 +62,7 @@ export const MobileMenu = ({
   onImageAction,
   renderTopRightUI,
 }: MobileMenuProps) => {
+  const deviceType = useDeviceType();
   const renderToolbar = () => {
     return (
       <FixedSideContainer side="top" className="App-top-bar">
@@ -101,7 +103,7 @@ export const MobileMenu = ({
                   onChange={onPenModeToggle}
                   title={t("toolBar.penMode")}
                   isMobile
-                  penDetected={appState.penDetected}
+                  penDetected={deviceType.penDetected}
                 />
               </Stack.Row>
               {libraryMenu}

src/types.ts

@@ -80,7 +80,6 @@ export type AppState = {
   elementType: typeof SHAPES[number]["value"] | "eraser";
   elementLocked: boolean;
   penMode: boolean;
-  penDetected: boolean;
   exportBackground: boolean;
   exportEmbedScene: boolean;
   exportWithDarkMode: boolean;
@@ -412,4 +411,5 @@ export type ExcalidrawImperativeAPI = {
 export type DeviceType = {
   isMobile: boolean;
   isTouchScreen: boolean;
+  penDetected: boolean;
 };