Skip to main content

Types

On this site we collect all types that don't have a place on one of the existing sites.

Align​

type Align = 'start' | 'center' | 'end';

Connection​

type Connection = {
  source: string | null;
  target: string | null;
  sourceHandle: string | null;
  targetHandle: string | null;
};

ConnectionMode​

enum ConnectionMode {
  Strict = 'strict',
  Loose = 'loose',
}

ConnectionLineType​

enum ConnectionLineType {
  Bezier = 'default',
  Straight = 'straight',
  Step = 'step',
  SmoothStep = 'smoothstep',
  SimpleBezier = 'simplebezier',
}

CoordinateExtent​

type CoordinateExtent = [[number, number], [number, number];

DefaultEdgeOptions​

type DefaultEdgeOptions = {
  type?: string;
  label?: string | ReactNode;
  labelStyle?: CSSProperties;
  labelShowBg?: boolean;
  labelBgStyle?: CSSProperties;
  labelBgPadding?: [number, number];
  labelBgBorderRadius?: number;
  style?: CSSProperties;
  animated?: boolean;
  hidden?: boolean;
  deletable?: boolean;
  data?: T;
  className?: string;
  selected?: boolean;
  markerStart?: EdgeMarkerType;
  markerEnd?: EdgeMarkerType;
  zIndex?: number;
  ariaLabel?: string;
  interactionWidth?: number;
};

EdgeChange​

type EdgeSelectionChange = NodeSelectionChange;
type EdgeRemoveChange = NodeRemoveChange;
type EdgeAddChange<EdgeData = any> = {
  item: Edge<EdgeData>;
  type: 'add';
};
type EdgeResetChange<EdgeData = any> = {
  item: Edge<EdgeData>;
  type: 'reset';
};
type EdgeChange = EdgeSelectionChange | EdgeRemoveChange | EdgeAddChange | EdgeResetChange;

FitBoundsOptions​

type FitBoundsOptions = {
  duration?: number;
  padding?: number;
};

FitViewOptions​

type FitViewOptions = {
  padding?: number;
  includeHiddenNodes?: boolean;
  minZoom?: number;
  maxZoom?: number;
  duration?: number;
  nodes?: (Partial<Node> & { id: string })[];
};

HandleType​

type HandleType = 'source' | 'target';

NodeChange​

type NodeDimensionChange = {
  id: string;
  type: 'dimensions';
  dimensions: Dimensions;
};

type NodePositionChange = {
  id: string;
  type: 'position';
  position?: XYPosition;
  positionAbsolute?: XYPosition;
  dragging?: boolean;
};

type NodeSelectionChange = {
  id: string;
  type: 'select';
  selected: boolean;
};

type NodeRemoveChange = {
  id: string;
  type: 'remove';
};

type NodeAddChange<NodeData = any> = {
  item: Node<NodeData>;
  type: 'add';
};

type NodeResetChange<NodeData = any> = {
  item: Node<NodeData>;
  type: 'reset';
};

type NodeChange =
  | NodeDimensionChange
  | NodePositionChange
  | NodeSelectionChange
  | NodeRemoveChange
  | NodeAddChange
  | NodeResetChange;

OnConnectStartParams​

type OnConnectStartParams = {
  nodeId: string | null;
  handleId: string | null;
  handleType: HandleType | null;
};

OnSelectionChangeParams​

export type OnSelectionChangeParams = {
  nodes: Node[];
  edges: Edge[];
};

PanelPosition​

export type PanelPosition =
  | 'top-left'
  | 'top-center'
  | 'top-right'
  | 'bottom-left'
  | 'bottom-center'
  | 'bottom-right';

PanOnScrollMode​

enum PanOnScrollMode {
  Free = 'free',
  Vertical = 'vertical',
  Horizontal = 'horizontal',
}

Position​

enum Position {
  Left = 'left',
  Top = 'top',
  Right = 'right',
  Bottom = 'bottom',
}

ReactFlowJsonObject​

type ReactFlowJsonObject<NodeData = any, EdgeData = any> = {
  nodes: Node<NodeData>[];
  edges: Edge<EdgeData>[];
  viewport: Viewport;
};

Rect​

type Rect = {
  x: number;
  y: number;
  width: number;
  height: number;
};

ResizeDragEvent​

type ResizeDragEvent = D3DragEvent<HTMLDivElement, null, SubjectPosition>;

ResizeParams​

type ResizeParams = {
  x: number;
  y: number;
  width: number;
  height: number;
};

ResizeParamsWithDirection​

type ResizeParamsWithDirection = {
  x: number;
  y: number;
  width: number;
  height: number;
  direction: number[]; // [1, 0] = to the right, [-1, 0] = left,  [0, -1] = top,  [0, 1] = bottom
};

SelectionMode​

enum SelectionMode {
  Full = 'full',
  Partial = 'partial',
}

SetCenterOptions​

type SetCenterOptions = {
  duration?: number;
  zoom?: number;
};

Viewport​

type Viewport = {
  x: number;
  y: number;
  zoom: number;
};

ViewportHelperFunctionOptions​

type ViewportHelperFunctionOptions = {
  duration?: number;
};

Transform​

type transform = [number, number, number]; // [x, y, zoom]

XYPosition​

type XYPosition = {
  x: number;
  y: number;
};