#

Junjie

2024-04-16 25c69020ee46b88cda22f56631c4fdb149d211cd

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

@@ -7,7 +7,7 @@
import { Stencil } from '@antv/x6-plugin-stencil';
import { History } from '@antv/x6-plugin-history'
import { Transform } from '@antv/x6-plugin-transform'
import { commonGraphPorts, commonGraphAttrs, initGraphConnecting } from "./GraphConfig";
import { commonGraphPorts, commonGraphAttrs, initGraphConnecting, initNodeData } from "./GraphConfig";

export const GraphComponent = React.forwardRef((props, ref) => {
    const container = useRef(null);
@@ -33,25 +33,27 @@

        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({
@@ -77,11 +79,11 @@

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

        props.initHandle();//通知父组件初始化完成
        return graph;
@@ -102,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
            ports: commonGraphPorts,
            data: n1Data,
        })

        const n2 = graph.createNode({
            shape: "rect",
            width: 80,
            height: 40,
            label: "测试组件",
            label: "常用组件",
            attrs: commonGraphAttrs,
            ports: commonGraphPorts
            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) {