update node layout

src/components/editor.tsx

@@ -19,7 +19,7 @@ import {
   useWorkspace,
 } from "../contexts/workspace-context";
 import i18n from "../misc/i18n";
-import { Hotkey, isMacos, useKeyDown } from "../misc/keys";
+import { Hotkey, isMacos, useKeyPress } from "../misc/keys";
 import { mergeClassNames } from "../misc/util";
 import { FilterOption, Graph } from "./graph";
 import "./register-node";
@@ -129,7 +129,7 @@ export const Editor: FC<EditorProps> = ({ onChange, data: editor, ...props }) =>
   );
 
   const keysRef = useRef<HTMLDivElement>(null);
-  useKeyDown(
+  useKeyPress(
     [
       Hotkey.Copy,
       Hotkey.Replace,
@@ -148,7 +148,7 @@ export const Editor: FC<EditorProps> = ({ onChange, data: editor, ...props }) =>
     }
   );
 
-  useKeyDown([Hotkey.Undo, Hotkey.Redo], null, (e, key) => {
+  useKeyPress([Hotkey.Undo, Hotkey.Redo], null, (e, key) => {
     if (e.target instanceof HTMLInputElement || e.target instanceof HTMLTextAreaElement) {
       return;
     }

src/components/explorer.tsx

@@ -17,7 +17,7 @@ import { getNodeType } from "../misc/b3type";
 import * as b3util from "../misc/b3util";
 import { modal } from "../misc/hooks";
 import i18n from "../misc/i18n";
-import { Hotkey, isMacos, useKeyDown } from "../misc/keys";
+import { Hotkey, isMacos, useKeyPress } from "../misc/keys";
 import Path from "../misc/path";
 
 const { DirectoryTree } = Tree;
@@ -631,7 +631,7 @@ export const Explorer: FC = () => {
 
   const keysRef = useRef<HTMLDivElement>(null);
 
-  useKeyDown([Hotkey.F2, isMacos ? Hotkey.Enter : ""], keysRef, (event) => {
+  useKeyPress([Hotkey.F2, isMacos ? Hotkey.Enter : ""], keysRef, (event) => {
     event.preventDefault();
     const node = findFile(selectedKeys[0], workspace.fileTree!);
     if (node && node !== workspace.fileTree && !node.editing) {
@@ -639,7 +639,7 @@ export const Explorer: FC = () => {
     }
   });
 
-  useKeyDown([Hotkey.Delete, isMacos ? Hotkey.MacDelete : ""], keysRef, (event) => {
+  useKeyPress([Hotkey.Delete, isMacos ? Hotkey.MacDelete : ""], keysRef, (event) => {
     event.preventDefault();
     const node = findFile(selectedKeys[0], workspace.fileTree!);
     if (node && node !== workspace.fileTree) {
@@ -647,7 +647,7 @@ export const Explorer: FC = () => {
     }
   });
 
-  useKeyDown(Hotkey.Escape, keysRef, (event) => {
+  useKeyPress(Hotkey.Escape, keysRef, (event) => {
     event.preventDefault();
     const node = findFile(selectedKeys[0], workspace.fileTree!);
     if (node) {
@@ -656,7 +656,7 @@ export const Explorer: FC = () => {
     }
   });
 
-  useKeyDown(Hotkey.Duplicate, keysRef, (event) => {
+  useKeyPress(Hotkey.Duplicate, keysRef, (event) => {
     event.preventDefault();
     const node = findFile(selectedKeys[0], workspace.fileTree!);
     if (node && node.isLeaf) {
@@ -664,7 +664,7 @@ export const Explorer: FC = () => {
     }
   });
 
-  useKeyDown(Hotkey.Copy, keysRef, (event) => {
+  useKeyPress(Hotkey.Copy, keysRef, (event) => {
     event.preventDefault();
     const node = findFile(selectedKeys[0], workspace.fileTree!);
     if (node && node.isLeaf) {
@@ -672,7 +672,7 @@ export const Explorer: FC = () => {
     }
   });
 
-  useKeyDown(Hotkey.Paste, keysRef, (event) => {
+  useKeyPress(Hotkey.Paste, keysRef, (event) => {
     event.preventDefault();
     const node = findFile(selectedKeys[0], workspace.fileTree!);
     if (node) {

src/components/register-node.ts

@@ -254,15 +254,15 @@ export const TreeNodeStyle: { [s in TreeNodeState]?: { [n in ShapeName]?: NodeSt
   },
   highlightargs: {
     "args-bg": { visibility: "visible" },
-    "args-text": { fill: "white", fontWeight: "bolder" },
+    "args-text": { fill: "white" },
   },
   highlightinput: {
     "input-bg": { visibility: "visible" },
-    "input-text": { fill: "white", fontWeight: "bolder" },
+    "input-text": { fill: "white" },
   },
   highlightoutput: {
     "output-bg": { visibility: "visible" },
-    "output-text": { fill: "white", fontWeight: "bolder" },
+    "output-text": { fill: "white" },
   },
   highlightgray: {
     "args-text": { fill: "#666" },
@@ -414,7 +414,7 @@ class TreeNode extends Rect {
         text: this._data.name,
         textBaseline: "top",
         x: this._nodeLayout === "compact" ? 26 : 46,
-        y: 5,
+        y: isMacos ? 3 : 2,
       },
       container
     );

src/components/workspace.tsx

@@ -1,5 +1,4 @@
 import { app } from "@electron/remote";
-import { useKeyPress } from "ahooks";
 import { Button, Flex, Layout, Space, Tabs, Tag, Tooltip } from "antd";
 import { FC, useEffect, useRef, useState } from "react";
 import { useTranslation } from "react-i18next";
@@ -12,7 +11,7 @@ import { useShallow } from "zustand/react/shallow";
 import { useSetting } from "../contexts/setting-context";
 import { EditorStore, useWorkspace } from "../contexts/workspace-context";
 import { modal } from "../misc/hooks";
-import { Hotkey, isMacos, setInputFocus, useKeyDown } from "../misc/keys";
+import { Hotkey, isMacos, setInputFocus, useKeyPress } from "../misc/keys";
 import Path from "../misc/path";
 import { Editor } from "./editor";
 import { Explorer } from "./explorer";
@@ -47,21 +46,21 @@ export const Workspace: FC = () => {
 
   const keysRef = useRef<HTMLDivElement>(null);
 
-  useKeyDown(Hotkey.Build, keysRef, (event) => {
+  useKeyPress(Hotkey.Build, keysRef, (event) => {
     event.preventDefault();
     workspace.buildProject();
   });
 
-  useKeyDown(Hotkey.Save, keysRef, (event) => {
+  useKeyPress(Hotkey.Save, keysRef, (event) => {
     event.preventDefault();
     workspace.save();
   });
 
-  useKeyPress(Hotkey.CloseEditor, (event) => {
+  useKeyPress(Hotkey.CloseEditor, null, (event) => {
     event.preventDefault();
   });
 
-  useKeyDown(Hotkey.CloseEditor, null, (event) => {
+  useKeyPress(Hotkey.CloseEditor, null, (event) => {
     if (workspace.editing) {
       event.preventDefault();
       if (workspace.editing.changed) {
@@ -73,17 +72,17 @@ export const Workspace: FC = () => {
     keysRef.current?.focus();
   });
 
-  useKeyDown(Hotkey.SearchTree, keysRef, (event) => {
+  useKeyPress(Hotkey.SearchTree, keysRef, (event) => {
     event.preventDefault();
     workspace.onShowingSearch(true);
   });
 
-  useKeyDown(Hotkey.SearchNode, keysRef, (event) => {
+  useKeyPress(Hotkey.SearchNode, keysRef, (event) => {
     event.preventDefault();
     workspace.editing?.dispatch?.("searchNode");
   });
 
-  useKeyDown(Hotkey.JumpNode, keysRef, (event) => {
+  useKeyPress(Hotkey.JumpNode, keysRef, (event) => {
     event.preventDefault();
     workspace.editing?.dispatch?.("jumpNode");
   });

src/misc/keys.ts

@@ -1,5 +1,5 @@
 import { BrowserWindow } from "@electron/remote";
-import useKeyPress, { KeyFilter, KeyType, Options, Target } from "ahooks/lib/useKeyPress";
+import _useKeyPress, { KeyFilter, KeyType, Options, Target } from "ahooks/lib/useKeyPress";
 import { Key } from "ts-key-enum";
 
 export const isMacos = process.platform === "darwin";
@@ -13,7 +13,7 @@ const hotkey = (key: string) => {
   return key.toLowerCase();
 };
 
-export const useKeyDown = (
+export const useKeyPress = (
   keyFilter: KeyFilter,
   target: Target,
   eventHandler: (event: KeyboardEvent, key: KeyType) => void,
@@ -22,7 +22,7 @@ export const useKeyDown = (
   option = option || {};
   option.target = target;
   option.exactMatch = true;
-  return useKeyPress(keyFilter, (e, key) => !e.repeat && eventHandler(e, key), option);
+  return _useKeyPress(keyFilter, (e, key) => !e.repeat && eventHandler(e, key), option);
 };
 
 export const Hotkey = {