{connection ? `Someone is trying to make a connection from ${connection.fromNode} to this one.` : 'There are currently no incoming connections!'}
-*
-*
-*
-*
-* );
-* };
-* ```
-*
-* @remarks The `` 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.
-*/
-function EdgeLabelRenderer({ children }) {
- const edgeLabelRenderer = useStore(selector$6);
- if (!edgeLabelRenderer) return null;
- return (0, import_react_dom.createPortal)(children, edgeLabelRenderer);
-}
-var selector$5 = (s) => s.domNode?.querySelector(".react-flow__viewport-portal");
-/**
-* The `` component can be used to add components to the same viewport
-* of the flow where nodes and edges are rendered. This is useful when you want to render
-* your own components that are adhere to the same coordinate system as the nodes & edges
-* and are also affected by zooming and panning
-* @public
-* @example
-*
-* ```jsx
-*import React from 'react';
-*import { ViewportPortal } from '@xyflow/react';
-*
-*export default function () {
-* return (
-*
-*
-* This div is positioned at [100, 100] on the flow.
-*
-*
-* );
-*}
-*```
-*/
-function ViewportPortal({ children }) {
- const viewPortalDiv = useStore(selector$5);
- if (!viewPortalDiv) return null;
- return (0, import_react_dom.createPortal)(children, viewPortalDiv);
-}
-/**
-* When you programmatically add or remove handles to a node or update a node's
-* handle position, you need to let React Flow know about it using this hook. This
-* will update the internal dimensions of the node and properly reposition handles
-* on the canvas if necessary.
-*
-* @public
-* @returns Use this function to tell React Flow to update the internal state of one or more nodes
-* that you have changed programmatically.
-*
-* @example
-* ```jsx
-*import { useCallback, useState } from 'react';
-*import { Handle, useUpdateNodeInternals } from '@xyflow/react';
-*
-*export default function RandomHandleNode({ id }) {
-* const updateNodeInternals = useUpdateNodeInternals();
-* const [handleCount, setHandleCount] = useState(0);
-* const randomizeHandleCount = useCallback(() => {
-* setHandleCount(Math.floor(Math.random() * 10));
-* updateNodeInternals(id);
-* }, [id, updateNodeInternals]);
-*
-* return (
-* <>
-* {Array.from({ length: handleCount }).map((_, index) => (
-*
-* ))}
-*
-*
-*
-*
There are {handleCount} handles on this node.
-*
-*
-* );
-*}
-*```
-* @remarks This hook can only be used in a component that is a child of a
-*{@link ReactFlowProvider} or a {@link ReactFlow} component.
-*/
-function useUpdateNodeInternals() {
- const store = useStoreApi();
- return (0, import_react.useCallback)((id) => {
- const { domNode, updateNodeInternals } = store.getState();
- const updateIds = Array.isArray(id) ? id : [id];
- const updates = /* @__PURE__ */ new Map();
- updateIds.forEach((updateId) => {
- const nodeElement = domNode?.querySelector(`.react-flow__node[data-id="${updateId}"]`);
- if (nodeElement) updates.set(updateId, {
- id: updateId,
- nodeElement,
- force: true
- });
- });
- requestAnimationFrame(() => updateNodeInternals(updates, { triggerFitView: false }));
- }, []);
-}
-var nodesSelector = (state) => state.nodes;
-/**
-* This hook returns an array of the current nodes. Components that use this hook
-* will re-render **whenever any node changes**, including when a node is selected
-* or moved.
-*
-* @public
-* @returns An array of all nodes currently in the flow.
-*
-* @example
-* ```jsx
-*import { useNodes } from '@xyflow/react';
-*
-*export default function() {
-* const nodes = useNodes();
-*
-* return
There are currently {nodes.length} nodes!
;
-*}
-*```
-*/
-function useNodes() {
- return useStore(nodesSelector, shallow$1);
-}
-var edgesSelector = (state) => state.edges;
-/**
-* This hook returns an array of the current edges. Components that use this hook
-* will re-render **whenever any edge changes**.
-*
-* @public
-* @returns An array of all edges currently in the flow.
-*
-* @example
-* ```tsx
-*import { useEdges } from '@xyflow/react';
-*
-*export default function () {
-* const edges = useEdges();
-*
-* return
There are currently {edges.length} edges!
;
-*}
-*```
-*/
-function useEdges() {
- return useStore(edgesSelector, shallow$1);
-}
-var viewportSelector = (state) => ({
- x: state.transform[0],
- y: state.transform[1],
- zoom: state.transform[2]
-});
-/**
-* The `useViewport` hook is a convenient way to read the current state of the
-* {@link Viewport} in a component. Components that use this hook
-* will re-render **whenever the viewport changes**.
-*
-* @public
-* @returns The current viewport.
-*
-* @example
-*
-*```jsx
-*import { useViewport } from '@xyflow/react';
-*
-*export default function ViewportDisplay() {
-* const { x, y, zoom } = useViewport();
-*
-* return (
-*
-*
-* The viewport is currently at ({x}, {y}) and zoomed to {zoom}.
-*
-*
-* );
-*}
-*```
-*
-* @remarks This hook can only be used in a component that is a child of a
-*{@link ReactFlowProvider} or a {@link ReactFlow} component.
-*/
-function useViewport() {
- return useStore(viewportSelector, shallow$1);
-}
-/**
-* This hook makes it easy to prototype a controlled flow where you manage the
-* state of nodes and edges outside the `ReactFlowInstance`. You can think of it
-* like React's `useState` hook with an additional helper callback.
-*
-* @public
-* @returns
-* - `nodes`: The current array of nodes. You might pass this directly to the `nodes` prop of your
-* `` component, or you may want to manipulate it first to perform some layouting,
-* for example.
-* - `setNodes`: A function that you can use to update the nodes. You can pass it a new array of
-* nodes or a callback that receives the current array of nodes and returns a new array of nodes.
-* This is the same as the second element of the tuple returned by React's `useState` hook.
-* - `onNodesChange`: A handy callback that can take an array of `NodeChanges` and update the nodes
-* state accordingly. You'll typically pass this directly to the `onNodesChange` prop of your
-* `` component.
-* @example
-*
-*```tsx
-*import { ReactFlow, useNodesState, useEdgesState } from '@xyflow/react';
-*
-*const initialNodes = [];
-*const initialEdges = [];
-*
-*export default function () {
-* const [nodes, setNodes, onNodesChange] = useNodesState(initialNodes);
-* const [edges, setEdges, onEdgesChange] = useEdgesState(initialEdges);
-*
-* return (
-*
-* );
-*}
-*```
-*
-* @remarks This hook was created to make prototyping easier and our documentation
-* examples clearer. Although it is OK to use this hook in production, in
-* practice you may want to use a more sophisticated state management solution
-* like Zustand {@link https://reactflow.dev/docs/guides/state-management/} instead.
-*
-*/
-function useNodesState(initialNodes) {
- const [nodes, setNodes] = (0, import_react.useState)(initialNodes);
- return [
- nodes,
- setNodes,
- (0, import_react.useCallback)((changes) => setNodes((nds) => applyNodeChanges(changes, nds)), [])
- ];
-}
-/**
-* This hook makes it easy to prototype a controlled flow where you manage the
-* state of nodes and edges outside the `ReactFlowInstance`. You can think of it
-* like React's `useState` hook with an additional helper callback.
-*
-* @public
-* @returns
-* - `edges`: The current array of edges. You might pass this directly to the `edges` prop of your
-* `` component, or you may want to manipulate it first to perform some layouting,
-* for example.
-*
-* - `setEdges`: A function that you can use to update the edges. You can pass it a new array of
-* edges or a callback that receives the current array of edges and returns a new array of edges.
-* This is the same as the second element of the tuple returned by React's `useState` hook.
-*
-* - `onEdgesChange`: A handy callback that can take an array of `EdgeChanges` and update the edges
-* state accordingly. You'll typically pass this directly to the `onEdgesChange` prop of your
-* `` component.
-* @example
-*
-*```tsx
-*import { ReactFlow, useNodesState, useEdgesState } from '@xyflow/react';
-*
-*const initialNodes = [];
-*const initialEdges = [];
-*
-*export default function () {
-* const [nodes, setNodes, onNodesChange] = useNodesState(initialNodes);
-* const [edges, setEdges, onEdgesChange] = useEdgesState(initialEdges);
-*
-* return (
-*
-* );
-*}
-*```
-*
-* @remarks This hook was created to make prototyping easier and our documentation
-* examples clearer. Although it is OK to use this hook in production, in
-* practice you may want to use a more sophisticated state management solution
-* like Zustand {@link https://reactflow.dev/docs/guides/state-management/} instead.
-*
-*/
-function useEdgesState(initialEdges) {
- const [edges, setEdges] = (0, import_react.useState)(initialEdges);
- return [
- edges,
- setEdges,
- (0, import_react.useCallback)((changes) => setEdges((eds) => applyEdgeChanges(changes, eds)), [])
- ];
-}
-/**
-* The `useOnViewportChange` hook lets you listen for changes to the viewport such
-* as panning and zooming. You can provide a callback for each phase of a viewport
-* change: `onStart`, `onChange`, and `onEnd`.
-*
-* @public
-* @example
-* ```jsx
-*import { useCallback } from 'react';
-*import { useOnViewportChange } from '@xyflow/react';
-*
-*function ViewportChangeLogger() {
-* useOnViewportChange({
-* onStart: (viewport: Viewport) => console.log('start', viewport),
-* onChange: (viewport: Viewport) => console.log('change', viewport),
-* onEnd: (viewport: Viewport) => console.log('end', viewport),
-* });
-*
-* return null;
-*}
-*```
-*/
-function useOnViewportChange({ onStart, onChange, onEnd }) {
- const store = useStoreApi();
- (0, import_react.useEffect)(() => {
- store.setState({ onViewportChangeStart: onStart });
- }, [onStart]);
- (0, import_react.useEffect)(() => {
- store.setState({ onViewportChange: onChange });
- }, [onChange]);
- (0, import_react.useEffect)(() => {
- store.setState({ onViewportChangeEnd: onEnd });
- }, [onEnd]);
-}
-/**
-* This hook lets you listen for changes to both node and edge selection. As the
-*name implies, the callback you provide will be called whenever the selection of
-*_either_ nodes or edges changes.
-*
-* @public
-* @example
-* ```jsx
-*import { useState } from 'react';
-*import { ReactFlow, useOnSelectionChange } from '@xyflow/react';
-*
-*function SelectionDisplay() {
-* const [selectedNodes, setSelectedNodes] = useState([]);
-* const [selectedEdges, setSelectedEdges] = useState([]);
-*
-* // the passed handler has to be memoized, otherwise the hook will not work correctly
-* const onChange = useCallback(({ nodes, edges }) => {
-* setSelectedNodes(nodes.map((node) => node.id));
-* setSelectedEdges(edges.map((edge) => edge.id));
-* }, []);
-*
-* useOnSelectionChange({
-* onChange,
-* });
-*
-* return (
-*
-*
Selected nodes: {selectedNodes.join(', ')}
-*
Selected edges: {selectedEdges.join(', ')}
-*
-* );
-*}
-*```
-*
-* @remarks You need to memoize the passed `onChange` handler, otherwise the hook will not work correctly.
-*/
-function useOnSelectionChange({ onChange }) {
- const store = useStoreApi();
- (0, import_react.useEffect)(() => {
- const nextOnSelectionChangeHandlers = [...store.getState().onSelectionChangeHandlers, onChange];
- store.setState({ onSelectionChangeHandlers: nextOnSelectionChangeHandlers });
- return () => {
- const nextHandlers = store.getState().onSelectionChangeHandlers.filter((fn) => fn !== onChange);
- store.setState({ onSelectionChangeHandlers: nextHandlers });
- };
- }, [onChange]);
-}
-var selector$4 = (options) => (s) => {
- if (!options.includeHiddenNodes) return s.nodesInitialized;
- if (s.nodeLookup.size === 0) return false;
- for (const [, { internals }] of s.nodeLookup) if (internals.handleBounds === void 0 || !nodeHasDimensions(internals.userNode)) return false;
- return true;
-};
-/**
-* This hook tells you whether all the nodes in a flow have been measured and given
-*a width and height. When you add a node to the flow, this hook will return
-*`false` and then `true` again once the node has been measured.
-*
-* @public
-* @returns Whether or not the nodes have been initialized by the `` component and
-* given a width and height.
-*
-* @example
-* ```jsx
-*import { useReactFlow, useNodesInitialized } from '@xyflow/react';
-*import { useEffect, useState } from 'react';
-*
-*const options = {
-* includeHiddenNodes: false,
-*};
-*
-*export default function useLayout() {
-* const { getNodes } = useReactFlow();
-* const nodesInitialized = useNodesInitialized(options);
-* const [layoutedNodes, setLayoutedNodes] = useState(getNodes());
-*
-* useEffect(() => {
-* if (nodesInitialized) {
-* setLayoutedNodes(yourLayoutingFunction(getNodes()));
-* }
-* }, [nodesInitialized]);
-*
-* return layoutedNodes;
-*}
-*```
-*/
-function useNodesInitialized(options = { includeHiddenNodes: false }) {
- return useStore(selector$4(options));
-}
-/**
-* Hook to check if a is connected to another and get the connections.
-*
-* @public
-* @deprecated Use `useNodeConnections` instead.
-* @returns An array with handle connections.
-*/
-function useHandleConnections({ type, id, nodeId, onConnect, onDisconnect }) {
- console.warn("[DEPRECATED] `useHandleConnections` is deprecated. Instead use `useNodeConnections` https://reactflow.dev/api-reference/hooks/useNodeConnections");
- const _nodeId = useNodeId();
- const currentNodeId = nodeId ?? _nodeId;
- const prevConnections = (0, import_react.useRef)(null);
- const connections = useStore((state) => state.connectionLookup.get(`${currentNodeId}-${type}${id ? `-${id}` : ""}`), areConnectionMapsEqual);
- (0, import_react.useEffect)(() => {
- if (prevConnections.current && prevConnections.current !== connections) {
- const _connections = connections ?? /* @__PURE__ */ new Map();
- handleConnectionChange(prevConnections.current, _connections, onDisconnect);
- handleConnectionChange(_connections, prevConnections.current, onConnect);
- }
- prevConnections.current = connections ?? /* @__PURE__ */ new Map();
- }, [
- connections,
- onConnect,
- onDisconnect
- ]);
- return (0, import_react.useMemo)(() => Array.from(connections?.values() ?? []), [connections]);
-}
-var error014 = errorMessages["error014"]();
-/**
-* This hook returns an array of connections on a specific node, handle type ('source', 'target') or handle ID.
-*
-* @public
-* @returns An array with connections.
-*
-* @example
-* ```jsx
-*import { useNodeConnections } from '@xyflow/react';
-*
-*export default function () {
-* const connections = useNodeConnections({
-* handleType: 'target',
-* handleId: 'my-handle',
-* });
-*
-* return (
-*
There are currently {connections.length} incoming connections!
-* );
-*}
-*```
-*/
-function useNodeConnections({ id, handleType, handleId, onConnect, onDisconnect } = {}) {
- const nodeId = useNodeId();
- const currentNodeId = id ?? nodeId;
- if (!currentNodeId) throw new Error(error014);
- const prevConnections = (0, import_react.useRef)(null);
- const connections = useStore((state) => state.connectionLookup.get(`${currentNodeId}${handleType ? handleId ? `-${handleType}-${handleId}` : `-${handleType}` : ""}`), areConnectionMapsEqual);
- (0, import_react.useEffect)(() => {
- if (prevConnections.current && prevConnections.current !== connections) {
- const _connections = connections ?? /* @__PURE__ */ new Map();
- handleConnectionChange(prevConnections.current, _connections, onDisconnect);
- handleConnectionChange(_connections, prevConnections.current, onConnect);
- }
- prevConnections.current = connections ?? /* @__PURE__ */ new Map();
- }, [
- connections,
- onConnect,
- onDisconnect
- ]);
- return (0, import_react.useMemo)(() => Array.from(connections?.values() ?? []), [connections]);
-}
-function useNodesData(nodeIds) {
- return useStore((0, import_react.useCallback)((s) => {
- const data = [];
- const isArrayOfIds = Array.isArray(nodeIds);
- const _nodeIds = isArrayOfIds ? nodeIds : [nodeIds];
- for (const nodeId of _nodeIds) {
- const node = s.nodeLookup.get(nodeId);
- if (node) data.push({
- id: node.id,
- type: node.type,
- data: node.data
- });
- }
- return isArrayOfIds ? data : data[0] ?? null;
- }, [nodeIds]), shallowNodeData);
-}
-/**
-* This hook returns the internal representation of a specific node.
-* Components that use this hook will re-render **whenever the node changes**,
-* including when a node is selected or moved.
-*
-* @public
-* @param id - The ID of a node you want to observe.
-* @returns The `InternalNode` object for the node with the given ID.
-*
-* @example
-* ```tsx
-*import { useInternalNode } from '@xyflow/react';
-*
-*export default function () {
-* const internalNode = useInternalNode('node-1');
-* const absolutePosition = internalNode.internals.positionAbsolute;
-*
-* return (
-*
-*
-*
-*
-*
-* );
-*};
-*
-*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`.
-*/
-function NodeToolbar({ nodeId, children, className, style, isVisible, position = Position.Top, offset = 10, align = "center", ...rest }) {
- const contextNodeId = useNodeId();
- const nodes = useStore((0, import_react.useCallback)((state) => {
- return (Array.isArray(nodeId) ? nodeId : [nodeId || contextNodeId || ""]).reduce((res, id) => {
- const node = state.nodeLookup.get(id);
- if (node) res.set(node.id, node);
- return res;
- }, /* @__PURE__ */ new Map());
- }, [nodeId, contextNodeId]), nodesEqualityFn);
- const { x, y, zoom, selectedNodesCount } = useStore(storeSelector, shallow$1);
- if (!(typeof isVisible === "boolean" ? isVisible : nodes.size === 1 && nodes.values().next().value?.selected && selectedNodesCount === 1) || !nodes.size) return null;
- const nodeRect = getInternalNodesBounds(nodes);
- const nodesArray = Array.from(nodes.values());
- const zIndex = Math.max(...nodesArray.map((node) => node.internals.z + 1));
- return (0, import_jsx_runtime.jsx)(NodeToolbarPortal, { children: (0, import_jsx_runtime.jsx)("div", {
- style: {
- position: "absolute",
- transform: getNodeToolbarTransform(nodeRect, {
- x,
- y,
- zoom
- }, position, offset, align),
- zIndex,
- ...style
- },
- className: cc(["react-flow__node-toolbar", className]),
- ...rest,
- "data-id": nodesArray.reduce((acc, node) => `${acc}${node.id} `, "").trim(),
- children
- }) });
-}
-var zoomSelector = (state) => state.transform[2];
-/**
-* This component can render a toolbar or tooltip to one side of a custom edge. This
-* toolbar doesn't scale with the viewport so that the content stays the same size.
-*
-* @public
-* @example
-* ```jsx
-* import { EdgeToolbar, BaseEdge, getBezierPath, type EdgeProps } from "@xyflow/react";
-*
-* export function CustomEdge({ id, data, ...props }: EdgeProps) {
-* const [edgePath, centerX, centerY] = getBezierPath(props);
-*
-* return (
-* <>
-*
-*
-*
-*
-*
-* );
-* }
-* ```
-*/
-function EdgeToolbar({ edgeId, x, y, children, className, style, isVisible, alignX = "center", alignY = "center", ...rest }) {
- const edge = useStore((0, import_react.useCallback)((state) => state.edgeLookup.get(edgeId), [edgeId]), shallow$1);
- const isActive = typeof isVisible === "boolean" ? isVisible : edge?.selected;
- const zoom = useStore(zoomSelector);
- if (!isActive) return null;
- const zIndex = (edge?.zIndex ?? 0) + 1;
- return (0, import_jsx_runtime.jsx)(EdgeLabelRenderer, { children: (0, import_jsx_runtime.jsx)("div", {
- style: {
- position: "absolute",
- transform: getEdgeToolbarTransform(x, y, zoom, alignX, alignY),
- zIndex,
- pointerEvents: "all",
- transformOrigin: "0 0",
- ...style
- },
- className: cc(["react-flow__edge-toolbar", className]),
- "data-id": edge?.id ?? "",
- ...rest,
- children
- }) });
-}
-//#endregion
-export { Background, BackgroundVariant, BaseEdge, BezierEdge, ConnectionLineType, ConnectionMode, ControlButton, Controls, EdgeLabelRenderer, EdgeText, EdgeToolbar, Handle, MarkerType, MiniMap, MiniMapNode, NodeResizeControl, NodeResizer, NodeToolbar, PanOnScrollMode, Panel, Position, index as ReactFlow, ReactFlowProvider, ResizeControlVariant, SelectionMode, SimpleBezierEdge, SmoothStepEdge, StepEdge, StraightEdge, ViewportPortal, addEdge, applyEdgeChanges, applyNodeChanges, experimental_useOnEdgesChangeMiddleware, experimental_useOnNodesChangeMiddleware, getBezierEdgeCenter, getBezierPath, getConnectedEdges, getEdgeCenter, getIncomers, getNodesBounds, getOutgoers, getSimpleBezierPath, getSmoothStepPath, getStraightPath, getViewportForBounds, isEdge, isNode, reconnectEdge, useConnection, useEdges, useEdgesState, useHandleConnections, useInternalNode, useKeyPress, useNodeConnections, useNodeId, useNodes, useNodesData, useNodesInitialized, useNodesState, useOnSelectionChange, useOnViewportChange, useReactFlow, useStore, useStoreApi, useUpdateNodeInternals, useViewport };
-
-//# sourceMappingURL=@xyflow_react.js.map
\ No newline at end of file
diff --git a/node_modules/.vite/deps/@xyflow_react.js.map b/node_modules/.vite/deps/@xyflow_react.js.map
deleted file mode 100644
index 42834e1..0000000
--- a/node_modules/.vite/deps/@xyflow_react.js.map
+++ /dev/null
@@ -1 +0,0 @@
-{"version":3,"file":"@xyflow_react.js","names":["parseTypenames","get","set","namespaces","namespace","selector","Selection","selectorAll","Selection","matcher","Selection","Selection","sparse","constant","Selection","Selection","sparse","Selection","Selection","attrRemove","attrRemoveNS","attrConstant","attrConstantNS","attrFunction","attrFunctionNS","namespace","styleRemove","styleConstant","styleFunction","defaultView","textConstant","textFunction","creator","creator","selector","defaultView","Selection","selection_select","selection_selectAll","selection_selectChild","selection_selectChildren","selection_filter","selection_data","selection_enter","selection_exit","selection_join","selection_merge","selection_order","selection_sort","selection_call","selection_nodes","selection_node","selection_size","selection_empty","selection_each","selection_attr","selection_style","selection_property","selection_classed","selection_text","selection_html","selection_raise","selection_lower","selection_append","selection_insert","selection_remove","selection_clone","selection_datum","selection_on","selection_dispatch","selection_iterator","Selection","sourceEvent","nopropagation","select","noevent","defaultFilter","defaultTouchable","pointer","constant","define","constant","rgb","colorRgb","basis","basisClosed","value","value","number","constant","number","rgb","string","date","numberArray","object","identity","identity","decompose","number","timeout","interpolateNumber","interpolateRgb","interpolateString","namespace","interpolateTransform","interpolate","namespace","matcher","selector","selectorAll","style","interpolateTransform","interpolate","transition_select","transition_selectAll","transition_filter","transition_merge","transition_selection","transition_transition","transition_on","transition_attr","transition_attrTween","transition_style","transition_styleTween","transition_text","transition_textTween","transition_remove","transition_tween","transition_delay","transition_duration","transition_ease","transition_easeVarying","transition_end","easeCubicInOut","selection_interrupt","selection_transition","identity","identity","interpolateZoom","select","pointer","constant","addEdge","reconnectEdge","select","drag","zoom","zoomIdentity","pointer","interpolate","interpolateZoom","transform","zoomTransform","initPrevValues","createStore","ReactExports","useSyncExternalStoreExports","createStore","Fragment","shallow","useLayoutEffect","useEffect"],"sources":["../../classcat/index.js","../../d3-dispatch/src/dispatch.js","../../d3-selection/src/namespaces.js","../../d3-selection/src/namespace.js","../../d3-selection/src/creator.js","../../d3-selection/src/selector.js","../../d3-selection/src/selection/select.js","../../d3-selection/src/array.js","../../d3-selection/src/selectorAll.js","../../d3-selection/src/selection/selectAll.js","../../d3-selection/src/matcher.js","../../d3-selection/src/selection/selectChild.js","../../d3-selection/src/selection/selectChildren.js","../../d3-selection/src/selection/filter.js","../../d3-selection/src/selection/sparse.js","../../d3-selection/src/selection/enter.js","../../d3-selection/src/constant.js","../../d3-selection/src/selection/data.js","../../d3-selection/src/selection/exit.js","../../d3-selection/src/selection/join.js","../../d3-selection/src/selection/merge.js","../../d3-selection/src/selection/order.js","../../d3-selection/src/selection/sort.js","../../d3-selection/src/selection/call.js","../../d3-selection/src/selection/nodes.js","../../d3-selection/src/selection/node.js","../../d3-selection/src/selection/size.js","../../d3-selection/src/selection/empty.js","../../d3-selection/src/selection/each.js","../../d3-selection/src/selection/attr.js","../../d3-selection/src/window.js","../../d3-selection/src/selection/style.js","../../d3-selection/src/selection/property.js","../../d3-selection/src/selection/classed.js","../../d3-selection/src/selection/text.js","../../d3-selection/src/selection/html.js","../../d3-selection/src/selection/raise.js","../../d3-selection/src/selection/lower.js","../../d3-selection/src/selection/append.js","../../d3-selection/src/selection/insert.js","../../d3-selection/src/selection/remove.js","../../d3-selection/src/selection/clone.js","../../d3-selection/src/selection/datum.js","../../d3-selection/src/selection/on.js","../../d3-selection/src/selection/dispatch.js","../../d3-selection/src/selection/iterator.js","../../d3-selection/src/selection/index.js","../../d3-selection/src/select.js","../../d3-selection/src/sourceEvent.js","../../d3-selection/src/pointer.js","../../d3-drag/src/noevent.js","../../d3-drag/src/nodrag.js","../../d3-drag/src/constant.js","../../d3-drag/src/event.js","../../d3-drag/src/drag.js","../../d3-color/src/define.js","../../d3-color/src/color.js","../../d3-interpolate/src/basis.js","../../d3-interpolate/src/basisClosed.js","../../d3-interpolate/src/constant.js","../../d3-interpolate/src/color.js","../../d3-interpolate/src/rgb.js","../../d3-interpolate/src/numberArray.js","../../d3-interpolate/src/array.js","../../d3-interpolate/src/date.js","../../d3-interpolate/src/number.js","../../d3-interpolate/src/object.js","../../d3-interpolate/src/string.js","../../d3-interpolate/src/value.js","../../d3-interpolate/src/transform/decompose.js","../../d3-interpolate/src/transform/parse.js","../../d3-interpolate/src/transform/index.js","../../d3-interpolate/src/zoom.js","../../d3-timer/src/timer.js","../../d3-timer/src/timeout.js","../../d3-transition/src/transition/schedule.js","../../d3-transition/src/interrupt.js","../../d3-transition/src/selection/interrupt.js","../../d3-transition/src/transition/tween.js","../../d3-transition/src/transition/interpolate.js","../../d3-transition/src/transition/attr.js","../../d3-transition/src/transition/attrTween.js","../../d3-transition/src/transition/delay.js","../../d3-transition/src/transition/duration.js","../../d3-transition/src/transition/ease.js","../../d3-transition/src/transition/easeVarying.js","../../d3-transition/src/transition/filter.js","../../d3-transition/src/transition/merge.js","../../d3-transition/src/transition/on.js","../../d3-transition/src/transition/remove.js","../../d3-transition/src/transition/select.js","../../d3-transition/src/transition/selectAll.js","../../d3-transition/src/transition/selection.js","../../d3-transition/src/transition/style.js","../../d3-transition/src/transition/styleTween.js","../../d3-transition/src/transition/text.js","../../d3-transition/src/transition/textTween.js","../../d3-transition/src/transition/transition.js","../../d3-transition/src/transition/end.js","../../d3-transition/src/transition/index.js","../../d3-ease/src/cubic.js","../../d3-transition/src/selection/transition.js","../../d3-transition/src/selection/index.js","../../d3-zoom/src/constant.js","../../d3-zoom/src/event.js","../../d3-zoom/src/transform.js","../../d3-zoom/src/noevent.js","../../d3-zoom/src/zoom.js","../../@xyflow/system/dist/esm/index.js","../../use-sync-external-store/cjs/use-sync-external-store-shim.development.js","../../use-sync-external-store/shim/index.js","../../use-sync-external-store/cjs/use-sync-external-store-shim/with-selector.development.js","../../use-sync-external-store/shim/with-selector.js","../../@xyflow/react/node_modules/zustand/esm/vanilla.mjs","../../@xyflow/react/node_modules/zustand/esm/traditional.mjs","../../@xyflow/react/node_modules/zustand/esm/shallow.mjs","../../@xyflow/react/dist/esm/index.js"],"sourcesContent":["export default function cc(names) {\n if (typeof names === \"string\" || typeof names === \"number\") return \"\" + names\n\n let out = \"\"\n\n if (Array.isArray(names)) {\n for (let i = 0, tmp; i < names.length; i++) {\n if ((tmp = cc(names[i])) !== \"\") {\n out += (out && \" \") + tmp\n }\n }\n } else {\n for (let k in names) {\n if (names[k]) out += (out && \" \") + k\n }\n }\n\n return out\n}\n","var noop = {value: () => {}};\n\nfunction dispatch() {\n for (var i = 0, n = arguments.length, _ = {}, t; i < n; ++i) {\n if (!(t = arguments[i] + \"\") || (t in _) || /[\\s.]/.test(t)) throw new Error(\"illegal type: \" + t);\n _[t] = [];\n }\n return new Dispatch(_);\n}\n\nfunction Dispatch(_) {\n this._ = _;\n}\n\nfunction parseTypenames(typenames, types) {\n return typenames.trim().split(/^|\\s+/).map(function(t) {\n var name = \"\", i = t.indexOf(\".\");\n if (i >= 0) name = t.slice(i + 1), t = t.slice(0, i);\n if (t && !types.hasOwnProperty(t)) throw new Error(\"unknown type: \" + t);\n return {type: t, name: name};\n });\n}\n\nDispatch.prototype = dispatch.prototype = {\n constructor: Dispatch,\n on: function(typename, callback) {\n var _ = this._,\n T = parseTypenames(typename + \"\", _),\n t,\n i = -1,\n n = T.length;\n\n // If no callback was specified, return the callback of the given type and name.\n if (arguments.length < 2) {\n while (++i < n) if ((t = (typename = T[i]).type) && (t = get(_[t], typename.name))) return t;\n return;\n }\n\n // If a type was specified, set the callback for the given type and name.\n // Otherwise, if a null callback was specified, remove callbacks of the given name.\n if (callback != null && typeof callback !== \"function\") throw new Error(\"invalid callback: \" + callback);\n while (++i < n) {\n if (t = (typename = T[i]).type) _[t] = set(_[t], typename.name, callback);\n else if (callback == null) for (t in _) _[t] = set(_[t], typename.name, null);\n }\n\n return this;\n },\n copy: function() {\n var copy = {}, _ = this._;\n for (var t in _) copy[t] = _[t].slice();\n return new Dispatch(copy);\n },\n call: function(type, that) {\n if ((n = arguments.length - 2) > 0) for (var args = new Array(n), i = 0, n, t; i < n; ++i) args[i] = arguments[i + 2];\n if (!this._.hasOwnProperty(type)) throw new Error(\"unknown type: \" + type);\n for (t = this._[type], i = 0, n = t.length; i < n; ++i) t[i].value.apply(that, args);\n },\n apply: function(type, that, args) {\n if (!this._.hasOwnProperty(type)) throw new Error(\"unknown type: \" + type);\n for (var t = this._[type], i = 0, n = t.length; i < n; ++i) t[i].value.apply(that, args);\n }\n};\n\nfunction get(type, name) {\n for (var i = 0, n = type.length, c; i < n; ++i) {\n if ((c = type[i]).name === name) {\n return c.value;\n }\n }\n}\n\nfunction set(type, name, callback) {\n for (var i = 0, n = type.length; i < n; ++i) {\n if (type[i].name === name) {\n type[i] = noop, type = type.slice(0, i).concat(type.slice(i + 1));\n break;\n }\n }\n if (callback != null) type.push({name: name, value: callback});\n return type;\n}\n\nexport default dispatch;\n","export var xhtml = \"http://www.w3.org/1999/xhtml\";\n\nexport default {\n svg: \"http://www.w3.org/2000/svg\",\n xhtml: xhtml,\n xlink: \"http://www.w3.org/1999/xlink\",\n xml: \"http://www.w3.org/XML/1998/namespace\",\n xmlns: \"http://www.w3.org/2000/xmlns/\"\n};\n","import namespaces from \"./namespaces.js\";\n\nexport default function(name) {\n var prefix = name += \"\", i = prefix.indexOf(\":\");\n if (i >= 0 && (prefix = name.slice(0, i)) !== \"xmlns\") name = name.slice(i + 1);\n return namespaces.hasOwnProperty(prefix) ? {space: namespaces[prefix], local: name} : name; // eslint-disable-line no-prototype-builtins\n}\n","import namespace from \"./namespace.js\";\nimport {xhtml} from \"./namespaces.js\";\n\nfunction creatorInherit(name) {\n return function() {\n var document = this.ownerDocument,\n uri = this.namespaceURI;\n return uri === xhtml && document.documentElement.namespaceURI === xhtml\n ? document.createElement(name)\n : document.createElementNS(uri, name);\n };\n}\n\nfunction creatorFixed(fullname) {\n return function() {\n return this.ownerDocument.createElementNS(fullname.space, fullname.local);\n };\n}\n\nexport default function(name) {\n var fullname = namespace(name);\n return (fullname.local\n ? creatorFixed\n : creatorInherit)(fullname);\n}\n","function none() {}\n\nexport default function(selector) {\n return selector == null ? none : function() {\n return this.querySelector(selector);\n };\n}\n","import {Selection} from \"./index.js\";\nimport selector from \"../selector.js\";\n\nexport default function(select) {\n if (typeof select !== \"function\") select = selector(select);\n\n for (var groups = this._groups, m = groups.length, subgroups = new Array(m), j = 0; j < m; ++j) {\n for (var group = groups[j], n = group.length, subgroup = subgroups[j] = new Array(n), node, subnode, i = 0; i < n; ++i) {\n if ((node = group[i]) && (subnode = select.call(node, node.__data__, i, group))) {\n if (\"__data__\" in node) subnode.__data__ = node.__data__;\n subgroup[i] = subnode;\n }\n }\n }\n\n return new Selection(subgroups, this._parents);\n}\n","// Given something array like (or null), returns something that is strictly an\n// array. This is used to ensure that array-like objects passed to d3.selectAll\n// or selection.selectAll are converted into proper arrays when creating a\n// selection; we don’t ever want to create a selection backed by a live\n// HTMLCollection or NodeList. However, note that selection.selectAll will use a\n// static NodeList as a group, since it safely derived from querySelectorAll.\nexport default function array(x) {\n return x == null ? [] : Array.isArray(x) ? x : Array.from(x);\n}\n","function empty() {\n return [];\n}\n\nexport default function(selector) {\n return selector == null ? empty : function() {\n return this.querySelectorAll(selector);\n };\n}\n","import {Selection} from \"./index.js\";\nimport array from \"../array.js\";\nimport selectorAll from \"../selectorAll.js\";\n\nfunction arrayAll(select) {\n return function() {\n return array(select.apply(this, arguments));\n };\n}\n\nexport default function(select) {\n if (typeof select === \"function\") select = arrayAll(select);\n else select = selectorAll(select);\n\n for (var groups = this._groups, m = groups.length, subgroups = [], parents = [], j = 0; j < m; ++j) {\n for (var group = groups[j], n = group.length, node, i = 0; i < n; ++i) {\n if (node = group[i]) {\n subgroups.push(select.call(node, node.__data__, i, group));\n parents.push(node);\n }\n }\n }\n\n return new Selection(subgroups, parents);\n}\n","export default function(selector) {\n return function() {\n return this.matches(selector);\n };\n}\n\nexport function childMatcher(selector) {\n return function(node) {\n return node.matches(selector);\n };\n}\n\n","import {childMatcher} from \"../matcher.js\";\n\nvar find = Array.prototype.find;\n\nfunction childFind(match) {\n return function() {\n return find.call(this.children, match);\n };\n}\n\nfunction childFirst() {\n return this.firstElementChild;\n}\n\nexport default function(match) {\n return this.select(match == null ? childFirst\n : childFind(typeof match === \"function\" ? match : childMatcher(match)));\n}\n","import {childMatcher} from \"../matcher.js\";\n\nvar filter = Array.prototype.filter;\n\nfunction children() {\n return Array.from(this.children);\n}\n\nfunction childrenFilter(match) {\n return function() {\n return filter.call(this.children, match);\n };\n}\n\nexport default function(match) {\n return this.selectAll(match == null ? children\n : childrenFilter(typeof match === \"function\" ? match : childMatcher(match)));\n}\n","import {Selection} from \"./index.js\";\nimport matcher from \"../matcher.js\";\n\nexport default function(match) {\n if (typeof match !== \"function\") match = matcher(match);\n\n for (var groups = this._groups, m = groups.length, subgroups = new Array(m), j = 0; j < m; ++j) {\n for (var group = groups[j], n = group.length, subgroup = subgroups[j] = [], node, i = 0; i < n; ++i) {\n if ((node = group[i]) && match.call(node, node.__data__, i, group)) {\n subgroup.push(node);\n }\n }\n }\n\n return new Selection(subgroups, this._parents);\n}\n","export default function(update) {\n return new Array(update.length);\n}\n","import sparse from \"./sparse.js\";\nimport {Selection} from \"./index.js\";\n\nexport default function() {\n return new Selection(this._enter || this._groups.map(sparse), this._parents);\n}\n\nexport function EnterNode(parent, datum) {\n this.ownerDocument = parent.ownerDocument;\n this.namespaceURI = parent.namespaceURI;\n this._next = null;\n this._parent = parent;\n this.__data__ = datum;\n}\n\nEnterNode.prototype = {\n constructor: EnterNode,\n appendChild: function(child) { return this._parent.insertBefore(child, this._next); },\n insertBefore: function(child, next) { return this._parent.insertBefore(child, next); },\n querySelector: function(selector) { return this._parent.querySelector(selector); },\n querySelectorAll: function(selector) { return this._parent.querySelectorAll(selector); }\n};\n","export default function(x) {\n return function() {\n return x;\n };\n}\n","import {Selection} from \"./index.js\";\nimport {EnterNode} from \"./enter.js\";\nimport constant from \"../constant.js\";\n\nfunction bindIndex(parent, group, enter, update, exit, data) {\n var i = 0,\n node,\n groupLength = group.length,\n dataLength = data.length;\n\n // Put any non-null nodes that fit into update.\n // Put any null nodes into enter.\n // Put any remaining data into enter.\n for (; i < dataLength; ++i) {\n if (node = group[i]) {\n node.__data__ = data[i];\n update[i] = node;\n } else {\n enter[i] = new EnterNode(parent, data[i]);\n }\n }\n\n // Put any non-null nodes that don’t fit into exit.\n for (; i < groupLength; ++i) {\n if (node = group[i]) {\n exit[i] = node;\n }\n }\n}\n\nfunction bindKey(parent, group, enter, update, exit, data, key) {\n var i,\n node,\n nodeByKeyValue = new Map,\n groupLength = group.length,\n dataLength = data.length,\n keyValues = new Array(groupLength),\n keyValue;\n\n // Compute the key for each node.\n // If multiple nodes have the same key, the duplicates are added to exit.\n for (i = 0; i < groupLength; ++i) {\n if (node = group[i]) {\n keyValues[i] = keyValue = key.call(node, node.__data__, i, group) + \"\";\n if (nodeByKeyValue.has(keyValue)) {\n exit[i] = node;\n } else {\n nodeByKeyValue.set(keyValue, node);\n }\n }\n }\n\n // Compute the key for each datum.\n // If there a node associated with this key, join and add it to update.\n // If there is not (or the key is a duplicate), add it to enter.\n for (i = 0; i < dataLength; ++i) {\n keyValue = key.call(parent, data[i], i, data) + \"\";\n if (node = nodeByKeyValue.get(keyValue)) {\n update[i] = node;\n node.__data__ = data[i];\n nodeByKeyValue.delete(keyValue);\n } else {\n enter[i] = new EnterNode(parent, data[i]);\n }\n }\n\n // Add any remaining nodes that were not bound to data to exit.\n for (i = 0; i < groupLength; ++i) {\n if ((node = group[i]) && (nodeByKeyValue.get(keyValues[i]) === node)) {\n exit[i] = node;\n }\n }\n}\n\nfunction datum(node) {\n return node.__data__;\n}\n\nexport default function(value, key) {\n if (!arguments.length) return Array.from(this, datum);\n\n var bind = key ? bindKey : bindIndex,\n parents = this._parents,\n groups = this._groups;\n\n if (typeof value !== \"function\") value = constant(value);\n\n for (var m = groups.length, update = new Array(m), enter = new Array(m), exit = new Array(m), j = 0; j < m; ++j) {\n var parent = parents[j],\n group = groups[j],\n groupLength = group.length,\n data = arraylike(value.call(parent, parent && parent.__data__, j, parents)),\n dataLength = data.length,\n enterGroup = enter[j] = new Array(dataLength),\n updateGroup = update[j] = new Array(dataLength),\n exitGroup = exit[j] = new Array(groupLength);\n\n bind(parent, group, enterGroup, updateGroup, exitGroup, data, key);\n\n // Now connect the enter nodes to their following update node, such that\n // appendChild can insert the materialized enter node before this node,\n // rather than at the end of the parent node.\n for (var i0 = 0, i1 = 0, previous, next; i0 < dataLength; ++i0) {\n if (previous = enterGroup[i0]) {\n if (i0 >= i1) i1 = i0 + 1;\n while (!(next = updateGroup[i1]) && ++i1 < dataLength);\n previous._next = next || null;\n }\n }\n }\n\n update = new Selection(update, parents);\n update._enter = enter;\n update._exit = exit;\n return update;\n}\n\n// Given some data, this returns an array-like view of it: an object that\n// exposes a length property and allows numeric indexing. Note that unlike\n// selectAll, this isn’t worried about “live” collections because the resulting\n// array will only be used briefly while data is being bound. (It is possible to\n// cause the data to change while iterating by using a key function, but please\n// don’t; we’d rather avoid a gratuitous copy.)\nfunction arraylike(data) {\n return typeof data === \"object\" && \"length\" in data\n ? data // Array, TypedArray, NodeList, array-like\n : Array.from(data); // Map, Set, iterable, string, or anything else\n}\n","import sparse from \"./sparse.js\";\nimport {Selection} from \"./index.js\";\n\nexport default function() {\n return new Selection(this._exit || this._groups.map(sparse), this._parents);\n}\n","export default function(onenter, onupdate, onexit) {\n var enter = this.enter(), update = this, exit = this.exit();\n if (typeof onenter === \"function\") {\n enter = onenter(enter);\n if (enter) enter = enter.selection();\n } else {\n enter = enter.append(onenter + \"\");\n }\n if (onupdate != null) {\n update = onupdate(update);\n if (update) update = update.selection();\n }\n if (onexit == null) exit.remove(); else onexit(exit);\n return enter && update ? enter.merge(update).order() : update;\n}\n","import {Selection} from \"./index.js\";\n\nexport default function(context) {\n var selection = context.selection ? context.selection() : context;\n\n for (var groups0 = this._groups, groups1 = selection._groups, m0 = groups0.length, m1 = groups1.length, m = Math.min(m0, m1), merges = new Array(m0), j = 0; j < m; ++j) {\n for (var group0 = groups0[j], group1 = groups1[j], n = group0.length, merge = merges[j] = new Array(n), node, i = 0; i < n; ++i) {\n if (node = group0[i] || group1[i]) {\n merge[i] = node;\n }\n }\n }\n\n for (; j < m0; ++j) {\n merges[j] = groups0[j];\n }\n\n return new Selection(merges, this._parents);\n}\n","export default function() {\n\n for (var groups = this._groups, j = -1, m = groups.length; ++j < m;) {\n for (var group = groups[j], i = group.length - 1, next = group[i], node; --i >= 0;) {\n if (node = group[i]) {\n if (next && node.compareDocumentPosition(next) ^ 4) next.parentNode.insertBefore(node, next);\n next = node;\n }\n }\n }\n\n return this;\n}\n","import {Selection} from \"./index.js\";\n\nexport default function(compare) {\n if (!compare) compare = ascending;\n\n function compareNode(a, b) {\n return a && b ? compare(a.__data__, b.__data__) : !a - !b;\n }\n\n for (var groups = this._groups, m = groups.length, sortgroups = new Array(m), j = 0; j < m; ++j) {\n for (var group = groups[j], n = group.length, sortgroup = sortgroups[j] = new Array(n), node, i = 0; i < n; ++i) {\n if (node = group[i]) {\n sortgroup[i] = node;\n }\n }\n sortgroup.sort(compareNode);\n }\n\n return new Selection(sortgroups, this._parents).order();\n}\n\nfunction ascending(a, b) {\n return a < b ? -1 : a > b ? 1 : a >= b ? 0 : NaN;\n}\n","export default function() {\n var callback = arguments[0];\n arguments[0] = this;\n callback.apply(null, arguments);\n return this;\n}\n","export default function() {\n return Array.from(this);\n}\n","export default function() {\n\n for (var groups = this._groups, j = 0, m = groups.length; j < m; ++j) {\n for (var group = groups[j], i = 0, n = group.length; i < n; ++i) {\n var node = group[i];\n if (node) return node;\n }\n }\n\n return null;\n}\n","export default function() {\n let size = 0;\n for (const node of this) ++size; // eslint-disable-line no-unused-vars\n return size;\n}\n","export default function() {\n return !this.node();\n}\n","export default function(callback) {\n\n for (var groups = this._groups, j = 0, m = groups.length; j < m; ++j) {\n for (var group = groups[j], i = 0, n = group.length, node; i < n; ++i) {\n if (node = group[i]) callback.call(node, node.__data__, i, group);\n }\n }\n\n return this;\n}\n","import namespace from \"../namespace.js\";\n\nfunction attrRemove(name) {\n return function() {\n this.removeAttribute(name);\n };\n}\n\nfunction attrRemoveNS(fullname) {\n return function() {\n this.removeAttributeNS(fullname.space, fullname.local);\n };\n}\n\nfunction attrConstant(name, value) {\n return function() {\n this.setAttribute(name, value);\n };\n}\n\nfunction attrConstantNS(fullname, value) {\n return function() {\n this.setAttributeNS(fullname.space, fullname.local, value);\n };\n}\n\nfunction attrFunction(name, value) {\n return function() {\n var v = value.apply(this, arguments);\n if (v == null) this.removeAttribute(name);\n else this.setAttribute(name, v);\n };\n}\n\nfunction attrFunctionNS(fullname, value) {\n return function() {\n var v = value.apply(this, arguments);\n if (v == null) this.removeAttributeNS(fullname.space, fullname.local);\n else this.setAttributeNS(fullname.space, fullname.local, v);\n };\n}\n\nexport default function(name, value) {\n var fullname = namespace(name);\n\n if (arguments.length < 2) {\n var node = this.node();\n return fullname.local\n ? node.getAttributeNS(fullname.space, fullname.local)\n : node.getAttribute(fullname);\n }\n\n return this.each((value == null\n ? (fullname.local ? attrRemoveNS : attrRemove) : (typeof value === \"function\"\n ? (fullname.local ? attrFunctionNS : attrFunction)\n : (fullname.local ? attrConstantNS : attrConstant)))(fullname, value));\n}\n","export default function(node) {\n return (node.ownerDocument && node.ownerDocument.defaultView) // node is a Node\n || (node.document && node) // node is a Window\n || node.defaultView; // node is a Document\n}\n","import defaultView from \"../window.js\";\n\nfunction styleRemove(name) {\n return function() {\n this.style.removeProperty(name);\n };\n}\n\nfunction styleConstant(name, value, priority) {\n return function() {\n this.style.setProperty(name, value, priority);\n };\n}\n\nfunction styleFunction(name, value, priority) {\n return function() {\n var v = value.apply(this, arguments);\n if (v == null) this.style.removeProperty(name);\n else this.style.setProperty(name, v, priority);\n };\n}\n\nexport default function(name, value, priority) {\n return arguments.length > 1\n ? this.each((value == null\n ? styleRemove : typeof value === \"function\"\n ? styleFunction\n : styleConstant)(name, value, priority == null ? \"\" : priority))\n : styleValue(this.node(), name);\n}\n\nexport function styleValue(node, name) {\n return node.style.getPropertyValue(name)\n || defaultView(node).getComputedStyle(node, null).getPropertyValue(name);\n}\n","function propertyRemove(name) {\n return function() {\n delete this[name];\n };\n}\n\nfunction propertyConstant(name, value) {\n return function() {\n this[name] = value;\n };\n}\n\nfunction propertyFunction(name, value) {\n return function() {\n var v = value.apply(this, arguments);\n if (v == null) delete this[name];\n else this[name] = v;\n };\n}\n\nexport default function(name, value) {\n return arguments.length > 1\n ? this.each((value == null\n ? propertyRemove : typeof value === \"function\"\n ? propertyFunction\n : propertyConstant)(name, value))\n : this.node()[name];\n}\n","function classArray(string) {\n return string.trim().split(/^|\\s+/);\n}\n\nfunction classList(node) {\n return node.classList || new ClassList(node);\n}\n\nfunction ClassList(node) {\n this._node = node;\n this._names = classArray(node.getAttribute(\"class\") || \"\");\n}\n\nClassList.prototype = {\n add: function(name) {\n var i = this._names.indexOf(name);\n if (i < 0) {\n this._names.push(name);\n this._node.setAttribute(\"class\", this._names.join(\" \"));\n }\n },\n remove: function(name) {\n var i = this._names.indexOf(name);\n if (i >= 0) {\n this._names.splice(i, 1);\n this._node.setAttribute(\"class\", this._names.join(\" \"));\n }\n },\n contains: function(name) {\n return this._names.indexOf(name) >= 0;\n }\n};\n\nfunction classedAdd(node, names) {\n var list = classList(node), i = -1, n = names.length;\n while (++i < n) list.add(names[i]);\n}\n\nfunction classedRemove(node, names) {\n var list = classList(node), i = -1, n = names.length;\n while (++i < n) list.remove(names[i]);\n}\n\nfunction classedTrue(names) {\n return function() {\n classedAdd(this, names);\n };\n}\n\nfunction classedFalse(names) {\n return function() {\n classedRemove(this, names);\n };\n}\n\nfunction classedFunction(names, value) {\n return function() {\n (value.apply(this, arguments) ? classedAdd : classedRemove)(this, names);\n };\n}\n\nexport default function(name, value) {\n var names = classArray(name + \"\");\n\n if (arguments.length < 2) {\n var list = classList(this.node()), i = -1, n = names.length;\n while (++i < n) if (!list.contains(names[i])) return false;\n return true;\n }\n\n return this.each((typeof value === \"function\"\n ? classedFunction : value\n ? classedTrue\n : classedFalse)(names, value));\n}\n","function textRemove() {\n this.textContent = \"\";\n}\n\nfunction textConstant(value) {\n return function() {\n this.textContent = value;\n };\n}\n\nfunction textFunction(value) {\n return function() {\n var v = value.apply(this, arguments);\n this.textContent = v == null ? \"\" : v;\n };\n}\n\nexport default function(value) {\n return arguments.length\n ? this.each(value == null\n ? textRemove : (typeof value === \"function\"\n ? textFunction\n : textConstant)(value))\n : this.node().textContent;\n}\n","function htmlRemove() {\n this.innerHTML = \"\";\n}\n\nfunction htmlConstant(value) {\n return function() {\n this.innerHTML = value;\n };\n}\n\nfunction htmlFunction(value) {\n return function() {\n var v = value.apply(this, arguments);\n this.innerHTML = v == null ? \"\" : v;\n };\n}\n\nexport default function(value) {\n return arguments.length\n ? this.each(value == null\n ? htmlRemove : (typeof value === \"function\"\n ? htmlFunction\n : htmlConstant)(value))\n : this.node().innerHTML;\n}\n","function raise() {\n if (this.nextSibling) this.parentNode.appendChild(this);\n}\n\nexport default function() {\n return this.each(raise);\n}\n","function lower() {\n if (this.previousSibling) this.parentNode.insertBefore(this, this.parentNode.firstChild);\n}\n\nexport default function() {\n return this.each(lower);\n}\n","import creator from \"../creator.js\";\n\nexport default function(name) {\n var create = typeof name === \"function\" ? name : creator(name);\n return this.select(function() {\n return this.appendChild(create.apply(this, arguments));\n });\n}\n","import creator from \"../creator.js\";\nimport selector from \"../selector.js\";\n\nfunction constantNull() {\n return null;\n}\n\nexport default function(name, before) {\n var create = typeof name === \"function\" ? name : creator(name),\n select = before == null ? constantNull : typeof before === \"function\" ? before : selector(before);\n return this.select(function() {\n return this.insertBefore(create.apply(this, arguments), select.apply(this, arguments) || null);\n });\n}\n","function remove() {\n var parent = this.parentNode;\n if (parent) parent.removeChild(this);\n}\n\nexport default function() {\n return this.each(remove);\n}\n","function selection_cloneShallow() {\n var clone = this.cloneNode(false), parent = this.parentNode;\n return parent ? parent.insertBefore(clone, this.nextSibling) : clone;\n}\n\nfunction selection_cloneDeep() {\n var clone = this.cloneNode(true), parent = this.parentNode;\n return parent ? parent.insertBefore(clone, this.nextSibling) : clone;\n}\n\nexport default function(deep) {\n return this.select(deep ? selection_cloneDeep : selection_cloneShallow);\n}\n","export default function(value) {\n return arguments.length\n ? this.property(\"__data__\", value)\n : this.node().__data__;\n}\n","function contextListener(listener) {\n return function(event) {\n listener.call(this, event, this.__data__);\n };\n}\n\nfunction parseTypenames(typenames) {\n return typenames.trim().split(/^|\\s+/).map(function(t) {\n var name = \"\", i = t.indexOf(\".\");\n if (i >= 0) name = t.slice(i + 1), t = t.slice(0, i);\n return {type: t, name: name};\n });\n}\n\nfunction onRemove(typename) {\n return function() {\n var on = this.__on;\n if (!on) return;\n for (var j = 0, i = -1, m = on.length, o; j < m; ++j) {\n if (o = on[j], (!typename.type || o.type === typename.type) && o.name === typename.name) {\n this.removeEventListener(o.type, o.listener, o.options);\n } else {\n on[++i] = o;\n }\n }\n if (++i) on.length = i;\n else delete this.__on;\n };\n}\n\nfunction onAdd(typename, value, options) {\n return function() {\n var on = this.__on, o, listener = contextListener(value);\n if (on) for (var j = 0, m = on.length; j < m; ++j) {\n if ((o = on[j]).type === typename.type && o.name === typename.name) {\n this.removeEventListener(o.type, o.listener, o.options);\n this.addEventListener(o.type, o.listener = listener, o.options = options);\n o.value = value;\n return;\n }\n }\n this.addEventListener(typename.type, listener, options);\n o = {type: typename.type, name: typename.name, value: value, listener: listener, options: options};\n if (!on) this.__on = [o];\n else on.push(o);\n };\n}\n\nexport default function(typename, value, options) {\n var typenames = parseTypenames(typename + \"\"), i, n = typenames.length, t;\n\n if (arguments.length < 2) {\n var on = this.node().__on;\n if (on) for (var j = 0, m = on.length, o; j < m; ++j) {\n for (i = 0, o = on[j]; i < n; ++i) {\n if ((t = typenames[i]).type === o.type && t.name === o.name) {\n return o.value;\n }\n }\n }\n return;\n }\n\n on = value ? onAdd : onRemove;\n for (i = 0; i < n; ++i) this.each(on(typenames[i], value, options));\n return this;\n}\n","import defaultView from \"../window.js\";\n\nfunction dispatchEvent(node, type, params) {\n var window = defaultView(node),\n event = window.CustomEvent;\n\n if (typeof event === \"function\") {\n event = new event(type, params);\n } else {\n event = window.document.createEvent(\"Event\");\n if (params) event.initEvent(type, params.bubbles, params.cancelable), event.detail = params.detail;\n else event.initEvent(type, false, false);\n }\n\n node.dispatchEvent(event);\n}\n\nfunction dispatchConstant(type, params) {\n return function() {\n return dispatchEvent(this, type, params);\n };\n}\n\nfunction dispatchFunction(type, params) {\n return function() {\n return dispatchEvent(this, type, params.apply(this, arguments));\n };\n}\n\nexport default function(type, params) {\n return this.each((typeof params === \"function\"\n ? dispatchFunction\n : dispatchConstant)(type, params));\n}\n","export default function*() {\n for (var groups = this._groups, j = 0, m = groups.length; j < m; ++j) {\n for (var group = groups[j], i = 0, n = group.length, node; i < n; ++i) {\n if (node = group[i]) yield node;\n }\n }\n}\n","import selection_select from \"./select.js\";\nimport selection_selectAll from \"./selectAll.js\";\nimport selection_selectChild from \"./selectChild.js\";\nimport selection_selectChildren from \"./selectChildren.js\";\nimport selection_filter from \"./filter.js\";\nimport selection_data from \"./data.js\";\nimport selection_enter from \"./enter.js\";\nimport selection_exit from \"./exit.js\";\nimport selection_join from \"./join.js\";\nimport selection_merge from \"./merge.js\";\nimport selection_order from \"./order.js\";\nimport selection_sort from \"./sort.js\";\nimport selection_call from \"./call.js\";\nimport selection_nodes from \"./nodes.js\";\nimport selection_node from \"./node.js\";\nimport selection_size from \"./size.js\";\nimport selection_empty from \"./empty.js\";\nimport selection_each from \"./each.js\";\nimport selection_attr from \"./attr.js\";\nimport selection_style from \"./style.js\";\nimport selection_property from \"./property.js\";\nimport selection_classed from \"./classed.js\";\nimport selection_text from \"./text.js\";\nimport selection_html from \"./html.js\";\nimport selection_raise from \"./raise.js\";\nimport selection_lower from \"./lower.js\";\nimport selection_append from \"./append.js\";\nimport selection_insert from \"./insert.js\";\nimport selection_remove from \"./remove.js\";\nimport selection_clone from \"./clone.js\";\nimport selection_datum from \"./datum.js\";\nimport selection_on from \"./on.js\";\nimport selection_dispatch from \"./dispatch.js\";\nimport selection_iterator from \"./iterator.js\";\n\nexport var root = [null];\n\nexport function Selection(groups, parents) {\n this._groups = groups;\n this._parents = parents;\n}\n\nfunction selection() {\n return new Selection([[document.documentElement]], root);\n}\n\nfunction selection_selection() {\n return this;\n}\n\nSelection.prototype = selection.prototype = {\n constructor: Selection,\n select: selection_select,\n selectAll: selection_selectAll,\n selectChild: selection_selectChild,\n selectChildren: selection_selectChildren,\n filter: selection_filter,\n data: selection_data,\n enter: selection_enter,\n exit: selection_exit,\n join: selection_join,\n merge: selection_merge,\n selection: selection_selection,\n order: selection_order,\n sort: selection_sort,\n call: selection_call,\n nodes: selection_nodes,\n node: selection_node,\n size: selection_size,\n empty: selection_empty,\n each: selection_each,\n attr: selection_attr,\n style: selection_style,\n property: selection_property,\n classed: selection_classed,\n text: selection_text,\n html: selection_html,\n raise: selection_raise,\n lower: selection_lower,\n append: selection_append,\n insert: selection_insert,\n remove: selection_remove,\n clone: selection_clone,\n datum: selection_datum,\n on: selection_on,\n dispatch: selection_dispatch,\n [Symbol.iterator]: selection_iterator\n};\n\nexport default selection;\n","import {Selection, root} from \"./selection/index.js\";\n\nexport default function(selector) {\n return typeof selector === \"string\"\n ? new Selection([[document.querySelector(selector)]], [document.documentElement])\n : new Selection([[selector]], root);\n}\n","export default function(event) {\n let sourceEvent;\n while (sourceEvent = event.sourceEvent) event = sourceEvent;\n return event;\n}\n","import sourceEvent from \"./sourceEvent.js\";\n\nexport default function(event, node) {\n event = sourceEvent(event);\n if (node === undefined) node = event.currentTarget;\n if (node) {\n var svg = node.ownerSVGElement || node;\n if (svg.createSVGPoint) {\n var point = svg.createSVGPoint();\n point.x = event.clientX, point.y = event.clientY;\n point = point.matrixTransform(node.getScreenCTM().inverse());\n return [point.x, point.y];\n }\n if (node.getBoundingClientRect) {\n var rect = node.getBoundingClientRect();\n return [event.clientX - rect.left - node.clientLeft, event.clientY - rect.top - node.clientTop];\n }\n }\n return [event.pageX, event.pageY];\n}\n","// These are typically used in conjunction with noevent to ensure that we can\n// preventDefault on the event.\nexport const nonpassive = {passive: false};\nexport const nonpassivecapture = {capture: true, passive: false};\n\nexport function nopropagation(event) {\n event.stopImmediatePropagation();\n}\n\nexport default function(event) {\n event.preventDefault();\n event.stopImmediatePropagation();\n}\n","import {select} from \"d3-selection\";\nimport noevent, {nonpassivecapture} from \"./noevent.js\";\n\nexport default function(view) {\n var root = view.document.documentElement,\n selection = select(view).on(\"dragstart.drag\", noevent, nonpassivecapture);\n if (\"onselectstart\" in root) {\n selection.on(\"selectstart.drag\", noevent, nonpassivecapture);\n } else {\n root.__noselect = root.style.MozUserSelect;\n root.style.MozUserSelect = \"none\";\n }\n}\n\nexport function yesdrag(view, noclick) {\n var root = view.document.documentElement,\n selection = select(view).on(\"dragstart.drag\", null);\n if (noclick) {\n selection.on(\"click.drag\", noevent, nonpassivecapture);\n setTimeout(function() { selection.on(\"click.drag\", null); }, 0);\n }\n if (\"onselectstart\" in root) {\n selection.on(\"selectstart.drag\", null);\n } else {\n root.style.MozUserSelect = root.__noselect;\n delete root.__noselect;\n }\n}\n","export default x => () => x;\n","export default function DragEvent(type, {\n sourceEvent,\n subject,\n target,\n identifier,\n active,\n x, y, dx, dy,\n dispatch\n}) {\n Object.defineProperties(this, {\n type: {value: type, enumerable: true, configurable: true},\n sourceEvent: {value: sourceEvent, enumerable: true, configurable: true},\n subject: {value: subject, enumerable: true, configurable: true},\n target: {value: target, enumerable: true, configurable: true},\n identifier: {value: identifier, enumerable: true, configurable: true},\n active: {value: active, enumerable: true, configurable: true},\n x: {value: x, enumerable: true, configurable: true},\n y: {value: y, enumerable: true, configurable: true},\n dx: {value: dx, enumerable: true, configurable: true},\n dy: {value: dy, enumerable: true, configurable: true},\n _: {value: dispatch}\n });\n}\n\nDragEvent.prototype.on = function() {\n var value = this._.on.apply(this._, arguments);\n return value === this._ ? this : value;\n};\n","import {dispatch} from \"d3-dispatch\";\nimport {select, pointer} from \"d3-selection\";\nimport nodrag, {yesdrag} from \"./nodrag.js\";\nimport noevent, {nonpassive, nonpassivecapture, nopropagation} from \"./noevent.js\";\nimport constant from \"./constant.js\";\nimport DragEvent from \"./event.js\";\n\n// Ignore right-click, since that should open the context menu.\nfunction defaultFilter(event) {\n return !event.ctrlKey && !event.button;\n}\n\nfunction defaultContainer() {\n return this.parentNode;\n}\n\nfunction defaultSubject(event, d) {\n return d == null ? {x: event.x, y: event.y} : d;\n}\n\nfunction defaultTouchable() {\n return navigator.maxTouchPoints || (\"ontouchstart\" in this);\n}\n\nexport default function() {\n var filter = defaultFilter,\n container = defaultContainer,\n subject = defaultSubject,\n touchable = defaultTouchable,\n gestures = {},\n listeners = dispatch(\"start\", \"drag\", \"end\"),\n active = 0,\n mousedownx,\n mousedowny,\n mousemoving,\n touchending,\n clickDistance2 = 0;\n\n function drag(selection) {\n selection\n .on(\"mousedown.drag\", mousedowned)\n .filter(touchable)\n .on(\"touchstart.drag\", touchstarted)\n .on(\"touchmove.drag\", touchmoved, nonpassive)\n .on(\"touchend.drag touchcancel.drag\", touchended)\n .style(\"touch-action\", \"none\")\n .style(\"-webkit-tap-highlight-color\", \"rgba(0,0,0,0)\");\n }\n\n function mousedowned(event, d) {\n if (touchending || !filter.call(this, event, d)) return;\n var gesture = beforestart(this, container.call(this, event, d), event, d, \"mouse\");\n if (!gesture) return;\n select(event.view)\n .on(\"mousemove.drag\", mousemoved, nonpassivecapture)\n .on(\"mouseup.drag\", mouseupped, nonpassivecapture);\n nodrag(event.view);\n nopropagation(event);\n mousemoving = false;\n mousedownx = event.clientX;\n mousedowny = event.clientY;\n gesture(\"start\", event);\n }\n\n function mousemoved(event) {\n noevent(event);\n if (!mousemoving) {\n var dx = event.clientX - mousedownx, dy = event.clientY - mousedowny;\n mousemoving = dx * dx + dy * dy > clickDistance2;\n }\n gestures.mouse(\"drag\", event);\n }\n\n function mouseupped(event) {\n select(event.view).on(\"mousemove.drag mouseup.drag\", null);\n yesdrag(event.view, mousemoving);\n noevent(event);\n gestures.mouse(\"end\", event);\n }\n\n function touchstarted(event, d) {\n if (!filter.call(this, event, d)) return;\n var touches = event.changedTouches,\n c = container.call(this, event, d),\n n = touches.length, i, gesture;\n\n for (i = 0; i < n; ++i) {\n if (gesture = beforestart(this, c, event, d, touches[i].identifier, touches[i])) {\n nopropagation(event);\n gesture(\"start\", event, touches[i]);\n }\n }\n }\n\n function touchmoved(event) {\n var touches = event.changedTouches,\n n = touches.length, i, gesture;\n\n for (i = 0; i < n; ++i) {\n if (gesture = gestures[touches[i].identifier]) {\n noevent(event);\n gesture(\"drag\", event, touches[i]);\n }\n }\n }\n\n function touchended(event) {\n var touches = event.changedTouches,\n n = touches.length, i, gesture;\n\n if (touchending) clearTimeout(touchending);\n touchending = setTimeout(function() { touchending = null; }, 500); // Ghost clicks are delayed!\n for (i = 0; i < n; ++i) {\n if (gesture = gestures[touches[i].identifier]) {\n nopropagation(event);\n gesture(\"end\", event, touches[i]);\n }\n }\n }\n\n function beforestart(that, container, event, d, identifier, touch) {\n var dispatch = listeners.copy(),\n p = pointer(touch || event, container), dx, dy,\n s;\n\n if ((s = subject.call(that, new DragEvent(\"beforestart\", {\n sourceEvent: event,\n target: drag,\n identifier,\n active,\n x: p[0],\n y: p[1],\n dx: 0,\n dy: 0,\n dispatch\n }), d)) == null) return;\n\n dx = s.x - p[0] || 0;\n dy = s.y - p[1] || 0;\n\n return function gesture(type, event, touch) {\n var p0 = p, n;\n switch (type) {\n case \"start\": gestures[identifier] = gesture, n = active++; break;\n case \"end\": delete gestures[identifier], --active; // falls through\n case \"drag\": p = pointer(touch || event, container), n = active; break;\n }\n dispatch.call(\n type,\n that,\n new DragEvent(type, {\n sourceEvent: event,\n subject: s,\n target: drag,\n identifier,\n active: n,\n x: p[0] + dx,\n y: p[1] + dy,\n dx: p[0] - p0[0],\n dy: p[1] - p0[1],\n dispatch\n }),\n d\n );\n };\n }\n\n drag.filter = function(_) {\n return arguments.length ? (filter = typeof _ === \"function\" ? _ : constant(!!_), drag) : filter;\n };\n\n drag.container = function(_) {\n return arguments.length ? (container = typeof _ === \"function\" ? _ : constant(_), drag) : container;\n };\n\n drag.subject = function(_) {\n return arguments.length ? (subject = typeof _ === \"function\" ? _ : constant(_), drag) : subject;\n };\n\n drag.touchable = function(_) {\n return arguments.length ? (touchable = typeof _ === \"function\" ? _ : constant(!!_), drag) : touchable;\n };\n\n drag.on = function() {\n var value = listeners.on.apply(listeners, arguments);\n return value === listeners ? drag : value;\n };\n\n drag.clickDistance = function(_) {\n return arguments.length ? (clickDistance2 = (_ = +_) * _, drag) : Math.sqrt(clickDistance2);\n };\n\n return drag;\n}\n","export default function(constructor, factory, prototype) {\n constructor.prototype = factory.prototype = prototype;\n prototype.constructor = constructor;\n}\n\nexport function extend(parent, definition) {\n var prototype = Object.create(parent.prototype);\n for (var key in definition) prototype[key] = definition[key];\n return prototype;\n}\n","import define, {extend} from \"./define.js\";\n\nexport function Color() {}\n\nexport var darker = 0.7;\nexport var brighter = 1 / darker;\n\nvar reI = \"\\\\s*([+-]?\\\\d+)\\\\s*\",\n reN = \"\\\\s*([+-]?(?:\\\\d*\\\\.)?\\\\d+(?:[eE][+-]?\\\\d+)?)\\\\s*\",\n reP = \"\\\\s*([+-]?(?:\\\\d*\\\\.)?\\\\d+(?:[eE][+-]?\\\\d+)?)%\\\\s*\",\n reHex = /^#([0-9a-f]{3,8})$/,\n reRgbInteger = new RegExp(`^rgb\\\\(${reI},${reI},${reI}\\\\)$`),\n reRgbPercent = new RegExp(`^rgb\\\\(${reP},${reP},${reP}\\\\)$`),\n reRgbaInteger = new RegExp(`^rgba\\\\(${reI},${reI},${reI},${reN}\\\\)$`),\n reRgbaPercent = new RegExp(`^rgba\\\\(${reP},${reP},${reP},${reN}\\\\)$`),\n reHslPercent = new RegExp(`^hsl\\\\(${reN},${reP},${reP}\\\\)$`),\n reHslaPercent = new RegExp(`^hsla\\\\(${reN},${reP},${reP},${reN}\\\\)$`);\n\nvar named = {\n aliceblue: 0xf0f8ff,\n antiquewhite: 0xfaebd7,\n aqua: 0x00ffff,\n aquamarine: 0x7fffd4,\n azure: 0xf0ffff,\n beige: 0xf5f5dc,\n bisque: 0xffe4c4,\n black: 0x000000,\n blanchedalmond: 0xffebcd,\n blue: 0x0000ff,\n blueviolet: 0x8a2be2,\n brown: 0xa52a2a,\n burlywood: 0xdeb887,\n cadetblue: 0x5f9ea0,\n chartreuse: 0x7fff00,\n chocolate: 0xd2691e,\n coral: 0xff7f50,\n cornflowerblue: 0x6495ed,\n cornsilk: 0xfff8dc,\n crimson: 0xdc143c,\n cyan: 0x00ffff,\n darkblue: 0x00008b,\n darkcyan: 0x008b8b,\n darkgoldenrod: 0xb8860b,\n darkgray: 0xa9a9a9,\n darkgreen: 0x006400,\n darkgrey: 0xa9a9a9,\n darkkhaki: 0xbdb76b,\n darkmagenta: 0x8b008b,\n darkolivegreen: 0x556b2f,\n darkorange: 0xff8c00,\n darkorchid: 0x9932cc,\n darkred: 0x8b0000,\n darksalmon: 0xe9967a,\n darkseagreen: 0x8fbc8f,\n darkslateblue: 0x483d8b,\n darkslategray: 0x2f4f4f,\n darkslategrey: 0x2f4f4f,\n darkturquoise: 0x00ced1,\n darkviolet: 0x9400d3,\n deeppink: 0xff1493,\n deepskyblue: 0x00bfff,\n dimgray: 0x696969,\n dimgrey: 0x696969,\n dodgerblue: 0x1e90ff,\n firebrick: 0xb22222,\n floralwhite: 0xfffaf0,\n forestgreen: 0x228b22,\n fuchsia: 0xff00ff,\n gainsboro: 0xdcdcdc,\n ghostwhite: 0xf8f8ff,\n gold: 0xffd700,\n goldenrod: 0xdaa520,\n gray: 0x808080,\n green: 0x008000,\n greenyellow: 0xadff2f,\n grey: 0x808080,\n honeydew: 0xf0fff0,\n hotpink: 0xff69b4,\n indianred: 0xcd5c5c,\n indigo: 0x4b0082,\n ivory: 0xfffff0,\n khaki: 0xf0e68c,\n lavender: 0xe6e6fa,\n lavenderblush: 0xfff0f5,\n lawngreen: 0x7cfc00,\n lemonchiffon: 0xfffacd,\n lightblue: 0xadd8e6,\n lightcoral: 0xf08080,\n lightcyan: 0xe0ffff,\n lightgoldenrodyellow: 0xfafad2,\n lightgray: 0xd3d3d3,\n lightgreen: 0x90ee90,\n lightgrey: 0xd3d3d3,\n lightpink: 0xffb6c1,\n lightsalmon: 0xffa07a,\n lightseagreen: 0x20b2aa,\n lightskyblue: 0x87cefa,\n lightslategray: 0x778899,\n lightslategrey: 0x778899,\n lightsteelblue: 0xb0c4de,\n lightyellow: 0xffffe0,\n lime: 0x00ff00,\n limegreen: 0x32cd32,\n linen: 0xfaf0e6,\n magenta: 0xff00ff,\n maroon: 0x800000,\n mediumaquamarine: 0x66cdaa,\n mediumblue: 0x0000cd,\n mediumorchid: 0xba55d3,\n mediumpurple: 0x9370db,\n mediumseagreen: 0x3cb371,\n mediumslateblue: 0x7b68ee,\n mediumspringgreen: 0x00fa9a,\n mediumturquoise: 0x48d1cc,\n mediumvioletred: 0xc71585,\n midnightblue: 0x191970,\n mintcream: 0xf5fffa,\n mistyrose: 0xffe4e1,\n moccasin: 0xffe4b5,\n navajowhite: 0xffdead,\n navy: 0x000080,\n oldlace: 0xfdf5e6,\n olive: 0x808000,\n olivedrab: 0x6b8e23,\n orange: 0xffa500,\n orangered: 0xff4500,\n orchid: 0xda70d6,\n palegoldenrod: 0xeee8aa,\n palegreen: 0x98fb98,\n paleturquoise: 0xafeeee,\n palevioletred: 0xdb7093,\n papayawhip: 0xffefd5,\n peachpuff: 0xffdab9,\n peru: 0xcd853f,\n pink: 0xffc0cb,\n plum: 0xdda0dd,\n powderblue: 0xb0e0e6,\n purple: 0x800080,\n rebeccapurple: 0x663399,\n red: 0xff0000,\n rosybrown: 0xbc8f8f,\n royalblue: 0x4169e1,\n saddlebrown: 0x8b4513,\n salmon: 0xfa8072,\n sandybrown: 0xf4a460,\n seagreen: 0x2e8b57,\n seashell: 0xfff5ee,\n sienna: 0xa0522d,\n silver: 0xc0c0c0,\n skyblue: 0x87ceeb,\n slateblue: 0x6a5acd,\n slategray: 0x708090,\n slategrey: 0x708090,\n snow: 0xfffafa,\n springgreen: 0x00ff7f,\n steelblue: 0x4682b4,\n tan: 0xd2b48c,\n teal: 0x008080,\n thistle: 0xd8bfd8,\n tomato: 0xff6347,\n turquoise: 0x40e0d0,\n violet: 0xee82ee,\n wheat: 0xf5deb3,\n white: 0xffffff,\n whitesmoke: 0xf5f5f5,\n yellow: 0xffff00,\n yellowgreen: 0x9acd32\n};\n\ndefine(Color, color, {\n copy(channels) {\n return Object.assign(new this.constructor, this, channels);\n },\n displayable() {\n return this.rgb().displayable();\n },\n hex: color_formatHex, // Deprecated! Use color.formatHex.\n formatHex: color_formatHex,\n formatHex8: color_formatHex8,\n formatHsl: color_formatHsl,\n formatRgb: color_formatRgb,\n toString: color_formatRgb\n});\n\nfunction color_formatHex() {\n return this.rgb().formatHex();\n}\n\nfunction color_formatHex8() {\n return this.rgb().formatHex8();\n}\n\nfunction color_formatHsl() {\n return hslConvert(this).formatHsl();\n}\n\nfunction color_formatRgb() {\n return this.rgb().formatRgb();\n}\n\nexport default function color(format) {\n var m, l;\n format = (format + \"\").trim().toLowerCase();\n return (m = reHex.exec(format)) ? (l = m[1].length, m = parseInt(m[1], 16), l === 6 ? rgbn(m) // #ff0000\n : l === 3 ? new Rgb((m >> 8 & 0xf) | (m >> 4 & 0xf0), (m >> 4 & 0xf) | (m & 0xf0), ((m & 0xf) << 4) | (m & 0xf), 1) // #f00\n : l === 8 ? rgba(m >> 24 & 0xff, m >> 16 & 0xff, m >> 8 & 0xff, (m & 0xff) / 0xff) // #ff000000\n : l === 4 ? rgba((m >> 12 & 0xf) | (m >> 8 & 0xf0), (m >> 8 & 0xf) | (m >> 4 & 0xf0), (m >> 4 & 0xf) | (m & 0xf0), (((m & 0xf) << 4) | (m & 0xf)) / 0xff) // #f000\n : null) // invalid hex\n : (m = reRgbInteger.exec(format)) ? new Rgb(m[1], m[2], m[3], 1) // rgb(255, 0, 0)\n : (m = reRgbPercent.exec(format)) ? new Rgb(m[1] * 255 / 100, m[2] * 255 / 100, m[3] * 255 / 100, 1) // rgb(100%, 0%, 0%)\n : (m = reRgbaInteger.exec(format)) ? rgba(m[1], m[2], m[3], m[4]) // rgba(255, 0, 0, 1)\n : (m = reRgbaPercent.exec(format)) ? rgba(m[1] * 255 / 100, m[2] * 255 / 100, m[3] * 255 / 100, m[4]) // rgb(100%, 0%, 0%, 1)\n : (m = reHslPercent.exec(format)) ? hsla(m[1], m[2] / 100, m[3] / 100, 1) // hsl(120, 50%, 50%)\n : (m = reHslaPercent.exec(format)) ? hsla(m[1], m[2] / 100, m[3] / 100, m[4]) // hsla(120, 50%, 50%, 1)\n : named.hasOwnProperty(format) ? rgbn(named[format]) // eslint-disable-line no-prototype-builtins\n : format === \"transparent\" ? new Rgb(NaN, NaN, NaN, 0)\n : null;\n}\n\nfunction rgbn(n) {\n return new Rgb(n >> 16 & 0xff, n >> 8 & 0xff, n & 0xff, 1);\n}\n\nfunction rgba(r, g, b, a) {\n if (a <= 0) r = g = b = NaN;\n return new Rgb(r, g, b, a);\n}\n\nexport function rgbConvert(o) {\n if (!(o instanceof Color)) o = color(o);\n if (!o) return new Rgb;\n o = o.rgb();\n return new Rgb(o.r, o.g, o.b, o.opacity);\n}\n\nexport function rgb(r, g, b, opacity) {\n return arguments.length === 1 ? rgbConvert(r) : new Rgb(r, g, b, opacity == null ? 1 : opacity);\n}\n\nexport function Rgb(r, g, b, opacity) {\n this.r = +r;\n this.g = +g;\n this.b = +b;\n this.opacity = +opacity;\n}\n\ndefine(Rgb, rgb, extend(Color, {\n brighter(k) {\n k = k == null ? brighter : Math.pow(brighter, k);\n return new Rgb(this.r * k, this.g * k, this.b * k, this.opacity);\n },\n darker(k) {\n k = k == null ? darker : Math.pow(darker, k);\n return new Rgb(this.r * k, this.g * k, this.b * k, this.opacity);\n },\n rgb() {\n return this;\n },\n clamp() {\n return new Rgb(clampi(this.r), clampi(this.g), clampi(this.b), clampa(this.opacity));\n },\n displayable() {\n return (-0.5 <= this.r && this.r < 255.5)\n && (-0.5 <= this.g && this.g < 255.5)\n && (-0.5 <= this.b && this.b < 255.5)\n && (0 <= this.opacity && this.opacity <= 1);\n },\n hex: rgb_formatHex, // Deprecated! Use color.formatHex.\n formatHex: rgb_formatHex,\n formatHex8: rgb_formatHex8,\n formatRgb: rgb_formatRgb,\n toString: rgb_formatRgb\n}));\n\nfunction rgb_formatHex() {\n return `#${hex(this.r)}${hex(this.g)}${hex(this.b)}`;\n}\n\nfunction rgb_formatHex8() {\n return `#${hex(this.r)}${hex(this.g)}${hex(this.b)}${hex((isNaN(this.opacity) ? 1 : this.opacity) * 255)}`;\n}\n\nfunction rgb_formatRgb() {\n const a = clampa(this.opacity);\n return `${a === 1 ? \"rgb(\" : \"rgba(\"}${clampi(this.r)}, ${clampi(this.g)}, ${clampi(this.b)}${a === 1 ? \")\" : `, ${a})`}`;\n}\n\nfunction clampa(opacity) {\n return isNaN(opacity) ? 1 : Math.max(0, Math.min(1, opacity));\n}\n\nfunction clampi(value) {\n return Math.max(0, Math.min(255, Math.round(value) || 0));\n}\n\nfunction hex(value) {\n value = clampi(value);\n return (value < 16 ? \"0\" : \"\") + value.toString(16);\n}\n\nfunction hsla(h, s, l, a) {\n if (a <= 0) h = s = l = NaN;\n else if (l <= 0 || l >= 1) h = s = NaN;\n else if (s <= 0) h = NaN;\n return new Hsl(h, s, l, a);\n}\n\nexport function hslConvert(o) {\n if (o instanceof Hsl) return new Hsl(o.h, o.s, o.l, o.opacity);\n if (!(o instanceof Color)) o = color(o);\n if (!o) return new Hsl;\n if (o instanceof Hsl) return o;\n o = o.rgb();\n var r = o.r / 255,\n g = o.g / 255,\n b = o.b / 255,\n min = Math.min(r, g, b),\n max = Math.max(r, g, b),\n h = NaN,\n s = max - min,\n l = (max + min) / 2;\n if (s) {\n if (r === max) h = (g - b) / s + (g < b) * 6;\n else if (g === max) h = (b - r) / s + 2;\n else h = (r - g) / s + 4;\n s /= l < 0.5 ? max + min : 2 - max - min;\n h *= 60;\n } else {\n s = l > 0 && l < 1 ? 0 : h;\n }\n return new Hsl(h, s, l, o.opacity);\n}\n\nexport function hsl(h, s, l, opacity) {\n return arguments.length === 1 ? hslConvert(h) : new Hsl(h, s, l, opacity == null ? 1 : opacity);\n}\n\nfunction Hsl(h, s, l, opacity) {\n this.h = +h;\n this.s = +s;\n this.l = +l;\n this.opacity = +opacity;\n}\n\ndefine(Hsl, hsl, extend(Color, {\n brighter(k) {\n k = k == null ? brighter : Math.pow(brighter, k);\n return new Hsl(this.h, this.s, this.l * k, this.opacity);\n },\n darker(k) {\n k = k == null ? darker : Math.pow(darker, k);\n return new Hsl(this.h, this.s, this.l * k, this.opacity);\n },\n rgb() {\n var h = this.h % 360 + (this.h < 0) * 360,\n s = isNaN(h) || isNaN(this.s) ? 0 : this.s,\n l = this.l,\n m2 = l + (l < 0.5 ? l : 1 - l) * s,\n m1 = 2 * l - m2;\n return new Rgb(\n hsl2rgb(h >= 240 ? h - 240 : h + 120, m1, m2),\n hsl2rgb(h, m1, m2),\n hsl2rgb(h < 120 ? h + 240 : h - 120, m1, m2),\n this.opacity\n );\n },\n clamp() {\n return new Hsl(clamph(this.h), clampt(this.s), clampt(this.l), clampa(this.opacity));\n },\n displayable() {\n return (0 <= this.s && this.s <= 1 || isNaN(this.s))\n && (0 <= this.l && this.l <= 1)\n && (0 <= this.opacity && this.opacity <= 1);\n },\n formatHsl() {\n const a = clampa(this.opacity);\n return `${a === 1 ? \"hsl(\" : \"hsla(\"}${clamph(this.h)}, ${clampt(this.s) * 100}%, ${clampt(this.l) * 100}%${a === 1 ? \")\" : `, ${a})`}`;\n }\n}));\n\nfunction clamph(value) {\n value = (value || 0) % 360;\n return value < 0 ? value + 360 : value;\n}\n\nfunction clampt(value) {\n return Math.max(0, Math.min(1, value || 0));\n}\n\n/* From FvD 13.37, CSS Color Module Level 3 */\nfunction hsl2rgb(h, m1, m2) {\n return (h < 60 ? m1 + (m2 - m1) * h / 60\n : h < 180 ? m2\n : h < 240 ? m1 + (m2 - m1) * (240 - h) / 60\n : m1) * 255;\n}\n","export function basis(t1, v0, v1, v2, v3) {\n var t2 = t1 * t1, t3 = t2 * t1;\n return ((1 - 3 * t1 + 3 * t2 - t3) * v0\n + (4 - 6 * t2 + 3 * t3) * v1\n + (1 + 3 * t1 + 3 * t2 - 3 * t3) * v2\n + t3 * v3) / 6;\n}\n\nexport default function(values) {\n var n = values.length - 1;\n return function(t) {\n var i = t <= 0 ? (t = 0) : t >= 1 ? (t = 1, n - 1) : Math.floor(t * n),\n v1 = values[i],\n v2 = values[i + 1],\n v0 = i > 0 ? values[i - 1] : 2 * v1 - v2,\n v3 = i < n - 1 ? values[i + 2] : 2 * v2 - v1;\n return basis((t - i / n) * n, v0, v1, v2, v3);\n };\n}\n","import {basis} from \"./basis.js\";\n\nexport default function(values) {\n var n = values.length;\n return function(t) {\n var i = Math.floor(((t %= 1) < 0 ? ++t : t) * n),\n v0 = values[(i + n - 1) % n],\n v1 = values[i % n],\n v2 = values[(i + 1) % n],\n v3 = values[(i + 2) % n];\n return basis((t - i / n) * n, v0, v1, v2, v3);\n };\n}\n","export default x => () => x;\n","import constant from \"./constant.js\";\n\nfunction linear(a, d) {\n return function(t) {\n return a + t * d;\n };\n}\n\nfunction exponential(a, b, y) {\n return a = Math.pow(a, y), b = Math.pow(b, y) - a, y = 1 / y, function(t) {\n return Math.pow(a + t * b, y);\n };\n}\n\nexport function hue(a, b) {\n var d = b - a;\n return d ? linear(a, d > 180 || d < -180 ? d - 360 * Math.round(d / 360) : d) : constant(isNaN(a) ? b : a);\n}\n\nexport function gamma(y) {\n return (y = +y) === 1 ? nogamma : function(a, b) {\n return b - a ? exponential(a, b, y) : constant(isNaN(a) ? b : a);\n };\n}\n\nexport default function nogamma(a, b) {\n var d = b - a;\n return d ? linear(a, d) : constant(isNaN(a) ? b : a);\n}\n","import {rgb as colorRgb} from \"d3-color\";\nimport basis from \"./basis.js\";\nimport basisClosed from \"./basisClosed.js\";\nimport nogamma, {gamma} from \"./color.js\";\n\nexport default (function rgbGamma(y) {\n var color = gamma(y);\n\n function rgb(start, end) {\n var r = color((start = colorRgb(start)).r, (end = colorRgb(end)).r),\n g = color(start.g, end.g),\n b = color(start.b, end.b),\n opacity = nogamma(start.opacity, end.opacity);\n return function(t) {\n start.r = r(t);\n start.g = g(t);\n start.b = b(t);\n start.opacity = opacity(t);\n return start + \"\";\n };\n }\n\n rgb.gamma = rgbGamma;\n\n return rgb;\n})(1);\n\nfunction rgbSpline(spline) {\n return function(colors) {\n var n = colors.length,\n r = new Array(n),\n g = new Array(n),\n b = new Array(n),\n i, color;\n for (i = 0; i < n; ++i) {\n color = colorRgb(colors[i]);\n r[i] = color.r || 0;\n g[i] = color.g || 0;\n b[i] = color.b || 0;\n }\n r = spline(r);\n g = spline(g);\n b = spline(b);\n color.opacity = 1;\n return function(t) {\n color.r = r(t);\n color.g = g(t);\n color.b = b(t);\n return color + \"\";\n };\n };\n}\n\nexport var rgbBasis = rgbSpline(basis);\nexport var rgbBasisClosed = rgbSpline(basisClosed);\n","export default function(a, b) {\n if (!b) b = [];\n var n = a ? Math.min(b.length, a.length) : 0,\n c = b.slice(),\n i;\n return function(t) {\n for (i = 0; i < n; ++i) c[i] = a[i] * (1 - t) + b[i] * t;\n return c;\n };\n}\n\nexport function isNumberArray(x) {\n return ArrayBuffer.isView(x) && !(x instanceof DataView);\n}\n","import value from \"./value.js\";\nimport numberArray, {isNumberArray} from \"./numberArray.js\";\n\nexport default function(a, b) {\n return (isNumberArray(b) ? numberArray : genericArray)(a, b);\n}\n\nexport function genericArray(a, b) {\n var nb = b ? b.length : 0,\n na = a ? Math.min(nb, a.length) : 0,\n x = new Array(na),\n c = new Array(nb),\n i;\n\n for (i = 0; i < na; ++i) x[i] = value(a[i], b[i]);\n for (; i < nb; ++i) c[i] = b[i];\n\n return function(t) {\n for (i = 0; i < na; ++i) c[i] = x[i](t);\n return c;\n };\n}\n","export default function(a, b) {\n var d = new Date;\n return a = +a, b = +b, function(t) {\n return d.setTime(a * (1 - t) + b * t), d;\n };\n}\n","export default function(a, b) {\n return a = +a, b = +b, function(t) {\n return a * (1 - t) + b * t;\n };\n}\n","import value from \"./value.js\";\n\nexport default function(a, b) {\n var i = {},\n c = {},\n k;\n\n if (a === null || typeof a !== \"object\") a = {};\n if (b === null || typeof b !== \"object\") b = {};\n\n for (k in b) {\n if (k in a) {\n i[k] = value(a[k], b[k]);\n } else {\n c[k] = b[k];\n }\n }\n\n return function(t) {\n for (k in i) c[k] = i[k](t);\n return c;\n };\n}\n","import number from \"./number.js\";\n\nvar reA = /[-+]?(?:\\d+\\.?\\d*|\\.?\\d+)(?:[eE][-+]?\\d+)?/g,\n reB = new RegExp(reA.source, \"g\");\n\nfunction zero(b) {\n return function() {\n return b;\n };\n}\n\nfunction one(b) {\n return function(t) {\n return b(t) + \"\";\n };\n}\n\nexport default function(a, b) {\n var bi = reA.lastIndex = reB.lastIndex = 0, // scan index for next number in b\n am, // current match in a\n bm, // current match in b\n bs, // string preceding current number in b, if any\n i = -1, // index in s\n s = [], // string constants and placeholders\n q = []; // number interpolators\n\n // Coerce inputs to strings.\n a = a + \"\", b = b + \"\";\n\n // Interpolate pairs of numbers in a & b.\n while ((am = reA.exec(a))\n && (bm = reB.exec(b))) {\n if ((bs = bm.index) > bi) { // a string precedes the next number in b\n bs = b.slice(bi, bs);\n if (s[i]) s[i] += bs; // coalesce with previous string\n else s[++i] = bs;\n }\n if ((am = am[0]) === (bm = bm[0])) { // numbers in a & b match\n if (s[i]) s[i] += bm; // coalesce with previous string\n else s[++i] = bm;\n } else { // interpolate non-matching numbers\n s[++i] = null;\n q.push({i: i, x: number(am, bm)});\n }\n bi = reB.lastIndex;\n }\n\n // Add remains of b.\n if (bi < b.length) {\n bs = b.slice(bi);\n if (s[i]) s[i] += bs; // coalesce with previous string\n else s[++i] = bs;\n }\n\n // Special optimization for only a single match.\n // Otherwise, interpolate each of the numbers and rejoin the string.\n return s.length < 2 ? (q[0]\n ? one(q[0].x)\n : zero(b))\n : (b = q.length, function(t) {\n for (var i = 0, o; i < b; ++i) s[(o = q[i]).i] = o.x(t);\n return s.join(\"\");\n });\n}\n","import {color} from \"d3-color\";\nimport rgb from \"./rgb.js\";\nimport {genericArray} from \"./array.js\";\nimport date from \"./date.js\";\nimport number from \"./number.js\";\nimport object from \"./object.js\";\nimport string from \"./string.js\";\nimport constant from \"./constant.js\";\nimport numberArray, {isNumberArray} from \"./numberArray.js\";\n\nexport default function(a, b) {\n var t = typeof b, c;\n return b == null || t === \"boolean\" ? constant(b)\n : (t === \"number\" ? number\n : t === \"string\" ? ((c = color(b)) ? (b = c, rgb) : string)\n : b instanceof color ? rgb\n : b instanceof Date ? date\n : isNumberArray(b) ? numberArray\n : Array.isArray(b) ? genericArray\n : typeof b.valueOf !== \"function\" && typeof b.toString !== \"function\" || isNaN(b) ? object\n : number)(a, b);\n}\n","var degrees = 180 / Math.PI;\n\nexport var identity = {\n translateX: 0,\n translateY: 0,\n rotate: 0,\n skewX: 0,\n scaleX: 1,\n scaleY: 1\n};\n\nexport default function(a, b, c, d, e, f) {\n var scaleX, scaleY, skewX;\n if (scaleX = Math.sqrt(a * a + b * b)) a /= scaleX, b /= scaleX;\n if (skewX = a * c + b * d) c -= a * skewX, d -= b * skewX;\n if (scaleY = Math.sqrt(c * c + d * d)) c /= scaleY, d /= scaleY, skewX /= scaleY;\n if (a * d < b * c) a = -a, b = -b, skewX = -skewX, scaleX = -scaleX;\n return {\n translateX: e,\n translateY: f,\n rotate: Math.atan2(b, a) * degrees,\n skewX: Math.atan(skewX) * degrees,\n scaleX: scaleX,\n scaleY: scaleY\n };\n}\n","import decompose, {identity} from \"./decompose.js\";\n\nvar svgNode;\n\n/* eslint-disable no-undef */\nexport function parseCss(value) {\n const m = new (typeof DOMMatrix === \"function\" ? DOMMatrix : WebKitCSSMatrix)(value + \"\");\n return m.isIdentity ? identity : decompose(m.a, m.b, m.c, m.d, m.e, m.f);\n}\n\nexport function parseSvg(value) {\n if (value == null) return identity;\n if (!svgNode) svgNode = document.createElementNS(\"http://www.w3.org/2000/svg\", \"g\");\n svgNode.setAttribute(\"transform\", value);\n if (!(value = svgNode.transform.baseVal.consolidate())) return identity;\n value = value.matrix;\n return decompose(value.a, value.b, value.c, value.d, value.e, value.f);\n}\n","import number from \"../number.js\";\nimport {parseCss, parseSvg} from \"./parse.js\";\n\nfunction interpolateTransform(parse, pxComma, pxParen, degParen) {\n\n function pop(s) {\n return s.length ? s.pop() + \" \" : \"\";\n }\n\n function translate(xa, ya, xb, yb, s, q) {\n if (xa !== xb || ya !== yb) {\n var i = s.push(\"translate(\", null, pxComma, null, pxParen);\n q.push({i: i - 4, x: number(xa, xb)}, {i: i - 2, x: number(ya, yb)});\n } else if (xb || yb) {\n s.push(\"translate(\" + xb + pxComma + yb + pxParen);\n }\n }\n\n function rotate(a, b, s, q) {\n if (a !== b) {\n if (a - b > 180) b += 360; else if (b - a > 180) a += 360; // shortest path\n q.push({i: s.push(pop(s) + \"rotate(\", null, degParen) - 2, x: number(a, b)});\n } else if (b) {\n s.push(pop(s) + \"rotate(\" + b + degParen);\n }\n }\n\n function skewX(a, b, s, q) {\n if (a !== b) {\n q.push({i: s.push(pop(s) + \"skewX(\", null, degParen) - 2, x: number(a, b)});\n } else if (b) {\n s.push(pop(s) + \"skewX(\" + b + degParen);\n }\n }\n\n function scale(xa, ya, xb, yb, s, q) {\n if (xa !== xb || ya !== yb) {\n var i = s.push(pop(s) + \"scale(\", null, \",\", null, \")\");\n q.push({i: i - 4, x: number(xa, xb)}, {i: i - 2, x: number(ya, yb)});\n } else if (xb !== 1 || yb !== 1) {\n s.push(pop(s) + \"scale(\" + xb + \",\" + yb + \")\");\n }\n }\n\n return function(a, b) {\n var s = [], // string constants and placeholders\n q = []; // number interpolators\n a = parse(a), b = parse(b);\n translate(a.translateX, a.translateY, b.translateX, b.translateY, s, q);\n rotate(a.rotate, b.rotate, s, q);\n skewX(a.skewX, b.skewX, s, q);\n scale(a.scaleX, a.scaleY, b.scaleX, b.scaleY, s, q);\n a = b = null; // gc\n return function(t) {\n var i = -1, n = q.length, o;\n while (++i < n) s[(o = q[i]).i] = o.x(t);\n return s.join(\"\");\n };\n };\n}\n\nexport var interpolateTransformCss = interpolateTransform(parseCss, \"px, \", \"px)\", \"deg)\");\nexport var interpolateTransformSvg = interpolateTransform(parseSvg, \", \", \")\", \")\");\n","var epsilon2 = 1e-12;\n\nfunction cosh(x) {\n return ((x = Math.exp(x)) + 1 / x) / 2;\n}\n\nfunction sinh(x) {\n return ((x = Math.exp(x)) - 1 / x) / 2;\n}\n\nfunction tanh(x) {\n return ((x = Math.exp(2 * x)) - 1) / (x + 1);\n}\n\nexport default (function zoomRho(rho, rho2, rho4) {\n\n // p0 = [ux0, uy0, w0]\n // p1 = [ux1, uy1, w1]\n function zoom(p0, p1) {\n var ux0 = p0[0], uy0 = p0[1], w0 = p0[2],\n ux1 = p1[0], uy1 = p1[1], w1 = p1[2],\n dx = ux1 - ux0,\n dy = uy1 - uy0,\n d2 = dx * dx + dy * dy,\n i,\n S;\n\n // Special case for u0 ≅ u1.\n if (d2 < epsilon2) {\n S = Math.log(w1 / w0) / rho;\n i = function(t) {\n return [\n ux0 + t * dx,\n uy0 + t * dy,\n w0 * Math.exp(rho * t * S)\n ];\n }\n }\n\n // General case.\n else {\n var d1 = Math.sqrt(d2),\n b0 = (w1 * w1 - w0 * w0 + rho4 * d2) / (2 * w0 * rho2 * d1),\n b1 = (w1 * w1 - w0 * w0 - rho4 * d2) / (2 * w1 * rho2 * d1),\n r0 = Math.log(Math.sqrt(b0 * b0 + 1) - b0),\n r1 = Math.log(Math.sqrt(b1 * b1 + 1) - b1);\n S = (r1 - r0) / rho;\n i = function(t) {\n var s = t * S,\n coshr0 = cosh(r0),\n u = w0 / (rho2 * d1) * (coshr0 * tanh(rho * s + r0) - sinh(r0));\n return [\n ux0 + u * dx,\n uy0 + u * dy,\n w0 * coshr0 / cosh(rho * s + r0)\n ];\n }\n }\n\n i.duration = S * 1000 * rho / Math.SQRT2;\n\n return i;\n }\n\n zoom.rho = function(_) {\n var _1 = Math.max(1e-3, +_), _2 = _1 * _1, _4 = _2 * _2;\n return zoomRho(_1, _2, _4);\n };\n\n return zoom;\n})(Math.SQRT2, 2, 4);\n","var frame = 0, // is an animation frame pending?\n timeout = 0, // is a timeout pending?\n interval = 0, // are any timers active?\n pokeDelay = 1000, // how frequently we check for clock skew\n taskHead,\n taskTail,\n clockLast = 0,\n clockNow = 0,\n clockSkew = 0,\n clock = typeof performance === \"object\" && performance.now ? performance : Date,\n setFrame = typeof window === \"object\" && window.requestAnimationFrame ? window.requestAnimationFrame.bind(window) : function(f) { setTimeout(f, 17); };\n\nexport function now() {\n return clockNow || (setFrame(clearNow), clockNow = clock.now() + clockSkew);\n}\n\nfunction clearNow() {\n clockNow = 0;\n}\n\nexport function Timer() {\n this._call =\n this._time =\n this._next = null;\n}\n\nTimer.prototype = timer.prototype = {\n constructor: Timer,\n restart: function(callback, delay, time) {\n if (typeof callback !== \"function\") throw new TypeError(\"callback is not a function\");\n time = (time == null ? now() : +time) + (delay == null ? 0 : +delay);\n if (!this._next && taskTail !== this) {\n if (taskTail) taskTail._next = this;\n else taskHead = this;\n taskTail = this;\n }\n this._call = callback;\n this._time = time;\n sleep();\n },\n stop: function() {\n if (this._call) {\n this._call = null;\n this._time = Infinity;\n sleep();\n }\n }\n};\n\nexport function timer(callback, delay, time) {\n var t = new Timer;\n t.restart(callback, delay, time);\n return t;\n}\n\nexport function timerFlush() {\n now(); // Get the current time, if not already set.\n ++frame; // Pretend we’ve set an alarm, if we haven’t already.\n var t = taskHead, e;\n while (t) {\n if ((e = clockNow - t._time) >= 0) t._call.call(undefined, e);\n t = t._next;\n }\n --frame;\n}\n\nfunction wake() {\n clockNow = (clockLast = clock.now()) + clockSkew;\n frame = timeout = 0;\n try {\n timerFlush();\n } finally {\n frame = 0;\n nap();\n clockNow = 0;\n }\n}\n\nfunction poke() {\n var now = clock.now(), delay = now - clockLast;\n if (delay > pokeDelay) clockSkew -= delay, clockLast = now;\n}\n\nfunction nap() {\n var t0, t1 = taskHead, t2, time = Infinity;\n while (t1) {\n if (t1._call) {\n if (time > t1._time) time = t1._time;\n t0 = t1, t1 = t1._next;\n } else {\n t2 = t1._next, t1._next = null;\n t1 = t0 ? t0._next = t2 : taskHead = t2;\n }\n }\n taskTail = t0;\n sleep(time);\n}\n\nfunction sleep(time) {\n if (frame) return; // Soonest alarm already set, or will be.\n if (timeout) timeout = clearTimeout(timeout);\n var delay = time - clockNow; // Strictly less than if we recomputed clockNow.\n if (delay > 24) {\n if (time < Infinity) timeout = setTimeout(wake, time - clock.now() - clockSkew);\n if (interval) interval = clearInterval(interval);\n } else {\n if (!interval) clockLast = clock.now(), interval = setInterval(poke, pokeDelay);\n frame = 1, setFrame(wake);\n }\n}\n","import {Timer} from \"./timer.js\";\n\nexport default function(callback, delay, time) {\n var t = new Timer;\n delay = delay == null ? 0 : +delay;\n t.restart(elapsed => {\n t.stop();\n callback(elapsed + delay);\n }, delay, time);\n return t;\n}\n","import {dispatch} from \"d3-dispatch\";\nimport {timer, timeout} from \"d3-timer\";\n\nvar emptyOn = dispatch(\"start\", \"end\", \"cancel\", \"interrupt\");\nvar emptyTween = [];\n\nexport var CREATED = 0;\nexport var SCHEDULED = 1;\nexport var STARTING = 2;\nexport var STARTED = 3;\nexport var RUNNING = 4;\nexport var ENDING = 5;\nexport var ENDED = 6;\n\nexport default function(node, name, id, index, group, timing) {\n var schedules = node.__transition;\n if (!schedules) node.__transition = {};\n else if (id in schedules) return;\n create(node, id, {\n name: name,\n index: index, // For context during callback.\n group: group, // For context during callback.\n on: emptyOn,\n tween: emptyTween,\n time: timing.time,\n delay: timing.delay,\n duration: timing.duration,\n ease: timing.ease,\n timer: null,\n state: CREATED\n });\n}\n\nexport function init(node, id) {\n var schedule = get(node, id);\n if (schedule.state > CREATED) throw new Error(\"too late; already scheduled\");\n return schedule;\n}\n\nexport function set(node, id) {\n var schedule = get(node, id);\n if (schedule.state > STARTED) throw new Error(\"too late; already running\");\n return schedule;\n}\n\nexport function get(node, id) {\n var schedule = node.__transition;\n if (!schedule || !(schedule = schedule[id])) throw new Error(\"transition not found\");\n return schedule;\n}\n\nfunction create(node, id, self) {\n var schedules = node.__transition,\n tween;\n\n // Initialize the self timer when the transition is created.\n // Note the actual delay is not known until the first callback!\n schedules[id] = self;\n self.timer = timer(schedule, 0, self.time);\n\n function schedule(elapsed) {\n self.state = SCHEDULED;\n self.timer.restart(start, self.delay, self.time);\n\n // If the elapsed delay is less than our first sleep, start immediately.\n if (self.delay <= elapsed) start(elapsed - self.delay);\n }\n\n function start(elapsed) {\n var i, j, n, o;\n\n // If the state is not SCHEDULED, then we previously errored on start.\n if (self.state !== SCHEDULED) return stop();\n\n for (i in schedules) {\n o = schedules[i];\n if (o.name !== self.name) continue;\n\n // While this element already has a starting transition during this frame,\n // defer starting an interrupting transition until that transition has a\n // chance to tick (and possibly end); see d3/d3-transition#54!\n if (o.state === STARTED) return timeout(start);\n\n // Interrupt the active transition, if any.\n if (o.state === RUNNING) {\n o.state = ENDED;\n o.timer.stop();\n o.on.call(\"interrupt\", node, node.__data__, o.index, o.group);\n delete schedules[i];\n }\n\n // Cancel any pre-empted transitions.\n else if (+i < id) {\n o.state = ENDED;\n o.timer.stop();\n o.on.call(\"cancel\", node, node.__data__, o.index, o.group);\n delete schedules[i];\n }\n }\n\n // Defer the first tick to end of the current frame; see d3/d3#1576.\n // Note the transition may be canceled after start and before the first tick!\n // Note this must be scheduled before the start event; see d3/d3-transition#16!\n // Assuming this is successful, subsequent callbacks go straight to tick.\n timeout(function() {\n if (self.state === STARTED) {\n self.state = RUNNING;\n self.timer.restart(tick, self.delay, self.time);\n tick(elapsed);\n }\n });\n\n // Dispatch the start event.\n // Note this must be done before the tween are initialized.\n self.state = STARTING;\n self.on.call(\"start\", node, node.__data__, self.index, self.group);\n if (self.state !== STARTING) return; // interrupted\n self.state = STARTED;\n\n // Initialize the tween, deleting null tween.\n tween = new Array(n = self.tween.length);\n for (i = 0, j = -1; i < n; ++i) {\n if (o = self.tween[i].value.call(node, node.__data__, self.index, self.group)) {\n tween[++j] = o;\n }\n }\n tween.length = j + 1;\n }\n\n function tick(elapsed) {\n var t = elapsed < self.duration ? self.ease.call(null, elapsed / self.duration) : (self.timer.restart(stop), self.state = ENDING, 1),\n i = -1,\n n = tween.length;\n\n while (++i < n) {\n tween[i].call(node, t);\n }\n\n // Dispatch the end event.\n if (self.state === ENDING) {\n self.on.call(\"end\", node, node.__data__, self.index, self.group);\n stop();\n }\n }\n\n function stop() {\n self.state = ENDED;\n self.timer.stop();\n delete schedules[id];\n for (var i in schedules) return; // eslint-disable-line no-unused-vars\n delete node.__transition;\n }\n}\n","import {STARTING, ENDING, ENDED} from \"./transition/schedule.js\";\n\nexport default function(node, name) {\n var schedules = node.__transition,\n schedule,\n active,\n empty = true,\n i;\n\n if (!schedules) return;\n\n name = name == null ? null : name + \"\";\n\n for (i in schedules) {\n if ((schedule = schedules[i]).name !== name) { empty = false; continue; }\n active = schedule.state > STARTING && schedule.state < ENDING;\n schedule.state = ENDED;\n schedule.timer.stop();\n schedule.on.call(active ? \"interrupt\" : \"cancel\", node, node.__data__, schedule.index, schedule.group);\n delete schedules[i];\n }\n\n if (empty) delete node.__transition;\n}\n","import interrupt from \"../interrupt.js\";\n\nexport default function(name) {\n return this.each(function() {\n interrupt(this, name);\n });\n}\n","import {get, set} from \"./schedule.js\";\n\nfunction tweenRemove(id, name) {\n var tween0, tween1;\n return function() {\n var schedule = set(this, id),\n tween = schedule.tween;\n\n // If this node shared tween with the previous node,\n // just assign the updated shared tween and we’re done!\n // Otherwise, copy-on-write.\n if (tween !== tween0) {\n tween1 = tween0 = tween;\n for (var i = 0, n = tween1.length; i < n; ++i) {\n if (tween1[i].name === name) {\n tween1 = tween1.slice();\n tween1.splice(i, 1);\n break;\n }\n }\n }\n\n schedule.tween = tween1;\n };\n}\n\nfunction tweenFunction(id, name, value) {\n var tween0, tween1;\n if (typeof value !== \"function\") throw new Error;\n return function() {\n var schedule = set(this, id),\n tween = schedule.tween;\n\n // If this node shared tween with the previous node,\n // just assign the updated shared tween and we’re done!\n // Otherwise, copy-on-write.\n if (tween !== tween0) {\n tween1 = (tween0 = tween).slice();\n for (var t = {name: name, value: value}, i = 0, n = tween1.length; i < n; ++i) {\n if (tween1[i].name === name) {\n tween1[i] = t;\n break;\n }\n }\n if (i === n) tween1.push(t);\n }\n\n schedule.tween = tween1;\n };\n}\n\nexport default function(name, value) {\n var id = this._id;\n\n name += \"\";\n\n if (arguments.length < 2) {\n var tween = get(this.node(), id).tween;\n for (var i = 0, n = tween.length, t; i < n; ++i) {\n if ((t = tween[i]).name === name) {\n return t.value;\n }\n }\n return null;\n }\n\n return this.each((value == null ? tweenRemove : tweenFunction)(id, name, value));\n}\n\nexport function tweenValue(transition, name, value) {\n var id = transition._id;\n\n transition.each(function() {\n var schedule = set(this, id);\n (schedule.value || (schedule.value = {}))[name] = value.apply(this, arguments);\n });\n\n return function(node) {\n return get(node, id).value[name];\n };\n}\n","import {color} from \"d3-color\";\nimport {interpolateNumber, interpolateRgb, interpolateString} from \"d3-interpolate\";\n\nexport default function(a, b) {\n var c;\n return (typeof b === \"number\" ? interpolateNumber\n : b instanceof color ? interpolateRgb\n : (c = color(b)) ? (b = c, interpolateRgb)\n : interpolateString)(a, b);\n}\n","import {interpolateTransformSvg as interpolateTransform} from \"d3-interpolate\";\nimport {namespace} from \"d3-selection\";\nimport {tweenValue} from \"./tween.js\";\nimport interpolate from \"./interpolate.js\";\n\nfunction attrRemove(name) {\n return function() {\n this.removeAttribute(name);\n };\n}\n\nfunction attrRemoveNS(fullname) {\n return function() {\n this.removeAttributeNS(fullname.space, fullname.local);\n };\n}\n\nfunction attrConstant(name, interpolate, value1) {\n var string00,\n string1 = value1 + \"\",\n interpolate0;\n return function() {\n var string0 = this.getAttribute(name);\n return string0 === string1 ? null\n : string0 === string00 ? interpolate0\n : interpolate0 = interpolate(string00 = string0, value1);\n };\n}\n\nfunction attrConstantNS(fullname, interpolate, value1) {\n var string00,\n string1 = value1 + \"\",\n interpolate0;\n return function() {\n var string0 = this.getAttributeNS(fullname.space, fullname.local);\n return string0 === string1 ? null\n : string0 === string00 ? interpolate0\n : interpolate0 = interpolate(string00 = string0, value1);\n };\n}\n\nfunction attrFunction(name, interpolate, value) {\n var string00,\n string10,\n interpolate0;\n return function() {\n var string0, value1 = value(this), string1;\n if (value1 == null) return void this.removeAttribute(name);\n string0 = this.getAttribute(name);\n string1 = value1 + \"\";\n return string0 === string1 ? null\n : string0 === string00 && string1 === string10 ? interpolate0\n : (string10 = string1, interpolate0 = interpolate(string00 = string0, value1));\n };\n}\n\nfunction attrFunctionNS(fullname, interpolate, value) {\n var string00,\n string10,\n interpolate0;\n return function() {\n var string0, value1 = value(this), string1;\n if (value1 == null) return void this.removeAttributeNS(fullname.space, fullname.local);\n string0 = this.getAttributeNS(fullname.space, fullname.local);\n string1 = value1 + \"\";\n return string0 === string1 ? null\n : string0 === string00 && string1 === string10 ? interpolate0\n : (string10 = string1, interpolate0 = interpolate(string00 = string0, value1));\n };\n}\n\nexport default function(name, value) {\n var fullname = namespace(name), i = fullname === \"transform\" ? interpolateTransform : interpolate;\n return this.attrTween(name, typeof value === \"function\"\n ? (fullname.local ? attrFunctionNS : attrFunction)(fullname, i, tweenValue(this, \"attr.\" + name, value))\n : value == null ? (fullname.local ? attrRemoveNS : attrRemove)(fullname)\n : (fullname.local ? attrConstantNS : attrConstant)(fullname, i, value));\n}\n","import {namespace} from \"d3-selection\";\n\nfunction attrInterpolate(name, i) {\n return function(t) {\n this.setAttribute(name, i.call(this, t));\n };\n}\n\nfunction attrInterpolateNS(fullname, i) {\n return function(t) {\n this.setAttributeNS(fullname.space, fullname.local, i.call(this, t));\n };\n}\n\nfunction attrTweenNS(fullname, value) {\n var t0, i0;\n function tween() {\n var i = value.apply(this, arguments);\n if (i !== i0) t0 = (i0 = i) && attrInterpolateNS(fullname, i);\n return t0;\n }\n tween._value = value;\n return tween;\n}\n\nfunction attrTween(name, value) {\n var t0, i0;\n function tween() {\n var i = value.apply(this, arguments);\n if (i !== i0) t0 = (i0 = i) && attrInterpolate(name, i);\n return t0;\n }\n tween._value = value;\n return tween;\n}\n\nexport default function(name, value) {\n var key = \"attr.\" + name;\n if (arguments.length < 2) return (key = this.tween(key)) && key._value;\n if (value == null) return this.tween(key, null);\n if (typeof value !== \"function\") throw new Error;\n var fullname = namespace(name);\n return this.tween(key, (fullname.local ? attrTweenNS : attrTween)(fullname, value));\n}\n","import {get, init} from \"./schedule.js\";\n\nfunction delayFunction(id, value) {\n return function() {\n init(this, id).delay = +value.apply(this, arguments);\n };\n}\n\nfunction delayConstant(id, value) {\n return value = +value, function() {\n init(this, id).delay = value;\n };\n}\n\nexport default function(value) {\n var id = this._id;\n\n return arguments.length\n ? this.each((typeof value === \"function\"\n ? delayFunction\n : delayConstant)(id, value))\n : get(this.node(), id).delay;\n}\n","import {get, set} from \"./schedule.js\";\n\nfunction durationFunction(id, value) {\n return function() {\n set(this, id).duration = +value.apply(this, arguments);\n };\n}\n\nfunction durationConstant(id, value) {\n return value = +value, function() {\n set(this, id).duration = value;\n };\n}\n\nexport default function(value) {\n var id = this._id;\n\n return arguments.length\n ? this.each((typeof value === \"function\"\n ? durationFunction\n : durationConstant)(id, value))\n : get(this.node(), id).duration;\n}\n","import {get, set} from \"./schedule.js\";\n\nfunction easeConstant(id, value) {\n if (typeof value !== \"function\") throw new Error;\n return function() {\n set(this, id).ease = value;\n };\n}\n\nexport default function(value) {\n var id = this._id;\n\n return arguments.length\n ? this.each(easeConstant(id, value))\n : get(this.node(), id).ease;\n}\n","import {set} from \"./schedule.js\";\n\nfunction easeVarying(id, value) {\n return function() {\n var v = value.apply(this, arguments);\n if (typeof v !== \"function\") throw new Error;\n set(this, id).ease = v;\n };\n}\n\nexport default function(value) {\n if (typeof value !== \"function\") throw new Error;\n return this.each(easeVarying(this._id, value));\n}\n","import {matcher} from \"d3-selection\";\nimport {Transition} from \"./index.js\";\n\nexport default function(match) {\n if (typeof match !== \"function\") match = matcher(match);\n\n for (var groups = this._groups, m = groups.length, subgroups = new Array(m), j = 0; j < m; ++j) {\n for (var group = groups[j], n = group.length, subgroup = subgroups[j] = [], node, i = 0; i < n; ++i) {\n if ((node = group[i]) && match.call(node, node.__data__, i, group)) {\n subgroup.push(node);\n }\n }\n }\n\n return new Transition(subgroups, this._parents, this._name, this._id);\n}\n","import {Transition} from \"./index.js\";\n\nexport default function(transition) {\n if (transition._id !== this._id) throw new Error;\n\n for (var groups0 = this._groups, groups1 = transition._groups, m0 = groups0.length, m1 = groups1.length, m = Math.min(m0, m1), merges = new Array(m0), j = 0; j < m; ++j) {\n for (var group0 = groups0[j], group1 = groups1[j], n = group0.length, merge = merges[j] = new Array(n), node, i = 0; i < n; ++i) {\n if (node = group0[i] || group1[i]) {\n merge[i] = node;\n }\n }\n }\n\n for (; j < m0; ++j) {\n merges[j] = groups0[j];\n }\n\n return new Transition(merges, this._parents, this._name, this._id);\n}\n","import {get, set, init} from \"./schedule.js\";\n\nfunction start(name) {\n return (name + \"\").trim().split(/^|\\s+/).every(function(t) {\n var i = t.indexOf(\".\");\n if (i >= 0) t = t.slice(0, i);\n return !t || t === \"start\";\n });\n}\n\nfunction onFunction(id, name, listener) {\n var on0, on1, sit = start(name) ? init : set;\n return function() {\n var schedule = sit(this, id),\n on = schedule.on;\n\n // If this node shared a dispatch with the previous node,\n // just assign the updated shared dispatch and we’re done!\n // Otherwise, copy-on-write.\n if (on !== on0) (on1 = (on0 = on).copy()).on(name, listener);\n\n schedule.on = on1;\n };\n}\n\nexport default function(name, listener) {\n var id = this._id;\n\n return arguments.length < 2\n ? get(this.node(), id).on.on(name)\n : this.each(onFunction(id, name, listener));\n}\n","function removeFunction(id) {\n return function() {\n var parent = this.parentNode;\n for (var i in this.__transition) if (+i !== id) return;\n if (parent) parent.removeChild(this);\n };\n}\n\nexport default function() {\n return this.on(\"end.remove\", removeFunction(this._id));\n}\n","import {selector} from \"d3-selection\";\nimport {Transition} from \"./index.js\";\nimport schedule, {get} from \"./schedule.js\";\n\nexport default function(select) {\n var name = this._name,\n id = this._id;\n\n if (typeof select !== \"function\") select = selector(select);\n\n for (var groups = this._groups, m = groups.length, subgroups = new Array(m), j = 0; j < m; ++j) {\n for (var group = groups[j], n = group.length, subgroup = subgroups[j] = new Array(n), node, subnode, i = 0; i < n; ++i) {\n if ((node = group[i]) && (subnode = select.call(node, node.__data__, i, group))) {\n if (\"__data__\" in node) subnode.__data__ = node.__data__;\n subgroup[i] = subnode;\n schedule(subgroup[i], name, id, i, subgroup, get(node, id));\n }\n }\n }\n\n return new Transition(subgroups, this._parents, name, id);\n}\n","import {selectorAll} from \"d3-selection\";\nimport {Transition} from \"./index.js\";\nimport schedule, {get} from \"./schedule.js\";\n\nexport default function(select) {\n var name = this._name,\n id = this._id;\n\n if (typeof select !== \"function\") select = selectorAll(select);\n\n for (var groups = this._groups, m = groups.length, subgroups = [], parents = [], j = 0; j < m; ++j) {\n for (var group = groups[j], n = group.length, node, i = 0; i < n; ++i) {\n if (node = group[i]) {\n for (var children = select.call(node, node.__data__, i, group), child, inherit = get(node, id), k = 0, l = children.length; k < l; ++k) {\n if (child = children[k]) {\n schedule(child, name, id, k, children, inherit);\n }\n }\n subgroups.push(children);\n parents.push(node);\n }\n }\n }\n\n return new Transition(subgroups, parents, name, id);\n}\n","import {selection} from \"d3-selection\";\n\nvar Selection = selection.prototype.constructor;\n\nexport default function() {\n return new Selection(this._groups, this._parents);\n}\n","import {interpolateTransformCss as interpolateTransform} from \"d3-interpolate\";\nimport {style} from \"d3-selection\";\nimport {set} from \"./schedule.js\";\nimport {tweenValue} from \"./tween.js\";\nimport interpolate from \"./interpolate.js\";\n\nfunction styleNull(name, interpolate) {\n var string00,\n string10,\n interpolate0;\n return function() {\n var string0 = style(this, name),\n string1 = (this.style.removeProperty(name), style(this, name));\n return string0 === string1 ? null\n : string0 === string00 && string1 === string10 ? interpolate0\n : interpolate0 = interpolate(string00 = string0, string10 = string1);\n };\n}\n\nfunction styleRemove(name) {\n return function() {\n this.style.removeProperty(name);\n };\n}\n\nfunction styleConstant(name, interpolate, value1) {\n var string00,\n string1 = value1 + \"\",\n interpolate0;\n return function() {\n var string0 = style(this, name);\n return string0 === string1 ? null\n : string0 === string00 ? interpolate0\n : interpolate0 = interpolate(string00 = string0, value1);\n };\n}\n\nfunction styleFunction(name, interpolate, value) {\n var string00,\n string10,\n interpolate0;\n return function() {\n var string0 = style(this, name),\n value1 = value(this),\n string1 = value1 + \"\";\n if (value1 == null) string1 = value1 = (this.style.removeProperty(name), style(this, name));\n return string0 === string1 ? null\n : string0 === string00 && string1 === string10 ? interpolate0\n : (string10 = string1, interpolate0 = interpolate(string00 = string0, value1));\n };\n}\n\nfunction styleMaybeRemove(id, name) {\n var on0, on1, listener0, key = \"style.\" + name, event = \"end.\" + key, remove;\n return function() {\n var schedule = set(this, id),\n on = schedule.on,\n listener = schedule.value[key] == null ? remove || (remove = styleRemove(name)) : undefined;\n\n // If this node shared a dispatch with the previous node,\n // just assign the updated shared dispatch and we’re done!\n // Otherwise, copy-on-write.\n if (on !== on0 || listener0 !== listener) (on1 = (on0 = on).copy()).on(event, listener0 = listener);\n\n schedule.on = on1;\n };\n}\n\nexport default function(name, value, priority) {\n var i = (name += \"\") === \"transform\" ? interpolateTransform : interpolate;\n return value == null ? this\n .styleTween(name, styleNull(name, i))\n .on(\"end.style.\" + name, styleRemove(name))\n : typeof value === \"function\" ? this\n .styleTween(name, styleFunction(name, i, tweenValue(this, \"style.\" + name, value)))\n .each(styleMaybeRemove(this._id, name))\n : this\n .styleTween(name, styleConstant(name, i, value), priority)\n .on(\"end.style.\" + name, null);\n}\n","function styleInterpolate(name, i, priority) {\n return function(t) {\n this.style.setProperty(name, i.call(this, t), priority);\n };\n}\n\nfunction styleTween(name, value, priority) {\n var t, i0;\n function tween() {\n var i = value.apply(this, arguments);\n if (i !== i0) t = (i0 = i) && styleInterpolate(name, i, priority);\n return t;\n }\n tween._value = value;\n return tween;\n}\n\nexport default function(name, value, priority) {\n var key = \"style.\" + (name += \"\");\n if (arguments.length < 2) return (key = this.tween(key)) && key._value;\n if (value == null) return this.tween(key, null);\n if (typeof value !== \"function\") throw new Error;\n return this.tween(key, styleTween(name, value, priority == null ? \"\" : priority));\n}\n","import {tweenValue} from \"./tween.js\";\n\nfunction textConstant(value) {\n return function() {\n this.textContent = value;\n };\n}\n\nfunction textFunction(value) {\n return function() {\n var value1 = value(this);\n this.textContent = value1 == null ? \"\" : value1;\n };\n}\n\nexport default function(value) {\n return this.tween(\"text\", typeof value === \"function\"\n ? textFunction(tweenValue(this, \"text\", value))\n : textConstant(value == null ? \"\" : value + \"\"));\n}\n","function textInterpolate(i) {\n return function(t) {\n this.textContent = i.call(this, t);\n };\n}\n\nfunction textTween(value) {\n var t0, i0;\n function tween() {\n var i = value.apply(this, arguments);\n if (i !== i0) t0 = (i0 = i) && textInterpolate(i);\n return t0;\n }\n tween._value = value;\n return tween;\n}\n\nexport default function(value) {\n var key = \"text\";\n if (arguments.length < 1) return (key = this.tween(key)) && key._value;\n if (value == null) return this.tween(key, null);\n if (typeof value !== \"function\") throw new Error;\n return this.tween(key, textTween(value));\n}\n","import {Transition, newId} from \"./index.js\";\nimport schedule, {get} from \"./schedule.js\";\n\nexport default function() {\n var name = this._name,\n id0 = this._id,\n id1 = newId();\n\n for (var groups = this._groups, m = groups.length, j = 0; j < m; ++j) {\n for (var group = groups[j], n = group.length, node, i = 0; i < n; ++i) {\n if (node = group[i]) {\n var inherit = get(node, id0);\n schedule(node, name, id1, i, group, {\n time: inherit.time + inherit.delay + inherit.duration,\n delay: 0,\n duration: inherit.duration,\n ease: inherit.ease\n });\n }\n }\n }\n\n return new Transition(groups, this._parents, name, id1);\n}\n","import {set} from \"./schedule.js\";\n\nexport default function() {\n var on0, on1, that = this, id = that._id, size = that.size();\n return new Promise(function(resolve, reject) {\n var cancel = {value: reject},\n end = {value: function() { if (--size === 0) resolve(); }};\n\n that.each(function() {\n var schedule = set(this, id),\n on = schedule.on;\n\n // If this node shared a dispatch with the previous node,\n // just assign the updated shared dispatch and we’re done!\n // Otherwise, copy-on-write.\n if (on !== on0) {\n on1 = (on0 = on).copy();\n on1._.cancel.push(cancel);\n on1._.interrupt.push(cancel);\n on1._.end.push(end);\n }\n\n schedule.on = on1;\n });\n\n // The selection was empty, resolve end immediately\n if (size === 0) resolve();\n });\n}\n","import {selection} from \"d3-selection\";\nimport transition_attr from \"./attr.js\";\nimport transition_attrTween from \"./attrTween.js\";\nimport transition_delay from \"./delay.js\";\nimport transition_duration from \"./duration.js\";\nimport transition_ease from \"./ease.js\";\nimport transition_easeVarying from \"./easeVarying.js\";\nimport transition_filter from \"./filter.js\";\nimport transition_merge from \"./merge.js\";\nimport transition_on from \"./on.js\";\nimport transition_remove from \"./remove.js\";\nimport transition_select from \"./select.js\";\nimport transition_selectAll from \"./selectAll.js\";\nimport transition_selection from \"./selection.js\";\nimport transition_style from \"./style.js\";\nimport transition_styleTween from \"./styleTween.js\";\nimport transition_text from \"./text.js\";\nimport transition_textTween from \"./textTween.js\";\nimport transition_transition from \"./transition.js\";\nimport transition_tween from \"./tween.js\";\nimport transition_end from \"./end.js\";\n\nvar id = 0;\n\nexport function Transition(groups, parents, name, id) {\n this._groups = groups;\n this._parents = parents;\n this._name = name;\n this._id = id;\n}\n\nexport default function transition(name) {\n return selection().transition(name);\n}\n\nexport function newId() {\n return ++id;\n}\n\nvar selection_prototype = selection.prototype;\n\nTransition.prototype = transition.prototype = {\n constructor: Transition,\n select: transition_select,\n selectAll: transition_selectAll,\n selectChild: selection_prototype.selectChild,\n selectChildren: selection_prototype.selectChildren,\n filter: transition_filter,\n merge: transition_merge,\n selection: transition_selection,\n transition: transition_transition,\n call: selection_prototype.call,\n nodes: selection_prototype.nodes,\n node: selection_prototype.node,\n size: selection_prototype.size,\n empty: selection_prototype.empty,\n each: selection_prototype.each,\n on: transition_on,\n attr: transition_attr,\n attrTween: transition_attrTween,\n style: transition_style,\n styleTween: transition_styleTween,\n text: transition_text,\n textTween: transition_textTween,\n remove: transition_remove,\n tween: transition_tween,\n delay: transition_delay,\n duration: transition_duration,\n ease: transition_ease,\n easeVarying: transition_easeVarying,\n end: transition_end,\n [Symbol.iterator]: selection_prototype[Symbol.iterator]\n};\n","export function cubicIn(t) {\n return t * t * t;\n}\n\nexport function cubicOut(t) {\n return --t * t * t + 1;\n}\n\nexport function cubicInOut(t) {\n return ((t *= 2) <= 1 ? t * t * t : (t -= 2) * t * t + 2) / 2;\n}\n","import {Transition, newId} from \"../transition/index.js\";\nimport schedule from \"../transition/schedule.js\";\nimport {easeCubicInOut} from \"d3-ease\";\nimport {now} from \"d3-timer\";\n\nvar defaultTiming = {\n time: null, // Set on use.\n delay: 0,\n duration: 250,\n ease: easeCubicInOut\n};\n\nfunction inherit(node, id) {\n var timing;\n while (!(timing = node.__transition) || !(timing = timing[id])) {\n if (!(node = node.parentNode)) {\n throw new Error(`transition ${id} not found`);\n }\n }\n return timing;\n}\n\nexport default function(name) {\n var id,\n timing;\n\n if (name instanceof Transition) {\n id = name._id, name = name._name;\n } else {\n id = newId(), (timing = defaultTiming).time = now(), name = name == null ? null : name + \"\";\n }\n\n for (var groups = this._groups, m = groups.length, j = 0; j < m; ++j) {\n for (var group = groups[j], n = group.length, node, i = 0; i < n; ++i) {\n if (node = group[i]) {\n schedule(node, name, id, i, group, timing || inherit(node, id));\n }\n }\n }\n\n return new Transition(groups, this._parents, name, id);\n}\n","import {selection} from \"d3-selection\";\nimport selection_interrupt from \"./interrupt.js\";\nimport selection_transition from \"./transition.js\";\n\nselection.prototype.interrupt = selection_interrupt;\nselection.prototype.transition = selection_transition;\n","export default x => () => x;\n","export default function ZoomEvent(type, {\n sourceEvent,\n target,\n transform,\n dispatch\n}) {\n Object.defineProperties(this, {\n type: {value: type, enumerable: true, configurable: true},\n sourceEvent: {value: sourceEvent, enumerable: true, configurable: true},\n target: {value: target, enumerable: true, configurable: true},\n transform: {value: transform, enumerable: true, configurable: true},\n _: {value: dispatch}\n });\n}\n","export function Transform(k, x, y) {\n this.k = k;\n this.x = x;\n this.y = y;\n}\n\nTransform.prototype = {\n constructor: Transform,\n scale: function(k) {\n return k === 1 ? this : new Transform(this.k * k, this.x, this.y);\n },\n translate: function(x, y) {\n return x === 0 & y === 0 ? this : new Transform(this.k, this.x + this.k * x, this.y + this.k * y);\n },\n apply: function(point) {\n return [point[0] * this.k + this.x, point[1] * this.k + this.y];\n },\n applyX: function(x) {\n return x * this.k + this.x;\n },\n applyY: function(y) {\n return y * this.k + this.y;\n },\n invert: function(location) {\n return [(location[0] - this.x) / this.k, (location[1] - this.y) / this.k];\n },\n invertX: function(x) {\n return (x - this.x) / this.k;\n },\n invertY: function(y) {\n return (y - this.y) / this.k;\n },\n rescaleX: function(x) {\n return x.copy().domain(x.range().map(this.invertX, this).map(x.invert, x));\n },\n rescaleY: function(y) {\n return y.copy().domain(y.range().map(this.invertY, this).map(y.invert, y));\n },\n toString: function() {\n return \"translate(\" + this.x + \",\" + this.y + \") scale(\" + this.k + \")\";\n }\n};\n\nexport var identity = new Transform(1, 0, 0);\n\ntransform.prototype = Transform.prototype;\n\nexport default function transform(node) {\n while (!node.__zoom) if (!(node = node.parentNode)) return identity;\n return node.__zoom;\n}\n","export function nopropagation(event) {\n event.stopImmediatePropagation();\n}\n\nexport default function(event) {\n event.preventDefault();\n event.stopImmediatePropagation();\n}\n","import {dispatch} from \"d3-dispatch\";\nimport {dragDisable, dragEnable} from \"d3-drag\";\nimport {interpolateZoom} from \"d3-interpolate\";\nimport {select, pointer} from \"d3-selection\";\nimport {interrupt} from \"d3-transition\";\nimport constant from \"./constant.js\";\nimport ZoomEvent from \"./event.js\";\nimport {Transform, identity} from \"./transform.js\";\nimport noevent, {nopropagation} from \"./noevent.js\";\n\n// Ignore right-click, since that should open the context menu.\n// except for pinch-to-zoom, which is sent as a wheel+ctrlKey event\nfunction defaultFilter(event) {\n return (!event.ctrlKey || event.type === 'wheel') && !event.button;\n}\n\nfunction defaultExtent() {\n var e = this;\n if (e instanceof SVGElement) {\n e = e.ownerSVGElement || e;\n if (e.hasAttribute(\"viewBox\")) {\n e = e.viewBox.baseVal;\n return [[e.x, e.y], [e.x + e.width, e.y + e.height]];\n }\n return [[0, 0], [e.width.baseVal.value, e.height.baseVal.value]];\n }\n return [[0, 0], [e.clientWidth, e.clientHeight]];\n}\n\nfunction defaultTransform() {\n return this.__zoom || identity;\n}\n\nfunction defaultWheelDelta(event) {\n return -event.deltaY * (event.deltaMode === 1 ? 0.05 : event.deltaMode ? 1 : 0.002) * (event.ctrlKey ? 10 : 1);\n}\n\nfunction defaultTouchable() {\n return navigator.maxTouchPoints || (\"ontouchstart\" in this);\n}\n\nfunction defaultConstrain(transform, extent, translateExtent) {\n var dx0 = transform.invertX(extent[0][0]) - translateExtent[0][0],\n dx1 = transform.invertX(extent[1][0]) - translateExtent[1][0],\n dy0 = transform.invertY(extent[0][1]) - translateExtent[0][1],\n dy1 = transform.invertY(extent[1][1]) - translateExtent[1][1];\n return transform.translate(\n dx1 > dx0 ? (dx0 + dx1) / 2 : Math.min(0, dx0) || Math.max(0, dx1),\n dy1 > dy0 ? (dy0 + dy1) / 2 : Math.min(0, dy0) || Math.max(0, dy1)\n );\n}\n\nexport default function() {\n var filter = defaultFilter,\n extent = defaultExtent,\n constrain = defaultConstrain,\n wheelDelta = defaultWheelDelta,\n touchable = defaultTouchable,\n scaleExtent = [0, Infinity],\n translateExtent = [[-Infinity, -Infinity], [Infinity, Infinity]],\n duration = 250,\n interpolate = interpolateZoom,\n listeners = dispatch(\"start\", \"zoom\", \"end\"),\n touchstarting,\n touchfirst,\n touchending,\n touchDelay = 500,\n wheelDelay = 150,\n clickDistance2 = 0,\n tapDistance = 10;\n\n function zoom(selection) {\n selection\n .property(\"__zoom\", defaultTransform)\n .on(\"wheel.zoom\", wheeled, {passive: false})\n .on(\"mousedown.zoom\", mousedowned)\n .on(\"dblclick.zoom\", dblclicked)\n .filter(touchable)\n .on(\"touchstart.zoom\", touchstarted)\n .on(\"touchmove.zoom\", touchmoved)\n .on(\"touchend.zoom touchcancel.zoom\", touchended)\n .style(\"-webkit-tap-highlight-color\", \"rgba(0,0,0,0)\");\n }\n\n zoom.transform = function(collection, transform, point, event) {\n var selection = collection.selection ? collection.selection() : collection;\n selection.property(\"__zoom\", defaultTransform);\n if (collection !== selection) {\n schedule(collection, transform, point, event);\n } else {\n selection.interrupt().each(function() {\n gesture(this, arguments)\n .event(event)\n .start()\n .zoom(null, typeof transform === \"function\" ? transform.apply(this, arguments) : transform)\n .end();\n });\n }\n };\n\n zoom.scaleBy = function(selection, k, p, event) {\n zoom.scaleTo(selection, function() {\n var k0 = this.__zoom.k,\n k1 = typeof k === \"function\" ? k.apply(this, arguments) : k;\n return k0 * k1;\n }, p, event);\n };\n\n zoom.scaleTo = function(selection, k, p, event) {\n zoom.transform(selection, function() {\n var e = extent.apply(this, arguments),\n t0 = this.__zoom,\n p0 = p == null ? centroid(e) : typeof p === \"function\" ? p.apply(this, arguments) : p,\n p1 = t0.invert(p0),\n k1 = typeof k === \"function\" ? k.apply(this, arguments) : k;\n return constrain(translate(scale(t0, k1), p0, p1), e, translateExtent);\n }, p, event);\n };\n\n zoom.translateBy = function(selection, x, y, event) {\n zoom.transform(selection, function() {\n return constrain(this.__zoom.translate(\n typeof x === \"function\" ? x.apply(this, arguments) : x,\n typeof y === \"function\" ? y.apply(this, arguments) : y\n ), extent.apply(this, arguments), translateExtent);\n }, null, event);\n };\n\n zoom.translateTo = function(selection, x, y, p, event) {\n zoom.transform(selection, function() {\n var e = extent.apply(this, arguments),\n t = this.__zoom,\n p0 = p == null ? centroid(e) : typeof p === \"function\" ? p.apply(this, arguments) : p;\n return constrain(identity.translate(p0[0], p0[1]).scale(t.k).translate(\n typeof x === \"function\" ? -x.apply(this, arguments) : -x,\n typeof y === \"function\" ? -y.apply(this, arguments) : -y\n ), e, translateExtent);\n }, p, event);\n };\n\n function scale(transform, k) {\n k = Math.max(scaleExtent[0], Math.min(scaleExtent[1], k));\n return k === transform.k ? transform : new Transform(k, transform.x, transform.y);\n }\n\n function translate(transform, p0, p1) {\n var x = p0[0] - p1[0] * transform.k, y = p0[1] - p1[1] * transform.k;\n return x === transform.x && y === transform.y ? transform : new Transform(transform.k, x, y);\n }\n\n function centroid(extent) {\n return [(+extent[0][0] + +extent[1][0]) / 2, (+extent[0][1] + +extent[1][1]) / 2];\n }\n\n function schedule(transition, transform, point, event) {\n transition\n .on(\"start.zoom\", function() { gesture(this, arguments).event(event).start(); })\n .on(\"interrupt.zoom end.zoom\", function() { gesture(this, arguments).event(event).end(); })\n .tween(\"zoom\", function() {\n var that = this,\n args = arguments,\n g = gesture(that, args).event(event),\n e = extent.apply(that, args),\n p = point == null ? centroid(e) : typeof point === \"function\" ? point.apply(that, args) : point,\n w = Math.max(e[1][0] - e[0][0], e[1][1] - e[0][1]),\n a = that.__zoom,\n b = typeof transform === \"function\" ? transform.apply(that, args) : transform,\n i = interpolate(a.invert(p).concat(w / a.k), b.invert(p).concat(w / b.k));\n return function(t) {\n if (t === 1) t = b; // Avoid rounding error on end.\n else { var l = i(t), k = w / l[2]; t = new Transform(k, p[0] - l[0] * k, p[1] - l[1] * k); }\n g.zoom(null, t);\n };\n });\n }\n\n function gesture(that, args, clean) {\n return (!clean && that.__zooming) || new Gesture(that, args);\n }\n\n function Gesture(that, args) {\n this.that = that;\n this.args = args;\n this.active = 0;\n this.sourceEvent = null;\n this.extent = extent.apply(that, args);\n this.taps = 0;\n }\n\n Gesture.prototype = {\n event: function(event) {\n if (event) this.sourceEvent = event;\n return this;\n },\n start: function() {\n if (++this.active === 1) {\n this.that.__zooming = this;\n this.emit(\"start\");\n }\n return this;\n },\n zoom: function(key, transform) {\n if (this.mouse && key !== \"mouse\") this.mouse[1] = transform.invert(this.mouse[0]);\n if (this.touch0 && key !== \"touch\") this.touch0[1] = transform.invert(this.touch0[0]);\n if (this.touch1 && key !== \"touch\") this.touch1[1] = transform.invert(this.touch1[0]);\n this.that.__zoom = transform;\n this.emit(\"zoom\");\n return this;\n },\n end: function() {\n if (--this.active === 0) {\n delete this.that.__zooming;\n this.emit(\"end\");\n }\n return this;\n },\n emit: function(type) {\n var d = select(this.that).datum();\n listeners.call(\n type,\n this.that,\n new ZoomEvent(type, {\n sourceEvent: this.sourceEvent,\n target: zoom,\n type,\n transform: this.that.__zoom,\n dispatch: listeners\n }),\n d\n );\n }\n };\n\n function wheeled(event, ...args) {\n if (!filter.apply(this, arguments)) return;\n var g = gesture(this, args).event(event),\n t = this.__zoom,\n k = Math.max(scaleExtent[0], Math.min(scaleExtent[1], t.k * Math.pow(2, wheelDelta.apply(this, arguments)))),\n p = pointer(event);\n\n // If the mouse is in the same location as before, reuse it.\n // If there were recent wheel events, reset the wheel idle timeout.\n if (g.wheel) {\n if (g.mouse[0][0] !== p[0] || g.mouse[0][1] !== p[1]) {\n g.mouse[1] = t.invert(g.mouse[0] = p);\n }\n clearTimeout(g.wheel);\n }\n\n // If this wheel event won’t trigger a transform change, ignore it.\n else if (t.k === k) return;\n\n // Otherwise, capture the mouse point and location at the start.\n else {\n g.mouse = [p, t.invert(p)];\n interrupt(this);\n g.start();\n }\n\n noevent(event);\n g.wheel = setTimeout(wheelidled, wheelDelay);\n g.zoom(\"mouse\", constrain(translate(scale(t, k), g.mouse[0], g.mouse[1]), g.extent, translateExtent));\n\n function wheelidled() {\n g.wheel = null;\n g.end();\n }\n }\n\n function mousedowned(event, ...args) {\n if (touchending || !filter.apply(this, arguments)) return;\n var currentTarget = event.currentTarget,\n g = gesture(this, args, true).event(event),\n v = select(event.view).on(\"mousemove.zoom\", mousemoved, true).on(\"mouseup.zoom\", mouseupped, true),\n p = pointer(event, currentTarget),\n x0 = event.clientX,\n y0 = event.clientY;\n\n dragDisable(event.view);\n nopropagation(event);\n g.mouse = [p, this.__zoom.invert(p)];\n interrupt(this);\n g.start();\n\n function mousemoved(event) {\n noevent(event);\n if (!g.moved) {\n var dx = event.clientX - x0, dy = event.clientY - y0;\n g.moved = dx * dx + dy * dy > clickDistance2;\n }\n g.event(event)\n .zoom(\"mouse\", constrain(translate(g.that.__zoom, g.mouse[0] = pointer(event, currentTarget), g.mouse[1]), g.extent, translateExtent));\n }\n\n function mouseupped(event) {\n v.on(\"mousemove.zoom mouseup.zoom\", null);\n dragEnable(event.view, g.moved);\n noevent(event);\n g.event(event).end();\n }\n }\n\n function dblclicked(event, ...args) {\n if (!filter.apply(this, arguments)) return;\n var t0 = this.__zoom,\n p0 = pointer(event.changedTouches ? event.changedTouches[0] : event, this),\n p1 = t0.invert(p0),\n k1 = t0.k * (event.shiftKey ? 0.5 : 2),\n t1 = constrain(translate(scale(t0, k1), p0, p1), extent.apply(this, args), translateExtent);\n\n noevent(event);\n if (duration > 0) select(this).transition().duration(duration).call(schedule, t1, p0, event);\n else select(this).call(zoom.transform, t1, p0, event);\n }\n\n function touchstarted(event, ...args) {\n if (!filter.apply(this, arguments)) return;\n var touches = event.touches,\n n = touches.length,\n g = gesture(this, args, event.changedTouches.length === n).event(event),\n started, i, t, p;\n\n nopropagation(event);\n for (i = 0; i < n; ++i) {\n t = touches[i], p = pointer(t, this);\n p = [p, this.__zoom.invert(p), t.identifier];\n if (!g.touch0) g.touch0 = p, started = true, g.taps = 1 + !!touchstarting;\n else if (!g.touch1 && g.touch0[2] !== p[2]) g.touch1 = p, g.taps = 0;\n }\n\n if (touchstarting) touchstarting = clearTimeout(touchstarting);\n\n if (started) {\n if (g.taps < 2) touchfirst = p[0], touchstarting = setTimeout(function() { touchstarting = null; }, touchDelay);\n interrupt(this);\n g.start();\n }\n }\n\n function touchmoved(event, ...args) {\n if (!this.__zooming) return;\n var g = gesture(this, args).event(event),\n touches = event.changedTouches,\n n = touches.length, i, t, p, l;\n\n noevent(event);\n for (i = 0; i < n; ++i) {\n t = touches[i], p = pointer(t, this);\n if (g.touch0 && g.touch0[2] === t.identifier) g.touch0[0] = p;\n else if (g.touch1 && g.touch1[2] === t.identifier) g.touch1[0] = p;\n }\n t = g.that.__zoom;\n if (g.touch1) {\n var p0 = g.touch0[0], l0 = g.touch0[1],\n p1 = g.touch1[0], l1 = g.touch1[1],\n dp = (dp = p1[0] - p0[0]) * dp + (dp = p1[1] - p0[1]) * dp,\n dl = (dl = l1[0] - l0[0]) * dl + (dl = l1[1] - l0[1]) * dl;\n t = scale(t, Math.sqrt(dp / dl));\n p = [(p0[0] + p1[0]) / 2, (p0[1] + p1[1]) / 2];\n l = [(l0[0] + l1[0]) / 2, (l0[1] + l1[1]) / 2];\n }\n else if (g.touch0) p = g.touch0[0], l = g.touch0[1];\n else return;\n\n g.zoom(\"touch\", constrain(translate(t, p, l), g.extent, translateExtent));\n }\n\n function touchended(event, ...args) {\n if (!this.__zooming) return;\n var g = gesture(this, args).event(event),\n touches = event.changedTouches,\n n = touches.length, i, t;\n\n nopropagation(event);\n if (touchending) clearTimeout(touchending);\n touchending = setTimeout(function() { touchending = null; }, touchDelay);\n for (i = 0; i < n; ++i) {\n t = touches[i];\n if (g.touch0 && g.touch0[2] === t.identifier) delete g.touch0;\n else if (g.touch1 && g.touch1[2] === t.identifier) delete g.touch1;\n }\n if (g.touch1 && !g.touch0) g.touch0 = g.touch1, delete g.touch1;\n if (g.touch0) g.touch0[1] = this.__zoom.invert(g.touch0[0]);\n else {\n g.end();\n // If this was a dbltap, reroute to the (optional) dblclick.zoom handler.\n if (g.taps === 2) {\n t = pointer(t, this);\n if (Math.hypot(touchfirst[0] - t[0], touchfirst[1] - t[1]) < tapDistance) {\n var p = select(this).on(\"dblclick.zoom\");\n if (p) p.apply(this, arguments);\n }\n }\n }\n }\n\n zoom.wheelDelta = function(_) {\n return arguments.length ? (wheelDelta = typeof _ === \"function\" ? _ : constant(+_), zoom) : wheelDelta;\n };\n\n zoom.filter = function(_) {\n return arguments.length ? (filter = typeof _ === \"function\" ? _ : constant(!!_), zoom) : filter;\n };\n\n zoom.touchable = function(_) {\n return arguments.length ? (touchable = typeof _ === \"function\" ? _ : constant(!!_), zoom) : touchable;\n };\n\n zoom.extent = function(_) {\n return arguments.length ? (extent = typeof _ === \"function\" ? _ : constant([[+_[0][0], +_[0][1]], [+_[1][0], +_[1][1]]]), zoom) : extent;\n };\n\n zoom.scaleExtent = function(_) {\n return arguments.length ? (scaleExtent[0] = +_[0], scaleExtent[1] = +_[1], zoom) : [scaleExtent[0], scaleExtent[1]];\n };\n\n zoom.translateExtent = function(_) {\n return arguments.length ? (translateExtent[0][0] = +_[0][0], translateExtent[1][0] = +_[1][0], translateExtent[0][1] = +_[0][1], translateExtent[1][1] = +_[1][1], zoom) : [[translateExtent[0][0], translateExtent[0][1]], [translateExtent[1][0], translateExtent[1][1]]];\n };\n\n zoom.constrain = function(_) {\n return arguments.length ? (constrain = _, zoom) : constrain;\n };\n\n zoom.duration = function(_) {\n return arguments.length ? (duration = +_, zoom) : duration;\n };\n\n zoom.interpolate = function(_) {\n return arguments.length ? (interpolate = _, zoom) : interpolate;\n };\n\n zoom.on = function() {\n var value = listeners.on.apply(listeners, arguments);\n return value === listeners ? zoom : value;\n };\n\n zoom.clickDistance = function(_) {\n return arguments.length ? (clickDistance2 = (_ = +_) * _, zoom) : Math.sqrt(clickDistance2);\n };\n\n zoom.tapDistance = function(_) {\n return arguments.length ? (tapDistance = +_, zoom) : tapDistance;\n };\n\n return zoom;\n}\n","import { drag } from 'd3-drag';\nimport { select, pointer } from 'd3-selection';\nimport { zoom, zoomIdentity, zoomTransform } from 'd3-zoom';\nimport { interpolateZoom, interpolate } from 'd3-interpolate';\n\nconst errorMessages = {\n error001: (lib = 'react') => `Seems like you have not used zustand provider as an ancestor. Help: https://${lib}flow.dev/error#001`,\n 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.\",\n error003: (nodeType) => `Node type \"${nodeType}\" not found. Using fallback type \"default\".`,\n error004: () => 'The parent container needs a width and a height to render the graph.',\n error005: () => 'Only child nodes can use a parent extent.',\n error006: () => \"Can't create edge. An edge needs a source and a target.\",\n error007: (id) => `The old edge with id=${id} does not exist.`,\n error009: (type) => `Marker type \"${type}\" doesn't exist.`,\n error008: (handleType, { id, sourceHandle, targetHandle }) => `Couldn't create edge for ${handleType} handle id: \"${handleType === 'source' ? sourceHandle : targetHandle}\", edge id: ${id}.`,\n error010: () => 'Handle: No node id found. Make sure to only use a Handle inside a custom Node.',\n error011: (edgeType) => `Edge type \"${edgeType}\" not found. Using fallback type \"default\".`,\n 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.`,\n 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.`,\n error014: () => 'useNodeConnections: No node ID found. Call useNodeConnections inside a custom Node or provide a node ID.',\n error015: () => 'It seems that you are trying to drag a node that is not initialized. Please use onNodesChange as explained in the docs.',\n 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.`,\n};\nconst infiniteExtent = [\n [Number.NEGATIVE_INFINITY, Number.NEGATIVE_INFINITY],\n [Number.POSITIVE_INFINITY, Number.POSITIVE_INFINITY],\n];\nconst elementSelectionKeys = ['Enter', ' ', 'Escape'];\nconst defaultAriaLabelConfig = {\n 'node.a11yDescription.default': 'Press enter or space to select a node. Press delete to remove it and escape to cancel.',\n '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.',\n 'node.a11yDescription.ariaLiveMessage': ({ direction, x, y }) => `Moved selected node ${direction}. New position, x: ${x}, y: ${y}`,\n 'edge.a11yDescription.default': 'Press enter or space to select an edge. You can then press delete to remove it or escape to cancel.',\n // Control elements\n 'controls.ariaLabel': 'Control Panel',\n 'controls.zoomIn.ariaLabel': 'Zoom In',\n 'controls.zoomOut.ariaLabel': 'Zoom Out',\n 'controls.fitView.ariaLabel': 'Fit View',\n 'controls.interactive.ariaLabel': 'Toggle Interactivity',\n // Mini map\n 'minimap.ariaLabel': 'Mini Map',\n // Handle\n 'handle.ariaLabel': 'Handle',\n};\n\n/**\n * The `ConnectionMode` is used to set the mode of connection between nodes.\n * The `Strict` mode is the default one and only allows source to target edges.\n * `Loose` mode allows source to source and target to target edges as well.\n *\n * @public\n */\nvar ConnectionMode;\n(function (ConnectionMode) {\n ConnectionMode[\"Strict\"] = \"strict\";\n ConnectionMode[\"Loose\"] = \"loose\";\n})(ConnectionMode || (ConnectionMode = {}));\n/**\n * This enum is used to set the different modes of panning the viewport when the\n * user scrolls. The `Free` mode allows the user to pan in any direction by scrolling\n * with a device like a trackpad. The `Vertical` and `Horizontal` modes restrict\n * scroll panning to only the vertical or horizontal axis, respectively.\n *\n * @public\n */\nvar PanOnScrollMode;\n(function (PanOnScrollMode) {\n PanOnScrollMode[\"Free\"] = \"free\";\n PanOnScrollMode[\"Vertical\"] = \"vertical\";\n PanOnScrollMode[\"Horizontal\"] = \"horizontal\";\n})(PanOnScrollMode || (PanOnScrollMode = {}));\nvar SelectionMode;\n(function (SelectionMode) {\n SelectionMode[\"Partial\"] = \"partial\";\n SelectionMode[\"Full\"] = \"full\";\n})(SelectionMode || (SelectionMode = {}));\nconst initialConnection = {\n inProgress: false,\n isValid: null,\n from: null,\n fromHandle: null,\n fromPosition: null,\n fromNode: null,\n to: null,\n toHandle: null,\n toPosition: null,\n toNode: null,\n pointer: null,\n};\n\n/**\n * If you set the `connectionLineType` prop on your [``](/api-reference/react-flow#connection-connectionLineType)\n *component, it will dictate the style of connection line rendered when creating\n *new edges.\n *\n * @public\n *\n * @remarks If you choose to render a custom connection line component, this value will be\n *passed to your component as part of its [`ConnectionLineComponentProps`](/api-reference/types/connection-line-component-props).\n */\nvar ConnectionLineType;\n(function (ConnectionLineType) {\n ConnectionLineType[\"Bezier\"] = \"default\";\n ConnectionLineType[\"Straight\"] = \"straight\";\n ConnectionLineType[\"Step\"] = \"step\";\n ConnectionLineType[\"SmoothStep\"] = \"smoothstep\";\n ConnectionLineType[\"SimpleBezier\"] = \"simplebezier\";\n})(ConnectionLineType || (ConnectionLineType = {}));\n/**\n * Edges may optionally have a marker on either end. The MarkerType type enumerates\n * the options available to you when configuring a given marker.\n *\n * @public\n */\nvar MarkerType;\n(function (MarkerType) {\n MarkerType[\"Arrow\"] = \"arrow\";\n MarkerType[\"ArrowClosed\"] = \"arrowclosed\";\n})(MarkerType || (MarkerType = {}));\n\n/**\n * While [`PanelPosition`](/api-reference/types/panel-position) can be used to place a\n * component in the corners of a container, the `Position` enum is less precise and used\n * primarily in relation to edges and handles.\n *\n * @public\n */\nvar Position;\n(function (Position) {\n Position[\"Left\"] = \"left\";\n Position[\"Top\"] = \"top\";\n Position[\"Right\"] = \"right\";\n Position[\"Bottom\"] = \"bottom\";\n})(Position || (Position = {}));\nconst oppositePosition = {\n [Position.Left]: Position.Right,\n [Position.Right]: Position.Left,\n [Position.Top]: Position.Bottom,\n [Position.Bottom]: Position.Top,\n};\n\n/**\n * @internal\n */\nfunction areConnectionMapsEqual(a, b) {\n if (!a && !b) {\n return true;\n }\n if (!a || !b || a.size !== b.size) {\n return false;\n }\n if (!a.size && !b.size) {\n return true;\n }\n for (const key of a.keys()) {\n if (!b.has(key)) {\n return false;\n }\n }\n return true;\n}\n/**\n * We call the callback for all connections in a that are not in b\n *\n * @internal\n */\nfunction handleConnectionChange(a, b, cb) {\n if (!cb) {\n return;\n }\n const diff = [];\n a.forEach((connection, key) => {\n if (!b?.has(key)) {\n diff.push(connection);\n }\n });\n if (diff.length) {\n cb(diff);\n }\n}\nfunction getConnectionStatus(isValid) {\n return isValid === null ? null : isValid ? 'valid' : 'invalid';\n}\n\n/* eslint-disable @typescript-eslint/no-explicit-any */\n/**\n * Test whether an object is usable as an Edge\n * @public\n * @remarks In TypeScript this is a type guard that will narrow the type of whatever you pass in to Edge if it returns true\n * @param element - The element to test\n * @returns A boolean indicating whether the element is an Edge\n */\nconst isEdgeBase = (element) => 'id' in element && 'source' in element && 'target' in element;\n/**\n * Test whether an object is usable as a Node\n * @public\n * @remarks In TypeScript this is a type guard that will narrow the type of whatever you pass in to Node if it returns true\n * @param element - The element to test\n * @returns A boolean indicating whether the element is an Node\n */\nconst isNodeBase = (element) => 'id' in element && 'position' in element && !('source' in element) && !('target' in element);\nconst isInternalNodeBase = (element) => 'id' in element && 'internals' in element && !('source' in element) && !('target' in element);\n/**\n * This util is used to tell you what nodes, if any, are connected to the given node\n * as the _target_ of an edge.\n * @public\n * @param node - The node to get the connected nodes from.\n * @param nodes - The array of all nodes.\n * @param edges - The array of all edges.\n * @returns An array of nodes that are connected over edges where the source is the given node.\n *\n * @example\n * ```ts\n *import { getOutgoers } from '@xyflow/react';\n *\n *const nodes = [];\n *const edges = [];\n *\n *const outgoers = getOutgoers(\n * { id: '1', position: { x: 0, y: 0 }, data: { label: 'node' } },\n * nodes,\n * edges,\n *);\n *```\n */\nconst getOutgoers = (node, nodes, edges) => {\n if (!node.id) {\n return [];\n }\n const outgoerIds = new Set();\n edges.forEach((edge) => {\n if (edge.source === node.id) {\n outgoerIds.add(edge.target);\n }\n });\n return nodes.filter((n) => outgoerIds.has(n.id));\n};\n/**\n * This util is used to tell you what nodes, if any, are connected to the given node\n * as the _source_ of an edge.\n * @public\n * @param node - The node to get the connected nodes from.\n * @param nodes - The array of all nodes.\n * @param edges - The array of all edges.\n * @returns An array of nodes that are connected over edges where the target is the given node.\n *\n * @example\n * ```ts\n *import { getIncomers } from '@xyflow/react';\n *\n *const nodes = [];\n *const edges = [];\n *\n *const incomers = getIncomers(\n * { id: '1', position: { x: 0, y: 0 }, data: { label: 'node' } },\n * nodes,\n * edges,\n *);\n *```\n */\nconst getIncomers = (node, nodes, edges) => {\n if (!node.id) {\n return [];\n }\n const incomersIds = new Set();\n edges.forEach((edge) => {\n if (edge.target === node.id) {\n incomersIds.add(edge.source);\n }\n });\n return nodes.filter((n) => incomersIds.has(n.id));\n};\nconst getNodePositionWithOrigin = (node, nodeOrigin = [0, 0]) => {\n const { width, height } = getNodeDimensions(node);\n const origin = node.origin ?? nodeOrigin;\n const offsetX = width * origin[0];\n const offsetY = height * origin[1];\n return {\n x: node.position.x - offsetX,\n y: node.position.y - offsetY,\n };\n};\n/**\n * Returns the bounding box that contains all the given nodes in an array. This can\n * be useful when combined with [`getViewportForBounds`](/api-reference/utils/get-viewport-for-bounds)\n * to calculate the correct transform to fit the given nodes in a viewport.\n * @public\n * @remarks Useful when combined with {@link getViewportForBounds} to calculate the correct transform to fit the given nodes in a viewport.\n * @param nodes - Nodes to calculate the bounds for.\n * @returns Bounding box enclosing all nodes.\n *\n * @remarks This function was previously called `getRectOfNodes`\n *\n * @example\n * ```js\n *import { getNodesBounds } from '@xyflow/react';\n *\n *const nodes = [\n * {\n * id: 'a',\n * position: { x: 0, y: 0 },\n * data: { label: 'a' },\n * width: 50,\n * height: 25,\n * },\n * {\n * id: 'b',\n * position: { x: 100, y: 100 },\n * data: { label: 'b' },\n * width: 50,\n * height: 25,\n * },\n *];\n *\n *const bounds = getNodesBounds(nodes);\n *```\n */\nconst getNodesBounds = (nodes, params = { nodeOrigin: [0, 0] }) => {\n if (process.env.NODE_ENV === 'development' && !params.nodeLookup) {\n 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.');\n }\n if (nodes.length === 0) {\n return { x: 0, y: 0, width: 0, height: 0 };\n }\n const box = nodes.reduce((currBox, nodeOrId) => {\n const isId = typeof nodeOrId === 'string';\n let currentNode = !params.nodeLookup && !isId ? nodeOrId : undefined;\n if (params.nodeLookup) {\n currentNode = isId\n ? params.nodeLookup.get(nodeOrId)\n : !isInternalNodeBase(nodeOrId)\n ? params.nodeLookup.get(nodeOrId.id)\n : nodeOrId;\n }\n const nodeBox = currentNode ? nodeToBox(currentNode, params.nodeOrigin) : { x: 0, y: 0, x2: 0, y2: 0 };\n return getBoundsOfBoxes(currBox, nodeBox);\n }, { x: Infinity, y: Infinity, x2: -Infinity, y2: -Infinity });\n return boxToRect(box);\n};\n/**\n * Determines a bounding box that contains all given nodes in an array\n * @internal\n */\nconst getInternalNodesBounds = (nodeLookup, params = {}) => {\n let box = { x: Infinity, y: Infinity, x2: -Infinity, y2: -Infinity };\n let hasVisibleNodes = false;\n nodeLookup.forEach((node) => {\n if (params.filter === undefined || params.filter(node)) {\n box = getBoundsOfBoxes(box, nodeToBox(node));\n hasVisibleNodes = true;\n }\n });\n return hasVisibleNodes ? boxToRect(box) : { x: 0, y: 0, width: 0, height: 0 };\n};\nconst getNodesInside = (nodes, rect, [tx, ty, tScale] = [0, 0, 1], partially = false, \n// set excludeNonSelectableNodes if you want to pay attention to the nodes \"selectable\" attribute\nexcludeNonSelectableNodes = false) => {\n const paneRect = {\n ...pointToRendererPoint(rect, [tx, ty, tScale]),\n width: rect.width / tScale,\n height: rect.height / tScale,\n };\n const visibleNodes = [];\n for (const node of nodes.values()) {\n const { measured, selectable = true, hidden = false } = node;\n if ((excludeNonSelectableNodes && !selectable) || hidden) {\n continue;\n }\n const width = measured.width ?? node.width ?? node.initialWidth ?? null;\n const height = measured.height ?? node.height ?? node.initialHeight ?? null;\n const overlappingArea = getOverlappingArea(paneRect, nodeToRect(node));\n const area = (width ?? 0) * (height ?? 0);\n const partiallyVisible = partially && overlappingArea > 0;\n const forceInitialRender = !node.internals.handleBounds;\n const isVisible = forceInitialRender || partiallyVisible || overlappingArea >= area;\n if (isVisible || node.dragging) {\n visibleNodes.push(node);\n }\n }\n return visibleNodes;\n};\n/**\n * This utility filters an array of edges, keeping only those where either the source or target\n * node is present in the given array of nodes.\n * @public\n * @param nodes - Nodes you want to get the connected edges for.\n * @param edges - All edges.\n * @returns Array of edges that connect any of the given nodes with each other.\n *\n * @example\n * ```js\n *import { getConnectedEdges } from '@xyflow/react';\n *\n *const nodes = [\n * { id: 'a', position: { x: 0, y: 0 } },\n * { id: 'b', position: { x: 100, y: 0 } },\n *];\n *\n *const edges = [\n * { id: 'a->c', source: 'a', target: 'c' },\n * { id: 'c->d', source: 'c', target: 'd' },\n *];\n *\n *const connectedEdges = getConnectedEdges(nodes, edges);\n * // => [{ id: 'a->c', source: 'a', target: 'c' }]\n *```\n */\nconst getConnectedEdges = (nodes, edges) => {\n const nodeIds = new Set();\n nodes.forEach((node) => {\n nodeIds.add(node.id);\n });\n return edges.filter((edge) => nodeIds.has(edge.source) || nodeIds.has(edge.target));\n};\nfunction getFitViewNodes(nodeLookup, options) {\n const fitViewNodes = new Map();\n const optionNodeIds = options?.nodes ? new Set(options.nodes.map((node) => node.id)) : null;\n nodeLookup.forEach((n) => {\n const isVisible = n.measured.width && n.measured.height && (options?.includeHiddenNodes || !n.hidden);\n if (isVisible && (!optionNodeIds || optionNodeIds.has(n.id))) {\n fitViewNodes.set(n.id, n);\n }\n });\n return fitViewNodes;\n}\nasync function fitViewport({ nodes, width, height, panZoom, minZoom, maxZoom }, options) {\n if (nodes.size === 0) {\n return true;\n }\n const nodesToFit = getFitViewNodes(nodes, options);\n const bounds = getInternalNodesBounds(nodesToFit);\n const viewport = getViewportForBounds(bounds, width, height, options?.minZoom ?? minZoom, options?.maxZoom ?? maxZoom, options?.padding ?? 0.1);\n await panZoom.setViewport(viewport, {\n duration: options?.duration,\n ease: options?.ease,\n interpolate: options?.interpolate,\n });\n return true;\n}\n/**\n * This function calculates the next position of a node, taking into account the node's extent, parent node, and origin.\n *\n * @internal\n * @returns position, positionAbsolute\n */\nfunction calculateNodePosition({ nodeId, nextPosition, nodeLookup, nodeOrigin = [0, 0], nodeExtent, onError, }) {\n const node = nodeLookup.get(nodeId);\n const parentNode = node.parentId ? nodeLookup.get(node.parentId) : undefined;\n const { x: parentX, y: parentY } = parentNode ? parentNode.internals.positionAbsolute : { x: 0, y: 0 };\n const origin = node.origin ?? nodeOrigin;\n let extent = node.extent || nodeExtent;\n if (node.extent === 'parent' && !node.expandParent) {\n if (!parentNode) {\n onError?.('005', errorMessages['error005']());\n }\n else {\n const parentWidth = parentNode.measured.width;\n const parentHeight = parentNode.measured.height;\n if (parentWidth && parentHeight) {\n extent = [\n [parentX, parentY],\n [parentX + parentWidth, parentY + parentHeight],\n ];\n }\n }\n }\n else if (parentNode && isCoordinateExtent(node.extent)) {\n extent = [\n [node.extent[0][0] + parentX, node.extent[0][1] + parentY],\n [node.extent[1][0] + parentX, node.extent[1][1] + parentY],\n ];\n }\n const positionAbsolute = isCoordinateExtent(extent)\n ? clampPosition(nextPosition, extent, node.measured)\n : nextPosition;\n if (node.measured.width === undefined || node.measured.height === undefined) {\n onError?.('015', errorMessages['error015']());\n }\n return {\n position: {\n x: positionAbsolute.x - parentX + (node.measured.width ?? 0) * origin[0],\n y: positionAbsolute.y - parentY + (node.measured.height ?? 0) * origin[1],\n },\n positionAbsolute,\n };\n}\n/**\n * Pass in nodes & edges to delete, get arrays of nodes and edges that actually can be deleted\n * @internal\n * @param param.nodesToRemove - The nodes to remove\n * @param param.edgesToRemove - The edges to remove\n * @param param.nodes - All nodes\n * @param param.edges - All edges\n * @param param.onBeforeDelete - Callback to check which nodes and edges can be deleted\n * @returns nodes: nodes that can be deleted, edges: edges that can be deleted\n */\nasync function getElementsToRemove({ nodesToRemove = [], edgesToRemove = [], nodes, edges, onBeforeDelete, }) {\n const nodeIds = new Set(nodesToRemove.map((node) => node.id));\n const matchingNodes = [];\n for (const node of nodes) {\n if (node.deletable === false) {\n continue;\n }\n const isIncluded = nodeIds.has(node.id);\n const parentHit = !isIncluded && node.parentId && matchingNodes.find((n) => n.id === node.parentId);\n if (isIncluded || parentHit) {\n matchingNodes.push(node);\n }\n }\n const edgeIds = new Set(edgesToRemove.map((edge) => edge.id));\n const deletableEdges = edges.filter((edge) => edge.deletable !== false);\n const connectedEdges = getConnectedEdges(matchingNodes, deletableEdges);\n const matchingEdges = connectedEdges;\n for (const edge of deletableEdges) {\n const isIncluded = edgeIds.has(edge.id);\n if (isIncluded && !matchingEdges.find((e) => e.id === edge.id)) {\n matchingEdges.push(edge);\n }\n }\n if (!onBeforeDelete) {\n return {\n edges: matchingEdges,\n nodes: matchingNodes,\n };\n }\n const onBeforeDeleteResult = await onBeforeDelete({\n nodes: matchingNodes,\n edges: matchingEdges,\n });\n if (typeof onBeforeDeleteResult === 'boolean') {\n return onBeforeDeleteResult ? { edges: matchingEdges, nodes: matchingNodes } : { edges: [], nodes: [] };\n }\n return onBeforeDeleteResult;\n}\n\nconst clamp = (val, min = 0, max = 1) => Math.min(Math.max(val, min), max);\nconst clampPosition = (position = { x: 0, y: 0 }, extent, dimensions) => ({\n x: clamp(position.x, extent[0][0], extent[1][0] - (dimensions?.width ?? 0)),\n y: clamp(position.y, extent[0][1], extent[1][1] - (dimensions?.height ?? 0)),\n});\nfunction clampPositionToParent(childPosition, childDimensions, parent) {\n const { width: parentWidth, height: parentHeight } = getNodeDimensions(parent);\n const { x: parentX, y: parentY } = parent.internals.positionAbsolute;\n return clampPosition(childPosition, [\n [parentX, parentY],\n [parentX + parentWidth, parentY + parentHeight],\n ], childDimensions);\n}\n/**\n * Calculates the velocity of panning when the mouse is close to the edge of the canvas\n * @internal\n * @param value - One dimensional poition of the mouse (x or y)\n * @param min - Minimal position on canvas before panning starts\n * @param max - Maximal position on canvas before panning starts\n * @returns - A number between 0 and 1 that represents the velocity of panning\n */\nconst calcAutoPanVelocity = (value, min, max) => {\n if (value < min) {\n return clamp(Math.abs(value - min), 1, min) / min;\n }\n else if (value > max) {\n return -clamp(Math.abs(value - max), 1, min) / min;\n }\n return 0;\n};\nconst calcAutoPan = (pos, bounds, speed = 15, distance = 40) => {\n const xMovement = calcAutoPanVelocity(pos.x, distance, bounds.width - distance) * speed;\n const yMovement = calcAutoPanVelocity(pos.y, distance, bounds.height - distance) * speed;\n return [xMovement, yMovement];\n};\nconst getBoundsOfBoxes = (box1, box2) => ({\n x: Math.min(box1.x, box2.x),\n y: Math.min(box1.y, box2.y),\n x2: Math.max(box1.x2, box2.x2),\n y2: Math.max(box1.y2, box2.y2),\n});\nconst rectToBox = ({ x, y, width, height }) => ({\n x,\n y,\n x2: x + width,\n y2: y + height,\n});\nconst boxToRect = ({ x, y, x2, y2 }) => ({\n x,\n y,\n width: x2 - x,\n height: y2 - y,\n});\nconst nodeToRect = (node, nodeOrigin = [0, 0]) => {\n const { x, y } = isInternalNodeBase(node)\n ? node.internals.positionAbsolute\n : getNodePositionWithOrigin(node, nodeOrigin);\n return {\n x,\n y,\n width: node.measured?.width ?? node.width ?? node.initialWidth ?? 0,\n height: node.measured?.height ?? node.height ?? node.initialHeight ?? 0,\n };\n};\nconst nodeToBox = (node, nodeOrigin = [0, 0]) => {\n const { x, y } = isInternalNodeBase(node)\n ? node.internals.positionAbsolute\n : getNodePositionWithOrigin(node, nodeOrigin);\n return {\n x,\n y,\n x2: x + (node.measured?.width ?? node.width ?? node.initialWidth ?? 0),\n y2: y + (node.measured?.height ?? node.height ?? node.initialHeight ?? 0),\n };\n};\nconst getBoundsOfRects = (rect1, rect2) => boxToRect(getBoundsOfBoxes(rectToBox(rect1), rectToBox(rect2)));\nconst getOverlappingArea = (rectA, rectB) => {\n const xOverlap = Math.max(0, Math.min(rectA.x + rectA.width, rectB.x + rectB.width) - Math.max(rectA.x, rectB.x));\n const yOverlap = Math.max(0, Math.min(rectA.y + rectA.height, rectB.y + rectB.height) - Math.max(rectA.y, rectB.y));\n return Math.ceil(xOverlap * yOverlap);\n};\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nconst isRectObject = (obj) => isNumeric(obj.width) && isNumeric(obj.height) && isNumeric(obj.x) && isNumeric(obj.y);\n/* eslint-disable-next-line @typescript-eslint/no-explicit-any */\nconst isNumeric = (n) => !isNaN(n) && isFinite(n);\nconst createDevWarn = (lib, helpUrl) => (id, message) => {\n if (process.env.NODE_ENV === 'development') {\n console.warn(`[${lib}]: ${message} Help: ${helpUrl}error#${id}`);\n }\n};\nconst snapPosition = (position, snapGrid = [1, 1]) => {\n return {\n x: snapGrid[0] * Math.round(position.x / snapGrid[0]),\n y: snapGrid[1] * Math.round(position.y / snapGrid[1]),\n };\n};\nconst pointToRendererPoint = ({ x, y }, [tx, ty, tScale], snapToGrid = false, snapGrid = [1, 1]) => {\n const position = {\n x: (x - tx) / tScale,\n y: (y - ty) / tScale,\n };\n return snapToGrid ? snapPosition(position, snapGrid) : position;\n};\nconst rendererPointToPoint = ({ x, y }, [tx, ty, tScale]) => {\n return {\n x: x * tScale + tx,\n y: y * tScale + ty,\n };\n};\n/**\n * Parses a single padding value to a number\n * @internal\n * @param padding - Padding to parse\n * @param viewport - Width or height of the viewport\n * @returns The padding in pixels\n */\nfunction parsePadding(padding, viewport) {\n if (typeof padding === 'number') {\n return Math.floor((viewport - viewport / (1 + padding)) * 0.5);\n }\n if (typeof padding === 'string' && padding.endsWith('px')) {\n const paddingValue = parseFloat(padding);\n if (!Number.isNaN(paddingValue)) {\n return Math.floor(paddingValue);\n }\n }\n if (typeof padding === 'string' && padding.endsWith('%')) {\n const paddingValue = parseFloat(padding);\n if (!Number.isNaN(paddingValue)) {\n return Math.floor(viewport * paddingValue * 0.01);\n }\n }\n console.error(`The padding value \"${padding}\" is invalid. Please provide a number or a string with a valid unit (px or %).`);\n return 0;\n}\n/**\n * Parses the paddings to an object with top, right, bottom, left, x and y paddings\n * @internal\n * @param padding - Padding to parse\n * @param width - Width of the viewport\n * @param height - Height of the viewport\n * @returns An object with the paddings in pixels\n */\nfunction parsePaddings(padding, width, height) {\n if (typeof padding === 'string' || typeof padding === 'number') {\n const paddingY = parsePadding(padding, height);\n const paddingX = parsePadding(padding, width);\n return {\n top: paddingY,\n right: paddingX,\n bottom: paddingY,\n left: paddingX,\n x: paddingX * 2,\n y: paddingY * 2,\n };\n }\n if (typeof padding === 'object') {\n const top = parsePadding(padding.top ?? padding.y ?? 0, height);\n const bottom = parsePadding(padding.bottom ?? padding.y ?? 0, height);\n const left = parsePadding(padding.left ?? padding.x ?? 0, width);\n const right = parsePadding(padding.right ?? padding.x ?? 0, width);\n return { top, right, bottom, left, x: left + right, y: top + bottom };\n }\n return { top: 0, right: 0, bottom: 0, left: 0, x: 0, y: 0 };\n}\n/**\n * Calculates the resulting paddings if the new viewport is applied\n * @internal\n * @param bounds - Bounds to fit inside viewport\n * @param x - X position of the viewport\n * @param y - Y position of the viewport\n * @param zoom - Zoom level of the viewport\n * @param width - Width of the viewport\n * @param height - Height of the viewport\n * @returns An object with the minimum padding required to fit the bounds inside the viewport\n */\nfunction calculateAppliedPaddings(bounds, x, y, zoom, width, height) {\n const { x: left, y: top } = rendererPointToPoint(bounds, [x, y, zoom]);\n const { x: boundRight, y: boundBottom } = rendererPointToPoint({ x: bounds.x + bounds.width, y: bounds.y + bounds.height }, [x, y, zoom]);\n const right = width - boundRight;\n const bottom = height - boundBottom;\n return {\n left: Math.floor(left),\n top: Math.floor(top),\n right: Math.floor(right),\n bottom: Math.floor(bottom),\n };\n}\n/**\n * Returns a viewport that encloses the given bounds with padding.\n * @public\n * @remarks You can determine bounds of nodes with {@link getNodesBounds} and {@link getBoundsOfRects}\n * @param bounds - Bounds to fit inside viewport.\n * @param width - Width of the viewport.\n * @param height - Height of the viewport.\n * @param minZoom - Minimum zoom level of the resulting viewport.\n * @param maxZoom - Maximum zoom level of the resulting viewport.\n * @param padding - Padding around the bounds.\n * @returns A transformed {@link Viewport} that encloses the given bounds which you can pass to e.g. {@link setViewport}.\n * @example\n * const { x, y, zoom } = getViewportForBounds(\n * { x: 0, y: 0, width: 100, height: 100},\n * 1200, 800, 0.5, 2);\n */\nconst getViewportForBounds = (bounds, width, height, minZoom, maxZoom, padding) => {\n // First we resolve all the paddings to actual pixel values\n const p = parsePaddings(padding, width, height);\n const xZoom = (width - p.x) / bounds.width;\n const yZoom = (height - p.y) / bounds.height;\n // We calculate the new x, y, zoom for a centered view\n const zoom = Math.min(xZoom, yZoom);\n const clampedZoom = clamp(zoom, minZoom, maxZoom);\n const boundsCenterX = bounds.x + bounds.width / 2;\n const boundsCenterY = bounds.y + bounds.height / 2;\n const x = width / 2 - boundsCenterX * clampedZoom;\n const y = height / 2 - boundsCenterY * clampedZoom;\n // Then we calculate the minimum padding, to respect asymmetric paddings\n const newPadding = calculateAppliedPaddings(bounds, x, y, clampedZoom, width, height);\n // We only want to have an offset if the newPadding is smaller than the required padding\n const offset = {\n left: Math.min(newPadding.left - p.left, 0),\n top: Math.min(newPadding.top - p.top, 0),\n right: Math.min(newPadding.right - p.right, 0),\n bottom: Math.min(newPadding.bottom - p.bottom, 0),\n };\n return {\n x: x - offset.left + offset.right,\n y: y - offset.top + offset.bottom,\n zoom: clampedZoom,\n };\n};\nconst isMacOs = () => typeof navigator !== 'undefined' && navigator?.userAgent?.indexOf('Mac') >= 0;\nfunction isCoordinateExtent(extent) {\n return extent !== undefined && extent !== null && extent !== 'parent';\n}\nfunction getNodeDimensions(node) {\n return {\n width: node.measured?.width ?? node.width ?? node.initialWidth ?? 0,\n height: node.measured?.height ?? node.height ?? node.initialHeight ?? 0,\n };\n}\nfunction nodeHasDimensions(node) {\n return ((node.measured?.width ?? node.width ?? node.initialWidth) !== undefined &&\n (node.measured?.height ?? node.height ?? node.initialHeight) !== undefined);\n}\n/**\n * Convert child position to absolute position\n *\n * @internal\n * @param position\n * @param parentId\n * @param nodeLookup\n * @param nodeOrigin\n * @returns an internal node with an absolute position\n */\nfunction evaluateAbsolutePosition(position, dimensions = { width: 0, height: 0 }, parentId, nodeLookup, nodeOrigin) {\n const positionAbsolute = { ...position };\n const parent = nodeLookup.get(parentId);\n if (parent) {\n const origin = parent.origin || nodeOrigin;\n positionAbsolute.x += parent.internals.positionAbsolute.x - (dimensions.width ?? 0) * origin[0];\n positionAbsolute.y += parent.internals.positionAbsolute.y - (dimensions.height ?? 0) * origin[1];\n }\n return positionAbsolute;\n}\nfunction areSetsEqual(a, b) {\n if (a.size !== b.size) {\n return false;\n }\n for (const item of a) {\n if (!b.has(item)) {\n return false;\n }\n }\n return true;\n}\n/**\n * Polyfill for Promise.withResolvers until we can use it in all browsers\n * @internal\n */\nfunction withResolvers() {\n let resolve;\n let reject;\n const promise = new Promise((res, rej) => {\n resolve = res;\n reject = rej;\n });\n return { promise, resolve, reject };\n}\nfunction mergeAriaLabelConfig(partial) {\n return { ...defaultAriaLabelConfig, ...(partial || {}) };\n}\n\nfunction getPointerPosition(event, { snapGrid = [0, 0], snapToGrid = false, transform, containerBounds }) {\n const { x, y } = getEventPosition(event);\n const pointerPos = pointToRendererPoint({ x: x - (containerBounds?.left ?? 0), y: y - (containerBounds?.top ?? 0) }, transform);\n const { x: xSnapped, y: ySnapped } = snapToGrid ? snapPosition(pointerPos, snapGrid) : pointerPos;\n // we need the snapped position in order to be able to skip unnecessary drag events\n return {\n xSnapped,\n ySnapped,\n ...pointerPos,\n };\n}\nconst getDimensions = (node) => ({\n width: node.offsetWidth,\n height: node.offsetHeight,\n});\nconst getHostForElement = (element) => element?.getRootNode?.() || window?.document;\nconst inputTags = ['INPUT', 'SELECT', 'TEXTAREA'];\nfunction isInputDOMNode(event) {\n // using composed path for handling shadow dom\n const target = (event.composedPath?.()?.[0] || event.target);\n if (target?.nodeType !== 1 /* Node.ELEMENT_NODE */)\n return false;\n const isInput = inputTags.includes(target.nodeName) || target.hasAttribute('contenteditable');\n // when an input field is focused we don't want to trigger deletion or movement of nodes\n return isInput || !!target.closest('.nokey');\n}\nconst isMouseEvent = (event) => 'clientX' in event;\nconst getEventPosition = (event, bounds) => {\n const isMouse = isMouseEvent(event);\n const evtX = isMouse ? event.clientX : event.touches?.[0].clientX;\n const evtY = isMouse ? event.clientY : event.touches?.[0].clientY;\n return {\n x: evtX - (bounds?.left ?? 0),\n y: evtY - (bounds?.top ?? 0),\n };\n};\n/*\n * The handle bounds are calculated relative to the node element.\n * We store them in the internals object of the node in order to avoid\n * unnecessary recalculations.\n */\nconst getHandleBounds = (type, nodeElement, nodeBounds, zoom, nodeId) => {\n const handles = nodeElement.querySelectorAll(`.${type}`);\n if (!handles || !handles.length) {\n return null;\n }\n return Array.from(handles).map((handle) => {\n const handleBounds = handle.getBoundingClientRect();\n return {\n id: handle.getAttribute('data-handleid'),\n type,\n nodeId,\n position: handle.getAttribute('data-handlepos'),\n x: (handleBounds.left - nodeBounds.left) / zoom,\n y: (handleBounds.top - nodeBounds.top) / zoom,\n ...getDimensions(handle),\n };\n });\n};\n\nfunction getBezierEdgeCenter({ sourceX, sourceY, targetX, targetY, sourceControlX, sourceControlY, targetControlX, targetControlY, }) {\n /*\n * cubic bezier t=0.5 mid point, not the actual mid point, but easy to calculate\n * https://stackoverflow.com/questions/67516101/how-to-find-distance-mid-point-of-bezier-curve\n */\n const centerX = sourceX * 0.125 + sourceControlX * 0.375 + targetControlX * 0.375 + targetX * 0.125;\n const centerY = sourceY * 0.125 + sourceControlY * 0.375 + targetControlY * 0.375 + targetY * 0.125;\n const offsetX = Math.abs(centerX - sourceX);\n const offsetY = Math.abs(centerY - sourceY);\n return [centerX, centerY, offsetX, offsetY];\n}\nfunction calculateControlOffset(distance, curvature) {\n if (distance >= 0) {\n return 0.5 * distance;\n }\n return curvature * 25 * Math.sqrt(-distance);\n}\nfunction getControlWithCurvature({ pos, x1, y1, x2, y2, c }) {\n switch (pos) {\n case Position.Left:\n return [x1 - calculateControlOffset(x1 - x2, c), y1];\n case Position.Right:\n return [x1 + calculateControlOffset(x2 - x1, c), y1];\n case Position.Top:\n return [x1, y1 - calculateControlOffset(y1 - y2, c)];\n case Position.Bottom:\n return [x1, y1 + calculateControlOffset(y2 - y1, c)];\n }\n}\n/**\n * The `getBezierPath` util returns everything you need to render a bezier edge\n *between two nodes.\n * @public\n * @returns A path string you can use in an SVG, the `labelX` and `labelY` position (center of path)\n * and `offsetX`, `offsetY` between source handle and label.\n * - `path`: the path to use in an SVG `` element.\n * - `labelX`: the `x` position you can use to render a label for this edge.\n * - `labelY`: the `y` position you can use to render a label for this edge.\n * - `offsetX`: the absolute difference between the source `x` position and the `x` position of the\n * middle of this path.\n * - `offsetY`: the absolute difference between the source `y` position and the `y` position of the\n * middle of this path.\n * @example\n * ```js\n * const source = { x: 0, y: 20 };\n * const target = { x: 150, y: 100 };\n *\n * const [path, labelX, labelY, offsetX, offsetY] = getBezierPath({\n * sourceX: source.x,\n * sourceY: source.y,\n * sourcePosition: Position.Right,\n * targetX: target.x,\n * targetY: target.y,\n * targetPosition: Position.Left,\n *});\n *```\n *\n * @remarks This function returns a tuple (aka a fixed-size array) to make it easier to\n *work with multiple edge paths at once.\n */\nfunction getBezierPath({ sourceX, sourceY, sourcePosition = Position.Bottom, targetX, targetY, targetPosition = Position.Top, curvature = 0.25, }) {\n const [sourceControlX, sourceControlY] = getControlWithCurvature({\n pos: sourcePosition,\n x1: sourceX,\n y1: sourceY,\n x2: targetX,\n y2: targetY,\n c: curvature,\n });\n const [targetControlX, targetControlY] = getControlWithCurvature({\n pos: targetPosition,\n x1: targetX,\n y1: targetY,\n x2: sourceX,\n y2: sourceY,\n c: curvature,\n });\n const [labelX, labelY, offsetX, offsetY] = getBezierEdgeCenter({\n sourceX,\n sourceY,\n targetX,\n targetY,\n sourceControlX,\n sourceControlY,\n targetControlX,\n targetControlY,\n });\n return [\n `M${sourceX},${sourceY} C${sourceControlX},${sourceControlY} ${targetControlX},${targetControlY} ${targetX},${targetY}`,\n labelX,\n labelY,\n offsetX,\n offsetY,\n ];\n}\n\n// this is used for straight edges and simple smoothstep edges (LTR, RTL, BTT, TTB)\nfunction getEdgeCenter({ sourceX, sourceY, targetX, targetY, }) {\n const xOffset = Math.abs(targetX - sourceX) / 2;\n const centerX = targetX < sourceX ? targetX + xOffset : targetX - xOffset;\n const yOffset = Math.abs(targetY - sourceY) / 2;\n const centerY = targetY < sourceY ? targetY + yOffset : targetY - yOffset;\n return [centerX, centerY, xOffset, yOffset];\n}\n/**\n * Returns the z-index for an edge based on the node it connects and whether it is selected.\n * By default, edges are rendered below nodes. This behaviour is different for edges that are\n * connected to nodes with a parent, as they are rendered above the parent node.\n */\nfunction getElevatedEdgeZIndex({ sourceNode, targetNode, selected = false, zIndex = 0, elevateOnSelect = false, zIndexMode = 'basic', }) {\n if (zIndexMode === 'manual') {\n return zIndex;\n }\n const edgeZ = elevateOnSelect && selected ? zIndex + 1000 : zIndex;\n const nodeZ = Math.max(sourceNode.parentId || (elevateOnSelect && sourceNode.selected) ? sourceNode.internals.z : 0, targetNode.parentId || (elevateOnSelect && targetNode.selected) ? targetNode.internals.z : 0);\n return edgeZ + nodeZ;\n}\nfunction isEdgeVisible({ sourceNode, targetNode, width, height, transform }) {\n const edgeBox = getBoundsOfBoxes(nodeToBox(sourceNode), nodeToBox(targetNode));\n if (edgeBox.x === edgeBox.x2) {\n edgeBox.x2 += 1;\n }\n if (edgeBox.y === edgeBox.y2) {\n edgeBox.y2 += 1;\n }\n const viewRect = {\n x: -transform[0] / transform[2],\n y: -transform[1] / transform[2],\n width: width / transform[2],\n height: height / transform[2],\n };\n return getOverlappingArea(viewRect, boxToRect(edgeBox)) > 0;\n}\n/**\n * The default edge ID generator function. Generates an ID based on the source, target, and handles.\n * @public\n * @param params - The connection or edge to generate an ID for.\n * @returns The generated edge ID.\n */\nconst getEdgeId = ({ source, sourceHandle, target, targetHandle }) => `xy-edge__${source}${sourceHandle || ''}-${target}${targetHandle || ''}`;\nconst connectionExists = (edge, edges) => {\n return edges.some((el) => el.source === edge.source &&\n el.target === edge.target &&\n (el.sourceHandle === edge.sourceHandle || (!el.sourceHandle && !edge.sourceHandle)) &&\n (el.targetHandle === edge.targetHandle || (!el.targetHandle && !edge.targetHandle)));\n};\n/**\n * 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.\n * @public\n * @param edgeParams - Either an `Edge` or a `Connection` you want to add.\n * @param edges - The array of all current edges.\n * @param options - Optional configuration object.\n * @returns A new array of edges with the new edge added.\n *\n * @remarks If an edge with the same `target` and `source` already exists (and the same\n *`targetHandle` and `sourceHandle` if those are set), then this util won't add\n *a new edge even if the `id` property is different.\n *\n */\nconst addEdge = (edgeParams, edges, options = {}) => {\n if (!edgeParams.source || !edgeParams.target) {\n options.onError?.('006', errorMessages['error006']());\n return edges;\n }\n const edgeIdGenerator = options.getEdgeId || getEdgeId;\n let edge;\n if (isEdgeBase(edgeParams)) {\n edge = { ...edgeParams };\n }\n else {\n edge = {\n ...edgeParams,\n id: edgeIdGenerator(edgeParams),\n };\n }\n if (connectionExists(edge, edges)) {\n return edges;\n }\n if (edge.sourceHandle === null) {\n delete edge.sourceHandle;\n }\n if (edge.targetHandle === null) {\n delete edge.targetHandle;\n }\n return edges.concat(edge);\n};\n/**\n * A handy utility to update an existing [`Edge`](/api-reference/types/edge) with new properties.\n *This searches your edge array for an edge with a matching `id` and updates its\n *properties with the connection you provide.\n * @public\n * @param oldEdge - The edge you want to update.\n * @param newConnection - The new connection you want to update the edge with.\n * @param edges - The array of all current edges.\n * @returns The updated edges array.\n *\n * @example\n * ```js\n *const onReconnect = useCallback(\n * (oldEdge: Edge, newConnection: Connection) => setEdges((els) => reconnectEdge(oldEdge, newConnection, els)),[]);\n *```\n */\nconst reconnectEdge = (oldEdge, newConnection, edges, options = { shouldReplaceId: true }) => {\n const { id: oldEdgeId, ...rest } = oldEdge;\n if (!newConnection.source || !newConnection.target) {\n options.onError?.('006', errorMessages['error006']());\n return edges;\n }\n const foundEdge = edges.find((e) => e.id === oldEdge.id);\n if (!foundEdge) {\n options.onError?.('007', errorMessages['error007'](oldEdgeId));\n return edges;\n }\n const edgeIdGenerator = options.getEdgeId || getEdgeId;\n // Remove old edge and create the new edge with parameters of old edge.\n const edge = {\n ...rest,\n id: options.shouldReplaceId ? edgeIdGenerator(newConnection) : oldEdgeId,\n source: newConnection.source,\n target: newConnection.target,\n sourceHandle: newConnection.sourceHandle,\n targetHandle: newConnection.targetHandle,\n };\n return edges.filter((e) => e.id !== oldEdgeId).concat(edge);\n};\n\n/**\n * Calculates the straight line path between two points.\n * @public\n * @returns A path string you can use in an SVG, the `labelX` and `labelY` position (center of path)\n * and `offsetX`, `offsetY` between source handle and label.\n *\n * - `path`: the path to use in an SVG `` element.\n * - `labelX`: the `x` position you can use to render a label for this edge.\n * - `labelY`: the `y` position you can use to render a label for this edge.\n * - `offsetX`: the absolute difference between the source `x` position and the `x` position of the\n * middle of this path.\n * - `offsetY`: the absolute difference between the source `y` position and the `y` position of the\n * middle of this path.\n * @example\n * ```js\n * const source = { x: 0, y: 20 };\n * const target = { x: 150, y: 100 };\n *\n * const [path, labelX, labelY, offsetX, offsetY] = getStraightPath({\n * sourceX: source.x,\n * sourceY: source.y,\n * sourcePosition: Position.Right,\n * targetX: target.x,\n * targetY: target.y,\n * targetPosition: Position.Left,\n * });\n * ```\n * @remarks This function returns a tuple (aka a fixed-size array) to make it easier to work with multiple edge paths at once.\n */\nfunction getStraightPath({ sourceX, sourceY, targetX, targetY, }) {\n const [labelX, labelY, offsetX, offsetY] = getEdgeCenter({\n sourceX,\n sourceY,\n targetX,\n targetY,\n });\n return [`M ${sourceX},${sourceY}L ${targetX},${targetY}`, labelX, labelY, offsetX, offsetY];\n}\n\nconst handleDirections = {\n [Position.Left]: { x: -1, y: 0 },\n [Position.Right]: { x: 1, y: 0 },\n [Position.Top]: { x: 0, y: -1 },\n [Position.Bottom]: { x: 0, y: 1 },\n};\nconst getDirection = ({ source, sourcePosition = Position.Bottom, target, }) => {\n if (sourcePosition === Position.Left || sourcePosition === Position.Right) {\n return source.x < target.x ? { x: 1, y: 0 } : { x: -1, y: 0 };\n }\n return source.y < target.y ? { x: 0, y: 1 } : { x: 0, y: -1 };\n};\nconst distance = (a, b) => Math.sqrt(Math.pow(b.x - a.x, 2) + Math.pow(b.y - a.y, 2));\n/*\n * With this function we try to mimic an orthogonal edge routing behaviour\n * 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\n */\nfunction getPoints({ source, sourcePosition = Position.Bottom, target, targetPosition = Position.Top, center, offset, stepPosition, }) {\n const sourceDir = handleDirections[sourcePosition];\n const targetDir = handleDirections[targetPosition];\n const sourceGapped = { x: source.x + sourceDir.x * offset, y: source.y + sourceDir.y * offset };\n const targetGapped = { x: target.x + targetDir.x * offset, y: target.y + targetDir.y * offset };\n const dir = getDirection({\n source: sourceGapped,\n sourcePosition,\n target: targetGapped,\n });\n const dirAccessor = dir.x !== 0 ? 'x' : 'y';\n const currDir = dir[dirAccessor];\n let points = [];\n let centerX, centerY;\n const sourceGapOffset = { x: 0, y: 0 };\n const targetGapOffset = { x: 0, y: 0 };\n const [, , defaultOffsetX, defaultOffsetY] = getEdgeCenter({\n sourceX: source.x,\n sourceY: source.y,\n targetX: target.x,\n targetY: target.y,\n });\n // opposite handle positions, default case\n if (sourceDir[dirAccessor] * targetDir[dirAccessor] === -1) {\n if (dirAccessor === 'x') {\n // Primary direction is horizontal, so stepPosition affects X coordinate\n centerX = center.x ?? sourceGapped.x + (targetGapped.x - sourceGapped.x) * stepPosition;\n centerY = center.y ?? (sourceGapped.y + targetGapped.y) / 2;\n }\n else {\n // Primary direction is vertical, so stepPosition affects Y coordinate\n centerX = center.x ?? (sourceGapped.x + targetGapped.x) / 2;\n centerY = center.y ?? sourceGapped.y + (targetGapped.y - sourceGapped.y) * stepPosition;\n }\n /*\n * --->\n * |\n * >---\n */\n const verticalSplit = [\n { x: centerX, y: sourceGapped.y },\n { x: centerX, y: targetGapped.y },\n ];\n /*\n * |\n * ---\n * |\n */\n const horizontalSplit = [\n { x: sourceGapped.x, y: centerY },\n { x: targetGapped.x, y: centerY },\n ];\n if (sourceDir[dirAccessor] === currDir) {\n points = dirAccessor === 'x' ? verticalSplit : horizontalSplit;\n }\n else {\n points = dirAccessor === 'x' ? horizontalSplit : verticalSplit;\n }\n }\n else {\n // sourceTarget means we take x from source and y from target, targetSource is the opposite\n const sourceTarget = [{ x: sourceGapped.x, y: targetGapped.y }];\n const targetSource = [{ x: targetGapped.x, y: sourceGapped.y }];\n // this handles edges with same handle positions\n if (dirAccessor === 'x') {\n points = sourceDir.x === currDir ? targetSource : sourceTarget;\n }\n else {\n points = sourceDir.y === currDir ? sourceTarget : targetSource;\n }\n if (sourcePosition === targetPosition) {\n const diff = Math.abs(source[dirAccessor] - target[dirAccessor]);\n // 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\n if (diff <= offset) {\n const gapOffset = Math.min(offset - 1, offset - diff);\n if (sourceDir[dirAccessor] === currDir) {\n sourceGapOffset[dirAccessor] = (sourceGapped[dirAccessor] > source[dirAccessor] ? -1 : 1) * gapOffset;\n }\n else {\n targetGapOffset[dirAccessor] = (targetGapped[dirAccessor] > target[dirAccessor] ? -1 : 1) * gapOffset;\n }\n }\n }\n // these are conditions for handling mixed handle positions like Right -> Bottom for example\n if (sourcePosition !== targetPosition) {\n const dirAccessorOpposite = dirAccessor === 'x' ? 'y' : 'x';\n const isSameDir = sourceDir[dirAccessor] === targetDir[dirAccessorOpposite];\n const sourceGtTargetOppo = sourceGapped[dirAccessorOpposite] > targetGapped[dirAccessorOpposite];\n const sourceLtTargetOppo = sourceGapped[dirAccessorOpposite] < targetGapped[dirAccessorOpposite];\n const flipSourceTarget = (sourceDir[dirAccessor] === 1 && ((!isSameDir && sourceGtTargetOppo) || (isSameDir && sourceLtTargetOppo))) ||\n (sourceDir[dirAccessor] !== 1 && ((!isSameDir && sourceLtTargetOppo) || (isSameDir && sourceGtTargetOppo)));\n if (flipSourceTarget) {\n points = dirAccessor === 'x' ? sourceTarget : targetSource;\n }\n }\n const sourceGapPoint = { x: sourceGapped.x + sourceGapOffset.x, y: sourceGapped.y + sourceGapOffset.y };\n const targetGapPoint = { x: targetGapped.x + targetGapOffset.x, y: targetGapped.y + targetGapOffset.y };\n const maxXDistance = Math.max(Math.abs(sourceGapPoint.x - points[0].x), Math.abs(targetGapPoint.x - points[0].x));\n const maxYDistance = Math.max(Math.abs(sourceGapPoint.y - points[0].y), Math.abs(targetGapPoint.y - points[0].y));\n // we want to place the label on the longest segment of the edge\n if (maxXDistance >= maxYDistance) {\n centerX = (sourceGapPoint.x + targetGapPoint.x) / 2;\n centerY = points[0].y;\n }\n else {\n centerX = points[0].x;\n centerY = (sourceGapPoint.y + targetGapPoint.y) / 2;\n }\n }\n const gappedSource = { x: sourceGapped.x + sourceGapOffset.x, y: sourceGapped.y + sourceGapOffset.y };\n const gappedTarget = { x: targetGapped.x + targetGapOffset.x, y: targetGapped.y + targetGapOffset.y };\n const pathPoints = [\n source,\n // 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\n ...(gappedSource.x !== points[0].x || gappedSource.y !== points[0].y ? [gappedSource] : []),\n ...points,\n ...(gappedTarget.x !== points[points.length - 1].x || gappedTarget.y !== points[points.length - 1].y\n ? [gappedTarget]\n : []),\n target,\n ];\n return [pathPoints, centerX, centerY, defaultOffsetX, defaultOffsetY];\n}\nfunction getBend(a, b, c, size) {\n const bendSize = Math.min(distance(a, b) / 2, distance(b, c) / 2, size);\n const { x, y } = b;\n // no bend\n if ((a.x === x && x === c.x) || (a.y === y && y === c.y)) {\n return `L${x} ${y}`;\n }\n // first segment is horizontal\n if (a.y === y) {\n const xDir = a.x < c.x ? -1 : 1;\n const yDir = a.y < c.y ? 1 : -1;\n return `L ${x + bendSize * xDir},${y}Q ${x},${y} ${x},${y + bendSize * yDir}`;\n }\n const xDir = a.x < c.x ? 1 : -1;\n const yDir = a.y < c.y ? -1 : 1;\n return `L ${x},${y + bendSize * yDir}Q ${x},${y} ${x + bendSize * xDir},${y}`;\n}\n/**\n * The `getSmoothStepPath` util returns everything you need to render a stepped path\n * between two nodes. The `borderRadius` property can be used to choose how rounded\n * the corners of those steps are.\n * @public\n * @returns A path string you can use in an SVG, the `labelX` and `labelY` position (center of path)\n * and `offsetX`, `offsetY` between source handle and label.\n *\n * - `path`: the path to use in an SVG `` element.\n * - `labelX`: the `x` position you can use to render a label for this edge.\n * - `labelY`: the `y` position you can use to render a label for this edge.\n * - `offsetX`: the absolute difference between the source `x` position and the `x` position of the\n * middle of this path.\n * - `offsetY`: the absolute difference between the source `y` position and the `y` position of the\n * middle of this path.\n * @example\n * ```js\n * const source = { x: 0, y: 20 };\n * const target = { x: 150, y: 100 };\n *\n * const [path, labelX, labelY, offsetX, offsetY] = getSmoothStepPath({\n * sourceX: source.x,\n * sourceY: source.y,\n * sourcePosition: Position.Right,\n * targetX: target.x,\n * targetY: target.y,\n * targetPosition: Position.Left,\n * });\n * ```\n * @remarks This function returns a tuple (aka a fixed-size array) to make it easier to work with multiple edge paths at once.\n */\nfunction getSmoothStepPath({ sourceX, sourceY, sourcePosition = Position.Bottom, targetX, targetY, targetPosition = Position.Top, borderRadius = 5, centerX, centerY, offset = 20, stepPosition = 0.5, }) {\n const [points, labelX, labelY, offsetX, offsetY] = getPoints({\n source: { x: sourceX, y: sourceY },\n sourcePosition,\n target: { x: targetX, y: targetY },\n targetPosition,\n center: { x: centerX, y: centerY },\n offset,\n stepPosition,\n });\n let path = `M${points[0].x} ${points[0].y}`;\n for (let i = 1; i < points.length - 1; i++) {\n path += getBend(points[i - 1], points[i], points[i + 1], borderRadius);\n }\n path += `L${points[points.length - 1].x} ${points[points.length - 1].y}`;\n return [path, labelX, labelY, offsetX, offsetY];\n}\n\nfunction isNodeInitialized(node) {\n return (node &&\n !!(node.internals.handleBounds || node.handles?.length) &&\n !!(node.measured.width || node.width || node.initialWidth));\n}\nfunction getEdgePosition(params) {\n const { sourceNode, targetNode } = params;\n if (!isNodeInitialized(sourceNode) || !isNodeInitialized(targetNode)) {\n return null;\n }\n const sourceHandleBounds = sourceNode.internals.handleBounds || toHandleBounds(sourceNode.handles);\n const targetHandleBounds = targetNode.internals.handleBounds || toHandleBounds(targetNode.handles);\n const sourceHandle = getHandle$1(sourceHandleBounds?.source ?? [], params.sourceHandle);\n const targetHandle = getHandle$1(\n // when connection type is loose we can define all handles as sources and connect source -> source\n params.connectionMode === ConnectionMode.Strict\n ? targetHandleBounds?.target ?? []\n : (targetHandleBounds?.target ?? []).concat(targetHandleBounds?.source ?? []), params.targetHandle);\n if (!sourceHandle || !targetHandle) {\n params.onError?.('008', errorMessages['error008'](!sourceHandle ? 'source' : 'target', {\n id: params.id,\n sourceHandle: params.sourceHandle,\n targetHandle: params.targetHandle,\n }));\n return null;\n }\n const sourcePosition = sourceHandle?.position || Position.Bottom;\n const targetPosition = targetHandle?.position || Position.Top;\n const source = getHandlePosition(sourceNode, sourceHandle, sourcePosition);\n const target = getHandlePosition(targetNode, targetHandle, targetPosition);\n return {\n sourceX: source.x,\n sourceY: source.y,\n targetX: target.x,\n targetY: target.y,\n sourcePosition,\n targetPosition,\n };\n}\nfunction toHandleBounds(handles) {\n if (!handles) {\n return null;\n }\n const source = [];\n const target = [];\n for (const handle of handles) {\n handle.width = handle.width ?? 1;\n handle.height = handle.height ?? 1;\n if (handle.type === 'source') {\n source.push(handle);\n }\n else if (handle.type === 'target') {\n target.push(handle);\n }\n }\n return {\n source,\n target,\n };\n}\nfunction getHandlePosition(node, handle, fallbackPosition = Position.Left, center = false) {\n const x = (handle?.x ?? 0) + node.internals.positionAbsolute.x;\n const y = (handle?.y ?? 0) + node.internals.positionAbsolute.y;\n const { width, height } = handle ?? getNodeDimensions(node);\n if (center) {\n return { x: x + width / 2, y: y + height / 2 };\n }\n const position = handle?.position ?? fallbackPosition;\n switch (position) {\n case Position.Top:\n return { x: x + width / 2, y };\n case Position.Right:\n return { x: x + width, y: y + height / 2 };\n case Position.Bottom:\n return { x: x + width / 2, y: y + height };\n case Position.Left:\n return { x, y: y + height / 2 };\n }\n}\nfunction getHandle$1(bounds, handleId) {\n if (!bounds) {\n return null;\n }\n // if no handleId is given, we use the first handle, otherwise we check for the id\n return (!handleId ? bounds[0] : bounds.find((d) => d.id === handleId)) || null;\n}\n\nfunction getMarkerId(marker, id) {\n if (!marker) {\n return '';\n }\n if (typeof marker === 'string') {\n return marker;\n }\n const idPrefix = id ? `${id}__` : '';\n return `${idPrefix}${Object.keys(marker)\n .sort()\n .map((key) => `${key}=${marker[key]}`)\n .join('&')}`;\n}\nfunction createMarkerIds(edges, { id, defaultColor, defaultMarkerStart, defaultMarkerEnd, }) {\n const ids = new Set();\n return edges\n .reduce((markers, edge) => {\n [edge.markerStart || defaultMarkerStart, edge.markerEnd || defaultMarkerEnd].forEach((marker) => {\n if (marker && typeof marker === 'object') {\n const markerId = getMarkerId(marker, id);\n if (!ids.has(markerId)) {\n markers.push({ id: markerId, color: marker.color || defaultColor, ...marker });\n ids.add(markerId);\n }\n }\n });\n return markers;\n }, [])\n .sort((a, b) => a.id.localeCompare(b.id));\n}\n\nfunction getNodeToolbarTransform(nodeRect, viewport, position, offset, align) {\n let alignmentOffset = 0.5;\n if (align === 'start') {\n alignmentOffset = 0;\n }\n else if (align === 'end') {\n alignmentOffset = 1;\n }\n /*\n * position === Position.Top\n * we set the x any y position of the toolbar based on the nodes position\n */\n let pos = [\n (nodeRect.x + nodeRect.width * alignmentOffset) * viewport.zoom + viewport.x,\n nodeRect.y * viewport.zoom + viewport.y - offset,\n ];\n // and than shift it based on the alignment. The shift values are in %.\n let shift = [-100 * alignmentOffset, -100];\n switch (position) {\n case Position.Right:\n pos = [\n (nodeRect.x + nodeRect.width) * viewport.zoom + viewport.x + offset,\n (nodeRect.y + nodeRect.height * alignmentOffset) * viewport.zoom + viewport.y,\n ];\n shift = [0, -100 * alignmentOffset];\n break;\n case Position.Bottom:\n pos[1] = (nodeRect.y + nodeRect.height) * viewport.zoom + viewport.y + offset;\n shift[1] = 0;\n break;\n case Position.Left:\n pos = [\n nodeRect.x * viewport.zoom + viewport.x - offset,\n (nodeRect.y + nodeRect.height * alignmentOffset) * viewport.zoom + viewport.y,\n ];\n shift = [-100, -100 * alignmentOffset];\n break;\n }\n return `translate(${pos[0]}px, ${pos[1]}px) translate(${shift[0]}%, ${shift[1]}%)`;\n}\n\nconst alignXToPercent = {\n left: 0,\n center: 50,\n right: 100,\n};\nconst alignYToPercent = {\n top: 0,\n center: 50,\n bottom: 100,\n};\nfunction getEdgeToolbarTransform(x, y, zoom, alignX = 'center', alignY = 'center') {\n return `translate(${x}px, ${y}px) scale(${1 / zoom}) translate(${-(alignXToPercent[alignX] ?? 50)}%, ${-(alignYToPercent[alignY] ?? 50)}%)`;\n}\n\nconst SELECTED_NODE_Z = 1000;\nconst ROOT_PARENT_Z_INCREMENT = 10;\nconst defaultOptions = {\n nodeOrigin: [0, 0],\n nodeExtent: infiniteExtent,\n elevateNodesOnSelect: true,\n zIndexMode: 'basic',\n defaults: {},\n};\nconst adoptUserNodesDefaultOptions = {\n ...defaultOptions,\n checkEquality: true,\n};\nfunction mergeObjects(base, incoming) {\n const result = { ...base };\n for (const key in incoming) {\n if (incoming[key] !== undefined) {\n // typecast is safe here, because we check for undefined\n result[key] = incoming[key];\n }\n }\n return result;\n}\nfunction updateAbsolutePositions(nodeLookup, parentLookup, options) {\n const _options = mergeObjects(defaultOptions, options);\n for (const node of nodeLookup.values()) {\n if (node.parentId) {\n updateChildNode(node, nodeLookup, parentLookup, _options);\n }\n else {\n const positionWithOrigin = getNodePositionWithOrigin(node, _options.nodeOrigin);\n const extent = isCoordinateExtent(node.extent) ? node.extent : _options.nodeExtent;\n const clampedPosition = clampPosition(positionWithOrigin, extent, getNodeDimensions(node));\n node.internals.positionAbsolute = clampedPosition;\n }\n }\n}\nfunction parseHandles(userNode, internalNode) {\n if (!userNode.handles) {\n return !userNode.measured ? undefined : internalNode?.internals.handleBounds;\n }\n const source = [];\n const target = [];\n for (const handle of userNode.handles) {\n const handleBounds = {\n id: handle.id,\n width: handle.width ?? 1,\n height: handle.height ?? 1,\n nodeId: userNode.id,\n x: handle.x,\n y: handle.y,\n position: handle.position,\n type: handle.type,\n };\n if (handle.type === 'source') {\n source.push(handleBounds);\n }\n else if (handle.type === 'target') {\n target.push(handleBounds);\n }\n }\n return {\n source,\n target,\n };\n}\nfunction isManualZIndexMode(zIndexMode) {\n return zIndexMode === 'manual';\n}\nfunction adoptUserNodes(nodes, nodeLookup, parentLookup, options = {}) {\n const _options = mergeObjects(adoptUserNodesDefaultOptions, options);\n const rootParentIndex = { i: 0 };\n const tmpLookup = new Map(nodeLookup);\n const selectedNodeZ = _options?.elevateNodesOnSelect && !isManualZIndexMode(_options.zIndexMode) ? SELECTED_NODE_Z : 0;\n let nodesInitialized = nodes.length > 0;\n let hasSelectedNodes = false;\n nodeLookup.clear();\n parentLookup.clear();\n for (const userNode of nodes) {\n let internalNode = tmpLookup.get(userNode.id);\n if (_options.checkEquality && userNode === internalNode?.internals.userNode) {\n nodeLookup.set(userNode.id, internalNode);\n }\n else {\n const positionWithOrigin = getNodePositionWithOrigin(userNode, _options.nodeOrigin);\n const extent = isCoordinateExtent(userNode.extent) ? userNode.extent : _options.nodeExtent;\n const clampedPosition = clampPosition(positionWithOrigin, extent, getNodeDimensions(userNode));\n internalNode = {\n ..._options.defaults,\n ...userNode,\n measured: {\n width: userNode.measured?.width,\n height: userNode.measured?.height,\n },\n internals: {\n positionAbsolute: clampedPosition,\n // if user re-initializes the node or removes `measured` for whatever reason, we reset the handleBounds so that the node gets re-measured\n handleBounds: parseHandles(userNode, internalNode),\n z: calculateZ(userNode, selectedNodeZ, _options.zIndexMode),\n userNode,\n },\n };\n nodeLookup.set(userNode.id, internalNode);\n }\n if ((internalNode.measured === undefined ||\n internalNode.measured.width === undefined ||\n internalNode.measured.height === undefined) &&\n !internalNode.hidden) {\n nodesInitialized = false;\n }\n if (userNode.parentId) {\n updateChildNode(internalNode, nodeLookup, parentLookup, options, rootParentIndex);\n }\n hasSelectedNodes ||= userNode.selected ?? false;\n }\n return { nodesInitialized, hasSelectedNodes };\n}\nfunction updateParentLookup(node, parentLookup) {\n if (!node.parentId) {\n return;\n }\n const childNodes = parentLookup.get(node.parentId);\n if (childNodes) {\n childNodes.set(node.id, node);\n }\n else {\n parentLookup.set(node.parentId, new Map([[node.id, node]]));\n }\n}\n/**\n * Updates positionAbsolute and zIndex of a child node and the parentLookup.\n */\nfunction updateChildNode(node, nodeLookup, parentLookup, options, rootParentIndex) {\n const { elevateNodesOnSelect, nodeOrigin, nodeExtent, zIndexMode } = mergeObjects(defaultOptions, options);\n const parentId = node.parentId;\n const parentNode = nodeLookup.get(parentId);\n if (!parentNode) {\n console.warn(`Parent node ${parentId} not found. Please make sure that parent nodes are in front of their child nodes in the nodes array.`);\n return;\n }\n updateParentLookup(node, parentLookup);\n // We just want to set the rootParentIndex for the first child\n if (rootParentIndex &&\n !parentNode.parentId &&\n parentNode.internals.rootParentIndex === undefined &&\n zIndexMode === 'auto') {\n parentNode.internals.rootParentIndex = ++rootParentIndex.i;\n parentNode.internals.z = parentNode.internals.z + rootParentIndex.i * ROOT_PARENT_Z_INCREMENT;\n }\n // But we need to update rootParentIndex.i also when parent has not been updated\n if (rootParentIndex && parentNode.internals.rootParentIndex !== undefined) {\n rootParentIndex.i = parentNode.internals.rootParentIndex;\n }\n const selectedNodeZ = elevateNodesOnSelect && !isManualZIndexMode(zIndexMode) ? SELECTED_NODE_Z : 0;\n const { x, y, z } = calculateChildXYZ(node, parentNode, nodeOrigin, nodeExtent, selectedNodeZ, zIndexMode);\n const { positionAbsolute } = node.internals;\n const positionChanged = x !== positionAbsolute.x || y !== positionAbsolute.y;\n if (positionChanged || z !== node.internals.z) {\n // we create a new object to mark the node as updated\n nodeLookup.set(node.id, {\n ...node,\n internals: {\n ...node.internals,\n positionAbsolute: positionChanged ? { x, y } : positionAbsolute,\n z,\n },\n });\n }\n}\nfunction calculateZ(node, selectedNodeZ, zIndexMode) {\n const zIndex = isNumeric(node.zIndex) ? node.zIndex : 0;\n if (isManualZIndexMode(zIndexMode)) {\n return zIndex;\n }\n return zIndex + (node.selected ? selectedNodeZ : 0);\n}\nfunction calculateChildXYZ(childNode, parentNode, nodeOrigin, nodeExtent, selectedNodeZ, zIndexMode) {\n const { x: parentX, y: parentY } = parentNode.internals.positionAbsolute;\n const childDimensions = getNodeDimensions(childNode);\n const positionWithOrigin = getNodePositionWithOrigin(childNode, nodeOrigin);\n const clampedPosition = isCoordinateExtent(childNode.extent)\n ? clampPosition(positionWithOrigin, childNode.extent, childDimensions)\n : positionWithOrigin;\n let absolutePosition = clampPosition({ x: parentX + clampedPosition.x, y: parentY + clampedPosition.y }, nodeExtent, childDimensions);\n if (childNode.extent === 'parent') {\n absolutePosition = clampPositionToParent(absolutePosition, childDimensions, parentNode);\n }\n const childZ = calculateZ(childNode, selectedNodeZ, zIndexMode);\n const parentZ = parentNode.internals.z ?? 0;\n return {\n x: absolutePosition.x,\n y: absolutePosition.y,\n z: parentZ >= childZ ? parentZ + 1 : childZ,\n };\n}\nfunction handleExpandParent(children, nodeLookup, parentLookup, nodeOrigin = [0, 0]) {\n const changes = [];\n const parentExpansions = new Map();\n // determine the expanded rectangle the child nodes would take for each parent\n for (const child of children) {\n const parent = nodeLookup.get(child.parentId);\n if (!parent) {\n continue;\n }\n const parentRect = parentExpansions.get(child.parentId)?.expandedRect ?? nodeToRect(parent);\n const expandedRect = getBoundsOfRects(parentRect, child.rect);\n parentExpansions.set(child.parentId, { expandedRect, parent });\n }\n if (parentExpansions.size > 0) {\n parentExpansions.forEach(({ expandedRect, parent }, parentId) => {\n // determine the position & dimensions of the parent\n const positionAbsolute = parent.internals.positionAbsolute;\n const dimensions = getNodeDimensions(parent);\n const origin = parent.origin ?? nodeOrigin;\n // determine how much the parent expands in width and position\n const xChange = expandedRect.x < positionAbsolute.x ? Math.round(Math.abs(positionAbsolute.x - expandedRect.x)) : 0;\n const yChange = expandedRect.y < positionAbsolute.y ? Math.round(Math.abs(positionAbsolute.y - expandedRect.y)) : 0;\n const newWidth = Math.max(dimensions.width, Math.round(expandedRect.width));\n const newHeight = Math.max(dimensions.height, Math.round(expandedRect.height));\n const widthChange = (newWidth - dimensions.width) * origin[0];\n const heightChange = (newHeight - dimensions.height) * origin[1];\n // We need to correct the position of the parent node if the origin is not [0,0]\n if (xChange > 0 || yChange > 0 || widthChange || heightChange) {\n changes.push({\n id: parentId,\n type: 'position',\n position: {\n x: parent.position.x - xChange + widthChange,\n y: parent.position.y - yChange + heightChange,\n },\n });\n /*\n * We move all child nodes in the oppsite direction\n * so the x,y changes of the parent do not move the children\n */\n parentLookup.get(parentId)?.forEach((childNode) => {\n if (!children.some((child) => child.id === childNode.id)) {\n changes.push({\n id: childNode.id,\n type: 'position',\n position: {\n x: childNode.position.x + xChange,\n y: childNode.position.y + yChange,\n },\n });\n }\n });\n }\n // We need to correct the dimensions of the parent node if the origin is not [0,0]\n if (dimensions.width < expandedRect.width || dimensions.height < expandedRect.height || xChange || yChange) {\n changes.push({\n id: parentId,\n type: 'dimensions',\n setAttributes: true,\n dimensions: {\n width: newWidth + (xChange ? origin[0] * xChange - widthChange : 0),\n height: newHeight + (yChange ? origin[1] * yChange - heightChange : 0),\n },\n });\n }\n });\n }\n return changes;\n}\nfunction updateNodeInternals(updates, nodeLookup, parentLookup, domNode, nodeOrigin, nodeExtent, zIndexMode) {\n const viewportNode = domNode?.querySelector('.xyflow__viewport');\n let updatedInternals = false;\n if (!viewportNode) {\n return { changes: [], updatedInternals };\n }\n const changes = [];\n const style = window.getComputedStyle(viewportNode);\n const { m22: zoom } = new window.DOMMatrixReadOnly(style.transform);\n // in this array we collect nodes, that might trigger changes (like expanding parent)\n const parentExpandChildren = [];\n for (const update of updates.values()) {\n const node = nodeLookup.get(update.id);\n if (!node) {\n continue;\n }\n if (node.hidden) {\n nodeLookup.set(node.id, {\n ...node,\n internals: {\n ...node.internals,\n handleBounds: undefined,\n },\n });\n updatedInternals = true;\n continue;\n }\n const dimensions = getDimensions(update.nodeElement);\n const dimensionChanged = node.measured.width !== dimensions.width || node.measured.height !== dimensions.height;\n const doUpdate = !!(dimensions.width &&\n dimensions.height &&\n (dimensionChanged || !node.internals.handleBounds || update.force));\n if (doUpdate) {\n const nodeBounds = update.nodeElement.getBoundingClientRect();\n const extent = isCoordinateExtent(node.extent) ? node.extent : nodeExtent;\n let { positionAbsolute } = node.internals;\n if (node.parentId && node.extent === 'parent') {\n positionAbsolute = clampPositionToParent(positionAbsolute, dimensions, nodeLookup.get(node.parentId));\n }\n else if (extent) {\n positionAbsolute = clampPosition(positionAbsolute, extent, dimensions);\n }\n const newNode = {\n ...node,\n measured: dimensions,\n internals: {\n ...node.internals,\n positionAbsolute,\n handleBounds: {\n source: getHandleBounds('source', update.nodeElement, nodeBounds, zoom, node.id),\n target: getHandleBounds('target', update.nodeElement, nodeBounds, zoom, node.id),\n },\n },\n };\n nodeLookup.set(node.id, newNode);\n if (node.parentId) {\n updateChildNode(newNode, nodeLookup, parentLookup, { nodeOrigin, zIndexMode });\n }\n updatedInternals = true;\n if (dimensionChanged) {\n changes.push({\n id: node.id,\n type: 'dimensions',\n dimensions,\n });\n if (node.expandParent && node.parentId) {\n parentExpandChildren.push({\n id: node.id,\n parentId: node.parentId,\n rect: nodeToRect(newNode, nodeOrigin),\n });\n }\n }\n }\n }\n if (parentExpandChildren.length > 0) {\n const parentExpandChanges = handleExpandParent(parentExpandChildren, nodeLookup, parentLookup, nodeOrigin);\n changes.push(...parentExpandChanges);\n }\n return { changes, updatedInternals };\n}\nasync function panBy({ delta, panZoom, transform, translateExtent, width, height, }) {\n if (!panZoom || (!delta.x && !delta.y)) {\n return false;\n }\n const nextViewport = await panZoom.setViewportConstrained({\n x: transform[0] + delta.x,\n y: transform[1] + delta.y,\n zoom: transform[2],\n }, [\n [0, 0],\n [width, height],\n ], translateExtent);\n const transformChanged = !!nextViewport &&\n (nextViewport.x !== transform[0] || nextViewport.y !== transform[1] || nextViewport.k !== transform[2]);\n return transformChanged;\n}\n/**\n * this function adds the connection to the connectionLookup\n * at the following keys: nodeId-type-handleId, nodeId-type and nodeId\n * @param type type of the connection\n * @param connection connection that should be added to the lookup\n * @param connectionKey at which key the connection should be added\n * @param connectionLookup reference to the connection lookup\n * @param nodeId nodeId of the connection\n * @param handleId handleId of the connection\n */\nfunction addConnectionToLookup(type, connection, connectionKey, connectionLookup, nodeId, handleId) {\n /*\n * We add the connection to the connectionLookup at the following keys\n * 1. nodeId, 2. nodeId-type, 3. nodeId-type-handleId\n * If the key already exists, we add the connection to the existing map\n */\n let key = nodeId;\n const nodeMap = connectionLookup.get(key) || new Map();\n connectionLookup.set(key, nodeMap.set(connectionKey, connection));\n key = `${nodeId}-${type}`;\n const typeMap = connectionLookup.get(key) || new Map();\n connectionLookup.set(key, typeMap.set(connectionKey, connection));\n if (handleId) {\n key = `${nodeId}-${type}-${handleId}`;\n const handleMap = connectionLookup.get(key) || new Map();\n connectionLookup.set(key, handleMap.set(connectionKey, connection));\n }\n}\nfunction updateConnectionLookup(connectionLookup, edgeLookup, edges) {\n connectionLookup.clear();\n edgeLookup.clear();\n for (const edge of edges) {\n const { source: sourceNode, target: targetNode, sourceHandle = null, targetHandle = null } = edge;\n const connection = { edgeId: edge.id, source: sourceNode, target: targetNode, sourceHandle, targetHandle };\n const sourceKey = `${sourceNode}-${sourceHandle}--${targetNode}-${targetHandle}`;\n const targetKey = `${targetNode}-${targetHandle}--${sourceNode}-${sourceHandle}`;\n addConnectionToLookup('source', connection, targetKey, connectionLookup, sourceNode, sourceHandle);\n addConnectionToLookup('target', connection, sourceKey, connectionLookup, targetNode, targetHandle);\n edgeLookup.set(edge.id, edge);\n }\n}\n\nfunction shallowNodeData(a, b) {\n if (a === null || b === null) {\n return false;\n }\n const _a = Array.isArray(a) ? a : [a];\n const _b = Array.isArray(b) ? b : [b];\n if (_a.length !== _b.length) {\n return false;\n }\n for (let i = 0; i < _a.length; i++) {\n if (_a[i].id !== _b[i].id || _a[i].type !== _b[i].type || !Object.is(_a[i].data, _b[i].data)) {\n return false;\n }\n }\n return true;\n}\n\nfunction isParentSelected(node, nodeLookup) {\n if (!node.parentId) {\n return false;\n }\n const parentNode = nodeLookup.get(node.parentId);\n if (!parentNode) {\n return false;\n }\n if (parentNode.selected) {\n return true;\n }\n return isParentSelected(parentNode, nodeLookup);\n}\nfunction hasSelector(target, selector, domNode) {\n let current = target;\n do {\n if (current?.matches?.(selector))\n return true;\n if (current === domNode)\n return false;\n current = current?.parentElement;\n } while (current);\n return false;\n}\n// looks for all selected nodes and created a NodeDragItem for each of them\nfunction getDragItems(nodeLookup, nodesDraggable, mousePos, nodeId) {\n const dragItems = new Map();\n for (const [id, node] of nodeLookup) {\n if ((node.selected || node.id === nodeId) &&\n (!node.parentId || !isParentSelected(node, nodeLookup)) &&\n (node.draggable || (nodesDraggable && typeof node.draggable === 'undefined'))) {\n const internalNode = nodeLookup.get(id);\n if (internalNode) {\n dragItems.set(id, {\n id,\n position: internalNode.position || { x: 0, y: 0 },\n distance: {\n x: mousePos.x - internalNode.internals.positionAbsolute.x,\n y: mousePos.y - internalNode.internals.positionAbsolute.y,\n },\n extent: internalNode.extent,\n parentId: internalNode.parentId,\n origin: internalNode.origin,\n expandParent: internalNode.expandParent,\n internals: {\n positionAbsolute: internalNode.internals.positionAbsolute || { x: 0, y: 0 },\n },\n measured: {\n width: internalNode.measured.width ?? 0,\n height: internalNode.measured.height ?? 0,\n },\n });\n }\n }\n }\n return dragItems;\n}\n/*\n * returns two params:\n * 1. the dragged node (or the first of the list, if we are dragging a node selection)\n * 2. array of selected nodes (for multi selections)\n */\nfunction getEventHandlerParams({ nodeId, dragItems, nodeLookup, dragging = true, }) {\n const nodesFromDragItems = [];\n for (const [id, dragItem] of dragItems) {\n const node = nodeLookup.get(id)?.internals.userNode;\n if (node) {\n nodesFromDragItems.push({\n ...node,\n position: dragItem.position,\n dragging,\n });\n }\n }\n if (!nodeId) {\n return [nodesFromDragItems[0], nodesFromDragItems];\n }\n const node = nodeLookup.get(nodeId)?.internals.userNode;\n return [\n !node\n ? nodesFromDragItems[0]\n : {\n ...node,\n position: dragItems.get(nodeId)?.position || node.position,\n dragging,\n },\n nodesFromDragItems,\n ];\n}\n/**\n * If a selection is being dragged we want to apply the same snap offset to all nodes in the selection.\n * This function calculates the snap offset based on the first node in the selection.\n */\nfunction calculateSnapOffset({ dragItems, snapGrid, x, y, }) {\n const refDragItem = dragItems.values().next().value;\n if (!refDragItem) {\n return null;\n }\n const refPos = {\n x: x - refDragItem.distance.x,\n y: y - refDragItem.distance.y,\n };\n const refPosSnapped = snapPosition(refPos, snapGrid);\n return {\n x: refPosSnapped.x - refPos.x,\n y: refPosSnapped.y - refPos.y,\n };\n}\n\nfunction XYDrag({ onNodeMouseDown, getStoreItems, onDragStart, onDrag, onDragStop, }) {\n let lastPos = { x: null, y: null };\n let autoPanId = 0;\n let dragItems = new Map();\n let autoPanStarted = false;\n let mousePosition = { x: 0, y: 0 };\n let containerBounds = null;\n let dragStarted = false;\n let d3Selection = null;\n let abortDrag = false; // prevents unintentional dragging on multitouch\n let nodePositionsChanged = false;\n // we store the last drag event to be able to use it in the update function\n let dragEvent = null;\n // public functions\n function update({ noDragClassName, handleSelector, domNode, isSelectable, nodeId, nodeClickDistance = 0, }) {\n d3Selection = select(domNode);\n function updateNodes({ x, y }) {\n const { nodeLookup, nodeExtent, snapGrid, snapToGrid, nodeOrigin, onNodeDrag, onSelectionDrag, onError, updateNodePositions, } = getStoreItems();\n lastPos = { x, y };\n let hasChange = false;\n const isMultiDrag = dragItems.size > 1;\n const nodesBox = isMultiDrag && nodeExtent ? rectToBox(getInternalNodesBounds(dragItems)) : null;\n const multiDragSnapOffset = isMultiDrag && snapToGrid\n ? calculateSnapOffset({\n dragItems,\n snapGrid,\n x,\n y,\n })\n : null;\n for (const [id, dragItem] of dragItems) {\n /*\n * if the node is not in the nodeLookup anymore, it was probably deleted while dragging\n */\n if (!nodeLookup.has(id)) {\n continue;\n }\n let nextPosition = { x: x - dragItem.distance.x, y: y - dragItem.distance.y };\n if (snapToGrid) {\n nextPosition = multiDragSnapOffset\n ? {\n x: Math.round(nextPosition.x + multiDragSnapOffset.x),\n y: Math.round(nextPosition.y + multiDragSnapOffset.y),\n }\n : snapPosition(nextPosition, snapGrid);\n }\n let adjustedNodeExtent = null;\n if (isMultiDrag && nodeExtent && !dragItem.extent && nodesBox) {\n const { positionAbsolute } = dragItem.internals;\n const x1 = positionAbsolute.x - nodesBox.x + nodeExtent[0][0];\n const x2 = positionAbsolute.x + dragItem.measured.width - nodesBox.x2 + nodeExtent[1][0];\n const y1 = positionAbsolute.y - nodesBox.y + nodeExtent[0][1];\n const y2 = positionAbsolute.y + dragItem.measured.height - nodesBox.y2 + nodeExtent[1][1];\n adjustedNodeExtent = [\n [x1, y1],\n [x2, y2],\n ];\n }\n const { position, positionAbsolute } = calculateNodePosition({\n nodeId: id,\n nextPosition,\n nodeLookup,\n nodeExtent: adjustedNodeExtent ? adjustedNodeExtent : nodeExtent,\n nodeOrigin,\n onError,\n });\n // we want to make sure that we only fire a change event when there is a change\n hasChange = hasChange || dragItem.position.x !== position.x || dragItem.position.y !== position.y;\n dragItem.position = position;\n dragItem.internals.positionAbsolute = positionAbsolute;\n }\n nodePositionsChanged = nodePositionsChanged || hasChange;\n if (!hasChange) {\n return;\n }\n updateNodePositions(dragItems, true);\n if (dragEvent && (onDrag || onNodeDrag || (!nodeId && onSelectionDrag))) {\n const [currentNode, currentNodes] = getEventHandlerParams({\n nodeId,\n dragItems,\n nodeLookup,\n });\n onDrag?.(dragEvent, dragItems, currentNode, currentNodes);\n onNodeDrag?.(dragEvent, currentNode, currentNodes);\n if (!nodeId) {\n onSelectionDrag?.(dragEvent, currentNodes);\n }\n }\n }\n async function autoPan() {\n if (!containerBounds) {\n return;\n }\n const { transform, panBy, autoPanSpeed, autoPanOnNodeDrag } = getStoreItems();\n if (!autoPanOnNodeDrag) {\n autoPanStarted = false;\n cancelAnimationFrame(autoPanId);\n return;\n }\n const [xMovement, yMovement] = calcAutoPan(mousePosition, containerBounds, autoPanSpeed);\n if (xMovement !== 0 || yMovement !== 0) {\n lastPos.x = (lastPos.x ?? 0) - xMovement / transform[2];\n lastPos.y = (lastPos.y ?? 0) - yMovement / transform[2];\n if (await panBy({ x: xMovement, y: yMovement })) {\n updateNodes(lastPos);\n }\n }\n autoPanId = requestAnimationFrame(autoPan);\n }\n function startDrag(event) {\n const { nodeLookup, multiSelectionActive, nodesDraggable, transform, snapGrid, snapToGrid, selectNodesOnDrag, onNodeDragStart, onSelectionDragStart, unselectNodesAndEdges, } = getStoreItems();\n dragStarted = true;\n if ((!selectNodesOnDrag || !isSelectable) && !multiSelectionActive && nodeId) {\n if (!nodeLookup.get(nodeId)?.selected) {\n // we need to reset selected nodes when selectNodesOnDrag=false\n unselectNodesAndEdges();\n }\n }\n if (isSelectable && selectNodesOnDrag && nodeId) {\n onNodeMouseDown?.(nodeId);\n }\n const pointerPos = getPointerPosition(event.sourceEvent, { transform, snapGrid, snapToGrid, containerBounds });\n lastPos = pointerPos;\n dragItems = getDragItems(nodeLookup, nodesDraggable, pointerPos, nodeId);\n if (dragItems.size > 0 && (onDragStart || onNodeDragStart || (!nodeId && onSelectionDragStart))) {\n const [currentNode, currentNodes] = getEventHandlerParams({\n nodeId,\n dragItems,\n nodeLookup,\n });\n onDragStart?.(event.sourceEvent, dragItems, currentNode, currentNodes);\n onNodeDragStart?.(event.sourceEvent, currentNode, currentNodes);\n if (!nodeId) {\n onSelectionDragStart?.(event.sourceEvent, currentNodes);\n }\n }\n }\n const d3DragInstance = drag()\n .clickDistance(nodeClickDistance)\n .on('start', (event) => {\n const { domNode, nodeDragThreshold, transform, snapGrid, snapToGrid } = getStoreItems();\n containerBounds = domNode?.getBoundingClientRect() || null;\n abortDrag = false;\n nodePositionsChanged = false;\n dragEvent = event.sourceEvent;\n if (nodeDragThreshold === 0) {\n startDrag(event);\n }\n const pointerPos = getPointerPosition(event.sourceEvent, { transform, snapGrid, snapToGrid, containerBounds });\n lastPos = pointerPos;\n mousePosition = getEventPosition(event.sourceEvent, containerBounds);\n })\n .on('drag', (event) => {\n const { autoPanOnNodeDrag, transform, snapGrid, snapToGrid, nodeDragThreshold, nodeLookup } = getStoreItems();\n const pointerPos = getPointerPosition(event.sourceEvent, { transform, snapGrid, snapToGrid, containerBounds });\n dragEvent = event.sourceEvent;\n if ((event.sourceEvent.type === 'touchmove' && event.sourceEvent.touches.length > 1) ||\n // if user deletes a node while dragging, we need to abort the drag to prevent errors\n (nodeId && !nodeLookup.has(nodeId))) {\n abortDrag = true;\n }\n if (abortDrag) {\n return;\n }\n if (!autoPanStarted && autoPanOnNodeDrag && dragStarted) {\n autoPanStarted = true;\n autoPan();\n }\n if (!dragStarted) {\n // Calculate distance in client coordinates for consistent drag threshold behavior across zoom levels\n const currentMousePosition = getEventPosition(event.sourceEvent, containerBounds);\n const x = currentMousePosition.x - mousePosition.x;\n const y = currentMousePosition.y - mousePosition.y;\n const distance = Math.sqrt(x * x + y * y);\n if (distance > nodeDragThreshold) {\n startDrag(event);\n }\n }\n // skip events without movement\n if ((lastPos.x !== pointerPos.xSnapped || lastPos.y !== pointerPos.ySnapped) && dragItems && dragStarted) {\n mousePosition = getEventPosition(event.sourceEvent, containerBounds);\n updateNodes(pointerPos);\n }\n })\n .on('end', (event) => {\n if (!dragStarted || abortDrag) {\n if (abortDrag && dragItems.size > 0) {\n getStoreItems().updateNodePositions(dragItems, false);\n }\n return;\n }\n autoPanStarted = false;\n dragStarted = false;\n cancelAnimationFrame(autoPanId);\n if (dragItems.size > 0) {\n const { nodeLookup, updateNodePositions, onNodeDragStop, onSelectionDragStop } = getStoreItems();\n if (nodePositionsChanged) {\n updateNodePositions(dragItems, false);\n nodePositionsChanged = false;\n }\n if (onDragStop || onNodeDragStop || (!nodeId && onSelectionDragStop)) {\n const [currentNode, currentNodes] = getEventHandlerParams({\n nodeId,\n dragItems,\n nodeLookup,\n dragging: false,\n });\n onDragStop?.(event.sourceEvent, dragItems, currentNode, currentNodes);\n onNodeDragStop?.(event.sourceEvent, currentNode, currentNodes);\n if (!nodeId) {\n onSelectionDragStop?.(event.sourceEvent, currentNodes);\n }\n }\n }\n })\n .filter((event) => {\n const target = event.target;\n const isDraggable = !event.button &&\n (!noDragClassName || !hasSelector(target, `.${noDragClassName}`, domNode)) &&\n (!handleSelector || hasSelector(target, handleSelector, domNode));\n return isDraggable;\n });\n d3Selection.call(d3DragInstance);\n }\n function destroy() {\n d3Selection?.on('.drag', null);\n }\n return {\n update,\n destroy,\n };\n}\n\nfunction getNodesWithinDistance(position, nodeLookup, distance) {\n const nodes = [];\n const rect = {\n x: position.x - distance,\n y: position.y - distance,\n width: distance * 2,\n height: distance * 2,\n };\n for (const node of nodeLookup.values()) {\n if (getOverlappingArea(rect, nodeToRect(node)) > 0) {\n nodes.push(node);\n }\n }\n return nodes;\n}\n/*\n * this distance is used for the area around the user pointer\n * while doing a connection for finding the closest nodes\n */\nconst ADDITIONAL_DISTANCE = 250;\nfunction getClosestHandle(position, connectionRadius, nodeLookup, fromHandle) {\n let closestHandles = [];\n let minDistance = Infinity;\n const closeNodes = getNodesWithinDistance(position, nodeLookup, connectionRadius + ADDITIONAL_DISTANCE);\n for (const node of closeNodes) {\n const allHandles = [...(node.internals.handleBounds?.source ?? []), ...(node.internals.handleBounds?.target ?? [])];\n for (const handle of allHandles) {\n // if the handle is the same as the fromHandle we skip it\n if (fromHandle.nodeId === handle.nodeId && fromHandle.type === handle.type && fromHandle.id === handle.id) {\n continue;\n }\n // determine absolute position of the handle\n const { x, y } = getHandlePosition(node, handle, handle.position, true);\n const distance = Math.sqrt(Math.pow(x - position.x, 2) + Math.pow(y - position.y, 2));\n if (distance > connectionRadius) {\n continue;\n }\n if (distance < minDistance) {\n closestHandles = [{ ...handle, x, y }];\n minDistance = distance;\n }\n else if (distance === minDistance) {\n // when multiple handles are on the same distance we collect all of them\n closestHandles.push({ ...handle, x, y });\n }\n }\n }\n if (!closestHandles.length) {\n return null;\n }\n // when multiple handles overlay each other we prefer the opposite handle\n if (closestHandles.length > 1) {\n const oppositeHandleType = fromHandle.type === 'source' ? 'target' : 'source';\n return closestHandles.find((handle) => handle.type === oppositeHandleType) ?? closestHandles[0];\n }\n return closestHandles[0];\n}\nfunction getHandle(nodeId, handleType, handleId, nodeLookup, connectionMode, withAbsolutePosition = false) {\n const node = nodeLookup.get(nodeId);\n if (!node) {\n return null;\n }\n const handles = connectionMode === 'strict'\n ? node.internals.handleBounds?.[handleType]\n : [...(node.internals.handleBounds?.source ?? []), ...(node.internals.handleBounds?.target ?? [])];\n const handle = (handleId ? handles?.find((h) => h.id === handleId) : handles?.[0]) ?? null;\n return handle && withAbsolutePosition\n ? { ...handle, ...getHandlePosition(node, handle, handle.position, true) }\n : handle;\n}\nfunction getHandleType(edgeUpdaterType, handleDomNode) {\n if (edgeUpdaterType) {\n return edgeUpdaterType;\n }\n else if (handleDomNode?.classList.contains('target')) {\n return 'target';\n }\n else if (handleDomNode?.classList.contains('source')) {\n return 'source';\n }\n return null;\n}\nfunction isConnectionValid(isInsideConnectionRadius, isHandleValid) {\n let isValid = null;\n if (isHandleValid) {\n isValid = true;\n }\n else if (isInsideConnectionRadius && !isHandleValid) {\n isValid = false;\n }\n return isValid;\n}\n\nconst alwaysValid = () => true;\nfunction onPointerDown(event, { connectionMode, connectionRadius, handleId, nodeId, edgeUpdaterType, isTarget, domNode, nodeLookup, lib, autoPanOnConnect, flowId, panBy, cancelConnection, onConnectStart, onConnect, onConnectEnd, isValidConnection = alwaysValid, onReconnectEnd, updateConnection, getTransform, getFromHandle, autoPanSpeed, dragThreshold = 1, handleDomNode, }) {\n // when xyflow is used inside a shadow root we can't use document\n const doc = getHostForElement(event.target);\n let autoPanId = 0;\n let closestHandle;\n const { x, y } = getEventPosition(event);\n const handleType = getHandleType(edgeUpdaterType, handleDomNode);\n const containerBounds = domNode?.getBoundingClientRect();\n let connectionStarted = false;\n if (!containerBounds || !handleType) {\n return;\n }\n const fromHandleInternal = getHandle(nodeId, handleType, handleId, nodeLookup, connectionMode);\n if (!fromHandleInternal) {\n return;\n }\n let position = getEventPosition(event, containerBounds);\n let autoPanStarted = false;\n let connection = null;\n let isValid = false;\n let resultHandleDomNode = null;\n // when the user is moving the mouse close to the edge of the canvas while connecting we move the canvas\n function autoPan() {\n if (!autoPanOnConnect || !containerBounds) {\n return;\n }\n const [x, y] = calcAutoPan(position, containerBounds, autoPanSpeed);\n panBy({ x, y });\n autoPanId = requestAnimationFrame(autoPan);\n }\n // Stays the same for all consecutive pointermove events\n const fromHandle = {\n ...fromHandleInternal,\n nodeId,\n type: handleType,\n position: fromHandleInternal.position,\n };\n const fromInternalNode = nodeLookup.get(nodeId);\n const from = getHandlePosition(fromInternalNode, fromHandle, Position.Left, true);\n let previousConnection = {\n inProgress: true,\n isValid: null,\n from,\n fromHandle,\n fromPosition: fromHandle.position,\n fromNode: fromInternalNode,\n to: position,\n toHandle: null,\n toPosition: oppositePosition[fromHandle.position],\n toNode: null,\n pointer: position,\n };\n function startConnection() {\n connectionStarted = true;\n updateConnection(previousConnection);\n onConnectStart?.(event, { nodeId, handleId, handleType });\n }\n if (dragThreshold === 0) {\n startConnection();\n }\n function onPointerMove(event) {\n if (!connectionStarted) {\n const { x: evtX, y: evtY } = getEventPosition(event);\n const dx = evtX - x;\n const dy = evtY - y;\n const nextConnectionStarted = dx * dx + dy * dy > dragThreshold * dragThreshold;\n if (!nextConnectionStarted) {\n return;\n }\n startConnection();\n }\n if (!getFromHandle() || !fromHandle) {\n onPointerUp(event);\n return;\n }\n const transform = getTransform();\n position = getEventPosition(event, containerBounds);\n closestHandle = getClosestHandle(pointToRendererPoint(position, transform, false, [1, 1]), connectionRadius, nodeLookup, fromHandle);\n if (!autoPanStarted) {\n autoPan();\n autoPanStarted = true;\n }\n const result = isValidHandle(event, {\n handle: closestHandle,\n connectionMode,\n fromNodeId: nodeId,\n fromHandleId: handleId,\n fromType: isTarget ? 'target' : 'source',\n isValidConnection,\n doc,\n lib,\n flowId,\n nodeLookup,\n });\n resultHandleDomNode = result.handleDomNode;\n connection = result.connection;\n isValid = isConnectionValid(!!closestHandle, result.isValid);\n const fromInternalNode = nodeLookup.get(nodeId);\n const from = fromInternalNode\n ? getHandlePosition(fromInternalNode, fromHandle, Position.Left, true)\n : previousConnection.from;\n const newConnection = {\n ...previousConnection,\n from,\n isValid,\n to: result.toHandle && isValid\n ? rendererPointToPoint({ x: result.toHandle.x, y: result.toHandle.y }, transform)\n : position,\n toHandle: result.toHandle,\n toPosition: isValid && result.toHandle ? result.toHandle.position : oppositePosition[fromHandle.position],\n toNode: result.toHandle ? nodeLookup.get(result.toHandle.nodeId) : null,\n pointer: position,\n };\n updateConnection(newConnection);\n previousConnection = newConnection;\n }\n function onPointerUp(event) {\n // Prevent multi-touch aborting connection\n if ('touches' in event && event.touches.length > 0) {\n return;\n }\n if (connectionStarted) {\n if ((closestHandle || resultHandleDomNode) && connection && isValid) {\n onConnect?.(connection);\n }\n /*\n * it's important to get a fresh reference from the store here\n * in order to get the latest state of onConnectEnd\n */\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n const { inProgress, ...connectionState } = previousConnection;\n const finalConnectionState = {\n ...connectionState,\n toPosition: previousConnection.toHandle ? previousConnection.toPosition : null,\n };\n onConnectEnd?.(event, finalConnectionState);\n if (edgeUpdaterType) {\n onReconnectEnd?.(event, finalConnectionState);\n }\n }\n cancelConnection();\n cancelAnimationFrame(autoPanId);\n autoPanStarted = false;\n isValid = false;\n connection = null;\n resultHandleDomNode = null;\n doc.removeEventListener('mousemove', onPointerMove);\n doc.removeEventListener('mouseup', onPointerUp);\n doc.removeEventListener('touchmove', onPointerMove);\n doc.removeEventListener('touchend', onPointerUp);\n }\n doc.addEventListener('mousemove', onPointerMove);\n doc.addEventListener('mouseup', onPointerUp);\n doc.addEventListener('touchmove', onPointerMove);\n doc.addEventListener('touchend', onPointerUp);\n}\n// checks if and returns connection in form of an object { source: 123, target: 312 }\nfunction isValidHandle(event, { handle, connectionMode, fromNodeId, fromHandleId, fromType, doc, lib, flowId, isValidConnection = alwaysValid, nodeLookup, }) {\n const isTarget = fromType === 'target';\n const handleDomNode = handle\n ? doc.querySelector(`.${lib}-flow__handle[data-id=\"${flowId}-${handle?.nodeId}-${handle?.id}-${handle?.type}\"]`)\n : null;\n const { x, y } = getEventPosition(event);\n const handleBelow = doc.elementFromPoint(x, y);\n /*\n * we always want to prioritize the handle below the mouse cursor over the closest distance handle,\n * because it could be that the center of another handle is closer to the mouse pointer than the handle below the cursor\n */\n const handleToCheck = handleBelow?.classList.contains(`${lib}-flow__handle`) ? handleBelow : handleDomNode;\n const result = {\n handleDomNode: handleToCheck,\n isValid: false,\n connection: null,\n toHandle: null,\n };\n if (handleToCheck) {\n const handleType = getHandleType(undefined, handleToCheck);\n const handleNodeId = handleToCheck.getAttribute('data-nodeid');\n const handleId = handleToCheck.getAttribute('data-handleid');\n const connectable = handleToCheck.classList.contains('connectable');\n const connectableEnd = handleToCheck.classList.contains('connectableend');\n if (!handleNodeId || !handleType) {\n return result;\n }\n const connection = {\n source: isTarget ? handleNodeId : fromNodeId,\n sourceHandle: isTarget ? handleId : fromHandleId,\n target: isTarget ? fromNodeId : handleNodeId,\n targetHandle: isTarget ? fromHandleId : handleId,\n };\n result.connection = connection;\n const isConnectable = connectable && connectableEnd;\n // in strict mode we don't allow target to target or source to source connections\n const isValid = isConnectable &&\n (connectionMode === ConnectionMode.Strict\n ? (isTarget && handleType === 'source') || (!isTarget && handleType === 'target')\n : handleNodeId !== fromNodeId || handleId !== fromHandleId);\n result.isValid = isValid && isValidConnection(connection);\n result.toHandle = getHandle(handleNodeId, handleType, handleId, nodeLookup, connectionMode, true);\n }\n return result;\n}\nconst XYHandle = {\n onPointerDown,\n isValid: isValidHandle,\n};\n\nfunction XYMinimap({ domNode, panZoom, getTransform, getViewScale }) {\n const selection = select(domNode);\n function update({ translateExtent, width, height, zoomStep = 1, pannable = true, zoomable = true, inversePan = false, }) {\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n const zoomHandler = (event) => {\n if (event.sourceEvent.type !== 'wheel' || !panZoom) {\n return;\n }\n const transform = getTransform();\n const factor = event.sourceEvent.ctrlKey && isMacOs() ? 10 : 1;\n const pinchDelta = -event.sourceEvent.deltaY *\n (event.sourceEvent.deltaMode === 1 ? 0.05 : event.sourceEvent.deltaMode ? 1 : 0.002) *\n zoomStep;\n const nextZoom = transform[2] * Math.pow(2, pinchDelta * factor);\n panZoom.scaleTo(nextZoom);\n };\n let panStart = [0, 0];\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n const panStartHandler = (event) => {\n if (event.sourceEvent.type === 'mousedown' || event.sourceEvent.type === 'touchstart') {\n panStart = [\n event.sourceEvent.clientX ?? event.sourceEvent.touches[0].clientX,\n event.sourceEvent.clientY ?? event.sourceEvent.touches[0].clientY,\n ];\n }\n };\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n const panHandler = (event) => {\n const transform = getTransform();\n if ((event.sourceEvent.type !== 'mousemove' && event.sourceEvent.type !== 'touchmove') || !panZoom) {\n return;\n }\n const panCurrent = [\n event.sourceEvent.clientX ?? event.sourceEvent.touches[0].clientX,\n event.sourceEvent.clientY ?? event.sourceEvent.touches[0].clientY,\n ];\n const panDelta = [panCurrent[0] - panStart[0], panCurrent[1] - panStart[1]];\n panStart = panCurrent;\n const moveScale = getViewScale() * Math.max(transform[2], Math.log(transform[2])) * (inversePan ? -1 : 1);\n const position = {\n x: transform[0] - panDelta[0] * moveScale,\n y: transform[1] - panDelta[1] * moveScale,\n };\n const extent = [\n [0, 0],\n [width, height],\n ];\n panZoom.setViewportConstrained({\n x: position.x,\n y: position.y,\n zoom: transform[2],\n }, extent, translateExtent);\n };\n const zoomAndPanHandler = zoom()\n .on('start', panStartHandler)\n // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n // @ts-ignore\n .on('zoom', pannable ? panHandler : null)\n // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n // @ts-ignore\n .on('zoom.wheel', zoomable ? zoomHandler : null);\n selection.call(zoomAndPanHandler, {});\n }\n function destroy() {\n selection.on('zoom', null);\n }\n return {\n update,\n destroy,\n pointer,\n };\n}\n\n/* eslint-disable @typescript-eslint/no-explicit-any */\nconst transformToViewport = (transform) => ({\n x: transform.x,\n y: transform.y,\n zoom: transform.k,\n});\nconst viewportToTransform = ({ x, y, zoom }) => zoomIdentity.translate(x, y).scale(zoom);\nconst isWrappedWithClass = (event, className) => event.target.closest(`.${className}`);\nconst isRightClickPan = (panOnDrag, usedButton) => usedButton === 2 && Array.isArray(panOnDrag) && panOnDrag.includes(2);\n// taken from d3-ease: https://github.com/d3/d3-ease/blob/main/src/cubic.js\nconst defaultEase = (t) => ((t *= 2) <= 1 ? t * t * t : (t -= 2) * t * t + 2) / 2;\nconst getD3Transition = (selection, duration = 0, ease = defaultEase, onEnd = () => { }) => {\n const hasDuration = typeof duration === 'number' && duration > 0;\n if (!hasDuration) {\n onEnd();\n }\n return hasDuration ? selection.transition().duration(duration).ease(ease).on('end', onEnd) : selection;\n};\nconst wheelDelta = (event) => {\n const factor = event.ctrlKey && isMacOs() ? 10 : 1;\n return -event.deltaY * (event.deltaMode === 1 ? 0.05 : event.deltaMode ? 1 : 0.002) * factor;\n};\n\nfunction createPanOnScrollHandler({ zoomPanValues, noWheelClassName, d3Selection, d3Zoom, panOnScrollMode, panOnScrollSpeed, zoomOnPinch, onPanZoomStart, onPanZoom, onPanZoomEnd, }) {\n return (event) => {\n if (isWrappedWithClass(event, noWheelClassName)) {\n if (event.ctrlKey) {\n event.preventDefault(); // stop native page zoom for pinch zooming\n }\n return false;\n }\n event.preventDefault();\n event.stopImmediatePropagation();\n const currentZoom = d3Selection.property('__zoom').k || 1;\n // macos sets ctrlKey=true for pinch gesture on a trackpad\n if (event.ctrlKey && zoomOnPinch) {\n const point = pointer(event);\n const pinchDelta = wheelDelta(event);\n const zoom = currentZoom * Math.pow(2, pinchDelta);\n // @ts-ignore\n d3Zoom.scaleTo(d3Selection, zoom, point, event);\n return;\n }\n /*\n * increase scroll speed in firefox\n * firefox: deltaMode === 1; chrome: deltaMode === 0\n */\n const deltaNormalize = event.deltaMode === 1 ? 20 : 1;\n let deltaX = panOnScrollMode === PanOnScrollMode.Vertical ? 0 : event.deltaX * deltaNormalize;\n let deltaY = panOnScrollMode === PanOnScrollMode.Horizontal ? 0 : event.deltaY * deltaNormalize;\n // this enables vertical scrolling with shift + scroll on windows\n if (!isMacOs() && event.shiftKey && panOnScrollMode !== PanOnScrollMode.Vertical) {\n deltaX = event.deltaY * deltaNormalize;\n deltaY = 0;\n }\n d3Zoom.translateBy(d3Selection, -(deltaX / currentZoom) * panOnScrollSpeed, -(deltaY / currentZoom) * panOnScrollSpeed, \n // @ts-ignore\n { internal: true });\n const nextViewport = transformToViewport(d3Selection.property('__zoom'));\n clearTimeout(zoomPanValues.panScrollTimeout);\n /*\n * for pan on scroll we need to handle the event calls on our own\n * we can't use the start, zoom and end events from d3-zoom\n * because start and move gets called on every scroll event and not once at the beginning\n */\n if (!zoomPanValues.isPanScrolling) {\n zoomPanValues.isPanScrolling = true;\n onPanZoomStart?.(event, nextViewport);\n }\n else {\n onPanZoom?.(event, nextViewport);\n zoomPanValues.panScrollTimeout = setTimeout(() => {\n onPanZoomEnd?.(event, nextViewport);\n zoomPanValues.isPanScrolling = false;\n }, 150);\n }\n };\n}\nfunction createZoomOnScrollHandler({ noWheelClassName, preventScrolling, d3ZoomHandler }) {\n return function (event, d) {\n const isWheel = event.type === 'wheel';\n // we still want to enable pinch zooming even if preventScrolling is set to false\n const preventZoom = !preventScrolling && isWheel && !event.ctrlKey;\n const hasNoWheelClass = isWrappedWithClass(event, noWheelClassName);\n // if user is pinch zooming above a nowheel element, we don't want the browser to zoom\n if (event.ctrlKey && isWheel && hasNoWheelClass) {\n event.preventDefault();\n }\n if (preventZoom || hasNoWheelClass) {\n return null;\n }\n event.preventDefault();\n d3ZoomHandler.call(this, event, d);\n };\n}\nfunction createPanZoomStartHandler({ zoomPanValues, onDraggingChange, onPanZoomStart }) {\n return (event) => {\n if (event.sourceEvent?.internal) {\n return;\n }\n const viewport = transformToViewport(event.transform);\n // we need to remember it here, because it's always 0 in the \"zoom\" event\n zoomPanValues.mouseButton = event.sourceEvent?.button || 0;\n zoomPanValues.isZoomingOrPanning = true;\n zoomPanValues.prevViewport = viewport;\n if (event.sourceEvent?.type === 'mousedown') {\n onDraggingChange(true);\n }\n if (onPanZoomStart) {\n onPanZoomStart?.(event.sourceEvent, viewport);\n }\n };\n}\nfunction createPanZoomHandler({ zoomPanValues, panOnDrag, onPaneContextMenu, onTransformChange, onPanZoom, }) {\n return (event) => {\n zoomPanValues.usedRightMouseButton = !!(onPaneContextMenu && isRightClickPan(panOnDrag, zoomPanValues.mouseButton ?? 0));\n if (!event.sourceEvent?.sync) {\n onTransformChange([event.transform.x, event.transform.y, event.transform.k]);\n }\n if (onPanZoom && !event.sourceEvent?.internal) {\n onPanZoom?.(event.sourceEvent, transformToViewport(event.transform));\n }\n };\n}\nfunction createPanZoomEndHandler({ zoomPanValues, panOnDrag, panOnScroll, onDraggingChange, onPanZoomEnd, onPaneContextMenu, }) {\n return (event) => {\n if (event.sourceEvent?.internal) {\n return;\n }\n zoomPanValues.isZoomingOrPanning = false;\n if (onPaneContextMenu &&\n isRightClickPan(panOnDrag, zoomPanValues.mouseButton ?? 0) &&\n !zoomPanValues.usedRightMouseButton &&\n event.sourceEvent) {\n onPaneContextMenu(event.sourceEvent);\n }\n zoomPanValues.usedRightMouseButton = false;\n onDraggingChange(false);\n if (onPanZoomEnd) {\n const viewport = transformToViewport(event.transform);\n zoomPanValues.prevViewport = viewport;\n clearTimeout(zoomPanValues.timerId);\n zoomPanValues.timerId = setTimeout(() => {\n onPanZoomEnd?.(event.sourceEvent, viewport);\n }, \n // we need a setTimeout for panOnScroll to suppress multiple end events fired during scroll\n panOnScroll ? 150 : 0);\n }\n };\n}\n\n/* eslint-disable @typescript-eslint/no-explicit-any */\nfunction createFilter({ zoomActivationKeyPressed, zoomOnScroll, zoomOnPinch, panOnDrag, panOnScroll, zoomOnDoubleClick, userSelectionActive, noWheelClassName, noPanClassName, lib, connectionInProgress, }) {\n return (event) => {\n const zoomScroll = zoomActivationKeyPressed || zoomOnScroll;\n const pinchZoom = zoomOnPinch && event.ctrlKey;\n const isWheelEvent = event.type === 'wheel';\n if (event.button === 1 &&\n event.type === 'mousedown' &&\n (isWrappedWithClass(event, `${lib}-flow__node`) || isWrappedWithClass(event, `${lib}-flow__edge`))) {\n return true;\n }\n // if all interactions are disabled, we prevent all zoom events\n if (!panOnDrag && !zoomScroll && !panOnScroll && !zoomOnDoubleClick && !zoomOnPinch) {\n return false;\n }\n // during a selection we prevent all other interactions\n if (userSelectionActive) {\n return false;\n }\n // we want to disable pinch-zooming while making a connection\n if (connectionInProgress && !isWheelEvent) {\n return false;\n }\n // if the target element is inside an element with the nowheel class, we prevent zooming\n if (isWrappedWithClass(event, noWheelClassName) && isWheelEvent) {\n return false;\n }\n // if the target element is inside an element with the nopan class, we prevent panning\n if (isWrappedWithClass(event, noPanClassName) &&\n (!isWheelEvent || (panOnScroll && isWheelEvent && !zoomActivationKeyPressed))) {\n return false;\n }\n if (!zoomOnPinch && event.ctrlKey && isWheelEvent) {\n return false;\n }\n if (!zoomOnPinch && event.type === 'touchstart' && event.touches?.length > 1) {\n event.preventDefault(); // if you manage to start with 2 touches, we prevent native zoom\n return false;\n }\n // when there is no scroll handling enabled, we prevent all wheel events\n if (!zoomScroll && !panOnScroll && !pinchZoom && isWheelEvent) {\n return false;\n }\n // if the pane is not movable, we prevent dragging it with mousestart or touchstart\n if (!panOnDrag && (event.type === 'mousedown' || event.type === 'touchstart')) {\n return false;\n }\n // if the pane is only movable using allowed clicks\n if (Array.isArray(panOnDrag) && !panOnDrag.includes(event.button) && event.type === 'mousedown') {\n return false;\n }\n // We only allow right clicks if pan on drag is set to right click\n const buttonAllowed = (Array.isArray(panOnDrag) && panOnDrag.includes(event.button)) || !event.button || event.button <= 1;\n // default filter for d3-zoom\n return (!event.ctrlKey || isWheelEvent) && buttonAllowed;\n };\n}\n\nfunction XYPanZoom({ domNode, minZoom, maxZoom, translateExtent, viewport, onPanZoom, onPanZoomStart, onPanZoomEnd, onDraggingChange, }) {\n const zoomPanValues = {\n isZoomingOrPanning: false,\n usedRightMouseButton: false,\n prevViewport: { },\n mouseButton: 0,\n timerId: undefined,\n panScrollTimeout: undefined,\n isPanScrolling: false,\n };\n const bbox = domNode.getBoundingClientRect();\n const d3ZoomInstance = zoom().scaleExtent([minZoom, maxZoom]).translateExtent(translateExtent);\n const d3Selection = select(domNode).call(d3ZoomInstance);\n setViewportConstrained({\n x: viewport.x,\n y: viewport.y,\n zoom: clamp(viewport.zoom, minZoom, maxZoom),\n }, [\n [0, 0],\n [bbox.width, bbox.height],\n ], translateExtent);\n const d3ZoomHandler = d3Selection.on('wheel.zoom');\n const d3DblClickZoomHandler = d3Selection.on('dblclick.zoom');\n d3ZoomInstance.wheelDelta(wheelDelta);\n async function setTransform(transform, options) {\n if (d3Selection) {\n return new Promise((resolve) => {\n d3ZoomInstance?.interpolate(options?.interpolate === 'linear' ? interpolate : interpolateZoom).transform(getD3Transition(d3Selection, options?.duration, options?.ease, () => resolve(true)), transform);\n });\n }\n return false;\n }\n // public functions\n function update({ noWheelClassName, noPanClassName, onPaneContextMenu, userSelectionActive, panOnScroll, panOnDrag, panOnScrollMode, panOnScrollSpeed, preventScrolling, zoomOnPinch, zoomOnScroll, zoomOnDoubleClick, zoomActivationKeyPressed, lib, onTransformChange, connectionInProgress, paneClickDistance, selectionOnDrag, }) {\n if (userSelectionActive && !zoomPanValues.isZoomingOrPanning) {\n destroy();\n }\n const isPanOnScroll = panOnScroll && !zoomActivationKeyPressed && !userSelectionActive;\n d3ZoomInstance.clickDistance(selectionOnDrag ? Infinity : !isNumeric(paneClickDistance) || paneClickDistance < 0 ? 0 : paneClickDistance);\n const wheelHandler = isPanOnScroll\n ? createPanOnScrollHandler({\n zoomPanValues,\n noWheelClassName,\n d3Selection,\n d3Zoom: d3ZoomInstance,\n panOnScrollMode,\n panOnScrollSpeed,\n zoomOnPinch,\n onPanZoomStart,\n onPanZoom,\n onPanZoomEnd,\n })\n : createZoomOnScrollHandler({\n noWheelClassName,\n preventScrolling,\n d3ZoomHandler,\n });\n d3Selection.on('wheel.zoom', wheelHandler, { passive: false });\n // pan zoom start\n const startHandler = createPanZoomStartHandler({\n zoomPanValues,\n onDraggingChange,\n onPanZoomStart,\n });\n d3ZoomInstance.on('start', startHandler);\n // pan zoom\n const panZoomHandler = createPanZoomHandler({\n zoomPanValues,\n panOnDrag,\n onPaneContextMenu: !!onPaneContextMenu,\n onPanZoom,\n onTransformChange,\n });\n d3ZoomInstance.on('zoom', panZoomHandler);\n // pan zoom end\n const panZoomEndHandler = createPanZoomEndHandler({\n zoomPanValues,\n panOnDrag,\n panOnScroll,\n onPaneContextMenu,\n onPanZoomEnd,\n onDraggingChange,\n });\n d3ZoomInstance.on('end', panZoomEndHandler);\n const filter = createFilter({\n zoomActivationKeyPressed,\n panOnDrag,\n zoomOnScroll,\n panOnScroll,\n zoomOnDoubleClick,\n zoomOnPinch,\n userSelectionActive,\n noPanClassName,\n noWheelClassName,\n lib,\n connectionInProgress,\n });\n d3ZoomInstance.filter(filter);\n /*\n * We cannot add zoomOnDoubleClick to the filter above because\n * double tapping on touch screens circumvents the filter and\n * dblclick.zoom is fired on the selection directly\n */\n if (zoomOnDoubleClick) {\n d3Selection.on('dblclick.zoom', d3DblClickZoomHandler);\n }\n else {\n d3Selection.on('dblclick.zoom', null);\n }\n }\n function destroy() {\n d3ZoomInstance.on('zoom', null);\n }\n async function setViewportConstrained(viewport, extent, translateExtent) {\n const nextTransform = viewportToTransform(viewport);\n const contrainedTransform = d3ZoomInstance?.constrain()(nextTransform, extent, translateExtent);\n if (contrainedTransform) {\n await setTransform(contrainedTransform);\n }\n return contrainedTransform;\n }\n async function setViewport(viewport, options) {\n const nextTransform = viewportToTransform(viewport);\n await setTransform(nextTransform, options);\n return nextTransform;\n }\n function syncViewport(viewport) {\n if (d3Selection) {\n const nextTransform = viewportToTransform(viewport);\n const currentTransform = d3Selection.property('__zoom');\n if (currentTransform.k !== viewport.zoom ||\n currentTransform.x !== viewport.x ||\n currentTransform.y !== viewport.y) {\n // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n // @ts-ignore\n d3ZoomInstance?.transform(d3Selection, nextTransform, null, { sync: true });\n }\n }\n }\n function getViewport() {\n const transform = d3Selection ? zoomTransform(d3Selection.node()) : { x: 0, y: 0, k: 1 };\n return { x: transform.x, y: transform.y, zoom: transform.k };\n }\n async function scaleTo(zoom, options) {\n if (d3Selection) {\n return new Promise((resolve) => {\n d3ZoomInstance?.interpolate(options?.interpolate === 'linear' ? interpolate : interpolateZoom).scaleTo(getD3Transition(d3Selection, options?.duration, options?.ease, () => resolve(true)), zoom);\n });\n }\n return false;\n }\n async function scaleBy(factor, options) {\n if (d3Selection) {\n return new Promise((resolve) => {\n d3ZoomInstance?.interpolate(options?.interpolate === 'linear' ? interpolate : interpolateZoom).scaleBy(getD3Transition(d3Selection, options?.duration, options?.ease, () => resolve(true)), factor);\n });\n }\n return false;\n }\n function setScaleExtent(scaleExtent) {\n d3ZoomInstance?.scaleExtent(scaleExtent);\n }\n function setTranslateExtent(translateExtent) {\n d3ZoomInstance?.translateExtent(translateExtent);\n }\n function setClickDistance(distance) {\n const validDistance = !isNumeric(distance) || distance < 0 ? 0 : distance;\n d3ZoomInstance?.clickDistance(validDistance);\n }\n return {\n update,\n destroy,\n setViewport,\n setViewportConstrained,\n getViewport,\n scaleTo,\n scaleBy,\n setScaleExtent,\n setTranslateExtent,\n syncViewport,\n setClickDistance,\n };\n}\n\n/**\n * Used to determine the variant of the resize control\n *\n * @public\n */\nvar ResizeControlVariant;\n(function (ResizeControlVariant) {\n ResizeControlVariant[\"Line\"] = \"line\";\n ResizeControlVariant[\"Handle\"] = \"handle\";\n})(ResizeControlVariant || (ResizeControlVariant = {}));\nconst XY_RESIZER_HANDLE_POSITIONS = ['top-left', 'top-right', 'bottom-left', 'bottom-right'];\nconst XY_RESIZER_LINE_POSITIONS = ['top', 'right', 'bottom', 'left'];\n\n/**\n * Get all connecting edges for a given set of nodes\n * @param width - new width of the node\n * @param prevWidth - previous width of the node\n * @param height - new height of the node\n * @param prevHeight - previous height of the node\n * @param affectsX - whether to invert the resize direction for the x axis\n * @param affectsY - whether to invert the resize direction for the y axis\n * @returns array of two numbers representing the direction of the resize for each axis, 0 = no change, 1 = increase, -1 = decrease\n */\nfunction getResizeDirection({ width, prevWidth, height, prevHeight, affectsX, affectsY, }) {\n const deltaWidth = width - prevWidth;\n const deltaHeight = height - prevHeight;\n const direction = [deltaWidth > 0 ? 1 : deltaWidth < 0 ? -1 : 0, deltaHeight > 0 ? 1 : deltaHeight < 0 ? -1 : 0];\n if (deltaWidth && affectsX) {\n direction[0] = direction[0] * -1;\n }\n if (deltaHeight && affectsY) {\n direction[1] = direction[1] * -1;\n }\n return direction;\n}\n/**\n * Parses the control position that is being dragged to dimensions that are being resized\n * @param controlPosition - position of the control that is being dragged\n * @returns isHorizontal, isVertical, affectsX, affectsY,\n */\nfunction getControlDirection(controlPosition) {\n const isHorizontal = controlPosition.includes('right') || controlPosition.includes('left');\n const isVertical = controlPosition.includes('bottom') || controlPosition.includes('top');\n const affectsX = controlPosition.includes('left');\n const affectsY = controlPosition.includes('top');\n return {\n isHorizontal,\n isVertical,\n affectsX,\n affectsY,\n };\n}\nfunction getLowerExtentClamp(lowerExtent, lowerBound) {\n return Math.max(0, lowerBound - lowerExtent);\n}\nfunction getUpperExtentClamp(upperExtent, upperBound) {\n return Math.max(0, upperExtent - upperBound);\n}\nfunction getSizeClamp(size, minSize, maxSize) {\n return Math.max(0, minSize - size, size - maxSize);\n}\nfunction xor(a, b) {\n return a ? !b : b;\n}\n/**\n * Calculates new width & height and x & y of node after resize based on pointer position\n * @description - Buckle up, this is a chunky one... If you want to determine the new dimensions of a node after a resize,\n * you have to account for all possible restrictions: min/max width/height of the node, the maximum extent the node is allowed\n * to move in (in this case: resize into) determined by the parent node, the minimal extent determined by child nodes\n * with expandParent or extent: 'parent' set and oh yeah, these things also have to work with keepAspectRatio!\n * The way this is done is by determining how much each of these restricting actually restricts the resize and then applying the\n * strongest restriction. Because the resize affects x, y and width, height and width, height of a opposing side with keepAspectRatio,\n * the resize amount is always kept in distX & distY amount (the distance in mouse movement)\n * Instead of clamping each value, we first calculate the biggest 'clamp' (for the lack of a better name) and then apply it to all values.\n * To complicate things nodeOrigin has to be taken into account as well. This is done by offsetting the nodes as if their origin is [0, 0],\n * then calculating the restrictions as usual\n * @param startValues - starting values of resize\n * @param controlDirection - dimensions affected by the resize\n * @param pointerPosition - the current pointer position corrected for snapping\n * @param boundaries - minimum and maximum dimensions of the node\n * @param keepAspectRatio - prevent changes of asprect ratio\n * @returns x, y, width and height of the node after resize\n */\nfunction getDimensionsAfterResize(startValues, controlDirection, pointerPosition, boundaries, keepAspectRatio, nodeOrigin, extent, childExtent) {\n let { affectsX, affectsY } = controlDirection;\n const { isHorizontal, isVertical } = controlDirection;\n const isDiagonal = isHorizontal && isVertical;\n const { xSnapped, ySnapped } = pointerPosition;\n const { minWidth, maxWidth, minHeight, maxHeight } = boundaries;\n const { x: startX, y: startY, width: startWidth, height: startHeight, aspectRatio } = startValues;\n let distX = Math.floor(isHorizontal ? xSnapped - startValues.pointerX : 0);\n let distY = Math.floor(isVertical ? ySnapped - startValues.pointerY : 0);\n const newWidth = startWidth + (affectsX ? -distX : distX);\n const newHeight = startHeight + (affectsY ? -distY : distY);\n const originOffsetX = -nodeOrigin[0] * startWidth;\n const originOffsetY = -nodeOrigin[1] * startHeight;\n // Check if maxWidth, minWWidth, maxHeight, minHeight are restricting the resize\n let clampX = getSizeClamp(newWidth, minWidth, maxWidth);\n let clampY = getSizeClamp(newHeight, minHeight, maxHeight);\n // Check if extent is restricting the resize\n if (extent) {\n let xExtentClamp = 0;\n let yExtentClamp = 0;\n if (affectsX && distX < 0) {\n xExtentClamp = getLowerExtentClamp(startX + distX + originOffsetX, extent[0][0]);\n }\n else if (!affectsX && distX > 0) {\n xExtentClamp = getUpperExtentClamp(startX + newWidth + originOffsetX, extent[1][0]);\n }\n if (affectsY && distY < 0) {\n yExtentClamp = getLowerExtentClamp(startY + distY + originOffsetY, extent[0][1]);\n }\n else if (!affectsY && distY > 0) {\n yExtentClamp = getUpperExtentClamp(startY + newHeight + originOffsetY, extent[1][1]);\n }\n clampX = Math.max(clampX, xExtentClamp);\n clampY = Math.max(clampY, yExtentClamp);\n }\n // Check if the child extent is restricting the resize\n if (childExtent) {\n let xExtentClamp = 0;\n let yExtentClamp = 0;\n if (affectsX && distX > 0) {\n xExtentClamp = getUpperExtentClamp(startX + distX, childExtent[0][0]);\n }\n else if (!affectsX && distX < 0) {\n xExtentClamp = getLowerExtentClamp(startX + newWidth, childExtent[1][0]);\n }\n if (affectsY && distY > 0) {\n yExtentClamp = getUpperExtentClamp(startY + distY, childExtent[0][1]);\n }\n else if (!affectsY && distY < 0) {\n yExtentClamp = getLowerExtentClamp(startY + newHeight, childExtent[1][1]);\n }\n clampX = Math.max(clampX, xExtentClamp);\n clampY = Math.max(clampY, yExtentClamp);\n }\n // Check if the aspect ratio resizing of the other side is restricting the resize\n if (keepAspectRatio) {\n if (isHorizontal) {\n // Check if the max dimensions might be restricting the resize\n const aspectHeightClamp = getSizeClamp(newWidth / aspectRatio, minHeight, maxHeight) * aspectRatio;\n clampX = Math.max(clampX, aspectHeightClamp);\n // Check if the extent is restricting the resize\n if (extent) {\n let aspectExtentClamp = 0;\n if ((!affectsX && !affectsY) || (affectsX && !affectsY && isDiagonal)) {\n aspectExtentClamp =\n getUpperExtentClamp(startY + originOffsetY + newWidth / aspectRatio, extent[1][1]) * aspectRatio;\n }\n else {\n aspectExtentClamp =\n getLowerExtentClamp(startY + originOffsetY + (affectsX ? distX : -distX) / aspectRatio, extent[0][1]) *\n aspectRatio;\n }\n clampX = Math.max(clampX, aspectExtentClamp);\n }\n // Check if the child extent is restricting the resize\n if (childExtent) {\n let aspectExtentClamp = 0;\n if ((!affectsX && !affectsY) || (affectsX && !affectsY && isDiagonal)) {\n aspectExtentClamp = getLowerExtentClamp(startY + newWidth / aspectRatio, childExtent[1][1]) * aspectRatio;\n }\n else {\n aspectExtentClamp =\n getUpperExtentClamp(startY + (affectsX ? distX : -distX) / aspectRatio, childExtent[0][1]) * aspectRatio;\n }\n clampX = Math.max(clampX, aspectExtentClamp);\n }\n }\n // Do the same thing for vertical resizing\n if (isVertical) {\n const aspectWidthClamp = getSizeClamp(newHeight * aspectRatio, minWidth, maxWidth) / aspectRatio;\n clampY = Math.max(clampY, aspectWidthClamp);\n if (extent) {\n let aspectExtentClamp = 0;\n if ((!affectsX && !affectsY) || (affectsY && !affectsX && isDiagonal)) {\n aspectExtentClamp =\n getUpperExtentClamp(startX + newHeight * aspectRatio + originOffsetX, extent[1][0]) / aspectRatio;\n }\n else {\n aspectExtentClamp =\n getLowerExtentClamp(startX + (affectsY ? distY : -distY) * aspectRatio + originOffsetX, extent[0][0]) /\n aspectRatio;\n }\n clampY = Math.max(clampY, aspectExtentClamp);\n }\n if (childExtent) {\n let aspectExtentClamp = 0;\n if ((!affectsX && !affectsY) || (affectsY && !affectsX && isDiagonal)) {\n aspectExtentClamp = getLowerExtentClamp(startX + newHeight * aspectRatio, childExtent[1][0]) / aspectRatio;\n }\n else {\n aspectExtentClamp =\n getUpperExtentClamp(startX + (affectsY ? distY : -distY) * aspectRatio, childExtent[0][0]) / aspectRatio;\n }\n clampY = Math.max(clampY, aspectExtentClamp);\n }\n }\n }\n distY = distY + (distY < 0 ? clampY : -clampY);\n distX = distX + (distX < 0 ? clampX : -clampX);\n if (keepAspectRatio) {\n if (isDiagonal) {\n if (newWidth > newHeight * aspectRatio) {\n distY = (xor(affectsX, affectsY) ? -distX : distX) / aspectRatio;\n }\n else {\n distX = (xor(affectsX, affectsY) ? -distY : distY) * aspectRatio;\n }\n }\n else {\n if (isHorizontal) {\n distY = distX / aspectRatio;\n affectsY = affectsX;\n }\n else {\n distX = distY * aspectRatio;\n affectsX = affectsY;\n }\n }\n }\n const x = affectsX ? startX + distX : startX;\n const y = affectsY ? startY + distY : startY;\n return {\n width: startWidth + (affectsX ? -distX : distX),\n height: startHeight + (affectsY ? -distY : distY),\n x: nodeOrigin[0] * distX * (!affectsX ? 1 : -1) + x,\n y: nodeOrigin[1] * distY * (!affectsY ? 1 : -1) + y,\n };\n}\n\nconst initPrevValues = { width: 0, height: 0, x: 0, y: 0 };\nconst initStartValues = {\n ...initPrevValues,\n pointerX: 0,\n pointerY: 0,\n aspectRatio: 1,\n};\nfunction nodeToChildExtent(child, parent, nodeOrigin) {\n const x = parent.position.x + child.position.x;\n const y = parent.position.y + child.position.y;\n const width = child.measured.width ?? 0;\n const height = child.measured.height ?? 0;\n const originOffsetX = nodeOrigin[0] * width;\n const originOffsetY = nodeOrigin[1] * height;\n return [\n [x - originOffsetX, y - originOffsetY],\n [x + width - originOffsetX, y + height - originOffsetY],\n ];\n}\nfunction XYResizer({ domNode, nodeId, getStoreItems, onChange, onEnd }) {\n const selection = select(domNode);\n let params = {\n controlDirection: getControlDirection('bottom-right'),\n boundaries: {\n minWidth: 0,\n minHeight: 0,\n maxWidth: Number.MAX_VALUE,\n maxHeight: Number.MAX_VALUE,\n },\n resizeDirection: undefined,\n keepAspectRatio: false,\n };\n function update({ controlPosition, boundaries, keepAspectRatio, resizeDirection, onResizeStart, onResize, onResizeEnd, shouldResize, }) {\n let prevValues = { ...initPrevValues };\n let startValues = { ...initStartValues };\n params = {\n boundaries,\n resizeDirection,\n keepAspectRatio,\n controlDirection: getControlDirection(controlPosition),\n };\n let node = undefined;\n let containerBounds = null;\n let childNodes = [];\n let parentNode = undefined; // Needed to fix expandParent\n let nodeExtent = undefined;\n let childExtent = undefined;\n // we only want to trigger onResizeEnd if onResize was actually called\n let resizeDetected = false;\n const dragHandler = drag()\n .on('start', (event) => {\n const { nodeLookup, transform, snapGrid, snapToGrid, nodeOrigin, paneDomNode } = getStoreItems();\n node = nodeLookup.get(nodeId);\n if (!node) {\n return;\n }\n containerBounds = paneDomNode?.getBoundingClientRect() ?? null;\n const { xSnapped, ySnapped } = getPointerPosition(event.sourceEvent, {\n transform,\n snapGrid,\n snapToGrid,\n containerBounds,\n });\n prevValues = {\n width: node.measured.width ?? 0,\n height: node.measured.height ?? 0,\n x: node.position.x ?? 0,\n y: node.position.y ?? 0,\n };\n startValues = {\n ...prevValues,\n pointerX: xSnapped,\n pointerY: ySnapped,\n aspectRatio: prevValues.width / prevValues.height,\n };\n parentNode = undefined;\n nodeExtent = isCoordinateExtent(node.extent) ? node.extent : undefined;\n if (node.parentId && (node.extent === 'parent' || node.expandParent)) {\n parentNode = nodeLookup.get(node.parentId);\n }\n if (parentNode && node.extent === 'parent') {\n nodeExtent = [\n [0, 0],\n [parentNode.measured.width, parentNode.measured.height],\n ];\n }\n /*\n * Collect all child nodes to correct their relative positions when top/left changes\n * Determine largest minimal extent the parent node is allowed to resize to\n */\n childNodes = [];\n childExtent = undefined;\n for (const [childId, child] of nodeLookup) {\n if (child.parentId === nodeId) {\n childNodes.push({\n id: childId,\n position: { ...child.position },\n extent: child.extent,\n });\n if (child.extent === 'parent' || child.expandParent) {\n const extent = nodeToChildExtent(child, node, child.origin ?? nodeOrigin);\n if (childExtent) {\n childExtent = [\n [Math.min(extent[0][0], childExtent[0][0]), Math.min(extent[0][1], childExtent[0][1])],\n [Math.max(extent[1][0], childExtent[1][0]), Math.max(extent[1][1], childExtent[1][1])],\n ];\n }\n else {\n childExtent = extent;\n }\n }\n }\n }\n onResizeStart?.(event, { ...prevValues });\n })\n .on('drag', (event) => {\n const { transform, snapGrid, snapToGrid, nodeOrigin: storeNodeOrigin } = getStoreItems();\n const pointerPosition = getPointerPosition(event.sourceEvent, {\n transform,\n snapGrid,\n snapToGrid,\n containerBounds,\n });\n const childChanges = [];\n if (!node) {\n return;\n }\n const { x: prevX, y: prevY, width: prevWidth, height: prevHeight } = prevValues;\n const change = {};\n const nodeOrigin = node.origin ?? storeNodeOrigin;\n const { width, height, x, y } = getDimensionsAfterResize(startValues, params.controlDirection, pointerPosition, params.boundaries, params.keepAspectRatio, nodeOrigin, nodeExtent, childExtent);\n const isWidthChange = width !== prevWidth;\n const isHeightChange = height !== prevHeight;\n const isXPosChange = x !== prevX && isWidthChange;\n const isYPosChange = y !== prevY && isHeightChange;\n if (!isXPosChange && !isYPosChange && !isWidthChange && !isHeightChange) {\n return;\n }\n if (isXPosChange || isYPosChange || nodeOrigin[0] === 1 || nodeOrigin[1] === 1) {\n change.x = isXPosChange ? x : prevValues.x;\n change.y = isYPosChange ? y : prevValues.y;\n prevValues.x = change.x;\n prevValues.y = change.y;\n /*\n * when top/left changes, correct the relative positions of child nodes\n * so that they stay in the same position\n */\n if (childNodes.length > 0) {\n const xChange = x - prevX;\n const yChange = y - prevY;\n for (const childNode of childNodes) {\n childNode.position = {\n x: childNode.position.x - xChange + nodeOrigin[0] * (width - prevWidth),\n y: childNode.position.y - yChange + nodeOrigin[1] * (height - prevHeight),\n };\n childChanges.push(childNode);\n }\n }\n }\n if (isWidthChange || isHeightChange) {\n change.width =\n isWidthChange && (!params.resizeDirection || params.resizeDirection === 'horizontal')\n ? width\n : prevValues.width;\n change.height =\n isHeightChange && (!params.resizeDirection || params.resizeDirection === 'vertical')\n ? height\n : prevValues.height;\n prevValues.width = change.width;\n prevValues.height = change.height;\n }\n // Fix expandParent when resizing from top/left\n if (parentNode && node.expandParent) {\n const xLimit = nodeOrigin[0] * (change.width ?? 0);\n if (change.x && change.x < xLimit) {\n prevValues.x = xLimit;\n startValues.x = startValues.x - (change.x - xLimit);\n }\n const yLimit = nodeOrigin[1] * (change.height ?? 0);\n if (change.y && change.y < yLimit) {\n prevValues.y = yLimit;\n startValues.y = startValues.y - (change.y - yLimit);\n }\n }\n const direction = getResizeDirection({\n width: prevValues.width,\n prevWidth,\n height: prevValues.height,\n prevHeight,\n affectsX: params.controlDirection.affectsX,\n affectsY: params.controlDirection.affectsY,\n });\n const nextValues = { ...prevValues, direction };\n const callResize = shouldResize?.(event, nextValues);\n if (callResize === false) {\n return;\n }\n resizeDetected = true;\n onResize?.(event, nextValues);\n onChange(change, childChanges);\n })\n .on('end', (event) => {\n if (!resizeDetected) {\n return;\n }\n onResizeEnd?.(event, { ...prevValues });\n onEnd?.({ ...prevValues });\n resizeDetected = false;\n });\n selection.call(dragHandler);\n }\n function destroy() {\n selection.on('.drag', null);\n }\n return {\n update,\n destroy,\n };\n}\n\nexport { ConnectionLineType, ConnectionMode, MarkerType, PanOnScrollMode, Position, ResizeControlVariant, SelectionMode, XYDrag, XYHandle, XYMinimap, XYPanZoom, XYResizer, XY_RESIZER_HANDLE_POSITIONS, XY_RESIZER_LINE_POSITIONS, addEdge, adoptUserNodes, areConnectionMapsEqual, areSetsEqual, boxToRect, calcAutoPan, calculateNodePosition, clamp, clampPosition, clampPositionToParent, createDevWarn, createMarkerIds, defaultAriaLabelConfig, elementSelectionKeys, errorMessages, evaluateAbsolutePosition, fitViewport, getBezierEdgeCenter, getBezierPath, getBoundsOfBoxes, getBoundsOfRects, getConnectedEdges, getConnectionStatus, getDimensions, getEdgeCenter, getEdgeId, getEdgePosition, getEdgeToolbarTransform, getElementsToRemove, getElevatedEdgeZIndex, getEventPosition, getHandleBounds, getHandlePosition, getHostForElement, getIncomers, getInternalNodesBounds, getMarkerId, getNodeDimensions, getNodePositionWithOrigin, getNodeToolbarTransform, getNodesBounds, getNodesInside, getOutgoers, getOverlappingArea, getPointerPosition, getSmoothStepPath, getStraightPath, getViewportForBounds, handleConnectionChange, handleExpandParent, infiniteExtent, initialConnection, isCoordinateExtent, isEdgeBase, isEdgeVisible, isInputDOMNode, isInternalNodeBase, isMacOs, isManualZIndexMode, isMouseEvent, isNodeBase, isNumeric, isRectObject, mergeAriaLabelConfig, nodeHasDimensions, nodeToBox, nodeToRect, oppositePosition, panBy, pointToRendererPoint, reconnectEdge, rectToBox, rendererPointToPoint, shallowNodeData, snapPosition, updateAbsolutePositions, updateConnectionLookup, updateNodeInternals, withResolvers };\n","/**\n * @license React\n * use-sync-external-store-shim.development.js\n *\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\n\"use strict\";\n\"production\" !== process.env.NODE_ENV &&\n (function () {\n function is(x, y) {\n return (x === y && (0 !== x || 1 / x === 1 / y)) || (x !== x && y !== y);\n }\n function useSyncExternalStore$2(subscribe, getSnapshot) {\n didWarnOld18Alpha ||\n void 0 === React.startTransition ||\n ((didWarnOld18Alpha = !0),\n console.error(\n \"You are using an outdated, pre-release alpha of React 18 that does not support useSyncExternalStore. The use-sync-external-store shim will not work correctly. Upgrade to a newer pre-release.\"\n ));\n var value = getSnapshot();\n if (!didWarnUncachedGetSnapshot) {\n var cachedValue = getSnapshot();\n objectIs(value, cachedValue) ||\n (console.error(\n \"The result of getSnapshot should be cached to avoid an infinite loop\"\n ),\n (didWarnUncachedGetSnapshot = !0));\n }\n cachedValue = useState({\n inst: { value: value, getSnapshot: getSnapshot }\n });\n var inst = cachedValue[0].inst,\n forceUpdate = cachedValue[1];\n useLayoutEffect(\n function () {\n inst.value = value;\n inst.getSnapshot = getSnapshot;\n checkIfSnapshotChanged(inst) && forceUpdate({ inst: inst });\n },\n [subscribe, value, getSnapshot]\n );\n useEffect(\n function () {\n checkIfSnapshotChanged(inst) && forceUpdate({ inst: inst });\n return subscribe(function () {\n checkIfSnapshotChanged(inst) && forceUpdate({ inst: inst });\n });\n },\n [subscribe]\n );\n useDebugValue(value);\n return value;\n }\n function checkIfSnapshotChanged(inst) {\n var latestGetSnapshot = inst.getSnapshot;\n inst = inst.value;\n try {\n var nextValue = latestGetSnapshot();\n return !objectIs(inst, nextValue);\n } catch (error) {\n return !0;\n }\n }\n function useSyncExternalStore$1(subscribe, getSnapshot) {\n return getSnapshot();\n }\n \"undefined\" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ &&\n \"function\" ===\n typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStart &&\n __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStart(Error());\n var React = require(\"react\"),\n objectIs = \"function\" === typeof Object.is ? Object.is : is,\n useState = React.useState,\n useEffect = React.useEffect,\n useLayoutEffect = React.useLayoutEffect,\n useDebugValue = React.useDebugValue,\n didWarnOld18Alpha = !1,\n didWarnUncachedGetSnapshot = !1,\n shim =\n \"undefined\" === typeof window ||\n \"undefined\" === typeof window.document ||\n \"undefined\" === typeof window.document.createElement\n ? useSyncExternalStore$1\n : useSyncExternalStore$2;\n exports.useSyncExternalStore =\n void 0 !== React.useSyncExternalStore ? React.useSyncExternalStore : shim;\n \"undefined\" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ &&\n \"function\" ===\n typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop &&\n __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop(Error());\n })();\n","'use strict';\n\nif (process.env.NODE_ENV === 'production') {\n module.exports = require('../cjs/use-sync-external-store-shim.production.js');\n} else {\n module.exports = require('../cjs/use-sync-external-store-shim.development.js');\n}\n","/**\n * @license React\n * use-sync-external-store-shim/with-selector.development.js\n *\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\n\"use strict\";\n\"production\" !== process.env.NODE_ENV &&\n (function () {\n function is(x, y) {\n return (x === y && (0 !== x || 1 / x === 1 / y)) || (x !== x && y !== y);\n }\n \"undefined\" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ &&\n \"function\" ===\n typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStart &&\n __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStart(Error());\n var React = require(\"react\"),\n shim = require(\"use-sync-external-store/shim\"),\n objectIs = \"function\" === typeof Object.is ? Object.is : is,\n useSyncExternalStore = shim.useSyncExternalStore,\n useRef = React.useRef,\n useEffect = React.useEffect,\n useMemo = React.useMemo,\n useDebugValue = React.useDebugValue;\n exports.useSyncExternalStoreWithSelector = function (\n subscribe,\n getSnapshot,\n getServerSnapshot,\n selector,\n isEqual\n ) {\n var instRef = useRef(null);\n if (null === instRef.current) {\n var inst = { hasValue: !1, value: null };\n instRef.current = inst;\n } else inst = instRef.current;\n instRef = useMemo(\n function () {\n function memoizedSelector(nextSnapshot) {\n if (!hasMemo) {\n hasMemo = !0;\n memoizedSnapshot = nextSnapshot;\n nextSnapshot = selector(nextSnapshot);\n if (void 0 !== isEqual && inst.hasValue) {\n var currentSelection = inst.value;\n if (isEqual(currentSelection, nextSnapshot))\n return (memoizedSelection = currentSelection);\n }\n return (memoizedSelection = nextSnapshot);\n }\n currentSelection = memoizedSelection;\n if (objectIs(memoizedSnapshot, nextSnapshot))\n return currentSelection;\n var nextSelection = selector(nextSnapshot);\n if (void 0 !== isEqual && isEqual(currentSelection, nextSelection))\n return (memoizedSnapshot = nextSnapshot), currentSelection;\n memoizedSnapshot = nextSnapshot;\n return (memoizedSelection = nextSelection);\n }\n var hasMemo = !1,\n memoizedSnapshot,\n memoizedSelection,\n maybeGetServerSnapshot =\n void 0 === getServerSnapshot ? null : getServerSnapshot;\n return [\n function () {\n return memoizedSelector(getSnapshot());\n },\n null === maybeGetServerSnapshot\n ? void 0\n : function () {\n return memoizedSelector(maybeGetServerSnapshot());\n }\n ];\n },\n [getSnapshot, getServerSnapshot, selector, isEqual]\n );\n var value = useSyncExternalStore(subscribe, instRef[0], instRef[1]);\n useEffect(\n function () {\n inst.hasValue = !0;\n inst.value = value;\n },\n [value]\n );\n useDebugValue(value);\n return value;\n };\n \"undefined\" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ &&\n \"function\" ===\n typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop &&\n __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop(Error());\n })();\n","'use strict';\n\nif (process.env.NODE_ENV === 'production') {\n module.exports = require('../cjs/use-sync-external-store-shim/with-selector.production.js');\n} else {\n module.exports = require('../cjs/use-sync-external-store-shim/with-selector.development.js');\n}\n","const createStoreImpl = (createState) => {\n let state;\n const listeners = /* @__PURE__ */ new Set();\n const setState = (partial, replace) => {\n const nextState = typeof partial === \"function\" ? partial(state) : partial;\n if (!Object.is(nextState, state)) {\n const previousState = state;\n state = (replace != null ? replace : typeof nextState !== \"object\" || nextState === null) ? nextState : Object.assign({}, state, nextState);\n listeners.forEach((listener) => listener(state, previousState));\n }\n };\n const getState = () => state;\n const getInitialState = () => initialState;\n const subscribe = (listener) => {\n listeners.add(listener);\n return () => listeners.delete(listener);\n };\n const destroy = () => {\n if ((import.meta.env ? import.meta.env.MODE : void 0) !== \"production\") {\n console.warn(\n \"[DEPRECATED] The `destroy` method will be unsupported in a future version. Instead use unsubscribe function returned by subscribe. Everything will be garbage-collected if store is garbage-collected.\"\n );\n }\n listeners.clear();\n };\n const api = { setState, getState, getInitialState, subscribe, destroy };\n const initialState = state = createState(setState, getState, api);\n return api;\n};\nconst createStore = (createState) => createState ? createStoreImpl(createState) : createStoreImpl;\nvar vanilla = (createState) => {\n if ((import.meta.env ? import.meta.env.MODE : void 0) !== \"production\") {\n console.warn(\n \"[DEPRECATED] Default export is deprecated. Instead use import { createStore } from 'zustand/vanilla'.\"\n );\n }\n return createStore(createState);\n};\n\nexport { createStore, vanilla as default };\n","import ReactExports from 'react';\nimport useSyncExternalStoreExports from 'use-sync-external-store/shim/with-selector.js';\nimport { createStore } from 'zustand/vanilla';\n\nconst { useDebugValue } = ReactExports;\nconst { useSyncExternalStoreWithSelector } = useSyncExternalStoreExports;\nconst identity = (arg) => arg;\nfunction useStoreWithEqualityFn(api, selector = identity, equalityFn) {\n const slice = useSyncExternalStoreWithSelector(\n api.subscribe,\n api.getState,\n api.getServerState || api.getInitialState,\n selector,\n equalityFn\n );\n useDebugValue(slice);\n return slice;\n}\nconst createWithEqualityFnImpl = (createState, defaultEqualityFn) => {\n const api = createStore(createState);\n const useBoundStoreWithEqualityFn = (selector, equalityFn = defaultEqualityFn) => useStoreWithEqualityFn(api, selector, equalityFn);\n Object.assign(useBoundStoreWithEqualityFn, api);\n return useBoundStoreWithEqualityFn;\n};\nconst createWithEqualityFn = (createState, defaultEqualityFn) => createState ? createWithEqualityFnImpl(createState, defaultEqualityFn) : createWithEqualityFnImpl;\n\nexport { createWithEqualityFn, useStoreWithEqualityFn };\n","function shallow$1(objA, objB) {\n if (Object.is(objA, objB)) {\n return true;\n }\n if (typeof objA !== \"object\" || objA === null || typeof objB !== \"object\" || objB === null) {\n return false;\n }\n if (objA instanceof Map && objB instanceof Map) {\n if (objA.size !== objB.size) return false;\n for (const [key, value] of objA) {\n if (!Object.is(value, objB.get(key))) {\n return false;\n }\n }\n return true;\n }\n if (objA instanceof Set && objB instanceof Set) {\n if (objA.size !== objB.size) return false;\n for (const value of objA) {\n if (!objB.has(value)) {\n return false;\n }\n }\n return true;\n }\n const keysA = Object.keys(objA);\n if (keysA.length !== Object.keys(objB).length) {\n return false;\n }\n for (const keyA of keysA) {\n if (!Object.prototype.hasOwnProperty.call(objB, keyA) || !Object.is(objA[keyA], objB[keyA])) {\n return false;\n }\n }\n return true;\n}\n\nvar shallow = (objA, objB) => {\n if ((import.meta.env ? import.meta.env.MODE : void 0) !== \"production\") {\n console.warn(\n \"[DEPRECATED] Default export is deprecated. Instead use `import { shallow } from 'zustand/shallow'`.\"\n );\n }\n return shallow$1(objA, objB);\n};\n\nexport { shallow as default, shallow$1 as shallow };\n","\"use client\"\nimport { jsxs, Fragment, jsx } from 'react/jsx-runtime';\nimport { createContext, useContext, useMemo, forwardRef, useEffect, useRef, useState, useLayoutEffect, useCallback, memo } from 'react';\nimport cc from 'classcat';\nimport { errorMessages, infiniteExtent, mergeAriaLabelConfig, isInputDOMNode, rendererPointToPoint, pointToRendererPoint, getViewportForBounds, createDevWarn, addEdge as addEdge$1, reconnectEdge as reconnectEdge$1, isNodeBase, isEdgeBase, withResolvers, getNodesBounds, isRectObject, getOverlappingArea, nodeToRect, getElementsToRemove, evaluateAbsolutePosition, getDimensions, XYPanZoom, PanOnScrollMode, SelectionMode, getEventPosition, calcAutoPan, getNodesInside, areSetsEqual, XYDrag, snapPosition, calculateNodePosition, Position, ConnectionMode, getHostForElement, XYHandle, isMouseEvent, getInternalNodesBounds, isNumeric, nodeHasDimensions, getNodeDimensions, elementSelectionKeys, isEdgeVisible, MarkerType, createMarkerIds, getBezierEdgeCenter, getSmoothStepPath, getStraightPath, getBezierPath, getEdgePosition, getElevatedEdgeZIndex, getMarkerId, getConnectionStatus, ConnectionLineType, updateConnectionLookup, adoptUserNodes, defaultAriaLabelConfig, initialConnection, panBy, getHandlePosition, handleExpandParent, updateNodeInternals, updateAbsolutePositions, fitViewport, isMacOs, areConnectionMapsEqual, handleConnectionChange, shallowNodeData, XYMinimap, getBoundsOfRects, ResizeControlVariant, XYResizer, XY_RESIZER_LINE_POSITIONS, XY_RESIZER_HANDLE_POSITIONS, getNodeToolbarTransform, getEdgeToolbarTransform } from '@xyflow/system';\nexport { ConnectionLineType, ConnectionMode, MarkerType, PanOnScrollMode, Position, ResizeControlVariant, SelectionMode, getBezierEdgeCenter, getBezierPath, getConnectedEdges, getEdgeCenter, getIncomers, getNodesBounds, getOutgoers, getSmoothStepPath, getStraightPath, getViewportForBounds } from '@xyflow/system';\nimport { useStoreWithEqualityFn, createWithEqualityFn } from 'zustand/traditional';\nimport { shallow } from 'zustand/shallow';\nimport { createPortal } from 'react-dom';\n\nconst StoreContext = createContext(null);\nconst Provider$1 = StoreContext.Provider;\n\nconst zustandErrorMessage = errorMessages['error001']('react');\n/**\n * This hook can be used to subscribe to internal state changes of the React Flow\n * component. The `useStore` hook is re-exported from the [Zustand](https://github.com/pmndrs/zustand)\n * state management library, so you should check out their docs for more details.\n *\n * @public\n * @param selector - A selector function that returns a slice of the flow's internal state.\n * Extracting or transforming just the state you need is a good practice to avoid unnecessary\n * re-renders.\n * @param equalityFn - A function to compare the previous and next value. This is incredibly useful\n * for preventing unnecessary re-renders. Good sensible defaults are using `Object.is` or importing\n * `zustand/shallow`, but you can be as granular as you like.\n * @returns The selected state slice.\n *\n * @example\n * ```ts\n * const nodes = useStore((state) => state.nodes);\n * ```\n *\n * @remarks This hook should only be used if there is no other way to access the internal\n * state. For many of the common use cases, there are dedicated hooks available\n * such as {@link useReactFlow}, {@link useViewport}, etc.\n */\nfunction useStore(selector, equalityFn) {\n const store = useContext(StoreContext);\n if (store === null) {\n throw new Error(zustandErrorMessage);\n }\n return useStoreWithEqualityFn(store, selector, equalityFn);\n}\n/**\n * In some cases, you might need to access the store directly. This hook returns the store object which can be used on demand to access the state or dispatch actions.\n *\n * @returns The store object.\n * @example\n * ```ts\n * const store = useStoreApi();\n * ```\n *\n * @remarks This hook should only be used if there is no other way to access the internal\n * state. For many of the common use cases, there are dedicated hooks available\n * such as {@link useReactFlow}, {@link useViewport}, etc.\n */\nfunction useStoreApi() {\n const store = useContext(StoreContext);\n if (store === null) {\n throw new Error(zustandErrorMessage);\n }\n return useMemo(() => ({\n getState: store.getState,\n setState: store.setState,\n subscribe: store.subscribe,\n }), [store]);\n}\n\nconst style = { display: 'none' };\nconst ariaLiveStyle = {\n position: 'absolute',\n width: 1,\n height: 1,\n margin: -1,\n border: 0,\n padding: 0,\n overflow: 'hidden',\n clip: 'rect(0px, 0px, 0px, 0px)',\n clipPath: 'inset(100%)',\n};\nconst ARIA_NODE_DESC_KEY = 'react-flow__node-desc';\nconst ARIA_EDGE_DESC_KEY = 'react-flow__edge-desc';\nconst ARIA_LIVE_MESSAGE = 'react-flow__aria-live';\nconst ariaLiveSelector = (s) => s.ariaLiveMessage;\nconst ariaLabelConfigSelector = (s) => s.ariaLabelConfig;\nfunction AriaLiveMessage({ rfId }) {\n const ariaLiveMessage = useStore(ariaLiveSelector);\n return (jsx(\"div\", { id: `${ARIA_LIVE_MESSAGE}-${rfId}`, \"aria-live\": \"assertive\", \"aria-atomic\": \"true\", style: ariaLiveStyle, children: ariaLiveMessage }));\n}\nfunction A11yDescriptions({ rfId, disableKeyboardA11y }) {\n const ariaLabelConfig = useStore(ariaLabelConfigSelector);\n return (jsxs(Fragment, { children: [jsx(\"div\", { id: `${ARIA_NODE_DESC_KEY}-${rfId}`, style: style, children: disableKeyboardA11y\n ? ariaLabelConfig['node.a11yDescription.default']\n : ariaLabelConfig['node.a11yDescription.keyboardDisabled'] }), jsx(\"div\", { id: `${ARIA_EDGE_DESC_KEY}-${rfId}`, style: style, children: ariaLabelConfig['edge.a11yDescription.default'] }), !disableKeyboardA11y && jsx(AriaLiveMessage, { rfId: rfId })] }));\n}\n\n/**\n * The `` component helps you position content above the viewport.\n * It is used internally by the [``](/api-reference/components/minimap)\n * and [``](/api-reference/components/controls) components.\n *\n * @public\n *\n * @example\n * ```jsx\n *import { ReactFlow, Background, Panel } from '@xyflow/react';\n *\n *export default function Flow() {\n * return (\n * \n * top-left\n * top-center\n * top-right\n * bottom-left\n * bottom-center\n * bottom-right\n * \n * );\n *}\n *```\n */\nconst Panel = forwardRef(({ position = 'top-left', children, className, style, ...rest }, ref) => {\n const positionClasses = `${position}`.split('-');\n return (jsx(\"div\", { className: cc(['react-flow__panel', className, ...positionClasses]), style: style, ref: ref, ...rest, children: children }));\n});\nPanel.displayName = 'Panel';\n\nfunction Attribution({ proOptions, position = 'bottom-right' }) {\n if (proOptions?.hideAttribution) {\n return null;\n }\n return (jsx(Panel, { position: position, className: \"react-flow__attribution\", \"data-message\": \"Please only hide this attribution when you are subscribed to React Flow Pro: https://pro.reactflow.dev\", children: jsx(\"a\", { href: \"https://reactflow.dev\", target: \"_blank\", rel: \"noopener noreferrer\", \"aria-label\": \"React Flow attribution\", children: \"React Flow\" }) }));\n}\n\nconst selector$m = (s) => {\n const selectedNodes = [];\n const selectedEdges = [];\n for (const [, node] of s.nodeLookup) {\n if (node.selected) {\n selectedNodes.push(node.internals.userNode);\n }\n }\n for (const [, edge] of s.edgeLookup) {\n if (edge.selected) {\n selectedEdges.push(edge);\n }\n }\n return { selectedNodes, selectedEdges };\n};\nconst selectId = (obj) => obj.id;\nfunction areEqual(a, b) {\n return (shallow(a.selectedNodes.map(selectId), b.selectedNodes.map(selectId)) &&\n shallow(a.selectedEdges.map(selectId), b.selectedEdges.map(selectId)));\n}\nfunction SelectionListenerInner({ onSelectionChange, }) {\n const store = useStoreApi();\n const { selectedNodes, selectedEdges } = useStore(selector$m, areEqual);\n useEffect(() => {\n const params = { nodes: selectedNodes, edges: selectedEdges };\n onSelectionChange?.(params);\n store.getState().onSelectionChangeHandlers.forEach((fn) => fn(params));\n }, [selectedNodes, selectedEdges, onSelectionChange]);\n return null;\n}\nconst changeSelector = (s) => !!s.onSelectionChangeHandlers;\nfunction SelectionListener({ onSelectionChange, }) {\n const storeHasSelectionChangeHandlers = useStore(changeSelector);\n if (onSelectionChange || storeHasSelectionChangeHandlers) {\n return jsx(SelectionListenerInner, { onSelectionChange: onSelectionChange });\n }\n return null;\n}\n\nconst defaultNodeOrigin = [0, 0];\nconst defaultViewport = { x: 0, y: 0, zoom: 1 };\n\n/*\n * This component helps us to update the store with the values coming from the user.\n * We distinguish between values we can update directly with `useDirectStoreUpdater` (like `snapGrid`)\n * and values that have a dedicated setter function in the store (like `setNodes`).\n */\n// These fields exist in the global store, and we need to keep them up to date\nconst reactFlowFieldsToTrack = [\n 'nodes',\n 'edges',\n 'defaultNodes',\n 'defaultEdges',\n 'onConnect',\n 'onConnectStart',\n 'onConnectEnd',\n 'onClickConnectStart',\n 'onClickConnectEnd',\n 'nodesDraggable',\n 'autoPanOnNodeFocus',\n 'nodesConnectable',\n 'nodesFocusable',\n 'edgesFocusable',\n 'edgesReconnectable',\n 'elevateNodesOnSelect',\n 'elevateEdgesOnSelect',\n 'minZoom',\n 'maxZoom',\n 'nodeExtent',\n 'onNodesChange',\n 'onEdgesChange',\n 'elementsSelectable',\n 'connectionMode',\n 'snapGrid',\n 'snapToGrid',\n 'translateExtent',\n 'connectOnClick',\n 'defaultEdgeOptions',\n 'fitView',\n 'fitViewOptions',\n 'onNodesDelete',\n 'onEdgesDelete',\n 'onDelete',\n 'onNodeDrag',\n 'onNodeDragStart',\n 'onNodeDragStop',\n 'onSelectionDrag',\n 'onSelectionDragStart',\n 'onSelectionDragStop',\n 'onMoveStart',\n 'onMove',\n 'onMoveEnd',\n 'noPanClassName',\n 'nodeOrigin',\n 'autoPanOnConnect',\n 'autoPanOnNodeDrag',\n 'onError',\n 'connectionRadius',\n 'isValidConnection',\n 'selectNodesOnDrag',\n 'nodeDragThreshold',\n 'connectionDragThreshold',\n 'onBeforeDelete',\n 'debug',\n 'autoPanSpeed',\n 'ariaLabelConfig',\n 'zIndexMode',\n];\n// rfId doesn't exist in ReactFlowProps, but it's one of the fields we want to update\nconst fieldsToTrack = [...reactFlowFieldsToTrack, 'rfId'];\nconst selector$l = (s) => ({\n setNodes: s.setNodes,\n setEdges: s.setEdges,\n setMinZoom: s.setMinZoom,\n setMaxZoom: s.setMaxZoom,\n setTranslateExtent: s.setTranslateExtent,\n setNodeExtent: s.setNodeExtent,\n reset: s.reset,\n setDefaultNodesAndEdges: s.setDefaultNodesAndEdges,\n});\nconst initPrevValues = {\n /*\n * these are values that are also passed directly to other components\n * than the StoreUpdater. We can reduce the number of setStore calls\n * by setting the same values here as prev fields.\n */\n translateExtent: infiniteExtent,\n nodeOrigin: defaultNodeOrigin,\n minZoom: 0.5,\n maxZoom: 2,\n elementsSelectable: true,\n noPanClassName: 'nopan',\n rfId: '1',\n};\nfunction StoreUpdater(props) {\n const { setNodes, setEdges, setMinZoom, setMaxZoom, setTranslateExtent, setNodeExtent, reset, setDefaultNodesAndEdges, } = useStore(selector$l, shallow);\n const store = useStoreApi();\n useEffect(() => {\n setDefaultNodesAndEdges(props.defaultNodes, props.defaultEdges);\n return () => {\n // when we reset the store we also need to reset the previous fields\n previousFields.current = initPrevValues;\n reset();\n };\n }, []);\n const previousFields = useRef(initPrevValues);\n useEffect(() => {\n for (const fieldName of fieldsToTrack) {\n const fieldValue = props[fieldName];\n const previousFieldValue = previousFields.current[fieldName];\n if (fieldValue === previousFieldValue)\n continue;\n if (typeof props[fieldName] === 'undefined')\n continue;\n // Custom handling with dedicated setters for some fields\n if (fieldName === 'nodes')\n setNodes(fieldValue);\n else if (fieldName === 'edges')\n setEdges(fieldValue);\n else if (fieldName === 'minZoom')\n setMinZoom(fieldValue);\n else if (fieldName === 'maxZoom')\n setMaxZoom(fieldValue);\n else if (fieldName === 'translateExtent')\n setTranslateExtent(fieldValue);\n else if (fieldName === 'nodeExtent')\n setNodeExtent(fieldValue);\n else if (fieldName === 'ariaLabelConfig')\n store.setState({ ariaLabelConfig: mergeAriaLabelConfig(fieldValue) });\n // Renamed fields\n else if (fieldName === 'fitView')\n store.setState({ fitViewQueued: fieldValue });\n else if (fieldName === 'fitViewOptions')\n store.setState({ fitViewOptions: fieldValue });\n // General case\n else\n store.setState({ [fieldName]: fieldValue });\n }\n previousFields.current = props;\n }, \n // Only re-run the effect if one of the fields we track changes\n fieldsToTrack.map((fieldName) => props[fieldName]));\n return null;\n}\n\nfunction getMediaQuery() {\n if (typeof window === 'undefined' || !window.matchMedia) {\n return null;\n }\n return window.matchMedia('(prefers-color-scheme: dark)');\n}\n/**\n * Hook for receiving the current color mode class 'dark' or 'light'.\n *\n * @internal\n * @param colorMode - The color mode to use ('dark', 'light' or 'system')\n */\nfunction useColorModeClass(colorMode) {\n const [colorModeClass, setColorModeClass] = useState(colorMode === 'system' ? null : colorMode);\n useEffect(() => {\n if (colorMode !== 'system') {\n setColorModeClass(colorMode);\n return;\n }\n const mediaQuery = getMediaQuery();\n const updateColorModeClass = () => setColorModeClass(mediaQuery?.matches ? 'dark' : 'light');\n updateColorModeClass();\n mediaQuery?.addEventListener('change', updateColorModeClass);\n return () => {\n mediaQuery?.removeEventListener('change', updateColorModeClass);\n };\n }, [colorMode]);\n return colorModeClass !== null ? colorModeClass : getMediaQuery()?.matches ? 'dark' : 'light';\n}\n\nconst defaultDoc = typeof document !== 'undefined' ? document : null;\n/**\n * This hook lets you listen for specific key codes and tells you whether they are\n * currently pressed or not.\n *\n * @public\n * @param options - Options\n *\n * @example\n * ```tsx\n *import { useKeyPress } from '@xyflow/react';\n *\n *export default function () {\n * const spacePressed = useKeyPress('Space');\n * const cmdAndSPressed = useKeyPress(['Meta+s', 'Strg+s']);\n *\n * return (\n *
\n * {spacePressed &&
Space pressed!
}\n * {cmdAndSPressed &&
Cmd + S pressed!
}\n *
\n * );\n *}\n *```\n */\nfunction useKeyPress(\n/**\n * The key code (string or array of strings) specifies which key(s) should trigger\n * an action.\n *\n * A **string** can represent:\n * - A **single key**, e.g. `'a'`\n * - A **key combination**, using `'+'` to separate keys, e.g. `'a+d'`\n *\n * An **array of strings** represents **multiple possible key inputs**. For example, `['a', 'd+s']`\n * means the user can press either the single key `'a'` or the combination of `'d'` and `'s'`.\n * @default null\n */\nkeyCode = null, options = { target: defaultDoc, actInsideInputWithModifier: true }) {\n const [keyPressed, setKeyPressed] = useState(false);\n // we need to remember if a modifier key is pressed in order to track it\n const modifierPressed = useRef(false);\n // we need to remember the pressed keys in order to support combinations\n const pressedKeys = useRef(new Set([]));\n /*\n * keyCodes = array with single keys [['a']] or key combinations [['a', 's']]\n * keysToWatch = array with all keys flattened ['a', 'd', 'ShiftLeft']\n * used to check if we store event.code or event.key. When the code is in the list of keysToWatch\n * we use the code otherwise the key. Explainer: When you press the left \"command\" key, the code is \"MetaLeft\"\n * and the key is \"Meta\". We want users to be able to pass keys and codes so we assume that the key is meant when\n * we can't find it in the list of keysToWatch.\n */\n const [keyCodes, keysToWatch] = useMemo(() => {\n if (keyCode !== null) {\n const keyCodeArr = Array.isArray(keyCode) ? keyCode : [keyCode];\n const keys = keyCodeArr\n .filter((kc) => typeof kc === 'string')\n /*\n * we first replace all '+' with '\\n' which we will use to split the keys on\n * then we replace '\\n\\n' with '\\n+', this way we can also support the combination 'key++'\n * in the end we simply split on '\\n' to get the key array\n */\n .map((kc) => kc.replace('+', '\\n').replace('\\n\\n', '\\n+').split('\\n'));\n const keysFlat = keys.reduce((res, item) => res.concat(...item), []);\n return [keys, keysFlat];\n }\n return [[], []];\n }, [keyCode]);\n useEffect(() => {\n const target = options?.target ?? defaultDoc;\n const actInsideInputWithModifier = options?.actInsideInputWithModifier ?? true;\n if (keyCode !== null) {\n const downHandler = (event) => {\n modifierPressed.current = event.ctrlKey || event.metaKey || event.shiftKey || event.altKey;\n const preventAction = (!modifierPressed.current || (modifierPressed.current && !actInsideInputWithModifier)) &&\n isInputDOMNode(event);\n if (preventAction) {\n return false;\n }\n const keyOrCode = useKeyOrCode(event.code, keysToWatch);\n pressedKeys.current.add(event[keyOrCode]);\n if (isMatchingKey(keyCodes, pressedKeys.current, false)) {\n const target = (event.composedPath?.()?.[0] || event.target);\n const isInteractiveElement = target?.nodeName === 'BUTTON' || target?.nodeName === 'A';\n if (options.preventDefault !== false && (modifierPressed.current || !isInteractiveElement)) {\n event.preventDefault();\n }\n setKeyPressed(true);\n }\n };\n const upHandler = (event) => {\n const keyOrCode = useKeyOrCode(event.code, keysToWatch);\n if (isMatchingKey(keyCodes, pressedKeys.current, true)) {\n setKeyPressed(false);\n pressedKeys.current.clear();\n }\n else {\n pressedKeys.current.delete(event[keyOrCode]);\n }\n // fix for Mac: when cmd key is pressed, keyup is not triggered for any other key, see: https://stackoverflow.com/questions/27380018/when-cmd-key-is-kept-pressed-keyup-is-not-triggered-for-any-other-key\n if (event.key === 'Meta') {\n pressedKeys.current.clear();\n }\n modifierPressed.current = false;\n };\n const resetHandler = () => {\n pressedKeys.current.clear();\n setKeyPressed(false);\n };\n target?.addEventListener('keydown', downHandler);\n target?.addEventListener('keyup', upHandler);\n window.addEventListener('blur', resetHandler);\n window.addEventListener('contextmenu', resetHandler);\n return () => {\n target?.removeEventListener('keydown', downHandler);\n target?.removeEventListener('keyup', upHandler);\n window.removeEventListener('blur', resetHandler);\n window.removeEventListener('contextmenu', resetHandler);\n };\n }\n }, [keyCode, setKeyPressed]);\n return keyPressed;\n}\n// utils\nfunction isMatchingKey(keyCodes, pressedKeys, isUp) {\n return (keyCodes\n /*\n * we only want to compare same sizes of keyCode definitions\n * and pressed keys. When the user specified 'Meta' as a key somewhere\n * this would also be truthy without this filter when user presses 'Meta' + 'r'\n */\n .filter((keys) => isUp || keys.length === pressedKeys.size)\n /*\n * since we want to support multiple possibilities only one of the\n * combinations need to be part of the pressed keys\n */\n .some((keys) => keys.every((k) => pressedKeys.has(k))));\n}\nfunction useKeyOrCode(eventCode, keysToWatch) {\n return keysToWatch.includes(eventCode) ? 'code' : 'key';\n}\n\n/**\n * Hook for getting viewport helper functions.\n *\n * @internal\n * @returns viewport helper functions\n */\nconst useViewportHelper = () => {\n const store = useStoreApi();\n return useMemo(() => {\n return {\n zoomIn: async (options) => {\n const { panZoom } = store.getState();\n return panZoom ? panZoom.scaleBy(1.2, options) : false;\n },\n zoomOut: async (options) => {\n const { panZoom } = store.getState();\n return panZoom ? panZoom.scaleBy(1 / 1.2, options) : false;\n },\n zoomTo: async (zoomLevel, options) => {\n const { panZoom } = store.getState();\n return panZoom ? panZoom.scaleTo(zoomLevel, options) : false;\n },\n getZoom: () => store.getState().transform[2],\n setViewport: async (viewport, options) => {\n const { transform: [tX, tY, tZoom], panZoom, } = store.getState();\n if (!panZoom) {\n return false;\n }\n await panZoom.setViewport({\n x: viewport.x ?? tX,\n y: viewport.y ?? tY,\n zoom: viewport.zoom ?? tZoom,\n }, options);\n return true;\n },\n getViewport: () => {\n const [x, y, zoom] = store.getState().transform;\n return { x, y, zoom };\n },\n setCenter: async (x, y, options) => {\n return store.getState().setCenter(x, y, options);\n },\n fitBounds: async (bounds, options) => {\n const { width, height, minZoom, maxZoom, panZoom } = store.getState();\n const viewport = getViewportForBounds(bounds, width, height, minZoom, maxZoom, options?.padding ?? 0.1);\n if (!panZoom) {\n return false;\n }\n await panZoom.setViewport(viewport, {\n duration: options?.duration,\n ease: options?.ease,\n interpolate: options?.interpolate,\n });\n return true;\n },\n screenToFlowPosition: (clientPosition, options = {}) => {\n const { transform, snapGrid, snapToGrid, domNode } = store.getState();\n if (!domNode) {\n return clientPosition;\n }\n const { x: domX, y: domY } = domNode.getBoundingClientRect();\n const correctedPosition = {\n x: clientPosition.x - domX,\n y: clientPosition.y - domY,\n };\n const _snapGrid = options.snapGrid ?? snapGrid;\n const _snapToGrid = options.snapToGrid ?? snapToGrid;\n return pointToRendererPoint(correctedPosition, transform, _snapToGrid, _snapGrid);\n },\n flowToScreenPosition: (flowPosition) => {\n const { transform, domNode } = store.getState();\n if (!domNode) {\n return flowPosition;\n }\n const { x: domX, y: domY } = domNode.getBoundingClientRect();\n const rendererPosition = rendererPointToPoint(flowPosition, transform);\n return {\n x: rendererPosition.x + domX,\n y: rendererPosition.y + domY,\n };\n },\n };\n }, []);\n};\n\n/*\n * This function applies changes to nodes or edges that are triggered by React Flow internally.\n * When you drag a node for example, React Flow will send a position change update.\n * This function then applies the changes and returns the updated elements.\n */\nfunction applyChanges(changes, elements) {\n const updatedElements = [];\n /*\n * By storing a map of changes for each element, we can a quick lookup as we\n * iterate over the elements array!\n */\n const changesMap = new Map();\n const addItemChanges = [];\n for (const change of changes) {\n if (change.type === 'add') {\n addItemChanges.push(change);\n continue;\n }\n else if (change.type === 'remove' || change.type === 'replace') {\n /*\n * For a 'remove' change we can safely ignore any other changes queued for\n * the same element, it's going to be removed anyway!\n */\n changesMap.set(change.id, [change]);\n }\n else {\n const elementChanges = changesMap.get(change.id);\n if (elementChanges) {\n /*\n * If we have some changes queued already, we can do a mutable update of\n * that array and save ourselves some copying.\n */\n elementChanges.push(change);\n }\n else {\n changesMap.set(change.id, [change]);\n }\n }\n }\n for (const element of elements) {\n const changes = changesMap.get(element.id);\n /*\n * When there are no changes for an element we can just push it unmodified,\n * no need to copy it.\n */\n if (!changes) {\n updatedElements.push(element);\n continue;\n }\n // If we have a 'remove' change queued, it'll be the only change in the array\n if (changes[0].type === 'remove') {\n continue;\n }\n if (changes[0].type === 'replace') {\n updatedElements.push({ ...changes[0].item });\n continue;\n }\n /**\n * For other types of changes, we want to start with a shallow copy of the\n * object so React knows this element has changed. Sequential changes will\n * each _mutate_ this object, so there's only ever one copy.\n */\n const updatedElement = { ...element };\n for (const change of changes) {\n applyChange(change, updatedElement);\n }\n updatedElements.push(updatedElement);\n }\n /*\n * we need to wait for all changes to be applied before adding new items\n * to be able to add them at the correct index\n */\n if (addItemChanges.length) {\n addItemChanges.forEach((change) => {\n if (change.index !== undefined) {\n updatedElements.splice(change.index, 0, { ...change.item });\n }\n else {\n updatedElements.push({ ...change.item });\n }\n });\n }\n return updatedElements;\n}\n// Applies a single change to an element. This is a *mutable* update.\nfunction applyChange(change, element) {\n switch (change.type) {\n case 'select': {\n element.selected = change.selected;\n break;\n }\n case 'position': {\n if (typeof change.position !== 'undefined') {\n element.position = change.position;\n }\n if (typeof change.dragging !== 'undefined') {\n element.dragging = change.dragging;\n }\n break;\n }\n case 'dimensions': {\n if (typeof change.dimensions !== 'undefined') {\n element.measured = {\n ...change.dimensions,\n };\n if (change.setAttributes) {\n if (change.setAttributes === true || change.setAttributes === 'width') {\n element.width = change.dimensions.width;\n }\n if (change.setAttributes === true || change.setAttributes === 'height') {\n element.height = change.dimensions.height;\n }\n }\n }\n if (typeof change.resizing === 'boolean') {\n element.resizing = change.resizing;\n }\n break;\n }\n }\n}\n/**\n * Drop in function that applies node changes to an array of nodes.\n * @public\n * @param changes - Array of changes to apply.\n * @param nodes - Array of nodes to apply the changes to.\n * @returns Array of updated nodes.\n * @example\n *```tsx\n *import { useState, useCallback } from 'react';\n *import { ReactFlow, applyNodeChanges, type Node, type Edge, type OnNodesChange } from '@xyflow/react';\n *\n *export default function Flow() {\n * const [nodes, setNodes] = useState([]);\n * const [edges, setEdges] = useState([]);\n * const onNodesChange: OnNodesChange = useCallback(\n * (changes) => {\n * setNodes((oldNodes) => applyNodeChanges(changes, oldNodes));\n * },\n * [setNodes],\n * );\n *\n * return (\n * \n * );\n *}\n *```\n * @remarks Various events on the component can produce an {@link NodeChange}\n * that describes how to update the edges of your flow in some way.\n * If you don't need any custom behaviour, this util can be used to take an array\n * of these changes and apply them to your edges.\n */\nfunction applyNodeChanges(changes, nodes) {\n return applyChanges(changes, nodes);\n}\n/**\n * Drop in function that applies edge changes to an array of edges.\n * @public\n * @param changes - Array of changes to apply.\n * @param edges - Array of edge to apply the changes to.\n * @returns Array of updated edges.\n * @example\n * ```tsx\n *import { useState, useCallback } from 'react';\n *import { ReactFlow, applyEdgeChanges } from '@xyflow/react';\n *\n *export default function Flow() {\n * const [nodes, setNodes] = useState([]);\n * const [edges, setEdges] = useState([]);\n * const onEdgesChange = useCallback(\n * (changes) => {\n * setEdges((oldEdges) => applyEdgeChanges(changes, oldEdges));\n * },\n * [setEdges],\n * );\n *\n * return (\n * \n * );\n *}\n *```\n * @remarks Various events on the component can produce an {@link EdgeChange}\n * that describes how to update the edges of your flow in some way.\n * If you don't need any custom behaviour, this util can be used to take an array\n * of these changes and apply them to your edges.\n */\nfunction applyEdgeChanges(changes, edges) {\n return applyChanges(changes, edges);\n}\nfunction createSelectionChange(id, selected) {\n return {\n id,\n type: 'select',\n selected,\n };\n}\nfunction getSelectionChanges(items, selectedIds = new Set(), mutateItem = false) {\n const changes = [];\n for (const [id, item] of items) {\n const willBeSelected = selectedIds.has(id);\n // we don't want to set all items to selected=false on the first selection\n if (!(item.selected === undefined && !willBeSelected) && item.selected !== willBeSelected) {\n if (mutateItem) {\n /*\n * this hack is needed for nodes. When the user dragged a node, it's selected.\n * When another node gets dragged, we need to deselect the previous one,\n * in order to have only one selected node at a time - the onNodesChange callback comes too late here :/\n */\n item.selected = willBeSelected;\n }\n changes.push(createSelectionChange(item.id, willBeSelected));\n }\n }\n return changes;\n}\nfunction getElementsDiffChanges({ items = [], lookup, }) {\n const changes = [];\n const itemsLookup = new Map(items.map((item) => [item.id, item]));\n for (const [index, item] of items.entries()) {\n const lookupItem = lookup.get(item.id);\n const storeItem = lookupItem?.internals?.userNode ?? lookupItem;\n if (storeItem !== undefined && storeItem !== item) {\n changes.push({ id: item.id, item: item, type: 'replace' });\n }\n if (storeItem === undefined) {\n changes.push({ item: item, type: 'add', index });\n }\n }\n for (const [id] of lookup) {\n const nextNode = itemsLookup.get(id);\n if (nextNode === undefined) {\n changes.push({ id, type: 'remove' });\n }\n }\n return changes;\n}\nfunction elementToRemoveChange(item) {\n return {\n id: item.id,\n type: 'remove',\n };\n}\n\nconst defaultOnError = createDevWarn('React Flow', 'https://reactflow.dev/');\nfunction addEdge(edgeParams, edges, options = {}) {\n return addEdge$1(edgeParams, edges, {\n ...options,\n onError: options.onError ?? defaultOnError,\n });\n}\nfunction reconnectEdge(oldEdge, newConnection, edges, options = { shouldReplaceId: true }) {\n return reconnectEdge$1(oldEdge, newConnection, edges, {\n ...options,\n onError: options.onError ?? defaultOnError,\n });\n}\n\n/**\n * Test whether an object is usable as an [`Node`](/api-reference/types/node).\n * In TypeScript this is a type guard that will narrow the type of whatever you pass in to\n * [`Node`](/api-reference/types/node) if it returns `true`.\n *\n * @public\n * @remarks In TypeScript this is a type guard that will narrow the type of whatever you pass in to Node if it returns true\n * @param element - The element to test.\n * @returns Tests whether the provided value can be used as a `Node`. If you're using TypeScript,\n * this function acts as a type guard and will narrow the type of the value to `Node` if it returns\n * `true`.\n *\n * @example\n * ```js\n *import { isNode } from '@xyflow/react';\n *\n *if (isNode(node)) {\n * // ...\n *}\n *```\n */\nconst isNode = (element) => isNodeBase(element);\n/**\n * Test whether an object is usable as an [`Edge`](/api-reference/types/edge).\n * In TypeScript this is a type guard that will narrow the type of whatever you pass in to\n * [`Edge`](/api-reference/types/edge) if it returns `true`.\n *\n * @public\n * @remarks In TypeScript this is a type guard that will narrow the type of whatever you pass in to Edge if it returns true\n * @param element - The element to test\n * @returns Tests whether the provided value can be used as an `Edge`. If you're using TypeScript,\n * this function acts as a type guard and will narrow the type of the value to `Edge` if it returns\n * `true`.\n *\n * @example\n * ```js\n *import { isEdge } from '@xyflow/react';\n *\n *if (isEdge(edge)) {\n * // ...\n *}\n *```\n */\nconst isEdge = (element) => isEdgeBase(element);\n// eslint-disable-next-line @typescript-eslint/no-empty-object-type\nfunction fixedForwardRef(render) {\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n return forwardRef(render);\n}\n\n// we need this hook to prevent a warning when using react-flow in SSR\nconst useIsomorphicLayoutEffect = typeof window !== 'undefined' ? useLayoutEffect : useEffect;\n\n/**\n * This hook returns a queue that can be used to batch updates.\n *\n * @param runQueue - a function that gets called when the queue is flushed\n * @internal\n *\n * @returns a Queue object\n */\nfunction useQueue(runQueue) {\n /*\n * Because we're using a ref above, we need some way to let React know when to\n * actually process the queue. We increment this number any time we mutate the\n * queue, creating a new state to trigger the layout effect below.\n * Using a boolean dirty flag here instead would lead to issues related to\n * automatic batching. (https://github.com/xyflow/xyflow/issues/4779)\n */\n const [serial, setSerial] = useState(BigInt(0));\n /*\n * A reference of all the batched updates to process before the next render. We\n * want a reference here so multiple synchronous calls to `setNodes` etc can be\n * batched together.\n */\n const [queue] = useState(() => createQueue(() => setSerial(n => n + BigInt(1))));\n /*\n * Layout effects are guaranteed to run before the next render which means we\n * shouldn't run into any issues with stale state or weird issues that come from\n * rendering things one frame later than expected (we used to use `setTimeout`).\n */\n useIsomorphicLayoutEffect(() => {\n const queueItems = queue.get();\n if (queueItems.length) {\n runQueue(queueItems);\n queue.reset();\n }\n }, [serial]);\n return queue;\n}\nfunction createQueue(cb) {\n let queue = [];\n return {\n get: () => queue,\n reset: () => {\n queue = [];\n },\n push: (item) => {\n queue.push(item);\n cb();\n },\n };\n}\n\nconst BatchContext = createContext(null);\n/**\n * This is a context provider that holds and processes the node and edge update queues\n * that are needed to handle setNodes, addNodes, setEdges and addEdges.\n *\n * @internal\n */\nfunction BatchProvider({ children, }) {\n const store = useStoreApi();\n const nodeQueueHandler = useCallback((queueItems) => {\n const { nodes = [], setNodes, hasDefaultNodes, onNodesChange, nodeLookup, fitViewQueued, onNodesChangeMiddlewareMap, } = store.getState();\n /*\n * This is essentially an `Array.reduce` in imperative clothing. Processing\n * this queue is a relatively hot path so we'd like to avoid the overhead of\n * array methods where we can.\n */\n let next = nodes;\n for (const payload of queueItems) {\n next = typeof payload === 'function' ? payload(next) : payload;\n }\n let changes = getElementsDiffChanges({\n items: next,\n lookup: nodeLookup,\n });\n for (const middleware of onNodesChangeMiddlewareMap.values()) {\n changes = middleware(changes);\n }\n if (hasDefaultNodes) {\n setNodes(next);\n }\n // We only want to fire onNodesChange if there are changes to the nodes\n if (changes.length > 0) {\n onNodesChange?.(changes);\n }\n else if (fitViewQueued) {\n // If there are no changes to the nodes, we still need to call setNodes\n // to trigger a re-render and fitView.\n window.requestAnimationFrame(() => {\n const { fitViewQueued, nodes, setNodes } = store.getState();\n if (fitViewQueued) {\n setNodes(nodes);\n }\n });\n }\n }, []);\n const nodeQueue = useQueue(nodeQueueHandler);\n const edgeQueueHandler = useCallback((queueItems) => {\n const { edges = [], setEdges, hasDefaultEdges, onEdgesChange, edgeLookup } = store.getState();\n let next = edges;\n for (const payload of queueItems) {\n next = typeof payload === 'function' ? payload(next) : payload;\n }\n if (hasDefaultEdges) {\n setEdges(next);\n }\n else if (onEdgesChange) {\n onEdgesChange(getElementsDiffChanges({\n items: next,\n lookup: edgeLookup,\n }));\n }\n }, []);\n const edgeQueue = useQueue(edgeQueueHandler);\n const value = useMemo(() => ({ nodeQueue, edgeQueue }), []);\n return jsx(BatchContext.Provider, { value: value, children: children });\n}\nfunction useBatchContext() {\n const batchContext = useContext(BatchContext);\n if (!batchContext) {\n throw new Error('useBatchContext must be used within a BatchProvider');\n }\n return batchContext;\n}\n\nconst selector$k = (s) => !!s.panZoom;\n/**\n * This hook returns a ReactFlowInstance that can be used to update nodes and edges, manipulate the viewport, or query the current state of the flow.\n *\n * @public\n * @example\n * ```jsx\n *import { useCallback, useState } from 'react';\n *import { useReactFlow } from '@xyflow/react';\n *\n *export function NodeCounter() {\n * const reactFlow = useReactFlow();\n * const [count, setCount] = useState(0);\n * const countNodes = useCallback(() => {\n * setCount(reactFlow.getNodes().length);\n * // you need to pass it as a dependency if you are using it with useEffect or useCallback\n * // because at the first render, it's not initialized yet and some functions might not work.\n * }, [reactFlow]);\n *\n * return (\n *
\n * \n *
There are {count} nodes in the flow.
\n *
\n * );\n *}\n *```\n */\nfunction useReactFlow() {\n const viewportHelper = useViewportHelper();\n const store = useStoreApi();\n const batchContext = useBatchContext();\n const viewportInitialized = useStore(selector$k);\n const generalHelper = useMemo(() => {\n const getInternalNode = (id) => store.getState().nodeLookup.get(id);\n const setNodes = (payload) => {\n batchContext.nodeQueue.push(payload);\n };\n const setEdges = (payload) => {\n batchContext.edgeQueue.push(payload);\n };\n const getNodeRect = (node) => {\n const { nodeLookup, nodeOrigin } = store.getState();\n const nodeToUse = isNode(node) ? node : nodeLookup.get(node.id);\n const position = nodeToUse.parentId\n ? evaluateAbsolutePosition(nodeToUse.position, nodeToUse.measured, nodeToUse.parentId, nodeLookup, nodeOrigin)\n : nodeToUse.position;\n const nodeWithPosition = {\n ...nodeToUse,\n position,\n width: nodeToUse.measured?.width ?? nodeToUse.width,\n height: nodeToUse.measured?.height ?? nodeToUse.height,\n };\n return nodeToRect(nodeWithPosition);\n };\n const updateNode = (id, nodeUpdate, options = { replace: false }) => {\n setNodes((prevNodes) => prevNodes.map((node) => {\n if (node.id === id) {\n const nextNode = typeof nodeUpdate === 'function' ? nodeUpdate(node) : nodeUpdate;\n return options.replace && isNode(nextNode) ? nextNode : { ...node, ...nextNode };\n }\n return node;\n }));\n };\n const updateEdge = (id, edgeUpdate, options = { replace: false }) => {\n setEdges((prevEdges) => prevEdges.map((edge) => {\n if (edge.id === id) {\n const nextEdge = typeof edgeUpdate === 'function' ? edgeUpdate(edge) : edgeUpdate;\n return options.replace && isEdge(nextEdge) ? nextEdge : { ...edge, ...nextEdge };\n }\n return edge;\n }));\n };\n return {\n getNodes: () => store.getState().nodes.map((n) => ({ ...n })),\n getNode: (id) => getInternalNode(id)?.internals.userNode,\n getInternalNode,\n getEdges: () => {\n const { edges = [] } = store.getState();\n return edges.map((e) => ({ ...e }));\n },\n getEdge: (id) => store.getState().edgeLookup.get(id),\n setNodes,\n setEdges,\n addNodes: (payload) => {\n const newNodes = Array.isArray(payload) ? payload : [payload];\n batchContext.nodeQueue.push((nodes) => [...nodes, ...newNodes]);\n },\n addEdges: (payload) => {\n const newEdges = Array.isArray(payload) ? payload : [payload];\n batchContext.edgeQueue.push((edges) => [...edges, ...newEdges]);\n },\n toObject: () => {\n const { nodes = [], edges = [], transform } = store.getState();\n const [x, y, zoom] = transform;\n return {\n nodes: nodes.map((n) => ({ ...n })),\n edges: edges.map((e) => ({ ...e })),\n viewport: {\n x,\n y,\n zoom,\n },\n };\n },\n deleteElements: async ({ nodes: nodesToRemove = [], edges: edgesToRemove = [] }) => {\n const { nodes, edges, onNodesDelete, onEdgesDelete, triggerNodeChanges, triggerEdgeChanges, onDelete, onBeforeDelete, } = store.getState();\n const { nodes: matchingNodes, edges: matchingEdges } = await getElementsToRemove({\n nodesToRemove,\n edgesToRemove,\n nodes,\n edges,\n onBeforeDelete,\n });\n const hasMatchingEdges = matchingEdges.length > 0;\n const hasMatchingNodes = matchingNodes.length > 0;\n if (hasMatchingEdges) {\n const edgeChanges = matchingEdges.map(elementToRemoveChange);\n onEdgesDelete?.(matchingEdges);\n triggerEdgeChanges(edgeChanges);\n }\n if (hasMatchingNodes) {\n const nodeChanges = matchingNodes.map(elementToRemoveChange);\n onNodesDelete?.(matchingNodes);\n triggerNodeChanges(nodeChanges);\n }\n if (hasMatchingNodes || hasMatchingEdges) {\n onDelete?.({ nodes: matchingNodes, edges: matchingEdges });\n }\n return { deletedNodes: matchingNodes, deletedEdges: matchingEdges };\n },\n /**\n * Partial is defined as \"the 2 nodes/areas are intersecting partially\".\n * If a is contained in b or b is contained in a, they are both\n * considered fully intersecting.\n */\n getIntersectingNodes: (nodeOrRect, partially = true, nodes) => {\n const isRect = isRectObject(nodeOrRect);\n const nodeRect = isRect ? nodeOrRect : getNodeRect(nodeOrRect);\n const hasNodesOption = nodes !== undefined;\n if (!nodeRect) {\n return [];\n }\n return (nodes || store.getState().nodes).filter((n) => {\n const internalNode = store.getState().nodeLookup.get(n.id);\n if (internalNode && !isRect && (n.id === nodeOrRect.id || !internalNode.internals.positionAbsolute)) {\n return false;\n }\n const currNodeRect = nodeToRect(hasNodesOption ? n : internalNode);\n const overlappingArea = getOverlappingArea(currNodeRect, nodeRect);\n const partiallyVisible = partially && overlappingArea > 0;\n return (partiallyVisible ||\n overlappingArea >= currNodeRect.width * currNodeRect.height ||\n overlappingArea >= nodeRect.width * nodeRect.height);\n });\n },\n isNodeIntersecting: (nodeOrRect, area, partially = true) => {\n const isRect = isRectObject(nodeOrRect);\n const nodeRect = isRect ? nodeOrRect : getNodeRect(nodeOrRect);\n if (!nodeRect) {\n return false;\n }\n const overlappingArea = getOverlappingArea(nodeRect, area);\n const partiallyVisible = partially && overlappingArea > 0;\n return (partiallyVisible ||\n overlappingArea >= area.width * area.height ||\n overlappingArea >= nodeRect.width * nodeRect.height);\n },\n updateNode,\n updateNodeData: (id, dataUpdate, options = { replace: false }) => {\n updateNode(id, (node) => {\n const nextData = typeof dataUpdate === 'function' ? dataUpdate(node) : dataUpdate;\n return options.replace ? { ...node, data: nextData } : { ...node, data: { ...node.data, ...nextData } };\n }, options);\n },\n updateEdge,\n updateEdgeData: (id, dataUpdate, options = { replace: false }) => {\n updateEdge(id, (edge) => {\n const nextData = typeof dataUpdate === 'function' ? dataUpdate(edge) : dataUpdate;\n return options.replace ? { ...edge, data: nextData } : { ...edge, data: { ...edge.data, ...nextData } };\n }, options);\n },\n getNodesBounds: (nodes) => {\n const { nodeLookup, nodeOrigin } = store.getState();\n return getNodesBounds(nodes, { nodeLookup, nodeOrigin });\n },\n getHandleConnections: ({ type, id, nodeId }) => Array.from(store\n .getState()\n .connectionLookup.get(`${nodeId}-${type}${id ? `-${id}` : ''}`)\n ?.values() ?? []),\n getNodeConnections: ({ type, handleId, nodeId }) => Array.from(store\n .getState()\n .connectionLookup.get(`${nodeId}${type ? (handleId ? `-${type}-${handleId}` : `-${type}`) : ''}`)\n ?.values() ?? []),\n fitView: async (options) => {\n // We either create a new Promise or reuse the existing one\n // Even if fitView is called multiple times in a row, we only end up with a single Promise\n const fitViewResolver = store.getState().fitViewResolver ?? withResolvers();\n // We schedule a fitView by setting fitViewQueued and triggering a setNodes\n store.setState({ fitViewQueued: true, fitViewOptions: options, fitViewResolver });\n batchContext.nodeQueue.push((nodes) => [...nodes]);\n return fitViewResolver.promise;\n },\n };\n }, []);\n return useMemo(() => {\n return {\n ...generalHelper,\n ...viewportHelper,\n viewportInitialized,\n };\n }, [viewportInitialized]);\n}\n\nconst selected = (item) => item.selected;\nconst win$1 = typeof window !== 'undefined' ? window : undefined;\n/**\n * Hook for handling global key events.\n *\n * @internal\n */\nfunction useGlobalKeyHandler({ deleteKeyCode, multiSelectionKeyCode, }) {\n const store = useStoreApi();\n const { deleteElements } = useReactFlow();\n const deleteKeyPressed = useKeyPress(deleteKeyCode, { actInsideInputWithModifier: false });\n const multiSelectionKeyPressed = useKeyPress(multiSelectionKeyCode, { target: win$1 });\n useEffect(() => {\n if (deleteKeyPressed) {\n const { edges, nodes } = store.getState();\n deleteElements({ nodes: nodes.filter(selected), edges: edges.filter(selected) });\n store.setState({ nodesSelectionActive: false });\n }\n }, [deleteKeyPressed]);\n useEffect(() => {\n store.setState({ multiSelectionActive: multiSelectionKeyPressed });\n }, [multiSelectionKeyPressed]);\n}\n\n/**\n * Hook for handling resize events.\n *\n * @internal\n */\nfunction useResizeHandler(domNode) {\n const store = useStoreApi();\n useEffect(() => {\n const updateDimensions = () => {\n if (!domNode.current || !(domNode.current.checkVisibility?.() ?? true)) {\n return false;\n }\n const size = getDimensions(domNode.current);\n if (size.height === 0 || size.width === 0) {\n store.getState().onError?.('004', errorMessages['error004']());\n }\n store.setState({ width: size.width || 500, height: size.height || 500 });\n };\n if (domNode.current) {\n updateDimensions();\n window.addEventListener('resize', updateDimensions);\n const resizeObserver = new ResizeObserver(() => updateDimensions());\n resizeObserver.observe(domNode.current);\n return () => {\n window.removeEventListener('resize', updateDimensions);\n if (resizeObserver && domNode.current) {\n resizeObserver.unobserve(domNode.current);\n }\n };\n }\n }, []);\n}\n\nconst containerStyle = {\n position: 'absolute',\n width: '100%',\n height: '100%',\n top: 0,\n left: 0,\n};\n\nconst selector$j = (s) => ({\n userSelectionActive: s.userSelectionActive,\n lib: s.lib,\n connectionInProgress: s.connection.inProgress,\n});\nfunction ZoomPane({ onPaneContextMenu, zoomOnScroll = true, zoomOnPinch = true, panOnScroll = false, panOnScrollSpeed = 0.5, panOnScrollMode = PanOnScrollMode.Free, zoomOnDoubleClick = true, panOnDrag = true, defaultViewport, translateExtent, minZoom, maxZoom, zoomActivationKeyCode, preventScrolling = true, children, noWheelClassName, noPanClassName, onViewportChange, isControlledViewport, paneClickDistance, selectionOnDrag, }) {\n const store = useStoreApi();\n const zoomPane = useRef(null);\n const { userSelectionActive, lib, connectionInProgress } = useStore(selector$j, shallow);\n const zoomActivationKeyPressed = useKeyPress(zoomActivationKeyCode);\n const panZoom = useRef();\n useResizeHandler(zoomPane);\n const onTransformChange = useCallback((transform) => {\n onViewportChange?.({ x: transform[0], y: transform[1], zoom: transform[2] });\n if (!isControlledViewport) {\n store.setState({ transform });\n }\n }, [onViewportChange, isControlledViewport]);\n useEffect(() => {\n if (zoomPane.current) {\n panZoom.current = XYPanZoom({\n domNode: zoomPane.current,\n minZoom,\n maxZoom,\n translateExtent,\n viewport: defaultViewport,\n onDraggingChange: (paneDragging) => store.setState((prevState) => prevState.paneDragging === paneDragging ? prevState : { paneDragging }),\n onPanZoomStart: (event, vp) => {\n const { onViewportChangeStart, onMoveStart } = store.getState();\n onMoveStart?.(event, vp);\n onViewportChangeStart?.(vp);\n },\n onPanZoom: (event, vp) => {\n const { onViewportChange, onMove } = store.getState();\n onMove?.(event, vp);\n onViewportChange?.(vp);\n },\n onPanZoomEnd: (event, vp) => {\n const { onViewportChangeEnd, onMoveEnd } = store.getState();\n onMoveEnd?.(event, vp);\n onViewportChangeEnd?.(vp);\n },\n });\n const { x, y, zoom } = panZoom.current.getViewport();\n store.setState({\n panZoom: panZoom.current,\n transform: [x, y, zoom],\n domNode: zoomPane.current.closest('.react-flow'),\n });\n return () => {\n panZoom.current?.destroy();\n };\n }\n }, []);\n useEffect(() => {\n panZoom.current?.update({\n onPaneContextMenu,\n zoomOnScroll,\n zoomOnPinch,\n panOnScroll,\n panOnScrollSpeed,\n panOnScrollMode,\n zoomOnDoubleClick,\n panOnDrag,\n zoomActivationKeyPressed,\n preventScrolling,\n noPanClassName,\n userSelectionActive,\n noWheelClassName,\n lib,\n onTransformChange,\n connectionInProgress,\n selectionOnDrag,\n paneClickDistance,\n });\n }, [\n onPaneContextMenu,\n zoomOnScroll,\n zoomOnPinch,\n panOnScroll,\n panOnScrollSpeed,\n panOnScrollMode,\n zoomOnDoubleClick,\n panOnDrag,\n zoomActivationKeyPressed,\n preventScrolling,\n noPanClassName,\n userSelectionActive,\n noWheelClassName,\n lib,\n onTransformChange,\n connectionInProgress,\n selectionOnDrag,\n paneClickDistance,\n ]);\n return (jsx(\"div\", { className: \"react-flow__renderer\", ref: zoomPane, style: containerStyle, children: children }));\n}\n\nconst selector$i = (s) => ({\n userSelectionActive: s.userSelectionActive,\n userSelectionRect: s.userSelectionRect,\n});\nfunction UserSelection() {\n const { userSelectionActive, userSelectionRect } = useStore(selector$i, shallow);\n const isActive = userSelectionActive && userSelectionRect;\n if (!isActive) {\n return null;\n }\n return (jsx(\"div\", { className: \"react-flow__selection react-flow__container\", style: {\n width: userSelectionRect.width,\n height: userSelectionRect.height,\n transform: `translate(${userSelectionRect.x}px, ${userSelectionRect.y}px)`,\n } }));\n}\n\nconst wrapHandler = (handler, containerRef) => {\n return (event) => {\n if (event.target !== containerRef.current) {\n return;\n }\n handler?.(event);\n };\n};\nconst selector$h = (s) => ({\n userSelectionActive: s.userSelectionActive,\n elementsSelectable: s.elementsSelectable,\n connectionInProgress: s.connection.inProgress,\n dragging: s.paneDragging,\n panBy: s.panBy,\n autoPanSpeed: s.autoPanSpeed,\n});\nfunction Pane({ isSelecting, selectionKeyPressed, selectionMode = SelectionMode.Full, panOnDrag, autoPanOnSelection, paneClickDistance, selectionOnDrag, onSelectionStart, onSelectionEnd, onPaneClick, onPaneContextMenu, onPaneScroll, onPaneMouseEnter, onPaneMouseMove, onPaneMouseLeave, children, }) {\n const autoPanId = useRef(0);\n const store = useStoreApi();\n const { userSelectionActive, elementsSelectable, dragging, connectionInProgress, panBy, autoPanSpeed } = useStore(selector$h, shallow);\n const isSelectionEnabled = elementsSelectable && (isSelecting || userSelectionActive);\n const container = useRef(null);\n const containerBounds = useRef();\n const selectedNodeIds = useRef(new Set());\n const selectedEdgeIds = useRef(new Set());\n // Used to prevent click events when the user lets go of the selectionKey during a selection\n const selectionInProgress = useRef(false);\n // Used for auto pan when approaching the edges of the container during selection\n const position = useRef({ x: 0, y: 0 });\n const autoPanStarted = useRef(false);\n const onClick = (event) => {\n // We prevent click events when the user let go of the selectionKey during a selection\n // We also prevent click events when a connection is in progress\n if (selectionInProgress.current || connectionInProgress) {\n selectionInProgress.current = false;\n return;\n }\n onPaneClick?.(event);\n store.getState().resetSelectedElements();\n store.setState({ nodesSelectionActive: false });\n };\n const onContextMenu = (event) => {\n if (Array.isArray(panOnDrag) && panOnDrag?.includes(2)) {\n event.preventDefault();\n return;\n }\n onPaneContextMenu?.(event);\n };\n const onWheel = onPaneScroll ? (event) => onPaneScroll(event) : undefined;\n const onClickCapture = (event) => {\n if (selectionInProgress.current) {\n event.stopPropagation();\n selectionInProgress.current = false;\n }\n };\n // We are using capture here in order to prevent other pointer events\n // to be able to create a selection above a node or an edge\n const onPointerDownCapture = (event) => {\n const { domNode, transform } = store.getState();\n containerBounds.current = domNode?.getBoundingClientRect();\n if (!containerBounds.current)\n return;\n const eventTargetIsContainer = event.target === container.current;\n // if a child element has the 'nokey' class, we don't want to swallow the event and don't start a selection\n const isNoKeyEvent = !eventTargetIsContainer && !!event.target.closest('.nokey');\n const isSelectionActive = (selectionOnDrag && eventTargetIsContainer) || selectionKeyPressed;\n if (isNoKeyEvent || !isSelecting || !isSelectionActive || event.button !== 0 || !event.isPrimary) {\n return;\n }\n event.target?.setPointerCapture?.(event.pointerId);\n selectionInProgress.current = false;\n const { x, y } = getEventPosition(event.nativeEvent, containerBounds.current);\n const userSelectionStartPosition = pointToRendererPoint({ x, y }, transform);\n store.setState({\n userSelectionRect: {\n width: 0,\n height: 0,\n startX: userSelectionStartPosition.x,\n startY: userSelectionStartPosition.y,\n x,\n y,\n },\n });\n if (!eventTargetIsContainer) {\n event.stopPropagation();\n event.preventDefault();\n }\n };\n // We commit the user selection rectangle to the store on auto-panning or pointer move during selection.\n function commitUserSelectionRect(mouseX, mouseY) {\n const { userSelectionRect } = store.getState();\n if (!userSelectionRect) {\n return;\n }\n const { transform, nodeLookup, edgeLookup, connectionLookup, triggerNodeChanges, triggerEdgeChanges, defaultEdgeOptions, } = store.getState();\n const userStartPosition = { x: userSelectionRect.startX, y: userSelectionRect.startY };\n const { x: screenStartX, y: screenStartY } = rendererPointToPoint(userStartPosition, transform);\n // This has to be in screen coordinates, not in flow coordinates.\n // We store the selection rectangle in userSelectionStartPosition coordinates to be able to\n // fix the start position of the selection rectangle when we are auto-panning.\n const nextUserSelectRect = {\n startX: userStartPosition.x,\n startY: userStartPosition.y,\n x: mouseX < screenStartX ? mouseX : screenStartX,\n y: mouseY < screenStartY ? mouseY : screenStartY,\n width: Math.abs(mouseX - screenStartX),\n height: Math.abs(mouseY - screenStartY),\n };\n const prevSelectedNodeIds = selectedNodeIds.current;\n const prevSelectedEdgeIds = selectedEdgeIds.current;\n selectedNodeIds.current = new Set(getNodesInside(nodeLookup, nextUserSelectRect, transform, selectionMode === SelectionMode.Partial, true).map((node) => node.id));\n selectedEdgeIds.current = new Set();\n const edgesSelectable = defaultEdgeOptions?.selectable ?? true;\n // We look for all edges connected to the selected nodes\n for (const nodeId of selectedNodeIds.current) {\n const connections = connectionLookup.get(nodeId);\n if (!connections)\n continue;\n for (const { edgeId } of connections.values()) {\n const edge = edgeLookup.get(edgeId);\n if (edge && (edge.selectable ?? edgesSelectable)) {\n selectedEdgeIds.current.add(edgeId);\n }\n }\n }\n if (!areSetsEqual(prevSelectedNodeIds, selectedNodeIds.current)) {\n const changes = getSelectionChanges(nodeLookup, selectedNodeIds.current, true);\n triggerNodeChanges(changes);\n }\n if (!areSetsEqual(prevSelectedEdgeIds, selectedEdgeIds.current)) {\n const changes = getSelectionChanges(edgeLookup, selectedEdgeIds.current);\n triggerEdgeChanges(changes);\n }\n store.setState({\n userSelectionRect: nextUserSelectRect,\n userSelectionActive: true,\n nodesSelectionActive: false,\n });\n }\n function autoPan() {\n if (!autoPanOnSelection || !containerBounds.current) {\n return;\n }\n const [x, y] = calcAutoPan(position.current, containerBounds.current, autoPanSpeed);\n panBy({ x, y }).then((panned) => {\n if (!selectionInProgress.current || !panned) {\n autoPanId.current = requestAnimationFrame(autoPan);\n return;\n }\n const { x: mx, y: my } = position.current;\n commitUserSelectionRect(mx, my);\n autoPanId.current = requestAnimationFrame(autoPan);\n });\n }\n const cleanupAutoPan = () => {\n cancelAnimationFrame(autoPanId.current);\n autoPanId.current = 0;\n autoPanStarted.current = false;\n };\n useEffect(() => {\n return () => cleanupAutoPan();\n }, []);\n const onPointerMove = (event) => {\n const { userSelectionRect, transform, resetSelectedElements } = store.getState();\n if (!containerBounds.current || !userSelectionRect) {\n return;\n }\n const { x: mouseX, y: mouseY } = getEventPosition(event.nativeEvent, containerBounds.current);\n position.current = { x: mouseX, y: mouseY };\n const screenStart = rendererPointToPoint({ x: userSelectionRect.startX, y: userSelectionRect.startY }, transform);\n if (!selectionInProgress.current) {\n const requiredDistance = selectionKeyPressed ? 0 : paneClickDistance;\n const distance = Math.hypot(mouseX - screenStart.x, mouseY - screenStart.y);\n if (distance <= requiredDistance) {\n return;\n }\n resetSelectedElements();\n onSelectionStart?.(event);\n }\n selectionInProgress.current = true;\n if (!autoPanStarted.current) {\n autoPan();\n autoPanStarted.current = true;\n }\n commitUserSelectionRect(mouseX, mouseY);\n };\n const onPointerUp = (event) => {\n if (event.button !== 0) {\n return;\n }\n event.target?.releasePointerCapture?.(event.pointerId);\n /*\n * We only want to trigger click functions when in selection mode if\n * the user did not move the mouse.\n */\n if (!userSelectionActive && event.target === container.current && store.getState().userSelectionRect) {\n onClick?.(event);\n }\n store.setState({\n userSelectionActive: false,\n userSelectionRect: null,\n });\n if (selectionInProgress.current) {\n onSelectionEnd?.(event);\n store.setState({\n nodesSelectionActive: selectedNodeIds.current.size > 0,\n });\n }\n cleanupAutoPan();\n };\n const onPointerCancel = (event) => {\n event.target?.releasePointerCapture?.(event.pointerId);\n cleanupAutoPan();\n };\n const draggable = panOnDrag === true || (Array.isArray(panOnDrag) && panOnDrag.includes(0));\n return (jsxs(\"div\", { className: cc(['react-flow__pane', { draggable, dragging, selection: isSelecting }]), onClick: isSelectionEnabled ? undefined : wrapHandler(onClick, container), onContextMenu: wrapHandler(onContextMenu, container), onWheel: wrapHandler(onWheel, container), onPointerEnter: isSelectionEnabled ? undefined : onPaneMouseEnter, onPointerMove: isSelectionEnabled ? onPointerMove : onPaneMouseMove, onPointerUp: isSelectionEnabled ? onPointerUp : undefined, onPointerCancel: isSelectionEnabled ? onPointerCancel : undefined, onPointerDownCapture: isSelectionEnabled ? onPointerDownCapture : undefined, onClickCapture: isSelectionEnabled ? onClickCapture : undefined, onPointerLeave: onPaneMouseLeave, ref: container, style: containerStyle, children: [children, jsx(UserSelection, {})] }));\n}\n\n/*\n * this handler is called by\n * 1. the click handler when node is not draggable or selectNodesOnDrag = false\n * or\n * 2. the on drag start handler when node is draggable and selectNodesOnDrag = true\n */\nfunction handleNodeClick({ id, store, unselect = false, nodeRef, }) {\n const { addSelectedNodes, unselectNodesAndEdges, multiSelectionActive, nodeLookup, onError } = store.getState();\n const node = nodeLookup.get(id);\n if (!node) {\n onError?.('012', errorMessages['error012'](id));\n return;\n }\n store.setState({ nodesSelectionActive: false });\n if (!node.selected) {\n addSelectedNodes([id]);\n }\n else if (unselect || (node.selected && multiSelectionActive)) {\n unselectNodesAndEdges({ nodes: [node], edges: [] });\n requestAnimationFrame(() => nodeRef?.current?.blur());\n }\n}\n\n/**\n * Hook for calling XYDrag helper from @xyflow/system.\n *\n * @internal\n */\nfunction useDrag({ nodeRef, disabled = false, noDragClassName, handleSelector, nodeId, isSelectable, nodeClickDistance, }) {\n const store = useStoreApi();\n const [dragging, setDragging] = useState(false);\n const xyDrag = useRef();\n useEffect(() => {\n xyDrag.current = XYDrag({\n getStoreItems: () => store.getState(),\n onNodeMouseDown: (id) => {\n handleNodeClick({\n id,\n store,\n nodeRef,\n });\n },\n onDragStart: () => {\n setDragging(true);\n },\n onDragStop: () => {\n setDragging(false);\n },\n });\n }, []);\n useEffect(() => {\n if (disabled || !nodeRef.current || !xyDrag.current) {\n return;\n }\n xyDrag.current.update({\n noDragClassName,\n handleSelector,\n domNode: nodeRef.current,\n isSelectable,\n nodeId,\n nodeClickDistance,\n });\n return () => {\n xyDrag.current?.destroy();\n };\n }, [noDragClassName, handleSelector, disabled, isSelectable, nodeRef, nodeId, nodeClickDistance]);\n return dragging;\n}\n\nconst selectedAndDraggable = (nodesDraggable) => (n) => n.selected && (n.draggable || (nodesDraggable && typeof n.draggable === 'undefined'));\n/**\n * Hook for updating node positions by passing a direction and factor\n *\n * @internal\n * @returns function for updating node positions\n */\nfunction useMoveSelectedNodes() {\n const store = useStoreApi();\n const moveSelectedNodes = useCallback((params) => {\n const { nodeExtent, snapToGrid, snapGrid, nodesDraggable, onError, updateNodePositions, nodeLookup, nodeOrigin } = store.getState();\n const nodeUpdates = new Map();\n const isSelected = selectedAndDraggable(nodesDraggable);\n /*\n * by default a node moves 5px on each key press\n * if snap grid is enabled, we use that for the velocity\n */\n const xVelo = snapToGrid ? snapGrid[0] : 5;\n const yVelo = snapToGrid ? snapGrid[1] : 5;\n const xDiff = params.direction.x * xVelo * params.factor;\n const yDiff = params.direction.y * yVelo * params.factor;\n for (const [, node] of nodeLookup) {\n if (!isSelected(node)) {\n continue;\n }\n let nextPosition = {\n x: node.internals.positionAbsolute.x + xDiff,\n y: node.internals.positionAbsolute.y + yDiff,\n };\n if (snapToGrid) {\n nextPosition = snapPosition(nextPosition, snapGrid);\n }\n const { position, positionAbsolute } = calculateNodePosition({\n nodeId: node.id,\n nextPosition,\n nodeLookup,\n nodeExtent,\n nodeOrigin,\n onError,\n });\n node.position = position;\n node.internals.positionAbsolute = positionAbsolute;\n nodeUpdates.set(node.id, node);\n }\n updateNodePositions(nodeUpdates);\n }, []);\n return moveSelectedNodes;\n}\n\nconst NodeIdContext = createContext(null);\nconst Provider = NodeIdContext.Provider;\nNodeIdContext.Consumer;\n/**\n * You can use this hook to get the id of the node it is used inside. It is useful\n * if you need the node's id deeper in the render tree but don't want to manually\n * drill down the id as a prop.\n *\n * @public\n * @returns The id for a node in the flow.\n *\n * @example\n *```jsx\n *import { useNodeId } from '@xyflow/react';\n *\n *export default function CustomNode() {\n * return (\n *
{connection ? `Someone is trying to make a connection from ${connection.fromNode} to this one.` : 'There are currently no incoming connections!'}\n *\n *
\n * );\n * }\n * ```\n *\n * @returns ConnectionState\n */\nfunction useConnection(connectionSelector) {\n const combinedSelector = getSelector(connectionSelector);\n return useStore(combinedSelector, shallow);\n}\n\nconst selector$7 = (s) => ({\n nodesConnectable: s.nodesConnectable,\n isValid: s.connection.isValid,\n inProgress: s.connection.inProgress,\n width: s.width,\n height: s.height,\n});\nfunction ConnectionLineWrapper({ containerStyle, style, type, component, }) {\n const { nodesConnectable, width, height, isValid, inProgress } = useStore(selector$7, shallow);\n const renderConnection = !!(width && nodesConnectable && inProgress);\n if (!renderConnection) {\n return null;\n }\n return (jsx(\"svg\", { style: containerStyle, width: width, height: height, className: \"react-flow__connectionline react-flow__container\", children: jsx(\"g\", { className: cc(['react-flow__connection', getConnectionStatus(isValid)]), children: jsx(ConnectionLine, { style: style, type: type, CustomComponent: component, isValid: isValid }) }) }));\n}\nconst ConnectionLine = ({ style, type = ConnectionLineType.Bezier, CustomComponent, isValid, }) => {\n const { inProgress, from, fromNode, fromHandle, fromPosition, to, toNode, toHandle, toPosition, pointer } = useConnection();\n if (!inProgress) {\n return;\n }\n if (CustomComponent) {\n return (jsx(CustomComponent, { connectionLineType: type, connectionLineStyle: style, fromNode: fromNode, fromHandle: fromHandle, fromX: from.x, fromY: from.y, toX: to.x, toY: to.y, fromPosition: fromPosition, toPosition: toPosition, connectionStatus: getConnectionStatus(isValid), toNode: toNode, toHandle: toHandle, pointer: pointer }));\n }\n let path = '';\n const pathParams = {\n sourceX: from.x,\n sourceY: from.y,\n sourcePosition: fromPosition,\n targetX: to.x,\n targetY: to.y,\n targetPosition: toPosition,\n };\n switch (type) {\n case ConnectionLineType.Bezier:\n [path] = getBezierPath(pathParams);\n break;\n case ConnectionLineType.SimpleBezier:\n [path] = getSimpleBezierPath(pathParams);\n break;\n case ConnectionLineType.Step:\n [path] = getSmoothStepPath({\n ...pathParams,\n borderRadius: 0,\n });\n break;\n case ConnectionLineType.SmoothStep:\n [path] = getSmoothStepPath(pathParams);\n break;\n default:\n [path] = getStraightPath(pathParams);\n }\n return jsx(\"path\", { d: path, fill: \"none\", className: \"react-flow__connection-path\", style: style });\n};\nConnectionLine.displayName = 'ConnectionLine';\n\nconst emptyTypes = {};\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nfunction useNodeOrEdgeTypesWarning(nodeOrEdgeTypes = emptyTypes) {\n const typesRef = useRef(nodeOrEdgeTypes);\n const store = useStoreApi();\n useEffect(() => {\n if (process.env.NODE_ENV === 'development') {\n const usedKeys = new Set([...Object.keys(typesRef.current), ...Object.keys(nodeOrEdgeTypes)]);\n for (const key of usedKeys) {\n if (typesRef.current[key] !== nodeOrEdgeTypes[key]) {\n store.getState().onError?.('002', errorMessages['error002']());\n break;\n }\n }\n typesRef.current = nodeOrEdgeTypes;\n }\n }, [nodeOrEdgeTypes]);\n}\n\nfunction useStylesLoadedWarning() {\n const store = useStoreApi();\n const checked = useRef(false);\n useEffect(() => {\n if (process.env.NODE_ENV === 'development') {\n if (!checked.current) {\n const pane = document.querySelector('.react-flow__pane');\n if (pane && !(window.getComputedStyle(pane).zIndex === '1')) {\n store.getState().onError?.('013', errorMessages['error013']('react'));\n }\n checked.current = true;\n }\n }\n }, []);\n}\n\nfunction GraphViewComponent({ nodeTypes, edgeTypes, onInit, onNodeClick, onEdgeClick, onNodeDoubleClick, onEdgeDoubleClick, onNodeMouseEnter, onNodeMouseMove, onNodeMouseLeave, onNodeContextMenu, onSelectionContextMenu, onSelectionStart, onSelectionEnd, connectionLineType, connectionLineStyle, connectionLineComponent, connectionLineContainerStyle, selectionKeyCode, selectionOnDrag, selectionMode, multiSelectionKeyCode, panActivationKeyCode, zoomActivationKeyCode, deleteKeyCode, onlyRenderVisibleElements, elementsSelectable, defaultViewport, translateExtent, minZoom, maxZoom, preventScrolling, defaultMarkerColor, zoomOnScroll, zoomOnPinch, panOnScroll, panOnScrollSpeed, panOnScrollMode, zoomOnDoubleClick, panOnDrag, autoPanOnSelection, onPaneClick, onPaneMouseEnter, onPaneMouseMove, onPaneMouseLeave, onPaneScroll, onPaneContextMenu, paneClickDistance, nodeClickDistance, onEdgeContextMenu, onEdgeMouseEnter, onEdgeMouseMove, onEdgeMouseLeave, reconnectRadius, onReconnect, onReconnectStart, onReconnectEnd, noDragClassName, noWheelClassName, noPanClassName, disableKeyboardA11y, nodeExtent, rfId, viewport, onViewportChange, }) {\n useNodeOrEdgeTypesWarning(nodeTypes);\n useNodeOrEdgeTypesWarning(edgeTypes);\n useStylesLoadedWarning();\n useOnInitHandler(onInit);\n useViewportSync(viewport);\n return (jsx(FlowRenderer, { onPaneClick: onPaneClick, onPaneMouseEnter: onPaneMouseEnter, onPaneMouseMove: onPaneMouseMove, onPaneMouseLeave: onPaneMouseLeave, onPaneContextMenu: onPaneContextMenu, onPaneScroll: onPaneScroll, paneClickDistance: paneClickDistance, deleteKeyCode: deleteKeyCode, selectionKeyCode: selectionKeyCode, selectionOnDrag: selectionOnDrag, selectionMode: selectionMode, onSelectionStart: onSelectionStart, onSelectionEnd: onSelectionEnd, multiSelectionKeyCode: multiSelectionKeyCode, panActivationKeyCode: panActivationKeyCode, zoomActivationKeyCode: zoomActivationKeyCode, elementsSelectable: elementsSelectable, zoomOnScroll: zoomOnScroll, zoomOnPinch: zoomOnPinch, zoomOnDoubleClick: zoomOnDoubleClick, panOnScroll: panOnScroll, panOnScrollSpeed: panOnScrollSpeed, panOnScrollMode: panOnScrollMode, panOnDrag: panOnDrag, autoPanOnSelection: autoPanOnSelection, defaultViewport: defaultViewport, translateExtent: translateExtent, minZoom: minZoom, maxZoom: maxZoom, onSelectionContextMenu: onSelectionContextMenu, preventScrolling: preventScrolling, noDragClassName: noDragClassName, noWheelClassName: noWheelClassName, noPanClassName: noPanClassName, disableKeyboardA11y: disableKeyboardA11y, onViewportChange: onViewportChange, isControlledViewport: !!viewport, children: jsxs(Viewport, { children: [jsx(EdgeRenderer, { edgeTypes: edgeTypes, onEdgeClick: onEdgeClick, onEdgeDoubleClick: onEdgeDoubleClick, onReconnect: onReconnect, onReconnectStart: onReconnectStart, onReconnectEnd: onReconnectEnd, onlyRenderVisibleElements: onlyRenderVisibleElements, onEdgeContextMenu: onEdgeContextMenu, onEdgeMouseEnter: onEdgeMouseEnter, onEdgeMouseMove: onEdgeMouseMove, onEdgeMouseLeave: onEdgeMouseLeave, reconnectRadius: reconnectRadius, defaultMarkerColor: defaultMarkerColor, noPanClassName: noPanClassName, disableKeyboardA11y: disableKeyboardA11y, rfId: rfId }), jsx(ConnectionLineWrapper, { style: connectionLineStyle, type: connectionLineType, component: connectionLineComponent, containerStyle: connectionLineContainerStyle }), jsx(\"div\", { className: \"react-flow__edgelabel-renderer\" }), jsx(NodeRenderer, { nodeTypes: nodeTypes, onNodeClick: onNodeClick, onNodeDoubleClick: onNodeDoubleClick, onNodeMouseEnter: onNodeMouseEnter, onNodeMouseMove: onNodeMouseMove, onNodeMouseLeave: onNodeMouseLeave, onNodeContextMenu: onNodeContextMenu, nodeClickDistance: nodeClickDistance, onlyRenderVisibleElements: onlyRenderVisibleElements, noPanClassName: noPanClassName, noDragClassName: noDragClassName, disableKeyboardA11y: disableKeyboardA11y, nodeExtent: nodeExtent, rfId: rfId }), jsx(\"div\", { className: \"react-flow__viewport-portal\" })] }) }));\n}\nGraphViewComponent.displayName = 'GraphView';\nconst GraphView = memo(GraphViewComponent);\n\nconst devWarn = createDevWarn('React Flow', 'https://reactflow.dev/');\nconst getInitialState = ({ nodes, edges, defaultNodes, defaultEdges, width, height, fitView, fitViewOptions, minZoom = 0.5, maxZoom = 2, nodeOrigin, nodeExtent, zIndexMode = 'basic', } = {}) => {\n const nodeLookup = new Map();\n const parentLookup = new Map();\n const connectionLookup = new Map();\n const edgeLookup = new Map();\n const storeEdges = defaultEdges ?? edges ?? [];\n const storeNodes = defaultNodes ?? nodes ?? [];\n const storeNodeOrigin = nodeOrigin ?? [0, 0];\n const storeNodeExtent = nodeExtent ?? infiniteExtent;\n updateConnectionLookup(connectionLookup, edgeLookup, storeEdges);\n const { nodesInitialized } = adoptUserNodes(storeNodes, nodeLookup, parentLookup, {\n nodeOrigin: storeNodeOrigin,\n nodeExtent: storeNodeExtent,\n zIndexMode,\n });\n let transform = [0, 0, 1];\n if (fitView && width && height) {\n const bounds = getInternalNodesBounds(nodeLookup, {\n filter: (node) => !!((node.width || node.initialWidth) && (node.height || node.initialHeight)),\n });\n const { x, y, zoom } = getViewportForBounds(bounds, width, height, minZoom, maxZoom, fitViewOptions?.padding ?? 0.1);\n transform = [x, y, zoom];\n }\n return {\n rfId: '1',\n width: width ?? 0,\n height: height ?? 0,\n transform,\n nodes: storeNodes,\n nodesInitialized,\n nodeLookup,\n parentLookup,\n edges: storeEdges,\n edgeLookup,\n connectionLookup,\n onNodesChange: null,\n onEdgesChange: null,\n hasDefaultNodes: defaultNodes !== undefined,\n hasDefaultEdges: defaultEdges !== undefined,\n panZoom: null,\n minZoom,\n maxZoom,\n translateExtent: infiniteExtent,\n nodeExtent: storeNodeExtent,\n nodesSelectionActive: false,\n userSelectionActive: false,\n userSelectionRect: null,\n connectionMode: ConnectionMode.Strict,\n domNode: null,\n paneDragging: false,\n noPanClassName: 'nopan',\n nodeOrigin: storeNodeOrigin,\n nodeDragThreshold: 1,\n connectionDragThreshold: 1,\n snapGrid: [15, 15],\n snapToGrid: false,\n nodesDraggable: true,\n nodesConnectable: true,\n nodesFocusable: true,\n edgesFocusable: true,\n edgesReconnectable: true,\n elementsSelectable: true,\n elevateNodesOnSelect: true,\n elevateEdgesOnSelect: true,\n selectNodesOnDrag: true,\n multiSelectionActive: false,\n fitViewQueued: fitView ?? false,\n fitViewOptions,\n fitViewResolver: null,\n connection: { ...initialConnection },\n connectionClickStartHandle: null,\n connectOnClick: true,\n ariaLiveMessage: '',\n autoPanOnConnect: true,\n autoPanOnNodeDrag: true,\n autoPanOnNodeFocus: true,\n autoPanSpeed: 15,\n connectionRadius: 20,\n onError: devWarn,\n isValidConnection: undefined,\n onSelectionChangeHandlers: [],\n lib: 'react',\n debug: false,\n ariaLabelConfig: defaultAriaLabelConfig,\n zIndexMode,\n onNodesChangeMiddlewareMap: new Map(),\n onEdgesChangeMiddlewareMap: new Map(),\n };\n};\n\nconst createStore = ({ nodes, edges, defaultNodes, defaultEdges, width, height, fitView, fitViewOptions, minZoom, maxZoom, nodeOrigin, nodeExtent, zIndexMode, }) => createWithEqualityFn((set, get) => {\n async function resolveFitView() {\n const { nodeLookup, panZoom, fitViewOptions, fitViewResolver, width, height, minZoom, maxZoom } = get();\n if (!panZoom) {\n return;\n }\n await fitViewport({\n nodes: nodeLookup,\n width,\n height,\n panZoom,\n minZoom,\n maxZoom,\n }, fitViewOptions);\n fitViewResolver?.resolve(true);\n /**\n * wait for the fitViewport to resolve before deleting the resolver,\n * we want to reuse the old resolver if the user calls fitView again in the mean time\n */\n set({ fitViewResolver: null });\n }\n return {\n ...getInitialState({\n nodes,\n edges,\n width,\n height,\n fitView,\n fitViewOptions,\n minZoom,\n maxZoom,\n nodeOrigin,\n nodeExtent,\n defaultNodes,\n defaultEdges,\n zIndexMode,\n }),\n setNodes: (nodes) => {\n const { nodeLookup, parentLookup, nodeOrigin, elevateNodesOnSelect, fitViewQueued, zIndexMode, nodesSelectionActive, } = get();\n /*\n * setNodes() is called exclusively in response to user actions:\n * - either when the `` prop is updated in the controlled ReactFlow setup,\n * - or when the user calls something like `reactFlowInstance.setNodes()` in an uncontrolled ReactFlow setup.\n *\n * When this happens, we take the note objects passed by the user and extend them with fields\n * relevant for internal React Flow operations.\n */\n const { nodesInitialized, hasSelectedNodes } = adoptUserNodes(nodes, nodeLookup, parentLookup, {\n nodeOrigin,\n nodeExtent,\n elevateNodesOnSelect,\n checkEquality: true,\n zIndexMode,\n });\n const nextNodesSelectionActive = nodesSelectionActive && hasSelectedNodes;\n if (fitViewQueued && nodesInitialized) {\n resolveFitView();\n set({\n nodes,\n nodesInitialized,\n fitViewQueued: false,\n fitViewOptions: undefined,\n nodesSelectionActive: nextNodesSelectionActive\n });\n }\n else {\n set({ nodes, nodesInitialized, nodesSelectionActive: nextNodesSelectionActive });\n }\n },\n setEdges: (edges) => {\n const { connectionLookup, edgeLookup } = get();\n updateConnectionLookup(connectionLookup, edgeLookup, edges);\n set({ edges });\n },\n setDefaultNodesAndEdges: (nodes, edges) => {\n if (nodes) {\n const { setNodes } = get();\n setNodes(nodes);\n set({ hasDefaultNodes: true });\n }\n if (edges) {\n const { setEdges } = get();\n setEdges(edges);\n set({ hasDefaultEdges: true });\n }\n },\n /*\n * Every node gets registered at a ResizeObserver. Whenever a node\n * changes its dimensions, this function is called to measure the\n * new dimensions and update the nodes.\n */\n updateNodeInternals: (updates) => {\n const { triggerNodeChanges, nodeLookup, parentLookup, domNode, nodeOrigin, nodeExtent, debug, fitViewQueued, zIndexMode, } = get();\n const { changes, updatedInternals } = updateNodeInternals(updates, nodeLookup, parentLookup, domNode, nodeOrigin, nodeExtent, zIndexMode);\n if (!updatedInternals) {\n return;\n }\n updateAbsolutePositions(nodeLookup, parentLookup, { nodeOrigin, nodeExtent, zIndexMode });\n if (fitViewQueued) {\n resolveFitView();\n set({ fitViewQueued: false, fitViewOptions: undefined });\n }\n else {\n // we always want to trigger useStore calls whenever updateNodeInternals is called\n set({});\n }\n if (changes?.length > 0) {\n if (debug) {\n console.log('React Flow: trigger node changes', changes);\n }\n triggerNodeChanges?.(changes);\n }\n },\n updateNodePositions: (nodeDragItems, dragging = false) => {\n const parentExpandChildren = [];\n let changes = [];\n const { nodeLookup, triggerNodeChanges, connection, updateConnection, onNodesChangeMiddlewareMap } = get();\n for (const [id, dragItem] of nodeDragItems) {\n // we are using the nodelookup to be sure to use the current expandParent and parentId value\n const node = nodeLookup.get(id);\n const expandParent = !!(node?.expandParent && node?.parentId && dragItem?.position);\n const change = {\n id,\n type: 'position',\n position: expandParent\n ? {\n x: Math.max(0, dragItem.position.x),\n y: Math.max(0, dragItem.position.y),\n }\n : dragItem.position,\n dragging,\n };\n if (node && connection.inProgress && connection.fromNode.id === node.id) {\n const updatedFrom = getHandlePosition(node, connection.fromHandle, Position.Left, true);\n updateConnection({ ...connection, from: updatedFrom });\n }\n if (expandParent && node.parentId) {\n parentExpandChildren.push({\n id,\n parentId: node.parentId,\n rect: {\n ...dragItem.internals.positionAbsolute,\n width: dragItem.measured.width ?? 0,\n height: dragItem.measured.height ?? 0,\n },\n });\n }\n changes.push(change);\n }\n if (parentExpandChildren.length > 0) {\n const { parentLookup, nodeOrigin } = get();\n const parentExpandChanges = handleExpandParent(parentExpandChildren, nodeLookup, parentLookup, nodeOrigin);\n changes.push(...parentExpandChanges);\n }\n for (const middleware of onNodesChangeMiddlewareMap.values()) {\n changes = middleware(changes);\n }\n triggerNodeChanges(changes);\n },\n triggerNodeChanges: (changes) => {\n const { onNodesChange, setNodes, nodes, hasDefaultNodes, debug } = get();\n if (changes?.length) {\n if (hasDefaultNodes) {\n const updatedNodes = applyNodeChanges(changes, nodes);\n setNodes(updatedNodes);\n }\n if (debug) {\n console.log('React Flow: trigger node changes', changes);\n }\n onNodesChange?.(changes);\n }\n },\n triggerEdgeChanges: (changes) => {\n const { onEdgesChange, setEdges, edges, hasDefaultEdges, debug } = get();\n if (changes?.length) {\n if (hasDefaultEdges) {\n const updatedEdges = applyEdgeChanges(changes, edges);\n setEdges(updatedEdges);\n }\n if (debug) {\n console.log('React Flow: trigger edge changes', changes);\n }\n onEdgesChange?.(changes);\n }\n },\n addSelectedNodes: (selectedNodeIds) => {\n const { multiSelectionActive, edgeLookup, nodeLookup, triggerNodeChanges, triggerEdgeChanges } = get();\n if (multiSelectionActive) {\n const nodeChanges = selectedNodeIds.map((nodeId) => createSelectionChange(nodeId, true));\n triggerNodeChanges(nodeChanges);\n return;\n }\n triggerNodeChanges(getSelectionChanges(nodeLookup, new Set([...selectedNodeIds]), true));\n triggerEdgeChanges(getSelectionChanges(edgeLookup));\n },\n addSelectedEdges: (selectedEdgeIds) => {\n const { multiSelectionActive, edgeLookup, nodeLookup, triggerNodeChanges, triggerEdgeChanges } = get();\n if (multiSelectionActive) {\n const changedEdges = selectedEdgeIds.map((edgeId) => createSelectionChange(edgeId, true));\n triggerEdgeChanges(changedEdges);\n return;\n }\n triggerEdgeChanges(getSelectionChanges(edgeLookup, new Set([...selectedEdgeIds])));\n triggerNodeChanges(getSelectionChanges(nodeLookup, new Set(), true));\n },\n unselectNodesAndEdges: ({ nodes, edges } = {}) => {\n const { edges: storeEdges, nodes: storeNodes, nodeLookup, triggerNodeChanges, triggerEdgeChanges } = get();\n const nodesToUnselect = nodes ? nodes : storeNodes;\n const edgesToUnselect = edges ? edges : storeEdges;\n const nodeChanges = [];\n for (const node of nodesToUnselect) {\n if (!node.selected) {\n continue; // skip changing nodes that are not selected\n }\n const internalNode = nodeLookup.get(node.id);\n if (internalNode) {\n /*\n * we need to unselect the internal node that was selected previously before we\n * send the change to the user to prevent it to be selected while dragging the new node\n */\n internalNode.selected = false;\n }\n nodeChanges.push(createSelectionChange(node.id, false));\n }\n const edgeChanges = [];\n for (const edge of edgesToUnselect) {\n if (!edge.selected) {\n continue; // skip changing edges that are not selected\n }\n edgeChanges.push(createSelectionChange(edge.id, false));\n }\n triggerNodeChanges(nodeChanges);\n triggerEdgeChanges(edgeChanges);\n },\n setMinZoom: (minZoom) => {\n const { panZoom, maxZoom } = get();\n panZoom?.setScaleExtent([minZoom, maxZoom]);\n set({ minZoom });\n },\n setMaxZoom: (maxZoom) => {\n const { panZoom, minZoom } = get();\n panZoom?.setScaleExtent([minZoom, maxZoom]);\n set({ maxZoom });\n },\n setTranslateExtent: (translateExtent) => {\n get().panZoom?.setTranslateExtent(translateExtent);\n set({ translateExtent });\n },\n resetSelectedElements: () => {\n const { edges, nodes, triggerNodeChanges, triggerEdgeChanges, elementsSelectable } = get();\n if (!elementsSelectable) {\n return;\n }\n const nodeChanges = nodes.reduce((res, node) => (node.selected ? [...res, createSelectionChange(node.id, false)] : res), []);\n const edgeChanges = edges.reduce((res, edge) => (edge.selected ? [...res, createSelectionChange(edge.id, false)] : res), []);\n triggerNodeChanges(nodeChanges);\n triggerEdgeChanges(edgeChanges);\n },\n setNodeExtent: (nextNodeExtent) => {\n const { nodes, nodeLookup, parentLookup, nodeOrigin, elevateNodesOnSelect, nodeExtent, zIndexMode } = get();\n if (nextNodeExtent[0][0] === nodeExtent[0][0] &&\n nextNodeExtent[0][1] === nodeExtent[0][1] &&\n nextNodeExtent[1][0] === nodeExtent[1][0] &&\n nextNodeExtent[1][1] === nodeExtent[1][1]) {\n return;\n }\n adoptUserNodes(nodes, nodeLookup, parentLookup, {\n nodeOrigin,\n nodeExtent: nextNodeExtent,\n elevateNodesOnSelect,\n checkEquality: false,\n zIndexMode,\n });\n set({ nodeExtent: nextNodeExtent });\n },\n panBy: (delta) => {\n const { transform, width, height, panZoom, translateExtent } = get();\n return panBy({ delta, panZoom, transform, translateExtent, width, height });\n },\n setCenter: async (x, y, options) => {\n const { width, height, maxZoom, panZoom } = get();\n if (!panZoom) {\n return false;\n }\n const nextZoom = typeof options?.zoom !== 'undefined' ? options.zoom : maxZoom;\n await panZoom.setViewport({\n x: width / 2 - x * nextZoom,\n y: height / 2 - y * nextZoom,\n zoom: nextZoom,\n }, { duration: options?.duration, ease: options?.ease, interpolate: options?.interpolate });\n return true;\n },\n cancelConnection: () => {\n set({\n connection: { ...initialConnection },\n });\n },\n updateConnection: (connection) => {\n set({ connection });\n },\n reset: () => set({ ...getInitialState() }),\n };\n}, Object.is);\n\n/**\n * The `` component is a [context provider](https://react.dev/learn/passing-data-deeply-with-context#)\n * that makes it possible to access a flow's internal state outside of the\n * [``](/api-reference/react-flow) component. Many of the hooks we\n * provide rely on this component to work.\n * @public\n *\n * @example\n * ```tsx\n *import { ReactFlow, ReactFlowProvider, useNodes } from '@xyflow/react'\n *\n *export default function Flow() {\n * return (\n * \n * \n * \n * \n * );\n *}\n *\n *function Sidebar() {\n * // This hook will only work if the component it's used in is a child of a\n * // .\n * const nodes = useNodes()\n *\n * return ;\n *}\n *```\n *\n * @remarks If you're using a router and want your flow's state to persist across routes,\n * it's vital that you place the `` component _outside_ of\n * your router. If you have multiple flows on the same page you will need to use a separate\n * `` for each flow.\n */\nfunction ReactFlowProvider({ initialNodes: nodes, initialEdges: edges, defaultNodes, defaultEdges, initialWidth: width, initialHeight: height, initialMinZoom: minZoom, initialMaxZoom: maxZoom, initialFitViewOptions: fitViewOptions, fitView, nodeOrigin, nodeExtent, zIndexMode, children, }) {\n const [store] = useState(() => createStore({\n nodes,\n edges,\n defaultNodes,\n defaultEdges,\n width,\n height,\n fitView,\n minZoom,\n maxZoom,\n fitViewOptions,\n nodeOrigin,\n nodeExtent,\n zIndexMode,\n }));\n return (jsx(Provider$1, { value: store, children: jsx(BatchProvider, { children: children }) }));\n}\n\nfunction Wrapper({ children, nodes, edges, defaultNodes, defaultEdges, width, height, fitView, fitViewOptions, minZoom, maxZoom, nodeOrigin, nodeExtent, zIndexMode, }) {\n const isWrapped = useContext(StoreContext);\n if (isWrapped) {\n /*\n * we need to wrap it with a fragment because it's not allowed for children to be a ReactNode\n * https://github.com/DefinitelyTyped/DefinitelyTyped/issues/18051\n */\n return jsx(Fragment, { children: children });\n }\n return (jsx(ReactFlowProvider, { initialNodes: nodes, initialEdges: edges, defaultNodes: defaultNodes, defaultEdges: defaultEdges, initialWidth: width, initialHeight: height, fitView: fitView, initialFitViewOptions: fitViewOptions, initialMinZoom: minZoom, initialMaxZoom: maxZoom, nodeOrigin: nodeOrigin, nodeExtent: nodeExtent, zIndexMode: zIndexMode, children: children }));\n}\n\nconst wrapperStyle = {\n width: '100%',\n height: '100%',\n overflow: 'hidden',\n position: 'relative',\n zIndex: 0,\n};\nfunction ReactFlow({ nodes, edges, defaultNodes, defaultEdges, className, nodeTypes, edgeTypes, onNodeClick, onEdgeClick, onInit, onMove, onMoveStart, onMoveEnd, onConnect, onConnectStart, onConnectEnd, onClickConnectStart, onClickConnectEnd, onNodeMouseEnter, onNodeMouseMove, onNodeMouseLeave, onNodeContextMenu, onNodeDoubleClick, onNodeDragStart, onNodeDrag, onNodeDragStop, onNodesDelete, onEdgesDelete, onDelete, onSelectionChange, onSelectionDragStart, onSelectionDrag, onSelectionDragStop, onSelectionContextMenu, onSelectionStart, onSelectionEnd, onBeforeDelete, connectionMode, connectionLineType = ConnectionLineType.Bezier, connectionLineStyle, connectionLineComponent, connectionLineContainerStyle, deleteKeyCode = 'Backspace', selectionKeyCode = 'Shift', selectionOnDrag = false, selectionMode = SelectionMode.Full, panActivationKeyCode = 'Space', multiSelectionKeyCode = isMacOs() ? 'Meta' : 'Control', zoomActivationKeyCode = isMacOs() ? 'Meta' : 'Control', snapToGrid, snapGrid, onlyRenderVisibleElements = false, selectNodesOnDrag, nodesDraggable, autoPanOnNodeFocus, nodesConnectable, nodesFocusable, nodeOrigin = defaultNodeOrigin, edgesFocusable, edgesReconnectable, elementsSelectable = true, defaultViewport: defaultViewport$1 = defaultViewport, minZoom = 0.5, maxZoom = 2, translateExtent = infiniteExtent, preventScrolling = true, nodeExtent, defaultMarkerColor = '#b1b1b7', zoomOnScroll = true, zoomOnPinch = true, panOnScroll = false, panOnScrollSpeed = 0.5, panOnScrollMode = PanOnScrollMode.Free, zoomOnDoubleClick = true, panOnDrag = true, onPaneClick, onPaneMouseEnter, onPaneMouseMove, onPaneMouseLeave, onPaneScroll, onPaneContextMenu, paneClickDistance = 1, nodeClickDistance = 0, children, onReconnect, onReconnectStart, onReconnectEnd, onEdgeContextMenu, onEdgeDoubleClick, onEdgeMouseEnter, onEdgeMouseMove, onEdgeMouseLeave, reconnectRadius = 10, onNodesChange, onEdgesChange, noDragClassName = 'nodrag', noWheelClassName = 'nowheel', noPanClassName = 'nopan', fitView, fitViewOptions, connectOnClick, attributionPosition, proOptions, defaultEdgeOptions, elevateNodesOnSelect = true, elevateEdgesOnSelect = false, disableKeyboardA11y = false, autoPanOnConnect, autoPanOnNodeDrag, autoPanOnSelection = true, autoPanSpeed, connectionRadius, isValidConnection, onError, style, id, nodeDragThreshold, connectionDragThreshold, viewport, onViewportChange, width, height, colorMode = 'light', debug, onScroll, ariaLabelConfig, zIndexMode = 'basic', ...rest }, ref) {\n const rfId = id || '1';\n const colorModeClassName = useColorModeClass(colorMode);\n // Undo scroll events, preventing viewport from shifting when nodes outside of it are focused\n const wrapperOnScroll = useCallback((e) => {\n e.currentTarget.scrollTo({ top: 0, left: 0, behavior: 'instant' });\n onScroll?.(e);\n }, [onScroll]);\n return (jsx(\"div\", { \"data-testid\": \"rf__wrapper\", ...rest, onScroll: wrapperOnScroll, style: { ...style, ...wrapperStyle }, ref: ref, className: cc(['react-flow', className, colorModeClassName]), id: id, role: \"application\", children: jsxs(Wrapper, { nodes: nodes, edges: edges, width: width, height: height, fitView: fitView, fitViewOptions: fitViewOptions, minZoom: minZoom, maxZoom: maxZoom, nodeOrigin: nodeOrigin, nodeExtent: nodeExtent, zIndexMode: zIndexMode, children: [jsx(StoreUpdater, { nodes: nodes, edges: edges, defaultNodes: defaultNodes, defaultEdges: defaultEdges, onConnect: onConnect, onConnectStart: onConnectStart, onConnectEnd: onConnectEnd, onClickConnectStart: onClickConnectStart, onClickConnectEnd: onClickConnectEnd, nodesDraggable: nodesDraggable, autoPanOnNodeFocus: autoPanOnNodeFocus, nodesConnectable: nodesConnectable, nodesFocusable: nodesFocusable, edgesFocusable: edgesFocusable, edgesReconnectable: edgesReconnectable, elementsSelectable: elementsSelectable, elevateNodesOnSelect: elevateNodesOnSelect, elevateEdgesOnSelect: elevateEdgesOnSelect, minZoom: minZoom, maxZoom: maxZoom, nodeExtent: nodeExtent, onNodesChange: onNodesChange, onEdgesChange: onEdgesChange, snapToGrid: snapToGrid, snapGrid: snapGrid, connectionMode: connectionMode, translateExtent: translateExtent, connectOnClick: connectOnClick, defaultEdgeOptions: defaultEdgeOptions, fitView: fitView, fitViewOptions: fitViewOptions, onNodesDelete: onNodesDelete, onEdgesDelete: onEdgesDelete, onDelete: onDelete, onNodeDragStart: onNodeDragStart, onNodeDrag: onNodeDrag, onNodeDragStop: onNodeDragStop, onSelectionDrag: onSelectionDrag, onSelectionDragStart: onSelectionDragStart, onSelectionDragStop: onSelectionDragStop, onMove: onMove, onMoveStart: onMoveStart, onMoveEnd: onMoveEnd, noPanClassName: noPanClassName, nodeOrigin: nodeOrigin, rfId: rfId, autoPanOnConnect: autoPanOnConnect, autoPanOnNodeDrag: autoPanOnNodeDrag, autoPanSpeed: autoPanSpeed, onError: onError, connectionRadius: connectionRadius, isValidConnection: isValidConnection, selectNodesOnDrag: selectNodesOnDrag, nodeDragThreshold: nodeDragThreshold, connectionDragThreshold: connectionDragThreshold, onBeforeDelete: onBeforeDelete, debug: debug, ariaLabelConfig: ariaLabelConfig, zIndexMode: zIndexMode }), jsx(GraphView, { onInit: onInit, onNodeClick: onNodeClick, onEdgeClick: onEdgeClick, onNodeMouseEnter: onNodeMouseEnter, onNodeMouseMove: onNodeMouseMove, onNodeMouseLeave: onNodeMouseLeave, onNodeContextMenu: onNodeContextMenu, onNodeDoubleClick: onNodeDoubleClick, nodeTypes: nodeTypes, edgeTypes: edgeTypes, connectionLineType: connectionLineType, connectionLineStyle: connectionLineStyle, connectionLineComponent: connectionLineComponent, connectionLineContainerStyle: connectionLineContainerStyle, selectionKeyCode: selectionKeyCode, selectionOnDrag: selectionOnDrag, selectionMode: selectionMode, deleteKeyCode: deleteKeyCode, multiSelectionKeyCode: multiSelectionKeyCode, panActivationKeyCode: panActivationKeyCode, zoomActivationKeyCode: zoomActivationKeyCode, onlyRenderVisibleElements: onlyRenderVisibleElements, defaultViewport: defaultViewport$1, translateExtent: translateExtent, minZoom: minZoom, maxZoom: maxZoom, preventScrolling: preventScrolling, zoomOnScroll: zoomOnScroll, zoomOnPinch: zoomOnPinch, zoomOnDoubleClick: zoomOnDoubleClick, panOnScroll: panOnScroll, panOnScrollSpeed: panOnScrollSpeed, panOnScrollMode: panOnScrollMode, panOnDrag: panOnDrag, autoPanOnSelection: autoPanOnSelection, onPaneClick: onPaneClick, onPaneMouseEnter: onPaneMouseEnter, onPaneMouseMove: onPaneMouseMove, onPaneMouseLeave: onPaneMouseLeave, onPaneScroll: onPaneScroll, onPaneContextMenu: onPaneContextMenu, paneClickDistance: paneClickDistance, nodeClickDistance: nodeClickDistance, onSelectionContextMenu: onSelectionContextMenu, onSelectionStart: onSelectionStart, onSelectionEnd: onSelectionEnd, onReconnect: onReconnect, onReconnectStart: onReconnectStart, onReconnectEnd: onReconnectEnd, onEdgeContextMenu: onEdgeContextMenu, onEdgeDoubleClick: onEdgeDoubleClick, onEdgeMouseEnter: onEdgeMouseEnter, onEdgeMouseMove: onEdgeMouseMove, onEdgeMouseLeave: onEdgeMouseLeave, reconnectRadius: reconnectRadius, defaultMarkerColor: defaultMarkerColor, noDragClassName: noDragClassName, noWheelClassName: noWheelClassName, noPanClassName: noPanClassName, rfId: rfId, disableKeyboardA11y: disableKeyboardA11y, nodeExtent: nodeExtent, viewport: viewport, onViewportChange: onViewportChange }), jsx(SelectionListener, { onSelectionChange: onSelectionChange }), children, jsx(Attribution, { proOptions: proOptions, position: attributionPosition }), jsx(A11yDescriptions, { rfId: rfId, disableKeyboardA11y: disableKeyboardA11y })] }) }));\n}\n/**\n * The `` component is the heart of your React Flow application.\n * It renders your nodes and edges and handles user interaction\n *\n * @public\n *\n * @example\n * ```tsx\n *import { ReactFlow } from '@xyflow/react'\n *\n *export default function Flow() {\n * return ();\n *}\n *```\n */\nvar index = fixedForwardRef(ReactFlow);\n\nconst selector$6 = (s) => s.domNode?.querySelector('.react-flow__edgelabel-renderer');\n/**\n * Edges are SVG-based. If you want to render more complex labels you can use the\n * `` component to access a div based renderer. This component\n * is a portal that renders the label in a `` that is positioned on top of\n * the edges. You can see an example usage of the component in the\n * [edge label renderer example](/examples/edges/edge-label-renderer).\n * @public\n *\n * @example\n * ```jsx\n * import React from 'react';\n * import { getBezierPath, EdgeLabelRenderer, BaseEdge } from '@xyflow/react';\n *\n * export function CustomEdge({ id, data, ...props }) {\n * const [edgePath, labelX, labelY] = getBezierPath(props);\n *\n * return (\n * <>\n * \n * \n * \n * {data.label}\n * \n * \n * \n * );\n * };\n * ```\n *\n * @remarks The `` has no pointer events by default. If you want to\n * add mouse interactions you need to set the style `pointerEvents: all` and add\n * the `nopan` class on the label or the element you want to interact with.\n */\nfunction EdgeLabelRenderer({ children }) {\n const edgeLabelRenderer = useStore(selector$6);\n if (!edgeLabelRenderer) {\n return null;\n }\n return createPortal(children, edgeLabelRenderer);\n}\n\nconst selector$5 = (s) => s.domNode?.querySelector('.react-flow__viewport-portal');\n/**\n * The `` component can be used to add components to the same viewport\n * of the flow where nodes and edges are rendered. This is useful when you want to render\n * your own components that are adhere to the same coordinate system as the nodes & edges\n * and are also affected by zooming and panning\n * @public\n * @example\n *\n * ```jsx\n *import React from 'react';\n *import { ViewportPortal } from '@xyflow/react';\n *\n *export default function () {\n * return (\n * \n * \n * This div is positioned at [100, 100] on the flow.\n * \n * \n * );\n *}\n *```\n */\nfunction ViewportPortal({ children }) {\n const viewPortalDiv = useStore(selector$5);\n if (!viewPortalDiv) {\n return null;\n }\n return createPortal(children, viewPortalDiv);\n}\n\n/**\n * When you programmatically add or remove handles to a node or update a node's\n * handle position, you need to let React Flow know about it using this hook. This\n * will update the internal dimensions of the node and properly reposition handles\n * on the canvas if necessary.\n *\n * @public\n * @returns Use this function to tell React Flow to update the internal state of one or more nodes\n * that you have changed programmatically.\n *\n * @example\n * ```jsx\n *import { useCallback, useState } from 'react';\n *import { Handle, useUpdateNodeInternals } from '@xyflow/react';\n *\n *export default function RandomHandleNode({ id }) {\n * const updateNodeInternals = useUpdateNodeInternals();\n * const [handleCount, setHandleCount] = useState(0);\n * const randomizeHandleCount = useCallback(() => {\n * setHandleCount(Math.floor(Math.random() * 10));\n * updateNodeInternals(id);\n * }, [id, updateNodeInternals]);\n *\n * return (\n * <>\n * {Array.from({ length: handleCount }).map((_, index) => (\n * \n * ))}\n *\n *
\n * \n *
There are {handleCount} handles on this node.
\n *
\n * \n * );\n *}\n *```\n * @remarks This hook can only be used in a component that is a child of a\n *{@link ReactFlowProvider} or a {@link ReactFlow} component.\n */\nfunction useUpdateNodeInternals() {\n const store = useStoreApi();\n return useCallback((id) => {\n const { domNode, updateNodeInternals } = store.getState();\n const updateIds = Array.isArray(id) ? id : [id];\n const updates = new Map();\n updateIds.forEach((updateId) => {\n const nodeElement = domNode?.querySelector(`.react-flow__node[data-id=\"${updateId}\"]`);\n if (nodeElement) {\n updates.set(updateId, { id: updateId, nodeElement, force: true });\n }\n });\n requestAnimationFrame(() => updateNodeInternals(updates, { triggerFitView: false }));\n }, []);\n}\n\nconst nodesSelector = (state) => state.nodes;\n/**\n * This hook returns an array of the current nodes. Components that use this hook\n * will re-render **whenever any node changes**, including when a node is selected\n * or moved.\n *\n * @public\n * @returns An array of all nodes currently in the flow.\n *\n * @example\n * ```jsx\n *import { useNodes } from '@xyflow/react';\n *\n *export default function() {\n * const nodes = useNodes();\n *\n * return
There are currently {nodes.length} nodes!
;\n *}\n *```\n */\nfunction useNodes() {\n const nodes = useStore(nodesSelector, shallow);\n return nodes;\n}\n\nconst edgesSelector = (state) => state.edges;\n/**\n * This hook returns an array of the current edges. Components that use this hook\n * will re-render **whenever any edge changes**.\n *\n * @public\n * @returns An array of all edges currently in the flow.\n *\n * @example\n * ```tsx\n *import { useEdges } from '@xyflow/react';\n *\n *export default function () {\n * const edges = useEdges();\n *\n * return
There are currently {edges.length} edges!
;\n *}\n *```\n */\nfunction useEdges() {\n const edges = useStore(edgesSelector, shallow);\n return edges;\n}\n\nconst viewportSelector = (state) => ({\n x: state.transform[0],\n y: state.transform[1],\n zoom: state.transform[2],\n});\n/**\n * The `useViewport` hook is a convenient way to read the current state of the\n * {@link Viewport} in a component. Components that use this hook\n * will re-render **whenever the viewport changes**.\n *\n * @public\n * @returns The current viewport.\n *\n * @example\n *\n *```jsx\n *import { useViewport } from '@xyflow/react';\n *\n *export default function ViewportDisplay() {\n * const { x, y, zoom } = useViewport();\n *\n * return (\n *
\n *
\n * The viewport is currently at ({x}, {y}) and zoomed to {zoom}.\n *
\n *
\n * );\n *}\n *```\n *\n * @remarks This hook can only be used in a component that is a child of a\n *{@link ReactFlowProvider} or a {@link ReactFlow} component.\n */\nfunction useViewport() {\n const viewport = useStore(viewportSelector, shallow);\n return viewport;\n}\n\n/**\n * This hook makes it easy to prototype a controlled flow where you manage the\n * state of nodes and edges outside the `ReactFlowInstance`. You can think of it\n * like React's `useState` hook with an additional helper callback.\n *\n * @public\n * @returns\n * - `nodes`: The current array of nodes. You might pass this directly to the `nodes` prop of your\n * `` component, or you may want to manipulate it first to perform some layouting,\n * for example.\n * - `setNodes`: A function that you can use to update the nodes. You can pass it a new array of\n * nodes or a callback that receives the current array of nodes and returns a new array of nodes.\n * This is the same as the second element of the tuple returned by React's `useState` hook.\n * - `onNodesChange`: A handy callback that can take an array of `NodeChanges` and update the nodes\n * state accordingly. You'll typically pass this directly to the `onNodesChange` prop of your\n * `` component.\n * @example\n *\n *```tsx\n *import { ReactFlow, useNodesState, useEdgesState } from '@xyflow/react';\n *\n *const initialNodes = [];\n *const initialEdges = [];\n *\n *export default function () {\n * const [nodes, setNodes, onNodesChange] = useNodesState(initialNodes);\n * const [edges, setEdges, onEdgesChange] = useEdgesState(initialEdges);\n *\n * return (\n * \n * );\n *}\n *```\n *\n * @remarks This hook was created to make prototyping easier and our documentation\n * examples clearer. Although it is OK to use this hook in production, in\n * practice you may want to use a more sophisticated state management solution\n * like Zustand {@link https://reactflow.dev/docs/guides/state-management/} instead.\n *\n */\nfunction useNodesState(initialNodes) {\n const [nodes, setNodes] = useState(initialNodes);\n const onNodesChange = useCallback((changes) => setNodes((nds) => applyNodeChanges(changes, nds)), []);\n return [nodes, setNodes, onNodesChange];\n}\n/**\n * This hook makes it easy to prototype a controlled flow where you manage the\n * state of nodes and edges outside the `ReactFlowInstance`. You can think of it\n * like React's `useState` hook with an additional helper callback.\n *\n * @public\n * @returns\n * - `edges`: The current array of edges. You might pass this directly to the `edges` prop of your\n * `` component, or you may want to manipulate it first to perform some layouting,\n * for example.\n *\n * - `setEdges`: A function that you can use to update the edges. You can pass it a new array of\n * edges or a callback that receives the current array of edges and returns a new array of edges.\n * This is the same as the second element of the tuple returned by React's `useState` hook.\n *\n * - `onEdgesChange`: A handy callback that can take an array of `EdgeChanges` and update the edges\n * state accordingly. You'll typically pass this directly to the `onEdgesChange` prop of your\n * `` component.\n * @example\n *\n *```tsx\n *import { ReactFlow, useNodesState, useEdgesState } from '@xyflow/react';\n *\n *const initialNodes = [];\n *const initialEdges = [];\n *\n *export default function () {\n * const [nodes, setNodes, onNodesChange] = useNodesState(initialNodes);\n * const [edges, setEdges, onEdgesChange] = useEdgesState(initialEdges);\n *\n * return (\n * \n * );\n *}\n *```\n *\n * @remarks This hook was created to make prototyping easier and our documentation\n * examples clearer. Although it is OK to use this hook in production, in\n * practice you may want to use a more sophisticated state management solution\n * like Zustand {@link https://reactflow.dev/docs/guides/state-management/} instead.\n *\n */\nfunction useEdgesState(initialEdges) {\n const [edges, setEdges] = useState(initialEdges);\n const onEdgesChange = useCallback((changes) => setEdges((eds) => applyEdgeChanges(changes, eds)), []);\n return [edges, setEdges, onEdgesChange];\n}\n\n/**\n * The `useOnViewportChange` hook lets you listen for changes to the viewport such\n * as panning and zooming. You can provide a callback for each phase of a viewport\n * change: `onStart`, `onChange`, and `onEnd`.\n *\n * @public\n * @example\n * ```jsx\n *import { useCallback } from 'react';\n *import { useOnViewportChange } from '@xyflow/react';\n *\n *function ViewportChangeLogger() {\n * useOnViewportChange({\n * onStart: (viewport: Viewport) => console.log('start', viewport),\n * onChange: (viewport: Viewport) => console.log('change', viewport),\n * onEnd: (viewport: Viewport) => console.log('end', viewport),\n * });\n *\n * return null;\n *}\n *```\n */\nfunction useOnViewportChange({ onStart, onChange, onEnd }) {\n const store = useStoreApi();\n useEffect(() => {\n store.setState({ onViewportChangeStart: onStart });\n }, [onStart]);\n useEffect(() => {\n store.setState({ onViewportChange: onChange });\n }, [onChange]);\n useEffect(() => {\n store.setState({ onViewportChangeEnd: onEnd });\n }, [onEnd]);\n}\n\n/**\n * This hook lets you listen for changes to both node and edge selection. As the\n *name implies, the callback you provide will be called whenever the selection of\n *_either_ nodes or edges changes.\n *\n * @public\n * @example\n * ```jsx\n *import { useState } from 'react';\n *import { ReactFlow, useOnSelectionChange } from '@xyflow/react';\n *\n *function SelectionDisplay() {\n * const [selectedNodes, setSelectedNodes] = useState([]);\n * const [selectedEdges, setSelectedEdges] = useState([]);\n *\n * // the passed handler has to be memoized, otherwise the hook will not work correctly\n * const onChange = useCallback(({ nodes, edges }) => {\n * setSelectedNodes(nodes.map((node) => node.id));\n * setSelectedEdges(edges.map((edge) => edge.id));\n * }, []);\n *\n * useOnSelectionChange({\n * onChange,\n * });\n *\n * return (\n *
\n *
Selected nodes: {selectedNodes.join(', ')}
\n *
Selected edges: {selectedEdges.join(', ')}
\n *
\n * );\n *}\n *```\n *\n * @remarks You need to memoize the passed `onChange` handler, otherwise the hook will not work correctly.\n */\nfunction useOnSelectionChange({ onChange, }) {\n const store = useStoreApi();\n useEffect(() => {\n const nextOnSelectionChangeHandlers = [...store.getState().onSelectionChangeHandlers, onChange];\n store.setState({ onSelectionChangeHandlers: nextOnSelectionChangeHandlers });\n return () => {\n const nextHandlers = store.getState().onSelectionChangeHandlers.filter((fn) => fn !== onChange);\n store.setState({ onSelectionChangeHandlers: nextHandlers });\n };\n }, [onChange]);\n}\n\nconst selector$4 = (options) => (s) => {\n if (!options.includeHiddenNodes) {\n return s.nodesInitialized;\n }\n if (s.nodeLookup.size === 0) {\n return false;\n }\n for (const [, { internals }] of s.nodeLookup) {\n if (internals.handleBounds === undefined || !nodeHasDimensions(internals.userNode)) {\n return false;\n }\n }\n return true;\n};\n/**\n * This hook tells you whether all the nodes in a flow have been measured and given\n *a width and height. When you add a node to the flow, this hook will return\n *`false` and then `true` again once the node has been measured.\n *\n * @public\n * @returns Whether or not the nodes have been initialized by the `` component and\n * given a width and height.\n *\n * @example\n * ```jsx\n *import { useReactFlow, useNodesInitialized } from '@xyflow/react';\n *import { useEffect, useState } from 'react';\n *\n *const options = {\n * includeHiddenNodes: false,\n *};\n *\n *export default function useLayout() {\n * const { getNodes } = useReactFlow();\n * const nodesInitialized = useNodesInitialized(options);\n * const [layoutedNodes, setLayoutedNodes] = useState(getNodes());\n *\n * useEffect(() => {\n * if (nodesInitialized) {\n * setLayoutedNodes(yourLayoutingFunction(getNodes()));\n * }\n * }, [nodesInitialized]);\n *\n * return layoutedNodes;\n *}\n *```\n */\nfunction useNodesInitialized(options = {\n includeHiddenNodes: false,\n}) {\n const initialized = useStore(selector$4(options));\n return initialized;\n}\n\n/**\n * Hook to check if a is connected to another and get the connections.\n *\n * @public\n * @deprecated Use `useNodeConnections` instead.\n * @returns An array with handle connections.\n */\nfunction useHandleConnections({ type, id, nodeId, onConnect, onDisconnect, }) {\n console.warn('[DEPRECATED] `useHandleConnections` is deprecated. Instead use `useNodeConnections` https://reactflow.dev/api-reference/hooks/useNodeConnections');\n const _nodeId = useNodeId();\n const currentNodeId = nodeId ?? _nodeId;\n const prevConnections = useRef(null);\n const connections = useStore((state) => state.connectionLookup.get(`${currentNodeId}-${type}${id ? `-${id}` : ''}`), areConnectionMapsEqual);\n useEffect(() => {\n // @todo discuss if onConnect/onDisconnect should be called when the component mounts/unmounts\n if (prevConnections.current && prevConnections.current !== connections) {\n const _connections = connections ?? new Map();\n handleConnectionChange(prevConnections.current, _connections, onDisconnect);\n handleConnectionChange(_connections, prevConnections.current, onConnect);\n }\n prevConnections.current = connections ?? new Map();\n }, [connections, onConnect, onDisconnect]);\n return useMemo(() => Array.from(connections?.values() ?? []), [connections]);\n}\n\nconst error014 = errorMessages['error014']();\n/**\n * This hook returns an array of connections on a specific node, handle type ('source', 'target') or handle ID.\n *\n * @public\n * @returns An array with connections.\n *\n * @example\n * ```jsx\n *import { useNodeConnections } from '@xyflow/react';\n *\n *export default function () {\n * const connections = useNodeConnections({\n * handleType: 'target',\n * handleId: 'my-handle',\n * });\n *\n * return (\n *
There are currently {connections.length} incoming connections!
\n * );\n *}\n *```\n */\nfunction useNodeConnections({ id, handleType, handleId, onConnect, onDisconnect, } = {}) {\n const nodeId = useNodeId();\n const currentNodeId = id ?? nodeId;\n if (!currentNodeId) {\n throw new Error(error014);\n }\n const prevConnections = useRef(null);\n const connections = useStore((state) => state.connectionLookup.get(`${currentNodeId}${handleType ? (handleId ? `-${handleType}-${handleId}` : `-${handleType}`) : ''}`), areConnectionMapsEqual);\n useEffect(() => {\n // @todo discuss if onConnect/onDisconnect should be called when the component mounts/unmounts\n if (prevConnections.current && prevConnections.current !== connections) {\n const _connections = connections ?? new Map();\n handleConnectionChange(prevConnections.current, _connections, onDisconnect);\n handleConnectionChange(_connections, prevConnections.current, onConnect);\n }\n prevConnections.current = connections ?? new Map();\n }, [connections, onConnect, onDisconnect]);\n return useMemo(() => Array.from(connections?.values() ?? []), [connections]);\n}\n\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nfunction useNodesData(nodeIds) {\n const nodesData = useStore(useCallback((s) => {\n const data = [];\n const isArrayOfIds = Array.isArray(nodeIds);\n const _nodeIds = isArrayOfIds ? nodeIds : [nodeIds];\n for (const nodeId of _nodeIds) {\n const node = s.nodeLookup.get(nodeId);\n if (node) {\n data.push({\n id: node.id,\n type: node.type,\n data: node.data,\n });\n }\n }\n return isArrayOfIds ? data : data[0] ?? null;\n }, [nodeIds]), shallowNodeData);\n return nodesData;\n}\n\n/**\n * This hook returns the internal representation of a specific node.\n * Components that use this hook will re-render **whenever the node changes**,\n * including when a node is selected or moved.\n *\n * @public\n * @param id - The ID of a node you want to observe.\n * @returns The `InternalNode` object for the node with the given ID.\n *\n * @example\n * ```tsx\n *import { useInternalNode } from '@xyflow/react';\n *\n *export default function () {\n * const internalNode = useInternalNode('node-1');\n * const absolutePosition = internalNode.internals.positionAbsolute;\n *\n * return (\n *