added connectionfrom connectionto and clickconnecting css

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:
-        (startHandle?.nodeId === nodeId && startHandle?.handleId === handleId && startHandle?.type === type) ||
-        (endHandle?.nodeId === nodeId && endHandle?.handleId === handleId && endHandle?.type === type),
+      connectingFrom,
+      connectingTo,
       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,
-            // this class is used to style the handle when the user is connecting
+            clickconnecting: clickConnecting,
+            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 {