From a224b88c658c0dfdea2c7fb5372ddb59e2a15c0a Mon Sep 17 00:00:00 2001
From: peterkogo <peter@xyflow.com>
Date: Wed, 13 Mar 2024 13:56:18 +0100
Subject: [PATCH 1/2] connectionindicator class is now added if handle can be
 connected to based on handle types

---
 .../src/lib/components/Handle/Handle.svelte   | 19 +++++++++++++------
 1 file changed, 13 insertions(+), 6 deletions(-)

diff --git a/packages/svelte/src/lib/components/Handle/Handle.svelte b/packages/svelte/src/lib/components/Handle/Handle.svelte
index e35804fc..a492d0c0 100644
--- a/packages/svelte/src/lib/components/Handle/Handle.svelte
+++ b/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:connectableend={handleConnectable}
-  class:connectable={handleConnectable}
-  class:connectionindicator={handleConnectable}
+  class:connectablestart={isConnectable}
+  class:connectableend={isConnectable}
+  class:connectable={isConnectable}
+  class:connectionindicator={isConnectable && (!connectionInProcess || isPossibleEndHandle)}
   on:mousedown={onPointerDown}
   on:touchstart={onPointerDown}
   {style}

From cefdc4eca2bf4dd97357db1796634d4afc3cedf8 Mon Sep 17 00:00:00 2001
From: moklick <info@moritzklack.com>
Date: Thu, 14 Mar 2024 14:48:53 +0100
Subject: [PATCH 2/2] chore(svelte/handle): cleanup

---
 packages/svelte/CHANGELOG.md                          |  6 ++++++
 .../svelte/src/lib/components/Handle/Handle.svelte    | 11 ++++-------
 2 files changed, 10 insertions(+), 7 deletions(-)

diff --git a/packages/svelte/CHANGELOG.md b/packages/svelte/CHANGELOG.md
index f784ff70..dd0f28de 100644
--- a/packages/svelte/CHANGELOG.md
+++ b/packages/svelte/CHANGELOG.md
@@ -1,5 +1,11 @@
 # @xyflow/svelte
 
+## 0.0.39
+
+## Patch changes
+
+- add "connectionindicator" class for `Handle` component
+
 ## 0.0.38
 
 ## ⚠️ Breaking changes
diff --git a/packages/svelte/src/lib/components/Handle/Handle.svelte b/packages/svelte/src/lib/components/Handle/Handle.svelte
index a492d0c0..f77f6413 100644
--- a/packages/svelte/src/lib/components/Handle/Handle.svelte
+++ b/packages/svelte/src/lib/components/Handle/Handle.svelte
@@ -24,6 +24,7 @@
   export let isConnectable: $$Props['isConnectable'] = undefined;
   export let onconnect: $$Props['onconnect'] = undefined;
   export let ondisconnect: $$Props['ondisconnect'] = undefined;
+  // @todo implement connectablestart, connectableend
   // export let isConnectableStart: $$Props['isConnectableStart'] = undefined;
   // export let isConnectableEnd: $$Props['isConnectableEnd'] = undefined;
 
@@ -140,8 +141,6 @@
       : nodeId !== $connection.startHandle?.nodeId ||
         handleId !== $connection.startHandle?.handleId;
   $: valid = connectingTo && $connection.status === 'valid';
-
-  // @todo implement connectablestart, connectableend
 </script>
 
 <!--
@@ -159,13 +158,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:valid
+  class:connectingto={connectingTo}
+  class:connectingfrom={connectingFrom}
   class:source={!isTarget}
   class:target={isTarget}
   class:connectablestart={isConnectable}