Added PipelineBlock as well as necessary helper files

pull/33/head
Khwaja 3 months ago
parent 357e3129b1
commit fc5280d2f6

16
node_modules/.bin/nanoid generated vendored

@ -0,0 +1,16 @@
#!/bin/sh
basedir=$(dirname "$(echo "$0" | sed -e 's,\\,/,g')")
case `uname` in
*CYGWIN*|*MINGW*|*MSYS*)
if command -v cygpath > /dev/null 2>&1; then
basedir=`cygpath -w "$basedir"`
fi
;;
esac
if [ -x "$basedir/node" ]; then
exec "$basedir/node" "$basedir/../nanoid/bin/nanoid.js" "$@"
else
exec node "$basedir/../nanoid/bin/nanoid.js" "$@"
fi

17
node_modules/.bin/nanoid.cmd generated vendored

@ -0,0 +1,17 @@
@ECHO off
GOTO start
:find_dp0
SET dp0=%~dp0
EXIT /b
:start
SETLOCAL
CALL :find_dp0
IF EXIST "%dp0%\node.exe" (
SET "_prog=%dp0%\node.exe"
) ELSE (
SET "_prog=node"
SET PATHEXT=%PATHEXT:;.JS;=;%
)
endLocal & goto #_undefined_# 2>NUL || title %COMSPEC% & "%_prog%" "%dp0%\..\nanoid\bin\nanoid.js" %*

28
node_modules/.bin/nanoid.ps1 generated vendored

@ -0,0 +1,28 @@
#!/usr/bin/env pwsh
$basedir=Split-Path $MyInvocation.MyCommand.Definition -Parent
$exe=""
if ($PSVersionTable.PSVersion -lt "6.0" -or $IsWindows) {
# Fix case when both the Windows and Linux builds of Node
# are installed in the same directory
$exe=".exe"
}
$ret=0
if (Test-Path "$basedir/node$exe") {
# Support pipeline input
if ($MyInvocation.ExpectingInput) {
$input | & "$basedir/node$exe" "$basedir/../nanoid/bin/nanoid.js" $args
} else {
& "$basedir/node$exe" "$basedir/../nanoid/bin/nanoid.js" $args
}
$ret=$LASTEXITCODE
} else {
# Support pipeline input
if ($MyInvocation.ExpectingInput) {
$input | & "node$exe" "$basedir/../nanoid/bin/nanoid.js" $args
} else {
& "node$exe" "$basedir/../nanoid/bin/nanoid.js" $args
}
$ret=$LASTEXITCODE
}
exit $ret

292
node_modules/.package-lock.json generated vendored

@ -0,0 +1,292 @@
{
"name": "RELOG",
"lockfileVersion": 3,
"requires": true,
"packages": {
"node_modules/@types/d3-color": {
"version": "3.1.3",
"resolved": "https://registry.npmjs.org/@types/d3-color/-/d3-color-3.1.3.tgz",
"integrity": "sha512-iO90scth9WAbmgv7ogoq57O9YpKmFBbmoEoCHDB2xMBY0+/KVrqAaCDyCE16dUspeOvIxFFRI+0sEtqDqy2b4A==",
"license": "MIT"
},
"node_modules/@types/d3-drag": {
"version": "3.0.7",
"resolved": "https://registry.npmjs.org/@types/d3-drag/-/d3-drag-3.0.7.tgz",
"integrity": "sha512-HE3jVKlzU9AaMazNufooRJ5ZpWmLIoc90A37WU2JMmeq28w1FQqCZswHZ3xR+SuxYftzHq6WU6KJHvqxKzTxxQ==",
"license": "MIT",
"dependencies": {
"@types/d3-selection": "*"
}
},
"node_modules/@types/d3-interpolate": {
"version": "3.0.4",
"resolved": "https://registry.npmjs.org/@types/d3-interpolate/-/d3-interpolate-3.0.4.tgz",
"integrity": "sha512-mgLPETlrpVV1YRJIglr4Ez47g7Yxjl1lj7YKsiMCb27VJH9W8NVM6Bb9d8kkpG/uAQS5AmbA48q2IAolKKo1MA==",
"license": "MIT",
"dependencies": {
"@types/d3-color": "*"
}
},
"node_modules/@types/d3-selection": {
"version": "3.0.11",
"resolved": "https://registry.npmjs.org/@types/d3-selection/-/d3-selection-3.0.11.tgz",
"integrity": "sha512-bhAXu23DJWsrI45xafYpkQ4NtcKMwWnAC/vKrd2l+nxMFuvOT3XMYTIj2opv8vq8AO5Yh7Qac/nSeP/3zjTK0w==",
"license": "MIT"
},
"node_modules/@types/d3-transition": {
"version": "3.0.9",
"resolved": "https://registry.npmjs.org/@types/d3-transition/-/d3-transition-3.0.9.tgz",
"integrity": "sha512-uZS5shfxzO3rGlu0cC3bjmMFKsXv+SmZZcgp0KD22ts4uGXp5EVYGzu/0YdwZeKmddhcAccYtREJKkPfXkZuCg==",
"license": "MIT",
"dependencies": {
"@types/d3-selection": "*"
}
},
"node_modules/@types/d3-zoom": {
"version": "3.0.8",
"resolved": "https://registry.npmjs.org/@types/d3-zoom/-/d3-zoom-3.0.8.tgz",
"integrity": "sha512-iqMC4/YlFCSlO8+2Ii1GGGliCAY4XdeG748w5vQUbevlbDu0zSjH/+jojorQVBK/se0j6DUFNPBGSqD3YWYnDw==",
"license": "MIT",
"dependencies": {
"@types/d3-interpolate": "*",
"@types/d3-selection": "*"
}
},
"node_modules/@xyflow/react": {
"version": "12.7.0",
"resolved": "https://registry.npmjs.org/@xyflow/react/-/react-12.7.0.tgz",
"integrity": "sha512-U6VMEbYjiCg1byHrR7S+b5ZdHTjgCFX4KpBc634G/WtEBUvBLoMQdlCD6uJHqodnOAxpt3+G2wiDeTmXAFJzgQ==",
"license": "MIT",
"dependencies": {
"@xyflow/system": "0.0.62",
"classcat": "^5.0.3",
"zustand": "^4.4.0"
},
"peerDependencies": {
"react": ">=17",
"react-dom": ">=17"
}
},
"node_modules/@xyflow/system": {
"version": "0.0.62",
"resolved": "https://registry.npmjs.org/@xyflow/system/-/system-0.0.62.tgz",
"integrity": "sha512-Z2ufbnvuYxIOCGyzE/8eX8TAEM8Lpzc/JafjD1Tzy6ZJs/E7KGVU17Q1F5WDHVW+dbztJAdyXMG0ejR9bwSUAA==",
"license": "MIT",
"dependencies": {
"@types/d3-drag": "^3.0.7",
"@types/d3-interpolate": "^3.0.4",
"@types/d3-selection": "^3.0.10",
"@types/d3-transition": "^3.0.8",
"@types/d3-zoom": "^3.0.8",
"d3-drag": "^3.0.0",
"d3-interpolate": "^3.0.1",
"d3-selection": "^3.0.0",
"d3-zoom": "^3.0.0"
}
},
"node_modules/classcat": {
"version": "5.0.5",
"resolved": "https://registry.npmjs.org/classcat/-/classcat-5.0.5.tgz",
"integrity": "sha512-JhZUT7JFcQy/EzW605k/ktHtncoo9vnyW/2GspNYwFlN1C/WmjuV/xtS04e9SOkL2sTdw0VAZ2UGCcQ9lR6p6w==",
"license": "MIT"
},
"node_modules/d3-color": {
"version": "3.1.0",
"resolved": "https://registry.npmjs.org/d3-color/-/d3-color-3.1.0.tgz",
"integrity": "sha512-zg/chbXyeBtMQ1LbD/WSoW2DpC3I0mpmPdW+ynRTj/x2DAWYrIY7qeZIHidozwV24m4iavr15lNwIwLxRmOxhA==",
"license": "ISC",
"engines": {
"node": ">=12"
}
},
"node_modules/d3-dispatch": {
"version": "3.0.1",
"resolved": "https://registry.npmjs.org/d3-dispatch/-/d3-dispatch-3.0.1.tgz",
"integrity": "sha512-rzUyPU/S7rwUflMyLc1ETDeBj0NRuHKKAcvukozwhshr6g6c5d8zh4c2gQjY2bZ0dXeGLWc1PF174P2tVvKhfg==",
"license": "ISC",
"engines": {
"node": ">=12"
}
},
"node_modules/d3-drag": {
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/d3-drag/-/d3-drag-3.0.0.tgz",
"integrity": "sha512-pWbUJLdETVA8lQNJecMxoXfH6x+mO2UQo8rSmZ+QqxcbyA3hfeprFgIT//HW2nlHChWeIIMwS2Fq+gEARkhTkg==",
"license": "ISC",
"dependencies": {
"d3-dispatch": "1 - 3",
"d3-selection": "3"
},
"engines": {
"node": ">=12"
}
},
"node_modules/d3-ease": {
"version": "3.0.1",
"resolved": "https://registry.npmjs.org/d3-ease/-/d3-ease-3.0.1.tgz",
"integrity": "sha512-wR/XK3D3XcLIZwpbvQwQ5fK+8Ykds1ip7A2Txe0yxncXSdq1L9skcG7blcedkOX+ZcgxGAmLX1FrRGbADwzi0w==",
"license": "BSD-3-Clause",
"engines": {
"node": ">=12"
}
},
"node_modules/d3-interpolate": {
"version": "3.0.1",
"resolved": "https://registry.npmjs.org/d3-interpolate/-/d3-interpolate-3.0.1.tgz",
"integrity": "sha512-3bYs1rOD33uo8aqJfKP3JWPAibgw8Zm2+L9vBKEHJ2Rg+viTR7o5Mmv5mZcieN+FRYaAOWX5SJATX6k1PWz72g==",
"license": "ISC",
"dependencies": {
"d3-color": "1 - 3"
},
"engines": {
"node": ">=12"
}
},
"node_modules/d3-selection": {
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/d3-selection/-/d3-selection-3.0.0.tgz",
"integrity": "sha512-fmTRWbNMmsmWq6xJV8D19U/gw/bwrHfNXxrIN+HfZgnzqTHp9jOmKMhsTUjXOJnZOdZY9Q28y4yebKzqDKlxlQ==",
"license": "ISC",
"engines": {
"node": ">=12"
}
},
"node_modules/d3-timer": {
"version": "3.0.1",
"resolved": "https://registry.npmjs.org/d3-timer/-/d3-timer-3.0.1.tgz",
"integrity": "sha512-ndfJ/JxxMd3nw31uyKoY2naivF+r29V+Lc0svZxe1JvvIRmi8hUsrMvdOwgS1o6uBHmiz91geQ0ylPP0aj1VUA==",
"license": "ISC",
"engines": {
"node": ">=12"
}
},
"node_modules/d3-transition": {
"version": "3.0.1",
"resolved": "https://registry.npmjs.org/d3-transition/-/d3-transition-3.0.1.tgz",
"integrity": "sha512-ApKvfjsSR6tg06xrL434C0WydLr7JewBB3V+/39RMHsaXTOG0zmt/OAXeng5M5LBm0ojmxJrpomQVZ1aPvBL4w==",
"license": "ISC",
"dependencies": {
"d3-color": "1 - 3",
"d3-dispatch": "1 - 3",
"d3-ease": "1 - 3",
"d3-interpolate": "1 - 3",
"d3-timer": "1 - 3"
},
"engines": {
"node": ">=12"
},
"peerDependencies": {
"d3-selection": "2 - 3"
}
},
"node_modules/d3-zoom": {
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/d3-zoom/-/d3-zoom-3.0.0.tgz",
"integrity": "sha512-b8AmV3kfQaqWAuacbPuNbL6vahnOJflOhexLzMMNLga62+/nh0JzvJ0aO/5a5MVgUFGS7Hu1P9P03o3fJkDCyw==",
"license": "ISC",
"dependencies": {
"d3-dispatch": "1 - 3",
"d3-drag": "2 - 3",
"d3-interpolate": "1 - 3",
"d3-selection": "2 - 3",
"d3-transition": "2 - 3"
},
"engines": {
"node": ">=12"
}
},
"node_modules/i": {
"version": "0.3.7",
"resolved": "https://registry.npmjs.org/i/-/i-0.3.7.tgz",
"integrity": "sha512-FYz4wlXgkQwIPqhzC5TdNMLSE5+GS1IIDJZY/1ZiEPCT2S3COUVZeT5OW4BmW4r5LHLQuOosSwsvnroG9GR59Q==",
"engines": {
"node": ">=0.4"
}
},
"node_modules/nanoid": {
"version": "5.1.5",
"resolved": "https://registry.npmjs.org/nanoid/-/nanoid-5.1.5.tgz",
"integrity": "sha512-Ir/+ZpE9fDsNH0hQ3C68uyThDXzYcim2EqcZ8zn8Chtt1iylPT9xXJB0kPCnqzgcEGikO9RxSrh63MsmVCU7Fw==",
"funding": [
{
"type": "github",
"url": "https://github.com/sponsors/ai"
}
],
"license": "MIT",
"bin": {
"nanoid": "bin/nanoid.js"
},
"engines": {
"node": "^18 || >=20"
}
},
"node_modules/react": {
"version": "19.1.0",
"resolved": "https://registry.npmjs.org/react/-/react-19.1.0.tgz",
"integrity": "sha512-FS+XFBNvn3GTAWq26joslQgWNoFu08F4kl0J4CgdNKADkdSGXQyTCnKteIAJy96Br6YbpEU1LSzV5dYtjMkMDg==",
"license": "MIT",
"peer": true,
"engines": {
"node": ">=0.10.0"
}
},
"node_modules/react-dom": {
"version": "19.1.0",
"resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.1.0.tgz",
"integrity": "sha512-Xs1hdnE+DyKgeHJeJznQmYMIBG3TKIHJJT95Q58nHLSrElKlGQqDTR2HQ9fx5CN/Gk6Vh/kupBTDLU11/nDk/g==",
"license": "MIT",
"peer": true,
"dependencies": {
"scheduler": "^0.26.0"
},
"peerDependencies": {
"react": "^19.1.0"
}
},
"node_modules/scheduler": {
"version": "0.26.0",
"resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.26.0.tgz",
"integrity": "sha512-NlHwttCI/l5gCPR3D1nNXtWABUmBwvZpEQiD4IXSbIDq8BzLIK/7Ir5gTFSGZDUu37K5cMNp0hFtzO38sC7gWA==",
"license": "MIT",
"peer": true
},
"node_modules/use-sync-external-store": {
"version": "1.5.0",
"resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.5.0.tgz",
"integrity": "sha512-Rb46I4cGGVBmjamjphe8L/UnvJD+uPPtTkNvX5mZgqdbavhI4EbgIWJiIHXJ8bc/i9EQGPRh4DwEURJ552Do0A==",
"license": "MIT",
"peerDependencies": {
"react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
}
},
"node_modules/zustand": {
"version": "4.5.7",
"resolved": "https://registry.npmjs.org/zustand/-/zustand-4.5.7.tgz",
"integrity": "sha512-CHOUy7mu3lbD6o6LJLfllpjkzhHXSBlX8B9+qPddUsIfeF5S/UZ5q0kmCsnRqT1UHFQZchNFDDzMbQsuesHWlw==",
"license": "MIT",
"dependencies": {
"use-sync-external-store": "^1.2.2"
},
"engines": {
"node": ">=12.7.0"
},
"peerDependencies": {
"@types/react": ">=16.8",
"immer": ">=9.0.6",
"react": ">=16.8"
},
"peerDependenciesMeta": {
"@types/react": {
"optional": true
},
"immer": {
"optional": true
},
"react": {
"optional": true
}
}
}
}
}

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

