为什么在自定义边中的afterDraw中第一次渲染取不到正确的中点坐标（附代码、截图） #4628

问题描述

export const customEdgeConfig = {
    afterDraw(cfg, group) {
        const startPoint = cfg.startPoint;
        const endPoint = cfg.endPoint;

        // 计算中点的坐标
        const midX = (startPoint.x + endPoint.x) / 2;
        const midY = (startPoint.y + endPoint.y) / 2;

        // 绘制圆
        const edgeGroup = group.addShape('circle', {
            attrs: {
                x: midX,
                y: midY,
                r: 12,
                fill: 'white'
            }
        });

        group.addShape('circle', {
            attrs: {
                x: midX,
                y: midY,
                r: 10,
                fill: 'blue'
            }
        });

        // 绘制数字
        group.addShape('text', {
            attrs: {
                x: midX,
                y: midY,
                text: cfg.label, // 要显示的数字
                fill: 'white',
                textAlign: 'center',
                textBaseline: 'middle',
                fontSize: 12
            }
        });

        return edgeGroup;
    }
};

export const customLayout = {
    execute() {
        const { nodes, center, height } = this;
        const [centerX, centerY] = center;
        const centerNode = find(nodes, (node) => node.state === 'center'); // 中间节点
        const leftNodes = filter(nodes, (node) => node.state === 'left'); // 左边节点
        const rightNodes = filter(nodes, (node) => node.state === 'right'); // 右边节点

        centerNode.x = centerX - NODE_WIDTH / 2;
        centerNode.y = centerY - NODE_HEIGHT / 2;

        // 设置左边节点的布局位置
        forEach(leftNodes, (node, i) => {
            node.x = centerX - NODE_X_SPACE - NODE_WIDTH * 1.5; // 设置 x 坐标
            const nodeY =
                (height / size(leftNodes)) * (i + 0.5) +
                (i - (size(leftNodes) - 1) / 2) * NODE_Y_SPACE;
            node.y = nodeY - NODE_HEIGHT / 2; // 设置 y 坐标
        });

        // 设置右边节点的布局位置
        forEach(rightNodes, (node, i) => {
            node.x = centerX + NODE_X_SPACE + NODE_WIDTH * 0.5; // 设置 x 坐标
            const nodeY =
                ((i + 0.5) * height) / size(rightNodes) +
                (i - (size(rightNodes) - 1) / 2) * NODE_Y_SPACE;
            node.y = nodeY - NODE_HEIGHT / 2; // 设置 y 坐标
        });
    }
};

G6.registerEdge('custom-edge', customEdgeConfig, 'cubic-horizontal');
G6.registerLayout('custom-layout', customLayout);


const containerGraph = new G6.Graph({
    renderer: 'svg',
    container,
    width: container.offsetWidth,
    height: container.offsetHeight,
    layout: {
        type: 'custom-layout'
    },
    defaultNode: {
        type: 'modelRect',
        preRect: false,
        size: [200, 40]
    },
    defaultEdge: {
        type: 'custom-edge'
    },
    modes: {
        default: ['drag-canvas']
    }
});

重现链接

https://g6.antv.antgroup.com/examples/item/customEdge/#extraShape

重现步骤

不清楚是不是布局的时候出了问题，但节点的布局是正确的

预期行为

期望可以得到每条边的中点坐标，但控制台打印所有边的坐标都是一样的，第二次进入画布才显示了正确的坐标

平台

• 操作系统: [macOS, Windows, Linux, React Native ...]
• 网页浏览器: [Google Chrome, Safari, Firefox]
• G6 版本: [4.5.1 ... ]

屏幕截图或视频（可选）

<img width="522" alt="image" src="https://github.com/antvis/G6/assets/48376890/678ccd89-7468-4e50-b24d-0076bf5b6b74"> <img width="425" alt="image" src="https://github.com/antvis/G6/assets/48376890/5d6eb078-ad8f-4c47-9329-6ca289785e53"> <img width="1067" alt="image" src="https://github.com/antvis/G6/assets/48376890/38d61448-3d77-4b57-91ce-bbd1f880bfab">

补充说明（可选）

烦请指点