Merge branch 'dev'

electron/main/index.ts

@@ -171,3 +171,8 @@ ipcMain.handle("trashItem", (_, arg: string) => {
   arg = arg.replace(/\//g, path.sep);
   shell.trashItem(arg).catch((e) => console.error(e));
 });
+
+ipcMain.handle("showItemInFolder", (_, arg: string) => {
+  arg = arg.replace(/\//g, path.sep);
+  shell.showItemInFolder(arg);
+});

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "behavior3editor",
-  "version": "1.2.0",
+  "version": "1.3.0",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "behavior3editor",
-      "version": "1.2.0",
+      "version": "1.3.0",
       "hasInstallScript": true,
       "license": "MIT",
       "dependencies": {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "behavior3editor",
-  "version": "1.2.0",
+  "version": "1.3.0",
   "main": "dist-electron/main/index.js",
   "description": "行为树编辑器",
   "author": "zhandouxiaojiji & codetypes",

public/icons/Decorator.svg

@@ -1 +1 @@
-<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1603437237518" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1263" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M195.776 194.688a448.064 448.064 0 0 1 760.768 261.312H846.08a336.064 336.064 0 0 0-569.408-181.12l182.08 180.672H183.488l-0.064 0.448H67.456l0.064-0.448H64V64l131.776 130.688z m632.448 634.624A448.064 448.064 0 0 1 67.456 568H177.92a336.064 336.064 0 0 0 569.408 181.12L565.248 568.384h275.264l0.064-0.448h115.968l-0.064 0.448H960V960l-131.776-130.688z" fill="#000000" p-id="1264"></path></svg>
+<svg stroke="currentColor" stroke-width="0" viewBox="0 0 16 16" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg" style="width:12px;height:12px" color="#fff"><path d="M2.273 9.53a2.273 2.273 0 100-4.546 2.273 2.273 0 000 4.547zm9.467-4.984a2.273 2.273 0 100-4.546 2.273 2.273 0 000 4.546M7.4 13.108a5.54 5.54 0 01-3.775-2.88 3.27 3.27 0 01-1.944.24 7.4 7.4 0 005.328 4.465c.53.113 1.072.169 1.614.166a3.25 3.25 0 01-.666-1.9 6 6 0 01-.557-.091m3.828 2.285a2.273 2.273 0 100-4.546 2.273 2.273 0 000 4.546m3.163-3.108a7.44 7.44 0 00.373-8.726 3.3 3.3 0 01-1.278 1.498 5.57 5.57 0 01-.183 5.535 3.26 3.26 0 011.088 1.693M2.098 3.998a3.3 3.3 0 011.897.486 5.54 5.54 0 014.464-2.388c.037-.67.277-1.313.69-1.843a7.47 7.47 0 00-7.051 3.745" stroke="none"/></svg>

public/icons/Disabled.svg

@@ -0,0 +1 @@
+<svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 24 24" height="200px" width="200px" xmlns="http://www.w3.org/2000/svg"><path d="M1 12C1 5.925 5.925 1 12 1s11 4.925 11 11-4.925 11-11 11S1 18.075 1 12Zm16.333-4.167a.825.825 0 0 0-1.166-1.166l-9.5 9.5a.825.825 0 0 0 1.166 1.166Z"></path></svg>

public/locales/en.json

@@ -77,8 +77,8 @@
   "regnode.subtree": "Subtree: ",
 
   "node.args": "Const arguments",
-  "node.codePlaceholder": "a.b * 3 > 2",
   "node.debug": "Debug",
+  "node.disabled": "Disabled",
   "node.deleteRootNodeDenied": "Unable to delete the root node",
   "node.editSubtreeDenied": "Unable to edit the subtree node",
   "node.desc": "Node desc",

public/locales/zh.json

@@ -77,8 +77,8 @@
   "regnode.subtree": "子树：",
 
   "node.args": "常量参数",
-  "node.codePlaceholder": "a.b * 3 > 2",
   "node.debug": "调试",
+  "node.disabled": "禁用",
   "node.deleteRootNodeDenied": "不能删除根节点",
   "node.editSubtreeDenied": "不能编辑子树节点",
   "node.desc": "节点说明",

sample/workspace.b3-workspace

@@ -1,5 +1,28 @@
 {
-  "isRelative": true,
+  "files": [
-  "nodeConfPath": "node-config.json",
+    {
-  "workdir": "workdir"
+      "path": "workdir/hero.json",
+      "desc": "英雄测试AI"
+    },
+    {
+      "path": "workdir/monster.json",
+      "desc": "怪物测试AI"
+    },
+    {
+      "path": "workdir/sub/subtree1.json",
+      "desc": "子树1"
+    },
+    {
+      "path": "workdir/sub/subtree2.json",
+      "desc": "子树2"
+    },
+    {
+      "path": "workdir/subtree1.json",
+      "desc": "子树1"
+    },
+    {
+      "path": "workdir/subtree2.json",
+      "desc": "子树2"
+    }
+  ]
 }

src/components/editor.tsx

@@ -131,6 +131,8 @@ export const Editor: FC<EditorProps> = ({ onUpdate: updateState, data: editor, .
     onEditingTree: useWorkspace((state) => state.onEditingTree),
     open: useWorkspace((state) => state.open),
     workdir: useWorkspace((state) => state.workdir),
+    relative: useWorkspace((state) => state.relative),
+    updateFileMeta: useWorkspace((state) => state.updateFileMeta),
   };
 
   const searchInputRef = useRef<InputRef>(null);
@@ -605,8 +607,8 @@ export const Editor: FC<EditorProps> = ({ onUpdate: updateState, data: editor, .
         desc: editor.desc,
       } as TreeModel;
       fs.writeFileSync(path, JSON.stringify(treeModel, null, 2));
+      workspace.updateFileMeta(editor);
       editor.unsave = false;
-
       editor.data = b3util.createTreeData(root);
       editor.autoId = b3util.refreshTreeDataId(editor.data);
       editor.graph.changeData(editor.data);
@@ -664,7 +666,7 @@ export const Editor: FC<EditorProps> = ({ onUpdate: updateState, data: editor, .
         desc: data.desc,
       } as TreeModel;
       fs.writeFileSync(subpath, JSON.stringify(subtreeModel, null, 2));
-      data.path = Path.relative(workspace.workdir, subpath).replaceAll(Path.sep, "/");
+      data.path = workspace.relative(subpath);
       reload();
       pushHistory();
       onChange();
@@ -858,7 +860,7 @@ export const Editor: FC<EditorProps> = ({ onUpdate: updateState, data: editor, .
             {
               id: editor.autoId++,
               name: "unknow",
-              path: Path.relative(workspace.workdir, exploreFile).replaceAll(Path.sep, "/"),
+              path: workspace.relative(exploreFile),
             },
             dstData.id
           );
@@ -1185,8 +1187,8 @@ export const Editor: FC<EditorProps> = ({ onUpdate: updateState, data: editor, .
                       type="text"
                       size="small"
                       className={mergeClassNames(
-                        "b3-editor-button-filter",
+                        "b3-editor-filter",
-                        filterOption.filterCase && "b3-editor-button-filter-selected"
+                        filterOption.filterCase && "b3-editor-filter-selected"
                       )}
                       icon={<VscCaseSensitive style={{ width: "18px", height: "18px" }} />}
                       onClick={() =>
@@ -1201,8 +1203,8 @@ export const Editor: FC<EditorProps> = ({ onUpdate: updateState, data: editor, .
                     type="text"
                     size="small"
                     className={mergeClassNames(
-                      "b3-editor-button-filter",
+                      "b3-editor-filter",
-                      filterOption.filterFocus && "b3-editor-button-filter-selected"
+                      filterOption.filterFocus && "b3-editor-filter-selected"
                     )}
                     icon={<RiFocus3Line />}
                     onClick={() =>

src/components/explorer.tsx

@@ -551,7 +551,7 @@ export const Explorer: FC = () => {
         break;
       }
       case "revealFile":
-        shell.showItemInFolder(node.path.replaceAll("/", Path.sep));
+        ipcRenderer.invoke("showItemInFolder", node.path);
         break;
       case "rename": {
         node.editing = true;
@@ -709,8 +709,6 @@ export const Explorer: FC = () => {
     return arr;
   }, [t, copyFile]);
 
-  const nodeConfs = useMemo(() => {}, [workspace.nodeDefs]);
-
   const onClick = (info: MenuInfo) => {
     const node = findFile(selectedKeys[0], workspace.fileTree!) ?? workspace.fileTree;
     if (node) {
@@ -804,7 +802,19 @@ export const Explorer: FC = () => {
                     </div>
                   );
                 } else {
-                  return <span key={node.path}>{node.title}</span>;
+                  return (
+                    <div style={{ flex: 1, width: 0, minWidth: 0 }}>
+                      <div
+                        style={{
+                          whiteSpace: "nowrap",
+                          overflow: "hidden",
+                          textOverflow: "ellipsis",
+                        }}
+                      >
+                        {node.title}
+                      </div>
+                    </div>
+                  );
                 }
               }}
               allowDrop={(options) => {
@@ -826,6 +836,19 @@ export const Explorer: FC = () => {
           fieldNames={{ key: "title" }}
           treeData={nodeTree ? [nodeTree] : []}
           draggable={{ icon: false, nodeDraggable: (node) => !!node.isLeaf }}
+          titleRender={(node) => (
+            <div style={{ flex: 1, width: 0, minWidth: 0 }}>
+              <div
+                style={{
+                  whiteSpace: "nowrap",
+                  overflow: "hidden",
+                  textOverflow: "ellipsis",
+                }}
+              >
+                {node.title}
+              </div>
+            </div>
+          )}
           onSelect={(_, info) => {
             const node = info.node;
             if (node && node.isLeaf) {

src/components/inspector.tsx

@@ -3,12 +3,15 @@ import { NodeArgType, NodeModel, TreeGraphData, TreeModel } from "@/misc/b3type"
 import { Hotkey, isMacos } from "@/misc/keys";
 import Path from "@/misc/path";
 import { AutoComplete, Divider, Flex, Form, Input, InputNumber, Select, Switch } from "antd";
+import TextArea from "antd/es/input/TextArea";
 import { DefaultOptionType } from "antd/es/select";
 import { FC, useEffect, useMemo } from "react";
 import { useTranslation } from "react-i18next";
 import Markdown from "react-markdown";
 
-interface OptionType extends DefaultOptionType {}
+interface OptionType extends DefaultOptionType {
+  value: string;
+}
 
 const TreeInspector: FC = () => {
   const workspace = {
@@ -52,7 +55,7 @@ const TreeInspector: FC = () => {
             <Input disabled={true} />
           </Form.Item>
           <Form.Item name="desc" label={t("tree.desc")}>
-            <Input onBlur={form.submit} />
+            <TextArea autoSize onBlur={form.submit} />
           </Form.Item>
         </Form>
       </div>
@@ -69,6 +72,7 @@ const NodeInspector: FC = () => {
     onEditingNode: useWorkspace((state) => state.onEditingNode),
     allFiles: useWorkspace((state) => state.allFiles),
     fileTree: useWorkspace((state) => state.fileTree),
+    relative: useWorkspace((state) => state.relative),
   };
   const { t } = useTranslation();
   const [form] = Form.useForm();
@@ -81,8 +85,9 @@ const NodeInspector: FC = () => {
     form.setFieldValue("id", data.id);
     form.setFieldValue("name", data.name);
     form.setFieldValue("type", def.type);
-    form.setFieldValue("desc", data.desc);
+    form.setFieldValue("desc", data.desc || def.desc);
     form.setFieldValue("debug", data.debug);
+    form.setFieldValue("disabled", data.disabled);
     form.setFieldValue("path", data.path);
     def.args?.forEach((v) => {
       form.setFieldValue(`args.${v.name}`, data.args?.[v.name]);
@@ -131,14 +136,15 @@ const NodeInspector: FC = () => {
   // auto complete for subtree
   const subtreeOptions = useMemo(() => {
     const options: OptionType[] = [];
-    workspace.allFiles.forEach((path) => {
+    workspace.allFiles.forEach((file) => {
-      const value = Path.relative(workspace.fileTree!.path, path).replaceAll(Path.sep, "/");
+      const value = workspace.relative(file.path);
       const desc = ""; //fileNode.desc ? `(${fileNode.desc})` : "";
       options.push({
         label: `${value}${desc}`,
         value: value,
       });
     });
+    options.sort((a, b) => a.value.localeCompare(b.value));
     return options;
   }, [workspace.allFiles, workspace.fileTree]);
 
@@ -152,7 +158,8 @@ const NodeInspector: FC = () => {
     data.id = editingNode.data.id;
     data.name = values.name;
     data.debug = values.debug || undefined;
-    data.desc = values.desc || undefined;
+    data.disabled = values.disabled || undefined;
+    data.desc = values.desc && values.desc !== def.desc ? values.desc : undefined;
     data.path = values.path || undefined;
 
     def.args?.forEach((arg) => {
@@ -188,6 +195,7 @@ const NodeInspector: FC = () => {
           name: workspace.nodeDefs.get(newname)?.name ?? newname,
           desc: editingNode.data.desc,
           debug: editingNode.data.debug,
+          disabled: editingNode.data.disabled,
         },
         editable: editingNode.editable,
       });
@@ -250,11 +258,14 @@ const NodeInspector: FC = () => {
             />
           </Form.Item>
           <Form.Item name="desc" label={t("node.desc")}>
-            <Input disabled={disabled} onBlur={form.submit} />
+            <TextArea autoSize disabled={disabled} onBlur={form.submit} />
           </Form.Item>
           <Form.Item label={t("node.debug")} name="debug" valuePropName="checked">
             <Switch disabled={disabled && !editingNode.data.path} onChange={form.submit} />
           </Form.Item>
+          <Form.Item label={t("node.disabled")} name="disabled" valuePropName="checked">
+            <Switch disabled={disabled && !editingNode.data.path} onChange={form.submit} />
+          </Form.Item>
           <Form.Item label={t("node.subtree")} name="path">
             <AutoComplete
               disabled={disabled && !editingNode.data.path}
@@ -321,9 +332,7 @@ const NodeInspector: FC = () => {
                     )}
                     {type === "float" && <InputNumber disabled={disabled} onBlur={form.submit} />}
                     {type === "boolean" && <Switch disabled={disabled} onChange={form.submit} />}
-                    {type === "code" && (
+                    {type === "code" && <Input disabled={disabled} onBlur={form.submit} />}
-                      <Input onBlur={form.submit} placeholder={t("node.codePlaceholder")} />
-                    )}
                     {type === "enum" && (
                       <Select disabled={disabled} onBlur={form.submit} onChange={form.submit}>
                         {v.options?.map((value) => {
@@ -438,7 +447,7 @@ const NodeDefInspector: FC = () => {
               <div style={{ minWidth: "80px", justifyContent: "flex-end" }}>{t("node.desc")}</div>
             }
           >
-            <Input disabled={true} />
+            <TextArea autoSize disabled={true} />
           </Form.Item>
           <Markdown>{data.doc}</Markdown>
           {data.input && data.input.length > 0 && (
@@ -468,7 +477,6 @@ const NodeDefInspector: FC = () => {
               </Divider>
               {data.args.map((v, i) => {
                 const required = v.type.indexOf("?") == -1;
-                const type = v.type.replace("?", "") as NodeArgType;
                 return (
                   <Form.Item
                     name={`args.${i}.type`}

src/components/menu.tsx

@@ -41,12 +41,10 @@ export const Menu: FC<LayoutProps> = () => {
   const { t } = useTranslation();
   const [trigger, setTrigger] = useState<DropDownProps["trigger"]>(["click"]);
   const workspace = {
-    allFiles: useWorkspace((state) => state.allFiles),
     batchProject: useWorkspace((state) => state.batchProject),
     buildProject: useWorkspace((state) => state.buildProject),
     createProject: useWorkspace((state) => state.createProject),
     editing: useWorkspace((state) => state.editing),
-    editors: useWorkspace((state) => state.editors),
     init: useWorkspace((state) => state.init),
     open: useWorkspace((state) => state.open),
     openProject: useWorkspace((state) => state.openProject),

src/components/register-node.ts

@@ -7,12 +7,12 @@ import Path from "@/misc/path";
 import G6 from "@antv/g6";
 
 const NODE_COLORS: any = {
-  ["Composite"]: "rgb(91,237,32)",
+  ["Composite"]: "#5aed20",
-  ["Decorator"]: "rgb(218,167,16)",
+  ["Decorator"]: "#faad14",
-  ["Condition"]: "rgb(228,20,139)",
+  ["Condition"]: "#e4148b",
-  ["Action"]: "rgb(91,143,249)",
+  ["Action"]: "#5b90f9",
-  ["Other"]: "rgb(112,112,112)",
+  ["Other"]: "#707070",
-  ["Error"]: "rgb(255,0,0)",
+  ["Error"]: "#ff0000",
 };
 
 const SELECTED_LINE_WIDTH = 4;
@@ -213,7 +213,20 @@ G6.registerNode(
             width: 14,
             img: `./icons/Debug.svg`,
           },
-          name: "node-icon",
+          name: "node-debug-icon",
+        });
+      }
+
+      if (cfg.disabled) {
+        addShape("image", {
+          attrs: {
+            x: 182 - (cfg.debug ? 14 : 0),
+            y: 2,
+            height: 14,
+            width: 14,
+            img: `./icons/Disabled.svg`,
+          },
+          name: "node-disabled-icon",
         });
       }
 

src/components/titlebar.tsx

@@ -20,23 +20,28 @@ export const TitleBar: FC<LayoutProps> = () => {
     onShowingSearch: useWorkspace((state) => state.onShowingSearch),
     open: useWorkspace((state) => state.open),
     name: useWorkspace((state) => state.path),
+    relative: useWorkspace((state) => state.relative),
   };
   const searchOptions = useMemo(() => {
     const options: OptionType[] = [];
-    workspace.allFiles.forEach((path) => {
+    workspace.allFiles.forEach((file) => {
-      const value = Path.relative(workspace.fileTree!.path, path).replaceAll(Path.sep, "/");
+      const value = workspace.relative(file.path);
+      const desc = file.desc ?? "";
       options.push({
         label: (
           <div>
             {Path.basename(value)}
             <span> </span>
-            <span style={{ color: "gray", fontSize: "12px" }}>{Path.dirname(value)}</span>
+            <span style={{ color: "gray", fontSize: "12px" }}>
+              {Path.dirname(value)} {desc}
+            </span>
           </div>
         ),
-        value: value,
+        value: `${value.toLocaleLowerCase()} ${desc.toLocaleLowerCase()}`,
-        path: path,
+        path: file.path,
       });
     });
+    options.sort((a, b) => a.path.localeCompare(b.path));
     return options;
   }, [workspace.allFiles, workspace.fileTree]);
   return (
@@ -101,7 +106,9 @@ export const TitleBar: FC<LayoutProps> = () => {
                 workspace.open(option.path);
               }
             }}
-            filterOption={(input, option) => (option?.value ?? "").includes(input)}
+            filterOption={(input, option) =>
+              (option?.value ?? "").includes(input.toLocaleLowerCase())
+            }
             filterSort={(optionA, optionB) =>
               (optionA?.value ?? "")
                 .toLowerCase()

src/contexts/workspace-context.ts

@@ -2,7 +2,7 @@ import { NodeDef, NodeModel, TreeGraphData, TreeModel, unknownNodeDef } from "@/
 import * as b3util from "@/misc/b3util";
 import { message } from "@/misc/hooks";
 import i18n from "@/misc/i18n";
-import { readJson } from "@/misc/util";
+import { readJson, writeJson } from "@/misc/util";
 import Path from "@/misc/path";
 import { Matrix, TreeGraph } from "@antv/g6";
 import { BrowserWindow, dialog } from "@electron/remote";
@@ -61,9 +61,9 @@ export class EditorStore {
   constructor(path: string) {
     this.path = path;
 
-    const file = readJson(path);
+    const file = readJson(path) as TreeModel;
     this.data = b3util.createTreeData(file.root);
-    this.desc = file.desc;
+    this.desc = file.desc ?? "";
     this.name = file.name || path.slice(0, -5);
     this.autoId = b3util.refreshTreeDataId(this.data);
     this.historyStack.push(b3util.createNode(this.data));
@@ -95,6 +95,16 @@ export type EditTree = {
   data: TreeModel;
 };
 
+export type FileMeta = {
+  path: string;
+  desc?: string;
+  exists?: boolean;
+};
+
+interface WorkspaceModel {
+  files?: { path: string; desc: string }[];
+}
+
 export type WorkspaceStore = {
   init: (project: string) => void;
   createProject: () => void;
@@ -105,7 +115,11 @@ export type WorkspaceStore = {
   workdir: string;
   path: string;
 
-  allFiles: string[];
+  loadWorkspace: () => void;
+  saveWorkspace: () => void;
+  updateFileMeta: (editor: EditorStore) => void;
+
+  allFiles: Map<string, FileMeta>;
   fileTree?: FileTreeType;
   editors: EditorStore[];
   editing?: EditorStore;
@@ -117,6 +131,7 @@ export type WorkspaceStore = {
   edit: (path: string) => void;
   close: (path: string) => void;
   find: (path: string) => EditorStore | undefined;
+  relative: (path: string) => string;
 
   save: () => void;
   saveAs: () => void;
@@ -189,7 +204,7 @@ const saveFile = (editor?: EditorStore) => {
 };
 
 export const useWorkspace = create<WorkspaceStore>((set, get) => ({
-  allFiles: [],
+  allFiles: new Map(),
   fileTree: undefined,
   editors: [],
   workdir: "",
@@ -201,6 +216,7 @@ export const useWorkspace = create<WorkspaceStore>((set, get) => ({
       try {
         workspace.workdir = Path.dirname(path).replaceAll(Path.sep, "/");
         workspace.path = path;
+        workspace.loadWorkspace();
         workspace.loadTrees();
         workspace.loadNodeDefs();
         workspace.watch();
@@ -257,8 +273,8 @@ export const useWorkspace = create<WorkspaceStore>((set, get) => ({
       }
       try {
         let hasError = false;
-        for (const path of workspace.allFiles) {
+        for (const [path] of workspace.allFiles) {
-          const buildpath = buildDir + "/" + Path.relative(workspace.workdir, path);
+          const buildpath = buildDir + "/" + workspace.relative(path);
           console.log("build:", buildpath);
           const treeModel = b3util.createBuildData(path);
           if (!b3util.checkNodeData(treeModel?.root)) {
@@ -290,8 +306,8 @@ export const useWorkspace = create<WorkspaceStore>((set, get) => ({
         console.log("run script", scriptPath);
         const str = fs.readFileSync(scriptPath, "utf8");
         const batch = eval(str) as BatchScript;
-        workspace.allFiles.forEach((path) => {
+        workspace.allFiles.forEach((file) => {
-          const treeStr = fs.readFileSync(path, "utf8");
+          const treeStr = fs.readFileSync(file.path, "utf8");
           let tree: TreeModel | undefined = JSON.parse(treeStr);
           if (batch.processTree && tree) {
             tree = batch.processTree(tree);
@@ -304,7 +320,7 @@ export const useWorkspace = create<WorkspaceStore>((set, get) => ({
             processNode(tree.root);
           }
           if (tree) {
-            fs.writeFileSync(path, JSON.stringify(tree));
+            fs.writeFileSync(file.path, JSON.stringify(tree));
           }
         });
       } catch (error) {
@@ -313,6 +329,40 @@ export const useWorkspace = create<WorkspaceStore>((set, get) => ({
     }
   },
 
+  loadWorkspace: () => {
+    const workspace = get();
+    const data = readJson(workspace.path) as WorkspaceModel;
+    data.files?.forEach((file) => {
+      workspace.allFiles.set(file.path, { path: file.path, desc: file.desc, exists: false });
+    });
+  },
+
+  saveWorkspace: () => {
+    const workspace = get();
+    const data: WorkspaceModel = {
+      files: [],
+    };
+    workspace.allFiles.forEach((file) => {
+      data.files?.push({
+        path: workspace.relative(file.path),
+        desc: file.desc ?? "",
+      });
+    });
+    data.files?.sort((a, b) => a.path.localeCompare(b.path));
+    writeJson(workspace.path, data);
+  },
+
+  updateFileMeta: (editor) => {
+    const workspace = get();
+    const path = workspace.relative(editor.path);
+    const file = workspace.allFiles.get(path);
+    if (file && file.desc !== editor.desc) {
+      file.desc = editor.desc;
+      set({ allFiles: new Map(workspace.allFiles) });
+      workspace.saveWorkspace();
+    }
+  },
+
   isShowingSearch: false,
   onShowingSearch: (isShowingSearch) => {
     set({ isShowingSearch });
@@ -326,6 +376,7 @@ export const useWorkspace = create<WorkspaceStore>((set, get) => ({
         editor = new EditorStore(path);
         workspace.editors.push(editor);
         set({ editors: workspace.editors });
+        workspace.updateFileMeta(editor);
         workspace.edit(editor.path);
       } catch (error) {
         console.error(error);
@@ -384,6 +435,11 @@ export const useWorkspace = create<WorkspaceStore>((set, get) => ({
     return workspace.editors.find((v) => v.path === path);
   },
 
+  relative: (path: string) => {
+    const workspace = get();
+    return Path.relative(workspace.workdir, path).replaceAll(Path.sep, "/");
+  },
+
   save: () => {
     const workspace = get();
     saveFile(workspace.editing);
@@ -431,15 +487,39 @@ export const useWorkspace = create<WorkspaceStore>((set, get) => ({
     };
     set({ fileTree: data });
 
-    const allFiles: string[] = [];
+    const allFiles = workspace.allFiles;
+    let updated = false;
+    allFiles.forEach((file) => (file.exists = false));
     const collect = (fileNode?: FileTreeType) => {
       if (fileNode?.isLeaf) {
-        allFiles.push(fileNode.path);
+        const path = workspace.relative(fileNode.path);
+        let fileMeta = allFiles.get(path);
+        if (!fileMeta) {
+          fileMeta = { path: fileNode.path };
+          allFiles.set(fileNode.path, fileMeta);
+        } else {
+          fileMeta.path = fileNode.path;
+        }
+        fileMeta.exists = true;
+        if (fileMeta.desc === undefined) {
+          const file = readJson(fileNode.path) as TreeModel;
+          fileMeta.desc = file.desc ?? "";
+          updated = true;
+        }
       }
       fileNode?.children?.forEach((child) => collect(child));
     };
     collect(data);
+    allFiles.forEach((file, key) => {
+      if (!file.exists) {
+        allFiles.delete(key);
+        updated = true;
+      }
+    });
     set({ allFiles });
+    if (updated) {
+      workspace.saveWorkspace();
+    }
   },
 
   loadNodeDefs: () => {

src/index.scss

@@ -86,8 +86,13 @@ body {
   cursor: pointer !important;
 }
 
-.ant-tree .ant-tree-node-content-wrapper {
+.ant-tree-node-content-wrapper {
   padding-left: 0 !important;
+  display: inline-flex;
+}
+
+.ant-tree-title {
+  display: contents;
 }
 
 .ant-tree-switcher.ant-tree-switcher-noop,
@@ -179,11 +184,11 @@ body {
 }
 
 // editor
-.b3-editor-button-filter {
+.b3-editor-filter {
   width: 20px !important;
   height: 20px !important;
 }
 
-.b3-editor-button-filter-selected {
+.b3-editor-filter-selected {
   background-color: var(--b3-color-selected) !important;
 }

src/misc/b3type.ts

@@ -12,7 +12,7 @@ export interface NodeArg {
   name: string;
   type: string;
   desc: string;
-  default?: string;
+  default?: unknown;
   options?: NodeArgOption[];
 }
 export interface NodeDef {
@@ -36,6 +36,7 @@ export interface NodeModel {
   output?: string[];
   children?: NodeModel[];
   debug?: boolean;
+  disabled?: boolean;
   path?: string;
 }
 
@@ -54,6 +55,7 @@ export interface TreeGraphData extends G6TreeGraphData {
   children?: TreeGraphData[];
   def: NodeDef;
   debug?: boolean;
+  disabled?: boolean;
   parent?: string;
   path?: string;
   lastModified?: number;

src/misc/b3util.ts

@@ -35,7 +35,8 @@ export const isNodeEqual = (node1: NodeModel, node2: NodeModel) => {
     node1.name === node2.name &&
     node1.desc === node2.desc &&
     node1.path === node2.path &&
-    node1.debug === node2.debug
+    node1.debug === node2.debug &&
+    node1.disabled === node2.disabled
   ) {
     const def = useWorkspace.getState().getNodeDef(node1.name);
 
@@ -142,6 +143,7 @@ export const checkNodeData = (data: NodeModel | null | undefined) => {
 export const copyFromNode = (data: TreeGraphData, node: NodeModel) => {
   data.name = node.name;
   data.debug = node.debug;
+  data.disabled = node.disabled;
   data.desc = node.desc;
   data.path = node.path;
   data.args = node.args;
@@ -158,6 +160,7 @@ export const createNode = (data: TreeGraphData, includeChildren: boolean = true)
     desc: data.desc,
     path: data.path,
     debug: data.debug,
+    disabled: data.disabled,
   };
   if (data.input) {
     node.input = [];
@@ -280,6 +283,7 @@ export const createTreeData = (node: NodeModel, parent?: string) => {
     input: node.input,
     output: node.output,
     debug: node.debug,
+    disabled: node.disabled,
     def: workspace.getNodeDef(node.name),
     parent: parent,
   };
@@ -310,6 +314,7 @@ export const createTreeData = (node: NodeModel, parent?: string) => {
       treeData.lastModified = fs.statSync(subtreePath).mtimeMs;
       treeData.path = node.path;
       treeData.debug = node.debug;
+      treeData.disabled = node.disabled;
       treeData.parent = parent;
       treeData.id = node.id.toFixed();
       treeData.size = calcTreeDataSize(treeData);
@@ -346,6 +351,7 @@ export const createFileData = (data: TreeGraphData, includeSubtree?: boolean) =>
     input: data.input || undefined,
     output: data.output || undefined,
     debug: data.debug || undefined,
+    disabled: data.disabled || undefined,
     path: data.path || undefined,
   };
   if (data.children?.length && (includeSubtree || !isSubtreeRoot(data))) {