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