(render: (props: PropsWithoutRef, ref: Ref) => JSX.Element): (props: P & RefAttributes) => JSX.Element;
+//# sourceMappingURL=general.d.ts.map
\ No newline at end of file
diff --git a/frontend/node_modules/.pnpm/@xyflow+react@12.11.2_@types+react-dom@19.2.4_@types+react@19.2.18__@types+react@19.2.1_4449a809c64647816bd89ebca5fbd811/node_modules/@xyflow/react/dist/umd/utils/general.d.ts.map b/frontend/node_modules/.pnpm/@xyflow+react@12.11.2_@types+react-dom@19.2.4_@types+react@19.2.18__@types+react@19.2.1_4449a809c64647816bd89ebca5fbd811/node_modules/@xyflow/react/dist/umd/utils/general.d.ts.map
new file mode 100644
index 0000000000000000000000000000000000000000..f30bfc8a2a6aa9cacd1a0dd6a389c903ed87997e
--- /dev/null
+++ b/frontend/node_modules/.pnpm/@xyflow+react@12.11.2_@types+react-dom@19.2.4_@types+react@19.2.18__@types+react@19.2.1_4449a809c64647816bd89ebca5fbd811/node_modules/@xyflow/react/dist/umd/utils/general.d.ts.map
@@ -0,0 +1 @@
+{"version":3,"file":"general.d.ts","sourceRoot":"","sources":["../../src/utils/general.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,GAAG,EAAE,KAAK,aAAa,EAAc,GAAG,EAAE,eAAe,EAAE,MAAM,OAAO,CAAC;AAGvF,OAAO,KAAK,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,UAAU,CAAC;AAE3C;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,eAAO,MAAM,MAAM,GAAI,QAAQ,SAAS,IAAI,GAAG,IAAI,EAAE,SAAS,OAAO,KAAG,OAAO,IAAI,QACpD,CAAC;AAEhC;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,eAAO,MAAM,MAAM,GAAI,QAAQ,SAAS,IAAI,GAAG,IAAI,EAAE,SAAS,OAAO,KAAG,OAAO,IAAI,QACpD,CAAC;AAGhC,wBAAgB,eAAe,CAAC,CAAC,EAAE,CAAC,GAAG,EAAE,EACvC,MAAM,EAAE,CAAC,KAAK,EAAE,eAAe,CAAC,CAAC,CAAC,EAAE,GAAG,EAAE,GAAG,CAAC,CAAC,CAAC,KAAK,GAAG,CAAC,OAAO,GAC9D,CAAC,KAAK,EAAE,CAAC,GAAG,aAAa,CAAC,CAAC,CAAC,KAAK,GAAG,CAAC,OAAO,CAG9C"}
\ No newline at end of file
diff --git a/frontend/node_modules/.pnpm/@xyflow+react@12.11.2_@types+react-dom@19.2.4_@types+react@19.2.18__@types+react@19.2.1_4449a809c64647816bd89ebca5fbd811/node_modules/@xyflow/react/dist/umd/utils/index.d.ts b/frontend/node_modules/.pnpm/@xyflow+react@12.11.2_@types+react-dom@19.2.4_@types+react@19.2.18__@types+react@19.2.1_4449a809c64647816bd89ebca5fbd811/node_modules/@xyflow/react/dist/umd/utils/index.d.ts
new file mode 100644
index 0000000000000000000000000000000000000000..2e6637cb32b5dcd04679ee86a8e764afb170f515
--- /dev/null
+++ b/frontend/node_modules/.pnpm/@xyflow+react@12.11.2_@types+react-dom@19.2.4_@types+react@19.2.18__@types+react@19.2.1_4449a809c64647816bd89ebca5fbd811/node_modules/@xyflow/react/dist/umd/utils/index.d.ts
@@ -0,0 +1,4 @@
+export * from './changes';
+export * from './edges';
+export * from './general';
+//# sourceMappingURL=index.d.ts.map
\ No newline at end of file
diff --git a/frontend/node_modules/.pnpm/@xyflow+react@12.11.2_@types+react-dom@19.2.4_@types+react@19.2.18__@types+react@19.2.1_4449a809c64647816bd89ebca5fbd811/node_modules/@xyflow/react/dist/umd/utils/index.d.ts.map b/frontend/node_modules/.pnpm/@xyflow+react@12.11.2_@types+react-dom@19.2.4_@types+react@19.2.18__@types+react@19.2.1_4449a809c64647816bd89ebca5fbd811/node_modules/@xyflow/react/dist/umd/utils/index.d.ts.map
new file mode 100644
index 0000000000000000000000000000000000000000..f2317a54ae070ddbeb586102999468408e82b669
--- /dev/null
+++ b/frontend/node_modules/.pnpm/@xyflow+react@12.11.2_@types+react-dom@19.2.4_@types+react@19.2.18__@types+react@19.2.1_4449a809c64647816bd89ebca5fbd811/node_modules/@xyflow/react/dist/umd/utils/index.d.ts.map
@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/utils/index.ts"],"names":[],"mappings":"AAAA,cAAc,WAAW,CAAC;AAC1B,cAAc,SAAS,CAAC;AACxB,cAAc,WAAW,CAAC"}
\ No newline at end of file
diff --git a/frontend/node_modules/.pnpm/@xyflow+react@12.11.2_@types+react-dom@19.2.4_@types+react@19.2.18__@types+react@19.2.1_4449a809c64647816bd89ebca5fbd811/node_modules/@xyflow/react/package.json b/frontend/node_modules/.pnpm/@xyflow+react@12.11.2_@types+react-dom@19.2.4_@types+react@19.2.18__@types+react@19.2.1_4449a809c64647816bd89ebca5fbd811/node_modules/@xyflow/react/package.json
new file mode 100644
index 0000000000000000000000000000000000000000..7022c7c2710ff10337b0bc79f258ed71dee6b66a
--- /dev/null
+++ b/frontend/node_modules/.pnpm/@xyflow+react@12.11.2_@types+react-dom@19.2.4_@types+react@19.2.18__@types+react@19.2.1_4449a809c64647816bd89ebca5fbd811/node_modules/@xyflow/react/package.json
@@ -0,0 +1,108 @@
+{
+ "name": "@xyflow/react",
+ "version": "12.11.2",
+ "description": "React Flow - A highly customizable React library for building node-based editors and interactive flow charts.",
+ "keywords": [
+ "react",
+ "node-based UI",
+ "graph",
+ "diagram",
+ "workflow",
+ "react-flow",
+ "xyflow"
+ ],
+ "repository": {
+ "type": "git",
+ "url": "https://github.com/xyflow/xyflow.git",
+ "directory": "packages/react"
+ },
+ "homepage": "https://reactflow.dev",
+ "bugs": {
+ "url": "https://github.com/xyflow/xyflow/issues"
+ },
+ "files": [
+ "dist"
+ ],
+ "source": "src/index.ts",
+ "main": "dist/umd/index.js",
+ "module": "dist/esm/index.js",
+ "types": "dist/esm/index.d.ts",
+ "exports": {
+ "./package.json": "./package.json",
+ ".": {
+ "node": {
+ "types": "./dist/esm/index.d.ts",
+ "module": "./dist/esm/index.js",
+ "require": "./dist/umd/index.js",
+ "import": "./dist/esm/index.mjs"
+ },
+ "browser": {
+ "import": "./dist/esm/index.js",
+ "require": "./dist/umd/index.js"
+ },
+ "default": "./dist/esm/index.js"
+ },
+ "./dist/base.css": "./dist/base.css",
+ "./dist/style.css": "./dist/style.css"
+ },
+ "sideEffects": [
+ "*.css"
+ ],
+ "license": "MIT",
+ "publishConfig": {
+ "access": "public"
+ },
+ "dependencies": {
+ "classcat": "^5.0.3",
+ "zustand": "^4.4.0",
+ "@xyflow/system": "0.0.79"
+ },
+ "peerDependencies": {
+ "@types/react": ">=17",
+ "@types/react-dom": ">=17",
+ "react": ">=17",
+ "react-dom": ">=17"
+ },
+ "peerDependenciesMeta": {
+ "@types/react": {
+ "optional": true
+ },
+ "@types/react-dom": {
+ "optional": true
+ }
+ },
+ "devDependencies": {
+ "@types/node": "^18.7.16",
+ "@types/react": ">=17",
+ "@types/react-dom": ">=17",
+ "autoprefixer": "^10.4.15",
+ "cssnano": "^6.0.1",
+ "postcss": "^8.4.21",
+ "postcss-cli": "^11.0.0",
+ "postcss-combine-duplicated-selectors": "^10.0.3",
+ "postcss-import": "^15.1.0",
+ "postcss-nested": "^6.0.0",
+ "postcss-rename": "^0.6.1",
+ "react": "^18.2.0",
+ "typescript": "5.4.5",
+ "@xyflow/rollup-config": "0.0.0",
+ "@xyflow/eslint-config": "0.0.1",
+ "@xyflow/tsconfig": "0.0.0"
+ },
+ "rollup": {
+ "globals": {
+ "classcat": "cc",
+ "zustand": "zustand",
+ "zustand/shallow": "zustandShallow"
+ },
+ "name": "ReactFlow"
+ },
+ "scripts": {
+ "dev": "concurrently \"rollup --config node:@xyflow/rollup-config --watch\" pnpm:css-watch",
+ "build": "rollup --config node:@xyflow/rollup-config --environment NODE_ENV:production && npm run css",
+ "css": "postcss src/styles/{base,style}.css --config ./../../tooling/postcss-config/ --dir dist ",
+ "css-watch": "pnpm css --watch",
+ "lint": "eslint --ext .js,.jsx,.ts,.tsx src",
+ "typecheck": "tsc --noEmit"
+ }
+}
\ No newline at end of file
diff --git a/frontend/node_modules/.pnpm/@xyflow+system@0.0.79/node_modules/@xyflow/system/LICENSE b/frontend/node_modules/.pnpm/@xyflow+system@0.0.79/node_modules/@xyflow/system/LICENSE
new file mode 100644
index 0000000000000000000000000000000000000000..072ff46d7c23dd8e18ccba11aa6563f14e524312
--- /dev/null
+++ b/frontend/node_modules/.pnpm/@xyflow+system@0.0.79/node_modules/@xyflow/system/LICENSE
@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2019-2025 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.
diff --git a/frontend/node_modules/.pnpm/@xyflow+system@0.0.79/node_modules/@xyflow/system/README.md b/frontend/node_modules/.pnpm/@xyflow+system@0.0.79/node_modules/@xyflow/system/README.md
new file mode 100644
index 0000000000000000000000000000000000000000..da2f2e67777931ab411bd4c8dcf4c84b04d5751f
--- /dev/null
+++ b/frontend/node_modules/.pnpm/@xyflow+system@0.0.79/node_modules/@xyflow/system/README.md
@@ -0,0 +1,62 @@
+# @xyflow/system
+
+Core system utilities powering [React Flow](https://reactflow.dev) and [Svelte Flow](https://svelteflow.dev).
+
+> **Note:** This package is designed as a shared vanilla utility layer for React Flow and Svelte Flow. It is not intended for use with unrelated libraries.
+
+## Installation
+
+```sh
+pnpm add @xyflow/system
+```
+
+## What is this package?
+
+`@xyflow/system` provides core, framework-agnostic helpers and types for building node-based editors and flow diagrams. It contains the logic and utilities that are shared between React Flow and Svelte Flow, such as edge path calculations, pan/zoom, node dragging, and more.
+
+## Features
+
+- **Pan & Zoom (`XYPanZoom`)**: Utilities for adding interactive pan and zoom to your canvas.
+- **Dragging (`XYDrag`)**: Helpers for node and selection dragging.
+- **Handles/Connections (`XYHandle`)**: Logic for drawing and managing connection lines between nodes.
+- **Minimap (`XYMiniMap`)**: Interactive minimap utilities for overview and navigation.
+- **Edge Utilities**: Functions for SVG edge path creation (bezier, straight, step, smoothstep, etc.).
+- **Store Utilities**: Helpers for managing and updating flow state.
+- **DOM Utilities**: Functions for DOM measurements and interactions.
+- **Marker Utilities**: Helpers for SVG markers on edges.
+- **Graph Utilities**: Functions for working with nodes, edges, and graph structure.
+- **General Utilities**: Miscellaneous helpers used throughout the system.
+- **Types & Constants**: Shared types, enums, and constants for consistent data structures.
+
+## Usage
+
+You can import any utility, type, or helper directly from the package:
+
+```ts
+import { getBezierPath, getConnectedEdges, Position, XYPanZoom } from '@xyflow/system';
+```
+
+### Example: Bezier Edge Path Creation
+
+```ts
+import { getBezierPath, Position } from '@xyflow/system';
+
+const [path, labelX, labelY] = getBezierPath({
+ sourceX: 0,
+ sourceY: 20,
+ sourcePosition: Position.Right,
+ targetX: 150,
+ targetY: 100,
+ targetPosition: Position.Left,
+});
+```
+
+## API Reference
+
+There is currently no dedicated API documentation for this package. For details on available utilities, types, and helpers, please refer to the [source code](./src) or check out the [React Flow documentation](https://reactflow.dev/api-reference/) where we are documenting a lot of stuff from this package.
+
+## Contributing
+
+See the main [xyflow repository](https://github.com/xyflow/xyflow) for contribution guidelines.
+
+
diff --git a/frontend/node_modules/.pnpm/@xyflow+system@0.0.79/node_modules/@xyflow/system/dist/esm/constants.d.ts b/frontend/node_modules/.pnpm/@xyflow+system@0.0.79/node_modules/@xyflow/system/dist/esm/constants.d.ts
new file mode 100644
index 0000000000000000000000000000000000000000..c38fe581563900cca2bdafc8311f3e9e1a175fad
--- /dev/null
+++ b/frontend/node_modules/.pnpm/@xyflow+system@0.0.79/node_modules/@xyflow/system/dist/esm/constants.d.ts
@@ -0,0 +1,44 @@
+import { CoordinateExtent, HandleType } from './types';
+export declare const errorMessages: {
+ error001: (lib?: string) => string;
+ error002: () => string;
+ error003: (nodeType: string) => string;
+ error004: () => string;
+ error005: () => string;
+ error006: () => string;
+ error007: (id: string) => string;
+ error009: (type: string) => string;
+ error008: (handleType: HandleType, { id, sourceHandle, targetHandle }: {
+ id: string;
+ sourceHandle: string | null;
+ targetHandle: string | null;
+ }) => string;
+ error010: () => string;
+ error011: (edgeType: string) => string;
+ error012: (id: string) => string;
+ error013: (lib?: string) => string;
+ error014: () => string;
+ error015: () => string;
+ error016: (id: string) => string;
+};
+export declare const infiniteExtent: CoordinateExtent;
+export declare const elementSelectionKeys: string[];
+export declare const defaultAriaLabelConfig: {
+ 'node.a11yDescription.default': string;
+ 'node.a11yDescription.keyboardDisabled': string;
+ 'node.a11yDescription.ariaLiveMessage': ({ direction, x, y }: {
+ direction: string;
+ x: number;
+ y: number;
+ }) => string;
+ 'edge.a11yDescription.default': string;
+ 'controls.ariaLabel': string;
+ 'controls.zoomIn.ariaLabel': string;
+ 'controls.zoomOut.ariaLabel': string;
+ 'controls.fitView.ariaLabel': string;
+ 'controls.interactive.ariaLabel': string;
+ 'minimap.ariaLabel': string;
+ 'handle.ariaLabel': string;
+};
+export type AriaLabelConfig = typeof defaultAriaLabelConfig;
+//# sourceMappingURL=constants.d.ts.map
\ No newline at end of file
diff --git a/frontend/node_modules/.pnpm/@xyflow+system@0.0.79/node_modules/@xyflow/system/dist/esm/constants.d.ts.map b/frontend/node_modules/.pnpm/@xyflow+system@0.0.79/node_modules/@xyflow/system/dist/esm/constants.d.ts.map
new file mode 100644
index 0000000000000000000000000000000000000000..45d4d505361eb5a73f514150d2ee034419b4e055
--- /dev/null
+++ b/frontend/node_modules/.pnpm/@xyflow+system@0.0.79/node_modules/@xyflow/system/dist/esm/constants.d.ts.map
@@ -0,0 +1 @@
+{"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../src/constants.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAEvD,eAAO,MAAM,aAAa;qBACR,MAAM;;yBAID,MAAM;;;;mBAIZ,MAAM;qBACJ,MAAM;2BAET,UAAU,sCACc;QAAE,EAAE,EAAE,MAAM,CAAC;QAAC,YAAY,EAAE,MAAM,GAAG,IAAI,CAAC;QAAC,YAAY,EAAE,MAAM,GAAG,IAAI,CAAA;KAAE;;yBAMzF,MAAM;mBACZ,MAAM;qBAEL,MAAM;;;mBAMP,MAAM;CAEtB,CAAC;AAEF,eAAO,MAAM,cAAc,EAAE,gBAG5B,CAAC;AAEF,eAAO,MAAM,oBAAoB,UAA2B,CAAC;AAE7D,eAAO,MAAM,sBAAsB;;;kEAK6B;QAAE,SAAS,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAA;KAAE;;;;;;;;;CAiB1G,CAAC;AAEF,MAAM,MAAM,eAAe,GAAG,OAAO,sBAAsB,CAAC"}
\ No newline at end of file
diff --git a/frontend/node_modules/.pnpm/@xyflow+system@0.0.79/node_modules/@xyflow/system/dist/esm/index.d.ts b/frontend/node_modules/.pnpm/@xyflow+system@0.0.79/node_modules/@xyflow/system/dist/esm/index.d.ts
new file mode 100644
index 0000000000000000000000000000000000000000..74847ff6f2b8aa67bb7e1c82eceef48a941fc30f
--- /dev/null
+++ b/frontend/node_modules/.pnpm/@xyflow+system@0.0.79/node_modules/@xyflow/system/dist/esm/index.d.ts
@@ -0,0 +1,9 @@
+export * from './constants';
+export * from './types';
+export * from './utils';
+export * from './xydrag';
+export * from './xyhandle';
+export * from './xyminimap';
+export * from './xypanzoom';
+export * from './xyresizer';
+//# sourceMappingURL=index.d.ts.map
\ No newline at end of file
diff --git a/frontend/node_modules/.pnpm/@xyflow+system@0.0.79/node_modules/@xyflow/system/dist/esm/index.d.ts.map b/frontend/node_modules/.pnpm/@xyflow+system@0.0.79/node_modules/@xyflow/system/dist/esm/index.d.ts.map
new file mode 100644
index 0000000000000000000000000000000000000000..804a5e32ca250ff5f2b59df01572bdfa4eb00603
--- /dev/null
+++ b/frontend/node_modules/.pnpm/@xyflow+system@0.0.79/node_modules/@xyflow/system/dist/esm/index.d.ts.map
@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAC;AAC5B,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,cAAc,YAAY,CAAC;AAC3B,cAAc,aAAa,CAAC;AAC5B,cAAc,aAAa,CAAC;AAC5B,cAAc,aAAa,CAAC"}
\ No newline at end of file
diff --git a/frontend/node_modules/.pnpm/@xyflow+system@0.0.79/node_modules/@xyflow/system/dist/esm/index.js b/frontend/node_modules/.pnpm/@xyflow+system@0.0.79/node_modules/@xyflow/system/dist/esm/index.js
new file mode 100644
index 0000000000000000000000000000000000000000..ef024e428453d162f0709bbbc5e3a34d1dfbd107
--- /dev/null
+++ b/frontend/node_modules/.pnpm/@xyflow+system@0.0.79/node_modules/@xyflow/system/dist/esm/index.js
@@ -0,0 +1,3557 @@
+import { drag } from 'd3-drag';
+import { select, pointer } from 'd3-selection';
+import { zoom, zoomIdentity, zoomTransform } from 'd3-zoom';
+import { interpolateZoom, interpolate } from 'd3-interpolate';
+
+const errorMessages = {
+ error001: (lib = 'react') => `Seems like you have not used ${lib === 'svelte' ? 'SvelteFlowProvider' : 'ReactFlowProvider'} as an ancestor. Help: https://${lib}flow.dev/error#001`,
+ error002: () => "It looks like you've created a new nodeTypes or edgeTypes object. If this wasn't on purpose please define the nodeTypes/edgeTypes outside of the component or memoize them.",
+ error003: (nodeType) => `Node type "${nodeType}" not found. Using fallback type "default".`,
+ error004: () => 'The parent container needs a width and a height to render the graph.',
+ error005: () => 'Only child nodes can use a parent extent.',
+ error006: () => "Can't create edge. An edge needs a source and a target.",
+ error007: (id) => `The old edge with id=${id} does not exist.`,
+ error009: (type) => `Marker type "${type}" doesn't exist.`,
+ error008: (handleType, { id, sourceHandle, targetHandle }) => `Couldn't create edge for ${handleType} handle id: "${handleType === 'source' ? sourceHandle : targetHandle}", edge id: ${id}.`,
+ error010: () => 'Handle: No node id found. Make sure to only use a Handle inside a custom Node.',
+ error011: (edgeType) => `Edge type "${edgeType}" not found. Using fallback type "default".`,
+ error012: (id) => `Node with id "${id}" does not exist, it may have been removed. This can happen when a node is deleted before the "onNodeClick" handler is called.`,
+ error013: (lib = 'react') => `It seems that you haven't loaded the styles. Please import '@xyflow/${lib}/dist/style.css' or base.css to make sure everything is working properly.`,
+ error014: () => 'useNodeConnections: No node ID found. Call useNodeConnections inside a custom Node or provide a node ID.',
+ error015: () => 'It seems that you are trying to drag a node that is not initialized. Please use onNodesChange as explained in the docs.',
+ error016: (id) => `Edge with id "${id}" does not exist, it may have been removed. This can happen when an edge is deleted before the "onEdgeClick" handler is called.`,
+};
+const infiniteExtent = [
+ [Number.NEGATIVE_INFINITY, Number.NEGATIVE_INFINITY],
+ [Number.POSITIVE_INFINITY, Number.POSITIVE_INFINITY],
+];
+const elementSelectionKeys = ['Enter', ' ', 'Escape'];
+const defaultAriaLabelConfig = {
+ 'node.a11yDescription.default': 'Press enter or space to select a node. Press delete to remove it and escape to cancel.',
+ 'node.a11yDescription.keyboardDisabled': 'Press enter or space to select a node. You can then use the arrow keys to move the node around. Press delete to remove it and escape to cancel.',
+ 'node.a11yDescription.ariaLiveMessage': ({ direction, x, y }) => `Moved selected node ${direction}. New position, x: ${x}, y: ${y}`,
+ 'edge.a11yDescription.default': 'Press enter or space to select an edge. You can then press delete to remove it or escape to cancel.',
+ // Control elements
+ 'controls.ariaLabel': 'Control Panel',
+ 'controls.zoomIn.ariaLabel': 'Zoom In',
+ 'controls.zoomOut.ariaLabel': 'Zoom Out',
+ 'controls.fitView.ariaLabel': 'Fit View',
+ 'controls.interactive.ariaLabel': 'Toggle Interactivity',
+ // Mini map
+ 'minimap.ariaLabel': 'Mini Map',
+ // Handle
+ 'handle.ariaLabel': 'Handle',
+};
+
+/**
+ * The `ConnectionMode` is used to set the mode of connection between nodes.
+ * The `Strict` mode is the default one and only allows source to target edges.
+ * `Loose` mode allows source to source and target to target edges as well.
+ *
+ * @public
+ */
+var ConnectionMode;
+(function (ConnectionMode) {
+ ConnectionMode["Strict"] = "strict";
+ ConnectionMode["Loose"] = "loose";
+})(ConnectionMode || (ConnectionMode = {}));
+/**
+ * This enum is used to set the different modes of panning the viewport when the
+ * user scrolls. The `Free` mode allows the user to pan in any direction by scrolling
+ * with a device like a trackpad. The `Vertical` and `Horizontal` modes restrict
+ * scroll panning to only the vertical or horizontal axis, respectively.
+ *
+ * @public
+ */
+var PanOnScrollMode;
+(function (PanOnScrollMode) {
+ PanOnScrollMode["Free"] = "free";
+ PanOnScrollMode["Vertical"] = "vertical";
+ PanOnScrollMode["Horizontal"] = "horizontal";
+})(PanOnScrollMode || (PanOnScrollMode = {}));
+var SelectionMode;
+(function (SelectionMode) {
+ SelectionMode["Partial"] = "partial";
+ SelectionMode["Full"] = "full";
+})(SelectionMode || (SelectionMode = {}));
+const initialConnection = {
+ inProgress: false,
+ isValid: null,
+ from: null,
+ fromHandle: null,
+ fromPosition: null,
+ fromNode: null,
+ to: null,
+ toHandle: null,
+ toPosition: null,
+ toNode: null,
+ pointer: null,
+};
+
+/**
+ * If you set the `connectionLineType` prop on your [``](/api-reference/react-flow#connection-connectionLineType)
+ *component, it will dictate the style of connection line rendered when creating
+ *new edges.
+ *
+ * @public
+ *
+ * @remarks If you choose to render a custom connection line component, this value will be
+ *passed to your component as part of its [`ConnectionLineComponentProps`](/api-reference/types/connection-line-component-props).
+ */
+var ConnectionLineType;
+(function (ConnectionLineType) {
+ ConnectionLineType["Bezier"] = "default";
+ ConnectionLineType["Straight"] = "straight";
+ ConnectionLineType["Step"] = "step";
+ ConnectionLineType["SmoothStep"] = "smoothstep";
+ ConnectionLineType["SimpleBezier"] = "simplebezier";
+})(ConnectionLineType || (ConnectionLineType = {}));
+/**
+ * Edges may optionally have a marker on either end. The MarkerType type enumerates
+ * the options available to you when configuring a given marker.
+ *
+ * @public
+ */
+var MarkerType;
+(function (MarkerType) {
+ MarkerType["Arrow"] = "arrow";
+ MarkerType["ArrowClosed"] = "arrowclosed";
+})(MarkerType || (MarkerType = {}));
+
+/**
+ * While [`PanelPosition`](/api-reference/types/panel-position) can be used to place a
+ * component in the corners of a container, the `Position` enum is less precise and used
+ * primarily in relation to edges and handles.
+ *
+ * @public
+ */
+var Position;
+(function (Position) {
+ Position["Left"] = "left";
+ Position["Top"] = "top";
+ Position["Right"] = "right";
+ Position["Bottom"] = "bottom";
+})(Position || (Position = {}));
+const oppositePosition = {
+ [Position.Left]: Position.Right,
+ [Position.Right]: Position.Left,
+ [Position.Top]: Position.Bottom,
+ [Position.Bottom]: Position.Top,
+};
+
+/**
+ * @internal
+ */
+function areConnectionMapsEqual(a, b) {
+ if (!a && !b) {
+ return true;
+ }
+ if (!a || !b || a.size !== b.size) {
+ return false;
+ }
+ if (!a.size && !b.size) {
+ return true;
+ }
+ for (const key of a.keys()) {
+ if (!b.has(key)) {
+ return false;
+ }
+ }
+ return true;
+}
+/**
+ * We call the callback for all connections in a that are not in b
+ *
+ * @internal
+ */
+function handleConnectionChange(a, b, cb) {
+ if (!cb) {
+ return;
+ }
+ const diff = [];
+ a.forEach((connection, key) => {
+ if (!b?.has(key)) {
+ diff.push(connection);
+ }
+ });
+ if (diff.length) {
+ cb(diff);
+ }
+}
+function getConnectionStatus(isValid) {
+ return isValid === null ? null : isValid ? 'valid' : 'invalid';
+}
+
+/**
+ * Test whether an object is usable as an Edge
+ * @public
+ * @remarks In TypeScript this is a type guard that will narrow the type of whatever you pass in to Edge if it returns true
+ * @param element - The element to test
+ * @returns A boolean indicating whether the element is an Edge
+ */
+const isEdgeBase = (element) => !!element && typeof element === 'object' && 'id' in element && 'source' in element && 'target' in element;
+/**
+ * Test whether an object is usable as a Node
+ * @public
+ * @remarks In TypeScript this is a type guard that will narrow the type of whatever you pass in to Node if it returns true
+ * @param element - The element to test
+ * @returns A boolean indicating whether the element is an Node
+ */
+const isNodeBase = (element) => !!element && typeof element === 'object' && 'id' in element && 'position' in element && !('source' in element) && !('target' in element);
+const isInternalNodeBase = (element) => !!element && typeof element === 'object' && 'id' in element && 'internals' in element && !('source' in element) && !('target' in element);
+/**
+ * This util is used to tell you what nodes, if any, are connected to the given node
+ * as the _target_ of an edge.
+ * @public
+ * @param node - The node to get the connected nodes from.
+ * @param nodes - The array of all nodes.
+ * @param edges - The array of all edges.
+ * @returns An array of nodes that are connected over edges where the source is the given node.
+ *
+ * @example
+ * ```ts
+ *import { getOutgoers } from '@xyflow/react';
+ *
+ *const nodes = [];
+ *const edges = [];
+ *
+ *const outgoers = getOutgoers(
+ * { id: '1', position: { x: 0, y: 0 }, data: { label: 'node' } },
+ * nodes,
+ * edges,
+ *);
+ *```
+ */
+const getOutgoers = (node, nodes, edges) => {
+ if (!node.id) {
+ return [];
+ }
+ const outgoerIds = new Set();
+ edges.forEach((edge) => {
+ if (edge.source === node.id) {
+ outgoerIds.add(edge.target);
+ }
+ });
+ return nodes.filter((n) => outgoerIds.has(n.id));
+};
+/**
+ * This util is used to tell you what nodes, if any, are connected to the given node
+ * as the _source_ of an edge.
+ * @public
+ * @param node - The node to get the connected nodes from.
+ * @param nodes - The array of all nodes.
+ * @param edges - The array of all edges.
+ * @returns An array of nodes that are connected over edges where the target is the given node.
+ *
+ * @example
+ * ```ts
+ *import { getIncomers } from '@xyflow/react';
+ *
+ *const nodes = [];
+ *const edges = [];
+ *
+ *const incomers = getIncomers(
+ * { id: '1', position: { x: 0, y: 0 }, data: { label: 'node' } },
+ * nodes,
+ * edges,
+ *);
+ *```
+ */
+const getIncomers = (node, nodes, edges) => {
+ if (!node.id) {
+ return [];
+ }
+ const incomersIds = new Set();
+ edges.forEach((edge) => {
+ if (edge.target === node.id) {
+ incomersIds.add(edge.source);
+ }
+ });
+ return nodes.filter((n) => incomersIds.has(n.id));
+};
+const getNodePositionWithOrigin = (node, nodeOrigin = [0, 0]) => {
+ const { width, height } = getNodeDimensions(node);
+ const origin = node.origin ?? nodeOrigin;
+ const offsetX = width * origin[0];
+ const offsetY = height * origin[1];
+ return {
+ x: node.position.x - offsetX,
+ y: node.position.y - offsetY,
+ };
+};
+/**
+ * Returns the bounding box that contains all the given nodes in an array. This can
+ * be useful when combined with [`getViewportForBounds`](/api-reference/utils/get-viewport-for-bounds)
+ * to calculate the correct transform to fit the given nodes in a viewport.
+ * @public
+ * @remarks Useful when combined with {@link getViewportForBounds} to calculate the correct transform to fit the given nodes in a viewport.
+ * @param nodes - Nodes to calculate the bounds for.
+ * @returns Bounding box enclosing all nodes.
+ *
+ * @remarks This function was previously called `getRectOfNodes`
+ *
+ * @example
+ * ```js
+ *import { getNodesBounds } from '@xyflow/react';
+ *
+ *const nodes = [
+ * {
+ * id: 'a',
+ * position: { x: 0, y: 0 },
+ * data: { label: 'a' },
+ * width: 50,
+ * height: 25,
+ * },
+ * {
+ * id: 'b',
+ * position: { x: 100, y: 100 },
+ * data: { label: 'b' },
+ * width: 50,
+ * height: 25,
+ * },
+ *];
+ *
+ *const bounds = getNodesBounds(nodes);
+ *```
+ */
+const getNodesBounds = (nodes, params = { nodeOrigin: [0, 0] }) => {
+ if (process.env.NODE_ENV === 'development' && !params.nodeLookup) {
+ console.warn('Please use `getNodesBounds` from `useReactFlow`/`useSvelteFlow` hook to ensure correct values for sub flows. If not possible, you have to provide a nodeLookup to support sub flows.');
+ }
+ if (nodes.length === 0) {
+ return { x: 0, y: 0, width: 0, height: 0 };
+ }
+ const box = nodes.reduce((currBox, nodeOrId) => {
+ const isId = typeof nodeOrId === 'string';
+ let currentNode = !params.nodeLookup && !isId ? nodeOrId : undefined;
+ if (params.nodeLookup) {
+ currentNode = isId
+ ? params.nodeLookup.get(nodeOrId)
+ : !isInternalNodeBase(nodeOrId)
+ ? params.nodeLookup.get(nodeOrId.id)
+ : nodeOrId;
+ }
+ const nodeBox = currentNode ? nodeToBox(currentNode, params.nodeOrigin) : { x: 0, y: 0, x2: 0, y2: 0 };
+ return getBoundsOfBoxes(currBox, nodeBox);
+ }, { x: Infinity, y: Infinity, x2: -Infinity, y2: -Infinity });
+ return boxToRect(box);
+};
+/**
+ * Determines a bounding box that contains all given nodes in an array
+ * @internal
+ */
+const getInternalNodesBounds = (nodeLookup, params = {}) => {
+ let box = { x: Infinity, y: Infinity, x2: -Infinity, y2: -Infinity };
+ let hasVisibleNodes = false;
+ nodeLookup.forEach((node) => {
+ if (params.filter === undefined || params.filter(node)) {
+ box = getBoundsOfBoxes(box, nodeToBox(node));
+ hasVisibleNodes = true;
+ }
+ });
+ return hasVisibleNodes ? boxToRect(box) : { x: 0, y: 0, width: 0, height: 0 };
+};
+const getNodesInside = (nodes, rect, [tx, ty, tScale] = [0, 0, 1], partially = false,
+// set excludeNonSelectableNodes if you want to pay attention to the nodes "selectable" attribute
+excludeNonSelectableNodes = false) => {
+ // viewport in flow coordinates, as scalars to avoid a Rect allocation per node
+ const paneX = (rect.x - tx) / tScale;
+ const paneY = (rect.y - ty) / tScale;
+ const paneWidth = rect.width / tScale;
+ const paneHeight = rect.height / tScale;
+ const visibleNodes = [];
+ for (const node of nodes.values()) {
+ const { measured, selectable = true, hidden = false } = node;
+ if ((excludeNonSelectableNodes && !selectable) || hidden) {
+ continue;
+ }
+ const width = measured.width ?? node.width ?? node.initialWidth ?? 0;
+ const height = measured.height ?? node.height ?? node.initialHeight ?? 0;
+ const { x, y } = node.internals.positionAbsolute;
+ const overlappingArea = getRectsOverlappingArea(paneX, paneY, paneWidth, paneHeight, x, y, width, height);
+ const area = width * height;
+ const partiallyVisible = partially && overlappingArea > 0;
+ const forceInitialRender = !node.internals.handleBounds;
+ const isVisible = forceInitialRender || partiallyVisible || overlappingArea >= area;
+ if (isVisible || node.dragging) {
+ visibleNodes.push(node);
+ }
+ }
+ return visibleNodes;
+};
+/**
+ * This utility filters an array of edges, keeping only those where either the source or target
+ * node is present in the given array of nodes.
+ * @public
+ * @param nodes - Nodes you want to get the connected edges for.
+ * @param edges - All edges.
+ * @returns Array of edges that connect any of the given nodes with each other.
+ *
+ * @example
+ * ```js
+ *import { getConnectedEdges } from '@xyflow/react';
+ *
+ *const nodes = [
+ * { id: 'a', position: { x: 0, y: 0 } },
+ * { id: 'b', position: { x: 100, y: 0 } },
+ *];
+ *
+ *const edges = [
+ * { id: 'a->c', source: 'a', target: 'c' },
+ * { id: 'c->d', source: 'c', target: 'd' },
+ *];
+ *
+ *const connectedEdges = getConnectedEdges(nodes, edges);
+ * // => [{ id: 'a->c', source: 'a', target: 'c' }]
+ *```
+ */
+const getConnectedEdges = (nodes, edges) => {
+ const nodeIds = new Set();
+ nodes.forEach((node) => {
+ nodeIds.add(node.id);
+ });
+ return edges.filter((edge) => nodeIds.has(edge.source) || nodeIds.has(edge.target));
+};
+function getFitViewNodes(nodeLookup, options) {
+ const fitViewNodes = new Map();
+ const optionNodeIds = options?.nodes ? new Set(options.nodes.map((node) => node.id)) : null;
+ nodeLookup.forEach((n) => {
+ let isVisible;
+ if (options?.includeHiddenNodes) {
+ /*
+ * when hidden nodes are included they were never rendered, so they have no
+ * measured size. Fall back to the declared dimensions (same fallback as
+ * nodeToBox) so a hidden node with an intrinsic size still contributes to
+ * the fit bounds instead of being dropped by a measured-only check. (#5841)
+ */
+ const { width, height } = getNodeDimensions(n);
+ isVisible = width > 0 && height > 0;
+ }
+ else {
+ isVisible = Boolean(n.measured.width && n.measured.height && !n.hidden);
+ }
+ if (isVisible && (!optionNodeIds || optionNodeIds.has(n.id))) {
+ fitViewNodes.set(n.id, n);
+ }
+ });
+ return fitViewNodes;
+}
+async function fitViewport({ nodes, width, height, panZoom, minZoom, maxZoom }, options) {
+ if (nodes.size === 0) {
+ return true;
+ }
+ const nodesToFit = getFitViewNodes(nodes, options);
+ const bounds = getInternalNodesBounds(nodesToFit);
+ const viewport = getViewportForBounds(bounds, width, height, options?.minZoom ?? minZoom, options?.maxZoom ?? maxZoom, options?.padding ?? 0.1);
+ await panZoom.setViewport(viewport, {
+ duration: options?.duration,
+ ease: options?.ease,
+ interpolate: options?.interpolate,
+ });
+ return true;
+}
+/**
+ * This function calculates the next position of a node, taking into account the node's extent, parent node, and origin.
+ *
+ * @internal
+ * @returns position, positionAbsolute
+ */
+function calculateNodePosition({ nodeId, nextPosition, nodeLookup, nodeOrigin = [0, 0], nodeExtent, onError, }) {
+ const node = nodeLookup.get(nodeId);
+ const parentNode = node.parentId ? nodeLookup.get(node.parentId) : undefined;
+ const { x: parentX, y: parentY } = parentNode ? parentNode.internals.positionAbsolute : { x: 0, y: 0 };
+ const origin = node.origin ?? nodeOrigin;
+ let extent = node.extent || nodeExtent;
+ if (node.extent === 'parent' && !node.expandParent) {
+ if (!parentNode) {
+ onError?.('005', errorMessages['error005']());
+ }
+ else {
+ const parentWidth = parentNode.measured.width;
+ const parentHeight = parentNode.measured.height;
+ if (parentWidth && parentHeight) {
+ extent = [
+ [parentX, parentY],
+ [parentX + parentWidth, parentY + parentHeight],
+ ];
+ }
+ }
+ }
+ else if (parentNode && isCoordinateExtent(node.extent)) {
+ extent = [
+ [node.extent[0][0] + parentX, node.extent[0][1] + parentY],
+ [node.extent[1][0] + parentX, node.extent[1][1] + parentY],
+ ];
+ }
+ const positionAbsolute = isCoordinateExtent(extent)
+ ? clampPosition(nextPosition, extent, node.measured)
+ : nextPosition;
+ if (node.measured.width === undefined || node.measured.height === undefined) {
+ onError?.('015', errorMessages['error015']());
+ }
+ return {
+ position: {
+ x: positionAbsolute.x - parentX + (node.measured.width ?? 0) * origin[0],
+ y: positionAbsolute.y - parentY + (node.measured.height ?? 0) * origin[1],
+ },
+ positionAbsolute,
+ };
+}
+/**
+ * Pass in nodes & edges to delete, get arrays of nodes and edges that actually can be deleted
+ * @internal
+ * @param param.nodesToRemove - The nodes to remove
+ * @param param.edgesToRemove - The edges to remove
+ * @param param.nodes - All nodes
+ * @param param.edges - All edges
+ * @param param.onBeforeDelete - Callback to check which nodes and edges can be deleted
+ * @returns nodes: nodes that can be deleted, edges: edges that can be deleted
+ */
+async function getElementsToRemove({ nodesToRemove = [], edgesToRemove = [], nodes, edges, onBeforeDelete, }) {
+ const nodeIds = new Set(nodesToRemove.map((node) => node.id));
+ const matchingNodes = [];
+ for (const node of nodes) {
+ if (node.deletable === false) {
+ continue;
+ }
+ const isIncluded = nodeIds.has(node.id);
+ const parentHit = !isIncluded && node.parentId && matchingNodes.find((n) => n.id === node.parentId);
+ if (isIncluded || parentHit) {
+ matchingNodes.push(node);
+ }
+ }
+ const edgeIds = new Set(edgesToRemove.map((edge) => edge.id));
+ const deletableEdges = edges.filter((edge) => edge.deletable !== false);
+ const connectedEdges = getConnectedEdges(matchingNodes, deletableEdges);
+ const matchingEdges = connectedEdges;
+ for (const edge of deletableEdges) {
+ const isIncluded = edgeIds.has(edge.id);
+ if (isIncluded && !matchingEdges.find((e) => e.id === edge.id)) {
+ matchingEdges.push(edge);
+ }
+ }
+ if (!onBeforeDelete) {
+ return {
+ edges: matchingEdges,
+ nodes: matchingNodes,
+ };
+ }
+ const onBeforeDeleteResult = await onBeforeDelete({
+ nodes: matchingNodes,
+ edges: matchingEdges,
+ });
+ if (typeof onBeforeDeleteResult === 'boolean') {
+ return onBeforeDeleteResult ? { edges: matchingEdges, nodes: matchingNodes } : { edges: [], nodes: [] };
+ }
+ return onBeforeDeleteResult;
+}
+
+const clamp = (val, min = 0, max = 1) => Math.min(Math.max(val, min), max);
+const clampPosition = (position = { x: 0, y: 0 }, extent, dimensions) => ({
+ x: clamp(position.x, extent[0][0], extent[1][0] - (dimensions?.width ?? 0)),
+ y: clamp(position.y, extent[0][1], extent[1][1] - (dimensions?.height ?? 0)),
+});
+function clampPositionToParent(childPosition, childDimensions, parent) {
+ const { width: parentWidth, height: parentHeight } = getNodeDimensions(parent);
+ const { x: parentX, y: parentY } = parent.internals.positionAbsolute;
+ return clampPosition(childPosition, [
+ [parentX, parentY],
+ [parentX + parentWidth, parentY + parentHeight],
+ ], childDimensions);
+}
+/**
+ * Calculates the velocity of panning when the mouse is close to the edge of the canvas
+ * @internal
+ * @param value - One dimensional poition of the mouse (x or y)
+ * @param min - Minimal position on canvas before panning starts
+ * @param max - Maximal position on canvas before panning starts
+ * @returns - A number between 0 and 1 that represents the velocity of panning
+ */
+const calcAutoPanVelocity = (value, min, max) => {
+ if (value < min) {
+ return clamp(Math.abs(value - min), 1, min) / min;
+ }
+ else if (value > max) {
+ return -clamp(Math.abs(value - max), 1, min) / min;
+ }
+ return 0;
+};
+const calcAutoPan = (pos, bounds, speed = 15, distance = 40) => {
+ const xMovement = calcAutoPanVelocity(pos.x, distance, bounds.width - distance) * speed;
+ const yMovement = calcAutoPanVelocity(pos.y, distance, bounds.height - distance) * speed;
+ return [xMovement, yMovement];
+};
+const getBoundsOfBoxes = (box1, box2) => ({
+ x: Math.min(box1.x, box2.x),
+ y: Math.min(box1.y, box2.y),
+ x2: Math.max(box1.x2, box2.x2),
+ y2: Math.max(box1.y2, box2.y2),
+});
+const rectToBox = ({ x, y, width, height }) => ({
+ x,
+ y,
+ x2: x + width,
+ y2: y + height,
+});
+const boxToRect = ({ x, y, x2, y2 }) => ({
+ x,
+ y,
+ width: x2 - x,
+ height: y2 - y,
+});
+const nodeToRect = (node, nodeOrigin = [0, 0]) => {
+ const { x, y } = isInternalNodeBase(node)
+ ? node.internals.positionAbsolute
+ : getNodePositionWithOrigin(node, nodeOrigin);
+ return {
+ x,
+ y,
+ width: node.measured?.width ?? node.width ?? node.initialWidth ?? 0,
+ height: node.measured?.height ?? node.height ?? node.initialHeight ?? 0,
+ };
+};
+const nodeToBox = (node, nodeOrigin = [0, 0]) => {
+ const { x, y } = isInternalNodeBase(node)
+ ? node.internals.positionAbsolute
+ : getNodePositionWithOrigin(node, nodeOrigin);
+ return {
+ x,
+ y,
+ x2: x + (node.measured?.width ?? node.width ?? node.initialWidth ?? 0),
+ y2: y + (node.measured?.height ?? node.height ?? node.initialHeight ?? 0),
+ };
+};
+const getBoundsOfRects = (rect1, rect2) => boxToRect(getBoundsOfBoxes(rectToBox(rect1), rectToBox(rect2)));
+const getRectsOverlappingArea = (aX, aY, aWidth, aHeight, bX, bY, bWidth, bHeight) => {
+ const xOverlap = Math.max(0, Math.min(aX + aWidth, bX + bWidth) - Math.max(aX, bX));
+ const yOverlap = Math.max(0, Math.min(aY + aHeight, bY + bHeight) - Math.max(aY, bY));
+ return Math.ceil(xOverlap * yOverlap);
+};
+const getOverlappingArea = (rectA, rectB) => getRectsOverlappingArea(rectA.x, rectA.y, rectA.width, rectA.height, rectB.x, rectB.y, rectB.width, rectB.height);
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const isRectObject = (obj) => isNumeric(obj.width) && isNumeric(obj.height) && isNumeric(obj.x) && isNumeric(obj.y);
+/* eslint-disable-next-line @typescript-eslint/no-explicit-any */
+const isNumeric = (n) => !isNaN(n) && isFinite(n);
+const createDevWarn = (lib, helpUrl) => (id, message) => {
+ if (process.env.NODE_ENV === 'development') {
+ console.warn(`[${lib}]: ${message} Help: ${helpUrl}error#${id}`);
+ }
+};
+const snapPosition = (position, snapGrid = [1, 1]) => {
+ return {
+ x: snapGrid[0] * Math.round(position.x / snapGrid[0]),
+ y: snapGrid[1] * Math.round(position.y / snapGrid[1]),
+ };
+};
+const pointToRendererPoint = ({ x, y }, [tx, ty, tScale], snapToGrid = false, snapGrid = [1, 1]) => {
+ const position = {
+ x: (x - tx) / tScale,
+ y: (y - ty) / tScale,
+ };
+ return snapToGrid ? snapPosition(position, snapGrid) : position;
+};
+const rendererPointToPoint = ({ x, y }, [tx, ty, tScale]) => {
+ return {
+ x: x * tScale + tx,
+ y: y * tScale + ty,
+ };
+};
+/**
+ * Parses a single padding value to a number
+ * @internal
+ * @param padding - Padding to parse
+ * @param viewport - Width or height of the viewport
+ * @returns The padding in pixels
+ */
+function parsePadding(padding, viewport) {
+ if (typeof padding === 'number') {
+ return Math.floor((viewport - viewport / (1 + padding)) * 0.5);
+ }
+ if (typeof padding === 'string' && padding.endsWith('px')) {
+ const paddingValue = parseFloat(padding);
+ if (!Number.isNaN(paddingValue)) {
+ return Math.floor(paddingValue);
+ }
+ }
+ if (typeof padding === 'string' && padding.endsWith('%')) {
+ const paddingValue = parseFloat(padding);
+ if (!Number.isNaN(paddingValue)) {
+ return Math.floor(viewport * paddingValue * 0.01);
+ }
+ }
+ console.error(`The padding value "${padding}" is invalid. Please provide a number or a string with a valid unit (px or %).`);
+ return 0;
+}
+/**
+ * Parses the paddings to an object with top, right, bottom, left, x and y paddings
+ * @internal
+ * @param padding - Padding to parse
+ * @param width - Width of the viewport
+ * @param height - Height of the viewport
+ * @returns An object with the paddings in pixels
+ */
+function parsePaddings(padding, width, height) {
+ if (typeof padding === 'string' || typeof padding === 'number') {
+ const paddingY = parsePadding(padding, height);
+ const paddingX = parsePadding(padding, width);
+ return {
+ top: paddingY,
+ right: paddingX,
+ bottom: paddingY,
+ left: paddingX,
+ x: paddingX * 2,
+ y: paddingY * 2,
+ };
+ }
+ if (typeof padding === 'object') {
+ const top = parsePadding(padding.top ?? padding.y ?? 0, height);
+ const bottom = parsePadding(padding.bottom ?? padding.y ?? 0, height);
+ const left = parsePadding(padding.left ?? padding.x ?? 0, width);
+ const right = parsePadding(padding.right ?? padding.x ?? 0, width);
+ return { top, right, bottom, left, x: left + right, y: top + bottom };
+ }
+ return { top: 0, right: 0, bottom: 0, left: 0, x: 0, y: 0 };
+}
+/**
+ * Calculates the resulting paddings if the new viewport is applied
+ * @internal
+ * @param bounds - Bounds to fit inside viewport
+ * @param x - X position of the viewport
+ * @param y - Y position of the viewport
+ * @param zoom - Zoom level of the viewport
+ * @param width - Width of the viewport
+ * @param height - Height of the viewport
+ * @returns An object with the minimum padding required to fit the bounds inside the viewport
+ */
+function calculateAppliedPaddings(bounds, x, y, zoom, width, height) {
+ const { x: left, y: top } = rendererPointToPoint(bounds, [x, y, zoom]);
+ const { x: boundRight, y: boundBottom } = rendererPointToPoint({ x: bounds.x + bounds.width, y: bounds.y + bounds.height }, [x, y, zoom]);
+ const right = width - boundRight;
+ const bottom = height - boundBottom;
+ return {
+ left: Math.floor(left),
+ top: Math.floor(top),
+ right: Math.floor(right),
+ bottom: Math.floor(bottom),
+ };
+}
+/**
+ * Returns a viewport that encloses the given bounds with padding.
+ * @public
+ * @remarks You can determine bounds of nodes with {@link getNodesBounds} and {@link getBoundsOfRects}
+ * @param bounds - Bounds to fit inside viewport.
+ * @param width - Width of the viewport.
+ * @param height - Height of the viewport.
+ * @param minZoom - Minimum zoom level of the resulting viewport.
+ * @param maxZoom - Maximum zoom level of the resulting viewport.
+ * @param padding - Padding around the bounds.
+ * @returns A transformed {@link Viewport} that encloses the given bounds which you can pass to e.g. {@link setViewport}.
+ * @example
+ * const { x, y, zoom } = getViewportForBounds(
+ * { x: 0, y: 0, width: 100, height: 100},
+ * 1200, 800, 0.5, 2);
+ */
+const getViewportForBounds = (bounds, width, height, minZoom, maxZoom, padding) => {
+ // First we resolve all the paddings to actual pixel values
+ const p = parsePaddings(padding, width, height);
+ const xZoom = (width - p.x) / bounds.width;
+ const yZoom = (height - p.y) / bounds.height;
+ // We calculate the new x, y, zoom for a centered view
+ const zoom = Math.min(xZoom, yZoom);
+ const clampedZoom = clamp(zoom, minZoom, maxZoom);
+ const boundsCenterX = bounds.x + bounds.width / 2;
+ const boundsCenterY = bounds.y + bounds.height / 2;
+ const x = width / 2 - boundsCenterX * clampedZoom;
+ const y = height / 2 - boundsCenterY * clampedZoom;
+ // Then we calculate the minimum padding, to respect asymmetric paddings
+ const newPadding = calculateAppliedPaddings(bounds, x, y, clampedZoom, width, height);
+ // We only want to have an offset if the newPadding is smaller than the required padding
+ const offset = {
+ left: Math.min(newPadding.left - p.left, 0),
+ top: Math.min(newPadding.top - p.top, 0),
+ right: Math.min(newPadding.right - p.right, 0),
+ bottom: Math.min(newPadding.bottom - p.bottom, 0),
+ };
+ return {
+ x: x - offset.left + offset.right,
+ y: y - offset.top + offset.bottom,
+ zoom: clampedZoom,
+ };
+};
+const isMacOs = () => typeof navigator !== 'undefined' && navigator?.userAgent?.indexOf('Mac') >= 0;
+function isCoordinateExtent(extent) {
+ return extent !== undefined && extent !== null && extent !== 'parent';
+}
+function getNodeDimensions(node) {
+ return {
+ width: node.measured?.width ?? node.width ?? node.initialWidth ?? 0,
+ height: node.measured?.height ?? node.height ?? node.initialHeight ?? 0,
+ };
+}
+function nodeHasDimensions(node) {
+ return ((node.measured?.width ?? node.width ?? node.initialWidth) !== undefined &&
+ (node.measured?.height ?? node.height ?? node.initialHeight) !== undefined);
+}
+/**
+ * Convert child position to absolute position
+ *
+ * @internal
+ * @param position
+ * @param parentId
+ * @param nodeLookup
+ * @param nodeOrigin
+ * @returns an internal node with an absolute position
+ */
+function evaluateAbsolutePosition(position, dimensions = { width: 0, height: 0 }, parentId, nodeLookup, nodeOrigin) {
+ const positionAbsolute = { ...position };
+ const parent = nodeLookup.get(parentId);
+ if (parent) {
+ const origin = parent.origin || nodeOrigin;
+ positionAbsolute.x += parent.internals.positionAbsolute.x - (dimensions.width ?? 0) * origin[0];
+ positionAbsolute.y += parent.internals.positionAbsolute.y - (dimensions.height ?? 0) * origin[1];
+ }
+ return positionAbsolute;
+}
+function areSetsEqual(a, b) {
+ if (a.size !== b.size) {
+ return false;
+ }
+ for (const item of a) {
+ if (!b.has(item)) {
+ return false;
+ }
+ }
+ return true;
+}
+/**
+ * Polyfill for Promise.withResolvers until we can use it in all browsers
+ * @internal
+ */
+function withResolvers() {
+ let resolve;
+ let reject;
+ const promise = new Promise((res, rej) => {
+ resolve = res;
+ reject = rej;
+ });
+ return { promise, resolve, reject };
+}
+function mergeAriaLabelConfig(partial) {
+ return { ...defaultAriaLabelConfig, ...(partial || {}) };
+}
+
+function getPointerPosition(event, { snapGrid = [0, 0], snapToGrid = false, transform, containerBounds }) {
+ const { x, y } = getEventPosition(event);
+ const pointerPos = pointToRendererPoint({ x: x - (containerBounds?.left ?? 0), y: y - (containerBounds?.top ?? 0) }, transform);
+ const { x: xSnapped, y: ySnapped } = snapToGrid ? snapPosition(pointerPos, snapGrid) : pointerPos;
+ // we need the snapped position in order to be able to skip unnecessary drag events
+ return {
+ xSnapped,
+ ySnapped,
+ ...pointerPos,
+ };
+}
+const getDimensions = (node) => ({
+ width: node.offsetWidth,
+ height: node.offsetHeight,
+});
+const getHostForElement = (element) => element?.getRootNode?.() || window?.document;
+const inputTags = ['INPUT', 'SELECT', 'TEXTAREA'];
+function isInputDOMNode(event) {
+ // using composed path for handling shadow dom
+ const target = (event.composedPath?.()?.[0] || event.target);
+ if (target?.nodeType !== 1 /* Node.ELEMENT_NODE */)
+ return false;
+ const isInput = inputTags.includes(target.nodeName) || target.hasAttribute('contenteditable');
+ // when an input field is focused we don't want to trigger deletion or movement of nodes
+ return isInput || !!target.closest('.nokey');
+}
+const isMouseEvent = (event) => 'clientX' in event;
+const getEventPosition = (event, bounds) => {
+ const isMouse = isMouseEvent(event);
+ const evtX = isMouse ? event.clientX : event.touches?.[0].clientX;
+ const evtY = isMouse ? event.clientY : event.touches?.[0].clientY;
+ return {
+ x: evtX - (bounds?.left ?? 0),
+ y: evtY - (bounds?.top ?? 0),
+ };
+};
+/*
+ * The handle bounds are calculated relative to the node element.
+ * We store them in the internals object of the node in order to avoid
+ * unnecessary recalculations.
+ */
+const getHandleBounds = (type, nodeElement, nodeBounds, zoom, nodeId) => {
+ const handles = nodeElement.querySelectorAll(`.${type}`);
+ if (!handles || !handles.length) {
+ return null;
+ }
+ return Array.from(handles).map((handle) => {
+ const handleBounds = handle.getBoundingClientRect();
+ return {
+ id: handle.getAttribute('data-handleid'),
+ type,
+ nodeId,
+ position: handle.getAttribute('data-handlepos'),
+ x: (handleBounds.left - nodeBounds.left) / zoom,
+ y: (handleBounds.top - nodeBounds.top) / zoom,
+ ...getDimensions(handle),
+ };
+ });
+};
+
+function getBezierEdgeCenter({ sourceX, sourceY, targetX, targetY, sourceControlX, sourceControlY, targetControlX, targetControlY, }) {
+ /*
+ * cubic bezier t=0.5 mid point, not the actual mid point, but easy to calculate
+ * https://stackoverflow.com/questions/67516101/how-to-find-distance-mid-point-of-bezier-curve
+ */
+ const centerX = sourceX * 0.125 + sourceControlX * 0.375 + targetControlX * 0.375 + targetX * 0.125;
+ const centerY = sourceY * 0.125 + sourceControlY * 0.375 + targetControlY * 0.375 + targetY * 0.125;
+ const offsetX = Math.abs(centerX - sourceX);
+ const offsetY = Math.abs(centerY - sourceY);
+ return [centerX, centerY, offsetX, offsetY];
+}
+function calculateControlOffset(distance, curvature) {
+ if (distance >= 0) {
+ return 0.5 * distance;
+ }
+ return curvature * 25 * Math.sqrt(-distance);
+}
+function getControlWithCurvature({ pos, x1, y1, x2, y2, c }) {
+ switch (pos) {
+ case Position.Left:
+ return [x1 - calculateControlOffset(x1 - x2, c), y1];
+ case Position.Right:
+ return [x1 + calculateControlOffset(x2 - x1, c), y1];
+ case Position.Top:
+ return [x1, y1 - calculateControlOffset(y1 - y2, c)];
+ case Position.Bottom:
+ return [x1, y1 + calculateControlOffset(y2 - y1, c)];
+ }
+}
+/**
+ * The `getBezierPath` util returns everything you need to render a bezier edge
+ *between two nodes.
+ * @public
+ * @returns A path string you can use in an SVG, the `labelX` and `labelY` position (center of path)
+ * and `offsetX`, `offsetY` between source handle and label.
+ * - `path`: the path to use in an SVG `` element.
+ * - `labelX`: the `x` position you can use to render a label for this edge.
+ * - `labelY`: the `y` position you can use to render a label for this edge.
+ * - `offsetX`: the absolute difference between the source `x` position and the `x` position of the
+ * middle of this path.
+ * - `offsetY`: the absolute difference between the source `y` position and the `y` position of the
+ * middle of this path.
+ * @example
+ * ```js
+ * const source = { x: 0, y: 20 };
+ * const target = { x: 150, y: 100 };
+ *
+ * const [path, labelX, labelY, offsetX, offsetY] = getBezierPath({
+ * sourceX: source.x,
+ * sourceY: source.y,
+ * sourcePosition: Position.Right,
+ * targetX: target.x,
+ * targetY: target.y,
+ * targetPosition: Position.Left,
+ *});
+ *```
+ *
+ * @remarks This function returns a tuple (aka a fixed-size array) to make it easier to
+ *work with multiple edge paths at once.
+ */
+function getBezierPath({ sourceX, sourceY, sourcePosition = Position.Bottom, targetX, targetY, targetPosition = Position.Top, curvature = 0.25, }) {
+ const [sourceControlX, sourceControlY] = getControlWithCurvature({
+ pos: sourcePosition,
+ x1: sourceX,
+ y1: sourceY,
+ x2: targetX,
+ y2: targetY,
+ c: curvature,
+ });
+ const [targetControlX, targetControlY] = getControlWithCurvature({
+ pos: targetPosition,
+ x1: targetX,
+ y1: targetY,
+ x2: sourceX,
+ y2: sourceY,
+ c: curvature,
+ });
+ const [labelX, labelY, offsetX, offsetY] = getBezierEdgeCenter({
+ sourceX,
+ sourceY,
+ targetX,
+ targetY,
+ sourceControlX,
+ sourceControlY,
+ targetControlX,
+ targetControlY,
+ });
+ return [
+ `M${sourceX},${sourceY} C${sourceControlX},${sourceControlY} ${targetControlX},${targetControlY} ${targetX},${targetY}`,
+ labelX,
+ labelY,
+ offsetX,
+ offsetY,
+ ];
+}
+
+// this is used for straight edges and simple smoothstep edges (LTR, RTL, BTT, TTB)
+function getEdgeCenter({ sourceX, sourceY, targetX, targetY, }) {
+ const xOffset = Math.abs(targetX - sourceX) / 2;
+ const centerX = targetX < sourceX ? targetX + xOffset : targetX - xOffset;
+ const yOffset = Math.abs(targetY - sourceY) / 2;
+ const centerY = targetY < sourceY ? targetY + yOffset : targetY - yOffset;
+ return [centerX, centerY, xOffset, yOffset];
+}
+/**
+ * Returns the z-index for an edge based on the node it connects and whether it is selected.
+ * By default, edges are rendered below nodes. This behaviour is different for edges that are
+ * connected to nodes with a parent, as they are rendered above the parent node.
+ */
+function getElevatedEdgeZIndex({ sourceNode, targetNode, selected = false, zIndex = 0, elevateOnSelect = false, zIndexMode = 'basic', }) {
+ if (zIndexMode === 'manual') {
+ return zIndex;
+ }
+ const edgeZ = elevateOnSelect && selected ? zIndex + 1000 : zIndex;
+ const nodeZ = Math.max(sourceNode.parentId || (elevateOnSelect && sourceNode.selected) ? sourceNode.internals.z : 0, targetNode.parentId || (elevateOnSelect && targetNode.selected) ? targetNode.internals.z : 0);
+ return edgeZ + nodeZ;
+}
+function isEdgeVisible({ sourceNode, targetNode, width, height, transform }) {
+ const edgeBox = getBoundsOfBoxes(nodeToBox(sourceNode), nodeToBox(targetNode));
+ if (edgeBox.x === edgeBox.x2) {
+ edgeBox.x2 += 1;
+ }
+ if (edgeBox.y === edgeBox.y2) {
+ edgeBox.y2 += 1;
+ }
+ const viewRect = {
+ x: -transform[0] / transform[2],
+ y: -transform[1] / transform[2],
+ width: width / transform[2],
+ height: height / transform[2],
+ };
+ return getOverlappingArea(viewRect, boxToRect(edgeBox)) > 0;
+}
+/**
+ * The default edge ID generator function. Generates an ID based on the source, target, and handles.
+ * @public
+ * @param params - The connection or edge to generate an ID for.
+ * @returns The generated edge ID.
+ */
+const getEdgeId = ({ source, sourceHandle, target, targetHandle }) => `xy-edge__${source}${sourceHandle || ''}-${target}${targetHandle || ''}`;
+const connectionExists = (edge, edges) => {
+ return edges.some((el) => el.source === edge.source &&
+ el.target === edge.target &&
+ (el.sourceHandle === edge.sourceHandle || (!el.sourceHandle && !edge.sourceHandle)) &&
+ (el.targetHandle === edge.targetHandle || (!el.targetHandle && !edge.targetHandle)));
+};
+/**
+ * This util is a convenience function to add a new Edge to an array of edges. It also performs some validation to make sure you don't add an invalid edge or duplicate an existing one.
+ * @public
+ * @param edgeParams - Either an `Edge` or a `Connection` you want to add.
+ * @param edges - The array of all current edges.
+ * @param options - Optional configuration object.
+ * @returns A new array of edges with the new edge added.
+ *
+ * @remarks If an edge with the same `target` and `source` already exists (and the same
+ *`targetHandle` and `sourceHandle` if those are set), then this util won't add
+ *a new edge even if the `id` property is different.
+ *
+ */
+const addEdge = (edgeParams, edges, options = {}) => {
+ if (!edgeParams.source || !edgeParams.target) {
+ options.onError?.('006', errorMessages['error006']());
+ return edges;
+ }
+ const edgeIdGenerator = options.getEdgeId || getEdgeId;
+ let edge;
+ if (isEdgeBase(edgeParams)) {
+ edge = { ...edgeParams };
+ }
+ else {
+ edge = {
+ ...edgeParams,
+ id: edgeIdGenerator(edgeParams),
+ };
+ }
+ if (connectionExists(edge, edges)) {
+ return edges;
+ }
+ if (edge.sourceHandle === null) {
+ delete edge.sourceHandle;
+ }
+ if (edge.targetHandle === null) {
+ delete edge.targetHandle;
+ }
+ return edges.concat(edge);
+};
+/**
+ * A handy utility to update an existing [`Edge`](/api-reference/types/edge) with new properties.
+ *This searches your edge array for an edge with a matching `id` and updates its
+ *properties with the connection you provide.
+ * @public
+ * @param oldEdge - The edge you want to update.
+ * @param newConnection - The new connection you want to update the edge with.
+ * @param edges - The array of all current edges.
+ * @returns The updated edges array.
+ *
+ * @example
+ * ```js
+ *const onReconnect = useCallback(
+ * (oldEdge: Edge, newConnection: Connection) => setEdges((els) => reconnectEdge(oldEdge, newConnection, els)),[]);
+ *```
+ */
+const reconnectEdge = (oldEdge, newConnection, edges, options = { shouldReplaceId: true }) => {
+ const { id: oldEdgeId, ...rest } = oldEdge;
+ if (!newConnection.source || !newConnection.target) {
+ options.onError?.('006', errorMessages['error006']());
+ return edges;
+ }
+ const foundEdge = edges.find((e) => e.id === oldEdge.id);
+ if (!foundEdge) {
+ options.onError?.('007', errorMessages['error007'](oldEdgeId));
+ return edges;
+ }
+ const edgeIdGenerator = options.getEdgeId || getEdgeId;
+ // Remove old edge and create the new edge with parameters of old edge.
+ const edge = {
+ ...rest,
+ id: options.shouldReplaceId ? edgeIdGenerator(newConnection) : oldEdgeId,
+ source: newConnection.source,
+ target: newConnection.target,
+ sourceHandle: newConnection.sourceHandle,
+ targetHandle: newConnection.targetHandle,
+ };
+ return edges.filter((e) => e.id !== oldEdgeId).concat(edge);
+};
+
+/**
+ * Calculates the straight line path between two points.
+ * @public
+ * @returns A path string you can use in an SVG, the `labelX` and `labelY` position (center of path)
+ * and `offsetX`, `offsetY` between source handle and label.
+ *
+ * - `path`: the path to use in an SVG `` element.
+ * - `labelX`: the `x` position you can use to render a label for this edge.
+ * - `labelY`: the `y` position you can use to render a label for this edge.
+ * - `offsetX`: the absolute difference between the source `x` position and the `x` position of the
+ * middle of this path.
+ * - `offsetY`: the absolute difference between the source `y` position and the `y` position of the
+ * middle of this path.
+ * @example
+ * ```js
+ * const source = { x: 0, y: 20 };
+ * const target = { x: 150, y: 100 };
+ *
+ * const [path, labelX, labelY, offsetX, offsetY] = getStraightPath({
+ * sourceX: source.x,
+ * sourceY: source.y,
+ * sourcePosition: Position.Right,
+ * targetX: target.x,
+ * targetY: target.y,
+ * targetPosition: Position.Left,
+ * });
+ * ```
+ * @remarks This function returns a tuple (aka a fixed-size array) to make it easier to work with multiple edge paths at once.
+ */
+function getStraightPath({ sourceX, sourceY, targetX, targetY, }) {
+ const [labelX, labelY, offsetX, offsetY] = getEdgeCenter({
+ sourceX,
+ sourceY,
+ targetX,
+ targetY,
+ });
+ return [`M ${sourceX},${sourceY}L ${targetX},${targetY}`, labelX, labelY, offsetX, offsetY];
+}
+
+const handleDirections = {
+ [Position.Left]: { x: -1, y: 0 },
+ [Position.Right]: { x: 1, y: 0 },
+ [Position.Top]: { x: 0, y: -1 },
+ [Position.Bottom]: { x: 0, y: 1 },
+};
+const getDirection = ({ source, sourcePosition = Position.Bottom, target, }) => {
+ if (sourcePosition === Position.Left || sourcePosition === Position.Right) {
+ return source.x < target.x ? { x: 1, y: 0 } : { x: -1, y: 0 };
+ }
+ return source.y < target.y ? { x: 0, y: 1 } : { x: 0, y: -1 };
+};
+const distance = (a, b) => Math.sqrt(Math.pow(b.x - a.x, 2) + Math.pow(b.y - a.y, 2));
+/*
+ * With this function we try to mimic an orthogonal edge routing behaviour
+ * It's not as good as a real orthogonal edge routing, but it's faster and good enough as a default for step and smooth step edges
+ */
+function getPoints({ source, sourcePosition = Position.Bottom, target, targetPosition = Position.Top, center, offset, stepPosition, }) {
+ const sourceDir = handleDirections[sourcePosition];
+ const targetDir = handleDirections[targetPosition];
+ const sourceGapped = { x: source.x + sourceDir.x * offset, y: source.y + sourceDir.y * offset };
+ const targetGapped = { x: target.x + targetDir.x * offset, y: target.y + targetDir.y * offset };
+ const dir = getDirection({
+ source: sourceGapped,
+ sourcePosition,
+ target: targetGapped,
+ });
+ const dirAccessor = dir.x !== 0 ? 'x' : 'y';
+ const currDir = dir[dirAccessor];
+ let points = [];
+ let centerX, centerY;
+ const sourceGapOffset = { x: 0, y: 0 };
+ const targetGapOffset = { x: 0, y: 0 };
+ const [, , defaultOffsetX, defaultOffsetY] = getEdgeCenter({
+ sourceX: source.x,
+ sourceY: source.y,
+ targetX: target.x,
+ targetY: target.y,
+ });
+ // opposite handle positions, default case
+ if (sourceDir[dirAccessor] * targetDir[dirAccessor] === -1) {
+ if (dirAccessor === 'x') {
+ // Primary direction is horizontal, so stepPosition affects X coordinate
+ centerX = center.x ?? sourceGapped.x + (targetGapped.x - sourceGapped.x) * stepPosition;
+ centerY = center.y ?? (sourceGapped.y + targetGapped.y) / 2;
+ }
+ else {
+ // Primary direction is vertical, so stepPosition affects Y coordinate
+ centerX = center.x ?? (sourceGapped.x + targetGapped.x) / 2;
+ centerY = center.y ?? sourceGapped.y + (targetGapped.y - sourceGapped.y) * stepPosition;
+ }
+ /*
+ * --->
+ * |
+ * >---
+ */
+ const verticalSplit = [
+ { x: centerX, y: sourceGapped.y },
+ { x: centerX, y: targetGapped.y },
+ ];
+ /*
+ * |
+ * ---
+ * |
+ */
+ const horizontalSplit = [
+ { x: sourceGapped.x, y: centerY },
+ { x: targetGapped.x, y: centerY },
+ ];
+ if (sourceDir[dirAccessor] === currDir) {
+ points = dirAccessor === 'x' ? verticalSplit : horizontalSplit;
+ }
+ else {
+ points = dirAccessor === 'x' ? horizontalSplit : verticalSplit;
+ }
+ }
+ else {
+ // sourceTarget means we take x from source and y from target, targetSource is the opposite
+ const sourceTarget = [{ x: sourceGapped.x, y: targetGapped.y }];
+ const targetSource = [{ x: targetGapped.x, y: sourceGapped.y }];
+ // this handles edges with same handle positions
+ if (dirAccessor === 'x') {
+ points = sourceDir.x === currDir ? targetSource : sourceTarget;
+ }
+ else {
+ points = sourceDir.y === currDir ? sourceTarget : targetSource;
+ }
+ if (sourcePosition === targetPosition) {
+ const diff = Math.abs(source[dirAccessor] - target[dirAccessor]);
+ // if an edge goes from right to right for example (sourcePosition === targetPosition) and the distance between source.x and target.x is less than the offset, the added point and the gapped source/target will overlap. This leads to a weird edge path. To avoid this we add a gapOffset to the source/target
+ if (diff <= offset) {
+ const gapOffset = Math.min(offset - 1, offset - diff);
+ if (sourceDir[dirAccessor] === currDir) {
+ sourceGapOffset[dirAccessor] = (sourceGapped[dirAccessor] > source[dirAccessor] ? -1 : 1) * gapOffset;
+ }
+ else {
+ targetGapOffset[dirAccessor] = (targetGapped[dirAccessor] > target[dirAccessor] ? -1 : 1) * gapOffset;
+ }
+ }
+ }
+ // these are conditions for handling mixed handle positions like Right -> Bottom for example
+ if (sourcePosition !== targetPosition) {
+ const dirAccessorOpposite = dirAccessor === 'x' ? 'y' : 'x';
+ const isSameDir = sourceDir[dirAccessor] === targetDir[dirAccessorOpposite];
+ const sourceGtTargetOppo = sourceGapped[dirAccessorOpposite] > targetGapped[dirAccessorOpposite];
+ const sourceLtTargetOppo = sourceGapped[dirAccessorOpposite] < targetGapped[dirAccessorOpposite];
+ const flipSourceTarget = (sourceDir[dirAccessor] === 1 && ((!isSameDir && sourceGtTargetOppo) || (isSameDir && sourceLtTargetOppo))) ||
+ (sourceDir[dirAccessor] !== 1 && ((!isSameDir && sourceLtTargetOppo) || (isSameDir && sourceGtTargetOppo)));
+ if (flipSourceTarget) {
+ points = dirAccessor === 'x' ? sourceTarget : targetSource;
+ }
+ }
+ const sourceGapPoint = { x: sourceGapped.x + sourceGapOffset.x, y: sourceGapped.y + sourceGapOffset.y };
+ const targetGapPoint = { x: targetGapped.x + targetGapOffset.x, y: targetGapped.y + targetGapOffset.y };
+ const maxXDistance = Math.max(Math.abs(sourceGapPoint.x - points[0].x), Math.abs(targetGapPoint.x - points[0].x));
+ const maxYDistance = Math.max(Math.abs(sourceGapPoint.y - points[0].y), Math.abs(targetGapPoint.y - points[0].y));
+ // we want to place the label on the longest segment of the edge
+ if (maxXDistance >= maxYDistance) {
+ centerX = (sourceGapPoint.x + targetGapPoint.x) / 2;
+ centerY = points[0].y;
+ }
+ else {
+ centerX = points[0].x;
+ centerY = (sourceGapPoint.y + targetGapPoint.y) / 2;
+ }
+ }
+ const gappedSource = { x: sourceGapped.x + sourceGapOffset.x, y: sourceGapped.y + sourceGapOffset.y };
+ const gappedTarget = { x: targetGapped.x + targetGapOffset.x, y: targetGapped.y + targetGapOffset.y };
+ const pathPoints = [
+ source,
+ // we only want to add the gapped source/target if they are different from the first/last point to avoid duplicates which can cause issues with the bends
+ ...(gappedSource.x !== points[0].x || gappedSource.y !== points[0].y ? [gappedSource] : []),
+ ...points,
+ ...(gappedTarget.x !== points[points.length - 1].x || gappedTarget.y !== points[points.length - 1].y
+ ? [gappedTarget]
+ : []),
+ target,
+ ];
+ return [pathPoints, centerX, centerY, defaultOffsetX, defaultOffsetY];
+}
+function getBend(a, b, c, size) {
+ const bendSize = Math.min(distance(a, b) / 2, distance(b, c) / 2, size);
+ const { x, y } = b;
+ // no bend
+ if ((a.x === x && x === c.x) || (a.y === y && y === c.y)) {
+ return `L${x} ${y}`;
+ }
+ // first segment is horizontal
+ if (a.y === y) {
+ const xDir = a.x < c.x ? -1 : 1;
+ const yDir = a.y < c.y ? 1 : -1;
+ return `L ${x + bendSize * xDir},${y}Q ${x},${y} ${x},${y + bendSize * yDir}`;
+ }
+ const xDir = a.x < c.x ? 1 : -1;
+ const yDir = a.y < c.y ? -1 : 1;
+ return `L ${x},${y + bendSize * yDir}Q ${x},${y} ${x + bendSize * xDir},${y}`;
+}
+/**
+ * The `getSmoothStepPath` util returns everything you need to render a stepped path
+ * between two nodes. The `borderRadius` property can be used to choose how rounded
+ * the corners of those steps are.
+ * @public
+ * @returns A path string you can use in an SVG, the `labelX` and `labelY` position (center of path)
+ * and `offsetX`, `offsetY` between source handle and label.
+ *
+ * - `path`: the path to use in an SVG `