From 8c32b426f4906afa544c5e99e5df3218030f6cc8 Mon Sep 17 00:00:00 2001 From: peterkogo Date: Mon, 15 Jan 2024 17:38:54 +0100 Subject: [PATCH] added typedocs for plugins --- .../additional-components/Background/types.ts | 13 ++++++++++ .../additional-components/Controls/types.ts | 14 +++++++++++ .../additional-components/MiniMap/types.ts | 18 +++++++++++++ .../NodeResizer/types.ts | 25 +++++++++++++++++++ .../NodeToolbar/types.ts | 9 +++++++ .../src/lib/plugins/Background/types.ts | 11 ++++++++ .../svelte/src/lib/plugins/Controls/types.ts | 7 ++++++ .../svelte/src/lib/plugins/Minimap/types.ts | 20 +++++++++++++++ .../src/lib/plugins/NodeResizer/types.ts | 25 +++++++++++++++++++ .../src/lib/plugins/NodeToolbar/types.ts | 9 +++++++ 10 files changed, 151 insertions(+) diff --git a/packages/react/src/additional-components/Background/types.ts b/packages/react/src/additional-components/Background/types.ts index 5d21b23f..a9fca265 100644 --- a/packages/react/src/additional-components/Background/types.ts +++ b/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; }; diff --git a/packages/react/src/additional-components/Controls/types.ts b/packages/react/src/additional-components/Controls/types.ts index e687b09b..eb36d61c 100644 --- a/packages/react/src/additional-components/Controls/types.ts +++ b/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; }; diff --git a/packages/react/src/additional-components/MiniMap/types.ts b/packages/react/src/additional-components/MiniMap/types.ts index 3b24b08d..0a49fd07 100644 --- a/packages/react/src/additional-components/MiniMap/types.ts +++ b/packages/react/src/additional-components/MiniMap/types.ts @@ -7,23 +7,41 @@ import type { Node } from '../../types'; export type GetMiniMapNodeAttribute = (node: NodeType) => string; export type MiniMapProps = Omit, 'onClick'> & { + /** color of nodes on minimap */ nodeColor?: string | GetMiniMapNodeAttribute; + /** stroke color of nodes on minimap */ nodeStrokeColor?: string | GetMiniMapNodeAttribute; + /** className applied to nodes on minimap */ nodeClassName?: string | GetMiniMapNodeAttribute; + /** 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; + /** 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; }; diff --git a/packages/react/src/additional-components/NodeResizer/types.ts b/packages/react/src/additional-components/NodeResizer/types.ts index 3a414517..11a95bcf 100644 --- a/packages/react/src/additional-components/NodeResizer/types.ts +++ b/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; diff --git a/packages/react/src/additional-components/NodeToolbar/types.ts b/packages/react/src/additional-components/NodeToolbar/types.ts index f08859dc..717f22ce 100644 --- a/packages/react/src/additional-components/NodeToolbar/types.ts +++ b/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 & { + /** 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; }; diff --git a/packages/svelte/src/lib/plugins/Background/types.ts b/packages/svelte/src/lib/plugins/Background/types.ts index 3ca5667d..e8aaf6e8 100644 --- a/packages/svelte/src/lib/plugins/Background/types.ts +++ b/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; }; diff --git a/packages/svelte/src/lib/plugins/Controls/types.ts b/packages/svelte/src/lib/plugins/Controls/types.ts index 2aad9b39..d3497645 100644 --- a/packages/svelte/src/lib/plugins/Controls/types.ts +++ b/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; diff --git a/packages/svelte/src/lib/plugins/Minimap/types.ts b/packages/svelte/src/lib/plugins/Minimap/types.ts index d39aab7a..9b725e45 100644 --- a/packages/svelte/src/lib/plugins/Minimap/types.ts +++ b/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; }; diff --git a/packages/svelte/src/lib/plugins/NodeResizer/types.ts b/packages/svelte/src/lib/plugins/NodeResizer/types.ts index b37e55c1..ee068275 100644 --- a/packages/svelte/src/lib/plugins/NodeResizer/types.ts +++ b/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; diff --git a/packages/svelte/src/lib/plugins/NodeToolbar/types.ts b/packages/svelte/src/lib/plugins/NodeToolbar/types.ts index 6c812de2..cc6d80a1 100644 --- a/packages/svelte/src/lib/plugins/NodeToolbar/types.ts +++ b/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; };