diff --git a/packages/excalidraw/components/App.tsx b/packages/excalidraw/components/App.tsx index 98d0a12060..1f8e437eeb 100644 --- a/packages/excalidraw/components/App.tsx +++ b/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(deviceContextInitialValue); DeviceContext.displayName = "DeviceContext"; @@ -2451,7 +2450,6 @@ class App extends React.Component { 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 { 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 { 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 { ) { this.refreshViewportBreakpoints(); this.refreshEditorBreakpoints(); + this.refreshTouchScreen(); } if (supportsResizeObserver && this.excalidrawContainerRef.current) { @@ -2626,6 +2635,7 @@ class App extends React.Component { .getElementsIncludingDeleted() .forEach((element) => ShapeCache.delete(element)); this.refreshViewportBreakpoints(); + this.refreshTouchScreen(); this.updateDOMRect(); if (!supportsResizeObserver) { this.refreshEditorBreakpoints(); diff --git a/packages/excalidraw/components/LayerUI.tsx b/packages/excalidraw/components/LayerUI.tsx index 2e973e8fa2..73875f668a 100644 --- a/packages/excalidraw/components/LayerUI.tsx +++ b/packages/excalidraw/components/LayerUI.tsx @@ -284,7 +284,7 @@ const LayerUI = ({ {renderCanvasActions()} {shouldRenderSelectedShapeActions && - renderSelectedShapeActions(device.editor.isTablet)} + renderSelectedShapeActions(device.isTouchMobile)} {!appState.viewModeEnabled && appState.openDialog?.name !== "elementLinkSelector" && ( diff --git a/packages/excalidraw/types.ts b/packages/excalidraw/types.ts index a19b88ba22..47ec484f8b 100644 --- a/packages/excalidraw/types.ts +++ b/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 = {