fix: hide canvas-modifying UI in view mode (#5815)

* fix: hide canvas-modifying UI in view mode

* add class for better targeting

* fix missing `key`

* fix: useOutsideClick not working in view mode

src/components/LayerUI.tsx

@@ -213,7 +213,8 @@ const LayerUI = ({
               padding={2}
               style={{ zIndex: 1 }}
             >
-              {actionManager.renderAction("loadScene")}
+              {!appState.viewModeEnabled &&
+                actionManager.renderAction("loadScene")}
               {/* // TODO barnabasmolnar/editor-redesign  */}
               {/* is this fine here? */}
               {appState.fileHandle &&
@@ -234,7 +235,8 @@ const LayerUI = ({
                 />
               )}
               {actionManager.renderAction("toggleShortcuts", undefined, true)}
-              {actionManager.renderAction("clearCanvas")}
+              {!appState.viewModeEnabled &&
+                actionManager.renderAction("clearCanvas")}
               <Separator />
               <MenuLinks />
               <Separator />
@@ -249,14 +251,16 @@ const LayerUI = ({
                 <div style={{ padding: "0 0.625rem" }}>
                   <LanguageList style={{ width: "100%" }} />
                 </div>
-                <div>
-                  <div style={{ fontSize: ".75rem", marginBottom: ".5rem" }}>
-                    {t("labels.canvasBackground")}
-                  </div>
-                  <div style={{ padding: "0 0.625rem" }}>
-                    {actionManager.renderAction("changeViewBackgroundColor")}
+                {!appState.viewModeEnabled && (
+                  <div>
+                    <div style={{ fontSize: ".75rem", marginBottom: ".5rem" }}>
+                      {t("labels.canvasBackground")}
+                    </div>
+                    <div style={{ padding: "0 0.625rem" }}>
+                      {actionManager.renderAction("changeViewBackgroundColor")}
+                    </div>
                   </div>
-                </div>
+                )}
               </div>
             </Island>
           </Section>
@@ -299,12 +303,12 @@ const LayerUI = ({
     return (
       <FixedSideContainer side="top">
         {renderWelcomeScreen && !appState.isLoading && (
-          <WelcomeScreen actionManager={actionManager} />
+          <WelcomeScreen appState={appState} actionManager={actionManager} />
         )}
         <div className="App-menu App-menu_top">
           <Stack.Col
             gap={6}
-            className={clsx({
+            className={clsx("App-menu_top__left", {
               "disable-pointerEvents": appState.zenModeEnabled,
             })}
           >
@@ -405,7 +409,9 @@ const LayerUI = ({
               />
             )}
             {renderTopRightUI?.(device.isMobile, appState)}
-            <LibraryButton appState={appState} setAppState={setAppState} />
+            {!appState.viewModeEnabled && (
+              <LibraryButton appState={appState} setAppState={setAppState} />
+            )}
           </div>
         </div>
       </FixedSideContainer>

src/components/MobileMenu.tsx

@@ -75,7 +75,7 @@ export const MobileMenu = ({
     return (
       <FixedSideContainer side="top" className="App-top-bar">
         {renderWelcomeScreen && !appState.isLoading && (
-          <WelcomeScreen actionManager={actionManager} />
+          <WelcomeScreen appState={appState} actionManager={actionManager} />
         )}
         <Section heading="shapes">
           {(heading: React.ReactNode) => (
@@ -127,11 +127,13 @@ export const MobileMenu = ({
                     title={t("toolBar.lock")}
                     isMobile
                   />
-                  <LibraryButton
-                    appState={appState}
-                    setAppState={setAppState}
-                    isMobile
-                  />
+                  {!appState.viewModeEnabled && (
+                    <LibraryButton
+                      appState={appState}
+                      setAppState={setAppState}
+                      isMobile
+                    />
+                  )}
                 </div>
               </Stack.Row>
             </Stack.Col>
@@ -187,7 +189,7 @@ export const MobileMenu = ({
     }
     return (
       <>
-        {actionManager.renderAction("loadScene")}
+        {!appState.viewModeEnabled && actionManager.renderAction("loadScene")}
         {renderJSONExportDialog()}
         {renderImageExportDialog()}
         <MenuItem
@@ -204,18 +206,20 @@ export const MobileMenu = ({
           />
         )}
         {actionManager.renderAction("toggleShortcuts", undefined, true)}
-        {actionManager.renderAction("clearCanvas")}
+        {!appState.viewModeEnabled && actionManager.renderAction("clearCanvas")}
         <Separator />
         <MenuLinks />
         <Separator />
-        <div style={{ marginBottom: ".5rem" }}>
-          <div style={{ fontSize: ".75rem", marginBottom: ".5rem" }}>
-            {t("labels.canvasBackground")}
-          </div>
-          <div style={{ padding: "0 0.625rem" }}>
-            {actionManager.renderAction("changeViewBackgroundColor")}
+        {!appState.viewModeEnabled && (
+          <div style={{ marginBottom: ".5rem" }}>
+            <div style={{ fontSize: ".75rem", marginBottom: ".5rem" }}>
+              {t("labels.canvasBackground")}
+            </div>
+            <div style={{ padding: "0 0.625rem" }}>
+              {actionManager.renderAction("changeViewBackgroundColor")}
+            </div>
           </div>
-        </div>
+        )}
         {actionManager.renderAction("toggleTheme")}
       </>
     );

src/components/WelcomeScreen.tsx

@@ -5,6 +5,7 @@ import { getShortcutFromShortcutName } from "../actions/shortcuts";
 import { COOKIES } from "../constants";
 import { collabDialogShownAtom } from "../excalidraw-app/collab/Collab";
 import { t } from "../i18n";
+import { AppState } from "../types";
 import {
   ExcalLogo,
   HelpIcon,
@@ -60,7 +61,13 @@ const WelcomeScreenItem = ({
   );
 };
 
-const WelcomeScreen = ({ actionManager }: { actionManager: ActionManager }) => {
+const WelcomeScreen = ({
+  appState,
+  actionManager,
+}: {
+  appState: AppState;
+  actionManager: ActionManager;
+}) => {
   const [, setCollabDialogShown] = useAtom(collabDialogShownAtom);
 
   let subheadingJSX;
@@ -68,12 +75,13 @@ const WelcomeScreen = ({ actionManager }: { actionManager: ActionManager }) => {
   if (isExcalidrawPlusSignedUser) {
     subheadingJSX = t("welcomeScreen.switchToPlusApp")
       .split(/(Excalidraw\+)/)
-      .map((bit) => {
+      .map((bit, idx) => {
         if (bit === "Excalidraw+") {
           return (
             <a
               style={{ pointerEvents: "all" }}
               href={`${process.env.REACT_APP_PLUS_APP}?utm_source=excalidraw&utm_medium=app&utm_content=welcomeScreenSignedInUser`}
+              key={idx}
             >
               Excalidraw+
             </a>
@@ -94,15 +102,17 @@ const WelcomeScreen = ({ actionManager }: { actionManager: ActionManager }) => {
         {subheadingJSX}
       </div>
       <div className="WelcomeScreen-items">
-        <WelcomeScreenItem
-          // TODO barnabasmolnar/editor-redesign
-          // do we want the internationalized labels here that are currently
-          // in use elsewhere or new ones?
-          label={t("buttons.load")}
-          onClick={() => actionManager.executeAction(actionLoadScene)}
-          shortcut={getShortcutFromShortcutName("loadScene")}
-          icon={LoadIcon}
-        />
+        {!appState.viewModeEnabled && (
+          <WelcomeScreenItem
+            // TODO barnabasmolnar/editor-redesign
+            // do we want the internationalized labels here that are currently
+            // in use elsewhere or new ones?
+            label={t("buttons.load")}
+            onClick={() => actionManager.executeAction(actionLoadScene)}
+            shortcut={getShortcutFromShortcutName("loadScene")}
+            icon={LoadIcon}
+          />
+        )}
         <WelcomeScreenItem
           label={t("labels.liveCollaboration")}
           shortcut={null}

src/hooks/useOutsideClick.ts

@@ -21,10 +21,11 @@ export const useOutsideClickHook = (handler: (event: Event) => void) => {
 
         handler(event);
       };
-      document.addEventListener("mousedown", listener);
+
+      document.addEventListener("pointerdown", listener);
       document.addEventListener("touchstart", listener);
       return () => {
-        document.removeEventListener("mousedown", listener);
+        document.removeEventListener("pointerdown", listener);
         document.removeEventListener("touchstart", listener);
       };
     },