NodePanel update input & output

common/BehaviorTreeModel.ts

@@ -38,6 +38,7 @@ export interface GraphNodeModel extends TreeGraphData {
   input?: string[];
   output?: string[];
   children?: GraphNodeModel[];
+  conf: BehaviorNodeTypeModel;
 
   size?: number[];
 }

common/Utils.ts

@@ -7,6 +7,7 @@ export const cloneNodeData = (nodeData: GraphNodeModel) => {
   const newData: GraphNodeModel = {
     id: nodeData.id + "new",
     name: nodeData.name,
+    conf: nodeData.conf,
   }
   return newData;
 }
@@ -31,13 +32,13 @@ export const calcTreeNodeSize = (treeNode: GraphNodeModel) => {
       height += 25;
     }
   }
-  updateHeight(treeNode.args);
-  updateHeight(treeNode.input);
-  updateHeight(treeNode.output);
+  updateHeight(treeNode.conf.args);
+  updateHeight(treeNode.conf.input);
+  updateHeight(treeNode.conf.output);
   return [200, height];
 }
 
-export const createTreeData = (bNode: BehaviorNodeModel) => {
+export const createTreeData = (bNode: BehaviorNodeModel, settings: Settings) => {
   const treeData: GraphNodeModel = {
     id: bNode.id.toString(),
     name: bNode.name,
@@ -45,12 +46,13 @@ export const createTreeData = (bNode: BehaviorNodeModel) => {
     args: bNode.args,
     input: bNode.input,
     output: bNode.output,
+    conf: settings.getNodeConf(bNode.name),
   }
   treeData.size = calcTreeNodeSize(treeData);
   if (bNode.children) {
     treeData.children = [];
     bNode.children.forEach(child => {
-      treeData.children.push(createTreeData(child));
+      treeData.children.push(createTreeData(child, settings));
     })
   }
   calcTreeNodeSize(treeData);

render-process/Editor/NodePanel.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Card, Divider, Form, Input, AutoComplete, Select, Switch, InputNumber, notification } from 'antd';
+import { Card, Divider, Form, Input, AutoComplete, Select, Switch, InputNumber, notification, message } from 'antd';
 import { INode } from '@antv/g6/lib/interface/item';
 import { BehaviorNodeModel, BehaviorNodeTypeModel, ArgsDefType } from '../../common/BehaviorTreeModel';
 import Settings from '../../main-process/Settings';
@@ -55,14 +55,64 @@ export default class NodePanel extends React.Component<NodePanelProps> {
   onFinish = (values: any) => {
     console.log('Success:', values);
     const { updateNode, model, settings } = this.props;
-    if(!settings.getNodeConf(values.name)) {
-      notification.warn({message:`节点${values.name}未定义`});
+    const conf = settings.getNodeConf(values.name)
+    if (!conf) {
+      notification.warn({ message: `节点${values.name}未定义` });
       return;
     }
+    var forceUpdate = false;
+    if (model.name != values.name) {
       model.name = values.name;
+      forceUpdate = true;
+    }
     model.desc = values.desc;
+
+    var args: any = {};
+    if (values.customArgs) {
+      try {
+        args = JSON.parse(values.customArgs);
+      } catch (e) {
+        message.warn(`您输入的自定义参数不符合json格式${values.customArgs}`);
+        return;
+      }
+    }
+
+    if (conf.args) {
+      conf.args.forEach(e => {
+        const k = 'args.' + e.name;
+        if (e.type.indexOf('number') > 0) {
+          args[e.name] = Number(values[k]);
+        } else {
+          args[e.name] = values[k];
+        }
+      })
+    }
+
+    model.args = args;
+    this.formRef.current.setFieldsValue({ customArgs: model.args ? JSON.stringify(model.args, null, " ") : '' });
+
+    if (conf.input) {
+      model.input = [];
+      conf.input.forEach((e, i) => {
+        model.input.push(values['input.' + i] || '');
+      })
+    } else {
+      model.input = null;
+    }
+
+    if (conf.output) {
+      model.output = [];
+      conf.output.forEach((e, i) => {
+        model.output.push(values['output.' + i] || '');
+      })
+    } else {
+      model.output = null;
+    }
+
     updateNode(model.id.toString());
+    if (forceUpdate) {
       this.forceUpdate();
+    }
   };
 
   onFinishFailed = (errorInfo: any) => {

render-process/Editor/index.tsx

@@ -246,9 +246,11 @@ export default class Editor extends React.Component<EditorProps, EditorState> {
       graph.set('animate', true);
     });
 
+    const settings = Utils.getRemoteSettings();
+
     const str = fs.readFileSync(this.props.filepath, 'utf8');
     let tree: BehaviorTreeModel = JSON.parse(str);
-    const data = Utils.createTreeData(tree.root);
+    const data = Utils.createTreeData(tree.root, settings);
     graph.data(data);
     graph.render();
     graph.fitCenter();
@@ -256,8 +258,6 @@ export default class Editor extends React.Component<EditorProps, EditorState> {
 
     this.graph = graph;
 
-    const settings = Utils.getRemoteSettings();
-
     this.setState({ treeModel: tree, settings });
   }