@ -0,0 +1,15 @@
# Installation
> `npm install --save @types/d3-color`
# Summary
This package contains type definitions for d3-color (https://github.com/d3/d3-color/).
# Details
Files were exported from https://github.com/DefinitelyTyped/DefinitelyTyped/tree/master/types/d3-color.
### Additional Details
* Last updated: Tue, 07 Nov 2023 15:11:36 GMT
* Dependencies: none
# Credits
These definitions were written by [Tom Wanzek](https://github.com/tomwanzek), [Alex Ford](https://github.com/gustavderdrache), [Boris Yankov](https://github.com/borisyankov), [denisname](https://github.com/denisname), [Hugues Stefanski](https://github.com/ledragon), [Nathan Bierema](https://github.com/Methuselah96), and [Fil](https://github.com/Fil).

@ -0,0 +1,669 @@
// Last module patch version validated against: 3.1.0
// ---------------------------------------------------------------------------
// Shared Type Definitions and Interfaces
// ---------------------------------------------------------------------------
/**
* Type allowing for color objects from a specified color space
*/
export type ColorSpaceObject = RGBColor | HSLColor | LabColor | HCLColor | CubehelixColor;
/**
* A helper interface of methods common to color objects (including colors defined outside the d3-color standard module,
* e.g. in d3-hsv). This interface
*/
export interface ColorCommonInstance {
/**
* Returns true if and only if the color is displayable on standard hardware.
* For example, this returns false for an RGB color if any channel value is less than zero or greater than 255, or if the opacity is not in the range [0, 1].
*/
displayable(): boolean;
/**
* Returns a string representing this color according to the CSS Object Model specification,
* such as rgb(247, 234, 186) or rgba(247, 234, 186, 0.2).
* If this color is not displayable, a suitable displayable color is returned instead.
* For example, RGB channel values greater than 255 are clamped to 255.
*/
toString(): string;
/**
* Returns a brighter copy of this color. If k is specified, it controls how much brighter the returned color should be.
* If k is not specified, it defaults to 1. The behavior of this method is dependent on the implementing color space.
*
* @param k A color space dependent number to determine, how much brighter the returned color should be.
*/
brighter(k?: number): this;
/**
* Returns a darker copy of this color. If k is specified, it controls how much darker the returned color should be.
* If k is not specified, it defaults to 1. The behavior of this method is dependent on the implementing color space.
*
* @param k A color space dependent number to determine, how much darker the returned color should be.
*/
darker(k?: number): this;
/**
* Returns the RGB equivalent of this color. For RGB colors, thats "this".
*/
rgb(): RGBColor;
/**
* Returns a hexadecimal string representing this color.
* If this color is not displayable, a suitable displayable color is returned instead.
* For example, RGB channel values greater than 255 are clamped to 255.
*/
hex(): string;
}
/**
* A Color object which serves as a base class for
* colorspace-specific sub-class implementations.
*/
export interface Color {
/**
* Returns true if and only if the color is displayable on standard hardware.
* For example, this returns false for an RGB color if any channel value is less than zero or greater than 255, or if the opacity is not in the range [0, 1].
*/
displayable(): boolean; // Note: While this method is used in prototyping for colors of specific colorspaces, it should not be called directly, as 'this.rgb' would not be implemented on Color
/**
* Returns a string representing this color according to the CSS Object Model specification,
* such as rgb(247, 234, 186) or rgba(247, 234, 186, 0.2).
* If this color is not displayable, a suitable displayable color is returned instead.
* For example, RGB channel values greater than 255 are clamped to 255.
*/
toString(): string; // Note: While this method is used in prototyping for colors of specific colorspaces, it should not be called directly, as 'this.rgb' would not be implemented on Color
/**
* Returns a hexadecimal string representing this color in RGB space, such as #f7eaba.
* If this color is not displayable, a suitable displayable color is returned instead.
* For example, RGB channel values greater than 255 are clamped to 255.
*/
formatHex(): string;
/**
* Returns a hexadecimal string representing this color in RGBA space, such as #f7eaba90.
* If this color is not displayable, a suitable displayable color is returned instead.
* For example, RGB channel values greater than 255 are clamped to 255.
*/
formatHex8(): string;
/**
* Returns a string representing this color according to the CSS Color Module Level 3 specification, such as hsl(257, 50%, 80%) or hsla(257, 50%, 80%, 0.2).
* If this color is not displayable, a suitable displayable color is returned instead by clamping S and L channel values to the interval [0, 100].
*/
formatHsl(): string;
/**
* Returns a string representing this color according to the CSS Object Model specification, such as rgb(247, 234, 186) or rgba(247, 234, 186, 0.2).
* If this color is not displayable, a suitable displayable color is returned instead by clamping RGB channel values to the interval [0, 255].
*/
formatRgb(): string;
/**
* @deprecated Use color.formatHex.
*/
hex(): string;
}
/**
* A Color factory object, which may also be used with instanceof to test if an object is a color instance.
*/
export interface ColorFactory extends Function {
/**
* Parses the specified CSS Color Module Level 3 specifier string, returning an RGB or HSL color.
* If the specifier was not valid, null is returned.
*
* @param cssColorSpecifier A CSS Color Module Level 3 specifier string.
*/
(cssColorSpecifier: string): RGBColor | HSLColor | null;
/**
* Converts the provided color instance and returns an RGB or HSL color.
*
* @param color A permissible color space instance.
*/
(color: ColorSpaceObject | ColorCommonInstance): RGBColor | HSLColor;
/**
* Prototype of the factory, which can be used for instanceof testing
*/
readonly prototype: Color;
}
/**
* An RGB color object.
*/
export interface RGBColor extends Color {
/**
* Value of red channel
*/
r: number;
/**
* Value of green channel
*/
g: number;
/**
* Value of blue channel
*/
b: number;
/**
* Opacity value
*/
opacity: number;
/**
* Returns a brighter copy of this color. If k is specified, it controls how much brighter the returned color should be.
* If k is not specified, it defaults to 1.
*
* @param k A color space dependent number to determine, how much brighter the returned color should be.
*/
brighter(k?: number): this;
/**
* Returns a darker copy of this color. If k is specified, it controls how much darker the returned color should be.
* If k is not specified, it defaults to 1.
*
* @param k A color space dependent number to determine, how much darker the returned color should be.
*/
darker(k?: number): this;
/**
* Returns the RGB equivalent of this color.
*/
rgb(): this;
/**
* Returns a copy of this color.
*
* @param values If values is specified, any enumerable own properties of values are assigned to the new returned color.
*/
copy(
values?: {
r?: number | undefined;
g?: number | undefined;
b?: number | undefined;
opacity?: number | undefined;
},
): this;
/**
* Returns a new RGB color where the r, g, and b channels are clamped to the range [0, 255] and rounded to the nearest integer value,
* and the opacity is clamped to the range [0, 1].
*/
clamp(): this;
}
/**
* An RGB color factory object, which may also be used with instanceof to test if an object
* is an RGB color instance.
*/
export interface RGBColorFactory extends Function {
/**
* Constructs a new RGB color based on the specified channel values and opacity.
*
* @param r Red channel value.
* @param g Green channel value.
* @param b Blue channel value.
* @param opacity Optional opacity value, defaults to 1.
*/
(r: number, g: number, b: number, opacity?: number): RGBColor;
/**
* Parses the specified CSS Color Module Level 3 specifier string, returning an RGB color.
* If the specifier was not valid, null is returned.
*
* @param cssColorSpecifier A CSS Color Module Level 3 specifier string.
*/
(cssColorSpecifier: string): RGBColor;
/**
* Converts the provided color instance and returns an RGB color. The color instance is converted to the RGB color space using color.rgb.
* Note that unlike color.rgb this method always returns a new instance, even if color is already an RGB color.
*
* @param color A permissible color space instance.
*/
// tslint:disable-next-line:unified-signatures
(color: ColorSpaceObject | ColorCommonInstance): RGBColor;
/**
* Prototype of the factory, which can be used for instanceof testing
*/
readonly prototype: RGBColor;
}
/**
* An HSL color object.
*/
export interface HSLColor extends Color {
/**
* Hue channel value.
*/
h: number;
/**
* Saturation channel value.
*/
s: number;
/**
* Lightness channel value.
*/
l: number;
/**
* Opacity value.
*/
opacity: number;
/**
* Returns a brighter copy of this color. If k is specified, it controls how much brighter the returned color should be.
* If k is not specified, it defaults to 1.
*
* @param k A color space dependent number to determine, how much brighter the returned color should be.
*/
brighter(k?: number): this;
/**
* Returns a darker copy of this color. If k is specified, it controls how much darker the returned color should be.
* If k is not specified, it defaults to 1.
*
* @param k A color space dependent number to determine, how much darker the returned color should be.
*/
darker(k?: number): this;
/**
* Returns the RGB color equivalent of this color.
*/
rgb(): RGBColor;
/**
* Returns a copy of this color.
*
* @param values If values is specified, any enumerable own properties of values are assigned to the new returned color.
*/
copy(
values?: {
h?: number | undefined;
s?: number | undefined;
l?: number | undefined;
opacity?: number | undefined;
},
): this;
/**
* Returns a new HSL color where the h channel is clamped to the range [0, 360), and the s, l, and opacity channels are clamped to the range [0, 1].
*/
clamp(): this;
}
/**
* An HSL color factory object, which may also be used with instanceof to test if an object
* is an HSL color instance.
*/
export interface HSLColorFactory extends Function {
/**
* Constructs a new HSL color based on the specified channel values and opacity.
*
* @param h Hue channel value.
* @param s Saturation channel value.
* @param l Lightness channel value.
* @param opacity Optional opacity value, defaults to 1.
*/
(h: number, s: number, l: number, opacity?: number): HSLColor;
/**
* Parses the specified CSS Color Module Level 3 specifier string, returning an HSL color.
* If the specifier was not valid, null is returned.
*
* @param cssColorSpecifier A CSS Color Module Level 3 specifier string.
*/
(cssColorSpecifier: string): HSLColor;
/**
* Converts the provided color instance and returns an HSL color.
* The color instance is converted to the RGB color space using color.rgb and then converted to HSL.
* (Colors already in the HSL color space skip the conversion to RGB.)
*
* @param color A permissible color space instance.
*/
// tslint:disable-next-line:unified-signatures
(color: ColorSpaceObject | ColorCommonInstance): HSLColor;
/**
* Prototype of the factory, which can be used for instanceof testing
*/
readonly prototype: HSLColor;
}
/**
* A Lab (CIELAB) color object.
*/
export interface LabColor extends Color {
/**
* Lightness typically in the range [0, 100].
*/
l: number;
/**
* Position between red/magenta and green typically in [-160, +160].
*/
a: number;
/**
* Position between yellow and blue typically in [-160, +160].
*/
b: number;
/**
* Opacity value
*/
opacity: number;
/**
* Returns a brighter copy of this color. If k is specified, it controls how much brighter the returned color should be.
* If k is not specified, it defaults to 1.
*
* @param k A color space dependent number to determine, how much brighter the returned color should be.
*/
brighter(k?: number): this;
/**
* Returns a darker copy of this color. If k is specified, it controls how much darker the returned color should be.
* If k is not specified, it defaults to 1.
*
* @param k A color space dependent number to determine, how much darker the returned color should be.
*/
darker(k?: number): this;
/**
* Returns the RGB color equivalent of this color.
*/
rgb(): RGBColor;
/**
* Returns a copy of this color.
*
* @param values If values is specified, any enumerable own properties of values are assigned to the new returned color.
*/
copy(
values?: {
l?: number | undefined;
a?: number | undefined;
b?: number | undefined;
opacity?: number | undefined;
},
): this;
}
/**
* A Lab (CIELAB) color factory object, which may also be used with instanceof to test if an object
* is a Lab color instance.
*/
export interface LabColorFactory extends Function {
/**
* Constructs a new CIELAB color based on the specified channel values and opacity.
*
* @param l Lightness typically in the range [0, 100].
* @param a Position between red/magenta and green typically in [-160, +160].
* @param b Position between yellow and blue typically in [-160, +160].
* @param opacity Optional opacity value, defaults to 1.
*/
(l: number, a: number, b: number, opacity?: number): LabColor;
/**
* Parses the specified CSS Color Module Level 3 specifier string, returning a Lab color.
* If the specifier was not valid, null is returned.
*
* @param cssColorSpecifier A CSS Color Module Level 3 specifier string.
*/
(cssColorSpecifier: string): LabColor;
/**
* Converts the provided color instance and returns a Lab color.
* The color instance is converted to the RGB color space using color.rgb and then converted to CIELAB.
* (Colors already in the Lab color space skip the conversion to RGB,
* and colors in the HCL color space are converted directly to CIELAB.)
*
* @param color A permissible color space instance.
*/
// tslint:disable-next-line:unified-signatures
(color: ColorSpaceObject | ColorCommonInstance): LabColor;
/**
* Prototype of the factory, which can be used for instanceof testing
*/
readonly prototype: LabColor;
}
/**
* A gray color factory for Lab (CIELAB) colors.
*/
export type GrayColorFactory =
/**
* Constructs a new CIELAB color with the specified l value and a = b = 0.
*
* @param l Lightness typically in the range [0, 100].
* @param opacity Optional opacity value, defaults to 1.
*/
(l: number, opacity?: number) => LabColor;
/**
* An HCL (CIELCH) color object.
*/
export interface HCLColor extends Color {
/**
* Hue channel value typically in [0, 360).
*/
h: number;
/**
* Chroma channel value typically in [0, 230].
*/
c: number;
/**
* Luminance channel value typically in the range [0, 100].
*/
l: number;
/**
* Opacity value
*/
opacity: number;
/**
* Returns a brighter copy of this color. If k is specified, it controls how much brighter the returned color should be.
* If k is not specified, it defaults to 1.
*
* @param k A color space dependent number to determine, how much brighter the returned color should be.
*/
brighter(k?: number): this;
/**
* Returns a darker copy of this color. If k is specified, it controls how much darker the returned color should be.
* If k is not specified, it defaults to 1.
*
* @param k A color space dependent number to determine, how much darker the returned color should be.
*/
darker(k?: number): this;
/**
* Returns the RGB color equivalent of this color.
*/
rgb(): RGBColor;
/**
* Returns a copy of this color.
*
* @param values If values is specified, any enumerable own properties of values are assigned to the new returned color.
*/
copy(
values?: {
h?: number | undefined;
c?: number | undefined;
l?: number | undefined;
opacity?: number | undefined;
},
): this;
}
/**
* An HCL (CIELCH) color factory object, which may also be used with instanceof to test if an object
* is an HCL color instance.
*/
export interface HCLColorFactory extends Function {
/**
* Constructs a new HCL color based on the specified channel values and opacity.
*
* @param h Hue channel value typically in [0, 360).
* @param c Chroma channel value typically in [0, 230].
* @param l Luminance channel value typically in the range [0, 100].
* @param opacity Optional opacity value, defaults to 1.
*/
(h: number, c: number, l: number, opacity?: number): HCLColor;
/**
* Parses the specified CSS Color Module Level 3 specifier string, returning an HCL color.
* If the specifier was not valid, null is returned.
*
* @param cssColorSpecifier A CSS Color Module Level 3 specifier string.
*/
(cssColorSpecifier: string): HCLColor;
/**
* Converts the provided color instance and returns an HCL color.
* The color instance is converted to the RGB color space using color.rgb and then converted to HCL.
* (Colors already in the HCL color space skip the conversion to RGB,
* and colors in the Lab color space are converted directly to HCL.)
*
* @param color A permissible color space instance.
*/
// tslint:disable-next-line:unified-signatures
(color: ColorSpaceObject | ColorCommonInstance): HCLColor;
/**
* Prototype of the factory, which can be used for instanceof testing
*/
readonly prototype: HCLColor;
}
/**
* An LCH (CIELCH) color factory function to create an HCL color object.
*/
export interface LCHColorFactory {
/**
* Constructs a new HCL color based on the specified channel values and opacity.
*
* @param l Luminance channel value typically in the range [0, 100].
* @param c Chroma channel value typically in [0, 230].
* @param h Hue channel value typically in [0, 360).
* @param opacity Optional opacity value, defaults to 1.
*/
(l: number, c: number, h: number, opacity?: number): HCLColor;
/**
* Parses the specified CSS Color Module Level 3 specifier string, returning an HCL color.
* If the specifier was not valid, null is returned.
*
* @param cssColorSpecifier A CSS color Module Level 3 specifier string.
*/
(cssColorSpecifier: string): HCLColor;
/**
* Converts the provided color instance and returns an HCL color.
* The color instance is converted to the RGB color space using color.rgb and then converted to HCL.
* (Colors already in the HCL color space skip the conversion to RGB,
* and colors in the Lab color space are converted directly to HCL.)
*
* @param color A permissible color space instance.
*/
// tslint:disable-next-line:unified-signatures
(color: ColorSpaceObject | ColorCommonInstance): HCLColor;
}
/**
* Dave Greens Cubehelix color object.
*/
export interface CubehelixColor extends Color {
/**
* Hue channel value.
*/
h: number;
/**
* Saturation channel value.
*/
s: number;
/**
* Lightness channel value.
*/
l: number;
/**
* Opacity value.
*/
opacity: number;
/**
* Returns a brighter copy of this color. If k is specified, it controls how much brighter the returned color should be.
* If k is not specified, it defaults to 1.
*
* @param k A color space dependent number to determine, how much brighter the returned color should be.
*/
brighter(k?: number): this;
/**
* Returns a darker copy of this color. If k is specified, it controls how much darker the returned color should be.
* If k is not specified, it defaults to 1.
*
* @param k A color space dependent number to determine, how much darker the returned color should be.
*/
darker(k?: number): this;
/**
* Returns the RGB color equivalent of this color.
*/
rgb(): RGBColor;
/**
* Returns a copy of this color.
*
* @param values If values is specified, any enumerable own properties of values are assigned to the new returned color.
*/
copy(
values?: {
h?: number | undefined;
s?: number | undefined;
l?: number | undefined;
opacity?: number | undefined;
},
): this;
}
/**
* A color factory object for Dave Green's Cubehelix colors, which may also be used with instanceof to test if an object
* is a Cubehelix color instance.
*/
export interface CubehelixColorFactory extends Function {
/**
* Constructs a new Cubehelix color based on the specified channel values and opacity.
*
* @param h Hue channel value.
* @param s Saturation channel value.
* @param l Lightness channel value.
* @param opacity Optional opacity value, defaults to 1.
*/
(h: number, s: number, l: number, opacity?: number): CubehelixColor;
/**
* Parses the specified CSS Color Module Level 3 specifier string, returning an Cubehelix color.
* If the specifier was not valid, null is returned.
*
* @param cssColorSpecifier A CSS Color Module Level 3 specifier string.
*/
(cssColorSpecifier: string): CubehelixColor;
/**
* Converts the provided color instance and returns a Cubehelix color.
* The color instance is specified, it is converted to the RGB color space using color.rgb and then converted to Cubehelix.
* (Colors already in the Cubehelix color space skip the conversion to RGB.)
*
* @param color A permissible color space instance.
*/
// tslint:disable-next-line:unified-signatures
(color: ColorSpaceObject | ColorCommonInstance): CubehelixColor;
/**
* Prototype of the factory, which can be used for instanceof testing
*/
readonly prototype: CubehelixColor;
}
// --------------------------------------------------------------------------
// Color object factories
// --------------------------------------------------------------------------
/**
* A Color factory object, which may also be used with instanceof to test if an object is a color instance.
*/
export const color: ColorFactory;
/**
* An RGB color factory object, which may also be used with instanceof to test if an object
* is an RGB color instance.
*/
export const rgb: RGBColorFactory;
/**
* An HSL color factory object, which may also be used with instanceof to test if an object
* is an HSL color instance.
*/
export const hsl: HSLColorFactory;
/**
* A Lab (CIELAB) color factory object, which may also be used with instanceof to test if an object
* is a Lab color instance.
*/
export const lab: LabColorFactory;
/**
* A gray color factory for Lab (CIELAB) colors.
*/
export const gray: GrayColorFactory;
/**
* An HCL (CIELCH) color factory object, which may also be used with instanceof to test if an object
* is an HCL color instance.
*/
export const hcl: HCLColorFactory;
/**
* An LCH (CIELCH) color factory function to create an HCL color object.
*/
export const lch: LCHColorFactory;
/**
* A color factory object for Dave Green's Cubehelix colors, which may also be used with instanceof to test if an object
* is a Cubehelix color instance.
*/
export const cubehelix: CubehelixColorFactory;

@ -0,0 +1,55 @@
{
"name": "@types/d3-color",
"version": "3.1.3",
"description": "TypeScript definitions for d3-color",
"homepage": "https://github.com/DefinitelyTyped/DefinitelyTyped/tree/master/types/d3-color",
"license": "MIT",
"contributors": [
{
"name": "Tom Wanzek",
"githubUsername": "tomwanzek",
"url": "https://github.com/tomwanzek"
},
{
"name": "Alex Ford",
"githubUsername": "gustavderdrache",
"url": "https://github.com/gustavderdrache"
},
{
"name": "Boris Yankov",
"githubUsername": "borisyankov",
"url": "https://github.com/borisyankov"
},
{
"name": "denisname",
"githubUsername": "denisname",
"url": "https://github.com/denisname"
},
{
"name": "Hugues Stefanski",
"githubUsername": "ledragon",
"url": "https://github.com/ledragon"
},
{
"name": "Nathan Bierema",
"githubUsername": "Methuselah96",
"url": "https://github.com/Methuselah96"
},
{
"name": "Fil",
"githubUsername": "Fil",
"url": "https://github.com/Fil"
}
],
"main": "",
"types": "index.d.ts",
"repository": {
"type": "git",
"url": "https://github.com/DefinitelyTyped/DefinitelyTyped.git",
"directory": "types/d3-color"
},
"scripts": {},
"dependencies": {},
"typesPublisherContentHash": "89cf9357324cddaa31cfb539b1c33d118648ed55319f2a0d26f24b004975a947",
"typeScriptVersion": "4.5"
}

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

@ -0,0 +1,15 @@
# Installation
> `npm install --save @types/d3-drag`
# Summary
This package contains type definitions for d3-drag (https://github.com/d3/d3-drag/).
# Details
Files were exported from https://github.com/DefinitelyTyped/DefinitelyTyped/tree/master/types/d3-drag.
### Additional Details
* Last updated: Tue, 07 Nov 2023 15:11:36 GMT
* Dependencies: [@types/d3-selection](https://npmjs.com/package/@types/d3-selection)
# Credits
These definitions were written by [Tom Wanzek](https://github.com/tomwanzek), [Alex Ford](https://github.com/gustavderdrache), [Boris Yankov](https://github.com/borisyankov), and [Nathan Bierema](https://github.com/Methuselah96).

@ -0,0 +1,395 @@
// Last module patch version validated against: 3.0.0
import { Selection, ValueFn } from "d3-selection";
// --------------------------------------------------------------------------
// Shared Type Definitions and Interfaces
// --------------------------------------------------------------------------
/**
* DraggedElementBaseType serves as an alias for the 'minimal' data type which can be selected
* without 'd3-drag' (and related code in 'd3-selection') trying to use properties internally which would otherwise not
* be supported.
*/
export type DraggedElementBaseType = Element;
/**
* Container element type usable for mouse/touch functions
*/
export type DragContainerElement = HTMLElement | SVGSVGElement | SVGGElement; // HTMLElement includes HTMLCanvasElement
/**
* The subject datum should at a minimum expose x and y properties, so that the relative position
* of the subject and the pointer can be preserved during the drag gesture.
*/
export interface SubjectPosition {
/**
* x-coordinate
*/
x: number;
/**
* y-coordinate
*/
y: number;
}
/**
* A D3 Drag Behavior
*
* The first generic refers to the type of element to be dragged.
* The second generic refers to the type of the datum of the dragged element.
* The third generic refers to the type of the drag behavior subject.
*
* The subject of a drag gesture represents the thing being dragged.
* It is computed when an initiating input event is received,
* such as a mousedown or touchstart, immediately before the drag gesture starts.
* The subject is then exposed as event.subject on subsequent drag events for this gesture.
*
* The default subject is the datum of the element in the originating selection (see drag)
* that received the initiating input event; if this datum is undefined,
* an object representing the coordinates of the pointer is created.
* When dragging circle elements in SVG, the default subject is thus the datum of the circle being dragged.
* With Canvas, the default subject is the canvas elements datum (regardless of where on the canvas you click).
* In this case, a custom subject accessor would be more appropriate,
* such as one that picks the closest circle to the mouse within a given search radius.
*/
export interface DragBehavior<GElement extends DraggedElementBaseType, Datum, Subject> extends Function {
/**
* Applies the drag behavior to the selected elements.
* This function is typically not invoked directly, and is instead invoked via selection.call.
*
* For details see: {@link https://github.com/d3/d3-drag#_drag}
*
* @param selection A D3 selection of elements.
* @param args Optional arguments to be passed in.
*/
(selection: Selection<GElement, Datum, any, any>, ...args: any[]): void;
/**
* Returns the current container accessor function.
*/
container(): ValueFn<GElement, Datum, DragContainerElement>;
/**
* Sets the container accessor to the specified function and returns the drag behavior.
*
* The container of a drag gesture determines the coordinate system of subsequent drag events, affecting event.x and event.y.
* The element returned by the container accessor is subsequently passed to d3.pointer to determine the local coordinates of the pointer.
*
* The default container accessor returns the parent node of the element in the originating selection (see drag)
* that received the initiating input event. This is often appropriate when dragging SVG or HTML elements,
* since those elements are typically positioned relative to a parent. For dragging graphical elements with a Canvas,
* however, you may want to redefine the container as the initiating element itself, using "this" in the accessor
* function.
*
* @param accessor A container accessor function which is evaluated for each selected element,
* in order, being passed the current datum (d), the current index (i), and the current group (nodes),
* with this as the current DOM element. The function returns the container element.
*/
container(accessor: ValueFn<GElement, Datum, DragContainerElement>): this;
/**
* Sets the container accessor to the specified object and returns the drag behavior.
*
* The container of a drag gesture determines the coordinate system of subsequent drag events, affecting event.x and event.y.
* The element returned by the container accessor is subsequently passed to d3.pointer to determine the local coordinates of the pointer.
*
* The default container accessor returns the parent node of the element in the originating selection (see drag)
* that received the initiating input event. This is often appropriate when dragging SVG or HTML elements,
* since those elements are typically positioned relative to a parent. For dragging graphical elements with a Canvas,
* however, you may want to redefine the container as the initiating element itself, such as drag.container(canvas).
*
* @param container Container element for the drag gesture.
*/
container(container: DragContainerElement): this;
/**
* Returns the current filter function.
*/
filter(): (this: GElement, event: any, d: Datum) => boolean;
/**
* Sets the event filter to the specified filter function and returns the drag behavior.
*
* If the filter returns falsey, the initiating event is ignored and no drag gesture is started.
* Thus, the filter determines which input events are ignored. The default filter ignores mousedown events on secondary buttons,
* since those buttons are typically intended for other purposes, such as the context menu.
*
* @param filterFn A filter function which is evaluated for each selected element,
* in order, being passed the current event (event) and datum d, with the this context as the current DOM element.
* The function returns a boolean value.
*/
filter(filterFn: (this: GElement, event: any, d: Datum) => boolean): this;
/**
* Returns the current touch support detector, which defaults to a function returning true,
* if the "ontouchstart" event is supported on the current element.
*/
touchable(): ValueFn<GElement, Datum, boolean>;
/**
* Sets the touch support detector to the specified boolean value and returns the drag behavior.
*
* Touch event listeners are only registered if the detector returns truthy for the corresponding element when the drag behavior is applied.
* The default detector works well for most browsers that are capable of touch input, but not all; Chromes mobile device emulator, for example,
* fails detection.
*
* @param touchable A boolean value. true when touch event listeners should be applied to the corresponding element, otherwise false.
*/
touchable(touchable: boolean): this;
/**
* Sets the touch support detector to the specified function and returns the drag behavior.
*
* Touch event listeners are only registered if the detector returns truthy for the corresponding element when the drag behavior is applied.
* The default detector works well for most browsers that are capable of touch input, but not all; Chromes mobile device emulator, for example,
* fails detection.
*
* @param touchable A touch support detector function, which returns true when touch event listeners should be applied to the corresponding element.
* The function is evaluated for each selected element to which the drag behavior was applied, in order, being passed the current datum (d),
* the current index (i), and the current group (nodes), with this as the current DOM element. The function returns a boolean value.
*/
touchable(touchable: ValueFn<GElement, Datum, boolean>): this;
/**
* Returns the current subject accessor functions.
*/
subject(): (this: GElement, event: any, d: Datum) => Subject;
/**
* Sets the subject accessor to the specified function and returns the drag behavior.
*
* The subject of a drag gesture represents the thing being dragged.
* It is computed when an initiating input event is received,
* such as a mousedown or touchstart, immediately before the drag gesture starts.
* The subject is then exposed as event.subject on subsequent drag events for this gesture.
*
* The default subject is the datum of the element in the originating selection (see drag)
* that received the initiating input event; if this datum is undefined,
* an object representing the coordinates of the pointer is created.
* When dragging circle elements in SVG, the default subject is thus the datum of the circle being dragged.
* With Canvas, the default subject is the canvas elements datum (regardless of where on the canvas you click).
* In this case, a custom subject accessor would be more appropriate,
* such as one that picks the closest circle to the mouse within a given search radius.
*
* The subject of a drag gesture may not be changed after the gesture starts.
*
* During the evaluation of the subject accessor, event is a beforestart drag event.
* Use event.sourceEvent to access the initiating input event and event.identifier to access the touch identifier.
* The event.x and event.y are relative to the container, and are computed using d3.pointer.
*
* @param accessor An extent accessor function which is evaluated for each selected element,
* in order, being passed the current event (`event`) and datum `d`, with the `this` context as the current DOM element.
* The returned subject should be an object that exposes x and y properties,
* so that the relative position of the subject and the pointer can be preserved during the drag gesture.
* If the subject is null or undefined, no drag gesture is started for this pointer;
* however, other starting touches may yet start drag gestures.
*/
subject(accessor: (this: GElement, event: any, d: Datum) => Subject): this;
/**
* Return the current click distance threshold, which defaults to zero.
*/
clickDistance(): number;
/**
* Set the maximum distance that the mouse can move between mousedown and mouseup that will trigger
* a subsequent click event. If at any point between mousedown and mouseup the mouse is greater than or equal to
* distance from its position on mousedown, the click event following mouseup will be suppressed.
*
* @param distance The distance threshold between mousedown and mouseup measured in client coordinates (event.clientX and event.clientY).
* The default is zero.
*/
clickDistance(distance: number): this;
/**
* Return the first currently-assigned listener matching the specified typenames, if any.
*
* @param typenames The typenames is a string containing one or more typename separated by whitespace.
* Each typename is a type, optionally followed by a period (.) and a name, such as "drag.foo"" and "drag.bar";
* the name allows multiple listeners to be registered for the same type. The type must be one of the following:
* start (after a new pointer becomes active [on mousedown or touchstart]), drag (after an active pointer moves [on mousemove or touchmove], or
* end (after an active pointer becomes inactive [on mouseup, touchend or touchcancel].)
*/
on(typenames: string): ((this: GElement, event: any, d: Datum) => void) | undefined;
/**
* Remove the current event listeners for the specified typenames, if any, return the drag behavior.
*
* @param typenames The typenames is a string containing one or more typename separated by whitespace.
* Each typename is a type, optionally followed by a period (.) and a name, such as "drag.foo"" and "drag.bar";
* the name allows multiple listeners to be registered for the same type. The type must be one of the following:
* start (after a new pointer becomes active [on mousedown or touchstart]), drag (after an active pointer moves [on mousemove or touchmove], or
* end (after an active pointer becomes inactive [on mouseup, touchend or touchcancel].)
* @param listener Use null to remove the listener.
*/
on(typenames: string, listener: null): this;
/**
* Set the event listener for the specified typenames and return the drag behavior.
* If an event listener was already registered for the same type and name,
* the existing listener is removed before the new listener is added.
* When a specified event is dispatched, each listener will be invoked with the same context and arguments as selection.on listeners.
*
* Changes to registered listeners via drag.on during a drag gesture do not affect the current drag gesture.
* Instead, you must use event.on, which also allows you to register temporary event listeners for the current drag gesture.
* Separate events are dispatched for each active pointer during a drag gesture.
* For example, if simultaneously dragging multiple subjects with multiple fingers, a start event is dispatched for each finger,
* even if both fingers start touching simultaneously.
*
* @param typenames The typenames is a string containing one or more typename separated by whitespace.
* Each typename is a type, optionally followed by a period (.) and a name, such as "drag.foo"" and "drag.bar";
* the name allows multiple listeners to be registered for the same type. The type must be one of the following:
* start (after a new pointer becomes active [on mousedown or touchstart]), drag (after an active pointer moves [on mousemove or touchmove], or
* end (after an active pointer becomes inactive [on mouseup, touchend or touchcancel].)
* @param listener An event listener function which is evaluated for each selected element,
* in order, being passed the current event (event) and datum d, with the this context as the current DOM element.
*/
on(typenames: string, listener: (this: GElement, event: any, d: Datum) => void): this;
}
/**
* Creates a new drag behavior. The returned behavior, drag, is both an object and a function, and is
* typically applied to selected elements via selection.call.
*
* Use this signature when using the default subject accessor.
*
* The first generic refers to the type of element to be dragged.
* The second generic refers to the type of the datum of the dragged element.
*/
// eslint-disable-next-line @definitelytyped/no-unnecessary-generics
export function drag<GElement extends DraggedElementBaseType, Datum>(): DragBehavior<
GElement,
Datum,
Datum | SubjectPosition
>;
/**
* Creates a new drag behavior. The returned behavior, drag, is both an object and a function, and is
* typically applied to selected elements via selection.call.
*
* Use this signature when using a custom subject accessor.
*
* The first generic refers to the type of element to be dragged.
* The second generic refers to the type of the datum of the dragged element.
* The third generic refers to the type of the drag behavior subject.
*/
// eslint-disable-next-line @definitelytyped/no-unnecessary-generics
export function drag<GElement extends DraggedElementBaseType, Datum, Subject>(): DragBehavior<GElement, Datum, Subject>;
/**
* D3 Drag event
*
* The first generic refers to the type of element to be dragged.
* The second generic refers to the type of the datum of the dragged element.
* The third generic refers to the type of the drag behavior subject.
*/
export interface D3DragEvent<GElement extends DraggedElementBaseType, Datum, Subject> {
/**
* The DragBehavior associated with the event
*/
target: DragBehavior<GElement, Datum, Subject>;
/**
* The event type for the DragEvent
*/
type: "start" | "drag" | "end" | string; // Leave failsafe string type for cases like 'drag.foo'
/**
* The drag subject, defined by drag.subject.
*/
subject: Subject;
/**
* The new x-coordinate of the subject, relative to the container
*/
x: number;
/**
* The new y-coordinate of the subject, relative to the container
*/
y: number;
/**
* The change in x-coordinate since the previous drag event.
*/
dx: number;
/**
* The change in y-coordinate since the previous drag event.
*/
dy: number;
/**
* The string mouse, or a numeric touch identifier.
*/
identifier: "mouse" | number;
/**
* The number of currently active drag gestures (on start and end, not including this one).
*
* The event.active field is useful for detecting the first start event and the last end event
* in a sequence of concurrent drag gestures: it is zero when the first drag gesture starts,
* and zero when the last drag gesture ends.
*/
active: number;
/**
* The underlying input event, such as mousemove or touchmove.
*/
sourceEvent: any;
/**
* Return the first currently-assigned listener matching the specified typenames, if any.
*
* Equivalent to drag.on, but only applies to the current drag gesture. Before the drag gesture starts,
* a copy of the current drag event listeners is made. This copy is bound to the current drag gesture
* and modified by event.on. This is useful for temporary listeners that only receive events for the current drag gesture.
*
* @param typenames The typenames is a string containing one or more typename separated by whitespace.
* Each typename is a type, optionally followed by a period (.) and a name, such as "drag.foo"" and "drag.bar";
* the name allows multiple listeners to be registered for the same type. The type must be one of the following:
* start (after a new pointer becomes active [on mousedown or touchstart]), drag (after an active pointer moves [on mousemove or touchmove], or
* end (after an active pointer becomes inactive [on mouseup, touchend or touchcancel].)
*/
on(typenames: string): ((this: GElement, event: any, d: Datum) => void) | undefined;
/**
* Remove the current event listeners for the specified typenames, if any, return the drag behavior.
*
* Equivalent to drag.on, but only applies to the current drag gesture. Before the drag gesture starts,
* a copy of the current drag event listeners is made. This copy is bound to the current drag gesture
* and modified by event.on. This is useful for temporary listeners that only receive events for the current drag gesture.
*
* @param typenames The typenames is a string containing one or more typename separated by whitespace.
* Each typename is a type, optionally followed by a period (.) and a name, such as "drag.foo"" and "drag.bar";
* the name allows multiple listeners to be registered for the same type. The type must be one of the following:
* start (after a new pointer becomes active [on mousedown or touchstart]), drag (after an active pointer moves [on mousemove or touchmove], or
* end (after an active pointer becomes inactive [on mouseup, touchend or touchcancel].)
* @param listener Use null to remove the listener.
*/
on(typenames: string, listener: null): this;
/**
* Set the event listener for the specified typenames and return the drag behavior.
* If an event listener was already registered for the same type and name,
* the existing listener is removed before the new listener is added.
* When a specified event is dispatched, each listener will be invoked with the same context and arguments as selection.on listeners.
*
* Equivalent to drag.on, but only applies to the current drag gesture. Before the drag gesture starts,
* a copy of the current drag event listeners is made. This copy is bound to the current drag gesture
* and modified by event.on. This is useful for temporary listeners that only receive events for the current drag gesture.
*
* @param typenames The typenames is a string containing one or more typename separated by whitespace.
* Each typename is a type, optionally followed by a period (.) and a name, such as "drag.foo"" and "drag.bar";
* the name allows multiple listeners to be registered for the same type. The type must be one of the following:
* start (after a new pointer becomes active [on mousedown or touchstart]), drag (after an active pointer moves [on mousemove or touchmove], or
* end (after an active pointer becomes inactive [on mouseup, touchend or touchcancel].)
* @param listener An event listener function which is evaluated for each selected element,
* in order, being passed the current event (event) and datum d, with the this context as the current DOM element.
*/
on(typenames: string, listener: (this: GElement, event: any, d: Datum) => void): this;
}
/**
* Prevents native drag-and-drop and text selection on the specified window.
* As an alternative to preventing the default action of mousedown events,
* this method prevents undesirable default actions following mousedown. In supported browsers,
* this means capturing dragstart and selectstart events, preventing the associated default actions,
* and immediately stopping their propagation. In browsers that do not support selection events,
* the user-select CSS property is set to none on the document element.
* This method is intended to be called on mousedown, followed by d3.dragEnable on mouseup.
*
* @param window The window for which drag should be disabled.
*/
export function dragDisable(window: Window): void;
/**
* Allows native drag-and-drop and text selection on the specified window; undoes the effect of d3.dragDisable.
* This method is intended to be called on mouseup, preceded by d3.dragDisable on mousedown.
* If noclick is true, this method also temporarily suppresses click events.
* The suppression of click events expires after a zero-millisecond timeout,
* such that it only suppress the click event that would immediately follow the current mouseup event, if any.
*
* @param window The window for which drag should be (re-)enabled.
* @param noClick An optional flag. If noclick is true, this method also temporarily suppresses click events.
*/
export function dragEnable(window: Window, noClick?: boolean): void;

@ -0,0 +1,42 @@
{
"name": "@types/d3-drag",
"version": "3.0.7",
"description": "TypeScript definitions for d3-drag",
"homepage": "https://github.com/DefinitelyTyped/DefinitelyTyped/tree/master/types/d3-drag",
"license": "MIT",
"contributors": [
{
"name": "Tom Wanzek",
"githubUsername": "tomwanzek",
"url": "https://github.com/tomwanzek"
},
{
"name": "Alex Ford",
"githubUsername": "gustavderdrache",
"url": "https://github.com/gustavderdrache"
},
{
"name": "Boris Yankov",
"githubUsername": "borisyankov",
"url": "https://github.com/borisyankov"
},
{
"name": "Nathan Bierema",
"githubUsername": "Methuselah96",
"url": "https://github.com/Methuselah96"
}
],
"main": "",
"types": "index.d.ts",
"repository": {
"type": "git",
"url": "https://github.com/DefinitelyTyped/DefinitelyTyped.git",
"directory": "types/d3-drag"
},
"scripts": {},
"dependencies": {
"@types/d3-selection": "*"
},
"typesPublisherContentHash": "cbd098773821019893d7397be4129e19f5b62205943d423ef95a612ec9c9eac6",
"typeScriptVersion": "4.5"
}

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

@ -0,0 +1,15 @@
# Installation
> `npm install --save @types/d3-interpolate`
# Summary
This package contains type definitions for d3-interpolate (https://github.com/d3/d3-interpolate/).
# Details
Files were exported from https://github.com/DefinitelyTyped/DefinitelyTyped/tree/master/types/d3-interpolate.
### Additional Details
* Last updated: Tue, 07 Nov 2023 15:11:37 GMT
* Dependencies: [@types/d3-color](https://npmjs.com/package/@types/d3-color)
# Credits
These definitions were written by [Tom Wanzek](https://github.com/tomwanzek), [Alex Ford](https://github.com/gustavderdrache), [Boris Yankov](https://github.com/borisyankov), [denisname](https://github.com/denisname), and [Nathan Bierema](https://github.com/Methuselah96).

@ -0,0 +1,387 @@
// Last module patch version validated against: 3.0.1
import { ColorCommonInstance } from "d3-color";
// ---------------------------------------------------------------------------
// Shared Type Definitions and Interfaces
// ---------------------------------------------------------------------------
export interface ZoomInterpolator extends Function {
(t: number): ZoomView;
/**
* Recommended duration of zoom transition in milliseconds.
*/
duration: number;
/**
* Given a zoom interpolator, returns a new zoom interpolator using the specified curvature rho.
* When rho is close to 0, the interpolator is almost linear.
* The default curvature is sqrt(2).
* @param rho
*/
rho(rho: number): this;
}
export interface ColorGammaInterpolationFactory extends Function {
(a: string | ColorCommonInstance, b: string | ColorCommonInstance): (t: number) => string;
/**
* Returns a new interpolator factory of the same type using the specified *gamma*.
* For example, to interpolate from purple to orange with a gamma of 2.2 in RGB space: `d3.interpolateRgb.gamma(2.2)("purple", "orange")`.
* See Eric Brasseurs article, [Gamma error in picture scaling](https://web.archive.org/web/20160112115812/http://www.4p8.com/eric.brasseur/gamma.html), for more on gamma correction.
*/
gamma(g: number): ColorGammaInterpolationFactory;
}
/**
* Type zoomView is used to represent a numeric array with three elements.
* In order of appearance the elements correspond to:
* - cx: *x*-coordinate of the center of the viewport
* - cy: *y*-coordinate of the center of the viewport
* - width: size of the viewport
*/
export type ZoomView = [number, number, number];
export type TypedArray =
| Int8Array
| Uint8Array
| Int16Array
| Uint16Array
| Int32Array
| Uint32Array
| Uint8ClampedArray
| Float32Array
| Float64Array;
export type NumberArray = TypedArray | DataView;
// ---------------------------------------------------------------------------
// Interpolation Function Factories
// ---------------------------------------------------------------------------
/**
* Returns an `null` constant interpolator.
*/
export function interpolate(a: any, b: null): (t: number) => null;
/**
* Returns an boolean constant interpolator of value `b`.
*/
export function interpolate(a: any, b: boolean): (t: number) => boolean;
/**
* Returns a `interpolateRgb` interpolator.
*/
export function interpolate(a: string | ColorCommonInstance, b: ColorCommonInstance): (t: number) => string;
/**
* Returns a `interpolateDate` interpolator.
*/
export function interpolate(a: Date, b: Date): (t: number) => Date;
/**
* Returns a `interpolateNumber` interpolator.
*/
export function interpolate(
a: number | { valueOf(): number },
b: number | { valueOf(): number },
): (t: number) => number;
/**
* Returns a `interpolateNumberArray` interpolator.
*/
export function interpolate<T extends NumberArray>(a: NumberArray | number[], b: T): (t: number) => T;
/**
* Returns a `interpolateString` interpolator. If `b` is a string coercible to a color use use `interpolateRgb`.
*/
export function interpolate(a: string | { toString(): string }, b: string): (t: number) => string;
/**
* Returns a `interpolateArray` interpolator.
*/
export function interpolate<U extends any[]>(a: any[], b: U): (t: number) => U;
/**
* Returns a `interpolateObject` interpolator.
*/
export function interpolate<U extends object>(a: any, b: U): (t: number) => U;
/**
* Returns an interpolator between the two numbers `a` and `b`.
* The returned interpolator is equivalent to: `(t) => a * (1 - t) + b * t`.
*/
export function interpolateNumber(
a: number | { valueOf(): number },
b: number | { valueOf(): number },
): (t: number) => number;
/**
* Returns an interpolator between the two numbers `a` and `b`; the interpolator is similar to `interpolateNumber`,
* except it will round the resulting value to the nearest integer.
*/
export function interpolateRound(
a: number | { valueOf(): number },
b: number | { valueOf(): number },
): (t: number) => number;
/**
* Returns an interpolator between the two strings `a` and `b`.
* The string interpolator finds numbers embedded in `a` and `b`, where each number is of the form understood by JavaScript.
* A few examples of numbers that will be detected within a string: `-1`, `42`, `3.14159`, and `6.0221413e+23`.
*
* For each number embedded in `b`, the interpolator will attempt to find a corresponding number in `a`.
* If a corresponding number is found, a numeric interpolator is created using `interpolateNumber`.
* The remaining parts of the string `b` are used as a template.
*
* For example, if `a` is `"300 12px sans-serif"`, and `b` is `"500 36px Comic-Sans"`, two embedded numbers are found.
* The remaining static parts (of string `b`) are a space between the two numbers (`" "`), and the suffix (`"px Comic-Sans"`).
* The result of the interpolator at `t` = 0.5 is `"400 24px Comic-Sans"`.
*/
export function interpolateString(
a: string | { toString(): string },
b: string | { toString(): string },
): (t: number) => string;
/**
* Returns an interpolator between the two dates `a` and `b`.
*
* Note: *no defensive copy* of the returned date is created; the same Date instance is returned for every evaluation of the interpolator.
* No copy is made for performance reasons; interpolators are often part of the inner loop of animated transitions.
*/
export function interpolateDate(a: Date, b: Date): (t: number) => Date;
export type ArrayInterpolator<A extends any[]> = (t: number) => A;
/**
* Returns an interpolator between the two arrays `a` and `b`. Internally, an array template is created that is the same length in `b`.
* For each element in `b`, if there exists a corresponding element in `a`, a generic interpolator is created for the two elements using `interpolate`.
* If there is no such element, the static value from `b` is used in the template.
* Then, for the given parameter `t`, the templates embedded interpolators are evaluated. The updated array template is then returned.
*
* For example, if `a` is the array `[0, 1]` and `b` is the array `[1, 10, 100]`, then the result of the interpolator for `t = 0.5` is the array `[0.5, 5.5, 100]`.
*
* Note: *no defensive copy* of the template array is created; modifications of the returned array may adversely affect subsequent evaluation of the interpolator.
* No copy is made for performance reasons; interpolators are often part of the inner loop of animated transitions.
*/
export function interpolateArray<A extends any[]>(a: any[], b: A): ArrayInterpolator<A>;
/**
* interpolateNumberArray is called
*/
export function interpolateArray<T extends NumberArray>(a: NumberArray | number[], b: T): (t: number) => T;
/**
* Returns an interpolator between the two arrays of numbers a and b.
* Internally, an array template is created that is the same type and length as b.
* For each element in b, if there exists a corresponding element in a, the values are directly interpolated in the array template.
* If there is no such element, the static value from b is copied.
* The updated array template is then returned.
*
* Note: For performance reasons, no defensive copy is made of the template array and the arguments a and b; modifications of these arrays may affect subsequent evaluation of the interpolator.
*/
export function interpolateNumberArray<T extends NumberArray | number[]>(
a: NumberArray | number[],
b: T,
): (t: number) => T;
/**
* Returns an interpolator between the two objects `a` and `b`. Internally, an object template is created that has the same properties as `b`.
* For each property in `b`, if there exists a corresponding property in `a`, a generic interpolator is created for the two elements using `interpolate`.
* If there is no such property, the static value from `b` is used in the template.
* Then, for the given parameter `t`, the template's embedded interpolators are evaluated and the updated object template is then returned.
*
* For example, if `a` is the object `{x: 0, y: 1}` and `b` is the object `{x: 1, y: 10, z: 100}`, the result of the interpolator for `t = 0.5` is the object `{x: 0.5, y: 5.5, z: 100}`.
*
* Note: *no defensive copy* of the template object is created; modifications of the returned object may adversely affect subsequent evaluation of the interpolator.
* No copy is made for performance reasons; interpolators are often part of the inner loop of animated transitions.
*/
export function interpolateObject<U extends object>(a: any, b: U): (t: number) => U;
/**
* Returns an interpolator between the two 2D CSS transforms represented by `a` and `b`.
* Each transform is decomposed to a standard representation of translate, rotate, *x*-skew and scale; these component transformations are then interpolated.
* This behavior is standardized by CSS: see [matrix decomposition for animation](http://www.w3.org/TR/css3-2d-transforms/#matrix-decomposition).
*/
export function interpolateTransformCss(a: string, b: string): (t: number) => string;
/**
* Returns an interpolator between the two 2D SVG transforms represented by `a` and `b`.
* Each transform is decomposed to a standard representation of translate, rotate, *x*-skew and scale; these component transformations are then interpolated.
* This behavior is standardized by CSS: see [matrix decomposition for animation](http://www.w3.org/TR/css3-2d-transforms/#matrix-decomposition).
*/
export function interpolateTransformSvg(a: string, b: string): (t: number) => string;
/**
* Returns an interpolator between the two views `a` and `b` of a two-dimensional plane,
* based on [Smooth and efficient zooming and panning](http://www.win.tue.nl/~vanwijk/zoompan.pdf).
* Each view is defined as an array of three numbers: *cx*, *cy* and *width*.
* The first two coordinates *cx*, *cy* represent the center of the viewport; the last coordinate *width* represents the size of the viewport.
*
* The returned interpolator exposes a *duration* property which encodes the recommended transition duration in milliseconds.
* This duration is based on the path length of the curved trajectory through *x,y* space.
* If you want to a slower or faster transition, multiply this by an arbitrary scale factor (*V* as described in the original paper).
*/
export function interpolateZoom(a: ZoomView, b: ZoomView): ZoomInterpolator;
/**
* Returns a discrete interpolator for the given array of values. The returned interpolator maps `t` in `[0, 1 / n)` to values[0],
* `t` in `[1 / n, 2 / n)` to `values[1]`, and so on, where `n = values.length`. In effect, this is a lightweight quantize scale with a fixed domain of [0, 1].
*/
export function interpolateDiscrete<T>(values: T[]): (t: number) => T;
// Sampling ------------------------------------------------------------------
/**
* Returns `n` uniformly-spaced samples from the specified `interpolator`, where `n` is an integer greater than one.
* The first sample is always at `t = 0`, and the last sample is always at `t = 1`.
* This can be useful in generating a fixed number of samples from a given interpolator,
* such as to derive the range of a [quantize scale](https://github.com/d3/d3-scale#quantize-scales) from a [continuous interpolator](https://github.com/d3/d3-scale#interpolateWarm).
*
* Caution: this method will not work with interpolators that do not return defensive copies of their output,
* such as `d3.interpolateArray`, `d3.interpolateDate` and `d3.interpolateObject`. For those interpolators, you must wrap the interpolator and create a copy for each returned value.
*/
export function quantize<T>(interpolator: (t: number) => T, n: number): T[];
// Color Spaces
/**
* Returns an RGB color space interpolator between the two colors `a` and `b` with a configurable gamma. If the gamma is not specified, it defaults to 1.0.
* The colors `a` and `b` need not be in RGB; they will be converted to RGB using [`d3.rgb`](https://github.com/d3/d3-color#rgb). The return value of the interpolator is an RGB string.
*/
export const interpolateRgb: ColorGammaInterpolationFactory;
/**
* Returns a uniform nonrational B-spline interpolator through the specified array of *colors*, which are converted to RGB color space.
* Implicit control points are generated such that the interpolator returns `colors[0]` at `t = 0` and `colors[colors.length - 1]` at `t = 1`.
* Opacity interpolation is not currently supported. See also `d3.interpolateBasis`, and see [d3-scale-chromatic](https://github.com/d3/d3-scale-chromatic) for examples.
*/
export function interpolateRgbBasis(colors: Array<string | ColorCommonInstance>): (t: number) => string;
/**
* Returns a uniform nonrational B-spline interpolator through the specified array of colors, which are converted to RGB color space.
* The control points are implicitly repeated such that the resulting spline has cyclical C² continuity when repeated around `t` in [0,1];
* this is useful, for example, to create cyclical color scales. Opacity interpolation is not currently supported.
* See also `d3.interpolateBasisClosed, and see [d3-scale-chromatic](https://github.com/d3/d3-scale-chromatic) for examples.
*/
export function interpolateRgbBasisClosed(colors: Array<string | ColorCommonInstance>): (t: number) => string;
/**
* Returns an HSL color space interpolator between the two colors *a* and *b*. The colors *a* and *b* need not be in HSL;
* they will be converted to HSL using `d3.hsl`. If either colors hue or saturation is NaN, the opposing colors channel value is used.
* The shortest path between hues is used. The return value of the interpolator is an RGB string.
*/
export function interpolateHsl(a: string | ColorCommonInstance, b: string | ColorCommonInstance): (t: number) => string;
/**
* Like `interpolateHsl`, but does not use the shortest path between hues.
*/
export function interpolateHslLong(
a: string | ColorCommonInstance,
b: string | ColorCommonInstance,
): (t: number) => string;
/**
* Returns a Lab color space interpolator between the two colors *a* and *b*. The colors *a* and *b* need not be in Lab;
* they will be converted to Lab using `d3.lab`. The return value of the interpolator is an RGB string.
*/
export function interpolateLab(a: string | ColorCommonInstance, b: string | ColorCommonInstance): (t: number) => string;
/**
* Returns an HCL color space interpolator between the two colors `a` and `b`. The colors `a` and `b` need not be in HCL;
* they will be converted to HCL using `d3.hcl`. If either colors hue or chroma is NaN, the opposing colors channel value is used.
* The shortest path between hues is used. The return value of the interpolator is an RGB string.
*/
export function interpolateHcl(a: string | ColorCommonInstance, b: string | ColorCommonInstance): (t: number) => string;
/**
* Like `interpolateHcl`, but does not use the shortest path between hues.
*/
export function interpolateHclLong(
a: string | ColorCommonInstance,
b: string | ColorCommonInstance,
): (t: number) => string;
/**
* Returns a Cubehelix color space interpolator between the two colors `a` and `b` using a configurable `gamma`.
* If the gamma is not specified, it defaults to 1.0. The colors `a` and `b` need not be in Cubehelix;
* they will be converted to Cubehelix using [`d3.cubehelix`](https://github.com/d3/d3-color#cubehelix).
* If either colors hue or saturation is NaN, the opposing colors channel value is used. The shortest path between hues is used. The return value of the interpolator is an RGB string.
*/
export const interpolateCubehelix: ColorGammaInterpolationFactory;
/**
* Like `interpolateCubehelix`, but does not use the shortest path between hues.
*/
export const interpolateCubehelixLong: ColorGammaInterpolationFactory;
/**
* Returns an interpolator between the two hue angles `a` and `b`. If either hue is NaN, the opposing value is used.
* The shortest path between hues is used. The return value of the interpolator is a number in `[0, 360)`.
*/
export function interpolateHue(a: number, b: number): (t: number) => number;
// Splines -------------------------------------------------------------------
/**
* Returns a uniform nonrational B-spline interpolator through the specified array of `values`, which must be numbers.
* Implicit control points are generated such that the interpolator returns `values[0]` at `t` = 0 and `values[values.length - 1]` at `t` = 1.
* See also [`d3.curveBasis`](https://github.com/d3/d3-shape#curveBasis).
*/
export function interpolateBasis(splineNodes: number[]): (t: number) => number;
/**
* Returns a uniform nonrational B-spline interpolator through the specified array of `values`, which must be numbers.
* The control points are implicitly repeated such that the resulting one-dimensional spline has cyclical C² continuity when repeated around `t` in [0,1].
* See also [`d3.curveBasisClosed`](https://github.com/d3/d3-shape#curveBasisClosed).
*/
export function interpolateBasisClosed(splineNodes: number[]): (t: number) => number;
// Piecewise -----------------------------------------------------------------
/**
* Returns a piecewise zoom interpolator, composing zoom interpolators for each adjacent pair of zoom view.
* The returned interpolator maps `t` in `[0, 1 / (n - 1)]` to `interpolate(values[0], values[1])`, `t` in `[1 / (n - 1), 2 / (n - 1)]` to `interpolate(values[1], values[2])`,
* and so on, where `n = values.length`. In effect, this is a lightweight linear scale.
* For example, to blend through three different zoom views: `d3.piecewise(d3.interpolateZoom, [[0, 0, 1], [0, 0, 10], [0, 0, 15]])`.
*
* interpolate defaults to d3.interpolate.
*/
export function piecewise(values: ZoomView[]): ZoomInterpolator;
/**
* Returns a piecewise zoom interpolator, composing zoom interpolators for each adjacent pair of zoom view.
* The returned interpolator maps `t` in `[0, 1 / (n - 1)]` to `interpolate(values[0], values[1])`, `t` in `[1 / (n - 1), 2 / (n - 1)]` to `interpolate(values[1], values[2])`,
* and so on, where `n = values.length`. In effect, this is a lightweight linear scale.
* For example, to blend through three different zoom views: `d3.piecewise(d3.interpolateZoom, [[0, 0, 1], [0, 0, 10], [0, 0, 15]])`.
*/
export function piecewise(
interpolate: (a: ZoomView, b: ZoomView) => ZoomInterpolator,
values: ZoomView[],
): ZoomInterpolator;
/**
* Returns a piecewise array interpolator, composing array interpolators for each adjacent pair of arrays.
* The returned interpolator maps `t` in `[0, 1 / (n - 1)]` to `interpolate(values[0], values[1])`, `t` in `[1 / (n - 1), 2 / (n - 1)]` to `interpolate(values[1], values[2])`,
* and so on, where `n = values.length`. In effect, this is a lightweight linear scale.
* For example, to blend through three different arrays: `d3.piecewise(d3.interpolateArray, [[0, 0, 1], [0, 0, 10], [0, 0, 15]])`.
*
* interpolate defaults to d3.interpolate.
*/
export function piecewise<A extends any[]>(values: A[]): ArrayInterpolator<A>;
/**
* Returns a piecewise array interpolator, composing array interpolators for each adjacent pair of arrays.
* The returned interpolator maps `t` in `[0, 1 / (n - 1)]` to `interpolate(values[0], values[1])`, `t` in `[1 / (n - 1), 2 / (n - 1)]` to `interpolate(values[1], values[2])`,
* and so on, where `n = values.length`. In effect, this is a lightweight linear scale.
* For example, to blend through three different arrays: `d3.piecewise(d3.interpolateArray, [[0, 0, 1], [0, 0, 10], [0, 0, 15]])`.
*/
export function piecewise<A extends any[]>(
interpolate: (a: any[], b: A) => ArrayInterpolator<A>,
values: A[],
): ArrayInterpolator<A>;
/**
* Returns a piecewise interpolator, composing interpolators for each adjacent pair of values.
* The returned interpolator maps `t` in `[0, 1 / (n - 1)]` to `interpolate(values[0], values[1])`, `t` in `[1 / (n - 1), 2 / (n - 1)]` to `interpolate(values[1], values[2])`,
* and so on, where `n = values.length`. In effect, this is a lightweight linear scale.
* For example, to blend through red, green and blue: `d3.piecewise(d3.interpolateRgb.gamma(2.2), ["red", "green", "blue"])`.
*
* interpolate defaults to d3.interpolate.
*/
export function piecewise(values: unknown[]): (t: number) => any;
/**
* Returns a piecewise interpolator, composing interpolators for each adjacent pair of values.
* The returned interpolator maps `t` in `[0, 1 / (n - 1)]` to `interpolate(values[0], values[1])`, `t` in `[1 / (n - 1), 2 / (n - 1)]` to `interpolate(values[1], values[2])`,
* and so on, where `n = values.length`. In effect, this is a lightweight linear scale.
* For example, to blend through red, green and blue: `d3.piecewise(d3.interpolateRgb.gamma(2.2), ["red", "green", "blue"])`.
*/
export function piecewise<TData>(interpolate: (a: TData, b: TData) => unknown, values: TData[]): (t: number) => any;

@ -0,0 +1,47 @@
{
"name": "@types/d3-interpolate",
"version": "3.0.4",
"description": "TypeScript definitions for d3-interpolate",
"homepage": "https://github.com/DefinitelyTyped/DefinitelyTyped/tree/master/types/d3-interpolate",
"license": "MIT",
"contributors": [
{
"name": "Tom Wanzek",
"githubUsername": "tomwanzek",
"url": "https://github.com/tomwanzek"
},
{
"name": "Alex Ford",
"githubUsername": "gustavderdrache",
"url": "https://github.com/gustavderdrache"
},
{
"name": "Boris Yankov",
"githubUsername": "borisyankov",
"url": "https://github.com/borisyankov"
},
{
"name": "denisname",
"githubUsername": "denisname",
"url": "https://github.com/denisname"
},
{
"name": "Nathan Bierema",
"githubUsername": "Methuselah96",
"url": "https://github.com/Methuselah96"
}
],
"main": "",
"types": "index.d.ts",
"repository": {
"type": "git",
"url": "https://github.com/DefinitelyTyped/DefinitelyTyped.git",
"directory": "types/d3-interpolate"
},
"scripts": {},
"dependencies": {
"@types/d3-color": "*"
},
"typesPublisherContentHash": "d315fc677144695b44f1447ef7429c9ff248886716c2e9f742d031abcb319115",
"typeScriptVersion": "4.5"
}

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

@ -0,0 +1,15 @@
# Installation
> `npm install --save @types/d3-selection`
# Summary
This package contains type definitions for d3-selection (https://github.com/d3/d3-selection/).
# Details
Files were exported from https://github.com/DefinitelyTyped/DefinitelyTyped/tree/master/types/d3-selection.
### Additional Details
* Last updated: Mon, 07 Oct 2024 22:38:10 GMT
* Dependencies: none
# Credits
These definitions were written by [Tom Wanzek](https://github.com/tomwanzek), [Alex Ford](https://github.com/gustavderdrache), [Boris Yankov](https://github.com/borisyankov), [denisname](https://github.com/denisname), [Nathan Bierema](https://github.com/Methuselah96), and [Ambar Mutha](https://github.com/ambar-arkin).

File diff suppressed because it is too large Load Diff

@ -0,0 +1,50 @@
{
"name": "@types/d3-selection",
"version": "3.0.11",
"description": "TypeScript definitions for d3-selection",
"homepage": "https://github.com/DefinitelyTyped/DefinitelyTyped/tree/master/types/d3-selection",
"license": "MIT",
"contributors": [
{
"name": "Tom Wanzek",
"githubUsername": "tomwanzek",
"url": "https://github.com/tomwanzek"
},
{
"name": "Alex Ford",
"githubUsername": "gustavderdrache",
"url": "https://github.com/gustavderdrache"
},
{
"name": "Boris Yankov",
"githubUsername": "borisyankov",
"url": "https://github.com/borisyankov"
},
{
"name": "denisname",
"githubUsername": "denisname",
"url": "https://github.com/denisname"
},
{
"name": "Nathan Bierema",
"githubUsername": "Methuselah96",
"url": "https://github.com/Methuselah96"
},
{
"name": "Ambar Mutha",
"githubUsername": "ambar-arkin",
"url": "https://github.com/ambar-arkin"
}
],
"main": "",
"types": "index.d.ts",
"repository": {
"type": "git",
"url": "https://github.com/DefinitelyTyped/DefinitelyTyped.git",
"directory": "types/d3-selection"
},
"scripts": {},
"dependencies": {},
"typesPublisherContentHash": "fefb1bdeb8d385251c2a5f0f16c4a924e80663081d09b1d98f79573a4db8ff6c",
"typeScriptVersion": "4.8"
}

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

@ -0,0 +1,15 @@
# Installation
> `npm install --save @types/d3-transition`
# Summary
This package contains type definitions for d3-transition (https://github.com/d3/d3-transition/).
# Details
Files were exported from https://github.com/DefinitelyTyped/DefinitelyTyped/tree/master/types/d3-transition.
### Additional Details
* Last updated: Mon, 07 Oct 2024 22:38:10 GMT
* Dependencies: [@types/d3-selection](https://npmjs.com/package/@types/d3-selection)
# Credits
These definitions were written by [Tom Wanzek](https://github.com/tomwanzek), [Alex Ford](https://github.com/gustavderdrache), [Boris Yankov](https://github.com/borisyankov), [Robert Moura](https://github.com/robertmoura), and [Nathan Bierema](https://github.com/Methuselah96).

@ -0,0 +1,664 @@
// Last module patch version validated against: 3.0.1
import { ArrayLike, BaseType, Selection, ValueFn } from "d3-selection";
/**
* Extend interface 'Selection' by declaration merging with 'd3-selection'
*/
declare module "d3-selection" {
/**
* A D3 Selection of elements.
*
* The first generic "GElement" refers to the type of the selected element(s).
* The second generic "Datum" refers to the type of the datum of a selected element(s).
* The third generic "PElement" refers to the type of the parent element(s) in the D3 selection.
* The fourth generic "PDatum" refers to the type of the datum of the parent element(s).
*/
interface Selection<GElement extends BaseType, Datum, PElement extends BaseType, PDatum> {
/**
* Interrupts the active transition of the specified name on the selected elements, and cancels any pending transitions with the specified name, if any.
* If a name is not specified, null is used.
*
* IMPORTANT: Interrupting a transition on an element has no effect on any transitions on any descendant elements.
* For example, an axis transition consists of multiple independent, synchronized transitions on the descendants of the axis G element
* (the tick lines, the tick labels, the domain path, etc.). To interrupt the axis transition, you must therefore interrupt the descendants.
*
* @param name Name of the transition.
*/
interrupt(name?: string): this;
/**
* Returns a new transition on the given selection with the specified name. If a name is not specified, null is used.
* The new transition is only exclusive with other transitions of the same name.
*
* @param name Name of the transition.
*/
transition(name?: string): Transition<GElement, Datum, PElement, PDatum>;
/**
* Returns a new transition on the given selection.
*
* When using a transition instance, the returned transition has the same id and name as the specified transition.
* If a transition with the same id already exists on a selected element, the existing transition is returned for that element.
* Otherwise, the timing of the returned transition is inherited from the existing transition of the same id on the nearest ancestor of each selected element.
* Thus, this method can be used to synchronize a transition across multiple selections,
* or to re-select a transition for specific elements and modify its configuration.
*
* If the specified transition is not found on a selected node or its ancestors (such as if the transition already ended),
* the default timing parameters are used; however, in a future release, this will likely be changed to throw an error.
*
* @param transition A transition instance.
*/
transition(transition: Transition<BaseType, any, any, any>): Transition<GElement, Datum, PElement, PDatum>;
}
}
/**
* Return the active transition on the specified node with the specified name, if any.
* If no name is specified, null is used. Returns null if there is no such active transition on the specified node.
* This method is useful for creating chained transitions.
*
* The first generic "GElement" refers to the type of element on which the returned active transition was defined. The second generic "Datum" refers to the type of the
* datum, of a selected element on which the transition is defined. The third generic refers to the type of the parent elements in the returned Transition.
* The fourth generic refers to the type of the datum defined on the parent elements in the returned Transition.
*
* @param node Element for which the active transition should be returned.
* @param name Name of the transition.
*/
// eslint-disable-next-line @definitelytyped/no-unnecessary-generics
export function active<GElement extends BaseType, Datum, PElement extends BaseType, PDatum>(
node: GElement,
name?: string,
): Transition<GElement, Datum, PElement, PDatum> | null;
/**
* Interrupts the active transition of the specified name on the specified node, and cancels any pending transitions with the specified name, if any.
* If a name is not specified, null is used.
*
* @param node Element for which the transition should be interrupted.
* @param name Name of the transition to be interrupted. If a name is not specified, null is used.
*/
export function interrupt(node: BaseType, name?: string): void;
/**
* A D3 Transition.
*
* The first generic "GElement" refers to the type of the selected element(s) in the Transition.
* The second generic "Datum" refers to the type of the datum of a selected element(s) in the Transition.
* The third generic "PElement" refers to the type of the parent element(s) in the D3 selection in the Transition.
* The fourth generic "PDatum" refers to the type of the datum of the parent element(s) in the Transition.
*/
export interface Transition<GElement extends BaseType, Datum, PElement extends BaseType, PDatum> {
// Sub-selection -------------------------
/**
* For each selected element, select the first descendant element that matches the specified selector string, if any,
* and returns a transition on the resulting selection. The new transition has the same id, name and timing as this transition;
* however, if a transition with the same id already exists on a selected element,
* the existing transition is returned for that element.
*
* The generic represents the type of the descendant element to be selected.
*
* @param selector CSS selector string
*/
// eslint-disable-next-line @definitelytyped/no-unnecessary-generics
select<DescElement extends BaseType>(selector: string): Transition<DescElement, Datum, PElement, PDatum>;
/**
* For each selected element, select the descendant element returned by the selector function, if any,
* and returns a transition on the resulting selection. The new transition has the same id, name and timing as this transition;
* however, if a transition with the same id already exists on a selected element,
* the existing transition is returned for that element.
*
* The generic represents the type of the descendant element to be selected.
*
* @param selector A selector function, which is evaluated for each selected element, in order, being passed the current datum (d),
* the current index (i), and the current group (nodes), with this as the current DOM element (nodes[i]).
* It must return an element, or null if there is no matching element.
*/
select<DescElement extends BaseType>(
selector: ValueFn<GElement, Datum, DescElement>,
): Transition<DescElement, Datum, PElement, PDatum>;
/**
* For each selected element, select all descendant elements that match the specified selector string, if any,
* and returns a transition on the resulting selection. The new transition has the same id, name and timing as this transition;
* however, if a transition with the same id already exists on a selected element, the existing transition is returned for that element.
*
* The first generic "DescElement" refers to the type of descendant element to be selected. The second generic "OldDatum" refers to the type of the
* datum, of a selected element. This is useful when re-selecting elements with a previously set, know datum type.
*
* @param selector CSS selector string
*/
// eslint-disable-next-line @definitelytyped/no-unnecessary-generics
selectAll<DescElement extends BaseType, OldDatum>(
selector: string,
): Transition<DescElement, OldDatum, GElement, Datum>;
/**
* For each selected element, select all descendant elements returned by the selector function, if any,
* and returns a transition on the resulting selection. The new transition has the same id, name and timing as this transition;
* however, if a transition with the same id already exists on a selected element, the existing transition is returned for that element.
*
* The first generic "DescElement" refers to the type of descendant element to be selected. The second generic "OldDatum" refers to the type of the
* datum, of a selected element. This is useful when re-selecting elements with a previously set, know datum type.
*
* @param selector A selector function which is evaluated for each selected element, in order, being passed the current datum (d),
* the current index (i), and the current group (nodes), with this as the current DOM element (nodes[i]). It must return an array of elements
* (or a pseudo-array, such as a NodeList), or the empty array if there are no matching elements.
*/
// eslint-disable-next-line @definitelytyped/no-unnecessary-generics
selectAll<DescElement extends BaseType, OldDatum>(
selector: ValueFn<GElement, Datum, DescElement[] | ArrayLike<DescElement>>,
): Transition<DescElement, OldDatum, GElement, Datum>;
/**
* For each selected element, selects the first child element that matches the specified selector string, if any, and returns a transition on the resulting selection.
* The selector may be specified either as a selector string or a function.
* If a function, it is evaluated for each selected element, in order, being passed the current datum (d),
* the current index (i), and the current group (nodes), with this as the current DOM element.
* The new transition has the same id, name and timing as this transition;
* however, if a transition with the same id already exists on a selected element, the existing transition is returned for that element.
* This method is equivalent to deriving the selection for this transition via transition.selection,
* creating a subselection via selection.selectChild, and then creating a new transition via selection.transition.
*/
// eslint-disable-next-line @definitelytyped/no-unnecessary-generics
selectChild<DescElement extends BaseType, OldDatum>(
selector?: string | ValueFn<GElement, Datum, DescElement>,
): Transition<DescElement, OldDatum, GElement, Datum>;
/**
* For each selected element, selects all children that match the specified selector string, if any, and returns a transition on the resulting selection.
* The selector may be specified either as a selector string or a function.
* If a function, it is evaluated for each selected element, in order, being passed the current datum (d),
* the current index (i), and the current group (nodes), with this as the current DOM element.
* The new transition has the same id, name and timing as this transition;
* however, if a transition with the same id already exists on a selected element, the existing transition is returned for that element.
* This method is equivalent to deriving the selection for this transition via transition.selection,
* creating a subselection via selection.selectChildren, and then creating a new transition via selection.transition.
*/
// eslint-disable-next-line @definitelytyped/no-unnecessary-generics
selectChildren<DescElement extends BaseType, OldDatum>(
selector?: string | ValueFn<GElement, Datum, DescElement>,
): Transition<DescElement, OldDatum, GElement, Datum>;
/**
* Return the selection corresponding to this transition.
*/
selection(): Selection<GElement, Datum, PElement, PDatum>;
/**
* Returns a new transition on the same selected elements as this transition, scheduled to start when this transition ends.
* The new transition inherits a reference time equal to this transitions time plus its delay and duration.
* The new transition also inherits this transitions name, duration, and easing.
* This method can be used to schedule a sequence of chained transitions.
*
* A delay configured for the new transition will be relative to the previous transition.
*/
transition(): Transition<GElement, Datum, PElement, PDatum>;
// Modifying -------------------------------
/**
* For each selected element, assigns the attribute tween for the attribute with the specified name to the specified target value.
* The starting value of the tween is the attributes value when the transition starts.
* If the target value is null, the attribute is removed when the transition starts.
*/
attr(name: string, value: null | string | number | boolean): this;
/**
* For each selected element, assigns the attribute tween for the attribute with the specified name to the specified target value.
* The starting value of the tween is the attributes value when the transition starts.
* The target value is return value of the value function evaluated for the selected element.
*
* An interpolator is chosen based on the type of the target value, using the following algorithm:
* 1.) If value is a number, use interpolateNumber.
* 2.) If value is a color or a string coercible to a color, use interpolateRgb.
* 3.) Use interpolateString.
*
* To apply a different interpolator, use transition.attrTween.
*
* @param name Name of the attribute.
* @param value A value function which is evaluated for each selected element, in order, being passed the current datum (d),
* the current index (i), and the current group (nodes), with this as the current DOM element (nodes[i]).
* A null value will clear the attribute at the start of the transition.
*/
attr(name: string, value: ValueFn<GElement, Datum, string | number | boolean | null>): this;
/**
* Return the current interpolator factory for attribute with the specified name, or undefined if no such tween exists.
*
* @param name Name of attribute.
*/
attrTween(name: string): ValueFn<GElement, Datum, (this: GElement, t: number) => string> | undefined;
/**
* Remove the previously-assigned attribute tween of the specified name, if any.
*
* @param name Name of attribute.
* @param factory Use null to remove previously-assigned attribute tween.
*/
attrTween(name: string, factory: null): this;
/**
* Assign the attribute tween for the attribute with the specified name to the specified interpolator factory.
* An interpolator factory is a function that returns an interpolator; when the transition starts, the factory is evaluated for each selected element.
* The returned interpolator will then be invoked for each frame of the transition, in order,
* being passed the eased time t, typically in the range [0, 1]. Lastly, the return value of the interpolator will be used to set the attribute value.
* The interpolator must return a string.
*
* @param name Name of attribute.
* @param factory An interpolator factory which is evaluated for each selected element, in order, being passed the current datum (d),
* the current index (i), and the current group (nodes), with this as the current DOM element (nodes[i]). The interpolator factory returns a string interpolator,
* which takes as its argument eased time t, typically in the range [0, 1] and returns the interpolated string.
*/
attrTween(name: string, factory: ValueFn<GElement, Datum, (this: GElement, t: number) => string>): this;
/**
* For each selected element, the style with the specified name will be cleared at the start of the transition.
*
* @param name Name of the style.
* @param value Use null to clear the style.
*/
style(name: string, value: null): this;
/**
* For each selected element, assigns the style tween for the style with the specified name to the specified target value with the
* specified priority.
* The starting value of the tween is the styles inline value if present, and otherwise its computed value.
* The target value is the specified constant value for all elements.
*
* An interpolator is chosen based on the type of the target value, using the following algorithm:
* 1.) If value is a number, use interpolateNumber.
* 2.) If value is a color or a string coercible to a color, use interpolateRgb.
* 3.) Use interpolateString.
*
* To apply a different interpolator, use transition.attrTween.
*
* @param name Name of the style.
* @param value Target value for the style.
* @param priority An optional priority flag, either null or the string important (without the exclamation point)
*/
style(name: string, value: string | number | boolean, priority?: null | "important"): this;
/**
* For each selected element, assigns the style tween for the style with the specified name to the specified target value with the
* specified priority.
* The starting value of the tween is the style's inline value if present, and otherwise its computed value.
* The target value is return value of the value function evaluated for the selected element.
*
* An interpolator is chosen based on the type of the target value, using the following algorithm:
* 1.) If value is a number, use interpolateNumber.
* 2.) If value is a color or a string coercible to a color, use interpolateRgb.
* 3.) Use interpolateString.
*
* To apply a different interpolator, use transition.attrTween.
*
* @param name Name of the style.
* @param value A value function which is evaluated for each selected element, in order, being passed the current datum (d),
* the current index (i), and the current group (nodes), with this as the current DOM element (nodes[i]).
* A null value will clear the style at the start of the transition.
* @param priority An optional priority flag, either null or the string important (without the exclamation point)
*/
style(
name: string,
value: ValueFn<GElement, Datum, string | number | boolean | null>,
priority?: null | "important",
): this;
/**
* Return the current interpolator factory for style with the specified name, or undefined if no such tween exists.
*
* @param name Name of style.
*/
styleTween(name: string): ValueFn<GElement, Datum, (this: GElement, t: number) => string> | undefined;
/**
* Remove the previously-assigned style tween of the specified name, if any.
*
* @param name Name of style.
* @param factory Use null to remove previously-assigned style tween.
*/
styleTween(name: string, factory: null): this;
/**
* Assign the style tween for the style with the specified name to the specified interpolator factory.
* An interpolator factory is a function that returns an interpolator; when the transition starts, the factory is evaluated for each selected element.
* The returned interpolator will then be invoked for each frame of the transition, in order,
* being passed the eased time t, typically in the range [0, 1]. Lastly, the return value of the interpolator will be used to set the style value.
* The interpolator must return a string.
*
* @param name Name of style.
* @param factory An interpolator factory which is evaluated for each selected element, in order, being passed the current datum (d),
* the current index (i), and the current group (nodes), with this as the current DOM element (nodes[i]). The interpolator factory returns a string interpolator,
* which takes as its argument eased time t, typically in the range [0, 1] and returns the interpolated string.
* @param priority An optional priority flag, either null or the string important (without the exclamation point)
*/
styleTween(
name: string,
factory: ValueFn<GElement, Datum, (this: GElement, t: number) => string>,
priority?: null | "important",
): this;
/**
* For each selected element, sets the text content to the specified target value when the transition starts.
* A null value will clear the content.
*/
text(value: null | string | number | boolean): this;
/**
* For each selected element, sets the text content returned by the value function for each selected element when the transition starts.
*
* To interpolate text rather than to set it on start, use transition.textTween (for example) or append a replacement element and cross-fade opacity (for example).
* Text is not interpolated by default because it is usually undesirable.
*
* @param value A value function which is evaluated for each selected element, in order, being passed the current datum (d),
* the current index (i), and the current group (nodes), with this as the current DOM element (nodes[i]).
* A null value will clear the text content at the start of the transition.
*/
text(value: ValueFn<GElement, Datum, string | number | boolean>): this;
/**
* Returns the current interpolator factory for text, or undefined if no such tween exists.
*/
textTween(): ValueFn<GElement, Datum, (this: GElement, t: number) => string> | undefined;
/**
* Removes the previously-assigned text tween, if any
*
* @param factory Use null to remove previously-assigned text tween.
*/
textTween(factory: null): this;
/**
* Assigns the text tween to the specified interpolator factory.
* An interpolator factory is a function that returns an interpolator; when the transition starts, the factory is evaluated for each selected element,
* in order, being passed the current datum d and index i, with the this context as the current DOM element.
* The returned interpolator will then be invoked for each frame of the transition, in order, being passed the eased time t, typically in the range [0, 1].
* Lastly, the return value of the interpolator will be used to set the text.
* The interpolator must return a string.
*
* @param factory An interpolator factory is a function that returns an interpolator; when the transition starts, the factory is evaluated for each selected element,
* in order, being passed the current datum d and index i, with the this context as the current DOM element.
* The returned interpolator will then be invoked for each frame of the transition, in order, being passed the eased time t, typically in the range [0, 1].
* Lastly, the return value of the interpolator will be used to set the text.
* The interpolator must return a string.
*/
textTween(factory: ValueFn<GElement, Datum, (this: GElement, t: number) => string>): this;
/**
* For each selected element, removes the element when the transition ends, as long as the element has no other active or pending transitions.
* If the element has other active or pending transitions, does nothing.
*/
remove(): this;
/**
* Returns the tween with the specified name, or undefined, if no tween was previously assigned to
* that name.
*
* @param name Name of tween.
*/
tween(name: string): ValueFn<GElement, Datum, (this: GElement, t: number) => void> | undefined;
/**
* Removes the tween with the specified name, if a tween was previously assigned to
* that name.
*
* @param name Name of tween.
* @param tweenFn Use null to remove a previously-assigned tween.
*/
tween(name: string, tweenFn: null): this;
/**
* For each selected element, assigns the tween with the specified name with the specified value function.
* The value must be specified as a function that returns a function.
* When the transition starts, the value function is evaluated for each selected element.
* The returned function is then invoked for each frame of the transition, in order,
* being passed the eased time t, typically in the range [0, 1].
*
* @param name Name of tween.
* @param tweenFn A tween function which is evaluated for each selected element, in order, being passed the current datum (d),
* the current index (i), and the current group (nodes), with this as the current DOM element (nodes[i]). The tween function returns a function
* which takes as its argument eased time t, typically in the range [0, 1] and performs the tweening activities for each transition frame.
*/
tween(name: string, tweenFn: ValueFn<GElement, Datum, (this: GElement, t: number) => void>): this;
/**
* Returns a new transition merging this transition with the specified other transition,
* which must have the same id as this transition. The returned transition has the same number of groups,
* the same parents, the same name and the same id as this transition.
* Any missing (null) elements in this transition are filled with the corresponding element, if present (not null), from the other transition.
*
* @param other The transition to be merged.
*/
merge(other: Transition<GElement, Datum, PElement, PDatum>): Transition<GElement, Datum, PElement, PDatum>;
/**
* For each selected element, selects only the elements that match the specified filter, and returns a transition on the resulting selection.
*
* The new transition has the same id, name and timing as this transition; however, if a transition with the same id already exists on a selected element,
* the existing transition is returned for that element.
*
* @param filter A CSS selector string.
*/
filter(filter: string): Transition<GElement, Datum, PElement, PDatum>;
/**
* For each selected element, selects only the elements that match the specified filter, and returns a transition on the resulting selection.
*
* The new transition has the same id, name and timing as this transition; however, if a transition with the same id already exists on a selected element,
* the existing transition is returned for that element.
*
* The generic refers to the type of element which will be selected after applying the filter, i.e. if the element types
* contained in a pre-filter selection are narrowed to a subset as part of the filtering.
*
* @param filter A CSS selector string.
*/
// eslint-disable-next-line @definitelytyped/no-unnecessary-generics
filter<FilteredElement extends BaseType>(filter: string): Transition<FilteredElement, Datum, PElement, PDatum>;
/**
* For each selected element, selects only the elements that match the specified filter, and returns a transition on the resulting selection.
*
* The new transition has the same id, name and timing as this transition; however, if a transition with the same id already exists on a selected element,
* the existing transition is returned for that element.
*
* @param filter A filter function which is evaluated for each selected element, in order, being passed the current datum (d),
* the current index (i), and the current group (nodes), with this as the current DOM element (nodes[i]). The filter function returns a boolean indicating,
* whether the selected element matches.
*/
filter(filter: ValueFn<GElement, Datum, boolean>): Transition<GElement, Datum, PElement, PDatum>;
/**
* For each selected element, selects only the elements that match the specified filter, and returns a transition on the resulting selection.
*
* The new transition has the same id, name and timing as this transition; however, if a transition with the same id already exists on a selected element,
* the existing transition is returned for that element.
*
* The generic refers to the type of element which will be selected after applying the filter, i.e. if the element types
* contained in a pre-filter selection are narrowed to a subset as part of the filtering.
*
* @param filter A filter function which is evaluated for each selected element, in order, being passed the current datum (d),
* the current index (i), and the current group (nodes), with this as the current DOM element (nodes[i]). The filter function returns a boolean indicating,
* whether the selected element matches.
*/
// eslint-disable-next-line @definitelytyped/no-unnecessary-generics
filter<FilteredElement extends BaseType>(
filter: ValueFn<GElement, Datum, boolean>,
): Transition<FilteredElement, Datum, PElement, PDatum>;
// Event Handling -------------------
/**
* Return the currently-assigned listener for the specified event typename on the first (non-null) selected element, if any.
* If multiple typenames are specified, the first matching listener is returned.
*
* @param typenames The typenames is one of the following string event types: start (when the transition starts), end (when the transition ends),
* interrupt (when the transition is interrupted), cancel(when the transition is cancelled).
* Note that these are not native DOM events. The type may be optionally followed by a period (.) and a name;
* the optional name allows multiple callbacks to be registered to receive events of the same type, such as "start.foo"" and "start.bar".
* To specify multiple typenames, separate typenames with spaces, such as "interrupt end"" or "start.foo start.bar".
*/
on(typenames: string): ValueFn<GElement, Datum, void> | undefined;
/**
* Remove all listeners for a given name.
*
* @param typenames Name of the event type for which the listener should be removed. To remove all listeners for a given name use ".foo"
* as the typename, where foo is the name; to remove all listeners with no name, specify "." as the typename.
* @param listener Use null to remove listeners.
*/
on(typenames: string, listener: null): this;
/**
* Add a listener to each selected element for the specified event typenames.
*
* When a specified transition event is dispatched on a selected node, the specified listener will be invoked for each transitioning element.
* Listeners always see the latest datum for their element, but the index is a property of the selection and is fixed when the listener is assigned;
* to update the index, re-assign the listener.
*
* @param typenames The typenames is one of the following string event types: start (when the transition starts), end (when the transition ends),
* interrupt (when the transition is interrupted), cancel(when the transition is cancelled).
* Note that these are not native DOM events. The type may be optionally followed by a period (.) and a name;
* the optional name allows multiple callbacks to be registered to receive events of the same type, such as "start.foo"" and "start.bar".
* To specify multiple typenames, separate typenames with spaces, such as "interrupt end"" or "start.foo start.bar".
* @param listener A listener function which will be evaluated for each selected element, being passed the current datum (d), the current index (i),
* and the current group (nodes), with this as the current DOM element (nodes[i]). Listeners always see the latest datum for their element,
* but the index is a property of the selection and is fixed when the listener is assigned; to update the index, re-assign the listener.
*/
on(typenames: string, listener: ValueFn<GElement, Datum, void>): this;
/**
* Returns a promise that resolves when every selected element finishes transitioning. If any elements transition is cancelled or interrupted, the promise rejects.
*/
end(): Promise<void>;
// Control Flow ----------------------
/**
* Invoke the specified function for each selected element, passing the current datum (d),
* the current index (i), and the current group (nodes), with this as the current DOM element (nodes[i]).
* This method can be used to invoke arbitrary code for each selected element, and is useful for creating a context to access parent and child data simultaneously.
*
* @param func A function which is invoked for each selected element,
* being passed the current datum (d), the current index (i), and the current group (nodes), with this as the current DOM element (nodes[i]).
*/
each(func: ValueFn<GElement, Datum, void>): this;
/**
* Invoke the specified function exactly once, passing in this transition along with any optional arguments.
* Returns this transition.
*
* @param func A function which is passed this transition as the first argument along with any optional arguments.
* @param args List of optional arguments to be passed to the callback function.
*/
call(
func: (transition: Transition<GElement, Datum, PElement, PDatum>, ...args: any[]) => any,
...args: any[]
): this;
/**
* Return true if this transition contains no (non-null) elements.
*/
empty(): boolean;
/**
* Return the first (non-null) element in this transition. If the transition is empty, returns null.
*/
node(): GElement | null;
/**
* Return an array of all (non-null) elements in this transition.
*/
nodes(): GElement[];
/**
* Returns the total number of elements in this transition.
*/
size(): number;
// Transition Configuration ----------------------
/**
* Returns the current value of the delay for the first (non-null) element in the transition.
* This is generally useful only if you know that the transition contains exactly one element.
*/
delay(): number;
/**
* For each selected element, sets the transition delay to the specified value in milliseconds.
* If a delay is not specified, it defaults to zero.
*
* @param milliseconds Number of milliseconds for the delay.
*/
delay(milliseconds: number): this;
/**
* For each selected element, sets the transition delay to the value in milliseconds returned by the
* value function.
*
* @param milliseconds A value function which is evaluated for each selected element, being passed the current datum (d),
* the current index (i), and the current group (nodes), with this as the current DOM element (nodes[i]). The return value is a number
* specifying the delay in milliseconds.
*/
delay(milliseconds: ValueFn<GElement, Datum, number>): this;
/**
* Returns the current value of the duration for the first (non-null) element in the transition.
* This is generally useful only if you know that the transition contains exactly one element.
*/
duration(): number;
/**
* For each selected element, sets the transition duration to the specified value in milliseconds.
* If a duration is not specified, it defaults to 250ms.
*
* @param duration Number of milliseconds for the duration.
*/
duration(milliseconds: number): this;
/**
* For each selected element, sets the transition duration to the value in milliseconds returned by the
* value function.
*
* @param milliseconds A value function which is evaluated for each selected element, being passed the current datum (d),
* the current index (i), and the current group (nodes), with this as the current DOM element (nodes[i]). The return value is a number
* specifying the duration in milliseconds.
*/
duration(milliseconds: ValueFn<GElement, Datum, number>): this;
/**
* Returns the current easing function for the first (non-null) element in the transition.
* This is generally useful only if you know that the transition contains exactly one element.
*/
ease(): (normalizedTime: number) => number;
/**
* Specifies the transition easing function for all selected elements. The value must be specified as a function.
* The easing function is invoked for each frame of the animation, being passed the normalized time t in the range [0, 1];
* it must then return the eased time tʹ which is typically also in the range [0, 1].
* A good easing function should return 0 if t = 0 and 1 if t = 1. If an easing function is not specified,
* it defaults to d3.easeCubic.
*
* @param easingFn An easing function which is passed the normalized time t in the range [0, 1];
* it must then return the eased time tʹ which is typically also in the range [0, 1].
* A good easing function should return 0 if t = 0 and 1 if t = 1.
*/
ease(easingFn: (normalizedTime: number) => number): this;
/**
* Specifies a factory for the transition easing function.
*
* @param factory The factory must be a function.
* It is invoked for each node of the selection, being passed the current datum (d), the current index (i), and the current group (nodes), with this as the current DOM element.
* It must return an easing function.
*/
easeVarying(factory: ValueFn<GElement, Datum, (normalizedTime: number) => number>): this;
}
/**
* Represents the union of the Selection and Transition types for any usages that operate on both.
* Typically used for functions which take in either a selection or transition and set or update attributes.
*/
export type SelectionOrTransition<GElement extends BaseType, Datum, PElement extends BaseType, PDatum> =
| Selection<GElement, Datum, PElement, PDatum>
| Transition<GElement, Datum, PElement, PDatum>;
/**
* Returns a new transition with the specified name. If a name is not specified, null is used.
* The new transition is only exclusive with other transitions of the same name.
*
* The generic "OldDatum" refers to the type of a previously-set datum of the selected element in the Transition.
*
* @param name Name of the transition.
*/
// eslint-disable-next-line @definitelytyped/no-unnecessary-generics
export function transition<OldDatum>(name?: string): Transition<BaseType, OldDatum, null, undefined>;
/**
* Returns a new transition from an existing transition.
*
* When using a transition instance, the returned transition has the same id and name as the specified transition.
*
* The generic "OldDatum" refers to the type of a previously-set datum of the selected element in the Transition.
*
* @param transition A transition instance.
*/
// eslint-disable-next-line @definitelytyped/no-unnecessary-generics
export function transition<OldDatum>(
transition: Transition<BaseType, any, BaseType, any>,
): Transition<BaseType, OldDatum, null, undefined>;

@ -0,0 +1,47 @@
{
"name": "@types/d3-transition",
"version": "3.0.9",
"description": "TypeScript definitions for d3-transition",
"homepage": "https://github.com/DefinitelyTyped/DefinitelyTyped/tree/master/types/d3-transition",
"license": "MIT",
"contributors": [
{
"name": "Tom Wanzek",
"githubUsername": "tomwanzek",
"url": "https://github.com/tomwanzek"
},
{
"name": "Alex Ford",
"githubUsername": "gustavderdrache",
"url": "https://github.com/gustavderdrache"
},
{
"name": "Boris Yankov",
"githubUsername": "borisyankov",
"url": "https://github.com/borisyankov"
},
{
"name": "Robert Moura",
"githubUsername": "robertmoura",
"url": "https://github.com/robertmoura"
},
{
"name": "Nathan Bierema",
"githubUsername": "Methuselah96",
"url": "https://github.com/Methuselah96"
}
],
"main": "",
"types": "index.d.ts",
"repository": {
"type": "git",
"url": "https://github.com/DefinitelyTyped/DefinitelyTyped.git",
"directory": "types/d3-transition"
},
"scripts": {},
"dependencies": {
"@types/d3-selection": "*"
},
"typesPublisherContentHash": "69cd5510811e76132548e17770c16a10a8ffe039c97e6d45b3663749af4591dd",
"typeScriptVersion": "4.8"
}

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

@ -0,0 +1,15 @@
# Installation
> `npm install --save @types/d3-zoom`
# Summary
This package contains type definitions for d3-zoom (https://github.com/d3/d3-zoom/).
# Details
Files were exported from https://github.com/DefinitelyTyped/DefinitelyTyped/tree/master/types/d3-zoom.
### Additional Details
* Last updated: Tue, 07 Nov 2023 15:11:37 GMT
* Dependencies: [@types/d3-interpolate](https://npmjs.com/package/@types/d3-interpolate), [@types/d3-selection](https://npmjs.com/package/@types/d3-selection)
# Credits
These definitions were written by [Tom Wanzek](https://github.com/tomwanzek), [Alex Ford](https://github.com/gustavderdrache), [Boris Yankov](https://github.com/borisyankov), [denisname](https://github.com/denisname), and [Nathan Bierema](https://github.com/Methuselah96).

@ -0,0 +1,611 @@
// Last module patch version validated against: 3.0.0
import { ZoomView } from "d3-interpolate";
import { Selection, TransitionLike, ValueFn } from "d3-selection";
// --------------------------------------------------------------------------
// Shared Type Definitions and Interfaces
// --------------------------------------------------------------------------
/**
* ZoomedElementBaseType serves as an alias for the 'minimal' data type which can be selected
* without 'd3-zoom' (and related code in 'd3-selection') trying to use properties internally which would otherwise not
* be supported.
*/
export type ZoomedElementBaseType = Element;
/**
* Minimal interface for a continuous scale.
* This interface is used as a minimum contract for scale objects
* that can be passed into zoomTransform methods rescaleX and rescaleY
*/
export interface ZoomScale {
domain(): number[] | Date[];
domain(domain: Array<Date | number>): this;
range(): number[];
range(range: number[]): this;
copy(): ZoomScale;
invert(value: number): number | Date;
}
// --------------------------------------------------------------------------
// Zoom Behavior
// --------------------------------------------------------------------------
/**
* A D3 Zoom Behavior
*
* The first generic refers to the type of reference element to which the zoom behavior is attached.
* The second generic refers to the type of the datum of the reference element.
*/
export interface ZoomBehavior<ZoomRefElement extends ZoomedElementBaseType, Datum> extends Function {
/**
* Applies this zoom behavior to the specified selection, binding the necessary event listeners to
* allow panning and zooming, and initializing the zoom transform on each selected element to the identity transform if not already defined. This function is typically not invoked directly,
* and is instead invoked via selection.call.
*
* For details see: {@link https://github.com/d3/d3-zoom#_zoom}
*
* @param selection A D3 selection of elements.
* @param args Optional arguments to be passed in.
*/
(selection: Selection<ZoomRefElement, Datum, any, any>, ...args: any[]): void;
/**
* If selection is a selection, sets the current zoom transform of the selected elements to the specified transform, instantaneously emitting start, zoom and end events.
* If selection is a transition, defines a zoom tween to the specified transform using d3.interpolateZoom, emitting a start event when the transition starts,
* zoom events for each tick of the transition, and then an end event when the transition ends (or is interrupted).
* The transition will attempt to minimize the visual movement around the specified point; if the point is not specified, it defaults to the center of the viewport extent.
*
* This function is typically not invoked directly, and is instead invoked via selection.call or transition.call.
*
* @param selection A selection or a transition.
* @param transform A zoom transform or a function that returns a zoom transform.
* If a function, it is invoked for each selected element, being passed the current event (event) and datum d, with the this context as the current DOM element.
* @param point A two-element array [x, y] or a function that returns such an array.
* If a function, it is invoked for each selected element, being passed the current event (event) and datum d, with the this context as the current DOM element.
*/
transform(
selection: Selection<ZoomRefElement, Datum, any, any> | TransitionLike<ZoomRefElement, Datum>,
transform: ZoomTransform | ((this: ZoomRefElement, event: any, d: Datum) => ZoomTransform),
point?: [number, number] | ((this: ZoomRefElement, event: any, d: Datum) => [number, number]),
): void;
/**
* If selection is a selection, translates the current zoom transform of the selected elements by x and y, such that the new tx1 = tx0 + kx and ty1 = ty0 + ky.
* If selection is a transition, defines a zoom tween translating the current transform.
* This method is a convenience method for zoom.transform.
*
* @param selection A selection or a transition.
* @param x A number or a function that returns a number.
* If a function, it is invoked for each selected element, being passed the current datum d and index i, with the this context as the current DOM element.
* @param y A number or a function that returns a number.
* If a function, it is invoked for each selected element, being passed the current datum d and index i, with the this context as the current DOM element.
*/
translateBy(
selection: Selection<ZoomRefElement, Datum, any, any> | TransitionLike<ZoomRefElement, Datum>,
x: number | ValueFn<ZoomRefElement, Datum, number>,
y: number | ValueFn<ZoomRefElement, Datum, number>,
): void;
/**
* If selection is a selection, translates the current zoom transform of the selected elements such that the given position x,y appears at given point p.
* The new tx = px - kx and ty = py - ky. If p is not specified, it defaults to the center of the viewport extent.
* If selection is a transition, defines a zoom tween translating the current transform. This method is a convenience method for zoom.transform.
*
* Translates the current zoom transform of the selected elements such that the specified position x,y appears at the center of the viewport extent.
* The new tx = cx - kx and ty = cy - ky, where cx,cy is the center.
*
* x is provided as a constant for all elements.
* y is provided as a constant for all elements.
*
* @param selection A selection or a transition.
* @param x A number or a function that returns a number.
* If a function, it is invoked for each selected element, being passed the current datum d and index i, with the this context as the current DOM element.
* @param y A number or a function that returns a number.
* If a function, it is invoked for each selected element, being passed the current datum d and index i, with the this context as the current DOM element.
* @param p A two-element array [px,py] or a function
* If a function, it is invoked for each selected element, being passed the current datum d and index i, with the this context as the current DOM element.
*/
translateTo(
selection: Selection<ZoomRefElement, Datum, any, any> | TransitionLike<ZoomRefElement, Datum>,
x: number | ValueFn<ZoomRefElement, Datum, number>,
y: number | ValueFn<ZoomRefElement, Datum, number>,
p?: [number, number] | ValueFn<ZoomRefElement, Datum, [number, number]>,
): void;
/**
* If selection is a selection, scales the current zoom transform of the selected elements by k, such that the new k = kk.
* The reference point p does move.
* If p is not specified, it defaults to the center of the viewport extent.
* If selection is a transition, defines a zoom tween translating the current transform.
* This method is a convenience method for zoom.transform.
*
* @param selection A selection or a transition.
* @param k Scale factor. A number or a function that returns a number.
* If a function, it is invoked for each selected element, being passed the current datum d and index i, with the this context as the current DOM element.
* @param p A two-element array [px,py] or a function.
* If a function, it is invoked for each selected element, being passed the current datum d and index i, with the this context as the current DOM element.
*/
scaleBy(
selection: Selection<ZoomRefElement, Datum, any, any> | TransitionLike<ZoomRefElement, Datum>,
k: number | ValueFn<ZoomRefElement, Datum, number>,
p?: [number, number] | ValueFn<ZoomRefElement, Datum, [number, number]>,
): void;
/**
* If selection is a selection, scales the current zoom transform of the selected elements to k, such that the new k = k.
* The reference point p does move.
* If p is not specified, it defaults to the center of the viewport extent.
* If selection is a transition, defines a zoom tween translating the current transform.
* This method is a convenience method for zoom.transform.
*
* @param selection: A selection or a transition.
* @param k Scale factor. A number or a function that returns a number.
* If a function, it is invoked for each selected element, being passed the current datum d and index i, with the this context as the current DOM element.
* @param p A two-element array [px,py] or a function.
* If a function, it is invoked for each selected element, being passed the current datum d and index i, with the this context as the current DOM element.
*/
scaleTo(
selection: Selection<ZoomRefElement, Datum, any, any> | TransitionLike<ZoomRefElement, Datum>,
k: number | ValueFn<ZoomRefElement, Datum, number>,
p?: [number, number],
): void;
/**
* Returns the current constraint function.
* The default implementation attempts to ensure that the viewport extent does not go outside the translate extent.
*/
constrain(): (
transform: ZoomTransform,
extent: [[number, number], [number, number]],
translateExtent: [[number, number], [number, number]],
) => ZoomTransform;
/**
* Sets the transform constraint function to the specified function and returns the zoom behavior.
*
* @param constraint A constraint function which returns a transform given the current transform, viewport extent and translate extent.
* The default implementation attempts to ensure that the viewport extent does not go outside the translate extent.
*/
constrain(
constraint: (
transform: ZoomTransform,
extent: [[number, number], [number, number]],
translateExtent: [[number, number], [number, number]],
) => ZoomTransform,
): this;
/**
* Returns the current filter function.
*/
filter(): (this: ZoomRefElement, event: any, datum: Datum) => boolean;
/**
* Sets the filter to the specified filter function and returns the zoom behavior.
* The filter function is invoked in the zoom initiating event handlers of each element to which the zoom behavior was applied.
*
* If the filter returns falsey, the initiating event is ignored and no zoom gesture is started.
* Thus, the filter determines which input events are ignored. The default filter ignores mousedown events on secondary buttons,
* since those buttons are typically intended for other purposes, such as the context menu.
*
* @param filter A filter function which is invoked in the zoom initiating event handlers of each element to which the zoom behavior was applied,
* in order, being passed the current event (event) and datum d, with the this context as the current DOM element.
* The function returns a boolean value.
*/
filter(filter: (this: ZoomRefElement, event: any, datum: Datum) => boolean): this;
/**
* Returns the current touch support detector, which defaults to a function returning true,
* if the "ontouchstart" event is supported on the current element.
*/
touchable(): ValueFn<ZoomRefElement, Datum, boolean>;
/**
* Sets the touch support detector to the specified boolean value and returns the zoom behavior.
*
* Touch event listeners are only registered if the detector returns truthy for the corresponding element when the zoom behavior is applied.
* The default detector works well for most browsers that are capable of touch input, but not all; Chromes mobile device emulator, for example,
* fails detection.
*
* @param touchable A boolean value. true when touch event listeners should be applied to the corresponding element, otherwise false.
*/
touchable(touchable: boolean): this;
/**
* Sets the touch support detector to the specified function and returns the zoom behavior.
*
* Touch event listeners are only registered if the detector returns truthy for the corresponding element when the zoom behavior is applied.
* The default detector works well for most browsers that are capable of touch input, but not all; Chromes mobile device emulator, for example,
* fails detection.
*
* @param touchable A touch support detector function, which returns true when touch event listeners should be applied to the corresponding element.
* The function is evaluated for each selected element to which the zoom behavior was applied, in order, being passed the current datum (d),
* the current index (i), and the current group (nodes), with this as the current DOM element. The function returns a boolean value.
*/
touchable(touchable: ValueFn<ZoomRefElement, Datum, boolean>): this;
/**
* Returns the current wheelDelta function.
*/
wheelDelta(): ValueFn<ZoomRefElement, Datum, number>;
/**
* Sets the wheel delta function to the specified function and returns the zoom behavior. The wheel delta function which is invoked in the wheel event handler
* of each element to which the zoom behavior was applied.
* The value Δ returned by the wheel delta function determines the amount of scaling applied in response to a WheelEvent.
* The scale factor transform.k is multiplied by 2Δ; for example, a Δ of +1 doubles the scale factor, Δ of -1 halves the scale factor.
*
* @param delta Wheel delta function which is invoked in the wheel event handler of each element to which the zoom behavior was applied,
* in order, being passed the wheel event that triggered the handler,
* with this as the current DOM element. The function returns a numeric value.
*/
wheelDelta(delta: ((event: WheelEvent) => number) | number): this;
/**
* Return the current extent accessor, which defaults to [[0, 0], [width, height]] where width is the client width of the element and height is its client height;
* for SVG elements, the nearest ancestor SVG elements width and height is used. In this case,
* the owner SVG element must have defined width and height attributes rather than (for example) relying on CSS properties or the viewBox attribute;
* SVG provides no programmatic method for retrieving the initial viewport size. Alternatively, consider using element.getBoundingClientRect.
* (In Firefox, element.clientWidth and element.clientHeight is zero for SVG elements!)
*/
extent(): (this: ZoomRefElement, datum: Datum) => [[number, number], [number, number]];
/**
* Set the viewport extent to the specified array of points [[x0, y0], [x1, y1]],
* where [x0, y0] is the top-left corner of the viewport and [x1, y1] is the bottom-right corner of the viewport,
* and return this zoom behavior.
*
* The viewport extent affects several functions: the center of the viewport remains fixed during changes by zoom.scaleBy and zoom.scaleTo;
* the viewport center and dimensions affect the path chosen by d3.interpolateZoom; and the viewport extent is needed to enforce the optional translate extent.
*
* @param extent An extent specified as an array of two coordinates.
*/
extent(extent: [[number, number], [number, number]]): this;
/**
* Set the viewport extent to the array of points [[x0, y0], [x1, y1]] returned by the
* extent accessor function, and return this zoom behavior.
* The extent accessor function is evaluated for each element.
*
* [x0, y0] is the top-left corner of the viewport and [x1, y1] is the bottom-right corner of the viewport.
*
* The viewport extent affects several functions: the center of the viewport remains fixed during changes by zoom.scaleBy and zoom.scaleTo;
* the viewport center and dimensions affect the path chosen by d3.interpolateZoom; and the viewport extent is needed to enforce the optional translate extent.
*
* The default is [[0, 0], [width, height]] where width is the client width of the element and height is its client height;
* for SVG elements, the nearest ancestor SVG elements width and height is used.
* In this case, the owner SVG element must have defined width and height attributes rather than (for example) relying on CSS properties or the viewBox attribute;
* SVG provides no programmatic method for retrieving the initial viewport size. Alternatively, consider using element.getBoundingClientRect.
* (In Firefox, element.clientWidth and element.clientHeight is zero for SVG elements!)
*
* @param extent An extent accessor function which is evaluated for each selected element, being passed the current datum d, with the this context as the current DOM element.
* The function returns the extent array.
*/
extent(extent: (this: ZoomRefElement, datum: Datum) => [[number, number], [number, number]]): this;
/**
* Return the current scale extent.
*/
scaleExtent(): [number, number];
/**
* Set the scale extent to the specified array of numbers [k0, k1] where k0 is the minimum allowed scale factor and k1 is the maximum allowed scale factor,
* and return this zoom behavior.
*
* The scale extent restricts zooming in and out. It is enforced on interaction and when using zoom.scaleBy, zoom.scaleTo and zoom.translateBy;
* however, it is not enforced when using zoom.transform to set the transform explicitly.
*
* The default scale extent is [0, infinity].
*
* If the user tries to zoom by wheeling when already at the corresponding limit of the scale extent, the wheel events will be ignored and not initiate a zoom gesture.
* This allows the user to scroll down past a zoomable area after zooming in, or to scroll up after zooming out.
* If you would prefer to always prevent scrolling on wheel input regardless of the scale extent, register a wheel event listener to prevent the browser default behavior
*
* @param extent A scale extent array of two numbers representing the scale boundaries.
*/
scaleExtent(extent: [number, number]): this;
/**
* Return the current translate extent.
*/
translateExtent(): [[number, number], [number, number]];
/**
* Set the translate extent to the specified array of points [[x0, y0], [x1, y1]], where [x0, y0] is the top-left corner of the world and [x1, y1]
* is the bottom-right corner of the world, and return this zoom behavior.
*
* The translate extent restricts panning, and may cause translation on zoom out. It is enforced on interaction and when using zoom.scaleBy, zoom.scaleTo and zoom.translateBy;
* however, it is not enforced when using zoom.transform to set the transform explicitly.
*
* The default scale extent is [[-infinity, infinity], [-infinity, infinity]].
*
* @param extent A translate extent array, i.e. an array of two arrays, each representing a point.
*/
translateExtent(extent: [[number, number], [number, number]]): this;
/**
* Return the current click distance threshold, which defaults to zero.
*/
clickDistance(): number;
/**
* Set the maximum distance that the mouse can move between mousedown and mouseup that will trigger
* a subsequent click event. If at any point between mousedown and mouseup the mouse is greater than or equal to
* distance from its position on mousedown, the click event following mouseup will be suppressed.
*
* @param distance The distance threshold between mousedown and mouseup measured in client coordinates (event.clientX and event.clientY).
* The default is zero.
*/
clickDistance(distance: number): this;
/**
* Return the current tap distance threshold, which defaults to 10.
*/
tapDistance(): number;
/**
* Sets the maximum distance that a double-tap gesture can move between first touchstart and second touchend that will trigger a subsequent double-click event.
*
* @param distance The distance threshold between mousedown and mouseup measured in client coordinates (event.clientX and event.clientY).
* The default is 10.
*/
tapDistance(distance: number): this;
/**
* Get the duration for zoom transitions on double-click and double-tap in milliseconds.
*/
duration(): number;
/**
* Set the duration for zoom transitions on double-click and double-tap to the specified number of milliseconds and returns the zoom behavior.
*
* To disable double-click and double-tap transitions, you can remove the zoom behaviors dblclick event listener after applying the zoom behavior to the selection.
*
* @param duration in milliseconds.
*/
duration(duration: number): this;
/**
* Returns the current interpolation factory, which defaults to d3.interpolateZoom to implement smooth zooming.
*/
interpolate<
// eslint-disable-next-line @definitelytyped/no-unnecessary-generics
InterpolationFactory extends (a: ZoomView, b: ZoomView) => (t: number) => ZoomView,
>(): InterpolationFactory;
/**
* Sets the interpolation factory for zoom transitions to the specified function.
* Use the default d3.interpolateZoom to implement smooth zooming.
* To apply direct interpolation between two views, try d3.interpolate instead.
*
* Each view is defined as an array of three numbers: cx, cy and width. The first two coordinates cx, cy represent the center of the viewport;
* the last coordinate width represents the size of the viewport.
*
* @param interpolatorFactory An interpolator factory to be used to generate interpolators between zooms for transitions.
*/
interpolate(interpolatorFactory: (a: ZoomView, b: ZoomView) => (t: number) => ZoomView): this;
/**
* Return the first currently-assigned listener matching the specified typenames, if any.
*
* @param typenames The typenames is a string containing one or more typename separated by whitespace.
* Each typename is a type, optionally followed by a period (.) and a name, such as "drag.foo"" and "drag.bar";
* the name allows multiple listeners to be registered for the same type. The type must be one of the following:
* start (after zooming begins [such as mousedown]), zoom (after a change to the zoom transform [such as mousemove], or
* end (after an active pointer becomes inactive [such as on mouseup].)
*/
on(typenames: string): ((this: ZoomRefElement, event: any, d: Datum) => void) | undefined;
/**
* Remove the current event listeners for the specified typenames, if any, return the drag behavior.
*
* @param typenames The typenames is a string containing one or more typename separated by whitespace.
* Each typename is a type, optionally followed by a period (.) and a name, such as "drag.foo"" and "drag.bar";
* the name allows multiple listeners to be registered for the same type. The type must be one of the following:
* start (after zooming begins [such as mousedown]), zoom (after a change to the zoom transform [such as mousemove], or
* end (after an active pointer becomes inactive [such as on mouseup].)
* @param listener Use null to remove the listener.
*/
on(typenames: string, listener: null): this;
/**
* Set the event listener for the specified typenames and return the zoom behavior.
* If an event listener was already registered for the same type and name,
* the existing listener is removed before the new listener is added.
* When a specified event is dispatched, each listener will be invoked with the same context and arguments as selection.on listeners.
*
* @param typenames The typenames is a string containing one or more typename separated by whitespace.
* Each typename is a type, optionally followed by a period (.) and a name, such as "drag.foo"" and "drag.bar";
* the name allows multiple listeners to be registered for the same type. The type must be one of the following:
* start (after zooming begins [such as mousedown]), zoom (after a change to the zoom transform [such as mousemove], or
* end (after an active pointer becomes inactive [such as on mouseup].)
* @param listener An event listener function which is evaluated for each selected element,
* in order, being passed the current event (event) and datum d, with the this context as the current DOM element.
*/
on(typenames: string, listener: (this: ZoomRefElement, event: any, d: Datum) => void): this;
}
/**
* Creates a new zoom behavior. The returned behavior, zoom, is both an object and a function,
* and is typically applied to selected elements via selection.call.
*
* The first generic refers to the type of reference element to which the zoom behavior is attached.
* The second generic refers to the type of the datum of the reference element.
*/
// eslint-disable-next-line @definitelytyped/no-unnecessary-generics
export function zoom<ZoomRefElement extends ZoomedElementBaseType, Datum>(): ZoomBehavior<ZoomRefElement, Datum>;
// --------------------------------------------------------------------------
// Zoom Event
// --------------------------------------------------------------------------
/**
* A D3 Zoom Event
*
* The first generic refers to the type of reference element to which the zoom behavior is attached.
* The second generic refers to the type of the datum of the reference element.
*/
export interface D3ZoomEvent<ZoomRefElement extends ZoomedElementBaseType, Datum> {
/**
* The ZoomBehavior associated with the event
*/
target: ZoomBehavior<ZoomRefElement, Datum>;
/**
* The event type for the zoom event
*/
type: "start" | "zoom" | "end" | string; // Leave failsafe string type for cases like 'zoom.foo'
/**
* The current zoom transform
*/
transform: ZoomTransform;
/**
* The underlying input event, such as mousemove or touchmove.
*/
sourceEvent: any;
}
// --------------------------------------------------------------------------
// Zoom Transforms
// --------------------------------------------------------------------------
/**
* A zoom transform
*
* The zoom behavior stores the zoom state on the element to which the zoom behavior was applied, not on the zoom behavior itself.
* This is because the zoom behavior can be applied to many elements simultaneously, and each element can be zoomed independently.
* The zoom state can change either on user interaction or programmatically via zoom.transform.
*
* To retrieve the zoom state, use event.transform on the current zoom event within a zoom event listener (see zoom.on), or use d3.zoomTransform for a given node.
* The latter is particularly useful for modifying the zoom state programmatically,
* say to implement buttons for zooming in and out.
*
* For details see {@link https://github.com/d3/d3-zoom#zoom-transforms}
*/
export class ZoomTransform {
/**
* Returns a transform with scale k and translation (x, y).
*/
constructor(k: number, x: number, y: number);
/**
* The translation amount tx along the x-axis.
* This property should be considered read-only; instead of mutating a transform,
* use transform.scale and transform.translate to derive a new transform.
* Also see zoom.scaleBy, zoom.scaleTo and zoom.translateBy for convenience methods on the zoom behavior.
*/
readonly x: number;
/**
* The translation amount ty along the y-axis
* This property should be considered read-only; instead of mutating a transform,
* use transform.scale and transform.translate to derive a new transform.
* Also see zoom.scaleBy, zoom.scaleTo and zoom.translateBy for convenience methods on the zoom behavior.
*/
readonly y: number;
/**
* The scale factor k.
* This property should be considered read-only; instead of mutating a transform,
* use transform.scale and transform.translate to derive a new transform.
* Also see zoom.scaleBy, zoom.scaleTo and zoom.translateBy for convenience methods on the zoom behavior.
*/
readonly k: number;
/**
* Return the transformation of the specified point which is a two-element array of numbers [x, y].
* The returned point is equal to [xk + tx, yk + ty].
*
* @param point Point coordinates [x, y]
*/
apply(point: [number, number]): [number, number];
/**
* Return the transformation of the specified x-coordinate, xk + tx.
*
* @param x Value of x-coordinate.
*/
applyX(x: number): number;
/**
* Return the transformation of the specified y-coordinate, yk + ty.
*
* @param y Value of y-coordinate.
*/
applyY(y: number): number;
/**
* Return the inverse transformation of the specified point which is a two-element array of numbers [x, y].
* The returned point is equal to [(x - tx) / k, (y - ty) / k].
*
* @param point Point coordinates [x, y]
*/
invert(point: [number, number]): [number, number];
/**
* Return the inverse transformation of the specified x-coordinate, (x - tx) / k.
*
* @param x Value of x-coordinate.
*/
invertX(x: number): number;
/**
* Return the inverse transformation of the specified y-coordinate, (y - ty) / k.
*
* @param y Value of y-coordinate.
*/
invertY(y: number): number;
/**
* Returns a copy of the continuous scale x whose domain is transformed.
* This is implemented by first applying the inverse x-transform on the scales range,
* and then applying the inverse scale to compute the corresponding domain
*
* The scale x must use d3.interpolateNumber; do not use continuous.rangeRound as this
* reduces the accuracy of continuous.invert and can lead to an inaccurate rescaled domain.
* This method does not modify the input scale x; x thus represents the untransformed scale,
* while the returned scale represents its transformed view.
*
* @param xScale A continuous scale for x-dimension.
*/
rescaleX<S extends ZoomScale>(xScale: S): S;
/**
* Returns a copy of the continuous scale y whose domain is transformed.
* This is implemented by first applying the inverse y-transform on the scales range,
* and then applying the inverse scale to compute the corresponding domain
*
* The scale y must use d3.interpolateNumber; do not use continuous.rangeRound as this
* reduces the accuracy of continuous.invert and can lead to an inaccurate rescaled domain.
* This method does not modify the input scale x; x thus represents the untransformed scale,
* while the returned scale represents its transformed view.
*
* @param yScale A continuous scale for y-dimension.
*/
rescaleY<S extends ZoomScale>(yScale: S): S;
/**
* Return a transform whose scale k1 is equal to k0 × k, where k0 is this transforms scale.
*
* @param k A scale factor.
*/
scale(k: number): ZoomTransform;
/**
* Return a string representing the SVG transform corresponding to this transform.
*/
toString(): string;
/**
* Returns a transform whose translation tx1 and ty1 is equal to tx0 + tkx and ty0 + tky,
* where tx0 and ty0 is this transforms translation and tk is this transforms scale.
*
* @param x Amount of translation in x-direction.
* @param y Amount of translation in y-direction.
*/
translate(x: number, y: number): ZoomTransform;
}
/**
* Returns the current transform for the specified node. Note that node should typically be a DOM element, and not a selection.
* (A selection may consist of multiple nodes, in different states, and this function only returns a single transform.) If you have a selection, call selection.node first.
* In the context of an event listener, the node is typically the element that received the input event (which should be equal to event.transform), "this".
* Internally, an elements transform is stored as element.__zoom; however, you should use this method rather than accessing it directly.
* If the given node has no defined transform, returns the identity transformation.
* The returned transform represents a two-dimensional transformation matrix
*
* For details see {@link https://github.com/d3/d3-zoom#zoom-transforms}
*
* @param node An element for which to retrieve its current zoom transform.
*/
export function zoomTransform(node: ZoomedElementBaseType): ZoomTransform;
/**
* The identity transform, where k = 1, tx = ty = 0.
*/
export const zoomIdentity: ZoomTransform;

@ -0,0 +1,48 @@
{
"name": "@types/d3-zoom",
"version": "3.0.8",
"description": "TypeScript definitions for d3-zoom",
"homepage": "https://github.com/DefinitelyTyped/DefinitelyTyped/tree/master/types/d3-zoom",
"license": "MIT",
"contributors": [
{
"name": "Tom Wanzek",
"githubUsername": "tomwanzek",
"url": "https://github.com/tomwanzek"
},
{
"name": "Alex Ford",
"githubUsername": "gustavderdrache",
"url": "https://github.com/gustavderdrache"
},
{
"name": "Boris Yankov",
"githubUsername": "borisyankov",
"url": "https://github.com/borisyankov"
},
{
"name": "denisname",
"githubUsername": "denisname",
"url": "https://github.com/denisname"
},
{
"name": "Nathan Bierema",
"githubUsername": "Methuselah96",
"url": "https://github.com/Methuselah96"
}
],
"main": "",
"types": "index.d.ts",
"repository": {
"type": "git",
"url": "https://github.com/DefinitelyTyped/DefinitelyTyped.git",
"directory": "types/d3-zoom"
},
"scripts": {},
"dependencies": {
"@types/d3-interpolate": "*",
"@types/d3-selection": "*"
},
"typesPublisherContentHash": "19cbff2a5c60ea95d9eaa6d3d1a4ec6f8e60ec8a8560cf1bd2e359f057335776",
"typeScriptVersion": "4.5"
}

@ -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.

@ -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).

@ -0,0 +1,494 @@
/* 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;
}
.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__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%;
}

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

@ -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"}

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

@ -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"}

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

@ -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"}

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

@ -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"}

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

@ -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"}

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

@ -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"}

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

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

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

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

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

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

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

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

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

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

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

@ -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"}

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

@ -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"}

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

@ -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,QAAa,EACb,WAAe,GAChB,EAAE,YAAY,CAAC,QAAQ,CAAC,2CAsHxB;kBAhJQ,gBAAgB;;;AAoJzB;;;;;;;;;;;;;;;;;;;GAmBG;AACH,eAAO,MAAM,OAAO,EAA6B,OAAO,gBAAgB,CAAC"}

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

@ -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"}

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

@ -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"}

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

@ -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,cAAc,SAAS,CAAC"}

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

@ -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"}

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

@ -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"}

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

@ -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"}

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

@ -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"}

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

@ -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"}

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

@ -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"}

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

@ -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"}

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

@ -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"}

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

@ -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"}

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

@ -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"}

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

@ -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"}

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

@ -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"}

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

@ -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"}

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

@ -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"}

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

@ -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"}

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

@ -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"}

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

@ -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"}

@ -0,0 +1,15 @@
import { 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

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

Loading…
Cancel
Save