feat(ui): add type filter toggles

This commit is contained in:
2026-02-18 23:13:28 -08:00
commit a4cff9894c
14457 changed files with 2204835 additions and 0 deletions

View File

@@ -0,0 +1,8 @@
export declare const ARIA_NODE_DESC_KEY = "react-flow__node-desc";
export declare const ARIA_EDGE_DESC_KEY = "react-flow__edge-desc";
export declare const ARIA_LIVE_MESSAGE = "react-flow__aria-live";
export declare function A11yDescriptions({ rfId, disableKeyboardA11y }: {
rfId: string;
disableKeyboardA11y: boolean;
}): import("react/jsx-runtime").JSX.Element;
//# sourceMappingURL=index.d.ts.map

View File

@@ -0,0 +1 @@
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/A11yDescriptions/index.tsx"],"names":[],"mappings":"AAkBA,eAAO,MAAM,kBAAkB,0BAA0B,CAAC;AAC1D,eAAO,MAAM,kBAAkB,0BAA0B,CAAC;AAC1D,eAAO,MAAM,iBAAiB,0BAA0B,CAAC;AAezD,wBAAgB,gBAAgB,CAAC,EAAE,IAAI,EAAE,mBAAmB,EAAE,EAAE;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,mBAAmB,EAAE,OAAO,CAAA;CAAE,2CAgB7G"}

View File

@@ -0,0 +1,8 @@
import type { PanelPosition, ProOptions } from '@xyflow/system';
type AttributionProps = {
proOptions?: ProOptions;
position?: PanelPosition;
};
export declare function Attribution({ proOptions, position }: AttributionProps): import("react/jsx-runtime").JSX.Element | null;
export {};
//# sourceMappingURL=index.d.ts.map

View File

@@ -0,0 +1 @@
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Attribution/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAIhE,KAAK,gBAAgB,GAAG;IACtB,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,QAAQ,CAAC,EAAE,aAAa,CAAC;CAC1B,CAAC;AAEF,wBAAgB,WAAW,CAAC,EAAE,UAAU,EAAE,QAAyB,EAAE,EAAE,gBAAgB,kDAgBtF"}

View File

@@ -0,0 +1,17 @@
import { ReactNode } from 'react';
import { Queue } from './types';
import type { Edge, Node } from '../../types';
/**
* This is a context provider that holds and processes the node and edge update queues
* that are needed to handle setNodes, addNodes, setEdges and addEdges.
*
* @internal
*/
export declare function BatchProvider<NodeType extends Node = Node, EdgeType extends Edge = Edge>({ children, }: {
children: ReactNode;
}): import("react/jsx-runtime").JSX.Element;
export declare function useBatchContext(): {
nodeQueue: Queue<any>;
edgeQueue: Queue<any>;
};
//# sourceMappingURL=index.d.ts.map

View File

@@ -0,0 +1 @@
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/BatchProvider/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAiB,SAAS,EAAoC,MAAM,OAAO,CAAC;AAKnF,OAAO,EAAE,KAAK,EAAa,MAAM,SAAS,CAAC;AAC3C,OAAO,KAAK,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,aAAa,CAAC;AAU9C;;;;;GAKG;AACH,wBAAgB,aAAa,CAAC,QAAQ,SAAS,IAAI,GAAG,IAAI,EAAE,QAAQ,SAAS,IAAI,GAAG,IAAI,EAAE,EACxF,QAAQ,GACT,EAAE;IACD,QAAQ,EAAE,SAAS,CAAC;CACrB,2CA8EA;AAED,wBAAgB,eAAe;eA/FlB,KAAK,CAAC,GAAG,CAAC;eAEV,KAAK,CAAC,GAAG,CAAC;EAqGtB"}

View File

@@ -0,0 +1,7 @@
export type QueueItem<T> = T[] | ((items: T[]) => T[]);
export type Queue<T> = {
get: () => QueueItem<T>[];
reset: () => void;
push: (item: QueueItem<T>) => void;
};
//# sourceMappingURL=types.d.ts.map

View File

@@ -0,0 +1 @@
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/BatchProvider/types.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,SAAS,CAAC,CAAC,IAAI,CAAC,EAAE,GAAG,CAAC,CAAC,KAAK,EAAE,CAAC,EAAE,KAAK,CAAC,EAAE,CAAC,CAAC;AAEvD,MAAM,MAAM,KAAK,CAAC,CAAC,IAAI;IACrB,GAAG,EAAE,MAAM,SAAS,CAAC,CAAC,CAAC,EAAE,CAAC;IAC1B,KAAK,EAAE,MAAM,IAAI,CAAC;IAClB,IAAI,EAAE,CAAC,IAAI,EAAE,SAAS,CAAC,CAAC,CAAC,KAAK,IAAI,CAAC;CACpC,CAAC"}

View File

@@ -0,0 +1,11 @@
import { Queue, QueueItem } from './types';
/**
* This hook returns a queue that can be used to batch updates.
*
* @param runQueue - a function that gets called when the queue is flushed
* @internal
*
* @returns a Queue object
*/
export declare function useQueue<T>(runQueue: (items: QueueItem<T>[]) => void): Queue<T>;
//# sourceMappingURL=useQueue.d.ts.map

View File

