Toggle minimap with "M" key

src/actions/actionMenu.tsx

@@ -7,6 +7,7 @@ import { register } from "./register";
 import { allowFullScreen, exitFullScreen, isFullScreen } from "../utils";
 import { CODES, KEYS } from "../keys";
 import { HelpIcon } from "../components/HelpIcon";
+import { MiniMap } from "../components/MiniMap";
 
 export const actionToggleCanvasMenu = register({
   name: "toggleCanvasMenu",
@@ -84,3 +85,21 @@ export const actionShortcuts = register({
   ),
   keyTest: (event) => event.key === KEYS.QUESTION_MARK,
 });
+
+export const actionMinimap = register({
+  name: "toggleMinimap",
+  perform: (_elements, appState) => {
+    return {
+      appState: {
+        ...appState,
+        isMinimapEnabled: !appState.isMinimapEnabled,
+      },
+      commitToHistory: false,
+    };
+  },
+  PanelComponent: ({ appState, elements }) =>
+    appState.isMinimapEnabled ? (
+      <MiniMap appState={appState} elements={getNonDeletedElements(elements)} />
+    ) : null,
+  keyTest: (event) => event.key === KEYS.M,
+});

src/actions/index.ts

@@ -44,6 +44,7 @@ export {
   actionToggleEditMenu,
   actionFullScreen,
   actionShortcuts,
+  actionMinimap,
 } from "./actionMenu";
 
 export { actionGroup, actionUngroup } from "./actionGroup";

src/actions/types.ts

@@ -85,7 +85,8 @@ export type ActionName =
   | "alignHorizontallyCentered"
   | "distributeHorizontally"
   | "distributeVertically"
-  | "viewMode";
+  | "viewMode"
+  | "toggleMinimap";
 
 export interface Action {
   name: ActionName;

src/appState.ts

@@ -73,6 +73,7 @@ export const getDefaultAppState = (): Omit<
     zenModeEnabled: false,
     zoom: { value: 1 as NormalizedZoomValue, translation: { x: 0, y: 0 } },
     viewModeEnabled: false,
+    isMinimapEnabled: false,
   };
 };
 
@@ -153,6 +154,7 @@ const APP_STATE_STORAGE_CONF = (<
   zenModeEnabled: { browser: true, export: false },
   zoom: { browser: true, export: false },
   viewModeEnabled: { browser: false, export: false },
+  isMinimapEnabled: { browser: true, export: false },
 });
 
 const _clearAppStateForStorage = <ExportType extends "export" | "browser">(

src/components/LayerUI.tsx

@@ -41,7 +41,6 @@ import Stack from "./Stack";
 import { ToolButton } from "./ToolButton";
 import { Tooltip } from "./Tooltip";
 import { UserList } from "./UserList";
-import { MiniMap } from "./MiniMap";
 
 interface LayerUIProps {
   actionManager: ActionManager;
@@ -603,7 +602,7 @@ const LayerUI = ({
       >
         {renderCustomFooter?.(false)}
         {actionManager.renderAction("toggleShortcuts")}
-        <MiniMap appState={appState} elements={elements} />
+        {actionManager.renderAction("toggleMinimap")}
       </div>
       <button
         className={clsx("disable-zen-mode", {

src/keys.ts

@@ -43,6 +43,7 @@ export const KEYS = {
   D: "d",
   E: "e",
   L: "l",
+  M: "m",
   O: "o",
   P: "p",
   Q: "q",

src/types.ts

@@ -117,6 +117,7 @@ export type AppState = {
         shown: true;
         data: Spreadsheet;
       };
+  isMinimapEnabled: boolean;
 };
 
 export type NormalizedZoomValue = number & { _brand: "normalizedZoom" };