remove gg-editor

package.json

@@ -28,13 +28,12 @@
     "webpack-cli": "^3.3.12"
   },
   "dependencies": {
+    "@antv/g6": "^3.8.1",
     "@types/react": "^16.9.51",
     "@types/react-dom": "^16.9.8",
     "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,88 +0,0 @@
-import * as React from 'react';
-import GGEditor, { Mind, RegisterNode, constants, CommandManager } from 'gg-editor';
-import { INode } from '@antv/g6/lib/interface/item';
-import { MindData, Graph, GraphEvent } from 'gg-editor/lib/common/interfaces';
-
-const { EditorCommand } = constants
-
-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',
-    },
-  ],
-};
-
-interface BehaviorTreeProps {
-  onSelectNode: (node: INode | null) => void;
-}
-
-class BehaviorTree extends React.Component<BehaviorTreeProps> {
-  graph: Graph;
-  mind: Mind;
-  componentDidMount() {
-  }
-
-  initGraph(graph: Graph) {
-    const { onSelectNode } = this.props;
-    graph.on('click', (ev: GraphEvent) => {
-      const item = ev.item;
-      if (!item) {
-        onSelectNode(null);
-      } else if (item.getType() == "node") {
-        onSelectNode(item as INode);
-      }
-    });
-
-    graph.on('dblclick', (ev: GraphEvent) => {
-      console.log("dblclick", ev);
-      const item = ev.item;
-      if (item && item.getType() == 'node') {
-        const commandManager: CommandManager = graph.get('commandManager');
-        if (commandManager.canExecute(graph, EditorCommand.Fold)) {
-          commandManager.execute(graph, EditorCommand.Fold);
-        } else {
-          commandManager.execute(graph, EditorCommand.Unfold);
-        }
-      }
-    });
-
-    graph.on('dragenter', (ev: GraphEvent) => {
-      console.log("dragenter", ev);
-    });
-    this.graph = graph;
-  }
-
-  render() {
-    return (
-      <Mind
-        style={{ width: "70vw", height: "100vh" }}
-        graphConfig={{
-          fitView: true,
-          maxZoom: 2,
-          fitViewPadding: [20, 20, 20, 20]
-        }}
-        data={data}
-        ref={component => {
-          if (component && !this.graph) {
-            this.initGraph(component.graph);
-            this.mind = component;
-          }
-        }}
-      />
-    );
-  }
-}
-
-export default BehaviorTree;

render-process/Editor/NodePanel.tsx

@@ -1,10 +1,8 @@
 import React from 'react';
 import { Card } from 'antd';
-import { DetailPanel, withEditorContext } from 'gg-editor';
-import { EditorContextProps } from 'gg-editor/lib/components/EditorContext';
 import { INode } from '@antv/g6/lib/interface/item';
 
-interface NodePanelProps extends EditorContextProps {
+interface NodePanelProps {
   curNode: INode | null;
 }
 
@@ -12,7 +10,7 @@ interface NodePanelState {
 
 }
 
-class Panel extends React.Component<NodePanelProps> {
+export default class Panel extends React.Component<NodePanelProps> {
   componentDidMount() {
   }
 
@@ -36,4 +34,3 @@ class Panel extends React.Component<NodePanelProps> {
 
 }
 
-export default withEditorContext<NodePanelProps, Panel>(Panel);

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">
+          <Col
-            <BehaviorTree
+            id={this.containerId}
-              onSelectNode={(node) => {
+            span={18}
-                console.log("onSelectNode", node);
+            className="editorContent"
-                this.setState({ curNode: node });
+          />
-              }}
-            />
-          </Col>
           <Col span={6} className="editorSidebar">
             <NodePanel
               curNode={curNode}
             />
           </Col>
         </Row>
-      </GGEditor>
+      </div>
     );
   }
 }