fix(ios): connection error + dont snap invalid connection lines

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

@@ -2,7 +2,7 @@ import type { MouseEvent as ReactMouseEvent, TouchEvent as ReactTouchEvent } fro
 import { StoreApi } from 'zustand';
 
 import { getHostForElement, calcAutoPan, getEventPosition } from '../../utils';
-import type { OnConnect, HandleType, ReactFlowState } from '../../types';
+import type { OnConnect, HandleType, ReactFlowState, Connection } from '../../types';
 import { pointToRendererPoint, rendererPointToPoint } from '../../utils/graph';
 import {
   ConnectionHandle,
@@ -65,6 +65,8 @@ export function handlePointerDown({
   let prevActiveHandle: Element;
   let connectionPosition = getEventPosition(event, containerBounds);
   let autoPanStarted = false;
+  let connection: Connection | null = null;
+  let isValid = false;
 
   const handleLookup = getHandleLookup({
     nodes: getNodes(),
@@ -108,23 +110,7 @@ export function handlePointerDown({
       autoPanStarted = true;
     }
 
-    setState({
-      connectionPosition: prevClosestHandle
-        ? rendererPointToPoint(
-            {
-              x: prevClosestHandle.x,
-              y: prevClosestHandle.y,
-            },
-            transform
-          )
-        : connectionPosition,
-    });
-
-    if (!prevClosestHandle) {
-      return resetRecentHandle(prevActiveHandle);
-    }
-
-    const { connection, handleDomNode, isValid } = isValidHandle(
+    const { handleDomNode, ...result } = isValidHandle(
       event,
       prevClosestHandle,
       connectionMode,
@@ -135,33 +121,39 @@ export function handlePointerDown({
       doc
     );
 
+    setState({
+      connectionPosition:
+        prevClosestHandle && isValid
+          ? rendererPointToPoint(
+              {
+                x: prevClosestHandle.x,
+                y: prevClosestHandle.y,
+              },
+              transform
+            )
+          : connectionPosition,
+    });
+
+    if (!prevClosestHandle) {
+      return resetRecentHandle(prevActiveHandle);
+    }
+
+    connection = result.connection;
+    isValid = result.isValid;
+
     if (connection.source !== connection.target && handleDomNode) {
       resetRecentHandle(prevActiveHandle);
       prevActiveHandle = handleDomNode;
-      handleDomNode.classList.add('react-flow__handle-connecting');
+      // @todo: remove the old class names "react-flow__handle-" in the next major version
+      handleDomNode.classList.add('connecting', 'react-flow__handle-connecting');
+      handleDomNode.classList.toggle('valid', isValid);
       handleDomNode.classList.toggle('react-flow__handle-valid', isValid);
     }
   }
 
   function onPointerUp(event: MouseEvent | TouchEvent) {
-    cancelAnimationFrame(autoPanId);
-    autoPanStarted = false;
-
-    if (prevClosestHandle) {
-      const { connection, isValid } = isValidHandle(
-        event,
-        prevClosestHandle,
-        connectionMode,
-        nodeId,
-        handleId,
-        isTarget ? 'target' : 'source',
-        isValidConnection,
-        doc
-      );
-
-      if (isValid) {
-        onConnect?.(connection);
-      }
+    if (connection && isValid) {
+      onConnect?.(connection);
     }
 
     onConnectEnd?.(event);
@@ -171,8 +163,11 @@ export function handlePointerDown({
     }
 
     resetRecentHandle(prevActiveHandle);
-
     cancelConnection();
+    cancelAnimationFrame(autoPanId);
+    autoPanStarted = false;
+    isValid = false;
+    connection = null;
 
     doc.removeEventListener('mousemove', onPointerMove as EventListener);
     doc.removeEventListener('mouseup', onPointerUp as EventListener);