chore(types): cleanup

packages/core/src/container/EdgeRenderer/MarkerDefinitions.tsx

@@ -1,16 +1,18 @@
 import { memo, useCallback } from 'react';
 
 import { useStore } from '../../hooks/useStore';
-import { EdgeMarker, ReactFlowState } from '../../types';
 import { getMarkerId } from '../../utils/graph';
 import { useMarkerSymbol } from './MarkerSymbols';
-interface MarkerProps extends EdgeMarker {
+import type { EdgeMarker, ReactFlowState } from '../../types';
+
+type MarkerProps = EdgeMarker & {
   id: string;
-}
-interface MarkerDefinitionsProps {
+};
+
+type MarkerDefinitionsProps = {
   defaultColor: string;
   rfId?: string;
-}
+};
 
 const Marker = ({
   id,

packages/core/src/container/EdgeRenderer/MarkerSymbols.tsx

@@ -1,6 +1,8 @@
 import { useMemo } from 'react';
-import { MarkerType, EdgeMarker } from '../../types';
+
 import { devWarn } from '../../utils';
+import { MarkerType } from '../../types';
+import type { EdgeMarker } from '../../types';
 
 type SymbolProps = Omit<EdgeMarker, 'type'>;
 

packages/core/src/container/EdgeRenderer/index.tsx

@@ -8,39 +8,39 @@ import ConnectionLine from '../../components/ConnectionLine/index';
 import MarkerDefinitions from './MarkerDefinitions';
 import { getEdgePositions, getHandle, getNodeData } from './utils';
 
-import { Position, Edge, ConnectionMode, ReactFlowState } from '../../types';
 import { GraphViewProps } from '../GraphView';
 import { devWarn } from '../../utils';
+import { ConnectionMode, Position } from '../../types';
+import type { Edge, ReactFlowState } from '../../types';
 
-interface EdgeRendererProps
-  extends Pick<
-    GraphViewProps,
-    | 'edgeTypes'
-    | 'connectionLineType'
-    | 'connectionLineType'
-    | 'connectionLineStyle'
-    | 'connectionLineComponent'
-    | 'connectionLineContainerStyle'
-    | 'connectionLineContainerStyle'
-    | 'onEdgeClick'
-    | 'onEdgeDoubleClick'
-    | 'defaultMarkerColor'
-    | 'onlyRenderVisibleElements'
-    | 'onEdgeUpdate'
-    | 'onEdgeContextMenu'
-    | 'onEdgeMouseEnter'
-    | 'onEdgeMouseMove'
-    | 'onEdgeMouseLeave'
-    | 'onEdgeUpdateStart'
-    | 'onEdgeUpdateEnd'
-    | 'edgeUpdaterRadius'
-    | 'noPanClassName'
-    | 'elevateEdgesOnSelect'
-    | 'rfId'
-    | 'disableKeyboardA11y'
-  > {
+type EdgeRendererProps = Pick<
+  GraphViewProps,
+  | 'edgeTypes'
+  | 'connectionLineType'
+  | 'connectionLineType'
+  | 'connectionLineStyle'
+  | 'connectionLineComponent'
+  | 'connectionLineContainerStyle'
+  | 'connectionLineContainerStyle'
+  | 'onEdgeClick'
+  | 'onEdgeDoubleClick'
+  | 'defaultMarkerColor'
+  | 'onlyRenderVisibleElements'
+  | 'onEdgeUpdate'
+  | 'onEdgeContextMenu'
+  | 'onEdgeMouseEnter'
+  | 'onEdgeMouseMove'
+  | 'onEdgeMouseLeave'
+  | 'onEdgeUpdateStart'
+  | 'onEdgeUpdateEnd'
+  | 'edgeUpdaterRadius'
+  | 'noPanClassName'
+  | 'elevateEdgesOnSelect'
+  | 'rfId'
+  | 'disableKeyboardA11y'
+> & {
   elevateEdgesOnSelect: boolean;
-}
+};
 
 const selector = (s: ReactFlowState) => ({
   connectionNodeId: s.connectionNodeId,

packages/core/src/container/EdgeRenderer/utils.ts

@@ -1,19 +1,20 @@
-import { ComponentType } from 'react';
+import type { ComponentType } from 'react';
+
 import { BezierEdge, SmoothStepEdge, StepEdge, StraightEdge, SimpleBezierEdge } from '../../components/Edges';
 import wrapEdge from '../../components/Edges/wrapEdge';
-import {
+import { internalsSymbol, rectToBox } from '../../utils';
+import { Position } from '../../types';
+import type {
   EdgeProps,
   EdgeTypes,
   EdgeTypesWrapped,
   HandleElement,
   NodeHandleBounds,
   Node,
-  Position,
   Rect,
   Transform,
   XYPosition,
 } from '../../types';
-import { internalsSymbol, rectToBox } from '../../utils';
 
 export type CreateEdgeTypes = (edgeTypes: EdgeTypes) => EdgeTypesWrapped;
 

packages/core/src/container/FlowRenderer/Pane.tsx

@@ -1,4 +1,4 @@
-import { MouseEvent } from 'react';
+import type { MouseEvent } from 'react';
 import cc from 'classcat';
 
 import { useStore } from '../../hooks/useStore';

packages/core/src/container/FlowRenderer/index.tsx

@@ -1,4 +1,5 @@
-import { memo, ReactNode, WheelEvent, MouseEvent } from 'react';
+import { memo } from 'react';
+import type { ReactNode, WheelEvent, MouseEvent } from 'react';
 
 import { useStore, useStoreApi } from '../../hooks/useStore';
 import useGlobalKeyHandler from '../../hooks/useGlobalKeyHandler';
@@ -8,8 +9,7 @@ import ZoomPane from '../ZoomPane';
 import UserSelection from '../../components/UserSelection';
 import NodesSelection from '../../components/NodesSelection';
 import Pane from './Pane';
-
-import { ReactFlowState } from '../../types';
+import type { ReactFlowState } from '../../types';
 
 export type FlowRendererProps = Omit<
   GraphViewProps,

packages/core/src/container/GraphView/index.tsx

@@ -5,39 +5,35 @@ import NodeRenderer from '../NodeRenderer';
 import EdgeRenderer from '../EdgeRenderer';
 import ViewportWrapper from '../Viewport';
 import useOnInitHandler from '../../hooks/useOnInitHandler';
-import {
-  NodeTypesWrapped,
-  EdgeTypesWrapped,
-  ConnectionLineType,
-  KeyCode,
-  ReactFlowProps,
-  Viewport,
-  CoordinateExtent,
-  NodeOrigin,
-} from '../../types';
+import type { EdgeTypesWrapped, NodeTypesWrapped, ReactFlowProps } from '../../types';
 
-export interface GraphViewProps
-  extends Omit<ReactFlowProps, 'onSelectionChange' | 'nodes' | 'edges' | 'nodeTypes' | 'edgeTypes'> {
-  nodeTypes: NodeTypesWrapped;
-  edgeTypes: EdgeTypesWrapped;
-  selectionKeyCode: KeyCode | null;
-  deleteKeyCode: KeyCode | null;
-  multiSelectionKeyCode: KeyCode | null;
-  connectionLineType: ConnectionLineType;
-  onlyRenderVisibleElements: boolean;
-  translateExtent: CoordinateExtent;
-  minZoom: number;
-  maxZoom: number;
-  defaultMarkerColor: string;
-  selectNodesOnDrag: boolean;
-  noDragClassName: string;
-  noWheelClassName: string;
-  noPanClassName: string;
-  defaultViewport: Viewport;
-  rfId: string;
-  disableKeyboardA11y: boolean;
-  nodeOrigin: NodeOrigin;
-}
+export type GraphViewProps = Omit<ReactFlowProps, 'onSelectionChange' | 'nodes' | 'edges' | 'nodeTypes' | 'edgeTypes'> &
+  Required<
+    Pick<
+      ReactFlowProps,
+      | 'selectionKeyCode'
+      | 'deleteKeyCode'
+      | 'multiSelectionKeyCode'
+      | 'connectionLineType'
+      | 'onlyRenderVisibleElements'
+      | 'translateExtent'
+      | 'minZoom'
+      | 'maxZoom'
+      | 'defaultMarkerColor'
+      | 'selectNodesOnDrag'
+      | 'noDragClassName'
+      | 'noDragClassName'
+      | 'noWheelClassName'
+      | 'noPanClassName'
+      | 'defaultViewport'
+      | 'disableKeyboardA11y'
+      | 'nodeOrigin'
+    >
+  > & {
+    nodeTypes: NodeTypesWrapped;
+    edgeTypes: EdgeTypesWrapped;
+    rfId: string;
+  };
 
 const GraphView = ({
   nodeTypes,

packages/core/src/container/NodeRenderer/index.tsx

@@ -1,4 +1,5 @@
-import { memo, useMemo, ComponentType, useEffect, useRef } from 'react';
+import { memo, useMemo, useEffect, useRef } from 'react';
+import type { ComponentType } from 'react';
 import shallow from 'zustand/shallow';
 
 import useVisibleNodes from '../../hooks/useVisibleNodes';
@@ -6,8 +7,9 @@ import { useStore } from '../../hooks/useStore';
 import { clampPosition, devWarn, internalsSymbol } from '../../utils';
 import { containerStyle } from '../../styles';
 import { GraphViewProps } from '../GraphView';
-import { Position, ReactFlowState, WrapNodeProps } from '../../types';
 import { getPositionWithOrigin } from './utils';
+import { Position } from '../../types';
+import type { ReactFlowState, WrapNodeProps } from '../../types';
 
 type NodeRendererProps = Pick<
   GraphViewProps,

packages/core/src/container/NodeRenderer/utils.ts

@@ -1,12 +1,12 @@
-import { ComponentType } from 'react';
+import type { ComponentType } from 'react';
 
 import DefaultNode from '../../components/Nodes/DefaultNode';
 import InputNode from '../../components/Nodes/InputNode';
 import OutputNode from '../../components/Nodes/OutputNode';
 import GroupNode from '../../components/Nodes/GroupNode';
 import wrapNode from '../../components/Nodes/wrapNode';
-import { NodeTypes, NodeProps, NodeTypesWrapped, NodeOrigin, XYPosition } from '../../types';
 import { devWarn } from '../../utils';
+import type { NodeTypes, NodeProps, NodeTypesWrapped, NodeOrigin, XYPosition } from '../../types';
 
 export type CreateNodeTypes = (nodeTypes: NodeTypes) => NodeTypesWrapped;
 

packages/core/src/container/ReactFlow/Wrapper.tsx

@@ -1,4 +1,4 @@
-import { FC, PropsWithChildren } from 'react';
+import type { FC, PropsWithChildren } from 'react';
 
 import { useStoreApi } from '../../hooks/useStore';
 import ReactFlowProvider from '../../components/ReactFlowProvider';

packages/core/src/container/ReactFlow/index.tsx

@@ -1,4 +1,5 @@
-import { CSSProperties, forwardRef } from 'react';
+import { forwardRef } from 'react';
+import type { CSSProperties } from 'react';
 import cc from 'classcat';
 
 import Attribution from '../../components/Attribution';
@@ -9,27 +10,24 @@ import OutputNode from '../../components/Nodes/OutputNode';
 import GroupNode from '../../components/Nodes/GroupNode';
 import SelectionListener from '../../components/SelectionListener';
 import StoreUpdater from '../../components/StoreUpdater';
-
-import {
-  ConnectionLineType,
-  ConnectionMode,
+import A11yDescriptions from '../../components/A11yDescriptions';
+import { createEdgeTypes } from '../EdgeRenderer/utils';
+import { createNodeTypes } from '../NodeRenderer/utils';
+import GraphView from '../GraphView';
+import Wrapper from './Wrapper';
+import { infiniteExtent } from '../../store/initialState';
+import { useNodeOrEdgeTypes } from './utils';
+import { ConnectionLineType, ConnectionMode, PanOnScrollMode } from '../../types';
+import type {
   EdgeTypes,
   EdgeTypesWrapped,
   NodeOrigin,
   NodeTypes,
   NodeTypesWrapped,
-  PanOnScrollMode,
   ReactFlowProps,
   ReactFlowRefType,
   Viewport,
 } from '../../types';
-import { createEdgeTypes } from '../EdgeRenderer/utils';
-import GraphView from '../GraphView';
-import { createNodeTypes } from '../NodeRenderer/utils';
-import { useNodeOrEdgeTypes } from './utils';
-import Wrapper from './Wrapper';
-import A11yDescriptions from '../../components/A11yDescriptions';
-import { infiniteExtent } from '../../store/initialState';
 
 const defaultNodeTypes: NodeTypes = {
   input: InputNode,

packages/core/src/container/ReactFlow/utils.ts

@@ -1,10 +1,10 @@
 import { useMemo, useRef } from 'react';
 import shallow from 'zustand/shallow';
 
-import { EdgeTypes, EdgeTypesWrapped, NodeTypes, NodeTypesWrapped } from '../../types';
 import { devWarn } from '../../utils';
 import { CreateEdgeTypes } from '../EdgeRenderer/utils';
 import { CreateNodeTypes } from '../NodeRenderer/utils';
+import type { EdgeTypes, EdgeTypesWrapped, NodeTypes, NodeTypesWrapped } from '../../types';
 
 export function useNodeOrEdgeTypes(nodeOrEdgeTypes: NodeTypes, createTypes: CreateNodeTypes): NodeTypesWrapped;
 export function useNodeOrEdgeTypes(nodeOrEdgeTypes: EdgeTypes, createTypes: CreateEdgeTypes): EdgeTypesWrapped;

packages/core/src/container/Viewport/index.tsx

@@ -1,7 +1,7 @@
-import { ReactNode } from 'react';
+import type { ReactNode } from 'react';
 
 import { useStore } from '../../hooks/useStore';
-import { ReactFlowState } from '../../types';
+import type { ReactFlowState } from '../../types';
 
 const selector = (s: ReactFlowState) => `translate(${s.transform[0]}px,${s.transform[1]}px) scale(${s.transform[2]})`;
 

packages/core/src/container/ZoomPane/index.tsx

@@ -1,6 +1,7 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import { useEffect, useRef } from 'react';
-import { D3ZoomEvent, zoom, zoomIdentity } from 'd3-zoom';
+import { zoom, zoomIdentity } from 'd3-zoom';
+import type { D3ZoomEvent } from 'd3-zoom';
 import { select, pointer } from 'd3-selection';
 import shallow from 'zustand/shallow';
 
@@ -8,9 +9,10 @@ import { clamp } from '../../utils';
 import useKeyPress from '../../hooks/useKeyPress';
 import useResizeHandler from '../../hooks/useResizeHandler';
 import { useStore, useStoreApi } from '../../hooks/useStore';
-import { FlowRendererProps } from '../FlowRenderer';
 import { containerStyle } from '../../styles';
-import { Viewport, PanOnScrollMode, ReactFlowState } from '../../types';
+import type { FlowRendererProps } from '../FlowRenderer';
+import { PanOnScrollMode } from '../../types';
+import type { Viewport, ReactFlowState } from '../../types';
 
 type ZoomPaneProps = Omit<
   FlowRendererProps,