From e413bceb196553f33e5c55893732f12ceaaf860f Mon Sep 17 00:00:00 2001
From: moklick <info@moritzklack.com>
Date: Mon, 16 Jan 2023 16:39:48 +0100
Subject: [PATCH 1/9] feat(connecting): move pane when mouse is close to edge
 of canvas #2753

---
 .../core/src/components/Handle/handler.ts     | 64 ++++++++++++++-----
 packages/core/src/store/index.ts              | 19 ++++++
 packages/core/src/types/general.ts            |  1 +
 packages/core/src/utils/index.ts              |  1 +
 4 files changed, 69 insertions(+), 16 deletions(-)

diff --git a/packages/core/src/components/Handle/handler.ts b/packages/core/src/components/Handle/handler.ts
index 0052120f..133090d6 100644
--- a/packages/core/src/components/Handle/handler.ts
+++ b/packages/core/src/components/Handle/handler.ts
@@ -1,9 +1,9 @@
 import type { MouseEvent as ReactMouseEvent } from 'react';
 import { StoreApi } from 'zustand';
 
-import { getHostForElement } from '../../utils';
+import { clamp, getHostForElement } from '../../utils';
 import { ConnectionMode } from '../../types';
-import type { OnConnect, Connection, HandleType, ReactFlowState } from '../../types';
+import type { OnConnect, Connection, HandleType, ReactFlowState, XYPosition } from '../../types';
 
 type ValidConnectionFunc = (connection: Connection) => boolean;
 
