From aaebc462951ded8e91374c3e084d77af5ed7380a Mon Sep 17 00:00:00 2001 From: Dimitri POSTOLOV Date: Sat, 5 Apr 2025 17:02:47 +0200 Subject: [PATCH 01/23] Improve TSDoc comments for `type GetStraightPathParams` and `getStraightPath` function --- .changeset/neat-horses-invite.md | 5 +++++ .../system/src/utils/edges/straight-edge.ts | 19 ++++++++++++++----- 2 files changed, 19 insertions(+), 5 deletions(-) create mode 100644 .changeset/neat-horses-invite.md diff --git a/.changeset/neat-horses-invite.md b/.changeset/neat-horses-invite.md new file mode 100644 index 00000000..b04e58e3 --- /dev/null +++ b/.changeset/neat-horses-invite.md @@ -0,0 +1,5 @@ +--- +'@xyflow/system': patch +--- + +Improve TSDoc comments for `type GetStraightPathParams` and `getStraightPath` function diff --git a/packages/system/src/utils/edges/straight-edge.ts b/packages/system/src/utils/edges/straight-edge.ts index baa7093b..c5bc3db2 100644 --- a/packages/system/src/utils/edges/straight-edge.ts +++ b/packages/system/src/utils/edges/straight-edge.ts @@ -1,20 +1,29 @@ import { getEdgeCenter } from './general'; export type GetStraightPathParams = { + /** The `x` position of the source handle. */ sourceX: number; + /** The `y` position of the source handle. */ sourceY: number; + /** The `x` position of the target handle. */ targetX: number; + /** The `y` position of the target handle. */ targetY: number; }; /** * Calculates the straight line path between two points. * @public - * @param params.sourceX - The x position of the source handle - * @param params.sourceY - The y position of the source handle - * @param params.targetX - The x position of the target handle - * @param params.targetY - The y position of the target handle - * @returns A path string you can use in an SVG, the labelX and labelY position (center of path) and offsetX, offsetY between source handle and label + * @returns A path string you can use in an SVG, the `labelX` and `labelY` position (center of path) + * and `offsetX`, `offsetY` between source handle and label. + * + * - `path`: the path to use in an SVG `` element. + * - `labelX`: the `x` position you can use to render a label for this edge. + * - `labelY`: the `y` position you can use to render a label for this edge. + * - `offsetX`: the absolute difference between the source `x` position and the `x` position of the + * middle of this path. + * - `offsetY`: the absolute difference between the source `y` position and the `y` position of the + * middle of this path. * @example * ```js * const source = { x: 0, y: 20 }; From 02a3b74645799a3f0ce670b69365fa86ecb0616e Mon Sep 17 00:00:00 2001 From: Dimitri POSTOLOV Date: Sat, 5 Apr 2025 17:04:53 +0200 Subject: [PATCH 02/23] Improve TSDoc comments for `type GetSmoothStepPathParams` and `getSmoothStepPath` function --- .changeset/empty-apples-push.md | 5 +++ .../system/src/utils/edges/smoothstep-edge.ts | 36 +++++++++++++------ 2 files changed, 31 insertions(+), 10 deletions(-) create mode 100644 .changeset/empty-apples-push.md diff --git a/.changeset/empty-apples-push.md b/.changeset/empty-apples-push.md new file mode 100644 index 00000000..1ed770ee --- /dev/null +++ b/.changeset/empty-apples-push.md @@ -0,0 +1,5 @@ +--- +'@xyflow/system': patch +--- + +Improve TSDoc comments for `type GetSmoothStepPathParams` and `getSmoothStepPath` function diff --git a/packages/system/src/utils/edges/smoothstep-edge.ts b/packages/system/src/utils/edges/smoothstep-edge.ts index 0771f357..3de3fbdc 100644 --- a/packages/system/src/utils/edges/smoothstep-edge.ts +++ b/packages/system/src/utils/edges/smoothstep-edge.ts @@ -2,15 +2,29 @@ import { getEdgeCenter } from './general'; import { Position, type XYPosition } from '../../types'; export interface GetSmoothStepPathParams { + /** The `x` position of the source handle. */ sourceX: number; + /** The `y` position of the source handle. */ sourceY: number; + /** + * The position of the source handle. + * @default Position.Bottom + */ sourcePosition?: Position; + /** The `x` position of the target handle. */ targetX: number; + /** The `y` position of the target handle. */ targetY: number; + /** + * The position of the target handle. + * @default Position.Top + */ targetPosition?: Position; + /** @default 5 */ borderRadius?: number; centerX?: number; centerY?: number; + /** @default 20 */ offset?: number; } @@ -39,8 +53,8 @@ const getDirection = ({ const distance = (a: XYPosition, b: XYPosition) => Math.sqrt(Math.pow(b.x - a.x, 2) + Math.pow(b.y - a.y, 2)); /* - * ith this function we try to mimic a orthogonal edge routing behaviour - * It's not as good as a real orthogonal edge routing but it's faster and good enough as a default for step and smooth step edges + * With this function we try to mimic an orthogonal edge routing behaviour + * It's not as good as a real orthogonal edge routing, but it's faster and good enough as a default for step and smooth step edges */ function getPoints({ source, @@ -198,15 +212,9 @@ function getBend(a: XYPosition, b: XYPosition, c: XYPosition, size: number): str /** * The `getSmoothStepPath` util returns everything you need to render a stepped path - *between two nodes. The `borderRadius` property can be used to choose how rounded - *the corners of those steps are. + * between two nodes. The `borderRadius` property can be used to choose how rounded + * the corners of those steps are. * @public - * @param params.sourceX - The x position of the source handle - * @param params.sourceY - The y position of the source handle - * @param params.sourcePosition - The position of the source handle (default: Position.Bottom) - * @param params.targetX - The x position of the target handle - * @param params.targetY - The y position of the target handle - * @param params.targetPosition - The position of the target handle (default: Position.Top) * @returns A path string you can use in an SVG, the labelX and labelY position (center of path) and offsetX, offsetY between source handle and label * @example * ```js @@ -223,6 +231,14 @@ function getBend(a: XYPosition, b: XYPosition, c: XYPosition, size: number): str * }); * ``` * @remarks This function returns a tuple (aka a fixed-size array) to make it easier to work with multiple edge paths at once. + * @returns + * - `path`: the path to use in an SVG `` element. + * - `labelX`: the `x` position you can use to render a label for this edge. + * - `labelY`: the `y` position you can use to render a label for this edge. + * - `offsetX`: the absolute difference between the source `x` position and the `x` position of the + * middle of this path. + * - `offsetY`: the absolute difference between the source `y` position and the `y` position of the + * middle of this path. */ export function getSmoothStepPath({ sourceX, From 6ec942fc6501f81009c278cc995764bef3e8d03b Mon Sep 17 00:00:00 2001 From: Dimitri POSTOLOV Date: Sat, 5 Apr 2025 17:06:50 +0200 Subject: [PATCH 03/23] Improve TSDoc comments for `type GetBezierPathParams` and `getBezierPath` function --- .changeset/rich-mirrors-exist.md | 5 +++ .../system/src/utils/edges/bezier-edge.ts | 33 ++++++++++++++----- 2 files changed, 30 insertions(+), 8 deletions(-) create mode 100644 .changeset/rich-mirrors-exist.md diff --git a/.changeset/rich-mirrors-exist.md b/.changeset/rich-mirrors-exist.md new file mode 100644 index 00000000..1cff8576 --- /dev/null +++ b/.changeset/rich-mirrors-exist.md @@ -0,0 +1,5 @@ +--- +'@xyflow/system': patch +--- + +Improve TSDoc comments for `type GetBezierPathParams` and `getBezierPath` function diff --git a/packages/system/src/utils/edges/bezier-edge.ts b/packages/system/src/utils/edges/bezier-edge.ts index 3b373938..d5c0b6bb 100644 --- a/packages/system/src/utils/edges/bezier-edge.ts +++ b/packages/system/src/utils/edges/bezier-edge.ts @@ -1,12 +1,28 @@ import { Position } from '../../types'; export type GetBezierPathParams = { + /** The `x` position of the source handle. */ sourceX: number; + /** The `y` position of the source handle. */ sourceY: number; + /** + * The position of the source handle. + * @default Position.Bottom + */ sourcePosition?: Position; + /** The `x` position of the target handle. */ targetX: number; + /** The `y` position of the target handle. */ targetY: number; + /** + * The position of the target handle. + * @default Position.Top + */ targetPosition?: Position; + /** + * The curvature of the bezier edge. + * @default 0.25 + */ curvature?: number; }; @@ -75,14 +91,15 @@ function getControlWithCurvature({ pos, x1, y1, x2, y2, c }: GetControlWithCurva * The `getBezierPath` util returns everything you need to render a bezier edge *between two nodes. * @public - * @param params.sourceX - The x position of the source handle - * @param params.sourceY - The y position of the source handle - * @param params.sourcePosition - The position of the source handle (default: Position.Bottom) - * @param params.targetX - The x position of the target handle - * @param params.targetY - The y position of the target handle - * @param params.targetPosition - The position of the target handle (default: Position.Top) - * @param params.curvature - The curvature of the bezier edge - * @returns A path string you can use in an SVG, the labelX and labelY position (center of path) and offsetX, offsetY between source handle and label + * @returns A path string you can use in an SVG, the `labelX` and `labelY` position (center of path) + * and `offsetX`, `offsetY` between source handle and label. + * - `path`: the path to use in an SVG `` element. + * - `labelX`: the `x` position you can use to render a label for this edge. + * - `labelY`: the `y` position you can use to render a label for this edge. + * - `offsetX`: the absolute difference between the source `x` position and the `x` position of the + * middle of this path. + * - `offsetY`: the absolute difference between the source `y` position and the `y` position of the + * middle of this path. * @example * ```js * const source = { x: 0, y: 20 }; From 2a48c3442fa8e45864a66d714f948717a86feea0 Mon Sep 17 00:00:00 2001 From: Dimitri POSTOLOV Date: Sat, 5 Apr 2025 17:10:58 +0200 Subject: [PATCH 04/23] remove duplicate @returns tag --- .../system/src/utils/edges/smoothstep-edge.ts | 19 ++++++++++--------- 1 file changed, 10 insertions(+), 9 deletions(-) diff --git a/packages/system/src/utils/edges/smoothstep-edge.ts b/packages/system/src/utils/edges/smoothstep-edge.ts index 3de3fbdc..b10c5a07 100644 --- a/packages/system/src/utils/edges/smoothstep-edge.ts +++ b/packages/system/src/utils/edges/smoothstep-edge.ts @@ -215,7 +215,16 @@ function getBend(a: XYPosition, b: XYPosition, c: XYPosition, size: number): str * between two nodes. The `borderRadius` property can be used to choose how rounded * the corners of those steps are. * @public - * @returns A path string you can use in an SVG, the labelX and labelY position (center of path) and offsetX, offsetY between source handle and label + * @returns A path string you can use in an SVG, the `labelX` and `labelY` position (center of path) + * and `offsetX`, `offsetY` between source handle and label. + * + * - `path`: the path to use in an SVG `` element. + * - `labelX`: the `x` position you can use to render a label for this edge. + * - `labelY`: the `y` position you can use to render a label for this edge. + * - `offsetX`: the absolute difference between the source `x` position and the `x` position of the + * middle of this path. + * - `offsetY`: the absolute difference between the source `y` position and the `y` position of the + * middle of this path. * @example * ```js * const source = { x: 0, y: 20 }; @@ -231,14 +240,6 @@ function getBend(a: XYPosition, b: XYPosition, c: XYPosition, size: number): str * }); * ``` * @remarks This function returns a tuple (aka a fixed-size array) to make it easier to work with multiple edge paths at once. - * @returns - * - `path`: the path to use in an SVG `` element. - * - `labelX`: the `x` position you can use to render a label for this edge. - * - `labelY`: the `y` position you can use to render a label for this edge. - * - `offsetX`: the absolute difference between the source `x` position and the `x` position of the - * middle of this path. - * - `offsetY`: the absolute difference between the source `y` position and the `y` position of the - * middle of this path. */ export function getSmoothStepPath({ sourceX, From 0669606050bb2138a44a1591176ac8e16afeb0f1 Mon Sep 17 00:00:00 2001 From: Dimitri POSTOLOV Date: Sat, 5 Apr 2025 17:15:42 +0200 Subject: [PATCH 05/23] Fix typo `React Flow` -> `Svelte Flow` --- .changeset/chilly-parrots-rest.md | 5 +++++ packages/svelte/src/lib/types/edges.ts | 4 ++-- packages/svelte/src/lib/utils/index.ts | 4 ++-- 3 files changed, 9 insertions(+), 4 deletions(-) create mode 100644 .changeset/chilly-parrots-rest.md diff --git a/.changeset/chilly-parrots-rest.md b/.changeset/chilly-parrots-rest.md new file mode 100644 index 00000000..9801602e --- /dev/null +++ b/.changeset/chilly-parrots-rest.md @@ -0,0 +1,5 @@ +--- +'@xyflow/svelte': patch +--- + +Fix typo `React Flow` -> `Svelte Flow` diff --git a/packages/svelte/src/lib/types/edges.ts b/packages/svelte/src/lib/types/edges.ts index b2f6ba7e..2a9a1445 100644 --- a/packages/svelte/src/lib/types/edges.ts +++ b/packages/svelte/src/lib/types/edges.ts @@ -11,8 +11,8 @@ import type { import type { Node } from '$lib/types'; /** - * An `Edge` is the complete description with everything React Flow needs - *to know in order to render it. + * An `Edge` is the complete description with everything Svelte Flow needs to know in order to + * render it. * @public */ export type Edge< diff --git a/packages/svelte/src/lib/utils/index.ts b/packages/svelte/src/lib/utils/index.ts index 10f205ca..ed1aef35 100644 --- a/packages/svelte/src/lib/utils/index.ts +++ b/packages/svelte/src/lib/utils/index.ts @@ -3,7 +3,7 @@ import { isNodeBase, isEdgeBase } from '@xyflow/system'; import type { Edge, Node } from '$lib/types'; /** - * Test whether an object is useable as a Node + * Test whether an object is usable as a Node * @public * @remarks In TypeScript this is a type guard that will narrow the type of whatever you pass in to Node if it returns true * @param element - The element to test @@ -13,7 +13,7 @@ export const isNode = (element: unknown): element isNodeBase(element); /** - * Test whether an object is useable as an Edge + * Test whether an object is usable as an Edge * @public * @remarks In TypeScript this is a type guard that will narrow the type of whatever you pass in to Edge if it returns true * @param element - The element to test From 0c1436d6a371240cfa0adecea573c44fd42df7b3 Mon Sep 17 00:00:00 2001 From: Dimitri POSTOLOV Date: Sat, 5 Apr 2025 17:18:07 +0200 Subject: [PATCH 06/23] Improve TSDoc comments for `useConnection` hook --- .changeset/five-students-divide.md | 5 +++++ packages/react/src/hooks/useConnection.ts | 4 ++++ 2 files changed, 9 insertions(+) create mode 100644 .changeset/five-students-divide.md diff --git a/.changeset/five-students-divide.md b/.changeset/five-students-divide.md new file mode 100644 index 00000000..b4e9e528 --- /dev/null +++ b/.changeset/five-students-divide.md @@ -0,0 +1,5 @@ +--- +'@xyflow/react': patch +--- + +Improve TSDoc comments for `useConnection` hook diff --git a/packages/react/src/hooks/useConnection.ts b/packages/react/src/hooks/useConnection.ts index 9ed14b67..7c748003 100644 --- a/packages/react/src/hooks/useConnection.ts +++ b/packages/react/src/hooks/useConnection.ts @@ -30,6 +30,10 @@ function getSelector Date: Sat, 5 Apr 2025 17:20:34 +0200 Subject: [PATCH 07/23] Improve TSDoc comments for `type UseHandleConnectionsParams` and `useHandleConnections` hook --- .changeset/many-chefs-clean.md | 5 +++++ packages/react/src/hooks/useHandleConnections.ts | 16 ++++++++-------- 2 files changed, 13 insertions(+), 8 deletions(-) create mode 100644 .changeset/many-chefs-clean.md diff --git a/.changeset/many-chefs-clean.md b/.changeset/many-chefs-clean.md new file mode 100644 index 00000000..85786317 --- /dev/null +++ b/.changeset/many-chefs-clean.md @@ -0,0 +1,5 @@ +--- +'@xyflow/react': patch +--- + +Improve TSDoc comments for `type UseHandleConnectionsParams` and `useHandleConnections` hook diff --git a/packages/react/src/hooks/useHandleConnections.ts b/packages/react/src/hooks/useHandleConnections.ts index cad87715..a53eb2c7 100644 --- a/packages/react/src/hooks/useHandleConnections.ts +++ b/packages/react/src/hooks/useHandleConnections.ts @@ -10,11 +10,16 @@ import { import { useStore } from './useStore'; import { useNodeId } from '../contexts/NodeIdContext'; -type useHandleConnectionsParams = { +type UseHandleConnectionsParams = { + /** What type of handle connections do you want to observe? */ type: HandleType; + /** The handle id (this is only needed if the node has multiple handles of the same type). */ id?: string | null; + /** If node id is not provided, the node id from the `NodeIdContext` is used. */ nodeId?: string; + /** Gets called when a connection is established. */ onConnect?: (connections: Connection[]) => void; + /** Gets called when a connection is removed. */ onDisconnect?: (connections: Connection[]) => void; }; @@ -23,12 +28,7 @@ type useHandleConnectionsParams = { * * @public * @deprecated Use `useNodeConnections` instead. - * @param param.type - handle type 'source' or 'target' - * @param param.nodeId - node id - if not provided, the node id from the NodeIdContext is used - * @param param.id - the handle id (this is only needed if the node has multiple handles of the same type) - * @param param.onConnect - gets called when a connection is established - * @param param.onDisconnect - gets called when a connection is removed - * @returns an array with handle connections + * @returns An array with handle connections. */ export function useHandleConnections({ type, @@ -36,7 +36,7 @@ export function useHandleConnections({ nodeId, onConnect, onDisconnect, -}: useHandleConnectionsParams): HandleConnection[] { +}: UseHandleConnectionsParams): HandleConnection[] { console.warn( '[DEPRECATED] `useHandleConnections` is deprecated. Instead use `useNodeConnections` https://reactflow.dev/api-reference/hooks/useNodeConnections' ); From c4efe749208e854dc9ced5bdd00933269d5b4382 Mon Sep 17 00:00:00 2001 From: Dimitri POSTOLOV Date: Sat, 5 Apr 2025 17:23:12 +0200 Subject: [PATCH 08/23] Improve TSDoc comments for `type UseKeyPressOptions` and `useKeyPress` hook --- .changeset/twelve-windows-search.md | 5 +++++ packages/react/src/hooks/useKeyPress.ts | 29 ++++++++++++++++++------- 2 files changed, 26 insertions(+), 8 deletions(-) create mode 100644 .changeset/twelve-windows-search.md diff --git a/.changeset/twelve-windows-search.md b/.changeset/twelve-windows-search.md new file mode 100644 index 00000000..cc8b74c7 --- /dev/null +++ b/.changeset/twelve-windows-search.md @@ -0,0 +1,5 @@ +--- +'@xyflow/react': patch +--- + +Improve TSDoc comments for `type UseKeyPressOptions` and `useKeyPress` hook diff --git a/packages/react/src/hooks/useKeyPress.ts b/packages/react/src/hooks/useKeyPress.ts index ec12e562..d7e022fa 100644 --- a/packages/react/src/hooks/useKeyPress.ts +++ b/packages/react/src/hooks/useKeyPress.ts @@ -6,7 +6,16 @@ type PressedKeys = Set; type KeyOrCode = 'key' | 'code'; export type UseKeyPressOptions = { + /** + * You may want to listen to key presses on a specific element. This field lets you configure + * that! + * @default document + */ target?: Window | Document | HTMLElement | ShadowRoot | null; + /** + * You can use this flag to prevent triggering the key press hook when an input field is focused. + * @default true + */ actInsideInputWithModifier?: boolean; preventDefault?: boolean; }; @@ -18,9 +27,7 @@ const defaultDoc = typeof document !== 'undefined' ? document : null; * currently pressed or not. * * @public - * @param param.keyCode - The key code (string or array of strings) to use - * @param param.options - Options - * @returns boolean + * @param options - Options * * @example * ```tsx @@ -40,11 +47,17 @@ const defaultDoc = typeof document !== 'undefined' ? document : null; *``` */ export function useKeyPress( - /* - * the keycode can be a string 'a' or an array of strings ['a', 'a+d'] - * a string means a single key 'a' or a combination when '+' is used 'a+d' - * an array means different possibilites. Explainer: ['a', 'd+s'] here the - * user can use the single key 'a' or the combination 'd' + 's' + /** + * The key code (string or array of strings) specifies which key(s) should trigger + * an action. + * + * A **string** can represent: + * - A **single key**, e.g. `'a'` + * - A **key combination**, using `'+'` to separate keys, e.g. `'a+d'` + * + * An **array of strings** represents **multiple possible key inputs**. For example, `['a', 'd+s']` + * means the user can press either the single key `'a'` or the combination of `'d'` and `'s'`. + * @default null */ keyCode: KeyCode | null = null, options: UseKeyPressOptions = { target: defaultDoc, actInsideInputWithModifier: true } From 29f4aeb260df0a5d83e775c7c2ed788f997006a7 Mon Sep 17 00:00:00 2001 From: Dimitri POSTOLOV Date: Sat, 5 Apr 2025 17:29:43 +0200 Subject: [PATCH 09/23] Improve TSDoc comments for `type UseNodeConnectionsParams` and `useNodeConnections` hook --- .changeset/nasty-eagles-hang.md | 5 +++++ packages/react/src/hooks/useNodeConnections.ts | 14 +++++++------- 2 files changed, 12 insertions(+), 7 deletions(-) create mode 100644 .changeset/nasty-eagles-hang.md diff --git a/.changeset/nasty-eagles-hang.md b/.changeset/nasty-eagles-hang.md new file mode 100644 index 00000000..de18b242 --- /dev/null +++ b/.changeset/nasty-eagles-hang.md @@ -0,0 +1,5 @@ +--- +'@xyflow/react': patch +--- + +Improve TSDoc comments for `type UseNodeConnectionsParams` and `useNodeConnections` hook diff --git a/packages/react/src/hooks/useNodeConnections.ts b/packages/react/src/hooks/useNodeConnections.ts index 6d6ad6b9..6a8155ab 100644 --- a/packages/react/src/hooks/useNodeConnections.ts +++ b/packages/react/src/hooks/useNodeConnections.ts @@ -14,10 +14,15 @@ import { useNodeId } from '../contexts/NodeIdContext'; const error014 = errorMessages['error014'](); type UseNodeConnectionsParams = { + /** ID of the node, filled in automatically if used inside custom node. */ id?: string; + /** What type of handle connections do you want to observe? */ handleType?: HandleType; + /** Filter by handle id (this is only needed if the node has multiple handles of the same type). */ handleId?: string; + /** Gets called when a connection is established. */ onConnect?: (connections: Connection[]) => void; + /** Gets called when a connection is removed. */ onDisconnect?: (connections: Connection[]) => void; }; @@ -25,12 +30,7 @@ type UseNodeConnectionsParams = { * This hook returns an array of connections on a specific node, handle type ('source', 'target') or handle ID. * * @public - * @param param.id - node id - optional if called inside a custom node - * @param param.handleType - filter by handle type 'source' or 'target' - * @param param.handleId - filter by handle id (this is only needed if the node has multiple handles of the same type) - * @param param.onConnect - gets called when a connection is established - * @param param.onDisconnect - gets called when a connection is removed - * @returns an array with connections + * @returns An array with connections. * * @example * ```jsx @@ -73,7 +73,7 @@ export function useNodeConnections({ ); useEffect(() => { - // @todo dicuss if onConnect/onDisconnect should be called when the component mounts/unmounts + // @todo discuss if onConnect/onDisconnect should be called when the component mounts/unmounts if (prevConnections.current && prevConnections.current !== connections) { const _connections = connections ?? new Map(); handleConnectionChange(prevConnections.current, _connections, onDisconnect); From ab800054a50c68f9c27dfad2b0d3833b782f4797 Mon Sep 17 00:00:00 2001 From: Dimitri POSTOLOV Date: Sat, 5 Apr 2025 17:31:46 +0200 Subject: [PATCH 10/23] Improve TSDoc comments for `useNodesState` and `useEdgesState` hook --- .changeset/heavy-mirrors-draw.md | 5 +++ .../react/src/hooks/useNodesEdgesState.ts | 40 ++++++++++++++++--- 2 files changed, 39 insertions(+), 6 deletions(-) create mode 100644 .changeset/heavy-mirrors-draw.md diff --git a/.changeset/heavy-mirrors-draw.md b/.changeset/heavy-mirrors-draw.md new file mode 100644 index 00000000..ccb9ae31 --- /dev/null +++ b/.changeset/heavy-mirrors-draw.md @@ -0,0 +1,5 @@ +--- +'@xyflow/react': patch +--- + +Improve TSDoc comments for `useNodesState` and `useEdgesState` hook diff --git a/packages/react/src/hooks/useNodesEdgesState.ts b/packages/react/src/hooks/useNodesEdgesState.ts index b5919e5e..21d9d108 100644 --- a/packages/react/src/hooks/useNodesEdgesState.ts +++ b/packages/react/src/hooks/useNodesEdgesState.ts @@ -9,8 +9,16 @@ import type { Node, Edge, OnNodesChange, OnEdgesChange } from '../types'; * like React's `useState` hook with an additional helper callback. * * @public - * @param initialNodes - * @returns an array [nodes, setNodes, onNodesChange] + * @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 @@ -42,7 +50,12 @@ import type { Node, Edge, OnNodesChange, OnEdgesChange } from '../types'; */ export function useNodesState( initialNodes: NodeType[] -): [NodeType[], Dispatch>, OnNodesChange] { +): [ + // + nodes: NodeType[], + setNodes: Dispatch>, + onNodesChange: OnNodesChange +] { const [nodes, setNodes] = useState(initialNodes); const onNodesChange: OnNodesChange = useCallback( (changes) => setNodes((nds) => applyNodeChanges(changes, nds)), @@ -58,8 +71,18 @@ export function useNodesState( * like React's `useState` hook with an additional helper callback. * * @public - * @param initialEdges - * @returns an array [edges, setEdges, onEdgesChange] + * @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 @@ -91,7 +114,12 @@ export function useNodesState( */ export function useEdgesState( initialEdges: EdgeType[] -): [EdgeType[], Dispatch>, OnEdgesChange] { +): [ + // + edges: EdgeType[], + setEdges: Dispatch>, + onEdgesChange: OnEdgesChange +] { const [edges, setEdges] = useState(initialEdges); const onEdgesChange: OnEdgesChange = useCallback( (changes) => setEdges((eds) => applyEdgeChanges(changes, eds)), From 09021550dc72ac240fcbb6adb3cf530d91575f79 Mon Sep 17 00:00:00 2001 From: Dimitri POSTOLOV Date: Sat, 5 Apr 2025 17:34:06 +0200 Subject: [PATCH 11/23] Improve TSDoc comments for `type UseOnViewportChangeOptions` and `useOnViewportChange` hook --- .changeset/purple-bees-laugh.md | 5 +++++ packages/react/src/hooks/useOnViewportChange.ts | 11 +++++------ 2 files changed, 10 insertions(+), 6 deletions(-) create mode 100644 .changeset/purple-bees-laugh.md diff --git a/.changeset/purple-bees-laugh.md b/.changeset/purple-bees-laugh.md new file mode 100644 index 00000000..99e6d107 --- /dev/null +++ b/.changeset/purple-bees-laugh.md @@ -0,0 +1,5 @@ +--- +'@xyflow/react': patch +--- + +Improve TSDoc comments for `type UseOnViewportChangeOptions` and `useOnViewportChange` hook diff --git a/packages/react/src/hooks/useOnViewportChange.ts b/packages/react/src/hooks/useOnViewportChange.ts index c82eb344..9a13c4fb 100644 --- a/packages/react/src/hooks/useOnViewportChange.ts +++ b/packages/react/src/hooks/useOnViewportChange.ts @@ -4,21 +4,20 @@ import type { OnViewportChange } from '@xyflow/system'; import { useStoreApi } from './useStore'; export type UseOnViewportChangeOptions = { + /** Gets called when the viewport starts changing. */ onStart?: OnViewportChange; + /** Gets called when the viewport changes. */ onChange?: OnViewportChange; + /** Gets called when the viewport stops changing. */ onEnd?: OnViewportChange; }; /** * 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`. + * as panning and zooming. You can provide a callback for each phase of a viewport + * change: `onStart`, `onChange`, and `onEnd`. * * @public - * @param params.onStart - gets called when the viewport starts changing - * @param params.onChange - gets called when the viewport changes - * @param params.onEnd - gets called when the viewport stops changing - * * @example * ```jsx *import { useCallback } from 'react'; From d536abea9240bad7f5c1064efc0a4713ebef87d1 Mon Sep 17 00:00:00 2001 From: Dimitri POSTOLOV Date: Sat, 5 Apr 2025 17:37:43 +0200 Subject: [PATCH 12/23] Improve TSDoc comments for `useViewport`, `useUpdateNodeInternals`, `useOnSelectionChange`, `useNodesInitialized` hooks and `UseOnSelectionChangeOptions`, `UseNodesInitializedOptions` types --- .changeset/beige-apes-repair.md | 5 +++++ packages/react/src/hooks/useNodesInitialized.ts | 5 +++-- packages/react/src/hooks/useOnSelectionChange.ts | 3 +-- packages/react/src/hooks/useUpdateNodeInternals.ts | 9 +++++---- packages/react/src/hooks/useViewport.ts | 6 +++--- 5 files changed, 17 insertions(+), 11 deletions(-) create mode 100644 .changeset/beige-apes-repair.md diff --git a/.changeset/beige-apes-repair.md b/.changeset/beige-apes-repair.md new file mode 100644 index 00000000..252866a3 --- /dev/null +++ b/.changeset/beige-apes-repair.md @@ -0,0 +1,5 @@ +--- +'@xyflow/react': patch +--- + +Improve TSDoc comments for `useViewport`, `useUpdateNodeInternals`, `useOnSelectionChange`, `useNodesInitialized` hooks and `UseOnSelectionChangeOptions`, `UseNodesInitializedOptions` types diff --git a/packages/react/src/hooks/useNodesInitialized.ts b/packages/react/src/hooks/useNodesInitialized.ts index 38f15a60..a44ab658 100644 --- a/packages/react/src/hooks/useNodesInitialized.ts +++ b/packages/react/src/hooks/useNodesInitialized.ts @@ -4,6 +4,7 @@ import { useStore } from './useStore'; import type { ReactFlowState } from '../types'; export type UseNodesInitializedOptions = { + /** @default false */ includeHiddenNodes?: boolean; }; @@ -29,8 +30,8 @@ const selector = (options: UseNodesInitializedOptions) => (s: ReactFlowState) => *`false` and then `true` again once the node has been measured. * * @public - * @param options.includeHiddenNodes - defaults to false - * @returns boolean indicating whether all nodes are initialized + * @returns Whether or not the nodes have been initialized by the `` component and + * given a width and height. * * @example * ```jsx diff --git a/packages/react/src/hooks/useOnSelectionChange.ts b/packages/react/src/hooks/useOnSelectionChange.ts index 17232895..feff9fe3 100644 --- a/packages/react/src/hooks/useOnSelectionChange.ts +++ b/packages/react/src/hooks/useOnSelectionChange.ts @@ -4,6 +4,7 @@ import { useStoreApi } from './useStore'; import type { OnSelectionChangeFunc, Node, Edge } from '../types'; export type UseOnSelectionChangeOptions = { + /** The handler to register. */ onChange: OnSelectionChangeFunc; }; @@ -13,8 +14,6 @@ export type UseOnSelectionChangeOptions ({ /** * 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**. + * {@link Viewport} in a component. Components that use this hook + * will re-render **whenever the viewport changes**. * * @public - * @returns The current viewport + * @returns The current viewport. * * @example * From 701ad17ed3f523389e7d0bf9a006bef249645c3d Mon Sep 17 00:00:00 2001 From: Dimitri POSTOLOV Date: Sat, 5 Apr 2025 17:40:58 +0200 Subject: [PATCH 13/23] Improve TSDoc comments for type `useStore` hook --- .changeset/red-scissors-visit.md | 5 +++++ packages/react/src/hooks/useStore.ts | 13 ++++++++----- 2 files changed, 13 insertions(+), 5 deletions(-) create mode 100644 .changeset/red-scissors-visit.md diff --git a/.changeset/red-scissors-visit.md b/.changeset/red-scissors-visit.md new file mode 100644 index 00000000..28583d75 --- /dev/null +++ b/.changeset/red-scissors-visit.md @@ -0,0 +1,5 @@ +--- +'@xyflow/react': patch +--- + +Improve TSDoc comments for type `useStore` hook diff --git a/packages/react/src/hooks/useStore.ts b/packages/react/src/hooks/useStore.ts index 3b0a2778..f18fb9db 100644 --- a/packages/react/src/hooks/useStore.ts +++ b/packages/react/src/hooks/useStore.ts @@ -14,9 +14,13 @@ const zustandErrorMessage = errorMessages['error001'](); * state management library, so you should check out their docs for more details. * * @public - * @param selector - * @param equalityFn - * @returns The selected state slice + * @param selector - A selector function that returns a slice of the flow's internal state. + * Extracting or transforming just the state you need is a good practice to avoid unnecessary + * re-renders. + * @param equalityFn - A function to compare the previous and next value. This is incredibly useful + * for preventing unnecessary re-renders. Good sensible defaults are using `Object.is` or importing + * `zustand/shallow`, but you can be as granular as you like. + * @returns The selected state slice. * * @example * ```ts @@ -43,8 +47,7 @@ function useStore( /** * 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. * - * @returns The store object - * + * @returns The store object. * @example * ```ts * const store = useStoreApi(); From 67e5ce68284dc71f569ff9156ac69644cdb53dd8 Mon Sep 17 00:00:00 2001 From: Dimitri POSTOLOV Date: Sat, 5 Apr 2025 17:42:37 +0200 Subject: [PATCH 14/23] Update .changeset/red-scissors-visit.md --- .changeset/red-scissors-visit.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.changeset/red-scissors-visit.md b/.changeset/red-scissors-visit.md index 28583d75..5f80f599 100644 --- a/.changeset/red-scissors-visit.md +++ b/.changeset/red-scissors-visit.md @@ -2,4 +2,4 @@ '@xyflow/react': patch --- -Improve TSDoc comments for type `useStore` hook +Improve TSDoc comments for `useStore` hook From 934ea42d9af6027a3164e1196a78140bdd05d347 Mon Sep 17 00:00:00 2001 From: Dimitri POSTOLOV Date: Sat, 5 Apr 2025 17:44:33 +0200 Subject: [PATCH 15/23] Improve TSDoc comments for `useEdges`, `useInternalNode`, `useNodes` and `useNodeId` hooks --- .changeset/gorgeous-hats-count.md | 5 +++++ packages/react/src/contexts/NodeIdContext.ts | 2 +- packages/react/src/hooks/useEdges.ts | 2 +- packages/react/src/hooks/useInternalNode.ts | 4 ++-- packages/react/src/hooks/useNodes.ts | 2 +- 5 files changed, 10 insertions(+), 5 deletions(-) create mode 100644 .changeset/gorgeous-hats-count.md diff --git a/.changeset/gorgeous-hats-count.md b/.changeset/gorgeous-hats-count.md new file mode 100644 index 00000000..ce00df81 --- /dev/null +++ b/.changeset/gorgeous-hats-count.md @@ -0,0 +1,5 @@ +--- +'@xyflow/react': patch +--- + +Improve TSDoc comments for `useEdges`, `useInternalNode`, `useNodes` and `useNodeId` hooks diff --git a/packages/react/src/contexts/NodeIdContext.ts b/packages/react/src/contexts/NodeIdContext.ts index 5458c98c..4fdef045 100644 --- a/packages/react/src/contexts/NodeIdContext.ts +++ b/packages/react/src/contexts/NodeIdContext.ts @@ -10,7 +10,7 @@ export const Consumer = NodeIdContext.Consumer; * drill down the id as a prop. * * @public - * @returns id of the node + * @returns The id for a node in the flow. * * @example *```jsx diff --git a/packages/react/src/hooks/useEdges.ts b/packages/react/src/hooks/useEdges.ts index 45263849..46db9939 100644 --- a/packages/react/src/hooks/useEdges.ts +++ b/packages/react/src/hooks/useEdges.ts @@ -10,7 +10,7 @@ const edgesSelector = (state: ReactFlowState) => state.edges; * will re-render **whenever any edge changes**. * * @public - * @returns An array of edges + * @returns An array of all edges currently in the flow. * * @example * ```tsx diff --git a/packages/react/src/hooks/useInternalNode.ts b/packages/react/src/hooks/useInternalNode.ts index ecd83897..a4678aaa 100644 --- a/packages/react/src/hooks/useInternalNode.ts +++ b/packages/react/src/hooks/useInternalNode.ts @@ -10,8 +10,8 @@ import type { InternalNode, Node } from '../types'; * including when a node is selected or moved. * * @public - * @param id - id of the node - * @returns array with visible node ids + * @param id - The ID of a node you want to observe. + * @returns The `InternalNode` object for the node with the given ID. * * @example * ```tsx diff --git a/packages/react/src/hooks/useNodes.ts b/packages/react/src/hooks/useNodes.ts index 9fa14bcb..6166327d 100644 --- a/packages/react/src/hooks/useNodes.ts +++ b/packages/react/src/hooks/useNodes.ts @@ -11,7 +11,7 @@ const nodesSelector = (state: ReactFlowState) => state.nodes; * or moved. * * @public - * @returns An array of nodes + * @returns An array of all nodes currently in the flow. * * @example * ```jsx From cbe305e15a5c5d3b92583e0ec12364b2509f49bd Mon Sep 17 00:00:00 2001 From: Dimitri POSTOLOV Date: Sun, 6 Apr 2025 04:37:13 +0200 Subject: [PATCH 16/23] Improve TSDoc comments for `getOutgoers`, `getIncomers` and `type GetNodesBoundsParams` --- .changeset/empty-buses-admire.md | 5 ++++ packages/system/src/utils/graph.ts | 37 ++++++++++++++++-------------- 2 files changed, 25 insertions(+), 17 deletions(-) create mode 100644 .changeset/empty-buses-admire.md diff --git a/.changeset/empty-buses-admire.md b/.changeset/empty-buses-admire.md new file mode 100644 index 00000000..e0af932b --- /dev/null +++ b/.changeset/empty-buses-admire.md @@ -0,0 +1,5 @@ +--- +'@xyflow/system': patch +--- + +Improve TSDoc comments for `getOutgoers`, `getIncomers` and `type GetNodesBoundsParams` diff --git a/packages/system/src/utils/graph.ts b/packages/system/src/utils/graph.ts index e14f81cd..9bd7beff 100644 --- a/packages/system/src/utils/graph.ts +++ b/packages/system/src/utils/graph.ts @@ -30,7 +30,7 @@ import { import { errorMessages } from '../constants'; /** - * Test whether an object is useable as an Edge + * Test whether an object is usable as an Edge * @public * @remarks In TypeScript this is a type guard that will narrow the type of whatever you pass in to Edge if it returns true * @param element - The element to test @@ -40,7 +40,7 @@ export const isEdgeBase = (element: any): 'id' in element && 'source' in element && 'target' in element; /** - * Test whether an object is useable as a Node + * Test whether an object is usable as a Node * @public * @remarks In TypeScript this is a type guard that will narrow the type of whatever you pass in to Node if it returns true * @param element - The element to test @@ -57,10 +57,10 @@ export const isInternalNodeBase = = { + /** + * Origin of the nodes: `[0, 0]` for top-left, `[0.5, 0.5]` for center. + * @default [0, 0] + */ nodeOrigin?: NodeOrigin; nodeLookup?: NodeLookup>; }; @@ -159,9 +163,8 @@ export type GetNodesBoundsParams = { * to calculate the correct transform to fit the given nodes in a viewport. * @public * @remarks Useful when combined with {@link getViewportForBounds} to calculate the correct transform to fit the given nodes in a viewport. - * @param nodes - Nodes to calculate the bounds for - * @param params.nodeOrigin - Origin of the nodes: [0, 0] - top left, [0.5, 0.5] - center - * @returns Bounding box enclosing all nodes + * @param nodes - Nodes to calculate the bounds for. + * @returns Bounding box enclosing all nodes. * * @remarks This function was previously called `getRectOfNodes` * @@ -191,7 +194,7 @@ export type GetNodesBoundsParams = { */ export const getNodesBounds = ( nodes: (NodeType | InternalNodeBase | string)[], - params: GetNodesBoundsParams = { nodeOrigin: [0, 0], nodeLookup: undefined } + params: GetNodesBoundsParams = { nodeOrigin: [0, 0] } ): Rect => { if (process.env.NODE_ENV === 'development' && !params.nodeLookup) { console.warn( @@ -299,9 +302,9 @@ export const getNodesInside = ( * This utility filters an array of edges, keeping only those where either the source or target * node is present in the given array of nodes. * @public - * @param nodes - Nodes you want to get the connected edges for - * @param edges - All edges - * @returns Array of edges that connect any of the given nodes with each other + * @param nodes - Nodes you want to get the connected edges for. + * @param edges - All edges. + * @returns Array of edges that connect any of the given nodes with each other. * * @example * ```js From 1f671bd48f06230da841fdd1d7a312413ef16d03 Mon Sep 17 00:00:00 2001 From: Dimitri POSTOLOV Date: Sun, 6 Apr 2025 04:41:00 +0200 Subject: [PATCH 17/23] Improve TSDoc comments for `type ReconnectEdgeOptions` and `getViewportForBounds` --- .changeset/lazy-avocados-talk.md | 5 +++++ packages/system/src/utils/edges/general.ts | 19 +++++++++++-------- packages/system/src/utils/general.ts | 16 ++++++++-------- 3 files changed, 24 insertions(+), 16 deletions(-) create mode 100644 .changeset/lazy-avocados-talk.md diff --git a/.changeset/lazy-avocados-talk.md b/.changeset/lazy-avocados-talk.md new file mode 100644 index 00000000..f17b232f --- /dev/null +++ b/.changeset/lazy-avocados-talk.md @@ -0,0 +1,5 @@ +--- +'@xyflow/system': patch +--- + +Improve TSDoc comments for `type ReconnectEdgeOptions` and `getViewportForBounds` diff --git a/packages/system/src/utils/edges/general.ts b/packages/system/src/utils/edges/general.ts index 7f98d00f..c094ab0b 100644 --- a/packages/system/src/utils/edges/general.ts +++ b/packages/system/src/utils/edges/general.ts @@ -92,9 +92,9 @@ const connectionExists = (edge: EdgeBase, edges: EdgeBase[]) => { /** * This util is a convenience function to add a new Edge to an array of edges. It also performs some validation to make sure you don't add an invalid edge or duplicate an existing one. * @public - * @param edgeParams - Either an Edge or a Connection you want to add - * @param edges - The array of all current edges - * @returns A new array of edges with the new edge added + * @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. * * @remarks If an edge with the same `target` and `source` already exists (and the same *`targetHandle` and `sourceHandle` if those are set), then this util won't add @@ -137,6 +137,10 @@ export const addEdge = ( }; export type ReconnectEdgeOptions = { + /** + * Should the id of the old edge be replaced with the new connection id. + * @default true + */ shouldReplaceId?: boolean; }; @@ -145,11 +149,10 @@ export type ReconnectEdgeOptions = { *This searches your edge array for an edge with a matching `id` and updates its *properties with the connection you provide. * @public - * @param oldEdge - The edge you want to update - * @param newConnection - The new connection you want to update the edge with - * @param edges - The array of all current edges - * @param options.shouldReplaceId - should the id of the old edge be replaced with the new connection id - * @returns the updated edges array + * @param oldEdge - The edge you want to update. + * @param newConnection - The new connection you want to update the edge with. + * @param edges - The array of all current edges. + * @returns The updated edges array. * * @example * ```js diff --git a/packages/system/src/utils/general.ts b/packages/system/src/utils/general.ts index 5b4c6995..67743b5d 100644 --- a/packages/system/src/utils/general.ts +++ b/packages/system/src/utils/general.ts @@ -275,16 +275,16 @@ function calculateAppliedPaddings(bounds: Rect, x: number, y: number, zoom: numb } /** - * Returns a viewport that encloses the given bounds with optional padding. + * Returns a viewport that encloses the given bounds with padding. * @public * @remarks You can determine bounds of nodes with {@link getNodesBounds} and {@link getBoundsOfRects} - * @param bounds - Bounds to fit inside viewport - * @param width - Width of the viewport - * @param height - Height of the viewport - * @param minZoom - Minimum zoom level of the resulting viewport - * @param maxZoom - Maximum zoom level of the resulting viewport - * @param padding - Optional padding around the bounds - * @returns A transforned {@link Viewport} that encloses the given bounds which you can pass to e.g. {@link setViewport} + * @param bounds - Bounds to fit inside viewport. + * @param width - Width of the viewport. + * @param height - Height of the viewport. + * @param minZoom - Minimum zoom level of the resulting viewport. + * @param maxZoom - Maximum zoom level of the resulting viewport. + * @param padding - Padding around the bounds. + * @returns A transformed {@link Viewport} that encloses the given bounds which you can pass to e.g. {@link setViewport}. * @example * const { x, y, zoom } = getViewportForBounds( * { x: 0, y: 0, width: 100, height: 100}, From eb2a33c6dfb0629e851ab3a0f2cd70eca92efc42 Mon Sep 17 00:00:00 2001 From: Dimitri POSTOLOV Date: Sun, 6 Apr 2025 04:46:01 +0200 Subject: [PATCH 18/23] Improve TSDoc comments for `interface GetSimpleBezierPathParams` and `getSimpleBezierPath` --- .changeset/tall-dryers-smell.md | 5 +++++ .../src/components/Edges/SimpleBezierEdge.tsx | 14 ++++++++++++-- .../react/src/components/StoreUpdater/index.tsx | 2 +- packages/react/src/utils/changes.ts | 12 ++++++------ 4 files changed, 24 insertions(+), 9 deletions(-) create mode 100644 .changeset/tall-dryers-smell.md diff --git a/.changeset/tall-dryers-smell.md b/.changeset/tall-dryers-smell.md new file mode 100644 index 00000000..8c34da74 --- /dev/null +++ b/.changeset/tall-dryers-smell.md @@ -0,0 +1,5 @@ +--- +'@xyflow/react': patch +--- + +Improve TSDoc comments for `interface GetSimpleBezierPathParams` and `getSimpleBezierPath` diff --git a/packages/react/src/components/Edges/SimpleBezierEdge.tsx b/packages/react/src/components/Edges/SimpleBezierEdge.tsx index a11cbc1d..3d1cdb3d 100644 --- a/packages/react/src/components/Edges/SimpleBezierEdge.tsx +++ b/packages/react/src/components/Edges/SimpleBezierEdge.tsx @@ -7,9 +7,11 @@ import type { SimpleBezierEdgeProps } from '../../types'; export interface GetSimpleBezierPathParams { sourceX: number; sourceY: number; + /** @default Position.Bottom */ sourcePosition?: Position; targetX: number; targetY: number; + /** @default Position.Top */ targetPosition?: Position; } @@ -33,6 +35,14 @@ function getControl({ pos, x1, y1, x2, y2 }: GetControlParams): [number, number] * The `getSimpleBezierPath` util returns everything you need to render a simple * bezier edge between two nodes. * @public + * @returns + * - `path`: the path to use in an SVG `` element. + * - `labelX`: the `x` position you can use to render a label for this edge. + * - `labelY`: the `y` position you can use to render a label for this edge. + * - `offsetX`: the absolute difference between the source `x` position and the `x` position of the + * middle of this path. + * - `offsetY`: the absolute difference between the source `y` position and the `y` position of the + * middle of this path. */ export function getSimpleBezierPath({ sourceX, @@ -85,8 +95,8 @@ function createSimpleBezierEdge(params: { isInternal: boolean }) { sourceY, targetX, targetY, - sourcePosition = Position.Bottom, - targetPosition = Position.Top, + sourcePosition, + targetPosition, label, labelStyle, labelShowBg, diff --git a/packages/react/src/components/StoreUpdater/index.tsx b/packages/react/src/components/StoreUpdater/index.tsx index ac9122ba..5cad0358 100644 --- a/packages/react/src/components/StoreUpdater/index.tsx +++ b/packages/react/src/components/StoreUpdater/index.tsx @@ -11,7 +11,7 @@ import { useStore, useStoreApi } from '../../hooks/useStore'; import type { Node, Edge, ReactFlowState, ReactFlowProps, FitViewOptions } from '../../types'; import { defaultNodeOrigin } from '../../container/ReactFlow/init-values'; -// these fields exist in the global store and we need to keep them up to date +// These fields exist in the global store, and we need to keep them up to date const reactFlowFieldsToTrack = [ 'nodes', 'edges', diff --git a/packages/react/src/utils/changes.ts b/packages/react/src/utils/changes.ts index 0bc30e46..f1494bf4 100644 --- a/packages/react/src/utils/changes.ts +++ b/packages/react/src/utils/changes.ts @@ -147,9 +147,9 @@ function applyChange(change: any, element: any): any { /** * Drop in function that applies node changes to an array of nodes. * @public - * @param changes - Array of changes to apply - * @param nodes - Array of nodes to apply the changes to - * @returns Array of updated nodes + * @param changes - Array of changes to apply. + * @param nodes - Array of nodes to apply the changes to. + * @returns Array of updated nodes. * @example *```tsx *import { useState, useCallback } from 'react'; @@ -185,9 +185,9 @@ export function applyNodeChanges( /** * Drop in function that applies edge changes to an array of edges. * @public - * @param changes - Array of changes to apply - * @param edges - Array of edge to apply the changes to - * @returns Array of updated edges + * @param changes - Array of changes to apply. + * @param edges - Array of edge to apply the changes to. + * @returns Array of updated edges. * @example * ```tsx *import { useState, useCallback } from 'react'; From 62d874097337a022bebe54b559834c0d582f435e Mon Sep 17 00:00:00 2001 From: Dimitri POSTOLOV Date: Sun, 6 Apr 2025 04:49:08 +0200 Subject: [PATCH 19/23] Improve TSDoc comments for `ReactFlowProps` --- .changeset/bright-rabbits-remember.md | 5 + packages/react/src/types/component-props.ts | 347 +++++++++++++------- 2 files changed, 239 insertions(+), 113 deletions(-) create mode 100644 .changeset/bright-rabbits-remember.md diff --git a/.changeset/bright-rabbits-remember.md b/.changeset/bright-rabbits-remember.md new file mode 100644 index 00000000..b5528761 --- /dev/null +++ b/.changeset/bright-rabbits-remember.md @@ -0,0 +1,5 @@ +--- +'@xyflow/react': patch +--- + +Improve TSDoc comments for `ReactFlowProps` diff --git a/packages/react/src/types/component-props.ts b/packages/react/src/types/component-props.ts index d558bc47..67a5ec2d 100644 --- a/packages/react/src/types/component-props.ts +++ b/packages/react/src/types/component-props.ts @@ -54,6 +54,7 @@ export interface ReactFlowProps, 'onError'> { /** * An array of nodes to render in a controlled flow. + * @default [] * @example * const nodes = [ * { @@ -67,6 +68,7 @@ export interface ReactFlowProps; - /** This event handler is called when a user double clicks on a node */ + /** 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 */ + /** 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 */ + /** 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 */ + /** 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 */ + /** 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 */ + /** This event handler is called when a user starts to drag a node. */ onNodeDragStart?: OnNodeDrag; - /** This event handler is called when a user drags a node */ + /** This event handler is called when a user drags a node. */ onNodeDrag?: OnNodeDrag; - /** This event handler is called when a user stops dragging a node */ + /** This event handler is called when a user stops dragging a node. */ onNodeDragStop?: OnNodeDrag; - /** This event handler is called when a user clicks on an edge */ + /** This event handler is called when a user clicks on an edge. */ onEdgeClick?: (event: ReactMouseEvent, edge: EdgeType) => void; - /** This event handler is called when a user right clicks on an edge */ + /** 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 */ + /** 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 */ + /** 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 */ + /** 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 */ + /** This event handler is called when a user double-clicks on an edge. */ onEdgeDoubleClick?: EdgeMouseHandler; + /** + * This handler is called when the source or target of a reconnectable edge is dragged from the + * current node. It will fire even if the edge's source or target do not end up changing. + * + * You can use the `reconnectEdge` utility to convert the connection to a new edge. + */ onReconnect?: OnReconnect; + /** + * This event fires when the user begins dragging the source or target of an editable edge. + */ onReconnectStart?: (event: ReactMouseEvent, edge: EdgeType, handleType: HandleType) => void; + /** + * This event fires when the user releases the source or target of an editable edge. It is called + * even if an edge update does not occur. + * + * You can use the fourth `connectionState` parameter to have different behavior when a + * reconnection was unsuccessful. + */ + // @TODO: connectionState outdated info? onReconnectEnd?: (event: MouseEvent | TouchEvent, edge: EdgeType, handleType: HandleType) => void; /** - * This event handler is called when a Node is updated + * Use this event handler to add interactivity to a controlled flow. + * It is called on node drag, select, and move. * @example // Use NodesState hook to create edges and get onNodesChange handler * import ReactFlow, { useNodesState } from '@xyflow/react'; * const [edges, setNodes, onNodesChange] = useNodesState(initialNodes); @@ -154,7 +174,8 @@ export interface ReactFlowProps; /** - * This event handler is called when a Edge is updated + * Use this event handler to add interactivity to a controlled flow. It is called on edge select + * and remove. * @example // Use EdgesState hook to create edges and get onEdgesChange handler * import ReactFlow, { useEdgesState } from '@xyflow/react'; * const [edges, setEdges, onEdgesChange] = useEdgesState(initialEdges); @@ -171,25 +192,28 @@ export interface ReactFlowProps) */ onEdgesChange?: OnEdgesChange; - /** This event handler gets called when a Node is deleted */ + /** This event handler gets called when a node is deleted. */ onNodesDelete?: OnNodesDelete; - /** This event handler gets called when a Edge is deleted */ + /** This event handler gets called when an edge is deleted. */ onEdgesDelete?: OnEdgesDelete; - /** This event handler gets called when a Node or Edge is deleted */ + /** 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 */ + /** 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 */ + /** 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 */ + /** This event handler gets called when a user stops dragging a selection box. */ onSelectionDragStop?: SelectionDragHandler; onSelectionStart?: (event: ReactMouseEvent) => void; onSelectionEnd?: (event: ReactMouseEvent) => void; + /** + * This event handler is called when a user right-clicks on a node selection. + */ onSelectionContextMenu?: (event: ReactMouseEvent, nodes: NodeType[]) => 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. + * 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'; * @@ -201,50 +225,70 @@ export interface ReactFlowProps) */ onConnect?: OnConnect; - /** This event handler gets called when a user starts to drag a connection line */ + /** 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 */ + /** + * This callback will fire regardless of whether a valid connection could be made or not. You can + * use the second `connectionState` parameter to have different behavior when a connection was + * unsuccessful. + */ onConnectEnd?: OnConnectEnd; onClickConnectStart?: OnConnectStart; onClickConnectEnd?: OnConnectEnd; - /** This event handler gets called when a flow has finished initializing */ + /** + * The `onInit` callback is called when the viewport is initialized. At this point you can use the + * instance to call methods like `fitView` or `zoomTo`. + */ 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 */ + /** This event handler is called when the user begins to pan or zoom the viewport. */ onMoveStart?: OnMoveStart; - /** This event handler gets called when a user stops panning or zooming the viewport */ + /** + * This event handler is called when panning or zooming viewport movement stops. + * If the movement is not user-initiated, the event parameter will be `null`. + */ onMoveEnd?: OnMoveEnd; - /** This event handler gets called when a user changes group of selected elements in the flow */ + /** 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 */ + /** 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 */ + /** 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 */ + /** 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 */ + /** 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 */ + /** 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 */ + /** This event handler gets called when mouse leaves the pane. */ onPaneMouseLeave?: (event: ReactMouseEvent) => void; /** - * Distance that the mouse can move between mousedown/up that will trigger a click + * Distance that the mouse can move between mousedown/up that will trigger a click. * @default 0 */ paneClickDistance?: number; /** - * Distance that the mouse can move between mousedown/up that will trigger a click + * Distance that the mouse can move between mousedown/up that will trigger a click. * @default 0 */ nodeClickDistance?: number; - /** This handler gets called before the user deletes nodes or edges and provides a way to abort the deletion by returning false. */ + /** + * This handler is called before nodes or edges are deleted, allowing the deletion to be aborted + * by returning `false` or modified by returning updated nodes and edges. + */ 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. + * React Flow matches a node's type to a component in the `nodeTypes` object. + * @TODO check if @default is correct + * @default { + * input: InputNode, + * default: DefaultNode, + * output: OutputNode, + * group: GroupNode + * } * @example * import CustomNode from './CustomNode'; * @@ -254,7 +298,15 @@ export interface ReactFlowProps; - /** Styles to be applied to the container of the connection line */ + /** 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. + * A loose connection mode will allow you to connect handles with differing types, including + * source-to-source connections. However, it does not support target-to-target connections. Strict + * mode allows only connections between source handles and target handles. * @default 'strict' */ connectionMode?: ConnectionMode; /** - * Pressing down this key deletes all selected nodes & edges. + * If set, pressing the key or chord will delete any selected nodes and edges. Passing an array + * represents multiple keys that can be pressed. + * + * For example, `["Delete", "Backspace"]` will delete selected elements when either key is pressed. * @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. + * If set, holding this key will let you click and drag to draw a selection box around multiple + * nodes and edges. Passing an array represents multiple keys that can be pressed. * - * By setting this prop to null you can disable this functionality. - * @default 'Space' + * For example, `["Shift", "Meta"]` will allow you to draw a selection box when either key is + * pressed. + * @default 'Shift' */ selectionKeyCode?: KeyCode | null; - /** Select multiple elements with a selection box, without pressing down selectionKey */ + /** + * Select multiple elements with a selection box, without pressing down `selectionKey`. + * @default false + */ 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. + * 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. + * 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. + * 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 + * @default "Meta" for macOS, "Control" 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. + * 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 + * By setting this prop to `null` you can disable this functionality. + * @default "Meta" for macOS, "Control" for other systems * */ zoomActivationKeyCode?: KeyCode | null; - /** Set this prop to make the flow snap to the grid */ + /** When enabled, nodes will snap to the grid when dragged. */ snapToGrid?: boolean; /** - * Grid all nodes will snap to + * If `snapToGrid` is enabled, this prop configures the grid that 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. + * You can enable this optimisation to instruct React 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 + * Controls whether all nodes should be draggable or not. Individual nodes can override this + * setting by setting their `draggable` prop. If you want to use the mouse handlers on + * non-draggable nodes, you need to add the `"nopan"` class to those nodes. * @default true */ nodesDraggable?: boolean; /** - * Controls if all nodes should be connectable to each other + * Controls whether all nodes should be connectable or not. Individual nodes can override this + * setting by setting their `connectable` prop. * @default true */ nodesConnectable?: boolean; /** - * Controls if all nodes should be focusable + * When `true`, focus between nodes can be cycled with the `Tab` key and selected with the `Enter` + * key. This option can be overridden by individual nodes by setting their `focusable` prop. * @default true */ nodesFocusable?: boolean; /** - * Defines nodes relative position to its coordinates + * The origin of the node to use when placing it in the flow or looking up its `x` and `y` + * position. An origin of `[0, 0]` means that a node's top left corner will be placed at the `x` + * and `y` position. + * @default [0, 0] * @example * [0, 0] // default, top left * [0.5, 0.5] // center @@ -357,49 +428,57 @@ export interface ReactFlowProps void; /** - * By default the viewport extends infinitely. You can use this prop to set a boundary. + * 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. + * @default [[-∞, -∞], [+∞, +∞]] * @example [[-1000, -10000], [1000, 1000]] */ translateExtent?: CoordinateExtent; @@ -424,51 +504,86 @@ export interface ReactFlowProps true + * 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. */ isValidConnection?: IsValidConnection; /** - * With a threshold greater than zero you can control the distinction between node drag and click events. + * With a threshold greater than zero you can delay node drag events. * * If threshold equals 1, you need to drag the node 1 pixel before a drag event is fired. + * + * 1 is the default value, so clicks don't trigger drag events. * @default 1 */ nodeDragThreshold?: number; - /** Sets a fixed width for the flow */ + /** Sets a fixed width for the flow. */ width?: number; - /** Sets a fixed height for the flow */ + /** Sets a fixed height for the flow. */ height?: number; /** - * Controls color scheme used for styling the flow - * @default 'system' + * Controls color scheme used for styling the flow. + * @default 'light' * @example 'system' | 'light' | 'dark' */ colorMode?: ColorMode; /** - * If set true, some debug information will be logged to the console like which events are fired. - * - * @default undefined + * If set `true`, some debug information will be logged to the console like which events are fired. + * @default false */ debug?: boolean; } From e6139a00d4414ba2c1d3e500cdfa67d7e66e655a Mon Sep 17 00:00:00 2001 From: Dimitri POSTOLOV Date: Sun, 6 Apr 2025 04:52:08 +0200 Subject: [PATCH 20/23] Improve TSDoc comments for `useNodesData`, `useReactFlow`, `isNode` and `isEdge` --- .changeset/afraid-schools-beg.md | 5 +++++ packages/react/src/hooks/useNodesData.ts | 10 ++++++---- packages/react/src/hooks/useReactFlow.ts | 2 -- packages/react/src/utils/general.ts | 18 +++++++++++------- 4 files changed, 22 insertions(+), 13 deletions(-) create mode 100644 .changeset/afraid-schools-beg.md diff --git a/.changeset/afraid-schools-beg.md b/.changeset/afraid-schools-beg.md new file mode 100644 index 00000000..a908ace5 --- /dev/null +++ b/.changeset/afraid-schools-beg.md @@ -0,0 +1,5 @@ +--- +'@xyflow/react': patch +--- + +Improve TSDoc comments for `useNodesData`, `useReactFlow`, `isNode` and `isEdge` diff --git a/packages/react/src/hooks/useNodesData.ts b/packages/react/src/hooks/useNodesData.ts index 1d2aa37e..6503f405 100644 --- a/packages/react/src/hooks/useNodesData.ts +++ b/packages/react/src/hooks/useNodesData.ts @@ -8,11 +8,9 @@ import type { Node } from '../types'; * This hook lets you subscribe to changes of a specific nodes `data` object. * * @public - * @param nodeId - The id (or ids) of the node to get the data from - * @returns An object (or array of object) with {id, type, data} representing each node + * @returns An object (or array of object) with `id`, `type`, `data` representing each node. * * @example - * *```jsx *import { useNodesData } from '@xyflow/react'; * @@ -25,9 +23,13 @@ import type { Node } from '../types'; *``` */ export function useNodesData( + /** The id of the node to get the data from. */ nodeId: string ): Pick | null; -export function useNodesData(nodeIds: string[]): Pick[]; +export function useNodesData( + /** The ids of the nodes to get the data from. */ + nodeIds: string[] +): Pick[]; // eslint-disable-next-line @typescript-eslint/no-explicit-any export function useNodesData(nodeIds: any): any { const nodesData = useStore( diff --git a/packages/react/src/hooks/useReactFlow.ts b/packages/react/src/hooks/useReactFlow.ts index a02cbb55..2cfc3430 100644 --- a/packages/react/src/hooks/useReactFlow.ts +++ b/packages/react/src/hooks/useReactFlow.ts @@ -31,8 +31,6 @@ const selector = (s: ReactFlowState) => !!s.panZoom; * 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. * * @public - * @returns ReactFlowInstance - * * @example * ```jsx *import { useCallback, useState } from 'react'; diff --git a/packages/react/src/utils/general.ts b/packages/react/src/utils/general.ts index 52d8eee2..c7c8a503 100644 --- a/packages/react/src/utils/general.ts +++ b/packages/react/src/utils/general.ts @@ -4,21 +4,23 @@ import { isNodeBase, isEdgeBase } from '@xyflow/system'; import type { Edge, Node } from '../types'; /** - * Test whether an object is useable as an [`Node`](/api-reference/types/node). + * Test whether an object is usable as an [`Node`](/api-reference/types/node). * In TypeScript this is a type guard that will narrow the type of whatever you pass in to * [`Node`](/api-reference/types/node) if it returns `true`. * * @public * @remarks In TypeScript this is a type guard that will narrow the type of whatever you pass in to Node if it returns true - * @param element - The element to test - * @returns A boolean indicating whether the element is an Node + * @param element - The element to test. + * @returns Tests whether the provided value can be used as a `Node`. If you're using TypeScript, + * this function acts as a type guard and will narrow the type of the value to `Node` if it returns + * `true`. * * @example * ```js *import { isNode } from '@xyflow/react'; * *if (isNode(node)) { - * // .. + * // ... *} *``` */ @@ -26,21 +28,23 @@ export const isNode = (element: unknown): element isNodeBase(element); /** - * Test whether an object is useable as an [`Edge`](/api-reference/types/edge). + * Test whether an object is usable as an [`Edge`](/api-reference/types/edge). * In TypeScript this is a type guard that will narrow the type of whatever you pass in to * [`Edge`](/api-reference/types/edge) if it returns `true`. * * @public * @remarks In TypeScript this is a type guard that will narrow the type of whatever you pass in to Edge if it returns true * @param element - The element to test - * @returns A boolean indicating whether the element is an Edge + * @returns Tests whether the provided value can be used as an `Edge`. If you're using TypeScript, + * this function acts as a type guard and will narrow the type of the value to `Edge` if it returns + * `true`. * * @example * ```js *import { isEdge } from '@xyflow/react'; * *if (isEdge(edge)) { - * // .. + * // ... *} *``` */ From ae585d136e34c9e9ad9d45f75c059bc5367e73ae Mon Sep 17 00:00:00 2001 From: Dimitri POSTOLOV Date: Sun, 6 Apr 2025 15:46:49 +0200 Subject: [PATCH 21/23] Improve TSDoc comments for `BaseEdgeProps` --- .changeset/eighty-foxes-add.md | 5 +++++ packages/react/src/types/edges.ts | 12 +++++++++++- 2 files changed, 16 insertions(+), 1 deletion(-) create mode 100644 .changeset/eighty-foxes-add.md diff --git a/.changeset/eighty-foxes-add.md b/.changeset/eighty-foxes-add.md new file mode 100644 index 00000000..4f781949 --- /dev/null +++ b/.changeset/eighty-foxes-add.md @@ -0,0 +1,5 @@ +--- +'@xyflow/react': patch +--- + +Improve TSDoc comments for `BaseEdgeProps` diff --git a/packages/react/src/types/edges.ts b/packages/react/src/types/edges.ts index 9d601037..ca3f91fe 100644 --- a/packages/react/src/types/edges.ts +++ b/packages/react/src/types/edges.ts @@ -148,7 +148,7 @@ export type EdgeProps = Pick< * @public * @expand */ -export type BaseEdgeProps = Omit, 'd' | 'path'> & +export type BaseEdgeProps = Omit, 'd' | 'path' | 'markerStart' | 'markerEnd'> & EdgeLabelOptions & { /** * The width of the invisible area around the edge that the user can interact with. This is @@ -166,6 +166,16 @@ export type BaseEdgeProps = Omit, 'd' | 'path'> & * be used to generate this string for you. */ path: string; + /** + * The id of the SVG marker to use at the start of the edge. This should be defined in a + * `` element in a separate SVG document or element. + */ + markerStart?: string; + /** + * The id of the SVG marker to use at the end of the edge. This should be defined in a `` + * element in a separate SVG document or element. + */ + markerEnd?: string; }; /** From 06f4dc73a51acef573c9ae0874591b17c54af0c0 Mon Sep 17 00:00:00 2001 From: Moritz Klack Date: Sun, 6 Apr 2025 20:59:15 +0200 Subject: [PATCH 22/23] Update packages/react/src/hooks/useKeyPress.ts Co-authored-by: Dimitri POSTOLOV --- packages/react/src/hooks/useKeyPress.ts | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/packages/react/src/hooks/useKeyPress.ts b/packages/react/src/hooks/useKeyPress.ts index d7e022fa..d378dab7 100644 --- a/packages/react/src/hooks/useKeyPress.ts +++ b/packages/react/src/hooks/useKeyPress.ts @@ -7,8 +7,7 @@ type KeyOrCode = 'key' | 'code'; export type UseKeyPressOptions = { /** - * You may want to listen to key presses on a specific element. This field lets you configure - * that! + * Listen to key presses on a specific element. * @default document */ target?: Window | Document | HTMLElement | ShadowRoot | null; From abacda38531791ca158ce90ed3809e705a61fe19 Mon Sep 17 00:00:00 2001 From: Moritz Klack Date: Sun, 6 Apr 2025 21:07:04 +0200 Subject: [PATCH 23/23] Update packages/react/src/types/component-props.ts Co-authored-by: Dimitri POSTOLOV --- packages/react/src/types/component-props.ts | 3 --- 1 file changed, 3 deletions(-) diff --git a/packages/react/src/types/component-props.ts b/packages/react/src/types/component-props.ts index 67a5ec2d..64b94534 100644 --- a/packages/react/src/types/component-props.ts +++ b/packages/react/src/types/component-props.ts @@ -149,10 +149,7 @@ export interface ReactFlowProps void; /** * Use this event handler to add interactivity to a controlled flow.