diff --git a/src/actions/manager.tsx b/src/actions/manager.tsx index 71eccf14..ef617776 100644 --- a/src/actions/manager.tsx +++ b/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 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; } } diff --git a/src/components/App.tsx b/src/components/App.tsx index 4696f2f7..cf64bc80 100644 --- a/src/components/App.tsx +++ b/src/components/App.tsx @@ -3701,15 +3701,16 @@ class App extends React.Component { 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, diff --git a/src/constants.ts b/src/constants.ts index 09c9e027..be74e938 100644 --- a/src/constants.ts +++ b/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", +};