show variable using count

public/locales/en.json

@@ -110,6 +110,7 @@
   "node.invalidVariableName": "Invalid variable name, should start with a letter or underscore",
   "node.name": "Node name",
   "node.noNodeSelected": "No node selected",
+  "node.notFound": "Node '{{name}}' not found",
   "node.oneof.error": "Only one is allowed between input '{{input}}' and argument '{{arg}}({{desc}})'",
   "node.oneof.inputNotfound": "Input '{{input}}' not found",
   "node.outputVariable": "Output variables",

public/locales/zh.json

@@ -110,6 +110,7 @@
   "node.invalidVariableName": "变量名必须以字母或下划线开头",
   "node.name": "节点名称",
   "node.noNodeSelected": "未选择任务节点",
+  "node.notFound": "节点 “{{name}}” 不存在",
   "node.oneof.error": "输入项 “{{input}}” 和参数 “{{arg}}({{desc}})” 之中，只能选择设置其中之一",
   "node.oneof.inputNotfound": "输入项“{{input}}”不存在",
   "node.outputVariable": "输出变量",

sample/vars/test-vars.json

@@ -63,16 +63,10 @@
         "name": "Clear",
         "output": [
           "test"
-        ],
-        "children": [
-          {
-            "id": 9,
-            "name": "Idle"
-          }
         ]
       },
       {
-        "id": 10,
+        "id": 9,
         "name": "TestB3",
         "args": {
           "time": 1,
@@ -83,7 +77,7 @@
         }
       },
       {
-        "id": 11,
+        "id": 10,
         "name": "TestB3",
         "args": {
           "time": 1,
@@ -92,6 +86,13 @@
           "name": "1",
           "status": "RUNNING"
         }
+      },
+      {
+        "id": 11,
+        "name": "Clear",
+        "output": [
+          "context"
+        ]
       }
     ]
   },

src/components/editor.tsx

