toggle focus filter

src/components/editor.tsx

@@ -146,7 +146,7 @@ export const Editor: FC<EditorProps> = ({ onUpdate: updateState, data: editor, .
     filterFocus: false,
   });
 
-  const onSearchChange = useDebounceCallback((option: FilterOption) => {
+  const onSearchChange = (option: FilterOption) => {
     option.results.length = 0;
     filterNodes(option, findDataById("1"));
     setFilterOption({
@@ -159,7 +159,10 @@ export const Editor: FC<EditorProps> = ({ onUpdate: updateState, data: editor, .
     } else {
       selectNode(null);
     }
-  }, 200);
+    editor.graph.findAll("node", () => true).forEach((item) => item.draw());
+  };
+
+  const onDebounceSearchChange = useDebounceCallback(onSearchChange, 200);
 
   const onChange = () => {
     if (!editor.unsave) {
@@ -224,33 +227,41 @@ export const Editor: FC<EditorProps> = ({ onUpdate: updateState, data: editor, .
   };
 
   const filterNodes = (option: FilterOption, node: TreeGraphData | null) => {
-    if (node && option.filterStr) {
+    if (node) {
+      node.highlightGray = option.filterFocus;
+      if (option.filterStr) {
+        let found = false;
         if (includeString(node.name, option) || includeString(node.desc || node.def.desc, option)) {
-        option.results.push(node.id);
+          found = true;
         } else if (node.input) {
           for (const str of node.input) {
             if (includeString(str, option)) {
-            option.results.push(node.id);
+              found = true;
               break;
             }
           }
         } else if (node.args) {
           for (const str in node.args) {
             if (includeString(str, option)) {
-            option.results.push(node.id);
+              found = true;
               break;
             }
           }
         } else if (node.output) {
           for (const str of node.output) {
             if (includeString(str, option)) {
-            option.results.push(node.id);
+              found = true;
               break;
             }
           }
         } else if (node.path) {
           if (includeString(node.path, option)) {
+            found = true;
+          }
+        }
+        if (found) {
           option.results.push(node.id);
+          node.highlightGray = false;
         }
       }
       node.children?.forEach((child: TreeGraphData) => filterNodes(option, child));
@@ -1102,7 +1113,7 @@ export const Editor: FC<EditorProps> = ({ onUpdate: updateState, data: editor, .
                 paddingRight: "2px",
               }}
               onChange={(e) =>
-                onSearchChange({
+                onDebounceSearchChange({
                   ...filterOption,
                   filterStr: e.currentTarget.value,
                   index: 0,
@@ -1172,7 +1183,13 @@ export const Editor: FC<EditorProps> = ({ onUpdate: updateState, data: editor, .
               style={{ width: "30px" }}
               onClick={() => {
                 setShowingSearch(false);
-                setFilterOption({ ...filterOption, results: [], index: 0 });
+                onSearchChange({
+                  results: [],
+                  index: 0,
+                  filterCase: false,
+                  filterFocus: false,
+                  filterStr: "",
+                });
                 keysRef.current?.focus();
               }}
             />

src/components/register-node.ts

@@ -90,6 +90,16 @@ G6.registerNode(
       const h = size[1];
       const r = 4;
 
+      let bgColor = "white";
+      let textColor = "black";
+
+      if (cfg.highlightGray) {
+        bgColor = "#0d1117";
+        color = "#30363d";
+        textColor = "#666";
+        console.log("hdight", cfg.id);
+      }
+
       type ShapeCfg = Parameters<typeof group.addShape>[1];
       const addShape = (type: string, shapeCfg: ShapeCfg, clickEnabled: boolean = false) => {
         shapeCfg.draggable = clickEnabled;
@@ -107,7 +117,7 @@ G6.registerNode(
             height: h,
             stroke: color,
             lineWidth: 2,
-            fill: "white",
+            fill: bgColor,
             radius: r,
           },
           name: "main-box",
@@ -171,7 +181,7 @@ G6.registerNode(
           text: cfg.id,
           textAlign: "right",
           fill: "white",
-          stroke: "black",
+          stroke: textColor,
           lineWidth: 2,
         },
         name: "id-text",
@@ -217,7 +227,7 @@ G6.registerNode(
           fontWeight: 800,
           lineHeight: 20,
           text: cfg.name,
-          fill: "black",
+          fill: textColor,
         },
         name: "name-text",
       });
@@ -237,7 +247,7 @@ G6.registerNode(
             lineHeight: 20,
             fontWeight: 800,
             text: `${desc}`,
-            fill: "black",
+            fill: textColor,
           },
           name: "desc-text",
         });
@@ -254,7 +264,7 @@ G6.registerNode(
             w,
             lineHeight: 20,
             text: str,
-            fill: "black",
+            fill: textColor,
           },
           name: "args-text",
         });
@@ -286,7 +296,7 @@ G6.registerNode(
               y: y + 20,
               lineHeight: 20,
               text: str,
-              fill: cfg.highlightInput ? "white" : "black",
+              fill: cfg.highlightInput ? "white" : textColor,
               fontWeight: cfg.highlightInput ? "bolder" : undefined,
             },
             name: "input-text",
@@ -324,7 +334,7 @@ G6.registerNode(
               y: y + 20,
               lineHeight: 20,
               text: str,
-              fill: cfg.highlightOutput ? "white" : "black",
+              fill: cfg.highlightOutput ? "white" : textColor,
               fontWeight: cfg.highlightOutput ? "bolder" : undefined,
             },
             name: "output-text",
@@ -344,7 +354,7 @@ G6.registerNode(
             y: y + 20,
             lineHeight: 20,
             text: `${path}`,
-            fill: "black",
+            fill: textColor,
           },
           name: "subtree-text",
         });

src/misc/b3type.ts

@@ -61,6 +61,7 @@ export interface TreeGraphData extends G6TreeGraphData {
   size?: number[];
   highlightInput?: boolean;
   highlightOutput?: boolean;
+  highlightGray?: boolean;
 }
 
 export const unknownNodeDef: NodeDef = {