refactor(utils): use utils from system package

packages/react/src/components/Handle/index.tsx

@@ -12,6 +12,7 @@ import {
   XYHandle,
   getHostForElement,
   isMouseEvent,
+  addEdge,
   type HandleProps,
   type Connection,
   type HandleType,
@@ -19,7 +20,6 @@ import {
 
 import { useStore, useStoreApi } from '../../hooks/useStore';
 import { useNodeId } from '../../contexts/NodeIdContext';
-import { addEdge } from '../../utils/';
 import { type ReactFlowState } from '../../types';
 
 export type HandleComponentProps = HandleProps & Omit<HTMLAttributes<HTMLDivElement>, 'id'>;

packages/react/src/hooks/useNodesEdgesState.ts

@@ -12,9 +12,12 @@ import type { Node, NodeChange, Edge, EdgeChange } from '../types';
  */
 export function useNodesState<NodeType extends Node = Node>(
   initialNodes: NodeType[]
-): [NodeType[], Dispatch<SetStateAction<NodeType[]>>, (changes: NodeChange[]) => void] {
+): [NodeType[], Dispatch<SetStateAction<NodeType[]>>, (changes: NodeChange<NodeType>[]) => void] {
   const [nodes, setNodes] = useState(initialNodes);
-  const onNodesChange = useCallback((changes: NodeChange[]) => setNodes((nds) => applyNodeChanges(changes, nds)), []);
+  const onNodesChange = useCallback(
+    (changes: NodeChange<NodeType>[]) => setNodes((nds) => applyNodeChanges(changes, nds)),
+    []
+  );
 
   return [nodes, setNodes, onNodesChange];
 }
@@ -28,9 +31,12 @@ export function useNodesState<NodeType extends Node = Node>(
  */
 export function useEdgesState<EdgeType extends Edge = Edge>(
   initialEdges: EdgeType[]
-): [EdgeType[], Dispatch<SetStateAction<EdgeType[]>>, (changes: EdgeChange[]) => void] {
+): [EdgeType[], Dispatch<SetStateAction<EdgeType[]>>, (changes: EdgeChange<EdgeType>[]) => void] {
   const [edges, setEdges] = useState(initialEdges);
-  const onEdgesChange = useCallback((changes: EdgeChange[]) => setEdges((eds) => applyEdgeChanges(changes, eds)), []);
+  const onEdgesChange = useCallback(
+    (changes: EdgeChange<EdgeType>[]) => setEdges((eds) => applyEdgeChanges(changes, eds)),
+    []
+  );
 
   return [edges, setEdges, onEdgesChange];
 }

packages/react/src/types/instance.ts

@@ -45,9 +45,6 @@ export namespace Instance {
     area: Rect,
     partially?: boolean
   ) => boolean;
-  export type getConnectedEdges = (id: string | (Node | { id: Node['id'] })[]) => Edge[];
-  export type getIncomers = (node: string | Node | { id: Node['id'] }) => Node[];
-  export type getOutgoers = (node: string | Node | { id: Node['id'] }) => Node[];
 
   export type UpdateNode<NodeType extends Node = Node> = (
     id: string,

packages/svelte/src/lib/container/Pane/Pane.svelte

@@ -30,10 +30,14 @@
 
 <script lang="ts">
   import { createEventDispatcher } from 'svelte';
-  import { SelectionMode, getEventPosition, getNodesInside } from '@xyflow/system';
+  import {
+    SelectionMode,
+    getEventPosition,
+    getNodesInside,
+    getConnectedEdges
+  } from '@xyflow/system';
 
   import { useStore } from '$lib/store';
-  import { getConnectedEdges } from '$lib/utils';
   import type { Node, Edge } from '$lib/types';
   import type { PaneProps } from './types';
 

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

@@ -7,6 +7,7 @@ import {
   getElementsToRemove,
   panBy as panBySystem,
   updateNodeDimensions as updateNodeDimensionsSystem,
+  addEdge as addEdgeUtil,
   type UpdateNodePositions,
   type NodeDimensionUpdate,
   type ViewportHelperFunctionOptions,
@@ -19,7 +20,6 @@ import {
   errorMessages
 } from '@xyflow/system';
 
-import { addEdge as addEdgeUtil } from '$lib/utils';
 import type { EdgeTypes, NodeTypes, Node, Edge, FitViewOptions, ConnectionData } from '$lib/types';
 import { initialEdgeTypes, initialNodeTypes, getInitialStore } from './initial-store';
 import type { SvelteFlowStore } from './types';