chore(handles): cleanup

examples/react/src/examples/TouchDevice/index.tsx

@@ -42,6 +42,7 @@ const TouchDeviceFlow = () => {
       onConnectEnd={onConnectEnd}
       onClickConnectStart={onClickConnectStart}
       onClickConnectEnd={onClickConnectEnd}
+      className="touch-flow"
     />
   );
 };

examples/react/src/examples/TouchDevice/touch-device.css

@@ -1,15 +1,15 @@
-.react-flow .react-flow__handle {
+.react-flow.touch-flow .react-flow__handle {
   width: 20px;
   height: 20px;
   border-radius: 3px;
   background-color: #9f7aea;
 }
 
-.react-flow__handle-right {
+.touch-flow .react-flow__handle-right {
   --translate: translate(50%, -50%);
 }
 
-.react-flow__handle-left {
+.touch-flow .react-flow__handle-left {
   --translate: translate(-50%, -50%);
 }
 
@@ -22,6 +22,6 @@
   }
 }
 
-.react-flow .react-flow__handle.clickconnecting {
+.react-flow.touch-flow .react-flow__handle.clickconnecting {
   animation: bounce 1600ms infinite ease-in;
 }

examples/react/src/examples/Validation/validation.module.css

@@ -24,10 +24,14 @@
   background: #fff;
 }
 
-.validationflow :global .connecting {
+.validationflow :global .connectingto {
   background: #ff6060;
 }
 
+.validationflow :global .react-flow__node-custominput .connectingfrom {
+  background: #55dd99;
+}
+
 .validationflow :global .valid {
   background: #55dd99;
 }

examples/svelte/src/routes/examples/validation/style.css

@@ -1,7 +1,11 @@
-.svelte-flow__handle.connecting {
+.svelte-flow__handle.connectingto {
 	background: #ff6060;
 }
 
+.svelte-flow__handle.connectingfrom {
+	background: #55dd99;
+}
+
 .svelte-flow__handle.valid {
 	background: #55dd99;
 }

packages/react/src/components/Handle/index.tsx

@@ -38,11 +38,15 @@ const connectingSelector =
       connectionEndHandle: endHandle,
       connectionClickStartHandle: clickHandle,
       connectionMode,
+      connectionStatus,
     } = state;
+
+    const connectingTo = endHandle?.nodeId === nodeId && endHandle?.handleId === handleId && endHandle?.type === type;
+
     return {
       connectingFrom:
         startHandle?.nodeId === nodeId && startHandle?.handleId === handleId && startHandle?.type === type,
-      connectingTo: endHandle?.nodeId === nodeId && endHandle?.handleId === handleId && endHandle?.type === type,
+      connectingTo,
       clickConnecting:
         clickHandle?.nodeId === nodeId && clickHandle?.handleId === handleId && clickHandle?.type === type,
       isPossibleEndHandle:
@@ -50,6 +54,7 @@ const connectingSelector =
           ? startHandle?.type !== type
           : nodeId !== startHandle?.nodeId || handleId !== startHandle?.handleId,
       connectionInProcess: !!startHandle,
+      valid: connectingTo && connectionStatus === 'valid',
     };
   };
 
@@ -77,7 +82,7 @@ const HandleComponent = forwardRef<HTMLDivElement, HandleComponentProps>(
     const store = useStoreApi();
     const nodeId = useNodeId();
     const { connectOnClick, noPanClassName, rfId } = useStore(selector, shallow);
-    const { connectingFrom, connectingTo, clickConnecting, isPossibleEndHandle, connectionInProcess } = useStore(
+    const { connectingFrom, connectingTo, clickConnecting, isPossibleEndHandle, connectionInProcess, valid } = useStore(
       connectingSelector(nodeId, handleId, type),
       shallow
     );
@@ -213,6 +218,7 @@ const HandleComponent = forwardRef<HTMLDivElement, HandleComponentProps>(
             clickconnecting: clickConnecting,
             connectingfrom: connectingFrom,
             connectingto: connectingTo,
+            valid,
             // shows where you can start a connection from
             // and where you can end it while connecting
             connectionindicator:

packages/svelte/src/lib/components/Handle/Handle.svelte

@@ -56,7 +56,8 @@
     onconnect: onConnectAction,
     onconnectstart: onConnectStartAction,
     onconnectend: onConnectEndAction,
-    flowId
+    flowId,
+    connection
   } = store;
 
   function onPointerDown(event: MouseEvent | TouchEvent) {
@@ -123,6 +124,16 @@
     prevConnections = connections ?? new Map();
   }
 
+  $: connectingFrom =
+    $connection.startHandle?.nodeId === nodeId &&
+    $connection.startHandle?.type === type &&
+    $connection.startHandle?.handleId === handleId;
+  $: connectingTo =
+    $connection.endHandle?.nodeId === nodeId &&
+    $connection.endHandle?.type === type &&
+    $connection.endHandle?.handleId === handleId;
+  $: valid = connectingTo && $connection.status === 'valid';
+
   // @todo implement connectablestart, connectableend
 </script>
 
@@ -141,6 +152,11 @@ The Handle component is the part of a node that can be used to connect nodes.
     'nodrag',
     'nopan',
     position,
+    {
+      valid,
+      connectingto: connectingTo,
+      connectingfrom: connectingFrom
+    },
     className
   ])}
   class:source={!isTarget}

