container use ref

render-process/Editor/index.tsx

@@ -2,41 +2,11 @@ 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';
 
-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;
@@ -46,13 +16,8 @@ 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;
+  private ref: React.RefObject<any>;
   state: EditorState = {
     curNode: null
   }
@@ -61,21 +26,30 @@ export default class Editor extends React.Component<EditorProps, EditorState> {
 
   constructor(props: EditorProps) {
     super(props);
-
+    this.ref = React.createRef();
-    this.containerId = genContainerId();
   }
 
-  componentWillMount() {
-
-  }
   componentDidMount() {
     const graph = new TreeGraph({
-      container: this.containerId,
+      container: this.ref.current,
-      width: 800,
+      width: window.screen.width * 0.66,
-      height: 600,
+      height: window.screen.height,
       fitView: true,
+      fitViewPadding: [20, 20, 20, 20],
       modes: {
-        default: ['drag-canvas']
+        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',
@@ -104,21 +78,46 @@ export default class Editor extends React.Component<EditorProps, EditorState> {
       }
     });
 
-    graph.on('click', (ev: any) => {
+    graph.on('nodeselectchange', (e: G6GraphEvent) => {
-      const item = ev.item;
+      // 当前操作的 item
-      if (!item) {
+      const curNode = e.target as INode;
-      } else if (item.getType() == "node") {
+      this.setState({ curNode })
-      }
-    });
-
-    graph.on('dblclick', (ev: any) => {
-      const item = ev.item;
     });
 
     graph.on('dragenter', (ev: any) => {
       console.log("dragenter", ev);
     });
 
+    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',
+            }
+          ]
+        }
+      ]
+    };
     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