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;
};