chore(types): cleanup comments

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;
 };

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;
 };

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

@@ -7,41 +7,44 @@ import type { Node } from '../../types';
 export type GetMiniMapNodeAttribute<NodeType extends Node = Node> = (node: NodeType) => string;
 
 export type MiniMapProps<NodeType extends Node = Node> = Omit<HTMLAttributes<SVGSVGElement>, 'onClick'> & {
-  /** color of nodes on minimap */
+  /** Color of nodes on minimap */
   nodeColor?: string | GetMiniMapNodeAttribute<NodeType>;
-  /** stroke color of nodes on minimap */
+  /** Stroke color of nodes on minimap */
   nodeStrokeColor?: string | GetMiniMapNodeAttribute<NodeType>;
-  /** className applied to nodes on minimap */
+  /** ClassName applied to nodes on minimap */
   nodeClassName?: string | GetMiniMapNodeAttribute<NodeType>;
-  /** 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<MiniMapNodeProps>;
-  /** 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;
 };
 

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;

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<HTMLDivElement> & {
-  /** 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;

packages/react/src/types/component-props.ts

@@ -242,7 +242,7 @@ export type ReactFlowProps = Omit<HTMLAttributes<HTMLDivElement>, '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<HTMLAttributes<HTMLDivElement>, '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<HTMLAttributes<HTMLDivElement>, '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<HTMLAttributes<HTMLDivElement>, '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<HTMLAttributes<HTMLDivElement>, '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

packages/react/src/types/edges.ts

@@ -114,24 +114,24 @@ export type EdgeProps<T = any> = 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;
 };

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;

packages/svelte/src/lib/container/SvelteFlow/types.ts

@@ -36,7 +36,9 @@ import type {
 import type { Writable } from 'svelte/store';
 
 export type SvelteFlowProps = DOMAttributes<HTMLDivElement> & {
-  /** 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<HTMLDivElement> & {
    * @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

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'
    */

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;

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;
 };

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;

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;
 };

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;

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<EdgeData = any> = {
-  /** 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<EdgeData = any> = {
   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;
 };
 

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;

packages/system/src/types/nodes.ts

@@ -10,27 +10,27 @@ import { Optional } from '../utils/types';
  * @typeParam U - type of the node
  */
 export type NodeBase<T = any, U extends string | undefined = string | undefined> = {
-  /** 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<T = any, U extends string | undefined = string | undefined>
   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<T = any, U extends string | undefined = string | undefined>
     positionAbsolute?: XYPosition;
   };
 
-  // only used internally
+  // Only used internally
   [internalsSymbol]?: {
     z?: number;
     handleBounds?: NodeHandleBounds;
@@ -82,7 +82,7 @@ export type NodeBase<T = any, U extends string | undefined = string | undefined>
  * @param id - The id of the node.
  */
 export type NodeProps<T = any> = {
-  /** id of the node */
+  /** Id of the node */
   id: NodeBase['id'];
   data: T;
   dragHandle: NodeBase['dragHandle'];