packages/system/src/xyhandle/XYHandle.ts

@@ -15,7 +15,7 @@ import {
   type ConnectionHandle,
 } from '../types';
 
-import { getClosestHandle, getConnectionStatus, getHandleLookup, getHandleType, resetRecentHandle } from './utils';
+import { getClosestHandle, getConnectionStatus, getHandleLookup, getHandleType } from './utils';
 
 export type OnPointerDownParams = {
   autoPanOnConnect: boolean;
@@ -107,7 +107,6 @@ function onPointerDown(
     return;
   }
 
-  let prevActiveHandle: Element;
   let connectionPosition = getEventPosition(event, containerBounds);
   let autoPanStarted = false;
   let connection: Connection | null = null;
@@ -194,18 +193,6 @@ function onPointerDown(
       connectionStatus: getConnectionStatus(!!closestHandle, isValid),
       connectionEndHandle: result.endHandle,
     });
-
-    if (!closestHandle && !isValid && !handleDomNode) {
-      return resetRecentHandle(prevActiveHandle, lib);
-    }
-
-    if (connection?.source !== connection?.target && handleDomNode) {
-      resetRecentHandle(prevActiveHandle, lib);
-      prevActiveHandle = handleDomNode;
-      handleDomNode.classList.add('connecting', `${lib}-flow__handle-connecting`);
-      handleDomNode.classList.toggle('valid', isValid);
-      handleDomNode.classList.toggle(`${lib}-flow__handle-valid`, isValid);
-    }
   }
 
   function onPointerUp(event: MouseEvent | TouchEvent) {
@@ -221,7 +208,6 @@ function onPointerDown(
       onEdgeUpdateEnd?.(event);
     }
 
-    resetRecentHandle(prevActiveHandle, lib);
     cancelConnection();
     cancelAnimationFrame(autoPanId);
     autoPanStarted = false;

packages/system/src/xyhandle/utils.ts

@@ -101,10 +101,6 @@ export function getHandleType(
   return null;
 }
 
-export function resetRecentHandle(handleDomNode: Element, lib: string): void {
-  handleDomNode?.classList.remove('valid', 'connecting', `${lib}-flow__handle-valid`, `${lib}-flow__handle-connecting`);
-}
-
 export function getConnectionStatus(isInsideConnectionRadius: boolean, isHandleValid: boolean) {
   let connectionStatus = null;