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.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/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,
-  "nodeConfPath": "node-config.json",
-  "workdir": "workdir"
+  "files": [
+    {
+      "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",
-                        filterOption.filterCase && "b3-editor-button-filter-selected"
+                        "b3-editor-filter",
+                        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",
-                      filterOption.filterFocus && "b3-editor-button-filter-selected"
+                      "b3-editor-filter",
+                      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) => {
-      const value = Path.relative(workspace.fileTree!.path, path).replaceAll(Path.sep, "/");
+    workspace.allFiles.forEach((file) => {
+      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" && (
-                      <Input onBlur={form.submit} placeholder={t("node.codePlaceholder")} />
-                    )}
+                    {type === "code" && <Input disabled={disabled} onBlur={form.submit} />}
                     {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)",
-  ["Decorator"]: "rgb(218,167,16)",
-  ["Condition"]: "rgb(228,20,139)",
-  ["Action"]: "rgb(91,143,249)",
-  ["Other"]: "rgb(112,112,112)",
-  ["Error"]: "rgb(255,0,0)",
+  ["Composite"]: "#5aed20",
+  ["Decorator"]: "#faad14",
+  ["Condition"]: "#e4148b",
+  ["Action"]: "#5b90f9",
+  ["Other"]: "#707070",
+  ["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",
         });
       }