support group by type for node def

src/components/explorer.tsx

@@ -1,4 +1,5 @@
 import { FileTreeType, useWorkspace } from "@/contexts/workspace-context";
+import { NodeDef, getNodeType } from "@/misc/b3type";
 import * as b3util from "@/misc/b3util";
 import { modal } from "@/misc/hooks";
 import { Hotkey, isHotkeyPressed, isMacos, useHotkeys } from "@/misc/keys";
@@ -31,6 +32,15 @@ type MenuEvent =
   | "move"
   | "duplicate";
 
+export type NodeTreeType = {
+  title: string;
+  def?: NodeDef;
+  icon?: React.ReactNode;
+  isLeaf?: boolean;
+  children?: NodeTreeType[];
+  style?: React.CSSProperties;
+};
+
 const findFile = (path: string | undefined, node: FileTreeType): FileTreeType | undefined => {
   if (!path) {
     return;
@@ -112,7 +122,6 @@ export const Explorer: FC = () => {
     editors: useWorkspace((state) => state.editors),
     fileTree: useWorkspace((state) => state.fileTree),
     nodeDefs: useWorkspace((state) => state.nodeDefs),
-    nodeTree: useWorkspace((state) => state.nodeTree),
     workdir: useWorkspace((state) => state.workdir),
     onEditingNodeDef: useWorkspace((state) => state.onEditingNodeDef),
     open: useWorkspace((state) => state.open),
@@ -134,49 +143,69 @@ export const Explorer: FC = () => {
     );
   }
 
-  if (workspace.nodeTree) {
-    workspace.nodeTree.title = t("nodeDefinition");
-    workspace.nodeTree.icon = (
-      <Flex justify="center" align="center" style={{ height: "100%" }}>
-        <PiTreeStructureFill size={19} />
-      </Flex>
-    );
-    workspace.nodeTree.children?.forEach((catalog) => {
-      catalog.icon = (
+  const nodeTree = useMemo(() => {
+    const data: NodeTreeType = {
+      title: t("nodeDefinition"),
+      icon: (
         <Flex justify="center" align="center" style={{ height: "100%" }}>
-          <img
-            className="b3-node-icon"
-            style={{ width: "13px", height: "13px", color: "white" }}
-            src={`./icons/${catalog.title}.svg`}
-          />
+          <PiTreeStructureFill size={19} />
         </Flex>
-      );
-      catalog.children?.forEach((node) => {
-        if (node.def?.icon) {
-          node.icon = (
+      ),
+      children: [],
+      style: {
+        fontWeight: "bold",
+        fontSize: "13px",
+      },
+    };
+    workspace.nodeDefs.forEach((nodeDef) => {
+      let catalog = data.children?.find((nt) => nt.title === nodeDef.type);
+      if (!catalog) {
+        const type = getNodeType(nodeDef);
+        catalog = {
+          title: nodeDef.type,
+          children: [],
+          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={
-                  process.env.VITE_DEV_SERVER_URL && isMacos
-                    ? `${Path.basename(workspace.workdir)}/${node.def?.icon}`
-                    : `${workspace.workdir}/${node.def?.icon}`
-                }
+                src={`./icons/${type}.svg`}
               />
             </Flex>
-          );
-        } else {
-          node.icon = (
-            <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,
+        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={
+                process.env.VITE_DEV_SERVER_URL && isMacos
+                  ? `${Path.basename(workspace.workdir)}/${nodeDef.icon}`
+                  : `${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));
+    data.children?.forEach((child) =>
+      child.children?.sort((a, b) => a.title.localeCompare(b.title))
+    );
+    return data;
+  }, [t, workspace.nodeDefs]);
 
   useEffect(() => {
     if (workspace.editing) {
@@ -795,7 +824,7 @@ export const Explorer: FC = () => {
         <DirectoryTree
           tabIndex={-1}
           fieldNames={{ key: "title" }}
-          treeData={workspace.nodeTree ? [workspace.nodeTree] : []}
+          treeData={nodeTree ? [nodeTree] : []}
           draggable={{ icon: false, nodeDraggable: (node) => !!node.isLeaf }}
           onSelect={(_, info) => {
             const node = info.node;

src/components/inspector.tsx

@@ -80,6 +80,7 @@ const NodeInspector: FC = () => {
     form.resetFields();
     form.setFieldValue("id", data.id);
     form.setFieldValue("name", data.name);
+    form.setFieldValue("type", def.type);
     form.setFieldValue("desc", data.desc);
     form.setFieldValue("debug", data.debug);
     form.setFieldValue("path", data.path);
@@ -227,6 +228,14 @@ const NodeInspector: FC = () => {
           >
             <Input disabled={true} />
           </Form.Item>
+          <Form.Item
+            name="type"
+            label={
+              <div style={{ minWidth: "80px", justifyContent: "flex-end" }}>{t("node.type")}</div>
+            }
+          >
+            <Input disabled={true} />
+          </Form.Item>
           <Form.Item label={t("node.name")} name="name">
             <AutoComplete
               disabled={disabled}

src/components/register-node.ts

@@ -1,7 +1,9 @@
 import { useWorkspace } from "@/contexts/workspace-context";
-import { TreeGraphData } from "@/misc/b3type";
+import { TreeGraphData, getNodeType } from "@/misc/b3type";
 import { checkTreeData, toBreakWord } from "@/misc/b3util";
 import i18n from "@/misc/i18n";
+import { isMacos } from "@/misc/keys";
+import Path from "@/misc/path";
 import G6 from "@antv/g6";
 
 const NODE_COLORS: any = {
@@ -73,7 +75,7 @@ G6.registerNode(
     draw(cfg, group) {
       const workspace = useWorkspace.getState();
       const nodeDef = workspace.getNodeDef(cfg.name as string);
-      let classify = nodeDef.type || "Other";
+      let classify = getNodeType(nodeDef);
       let color = nodeDef.color || NODE_COLORS[classify] || NODE_COLORS["Other"];
       if (
         !workspace.hasNodeDef(cfg.name as string) ||
@@ -176,7 +178,11 @@ G6.registerNode(
       });
 
       // icon
-      const img = nodeDef.icon ? workspace.workdir + "/" + nodeDef.icon : `./icons/${classify}.svg`;
+      const img = nodeDef.icon
+        ? process.env.VITE_DEV_SERVER_URL && isMacos
+          ? `${Path.basename(workspace.workdir)}/${nodeDef.icon}`
+          : `${workspace.workdir}/${nodeDef.icon}`
+        : `./icons/${classify}.svg`;
       addShape("image", {
         attrs: {
           x: 5,