feat(onError): add onError prop #2772

packages/core/src/hooks/useDrag/index.ts

@@ -61,6 +61,7 @@ function useDrag({
           snapGrid,
           snapToGrid,
           nodeOrigin,
+          onError,
         } = store.getState();
 
         lastPos.current = { x, y };
@@ -75,7 +76,7 @@ function useDrag({
             nextPosition.y = snapGrid[1] * Math.round(nextPosition.y / snapGrid[1]);
           }
 
-          const updatedPos = calcNextPosition(n, nextPosition, nodeInternals, nodeExtent, nodeOrigin);
+          const updatedPos = calcNextPosition(n, nextPosition, nodeInternals, nodeExtent, nodeOrigin, onError);
 
           // we want to make sure that we only fire a change event when there is a changes
           hasChange = hasChange || n.position.x !== updatedPos.position.x || n.position.y !== updatedPos.position.y;

packages/core/src/hooks/useDrag/utils.ts

@@ -1,7 +1,7 @@
 import type { RefObject } from 'react';
 
-import { clampPosition, devWarn, isNumeric } from '../../utils';
-import type { CoordinateExtent, Node, NodeDragItem, NodeInternals, NodeOrigin, XYPosition } from '../../types';
+import { clampPosition, isNumeric } from '../../utils';
+import type { CoordinateExtent, Node, NodeDragItem, NodeInternals, NodeOrigin, OnError, XYPosition } from '../../types';
 import { getNodePositionWithOrigin } from '../../utils/graph';
 
 export function isParentSelected(node: Node, nodeInternals: NodeInternals): boolean {
@@ -62,7 +62,8 @@ export function calcNextPosition(
   nextPosition: XYPosition,
   nodeInternals: NodeInternals,
   nodeExtent?: CoordinateExtent,
-  nodeOrigin: NodeOrigin = [0, 0]
+  nodeOrigin: NodeOrigin = [0, 0],
+  onError?: OnError
 ): { position: XYPosition; positionAbsolute: XYPosition } {
   let currentExtent = node.extent || nodeExtent;
 
@@ -81,7 +82,7 @@ export function calcNextPosition(
             ]
           : currentExtent;
     } else {
-      devWarn('Only child nodes can use a parent extent. Help: https://reactflow.dev/error#500');
+      onError?.('005', 'Only child nodes can use a parent extent.');
 
       currentExtent = nodeExtent;
     }

packages/core/src/hooks/useResizeHandler.ts

@@ -2,7 +2,7 @@ import { useEffect } from 'react';
 import type { MutableRefObject } from 'react';
 
 import { useStoreApi } from '../hooks/useStore';
-import { devWarn, getDimensions } from '../utils';
+import { getDimensions } from '../utils';
 
 function useResizeHandler(rendererNode: MutableRefObject<HTMLDivElement | null>): void {
   const store = useStoreApi();
@@ -18,9 +18,9 @@ function useResizeHandler(rendererNode: MutableRefObject<HTMLDivElement | null>)
       const size = getDimensions(rendererNode.current);
 
       if (size.height === 0 || size.width === 0) {
-        devWarn(
-          'The React Flow parent container needs a width and a height to render the graph. Help: https://reactflow.dev/error#400'
-        );
+        store
+          .getState()
+          .onError?.('004', 'The React Flow parent container needs a width and a height to render the graph.');
       }
 
       store.setState({ width: size.width || 500, height: size.height || 500 });

packages/core/src/hooks/useUpdateNodePositions.ts

@@ -7,7 +7,8 @@ function useUpdateNodePositions() {
   const store = useStoreApi();
 
   const updatePositions = useCallback((params: { x: number; y: number; isShiftPressed: boolean }) => {
-    const { nodeInternals, nodeExtent, updateNodePositions, getNodes, snapToGrid, snapGrid } = store.getState();
+    const { nodeInternals, nodeExtent, updateNodePositions, getNodes, snapToGrid, snapGrid, onError } =
+      store.getState();
     const selectedNodes = getNodes().filter((n) => n.selected);
     // by default a node moves 5px on each key press, or 20px if shift is pressed
     // if snap grid is enabled, we use that for the velocity.
@@ -27,10 +28,17 @@ function useUpdateNodePositions() {
           nextPosition.y = snapGrid[1] * Math.round(nextPosition.y / snapGrid[1]);
         }
 
-        const updatedPos = calcNextPosition(n, nextPosition, nodeInternals, nodeExtent);
+        const { positionAbsolute, position } = calcNextPosition(
+          n,
+          nextPosition,
+          nodeInternals,
+          nodeExtent,
+          undefined,
+          onError
+        );
 
-        n.position = updatedPos.position;
-        n.positionAbsolute = updatedPos.positionAbsolute;
+        n.position = position;
+        n.positionAbsolute = positionAbsolute;
       }
 
       return n;