add node def inspector

src/components/explorer.tsx

@@ -105,8 +105,6 @@ const renameFile = (oldPath: string, newPath: string) => {
   return false;
 };
 
-const getSvgIcon = (path: string) => {};
-
 export const Explorer: FC = () => {
   const workspace = {
     close: useWorkspace((state) => state.close),
@@ -116,6 +114,7 @@ export const Explorer: FC = () => {
     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),
   };
   const { t } = useTranslation();
@@ -798,6 +797,14 @@ export const Explorer: FC = () => {
           fieldNames={{ key: "title" }}
           treeData={workspace.nodeTree ? [workspace.nodeTree] : []}
           draggable={{ icon: false, nodeDraggable: (node) => !!node.isLeaf }}
+          onSelect={(_, info) => {
+            const node = info.node;
+            if (node && node.isLeaf) {
+              workspace.onEditingNodeDef({
+                data: node.def!,
+              });
+            }
+          }}
           onDragStart={(e) => {
             e.event.dataTransfer.setData("explore-node", e.node.def?.name ?? "");
           }}

src/components/inspector.tsx

@@ -10,11 +10,60 @@ import Markdown from "react-markdown";
 
 interface OptionType extends DefaultOptionType {}
 
-export const Inspector: FC = () => {
+const TreeInspector: FC = () => {
   const workspace = {
     editing: useWorkspace((state) => state.editing),
-    editingNode: useWorkspace((state) => state.editingNode),
-    editingTree: useWorkspace((state) => state.editingTree),
+    editingTree: useWorkspace((state) => state.editingTree)!,
+  };
+  const { t } = useTranslation();
+  const [form] = Form.useForm();
+
+  // set form values
+  useEffect(() => {
+    const data = workspace.editingTree.data;
+    form.resetFields();
+    form.setFieldValue("name", data.name);
+    form.setFieldValue("desc", data.desc);
+  }, [workspace.editingTree]);
+
+  const finish = (values: any) => {
+    const data = {} as TreeModel;
+    data.name = values.name;
+    data.desc = values.desc || undefined;
+    workspace.editing?.dispatch?.("updateTree", {
+      data: {
+        name: values.name,
+        desc: values.desc || undefined,
+      },
+    } as EditTree);
+  };
+
+  return (
+    <>
+      <div style={{ padding: "12px 24px" }}>
+        <span style={{ fontSize: "18px", fontWeight: "600" }}>{t("tree.overview")}</span>
+      </div>
+      <div
+        className={isMacos ? undefined : "b3-overflow"}
+        style={{ overflow: "auto", height: "100%", padding: "24px" }}
+      >
+        <Form form={form} labelCol={{ span: 8 }} onFinish={finish}>
+          <Form.Item name="name" label={t("tree.name")}>
+            <Input disabled={true} />
+          </Form.Item>
+          <Form.Item name="desc" label={t("tree.desc")}>
+            <Input onBlur={form.submit} />
+          </Form.Item>
+        </Form>
+      </div>
+    </>
+  );
+};
+
+const NodeInspector: FC = () => {
+  const workspace = {
+    editing: useWorkspace((state) => state.editing),
+    editingNode: useWorkspace((state) => state.editingNode)!,
     getNodeDef: useWorkspace((state) => state.getNodeDef),
     nodeDefs: useWorkspace((state) => state.nodeDefs),
     onEditingNode: useWorkspace((state) => state.onEditingNode),
@@ -26,12 +75,6 @@ export const Inspector: FC = () => {
 
   // set form values
   useEffect(() => {
-    if (workspace.editingTree) {
-      const data = workspace.editingTree.data;
-      form.resetFields();
-      form.setFieldValue("name", data.name);
-      form.setFieldValue("desc", data.desc);
-    } else if (workspace.editingNode) {
     const data = workspace.editingNode.data;
     const def = workspace.getNodeDef(workspace.editingNode.data.name);
     form.resetFields();
@@ -49,8 +92,7 @@ export const Inspector: FC = () => {
     def.output?.forEach((_, i) => {
       form.setFieldValue(`output.${i}`, data.output?.[i]);
     });
-    }
-  }, [workspace.editingNode, workspace.editingTree]);
+  }, [workspace.editingNode]);
 
   // auto complete for node
   const nodeOptions = useMemo(() => {
@@ -99,39 +141,6 @@ export const Inspector: FC = () => {
     return options;
   }, [workspace.allFiles, workspace.fileTree]);
 
-  if (workspace.editingTree) {
-    const finish = (values: any) => {
-      const data = {} as TreeModel;
-      data.name = values.name;
-      data.desc = values.desc || undefined;
-      workspace.editing?.dispatch?.("updateTree", {
-        data: {
-          name: values.name,
-          desc: values.desc || undefined,
-        },
-      } as EditTree);
-    };
-    return (
-      <Flex className="b3-inspector" vertical style={{ height: "100%" }}>
-        <div style={{ padding: "12px 24px" }}>
-          <span style={{ fontSize: "18px", fontWeight: "600" }}>{t("tree.overview")}</span>
-        </div>
-        <div
-          className={isMacos ? undefined : "b3-overflow"}
-          style={{ overflow: "auto", height: "100%", padding: "24px" }}
-        >
-          <Form form={form} labelCol={{ span: 8 }} onFinish={finish}>
-            <Form.Item name="name" label={t("tree.name")}>
-              <Input disabled={true} />
-            </Form.Item>
-            <Form.Item name="desc" label={t("tree.desc")}>
-              <Input onBlur={form.submit} />
-            </Form.Item>
-          </Form>
-        </div>
-      </Flex>
-    );
-  } else if (workspace.editingNode) {
   const editingNode = workspace.editingNode;
   const def = workspace.getNodeDef(editingNode.data.name);
   const disabled = !editingNode.editable;
@@ -196,7 +205,7 @@ export const Inspector: FC = () => {
   };
 
   return (
-      <Flex className="b3-inspector" vertical style={{ height: "100%" }}>
+    <>
       <div style={{ padding: "12px 24px" }}>
         <span style={{ fontSize: "18px", fontWeight: "600" }}>{def.desc}</span>
       </div>
@@ -354,9 +363,57 @@ export const Inspector: FC = () => {
           )}
         </Form>
       </div>
+    </>
+  );
+};
+
+const NodeDefInspector: FC = () => {
+  const [form] = Form.useForm();
+  return (
+    <>
+      <div style={{ padding: "12px 24px" }}>
+        <span style={{ fontSize: "18px", fontWeight: "600" }}>Node Definition</span>
+      </div>
+      <div
+        className={isMacos ? undefined : "b3-overflow"}
+        style={{ overflow: "auto", height: "100%", padding: "24px" }}
+      >
+        <Form
+          form={form}
+          wrapperCol={{ span: "auto" }}
+          labelCol={{ span: "auto" }}
+          // onFinish={finish}
+        ></Form>
+      </div>
+    </>
+  );
+};
+
+export const Inspector: FC = () => {
+  const workspace = {
+    editingNode: useWorkspace((state) => state.editingNode),
+    editingTree: useWorkspace((state) => state.editingTree),
+    editingNodeDef: useWorkspace((state) => state.editingNodeDef),
+  };
+  let isEditingNode = false;
+  let isEditingTree = false;
+  let isEditingNodeDef = false;
+  if (workspace.editingNodeDef) {
+    isEditingNodeDef = true;
+  } else if (workspace.editingTree) {
+    isEditingTree = true;
+  } else if (workspace.editingNode) {
+    isEditingNode = true;
+  }
+  return (
+    <Flex
+      vertical
+      className="b3-inspector"
+      style={{ height: "100%", width: "340px", borderLeft: `1px solid var(--b3-color-border)` }}
+    >
+      {isEditingNodeDef && <NodeDefInspector />}
+      {isEditingTree && <TreeInspector />}
+      {isEditingNode && <NodeInspector />}
     </Flex>
   );
-  } else {
-    return null;
-  }
 };

src/components/workspace.tsx

@@ -409,18 +409,7 @@ export const Workspace: FC = () => {
             />
           )}
         </Content>
-        {workspace.editors.length > 0 && (
-          <Sider
-            className="b3-inspector-wrapper"
-            width={340}
-            style={{
-              height: "100%",
-              borderLeft: `1px solid var(--b3-color-border)`,
-            }}
-          >
         <Inspector />
-          </Sider>
-        )}
       </Layout>
     </Layout>
   );

src/contexts/workspace-context.ts

@@ -93,6 +93,10 @@ export type EditNode = {
   editable: boolean;
 };
 
+export type EditNodeDef = {
+  data: NodeDef;
+};
+
 export type EditTree = {
   data: TreeModel;
 };
@@ -133,6 +137,10 @@ export type WorkspaceStore = {
   editingNode?: EditNode | null;
   onEditingNode: (node: EditNode) => void;
 
+  // edit node def
+  editingNodeDef?: EditNodeDef | null;
+  onEditingNodeDef: (node: EditNodeDef) => void;
+
   // edit tree
   editingTree?: EditTree | null;
   onEditingTree: (tree: EditTree | null) => void;
@@ -373,7 +381,7 @@ export const useWorkspace = create<WorkspaceStore>((set, get) => ({
     }
     if (editors.length === 0) {
       editting = undefined;
-      set({ editingNode: undefined });
+      set({ editingNode: undefined, editingTree: undefined });
     }
     set({ editing: editting, editors: editors });
   },
@@ -479,12 +487,16 @@ export const useWorkspace = create<WorkspaceStore>((set, get) => ({
 
   // node edit
   onEditingNode: (node) => {
-    set({ editingNode: node });
+    set({ editingNode: node, editingNodeDef: null });
+  },
+
+  onEditingNodeDef: (nodeDef) => {
+    set({ editingNodeDef: nodeDef });
   },
 
   // tree edit
   onEditingTree: (tree) => {
-    set({ editingTree: tree });
+    set({ editingTree: tree, editingNodeDef: null });
   },
 
   // node def