Add comprehensive frontend UI and distributed infrastructure

Frontend Enhancements:
- Complete React TypeScript frontend with modern UI components
- Distributed workflows management interface with real-time updates
- Socket.IO integration for live agent status monitoring
- Agent management dashboard with cluster visualization
- Project management interface with metrics and task tracking
- Responsive design with proper error handling and loading states

Backend Infrastructure:
- Distributed coordinator for multi-agent workflow orchestration
- Cluster management API with comprehensive agent operations
- Enhanced database models for agents and projects
- Project service for filesystem-based project discovery
- Performance monitoring and metrics collection
- Comprehensive API documentation and error handling

Documentation:
- Complete distributed development guide (README_DISTRIBUTED.md)
- Comprehensive development report with architecture insights
- System configuration templates and deployment guides

The platform now provides a complete web interface for managing the distributed AI cluster
with real-time monitoring, workflow orchestration, and agent coordination capabilities.

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
anthonyrawlins
2025-07-10 08:41:59 +10:00
parent fc0eec91ef
commit 85bf1341f3
28348 changed files with 2646896 additions and 69 deletions

View File

@@ -0,0 +1,4 @@
import React from 'react';
import { BackgroundProps } from '../../types';
declare const _default: React.NamedExoticComponent<BackgroundProps>;
export default _default;

View File

@@ -0,0 +1,3 @@
import React from 'react';
export declare const createGridLinesPath: (size: number, strokeWidth: number, stroke: string) => React.ReactElement;
export declare const createGridDotsPath: (size: number, fill: string) => React.ReactElement;

View File

@@ -0,0 +1,3 @@
/// <reference types="react" />
declare function FitViewIcon(): JSX.Element;
export default FitViewIcon;

View File

@@ -0,0 +1,3 @@
/// <reference types="react" />
declare function LockIcon(): JSX.Element;
export default LockIcon;

View File

@@ -0,0 +1,3 @@
/// <reference types="react" />
declare function MinusIcon(): JSX.Element;
export default MinusIcon;

View File

@@ -0,0 +1,3 @@
/// <reference types="react" />
declare function PlusIcon(): JSX.Element;
export default PlusIcon;

View File

@@ -0,0 +1,3 @@
/// <reference types="react" />
declare function UnlockIcon(): JSX.Element;
export default UnlockIcon;

View File

@@ -0,0 +1,5 @@
import React, { FC, PropsWithChildren } from 'react';
import { ControlProps, ControlButtonProps } from '../../types';
export declare const ControlButton: FC<PropsWithChildren<ControlButtonProps>>;
declare const _default: React.NamedExoticComponent<React.PropsWithChildren<ControlProps>>;
export default _default;

View File

@@ -0,0 +1,19 @@
import React, { CSSProperties } from 'react';
interface MiniMapNodeProps {
x: number;
y: number;
width: number;
height: number;
borderRadius: number;
className: string;
color: string;
shapeRendering: string;
strokeColor: string;
strokeWidth: number;
style?: CSSProperties;
}
declare const _default: React.MemoExoticComponent<{
({ x, y, width, height, style, color, strokeColor, strokeWidth, className, borderRadius, shapeRendering, }: MiniMapNodeProps): JSX.Element;
displayName: string;
}>;
export default _default;

View File

@@ -0,0 +1,7 @@
import React from 'react';
import { MiniMapProps } from '../../types';
declare const _default: React.MemoExoticComponent<{
({ style, className, nodeStrokeColor, nodeColor, nodeClassName, nodeBorderRadius, nodeStrokeWidth, maskColor, }: MiniMapProps<any>): JSX.Element;
displayName: string;
}>;
export default _default;

View File

@@ -0,0 +1,3 @@
import { FC, PropsWithChildren } from 'react';
declare const ReactFlowProvider: FC<PropsWithChildren<{}>>;
export default ReactFlowProvider;

View File

@@ -0,0 +1,4 @@
export { default as MiniMap } from './MiniMap';
export { default as Controls, ControlButton } from './Controls';
export { default as Background } from './Background';
export { default as ReactFlowProvider } from './ReactFlowProvider';

View File

@@ -0,0 +1,8 @@
/// <reference types="react" />
import { AttributionPosition, ProOptions } from '../../types';
declare type AttributionProps = {
proOptions?: ProOptions;
position?: AttributionPosition;
};
declare function Attribution({ proOptions, position }: AttributionProps): JSX.Element | null;
export default Attribution;

View File

@@ -0,0 +1,12 @@
import { CSSProperties } from 'react';
import { ConnectionLineType, ConnectionLineComponent, HandleType } from '../../types';
declare type ConnectionLineProps = {
connectionNodeId: string;
connectionHandleType: HandleType;
connectionLineType: ConnectionLineType;
isConnectable: boolean;
connectionLineStyle?: CSSProperties;
CustomConnectionLineComponent?: ConnectionLineComponent;
};
declare const _default: ({ connectionNodeId, connectionHandleType, connectionLineStyle, connectionLineType, isConnectable, CustomConnectionLineComponent, }: ConnectionLineProps) => JSX.Element | null;
export default _default;

View File

@@ -0,0 +1,4 @@
/// <reference types="react" />
import { BaseEdgeProps } from '../../types';
declare const _default: ({ path, centerX, centerY, label, labelStyle, labelShowBg, labelBgStyle, labelBgPadding, labelBgBorderRadius, style, markerEnd, markerStart, }: BaseEdgeProps) => JSX.Element;
export default _default;

View File

@@ -0,0 +1,15 @@
import React from 'react';
import { EdgeProps, Position } from '../../types';
export interface GetBezierPathParams {
sourceX: number;
sourceY: number;
sourcePosition?: Position;
targetX: number;
targetY: number;
targetPosition?: Position;
curvature?: number;
}
export declare function getBezierPath({ sourceX, sourceY, sourcePosition, targetX, targetY, targetPosition, curvature, }: GetBezierPathParams): string;
export declare function getBezierCenter({ sourceX, sourceY, sourcePosition, targetX, targetY, targetPosition, curvature, }: GetBezierPathParams): [number, number, number, number];
declare const _default: React.MemoExoticComponent<({ sourceX, sourceY, targetX, targetY, sourcePosition, targetPosition, label, labelStyle, labelShowBg, labelBgStyle, labelBgPadding, labelBgBorderRadius, style, markerEnd, markerStart, curvature, }: EdgeProps) => JSX.Element>;
export default _default;

View File

@@ -0,0 +1,9 @@
import { FC, HTMLAttributes } from 'react';
import { Position } from '../../types';
export interface EdgeAnchorProps extends HTMLAttributes<HTMLDivElement> {
position: Position;
centerX: number;
centerY: number;
radius?: number;
}
export declare const EdgeAnchor: FC<EdgeAnchorProps>;

View File

@@ -0,0 +1,4 @@
import React from 'react';
import { EdgeTextProps } from '../../types';
declare const _default: React.NamedExoticComponent<React.PropsWithChildren<EdgeTextProps>>;
export default _default;

View File

@@ -0,0 +1,14 @@
import React from 'react';
import { EdgeProps, Position } from '../../types';
export interface GetSimpleBezierPathParams {
sourceX: number;
sourceY: number;
sourcePosition?: Position;
targetX: number;
targetY: number;
targetPosition?: Position;
}
export declare function getSimpleBezierPath({ sourceX, sourceY, sourcePosition, targetX, targetY, targetPosition, }: GetSimpleBezierPathParams): string;
export declare function getSimpleBezierCenter({ sourceX, sourceY, sourcePosition, targetX, targetY, targetPosition, }: GetSimpleBezierPathParams): [number, number, number, number];
declare const _default: React.MemoExoticComponent<({ sourceX, sourceY, targetX, targetY, sourcePosition, targetPosition, label, labelStyle, labelShowBg, labelBgStyle, labelBgPadding, labelBgBorderRadius, style, markerEnd, markerStart, }: EdgeProps) => JSX.Element>;
export default _default;

View File

@@ -0,0 +1,16 @@
import React from 'react';
import { EdgeSmoothStepProps, Position } from '../../types';
export interface GetSmoothStepPathParams {
sourceX: number;
sourceY: number;
sourcePosition?: Position;
targetX: number;
targetY: number;
targetPosition?: Position;
borderRadius?: number;
centerX?: number;
centerY?: number;
}
export declare function getSmoothStepPath({ sourceX, sourceY, sourcePosition, targetX, targetY, targetPosition, borderRadius, centerX, centerY, }: GetSmoothStepPathParams): string;
declare const _default: React.MemoExoticComponent<({ sourceX, sourceY, targetX, targetY, label, labelStyle, labelShowBg, labelBgStyle, labelBgPadding, labelBgBorderRadius, style, sourcePosition, targetPosition, markerEnd, markerStart, borderRadius, }: EdgeSmoothStepProps) => JSX.Element>;
export default _default;

View File

@@ -0,0 +1,4 @@
import React from 'react';
import { EdgeSmoothStepProps } from '../../types';
declare const _default: React.MemoExoticComponent<(props: EdgeSmoothStepProps) => JSX.Element>;
export default _default;

View File

@@ -0,0 +1,4 @@
import React from 'react';
import { EdgeProps } from '../../types';
declare const _default: React.MemoExoticComponent<({ sourceX, sourceY, targetX, targetY, label, labelStyle, labelShowBg, labelBgStyle, labelBgPadding, labelBgBorderRadius, style, markerEnd, markerStart, }: EdgeProps) => JSX.Element>;
export default _default;

View File

@@ -0,0 +1,5 @@
export { default as SimpleBezierEdge } from './SimpleBezierEdge';
export { default as SmoothStepEdge } from './SmoothStepEdge';
export { default as StepEdge } from './StepEdge';
export { default as StraightEdge } from './StraightEdge';
export { default as BezierEdge } from './BezierEdge';

View File

@@ -0,0 +1,14 @@
import { MouseEvent as ReactMouseEvent } from 'react';
import { GetState } from 'zustand';
import { Edge, MarkerType, Position, ReactFlowState } from '../../types';
export declare const getMarkerEnd: (markerType?: MarkerType, markerEndId?: string) => string;
export interface GetCenterParams {
sourceX: number;
sourceY: number;
targetX: number;
targetY: number;
sourcePosition?: Position;
targetPosition?: Position;
}
export declare const getCenter: ({ sourceX, sourceY, targetX, targetY, sourcePosition, targetPosition, }: GetCenterParams) => [number, number, number, number];
export declare function getMouseHandler(id: string, getState: GetState<ReactFlowState>, handler?: (event: ReactMouseEvent<SVGGElement, MouseEvent>, edge: Edge) => void): ((event: ReactMouseEvent<SVGGElement, MouseEvent>) => void) | undefined;

View File

@@ -0,0 +1,7 @@
import React, { ComponentType } from 'react';
import { EdgeProps, WrapEdgeProps } from '../../types';
declare const _default: (EdgeComponent: ComponentType<EdgeProps>) => React.MemoExoticComponent<{
({ id, className, type, data, onClick, onEdgeDoubleClick, selected, animated, label, labelStyle, labelShowBg, labelBgStyle, labelBgPadding, labelBgBorderRadius, style, source, target, sourceX, sourceY, targetX, targetY, sourcePosition, targetPosition, elementsSelectable, hidden, sourceHandleId, targetHandleId, onContextMenu, onMouseEnter, onMouseMove, onMouseLeave, edgeUpdaterRadius, onEdgeUpdate, onEdgeUpdateStart, onEdgeUpdateEnd, markerEnd, markerStart, rfId, }: WrapEdgeProps): JSX.Element | null;
displayName: string;
}>;
export default _default;

View File

@@ -0,0 +1,24 @@
import { MouseEvent as ReactMouseEvent } from 'react';
import { GetState, SetState } from 'zustand';
import { OnConnect, ConnectionMode, Connection, HandleType, ReactFlowState } from '../../types';
declare type ValidConnectionFunc = (connection: Connection) => boolean;
declare type Result = {
elementBelow: Element | null;
isValid: boolean;
connection: Connection;
isHoveringHandle: boolean;
};
export declare function checkElementBelowIsValid(event: MouseEvent, connectionMode: ConnectionMode, isTarget: boolean, nodeId: string, handleId: string | null, isValidConnection: ValidConnectionFunc, doc: Document | ShadowRoot): Result;
export declare function handleMouseDown({ event, handleId, nodeId, onConnect, isTarget, getState, setState, isValidConnection, elementEdgeUpdaterType, onEdgeUpdateEnd, }: {
event: ReactMouseEvent;
handleId: string | null;
nodeId: string;
onConnect: OnConnect;
isTarget: boolean;
getState: GetState<ReactFlowState>;
setState: SetState<ReactFlowState>;
isValidConnection: ValidConnectionFunc;
elementEdgeUpdaterType?: HandleType;
onEdgeUpdateEnd?: (evt: MouseEvent) => void;
}): void;
export {};

View File

@@ -0,0 +1,5 @@
import React, { HTMLAttributes } from 'react';
import { HandleProps } from '../../types';
export declare type HandleComponentProps = HandleProps & Omit<HTMLAttributes<HTMLDivElement>, 'id'>;
declare const _default: React.MemoExoticComponent<React.ForwardRefExoticComponent<HandleProps & Omit<React.HTMLAttributes<HTMLDivElement>, "id"> & React.RefAttributes<HTMLDivElement>>>;
export default _default;

View File

@@ -0,0 +1,7 @@
import React from 'react';
import { NodeProps } from '../../types';
declare const _default: React.MemoExoticComponent<{
({ data, isConnectable, targetPosition, sourcePosition, }: NodeProps<any>): JSX.Element;
displayName: string;
}>;
export default _default;

View File

@@ -0,0 +1,5 @@
declare const GroupNode: {
(): null;
displayName: string;
};
export default GroupNode;

View File

@@ -0,0 +1,7 @@
import React from 'react';
import { NodeProps } from '../../types';
declare const _default: React.MemoExoticComponent<{
({ data, isConnectable, sourcePosition }: NodeProps<any>): JSX.Element;
displayName: string;
}>;
export default _default;

View File

@@ -0,0 +1,7 @@
import React from 'react';
import { NodeProps } from '../../types';
declare const _default: React.MemoExoticComponent<{
({ data, isConnectable, targetPosition }: NodeProps<any>): JSX.Element;
displayName: string;
}>;
export default _default;

View File

@@ -0,0 +1,12 @@
import { MouseEvent } from 'react';
import { GetState, SetState } from 'zustand';
import { HandleElement, Node, ReactFlowState } from '../../types';
export declare const getHandleBounds: (selector: string, nodeElement: HTMLDivElement, zoom: number) => HandleElement[] | null;
export declare function getMouseHandler(id: string, getState: GetState<ReactFlowState>, handler?: (event: MouseEvent, node: Node) => void): ((event: MouseEvent) => void) | undefined;
export declare function handleNodeClick({ id, store, }: {
id: string;
store: {
getState: GetState<ReactFlowState>;
setState: SetState<ReactFlowState>;
};
}): void;

View File

@@ -0,0 +1,7 @@
import React, { ComponentType } from 'react';
import { NodeProps, WrapNodeProps } from '../../types';
declare const _default: (NodeComponent: ComponentType<NodeProps>) => React.MemoExoticComponent<{
({ id, type, data, xPos, yPos, selected, onClick, onMouseEnter, onMouseMove, onMouseLeave, onContextMenu, onDoubleClick, style, className, isDraggable, isSelectable, isConnectable, selectNodesOnDrag, sourcePosition, targetPosition, hidden, resizeObserver, dragHandle, zIndex, isParent, noPanClassName, noDragClassName, initialized, }: WrapNodeProps): JSX.Element | null;
displayName: string;
}>;
export default _default;

View File

@@ -0,0 +1,13 @@
/**
* The nodes selection rectangle gets displayed when a user
* made a selection with on or several nodes
*/
import React, { MouseEvent } from 'react';
import { Node } from '../../types';
export interface NodesSelectionProps {
onSelectionContextMenu?: (event: MouseEvent, nodes: Node[]) => void;
noPanClassName?: string;
}
declare function NodesSelection({ onSelectionContextMenu, noPanClassName }: NodesSelectionProps): JSX.Element | null;
declare const _default: React.MemoExoticComponent<typeof NodesSelection>;
export default _default;

View File

@@ -0,0 +1,8 @@
/// <reference types="react" />
import { OnSelectionChangeFunc } from '../../types';
interface SelectionListenerProps {
onSelectionChange: OnSelectionChangeFunc;
}
declare function SelectionListener({ onSelectionChange }: SelectionListenerProps): null;
declare const _default: import("react").MemoExoticComponent<typeof SelectionListener>;
export default _default;

View File

