Skip to content

[Bug Report]: resize改变画布尺寸未完全生效 #2411

Description

@tinysimple

发生了什么?

new LogicFlow() 实例化后,调用resize(newWidth, newHeight)后,画布实际占用的宽高还是调用构造函数时的widthheight参数。只改变了class="lf-graph"元素的widthheight,其上层的div元素仍然保持着构造函数中的widthheight值。

初始化状态:

Image

调用resize后的状态:

Image

可复现在线地址:https://tinysimple.github.io/LogicFlowBugShow/
源码地址:https://github.com/tinysimple/LogicFlowBugShow
【切换左侧的画布大小后,中间画布区域会变化,但其因占据着初始化的宽高,导致画布容器无法居中显示。可审查元素进行查看】

阅读源码在LogicFlow.js中发现,class="lf-graph"上层的div元素在LogicFlow.prototype.initContainer中进行了创建并设置width、height,在调用resize时,未对该元素节点进行相关的width、height设置,从而导致的该问题。

基于目前的这个现象,是否可以在LogicFlow.prototype.resize 函数中增加对this.containerstyle.width/height的修改。
我在https://github.com/tinysimple/LogicFlowBugShow/tree/fix-resize仓库中尝试对该源码中的代码片段进行了修改,修改后的可在线预览网站为: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

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions