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

[Bug Report]: 变更窗口大小后添加节点,小地图显示异常 #2017

Closed
EdwinOlders11 opened this issue Dec 17, 2024 · 2 comments · Fixed by #2021
Closed

[Bug Report]: 变更窗口大小后添加节点,小地图显示异常 #2017

EdwinOlders11 opened this issue Dec 17, 2024 · 2 comments · Fixed by #2021
Labels
bug Something isn't working

Comments

@EdwinOlders11
Copy link

EdwinOlders11 commented Dec 17, 2024

发生了什么?

变更窗口大小后添加节点,小地图显示异常,
复现:https://codesandbox.io/p/sandbox/debugdemo-shvsw2
拖动窗口大小后再点击add node,小地图显示异常,回退到2.0.9版本则没有此问题

顺便想问一下lf支持的浏览器最低版本?在官网文档和git上都没有找到..最近有个项目需要兼容win7,我自己测试chrome109还能用,到107就不行了...还好109就是win7上支持的最高的版本

logicflow/core版本

2.0.10

logicflow/extension版本

2.0.14

logicflow/engine版本

No response

浏览器&环境

Chrome, NodeJS

@EdwinOlders11 EdwinOlders11 added the bug Something isn't working label Dec 17, 2024
@ChangeSuger
Copy link
Collaborator

这个和两个版本之间新增的根据窗口变化的同步画布大小的改动有关,因为小地图的缩放有一部分是基于父元素的 transform 属性实现的,因此,小地图中 LF 画布的父元素的真实高宽是远大于 getBoundingClientRect() 获取的父元素高宽的,这导致了现在这个问题。

修复方法的话就是强制样式覆盖,只需要添加如下样式就行:

.lf-mini-map .lf-graph {
  width: 100% !important;
  height: 100% !important;
}

不过可能该改动上线可能需要等新版本的发布,需要一段时间,在此之前可以先通过手动添加这个全局样式暂时解决这个问题~

@EdwinOlders11
Copy link
Author

这个和两个版本之间新增的根据窗口变化的同步画布大小的改动有关,因为小地图的缩放有一部分是基于父元素的 transform 属性实现的,因此,小地图中 LF 画布的父元素的真实高宽是远大于 getBoundingClientRect() 获取的父元素高宽的,这导致了现在这个问题。

修复方法的话就是强制样式覆盖,只需要添加如下样式就行:

.lf-mini-map .lf-graph {
  width: 100% !important;
  height: 100% !important;
}

不过可能该改动上线可能需要等新版本的发布,需要一段时间,在此之前可以先通过手动添加这个全局样式暂时解决这个问题~

非常感谢!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working
Projects
None yet
Development

Successfully merging a pull request may close this issue.

2 participants