feat(props): add nodeExtent prop closes #854

src/utils/graph.ts

@@ -1,5 +1,7 @@
 import { Store } from 'easy-peasy';
+
 import { StoreModel } from '../store';
+import { clampPosition } from '../utils';
 import {
   ElementId,
   Node,
@@ -11,6 +13,7 @@ import {
   Box,
   Connection,
   FlowExportObject,
+  NodeExtent,
 } from '../types';
 
 export const isEdge = (element: Node | Connection | Edge): element is Edge =>
@@ -142,7 +145,7 @@ export const onLoadProject = (currentStore: Store<StoreModel>) => {
   };
 };
 
-export const parseElement = (element: Node | Edge): Node | Edge => {
+export const parseElement = (element: Node | Edge, nodeExtent: NodeExtent): Node | Edge => {
   if (!element.id) {
     throw new Error('All nodes and edges need to have an id.');
   }
@@ -164,7 +167,7 @@ export const parseElement = (element: Node | Edge): Node | Edge => {
     id: element.id.toString(),
     type: element.type || 'default',
     __rf: {
-      position: element.position,
+      position: clampPosition(element.position, nodeExtent),
       width: null,
       height: null,
       handleBounds: {},

src/utils/index.ts

@@ -1,7 +1,7 @@
 import { DraggableEvent } from 'react-draggable';
 import { MouseEvent as ReactMouseEvent } from 'react';
 
-import { Dimensions } from '../types';
+import { Dimensions, XYPosition, NodeExtent } from '../types';
 
 export const isInputDOMNode = (e: ReactMouseEvent | DraggableEvent | KeyboardEvent) => {
   const target = e?.target as HTMLElement;
@@ -17,3 +17,8 @@ export const getDimensions = (node: HTMLDivElement): Dimensions => ({
 });
 
 export const clamp = (val: number, min: number = 0, max: number = 1): number => Math.min(Math.max(val, min), max);
+
+export const clampPosition = (position: XYPosition, extent: NodeExtent) => ({
+  x: clamp(position.x, extent[0][0], extent[1][0]),
+  y: clamp(position.y, extent[0][1], extent[1][1]),
+});