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

refactor(types): rename ActionTypes to ReactFlowActionTypes

Browse Source
This commit is contained in:
moklick
2021-01-28 12:45:32 +01:00
parent 4d382eed57
commit 23c2c49e52
5 changed files with 45 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/hooks/useGlobalKeyHandler.ts
+3 -2
View File
@@ -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
+1 -1
View File
@@ -257,7 +257,7 @@ interface SetConnectionMode {
};
}
export type ActionTypes =
export type ReactFlowActionTypes =
| OnConnectAction
| OnConnectStartAction
| OnConnectStopAction
src/store/actions.ts
+34 -34
View File
@@ -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
+5 -2
View File
@@ -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
+2 -2
View File
@@ -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;