@@ -0,0 +1,4 @@
import { ReactFlowProps } from '../../types';
declare type StoreUpdaterProps = Pick<ReactFlowProps, 'nodes' | 'edges' | 'defaultNodes' | 'defaultEdges' | 'onConnect' | 'onConnectStart' | 'onConnectStop' | 'onConnectEnd' | 'onClickConnectStart' | 'onClickConnectStop' | 'onClickConnectEnd' | 'nodesDraggable' | 'nodesConnectable' | 'minZoom' | 'maxZoom' | 'nodeExtent' | 'onNodesChange' | 'onEdgesChange' | 'elementsSelectable' | 'connectionMode' | 'snapToGrid' | 'snapGrid' | 'translateExtent' | 'connectOnClick' | 'defaultEdgeOptions' | 'fitView' | 'fitViewOptions' | 'onNodesDelete' | 'onEdgesDelete' | 'onNodeDragStart' | 'onNodeDrag' | 'onNodeDragStop' | 'onSelectionDragStart' | 'onSelectionDrag' | 'onSelectionDragStop'>;
declare const StoreUpdater: ({ nodes, edges, defaultNodes, defaultEdges, onConnect, onConnectStart, onConnectStop, onConnectEnd, onClickConnectStart, onClickConnectStop, onClickConnectEnd, nodesDraggable, nodesConnectable, minZoom, maxZoom, nodeExtent, onNodesChange, onEdgesChange, elementsSelectable, connectionMode, snapGrid, snapToGrid, translateExtent, connectOnClick, defaultEdgeOptions, fitView, fitViewOptions, onNodesDelete, onEdgesDelete, onNodeDrag, onNodeDragStart, onNodeDragStop, onSelectionDrag, onSelectionDragStart, onSelectionDragStop, }: StoreUpdaterProps) => null;
export default StoreUpdater;

View File

@@ -0,0 +1,9 @@
/**
* The user selection rectangle gets displayed when a user drags the mouse while pressing shift
*/
import React from 'react';
declare type UserSelectionProps = {
selectionKeyPressed: boolean;
};
declare const _default: React.MemoExoticComponent<({ selectionKeyPressed }: UserSelectionProps) => JSX.Element | null>;
export default _default;

View File

@@ -0,0 +1,10 @@
import React from 'react';
interface MarkerDefinitionsProps {
defaultColor: string;
rfId?: string;
}
declare const _default: React.MemoExoticComponent<{
({ defaultColor, rfId }: MarkerDefinitionsProps): JSX.Element;
displayName: string;
}>;
export default _default;

View File

@@ -0,0 +1,9 @@
/// <reference types="react" />
import { MarkerType, EdgeMarker } from '../../types';
declare type SymbolProps = Omit<EdgeMarker, 'type'>;
export declare const MarkerSymbols: {
arrow: ({ color, strokeWidth }: SymbolProps) => JSX.Element;
arrowclosed: ({ color, strokeWidth }: SymbolProps) => JSX.Element;
};
export declare function useMarkerSymbol(type: MarkerType): (({ color, strokeWidth }: SymbolProps) => JSX.Element) | (() => null);
export default MarkerSymbols;

View File

@@ -0,0 +1,29 @@
import React, { CSSProperties } from 'react';
import { Edge, ConnectionLineType, ConnectionLineComponent, OnEdgeUpdateFunc, HandleType, EdgeTypesWrapped } from '../../types';
interface EdgeRendererProps {
edgeTypes: EdgeTypesWrapped;
connectionLineType: ConnectionLineType;
connectionLineStyle?: CSSProperties;
connectionLineComponent?: ConnectionLineComponent;
connectionLineContainerStyle?: CSSProperties;
onEdgeClick?: (event: React.MouseEvent, node: Edge) => void;
onEdgeDoubleClick?: (event: React.MouseEvent, edge: Edge) => void;
defaultMarkerColor: string;
onlyRenderVisibleElements: boolean;
onEdgeUpdate?: OnEdgeUpdateFunc;
onEdgeContextMenu?: (event: React.MouseEvent, edge: Edge) => void;
onEdgeMouseEnter?: (event: React.MouseEvent, edge: Edge) => void;
onEdgeMouseMove?: (event: React.MouseEvent, edge: Edge) => void;
onEdgeMouseLeave?: (event: React.MouseEvent, edge: Edge) => void;
onEdgeUpdateStart?: (event: React.MouseEvent, edge: Edge, handleType: HandleType) => void;
onEdgeUpdateEnd?: (event: MouseEvent, edge: Edge, handleType: HandleType) => void;
edgeUpdaterRadius?: number;
noPanClassName?: string;
elevateEdgesOnSelect: boolean;
rfId?: string;
}
declare const _default: React.MemoExoticComponent<{
(props: EdgeRendererProps): JSX.Element | null;
displayName: string;
}>;
export default _default;

View File

@@ -0,0 +1,26 @@
import { EdgeTypes, EdgeTypesWrapped, HandleElement, NodeHandleBounds, NodeInternals, Position, Rect, Transform, XYPosition } from '../../types';
export declare type CreateEdgeTypes = (edgeTypes: EdgeTypes) => EdgeTypesWrapped;
export declare function createEdgeTypes(edgeTypes: EdgeTypes): EdgeTypesWrapped;
export declare function getHandlePosition(position: Position, nodeRect: Rect, handle?: any | null): XYPosition;
export declare function getHandle(bounds: HandleElement[], handleId: string | null): HandleElement | null;
interface EdgePositions {
sourceX: number;
sourceY: number;
targetX: number;
targetY: number;
}
export declare const getEdgePositions: (sourceNodeRect: Rect, sourceHandle: HandleElement | unknown, sourcePosition: Position, targetNodeRect: Rect, targetHandle: HandleElement | unknown, targetPosition: Position) => EdgePositions;
interface IsEdgeVisibleParams {
sourcePos: XYPosition;
targetPos: XYPosition;
sourceWidth: number;
sourceHeight: number;
targetWidth: number;
targetHeight: number;
width: number;
height: number;
transform: Transform;
}
export declare function isEdgeVisible({ sourcePos, targetPos, sourceWidth, sourceHeight, targetWidth, targetHeight, width, height, transform, }: IsEdgeVisibleParams): boolean;
export declare function getNodeData(nodeInternals: NodeInternals, nodeId: string): [Rect, NodeHandleBounds | null, boolean];
export {};

View File

@@ -0,0 +1,10 @@
import React, { ReactNode } from 'react';
import { GraphViewProps } from '../GraphView';
export declare type FlowRendererProps = Omit<GraphViewProps, 'snapToGrid' | 'nodeTypes' | 'edgeTypes' | 'snapGrid' | 'connectionLineType' | 'connectionLineContainerStyle' | 'arrowHeadColor' | 'onlyRenderVisibleElements' | 'selectNodesOnDrag' | 'defaultMarkerColor'> & {
children: ReactNode;
};
declare const _default: React.MemoExoticComponent<{
({ children, onPaneClick, onPaneContextMenu, onPaneScroll, deleteKeyCode, onMove, onMoveStart, onMoveEnd, selectionKeyCode, multiSelectionKeyCode, zoomActivationKeyCode, elementsSelectable, zoomOnScroll, zoomOnPinch, panOnScroll, panOnScrollSpeed, panOnScrollMode, zoomOnDoubleClick, panOnDrag, translateExtent, minZoom, maxZoom, defaultZoom, defaultPosition, preventScrolling, onSelectionContextMenu, noWheelClassName, noPanClassName, }: FlowRendererProps): JSX.Element;
displayName: string;
}>;
export default _default;

View File

