refactor(store): connection data

packages/svelte/src/lib/store/connection-path.ts

@@ -21,20 +21,23 @@ export function getConnectionPath(store: SvelteFlowStoreState) {
       store.transform
     ],
     ([connection, connectionLineType, connectionMode, nodes, transform]) => {
-      if (!connection.nodeId) {
+      if (!connection.connectionStartHandle?.nodeId) {
         return null;
       }
 
-      const fromNode = nodes.find((n) => n.id === connection.nodeId);
+      const fromNode = nodes.find((n) => n.id === connection.connectionStartHandle?.nodeId);
       const fromHandleBounds = fromNode?.[internalsSymbol]?.handleBounds;
-      const handleBoundsStrict = fromHandleBounds?.[connection.handleType || 'source'] || [];
+      const handleBoundsStrict =
+        fromHandleBounds?.[connection.connectionStartHandle.type || 'source'] || [];
       const handleBoundsLoose = handleBoundsStrict
         ? handleBoundsStrict
-        : fromHandleBounds?.[connection.handleType === 'source' ? 'target' : 'source']!;
+        : fromHandleBounds?.[
+            connection?.connectionStartHandle?.type === 'source' ? 'target' : 'source'
+          ]!;
       const handleBounds =
         connectionMode === ConnectionMode.Strict ? handleBoundsStrict : handleBoundsLoose;
-      const fromHandle = connection.handleId
-        ? handleBounds.find((d) => d.id === connection.handleId)
+      const fromHandle = connection.connectionStartHandle?.handleId
+        ? handleBounds.find((d) => d.id === connection.connectionStartHandle?.handleId)
         : handleBounds[0];
       const fromHandleX = fromHandle
         ? fromHandle.x + fromHandle.width / 2
@@ -49,8 +52,8 @@ export function getConnectionPath(store: SvelteFlowStoreState) {
         sourceX: fromX,
         sourceY: fromY,
         sourcePosition: fromPosition,
-        targetX: ((connection.position?.x ?? 0) - transform[0]) / transform[2],
-        targetY: ((connection.position?.y ?? 0) - transform[1]) / transform[2],
+        targetX: ((connection.connectionPosition?.x ?? 0) - transform[0]) / transform[2],
+        targetY: ((connection.connectionPosition?.y ?? 0) - transform[1]) / transform[2],
         targetPosition: toPosition
       };
 

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

@@ -7,7 +7,8 @@ import {
   type ViewportHelperFunctionOptions,
   type Connection,
   type XYPosition,
-  type CoordinateExtent
+  type CoordinateExtent,
+  type UpdateConnection
 } from '@reactflow/system';
 import {
   createMarkerIds,
@@ -304,21 +305,22 @@ export function createStore(params: CreateStoreParams): SvelteFlowStore {
     return transformChanged;
   }
 
-  function updateConnection(connectionUpdate: Partial<ConnectionData> | null) {
+  const updateConnection: UpdateConnection = (update) => {
     const currentConnectionData = get(store.connection);
+
     const nextConnectionData = currentConnectionData
       ? {
           ...initConnectionData,
           ...currentConnectionData,
-          ...connectionUpdate
+          ...update
         }
       : {
           ...initConnectionData,
-          ...connectionUpdate
+          ...update
         };
 
     store.connection.set(nextConnectionData);
-  }
+  };
 
   function cancelConnection() {
     updateConnection(initConnectionData);

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

@@ -8,7 +8,8 @@ import {
   type SnapGrid,
   type MarkerProps,
   type PanZoomInstance,
-  type CoordinateExtent
+  type CoordinateExtent,
+  type IsValidConnection
 } from '@reactflow/system';
 
 import DefaultNode from '$lib/components/nodes/DefaultNode.svelte';
@@ -18,23 +19,14 @@ import BezierEdge from '$lib/components/edges/BezierEdge.svelte';
 import StraightEdge from '$lib/components/edges/StraightEdge.svelte';
 import SmoothStepEdge from '$lib/components/edges/SmoothStepEdge.svelte';
 import StepEdge from '$lib/components/edges/StepEdge.svelte';
-import type {
-  ConnectionData,
-  NodeTypes,
-  EdgeTypes,
-  EdgeLayouted,
-  Edge,
-  Node,
-  IsValidConnection
-} from '$lib/types';
+import type { ConnectionData, NodeTypes, EdgeTypes, EdgeLayouted, Edge, Node } from '$lib/types';
 import { infiniteExtent } from '@reactflow/utils';
 
 export const initConnectionData = {
-  nodeId: null,
-  handleId: null,
-  handleType: null,
-  position: null,
-  status: null
+  connectionStartHandle: null,
+  connectionEndHandle: null,
+  connectionPosition: null,
+  connectionStatus: null
 };
 
 export const initialNodeTypes = {
@@ -88,5 +80,6 @@ export const initialStoreState = {
   elementsSelectable: writable<boolean>(true),
   selectNodesOnDrag: writable<boolean>(true),
   markers: readable<MarkerProps[]>([]),
-  defaultMarkerColor: writable<string>('#b1b1b7')
+  defaultMarkerColor: writable<string>('#b1b1b7'),
+  lib: readable<string>('svelte')
 };

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

@@ -4,11 +4,12 @@ import type {
   ViewportHelperFunctionOptions,
   Connection,
   UpdateNodePositions,
-  CoordinateExtent
+  CoordinateExtent,
+  UpdateConnection
 } from '@reactflow/system';
 
 import type { initialStoreState } from './initial-store';
-import type { Node, Edge, ConnectionData, NodeTypes, EdgeTypes, FitViewOptions } from '$lib/types';
+import type { Node, Edge, NodeTypes, EdgeTypes, FitViewOptions } from '$lib/types';
 import type { Writable } from 'svelte/store';
 
 export type SvelteFlowStoreActions = {
@@ -27,7 +28,7 @@ export type SvelteFlowStoreActions = {
   addSelectedNodes: (ids: string[]) => void;
   addSelectedEdges: (ids: string[]) => void;
   panBy: (delta: XYPosition) => boolean;
-  updateConnection: (connection: Partial<ConnectionData>) => void;
+  updateConnection: UpdateConnection;
   cancelConnection: () => void;
   reset(): void;
 };