connectionindicator class is now added if handle can be connected to based on handle types

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

@@ -8,7 +8,8 @@
     isMouseEvent,
     type HandleConnection,
     areConnectionMapsEqual,
-    handleConnectionChange
+    handleConnectionChange,
+    ConnectionMode
   } from '@xyflow/system';
 
   import { useStore } from '$lib/store';
@@ -32,7 +33,7 @@
   const isTarget = type === 'target';
   const nodeId = getContext<string>('svelteflow__node_id');
   const connectable = getContext<Writable<boolean>>('svelteflow__node_connectable');
-  $: handleConnectable = isConnectable !== undefined ? isConnectable : $connectable;
+  $: isConnectable = isConnectable !== undefined ? isConnectable : $connectable;
 
   const handleId = id || null;
 
@@ -124,6 +125,7 @@
     prevConnections = connections ?? new Map();
   }
 
+  $: connectionInProcess = !!$connection.startHandle;
   $: connectingFrom =
     $connection.startHandle?.nodeId === nodeId &&
     $connection.startHandle?.type === type &&
@@ -132,6 +134,11 @@
     $connection.endHandle?.nodeId === nodeId &&
     $connection.endHandle?.type === type &&
     $connection.endHandle?.handleId === handleId;
+  $: isPossibleEndHandle =
+    $connectionMode === ConnectionMode.Strict
+      ? $connection.startHandle?.type !== type
+      : nodeId !== $connection.startHandle?.nodeId ||
+        handleId !== $connection.startHandle?.handleId;
   $: valid = connectingTo && $connection.status === 'valid';
 
   // @todo implement connectablestart, connectableend
@@ -161,10 +168,10 @@ The Handle component is the part of a node that can be used to connect nodes.
   ])}
   class:source={!isTarget}
   class:target={isTarget}
-  class:connectablestart={handleConnectable}
+  class:connectablestart={isConnectable}
-  class:connectableend={handleConnectable}
+  class:connectableend={isConnectable}
-  class:connectable={handleConnectable}
+  class:connectable={isConnectable}
-  class:connectionindicator={handleConnectable}
+  class:connectionindicator={isConnectable && (!connectionInProcess || isPossibleEndHandle)}
   on:mousedown={onPointerDown}
   on:touchstart={onPointerDown}
   {style}