From a1cc9da535aea7c3907e4eaf7fdebfc5701bcf58 Mon Sep 17 00:00:00 2001
From: Richard Schulz <richard.schulz@taktile.com>
Date: Tue, 29 Nov 2022 17:24:34 +0100
Subject: [PATCH 01/30] Add generic support for the type property on the Node
 type

---
 packages/core/src/types/nodes.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/core/src/types/nodes.ts b/packages/core/src/types/nodes.ts
index 39d8755c..4d4c66b1 100644
--- a/packages/core/src/types/nodes.ts
+++ b/packages/core/src/types/nodes.ts
@@ -5,11 +5,11 @@ import { internalsSymbol } from '../utils';
 import type { XYPosition, Position, CoordinateExtent, HandleElement } from '.';
 
 // interface for the user node items
-export type Node<T = any> = {
+export type Node<T = any, U extends string | undefined = string | undefined> = {
   id: string;
   position: XYPosition;
   data: T;
-  type?: string;
+  type: U;
   style?: CSSProperties;
   className?: string;
   sourcePosition?: Position;

From 4d7a5e785ceaddf7b5932d624806161a04b30963 Mon Sep 17 00:00:00 2001
From: moklick <info@moritzklack.com>
Date: Thu, 12 Jan 2023 14:34:39 +0100
Subject: [PATCH 02/30] feat(node-resizer): add onBeforeResize handler

---
 .../examples/NodeResizer/CustomResizer.tsx    |  4 +--
 .../examples/NodeResizer/CustomResizer2.tsx   |  6 ++--
 .../examples/NodeResizer/CustomResizer3.tsx   | 31 +++++++++++++++++++
 .../examples/NodeResizer/NodeResizerNode.tsx  |  5 +++
 .../src/examples/NodeResizer/index.tsx        | 11 ++++++-
 packages/node-resizer/src/NodeResizer.tsx     |  3 ++
 packages/node-resizer/src/ResizeControl.tsx   |  5 +++
 packages/node-resizer/src/types.ts            |  3 +-
 8 files changed, 61 insertions(+), 7 deletions(-)
 create mode 100644 examples/vite-app/src/examples/NodeResizer/CustomResizer3.tsx

diff --git a/examples/vite-app/src/examples/NodeResizer/CustomResizer.tsx b/examples/vite-app/src/examples/NodeResizer/CustomResizer.tsx
index 996e24c5..6cf58fd9 100644
--- a/examples/vite-app/src/examples/NodeResizer/CustomResizer.tsx
+++ b/examples/vite-app/src/examples/NodeResizer/CustomResizer.tsx
@@ -1,7 +1,7 @@
-import { memo, FC, CSSProperties } from 'react';
+import { memo, FC } from 'react';
 import { Handle, Position, NodeProps } from 'reactflow';
 
-import { NodeResizer, NodeResizeControl } from '@reactflow/node-resizer';
+import { NodeResizeControl } from '@reactflow/node-resizer';
 import '@reactflow/node-resizer/dist/style.css';
 import ResizeIcon from './ResizeIcon';
 
diff --git a/examples/vite-app/src/examples/NodeResizer/CustomResizer2.tsx b/examples/vite-app/src/examples/NodeResizer/CustomResizer2.tsx
index 27833556..63ff061b 100644
--- a/examples/vite-app/src/examples/NodeResizer/CustomResizer2.tsx
+++ b/examples/vite-app/src/examples/NodeResizer/CustomResizer2.tsx
@@ -1,14 +1,14 @@
 import { memo, FC } from 'react';
 import { Handle, Position, NodeProps } from 'reactflow';
 
-import { NodeResizer, NodeResizeControl } from '@reactflow/node-resizer';
+import { NodeResizeControl } from '@reactflow/node-resizer';
 import '@reactflow/node-resizer/dist/style.css';
 
 const CustomNode: FC<NodeProps> = ({ id, data }) => {
   return (
     <>
-      <NodeResizeControl color="red" position="top" />
-      <NodeResizeControl color="red" position="bottom" />
+      <NodeResizeControl color="red" position={Position.Top} />
+      <NodeResizeControl color="red" position={Position.Bottom} />
       <Handle type="target" position={Position.Left} />
       <div style={{ padding: 10 }}>{data.label}</div>
       <Handle type="source" position={Position.Right} />
diff --git a/examples/vite-app/src/examples/NodeResizer/CustomResizer3.tsx b/examples/vite-app/src/examples/NodeResizer/CustomResizer3.tsx
new file mode 100644
index 00000000..adae9adb
--- /dev/null
+++ b/examples/vite-app/src/examples/NodeResizer/CustomResizer3.tsx
@@ -0,0 +1,31 @@
+import { memo, FC } from 'react';
+import { Handle, Position, NodeProps } from 'reactflow';
+
+import { NodeResizeControl, ResizeDragEvent, ResizeEventParams } from '@reactflow/node-resizer';
+import '@reactflow/node-resizer/dist/style.css';
+
+const onBeforeResize = (event: ResizeDragEvent, params: ResizeEventParams) => {
+  console.log('before resize', params);
+
+  if (params.width > 100) {
+    return false;
+  }
+};
+
+const onResize = (event: ResizeDragEvent, params: ResizeEventParams) => {
+  console.log('resize', params);
+};
+
+const CustomNode: FC<NodeProps> = ({ id, data }) => {
+  return (
+    <>
+      <NodeResizeControl color="red" position={Position.Left} />
+      <NodeResizeControl color="red" position={Position.Right} onBeforeResize={onBeforeResize} onResize={onResize} />
+      <Handle type="target" position={Position.Top} />
+      <div style={{ padding: 10 }}>{data.label}</div>
+      <Handle type="source" position={Position.Bottom} />
+    </>
+  );
+};
+
+export default memo(CustomNode);
diff --git a/examples/vite-app/src/examples/NodeResizer/NodeResizerNode.tsx b/examples/vite-app/src/examples/NodeResizer/NodeResizerNode.tsx
index a8f76eca..0f6ef37e 100644
--- a/examples/vite-app/src/examples/NodeResizer/NodeResizerNode.tsx
+++ b/examples/vite-app/src/examples/NodeResizer/NodeResizerNode.tsx
@@ -8,6 +8,10 @@ const onResizeStart = (_: ResizeDragEvent, params: ResizeEventParams) => {
   console.log('resize start', params);
 };
 
+const onBeforeResize = (_: ResizeDragEvent, params: ResizeEventParams) => {
+  console.log('before resize', params);
+};
+
 const onResize = (_: ResizeDragEvent, params: ResizeEventParams) => {
   console.log('resize', params);
 };
@@ -24,6 +28,7 @@ const CustomNode: FC<NodeProps> = ({ data, selected }) => {
         minHeight={100}
         isVisible={selected}
         onResizeStart={onResizeStart}
+        onBeforeResize={onBeforeResize}
         onResize={onResize}
         onResizeEnd={onResizeEnd}
       />
diff --git a/examples/vite-app/src/examples/NodeResizer/index.tsx b/examples/vite-app/src/examples/NodeResizer/index.tsx
index 68afe5df..01bb0851 100644
--- a/examples/vite-app/src/examples/NodeResizer/index.tsx
+++ b/examples/vite-app/src/examples/NodeResizer/index.tsx
@@ -4,11 +4,13 @@ import ReactFlow, { Controls, addEdge, Position, Connection, useNodesState, useE
 import NodeResizerNode from './NodeResizerNode';
 import CustomResizer from './CustomResizer';
 import CustomResizer2 from './CustomResizer2';
+import CustomResizer3 from './CustomResizer3';
 
 const nodeTypes = {
   resizer: NodeResizerNode,
   customResizer: CustomResizer,
   customResizer2: CustomResizer2,
+  customResizer3: CustomResizer3,
 };
 
 const initialEdges = [
@@ -60,6 +62,13 @@ const initialNodes = [
     position: { x: 250, y: 250 },
     style: { border: '1px solid #222', fontSize: 10 },
   },
+  {
+    id: '6',
+    type: 'customResizer3',
+    data: { label: 'resize controls' },
+    position: { x: 400, y: 200 },
+    style: { border: '1px solid #222', fontSize: 10 },
+  },
 ];
 
 const CustomNodeFlow = () => {
@@ -87,7 +96,7 @@ const CustomNodeFlow = () => {
     >
       <Controls />
       <Panel position="bottom-right">
-        <button onClick={() => setSnapToGrid(!snapToGrid)}>snapToGrid: {snapToGrid ? 'on' : 'off'}</button>
+        <button onClick={() => setSnapToGrid((s) => !s)}>snapToGrid: {snapToGrid ? 'on' : 'off'}</button>
       </Panel>
     </ReactFlow>
   );
diff --git a/packages/node-resizer/src/NodeResizer.tsx b/packages/node-resizer/src/NodeResizer.tsx
index f676e79a..9d36919b 100644
--- a/packages/node-resizer/src/NodeResizer.tsx
+++ b/packages/node-resizer/src/NodeResizer.tsx
@@ -15,6 +15,7 @@ export default function NodeResizer({
   minWidth = 10,
   minHeight = 10,
   onResizeStart,
+  onBeforeResize,
   onResize,
   onResizeEnd,
 }: NodeResizerProps) {
@@ -36,6 +37,7 @@ export default function NodeResizer({
           minWidth={minWidth}
           minHeight={minHeight}
           onResizeStart={onResizeStart}
+          onBeforeResize={onBeforeResize}
           onResize={onResize}
           onResizeEnd={onResizeEnd}
         />
@@ -51,6 +53,7 @@ export default function NodeResizer({
           minWidth={minWidth}
           minHeight={minHeight}
           onResizeStart={onResizeStart}
+          onBeforeResize={onBeforeResize}
           onResize={onResize}
           onResizeEnd={onResizeEnd}
         />
diff --git a/packages/node-resizer/src/ResizeControl.tsx b/packages/node-resizer/src/ResizeControl.tsx
index 654b3249..6aebd256 100644
--- a/packages/node-resizer/src/ResizeControl.tsx
+++ b/packages/node-resizer/src/ResizeControl.tsx
@@ -32,6 +32,7 @@ function ResizeControl({
   minWidth = 10,
   minHeight = 10,
   onResizeStart,
+  onBeforeResize,
   onResize,
   onResizeEnd,
 }: ResizeControlProps) {
@@ -98,6 +99,7 @@ function ResizeControl({
           const height = Math.max(startHeight + (invertY ? -distY : distY), minHeight);
           const isWidthChange = width !== prevWidth;
           const isHeightChange = height !== prevHeight;
+          const onBeforeResizeResult = onBeforeResize?.(event, { ...prevValues.current });
 
           if (invertX || invertY) {
             const x = invertX ? startNodeX - (width - startWidth) : startNodeX;
@@ -139,6 +141,9 @@ function ResizeControl({
             prevValues.current.width = width;
             prevValues.current.height = height;
           }
+          if (onBeforeResizeResult === false) {
+            return;
+          }
 
           onResize?.(event, { ...prevValues.current });
           triggerNodeChanges(changes);
diff --git a/packages/node-resizer/src/types.ts b/packages/node-resizer/src/types.ts
index 9dc808f6..8388e89d 100644
--- a/packages/node-resizer/src/types.ts
+++ b/packages/node-resizer/src/types.ts
@@ -19,6 +19,7 @@ export type NodeResizerProps = {
   minWidth?: number;
   minHeight?: number;
   onResizeStart?: (event: ResizeDragEvent, params: ResizeEventParams) => void;
+  onBeforeResize?: (event: ResizeDragEvent, params: ResizeEventParams) => unknown;
   onResize?: (event: ResizeDragEvent, params: ResizeEventParams) => void;
   onResizeEnd?: (event: ResizeDragEvent, params: ResizeEventParams) => void;
 };
@@ -34,7 +35,7 @@ export enum ResizeControlVariant {
 
 export type ResizeControlProps = Pick<
   NodeResizerProps,
-  'nodeId' | 'color' | 'minWidth' | 'minHeight' | 'onResizeStart' | 'onResize' | 'onResizeEnd'
+  'nodeId' | 'color' | 'minWidth' | 'minHeight' | 'onResizeStart' | 'onBeforeResize' | 'onResize' | 'onResizeEnd'
 > & {
   position?: ControlPosition;
   variant?: ResizeControlVariant;

From e6b71d474f7941e72b641bd1c040ec8e6c1abf8d Mon Sep 17 00:00:00 2001
From: moklick <info@moritzklack.com>
Date: Sun, 15 Jan 2023 11:56:46 +0100
Subject: [PATCH 03/30] feat(node-resizer): add direction, cleanup types

---
 .../examples/NodeResizer/CustomResizer3.tsx   |  8 +++---
 .../examples/NodeResizer/NodeResizerNode.tsx  | 10 +++----
 packages/node-resizer/src/ResizeControl.tsx   | 20 ++++++++++++--
 packages/node-resizer/src/types.ts            | 21 +++++++++++----
 packages/node-resizer/src/utils.ts            | 26 +++++++++++++++++++
 5 files changed, 69 insertions(+), 16 deletions(-)
 create mode 100644 packages/node-resizer/src/utils.ts

diff --git a/examples/vite-app/src/examples/NodeResizer/CustomResizer3.tsx b/examples/vite-app/src/examples/NodeResizer/CustomResizer3.tsx
index adae9adb..33a3e5f5 100644
--- a/examples/vite-app/src/examples/NodeResizer/CustomResizer3.tsx
+++ b/examples/vite-app/src/examples/NodeResizer/CustomResizer3.tsx
@@ -1,10 +1,10 @@
 import { memo, FC } from 'react';
 import { Handle, Position, NodeProps } from 'reactflow';
 
-import { NodeResizeControl, ResizeDragEvent, ResizeEventParams } from '@reactflow/node-resizer';
+import { NodeResizeControl, OnResize, OnBeforeResize } from '@reactflow/node-resizer';
 import '@reactflow/node-resizer/dist/style.css';
 
-const onBeforeResize = (event: ResizeDragEvent, params: ResizeEventParams) => {
+const onBeforeResize: OnBeforeResize = (event, params) => {
   console.log('before resize', params);
 
   if (params.width > 100) {
@@ -12,8 +12,8 @@ const onBeforeResize = (event: ResizeDragEvent, params: ResizeEventParams) => {
   }
 };
 
-const onResize = (event: ResizeDragEvent, params: ResizeEventParams) => {
-  console.log('resize', params);
+const onResize: OnResize = (event, params) => {
+  console.log('resize', params.direction);
 };
 
 const CustomNode: FC<NodeProps> = ({ id, data }) => {
diff --git a/examples/vite-app/src/examples/NodeResizer/NodeResizerNode.tsx b/examples/vite-app/src/examples/NodeResizer/NodeResizerNode.tsx
index 0f6ef37e..e9f09894 100644
--- a/examples/vite-app/src/examples/NodeResizer/NodeResizerNode.tsx
+++ b/examples/vite-app/src/examples/NodeResizer/NodeResizerNode.tsx
@@ -1,22 +1,22 @@
 import { memo, FC } from 'react';
 import { Handle, Position, NodeProps } from 'reactflow';
 
-import { NodeResizer, ResizeDragEvent, ResizeEventParams } from '@reactflow/node-resizer';
+import { NodeResizer, OnBeforeResize, OnResize, OnResizeEnd, OnResizeStart } from '@reactflow/node-resizer';
 import '@reactflow/node-resizer/dist/style.css';
 
-const onResizeStart = (_: ResizeDragEvent, params: ResizeEventParams) => {
+const onResizeStart: OnResizeStart = (_, params) => {
   console.log('resize start', params);
 };
 
-const onBeforeResize = (_: ResizeDragEvent, params: ResizeEventParams) => {
+const onBeforeResize: OnBeforeResize = (_, params) => {
   console.log('before resize', params);
 };
 
-const onResize = (_: ResizeDragEvent, params: ResizeEventParams) => {
+const onResize: OnResize = (_, params) => {
   console.log('resize', params);
 };
 
-const onResizeEnd = (_: ResizeDragEvent, params: ResizeEventParams) => {
+const onResizeEnd: OnResizeEnd = (_, params) => {
   console.log('resize end', params);
 };
 
diff --git a/packages/node-resizer/src/ResizeControl.tsx b/packages/node-resizer/src/ResizeControl.tsx
index 6aebd256..138d2345 100644
--- a/packages/node-resizer/src/ResizeControl.tsx
+++ b/packages/node-resizer/src/ResizeControl.tsx
@@ -12,6 +12,7 @@ import {
 } from '@reactflow/core';
 
 import { ResizeDragEvent, ResizeControlProps, ResizeControlLineProps, ResizeControlVariant } from './types';
+import { getDirection } from './utils';
 
 const initPrevValues = { width: 0, height: 0, x: 0, y: 0 };
 
@@ -99,7 +100,6 @@ function ResizeControl({
           const height = Math.max(startHeight + (invertY ? -distY : distY), minHeight);
           const isWidthChange = width !== prevWidth;
           const isHeightChange = height !== prevHeight;
-          const onBeforeResizeResult = onBeforeResize?.(event, { ...prevValues.current });
 
           if (invertX || invertY) {
             const x = invertX ? startNodeX - (width - startWidth) : startNodeX;
@@ -141,11 +141,27 @@ function ResizeControl({
             prevValues.current.width = width;
             prevValues.current.height = height;
           }
+
+          if (changes.length === 0) {
+            return;
+          }
+
+          const onBeforeResizeResult = onBeforeResize?.(event, { ...prevValues.current });
+
           if (onBeforeResizeResult === false) {
             return;
           }
 
-          onResize?.(event, { ...prevValues.current });
+          const direction = getDirection({
+            width: prevValues.current.width,
+            prevWidth,
+            height: prevValues.current.height,
+            prevHeight,
+            invertX,
+            invertY,
+          });
+
+          onResize?.(event, { ...prevValues.current, direction });
           triggerNodeChanges(changes);
         }
       })
diff --git a/packages/node-resizer/src/types.ts b/packages/node-resizer/src/types.ts
index 8388e89d..2bd674db 100644
--- a/packages/node-resizer/src/types.ts
+++ b/packages/node-resizer/src/types.ts
@@ -1,13 +1,24 @@
 import type { CSSProperties, ReactNode } from 'react';
 import type { D3DragEvent, SubjectPosition } from 'd3-drag';
 
-export type ResizeEventParams = {
+export type ResizeParams = {
   x: number;
   y: number;
   width: number;
   height: number;
 };
 
+export type ResizeParamsWithDirection = ResizeParams & {
+  direction: number[];
+};
+
+type OnResizeHandler<Params = ResizeParams, Result = void> = (event: ResizeDragEvent, params: Params) => Result;
+
+export type OnResizeStart = OnResizeHandler;
+export type OnBeforeResize = OnResizeHandler<ResizeParams, unknown>;
+export type OnResize = OnResizeHandler<ResizeParamsWithDirection>;
+export type OnResizeEnd = OnResizeHandler;
+
 export type NodeResizerProps = {
   nodeId?: string;
   color?: string;
@@ -18,10 +29,10 @@ export type NodeResizerProps = {
   isVisible?: boolean;
   minWidth?: number;
   minHeight?: number;
-  onResizeStart?: (event: ResizeDragEvent, params: ResizeEventParams) => void;
-  onBeforeResize?: (event: ResizeDragEvent, params: ResizeEventParams) => unknown;
-  onResize?: (event: ResizeDragEvent, params: ResizeEventParams) => void;
-  onResizeEnd?: (event: ResizeDragEvent, params: ResizeEventParams) => void;
+  onResizeStart?: OnResizeStart;
+  onBeforeResize?: OnBeforeResize;
+  onResize?: OnResize;
+  onResizeEnd?: OnResizeEnd;
 };
 
 export type ControlLinePosition = 'top' | 'bottom' | 'left' | 'right';
diff --git a/packages/node-resizer/src/utils.ts b/packages/node-resizer/src/utils.ts
new file mode 100644
index 00000000..00d81d81
--- /dev/null
+++ b/packages/node-resizer/src/utils.ts
@@ -0,0 +1,26 @@
+type GetDirectionParams = {
+  width: number;
+  prevWidth: number;
+  height: number;
+  prevHeight: number;
+  invertX: boolean;
+  invertY: boolean;
+};
+
+// returns an array of two numbers (0, 1 or -1) representing the direction of the resize
+// 0 = no change, 1 = increase, -1 = decrease
+export function getDirection({ width, prevWidth, height, prevHeight, invertX, invertY }: GetDirectionParams) {
+  const deltaWidth = width - prevWidth;
+  const deltaHeight = height - prevHeight;
+
+  const direction = [deltaWidth > 0 ? 1 : deltaWidth < 0 ? -1 : 0, deltaHeight > 0 ? 1 : deltaHeight < 0 ? -1 : 0];
+
+  if (deltaWidth && invertX) {
+    direction[0] = direction[0] * -1;
+  }
+
+  if (deltaHeight && invertY) {
+    direction[1] = direction[1] * -1;
+  }
+  return direction;
+}

From 1ab7a0f0d9368e86cece63f34960464b0035f2f1 Mon Sep 17 00:00:00 2001
From: moklick <info@moritzklack.com>
Date: Mon, 16 Jan 2023 14:39:11 +0100
Subject: [PATCH 04/30] refactor(node-resizer): rename onBeforeResize to
 shouldResize, cleanup types

---
 .../examples/NodeResizer/CustomResizer3.tsx    |  8 +++++---
 .../examples/NodeResizer/NodeResizerNode.tsx   | 14 ++++++++------
 packages/node-resizer/src/NodeResizer.tsx      |  6 +++---
 packages/node-resizer/src/ResizeControl.tsx    | 18 ++++++++++--------
 packages/node-resizer/src/types.ts             |  6 +++---
 5 files changed, 29 insertions(+), 23 deletions(-)

diff --git a/examples/vite-app/src/examples/NodeResizer/CustomResizer3.tsx b/examples/vite-app/src/examples/NodeResizer/CustomResizer3.tsx
index 33a3e5f5..422f2982 100644
--- a/examples/vite-app/src/examples/NodeResizer/CustomResizer3.tsx
+++ b/examples/vite-app/src/examples/NodeResizer/CustomResizer3.tsx
@@ -1,15 +1,17 @@
 import { memo, FC } from 'react';
 import { Handle, Position, NodeProps } from 'reactflow';
 
-import { NodeResizeControl, OnResize, OnBeforeResize } from '@reactflow/node-resizer';
+import { NodeResizeControl, OnResize, ShouldResize } from '@reactflow/node-resizer';
 import '@reactflow/node-resizer/dist/style.css';
 
-const onBeforeResize: OnBeforeResize = (event, params) => {
+const shouldResize: ShouldResize = (event, params) => {
   console.log('before resize', params);
 
   if (params.width > 100) {
     return false;
   }
+
+  return true;
 };
 
 const onResize: OnResize = (event, params) => {
@@ -20,7 +22,7 @@ const CustomNode: FC<NodeProps> = ({ id, data }) => {
   return (
     <>
       <NodeResizeControl color="red" position={Position.Left} />
-      <NodeResizeControl color="red" position={Position.Right} onBeforeResize={onBeforeResize} onResize={onResize} />
+      <NodeResizeControl color="red" position={Position.Right} shouldResize={shouldResize} onResize={onResize} />
       <Handle type="target" position={Position.Top} />
       <div style={{ padding: 10 }}>{data.label}</div>
       <Handle type="source" position={Position.Bottom} />
diff --git a/examples/vite-app/src/examples/NodeResizer/NodeResizerNode.tsx b/examples/vite-app/src/examples/NodeResizer/NodeResizerNode.tsx
index e9f09894..03e4960f 100644
--- a/examples/vite-app/src/examples/NodeResizer/NodeResizerNode.tsx
+++ b/examples/vite-app/src/examples/NodeResizer/NodeResizerNode.tsx
@@ -1,17 +1,13 @@
 import { memo, FC } from 'react';
 import { Handle, Position, NodeProps } from 'reactflow';
 
-import { NodeResizer, OnBeforeResize, OnResize, OnResizeEnd, OnResizeStart } from '@reactflow/node-resizer';
+import { NodeResizer, ShouldResize, OnResize, OnResizeEnd, OnResizeStart } from '@reactflow/node-resizer';
 import '@reactflow/node-resizer/dist/style.css';
 
 const onResizeStart: OnResizeStart = (_, params) => {
   console.log('resize start', params);
 };
 
-const onBeforeResize: OnBeforeResize = (_, params) => {
-  console.log('before resize', params);
-};
-
 const onResize: OnResize = (_, params) => {
   console.log('resize', params);
 };
@@ -20,6 +16,12 @@ const onResizeEnd: OnResizeEnd = (_, params) => {
   console.log('resize end', params);
 };
 
+const shouldResize: ShouldResize = (_, params) => {
+  console.log('should resize', params);
+
+  return true;
+};
+
 const CustomNode: FC<NodeProps> = ({ data, selected }) => {
   return (
     <>
@@ -27,8 +29,8 @@ const CustomNode: FC<NodeProps> = ({ data, selected }) => {
         minWidth={100}
         minHeight={100}
         isVisible={selected}
+        shouldResize={shouldResize}
         onResizeStart={onResizeStart}
-        onBeforeResize={onBeforeResize}
         onResize={onResize}
         onResizeEnd={onResizeEnd}
       />
diff --git a/packages/node-resizer/src/NodeResizer.tsx b/packages/node-resizer/src/NodeResizer.tsx
index 9d36919b..c7a3b8a6 100644
--- a/packages/node-resizer/src/NodeResizer.tsx
+++ b/packages/node-resizer/src/NodeResizer.tsx
@@ -14,8 +14,8 @@ export default function NodeResizer({
   color,
   minWidth = 10,
   minHeight = 10,
+  shouldResize,
   onResizeStart,
-  onBeforeResize,
   onResize,
   onResizeEnd,
 }: NodeResizerProps) {
@@ -37,7 +37,7 @@ export default function NodeResizer({
           minWidth={minWidth}
           minHeight={minHeight}
           onResizeStart={onResizeStart}
-          onBeforeResize={onBeforeResize}
+          shouldResize={shouldResize}
           onResize={onResize}
           onResizeEnd={onResizeEnd}
         />
@@ -53,7 +53,7 @@ export default function NodeResizer({
           minWidth={minWidth}
           minHeight={minHeight}
           onResizeStart={onResizeStart}
-          onBeforeResize={onBeforeResize}
+          shouldResize={shouldResize}
           onResize={onResize}
           onResizeEnd={onResizeEnd}
         />
diff --git a/packages/node-resizer/src/ResizeControl.tsx b/packages/node-resizer/src/ResizeControl.tsx
index 138d2345..3397537d 100644
--- a/packages/node-resizer/src/ResizeControl.tsx
+++ b/packages/node-resizer/src/ResizeControl.tsx
@@ -32,8 +32,8 @@ function ResizeControl({
   color,
   minWidth = 10,
   minHeight = 10,
+  shouldResize,
   onResizeStart,
-  onBeforeResize,
   onResize,
   onResizeEnd,
 }: ResizeControlProps) {
@@ -146,12 +146,6 @@ function ResizeControl({
             return;
           }
 
-          const onBeforeResizeResult = onBeforeResize?.(event, { ...prevValues.current });
-
-          if (onBeforeResizeResult === false) {
-            return;
-          }
-
           const direction = getDirection({
             width: prevValues.current.width,
             prevWidth,
@@ -161,7 +155,15 @@ function ResizeControl({
             invertY,
           });
 
-          onResize?.(event, { ...prevValues.current, direction });
+          const nextValues = { ...prevValues.current, direction };
+
+          const callResize = shouldResize?.(event, nextValues);
+
+          if (callResize === false) {
+            return;
+          }
+
+          onResize?.(event, nextValues);
           triggerNodeChanges(changes);
         }
       })
diff --git a/packages/node-resizer/src/types.ts b/packages/node-resizer/src/types.ts
index 2bd674db..75d40ace 100644
--- a/packages/node-resizer/src/types.ts
+++ b/packages/node-resizer/src/types.ts
@@ -14,8 +14,8 @@ export type ResizeParamsWithDirection = ResizeParams & {
 
 type OnResizeHandler<Params = ResizeParams, Result = void> = (event: ResizeDragEvent, params: Params) => Result;
 
+export type ShouldResize = OnResizeHandler<ResizeParamsWithDirection, boolean>;
 export type OnResizeStart = OnResizeHandler;
-export type OnBeforeResize = OnResizeHandler<ResizeParams, unknown>;
 export type OnResize = OnResizeHandler<ResizeParamsWithDirection>;
 export type OnResizeEnd = OnResizeHandler;
 
@@ -29,8 +29,8 @@ export type NodeResizerProps = {
   isVisible?: boolean;
   minWidth?: number;
   minHeight?: number;
+  shouldResize?: ShouldResize;
   onResizeStart?: OnResizeStart;
-  onBeforeResize?: OnBeforeResize;
   onResize?: OnResize;
   onResizeEnd?: OnResizeEnd;
 };
@@ -46,7 +46,7 @@ export enum ResizeControlVariant {
 
 export type ResizeControlProps = Pick<
   NodeResizerProps,
-  'nodeId' | 'color' | 'minWidth' | 'minHeight' | 'onResizeStart' | 'onBeforeResize' | 'onResize' | 'onResizeEnd'
+  'nodeId' | 'color' | 'minWidth' | 'minHeight' | 'shouldResize' | 'onResizeStart' | 'onResize' | 'onResizeEnd'
 > & {
   position?: ControlPosition;
   variant?: ResizeControlVariant;

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 05/30] 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 06/30] 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 07/30] 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 08/30] 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 09/30] 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 e347dd82d342bf9c4884ca667afaa5cf639283e5 Mon Sep 17 00:00:00 2001
From: moklick <info@moritzklack.com>
Date: Wed, 18 Jan 2023 12:36:52 +0100
Subject: [PATCH 10/30] chore(changeset): add

---
 .changeset/pretty-spoons-punch.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/pretty-spoons-punch.md

diff --git a/.changeset/pretty-spoons-punch.md b/.changeset/pretty-spoons-punch.md
new file mode 100644
index 00000000..0b661034
--- /dev/null
+++ b/.changeset/pretty-spoons-punch.md
@@ -0,0 +1,5 @@
+---
+'@reactflow/node-resizer': major
+---
+
+Add shouldresize, cleanup types

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 11/30] 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 c9a83293957e69da176f2dbc008b8f81c059b1aa Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Christopher=20M=C3=B6ller?= <chrtze@gmail.com>
Date: Thu, 19 Jan 2023 14:00:30 +0100
Subject: [PATCH 12/30] fix(deps): don't require latest version of reactflow
 core in node resizer and toolbar

---
 packages/node-resizer/package.json | 2 +-
 packages/node-toolbar/package.json | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/node-resizer/package.json b/packages/node-resizer/package.json
index 6bed1b65..a570caaf 100644
--- a/packages/node-resizer/package.json
+++ b/packages/node-resizer/package.json
@@ -38,7 +38,7 @@
     "typecheck": "tsc --noEmit"
   },
   "dependencies": {
-    "@reactflow/core": "workspace:*",
+    "@reactflow/core": "workspace:^11.3.3",
     "classcat": "^5.0.4",
     "d3-drag": "^3.0.0",
     "d3-selection": "^3.0.0",
diff --git a/packages/node-toolbar/package.json b/packages/node-toolbar/package.json
index b719ceb8..7ef50f38 100644
--- a/packages/node-toolbar/package.json
+++ b/packages/node-toolbar/package.json
@@ -36,7 +36,7 @@
     "typecheck": "tsc --noEmit"
   },
   "dependencies": {
-    "@reactflow/core": "workspace:*",
+    "@reactflow/core": "workspace:^11.3.3",
     "classcat": "^5.0.3",
     "zustand": "^4.3.1"
   },

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 13/30] 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 14/30] 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 15/30] 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;
 

From 0a2c96fe3e1d51c8f98390c9794724739dd31843 Mon Sep 17 00:00:00 2001
From: moklick <info@moritzklack.com>
Date: Mon, 23 Jan 2023 17:58:15 +0100
Subject: [PATCH 16/30] feat(connections): support touch

---
 .../core/src/components/Edges/wrapEdge.tsx    |  6 +--
 .../core/src/components/Handle/handler.ts     | 44 +++++++++----------
 packages/core/src/components/Handle/index.tsx | 25 +++++++----
 packages/core/src/components/Handle/utils.ts  |  9 ----
 packages/core/src/container/Pane/index.tsx    | 14 ++----
 packages/core/src/hooks/useDrag/index.ts      | 12 ++---
 packages/core/src/types/component-props.ts    |  2 +-
 packages/core/src/types/edges.ts              |  2 +-
 packages/core/src/types/general.ts            | 11 +++--
 packages/core/src/utils/index.ts              | 24 +++++++++-
 10 files changed, 82 insertions(+), 67 deletions(-)

diff --git a/packages/core/src/components/Edges/wrapEdge.tsx b/packages/core/src/components/Edges/wrapEdge.tsx
index 4ac3b139..36c49615 100644
--- a/packages/core/src/components/Edges/wrapEdge.tsx
+++ b/packages/core/src/components/Edges/wrapEdge.tsx
@@ -4,7 +4,7 @@ import cc from 'classcat';
 
 import { useStoreApi } from '../../hooks/useStore';
 import { ARIA_EDGE_DESC_KEY } from '../A11yDescriptions';
-import { handleMouseDown } from '../Handle/handler';
+import { handlePointerDown } from '../Handle/handler';
 import { EdgeAnchor } from './EdgeAnchor';
 import { getMarkerId } from '../../utils/graph';
 import { getMouseHandler } from './utils';
@@ -99,14 +99,14 @@ export default (EdgeComponent: ComponentType<EdgeProps>) => {
       setUpdating(true);
       onEdgeUpdateStart?.(event, edge, handleType);
 
-      const _onEdgeUpdateEnd = (evt: MouseEvent) => {
+      const _onEdgeUpdateEnd = (evt: MouseEvent | TouchEvent) => {
         setUpdating(false);
         onEdgeUpdateEnd?.(evt, edge, handleType);
       };
 
       const onConnectEdge = (connection: Connection) => onEdgeUpdate?.(edge, connection);
 
-      handleMouseDown({
+      handlePointerDown({
         event,
         handleId,
         nodeId,
diff --git a/packages/core/src/components/Handle/handler.ts b/packages/core/src/components/Handle/handler.ts
index 40be2090..766f48ba 100644
--- a/packages/core/src/components/Handle/handler.ts
+++ b/packages/core/src/components/Handle/handler.ts
@@ -1,24 +1,17 @@
-import type { MouseEvent as ReactMouseEvent } from 'react';
+import type { MouseEvent as ReactMouseEvent, TouchEvent as ReactTouchEvent } from 'react';
 import { StoreApi } from 'zustand';
 
-import { getHostForElement, calcAutoPan } from '../../utils';
+import { getHostForElement, calcAutoPan, getEventPosition, isMouseEvent } from '../../utils';
 import type { OnConnect, HandleType, ReactFlowState } from '../../types';
 import { pointToRendererPoint, rendererPointToPoint } from '../../utils/graph';
-import {
-  ConnectionHandle,
-  getClosestHandle,
-  getConnectionPosition,
-  getHandleLookup,
-  isValidHandle,
-  ValidConnectionFunc,
-} from './utils';
+import { ConnectionHandle, getClosestHandle, getHandleLookup, isValidHandle, ValidConnectionFunc } from './utils';
 
 function resetRecentHandle(handleDomNode: Element): void {
   handleDomNode?.classList.remove('react-flow__handle-valid');
   handleDomNode?.classList.remove('react-flow__handle-connecting');
 }
 
-export function handleMouseDown({
+export function handlePointerDown({
   event,
   handleId,
   nodeId,
@@ -30,7 +23,7 @@ export function handleMouseDown({
   elementEdgeUpdaterType,
   onEdgeUpdateEnd,
 }: {
-  event: ReactMouseEvent;
+  event: ReactMouseEvent | ReactTouchEvent;
   handleId: string | null;
   nodeId: string;
   onConnect: OnConnect;
@@ -39,7 +32,7 @@ export function handleMouseDown({
   setState: StoreApi<ReactFlowState>['setState'];
   isValidConnection: ValidConnectionFunc;
   elementEdgeUpdaterType?: HandleType;
-  onEdgeUpdateEnd?: (evt: MouseEvent) => void;
+  onEdgeUpdateEnd?: (evt: MouseEvent | TouchEvent) => void;
 }): void {
   // when react-flow is used inside a shadow root we can't use document
   const doc = getHostForElement(event.target as HTMLElement);
@@ -48,7 +41,8 @@ export function handleMouseDown({
   let autoPanId = 0;
   let prevClosestHandle: ConnectionHandle | null;
 
-  const clickedElement = doc?.elementFromPoint(event.clientX, event.clientY);
+  const { clientX, clientY } = isMouseEvent(event) ? event : event.touches[0]!;
+  const clickedElement = doc?.elementFromPoint(clientX, clientY);
   const elementIsTarget = clickedElement?.classList.contains('target');
   const elementIsSource = clickedElement?.classList.contains('source');
 
@@ -59,7 +53,7 @@ export function handleMouseDown({
   const handleType = elementEdgeUpdaterType ? elementEdgeUpdaterType : elementIsTarget ? 'target' : 'source';
   const containerBounds = domNode.getBoundingClientRect();
   let prevActiveHandle: Element;
-  let connectionPosition = getConnectionPosition(event, containerBounds);
+  let connectionPosition = getEventPosition(event, containerBounds);
   let autoPanStarted = false;
 
   const handleLookup = getHandleLookup({
@@ -89,10 +83,10 @@ export function handleMouseDown({
 
   onConnectStart?.(event, { nodeId, handleId, handleType });
 
-  function onMouseMove(event: MouseEvent) {
+  function onPointerMove(event: MouseEvent | TouchEvent) {
     const { transform } = getState();
+    connectionPosition = getEventPosition(event, containerBounds);
 
-    connectionPosition = getConnectionPosition(event, containerBounds);
     prevClosestHandle = getClosestHandle(
       pointToRendererPoint(connectionPosition, transform, false, [1, 1]),
       connectionRadius,
@@ -138,7 +132,7 @@ export function handleMouseDown({
     }
   }
 
-  function onMouseUp(event: MouseEvent) {
+  function onPointerUp(event: MouseEvent | TouchEvent) {
     cancelAnimationFrame(autoPanId);
     autoPanStarted = false;
 
@@ -172,10 +166,16 @@ export function handleMouseDown({
       connectionHandleType: null,
     });
 
-    doc.removeEventListener('mousemove', onMouseMove as EventListenerOrEventListenerObject);
-    doc.removeEventListener('mouseup', onMouseUp as EventListenerOrEventListenerObject);
+    doc.removeEventListener('mousemove', onPointerMove as EventListener);
+    doc.removeEventListener('mouseup', onPointerUp as EventListener);
+
+    doc.removeEventListener('touchmove', onPointerMove as EventListener);
+    doc.removeEventListener('touchend', onPointerUp as EventListener);
   }
 
-  doc.addEventListener('mousemove', onMouseMove as EventListenerOrEventListenerObject);
-  doc.addEventListener('mouseup', onMouseUp as EventListenerOrEventListenerObject);
+  doc.addEventListener('mousemove', onPointerMove as EventListener);
+  doc.addEventListener('mouseup', onPointerUp as EventListener);
+
+  doc.addEventListener('touchmove', onPointerMove as EventListener);
+  doc.addEventListener('touchend', onPointerUp as EventListener);
 }
diff --git a/packages/core/src/components/Handle/index.tsx b/packages/core/src/components/Handle/index.tsx
index 19a78314..89212300 100644
--- a/packages/core/src/components/Handle/index.tsx
+++ b/packages/core/src/components/Handle/index.tsx
@@ -1,11 +1,11 @@
-import { memo, HTMLAttributes, forwardRef, MouseEvent as ReactMouseEvent } from 'react';
+import { memo, HTMLAttributes, forwardRef, MouseEvent as ReactMouseEvent, TouchEvent as ReactTouchEvent } from 'react';
 import cc from 'classcat';
 import { shallow } from 'zustand/shallow';
 
 import { useStore, useStoreApi } from '../../hooks/useStore';
 import { useNodeId } from '../../contexts/NodeIdContext';
-import { handleMouseDown } from './handler';
-import { devWarn, getHostForElement } from '../../utils';
+import { handlePointerDown } from './handler';
+import { devWarn, getHostForElement, isMouseEvent } from '../../utils';
 import { addEdge } from '../../utils/graph';
 import { Position } from '../../types';
 import type { HandleProps, Connection, ReactFlowState } from '../../types';
@@ -33,6 +33,7 @@ const Handle = forwardRef<HTMLDivElement, HandleComponentProps>(
       children,
       className,
       onMouseDown,
+      onTouchStart,
       ...rest
     },
     ref
@@ -66,9 +67,11 @@ const Handle = forwardRef<HTMLDivElement, HandleComponentProps>(
       onConnect?.(edgeParams);
     };
 
-    const onMouseDownHandler = (event: ReactMouseEvent<HTMLDivElement>) => {
-      if (event.button === 0) {
-        handleMouseDown({
+    const onPointerDown = (event: ReactMouseEvent<HTMLDivElement> | ReactTouchEvent<HTMLDivElement>) => {
+      const isMouse = isMouseEvent(event);
+
+      if ((isMouse && event.button === 0) || 'touches' in event) {
+        handlePointerDown({
           event,
           handleId,
           nodeId,
@@ -79,7 +82,12 @@ const Handle = forwardRef<HTMLDivElement, HandleComponentProps>(
           isValidConnection,
         });
       }
-      onMouseDown?.(event);
+
+      if (isMouse) {
+        onMouseDown?.(event);
+      } else {
+        onTouchStart?.(event);
+      }
     };
 
     const onClick = (event: ReactMouseEvent) => {
@@ -136,7 +144,8 @@ const Handle = forwardRef<HTMLDivElement, HandleComponentProps>(
               connectionStartHandle?.type === type,
           },
         ])}
-        onMouseDown={onMouseDownHandler}
+        onMouseDown={onPointerDown}
+        onTouchStart={onPointerDown}
         onClick={connectOnClick ? onClick : undefined}
         ref={ref}
         {...rest}
diff --git a/packages/core/src/components/Handle/utils.ts b/packages/core/src/components/Handle/utils.ts
index 69d6f68c..d6cf9e8b 100644
--- a/packages/core/src/components/Handle/utils.ts
+++ b/packages/core/src/components/Handle/utils.ts
@@ -1,5 +1,3 @@
-import { MouseEvent as ReactMouseEvent } from 'react';
-
 import { ConnectionMode } from '../../types';
 import type { Connection, HandleType, XYPosition, Node, NodeHandleBounds } from '../../types';
 import { internalsSymbol } from '../../utils';
@@ -134,10 +132,3 @@ 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,
-  };
-}
diff --git a/packages/core/src/container/Pane/index.tsx b/packages/core/src/container/Pane/index.tsx
index e92f1d79..bb9e3615 100644
--- a/packages/core/src/container/Pane/index.tsx
+++ b/packages/core/src/container/Pane/index.tsx
@@ -11,8 +11,9 @@ import { containerStyle } from '../../styles';
 import { useStore, useStoreApi } from '../../hooks/useStore';
 import { getSelectionChanges } from '../../utils/changes';
 import { getConnectedEdges, getNodesInside } from '../../utils/graph';
+import { getEventPosition } from '../../utils';
 import { SelectionMode } from '../../types';
-import type { ReactFlowProps, XYPosition, ReactFlowState, NodeChange, EdgeChange } from '../../types';
+import type { ReactFlowProps, ReactFlowState, NodeChange, EdgeChange } from '../../types';
 
 type PaneProps = {
   isSelecting: boolean;
@@ -33,13 +34,6 @@ type PaneProps = {
   >
 >;
 
-function getMousePosition(event: ReactMouseEvent, containerBounds: DOMRect): XYPosition {
-  return {
-    x: event.clientX - containerBounds.left,
-    y: event.clientY - containerBounds.top,
-  };
-}
-
 const wrapHandler = (
   handler: React.MouseEventHandler | undefined,
   containerRef: React.MutableRefObject<HTMLDivElement | null>
@@ -118,7 +112,7 @@ const Pane = memo(
         return;
       }
 
-      const { x, y } = getMousePosition(event, containerBounds.current);
+      const { x, y } = getEventPosition(event, containerBounds.current);
 
       resetSelectedElements();
 
@@ -145,7 +139,7 @@ const Pane = memo(
 
       store.setState({ userSelectionActive: true, nodesSelectionActive: false });
 
-      const mousePos = getMousePosition(event, containerBounds.current);
+      const mousePos = getEventPosition(event, containerBounds.current);
       const startX = userSelectionRect.startX ?? 0;
       const startY = userSelectionRect.startY ?? 0;
 
diff --git a/packages/core/src/hooks/useDrag/index.ts b/packages/core/src/hooks/useDrag/index.ts
index c9d0ab3d..868b6387 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 { calcAutoPan } from '../../utils';
+import { calcAutoPan, getEventPosition } from '../../utils';
 import type { NodeDragItem, Node, SelectionDragHandler, UseDragEvent, XYPosition } from '../../types';
 
 export type UseDragData = { dx: number; dy: number };
@@ -168,10 +168,7 @@ function useDrag({
             }
 
             containerBounds.current = domNode?.getBoundingClientRect() || null;
-            mousePosition.current = {
-              x: event.sourceEvent.clientX - (containerBounds.current?.left ?? 0),
-              y: event.sourceEvent.clientY - (containerBounds.current?.top ?? 0),
-            };
+            mousePosition.current = getEventPosition(event.sourceEvent, containerBounds.current!);
           })
           .on('drag', (event: UseDragEvent) => {
             const pointerPos = getPointerPosition(event);
@@ -188,10 +185,7 @@ function useDrag({
               dragItems.current
             ) {
               dragEvent.current = event.sourceEvent as MouseEvent;
-              mousePosition.current = {
-                x: event.sourceEvent.clientX - (containerBounds.current?.left ?? 0),
-                y: event.sourceEvent.clientY - (containerBounds.current?.top ?? 0),
-              };
+              mousePosition.current = getEventPosition(event.sourceEvent, containerBounds.current!);
 
               updateNodes(pointerPos);
             }
diff --git a/packages/core/src/types/component-props.ts b/packages/core/src/types/component-props.ts
index 90b7124f..bafb8d5e 100644
--- a/packages/core/src/types/component-props.ts
+++ b/packages/core/src/types/component-props.ts
@@ -61,7 +61,7 @@ export type ReactFlowProps = HTMLAttributes<HTMLDivElement> & {
   onEdgeMouseLeave?: EdgeMouseHandler;
   onEdgeDoubleClick?: EdgeMouseHandler;
   onEdgeUpdateStart?: (event: ReactMouseEvent, edge: Edge, handleType: HandleType) => void;
-  onEdgeUpdateEnd?: (event: MouseEvent, edge: Edge, handleType: HandleType) => void;
+  onEdgeUpdateEnd?: (event: MouseEvent | TouchEvent, edge: Edge, handleType: HandleType) => void;
   onNodesChange?: OnNodesChange;
   onEdgesChange?: OnEdgesChange;
   onNodesDelete?: OnNodesDelete;
diff --git a/packages/core/src/types/edges.ts b/packages/core/src/types/edges.ts
index 92e10637..c2202788 100644
--- a/packages/core/src/types/edges.ts
+++ b/packages/core/src/types/edges.ts
@@ -85,7 +85,7 @@ export type WrapEdgeProps<T = any> = Omit<Edge<T>, 'sourceHandle' | 'targetHandl
   onMouseLeave?: EdgeMouseHandler;
   edgeUpdaterRadius?: number;
   onEdgeUpdateStart?: (event: ReactMouseEvent, edge: Edge, handleType: HandleType) => void;
-  onEdgeUpdateEnd?: (event: MouseEvent, edge: Edge, handleType: HandleType) => void;
+  onEdgeUpdateEnd?: (event: MouseEvent | TouchEvent, edge: Edge, handleType: HandleType) => void;
   rfId?: string;
   isFocusable: boolean;
   pathOptions?: BezierPathOptions | SmoothStepPathOptions;
diff --git a/packages/core/src/types/general.ts b/packages/core/src/types/general.ts
index 6289c9c1..ba0de157 100644
--- a/packages/core/src/types/general.ts
+++ b/packages/core/src/types/general.ts
@@ -1,5 +1,10 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
-import type { MouseEvent as ReactMouseEvent, ComponentType, MemoExoticComponent } from 'react';
+import type {
+  MouseEvent as ReactMouseEvent,
+  TouchEvent as ReactTouchEvent,
+  ComponentType,
+  MemoExoticComponent,
+} from 'react';
 import type { D3DragEvent, Selection as D3Selection, SubjectPosition, ZoomBehavior } from 'd3';
 
 import type { XYPosition, Rect, Transform, CoordinateExtent } from './utils';
@@ -77,8 +82,8 @@ export type OnConnectStartParams = {
   handleType: HandleType | null;
 };
 
-export type OnConnectStart = (event: ReactMouseEvent, params: OnConnectStartParams) => void;
-export type OnConnectEnd = (event: MouseEvent) => void;
+export type OnConnectStart = (event: ReactMouseEvent | ReactTouchEvent, params: OnConnectStartParams) => void;
+export type OnConnectEnd = (event: MouseEvent | TouchEvent) => void;
 
 export type Viewport = {
   x: number;
diff --git a/packages/core/src/utils/index.ts b/packages/core/src/utils/index.ts
index 30aa3789..3051f25a 100644
--- a/packages/core/src/utils/index.ts
+++ b/packages/core/src/utils/index.ts
@@ -1,4 +1,8 @@
-import type { KeyboardEvent as ReactKeyboardEvent } from 'react';
+import type {
+  KeyboardEvent as ReactKeyboardEvent,
+  MouseEvent as ReactMouseEvent,
+  TouchEvent as ReactTouchEvent,
+} from 'react';
 
 import type { Dimensions, Node, XYPosition, CoordinateExtent, Box, Rect } from '../types';
 
@@ -111,3 +115,21 @@ export function isInputDOMNode(event: KeyboardEvent | ReactKeyboardEvent): boole
     !!target?.closest('.nokey')
   );
 }
+
+export const isMouseEvent = (
+  event: MouseEvent | ReactMouseEvent | TouchEvent | ReactTouchEvent
+): event is MouseEvent | ReactMouseEvent => 'button' in event;
+
+export const getEventPosition = (
+  event: MouseEvent | ReactMouseEvent | TouchEvent | ReactTouchEvent,
+  bounds: DOMRect
+) => {
+  const isMouse = isMouseEvent(event);
+  const evtX = isMouse ? event.clientX : event.touches?.[0].clientX;
+  const evtY = isMouse ? event.clientY : event.touches?.[0].clientY;
+
+  return {
+    x: evtX - bounds.left,
+    y: evtY - bounds.top,
+  };
+};

From f3806c616548ee9071e43f4b17a29e97dcba7e85 Mon Sep 17 00:00:00 2001
From: moklick <info@moritzklack.com>
Date: Tue, 24 Jan 2023 14:17:55 +0100
Subject: [PATCH 17/30] refactor(connection): cleanup

---
 examples/vite-app/package.json                |  2 +-
 .../core/src/components/Handle/handler.ts     | 54 ++++++++++---------
 packages/core/src/components/Handle/index.tsx |  6 +--
 packages/core/src/components/Handle/utils.ts  | 20 +++++++
 packages/core/src/store/index.ts              |  1 +
 packages/core/src/utils/index.ts              | 12 ++---
 6 files changed, 61 insertions(+), 34 deletions(-)

diff --git a/examples/vite-app/package.json b/examples/vite-app/package.json
index 55592a64..2fecdc49 100644
--- a/examples/vite-app/package.json
+++ b/examples/vite-app/package.json
@@ -4,7 +4,7 @@
   "version": "0.0.0",
   "type": "module",
   "scripts": {
-    "dev": "vite --port 3000 --open",
+    "dev": "vite --port 3000 --open --host",
     "serve": "vite serve --port 3000",
     "build": "vite build",
     "test:dev": "cypress open",
diff --git a/packages/core/src/components/Handle/handler.ts b/packages/core/src/components/Handle/handler.ts
index 766f48ba..180b6027 100644
--- a/packages/core/src/components/Handle/handler.ts
+++ b/packages/core/src/components/Handle/handler.ts
@@ -1,15 +1,18 @@
 import type { MouseEvent as ReactMouseEvent, TouchEvent as ReactTouchEvent } from 'react';
 import { StoreApi } from 'zustand';
 
-import { getHostForElement, calcAutoPan, getEventPosition, isMouseEvent } from '../../utils';
+import { getHostForElement, calcAutoPan, getEventPosition } from '../../utils';
 import type { OnConnect, HandleType, ReactFlowState } from '../../types';
 import { pointToRendererPoint, rendererPointToPoint } from '../../utils/graph';
-import { ConnectionHandle, getClosestHandle, getHandleLookup, isValidHandle, ValidConnectionFunc } from './utils';
-
-function resetRecentHandle(handleDomNode: Element): void {
-  handleDomNode?.classList.remove('react-flow__handle-valid');
-  handleDomNode?.classList.remove('react-flow__handle-connecting');
-}
+import {
+  ConnectionHandle,
+  getClosestHandle,
+  getHandleLookup,
+  getHandleType,
+  isValidHandle,
+  resetRecentHandle,
+  ValidConnectionFunc,
+} from './utils';
 
 export function handlePointerDown({
   event,
@@ -20,7 +23,7 @@ export function handlePointerDown({
   getState,
   setState,
   isValidConnection,
-  elementEdgeUpdaterType,
+  edgeUpdaterType,
   onEdgeUpdateEnd,
 }: {
   event: ReactMouseEvent | ReactTouchEvent;
@@ -31,27 +34,34 @@ export function handlePointerDown({
   getState: StoreApi<ReactFlowState>['getState'];
   setState: StoreApi<ReactFlowState>['setState'];
   isValidConnection: ValidConnectionFunc;
-  elementEdgeUpdaterType?: HandleType;
+  edgeUpdaterType?: HandleType;
   onEdgeUpdateEnd?: (evt: MouseEvent | TouchEvent) => void;
 }): void {
   // when react-flow is used inside a shadow root we can't use document
   const doc = getHostForElement(event.target as HTMLElement);
-  const { connectionMode, domNode, autoPanOnConnect, connectionRadius, onConnectStart, onConnectEnd, panBy, getNodes } =
-    getState();
+  const {
+    connectionMode,
+    domNode,
+    autoPanOnConnect,
+    connectionRadius,
+    onConnectStart,
+    onConnectEnd,
+    panBy,
+    getNodes,
+    cancelConnection,
+  } = getState();
   let autoPanId = 0;
   let prevClosestHandle: ConnectionHandle | null;
 
-  const { clientX, clientY } = isMouseEvent(event) ? event : event.touches[0]!;
-  const clickedElement = doc?.elementFromPoint(clientX, clientY);
-  const elementIsTarget = clickedElement?.classList.contains('target');
-  const elementIsSource = clickedElement?.classList.contains('source');
+  const { x, y } = getEventPosition(event);
+  const clickedHandle = doc?.elementFromPoint(x, y);
+  const handleType = getHandleType(edgeUpdaterType, clickedHandle);
+  const containerBounds = domNode?.getBoundingClientRect();
 
-  if (!domNode || (!elementIsTarget && !elementIsSource && !elementEdgeUpdaterType)) {
+  if (!containerBounds || !handleType) {
     return;
   }
 
-  const handleType = elementEdgeUpdaterType ? elementEdgeUpdaterType : elementIsTarget ? 'target' : 'source';
-  const containerBounds = domNode.getBoundingClientRect();
   let prevActiveHandle: Element;
   let connectionPosition = getEventPosition(event, containerBounds);
   let autoPanStarted = false;
@@ -154,17 +164,13 @@ export function handlePointerDown({
 
     onConnectEnd?.(event);
 
-    if (elementEdgeUpdaterType) {
+    if (edgeUpdaterType) {
       onEdgeUpdateEnd?.(event);
     }
 
     resetRecentHandle(prevActiveHandle);
 
-    setState({
-      connectionNodeId: null,
-      connectionHandleId: null,
-      connectionHandleType: null,
-    });
+    cancelConnection();
 
     doc.removeEventListener('mousemove', onPointerMove as EventListener);
     doc.removeEventListener('mouseup', onPointerUp as EventListener);
diff --git a/packages/core/src/components/Handle/index.tsx b/packages/core/src/components/Handle/index.tsx
index 89212300..aa887d2f 100644
--- a/packages/core/src/components/Handle/index.tsx
+++ b/packages/core/src/components/Handle/index.tsx
@@ -68,9 +68,9 @@ const Handle = forwardRef<HTMLDivElement, HandleComponentProps>(
     };
 
     const onPointerDown = (event: ReactMouseEvent<HTMLDivElement> | ReactTouchEvent<HTMLDivElement>) => {
-      const isMouse = isMouseEvent(event);
+      const isMouseTriggered = isMouseEvent(event);
 
-      if ((isMouse && event.button === 0) || 'touches' in event) {
+      if ((isMouseTriggered && event.button === 0) || !isMouseTriggered) {
         handlePointerDown({
           event,
           handleId,
@@ -83,7 +83,7 @@ const Handle = forwardRef<HTMLDivElement, HandleComponentProps>(
         });
       }
 
-      if (isMouse) {
+      if (isMouseTriggered) {
         onMouseDown?.(event);
       } else {
         onTouchStart?.(event);
diff --git a/packages/core/src/components/Handle/utils.ts b/packages/core/src/components/Handle/utils.ts
index d6cf9e8b..74c0ef5a 100644
--- a/packages/core/src/components/Handle/utils.ts
+++ b/packages/core/src/components/Handle/utils.ts
@@ -132,3 +132,23 @@ export function getHandleLookup({ nodes, nodeId, handleId, handleType }: GetHand
     return res;
   }, []);
 }
+
+export function getHandleType(
+  edgeUpdaterType: HandleType | undefined,
+  handleDomNode: Element | null
+): HandleType | null {
+  if (edgeUpdaterType) {
+    return edgeUpdaterType;
+  } else if (handleDomNode?.classList.contains('target')) {
+    return 'target';
+  } else if (handleDomNode?.classList.contains('source')) {
+    return 'source';
+  }
+
+  return null;
+}
+
+export function resetRecentHandle(handleDomNode: Element): void {
+  handleDomNode?.classList.remove('react-flow__handle-valid');
+  handleDomNode?.classList.remove('react-flow__handle-connecting');
+}
diff --git a/packages/core/src/store/index.ts b/packages/core/src/store/index.ts
index 0a79a4b1..635cad96 100644
--- a/packages/core/src/store/index.ts
+++ b/packages/core/src/store/index.ts
@@ -273,6 +273,7 @@ const createRFStore = () =>
       set({
         connectionNodeId: initialState.connectionNodeId,
         connectionHandleId: initialState.connectionHandleId,
+        connectionHandleType: initialState.connectionHandleType,
       }),
     reset: () => set({ ...initialState }),
   }));
diff --git a/packages/core/src/utils/index.ts b/packages/core/src/utils/index.ts
index 3051f25a..5bfd52c2 100644
--- a/packages/core/src/utils/index.ts
+++ b/packages/core/src/utils/index.ts
@@ -122,14 +122,14 @@ export const isMouseEvent = (
 
 export const getEventPosition = (
   event: MouseEvent | ReactMouseEvent | TouchEvent | ReactTouchEvent,
-  bounds: DOMRect
+  bounds?: DOMRect
 ) => {
-  const isMouse = isMouseEvent(event);
-  const evtX = isMouse ? event.clientX : event.touches?.[0].clientX;
-  const evtY = isMouse ? event.clientY : event.touches?.[0].clientY;
+  const isMouseTriggered = isMouseEvent(event);
+  const evtX = isMouseTriggered ? event.clientX : event.touches?.[0].clientX;
+  const evtY = isMouseTriggered ? event.clientY : event.touches?.[0].clientY;
 
   return {
-    x: evtX - bounds.left,
-    y: evtY - bounds.top,
+    x: evtX - (bounds?.left ?? 0),
+    y: evtY - (bounds?.top ?? 0),
   };
 };

From 85003b01add71ea852bd5b0d2f1e7496050a6b52 Mon Sep 17 00:00:00 2001
From: moklick <info@moritzklack.com>
Date: Tue, 24 Jan 2023 14:22:31 +0100
Subject: [PATCH 18/30] chore(changeset): add

---
 .changeset/hungry-eagles-turn.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/hungry-eagles-turn.md

diff --git a/.changeset/hungry-eagles-turn.md b/.changeset/hungry-eagles-turn.md
new file mode 100644
index 00000000..44941fba
--- /dev/null
+++ b/.changeset/hungry-eagles-turn.md
@@ -0,0 +1,5 @@
+---
+'@reactflow/core': patch
+---
+
+Connecting nodes: Enable connections on touch devices

From 2aef1ab4dace002cda6cbe22fb61d848153ac9d8 Mon Sep 17 00:00:00 2001
From: moklick <info@moritzklack.com>
Date: Wed, 25 Jan 2023 14:15:41 +0100
Subject: [PATCH 19/30] chore(types): make node type optional again

---
 packages/core/src/types/nodes.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/core/src/types/nodes.ts b/packages/core/src/types/nodes.ts
index 4d4c66b1..55824177 100644
--- a/packages/core/src/types/nodes.ts
+++ b/packages/core/src/types/nodes.ts
@@ -9,7 +9,7 @@ export type Node<T = any, U extends string | undefined = string | undefined> = {
   id: string;
   position: XYPosition;
   data: T;
-  type: U;
+  type?: U;
   style?: CSSProperties;
   className?: string;
   sourcePosition?: Position;

From 4c516882d2bbf426c1832a53ad40763cc1abef92 Mon Sep 17 00:00:00 2001
From: moklick <info@moritzklack.com>
Date: Wed, 25 Jan 2023 14:17:42 +0100
Subject: [PATCH 20/30] chore(changeset): add

---
 .changeset/twenty-turkeys-rhyme.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/twenty-turkeys-rhyme.md

diff --git a/.changeset/twenty-turkeys-rhyme.md b/.changeset/twenty-turkeys-rhyme.md
new file mode 100644
index 00000000..2a5e909d
--- /dev/null
+++ b/.changeset/twenty-turkeys-rhyme.md
@@ -0,0 +1,5 @@
+---
+'@reactflow/core': patch
+---
+
+Types: improve typing for node type

From 3d6937b3e4e6952bbbc52b2e09aa1b1ab35d3f3c Mon Sep 17 00:00:00 2001
From: moklick <info@moritzklack.com>
Date: Wed, 25 Jan 2023 17:47:13 +0100
Subject: [PATCH 21/30] refactor(connectionline): separate edge renderer and
 connectionline

---
 .../vite-app/src/examples/Basic/index.tsx     |   3 -
 .../CustomConnectionLine/ConnectionLine.tsx   |   9 +-
 .../vite-app/src/examples/Switch/index.tsx    |   3 +-
 .../src/examples/Undirectional/index.tsx      |   3 +-
 .../src/components/ConnectionLine/index.tsx   | 131 +++++++++++-------
 .../core/src/container/EdgeRenderer/index.tsx | 130 +++++++----------
 .../core/src/container/EdgeRenderer/utils.ts  |  32 ++---
 7 files changed, 152 insertions(+), 159 deletions(-)

diff --git a/examples/vite-app/src/examples/Basic/index.tsx b/examples/vite-app/src/examples/Basic/index.tsx
index 1197ef06..52d22025 100644
--- a/examples/vite-app/src/examples/Basic/index.tsx
+++ b/examples/vite-app/src/examples/Basic/index.tsx
@@ -48,8 +48,6 @@ const initialEdges: Edge[] = [
   { id: 'e1-3', source: '1', target: '3' },
 ];
 
-const nodeOrigin: NodeOrigin = [0.5, 0.5];
-
 const defaultEdgeOptions = {};
 
 const BasicFlow = () => {
@@ -96,7 +94,6 @@ const BasicFlow = () => {
       selectNodesOnDrag={false}
       elevateEdgesOnSelect
       elevateNodesOnSelect={false}
-      // nodeOrigin={nodeOrigin}
     >
       <Background variant={BackgroundVariant.Dots} />
       <MiniMap />
diff --git a/examples/vite-app/src/examples/CustomConnectionLine/ConnectionLine.tsx b/examples/vite-app/src/examples/CustomConnectionLine/ConnectionLine.tsx
index 4fe25917..b27306dd 100644
--- a/examples/vite-app/src/examples/CustomConnectionLine/ConnectionLine.tsx
+++ b/examples/vite-app/src/examples/CustomConnectionLine/ConnectionLine.tsx
@@ -1,9 +1,8 @@
-import React, { FC } from 'react';
 import { ConnectionLineComponentProps } from 'reactflow';
 
-const ConnectionLine: FC<ConnectionLineComponentProps> = ({ fromX, fromY, toX, toY }) => {
+function ConnectionLine({ fromX, fromY, toX, toY }: ConnectionLineComponentProps) {
   return (
-    <g>
+    <>
       <path
         fill="none"
         stroke="#222"
@@ -12,8 +11,8 @@ const ConnectionLine: FC<ConnectionLineComponentProps> = ({ fromX, fromY, toX, t
         d={`M${fromX},${fromY} C ${fromX} ${toY} ${fromX} ${toY} ${toX},${toY}`}
       />
       <circle cx={toX} cy={toY} fill="#fff" r={3} stroke="#222" strokeWidth={1.5} />
-    </g>
+    </>
   );
-};
+}
 
 export default ConnectionLine;
diff --git a/examples/vite-app/src/examples/Switch/index.tsx b/examples/vite-app/src/examples/Switch/index.tsx
index 658082ed..b6ae2278 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, NodeOrigin } from 'reactflow';
+import ReactFlow, { addEdge, Node, Connection, Edge, useNodesState, useEdgesState } from 'reactflow';
 
 const onNodeDragStop = (_: MouseEvent, node: Node) => console.log('drag stop', node);
 const onNodeClick = (_: MouseEvent, node: Node) => console.log('click', node);
@@ -100,7 +100,6 @@ const BasicFlow = () => {
       onNodeClick={onNodeClick}
       onConnect={onConnect}
       onNodeDragStop={onNodeDragStop}
-      disableKeyboardA11y
       onNodeDrag={onNodeDrag}
     >
       <div style={{ position: 'absolute', right: 10, top: 10, zIndex: 4 }}>
diff --git a/examples/vite-app/src/examples/Undirectional/index.tsx b/examples/vite-app/src/examples/Undirectional/index.tsx
index 4ea676a5..4f25f4a5 100644
--- a/examples/vite-app/src/examples/Undirectional/index.tsx
+++ b/examples/vite-app/src/examples/Undirectional/index.tsx
@@ -1,4 +1,4 @@
-import React, { MouseEvent, useCallback } from 'react';
+import { MouseEvent, useCallback } from 'react';
 import ReactFlow, {
   useReactFlow,
   NodeTypes,
@@ -184,6 +184,7 @@ const UpdateNodeInternalsFlow = () => {
   const [edges, setEdges, onEdgesChange] = useEdgesState(initialEdges);
 
   const onConnect = (params: Edge | Connection) => setEdges((els) => addEdge(params, els));
+
   const { project } = useReactFlow();
   const onEdgeUpdate = (oldEdge: Edge, newConnection: Connection) =>
     setEdges((els) => updateEdge(oldEdge, newConnection, els));
diff --git a/packages/core/src/components/ConnectionLine/index.tsx b/packages/core/src/components/ConnectionLine/index.tsx
index 3693f769..fae0c3b1 100644
--- a/packages/core/src/components/ConnectionLine/index.tsx
+++ b/packages/core/src/components/ConnectionLine/index.tsx
@@ -6,16 +6,15 @@ import { getBezierPath } from '../Edges/BezierEdge';
 import { getSmoothStepPath } from '../Edges/SmoothStepEdge';
 import { getSimpleBezierPath } from '../Edges/SimpleBezierEdge';
 import { internalsSymbol } from '../../utils';
-import type { ConnectionLineComponent, HandleType, ReactFlowStore } from '../../types';
+import type { ConnectionLineComponent, HandleType, ReactFlowState, ReactFlowStore } from '../../types';
 import { Position, ConnectionLineType, ConnectionMode } from '../../types';
 
 type ConnectionLineProps = {
-  connectionNodeId: string;
-  connectionHandleType: HandleType;
-  connectionLineType: ConnectionLineType;
-  isConnectable: boolean;
-  connectionLineStyle?: CSSProperties;
-  CustomConnectionLineComponent?: ConnectionLineComponent;
+  nodeId: string;
+  handleType: HandleType;
+  type: ConnectionLineType;
+  style?: CSSProperties;
+  CustomComponent?: ConnectionLineComponent;
 };
 
 const oppositePosition = {
@@ -26,69 +25,62 @@ const oppositePosition = {
 };
 
 const ConnectionLine = ({
-  connectionNodeId,
-  connectionHandleType,
-  connectionLineStyle,
-  connectionLineType = ConnectionLineType.Bezier,
-  isConnectable,
-  CustomConnectionLineComponent,
+  nodeId,
+  handleType,
+  style,
+  type = ConnectionLineType.Bezier,
+  CustomComponent,
 }: ConnectionLineProps) => {
   const { fromNode, handleId, toX, toY, connectionMode } = useStore(
     useCallback(
       (s: ReactFlowStore) => ({
-        fromNode: s.nodeInternals.get(connectionNodeId),
+        fromNode: s.nodeInternals.get(nodeId),
         handleId: s.connectionHandleId,
         toX: (s.connectionPosition.x - s.transform[0]) / s.transform[2],
         toY: (s.connectionPosition.y - s.transform[1]) / s.transform[2],
         connectionMode: s.connectionMode,
       }),
-      [connectionNodeId]
+      [nodeId]
     ),
     shallow
   );
   const fromHandleBounds = fromNode?.[internalsSymbol]?.handleBounds;
-  let handleBounds = fromHandleBounds?.[connectionHandleType];
+  let handleBounds = fromHandleBounds?.[handleType];
 
   if (connectionMode === ConnectionMode.Loose) {
-    handleBounds = handleBounds
-      ? handleBounds
-      : fromHandleBounds?.[connectionHandleType === 'source' ? 'target' : 'source'];
+    handleBounds = handleBounds ? handleBounds : fromHandleBounds?.[handleType === 'source' ? 'target' : 'source'];
   }
 
-  if (!fromNode || !isConnectable || !handleBounds) {
+  if (!fromNode || !handleBounds) {
     return null;
   }
 
   const fromHandle = handleId ? handleBounds.find((d) => d.id === handleId) : handleBounds[0];
-  const fromHandleX = fromHandle ? fromHandle.x + fromHandle.width / 2 : (fromNode?.width ?? 0) / 2;
-  const fromHandleY = fromHandle ? fromHandle.y + fromHandle.height / 2 : fromNode?.height ?? 0;
-  const fromX = (fromNode?.positionAbsolute?.x || 0) + fromHandleX;
-  const fromY = (fromNode?.positionAbsolute?.y || 0) + fromHandleY;
-
+  const fromHandleX = fromHandle ? fromHandle.x + fromHandle.width / 2 : (fromNode.width ?? 0) / 2;
+  const fromHandleY = fromHandle ? fromHandle.y + fromHandle.height / 2 : fromNode.height ?? 0;
+  const fromX = (fromNode.positionAbsolute?.x ?? 0) + fromHandleX;
+  const fromY = (fromNode.positionAbsolute?.y ?? 0) + fromHandleY;
   const fromPosition = fromHandle?.position;
+  const toPosition = fromPosition ? oppositePosition[fromPosition] : null;
 
-  if (!fromPosition) {
+  if (!fromPosition || !toPosition) {
     return null;
   }
 
-  const toPosition: Position = oppositePosition[fromPosition];
-
-  if (CustomConnectionLineComponent) {
+  if (CustomComponent) {
     return (
-      <g className="react-flow__connection">
-        <CustomConnectionLineComponent
-          connectionLineType={connectionLineType}
-          connectionLineStyle={connectionLineStyle}
-          fromNode={fromNode}
-          fromHandle={fromHandle}
-          fromX={fromX}
-          fromY={fromY}
-          toX={toX}
-          toY={toY}
-          fromPosition={fromPosition}
-          toPosition={toPosition}
-        />
-      </g>
+      <CustomComponent
+        connectionLineType={type}
+        connectionLineStyle={style}
+        fromNode={fromNode}
+        fromHandle={fromHandle}
+        fromX={fromX}
+        fromY={fromY}
+        toX={toX}
+        toY={toY}
+        fromPosition={fromPosition}
+        toPosition={toPosition}
+      />
     );
   }
 
@@ -103,29 +95,62 @@ const ConnectionLine = ({
     targetPosition: toPosition,
   };
 
-  if (connectionLineType === ConnectionLineType.Bezier) {
+  if (type === ConnectionLineType.Bezier) {
     // we assume the destination position is opposite to the source position
     [dAttr] = getBezierPath(pathParams);
-  } else if (connectionLineType === ConnectionLineType.Step) {
+  } else if (type === ConnectionLineType.Step) {
     [dAttr] = getSmoothStepPath({
       ...pathParams,
       borderRadius: 0,
     });
-  } else if (connectionLineType === ConnectionLineType.SmoothStep) {
+  } else if (type === ConnectionLineType.SmoothStep) {
     [dAttr] = getSmoothStepPath(pathParams);
-  } else if (connectionLineType === ConnectionLineType.SimpleBezier) {
+  } else if (type === ConnectionLineType.SimpleBezier) {
     [dAttr] = getSimpleBezierPath(pathParams);
   } else {
     dAttr = `M${fromX},${fromY} ${toX},${toY}`;
   }
 
-  return (
-    <g className="react-flow__connection">
-      <path d={dAttr} fill="none" className="react-flow__connection-path" style={connectionLineStyle} />
-    </g>
-  );
+  return <path d={dAttr} fill="none" className="react-flow__connection-path" style={style} />;
 };
 
 ConnectionLine.displayName = 'ConnectionLine';
 
-export default ConnectionLine;
+type ConnectionLineWrapperProps = {
+  type: ConnectionLineType;
+  component?: ConnectionLineComponent;
+  containerStyle?: CSSProperties;
+  style?: CSSProperties;
+};
+
+const selector = (s: ReactFlowState) => ({
+  nodeId: s.connectionNodeId,
+  handleType: s.connectionHandleType,
+  nodesConnectable: s.nodesConnectable,
+  width: s.width,
+  height: s.height,
+});
+
+function ConnectionLineWrapper({ containerStyle, style, type, component }: ConnectionLineWrapperProps) {
+  const { nodeId, handleType, nodesConnectable, width, height } = useStore(selector, shallow);
+  const isValid = !!(nodeId && handleType && width && nodesConnectable);
+
+  if (!isValid) {
+    return null;
+  }
+
+  return (
+    <svg
+      style={containerStyle}
+      width={width}
+      height={height}
+      className="react-flow__edges react-flow__connectionline react-flow__container"
+    >
+      <g className="react-flow__connection">
+        <ConnectionLine nodeId={nodeId} handleType={handleType} style={style} type={type} CustomComponent={component} />
+      </g>
+    </svg>
+  );
+}
+
+export default ConnectionLineWrapper;
diff --git a/packages/core/src/container/EdgeRenderer/index.tsx b/packages/core/src/container/EdgeRenderer/index.tsx
index c687a8d8..e25f305d 100644
--- a/packages/core/src/container/EdgeRenderer/index.tsx
+++ b/packages/core/src/container/EdgeRenderer/index.tsx
@@ -1,27 +1,19 @@
-import { memo } from 'react';
+import { memo, ReactNode } from 'react';
 import { shallow } from 'zustand/shallow';
 import cc from 'classcat';
 
 import { useStore } from '../../hooks/useStore';
 import useVisibleEdges from '../../hooks/useVisibleEdges';
-import ConnectionLine from '../../components/ConnectionLine/index';
 import MarkerDefinitions from './MarkerDefinitions';
 import { getEdgePositions, getHandle, getNodeData } from './utils';
 
 import { GraphViewProps } from '../GraphView';
-import { devWarn } from '../../utils';
 import { ConnectionMode, Position } from '../../types';
 import type { Edge, ReactFlowState } from '../../types';
 
 type EdgeRendererProps = Pick<
   GraphViewProps,
   | 'edgeTypes'
-  | 'connectionLineType'
-  | 'connectionLineType'
-  | 'connectionLineStyle'
-  | 'connectionLineComponent'
-  | 'connectionLineContainerStyle'
-  | 'connectionLineContainerStyle'
   | 'onEdgeClick'
   | 'onEdgeDoubleClick'
   | 'defaultMarkerColor'
@@ -40,11 +32,10 @@ type EdgeRendererProps = Pick<
   | 'disableKeyboardA11y'
 > & {
   elevateEdgesOnSelect: boolean;
+  children: ReactNode;
 };
 
 const selector = (s: ReactFlowState) => ({
-  connectionNodeId: s.connectionNodeId,
-  connectionHandleType: s.connectionHandleType,
   nodesConnectable: s.nodesConnectable,
   edgesFocusable: s.edgesFocusable,
   elementsSelectable: s.elementsSelectable,
@@ -52,35 +43,38 @@ const selector = (s: ReactFlowState) => ({
   height: s.height,
   connectionMode: s.connectionMode,
   nodeInternals: s.nodeInternals,
+  onError: s.onError,
 });
 
-const EdgeRenderer = (props: EdgeRendererProps) => {
-  const {
-    connectionNodeId,
-    connectionHandleType,
-    nodesConnectable,
-    edgesFocusable,
-    elementsSelectable,
-    width,
-    height,
-    connectionMode,
-    nodeInternals,
-  } = useStore(selector, shallow);
-  const edgeTree = useVisibleEdges(props.onlyRenderVisibleElements, nodeInternals, props.elevateEdgesOnSelect);
+const EdgeRenderer = ({
+  defaultMarkerColor,
+  onlyRenderVisibleElements,
+  elevateEdgesOnSelect,
+  rfId,
+  edgeTypes,
+  noPanClassName,
+  onEdgeUpdate,
+  onEdgeContextMenu,
+  onEdgeMouseEnter,
+  onEdgeMouseMove,
+  onEdgeMouseLeave,
+  onEdgeClick,
+  edgeUpdaterRadius,
+  onEdgeDoubleClick,
+  onEdgeUpdateStart,
+  onEdgeUpdateEnd,
+  children,
+}: EdgeRendererProps) => {
+  const { edgesFocusable, elementsSelectable, width, height, connectionMode, nodeInternals, onError } = useStore(
+    selector,
+    shallow
+  );
+  const edgeTree = useVisibleEdges(onlyRenderVisibleElements, nodeInternals, elevateEdgesOnSelect);
 
   if (!width) {
     return null;
   }
 
-  const {
-    connectionLineType,
-    defaultMarkerColor,
-    connectionLineStyle,
-    connectionLineComponent,
-    connectionLineContainerStyle,
-  } = props;
-  const renderConnectionLine = connectionNodeId && connectionHandleType;
-
   return (
     <>
       {edgeTree.map(({ level, edges, isMaxLevel }) => (
@@ -91,11 +85,11 @@ const EdgeRenderer = (props: EdgeRendererProps) => {
           height={height}
           className="react-flow__edges react-flow__container"
         >
-          {isMaxLevel && <MarkerDefinitions defaultColor={defaultMarkerColor} rfId={props.rfId} />}
+          {isMaxLevel && <MarkerDefinitions defaultColor={defaultMarkerColor} rfId={rfId} />}
           <g>
             {edges.map((edge: Edge) => {
-              const [sourceNodeRect, sourceHandleBounds, sourceIsValid] = getNodeData(nodeInternals.get(edge.source)!);
-              const [targetNodeRect, targetHandleBounds, targetIsValid] = getNodeData(nodeInternals.get(edge.target)!);
+              const [sourceNodeRect, sourceHandleBounds, sourceIsValid] = getNodeData(nodeInternals.get(edge.source));
+              const [targetNodeRect, targetHandleBounds, targetIsValid] = getNodeData(nodeInternals.get(edge.target));
 
               if (!sourceIsValid || !targetIsValid) {
                 return null;
@@ -103,31 +97,29 @@ const EdgeRenderer = (props: EdgeRendererProps) => {
 
               let edgeType = edge.type || 'default';
 
-              if (!props.edgeTypes[edgeType]) {
-                devWarn(
-                  `Edge type "${edgeType}" not found. Using fallback type "default". Help: https://reactflow.dev/error#300`
-                );
-
+              if (!edgeTypes[edgeType]) {
+                onError?.('003', `Edge type "${edgeType}" not found. Using fallback type "default".`);
                 edgeType = 'default';
               }
 
-              const EdgeComponent = props.edgeTypes[edgeType] || props.edgeTypes.default;
-              // when connection type is loose we can define all handles as sources
+              const EdgeComponent = edgeTypes[edgeType] || edgeTypes.default;
+              // when connection type is loose we can define all handles as sources and connect source -> source
               const targetNodeHandles =
                 connectionMode === ConnectionMode.Strict
                   ? targetHandleBounds!.target
                   : (targetHandleBounds!.target ?? []).concat(targetHandleBounds!.source ?? []);
-              const sourceHandle = getHandle(sourceHandleBounds!.source!, edge.sourceHandle || null);
-              const targetHandle = getHandle(targetNodeHandles!, edge.targetHandle || null);
+              const sourceHandle = getHandle(sourceHandleBounds!.source!, edge.sourceHandle);
+              const targetHandle = getHandle(targetNodeHandles!, edge.targetHandle);
               const sourcePosition = sourceHandle?.position || Position.Bottom;
               const targetPosition = targetHandle?.position || Position.Top;
               const isFocusable = !!(edge.focusable || (edgesFocusable && typeof edge.focusable === 'undefined'));
 
               if (!sourceHandle || !targetHandle) {
-                devWarn(
-                  `Couldn't create edge for ${!sourceHandle ? 'source' : 'target'} handle id: ${
+                onError?.(
+                  '008',
+                  `Couldn't create edge for ${!sourceHandle ? 'source' : 'target'} handle id: "${
                     !sourceHandle ? edge.sourceHandle : edge.targetHandle
-                  }; edge id: ${edge.id}. Help: https://reactflow.dev/error#800`
+                  }", edge id: ${edge.id}.`
                 );
 
                 return null;
@@ -146,7 +138,7 @@ const EdgeRenderer = (props: EdgeRendererProps) => {
                 <EdgeComponent
                   key={edge.id}
                   id={edge.id}
-                  className={cc([edge.className, props.noPanClassName])}
+                  className={cc([edge.className, noPanClassName])}
                   type={edgeType}
                   data={edge.data}
                   selected={!!edge.selected}
@@ -172,17 +164,17 @@ const EdgeRenderer = (props: EdgeRendererProps) => {
                   sourcePosition={sourcePosition}
                   targetPosition={targetPosition}
                   elementsSelectable={elementsSelectable}
-                  onEdgeUpdate={props.onEdgeUpdate}
-                  onContextMenu={props.onEdgeContextMenu}
-                  onMouseEnter={props.onEdgeMouseEnter}
-                  onMouseMove={props.onEdgeMouseMove}
-                  onMouseLeave={props.onEdgeMouseLeave}
-                  onClick={props.onEdgeClick}
-                  edgeUpdaterRadius={props.edgeUpdaterRadius}
-                  onEdgeDoubleClick={props.onEdgeDoubleClick}
-                  onEdgeUpdateStart={props.onEdgeUpdateStart}
-                  onEdgeUpdateEnd={props.onEdgeUpdateEnd}
-                  rfId={props.rfId}
+                  onEdgeUpdate={onEdgeUpdate}
+                  onContextMenu={onEdgeContextMenu}
+                  onMouseEnter={onEdgeMouseEnter}
+                  onMouseMove={onEdgeMouseMove}
+                  onMouseLeave={onEdgeMouseLeave}
+                  onClick={onEdgeClick}
+                  edgeUpdaterRadius={edgeUpdaterRadius}
+                  onEdgeDoubleClick={onEdgeDoubleClick}
+                  onEdgeUpdateStart={onEdgeUpdateStart}
+                  onEdgeUpdateEnd={onEdgeUpdateEnd}
+                  rfId={rfId}
                   ariaLabel={edge.ariaLabel}
                   isFocusable={isFocusable}
                   pathOptions={'pathOptions' in edge ? edge.pathOptions : undefined}
@@ -193,23 +185,7 @@ const EdgeRenderer = (props: EdgeRendererProps) => {
           </g>
         </svg>
       ))}
-      {renderConnectionLine && (
-        <svg
-          style={connectionLineContainerStyle}
-          width={width}
-          height={height}
-          className="react-flow__edges react-flow__connectionline react-flow__container"
-        >
-          <ConnectionLine
-            connectionNodeId={connectionNodeId!}
-            connectionHandleType={connectionHandleType!}
-            connectionLineStyle={connectionLineStyle}
-            connectionLineType={connectionLineType}
-            isConnectable={nodesConnectable}
-            CustomConnectionLineComponent={connectionLineComponent}
-          />
-        </svg>
-      )}
+      {children}
     </>
   );
 };
diff --git a/packages/core/src/container/EdgeRenderer/utils.ts b/packages/core/src/container/EdgeRenderer/utils.ts
index eee01706..edd74543 100644
--- a/packages/core/src/container/EdgeRenderer/utils.ts
+++ b/packages/core/src/container/EdgeRenderer/utils.ts
@@ -72,21 +72,18 @@ export function getHandlePosition(position: Position, nodeRect: Rect, handle: Ha
   }
 }
 
-export function getHandle(bounds: HandleElement[], handleId: string | null): HandleElement | null {
+export function getHandle(bounds: HandleElement[], handleId?: string | null): HandleElement | null {
   if (!bounds) {
     return null;
   }
 
-  // there is no handleId when there are no multiple handles/ handles with ids
-  // so we just pick the first one
-  let handle: HandleElement | null = null;
-  if (bounds.length === 1 || !handleId) {
-    handle = bounds[0];
-  } else if (handleId) {
-    handle = bounds.find((d) => d.id === handleId)!;
+  if (handleId) {
+    return bounds.find((d) => d.id === handleId)!;
+  } else if (bounds.length === 1) {
+    return bounds[0];
   }
 
-  return typeof handle === 'undefined' ? null : handle;
+  return null;
 }
 
 interface EdgePositions {
@@ -167,16 +164,15 @@ export function isEdgeVisible({
   return overlappingArea > 0;
 }
 
-export function getNodeData(node: Node): [Rect, NodeHandleBounds | null, boolean] {
+export function getNodeData(node?: Node): [Rect, NodeHandleBounds | null, boolean] {
   const handleBounds = node?.[internalsSymbol]?.handleBounds || null;
 
-  const isInvalid =
-    !node ||
-    !handleBounds ||
-    !node.width ||
-    !node.height ||
-    typeof node.positionAbsolute?.x === 'undefined' ||
-    typeof node.positionAbsolute?.y === 'undefined';
+  const isValid =
+    handleBounds &&
+    node?.width &&
+    node?.height &&
+    typeof node?.positionAbsolute?.x !== 'undefined' &&
+    typeof node?.positionAbsolute?.y !== 'undefined';
 
   return [
     {
@@ -186,6 +182,6 @@ export function getNodeData(node: Node): [Rect, NodeHandleBounds | null, boolean
       height: node?.height || 0,
     },
     handleBounds,
-    !isInvalid,
+    !!isValid,
   ];
 }

From 9527261719e4358efed67e8d90a16192612450bb Mon Sep 17 00:00:00 2001
From: moklick <info@moritzklack.com>
Date: Wed, 25 Jan 2023 17:47:42 +0100
Subject: [PATCH 22/30] feat(onError): add onError prop #2772

---
 packages/core/src/components/Edges/wrapEdge.tsx  |  4 ++--
 packages/core/src/components/Handle/index.tsx    |  7 +++++--
 packages/core/src/components/Handle/utils.ts     |  2 +-
 .../core/src/components/StoreUpdater/index.tsx   |  3 +++
 .../src/container/EdgeRenderer/MarkerSymbols.tsx |  5 +++--
 packages/core/src/container/GraphView/index.tsx  | 14 +++++++++-----
 .../core/src/container/NodeRenderer/index.tsx    | 13 +++++--------
 .../core/src/container/NodeRenderer/utils.ts     |  2 --
 packages/core/src/container/ReactFlow/index.tsx  |  2 ++
 packages/core/src/container/ReactFlow/utils.ts   |  3 ++-
 packages/core/src/hooks/useDrag/index.ts         |  3 ++-
 packages/core/src/hooks/useDrag/utils.ts         |  9 +++++----
 packages/core/src/hooks/useResizeHandler.ts      |  8 ++++----
 .../core/src/hooks/useUpdateNodePositions.ts     | 16 ++++++++++++----
 packages/core/src/store/initialState.ts          |  2 ++
 packages/core/src/styles/init.css                |  2 +-
 packages/core/src/types/component-props.ts       |  2 ++
 packages/core/src/types/general.ts               |  3 +++
 packages/core/src/utils/graph.ts                 |  6 +++---
 packages/core/src/utils/index.ts                 |  4 ++--
 20 files changed, 68 insertions(+), 42 deletions(-)

diff --git a/packages/core/src/components/Edges/wrapEdge.tsx b/packages/core/src/components/Edges/wrapEdge.tsx
index 36c49615..9d10f944 100644
--- a/packages/core/src/components/Edges/wrapEdge.tsx
+++ b/packages/core/src/components/Edges/wrapEdge.tsx
@@ -9,7 +9,7 @@ import { EdgeAnchor } from './EdgeAnchor';
 import { getMarkerId } from '../../utils/graph';
 import { getMouseHandler } from './utils';
 import { elementSelectionKeys } from '../../utils';
-import type { EdgeProps, WrapEdgeProps, Connection } from '../../types';
+import type { EdgeProps, WrapEdgeProps, Connection, HandleType } from '../../types';
 
 export default (EdgeComponent: ComponentType<EdgeProps>) => {
   const EdgeWrapper = ({
@@ -115,7 +115,7 @@ export default (EdgeComponent: ComponentType<EdgeProps>) => {
         getState: store.getState,
         setState: store.setState,
         isValidConnection,
-        elementEdgeUpdaterType: handleType,
+        edgeUpdaterType: handleType,
         onEdgeUpdateEnd: _onEdgeUpdateEnd,
       });
     };
diff --git a/packages/core/src/components/Handle/index.tsx b/packages/core/src/components/Handle/index.tsx
index aa887d2f..1bf631b9 100644
--- a/packages/core/src/components/Handle/index.tsx
+++ b/packages/core/src/components/Handle/index.tsx
@@ -5,7 +5,7 @@ import { shallow } from 'zustand/shallow';
 import { useStore, useStoreApi } from '../../hooks/useStore';
 import { useNodeId } from '../../contexts/NodeIdContext';
 import { handlePointerDown } from './handler';
-import { devWarn, getHostForElement, isMouseEvent } from '../../utils';
+import { getHostForElement, isMouseEvent } from '../../utils';
 import { addEdge } from '../../utils/graph';
 import { Position } from '../../types';
 import type { HandleProps, Connection, ReactFlowState } from '../../types';
@@ -42,7 +42,10 @@ const Handle = forwardRef<HTMLDivElement, HandleComponentProps>(
     const nodeId = useNodeId();
 
     if (!nodeId) {
-      devWarn('Handle: No node id found. Make sure to only use a Handle inside a custom Node.');
+      store
+        .getState()
+        .onError?.('010', 'Handle: No node id found. Make sure to only use a Handle inside a custom Node.');
+
       return null;
     }
 
diff --git a/packages/core/src/components/Handle/utils.ts b/packages/core/src/components/Handle/utils.ts
index 74c0ef5a..a049a2cc 100644
--- a/packages/core/src/components/Handle/utils.ts
+++ b/packages/core/src/components/Handle/utils.ts
@@ -98,7 +98,7 @@ export function isValidHandle(
     const isValid =
       connectionMode === ConnectionMode.Strict
         ? (isTarget && handleIsSource) || (!isTarget && handleIsTarget)
-        : handleNodeId !== handle.nodeId || handleId !== handle.id;
+        : handleNodeId !== fromNodeId || handleId !== fromHandleId;
 
     if (isValid) {
       result.isValid = isValidConnection(connection);
diff --git a/packages/core/src/components/StoreUpdater/index.tsx b/packages/core/src/components/StoreUpdater/index.tsx
index 55af8fb4..c5645944 100644
--- a/packages/core/src/components/StoreUpdater/index.tsx
+++ b/packages/core/src/components/StoreUpdater/index.tsx
@@ -47,6 +47,7 @@ type StoreUpdaterProps = Pick<
   | 'elevateNodesOnSelect'
   | 'autoPanOnConnect'
   | 'autoPanOnNodeDrag'
+  | 'onError'
 > & { rfId: string };
 
 const selector = (s: ReactFlowState) => ({
@@ -123,6 +124,7 @@ const StoreUpdater = ({
   rfId,
   autoPanOnConnect,
   autoPanOnNodeDrag,
+  onError,
 }: StoreUpdaterProps) => {
   const {
     setNodes,
@@ -178,6 +180,7 @@ const StoreUpdater = ({
   useDirectStoreUpdater('rfId', rfId, store.setState);
   useDirectStoreUpdater('autoPanOnConnect', autoPanOnConnect, store.setState);
   useDirectStoreUpdater('autoPanOnNodeDrag', autoPanOnNodeDrag, store.setState);
+  useDirectStoreUpdater('onError', onError, store.setState);
 
   useStoreUpdater<Node[]>(nodes, setNodes);
   useStoreUpdater<Edge[]>(edges, setEdges);
diff --git a/packages/core/src/container/EdgeRenderer/MarkerSymbols.tsx b/packages/core/src/container/EdgeRenderer/MarkerSymbols.tsx
index fbdd4972..d95fd70d 100644
--- a/packages/core/src/container/EdgeRenderer/MarkerSymbols.tsx
+++ b/packages/core/src/container/EdgeRenderer/MarkerSymbols.tsx
@@ -1,8 +1,8 @@
 import { useMemo } from 'react';
 
-import { devWarn } from '../../utils';
 import { MarkerType } from '../../types';
 import type { EdgeMarker } from '../../types';
+import { useStoreApi } from '../../hooks/useStore';
 
 type SymbolProps = Omit<EdgeMarker, 'type'>;
 
@@ -38,11 +38,12 @@ export const MarkerSymbols = {
 };
 
 export function useMarkerSymbol(type: MarkerType) {
+  const store = useStoreApi();
   const symbol = useMemo(() => {
     const symbolExists = Object.prototype.hasOwnProperty.call(MarkerSymbols, type);
 
     if (!symbolExists) {
-      devWarn(`Marker type "${type}" doesn't exist. Help: https://reactflow.dev/error#900`);
+      store.getState().onError?.('009', `Marker type "${type}" doesn't exist.`);
 
       return null;
     }
diff --git a/packages/core/src/container/GraphView/index.tsx b/packages/core/src/container/GraphView/index.tsx
index 425d9180..3de2550c 100644
--- a/packages/core/src/container/GraphView/index.tsx
+++ b/packages/core/src/container/GraphView/index.tsx
@@ -6,6 +6,7 @@ import EdgeRenderer from '../EdgeRenderer';
 import ViewportWrapper from '../Viewport';
 import useOnInitHandler from '../../hooks/useOnInitHandler';
 import type { EdgeTypesWrapped, NodeTypesWrapped, ReactFlowProps } from '../../types';
+import ConnectionLine from '../../components/ConnectionLine';
 
 export type GraphViewProps = Omit<ReactFlowProps, 'onSelectionChange' | 'nodes' | 'edges' | 'nodeTypes' | 'edgeTypes'> &
   Required<
@@ -149,10 +150,6 @@ const GraphView = ({
           edgeTypes={edgeTypes}
           onEdgeClick={onEdgeClick}
           onEdgeDoubleClick={onEdgeDoubleClick}
-          connectionLineType={connectionLineType}
-          connectionLineStyle={connectionLineStyle}
-          connectionLineComponent={connectionLineComponent}
-          connectionLineContainerStyle={connectionLineContainerStyle}
           onEdgeUpdate={onEdgeUpdate}
           onlyRenderVisibleElements={onlyRenderVisibleElements}
           onEdgeContextMenu={onEdgeContextMenu}
@@ -167,7 +164,14 @@ const GraphView = ({
           elevateEdgesOnSelect={!!elevateEdgesOnSelect}
           disableKeyboardA11y={disableKeyboardA11y}
           rfId={rfId}
-        />
+        >
+          <ConnectionLine
+            style={connectionLineStyle}
+            type={connectionLineType}
+            component={connectionLineComponent}
+            containerStyle={connectionLineContainerStyle}
+          />
+        </EdgeRenderer>
         <div className="react-flow__edgelabel-renderer" />
 
         <NodeRenderer
diff --git a/packages/core/src/container/NodeRenderer/index.tsx b/packages/core/src/container/NodeRenderer/index.tsx
index 5f0c6933..7129b937 100644
--- a/packages/core/src/container/NodeRenderer/index.tsx
+++ b/packages/core/src/container/NodeRenderer/index.tsx
@@ -4,7 +4,7 @@ import { shallow } from 'zustand/shallow';
 
 import useVisibleNodes from '../../hooks/useVisibleNodes';
 import { useStore } from '../../hooks/useStore';
-import { clampPosition, devWarn, internalsSymbol } from '../../utils';
+import { clampPosition, internalsSymbol } from '../../utils';
 import { containerStyle } from '../../styles';
 import { GraphViewProps } from '../GraphView';
 import { getPositionWithOrigin } from './utils';
@@ -36,13 +36,12 @@ const selector = (s: ReactFlowState) => ({
   nodesFocusable: s.nodesFocusable,
   elementsSelectable: s.elementsSelectable,
   updateNodeDimensions: s.updateNodeDimensions,
+  onError: s.onError,
 });
 
 const NodeRenderer = (props: NodeRendererProps) => {
-  const { nodesDraggable, nodesConnectable, nodesFocusable, elementsSelectable, updateNodeDimensions } = useStore(
-    selector,
-    shallow
-  );
+  const { nodesDraggable, nodesConnectable, nodesFocusable, elementsSelectable, updateNodeDimensions, onError } =
+    useStore(selector, shallow);
   const nodes = useVisibleNodes(props.onlyRenderVisibleElements);
   const resizeObserverRef = useRef<ResizeObserver>();
 
@@ -78,9 +77,7 @@ const NodeRenderer = (props: NodeRendererProps) => {
         let nodeType = node.type || 'default';
 
         if (!props.nodeTypes[nodeType]) {
-          devWarn(
-            `Node type "${nodeType}" not found. Using fallback type "default". Help: https://reactflow.dev/error#300`
-          );
+          onError?.('003', `Node type "${nodeType}" not found. Using fallback type "default".`);
 
           nodeType = 'default';
         }
diff --git a/packages/core/src/container/NodeRenderer/utils.ts b/packages/core/src/container/NodeRenderer/utils.ts
index ebac7413..6abc695d 100644
--- a/packages/core/src/container/NodeRenderer/utils.ts
+++ b/packages/core/src/container/NodeRenderer/utils.ts
@@ -5,7 +5,6 @@ import InputNode from '../../components/Nodes/InputNode';
 import OutputNode from '../../components/Nodes/OutputNode';
 import GroupNode from '../../components/Nodes/GroupNode';
 import wrapNode from '../../components/Nodes/wrapNode';
-import { devWarn } from '../../utils';
 import type { NodeTypes, NodeProps, NodeTypesWrapped, NodeOrigin, XYPosition } from '../../types';
 
 export type CreateNodeTypes = (nodeTypes: NodeTypes) => NodeTypesWrapped;
@@ -51,7 +50,6 @@ export const getPositionWithOrigin = ({
   }
 
   if (origin[0] < 0 || origin[1] < 0 || origin[0] > 1 || origin[1] > 1) {
-    devWarn('nodeOrigin must be between 0 and 1');
     return { x, y };
   }
 
diff --git a/packages/core/src/container/ReactFlow/index.tsx b/packages/core/src/container/ReactFlow/index.tsx
index 67964f0f..120a5efa 100644
--- a/packages/core/src/container/ReactFlow/index.tsx
+++ b/packages/core/src/container/ReactFlow/index.tsx
@@ -163,6 +163,7 @@ const ReactFlow = forwardRef<ReactFlowRefType, ReactFlowProps>(
       autoPanOnConnect = true,
       autoPanOnNodeDrag = true,
       connectionRadius = 20,
+      onError,
       style,
       id,
       ...rest
@@ -292,6 +293,7 @@ const ReactFlow = forwardRef<ReactFlowRefType, ReactFlowProps>(
             rfId={rfId}
             autoPanOnConnect={autoPanOnConnect}
             autoPanOnNodeDrag={autoPanOnNodeDrag}
+            onError={onError}
           />
           <SelectionListener onSelectionChange={onSelectionChange} />
           {children}
diff --git a/packages/core/src/container/ReactFlow/utils.ts b/packages/core/src/container/ReactFlow/utils.ts
index 2f8a9239..f76f91f1 100644
--- a/packages/core/src/container/ReactFlow/utils.ts
+++ b/packages/core/src/container/ReactFlow/utils.ts
@@ -17,7 +17,8 @@ export function useNodeOrEdgeTypes(nodeOrEdgeTypes: any, createTypes: any): any
       const typeKeys = Object.keys(nodeOrEdgeTypes);
       if (shallow(typesKeysRef.current, typeKeys)) {
         devWarn(
-          "It looks like you have created a new nodeTypes or edgeTypes object. If this wasn't on purpose please define the nodeTypes/edgeTypes outside of the component or memoize them. Help: https://reactflow.dev/error#200"
+          '002',
+          "It looks like you've created a new nodeTypes or edgeTypes object. If this wasn't on purpose please define the nodeTypes/edgeTypes outside of the component or memoize them."
         );
       }
 
diff --git a/packages/core/src/hooks/useDrag/index.ts b/packages/core/src/hooks/useDrag/index.ts
index 868b6387..c6f3d269 100644
--- a/packages/core/src/hooks/useDrag/index.ts
+++ b/packages/core/src/hooks/useDrag/index.ts
@@ -61,6 +61,7 @@ function useDrag({
           snapGrid,
           snapToGrid,
           nodeOrigin,
+          onError,
         } = store.getState();
 
         lastPos.current = { x, y };
@@ -75,7 +76,7 @@ function useDrag({
             nextPosition.y = snapGrid[1] * Math.round(nextPosition.y / snapGrid[1]);
           }
 
-          const updatedPos = calcNextPosition(n, nextPosition, nodeInternals, nodeExtent, nodeOrigin);
+          const updatedPos = calcNextPosition(n, nextPosition, nodeInternals, nodeExtent, nodeOrigin, onError);
 
           // we want to make sure that we only fire a change event when there is a changes
           hasChange = hasChange || n.position.x !== updatedPos.position.x || n.position.y !== updatedPos.position.y;
diff --git a/packages/core/src/hooks/useDrag/utils.ts b/packages/core/src/hooks/useDrag/utils.ts
index 74484baf..028387aa 100644
--- a/packages/core/src/hooks/useDrag/utils.ts
+++ b/packages/core/src/hooks/useDrag/utils.ts
@@ -1,7 +1,7 @@
 import type { RefObject } from 'react';
 
-import { clampPosition, devWarn, isNumeric } from '../../utils';
-import type { CoordinateExtent, Node, NodeDragItem, NodeInternals, NodeOrigin, XYPosition } from '../../types';
+import { clampPosition, isNumeric } from '../../utils';
+import type { CoordinateExtent, Node, NodeDragItem, NodeInternals, NodeOrigin, OnError, XYPosition } from '../../types';
 import { getNodePositionWithOrigin } from '../../utils/graph';
 
 export function isParentSelected(node: Node, nodeInternals: NodeInternals): boolean {
@@ -62,7 +62,8 @@ export function calcNextPosition(
   nextPosition: XYPosition,
   nodeInternals: NodeInternals,
   nodeExtent?: CoordinateExtent,
-  nodeOrigin: NodeOrigin = [0, 0]
+  nodeOrigin: NodeOrigin = [0, 0],
+  onError?: OnError
 ): { position: XYPosition; positionAbsolute: XYPosition } {
   let currentExtent = node.extent || nodeExtent;
 
@@ -81,7 +82,7 @@ export function calcNextPosition(
             ]
           : currentExtent;
     } else {
-      devWarn('Only child nodes can use a parent extent. Help: https://reactflow.dev/error#500');
+      onError?.('005', 'Only child nodes can use a parent extent.');
 
       currentExtent = nodeExtent;
     }
diff --git a/packages/core/src/hooks/useResizeHandler.ts b/packages/core/src/hooks/useResizeHandler.ts
index d2ca3e63..5fc9aebc 100644
--- a/packages/core/src/hooks/useResizeHandler.ts
+++ b/packages/core/src/hooks/useResizeHandler.ts
@@ -2,7 +2,7 @@ import { useEffect } from 'react';
 import type { MutableRefObject } from 'react';
 
 import { useStoreApi } from '../hooks/useStore';
-import { devWarn, getDimensions } from '../utils';
+import { getDimensions } from '../utils';
 
 function useResizeHandler(rendererNode: MutableRefObject<HTMLDivElement | null>): void {
   const store = useStoreApi();
@@ -18,9 +18,9 @@ function useResizeHandler(rendererNode: MutableRefObject<HTMLDivElement | null>)
       const size = getDimensions(rendererNode.current);
 
       if (size.height === 0 || size.width === 0) {
-        devWarn(
-          'The React Flow parent container needs a width and a height to render the graph. Help: https://reactflow.dev/error#400'
-        );
+        store
+          .getState()
+          .onError?.('004', 'The React Flow parent container needs a width and a height to render the graph.');
       }
 
       store.setState({ width: size.width || 500, height: size.height || 500 });
diff --git a/packages/core/src/hooks/useUpdateNodePositions.ts b/packages/core/src/hooks/useUpdateNodePositions.ts
index b20ea4d1..131f85cd 100644
--- a/packages/core/src/hooks/useUpdateNodePositions.ts
+++ b/packages/core/src/hooks/useUpdateNodePositions.ts
@@ -7,7 +7,8 @@ function useUpdateNodePositions() {
   const store = useStoreApi();
 
   const updatePositions = useCallback((params: { x: number; y: number; isShiftPressed: boolean }) => {
-    const { nodeInternals, nodeExtent, updateNodePositions, getNodes, snapToGrid, snapGrid } = store.getState();
+    const { nodeInternals, nodeExtent, updateNodePositions, getNodes, snapToGrid, snapGrid, onError } =
+      store.getState();
     const selectedNodes = getNodes().filter((n) => n.selected);
     // by default a node moves 5px on each key press, or 20px if shift is pressed
     // if snap grid is enabled, we use that for the velocity.
@@ -27,10 +28,17 @@ function useUpdateNodePositions() {
           nextPosition.y = snapGrid[1] * Math.round(nextPosition.y / snapGrid[1]);
         }
 
-        const updatedPos = calcNextPosition(n, nextPosition, nodeInternals, nodeExtent);
+        const { positionAbsolute, position } = calcNextPosition(
+          n,
+          nextPosition,
+          nodeInternals,
+          nodeExtent,
+          undefined,
+          onError
+        );
 
-        n.position = updatedPos.position;
-        n.positionAbsolute = updatedPos.positionAbsolute;
+        n.position = position;
+        n.positionAbsolute = positionAbsolute;
       }
 
       return n;
diff --git a/packages/core/src/store/initialState.ts b/packages/core/src/store/initialState.ts
index 6c475b5b..afccec2b 100644
--- a/packages/core/src/store/initialState.ts
+++ b/packages/core/src/store/initialState.ts
@@ -1,3 +1,4 @@
+import { devWarn } from '../utils';
 import { ConnectionMode } from '../types';
 import type { CoordinateExtent, ReactFlowStore } from '../types';
 
@@ -59,6 +60,7 @@ const initialState: ReactFlowStore = {
   autoPanOnConnect: true,
   autoPanOnNodeDrag: true,
   connectionRadius: 20,
+  onError: devWarn,
 };
 
 export default initialState;
diff --git a/packages/core/src/styles/init.css b/packages/core/src/styles/init.css
index a621794f..9cecc294 100644
--- a/packages/core/src/styles/init.css
+++ b/packages/core/src/styles/init.css
@@ -98,7 +98,7 @@
 .react-flow__connection {
   pointer-events: none;
 
-  &.animated {
+  .animated {
     stroke-dasharray: 5;
     animation: dashdraw 0.5s linear infinite;
   }
diff --git a/packages/core/src/types/component-props.ts b/packages/core/src/types/component-props.ts
index bafb8d5e..1614805a 100644
--- a/packages/core/src/types/component-props.ts
+++ b/packages/core/src/types/component-props.ts
@@ -36,6 +36,7 @@ import type {
   EdgeMouseHandler,
   HandleType,
   SelectionMode,
+  OnError,
 } from '.';
 
 export type ReactFlowProps = HTMLAttributes<HTMLDivElement> & {
@@ -142,6 +143,7 @@ export type ReactFlowProps = HTMLAttributes<HTMLDivElement> & {
   autoPanOnNodeDrag?: boolean;
   autoPanOnConnect?: boolean;
   connectionRadius?: number;
+  onError?: OnError;
 };
 
 export type ReactFlowRefType = HTMLDivElement;
diff --git a/packages/core/src/types/general.ts b/packages/core/src/types/general.ts
index ba0de157..9dbd3dce 100644
--- a/packages/core/src/types/general.ts
+++ b/packages/core/src/types/general.ts
@@ -206,6 +206,7 @@ export type ReactFlowStore = {
 
   onNodesDelete?: OnNodesDelete;
   onEdgesDelete?: OnEdgesDelete;
+  onError?: OnError;
 
   // event handlers
   onViewportChangeStart?: OnViewportChange;
@@ -270,3 +271,5 @@ export type SelectionRect = Rect & {
   startX: number;
   startY: number;
 };
+
+export type OnError = (id: string, message: string) => void;
diff --git a/packages/core/src/utils/graph.ts b/packages/core/src/utils/graph.ts
index 7e94f766..4b1182f4 100644
--- a/packages/core/src/utils/graph.ts
+++ b/packages/core/src/utils/graph.ts
@@ -70,7 +70,7 @@ const connectionExists = (edge: Edge, edges: Edge[]) => {
 
 export const addEdge = (edgeParams: Edge | Connection, edges: Edge[]): Edge[] => {
   if (!edgeParams.source || !edgeParams.target) {
-    devWarn("Can't create edge. An edge needs a source and a target. Help: https://reactflow.dev/error#600");
+    devWarn('006', "Can't create edge. An edge needs a source and a target.");
 
     return edges;
   }
@@ -94,7 +94,7 @@ export const addEdge = (edgeParams: Edge | Connection, edges: Edge[]): Edge[] =>
 
 export const updateEdge = (oldEdge: Edge, newConnection: Connection, edges: Edge[]): Edge[] => {
   if (!newConnection.source || !newConnection.target) {
-    devWarn("Can't create a new edge. An edge needs a source and a target. Help: https://reactflow.dev/error#600");
+    devWarn('006', "Can't create a new edge. An edge needs a source and a target.");
 
     return edges;
   }
@@ -102,7 +102,7 @@ export const updateEdge = (oldEdge: Edge, newConnection: Connection, edges: Edge
   const foundEdge = edges.find((e) => e.id === oldEdge.id) as Edge;
 
   if (!foundEdge) {
-    devWarn(`The old edge with id=${oldEdge.id} does not exist. Help: https://reactflow.dev/error#700`);
+    devWarn('007', `The old edge with id=${oldEdge.id} does not exist.`);
 
     return edges;
   }
diff --git a/packages/core/src/utils/index.ts b/packages/core/src/utils/index.ts
index 5bfd52c2..de449277 100644
--- a/packages/core/src/utils/index.ts
+++ b/packages/core/src/utils/index.ts
@@ -89,9 +89,9 @@ export const internalsSymbol = Symbol.for('internals');
 // used for a11y key board controls for nodes and edges
 export const elementSelectionKeys = ['Enter', ' ', 'Escape'];
 
-export const devWarn = (message: string) => {
+export const devWarn = (id: string, message: string) => {
   if (process.env.NODE_ENV === 'development') {
-    console.warn(`[React Flow]: ${message}`);
+    console.warn(`[React Flow]: ${message} Help: https://reactflow.dev/error#${id}`);
   }
 };
 

From 3b543cb01578f246fe4b6e898422c4ced90dfa11 Mon Sep 17 00:00:00 2001
From: moklick <info@moritzklack.com>
Date: Wed, 25 Jan 2023 18:10:09 +0100
Subject: [PATCH 23/30] chore(isMouseEvent): use different attr

---
 packages/core/src/utils/index.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/core/src/utils/index.ts b/packages/core/src/utils/index.ts
index de449277..f1021bfb 100644
--- a/packages/core/src/utils/index.ts
+++ b/packages/core/src/utils/index.ts
@@ -118,7 +118,7 @@ export function isInputDOMNode(event: KeyboardEvent | ReactKeyboardEvent): boole
 
 export const isMouseEvent = (
   event: MouseEvent | ReactMouseEvent | TouchEvent | ReactTouchEvent
-): event is MouseEvent | ReactMouseEvent => 'button' in event;
+): event is MouseEvent | ReactMouseEvent => 'clientX' in event;
 
 export const getEventPosition = (
   event: MouseEvent | ReactMouseEvent | TouchEvent | ReactTouchEvent,

From 54010e7ee6475e71b4a6fc25f975b1422441133f Mon Sep 17 00:00:00 2001
From: moklick <info@moritzklack.com>
Date: Wed, 25 Jan 2023 18:32:13 +0100
Subject: [PATCH 24/30] refactor(errors): put in constants

---
 packages/core/src/components/Handle/index.tsx |  5 ++---
 .../container/EdgeRenderer/MarkerSymbols.tsx  |  3 ++-
 .../core/src/container/EdgeRenderer/index.tsx | 10 +++-------
 .../core/src/container/NodeRenderer/index.tsx |  3 ++-
 .../core/src/container/ReactFlow/utils.ts     |  6 ++----
 packages/core/src/contants.ts                 | 20 +++++++++++++++++++
 packages/core/src/hooks/useDrag/utils.ts      |  3 ++-
 packages/core/src/hooks/useResizeHandler.ts   |  5 ++---
 packages/core/src/hooks/useStore.ts           |  8 ++++----
 packages/core/src/utils/graph.ts              |  7 ++++---
 10 files changed, 43 insertions(+), 27 deletions(-)
 create mode 100644 packages/core/src/contants.ts

diff --git a/packages/core/src/components/Handle/index.tsx b/packages/core/src/components/Handle/index.tsx
index 1bf631b9..59d2bd7f 100644
--- a/packages/core/src/components/Handle/index.tsx
+++ b/packages/core/src/components/Handle/index.tsx
@@ -10,6 +10,7 @@ import { addEdge } from '../../utils/graph';
 import { Position } from '../../types';
 import type { HandleProps, Connection, ReactFlowState } from '../../types';
 import { isValidHandle } from './utils';
+import { errorMessages } from '../../contants';
 
 const alwaysValid = () => true;
 
@@ -42,9 +43,7 @@ const Handle = forwardRef<HTMLDivElement, HandleComponentProps>(
     const nodeId = useNodeId();
 
     if (!nodeId) {
-      store
-        .getState()
-        .onError?.('010', 'Handle: No node id found. Make sure to only use a Handle inside a custom Node.');
+      store.getState().onError?.('010', errorMessages['010']());
 
       return null;
     }
diff --git a/packages/core/src/container/EdgeRenderer/MarkerSymbols.tsx b/packages/core/src/container/EdgeRenderer/MarkerSymbols.tsx
index d95fd70d..7429f635 100644
--- a/packages/core/src/container/EdgeRenderer/MarkerSymbols.tsx
+++ b/packages/core/src/container/EdgeRenderer/MarkerSymbols.tsx
@@ -3,6 +3,7 @@ import { useMemo } from 'react';
 import { MarkerType } from '../../types';
 import type { EdgeMarker } from '../../types';
 import { useStoreApi } from '../../hooks/useStore';
+import { errorMessages } from '../../contants';
 
 type SymbolProps = Omit<EdgeMarker, 'type'>;
 
@@ -43,7 +44,7 @@ export function useMarkerSymbol(type: MarkerType) {
     const symbolExists = Object.prototype.hasOwnProperty.call(MarkerSymbols, type);
 
     if (!symbolExists) {
-      store.getState().onError?.('009', `Marker type "${type}" doesn't exist.`);
+      store.getState().onError?.('009', errorMessages['009'](type));
 
       return null;
     }
diff --git a/packages/core/src/container/EdgeRenderer/index.tsx b/packages/core/src/container/EdgeRenderer/index.tsx
index e25f305d..ddc4aa4d 100644
--- a/packages/core/src/container/EdgeRenderer/index.tsx
+++ b/packages/core/src/container/EdgeRenderer/index.tsx
@@ -10,6 +10,7 @@ import { getEdgePositions, getHandle, getNodeData } from './utils';
 import { GraphViewProps } from '../GraphView';
 import { ConnectionMode, Position } from '../../types';
 import type { Edge, ReactFlowState } from '../../types';
+import { errorMessages } from '../../contants';
 
 type EdgeRendererProps = Pick<
   GraphViewProps,
@@ -98,7 +99,7 @@ const EdgeRenderer = ({
               let edgeType = edge.type || 'default';
 
               if (!edgeTypes[edgeType]) {
-                onError?.('003', `Edge type "${edgeType}" not found. Using fallback type "default".`);
+                onError?.('011', errorMessages['011'](edgeType));
                 edgeType = 'default';
               }
 
@@ -115,12 +116,7 @@ const EdgeRenderer = ({
               const isFocusable = !!(edge.focusable || (edgesFocusable && typeof edge.focusable === 'undefined'));
 
               if (!sourceHandle || !targetHandle) {
-                onError?.(
-                  '008',
-                  `Couldn't create edge for ${!sourceHandle ? 'source' : 'target'} handle id: "${
-                    !sourceHandle ? edge.sourceHandle : edge.targetHandle
-                  }", edge id: ${edge.id}.`
-                );
+                onError?.('008', errorMessages['008'](sourceHandle, edge));
 
                 return null;
               }
diff --git a/packages/core/src/container/NodeRenderer/index.tsx b/packages/core/src/container/NodeRenderer/index.tsx
index 7129b937..ab35cb74 100644
--- a/packages/core/src/container/NodeRenderer/index.tsx
+++ b/packages/core/src/container/NodeRenderer/index.tsx
@@ -10,6 +10,7 @@ import { GraphViewProps } from '../GraphView';
 import { getPositionWithOrigin } from './utils';
 import { Position } from '../../types';
 import type { ReactFlowState, WrapNodeProps } from '../../types';
+import { errorMessages } from '../../contants';
 
 type NodeRendererProps = Pick<
   GraphViewProps,
@@ -77,7 +78,7 @@ const NodeRenderer = (props: NodeRendererProps) => {
         let nodeType = node.type || 'default';
 
         if (!props.nodeTypes[nodeType]) {
-          onError?.('003', `Node type "${nodeType}" not found. Using fallback type "default".`);
+          onError?.('003', errorMessages['003'](nodeType));
 
           nodeType = 'default';
         }
diff --git a/packages/core/src/container/ReactFlow/utils.ts b/packages/core/src/container/ReactFlow/utils.ts
index f76f91f1..cc5ab36d 100644
--- a/packages/core/src/container/ReactFlow/utils.ts
+++ b/packages/core/src/container/ReactFlow/utils.ts
@@ -5,6 +5,7 @@ import { devWarn } from '../../utils';
 import { CreateEdgeTypes } from '../EdgeRenderer/utils';
 import { CreateNodeTypes } from '../NodeRenderer/utils';
 import type { EdgeTypes, EdgeTypesWrapped, NodeTypes, NodeTypesWrapped } from '../../types';
+import { errorMessages } from '../../contants';
 
 export function useNodeOrEdgeTypes(nodeOrEdgeTypes: NodeTypes, createTypes: CreateNodeTypes): NodeTypesWrapped;
 export function useNodeOrEdgeTypes(nodeOrEdgeTypes: EdgeTypes, createTypes: CreateEdgeTypes): EdgeTypesWrapped;
@@ -16,10 +17,7 @@ export function useNodeOrEdgeTypes(nodeOrEdgeTypes: any, createTypes: any): any
     if (process.env.NODE_ENV === 'development') {
       const typeKeys = Object.keys(nodeOrEdgeTypes);
       if (shallow(typesKeysRef.current, typeKeys)) {
-        devWarn(
-          '002',
-          "It looks like you've created a new nodeTypes or edgeTypes object. If this wasn't on purpose please define the nodeTypes/edgeTypes outside of the component or memoize them."
-        );
+        devWarn('002', errorMessages['002']());
       }
 
       typesKeysRef.current = typeKeys;
diff --git a/packages/core/src/contants.ts b/packages/core/src/contants.ts
new file mode 100644
index 00000000..815ac6f0
--- /dev/null
+++ b/packages/core/src/contants.ts
@@ -0,0 +1,20 @@
+import { Edge, HandleElement } from './types';
+
+export const errorMessages = {
+  '001': () =>
+    '[React Flow]: Seems like you have not used zustand provider as an ancestor. Help: https://reactflow.dev/error#001',
+  '002': () =>
+    "It looks like you've created a new nodeTypes or edgeTypes object. If this wasn't on purpose please define the nodeTypes/edgeTypes outside of the component or memoize them.",
+  '003': (nodeType: string) => `Node type "${nodeType}" not found. Using fallback type "default".`,
+  '004': () => 'The React Flow parent container needs a width and a height to render the graph.',
+  '005': () => 'Only child nodes can use a parent extent.',
+  '006': () => "Can't create edge. An edge needs a source and a target.",
+  '007': (id: string) => `The old edge with id=${id} does not exist.`,
+  '009': (type: string) => `Marker type "${type}" doesn't exist.`,
+  '008': (sourceHandle: HandleElement | null, edge: Edge) =>
+    `Couldn't create edge for ${!sourceHandle ? 'source' : 'target'} handle id: "${
+      !sourceHandle ? edge.sourceHandle : edge.targetHandle
+    }", edge id: ${edge.id}.`,
+  '010': () => 'Handle: No node id found. Make sure to only use a Handle inside a custom Node.',
+  '011': (edgeType: string) => `Edge type "${edgeType}" not found. Using fallback type "default".`,
+};
diff --git a/packages/core/src/hooks/useDrag/utils.ts b/packages/core/src/hooks/useDrag/utils.ts
index 028387aa..ed40053b 100644
--- a/packages/core/src/hooks/useDrag/utils.ts
+++ b/packages/core/src/hooks/useDrag/utils.ts
@@ -3,6 +3,7 @@ import type { RefObject } from 'react';
 import { clampPosition, isNumeric } from '../../utils';
 import type { CoordinateExtent, Node, NodeDragItem, NodeInternals, NodeOrigin, OnError, XYPosition } from '../../types';
 import { getNodePositionWithOrigin } from '../../utils/graph';
+import { errorMessages } from '../../contants';
 
 export function isParentSelected(node: Node, nodeInternals: NodeInternals): boolean {
   if (!node.parentNode) {
@@ -82,7 +83,7 @@ export function calcNextPosition(
             ]
           : currentExtent;
     } else {
-      onError?.('005', 'Only child nodes can use a parent extent.');
+      onError?.('005', errorMessages['005']());
 
       currentExtent = nodeExtent;
     }
diff --git a/packages/core/src/hooks/useResizeHandler.ts b/packages/core/src/hooks/useResizeHandler.ts
index 5fc9aebc..a6d6d921 100644
--- a/packages/core/src/hooks/useResizeHandler.ts
+++ b/packages/core/src/hooks/useResizeHandler.ts
@@ -3,6 +3,7 @@ import type { MutableRefObject } from 'react';
 
 import { useStoreApi } from '../hooks/useStore';
 import { getDimensions } from '../utils';
+import { errorMessages } from '../contants';
 
 function useResizeHandler(rendererNode: MutableRefObject<HTMLDivElement | null>): void {
   const store = useStoreApi();
@@ -18,9 +19,7 @@ function useResizeHandler(rendererNode: MutableRefObject<HTMLDivElement | null>)
       const size = getDimensions(rendererNode.current);
 
       if (size.height === 0 || size.width === 0) {
-        store
-          .getState()
-          .onError?.('004', 'The React Flow parent container needs a width and a height to render the graph.');
+        store.getState().onError?.('004', errorMessages['004']());
       }
 
       store.setState({ width: size.width || 500, height: size.height || 500 });
diff --git a/packages/core/src/hooks/useStore.ts b/packages/core/src/hooks/useStore.ts
index bc0e605e..3983579d 100644
--- a/packages/core/src/hooks/useStore.ts
+++ b/packages/core/src/hooks/useStore.ts
@@ -3,10 +3,10 @@ import { useStore as useZustandStore } from 'zustand';
 import type { StoreApi } from 'zustand';
 
 import StoreContext from '../contexts/RFStoreContext';
+import { errorMessages } from '../contants';
 import type { ReactFlowState } from '../types';
 
-const errorMessage =
-  '[React Flow]: Seems like you have not used zustand provider as an ancestor. Help: https://reactflow.dev/error#100';
+const zustandErrorMessage = errorMessages['001']();
 
 type ExtractState = StoreApi<ReactFlowState> extends { getState: () => infer T } ? T : never;
 
@@ -17,7 +17,7 @@ function useStore<StateSlice = ExtractState>(
   const store = useContext(StoreContext);
 
   if (store === null) {
-    throw new Error(errorMessage);
+    throw new Error(zustandErrorMessage);
   }
 
   return useZustandStore(store, selector, equalityFn);
@@ -27,7 +27,7 @@ const useStoreApi = () => {
   const store = useContext(StoreContext);
 
   if (store === null) {
-    throw new Error(errorMessage);
+    throw new Error(zustandErrorMessage);
   }
 
   return useMemo(
diff --git a/packages/core/src/utils/graph.ts b/packages/core/src/utils/graph.ts
index 4b1182f4..c7772a1c 100644
--- a/packages/core/src/utils/graph.ts
+++ b/packages/core/src/utils/graph.ts
@@ -13,6 +13,7 @@ import {
   NodeInternals,
   NodeOrigin,
 } from '../types';
+import { errorMessages } from '../contants';
 
 export const isEdge = (element: Node | Connection | Edge): element is Edge =>
   'id' in element && 'source' in element && 'target' in element;
@@ -70,7 +71,7 @@ const connectionExists = (edge: Edge, edges: Edge[]) => {
 
 export const addEdge = (edgeParams: Edge | Connection, edges: Edge[]): Edge[] => {
   if (!edgeParams.source || !edgeParams.target) {
-    devWarn('006', "Can't create edge. An edge needs a source and a target.");
+    devWarn('006', errorMessages['006']());
 
     return edges;
   }
@@ -94,7 +95,7 @@ export const addEdge = (edgeParams: Edge | Connection, edges: Edge[]): Edge[] =>
 
 export const updateEdge = (oldEdge: Edge, newConnection: Connection, edges: Edge[]): Edge[] => {
   if (!newConnection.source || !newConnection.target) {
-    devWarn('006', "Can't create a new edge. An edge needs a source and a target.");
+    devWarn('006', errorMessages['006']());
 
     return edges;
   }
@@ -102,7 +103,7 @@ export const updateEdge = (oldEdge: Edge, newConnection: Connection, edges: Edge
   const foundEdge = edges.find((e) => e.id === oldEdge.id) as Edge;
 
   if (!foundEdge) {
-    devWarn('007', `The old edge with id=${oldEdge.id} does not exist.`);
+    devWarn('007', errorMessages['007'](oldEdge.id));
 
     return edges;
   }

From 1af9ca6c254d46adb6123ed97c3c03c6882c7ceb Mon Sep 17 00:00:00 2001
From: moklick <info@moritzklack.com>
Date: Wed, 25 Jan 2023 21:07:36 +0100
Subject: [PATCH 25/30] chore(test): adjust

---
 examples/vite-app/cypress/e2e/basic.cy.ts | 28 ++++++++++++-----------
 1 file changed, 15 insertions(+), 13 deletions(-)

diff --git a/examples/vite-app/cypress/e2e/basic.cy.ts b/examples/vite-app/cypress/e2e/basic.cy.ts
index fd4c107a..c6f027c9 100644
--- a/examples/vite-app/cypress/e2e/basic.cy.ts
+++ b/examples/vite-app/cypress/e2e/basic.cy.ts
@@ -51,16 +51,16 @@ describe('Basic Flow Rendering', () => {
       .type('{shift}', { release: false })
       .wait(50)
       .get('.react-flow__pane')
-      .trigger('mousedown', 1000, 50, { button: 0, force: true })
-      .trigger('mousemove', 1, 400, { button: 0 })
+      .trigger('mousedown', 1, 10, { button: 0, force: true })
+      .trigger('mousemove', 1000, 450, { button: 0 })
       .wait(50)
-      .trigger('mouseup', 1, 200, { force: true });
+      .trigger('mouseup', 1000, 450, { button: 0, force: true });
 
-    cy.wait(100);
+    cy.wait(200);
 
     cy.get('.react-flow__node').eq(1).should('have.class', 'selected');
 
-    cy.get('.react-flow__node').eq(0).should('have.not.class', 'selected');
+    cy.get('.react-flow__node').eq(3).should('have.not.class', 'selected');
 
     cy.get('.react-flow__nodesselection-rect');
 
@@ -74,11 +74,13 @@ describe('Basic Flow Rendering', () => {
       .trigger('mousedown', 'topRight', { button: 0, force: true })
       .trigger('mousemove', 'bottomLeft', { button: 0 })
       .wait(50)
-      .trigger('mouseup', 'bottomLeft', { force: true })
-      .wait(50)
+      .trigger('mouseup', 'bottomLeft', { button: 0, force: true })
+      .wait(400)
       .get('.react-flow__node')
-      .should('have.class', 'selected')
-      .get('.react-flow__nodesselection-rect');
+      .should('have.class', 'selected');
+
+    cy.wait(200);
+    cy.get('.react-flow__nodesselection-rect');
 
     cy.get('body').type('{shift}', { release: true });
   });
@@ -113,14 +115,14 @@ describe('Basic Flow Rendering', () => {
     cy.get('.react-flow__node')
       .contains('Node 3')
       .find('.react-flow__handle.source')
-      .trigger('mousedown', { button: 0 });
+      .trigger('mousedown', { force: true, button: 0 });
 
     cy.get('.react-flow__node')
       .contains('Node 4')
       .find('.react-flow__handle.target')
-      .trigger('mousemove', { force: true })
-      .wait(50)
-      .trigger('mouseup', { force: true });
+      .trigger('mousemove', { force: true, button: 0 })
+      .wait(200)
+      .trigger('mouseup', { force: true, button: 0 });
 
     cy.get('.react-flow__edge').should('have.length', 3);
   });

From 6dbc529b7f3831880f1585ada5ccc017a30c5dd7 Mon Sep 17 00:00:00 2001
From: moklick <info@moritzklack.com>
Date: Wed, 25 Jan 2023 21:23:13 +0100
Subject: [PATCH 26/30] chore(pnpm): update pnpm lock

---
 pnpm-lock.yaml | 112 ++++++++++++++++++++++++-------------------------
 1 file changed, 56 insertions(+), 56 deletions(-)

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 26c29667..67e8812a 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -32,15 +32,15 @@ importers:
       '@changesets/changelog-github': registry.npmjs.org/@changesets/changelog-github/0.4.7
       '@changesets/cli': registry.npmjs.org/@changesets/cli/2.25.0
       '@preconstruct/cli': registry.npmjs.org/@preconstruct/cli/2.2.1
-      '@typescript-eslint/eslint-plugin': registry.npmjs.org/@typescript-eslint/eslint-plugin/5.48.1_fsnwvyoekxjd6kngphv4egujga
-      '@typescript-eslint/parser': registry.npmjs.org/@typescript-eslint/parser/5.48.1_id2eilsndvzhjjktb64trvy3gu
+      '@typescript-eslint/eslint-plugin': registry.npmjs.org/@typescript-eslint/eslint-plugin/5.49.0_equgvmdpavr6nminvx2krii6h4
+      '@typescript-eslint/parser': registry.npmjs.org/@typescript-eslint/parser/5.49.0_id2eilsndvzhjjktb64trvy3gu
       autoprefixer: registry.npmjs.org/autoprefixer/10.4.9_postcss@8.4.21
       concurrently: registry.npmjs.org/concurrently/7.6.0
       cypress: registry.npmjs.org/cypress/10.7.0
       eslint: registry.npmjs.org/eslint/8.23.1
       eslint-config-prettier: registry.npmjs.org/eslint-config-prettier/8.5.0_eslint@8.23.1
       eslint-plugin-prettier: registry.npmjs.org/eslint-plugin-prettier/4.2.1_cabrci5exjdaojcvd6xoxgeowu
-      eslint-plugin-react: registry.npmjs.org/eslint-plugin-react/7.32.0_eslint@8.23.1
+      eslint-plugin-react: registry.npmjs.org/eslint-plugin-react/7.32.1_eslint@8.23.1
       postcss: registry.npmjs.org/postcss/8.4.21
       postcss-cli: registry.npmjs.org/postcss-cli/10.1.0_postcss@8.4.21
       postcss-combine-duplicated-selectors: registry.npmjs.org/postcss-combine-duplicated-selectors/10.0.3_postcss@8.4.21
@@ -213,7 +213,7 @@ importers:
 
   packages/node-resizer:
     specifiers:
-      '@reactflow/core': workspace:*
+      '@reactflow/core': workspace:^11.3.3
       '@reactflow/eslint-config': workspace:*
       '@reactflow/rollup-config': workspace:*
       '@reactflow/tsconfig': workspace:*
@@ -248,7 +248,7 @@ importers:
 
   packages/node-toolbar:
     specifiers:
-      '@reactflow/core': workspace:*
+      '@reactflow/core': workspace:^11.3.3
       '@reactflow/eslint-config': workspace:*
       '@reactflow/rollup-config': workspace:*
       '@reactflow/tsconfig': workspace:*
@@ -312,7 +312,7 @@ importers:
       eslint: registry.npmjs.org/eslint/8.23.1
       eslint-config-prettier: registry.npmjs.org/eslint-config-prettier/8.5.0_eslint@8.23.1
       eslint-config-turbo: registry.npmjs.org/eslint-config-turbo/0.0.7_eslint@8.23.1
-      eslint-plugin-react: registry.npmjs.org/eslint-plugin-react/7.32.0_eslint@8.23.1
+      eslint-plugin-react: registry.npmjs.org/eslint-plugin-react/7.32.1_eslint@8.23.1
 
   tooling/rollup-config:
     specifiers:
@@ -2186,11 +2186,11 @@ packages:
     dev: true
     optional: true
 
-  registry.npmjs.org/@typescript-eslint/eslint-plugin/5.48.1_fsnwvyoekxjd6kngphv4egujga:
-    resolution: {integrity: sha512-9nY5K1Rp2ppmpb9s9S2aBiF3xo5uExCehMDmYmmFqqyxgenbHJ3qbarcLt4ITgaD6r/2ypdlcFRdcuVPnks+fQ==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-5.48.1.tgz}
-    id: registry.npmjs.org/@typescript-eslint/eslint-plugin/5.48.1
+  registry.npmjs.org/@typescript-eslint/eslint-plugin/5.49.0_equgvmdpavr6nminvx2krii6h4:
+    resolution: {integrity: sha512-IhxabIpcf++TBaBa1h7jtOWyon80SXPRLDq0dVz5SLFC/eW6tofkw/O7Ar3lkx5z5U6wzbKDrl2larprp5kk5Q==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-5.49.0.tgz}
+    id: registry.npmjs.org/@typescript-eslint/eslint-plugin/5.49.0
     name: '@typescript-eslint/eslint-plugin'
-    version: 5.48.1
+    version: 5.49.0
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
     peerDependencies:
       '@typescript-eslint/parser': ^5.0.0
@@ -2200,10 +2200,10 @@ packages:
       typescript:
         optional: true
     dependencies:
-      '@typescript-eslint/parser': registry.npmjs.org/@typescript-eslint/parser/5.48.1_id2eilsndvzhjjktb64trvy3gu
-      '@typescript-eslint/scope-manager': registry.npmjs.org/@typescript-eslint/scope-manager/5.48.1
-      '@typescript-eslint/type-utils': registry.npmjs.org/@typescript-eslint/type-utils/5.48.1_id2eilsndvzhjjktb64trvy3gu
-      '@typescript-eslint/utils': registry.npmjs.org/@typescript-eslint/utils/5.48.1_id2eilsndvzhjjktb64trvy3gu
+      '@typescript-eslint/parser': registry.npmjs.org/@typescript-eslint/parser/5.49.0_id2eilsndvzhjjktb64trvy3gu
+      '@typescript-eslint/scope-manager': registry.npmjs.org/@typescript-eslint/scope-manager/5.49.0
+      '@typescript-eslint/type-utils': registry.npmjs.org/@typescript-eslint/type-utils/5.49.0_id2eilsndvzhjjktb64trvy3gu
+      '@typescript-eslint/utils': registry.npmjs.org/@typescript-eslint/utils/5.49.0_id2eilsndvzhjjktb64trvy3gu
       debug: registry.npmjs.org/debug/4.3.4
       eslint: registry.npmjs.org/eslint/8.23.1
       ignore: registry.npmjs.org/ignore/5.2.4
@@ -2216,11 +2216,11 @@ packages:
       - supports-color
     dev: true
 
-  registry.npmjs.org/@typescript-eslint/parser/5.48.1_id2eilsndvzhjjktb64trvy3gu:
-    resolution: {integrity: sha512-4yg+FJR/V1M9Xoq56SF9Iygqm+r5LMXvheo6DQ7/yUWynQ4YfCRnsKuRgqH4EQ5Ya76rVwlEpw4Xu+TgWQUcdA==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/@typescript-eslint/parser/-/parser-5.48.1.tgz}
-    id: registry.npmjs.org/@typescript-eslint/parser/5.48.1
+  registry.npmjs.org/@typescript-eslint/parser/5.49.0_id2eilsndvzhjjktb64trvy3gu:
+    resolution: {integrity: sha512-veDlZN9mUhGqU31Qiv2qEp+XrJj5fgZpJ8PW30sHU+j/8/e5ruAhLaVDAeznS7A7i4ucb/s8IozpDtt9NqCkZg==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/@typescript-eslint/parser/-/parser-5.49.0.tgz}
+    id: registry.npmjs.org/@typescript-eslint/parser/5.49.0
     name: '@typescript-eslint/parser'
-    version: 5.48.1
+    version: 5.49.0
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
     peerDependencies:
       eslint: ^6.0.0 || ^7.0.0 || ^8.0.0
@@ -2229,9 +2229,9 @@ packages:
       typescript:
         optional: true
     dependencies:
-      '@typescript-eslint/scope-manager': registry.npmjs.org/@typescript-eslint/scope-manager/5.48.1
-      '@typescript-eslint/types': registry.npmjs.org/@typescript-eslint/types/5.48.1
-      '@typescript-eslint/typescript-estree': registry.npmjs.org/@typescript-eslint/typescript-estree/5.48.1_typescript@4.9.4
+      '@typescript-eslint/scope-manager': registry.npmjs.org/@typescript-eslint/scope-manager/5.49.0
+      '@typescript-eslint/types': registry.npmjs.org/@typescript-eslint/types/5.49.0
+      '@typescript-eslint/typescript-estree': registry.npmjs.org/@typescript-eslint/typescript-estree/5.49.0_typescript@4.9.4
       debug: registry.npmjs.org/debug/4.3.4
       eslint: registry.npmjs.org/eslint/8.23.1
       typescript: registry.npmjs.org/typescript/4.9.4
@@ -2239,21 +2239,21 @@ packages:
       - supports-color
     dev: true
 
-  registry.npmjs.org/@typescript-eslint/scope-manager/5.48.1:
-    resolution: {integrity: sha512-S035ueRrbxRMKvSTv9vJKIWgr86BD8s3RqoRZmsSh/s8HhIs90g6UlK8ZabUSjUZQkhVxt7nmZ63VJ9dcZhtDQ==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-5.48.1.tgz}
+  registry.npmjs.org/@typescript-eslint/scope-manager/5.49.0:
+    resolution: {integrity: sha512-clpROBOiMIzpbWNxCe1xDK14uPZh35u4QaZO1GddilEzoCLAEz4szb51rBpdgurs5k2YzPtJeTEN3qVbG+LRUQ==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-5.49.0.tgz}
     name: '@typescript-eslint/scope-manager'
-    version: 5.48.1
+    version: 5.49.0
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
     dependencies:
-      '@typescript-eslint/types': registry.npmjs.org/@typescript-eslint/types/5.48.1
-      '@typescript-eslint/visitor-keys': registry.npmjs.org/@typescript-eslint/visitor-keys/5.48.1
+      '@typescript-eslint/types': registry.npmjs.org/@typescript-eslint/types/5.49.0
+      '@typescript-eslint/visitor-keys': registry.npmjs.org/@typescript-eslint/visitor-keys/5.49.0
     dev: true
 
-  registry.npmjs.org/@typescript-eslint/type-utils/5.48.1_id2eilsndvzhjjktb64trvy3gu:
-    resolution: {integrity: sha512-Hyr8HU8Alcuva1ppmqSYtM/Gp0q4JOp1F+/JH5D1IZm/bUBrV0edoewQZiEc1r6I8L4JL21broddxK8HAcZiqQ==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/@typescript-eslint/type-utils/-/type-utils-5.48.1.tgz}
-    id: registry.npmjs.org/@typescript-eslint/type-utils/5.48.1
+  registry.npmjs.org/@typescript-eslint/type-utils/5.49.0_id2eilsndvzhjjktb64trvy3gu:
+    resolution: {integrity: sha512-eUgLTYq0tR0FGU5g1YHm4rt5H/+V2IPVkP0cBmbhRyEmyGe4XvJ2YJ6sYTmONfjmdMqyMLad7SB8GvblbeESZA==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/@typescript-eslint/type-utils/-/type-utils-5.49.0.tgz}
+    id: registry.npmjs.org/@typescript-eslint/type-utils/5.49.0
     name: '@typescript-eslint/type-utils'
-    version: 5.48.1
+    version: 5.49.0
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
     peerDependencies:
       eslint: '*'
@@ -2262,8 +2262,8 @@ packages:
       typescript:
         optional: true
     dependencies:
-      '@typescript-eslint/typescript-estree': registry.npmjs.org/@typescript-eslint/typescript-estree/5.48.1_typescript@4.9.4
-      '@typescript-eslint/utils': registry.npmjs.org/@typescript-eslint/utils/5.48.1_id2eilsndvzhjjktb64trvy3gu
+      '@typescript-eslint/typescript-estree': registry.npmjs.org/@typescript-eslint/typescript-estree/5.49.0_typescript@4.9.4
+      '@typescript-eslint/utils': registry.npmjs.org/@typescript-eslint/utils/5.49.0_id2eilsndvzhjjktb64trvy3gu
       debug: registry.npmjs.org/debug/4.3.4
       eslint: registry.npmjs.org/eslint/8.23.1
       tsutils: registry.npmjs.org/tsutils/3.21.0_typescript@4.9.4
@@ -2272,18 +2272,18 @@ packages:
       - supports-color
     dev: true
 
-  registry.npmjs.org/@typescript-eslint/types/5.48.1:
-    resolution: {integrity: sha512-xHyDLU6MSuEEdIlzrrAerCGS3T7AA/L8Hggd0RCYBi0w3JMvGYxlLlXHeg50JI9Tfg5MrtsfuNxbS/3zF1/ATg==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/@typescript-eslint/types/-/types-5.48.1.tgz}
+  registry.npmjs.org/@typescript-eslint/types/5.49.0:
+    resolution: {integrity: sha512-7If46kusG+sSnEpu0yOz2xFv5nRz158nzEXnJFCGVEHWnuzolXKwrH5Bsf9zsNlOQkyZuk0BZKKoJQI+1JPBBg==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/@typescript-eslint/types/-/types-5.49.0.tgz}
     name: '@typescript-eslint/types'
-    version: 5.48.1
+    version: 5.49.0
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
     dev: true
 
-  registry.npmjs.org/@typescript-eslint/typescript-estree/5.48.1_typescript@4.9.4:
-    resolution: {integrity: sha512-Hut+Osk5FYr+sgFh8J/FHjqX6HFcDzTlWLrFqGoK5kVUN3VBHF/QzZmAsIXCQ8T/W9nQNBTqalxi1P3LSqWnRA==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-5.48.1.tgz}
-    id: registry.npmjs.org/@typescript-eslint/typescript-estree/5.48.1
+  registry.npmjs.org/@typescript-eslint/typescript-estree/5.49.0_typescript@4.9.4:
+    resolution: {integrity: sha512-PBdx+V7deZT/3GjNYPVQv1Nc0U46dAHbIuOG8AZ3on3vuEKiPDwFE/lG1snN2eUB9IhF7EyF7K1hmTcLztNIsA==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-5.49.0.tgz}
+    id: registry.npmjs.org/@typescript-eslint/typescript-estree/5.49.0
     name: '@typescript-eslint/typescript-estree'
-    version: 5.48.1
+    version: 5.49.0
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
     peerDependencies:
       typescript: '*'
@@ -2291,8 +2291,8 @@ packages:
       typescript:
         optional: true
     dependencies:
-      '@typescript-eslint/types': registry.npmjs.org/@typescript-eslint/types/5.48.1
-      '@typescript-eslint/visitor-keys': registry.npmjs.org/@typescript-eslint/visitor-keys/5.48.1
+      '@typescript-eslint/types': registry.npmjs.org/@typescript-eslint/types/5.49.0
+      '@typescript-eslint/visitor-keys': registry.npmjs.org/@typescript-eslint/visitor-keys/5.49.0
       debug: registry.npmjs.org/debug/4.3.4
       globby: registry.npmjs.org/globby/11.1.0
       is-glob: registry.npmjs.org/is-glob/4.0.3
@@ -2303,20 +2303,20 @@ packages:
       - supports-color
     dev: true
 
-  registry.npmjs.org/@typescript-eslint/utils/5.48.1_id2eilsndvzhjjktb64trvy3gu:
-    resolution: {integrity: sha512-SmQuSrCGUOdmGMwivW14Z0Lj8dxG1mOFZ7soeJ0TQZEJcs3n5Ndgkg0A4bcMFzBELqLJ6GTHnEU+iIoaD6hFGA==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/@typescript-eslint/utils/-/utils-5.48.1.tgz}
-    id: registry.npmjs.org/@typescript-eslint/utils/5.48.1
+  registry.npmjs.org/@typescript-eslint/utils/5.49.0_id2eilsndvzhjjktb64trvy3gu:
+    resolution: {integrity: sha512-cPJue/4Si25FViIb74sHCLtM4nTSBXtLx1d3/QT6mirQ/c65bV8arBEebBJJizfq8W2YyMoPI/WWPFWitmNqnQ==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/@typescript-eslint/utils/-/utils-5.49.0.tgz}
+    id: registry.npmjs.org/@typescript-eslint/utils/5.49.0
     name: '@typescript-eslint/utils'
-    version: 5.48.1
+    version: 5.49.0
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
     peerDependencies:
       eslint: ^6.0.0 || ^7.0.0 || ^8.0.0
     dependencies:
       '@types/json-schema': registry.npmjs.org/@types/json-schema/7.0.11
       '@types/semver': registry.npmjs.org/@types/semver/7.3.13
-      '@typescript-eslint/scope-manager': registry.npmjs.org/@typescript-eslint/scope-manager/5.48.1
-      '@typescript-eslint/types': registry.npmjs.org/@typescript-eslint/types/5.48.1
-      '@typescript-eslint/typescript-estree': registry.npmjs.org/@typescript-eslint/typescript-estree/5.48.1_typescript@4.9.4
+      '@typescript-eslint/scope-manager': registry.npmjs.org/@typescript-eslint/scope-manager/5.49.0
+      '@typescript-eslint/types': registry.npmjs.org/@typescript-eslint/types/5.49.0
+      '@typescript-eslint/typescript-estree': registry.npmjs.org/@typescript-eslint/typescript-estree/5.49.0_typescript@4.9.4
       eslint: registry.npmjs.org/eslint/8.23.1
       eslint-scope: registry.npmjs.org/eslint-scope/5.1.1
       eslint-utils: registry.npmjs.org/eslint-utils/3.0.0_eslint@8.23.1
@@ -2326,13 +2326,13 @@ packages:
       - typescript
     dev: true
 
-  registry.npmjs.org/@typescript-eslint/visitor-keys/5.48.1:
-    resolution: {integrity: sha512-Ns0XBwmfuX7ZknznfXozgnydyR8F6ev/KEGePP4i74uL3ArsKbEhJ7raeKr1JSa997DBDwol/4a0Y+At82c9dA==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-5.48.1.tgz}
+  registry.npmjs.org/@typescript-eslint/visitor-keys/5.49.0:
+    resolution: {integrity: sha512-v9jBMjpNWyn8B6k/Mjt6VbUS4J1GvUlR4x3Y+ibnP1z7y7V4n0WRz+50DY6+Myj0UaXVSuUlHohO+eZ8IJEnkg==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-5.49.0.tgz}
     name: '@typescript-eslint/visitor-keys'
-    version: 5.48.1
+    version: 5.49.0
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
     dependencies:
-      '@typescript-eslint/types': registry.npmjs.org/@typescript-eslint/types/5.48.1
+      '@typescript-eslint/types': registry.npmjs.org/@typescript-eslint/types/5.49.0
       eslint-visitor-keys: registry.npmjs.org/eslint-visitor-keys/3.3.0
     dev: true
 
@@ -3723,11 +3723,11 @@ packages:
       prettier-linter-helpers: registry.npmjs.org/prettier-linter-helpers/1.0.0
     dev: true
 
-  registry.npmjs.org/eslint-plugin-react/7.32.0_eslint@8.23.1:
-    resolution: {integrity: sha512-vSBi1+SrPiLZCGvxpiZIa28fMEUaMjXtCplrvxcIxGzmFiYdsXQDwInEjuv5/i/2CTTxbkS87tE8lsQ0Qxinbw==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/eslint-plugin-react/-/eslint-plugin-react-7.32.0.tgz}
-    id: registry.npmjs.org/eslint-plugin-react/7.32.0
+  registry.npmjs.org/eslint-plugin-react/7.32.1_eslint@8.23.1:
+    resolution: {integrity: sha512-vOjdgyd0ZHBXNsmvU+785xY8Bfe57EFbTYYk8XrROzWpr9QBvpjITvAXt9xqcE6+8cjR/g1+mfumPToxsl1www==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/eslint-plugin-react/-/eslint-plugin-react-7.32.1.tgz}
+    id: registry.npmjs.org/eslint-plugin-react/7.32.1
     name: eslint-plugin-react
-    version: 7.32.0
+    version: 7.32.1
     engines: {node: '>=4'}
     peerDependencies:
       eslint: ^3 || ^4 || ^5 || ^6 || ^7 || ^8

From 3078777b289c351977d42b2ecf4b6becc9e2ebe5 Mon Sep 17 00:00:00 2001
From: moklick <info@moritzklack.com>
Date: Thu, 26 Jan 2023 10:24:58 +0100
Subject: [PATCH 27/30] fix(connectionRadius): pass prop to store

---
 .../vite-app/src/examples/FloatingEdges/FloatingEdge.tsx    | 6 +++---
 packages/core/src/components/StoreUpdater/index.tsx         | 3 +++
 packages/core/src/container/ReactFlow/index.tsx             | 1 +
 3 files changed, 7 insertions(+), 3 deletions(-)

diff --git a/examples/vite-app/src/examples/FloatingEdges/FloatingEdge.tsx b/examples/vite-app/src/examples/FloatingEdges/FloatingEdge.tsx
index 9f080bd3..5e50f35f 100644
--- a/examples/vite-app/src/examples/FloatingEdges/FloatingEdge.tsx
+++ b/examples/vite-app/src/examples/FloatingEdges/FloatingEdge.tsx
@@ -1,4 +1,4 @@
-import React, { FC, useMemo, CSSProperties } from 'react';
+import { FC, useMemo, CSSProperties } from 'react';
 import { EdgeProps, useStore, getBezierPath, ReactFlowState } from 'reactflow';
 
 import { getEdgeParams } from './utils';
@@ -17,7 +17,7 @@ const FloatingEdge: FC<EdgeProps> = ({ id, source, target, style }) => {
 
   const { sx, sy, tx, ty, sourcePos, targetPos } = getEdgeParams(sourceNode, targetNode);
 
-  const d = getBezierPath({
+  const [path] = getBezierPath({
     sourceX: sx,
     sourceY: sy,
     sourcePosition: sourcePos,
@@ -28,7 +28,7 @@ const FloatingEdge: FC<EdgeProps> = ({ id, source, target, style }) => {
 
   return (
     <g className="react-flow__connection">
-      <path id={id} className="react-flow__edge-path" d={d} style={style as CSSProperties} />
+      <path id={id} className="react-flow__edge-path" d={path} style={style as CSSProperties} />
     </g>
   );
 };
diff --git a/packages/core/src/components/StoreUpdater/index.tsx b/packages/core/src/components/StoreUpdater/index.tsx
index c5645944..febd3b0c 100644
--- a/packages/core/src/components/StoreUpdater/index.tsx
+++ b/packages/core/src/components/StoreUpdater/index.tsx
@@ -48,6 +48,7 @@ type StoreUpdaterProps = Pick<
   | 'autoPanOnConnect'
   | 'autoPanOnNodeDrag'
   | 'onError'
+  | 'connectionRadius'
 > & { rfId: string };
 
 const selector = (s: ReactFlowState) => ({
@@ -125,6 +126,7 @@ const StoreUpdater = ({
   autoPanOnConnect,
   autoPanOnNodeDrag,
   onError,
+  connectionRadius,
 }: StoreUpdaterProps) => {
   const {
     setNodes,
@@ -181,6 +183,7 @@ const StoreUpdater = ({
   useDirectStoreUpdater('autoPanOnConnect', autoPanOnConnect, store.setState);
   useDirectStoreUpdater('autoPanOnNodeDrag', autoPanOnNodeDrag, store.setState);
   useDirectStoreUpdater('onError', onError, store.setState);
+  useDirectStoreUpdater('connectionRadius', connectionRadius, 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 120a5efa..9e7b7a49 100644
--- a/packages/core/src/container/ReactFlow/index.tsx
+++ b/packages/core/src/container/ReactFlow/index.tsx
@@ -294,6 +294,7 @@ const ReactFlow = forwardRef<ReactFlowRefType, ReactFlowProps>(
             autoPanOnConnect={autoPanOnConnect}
             autoPanOnNodeDrag={autoPanOnNodeDrag}
             onError={onError}
+            connectionRadius={connectionRadius}
           />
           <SelectionListener onSelectionChange={onSelectionChange} />
           {children}

From b80efb7dd399bdac3af0918380a50bb1055f2d8c Mon Sep 17 00:00:00 2001
From: moklick <info@moritzklack.com>
Date: Thu, 26 Jan 2023 10:42:50 +0100
Subject: [PATCH 28/30] chore(app): cleanup

---
 .../src/components/EdgeLabelRenderer/index.tsx   |  1 +
 packages/core/src/components/Edges/BaseEdge.tsx  |  2 +-
 packages/core/src/components/Edges/wrapEdge.tsx  |  2 +-
 packages/core/src/components/Handle/utils.ts     |  2 +-
 .../core/src/components/NodesSelection/index.tsx | 16 +++++++---------
 .../core/src/components/UserSelection/index.tsx  |  4 ++--
 .../src/container/EdgeRenderer/MarkerSymbols.tsx |  2 ++
 packages/core/src/container/GraphView/index.tsx  |  2 +-
 8 files changed, 16 insertions(+), 15 deletions(-)

diff --git a/packages/core/src/components/EdgeLabelRenderer/index.tsx b/packages/core/src/components/EdgeLabelRenderer/index.tsx
index 07477493..46311f26 100644
--- a/packages/core/src/components/EdgeLabelRenderer/index.tsx
+++ b/packages/core/src/components/EdgeLabelRenderer/index.tsx
@@ -1,5 +1,6 @@
 import type { ReactNode } from 'react';
 import { createPortal } from 'react-dom';
+
 import { useStore } from '../../hooks/useStore';
 import { ReactFlowState } from '../../types';
 
diff --git a/packages/core/src/components/Edges/BaseEdge.tsx b/packages/core/src/components/Edges/BaseEdge.tsx
index ad7adcd8..dc60493c 100644
--- a/packages/core/src/components/Edges/BaseEdge.tsx
+++ b/packages/core/src/components/Edges/BaseEdge.tsx
@@ -1,6 +1,6 @@
 import EdgeText from './EdgeText';
-import type { BaseEdgeProps } from '../../types';
 import { isNumeric } from '../../utils';
+import type { BaseEdgeProps } from '../../types';
 
 const BaseEdge = ({
   path,
diff --git a/packages/core/src/components/Edges/wrapEdge.tsx b/packages/core/src/components/Edges/wrapEdge.tsx
index 9d10f944..d53044f7 100644
--- a/packages/core/src/components/Edges/wrapEdge.tsx
+++ b/packages/core/src/components/Edges/wrapEdge.tsx
@@ -9,7 +9,7 @@ import { EdgeAnchor } from './EdgeAnchor';
 import { getMarkerId } from '../../utils/graph';
 import { getMouseHandler } from './utils';
 import { elementSelectionKeys } from '../../utils';
-import type { EdgeProps, WrapEdgeProps, Connection, HandleType } from '../../types';
+import type { EdgeProps, WrapEdgeProps, Connection } from '../../types';
 
 export default (EdgeComponent: ComponentType<EdgeProps>) => {
   const EdgeWrapper = ({
diff --git a/packages/core/src/components/Handle/utils.ts b/packages/core/src/components/Handle/utils.ts
index a049a2cc..439ccc7a 100644
--- a/packages/core/src/components/Handle/utils.ts
+++ b/packages/core/src/components/Handle/utils.ts
@@ -1,6 +1,6 @@
 import { ConnectionMode } from '../../types';
-import type { Connection, HandleType, XYPosition, Node, NodeHandleBounds } from '../../types';
 import { internalsSymbol } from '../../utils';
+import type { Connection, HandleType, XYPosition, Node, NodeHandleBounds } from '../../types';
 
 export type ConnectionHandle = {
   id: string | null;
diff --git a/packages/core/src/components/NodesSelection/index.tsx b/packages/core/src/components/NodesSelection/index.tsx
index 08968afe..be4ecf59 100644
--- a/packages/core/src/components/NodesSelection/index.tsx
+++ b/packages/core/src/components/NodesSelection/index.tsx
@@ -21,20 +21,18 @@ export interface NodesSelectionProps {
   disableKeyboardA11y: boolean;
 }
 
-const selector = (s: ReactFlowState) => ({
-  transformString: `translate(${s.transform[0]}px,${s.transform[1]}px) scale(${s.transform[2]})`,
-  userSelectionActive: s.userSelectionActive,
-});
-
-const bboxSelector = (s: ReactFlowState) => {
+const selector = (s: ReactFlowState) => {
   const selectedNodes = s.getNodes().filter((n) => n.selected);
-  return getRectOfNodes(selectedNodes, s.nodeOrigin);
+  return {
+    ...getRectOfNodes(selectedNodes, s.nodeOrigin),
+    transformString: `translate(${s.transform[0]}px,${s.transform[1]}px) scale(${s.transform[2]})`,
+    userSelectionActive: s.userSelectionActive,
+  };
 };
 
 function NodesSelection({ onSelectionContextMenu, noPanClassName, disableKeyboardA11y }: NodesSelectionProps) {
   const store = useStoreApi();
-  const { transformString, userSelectionActive } = useStore(selector, shallow);
-  const { width, height, x: left, y: top } = useStore(bboxSelector, shallow);
+  const { width, height, x: left, y: top, transformString, userSelectionActive } = useStore(selector, shallow);
   const updatePositions = useUpdateNodePositions();
 
   const nodeRef = useRef<HTMLDivElement>(null);
diff --git a/packages/core/src/components/UserSelection/index.tsx b/packages/core/src/components/UserSelection/index.tsx
index cb570fac..00bbcd63 100644
--- a/packages/core/src/components/UserSelection/index.tsx
+++ b/packages/core/src/components/UserSelection/index.tsx
@@ -10,9 +10,9 @@ const selector = (s: ReactFlowState) => ({
 
 function UserSelection() {
   const { userSelectionActive, userSelectionRect } = useStore(selector, shallow);
-  const showSelectionBox = userSelectionActive && userSelectionRect;
+  const isActive = userSelectionActive && userSelectionRect;
 
-  if (!showSelectionBox) {
+  if (!isActive) {
     return null;
   }
 
diff --git a/packages/core/src/container/EdgeRenderer/MarkerSymbols.tsx b/packages/core/src/container/EdgeRenderer/MarkerSymbols.tsx
index 7429f635..aa561242 100644
--- a/packages/core/src/container/EdgeRenderer/MarkerSymbols.tsx
+++ b/packages/core/src/container/EdgeRenderer/MarkerSymbols.tsx
@@ -40,6 +40,7 @@ export const MarkerSymbols = {
 
 export function useMarkerSymbol(type: MarkerType) {
   const store = useStoreApi();
+
   const symbol = useMemo(() => {
     const symbolExists = Object.prototype.hasOwnProperty.call(MarkerSymbols, type);
 
@@ -51,6 +52,7 @@ export function useMarkerSymbol(type: MarkerType) {
 
     return MarkerSymbols[type];
   }, [type]);
+
   return symbol;
 }
 
diff --git a/packages/core/src/container/GraphView/index.tsx b/packages/core/src/container/GraphView/index.tsx
index 3de2550c..e489b1e9 100644
--- a/packages/core/src/container/GraphView/index.tsx
+++ b/packages/core/src/container/GraphView/index.tsx
@@ -5,8 +5,8 @@ import NodeRenderer from '../NodeRenderer';
 import EdgeRenderer from '../EdgeRenderer';
 import ViewportWrapper from '../Viewport';
 import useOnInitHandler from '../../hooks/useOnInitHandler';
-import type { EdgeTypesWrapped, NodeTypesWrapped, ReactFlowProps } from '../../types';
 import ConnectionLine from '../../components/ConnectionLine';
+import type { EdgeTypesWrapped, NodeTypesWrapped, ReactFlowProps } from '../../types';
 
 export type GraphViewProps = Omit<ReactFlowProps, 'onSelectionChange' | 'nodes' | 'edges' | 'nodeTypes' | 'edgeTypes'> &
   Required<

From 484dba7bdf5c57f462eb02b3708c13a8b397c643 Mon Sep 17 00:00:00 2001
From: moklick <info@moritzklack.com>
Date: Thu, 26 Jan 2023 11:03:45 +0100
Subject: [PATCH 29/30] chore(state): use correct file for types

---
 packages/core/src/store/index.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/core/src/store/index.ts b/packages/core/src/store/index.ts
index 635cad96..8b17111c 100644
--- a/packages/core/src/store/index.ts
+++ b/packages/core/src/store/index.ts
@@ -19,8 +19,8 @@ import type {
   NodeDragItem,
   UnselectNodesAndEdgesParams,
   NodeChange,
+  XYPosition,
 } from '../types';
-import { XYPosition } from 'react-flow-renderer';
 
 const createRFStore = () =>
   createStore<ReactFlowState>((set, get) => ({

From fe85d206c4ba5b1dfeafc073b61148cbf285a76b Mon Sep 17 00:00:00 2001
From: moklick <info@moritzklack.com>
Date: Thu, 26 Jan 2023 11:42:15 +0100
Subject: [PATCH 30/30] chore(packages): bump

---
 .changeset/dry-mice-explode.md     |  5 -----
 .changeset/hungry-eagles-turn.md   |  5 -----
 .changeset/pretty-spoons-punch.md  |  5 -----
 .changeset/twenty-turkeys-rhyme.md |  5 -----
 packages/background/CHANGELOG.md   |  7 +++++++
 packages/background/package.json   |  2 +-
 packages/controls/CHANGELOG.md     |  7 +++++++
 packages/controls/package.json     |  2 +-
 packages/core/CHANGELOG.md         | 25 +++++++++++++++++++++++++
 packages/core/package.json         |  2 +-
 packages/minimap/CHANGELOG.md      |  7 +++++++
 packages/minimap/package.json      |  2 +-
 packages/node-resizer/CHANGELOG.md | 11 +++++++++++
 packages/node-resizer/package.json |  2 +-
 packages/reactflow/CHANGELOG.md    | 30 ++++++++++++++++++++++++++++++
 packages/reactflow/package.json    |  2 +-
 16 files changed, 93 insertions(+), 26 deletions(-)
 delete mode 100644 .changeset/dry-mice-explode.md
 delete mode 100644 .changeset/hungry-eagles-turn.md
 delete mode 100644 .changeset/pretty-spoons-punch.md
 delete mode 100644 .changeset/twenty-turkeys-rhyme.md

diff --git a/.changeset/dry-mice-explode.md b/.changeset/dry-mice-explode.md
deleted file mode 100644
index d758f9dc..00000000
--- a/.changeset/dry-mice-explode.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-'@reactflow/core': minor
----
-
-Add autoPan for connecting and node dragging
diff --git a/.changeset/hungry-eagles-turn.md b/.changeset/hungry-eagles-turn.md
deleted file mode 100644
index 44941fba..00000000
--- a/.changeset/hungry-eagles-turn.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-'@reactflow/core': patch
----
-
-Connecting nodes: Enable connections on touch devices
diff --git a/.changeset/pretty-spoons-punch.md b/.changeset/pretty-spoons-punch.md
deleted file mode 100644
index 0b661034..00000000
--- a/.changeset/pretty-spoons-punch.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-'@reactflow/node-resizer': major
----
-
-Add shouldresize, cleanup types
diff --git a/.changeset/twenty-turkeys-rhyme.md b/.changeset/twenty-turkeys-rhyme.md
deleted file mode 100644
index 2a5e909d..00000000
--- a/.changeset/twenty-turkeys-rhyme.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-'@reactflow/core': patch
----
-
-Types: improve typing for node type
diff --git a/packages/background/CHANGELOG.md b/packages/background/CHANGELOG.md
index d46842ba..f2393bec 100644
--- a/packages/background/CHANGELOG.md
+++ b/packages/background/CHANGELOG.md
@@ -1,5 +1,12 @@
 # @reactflow/background
 
+## 11.1.3
+
+### Patch Changes
+
+- Updated dependencies [[`e96309b6`](https://github.com/wbkd/react-flow/commit/e96309b6a57b1071faeebf7b0547fef7fd418694), [`85003b01`](https://github.com/wbkd/react-flow/commit/85003b01add71ea852bd5b0d2f1e7496050a6b52), [`4c516882`](https://github.com/wbkd/react-flow/commit/4c516882d2bbf426c1832a53ad40763cc1abef92)]:
+  - @reactflow/core@11.5.0
+
 ## 11.1.2
 
 ### Patch Changes
diff --git a/packages/background/package.json b/packages/background/package.json
index 5a85d11e..2865139e 100644
--- a/packages/background/package.json
+++ b/packages/background/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@reactflow/background",
-  "version": "11.1.2",
+  "version": "11.1.3",
   "description": "Background component with different variants for React Flow",
   "keywords": [
     "react",
diff --git a/packages/controls/CHANGELOG.md b/packages/controls/CHANGELOG.md
index 6c4789c6..7f2d9b92 100644
--- a/packages/controls/CHANGELOG.md
+++ b/packages/controls/CHANGELOG.md
@@ -1,5 +1,12 @@
 # @reactflow/controls
 
+## 11.1.3
+
+### Patch Changes
+
+- Updated dependencies [[`e96309b6`](https://github.com/wbkd/react-flow/commit/e96309b6a57b1071faeebf7b0547fef7fd418694), [`85003b01`](https://github.com/wbkd/react-flow/commit/85003b01add71ea852bd5b0d2f1e7496050a6b52), [`4c516882`](https://github.com/wbkd/react-flow/commit/4c516882d2bbf426c1832a53ad40763cc1abef92)]:
+  - @reactflow/core@11.5.0
+
 ## 11.1.2
 
 ### Patch Changes
diff --git a/packages/controls/package.json b/packages/controls/package.json
index d6b85067..7bc80d2d 100644
--- a/packages/controls/package.json
+++ b/packages/controls/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@reactflow/controls",
-  "version": "11.1.2",
+  "version": "11.1.3",
   "description": "Component to control the viewport of a React Flow instance",
   "keywords": [
     "react",
diff --git a/packages/core/CHANGELOG.md b/packages/core/CHANGELOG.md
index 30bd24b7..cd591566 100644
--- a/packages/core/CHANGELOG.md
+++ b/packages/core/CHANGELOG.md
@@ -1,5 +1,30 @@
 # @reactflow/core
 
+## 11.5.0
+
+Lot's of improvements are coming with this release!
+
+- **Connecting radius**: No need to drop a connection line on top of handle anymore. You only need to be close to the handle. That radius can be configured with the `connectionRadius` prop.
+- **Auto pan**: When you drag a node, a selection or the connection line to the border of the pane, it will pan into that direction. That makes it easier to connect far away nodes for example. If you don't like it you can set `autoPnaOnNodeDrag` and `autoPanOnConnect` to false.
+- **Touch devices**: It's finally possibleto connect nodes with the connection line on touch devices. In combination with the new auto pan and connection radius the overall UX is way better.
+- **Errors**: We added an `onError` prop to get notified when an error like "couldn't find source handle" happens. This is useful if you want to log errors for example.
+- **Node type**: We added a second param to the generic `Node` type. You can not only pass `NodeData` but also the type as a second param: 
+```ts
+type MyCustomNode = Node<MyCustomNodeData, 'custom-node-type'>
+```
+This makes it easier to work with different custom nodes and data types.
+
+### Minor Changes
+
+- [#2754](https://github.com/wbkd/react-flow/pull/2754) [`e96309b6`](https://github.com/wbkd/react-flow/commit/e96309b6a57b1071faeebf7b0547fef7fd418694)  - Add auto pan for connecting and node dragging and `connectionRadius`
+- [#2773](https://github.com/wbkd/react-flow/pull/2773) - Add `onError` prop to get notified when an error happens
+
+### Patch Changes
+
+- [#2763](https://github.com/wbkd/react-flow/pull/2763) [`85003b01`](https://github.com/wbkd/react-flow/commit/85003b01add71ea852bd5b0d2f1e7496050a6b52)  - Connecting nodes: Enable connections on touch devices
+- [#2620](https://github.com/wbkd/react-flow/pull/2620) - Thanks [RichSchulz](https://github.com/RichSchulz)! - Types: improve typing for node type
+
+
 ## 11.4.2
 
 ### Patch Changes
diff --git a/packages/core/package.json b/packages/core/package.json
index 4c199c54..8529d098 100644
--- a/packages/core/package.json
+++ b/packages/core/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@reactflow/core",
-  "version": "11.4.2",
+  "version": "11.5.0",
   "description": "Core components and util functions of React Flow.",
   "keywords": [
     "react",
diff --git a/packages/minimap/CHANGELOG.md b/packages/minimap/CHANGELOG.md
index 0f582af1..58e60248 100644
--- a/packages/minimap/CHANGELOG.md
+++ b/packages/minimap/CHANGELOG.md
@@ -1,5 +1,12 @@
 # @reactflow/minimap
 
+## 11.3.3
+
+### Patch Changes
+
+- Updated dependencies [[`e96309b6`](https://github.com/wbkd/react-flow/commit/e96309b6a57b1071faeebf7b0547fef7fd418694), [`85003b01`](https://github.com/wbkd/react-flow/commit/85003b01add71ea852bd5b0d2f1e7496050a6b52), [`4c516882`](https://github.com/wbkd/react-flow/commit/4c516882d2bbf426c1832a53ad40763cc1abef92)]:
+  - @reactflow/core@11.5.0
+
 ## 11.3.2
 
 ### Patch Changes
diff --git a/packages/minimap/package.json b/packages/minimap/package.json
index f221b409..f9e8e4e7 100644
--- a/packages/minimap/package.json
+++ b/packages/minimap/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@reactflow/minimap",
-  "version": "11.3.2",
+  "version": "11.3.3",
   "description": "Minimap component for React Flow.",
   "keywords": [
     "react",
diff --git a/packages/node-resizer/CHANGELOG.md b/packages/node-resizer/CHANGELOG.md
index af11ab68..10005a19 100644
--- a/packages/node-resizer/CHANGELOG.md
+++ b/packages/node-resizer/CHANGELOG.md
@@ -1,5 +1,16 @@
 # @reactflow/node-resizer
 
+## 2.0.0
+
+### Major Changes
+
+- [#2749](https://github.com/wbkd/react-flow/pull/2749) [`e347dd82`](https://github.com/wbkd/react-flow/commit/e347dd82d342bf9c4884ca667afaa5cf639283e5) - Add `shouldResize`, rename and cleanup types - `ResizeEventParams` is now `ResizeParams`
+
+### Patch Changes
+
+- Updated dependencies [[`e96309b6`](https://github.com/wbkd/react-flow/commit/e96309b6a57b1071faeebf7b0547fef7fd418694), [`85003b01`](https://github.com/wbkd/react-flow/commit/85003b01add71ea852bd5b0d2f1e7496050a6b52), [`4c516882`](https://github.com/wbkd/react-flow/commit/4c516882d2bbf426c1832a53ad40763cc1abef92)]:
+  - @reactflow/core@11.5.0
+
 ## 1.2.2
 
 ### Patch Changes
diff --git a/packages/node-resizer/package.json b/packages/node-resizer/package.json
index a570caaf..03112528 100644
--- a/packages/node-resizer/package.json
+++ b/packages/node-resizer/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@reactflow/node-resizer",
-  "version": "1.2.2",
+  "version": "2.0.0",
   "description": "A helper component for resizing nodes.",
   "keywords": [
     "react",
diff --git a/packages/reactflow/CHANGELOG.md b/packages/reactflow/CHANGELOG.md
index 279e3676..49236e78 100644
--- a/packages/reactflow/CHANGELOG.md
+++ b/packages/reactflow/CHANGELOG.md
@@ -1,5 +1,35 @@
 # reactflow
 
+## 11.5.0
+
+Lot's of improvements are coming with this release! 
+
+- **Connecting radius**: No need to drop a connection line on top of handle anymore. You only need to be close to the handle. That radius can be configured with the `connectionRadius` prop.
+- **Auto pan**: When you drag a node, a selection or the connection line to the border of the pane, it will pan into that direction. That makes it easier to connect far away nodes for example. If you don't like it you can set `autoPnaOnNodeDrag` and `autoPanOnConnect` to false.
+- **Touch devices**: It's finally possibleto connect nodes with the connection line on touch devices. In combination with the new auto pan and connection radius the overall UX is way better.
+- **Errors**: We added an `onError` prop to get notified when an error like "couldn't find source handle" happens. This is useful if you want to log errors for example.
+- **Node type**: We added a second param to the generic `Node` type. You can not only pass `NodeData` but also the type as a second param: 
+```ts
+type MyCustomNode = Node<MyCustomNodeData, 'custom-node-type'>
+```
+This makes it easier to work with different custom nodes and data types.
+
+### Minor Changes
+
+- [#2754](https://github.com/wbkd/react-flow/pull/2754) [`e96309b6`](https://github.com/wbkd/react-flow/commit/e96309b6a57b1071faeebf7b0547fef7fd418694)  - Add auto pan for connecting and node dragging and `connectionRadius`
+- [#2773](https://github.com/wbkd/react-flow/pull/2773) - Add `onError` prop to get notified when an error happens
+
+### Patch Changes
+
+- [#2763](https://github.com/wbkd/react-flow/pull/2763) [`85003b01`](https://github.com/wbkd/react-flow/commit/85003b01add71ea852bd5b0d2f1e7496050a6b52)  - Connecting nodes: Enable connections on touch devices
+- [#2620](https://github.com/wbkd/react-flow/pull/2620) - Thanks [RichSchulz](https://github.com/RichSchulz)! - Types: improve typing for node type
+
+- Updated dependencies [[`e96309b6`](https://github.com/wbkd/react-flow/commit/e96309b6a57b1071faeebf7b0547fef7fd418694), [`85003b01`](https://github.com/wbkd/react-flow/commit/85003b01add71ea852bd5b0d2f1e7496050a6b52), [`4c516882`](https://github.com/wbkd/react-flow/commit/4c516882d2bbf426c1832a53ad40763cc1abef92)]:
+  - @reactflow/core@11.5.0
+  - @reactflow/background@11.1.3
+  - @reactflow/controls@11.1.3
+  - @reactflow/minimap@11.3.3
+
 ## 11.4.2
 
 ### Patch Changes
diff --git a/packages/reactflow/package.json b/packages/reactflow/package.json
index 64e34246..1391eb41 100644
--- a/packages/reactflow/package.json
+++ b/packages/reactflow/package.json
@@ -1,6 +1,6 @@
 {
   "name": "reactflow",
-  "version": "11.4.2",
+  "version": "11.5.0",
   "description": "A highly customizable React library for building node-based editors and interactive flow charts",
   "keywords": [
     "react",