@xyflow/react 12.0.0-next.6 → 12.0.0-next.7

package/dist/esm/index.mjs

@@ -2,8 +2,8 @@
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import { createContext, useContext, useMemo, useEffect, useRef, useState, useCallback, forwardRef, memo } from 'react';
 import cc from 'classcat';
-import { errorMessages, infiniteExtent, isInputDOMNode, fitView, getViewportForBounds, pointToRendererPoint, rendererPointToPoint, isNodeBase, isEdgeBase, getOutgoersBase, getIncomersBase, addEdgeBase, updateEdgeBase, getConnectedEdgesBase, getElementsToRemove, isRectObject, nodeToRect, getOverlappingArea, getDimensions, XYPanZoom, PanOnScrollMode, SelectionMode, getEventPosition, getNodesInside, XYDrag, snapPosition, calcNextPosition, Position, isMouseEvent, XYHandle, getHostForElement, getNodesBounds, clampPosition, internalsSymbol, getPositionWithOrigin, elementSelectionKeys, isEdgeVisible, MarkerType, createMarkerIds, isNumeric, getBezierEdgeCenter, getSmoothStepPath, getStraightPath, getBezierPath, getEdgePosition, getElevatedEdgeZIndex, getMarkerId, ConnectionMode, ConnectionLineType, updateConnectionLookup, adoptUserProvidedNodes, updateNodeDimensions, updateAbsolutePositions, panBy, isMacOs, areConnectionMapsEqual, handleConnectionChange, getNodePositionWithOrigin, XYMinimap, getBoundsOfRects, ResizeControlVariant, XYResizer, XY_RESIZER_LINE_POSITIONS, XY_RESIZER_HANDLE_POSITIONS, getNodeToolbarTransform } from '@xyflow/system';
-export { ConnectionLineType, ConnectionMode, MarkerType, PanOnScrollMode, Position, SelectionMode, getBezierEdgeCenter, getBezierPath, getEdgeCenter, getNodesBounds, getSmoothStepPath, getStraightPath, getViewportForBounds, internalsSymbol } from '@xyflow/system';
+import { errorMessages, infiniteExtent, isInputDOMNode, fitView, getViewportForBounds, pointToRendererPoint, rendererPointToPoint, isNodeBase, isEdgeBase, getElementsToRemove, isRectObject, nodeToRect, getOverlappingArea, getDimensions, XYPanZoom, PanOnScrollMode, SelectionMode, getEventPosition, getNodesInside, XYDrag, snapPosition, calcNextPosition, Position, isMouseEvent, XYHandle, getHostForElement, addEdge, getNodesBounds, clampPosition, internalsSymbol, getPositionWithOrigin, elementSelectionKeys, isEdgeVisible, MarkerType, createMarkerIds, isNumeric, getBezierEdgeCenter, getSmoothStepPath, getStraightPath, getBezierPath, getEdgePosition, getElevatedEdgeZIndex, getMarkerId, ConnectionMode, ConnectionLineType, updateConnectionLookup, adoptUserProvidedNodes, updateNodeDimensions, updateAbsolutePositions, panBy, isMacOs, areConnectionMapsEqual, handleConnectionChange, getNodePositionWithOrigin, XYMinimap, getBoundsOfRects, ResizeControlVariant, XYResizer, XY_RESIZER_LINE_POSITIONS, XY_RESIZER_HANDLE_POSITIONS, getNodeToolbarTransform } from '@xyflow/system';
+export { ConnectionLineType, ConnectionMode, MarkerType, PanOnScrollMode, Position, SelectionMode, addEdge, getBezierEdgeCenter, getBezierPath, getConnectedEdges, getEdgeCenter, getIncomers, getNodesBounds, getOutgoers, getSmoothStepPath, getStraightPath, getViewportForBounds, internalsSymbol, updateEdge } from '@xyflow/system';
 import { useStoreWithEqualityFn, createWithEqualityFn } from 'zustand/traditional';
 import { shallow } from 'zustand/shallow';
 import { createPortal } from 'react-dom';
@@ -424,8 +424,8 @@ const useViewportHelper = () => {
                 const viewport = getViewportForBounds(bounds, width, height, minZoom, maxZoom, options?.padding ?? 0.1);
                 panZoom?.setViewport(viewport, { duration: options?.duration });
             },