@@ -0,0 +1,26 @@
import React from 'react';
import { NodeTypesWrapped, EdgeTypesWrapped, ConnectionLineType, KeyCode, ReactFlowProps, CoordinateExtent } from '../../types';
export interface GraphViewProps extends Omit<ReactFlowProps, 'onSelectionChange' | 'nodes' | 'edges' | 'nodeTypes' | 'edgeTypes'> {
nodeTypes: NodeTypesWrapped;
edgeTypes: EdgeTypesWrapped;
selectionKeyCode: KeyCode | null;
deleteKeyCode: KeyCode | null;
multiSelectionKeyCode: KeyCode | null;
connectionLineType: ConnectionLineType;
onlyRenderVisibleElements: boolean;
translateExtent: CoordinateExtent;
minZoom: number;
maxZoom: number;
defaultZoom: number;
defaultPosition: [number, number];
defaultMarkerColor: string;
selectNodesOnDrag: boolean;
noDragClassName: string;
noWheelClassName: string;
noPanClassName: string;
}
declare const _default: React.MemoExoticComponent<{
({ nodeTypes, edgeTypes, onMove, onMoveStart, onMoveEnd, onInit, onNodeClick, onEdgeClick, onNodeDoubleClick, onEdgeDoubleClick, onNodeMouseEnter, onNodeMouseMove, onNodeMouseLeave, onNodeContextMenu, onSelectionContextMenu, connectionLineType, connectionLineStyle, connectionLineComponent, connectionLineContainerStyle, selectionKeyCode, multiSelectionKeyCode, zoomActivationKeyCode, deleteKeyCode, onlyRenderVisibleElements, elementsSelectable, selectNodesOnDrag, translateExtent, minZoom, maxZoom, defaultZoom, defaultPosition, preventScrolling, defaultMarkerColor, zoomOnScroll, zoomOnPinch, panOnScroll, panOnScrollSpeed, panOnScrollMode, zoomOnDoubleClick, panOnDrag, onPaneClick, onPaneScroll, onPaneContextMenu, onEdgeUpdate, onEdgeContextMenu, onEdgeMouseEnter, onEdgeMouseMove, onEdgeMouseLeave, edgeUpdaterRadius, onEdgeUpdateStart, onEdgeUpdateEnd, noDragClassName, noWheelClassName, noPanClassName, elevateEdgesOnSelect, id, }: GraphViewProps): JSX.Element;
displayName: string;
}>;
export default _default;

View File

@@ -0,0 +1,20 @@
import React from 'react';
import { NodeMouseHandler, NodeTypesWrapped } from '../../types';
interface NodeRendererProps {
nodeTypes: NodeTypesWrapped;
selectNodesOnDrag: boolean;
onNodeClick?: NodeMouseHandler;
onNodeDoubleClick?: NodeMouseHandler;
onNodeMouseEnter?: NodeMouseHandler;
onNodeMouseMove?: NodeMouseHandler;
onNodeMouseLeave?: NodeMouseHandler;
onNodeContextMenu?: NodeMouseHandler;
onlyRenderVisibleElements: boolean;
noPanClassName: string;
noDragClassName: string;
}
declare const _default: React.MemoExoticComponent<{
(props: NodeRendererProps): JSX.Element;
displayName: string;
}>;
export default _default;

View File

@@ -0,0 +1,3 @@
import { NodeTypes, NodeTypesWrapped } from '../../types';
export declare type CreateNodeTypes = (nodeTypes: NodeTypes) => NodeTypesWrapped;
export declare function createNodeTypes(nodeTypes: NodeTypes): NodeTypesWrapped;

View File

@@ -0,0 +1,3 @@
import { FC, PropsWithChildren } from 'react';
declare const Wrapper: FC<PropsWithChildren<{}>>;
export default Wrapper;

View File

@@ -0,0 +1,4 @@
import React from 'react';
import { ReactFlowProps } from '../../types';
declare const ReactFlow: React.ForwardRefExoticComponent<ReactFlowProps & React.RefAttributes<HTMLDivElement>>;
export default ReactFlow;

View File

@@ -0,0 +1,6 @@
import { EdgeTypes, EdgeTypesWrapped, NodeTypes, NodeTypesWrapped } from '../../types';
import { CreateEdgeTypes } from '../EdgeRenderer/utils';
import { CreateNodeTypes } from '../NodeRenderer/utils';
export declare function useNodeOrEdgeTypes(nodeOrEdgeTypes: NodeTypes, createTypes: CreateNodeTypes): NodeTypesWrapped;
export declare function useNodeOrEdgeTypes(nodeOrEdgeTypes: EdgeTypes, createTypes: CreateEdgeTypes): EdgeTypesWrapped;
export declare function injectStyle(css: string): void;

View File

@@ -0,0 +1,6 @@
import { ReactNode } from 'react';
declare type ViewportProps = {
children: ReactNode;
};
declare function Viewport({ children }: ViewportProps): JSX.Element;
export default Viewport;

View File

@@ -0,0 +1,7 @@
/// <reference types="react" />
import { FlowRendererProps } from '../FlowRenderer';
declare type ZoomPaneProps = Omit<FlowRendererProps, 'deleteKeyCode' | 'selectionKeyCode' | 'multiSelectionKeyCode' | 'noDragClassName'> & {
selectionKeyPressed: boolean;
};
declare const ZoomPane: ({ onMove, onMoveStart, onMoveEnd, zoomOnScroll, zoomOnPinch, panOnScroll, panOnScrollSpeed, panOnScrollMode, zoomOnDoubleClick, selectionKeyPressed, elementsSelectable, panOnDrag, translateExtent, minZoom, maxZoom, defaultZoom, defaultPosition, zoomActivationKeyCode, preventScrolling, children, noWheelClassName, noPanClassName, }: ZoomPaneProps) => JSX.Element;
export default ZoomPane;

View File

@@ -0,0 +1,5 @@
/// <reference types="react" />
export declare const NodeIdContext: import("react").Context<string | null>;
export declare const Provider: import("react").Provider<string | null>;
export declare const Consumer: import("react").Consumer<string | null>;
export default NodeIdContext;

View File

@@ -0,0 +1,18 @@
import { RefObject } from 'react';
import { D3DragEvent, SubjectPosition } from 'd3-drag';
export declare type UseDragEvent = D3DragEvent<HTMLDivElement, null, SubjectPosition>;
export declare type UseDragData = {
dx: number;
dy: number;
};
declare type UseDragParams = {
nodeRef: RefObject<Element>;
disabled?: boolean;
noDragClassName?: string;
handleSelector?: string;
nodeId?: string;
isSelectable?: boolean;
selectNodesOnDrag?: boolean;
};
declare function useDrag({ nodeRef, disabled, noDragClassName, handleSelector, nodeId, isSelectable, selectNodesOnDrag, }: UseDragParams): boolean;
export default useDrag;

View File

@@ -0,0 +1,11 @@
import { RefObject } from 'react';
import { CoordinateExtent, Node, NodeDragItem, NodeInternals, XYPosition } from '../../types';
export declare function isParentSelected(node: Node, nodeInternals: NodeInternals): boolean;
export declare function hasSelector(target: Element, selector: string, nodeRef: RefObject<Element>): boolean;
export declare function getDragItems(nodeInternals: NodeInternals, mousePos: XYPosition, nodeId?: string): NodeDragItem[];
export declare function updatePosition(dragItem: NodeDragItem, mousePos: XYPosition, snapToGrid: boolean, [snapX, snapY]: [number, number], nodeInternals: NodeInternals, nodeExtent?: CoordinateExtent): NodeDragItem;
export declare function getEventHandlerParams({ nodeId, dragItems, nodeInternals, }: {
nodeId?: string;
dragItems: NodeDragItem[];
nodeInternals: NodeInternals;
}): [Node, Node[]];

View File

@@ -0,0 +1,3 @@
import { Edge } from '../types';
declare function useEdges<EdgeData>(): Edge<EdgeData>[];
export default useEdges;

View File

@@ -0,0 +1,7 @@
import { KeyCode } from '../types';
interface HookParams {
deleteKeyCode: KeyCode | null;
multiSelectionKeyCode: KeyCode | null;
}
declare const _default: ({ deleteKeyCode, multiSelectionKeyCode }: HookParams) => void;
export default _default;

View File

@@ -0,0 +1,6 @@
import { KeyCode } from '../types';
export interface UseKeyPressOptions {
target: Window | Document | HTMLElement | ShadowRoot | null;
}
declare const _default: (keyCode?: KeyCode | null, options?: UseKeyPressOptions) => boolean;
export default _default;

View File

@@ -0,0 +1,3 @@
import { Node } from '../types';
declare function useNodes<NodeData>(): Node<NodeData>[];
export default useNodes;

View File

@@ -0,0 +1,6 @@
import { SetStateAction, Dispatch } from 'react';
import { Node, NodeChange, Edge, EdgeChange } from '../types';
declare type OnChange<ChangesType> = (changes: ChangesType[]) => void;
export declare const useNodesState: <NodeData = any>(initialItems: Node<NodeData>[]) => [Node<NodeData>[], Dispatch<SetStateAction<Node<NodeData>[]>>, OnChange<NodeChange>];
export declare const useEdgesState: <EdgeData = any>(initialItems: Edge<EdgeData>[]) => [Edge<EdgeData>[], Dispatch<SetStateAction<Edge<EdgeData>[]>>, OnChange<EdgeChange>];
export {};

View File

@@ -0,0 +1,3 @@
import { OnInit } from '../types';
declare function useOnInitHandler(onInit: OnInit<any> | undefined): void;
export default useOnInitHandler;

View File

@@ -0,0 +1,2 @@
import { ReactFlowInstance } from '../types';
export default function useReactFlow<NodeData = any, EdgeData = any>(): ReactFlowInstance<NodeData, EdgeData>;

View File

@@ -0,0 +1,3 @@
import { MutableRefObject } from 'react';
declare function useResizeHandler(rendererNode: MutableRefObject<HTMLDivElement | null>): void;
export default useResizeHandler;

View File

@@ -0,0 +1,3 @@
import { UpdateNodeInternals } from '../types';
declare function useUpdateNodeInternals(): UpdateNodeInternals;
export default useUpdateNodeInternals;

View File

@@ -0,0 +1,3 @@
import { Viewport } from '../types';
declare function useViewport(): Viewport;
export default useViewport;

View File

@@ -0,0 +1,3 @@
import { ViewportHelperFunctions } from '../types';
declare const useViewportHelper: () => ViewportHelperFunctions;
export default useViewportHelper;

View File

@@ -0,0 +1,7 @@
import { NodeInternals, Edge } from '../types';
declare function useVisibleEdges(onlyRenderVisible: boolean, nodeInternals: NodeInternals, elevateEdgesOnSelect: boolean): {
edges: Edge<any>[];
level: number;
isMaxLevel: boolean;
}[];
export default useVisibleEdges;

View File

@@ -0,0 +1,2 @@
declare function useVisibleNodes(onlyRenderVisible: boolean): import("../types").Node<any>[];
export default useVisibleNodes;

View File

@@ -0,0 +1,23 @@
import ReactFlow from './container/ReactFlow';
export default ReactFlow;
export { default as Handle } from './components/Handle';
export { default as EdgeText } from './components/Edges/EdgeText';
export { default as StraightEdge } from './components/Edges/StraightEdge';
export { default as StepEdge } from './components/Edges/StepEdge';
export { default as BezierEdge, getBezierPath, getBezierCenter as getBezierEdgeCenter, } from './components/Edges/BezierEdge';
export { default as SimpleBezierEdge, getSimpleBezierPath, getSimpleBezierCenter as getSimpleBezierEdgeCenter, } from './components/Edges/SimpleBezierEdge';
export { default as SmoothStepEdge, getSmoothStepPath } from './components/Edges/SmoothStepEdge';
export * from './additional-components';
export { internalsSymbol } from './utils';
export { isNode, isEdge, addEdge, getOutgoers, getIncomers, getConnectedEdges, updateEdge, getTransformForBounds, getRectOfNodes, } from './utils/graph';
export { applyNodeChanges, applyEdgeChanges } from './utils/changes';
export { getMarkerEnd, getCenter as getEdgeCenter } from './components/Edges/utils';
export { default as useReactFlow } from './hooks/useReactFlow';
export { default as useUpdateNodeInternals } from './hooks/useUpdateNodeInternals';
export { default as useNodes } from './hooks/useNodes';
export { default as useEdges } from './hooks/useEdges';
export { default as useViewport } from './hooks/useViewport';
export { default as useKeyPress } from './hooks/useKeyPress';
export * from './hooks/useNodesEdgesState';
export { useStore, useStoreApi } from './store';
export * from './types';

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,14 @@
/// <reference types="react" />
import { ReactFlowState } from '../types';
declare const Provider: ({ initialStore, createStore, children, }: {
initialStore?: import("zustand").UseBoundStore<ReactFlowState, import("zustand").StoreApi<ReactFlowState>> | undefined;
createStore: () => import("zustand").UseBoundStore<ReactFlowState, import("zustand").StoreApi<ReactFlowState>>;
children: import("react").ReactNode;
}) => import("react").FunctionComponentElement<import("react").ProviderProps<import("zustand").UseBoundStore<ReactFlowState, import("zustand").StoreApi<ReactFlowState>> | undefined>>, useStore: import("zustand/context").UseContextStore<ReactFlowState>, useStoreApi: () => {
getState: import("zustand").GetState<ReactFlowState>;
setState: import("zustand").SetState<ReactFlowState>;
subscribe: import("zustand").Subscribe<ReactFlowState>;
destroy: import("zustand").Destroy;
};
declare const createStore: () => import("zustand").UseBoundStore<ReactFlowState, import("zustand").StoreApi<ReactFlowState>>;
export { Provider, useStore, createStore, useStoreApi };

View File

@@ -0,0 +1,4 @@
import { CoordinateExtent, ReactFlowStore } from '../types';
export declare const infiniteExtent: CoordinateExtent;
declare const initialState: ReactFlowStore;
export default initialState;

View File

@@ -0,0 +1,17 @@
import { GetState, SetState } from 'zustand';
import { Edge, EdgeSelectionChange, Node, NodeInternals, NodeSelectionChange, ReactFlowState, FitViewOptions } from '../types';
export declare function createNodeInternals(nodes: Node[], nodeInternals: NodeInternals): NodeInternals;
declare type InternalFitViewOptions = {
initial?: boolean;
} & FitViewOptions;
export declare function fitView(get: GetState<ReactFlowState>, options?: InternalFitViewOptions): boolean;
export declare function handleControlledNodeSelectionChange(nodeChanges: NodeSelectionChange[], nodeInternals: NodeInternals): Map<string, Node<any>>;
export declare function handleControlledEdgeSelectionChange(edgeChanges: EdgeSelectionChange[], edges: Edge[]): Edge<any>[];
declare type UpdateNodesAndEdgesParams = {
changedNodes: NodeSelectionChange[] | null;
changedEdges: EdgeSelectionChange[] | null;
get: GetState<ReactFlowState>;
set: SetState<ReactFlowState>;
};
export declare function updateNodesAndEdgesSelections({ changedNodes, changedEdges, get, set }: UpdateNodesAndEdgesParams): void;
export {};

View File

@@ -0,0 +1,44 @@
import { XYPosition, Dimensions } from './utils';
import { Node } from './nodes';
import { Edge } from './edges';
export declare type NodeDimensionChange = {
id: string;
type: 'dimensions';
dimensions: Dimensions;
};
export declare type NodePositionChange = {
id: string;
type: 'position';
position?: XYPosition;
positionAbsolute?: XYPosition;
dragging?: boolean;
};
export declare type NodeSelectionChange = {
id: string;
type: 'select';
selected: boolean;
};
export declare type NodeRemoveChange = {
id: string;
type: 'remove';
};
export declare type NodeAddChange<NodeData = any> = {
item: Node<NodeData>;
type: 'add';
};
export declare type NodeResetChange<NodeData = any> = {
item: Node<NodeData>;
type: 'reset';
};
export declare type NodeChange = NodeDimensionChange | NodePositionChange | NodeSelectionChange | NodeRemoveChange | NodeAddChange | NodeResetChange;
export declare type EdgeSelectionChange = NodeSelectionChange;
export declare type EdgeRemoveChange = NodeRemoveChange;
export declare type EdgeAddChange<EdgeData = any> = {
item: Edge<EdgeData>;
type: 'add';
};
export declare type EdgeResetChange<EdgeData = any> = {
item: Edge<EdgeData>;
type: 'reset';
};
export declare type EdgeChange = EdgeSelectionChange | EdgeRemoveChange | EdgeAddChange | EdgeResetChange;

View File

@@ -0,0 +1,122 @@
import React, { ButtonHTMLAttributes, CSSProperties, HTMLAttributes, MouseEvent as ReactMouseEvent, WheelEvent } from 'react';
import { OnSelectionChangeFunc, NodeTypes, EdgeTypes, Node, Edge, ConnectionMode, ConnectionLineType, ConnectionLineComponent, OnConnectStart, OnConnectStop, OnConnectEnd, OnConnect, CoordinateExtent, KeyCode, PanOnScrollMode, OnEdgeUpdateFunc, OnInit, ProOptions, AttributionPosition, DefaultEdgeOptions, FitViewOptions, BackgroundVariant, OnNodesDelete, OnEdgesDelete, OnNodesChange, OnEdgesChange, OnMove, OnMoveStart, OnMoveEnd, NodeDragHandler, NodeMouseHandler, SelectionDragHandler } from '.';
import { HandleType } from './handles';
export interface ReactFlowProps extends HTMLAttributes<HTMLDivElement> {
nodes?: Node[];
edges?: Edge[];
defaultNodes?: Node[];
defaultEdges?: Edge[];
defaultEdgeOptions?: DefaultEdgeOptions;
onNodesChange?: OnNodesChange;
onEdgesChange?: OnEdgesChange;
onNodeClick?: NodeMouseHandler;
onEdgeClick?: (event: React.MouseEvent, node: Edge) => void;
onNodeDoubleClick?: NodeMouseHandler;
onNodeMouseEnter?: NodeMouseHandler;
onNodeMouseMove?: NodeMouseHandler;
onNodeMouseLeave?: NodeMouseHandler;
onNodeContextMenu?: NodeMouseHandler;
onNodeDragStart?: NodeDragHandler;
onNodeDrag?: NodeDragHandler;
onNodeDragStop?: NodeDragHandler;
onNodesDelete?: OnNodesDelete;
onEdgesDelete?: OnEdgesDelete;
onConnect?: OnConnect;
onConnectStart?: OnConnectStart;
onConnectStop?: OnConnectStop;
onConnectEnd?: OnConnectEnd;
onClickConnectStart?: OnConnectStart;
onClickConnectStop?: OnConnectStop;
onClickConnectEnd?: OnConnectEnd;
onInit?: OnInit;
onMove?: OnMove;
onMoveStart?: OnMoveStart;
onMoveEnd?: OnMoveEnd;
onSelectionChange?: OnSelectionChangeFunc;
onSelectionDragStart?: SelectionDragHandler;
onSelectionDrag?: SelectionDragHandler;
onSelectionDragStop?: SelectionDragHandler;
onSelectionContextMenu?: (event: ReactMouseEvent, nodes: Node[]) => void;
onPaneScroll?: (event?: WheelEvent) => void;
onPaneClick?: (event: ReactMouseEvent) => void;
onPaneContextMenu?: (event: ReactMouseEvent) => void;
nodeTypes?: NodeTypes;
edgeTypes?: EdgeTypes;
connectionMode?: ConnectionMode;
connectionLineType?: ConnectionLineType;
connectionLineStyle?: CSSProperties;
connectionLineComponent?: ConnectionLineComponent;
connectionLineContainerStyle?: CSSProperties;
deleteKeyCode?: KeyCode | null;
selectionKeyCode?: KeyCode | null;
multiSelectionKeyCode?: KeyCode | null;
zoomActivationKeyCode?: KeyCode | null;
snapToGrid?: boolean;
snapGrid?: [number, number];
onlyRenderVisibleElements?: boolean;
nodesDraggable?: boolean;
nodesConnectable?: boolean;
elementsSelectable?: boolean;
selectNodesOnDrag?: boolean;
panOnDrag?: boolean;
minZoom?: number;
maxZoom?: number;
defaultZoom?: number;
defaultPosition?: [number, number];
translateExtent?: CoordinateExtent;
preventScrolling?: boolean;
nodeExtent?: CoordinateExtent;
defaultMarkerColor?: string;
zoomOnScroll?: boolean;
zoomOnPinch?: boolean;
panOnScroll?: boolean;
panOnScrollSpeed?: number;
panOnScrollMode?: PanOnScrollMode;
zoomOnDoubleClick?: boolean;
onEdgeUpdate?: OnEdgeUpdateFunc;
onEdgeContextMenu?: (event: ReactMouseEvent, edge: Edge) => void;
onEdgeMouseEnter?: (event: ReactMouseEvent, edge: Edge) => void;
onEdgeMouseMove?: (event: ReactMouseEvent, edge: Edge) => void;
onEdgeMouseLeave?: (event: ReactMouseEvent, edge: Edge) => void;
onEdgeDoubleClick?: (event: ReactMouseEvent, edge: Edge) => void;
onEdgeUpdateStart?: (event: ReactMouseEvent, edge: Edge, handleType: HandleType) => void;
onEdgeUpdateEnd?: (event: MouseEvent, edge: Edge, handleType: HandleType) => void;
edgeUpdaterRadius?: number;
noDragClassName?: string;
noWheelClassName?: string;
noPanClassName?: string;
fitView?: boolean;
fitViewOptions?: FitViewOptions;
connectOnClick?: boolean;
attributionPosition?: AttributionPosition;
proOptions?: ProOptions;
elevateEdgesOnSelect?: boolean;
}
export declare type ReactFlowRefType = HTMLDivElement;
export declare type GetMiniMapNodeAttribute<NodeData = any> = (node: Node<NodeData>) => string;
export interface MiniMapProps<NodeData = any> extends HTMLAttributes<SVGSVGElement> {
nodeColor?: string | GetMiniMapNodeAttribute<NodeData>;
nodeStrokeColor?: string | GetMiniMapNodeAttribute<NodeData>;
nodeClassName?: string | GetMiniMapNodeAttribute<NodeData>;
nodeBorderRadius?: number;
nodeStrokeWidth?: number;
maskColor?: string;
}
export interface ControlProps extends HTMLAttributes<HTMLDivElement> {
showZoom?: boolean;
showFitView?: boolean;
showInteractive?: boolean;
fitViewOptions?: FitViewOptions;
onZoomIn?: () => void;
onZoomOut?: () => void;
onFitView?: () => void;
onInteractiveChange?: (interactiveStatus: boolean) => void;
}
export interface ControlButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
}
export interface BackgroundProps extends HTMLAttributes<SVGElement> {
variant?: BackgroundVariant;
gap?: number;
color?: string;
size?: number;
}

View File

@@ -0,0 +1,159 @@
import React, { CSSProperties, ComponentType, HTMLAttributes, ReactNode } from 'react';
import { Connection } from './general';
import { HandleElement, HandleType } from './handles';
import { Node } from './nodes';
import { Position } from './utils';
export interface Edge<T = any> {
id: string;
type?: string;
source: string;
target: string;
sourceHandle?: string | null;
targetHandle?: string | null;
label?: string | ReactNode;
labelStyle?: CSSProperties;
labelShowBg?: boolean;
labelBgStyle?: CSSProperties;
labelBgPadding?: [number, number];
labelBgBorderRadius?: number;
style?: CSSProperties;
animated?: boolean;
hidden?: boolean;
data?: T;
className?: string;
sourceNode?: Node;
targetNode?: Node;
selected?: boolean;
markerStart?: EdgeMarkerType;
markerEnd?: EdgeMarkerType;
zIndex?: number;
}
export declare type DefaultEdgeOptions = Omit<Edge, 'id' | 'source' | 'target' | 'sourceHandle' | 'targetHandle' | 'sourceNode' | 'targetNode'>;
export interface EdgeProps<T = any> {
id: string;
source: string;
target: string;
sourceX: number;
sourceY: number;
targetX: number;
targetY: number;
selected?: boolean;
animated?: boolean;
sourcePosition: Position;
targetPosition: Position;
label?: string | ReactNode;
labelStyle?: CSSProperties;
labelShowBg?: boolean;
labelBgStyle?: CSSProperties;
labelBgPadding?: [number, number];
labelBgBorderRadius?: number;
style?: CSSProperties;
data?: T;
sourceHandleId?: string | null;
targetHandleId?: string | null;
markerStart?: string;
markerEnd?: string;
curvature?: number;
}
export declare type BaseEdgeProps = Pick<EdgeProps, 'label' | 'labelStyle' | 'labelShowBg' | 'labelBgStyle' | 'labelBgPadding' | 'labelBgBorderRadius' | 'style' | 'markerStart' | 'markerEnd'> & {
centerX: number;
centerY: number;
path: string;
};
export declare type EdgeMouseHandler = (event: React.MouseEvent, edge: Edge) => void;
export interface WrapEdgeProps<T = any> {
id: string;
className?: string;
type: string;
data?: T;
onClick?: EdgeMouseHandler;
onEdgeDoubleClick?: EdgeMouseHandler;
selected: boolean;
animated?: boolean;
label?: string | ReactNode;
labelStyle?: CSSProperties;
labelShowBg?: boolean;
labelBgStyle?: CSSProperties;
labelBgPadding?: [number, number];
labelBgBorderRadius?: number;
style?: CSSProperties;
source: string;
target: string;
sourceHandleId?: string | null;
targetHandleId?: string | null;
sourceX: number;
sourceY: number;
targetX: number;
targetY: number;
sourcePosition: Position;
targetPosition: Position;
elementsSelectable?: boolean;
hidden?: boolean;
onEdgeUpdate?: OnEdgeUpdateFunc;
onContextMenu?: EdgeMouseHandler;
onMouseEnter?: EdgeMouseHandler;
onMouseMove?: EdgeMouseHandler;
onMouseLeave?: EdgeMouseHandler;
edgeUpdaterRadius?: number;
onEdgeUpdateStart?: (event: React.MouseEvent, edge: Edge, handleType: HandleType) => void;
onEdgeUpdateEnd?: (event: MouseEvent, edge: Edge, handleType: HandleType) => void;
markerStart?: EdgeMarkerType;
markerEnd?: EdgeMarkerType;
rfId?: string;
}
export interface EdgeSmoothStepProps<T = any> extends EdgeProps<T> {
borderRadius?: number;
}
export interface EdgeTextProps extends HTMLAttributes<SVGElement> {
x: number;
y: number;
label?: string | ReactNode;
labelStyle?: CSSProperties;
labelShowBg?: boolean;
labelBgStyle?: CSSProperties;
labelBgPadding?: [number, number];
labelBgBorderRadius?: number;
}
export declare enum ConnectionLineType {
Bezier = "default",
Straight = "straight",
Step = "step",
SmoothStep = "smoothstep",
SimpleBezier = "simplebezier"
}
export declare type ConnectionLineComponentProps = {
connectionLineStyle?: CSSProperties;
connectionLineType: ConnectionLineType;
fromNode?: Node;
fromHandle?: HandleElement;
fromX: number;
fromY: number;
toX: number;
toY: number;
fromPosition: Position;
toPosition: Position;
sourceX: number;
sourceY: number;
sourcePosition?: Position;
targetX: number;
targetY: number;
targetPosition?: Position;
sourceNode?: Node;
sourceHandle?: HandleElement;
};
export declare type ConnectionLineComponent = ComponentType<ConnectionLineComponentProps>;
export declare type OnEdgeUpdateFunc<T = any> = (oldEdge: Edge<T>, newConnection: Connection) => void;
export interface EdgeMarker {
type: MarkerType;
color?: string;
width?: number;
height?: number;
markerUnits?: string;
orient?: string;
strokeWidth?: number;
}
export declare type EdgeMarkerType = string | EdgeMarker;
export declare enum MarkerType {
Arrow = "arrow",
ArrowClosed = "arrowclosed"
}

