Skip to content

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

@tinysimple

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
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions