From 06cf4c10f5d8a43f57ee0fde19d9a3fe1044cf48 Mon Sep 17 00:00:00 2001 From: Dimitri POSTOLOV Date: Tue, 1 Apr 2025 21:04:42 +0200 Subject: [PATCH 1/2] fix: improve TSDoc comments for `Edge`, `BaseEdgeProps` and `ConnectionLineComponentProps` --- .changeset/twenty-cobras-teach.md | 5 +++++ packages/react/src/types/edges.ts | 24 ++++++++++++++++-------- 2 files changed, 21 insertions(+), 8 deletions(-) create mode 100644 .changeset/twenty-cobras-teach.md diff --git a/.changeset/twenty-cobras-teach.md b/.changeset/twenty-cobras-teach.md new file mode 100644 index 00000000..e89ef200 --- /dev/null +++ b/.changeset/twenty-cobras-teach.md @@ -0,0 +1,5 @@ +--- +'@xyflow/react': patch +--- + +dd diff --git a/packages/react/src/types/edges.ts b/packages/react/src/types/edges.ts index 8fddf865..9d601037 100644 --- a/packages/react/src/types/edges.ts +++ b/packages/react/src/types/edges.ts @@ -50,6 +50,11 @@ export type Edge< EdgeLabelOptions & { style?: CSSProperties; className?: string; + /** + * Determines whether the edge can be updated by dragging the source or target to a new node. + * This property will override the default set by the `edgesReconnectable` prop on the + * `` component. + */ reconnectable?: boolean | HandleType; focusable?: boolean; }; @@ -109,15 +114,11 @@ export type EdgeWrapperProps = { */ export type DefaultEdgeOptions = DefaultEdgeOptionsBase; -export type EdgeTextProps = SVGAttributes & +export type EdgeTextProps = Omit, 'x' | 'y'> & EdgeLabelOptions & { - /** - * The x position where the label should be rendered. - */ + /** The x position where the label should be rendered. */ x: number; - /** - * The y position where the label should be rendered. - */ + /** The y position where the label should be rendered. */ y: number; }; @@ -147,11 +148,12 @@ export type EdgeProps = Pick< * @public * @expand */ -export type BaseEdgeProps = Omit, 'd'> & +export type BaseEdgeProps = Omit, 'd' | 'path'> & EdgeLabelOptions & { /** * The width of the invisible area around the edge that the user can interact with. This is * useful for making the edge easier to click or hover over. + * @default 20 */ interactionWidth?: number; /** The x position of edge label */ @@ -233,7 +235,9 @@ export type OnReconnect = (oldEdge: EdgeType, newC export type ConnectionLineComponentProps = { connectionLineStyle?: CSSProperties; connectionLineType: ConnectionLineType; + /** The node the connection line originates from. */ fromNode: InternalNode; + /** The handle on the `fromNode` that the connection line originates from. */ fromHandle: Handle; fromX: number; fromY: number; @@ -241,6 +245,10 @@ export type ConnectionLineComponentProps = { toY: number; fromPosition: Position; toPosition: Position; + /** + * If there is an `isValidConnection` callback, this prop will be set to `"valid"` or `"invalid"` + * based on the return value of that callback. Otherwise, it will be `null`. + */ connectionStatus: 'valid' | 'invalid' | null; toNode: InternalNode | null; toHandle: Handle | null; From e95f8db11d261fbe0e520c16146fc7d2db6a4ab3 Mon Sep 17 00:00:00 2001 From: Dimitri POSTOLOV Date: Tue, 1 Apr 2025 21:05:45 +0200 Subject: [PATCH 2/2] Update .changeset/twenty-cobras-teach.md --- .changeset/twenty-cobras-teach.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.changeset/twenty-cobras-teach.md b/.changeset/twenty-cobras-teach.md index e89ef200..4f923bc6 100644 --- a/.changeset/twenty-cobras-teach.md +++ b/.changeset/twenty-cobras-teach.md @@ -2,4 +2,4 @@ '@xyflow/react': patch --- -dd +fix: improve TSDoc comments for `Edge`, `BaseEdgeProps` and `ConnectionLineComponentProps`