diff --git a/packages/core/src/components/StoreUpdater/index.tsx b/packages/core/src/components/StoreUpdater/index.tsx index 43ae7ea6..a5bc61e7 100644 --- a/packages/core/src/components/StoreUpdater/index.tsx +++ b/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(value: T | undefined, setStoreState: (param: T) => v }, [value]); } -function useDirectStoreUpdater(key: keyof ReactFlowState, value: any, setState: StoreApi['setState']) { +// updates with values in store that don't have a dedicated setter function +function useDirectStoreUpdater( + key: keyof ReactFlowStore, + value: unknown, + setState: StoreApi['setState'] +) { useEffect(() => { if (typeof value !== 'undefined') { - // @ts-ignore setState({ [key]: value }); } }, [value]); @@ -153,8 +157,6 @@ const StoreUpdater = ({ useStoreUpdater(nodes, setNodes); useStoreUpdater(edges, setEdges); - useStoreUpdater(defaultNodes, setNodes); - useStoreUpdater(defaultEdges, setEdges); useStoreUpdater(minZoom, setMinZoom); useStoreUpdater(maxZoom, setMaxZoom); useStoreUpdater(translateExtent, setTranslateExtent); diff --git a/packages/core/src/container/ZoomPane/index.tsx b/packages/core/src/container/ZoomPane/index.tsx index 3f5be28e..e700c731 100644 --- a/packages/core/src/container/ZoomPane/index.tsx +++ b/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, }); } }, []); diff --git a/packages/core/src/hooks/useResizeHandler.ts b/packages/core/src/hooks/useResizeHandler.ts index 7d148db9..adbe3dac 100644 --- a/packages/core/src/hooks/useResizeHandler.ts +++ b/packages/core/src/hooks/useResizeHandler.ts @@ -29,7 +29,7 @@ function useResizeHandler(rendererNode: MutableRefObject) }; updateDimensions(); - window.onresize = updateDimensions; + window.addEventListener('resize', updateDimensions); if (rendererNode.current) { resizeObserver = new ResizeObserver(() => updateDimensions()); @@ -37,7 +37,7 @@ function useResizeHandler(rendererNode: MutableRefObject) } return () => { - window.onresize = null; + window.removeEventListener('resize', updateDimensions); if (resizeObserver && rendererNode.current) { resizeObserver.unobserve(rendererNode.current!); diff --git a/packages/core/src/types/general.ts b/packages/core/src/types/general.ts index d17fc323..3615b05e 100644 --- a/packages/core/src/types/general.ts +++ b/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 | null; d3Selection: D3Selection | null;