search node def in title bar

src/components/explorer.tsx

@@ -35,6 +35,7 @@ type MenuEvent =
 
 export type NodeTreeType = {
   title: string;
+  path: string;
   def?: NodeDef;
   icon?: React.ReactNode;
   isLeaf?: boolean;
@@ -72,7 +73,7 @@ const findParent = (node: FileTreeType, parent?: FileTreeType): FileTreeType | u
   }
 };
 
-const resolveKeys = (path: string, node: FileTreeType, keys: React.Key[]) => {
+const resolveKeys = (path: string, node: FileTreeType | NodeTreeType, keys: React.Key[]) => {
   if (node.path === path) {
     return true;
   }
@@ -274,6 +275,7 @@ export const Explorer: FC = () => {
   const workspace = {
     close: useWorkspace((state) => state.close),
     editing: useWorkspace((state) => state.editing),
+    editingNodeDef: useWorkspace((state) => state.editingNodeDef),
     editors: useWorkspace((state) => state.editors),
     fileTree: useWorkspace((state) => state.fileTree),
     nodeDefs: useWorkspace((state) => state.nodeDefs),
@@ -290,6 +292,10 @@ export const Explorer: FC = () => {
   const [newName, setNewName] = useState<string | null>(null);
   const [contextMenu, setContextMenu] = useState<ItemType[]>([]);
 
+  const rootNodedefName = "nodeTree.root";
+  const [selectedNodedefKeys, setSelectedNodedefKeys] = useState<string[]>([]);
+  const [expandedNodedefKeys, setExpandedNodedefKeys] = useState<React.Key[]>([rootNodedefName]);
+
   if (workspace.fileTree) {
     workspace.fileTree.icon = (
       <Flex justify="center" align="center" style={{ height: "100%" }}>
@@ -301,6 +307,7 @@ export const Explorer: FC = () => {
   const nodeTree = useMemo(() => {
     const data: NodeTreeType = {
       title: t("nodeDefinition"),
+      path: rootNodedefName,
       icon: (
         <Flex justify="center" align="center" style={{ height: "100%" }}>
           <PiTreeStructureFill size={19} />
@@ -318,6 +325,7 @@ export const Explorer: FC = () => {
         const type = getNodeType(nodeDef);
         catalog = {
           title: nodeDef.type,
+          path: `nodeTree.catalog.${nodeDef.type}`,
           children: [],
           icon: (
             <Flex justify="center" align="center" style={{ height: "100%" }}>
@@ -335,17 +343,14 @@ export const Explorer: FC = () => {
         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={
+              src={`file:///${workspace.workdir}/${nodeDef.icon}`}
-                process.env.VITE_DEV_SERVER_URL && isMacos
-                  ? `${Path.basename(workspace.workdir)}/${nodeDef.icon}`
-                  : `${workspace.workdir}/${nodeDef.icon}`
-              }
             />
           </Flex>
         ) : (
@@ -362,6 +367,7 @@ export const Explorer: FC = () => {
     return data;
   }, [t, workspace.nodeDefs]);
 
+  // expand the selected tree
   useEffect(() => {
     if (workspace.editing) {
       const keys: React.Key[] = [];
@@ -376,6 +382,21 @@ export const Explorer: FC = () => {
     }
   }, [workspace.editing]);
 
+  // expand the selected node def
+  useEffect(() => {
+    if (workspace.editingNodeDef) {
+      const keys: React.Key[] = [];
+      resolveKeys(workspace.editingNodeDef.data.name, nodeTree, keys);
+      for (const k of expandedNodedefKeys) {
+        if (keys.indexOf(k) === -1) {
+          keys.push(k);
+        }
+      }
+      setExpandedNodedefKeys(keys);
+      setSelectedNodedefKeys([workspace.editingNodeDef.data.name]);
+    }
+  }, [t, workspace.editingNodeDef]);
+
   const keysRef = useHotkeys<HTMLDivElement>(
     [
       Hotkey.F2,
@@ -763,6 +784,8 @@ export const Explorer: FC = () => {
               tabIndex={-1}
               treeData={workspace.fileTree ? [workspace.fileTree] : []}
               fieldNames={{ key: "path" }}
+              expandedKeys={expandedKeys}
+              selectedKeys={selectedKeys}
               onExpand={(keys) => {
                 setExpandedKeys(keys);
               }}
@@ -840,7 +863,6 @@ export const Explorer: FC = () => {
               onDragStart={(e) => {
                 e.event.dataTransfer.setData("explore-file", e.node.path);
               }}
-              defaultExpandedKeys={[workspace.fileTree.path]}
               draggable={
                 newName !== null
                   ? false
@@ -852,17 +874,19 @@ export const Explorer: FC = () => {
                       },
                     }
               }
-              expandedKeys={expandedKeys}
               switcherIcon={<DownOutlined />}
-              selectedKeys={selectedKeys}
             />
           </div>
         </Dropdown>
         <DirectoryTree
           tabIndex={-1}
-          fieldNames={{ key: "title" }}
+          fieldNames={{ key: "path" }}
-          treeData={nodeTree ? [nodeTree] : []}
+          treeData={[nodeTree]}
-          defaultExpandedKeys={[nodeTree.title]}
+          expandedKeys={expandedNodedefKeys}
+          selectedKeys={selectedNodedefKeys}
+          onExpand={(keys) => {
+            setExpandedNodedefKeys(keys);
+          }}
           draggable={{ icon: false, nodeDraggable: (node) => !!node.isLeaf }}
           titleRender={(node) => (
             <div style={{ flex: 1, width: 0, minWidth: 0 }}>
@@ -879,10 +903,13 @@ export const Explorer: FC = () => {
           )}
           onSelect={(_, info) => {
             const node = info.node;
-            if (node && node.isLeaf) {
+            if (node) {
-              workspace.onEditingNodeDef({
+              if (node.isLeaf) {
-                data: node.def!,
+                workspace.onEditingNodeDef({
-              });
+                  data: node.def!,
+                });
+              }
+              setSelectedNodedefKeys([node.path]);
             }
           }}
           onDragStart={(e) => {

src/components/inspector.tsx

@@ -2,6 +2,7 @@ import { EditNode, EditTree, useWorkspace } from "@/contexts/workspace-context";
 import { NodeArg, NodeModel, TreeGraphData } from "@/misc/b3type";
 import { checkOneof } from "@/misc/b3util";
 import { Hotkey, isMacos } from "@/misc/keys";
+import { mergeClassNames } from "@/misc/util";
 import { EditOutlined } from "@ant-design/icons";
 import {
   AutoComplete,
@@ -57,8 +58,8 @@ const TreeInspector: FC = () => {
         <span style={{ fontSize: "18px", fontWeight: "600" }}>{t("tree.overview")}</span>
       </div>
       <div
-        className={isMacos ? undefined : "b3-overflow"}
+        className={mergeClassNames("b3-inspector-content", isMacos ? "" : "b3-overflow")}
-        style={{ overflow: "auto", height: "100%", padding: "24px" }}
+        style={{ overflow: "auto", height: "100%" }}
       >
         <Form form={form} labelCol={{ span: 8 }} onFinish={finish}>
           <Form.Item name="name" label={t("tree.name")}>
@@ -263,8 +264,8 @@ const NodeInspector: FC = () => {
         <span style={{ fontSize: "18px", fontWeight: "600" }}>{def.desc}</span>
       </div>
       <div
-        className={isMacos ? undefined : "b3-overflow"}
+        className={mergeClassNames("b3-inspector-content", isMacos ? "" : "b3-overflow")}
-        style={{ overflow: "auto", height: "100%", padding: "24px" }}
+        style={{ overflow: "auto", height: "100%" }}
       >
         <Form
           form={form}
@@ -549,8 +550,8 @@ const NodeDefInspector: FC = () => {
         <span style={{ fontSize: "18px", fontWeight: "600" }}>{t("nodeDefinition")}</span>
       </div>
       <div
-        className={isMacos ? undefined : "b3-overflow"}
+        className={mergeClassNames("b3-inspector-content", isMacos ? "" : "b3-overflow")}
-        style={{ overflow: "auto", height: "100%", padding: "24px" }}
+        style={{ overflow: "auto", height: "100%" }}
       >
         <Form
           form={form}

src/components/register-node.ts

@@ -177,9 +177,7 @@ G6.registerNode(
 
       // icon
       const img = nodeDef.icon
-        ? process.env.VITE_DEV_SERVER_URL && isMacos
+        ? `file:///${workspace.workdir}/${nodeDef.icon}`
-          ? `${Path.basename(workspace.workdir)}/${nodeDef.icon}`
-          : `${workspace.workdir}/${nodeDef.icon}`
         : `./icons/${classify}.svg`;
       addShape("image", {
         attrs: {

src/components/titlebar.tsx

@@ -5,19 +5,23 @@ import { SearchOutlined } from "@ant-design/icons";
 import { Button, Flex, LayoutProps, Select } from "antd";
 import React, { FC, useMemo } from "react";
 import { Menu } from "./menu";
+import { NodeDef } from "@/misc/b3type";
 
 interface OptionType {
   label: string | React.ReactNode;
   value: string;
-  path: string;
+  path?: string;
+  nodeDef?: NodeDef;
 }
 
 export const TitleBar: FC<LayoutProps> = () => {
   const workspace = {
     allFiles: useWorkspace((state) => state.allFiles),
     fileTree: useWorkspace((state) => state.fileTree),
+    nodeDefs: useWorkspace((state) => state.nodeDefs),
     isShowingSearch: useWorkspace((state) => state.isShowingSearch),
     onShowingSearch: useWorkspace((state) => state.onShowingSearch),
+    onEditingNodeDef: useWorkspace((state) => state.onEditingNodeDef),
     open: useWorkspace((state) => state.open),
     name: useWorkspace((state) => state.path),
     relative: useWorkspace((state) => state.relative),
@@ -41,7 +45,23 @@ export const TitleBar: FC<LayoutProps> = () => {
         path: file.path,
       });
     });
-    options.sort((a, b) => a.path.localeCompare(b.path));
+    workspace.nodeDefs.forEach((def) => {
+      const value = def.name;
+      const desc = def.desc ?? "";
+      options.push({
+        label: (
+          <div>
+            {value}
+            <span> </span>
+            <span style={{ color: "gray", fontSize: "12px" }}>
+              {value} {desc}
+            </span>
+          </div>
+        ),
+        value: `${value.toLocaleLowerCase()} ${desc.toLocaleLowerCase()}`,
+        nodeDef: def,
+      });
+    });
     return options;
   }, [workspace.allFiles, workspace.fileTree]);
   return (
@@ -103,17 +123,23 @@ export const TitleBar: FC<LayoutProps> = () => {
             onChange={(_, option) => {
               if (!(option instanceof Array)) {
                 workspace.onShowingSearch(false);
-                workspace.open(option.path);
+                if (option.path) {
+                  workspace.open(option.path);
+                } else if (option.nodeDef) {
+                  workspace.onEditingNodeDef({
+                    data: option.nodeDef,
+                  });
+                }
               }
             }}
             filterOption={(input, option) =>
               (option?.value ?? "").includes(input.toLocaleLowerCase())
             }
-            filterSort={(optionA, optionB) =>
+            // filterSort={(optionA, optionB) =>
-              (optionA?.value ?? "")
+            //   (optionA?.value ?? "")
-                .toLowerCase()
+            //     .toLowerCase()
-                .localeCompare((optionB?.value ?? "").toLowerCase())
+            //     .localeCompare((optionB?.value ?? "").toLowerCase())
-            }
+            // }
             options={searchOptions}
           />
         )}

src/index.scss

@@ -107,8 +107,12 @@ body {
   width: 12px !important;
 }
 
+.b3-inspector-content {
+  padding: 20px;
+}
+
 .b3-inspector .ant-form-item {
-  margin-bottom: 16px;
+  margin-bottom: 10px;
 }
 
 .b3-inspector .ant-form-item-label {