mq_stuff

Author: dwelle

packages/common/src/utils.ts

@@ -23,6 +23,11 @@ import {
   isAndroid,
   isIOS,
   WINDOWS_EMOJI_FALLBACK_FONT,
+  MQ_MAX_HEIGHT_LANDSCAPE,
+  MQ_MAX_MOBILE,
+  MQ_MAX_TABLET,
+  MQ_MAX_WIDTH_LANDSCAPE,
+  MQ_MIN_TABLET,
 } from "./constants";
 
 import type { MaybePromise, ResolutionType } from "./utility-types";
@@ -1324,3 +1329,34 @@ export const isMobileOrTablet = (): boolean => {
   }
   return false;
 };
+
+export const getUIMode = ({
+  width,
+  height,
+}: {
+  width: number;
+  height: number;
+}) => {
+  return isTabletBreakpoint(width, height) && isMobileOrTablet()
+    ? "compact"
+    : isMobileBreakpoint(width, height)
+    ? "mobile"
+    : "full";
+};
+
+export const isMobileBreakpoint = (width: number, height: number) => {
+  return (
+    width <= MQ_MAX_MOBILE ||
+    (height < MQ_MAX_HEIGHT_LANDSCAPE && width < MQ_MAX_WIDTH_LANDSCAPE)
+  );
+};
+
+export const isTabletBreakpoint = (
+  editorWidth: number,
+  editorHeight: number,
+) => {
+  const minSide = Math.min(editorWidth, editorHeight);
+  const maxSide = Math.max(editorWidth, editorHeight);
+
+  return minSide >= MQ_MIN_TABLET && maxSide <= MQ_MAX_TABLET;
+};

packages/excalidraw/components/App.tsx

@@ -99,12 +99,10 @@ import {
   MINIMUM_ARROW_SIZE,
   DOUBLE_TAP_POSITION_THRESHOLD,
   isMobileOrTablet,
-  MQ_MAX_MOBILE,
-  MQ_MIN_TABLET,
-  MQ_MAX_TABLET,
-  MQ_MAX_HEIGHT_LANDSCAPE,
-  MQ_MAX_WIDTH_LANDSCAPE,
   isProdEnv,
+  isMobileBreakpoint,
+  isTabletBreakpoint,
+  getUIMode,
 } from "@excalidraw/common";
 
 import {
@@ -2452,20 +2450,6 @@ class App extends React.Component<AppProps, AppState> {
     }
   };
 
-  private isMobileBreakpoint = (width: number, height: number) => {
-    return (
-      width <= MQ_MAX_MOBILE ||
-      (height < MQ_MAX_HEIGHT_LANDSCAPE && width < MQ_MAX_WIDTH_LANDSCAPE)
-    );
-  };
-
-  private isTabletBreakpoint = (editorWidth: number, editorHeight: number) => {
-    const minSide = Math.min(editorWidth, editorHeight);
-    const maxSide = Math.max(editorWidth, editorHeight);
-
-    return minSide >= MQ_MIN_TABLET && maxSide <= MQ_MAX_TABLET;
-  };
-
   private refreshViewportBreakpoints = () => {
     const container = this.excalidrawContainerRef.current;
     if (!container) {
@@ -2479,7 +2463,7 @@ class App extends React.Component<AppProps, AppState> {
 
     const nextViewportState = updateObject(prevViewportState, {
       isLandscape: editorWidth > editorHeight,
-      isMobile: this.isMobileBreakpoint(editorWidth, editorHeight),
+      isMobile: isMobileBreakpoint(editorWidth, editorHeight),
     });
 
     if (prevViewportState !== nextViewportState) {
@@ -2505,28 +2489,22 @@ class App extends React.Component<AppProps, AppState> {
 
     const prevEditorState = this.device.editor;
 
+    const uiMode =
+      this.props.getUIMode?.({ width: editorWidth, height: editorHeight }) ??
+      getUIMode({ width: editorWidth, height: editorHeight });
+
     const nextEditorState = updateObject(prevEditorState, {
-      isMobile: this.isMobileBreakpoint(editorWidth, editorHeight),
+      isMobile: uiMode === "mobile",
       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
     this.setState((prevState) => ({
-      stylesPanelMode,
+      stylesPanelMode: uiMode,
       // 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"
+        uiMode === "full"
           ? {
               type: "selection",
               initialized: true,

packages/excalidraw/components/LayerUI.tsx

@@ -232,7 +232,10 @@ const LayerUI = ({
     <div style={{ position: "relative" }}>
       {/* wrapping to Fragment stops React from occasionally complaining
                 about identical Keys */}
-      <tunnels.MainMenuTunnel.Out />
+      <div className="excalidraw-ui-top-left">
+        {renderTopLeftUI?.(false, appState)}
+        <tunnels.MainMenuTunnel.Out />
+      </div>
       {renderWelcomeScreen && <tunnels.WelcomeScreenMenuHintTunnel.Out />}
     </div>
   );

packages/excalidraw/components/MobileMenu.tsx

@@ -65,8 +65,11 @@ export const MobileMenu = ({
     DefaultSidebarTriggerTunnel,
   } = useTunnels();
   const renderAppTopBar = () => {
-    const topRightUI = renderTopRightUI?.(true, appState) ?? (
-      <DefaultSidebarTriggerTunnel.Out />
+    const topRightUI = (
+      <div className="excalidraw-ui-top-right">
+        {renderTopRightUI?.(true, appState)}
+        <DefaultSidebarTriggerTunnel.Out />
+      </div>
     );
 
     const topLeftUI = (

packages/excalidraw/css/styles.scss

@@ -321,6 +321,12 @@ body.excalidraw-cursor-resize * {
     gap: 0.5rem;
   }
 
+  .excalidraw-ui-top-right {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+  }
+
   .App-toolbar-content {
     display: flex;
     flex-direction: column;

packages/excalidraw/index.tsx

@@ -61,6 +61,7 @@ const ExcalidrawBase = (props: ExcalidrawProps) => {
     ui,
     interactive,
     activeTool,
+    getUIMode,
   } = props;
 
   const canvasActions = props.UIOptions?.canvasActions;
@@ -159,6 +160,7 @@ const ExcalidrawBase = (props: ExcalidrawProps) => {
           ui={ui}
           interactive={interactive}
           activeTool={activeTool}
+          getUIMode={getUIMode}
         >
           {children}
         </App>
@@ -336,3 +338,9 @@ export { duplicateElements, duplicateElement } from "../element/src/duplicate";
 export { parseMermaidToExcalidraw } from "@excalidraw/mermaid-to-excalidraw";
 
 export { CommandPalette } from "./components/CommandPalette/CommandPalette";
+
+export {
+  getUIMode,
+  isMobileBreakpoint,
+  isTabletBreakpoint,
+} from "@excalidraw/common";

packages/excalidraw/types.ts

@@ -648,6 +648,10 @@ export interface ExcalidrawProps {
         type: "custom";
         customType: string;
       };
+  getUIMode?: (editorDimensions: {
+    width: number;
+    height: number;
+  }) => "mobile" | "compact" | "full";
 }
 
 export type SceneData = {