refactor(types): rename ActionTypes to ReactFlowActionTypes

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);

src/store/action-types.ts

@@ -257,7 +257,7 @@ interface SetConnectionMode {
   };
 }
 
-export type ActionTypes =
+export type ReactFlowActionTypes =
   | OnConnectAction
   | OnConnectStartAction
   | OnConnectStopAction

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

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<ReactFlowState, any> => {
+  const store = useStoreRedux<ReactFlowState, any>();
+  return store;
+};

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;