vue3中使用自定义节点时ports桩的位置不在图形正确位置上

[xujunxujun]

const graph = new Graph({ container: graphContainerRef.value, renderer: () => new WebGLRenderer(), autoResize: true, padding: 20, behaviors: [ 'drag-element', 'zoom-canvas', 'drag-canvas', { type: 'focus-element', animation: { duration: 500, easing: 'ease-in-out', }, }, 'hover-activate', 'click-select' ], plugins: [ { type: 'grid-line', key: 'my-grid-line', size: 20, stroke: '#eee', follow: true, },

        {
            type: 'history',
            key: 'history',
        },
        {
            type: 'minimap',
            position: 'top-left', // 这里进行修改minimap所在位置
            container: minmapContainerRef.value,
            containerStyle: {

                borderRadius: '5px'
            }
        },
        {
            type: 'toolbar',
            position: 'bottom-left',
            padding: 0,
            getItems: () => [
                { id: 'zoom-in', value: 'zoom-in' },
                { id: 'zoom-out', value: 'zoom-out' },
                { id: 'undo', value: 'undo' },
                { id: 'redo', value: 'redo' },
                { id: 'auto-fit', value: 'fit' },
                { id: 'icon-junmap', value: 'map' },

            ],
            onClick: (value: any) => {
                // 处理按钮点击事件
                const history: any = graph.getPluginInstance('history');
                switch (value) {
                    case 'zoom-in':
                        graph.zoomTo(1.1);
                        break;
                    case 'zoom-out':
                        graph.zoomTo(0.9);
                        break;
                    case 'undo':
                        history?.undo();
                        break;
                    case 'redo':
                        history?.redo();
                        break;
                    case 'fit':
                        graph.fitView();
                        break;
                    case 'map':

                        break;
                    default:
                        break;
                }
            },
        },
    ],
    data: {
        nodes: [
            {
                id: 'node-1',
                type: 'vue-node', // 使用 Vue 节点类型
                "states": ["selected"],
                data: {
                    label: '用户服务',
                    description: '处理用户认证和授权',
                    type: 'service',
                    shape: 'if-node',
                    status: 'running',
                    // 添加更多参数
                    icon: 'user-icon',
                    count: 10,
                    enabled: true,
                    tags: ['tag1', 'tag2']
                },
                style: {
                    x: 200,
                    y: 200,
                    port: true,
                    ports: [
                        { key: 'top', placement: 'top', fill: '#7E92B5' },
                        { key: 'right', placement: 'right', fill: '#F4664A' },
                        { key: 'bottom', placement: 'bottom', fill: '#FFBE3A' },
                        { key: 'left', placement: 'left', fill: '#D580FF' },
                    ],
                    portR: 3,
                    portLineWidth: 1,
                    portStroke: '#ff0',
                    // component: (nodeData) => {
                    //     console.log('nodeData:', nodeData);
                    //     return h(IFNodeView, { data: nodeData.data });
                    // }

                }
            },
            {
                id: 'node-2',
                type: 'vue-node',
                style: {
                    x: 1350,
                    y: 1120,
                    size: 100,
                    ports: [
                        {
                            key: 'input',
                            placement: 'left',
                            fill: '#52C41A', // 绿色输入桩
                            r: 4,
                        },
                        {
                            key: 'output',
                            placement: 'right',
                            fill: '#FF4D4F', // 红色输出桩
                            r: 4,
                        },
                    ],
                    portStroke: '#0ff', // 统一的描边颜色
                    portLineWidth: 2,
                    // component: SwitchNodeView,

                },
                data: {
                    shape: 'switch-node',
                    title: 'Switch节点',
                    subtitle: '多路分支节点',
                    condition: 'status',
                    cases: [
                        { label: '激活状态' },
                        { label: '待审核' },
                        { label: '默认路径' }
                    ]
                }
            },
        ],
        edges: [
            {
                id: 'edge-1',
                source: 'node-1',
                target: 'node-2',
                controlPoints: [[300, 190]],
            },
        ],
    },

    node: {

        style: {

            component: (nodeData: any) => {

                if (!nodeData) return null;
                switch (nodeData.data.shape) {
                    case 'if-node':
                        return h(IFNodeView, { data: nodeData.data });
                    case 'switch-node':
                        return h(SwitchNodeView, { data: nodeData.data });
                    default:
                        return h(IFNodeView, { data: nodeData.data });
                }



            },


        }, // 节点样式

    },
    edge: {
        style: {
            stroke: '#999',
            endArrow: true,
            lineWidth: 2,
        },
    },
    autoFit: 'view',
});

graph.render();
graph.fitCenter();

我在vue3项目中使用自定义节点switch，并定义了输入输出桩ports，问题是output桩设置在右侧，实际却显示在中件且被Vue组件遮挡了