View File

@@ -0,0 +1,188 @@
import { MouseEvent as ReactMouseEvent, ComponentType, MemoExoticComponent } from 'react';
import { Selection as D3Selection, ZoomBehavior } from 'd3';
import { XYPosition, Rect, Transform, CoordinateExtent } from './utils';
import { NodeChange, EdgeChange } from './changes';
import { Node, NodeInternals, NodeDimensionUpdate, NodeProps, WrapNodeProps, NodeDragItem, NodeDragHandler, SelectionDragHandler } from './nodes';
import { Edge, EdgeProps, WrapEdgeProps } from './edges';
import { HandleType, StartHandle } from './handles';
import { DefaultEdgeOptions } from '.';
import { ReactFlowInstance } from './instance';
export declare type NodeTypes = {
[key: string]: ComponentType<NodeProps>;
};
export declare type NodeTypesWrapped = {
[key: string]: MemoExoticComponent<ComponentType<WrapNodeProps>>;
};
export declare type EdgeTypes = {
[key: string]: ComponentType<EdgeProps>;
};
export declare type EdgeTypesWrapped = {
[key: string]: MemoExoticComponent<ComponentType<WrapEdgeProps>>;
};
export declare type FitView = (fitViewOptions?: FitViewOptions) => void;
export declare type Project = (position: XYPosition) => XYPosition;
export declare type OnNodesChange = (nodes: NodeChange[]) => void;
export declare type OnEdgesChange = (nodes: EdgeChange[]) => void;
export declare type OnNodesDelete = (nodes: Node[]) => void;
export declare type OnEdgesDelete = (edges: Edge[]) => void;
export declare type OnMove = (event: MouseEvent | TouchEvent, viewport: Viewport) => void;
export declare type OnMoveStart = OnMove;
export declare type OnMoveEnd = OnMove;
export declare type ZoomInOut = (options?: ViewportHelperFunctionOptions) => void;
export declare type ZoomTo = (zoomLevel: number, options?: ViewportHelperFunctionOptions) => void;
export declare type GetZoom = () => number;
export declare type GetViewport = () => Viewport;
export declare type SetViewport = (viewport: Viewport, options?: ViewportHelperFunctionOptions) => void;
export declare type SetCenter = (x: number, y: number, options?: SetCenterOptions) => void;
export declare type FitBounds = (bounds: Rect, options?: FitBoundsOptions) => void;
export declare 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 declare enum ConnectionMode {
Strict = "strict",
Loose = "loose"
}
export declare type OnConnect = (connection: Connection) => void;
export declare type FitViewOptions = {
padding?: number;
includeHiddenNodes?: boolean;
minZoom?: number;
maxZoom?: number;
duration?: number;
};
export declare type OnConnectStartParams = {
nodeId: string | null;
handleId: string | null;
handleType: HandleType | null;
};
export declare type OnConnectStart = (event: ReactMouseEvent, params: OnConnectStartParams) => void;
export declare type OnConnectStop = (event: MouseEvent) => void;
export declare type OnConnectEnd = (event: MouseEvent) => void;
export declare enum BackgroundVariant {
Lines = "lines",
Dots = "dots"
}
export declare type Viewport = {
x: number;
y: number;
zoom: number;
};
export declare type KeyCode = string | Array<string>;
export declare type SnapGrid = [number, number];
export declare enum PanOnScrollMode {
Free = "free",
Vertical = "vertical",
Horizontal = "horizontal"
}
export declare type ViewportHelperFunctionOptions = {
duration?: number;
};
export declare type SetCenterOptions = ViewportHelperFunctionOptions & {
zoom?: number;
};
export declare type FitBoundsOptions = ViewportHelperFunctionOptions & {
padding?: number;
};
export declare type UnselectNodesAndEdgesParams = {
nodes?: Node[];
edges?: Edge[];
};
export interface ViewportHelperFunctions {
zoomIn: ZoomInOut;
zoomOut: ZoomInOut;
zoomTo: ZoomTo;
getZoom: GetZoom;
setViewport: SetViewport;
getViewport: GetViewport;
fitView: FitView;
setCenter: SetCenter;
fitBounds: FitBounds;
project: Project;
viewportInitialized: boolean;
}
export declare type ReactFlowStore = {
width: number;
height: number;
transform: Transform;
nodeInternals: NodeInternals;
edges: Edge[];
onNodesChange: OnNodesChange | null;
onEdgesChange: OnEdgesChange | null;
hasDefaultNodes: boolean;
hasDefaultEdges: boolean;
domNode: HTMLElement | null;
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;
nodesSelectionActive: boolean;
userSelectionActive: boolean;
connectionNodeId: string | null;
connectionHandleId: string | null;
connectionHandleType: HandleType | null;
connectionPosition: XYPosition;
connectionMode: ConnectionMode;
snapToGrid: boolean;
snapGrid: SnapGrid;
nodesDraggable: boolean;
nodesConnectable: boolean;
elementsSelectable: boolean;
multiSelectionActive: boolean;
reactFlowVersion: string;
connectionStartHandle: StartHandle | null;
onNodeDragStart?: NodeDragHandler;
onNodeDrag?: NodeDragHandler;
onNodeDragStop?: NodeDragHandler;
onSelectionDragStart?: SelectionDragHandler;
onSelectionDrag?: SelectionDragHandler;
onSelectionDragStop?: SelectionDragHandler;
onConnect?: OnConnect;
onConnectStart?: OnConnectStart;
onConnectStop?: OnConnectStop;
onConnectEnd?: OnConnectEnd;
onClickConnectStart?: OnConnectStart;
onClickConnectStop?: OnConnectStop;
onClickConnectEnd?: OnConnectEnd;
connectOnClick: boolean;
defaultEdgeOptions?: DefaultEdgeOptions;
fitViewOnInit: boolean;
fitViewOnInitDone: boolean;
fitViewOnInitOptions: FitViewOptions | undefined;
onNodesDelete?: OnNodesDelete;
onEdgesDelete?: OnEdgesDelete;
};
export declare type ReactFlowActions = {
setNodes: (nodes: Node[]) => void;
setEdges: (edges: Edge[]) => void;
setDefaultNodesAndEdges: (nodes?: Node[], edges?: Edge[]) => void;
updateNodeDimensions: (updates: NodeDimensionUpdate[]) => void;
updateNodePositions: (nodeDragItems: NodeDragItem[], 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;
reset: () => void;
};
export declare type ReactFlowState = ReactFlowStore & ReactFlowActions;
export declare type UpdateNodeInternals = (nodeId: string) => void;
export declare type OnSelectionChangeParams = {
nodes: Node[];
edges: Edge[];
};
export declare type OnSelectionChangeFunc = (params: OnSelectionChangeParams) => void;
export declare type AttributionPosition = 'top-left' | 'top-center' | 'top-right' | 'bottom-left' | 'bottom-center' | 'bottom-right';
export declare type ProOptions = {
account: string;
hideAttribution: boolean;
};

View File

@@ -0,0 +1,20 @@
import { XYPosition, Position, Dimensions } from './utils';
import { OnConnect, Connection } from './general';
export declare 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;
}

