Skip to content

Commit 7f3dcb8

Browse files
author
wangyiteng_v
committed
fix: (GraphModel)添加DOM存在性和可见性检查防止resize错误
1 parent 027c2aa commit 7f3dcb8

File tree

1 file changed

+29
-9
lines changed

1 file changed

+29
-9
lines changed

packages/core/src/model/GraphModel.ts

Lines changed: 29 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -206,6 +206,9 @@ export class GraphModel {
206206
((entries) => {
207207
for (const entry of entries) {
208208
if (entry.target === this.rootEl) {
209+
// 检查元素是否仍在DOM中
210+
const isElementInDOM = document.body.contains(this.rootEl)
211+
if (!isElementInDOM) return
209212
this.resize()
210213
this.eventCenter.emit('graph:resize', {
211214
target: this.rootEl,
@@ -1601,15 +1604,32 @@ export class GraphModel {
16011604
* 重新设置画布的宽高
16021605
*/
16031606
@action resize(width?: number, height?: number): void {
1604-
this.width = width ?? this.rootEl.getBoundingClientRect().width
1605-
this.isContainerWidth = isNil(width)
1606-
this.height = height ?? this.rootEl.getBoundingClientRect().height
1607-
this.isContainerHeight = isNil(height)
1608-
1609-
if (!this.width || !this.height) {
1610-
console.warn(
1611-
'渲染画布的时候无法获取画布宽高,请确认在container已挂载到DOM。@see https://github.com/didi/LogicFlow/issues/675',
1612-
)
1607+
// 检查当前实例是否已被销毁或rootEl不存在
1608+
if (!this.rootEl) return
1609+
1610+
// 检查元素是否仍在DOM中
1611+
const isElementInDOM = document.body.contains(this.rootEl)
1612+
if (!isElementInDOM) return
1613+
1614+
// 检查元素是否可见
1615+
const isVisible = this.rootEl.offsetParent !== null
1616+
if (!isVisible) return
1617+
1618+
try {
1619+
this.width = width ?? this.rootEl.getBoundingClientRect().width
1620+
this.isContainerWidth = isNil(width)
1621+
this.height = height ?? this.rootEl.getBoundingClientRect().height
1622+
this.isContainerHeight = isNil(height)
1623+
1624+
// 只有在元素可见且应该有宽高的情况下才显示警告
1625+
if (isVisible && (!this.width || !this.height)) {
1626+
console.warn(
1627+
'渲染画布的时候无法获取画布宽高,请确认在container已挂载到DOM。@see https://github.com/didi/LogicFlow/issues/675',
1628+
)
1629+
}
1630+
} catch (error) {
1631+
// 捕获可能的DOM操作错误
1632+
console.warn('获取画布宽高时发生错误:', error)
16131633
}
16141634
}
16151635

0 commit comments

Comments
 (0)