diff --git a/packages/excalidraw/components/App.tsx b/packages/excalidraw/components/App.tsx index d0fe01db99..98d0a12060 100644 --- a/packages/excalidraw/components/App.tsx +++ b/packages/excalidraw/components/App.tsx @@ -473,10 +473,12 @@ const deviceContextInitialValue = { viewport: { isMobile: false, isLandscape: false, + isTablet: false, }, editor: { isMobile: false, canFitSidebar: false, + isTablet: false, }, isTouchScreen: false, }; @@ -2422,6 +2424,12 @@ class App extends React.Component { return isMobile || isTouchMobile; }; + private isTablet = (): boolean => { + const { clientWidth: viewportWidth } = document.body; + + return this.isMobileOrTablet() && viewportWidth > MQ_MAX_WIDTH_PORTRAIT; + }; + private isMobileBreakpoint = (width: number, height: number) => { return ( width < MQ_MAX_WIDTH_PORTRAIT || @@ -2443,6 +2451,7 @@ class App extends React.Component { const nextViewportState = updateObject(prevViewportState, { isLandscape: viewportWidth > viewportHeight, isMobile: this.isMobileBreakpoint(viewportWidth, viewportHeight), + isTablet: this.isTablet(), }); if (prevViewportState !== nextViewportState) { @@ -2471,6 +2480,7 @@ class App extends React.Component { const nextEditorState = updateObject(prevEditorState, { isMobile: this.isMobileBreakpoint(editorWidth, editorHeight), canFitSidebar: editorWidth > sidebarBreakpoint, + isTablet: this.isTablet(), }); if (prevEditorState !== nextEditorState) { diff --git a/packages/excalidraw/components/LayerUI.tsx b/packages/excalidraw/components/LayerUI.tsx index 86118a6ecb..2e973e8fa2 100644 --- a/packages/excalidraw/components/LayerUI.tsx +++ b/packages/excalidraw/components/LayerUI.tsx @@ -284,7 +284,7 @@ const LayerUI = ({ {renderCanvasActions()} {shouldRenderSelectedShapeActions && - renderSelectedShapeActions(device.isTouchScreen)} + renderSelectedShapeActions(device.editor.isTablet)} {!appState.viewModeEnabled && appState.openDialog?.name !== "elementLinkSelector" && ( diff --git a/packages/excalidraw/types.ts b/packages/excalidraw/types.ts index 8820aa459c..a19b88ba22 100644 --- a/packages/excalidraw/types.ts +++ b/packages/excalidraw/types.ts @@ -879,9 +879,11 @@ export type Device = Readonly<{ viewport: { isMobile: boolean; isLandscape: boolean; + isTablet: boolean; }; editor: { isMobile: boolean; + isTablet: boolean; canFitSidebar: boolean; }; isTouchScreen: boolean;