refactor(react/svelte): cleanup types

packages/system/src/constants.ts

@@ -1,4 +1,4 @@
-import { Edge, HandleElement } from './types';
+import { BaseEdge, HandleElement } from './types';
 
 export const errorMessages = {
   '001': () =>
@@ -11,7 +11,7 @@ export const errorMessages = {
   '006': () => "Can't create edge. An edge needs a source and a target.",
   '007': (id: string) => `The old edge with id=${id} does not exist.`,
   '009': (type: string) => `Marker type "${type}" doesn't exist.`,
-  '008': (sourceHandle: HandleElement | null, edge: Edge) =>
+  '008': (sourceHandle: HandleElement | null, edge: BaseEdge) =>
     `Couldn't create edge for ${!sourceHandle ? 'source' : 'target'} handle id: "${
       !sourceHandle ? edge.sourceHandle : edge.targetHandle
     }", edge id: ${edge.id}.`,

packages/system/src/types/changes.ts

@@ -1,62 +0,0 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
-
-import type { XYPosition, Dimensions } from './utils';
-import type { Node } from './nodes';
-import type { Edge } from './edges';
-
-export type NodeDimensionChange = {
-  id: string;
-  type: 'dimensions';
-  dimensions?: Dimensions;
-  updateStyle?: boolean;
-  resizing?: boolean;
-};
-
-export type NodePositionChange = {
-  id: string;
-  type: 'position';
-  position?: XYPosition;
-  positionAbsolute?: XYPosition;
-  dragging?: boolean;
-};
-
-export type NodeSelectionChange = {
-  id: string;
-  type: 'select';
-  selected: boolean;
-};
-
-export type NodeRemoveChange = {
-  id: string;
-  type: 'remove';
-};
-
-export type NodeAddChange<NodeData = any> = {
-  item: Node<NodeData>;
-  type: 'add';
-};
-
-export type NodeResetChange<NodeData = any> = {
-  item: Node<NodeData>;
-  type: 'reset';
-};
-
-export type NodeChange =
-  | NodeDimensionChange
-  | NodePositionChange
-  | NodeSelectionChange
-  | NodeRemoveChange
-  | NodeAddChange
-  | NodeResetChange;
-
-export type EdgeSelectionChange = NodeSelectionChange;
-export type EdgeRemoveChange = NodeRemoveChange;
-export type EdgeAddChange<EdgeData = any> = {
-  item: Edge<EdgeData>;
-  type: 'add';
-};
-export type EdgeResetChange<EdgeData = any> = {
-  item: Edge<EdgeData>;
-  type: 'reset';
-};
-export type EdgeChange = EdgeSelectionChange | EdgeRemoveChange | EdgeAddChange | EdgeResetChange;

packages/system/src/types/component-props.ts

@@ -1,149 +0,0 @@
-import type { CSSProperties, HTMLAttributes, MouseEvent as ReactMouseEvent, WheelEvent } from 'react';
-
-import type {
-  OnSelectionChangeFunc,
-  NodeTypes,
-  EdgeTypes,
-  Node,
-  Edge,
-  ConnectionMode,
-  ConnectionLineType,
-  ConnectionLineComponent,
-  OnConnectStart,
-  OnConnectEnd,
-  OnConnect,
-  CoordinateExtent,
-  KeyCode,
-  PanOnScrollMode,
-  OnEdgeUpdateFunc,
-  OnInit,
-  ProOptions,
-  PanelPosition,
-  DefaultEdgeOptions,
-  FitViewOptions,
-  OnNodesDelete,
-  OnEdgesDelete,
-  OnNodesChange,
-  OnEdgesChange,
-  OnMove,
-  OnMoveStart,
-  OnMoveEnd,
-  NodeDragHandler,
-  NodeMouseHandler,
-  SelectionDragHandler,
-  Viewport,
-  NodeOrigin,
-  EdgeMouseHandler,
-  HandleType,
-  SelectionMode,
-  OnError,
-} from '.';
-
-export type ReactFlowProps = HTMLAttributes<HTMLDivElement> & {
-  nodes?: Node[];
-  edges?: Edge[];
-  defaultNodes?: Node[];
-  defaultEdges?: Edge[];
-  defaultEdgeOptions?: DefaultEdgeOptions;
-  onNodeClick?: NodeMouseHandler;
-  onNodeDoubleClick?: NodeMouseHandler;
-  onNodeMouseEnter?: NodeMouseHandler;
-  onNodeMouseMove?: NodeMouseHandler;
-  onNodeMouseLeave?: NodeMouseHandler;
-  onNodeContextMenu?: NodeMouseHandler;
-  onNodeDragStart?: NodeDragHandler;
-  onNodeDrag?: NodeDragHandler;
-  onNodeDragStop?: NodeDragHandler;
-  onEdgeClick?: (event: ReactMouseEvent, node: Edge) => void;
-  onEdgeUpdate?: OnEdgeUpdateFunc;
-  onEdgeContextMenu?: EdgeMouseHandler;
-  onEdgeMouseEnter?: EdgeMouseHandler;
-  onEdgeMouseMove?: EdgeMouseHandler;
-  onEdgeMouseLeave?: EdgeMouseHandler;
-  onEdgeDoubleClick?: EdgeMouseHandler;
-  onEdgeUpdateStart?: (event: ReactMouseEvent, edge: Edge, handleType: HandleType) => void;
-  onEdgeUpdateEnd?: (event: MouseEvent | TouchEvent, edge: Edge, handleType: HandleType) => void;
-  onNodesChange?: OnNodesChange;
-  onEdgesChange?: OnEdgesChange;
-  onNodesDelete?: OnNodesDelete;
-  onEdgesDelete?: OnEdgesDelete;
-  onSelectionDragStart?: SelectionDragHandler;
-  onSelectionDrag?: SelectionDragHandler;
-  onSelectionDragStop?: SelectionDragHandler;
-  onSelectionStart?: (event: ReactMouseEvent) => void;
-  onSelectionEnd?: (event: ReactMouseEvent) => void;
-  onSelectionContextMenu?: (event: ReactMouseEvent, nodes: Node[]) => void;
-  onConnect?: OnConnect;
-  onConnectStart?: OnConnectStart;
-  onConnectEnd?: OnConnectEnd;
-  onClickConnectStart?: OnConnectStart;
-  onClickConnectEnd?: OnConnectEnd;
-  onInit?: OnInit;
-  onMove?: OnMove;
-  onMoveStart?: OnMoveStart;
-  onMoveEnd?: OnMoveEnd;
-  onSelectionChange?: OnSelectionChangeFunc;
-  onPaneScroll?: (event?: WheelEvent) => void;
-  onPaneClick?: (event: ReactMouseEvent) => void;
-  onPaneContextMenu?: (event: ReactMouseEvent) => void;
-  onPaneMouseEnter?: (event: ReactMouseEvent) => void;
-  onPaneMouseMove?: (event: ReactMouseEvent) => void;
-  onPaneMouseLeave?: (event: ReactMouseEvent) => void;
-  nodeTypes?: NodeTypes;
-  edgeTypes?: EdgeTypes;
-  connectionLineType?: ConnectionLineType;
-  connectionLineStyle?: CSSProperties;
-  connectionLineComponent?: ConnectionLineComponent;
-  connectionLineContainerStyle?: CSSProperties;
-  connectionMode?: ConnectionMode;
-  deleteKeyCode?: KeyCode | null;
-  selectionKeyCode?: KeyCode | null;
-  selectionOnDrag?: boolean;
-  selectionMode?: SelectionMode;
-  panActivationKeyCode?: KeyCode | null;
-  multiSelectionKeyCode?: KeyCode | null;
-  zoomActivationKeyCode?: KeyCode | null;
-  snapToGrid?: boolean;
-  snapGrid?: [number, number];
-  onlyRenderVisibleElements?: boolean;
-  nodesDraggable?: boolean;
-  nodesConnectable?: boolean;
-  nodesFocusable?: boolean;
-  nodeOrigin?: NodeOrigin;
-  edgesFocusable?: boolean;
-  initNodeOrigin?: NodeOrigin;
-  elementsSelectable?: boolean;
-  selectNodesOnDrag?: boolean;
-  panOnDrag?: boolean | number[];
-  minZoom?: number;
-  maxZoom?: number;
-  defaultViewport?: Viewport;
-  translateExtent?: CoordinateExtent;
-  preventScrolling?: boolean;
-  nodeExtent?: CoordinateExtent;
-  defaultMarkerColor?: string;
-  zoomOnScroll?: boolean;
-  zoomOnPinch?: boolean;
-  panOnScroll?: boolean;
-  panOnScrollSpeed?: number;
-  panOnScrollMode?: PanOnScrollMode;
-  zoomOnDoubleClick?: boolean;
-  edgeUpdaterRadius?: number;
-  noDragClassName?: string;
-  noWheelClassName?: string;
-  noPanClassName?: string;
-  fitView?: boolean;
-  fitViewOptions?: FitViewOptions;
-  connectOnClick?: boolean;
-  attributionPosition?: PanelPosition;
-  proOptions?: ProOptions;
-  elevateNodesOnSelect?: boolean;
-  elevateEdgesOnSelect?: boolean;
-  disableKeyboardA11y?: boolean;
-  autoPanOnNodeDrag?: boolean;
-  autoPanOnConnect?: boolean;
-  connectionRadius?: number;
-  onError?: OnError;
-};
-
-export type ReactFlowRefType = HTMLDivElement;

packages/system/src/types/edges.ts

@@ -1,34 +1,15 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
-import type { CSSProperties, ComponentType, HTMLAttributes, ReactNode, MouseEvent as ReactMouseEvent } from 'react';
-
-import { ConnectionStatus, Position } from '.';
-import type { Connection, HandleElement, HandleType, Node } from '.';
-
-type EdgeLabelOptions = {
-  label?: string | ReactNode;
-  labelStyle?: CSSProperties;
-  labelShowBg?: boolean;
-  labelBgStyle?: CSSProperties;
-  labelBgPadding?: [number, number];
-  labelBgBorderRadius?: number;
-};
-
-// interface for the user edge items
-type DefaultEdge<T = any> = {
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export type BaseEdge<EdgeData = any> = {
   id: string;
   type?: string;
   source: string;
   target: string;
   sourceHandle?: string | null;
   targetHandle?: string | null;
-  style?: CSSProperties;
   animated?: boolean;
   hidden?: boolean;
   deletable?: boolean;
-  data?: T;
-  className?: string;
-  sourceNode?: Node;
-  targetNode?: Node;
+  data?: EdgeData;
   selected?: boolean;
   markerStart?: EdgeMarkerType;
   markerEnd?: EdgeMarkerType;
@@ -36,106 +17,22 @@ type DefaultEdge<T = any> = {
   ariaLabel?: string;
   interactionWidth?: number;
   focusable?: boolean;
-} & EdgeLabelOptions;
+};
 
 export type SmoothStepPathOptions = {
   offset?: number;
   borderRadius?: number;
 };
 
-type SmoothStepEdgeType<T> = DefaultEdge<T> & {
-  type: 'smoothstep';
-  pathOptions?: SmoothStepPathOptions;
-};
-
 export type BezierPathOptions = {
   curvature?: number;
 };
 
-type BezierEdgeType<T> = DefaultEdge<T> & {
-  type: 'default';
-  pathOptions?: BezierPathOptions;
-};
-
-export type Edge<T = any> = DefaultEdge<T> | SmoothStepEdgeType<T> | BezierEdgeType<T>;
-
-export type DefaultEdgeOptions = Omit<
-  Edge,
+export type DefaultEdgeOptionsBase<EdgeType extends BaseEdge> = Omit<
+  EdgeType,
   'id' | 'source' | 'target' | 'sourceHandle' | 'targetHandle' | 'sourceNode' | 'targetNode'
 >;
 
-export type EdgeMouseHandler = (event: ReactMouseEvent, edge: Edge) => void;
-
-export type WrapEdgeProps<T = any> = Omit<Edge<T>, 'sourceHandle' | 'targetHandle'> & {
-  onClick?: EdgeMouseHandler;
-  onEdgeDoubleClick?: EdgeMouseHandler;
-  sourceHandleId?: string | null;
-  targetHandleId?: string | null;
-  sourceX: number;
-  sourceY: number;
-  targetX: number;
-  targetY: number;
-  sourcePosition: Position;
-  targetPosition: Position;
-  elementsSelectable?: boolean;
-  onEdgeUpdate?: OnEdgeUpdateFunc;
-  onContextMenu?: EdgeMouseHandler;
-  onMouseEnter?: EdgeMouseHandler;
-  onMouseMove?: EdgeMouseHandler;
-  onMouseLeave?: EdgeMouseHandler;
-  edgeUpdaterRadius?: number;
-  onEdgeUpdateStart?: (event: ReactMouseEvent, edge: Edge, handleType: HandleType) => void;
-  onEdgeUpdateEnd?: (event: MouseEvent | TouchEvent, edge: Edge, handleType: HandleType) => void;
-  rfId?: string;
-  isFocusable: boolean;
-  pathOptions?: BezierPathOptions | SmoothStepPathOptions;
-};
-
-// props that get passed to a custom edge
-export type EdgeProps<T = any> = Pick<
-  Edge<T>,
-  'id' | 'animated' | 'data' | 'style' | 'selected' | 'source' | 'target'
-> &
-  Pick<
-    WrapEdgeProps,
-    | 'sourceX'
-    | 'sourceY'
-    | 'targetX'
-    | 'targetY'
-    | 'sourcePosition'
-    | 'targetPosition'
-    | 'sourceHandleId'
-    | 'targetHandleId'
-    | 'interactionWidth'
-  > &
-  EdgeLabelOptions & {
-    markerStart?: string;
-    markerEnd?: string;
-    // @TODO: how can we get better types for pathOptions?
-    pathOptions?: any;
-  };
-
-export type BaseEdgeProps = Pick<EdgeProps, 'style' | 'markerStart' | 'markerEnd' | 'interactionWidth'> &
-  EdgeLabelOptions & {
-    labelX?: number;
-    labelY?: number;
-    path: string;
-  };
-
-export type SmoothStepEdgeProps<T = any> = EdgeProps<T> & {
-  pathOptions?: SmoothStepPathOptions;
-};
-
-export type BezierEdgeProps<T = any> = EdgeProps<T> & {
-  pathOptions?: BezierPathOptions;
-};
-
-export type EdgeTextProps = HTMLAttributes<SVGElement> &
-  EdgeLabelOptions & {
-    x: number;
-    y: number;
-  };
-
 export enum ConnectionLineType {
   Bezier = 'default',
   Straight = 'straight',
@@ -144,24 +41,6 @@ export enum ConnectionLineType {
   SimpleBezier = 'simplebezier',
 }
 
-export type ConnectionLineComponentProps = {
-  connectionLineStyle?: CSSProperties;
-  connectionLineType: ConnectionLineType;
-  fromNode?: Node;
-  fromHandle?: HandleElement;
-  fromX: number;
-  fromY: number;
-  toX: number;
-  toY: number;
-  fromPosition: Position;
-  toPosition: Position;
-  connectionStatus: ConnectionStatus | null;
-};
-
-export type ConnectionLineComponent = ComponentType<ConnectionLineComponentProps>;
-
-export type OnEdgeUpdateFunc<T = any> = (oldEdge: Edge<T>, newConnection: Connection) => void;
-
 export type EdgeMarker = {
   type: MarkerType;
   color?: string;

packages/system/src/types/general.ts

@@ -1,45 +1,12 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
-import type {
-  MouseEvent as ReactMouseEvent,
-  TouchEvent as ReactTouchEvent,
-  ComponentType,
-  MemoExoticComponent,
-} from 'react';
 import type { D3DragEvent, Selection as D3Selection, SubjectPosition, ZoomBehavior } from 'd3';
 
-import type { XYPosition, Rect, Transform, CoordinateExtent } from './utils';
-import type { NodeChange, EdgeChange } from './changes';
-import type {
-  Node,
-  NodeInternals,
-  NodeDimensionUpdate,
-  NodeProps,
-  WrapNodeProps,
-  NodeDragItem,
-  NodeDragHandler,
-  SelectionDragHandler,
-  NodeOrigin,
-} from './nodes';
-import type { Edge, EdgeProps, WrapEdgeProps } from './edges';
-import type { HandleType, StartHandle } from './handles';
-import type { DefaultEdgeOptions } from '.';
-import type { ReactFlowInstance } from './instance';
-
-export type NodeTypes = { [key: string]: ComponentType<NodeProps> };
-export type NodeTypesWrapped = { [key: string]: MemoExoticComponent<ComponentType<WrapNodeProps>> };
-export type EdgeTypes = { [key: string]: ComponentType<EdgeProps> };
-export type EdgeTypesWrapped = { [key: string]: MemoExoticComponent<ComponentType<WrapEdgeProps>> };
-
-export type FitView = (fitViewOptions?: FitViewOptions) => boolean;
+import type { XYPosition, Rect } from './utils';
+import type { BaseNode, NodeOrigin } from './nodes';
+import type { HandleType } from './handles';
 
 export type Project = (position: XYPosition) => XYPosition;
 
-export type OnNodesChange = (changes: NodeChange[]) => void;
-export type OnEdgesChange = (changes: EdgeChange[]) => void;
-
-export type OnNodesDelete = (nodes: Node[]) => void;
-export type OnEdgesDelete = (edges: Edge[]) => void;
-
 export type OnMove = (event: MouseEvent | TouchEvent, viewport: Viewport) => void;
 export type OnMoveStart = OnMove;
 export type OnMoveEnd = OnMove;
@@ -52,8 +19,6 @@ export type SetViewport = (viewport: Viewport, options?: ViewportHelperFunctionO
 export type SetCenter = (x: number, y: number, options?: SetCenterOptions) => void;
 export type FitBounds = (bounds: Rect, options?: FitBoundsOptions) => void;
 
-export type OnInit<NodeData = any, EdgeData = any> = (reactFlowInstance: ReactFlowInstance<NodeData, EdgeData>) => void;
-
 export interface Connection {
   source: string | null;
   target: string | null;
@@ -70,8 +35,8 @@ export enum ConnectionMode {
 
 export type OnConnect = (connection: Connection) => void;
 
-export type FitViewParams = {
-  nodes: Node[];
+export type FitViewParamsBase<NodeType extends BaseNode> = {
+  nodes: NodeType[];
   width: number;
   height: number;
   nodeOrigin: NodeOrigin;
@@ -81,13 +46,13 @@ export type FitViewParams = {
   maxZoom: number;
 };
 
-export type FitViewOptions = {
+export type FitViewOptionsBase<NodeType extends BaseNode> = {
   padding?: number;
   includeHiddenNodes?: boolean;
   minZoom?: number;
   maxZoom?: number;
   duration?: number;
-  nodes?: (Partial<Node> & { id: Node['id'] })[];
+  nodes?: (Partial<NodeType> & { id: NodeType['id'] })[];
 };
 
 export type OnConnectStartParams = {
@@ -96,9 +61,6 @@ export type OnConnectStartParams = {
   handleType: HandleType | null;
 };
 
-export type OnConnectStart = (event: ReactMouseEvent | ReactTouchEvent, params: OnConnectStartParams) => void;
-export type OnConnectEnd = (event: MouseEvent | TouchEvent) => void;
-
 export type Viewport = {
   x: number;
   y: number;
@@ -127,150 +89,13 @@ export type FitBoundsOptions = ViewportHelperFunctionOptions & {
   padding?: number;
 };
 
-export type UnselectNodesAndEdgesParams = {
-  nodes?: Node[];
-  edges?: Edge[];
-};
-
 export type OnViewportChange = (viewport: Viewport) => void;
 
-export type ViewportHelperFunctions = {
-  zoomIn: ZoomInOut;
-  zoomOut: ZoomInOut;
-  zoomTo: ZoomTo;
-  getZoom: GetZoom;
-  setViewport: SetViewport;
-  getViewport: GetViewport;
-  fitView: FitView;
-  setCenter: SetCenter;
-  fitBounds: FitBounds;
-  project: Project;
-  viewportInitialized: boolean;
-};
-
 export type D3ZoomInstance = ZoomBehavior<Element, unknown>;
 export type D3SelectionInstance = D3Selection<Element, unknown, null, undefined>;
 
-export type ReactFlowStore = {
-  rfId: string;
-  width: number;
-  height: number;
-  transform: Transform;
-  nodeInternals: NodeInternals;
-  edges: Edge[];
-  onNodesChange: OnNodesChange | null;
-  onEdgesChange: OnEdgesChange | null;
-  hasDefaultNodes: boolean;
-  hasDefaultEdges: boolean;
-  domNode: HTMLDivElement | null;
-  paneDragging: boolean;
-  noPanClassName: string;
-
-  d3Zoom: D3ZoomInstance | null;
-  d3Selection: D3SelectionInstance | null;
-  d3ZoomHandler: ((this: Element, event: any, d: unknown) => void) | undefined;
-  minZoom: number;
-  maxZoom: number;
-  translateExtent: CoordinateExtent;
-  nodeExtent: CoordinateExtent;
-  nodeOrigin: NodeOrigin;
-
-  nodesSelectionActive: boolean;
-  userSelectionActive: boolean;
-  userSelectionRect: SelectionRect | null;
-
-  connectionNodeId: string | null;
-  connectionHandleId: string | null;
-  connectionHandleType: HandleType | null;
-  connectionPosition: XYPosition;
-  connectionStatus: ConnectionStatus | null;
-  connectionMode: ConnectionMode;
-
-  snapToGrid: boolean;
-  snapGrid: SnapGrid;
-
-  nodesDraggable: boolean;
-  nodesConnectable: boolean;
-  nodesFocusable: boolean;
-  edgesFocusable: boolean;
-  elementsSelectable: boolean;
-  elevateNodesOnSelect: boolean;
-
-  multiSelectionActive: boolean;
-
-  connectionStartHandle: StartHandle | null;
-
-  onNodeDragStart?: NodeDragHandler;
-  onNodeDrag?: NodeDragHandler;
-  onNodeDragStop?: NodeDragHandler;
-
-  onSelectionDragStart?: SelectionDragHandler;
-  onSelectionDrag?: SelectionDragHandler;
-  onSelectionDragStop?: SelectionDragHandler;
-
-  onConnect?: OnConnect;
-  onConnectStart?: OnConnectStart;
-  onConnectEnd?: OnConnectEnd;
-
-  onClickConnectStart?: OnConnectStart;
-  onClickConnectEnd?: OnConnectEnd;
-
-  connectOnClick: boolean;
-  defaultEdgeOptions?: DefaultEdgeOptions;
-
-  fitViewOnInit: boolean;
-  fitViewOnInitDone: boolean;
-  fitViewOnInitOptions: FitViewOptions | undefined;
-
-  onNodesDelete?: OnNodesDelete;
-  onEdgesDelete?: OnEdgesDelete;
-  onError?: OnError;
-
-  // event handlers
-  onViewportChangeStart?: OnViewportChange;
-  onViewportChange?: OnViewportChange;
-  onViewportChangeEnd?: OnViewportChange;
-
-  onSelectionChange?: OnSelectionChangeFunc;
-
-  ariaLiveMessage: string;
-  autoPanOnConnect: boolean;
-  autoPanOnNodeDrag: boolean;
-  connectionRadius: number;
-};
-
-export type ReactFlowActions = {
-  setNodes: (nodes: Node[]) => void;
-  getNodes: () => Node[];
-  setEdges: (edges: Edge[]) => void;
-  setDefaultNodesAndEdges: (nodes?: Node[], edges?: Edge[]) => void;
-  updateNodeDimensions: (updates: NodeDimensionUpdate[]) => void;
-  updateNodePositions: (nodeDragItems: NodeDragItem[] | Node[], positionChanged: boolean, dragging: boolean) => void;
-  resetSelectedElements: () => void;
-  unselectNodesAndEdges: (params?: UnselectNodesAndEdgesParams) => void;
-  addSelectedNodes: (nodeIds: string[]) => void;
-  addSelectedEdges: (edgeIds: string[]) => void;
-  setMinZoom: (minZoom: number) => void;
-  setMaxZoom: (maxZoom: number) => void;
-  setTranslateExtent: (translateExtent: CoordinateExtent) => void;
-  setNodeExtent: (nodeExtent: CoordinateExtent) => void;
-  cancelConnection: () => void;
-  reset: () => void;
-  triggerNodeChanges: (changes: NodeChange[]) => void;
-  panBy: (delta: XYPosition) => void;
-};
-
-export type ReactFlowState = ReactFlowStore & ReactFlowActions;
-
 export type UpdateNodeInternals = (nodeId: string) => void;
 
-export type OnSelectionChangeParams = {
-  nodes: Node[];
-  edges: Edge[];
-};
-
-export type OnSelectionChangeFunc = (params: OnSelectionChangeParams) => void;
-
 export type PanelPosition = 'top-left' | 'top-center' | 'top-right' | 'bottom-left' | 'bottom-center' | 'bottom-right';
 
 export type ProOptions = {

packages/system/src/types/handles.ts

@@ -2,22 +2,23 @@ import type { XYPosition, Position, Dimensions, OnConnect, Connection } from '.'
 
 export type HandleType = 'source' | 'target';
 
-export interface HandleElement extends XYPosition, Dimensions {
-  id?: string | null;
-  position: Position;
-}
+export type HandleElement = XYPosition &
+  Dimensions & {
+    id?: string | null;
+    position: Position;
+  };
 
-export interface StartHandle {
+export type StartHandle = {
   nodeId: string;
   type: HandleType;
   handleId?: string | null;
-}
+};
 
-export interface HandleProps {
+export type HandleProps = {
   type: HandleType;
   position: Position;
   isConnectable?: boolean;
   onConnect?: OnConnect;
   isValidConnection?: (connection: Connection) => boolean;
   id?: string;
-}
+};

packages/system/src/types/index.ts

@@ -2,7 +2,4 @@ export * from './general';
 export * from './nodes';
 export * from './edges';
 export * from './handles';
-export * from './changes';
 export * from './utils';
-export * from './instance';
-export * from './component-props';

packages/system/src/types/instance.ts

@@ -1,56 +0,0 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
-/* eslint-disable @typescript-eslint/no-namespace */
-import { ViewportHelperFunctions, Viewport, Node, Edge, Rect } from '.';
-
-export type ReactFlowJsonObject<NodeData = any, EdgeData = any> = {
-  nodes: Node<NodeData>[];
-  edges: Edge<EdgeData>[];
-  viewport: Viewport;
-};
-
-export type DeleteElementsOptions = {
-  nodes?: (Partial<Node> & { id: Node['id'] })[];
-  edges?: (Partial<Edge> & { id: Edge['id'] })[];
-};
-export namespace Instance {
-  export type GetNodes<NodeData> = () => Node<NodeData>[];
-  export type SetNodes<NodeData> = (
-    payload: Node<NodeData>[] | ((nodes: Node<NodeData>[]) => Node<NodeData>[])
-  ) => void;
-  export type AddNodes<NodeData> = (payload: Node<NodeData>[] | Node<NodeData>) => void;
-  export type GetNode<NodeData> = (id: string) => Node<NodeData> | undefined;
-  export type GetEdges<EdgeData> = () => Edge<EdgeData>[];
-  export type SetEdges<EdgeData> = (
-    payload: Edge<EdgeData>[] | ((edges: Edge<EdgeData>[]) => Edge<EdgeData>[])
-  ) => void;
-  export type GetEdge<EdgeData> = (id: string) => Edge<EdgeData> | undefined;
-  export type AddEdges<EdgeData> = (payload: Edge<EdgeData>[] | Edge<EdgeData>) => void;
-  export type ToObject<NodeData = any, EdgeData = any> = () => ReactFlowJsonObject<NodeData, EdgeData>;
-  export type DeleteElements = ({ nodes, edges }: DeleteElementsOptions) => void;
-  export type GetIntersectingNodes<NodeData> = (
-    node: (Partial<Node<NodeData>> & { id: Node['id'] }) | Rect,
-    partially?: boolean,
-    nodes?: Node<NodeData>[]
-  ) => Node<NodeData>[];
-  export type IsNodeIntersecting<NodeData> = (
-    node: (Partial<Node<NodeData>> & { id: Node['id'] }) | Rect,
-    area: Rect,
-    partially?: boolean
-  ) => boolean;
-}
-
-export type ReactFlowInstance<NodeData = any, EdgeData = any> = {
-  getNodes: Instance.GetNodes<NodeData>;
-  setNodes: Instance.SetNodes<NodeData>;
-  addNodes: Instance.AddNodes<NodeData>;
-  getNode: Instance.GetNode<NodeData>;
-  getEdges: Instance.GetEdges<EdgeData>;
-  setEdges: Instance.SetEdges<EdgeData>;
-  addEdges: Instance.AddEdges<EdgeData>;
-  getEdge: Instance.GetEdge<EdgeData>;
-  toObject: Instance.ToObject<NodeData, EdgeData>;
-  deleteElements: Instance.DeleteElements;
-  getIntersectingNodes: Instance.GetIntersectingNodes<NodeData>;
-  isNodeIntersecting: Instance.IsNodeIntersecting<NodeData>;
-  viewportInitialized: boolean;
-} & Omit<ViewportHelperFunctions, 'initialized'>;

packages/system/src/types/nodes.ts

@@ -1,17 +1,13 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
-import type { CSSProperties, MouseEvent as ReactMouseEvent } from 'react';
-
 import { internalsSymbol } from '../';
 import type { XYPosition, Position, CoordinateExtent, HandleElement } from '.';
 
-// interface for the user node items
-export type Node<T = any, U extends string | undefined = string | undefined> = {
+// this is stuff that all nodes share independent of the framework
+export type BaseNode<T = any, U extends string | undefined = string | undefined> = {
   id: string;
   position: XYPosition;
   data: T;
   type?: U;
-  style?: CSSProperties;
-  className?: string;
   sourcePosition?: Position;
   targetPosition?: Position;
   hidden?: boolean;
@@ -31,7 +27,6 @@ export type Node<T = any, U extends string | undefined = string | undefined> = {
   positionAbsolute?: XYPosition;
   ariaLabel?: string;
   focusable?: boolean;
-  resizing?: boolean;
 
   // only used internally
   [internalsSymbol]?: {
@@ -41,44 +36,17 @@ export type Node<T = any, U extends string | undefined = string | undefined> = {
   };
 };
 
-export type NodeMouseHandler = (event: ReactMouseEvent, node: Node) => void;
-export type NodeDragHandler = (event: ReactMouseEvent, node: Node, nodes: Node[]) => void;
-export type SelectionDragHandler = (event: ReactMouseEvent, nodes: Node[]) => void;
-
-export type WrapNodeProps<T = any> = Pick<
-  Node<T>,
-  'id' | 'data' | 'style' | 'className' | 'dragHandle' | 'sourcePosition' | 'targetPosition' | 'hidden' | 'ariaLabel'
-> &
-  Required<Pick<Node<T>, 'selected' | 'type' | 'zIndex'>> & {
-    isConnectable: boolean;
-    xPos: number;
-    yPos: number;
-    xPosOrigin: number;
-    yPosOrigin: number;
-    initialized: boolean;
-    isSelectable: boolean;
-    isDraggable: boolean;
-    isFocusable: boolean;
-    selectNodesOnDrag: boolean;
-    onClick?: NodeMouseHandler;
-    onDoubleClick?: NodeMouseHandler;
-    onMouseEnter?: NodeMouseHandler;
-    onMouseMove?: NodeMouseHandler;
-    onMouseLeave?: NodeMouseHandler;
-    onContextMenu?: NodeMouseHandler;
-    resizeObserver: ResizeObserver | null;
-    isParent: boolean;
-    noDragClassName: string;
-    noPanClassName: string;
-    rfId: string;
-    disableKeyboardA11y: boolean;
-  };
-
 // props that get passed to a custom node
-export type NodeProps<T = any> = Pick<
-  WrapNodeProps<T>,
-  'id' | 'data' | 'dragHandle' | 'type' | 'selected' | 'isConnectable' | 'xPos' | 'yPos' | 'zIndex'
-> & {
+export type NodeProps<T = any> = {
+  id: BaseNode['id'];
+  data: T;
+  dragHandle: BaseNode['dragHandle'];
+  type: BaseNode['type'];
+  selected: BaseNode['selected'];
+  isConnectable: BaseNode['connectable'];
+  zIndex: BaseNode['zIndex'];
+  xPos: number;
+  yPos: number;
   dragging: boolean;
   targetPosition?: Position;
   sourcePosition?: Position;
@@ -95,8 +63,6 @@ export type NodeDimensionUpdate = {
   forceUpdate?: boolean;
 };
 
-export type NodeInternals = Map<string, Node>;
-
 export type NodeBounds = XYPosition & {
   width: number | null;
   height: number | null;

packages/system/src/types/utils.ts

@@ -5,24 +5,24 @@ export enum Position {
   Bottom = 'bottom',
 }
 
-export interface XYPosition {
+export type XYPosition = {
   x: number;
   y: number;
-}
+};
 
 export type XYZPosition = XYPosition & { z: number };
 
-export interface Dimensions {
+export type Dimensions = {
   width: number;
   height: number;
-}
+};
 
-export interface Rect extends Dimensions, XYPosition {}
+export type Rect = Dimensions & XYPosition;
 
-export interface Box extends XYPosition {
+export type Box = XYPosition & {
   x2: number;
   y2: number;
-}
+};
 
 export type Transform = [number, number, number];