alighasami/xyflow
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor(actions): use createAction util function

Browse Source
This commit is contained in:
moklick
2021-01-28 16:33:53 +01:00
parent 23c2c49e52
commit 835d539108
8 changed files with 164 additions and 457 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/store/action-types.ts
-293
View File
@@ -1,293 +0,0 @@
import {
OnConnectFunc,
OnConnectStartFunc,
OnConnectStopFunc,
OnConnectEndFunc,
Dimensions,
Elements,
NodePosUpdate,
NodeDiffUpdate,
Transform,
TranslateExtent,
XYPosition,
SnapGrid,
ConnectionMode,
SetConnectionId,
NodeDimensionUpdate,
InitD3ZoomPayload,
} from '../types';
export const SET_ON_CONNECT = 'SET_ON_CONNECT';
export const SET_ON_CONNECT_START = 'SET_ON_CONNECT_START';
export const SET_ON_CONNECT_STOP = 'SET_ON_CONNECT_STOP';
export const SET_ON_CONNECT_END = 'SET_ON_CONNECT_END';
export const SET_ELEMENTS = 'SET_ELEMENTS';
export const BATCH_UPDATE_NODE_DIMENSIONS = 'BATCH_UPDATE_NODE_DIMENSIONS';
export const UPDATE_NODE_DIMENSIONS = 'UPDATE_NODE_DIMENSIONS';
export const UPDATE_NODE_POS = 'UPDATE_NODE_POS';
export const UPDATE_NODE_POS_DIFF = 'UPDATE_NODE_POS_DIFF';
export const SET_USER_SELECTION = 'SET_USER_SELECTION';
export const UPDATE_USER_SELECTION = 'UPDATE_USER_SELECTION';
export const UNSET_USER_SELECTION = 'UNSET_USER_SELECTION';
export const SET_SELECTION = 'SET_SELECTION';
export const UNSET_NODES_SELECTION = 'UNSET_NODES_SELECTION';
export const SET_SELECTED_ELEMENTS = 'SET_SELECTED_ELEMENTS';
export const RESET_SELECTED_ELEMENTS = 'RESET_SELECTED_ELEMENTS';
export const ADD_SELECTED_ELEMENTS = 'ADD_SELECTED_ELEMENTS';
export const UPDATE_TRANSFORM = 'UPDATE_TRANSFORM';
export const UPDATE_SIZE = 'UPDATE_SIZE';
export const INIT_D3ZOOM = 'INIT_D3ZOOM';
export const SET_MINZOOM = 'SET_MINZOOM';
export const SET_MAXZOOM = 'SET_MAXZOOM';
export const SET_TRANSLATEEXTENT = 'SET_TRANSLATEEXTENT';
export const SET_CONNECTION_POSITION = 'SET_CONNECTION_POSITION';
export const SET_CONNECTION_NODEID = 'SET_CONNECTION_NODEID';
export const SET_SNAPTOGRID = 'SET_SNAPTOGRID';
export const SET_SNAPGRID = 'SET_SNAPGRID';
export const SET_INTERACTIVE = 'SET_INTERACTIVE';
export const SET_NODES_DRAGGABLE = 'SET_NODES_DRAGGABLE';
export const SET_NODES_CONNECTABLE = 'SET_NODES_CONNECTABLE';
export const SET_ELEMENTS_SELECTABLE = 'SET_ELEMENTS_SELECTABLE';
export const SET_MULTI_SELECTION_ACTIVE = 'SET_MULTI_SELECTION_ACTIVE';
export const SET_CONNECTION_MODE = 'SET_CONNECTION_MODE';
interface OnConnectAction {
type: typeof SET_ON_CONNECT;
payload: {
onConnect: OnConnectFunc;
};
}
interface OnConnectStartAction {
type: typeof SET_ON_CONNECT_START;
payload: {
onConnectStart: OnConnectStartFunc;
};
}
interface OnConnectStopAction {
type: typeof SET_ON_CONNECT_STOP;
payload: {
onConnectStop: OnConnectStopFunc;
};
}
interface OnConnectEndAction {
type: typeof SET_ON_CONNECT_END;
payload: {
onConnectEnd: OnConnectEndFunc;
};
}
interface SetElementsAction {
type: typeof SET_ELEMENTS;
elements: Elements;
}
interface BatchUpdateNodeDimensions {
type: typeof BATCH_UPDATE_NODE_DIMENSIONS;
updates: NodeDimensionUpdate[];
}
interface UpdateNodeDimensions {
type: typeof UPDATE_NODE_DIMENSIONS;
payload: NodeDimensionUpdate;
}
interface UpdateNodePos {
type: typeof UPDATE_NODE_POS;
payload: NodePosUpdate;
}
interface UpdateNodePosDiff {
type: typeof UPDATE_NODE_POS_DIFF;
payload: NodeDiffUpdate;
}
interface SetUserSelection {
type: typeof SET_USER_SELECTION;
mousePos: XYPosition;
}
interface UpdateUserSelection {
type: typeof UPDATE_USER_SELECTION;
mousePos: XYPosition;
}
interface UnsetUserSelection {
type: typeof UNSET_USER_SELECTION;
}
interface SetSelection {
type: typeof SET_SELECTION;
payload: {
selectionActive: boolean;
};
}
interface UnsetNodesSelection {
type: typeof UNSET_NODES_SELECTION;
payload: {
nodesSelectionActive: boolean;
};
}
interface ResetSelectedElements {
type: typeof RESET_SELECTED_ELEMENTS;
payload: {
selectedElements: Elements | null;
};
}
interface SetSelectedElements {
type: typeof SET_SELECTED_ELEMENTS;
elements: Elements;
}
interface AddSelectedElements {
type: typeof ADD_SELECTED_ELEMENTS;
elements: Elements;
}
interface UpdateTransform {
type: typeof UPDATE_TRANSFORM;
payload: {
transform: Transform;
};
}
interface UpdateSize {
type: typeof UPDATE_SIZE;
payload: Dimensions;
}
interface InitD3Zoom {
type: typeof INIT_D3ZOOM;
payload: InitD3ZoomPayload;
}
interface SetMinZoom {
type: typeof SET_MINZOOM;
payload: {
minZoom: number;
};
}
interface SetMaxZoom {
type: typeof SET_MAXZOOM;
payload: {
maxZoom: number;
};
}
interface SetTranslateExtent {
type: typeof SET_TRANSLATEEXTENT;
payload: {
translateExtent: TranslateExtent;
};
}
interface SetConnectionPosition {
type: typeof SET_CONNECTION_POSITION;
payload: {
connectionPosition: XYPosition;
};
}
interface SetConnectionNodeId {
type: typeof SET_CONNECTION_NODEID;
payload: SetConnectionId;
}
interface SetSnapToGrid {
type: typeof SET_SNAPTOGRID;
payload: {
snapToGrid: boolean;
};
}
interface SetSnapGrid {
type: typeof SET_SNAPGRID;
payload: {
snapGrid: SnapGrid;
};
}
interface SetInteractive {
type: typeof SET_INTERACTIVE;
payload: {
nodesDraggable: boolean;
nodesConnectable: boolean;
elementsSelectable: boolean;
};
}
interface SetNodesDraggable {
type: typeof SET_NODES_DRAGGABLE;
payload: {
nodesDraggable: boolean;
};
}
interface SetNodesConnectable {
type: typeof SET_NODES_CONNECTABLE;
payload: {
nodesConnectable: boolean;
};
}
interface SetElementsSelectable {
type: typeof SET_ELEMENTS_SELECTABLE;
payload: {
elementsSelectable: boolean;
};
}
interface SetMultiSelectionActive {
type: typeof SET_MULTI_SELECTION_ACTIVE;
payload: {
multiSelectionActive: boolean;
};
}
interface SetConnectionMode {
type: typeof SET_CONNECTION_MODE;
payload: {
connectionMode: ConnectionMode;
};
}
export type ReactFlowActionTypes =
| OnConnectAction
| OnConnectStartAction
| OnConnectStopAction
| OnConnectEndAction
| SetElementsAction
| 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;
src/store/actions.ts
+98 -144
View File
@@ -1,3 +1,5 @@
import { createAction } from './utils';
import { import {
Elements, Elements,
OnConnectEndFunc, OnConnectEndFunc,
@@ -18,7 +20,6 @@ import {
} from '../types'; } from '../types';
import { import {
ReactFlowActionTypes,
SET_ON_CONNECT, SET_ON_CONNECT,
SET_ON_CONNECT_START, SET_ON_CONNECT_START,
SET_ON_CONNECT_STOP, SET_ON_CONNECT_STOP,
@@ -30,6 +31,7 @@ import {
UPDATE_NODE_POS_DIFF, UPDATE_NODE_POS_DIFF,
SET_USER_SELECTION, SET_USER_SELECTION,
UNSET_USER_SELECTION, UNSET_USER_SELECTION,
UPDATE_USER_SELECTION,
SET_SELECTION, SET_SELECTION,
UNSET_NODES_SELECTION, UNSET_NODES_SELECTION,
RESET_SELECTED_ELEMENTS, RESET_SELECTED_ELEMENTS,
@@ -51,191 +53,143 @@ import {
SET_ELEMENTS_SELECTABLE, SET_ELEMENTS_SELECTABLE,
SET_MULTI_SELECTION_ACTIVE, SET_MULTI_SELECTION_ACTIVE,
SET_CONNECTION_MODE, SET_CONNECTION_MODE,
} from './action-types'; } from './contants';
export const setOnConnect = (onConnect: OnConnectFunc): ReactFlowActionTypes => ({ export const setOnConnect = (onConnect: OnConnectFunc) =>
type: SET_ON_CONNECT, createAction(SET_ON_CONNECT, {
payload: {
onConnect, onConnect,
}, });
});
export const setOnConnectStart = (onConnectStart: OnConnectStartFunc): ReactFlowActionTypes => ({ export const setOnConnectStart = (onConnectStart: OnConnectStartFunc) =>
type: SET_ON_CONNECT_START, createAction(SET_ON_CONNECT_START, {
payload: {
onConnectStart, onConnectStart,
}, });
});
export const setOnConnectStop = (onConnectStop: OnConnectStopFunc): ReactFlowActionTypes => ({ export const setOnConnectStop = (onConnectStop: OnConnectStopFunc) =>
type: SET_ON_CONNECT_STOP, createAction(SET_ON_CONNECT_STOP, {
payload: {
onConnectStop, onConnectStop,
}, });
});
export const setOnConnectEnd = (onConnectEnd: OnConnectEndFunc): ReactFlowActionTypes => ({ export const setOnConnectEnd = (onConnectEnd: OnConnectEndFunc) =>
type: SET_ON_CONNECT_END, createAction(SET_ON_CONNECT_END, {
payload: {
onConnectEnd, onConnectEnd,
}, });
});
export const setElements = (elements: Elements): ReactFlowActionTypes => ({ export const setElements = (elements: Elements) => createAction(SET_ELEMENTS, elements);
type: SET_ELEMENTS,
elements,
});
export const batchUpdateNodeDimensions = (updates: NodeDimensionUpdate[]): ReactFlowActionTypes => ({ export const batchUpdateNodeDimensions = (updates: NodeDimensionUpdate[]) =>
type: BATCH_UPDATE_NODE_DIMENSIONS, createAction(BATCH_UPDATE_NODE_DIMENSIONS, updates);
updates,
});
export const updateNodeDimensions = (payload: NodeDimensionUpdate): ReactFlowActionTypes => ({ export const updateNodeDimensions = (payload: NodeDimensionUpdate) => createAction(UPDATE_NODE_DIMENSIONS, payload);
type: UPDATE_NODE_DIMENSIONS,
payload,
});
export const updateNodePos = (payload: NodePosUpdate): ReactFlowActionTypes => ({ export const updateNodePos = (payload: NodePosUpdate) => createAction(UPDATE_NODE_POS, payload);
type: UPDATE_NODE_POS,
payload,
});
export const updateNodePosDiff = (payload: NodeDiffUpdate): ReactFlowActionTypes => ({ export const updateNodePosDiff = (payload: NodeDiffUpdate) => createAction(UPDATE_NODE_POS_DIFF, payload);
type: UPDATE_NODE_POS_DIFF,
payload,
});
export const setUserSelection = (mousePos: XYPosition): ReactFlowActionTypes => ({ export const setUserSelection = (mousePos: XYPosition) => createAction(SET_USER_SELECTION, mousePos);
type: SET_USER_SELECTION,
mousePos,
});
export const updateUserSelection = (mousePos: XYPosition): ReactFlowActionTypes => ({ export const updateUserSelection = (mousePos: XYPosition) => createAction(UPDATE_USER_SELECTION, mousePos);
type: SET_USER_SELECTION,
mousePos,
});
export const unsetUserSelection = (): ReactFlowActionTypes => ({ export const unsetUserSelection = () => createAction(UNSET_USER_SELECTION);
type: UNSET_USER_SELECTION,
});
export const setSelection = (selectionActive: boolean): ReactFlowActionTypes => ({ export const setSelection = (selectionActive: boolean) =>
type: SET_SELECTION, createAction(SET_SELECTION, {
payload: {
selectionActive, selectionActive,
}, });
});
export const unsetNodesSelection = (): ReactFlowActionTypes => ({ export const unsetNodesSelection = () =>
type: UNSET_NODES_SELECTION, createAction(UNSET_NODES_SELECTION, {
payload: {
nodesSelectionActive: false, nodesSelectionActive: false,
}, });
});
export const resetSelectedElements = (): ReactFlowActionTypes => ({ export const resetSelectedElements = () =>
type: RESET_SELECTED_ELEMENTS, createAction(RESET_SELECTED_ELEMENTS, {
payload: {
selectedElements: null, selectedElements: null,
}, });
});
export const setSelectedElements = (elements: Elements): ReactFlowActionTypes => ({ export const setSelectedElements = (elements: Elements) => createAction(SET_SELECTED_ELEMENTS, elements);
type: SET_SELECTED_ELEMENTS,
elements,
});
export const addSelectedElements = (elements: Elements): ReactFlowActionTypes => ({ export const addSelectedElements = (elements: Elements) => createAction(ADD_SELECTED_ELEMENTS, elements);
type: ADD_SELECTED_ELEMENTS,
elements,
});
export const updateTransform = (transform: Transform): ReactFlowActionTypes => ({ export const updateTransform = (transform: Transform) => createAction(UPDATE_TRANSFORM, { transform });
type: UPDATE_TRANSFORM,
payload: {
transform,
},
});
export const updateSize = (size: Dimensions): ReactFlowActionTypes => ({ export const updateSize = (size: Dimensions) =>
type: UPDATE_SIZE, createAction(UPDATE_SIZE, {
payload: {
width: size.width || 500, width: size.width || 500,
height: size.height || 500, height: size.height || 500,
}, });
});
export const initD3Zoom = (payload: InitD3ZoomPayload): ReactFlowActionTypes => ({ export const initD3Zoom = (payload: InitD3ZoomPayload) => createAction(INIT_D3ZOOM, payload);
type: INIT_D3ZOOM,
payload,
});
export const setMinZoom = (minZoom: number): ReactFlowActionTypes => ({ export const setMinZoom = (minZoom: number) => createAction(SET_MINZOOM, minZoom);
type: SET_MINZOOM,
payload: { minZoom },
});
export const setMaxZoom = (maxZoom: number): ReactFlowActionTypes => ({ export const setMaxZoom = (maxZoom: number) => createAction(SET_MAXZOOM, maxZoom);
type: SET_MAXZOOM,
payload: { maxZoom },
});
export const setTranslateExtent = (translateExtent: TranslateExtent): ReactFlowActionTypes => ({ export const setTranslateExtent = (translateExtent: TranslateExtent) =>
type: SET_TRANSLATEEXTENT, createAction(SET_TRANSLATEEXTENT, translateExtent);
payload: { translateExtent },
});
export const setConnectionPosition = (connectionPosition: XYPosition): ReactFlowActionTypes => ({ export const setConnectionPosition = (connectionPosition: XYPosition) =>
type: SET_CONNECTION_POSITION, createAction(SET_CONNECTION_POSITION, { connectionPosition });
payload: { connectionPosition },
});
export const setConnectionNodeId = (payload: SetConnectionId): ReactFlowActionTypes => ({ export const setConnectionNodeId = (payload: SetConnectionId) => createAction(SET_CONNECTION_NODEID, payload);
type: SET_CONNECTION_NODEID,
payload,
});
export const setSnapToGrid = (snapToGrid: boolean): ReactFlowActionTypes => ({ export const setSnapToGrid = (snapToGrid: boolean) => createAction(SET_SNAPTOGRID, { snapToGrid });
type: SET_SNAPTOGRID,
payload: { snapToGrid },
});
export const setSnapGrid = (snapGrid: SnapGrid): ReactFlowActionTypes => ({ export const setSnapGrid = (snapGrid: SnapGrid) => createAction(SET_SNAPGRID, { snapGrid });
type: SET_SNAPGRID,
payload: { snapGrid },
});
export const setInteractive = (isInteractive: boolean): ReactFlowActionTypes => ({ export const setInteractive = (isInteractive: boolean) =>
type: SET_INTERACTIVE, createAction(SET_INTERACTIVE, {
payload: {
nodesDraggable: isInteractive, nodesDraggable: isInteractive,
nodesConnectable: isInteractive, nodesConnectable: isInteractive,
elementsSelectable: isInteractive, elementsSelectable: isInteractive,
}, });
});
export const setNodesDraggable = (nodesDraggable: boolean): ReactFlowActionTypes => ({ export const setNodesDraggable = (nodesDraggable: boolean) => createAction(SET_NODES_DRAGGABLE, { nodesDraggable });
type: SET_NODES_DRAGGABLE,
payload: { nodesDraggable },
});
export const setNodesConnectable = (nodesConnectable: boolean): ReactFlowActionTypes => ({ export const setNodesConnectable = (nodesConnectable: boolean) =>
type: SET_NODES_CONNECTABLE, createAction(SET_NODES_CONNECTABLE, { nodesConnectable });
payload: { nodesConnectable },
});
export const setElementsSelectable = (elementsSelectable: boolean): ReactFlowActionTypes => ({ export const setElementsSelectable = (elementsSelectable: boolean) =>
type: SET_ELEMENTS_SELECTABLE, createAction(SET_ELEMENTS_SELECTABLE, { elementsSelectable });
payload: { elementsSelectable },
});
export const setMultiSelectionActive = (multiSelectionActive: boolean): ReactFlowActionTypes => ({ export const setMultiSelectionActive = (multiSelectionActive: boolean) =>
type: SET_MULTI_SELECTION_ACTIVE, createAction(SET_MULTI_SELECTION_ACTIVE, { multiSelectionActive });
payload: { multiSelectionActive },
});
export const setConnectionMode = (connectionMode: ConnectionMode): ReactFlowActionTypes => ({ export const setConnectionMode = (connectionMode: ConnectionMode) =>
type: SET_CONNECTION_MODE, createAction(SET_CONNECTION_MODE, { connectionMode });
payload: { connectionMode },
}); export type ReactFlowAction = ReturnType<
| typeof setOnConnect
| typeof setOnConnectStart
| typeof setOnConnectStop
| typeof setOnConnectEnd
| typeof setElements
| typeof batchUpdateNodeDimensions
| typeof updateNodeDimensions
| typeof updateNodePos
| typeof updateNodePosDiff
| typeof setUserSelection
| typeof updateUserSelection
| typeof unsetUserSelection
| typeof setSelection
| typeof unsetNodesSelection
| typeof resetSelectedElements
| typeof setSelectedElements
| typeof addSelectedElements
| typeof updateTransform
| typeof updateSize
| typeof initD3Zoom
| typeof setMinZoom
| typeof setMaxZoom
| typeof setTranslateExtent
| typeof setConnectionPosition
| typeof setConnectionNodeId
| typeof setSnapToGrid
| typeof setSnapGrid
| typeof setInteractive
| typeof setNodesDraggable
| typeof setNodesConnectable
| typeof setElementsSelectable
| typeof setMultiSelectionActive
| typeof setConnectionMode
>;
src/store/configure-store.ts
+2 -1
View File
@@ -2,9 +2,10 @@ import { applyMiddleware, compose, createStore, Store } from 'redux';
import thunkMiddleware from 'redux-thunk'; import thunkMiddleware from 'redux-thunk';
import { ReactFlowState } from '../types'; import { ReactFlowState } from '../types';
import { ReactFlowAction } from './actions';
import reactFlowReducer from './reducer'; import reactFlowReducer from './reducer';
export default function configureStore(preloadedState: ReactFlowState): Store<ReactFlowState> { export default function configureStore(preloadedState: ReactFlowState): Store<ReactFlowState, ReactFlowAction> {
const composedEnhancers = compose(applyMiddleware(thunkMiddleware)); const composedEnhancers = compose(applyMiddleware(thunkMiddleware));
const store = createStore(reactFlowReducer, preloadedState, composedEnhancers); const store = createStore(reactFlowReducer, preloadedState, composedEnhancers);
src/store/contants.ts
+33
View File
@@ -0,0 +1,33 @@
export const SET_ON_CONNECT = 'SET_ON_CONNECT';
export const SET_ON_CONNECT_START = 'SET_ON_CONNECT_START';
export const SET_ON_CONNECT_STOP = 'SET_ON_CONNECT_STOP';
export const SET_ON_CONNECT_END = 'SET_ON_CONNECT_END';
export const SET_ELEMENTS = 'SET_ELEMENTS';
export const BATCH_UPDATE_NODE_DIMENSIONS = 'BATCH_UPDATE_NODE_DIMENSIONS';
export const UPDATE_NODE_DIMENSIONS = 'UPDATE_NODE_DIMENSIONS';
export const UPDATE_NODE_POS = 'UPDATE_NODE_POS';
export const UPDATE_NODE_POS_DIFF = 'UPDATE_NODE_POS_DIFF';
export const SET_USER_SELECTION = 'SET_USER_SELECTION';
export const UPDATE_USER_SELECTION = 'UPDATE_USER_SELECTION';
export const UNSET_USER_SELECTION = 'UNSET_USER_SELECTION';
export const SET_SELECTION = 'SET_SELECTION';
export const UNSET_NODES_SELECTION = 'UNSET_NODES_SELECTION';
export const SET_SELECTED_ELEMENTS = 'SET_SELECTED_ELEMENTS';
export const RESET_SELECTED_ELEMENTS = 'RESET_SELECTED_ELEMENTS';
export const ADD_SELECTED_ELEMENTS = 'ADD_SELECTED_ELEMENTS';
export const UPDATE_TRANSFORM = 'UPDATE_TRANSFORM';
export const UPDATE_SIZE = 'UPDATE_SIZE';
export const INIT_D3ZOOM = 'INIT_D3ZOOM';
export const SET_MINZOOM = 'SET_MINZOOM';
export const SET_MAXZOOM = 'SET_MAXZOOM';
export const SET_TRANSLATEEXTENT = 'SET_TRANSLATEEXTENT';
export const SET_CONNECTION_POSITION = 'SET_CONNECTION_POSITION';
export const SET_CONNECTION_NODEID = 'SET_CONNECTION_NODEID';
export const SET_SNAPTOGRID = 'SET_SNAPTOGRID';
export const SET_SNAPGRID = 'SET_SNAPGRID';
export const SET_INTERACTIVE = 'SET_INTERACTIVE';
export const SET_NODES_DRAGGABLE = 'SET_NODES_DRAGGABLE';
export const SET_NODES_CONNECTABLE = 'SET_NODES_CONNECTABLE';
export const SET_ELEMENTS_SELECTABLE = 'SET_ELEMENTS_SELECTABLE';
export const SET_MULTI_SELECTION_ACTIVE = 'SET_MULTI_SELECTION_ACTIVE';
export const SET_CONNECTION_MODE = 'SET_CONNECTION_MODE';
src/store/hooks.ts
+13 -6
View File
@@ -1,18 +1,24 @@
import { bindActionCreators, Store } from 'redux'; import { bindActionCreators, Store } from 'redux';
import { useStore as useStoreRedux, useSelector, useDispatch, TypedUseSelectorHook } from 'react-redux'; import {
useStore as useStoreRedux,
useSelector,
useDispatch as reduxUseDispatch,
TypedUseSelectorHook,
} from 'react-redux';
import { useMemo } from 'react'; import { useMemo } from 'react';
import { AppDispatch } from './index'; import { ReactFlowDispatch } from './index';
import * as actions from './actions'; import * as actions from './actions';
import { ReactFlowAction } from './actions';
import { ReactFlowState } from '../types'; import { ReactFlowState } from '../types';
export const useTypedSelector: TypedUseSelectorHook<ReactFlowState> = useSelector; export const useTypedSelector: TypedUseSelectorHook<ReactFlowState> = useSelector;
export function useActions(actionSelector: (value: any) => any): any { export function useActions(actionSelector: (value: any) => any): any {
const dispatch: AppDispatch = useDispatch(); const dispatch: ReactFlowDispatch = reduxUseDispatch();
const action = useMemo(() => { const action = useMemo(() => {
const currAction = actionSelector(actions); const currAction: any = actionSelector(actions);
return bindActionCreators(currAction, dispatch); return bindActionCreators(currAction, dispatch);
}, [dispatch, actionSelector]); }, [dispatch, actionSelector]);
@@ -21,7 +27,8 @@ export function useActions(actionSelector: (value: any) => any): any {
export const useStoreActions = useActions; export const useStoreActions = useActions;
export const useStoreState = useTypedSelector; export const useStoreState = useTypedSelector;
export const useStore = (): Store<ReactFlowState, any> => { export const useStore = (): Store<ReactFlowState, ReactFlowAction> => {
const store = useStoreRedux<ReactFlowState, any>(); const store = useStoreRedux<ReactFlowState, ReactFlowAction>();
return store; return store;
}; };
export const useDispatch: ReactFlowDispatch = reduxUseDispatch;
src/store/index.ts
+1 -1
View File
@@ -55,6 +55,6 @@ export const initialState: ReactFlowState = {
const store = configureStore(initialState); const store = configureStore(initialState);
export type AppDispatch = typeof store.dispatch; export type ReactFlowDispatch = typeof store.dispatch;
export default store; export default store;
src/store/reducer.ts
+12 -12
View File
@@ -6,7 +6,6 @@ import { getHandleBounds } from '../components/Nodes/utils';
import { ReactFlowState, FlowElement, Node, XYPosition } from '../types'; import { ReactFlowState, FlowElement, Node, XYPosition } from '../types';
import { import {
ReactFlowActionTypes,
ADD_SELECTED_ELEMENTS, ADD_SELECTED_ELEMENTS,
BATCH_UPDATE_NODE_DIMENSIONS, BATCH_UPDATE_NODE_DIMENSIONS,
INIT_D3ZOOM, INIT_D3ZOOM,
@@ -38,14 +37,15 @@ import {
UPDATE_SIZE, UPDATE_SIZE,
UPDATE_TRANSFORM, UPDATE_TRANSFORM,
UPDATE_USER_SELECTION, UPDATE_USER_SELECTION,
} from './action-types'; } from './contants';
import { ReactFlowAction } from './actions';
import { initialState } from './index'; import { initialState } from './index';
export default function reactFlowReducer(state = initialState, action: ReactFlowActionTypes): ReactFlowState { export default function reactFlowReducer(state = initialState, action: ReactFlowAction): ReactFlowState {
switch (action.type) { switch (action.type) {
case SET_ELEMENTS: { case SET_ELEMENTS: {
const propElements = action.elements; const propElements = action.payload;
const nextElements = propElements.map((el: FlowElement) => { const nextElements = propElements.map((el: FlowElement) => {
let storeElement = state.elements.find((se) => se.id === el.id); let storeElement = state.elements.find((se) => se.id === el.id);
@@ -90,7 +90,7 @@ export default function reactFlowReducer(state = initialState, action: ReactFlow
} }
case BATCH_UPDATE_NODE_DIMENSIONS: { case BATCH_UPDATE_NODE_DIMENSIONS: {
const updatedElements = state.elements.map((el) => { const updatedElements = state.elements.map((el) => {
const update = action.updates.find((u) => u.id === el.id); const update = action.payload.find((u) => u.id === el.id);
if (update) { if (update) {
const dimensions = getDimensions(update.nodeElement); const dimensions = getDimensions(update.nodeElement);
const nodeToUpdate = el as Node; const nodeToUpdate = el as Node;
@@ -212,7 +212,7 @@ export default function reactFlowReducer(state = initialState, action: ReactFlow
return { ...state, elements: nextElements }; return { ...state, elements: nextElements };
} }
case SET_USER_SELECTION: { case SET_USER_SELECTION: {
const { mousePos } = action; const mousePos = action.payload;
const userSelectionRect = { const userSelectionRect = {
width: 0, width: 0,
@@ -231,7 +231,7 @@ export default function reactFlowReducer(state = initialState, action: ReactFlow
}; };
} }
case UPDATE_USER_SELECTION: { case UPDATE_USER_SELECTION: {
const { mousePos } = action; const mousePos = action.payload;
const startX = state.userSelectionRect.startX || 0; const startX = state.userSelectionRect.startX || 0;
const startY = state.userSelectionRect.startY || 0; const startY = state.userSelectionRect.startY || 0;
@@ -298,7 +298,7 @@ export default function reactFlowReducer(state = initialState, action: ReactFlow
}; };
} }
case SET_SELECTED_ELEMENTS: { case SET_SELECTED_ELEMENTS: {
const { elements } = action; const elements = action.payload;
const selectedElementsArr = Array.isArray(elements) ? elements : [elements]; const selectedElementsArr = Array.isArray(elements) ? elements : [elements];
const selectedElementsUpdated = !isEqual(selectedElementsArr, state.selectedElements); const selectedElementsUpdated = !isEqual(selectedElementsArr, state.selectedElements);
const selectedElements = selectedElementsUpdated ? selectedElementsArr : state.selectedElements; const selectedElements = selectedElementsUpdated ? selectedElementsArr : state.selectedElements;
@@ -310,7 +310,7 @@ export default function reactFlowReducer(state = initialState, action: ReactFlow
} }
case ADD_SELECTED_ELEMENTS: { case ADD_SELECTED_ELEMENTS: {
const { multiSelectionActive, selectedElements } = state; const { multiSelectionActive, selectedElements } = state;
const { elements } = action; const elements = action.payload;
const selectedElementsArr = Array.isArray(elements) ? elements : [elements]; const selectedElementsArr = Array.isArray(elements) ? elements : [elements];
let nextElements = selectedElementsArr; let nextElements = selectedElementsArr;
@@ -336,7 +336,7 @@ export default function reactFlowReducer(state = initialState, action: ReactFlow
}; };
} }
case SET_MINZOOM: { case SET_MINZOOM: {
const { minZoom } = action.payload; const minZoom = action.payload;
if (state.d3Zoom) { if (state.d3Zoom) {
state.d3Zoom.scaleExtent([minZoom, state.maxZoom]); state.d3Zoom.scaleExtent([minZoom, state.maxZoom]);
@@ -349,7 +349,7 @@ export default function reactFlowReducer(state = initialState, action: ReactFlow
} }
case SET_MAXZOOM: { case SET_MAXZOOM: {
const { maxZoom } = action.payload; const maxZoom = action.payload;
if (state.d3Zoom) { if (state.d3Zoom) {
state.d3Zoom.scaleExtent([state.minZoom, maxZoom]); state.d3Zoom.scaleExtent([state.minZoom, maxZoom]);
@@ -361,7 +361,7 @@ export default function reactFlowReducer(state = initialState, action: ReactFlow
}; };
} }
case SET_TRANSLATEEXTENT: { case SET_TRANSLATEEXTENT: {
const { translateExtent } = action.payload; const translateExtent = action.payload;
if (state.d3Zoom) { if (state.d3Zoom) {
state.d3Zoom.translateExtent(translateExtent); state.d3Zoom.translateExtent(translateExtent);
src/store/utils.ts
+5
View File
@@ -0,0 +1,5 @@
export function createAction<T extends string>(type: T): { type: T };
export function createAction<T extends string, P extends any>(type: T, payload: P): { type: T; payload: P };
export function createAction(type: string, payload?: any) {
return { type, payload };
}