Initial commit with Advoware proxy

This commit is contained in:
root
2025-10-19 14:57:07 +00:00
commit 273aa8b549
45771 changed files with 5534555 additions and 0 deletions

View File

@@ -0,0 +1,21 @@
MIT License
Copyright (c) 2019-2024 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.

View File

@@ -0,0 +1,135 @@
![readme-header](https://user-images.githubusercontent.com/2857535/279691008-efd8f0d2-d235-4f19-b136-6e81e5ba974d.svg#gh-light-mode-only)
![readme-header-dark](https://user-images.githubusercontent.com/2857535/279691021-f1cbf9e6-ea4d-43e8-935d-dd4c4983c0d9.svg#gh-dark-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/reactflow?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)
A highly customizable React component for building interactive graphs and node-based editors.
[🚀 Getting Started](https://reactflow.dev/learn) | [📖 Documentation](https://reactflow.dev/api-reference/react-flow) | [📺 Examples](https://reactflow.dev/examples/overview) | [☎️ Discord](https://discord.gg/RVmnytFmGW) | [💎 React Flow Pro](https://pro.reactflow.dev)
</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/examples) and [edge types](https://reactflow.dev/examples/edges/edge-types) and support for custom nodes with multiple handles and custom edges
- **Fast rendering:** Only nodes that have changed are re-rendered
- **Hooks and Utils:** [Hooks](https://reactflow.dev/api-reference/hooks) for handling nodes, edges and the viewport and graph [helper functions](https://reactflow.dev/api-reference/utils)
- **Plugin Components:** [Background](https://reactflow.dev/api-reference/components/background), [MiniMap](https://reactflow.dev/api-reference/components/minimap) and [Controls](https://reactflow.dev/api-reference/components/controls)
- **Reliable**: Written in [Typescript](https://www.typescriptlang.org/) and tested with [cypress](https://www.cypress.io/)
## Commercial Usage
**Are you using React Flow for a personal project?** Great! No sponsorship needed, you can support us by reporting any bugs you find, sending us screenshots of your projects, and starring us on Github 🌟
**Are you using React Flow at your organization and making money from it?** Awesome! We rely on your support to keep React Flow developed and maintained under an MIT License, just how we like it. You can do that on the [React Flow Pro website](https://pro.reactflow.dev) or through [Github Sponsors](https://github.com/sponsors/wbkd).
You can find more information in our [React Flow Pro FAQs](https://pro.reactflow.dev/info).
## Installation
The easiest way to get the latest version of React Flow is to install it via npm, yarn or pnpm:
```bash
npm install @xyflow/react
```
## Quickstart
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/learn/customization/custom-nodes), [examples](https://reactflow.dev/examples/overview) and the full [API reference](https://reactflow.dev/api-reference/react-flow).
```jsx
import { useCallback } from 'react';
import {
ReactFlow,
MiniMap,
Controls,
Background,
useNodesState,
useEdgesState,
addEdge,
} from '@xyflow/react';
import '@xyflow/react/dist/style.css';
const initialNodes = [
{ id: '1', position: { x: 0, y: 0 }, data: { label: '1' } },
{ id: '2', position: { x: 0, y: 100 }, data: { label: '2' } },
];
const initialEdges = [{ id: 'e1-2', source: '1', target: '2' }];
function Flow() {
const [nodes, setNodes, onNodesChange] = useNodesState(initialNodes);
const [edges, setEdges, onEdgesChange] = useEdgesState(initialEdges);
const onConnect = useCallback((params) => setEdges((eds) => addEdge(params, eds)), [setEdges]);
return (
<ReactFlow
nodes={nodes}
edges={edges}
onNodesChange={onNodesChange}
onEdgesChange={onEdgesChange}
onConnect={onConnect}
>
<MiniMap />
<Controls />
<Background />
</ReactFlow>
);
}
export default Flow;
```
## Development
Before you can start developing please make sure that you have [pnpm](https://pnpm.io/) installed (`npm i -g pnpm`). Then install the dependencies using pnpm: `pnpm install`.
Run `pnpm build` once and then you can use `pnpm dev` for local development.
## Testing
Testing is done with cypress. You can find the tests in the [`examples/vite-app/cypress`](/examples/vite-app/cypress/) folder. In order to run the tests do:
```sh
pnpm test
```
## xyflow Team
React Flow is maintained by the team behind [xyflow](https://xyflow.com). If you need help or want to talk to us about a collaboration, reach out through our [contact form](https://xyflow.com/contact) or by joining our [Discord Server](https://discord.gg/Bqt6xrs).
- Christopher • [Twitter](https://twitter.com/chrtze) • [Github](https://github.com/chrtze)
- Hayleigh • [Twitter](https://twitter.com/hayleighdotdev) • [Github](https://github.com/hayleigh-dot-dev)
- John • [Website](https://johnrobbdesign.com/) • [Mastodon](https://mastodon.social/@johnrobbjr)
- Moritz • [Twitter](https://twitter.com/moklick) • [Github](https://github.com/moklick)
- Peter • [Github](https://github.com/peterkogo)
Any support you provide goes directly towards the development and maintenance of React Flow and Svelte Flow, allowing us to continue to operate as an independent company, working on what we think is best for our open-source libraries.
## Community Packages
- [useUndoable](https://github.com/xplato/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 the 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](../../LICENSE).

View File

@@ -0,0 +1,504 @@
/* this will be exported as base.css and can be used for a basic styling */
/* these are the necessary styles for React/Svelte Flow, they get used by base.css and style.css */
.react-flow {
direction: ltr;
--xy-edge-stroke-default: #b1b1b7;
--xy-edge-stroke-width-default: 1;
--xy-edge-stroke-selected-default: #555;
--xy-connectionline-stroke-default: #b1b1b7;
--xy-connectionline-stroke-width-default: 1;
--xy-attribution-background-color-default: rgba(255, 255, 255, 0.5);
--xy-minimap-background-color-default: #fff;
--xy-minimap-mask-background-color-default: rgba(240, 240, 240, 0.6);
--xy-minimap-mask-stroke-color-default: transparent;
--xy-minimap-mask-stroke-width-default: 1;
--xy-minimap-node-background-color-default: #e2e2e2;
--xy-minimap-node-stroke-color-default: transparent;
--xy-minimap-node-stroke-width-default: 2;
--xy-background-color-default: transparent;
--xy-background-pattern-dots-color-default: #91919a;
--xy-background-pattern-lines-color-default: #eee;
--xy-background-pattern-cross-color-default: #e2e2e2;
background-color: var(--xy-background-color, var(--xy-background-color-default));
--xy-node-border-default: 1px solid #bbb;
--xy-node-border-selected-default: 1px solid #555;
--xy-handle-background-color-default: #333;
--xy-selection-background-color-default: rgba(150, 150, 180, 0.1);
--xy-selection-border-default: 1px dotted rgba(155, 155, 155, 0.8);
--xy-resize-background-color-default: #3367d9;
}
.react-flow.dark {
--xy-edge-stroke-default: #3e3e3e;
--xy-edge-stroke-width-default: 1;
--xy-edge-stroke-selected-default: #727272;
--xy-connectionline-stroke-default: #b1b1b7;
--xy-connectionline-stroke-width-default: 1;
--xy-attribution-background-color-default: rgba(150, 150, 150, 0.25);
--xy-minimap-background-color-default: #141414;
--xy-minimap-mask-background-color-default: rgba(60, 60, 60, 0.6);
--xy-minimap-mask-stroke-color-default: transparent;
--xy-minimap-mask-stroke-width-default: 1;
--xy-minimap-node-background-color-default: #2b2b2b;
--xy-minimap-node-stroke-color-default: transparent;
--xy-minimap-node-stroke-width-default: 2;
--xy-background-color-default: #141414;
--xy-background-pattern-dots-color-default: #777;
--xy-background-pattern-lines-color-default: #777;
--xy-background-pattern-cross-color-default: #777;
--xy-node-color-default: #f8f8f8;
}
.react-flow__background {
background-color: var(--xy-background-color-props, var(--xy-background-color, var(--xy-background-color-default)));
pointer-events: none;
z-index: -1;
}
.react-flow__container {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
}
.react-flow__pane {
z-index: 1;
}
.react-flow__pane.draggable {
cursor: grab;
}
.react-flow__pane.dragging {
cursor: grabbing;
}
.react-flow__pane.selection {
cursor: pointer;
}
.react-flow__viewport {
transform-origin: 0 0;
z-index: 2;
pointer-events: none;
}
.react-flow__renderer {
z-index: 4;
}
.react-flow__selection {
z-index: 6;
}
.react-flow__nodesselection-rect:focus,
.react-flow__nodesselection-rect:focus-visible {
outline: none;
}
.react-flow__edge-path {
stroke: var(--xy-edge-stroke, var(--xy-edge-stroke-default));
stroke-width: var(--xy-edge-stroke-width, var(--xy-edge-stroke-width-default));
fill: none;
}
.react-flow__connection-path {
stroke: var(--xy-connectionline-stroke, var(--xy-connectionline-stroke-default));
stroke-width: var(--xy-connectionline-stroke-width, var(--xy-connectionline-stroke-width-default));
fill: none;
}
.react-flow .react-flow__edges {
position: absolute;
}
.react-flow .react-flow__edges svg {
overflow: visible;
position: absolute;
pointer-events: none;
}
.react-flow__edge {
pointer-events: visibleStroke;
}
.react-flow__edge.selectable {
cursor: pointer;
}
.react-flow__edge.animated path {
stroke-dasharray: 5;
animation: dashdraw 0.5s linear infinite;
}
.react-flow__edge.animated path.react-flow__edge-interaction {
stroke-dasharray: none;
animation: none;
}
.react-flow__edge.inactive {
pointer-events: none;
}
.react-flow__edge.selected,
.react-flow__edge:focus,
.react-flow__edge:focus-visible {
outline: none;
}
.react-flow__edge.selected .react-flow__edge-path,
.react-flow__edge.selectable:focus .react-flow__edge-path,
.react-flow__edge.selectable:focus-visible .react-flow__edge-path {
stroke: var(--xy-edge-stroke-selected, var(--xy-edge-stroke-selected-default));
}
.react-flow__edge-textwrapper {
pointer-events: all;
}
.react-flow__edge .react-flow__edge-text {
pointer-events: none;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
/* Arrowhead marker styles - use CSS custom properties as default */
.react-flow__arrowhead polyline {
stroke: var(--xy-edge-stroke, var(--xy-edge-stroke-default));
}
.react-flow__arrowhead polyline.arrowclosed {
fill: var(--xy-edge-stroke, var(--xy-edge-stroke-default));
}
.react-flow__connection {
pointer-events: none;
}
.react-flow__connection .animated {
stroke-dasharray: 5;
animation: dashdraw 0.5s linear infinite;
}
svg.react-flow__connectionline {
z-index: 1001;
overflow: visible;
position: absolute;
}
.react-flow__nodes {
pointer-events: none;
transform-origin: 0 0;
}
.react-flow__node {
position: absolute;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
pointer-events: all;
transform-origin: 0 0;
box-sizing: border-box;
cursor: default;
}
.react-flow__node.selectable {
cursor: pointer;
}
.react-flow__node.draggable {
cursor: grab;
pointer-events: all;
}
.react-flow__node.draggable.dragging {
cursor: grabbing;
}
.react-flow__nodesselection {
z-index: 3;
transform-origin: left top;
pointer-events: none;
}
.react-flow__nodesselection-rect {
position: absolute;
pointer-events: all;
cursor: grab;
}
.react-flow__handle {
position: absolute;
pointer-events: none;
min-width: 5px;
min-height: 5px;
background-color: var(--xy-handle-background-color, var(--xy-handle-background-color-default));
}
.react-flow__handle.connectingfrom {
pointer-events: all;
}
.react-flow__handle.connectionindicator {
pointer-events: all;
cursor: crosshair;
}
.react-flow__handle-bottom {
top: auto;
left: 50%;
bottom: 0;
transform: translate(-50%, 50%);
}
.react-flow__handle-top {
top: 0;
left: 50%;
transform: translate(-50%, -50%);
}
.react-flow__handle-left {
top: 50%;
left: 0;
transform: translate(-50%, -50%);
}
.react-flow__handle-right {
top: 50%;
right: 0;
transform: translate(50%, -50%);
}
.react-flow__edgeupdater {
cursor: move;
pointer-events: all;
}
.react-flow__pane.selection .react-flow__panel {
pointer-events: none;
}
.react-flow__panel {
position: absolute;
z-index: 5;
margin: 15px;
}
.react-flow__panel.top {
top: 0;
}
.react-flow__panel.bottom {
bottom: 0;
}
.react-flow__panel.top.center, .react-flow__panel.bottom.center {
left: 50%;
transform: translateX(-15px) translateX(-50%);
}
.react-flow__panel.left {
left: 0;
}
.react-flow__panel.right {
right: 0;
}
.react-flow__panel.left.center, .react-flow__panel.right.center {
top: 50%;
transform: translateY(-15px) translateY(-50%);
}
.react-flow__attribution {
font-size: 10px;
background: var(--xy-attribution-background-color, var(--xy-attribution-background-color-default));
padding: 2px 3px;
margin: 0;
}
.react-flow__attribution a {
text-decoration: none;
color: #999;
}
@keyframes dashdraw {
from {
stroke-dashoffset: 10;
}
}
.react-flow__edgelabel-renderer {
position: absolute;
width: 100%;
height: 100%;
pointer-events: none;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
left: 0;
top: 0;
}
.react-flow__viewport-portal {
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
.react-flow__minimap {
background: var(
--xy-minimap-background-color-props,
var(--xy-minimap-background-color, var(--xy-minimap-background-color-default))
);
}
.react-flow__minimap-svg {
display: block;
}
.react-flow__minimap-mask {
fill: var(
--xy-minimap-mask-background-color-props,
var(--xy-minimap-mask-background-color, var(--xy-minimap-mask-background-color-default))
);
stroke: var(
--xy-minimap-mask-stroke-color-props,
var(--xy-minimap-mask-stroke-color, var(--xy-minimap-mask-stroke-color-default))
);
stroke-width: var(
--xy-minimap-mask-stroke-width-props,
var(--xy-minimap-mask-stroke-width, var(--xy-minimap-mask-stroke-width-default))
);
}
.react-flow__minimap-node {
fill: var(
--xy-minimap-node-background-color-props,
var(--xy-minimap-node-background-color, var(--xy-minimap-node-background-color-default))
);
stroke: var(
--xy-minimap-node-stroke-color-props,
var(--xy-minimap-node-stroke-color, var(--xy-minimap-node-stroke-color-default))
);
stroke-width: var(
--xy-minimap-node-stroke-width-props,
var(--xy-minimap-node-stroke-width, var(--xy-minimap-node-stroke-width-default))
);
}
.react-flow__background-pattern.dots {
fill: var(
--xy-background-pattern-color-props,
var(--xy-background-pattern-color, var(--xy-background-pattern-dots-color-default))
);
}
.react-flow__background-pattern.lines {
stroke: var(
--xy-background-pattern-color-props,
var(--xy-background-pattern-color, var(--xy-background-pattern-lines-color-default))
);
}
.react-flow__background-pattern.cross {
stroke: var(
--xy-background-pattern-color-props,
var(--xy-background-pattern-color, var(--xy-background-pattern-cross-color-default))
);
}
.react-flow__controls {
display: flex;
flex-direction: column;
}
.react-flow__controls.horizontal {
flex-direction: row;
}
.react-flow__controls-button {
display: flex;
justify-content: center;
align-items: center;
height: 26px;
width: 26px;
padding: 4px;
}
.react-flow__controls-button svg {
width: 100%;
max-width: 12px;
max-height: 12px;
fill: currentColor;
}
.react-flow__node-input,
.react-flow__node-default,
.react-flow__node-output,
.react-flow__node-group {
border: var(--xy-node-border, var(--xy-node-border-default));
color: var(--xy-node-color, var(--xy-node-color-default));
}
.react-flow__node-input.selected,
.react-flow__node-input:focus,
.react-flow__node-input:focus-visible,
.react-flow__node-default.selected,
.react-flow__node-default:focus,
.react-flow__node-default:focus-visible,
.react-flow__node-output.selected,
.react-flow__node-output:focus,
.react-flow__node-output:focus-visible,
.react-flow__node-group.selected,
.react-flow__node-group:focus,
.react-flow__node-group:focus-visible {
outline: none;
border: var(--xy-node-border-selected, var(--xy-node-border-selected-default));
}
.react-flow__nodesselection-rect,
.react-flow__selection {
background: var(--xy-selection-background-color, var(--xy-selection-background-color-default));
border: var(--xy-selection-border, var(--xy-selection-border-default));
}
.react-flow__resize-control {
position: absolute;
}
.react-flow__resize-control.left,
.react-flow__resize-control.right {
cursor: ew-resize;
}
.react-flow__resize-control.top,
.react-flow__resize-control.bottom {
cursor: ns-resize;
}
.react-flow__resize-control.top.left,
.react-flow__resize-control.bottom.right {
cursor: nwse-resize;
}
.react-flow__resize-control.bottom.left,
.react-flow__resize-control.top.right {
cursor: nesw-resize;
}
/* handle styles */
.react-flow__resize-control.handle {
width: 5px;
height: 5px;
border: 1px solid #fff;
border-radius: 1px;
background-color: var(--xy-resize-background-color, var(--xy-resize-background-color-default));
translate: -50% -50%;
}
.react-flow__resize-control.handle.left {
left: 0;
top: 50%;
}
.react-flow__resize-control.handle.right {
left: 100%;
top: 50%;
}
.react-flow__resize-control.handle.top {
left: 50%;
top: 0;
}
.react-flow__resize-control.handle.bottom {
left: 50%;
top: 100%;
}
.react-flow__resize-control.handle.top.left {
left: 0;
}
.react-flow__resize-control.handle.bottom.left {
left: 0;
}
.react-flow__resize-control.handle.top.right {
left: 100%;
}
.react-flow__resize-control.handle.bottom.right {
left: 100%;
}
/* line styles */
.react-flow__resize-control.line {
border-color: var(--xy-resize-background-color, var(--xy-resize-background-color-default));
border-width: 0;
border-style: solid;
}
.react-flow__resize-control.line.left,
.react-flow__resize-control.line.right {
width: 1px;
transform: translate(-50%, 0);
top: 0;
height: 100%;
}
.react-flow__resize-control.line.left {
left: 0;
border-left-width: 1px;
}
.react-flow__resize-control.line.right {
left: 100%;
border-right-width: 1px;
}
.react-flow__resize-control.line.top,
.react-flow__resize-control.line.bottom {
height: 1px;
transform: translate(0, -50%);
left: 0;
width: 100%;
}
.react-flow__resize-control.line.top {
top: 0;
border-top-width: 1px;
}
.react-flow__resize-control.line.bottom {
border-bottom-width: 1px;
top: 100%;
}

View File

@@ -0,0 +1,61 @@
import { type BackgroundProps } from './types';
declare function BackgroundComponent({ id, variant, gap, size, lineWidth, offset, color, bgColor, style, className, patternClassName, }: BackgroundProps): import("react/jsx-runtime").JSX.Element;
declare namespace BackgroundComponent {
var displayName: string;
}
/**
* The `<Background />` component makes it convenient to render different types of backgrounds common in node-based UIs. It comes with three variants: lines, dots and cross.
*
* @example
*
* A simple example of how to use the Background component.
*
* ```tsx
* import { useState } from 'react';
* import { ReactFlow, Background, BackgroundVariant } from '@xyflow/react';
*
* export default function Flow() {
* return (
* <ReactFlow defaultNodes={[...]} defaultEdges={[...]}>
* <Background color="#ccc" variant={BackgroundVariant.Dots} />
* </ReactFlow>
* );
* }
* ```
*
* @example
*
* In this example you can see how to combine multiple backgrounds
*
* ```tsx
* import { ReactFlow, Background, BackgroundVariant } from '@xyflow/react';
* import '@xyflow/react/dist/style.css';
*
* export default function Flow() {
* return (
* <ReactFlow defaultNodes={[...]} defaultEdges={[...]}>
* <Background
* id="1"
* gap={10}
* color="#f1f1f1"
* variant={BackgroundVariant.Lines}
* />
* <Background
* id="2"
* gap={100}
* color="#ccc"
* variant={BackgroundVariant.Lines}
* />
* </ReactFlow>
* );
* }
* ```
*
* @remarks
*
* When combining multiple <Background /> components its important to give each of them a unique id prop!
*
*/
export declare const Background: import("react").MemoExoticComponent<typeof BackgroundComponent>;
export {};
//# sourceMappingURL=Background.d.ts.map

View File

@@ -0,0 +1 @@
{"version":3,"file":"Background.d.ts","sourceRoot":"","sources":["../../../src/additional-components/Background/Background.tsx"],"names":[],"mappings":"AAOA,OAAO,EAAE,KAAK,eAAe,EAAqB,MAAM,SAAS,CAAC;AAWlE,iBAAS,mBAAmB,CAAC,EAC3B,EAAE,EACF,OAAgC,EAEhC,GAAQ,EAER,IAAI,EACJ,SAAa,EACb,MAAU,EACV,KAAK,EACL,OAAO,EACP,KAAK,EACL,SAAS,EACT,gBAAgB,GACjB,EAAE,eAAe,2CAwDjB;kBAtEQ,mBAAmB;;;AA0E5B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAoDG;AACH,eAAO,MAAM,UAAU,iEAA4B,CAAC"}

View File

@@ -0,0 +1,15 @@
import { BackgroundVariant } from './types';
type LinePatternProps = {
dimensions: [number, number];
variant: BackgroundVariant;
lineWidth?: number;
className?: string;
};
export declare function LinePattern({ dimensions, lineWidth, variant, className }: LinePatternProps): import("react/jsx-runtime").JSX.Element;
type DotPatternProps = {
radius: number;
className?: string;
};
export declare function DotPattern({ radius, className }: DotPatternProps): import("react/jsx-runtime").JSX.Element;
export {};
//# sourceMappingURL=Patterns.d.ts.map

View File

@@ -0,0 +1 @@
{"version":3,"file":"Patterns.d.ts","sourceRoot":"","sources":["../../../src/additional-components/Background/Patterns.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAC;AAE5C,KAAK,gBAAgB,GAAG;IACtB,UAAU,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAC7B,OAAO,EAAE,iBAAiB,CAAC;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF,wBAAgB,WAAW,CAAC,EAAE,UAAU,EAAE,SAAS,EAAE,OAAO,EAAE,SAAS,EAAE,EAAE,gBAAgB,2CAQ1F;AAED,KAAK,eAAe,GAAG;IACrB,MAAM,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF,wBAAgB,UAAU,CAAC,EAAE,MAAM,EAAE,SAAS,EAAE,EAAE,eAAe,2CAIhE"}

View File

@@ -0,0 +1,3 @@
export { Background } from './Background';
export { BackgroundVariant, type BackgroundProps } from './types';
//# sourceMappingURL=index.d.ts.map

View File

@@ -0,0 +1 @@
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/additional-components/Background/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,OAAO,EAAE,iBAAiB,EAAE,KAAK,eAAe,EAAE,MAAM,SAAS,CAAC"}

View File

@@ -0,0 +1,59 @@
import { CSSProperties } from 'react';
/**
* The three variants are exported as an enum for convenience. You can either import
* the enum and use it like `BackgroundVariant.Lines` or you can use the raw string
* value directly.
* @public
*/
export declare enum BackgroundVariant {
Lines = "lines",
Dots = "dots",
Cross = "cross"
}
/**
* @expand
*/
export type BackgroundProps = {
/** When multiple backgrounds are present on the page, each one should have a unique id. */
id?: string;
/** Color of the pattern. */
color?: string;
/** Color of the background. */
bgColor?: string;
/** Class applied to the container. */
className?: string;
/** Class applied to the pattern. */
patternClassName?: string;
/**
* The gap between patterns. Passing in a tuple allows you to control the x and y gap
* independently.
* @default 20
*/
gap?: number | [number, number];
/**
* The radius of each dot or the size of each rectangle if `BackgroundVariant.Dots` or
* `BackgroundVariant.Cross` is used. This defaults to 1 or 6 respectively, or ignored if
* `BackgroundVariant.Lines` is used.
*/
size?: number;
/**
* Offset of the pattern.
* @default 0
*/
offset?: number | [number, number];
/**
* The stroke thickness used when drawing the pattern.
* @default 1
*/
lineWidth?: number;
/**
* Variant of the pattern.
* @default BackgroundVariant.Dots
* @example BackgroundVariant.Lines, BackgroundVariant.Dots, BackgroundVariant.Cross
* 'lines', 'dots', 'cross'
*/
variant?: BackgroundVariant;
/** Style applied to the container. */
style?: CSSProperties;
};
//# sourceMappingURL=types.d.ts.map

View File

@@ -0,0 +1 @@
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/additional-components/Background/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAEtC;;;;;GAKG;AACH,oBAAY,iBAAiB;IAC3B,KAAK,UAAU;IACf,IAAI,SAAS;IACb,KAAK,UAAU;CAChB;AAED;;GAEG;AACH,MAAM,MAAM,eAAe,GAAG;IAC5B,2FAA2F;IAC3F,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,4BAA4B;IAC5B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,+BAA+B;IAC/B,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,sCAAsC;IACtC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,oCAAoC;IACpC,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B;;;;OAIG;IACH,GAAG,CAAC,EAAE,MAAM,GAAG,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAChC;;;;OAIG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,GAAG,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACnC;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;;;OAKG;IACH,OAAO,CAAC,EAAE,iBAAiB,CAAC;IAC5B,sCAAsC;IACtC,KAAK,CAAC,EAAE,aAAa,CAAC;CACvB,CAAC"}

View File

@@ -0,0 +1,26 @@
import type { ControlButtonProps } from './types';
/**
* You can add buttons to the control panel by using the `<ControlButton />` component
* and pass it as a child to the [`<Controls />`](/api-reference/components/controls) component.
*
* @public
* @example
*```jsx
*import { MagicWand } from '@radix-ui/react-icons'
*import { ReactFlow, Controls, ControlButton } from '@xyflow/react'
*
*export default function Flow() {
* return (
* <ReactFlow nodes={[...]} edges={[...]}>
* <Controls>
* <ControlButton onClick={() => alert('Something magical just happened. ✨')}>
* <MagicWand />
* </ControlButton>
* </Controls>
* </ReactFlow>
* )
*}
*```
*/
export declare function ControlButton({ children, className, ...rest }: ControlButtonProps): import("react/jsx-runtime").JSX.Element;
//# sourceMappingURL=ControlButton.d.ts.map

View File

@@ -0,0 +1 @@
{"version":3,"file":"ControlButton.d.ts","sourceRoot":"","sources":["../../../src/additional-components/Controls/ControlButton.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAC;AAElD;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,wBAAgB,aAAa,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,GAAG,IAAI,EAAE,EAAE,kBAAkB,2CAMjF"}

View File

@@ -0,0 +1,29 @@
import type { ControlProps } from './types';
declare function ControlsComponent({ style, showZoom, showFitView, showInteractive, fitViewOptions, onZoomIn, onZoomOut, onFitView, onInteractiveChange, className, children, position, orientation, 'aria-label': ariaLabel, }: ControlProps): import("react/jsx-runtime").JSX.Element;
declare namespace ControlsComponent {
var displayName: string;
}
/**
* The `<Controls />` component renders a small panel that contains convenient
* buttons to zoom in, zoom out, fit the view, and lock the viewport.
*
* @public
* @example
*```tsx
*import { ReactFlow, Controls } from '@xyflow/react'
*
*export default function Flow() {
* return (
* <ReactFlow nodes={[...]} edges={[...]}>
* <Controls />
* </ReactFlow>
* )
*}
*```
*
* @remarks To extend or customise the controls, you can use the [`<ControlButton />`](/api-reference/components/control-button) component
*
*/
export declare const Controls: import("react").MemoExoticComponent<typeof ControlsComponent>;
export {};
//# sourceMappingURL=Controls.d.ts.map

View File

@@ -0,0 +1 @@
{"version":3,"file":"Controls.d.ts","sourceRoot":"","sources":["../../../src/additional-components/Controls/Controls.tsx"],"names":[],"mappings":"AAeA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAS5C,iBAAS,iBAAiB,CAAC,EACzB,KAAK,EACL,QAAe,EACf,WAAkB,EAClB,eAAsB,EACtB,cAAc,EACd,QAAQ,EACR,SAAS,EACT,SAAS,EACT,mBAAmB,EACnB,SAAS,EACT,QAAQ,EACR,QAAwB,EACxB,WAAwB,EACxB,YAAY,EAAE,SAAS,GACxB,EAAE,YAAY,2CAoFd;kBAnGQ,iBAAiB;;;AAuG1B;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,eAAO,MAAM,QAAQ,+DAA0B,CAAC"}

View File

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

View File

@@ -0,0 +1 @@
{"version":3,"file":"FitView.d.ts","sourceRoot":"","sources":["../../../../src/additional-components/Controls/Icons/FitView.tsx"],"names":[],"mappings":"AAAA,wBAAgB,WAAW,4CAM1B"}

View File

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

View File

@@ -0,0 +1 @@
{"version":3,"file":"Lock.d.ts","sourceRoot":"","sources":["../../../../src/additional-components/Controls/Icons/Lock.tsx"],"names":[],"mappings":"AAAA,wBAAgB,QAAQ,4CAMvB"}

View File

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

View File

@@ -0,0 +1 @@
{"version":3,"file":"Minus.d.ts","sourceRoot":"","sources":["../../../../src/additional-components/Controls/Icons/Minus.tsx"],"names":[],"mappings":"AAAA,wBAAgB,SAAS,4CAMxB"}

View File

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

View File

@@ -0,0 +1 @@
{"version":3,"file":"Plus.d.ts","sourceRoot":"","sources":["../../../../src/additional-components/Controls/Icons/Plus.tsx"],"names":[],"mappings":"AAAA,wBAAgB,QAAQ,4CAMvB"}

View File

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

View File

@@ -0,0 +1 @@
{"version":3,"file":"Unlock.d.ts","sourceRoot":"","sources":["../../../../src/additional-components/Controls/Icons/Unlock.tsx"],"names":[],"mappings":"AAAA,wBAAgB,UAAU,4CAMzB"}

View File

@@ -0,0 +1,4 @@
export { Controls } from './Controls';
export { ControlButton } from './ControlButton';
export type { ControlProps, ControlButtonProps } from './types';
//# sourceMappingURL=index.d.ts.map

View File

@@ -0,0 +1 @@
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/additional-components/Controls/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAChD,YAAY,EAAE,YAAY,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAC"}

View File

@@ -0,0 +1,66 @@
import type { ButtonHTMLAttributes, ReactNode } from 'react';
import type { PanelPosition } from '@xyflow/system';
import type { FitViewOptions } from '../../types';
/**
* @expand
*/
export type ControlProps = {
/**
* Whether or not to show the zoom in and zoom out buttons. These buttons will adjust the viewport
* zoom by a fixed amount each press.
* @default true
*/
showZoom?: boolean;
/**
* Whether or not to show the fit view button. By default, this button will adjust the viewport so
* that all nodes are visible at once.
* @default true
*/
showFitView?: boolean;
/**
* Show button for toggling interactivity
* @default true
*/
showInteractive?: boolean;
/**
* Customise the options for the fit view button. These are the same options you would pass to the
* fitView function.
*/
fitViewOptions?: FitViewOptions;
/** Called in addition the default zoom behavior when the zoom in button is clicked. */
onZoomIn?: () => void;
/** Called in addition the default zoom behavior when the zoom out button is clicked. */
onZoomOut?: () => void;
/**
* Called when the fit view button is clicked. When this is not provided, the viewport will be
* adjusted so that all nodes are visible.
*/
onFitView?: () => void;
/** Called when the interactive (lock) button is clicked. */
onInteractiveChange?: (interactiveStatus: boolean) => void;
/**
* Position of the controls on the pane
* @default PanelPosition.BottomLeft
* @example PanelPosition.TopLeft, PanelPosition.TopRight,
* PanelPosition.BottomLeft, PanelPosition.BottomRight
*/
position?: PanelPosition;
children?: ReactNode;
/** Style applied to container */
style?: React.CSSProperties;
/** Class name applied to container */
className?: string;
/**
* @default 'React Flow controls'
*/
'aria-label'?: string;
/**
* @default 'vertical'
*/
orientation?: 'horizontal' | 'vertical';
};
/**
* @expand
*/
export type ControlButtonProps = ButtonHTMLAttributes<HTMLButtonElement>;
//# sourceMappingURL=types.d.ts.map

View File

@@ -0,0 +1 @@
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/additional-components/Controls/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,oBAAoB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAC7D,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,gBAAgB,CAAC;AAEpD,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAElD;;GAEG;AACH,MAAM,MAAM,YAAY,GAAG;IACzB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;;OAIG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;;OAGG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B;;;OAGG;IACH,cAAc,CAAC,EAAE,cAAc,CAAC;IAChC,uFAAuF;IACvF,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,wFAAwF;IACxF,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IACvB;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IACvB,4DAA4D;IAC5D,mBAAmB,CAAC,EAAE,CAAC,iBAAiB,EAAE,OAAO,KAAK,IAAI,CAAC;IAC3D;;;;;OAKG;IACH,QAAQ,CAAC,EAAE,aAAa,CAAC;IACzB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,iCAAiC;IACjC,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,sCAAsC;IACtC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;OAEG;IACH,WAAW,CAAC,EAAE,YAAY,GAAG,UAAU,CAAC;CACzC,CAAC;AAEF;;GAEG;AACH,MAAM,MAAM,kBAAkB,GAAG,oBAAoB,CAAC,iBAAiB,CAAC,CAAC"}

View File

@@ -0,0 +1,29 @@
import type { Node } from '../../types';
import type { MiniMapProps } from './types';
declare function MiniMapComponent<NodeType extends Node = Node>({ style, className, nodeStrokeColor, nodeColor, nodeClassName, nodeBorderRadius, nodeStrokeWidth, nodeComponent, bgColor, maskColor, maskStrokeColor, maskStrokeWidth, position, onClick, onNodeClick, pannable, zoomable, ariaLabel, inversePan, zoomStep, offsetScale, }: MiniMapProps<NodeType>): import("react/jsx-runtime").JSX.Element;
declare namespace MiniMapComponent {
var displayName: string;
}
/**
* The `<MiniMap />` component can be used to render an overview of your flow. It
* renders each node as an SVG element and visualizes where the current viewport is
* in relation to the rest of the flow.
*
* @public
* @example
*
* ```jsx
*import { ReactFlow, MiniMap } from '@xyflow/react';
*
*export default function Flow() {
* return (
* <ReactFlow nodes={[...]]} edges={[...]]}>
* <MiniMap nodeStrokeWidth={3} />
* </ReactFlow>
* );
*}
*```
*/
export declare const MiniMap: typeof MiniMapComponent;
export {};
//# sourceMappingURL=MiniMap.d.ts.map

View File

@@ -0,0 +1 @@
{"version":3,"file":"MiniMap.d.ts","sourceRoot":"","sources":["../../../src/additional-components/MiniMap/MiniMap.tsx"],"names":[],"mappings":"AASA,OAAO,KAAK,EAAkB,IAAI,EAAE,MAAM,aAAa,CAAC;AAGxD,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AA+B5C,iBAAS,gBAAgB,CAAC,QAAQ,SAAS,IAAI,GAAG,IAAI,EAAE,EACtD,KAAK,EACL,SAAS,EACT,eAAe,EACf,SAAS,EACT,aAAkB,EAClB,gBAAoB,EACpB,eAAe,EAKf,aAAa,EACb,OAAO,EACP,SAAS,EACT,eAAe,EACf,eAAe,EACf,QAAyB,EACzB,OAAO,EACP,WAAW,EACX,QAAgB,EAChB,QAAgB,EAChB,SAAS,EACT,UAAU,EACV,QAAY,EACZ,WAAe,GAChB,EAAE,YAAY,CAAC,QAAQ,CAAC,2CAsHxB;kBAhJQ,gBAAgB;;;AAoJzB;;;;;;;;;;;;;;;;;;;GAmBG;AACH,eAAO,MAAM,OAAO,EAA6B,OAAO,gBAAgB,CAAC"}

View File

@@ -0,0 +1,5 @@
import type { MiniMapNodeProps } from './types';
declare function MiniMapNodeComponent({ id, x, y, width, height, style, color, strokeColor, strokeWidth, className, borderRadius, shapeRendering, selected, onClick, }: MiniMapNodeProps): import("react/jsx-runtime").JSX.Element;
export declare const MiniMapNode: import("react").MemoExoticComponent<typeof MiniMapNodeComponent>;
export {};
//# sourceMappingURL=MiniMapNode.d.ts.map

View File

@@ -0,0 +1 @@
{"version":3,"file":"MiniMapNode.d.ts","sourceRoot":"","sources":["../../../src/additional-components/MiniMap/MiniMapNode.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAEhD,iBAAS,oBAAoB,CAAC,EAC5B,EAAE,EACF,CAAC,EACD,CAAC,EACD,KAAK,EACL,MAAM,EACN,KAAK,EACL,KAAK,EACL,WAAW,EACX,WAAW,EACX,SAAS,EACT,YAAY,EACZ,cAAc,EACd,QAAQ,EACR,OAAO,GACR,EAAE,gBAAgB,2CAsBlB;AAED,eAAO,MAAM,WAAW,kEAA6B,CAAC"}

View File

@@ -0,0 +1,6 @@
import type { Node } from '../../types';
import type { MiniMapNodes as MiniMapNodesProps } from './types';
declare function MiniMapNodes<NodeType extends Node>({ nodeStrokeColor, nodeColor, nodeClassName, nodeBorderRadius, nodeStrokeWidth, nodeComponent: NodeComponent, onClick, }: MiniMapNodesProps<NodeType>): import("react/jsx-runtime").JSX.Element;
declare const _default: typeof MiniMapNodes;
export default _default;
//# sourceMappingURL=MiniMapNodes.d.ts.map

View File

@@ -0,0 +1 @@
{"version":3,"file":"MiniMapNodes.d.ts","sourceRoot":"","sources":["../../../src/additional-components/MiniMap/MiniMapNodes.tsx"],"names":[],"mappings":"AAQA,OAAO,KAAK,EAAkB,IAAI,EAAE,MAAM,aAAa,CAAC;AACxD,OAAO,KAAK,EAAE,YAAY,IAAI,iBAAiB,EAA6C,MAAM,SAAS,CAAC;AAQ5G,iBAAS,YAAY,CAAC,QAAQ,SAAS,IAAI,EAAE,EAC3C,eAAe,EACf,SAAS,EACT,aAAkB,EAClB,gBAAoB,EACpB,eAAe,EAKf,aAAa,EAAE,aAA2B,EAC1C,OAAO,GACR,EAAE,iBAAiB,CAAC,QAAQ,CAAC,2CAiC7B;wBAgEoC,OAAO,YAAY;AAAxD,wBAAyD"}

View File

@@ -0,0 +1,4 @@
export { MiniMap } from './MiniMap';
export { MiniMapNode } from './MiniMapNode';
export * from './types';
//# sourceMappingURL=index.d.ts.map

View File

@@ -0,0 +1 @@
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/additional-components/MiniMap/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,cAAc,SAAS,CAAC"}

View File

@@ -0,0 +1,123 @@
import type { ComponentType, CSSProperties, HTMLAttributes, MouseEvent } from 'react';
import type { PanelPosition, XYPosition } from '@xyflow/system';
import type { Node } from '../../types';
export type GetMiniMapNodeAttribute<NodeType extends Node = Node> = (node: NodeType) => string;
/**
* @expand
*/
export type MiniMapProps<NodeType extends Node = Node> = Omit<HTMLAttributes<SVGSVGElement>, 'onClick'> & {
/**
* Color of nodes on minimap.
* @default "#e2e2e2"
*/
nodeColor?: string | GetMiniMapNodeAttribute<NodeType>;
/**
* Stroke color of nodes on minimap.
* @default "transparent"
*/
nodeStrokeColor?: string | GetMiniMapNodeAttribute<NodeType>;
/**
* Class name applied to nodes on minimap.
* @default ""
*/
nodeClassName?: string | GetMiniMapNodeAttribute<NodeType>;
/**
* Border radius of nodes on minimap.
* @default 5
*/
nodeBorderRadius?: number;
/**
* Stroke width of nodes on minimap.
* @default 2
*/
nodeStrokeWidth?: number;
/**
* A custom component to render the nodes in the minimap. This component must render an SVG
* element!
*/
nodeComponent?: ComponentType<MiniMapNodeProps>;
/** Background color of minimap. */
bgColor?: string;
/**
* The color of the mask that covers the portion of the minimap not currently visible in the
* viewport.
* @default "rgba(240, 240, 240, 0.6)"
*/
maskColor?: string;
/**
* Stroke color of mask representing viewport.
* @default transparent
*/
maskStrokeColor?: string;
/**
* Stroke width of mask representing viewport.
* @default 1
*/
maskStrokeWidth?: number;
/**
* Position of minimap on pane.
* @default PanelPosition.BottomRight
* @example PanelPosition.TopLeft, PanelPosition.TopRight,
* PanelPosition.BottomLeft, PanelPosition.BottomRight
*/
position?: PanelPosition;
/** Callback called when minimap is clicked. */
onClick?: (event: MouseEvent, position: XYPosition) => void;
/** Callback called when node on minimap is clicked. */
onNodeClick?: (event: MouseEvent, node: NodeType) => void;
/**
* Determines whether you can pan the viewport by dragging inside the minimap.
* @default false
*/
pannable?: boolean;
/**
* Determines whether you can zoom the viewport by scrolling inside the minimap.
* @default false
*/
zoomable?: boolean;
/**
* There is no text inside the minimap for a screen reader to use as an accessible name, so it's
* important we provide one to make the minimap accessible. The default is sufficient, but you may
* want to replace it with something more relevant to your app or product.
* @default "Mini Map"
*/
ariaLabel?: string | null;
/** Invert direction when panning the minimap viewport. */
inversePan?: boolean;
/**
* Step size for zooming in/out on minimap.
* @default 10
*/
zoomStep?: number;
/**
* Offset the viewport on the minimap, acts like a padding.
* @default 5
*/
offsetScale?: number;
};
export type MiniMapNodes<NodeType extends Node = Node> = Pick<MiniMapProps<NodeType>, 'nodeColor' | 'nodeStrokeColor' | 'nodeClassName' | 'nodeBorderRadius' | 'nodeStrokeWidth' | 'nodeComponent'> & {
onClick?: (event: MouseEvent, nodeId: string) => void;
};
/**
* The props that are passed to the MiniMapNode component
*
* @public
* @expand
*/
export type MiniMapNodeProps = {
id: string;
x: number;
y: number;
width: number;
height: number;
borderRadius: number;
className: string;
color?: string;
shapeRendering: string;
strokeColor?: string;
strokeWidth?: number;
style?: CSSProperties;
selected: boolean;
onClick?: (event: MouseEvent, id: string) => void;
};
//# sourceMappingURL=types.d.ts.map

View File

@@ -0,0 +1 @@
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/additional-components/MiniMap/types.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,aAAa,EAAE,aAAa,EAAE,cAAc,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AACtF,OAAO,KAAK,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAEhE,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,aAAa,CAAC;AAExC,MAAM,MAAM,uBAAuB,CAAC,QAAQ,SAAS,IAAI,GAAG,IAAI,IAAI,CAAC,IAAI,EAAE,QAAQ,KAAK,MAAM,CAAC;AAE/F;;GAEG;AACH,MAAM,MAAM,YAAY,CAAC,QAAQ,SAAS,IAAI,GAAG,IAAI,IAAI,IAAI,CAAC,cAAc,CAAC,aAAa,CAAC,EAAE,SAAS,CAAC,GAAG;IACxG;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,GAAG,uBAAuB,CAAC,QAAQ,CAAC,CAAC;IACvD;;;OAGG;IACH,eAAe,CAAC,EAAE,MAAM,GAAG,uBAAuB,CAAC,QAAQ,CAAC,CAAC;IAC7D;;;OAGG;IACH,aAAa,CAAC,EAAE,MAAM,GAAG,uBAAuB,CAAC,QAAQ,CAAC,CAAC;IAC3D;;;OAGG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B;;;OAGG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB;;;OAGG;IACH,aAAa,CAAC,EAAE,aAAa,CAAC,gBAAgB,CAAC,CAAC;IAChD,mCAAmC;IACnC,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;;;OAIG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB;;;OAGG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB;;;;;OAKG;IACH,QAAQ,CAAC,EAAE,aAAa,CAAC;IACzB,+CAA+C;IAC/C,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,EAAE,QAAQ,EAAE,UAAU,KAAK,IAAI,CAAC;IAC5D,uDAAuD;IACvD,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,EAAE,IAAI,EAAE,QAAQ,KAAK,IAAI,CAAC;IAC1D;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;;;OAKG;IACH,SAAS,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC1B,0DAA0D;IAC1D,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB,CAAC;AAEF,MAAM,MAAM,YAAY,CAAC,QAAQ,SAAS,IAAI,GAAG,IAAI,IAAI,IAAI,CAC3D,YAAY,CAAC,QAAQ,CAAC,EACtB,WAAW,GAAG,iBAAiB,GAAG,eAAe,GAAG,kBAAkB,GAAG,iBAAiB,GAAG,eAAe,CAC7G,GAAG;IACF,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,EAAE,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;CACvD,CAAC;AAEF;;;;;GAKG;AACH,MAAM,MAAM,gBAAgB,GAAG;IAC7B,EAAE,EAAE,MAAM,CAAC;IACX,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,YAAY,EAAE,MAAM,CAAC;IACrB,SAAS,EAAE,MAAM,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,cAAc,EAAE,MAAM,CAAC;IACvB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,QAAQ,EAAE,OAAO,CAAC;IAClB,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,EAAE,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;CACnD,CAAC"}

View File

@@ -0,0 +1,11 @@
import type { ResizeControlProps, ResizeControlLineProps } from './types';
declare function ResizeControl({ nodeId, position, variant, className, style, children, color, minWidth, minHeight, maxWidth, maxHeight, keepAspectRatio, resizeDirection, autoScale, shouldResize, onResizeStart, onResize, onResizeEnd, }: ResizeControlProps): import("react/jsx-runtime").JSX.Element;
export declare function ResizeControlLine(props: ResizeControlLineProps): import("react/jsx-runtime").JSX.Element;
/**
* To create your own resizing UI, you can use the `NodeResizeControl` component where you can pass children (such as icons).
* @public
*
*/
export declare const NodeResizeControl: import("react").MemoExoticComponent<typeof ResizeControl>;
export {};
//# sourceMappingURL=NodeResizeControl.d.ts.map

View File

@@ -0,0 +1 @@
{"version":3,"file":"NodeResizeControl.d.ts","sourceRoot":"","sources":["../../../src/additional-components/NodeResizer/NodeResizeControl.tsx"],"names":[],"mappings":"AAqBA,OAAO,KAAK,EAAE,kBAAkB,EAAE,sBAAsB,EAAE,MAAM,SAAS,CAAC;AAW1E,iBAAS,aAAa,CAAC,EACrB,MAAM,EACN,QAAQ,EACR,OAAqC,EACrC,SAAS,EACT,KAAiB,EACjB,QAAQ,EACR,KAAK,EACL,QAAa,EACb,SAAc,EACd,QAA2B,EAC3B,SAA4B,EAC5B,eAAuB,EACvB,eAAe,EACf,SAAgB,EAChB,YAAY,EACZ,aAAa,EACb,QAAQ,EACR,WAAW,GACZ,EAAE,kBAAkB,2CA4KpB;AAED,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,sBAAsB,2CAE9D;AAED;;;;GAIG;AACH,eAAO,MAAM,iBAAiB,2DAAsB,CAAC"}

View File

@@ -0,0 +1,27 @@
import type { NodeResizerProps } from './types';
/**
* The `<NodeResizer />` component can be used to add a resize functionality to your
* nodes. It renders draggable controls around the node to resize in all directions.
* @public
*
* @example
*```jsx
*import { memo } from 'react';
*import { Handle, Position, NodeResizer } from '@xyflow/react';
*
*function ResizableNode({ data }) {
* return (
* <>
* <NodeResizer minWidth={100} minHeight={30} />
* <Handle type="target" position={Position.Left} />
* <div style={{ padding: 10 }}>{data.label}</div>
* <Handle type="source" position={Position.Right} />
* </>
* );
*};
*
*export default memo(ResizableNode);
*```
*/
export declare function NodeResizer({ nodeId, isVisible, handleClassName, handleStyle, lineClassName, lineStyle, color, minWidth, minHeight, maxWidth, maxHeight, keepAspectRatio, autoScale, shouldResize, onResizeStart, onResize, onResizeEnd, }: NodeResizerProps): import("react/jsx-runtime").JSX.Element | null;
//# sourceMappingURL=NodeResizer.d.ts.map

View File

@@ -0,0 +1 @@
{"version":3,"file":"NodeResizer.d.ts","sourceRoot":"","sources":["../../../src/additional-components/NodeResizer/NodeResizer.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAEhD;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,wBAAgB,WAAW,CAAC,EAC1B,MAAM,EACN,SAAgB,EAChB,eAAe,EACf,WAAW,EACX,aAAa,EACb,SAAS,EACT,KAAK,EACL,QAAa,EACb,SAAc,EACd,QAA2B,EAC3B,SAA4B,EAC5B,eAAuB,EACvB,SAAgB,EAChB,YAAY,EACZ,aAAa,EACb,QAAQ,EACR,WAAW,GACZ,EAAE,gBAAgB,kDAkDlB"}

View File

@@ -0,0 +1,4 @@
export { NodeResizer } from './NodeResizer';
export { NodeResizeControl } from './NodeResizeControl';
export * from './types';
//# sourceMappingURL=index.d.ts.map

View File

@@ -0,0 +1 @@
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/additional-components/NodeResizer/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AAExD,cAAc,SAAS,CAAC"}

View File

@@ -0,0 +1,97 @@
import type { CSSProperties, ReactNode } from 'react';
import type { ControlPosition, ControlLinePosition, ResizeControlVariant, ResizeControlDirection, ShouldResize, OnResizeStart, OnResize, OnResizeEnd } from '@xyflow/system';
/**
* @expand
*/
export type NodeResizerProps = {
/**
* Id of the node it is resizing.
* @remarks optional if used inside custom node
*/
nodeId?: string;
/** Color of the resize handle. */
color?: string;
/** Class name applied to handle. */
handleClassName?: string;
/** Style applied to handle. */
handleStyle?: CSSProperties;
/** Class name applied to line. */
lineClassName?: string;
/** Style applied to line. */
lineStyle?: CSSProperties;
/**
* Are the controls visible.
* @default true
*/
isVisible?: boolean;
/**
* Minimum width of node.
* @default 10
*/
minWidth?: number;
/**
* Minimum height of node.
* @default 10
*/
minHeight?: number;
/**
* Maximum width of node.
* @default Number.MAX_VALUE
*/
maxWidth?: number;
/**
* Maximum height of node.
* @default Number.MAX_VALUE
*/
maxHeight?: number;
/**
* Keep aspect ratio when resizing.
* @default false
*/
keepAspectRatio?: boolean;
/**
* Scale the controls with the zoom level.
* @default true
*/
autoScale?: boolean;
/** Callback to determine if node should resize. */
shouldResize?: ShouldResize;
/** Callback called when resizing starts. */
onResizeStart?: OnResizeStart;
/** Callback called when resizing. */
onResize?: OnResize;
/** Callback called when resizing ends. */
onResizeEnd?: OnResizeEnd;
};
/**
* @expand
*/
export type ResizeControlProps = Pick<NodeResizerProps, 'nodeId' | 'color' | 'minWidth' | 'minHeight' | 'maxWidth' | 'maxHeight' | 'keepAspectRatio' | 'shouldResize' | 'autoScale' | 'onResizeStart' | 'onResize' | 'onResizeEnd'> & {
/**
* Position of the control.
* @example ControlPosition.TopLeft, ControlPosition.TopRight,
* ControlPosition.BottomLeft, ControlPosition.BottomRight
*/
position?: ControlPosition;
/**
* Variant of the control.
* @default "handle"
* @example ResizeControlVariant.Handle, ResizeControlVariant.Line
*/
variant?: ResizeControlVariant;
/**
* The direction the user can resize the node.
* If not provided, the user can resize in any direction.
*/
resizeDirection?: ResizeControlDirection;
className?: string;
style?: CSSProperties;
children?: ReactNode;
};
/**
* @expand
*/
export type ResizeControlLineProps = Omit<ResizeControlProps, 'resizeDirection'> & {
position?: ControlLinePosition;
};
//# sourceMappingURL=types.d.ts.map

View File

@@ -0,0 +1 @@
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/additional-components/NodeResizer/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACtD,OAAO,KAAK,EACV,eAAe,EACf,mBAAmB,EACnB,oBAAoB,EACpB,sBAAsB,EACtB,YAAY,EACZ,aAAa,EACb,QAAQ,EACR,WAAW,EACZ,MAAM,gBAAgB,CAAC;AAExB;;GAEG;AACH,MAAM,MAAM,gBAAgB,GAAG;IAC7B;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,kCAAkC;IAClC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,oCAAoC;IACpC,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,+BAA+B;IAC/B,WAAW,CAAC,EAAE,aAAa,CAAC;IAC5B,kCAAkC;IAClC,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,6BAA6B;IAC7B,SAAS,CAAC,EAAE,aAAa,CAAC;IAC1B;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,mDAAmD;IACnD,YAAY,CAAC,EAAE,YAAY,CAAC;IAC5B,4CAA4C;IAC5C,aAAa,CAAC,EAAE,aAAa,CAAC;IAC9B,qCAAqC;IACrC,QAAQ,CAAC,EAAE,QAAQ,CAAC;IACpB,0CAA0C;IAC1C,WAAW,CAAC,EAAE,WAAW,CAAC;CAC3B,CAAC;AAEF;;GAEG;AACH,MAAM,MAAM,kBAAkB,GAAG,IAAI,CACnC,gBAAgB,EACd,QAAQ,GACR,OAAO,GACP,UAAU,GACV,WAAW,GACX,UAAU,GACV,WAAW,GACX,iBAAiB,GACjB,cAAc,GACd,WAAW,GACX,eAAe,GACf,UAAU,GACV,aAAa,CAChB,GAAG;IACF;;;;OAIG;IACH,QAAQ,CAAC,EAAE,eAAe,CAAC;IAC3B;;;;OAIG;IACH,OAAO,CAAC,EAAE,oBAAoB,CAAC;IAC/B;;;OAGG;IACH,eAAe,CAAC,EAAE,sBAAsB,CAAC;IACzC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB,CAAC;AAEF;;GAEG;AACH,MAAM,MAAM,sBAAsB,GAAG,IAAI,CAAC,kBAAkB,EAAE,iBAAiB,CAAC,GAAG;IACjF,QAAQ,CAAC,EAAE,mBAAmB,CAAC;CAChC,CAAC"}

View File

@@ -0,0 +1,38 @@
import type { NodeToolbarProps } from './types';
/**
* This component can render a toolbar or tooltip to one side of a custom node. This
* toolbar doesn't scale with the viewport so that the content is always visible.
*
* @public
* @example
* ```jsx
*import { memo } from 'react';
*import { Handle, Position, NodeToolbar } from '@xyflow/react';
*
*function CustomNode({ data }) {
* return (
* <>
* <NodeToolbar isVisible={data.toolbarVisible} position={data.toolbarPosition}>
* <button>delete</button>
* <button>copy</button>
* <button>expand</button>
* </NodeToolbar>
*
* <div style={{ padding: '10px 20px' }}>
* {data.label}
* </div>
*
* <Handle type="target" position={Position.Left} />
* <Handle type="source" position={Position.Right} />
* </>
* );
*};
*
*export default memo(CustomNode);
*```
* @remarks By default, the toolbar is only visible when a node is selected. If multiple
* nodes are selected it will not be visible to prevent overlapping toolbars or
* clutter. You can override this behavior by setting the `isVisible` prop to `true`.
*/
export declare function NodeToolbar({ nodeId, children, className, style, isVisible, position, offset, align, ...rest }: NodeToolbarProps): import("react/jsx-runtime").JSX.Element | null;
//# sourceMappingURL=NodeToolbar.d.ts.map

View File

@@ -0,0 +1 @@
{"version":3,"file":"NodeToolbar.d.ts","sourceRoot":"","sources":["../../../src/additional-components/NodeToolbar/NodeToolbar.tsx"],"names":[],"mappings":"AASA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC;AA+BhD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkCG;AACH,wBAAgB,WAAW,CAAC,EAC1B,MAAM,EACN,QAAQ,EACR,SAAS,EACT,KAAK,EACL,SAAS,EACT,QAAuB,EACvB,MAAW,EACX,KAAgB,EAChB,GAAG,IAAI,EACR,EAAE,gBAAgB,kDAwDlB"}

View File

@@ -0,0 +1,5 @@
import { ReactNode } from 'react';
export declare function NodeToolbarPortal({ children }: {
children: ReactNode;
}): import("react").ReactPortal | null;
//# sourceMappingURL=NodeToolbarPortal.d.ts.map

View File

@@ -0,0 +1 @@
{"version":3,"file":"NodeToolbarPortal.d.ts","sourceRoot":"","sources":["../../../src/additional-components/NodeToolbar/NodeToolbarPortal.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAQlC,wBAAgB,iBAAiB,CAAC,EAAE,QAAQ,EAAE,EAAE;IAAE,QAAQ,EAAE,SAAS,CAAA;CAAE,sCAQtE"}

View File

@@ -0,0 +1,3 @@
export { NodeToolbar } from './NodeToolbar';
export type { NodeToolbarProps } from './types';
//# sourceMappingURL=index.d.ts.map

View File

@@ -0,0 +1 @@
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/additional-components/NodeToolbar/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,YAAY,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC"}

View File

@@ -0,0 +1,32 @@
import type { HTMLAttributes } from 'react';
import type { Position, Align } from '@xyflow/system';
/**
* @expand
*/
export type NodeToolbarProps = HTMLAttributes<HTMLDivElement> & {
/**
* By passing in an array of node id's you can render a single tooltip for a group or collection
* of nodes.
*/
nodeId?: string | string[];
/** If `true`, node toolbar is visible even if node is not selected. */
isVisible?: boolean;
/**
* Position of the toolbar relative to the node.
* @default Position.Top
* @example Position.TopLeft, Position.TopRight, Position.BottomLeft, Position.BottomRight
*/
position?: Position;
/**
* The space between the node and the toolbar, measured in pixels.
* @default 10
*/
offset?: number;
/**
* Align the toolbar relative to the node.
* @default "center"
* @example Align.Start, Align.Center, Align.End
*/
align?: Align;
};
//# sourceMappingURL=types.d.ts.map

View File

@@ -0,0 +1 @@
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/additional-components/NodeToolbar/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAC5C,OAAO,KAAK,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,gBAAgB,CAAC;AAEtD;;GAEG;AACH,MAAM,MAAM,gBAAgB,GAAG,cAAc,CAAC,cAAc,CAAC,GAAG;IAC9D;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,CAAC;IAC3B,uEAAuE;IACvE,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,QAAQ,CAAC;IACpB;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;;;OAIG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC;CACf,CAAC"}

View File

@@ -0,0 +1,6 @@
export * from './Background';
export * from './Controls';
export * from './MiniMap';
export * from './NodeResizer';
export * from './NodeToolbar';
//# sourceMappingURL=index.d.ts.map

View File

@@ -0,0 +1 @@
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/additional-components/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC;AAC7B,cAAc,YAAY,CAAC;AAC3B,cAAc,WAAW,CAAC;AAC1B,cAAc,eAAe,CAAC;AAC9B,cAAc,eAAe,CAAC"}

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,2CAkEA;AAED,wBAAgB,eAAe;eAnFlB,KAAK,CAAC,GAAG,CAAC;eAEV,KAAK,CAAC,GAAG,CAAC;EAyFtB"}

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,4 @@
import { JSX } from 'react';
import type { Edge, EdgeWrapperProps } from '../../types';
export 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;
//# 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,EAAE,MAAM,OAAO,CAAC;AAexF,OAAO,KAAK,EAAE,IAAI,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAE1D,wBAAgB,WAAW,CAAC,QAAQ,SAAS,IAAI,GAAG,IAAI,EAAE,EACxD,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,CAmOjD"}

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,3 @@
import type { Node, NodeWrapperProps } from '../../types';
export 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;
//# 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,wBAAgB,WAAW,CAAC,QAAQ,SAAS,IAAI,EAAE,EACjD,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"}

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

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