From 085dd49f75ca26ca55b0337624ff5e49d0b430b6 Mon Sep 17 00:00:00 2001 From: codetypes Date: Thu, 26 Sep 2024 15:28:02 +0800 Subject: [PATCH] use keydown to handle shortcut key --- src/components/editor.tsx | 16 ++++++++-------- src/components/explorer.tsx | 14 +++++++------- src/components/workspace.tsx | 14 +++++++------- src/misc/keys.ts | 5 ++--- 4 files changed, 24 insertions(+), 25 deletions(-) diff --git a/src/components/editor.tsx b/src/components/editor.tsx index c87eab0..111e896 100644 --- a/src/components/editor.tsx +++ b/src/components/editor.tsx @@ -9,7 +9,7 @@ import { NodeModel, TreeGraphData, TreeModel } from "@/misc/b3type"; import * as b3util from "@/misc/b3util"; import { message } from "@/misc/hooks"; import i18n from "@/misc/i18n"; -import { Hotkey, isMacos, useKeyUp } from "@/misc/keys"; +import { Hotkey, isMacos, useKeyDown } from "@/misc/keys"; import Path from "@/misc/path"; import { mergeClassNames } from "@/misc/util"; import { ArrowDownOutlined, ArrowUpOutlined, CloseOutlined } from "@ant-design/icons"; @@ -958,13 +958,13 @@ export const Editor: FC = ({ onUpdate: updateState, data: editor, . const keysRef = useRef(null); - useKeyUp(Hotkey.Copy, keysRef, () => copyNode()); - useKeyUp(Hotkey.Replace, keysRef, () => replaceNode()); - useKeyUp(Hotkey.Paste, keysRef, () => pasteNode()); - useKeyUp(Hotkey.Undo, keysRef, () => undo()); - useKeyUp(Hotkey.Redo, keysRef, () => redo()); - useKeyUp([Hotkey.Insert, Hotkey.Enter], keysRef, () => createNode()); - useKeyUp([Hotkey.Delete, Hotkey.Backspace], keysRef, () => deleteNode()); + useKeyDown(Hotkey.Copy, keysRef, () => copyNode()); + useKeyDown(Hotkey.Replace, keysRef, () => replaceNode()); + useKeyDown(Hotkey.Paste, keysRef, () => pasteNode()); + useKeyDown(Hotkey.Undo, keysRef, () => undo()); + useKeyDown(Hotkey.Redo, keysRef, () => redo()); + useKeyDown([Hotkey.Insert, Hotkey.Enter], keysRef, () => createNode()); + useKeyDown([Hotkey.Delete, Hotkey.Backspace], keysRef, () => deleteNode()); editor.dispatch = (event: EditEvent, data: unknown) => { switch (event) { diff --git a/src/components/explorer.tsx b/src/components/explorer.tsx index 6d0c3a1..b93c7e1 100644 --- a/src/components/explorer.tsx +++ b/src/components/explorer.tsx @@ -3,7 +3,7 @@ import { NodeDef, getNodeType } from "@/misc/b3type"; import * as b3util from "@/misc/b3util"; import { modal } from "@/misc/hooks"; import i18n from "@/misc/i18n"; -import { Hotkey, isMacos, useKeyUp } from "@/misc/keys"; +import { Hotkey, isMacos, useKeyDown } from "@/misc/keys"; import Path from "@/misc/path"; import { DownOutlined } from "@ant-design/icons"; import { Button, Dropdown, Flex, FlexProps, Input, MenuProps, Space, Tree } from "antd"; @@ -399,7 +399,7 @@ export const Explorer: FC = () => { const keysRef = useRef(null); - useKeyUp([Hotkey.F2, isMacos ? Hotkey.Enter : ""], keysRef, (event) => { + useKeyDown([Hotkey.F2, isMacos ? Hotkey.Enter : ""], keysRef, (event) => { event.preventDefault(); const node = findFile(selectedKeys[0], workspace.fileTree!); if (node && node !== workspace.fileTree) { @@ -407,7 +407,7 @@ export const Explorer: FC = () => { } }); - useKeyUp([Hotkey.Delete, isMacos ? Hotkey.MacDelete : ""], keysRef, (event) => { + useKeyDown([Hotkey.Delete, isMacos ? Hotkey.MacDelete : ""], keysRef, (event) => { event.preventDefault(); const node = findFile(selectedKeys[0], workspace.fileTree!); if (node && node !== workspace.fileTree) { @@ -415,7 +415,7 @@ export const Explorer: FC = () => { } }); - useKeyUp(Hotkey.Escape, keysRef, (event) => { + useKeyDown(Hotkey.Escape, keysRef, (event) => { event.preventDefault(); const node = findFile(selectedKeys[0], workspace.fileTree!); if (node) { @@ -424,7 +424,7 @@ export const Explorer: FC = () => { } }); - useKeyUp(Hotkey.Duplicate, keysRef, (event) => { + useKeyDown(Hotkey.Duplicate, keysRef, (event) => { event.preventDefault(); const node = findFile(selectedKeys[0], workspace.fileTree!); if (node && node.isLeaf) { @@ -432,7 +432,7 @@ export const Explorer: FC = () => { } }); - useKeyUp(Hotkey.Copy, keysRef, (event) => { + useKeyDown(Hotkey.Copy, keysRef, (event) => { event.preventDefault(); const node = findFile(selectedKeys[0], workspace.fileTree!); if (node && node.isLeaf) { @@ -440,7 +440,7 @@ export const Explorer: FC = () => { } }); - useKeyUp(Hotkey.Paste, keysRef, (event) => { + useKeyDown(Hotkey.Paste, keysRef, (event) => { event.preventDefault(); const node = findFile(selectedKeys[0], workspace.fileTree!); if (node) { diff --git a/src/components/workspace.tsx b/src/components/workspace.tsx index aaf6c8b..60d9433 100644 --- a/src/components/workspace.tsx +++ b/src/components/workspace.tsx @@ -1,7 +1,7 @@ import { useSetting } from "@/contexts/setting-context"; import { EditorStore, useWorkspace } from "@/contexts/workspace-context"; import { modal } from "@/misc/hooks"; -import { Hotkey, isMacos, setInputFocus, useKeyUp } from "@/misc/keys"; +import { Hotkey, isMacos, setInputFocus, useKeyDown } from "@/misc/keys"; import Path from "@/misc/path"; import { app } from "@electron/remote"; import { useKeyPress } from "ahooks"; @@ -46,12 +46,12 @@ export const Workspace: FC = () => { const keysRef = useRef(null); - useKeyUp(Hotkey.Build, keysRef, (event) => { + useKeyDown(Hotkey.Build, keysRef, (event) => { event.preventDefault(); workspace.buildProject(); }); - useKeyUp(Hotkey.Save, keysRef, (event) => { + useKeyDown(Hotkey.Save, keysRef, (event) => { event.preventDefault(); workspace.save(); }); @@ -60,7 +60,7 @@ export const Workspace: FC = () => { event.preventDefault(); }); - useKeyUp(Hotkey.CloseEditor, null, (event) => { + useKeyDown(Hotkey.CloseEditor, null, (event) => { if (workspace.editing) { event.preventDefault(); if (workspace.editing.unsave) { @@ -72,17 +72,17 @@ export const Workspace: FC = () => { keysRef.current?.focus(); }); - useKeyUp(Hotkey.SearchTree, keysRef, (event) => { + useKeyDown(Hotkey.SearchTree, keysRef, (event) => { event.preventDefault(); workspace.onShowingSearch(true); }); - useKeyUp(Hotkey.SearchNode, keysRef, (event) => { + useKeyDown(Hotkey.SearchNode, keysRef, (event) => { event.preventDefault(); workspace.editing?.dispatch("searchNode"); }); - useKeyUp(Hotkey.JumpNode, keysRef, (event) => { + useKeyDown(Hotkey.JumpNode, keysRef, (event) => { event.preventDefault(); workspace.editing?.dispatch("jumpNode"); }); diff --git a/src/misc/keys.ts b/src/misc/keys.ts index f62aba0..0831baa 100644 --- a/src/misc/keys.ts +++ b/src/misc/keys.ts @@ -13,17 +13,16 @@ const hotkey = (key: string) => { return key.toLowerCase(); }; -export const useKeyUp = ( +export const useKeyDown = ( keyFilter: KeyFilter, target: Target, eventHandler: (event: KeyboardEvent, key: KeyType) => void, option?: Options ) => { option = option || {}; - option.events = ["keyup"]; option.target = target; option.exactMatch = true; - return useKeyPress(keyFilter, eventHandler, option); + return useKeyPress(keyFilter, (e, key) => !e.repeat && eventHandler(e, key), option); }; export const Hotkey = {