View File

@@ -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';

View File

@@ -0,0 +1,31 @@
import { ViewportHelperFunctions, Viewport } from './general';
import { Node } from './nodes';
import { Edge } from './edges';
export declare type ReactFlowJsonObject<NodeData = any, EdgeData = any> = {
nodes: Node<NodeData>[];
edges: Edge<EdgeData>[];
viewport: Viewport;
};
export declare namespace Instance {
type GetNodes<NodeData> = () => Node<NodeData>[];
type SetNodes<NodeData> = (payload: Node<NodeData>[] | ((nodes: Node<NodeData>[]) => Node<NodeData>[])) => void;
type AddNodes<NodeData> = (payload: Node<NodeData>[] | Node<NodeData>) => void;
type GetNode<NodeData> = (id: string) => Node<NodeData> | undefined;
type GetEdges<EdgeData> = () => Edge<EdgeData>[];
type SetEdges<EdgeData> = (payload: Edge<EdgeData>[] | ((edges: Edge<EdgeData>[]) => Edge<EdgeData>[])) => void;
type GetEdge<EdgeData> = (id: string) => Edge<EdgeData> | undefined;
type AddEdges<EdgeData> = (payload: Edge<EdgeData>[] | Edge<EdgeData>) => void;
type ToObject<NodeData = any, EdgeData = any> = () => ReactFlowJsonObject<NodeData, EdgeData>;
}
export declare 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>;
viewportInitialized: boolean;
} & Omit<ViewportHelperFunctions, 'initialized'>;

View File

@@ -0,0 +1,105 @@
import { CSSProperties, MouseEvent as ReactMouseEvent } from 'react';
import { XYPosition, Position, CoordinateExtent } from './utils';
import { HandleElement } from './handles';
import { internalsSymbol } from '../utils';
export interface Node<T = any> {
id: string;
position: XYPosition;
data: T;
type?: string;
style?: CSSProperties;
className?: string;
targetPosition?: Position;
sourcePosition?: Position;
hidden?: boolean;
selected?: boolean;
dragging?: boolean;
draggable?: boolean;
selectable?: boolean;
connectable?: boolean;
dragHandle?: string;
width?: number | null;
height?: number | null;
parentNode?: string;
zIndex?: number;
extent?: 'parent' | CoordinateExtent;
expandParent?: boolean;
positionAbsolute?: XYPosition;
[internalsSymbol]?: {
z?: number;
handleBounds?: NodeHandleBounds;
isParent?: boolean;
};
}
export interface NodeProps<T = any> {
id: string;
type: string;
data: T;
selected: boolean;
isConnectable: boolean;
xPos: number;
yPos: number;
dragging: boolean;
zIndex: number;
targetPosition?: Position;
sourcePosition?: Position;
dragHandle?: string;
}
export declare type NodeMouseHandler = (event: ReactMouseEvent, node: Node) => void;
export declare type NodeDragHandler = (event: ReactMouseEvent, node: Node, nodes: Node[]) => void;
export declare type SelectionDragHandler = (event: ReactMouseEvent, nodes: Node[]) => void;
export interface WrapNodeProps<T = any> {
id: string;
type: string;
data: T;
selected: boolean;
isConnectable: boolean;
xPos: number;
yPos: number;
initialized: boolean;
isSelectable: boolean;
isDraggable: boolean;
selectNodesOnDrag: boolean;
onClick?: NodeMouseHandler;
onDoubleClick?: NodeMouseHandler;
onMouseEnter?: NodeMouseHandler;
onMouseMove?: NodeMouseHandler;
onMouseLeave?: NodeMouseHandler;
onContextMenu?: NodeMouseHandler;
style?: CSSProperties;
className?: string;
sourcePosition: Position;
targetPosition: Position;
hidden?: boolean;
resizeObserver: ResizeObserver | null;
dragHandle?: string;
zIndex: number;
isParent: boolean;
noPanClassName: string;
noDragClassName: string;
}
export declare type NodeHandleBounds = {
source: HandleElement[] | null;
target: HandleElement[] | null;
};
export declare type NodeDimensionUpdate = {
id: string;
nodeElement: HTMLDivElement;
forceUpdate?: boolean;
};
export declare type NodeInternals = Map<string, Node>;
export declare type NodeBounds = XYPosition & {
width: number | null;
height: number | null;
};
export declare type NodeDragItem = {
id: string;
position: XYPosition;
positionAbsolute: XYPosition;
distance: XYPosition;
width?: number | null;
height?: number | null;
extent?: 'parent' | CoordinateExtent;
parentNode?: string;
dragging?: boolean;
};

View File

@@ -0,0 +1,25 @@
export declare enum Position {
Left = "left",
Top = "top",
Right = "right",
Bottom = "bottom"
}
export interface XYPosition {
x: number;
y: number;
}
export declare 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 declare type Transform = [number, number, number];
export declare type CoordinateExtent = [[number, number], [number, number]];

View File

@@ -0,0 +1,9 @@
import { Node, Edge, EdgeChange, NodeChange } from '../types';
export declare function applyNodeChanges<NodeData = any>(changes: NodeChange[], nodes: Node<NodeData>[]): Node<NodeData>[];
export declare function applyEdgeChanges<EdgeData = any>(changes: EdgeChange[], edges: Edge<EdgeData>[]): Edge<EdgeData>[];
export declare const createSelectionChange: (id: string, selected: boolean) => {
id: string;
type: string;
selected: boolean;
};
export declare function getSelectionChanges(items: any[], selectedIds: string[]): any;

View File

@@ -0,0 +1,15 @@
import { Selection as D3Selection } from 'd3';
import { Node, Edge, Connection, EdgeMarkerType, Transform, XYPosition, Rect, NodeInternals } from '../types';
export declare const isEdge: (element: Node | Connection | Edge) => element is Edge<any>;
export declare const isNode: (element: Node | Connection | Edge) => element is Node<any>;
export declare const getOutgoers: <T = any, U extends T = T>(node: Node<U>, nodes: Node<T>[], edges: Edge[]) => Node<T>[];
export declare const getIncomers: <T = any, U extends T = T>(node: Node<U>, nodes: Node<T>[], edges: Edge[]) => Node<T>[];
export declare const getMarkerId: (marker: EdgeMarkerType | undefined, rfId?: string) => string;
export declare const addEdge: (edgeParams: Edge | Connection, edges: Edge[]) => Edge[];
export declare const updateEdge: (oldEdge: Edge, newConnection: Connection, edges: Edge[]) => Edge[];
export declare const pointToRendererPoint: ({ x, y }: XYPosition, [tx, ty, tScale]: Transform, snapToGrid: boolean, [snapX, snapY]: [number, number]) => XYPosition;
export declare const getRectOfNodes: (nodes: Node[]) => Rect;
export declare const getNodesInside: (nodeInternals: NodeInternals, rect: Rect, [tx, ty, tScale]?: Transform, partially?: boolean, excludeNonSelectableNodes?: boolean) => Node[];
export declare const getConnectedEdges: (nodes: Node[], edges: Edge[]) => Edge[];
export declare const getTransformForBounds: (bounds: Rect, width: number, height: number, minZoom: number, maxZoom: number, padding?: number) => Transform;
export declare const getD3Transition: (selection: D3Selection<Element, unknown, null, undefined>, duration?: number) => import("d3-transition").Transition<Element, unknown, null, undefined>;

View File

@@ -0,0 +1,14 @@
import { Dimensions, XYPosition, CoordinateExtent, Box, Rect } from '../types';
export declare const getDimensions: (node: HTMLDivElement) => Dimensions;
export declare const clamp: (val: number, min?: number, max?: number) => number;
export declare const clampPosition: (position: XYPosition, extent: CoordinateExtent) => {
x: number;
y: number;
};
export declare const getHostForElement: (element: HTMLElement) => Document | ShadowRoot;
export declare const getBoundsOfBoxes: (box1: Box, box2: Box) => Box;
export declare const rectToBox: ({ x, y, width, height }: Rect) => Box;
export declare const boxToRect: ({ x, y, x2, y2 }: Box) => Rect;
export declare const getBoundsofRects: (rect1: Rect, rect2: Rect) => Rect;
export declare const isNumeric: (n: any) => n is number;
export declare const internalsSymbol: unique symbol;