autoResize时，祖先容器display隐藏后再显示，画布会消失

[fanmingfei]

Describe the bug

rt

Your Example Website or App

https://codesandbox.io/s/elegant-black-vtk4k5?file=/src/app.tsx

Steps to Reproduce the Bug or Issue

打开页面，点击左上角按钮，多次

Expected behavior

希望正常

Screenshots or Videos

No response

Platform

• OS: [e.g. macOS, Windows, Linux]
• Browser: [e.g. Chrome, Safari, Firefox]
• Version: [e.g. 91.1]

Additional context

No response

[fanmingfei]

https://github.com/antvis/X6/blob/master/packages/x6/src/graph/size.ts#L27

这里使用了当前元素的offsetWidth，设置给了style的width，是可以的，但是offsetHeight不起作用。这个行为很迷。

[fanmingfei]

如果父节点设置 flex-direction: column。width变化不会autoresize

[devchen13]

如果父节点设置 flex-direction: column。width变化不会autoresize

设置祖先容器的diplay:block|none时会复现这个bug，关闭graph的autoResize可以解决这个问题，开启后切换回导致scroll的高度被设置成0，

[devchen13]

如果父节点设置 flex-direction: column。width变化不会autoresize

或者用visiblity属性也能临时解决

[alienzhangyw]

我在antd的Tabs中使用X6也遇到了这个问题，Graph的ref都设成了”width:100%;height:100%“，首次加载时默认未激活的TabPane都是display:none，导致这些TabPane里面的画布都是height:0,width:0，而且切换标签页后，原先正常的画布也变成这样了。如何在切换标签页时重置Graph的大小？TabPane的forceRender不起作用。

[alienzhangyw]

我在antd的Tabs中使用X6也遇到了这个问题，Graph的ref都设成了”width:100%;height:100%“，首次加载时默认未激活的TabPane都是display:none，导致这些TabPane里面的画布都是height:0,width:0，而且切换标签页后，原先正常的画布也变成这样了。如何在切换标签页时重置Graph的大小？TabPane的forceRender不起作用。

画布容器强制“width: 100% important!, height: 100% important!”，关闭autoResize可解决

[fanmingfei]

我在antd的Tabs中使用X6也遇到了这个问题，Graph的ref都设成了”width:100%;height:100%“，首次加载时默认未激活的TabPane都是display:none，导致这些TabPane里面的画布都是height:0,width:0，而且切换标签页后，原先正常的画布也变成这样了。如何在切换标签页时重置Graph的大小？TabPane的forceRender不起作用。

画布容器强制“width: 100% important!, height: 100% important!”，关闭autoResize可解决

我直接visibility:hidden了

[lexoring]

I have the same problem, version 2.1.5

[NewByVector]

2.x 版本中已经修复了该问题。

[fanmingfei]

可惜 我现在还在用1.x

[NewByVector]

@fanmingfei 升级升级💕

[shen-lan]

@NewByVector

2.x 版本中已经修复了该问题。

https://github.com/antvis/X6/issues/2484#issuecomment-1410065284

???????

[shen-lan]

[shen-lan]

npm 最新版本好像才 1.17.5 ?

[OlyLis1005]

在componentDidMount里设置setTimeout里执行graph的初始化可以解决

componentDidMount() {
    // tab隐藏时候初始化会导致画布不显示，延迟执行初始化
    setTimeout(() => {
        this.init()
    })
}