search in desc, input and output

src/components/editor.tsx

@@ -27,6 +27,7 @@ import { VscCaseSensitive } from "react-icons/vsc";
 import { mergeRefs } from "react-merge-refs";
 import { useDebounceCallback } from "usehooks-ts";
 import "./register-node";
+import { mergeClassNames } from "@/misc/util";
 
 export interface EditorProps extends React.HTMLAttributes<HTMLElement> {
   data: EditorStore;
@@ -121,17 +122,23 @@ export const Editor: FC<EditorProps> = ({ onUpdate: updateState, data: editor, .
     open: useWorkspace((state) => state.open),
     workdir: useWorkspace((state) => state.workdir),
   };
-  const [results, setResults] = useState<string[]>([]);
+
-  const [resultIndex, setResultIndex] = useState(0);
-  const [showingSearch, setShowingSearch] = useState(false);
   const graphRef = useRef(null);
   const sizeRef = useRef(null);
   const editorSize = useSize(sizeRef);
   const { t } = useTranslation();
   const menuItems = useMemo(() => createMenu(), [t]);
 
+  const [results, setResults] = useState<string[]>([]);
+  const [resultIndex, setResultIndex] = useState(0);
+  const [searchString, setSearchString] = useState("");
+  const [showingSearch, setShowingSearch] = useState(false);
+  const [filterCase, setFilterCase] = useState(false);
+  const [filterFocus, setFilterFocus] = useState(false);
+
   const onSearchChange = useDebounceCallback((filter: string) => {
     const ids = filterNodes(filter, findDataById("1"));
+    setSearchString(filter);
     setResults(ids);
     setResultIndex(0);
     if (ids.length > 0) {
@@ -195,13 +202,37 @@ export const Editor: FC<EditorProps> = ({ onUpdate: updateState, data: editor, .
     return editor.graph.findDataById(id) as TreeGraphData;
   };
 
-  const filterNodes = (str: string, node: TreeGraphData | null, ids?: string[]): string[] => {
+  const includeString = (content: string | undefined, search: string) => {
+    if (!content) {
+      return false;
+    } else if (filterCase) {
+      return content.includes(search);
+    } else {
+      return content.toLowerCase().includes(search.toLowerCase());
+    }
+  };
+
+  const filterNodes = (search: string, node: TreeGraphData | null, ids?: string[]): string[] => {
     ids ||= [];
-    if (node && str) {
+    if (node && search) {
-      if (node.name.toLocaleLowerCase().indexOf(str) >= 0) {
+      if (includeString(node.name, search) || includeString(node.desc || node.def.desc, search)) {
         ids.push(node.id);
+      } else if (node.input) {
+        for (const str of node.input) {
+          if (includeString(str, search)) {
+            ids.push(node.id);
+            break;
+          }
+        }
+      } else if (node.output) {
+        for (const str of node.output) {
+          if (includeString(str, search)) {
+            ids.push(node.id);
+            break;
+          }
+        }
       }
-      node.children?.forEach((child: TreeGraphData) => filterNodes(str, child, ids));
+      node.children?.forEach((child: TreeGraphData) => filterNodes(search, child, ids));
     }
     return ids;
   };
@@ -1054,18 +1085,29 @@ export const Editor: FC<EditorProps> = ({ onUpdate: updateState, data: editor, .
               onChange={(e) => onSearchChange(e.currentTarget.value)}
               onKeyDown={(e) => e.code === Hotkey.Enter && nextResult()}
               suffix={
-                <Flex style={{ alignItems: "center" }}>
+                <Flex gap="2px" style={{ alignItems: "center" }}>
                   <Button
                     type="text"
                     size="small"
-                    style={{ width: "20px", height: "20px" }}
+                    className={mergeClassNames(
+                      "b3-editor-button-filter",
+                      filterCase ? "b3-editor-button-filter-selected" : ""
+                    )}
                     icon={<VscCaseSensitive style={{ width: "18px", height: "18px" }} />}
+                    onClick={() => {
+                      setFilterCase(!filterCase);
+                      onSearchChange(searchString);
+                    }}
                   />
                   <Button
                     type="text"
                     size="small"
-                    style={{ width: "20px", height: "20px" }}
+                    className={mergeClassNames(
+                      "b3-editor-button-filter",
+                      filterFocus ? "b3-editor-button-filter-selected" : ""
+                    )}
                     icon={<RiFocus3Line />}
+                    onClick={() => setFilterFocus(!filterFocus)}
                   />
                 </Flex>
               }

src/contexts/setting-context.ts

@@ -1,4 +1,4 @@
-import { readJson, writeJson } from "@/misc/json";
+import { readJson, writeJson } from "@/misc/util";
 import { app } from "@electron/remote";
 import { create } from "zustand";
 import * as fs from "fs";

src/contexts/workspace-context.ts

@@ -2,7 +2,7 @@ import { NodeDef, NodeModel, TreeGraphData, TreeModel, unknownNodeDef } from "@/
 import * as b3util from "@/misc/b3util";
 import { message } from "@/misc/hooks";
 import i18n from "@/misc/i18n";
-import { readJson } from "@/misc/json";
+import { readJson } from "@/misc/util";
 import Path from "@/misc/path";
 import { Matrix, TreeGraph } from "@antv/g6";
 import { BrowserWindow, dialog } from "@electron/remote";

src/index.scss

@@ -14,6 +14,7 @@
   -webkit-text-size-adjust: 100%;
 
   --b3-color-border: #30363d;
+  --b3-color-selected: #1668dc;
 }
 
 body {
@@ -176,3 +177,13 @@ body {
   display: flex;
   align-items: center;
 }
+
+// editor
+.b3-editor-button-filter {
+  width: 20px !important;
+  height: 20px !important;
+}
+
+.b3-editor-button-filter-selected {
+  background-color: var(--b3-color-selected) !important;
+}

src/misc/util.ts

@@ -9,3 +9,7 @@ export const writeJson = (path: string, data: any) => {
   const str = JSON.stringify(data, undefined, 2);
   fs.writeFileSync(path, str, "utf-8");
 };
+
+export function mergeClassNames(...cls: string[]): string {
+  return cls.filter((v) => !!v).join(" ");
+}