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, }, }, };