remove gg-editor

render-process/Editor/index.tsx

@@ -1,11 +1,42 @@
 import * as React from 'react';
-import GGEditor, { Mind, RegisterNode, withEditorContext } from 'gg-editor';
 import { Row, Col } from 'antd';
 import NodePanel from './NodePanel';
-import BehaviorTree from './BehaviorTree';
 import { INode } from '@antv/g6/lib/interface/item';
 
 import './Editor.css';
+import { TreeGraph } from '@antv/g6';
+import { TreeGraphData } from '@antv/g6/lib/types';
+
+const data: TreeGraphData = {
+  id: 'root',
+  label: 'Root',
+  children: [
+    {
+      id: 'SubTreeNode1',
+      label: 'subroot1',
+      children: [
+        {
+          id: 'SubTreeNode1.1',
+          label: 'subroot1.1',
+        }
+      ]
+    },
+    {
+      id: 'SubTreeNode2',
+      label: 'subroot2',
+      children: [
+        {
+          id: 'SubTreeNode2.1',
+          label: 'subroot2.1',
+        },
+        {
+          id: 'SubTreeNode2.2',
+          label: 'subroot2.2',
+        }
+      ]
+    }
+  ]
+};
 
 export interface EditorProps {
   filepath: string;
@@ -15,38 +46,101 @@ interface EditorState {
   curNode: INode | null;
 }
 
+var uniqueId = 0;
+const genContainerId = () => {
+  return "graph_" + (uniqueId++);
+}
+
 export default class Editor extends React.Component<EditorProps, EditorState> {
+  private containerId: string;
   state: EditorState = {
     curNode: null
   }
-  
+
+  graph: TreeGraph;
+
+  constructor(props: EditorProps) {
+    super(props);
+
+    this.containerId = genContainerId();
+  }
+
   componentWillMount() {
 
   }
   componentDidMount() {
-    console.log("props", this.props);
+    const graph = new TreeGraph({
+      container: this.containerId,
+      width: 800,
+      height: 600,
+      fitView: true,
+      modes: {
+        default: ['drag-canvas']
+      },
+      defaultEdge: {
+        shape: 'cubic-horizontal',
+        style: {
+          stroke: '#A3B1BF'
+        }
+      },
+      defaultNode: {
+        shape: 'rect',
+        labelCfg: {
+          style: {
+            fill: '#000000A6',
+            fontSize: 10
+          }
+        },
+        style: {
+          stroke: '#72CC4A',
+          width: 150
+        }
+      },
+      layout: {
+        type: 'dendrogram', // 布局类型
+        direction: 'LR',    // 自左至右布局，可选的有 H / V / LR / RL / TB / BT
+        nodeSep: 50,        // 节点之间间距
+        rankSep: 200        // 每个层级之间的间距
+      }
+    });
+
+    graph.on('click', (ev: any) => {
+      const item = ev.item;
+      if (!item) {
+      } else if (item.getType() == "node") {
+      }
+    });
+
+    graph.on('dblclick', (ev: any) => {
+      const item = ev.item;
+    });
+
+    graph.on('dragenter', (ev: any) => {
+      console.log("dragenter", ev);
+    });
+
+    graph.data(data);
+    graph.render();
+    this.graph = graph;
   }
 
   render() {
     const { curNode } = this.state;
     return (
-      <GGEditor className="editor">
+      <div className="editor">
         <Row className="editorBd">
-          <Col span={18} className="editorContent">
-            <BehaviorTree
-              onSelectNode={(node) => {
-                console.log("onSelectNode", node);
-                this.setState({ curNode: node });
-              }}
-            />
-          </Col>
+          <Col
+            id={this.containerId}
+            span={18}
+            className="editorContent"
+          />
           <Col span={6} className="editorSidebar">
             <NodePanel
               curNode={curNode}
             />
           </Col>
         </Row>
-      </GGEditor>
+      </div>
     );
   }
 }