diff --git a/example/src/index.tsx b/example/src/index.tsx index 45aa0a16..56026fb0 100644 --- a/example/src/index.tsx +++ b/example/src/index.tsx @@ -68,7 +68,7 @@ const Header = withRouter(({ history, location }) => { }); ReactDOM.render( - +
{routes.map((route) => ( diff --git a/src/components/StoreUpdater/index.tsx b/src/components/StoreUpdater/index.tsx index 894e3335..aa986471 100644 --- 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 index 54c718ad..286b3a49 100644 --- 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((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((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 index 5cafafef..b8dc5c15 100644 --- 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;