From a6f7678c0f2930c82b7d9eb57ff1359c8226f674 Mon Sep 17 00:00:00 2001
From: Braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Sat, 24 Jul 2021 18:27:40 +0200
Subject: [PATCH] refactor: resize handler and zoom pan helper to watch until
 refs are resolved

---
 src/hooks/useResizeHandler.ts | 21 ++++++++++-----------
 src/hooks/useZoomPanHelper.ts |  7 ++++---
 2 files changed, 14 insertions(+), 14 deletions(-)

diff --git a/src/hooks/useResizeHandler.ts b/src/hooks/useResizeHandler.ts
index 4b1034cb..8790bf74 100644
--- a/src/hooks/useResizeHandler.ts
+++ b/src/hooks/useResizeHandler.ts
@@ -1,15 +1,14 @@
 import { getDimensions } from '../utils';
 import { Dimensions } from '../types';
+import { MaybeRef, unrefElement, until, useEventListener, useResizeObserver } from '@vueuse/core';
 
-export default (rendererNode: HTMLDivElement, updateSize: (size: Dimensions) => any) => {
-  let resizeObserver: ResizeObserver;
-
+export default (rendererNode: MaybeRef<HTMLDivElement>, updateSize: (size: Dimensions) => any) => {
   const updateDimensions = () => {
     if (!rendererNode) {
       return;
     }
 
-    const size = getDimensions(rendererNode);
+    const size = getDimensions(unrefElement(rendererNode));
 
     if (size.height === 0 || size.width === 0) {
       console.log('The revue Flow parent container needs a width and a height to render the graph.');
@@ -18,11 +17,11 @@ export default (rendererNode: HTMLDivElement, updateSize: (size: Dimensions) =>
     updateSize(size);
   };
 
-  updateDimensions();
-  window.onresize = updateDimensions;
-
-  if (rendererNode) {
-    resizeObserver = new ResizeObserver(() => updateDimensions());
-    resizeObserver.observe(rendererNode);
-  }
+  until(rendererNode)
+    .toBeTruthy()
+    .then(() => {
+      updateDimensions();
+      useEventListener(window, 'resize', updateDimensions);
+      useResizeObserver(unrefElement(rendererNode), () => updateDimensions());
+    });
 };
diff --git a/src/hooks/useZoomPanHelper.ts b/src/hooks/useZoomPanHelper.ts
index 95bec9fa..1a675239 100644
--- a/src/hooks/useZoomPanHelper.ts
+++ b/src/hooks/useZoomPanHelper.ts
@@ -1,14 +1,15 @@
 import { zoomIdentity } from 'd3-zoom';
-import { computed } from 'vue';
-import { createEventHook, until } from '@vueuse/core';
+import { computed, inject } from 'vue';
+import { createEventHook, EventHookOn, until } from '@vueuse/core';
 import { Selection, ZoomBehavior } from 'd3';
 import { getRectOfNodes, pointToRendererPoint, getTransformForBounds } from '../utils/graph';
 import { FitViewParams, FlowTransform, ZoomPanHelperFunctions, Rect, XYPosition, RevueFlowStore } from '../types';
 
 const DEFAULT_PADDING = 0.1;
 
-const useZoomPanHelper = (store: RevueFlowStore) => {
+const useZoomPanHelper = (): { onReady: EventHookOn<ZoomPanHelperFunctions> } => {
   const zoomPanHelperEvent = createEventHook<ZoomPanHelperFunctions>();
+  const store = inject<RevueFlowStore>('store')!;
   const d3Zoom = computed(() => store.d3Zoom);
   const d3Selection = computed(() => store.d3Selection);