added typedocs for plugins

packages/react/src/additional-components/Background/types.ts

@@ -8,14 +8,27 @@ export enum BackgroundVariant {
 
 export type BackgroundProps = {
   id?: string;
+  /** color of the pattern */
   color?: string;
+  /** color of the background */
   bgColor?: string;
+  /** class applied to the container */
   className?: string;
+  /** class applied to the pattern */
   patternClassName?: string;
+  /** gap between repetitions of the pattern */
   gap?: number | [number, number];
+  /** size of a single pattern element */
   size?: number;
+  /** offset of the pattern */
   offset?: 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;
+  /** style applied to the container */
   style?: CSSProperties;
 };

packages/react/src/additional-components/Controls/types.ts

@@ -4,17 +4,31 @@ import type { PanelPosition } from '@xyflow/system';
 import type { FitViewOptions } from '../../types';
 
 export type ControlProps = {
+  /** show button for zoom in/out */
   showZoom?: boolean;
+  /** show button for fit view */
   showFitView?: boolean;
+  /** show button for toggling interactivity */
   showInteractive?: boolean;
+  /** options being used when fit view button is clicked */
   fitViewOptions?: FitViewOptions;
+  /** callback when zoom in button is clicked */
   onZoomIn?: () => void;
+  /** callback when zoom out button is clicked */
   onZoomOut?: () => void;
+  /** callback when fit view button is clicked */
   onFitView?: () => void;
+  /** callback when interactivity is toggled */
   onInteractiveChange?: (interactiveStatus: boolean) => void;
+  /** position of the controls on the pane
+   * @example PanelPosition.TopLeft, PanelPosition.TopRight,
+   * PanelPosition.BottomLeft, PanelPosition.BottomRight
+   */
   position?: PanelPosition;
   children?: ReactNode;
+  /** style applied to container */
   style?: React.CSSProperties;
+  /**className applied to container */
   className?: string;
   'aria-label'?: string;
 };

packages/react/src/additional-components/MiniMap/types.ts

@@ -7,23 +7,41 @@ import type { Node } from '../../types';
 export type GetMiniMapNodeAttribute<NodeType extends Node = Node> = (node: NodeType) => string;
 
 export type MiniMapProps<NodeType extends Node = Node> = Omit<HTMLAttributes<SVGSVGElement>, 'onClick'> & {
+  /** color of nodes on minimap */
   nodeColor?: string | GetMiniMapNodeAttribute<NodeType>;
+  /** stroke color of nodes on minimap */
   nodeStrokeColor?: string | GetMiniMapNodeAttribute<NodeType>;
+  /** className applied to nodes on minimap */
   nodeClassName?: string | GetMiniMapNodeAttribute<NodeType>;
+  /** boder radius of nodes on minimap */
   nodeBorderRadius?: number;
+  /** stroke width of nodes on minimap */
   nodeStrokeWidth?: number;
+  /** component used to render nodes on minimap */
   nodeComponent?: ComponentType<MiniMapNodeProps>;
+  /** color of mask representing viewport */
   maskColor?: string;
+  /** stroke color of mask representing viewport */
   maskStrokeColor?: string;
+  /** stroke width of mask representing viewport */
   maskStrokeWidth?: number;
+  /** position of minimap on pane
+   * @example PanelPosition.TopLeft, PanelPosition.TopRight,
+   * PanelPosition.BottomLeft, PanelPosition.BottomRight
+   */
   position?: PanelPosition;
+  /** callback caled when minimap is clicked*/
   onClick?: (event: MouseEvent, position: XYPosition) => void;
+  /** callback called when node on minimap is clicked */
   onNodeClick?: (event: MouseEvent, node: NodeType) => void;
   pannable?: boolean;
   zoomable?: boolean;
   ariaLabel?: string | null;
+  /** invert direction when panning the minimap viewport */
   inversePan?: boolean;
+  /** step size for zooming in/out on minimap */
   zoomStep?: number;
+  /** offset the viewport on the minmap, acts like a padding */
   offsetScale?: number;
 };
 

packages/react/src/additional-components/NodeResizer/types.ts

@@ -10,21 +10,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;
+  /** className applied to handle */
   handleClassName?: string;
+  /** style applied to handle */
   handleStyle?: CSSProperties;
+  /** className applied to line */
   lineClassName?: string;
+  /** style applied to line */
   lineStyle?: CSSProperties;
+  /** 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;
 };
 
@@ -42,7 +60,14 @@ export type ResizeControlProps = Pick<
   | 'onResize'
   | 'onResizeEnd'
 > & {
+  /** position of the control
+   * @example ControlPosition.TopLeft, ControlPosition.TopRight,
+   * ControlPosition.BottomLeft, ControlPosition.BottomRight
+   */
   position?: ControlPosition;
+  /** variant of the control
+   * @example ResizeControlVariant.Handle, ResizeControlVariant.Line
+   */
   variant?: ResizeControlVariant;
   className?: string;
   style?: CSSProperties;

packages/react/src/additional-components/NodeToolbar/types.ts

@@ -2,9 +2,18 @@ import type { HTMLAttributes } from 'react';
 import type { Position, Align } from '@xyflow/system';
 
 export type NodeToolbarProps = HTMLAttributes<HTMLDivElement> & {
+  /** id of the node, or array of ids the toolbar should be displayed at */
   nodeId?: string | string[];
   isVisible?: boolean;
+  /** position of the toolbar relative to the node
+   * @example Position.TopLeft, Position.TopRight,
+   * Position.BottomLeft, Position.BottomRight
+   */
   position?: Position;
+  /** offset the toolbar from the node */
   offset?: number;
+  /** align the toolbar relative to the node
+   * @example Align.Start, Align.Center, Align.End
+   */
   align?: Align;
 };

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

@@ -1,9 +1,16 @@
 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;
+  /** 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,18 @@
 import type { Position, Align } from '@xyflow/system';
 
 export type NodeToolbarProps = {
+  /** 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;
   isVisible?: boolean;
 };