alighasami/xyflow
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

chore(types): cleanup comments

Browse Source
This commit is contained in:
moklick
2024-01-16 18:09:54 +01:00
parent 897c9afdf6
commit 25576cd5d5
18 changed files with 178 additions and 162 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/react/src/additional-components/Background/types.ts
+10 -10
View File
@@ -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
+11 -11
View File
@@ -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
+18 -15
View File
@@ -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
+18 -18
View File
@@ -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
+5 -4
View File
@@ -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
+12 -3
View File
@@ -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
+7 -7
View File
@@ -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;
};