refactor(react/svelte): cleanup types

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

@@ -1,8 +1,8 @@
+import { derived } from 'svelte/store';
 import { getBezierPath, getSmoothStepPath, getStraightPath } from '@reactflow/edge-utils';
-import { ConnectionLineType, ConnectionMode, Position } from '@reactflow/system';
+import { ConnectionLineType, ConnectionMode, Position, internalsSymbol } from '@reactflow/system';
 
 import type { SvelteFlowStoreState } from './types';
-import { derived } from 'svelte/store';
 
 const oppositePosition = {
   [Position.Left]: Position.Right,
@@ -20,21 +20,21 @@ export function getConnectionPath(store: SvelteFlowStoreState) {
       store.nodes,
       store.transform
     ],
-    ([$connection, $connectionLineType, $connectionMode, $nodes, $transform]) => {
-      if (!$connection.nodeId) {
+    ([connection, connectionLineType, connectionMode, nodes, transform]) => {
+      if (!connection.nodeId) {
         return null;
       }
 
-      const fromNode = $nodes.find((n) => n.id === $connection.nodeId);
+      const fromNode = nodes.find((n) => n.id === connection.nodeId);
       const fromHandleBounds = fromNode?.[internalsSymbol]?.handleBounds;
-      const handleBoundsStrict = fromHandleBounds?.[$connection.handleType || 'source'] || [];
+      const handleBoundsStrict = fromHandleBounds?.[connection.handleType || 'source'] || [];
       const handleBoundsLoose = handleBoundsStrict
         ? handleBoundsStrict
-        : fromHandleBounds?.[$connection.handleType === 'source' ? 'target' : 'source']!;
+        : fromHandleBounds?.[connection.handleType === 'source' ? 'target' : 'source']!;
       const handleBounds =
-        $connectionMode === ConnectionMode.Strict ? handleBoundsStrict : handleBoundsLoose;
-      const fromHandle = $connection.handleId
-        ? handleBounds.find((d) => d.id === $connection.handleId)
+        connectionMode === ConnectionMode.Strict ? handleBoundsStrict : handleBoundsLoose;
+      const fromHandle = connection.handleId
+        ? handleBounds.find((d) => d.id === connection.handleId)
         : handleBounds[0];
       const fromHandleX = fromHandle
         ? fromHandle.x + fromHandle.width / 2
@@ -49,22 +49,22 @@ 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.position?.x ?? 0) - transform[0]) / transform[2],
+        targetY: ((connection.position?.y ?? 0) - transform[1]) / transform[2],
         targetPosition: toPosition
       };
 
       let path = '';
 
-      if ($connectionLineType === ConnectionLineType.Bezier) {
+      if (connectionLineType === ConnectionLineType.Bezier) {
         // we assume the destination position is opposite to the source position
         [path] = getBezierPath(pathParams);
-      } else if ($connectionLineType === ConnectionLineType.Step) {
+      } else if (connectionLineType === ConnectionLineType.Step) {
         [path] = getSmoothStepPath({
           ...pathParams,
           borderRadius: 0
         });
-      } else if ($connectionLineType === ConnectionLineType.SmoothStep) {
+      } else if (connectionLineType === ConnectionLineType.SmoothStep) {
         [path] = getSmoothStepPath(pathParams);
       } else {
         [path] = getStraightPath(pathParams);

packages/svelte/src/lib/store/edges-layouted.ts

@@ -2,7 +2,7 @@ import { derived } from 'svelte/store';
 import { Position } from '@reactflow/system';
 
 import { getEdgePositions, getHandle, getNodeData } from '$lib/container/EdgeRenderer/utils';
-import type { WrapEdgeProps } from '$lib/types';
+import type { EdgeLayouted } from '$lib/types';
 import type { SvelteFlowStoreState } from './types';
 
 export function getEdgesLayouted(store: SvelteFlowStoreState) {
@@ -56,6 +56,6 @@ export function getEdgesLayouted(store: SvelteFlowStoreState) {
           targetHandleId
         };
       })
-      .filter((e) => e !== null) as WrapEdgeProps[];
+      .filter((e) => e !== null) as EdgeLayouted[];
   });
 }

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

@@ -1,5 +1,6 @@
 import { getContext } from 'svelte';
 import { get } from 'svelte/store';
