Merge branch 'main' into refactor/redux

src/store/actions.ts

@@ -17,6 +17,7 @@ import {
   SetConnectionId,
   SnapGrid,
   ConnectionMode,
+  NodeExtent,
 } from '../types';
 
 import {
@@ -53,6 +54,7 @@ import {
   SET_ELEMENTS_SELECTABLE,
   SET_MULTI_SELECTION_ACTIVE,
   SET_CONNECTION_MODE,
+  SET_NODE_EXTENT,
 } from './contants';
 
 export const setOnConnect = (onConnect: OnConnectFunc) =>
@@ -158,6 +160,8 @@ export const setMultiSelectionActive = (multiSelectionActive: boolean) =>
 export const setConnectionMode = (connectionMode: ConnectionMode) =>
   createAction(SET_CONNECTION_MODE, { connectionMode });
 
+export const setNodeExtent = (nodeExtent: NodeExtent) => createAction(SET_NODE_EXTENT, { nodeExtent });
+
 export type ReactFlowAction = ReturnType<
   | typeof setOnConnect
   | typeof setOnConnectStart
@@ -192,4 +196,5 @@ export type ReactFlowAction = ReturnType<
   | typeof setElementsSelectable
   | typeof setMultiSelectionActive
   | typeof setConnectionMode
+  | typeof setNodeExtent
 >;

src/store/contants.ts

@@ -31,3 +31,4 @@ 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';
+export const SET_NODE_EXTENT = 'SET_NODE_EXTENT';

src/store/index.ts

@@ -23,6 +23,11 @@ export const initialState: ReactFlowState = {
     [Number.POSITIVE_INFINITY, Number.POSITIVE_INFINITY],
   ],
 
+  nodeExtent: [
+    [Number.NEGATIVE_INFINITY, Number.NEGATIVE_INFINITY],
+    [Number.POSITIVE_INFINITY, Number.POSITIVE_INFINITY],
+  ],
+
   nodesSelectionActive: false,
   selectionActive: false,
 

src/store/reducer.ts

@@ -21,6 +21,7 @@ import {
   SET_MULTI_SELECTION_ACTIVE,
   SET_NODES_CONNECTABLE,
   SET_NODES_DRAGGABLE,
+  SET_NODE_EXTENT,
   SET_ON_CONNECT,
   SET_ON_CONNECT_END,
   SET_ON_CONNECT_START,
@@ -82,7 +83,7 @@ export default function reactFlowReducer(state = initialState, action: ReactFlow
           return storeElement;
         } else {
           // add new element
-          return parseElement(el);
+          return parseElement(el, state.nodeExtent);
         }
       });
 
@@ -389,6 +390,7 @@ export default function reactFlowReducer(state = initialState, action: ReactFlow
     case SET_ELEMENTS_SELECTABLE:
     case SET_MULTI_SELECTION_ACTIVE:
     case SET_CONNECTION_MODE:
+    case SET_NODE_EXTENT:
       return { ...state, ...action.payload };
     default:
       return state;