使用graph.centerContent()居中，实际内容以画布左上角为中心居中

[magic-hya]

问题描述

使用graph.centerContent()居中，实际内容以画布左上角为中心居中
没有以画布的中心居中

重现链接

集成工程项目中

重现步骤

graph = new Graph({
    container: document.getElementById('graph-container')!,
    grid: true,
    mousewheel: {
        enabled: true,
        zoomAtMousePosition: true,
        modifiers: 'ctrl',
        minScale: 0.5,
        maxScale: 3,
    },
    connecting: {
        router: {
            name: 'manhattan',
            args: {
                padding: 1,
            },
        },
        connector: {
            name: 'rounded',
            args: {
                radius: 8,
            },
        },
        anchor: 'center',
        connectionPoint: 'anchor',
        allowBlank: false,
        snap: {
            radius: 20,
        },
        createEdge() {
            return new Shape.Edge({
                attrs: {
                    line: {
                        stroke: '#A2B1C3',
                        strokeWidth: 2,
                        targetMarker: {
                            name: 'block',
                            width: 12,
                            height: 8,
                        },
                    },
                },
                zIndex: 0,
            })
        },
        validateConnection({ targetMagnet }) {
            return !!targetMagnet
        },
    },
    highlighting: {
        magnetAdsorbed: {
            name: 'stroke',
            args: {
                attrs: {
                    fill: '#5F95FF',
                    stroke: '#5F95FF',
                },
            },
        },
    },
    resizing: true,
    rotating: true,
    selecting: {
        enabled: true,
        rubberband: true,
        showNodeSelectionBox: true,
    },
    snapline: true,
    keyboard: true,
    // clipboard: true,
})

const saveJob = () => {
console.log("saveJob")
// console.log(graph.toJSON())
graph.centerContent()

}

预期行为

想得到跟demo一样的居中效果
想知道是什么地方影响到了画布的居中

平台

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

屏幕截图或视频（可选）

居中前

居中后

补充说明（可选）

No response

[x6-bot]

👋 @magic-hya

Thanks for opening your first issue here! If you're reporting a 🐞 bug, please make sure you include steps to reproduce it.
To help make it easier for us to investigate your issue, please follow the contributing guidelines.
We get a lot of issues on this repo, so please be patient and we will get back to you as soon as we can.

[jiash1998]

我也遇到这个问题，我是先重置节点this.graph.resetCells(cells); 然后调用this.graph.centerContent(); 发现也是在左上角。然后我是通过settimeout，设置了一个100毫秒的延迟之后再调用centerContent。我猜测可能是因为新建节点和计算位置居中需要保证一个顺序关系。

[magic-hya]

我也遇到这个问题，我是先重置节点this.graph.resetCells(cells); 然后调用this.graph.centerContent(); 发现也是在左上角。然后我是通过settimeout，设置了一个100毫秒的延迟之后再调用centerContent。我猜测可能是因为新建节点和计算位置居中需要保证一个顺序关系。

我的居中事件，是按钮触发的，有足够多的时间，所以不存在你说的先后问题，也非常感谢你了

[NewByVector]

能否提供一个可以复现的 demo 看下呢？

[flycran]

我也有这个问题，但我是使用fromJSON后调用centerContent，诡异的是垂直位置跟你们一样在顶部，水平的位置接近居中，但不完全居中

[flycran]

我也有这个问题，但我是使用fromJSON后调用centerContent，诡异的是垂直位置跟你们一样在顶部，水平的位置接近居中，但不完全居中

我通过设置容器的高度为100%解决了这个问题，但是它有一些偏移，我不知道这是为什么

[x6-bot]

This thread has been automatically locked because it has not had recent activity.

Please open a new issue for related bugs and link to relevant comments in this thread.