#

luxiaotao1123

2024-03-06 6faf59b2a3c35904a8486d4c0f92c7f85e9d8be5

 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 } from "./GraphConfig";

export const GraphComponent = React.forwardRef((props, ref) => {
    const container = useRef(null);
@@ -24,31 +24,11 @@
    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;
@@ -95,6 +75,14 @@
            }),
        )

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

        props.initHandle();//通知父组件初始化完成
        return graph;
    }
@@ -120,14 +108,13 @@

        stencilContainer.current.appendChild(stencil.container)



        const n1 = graph.createNode({
            shape: "rect",
            width: 80,
            height: 40,
            label: "默认组件",
            attrs: commonGraphAttrs,
            ports: commonGraphPorts
        })

        const n2 = graph.createNode({
@@ -136,6 +123,7 @@
            height: 40,
            label: "测试组件",
            attrs: commonGraphAttrs,
            ports: commonGraphPorts
        })

        stencil.load([n1, n2], 'group1')
@@ -173,12 +161,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 +181,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 (