support multi group for node

src/components/explorer.tsx

@@ -324,44 +324,47 @@ export const Explorer: FC = () => {
       },
     };
     workspace.nodeDefs.forEach((nodeDef) => {
-      let catalog = data.children?.find((nt) => nt.title === nodeDef.type);
-      if (!catalog) {
-        const type = getNodeType(nodeDef);
-        catalog = {
-          title: nodeDef.type,
-          path: `nodeTree.catalog.${nodeDef.type}`,
-          children: [],
-          icon: (
+      (nodeDef.group || []).forEach((g, idx) => {
+        const typeGroup = !g ? nodeDef.type : nodeDef.type.replace(/\(([\w|]+)\)/, `(${g})`);
+        let catalog = data.children?.find((nt) => nt.title === typeGroup);
+        if (!catalog) {
+          const type = getNodeType(nodeDef);
+          catalog = {
+            title: typeGroup,
+            path: `nodeTree.catalog.${typeGroup}`,
+            children: [],
+            icon: (
+              <Flex justify="center" align="center" style={{ height: "100%" }}>
+                <img
+                  className="b3-node-icon"
+                  style={{ width: "13px", height: "13px", color: "white" }}
+                  src={`./icons/${type}.svg`}
+                />
+              </Flex>
+            ),
+          };
+          data.children?.push(catalog);
+        }
+        catalog.children?.push({
+          title: `${nodeDef.name}(${nodeDef.desc})`,
+          isLeaf: true,
+          def: nodeDef,
+          path: `${nodeDef.name} ${idx}`,
+          icon: nodeDef.icon ? (
             <Flex justify="center" align="center" style={{ height: "100%" }}>
               <img
                 className="b3-node-icon"
+                key={catalog.title}
                 style={{ width: "13px", height: "13px", color: "white" }}
-                src={`./icons/${type}.svg`}
+                src={`file:///${workspace.workdir}/${nodeDef.icon}`}
               />
             </Flex>
+          ) : (
+            <Flex justify="center" align="center" style={{ height: "100%" }}>
+              <BsBoxFill style={{ width: "12px", height: "12px", color: "white" }} />{" "}
+            </Flex>
           ),
-        };
-        data.children?.push(catalog);
-      }
-      catalog.children?.push({
-        title: `${nodeDef.name}(${nodeDef.desc})`,
-        isLeaf: true,
-        def: nodeDef,
-        path: `${nodeDef.name}`,
-        icon: nodeDef.icon ? (
-          <Flex justify="center" align="center" style={{ height: "100%" }}>
-            <img
-              className="b3-node-icon"
-              key={catalog.title}
-              style={{ width: "13px", height: "13px", color: "white" }}
-              src={`file:///${workspace.workdir}/${nodeDef.icon}`}
-            />
-          </Flex>
-        ) : (
-          <Flex justify="center" align="center" style={{ height: "100%" }}>
-            <BsBoxFill style={{ width: "12px", height: "12px", color: "white" }} />{" "}
-          </Flex>
-        ),
+        });
       });
     });
     data.children?.sort((a, b) => a.title.localeCompare(b.title));

src/components/inspector.tsx

@@ -765,7 +765,7 @@ const NodeInspector: FC = () => {
             rules={[
               {
                 validator() {
-                  if (def.group && !usingGroups[def.group]) {
+                  if (def.group && !def.group.some((g) => usingGroups[g])) {
                     return Promise.reject(new Error(t("node.invalidGroup", { group: def.group })));
                   }
                   return Promise.resolve();

src/components/register-node.ts

@@ -150,7 +150,7 @@ G6.registerNode(
         !nodeDefs.has(data.name) ||
         (data.path && !data.children?.length) ||
         !checkTreeData(data) ||
-        (nodeDef.group && !usingGroups[nodeDef.group]) ||
+        (nodeDef.group && !nodeDef.group.some((g) => usingGroups[g])) ||
         (usingVars &&
           (data.input?.some((v) => v && usingVars?.[v] === undefined) ||
             data.output?.some((v) => v && usingVars?.[v] === undefined) ||

src/misc/b3type.ts

@@ -3,7 +3,7 @@ import { NodeDef } from "../behavior3/src/behavior3";
 
 declare module "../behavior3/src/behavior3" {
   interface NodeDef {
-    group?: string;
+    group?: string[];
   }
 }
 

src/misc/b3util.ts

@@ -52,10 +52,10 @@ export const initWorkdir = (path: string, handler: typeof alertError) => {
   for (const v of nodeDefData) {
     nodeDefs.set(v.name, v);
 
-    const group = v.type.match(/\((\w+)\)/)?.[1];
+    const group = v.type.match(/\(([\w|]+)\)/)?.[1];
     if (group) {
-      v.group = group;
-      groups.add(group);
+      v.group = group.split("|");
+      v.group.forEach((g) => groups.add(g));
     }
   }
   groupDefs = Array.from(groups).sort();
@@ -299,7 +299,7 @@ export const checkNodeData = (data: NodeModel | null | undefined) => {
   let hasError = false;
 
   if (conf.group) {
-    if (!usingGroups[conf.group]) {
+    if (!conf.group.some((g) => usingGroups[g])) {
       error(data, `node group '${conf.group}' is not enabled`);
       hasError = true;
     }