@@ -70,34 +70,34 @@ const refreshTreeData = (data: TreeGraphData) => {
 
 const isTreeUpdated = (editor: EditorStore, editTree: EditTree) => {
   if (
-    editor.data.firstid !== editTree.data.firstid ||
+    editor.data.firstid !== editTree.firstid ||
-    editor.data.export !== editTree.data.export ||
+    editor.data.export !== editTree.export ||
-    editor.data.name !== editTree.data.name ||
+    editor.data.name !== editTree.name ||
-    editor.data.desc !== editTree.data.desc
+    editor.data.desc !== editTree.desc
   ) {
     return true;
   }
 
-  let max = Math.max(editor.declare.declvar.length, editTree.data.declvar.length);
+  let max = Math.max(editor.declare.declvar.length, editTree.declvar.length);
   for (let i = 0; i < max; i++) {
     const v1: VarDef | undefined = editor.declare.declvar[i];
-    const v2: VarDef | undefined = editTree.data.declvar[i];
+    const v2: VarDef | undefined = editTree.declvar[i];
     if (v1?.name !== v2?.name || v1?.desc !== v2?.desc) {
       return true;
     }
   }
 
-  max = Math.max(editor.data.group.length, editTree.data.group.length);
+  max = Math.max(editor.data.group.length, editTree.group.length);
   for (let i = 0; i < max; i++) {
-    if (editor.data.group[i] !== editTree.data.group[i]) {
+    if (editor.data.group[i] !== editTree.group[i]) {
       return true;
     }
   }
 
-  max = Math.max(editor.declare.import.length, editTree.data.import.length);
+  max = Math.max(editor.declare.import.length, editTree.import.length);
   for (let i = 0; i < max; i++) {
     const v1: ImportDef | undefined = editor.declare.import[i];
-    const v2: ImportDef | undefined = editTree.data.import[i];
+    const v2: ImportDef | undefined = editTree.import[i];
     if (v1?.path !== v2?.path) {
       return true;
     }
@@ -551,12 +551,12 @@ export const Editor: FC<EditorProps> = ({ onUpdate: updateState, data: editor, .
 
   const updateTree = (editTree: EditTree) => {
     if (isTreeUpdated(editor, editTree)) {
-      editor.data.desc = editTree.data.desc || "";
+      editor.data.desc = editTree.desc || "";
-      editor.data.export = editTree.data.export !== false;
+      editor.data.export = editTree.export !== false;
-      editor.data.group = editTree.data.group;
+      editor.data.group = editTree.group;
-      editor.data.firstid = editTree.data.firstid ?? 1;
+      editor.data.firstid = editTree.firstid ?? 1;
-      editor.declare.declvar = editTree.data.declvar || [];
+      editor.declare.declvar = editTree.declvar || [];
-      editor.declare.import = editTree.data.import || [];
+      editor.declare.import = editTree.import || [];
       editor.data.import = editor.declare.import.map((v) => v.path).sort();
       editor.data.declvar = editor.declare.declvar
         .map((v) => ({ ...v }))
@@ -568,6 +568,32 @@ export const Editor: FC<EditorProps> = ({ onUpdate: updateState, data: editor, .
     }
   };
 
+  const clickVar = (...names: string[]) => {
+    const changed = findHightlight(editor.root, names);
+    if (changed.length > 0) {
+      const refreshHighlight = (node: TreeGraphData) => {
+        const item = editor.graph.findById(node.id);
+        if (names.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.root);
+    }
+    if (names.length === 0 && editor.searchingText) {
+      onSearchChange({
+        ...filterOption,
+        filterType: "content",
+        filterStr: editor.searchingText,
+      });
+    }
+  };
+
   const selectNode = (id: string | null) => {
     if (editor.selectedId) {
       setItemState(editor.selectedId, "selected", false);
@@ -953,41 +979,15 @@ export const Editor: FC<EditorProps> = ({ onUpdate: updateState, data: editor, .
     });
 
     editor.graph.on("node:click", (e: G6GraphEvent) => {
-      const highlight: string[] = [];
+      const names: string[] = [];
       if (e.shape.cfg.name === "input-text") {
         const data = findDataById(e.item.getID());
-        data.input?.forEach((v) => v && highlight.push(v));
+        data.input?.forEach((v) => v && names.push(v));
       } else if (e.shape.cfg.name === "output-text") {
         const data = findDataById(e.item.getID());
-        data.output?.forEach((v) => v && highlight.push(v));
+        data.output?.forEach((v) => v && names.push(v));
-      }
-      const changed = findHightlight(editor.root, highlight);
-      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.root);
-      }
-      if (highlight.length === 0 && editor.searchingText) {
-        onSearchChange({
-          ...filterOption,
-          filterType: "content",
-          filterStr: editor.searchingText,
-        });
       }
+      clickVar(...names);
     });
 
     editor.graph.on("node:contextmenu", (e: G6GraphEvent) => {
@@ -1253,6 +1253,10 @@ export const Editor: FC<EditorProps> = ({ onUpdate: updateState, data: editor, .
         saveAsSubtree();
         break;
       }
+      case "clickVar": {
+        clickVar(data as string);
+        break;
+      }
     }
   };
 

src/components/inspector.tsx

@@ -57,12 +57,13 @@ interface OptionType extends DefaultOptionType {
 const TreeInspector: FC = () => {
   const workspace = useWorkspace(
     useShallow((state) => ({
+      allFiles: state.allFiles,
       editing: state.editing,
       editingTree: state.editingTree!,
-      allFiles: state.allFiles,
-      relative: state.relative,
       fileTree: state.fileTree,
       groupDefs: state.groupDefs,
+      nodeDefs: state.nodeDefs,
+      relative: state.relative,
     }))
   );
   const { t } = useTranslation();
@@ -72,10 +73,50 @@ const TreeInspector: FC = () => {
   const groupDefs: GroupDef[] = useMemo(() => {
     return workspace.groupDefs.map((v) => ({
       name: v,
-      value: workspace.editingTree.data.group.includes(v),
+      value: workspace.editingTree.group.includes(v),
     }));
   }, [workspace.groupDefs, workspace.editingTree]);
 
+  // using count
+  const usingCount: Record<string, number> = useMemo(() => {
+    const count: Record<string, number> = {};
+    const collect = (node: TreeGraphData) => {
+      const def = workspace.nodeDefs.get(node.name);
+      if (def.input) {
+        node.input?.forEach((v) => {
+          count[v] = (count[v] ?? 0) + 1;
+        });
+      }
+      if (def.output) {
+        node.output?.forEach((v) => {
+          count[v] = (count[v] ?? 0) + 1;
+        });
+      }
+      if (def.args) {
+        def.args.forEach((arg) => {
+          const expr = node.args?.[arg.name] as string | string[] | undefined;
+          if (!isExprType(arg.type) || !expr) {
+            return;
+          }
+          if (Array.isArray(expr)) {
+            expr.forEach((str) => {
+              parseExpr(str).forEach((v) => {
+                count[v] = (count[v] ?? 0) + 1;
+              });
+            });
+          } else {
+            parseExpr(expr).forEach((v) => {
+              count[v] = (count[v] ?? 0) + 1;
+            });
+          }
+        });
+      }
+      node.children?.forEach(collect);
+    };
+    collect(workspace.editingTree.root);
+    return count;
+  }, [workspace.editingTree, workspace.nodeDefs]);
+
   // auto complete for subtree
   const subtreeOptions = useMemo(() => {
     const options: OptionType[] = [];
@@ -93,23 +134,21 @@ const TreeInspector: FC = () => {
 
   // set form values
   useEffect(() => {
-    const data = workspace.editingTree.data;
+    loadVarDef(workspace.editingTree.import);
-    loadVarDef(data.import);
     form.resetFields();
-    form.setFieldValue("name", data.name);
+    form.setFieldValue("name", workspace.editingTree.name);
-    form.setFieldValue("desc", data.desc);
+    form.setFieldValue("desc", workspace.editingTree.desc);
-    form.setFieldValue("export", data.export !== false);
+    form.setFieldValue("export", workspace.editingTree.export !== false);
-    form.setFieldValue("firstid", data.firstid);
+    form.setFieldValue("firstid", workspace.editingTree.firstid);
     form.setFieldValue("group", groupDefs);
-    form.setFieldValue("declvar", data.declvar);
+    form.setFieldValue("declvar", workspace.editingTree.declvar);
-    form.setFieldValue("import", data.import);
+    form.setFieldValue("import", workspace.editingTree.import);
-    form.setFieldValue("subtree", data.subtree);
+    form.setFieldValue("subtree", workspace.editingTree.subtree);
   }, [workspace.editingTree, groupDefs]);
 
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   const finish = (values: any) => {
     workspace.editing?.dispatch("updateTree", {
-      data: {
       name: values.name,
       desc: values.desc,
       export: values.export,
@@ -128,7 +167,6 @@ const TreeInspector: FC = () => {
           path: v.path,
           vars: v.vars ?? [],
         })),
-      },
     } as EditTree);
   };
 
@@ -200,9 +238,11 @@ const TreeInspector: FC = () => {
               <h4>{t("tree.vars")}</h4>
             </Divider>
             <Form.List name="declvar">
-              {(items, { add, remove }, { errors }) => (
+              {(fields, { add, remove }, { errors }) => (
                 <div style={{ display: "flex", flexDirection: "column", rowGap: 0 }}>
-                  {items.map((item) => (
+                  {fields.map((item) => {
+                    const vardef = workspace.editingTree.declvar[item.name];
+                    return (
                       <Flex key={item.key} gap={4}>
                         <Space.Compact
                           className="b3-inspector-vars-item"
@@ -225,9 +265,21 @@ const TreeInspector: FC = () => {
                           >
                             <Input
                               addonBefore={
-                              <div style={{ display: "flex", alignItems: "center", width: "45px" }}>
+                                <div
+                                  style={{
+                                    display: "flex",
+                                    cursor: "pointer",
+                                    alignItems: "center",
+                                    width: "45px",
+                                  }}
+                                  onClick={() =>
+                                    workspace.editing?.dispatch("clickVar", vardef.name)
+                                  }
+                                >
                                   <AimOutlined />
-                                <span style={{ marginLeft: 4 }}>0</span>
+                                  <span style={{ marginLeft: 4 }}>
+                                    {usingCount[vardef.name] ?? 0}
+                                  </span>
                                 </div>
                               }
                               placeholder={t("tree.vars.name")}
@@ -260,10 +312,11 @@ const TreeInspector: FC = () => {
                           }}
                         />
                       </Flex>
-                  ))}
+                    );
+                  })}
                   <Form.Item
                     style={{
-                      marginRight: items.length === 0 ? undefined : "18px",
+                      marginRight: fields.length === 0 ? undefined : "18px",
                       marginTop: 4,
                       alignItems: "end",
                     }}
@@ -284,21 +337,23 @@ const TreeInspector: FC = () => {
               )}
             </Form.List>
           </>
-          {workspace.editingTree.data.subtree.length > 0 && (
+          {workspace.editingTree.subtree.length > 0 && (
             <>
               <Divider orientation="left">
                 <h4>{t("tree.vars.subtree")}</h4>
               </Divider>
               <Form.List name="subtree">
-                {(vars) => (
+                {(fields) => (
                   <div style={{ display: "flex", flexDirection: "column", rowGap: 0 }}>
-                    {vars.map((v, idx, arr) => (
+                    {fields.map((item, idx) => {
-                      <Flex key={v.key} gap={4}>
+                      const vardef = workspace.editingTree.subtree[item.name];
+                      return (
+                        <Flex key={item.key} gap={4}>
                           <Space.Compact
                             className="b3-inspector-vars-item"
                             style={{ width: "100%", marginBottom: 0, paddingRight: 18 }}
                           >
-                          <Form.Item noStyle name={[v.name, "id"]}>
+                            <Form.Item noStyle name={[item.name, "id"]}>
                               <div
                                 style={{
                                   display: "flex",
@@ -308,42 +363,50 @@ const TreeInspector: FC = () => {
                                   maxWidth: "60px",
                                   minWidth: "60px",
                                   borderTopLeftRadius: idx === 0 ? "4px" : 0,
-                                borderBottomLeftRadius: idx === arr.length - 1 ? "4px" : 0,
+                                  borderBottomLeftRadius: idx === fields.length - 1 ? "4px" : 0,
                                   borderLeft: "1px solid #3d506c",
                                   borderTop: "1px solid #3d506c",
-                                borderBottom: idx === arr.length - 1 ? "1px solid #3d506c" : "none",
+                                  cursor: "pointer",
+                                  borderBottom:
+                                    idx === fields.length - 1 ? "1px solid #3d506c" : "none",
                                 }}
+                                onClick={() => workspace.editing?.dispatch("clickVar", vardef.name)}
                               >
                                 <AimOutlined />
-                              <span style={{ marginLeft: 4 }}>0</span>
+                                <span style={{ marginLeft: 4 }}>
+                                  {usingCount[vardef.name] ?? 0}
+                                </span>
                               </div>
                             </Form.Item>
-                          <Form.Item noStyle name={[v.name, "name"]}>
+                            <Form.Item noStyle name={[item.name, "name"]}>
                               <Input
                                 disabled={true}
                                 placeholder={t("tree.vars.name")}
                                 style={{
                                   borderRadius: "0",
                                   borderTop: "1px solid #3d506c",
-                                borderBottom: idx === arr.length - 1 ? "1px solid #3d506c" : "none",
+                                  borderBottom:
+                                    idx === fields.length - 1 ? "1px solid #3d506c" : "none",
                                 }}
                               />
                             </Form.Item>
-                          <Form.Item noStyle name={[v.name, "desc"]}>
+                            <Form.Item noStyle name={[item.name, "desc"]}>
                               <Input
                                 disabled={true}
                                 placeholder={t("tree.vars.desc")}
                                 style={{
                                   borderTopRightRadius: idx === 0 ? "4px" : 0,
-                                borderBottomRightRadius: idx === arr.length - 1 ? "4px" : 0,
+                                  borderBottomRightRadius: idx === fields.length - 1 ? "4px" : 0,
                                   borderTop: "1px solid #3d506c",
-                                borderBottom: idx === arr.length - 1 ? "1px solid #3d506c" : "none",
+                                  borderBottom:
+                                    idx === fields.length - 1 ? "1px solid #3d506c" : "none",
                                 }}
                               />
                             </Form.Item>
                           </Space.Compact>
                         </Flex>
-                    ))}
+                      );
+                    })}
                   </div>
                 )}
               </Form.List>
@@ -390,7 +453,9 @@ const TreeInspector: FC = () => {
                       <Form.List name={[item.name, "vars"]}>
                         {(vars) => (
                           <div style={{ display: "flex", flexDirection: "column", rowGap: 0 }}>
-                            {vars.map((v, idx, arr) => (
+                            {vars.map((v, idx) => {
+                              const vardef = workspace.editingTree.import[item.name].vars[v.name];
+                              return (
                                 <Flex key={v.key} gap={4}>
                                   <Space.Compact
                                     className="b3-inspector-vars-item"
@@ -406,15 +471,22 @@ const TreeInspector: FC = () => {
                                           maxWidth: "60px",
                                           minWidth: "60px",
                                           borderTopLeftRadius: idx === 0 ? "4px" : 0,
-                                        borderBottomLeftRadius: idx === arr.length - 1 ? "4px" : 0,
+                                          borderBottomLeftRadius:
+                                            idx === vars.length - 1 ? "4px" : 0,
                                           borderLeft: "1px solid #3d506c",
                                           borderTop: "1px solid #3d506c",
                                           borderBottom:
-                                          idx === arr.length - 1 ? "1px solid #3d506c" : "none",
+                                            idx === vars.length - 1 ? "1px solid #3d506c" : "none",
+                                          cursor: "pointer",
                                         }}
+                                        onClick={() =>
+                                          workspace.editing?.dispatch("clickVar", vardef.name)
+                                        }
                                       >
                                         <AimOutlined />
-                                      <span style={{ marginLeft: 4 }}>0</span>
+                                        <span style={{ marginLeft: 4 }}>
+                                          {usingCount[vardef.name] ?? 0}
+                                        </span>
                                       </div>
                                     </Form.Item>
                                     <Form.Item noStyle name={[v.name, "name"]}>
@@ -425,7 +497,7 @@ const TreeInspector: FC = () => {
                                           borderRadius: "0",
                                           borderTop: "1px solid #3d506c",
                                           borderBottom:
-                                          idx === arr.length - 1 ? "1px solid #3d506c" : "none",
+                                            idx === vars.length - 1 ? "1px solid #3d506c" : "none",
                                         }}
                                       />
                                     </Form.Item>
@@ -435,16 +507,18 @@ const TreeInspector: FC = () => {
                                         placeholder={t("tree.vars.desc")}
                                         style={{
                                           borderTopRightRadius: idx === 0 ? "4px" : 0,
-                                        borderBottomRightRadius: idx === arr.length - 1 ? "4px" : 0,
+                                          borderBottomRightRadius:
+                                            idx === vars.length - 1 ? "4px" : 0,
                                           borderTop: "1px solid #3d506c",
                                           borderBottom:
-                                          idx === arr.length - 1 ? "1px solid #3d506c" : "none",
+                                            idx === vars.length - 1 ? "1px solid #3d506c" : "none",
                                         }}
                                       />
                                     </Form.Item>
                                   </Space.Compact>
                                 </Flex>
-                            ))}
+                              );
+                            })}
                           </div>
                         )}
                       </Form.List>
@@ -793,7 +867,22 @@ const NodeInspector: FC = () => {
           >
             <Input disabled={true} />
           </Form.Item>
-          <Form.Item label={t("node.name")} name="name">
+          <Form.Item
+            label={t("node.name")}
+            name="name"
+            rules={[
+              {
+                validator() {
+                  if (!workspace.nodeDefs.has(editingNode.data.name)) {
+                    return Promise.reject(
+                      new Error(t("node.notFound", { name: editingNode.data.name }))
+                    );
+                  }
+                  return Promise.resolve();
+                },
+              },
+            ]}
+          >
             <AutoComplete
               disabled={disabled}
               options={nodeOptions}

src/components/register-node.ts

@@ -370,7 +370,7 @@ G6.registerNode(
       let y = 32;
       // desc text
       let desc = (data.desc || nodeDef.desc) as string;
-      if (desc) {
+      if (desc || desc === "") {
         desc = i18n.t("regnode.mark") + desc;
         desc = cutWordTo(desc, w - 15);
         addShape("text", {
@@ -388,7 +388,7 @@ G6.registerNode(
       }
 
       const args = data.args;
-      if (nodeDef.args && args && Object.keys(args).length > 0) {
+      if (args && Object.keys(args).length > 0) {
         const { str, line } = toBreakWord(`${i18n.t("regnode.args")}${JSON.stringify(args)}`, 200);
         if (data.highlightArgs) {
           addShape("rect", {
@@ -420,7 +420,7 @@ G6.registerNode(
       }
 
       const input = data.input ?? [];
-      if (nodeDef.input && input.length > 0) {
+      if (input.length > 0) {
         const { str, line } = toBreakWord(
           `${i18n.t("regnode.input")}${JSON.stringify(input)}`,
           200
@@ -458,7 +458,7 @@ G6.registerNode(
       }
 
       const output = data.output ?? [];
-      if (nodeDef.output && output.length > 0) {
+      if (output.length > 0) {
         const { str, line } = toBreakWord(
           `${i18n.t("regnode.output")}${JSON.stringify(output)}`,
           200

src/contexts/workspace-context.ts

@@ -46,7 +46,8 @@ export type EditEvent =
   | "updateNode"
   | "searchNode"
   | "editSubtree"
-  | "saveAsSubtree";
+  | "saveAsSubtree"
+  | "clickVar";
 
 export class EditorStore {
   path: string;
@@ -123,7 +124,6 @@ export type EditNodeDef = {
 };
 
 export type EditTree = {
-  data: {
   name: string;
   desc?: string;
   export?: boolean;
@@ -132,7 +132,7 @@ export type EditTree = {
   import: ImportDef[];
   declvar: VarDef[];
   subtree: VarDef[];
-  };
+  root: TreeGraphData;
 };
 
 export type FileMeta = {
@@ -692,15 +692,14 @@ export const useWorkspace = create<WorkspaceStore>((set, get) => ({
     workspace.refresh(editor.path);
     set({
       editingTree: {
-        data: {
         ...editor.data,
+        root: editor.root,
         import: editor.declare.import,
         declvar: editor.declare.declvar,
         subtree: editor.declare.subtree
           .map((def) => def.vars)
           .reduce((acc, v) => [...acc, ...v], []),
       },
-      },
       editingNodeDef: null,
       editingNode: null,
     });