change NodePanel

render-process/Editor/NodePanel.tsx

@@ -1,9 +1,15 @@
 import React from 'react';
-import { Card } from 'antd';
+import { Card, Divider, Form, Input, AutoComplete, Select } from 'antd';
 import { INode } from '@antv/g6/lib/interface/item';
+import { BehaviorNodeModel } from '../../common/BehaviorTreeModel';
+import Settings from '../../main-process/Settings';
+import { FormInstance } from 'antd/lib/form';
+
+const { Item } = Form;
 
 interface NodePanelProps {
-  
+  model: BehaviorNodeModel;
+  settings: Settings;
 }
 
 interface NodePanelState {
@@ -11,22 +17,67 @@ interface NodePanelState {
 }
 
 export default class NodePanel extends React.Component<NodePanelProps> {
-  componentDidMount() {
+  formRef = React.createRef<FormInstance>();
+
+  componentDidUpdate() {
+    const { model, settings } = this.props;
+    this.formRef.current.setFieldsValue({
+      name: model.name,
+    });
   }
 
-  renderNode() {
+  onFinish = (values: any) => {
-    return (
+    console.log('Success:', values);
-      <div>
+  };
-        {}
+
-      </div>
+  onFinishFailed = (errorInfo: any) => {
-    )
+    console.log('Failed:', errorInfo);
-  }
+  };
 
   render() {
-    // const { curNode } = this.props;
+    const { model, settings } = this.props;
+    const conf = settings.getNodeConf(model.name);
+    console.log("model", model, conf);
+    const title = conf.desc;
+
+    const names: string[] = [];
+    settings.nodeConfig.map((e) => {
+      names.push(e.name);
+    })
+
+    const name = model.name;
+
+    const layout = {
+      labelCol: { span: 4 },
+      wrapperCol: { span: 20 },
+    };
     return (
-      <Card title="节点信息" style={{ height: "100%" }}>
+      <Card title={title} style={{ height: "100%" }}>
-        {/* {curNode ? this.renderNode() : "未选中"} */}
+        <Form
+          {...layout}
+          name="basic"
+          onFinish={this.onFinish}
+          ref={this.formRef}
+        >
+          <Item
+            label="节点id"
+          >
+            <Input value={model.id} disabled={true} />
+          </Item>
+          <Item
+            label="节点名称"
+            name="name"
+          >
+            <AutoComplete
+              dataSource={names}
+              filterOption={(inputValue, option: any) =>
+                option.props.children.toUpperCase().indexOf(inputValue.toUpperCase()) !== -1
+              }
+              onChange={this.onFinish}
+              defaultValue={name}
+            />
+          </Item>
+        </Form>
       </Card>
     )
   }

render-process/Editor/index.tsx

@@ -8,8 +8,9 @@ import { TreeGraphData, IG6GraphEvent } from '@antv/g6/lib/types';
 import { G6GraphEvent } from '@antv/g6/lib/interface/behavior';
 import './Editor.css';
 import * as Utils from '../../common/Utils';
-import { BehaviorTreeModel, GraphNodeModel } from '../../common/BehaviorTreeModel';
+import { BehaviorTreeModel, GraphNodeModel, BehaviorNodeModel } from '../../common/BehaviorTreeModel';
 import TreePanel from './TreePanel';
+import Settings from '../../main-process/Settings';
 
 export interface EditorProps {
   filepath: string;
@@ -18,11 +19,12 @@ export interface EditorProps {
 interface EditorState {
   curNodeId?: string;
   treeModel?: BehaviorTreeModel;
+  settings?: Settings;
 }
 
 export default class Editor extends React.Component<EditorProps, EditorState> {
   private ref: React.RefObject<any>;
-  state: EditorState = {}
+  state: EditorState = {};
 
   private graph: TreeGraph;
   private dragSrcId: string;
@@ -33,10 +35,6 @@ export default class Editor extends React.Component<EditorProps, EditorState> {
     this.ref = React.createRef();
   }
 
-  // shouldComponentUpdate(nextProps: EditorProps, nextState: EditorState) {
-  //   return !this.graph || this.state.curNodeId != nextState.curNodeId;
-  // }
-
   componentDidMount() {
     const graph = new TreeGraph({
       container: this.ref.current,
@@ -258,7 +256,9 @@ export default class Editor extends React.Component<EditorProps, EditorState> {
 
     this.graph = graph;
 
-    this.setState({ treeModel: tree });
+    const settings = Utils.getRemoteSettings();
+
+    this.setState({ treeModel: tree, settings });
   }
 
   onSelectNode(curNodeId: string | null) {
@@ -281,8 +281,8 @@ export default class Editor extends React.Component<EditorProps, EditorState> {
 
   render() {
     console.log("render editor")
-    const { curNodeId, treeModel } = this.state;
+    const { curNodeId, treeModel, settings } = this.state;
-    var curNode;
+    var curNode: any;
     if (curNodeId) {
       curNode = this.graph.findDataById(curNodeId);
     }
@@ -295,7 +295,7 @@ export default class Editor extends React.Component<EditorProps, EditorState> {
             ref={this.ref}
           />
           <Col span={6} className="editorSidebar">
-            {curNode ? <NodePanel /> : <TreePanel model={treeModel} />}
+            {curNode ? <NodePanel model={curNode} settings={settings} /> : <TreePanel model={treeModel} />}
           </Col>
         </Row>
       </div>