From 23c2c49e527d4dd884b52e2534014c393967e0f0 Mon Sep 17 00:00:00 2001 From: moklick Date: Thu, 28 Jan 2021 12:45:32 +0100 Subject: [PATCH] refactor(types): rename ActionTypes to ReactFlowActionTypes --- src/hooks/useGlobalKeyHandler.ts | 5 ++- src/store/action-types.ts | 2 +- src/store/actions.ts | 68 ++++++++++++++++---------------- src/store/hooks.ts | 7 +++- src/store/reducer.ts | 4 +- 5 files changed, 45 insertions(+), 41 deletions(-) diff --git a/src/hooks/useGlobalKeyHandler.ts b/src/hooks/useGlobalKeyHandler.ts index c43997a9..f123e9b4 100644 --- a/src/hooks/useGlobalKeyHandler.ts +++ b/src/hooks/useGlobalKeyHandler.ts @@ -2,7 +2,7 @@ import { useEffect } from 'react'; import { useStore, useStoreActions } from '../store/hooks'; import useKeyPress from './useKeyPress'; -import { isNode, getConnectedEdges } from '../utils/graph'; +import { isNode, getConnectedEdges, isEdge } from '../utils/graph'; import { Elements, KeyCode, ElementId, FlowElement } from '../types'; interface HookParams { @@ -22,7 +22,8 @@ export default ({ deleteKeyCode, multiSelectionKeyCode, onElementsRemove }: Hook const multiSelectionKeyPressed = useKeyPress(multiSelectionKeyCode); useEffect(() => { - const { edges, selectedElements } = store.getState(); + const { elements, selectedElements } = store.getState(); + const edges = elements.filter(isEdge); if (onElementsRemove && deleteKeyPressed && selectedElements) { const selectedNodes = selectedElements.filter(isNode); diff --git a/src/store/action-types.ts b/src/store/action-types.ts index 130b528e..da5208f9 100644 --- a/src/store/action-types.ts +++ b/src/store/action-types.ts @@ -257,7 +257,7 @@ interface SetConnectionMode { }; } -export type ActionTypes = +export type ReactFlowActionTypes = | OnConnectAction | OnConnectStartAction | OnConnectStopAction diff --git a/src/store/actions.ts b/src/store/actions.ts index fabe3ae7..fd08ad24 100644 --- a/src/store/actions.ts +++ b/src/store/actions.ts @@ -18,7 +18,7 @@ import { } from '../types'; import { - ActionTypes, + ReactFlowActionTypes, SET_ON_CONNECT, SET_ON_CONNECT_START, SET_ON_CONNECT_STOP, @@ -53,112 +53,112 @@ import { SET_CONNECTION_MODE, } from './action-types'; -export const setOnConnect = (onConnect: OnConnectFunc): ActionTypes => ({ +export const setOnConnect = (onConnect: OnConnectFunc): ReactFlowActionTypes => ({ type: SET_ON_CONNECT, payload: { onConnect, }, }); -export const setOnConnectStart = (onConnectStart: OnConnectStartFunc): ActionTypes => ({ +export const setOnConnectStart = (onConnectStart: OnConnectStartFunc): ReactFlowActionTypes => ({ type: SET_ON_CONNECT_START, payload: { onConnectStart, }, }); -export const setOnConnectStop = (onConnectStop: OnConnectStopFunc): ActionTypes => ({ +export const setOnConnectStop = (onConnectStop: OnConnectStopFunc): ReactFlowActionTypes => ({ type: SET_ON_CONNECT_STOP, payload: { onConnectStop, }, }); -export const setOnConnectEnd = (onConnectEnd: OnConnectEndFunc): ActionTypes => ({ +export const setOnConnectEnd = (onConnectEnd: OnConnectEndFunc): ReactFlowActionTypes => ({ type: SET_ON_CONNECT_END, payload: { onConnectEnd, }, }); -export const setElements = (elements: Elements): ActionTypes => ({ +export const setElements = (elements: Elements): ReactFlowActionTypes => ({ type: SET_ELEMENTS, elements, }); -export const batchUpdateNodeDimensions = (updates: NodeDimensionUpdate[]): ActionTypes => ({ +export const batchUpdateNodeDimensions = (updates: NodeDimensionUpdate[]): ReactFlowActionTypes => ({ type: BATCH_UPDATE_NODE_DIMENSIONS, updates, }); -export const updateNodeDimensions = (payload: NodeDimensionUpdate): ActionTypes => ({ +export const updateNodeDimensions = (payload: NodeDimensionUpdate): ReactFlowActionTypes => ({ type: UPDATE_NODE_DIMENSIONS, payload, }); -export const updateNodePos = (payload: NodePosUpdate): ActionTypes => ({ +export const updateNodePos = (payload: NodePosUpdate): ReactFlowActionTypes => ({ type: UPDATE_NODE_POS, payload, }); -export const updateNodePosDiff = (payload: NodeDiffUpdate): ActionTypes => ({ +export const updateNodePosDiff = (payload: NodeDiffUpdate): ReactFlowActionTypes => ({ type: UPDATE_NODE_POS_DIFF, payload, }); -export const setUserSelection = (mousePos: XYPosition): ActionTypes => ({ +export const setUserSelection = (mousePos: XYPosition): ReactFlowActionTypes => ({ type: SET_USER_SELECTION, mousePos, }); -export const updateUserSelection = (mousePos: XYPosition): ActionTypes => ({ +export const updateUserSelection = (mousePos: XYPosition): ReactFlowActionTypes => ({ type: SET_USER_SELECTION, mousePos, }); -export const unsetUserSelection = (): ActionTypes => ({ +export const unsetUserSelection = (): ReactFlowActionTypes => ({ type: UNSET_USER_SELECTION, }); -export const setSelection = (selectionActive: boolean): ActionTypes => ({ +export const setSelection = (selectionActive: boolean): ReactFlowActionTypes => ({ type: SET_SELECTION, payload: { selectionActive, }, }); -export const unsetNodesSelection = (): ActionTypes => ({ +export const unsetNodesSelection = (): ReactFlowActionTypes => ({ type: UNSET_NODES_SELECTION, payload: { nodesSelectionActive: false, }, }); -export const resetSelectedElements = (): ActionTypes => ({ +export const resetSelectedElements = (): ReactFlowActionTypes => ({ type: RESET_SELECTED_ELEMENTS, payload: { selectedElements: null, }, }); -export const setSelectedElements = (elements: Elements): ActionTypes => ({ +export const setSelectedElements = (elements: Elements): ReactFlowActionTypes => ({ type: SET_SELECTED_ELEMENTS, elements, }); -export const addSelectedElements = (elements: Elements): ActionTypes => ({ +export const addSelectedElements = (elements: Elements): ReactFlowActionTypes => ({ type: ADD_SELECTED_ELEMENTS, elements, }); -export const updateTransform = (transform: Transform): ActionTypes => ({ +export const updateTransform = (transform: Transform): ReactFlowActionTypes => ({ type: UPDATE_TRANSFORM, payload: { transform, }, }); -export const updateSize = (size: Dimensions): ActionTypes => ({ +export const updateSize = (size: Dimensions): ReactFlowActionTypes => ({ type: UPDATE_SIZE, payload: { width: size.width || 500, @@ -166,47 +166,47 @@ export const updateSize = (size: Dimensions): ActionTypes => ({ }, }); -export const initD3Zoom = (payload: InitD3ZoomPayload): ActionTypes => ({ +export const initD3Zoom = (payload: InitD3ZoomPayload): ReactFlowActionTypes => ({ type: INIT_D3ZOOM, payload, }); -export const setMinZoom = (minZoom: number): ActionTypes => ({ +export const setMinZoom = (minZoom: number): ReactFlowActionTypes => ({ type: SET_MINZOOM, payload: { minZoom }, }); -export const setMaxZoom = (maxZoom: number): ActionTypes => ({ +export const setMaxZoom = (maxZoom: number): ReactFlowActionTypes => ({ type: SET_MAXZOOM, payload: { maxZoom }, }); -export const setTranslateExtent = (translateExtent: TranslateExtent): ActionTypes => ({ +export const setTranslateExtent = (translateExtent: TranslateExtent): ReactFlowActionTypes => ({ type: SET_TRANSLATEEXTENT, payload: { translateExtent }, }); -export const setConnectionPosition = (connectionPosition: XYPosition): ActionTypes => ({ +export const setConnectionPosition = (connectionPosition: XYPosition): ReactFlowActionTypes => ({ type: SET_CONNECTION_POSITION, payload: { connectionPosition }, }); -export const setConnectionNodeId = (payload: SetConnectionId): ActionTypes => ({ +export const setConnectionNodeId = (payload: SetConnectionId): ReactFlowActionTypes => ({ type: SET_CONNECTION_NODEID, payload, }); -export const setSnapToGrid = (snapToGrid: boolean): ActionTypes => ({ +export const setSnapToGrid = (snapToGrid: boolean): ReactFlowActionTypes => ({ type: SET_SNAPTOGRID, payload: { snapToGrid }, }); -export const setSnapGrid = (snapGrid: SnapGrid): ActionTypes => ({ +export const setSnapGrid = (snapGrid: SnapGrid): ReactFlowActionTypes => ({ type: SET_SNAPGRID, payload: { snapGrid }, }); -export const setInteractive = (isInteractive: boolean): ActionTypes => ({ +export const setInteractive = (isInteractive: boolean): ReactFlowActionTypes => ({ type: SET_INTERACTIVE, payload: { nodesDraggable: isInteractive, @@ -215,27 +215,27 @@ export const setInteractive = (isInteractive: boolean): ActionTypes => ({ }, }); -export const setNodesDraggable = (nodesDraggable: boolean): ActionTypes => ({ +export const setNodesDraggable = (nodesDraggable: boolean): ReactFlowActionTypes => ({ type: SET_NODES_DRAGGABLE, payload: { nodesDraggable }, }); -export const setNodesConnectable = (nodesConnectable: boolean): ActionTypes => ({ +export const setNodesConnectable = (nodesConnectable: boolean): ReactFlowActionTypes => ({ type: SET_NODES_CONNECTABLE, payload: { nodesConnectable }, }); -export const setElementsSelectable = (elementsSelectable: boolean): ActionTypes => ({ +export const setElementsSelectable = (elementsSelectable: boolean): ReactFlowActionTypes => ({ type: SET_ELEMENTS_SELECTABLE, payload: { elementsSelectable }, }); -export const setMultiSelectionActive = (multiSelectionActive: boolean): ActionTypes => ({ +export const setMultiSelectionActive = (multiSelectionActive: boolean): ReactFlowActionTypes => ({ type: SET_MULTI_SELECTION_ACTIVE, payload: { multiSelectionActive }, }); -export const setConnectionMode = (connectionMode: ConnectionMode): ActionTypes => ({ +export const setConnectionMode = (connectionMode: ConnectionMode): ReactFlowActionTypes => ({ type: SET_CONNECTION_MODE, payload: { connectionMode }, }); diff --git a/src/store/hooks.ts b/src/store/hooks.ts index 21c92762..fc2bdfad 100644 --- a/src/store/hooks.ts +++ b/src/store/hooks.ts @@ -1,4 +1,4 @@ -import { bindActionCreators } from 'redux'; +import { bindActionCreators, Store } from 'redux'; import { useStore as useStoreRedux, useSelector, useDispatch, TypedUseSelectorHook } from 'react-redux'; import { useMemo } from 'react'; @@ -21,4 +21,7 @@ export function useActions(actionSelector: (value: any) => any): any { export const useStoreActions = useActions; export const useStoreState = useTypedSelector; -export const useStore = useStoreRedux; +export const useStore = (): Store => { + const store = useStoreRedux(); + return store; +}; diff --git a/src/store/reducer.ts b/src/store/reducer.ts index 05feab5d..e494b8a1 100644 --- a/src/store/reducer.ts +++ b/src/store/reducer.ts @@ -6,7 +6,7 @@ import { getHandleBounds } from '../components/Nodes/utils'; import { ReactFlowState, FlowElement, Node, XYPosition } from '../types'; import { - ActionTypes, + ReactFlowActionTypes, ADD_SELECTED_ELEMENTS, BATCH_UPDATE_NODE_DIMENSIONS, INIT_D3ZOOM, @@ -42,7 +42,7 @@ import { import { initialState } from './index'; -export default function reactFlowReducer(state = initialState, action: ActionTypes): ReactFlowState { +export default function reactFlowReducer(state = initialState, action: ReactFlowActionTypes): ReactFlowState { switch (action.type) { case SET_ELEMENTS: { const propElements = action.elements;