new web init

web_app/src/components/Shortcuts.tsx

@@ -0,0 +1,97 @@
+import { Keyboard } from "lucide-react"
+import useHotKey from "@/hooks/useHotkey"
+import { IconButton } from "@/components/ui/button"
+import { useToggle } from "@uidotdev/usehooks"
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "./ui/dialog"
+
+interface ShortcutProps {
+  content: string
+  keys: string[]
+}
+
+function ShortCut(props: ShortcutProps) {
+  const { content, keys } = props
+
+  return (
+    <div className="flex justify-between">
+      <div className="shortcut-description">{content}</div>
+      <div className="flex gap-[8px]">
+        {keys.map((k) => (
+          // TODO: 优化快捷键显示
+          <div className="border px-2 py-1 rounded-lg" key={k}>
+            {k}
+          </div>
+        ))}
+      </div>
+    </div>
+  )
+}
+
+const isMac = function () {
+  return /macintosh|mac os x/i.test(navigator.userAgent)
+}
+
+const isWindows = function () {
+  return /windows|win32/i.test(navigator.userAgent)
+}
+
+const CmdOrCtrl = () => {
+  return isMac() ? "Cmd" : "Ctrl"
+}
+
+export function Shortcuts() {
+  const [open, toggleOpen] = useToggle(false)
+
+  useHotKey("h", () => {
+    toggleOpen()
+  })
+
+  return (
+    <Dialog open={open} onOpenChange={toggleOpen}>
+      <DialogTrigger>
+        <IconButton tooltip="Hotkeys">
+          <Keyboard />
+        </IconButton>
+      </DialogTrigger>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>Hotkeys</DialogTitle>
+          <DialogDescription className="flex gap-2 flex-col pt-4">
+            <ShortCut content="Pan" keys={["Space + Drag"]} />
+            <ShortCut content="Reset Zoom/Pan" keys={["Esc"]} />
+            <ShortCut content="Decrease Brush Size" keys={["["]} />
+            <ShortCut content="Increase Brush Size" keys={["]"]} />
+            <ShortCut content="View Original Image" keys={["Hold Tab"]} />
+            <ShortCut
+              content="Multi-Stroke Drawing"
+              keys={[`Hold ${CmdOrCtrl()}`]}
+            />
+            <ShortCut content="Cancel Drawing" keys={["Esc"]} />
+
+            <ShortCut content="Rerun last mask" keys={["R"]} />
+            <ShortCut content="Undo" keys={[CmdOrCtrl(), "Z"]} />
+            <ShortCut content="Redo" keys={[CmdOrCtrl(), "Shift", "Z"]} />
+            <ShortCut content="Copy Result" keys={[CmdOrCtrl(), "C"]} />
+            <ShortCut content="Paste Image" keys={[CmdOrCtrl(), "V"]} />
+            <ShortCut
+              content="Trigger Manually Inpainting"
+              keys={["Shift", "R"]}
+            />
+            <ShortCut content="Toggle Hotkeys Dialog" keys={["H"]} />
+            <ShortCut content="Toggle Settings Dialog" keys={["S"]} />
+            <ShortCut content="Toggle File Manager" keys={["F"]} />
+          </DialogDescription>
+        </DialogHeader>
+      </DialogContent>
+    </Dialog>
+  )
+}
+
+export default Shortcuts