fix: allow to toggle between modes when view only mode to make UI consistent (#3009)

src/actions/manager.tsx

@@ -8,6 +8,7 @@ import {
 } from "./types";
 import { ExcalidrawElement } from "../element/types";
 import { AppState, ExcalidrawProps } from "../types";
+import { MODES } from "../constants";
 
 // This is the <App> component, but for now we don't care about anything but its
 // `canvas` state.
@@ -68,7 +69,7 @@ export class ActionManager implements ActionsManagerInterface {
     }
     const { viewModeEnabled } = this.getAppState();
     if (viewModeEnabled) {
-      if (data[0].name !== "viewMode") {
+      if (!Object.values(MODES).includes(data[0].name)) {
         return false;
       }
     }

src/components/App.tsx

@@ -3701,15 +3701,16 @@ class App extends React.Component<ExcalidrawProps, AppState> {
       options.push(actionCopyAsSvg);
     }
     if (!element) {
-      const viewModeOptions: ContextMenuOption[] = [
+      const viewModeOptions = [
         ...options,
+        typeof this.props.gridModeEnabled === "undefined" &&
+          actionToggleGridMode,
+        typeof this.props.zenModeEnabled === "undefined" && actionToggleZenMode,
+        typeof this.props.viewModeEnabled === "undefined" &&
+          actionToggleViewMode,
         actionToggleStats,
       ];
 
-      if (typeof this.props.viewModeEnabled === "undefined") {
-        viewModeOptions.push(actionToggleViewMode);
-      }
-
       ContextMenu.push({
         options: viewModeOptions,
         top: clientY,

src/constants.ts

@@ -99,3 +99,9 @@ export const ZOOM_STEP = 0.1;
 export const IDLE_THRESHOLD = 60_000;
 // Report a user active each ACTIVE_THRESHOLD milliseconds
 export const ACTIVE_THRESHOLD = 3_000;
+
+export const MODES = {
+  VIEW: "viewMode",
+  ZEN: "zenMode",
+  GRID: "gridMode",
+};