From e35e0348fe767e121830dec23da5047fcfedbc06 Mon Sep 17 00:00:00 2001 From: peterkogo Date: Mon, 15 Jan 2024 16:53:55 +0100 Subject: [PATCH 1/8] added type docs for nodes & edges --- packages/system/src/types/edges.ts | 18 +++++++++++++++ packages/system/src/types/nodes.ts | 37 +++++++++++++++++++++++++++++- 2 files changed, 54 insertions(+), 1 deletion(-) diff --git a/packages/system/src/types/edges.ts b/packages/system/src/types/edges.ts index c2318f0c..0b461e89 100644 --- a/packages/system/src/types/edges.ts +++ b/packages/system/src/types/edges.ts @@ -2,22 +2,40 @@ import { Position } from './utils'; // eslint-disable-next-line @typescript-eslint/no-explicit-any export type EdgeBase = { + /** unique id of an edge */ id: string; + /** type of an edge defined in edgeTypes */ type?: string; + /** id of source node */ source: string; + /** id of target node */ target: string; + /** id of source handle + * only needed if there are multiple handles per node + */ sourceHandle?: string | null; + /** id of target handle + * only needed if there are multiple handles per node + */ targetHandle?: string | null; animated?: boolean; hidden?: boolean; deletable?: boolean; selectable?: boolean; + /** arbitrary data passed to an edge */ data?: EdgeData; selected?: boolean; + /** set the marker on the beginning of an edge + * @example 'arrow', 'arrowclosed' or custom marker + */ markerStart?: EdgeMarkerType; + /** set the marker on the end of an edge + * @example 'arrow', 'arrowclosed' or custom marker + */ markerEnd?: EdgeMarkerType; zIndex?: number; ariaLabel?: string; + /** padding around the edge where interaction is still possible */ interactionWidth?: number; }; diff --git a/packages/system/src/types/nodes.ts b/packages/system/src/types/nodes.ts index c96ee085..dd6b7ac2 100644 --- a/packages/system/src/types/nodes.ts +++ b/packages/system/src/types/nodes.ts @@ -3,16 +3,34 @@ import { internalsSymbol } from '../constants'; import type { XYPosition, Position, CoordinateExtent, HandleElement } from '.'; import { Optional } from '../utils/types'; -// this is stuff that all nodes share independent of the framework +/** + * Framework independent node data structure. + * + * @typeParam T - type of the node data + * @typeParam U - type of the node + */ export type NodeBase = { + /** unique id of a node */ id: string; + /** position of a node on the pane + * @example { x: 0, y: 0 } + */ position: XYPosition; + /** arbitrary data passed to a node */ data: T; + /** type of node defined in nodeTypes */ type?: U; + /** only relevant for default, source, target nodeType. controls source position + * @example 'right', 'left', 'top', 'bottom' + */ sourcePosition?: Position; + /** only relevant for default, source, target nodeType. controls target position + * @example 'right', 'left', 'top', 'bottom' + */ targetPosition?: Position; hidden?: boolean; selected?: boolean; + /** is node being dragged */ dragging?: boolean; draggable?: boolean; selectable?: boolean; @@ -21,11 +39,21 @@ export type NodeBase dragHandle?: string; width?: number | null; height?: number | null; + /** parent node id, used for creating sub-flows */ parentNode?: string; zIndex?: number; + /** boundary a node can be moved in + * @example 'parent' or [[0, 0], [100, 100]] + */ extent?: 'parent' | CoordinateExtent; expandParent?: boolean; ariaLabel?: string; + /** origin of the node relative to it's position + * @example + * [0.5, 0.5] // centers the node + * [0, 0] // top left + * [1, 1] // bottom right + */ origin?: NodeOrigin; handles?: NodeHandle[]; computed?: { @@ -47,7 +75,14 @@ export type NodeBase }; // props that get passed to a custom node +/** + * The node data structure that gets used for the nodes prop. + * + * @public + * @param id - The id of the node. + */ export type NodeProps = { + /** id of the node */ id: NodeBase['id']; data: T; dragHandle: NodeBase['dragHandle']; From 8c32b426f4906afa544c5e99e5df3218030f6cc8 Mon Sep 17 00:00:00 2001 From: peterkogo Date: Mon, 15 Jan 2024 17:38:54 +0100 Subject: [PATCH 2/8] 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; }; From 0f8e13e0cf98af288a3f2b24f89a8c4439323d37 Mon Sep 17 00:00:00 2001 From: peterkogo Date: Mon, 15 Jan 2024 17:48:29 +0100 Subject: [PATCH 3/8] added types for handles --- packages/svelte/src/lib/types/general.ts | 13 +++++++++++++ packages/system/src/types/handles.ts | 17 +++++++++++++++++ 2 files changed, 30 insertions(+) diff --git a/packages/svelte/src/lib/types/general.ts b/packages/svelte/src/lib/types/general.ts index 5d33a97c..84e48d65 100644 --- a/packages/svelte/src/lib/types/general.ts +++ b/packages/svelte/src/lib/types/general.ts @@ -23,13 +23,26 @@ export type ConnectionData = { }; export type HandleComponentProps = { + /** type of the handle + * @example HandleType.Source, HandleType.Target + */ type: HandleType; + /** position of the handle + * @example Position.TopLeft, Position.TopRight, + * Position.BottomLeft, Position.BottomRight + */ position?: Position; + /** id of the handle + * @remarks optional if there is only one handle of this type + */ id?: string; class?: string; style?: string; + /** should you be able to connect from/to this handle */ isConnectable?: boolean; + /** shoould you be able to connect from this handle */ isConnectableStart?: boolean; + /** should you be able to connect to this handle */ isConnectableEnd?: boolean; onconnect?: (connections: Connection[]) => void; ondisconnect?: (connections: Connection[]) => void; diff --git a/packages/system/src/types/handles.ts b/packages/system/src/types/handles.ts index c1ea7d0e..911ecf51 100644 --- a/packages/system/src/types/handles.ts +++ b/packages/system/src/types/handles.ts @@ -27,12 +27,29 @@ export type ConnectionHandle = { }; export type HandleProps = { + /** type of the handle + * @example HandleType.Source, HandleType.Target + */ type: HandleType; + /** position of the handle + * @example Position.TopLeft, Position.TopRight, + * Position.BottomLeft, Position.BottomRight + */ position: Position; + /** should you be able to connect to/from this handle */ isConnectable?: boolean; + /** shoud you be able to connect from this handle */ isConnectableStart?: boolean; + /** should you be able to connect to this handle */ isConnectableEnd?: boolean; + /** callback called when connection is made */ onConnect?: OnConnect; + /** callback if connection is valid + * @remarks connection becomes an edge if isValidConnection returns true + */ isValidConnection?: IsValidConnection; + /** id of the handle + * @remarks optional if there is only one handle of this type + */ id?: string; }; From 115ae9493ab93570372ad4f8cd838c01d6511803 Mon Sep 17 00:00:00 2001 From: peterkogo Date: Mon, 15 Jan 2024 18:03:22 +0100 Subject: [PATCH 4/8] added types for baseEdge --- packages/react/src/types/edges.ts | 11 +++++++++++ packages/svelte/src/lib/components/BaseEdge/types.ts | 9 +++++++++ 2 files changed, 20 insertions(+) diff --git a/packages/react/src/types/edges.ts b/packages/react/src/types/edges.ts index b65b78c3..be7d0571 100644 --- a/packages/react/src/types/edges.ts +++ b/packages/react/src/types/edges.ts @@ -114,13 +114,24 @@ export type EdgeProps = Pick< * @public */ export type BaseEdgeProps = EdgeLabelOptions & { + /** unique id of edge */ id?: string; + /** additional padding where interacting with an edge is still possible */ interactionWidth?: number; className?: string; + /** x position of edge label */ labelX?: number; + /** y position of edge label */ labelY?: number; + /** marker at start of edge + * @example 'url(#arrow)' + */ markerStart?: string; + /** marker at end of edge + * @example 'url(#arrow)' + */ markerEnd?: string; + /** svg path of the edge */ path: string; style?: CSSProperties; }; diff --git a/packages/svelte/src/lib/components/BaseEdge/types.ts b/packages/svelte/src/lib/components/BaseEdge/types.ts index c4135c1c..51d02abb 100644 --- a/packages/svelte/src/lib/components/BaseEdge/types.ts +++ b/packages/svelte/src/lib/components/BaseEdge/types.ts @@ -5,10 +5,19 @@ export type BaseEdgeProps = Pick< 'interactionWidth' | 'label' | 'labelStyle' | 'style' > & { id?: string; + /** svg path of the edge */ path: string; + /** x coordinate of the label */ labelX?: number; + /** y coordinate of the label */ labelY?: number; + /** marker at start of edge + * @example 'url(#arrow)' + */ markerStart?: string; + /** marker at end of edge + * @example 'url(#arrow)' + */ markerEnd?: string; class?: string; }; From 1eb0595a96fddeed4352455a03c86480a29af828 Mon Sep 17 00:00:00 2001 From: peterkogo Date: Tue, 16 Jan 2024 11:45:58 +0100 Subject: [PATCH 5/8] added typedocs for SvelteFlowProps --- .../src/lib/container/SvelteFlow/types.ts | 238 +++++++++++++++++- 1 file changed, 234 insertions(+), 4 deletions(-) diff --git a/packages/svelte/src/lib/container/SvelteFlow/types.ts b/packages/svelte/src/lib/container/SvelteFlow/types.ts index f25c8150..00b1b87d 100644 --- a/packages/svelte/src/lib/container/SvelteFlow/types.ts +++ b/packages/svelte/src/lib/container/SvelteFlow/types.ts @@ -36,69 +36,299 @@ import type { import type { Writable } from 'svelte/store'; export type SvelteFlowProps = DOMAttributes & { + /** id of the flow + * @optional + */ id?: string; + /** An array of nodes to render in a controlled flow. + * @example + * const nodes = writable([ + * { + * id: 'node-1', + * type: 'input', + * data: { label: 'Node 1' }, + * position: { x: 250, y: 50 } + * } + * ]); + */ nodes: Writable; + /** An array of edges to render in a controlled flow. + * @example + * const edges = writable([ + * { + * id: 'edge-1-2', + * source: 'node-1', + * target: 'node-2', + * } + * ]); + */ edges: Writable; + /** Custom node types to be available in a flow. + * + * Svelte Flow matches a node's type to a component in the nodeTypes object. + * @example + * import CustomNode from './CustomNode.svelte'; + * + * const nodeTypes = { nameOfNodeType: CustomNode }; + */ nodeTypes?: NodeTypes; + /** Custom edge types to be available in a flow. + * + * Svelte Flow matches an edge's type to a component in the edgeTypes object. + * @example + * import CustomEdge from './CustomEdge.svelte'; + * + * const edgeypes = { nameOfEdgeType: CustomEdge }; + */ edgeTypes?: EdgeTypes; + /** Pressing down this key you can select multiple elements with a selection box. + * @default 'Shift' + */ selectionKey?: KeyDefinition | null; + /** If a key is set, you can pan the viewport while that key is held down even if panOnScroll is set to false. + * + * By setting this prop to null you can disable this functionality. + * @default 'Space' + */ panActivationKey?: KeyDefinition | null; + /** Pressing down this key deletes all selected nodes & edges. + * @default 'Backspace' + */ deleteKey?: KeyDefinition | null; + /** Pressing down this key you can select multiple elements by clicking. + * @default 'Meta' for macOS, "Ctrl" for other systems + */ multiSelectionKey?: KeyDefinition | null; + /**If a key is set, you can zoom the viewport while that key is held down even if panOnScroll is set to false. + * + * By setting this prop to null you can disable this functionality. + * @default 'Meta' for macOS, "Ctrl" for other systems + * */ zoomActivationKey?: KeyDefinition | null; + /** If set, initial viewport will show all nodes & edges */ fitView?: boolean; + /** Options to be used in combination with fitView + * @example + * const fitViewOptions = { + * padding: 0.1, + * includeHiddenNodes: false, + * minZoom: 0.1, + * maxZoom: 1, + * duration: 200, + * nodes: [{id: 'node-1'}, {id: 'node-2'}], // nodes to fit + * }; + */ fitViewOptions?: FitViewOptions; + /** Defines nodes relative position to its coordinates + * @example + * [0, 0] // default, top left + * [0.5, 0.5] // center + * [1, 1] // bottom right + */ nodeOrigin?: NodeOrigin; + /** With a threshold greater than zero you can control the distinction between node drag and click events. + * + * If threshold equals 1, you need to drag the node 1 pixel before a drag event is fired. + * @default 1 + */ nodeDragThreshold?: number; + /** Minimum zoom level + * @default 0.1 + */ minZoom?: number; + /** Maximum zoom level + * @default 1 + */ maxZoom?: number; + /** Sets the initial position and zoom of the viewport. + * + * If a default viewport is provided but fitView is enabled, the default viewport will be ignored. + * @example + * const initialViewport = { + * zoom: 0.5, + * position: { x: 0, y: 0 } + * }; + */ initialViewport?: Viewport; + /** Custom viewport writable to be used instead of internal one */ viewport?: Writable; + /** The radius around a handle where you drop a connection line to create a new edge. + * @default 20 + */ connectionRadius?: number; + /** 'strict' connection mode will only allow you to connect source handles to target handles. + * + * 'loose' connection mode will allow you to connect handles of any type to one another. + * @default 'strict' + */ connectionMode?: ConnectionMode; + /** Styles to be applied to the connection line */ connectionLineStyle?: string; + /** Styles to be applied to the container of the connection line */ connectionLineContainerStyle?: string; + /** When set to "partial", when the user creates a selection box by click and dragging nodes that are only partially in the box are still selected. + * @default 'full' + */ selectionMode?: SelectionMode; + /** Grid all nodes will snap to + * @example [20, 20] + */ snapGrid?: SnapGrid; + /** Color of edge markers + * @example "#b1b1b7" + */ defaultMarkerColor?: string; + /** Controls if all nodes should be draggable + * @default true + */ nodesDraggable?: boolean; + /** Controls if all nodes should be connectable to each other + * @default true + */ nodesConnectable?: boolean; + /** Controls if all elements should (nodes & edges) be selectable + * @default true + */ elementsSelectable?: boolean; + /** By default the viewport extends infinitely. You can use this prop to set a boundary. + * + * The first pair of coordinates is the top left boundary and the second pair is the bottom right. + * @example [[-1000, -10000], [1000, 1000]] + */ translateExtent?: CoordinateExtent; - panOnScrollMode?: PanOnScrollMode; + /** Disabling this prop will allow the user to scroll the page even when their pointer is over the flow. + * @default true + */ preventScrolling?: boolean; + /** Controls if the viewport should zoom by scrolling inside the container */ zoomOnScroll?: boolean; + /** Controls if the viewport should zoom by double clicking somewhere on the flow */ zoomOnDoubleClick?: boolean; + /** Controls if the viewport should zoom by pinching on a touch screen */ zoomOnPinch?: boolean; + /** Controls if the viewport should pan by scrolling inside the container + * + * Can be limited to a specific direction with panOnScrollMode + */ panOnScroll?: boolean; + /** This prop is used to limit the direction of panning when panOnScroll is enabled. + * + * The "free" option allows panning in any direction. + * @default "free" + * @example "horizontal" | "vertical" + */ + panOnScrollMode?: PanOnScrollMode; + /** Enableing this prop allows users to pan the viewport by clicking and dragging. + * + * You can also set this prop to an array of numbers to limit which mouse buttons can activate panning. + * @example [0, 2] // allows panning with the left and right mouse buttons + * [0, 1, 2, 3, 4] // allows panning with all mouse buttons + */ panOnDrag?: boolean | number[]; + /** Select multiple elements with a selection box, without pressing down selectionKey */ selectionOnDrag?: boolean; + /** You can enable this optimisation to instruct Svelte Flow to only render nodes and edges that would be visible in the viewport. + * + * This might improve performance when you have a large number of nodes and edges but also adds an overhead. + * @default false + */ onlyRenderVisibleElements?: boolean; + /** You can enable this prop to automatically pan the viewport while making a new connection. + * @default true + */ autoPanOnConnect?: boolean; + /** You can enable this prop to automatically pan the viewport while dragging a node. + * @default true + */ autoPanOnNodeDrag?: boolean; + /** Set position of the attribution + * @default 'bottom-right' + * @example 'top-left' | 'top-center' | 'top-right' | 'bottom-left' | 'bottom-center' | 'bottom-right' + */ attributionPosition?: PanelPosition; + /** By default, we render a small attribution in the corner of your flows that links back to the project. + * + * Anyone is free to remove this attribution whether they're a Pro subscriber or not + * but we ask that you take a quick look at our {@link https://reactflow.dev/learn/troubleshooting/remove-attribution | removing attribution guide} + * before doing so. + */ proOptions?: ProOptions; + /** Defaults to be applied to all new edges that are added to the flow. + * + * Properties on a new edge will override these defaults if they exist. + * @example + * const defaultEdgeOptions = { + * type: 'customEdgeType', + * animated: true, + * interactionWidth: 10, + * data: { label: 'custom label' }, + * hidden: false, + * deletable: true, + * selected: false, + * focusable: true, + * markerStart: EdgeMarker.ArrowClosed, + * markerEnd: EdgeMarker.ArrowClosed, + * zIndex: 12, + * ariaLabel: 'custom aria label' + * } + */ defaultEdgeOptions?: DefaultEdgeOptions; + /** Sets a fixed width for the flow */ width?: number; + /** Sets a fixed height for the flow */ height?: number; + /** Controls color scheme used for styling the flow + * @default 'system' + * @example 'system' | 'light' | 'dark' + */ colorMode?: ColorMode; - + /** Class to be applied to the flow container */ class?: string; + /** Styles to be applied to the flow container */ style?: string; - + /** Choose from the built-in edge types to be used for connections + * @default 'default' | ConnectionLineType.Bezier + * @example 'straight' | 'default' | 'step' | 'smoothstep' | 'bezier' + * @example ConnectionLineType.Straight | ConnectionLineType.Default | ConnectionLineType.Step | ConnectionLineType.SmoothStep | ConnectionLineType.Bezier + */ connectionLineType?: ConnectionLineType; + /**This callback can be used to validate a new connection + * + * If you return false, the edge will not be added to your flow. + * If you have custom connection logic its preferred to use this callback over the isValidConnection prop on the handle component for performance reasons. + * @default (connection: Connection) => true + */ isValidConnection?: IsValidConnection; - + /** This event handler is called when the user begins to pan or zoom the viewport */ onMoveStart?: OnMoveStart; + /** This event handler is called when the user pans or zooms the viewport */ onMove?: OnMove; + /** This event handler is called when the user stops panning or zooming the viewport */ onMoveEnd?: OnMoveEnd; + /** Ocassionally something may happen that causes Svelte Flow to throw an error. + * + * Instead of exploding your application, we log a message to the console and then call this event handler. + * You might use it for additional logging or to show a message to the user. + */ onerror?: OnError; + /** This handler gets called when the user deletes nodes or edges. + * @example + * onDelete={({nodes, edges}) => { + * console.log('deleted nodes:', nodes); + * console.log('deleted edges:', edges); + * }} + */ ondelete?: OnDelete; + /** This handler gets called before the user deletes nodes or edges and provides a way to abort the deletion by returning false. */ onbeforedelete?: OnBeforeDelete; + /** This handler gets called when a new edge is created. You can use it to modify the newly created edge. */ onedgecreate?: OnEdgeCreate; + /** This event gets fired when a connection successfully completes and an edge is created. */ onconnect?: OnConnect; + /** When a user starts to drag a connection line, this event gets fired. */ onconnectstart?: OnConnectStart; + /** When a user stops dragging a connection line, this event gets fired. */ onconnectend?: OnConnectEnd; }; From b478fc6852a19f087007bc4e602777cf7b7e66d5 Mon Sep 17 00:00:00 2001 From: peterkogo Date: Tue, 16 Jan 2024 17:41:55 +0100 Subject: [PATCH 6/8] added typedocs for ReactFlowProps --- packages/react/src/types/component-props.ts | 331 +++++++++++++++++- .../src/lib/container/SvelteFlow/types.ts | 4 +- 2 files changed, 332 insertions(+), 3 deletions(-) diff --git a/packages/react/src/types/component-props.ts b/packages/react/src/types/component-props.ts index bdb6e529..6b11c734 100644 --- a/packages/react/src/types/component-props.ts +++ b/packages/react/src/types/component-props.ts @@ -51,118 +51,447 @@ import type { * @public */ export type ReactFlowProps = Omit, 'onError'> & { + /** An array of nodes to render in a controlled flow. + * @example + * const nodes = [ + * { + * id: 'node-1', + * type: 'input', + * data: { label: 'Node 1' }, + * position: { x: 250, y: 50 } + * } + * ]; + */ nodes?: Node[]; + /** An array of edges to render in a controlled flow. + * @example + * const edges = [ + * { + * id: 'edge-1-2', + * source: 'node-1', + * target: 'node-2', + * } + * ]; + */ edges?: Edge[]; + /** The initial nodes to render in an uncontrolled flow. */ defaultNodes?: Node[]; + /** The initial edges to render in an uncontrolled flow. */ defaultEdges?: Edge[]; + /** Defaults to be applied to all new edges that are added to the flow. + * + * Properties on a new edge will override these defaults if they exist. + * @example + * const defaultEdgeOptions = { + * type: 'customEdgeType', + * animated: true, + * interactionWidth: 10, + * data: { label: 'custom label' }, + * hidden: false, + * deletable: true, + * selected: false, + * focusable: true, + * markerStart: EdgeMarker.ArrowClosed, + * markerEnd: EdgeMarker.ArrowClosed, + * zIndex: 12, + * ariaLabel: 'custom aria label' + * } + */ defaultEdgeOptions?: DefaultEdgeOptions; + /** This event handler is called when a user clicks on a node */ onNodeClick?: NodeMouseHandler; + /** This event handler is called when a user double clicks on a node */ onNodeDoubleClick?: NodeMouseHandler; + /** This event handler is called when mouse of a user enters a node */ onNodeMouseEnter?: NodeMouseHandler; + /** This event handler is called when mouse of a user moves over a node */ onNodeMouseMove?: NodeMouseHandler; + /** This event handler is called when mouse of a user leaves a node */ onNodeMouseLeave?: NodeMouseHandler; + /** This event handler is called when a user right clicks on a node */ onNodeContextMenu?: NodeMouseHandler; + /** This event handler is called when a user starts to drag a node */ onNodeDragStart?: NodeDragHandler; + /** This event handler is called when a user drags a node */ onNodeDrag?: NodeDragHandler; + /** This event handler is called when a user stops dragging a node */ onNodeDragStop?: NodeDragHandler; + /** This event handler is called when a user clicks on an edge */ onEdgeClick?: (event: ReactMouseEvent, edge: Edge) => void; - onEdgeUpdate?: OnEdgeUpdateFunc; + /** This event handler is called when a user right clicks on an edge */ onEdgeContextMenu?: EdgeMouseHandler; + /** This event handler is called when mouse of a user enters an edge */ onEdgeMouseEnter?: EdgeMouseHandler; + /** This event handler is called when mouse of a user moves over an edge */ onEdgeMouseMove?: EdgeMouseHandler; + /** This event handler is called when mouse of a user leaves an edge */ onEdgeMouseLeave?: EdgeMouseHandler; + /** This event handler is called when a user double clicks on an edge */ onEdgeDoubleClick?: EdgeMouseHandler; onEdgeUpdateStart?: (event: ReactMouseEvent, edge: Edge, handleType: HandleType) => void; onEdgeUpdateEnd?: (event: MouseEvent | TouchEvent, edge: Edge, handleType: HandleType) => void; + onEdgeUpdate?: OnEdgeUpdateFunc; + /** This event handler is called when a Node is updated + * @example // Use NodesState hook to create edges and get onNodesChange handler + * import ReactFlow, { useNodesState } from '@xyflow/react'; + * const [edges, setNodes, onNodesChange] = useNodesState(initialNodes); + * + * return () + * @example // Use helper function to update edge + * import ReactFlow, { applyNodeChanges } from '@xyflow/react'; + * + * const onNodeChange = useCallback( + * (changes) => setNode((eds) => applyNodeChanges(changes, eds)), + * [], + * ); + * + * return () + */ onNodesChange?: OnNodesChange; + /** This event handler is called when a Edge is updated + * @example // Use EdgesState hook to create edges and get onEdgesChange handler + * import ReactFlow, { useEdgesState } from '@xyflow/react'; + * const [edges, setEdges, onEdgesChange] = useEdgesState(initialEdges); + * + * return () + * @example // Use helper function to update edge + * import ReactFlow, { applyEdgeChanges } from '@xyflow/react'; + * + * const onEdgesChange = useCallback( + * (changes) => setEdges((eds) => applyEdgeChanges(changes, eds)), + * [], + * ); + * + * return () + */ onEdgesChange?: OnEdgesChange; + /** This event handler gets called when a Node is deleted */ onNodesDelete?: OnNodesDelete; + /** This event handler gets called when a Edge is deleted */ onEdgesDelete?: OnEdgesDelete; + /** This event handler gets called when a Node or Edge is deleted */ onDelete?: OnDelete; + /** This event handler gets called when a user starts to drag a selection box */ onSelectionDragStart?: SelectionDragHandler; + /** This event handler gets called when a user drags a selection box */ onSelectionDrag?: SelectionDragHandler; + /** This event handler gets called when a user stops dragging a selection box */ onSelectionDragStop?: SelectionDragHandler; onSelectionStart?: (event: ReactMouseEvent) => void; onSelectionEnd?: (event: ReactMouseEvent) => void; onSelectionContextMenu?: (event: ReactMouseEvent, nodes: Node[]) => void; + /** When a connection line is completed and two nodes are connected by the user, this event fires with the new connection. + * + * You can use the addEdge utility to convert the connection to a complete edge. + * @example // Use helper function to update edges onConnect + * import ReactFlow, { addEdge } from '@xyflow/react'; + * + * const onConnect = useCallback( + * (params) => setEdges((eds) => addEdge(params, eds)), + * [], + * ); + * + * return () + */ onConnect?: OnConnect; + /** This event handler gets called when a user starts to drag a connection line */ onConnectStart?: OnConnectStart; + /** This event handler gets called when a user stops dragging a connection line */ onConnectEnd?: OnConnectEnd; onClickConnectStart?: OnConnectStart; onClickConnectEnd?: OnConnectEnd; + /** This event handler gets called when a flow has finished initializing */ onInit?: OnInit; + /** This event handler is called while the user is either panning or zooming the viewport. */ onMove?: OnMove; + /** This event handler gets called when a user starts to pan or zoom the viewport */ onMoveStart?: OnMoveStart; + /** This event handler gets called when a user stops panning or zooming the viewport */ onMoveEnd?: OnMoveEnd; + /** This event handler gets called when a user changes group of selected elements in the flow */ onSelectionChange?: OnSelectionChangeFunc; + /** This event handler gets called when user scroll inside the pane */ onPaneScroll?: (event?: WheelEvent) => void; + /** This event handler gets called when user clicks inside the pane */ onPaneClick?: (event: ReactMouseEvent) => void; + /** This event handler gets called when user right clicks inside the pane */ onPaneContextMenu?: (event: ReactMouseEvent | MouseEvent) => void; + /** This event handler gets called when mouse enters the pane */ onPaneMouseEnter?: (event: ReactMouseEvent) => void; + /** This event handler gets called when mouse moves over the pane */ onPaneMouseMove?: (event: ReactMouseEvent) => void; + /** This event handler gets called when mouse leaves the pane */ onPaneMouseLeave?: (event: ReactMouseEvent) => void; + /** This handler gets called before the user deletes nodes or edges and provides a way to abort the deletion by returning false. */ onBeforeDelete?: OnBeforeDelete; + /** Custom node types to be available in a flow. + * + * React Flow matches a node's type to a component in the nodeTypes object. + * @example + * import CustomNode from './CustomNode'; + * + * const nodeTypes = { nameOfNodeType: CustomNode }; + */ nodeTypes?: NodeTypes; + /** Custom edge types to be available in a flow. + * + * React Flow matches an edge's type to a component in the edgeTypes object. + * @example + * import CustomEdge from './CustomEdge'; + * + * const edgeTypes = { nameOfEdgeType: CustomEdge }; + */ edgeTypes?: EdgeTypes; + /** nThe type of edge path to use for connection lines. + * + * Although created edges can be of any type, React Flow needs to know what type of path to render for the connection line before the edge is created! + */ connectionLineType?: ConnectionLineType; + /** Styles to be applied to the connection line */ connectionLineStyle?: CSSProperties; + /** React Component to be used as a connection line */ connectionLineComponent?: ConnectionLineComponent; + /** Styles to be applied to the container of the connection line */ connectionLineContainerStyle?: CSSProperties; + /** 'strict' connection mode will only allow you to connect source handles to target handles. + * + * 'loose' connection mode will allow you to connect handles of any type to one another. + * @default 'strict' + */ connectionMode?: ConnectionMode; + /** Pressing down this key deletes all selected nodes & edges. + * @default 'Backspace' + */ deleteKeyCode?: KeyCode | null; + /** If a key is set, you can pan the viewport while that key is held down even if panOnScroll is set to false. + * + * By setting this prop to null you can disable this functionality. + * @default 'Space' + */ selectionKeyCode?: KeyCode | null; + /** Select multiple elements with a selection box, without pressing down selectionKey */ selectionOnDrag?: boolean; + /** When set to "partial", when the user creates a selection box by click and dragging nodes that are only partially in the box are still selected. + * @default 'full' + */ selectionMode?: SelectionMode; + /** If a key is set, you can pan the viewport while that key is held down even if panOnScroll is set to false. + * + * By setting this prop to null you can disable this functionality. + * @default 'Space' + */ panActivationKeyCode?: KeyCode | null; + /** Pressing down this key you can select multiple elements by clicking. + * @default 'Meta' for macOS, "Ctrl" for other systems + */ multiSelectionKeyCode?: KeyCode | null; + /**If a key is set, you can zoom the viewport while that key is held down even if panOnScroll is set to false. + * + * By setting this prop to null you can disable this functionality. + * @default 'Meta' for macOS, "Ctrl" for other systems + * */ zoomActivationKeyCode?: KeyCode | null; + /** Set this prop to make the flow snap to the grid */ snapToGrid?: boolean; + /** Grid all nodes will snap to + * @example [20, 20] + */ snapGrid?: SnapGrid; + /** You can enable this optimisation to instruct Svelte Flow to only render nodes and edges that would be visible in the viewport. + * + * This might improve performance when you have a large number of nodes and edges but also adds an overhead. + * @default false + */ onlyRenderVisibleElements?: boolean; + /** Controls if all nodes should be draggable + * @default true + */ nodesDraggable?: boolean; + /** Controls if all nodes should be connectable to each other + * @default true + */ nodesConnectable?: boolean; + /** Controls if all nodes should be focusable + * @default true + */ nodesFocusable?: boolean; + /** Defines nodes relative position to its coordinates + * @example + * [0, 0] // default, top left + * [0.5, 0.5] // center + * [1, 1] // bottom right + */ nodeOrigin?: NodeOrigin; + /** Controls if all edges should be focusable + * @default true + */ edgesFocusable?: boolean; + /** Controls if all edges should be updateable + * @default true + */ edgesUpdatable?: boolean; + /** Controls if all elements should (nodes & edges) be selectable + * @default true + */ elementsSelectable?: boolean; selectNodesOnDrag?: boolean; + /** Enableing this prop allows users to pan the viewport by clicking and dragging. + * + * You can also set this prop to an array of numbers to limit which mouse buttons can activate panning. + * @example [0, 2] // allows panning with the left and right mouse buttons + * [0, 1, 2, 3, 4] // allows panning with all mouse buttons + */ panOnDrag?: boolean | number[]; + /** Minimum zoom level + * @default 0.1 + */ minZoom?: number; + /** Maximum zoom level + * @default 1 + */ maxZoom?: number; + /** Controlled viewport to be used instead of internal one */ viewport?: Viewport; + /** Sets the initial position and zoom of the viewport. + * + * If a default viewport is provided but fitView is enabled, the default viewport will be ignored. + * @example + * const initialViewport = { + * zoom: 0.5, + * position: { x: 0, y: 0 } + * }; + */ defaultViewport?: Viewport; + onViewportChange?: (viewport: Viewport) => void; + /** By default the viewport extends infinitely. You can use this prop to set a boundary. + * + * The first pair of coordinates is the top left boundary and the second pair is the bottom right. + * @example [[-1000, -10000], [1000, 1000]] + */ translateExtent?: CoordinateExtent; + /** Disabling this prop will allow the user to scroll the page even when their pointer is over the flow. + * @default true + */ preventScrolling?: boolean; + /** By default nodes can be placed on an infinite flow. You can use this prop to set a boundary. + * + * The first pair of coordinates is the top left boundary and the second pair is the bottom right. + * @example [[-1000, -10000], [1000, 1000]] + */ nodeExtent?: CoordinateExtent; + /** Color of edge markers + * @example "#b1b1b7" + */ defaultMarkerColor?: string; + /** Controls if the viewport should zoom by scrolling inside the container */ zoomOnScroll?: boolean; + /** Controls if the viewport should zoom by pinching on a touch screen */ zoomOnPinch?: boolean; + /** Controls if the viewport should pan by scrolling inside the container + * + * Can be limited to a specific direction with panOnScrollMode + */ panOnScroll?: boolean; + /** Controls how fast viewport should be panned on scroll. + * + * Use togther with panOnScroll prop. + */ panOnScrollSpeed?: number; + /** This prop is used to limit the direction of panning when panOnScroll is enabled. + * + * The "free" option allows panning in any direction. + * @default "free" + * @example "horizontal" | "vertical" + */ panOnScrollMode?: PanOnScrollMode; + /** Controls if the viewport should zoom by double clicking somewhere on the flow */ zoomOnDoubleClick?: boolean; edgeUpdaterRadius?: number; noDragClassName?: string; noWheelClassName?: string; noPanClassName?: string; + /** If set, initial viewport will show all nodes & edges */ fitView?: boolean; + /** Options to be used in combination with fitView + * @example + * const fitViewOptions = { + * padding: 0.1, + * includeHiddenNodes: false, + * minZoom: 0.1, + * maxZoom: 1, + * duration: 200, + * nodes: [{id: 'node-1'}, {id: 'node-2'}], // nodes to fit + * }; + */ fitViewOptions?: FitViewOptions; + /**The connectOnClick option lets you click or tap on a source handle to start a connection + * and then click on a target handle to complete the connection. + * + * If you set this option to false, users will need to drag the connection line to the target + * handle to create a connection. + */ connectOnClick?: boolean; + /** Set position of the attribution + * @default 'bottom-right' + * @example 'top-left' | 'top-center' | 'top-right' | 'bottom-left' | 'bottom-center' | 'bottom-right' + */ attributionPosition?: PanelPosition; + /** By default, we render a small attribution in the corner of your flows that links back to the project. + * + * Anyone is free to remove this attribution whether they're a Pro subscriber or not + * but we ask that you take a quick look at our {@link https://reactflow.dev/learn/troubleshooting/remove-attribution | removing attribution guide} + * before doing so. + */ proOptions?: ProOptions; + /** Enabling this option will raise the z-index of nodes when they are selected. + * @default true + */ elevateNodesOnSelect?: boolean; + /** Enabling this option will raise the z-index of edges when they are selected. + * @default true + */ elevateEdgesOnSelect?: boolean; disableKeyboardA11y?: boolean; + /** You can enable this prop to automatically pan the viewport while dragging a node. + * @default true + */ autoPanOnNodeDrag?: boolean; + /** You can enable this prop to automatically pan the viewport while dragging a node. + * @default true + */ autoPanOnConnect?: boolean; + /** You can enable this prop to automatically pan the viewport while making a new connection. + * @default true + */ connectionRadius?: number; + /** Ocassionally something may happen that causes Svelte Flow to throw an error. + * + * Instead of exploding your application, we log a message to the console and then call this event handler. + * You might use it for additional logging or to show a message to the user. + */ onError?: OnError; + /** This callback can be used to validate a new connection + * + * If you return false, the edge will not be added to your flow. + * If you have custom connection logic its preferred to use this callback over the isValidConnection prop on the handle component for performance reasons. + * @default (connection: Connection) => true + */ isValidConnection?: IsValidConnection; + /** With a threshold greater than zero you can control the distinction between node drag and click events. + * + * If threshold equals 1, you need to drag the node 1 pixel before a drag event is fired. + * @default 1 + */ nodeDragThreshold?: number; + /** Sets a fixed width for the flow */ width?: number; + /** Sets a fixed height for the flow */ height?: number; + /** Controls color scheme used for styling the flow + * @default 'system' + * @example 'system' | 'light' | 'dark' + */ colorMode?: ColorMode; }; diff --git a/packages/svelte/src/lib/container/SvelteFlow/types.ts b/packages/svelte/src/lib/container/SvelteFlow/types.ts index 00b1b87d..3fde2d89 100644 --- a/packages/svelte/src/lib/container/SvelteFlow/types.ts +++ b/packages/svelte/src/lib/container/SvelteFlow/types.ts @@ -78,7 +78,7 @@ export type SvelteFlowProps = DOMAttributes & { * @example * import CustomEdge from './CustomEdge.svelte'; * - * const edgeypes = { nameOfEdgeType: CustomEdge }; + * const edgeTypes = { nameOfEdgeType: CustomEdge }; */ edgeTypes?: EdgeTypes; /** Pressing down this key you can select multiple elements with a selection box. @@ -292,7 +292,7 @@ export type SvelteFlowProps = DOMAttributes & { * @example ConnectionLineType.Straight | ConnectionLineType.Default | ConnectionLineType.Step | ConnectionLineType.SmoothStep | ConnectionLineType.Bezier */ connectionLineType?: ConnectionLineType; - /**This callback can be used to validate a new connection + /** This callback can be used to validate a new connection * * If you return false, the edge will not be added to your flow. * If you have custom connection logic its preferred to use this callback over the isValidConnection prop on the handle component for performance reasons. From 897c9afdf6e1eb600f4f401a2acdb8ff43cf18b0 Mon Sep 17 00:00:00 2001 From: peterkogo Date: Tue, 16 Jan 2024 17:45:57 +0100 Subject: [PATCH 7/8] added typedocs for Panel --- packages/react/src/components/Panel/index.tsx | 3 +++ packages/svelte/src/lib/container/Panel/types.ts | 3 +++ 2 files changed, 6 insertions(+) diff --git a/packages/react/src/components/Panel/index.tsx b/packages/react/src/components/Panel/index.tsx index cde20716..eeb01a15 100644 --- a/packages/react/src/components/Panel/index.tsx +++ b/packages/react/src/components/Panel/index.tsx @@ -6,6 +6,9 @@ import { useStore } from '../../hooks/useStore'; import type { ReactFlowState } from '../../types'; export type PanelProps = HTMLAttributes & { + /** Set position of the panel + * @example 'top-left' | 'top-center' | 'top-right' | 'bottom-left' | 'bottom-center' | 'bottom-right' + */ position?: PanelPosition; children: ReactNode; }; diff --git a/packages/svelte/src/lib/container/Panel/types.ts b/packages/svelte/src/lib/container/Panel/types.ts index 2a1225cb..b6e4dd0a 100644 --- a/packages/svelte/src/lib/container/Panel/types.ts +++ b/packages/svelte/src/lib/container/Panel/types.ts @@ -4,6 +4,9 @@ import type { HTMLAttributes } from 'svelte/elements'; export type PanelProps = HTMLAttributes & { 'data-testid'?: string; 'data-message'?: string; + /** Set position of the panel + * @example 'top-left' | 'top-center' | 'top-right' | 'bottom-left' | 'bottom-center' | 'bottom-right' + */ position?: PanelPosition; style?: string; class?: string; From 25576cd5d5d21200d7f93e563b4c4a990995b0a3 Mon Sep 17 00:00:00 2001 From: moklick Date: Tue, 16 Jan 2024 18:09:54 +0100 Subject: [PATCH 8/8] chore(types): cleanup comments --- .../additional-components/Background/types.ts | 20 +++++------ .../additional-components/Controls/types.ts | 22 ++++++------ .../additional-components/MiniMap/types.ts | 33 +++++++++-------- .../NodeResizer/types.ts | 36 +++++++++---------- .../NodeToolbar/types.ts | 9 ++--- packages/react/src/types/component-props.ts | 15 ++++++-- packages/react/src/types/edges.ts | 14 ++++---- .../src/lib/components/BaseEdge/types.ts | 10 +++--- .../src/lib/container/SvelteFlow/types.ts | 6 ++-- .../src/lib/plugins/Background/types.ts | 16 ++++----- .../svelte/src/lib/plugins/Controls/types.ts | 8 ++--- .../svelte/src/lib/plugins/Minimap/types.ts | 34 +++++++++--------- .../src/lib/plugins/NodeResizer/types.ts | 36 +++++++++---------- .../src/lib/plugins/NodeToolbar/types.ts | 9 ++--- packages/svelte/src/lib/types/general.ts | 12 +++---- packages/system/src/types/edges.ts | 20 +++++------ packages/system/src/types/handles.ts | 16 ++++----- packages/system/src/types/nodes.ts | 24 ++++++------- 18 files changed, 178 insertions(+), 162 deletions(-) diff --git a/packages/react/src/additional-components/Background/types.ts b/packages/react/src/additional-components/Background/types.ts index a9fca265..409bbe31 100644 --- a/packages/react/src/additional-components/Background/types.ts +++ b/packages/react/src/additional-components/Background/types.ts @@ -8,27 +8,27 @@ export enum BackgroundVariant { export type BackgroundProps = { id?: string; - /** color of the pattern */ + /** Color of the pattern */ color?: string; - /** color of the background */ + /** Color of the background */ bgColor?: string; - /** class applied to the container */ + /** Class applied to the container */ className?: string; - /** class applied to the pattern */ + /** Class applied to the pattern */ patternClassName?: string; - /** gap between repetitions of the pattern */ + /** Gap between repetitions of the pattern */ gap?: number | [number, number]; - /** size of a single pattern element */ + /** Size of a single pattern element */ size?: number; - /** offset of the pattern */ + /** Offset of the pattern */ offset?: number; - /** line width of the Line pattern */ + /** Line width of the Line pattern */ lineWidth?: number; - /** variant of the pattern + /** Variant of the pattern * @example BackgroundVariant.Lines, BackgroundVariant.Dots, BackgroundVariant.Cross * 'lines', 'dots', 'cross' */ variant?: BackgroundVariant; - /** style applied to the container */ + /** 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 eb36d61c..e9015dfb 100644 --- a/packages/react/src/additional-components/Controls/types.ts +++ b/packages/react/src/additional-components/Controls/types.ts @@ -4,31 +4,31 @@ import type { PanelPosition } from '@xyflow/system'; import type { FitViewOptions } from '../../types'; export type ControlProps = { - /** show button for zoom in/out */ + /** Show button for zoom in/out */ showZoom?: boolean; - /** show button for fit view */ + /** Show button for fit view */ showFitView?: boolean; - /** show button for toggling interactivity */ + /** Show button for toggling interactivity */ showInteractive?: boolean; - /** options being used when fit view button is clicked */ + /** Options being used when fit view button is clicked */ fitViewOptions?: FitViewOptions; - /** callback when zoom in button is clicked */ + /** Callback when zoom in button is clicked */ onZoomIn?: () => void; - /** callback when zoom out button is clicked */ + /** Callback when zoom out button is clicked */ onZoomOut?: () => void; - /** callback when fit view button is clicked */ + /** Callback when fit view button is clicked */ onFitView?: () => void; - /** callback when interactivity is toggled */ + /** Callback when interactivity is toggled */ onInteractiveChange?: (interactiveStatus: boolean) => void; - /** position of the controls on the pane + /** 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 applied to container */ style?: React.CSSProperties; - /**className applied to container */ + /** 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 0a49fd07..31e67428 100644 --- a/packages/react/src/additional-components/MiniMap/types.ts +++ b/packages/react/src/additional-components/MiniMap/types.ts @@ -7,41 +7,44 @@ import type { Node } from '../../types'; export type GetMiniMapNodeAttribute = (node: NodeType) => string; export type MiniMapProps = Omit, 'onClick'> & { - /** color of nodes on minimap */ + /** Color of nodes on minimap */ nodeColor?: string | GetMiniMapNodeAttribute; - /** stroke color of nodes on minimap */ + /** Stroke color of nodes on minimap */ nodeStrokeColor?: string | GetMiniMapNodeAttribute; - /** className applied to nodes on minimap */ + /** ClassName applied to nodes on minimap */ nodeClassName?: string | GetMiniMapNodeAttribute; - /** boder radius of nodes on minimap */ + /** Border radius of nodes on minimap */ nodeBorderRadius?: number; - /** stroke width of nodes on minimap */ + /** Stroke width of nodes on minimap */ nodeStrokeWidth?: number; - /** component used to render nodes on minimap */ + /** Component used to render nodes on minimap */ nodeComponent?: ComponentType; - /** color of mask representing viewport */ + /** Color of mask representing viewport */ maskColor?: string; - /** stroke color of mask representing viewport */ + /** Stroke color of mask representing viewport */ maskStrokeColor?: string; - /** stroke width of mask representing viewport */ + /** Stroke width of mask representing viewport */ maskStrokeWidth?: number; - /** position of minimap on pane + /** Position of minimap on pane * @example PanelPosition.TopLeft, PanelPosition.TopRight, * PanelPosition.BottomLeft, PanelPosition.BottomRight */ position?: PanelPosition; - /** callback caled when minimap is clicked*/ + /** Callback caled when minimap is clicked*/ onClick?: (event: MouseEvent, position: XYPosition) => void; - /** callback called when node on minimap is clicked */ + /** Callback called when node on minimap is clicked */ onNodeClick?: (event: MouseEvent, node: NodeType) => void; + /** If true, viewport is pannable via mini map component */ pannable?: boolean; + /** If true, viewport is zoomable via mini map component */ zoomable?: boolean; + /** The aria-label attribute */ ariaLabel?: string | null; - /** invert direction when panning the minimap viewport */ + /** Invert direction when panning the minimap viewport */ inversePan?: boolean; - /** step size for zooming in/out on minimap */ + /** Step size for zooming in/out on minimap */ zoomStep?: number; - /** offset the viewport on the minmap, acts like a padding */ + /** 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 11a95bcf..5335c80d 100644 --- a/packages/react/src/additional-components/NodeResizer/types.ts +++ b/packages/react/src/additional-components/NodeResizer/types.ts @@ -10,39 +10,39 @@ import type { } from '@xyflow/system'; export type NodeResizerProps = { - /** id of the node it is resizing + /** Id of the node it is resizing * @remarks optional if used inside custom node */ nodeId?: string; - /** color of the resize handle */ + /** Color of the resize handle */ color?: string; - /** className applied to handle */ + /** ClassName applied to handle */ handleClassName?: string; - /** style applied to handle */ + /** Style applied to handle */ handleStyle?: CSSProperties; - /** className applied to line */ + /** ClassName applied to line */ lineClassName?: string; - /** style applied to line */ + /** Style applied to line */ lineStyle?: CSSProperties; - /** are the controls visible */ + /** Are the controls visible */ isVisible?: boolean; - /** minimum width of node */ + /** Minimum width of node */ minWidth?: number; - /** minimum height of node */ + /** Minimum height of node */ minHeight?: number; - /** maximum width of node */ + /** Maximum width of node */ maxWidth?: number; - /** maximum height of node */ + /** Maximum height of node */ maxHeight?: number; - /** keep aspect ratio when resizing */ + /** Keep aspect ratio when resizing */ keepAspectRatio?: boolean; - /** callback to determine if node should resize */ + /** Callback to determine if node should resize */ shouldResize?: ShouldResize; - /** callback called when resizing starts */ + /** Callback called when resizing starts */ onResizeStart?: OnResizeStart; - /** callback called when resizing */ + /** Callback called when resizing */ onResize?: OnResize; - /** callback called when resizing ends */ + /** Callback called when resizing ends */ onResizeEnd?: OnResizeEnd; }; @@ -60,12 +60,12 @@ export type ResizeControlProps = Pick< | 'onResize' | 'onResizeEnd' > & { - /** position of the control + /** Position of the control * @example ControlPosition.TopLeft, ControlPosition.TopRight, * ControlPosition.BottomLeft, ControlPosition.BottomRight */ position?: ControlPosition; - /** variant of the control + /** Variant of the control * @example ResizeControlVariant.Handle, ResizeControlVariant.Line */ variant?: ResizeControlVariant; diff --git a/packages/react/src/additional-components/NodeToolbar/types.ts b/packages/react/src/additional-components/NodeToolbar/types.ts index 717f22ce..4de679bd 100644 --- a/packages/react/src/additional-components/NodeToolbar/types.ts +++ b/packages/react/src/additional-components/NodeToolbar/types.ts @@ -2,17 +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 */ + /** Id of the node, or array of ids the toolbar should be displayed at */ nodeId?: string | string[]; + /** If true, node toolbar is visible even if node is not selected */ isVisible?: boolean; - /** position of the toolbar relative to the node + /** 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 the toolbar from the node */ offset?: number; - /** align the toolbar relative to the node + /** Align the toolbar relative to the node * @example Align.Start, Align.Center, Align.End */ align?: Align; diff --git a/packages/react/src/types/component-props.ts b/packages/react/src/types/component-props.ts index 6b11c734..213b9d8c 100644 --- a/packages/react/src/types/component-props.ts +++ b/packages/react/src/types/component-props.ts @@ -242,7 +242,7 @@ export type ReactFlowProps = Omit, 'onError'> & { * const edgeTypes = { nameOfEdgeType: CustomEdge }; */ edgeTypes?: EdgeTypes; - /** nThe type of edge path to use for connection lines. + /** The type of edge path to use for connection lines. * * Although created edges can be of any type, React Flow needs to know what type of path to render for the connection line before the edge is created! */ @@ -285,7 +285,7 @@ export type ReactFlowProps = Omit, 'onError'> & { * @default 'Meta' for macOS, "Ctrl" for other systems */ multiSelectionKeyCode?: KeyCode | null; - /**If a key is set, you can zoom the viewport while that key is held down even if panOnScroll is set to false. + /** If a key is set, you can zoom the viewport while that key is held down even if panOnScroll is set to false. * * By setting this prop to null you can disable this functionality. * @default 'Meta' for macOS, "Ctrl" for other systems @@ -334,6 +334,9 @@ export type ReactFlowProps = Omit, 'onError'> & { * @default true */ elementsSelectable?: boolean; + /** If true, nodes get selected on drag + * @default true + */ selectNodesOnDrag?: boolean; /** Enableing this prop allows users to pan the viewport by clicking and dragging. * @@ -362,7 +365,9 @@ export type ReactFlowProps = Omit, 'onError'> & { * }; */ defaultViewport?: Viewport; - + /** + * Gets called when the viewport changes. + */ onViewportChange?: (viewport: Viewport) => void; /** By default the viewport extends infinitely. You can use this prop to set a boundary. * @@ -452,6 +457,10 @@ export type ReactFlowProps = Omit, 'onError'> & { * @default true */ elevateEdgesOnSelect?: boolean; + /** + * Can be set true if built-in keyboard controls should be disabled. + * @default false + */ disableKeyboardA11y?: boolean; /** You can enable this prop to automatically pan the viewport while dragging a node. * @default true diff --git a/packages/react/src/types/edges.ts b/packages/react/src/types/edges.ts index be7d0571..2b514c96 100644 --- a/packages/react/src/types/edges.ts +++ b/packages/react/src/types/edges.ts @@ -114,24 +114,24 @@ export type EdgeProps = Pick< * @public */ export type BaseEdgeProps = EdgeLabelOptions & { - /** unique id of edge */ + /** Unique id of edge */ id?: string; - /** additional padding where interacting with an edge is still possible */ + /** Additional padding where interacting with an edge is still possible */ interactionWidth?: number; className?: string; - /** x position of edge label */ + /** The x position of edge label */ labelX?: number; - /** y position of edge label */ + /** The y position of edge label */ labelY?: number; - /** marker at start of edge + /** Marker at start of edge * @example 'url(#arrow)' */ markerStart?: string; - /** marker at end of edge + /** Marker at end of edge * @example 'url(#arrow)' */ markerEnd?: string; - /** svg path of the edge */ + /** SVG path of the edge */ path: string; style?: CSSProperties; }; diff --git a/packages/svelte/src/lib/components/BaseEdge/types.ts b/packages/svelte/src/lib/components/BaseEdge/types.ts index 51d02abb..41a1189b 100644 --- a/packages/svelte/src/lib/components/BaseEdge/types.ts +++ b/packages/svelte/src/lib/components/BaseEdge/types.ts @@ -5,17 +5,17 @@ export type BaseEdgeProps = Pick< 'interactionWidth' | 'label' | 'labelStyle' | 'style' > & { id?: string; - /** svg path of the edge */ + /** SVG path of the edge */ path: string; - /** x coordinate of the label */ + /** The x coordinate of the label */ labelX?: number; - /** y coordinate of the label */ + /** The y coordinate of the label */ labelY?: number; - /** marker at start of edge + /** Marker at start of edge * @example 'url(#arrow)' */ markerStart?: string; - /** marker at end of edge + /** Marker at end of edge * @example 'url(#arrow)' */ markerEnd?: string; diff --git a/packages/svelte/src/lib/container/SvelteFlow/types.ts b/packages/svelte/src/lib/container/SvelteFlow/types.ts index 3fde2d89..c6b71671 100644 --- a/packages/svelte/src/lib/container/SvelteFlow/types.ts +++ b/packages/svelte/src/lib/container/SvelteFlow/types.ts @@ -36,7 +36,9 @@ import type { import type { Writable } from 'svelte/store'; export type SvelteFlowProps = DOMAttributes & { - /** id of the flow + /** The id of the flow + * + * This is necessary if you want to render multiple flows. * @optional */ id?: string; @@ -99,7 +101,7 @@ export type SvelteFlowProps = DOMAttributes & { * @default 'Meta' for macOS, "Ctrl" for other systems */ multiSelectionKey?: KeyDefinition | null; - /**If a key is set, you can zoom the viewport while that key is held down even if panOnScroll is set to false. + /** If a key is set, you can zoom the viewport while that key is held down even if panOnScroll is set to false. * * By setting this prop to null you can disable this functionality. * @default 'Meta' for macOS, "Ctrl" for other systems diff --git a/packages/svelte/src/lib/plugins/Background/types.ts b/packages/svelte/src/lib/plugins/Background/types.ts index e8aaf6e8..dba56b97 100644 --- a/packages/svelte/src/lib/plugins/Background/types.ts +++ b/packages/svelte/src/lib/plugins/Background/types.ts @@ -6,21 +6,21 @@ export enum BackgroundVariant { export type BackgroundProps = { id?: string; - /** color of the background */ + /** Color of the background */ bgColor?: string; - /** color of the pattern */ + /** Color of the pattern */ patternColor?: string; - /** class applied to the pattern */ + /** Class applied to the pattern */ patternClass?: string; - /** class applied to the container */ + /** Class applied to the container */ class?: string; - /** gap between repetitions of the pattern */ + /** Gap between repetitions of the pattern */ gap?: number | [number, number]; - /** size of a single pattern element */ + /** Size of a single pattern element */ size?: number; - /** line width of the Line pattern */ + /** Line width of the Line pattern */ lineWidth?: number; - /** variant of the pattern + /** Variant of the pattern * @example BackgroundVariant.Lines, BackgroundVariant.Dots, BackgroundVariant.Cross * 'lines', 'dots', 'cross' */ diff --git a/packages/svelte/src/lib/plugins/Controls/types.ts b/packages/svelte/src/lib/plugins/Controls/types.ts index d3497645..6fcddd78 100644 --- a/packages/svelte/src/lib/plugins/Controls/types.ts +++ b/packages/svelte/src/lib/plugins/Controls/types.ts @@ -1,16 +1,16 @@ import type { PanelPosition } from '@xyflow/system'; export type ControlsProps = { - /** position of the controls on the pane + /** Position of the controls on the pane * @example PanelPosition.TopLeft, PanelPosition.TopRight, * PanelPosition.BottomLeft, PanelPosition.BottomRight */ position?: PanelPosition; - /** show button for zoom in/out */ + /** Show button for zoom in/out */ showZoom?: boolean; - /** show button for fit view */ + /** Show button for fit view */ showFitView?: boolean; - /** show button for toggling interactivity */ + /** 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 9b725e45..d66577a8 100644 --- a/packages/svelte/src/lib/plugins/Minimap/types.ts +++ b/packages/svelte/src/lib/plugins/Minimap/types.ts @@ -5,45 +5,45 @@ import type { Node } from '$lib/types'; export type GetMiniMapNodeAttribute = (node: Node) => string; export type MiniMapProps = { - /** background color of minimap */ + /** Background color of minimap */ bgColor?: string; - /** color of nodes on the minimap */ + /** Color of nodes on the minimap */ nodeColor?: string | GetMiniMapNodeAttribute; - /** stroke color of nodes on the minimap */ + /** Stroke color of nodes on the minimap */ nodeStrokeColor?: string | GetMiniMapNodeAttribute; - /** class applied to nodes on the minimap */ + /** Class applied to nodes on the minimap */ nodeClass?: string | GetMiniMapNodeAttribute; - /** border radius of nodes on the minimap */ + /** Border radius of nodes on the minimap */ nodeBorderRadius?: number; - /** stroke width of nodes on the minimap */ + /** Stroke width of nodes on the minimap */ nodeStrokeWidth?: number; - /** color of the mask representing viewport */ + /** Color of the mask representing viewport */ maskColor?: string; - /** stroke color of the mask representing viewport */ + /** Stroke color of the mask representing viewport */ maskStrokeColor?: string; - /** stroke width of the mask representing viewport */ + /** Stroke width of the mask representing viewport */ maskStrokeWidth?: number; - /** position of the minimap on the pane + /** Position of the minimap on the pane * @example PanelPosition.TopLeft, PanelPosition.TopRight, * PanelPosition.BottomLeft, PanelPosition.BottomRight */ position?: PanelPosition; - /** class applied to container */ + /** Class applied to container */ class?: string; - /** style applied to container */ + /** Style applied to container */ style?: string; - /** aria-label applied to container */ + /** The aria-label applied to container */ ariaLabel?: string | null; - /** width of minimap */ + /** Width of minimap */ width?: number; - /** height of minimap */ + /** 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 */ + /** Invert the direction when panning the minimap viewport */ inversePan?: boolean; - /** step size for zooming in/out */ + /** 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 ee068275..ebe44b8b 100644 --- a/packages/svelte/src/lib/plugins/NodeResizer/types.ts +++ b/packages/svelte/src/lib/plugins/NodeResizer/types.ts @@ -8,39 +8,39 @@ import type { } from '@xyflow/system'; export type NodeResizerProps = { - /** id of the node it is resizing + /** Id of the node it is resizing * @remarks optional if used inside custom node */ nodeId?: string; - /** color of the resize handle */ + /** Color of the resize handle */ color?: string; - /** class applied to handle */ + /** Class applied to handle */ handleClass?: string; - /** style applied to handle */ + /** Style applied to handle */ handleStyle?: string; - /** class applied to line */ + /** Class applied to line */ lineClass?: string; - /** style applied to line */ + /** Style applied to line */ lineStyle?: string; - /** are the controls visible */ + /** Are the controls visible */ isVisible?: boolean; - /** minimum width of node */ + /** Minimum width of node */ minWidth?: number; - /** minimum height of node */ + /** Minimum height of node */ minHeight?: number; - /** maximum width of node */ + /** Maximum width of node */ maxWidth?: number; - /** maximum height of node */ + /** Maximum height of node */ maxHeight?: number; - /** keep aspect ratio when resizing */ + /** Keep aspect ratio when resizing */ keepAspectRatio?: boolean; - /** callback to determine if node should resize */ + /** Callback to determine if node should resize */ shouldResize?: ShouldResize; - /** callback called when resizing starts */ + /** Callback called when resizing starts */ onResizeStart?: OnResizeStart; - /** callback called when resizing */ + /** Callback called when resizing */ onResize?: OnResize; - /** callback called when resizing ends */ + /** Callback called when resizing ends */ onResizeEnd?: OnResizeEnd; }; @@ -58,12 +58,12 @@ export type ResizeControlProps = Pick< | 'onResize' | 'onResizeEnd' > & { - /** position of control + /** Position of control * @example ControlPosition.TopLeft, ControlPosition.TopRight, * ControlPosition.BottomLeft, ControlPosition.BottomRight */ position?: ControlPosition; - /** variant of control + /** Variant of control * @example ResizeControlVariant.Handle, ResizeControlVariant.Line */ variant?: ResizeControlVariant; diff --git a/packages/svelte/src/lib/plugins/NodeToolbar/types.ts b/packages/svelte/src/lib/plugins/NodeToolbar/types.ts index cc6d80a1..aec506a3 100644 --- a/packages/svelte/src/lib/plugins/NodeToolbar/types.ts +++ b/packages/svelte/src/lib/plugins/NodeToolbar/types.ts @@ -1,18 +1,19 @@ import type { Position, Align } from '@xyflow/system'; export type NodeToolbarProps = { - /** id of the node, or array of ids the toolbar should be displayed at */ + /** 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 + /** 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 + /** Align the toolbar relative to the node * @example Align.Start, Align.Center, Align.End */ align?: Align; - /** offset the toolbar from the node */ + /** Offset the toolbar from the node */ offset?: number; + /** If true, node toolbar is visible even if node is not selected */ isVisible?: boolean; }; diff --git a/packages/svelte/src/lib/types/general.ts b/packages/svelte/src/lib/types/general.ts index 84e48d65..4f5fa30b 100644 --- a/packages/svelte/src/lib/types/general.ts +++ b/packages/svelte/src/lib/types/general.ts @@ -23,26 +23,26 @@ export type ConnectionData = { }; export type HandleComponentProps = { - /** type of the handle + /** Type of the handle * @example HandleType.Source, HandleType.Target */ type: HandleType; - /** position of the handle + /** Position of the handle * @example Position.TopLeft, Position.TopRight, * Position.BottomLeft, Position.BottomRight */ position?: Position; - /** id of the handle + /** Id of the handle * @remarks optional if there is only one handle of this type */ id?: string; class?: string; style?: string; - /** should you be able to connect from/to this handle */ + /** Should you be able to connect from/to this handle */ isConnectable?: boolean; - /** shoould you be able to connect from this handle */ + /** Shoould you be able to connect from this handle */ isConnectableStart?: boolean; - /** should you be able to connect to this handle */ + /** Should you be able to connect to this handle */ isConnectableEnd?: boolean; onconnect?: (connections: Connection[]) => void; ondisconnect?: (connections: Connection[]) => void; diff --git a/packages/system/src/types/edges.ts b/packages/system/src/types/edges.ts index 0b461e89..e28ad058 100644 --- a/packages/system/src/types/edges.ts +++ b/packages/system/src/types/edges.ts @@ -2,19 +2,19 @@ import { Position } from './utils'; // eslint-disable-next-line @typescript-eslint/no-explicit-any export type EdgeBase = { - /** unique id of an edge */ + /** Unique id of an edge */ id: string; - /** type of an edge defined in edgeTypes */ + /** Type of an edge defined in edgeTypes */ type?: string; - /** id of source node */ + /** Id of source node */ source: string; - /** id of target node */ + /** Id of target node */ target: string; - /** id of source handle + /** Id of source handle * only needed if there are multiple handles per node */ sourceHandle?: string | null; - /** id of target handle + /** Id of target handle * only needed if there are multiple handles per node */ targetHandle?: string | null; @@ -22,20 +22,20 @@ export type EdgeBase = { hidden?: boolean; deletable?: boolean; selectable?: boolean; - /** arbitrary data passed to an edge */ + /** Arbitrary data passed to an edge */ data?: EdgeData; selected?: boolean; - /** set the marker on the beginning of an edge + /** Set the marker on the beginning of an edge * @example 'arrow', 'arrowclosed' or custom marker */ markerStart?: EdgeMarkerType; - /** set the marker on the end of an edge + /** Set the marker on the end of an edge * @example 'arrow', 'arrowclosed' or custom marker */ markerEnd?: EdgeMarkerType; zIndex?: number; ariaLabel?: string; - /** padding around the edge where interaction is still possible */ + /** Padding around the edge where interaction is still possible */ interactionWidth?: number; }; diff --git a/packages/system/src/types/handles.ts b/packages/system/src/types/handles.ts index 911ecf51..32732935 100644 --- a/packages/system/src/types/handles.ts +++ b/packages/system/src/types/handles.ts @@ -27,28 +27,28 @@ export type ConnectionHandle = { }; export type HandleProps = { - /** type of the handle + /** Type of the handle * @example HandleType.Source, HandleType.Target */ type: HandleType; - /** position of the handle + /** Position of the handle * @example Position.TopLeft, Position.TopRight, * Position.BottomLeft, Position.BottomRight */ position: Position; - /** should you be able to connect to/from this handle */ + /** Should you be able to connect to/from this handle */ isConnectable?: boolean; - /** shoud you be able to connect from this handle */ + /** Should you be able to connect from this handle */ isConnectableStart?: boolean; - /** should you be able to connect to this handle */ + /** Should you be able to connect to this handle */ isConnectableEnd?: boolean; - /** callback called when connection is made */ + /** Callback called when connection is made */ onConnect?: OnConnect; - /** callback if connection is valid + /** Callback if connection is valid * @remarks connection becomes an edge if isValidConnection returns true */ isValidConnection?: IsValidConnection; - /** id of the handle + /** Id of the handle * @remarks optional if there is only one handle of this type */ id?: string; diff --git a/packages/system/src/types/nodes.ts b/packages/system/src/types/nodes.ts index dd6b7ac2..40aa1c16 100644 --- a/packages/system/src/types/nodes.ts +++ b/packages/system/src/types/nodes.ts @@ -10,27 +10,27 @@ import { Optional } from '../utils/types'; * @typeParam U - type of the node */ export type NodeBase = { - /** unique id of a node */ + /** Unique id of a node */ id: string; - /** position of a node on the pane + /** Position of a node on the pane * @example { x: 0, y: 0 } */ position: XYPosition; - /** arbitrary data passed to a node */ + /** Arbitrary data passed to a node */ data: T; - /** type of node defined in nodeTypes */ + /** Type of node defined in nodeTypes */ type?: U; - /** only relevant for default, source, target nodeType. controls source position + /** Only relevant for default, source, target nodeType. controls source position * @example 'right', 'left', 'top', 'bottom' */ sourcePosition?: Position; - /** only relevant for default, source, target nodeType. controls target position + /** Only relevant for default, source, target nodeType. controls target position * @example 'right', 'left', 'top', 'bottom' */ targetPosition?: Position; hidden?: boolean; selected?: boolean; - /** is node being dragged */ + /** True, if node is being dragged */ dragging?: boolean; draggable?: boolean; selectable?: boolean; @@ -39,16 +39,16 @@ export type NodeBase dragHandle?: string; width?: number | null; height?: number | null; - /** parent node id, used for creating sub-flows */ + /** Parent node id, used for creating sub-flows */ parentNode?: string; zIndex?: number; - /** boundary a node can be moved in + /** Boundary a node can be moved in * @example 'parent' or [[0, 0], [100, 100]] */ extent?: 'parent' | CoordinateExtent; expandParent?: boolean; ariaLabel?: string; - /** origin of the node relative to it's position + /** Origin of the node relative to it's position * @example * [0.5, 0.5] // centers the node * [0, 0] // top left @@ -62,7 +62,7 @@ export type NodeBase positionAbsolute?: XYPosition; }; - // only used internally + // Only used internally [internalsSymbol]?: { z?: number; handleBounds?: NodeHandleBounds; @@ -82,7 +82,7 @@ export type NodeBase * @param id - The id of the node. */ export type NodeProps = { - /** id of the node */ + /** Id of the node */ id: NodeBase['id']; data: T; dragHandle: NodeBase['dragHandle'];