fixed connectionLine not updating correctly on auto pan

packages/svelte/src/lib/store/index.ts

@@ -1,5 +1,5 @@
 import { getContext, setContext } from 'svelte';
-import { derived, get } from 'svelte/store';
+import { derived, get, writable } from 'svelte/store';
 import {
   createMarkerIds,
   fitView as fitViewSystem,
@@ -16,7 +16,8 @@ import {
   type XYPosition,
   type CoordinateExtent,
   type UpdateConnection,
-  type ConnectionState
+  type ConnectionState,
+  pointToRendererPoint
 } from '@xyflow/system';
 
 import type { EdgeTypes, NodeTypes, Node, Edge, FitViewOptions } from '$lib/types';
@@ -331,12 +332,13 @@ export function createStore({
     });
   }
 
+  const _connection = writable<ConnectionState>(initialConnection);
   const updateConnection: UpdateConnection = (newConnection: ConnectionState) => {
-    store.connection.set({ ...newConnection });
+    _connection.set({ ...newConnection });
   };
 
   function cancelConnection() {
-    store.connection.set(initialConnection);
+    _connection.set(initialConnection);
   }
 
   function reset() {
@@ -357,6 +359,14 @@ export function createStore({
     // derived state
     visibleEdges: getVisibleEdges(store),
     visibleNodes: getVisibleNodes(store),
+    connection: derived([_connection, store.viewport], ([connection, viewport]) => {
+      return connection.inProgress
+        ? {
+            ...connection,
+            to: pointToRendererPoint(connection.to, [viewport.x, viewport.y, viewport.zoom])
+          }
+        : { ...connection };
+    }),
     markers: derived(
       [store.edges, store.defaultMarkerColor, store.flowId],
       ([edges, defaultColor, id]) => createMarkerIds(edges, { defaultColor, id })

packages/svelte/src/lib/store/initial-store.ts

@@ -143,7 +143,7 @@ export const getInitialStore = ({
     viewport: writable<Viewport>(viewport),
     connectionMode: writable<ConnectionMode>(ConnectionMode.Strict),
     domNode: writable<HTMLDivElement | null>(null),
-    connection: writable<ConnectionState>(initialConnection),
+    connection: readable<ConnectionState>(initialConnection),
     connectionLineType: writable<ConnectionLineType>(ConnectionLineType.Bezier),
     connectionRadius: writable<number>(20),
     isValidConnection: writable<IsValidConnection>(() => true),