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'];