-            screenToFlowPosition: (position) => {
-                const { transform, snapToGrid, snapGrid, domNode } = store.getState();
+            screenToFlowPosition: (position, options = { snapToGrid: true }) => {
+                const { transform, snapGrid, domNode } = store.getState();
                 if (!domNode) {
                     return position;
                 }
@@ -434,7 +434,7 @@ const useViewportHelper = () => {
                     x: position.x - domX,
                     y: position.y - domY,
                 };
-                return pointToRendererPoint(correctedPosition, transform, snapToGrid, snapGrid || [1, 1]);
+                return pointToRendererPoint(correctedPosition, transform, options.snapToGrid, snapGrid);
             },
             flowToScreenPosition: (position) => {
                 const { transform, domNode } = store.getState();
@@ -688,7 +688,7 @@ function getElementsDiffChanges({ items = [], lookup, }) {
  * @param element - The element to test
  * @returns A boolean indicating whether the element is an Node
  */
-const isNode = (isNodeBase);
+const isNode = (element) => isNodeBase(element);
 /**
  * Test whether an object is useable as an Edge
  * @public
@@ -696,50 +696,7 @@ const isNode = (isNodeBase);
  * @param element - The element to test
  * @returns A boolean indicating whether the element is an Edge
  */
-const isEdge = (isEdgeBase);
-/**
- * Pass in a node, and get connected nodes where edge.source === node.id
- * @public
- * @param node - The node to get the connected nodes from
- * @param nodes - The array of all nodes
- * @param edges - The array of all edges
- * @returns An array of nodes that are connected over eges where the source is the given node
- */
-const getOutgoers = (getOutgoersBase);
-/**
- * Pass in a node, and get connected nodes where edge.target === node.id
- * @public
- * @param node - The node to get the connected nodes from
- * @param nodes - The array of all nodes
- * @param edges - The array of all edges
- * @returns An array of nodes that are connected over eges where the target is the given node
- */
-const getIncomers = (getIncomersBase);
-/**
- * This util is a convenience function to add a new Edge to an array of edges
- * @remarks It also performs some validation to make sure you don't add an invalid edge or duplicate an existing one.
- * @public
- * @param edgeParams - Either an Edge or a Connection you want to add
- * @param edges -  The array of all current edges
- * @returns A new array of edges with the new edge added
- */
-const addEdge = (addEdgeBase);
-/**
- * A handy utility to update an existing Edge with new properties
- * @param oldEdge - The edge you want to update
- * @param newConnection - The new connection you want to update the edge with
- * @param edges - The array of all current edges
- * @param options.shouldReplaceId - should the id of the old edge be replaced with the new connection id
- * @returns the updated edges array
- */
-const updateEdge = (updateEdgeBase);
-/**
- * Get all connecting edges for a given set of nodes
- * @param nodes - Nodes you want to get the connected edges for
- * @param edges - All edges
- * @returns Array of edges that connect any of the given nodes with each other
- */
-const getConnectedEdges = (getConnectedEdgesBase);
+const isEdge = (element) => isEdgeBase(element);
 
 /**
  * Hook for accessing the ReactFlow instance.
@@ -883,6 +840,9 @@ function useReactFlow() {
     const getNodeRect = useCallback((nodeOrRect) => {
         const isRect = isRectObject(nodeOrRect);
         const node = isRect ? null : store.getState().nodeLookup.get(nodeOrRect.id);
+        if (!isRect && !node) {
+            return [null, null, isRect];
+        }
         const nodeRect = isRect ? nodeOrRect : nodeToRect(node);
         return [nodeRect, node, isRect];
     }, []);
@@ -1387,9 +1347,9 @@ const useNodeId = () => {
 };
 
 const selector$i = (s) => ({
-    connectionStartHandle: s.connectionStartHandle,
     connectOnClick: s.connectOnClick,
     noPanClassName: s.noPanClassName,
+    rfId: s.rfId,
 });
 const connectingSelector = (nodeId, handleId, type) => (state) => {
     const { connectionStartHandle: startHandle, connectionEndHandle: endHandle, connectionClickStartHandle: clickHandle, } = state;
@@ -1404,7 +1364,7 @@ const HandleComponent = forwardRef(({ type = 'source', position = Position.Top,
     const isTarget = type === 'target';
     const store = useStoreApi();
     const nodeId = useNodeId();
-    const { connectOnClick, noPanClassName } = useStore(selector$i, shallow);
+    const { connectOnClick, noPanClassName, rfId } = useStore(selector$i, shallow);
     const { connecting, clickConnecting } = useStore(connectingSelector(nodeId, handleId, type), shallow);
     if (!nodeId) {
         store.getState().onError?.('010', errorMessages['error010']());
@@ -1440,6 +1400,7 @@ const HandleComponent = forwardRef(({ type = 'source', position = Position.Top,
                 isTarget,
                 handleId,
                 nodeId,
+                flowId: currentStore.rfId,
                 panBy: currentStore.panBy,
                 cancelConnection: currentStore.cancelConnection,
                 onConnectStart: currentStore.onConnectStart,
@@ -1458,7 +1419,7 @@ const HandleComponent = forwardRef(({ type = 'source', position = Position.Top,
         }
     };
     const onClick = (event) => {
-        const { onClickConnectStart, onClickConnectEnd, connectionClickStartHandle, connectionMode, isValidConnection: isValidConnectionStore, lib, } = store.getState();
+        const { onClickConnectStart, onClickConnectEnd, connectionClickStartHandle, connectionMode, isValidConnection: isValidConnectionStore, lib, rfId: flowId, } = store.getState();
         if (!nodeId || (!connectionClickStartHandle && !isConnectableStart)) {
             return;
         }
@@ -1480,6 +1441,7 @@ const HandleComponent = forwardRef(({ type = 'source', position = Position.Top,
             fromHandleId: connectionClickStartHandle.handleId || null,
             fromType: connectionClickStartHandle.type,
             isValidConnection: isValidConnectionHandler,
+            flowId,
             doc,
             lib,
         });
@@ -1489,7 +1451,7 @@ const HandleComponent = forwardRef(({ type = 'source', position = Position.Top,
         onClickConnectEnd?.(event);
         store.setState({ connectionClickStartHandle: null });
     };
-    return (jsx("div", { "data-handleid": handleId, "data-nodeid": nodeId, "data-handlepos": position, "data-id": `${nodeId}-${handleId}-${type}`, className: cc([
+    return (jsx("div", { "data-handleid": handleId, "data-nodeid": nodeId, "data-handlepos": position, "data-id": `${rfId}-${nodeId}-${handleId}-${type}`, className: cc([
             'react-flow__handle',
             `react-flow__handle-${position}`,
             'nodrag',
@@ -2137,7 +2099,7 @@ function EdgeUpdateAnchors({ isUpdatable, edgeUpdaterRadius, edge, targetHandleI
         if (event.button !== 0) {
             return;
         }
-        const { autoPanOnConnect, domNode, isValidConnection, connectionMode, connectionRadius, lib, onConnectStart, onConnectEnd, cancelConnection, nodes, panBy, updateConnection, } = store.getState();
+        const { autoPanOnConnect, domNode, isValidConnection, connectionMode, connectionRadius, lib, onConnectStart, onConnectEnd, cancelConnection, nodes, rfId: flowId, panBy, updateConnection, } = store.getState();
         const nodeId = isSourceHandle ? edge.target : edge.source;
         const handleId = (isSourceHandle ? targetHandleId : sourceHandleId) || null;
         const handleType = isSourceHandle ? 'target' : 'source';
@@ -2160,6 +2122,7 @@ function EdgeUpdateAnchors({ isUpdatable, edgeUpdaterRadius, edge, targetHandleI
             isTarget,
             edgeUpdaterType: handleType,
             lib,
+            flowId,
             cancelConnection,
             panBy,
             isValidConnection,
@@ -3498,4 +3461,4 @@ function NodeToolbar({ nodeId, children, className, style, isVisible, position =
     return (jsx(NodeToolbarPortal, { children: jsx("div", { style: wrapperStyle, className: cc(['react-flow__node-toolbar', className]), ...rest, "data-id": nodes.reduce((acc, node) => `${acc}${node.id} `, '').trim(), children: children }) }));
 }
 
-export { Background, BackgroundVariant, BaseEdge, BezierEdge, ControlButton, Controls, EdgeLabelRenderer, EdgeText, Handle, MiniMap, NodeResizeControl, NodeResizer, NodeToolbar, Panel, ReactFlow, ReactFlowProvider, SimpleBezierEdge, SmoothStepEdge, StepEdge, StraightEdge, ViewportPortal, addEdge, applyEdgeChanges, applyNodeChanges, getConnectedEdges, getIncomers, getOutgoers, getSimpleBezierPath, handleParentExpand, isEdge, isNode, updateEdge, useConnection, useEdges, useEdgesState, useHandleConnections, useKeyPress, useNodeId, useNodes, useNodesData, useNodesInitialized, useNodesState, useOnSelectionChange, useOnViewportChange, useReactFlow, useStore, useStoreApi, useUpdateNodeInternals, useViewport };
+export { Background, BackgroundVariant, BaseEdge, BezierEdge, ControlButton, Controls, EdgeLabelRenderer, EdgeText, Handle, MiniMap, NodeResizeControl, NodeResizer, NodeToolbar, Panel, ReactFlow, ReactFlowProvider, SimpleBezierEdge, SmoothStepEdge, StepEdge, StraightEdge, ViewportPortal, applyEdgeChanges, applyNodeChanges, getSimpleBezierPath, handleParentExpand, isEdge, isNode, useConnection, useEdges, useEdgesState, useHandleConnections, useKeyPress, useNodeId, useNodes, useNodesData, useNodesInitialized, useNodesState, useOnSelectionChange, useOnViewportChange, useReactFlow, useStore, useStoreApi, useUpdateNodeInternals, useViewport };

package/dist/esm/types/changes.d.ts

@@ -35,7 +35,7 @@ export type NodeReplaceChange<NodeType extends Node = Node> = {
  * Union type of all possible node changes.
  * @public
  */
-export type NodeChange = NodeDimensionChange | NodePositionChange | NodeSelectionChange | NodeRemoveChange | NodeAddChange | NodeReplaceChange;
+export type NodeChange<NodeType extends Node = Node> = NodeDimensionChange | NodePositionChange | NodeSelectionChange | NodeRemoveChange | NodeAddChange<NodeType> | NodeReplaceChange<NodeType>;
 export type EdgeSelectionChange = NodeSelectionChange;
 export type EdgeRemoveChange = NodeRemoveChange;
 export type EdgeAddChange<EdgeType extends Edge = Edge> = {
@@ -47,5 +47,5 @@ export type EdgeReplaceChange<EdgeType extends Edge = Edge> = {
     item: EdgeType;
     type: 'replace';
 };
-export type EdgeChange = EdgeSelectionChange | EdgeRemoveChange | EdgeAddChange | EdgeReplaceChange;
+export type EdgeChange<EdgeType extends Edge = Edge> = EdgeSelectionChange | EdgeRemoveChange | EdgeAddChange<EdgeType> | EdgeReplaceChange<EdgeType>;
 //# sourceMappingURL=changes.d.ts.map

package/dist/esm/types/changes.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"changes.d.ts","sourceRoot":"","sources":["../../../../packages/react/src/types/changes.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAE7D,OAAO,KAAK,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,GAAG,CAAC;AAEpC,MAAM,MAAM,mBAAmB,GAAG;IAChC,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,YAAY,CAAC;IACnB,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AAEF,MAAM,MAAM,kBAAkB,GAAG;IAC/B,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,UAAU,CAAC;IACjB,QAAQ,CAAC,EAAE,UAAU,CAAC;IACtB,gBAAgB,CAAC,EAAE,UAAU,CAAC;IAC9B,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AAEF,MAAM,MAAM,mBAAmB,GAAG;IAChC,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,QAAQ,CAAC;IACf,QAAQ,EAAE,OAAO,CAAC;CACnB,CAAC;AAEF,MAAM,MAAM,gBAAgB,GAAG;IAC7B,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,QAAQ,CAAC;CAChB,CAAC;AAEF,MAAM,MAAM,aAAa,CAAC,QAAQ,SAAS,IAAI,GAAG,IAAI,IAAI;IACxD,IAAI,EAAE,QAAQ,CAAC;IACf,IAAI,EAAE,KAAK,CAAC;CACb,CAAC;AAEF,MAAM,MAAM,iBAAiB,CAAC,QAAQ,SAAS,IAAI,GAAG,IAAI,IAAI;IAC5D,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,QAAQ,CAAC;IACf,IAAI,EAAE,SAAS,CAAC;CACjB,CAAC;AAEF;;;GAGG;AACH,MAAM,MAAM,UAAU,GAClB,mBAAmB,GACnB,kBAAkB,GAClB,mBAAmB,GACnB,gBAAgB,GAChB,aAAa,GACb,iBAAiB,CAAC;AAEtB,MAAM,MAAM,mBAAmB,GAAG,mBAAmB,CAAC;AACtD,MAAM,MAAM,gBAAgB,GAAG,gBAAgB,CAAC;AAChD,MAAM,MAAM,aAAa,CAAC,QAAQ,SAAS,IAAI,GAAG,IAAI,IAAI;IACxD,IAAI,EAAE,QAAQ,CAAC;IACf,IAAI,EAAE,KAAK,CAAC;CACb,CAAC;AAEF,MAAM,MAAM,iBAAiB,CAAC,QAAQ,SAAS,IAAI,GAAG,IAAI,IAAI;IAC5D,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,QAAQ,CAAC;IACf,IAAI,EAAE,SAAS,CAAC;CACjB,CAAC;AACF,MAAM,MAAM,UAAU,GAAG,mBAAmB,GAAG,gBAAgB,GAAG,aAAa,GAAG,iBAAiB,CAAC"}
+{"version":3,"file":"changes.d.ts","sourceRoot":"","sources":["../../../../packages/react/src/types/changes.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAE7D,OAAO,KAAK,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,GAAG,CAAC;AAEpC,MAAM,MAAM,mBAAmB,GAAG;IAChC,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,YAAY,CAAC;IACnB,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AAEF,MAAM,MAAM,kBAAkB,GAAG;IAC/B,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,UAAU,CAAC;IACjB,QAAQ,CAAC,EAAE,UAAU,CAAC;IACtB,gBAAgB,CAAC,EAAE,UAAU,CAAC;IAC9B,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AAEF,MAAM,MAAM,mBAAmB,GAAG;IAChC,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,QAAQ,CAAC;IACf,QAAQ,EAAE,OAAO,CAAC;CACnB,CAAC;AAEF,MAAM,MAAM,gBAAgB,GAAG;IAC7B,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,QAAQ,CAAC;CAChB,CAAC;AAEF,MAAM,MAAM,aAAa,CAAC,QAAQ,SAAS,IAAI,GAAG,IAAI,IAAI;IACxD,IAAI,EAAE,QAAQ,CAAC;IACf,IAAI,EAAE,KAAK,CAAC;CACb,CAAC;AAEF,MAAM,MAAM,iBAAiB,CAAC,QAAQ,SAAS,IAAI,GAAG,IAAI,IAAI;IAC5D,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,QAAQ,CAAC;IACf,IAAI,EAAE,SAAS,CAAC;CACjB,CAAC;AAEF;;;GAGG;AACH,MAAM,MAAM,UAAU,CAAC,QAAQ,SAAS,IAAI,GAAG,IAAI,IAC/C,mBAAmB,GACnB,kBAAkB,GAClB,mBAAmB,GACnB,gBAAgB,GAChB,aAAa,CAAC,QAAQ,CAAC,GACvB,iBAAiB,CAAC,QAAQ,CAAC,CAAC;AAEhC,MAAM,MAAM,mBAAmB,GAAG,mBAAmB,CAAC;AACtD,MAAM,MAAM,gBAAgB,GAAG,gBAAgB,CAAC;AAChD,MAAM,MAAM,aAAa,CAAC,QAAQ,SAAS,IAAI,GAAG,IAAI,IAAI;IACxD,IAAI,EAAE,QAAQ,CAAC;IACf,IAAI,EAAE,KAAK,CAAC;CACb,CAAC;AAEF,MAAM,MAAM,iBAAiB,CAAC,QAAQ,SAAS,IAAI,GAAG,IAAI,IAAI;IAC5D,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,QAAQ,CAAC;IACf,IAAI,EAAE,SAAS,CAAC;CACjB,CAAC;AAEF,MAAM,MAAM,UAAU,CAAC,QAAQ,SAAS,IAAI,GAAG,IAAI,IAC/C,mBAAmB,GACnB,gBAAgB,GAChB,aAAa,CAAC,QAAQ,CAAC,GACvB,iBAAiB,CAAC,QAAQ,CAAC,CAAC"}

package/dist/esm/types/component-props.d.ts

@@ -6,118 +6,456 @@ import type { OnSelectionChangeFunc, NodeTypes, EdgeTypes, Node, Edge, Connectio
  * @public
  */
 export type ReactFlowProps = Omit<HTMLAttributes<HTMLDivElement>, 'onError'> & {
+    /** An array of nodes to render in a controlled flow.
+     * @example
+     * const nodes = [
+     *  {
+     *    id: 'node-1',
+     *    type: 'input',
+     *    data: { label: 'Node 1' },
+     *    position: { x: 250, y: 50 }
+     *  }
+     * ];
+     */
     nodes?: Node[];
+    /** An array of edges to render in a controlled flow.
+     * @example
+     * const edges = [
+     *  {
+     *    id: 'edge-1-2',
+     *    source: 'node-1',
+     *    target: 'node-2',
+     *  }
+     * ];
+     */
     edges?: Edge[];
+    /** The initial nodes to render in an uncontrolled flow. */
     defaultNodes?: Node[];
+    /** The initial edges to render in an uncontrolled flow. */
     defaultEdges?: Edge[];
+    /** Defaults to be applied to all new edges that are added to the flow.
+     *
+     * Properties on a new edge will override these defaults if they exist.
+     * @example
+     * const defaultEdgeOptions = {
+     *  type: 'customEdgeType',
+     *  animated: true,
+     *  interactionWidth: 10,
+     *  data: { label: 'custom label' },
+     *  hidden: false,
+     *  deletable: true,
+     *  selected: false,
+     *  focusable: true,
+     *  markerStart: EdgeMarker.ArrowClosed,
+     *  markerEnd: EdgeMarker.ArrowClosed,
+     *  zIndex: 12,
+     *  ariaLabel: 'custom aria label'
+     * }
+     */
     defaultEdgeOptions?: DefaultEdgeOptions;
+    /** This event handler is called when a user clicks on a node */
     onNodeClick?: NodeMouseHandler;
+    /** This event handler is called when a user double clicks on a node */
     onNodeDoubleClick?: NodeMouseHandler;
+    /** This event handler is called when mouse of a user enters a node */
     onNodeMouseEnter?: NodeMouseHandler;
+    /** This event handler is called when mouse of a user moves over a node */
     onNodeMouseMove?: NodeMouseHandler;
+    /** This event handler is called when mouse of a user leaves a node */
     onNodeMouseLeave?: NodeMouseHandler;
+    /** This event handler is called when a user right clicks on a node */
     onNodeContextMenu?: NodeMouseHandler;
+    /** This event handler is called when a user starts to drag a node */
     onNodeDragStart?: NodeDragHandler;
+    /** This event handler is called when a user drags a node */
     onNodeDrag?: NodeDragHandler;
+    /** This event handler is called when a user stops dragging a node */
     onNodeDragStop?: NodeDragHandler;
+    /** This event handler is called when a user clicks on an edge */
     onEdgeClick?: (event: ReactMouseEvent, edge: Edge) => void;
-    onEdgeUpdate?: OnEdgeUpdateFunc;
+    /** This event handler is called when a user right clicks on an edge */
     onEdgeContextMenu?: EdgeMouseHandler;
+    /** This event handler is called when mouse of a user enters an edge */
     onEdgeMouseEnter?: EdgeMouseHandler;
+    /** This event handler is called when mouse of a user moves over an edge */
     onEdgeMouseMove?: EdgeMouseHandler;
+    /** This event handler is called when mouse of a user leaves an edge */
     onEdgeMouseLeave?: EdgeMouseHandler;
+    /** This event handler is called when a user double clicks on an edge */
     onEdgeDoubleClick?: EdgeMouseHandler;
     onEdgeUpdateStart?: (event: ReactMouseEvent, edge: Edge, handleType: HandleType) => void;
     onEdgeUpdateEnd?: (event: MouseEvent | TouchEvent, edge: Edge, handleType: HandleType) => void;
+    onEdgeUpdate?: OnEdgeUpdateFunc;
+    /** This event handler is called when a Node is updated
+     * @example // Use NodesState hook to create edges and get onNodesChange handler
+     * import ReactFlow, { useNodesState } from '@xyflow/react';
+     * const [edges, setNodes, onNodesChange] = useNodesState(initialNodes);
+     *
+     * return (<ReactFlow onNodeChange={onNodeChange} {...rest} />)
+     * @example // Use helper function to update edge
+     * import ReactFlow, { applyNodeChanges } from '@xyflow/react';
+     *
+     * const onNodeChange = useCallback(
+     *  (changes) => setNode((eds) => applyNodeChanges(changes, eds)),
+     *  [],
+     * );
+     *
+     * return (<ReactFlow onNodeChange={onNodeChange} {...rest} />)
+     */
     onNodesChange?: OnNodesChange;
+    /** This event handler is called when a Edge is updated
+     * @example // Use EdgesState hook to create edges and get onEdgesChange handler
+     * import ReactFlow, { useEdgesState } from '@xyflow/react';
+     * const [edges, setEdges, onEdgesChange] = useEdgesState(initialEdges);
+     *
+     * return (<ReactFlow onEdgesChange={onEdgesChange} {...rest} />)
+     * @example // Use helper function to update edge
+     * import ReactFlow, { applyEdgeChanges } from '@xyflow/react';
+     *
+     * const onEdgesChange = useCallback(
+     *  (changes) => setEdges((eds) => applyEdgeChanges(changes, eds)),
+     *  [],
+     * );
+     *
+     * return (<ReactFlow onEdgesChange={onEdgesChange} {...rest} />)
+     */
     onEdgesChange?: OnEdgesChange;
+    /** This event handler gets called when a Node is deleted */
     onNodesDelete?: OnNodesDelete;
+    /** This event handler gets called when a Edge is deleted */
     onEdgesDelete?: OnEdgesDelete;
+    /** This event handler gets called when a Node or Edge is deleted */
     onDelete?: OnDelete;
+    /** This event handler gets called when a user starts to drag a selection box */
     onSelectionDragStart?: SelectionDragHandler;
+    /** This event handler gets called when a user drags a selection box */
     onSelectionDrag?: SelectionDragHandler;
+    /** This event handler gets called when a user stops dragging a selection box */
     onSelectionDragStop?: SelectionDragHandler;
     onSelectionStart?: (event: ReactMouseEvent) => void;
     onSelectionEnd?: (event: ReactMouseEvent) => void;
     onSelectionContextMenu?: (event: ReactMouseEvent, nodes: Node[]) => void;
+    /** When a connection line is completed and two nodes are connected by the user, this event fires with the new connection.
+     *
+     * You can use the addEdge utility to convert the connection to a complete edge.
+     * @example // Use helper function to update edges onConnect
+     * import ReactFlow, { addEdge } from '@xyflow/react';
+     *
+     * const onConnect = useCallback(
+     *  (params) => setEdges((eds) => addEdge(params, eds)),
+     *  [],
+     * );
+     *
+     * return (<ReactFlow onConnect={onConnect} {...rest} />)
+     */
     onConnect?: OnConnect;
+    /** This event handler gets called when a user starts to drag a connection line */
     onConnectStart?: OnConnectStart;
+    /** This event handler gets called when a user stops dragging a connection line */
     onConnectEnd?: OnConnectEnd;
     onClickConnectStart?: OnConnectStart;
     onClickConnectEnd?: OnConnectEnd;
+    /** This event handler gets called when a flow has finished initializing */
     onInit?: OnInit;
+    /** This event handler is called while the user is either panning or zooming the viewport. */
     onMove?: OnMove;
+    /** This event handler gets called when a user starts to pan or zoom the viewport */
     onMoveStart?: OnMoveStart;
+    /** This event handler gets called when a user stops panning or zooming the viewport */
     onMoveEnd?: OnMoveEnd;
+    /** This event handler gets called when a user changes group of selected elements in the flow */
     onSelectionChange?: OnSelectionChangeFunc;
+    /** This event handler gets called when user scroll inside the pane */
     onPaneScroll?: (event?: WheelEvent) => void;
+    /** This event handler gets called when user clicks inside the pane */
     onPaneClick?: (event: ReactMouseEvent) => void;
+    /** This event handler gets called when user right clicks inside the pane */
     onPaneContextMenu?: (event: ReactMouseEvent | MouseEvent) => void;
+    /** This event handler gets called when mouse enters the pane */
     onPaneMouseEnter?: (event: ReactMouseEvent) => void;
+    /** This event handler gets called when mouse moves over the pane */
     onPaneMouseMove?: (event: ReactMouseEvent) => void;
+    /** This event handler gets called when mouse leaves the pane */
     onPaneMouseLeave?: (event: ReactMouseEvent) => void;
+    /** This handler gets called before the user deletes nodes or edges and provides a way to abort the deletion by returning false. */
     onBeforeDelete?: OnBeforeDelete;
+    /** Custom node types to be available in a flow.
+     *
+     * React Flow matches a node's type to a component in the nodeTypes object.
+     * @example
+     * import CustomNode from './CustomNode';
+     *
+     * const nodeTypes = { nameOfNodeType: CustomNode };
+     */
     nodeTypes?: NodeTypes;
+    /** Custom edge types to be available in a flow.
+     *
+     * React Flow matches an edge's type to a component in the edgeTypes object.
+     * @example
+     * import CustomEdge from './CustomEdge';
+     *
+     * const edgeTypes = { nameOfEdgeType: CustomEdge };
+     */
     edgeTypes?: EdgeTypes;
+    /** The type of edge path to use for connection lines.
+     *
+     * Although created edges can be of any type, React Flow needs to know what type of path to render for the connection line before the edge is created!
+     */
     connectionLineType?: ConnectionLineType;
+    /** Styles to be applied to the connection line */
     connectionLineStyle?: CSSProperties;
+    /** React Component to be used as a connection line */
     connectionLineComponent?: ConnectionLineComponent;
+    /** Styles to be applied to the container of the connection line */
     connectionLineContainerStyle?: CSSProperties;
+    /** 'strict' connection mode will only allow you to connect source handles to target handles.
+     *
+     * 'loose' connection mode will allow you to connect handles of any type to one another.
+     * @default 'strict'
+     */
     connectionMode?: ConnectionMode;
+    /** Pressing down this key deletes all selected nodes & edges.
+     * @default 'Backspace'
+     */
     deleteKeyCode?: KeyCode | null;
+    /** If a key is set, you can pan the viewport while that key is held down even if panOnScroll is set to false.
+     *
+     * By setting this prop to null you can disable this functionality.
+     * @default 'Space'
+     */
     selectionKeyCode?: KeyCode | null;
+    /** Select multiple elements with a selection box, without pressing down selectionKey */
     selectionOnDrag?: boolean;
+    /** When set to "partial", when the user creates a selection box by click and dragging nodes that are only partially in the box are still selected.
+     * @default 'full'
+     */
     selectionMode?: SelectionMode;
+    /** If a key is set, you can pan the viewport while that key is held down even if panOnScroll is set to false.
+     *
+     * By setting this prop to null you can disable this functionality.
+     * @default 'Space'
+     */
     panActivationKeyCode?: KeyCode | null;
+    /** Pressing down this key you can select multiple elements by clicking.
+     * @default 'Meta' for macOS, "Ctrl" for other systems
+     */
     multiSelectionKeyCode?: KeyCode | null;
+    /** If a key is set, you can zoom the viewport while that key is held down even if panOnScroll is set to false.
+     *
+     * By setting this prop to null you can disable this functionality.
+     * @default 'Meta' for macOS, "Ctrl" for other systems
+     * */
     zoomActivationKeyCode?: KeyCode | null;
+    /** Set this prop to make the flow snap to the grid */
     snapToGrid?: boolean;
+    /** Grid all nodes will snap to
+     * @example [20, 20]
+     */
     snapGrid?: SnapGrid;
+    /** You can enable this optimisation to instruct Svelte Flow to only render nodes and edges that would be visible in the viewport.
+     *
+     * This might improve performance when you have a large number of nodes and edges but also adds an overhead.
+     * @default false
+     */
     onlyRenderVisibleElements?: boolean;
+    /** Controls if all nodes should be draggable
+     * @default true
+     */
     nodesDraggable?: boolean;
+    /** Controls if all nodes should be connectable to each other
+     * @default true
+     */
     nodesConnectable?: boolean;
+    /** Controls if all nodes should be focusable
+     * @default true
+     */
     nodesFocusable?: boolean;
+    /** Defines nodes relative position to its coordinates
+     * @example
+     * [0, 0] // default, top left
+     * [0.5, 0.5] // center
+     * [1, 1] // bottom right
+     */
     nodeOrigin?: NodeOrigin;
+    /** Controls if all edges should be focusable
+     * @default true
+     */
     edgesFocusable?: boolean;
+    /** Controls if all edges should be updateable
+     * @default true
+     */
     edgesUpdatable?: boolean;
+    /** Controls if all elements should (nodes & edges) be selectable
+     * @default true
+     */
     elementsSelectable?: boolean;
+    /** If true, nodes get selected on drag
+     * @default true
+     */
     selectNodesOnDrag?: boolean;
+    /** Enableing this prop allows users to pan the viewport by clicking and dragging.
+     *
+     * You can also set this prop to an array of numbers to limit which mouse buttons can activate panning.
+     * @example [0, 2] // allows panning with the left and right mouse buttons
+     * [0, 1, 2, 3, 4] // allows panning with all mouse buttons
+     */
     panOnDrag?: boolean | number[];
+    /** Minimum zoom level
+     * @default 0.1
+     */
     minZoom?: number;
+    /** Maximum zoom level
+     * @default 1
+     */
     maxZoom?: number;
+    /** Controlled viewport to be used instead of internal one */
     viewport?: Viewport;
+    /** Sets the initial position and zoom of the viewport.
+     *
+     * If a default viewport is provided but fitView is enabled, the default viewport will be ignored.
+     * @example
+     * const initialViewport = {
+     *  zoom: 0.5,
+     *  position: { x: 0, y: 0 }
+     * };
+     */
     defaultViewport?: Viewport;
+    /**
+     * Gets called when the viewport changes.
+     */
     onViewportChange?: (viewport: Viewport) => void;
+    /** By default the viewport extends infinitely. You can use this prop to set a boundary.
+     *
+     * The first pair of coordinates is the top left boundary and the second pair is the bottom right.
+     * @example [[-1000, -10000], [1000, 1000]]
+     */
     translateExtent?: CoordinateExtent;
+    /** Disabling this prop will allow the user to scroll the page even when their pointer is over the flow.
+     * @default true
+     */
     preventScrolling?: boolean;
+    /** By default nodes can be placed on an infinite flow. You can use this prop to set a boundary.
+     *
+     * The first pair of coordinates is the top left boundary and the second pair is the bottom right.
+     * @example [[-1000, -10000], [1000, 1000]]
+     */
     nodeExtent?: CoordinateExtent;
+    /** Color of edge markers
+     * @example "#b1b1b7"
+     */
     defaultMarkerColor?: string;
+    /** Controls if the viewport should zoom by scrolling inside the container */
     zoomOnScroll?: boolean;
+    /** Controls if the viewport should zoom by pinching on a touch screen */
     zoomOnPinch?: boolean;
+    /** Controls if the viewport should pan by scrolling inside the container
+     *
+     * Can be limited to a specific direction with panOnScrollMode
+     */
     panOnScroll?: boolean;
+    /** Controls how fast viewport should be panned on scroll.
+     *
+     * Use togther with panOnScroll prop.
+     */
     panOnScrollSpeed?: number;
+    /** This prop is used to limit the direction of panning when panOnScroll is enabled.
+     *
+     * The "free" option allows panning in any direction.
+     * @default "free"
+     * @example "horizontal" | "vertical"
+     */
     panOnScrollMode?: PanOnScrollMode;
+    /** Controls if the viewport should zoom by double clicking somewhere on the flow */
     zoomOnDoubleClick?: boolean;
     edgeUpdaterRadius?: number;
     noDragClassName?: string;
     noWheelClassName?: string;
     noPanClassName?: string;
+    /** If set, initial viewport will show all nodes & edges */
     fitView?: boolean;
+    /** Options to be used in combination with fitView
+     * @example
+     * const fitViewOptions = {
+     *  padding: 0.1,
+     *  includeHiddenNodes: false,
+     *  minZoom: 0.1,
+     *  maxZoom: 1,
+     *  duration: 200,
+     *  nodes: [{id: 'node-1'}, {id: 'node-2'}], // nodes to fit
+     * };
+     */
     fitViewOptions?: FitViewOptions;
+    /**The connectOnClick option lets you click or tap on a source handle to start a connection
+     * and then click on a target handle to complete the connection.
+     *
+     * If you set this option to false, users will need to drag the connection line to the target
+     * handle to create a connection.
+     */
     connectOnClick?: boolean;
+    /** Set position of the attribution
+     * @default 'bottom-right'
+     * @example 'top-left' | 'top-center' | 'top-right' | 'bottom-left' | 'bottom-center' | 'bottom-right'
+     */
     attributionPosition?: PanelPosition;
+    /** By default, we render a small attribution in the corner of your flows that links back to the project.
+     *
+     * Anyone is free to remove this attribution whether they're a Pro subscriber or not
+     * but we ask that you take a quick look at our {@link https://reactflow.dev/learn/troubleshooting/remove-attribution | removing attribution guide}
+     * before doing so.
+     */
     proOptions?: ProOptions;
+    /** Enabling this option will raise the z-index of nodes when they are selected.
+     * @default true
+     */
     elevateNodesOnSelect?: boolean;
+    /** Enabling this option will raise the z-index of edges when they are selected.
+     * @default true
+     */
     elevateEdgesOnSelect?: boolean;
+    /**
+     * Can be set true if built-in keyboard controls should be disabled.
+     * @default false
+     */
     disableKeyboardA11y?: boolean;
+    /** You can enable this prop to automatically pan the viewport while dragging a node.
+     * @default true
+     */
     autoPanOnNodeDrag?: boolean;
+    /** You can enable this prop to automatically pan the viewport while dragging a node.
+     * @default true
+     */
     autoPanOnConnect?: boolean;
+    /** You can enable this prop to automatically pan the viewport while making a new connection.
+     * @default true
+     */
     connectionRadius?: number;
+    /** Ocassionally something may happen that causes Svelte Flow to throw an error.
+     *
+     * Instead of exploding your application, we log a message to the console and then call this event handler.
+     * You might use it for additional logging or to show a message to the user.
+     */
     onError?: OnError;
+    /** This callback can be used to validate a new connection
+     *
+     * If you return false, the edge will not be added to your flow.
+     * If you have custom connection logic its preferred to use this callback over the isValidConnection prop on the handle component for performance reasons.
+     * @default (connection: Connection) => true
+     */
     isValidConnection?: IsValidConnection;
+    /** With a threshold greater than zero you can control the distinction between node drag and click events.
+     *
+     * If threshold equals 1, you need to drag the node 1 pixel before a drag event is fired.
+     * @default 1
+     */
     nodeDragThreshold?: number;
+    /** Sets a fixed width for the flow */
     width?: number;
+    /** Sets a fixed height for the flow */
     height?: number;
+    /** Controls color scheme used for styling the flow
+     * @default 'system'
+     * @example 'system' | 'light' | 'dark'
+     */
     colorMode?: ColorMode;
 };
 export type ReactFlowRefType = HTMLDivElement;