From fea5e0cad81d8fedc1209f891de01e59cedf23da Mon Sep 17 00:00:00 2001 From: codetypes Date: Sun, 16 Mar 2025 22:46:34 +0800 Subject: [PATCH] highlight args when click input/output --- src/components/editor.tsx | 88 ++++++++++++++++++++++++------- src/components/register-node.ts | 16 +++++- src/contexts/workspace-context.ts | 1 + src/misc/b3type.ts | 1 + 4 files changed, 87 insertions(+), 19 deletions(-) diff --git a/src/components/editor.tsx b/src/components/editor.tsx index ef6503d..20f1fc3 100644 --- a/src/components/editor.tsx +++ b/src/components/editor.tsx @@ -17,11 +17,11 @@ import { useShallow } from "zustand/react/shallow"; import { EditEvent, EditNode, - EditTree, EditorStore, + EditTree, useWorkspace, } from "../contexts/workspace-context"; -import { NodeModel, TreeGraphData, TreeModel } from "../misc/b3type"; +import { isExprType, NodeModel, TreeGraphData, TreeModel } from "../misc/b3type"; import * as b3util from "../misc/b3util"; import { message } from "../misc/hooks"; import i18n from "../misc/i18n"; @@ -195,6 +195,7 @@ export const Editor: FC = ({ onUpdate: updateState, data: editor, . const onSearchChange = (option: FilterOption) => { option.results.length = 0; + editor.searchingText = option.filterStr; filterNodes(option, editor.data); setFilterOption({ ...option, @@ -237,11 +238,16 @@ export const Editor: FC = ({ onUpdate: updateState, data: editor, . } }; + const parseExpr = (expr: string) => { + return expr.split(/[^a-zA-Z0-9_]/); + }; + const findHightlight = (node: TreeGraphData, highlight: string[], changed?: TreeGraphData[]) => { changed ||= []; - if (node.highlightInput || node.highlightOutput) { + if (node.highlightInput || node.highlightOutput || node.highlightArgs) { node.highlightInput = false; node.highlightOutput = false; + node.highlightArgs = false; changed.push(node); } @@ -265,6 +271,31 @@ export const Editor: FC = ({ onUpdate: updateState, data: editor, . } } + node.def.args?.forEach((arg) => { + if (isExprType(arg.type)) { + const expr: string | string[] = node.args?.[arg.name]; + if (typeof expr === "string") { + for (const v of parseExpr(expr)) { + if (highlight.includes(v)) { + node.highlightArgs = true; + changed.push(node); + break; + } + } + } else if (expr instanceof Array) { + loop: for (const str of expr) { + for (const v of parseExpr(str)) { + if (highlight.includes(v)) { + node.highlightArgs = true; + changed.push(node); + break loop; + } + } + } + } + } + }); + node.children?.forEach((child: TreeGraphData) => findHightlight(child, highlight, changed)); return changed; @@ -312,28 +343,32 @@ export const Editor: FC = ({ onUpdate: updateState, data: editor, . includeString(node.desc || node.def.desc, option) ) { found = true; - } else if (node.input) { + } + if (!found && node.input) { for (const str of node.input) { if (includeString(str, option)) { found = true; break; } } - } else if (node.args) { + } + if (!found && node.args) { for (const str in node.args) { - if (includeString(str, option)) { + if (includeString(str, option) || includeString(node.args[str], option)) { found = true; break; } } - } else if (node.output) { + } + if (!found && node.output) { for (const str of node.output) { if (includeString(str, option)) { found = true; break; } } - } else if (node.path) { + } + if (!found && node.path) { if (includeString(node.path, option)) { found = true; } @@ -847,10 +882,32 @@ export const Editor: FC = ({ onUpdate: updateState, data: editor, . data.output?.forEach((v) => v && highlight.push(v)); } const changed = findHightlight(editor.data, highlight); - changed.forEach((v) => { - const item = editor.graph.findById(v.id); - item.draw(); - }); + if (changed.length > 0) { + const refreshHighlight = (node: TreeGraphData) => { + const item = editor.graph.findById(node.id); + if (highlight.length > 0) { + node.highlightGray = !( + node.highlightInput || + node.highlightOutput || + node.highlightArgs + ); + } else { + node.highlightGray = false; + } + item.draw(); + if (node.children) { + node.children.forEach(refreshHighlight); + } + }; + refreshHighlight(editor.data); + } + if (highlight.length === 0 && editor.searchingText) { + onSearchChange({ + ...filterOption, + filterType: "content", + filterStr: editor.searchingText, + }); + } }); editor.graph.on("node:contextmenu", (e: G6GraphEvent) => { @@ -1044,10 +1101,7 @@ export const Editor: FC = ({ onUpdate: updateState, data: editor, . useKeyDown(Hotkey.Undo, keysRef, () => undo()); useKeyDown(Hotkey.Redo, keysRef, () => redo()); useKeyDown([Hotkey.Insert, Hotkey.Enter], keysRef, () => createNode()); - useKeyDown([Hotkey.Delete, Hotkey.Backspace], keysRef, () => { - console.log("delete"); - deleteNode(); - }); + useKeyDown([Hotkey.Delete, Hotkey.Backspace], keysRef, () => deleteNode()); editor.dispatch = (event: EditEvent, data: unknown) => { switch (event) { @@ -1060,7 +1114,6 @@ export const Editor: FC = ({ onUpdate: updateState, data: editor, . break; } case "delete": { - console.log("delete1"); deleteNode(); break; } @@ -1223,7 +1276,6 @@ export const Editor: FC = ({ onUpdate: updateState, data: editor, . } else if ((e.ctrlKey || e.metaKey) && e.code === "KeyG") { searchByType("id"); } - console.log(e.code); e.stopPropagation(); }; diff --git a/src/components/register-node.ts b/src/components/register-node.ts index 9d9c91c..486747d 100644 --- a/src/components/register-node.ts +++ b/src/components/register-node.ts @@ -351,6 +351,19 @@ G6.registerNode( const args: any = data.args; if (nodeDef.args && args && Object.keys(args).length > 0) { const { str, line } = toBreakWord(`${i18n.t("regnode.args")}${JSON.stringify(args)}`, 200); + if (data.highlightArgs) { + addShape("rect", { + attrs: { + x: x - 2, + y: y + 17, + width: w - 6, + height: 18, + fill: "#0d1117", + radius: [r, r, r, r], + }, + name: "args-text-bg", + }); + } addShape("text", { attrs: { textBaseline: "top", @@ -359,7 +372,8 @@ G6.registerNode( w, lineHeight: 20, text: str, - fill: textColor, + fill: data.highlightArgs ? "white" : textColor, + fontWeight: data.highlightArgs ? "bolder" : undefined, }, name: "args-text", }); diff --git a/src/contexts/workspace-context.ts b/src/contexts/workspace-context.ts index 79ac53e..d8c6d7c 100644 --- a/src/contexts/workspace-context.ts +++ b/src/contexts/workspace-context.ts @@ -60,6 +60,7 @@ export class EditorStore { unsave: boolean = false; modifiedTime: number = Date.now(); alertReload: boolean = false; + searchingText?: string; historyStack: NodeModel[] = []; historyIndex: number = 0; diff --git a/src/misc/b3type.ts b/src/misc/b3type.ts index 2c93b4b..bc419ef 100644 --- a/src/misc/b3type.ts +++ b/src/misc/b3type.ts @@ -65,6 +65,7 @@ export interface TreeGraphData extends G6TreeGraphData { size?: number[]; highlightInput?: boolean; highlightOutput?: boolean; + highlightArgs?: boolean; highlightGray?: boolean; status?: number; }