add isTouchMobile to device

packages/excalidraw/components/App.tsx

@@ -473,14 +473,13 @@ const deviceContextInitialValue = {
   viewport: {
     isMobile: false,
     isLandscape: false,
-    isTablet: false,
   },
   editor: {
     isMobile: false,
     canFitSidebar: false,
-    isTablet: false,
   },
   isTouchScreen: false,
+  isTouchMobile: false,
 };
 const DeviceContext = React.createContext<Device>(deviceContextInitialValue);
 DeviceContext.displayName = "DeviceContext";
@@ -2451,7 +2450,6 @@ class App extends React.Component<AppProps, AppState> {
     const nextViewportState = updateObject(prevViewportState, {
       isLandscape: viewportWidth > viewportHeight,
       isMobile: this.isMobileBreakpoint(viewportWidth, viewportHeight),
-      isTablet: this.isTablet(),
     });
 
     if (prevViewportState !== nextViewportState) {
@@ -2461,6 +2459,17 @@ class App extends React.Component<AppProps, AppState> {
     return false;
   };
 
+  private refreshTouchScreen = () => {
+    const previousIsTouchMobile = this.device.isTouchMobile;
+    const currentIsTouchMobile = this.isMobileOrTablet();
+
+    if (previousIsTouchMobile !== currentIsTouchMobile) {
+      this.device = { ...this.device, isTouchMobile: currentIsTouchMobile };
+      return true;
+    }
+    return false;
+  };
+
   private refreshEditorBreakpoints = () => {
     const container = this.excalidrawContainerRef.current;
     if (!container) {
@@ -2480,7 +2489,6 @@ class App extends React.Component<AppProps, AppState> {
     const nextEditorState = updateObject(prevEditorState, {
       isMobile: this.isMobileBreakpoint(editorWidth, editorHeight),
       canFitSidebar: editorWidth > sidebarBreakpoint,
-      isTablet: this.isTablet(),
     });
 
     if (prevEditorState !== nextEditorState) {
@@ -2567,6 +2575,7 @@ class App extends React.Component<AppProps, AppState> {
     ) {
       this.refreshViewportBreakpoints();
       this.refreshEditorBreakpoints();
+      this.refreshTouchScreen();
     }
 
     if (supportsResizeObserver && this.excalidrawContainerRef.current) {
@@ -2626,6 +2635,7 @@ class App extends React.Component<AppProps, AppState> {
       .getElementsIncludingDeleted()
       .forEach((element) => ShapeCache.delete(element));
     this.refreshViewportBreakpoints();
+    this.refreshTouchScreen();
     this.updateDOMRect();
     if (!supportsResizeObserver) {
       this.refreshEditorBreakpoints();

packages/excalidraw/components/LayerUI.tsx

@@ -284,7 +284,7 @@ const LayerUI = ({
           <Stack.Col gap={6} className={clsx("App-menu_top__left")}>
             {renderCanvasActions()}
             {shouldRenderSelectedShapeActions &&
-              renderSelectedShapeActions(device.editor.isTablet)}
+              renderSelectedShapeActions(device.isTouchMobile)}
           </Stack.Col>
           {!appState.viewModeEnabled &&
             appState.openDialog?.name !== "elementLinkSelector" && (

packages/excalidraw/types.ts

@@ -879,14 +879,13 @@ export type Device = Readonly<{
   viewport: {
     isMobile: boolean;
     isLandscape: boolean;
-    isTablet: boolean;
   };
   editor: {
     isMobile: boolean;
-    isTablet: boolean;
     canFitSidebar: boolean;
   };
   isTouchScreen: boolean;
+  isTouchMobile: boolean;
 }>;
 
 export type FrameNameBounds = {