[Bug Report]: resize改变画布尺寸未完全生效
- Dominant language
- TypeScript
- Stars
- 11.7k
- Forks
- 1.4k
- PR merge metrics
- No merged PRs in 30d
Description
### 发生了什么?
`new LogicFlow() `实例化后,调用`resize(newWidth, newHeight)`后,画布实际占用的宽高还是调用构造函数时的`width`、`height`参数。只改变了`class="lf-graph"`元素的`width`、`height`,其上层的div元素仍然保持着构造函数中的`width`、`height`值。
初始化状态:
调用resize后的状态:
可复现在线地址:[https://tinysimple.github.io/LogicFlowBugShow/](https://tinysimple.github.io/LogicFlowBugShow/)。
源码地址:[https://github.com/tinysimple/LogicFlowBugShow](https://github.com/tinysimple/LogicFlowBugShow)
【切换左侧的画布大小后,中间画布区域会变化,但其因占据着初始化的宽高,导致画布容器无法居中显示。可审查元素进行查看】
阅读源码在`LogicFlow.js`中发现,`class="lf-graph"`上层的div元素在`LogicFlow.prototype.initContainer`中进行了创建并设置width、height,在调用`resize`时,未对该元素节点进行相关的width、height设置,从而导致的该问题。
基于目前的这个现象,是否可以在`LogicFlow.prototype.resize` 函数中增加对`this.container`的`style.width/height`的修改。
我在[https://github.com/tinysimple/LogicFlowBugShow/tree/fix-resize](https://github.com/tinysimple/LogicFlowBugShow/tree/fix-resize)仓库中尝试对该源码中的代码片段进行了修改,修改后的可在线预览网站为:[https://tinysimple.github.io/LogicFlowFixPage/](https://tinysimple.github.io/LogicFlowFixPage/),改变大小后,画布尺寸能完全修改为对应width、height。
如果有需要,我可以fork源码后提交PR。感谢作者。
### logicflow/core版本
2.2.3
### logicflow/extension版本
2.2.3
### logicflow/engine版本
_No response_
### 浏览器&环境
Chrome, Firefox
Contributor guide
Assessment
This issue has not been assessed yet.