refactor(store): reset on unmount

xyflow · Nov 23, 2021 · 2962897 · 2962897
1 parent f775cf2
commit 2962897
Show file tree

Hide file tree

Showing 4 changed files with 63 additions and 44 deletions.
diff --git a/example/src/index.tsx b/example/src/index.tsx
@@ -68,7 +68,7 @@ const Header = withRouter(({ history, location }) => {
 });
 
 ReactDOM.render(
-  <Router forceRefresh={true}>
+  <Router>
     <Header />
     <Switch>
       {routes.map((route) => (

diff --git a/src/components/StoreUpdater/index.tsx b/src/components/StoreUpdater/index.tsx
@@ -57,6 +57,7 @@ const selector = (s: ReactFlowState) => ({
   setConnectionMode: s.setConnectionMode,
   setOnNodesChange: s.setOnNodesChange,
   setOnEdgesChange: s.setOnEdgesChange,
+  reset: s.reset,
 });
 
 const StoreUpdater = ({
@@ -98,15 +99,22 @@ const StoreUpdater = ({
     setOnNodesChange,
     setOnEdgesChange,
     setConnectionMode,
+    reset,
   } = useStore(selector, shallow);
 
+  useEffect(() => {
+    return () => {
+      reset();
+    };
+  }, [reset]);
+
   useEffect(() => {
     setNodes(nodes);
   }, [nodes]);
 
   useEffect(() => {
-    setEdges(edges, nodes);
-  }, [edges, nodes]);
+    setEdges(edges);
+  }, [edges]);
 
   useEffect(() => {
     if (onConnect) {

diff --git a/src/store/index.ts b/src/store/index.ts
@@ -25,6 +25,7 @@ import {
   Transform,
   Dimensions,
   XYPosition,
+  ReactFlowStore,
 } from '../types';
 import { isNode, isEdge, getRectOfNodes, getNodesInside, getConnectedEdges } from '../utils/graph';
 import { getHandleBounds } from '../components/Nodes/utils';
@@ -37,51 +38,54 @@ const infiniteExtent: CoordinateExtent = [
   [Number.POSITIVE_INFINITY, Number.POSITIVE_INFINITY],
 ];
 
-const createStore = () =>
-  create<ReactFlowState>((set, get) => ({
+const initialState: ReactFlowStore = {
+  width: 0,
+  height: 0,
+  transform: [0, 0, 1],
+  nodeInternals: new Map(),
+  edges: [],
+  onNodesChange: null,
+  onEdgesChange: null,
+  selectedNodesBbox: { x: 0, y: 0, width: 0, height: 0 },
+  d3Zoom: null,
+  d3Selection: null,
+  d3ZoomHandler: undefined,
+  minZoom: 0.5,
+  maxZoom: 2,
+  translateExtent: infiniteExtent,
+  nodeExtent: infiniteExtent,
+  nodesSelectionActive: false,
+  selectionActive: false,
+  userSelectionRect: {
+    startX: 0,
+    startY: 0,
+    x: 0,
+    y: 0,
     width: 0,
     height: 0,
-    transform: [0, 0, 1],
-    edges: [],
-    onNodesChange: null,
-    onEdgesChange: null,
-    selectedNodesBbox: { x: 0, y: 0, width: 0, height: 0 },
-    d3Zoom: null,
-    d3Selection: null,
-    d3ZoomHandler: undefined,
-    minZoom: 0.5,
-    maxZoom: 2,
-    translateExtent: infiniteExtent,
-    nodeExtent: infiniteExtent,
-    nodesSelectionActive: false,
-    selectionActive: false,
-    userSelectionRect: {
-      startX: 0,
-      startY: 0,
-      x: 0,
-      y: 0,
-      width: 0,
-      height: 0,
-      draw: false,
-    },
-    connectionNodeId: null,
-    connectionHandleId: null,
-    connectionHandleType: 'source',
-    connectionPosition: { x: 0, y: 0 },
-    connectionMode: ConnectionMode.Strict,
+    draw: false,
+  },
+  connectionNodeId: null,
+  connectionHandleId: null,
+  connectionHandleType: 'source',
+  connectionPosition: { x: 0, y: 0 },
+  connectionMode: ConnectionMode.Strict,
 
-    snapGrid: [15, 15],
-    snapToGrid: false,
+  snapGrid: [15, 15],
+  snapToGrid: false,
 
-    nodesDraggable: true,
-    nodesConnectable: true,
-    elementsSelectable: true,
+  nodesDraggable: true,
+  nodesConnectable: true,
+  elementsSelectable: true,
 
-    multiSelectionActive: false,
+  multiSelectionActive: false,
 
-    reactFlowVersion: typeof __REACT_FLOW_VERSION__ !== 'undefined' ? __REACT_FLOW_VERSION__ : '-',
+  reactFlowVersion: typeof __REACT_FLOW_VERSION__ !== 'undefined' ? __REACT_FLOW_VERSION__ : '-',
+};
 
-    nodeInternals: new Map(),
+const createStore = () =>
+  create<ReactFlowState>((set, get) => ({
+    ...initialState,
 
     setNodes: (nodes: Node[]) => {
       const nodeInternals = createNodeInternals(nodes, get().nodeInternals);
@@ -366,6 +370,7 @@ const createStore = () =>
     setConnectionMode: (connectionMode: ConnectionMode) => set({ connectionMode }),
     setOnNodesChange: (onNodesChange: OnNodesChange) => set({ onNodesChange }),
     setOnEdgesChange: (onEdgesChange: OnEdgesChange) => set({ onEdgesChange }),
+    reset: () => set({ ...initialState }),
   }));
 
 export { Provider, useStore, createStore, useStoreApi };
diff --git a/src/types/general.ts b/src/types/general.ts
@@ -130,7 +130,7 @@ export type InitD3ZoomPayload = {
   transform: Transform;
 };
 
-export interface ReactFlowState {
+export type ReactFlowStore = {
   width: number;
   height: number;
   transform: Transform;
@@ -169,9 +169,11 @@ export interface ReactFlowState {
   multiSelectionActive: boolean;
 
   reactFlowVersion: string;
+};
 
+export type ReactFlowActions = {
   setNodes: (nodes: Node[]) => void;
-  setEdges: (edges: Edge[], nodes: Node[]) => void;
+  setEdges: (edges: Edge[]) => void;
   updateNodeDimensions: (updates: NodeDimensionUpdate[]) => void;
   updateNodePosition: (update: NodeDiffUpdate) => void;
   setUserSelection: (mousePos: XYPosition) => void;
@@ -209,7 +211,11 @@ export interface ReactFlowState {
   onConnectStart?: OnConnectStart;
   onConnectStop?: OnConnectStop;
   onConnectEnd?: OnConnectEnd;
-}
+
+  reset: () => void;
+};
+
+export type ReactFlowState = ReactFlowStore & ReactFlowActions;
 
 export type UpdateNodeInternals = (nodeId: string) => void;