added connectionfrom connectionto and clickconnecting css

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

@@ -1,7 +1,7 @@
 import { useCallback } from 'react';
 import { ReactFlow, Node, Edge, useNodesState, useEdgesState, Position, Connection, addEdge } from '@xyflow/react';
 
-import styles from './touch-device.module.css';
+import './touch-device.css';
 
 const initialNodes: Node[] = [
   {
@@ -42,7 +42,6 @@ const TouchDeviceFlow = () => {
       onConnectEnd={onConnectEnd}
       onClickConnectStart={onClickConnectStart}
       onClickConnectEnd={onClickConnectEnd}
-      className={styles.flow}
     />
   );
 };

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

@@ -0,0 +1,27 @@
+.react-flow .react-flow__handle {
+  width: 20px;
+  height: 20px;
+  border-radius: 3px;
+  background-color: #9f7aea;
+}
+
+.react-flow__handle-right {
+  --translate: translate(50%, -50%);
+}
+
+.react-flow__handle-left {
+  --translate: translate(-50%, -50%);
+}
+
+@keyframes bounce {
+  0% {
+    transform: var(--translate) scale(1);
+  }
+  50% {
+    transform: var(--translate) scale(1.1);
+  }
+}
+
+.react-flow .react-flow__handle.clickconnecting {
+  animation: bounce 1600ms infinite ease-in;
+}

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

@@ -1,19 +0,0 @@
-.flow :global .react-flow__handle {
-  width: 20px;
-  height: 20px;
-  border-radius: 3px;
-  background-color: #9f7aea;
-}
-
-.flow :global .react-flow__handle.connecting {
-  animation: bounce 1600ms infinite ease-out;
-}
-
-@keyframes bounce {
-  0% {
-    transform: translate(0, -50%) scale(1);
-  }
-  50% {
-    transform: translate(0, -50%) scale(1.1);
-  }
-}

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

@@ -39,10 +39,12 @@ const connectingSelector =
       connectionClickStartHandle: clickHandle,
       connectionMode,
     } = state;
+    const connectingFrom =
+      startHandle?.nodeId === nodeId && startHandle?.handleId === handleId && startHandle?.type === type;
+    const connectingTo = endHandle?.nodeId === nodeId && endHandle?.handleId === handleId && endHandle?.type === type;
     return {
-      connecting:
+      connectingFrom,
-        (startHandle?.nodeId === nodeId && startHandle?.handleId === handleId && startHandle?.type === type) ||
+      connectingTo,
-        (endHandle?.nodeId === nodeId && endHandle?.handleId === handleId && endHandle?.type === type),
       clickConnecting:
         clickHandle?.nodeId === nodeId && clickHandle?.handleId === handleId && clickHandle?.type === type,
       isPossibleEndHandle:
@@ -77,7 +79,7 @@ const HandleComponent = forwardRef<HTMLDivElement, HandleComponentProps>(
     const store = useStoreApi();
     const nodeId = useNodeId();
     const { connectOnClick, noPanClassName, rfId } = useStore(selector, shallow);
-    const { connecting, clickConnecting, isPossibleEndHandle, connectionInProcess } = useStore(
+    const { connectingFrom, connectingTo, clickConnecting, isPossibleEndHandle, connectionInProcess } = useStore(
       connectingSelector(nodeId, handleId, type),
       shallow
     );
@@ -210,8 +212,11 @@ const HandleComponent = forwardRef<HTMLDivElement, HandleComponentProps>(
             connectable: isConnectable,
             connectablestart: isConnectableStart,
             connectableend: isConnectableEnd,
-            connecting: connecting || clickConnecting,
+            clickconnecting: clickConnecting,
-            // this class is used to style the handle when the user is connecting
+            connectingfrom: connectingFrom,
+            connectingto: connectingTo,
+            // shows where you can start a connection from
+            // and where you can end it while connecting
             connectionindicator:
               isConnectable &&
               (!connectionInProcess || isPossibleEndHandle) &&

packages/system/src/styles/init.css

@@ -223,13 +223,23 @@ svg.xy-flow__connectionline {
   min-width: 5px;
   min-height: 5px;
 
-  &.connecting {
+  &.connectingfrom {
     pointer-events: all;
+    background: violet !important;
+  }
+
+  &.clickconnecting {
+    background: greenyellow !important;
+  }
+
+  &.connectingto {
+    background: red !important;
   }
 
   &.connectionindicator {
     pointer-events: all;
     cursor: crosshair;
+    background: green;
   }
 
   &-bottom {