diff --git a/.changeset/twenty-cobras-teach.md b/.changeset/twenty-cobras-teach.md new file mode 100644 index 00000000..4f923bc6 --- /dev/null +++ b/.changeset/twenty-cobras-teach.md @@ -0,0 +1,5 @@ +--- +'@xyflow/react': patch +--- + +fix: improve TSDoc comments for `Edge`, `BaseEdgeProps` and `ConnectionLineComponentProps` 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;