+import { zoomIdentity } from 'd3-zoom';
 import {
   type Transform,
   type NodeDragItem,
@@ -7,23 +8,14 @@ import {
   internalsSymbol,
   type NodeOrigin,
   type ViewportHelperFunctionOptions,
-  type Node as RFNode,
   type Connection,
   type XYPosition,
   type CoordinateExtent
 } from '@reactflow/system';
-import {
-  fitView as fitViewUtil,
-  getConnectedEdges,
-  getD3Transition,
-  getDimensions,
-  addEdge as addEdgeUtil
-} from '@reactflow/utils';
-import { zoomIdentity } from 'd3-zoom';
+import { fitView as fitViewUtil, getD3Transition, getDimensions } from '@reactflow/utils';
 
-import { getHandleBounds } from '../../utils';
+import { getHandleBounds, getConnectedEdges, addEdge as addEdgeUtil } from '$lib/utils';
 import type { EdgeTypes, NodeTypes, Node, Edge, ConnectionData } from '$lib/types';
-
 import { getEdgesLayouted } from './edges-layouted';
 import { getConnectionPath } from './connection-path';
 import { initConnectionData, initialStoreState } from './initial-store';
@@ -170,7 +162,7 @@ export function createStore({
 
     return fitViewUtil(
       {
-        nodes: get(store.nodes) as RFNode[],
+        nodes: get(store.nodes),
         width: get(store.width),
         height: get(store.height),
         minZoom: 0.2,
@@ -227,7 +219,7 @@ export function createStore({
       const initialHitEdges = deletableEdges.filter((e) => edgeIds.includes(e.id));
 
       if (nodesToRemove || initialHitEdges) {
-        const connectedEdges = getConnectedEdges(nodesToRemove as RFNode[], deletableEdges);
+        const connectedEdges = getConnectedEdges(nodesToRemove, deletableEdges);
         const edgesToRemove = [...initialHitEdges, ...connectedEdges];
         const edgeIdsToRemove = edgesToRemove.reduce<string[]>((res, edge) => {
           if (!res.includes(edge.id)) {

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

@@ -5,15 +5,15 @@ import {
   type D3SelectionInstance,
   ConnectionMode,
   ConnectionLineType,
+  type SelectionRect,
   type Transform,
-  type NodeOrigin,
-  type Rect
+  type NodeOrigin
 } from '@reactflow/system';
 
 import DefaultNode from '$lib/components/nodes/DefaultNode.svelte';
 import InputNode from '$lib/components/nodes/InputNode.svelte';
 import OutputNode from '$lib/components/nodes/OutputNode.svelte';
-import type { Node, Edge, ConnectionData, NodeTypes, EdgeTypes } from '$lib/types';
+import type { Node, Edge, ConnectionData, NodeTypes, EdgeTypes, EdgeLayouted } from '$lib/types';
 import BezierEdge from '$lib/components/edges/BezierEdge.svelte';
 import StraightEdge from '$lib/components/edges/StraightEdge.svelte';
 import SmoothStepEdge from '$lib/components/edges/SmoothStepEdge.svelte';
@@ -29,7 +29,7 @@ export const initConnectionData = {
 export const initialStoreState = {
   nodes: writable<Node[]>([]),
   edges: writable<Edge[]>([]),
-  edgesLayouted: readable<Edge[]>([]),
+  edgesLayouted: readable<EdgeLayouted[]>([]),
   height: writable<number>(500),
   width: writable<number>(500),
   nodeOrigin: writable<NodeOrigin>([0.5, 0.5]),
@@ -39,7 +39,7 @@ export const initialStoreState = {
   }),
   id: writable<string | null>(null),
   dragging: writable<boolean>(false),
-  selectionRect: writable<(Rect & { startX: number; startY: number }) | null>(null),
+  selectionRect: writable<SelectionRect | null>(null),
   selectionKeyPressed: writable<boolean>(false),
   multiselectionKeyPressed: writable<boolean>(false),
   deleteKeyPressed: writable<boolean>(false),

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

@@ -6,7 +6,7 @@ import type {
   NodeDragItem
 } from '@reactflow/system';
 
-import { initialStoreState } from './initial-store';
+import type { initialStoreState } from './initial-store';
 import type { Node, Edge, ConnectionData } from '$lib/types';
 
 export type SvelteFlowStoreActions = {