Merge pull request #2783 from wbkd/refactor/handle-check

refactor(handle): first check element below then connection radius
2023-01-30 11:58:02 +01:00
parent 079e380a31 c4d0802e4c
commit 1510b2e819
23 changed files with 415 additions and 36 deletions
@@ -9,6 +9,7 @@ import CustomNode from '../examples/CustomNode';
 import DefaultNodes from '../examples/DefaultNodes';
 import DragHandle from '../examples/DragHandle';
 import DragNDrop from '../examples/DragNDrop';
+import EasyConnect from '../examples/EasyConnect';
 import Edges from '../examples/Edges';
 import EdgeRenderer from '../examples/EdgeRenderer';
 import EdgeTypes from '../examples/EdgeTypes';
@@ -96,6 +97,11 @@ const routes: IRoute[] = [
    path: '/dragndrop',
    component: DragNDrop,
  },
+  {
+    name: 'EasyConnect',
+    path: '/easy-connect',
+    component: EasyConnect,
+  },
  {
    name: 'Edges',
    path: '/edges',
@@ -0,0 +1,19 @@
+import { ConnectionLineComponentProps, getStraightPath } from 'reactflow';
+
+function CustomConnectionLine({ fromX, fromY, toX, toY, connectionLineStyle }: ConnectionLineComponentProps) {
+  const [edgePath] = getStraightPath({
+    sourceX: fromX,
+    sourceY: fromY,
+    targetX: toX,
+    targetY: toY,
+  });
+
+  return (
+    <g>
+      <path style={connectionLineStyle} fill="none" d={edgePath} />
+      <circle cx={toX} cy={toY} fill="black" r={3} stroke="black" strokeWidth={1.5} />
+    </g>
+  );
+}
+
+export default CustomConnectionLine;
@@ -0,0 +1,27 @@
+import { Handle, NodeProps, Position, ReactFlowState, useStore } from 'reactflow';
+
+const connectionNodeIdSelector = (state: ReactFlowState) => state.connectionNodeId;
+
+export default function CustomNode({ id }: NodeProps) {
+  const connectionNodeId = useStore(connectionNodeIdSelector);
+  const isTarget = connectionNodeId && connectionNodeId !== id;
+
+  const targetHandleStyle = { zIndex: isTarget ? 3 : 1 };
+  const label = isTarget ? 'Drop here' : 'Drag to connect';
+
+  return (
+    <div className="customNode">
+      <div
+        className="customNodeBody"
+        style={{
+          borderStyle: isTarget ? 'dashed' : 'solid',
+          backgroundColor: isTarget ? '#ffcce3' : '#ccd9f6',
+        }}
+      >
+        <Handle className="targetHandle" style={{ zIndex: 2 }} position={Position.Right} type="source" />
+        <Handle className="targetHandle" style={targetHandleStyle} position={Position.Left} type="target" />
+        {label}
+      </div>
+    </div>
+  );
+}
@@ -0,0 +1,26 @@
+import { useCallback } from 'react';
+import { useStore, getStraightPath, EdgeProps } from 'reactflow';
+
+import { getEdgeParams } from './utils.js';
+
+function FloatingEdge({ id, source, target, markerEnd, style }: EdgeProps) {
+  const sourceNode = useStore(useCallback((store) => store.nodeInternals.get(source), [source]));
+  const targetNode = useStore(useCallback((store) => store.nodeInternals.get(target), [target]));
+
+  if (!sourceNode || !targetNode) {
+    return null;
+  }
+
+  const { sx, sy, tx, ty } = getEdgeParams(sourceNode, targetNode);
+
+  const [edgePath] = getStraightPath({
+    sourceX: sx,
+    sourceY: sy,
+    targetX: tx,
+    targetY: ty,
+  });
+
+  return <path id={id} className="react-flow__edge-path" d={edgePath} markerEnd={markerEnd} style={style} />;
+}
+
+export default FloatingEdge;
@@ -0,0 +1,85 @@
+import { useCallback } from 'react';
+import ReactFlow, { Node, Edge, addEdge, useNodesState, useEdgesState, MarkerType, OnConnect } from 'reactflow';
+
+import CustomNode from './CustomNode';
+import FloatingEdge from './FloatingEdge';
+import CustomConnectionLine from './CustomConnectionLine';
+
+import 'reactflow/dist/style.css';
+import './style.css';
+
+const initialNodes: Node[] = [
+  {
+    id: '1',
+    type: 'custom',
+    position: { x: 0, y: 0 },
+    data: {},
+  },
+  {
+    id: '2',
+    type: 'custom',
+    position: { x: 250, y: 320 },
+    data: {},
+  },
+  {
+    id: '3',
+    type: 'custom',
+    position: { x: 40, y: 300 },
+    data: {},
+  },
+  {
+    id: '4',
+    type: 'custom',
+    position: { x: 300, y: 0 },
+    data: {},
+  },
+];
+
+const initialEdges: Edge[] = [];
+
+const connectionLineStyle = {
+  strokeWidth: 3,
+  stroke: 'black',
+};
+
+const nodeTypes = {
+  custom: CustomNode,
+};
+
+const edgeTypes = {
+  floating: FloatingEdge,
+};
+
+const defaultEdgeOptions = {
+  style: { strokeWidth: 3, stroke: 'black' },
+  type: 'floating',
+  markerEnd: {
+    type: MarkerType.ArrowClosed,
+    color: 'black',
+  },
+};
+
+const EasyConnectExample = () => {
+  const [nodes, setNodes, onNodesChange] = useNodesState(initialNodes);
+  const [edges, setEdges, onEdgesChange] = useEdgesState(initialEdges);
+
+  const onConnect: OnConnect = useCallback((params) => setEdges((eds) => addEdge(params, eds)), [setEdges]);
+
+  return (
+    <ReactFlow
+      nodes={nodes}
+      edges={edges}
+      onNodesChange={onNodesChange}
+      onEdgesChange={onEdgesChange}
+      onConnect={onConnect}
+      fitView
+      nodeTypes={nodeTypes}
+      edgeTypes={edgeTypes}
+      defaultEdgeOptions={defaultEdgeOptions}
+      connectionLineComponent={CustomConnectionLine}
+      connectionLineStyle={connectionLineStyle}
+    />
+  );
+};
+
+export default EasyConnectExample;
@@ -0,0 +1,54 @@
+.customNodeBody {
+  width: 150px;
+  height: 80px;
+  border: 3px solid black;
+  position: relative;
+  overflow: hidden;
+  border-radius: 10px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-weight: bold;
+}
+
+.customNode:before {
+  content: '';
+  position: absolute;
+  top: -10px;
+  left: 50%;
+  height: 20px;
+  width: 40px;
+  transform: translate(-50%, 0);
+  background: #d6d5e6;
+  z-index: 1000;
+  line-height: 1;
+  border-radius: 4px;
+  color: #fff;
+  font-size: 9px;
+  border: 2px solid #222138;
+}
+
+div.sourceHandle {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  top: 0;
+  left: 0;
+  border-radius: 0;
+  transform: none;
+  border: none;
+  opacity: 0;
+}
+
+div.targetHandle {
+  width: 100%;
+  height: 100%;
+  background: blue;
+  position: absolute;
+  top: 0;
+  left: 0;
+  border-radius: 0;
+  transform: none;
+  border: none;
+  opacity: 0;
+}
@@ -0,0 +1,102 @@
+import { Node, Position, MarkerType, XYPosition } from 'reactflow';
+
+// this helper function returns the intersection point
+// of the line between the center of the intersectionNode and the target node
+function getNodeIntersection(intersectionNode: Node, targetNode: Node) {
+  // https://math.stackexchange.com/questions/1724792/an-algorithm-for-finding-the-intersection-point-between-a-center-of-vision-and-a
+  const {
+    width: intersectionNodeWidth,
+    height: intersectionNodeHeight,
+    positionAbsolute: intersectionNodePosition,
+  } = intersectionNode;
+  const targetPosition = targetNode.positionAbsolute!;
+
+  const w = intersectionNodeWidth! / 2;
+  const h = intersectionNodeHeight! / 2;
+
+  const x2 = intersectionNodePosition!.x + w;
+  const y2 = intersectionNodePosition!.y + h;
+  const x1 = targetPosition.x + w;
+  const y1 = targetPosition.y + h;
+
+  const xx1 = (x1 - x2) / (2 * w) - (y1 - y2) / (2 * h);
+  const yy1 = (x1 - x2) / (2 * w) + (y1 - y2) / (2 * h);
+  const a = 1 / (Math.abs(xx1) + Math.abs(yy1));
+  const xx3 = a * xx1;
+  const yy3 = a * yy1;
+  const x = w * (xx3 + yy3) + x2;
+  const y = h * (-xx3 + yy3) + y2;
+
+  return { x, y };
+}
+
+// returns the position (top,right,bottom or right) passed node compared to the intersection point
+function getEdgePosition(node: Node, intersectionPoint: XYPosition) {
+  const n = { ...node.positionAbsolute, ...node };
+  const nx = Math.round(n.x!);
+  const ny = Math.round(n.y!);
+  const px = Math.round(intersectionPoint.x);
+  const py = Math.round(intersectionPoint.y);
+
+  if (px <= nx + 1) {
+    return Position.Left;
+  }
+  if (px >= nx + n.width! - 1) {
+    return Position.Right;
+  }
+  if (py <= ny + 1) {
+    return Position.Top;
+  }
+  if (py >= n.y! + n.height! - 1) {
+    return Position.Bottom;
+  }
+
+  return Position.Top;
+}
+
+// returns the parameters (sx, sy, tx, ty, sourcePos, targetPos) you need to create an edge
+export function getEdgeParams(source: Node, target: Node) {
+  const sourceIntersectionPoint = getNodeIntersection(source, target);
+  const targetIntersectionPoint = getNodeIntersection(target, source);
+
+  const sourcePos = getEdgePosition(source, sourceIntersectionPoint);
+  const targetPos = getEdgePosition(target, targetIntersectionPoint);
+
+  return {
+    sx: sourceIntersectionPoint.x,
+    sy: sourceIntersectionPoint.y,
+    tx: targetIntersectionPoint.x,
+    ty: targetIntersectionPoint.y,
+    sourcePos,
+    targetPos,
+  };
+}
+
+export function createNodesAndEdges() {
+  const nodes = [];
+  const edges = [];
+  const center = { x: window.innerWidth / 2, y: window.innerHeight / 2 };
+
+  nodes.push({ id: 'target', data: { label: 'Target' }, position: center });
+
+  for (let i = 0; i < 8; i++) {
+    const degrees = i * (360 / 8);
+    const radians = degrees * (Math.PI / 180);
+    const x = 250 * Math.cos(radians) + center.x;
+    const y = 250 * Math.sin(radians) + center.y;
+
+    nodes.push({ id: `${i}`, data: { label: 'Source' }, position: { x, y } });
+
+    edges.push({
+      id: `edge-${i}`,
+      target: 'target',
+      source: `${i}`,
+      type: 'floating',
+      markerEnd: {
+        type: MarkerType.Arrow,
+      },
+    });
+  }
+
+  return { nodes, edges };
+}
@@ -1,16 +1,17 @@
-import React, { FC, useCallback, useState } from 'react';
+import { FC, useCallback, useState } from 'react';
 import ReactFlow, {
  addEdge,
  Handle,
  Connection,
  Position,
  Node,
-  Edge,
  NodeProps,
  NodeTypes,
  useNodesState,
  useEdgesState,
-  OnConnectStartParams,
+  OnConnectStart,
+  OnConnectEnd,
+  OnConnect,
 } from 'reactflow';

 import styles from './validation.module.css';
@@ -49,24 +50,24 @@ const ValidationFlow = () => {
  const [nodes, , onNodesChange] = useNodesState(initialNodes);
  const [edges, setEdges, onEdgesChange] = useEdgesState([]);

-  const onConnectStart = useCallback(
-    (event: React.MouseEvent, params: OnConnectStartParams) => {
+  const onConnectStart: OnConnectStart = useCallback(
+    (event, params) => {
      console.log('on connect start', params, event, value);
      setValue(1);
    },
    [value]
  );

-  const onConnect = useCallback(
-    (params: Connection | Edge) => {
+  const onConnect: OnConnect = useCallback(
+    (params) => {
      console.log('on connect', params);
      setEdges((eds) => addEdge(params, eds));
    },
    [setEdges]
  );

-  const onConnectEnd = useCallback(
-    (event: MouseEvent) => {
+  const onConnectEnd: OnConnectEnd = useCallback(
+    (event) => {
      console.log('on connect end', event, value);
      setValue(0);
    },
@@ -1,5 +1,12 @@
 # @reactflow/background

+## 11.1.4
+
+### Patch Changes
+
+- Updated dependencies [[`71153534`](https://github.com/wbkd/react-flow/commit/7115353418ebc7f7c81ab0e861200972bbf7dbd5)]:
+  - @reactflow/core@11.5.1
+
 ## 11.1.3

 ### Patch Changes
@@ -1,6 +1,6 @@
 {
  "name": "@reactflow/background",
-  "version": "11.1.3",
+  "version": "11.1.4",
  "description": "Background component with different variants for React Flow",
  "keywords": [
    "react",
@@ -1,5 +1,12 @@
 # @reactflow/controls

+## 11.1.4
+
+### Patch Changes
+
+- Updated dependencies [[`71153534`](https://github.com/wbkd/react-flow/commit/7115353418ebc7f7c81ab0e861200972bbf7dbd5)]:
+  - @reactflow/core@11.5.1
+
 ## 11.1.3

 ### Patch Changes
@@ -1,6 +1,6 @@
 {
  "name": "@reactflow/controls",
-  "version": "11.1.3",
+  "version": "11.1.4",
  "description": "Component to control the viewport of a React Flow instance",
  "keywords": [
    "react",
@@ -1,5 +1,11 @@
 # @reactflow/core

+## 11.5.1
+
+### Patch Changes
+
+- [#2783](https://github.com/wbkd/react-flow/pull/2783) [`71153534`](https://github.com/wbkd/react-flow/commit/7115353418ebc7f7c81ab0e861200972bbf7dbd5) - connections: check handle below mouse before using connection radius
+
 ## 11.5.0

 Lot's of improvements are coming with this release!
@@ -8,23 +14,24 @@ Lot's of improvements are coming with this release!
 - **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: 
+- **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'>
+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`
+- [#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
+- [#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
@@ -1,6 +1,6 @@
 {
  "name": "@reactflow/core",
-  "version": "11.5.0",
+  "version": "11.5.1",
  "description": "Core components and util functions of React Flow.",
  "keywords": [
    "react",
@@ -125,6 +125,7 @@ export function handlePointerDown({
    }

    const { connection, handleDomNode, isValid } = isValidHandle(
+      event,
      prevClosestHandle,
      connectionMode,
      nodeId,
@@ -148,6 +149,7 @@ export function handlePointerDown({

    if (prevClosestHandle) {
      const { connection, isValid } = isValidHandle(
+        event,
        prevClosestHandle,
        connectionMode,
        nodeId,
@@ -102,6 +102,7 @@ const Handle = forwardRef<HTMLDivElement, HandleComponentProps>(

      const doc = getHostForElement(event.target as HTMLElement);
      const { connection, isValid } = isValidHandle(
+        event,
        {
          nodeId,
          id: handleId,
@@ -1,5 +1,7 @@
+import { MouseEvent as ReactMouseEvent, TouchEvent as ReactTouchEvent } from 'react';
+
 import { ConnectionMode } from '../../types';
-import { internalsSymbol } from '../../utils';
+import { getEventPosition, internalsSymbol } from '../../utils';
 import type { Connection, HandleType, XYPosition, Node, NodeHandleBounds } from '../../types';

 export type ConnectionHandle = {
@@ -61,6 +63,7 @@ type Result = {

 // checks if  and returns connection in fom of an object { source: 123, target: 312 }
 export function isValidHandle(
+  event: MouseEvent | TouchEvent | ReactMouseEvent | ReactTouchEvent,
  handle: Pick<ConnectionHandle, 'nodeId' | 'id' | 'type'>,
  connectionMode: ConnectionMode,
  fromNodeId: string,
@@ -73,23 +76,26 @@ export function isValidHandle(
  const handleDomNode = doc.querySelector(
    `.react-flow__handle[data-id="${handle?.nodeId}-${handle?.id}-${handle?.type}"]`
  );
+  const { x, y } = getEventPosition(event);
+  const handleBelow = doc.elementFromPoint(x, y);
+  const handleToCheck = handleBelow?.classList.contains('react-flow__handle') ? handleBelow : handleDomNode;
+
  const result: Result = {
-    handleDomNode,
+    handleDomNode: handleToCheck,
    isValid: false,
    connection: { source: null, target: null, sourceHandle: null, targetHandle: null },
  };

-  if (handleDomNode) {
-    const handleIsTarget = handle.type === 'target';
-    const handleIsSource = handle.type === 'source';
-    const handleNodeId = handleDomNode.getAttribute('data-nodeid');
-    const handleId = handleDomNode.getAttribute('data-handleid');
+  if (handleToCheck) {
+    const handleType = getHandleType(undefined, handleToCheck);
+    const handleNodeId = handleToCheck.getAttribute('data-nodeid');
+    const handleId = handleToCheck.getAttribute('data-handleid');

    const connection: Connection = {
      source: isTarget ? handle.nodeId : fromNodeId,
-      sourceHandle: isTarget ? handle.id : fromHandleId,
+      sourceHandle: isTarget ? handleId : fromHandleId,
      target: isTarget ? fromNodeId : handle.nodeId,
-      targetHandle: isTarget ? fromHandleId : handle.id,
+      targetHandle: isTarget ? fromHandleId : handleId,
    };

    result.connection = connection;
@@ -97,7 +103,7 @@ export function isValidHandle(
    // in strict mode we don't allow target to target or source to source connections
    const isValid =
      connectionMode === ConnectionMode.Strict
-        ? (isTarget && handleIsSource) || (!isTarget && handleIsTarget)
+        ? (isTarget && handleType === 'source') || (!isTarget && handleType === 'target')
        : handleNodeId !== fromNodeId || handleId !== fromHandleId;

    if (isValid) {
@@ -1,5 +1,12 @@
 # @reactflow/minimap

+## 11.3.4
+
+### Patch Changes
+
+- Updated dependencies [[`71153534`](https://github.com/wbkd/react-flow/commit/7115353418ebc7f7c81ab0e861200972bbf7dbd5)]:
+  - @reactflow/core@11.5.1
+
 ## 11.3.3

 ### Patch Changes
@@ -1,6 +1,6 @@
 {
  "name": "@reactflow/minimap",
-  "version": "11.3.3",
+  "version": "11.3.4",
  "description": "Minimap component for React Flow.",
  "keywords": [
    "react",
@@ -1,5 +1,12 @@
 # @reactflow/node-toolbar

+## 1.1.4
+
+### Patch Changes
+
+- Updated dependencies [[`71153534`](https://github.com/wbkd/react-flow/commit/7115353418ebc7f7c81ab0e861200972bbf7dbd5)]:
+  - @reactflow/core@11.5.1
+
 ## 1.1.3

 ### Patch Changes
@@ -1,6 +1,6 @@
 {
  "name": "@reactflow/node-toolbar",
-  "version": "1.1.3",
+  "version": "1.1.4",
  "description": "A toolbar component for React Flow that can be attached to a node.",
  "keywords": [
    "react",
@@ -36,7 +36,7 @@
    "typecheck": "tsc --noEmit"
  },
  "dependencies": {
-    "@reactflow/core": "workspace:^11.3.3",
+    "@reactflow/core": "workspace:*",
    "classcat": "^5.0.3",
    "zustand": "^4.3.1"
  },
@@ -1,5 +1,18 @@
 # reactflow

+## 11.5.2
+
+### Patch Changes
+
+- [#2783](https://github.com/wbkd/react-flow/pull/2783) [`71153534`](https://github.com/wbkd/react-flow/commit/7115353418ebc7f7c81ab0e861200972bbf7dbd5) - connections: check handle below mouse before using connection radius
+
+- Updated dependencies [[`71153534`](https://github.com/wbkd/react-flow/commit/7115353418ebc7f7c81ab0e861200972bbf7dbd5)]:
+  - @reactflow/core@11.5.1
+  - @reactflow/background@11.1.4
+  - @reactflow/controls@11.1.4
+  - @reactflow/minimap@11.3.4
+  - @reactflow/node-toolbar@1.1.4
+
 ## 11.5.1

 ### Minor Changes
@@ -8,26 +21,28 @@

 ## 11.5.0

-Lot's of improvements are coming with this release! 
+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: 
+- **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'>
+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`
+- [#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
+- [#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)]:
@@ -1,6 +1,6 @@
 {
  "name": "reactflow",
-  "version": "11.5.1",
+  "version": "11.5.2",
  "description": "A highly customizable React library for building node-based editors and interactive flow charts",
  "keywords": [
    "react",