#

Junjie

2024-04-28 46054fc49e33fe4f1aba8da23b74b8f14664bdfe

 zy-asrs-flow/src/components/Flow/GraphComponent.jsx

@@ -6,8 +6,8 @@
import { Clipboard } from '@antv/x6-plugin-clipboard';
import { Stencil } from '@antv/x6-plugin-stencil';
import { History } from '@antv/x6-plugin-history'
import { commonGraphPorts, commonGraphAttrs } from "./GraphConfig";

import { Transform } from '@antv/x6-plugin-transform'
import { commonGraphPorts, commonGraphAttrs, initGraphConnecting, initNodeData } from "./GraphConfig";

export const GraphComponent = React.forwardRef((props, ref) => {
    const container = useRef(null);
@@ -24,54 +24,36 @@
    function initGrap() {
        ref.current = new Graph({
            container: container.current,
            // width: document.documentElement.clientWidth,
            // height: document.documentElement.clientHeight,
            width: 200,
            height: 500,
            // grid: 1,
            connecting: {
                snap: true,
                createEdge() {
                    return new Shape.Edge({
                        attrs: {
                            line: {
                                stroke: '#a0a0a0',
                                strokeWidth: 1,
                                targetMarker: {
                                    name: 'classic',
                                    size: 8,
                                },
                            },
                        },
                    })
                },
                connector: 'smooth',
                allowMulti: true,
                allowPort: true,
            }
            width: document.documentElement.clientWidth,
            height: document.documentElement.clientHeight - 100,
            // width: 200,
            // height: 500,
            connecting: initGraphConnecting,
        });

        const graph = ref.current;

        const rect = graph.addNode({
            x: 60,
            y: 60,
            width: 120,
            height: 40,
            label: '订单管理',
            ports: commonGraphPorts,
            attrs: commonGraphAttrs,
        });
        // const rect = graph.addNode({
        //     x: 60,
        //     y: 60,
        //     width: 120,
        //     height: 40,
        //     label: '订单管理',
        //     ports: commonGraphPorts,
        //     attrs: commonGraphAttrs,
        //     data: initNodeData,
        // });

        const rect2 = graph.addNode({
            x: 240,
            y: 240,
            width: 120,
            height: 40,
            label: '库存管理',
            ports: commonGraphPorts,
            attrs: commonGraphAttrs,
        });
        // const rect2 = graph.addNode({
        //     x: 240,
        //     y: 240,
        //     width: 120,
        //     height: 40,
        //     label: '库存管理',
        //     ports: commonGraphPorts,
        //     attrs: commonGraphAttrs,
        //     data: initNodeData,
        // });

        graph.use(
            new Snapline({
@@ -95,6 +77,14 @@
            }),
        )

        graph.use(
            new Transform({
                resizing: {
                    enabled: true
                },
            }),
        )

        props.initHandle();//通知父组件初始化完成
        return graph;
    }
@@ -114,31 +104,102 @@
                {
                    name: 'group1',
                    title: '常用组件',
                },
                {
                    name: 'group2',
                    title: '逻辑组件'
                }
            ],
        })

        stencilContainer.current.appendChild(stencil.container)



        const n1Data = JSON.parse(JSON.stringify(initNodeData))
        n1Data.root = true;//设置为根节点
        const n1 = graph.createNode({
            shape: "rect",
            width: 80,
            height: 40,
            label: "默认组件",
            label: "程序入口",
            attrs: commonGraphAttrs,
            ports: commonGraphPorts,
            data: n1Data,
        })

        const n2 = graph.createNode({
            shape: "rect",
            width: 80,
            height: 40,
            label: "测试组件",
            label: "常用组件",
            attrs: commonGraphAttrs,
            ports: commonGraphPorts,
            data: initNodeData,
        })

        stencil.load([n1, n2], 'group1')
        const crnData = JSON.parse(JSON.stringify(initNodeData))
        crnData.type = "crn";
        const crnStencil = graph.createNode({
            shape: "rect",
            width: 80,
            height: 40,
            label: "堆垛机组件",
            attrs: commonGraphAttrs,
            ports: commonGraphPorts,
            data: crnData,
        })

        const shuttleData = JSON.parse(JSON.stringify(initNodeData))
        shuttleData.type = "shuttle";
        const shuttleStencil = graph.createNode({
            shape: "rect",
            width: 80,
            height: 40,
            label: "四向车组件",
            attrs: commonGraphAttrs,
            ports: commonGraphPorts,
            data: shuttleData,
        })

        const liftData = JSON.parse(JSON.stringify(initNodeData))
        liftData.type = "lift";
        const liftStencil = graph.createNode({
            shape: "rect",
            width: 80,
            height: 40,
            label: "提升机组件",
            attrs: commonGraphAttrs,
            ports: commonGraphPorts,
            data: liftData,
        })

        const devpData = JSON.parse(JSON.stringify(initNodeData))
        devpData.type = "devp";
        const devpStencil = graph.createNode({
            shape: "rect",
            width: 80,
            height: 40,
            label: "输送线组件",
            attrs: commonGraphAttrs,
            ports: commonGraphPorts,
            data: devpData,
        })

        const logicStencilData = JSON.parse(JSON.stringify(initNodeData))
        logicStencilData.isLogic = true;//逻辑判断
        const logicStencil = graph.createNode({
            shape: 'path',
            width: 100,
            height: 60,
            // https://www.svgrepo.com/svg/13653/like
            path: 'M 50 0 L 100 50 L 50 100 L 0 50 Z',
            attrs: commonGraphAttrs,
            label: '逻辑判断',
            ports: commonGraphPorts,
            data: logicStencilData,
        })

        stencil.load([n1, n2, crnStencil, shuttleStencil, liftStencil, devpStencil], 'group1')
        stencil.load([logicStencil], 'group2')
    }

    function initBind(graph) {
@@ -173,12 +234,16 @@
        })

        graph.bindKey('ctrl+z', () => {
            graph.undo()
            if (graph.canUndo()) {
                graph.undo()
            }
            return false
        })

        graph.bindKey('ctrl+y', () => {
            graph.redo()
            if (graph.canRedo()) {
                graph.redo()
            }
            return false
        })

@@ -189,6 +254,21 @@
            })
            return false
        })

        graph.on('node:mouseenter', ({ node }) => {
            const ports = document.querySelectorAll(".x6-port-body")
            for (let i = 0, len = ports.length; i < len; i += 1) {
                ports[i].style.visibility = 'visible'
            }
        })

        graph.on('node:mouseleave', ({ node }) => {
            const ports = document.querySelectorAll(".x6-port-body")
            for (let i = 0, len = ports.length; i < len; i += 1) {
                ports[i].style.visibility = 'hidden'
            }
        })

    }

    return (