From 118deb24d73850a6ab37876834f6073b9bbede90 Mon Sep 17 00:00:00 2001 From: codetypes Date: Sun, 28 Apr 2024 23:20:56 +0800 Subject: [PATCH] toggle focus filter --- src/components/editor.tsx | 73 ++++++++++++++++++++------------- src/components/register-node.ts | 26 ++++++++---- src/misc/b3type.ts | 1 + 3 files changed, 64 insertions(+), 36 deletions(-) diff --git a/src/components/editor.tsx b/src/components/editor.tsx index 709f35f..d46e817 100644 --- a/src/components/editor.tsx +++ b/src/components/editor.tsx @@ -146,7 +146,7 @@ export const Editor: FC = ({ 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 = ({ 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 = ({ onUpdate: updateState, data: editor, . }; const filterNodes = (option: FilterOption, node: TreeGraphData | null) => { - if (node && option.filterStr) { - if (includeString(node.name, option) || includeString(node.desc || node.def.desc, option)) { - option.results.push(node.id); - } else if (node.input) { - for (const str of node.input) { - if (includeString(str, option)) { - option.results.push(node.id); - break; + if (node) { + 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; + } + } + } 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; } } - } else if (node.args) { - for (const str in node.args) { - if (includeString(str, option)) { - option.results.push(node.id); - break; - } - } - } else if (node.output) { - for (const str of node.output) { - if (includeString(str, option)) { - option.results.push(node.id); - break; - } - } - } else if (node.path) { - if (includeString(node.path, option)) { + 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 = ({ 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 = ({ 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(); }} /> diff --git a/src/components/register-node.ts b/src/components/register-node.ts index 00fb589..4dc6527 100644 --- a/src/components/register-node.ts +++ b/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[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", }); diff --git a/src/misc/b3type.ts b/src/misc/b3type.ts index 749724b..8d52416 100644 --- a/src/misc/b3type.ts +++ b/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 = {