setDeviceType

src/components/Actions.tsx

@@ -14,7 +14,7 @@ import {
   hasText,
 } from "../scene";
 import { SHAPES } from "../shapes";
-import { AppState, Zoom } from "../types";
+import { AppState, DeviceType, Zoom } from "../types";
 import { capitalizeString, isTransparent, setCursorForShape } from "../utils";
 import Stack from "./Stack";
 import { ToolButton } from "./ToolButton";
@@ -187,6 +187,7 @@ export const ShapesSwitcher = ({
   onImageAction,
   appState,
   penDetected,
+  setDeviceType,
 }: {
   canvas: HTMLCanvasElement | null;
   elementType: AppState["elementType"];
@@ -194,6 +195,7 @@ export const ShapesSwitcher = ({
   onImageAction: (data: { pointerType: PointerType | null }) => void;
   appState: AppState;
   penDetected: boolean;
+  setDeviceType: (obj: Partial<DeviceType>) => void;
 }) => {
   return (
     <>
@@ -219,6 +221,7 @@ export const ShapesSwitcher = ({
             onChange={({ pointerType }) => {
               if (!penDetected && pointerType === "pen") {
                 setAppState({ penMode: true });
+                setDeviceType({ penDetected: true });
               }
               setAppState({
                 elementType: value,

src/components/App.tsx

@@ -497,6 +497,7 @@ class App extends React.Component<AppProps, AppState> {
               appState={this.state}
               files={this.files}
               setAppState={this.setAppState}
+              setDeviceType={this.setDeviceType}
               actionManager={this.actionManager}
               elements={this.scene.getElements()}
               onCollabButtonClick={onCollabButtonClick}
@@ -902,7 +903,7 @@ class App extends React.Component<AppProps, AppState> {
         // ---------------------------------------------------------------------
         const { width, height } =
           this.excalidrawContainerRef.current!.getBoundingClientRect();
-        this.deviceType = updateObject(this.deviceType, {
+        this.setDeviceType({
           isMobile:
             width < MQ_MAX_WIDTH_PORTRAIT ||
             (height < MQ_MAX_HEIGHT_LANDSCAPE &&
@@ -918,9 +919,7 @@ class App extends React.Component<AppProps, AppState> {
         `(max-width: ${MQ_MAX_WIDTH_PORTRAIT}px), (max-height: ${MQ_MAX_HEIGHT_LANDSCAPE}px) and (max-width: ${MQ_MAX_WIDTH_LANDSCAPE}px)`,
       );
       const handler = () => {
-        this.deviceType = updateObject(this.deviceType, {
+        this.setDeviceType({ isMobile: mediaQuery.matches });
-          isMobile: mediaQuery.matches,
-        });
       };
       mediaQuery.addListener(handler);
       this.detachIsMobileMqHandler = () => mediaQuery.removeListener(handler);
@@ -1562,6 +1561,10 @@ class App extends React.Component<AppProps, AppState> {
     this.setState(obj);
   };
 
+  setDeviceType = (obj: Partial<DeviceType>): void => {
+    this.deviceType = updateObject(this.deviceType, obj);
+  };
+
   removePointer = (event: React.PointerEvent<HTMLElement> | PointerEvent) => {
     if (touchTimeout) {
       this.resetContextMenuTimer();
@@ -2866,7 +2869,7 @@ 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.deviceType.penDetected && event.pointerType === "pen") {
-      this.deviceType = updateObject(this.deviceType, { penDetected: true });
+      this.setDeviceType({ penDetected: true });
       this.setState({ penMode: true });
     }
 
@@ -2874,7 +2877,7 @@ class App extends React.Component<AppProps, AppState> {
       !this.deviceType.isTouchScreen &&
       ["pen", "touch"].includes(event.pointerType)
     ) {
-      this.deviceType = updateObject(this.deviceType, { isTouchScreen: true });
+      this.setDeviceType({ isTouchScreen: true });
     }
 
     if (isPanning) {

src/components/LayerUI.tsx

@@ -8,7 +8,13 @@ import { NonDeletedExcalidrawElement } from "../element/types";
 import { Language, t } from "../i18n";
 import { calculateScrollCenter, getSelectedElements } from "../scene";
 import { ExportType } from "../scene/types";
-import { AppProps, AppState, ExcalidrawProps, BinaryFiles } from "../types";
+import {
+  AppProps,
+  AppState,
+  ExcalidrawProps,
+  BinaryFiles,
+  DeviceType,
+} from "../types";
 import { muteFSAbortError } from "../utils";
 import { SelectedShapeActions, ShapesSwitcher, ZoomActions } from "./Actions";
 import { BackgroundPickerAndDarkModeToggle } from "./BackgroundPickerAndDarkModeToggle";
@@ -44,6 +50,7 @@ interface LayerUIProps {
   files: BinaryFiles;
   canvas: HTMLCanvasElement | null;
   setAppState: React.Component<any, AppState>["setState"];
+  setDeviceType: (obj: Partial<DeviceType>) => void;
   elements: readonly NonDeletedExcalidrawElement[];
   onCollabButtonClick?: () => void;
   onLockToggle: () => void;
@@ -74,6 +81,7 @@ const LayerUI = ({
   appState,
   files,
   setAppState,
+  setDeviceType,
   canvas,
   elements,
   onCollabButtonClick,
@@ -353,6 +361,7 @@ const LayerUI = ({
                             });
                           }}
                           penDetected={deviceType.penDetected}
+                          setDeviceType={setDeviceType}
                         />
                       </Stack.Row>
                     </Island>