feat(nodes): move canvas when nodes are at the edge of the canvas #2753

examples/vite-app/src/examples/Switch/index.tsx

@@ -1,4 +1,4 @@
-import React, { MouseEvent, useCallback } from 'react';
+import { MouseEvent, useCallback } from 'react';
 import ReactFlow, { addEdge, Node, Connection, Edge, useNodesState, useEdgesState } from 'reactflow';
 
 const onNodeDragStop = (_: MouseEvent, node: Node) => console.log('drag stop', node);
@@ -35,7 +35,7 @@ const nodesA: Node[] = [
 ];
 
 const edgesA: Edge[] = [
-  { id: 'e1-2', source: '1a', target: '2a', ariaLabel: null },
+  { id: 'e1-2', source: '1a', target: '2a', ariaLabel: undefined },
   { id: 'e1-3', source: '1a', target: '3a' },
 ];
 
@@ -83,6 +83,8 @@ const edgesB: Edge[] = [
   { id: 'e4b', source: 'inputb', target: '4b' },
 ];
 
+const onNodeDrag = (_: MouseEvent, node: Node) => console.log('drag', node.position);
+
 const BasicFlow = () => {
   const [nodes, setNodes, onNodesChange] = useNodesState(nodesA);
   const [edges, setEdges, onEdgesChange] = useEdgesState(edgesA);
@@ -99,6 +101,7 @@ const BasicFlow = () => {
       onConnect={onConnect}
       onNodeDragStop={onNodeDragStop}
       disableKeyboardA11y
+      onNodeDrag={onNodeDrag}
     >
       <div style={{ position: 'absolute', right: 10, top: 10, zIndex: 4 }}>
         <button

packages/core/src/components/Handle/handler.ts

@@ -1,7 +1,7 @@
 import type { MouseEvent as ReactMouseEvent } from 'react';
 import { StoreApi } from 'zustand';
 
-import { clamp, getHostForElement } from '../../utils';
+import { clamp, getHostForElement, getVelocity } from '../../utils';
 import { ConnectionMode } from '../../types';
 import type { OnConnect, Connection, HandleType, ReactFlowState, XYPosition } from '../../types';
 
@@ -75,18 +75,6 @@ function resetRecentHandle(hoveredHandle: Element): void {
   hoveredHandle?.classList.remove('react-flow__handle-connecting');
 }
 
-// returns a number between 0 and 1 that represents the velocity of the movement
-// when the mouse is close to the edge of the canvas
-function getVelocity(value: number, min: number, max: number): number {
-  if (value < min) {
-    return clamp(Math.abs(value - min), 1, 100) / 100;
-  } else if (value > max) {
-    return -clamp(Math.abs(value - max), 1, 100) / 100;
-  }
-
-  return 0;
-}
-
 export function handleMouseDown({
   event,
   handleId,

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

@@ -7,7 +7,8 @@ import { useStoreApi } from '../../hooks/useStore';
 import { getDragItems, getEventHandlerParams, hasSelector, calcNextPosition } from './utils';
 import { handleNodeClick } from '../../components/Nodes/utils';
 import useGetPointerPosition from '../useGetPointerPosition';
-import type { NodeDragItem, Node, SelectionDragHandler, UseDragEvent } from '../../types';
+import type { NodeDragItem, Node, SelectionDragHandler, UseDragEvent, XYPosition } from '../../types';
+import { getVelocity } from '../../utils';
 
 export type UseDragData = { dx: number; dy: number };
 
@@ -38,6 +39,11 @@ function useDrag({
   const store = useStoreApi();
   const dragItems = useRef<NodeDragItem[]>();
   const lastPos = useRef<{ x: number | null; y: number | null }>({ x: null, y: null });
+  const requestAnimationFrameId = useRef(0);
+  const containerBounds = useRef<DOMRect | null>(null);
+  const centerPosition = useRef<{ x: number; y: number }>({ x: 0, y: 0 });
+  const dragEvent = useRef<MouseEvent | null>(null);
+  const animationFrameStarted = useRef(false);
 
   const getPointerPosition = useGetPointerPosition();
 
@@ -45,6 +51,79 @@ function useDrag({
     if (nodeRef?.current) {
       const selection = select(nodeRef.current);
 
+      const updateNodes = ({ x, y }: XYPosition) => {
+        const {
+          nodeInternals,
+          onNodeDrag,
+          onSelectionDrag,
+          updateNodePositions,
+          nodeExtent,
+          snapGrid,
+          snapToGrid,
+          nodeOrigin,
+        } = store.getState();
+
+        lastPos.current = { x, y };
+
+        let hasChange = false;
+
+        dragItems.current = dragItems.current!.map((n) => {
+          const nextPosition = { x: x - n.distance.x, y: y - n.distance.y };
+
+          if (snapToGrid) {
+            nextPosition.x = snapGrid[0] * Math.round(nextPosition.x / snapGrid[0]);
+            nextPosition.y = snapGrid[1] * Math.round(nextPosition.y / snapGrid[1]);
+          }
+
+          const updatedPos = calcNextPosition(n, nextPosition, nodeInternals, nodeExtent, nodeOrigin);
+
+          // 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;
+
+          n.position = updatedPos.position;
+          n.positionAbsolute = updatedPos.positionAbsolute;
+
+          return n;
+        });
+
+        if (!hasChange) {
+          return;
+        }
+
+        updateNodePositions(dragItems.current, true, true);
+        setDragging(true);
+
+        const onDrag = nodeId ? onNodeDrag : wrapSelectionDragFunc(onSelectionDrag);
+
+        if (onDrag && dragEvent.current) {
+          const [currentNode, nodes] = getEventHandlerParams({
+            nodeId,
+            dragItems: dragItems.current,
+            nodeInternals,
+          });
+          onDrag(dragEvent.current as MouseEvent, currentNode, nodes);
+        }
+      };
+
+      const updateViewport = (): void => {
+        if (!containerBounds.current) {
+          return;
+        }
+
+        const xMovement = getVelocity(centerPosition.current.x, 35, containerBounds.current.width - 35) * 20;
+        const yMovement = getVelocity(centerPosition.current.y, 35, containerBounds.current.height - 35) * 20;
+
+        if (xMovement !== 0 || yMovement !== 0) {
+          lastPos.current.x = (lastPos.current.x ?? 0) + xMovement * -1;
+          lastPos.current.y = (lastPos.current.y ?? 0) + yMovement * -1;
+
+          updateNodes(lastPos.current as XYPosition);
+
+          store.getState().movePane({ x: xMovement, y: yMovement });
+        }
+        requestAnimationFrameId.current = requestAnimationFrame(updateViewport);
+      };
+
       if (disabled) {
         selection.on('.drag', null);
       } else {
@@ -56,6 +135,7 @@ function useDrag({
               unselectNodesAndEdges,
               onNodeDragStart,
               onSelectionDragStart,
+              domNode,
             } = store.getState();
 
             const onStart = nodeId ? onNodeDragStart : wrapSelectionDragFunc(onSelectionDragStart);
@@ -86,72 +166,39 @@ function useDrag({
               });
               onStart(event.sourceEvent as MouseEvent, currentNode, nodes);
             }
+
+            containerBounds.current = domNode?.getBoundingClientRect() || null;
+            centerPosition.current = {
+              x: event.sourceEvent.clientX - (containerBounds.current?.left ?? 0),
+              y: event.sourceEvent.clientY - (containerBounds.current?.top ?? 0),
+            };
           })
           .on('drag', (event: UseDragEvent) => {
-            const {
-              updateNodePositions,
-              nodeInternals,
-              nodeExtent,
-              onNodeDrag,
-              onSelectionDrag,
-              snapGrid,
-              snapToGrid,
-              nodeOrigin,
-            } = store.getState();
             const pointerPos = getPointerPosition(event);
+
+            if (!animationFrameStarted.current) {
+              animationFrameStarted.current = true;
+              updateViewport();
+            }
+
             // skip events without movement
             if (
               (lastPos.current.x !== pointerPos.xSnapped || lastPos.current.y !== pointerPos.ySnapped) &&
               dragItems.current
             ) {
-              lastPos.current = {
+              dragEvent.current = event.sourceEvent as MouseEvent;
-                x: pointerPos.xSnapped,
+              centerPosition.current = {
-                y: pointerPos.ySnapped,
+                x: event.sourceEvent.clientX - (containerBounds.current?.left ?? 0),
+                y: event.sourceEvent.clientY - (containerBounds.current?.top ?? 0),
               };
 
-              let hasChange = false;
+              updateNodes(pointerPos);
-
-              dragItems.current = dragItems.current.map((n) => {
-                const nextPosition = { x: pointerPos.x - n.distance.x, y: pointerPos.y - n.distance.y };
-
-                if (snapToGrid) {
-                  nextPosition.x = snapGrid[0] * Math.round(nextPosition.x / snapGrid[0]);
-                  nextPosition.y = snapGrid[1] * Math.round(nextPosition.y / snapGrid[1]);
-                }
-
-                const updatedPos = calcNextPosition(n, nextPosition, nodeInternals, nodeExtent, nodeOrigin);
-
-                // 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;
-
-                n.position = updatedPos.position;
-                n.positionAbsolute = updatedPos.positionAbsolute;
-
-                return n;
-              });
-
-              if (!hasChange) {
-                return;
-              }
-
-              const onDrag = nodeId ? onNodeDrag : wrapSelectionDragFunc(onSelectionDrag);
-
-              updateNodePositions(dragItems.current, true, true);
-              setDragging(true);
-
-              if (onDrag) {
-                const [currentNode, nodes] = getEventHandlerParams({
-                  nodeId,
-                  dragItems: dragItems.current,
-                  nodeInternals,
-                });
-                onDrag(event.sourceEvent as MouseEvent, currentNode, nodes);
-              }
             }
           })
           .on('end', (event: UseDragEvent) => {
             setDragging(false);
+            animationFrameStarted.current = false;
+            cancelAnimationFrame(requestAnimationFrameId.current);
             if (dragItems.current) {
               const { updateNodePositions, nodeInternals, onNodeDragStop, onSelectionDragStop } = store.getState();
               const onStop = nodeId ? onNodeDragStop : wrapSelectionDragFunc(onSelectionDragStop);

packages/core/src/utils/index.ts

@@ -14,6 +14,18 @@ export const clampPosition = (position: XYPosition = { x: 0, y: 0 }, extent: Coo
   y: clamp(position.y, extent[0][1], extent[1][1]),
 });
 
+// returns a number between 0 and 1 that represents the velocity of the movement
+// when the mouse is close to the edge of the canvas
+export const getVelocity = (value: number, min: number, max: number): number => {
+  if (value < min) {
+    return clamp(Math.abs(value - min), 1, 100) / 100;
+  } else if (value > max) {
+    return -clamp(Math.abs(value - max), 1, 100) / 100;
+  }
+
+  return 0;
+};
+
 export const getHostForElement = (element: HTMLElement): Document | ShadowRoot =>
   (element.getRootNode?.() as Document | ShadowRoot) || window?.document;