@@ -0,0 +1 @@
{"version":3,"file":"useQueue.d.ts","sourceRoot":"","sources":["../../../src/components/BatchProvider/useQueue.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,KAAK,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAE3C;;;;;;;GAOG;AACH,wBAAgB,QAAQ,CAAC,CAAC,EAAE,QAAQ,EAAE,CAAC,KAAK,EAAE,SAAS,CAAC,CAAC,CAAC,EAAE,KAAK,IAAI,YAiCpE"}

View File

@@ -0,0 +1,12 @@
import { CSSProperties } from 'react';
import { ConnectionLineType } from '@xyflow/system';
import type { ConnectionLineComponent, Node } from '../../types';
type ConnectionLineWrapperProps<NodeType extends Node = Node> = {
type: ConnectionLineType;
component?: ConnectionLineComponent<NodeType>;
containerStyle?: CSSProperties;
style?: CSSProperties;
};
export declare function ConnectionLineWrapper<NodeType extends Node = Node>({ containerStyle, style, type, component, }: ConnectionLineWrapperProps<NodeType>): import("react/jsx-runtime").JSX.Element | null;
export {};
//# sourceMappingURL=index.d.ts.map

View File

@@ -0,0 +1 @@
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/ConnectionLine/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAGtC,OAAO,EACL,kBAAkB,EAKnB,MAAM,gBAAgB,CAAC;AAIxB,OAAO,KAAK,EAAE,uBAAuB,EAAE,IAAI,EAAkB,MAAM,aAAa,CAAC;AAGjF,KAAK,0BAA0B,CAAC,QAAQ,SAAS,IAAI,GAAG,IAAI,IAAI;IAC9D,IAAI,EAAE,kBAAkB,CAAC;IACzB,SAAS,CAAC,EAAE,uBAAuB,CAAC,QAAQ,CAAC,CAAC;IAC9C,cAAc,CAAC,EAAE,aAAa,CAAC;IAC/B,KAAK,CAAC,EAAE,aAAa,CAAC;CACvB,CAAC;AAUF,wBAAgB,qBAAqB,CAAC,QAAQ,SAAS,IAAI,GAAG,IAAI,EAAE,EAClE,cAAc,EACd,KAAK,EACL,IAAI,EACJ,SAAS,GACV,EAAE,0BAA0B,CAAC,QAAQ,CAAC,kDAoBtC"}

View File

@@ -0,0 +1,47 @@
import type { ReactNode } from 'react';
export type EdgeLabelRendererProps = {
children: ReactNode;
};
/**
* Edges are SVG-based. If you want to render more complex labels you can use the
* `<EdgeLabelRenderer />` component to access a div based renderer. This component
* is a portal that renders the label in a `<div />` that is positioned on top of
* the edges. You can see an example usage of the component in the
* [edge label renderer example](/examples/edges/edge-label-renderer).
* @public
*
* @example
* ```jsx
* import React from 'react';
* import { getBezierPath, EdgeLabelRenderer, BaseEdge } from '@xyflow/react';
*
* export function CustomEdge({ id, data, ...props }) {
* const [edgePath, labelX, labelY] = getBezierPath(props);
*
* return (
* <>
* <BaseEdge id={id} path={edgePath} />
* <EdgeLabelRenderer>
* <div
* style={{
* position: 'absolute',
* transform: `translate(-50%, -50%) translate(${labelX}px,${labelY}px)`,
* background: '#ffcc00',
* padding: 10,
* }}
* className="nodrag nopan"
* >
* {data.label}
* </div>
* </EdgeLabelRenderer>
* </>
* );
* };
* ```
*
* @remarks The `<EdgeLabelRenderer />` has no pointer events by default. If you want to
* add mouse interactions you need to set the style `pointerEvents: all` and add
* the `nopan` class on the label or the element you want to interact with.
*/
export declare function EdgeLabelRenderer({ children }: EdgeLabelRendererProps): import("react").ReactPortal | null;
//# sourceMappingURL=index.d.ts.map

View File

@@ -0,0 +1 @@
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/EdgeLabelRenderer/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAQvC,MAAM,MAAM,sBAAsB,GAAG;IACnC,QAAQ,EAAE,SAAS,CAAA;CACpB,CAAA;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAwCG;AACH,wBAAgB,iBAAiB,CAAC,EAAE,QAAQ,EAAE,EAAE,sBAAsB,sCAQrE"}

View File

@@ -0,0 +1,15 @@
import { type EdgePosition } from '@xyflow/system';
import type { EdgeWrapperProps, Edge } from '../../types/edges';
type EdgeUpdateAnchorsProps<EdgeType extends Edge = Edge> = {
edge: EdgeType;
isReconnectable: boolean | 'source' | 'target';
reconnectRadius: EdgeWrapperProps['reconnectRadius'];
onReconnect: EdgeWrapperProps<EdgeType>['onReconnect'];
onReconnectStart: EdgeWrapperProps<EdgeType>['onReconnectStart'];
onReconnectEnd: EdgeWrapperProps<EdgeType>['onReconnectEnd'];
setUpdateHover: (hover: boolean) => void;
setReconnecting: (updating: boolean) => void;
} & EdgePosition;
export declare function EdgeUpdateAnchors<EdgeType extends Edge = Edge>({ isReconnectable, reconnectRadius, edge, sourceX, sourceY, targetX, targetY, sourcePosition, targetPosition, onReconnect, onReconnectStart, onReconnectEnd, setReconnecting, setUpdateHover, }: EdgeUpdateAnchorsProps<EdgeType>): import("react/jsx-runtime").JSX.Element;
export {};
//# sourceMappingURL=EdgeUpdateAnchors.d.ts.map

View File

@@ -0,0 +1 @@
{"version":3,"file":"EdgeUpdateAnchors.d.ts","sourceRoot":"","sources":["../../../src/components/EdgeWrapper/EdgeUpdateAnchors.tsx"],"names":[],"mappings":"AACA,OAAO,EAEL,KAAK,YAAY,EAKlB,MAAM,gBAAgB,CAAC;AAGxB,OAAO,KAAK,EAAE,gBAAgB,EAAE,IAAI,EAAE,MAAM,mBAAmB,CAAC;AAGhE,KAAK,sBAAsB,CAAC,QAAQ,SAAS,IAAI,GAAG,IAAI,IAAI;IAC1D,IAAI,EAAE,QAAQ,CAAC;IACf,eAAe,EAAE,OAAO,GAAG,QAAQ,GAAG,QAAQ,CAAC;IAC/C,eAAe,EAAE,gBAAgB,CAAC,iBAAiB,CAAC,CAAC;IACrD,WAAW,EAAE,gBAAgB,CAAC,QAAQ,CAAC,CAAC,aAAa,CAAC,CAAC;IACvD,gBAAgB,EAAE,gBAAgB,CAAC,QAAQ,CAAC,CAAC,kBAAkB,CAAC,CAAC;IACjE,cAAc,EAAE,gBAAgB,CAAC,QAAQ,CAAC,CAAC,gBAAgB,CAAC,CAAC;IAC7D,cAAc,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI,CAAC;IACzC,eAAe,EAAE,CAAC,QAAQ,EAAE,OAAO,KAAK,IAAI,CAAC;CAC9C,GAAG,YAAY,CAAC;AAEjB,wBAAgB,iBAAiB,CAAC,QAAQ,SAAS,IAAI,GAAG,IAAI,EAAE,EAC9D,eAAe,EACf,eAAe,EACf,IAAI,EACJ,OAAO,EACP,OAAO,EACP,OAAO,EACP,OAAO,EACP,cAAc,EACd,cAAc,EACd,WAAW,EACX,gBAAgB,EAChB,cAAc,EACd,eAAe,EACf,cAAc,GACf,EAAE,sBAAsB,CAAC,QAAQ,CAAC,2CAuGlC"}

View File

@@ -0,0 +1,6 @@
import { JSX } from 'react';
import type { Edge, EdgeWrapperProps } from '../../types';
declare function EdgeWrapper<EdgeType extends Edge = Edge>({ id, edgesFocusable, edgesReconnectable, elementsSelectable, onClick, onDoubleClick, onContextMenu, onMouseEnter, onMouseMove, onMouseLeave, reconnectRadius, onReconnect, onReconnectStart, onReconnectEnd, rfId, edgeTypes, noPanClassName, onError, disableKeyboardA11y, }: EdgeWrapperProps<EdgeType>): JSX.Element | null;
declare const _default: typeof EdgeWrapper;
export default _default;
//# sourceMappingURL=index.d.ts.map

View File

@@ -0,0 +1 @@
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/EdgeWrapper/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAA8D,GAAG,EAAQ,MAAM,OAAO,CAAC;AAe9F,OAAO,KAAK,EAAE,IAAI,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAE1D,iBAAS,WAAW,CAAC,QAAQ,SAAS,IAAI,GAAG,IAAI,EAAE,EACjD,EAAE,EACF,cAAc,EACd,kBAAkB,EAClB,kBAAkB,EAClB,OAAO,EACP,aAAa,EACb,aAAa,EACb,YAAY,EACZ,WAAW,EACX,YAAY,EACZ,eAAe,EACf,WAAW,EACX,gBAAgB,EAChB,cAAc,EACd,IAAI,EACJ,SAAS,EACT,cAAc,EACd,OAAO,EACP,mBAAmB,GACpB,EAAE,gBAAgB,CAAC,QAAQ,CAAC,GAAG,GAAG,CAAC,OAAO,GAAG,IAAI,CAoOjD;wBAEmC,OAAO,WAAW;AAAtD,wBAAuD"}

View File

@@ -0,0 +1,11 @@
import type { EdgeTypes } from '../../types';
export declare const builtinEdgeTypes: EdgeTypes;
export declare const nullPosition: {
sourceX: null;
sourceY: null;
targetX: null;
targetY: null;
sourcePosition: null;
targetPosition: null;
};
//# sourceMappingURL=utils.d.ts.map

View File

@@ -0,0 +1 @@
{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../src/components/EdgeWrapper/utils.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AAS7C,eAAO,MAAM,gBAAgB,EAAE,SAM9B,CAAC;AAEF,eAAO,MAAM,YAAY;;;;;;;CAOxB,CAAC"}

View File

@@ -0,0 +1,30 @@
import type { BaseEdgeProps } from '../../types';
/**
* The `<BaseEdge />` component gets used internally for all the edges. It can be
* used inside a custom edge and handles the invisible helper edge and the edge label
* for you.
*
* @public
* @example
* ```jsx
*import { BaseEdge } from '@xyflow/react';
*
*export function CustomEdge({ sourceX, sourceY, targetX, targetY, ...props }) {
* const [edgePath] = getStraightPath({
* sourceX,
* sourceY,
* targetX,
* targetY,
* });
*
* return <BaseEdge path={edgePath} {...props} />;
*}
*```
*
* @remarks If you want to use an edge marker with the [`<BaseEdge />`](/api-reference/components/base-edge) component,
* you can pass the `markerStart` or `markerEnd` props passed to your custom edge
* through to the [`<BaseEdge />`](/api-reference/components/base-edge) component.
* You can see all the props passed to a custom edge by looking at the [`EdgeProps`](/api-reference/types/edge-props) type.
*/
export declare function BaseEdge({ path, labelX, labelY, label, labelStyle, labelShowBg, labelBgStyle, labelBgPadding, labelBgBorderRadius, interactionWidth, ...props }: BaseEdgeProps): import("react/jsx-runtime").JSX.Element;
//# sourceMappingURL=BaseEdge.d.ts.map

View File

@@ -0,0 +1 @@
{"version":3,"file":"BaseEdge.d.ts","sourceRoot":"","sources":["../../../src/components/Edges/BaseEdge.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAEjD;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACH,wBAAgB,QAAQ,CAAC,EACvB,IAAI,EACJ,MAAM,EACN,MAAM,EACN,KAAK,EACL,UAAU,EACV,WAAW,EACX,YAAY,EACZ,cAAc,EACd,mBAAmB,EACnB,gBAAqB,EACrB,GAAG,KAAK,EACT,EAAE,aAAa,2CA2Bf"}

View File

@@ -0,0 +1,31 @@
import type { BezierEdgeProps } from '../../types';
/**
* Component that can be used inside a custom edge to render a bezier curve.
*
* @public
* @example
*
* ```tsx
* import { BezierEdge } from '@xyflow/react';
*
* function CustomEdge({ sourceX, sourceY, targetX, targetY, sourcePosition, targetPosition }) {
* return (
* <BezierEdge
* sourceX={sourceX}
* sourceY={sourceY}
* targetX={targetX}
* targetY={targetY}
* sourcePosition={sourcePosition}
* targetPosition={targetPosition}
* />
* );
* }
* ```
*/
declare const BezierEdge: import("react").MemoExoticComponent<({ id, sourceX, sourceY, targetX, targetY, sourcePosition, targetPosition, label, labelStyle, labelShowBg, labelBgStyle, labelBgPadding, labelBgBorderRadius, style, markerEnd, markerStart, pathOptions, interactionWidth, }: BezierEdgeProps) => import("react/jsx-runtime").JSX.Element>;
/**
* @internal
*/
declare const BezierEdgeInternal: import("react").MemoExoticComponent<({ id, sourceX, sourceY, targetX, targetY, sourcePosition, targetPosition, label, labelStyle, labelShowBg, labelBgStyle, labelBgPadding, labelBgBorderRadius, style, markerEnd, markerStart, pathOptions, interactionWidth, }: BezierEdgeProps) => import("react/jsx-runtime").JSX.Element>;
export { BezierEdge, BezierEdgeInternal };
//# sourceMappingURL=BezierEdge.d.ts.map

View File

@@ -0,0 +1 @@
{"version":3,"file":"BezierEdge.d.ts","sourceRoot":"","sources":["../../../src/components/Edges/BezierEdge.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,aAAa,CAAC;AA2DnD;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,QAAA,MAAM,UAAU,qQA1DT,eAAe,6CA0DoC,CAAC;AAE3D;;GAEG;AACH,QAAA,MAAM,kBAAkB,qQA/DjB,eAAe,6CA+D2C,CAAC;AAKlE,OAAO,EAAE,UAAU,EAAE,kBAAkB,EAAE,CAAC"}

View File

@@ -0,0 +1,17 @@
import type { MouseEvent as ReactMouseEvent, SVGAttributes } from 'react';
import { Position } from '@xyflow/system';
export interface EdgeAnchorProps extends SVGAttributes<SVGGElement> {
position: Position;
centerX: number;
centerY: number;
radius?: number;
onMouseDown: (event: ReactMouseEvent<SVGGElement, MouseEvent>) => void;
onMouseEnter: (event: ReactMouseEvent<SVGGElement, MouseEvent>) => void;
onMouseOut: (event: ReactMouseEvent<SVGGElement, MouseEvent>) => void;
type: string;
}
/**
* @internal
*/
export declare function EdgeAnchor({ position, centerX, centerY, radius, onMouseDown, onMouseEnter, onMouseOut, type, }: EdgeAnchorProps): import("react/jsx-runtime").JSX.Element;
//# sourceMappingURL=EdgeAnchor.d.ts.map

View File

@@ -0,0 +1 @@
{"version":3,"file":"EdgeAnchor.d.ts","sourceRoot":"","sources":["../../../src/components/Edges/EdgeAnchor.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,IAAI,eAAe,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAE1E,OAAO,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAc1C,MAAM,WAAW,eAAgB,SAAQ,aAAa,CAAC,WAAW,CAAC;IACjE,QAAQ,EAAE,QAAQ,CAAC;IACnB,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,EAAE,MAAM,CAAC;IAChB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,WAAW,EAAE,CAAC,KAAK,EAAE,eAAe,CAAC,WAAW,EAAE,UAAU,CAAC,KAAK,IAAI,CAAC;IACvE,YAAY,EAAE,CAAC,KAAK,EAAE,eAAe,CAAC,WAAW,EAAE,UAAU,CAAC,KAAK,IAAI,CAAC;IACxE,UAAU,EAAE,CAAC,KAAK,EAAE,eAAe,CAAC,WAAW,EAAE,UAAU,CAAC,KAAK,IAAI,CAAC;IACtE,IAAI,EAAE,MAAM,CAAC;CACd;AAID;;GAEG;AACH,wBAAgB,UAAU,CAAC,EACzB,QAAQ,EACR,OAAO,EACP,OAAO,EACP,MAAW,EACX,WAAW,EACX,YAAY,EACZ,UAAU,EACV,IAAI,GACL,EAAE,eAAe,2CAcjB"}

View File

@@ -0,0 +1,34 @@
import type { EdgeTextProps } from '../../types';
declare function EdgeTextComponent({ x, y, label, labelStyle, labelShowBg, labelBgStyle, labelBgPadding, labelBgBorderRadius, children, className, ...rest }: EdgeTextProps): import("react/jsx-runtime").JSX.Element | null;
declare namespace EdgeTextComponent {
var displayName: string;
}
/**
* You can use the `<EdgeText />` component as a helper component to display text
* within your custom edges.
*
* @public
*
* @example
* ```jsx
* import { EdgeText } from '@xyflow/react';
*
* export function CustomEdgeLabel({ label }) {
* return (
* <EdgeText
* x={100}
* y={100}
* label={label}
* labelStyle={{ fill: 'white' }}
* labelShowBg
* labelBgStyle={{ fill: 'red' }}
* labelBgPadding={[2, 4]}
* labelBgBorderRadius={2}
* />
* );
* }
*```
*/
export declare const EdgeText: import("react").MemoExoticComponent<typeof EdgeTextComponent>;
export {};
//# sourceMappingURL=EdgeText.d.ts.map

View File

@@ -0,0 +1 @@
{"version":3,"file":"EdgeText.d.ts","sourceRoot":"","sources":["../../../src/components/Edges/EdgeText.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAEjD,iBAAS,iBAAiB,CAAC,EACzB,CAAC,EACD,CAAC,EACD,KAAK,EACL,UAAU,EACV,WAAkB,EAClB,YAAY,EACZ,cAAuB,EACvB,mBAAuB,EACvB,QAAQ,EACR,SAAS,EACT,GAAG,IAAI,EACR,EAAE,aAAa,kDAqDf;kBAjEQ,iBAAiB;;;AAqE1B;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,eAAO,MAAM,QAAQ,+DAA0B,CAAC"}

View File

@@ -0,0 +1,30 @@
import { Position } from '@xyflow/system';
import type { SimpleBezierEdgeProps } from '../../types';
export interface GetSimpleBezierPathParams {
sourceX: number;
sourceY: number;
/** @default Position.Bottom */
sourcePosition?: Position;
targetX: number;
targetY: number;
/** @default Position.Top */
targetPosition?: Position;
}
/**
* The `getSimpleBezierPath` util returns everything you need to render a simple
* bezier edge between two nodes.
* @public
* @returns
* - `path`: the path to use in an SVG `<path>` element.
* - `labelX`: the `x` position you can use to render a label for this edge.
* - `labelY`: the `y` position you can use to render a label for this edge.
* - `offsetX`: the absolute difference between the source `x` position and the `x` position of the
* middle of this path.
* - `offsetY`: the absolute difference between the source `y` position and the `y` position of the
* middle of this path.
*/
export declare function getSimpleBezierPath({ sourceX, sourceY, sourcePosition, targetX, targetY, targetPosition, }: GetSimpleBezierPathParams): [path: string, labelX: number, labelY: number, offsetX: number, offsetY: number];
declare const SimpleBezierEdge: import("react").MemoExoticComponent<({ id, sourceX, sourceY, targetX, targetY, sourcePosition, targetPosition, label, labelStyle, labelShowBg, labelBgStyle, labelBgPadding, labelBgBorderRadius, style, markerEnd, markerStart, interactionWidth, }: SimpleBezierEdgeProps) => import("react/jsx-runtime").JSX.Element>;
declare const SimpleBezierEdgeInternal: import("react").MemoExoticComponent<({ id, sourceX, sourceY, targetX, targetY, sourcePosition, targetPosition, label, labelStyle, labelShowBg, labelBgStyle, labelBgPadding, labelBgBorderRadius, style, markerEnd, markerStart, interactionWidth, }: SimpleBezierEdgeProps) => import("react/jsx-runtime").JSX.Element>;
export { SimpleBezierEdge, SimpleBezierEdgeInternal };
//# sourceMappingURL=SimpleBezierEdge.d.ts.map

View File

@@ -0,0 +1 @@
{"version":3,"file":"SimpleBezierEdge.d.ts","sourceRoot":"","sources":["../../../src/components/Edges/SimpleBezierEdge.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,QAAQ,EAAuB,MAAM,gBAAgB,CAAC;AAG/D,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,aAAa,CAAC;AAEzD,MAAM,WAAW,yBAAyB;IACxC,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,EAAE,MAAM,CAAC;IAChB,+BAA+B;IAC/B,cAAc,CAAC,EAAE,QAAQ,CAAC;IAC1B,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,EAAE,MAAM,CAAC;IAChB,4BAA4B;IAC5B,cAAc,CAAC,EAAE,QAAQ,CAAC;CAC3B;AAkBD;;;;;;;;;;;;GAYG;AACH,wBAAgB,mBAAmB,CAAC,EAClC,OAAO,EACP,OAAO,EACP,cAAgC,EAChC,OAAO,EACP,OAAO,EACP,cAA6B,GAC9B,EAAE,yBAAyB,GAAG,CAAC,IAAI,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,CAAC,CAiC9G;AAyDD,QAAA,MAAM,gBAAgB,wPAlCf,qBAAqB,6CAkC0C,CAAC;AACvE,QAAA,MAAM,wBAAwB,wPAnCvB,qBAAqB,6CAmCiD,CAAC;AAK9E,OAAO,EAAE,gBAAgB,EAAE,wBAAwB,EAAE,CAAC"}

View File

@@ -0,0 +1,31 @@
import type { SmoothStepEdgeProps } from '../../types';
/**
* Component that can be used inside a custom edge to render a smooth step edge.
*
* @public
* @example
*
* ```tsx
* import { SmoothStepEdge } from '@xyflow/react';
*
* function CustomEdge({ sourceX, sourceY, targetX, targetY, sourcePosition, targetPosition }) {
* return (
* <SmoothStepEdge
* sourceX={sourceX}
* sourceY={sourceY}
* targetX={targetX}
* targetY={targetY}
* sourcePosition={sourcePosition}
* targetPosition={targetPosition}
* />
* );
* }
* ```
*/
declare const SmoothStepEdge: import("react").MemoExoticComponent<({ id, sourceX, sourceY, targetX, targetY, label, labelStyle, labelShowBg, labelBgStyle, labelBgPadding, labelBgBorderRadius, style, sourcePosition, targetPosition, markerEnd, markerStart, pathOptions, interactionWidth, }: SmoothStepEdgeProps) => import("react/jsx-runtime").JSX.Element>;
/**
* @internal
*/
declare const SmoothStepEdgeInternal: import("react").MemoExoticComponent<({ id, sourceX, sourceY, targetX, targetY, label, labelStyle, labelShowBg, labelBgStyle, labelBgPadding, labelBgBorderRadius, style, sourcePosition, targetPosition, markerEnd, markerStart, pathOptions, interactionWidth, }: SmoothStepEdgeProps) => import("react/jsx-runtime").JSX.Element>;
export { SmoothStepEdge, SmoothStepEdgeInternal };
//# sourceMappingURL=SmoothStepEdge.d.ts.map

View File

@@ -0,0 +1 @@
{"version":3,"file":"SmoothStepEdge.d.ts","sourceRoot":"","sources":["../../../src/components/Edges/SmoothStepEdge.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,aAAa,CAAC;AA6DvD;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,QAAA,MAAM,cAAc,qQA5Db,mBAAmB,6CA4DwC,CAAC;AAEnE;;GAEG;AACH,QAAA,MAAM,sBAAsB,qQAjErB,mBAAmB,6CAiE+C,CAAC;AAK1E,OAAO,EAAE,cAAc,EAAE,sBAAsB,EAAE,CAAC"}

View File

@@ -0,0 +1,31 @@
import type { StepEdgeProps } from '../../types';
/**
* Component that can be used inside a custom edge to render a step edge.
*
* @public
* @example
*
* ```tsx
* import { StepEdge } from '@xyflow/react';
*
* function CustomEdge({ sourceX, sourceY, targetX, targetY, sourcePosition, targetPosition }) {
* return (
* <StepEdge
* sourceX={sourceX}
* sourceY={sourceY}
* targetX={targetX}
* targetY={targetY}
* sourcePosition={sourcePosition}
* targetPosition={targetPosition}
* />
* );
* }
* ```
*/
declare const StepEdge: import("react").MemoExoticComponent<({ id, ...props }: StepEdgeProps) => import("react/jsx-runtime").JSX.Element>;
/**
* @internal
*/
declare const StepEdgeInternal: import("react").MemoExoticComponent<({ id, ...props }: StepEdgeProps) => import("react/jsx-runtime").JSX.Element>;
export { StepEdge, StepEdgeInternal };
//# sourceMappingURL=StepEdge.d.ts.map

View File

@@ -0,0 +1 @@
{"version":3,"file":"StepEdge.d.ts","sourceRoot":"","sources":["../../../src/components/Edges/StepEdge.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAoBjD;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,QAAA,MAAM,QAAQ,yDAvCmB,aAAa,6CAuCQ,CAAC;AAEvD;;GAEG;AACH,QAAA,MAAM,gBAAgB,yDA5CW,aAAa,6CA4Ce,CAAC;AAK9D,OAAO,EAAE,QAAQ,EAAE,gBAAgB,EAAE,CAAC"}

View File

@@ -0,0 +1,29 @@
import type { StraightEdgeProps } from '../../types';
/**
* Component that can be used inside a custom edge to render a straight line.
*
* @public
* @example
*
* ```tsx
* import { StraightEdge } from '@xyflow/react';
*
* function CustomEdge({ sourceX, sourceY, targetX, targetY }) {
* return (
* <StraightEdge
* sourceX={sourceX}
* sourceY={sourceY}
* targetX={targetX}
* targetY={targetY}
* />
* );
* }
* ```
*/
declare const StraightEdge: import("react").MemoExoticComponent<({ id, sourceX, sourceY, targetX, targetY, label, labelStyle, labelShowBg, labelBgStyle, labelBgPadding, labelBgBorderRadius, style, markerEnd, markerStart, interactionWidth, }: StraightEdgeProps) => import("react/jsx-runtime").JSX.Element>;
/**
* @internal
*/
declare const StraightEdgeInternal: import("react").MemoExoticComponent<({ id, sourceX, sourceY, targetX, targetY, label, labelStyle, labelShowBg, labelBgStyle, labelBgPadding, labelBgBorderRadius, style, markerEnd, markerStart, interactionWidth, }: StraightEdgeProps) => import("react/jsx-runtime").JSX.Element>;
export { StraightEdge, StraightEdgeInternal };
//# sourceMappingURL=StraightEdge.d.ts.map

View File

@@ -0,0 +1 @@
{"version":3,"file":"StraightEdge.d.ts","sourceRoot":"","sources":["../../../src/components/Edges/StraightEdge.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,aAAa,CAAC;AAgDrD;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,QAAA,MAAM,YAAY,wNAhDX,iBAAiB,6CAgDsC,CAAC;AAE/D;;GAEG;AACH,QAAA,MAAM,oBAAoB,wNArDnB,iBAAiB,6CAqD6C,CAAC;AAKtE,OAAO,EAAE,YAAY,EAAE,oBAAoB,EAAE,CAAC"}

View File

@@ -0,0 +1,6 @@
export { SimpleBezierEdge, SimpleBezierEdgeInternal } from './SimpleBezierEdge';
export { SmoothStepEdge, SmoothStepEdgeInternal } from './SmoothStepEdge';
export { StepEdge, StepEdgeInternal } from './StepEdge';
export { StraightEdge, StraightEdgeInternal } from './StraightEdge';
export { BezierEdge, BezierEdgeInternal } from './BezierEdge';
//# sourceMappingURL=index.d.ts.map

View File

@@ -0,0 +1 @@
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Edges/index.ts"],"names":[],"mappings":"AAMA,OAAO,EAAE,gBAAgB,EAAE,wBAAwB,EAAE,MAAM,oBAAoB,CAAC;AAChF,OAAO,EAAE,cAAc,EAAE,sBAAsB,EAAE,MAAM,kBAAkB,CAAC;AAC1E,OAAO,EAAE,QAAQ,EAAE,gBAAgB,EAAE,MAAM,YAAY,CAAC;AACxD,OAAO,EAAE,YAAY,EAAE,oBAAoB,EAAE,MAAM,gBAAgB,CAAC;AACpE,OAAO,EAAE,UAAU,EAAE,kBAAkB,EAAE,MAAM,cAAc,CAAC"}

View File

@@ -0,0 +1,39 @@
import { type HTMLAttributes } from 'react';
import { type HandleProps as HandlePropsSystem, OnConnect } from '@xyflow/system';
/**
* @expand
*/
export type HandleProps = HandlePropsSystem & Omit<HTMLAttributes<HTMLDivElement>, 'id'> & {
/** Callback called when connection is made */
onConnect?: OnConnect;
};
/**
* The `<Handle />` component is used in your [custom nodes](/learn/customization/custom-nodes)
* to define connection points.
*
*@public
*
*@example
*
*```jsx
*import { Handle, Position } from '@xyflow/react';
*
*export function CustomNode({ data }) {
* return (
* <>
* <div style={{ padding: '10px 20px' }}>
* {data.label}
* </div>
*
* <Handle type="target" position={Position.Left} />
* <Handle type="source" position={Position.Right} />
* </>
* );
*};
*```
*/
export declare const Handle: import("react").MemoExoticComponent<(props: HandlePropsSystem & Omit<HTMLAttributes<HTMLDivElement>, "id"> & {
/** Callback called when connection is made */
onConnect?: OnConnect;
} & import("react").RefAttributes<HTMLDivElement>) => import("react").JSX.Element>;
//# sourceMappingURL=index.d.ts.map

View File

@@ -0,0 +1 @@
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Handle/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,cAAc,EAKpB,MAAM,OAAO,CAAC;AAGf,OAAO,EAOL,KAAK,WAAW,IAAI,iBAAiB,EAIrC,SAAS,EAGV,MAAM,gBAAgB,CAAC;AAOxB;;GAEG;AACH,MAAM,MAAM,WAAW,GAAG,iBAAiB,GACzC,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,IAAI,CAAC,GAAG;IAC3C,8CAA8C;IAC9C,SAAS,CAAC,EAAE,SAAS,CAAC;CACvB,CAAC;AA8NJ;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,eAAO,MAAM,MAAM;IAzPf,8CAA8C;gBAClC,SAAS;kFAwPmC,CAAC"}

View File

@@ -0,0 +1,5 @@
import type { Node, NodeWrapperProps } from '../../types';
declare function NodeWrapper<NodeType extends Node>({ id, onClick, onMouseEnter, onMouseMove, onMouseLeave, onContextMenu, onDoubleClick, nodesDraggable, elementsSelectable, nodesConnectable, nodesFocusable, resizeObserver, noDragClassName, noPanClassName, disableKeyboardA11y, rfId, nodeTypes, nodeClickDistance, onError, }: NodeWrapperProps<NodeType>): import("react/jsx-runtime").JSX.Element | null;
declare const _default: typeof NodeWrapper;
export default _default;
//# sourceMappingURL=index.d.ts.map

View File

@@ -0,0 +1 @@
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/NodeWrapper/index.tsx"],"names":[],"mappings":"AAoBA,OAAO,KAAK,EAAgB,IAAI,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAExE,iBAAS,WAAW,CAAC,QAAQ,SAAS,IAAI,EAAE,EAC1C,EAAE,EACF,OAAO,EACP,YAAY,EACZ,WAAW,EACX,YAAY,EACZ,aAAa,EACb,aAAa,EACb,cAAc,EACd,kBAAkB,EAClB,gBAAgB,EAChB,cAAc,EACd,cAAc,EACd,eAAe,EACf,cAAc,EACd,mBAAmB,EACnB,IAAI,EACJ,SAAS,EACT,iBAAiB,EACjB,OAAO,GACR,EAAE,gBAAgB,CAAC,QAAQ,CAAC,kDAgN5B;wBAEmC,OAAO,WAAW;AAAtD,wBAAuD"}

View File

@@ -0,0 +1,14 @@
import type { InternalNode } from '../../types';
/**
* Hook to handle the resize observation + internal updates for the passed node.
*
* @internal
* @returns nodeRef - reference to the node element
*/
export declare function useNodeObserver({ node, nodeType, hasDimensions, resizeObserver, }: {
node: InternalNode;
nodeType: string;
hasDimensions: boolean;
resizeObserver: ResizeObserver | null;
}): import("react").MutableRefObject<HTMLDivElement | null>;
//# sourceMappingURL=useNodeObserver.d.ts.map

View File

@@ -0,0 +1 @@
{"version":3,"file":"useNodeObserver.d.ts","sourceRoot":"","sources":["../../../src/components/NodeWrapper/useNodeObserver.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAGhD;;;;;GAKG;AACH,wBAAgB,eAAe,CAAC,EAC9B,IAAI,EACJ,QAAQ,EACR,aAAa,EACb,cAAc,GACf,EAAE;IACD,IAAI,EAAE,YAAY,CAAC;IACnB,QAAQ,EAAE,MAAM,CAAC;IACjB,aAAa,EAAE,OAAO,CAAC;IACvB,cAAc,EAAE,cAAc,GAAG,IAAI,CAAC;CACvC,2DAmDA"}

View File

@@ -0,0 +1,9 @@
import type { XYPosition } from '@xyflow/system';
import type { InternalNode, Node, NodeTypes } from '../../types';
export declare const arrowKeyDiffs: Record<string, XYPosition>;
export declare const builtinNodeTypes: NodeTypes;
export declare function getNodeInlineStyleDimensions<NodeType extends Node = Node>(node: InternalNode<NodeType>): {
width: number | string | undefined;
height: number | string | undefined;
};
//# sourceMappingURL=utils.d.ts.map

View File

@@ -0,0 +1 @@
{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../src/components/NodeWrapper/utils.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAMjD,OAAO,KAAK,EAAE,YAAY,EAAE,IAAI,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AAEjE,eAAO,MAAM,aAAa,EAAE,MAAM,CAAC,MAAM,EAAE,UAAU,CAKpD,CAAC;AAEF,eAAO,MAAM,gBAAgB,EAAE,SAK9B,CAAC;AAEF,wBAAgB,4BAA4B,CAAC,QAAQ,SAAS,IAAI,GAAG,IAAI,EACvE,IAAI,EAAE,YAAY,CAAC,QAAQ,CAAC,GAC3B;IACD,KAAK,EAAE,MAAM,GAAG,MAAM,GAAG,SAAS,CAAC;IACnC,MAAM,EAAE,MAAM,GAAG,MAAM,GAAG,SAAS,CAAC;CACrC,CAYA"}

View File

@@ -0,0 +1,3 @@
import type { BuiltInNode, NodeProps } from '../../types/nodes';
export declare function DefaultNode({ data, isConnectable, targetPosition, sourcePosition, }: NodeProps<BuiltInNode>): import("react/jsx-runtime").JSX.Element;
//# sourceMappingURL=DefaultNode.d.ts.map

View File

@@ -0,0 +1 @@
{"version":3,"file":"DefaultNode.d.ts","sourceRoot":"","sources":["../../../src/components/Nodes/DefaultNode.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAC;AAEhE,wBAAgB,WAAW,CAAC,EAC1B,IAAI,EACJ,aAAa,EACb,cAA6B,EAC7B,cAAgC,GACjC,EAAE,SAAS,CAAC,WAAW,CAAC,2CAQxB"}

View File

@@ -0,0 +1,2 @@
export declare function GroupNode(): null;
//# sourceMappingURL=GroupNode.d.ts.map

View File

@@ -0,0 +1 @@
{"version":3,"file":"GroupNode.d.ts","sourceRoot":"","sources":["../../../src/components/Nodes/GroupNode.tsx"],"names":[],"mappings":"AAAA,wBAAgB,SAAS,SAExB"}

View File

@@ -0,0 +1,3 @@
import type { BuiltInNode, NodeProps } from '../../types/nodes';
export declare function InputNode({ data, isConnectable, sourcePosition }: NodeProps<BuiltInNode>): import("react/jsx-runtime").JSX.Element;
//# sourceMappingURL=InputNode.d.ts.map

View File

@@ -0,0 +1 @@
{"version":3,"file":"InputNode.d.ts","sourceRoot":"","sources":["../../../src/components/Nodes/InputNode.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAC;AAEhE,wBAAgB,SAAS,CAAC,EAAE,IAAI,EAAE,aAAa,EAAE,cAAgC,EAAE,EAAE,SAAS,CAAC,WAAW,CAAC,2CAO1G"}

View File

@@ -0,0 +1,3 @@
import type { BuiltInNode, NodeProps } from '../../types/nodes';
export declare function OutputNode({ data, isConnectable, targetPosition }: NodeProps<BuiltInNode>): import("react/jsx-runtime").JSX.Element;
//# sourceMappingURL=OutputNode.d.ts.map

View File

@@ -0,0 +1 @@
{"version":3,"file":"OutputNode.d.ts","sourceRoot":"","sources":["../../../src/components/Nodes/OutputNode.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAC;AAEhE,wBAAgB,UAAU,CAAC,EAAE,IAAI,EAAE,aAAa,EAAE,cAA6B,EAAE,EAAE,SAAS,CAAC,WAAW,CAAC,2CAOxG"}

View File

@@ -0,0 +1,13 @@
import type { RefObject } from 'react';
import type { StoreApi } from 'zustand';
import type { ReactFlowState } from '../../types';
export declare function handleNodeClick({ id, store, unselect, nodeRef, }: {
id: string;
store: {
getState: StoreApi<ReactFlowState>['getState'];
setState: StoreApi<ReactFlowState>['setState'];
};
unselect?: boolean;
nodeRef?: RefObject<HTMLDivElement>;
}): void;
//# sourceMappingURL=utils.d.ts.map

View File

@@ -0,0 +1 @@
{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../src/components/Nodes/utils.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAC;AAGxC,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAQlD,wBAAgB,eAAe,CAAC,EAC9B,EAAE,EACF,KAAK,EACL,QAAgB,EAChB,OAAO,GACR,EAAE;IACD,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE;QACL,QAAQ,EAAE,QAAQ,CAAC,cAAc,CAAC,CAAC,UAAU,CAAC,CAAC;QAC/C,QAAQ,EAAE,QAAQ,CAAC,cAAc,CAAC,CAAC,UAAU,CAAC,CAAC;KAChD,CAAC;IACF,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,SAAS,CAAC,cAAc,CAAC,CAAC;CACrC,QAkBA"}

View File

@@ -0,0 +1,13 @@
/**
* The nodes selection rectangle gets displayed when a user
* made a selection with on or several nodes
*/
import { type MouseEvent } from 'react';
import type { Node } from '../../types';
export type NodesSelectionProps<NodeType> = {
onSelectionContextMenu?: (event: MouseEvent, nodes: NodeType[]) => void;
noPanClassName?: string;
disableKeyboardA11y: boolean;
};
export declare function NodesSelection<NodeType extends Node>({ onSelectionContextMenu, noPanClassName, disableKeyboardA11y, }: NodesSelectionProps<NodeType>): import("react/jsx-runtime").JSX.Element | null;
//# sourceMappingURL=index.d.ts.map

View File

@@ -0,0 +1 @@
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/NodesSelection/index.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AACH,OAAO,EAAqB,KAAK,UAAU,EAAsB,MAAM,OAAO,CAAC;AAS/E,OAAO,KAAK,EAAE,IAAI,EAAkB,MAAM,aAAa,CAAC;AAExD,MAAM,MAAM,mBAAmB,CAAC,QAAQ,IAAI;IAC1C,sBAAsB,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,EAAE,KAAK,EAAE,QAAQ,EAAE,KAAK,IAAI,CAAC;IACxE,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,mBAAmB,EAAE,OAAO,CAAC;CAC9B,CAAC;AAeF,wBAAgB,cAAc,CAAC,QAAQ,SAAS,IAAI,EAAE,EACpD,sBAAsB,EACtB,cAAc,EACd,mBAAmB,GACpB,EAAE,mBAAmB,CAAC,QAAQ,CAAC,kDA6D/B"}

View File

@@ -0,0 +1,45 @@
import { HTMLAttributes } from 'react';
import type { PanelPosition } from '@xyflow/system';
/**
* @expand
*/
export type PanelProps = HTMLAttributes<HTMLDivElement> & {
/**
* The position of the panel.
* @default "top-left"
*/
position?: PanelPosition;
};
/**
* The `<Panel />` component helps you position content above the viewport.
* It is used internally by the [`<MiniMap />`](/api-reference/components/minimap)
* and [`<Controls />`](/api-reference/components/controls) components.
*
* @public
*
* @example
* ```jsx
*import { ReactFlow, Background, Panel } from '@xyflow/react';
*
*export default function Flow() {
* return (
* <ReactFlow nodes={[]} fitView>
* <Panel position="top-left">top-left</Panel>
* <Panel position="top-center">top-center</Panel>
* <Panel position="top-right">top-right</Panel>
* <Panel position="bottom-left">bottom-left</Panel>
* <Panel position="bottom-center">bottom-center</Panel>
* <Panel position="bottom-right">bottom-right</Panel>
* </ReactFlow>
* );
*}
*```
*/
export declare const Panel: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & {
/**
* The position of the panel.
* @default "top-left"
*/
position?: PanelPosition;
} & import("react").RefAttributes<HTMLDivElement>>;
//# sourceMappingURL=index.d.ts.map

View File

@@ -0,0 +1 @@
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Panel/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAc,MAAM,OAAO,CAAC;AAEnD,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,gBAAgB,CAAC;AAEpD;;GAEG;AACH,MAAM,MAAM,UAAU,GAAG,cAAc,CAAC,cAAc,CAAC,GAAG;IACxD;;;OAGG;IACH,QAAQ,CAAC,EAAE,aAAa,CAAC;CAC1B,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,eAAO,MAAM,KAAK;IAhChB;;;OAGG;eACQ,aAAa;kDAsCzB,CAAC"}

View File

@@ -0,0 +1,83 @@
import { type ReactNode } from 'react';
import type { Node, Edge, FitViewOptions } from '../../types';
import { CoordinateExtent, NodeOrigin, ZIndexMode } from '@xyflow/system';
export type ReactFlowProviderProps = {
/** These nodes are used to initialize the flow. They are not dynamic. */
initialNodes?: Node[];
/** These edges are used to initialize the flow. They are not dynamic. */
initialEdges?: Edge[];
/** These nodes are used to initialize the flow. They are not dynamic. */
defaultNodes?: Node[];
/** These edges are used to initialize the flow. They are not dynamic. */
defaultEdges?: Edge[];
/** The initial width is necessary to be able to use fitView on the server */
initialWidth?: number;
/** The initial height is necessary to be able to use fitView on the server */
initialHeight?: number;
/** When `true`, the flow will be zoomed and panned to fit all the nodes initially provided. */
fitView?: boolean;
/**
* You can provide an object of options to customize the initial fitView behavior.
*/
initialFitViewOptions?: FitViewOptions;
/** Initial minimum zoom level */
initialMinZoom?: number;
/** Initial maximum zoom level */
initialMaxZoom?: number;
/**
* The origin of the node to use when placing it in the flow or looking up its `x` and `y`
* position. An origin of `[0, 0]` means that a node's top left corner will be placed at the `x`
* and `y` position.
* @default [0, 0]
* @example
* [0, 0] // default, top left
* [0.5, 0.5] // center
* [1, 1] // bottom right
*/
nodeOrigin?: NodeOrigin;
/**
* By default, nodes can be placed on an infinite flow. You can use this prop to set a boundary.
*
* The first pair of coordinates is the top left boundary and the second pair is the bottom right.
* @example [[-1000, -10000], [1000, 1000]]
*/
nodeExtent?: CoordinateExtent;
children: ReactNode;
zIndexMode?: ZIndexMode;
};
/**
* The `<ReactFlowProvider />` component is a [context provider](https://react.dev/learn/passing-data-deeply-with-context#)
* that makes it possible to access a flow's internal state outside of the
* [`<ReactFlow />`](/api-reference/react-flow) component. Many of the hooks we
* provide rely on this component to work.
* @public
*
* @example
* ```tsx
*import { ReactFlow, ReactFlowProvider, useNodes } from '@xyflow/react'
*
*export default function Flow() {
* return (
* <ReactFlowProvider>
* <ReactFlow nodes={...} edges={...} />
* <Sidebar />
* </ReactFlowProvider>
* );
*}
*
*function Sidebar() {
* // This hook will only work if the component it's used in is a child of a
* // <ReactFlowProvider />.
* const nodes = useNodes()
*
* return <aside>do something with nodes</aside>;
*}
*```
*
* @remarks If you're using a router and want your flow's state to persist across routes,
* it's vital that you place the `<ReactFlowProvider />` component _outside_ of
* your router. If you have multiple flows on the same page you will need to use a separate
* `<ReactFlowProvider />` for each flow.
*/
export declare function ReactFlowProvider({ initialNodes: nodes, initialEdges: edges, defaultNodes, defaultEdges, initialWidth: width, initialHeight: height, initialMinZoom: minZoom, initialMaxZoom: maxZoom, initialFitViewOptions: fitViewOptions, fitView, nodeOrigin, nodeExtent, zIndexMode, children, }: ReactFlowProviderProps): import("react/jsx-runtime").JSX.Element;
//# sourceMappingURL=index.d.ts.map

View File

@@ -0,0 +1 @@
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/ReactFlowProvider/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAY,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAKjD,OAAO,KAAK,EAAE,IAAI,EAAE,IAAI,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAC9D,OAAO,EAAE,gBAAgB,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAE1E,MAAM,MAAM,sBAAsB,GAAG;IACnC,yEAAyE;IACzE,YAAY,CAAC,EAAE,IAAI,EAAE,CAAC;IACtB,yEAAyE;IACzE,YAAY,CAAC,EAAE,IAAI,EAAE,CAAC;IACtB,yEAAyE;IACzE,YAAY,CAAC,EAAE,IAAI,EAAE,CAAC;IACtB,yEAAyE;IACzE,YAAY,CAAC,EAAE,IAAI,EAAE,CAAC;IACtB,6EAA6E;IAC7E,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,8EAA8E;IAC9E,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,+FAA+F;IAC/F,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;OAEG;IACH,qBAAqB,CAAC,EAAE,cAAc,CAAC;IACvC,iCAAiC;IACjC,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,iCAAiC;IACjC,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB;;;;;;;;;OASG;IACH,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB;;;;;OAKG;IACH,UAAU,CAAC,EAAE,gBAAgB,CAAC;IAC9B,QAAQ,EAAE,SAAS,CAAC;IACpB,UAAU,CAAC,EAAE,UAAU,CAAC;CACzB,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiCG;AACH,wBAAgB,iBAAiB,CAAC,EAChC,YAAY,EAAE,KAAK,EACnB,YAAY,EAAE,KAAK,EACnB,YAAY,EACZ,YAAY,EACZ,YAAY,EAAE,KAAK,EACnB,aAAa,EAAE,MAAM,EACrB,cAAc,EAAE,OAAO,EACvB,cAAc,EAAE,OAAO,EACvB,qBAAqB,EAAE,cAAc,EACrC,OAAO,EACP,UAAU,EACV,UAAU,EACV,UAAU,EACV,QAAQ,GACT,EAAE,sBAAsB,2CAwBxB"}

View File

@@ -0,0 +1,7 @@
import type { OnSelectionChangeFunc, Node, Edge } from '../../types';
type SelectionListenerProps<NodeType extends Node = Node, EdgeType extends Edge = Edge> = {
onSelectionChange?: OnSelectionChangeFunc<NodeType, EdgeType>;
};
export declare function SelectionListener<NodeType extends Node = Node, EdgeType extends Edge = Edge>({ onSelectionChange, }: SelectionListenerProps<NodeType, EdgeType>): import("react/jsx-runtime").JSX.Element | null;
export {};
//# sourceMappingURL=index.d.ts.map

View File

@@ -0,0 +1 @@
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/SelectionListener/index.tsx"],"names":[],"mappings":"AAUA,OAAO,KAAK,EAAkB,qBAAqB,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,aAAa,CAAC;AAErF,KAAK,sBAAsB,CAAC,QAAQ,SAAS,IAAI,GAAG,IAAI,EAAE,QAAQ,SAAS,IAAI,GAAG,IAAI,IAAI;IACxF,iBAAiB,CAAC,EAAE,qBAAqB,CAAC,QAAQ,EAAE,QAAQ,CAAC,CAAC;CAC/D,CAAC;AAkDF,wBAAgB,iBAAiB,CAAC,QAAQ,SAAS,IAAI,GAAG,IAAI,EAAE,QAAQ,SAAS,IAAI,GAAG,IAAI,EAAE,EAC5F,iBAAiB,GAClB,EAAE,sBAAsB,CAAC,QAAQ,EAAE,QAAQ,CAAC,kDAQ5C"}

View File

@@ -0,0 +1,9 @@
import type { Node, Edge, ReactFlowProps } from '../../types';
declare const reactFlowFieldsToTrack: readonly ["nodes", "edges", "defaultNodes", "defaultEdges", "onConnect", "onConnectStart", "onConnectEnd", "onClickConnectStart", "onClickConnectEnd", "nodesDraggable", "autoPanOnNodeFocus", "nodesConnectable", "nodesFocusable", "edgesFocusable", "edgesReconnectable", "elevateNodesOnSelect", "elevateEdgesOnSelect", "minZoom", "maxZoom", "nodeExtent", "onNodesChange", "onEdgesChange", "elementsSelectable", "connectionMode", "snapGrid", "snapToGrid", "translateExtent", "connectOnClick", "defaultEdgeOptions", "fitView", "fitViewOptions", "onNodesDelete", "onEdgesDelete", "onDelete", "onNodeDrag", "onNodeDragStart", "onNodeDragStop", "onSelectionDrag", "onSelectionDragStart", "onSelectionDragStop", "onMoveStart", "onMove", "onMoveEnd", "noPanClassName", "nodeOrigin", "autoPanOnConnect", "autoPanOnNodeDrag", "onError", "connectionRadius", "isValidConnection", "selectNodesOnDrag", "nodeDragThreshold", "connectionDragThreshold", "onBeforeDelete", "debug", "autoPanSpeed", "ariaLabelConfig", "zIndexMode"];
type ReactFlowFieldsToTrack = (typeof reactFlowFieldsToTrack)[number];
type StoreUpdaterProps<NodeType extends Node = Node, EdgeType extends Edge = Edge> = Pick<ReactFlowProps<NodeType, EdgeType>, ReactFlowFieldsToTrack> & {
rfId: string;
};
export declare function StoreUpdater<NodeType extends Node = Node, EdgeType extends Edge = Edge>(props: StoreUpdaterProps<NodeType, EdgeType>): null;
export {};
//# sourceMappingURL=index.d.ts.map

View File

@@ -0,0 +1 @@
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/StoreUpdater/index.tsx"],"names":[],"mappings":"AAUA,OAAO,KAAK,EAAE,IAAI,EAAE,IAAI,EAAkB,cAAc,EAAkB,MAAM,aAAa,CAAC;AAI9F,QAAA,MAAM,sBAAsB,q/BA2DlB,CAAC;AAEX,KAAK,sBAAsB,GAAG,CAAC,OAAO,sBAAsB,CAAC,CAAC,MAAM,CAAC,CAAC;AACtE,KAAK,iBAAiB,CAAC,QAAQ,SAAS,IAAI,GAAG,IAAI,EAAE,QAAQ,SAAS,IAAI,GAAG,IAAI,IAAI,IAAI,CACvF,cAAc,CAAC,QAAQ,EAAE,QAAQ,CAAC,EAClC,sBAAsB,CACvB,GAAG;IACF,IAAI,EAAE,MAAM,CAAC;CACd,CAAC;AA+BF,wBAAgB,YAAY,CAAC,QAAQ,SAAS,IAAI,GAAG,IAAI,EAAE,QAAQ,SAAS,IAAI,GAAG,IAAI,EACrF,KAAK,EAAE,iBAAiB,CAAC,QAAQ,EAAE,QAAQ,CAAC,QAyD7C"}

View File

@@ -0,0 +1,2 @@
export declare function UserSelection(): import("react/jsx-runtime").JSX.Element | null;
//# sourceMappingURL=index.d.ts.map

View File

@@ -0,0 +1 @@
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/UserSelection/index.tsx"],"names":[],"mappings":"AAUA,wBAAgB,aAAa,mDAkB5B"}

View File

@@ -0,0 +1,30 @@
import type { ReactNode } from 'react';
/**
* The `<ViewportPortal />` component can be used to add components to the same viewport
* of the flow where nodes and edges are rendered. This is useful when you want to render
* your own components that are adhere to the same coordinate system as the nodes & edges
* and are also affected by zooming and panning
* @public
* @example
*
* ```jsx
*import React from 'react';
*import { ViewportPortal } from '@xyflow/react';
*
*export default function () {
* return (
* <ViewportPortal>
* <div
* style={{ transform: 'translate(100px, 100px)', position: 'absolute' }}
* >
* This div is positioned at [100, 100] on the flow.
* </div>
* </ViewportPortal>
* );
*}
*```
*/
export declare function ViewportPortal({ children }: {
children: ReactNode;
}): import("react").ReactPortal | null;
//# sourceMappingURL=index.d.ts.map

View File

@@ -0,0 +1 @@
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/ViewportPortal/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAQvC;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,wBAAgB,cAAc,CAAC,EAAE,QAAQ,EAAE,EAAE;IAAE,QAAQ,EAAE,SAAS,CAAA;CAAE,sCAQnE"}