Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
fanmingfei opened this issue Aug 9, 2022 · 16 comments
Closed
Labels
type: bug 缺陷 Defects and unexpected behaviors

Comments

@fanmingfei
Copy link

fanmingfei commented Aug 9, 2022

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
Copy link
Author

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

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

@fanmingfei
Copy link
Author

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

@devchen13
Copy link

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

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

@devchen13
Copy link

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

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

@NewByVector NewByVector added the type: bug 缺陷 Defects and unexpected behaviors label Sep 4, 2022
@alienzhangyw
Copy link

alienzhangyw commented Nov 4, 2022

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

@alienzhangyw
Copy link

我在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
Copy link
Author

我在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
Copy link

I have the same problem, version 2.1.5

@NewByVector
Copy link
Contributor

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

@fanmingfei
Copy link
Author

可惜 我现在还在用1.x

@NewByVector
Copy link
Contributor

@fanmingfei 升级升级💕

@shen-lan
Copy link

@NewByVector

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

#2484 (comment)

???????

@shen-lan
Copy link

image

@shen-lan
Copy link

npm 最新版本好像才 1.17.5 ?

@OlyLis1005
Copy link

OlyLis1005 commented May 18, 2023

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

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

@x6-bot
Copy link
Contributor

x6-bot bot commented May 18, 2024

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.

@x6-bot x6-bot bot locked as resolved and limited conversation to collaborators May 18, 2024
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
type: bug 缺陷 Defects and unexpected behaviors
Projects
None yet
Development

No branches or pull requests

7 participants