add ctrl/command + g to jump node by id

2024-04-30 09:58:06 +08:00
1 parent 7878e58ab5
commit d32c457990
@@ -15,10 +15,10 @@ import { ArrowDownOutlined, ArrowUpOutlined, CloseOutlined } from "@ant-design/i
 import G6, { G6GraphEvent, Item, TreeGraph } from "@antv/g6";
 import { dialog } from "@electron/remote";
 import { useSize } from "ahooks";
-import { Button, Dropdown, Flex, FlexProps, Input, MenuProps } from "antd";
+import { Button, Dropdown, Flex, FlexProps, Input, InputRef, MenuProps } from "antd";
 import { clipboard } from "electron";
 import * as fs from "fs";
-import React, { FC, useCallback, useEffect, useMemo, useRef, useState } from "react";
+import React, { FC, KeyboardEvent, useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { FiDelete } from "react-icons/fi";
 import { IoMdReturnLeft } from "react-icons/io";
@@ -40,6 +40,8 @@ interface FilterOption {
  filterStr: string;
  filterCase: boolean;
  filterFocus: boolean;
+  filterType: string;
+  placeholder: string;
 }

 const createMenu = () => {
@@ -131,6 +133,7 @@ export const Editor: FC<EditorProps> = ({ onUpdate: updateState, data: editor, .
    workdir: useWorkspace((state) => state.workdir),
  };

+  const searchIptRef = useRef<InputRef>(null);
  const graphRef = useRef(null);
  const sizeRef = useRef(null);
  const editorSize = useSize(sizeRef);
@@ -144,6 +147,8 @@ export const Editor: FC<EditorProps> = ({ onUpdate: updateState, data: editor, .
    filterStr: "",
    filterCase: false,
    filterFocus: false,
+    filterType: "",
+    placeholder: ""
  });

  const onSearchChange = (option: FilterOption) => {
@@ -231,32 +236,38 @@ export const Editor: FC<EditorProps> = ({ onUpdate: updateState, data: editor, .
      node.highlightGray = option.filterFocus;
      if (option.filterStr) {
        let found = false;
-        if (includeString(node.name, option) || includeString(node.desc || node.def.desc, option)) {
-          found = true;
-        } else if (node.input) {
-          for (const str of node.input) {
-            if (includeString(str, option)) {
-              found = true;
-              break;
-            }
+        if (option.filterType === "nodeId") {
+          if (option.filterStr === node.id) {
+            found = true
          }
-        } else if (node.args) {
-          for (const str in node.args) {
-            if (includeString(str, option)) {
-              found = true;
-              break;
-            }
-          }
-        } else if (node.output) {
-          for (const str of node.output) {
-            if (includeString(str, option)) {
-              found = true;
-              break;
-            }
-          }
-        } else if (node.path) {
-          if (includeString(node.path, option)) {
+        } else {
+          if (includeString(node.name, option) || includeString(node.desc || node.def.desc, option)) {
            found = true;
+          } else if (node.input) {
+            for (const str of node.input) {
+              if (includeString(str, option)) {
+                found = true;
+                break;
+              }
+            }
+          } else if (node.args) {
+            for (const str in node.args) {
+              if (includeString(str, option)) {
+                found = true;
+                break;
+              }
+            }
+          } else if (node.output) {
+            for (const str of node.output) {
+              if (includeString(str, option)) {
+                found = true;
+                break;
+              }
+            }
+          } else if (node.path) {
+            if (includeString(node.path, option)) {
+              found = true;
+            }
          }
        }
        if (found) {
@@ -1008,7 +1019,11 @@ export const Editor: FC<EditorProps> = ({ onUpdate: updateState, data: editor, .
        break;
      }
      case "searchNode": {
-        setShowingSearch(true);
+        searchByType("");
+        break;
+      }
+      case "jumpNode": {
+        searchByType("nodeId");
        break;
      }
      case "editSubtree": {
@@ -1075,6 +1090,42 @@ export const Editor: FC<EditorProps> = ({ onUpdate: updateState, data: editor, .
    }
  };

+  const searchByType = (type: string) => {
+    let placeholder = ""
+    const filterType = type
+    // todo multiple parameter format judgment
+    switch (type) {
+      case "nodeId":
+        placeholder = t("jumpNode")
+        break
+      default:
+        placeholder = t("searchNode")
+        break
+    }
+    if (!showingSearch) {
+      setFilterOption({ ...filterOption, placeholder, filterType })
+      setShowingSearch(true)
+      return
+    }
+    if (filterOption.filterType === type) return searchIptRef.current?.focus()
+    setShowingSearch(false)
+    setTimeout(() => {
+      setShowingSearch(true)
+      setFilterOption({ ...filterOption, placeholder, filterType })
+      searchIptRef.current?.focus()
+    }, 50)
+  }
+
+  const handleKeyDown = (e: KeyboardEvent) => {
+    if (e.code === Hotkey.Enter) {
+      nextResult()
+    } else if ((e.ctrlKey || e.metaKey) && e.code === "KeyF") {
+      searchByType("")
+    } else if ((e.ctrlKey || e.metaKey) && e.code === "KeyG") {
+      searchByType("nodeId")
+    }
+  }
+
  return (
    <div
      {...props}
@@ -1104,6 +1155,8 @@ export const Editor: FC<EditorProps> = ({ onUpdate: updateState, data: editor, .
            }}
          >
            <Input
+              ref={searchIptRef}
+              placeholder={ filterOption.placeholder }
              autoFocus
              size="small"
              style={{
@@ -1119,24 +1172,26 @@ export const Editor: FC<EditorProps> = ({ onUpdate: updateState, data: editor, .
                  index: 0,
                })
              }
-              onKeyDown={(e) => e.code === Hotkey.Enter && nextResult()}
+              onKeyDown={ handleKeyDown }
              suffix={
                <Flex gap="2px" style={{ alignItems: "center" }}>
-                  <Button
-                    type="text"
-                    size="small"
-                    className={mergeClassNames(
-                      "b3-editor-button-filter",
-                      filterOption.filterCase && "b3-editor-button-filter-selected"
-                    )}
-                    icon={<VscCaseSensitive style={{ width: "18px", height: "18px" }} />}
-                    onClick={() =>
-                      onSearchChange({
-                        ...filterOption,
-                        filterCase: !filterOption.filterCase,
-                      })
-                    }
-                  />
+                  {filterOption.filterType !== "nodeId" && (
+                    <Button
+                      type="text"
+                      size="small"
+                      className={mergeClassNames(
+                        "b3-editor-button-filter",
+                        filterOption.filterCase && "b3-editor-button-filter-selected"
+                      )}
+                      icon={<VscCaseSensitive style={{ width: "18px", height: "18px" }} />}
+                      onClick={() =>
+                        onSearchChange({
+                          ...filterOption,
+                          filterCase: !filterOption.filterCase,
+                        })
+                      }
+                    />
+                  )}
                  <Button
                    type="text"
                    size="small"
@@ -1160,22 +1215,26 @@ export const Editor: FC<EditorProps> = ({ onUpdate: updateState, data: editor, .
                ? `${filterOption.index + 1}/${filterOption.results.length}`
                : ""}
            </div>
-            <Button
-              icon={<ArrowDownOutlined />}
-              type="text"
-              size="small"
-              style={{ width: "30px" }}
-              disabled={filterOption.results.length == 0}
-              onClick={nextResult}
-            />
-            <Button
-              icon={<ArrowUpOutlined />}
-              type="text"
-              size="small"
-              style={{ width: "30px" }}
-              disabled={filterOption.results.length == 0}
-              onClick={prevResult}
-            />
+            {filterOption.filterType !== "nodeId" && (
+              <Button
+                icon={<ArrowDownOutlined />}
+                type="text"
+                size="small"
+                style={{ width: "30px" }}
+                disabled={filterOption.results.length == 0}
+                onClick={nextResult}
+              />
+            )}
+            {filterOption.filterType !== "nodeId" && (
+              <Button
+                icon={<ArrowUpOutlined />}
+                type="text"
+                size="small"
+                style={{ width: "30px" }}
+                disabled={filterOption.results.length == 0}
+                onClick={prevResult}
+              />
+            )}
            <Button
              icon={<CloseOutlined />}
              type="text"
@@ -1189,6 +1248,8 @@ export const Editor: FC<EditorProps> = ({ onUpdate: updateState, data: editor, .
                  filterCase: false,
                  filterFocus: false,
                  filterStr: "",
+                  filterType: "",
+                  placeholder: ""
                });
                keysRef.current?.focus();
              }}
@@ -44,7 +44,7 @@ export const Workspace: FC = () => {
  const { width = 0, height = 0 } = useWindowSize();

  const keysRef = useHotkeys<HTMLDivElement>(
-    [Hotkey.Save, Hotkey.CloseEditor, Hotkey.SearchTree, Hotkey.Build, Hotkey.SearchNode],
+    [Hotkey.Save, Hotkey.CloseEditor, Hotkey.SearchTree, Hotkey.Build, Hotkey.SearchNode, Hotkey.JumpNode],
    (event) => {
      if (isHotkeyPressed(Hotkey.Save)) {
        event.preventDefault();
@@ -67,6 +67,9 @@ export const Workspace: FC = () => {
      } else if (isHotkeyPressed(Hotkey.SearchNode)) {
        event.preventDefault();
        workspace.editing?.dispatch("searchNode");
+      } else if (isHotkeyPressed(Hotkey.JumpNode)) {
+        event.preventDefault()
+        workspace.editing?.dispatch("jumpNode")
      }
    }
  );
@@ -338,6 +341,7 @@ export const Workspace: FC = () => {
                  { label: t("searchFile"), hotkeys: isMacos ? "⌘ P" : "Ctrl + P" },
                  { label: t("build"), hotkeys: isMacos ? "⌘ B" : "Ctrl + B" },
                  { label: t("searchNode"), hotkeys: isMacos ? "⌘ F" : "Ctrl + F" },
+                  { label: t("jumpNode"), hotkeys: isMacos ? "⌘ G" : "Ctrl + G" },
                  { label: t("insertNode"), hotkeys: "Enter" },
                  { label: t("deleteNode"), hotkeys: "Backspace" },
                ].map((v) => (
@@ -16,6 +16,7 @@ let buildDir: string | undefined;

 interface BatchScript {
  processTree?(tree: TreeModel): TreeModel;
+
  processNode?(node: NodeModel, tree: TreeModel): NodeModel;
 }

@@ -26,6 +27,7 @@ export type EditEvent =
  | "replace"
  | "delete"
  | "insert"
+  | "jumpNode"
  | "undo"
  | "redo"
  | "reload"
@@ -143,13 +145,13 @@ export type WorkspaceStore = {
 };

 const loadFileTree = (workdir: string, filename: string) => {
-  const fullpath = fs.realpathSync(`${workdir}/${filename}`);
+  const fullpath = fs.realpathSync(`${ workdir }/${ filename }`);
  if (!fs.existsSync(fullpath)) {
    return;
  }

  const stat = fs.statSync(fullpath);
-  if (!(stat.isDirectory() || fullpath.endsWith(".json"))) {
+  if (!( stat.isDirectory() || fullpath.endsWith(".json") )) {
    return;
  }

@@ -162,13 +164,13 @@ const loadFileTree = (workdir: string, filename: string) => {
    data.children = [];
    const files = fs.readdirSync(data.path);
    files.forEach((v) => {
-      const child = loadFileTree(workdir, `${filename}/${v}`);
+      const child = loadFileTree(workdir, `${ filename }/${ v }`);
      if (child) {
        data.children?.push(child);
      }
    });
    data.children.sort((a, b) => {
-      if ((a.children && b.children) || (!a.children && !b.children)) {
+      if (( a.children && b.children ) || ( !a.children && !b.children )) {
        return a.title.localeCompare(b.title);
      } else {
        return a.children ? -1 : 1;
@@ -186,7 +188,7 @@ const saveFile = (editor?: EditorStore) => {
  }
 };

-export const useWorkspace = create<WorkspaceStore>((set, get) => ({
+export const useWorkspace = create<WorkspaceStore>((set, get) => ( {
  allFiles: [],
  fileTree: undefined,
  editors: [],
@@ -208,15 +210,15 @@ export const useWorkspace = create<WorkspaceStore>((set, get) => ({
        if (!fs.existsSync(path)) {
          useSetting.getState().removeRecent(path);
        }
-        message.error(`load workspace error: ${path}`);
+        message.error(`load workspace error: ${ path }`);
      }
    }
  },

  createProject: () => {
    const path = dialog.showSaveDialogSync({
-      properties: ["showOverwriteConfirmation", "createDirectory"],
-      filters: [{ name: "Behavior3 Workspace", extensions: ["b3-workspace"] }],
+      properties: [ "showOverwriteConfirmation", "createDirectory" ],
+      filters: [ { name: "Behavior3 Workspace", extensions: [ "b3-workspace" ] } ],
    });
    if (path) {
      const workspace = get();
@@ -232,7 +234,7 @@ export const useWorkspace = create<WorkspaceStore>((set, get) => ({
      const win = BrowserWindow.getFocusedWindow();
      if (win) {
        const path = dialog.showOpenDialogSync(win, {
-          filters: [{ name: "workspace", extensions: ["b3-workspace"] }],
+          filters: [ { name: "workspace", extensions: [ "b3-workspace" ] } ],
        });
        if (path?.length) {
          ipcRenderer.invoke("open-win", path[0]);
@@ -246,7 +248,7 @@ export const useWorkspace = create<WorkspaceStore>((set, get) => ({
    if (workspace.path)
      if (!buildDir) {
        buildDir = dialog.showOpenDialogSync({
-          properties: ["openDirectory", "createDirectory"],
+          properties: [ "openDirectory", "createDirectory" ],
        })?.[0];
      }
    if (buildDir) {
@@ -279,9 +281,9 @@ export const useWorkspace = create<WorkspaceStore>((set, get) => ({
  batchProject: () => {
    const workspace = get();
    const scriptPath = dialog.showOpenDialogSync({
-      properties: ["openFile"],
+      properties: [ "openFile" ],
      defaultPath: workspace.workdir,
-      filters: [{ name: "Javascript", extensions: ["js"] }],
+      filters: [ { name: "Javascript", extensions: [ "js" ] } ],
    })?.[0];
    if (scriptPath) {
      try {
@@ -327,7 +329,7 @@ export const useWorkspace = create<WorkspaceStore>((set, get) => ({
        workspace.edit(editor.path);
      } catch (error) {
        console.error(error);
-        message.error(`invalid file: ${path}`);
+        message.error(`invalid file: ${ path }`);
      }
    } else if (workspace.editing !== editor) {
      workspace.edit(editor.path);
@@ -387,7 +389,8 @@ export const useWorkspace = create<WorkspaceStore>((set, get) => ({
    saveFile(workspace.editing);
  },

-  saveAs: () => {},
+  saveAs: () => {
+  },

  saveAll: () => {
    const workspace = get();
@@ -442,7 +445,7 @@ export const useWorkspace = create<WorkspaceStore>((set, get) => ({

  loadNodeDefs: () => {
    const workspace = get();
-    const nodeDefData = readJson(`${workspace.workdir}/node-config.b3-setting`) as NodeDef[];
+    const nodeDefData = readJson(`${ workspace.workdir }/node-config.b3-setting`) as NodeDef[];
    const nodeDefs: Map<string, NodeDef> = new Map();
    for (const v of nodeDefData) {
      nodeDefs.set(v.name, v);
@@ -476,4 +479,4 @@ export const useWorkspace = create<WorkspaceStore>((set, get) => ({
    const workspace = get();
    return workspace.nodeDefs.has(name);
  },
-}));
+} ));
@@ -33,7 +33,7 @@ export function useHotkeys<T extends HTMLElement>(
  keys: Keys,
  callback: HotkeyCallback,
  options?: OptionsOrDependencyArray,
-  dependencies?: OptionsOrDependencyArray
+  dependencies?: OptionsOrDependencyArray,
 ): MutableRefObject<RefType<T>> {
  if (keys instanceof Array) {
    keys = keys.filter((v) => !!v);
@@ -52,6 +52,7 @@ export const Hotkey = {
  Escape: Key.Escape,
  F2: Key.F2,
  Insert: Key.Insert,
+  JumpNode: hotkey("ctrl+g"),
  MacDelete: isMacos ? hotkey("ctrl+backspace") : "",
  Paste: hotkey("ctrl+v"),
  Redo: isMacos ? hotkey("shift+ctrl+z") : hotkey("ctrl+y"),