@@ -75,6 +75,18 @@ 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,
@@ -98,11 +110,26 @@ export function handleMouseDown({
   elementEdgeUpdaterType?: HandleType;
   onEdgeUpdateEnd?: (evt: MouseEvent) => void;
 }): void {
-  const reactFlowNode = (event.target as Element).closest('.react-flow');
   // when react-flow is used inside a shadow root we can't use document
   const doc = getHostForElement(event.target as HTMLElement);
+  const { onConnectStart, connectionMode, domNode } = getState();
+  let connectionPosition: XYPosition | null = null;
+  let requestAnimationFrameId = 0;
 
-  if (!doc) {
+  // when the user is moving the mouse close to the edge of the canvas while connecting we move the canvas
+  const updateViewport = (): void => {
+    if (!connectionPosition || !containerBounds) {
+      return;
+    }
+
+    const xMovement = getVelocity(connectionPosition.x, 35, containerBounds.width - 35) * 20;
+    const yMovement = getVelocity(connectionPosition.y, 35, containerBounds.height - 35) * 20;
+
+    getState().movePane({ x: xMovement, y: yMovement });
+    requestAnimationFrameId = requestAnimationFrame(updateViewport);
+  };
+
+  if (!doc || !domNode) {
     return;
   }
 
@@ -110,33 +137,36 @@ export function handleMouseDown({
   const elementBelowIsTarget = elementBelow?.classList.contains('target');
   const elementBelowIsSource = elementBelow?.classList.contains('source');
 
-  if (!reactFlowNode || (!elementBelowIsTarget && !elementBelowIsSource && !elementEdgeUpdaterType)) {
+  if (!elementBelowIsTarget && !elementBelowIsSource && !elementEdgeUpdaterType) {
     return;
   }
 
-  const { onConnectStart, connectionMode } = getState();
   const handleType = elementEdgeUpdaterType ? elementEdgeUpdaterType : elementBelowIsTarget ? 'target' : 'source';
-  const containerBounds = reactFlowNode.getBoundingClientRect();
+  const containerBounds = domNode.getBoundingClientRect();
   let recentHoveredHandle: Element;
+  connectionPosition = {
+    x: event.clientX - containerBounds.left,
+    y: event.clientY - containerBounds.top,
+  };
+
+  updateViewport();
 
   setState({
-    connectionPosition: {
-      x: event.clientX - containerBounds.left,
-      y: event.clientY - containerBounds.top,
-    },
+    connectionPosition,
     connectionNodeId: nodeId,
     connectionHandleId: handleId,
     connectionHandleType: handleType,
   });
-
   onConnectStart?.(event, { nodeId, handleId, handleType });
 
   function onMouseMove(event: MouseEvent) {
+    connectionPosition = {
+      x: event.clientX - containerBounds.left,
+      y: event.clientY - containerBounds.top,
+    };
+
     setState({
-      connectionPosition: {
-        x: event.clientX - containerBounds.left,
-        y: event.clientY - containerBounds.top,
-      },
+      connectionPosition,
     });
 
     const { connection, elementBelow, isValid, isHoveringHandle } = checkElementBelowIsValid(
@@ -162,6 +192,8 @@ export function handleMouseDown({
   }
 
   function onMouseUp(event: MouseEvent) {
+    cancelAnimationFrame(requestAnimationFrameId);
+
     const { connection, isValid } = checkElementBelowIsValid(
       event,
       connectionMode,
diff --git a/packages/core/src/store/index.ts b/packages/core/src/store/index.ts
index 5c4d65a6..4efac70f 100644
--- a/packages/core/src/store/index.ts
+++ b/packages/core/src/store/index.ts
@@ -1,4 +1,5 @@
 import { createStore } from 'zustand';
+import { zoomIdentity } from 'd3-zoom';
 
 import { clampPosition, getDimensions, internalsSymbol } from '../utils';
 import { applyNodeChanges, createSelectionChange, getSelectionChanges } from '../utils/changes';
@@ -19,6 +20,7 @@ import type {
   UnselectNodesAndEdgesParams,
   NodeChange,
 } from '../types';
+import { XYPosition } from 'react-flow-renderer';
 
 const createRFStore = () =>
   createStore<ReactFlowState>((set, get) => ({
@@ -250,6 +252,23 @@ const createRFStore = () =>
         nodeInternals: new Map(nodeInternals),
       });
     },
+    movePane: (delta: XYPosition) => {
+      const { transform, width, height, d3Zoom, d3Selection, translateExtent } = get();
+
+      if (!d3Zoom || !d3Selection || (!delta.x && !delta.y)) {
+        return;
+      }
+
+      const nextTransform = zoomIdentity.translate(transform[0] + delta.x, transform[1] + delta.y).scale(transform[2]);
+
+      const extent: CoordinateExtent = [
+        [0, 0],
+        [width, height],
+      ];
+
+      const constrainedTransform = d3Zoom?.constrain()(nextTransform, extent, translateExtent);
+      d3Zoom.transform(d3Selection, constrainedTransform);
+    },
     cancelConnection: () =>
       set({
         connectionNodeId: initialState.connectionNodeId,
diff --git a/packages/core/src/types/general.ts b/packages/core/src/types/general.ts
index 9d60e839..6ec5e103 100644
--- a/packages/core/src/types/general.ts
+++ b/packages/core/src/types/general.ts
@@ -230,6 +230,7 @@ export type ReactFlowActions = {
   cancelConnection: () => void;
   reset: () => void;
   triggerNodeChanges: (changes: NodeChange[]) => void;
+  movePane: (delta: XYPosition) => void;
 };
 
 export type ReactFlowState = ReactFlowStore & ReactFlowActions;
diff --git a/packages/core/src/utils/index.ts b/packages/core/src/utils/index.ts
index 85220467..45d9c5e4 100644
--- a/packages/core/src/utils/index.ts
+++ b/packages/core/src/utils/index.ts
@@ -1,4 +1,5 @@
 import type { KeyboardEvent as ReactKeyboardEvent } from 'react';
+
 import type { Dimensions, Node, XYPosition, CoordinateExtent, Box, Rect } from '../types';
 
 export const getDimensions = (node: HTMLDivElement): Dimensions => ({

From 86f7a9a43d051463ddb87c32d5aea0e69c4422bc Mon Sep 17 00:00:00 2001
From: moklick <info@moritzklack.com>
Date: Mon, 16 Jan 2023 18:23:20 +0100
Subject: [PATCH 2/9] feat(nodes): move canvas when nodes are at the edge of
 the canvas #2753

---
 .../vite-app/src/examples/Switch/index.tsx    |   7 +-
 .../core/src/components/Handle/handler.ts     |  14 +-
 packages/core/src/hooks/useDrag/index.ts      | 153 ++++++++++++------
 packages/core/src/utils/index.ts              |  12 ++
 4 files changed, 118 insertions(+), 68 deletions(-)

diff --git a/examples/vite-app/src/examples/Switch/index.tsx b/examples/vite-app/src/examples/Switch/index.tsx
index eb5d6519..7fde6bbd 100644
--- a/examples/vite-app/src/examples/Switch/index.tsx
+++ b/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
diff --git a/packages/core/src/components/Handle/handler.ts b/packages/core/src/components/Handle/handler.ts
index 133090d6..65fc28e5 100644
--- a/packages/core/src/components/Handle/handler.ts
+++ b/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,
diff --git a/packages/core/src/hooks/useDrag/index.ts b/packages/core/src/hooks/useDrag/index.ts
index 7f1228a9..ca8dc007 100644
--- a/packages/core/src/hooks/useDrag/index.ts
+++ b/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 = {
-                x: pointerPos.xSnapped,
-                y: pointerPos.ySnapped,
+              dragEvent.current = event.sourceEvent as MouseEvent;
+              centerPosition.current = {
+                x: event.sourceEvent.clientX - (containerBounds.current?.left ?? 0),
+                y: event.sourceEvent.clientY - (containerBounds.current?.top ?? 0),
               };
 
-              let hasChange = false;
-
-              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);
-              }
+              updateNodes(pointerPos);
             }
           })
           .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);
diff --git a/packages/core/src/utils/index.ts b/packages/core/src/utils/index.ts
index 45d9c5e4..7a2b6203 100644
--- a/packages/core/src/utils/index.ts
+++ b/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;
 

From f2a4260ac984bd89c9eef9019d902d971111acab Mon Sep 17 00:00:00 2001
From: moklick <info@moritzklack.com>
Date: Tue, 17 Jan 2023 16:26:04 +0100
Subject: [PATCH 3/9] feat(autoPan): add props, handle scale

---
 packages/core/src/components/Handle/handler.ts      |  7 ++++---
 packages/core/src/components/StoreUpdater/index.tsx |  6 ++++++
 packages/core/src/container/ReactFlow/index.tsx     |  4 ++++
 packages/core/src/hooks/useDrag/index.ts            | 10 +++++++---
 packages/core/src/store/initialState.ts             |  2 ++
 packages/core/src/types/component-props.ts          |  2 ++
 packages/core/src/types/general.ts                  |  2 ++
 7 files changed, 27 insertions(+), 6 deletions(-)

diff --git a/packages/core/src/components/Handle/handler.ts b/packages/core/src/components/Handle/handler.ts
index 65fc28e5..b8493a8b 100644
--- a/packages/core/src/components/Handle/handler.ts
+++ b/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, getVelocity } from '../../utils';
+import { getHostForElement, getVelocity } from '../../utils';
 import { ConnectionMode } from '../../types';
 import type { OnConnect, Connection, HandleType, ReactFlowState, XYPosition } from '../../types';
 
@@ -100,13 +100,13 @@ export function handleMouseDown({
 }): void {
   // when react-flow is used inside a shadow root we can't use document
   const doc = getHostForElement(event.target as HTMLElement);
-  const { onConnectStart, connectionMode, domNode } = getState();
+  const { onConnectStart, connectionMode, domNode, autoPanOnConnect } = getState();
   let connectionPosition: XYPosition | null = null;
   let requestAnimationFrameId = 0;
 
   // when the user is moving the mouse close to the edge of the canvas while connecting we move the canvas
   const updateViewport = (): void => {
-    if (!connectionPosition || !containerBounds) {
+    if (!connectionPosition || !containerBounds || !autoPanOnConnect) {
       return;
     }
 
@@ -132,6 +132,7 @@ export function handleMouseDown({
   const handleType = elementEdgeUpdaterType ? elementEdgeUpdaterType : elementBelowIsTarget ? 'target' : 'source';
   const containerBounds = domNode.getBoundingClientRect();
   let recentHoveredHandle: Element;
+
   connectionPosition = {
     x: event.clientX - containerBounds.left,
     y: event.clientY - containerBounds.top,
diff --git a/packages/core/src/components/StoreUpdater/index.tsx b/packages/core/src/components/StoreUpdater/index.tsx
index 2c9a3ec6..55af8fb4 100644
--- a/packages/core/src/components/StoreUpdater/index.tsx
+++ b/packages/core/src/components/StoreUpdater/index.tsx
@@ -45,6 +45,8 @@ type StoreUpdaterProps = Pick<
   | 'noPanClassName'
   | 'nodeOrigin'
   | 'elevateNodesOnSelect'
+  | 'autoPanOnConnect'
+  | 'autoPanOnNodeDrag'
 > & { rfId: string };
 
 const selector = (s: ReactFlowState) => ({
@@ -119,6 +121,8 @@ const StoreUpdater = ({
   noPanClassName,
   nodeOrigin,
   rfId,
+  autoPanOnConnect,
+  autoPanOnNodeDrag,
 }: StoreUpdaterProps) => {
   const {
     setNodes,
@@ -172,6 +176,8 @@ const StoreUpdater = ({
   useDirectStoreUpdater('noPanClassName', noPanClassName, store.setState);
   useDirectStoreUpdater('nodeOrigin', nodeOrigin, store.setState);
   useDirectStoreUpdater('rfId', rfId, store.setState);
+  useDirectStoreUpdater('autoPanOnConnect', autoPanOnConnect, store.setState);
+  useDirectStoreUpdater('autoPanOnNodeDrag', autoPanOnNodeDrag, store.setState);
 
   useStoreUpdater<Node[]>(nodes, setNodes);
   useStoreUpdater<Edge[]>(edges, setEdges);
diff --git a/packages/core/src/container/ReactFlow/index.tsx b/packages/core/src/container/ReactFlow/index.tsx
index 0afc251d..c19d6b81 100644
--- a/packages/core/src/container/ReactFlow/index.tsx
+++ b/packages/core/src/container/ReactFlow/index.tsx
@@ -160,6 +160,8 @@ const ReactFlow = forwardRef<ReactFlowRefType, ReactFlowProps>(
       elevateNodesOnSelect = true,
       elevateEdgesOnSelect = false,
       disableKeyboardA11y = false,
+      autoPanOnConnect = true,
+      autoPanOnNodeDrag = true,
       style,
       id,
       ...rest
@@ -287,6 +289,8 @@ const ReactFlow = forwardRef<ReactFlowRefType, ReactFlowProps>(
             noPanClassName={noPanClassName}
             nodeOrigin={nodeOrigin}
             rfId={rfId}
+            autoPanOnConnect={autoPanOnConnect}
+            autoPanOnNodeDrag={autoPanOnNodeDrag}
           />
           <SelectionListener onSelectionChange={onSelectionChange} />
           {children}
diff --git a/packages/core/src/hooks/useDrag/index.ts b/packages/core/src/hooks/useDrag/index.ts
index ca8dc007..1333666d 100644
--- a/packages/core/src/hooks/useDrag/index.ts
+++ b/packages/core/src/hooks/useDrag/index.ts
@@ -114,8 +114,10 @@ function useDrag({
         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;
+          const scale = store.getState().transform[2];
+
+          lastPos.current.x = (lastPos.current.x ?? 0) - xMovement / scale;
+          lastPos.current.y = (lastPos.current.y ?? 0) - yMovement / scale;
 
           updateNodes(lastPos.current as XYPosition);
 
@@ -175,8 +177,9 @@ function useDrag({
           })
           .on('drag', (event: UseDragEvent) => {
             const pointerPos = getPointerPosition(event);
+            const { autoPanOnNodeDrag } = store.getState();
 
-            if (!animationFrameStarted.current) {
+            if (!animationFrameStarted.current && autoPanOnNodeDrag) {
               animationFrameStarted.current = true;
               updateViewport();
             }
@@ -199,6 +202,7 @@ function useDrag({
             setDragging(false);
             animationFrameStarted.current = false;
             cancelAnimationFrame(requestAnimationFrameId.current);
+
             if (dragItems.current) {
               const { updateNodePositions, nodeInternals, onNodeDragStop, onSelectionDragStop } = store.getState();
               const onStop = nodeId ? onNodeDragStop : wrapSelectionDragFunc(onSelectionDragStop);
diff --git a/packages/core/src/store/initialState.ts b/packages/core/src/store/initialState.ts
index f8cc369d..91070d06 100644
--- a/packages/core/src/store/initialState.ts
+++ b/packages/core/src/store/initialState.ts
@@ -56,6 +56,8 @@ const initialState: ReactFlowStore = {
   connectOnClick: true,
 
   ariaLiveMessage: '',
+  autoPanOnConnect: true,
+  autoPanOnNodeDrag: true,
 };
 
 export default initialState;
diff --git a/packages/core/src/types/component-props.ts b/packages/core/src/types/component-props.ts
index 0441ecdf..eeac7ca7 100644
--- a/packages/core/src/types/component-props.ts
+++ b/packages/core/src/types/component-props.ts
@@ -139,6 +139,8 @@ export type ReactFlowProps = HTMLAttributes<HTMLDivElement> & {
   elevateNodesOnSelect?: boolean;
   elevateEdgesOnSelect?: boolean;
   disableKeyboardA11y?: boolean;
+  autoPanOnNodeDrag?: boolean;
+  autoPanOnConnect?: boolean;
 };
 
 export type ReactFlowRefType = HTMLDivElement;
diff --git a/packages/core/src/types/general.ts b/packages/core/src/types/general.ts
index 6ec5e103..14a68b0d 100644
--- a/packages/core/src/types/general.ts
+++ b/packages/core/src/types/general.ts
@@ -210,6 +210,8 @@ export type ReactFlowStore = {
   onSelectionChange?: OnSelectionChangeFunc;
 
   ariaLiveMessage: string;
+  autoPanOnConnect: boolean;
+  autoPanOnNodeDrag: boolean;
 };
 
 export type ReactFlowActions = {

From 1d036b2575f566b388ceb152d999ac6efabf31c3 Mon Sep 17 00:00:00 2001
From: moklick <info@moritzklack.com>
Date: Tue, 17 Jan 2023 17:38:21 +0100
Subject: [PATCH 4/9] refactor(autoPan): naming things

---
 .../core/src/components/Handle/handler.ts     | 24 +++++-----
 packages/core/src/hooks/useDrag/index.ts      | 45 +++++++++----------
 packages/core/src/utils/index.ts              |  2 +-
 3 files changed, 35 insertions(+), 36 deletions(-)

diff --git a/packages/core/src/components/Handle/handler.ts b/packages/core/src/components/Handle/handler.ts
index b8493a8b..e5cafd21 100644
--- a/packages/core/src/components/Handle/handler.ts
+++ b/packages/core/src/components/Handle/handler.ts
@@ -1,7 +1,7 @@
 import type { MouseEvent as ReactMouseEvent } from 'react';
 import { StoreApi } from 'zustand';
 
-import { getHostForElement, getVelocity } from '../../utils';
+import { getHostForElement, calcAutoPanVelocity } from '../../utils';
 import { ConnectionMode } from '../../types';
 import type { OnConnect, Connection, HandleType, ReactFlowState, XYPosition } from '../../types';
 
@@ -100,21 +100,21 @@ export function handleMouseDown({
 }): void {
   // when react-flow is used inside a shadow root we can't use document
   const doc = getHostForElement(event.target as HTMLElement);
-  const { onConnectStart, connectionMode, domNode, autoPanOnConnect } = getState();
-  let connectionPosition: XYPosition | null = null;
-  let requestAnimationFrameId = 0;
+  const { onConnectStart, movePane, connectionMode, domNode, autoPanOnConnect } = getState();
+  let connectionPosition: XYPosition = { x: 0, y: 0 };
+  let autoPanId = 0;
 
   // when the user is moving the mouse close to the edge of the canvas while connecting we move the canvas
-  const updateViewport = (): void => {
-    if (!connectionPosition || !containerBounds || !autoPanOnConnect) {
+  const autoPan = (): void => {
+    if (!containerBounds || !autoPanOnConnect) {
       return;
     }
 
-    const xMovement = getVelocity(connectionPosition.x, 35, containerBounds.width - 35) * 20;
-    const yMovement = getVelocity(connectionPosition.y, 35, containerBounds.height - 35) * 20;
+    const xMovement = calcAutoPanVelocity(connectionPosition.x, 35, containerBounds.width - 35) * 20;
+    const yMovement = calcAutoPanVelocity(connectionPosition.y, 35, containerBounds.height - 35) * 20;
 
-    getState().movePane({ x: xMovement, y: yMovement });
-    requestAnimationFrameId = requestAnimationFrame(updateViewport);
+    movePane({ x: xMovement, y: yMovement });
+    autoPanId = requestAnimationFrame(autoPan);
   };
 
   if (!doc || !domNode) {
@@ -138,7 +138,7 @@ export function handleMouseDown({
     y: event.clientY - containerBounds.top,
   };
 
-  updateViewport();
+  autoPan();
 
   setState({
     connectionPosition,
@@ -181,7 +181,7 @@ export function handleMouseDown({
   }
 
   function onMouseUp(event: MouseEvent) {
-    cancelAnimationFrame(requestAnimationFrameId);
+    cancelAnimationFrame(autoPanId);
 
     const { connection, isValid } = checkElementBelowIsValid(
       event,
diff --git a/packages/core/src/hooks/useDrag/index.ts b/packages/core/src/hooks/useDrag/index.ts
index 1333666d..56fece93 100644
--- a/packages/core/src/hooks/useDrag/index.ts
+++ b/packages/core/src/hooks/useDrag/index.ts
@@ -7,8 +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 { calcAutoPanVelocity } from '../../utils';
 import type { NodeDragItem, Node, SelectionDragHandler, UseDragEvent, XYPosition } from '../../types';
-import { getVelocity } from '../../utils';
 
 export type UseDragData = { dx: number; dy: number };
 
@@ -35,15 +35,15 @@ function useDrag({
   isSelectable,
   selectNodesOnDrag,
 }: UseDragParams) {
-  const [dragging, setDragging] = useState<boolean>(false);
   const store = useStoreApi();
-  const dragItems = useRef<NodeDragItem[]>();
+  const [dragging, setDragging] = useState<boolean>(false);
+  const dragItems = useRef<NodeDragItem[]>([]);
   const lastPos = useRef<{ x: number | null; y: number | null }>({ x: null, y: null });
-  const requestAnimationFrameId = useRef(0);
+  const autoPanId = useRef(0);
   const containerBounds = useRef<DOMRect | null>(null);
-  const centerPosition = useRef<{ x: number; y: number }>({ x: 0, y: 0 });
+  const mousePosition = useRef<{ x: number; y: number }>({ x: 0, y: 0 });
   const dragEvent = useRef<MouseEvent | null>(null);
-  const animationFrameStarted = useRef(false);
+  const autoPanStarted = useRef(false);
 
   const getPointerPosition = useGetPointerPosition();
 
@@ -67,7 +67,7 @@ function useDrag({
 
         let hasChange = false;
 
-        dragItems.current = dragItems.current!.map((n) => {
+        dragItems.current = dragItems.current.map((n) => {
           const nextPosition = { x: x - n.distance.x, y: y - n.distance.y };
 
           if (snapToGrid) {
@@ -105,25 +105,24 @@ function useDrag({
         }
       };
 
-      const updateViewport = (): void => {
+      const autoPan = (): 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;
+        const xMovement = calcAutoPanVelocity(mousePosition.current.x, 35, containerBounds.current.width - 35) * 20;
+        const yMovement = calcAutoPanVelocity(mousePosition.current.y, 35, containerBounds.current.height - 35) * 20;
 
         if (xMovement !== 0 || yMovement !== 0) {
-          const scale = store.getState().transform[2];
+          const { transform, movePane } = store.getState();
 
-          lastPos.current.x = (lastPos.current.x ?? 0) - xMovement / scale;
-          lastPos.current.y = (lastPos.current.y ?? 0) - yMovement / scale;
+          lastPos.current.x = (lastPos.current.x ?? 0) - xMovement / transform[2];
+          lastPos.current.y = (lastPos.current.y ?? 0) - yMovement / transform[2];
 
           updateNodes(lastPos.current as XYPosition);
-
-          store.getState().movePane({ x: xMovement, y: yMovement });
+          movePane({ x: xMovement, y: yMovement });
         }
-        requestAnimationFrameId.current = requestAnimationFrame(updateViewport);
+        autoPanId.current = requestAnimationFrame(autoPan);
       };
 
       if (disabled) {
@@ -170,7 +169,7 @@ function useDrag({
             }
 
             containerBounds.current = domNode?.getBoundingClientRect() || null;
-            centerPosition.current = {
+            mousePosition.current = {
               x: event.sourceEvent.clientX - (containerBounds.current?.left ?? 0),
               y: event.sourceEvent.clientY - (containerBounds.current?.top ?? 0),
             };
@@ -179,9 +178,9 @@ function useDrag({
             const pointerPos = getPointerPosition(event);
             const { autoPanOnNodeDrag } = store.getState();
 
-            if (!animationFrameStarted.current && autoPanOnNodeDrag) {
-              animationFrameStarted.current = true;
-              updateViewport();
+            if (!autoPanStarted.current && autoPanOnNodeDrag) {
+              autoPanStarted.current = true;
+              autoPan();
             }
 
             // skip events without movement
@@ -190,7 +189,7 @@ function useDrag({
               dragItems.current
             ) {
               dragEvent.current = event.sourceEvent as MouseEvent;
-              centerPosition.current = {
+              mousePosition.current = {
                 x: event.sourceEvent.clientX - (containerBounds.current?.left ?? 0),
                 y: event.sourceEvent.clientY - (containerBounds.current?.top ?? 0),
               };
@@ -200,8 +199,8 @@ function useDrag({
           })
           .on('end', (event: UseDragEvent) => {
             setDragging(false);
-            animationFrameStarted.current = false;
-            cancelAnimationFrame(requestAnimationFrameId.current);
+            autoPanStarted.current = false;
+            cancelAnimationFrame(autoPanId.current);
 
             if (dragItems.current) {
               const { updateNodePositions, nodeInternals, onNodeDragStop, onSelectionDragStop } = store.getState();
diff --git a/packages/core/src/utils/index.ts b/packages/core/src/utils/index.ts
index 7a2b6203..2364f352 100644
--- a/packages/core/src/utils/index.ts
+++ b/packages/core/src/utils/index.ts
@@ -16,7 +16,7 @@ export const clampPosition = (position: XYPosition = { x: 0, y: 0 }, extent: Coo
 
 // 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 => {
+export const calcAutoPanVelocity = (value: number, min: number, max: number): number => {
   if (value < min) {
     return clamp(Math.abs(value - min), 1, 100) / 100;
   } else if (value > max) {

From e96309b6a57b1071faeebf7b0547fef7fd418694 Mon Sep 17 00:00:00 2001
From: moklick <info@moritzklack.com>
Date: Wed, 18 Jan 2023 12:15:05 +0100
Subject: [PATCH 5/9] chore(changeset): add

---
 .changeset/dry-mice-explode.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/dry-mice-explode.md

diff --git a/.changeset/dry-mice-explode.md b/.changeset/dry-mice-explode.md
new file mode 100644
index 00000000..d758f9dc
--- /dev/null
+++ b/.changeset/dry-mice-explode.md
@@ -0,0 +1,5 @@
+---
+'@reactflow/core': minor
+---
+
+Add autoPan for connecting and node dragging

From 5af609696b6e4d8ec5edecf0ac0dc2031e8798b2 Mon Sep 17 00:00:00 2001
From: moklick <info@moritzklack.com>
Date: Wed, 18 Jan 2023 17:51:43 +0100
Subject: [PATCH 6/9] feat(connection-radius): use closest handle / snappy
 edges #2759

---
 .../core/src/components/Handle/handler.ts     | 177 +++++++++++++-----
 packages/core/src/components/Handle/index.tsx |  13 +-
 .../core/src/container/ReactFlow/index.tsx    |   1 +
 packages/core/src/store/initialState.ts       |   1 +
 packages/core/src/types/component-props.ts    |   1 +
 packages/core/src/types/general.ts            |   1 +
 packages/core/src/utils/graph.ts              |   7 +
 7 files changed, 152 insertions(+), 49 deletions(-)

diff --git a/packages/core/src/components/Handle/handler.ts b/packages/core/src/components/Handle/handler.ts
index e5cafd21..103a9471 100644
--- a/packages/core/src/components/Handle/handler.ts
+++ b/packages/core/src/components/Handle/handler.ts
@@ -1,9 +1,10 @@
 import type { MouseEvent as ReactMouseEvent } from 'react';
 import { StoreApi } from 'zustand';
 
-import { getHostForElement, calcAutoPanVelocity } from '../../utils';
-import { ConnectionMode } from '../../types';
+import { getHostForElement, calcAutoPanVelocity, internalsSymbol } from '../../utils';
+import { ConnectionMode, Node, NodeHandleBounds } from '../../types';
 import type { OnConnect, Connection, HandleType, ReactFlowState, XYPosition } from '../../types';
+import { pointToRendererPoint, rendererPointToPoint } from '../../utils/graph';
 
 type ValidConnectionFunc = (connection: Connection) => boolean;
 
@@ -15,55 +16,60 @@ type Result = {
 };
 
 // checks if element below mouse is a handle and returns connection in form of an object { source: 123, target: 312 }
-export function checkElementBelowIsValid(
-  event: MouseEvent,
+export function isHandleValid(
+  handle: Pick<ConnectionHandle, 'nodeId' | 'id' | 'type'> | undefined,
   connectionMode: ConnectionMode,
-  isTarget: boolean,
-  nodeId: string,
-  handleId: string | null,
+  fromNodeId: string,
+  fromHandleId: string | null,
+  fromType: string,
   isValidConnection: ValidConnectionFunc,
   doc: Document | ShadowRoot
 ) {
-  const elementBelow = doc.elementFromPoint(event.clientX, event.clientY);
-  const elementBelowIsTarget = elementBelow?.classList.contains('target') || false;
-  const elementBelowIsSource = elementBelow?.classList.contains('source') || false;
-
   const result: Result = {
-    elementBelow,
+    elementBelow: null,
     isValid: false,
     connection: { source: null, target: null, sourceHandle: null, targetHandle: null },
     isHoveringHandle: false,
   };
+  const isTarget = fromType === 'target';
 
-  if (elementBelow && (elementBelowIsTarget || elementBelowIsSource)) {
-    result.isHoveringHandle = true;
+  if (handle) {
+    const elementBelow = doc.querySelector(
+      `.react-flow__handle[data-id="${handle?.nodeId}-${handle?.id}-${handle?.type}"]`
+    );
 
-    const elementBelowNodeId = elementBelow.getAttribute('data-nodeid');
-    const elementBelowHandleId = elementBelow.getAttribute('data-handleid');
-    const connection: Connection = isTarget
-      ? {
-          source: elementBelowNodeId,
-          sourceHandle: elementBelowHandleId,
-          target: nodeId,
-          targetHandle: handleId,
-        }
-      : {
-          source: nodeId,
-          sourceHandle: handleId,
-          target: elementBelowNodeId,
-          targetHandle: elementBelowHandleId,
-        };
+    if (elementBelow) {
+      const elementBelowIsTarget = handle.type === 'target';
+      const elementBelowIsSource = handle.type === 'source';
+      result.isHoveringHandle = true;
 
-    result.connection = connection;
+      const elementBelowNodeId = elementBelow.getAttribute('data-nodeid');
+      const elementBelowHandleId = elementBelow.getAttribute('data-handleid');
+      const connection: Connection = isTarget
+        ? {
+            source: handle.nodeId,
+            sourceHandle: handle.id,
+            target: fromNodeId,
+            targetHandle: fromHandleId,
+          }
+        : {
+            source: fromNodeId,
+            sourceHandle: fromHandleId,
+            target: handle.nodeId,
+            targetHandle: handle.id,
+          };
 
-    // in strict mode we don't allow target to target or source to source connections
-    const isValid =
-      connectionMode === ConnectionMode.Strict
-        ? (isTarget && elementBelowIsSource) || (!isTarget && elementBelowIsTarget)
-        : elementBelowNodeId !== nodeId || elementBelowHandleId !== handleId;
+      result.connection = connection;
 
-    if (isValid) {
-      result.isValid = isValidConnection(connection);
+      // in strict mode we don't allow target to target or source to source connections
+      const isValid =
+        connectionMode === ConnectionMode.Strict
+          ? (isTarget && elementBelowIsSource) || (!isTarget && elementBelowIsTarget)
+          : elementBelowNodeId !== handle.nodeId || elementBelowHandleId !== handle.id;
+
+      if (isValid) {
+        result.isValid = isValidConnection(connection);
+      }
     }
   }
 
@@ -75,6 +81,53 @@ function resetRecentHandle(hoveredHandle: Element): void {
   hoveredHandle?.classList.remove('react-flow__handle-connecting');
 }
 
+type ConnectionHandle = {
+  id: string | null;
+  type: HandleType;
+  nodeId: string;
+  absX: number;
+  absY: number;
+  width: number;
+  height: number;
+};
+
+function getHandles(
+  node: Node,
+  handleBounds: NodeHandleBounds,
+  type: HandleType,
+  currentHandle: string
+): ConnectionHandle[] {
+  return (handleBounds[type] || []).reduce<ConnectionHandle[]>((res, h) => {
+    if (`${node.id}-${h.id}-${type}` !== currentHandle) {
+      res.push({
+        id: h.id || null,
+        type,
+        nodeId: node.id,
+        absX: (node.positionAbsolute?.x ?? 0) + h.x,
+        absY: (node.positionAbsolute?.y ?? 0) + h.y,
+        width: h.width,
+        height: h.height,
+      });
+    }
+    return res;
+  }, []);
+}
+
+function getClosestHandle(pos: XYPosition, connectionRadius: number, handles: ConnectionHandle[]) {
+  let closestHandle: ConnectionHandle | undefined;
+  let minDistance = Infinity;
+
+  handles.forEach((handle) => {
+    const distance = Math.sqrt(Math.pow(handle.absX - pos.x, 2) + Math.pow(handle.absY - pos.y, 2));
+    if (distance <= connectionRadius && distance < minDistance) {
+      minDistance = distance;
+      closestHandle = handle;
+    }
+  });
+
+  return closestHandle;
+}
+
 export function handleMouseDown({
   event,
   handleId,
@@ -100,9 +153,10 @@ export function handleMouseDown({
 }): void {
   // when react-flow is used inside a shadow root we can't use document
   const doc = getHostForElement(event.target as HTMLElement);
-  const { onConnectStart, movePane, connectionMode, domNode, autoPanOnConnect } = getState();
+  const { onConnectStart, movePane, connectionMode, domNode, autoPanOnConnect, connectionRadius } = getState();
   let connectionPosition: XYPosition = { x: 0, y: 0 };
   let autoPanId = 0;
+  let prevClosestHandle: ConnectionHandle | undefined;
 
   // when the user is moving the mouse close to the edge of the canvas while connecting we move the canvas
   const autoPan = (): void => {
@@ -148,22 +202,55 @@ export function handleMouseDown({
   });
   onConnectStart?.(event, { nodeId, handleId, handleType });
 
+  const handles = getState()
+    .getNodes()
+    .reduce<ConnectionHandle[]>((res, node) => {
+      if (node[internalsSymbol]) {
+        const { handleBounds } = node[internalsSymbol];
+        let sourceHandles: ConnectionHandle[] = [];
+        let targetHandles: ConnectionHandle[] = [];
+
+        if (handleBounds) {
+          sourceHandles = getHandles(node, handleBounds, 'source', `${nodeId}-${handleId}-${handleType}`);
+          targetHandles = getHandles(node, handleBounds, 'target', `${nodeId}-${handleId}-${handleType}`);
+        }
+
+        res.push(...sourceHandles, ...targetHandles);
+      }
+      return res;
+    }, []);
+
   function onMouseMove(event: MouseEvent) {
+    const { transform } = getState();
     connectionPosition = {
       x: event.clientX - containerBounds.left,
       y: event.clientY - containerBounds.top,
     };
 
+    prevClosestHandle = getClosestHandle(
+      pointToRendererPoint(connectionPosition, transform, false, [1, 1]),
+      connectionRadius,
+      handles
+    );
+
     setState({
-      connectionPosition,
+      connectionPosition: prevClosestHandle
+        ? rendererPointToPoint(
+            {
+              x: prevClosestHandle.absX + prevClosestHandle.width / 2,
+              y: prevClosestHandle.absY + prevClosestHandle.height / 2,
+            },
+            transform
+          )
+        : connectionPosition,
     });
 
-    const { connection, elementBelow, isValid, isHoveringHandle } = checkElementBelowIsValid(
-      event,
+    const { connection, elementBelow, isValid, isHoveringHandle } = isHandleValid(
+      prevClosestHandle,
       connectionMode,
-      isTarget,
       nodeId,
       handleId,
+      isTarget ? 'target' : 'source',
       isValidConnection,
       doc
     );
@@ -183,12 +270,12 @@ export function handleMouseDown({
   function onMouseUp(event: MouseEvent) {
     cancelAnimationFrame(autoPanId);
 
-    const { connection, isValid } = checkElementBelowIsValid(
-      event,
+    const { connection, isValid } = isHandleValid(
+      prevClosestHandle,
       connectionMode,
-      isTarget,
       nodeId,
       handleId,
+      isTarget ? 'target' : 'source',
       isValidConnection,
       doc
     );
diff --git a/packages/core/src/components/Handle/index.tsx b/packages/core/src/components/Handle/index.tsx
index 6825fc07..2d9ebde0 100644
--- a/packages/core/src/components/Handle/index.tsx
+++ b/packages/core/src/components/Handle/index.tsx
@@ -4,7 +4,7 @@ import { shallow } from 'zustand/shallow';
 
 import { useStore, useStoreApi } from '../../hooks/useStore';
 import { useNodeId } from '../../contexts/NodeIdContext';
-import { checkElementBelowIsValid, handleMouseDown } from './handler';
+import { handleMouseDown, isHandleValid } from './handler';
 import { getHostForElement } from '../../utils';
 import { addEdge } from '../../utils/graph';
 import { Position } from '../../types';
@@ -86,12 +86,16 @@ const Handle = forwardRef<HTMLDivElement, HandleComponentProps>(
       }
 
       const doc = getHostForElement(event.target as HTMLElement);
-      const { connection, isValid } = checkElementBelowIsValid(
-        event as unknown as MouseEvent,
+      const { connection, isValid } = isHandleValid(
+        {
+          nodeId,
+          id: handleId,
+          type,
+        },
         connectionMode,
-        connectionStartHandle.type === 'target',
         connectionStartHandle.nodeId,
         connectionStartHandle.handleId || null,
+        connectionStartHandle.type,
         isValidConnection,
         doc
       );
@@ -110,6 +114,7 @@ const Handle = forwardRef<HTMLDivElement, HandleComponentProps>(
         data-handleid={handleId}
         data-nodeid={nodeId}
         data-handlepos={position}
+        data-id={`${nodeId}-${handleId}-${type}`}
         className={cc([
           'react-flow__handle',
           `react-flow__handle-${position}`,
diff --git a/packages/core/src/container/ReactFlow/index.tsx b/packages/core/src/container/ReactFlow/index.tsx
index c19d6b81..67964f0f 100644
--- a/packages/core/src/container/ReactFlow/index.tsx
+++ b/packages/core/src/container/ReactFlow/index.tsx
@@ -162,6 +162,7 @@ const ReactFlow = forwardRef<ReactFlowRefType, ReactFlowProps>(
       disableKeyboardA11y = false,
       autoPanOnConnect = true,
       autoPanOnNodeDrag = true,
+      connectionRadius = 20,
       style,
       id,
       ...rest
diff --git a/packages/core/src/store/initialState.ts b/packages/core/src/store/initialState.ts
index 91070d06..6c475b5b 100644
--- a/packages/core/src/store/initialState.ts
+++ b/packages/core/src/store/initialState.ts
@@ -58,6 +58,7 @@ const initialState: ReactFlowStore = {
   ariaLiveMessage: '',
   autoPanOnConnect: true,
   autoPanOnNodeDrag: true,
+  connectionRadius: 20,
 };
 
 export default initialState;
diff --git a/packages/core/src/types/component-props.ts b/packages/core/src/types/component-props.ts
index eeac7ca7..90b7124f 100644
--- a/packages/core/src/types/component-props.ts
+++ b/packages/core/src/types/component-props.ts
@@ -141,6 +141,7 @@ export type ReactFlowProps = HTMLAttributes<HTMLDivElement> & {
   disableKeyboardA11y?: boolean;
   autoPanOnNodeDrag?: boolean;
   autoPanOnConnect?: boolean;
+  connectionRadius?: number;
 };
 
 export type ReactFlowRefType = HTMLDivElement;
diff --git a/packages/core/src/types/general.ts b/packages/core/src/types/general.ts
index 14a68b0d..b7b5c16e 100644
--- a/packages/core/src/types/general.ts
+++ b/packages/core/src/types/general.ts
@@ -212,6 +212,7 @@ export type ReactFlowStore = {
   ariaLiveMessage: string;
   autoPanOnConnect: boolean;
   autoPanOnNodeDrag: boolean;
+  connectionRadius: number;
 };
 
 export type ReactFlowActions = {
diff --git a/packages/core/src/utils/graph.ts b/packages/core/src/utils/graph.ts
index 846050f5..7e94f766 100644
--- a/packages/core/src/utils/graph.ts
+++ b/packages/core/src/utils/graph.ts
@@ -141,6 +141,13 @@ export const pointToRendererPoint = (
   return position;
 };
 
+export const rendererPointToPoint = ({ x, y }: XYPosition, [tx, ty, tScale]: Transform): XYPosition => {
+  return {
+    x: x * tScale + tx,
+    y: y * tScale + ty,
+  };
+};
+
 export const getNodePositionWithOrigin = (
   node: Node | undefined,
   nodeOrigin: NodeOrigin = [0, 0]

From 66b3a8e3346cef5c3800980e524dd2374b03e7b5 Mon Sep 17 00:00:00 2001
From: moklick <info@moritzklack.com>
Date: Thu, 19 Jan 2023 15:52:39 +0100
Subject: [PATCH 7/9] refactor(handle): naming things, cleanup

---
 .../core/src/components/Handle/handler.ts     | 264 +++++-------------
 packages/core/src/components/Handle/index.tsx |  15 +-
 packages/core/src/components/Handle/utils.ts  | 143 ++++++++++
 packages/core/src/hooks/useDrag/index.ts      |   4 +-
 packages/core/src/store/index.ts              |   2 +-
 packages/core/src/types/general.ts            |   2 +-
 6 files changed, 225 insertions(+), 205 deletions(-)
 create mode 100644 packages/core/src/components/Handle/utils.ts

diff --git a/packages/core/src/components/Handle/handler.ts b/packages/core/src/components/Handle/handler.ts
index 103a9471..51cfd32d 100644
--- a/packages/core/src/components/Handle/handler.ts
+++ b/packages/core/src/components/Handle/handler.ts
@@ -1,133 +1,16 @@
 import type { MouseEvent as ReactMouseEvent } from 'react';
 import { StoreApi } from 'zustand';
 
-import { getHostForElement, calcAutoPanVelocity, internalsSymbol } from '../../utils';
-import { ConnectionMode, Node, NodeHandleBounds } from '../../types';
-import type { OnConnect, Connection, HandleType, ReactFlowState, XYPosition } from '../../types';
+import { getHostForElement, calcAutoPanVelocity } from '../../utils';
+import type { OnConnect, HandleType, ReactFlowState } from '../../types';
 import { pointToRendererPoint, rendererPointToPoint } from '../../utils/graph';
-
-type ValidConnectionFunc = (connection: Connection) => boolean;
-
-type Result = {
-  elementBelow: Element | null;
-  isValid: boolean;
-  connection: Connection;
-  isHoveringHandle: boolean;
-};
-
-// checks if element below mouse is a handle and returns connection in form of an object { source: 123, target: 312 }
-export function isHandleValid(
-  handle: Pick<ConnectionHandle, 'nodeId' | 'id' | 'type'> | undefined,
-  connectionMode: ConnectionMode,
-  fromNodeId: string,
-  fromHandleId: string | null,
-  fromType: string,
-  isValidConnection: ValidConnectionFunc,
-  doc: Document | ShadowRoot
-) {
-  const result: Result = {
-    elementBelow: null,
-    isValid: false,
-    connection: { source: null, target: null, sourceHandle: null, targetHandle: null },
-    isHoveringHandle: false,
-  };
-  const isTarget = fromType === 'target';
-
-  if (handle) {
-    const elementBelow = doc.querySelector(
-      `.react-flow__handle[data-id="${handle?.nodeId}-${handle?.id}-${handle?.type}"]`
-    );
-
-    if (elementBelow) {
-      const elementBelowIsTarget = handle.type === 'target';
-      const elementBelowIsSource = handle.type === 'source';
-      result.isHoveringHandle = true;
-
-      const elementBelowNodeId = elementBelow.getAttribute('data-nodeid');
-      const elementBelowHandleId = elementBelow.getAttribute('data-handleid');
-      const connection: Connection = isTarget
-        ? {
-            source: handle.nodeId,
-            sourceHandle: handle.id,
-            target: fromNodeId,
-            targetHandle: fromHandleId,
-          }
-        : {
-            source: fromNodeId,
-            sourceHandle: fromHandleId,
-            target: handle.nodeId,
-            targetHandle: handle.id,
-          };
-
-      result.connection = connection;
-
-      // in strict mode we don't allow target to target or source to source connections
-      const isValid =
-        connectionMode === ConnectionMode.Strict
-          ? (isTarget && elementBelowIsSource) || (!isTarget && elementBelowIsTarget)
-          : elementBelowNodeId !== handle.nodeId || elementBelowHandleId !== handle.id;
-
-      if (isValid) {
-        result.isValid = isValidConnection(connection);
-      }
-    }
-  }
-
-  return result;
-}
+import { ConnectionHandle, getClosestHandle, getHandleLookup, isValidHandle, ValidConnectionFunc } from './utils';
 
 function resetRecentHandle(hoveredHandle: Element): void {
   hoveredHandle?.classList.remove('react-flow__handle-valid');
   hoveredHandle?.classList.remove('react-flow__handle-connecting');
 }
 
-type ConnectionHandle = {
-  id: string | null;
-  type: HandleType;
-  nodeId: string;
-  absX: number;
-  absY: number;
-  width: number;
-  height: number;
-};
-
-function getHandles(
-  node: Node,
-  handleBounds: NodeHandleBounds,
-  type: HandleType,
-  currentHandle: string
-): ConnectionHandle[] {
-  return (handleBounds[type] || []).reduce<ConnectionHandle[]>((res, h) => {
-    if (`${node.id}-${h.id}-${type}` !== currentHandle) {
-      res.push({
-        id: h.id || null,
-        type,
-        nodeId: node.id,
-        absX: (node.positionAbsolute?.x ?? 0) + h.x,
-        absY: (node.positionAbsolute?.y ?? 0) + h.y,
-        width: h.width,
-        height: h.height,
-      });
-    }
-    return res;
-  }, []);
-}
-
-function getClosestHandle(pos: XYPosition, connectionRadius: number, handles: ConnectionHandle[]) {
-  let closestHandle: ConnectionHandle | undefined;
-  let minDistance = Infinity;
-
-  handles.forEach((handle) => {
-    const distance = Math.sqrt(Math.pow(handle.absX - pos.x, 2) + Math.pow(handle.absY - pos.y, 2));
-    if (distance <= connectionRadius && distance < minDistance) {
-      minDistance = distance;
-      closestHandle = handle;
-    }
-  });
-
-  return closestHandle;
-}
-
 export function handleMouseDown({
   event,
   handleId,
@@ -153,45 +36,46 @@ export function handleMouseDown({
 }): void {
   // when react-flow is used inside a shadow root we can't use document
   const doc = getHostForElement(event.target as HTMLElement);
-  const { onConnectStart, movePane, connectionMode, domNode, autoPanOnConnect, connectionRadius } = getState();
-  let connectionPosition: XYPosition = { x: 0, y: 0 };
+  const { connectionMode, domNode, autoPanOnConnect, connectionRadius, onConnectStart, onConnectEnd, panBy, getNodes } =
+    getState();
   let autoPanId = 0;
   let prevClosestHandle: ConnectionHandle | undefined;
 
+  const clickedElement = doc?.elementFromPoint(event.clientX, event.clientY);
+  const elementIsTarget = clickedElement?.classList.contains('target');
+  const elementIsSource = clickedElement?.classList.contains('source');
+
+  if (!domNode || (!elementIsTarget && !elementIsSource && !elementEdgeUpdaterType)) {
+    return;
+  }
+
+  const handleType = elementEdgeUpdaterType ? elementEdgeUpdaterType : elementIsTarget ? 'target' : 'source';
+  const containerBounds = domNode.getBoundingClientRect();
+  let recentHoveredHandle: Element;
+  let connectionPosition = {
+    x: event.clientX - containerBounds.left,
+    y: event.clientY - containerBounds.top,
+  };
+
+  const handleLookup = getHandleLookup({
+    nodes: getNodes(),
+    nodeId,
+    handleId,
+    handleType,
+  });
+
   // when the user is moving the mouse close to the edge of the canvas while connecting we move the canvas
   const autoPan = (): void => {
-    if (!containerBounds || !autoPanOnConnect) {
+    if (!autoPanOnConnect) {
       return;
     }
-
     const xMovement = calcAutoPanVelocity(connectionPosition.x, 35, containerBounds.width - 35) * 20;
     const yMovement = calcAutoPanVelocity(connectionPosition.y, 35, containerBounds.height - 35) * 20;
 
-    movePane({ x: xMovement, y: yMovement });
+    panBy({ x: xMovement, y: yMovement });
     autoPanId = requestAnimationFrame(autoPan);
   };
 
-  if (!doc || !domNode) {
-    return;
-  }
-
-  const elementBelow = doc.elementFromPoint(event.clientX, event.clientY);
-  const elementBelowIsTarget = elementBelow?.classList.contains('target');
-  const elementBelowIsSource = elementBelow?.classList.contains('source');
-
-  if (!elementBelowIsTarget && !elementBelowIsSource && !elementEdgeUpdaterType) {
-    return;
-  }
-
-  const handleType = elementEdgeUpdaterType ? elementEdgeUpdaterType : elementBelowIsTarget ? 'target' : 'source';
-  const containerBounds = domNode.getBoundingClientRect();
-  let recentHoveredHandle: Element;
-
-  connectionPosition = {
-    x: event.clientX - containerBounds.left,
-    y: event.clientY - containerBounds.top,
-  };
-
   autoPan();
 
   setState({
@@ -200,28 +84,12 @@ export function handleMouseDown({
     connectionHandleId: handleId,
     connectionHandleType: handleType,
   });
+
   onConnectStart?.(event, { nodeId, handleId, handleType });
 
-  const handles = getState()
-    .getNodes()
-    .reduce<ConnectionHandle[]>((res, node) => {
-      if (node[internalsSymbol]) {
-        const { handleBounds } = node[internalsSymbol];
-        let sourceHandles: ConnectionHandle[] = [];
-        let targetHandles: ConnectionHandle[] = [];
-
-        if (handleBounds) {
-          sourceHandles = getHandles(node, handleBounds, 'source', `${nodeId}-${handleId}-${handleType}`);
-          targetHandles = getHandles(node, handleBounds, 'target', `${nodeId}-${handleId}-${handleType}`);
-        }
-
-        res.push(...sourceHandles, ...targetHandles);
-      }
-      return res;
-    }, []);
-
   function onMouseMove(event: MouseEvent) {
     const { transform } = getState();
+
     connectionPosition = {
       x: event.clientX - containerBounds.left,
       y: event.clientY - containerBounds.top,
@@ -230,7 +98,7 @@ export function handleMouseDown({
     prevClosestHandle = getClosestHandle(
       pointToRendererPoint(connectionPosition, transform, false, [1, 1]),
       connectionRadius,
-      handles
+      handleLookup
     );
 
     setState({
@@ -245,49 +113,53 @@ export function handleMouseDown({
         : connectionPosition,
     });
 
-    const { connection, elementBelow, isValid, isHoveringHandle } = isHandleValid(
-      prevClosestHandle,
-      connectionMode,
-      nodeId,
-      handleId,
-      isTarget ? 'target' : 'source',
-      isValidConnection,
-      doc
-    );
+    if (prevClosestHandle) {
+      const { connection, elementBelow, isValid, isHoveringHandle } = isValidHandle(
+        prevClosestHandle,
+        connectionMode,
+        nodeId,
+        handleId,
+        isTarget ? 'target' : 'source',
+        isValidConnection,
+        doc
+      );
 
-    if (!isHoveringHandle) {
-      return resetRecentHandle(recentHoveredHandle);
-    }
+      if (!isHoveringHandle) {
+        return resetRecentHandle(recentHoveredHandle);
+      }
 
-    if (connection.source !== connection.target && elementBelow) {
-      resetRecentHandle(recentHoveredHandle);
-      recentHoveredHandle = elementBelow;
-      elementBelow.classList.add('react-flow__handle-connecting');
-      elementBelow.classList.toggle('react-flow__handle-valid', isValid);
+      if (connection.source !== connection.target && elementBelow) {
+        resetRecentHandle(recentHoveredHandle);
+        recentHoveredHandle = elementBelow;
+        elementBelow.classList.add('react-flow__handle-connecting');
+        elementBelow.classList.toggle('react-flow__handle-valid', isValid);
+      }
     }
   }
 
   function onMouseUp(event: MouseEvent) {
     cancelAnimationFrame(autoPanId);
 
-    const { connection, isValid } = isHandleValid(
-      prevClosestHandle,
-      connectionMode,
-      nodeId,
-      handleId,
-      isTarget ? 'target' : 'source',
-      isValidConnection,
-      doc
-    );
+    if (prevClosestHandle) {
+      const { connection, isValid } = isValidHandle(
+        prevClosestHandle,
+        connectionMode,
+        nodeId,
+        handleId,
+        isTarget ? 'target' : 'source',
+        isValidConnection,
+        doc
+      );
 
-    if (isValid) {
-      onConnect?.(connection);
+      if (isValid) {
+        onConnect?.(connection);
+      }
     }
 
-    getState().onConnectEnd?.(event);
+    onConnectEnd?.(event);
 
-    if (elementEdgeUpdaterType && onEdgeUpdateEnd) {
-      onEdgeUpdateEnd(event);
+    if (elementEdgeUpdaterType) {
+      onEdgeUpdateEnd?.(event);
     }
 
     resetRecentHandle(recentHoveredHandle);
diff --git a/packages/core/src/components/Handle/index.tsx b/packages/core/src/components/Handle/index.tsx
index 2d9ebde0..19a78314 100644
--- a/packages/core/src/components/Handle/index.tsx
+++ b/packages/core/src/components/Handle/index.tsx
@@ -4,11 +4,12 @@ import { shallow } from 'zustand/shallow';
 
 import { useStore, useStoreApi } from '../../hooks/useStore';
 import { useNodeId } from '../../contexts/NodeIdContext';
-import { handleMouseDown, isHandleValid } from './handler';
-import { getHostForElement } from '../../utils';
+import { handleMouseDown } from './handler';
+import { devWarn, getHostForElement } from '../../utils';
 import { addEdge } from '../../utils/graph';
 import { Position } from '../../types';
 import type { HandleProps, Connection, ReactFlowState } from '../../types';
+import { isValidHandle } from './utils';
 
 const alwaysValid = () => true;
 
@@ -37,9 +38,13 @@ const Handle = forwardRef<HTMLDivElement, HandleComponentProps>(
     ref
   ) => {
     const store = useStoreApi();
+    const nodeId = useNodeId();
+
+    if (!nodeId) {
+      devWarn('Handle: No node id found. Make sure to only use a Handle inside a custom Node.');
+      return null;
+    }
 
-    // @fixme: remove type assertion and handle nodeId === null
-    const nodeId = useNodeId() as string;
     const { connectionStartHandle, connectOnClick, noPanClassName } = useStore(selector, shallow);
 
     const handleId = id || null;
@@ -86,7 +91,7 @@ const Handle = forwardRef<HTMLDivElement, HandleComponentProps>(
       }
 
       const doc = getHostForElement(event.target as HTMLElement);
-      const { connection, isValid } = isHandleValid(
+      const { connection, isValid } = isValidHandle(
         {
           nodeId,
           id: handleId,
diff --git a/packages/core/src/components/Handle/utils.ts b/packages/core/src/components/Handle/utils.ts
new file mode 100644
index 00000000..a476c515
--- /dev/null
+++ b/packages/core/src/components/Handle/utils.ts
@@ -0,0 +1,143 @@
+import { ConnectionMode, Node, NodeHandleBounds } from '../../types';
+import type { Connection, HandleType, XYPosition } from '../../types';
+import { internalsSymbol } from '../../utils';
+
+export type ConnectionHandle = {
+  id: string | null;
+  type: HandleType;
+  nodeId: string;
+  absX: number;
+  absY: number;
+  width: number;
+  height: number;
+};
+
+export type ValidConnectionFunc = (connection: Connection) => boolean;
+
+export function getHandles(
+  node: Node,
+  handleBounds: NodeHandleBounds,
+  type: HandleType,
+  currentHandle: string
+): ConnectionHandle[] {
+  return (handleBounds[type] || []).reduce<ConnectionHandle[]>((res, h) => {
+    if (`${node.id}-${h.id}-${type}` !== currentHandle) {
+      res.push({
+        id: h.id || null,
+        type,
+        nodeId: node.id,
+        absX: (node.positionAbsolute?.x ?? 0) + h.x,
+        absY: (node.positionAbsolute?.y ?? 0) + h.y,
+        width: h.width,
+        height: h.height,
+      });
+    }
+    return res;
+  }, []);
+}
+
+export function getClosestHandle(pos: XYPosition, connectionRadius: number, handles: ConnectionHandle[]) {
+  let closestHandle: ConnectionHandle | undefined;
+  let minDistance = Infinity;
+
+  handles.forEach((handle) => {
+    const distance = Math.sqrt(Math.pow(handle.absX - pos.x, 2) + Math.pow(handle.absY - pos.y, 2));
+    if (distance <= connectionRadius && distance < minDistance) {
+      minDistance = distance;
+      closestHandle = handle;
+    }
+  });
+
+  return closestHandle;
+}
+
+type Result = {
+  elementBelow: Element | null;
+  isValid: boolean;
+  connection: Connection;
+  isHoveringHandle: boolean;
+};
+
+// checks if  and returns connection in fom of an object { source: 123, target: 312 }
+export function isValidHandle(
+  handle: Pick<ConnectionHandle, 'nodeId' | 'id' | 'type'>,
+  connectionMode: ConnectionMode,
+  fromNodeId: string,
+  fromHandleId: string | null,
+  fromType: string,
+  isValidConnection: ValidConnectionFunc,
+  doc: Document | ShadowRoot
+) {
+  const result: Result = {
+    elementBelow: null,
+    isValid: false,
+    connection: { source: null, target: null, sourceHandle: null, targetHandle: null },
+    isHoveringHandle: false,
+  };
+  const isTarget = fromType === 'target';
+
+  const elementBelow = doc.querySelector(
+    `.react-flow__handle[data-id="${handle?.nodeId}-${handle?.id}-${handle?.type}"]`
+  );
+
+  if (elementBelow) {
+    const elementBelowIsTarget = handle.type === 'target';
+    const elementBelowIsSource = handle.type === 'source';
+    result.isHoveringHandle = true;
+
+    const elementBelowNodeId = elementBelow.getAttribute('data-nodeid');
+    const elementBelowHandleId = elementBelow.getAttribute('data-handleid');
+    const connection: Connection = isTarget
+      ? {
+          source: handle.nodeId,
+          sourceHandle: handle.id,
+          target: fromNodeId,
+          targetHandle: fromHandleId,
+        }
+      : {
+          source: fromNodeId,
+          sourceHandle: fromHandleId,
+          target: handle.nodeId,
+          targetHandle: handle.id,
+        };
+
+    result.connection = connection;
+
+    // in strict mode we don't allow target to target or source to source connections
+    const isValid =
+      connectionMode === ConnectionMode.Strict
+        ? (isTarget && elementBelowIsSource) || (!isTarget && elementBelowIsTarget)
+        : elementBelowNodeId !== handle.nodeId || elementBelowHandleId !== handle.id;
+
+    if (isValid) {
+      result.isValid = isValidConnection(connection);
+    }
+  }
+
+  return result;
+}
+
+type GetHandleLookupParams = {
+  nodes: Node[];
+  nodeId: string;
+  handleId: string | null;
+  handleType: string;
+};
+
+export function getHandleLookup({ nodes, nodeId, handleId, handleType }: GetHandleLookupParams) {
+  return nodes.reduce<ConnectionHandle[]>((res, node) => {
+    if (node[internalsSymbol]) {
+      const { handleBounds } = node[internalsSymbol];
+      let sourceHandles: ConnectionHandle[] = [];
+      let targetHandles: ConnectionHandle[] = [];
+
+      if (handleBounds) {
+        sourceHandles = getHandles(node, handleBounds, 'source', `${nodeId}-${handleId}-${handleType}`);
+        targetHandles = getHandles(node, handleBounds, 'target', `${nodeId}-${handleId}-${handleType}`);
+      }
+
+      res.push(...sourceHandles, ...targetHandles);
+    }
+    return res;
+  }, []);
+}
diff --git a/packages/core/src/hooks/useDrag/index.ts b/packages/core/src/hooks/useDrag/index.ts
index 56fece93..49cd7afe 100644
--- a/packages/core/src/hooks/useDrag/index.ts
+++ b/packages/core/src/hooks/useDrag/index.ts
@@ -114,13 +114,13 @@ function useDrag({
         const yMovement = calcAutoPanVelocity(mousePosition.current.y, 35, containerBounds.current.height - 35) * 20;
 
         if (xMovement !== 0 || yMovement !== 0) {
-          const { transform, movePane } = store.getState();
+          const { transform, panBy } = store.getState();
 
           lastPos.current.x = (lastPos.current.x ?? 0) - xMovement / transform[2];
           lastPos.current.y = (lastPos.current.y ?? 0) - yMovement / transform[2];
 
           updateNodes(lastPos.current as XYPosition);
-          movePane({ x: xMovement, y: yMovement });
+          panBy({ x: xMovement, y: yMovement });
         }
         autoPanId.current = requestAnimationFrame(autoPan);
       };
diff --git a/packages/core/src/store/index.ts b/packages/core/src/store/index.ts
index 4efac70f..0a79a4b1 100644
--- a/packages/core/src/store/index.ts
+++ b/packages/core/src/store/index.ts
@@ -252,7 +252,7 @@ const createRFStore = () =>
         nodeInternals: new Map(nodeInternals),
       });
     },
-    movePane: (delta: XYPosition) => {
+    panBy: (delta: XYPosition) => {
       const { transform, width, height, d3Zoom, d3Selection, translateExtent } = get();
 
       if (!d3Zoom || !d3Selection || (!delta.x && !delta.y)) {
diff --git a/packages/core/src/types/general.ts b/packages/core/src/types/general.ts
index b7b5c16e..6289c9c1 100644
--- a/packages/core/src/types/general.ts
+++ b/packages/core/src/types/general.ts
@@ -233,7 +233,7 @@ export type ReactFlowActions = {
   cancelConnection: () => void;
   reset: () => void;
   triggerNodeChanges: (changes: NodeChange[]) => void;
-  movePane: (delta: XYPosition) => void;
+  panBy: (delta: XYPosition) => void;
 };
 
 export type ReactFlowState = ReactFlowStore & ReactFlowActions;

From 00726085be1f828ea8c2262082a467b4cc27ad42 Mon Sep 17 00:00:00 2001
From: moklick <info@moritzklack.com>
Date: Thu, 19 Jan 2023 17:35:06 +0100
Subject: [PATCH 8/9] refactor(connections): cleanup, naming

---
 .../vite-app/src/examples/Subflow/index.tsx   |  1 +
 .../vite-app/src/examples/Switch/index.tsx    |  2 +-
 .../core/src/components/Handle/handler.ts     | 72 +++++++--------
 packages/core/src/components/Handle/utils.ts  | 88 +++++++++----------
 4 files changed, 82 insertions(+), 81 deletions(-)

diff --git a/examples/vite-app/src/examples/Subflow/index.tsx b/examples/vite-app/src/examples/Subflow/index.tsx
index 75bd3629..c3f10b46 100644
--- a/examples/vite-app/src/examples/Subflow/index.tsx
+++ b/examples/vite-app/src/examples/Subflow/index.tsx
@@ -12,6 +12,7 @@ import ReactFlow, {
   MiniMap,
   Background,
   Panel,
+  NodeOrigin,
 } from 'reactflow';
 
 import DebugNode from './DebugNode';
diff --git a/examples/vite-app/src/examples/Switch/index.tsx b/examples/vite-app/src/examples/Switch/index.tsx
index 7fde6bbd..658082ed 100644
--- a/examples/vite-app/src/examples/Switch/index.tsx
+++ b/examples/vite-app/src/examples/Switch/index.tsx
@@ -1,5 +1,5 @@
 import { MouseEvent, useCallback } from 'react';
-import ReactFlow, { addEdge, Node, Connection, Edge, useNodesState, useEdgesState } from 'reactflow';
+import ReactFlow, { addEdge, Node, Connection, Edge, useNodesState, useEdgesState, NodeOrigin } from 'reactflow';
 
 const onNodeDragStop = (_: MouseEvent, node: Node) => console.log('drag stop', node);
 const onNodeClick = (_: MouseEvent, node: Node) => console.log('click', node);
diff --git a/packages/core/src/components/Handle/handler.ts b/packages/core/src/components/Handle/handler.ts
index 51cfd32d..86aab175 100644
--- a/packages/core/src/components/Handle/handler.ts
+++ b/packages/core/src/components/Handle/handler.ts
@@ -4,11 +4,18 @@ import { StoreApi } from 'zustand';
 import { getHostForElement, calcAutoPanVelocity } from '../../utils';
 import type { OnConnect, HandleType, ReactFlowState } from '../../types';
 import { pointToRendererPoint, rendererPointToPoint } from '../../utils/graph';
-import { ConnectionHandle, getClosestHandle, getHandleLookup, isValidHandle, ValidConnectionFunc } from './utils';
+import {
+  ConnectionHandle,
+  getClosestHandle,
+  getConnectionPosition,
+  getHandleLookup,
+  isValidHandle,
+  ValidConnectionFunc,
+} from './utils';
 
-function resetRecentHandle(hoveredHandle: Element): void {
-  hoveredHandle?.classList.remove('react-flow__handle-valid');
-  hoveredHandle?.classList.remove('react-flow__handle-connecting');
+function resetRecentHandle(handleDomNode: Element): void {
+  handleDomNode?.classList.remove('react-flow__handle-valid');
+  handleDomNode?.classList.remove('react-flow__handle-connecting');
 }
 
 export function handleMouseDown({
@@ -39,7 +46,7 @@ export function handleMouseDown({
   const { connectionMode, domNode, autoPanOnConnect, connectionRadius, onConnectStart, onConnectEnd, panBy, getNodes } =
     getState();
   let autoPanId = 0;
-  let prevClosestHandle: ConnectionHandle | undefined;
+  let prevClosestHandle: ConnectionHandle | null;
 
   const clickedElement = doc?.elementFromPoint(event.clientX, event.clientY);
   const elementIsTarget = clickedElement?.classList.contains('target');
@@ -51,11 +58,8 @@ export function handleMouseDown({
 
   const handleType = elementEdgeUpdaterType ? elementEdgeUpdaterType : elementIsTarget ? 'target' : 'source';
   const containerBounds = domNode.getBoundingClientRect();
-  let recentHoveredHandle: Element;
-  let connectionPosition = {
-    x: event.clientX - containerBounds.left,
-    y: event.clientY - containerBounds.top,
-  };
+  let prevActiveHandle: Element;
+  let connectionPosition = getConnectionPosition(event, containerBounds);
 
   const handleLookup = getHandleLookup({
     nodes: getNodes(),
@@ -90,10 +94,7 @@ export function handleMouseDown({
   function onMouseMove(event: MouseEvent) {
     const { transform } = getState();
 
-    connectionPosition = {
-      x: event.clientX - containerBounds.left,
-      y: event.clientY - containerBounds.top,
-    };
+    connectionPosition = getConnectionPosition(event, containerBounds);
 
     prevClosestHandle = getClosestHandle(
       pointToRendererPoint(connectionPosition, transform, false, [1, 1]),
@@ -105,35 +106,33 @@ export function handleMouseDown({
       connectionPosition: prevClosestHandle
         ? rendererPointToPoint(
             {
-              x: prevClosestHandle.absX + prevClosestHandle.width / 2,
-              y: prevClosestHandle.absY + prevClosestHandle.height / 2,
+              x: prevClosestHandle.x,
+              y: prevClosestHandle.y,
             },
             transform
           )
         : connectionPosition,
     });
 
-    if (prevClosestHandle) {
-      const { connection, elementBelow, isValid, isHoveringHandle } = isValidHandle(
-        prevClosestHandle,
-        connectionMode,
-        nodeId,
-        handleId,
-        isTarget ? 'target' : 'source',
-        isValidConnection,
-        doc
-      );
+    if (!prevClosestHandle) {
+      return resetRecentHandle(prevActiveHandle);
+    }
 
-      if (!isHoveringHandle) {
-        return resetRecentHandle(recentHoveredHandle);
-      }
+    const { connection, handleDomNode, isValid } = isValidHandle(
+      prevClosestHandle,
+      connectionMode,
+      nodeId,
+      handleId,
+      isTarget ? 'target' : 'source',
+      isValidConnection,
+      doc
+    );
 
-      if (connection.source !== connection.target && elementBelow) {
-        resetRecentHandle(recentHoveredHandle);
-        recentHoveredHandle = elementBelow;
-        elementBelow.classList.add('react-flow__handle-connecting');
-        elementBelow.classList.toggle('react-flow__handle-valid', isValid);
-      }
+    if (connection.source !== connection.target && handleDomNode) {
+      resetRecentHandle(prevActiveHandle);
+      prevActiveHandle = handleDomNode;
+      handleDomNode.classList.add('react-flow__handle-connecting');
+      handleDomNode.classList.toggle('react-flow__handle-valid', isValid);
     }
   }
 
@@ -162,7 +161,8 @@ export function handleMouseDown({
       onEdgeUpdateEnd?.(event);
     }
 
-    resetRecentHandle(recentHoveredHandle);
+    resetRecentHandle(prevActiveHandle);
+
     setState({
       connectionNodeId: null,
       connectionHandleId: null,
diff --git a/packages/core/src/components/Handle/utils.ts b/packages/core/src/components/Handle/utils.ts
index a476c515..69d6f68c 100644
--- a/packages/core/src/components/Handle/utils.ts
+++ b/packages/core/src/components/Handle/utils.ts
@@ -1,19 +1,21 @@
-import { ConnectionMode, Node, NodeHandleBounds } from '../../types';
-import type { Connection, HandleType, XYPosition } from '../../types';
+import { MouseEvent as ReactMouseEvent } from 'react';
+
+import { ConnectionMode } from '../../types';
+import type { Connection, HandleType, XYPosition, Node, NodeHandleBounds } from '../../types';
 import { internalsSymbol } from '../../utils';
 
 export type ConnectionHandle = {
   id: string | null;
   type: HandleType;
   nodeId: string;
-  absX: number;
-  absY: number;
-  width: number;
-  height: number;
+  x: number;
+  y: number;
 };
 
 export type ValidConnectionFunc = (connection: Connection) => boolean;
 
+// this functions collects all handles and adds an absolute position
+// so that we can later find the closest handle to the mouse position
 export function getHandles(
   node: Node,
   handleBounds: NodeHandleBounds,
@@ -26,22 +28,24 @@ export function getHandles(
         id: h.id || null,
         type,
         nodeId: node.id,
-        absX: (node.positionAbsolute?.x ?? 0) + h.x,
-        absY: (node.positionAbsolute?.y ?? 0) + h.y,
-        width: h.width,
-        height: h.height,
+        x: (node.positionAbsolute?.x ?? 0) + h.x + h.width / 2,
+        y: (node.positionAbsolute?.y ?? 0) + h.y + h.height / 2,
       });
     }
     return res;
   }, []);
 }
 
-export function getClosestHandle(pos: XYPosition, connectionRadius: number, handles: ConnectionHandle[]) {
-  let closestHandle: ConnectionHandle | undefined;
+export function getClosestHandle(
+  pos: XYPosition,
+  connectionRadius: number,
+  handles: ConnectionHandle[]
+): ConnectionHandle | null {
+  let closestHandle: ConnectionHandle | null = null;
   let minDistance = Infinity;
 
   handles.forEach((handle) => {
-    const distance = Math.sqrt(Math.pow(handle.absX - pos.x, 2) + Math.pow(handle.absY - pos.y, 2));
+    const distance = Math.sqrt(Math.pow(handle.x - pos.x, 2) + Math.pow(handle.y - pos.y, 2));
     if (distance <= connectionRadius && distance < minDistance) {
       minDistance = distance;
       closestHandle = handle;
@@ -52,10 +56,9 @@ export function getClosestHandle(pos: XYPosition, connectionRadius: number, hand
 }
 
 type Result = {
-  elementBelow: Element | null;
+  handleDomNode: Element | null;
   isValid: boolean;
   connection: Connection;
-  isHoveringHandle: boolean;
 };
 
 // checks if  and returns connection in fom of an object { source: 123, target: 312 }
@@ -68,46 +71,36 @@ export function isValidHandle(
   isValidConnection: ValidConnectionFunc,
   doc: Document | ShadowRoot
 ) {
-  const result: Result = {
-    elementBelow: null,
-    isValid: false,
-    connection: { source: null, target: null, sourceHandle: null, targetHandle: null },
-    isHoveringHandle: false,
-  };
   const isTarget = fromType === 'target';
-
-  const elementBelow = doc.querySelector(
+  const handleDomNode = doc.querySelector(
     `.react-flow__handle[data-id="${handle?.nodeId}-${handle?.id}-${handle?.type}"]`
   );
+  const result: Result = {
+    handleDomNode,
+    isValid: false,
+    connection: { source: null, target: null, sourceHandle: null, targetHandle: null },
+  };
 
-  if (elementBelow) {
-    const elementBelowIsTarget = handle.type === 'target';
-    const elementBelowIsSource = handle.type === 'source';
-    result.isHoveringHandle = true;
+  if (handleDomNode) {
+    const handleIsTarget = handle.type === 'target';
+    const handleIsSource = handle.type === 'source';
+    const handleNodeId = handleDomNode.getAttribute('data-nodeid');
+    const handleId = handleDomNode.getAttribute('data-handleid');
 
-    const elementBelowNodeId = elementBelow.getAttribute('data-nodeid');
-    const elementBelowHandleId = elementBelow.getAttribute('data-handleid');
-    const connection: Connection = isTarget
-      ? {
-          source: handle.nodeId,
-          sourceHandle: handle.id,
-          target: fromNodeId,
-          targetHandle: fromHandleId,
-        }
-      : {
-          source: fromNodeId,
-          sourceHandle: fromHandleId,
-          target: handle.nodeId,
-          targetHandle: handle.id,
-        };
+    const connection: Connection = {
+      source: isTarget ? handle.nodeId : fromNodeId,
+      sourceHandle: isTarget ? handle.id : fromHandleId,
+      target: isTarget ? fromNodeId : handle.nodeId,
+      targetHandle: isTarget ? fromHandleId : handle.id,
+    };
 
     result.connection = connection;
 
     // in strict mode we don't allow target to target or source to source connections
     const isValid =
       connectionMode === ConnectionMode.Strict
-        ? (isTarget && elementBelowIsSource) || (!isTarget && elementBelowIsTarget)
-        : elementBelowNodeId !== handle.nodeId || elementBelowHandleId !== handle.id;
+        ? (isTarget && handleIsSource) || (!isTarget && handleIsTarget)
+        : handleNodeId !== handle.nodeId || handleId !== handle.id;
 
     if (isValid) {
       result.isValid = isValidConnection(connection);
@@ -141,3 +134,10 @@ export function getHandleLookup({ nodes, nodeId, handleId, handleType }: GetHand
     return res;
   }, []);
 }
+
+export function getConnectionPosition(event: MouseEvent | ReactMouseEvent, bounds: DOMRect): XYPosition {
+  return {
+    x: event.clientX - bounds.left,
+    y: event.clientY - bounds.top,
+  };
+}

From 24e8b8adc06546db64e9639cbd02cb64f5504672 Mon Sep 17 00:00:00 2001
From: moklick <info@moritzklack.com>
Date: Mon, 23 Jan 2023 15:05:18 +0100
Subject: [PATCH 9/9] refactor(autopan): cleanup

---
 packages/core/src/components/Handle/handler.ts | 15 +++++++++------
 packages/core/src/hooks/useDrag/index.ts       |  5 ++---
 packages/core/src/utils/index.ts               | 13 ++++++++++---
 3 files changed, 21 insertions(+), 12 deletions(-)

diff --git a/packages/core/src/components/Handle/handler.ts b/packages/core/src/components/Handle/handler.ts
index 86aab175..40be2090 100644
--- a/packages/core/src/components/Handle/handler.ts
+++ b/packages/core/src/components/Handle/handler.ts
@@ -1,7 +1,7 @@
 import type { MouseEvent as ReactMouseEvent } from 'react';
 import { StoreApi } from 'zustand';
 
-import { getHostForElement, calcAutoPanVelocity } from '../../utils';
+import { getHostForElement, calcAutoPan } from '../../utils';
 import type { OnConnect, HandleType, ReactFlowState } from '../../types';
 import { pointToRendererPoint, rendererPointToPoint } from '../../utils/graph';
 import {
@@ -60,6 +60,7 @@ export function handleMouseDown({
   const containerBounds = domNode.getBoundingClientRect();
   let prevActiveHandle: Element;
   let connectionPosition = getConnectionPosition(event, containerBounds);
+  let autoPanStarted = false;
 
   const handleLookup = getHandleLookup({
     nodes: getNodes(),
@@ -73,15 +74,12 @@ export function handleMouseDown({
     if (!autoPanOnConnect) {
       return;
     }
-    const xMovement = calcAutoPanVelocity(connectionPosition.x, 35, containerBounds.width - 35) * 20;
-    const yMovement = calcAutoPanVelocity(connectionPosition.y, 35, containerBounds.height - 35) * 20;
+    const [xMovement, yMovement] = calcAutoPan(connectionPosition, containerBounds);
 
     panBy({ x: xMovement, y: yMovement });
     autoPanId = requestAnimationFrame(autoPan);
   };
 
-  autoPan();
-
   setState({
     connectionPosition,
     connectionNodeId: nodeId,
@@ -95,13 +93,17 @@ export function handleMouseDown({
     const { transform } = getState();
 
     connectionPosition = getConnectionPosition(event, containerBounds);
-
     prevClosestHandle = getClosestHandle(
       pointToRendererPoint(connectionPosition, transform, false, [1, 1]),
       connectionRadius,
       handleLookup
     );
 
+    if (!autoPanStarted) {
+      autoPan();
+      autoPanStarted = true;
+    }
+
     setState({
       connectionPosition: prevClosestHandle
         ? rendererPointToPoint(
@@ -138,6 +140,7 @@ export function handleMouseDown({
 
   function onMouseUp(event: MouseEvent) {
     cancelAnimationFrame(autoPanId);
+    autoPanStarted = false;
 
     if (prevClosestHandle) {
       const { connection, isValid } = isValidHandle(
diff --git a/packages/core/src/hooks/useDrag/index.ts b/packages/core/src/hooks/useDrag/index.ts
index 49cd7afe..c9d0ab3d 100644
--- a/packages/core/src/hooks/useDrag/index.ts
+++ b/packages/core/src/hooks/useDrag/index.ts
@@ -7,7 +7,7 @@ import { useStoreApi } from '../../hooks/useStore';
 import { getDragItems, getEventHandlerParams, hasSelector, calcNextPosition } from './utils';
 import { handleNodeClick } from '../../components/Nodes/utils';
 import useGetPointerPosition from '../useGetPointerPosition';
-import { calcAutoPanVelocity } from '../../utils';
+import { calcAutoPan } from '../../utils';
 import type { NodeDragItem, Node, SelectionDragHandler, UseDragEvent, XYPosition } from '../../types';
 
 export type UseDragData = { dx: number; dy: number };
@@ -110,8 +110,7 @@ function useDrag({
           return;
         }
 
-        const xMovement = calcAutoPanVelocity(mousePosition.current.x, 35, containerBounds.current.width - 35) * 20;
-        const yMovement = calcAutoPanVelocity(mousePosition.current.y, 35, containerBounds.current.height - 35) * 20;
+        const [xMovement, yMovement] = calcAutoPan(mousePosition.current, containerBounds.current);
 
         if (xMovement !== 0 || yMovement !== 0) {
           const { transform, panBy } = store.getState();
diff --git a/packages/core/src/utils/index.ts b/packages/core/src/utils/index.ts
index 2364f352..30aa3789 100644
--- a/packages/core/src/utils/index.ts
+++ b/packages/core/src/utils/index.ts
@@ -16,16 +16,23 @@ export const clampPosition = (position: XYPosition = { x: 0, y: 0 }, extent: Coo
 
 // 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 calcAutoPanVelocity = (value: number, min: number, max: number): number => {
+const calcAutoPanVelocity = (value: number, min: number, max: number): number => {
   if (value < min) {
-    return clamp(Math.abs(value - min), 1, 100) / 100;
+    return clamp(Math.abs(value - min), 1, 50) / 50;
   } else if (value > max) {
-    return -clamp(Math.abs(value - max), 1, 100) / 100;
+    return -clamp(Math.abs(value - max), 1, 50) / 50;
   }
 
   return 0;
 };
 
+export const calcAutoPan = (pos: XYPosition, bounds: Dimensions): number[] => {
+  const xMovement = calcAutoPanVelocity(pos.x, 35, bounds.width - 35) * 20;
+  const yMovement = calcAutoPanVelocity(pos.y, 35, bounds.height - 35) * 20;
+
+  return [xMovement, yMovement];
+};
+
 export const getHostForElement = (element: HTMLElement): Document | ShadowRoot =>
   (element.getRootNode?.() as Document | ShadowRoot) || window?.document;