container use ref

render-process/Editor/index.tsx

@@ -2,10 +2,91 @@ import * as React from 'react';
 import { Row, Col } from 'antd';
 import NodePanel from './NodePanel';
 import { INode } from '@antv/g6/lib/interface/item';
-
-import './Editor.css';
 import { TreeGraph } from '@antv/g6';
-import { TreeGraphData } from '@antv/g6/lib/types';
+import { TreeGraphData, IG6GraphEvent } from '@antv/g6/lib/types';
+import { G6GraphEvent } from '@antv/g6/lib/interface/behavior';
+import './Editor.css';
+
+
+export interface EditorProps {
+  filepath: string;
+}
+
+interface EditorState {
+  curNode: INode | null;
+}
+
+export default class Editor extends React.Component<EditorProps, EditorState> {
+  private ref: React.RefObject<any>;
+  state: EditorState = {
+    curNode: null
+  }
+
+  graph: TreeGraph;
+
+  constructor(props: EditorProps) {
+    super(props);
+    this.ref = React.createRef();
+  }
+
+  componentDidMount() {
+    const graph = new TreeGraph({
+      container: this.ref.current,
+      width: window.screen.width * 0.66,
+      height: window.screen.height,
+      fitView: true,
+      fitViewPadding: [20, 20, 20, 20],
+      modes: {
+        default: [
+          'drag-canvas',
+          'click-select',
+          {
+            type: 'collapse-expand',
+            trigger: 'dblclick',
+            onChange: (item, collapsed) => {
+              const data = item.get('model').data;
+              data.collapsed = collapsed;
+              return true;
+            },
+          },
+        ]
+      },
+      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('nodeselectchange', (e: G6GraphEvent) => {
+      // 当前操作的 item
+      const curNode = e.target as INode;
+      this.setState({ curNode })
+    });
+
+    graph.on('dragenter', (ev: any) => {
+      console.log("dragenter", ev);
+    });
 
     const data: TreeGraphData = {
       id: 'root',
@@ -37,88 +118,6 @@ const data: TreeGraphData = {
         }
       ]
     };
-
-export interface EditorProps {
-  filepath: string;
-}
-
-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() {
-    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;
@@ -130,9 +129,9 @@ export default class Editor extends React.Component<EditorProps, EditorState> {
       <div className="editor">
         <Row className="editorBd">
           <Col
-            id={this.containerId}
             span={18}
             className="editorContent"
+            ref={this.ref}
           />
           <Col span={6} className="editorSidebar">
             <NodePanel