Merge pull request #3796 from xyflow/improve-type-docs

Improve type docs

packages/svelte/src/lib/plugins/Background/types.ts

@@ -6,12 +6,23 @@ export enum BackgroundVariant {
 
 export type BackgroundProps = {
   id?: string;
+  /** Color of the background */
   bgColor?: string;
+  /** Color of the pattern */
   patternColor?: string;
+  /** Class applied to the pattern */
   patternClass?: string;
+  /** Class applied to the container */
   class?: string;
+  /** Gap between repetitions of the pattern */
   gap?: number | [number, number];
+  /** Size of a single pattern element */
   size?: number;
+  /** Line width of the Line pattern */
   lineWidth?: number;
+  /** Variant of the pattern
+   * @example BackgroundVariant.Lines, BackgroundVariant.Dots, BackgroundVariant.Cross
+   * 'lines', 'dots', 'cross'
+   */
   variant?: BackgroundVariant;
 };

packages/svelte/src/lib/plugins/Controls/types.ts

@@ -2,9 +2,16 @@ import type { HTMLButtonAttributes } from 'svelte/elements';
 import type { PanelPosition } from '@xyflow/system';
 
 export type ControlsProps = {
+  /** Position of the controls on the pane
+   * @example PanelPosition.TopLeft, PanelPosition.TopRight,
+   * PanelPosition.BottomLeft, PanelPosition.BottomRight
+   */
   position?: PanelPosition;
+  /** Show button for zoom in/out */
   showZoom?: boolean;
+  /** Show button for fit view */
   showFitView?: boolean;
+  /** Show button for toggling interactivity */
   showLock?: boolean;
   buttonBgColor?: string;
   buttonBgColorHover?: string;

packages/svelte/src/lib/plugins/Minimap/types.ts

@@ -5,25 +5,45 @@ import type { Node } from '$lib/types';
 export type GetMiniMapNodeAttribute = (node: Node) => string;
 
 export type MiniMapProps = {
+  /** Background color of minimap */
   bgColor?: string;
+  /** Color of nodes on the minimap */
   nodeColor?: string | GetMiniMapNodeAttribute;
+  /** Stroke color of nodes on the minimap */
   nodeStrokeColor?: string | GetMiniMapNodeAttribute;
+  /** Class applied to nodes on the minimap */
   nodeClass?: string | GetMiniMapNodeAttribute;
+  /** Border radius of nodes on the minimap */
   nodeBorderRadius?: number;
+  /** Stroke width of nodes on the minimap */
   nodeStrokeWidth?: number;
+  /** Color of the mask representing viewport */
   maskColor?: string;
+  /** Stroke color of the mask representing viewport */
   maskStrokeColor?: string;
+  /** Stroke width of the mask representing viewport */
   maskStrokeWidth?: number;
+  /** Position of the minimap on the pane
+   * @example PanelPosition.TopLeft, PanelPosition.TopRight,
+   * PanelPosition.BottomLeft, PanelPosition.BottomRight
+   */
   position?: PanelPosition;
+  /** Class applied to container */
   class?: string;
+  /** Style applied to container */
   style?: string;
+  /** The aria-label applied to container */
   ariaLabel?: string | null;
+  /** Width of minimap */
   width?: number;
+  /** Height of minimap */
   height?: number;
   // onClick?: (event: MouseEvent, position: XYPosition) => void;
   // onNodeClick?: (event: MouseEvent, node: Node) => void;
   pannable?: boolean;
   zoomable?: boolean;
+  /** Invert the direction when panning the minimap viewport */
   inversePan?: boolean;
+  /** Step size for zooming in/out */
   zoomStep?: number;
 };

packages/svelte/src/lib/plugins/NodeResizer/types.ts

@@ -8,21 +8,39 @@ import type {
 } from '@xyflow/system';
 
 export type NodeResizerProps = {
+  /** Id of the node it is resizing
+   * @remarks optional if used inside custom node
+   */
   nodeId?: string;
+  /** Color of the resize handle */
   color?: string;
+  /** Class applied to handle */
   handleClass?: string;
+  /** Style applied to handle */
   handleStyle?: string;
+  /** Class applied to line */
   lineClass?: string;
+  /** Style applied to line */
   lineStyle?: string;
+  /** Are the controls visible */
   isVisible?: boolean;
+  /** Minimum width of node */
   minWidth?: number;
+  /** Minimum height of node */
   minHeight?: number;
+  /** Maximum width of node */
   maxWidth?: number;
+  /** Maximum height of node */
   maxHeight?: number;
+  /** Keep aspect ratio when resizing */
   keepAspectRatio?: boolean;
+  /** Callback to determine if node should resize */
   shouldResize?: ShouldResize;
+  /** Callback called when resizing starts */
   onResizeStart?: OnResizeStart;
+  /** Callback called when resizing */
   onResize?: OnResize;
+  /** Callback called when resizing ends */
   onResizeEnd?: OnResizeEnd;
 };
 
@@ -40,7 +58,14 @@ export type ResizeControlProps = Pick<
   | 'onResize'
   | 'onResizeEnd'
 > & {
+  /** Position of control
+   * @example ControlPosition.TopLeft, ControlPosition.TopRight,
+   * ControlPosition.BottomLeft, ControlPosition.BottomRight
+   */
   position?: ControlPosition;
+  /** Variant of control
+   * @example ResizeControlVariant.Handle, ResizeControlVariant.Line
+   */
   variant?: ResizeControlVariant;
   class?: string;
   style?: string;

packages/svelte/src/lib/plugins/NodeToolbar/types.ts

@@ -1,9 +1,19 @@
 import type { Position, Align } from '@xyflow/system';
 
 export type NodeToolbarProps = {
+  /** The id of the node, or array of ids the toolbar should be displayed at */
   nodeId?: string | string[];
+  /** Position of the toolbar relative to the node
+   * @example Position.TopLeft, Position.TopRight,
+   * Position.BottomLeft, Position.BottomRight
+   */
   position?: Position;
+  /** Align the toolbar relative to the node
+   * @example Align.Start, Align.Center, Align.End
+   */
   align?: Align;
+  /** Offset the toolbar from the node */
   offset?: number;
+  /** If true, node toolbar is visible even if node is not selected */
   isVisible?: boolean;
 };