refactor(react/svelte): cleanup types

packages/core/src/hooks/useDrag/index.ts

@@ -1,14 +1,14 @@
-import { useEffect, useRef, useState } from 'react';
-import type { RefObject, MouseEvent } from 'react';
+import { useEffect, useRef, useState, type RefObject, type MouseEvent } from 'react';
 import { drag } from 'd3-drag';
 import { select } from 'd3-selection';
 import { calcAutoPan, getEventPosition } from '@reactflow/utils';
-import type { NodeDragItem, Node, SelectionDragHandler, UseDragEvent, XYPosition } from '@reactflow/system';
+import type { NodeDragItem, UseDragEvent, XYPosition } from '@reactflow/system';
 
 import { useStoreApi } from '../../hooks/useStore';
 import { getDragItems, getEventHandlerParams, hasSelector, calcNextPosition } from './utils';
 import { handleNodeClick } from '../../components/Nodes/utils';
 import useGetPointerPosition from '../useGetPointerPosition';
+import type { Node, SelectionDragHandler } from '../../types';
 
 export type UseDragData = { dx: number; dy: number };
 

packages/core/src/hooks/useDrag/utils.ts

@@ -2,15 +2,15 @@ import type { RefObject } from 'react';
 import {
   errorMessages,
   type CoordinateExtent,
-  type Node,
   type NodeDragItem,
-  type NodeInternals,
   type NodeOrigin,
   type OnError,
   type XYPosition,
 } from '@reactflow/system';
 import { clampPosition, isNumeric, getNodePositionWithOrigin } from '@reactflow/utils';
 
