add TreePanel

render-process/Editor/NodePanel.tsx

@@ -10,7 +10,7 @@ interface NodePanelState {
 
 }
 
-export default class Panel extends React.Component<NodePanelProps> {
+export default class NodePanel extends React.Component<NodePanelProps> {
   componentDidMount() {
   }
 

render-process/Editor/TreePanel.tsx

@@ -0,0 +1,33 @@
+import React from 'react';
+import { Card } from 'antd';
+import { INode } from '@antv/g6/lib/interface/item';
+import { BehaviorTreeModel } from '../../common/BehaviorTreeModel';
+
+interface TreePanelProps {
+  model?: BehaviorTreeModel;
+}
+
+interface TreePanelState {
+}
+
+export default class TreePanel extends React.Component<TreePanelProps, TreePanelState> {
+  state: TreePanelState = {};
+
+  componentDidMount() {
+  }
+
+  render() {
+    const { model } = this.props;
+    if(!model) {
+      return (<div/>)
+    }
+    return (
+      <Card title="概况" style={{ height: "100%" }}>
+        行为树:{model.name}
+
+      </Card>
+    )
+  }
+
+}
+

render-process/Editor/index.tsx

@@ -9,20 +9,20 @@ import { G6GraphEvent } from '@antv/g6/lib/interface/behavior';
 import './Editor.css';
 import * as Utils from '../../common/Utils';
 import { BehaviorTreeModel, GraphNodeModel } from '../../common/BehaviorTreeModel';
+import TreePanel from './TreePanel';
 
 export interface EditorProps {
   filepath: string;
 }
 
 interface EditorState {
-  curNodeId: string | null;
+  curNodeId?: string;
+  treeModel?: BehaviorTreeModel;
 }
 
 export default class Editor extends React.Component<EditorProps, EditorState> {
   private ref: React.RefObject<any>;
-  state: EditorState = {
+  state: EditorState = {}
-    curNodeId: null
-  }
 
   private graph: TreeGraph;
   private dragSrcId: string;
@@ -33,9 +33,9 @@ export default class Editor extends React.Component<EditorProps, EditorState> {
     this.ref = React.createRef();
   }
 
-  shouldComponentUpdate() {
+  // shouldComponentUpdate(nextProps: EditorProps, nextState: EditorState) {
-    return !this.graph;
+  //   return !this.graph || this.state.curNodeId != nextState.curNodeId;
-  }
+  // }
 
   componentDidMount() {
     const graph = new TreeGraph({
@@ -260,6 +260,8 @@ export default class Editor extends React.Component<EditorProps, EditorState> {
     graph.fitCenter();
 
     this.graph = graph;
+
+    this.setState({treeModel: tree});
   }
 
   onSelectNode(curNodeId: string | null) {
@@ -276,9 +278,17 @@ export default class Editor extends React.Component<EditorProps, EditorState> {
     }
   }
 
+  createNode(name: string) {
+
+  }
+
   render() {
     console.log("render editor")
-    const { curNodeId: curNode } = this.state;
+    const { curNodeId, treeModel } = this.state;
+    var curNode;
+    if (curNodeId) {
+      curNode = this.graph.findDataById(curNodeId);
+    }
     return (
       <div className="editor">
         <Row className="editorBd">
@@ -288,8 +298,7 @@ export default class Editor extends React.Component<EditorProps, EditorState> {
             ref={this.ref}
           />
           <Col span={6} className="editorSidebar">
-            <NodePanel
+            {curNode ? <NodePanel /> : <TreePanel model={treeModel}/>}
-            />
           </Col>
         </Row>
       </div>