瀏覽代碼

fix: revert preferred selection to box once you switch to `full` UI (#10160)

David Luzar 1 周之前
父節點
當前提交
8608d7b2e0
共有 1 個文件被更改,包括 22 次插入11 次删除
  1. 22 11
      packages/excalidraw/components/App.tsx

+ 22 - 11
packages/excalidraw/components/App.tsx

@@ -2487,18 +2487,29 @@ class App extends React.Component<AppProps, AppState> {
       canFitSidebar: editorWidth > sidebarBreakpoint,
       canFitSidebar: editorWidth > sidebarBreakpoint,
     });
     });
 
 
+    const stylesPanelMode =
+      // NOTE: we could also remove the isMobileOrTablet check here and
+      // always switch to compact mode when the editor is narrow (e.g. < MQ_MIN_WIDTH_DESKTOP)
+      // but not too narrow (> MQ_MAX_WIDTH_MOBILE)
+      this.isTabletBreakpoint(editorWidth, editorHeight) && isMobileOrTablet()
+        ? "compact"
+        : this.isMobileBreakpoint(editorWidth, editorHeight)
+        ? "mobile"
+        : "full";
+
     // also check if we need to update the app state
     // also check if we need to update the app state
-    this.setState({
-      stylesPanelMode:
-        // NOTE: we could also remove the isMobileOrTablet check here and
-        // always switch to compact mode when the editor is narrow (e.g. < MQ_MIN_WIDTH_DESKTOP)
-        // but not too narrow (> MQ_MAX_WIDTH_MOBILE)
-        this.isTabletBreakpoint(editorWidth, editorHeight) && isMobileOrTablet()
-          ? "compact"
-          : this.isMobileBreakpoint(editorWidth, editorHeight)
-          ? "mobile"
-          : "full",
-    });
+    this.setState((prevState) => ({
+      stylesPanelMode,
+      // reset to box selection mode if the UI changes to full
+      // where you'd not be able to change the mode yourself currently
+      preferredSelectionTool:
+        stylesPanelMode === "full"
+          ? {
+              type: "selection",
+              initialized: true,
+            }
+          : prevState.preferredSelectionTool,
+    }));
 
 
     if (prevEditorState !== nextEditorState) {
     if (prevEditorState !== nextEditorState) {
       this.device = { ...this.device, editor: nextEditorState };
       this.device = { ...this.device, editor: nextEditorState };