add g6

package.json

@@ -33,6 +33,7 @@
     "antd": "^4.6.6",
     "electron": "^10.1.3",
     "electron-packager": "^15.1.0",
+    "g6": "^0.2.0",
     "gg-editor": "^3.1.3",
     "react": "^16.13.1",
     "react-dom": "^16.13.1"

render-process/Editor/BehaviorTree.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import GGEditor, { Mind, RegisterNode, setAnchorPointsState } from 'gg-editor';
-import { MindData } from 'gg-editor/lib/common/interfaces';
+import { INode } from '@antv/g6/lib/interface/item';
+import { MindData, Graph, GraphEvent } from 'gg-editor/lib/common/interfaces';
 const data: MindData = {
   id: "1",
   label: 'Central Topic111',
@@ -20,42 +21,52 @@ const data: MindData = {
   ],
 };
 
-interface BehaviorTreeProps{
+interface BehaviorTreeProps {
-
+  onSelectNode: (node: INode | null) => void;
 }
 
-class BehaviorTree extends React.Component <BehaviorTreeProps> {
+class BehaviorTree extends React.Component<BehaviorTreeProps> {
+  graph: Graph;
   componentDidMount() {
-    // const { graph } = this.props;
+  }
-    // graph.on('click', (ev: any) => {
-    //   console.log("click", ev);
-    // });
 
-    // graph.on('dbclick', (ev: any) => {
+  initGraph(graph: Graph) {
-    //   console.log("dbclick", ev);
+    const { onSelectNode } = this.props;
-    // });
+    graph.on('click', (ev: GraphEvent) => {
+      console.log("click", ev);
+      if (!ev.item) {
+        onSelectNode(null);
+      } else if (ev.item) {
+        onSelectNode(ev.item);
+      }
+    });
 
-    // graph.on('dragenter', (ev: any) => {
+    graph.on('dbclick', (ev: GraphEvent) => {
-    //   console.log("dragenter", ev);
+      console.log("dbclick", ev);
-    // });
+    });
+
+    graph.on('dragenter', (ev: GraphEvent) => {
+      console.log("dragenter", ev);
+    });
+    this.graph = graph;
   }
 
   render() {
     return (
-        <Mind
+      <Mind
-          style={{ width: "70vw", height: "100vh" }}
+        style={{ width: "70vw", height: "100vh" }}
-          graphConfig={{
+        graphConfig={{
-            fitView: true,
+          fitView: true,
-            maxZoom: 2,
+          maxZoom: 2,
-            fitViewPadding: [20, 20, 20, 20]
+          fitViewPadding: [20, 20, 20, 20]
-          }}
+        }}
-          data={data}
+        data={data}
-          ref={component => {
+        ref={component => {
-            if (component) {
+          if (component) {
-              console.log('graph:', component.graph);
+            this.initGraph(component.graph);
-            }
+          }
-          }}
+        }}
-        />
+      />
     );
   }
 }

render-process/Editor/index.tsx

@@ -7,10 +7,13 @@ import BehaviorTree from './BehaviorTree';
 import './Editor.css';
 
 export interface EditorProps {
-
+  filepath: string;
 }
 
 export default class Editor extends React.Component<EditorProps> {
+  componentWillMount() {
+
+  }
   componentDidMount() {
     console.log("props", this.props);
   }
@@ -20,7 +23,11 @@ export default class Editor extends React.Component<EditorProps> {
       <GGEditor className="editor">
         <Row className="editorBd">
           <Col span={18} className="editorContent">
-            <BehaviorTree />
+            <BehaviorTree 
+              onSelectNode={(node) => {
+                console.log("onSelectNode", node)
+              }}
+            />
           </Col>
           <Col span={6} className="editorSidebar">
             <NodePanel />

render-process/index.tsx

@@ -114,7 +114,7 @@ export default class Main extends Component {
           />
         </Sider>
         <Content className="content">
-          {/* <Tabs
+          <Tabs
             hideAdd
             className="tabs"
             type="editable-card"
@@ -123,13 +123,12 @@ export default class Main extends Component {
               filepaths.map(filepath => {
                 return (
                   <TabPane tab={path.basename(filepath)} key={filepath}>
-                    <Editor/>
+                    <Editor filepath={filepath} />
                   </TabPane>
                 );
               })
             }
-          </Tabs> */}
+          </Tabs>
-          <Editor />
         </Content>
       </Layout>
     )