add BehaviorTree

render-process/Editor/BehaviorTree.tsx

@@ -0,0 +1,33 @@
+import * as React from 'react';
+import GGEditor, { Mind, RegisterNode } from 'gg-editor';
+import { MindData } from 'gg-editor/lib/common/interfaces';
+const data: MindData = {
+  id: "1",
+  label: 'Central Topic111',
+  children: [
+    {
+      id: "2",
+      label: 'Main Topic 1',
+    },
+    {
+      id: "3",
+      label: 'Main Topic 2',
+    },
+    {
+      id: "4",
+      label: 'Main Topic 3',
+    },
+  ],
+};
+
+export default class BehaviorTree extends React.Component {
+  render() {
+    return (
+      <Mind
+        style={{ width: "70vw", height: "100vh" }}
+        graphConfig= {{fitView: true, maxZoom:2, fitViewPadding:[20, 20, 20, 20]}}
+        data={data}
+      />
+    );
+  }
+}

render-process/Editor/Editor.css

@@ -5,19 +5,20 @@
 }
 
 .editorBd {
+  width: 100%;
   height : 100%;
   display: flex;
-  background: #fafafa;
+
 }
 
-.editorSidebar,
 .editorContent {
-  min-width: 500px;
+  /* min-width: 500px; */
   height   : 100%;
 }
 
 .editorSidebar {
-  background: #fafafa;
+  /* min-width: 500px; */
+  height   : 100%;
   overflow-y: auto;
 }
 

render-process/Editor/NodePanel.tsx

@@ -13,16 +13,38 @@ interface NodePanelState {
 
 }
 
-class NodePanel extends React.Component<NodePanelProps, NodePanelState> {
+class Panel extends React.Component<NodePanelProps, NodePanelState> {
   render() {
     const { nodes } = this.props;
+    console.log("NodePanel render", nodes);
     const node = nodes[0];
-    return (
-      <Card>
-        {node ? node.getModel().label : ''}
-      </Card>
-    )
+    if (node) {
+      return (
+        <Card title="节点信息">
+          {node ? node.getModel().label : ''}
+        </Card>
+      )
+    } else {
+      return (
+        <Card title="节点信息">
+          未选中
+        </Card>
+      )
+    }
+
   }
 }
 
-export default DetailPanel.create<NodePanelProps>('node')(withEditorContext(NodePanel));
+export default class NodePanel extends React.Component {
+  render() {
+    console.log("NodePanel render");
+    return (
+      <Card title="节点信息" style = {{height:"100%"}}>
+        未选中fefqwefqwefwewef
+      </Card>
+    )
+  }
+
+}
+
+// export default DetailPanel.create<NodePanelProps>('node')(withEditorContext(Panel));

render-process/Editor/index.tsx

@@ -4,6 +4,7 @@ import { MindData } from 'gg-editor/lib/common/interfaces';
 import { Row, Col } from 'antd';
 import './Editor.css';
 import NodePanel from './NodePanel';
+import BehaviorTree from './BehaviorTree';
 
 export interface EditorProps {
 
@@ -15,8 +16,7 @@ export default class Editor extends React.Component<EditorProps> {
       <GGEditor className="editor">
         <Row className="editorBd">
           <Col span={18} className="editorContent">
-            hello
-            {/* <BehaviorTree /> */}
+            <BehaviorTree />
           </Col>
           <Col span={6} className="editorSidebar">
             <NodePanel />