add Tree describe v0.1.8

README.md

@@ -58,6 +58,7 @@ npm run dist # 编译exe可执行文件
 + 面板拖拽新建节点
 + 变量自动补全
 + 设置面板
++ 禁止动画选项
 
 ## About
 目前编辑器还处于非常简陋的阶段，有问题可以联系作者(QQ1013299930)，本项目将长期维护，望前端大佬们多提点~

common/BehaviorTreeModel.ts

@@ -35,6 +35,7 @@ export interface BehaviorNodeModel {
 
 export interface BehaviorTreeModel {
     name: string;
+    desc?: string;
     root: BehaviorNodeModel;
 }
 

common/Utils.ts

@@ -56,7 +56,6 @@ export const calcTreeNodeSize = (treeNode: GraphNodeModel) => {
     const updateHeight = (obj: any) => {
         if (Array.isArray(obj) || (obj && Object.keys(obj).length > 0)) {
             const { str, line } = toBreakWord(`参数:${JSON.stringify(obj)}`, 35);
-            console.log("line", str, line);
             height += 20 * line;
         }
     };

render-process/Editor/TreePanel.tsx

@@ -1,18 +1,44 @@
 import React from "react";
-import { Card } from "antd";
+import { Button, Card, Form, Input } from "antd";
-import { INode } from "@antv/g6/lib/interface/item";
 import { BehaviorTreeModel } from "../../common/BehaviorTreeModel";
+import { FormInstance } from "antd/lib/form";
+
+const { Item } = Form;
 
 interface TreePanelProps {
     model?: BehaviorTreeModel;
+    onRenameTree: (name: string) => void;
+    onRemoveTree: () => void;
+    onChangeTreeDesc: (desc: string) => void;
 }
 
-interface TreePanelState {}
+interface TreePanelState {
+}
+
+const inlineFormItemLayout = {
+    labelCol: {
+        sm: { span: 4 },
+    },
+    wrapperCol: {
+        sm: { span: 12 },
+    },
+};
 
 export default class TreePanel extends React.Component<TreePanelProps, TreePanelState> {
-    state: TreePanelState = {};
+    name: string = '';
+    desc: string = '';
+    formRef = React.createRef<FormInstance>();
 
-    componentDidMount() {}
+    componentDidMount() {
+        const { model } = this.props;
+        this.name = model.name;
+        this.desc = model.desc;
+        this.formRef.current.resetFields();
+        this.formRef.current.setFieldsValue({
+            name: model.name,
+            desc: model.desc,
+        })
+    }
 
     render() {
         const { model } = this.props;
@@ -21,8 +47,43 @@ export default class TreePanel extends React.Component<TreePanelProps, TreePanel
         }
         return (
             <Card title="概况" style={{ height: "100%" }}>
-                行为树:{model.name}
+                <Form
+                    {...inlineFormItemLayout}
+                    ref={this.formRef}
+                >
+                    <Item label="行为树" name="name">
+                        <Input disabled onBlur={this.handleSubmit} />
+                    </Item>
+                    <Item label="说明" name="desc">
+                        <Input onBlur={this.handleSubmit} />
+                    </Item>
+                    {/* <Item>
+                        <Button type='ghost' onClick={this.handleRemoveTree}>删除</Button>
+                    </Item> */}
+                </Form>
             </Card>
         );
     }
+
+    handleSubmit = () => {
+        const { model, onRenameTree, onChangeTreeDesc } = this.props;
+        const name = this.formRef.current.getFieldValue("name");
+        const desc = this.formRef.current.getFieldValue("desc");
+        if (name != this.name) {
+            console.log("change name", name);
+            this.name = name;
+            model.name = name;
+            onRenameTree(name);
+        }
+        if (desc != this.desc) {
+            console.log("change desc", desc);
+            this.desc = desc;
+            model.desc = desc;
+            onChangeTreeDesc(desc);
+        }
+    }
+
+    handleRemoveTree = () => {
+        this.props.onRemoveTree();
+    }
 }

render-process/Editor/index.tsx

@@ -341,7 +341,7 @@ export default class Editor extends React.Component<EditorProps, EditorState> {
     }
 
     save() {
-        if(!this.unsave) {
+        if (!this.unsave) {
             return;
         }
         const { filepath } = this.props;
@@ -351,7 +351,7 @@ export default class Editor extends React.Component<EditorProps, EditorState> {
         const treeModel = {
             name: path.basename(filepath).slice(0, -5),
             root,
-            desc: root.desc,
+            desc: this.treeModel.desc,
         } as BehaviorTreeModel;
         fs.writeFileSync(
             filepath,
@@ -449,6 +449,13 @@ export default class Editor extends React.Component<EditorProps, EditorState> {
         this.useStackData(data);
     }
 
+    changeTreeDesc(desc: string) {
+        this.treeModel.desc = desc;
+        this.settings.setTreeDesc(this.props.filepath, desc);
+        this.unsave = true;
+        this.save();
+    }
+
     render() {
         const { curNodeId } = this.state;
         console.log("render tree", curNodeId);
@@ -483,7 +490,18 @@ export default class Editor extends React.Component<EditorProps, EditorState> {
                                 }}
                             />
                         ) : (
-                                <TreePanel model={this.treeModel} />
+                                <TreePanel
+                                    model={this.treeModel}
+                                    onRenameTree={(name: string) => {
+
+                                    }}
+                                    onRemoveTree={() => {
+
+                                    }}
+                                    onChangeTreeDesc={(desc) => {
+                                        this.changeTreeDesc(desc);
+                                    }}
+                                />
                             )}
                     </Col>
                 </Row>