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

21
frontend/node_modules/react-flow-renderer/LICENSE generated vendored Normal file
View File

@@ -0,0 +1,21 @@
MIT License
Copyright (c) 2019-2022 webkid GmbH
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.

117
frontend/node_modules/react-flow-renderer/README.md generated vendored Normal file
View File

@@ -0,0 +1,117 @@
![readme-header-dark](https://user-images.githubusercontent.com/3797215/156384064-08a889d6-73c0-4cbf-8ff3-28dc601d1f5f.svg#gh-dark-mode-only)
![readme-header](https://user-images.githubusercontent.com/3797215/156259138-fb9f59f8-52f2-474a-b78c-6570867e4ead.svg#gh-light-mode-only)
<div align="center">
![GitHub License MIT](https://img.shields.io/github/license/wbkd/react-flow?color=%23ff0072)
![npm downloads](https://img.shields.io/npm/dt/react-flow-renderer?color=%23FF0072&label=downloads)
![GitHub Repo stars](https://img.shields.io/github/stars/wbkd/react-flow?color=%23FF0072)
![GitHub release (latest by date)](https://img.shields.io/github/v/release/wbkd/react-flow?color=%23FF0072)
### Wire Your Ideas With React Flow!
A highly customizable React component for building interactive graphs and node-based editors.
[🚀 Getting Started](https://reactflow.dev/docs/getting-started/installation) | [📖 Documentation](https://reactflow.dev/docs/api/react-flow-props) | [📺 Examples](https://reactflow.dev/docs/examples/overview) | [☎️ Discord](https://discord.gg/RVmnytFmGW) | [💎 React Flow Pro](https://pro.reactflow.dev/pricing)
</div>
----
## Key Features
- **Easy to use:** Seamless zooming and panning, single- and multi selection of graph elements and keyboard shortcuts are supported out of the box
- **Customizable:** Different [node](https://reactflow.dev/docs/api/nodes/node-types) and [edge types](https://reactflow.dev/docs/api/edges/edge-types) and support for custom nodes with multiple handles and custom edges
- **Fast rendering:** Only nodes that have changed are re-rendered and only those in the viewport are displayed
- **Hooks and Utils:** [Hooks](https://reactflow.dev/docs/api/hooks/use-react-flow) for handling nodes, edges and the viewport and graph [helper functions](https://reactflow.dev/docs/api/graph-util-functions)
- **Plugin Components:** [Background](https://reactflow.dev/docs/api/plugin-components/background), [MiniMap](https://reactflow.dev/docs/api/plugin-components/minimap) and [Controls](https://reactflow.dev/docs/api/plugin-components/controls)
- **Reliable**: Written in [Typescript](https://www.typescriptlang.org/) and tested with [cypress](https://www.cypress.io/)
## Commercial Usage / Attribution
React Flow includes a small attribution that links to the React Flow website. **We expect companies who are using React Flow commercially to subscribe to [React Flow Pro](https://pro.reactflow.dev/pricing) if they want to remove the attribution.** By subscribing you get access to other exclusive services like advanced examples, individual support or prioritized bug reports. In non-commercial applications you may hide the attribution without subscribing but are welcome to [sponsor us on Github](https://github.com/sponsors/wbkd).
You can find more information in our [React Flow Pro FAQs](https://pro.reactflow.dev/faq).
## Installation
The easiest way to get the latest version of React Flow is to install it via npm:
```bash
npm install react-flow-renderer
```
## Quick Start
This is only a very basic usage example of React Flow. To see everything that is possible with the library, please refer to the [website](https://reactflow.dev) for [guides](https://reactflow.dev/docs/guides/custom-nodes), [examples](https://reactflow.dev/docs/examples/overview) and [API reference](https://reactflow.dev/docs/api/react-flow-props).
```jsx
import ReactFlow, { MiniMap, Controls } from 'react-flow-renderer';
function Flow({ nodes, edges, onNodesChange, onEdgesChange, onConnect }) {
return (
<ReactFlow
nodes={nodes}
edges={edges}
onNodesChange={onNodesChange}
onEdgesChange={onEdgesChange}
onConnect={onConnect}
>
<MiniMap />
<Controls />
</ReactFlow>
);
}
```
## Development
Before you start you need to build the project using `npm run build`. Then install the React Flow dependencies via `npm install` and the ones of the examples `cd example && npm install`.
If you want to contribute or develop custom features the easiest way is to start the dev server:
```sh
npm start
```
and the example app via:
```sh
cd example && npm start
```
The example app serves the content of the `example` folder and watches changes inside the `src` folder. The examples are using the source of the `src` folder.
## Testing
Testing is done with cypress. You can find the tests in the [`integration/flow`](/cypress/integration/flow) folder. In order to run the tests do:
```sh
npm run test
```
## Maintainers
React Flow is developed and maintained by [webkid](https://webkid.io), a web development agency with focus on data driven applications from Berlin. If you need help or want to talk to us about a collaboration, feel free to contact us:
* Moritz Klack • [Twitter](https://twitter.com/moklick) • [Github](https://github.com/moklick)
* Christopher Möller • [Twitter](https://twitter.com/chrtze) • [Github](https://github.com/chrtze)
You can also use our [contact form](https://pro.reactflow.dev/contact) or join the [React Flow Discord Server](https://discord.gg/Bqt6xrs).
## Community Packages
* [useUndoable](https://github.com/Infinium8/useUndoable) - Hook for undo/redo functionality with an explicit React Flow example
* [react-flow-smart-edge](https://github.com/tisoap/react-flow-smart-edge) - Custom edge that doesn't intersect with nodes
* [Feliz.ReactFlow](https://github.com/tforkmann/Feliz.ReactFlow) - Feliz React Bindings for React Flow
## Credits
React Flow was initially developed for [datablocks](https://datablocks.pro), a graph-based editor for transforming, analyzing and visualizing data in your browser. Under the hood, React Flow depends on these great libraries:
* [d3-zoom](https://github.com/d3/d3-zoom) - used for zoom, pan and drag interactions with the graph canvas
* [d3-drag](https://github.com/d3/d3-drag) - used for making the nodes draggable
* [zustand](https://github.com/pmndrs/zustand) - internal state management
## License
React Flow is [MIT licensed](https://github.com/wbkd/react-flow/blob/main/LICENSE).

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,196 @@
import { u as useStoreApi, _ as _slicedToArray, b as useStore, a as _defineProperty } from './index-a12c80bd.js';
import React, { memo, useState, useEffect } from 'react';
import cc from 'classcat';
import { u as useReactFlow } from './useReactFlow-993c30ca.js';
function _objectWithoutPropertiesLoose(source, excluded) {
if (source == null) return {};
var target = {};
var sourceKeys = Object.keys(source);
var key, i;
for (i = 0; i < sourceKeys.length; i++) {
key = sourceKeys[i];
if (excluded.indexOf(key) >= 0) continue;
target[key] = source[key];
}
return target;
}
function _objectWithoutProperties(source, excluded) {
if (source == null) return {};
var target = _objectWithoutPropertiesLoose(source, excluded);
var key, i;
if (Object.getOwnPropertySymbols) {
var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
for (i = 0; i < sourceSymbolKeys.length; i++) {
key = sourceSymbolKeys[i];
if (excluded.indexOf(key) >= 0) continue;
if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
target[key] = source[key];
}
}
return target;
}
function PlusIcon() {
return /*#__PURE__*/React.createElement("svg", {
xmlns: "http://www.w3.org/2000/svg",
viewBox: "0 0 32 32"
}, /*#__PURE__*/React.createElement("path", {
d: "M32 18.133H18.133V32h-4.266V18.133H0v-4.266h13.867V0h4.266v13.867H32z"
}));
}
function MinusIcon() {
return /*#__PURE__*/React.createElement("svg", {
xmlns: "http://www.w3.org/2000/svg",
viewBox: "0 0 32 5"
}, /*#__PURE__*/React.createElement("path", {
d: "M0 0h32v4.2H0z"
}));
}
function FitViewIcon() {
return /*#__PURE__*/React.createElement("svg", {
xmlns: "http://www.w3.org/2000/svg",
viewBox: "0 0 32 30"
}, /*#__PURE__*/React.createElement("path", {
d: "M3.692 4.63c0-.53.4-.938.939-.938h5.215V0H4.708C2.13 0 0 2.054 0 4.63v5.216h3.692V4.631zM27.354 0h-5.2v3.692h5.17c.53 0 .984.4.984.939v5.215H32V4.631A4.624 4.624 0 0027.354 0zm.954 24.83c0 .532-.4.94-.939.94h-5.215v3.768h5.215c2.577 0 4.631-2.13 4.631-4.707v-5.139h-3.692v5.139zm-23.677.94c-.531 0-.939-.4-.939-.94v-5.138H0v5.139c0 2.577 2.13 4.707 4.708 4.707h5.138V25.77H4.631z"
}));
}
function LockIcon() {
return /*#__PURE__*/React.createElement("svg", {
xmlns: "http://www.w3.org/2000/svg",
viewBox: "0 0 25 32"
}, /*#__PURE__*/React.createElement("path", {
d: "M21.333 10.667H19.81V7.619C19.81 3.429 16.38 0 12.19 0 8 0 4.571 3.429 4.571 7.619v3.048H3.048A3.056 3.056 0 000 13.714v15.238A3.056 3.056 0 003.048 32h18.285a3.056 3.056 0 003.048-3.048V13.714a3.056 3.056 0 00-3.048-3.047zM12.19 24.533a3.056 3.056 0 01-3.047-3.047 3.056 3.056 0 013.047-3.048 3.056 3.056 0 013.048 3.048 3.056 3.056 0 01-3.048 3.047zm4.724-13.866H7.467V7.619c0-2.59 2.133-4.724 4.723-4.724 2.591 0 4.724 2.133 4.724 4.724v3.048z"
}));
}
function UnlockIcon() {
return /*#__PURE__*/React.createElement("svg", {
xmlns: "http://www.w3.org/2000/svg",
viewBox: "0 0 25 32"
}, /*#__PURE__*/React.createElement("path", {
d: "M21.333 10.667H19.81V7.619C19.81 3.429 16.38 0 12.19 0c-4.114 1.828-1.37 2.133.305 2.438 1.676.305 4.42 2.59 4.42 5.181v3.048H3.047A3.056 3.056 0 000 13.714v15.238A3.056 3.056 0 003.048 32h18.285a3.056 3.056 0 003.048-3.048V13.714a3.056 3.056 0 00-3.048-3.047zM12.19 24.533a3.056 3.056 0 01-3.047-3.047 3.056 3.056 0 013.047-3.048 3.056 3.056 0 013.048 3.048 3.056 3.056 0 01-3.048 3.047z"
}));
}
var _excluded = ["children", "className"];
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
var ControlButton = function ControlButton(_ref) {
var children = _ref.children,
className = _ref.className,
rest = _objectWithoutProperties(_ref, _excluded);
return /*#__PURE__*/React.createElement("button", _objectSpread({
type: "button",
className: cc(['react-flow__controls-button', className])
}, rest), children);
};
var isInteractiveSelector = function isInteractiveSelector(s) {
return s.nodesDraggable && s.nodesConnectable && s.elementsSelectable;
};
var Controls = function Controls(_ref2) {
var style = _ref2.style,
_ref2$showZoom = _ref2.showZoom,
showZoom = _ref2$showZoom === void 0 ? true : _ref2$showZoom,
_ref2$showFitView = _ref2.showFitView,
showFitView = _ref2$showFitView === void 0 ? true : _ref2$showFitView,
_ref2$showInteractive = _ref2.showInteractive,
showInteractive = _ref2$showInteractive === void 0 ? true : _ref2$showInteractive,
fitViewOptions = _ref2.fitViewOptions,
onZoomIn = _ref2.onZoomIn,
onZoomOut = _ref2.onZoomOut,
onFitView = _ref2.onFitView,
onInteractiveChange = _ref2.onInteractiveChange,
className = _ref2.className,
children = _ref2.children;
var store = useStoreApi();
var _useState = useState(false),
_useState2 = _slicedToArray(_useState, 2),
isVisible = _useState2[0],
setIsVisible = _useState2[1];
var isInteractive = useStore(isInteractiveSelector);
var _useReactFlow = useReactFlow(),
zoomIn = _useReactFlow.zoomIn,
zoomOut = _useReactFlow.zoomOut,
fitView = _useReactFlow.fitView;
useEffect(function () {
setIsVisible(true);
}, []);
if (!isVisible) {
return null;
}
var onZoomInHandler = function onZoomInHandler() {
zoomIn === null || zoomIn === void 0 ? void 0 : zoomIn();
onZoomIn === null || onZoomIn === void 0 ? void 0 : onZoomIn();
};
var onZoomOutHandler = function onZoomOutHandler() {
zoomOut === null || zoomOut === void 0 ? void 0 : zoomOut();
onZoomOut === null || onZoomOut === void 0 ? void 0 : onZoomOut();
};
var onFitViewHandler = function onFitViewHandler() {
fitView === null || fitView === void 0 ? void 0 : fitView(fitViewOptions);
onFitView === null || onFitView === void 0 ? void 0 : onFitView();
};
var onToggleInteractivity = function onToggleInteractivity() {
store.setState({
nodesDraggable: !isInteractive,
nodesConnectable: !isInteractive,
elementsSelectable: !isInteractive
});
onInteractiveChange === null || onInteractiveChange === void 0 ? void 0 : onInteractiveChange(!isInteractive);
};
return /*#__PURE__*/React.createElement("div", {
className: cc(['react-flow__controls', className]),
style: style
}, showZoom && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ControlButton, {
onClick: onZoomInHandler,
className: "react-flow__controls-zoomin",
title: "zoom in",
"aria-label": "zoom in"
}, /*#__PURE__*/React.createElement(PlusIcon, null)), /*#__PURE__*/React.createElement(ControlButton, {
onClick: onZoomOutHandler,
className: "react-flow__controls-zoomout",
title: "zoom out",
"aria-label": "zoom out"
}, /*#__PURE__*/React.createElement(MinusIcon, null))), showFitView && /*#__PURE__*/React.createElement(ControlButton, {
className: "react-flow__controls-fitview",
onClick: onFitViewHandler,
title: "fit view",
"aria-label": "fit view"
}, /*#__PURE__*/React.createElement(FitViewIcon, null)), showInteractive && /*#__PURE__*/React.createElement(ControlButton, {
className: "react-flow__controls-interactive",
onClick: onToggleInteractivity,
title: "toggle interactivity",
"aria-label": "toggle interactivity"
}, isInteractive ? /*#__PURE__*/React.createElement(UnlockIcon, null) : /*#__PURE__*/React.createElement(LockIcon, null)), children);
};
Controls.displayName = 'Controls';
var index = /*#__PURE__*/memo(Controls);
export { ControlButton as C, _objectWithoutProperties as _, index as i };
//# sourceMappingURL=index-20df97c0.js.map

View File

@@ -0,0 +1 @@
{"version":3,"file":"index-20df97c0.js","sources":["../../node_modules/@babel/runtime/helpers/esm/objectWithoutPropertiesLoose.js","../../node_modules/@babel/runtime/helpers/esm/objectWithoutProperties.js"],"sourcesContent":["export default function _objectWithoutPropertiesLoose(source, excluded) {\n if (source == null) return {};\n var target = {};\n var sourceKeys = Object.keys(source);\n var key, i;\n\n for (i = 0; i < sourceKeys.length; i++) {\n key = sourceKeys[i];\n if (excluded.indexOf(key) >= 0) continue;\n target[key] = source[key];\n }\n\n return target;\n}","import objectWithoutPropertiesLoose from \"./objectWithoutPropertiesLoose.js\";\nexport default function _objectWithoutProperties(source, excluded) {\n if (source == null) return {};\n var target = objectWithoutPropertiesLoose(source, excluded);\n var key, i;\n\n if (Object.getOwnPropertySymbols) {\n var sourceSymbolKeys = Object.getOwnPropertySymbols(source);\n\n for (i = 0; i < sourceSymbolKeys.length; i++) {\n key = sourceSymbolKeys[i];\n if (excluded.indexOf(key) >= 0) continue;\n if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;\n target[key] = source[key];\n }\n }\n\n return target;\n}"],"names":["objectWithoutPropertiesLoose"],"mappings":";;;;;AAAe,SAAS,6BAA6B,CAAC,MAAM,EAAE,QAAQ,EAAE;AACxE,EAAE,IAAI,MAAM,IAAI,IAAI,EAAE,OAAO,EAAE,CAAC;AAChC,EAAE,IAAI,MAAM,GAAG,EAAE,CAAC;AAClB,EAAE,IAAI,UAAU,GAAG,MAAM,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;AACvC,EAAE,IAAI,GAAG,EAAE,CAAC,CAAC;AACb;AACA,EAAE,KAAK,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,UAAU,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE;AAC1C,IAAI,GAAG,GAAG,UAAU,CAAC,CAAC,CAAC,CAAC;AACxB,IAAI,IAAI,QAAQ,CAAC,OAAO,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,SAAS;AAC7C,IAAI,MAAM,CAAC,GAAG,CAAC,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC;AAC9B,GAAG;AACH;AACA,EAAE,OAAO,MAAM,CAAC;AAChB;;ACZe,SAAS,wBAAwB,CAAC,MAAM,EAAE,QAAQ,EAAE;AACnE,EAAE,IAAI,MAAM,IAAI,IAAI,EAAE,OAAO,EAAE,CAAC;AAChC,EAAE,IAAI,MAAM,GAAGA,6BAA4B,CAAC,MAAM,EAAE,QAAQ,CAAC,CAAC;AAC9D,EAAE,IAAI,GAAG,EAAE,CAAC,CAAC;AACb;AACA,EAAE,IAAI,MAAM,CAAC,qBAAqB,EAAE;AACpC,IAAI,IAAI,gBAAgB,GAAG,MAAM,CAAC,qBAAqB,CAAC,MAAM,CAAC,CAAC;AAChE;AACA,IAAI,KAAK,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,gBAAgB,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE;AAClD,MAAM,GAAG,GAAG,gBAAgB,CAAC,CAAC,CAAC,CAAC;AAChC,MAAM,IAAI,QAAQ,CAAC,OAAO,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,SAAS;AAC/C,MAAM,IAAI,CAAC,MAAM,CAAC,SAAS,CAAC,oBAAoB,CAAC,IAAI,CAAC,MAAM,EAAE,GAAG,CAAC,EAAE,SAAS;AAC7E,MAAM,MAAM,CAAC,GAAG,CAAC,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC;AAChC,KAAK;AACL,GAAG;AACH;AACA,EAAE,OAAO,MAAM,CAAC;AAChB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

File diff suppressed because it is too large Load Diff

File diff suppressed because one or more lines are too long

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 it is too large Load Diff

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,142 @@
import React, { memo } from 'react';
import cc from 'classcat';
import shallow from 'zustand/shallow';
import { b as useStore, I as getBoundsofRects, o as getRectOfNodes } from './index-a12c80bd.js';
import 'zustand';
import 'zustand/context';
import 'd3-zoom';
var MiniMapNode = function MiniMapNode(_ref) {
var x = _ref.x,
y = _ref.y,
width = _ref.width,
height = _ref.height,
style = _ref.style,
color = _ref.color,
strokeColor = _ref.strokeColor,
strokeWidth = _ref.strokeWidth,
className = _ref.className,
borderRadius = _ref.borderRadius,
shapeRendering = _ref.shapeRendering;
var _ref2 = style || {},
background = _ref2.background,
backgroundColor = _ref2.backgroundColor;
var fill = color || background || backgroundColor;
return /*#__PURE__*/React.createElement("rect", {
className: cc(['react-flow__minimap-node', className]),
x: x,
y: y,
rx: borderRadius,
ry: borderRadius,
width: width,
height: height,
fill: fill,
stroke: strokeColor,
strokeWidth: strokeWidth,
shapeRendering: shapeRendering
});
};
MiniMapNode.displayName = 'MiniMapNode';
var MiniMapNode$1 = /*#__PURE__*/memo(MiniMapNode);
var defaultWidth = 200;
var defaultHeight = 150;
var selector = function selector(s) {
return {
viewBBox: {
x: -s.transform[0] / s.transform[2],
y: -s.transform[1] / s.transform[2],
width: s.width / s.transform[2],
height: s.height / s.transform[2]
},
nodes: Array.from(s.nodeInternals.values())
};
};
var getAttrFunction = function getAttrFunction(func) {
return func instanceof Function ? func : function () {
return func;
};
};
var MiniMap = function MiniMap(_ref) {
var _style$width, _style$height;
var style = _ref.style,
className = _ref.className,
_ref$nodeStrokeColor = _ref.nodeStrokeColor,
nodeStrokeColor = _ref$nodeStrokeColor === void 0 ? '#555' : _ref$nodeStrokeColor,
_ref$nodeColor = _ref.nodeColor,
nodeColor = _ref$nodeColor === void 0 ? '#fff' : _ref$nodeColor,
_ref$nodeClassName = _ref.nodeClassName,
nodeClassName = _ref$nodeClassName === void 0 ? '' : _ref$nodeClassName,
_ref$nodeBorderRadius = _ref.nodeBorderRadius,
nodeBorderRadius = _ref$nodeBorderRadius === void 0 ? 5 : _ref$nodeBorderRadius,
_ref$nodeStrokeWidth = _ref.nodeStrokeWidth,
nodeStrokeWidth = _ref$nodeStrokeWidth === void 0 ? 2 : _ref$nodeStrokeWidth,
_ref$maskColor = _ref.maskColor,
maskColor = _ref$maskColor === void 0 ? 'rgb(240, 242, 243, 0.7)' : _ref$maskColor;
var _useStore = useStore(selector, shallow),
viewBBox = _useStore.viewBBox,
nodes = _useStore.nodes;
var elementWidth = (_style$width = style === null || style === void 0 ? void 0 : style.width) !== null && _style$width !== void 0 ? _style$width : defaultWidth;
var elementHeight = (_style$height = style === null || style === void 0 ? void 0 : style.height) !== null && _style$height !== void 0 ? _style$height : defaultHeight;
var nodeColorFunc = getAttrFunction(nodeColor);
var nodeStrokeColorFunc = getAttrFunction(nodeStrokeColor);
var nodeClassNameFunc = getAttrFunction(nodeClassName);
var boundingRect = nodes.length > 0 ? getBoundsofRects(getRectOfNodes(nodes), viewBBox) : viewBBox;
var scaledWidth = boundingRect.width / elementWidth;
var scaledHeight = boundingRect.height / elementHeight;
var viewScale = Math.max(scaledWidth, scaledHeight);
var viewWidth = viewScale * elementWidth;
var viewHeight = viewScale * elementHeight;
var offset = 5 * viewScale;
var x = boundingRect.x - (viewWidth - boundingRect.width) / 2 - offset;
var y = boundingRect.y - (viewHeight - boundingRect.height) / 2 - offset;
var width = viewWidth + offset * 2;
var height = viewHeight + offset * 2;
var shapeRendering = typeof window === 'undefined' || !!window.chrome ? 'crispEdges' : 'geometricPrecision';
return /*#__PURE__*/React.createElement("svg", {
width: elementWidth,
height: elementHeight,
viewBox: "".concat(x, " ").concat(y, " ").concat(width, " ").concat(height),
style: style,
className: cc(['react-flow__minimap', className])
}, nodes.filter(function (node) {
return !node.hidden && node.width && node.height;
}).map(function (node) {
var _node$positionAbsolut, _node$positionAbsolut2, _node$positionAbsolut3, _node$positionAbsolut4;
return /*#__PURE__*/React.createElement(MiniMapNode$1, {
key: node.id,
x: (_node$positionAbsolut = (_node$positionAbsolut2 = node.positionAbsolute) === null || _node$positionAbsolut2 === void 0 ? void 0 : _node$positionAbsolut2.x) !== null && _node$positionAbsolut !== void 0 ? _node$positionAbsolut : 0,
y: (_node$positionAbsolut3 = (_node$positionAbsolut4 = node.positionAbsolute) === null || _node$positionAbsolut4 === void 0 ? void 0 : _node$positionAbsolut4.y) !== null && _node$positionAbsolut3 !== void 0 ? _node$positionAbsolut3 : 0,
width: node.width,
height: node.height,
style: node.style,
className: nodeClassNameFunc(node),
color: nodeColorFunc(node),
borderRadius: nodeBorderRadius,
strokeColor: nodeStrokeColorFunc(node),
strokeWidth: nodeStrokeWidth,
shapeRendering: shapeRendering
});
}), /*#__PURE__*/React.createElement("path", {
className: "react-flow__minimap-mask",
d: "M".concat(x - offset, ",").concat(y - offset, "h").concat(width + offset * 2, "v").concat(height + offset * 2, "h").concat(-width - offset * 2, "z\n M").concat(viewBBox.x, ",").concat(viewBBox.y, "h").concat(viewBBox.width, "v").concat(viewBBox.height, "h").concat(-viewBBox.width, "z"),
fill: maskColor,
fillRule: "evenodd"
}));
};
MiniMap.displayName = 'MiniMap';
var index = /*#__PURE__*/memo(MiniMap);
export { index as default };
//# sourceMappingURL=index2.js.map

View File

@@ -0,0 +1 @@
{"version":3,"file":"index2.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

View File

@@ -0,0 +1,99 @@
import { a as _defineProperty, H as BackgroundVariant, _ as _slicedToArray, b as useStore } from './index-a12c80bd.js';
import React, { memo, useRef, useState, useEffect } from 'react';
import cc from 'classcat';
import 'zustand';
import 'zustand/context';
import 'd3-zoom';
var createGridLinesPath = function createGridLinesPath(size, strokeWidth, stroke) {
return /*#__PURE__*/React.createElement("path", {
stroke: stroke,
strokeWidth: strokeWidth,
d: "M".concat(size / 2, " 0 V").concat(size, " M0 ").concat(size / 2, " H").concat(size)
});
};
var createGridDotsPath = function createGridDotsPath(size, fill) {
return /*#__PURE__*/React.createElement("circle", {
cx: size,
cy: size,
r: size,
fill: fill
});
};
var _defaultColors;
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
var defaultColors = (_defaultColors = {}, _defineProperty(_defaultColors, BackgroundVariant.Dots, '#81818a'), _defineProperty(_defaultColors, BackgroundVariant.Lines, '#eee'), _defaultColors);
var transformSelector = function transformSelector(s) {
return s.transform;
};
var Background = function Background(_ref) {
var _ref$variant = _ref.variant,
variant = _ref$variant === void 0 ? BackgroundVariant.Dots : _ref$variant,
_ref$gap = _ref.gap,
gap = _ref$gap === void 0 ? 15 : _ref$gap,
_ref$size = _ref.size,
size = _ref$size === void 0 ? 0.4 : _ref$size,
color = _ref.color,
style = _ref.style,
className = _ref.className;
var ref = useRef(null);
var _useState = useState(null),
_useState2 = _slicedToArray(_useState, 2),
patternId = _useState2[0],
setPatternId = _useState2[1];
var _useStore = useStore(transformSelector),
_useStore2 = _slicedToArray(_useStore, 3),
tX = _useStore2[0],
tY = _useStore2[1],
tScale = _useStore2[2];
useEffect(function () {
// when there are multiple flows on a page we need to make sure that every background gets its own pattern.
var bgs = document.querySelectorAll('.react-flow__background');
var index = Array.from(bgs).findIndex(function (bg) {
return bg === ref.current;
});
setPatternId("pattern-".concat(index));
}, []);
var scaledGap = gap * tScale || 1;
var xOffset = tX % scaledGap;
var yOffset = tY % scaledGap;
var isLines = variant === BackgroundVariant.Lines;
var bgColor = color ? color : defaultColors[variant];
var path = isLines ? createGridLinesPath(scaledGap, size, bgColor) : createGridDotsPath(size * tScale, bgColor);
return /*#__PURE__*/React.createElement("svg", {
className: cc(['react-flow__background', 'react-flow__container', className]),
style: _objectSpread(_objectSpread({}, style), {}, {
width: '100%',
height: '100%'
}),
ref: ref
}, patternId && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("pattern", {
id: patternId,
x: xOffset,
y: yOffset,
width: scaledGap,
height: scaledGap,
patternUnits: "userSpaceOnUse"
}, path), /*#__PURE__*/React.createElement("rect", {
x: "0",
y: "0",
width: "100%",
height: "100%",
fill: "url(#".concat(patternId, ")")
})));
};
Background.displayName = 'Background';
var index = /*#__PURE__*/memo(Background);
export { index as default };
//# sourceMappingURL=index3.js.map

View File

@@ -0,0 +1 @@
{"version":3,"file":"index3.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

View File

@@ -0,0 +1,10 @@
import './index-a12c80bd.js';
export { C as ControlButton, i as default } from './index-20df97c0.js';
import 'react';
import 'classcat';
import './useReactFlow-993c30ca.js';
import 'zustand';
import 'zustand/context';
import 'd3-zoom';
import 'zustand/shallow';
//# sourceMappingURL=index4.js.map

View File

@@ -0,0 +1 @@
{"version":3,"file":"index4.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;"}

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,16 @@
import { b as useStore } from './index-a12c80bd.js';
import 'zustand';
import 'zustand/context';
import 'd3-zoom';
var edgesSelector = function edgesSelector(state) {
return state.edges;
};
function useEdges() {
var edges = useStore(edgesSelector);
return edges;
}
export { useEdges as default };
//# sourceMappingURL=useEdges.js.map

View File

@@ -0,0 +1 @@
{"version":3,"file":"useEdges.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;"}

View File

@@ -0,0 +1,16 @@
import { b as useStore } from './index-a12c80bd.js';
import 'zustand';
import 'zustand/context';
import 'd3-zoom';
var nodesSelector = function nodesSelector(state) {
return Array.from(state.nodeInternals.values());
};
function useNodes() {
var nodes = useStore(nodesSelector);
return nodes;
}
export { useNodes as default };
//# sourceMappingURL=useNodes.js.map

View File

@@ -0,0 +1 @@
{"version":3,"file":"useNodes.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;"}

View File

@@ -0,0 +1,331 @@
import { J as _arrayLikeToArray, K as _unsupportedIterableToArray, u as useStoreApi, b as useStore, L as getD3Transition, _ as _slicedToArray, N as fitView, G as getTransformForBounds, p as pointToRendererPoint, a as _defineProperty } from './index-a12c80bd.js';
import { useMemo, useCallback } from 'react';
import { zoomIdentity } from 'd3-zoom';
import shallow from 'zustand/shallow';
function _arrayWithoutHoles(arr) {
if (Array.isArray(arr)) return _arrayLikeToArray(arr);
}
function _iterableToArray(iter) {
if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter);
}
function _nonIterableSpread() {
throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
}
function _toConsumableArray(arr) {
return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread();
}
var initialViewportHelper = {
zoomIn: function zoomIn() {},
zoomOut: function zoomOut() {},
zoomTo: function zoomTo(_) {},
getZoom: function getZoom() {
return 1;
},
setViewport: function setViewport(_) {},
getViewport: function getViewport() {
return {
x: 0,
y: 0,
zoom: 1
};
},
fitView: function fitView() {
},
setCenter: function setCenter(_, __) {},
fitBounds: function fitBounds(_) {},
project: function project(position) {
return position;
},
viewportInitialized: false
};
var selector = function selector(s) {
return {
d3Zoom: s.d3Zoom,
d3Selection: s.d3Selection
};
};
var useViewportHelper = function useViewportHelper() {
var store = useStoreApi();
var _useStore = useStore(selector, shallow),
d3Zoom = _useStore.d3Zoom,
d3Selection = _useStore.d3Selection;
var viewportHelperFunctions = useMemo(function () {
if (d3Selection && d3Zoom) {
return {
zoomIn: function zoomIn(options) {
return d3Zoom.scaleBy(getD3Transition(d3Selection, options === null || options === void 0 ? void 0 : options.duration), 1.2);
},
zoomOut: function zoomOut(options) {
return d3Zoom.scaleBy(getD3Transition(d3Selection, options === null || options === void 0 ? void 0 : options.duration), 1 / 1.2);
},
zoomTo: function zoomTo(zoomLevel, options) {
return d3Zoom.scaleTo(getD3Transition(d3Selection, options === null || options === void 0 ? void 0 : options.duration), zoomLevel);
},
getZoom: function getZoom() {
return store.getState().transform[2];
},
setViewport: function setViewport(transform, options) {
var _transform$x, _transform$y, _transform$zoom;
var _store$getState$trans = _slicedToArray(store.getState().transform, 3),
x = _store$getState$trans[0],
y = _store$getState$trans[1],
zoom = _store$getState$trans[2];
var nextTransform = zoomIdentity.translate((_transform$x = transform.x) !== null && _transform$x !== void 0 ? _transform$x : x, (_transform$y = transform.y) !== null && _transform$y !== void 0 ? _transform$y : y).scale((_transform$zoom = transform.zoom) !== null && _transform$zoom !== void 0 ? _transform$zoom : zoom);
d3Zoom.transform(getD3Transition(d3Selection, options === null || options === void 0 ? void 0 : options.duration), nextTransform);
},
getViewport: function getViewport() {
var _store$getState$trans2 = _slicedToArray(store.getState().transform, 3),
x = _store$getState$trans2[0],
y = _store$getState$trans2[1],
zoom = _store$getState$trans2[2];
return {
x: x,
y: y,
zoom: zoom
};
},
fitView: function fitView$1(options) {
return fitView(store.getState, options);
},
setCenter: function setCenter(x, y, options) {
var _store$getState = store.getState(),
width = _store$getState.width,
height = _store$getState.height,
maxZoom = _store$getState.maxZoom;
var nextZoom = typeof (options === null || options === void 0 ? void 0 : options.zoom) !== 'undefined' ? options.zoom : maxZoom;
var centerX = width / 2 - x * nextZoom;
var centerY = height / 2 - y * nextZoom;
var transform = zoomIdentity.translate(centerX, centerY).scale(nextZoom);
d3Zoom.transform(getD3Transition(d3Selection, options === null || options === void 0 ? void 0 : options.duration), transform);
},
fitBounds: function fitBounds(bounds, options) {
var _options$padding;
var _store$getState2 = store.getState(),
width = _store$getState2.width,
height = _store$getState2.height,
minZoom = _store$getState2.minZoom,
maxZoom = _store$getState2.maxZoom;
var _getTransformForBound = getTransformForBounds(bounds, width, height, minZoom, maxZoom, (_options$padding = options === null || options === void 0 ? void 0 : options.padding) !== null && _options$padding !== void 0 ? _options$padding : 0.1),
_getTransformForBound2 = _slicedToArray(_getTransformForBound, 3),
x = _getTransformForBound2[0],
y = _getTransformForBound2[1],
zoom = _getTransformForBound2[2];
var transform = zoomIdentity.translate(x, y).scale(zoom);
d3Zoom.transform(getD3Transition(d3Selection, options === null || options === void 0 ? void 0 : options.duration), transform);
},
project: function project(position) {
var _store$getState3 = store.getState(),
transform = _store$getState3.transform,
snapToGrid = _store$getState3.snapToGrid,
snapGrid = _store$getState3.snapGrid;
return pointToRendererPoint(position, transform, snapToGrid, snapGrid);
},
viewportInitialized: true
};
}
return initialViewportHelper;
}, [d3Zoom, d3Selection]);
return viewportHelperFunctions;
};
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
function useReactFlow() {
var viewportHelper = useViewportHelper();
var store = useStoreApi();
var getNodes = useCallback(function () {
var _store$getState = store.getState(),
nodeInternals = _store$getState.nodeInternals;
var nodes = Array.from(nodeInternals.values());
return nodes.map(function (n) {
return _objectSpread({}, n);
});
}, []);
var getNode = useCallback(function (id) {
var _store$getState2 = store.getState(),
nodeInternals = _store$getState2.nodeInternals;
return nodeInternals.get(id);
}, []);
var getEdges = useCallback(function () {
var _store$getState3 = store.getState(),
_store$getState3$edge = _store$getState3.edges,
edges = _store$getState3$edge === void 0 ? [] : _store$getState3$edge;
return edges.map(function (e) {
return _objectSpread({}, e);
});
}, []);
var getEdge = useCallback(function (id) {
var _store$getState4 = store.getState(),
_store$getState4$edge = _store$getState4.edges,
edges = _store$getState4$edge === void 0 ? [] : _store$getState4$edge;
return edges.find(function (e) {
return e.id === id;
});
}, []);
var setNodes = useCallback(function (payload) {
var _store$getState5 = store.getState(),
nodeInternals = _store$getState5.nodeInternals,
setNodes = _store$getState5.setNodes,
hasDefaultNodes = _store$getState5.hasDefaultNodes,
onNodesChange = _store$getState5.onNodesChange;
var nodes = Array.from(nodeInternals.values());
var nextNodes = typeof payload === 'function' ? payload(nodes) : payload;
if (hasDefaultNodes) {
setNodes(nextNodes);
} else if (onNodesChange) {
var changes = nextNodes.length === 0 ? nodes.map(function (node) {
return {
type: 'remove',
id: node.id
};
}) : nextNodes.map(function (node) {
return {
item: node,
type: 'reset'
};
});
onNodesChange(changes);
}
}, []);
var setEdges = useCallback(function (payload) {
var _store$getState6 = store.getState(),
_store$getState6$edge = _store$getState6.edges,
edges = _store$getState6$edge === void 0 ? [] : _store$getState6$edge,
setEdges = _store$getState6.setEdges,
hasDefaultEdges = _store$getState6.hasDefaultEdges,
onEdgesChange = _store$getState6.onEdgesChange;
var nextEdges = typeof payload === 'function' ? payload(edges) : payload;
if (hasDefaultEdges) {
setEdges(nextEdges);
} else if (onEdgesChange) {
var changes = nextEdges.length === 0 ? edges.map(function (edge) {
return {
type: 'remove',
id: edge.id
};
}) : nextEdges.map(function (edge) {
return {
item: edge,
type: 'reset'
};
});
onEdgesChange(changes);
}
}, []);
var addNodes = useCallback(function (payload) {
var nodes = Array.isArray(payload) ? payload : [payload];
var _store$getState7 = store.getState(),
nodeInternals = _store$getState7.nodeInternals,
setNodes = _store$getState7.setNodes,
hasDefaultNodes = _store$getState7.hasDefaultNodes,
onNodesChange = _store$getState7.onNodesChange;
if (hasDefaultNodes) {
var currentNodes = Array.from(nodeInternals.values());
var nextNodes = [].concat(currentNodes, _toConsumableArray(nodes));
setNodes(nextNodes);
} else if (onNodesChange) {
var changes = nodes.map(function (node) {
return {
item: node,
type: 'add'
};
});
onNodesChange(changes);
}
}, []);
var addEdges = useCallback(function (payload) {
var nextEdges = Array.isArray(payload) ? payload : [payload];
var _store$getState8 = store.getState(),
_store$getState8$edge = _store$getState8.edges,
edges = _store$getState8$edge === void 0 ? [] : _store$getState8$edge,
setEdges = _store$getState8.setEdges,
hasDefaultEdges = _store$getState8.hasDefaultEdges,
onEdgesChange = _store$getState8.onEdgesChange;
if (hasDefaultEdges) {
setEdges([].concat(_toConsumableArray(edges), _toConsumableArray(nextEdges)));
} else if (onEdgesChange) {
var changes = nextEdges.map(function (edge) {
return {
item: edge,
type: 'add'
};
});
onEdgesChange(changes);
}
}, []);
var toObject = useCallback(function () {
var _store$getState9 = store.getState(),
nodeInternals = _store$getState9.nodeInternals,
_store$getState9$edge = _store$getState9.edges,
edges = _store$getState9$edge === void 0 ? [] : _store$getState9$edge,
transform = _store$getState9.transform;
var nodes = Array.from(nodeInternals.values());
var _transform = _slicedToArray(transform, 3),
x = _transform[0],
y = _transform[1],
zoom = _transform[2];
return {
nodes: nodes.map(function (n) {
return _objectSpread({}, n);
}),
edges: edges.map(function (e) {
return _objectSpread({}, e);
}),
viewport: {
x: x,
y: y,
zoom: zoom
}
};
}, []);
return useMemo(function () {
return _objectSpread(_objectSpread({}, viewportHelper), {}, {
getNodes: getNodes,
getNode: getNode,
getEdges: getEdges,
getEdge: getEdge,
setNodes: setNodes,
setEdges: setEdges,
addNodes: addNodes,
addEdges: addEdges,
toObject: toObject
});
}, [viewportHelper, getNodes, getNode, getEdges, getEdge, setNodes, setEdges, addNodes, addEdges, toObject]);
}
export { _toConsumableArray as _, useReactFlow as u };
//# sourceMappingURL=useReactFlow-993c30ca.js.map

View File

@@ -0,0 +1 @@
{"version":3,"file":"useReactFlow-993c30ca.js","sources":["../../node_modules/@babel/runtime/helpers/esm/arrayWithoutHoles.js","../../node_modules/@babel/runtime/helpers/esm/iterableToArray.js","../../node_modules/@babel/runtime/helpers/esm/nonIterableSpread.js","../../node_modules/@babel/runtime/helpers/esm/toConsumableArray.js"],"sourcesContent":["import arrayLikeToArray from \"./arrayLikeToArray.js\";\nexport default function _arrayWithoutHoles(arr) {\n if (Array.isArray(arr)) return arrayLikeToArray(arr);\n}","export default function _iterableToArray(iter) {\n if (typeof Symbol !== \"undefined\" && iter[Symbol.iterator] != null || iter[\"@@iterator\"] != null) return Array.from(iter);\n}","export default function _nonIterableSpread() {\n throw new TypeError(\"Invalid attempt to spread non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.\");\n}","import arrayWithoutHoles from \"./arrayWithoutHoles.js\";\nimport iterableToArray from \"./iterableToArray.js\";\nimport unsupportedIterableToArray from \"./unsupportedIterableToArray.js\";\nimport nonIterableSpread from \"./nonIterableSpread.js\";\nexport default function _toConsumableArray(arr) {\n return arrayWithoutHoles(arr) || iterableToArray(arr) || unsupportedIterableToArray(arr) || nonIterableSpread();\n}"],"names":["arrayLikeToArray","arrayWithoutHoles","iterableToArray","unsupportedIterableToArray","nonIterableSpread"],"mappings":";;;;;AACe,SAAS,kBAAkB,CAAC,GAAG,EAAE;AAChD,EAAE,IAAI,KAAK,CAAC,OAAO,CAAC,GAAG,CAAC,EAAE,OAAOA,iBAAgB,CAAC,GAAG,CAAC,CAAC;AACvD;;ACHe,SAAS,gBAAgB,CAAC,IAAI,EAAE;AAC/C,EAAE,IAAI,OAAO,MAAM,KAAK,WAAW,IAAI,IAAI,CAAC,MAAM,CAAC,QAAQ,CAAC,IAAI,IAAI,IAAI,IAAI,CAAC,YAAY,CAAC,IAAI,IAAI,EAAE,OAAO,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;AAC5H;;ACFe,SAAS,kBAAkB,GAAG;AAC7C,EAAE,MAAM,IAAI,SAAS,CAAC,sIAAsI,CAAC,CAAC;AAC9J;;ACEe,SAAS,kBAAkB,CAAC,GAAG,EAAE;AAChD,EAAE,OAAOC,kBAAiB,CAAC,GAAG,CAAC,IAAIC,gBAAe,CAAC,GAAG,CAAC,IAAIC,2BAA0B,CAAC,GAAG,CAAC,IAAIC,kBAAiB,EAAE,CAAC;AAClH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

View File

@@ -0,0 +1,8 @@
import './index-a12c80bd.js';
export { u as default } from './useReactFlow-993c30ca.js';
import 'react';
import 'zustand';
import 'zustand/context';
import 'd3-zoom';
import 'zustand/shallow';
//# sourceMappingURL=useReactFlow.js.map

Some files were not shown because too many files have changed in this diff Show More