#

luxiaotao1123

2024-03-15 8c93f751e6e5c224a06b401e63345f7927be1f8c

 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,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;
@@ -61,6 +41,7 @@
            label: '订单管理',
            ports: commonGraphPorts,
            attrs: commonGraphAttrs,
            data: initNodeData,
        });

        const rect2 = graph.addNode({
@@ -71,6 +52,7 @@
            label: '库存管理',
            ports: commonGraphPorts,
            attrs: commonGraphAttrs,
            data: initNodeData,
        });

        graph.use(
@@ -95,6 +77,1350 @@
            }),
        )

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


        graph.fromJSON({
            "cells": [
                {
                    "shape": "edge",
                    "attrs": {
                        "line": {
                            "stroke": "#A2B1C3",
                            "targetMarker": {
                                "name": "block",
                                "width": 12,
                                "height": 8
                            }
                        }
                    },
                    "id": "2475ea4f-f0e3-4b44-add4-7d4950ddea45",
                    "zIndex": 0,
                    "source": {
                        "cell": "71d8bc90-558f-489f-b432-a03d7af27cdc",
                        "port": "port2"
                    },
                    "target": {
                        "cell": "c5798537-a8a0-4d79-bd76-a4f663492126",
                        "port": "port1"
                    },
                    "data": {
                        "codeContent": null,
                        "root": false,
                        "isLogic": false,
                        "logicBool": false,
                        "searchLogicId": 1,
                        "searchLogicBool": true,
                        "searchIndex": 0
                    },
                    "labels": [
                        {
                            "attrs": {
                                "label": {
                                    "text": ""
                                }
                            }
                        }
                    ]
                },
                {
                    "shape": "edge",
                    "attrs": {
                        "line": {
                            "stroke": "#A2B1C3",
                            "targetMarker": {
                                "name": "block",
                                "width": 12,
                                "height": 8
                            }
                        }
                    },
                    "id": "2c3744b4-45ce-44a6-b169-402eaec24174",
                    "zIndex": 0,
                    "source": {
                        "cell": "c5798537-a8a0-4d79-bd76-a4f663492126",
                        "port": "port2"
                    },
                    "target": {
                        "cell": "3ca188b2-9ffe-4528-ba6e-c1568b6d7fe6",
                        "port": "port1"
                    },
                    "data": {
                        "codeContent": null,
                        "root": false,
                        "isLogic": false,
                        "logicBool": false,
                        "searchLogicId": 1,
                        "searchLogicBool": true,
                        "searchIndex": 0
                    },
                    "labels": [
                        {
                            "attrs": {
                                "label": {
                                    "text": ""
                                }
                            }
                        }
                    ]
                },
                {
                    "shape": "edge",
                    "attrs": {
                        "line": {
                            "stroke": "#A2B1C3",
                            "targetMarker": {
                                "name": "block",
                                "width": 12,
                                "height": 8
                            }
                        }
                    },
                    "id": "56181ccf-a41c-4cd8-82d6-e2a4bde31ba9",
                    "zIndex": 0,
                    "source": {
                        "cell": "3ca188b2-9ffe-4528-ba6e-c1568b6d7fe6",
                        "port": "port2"
                    },
                    "target": {
                        "cell": "63db5ce0-b916-44e4-a924-a79b35afe1d1",
                        "port": "port1"
                    },
                    "data": {
                        "codeContent": null,
                        "root": false,
                        "isLogic": false,
                        "logicBool": true,
                        "searchLogicId": 1,
                        "searchLogicBool": true,
                        "searchIndex": 0
                    },
                    "labels": [
                        {
                            "attrs": {
                                "label": {
                                    "text": "true"
                                }
                            }
                        }
                    ]
                },
                {
                    "shape": "edge",
                    "attrs": {
                        "line": {
                            "stroke": "#A2B1C3",
                            "targetMarker": {
                                "name": "block",
                                "width": 12,
                                "height": 8
                            }
                        }
                    },
                    "id": "73ca24ef-e9d4-4f18-9f06-ca49ac65962a",
                    "zIndex": 0,
                    "source": {
                        "cell": "cc993d9b-ce11-409d-92c6-7208682dcc8b",
                        "port": "port4"
                    },
                    "target": {
                        "cell": "06d450fc-474e-4b23-b40d-c89fde446b28",
                        "port": "port3"
                    },
                    "data": {
                        "codeContent": null,
                        "root": false,
                        "isLogic": false,
                        "logicBool": false,
                        "searchLogicId": 1,
                        "searchLogicBool": true,
                        "searchIndex": 0
                    },
                    "labels": [
                        {
                            "attrs": {
                                "label": {
                                    "text": "false"
                                }
                            }
                        }
                    ]
                },
                {
                    "shape": "edge",
                    "attrs": {
                        "line": {
                            "stroke": "#A2B1C3",
                            "targetMarker": {
                                "name": "block",
                                "width": 12,
                                "height": 8
                            }
                        }
                    },
                    "id": "84a3a77c-79e8-4cf8-9bab-a72bbfc77f1d",
                    "zIndex": 0,
                    "source": {
                        "cell": "cc993d9b-ce11-409d-92c6-7208682dcc8b",
                        "port": "port2"
                    },
                    "target": {
                        "cell": "cd9da0a4-5c2d-4f1b-9c51-403b32f1ad51",
                        "port": "port1"
                    },
                    "data": {
                        "codeContent": null,
                        "root": false,
                        "isLogic": false,
                        "logicBool": true,
                        "searchLogicId": 1,
                        "searchLogicBool": true,
                        "searchIndex": 0
                    },
                    "labels": [
                        {
                            "attrs": {
                                "label": {
                                    "text": "true"
                                }
                            }
                        }
                    ]
                },
                {
                    "shape": "edge",
                    "attrs": {
                        "line": {
                            "stroke": "#A2B1C3",
                            "targetMarker": {
                                "name": "block",
                                "width": 12,
                                "height": 8
                            }
                        }
                    },
                    "id": "93d65ae7-f170-466a-92ea-f69614002800",
                    "zIndex": 0,
                    "source": {
                        "cell": "c844f3d1-02a3-47d3-bcb9-51027c1deb1c",
                        "port": "port2"
                    },
                    "target": {
                        "cell": "cc993d9b-ce11-409d-92c6-7208682dcc8b",
                        "port": "port1"
                    },
                    "data": {
                        "codeContent": null,
                        "root": false,
                        "isLogic": false,
                        "logicBool": false,
                        "searchLogicId": 1,
                        "searchLogicBool": true,
                        "searchIndex": 0
                    },
                    "labels": [
                        {
                            "attrs": {
                                "label": {
                                    "text": ""
                                }
                            }
                        }
                    ]
                },
                {
                    "shape": "edge",
                    "attrs": {
                        "line": {
                            "stroke": "#A2B1C3",
                            "targetMarker": {
                                "name": "block",
                                "width": 12,
                                "height": 8
                            }
                        }
                    },
                    "id": "de85103e-80ac-4c88-92de-5bb1a131788c",
                    "zIndex": 0,
                    "source": {
                        "cell": "63db5ce0-b916-44e4-a924-a79b35afe1d1",
                        "port": "port2"
                    },
                    "target": {
                        "cell": "c844f3d1-02a3-47d3-bcb9-51027c1deb1c",
                        "port": "port1"
                    },
                    "data": {
                        "codeContent": null,
                        "root": false,
                        "isLogic": false,
                        "logicBool": false,
                        "searchLogicId": 1,
                        "searchLogicBool": true,
                        "searchIndex": 0
                    },
                    "labels": [
                        {
                            "attrs": {
                                "label": {
                                    "text": ""
                                }
                            }
                        }
                    ]
                },
                {
                    "position": {
                        "x": 60,
                        "y": 60
                    },
                    "size": {
                        "width": 120,
                        "height": 40
                    },
                    "attrs": {
                        "text": {
                            "text": "订单管理"
                        },
                        "body": {
                            "fill": "#efefef",
                            "stroke": "#4d4d4d",
                            "strokeWidth": 2,
                            "refD": "M 50 0 L 100 50 L 50 100 L 0 50 Z"
                        }
                    },
                    "visible": true,
                    "shape": "rect",
                    "id": "a4962b5d-6ef0-4217-bbf8-742652ffc0ee",
                    "data": {
                        "codeContent": null,
                        "root": false,
                        "isLogic": false,
                        "logicBool": false,
                        "searchLogicId": 1,
                        "searchLogicBool": true,
                        "searchIndex": 0
                    },
                    "zIndex": 1,
                    "ports": {
                        "groups": {
                            "top": {
                                "position": "top",
                                "attrs": {
                                    "circle": {
                                        "r": 5,
                                        "magnet": true,
                                        "stroke": "#5F95FF",
                                        "strokeWidth": 1,
                                        "fill": "#fff",
                                        "style": {
                                            "visibility": "hidden"
                                        }
                                    }
                                }
                            },
                            "bottom": {
                                "position": "bottom",
                                "attrs": {
                                    "circle": {
                                        "r": 5,
                                        "magnet": true,
                                        "stroke": "#5F95FF",
                                        "strokeWidth": 1,
                                        "fill": "#fff",
                                        "style": {
                                            "visibility": "hidden"
                                        }
                                    }
                                }
                            },
                            "left": {
                                "position": "left",
                                "attrs": {
                                    "circle": {
                                        "r": 5,
                                        "magnet": true,
                                        "stroke": "#5F95FF",
                                        "strokeWidth": 1,
                                        "fill": "#fff",
                                        "style": {
                                            "visibility": "hidden"
                                        }
                                    }
                                }
                            },
                            "right": {
                                "position": "right",
                                "attrs": {
                                    "circle": {
                                        "r": 5,
                                        "magnet": true,
                                        "stroke": "#5F95FF",
                                        "strokeWidth": 1,
                                        "fill": "#fff",
                                        "style": {
                                            "visibility": "hidden"
                                        }
                                    }
                                }
                            }
                        },
                        "items": [
                            {
                                "id": "port1",
                                "group": "top"
                            },
                            {
                                "id": "port2",
                                "group": "bottom"
                            },
                            {
                                "id": "port3",
                                "group": "left"
                            },
                            {
                                "id": "port4",
                                "group": "right"
                            }
                        ]
                    }
                },
                {
                    "position": {
                        "x": 260,
                        "y": 390
                    },
                    "size": {
                        "width": 120,
                        "height": 40
                    },
                    "attrs": {
                        "text": {
                            "text": "库存管理"
                        },
                        "body": {
                            "fill": "#efefef",
                            "stroke": "#4d4d4d",
                            "strokeWidth": 2,
                            "refD": "M 50 0 L 100 50 L 50 100 L 0 50 Z"
                        }
                    },
                    "visible": true,
                    "shape": "rect",
                    "id": "63db5ce0-b916-44e4-a924-a79b35afe1d1",
                    "data": {
                        "codeContent": "2222",
                        "root": false,
                        "isLogic": false,
                        "logicBool": false,
                        "searchLogicId": 1,
                        "searchLogicBool": true,
                        "searchIndex": 0
                    },
                    "zIndex": 2,
                    "ports": {
                        "groups": {
                            "top": {
                                "position": "top",
                                "attrs": {
                                    "circle": {
                                        "r": 5,
                                        "magnet": true,
                                        "stroke": "#5F95FF",
                                        "strokeWidth": 1,
                                        "fill": "#fff",
                                        "style": {
                                            "visibility": "hidden"
                                        }
                                    }
                                }
                            },
                            "bottom": {
                                "position": "bottom",
                                "attrs": {
                                    "circle": {
                                        "r": 5,
                                        "magnet": true,
                                        "stroke": "#5F95FF",
                                        "strokeWidth": 1,
                                        "fill": "#fff",
                                        "style": {
                                            "visibility": "hidden"
                                        }
                                    }
                                }
                            },
                            "left": {
                                "position": "left",
                                "attrs": {
                                    "circle": {
                                        "r": 5,
                                        "magnet": true,
                                        "stroke": "#5F95FF",
                                        "strokeWidth": 1,
                                        "fill": "#fff",
                                        "style": {
                                            "visibility": "hidden"
                                        }
                                    }
                                }
                            },
                            "right": {
                                "position": "right",
                                "attrs": {
                                    "circle": {
                                        "r": 5,
                                        "magnet": true,
                                        "stroke": "#5F95FF",
                                        "strokeWidth": 1,
                                        "fill": "#fff",
                                        "style": {
                                            "visibility": "hidden"
                                        }
                                    }
                                }
                            }
                        },
                        "items": [
                            {
                                "id": "port1",
                                "group": "top"
                            },
                            {
                                "id": "port2",
                                "group": "bottom"
                            },
                            {
                                "id": "port3",
                                "group": "left"
                            },
                            {
                                "id": "port4",
                                "group": "right"
                            }
                        ]
                    }
                },
                {
                    "position": {
                        "x": 270,
                        "y": 265
                    },
                    "size": {
                        "width": 100,
                        "height": 60
                    },
                    "attrs": {
                        "text": {
                            "text": "逻辑判断1"
                        },
                        "body": {
                            "fill": "#efefef",
                            "stroke": "#4d4d4d",
                            "refD": "M 50 0 L 100 50 L 50 100 L 0 50 Z"
                        }
                    },
                    "visible": true,
                    "shape": "path",
                    "id": "3ca188b2-9ffe-4528-ba6e-c1568b6d7fe6",
                    "data": {
                        "codeContent": "逻辑判断1",
                        "root": false,
                        "isLogic": true,
                        "logicBool": false,
                        "searchLogicId": 1,
                        "searchLogicBool": true,
                        "searchIndex": 0
                    },
                    "zIndex": 3,
                    "ports": {
                        "groups": {
                            "top": {
                                "position": "top",
                                "attrs": {
                                    "circle": {
                                        "r": 5,
                                        "magnet": true,
                                        "stroke": "#5F95FF",
                                        "strokeWidth": 1,
                                        "fill": "#fff",
                                        "style": {
                                            "visibility": "hidden"
                                        }
                                    }
                                }
                            },
                            "bottom": {
                                "position": "bottom",
                                "attrs": {
                                    "circle": {
                                        "r": 5,
                                        "magnet": true,
                                        "stroke": "#5F95FF",
                                        "strokeWidth": 1,
                                        "fill": "#fff",
                                        "style": {
                                            "visibility": "hidden"
                                        }
                                    }
                                }
                            },
                            "left": {
                                "position": "left",
                                "attrs": {
                                    "circle": {
                                        "r": 5,
                                        "magnet": true,
                                        "stroke": "#5F95FF",
                                        "strokeWidth": 1,
                                        "fill": "#fff",
                                        "style": {
                                            "visibility": "hidden"
                                        }
                                    }
                                }
                            },
                            "right": {
                                "position": "right",
                                "attrs": {
                                    "circle": {
                                        "r": 5,
                                        "magnet": true,
                                        "stroke": "#5F95FF",
                                        "strokeWidth": 1,
                                        "fill": "#fff",
                                        "style": {
                                            "visibility": "hidden"
                                        }
                                    }
                                }
                            }
                        },
                        "items": [
                            {
                                "id": "port1",
                                "group": "top"
                            },
                            {
                                "id": "port2",
                                "group": "bottom"
                            },
                            {
                                "id": "port3",
                                "group": "left"
                            },
                            {
                                "id": "port4",
                                "group": "right"
                            }
                        ]
                    }
                },
                {
                    "position": {
                        "x": 300,
                        "y": 30
                    },
                    "size": {
                        "width": 80,
                        "height": 40
                    },
                    "attrs": {
                        "text": {
                            "text": "程序入口"
                        },
                        "body": {
                            "fill": "#efefef",
                            "stroke": "#4d4d4d",
                            "strokeWidth": 2,
                            "refD": "M 50 0 L 100 50 L 50 100 L 0 50 Z"
                        }
                    },
                    "visible": true,
                    "shape": "rect",
                    "id": "71d8bc90-558f-489f-b432-a03d7af27cdc",
                    "data": {
                        "codeContent": null,
                        "root": true,
                        "isLogic": false,
                        "logicBool": false,
                        "searchLogicId": 1,
                        "searchLogicBool": true,
                        "searchIndex": 0
                    },
                    "zIndex": 4,
                    "ports": {
                        "groups": {
                            "top": {
                                "position": "top",
                                "attrs": {
                                    "circle": {
                                        "r": 5,
                                        "magnet": true,
                                        "stroke": "#5F95FF",
                                        "strokeWidth": 1,
                                        "fill": "#fff",
                                        "style": {
                                            "visibility": "hidden"
                                        }
                                    }
                                }
                            },
                            "bottom": {
                                "position": "bottom",
                                "attrs": {
                                    "circle": {
                                        "r": 5,
                                        "magnet": true,
                                        "stroke": "#5F95FF",
                                        "strokeWidth": 1,
                                        "fill": "#fff",
                                        "style": {
                                            "visibility": "hidden"
                                        }
                                    }
                                }
                            },
                            "left": {
                                "position": "left",
                                "attrs": {
                                    "circle": {
                                        "r": 5,
                                        "magnet": true,
                                        "stroke": "#5F95FF",
                                        "strokeWidth": 1,
                                        "fill": "#fff",
                                        "style": {
                                            "visibility": "hidden"
                                        }
                                    }
                                }
                            },
                            "right": {
                                "position": "right",
                                "attrs": {
                                    "circle": {
                                        "r": 5,
                                        "magnet": true,
                                        "stroke": "#5F95FF",
                                        "strokeWidth": 1,
                                        "fill": "#fff",
                                        "style": {
                                            "visibility": "hidden"
                                        }
                                    }
                                }
                            }
                        },
                        "items": [
                            {
                                "id": "port1",
                                "group": "top"
                            },
                            {
                                "id": "port2",
                                "group": "bottom"
                            },
                            {
                                "id": "port3",
                                "group": "left"
                            },
                            {
                                "id": "port4",
                                "group": "right"
                            }
                        ]
                    }
                },
                {
                    "position": {
                        "x": 300,
                        "y": 110
                    },
                    "size": {
                        "width": 80,
                        "height": 40
                    },
                    "attrs": {
                        "text": {
                            "text": "常用组件"
                        },
                        "body": {
                            "fill": "#efefef",
                            "stroke": "#4d4d4d",
                            "strokeWidth": 2,
                            "refD": "M 50 0 L 100 50 L 50 100 L 0 50 Z"
                        }
                    },
                    "visible": true,
                    "shape": "rect",
                    "id": "c5798537-a8a0-4d79-bd76-a4f663492126",
                    "data": {
                        "codeContent": "1111",
                        "root": false,
                        "isLogic": false,
                        "logicBool": false,
                        "searchLogicId": 1,
                        "searchLogicBool": true,
                        "searchIndex": 0
                    },
                    "zIndex": 5,
                    "ports": {
                        "groups": {
                            "top": {
                                "position": "top",
                                "attrs": {
                                    "circle": {
                                        "r": 5,
                                        "magnet": true,
                                        "stroke": "#5F95FF",
                                        "strokeWidth": 1,
                                        "fill": "#fff",
                                        "style": {
                                            "visibility": "hidden"
                                        }
                                    }
                                }
                            },
                            "bottom": {
                                "position": "bottom",
                                "attrs": {
                                    "circle": {
                                        "r": 5,
                                        "magnet": true,
                                        "stroke": "#5F95FF",
                                        "strokeWidth": 1,
                                        "fill": "#fff",
                                        "style": {
                                            "visibility": "hidden"
                                        }
                                    }
                                }
                            },
                            "left": {
                                "position": "left",
                                "attrs": {
                                    "circle": {
                                        "r": 5,
                                        "magnet": true,
                                        "stroke": "#5F95FF",
                                        "strokeWidth": 1,
                                        "fill": "#fff",
                                        "style": {
                                            "visibility": "hidden"
                                        }
                                    }
                                }
                            },
                            "right": {
                                "position": "right",
                                "attrs": {
                                    "circle": {
                                        "r": 5,
                                        "magnet": true,
                                        "stroke": "#5F95FF",
                                        "strokeWidth": 1,
                                        "fill": "#fff",
                                        "style": {
                                            "visibility": "hidden"
                                        }
                                    }
                                }
                            }
                        },
                        "items": [
                            {
                                "id": "port1",
                                "group": "top"
                            },
                            {
                                "id": "port2",
                                "group": "bottom"
                            },
                            {
                                "id": "port3",
                                "group": "left"
                            },
                            {
                                "id": "port4",
                                "group": "right"
                            }
                        ]
                    }
                },
                {
                    "position": {
                        "x": 280,
                        "y": 511
                    },
                    "size": {
                        "width": 80,
                        "height": 40
                    },
                    "attrs": {
                        "text": {
                            "text": "常用组件2"
                        },
                        "body": {
                            "fill": "#efefef",
                            "stroke": "#4d4d4d",
                            "strokeWidth": 2,
                            "refD": "M 50 0 L 100 50 L 50 100 L 0 50 Z"
                        }
                    },
                    "visible": true,
                    "shape": "rect",
                    "id": "c844f3d1-02a3-47d3-bcb9-51027c1deb1c",
                    "data": {
                        "codeContent": "常用组件2",
                        "root": false,
                        "isLogic": false,
                        "logicBool": false,
                        "searchLogicId": 1,
                        "searchLogicBool": true,
                        "searchIndex": 0
                    },
                    "zIndex": 6,
                    "ports": {
                        "groups": {
                            "top": {
                                "position": "top",
                                "attrs": {
                                    "circle": {
                                        "r": 5,
                                        "magnet": true,
                                        "stroke": "#5F95FF",
                                        "strokeWidth": 1,
                                        "fill": "#fff",
                                        "style": {
                                            "visibility": "hidden"
                                        }
                                    }
                                }
                            },
                            "bottom": {
                                "position": "bottom",
                                "attrs": {
                                    "circle": {
                                        "r": 5,
                                        "magnet": true,
                                        "stroke": "#5F95FF",
                                        "strokeWidth": 1,
                                        "fill": "#fff",
                                        "style": {
                                            "visibility": "hidden"
                                        }
                                    }
                                }
                            },
                            "left": {
                                "position": "left",
                                "attrs": {
                                    "circle": {
                                        "r": 5,
                                        "magnet": true,
                                        "stroke": "#5F95FF",
                                        "strokeWidth": 1,
                                        "fill": "#fff",
                                        "style": {
                                            "visibility": "hidden"
                                        }
                                    }
                                }
                            },
                            "right": {
                                "position": "right",
                                "attrs": {
                                    "circle": {
                                        "r": 5,
                                        "magnet": true,
                                        "stroke": "#5F95FF",
                                        "strokeWidth": 1,
                                        "fill": "#fff",
                                        "style": {
                                            "visibility": "hidden"
                                        }
                                    }
                                }
                            }
                        },
                        "items": [
                            {
                                "id": "port1",
                                "group": "top"
                            },
                            {
                                "id": "port2",
                                "group": "bottom"
                            },
                            {
                                "id": "port3",
                                "group": "left"
                            },
                            {
                                "id": "port4",
                                "group": "right"
                            }
                        ]
                    }
                },
                {
                    "position": {
                        "x": 270,
                        "y": 620
                    },
                    "size": {
                        "width": 100,
                        "height": 60
                    },
                    "attrs": {
                        "text": {
                            "text": "逻辑判断2"
                        },
                        "body": {
                            "fill": "#efefef",
                            "stroke": "#4d4d4d",
                            "refD": "M 50 0 L 100 50 L 50 100 L 0 50 Z"
                        }
                    },
                    "visible": true,
                    "shape": "path",
                    "id": "cc993d9b-ce11-409d-92c6-7208682dcc8b",
                    "data": {
                        "codeContent": "逻辑判断2",
                        "root": false,
                        "isLogic": true,
                        "logicBool": false,
                        "searchLogicId": 1,
                        "searchLogicBool": true,
                        "searchIndex": 0
                    },
                    "zIndex": 7,
                    "ports": {
                        "groups": {
                            "top": {
                                "position": "top",
                                "attrs": {
                                    "circle": {
                                        "r": 5,
                                        "magnet": true,
                                        "stroke": "#5F95FF",
                                        "strokeWidth": 1,
                                        "fill": "#fff",
                                        "style": {
                                            "visibility": "hidden"
                                        }
                                    }
                                }
                            },
                            "bottom": {
                                "position": "bottom",
                                "attrs": {
                                    "circle": {
                                        "r": 5,
                                        "magnet": true,
                                        "stroke": "#5F95FF",
                                        "strokeWidth": 1,
                                        "fill": "#fff",
                                        "style": {
                                            "visibility": "hidden"
                                        }
                                    }
                                }
                            },
                            "left": {
                                "position": "left",
                                "attrs": {
                                    "circle": {
                                        "r": 5,
                                        "magnet": true,
                                        "stroke": "#5F95FF",
                                        "strokeWidth": 1,
                                        "fill": "#fff",
                                        "style": {
                                            "visibility": "hidden"
                                        }
                                    }
                                }
                            },
                            "right": {
                                "position": "right",
                                "attrs": {
                                    "circle": {
                                        "r": 5,
                                        "magnet": true,
                                        "stroke": "#5F95FF",
                                        "strokeWidth": 1,
                                        "fill": "#fff",
                                        "style": {
                                            "visibility": "hidden"
                                        }
                                    }
                                }
                            }
                        },
                        "items": [
                            {
                                "id": "port1",
                                "group": "top"
                            },
                            {
                                "id": "port2",
                                "group": "bottom"
                            },
                            {
                                "id": "port3",
                                "group": "left"
                            },
                            {
                                "id": "port4",
                                "group": "right"
                            }
                        ]
                    }
                },
                {
                    "position": {
                        "x": 280,
                        "y": 781
                    },
                    "size": {
                        "width": 80,
                        "height": 40
                    },
                    "attrs": {
                        "text": {
                            "text": "常用组件3"
                        },
                        "body": {
                            "fill": "#efefef",
                            "stroke": "#4d4d4d",
                            "strokeWidth": 2,
                            "refD": "M 50 0 L 100 50 L 50 100 L 0 50 Z"
                        }
                    },
                    "visible": true,
                    "shape": "rect",
                    "id": "cd9da0a4-5c2d-4f1b-9c51-403b32f1ad51",
                    "data": {
                        "codeContent": "常用组件3",
                        "root": false,
                        "isLogic": false,
                        "logicBool": false,
                        "searchLogicId": 1,
                        "searchLogicBool": true,
                        "searchIndex": 0
                    },
                    "zIndex": 8,
                    "ports": {
                        "groups": {
                            "top": {
                                "position": "top",
                                "attrs": {
                                    "circle": {
                                        "r": 5,
                                        "magnet": true,
                                        "stroke": "#5F95FF",
                                        "strokeWidth": 1,
                                        "fill": "#fff",
                                        "style": {
                                            "visibility": "hidden"
                                        }
                                    }
                                }
                            },
                            "bottom": {
                                "position": "bottom",
                                "attrs": {
                                    "circle": {
                                        "r": 5,
                                        "magnet": true,
                                        "stroke": "#5F95FF",
                                        "strokeWidth": 1,
                                        "fill": "#fff",
                                        "style": {
                                            "visibility": "hidden"
                                        }
                                    }
                                }
                            },
                            "left": {
                                "position": "left",
                                "attrs": {
                                    "circle": {
                                        "r": 5,
                                        "magnet": true,
                                        "stroke": "#5F95FF",
                                        "strokeWidth": 1,
                                        "fill": "#fff",
                                        "style": {
                                            "visibility": "hidden"
                                        }
                                    }
                                }
                            },
                            "right": {
                                "position": "right",
                                "attrs": {
                                    "circle": {
                                        "r": 5,
                                        "magnet": true,
                                        "stroke": "#5F95FF",
                                        "strokeWidth": 1,
                                        "fill": "#fff",
                                        "style": {
                                            "visibility": "hidden"
                                        }
                                    }
                                }
                            }
                        },
                        "items": [
                            {
                                "id": "port1",
                                "group": "top"
                            },
                            {
                                "id": "port2",
                                "group": "bottom"
                            },
                            {
                                "id": "port3",
                                "group": "left"
                            },
                            {
                                "id": "port4",
                                "group": "right"
                            }
                        ]
                    }
                },
                {
                    "position": {
                        "x": 472,
                        "y": 640
                    },
                    "size": {
                        "width": 80,
                        "height": 40
                    },
                    "attrs": {
                        "text": {
                            "text": "常用组件4"
                        },
                        "body": {
                            "fill": "#efefef",
                            "stroke": "#4d4d4d",
                            "strokeWidth": 2,
                            "refD": "M 50 0 L 100 50 L 50 100 L 0 50 Z"
                        }
                    },
                    "visible": true,
                    "shape": "rect",
                    "id": "06d450fc-474e-4b23-b40d-c89fde446b28",
                    "data": {
                        "codeContent": "常用组件4",
                        "root": false,
                        "isLogic": false,
                        "logicBool": false,
                        "searchLogicId": 1,
                        "searchLogicBool": true,
                        "searchIndex": 0
                    },
                    "zIndex": 9,
                    "ports": {
                        "groups": {
                            "top": {
                                "position": "top",
                                "attrs": {
                                    "circle": {
                                        "r": 5,
                                        "magnet": true,
                                        "stroke": "#5F95FF",
                                        "strokeWidth": 1,
                                        "fill": "#fff",
                                        "style": {
                                            "visibility": "hidden"
                                        }
                                    }
                                }
                            },
                            "bottom": {
                                "position": "bottom",
                                "attrs": {
                                    "circle": {
                                        "r": 5,
                                        "magnet": true,
                                        "stroke": "#5F95FF",
                                        "strokeWidth": 1,
                                        "fill": "#fff",
                                        "style": {
                                            "visibility": "hidden"
                                        }
                                    }
                                }
                            },
                            "left": {
                                "position": "left",
                                "attrs": {
                                    "circle": {
                                        "r": 5,
                                        "magnet": true,
                                        "stroke": "#5F95FF",
                                        "strokeWidth": 1,
                                        "fill": "#fff",
                                        "style": {
                                            "visibility": "hidden"
                                        }
                                    }
                                }
                            },
                            "right": {
                                "position": "right",
                                "attrs": {
                                    "circle": {
                                        "r": 5,
                                        "magnet": true,
                                        "stroke": "#5F95FF",
                                        "strokeWidth": 1,
                                        "fill": "#fff",
                                        "style": {
                                            "visibility": "hidden"
                                        }
                                    }
                                }
                            }
                        },
                        "items": [
                            {
                                "id": "port1",
                                "group": "top"
                            },
                            {
                                "id": "port2",
                                "group": "bottom"
                            },
                            {
                                "id": "port3",
                                "group": "left"
                            },
                            {
                                "id": "port4",
                                "group": "right"
                            }
                        ]
                    }
                }
            ]
        })


        props.initHandle();//通知父组件初始化完成
        return graph;
    }
@@ -114,31 +1440,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 +1570,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 +1590,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 (