From c9c26d02f6c2e875381a9eb93b774857658b2d31 Mon Sep 17 00:00:00 2001 From: Braks <78412429+bcakmakoglu@users.noreply.github.com> Date: Sun, 31 Aug 2025 13:42:04 +0200 Subject: [PATCH] fix(core): skip resize handler if node not visible (#1936) * fix(core): skip resize handler if node not visible Signed-off-by: braks <78412429+bcakmakoglu@users.noreply.github.com> * chore(changeset): add Signed-off-by: braks <78412429+bcakmakoglu@users.noreply.github.com> --------- Signed-off-by: braks <78412429+bcakmakoglu@users.noreply.github.com> --- .changeset/stupid-bags-itch.md | 5 +++++ packages/core/src/composables/useResizeHandler.ts | 14 ++++++-------- 2 files changed, 11 insertions(+), 8 deletions(-) create mode 100644 .changeset/stupid-bags-itch.md diff --git a/.changeset/stupid-bags-itch.md b/.changeset/stupid-bags-itch.md new file mode 100644 index 00000000..b72e4d4e --- /dev/null +++ b/.changeset/stupid-bags-itch.md @@ -0,0 +1,5 @@ +--- +"@vue-flow/core": patch +--- + +Skip resize handler if node is not visible. diff --git a/packages/core/src/composables/useResizeHandler.ts b/packages/core/src/composables/useResizeHandler.ts index b6c6fc0d..a6a165e2 100644 --- a/packages/core/src/composables/useResizeHandler.ts +++ b/packages/core/src/composables/useResizeHandler.ts @@ -15,14 +15,12 @@ export function useResizeHandler(viewportEl: Ref): void { let resizeObserver: ResizeObserver onMounted(() => { - const rendererNode = viewportEl.value - const updateDimensions = () => { - if (!rendererNode) { + if (!viewportEl.value || !(viewportEl.value.checkVisibility() ?? true)) { return } - const size = getDimensions(rendererNode) + const size = getDimensions(viewportEl.value) if (size.width === 0 || size.height === 0) { emits.error(new VueFlowError(ErrorCode.MISSING_VIEWPORT_DIMENSIONS)) @@ -34,16 +32,16 @@ export function useResizeHandler(viewportEl: Ref): void { updateDimensions() window.addEventListener('resize', updateDimensions) - if (rendererNode) { + if (viewportEl.value) { resizeObserver = new ResizeObserver(() => updateDimensions()) - resizeObserver.observe(rendererNode) + resizeObserver.observe(viewportEl.value) } onBeforeUnmount(() => { window.removeEventListener('resize', updateDimensions) - if (resizeObserver && rendererNode) { - resizeObserver.unobserve(rendererNode!) + if (resizeObserver && viewportEl.value) { + resizeObserver.unobserve(viewportEl.value!) } }) })