chore(system): rename BaseNode/BaseEdge types to NodeBase/EdgeBase

examples/vite-app/package.json

@@ -33,7 +33,7 @@
     "cypress": "12.14.0",
     "cypress-real-events": "1.8.1",
     "start-server-and-test": "^1.14.0",
-    "typescript": "^4.9.4",
+    "typescript": "5.1.3",
     "vite": "4.3.9"
   }
 }

package.json

@@ -37,6 +37,6 @@
     "rimraf": "^3.0.2",
     "rollup": "^3.23.0",
     "turbo": "^1.10.0",
-    "typescript": "^4.9.4"
+    "typescript": "5.1.3"
   }
 }

packages/react/package.json

@@ -55,14 +55,14 @@
     "react-dom": ">=17"
   },
   "devDependencies": {
-    "@xyflow/eslint-config": "workspace:*",
-    "@xyflow/rollup-config": "workspace:*",
-    "@xyflow/tsconfig": "workspace:*",
     "@types/node": "^18.7.16",
     "@types/react": ">=17",
     "@types/react-dom": ">=17",
+    "@xyflow/eslint-config": "workspace:*",
+    "@xyflow/rollup-config": "workspace:*",
+    "@xyflow/tsconfig": "workspace:*",
     "react": "^18.2.0",
-    "typescript": "^4.9.4"
+    "typescript": "5.1.3"
   },
   "rollup": {
     "globals": {

packages/react/src/types/edges.ts

@@ -2,7 +2,7 @@
 
 import type { CSSProperties, HTMLAttributes, ReactNode, MouseEvent as ReactMouseEvent, ComponentType } from 'react';
 import type {
-  BaseEdge,
+  EdgeBase,
   BezierPathOptions,
   Position,
   SmoothStepPathOptions,
@@ -28,7 +28,7 @@ export type EdgeLabelOptions = {
 
 export type EdgeUpdatable = boolean | HandleType;
 
-export type DefaultEdge<EdgeData = any> = BaseEdge<EdgeData> & {
+export type DefaultEdge<EdgeData = any> = EdgeBase<EdgeData> & {
   style?: CSSProperties;
   className?: string;
   sourceNode?: Node;

packages/react/src/types/nodes.ts

@@ -1,7 +1,7 @@
 import type { CSSProperties, MouseEvent as ReactMouseEvent } from 'react';
-import type { BaseNode } from '@xyflow/system';
+import type { NodeBase } from '@xyflow/system';
 
-export type Node<NodeData = any, NodeType extends string | undefined = string | undefined> = BaseNode<
+export type Node<NodeData = any, NodeType extends string | undefined = string | undefined> = NodeBase<
   NodeData,
   NodeType
 > & {

packages/svelte/package.json

@@ -35,7 +35,7 @@
     "svelte": "^3.59.1",
     "svelte-check": "^3.4.3",
     "tslib": "^2.4.1",
-    "typescript": "^4.9.3",
+    "typescript": "5.1.3",
     "vite": "^4.3.9"
   },
   "peerDependencies": {

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

@@ -13,7 +13,9 @@ import {
   type Connection,
   type XYPosition,
   type CoordinateExtent,
-  type UpdateConnection
+  type UpdateConnection,
+  type NodeBase,
+  type NodeDragItem
 } from '@xyflow/system';
 
 import { addEdge as addEdgeUtil } from '$lib/utils';
@@ -57,7 +59,9 @@ export function createStore(): SvelteFlowStore {
   const updateNodePositions: UpdateNodePositions = (nodeDragItems, dragging = false) => {
     store.nodes.update((nds) => {
       return nds.map((n) => {
-        const nodeDragItem = nodeDragItems.find((ndi) => ndi.id === n.id);
+        const nodeDragItem = (nodeDragItems as Array<NodeBase | NodeDragItem>).find(
+          (ndi) => ndi.id === n.id
+        );
 
         if (nodeDragItem) {
           return {

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

@@ -1,7 +1,7 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import type { SvelteComponentTyped } from 'svelte';
 import type {
-  BaseEdge,
+  EdgeBase,
   BezierPathOptions,
   DefaultEdgeOptionsBase,
   EdgePosition,
@@ -10,7 +10,7 @@ import type {
 
 import type { Node } from '$lib/types';
 
-export type DefaultEdge<EdgeData = any> = BaseEdge<EdgeData> & {
+export type DefaultEdge<EdgeData = any> = EdgeBase<EdgeData> & {
   label?: string;
   labelStyle?: string;
   style?: string;

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

@@ -1,7 +1,7 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 
 import type { SvelteComponentTyped } from 'svelte';
-import type { BaseNode, NodeProps } from '@xyflow/system';
+import type { NodeBase, NodeProps } from '@xyflow/system';
 
 // @todo: currently the helper function only like Node from '@reactflow/core'
 // we need a base node type or helpes that accept Node like types
@@ -9,7 +9,7 @@ import type { BaseNode, NodeProps } from '@xyflow/system';
 export type Node<
   NodeData = any,
   NodeType extends string | undefined = string | undefined
-> = BaseNode<NodeData, NodeType> & {
+> = NodeBase<NodeData, NodeType> & {
   class?: string;
   style?: string;
 };

packages/system/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@xyflow/system",
   "version": "0.0.1",
-  "description": "Core system of xyflow.",
+  "description": "xyflow core system that powers React Flow and Svelte Flow.",
   "keywords": [
     "node-based UI",
     "graph",
@@ -48,7 +48,7 @@
     "@xyflow/eslint-config": "workspace:*",
     "@xyflow/rollup-config": "workspace:*",
     "@xyflow/tsconfig": "workspace:*",
-    "typescript": "^4.9.4"
+    "typescript": "5.1.3"
   },
   "rollup": {
     "globals": {

packages/system/src/types/edges.ts

@@ -1,7 +1,7 @@
 import { Position } from './utils';
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
-export type BaseEdge<EdgeData = any> = {
+export type EdgeBase<EdgeData = any> = {
   id: string;
   type?: string;
   source: string;
@@ -31,7 +31,7 @@ export type BezierPathOptions = {
   curvature?: number;
 };
 
-export type DefaultEdgeOptionsBase<EdgeType extends BaseEdge> = Omit<
+export type DefaultEdgeOptionsBase<EdgeType extends EdgeBase> = Omit<
   EdgeType,
   'id' | 'source' | 'target' | 'sourceHandle' | 'targetHandle' | 'sourceNode' | 'targetNode'
 >;

packages/system/src/types/general.ts

@@ -2,10 +2,10 @@
 import type { D3DragEvent, Selection as D3Selection, SubjectPosition, ZoomBehavior } from 'd3';
 
 import type { XYPosition, Rect } from './utils';
-import type { BaseNode, NodeDragItem, NodeOrigin } from './nodes';
+import type { NodeBase, NodeDragItem, NodeOrigin } from './nodes';
 import type { ConnectingHandle, HandleType } from './handles';
 import { PanZoomInstance } from './panzoom';
-import { BaseEdge } from '..';
+import { EdgeBase } from '..';
 
 export type Project = (position: XYPosition) => XYPosition;
 
@@ -45,9 +45,9 @@ export type OnConnectStart = (event: MouseEvent | TouchEvent, params: OnConnectS
 export type OnConnect = (connection: Connection) => void;
 export type OnConnectEnd = (event: MouseEvent | TouchEvent) => void;
 
-export type IsValidConnection = (edge: BaseEdge | Connection) => boolean;
+export type IsValidConnection = (edge: EdgeBase | Connection) => boolean;
 
-export type FitViewParamsBase<NodeType extends BaseNode> = {
+export type FitViewParamsBase<NodeType extends NodeBase> = {
   nodes: NodeType[];
   width: number;
   height: number;
@@ -57,7 +57,7 @@ export type FitViewParamsBase<NodeType extends BaseNode> = {
   nodeOrigin?: NodeOrigin;
 };
 
-export type FitViewOptionsBase<NodeType extends BaseNode> = {
+export type FitViewOptionsBase<NodeType extends NodeBase> = {
   padding?: number;
   includeHiddenNodes?: boolean;
   minZoom?: number;
@@ -124,7 +124,7 @@ export type SelectionRect = Rect & {
 export type OnError = (id: string, message: string) => void;
 
 export type UpdateNodePositions = (
-  dragItems: NodeDragItem[] | BaseNode[],
+  dragItems: NodeDragItem[] | NodeBase[],
   positionChanged?: boolean,
   dragging?: boolean
 ) => void;

packages/system/src/types/nodes.ts

@@ -3,7 +3,7 @@ import { internalsSymbol } from '../constants';
 import type { XYPosition, Position, CoordinateExtent, HandleElement } from '.';
 
 // this is stuff that all nodes share independent of the framework
-export type BaseNode<T = any, U extends string | undefined = string | undefined> = {
+export type NodeBase<T = any, U extends string | undefined = string | undefined> = {
   id: string;
   position: XYPosition;
   data: T;
@@ -39,13 +39,13 @@ export type BaseNode<T = any, U extends string | undefined = string | undefined>
 
 // props that get passed to a custom node
 export type NodeProps<T = any> = {
-  id: BaseNode['id'];
+  id: NodeBase['id'];
   data: T;
-  dragHandle: BaseNode['dragHandle'];
+  dragHandle: NodeBase['dragHandle'];
-  type: BaseNode['type'];
+  type: NodeBase['type'];
-  selected: BaseNode['selected'];
+  selected: NodeBase['selected'];
-  isConnectable: BaseNode['connectable'];
+  isConnectable: NodeBase['connectable'];
-  zIndex: BaseNode['zIndex'];
+  zIndex: NodeBase['zIndex'];
   xPos: number;
   yPos: number;
   dragging: boolean;
@@ -85,6 +85,6 @@ export type NodeDragItem = {
 
 export type NodeOrigin = [number, number];
 
-export type OnNodeDrag = (event: MouseEvent, node: BaseNode, nodes: BaseNode[]) => void;
+export type OnNodeDrag = (event: MouseEvent, node: NodeBase, nodes: NodeBase[]) => void;
 
-export type OnSelectionDrag = (event: MouseEvent, nodes: BaseNode[]) => void;
+export type OnSelectionDrag = (event: MouseEvent, nodes: NodeBase[]) => void;

packages/system/src/utils/edges/general.ts

@@ -1,5 +1,5 @@
 import { Connection, Transform, errorMessages, internalsSymbol, isEdgeBase } from '../..';
-import { BaseEdge, BaseNode } from '../../types';
+import { EdgeBase, NodeBase } from '../../types';
 import { isNumeric, getOverlappingArea, boxToRect, nodeToBox, getBoundsOfBoxes, devWarn } from '../general';
 
 // this is used for straight edges and simple smoothstep edges (LTR, RTL, BTT, TTB)
@@ -25,15 +25,15 @@ export function getEdgeCenter({
 
 const defaultEdgeTree = [{ level: 0, isMaxLevel: true, edges: [] }];
 
-export type GroupedEdges<EdgeType extends BaseEdge> = {
+export type GroupedEdges<EdgeType extends EdgeBase> = {
   edges: EdgeType[];
   level: number;
   isMaxLevel: boolean;
 };
 
-export function groupEdgesByZLevel<EdgeType extends BaseEdge>(
+export function groupEdgesByZLevel<EdgeType extends EdgeBase>(
   edges: EdgeType[],
-  nodes: BaseNode[],
+  nodes: NodeBase[],
   elevateEdgesOnSelect = false
 ): GroupedEdges<EdgeType>[] {
   let maxLevel = -1;
@@ -80,8 +80,8 @@ export function groupEdgesByZLevel<EdgeType extends BaseEdge>(
 }
 
 type IsEdgeVisibleParams = {
-  sourceNode: BaseNode;
+  sourceNode: NodeBase;
-  targetNode: BaseNode;
+  targetNode: NodeBase;
   width: number;
   height: number;
   transform: Transform;
@@ -108,10 +108,10 @@ export function isEdgeVisible({ sourceNode, targetNode, width, height, transform
   return getOverlappingArea(viewRect, boxToRect(edgeBox)) > 0;
 }
 
-const getEdgeId = ({ source, sourceHandle, target, targetHandle }: Connection | BaseEdge): string =>
+const getEdgeId = ({ source, sourceHandle, target, targetHandle }: Connection | EdgeBase): string =>
   `xyflow__edge-${source}${sourceHandle || ''}-${target}${targetHandle || ''}`;
 
-const connectionExists = (edge: BaseEdge, edges: BaseEdge[]) => {
+const connectionExists = (edge: EdgeBase, edges: EdgeBase[]) => {
   return edges.some(
     (el) =>
       el.source === edge.source &&
@@ -121,7 +121,7 @@ const connectionExists = (edge: BaseEdge, edges: BaseEdge[]) => {
   );
 };
 
-export const addEdgeBase = <EdgeType extends BaseEdge>(
+export const addEdgeBase = <EdgeType extends EdgeBase>(
   edgeParams: EdgeType | Connection,
   edges: EdgeType[]
 ): EdgeType[] => {
@@ -152,7 +152,7 @@ export type UpdateEdgeOptions = {
   shouldReplaceId?: boolean;
 };
 
-export const updateEdgeBase = <EdgeType extends BaseEdge>(
+export const updateEdgeBase = <EdgeType extends EdgeBase>(
   oldEdge: EdgeType,
   newConnection: Connection,
   edges: EdgeType[],

packages/system/src/utils/edges/positions.ts

@@ -1,15 +1,15 @@
 import { EdgePosition } from '../../types/edges';
 import { ConnectionMode, OnError } from '../../types/general';
-import { BaseNode, NodeHandleBounds } from '../../types/nodes';
+import { NodeBase, NodeHandleBounds } from '../../types/nodes';
 import { Position, Rect, XYPosition } from '../../types/utils';
 import { errorMessages, internalsSymbol } from '../../constants';
 import { HandleElement } from '../../types';
 
 export type GetEdgePositionParams = {
   id: string;
-  sourceNode: BaseNode;
+  sourceNode: NodeBase;
   sourceHandle: string | null;
-  targetNode: BaseNode;
+  targetNode: NodeBase;
   targetHandle: string | null;
   connectionMode: ConnectionMode;
   onError?: OnError;
@@ -59,7 +59,7 @@ export function getEdgePosition(params: GetEdgePositionParams): EdgePosition | n
   };
 }
 
-function getHandleDataByNode(node?: BaseNode): [Rect, NodeHandleBounds | null, boolean] {
+function getHandleDataByNode(node?: NodeBase): [Rect, NodeHandleBounds | null, boolean] {
   const handleBounds = node?.[internalsSymbol]?.handleBounds || null;
 
   const isValid =

packages/system/src/utils/general.ts

@@ -4,7 +4,7 @@ import type {
   CoordinateExtent,
   Box,
   Rect,
-  BaseNode,
+  NodeBase,
   NodeOrigin,
   SnapGrid,
   Transform,
@@ -58,7 +58,7 @@ export const boxToRect = ({ x, y, x2, y2 }: Box): Rect => ({
   height: y2 - y,
 });
 
-export const nodeToRect = (node: BaseNode, nodeOrigin: NodeOrigin = [0, 0]): Rect => {
+export const nodeToRect = (node: NodeBase, nodeOrigin: NodeOrigin = [0, 0]): Rect => {
   const { positionAbsolute } = getNodePositionWithOrigin(node, node.origin || nodeOrigin);
 
   return {
@@ -68,7 +68,7 @@ export const nodeToRect = (node: BaseNode, nodeOrigin: NodeOrigin = [0, 0]): Rec
   };
 };
 
-export const nodeToBox = (node: BaseNode, nodeOrigin: NodeOrigin = [0, 0]): Box => {
+export const nodeToBox = (node: NodeBase, nodeOrigin: NodeOrigin = [0, 0]): Box => {
   const { positionAbsolute } = getNodePositionWithOrigin(node, node.origin || nodeOrigin);
 
   return {

packages/system/src/utils/graph.ts

@@ -17,8 +17,8 @@ import {
   type XYPosition,
   type Rect,
   type NodeOrigin,
-  type BaseNode,
+  type NodeBase,
-  type BaseEdge,
+  type EdgeBase,
   type FitViewParamsBase,
   type FitViewOptionsBase,
   NodeDragItem,
@@ -27,15 +27,15 @@ import {
 } from '../types';
 import { errorMessages } from '../constants';
 
-export const isEdgeBase = <NodeType extends BaseNode = BaseNode, EdgeType extends BaseEdge = BaseEdge>(
+export const isEdgeBase = <NodeType extends NodeBase = NodeBase, EdgeType extends EdgeBase = EdgeBase>(
   element: NodeType | Connection | EdgeType
 ): element is EdgeType => 'id' in element && 'source' in element && 'target' in element;
 
-export const isNodeBase = <NodeType extends BaseNode = BaseNode, EdgeType extends BaseEdge = BaseEdge>(
+export const isNodeBase = <NodeType extends NodeBase = NodeBase, EdgeType extends EdgeBase = EdgeBase>(
   element: NodeType | Connection | EdgeType
 ): element is NodeType => 'id' in element && !('source' in element) && !('target' in element);
 
-export const getOutgoersBase = <NodeType extends BaseNode = BaseNode, EdgeType extends BaseEdge = BaseEdge>(
+export const getOutgoersBase = <NodeType extends NodeBase = NodeBase, EdgeType extends EdgeBase = EdgeBase>(
   node: NodeType,
   nodes: NodeType[],
   edges: EdgeType[]
@@ -48,7 +48,7 @@ export const getOutgoersBase = <NodeType extends BaseNode = BaseNode, EdgeType e
   return nodes.filter((n) => outgoerIds.includes(n.id));
 };
 
-export const getIncomersBase = <NodeType extends BaseNode = BaseNode, EdgeType extends BaseEdge = BaseEdge>(
+export const getIncomersBase = <NodeType extends NodeBase = NodeBase, EdgeType extends EdgeBase = EdgeBase>(
   node: NodeType,
   nodes: NodeType[],
   edges: EdgeType[]
@@ -62,7 +62,7 @@ export const getIncomersBase = <NodeType extends BaseNode = BaseNode, EdgeType e
 };
 
 export const getNodePositionWithOrigin = (
-  node: BaseNode | undefined,
+  node: NodeBase | undefined,
   nodeOrigin: NodeOrigin = [0, 0]
 ): XYPosition & { positionAbsolute: XYPosition } => {
   if (!node) {
@@ -95,7 +95,7 @@ export const getNodePositionWithOrigin = (
   };
 };
 
-export const getRectOfNodes = (nodes: BaseNode[], nodeOrigin: NodeOrigin = [0, 0]): Rect => {
+export const getRectOfNodes = (nodes: NodeBase[], nodeOrigin: NodeOrigin = [0, 0]): Rect => {
   if (nodes.length === 0) {
     return { x: 0, y: 0, width: 0, height: 0 };
   }
@@ -119,7 +119,7 @@ export const getRectOfNodes = (nodes: BaseNode[], nodeOrigin: NodeOrigin = [0, 0
   return boxToRect(box);
 };
 
-export const getNodesInside = <NodeType extends BaseNode>(
+export const getNodesInside = <NodeType extends NodeBase>(
   nodes: NodeType[],
   rect: Rect,
   [tx, ty, tScale]: Transform = [0, 0, 1],
@@ -158,7 +158,7 @@ export const getNodesInside = <NodeType extends BaseNode>(
   return visibleNodes;
 };
 
-export const getConnectedEdgesBase = <NodeType extends BaseNode = BaseNode, EdgeType extends BaseEdge = BaseEdge>(
+export const getConnectedEdgesBase = <NodeType extends NodeBase = NodeBase, EdgeType extends EdgeBase = EdgeBase>(
   nodes: NodeType[],
   edges: EdgeType[]
 ): EdgeType[] => {
@@ -167,7 +167,7 @@ export const getConnectedEdgesBase = <NodeType extends BaseNode = BaseNode, Edge
   return edges.filter((edge) => nodeIds.includes(edge.source) || nodeIds.includes(edge.target));
 };
 
-export function fitView<Params extends FitViewParamsBase<BaseNode>, Options extends FitViewOptionsBase<BaseNode>>(
+export function fitView<Params extends FitViewParamsBase<NodeBase>, Options extends FitViewOptionsBase<NodeBase>>(
   { nodes, width, height, panZoom, minZoom, maxZoom, nodeOrigin = [0, 0] }: Params,
   options?: Options
 ) {
@@ -203,7 +203,7 @@ export function fitView<Params extends FitViewParamsBase<BaseNode>, Options exte
   return false;
 }
 
-export function calcNextPosition<NodeType extends BaseNode>(
+export function calcNextPosition<NodeType extends NodeBase>(
   node: NodeDragItem | NodeType,
   nextPosition: XYPosition,
   nodes: NodeType[],
@@ -263,7 +263,7 @@ export function calcNextPosition<NodeType extends BaseNode>(
 // helper function to get arrays of nodes and edges that can be deleted
 // you can pass in a list of nodes and edges that should be deleted
 // and the function only returns elements that are deletable and also handles connected nodes and child nodes
-export function getElementsToRemove<NodeType extends BaseNode = BaseNode, EdgeType extends BaseEdge = BaseEdge>({
+export function getElementsToRemove<NodeType extends NodeBase = NodeBase, EdgeType extends EdgeBase = EdgeBase>({
   nodesToRemove,
   edgesToRemove,
   nodes,

packages/system/src/utils/marker.ts

@@ -1,4 +1,4 @@
-import type { BaseEdge, EdgeMarker, EdgeMarkerType, MarkerProps } from '../types';
+import type { EdgeBase, EdgeMarker, EdgeMarkerType, MarkerProps } from '../types';
 
 export function getMarkerId(marker: EdgeMarkerType | undefined, id?: string | null): string {
   if (!marker) {
@@ -18,7 +18,7 @@ export function getMarkerId(marker: EdgeMarkerType | undefined, id?: string | nu
 }
 
 export function createMarkerIds(
-  edges: BaseEdge[],
+  edges: EdgeBase[],
   { id, defaultColor }: { id?: string | null; defaultColor?: string }
 ) {
   const ids: string[] = [];

packages/system/src/utils/store.ts

@@ -1,6 +1,6 @@
 import { internalsSymbol } from '../constants';
 import {
-  BaseNode,
+  NodeBase,
   CoordinateExtent,
   Dimensions,
   NodeDimensionUpdate,
@@ -16,7 +16,7 @@ import { getNodePositionWithOrigin } from './graph';
 
 type ParentNodes = Record<string, boolean>;
 
-export function updateAbsolutePositions<NodeType extends BaseNode>(
+export function updateAbsolutePositions<NodeType extends NodeBase>(
   nodes: NodeType[],
   nodeOrigin: NodeOrigin = [0, 0],
   parentNodes?: ParentNodes
@@ -54,13 +54,13 @@ export function updateAbsolutePositions<NodeType extends BaseNode>(
   });
 }
 
-type UpdateNodesOptions<NodeType extends BaseNode> = {
+type UpdateNodesOptions<NodeType extends NodeBase> = {
   nodeOrigin?: NodeOrigin;
   elevateNodesOnSelect?: boolean;
   defaults?: Partial<NodeType>;
 };
 
-export function updateNodes<NodeType extends BaseNode>(
+export function updateNodes<NodeType extends NodeBase>(
   nodes: NodeType[],
   storeNodes: NodeType[],
   options: UpdateNodesOptions<NodeType> = {
@@ -104,7 +104,7 @@ export function updateNodes<NodeType extends BaseNode>(
   return nodesWithPositions;
 }
 
-function calculateXYZPosition<NodeType extends BaseNode>(
+function calculateXYZPosition<NodeType extends NodeBase>(
   node: NodeType,
   nodes: NodeType[],
   result: XYZPosition,
@@ -131,11 +131,11 @@ function calculateXYZPosition<NodeType extends BaseNode>(
 
 export function updateNodeDimensions(
   updates: NodeDimensionUpdate[],
-  nodes: BaseNode[],
+  nodes: NodeBase[],
   domNode: HTMLElement | null,
   nodeOrigin?: NodeOrigin,
   onUpdate?: (id: string, dimensions: Dimensions) => void
-): BaseNode[] | null {
+): NodeBase[] | null {
   const viewportNode = domNode?.querySelector('.xyflow__viewport');
 
   if (!viewportNode) {

packages/system/src/xydrag/XYDrag.ts

@@ -4,11 +4,11 @@ import { select } from 'd3-selection';
 import { calcAutoPan, getEventPosition, getPointerPosition, calcNextPosition, snapPosition } from '../utils';
 import { getDragItems, getEventHandlerParams, hasSelector, wrapSelectionDragFunc } from './utils';
 import type {
-  BaseNode,
+  NodeBase,
   NodeDragItem,
   UseDragEvent,
   XYPosition,
-  BaseEdge,
+  EdgeBase,
   CoordinateExtent,
   NodeOrigin,
   OnError,
@@ -20,11 +20,11 @@ import type {
   UpdateNodePositions,
 } from '../types';
 
-export type OnDrag = (event: MouseEvent, dragItems: NodeDragItem[], node: BaseNode, nodes: BaseNode[]) => void;
+export type OnDrag = (event: MouseEvent, dragItems: NodeDragItem[], node: NodeBase, nodes: NodeBase[]) => void;
 
 type StoreItems = {
-  nodes: BaseNode[];
+  nodes: NodeBase[];
-  edges: BaseEdge[];
+  edges: EdgeBase[];
   nodeExtent: CoordinateExtent;
   snapGrid: SnapGrid;
   snapToGrid: boolean;

packages/system/src/xydrag/utils.ts

@@ -1,10 +1,10 @@
-import { type NodeDragItem, type XYPosition, BaseNode } from '../types';
+import { type NodeDragItem, type XYPosition, NodeBase } from '../types';
 
-export function wrapSelectionDragFunc(selectionFunc?: (event: MouseEvent, nodes: BaseNode[]) => void) {
+export function wrapSelectionDragFunc(selectionFunc?: (event: MouseEvent, nodes: NodeBase[]) => void) {
-  return (event: MouseEvent, _: BaseNode, nodes: BaseNode[]) => selectionFunc?.(event, nodes);
+  return (event: MouseEvent, _: NodeBase, nodes: NodeBase[]) => selectionFunc?.(event, nodes);
 }
 
-export function isParentSelected<NodeType extends BaseNode>(node: NodeType, nodes: NodeType[]): boolean {
+export function isParentSelected<NodeType extends NodeBase>(node: NodeType, nodes: NodeType[]): boolean {
   if (!node.parentNode) {
     return false;
   }
@@ -35,7 +35,7 @@ export function hasSelector(target: Element, selector: string, domNode: Element)
 }
 
 // looks for all selected nodes and created a NodeDragItem for each of them
-export function getDragItems<NodeType extends BaseNode>(
+export function getDragItems<NodeType extends NodeBase>(
   nodes: NodeType[],
   nodesDraggable: boolean,
   mousePos: XYPosition,
@@ -71,7 +71,7 @@ export function getDragItems<NodeType extends BaseNode>(
 // returns two params:
 // 1. the dragged node (or the first of the list, if we are dragging a node selection)
 // 2. array of selected nodes (for multi selections)
-export function getEventHandlerParams<NodeType extends BaseNode>({
+export function getEventHandlerParams<NodeType extends NodeBase>({
   nodeId,
   dragItems,
   nodes,

packages/system/src/xyhandle/XYHandle.ts

@@ -6,7 +6,7 @@ import {
   type HandleType,
   type Connection,
   type PanBy,
-  type BaseNode,
+  type NodeBase,
   type Transform,
   type ConnectingHandle,
   type OnConnectEnd,
@@ -25,7 +25,7 @@ export type OnPointerDownParams = {
   handleId: string | null;
   nodeId: string;
   isTarget: boolean;
-  nodes: BaseNode[];
+  nodes: NodeBase[];
   lib: string;
   edgeUpdaterType?: HandleType;
   updateConnection: UpdateConnection;

packages/system/src/xyhandle/utils.ts

@@ -3,7 +3,7 @@ import {
   type HandleType,
   type NodeHandleBounds,
   type XYPosition,
-  type BaseNode,
+  type NodeBase,
   type ConnectionHandle,
 } from '../types';
 import { internalsSymbol } from '../constants';
@@ -11,7 +11,7 @@ import { internalsSymbol } from '../constants';
 // this functions collects all handles and adds an absolute position
 // so that we can later find the closest handle to the mouse position
 export function getHandles(
-  node: BaseNode,
+  node: NodeBase,
   handleBounds: NodeHandleBounds,
   type: HandleType,
   currentHandle: string
@@ -62,7 +62,7 @@ export function getClosestHandle(
 }
 
 type GetHandleLookupParams = {
-  nodes: BaseNode[];
+  nodes: NodeBase[];
   nodeId: string;
   handleId: string | null;
   handleType: string;

packages/system/tsconfig.json

@@ -1,6 +1,12 @@
 {
-  "extends": "@xyflow/tsconfig/react.json",
   "display": "@xyflow/system",
+  "extends": "@xyflow/tsconfig/base.json",
+  "compilerOptions": {
+    "lib": ["dom", "esnext"],
+    "module": "esnext",
+    "target": "esnext",
+    "outDir": "dist"
+  },
   "include": ["**/*.ts", "**/*.tsx"],
   "exclude": ["node_modules", "dist"]
 }