add shortcuts modal

unified place where the user can know what shorcuts we support
The-Zagy · Sep 7, 2023 · d861d46 · d861d46
1 parent 1e3402f
commit d861d46
Show file tree

Hide file tree

Showing 5 changed files with 142 additions and 83 deletions.
diff --git a/src/components/DropDown.tsx b/src/components/DropDown.tsx
@@ -34,6 +34,7 @@ import {
  DialogTrigger,
 } from "@/components/ui/dialog";
 import { ActionExportScene, DestOpts } from "@/actions/ExportScene";
+import { SHORTCUTS } from "@/constants";
 
 function ResetCanvasAlert() {
  return (
@@ -176,6 +177,41 @@ function OpenSceneDialog() {
  );
 }
 
+function ShortCutsModal() {
+ return (
+ <Dialog>
+ {/*FIX: open dialog/alert dialog inside dropdown or context menu
+ @url https://github.com/radix-ui/primitives/issues/1836#issuecomment-1674338372
+ */}
+ <DialogTrigger asChild>
+ <DropdownMenuItem onSelect={(e) => e.preventDefault()}>
+ <Keyboard className="mr-2 h-4 w-4" />
+ <span>Keyboard shortcuts</span>
+ <DropdownMenuShortcut>⌘K</DropdownMenuShortcut>
+ </DropdownMenuItem>
+ </DialogTrigger>
+ <DialogContent className="h-full w-full cursor-auto overflow-y-auto md:h-4/6 md:w-3/4">
+ <DialogHeader>
+ <DialogTitle>Keyboard Shortcuts</DialogTitle>
+ </DialogHeader>
+ {Object.keys(SHORTCUTS).map((group) => (
+ <>
+ <h1 className="text-4xl" key={group}>
+ {group}
+ </h1>
+ {Object.keys(SHORTCUTS[group]).map((key) => (
+ <p>
+ {SHORTCUTS[group][key]["description"]}
+ {" : "}
+ <span>{SHORTCUTS[group][key]["keys"].join(" + ")}</span>
+ </p>
+ ))}
+ </>
+ ))}
+ </DialogContent>
+ </Dialog>
+ );
+}
 export function DropDown() {
  return (
  <div className="fixed left-2 top-2">
@@ -201,11 +237,7 @@ export function DropDown() {
  </DropdownMenuGroup>
  <DropdownMenuSeparator />
  <DropdownMenuGroup>
- <DropdownMenuItem>
- <Keyboard className="mr-2 h-4 w-4" />
- <span>Keyboard shortcuts</span>
- <DropdownMenuShortcut>⌘K</DropdownMenuShortcut>
- </DropdownMenuItem>
+ <ShortCutsModal />
  </DropdownMenuGroup>
  <DropdownMenuSeparator />
  <DropdownMenuItem>

diff --git a/src/components/ExportModal.tsx b/src/components/ExportModal.tsx
@@ -1,5 +1,5 @@
 import { Image } from "lucide-react";
-import React, { useEffect, useRef, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import { BsDownload } from "react-icons/bs";
 import { FiCopy } from "react-icons/fi";
 // import { Switch } from "./form/switch";

diff --git a/src/components/ToolbarElementConfig.tsx b/src/components/ToolbarElementConfig.tsx
@@ -31,6 +31,7 @@ import { commandManager } from "@/actions/commandManager";
 import { ActionDeleteSelected } from "@/actions";
 import { ActionExportScene, DestOpts } from "@/actions/ExportScene";
 import useKeyboardShortcut from "@/hooks/useShortcut";
+import { SHORTCUTS } from "@/constants";
 //import { BsTextCenter, BsTextLeft, BsTextRight } from "react-icons/bs";
 
 const gen = rough.generator();
@@ -180,8 +181,7 @@ export default function ToolbarLeft() {
  commandManager.executeCommand(new ActionExportScene(DestOpts.CLIPBOARD, true)),
  orderMatters: true,
  },
- "ControlLeft",
- "c",
+ ...SHORTCUTS["editor"]["copy"]["keys"],
  );
  useKeyboardShortcut(
  {

diff --git a/src/constants/index.ts b/src/constants/index.ts
@@ -5,3 +5,104 @@ const PREVIEW_IMAGE_WIDTH = 200;
 const PREVIEW_IMAGE_HEIGHT = 200;
 
 export { CELL_SIZE, CACHE_CANVAS_SIZE_THRESHOLD, PREVIEW_IMAGE_WIDTH, PREVIEW_IMAGE_HEIGHT };
+
+export const keysToCodes = {
+ Enter: "Enter",
+ Escape: "Escape",
+ ArrowUp: "ArrowUp",
+ ArrowDown: "ArrowDown",
+ ArrowLeft: "ArrowLeft",
+ ArrowRight: "ArrowRight",
+ Tab: "Tab",
+ Home: "Home",
+ End: "End",
+ PageUp: "PageUp",
+ PageDown: "PageDown",
+ Backspace: "Backspace",
+ Delete: "Delete",
+ Space: "Space",
+ ShiftLeft: "ShiftLeft",
+ ShiftRight: "ShiftRight",
+ ControlLeft: "ControlLeft",
+ ControlRight: "ControlRight",
+ AltLeft: "AltLeft",
+ AltRight: "AltRight",
+ Meta: "Meta",
+ a: "KeyA",
+ b: "KeyB",
+ c: "KeyC",
+ d: "KeyD",
+ e: "KeyE",
+ f: "KeyF",
+ g: "KeyG",
+ h: "KeyH",
+ i: "KeyI",
+ j: "KeyJ",
+ k: "KeyK",
+ l: "KeyL",
+ m: "KeyM",
+ n: "KeyN",
+ o: "KeyO",
+ p: "KeyP",
+ q: "KeyQ",
+ r: "KeyR",
+ s: "KeyS",
+ t: "KeyT",
+ u: "KeyU",
+ v: "KeyV",
+ w: "KeyW",
+ x: "KeyX",
+ y: "KeyY",
+ z: "KeyZ",
+ "0": "Digit0",
+ "1": "Digit1",
+ "2": "Digit2",
+ "3": "Digit3",
+ "4": "Digit4",
+ "5": "Digit5",
+ "6": "Digit6",
+ "7": "Digit7",
+ "8": "Digit8",
+ "9": "Digit9",
+ "`": "Backquote",
+ NumpadSubtract: "NumpadSubtract",
+ "-": "Minus",
+ "=": "Equal",
+ "[": "BracketLeft",
+ "]": "BracketRight",
+ "\\": "Backslash",
+ "'": "Quote",
+ ",": "Comma",
+ ".": "Period",
+ "/": "Slash",
+ ";": "Semicolon",
+ NumpadMultiply: "NumpadMultiply",
+ NumpadAdd: "NumpadAdd",
+} as const;
+export type Keys = keyof typeof keysToCodes;
+export type KeyCodes = (typeof keysToCodes)[keyof typeof keysToCodes];
+
+/**
+ * {
+ * group: {name: {description, keys}}
+ * }
+ */
+export const SHORTCUTS = {
+ editor: {
+ copy: { description: "copy selected", keys: ["ControlLeft", "c"] },
+ paste: { description: "paste into the canvas", keys: ["ControlLeft", "v"] },
+ undo: { description: "undo", keys: ["ControlLeft", "z"] },
+ delete: { description: "delete selected", keys: ["Delete"] },
+ },
+ tools: {
+ select: { description: "select", keys: ["1"] },
+ hand: { description: "hand(move in the canvas)", keys: ["2"] },
+ pen: { description: "create free hand draw", keys: ["3"] },
+ rect: { description: "create rect", keys: ["4"] },
+ line: { description: "create line", keys: ["5"] },
+ text: { description: "create text", keys: ["6"] },
+ erase: { description: "erase", keys: ["7"] },
+ },
+} as const satisfies {
+ [g: string]: { [k: string]: { description: string; keys: readonly [Keys, ...Keys[]] } };
+};
diff --git a/src/hooks/useShortcut.ts b/src/hooks/useShortcut.ts
@@ -1,80 +1,6 @@
 import { useEffect, useMemo, useRef } from "react";
+import { keysToCodes, Keys, KeyCodes } from "@/constants/index";
 
-const keysToCodes = {
- Enter: "Enter",
- Escape: "Escape",
- ArrowUp: "ArrowUp",
- ArrowDown: "ArrowDown",
- ArrowLeft: "ArrowLeft",
- ArrowRight: "ArrowRight",
- Tab: "Tab",
- Home: "Home",
- End: "End",
- PageUp: "PageUp",
- PageDown: "PageDown",
- Backspace: "Backspace",
- Delete: "Delete",
- Space: "Space",
- ShiftLeft: "ShiftLeft",
- ShiftRight: "ShiftRight",
- ControlLeft: "ControlLeft",
- ControlRight: "ControlRight",
- AltLeft: "AltLeft",
- AltRight: "AltRight",
- Meta: "Meta",
- a: "KeyA",
- b: "KeyB",
- c: "KeyC",
- d: "KeyD",
- e: "KeyE",
- f: "KeyF",
- g: "KeyG",
- h: "KeyH",
- i: "KeyI",
- j: "KeyJ",
- k: "KeyK",
- l: "KeyL",
- m: "KeyM",
- n: "KeyN",
- o: "KeyO",
- p: "KeyP",
- q: "KeyQ",
- r: "KeyR",
- s: "KeyS",
- t: "KeyT",
- u: "KeyU",
- v: "KeyV",
- w: "KeyW",
- x: "KeyX",
- y: "KeyY",
- z: "KeyZ",
- "0": "Digit0",
- "1": "Digit1",
- "2": "Digit2",
- "3": "Digit3",
- "4": "Digit4",
- "5": "Digit5",
- "6": "Digit6",
- "7": "Digit7",
- "8": "Digit8",
- "9": "Digit9",
- "`": "Backquote",
- NumpadSubtract: "NumpadSubtract",
- "-": "Minus",
- "=": "Equal",
- "[": "BracketLeft",
- "]": "BracketRight",
- "\\": "Backslash",
- "'": "Quote",
- ",": "Comma",
- ".": "Period",
- "/": "Slash",
- ";": "Semicolon",
- NumpadMultiply: "NumpadMultiply",
- NumpadAdd: "NumpadAdd",
-} as const;
-type Keys = keyof typeof keysToCodes;
-type KeyCodes = (typeof keysToCodes)[keyof typeof keysToCodes];
 export default function useKeyboardShortcut(
  options: {
  element?: HTMLElement | Window;