diff --git a/render-process/Editor/index.tsx b/render-process/Editor/index.tsx index 4dd6735..75061ae 100644 --- a/render-process/Editor/index.tsx +++ b/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 { - private containerId: string; + private ref: React.RefObject; state: EditorState = { curNode: null } @@ -61,21 +26,30 @@ export default class Editor extends React.Component { constructor(props: EditorProps) { super(props); - - this.containerId = genContainerId(); + this.ref = React.createRef(); } - componentWillMount() { - - } componentDidMount() { const graph = new TreeGraph({ - container: this.containerId, - width: 800, - height: 600, + 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'] + 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 { } }); - 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('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', + 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 {