| | |
|---|
| | | import React, { useEffect, useState } from 'react'; |
|---|
| | | import ReactDOM from 'react-dom'; |
|---|
| | | import { data } from './data'; |
|---|
| | | import G6 from '@antv/g6'; |
|---|
| | | import "./index.css" |
|---|
| | | import React, { useEffect, useRef, useState } from "react"; |
|---|
| | | import { Graph, Shape } from "@antv/x6"; |
|---|
| | | import { GraphComponent } from "../../components/Flow/GraphComponent"; |
|---|
| | | import { GraphTools } from "../../components/Flow/GraphTools"; |
|---|
| | | import './index.less'; |
|---|
| | | |
|---|
| | | export default function() { |
|---|
| | | const ref = React.useRef(null); |
|---|
| | | let graph = null; |
|---|
| | | export default function () { |
|---|
| | | const graphRef = useRef(null); |
|---|
| | | const [ready, setReady] = useState(false); |
|---|
| | | |
|---|
| | | 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, |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | }); |
|---|
| | | const initHandle = () => { |
|---|
| | | setReady(true); |
|---|
| | | } |
|---|
| | | 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); |
|---|
| | | }); |
|---|
| | | useEffect(() => { |
|---|
| | | if (ready) { |
|---|
| | | // 你需要在loading状态改变后执行的代码 |
|---|
| | | console.log('graphRef is ready:', graphRef.current); |
|---|
| | | } |
|---|
| | | }, [ready]); |
|---|
| | | |
|---|
| | | graph.on('node:click', (evt) => { |
|---|
| | | const node = evt.item; |
|---|
| | | const model = node.getModel(); |
|---|
| | | // 在这里打开模态框或者编辑表格，传入model以便用于初始化编辑内容 |
|---|
| | | showModal(model); |
|---|
| | | }); |
|---|
| | | }, []); |
|---|
| | | |
|---|
| | | return <div ref={ref}></div>; |
|---|
| | | return ( |
|---|
| | | |
|---|
| | | <div className="stencil-app"> |
|---|
| | | <GraphTools isReady={ready} graphRef={graphRef} /> |
|---|
| | | <GraphComponent ref={graphRef} initHandle={initHandle} /> |
|---|
| | | </div> |
|---|
| | | ); |
|---|
| | | } |
|---|
