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>

Author: bcakmakoglu

.changeset/stupid-bags-itch.md

@@ -0,0 +1,5 @@
+---
+"@vue-flow/core": patch
+---
+
+Skip resize handler if node is not visible.

packages/core/src/composables/useResizeHandler.ts

@@ -15,14 +15,12 @@ export function useResizeHandler(viewportEl: Ref<HTMLDivElement | null>): 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<HTMLDivElement | null>): 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!)
  }
  })
  })