diff --git a/example/src/Provider/Sidebar.js b/example/src/Provider/Sidebar.js
index 0b2c5f24..a0e11aeb 100644
--- a/example/src/Provider/Sidebar.js
+++ b/example/src/Provider/Sidebar.js
@@ -1,10 +1,11 @@
import React from 'react';
-import { useStoreState, useStoreActions } from 'react-flow-renderer';
+import { useStoreState, useStoreActions, isNode } from 'react-flow-renderer';
const Sidebar = () => {
- const nodes = useStoreState((store) => store.nodes);
+ const elements = useStoreState((store) => store.elements);
const transform = useStoreState((store) => store.transform);
const setSelectedElements = useStoreActions((actions) => actions.setSelectedElements);
+ const nodes = elements.filter(isNode);
const selectAll = () => {
setSelectedElements(nodes.map((node) => ({ id: node.id, type: node.type })));
diff --git a/src/container/NodeRenderer/index.tsx b/src/container/NodeRenderer/index.tsx
index 4bac9488..e7be86fb 100644
--- a/src/container/NodeRenderer/index.tsx
+++ b/src/container/NodeRenderer/index.tsx
@@ -52,7 +52,7 @@ const NodeRenderer = (props: NodeRendererProps) => {
nodeElement: entry.target as HTMLDivElement,
}));
- batchUpdateNodeDimensions({ updates });
+ batchUpdateNodeDimensions(updates);
});
}, []);
diff --git a/src/container/ReactFlow/Wrapper.tsx b/src/container/ReactFlow/Wrapper.tsx
index f57f3a50..51480339 100644
--- a/src/container/ReactFlow/Wrapper.tsx
+++ b/src/container/ReactFlow/Wrapper.tsx
@@ -1,20 +1,17 @@
-import React, { FC } from 'react';
-import { Provider } from 'react-redux';
+import React, { FC, useContext } from 'react';
+import { Provider, ReactReduxContext } from 'react-redux';
import store from '../../store';
-// import { useStore } from '../../store/hooks';
const Wrapper: FC = ({ children }) => {
- // const reactFlowStore = useStore();
- // const isWrapepdWithReactFlowProvider = reactFlowStore?.getState()?.reactFlowVersion;
+ const contextValue = useContext(ReactReduxContext);
+ const isWrappedWithReactFlowProvider = contextValue?.store?.getState()?.reactFlowVersion;
- // console.log(isWrapepdWithReactFlowProvider);
-
- // if (isWrapepdWithReactFlowProvider) {
- // // we need to wrap it with a fragment because t's not allowed for children to be a ReactNode
- // // https://github.com/DefinitelyTyped/DefinitelyTyped/issues/18051
- // return <>{children}>;
- // }
+ if (isWrappedWithReactFlowProvider) {
+ // we need to wrap it with a fragment because t's not allowed for children to be a ReactNode
+ // https://github.com/DefinitelyTyped/DefinitelyTyped/issues/18051
+ return <>{children}>;
+ }
return {children};
};
diff --git a/src/hooks/useZoomPanHelper.ts b/src/hooks/useZoomPanHelper.ts
index 079494f0..c4c26329 100644
--- a/src/hooks/useZoomPanHelper.ts
+++ b/src/hooks/useZoomPanHelper.ts
@@ -3,7 +3,7 @@ import { zoomIdentity } from 'd3-zoom';
import { useStoreState, useStore } from '../store/hooks';
import { clamp } from '../utils';
-import { getRectOfNodes } from '../utils/graph';
+import { getRectOfNodes, isNode } from '../utils/graph';
import { FitViewParams, FlowTransform, ZoomPanHelperFunctions, Rect, Transform } from '../types';
const initialZoomPanHelper: ZoomPanHelperFunctions = {
@@ -54,7 +54,8 @@ const usePanZoomHelper = (): ZoomPanHelperFunctions => {
d3Zoom.transform(d3Selection, nextTransform);
},
fitView: (options: FitViewParams = { padding: 0.1 }) => {
- const { nodes, width, height, minZoom, maxZoom } = store.getState();
+ const { elements, width, height, minZoom, maxZoom } = store.getState();
+ const nodes = elements.filter(isNode);
if (!nodes.length) {
return;
diff --git a/src/store/action-types.ts b/src/store/action-types.ts
index d1562cb9..130b528e 100644
--- a/src/store/action-types.ts
+++ b/src/store/action-types.ts
@@ -158,9 +158,7 @@ interface UpdateTransform {
interface UpdateSize {
type: typeof UPDATE_SIZE;
- payload: {
- size: Dimensions;
- };
+ payload: Dimensions;
}
interface InitD3Zoom {
diff --git a/src/store/actions.ts b/src/store/actions.ts
index 55b56341..69bb7075 100644
--- a/src/store/actions.ts
+++ b/src/store/actions.ts
@@ -161,10 +161,8 @@ export const updateTransform = (transform: Transform): ActionTypes => ({
export const updateSize = (size: Dimensions): ActionTypes => ({
type: UPDATE_SIZE,
payload: {
- size: {
- width: size.width || 500,
- height: size.height || 500,
- },
+ width: size.width || 500,
+ height: size.height || 500,
},
});
@@ -241,3 +239,39 @@ export const setConnectionMode = (connectionMode: ConnectionMode): ActionTypes =
type: SET_CONNECTION_MODE,
payload: { connectionMode },
});
+
+export const actions = {
+ setOnConnect,
+ setOnConnectStart,
+ setOnConnectStop,
+ setOnConnectEnd,
+ setElements,
+ batchUpdateNodeDimensions,
+ updateNodeDimensions,
+ updateNodePos,
+ updateNodePosDiff,
+ setUserSelection,
+ updateUserSelection,
+ unsetUserSelection,
+ setSelection,
+ unsetNodesSelection,
+ resetSelectedElements,
+ setSelectedElements,
+ addSelectedElements,
+ updateTransform,
+ updateSize,
+ initD3Zoom,
+ setMinZoom,
+ setMaxZoom,
+ setTranslateExtent,
+ setConnectionPosition,
+ setConnectionNodeId,
+ setSnapToGrid,
+ setSnapGrid,
+ setInteractive,
+ setNodesDraggable,
+ setNodesConnectable,
+ setElementsSelectable,
+ setMultiSelectionActive,
+ setConnectionMode,
+};
diff --git a/src/store/hooks.ts b/src/store/hooks.ts
index c2293fac..f3a59a0b 100644
--- a/src/store/hooks.ts
+++ b/src/store/hooks.ts
@@ -1,24 +1,19 @@
-import { bindActionCreators, ActionCreatorsMapObject } from 'redux';
+import { bindActionCreators } from 'redux';
import { useStore as useStoreRedux, useSelector, useDispatch, TypedUseSelectorHook } from 'react-redux';
import { useMemo } from 'react';
import { ReactFlowState, AppDispatch } from './index';
-import { ActionTypes } from './action-types';
+import { actions } from './actions';
export const useTypedSelector: TypedUseSelectorHook = useSelector;
-export function useActions(actions: ActionTypes, deps?: any): ActionTypes {
+export function useActions(actionSelector: any): any {
const dispatch: AppDispatch = useDispatch();
- const action = useMemo(
- () => {
- if (Array.isArray(actions)) {
- return actions.map((a) => bindActionCreators(a, dispatch));
- }
- return bindActionCreators>(actions, dispatch);
- },
- deps ? [dispatch, ...deps] : [dispatch]
- );
+ const action = useMemo(() => {
+ const currAction = actionSelector(actions);
+ return bindActionCreators(currAction, dispatch);
+ }, [dispatch, actionSelector]);
return action;
}
diff --git a/src/store/index.ts b/src/store/index.ts
index a754c4ba..1f24596a 100644
--- a/src/store/index.ts
+++ b/src/store/index.ts
@@ -306,7 +306,7 @@ export function reactFlowReducer(state = initialState, action: ActionTypes): Rea
isDragging,
position: {
x: el.__rf.position.x + diff.x,
- y: el.__rf.position.x + diff.y,
+ y: el.__rf.position.y + diff.y,
},
},
};