#

Junjie

2024-06-16 83c548d3dba59aaed9b52b5d413c6912a87d2efc

 zy-asrs-flow/src/pages/home/index.jsx

@@ -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>
    );
}