#

Junjie

2024-03-11 b6468c97166a649147c476767cfc78cd86ac9b41

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

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

        graph.use(
@@ -77,11 +79,1347 @@

        graph.use(
            new Transform({
              resizing: {
                enabled: true
              },
                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;
@@ -108,25 +1446,43 @@

        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 n3Data = JSON.parse(JSON.stringify(initNodeData))
        n3Data.isLogic = true;//逻辑判断
        const n3 = 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: n3Data,
        })

        stencil.load([n1, n2, n3], 'group1')
    }

    function initBind(graph) {