| | |
|---|
| | | import ProSkeleton from '@ant-design/pro-skeleton'; |
|---|
| | | import React, { useEffect, useState } from 'react'; |
|---|
| | | import ReactDOM from 'react-dom'; |
|---|
| | | import { data } from './data'; |
|---|
| | | import G6 from '@antv/g6'; |
|---|
| | | import "./index.css" |
|---|
| | | |
|---|
| | | export default () => ( |
|---|
| | | <div |
|---|
| | | style={{ |
|---|
| | | padding: 24, |
|---|
| | | }} |
|---|
| | | > |
|---|
| | | <ProSkeleton type="list" /> |
|---|
| | | </div> |
|---|
| | | ); |
|---|
| | | export default function() { |
|---|
| | | const ref = React.useRef(null); |
|---|
| | | let graph = null; |
|---|
| | | |
|---|
| | | useEffect(() => { |
|---|
| | | if (!graph) { |
|---|
| | | graph = new G6.Graph({ |
|---|
| | | container: ReactDOM.findDOMNode(ref.current), |
|---|
| | | width: document.documentElement.clientWidth, |
|---|
| | | height: document.documentElement.clientHeight, |
|---|
| | | modes: { |
|---|
| | | default: [ |
|---|
| | | 'drag-canvas', |
|---|
| | | 'zoom-canvas', |
|---|
| | | 'drag-node', |
|---|
| | | ], |
|---|
| | | edit: ['click-select'] |
|---|
| | | }, |
|---|
| | | layout: { |
|---|
| | | type: 'dagre', |
|---|
| | | direction: 'LR', |
|---|
| | | }, |
|---|
| | | defaultNode: { |
|---|
| | | shape: 'node', |
|---|
| | | type: 'rect', |
|---|
| | | labelCfg: { |
|---|
| | | style: { |
|---|
| | | fill: '#000000A6', |
|---|
| | | fontSize: 14, |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | style: { |
|---|
| | | // 仅在 keyShape 上生效 |
|---|
| | | fill: 'lightblue', |
|---|
| | | stroke: '#888', |
|---|
| | | lineWidth: 1, |
|---|
| | | radius: 7, |
|---|
| | | }, |
|---|
| | | linkPoints: { |
|---|
| | | top: true, |
|---|
| | | bottom: true, |
|---|
| | | left: true, |
|---|
| | | right: true, |
|---|
| | | // ... 四个圆的样式可以在这里指定 |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | defaultEdge: { |
|---|
| | | shape: 'polyline', |
|---|
| | | }, |
|---|
| | | nodeStateStyles: { |
|---|
| | | // 各状态下的样式，平铺的配置项仅在 keyShape 上生效。需要在其他 shape 样式上响应状态变化则写法不同，参见上文提到的 配置状态样式 链接 |
|---|
| | | hover: { |
|---|
| | | fillOpacity: 0.1, |
|---|
| | | lineWidth: 1, |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | }); |
|---|
| | | } |
|---|
| | | graph.data(data); |
|---|
| | | graph.render(); |
|---|
| | | |
|---|
| | | // 监听鼠标进入节点事件 |
|---|
| | | graph.on('node:mouseenter', (evt) => { |
|---|
| | | const node = evt.item; |
|---|
| | | // 激活该节点的 hover 状态 |
|---|
| | | graph.setItemState(node, 'hover', true); |
|---|
| | | }); |
|---|
| | | |
|---|
| | | // 监听鼠标离开节点事件 |
|---|
| | | graph.on('node:mouseleave', (evt) => { |
|---|
| | | const node = evt.item; |
|---|
| | | // 关闭该节点的 hover 状态 |
|---|
| | | graph.setItemState(node, 'hover', false); |
|---|
| | | }); |
|---|
| | | |
|---|
| | | graph.on('node:click', (evt) => { |
|---|
| | | const node = evt.item; |
|---|
| | | const model = node.getModel(); |
|---|
| | | // 在这里打开模态框或者编辑表格，传入model以便用于初始化编辑内容 |
|---|
| | | showModal(model); |
|---|
| | | }); |
|---|
| | | }, []); |
|---|
| | | |
|---|
| | | return <div ref={ref}></div>; |
|---|
| | | } |
|---|
