zy-asrs-master.git

			@@ -1,101 +1,32 @@
			import React, { useState } from 'react'
			import { XFlow, XFlowCanvas } from '@antv/xflow'
			/** 图的各种扩展交互组件 */
			import { CanvasMiniMap, CanvasScaleToolbar, CanvasSnapline } from '@antv/xflow'
			/** 图的配置项 */
			import { useGraphConfig } from './config-graph'
			import { message } from 'antd'
			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 { RightMenu } from "../../components/Flow/RightMenu";
			import { GraphDrawer } from "../../components/Flow/GraphDrawer";
			import './index.less';

			import './index.css'
			export default function () {
			const graphRef = useRef(null);
			const [ready, setReady] = useState(false);

			const Demo = () => {
			/** 画布配置 */
			const graphConfig = useGraphConfig()

			/** 画布渲染数据 */
			const [graphData, setGraphData] = useState()

			/** XFlow初始化完成的回调 */
			const onLoad = async app => {
			const node = [
			{ id: 'root1', width: 150, height: 40, renderKey: 'NODE1', info: { text: 'root1' } },
			{ id: 'down1', width: 150, height: 40, renderKey: 'NODE2', info: { text: 'down1' } },
			{ id: 'down2', width: 150, height: 40, renderKey: 'NODE2', info: { text: 'down2' } },
			{ id: 'down3', width: 150, height: 40, renderKey: 'NODE2', info: { text: 'down3' } },
			]
			const edges = [
			{
			id: 'root1-down1',
			source: 'root1',
			target: 'down1',
			renderKey: 'EDGE1',
			edgeContentWidth: 60,
			edgeContentHeight: 30,
			info: { line: 'root1-down1' },
			},
			{
			id: 'root1-down2',
			source: 'root1',
			target: 'down2',
			renderKey: 'EDGE2',
			edgeContentWidth: 60,
			edgeContentHeight: 30,
			info: { line: 'root1-down2' },
			},
			{
			id: 'root1-down3',
			source: 'root1',
			target: 'down3',
			label: '1:N(纯文本)',
			info: { line: 'root1-down3' },
			},
			]
			const newGraphData = { nodes, edges }
			setGraphData(newGraphData)

			const graph = await app.getGraphInstance()
			graph.on('node:click', ({ node }) => {
			const nodeData = node.getData()
			message.success(`${nodeData.id}节点被点击了`)
			})
			graph.on('edge:click', ({ edge }) => {
			edge.toFront()
			const edgeData = edge.getData()
			message.success(`${edgeData.id}连线被点击了`)
			})
			const initHandle = () => {
			setReady(true);
			}

			return (
			<XFlow
			className="xflow-user-container"
			graphData={graphData}
			graphLayout={{
			layoutType: 'dagre',
			layoutOptions: {
			type: 'dagre',
			rankdir: 'TB',
			nodesep: 60,
			ranksep: 40,
			},
			}}
			onLoad={onLoad}
			isAutoCenter={true}
			>
			<XFlowCanvas config={graphConfig}>
			<CanvasScaleToolbar position={{ top: 12, left: 12 }} />
			<CanvasMiniMap
			miniMapClz="xflow-custom-minimap"
			nodeFillColor="#ccc"
			minimapOptions={{
			width: 200,
			height: 120,
			}}
			position={{ top: 12, right: 12 }}
			/>
			<CanvasSnapline color="#1890ff" />
			</XFlowCanvas>
			</XFlow>
			)
			}
			useEffect(() => {
			if (ready) {
			// 你需要在loading状态改变后执行的代码
			console.log('graphRef is ready:', graphRef.current);
			}
			}, [ready]);

			export default Demo
			return (
			<div className="stencil-app">
			<GraphTools isReady={ready} graphRef={graphRef} />
			<GraphComponent ref={graphRef} initHandle={initHandle} />
			<RightMenu isReady={ready} graphRef={graphRef} />
			<GraphDrawer isReady={ready} graphRef={graphRef} />
			</div>
			);
			}