refactor(packages): add @reactflow/system
This commit is contained in:
moklick
@@ -0,0 +1,3 @@
|
||||
export * from './types';
|
||||
|
||||
export const internalsSymbol = Symbol.for('internals');
|
||||
@@ -0,0 +1,62 @@
|
||||
/* 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;
|
||||
@@ -0,0 +1,149 @@
|
||||
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;
|
||||
@@ -0,0 +1,180 @@
|
||||
/* 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> = {
|
||||
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;
|
||||
selected?: boolean;
|
||||
markerStart?: EdgeMarkerType;
|
||||
markerEnd?: EdgeMarkerType;
|
||||
zIndex?: number;
|
||||
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,
|
||||
'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',
|
||||
Step = 'step',
|
||||
SmoothStep = 'smoothstep',
|
||||
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;
|
||||
width?: number;
|
||||
height?: number;
|
||||
markerUnits?: string;
|
||||
orient?: string;
|
||||
strokeWidth?: number;
|
||||
};
|
||||
|
||||
export type EdgeMarkerType = string | EdgeMarker;
|
||||
|
||||
export enum MarkerType {
|
||||
Arrow = 'arrow',
|
||||
ArrowClosed = 'arrowclosed',
|
||||
}
|
||||
@@ -0,0 +1,279 @@
|
||||
/* 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;
|
||||
|
||||
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;
|
||||
|
||||
export type ZoomInOut = (options?: ViewportHelperFunctionOptions) => void;
|
||||
export type ZoomTo = (zoomLevel: number, options?: ViewportHelperFunctionOptions) => void;
|
||||
export type GetZoom = () => number;
|
||||
export type GetViewport = () => Viewport;
|
||||
export type SetViewport = (viewport: Viewport, options?: ViewportHelperFunctionOptions) => void;
|
||||
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;
|
||||
sourceHandle: string | null;
|
||||
targetHandle: string | null;
|
||||
}
|
||||
|
||||
export type ConnectionStatus = 'valid' | 'invalid';
|
||||
|
||||
export enum ConnectionMode {
|
||||
Strict = 'strict',
|
||||
Loose = 'loose',
|
||||
}
|
||||
|
||||
export type OnConnect = (connection: Connection) => void;
|
||||
|
||||
export type FitViewOptions = {
|
||||
padding?: number;
|
||||
includeHiddenNodes?: boolean;
|
||||
minZoom?: number;
|
||||
maxZoom?: number;
|
||||
duration?: number;
|
||||
nodes?: (Partial<Node> & { id: Node['id'] })[];
|
||||
};
|
||||
|
||||
export type OnConnectStartParams = {
|
||||
nodeId: string | null;
|
||||
handleId: string | null;
|
||||
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;
|
||||
zoom: number;
|
||||
};
|
||||
|
||||
export type KeyCode = string | Array<string>;
|
||||
|
||||
export type SnapGrid = [number, number];
|
||||
|
||||
export enum PanOnScrollMode {
|
||||
Free = 'free',
|
||||
Vertical = 'vertical',
|
||||
Horizontal = 'horizontal',
|
||||
}
|
||||
|
||||
export type ViewportHelperFunctionOptions = {
|
||||
duration?: number;
|
||||
};
|
||||
|
||||
export type SetCenterOptions = ViewportHelperFunctionOptions & {
|
||||
zoom?: number;
|
||||
};
|
||||
|
||||
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 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: ZoomBehavior<Element, unknown> | null;
|
||||
d3Selection: D3Selection<Element, unknown, null, undefined> | 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 = {
|
||||
account?: string;
|
||||
hideAttribution: boolean;
|
||||
};
|
||||
|
||||
export type UseDragEvent = D3DragEvent<HTMLDivElement, null, SubjectPosition>;
|
||||
|
||||
export enum SelectionMode {
|
||||
Partial = 'partial',
|
||||
Full = 'full',
|
||||
}
|
||||
|
||||
export type SelectionRect = Rect & {
|
||||
startX: number;
|
||||
startY: number;
|
||||
};
|
||||
|
||||
export type OnError = (id: string, message: string) => void;
|
||||
@@ -0,0 +1,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 interface StartHandle {
|
||||
nodeId: string;
|
||||
type: HandleType;
|
||||
handleId?: string | null;
|
||||
}
|
||||
|
||||
export interface HandleProps {
|
||||
type: HandleType;
|
||||
position: Position;
|
||||
isConnectable?: boolean;
|
||||
onConnect?: OnConnect;
|
||||
isValidConnection?: (connection: Connection) => boolean;
|
||||
id?: string;
|
||||
}
|
||||
@@ -0,0 +1,8 @@
|
||||
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';
|
||||
@@ -0,0 +1,56 @@
|
||||
/* 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'>;
|
||||
@@ -0,0 +1,118 @@
|
||||
/* 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> = {
|
||||
id: string;
|
||||
position: XYPosition;
|
||||
data: T;
|
||||
type?: U;
|
||||
style?: CSSProperties;
|
||||
className?: string;
|
||||
sourcePosition?: Position;
|
||||
targetPosition?: Position;
|
||||
hidden?: boolean;
|
||||
selected?: boolean;
|
||||
dragging?: boolean;
|
||||
draggable?: boolean;
|
||||
selectable?: boolean;
|
||||
connectable?: boolean;
|
||||
deletable?: boolean;
|
||||
dragHandle?: string;
|
||||
width?: number | null;
|
||||
height?: number | null;
|
||||
parentNode?: string;
|
||||
zIndex?: number;
|
||||
extent?: 'parent' | CoordinateExtent;
|
||||
expandParent?: boolean;
|
||||
positionAbsolute?: XYPosition;
|
||||
ariaLabel?: string;
|
||||
focusable?: boolean;
|
||||
resizing?: boolean;
|
||||
|
||||
// only used internally
|
||||
[internalsSymbol]?: {
|
||||
z?: number;
|
||||
handleBounds?: NodeHandleBounds;
|
||||
isParent?: boolean;
|
||||
};
|
||||
};
|
||||
|
||||
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'
|
||||
> & {
|
||||
dragging: boolean;
|
||||
targetPosition?: Position;
|
||||
sourcePosition?: Position;
|
||||
};
|
||||
|
||||
export type NodeHandleBounds = {
|
||||
source: HandleElement[] | null;
|
||||
target: HandleElement[] | null;
|
||||
};
|
||||
|
||||
export type NodeDimensionUpdate = {
|
||||
id: string;
|
||||
nodeElement: HTMLDivElement;
|
||||
forceUpdate?: boolean;
|
||||
};
|
||||
|
||||
export type NodeInternals = Map<string, Node>;
|
||||
|
||||
export type NodeBounds = XYPosition & {
|
||||
width: number | null;
|
||||
height: number | null;
|
||||
};
|
||||
|
||||
export type NodeDragItem = {
|
||||
id: string;
|
||||
position: XYPosition;
|
||||
positionAbsolute: XYPosition;
|
||||
// distance from the mouse cursor to the node when start dragging
|
||||
distance: XYPosition;
|
||||
width?: number | null;
|
||||
height?: number | null;
|
||||
extent?: 'parent' | CoordinateExtent;
|
||||
parentNode?: string;
|
||||
dragging?: boolean;
|
||||
};
|
||||
|
||||
export type NodeOrigin = [number, number];
|
||||
@@ -0,0 +1,29 @@
|
||||
export enum Position {
|
||||
Left = 'left',
|
||||
Top = 'top',
|
||||
Right = 'right',
|
||||
Bottom = 'bottom',
|
||||
}
|
||||
|
||||
export interface XYPosition {
|
||||
x: number;
|
||||
y: number;
|
||||
}
|
||||
|
||||
export type XYZPosition = XYPosition & { z: number };
|
||||
|
||||
export interface Dimensions {
|
||||
width: number;
|
||||
height: number;
|
||||
}
|
||||
|
||||
export interface Rect extends Dimensions, XYPosition {}
|
||||
|
||||
export interface Box extends XYPosition {
|
||||
x2: number;
|
||||
y2: number;
|
||||
}
|
||||
|
||||
export type Transform = [number, number, number];
|
||||
|
||||
export type CoordinateExtent = [[number, number], [number, number]];
|
||||
Reference in New Issue
Block a user