chore(store-updater): cleanup

packages/core/src/components/StoreUpdater/index.tsx

@@ -3,7 +3,7 @@ import { StoreApi } from 'zustand';
 import shallow from 'zustand/shallow';
 
 import { useStore, useStoreApi } from '../../hooks/useStore';
-import { Node, Edge, ReactFlowState, CoordinateExtent, ReactFlowProps } from '../../types';
+import { Node, Edge, ReactFlowState, CoordinateExtent, ReactFlowProps, ReactFlowStore } from '../../types';
 
 type StoreUpdaterProps = Pick<
   ReactFlowProps,
@@ -61,10 +61,14 @@ function useStoreUpdater<T>(value: T | undefined, setStoreState: (param: T) => v
   }, [value]);
 }
 
-function useDirectStoreUpdater(key: keyof ReactFlowState, value: any, setState: StoreApi<ReactFlowState>['setState']) {
+// updates with values in store that don't have a dedicated setter function
+function useDirectStoreUpdater(
+  key: keyof ReactFlowStore,
+  value: unknown,
+  setState: StoreApi<ReactFlowState>['setState']
+) {
   useEffect(() => {
     if (typeof value !== 'undefined') {
-      // @ts-ignore
       setState({ [key]: value });
     }
   }, [value]);
@@ -153,8 +157,6 @@ const StoreUpdater = ({
 
   useStoreUpdater<Node[]>(nodes, setNodes);
   useStoreUpdater<Edge[]>(edges, setEdges);
-  useStoreUpdater<Node[]>(defaultNodes, setNodes);
-  useStoreUpdater<Edge[]>(defaultEdges, setEdges);
   useStoreUpdater<number>(minZoom, setMinZoom);
   useStoreUpdater<number>(maxZoom, setMaxZoom);
   useStoreUpdater<CoordinateExtent>(translateExtent, setTranslateExtent);

packages/core/src/container/ZoomPane/index.tsx

@@ -83,7 +83,7 @@ const ZoomPane = ({
         d3ZoomHandler: selection.on('wheel.zoom'),
         // we need to pass transform because zoom handler is not registered when we set the initial transform
         transform: [clampedX, clampedY, clampedZoom],
-        domNode: selection.node()?.closest('.react-flow') as HTMLElement,
+        domNode: zoomPane.current.closest('.react-flow') as HTMLDivElement,
       });
     }
   }, []);

packages/core/src/hooks/useResizeHandler.ts

@@ -29,7 +29,7 @@ function useResizeHandler(rendererNode: MutableRefObject<HTMLDivElement | null>)
     };
 
     updateDimensions();
-    window.onresize = updateDimensions;
+    window.addEventListener('resize', updateDimensions);
 
     if (rendererNode.current) {
       resizeObserver = new ResizeObserver(() => updateDimensions());
@@ -37,7 +37,7 @@ function useResizeHandler(rendererNode: MutableRefObject<HTMLDivElement | null>)
     }
 
     return () => {
-      window.onresize = null;
+      window.removeEventListener('resize', updateDimensions);
 
       if (resizeObserver && rendererNode.current) {
         resizeObserver.unobserve(rendererNode.current!);

packages/core/src/types/general.ts

@@ -135,7 +135,7 @@ export type ReactFlowStore = {
   onEdgesChange: OnEdgesChange | null;
   hasDefaultNodes: boolean;
   hasDefaultEdges: boolean;
-  domNode: HTMLElement | null;
+  domNode: HTMLDivElement | null;
 
   d3Zoom: ZoomBehavior<Element, unknown> | null;
   d3Selection: D3Selection<Element, unknown, null, undefined> | null;