+import type { Node, NodeInternals } from '../../types';
+
 export function isParentSelected(node: Node, nodeInternals: NodeInternals): boolean {
   if (!node.parentNode) {
     return false;

packages/core/src/hooks/useEdges.ts

@@ -1,6 +1,5 @@
-import type { Edge, ReactFlowState } from '@reactflow/system';
-
 import { useStore } from '../hooks/useStore';
+import type { Edge, ReactFlowState } from '../types';
 
 const edgesSelector = (state: ReactFlowState) => state.edges;
 

packages/core/src/hooks/useNodes.ts

@@ -1,5 +1,6 @@
 import { useStore } from '../hooks/useStore';
-import type { Node, ReactFlowState } from '@reactflow/system';
+
+import type { Node, ReactFlowState } from '../types';
 
 const nodesSelector = (state: ReactFlowState) => state.getNodes();
 

packages/core/src/hooks/useNodesEdgesState.ts

@@ -1,8 +1,8 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import { useState, useCallback, type SetStateAction, type Dispatch } from 'react';
-import type { Node, NodeChange, Edge, EdgeChange } from '@reactflow/system';
 
 import { applyNodeChanges, applyEdgeChanges } from '../utils/changes';
+import type { Node, NodeChange, Edge, EdgeChange } from '../types';
 
 type ApplyChanges<ItemType, ChangesType> = (changes: ChangesType[], items: ItemType[]) => ItemType[];
 type OnChange<ChangesType> = (changes: ChangesType[]) => void;

packages/core/src/hooks/useNodesInitialized.ts

@@ -1,6 +1,7 @@
-import { internalsSymbol, type ReactFlowState } from '@reactflow/system';
+import { internalsSymbol } from '@reactflow/system';
 
 import { useStore } from './useStore';
+import type { ReactFlowState } from '../types';
 
 const selector = (s: ReactFlowState) => {
   if (s.nodeInternals.size === 0) {

packages/core/src/hooks/useOnInitHandler.ts

@@ -1,7 +1,7 @@
 import { useEffect, useRef } from 'react';
-import type { OnInit } from '@reactflow/system';
 
 import useReactFlow from './useReactFlow';
+import type { OnInit } from '../types';
 
 function useOnInitHandler(onInit: OnInit | undefined) {
   const rfInstance = useReactFlow();

packages/core/src/hooks/useOnSelectionChange.ts

@@ -1,7 +1,7 @@
 import { useEffect } from 'react';
-import type { OnSelectionChangeFunc } from '@reactflow/system';
 
 import { useStoreApi } from './useStore';
+import type { OnSelectionChangeFunc } from '../types';
 
 export type UseOnSelectionChangeOptions = {
   onChange?: OnSelectionChangeFunc;

packages/core/src/hooks/useReactFlow.ts

@@ -1,5 +1,10 @@
 import { useCallback, useMemo } from 'react';
-import { getConnectedEdges, getOverlappingArea, isRectObject, nodeToRect } from '@reactflow/utils';
+import { getOverlappingArea, isRectObject, nodeToRect } from '@reactflow/utils';
+import type { Rect } from '@reactflow/system';
+
+import useViewportHelper from './useViewportHelper';
+import { useStoreApi } from '../hooks/useStore';
+import { getConnectedEdges } from '../utils';
 import type {
   ReactFlowInstance,
   Instance,
@@ -11,11 +16,7 @@ import type {
   EdgeRemoveChange,
   NodeChange,
   Node,
-  Rect,
-} from '@reactflow/system';
-
-import useViewportHelper from './useViewportHelper';
-import { useStoreApi } from '../hooks/useStore';
+} from '../types';
 
 /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
 export default function useReactFlow<NodeData = any, EdgeData = any>(): ReactFlowInstance<NodeData, EdgeData> {

packages/core/src/hooks/useStore.ts

@@ -1,8 +1,9 @@
 import { useContext, useMemo } from 'react';
 import { useStore as useZustandStore, type StoreApi } from 'zustand';
-import { errorMessages, type ReactFlowState } from '@reactflow/system';
+import { errorMessages } from '@reactflow/system';
 
 import StoreContext from '../contexts/RFStoreContext';
+import type { ReactFlowState } from '../types';
 
 const zustandErrorMessage = errorMessages['001']();
 

packages/core/src/hooks/useViewport.ts

@@ -1,7 +1,8 @@
 import { shallow } from 'zustand/shallow';
-import type { Viewport, ReactFlowState } from '@reactflow/system';
+import type { Viewport } from '@reactflow/system';
 
 import { useStore } from '../hooks/useStore';
+import type { ReactFlowState } from '../types';
 
 const viewportSelector = (state: ReactFlowState) => ({
   x: state.transform[0],

packages/core/src/hooks/useViewportHelper.ts

@@ -2,9 +2,10 @@ import { useMemo } from 'react';
 import { zoomIdentity } from 'd3-zoom';
 import { shallow } from 'zustand/shallow';
 import { pointToRendererPoint, getTransformForBounds, getD3Transition, fitView } from '@reactflow/utils';
-import type { ViewportHelperFunctions, ReactFlowState, XYPosition } from '@reactflow/system';
+import type { XYPosition } from '@reactflow/system';
 
 import { useStoreApi, useStore } from '../hooks/useStore';
+import type { ViewportHelperFunctions, ReactFlowState } from '../types';
 
 // eslint-disable-next-line @typescript-eslint/no-empty-function
 const noop = () => {};

packages/core/src/hooks/useVisibleEdges.ts

@@ -1,9 +1,10 @@
 import { useCallback } from 'react';
-import { internalsSymbol, type ReactFlowState, type NodeInternals, type Edge } from '@reactflow/system';
+import { internalsSymbol } from '@reactflow/system';
 import { isNumeric } from '@reactflow/utils';
 
 import { useStore } from '../hooks/useStore';
 import { isEdgeVisible } from '../container/EdgeRenderer/utils';
+import { type ReactFlowState, type NodeInternals, type Edge } from '../types';
 
 const defaultEdgeTree = [{ level: 0, isMaxLevel: true, edges: [] }];
 

packages/core/src/hooks/useVisibleNodes.ts

@@ -1,15 +1,15 @@
 import { useCallback } from 'react';
 import { getNodesInside } from '@reactflow/utils';
-import type { ReactFlowState } from '@reactflow/system';
 
 import { useStore } from '../hooks/useStore';
+import type { Node, ReactFlowState } from '../types';
 
 function useVisibleNodes(onlyRenderVisible: boolean) {
   const nodes = useStore(
     useCallback(
       (s: ReactFlowState) =>
         onlyRenderVisible
-          ? getNodesInside(s.nodeInternals, { x: 0, y: 0, width: s.width, height: s.height }, s.transform, true)
+          ? getNodesInside<Node>(s.getNodes(), { x: 0, y: 0, width: s.width, height: s.height }, s.transform, true)
           : s.getNodes(),
       [onlyRenderVisible]
     )