refactor: resize handler and zoom pan helper to watch until refs are resolved

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());
+    });
 };

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);