From ba8ee0272ac937709068e5b53135ff8d3717562b Mon Sep 17 00:00:00 2001 From: moklick Date: Wed, 6 Dec 2023 15:56:17 +0100 Subject: [PATCH] refactor(types): cleanup edge types --- packages/react/src/types/component-props.ts | 3 +- packages/react/src/types/edges.ts | 75 ++++++++++++--------- packages/react/src/types/nodes.ts | 69 +++++++++++-------- packages/svelte/src/lib/types/edges.ts | 49 ++++++++------ packages/system/src/types/edges.ts | 3 +- 5 files changed, 117 insertions(+), 82 deletions(-) diff --git a/packages/react/src/types/component-props.ts b/packages/react/src/types/component-props.ts index 770432f5..09f9a582 100644 --- a/packages/react/src/types/component-props.ts +++ b/packages/react/src/types/component-props.ts @@ -20,6 +20,7 @@ import type { OnError, IsValidConnection, ColorMode, + SnapGrid, } from '@xyflow/system'; import type { @@ -110,7 +111,7 @@ export type ReactFlowProps = Omit, 'onError'> & { multiSelectionKeyCode?: KeyCode | null; zoomActivationKeyCode?: KeyCode | null; snapToGrid?: boolean; - snapGrid?: [number, number]; + snapGrid?: SnapGrid; onlyRenderVisibleElements?: boolean; nodesDraggable?: boolean; nodesConnectable?: boolean; diff --git a/packages/react/src/types/edges.ts b/packages/react/src/types/edges.ts index 287c277d..fecd7c7b 100644 --- a/packages/react/src/types/edges.ts +++ b/packages/react/src/types/edges.ts @@ -13,7 +13,6 @@ import type { HandleElement, ConnectionStatus, EdgePosition, - Optional, StepPathOptions, } from '@xyflow/system'; @@ -30,13 +29,13 @@ export type EdgeLabelOptions = { export type EdgeUpdatable = boolean | HandleType; -export type DefaultEdge = EdgeBase & { - style?: CSSProperties; - className?: string; - sourceNode?: Node; - targetNode?: Node; - updatable?: EdgeUpdatable; -} & EdgeLabelOptions; +export type DefaultEdge = EdgeBase & + EdgeLabelOptions & { + style?: CSSProperties; + className?: string; + updatable?: EdgeUpdatable; + focusable?: boolean; + }; type SmoothStepEdgeType = DefaultEdge & { type: 'smoothstep'; @@ -53,6 +52,9 @@ type StepEdgeType = DefaultEdge & { pathOptions?: StepPathOptions; }; +/** + * The Edge type is mainly used for the `edges` that get passed to the ReactFlow component. + */ export type Edge = DefaultEdge | SmoothStepEdgeType | BezierEdgeType | StepEdgeType; export type EdgeMouseHandler = (event: ReactMouseEvent, edge: Edge) => void; @@ -85,45 +87,58 @@ export type EdgeTextProps = HTMLAttributes & y: number; }; -// props that get passed to a custom edge +/** + * Custom edge component props. + */ export type EdgeProps = Pick< Edge, 'id' | 'animated' | 'data' | 'style' | 'selected' | 'source' | 'target' > & - Pick & EdgePosition & EdgeLabelOptions & { + interactionWidth?: number; + sourceHandleId?: string | null; + targetHandleId?: string | null; markerStart?: string; markerEnd?: string; // @TODO: how can we get better types for pathOptions? pathOptions?: any; }; -export type BaseEdgeProps = Pick & +/** + * BaseEdge component props. + */ +export type BaseEdgeProps = EdgeLabelOptions & { + id?: string; + interactionWidth?: number; + labelX?: number; + labelY?: number; + markerStart?: string; + markerEnd?: string; + path: string; + style?: CSSProperties; +}; + +export type EdgeComponentProps = EdgePosition & EdgeLabelOptions & { - id?: string; - labelX?: number; - labelY?: number; - path: string; + id?: EdgeProps['id']; + markerStart?: EdgeProps['markerStart']; + markerEnd?: EdgeProps['markerEnd']; + interactionWidth?: EdgeProps['interactionWidth']; + style?: EdgeProps['style']; + sourceHandleId?: EdgeProps['sourceHandleId']; + targetHandleId?: EdgeProps['targetHandleId']; }; -export type EdgeComponentProps = Optional, 'source' | 'target'>, 'id'>; - -export type StraightEdgeProps = Omit, 'sourcePosition' | 'targetPosition'>; - -export type SmoothStepEdgeProps = EdgeComponentProps & { - pathOptions?: SmoothStepPathOptions; +export type EdgeComponentWithPathOptions = EdgeComponentProps & { + pathOptions?: PathOptions; }; -export type BezierEdgeProps = EdgeComponentProps & { - pathOptions?: BezierPathOptions; -}; - -export type StepEdgeProps = EdgeComponentProps & { - pathOptions?: StepPathOptions; -}; - -export type SimpleBezierEdgeProps = EdgeComponentProps; +export type BezierEdgeProps = EdgeComponentWithPathOptions; +export type SmoothStepEdgeProps = EdgeComponentWithPathOptions; +export type StepEdgeProps = EdgeComponentWithPathOptions; +export type StraightEdgeProps = Omit; +export type SimpleBezierEdgeProps = EdgeComponentProps; export type OnEdgeUpdateFunc = (oldEdge: Edge, newConnection: Connection) => void; diff --git a/packages/react/src/types/nodes.ts b/packages/react/src/types/nodes.ts index 29548666..4d10b76b 100644 --- a/packages/react/src/types/nodes.ts +++ b/packages/react/src/types/nodes.ts @@ -1,12 +1,25 @@ import type { CSSProperties, MouseEvent as ReactMouseEvent } from 'react'; import type { NodeBase, XYPosition } from '@xyflow/system'; +/** + * The node data structure that gets used for the nodes prop. + * @public + */ export type Node = NodeBase< NodeData, NodeType > & { + /** + * Inline style object + */ style?: CSSProperties; + /** + * Inline style object + */ className?: string; + /** + * Inline style object + */ resizing?: boolean; }; @@ -17,30 +30,32 @@ export type SelectionDragHandler = (event: ReactMouseEvent, nodes: Node[]) => vo export type WrapNodeProps = Pick< Node, 'id' | 'data' | 'style' | 'className' | 'dragHandle' | 'sourcePosition' | 'targetPosition' | 'hidden' | 'ariaLabel' -> & - Required, 'selected' | 'type' | 'zIndex'>> & { - isConnectable: boolean; - xPos: number; - yPos: number; - xPosOrigin: number; - yPosOrigin: number; - positionAbsolute: XYPosition; - initialized: boolean; - isSelectable: boolean; - isDraggable: boolean; - isFocusable: boolean; - onClick?: NodeMouseHandler; - onDoubleClick?: NodeMouseHandler; - onMouseEnter?: NodeMouseHandler; - onMouseMove?: NodeMouseHandler; - onMouseLeave?: NodeMouseHandler; - onContextMenu?: NodeMouseHandler; - resizeObserver: ResizeObserver | null; - isParent: boolean; - noDragClassName: string; - noPanClassName: string; - rfId: string; - disableKeyboardA11y: boolean; - width?: number; - height?: number; - }; +> & { + type: string; + selected: boolean; + zIndex: number; + isConnectable: boolean; + xPos: number; + yPos: number; + xPosOrigin: number; + yPosOrigin: number; + positionAbsolute: XYPosition; + initialized: boolean; + isSelectable: boolean; + isDraggable: boolean; + isFocusable: boolean; + onClick?: NodeMouseHandler; + onDoubleClick?: NodeMouseHandler; + onMouseEnter?: NodeMouseHandler; + onMouseMove?: NodeMouseHandler; + onMouseLeave?: NodeMouseHandler; + onContextMenu?: NodeMouseHandler; + resizeObserver: ResizeObserver | null; + isParent: boolean; + noDragClassName: string; + noPanClassName: string; + rfId: string; + disableKeyboardA11y: boolean; + width?: number; + height?: number; +}; diff --git a/packages/svelte/src/lib/types/edges.ts b/packages/svelte/src/lib/types/edges.ts index 3f1f0e8d..c1d3778d 100644 --- a/packages/svelte/src/lib/types/edges.ts +++ b/packages/svelte/src/lib/types/edges.ts @@ -6,13 +6,12 @@ import type { DefaultEdgeOptionsBase, EdgePosition, SmoothStepPathOptions, - Optional, StepPathOptions } from '@xyflow/system'; import type { Node } from '$lib/types'; -export type DefaultEdge = Omit, 'focusable'> & { +export type DefaultEdge = EdgeBase & { label?: string; labelStyle?: string; style?: string; @@ -34,12 +33,18 @@ type StepEdgeType = DefaultEdge & { pathOptions?: StepPathOptions; }; +/** + * The Edge type is mainly used for the `edges` that get passed to the SvelteFlow component. + */ export type Edge = | DefaultEdge | SmoothStepEdgeType | BezierEdgeType | StepEdgeType; +/** + * Custom edge component props. + */ export type EdgeProps = Omit, 'sourceHandle' | 'targetHandle' | 'type'> & EdgePosition & { markerStart?: string; @@ -48,30 +53,30 @@ export type EdgeProps = Omit, 'sourceHandle' | 'targetHandle' | targetHandleId?: string | null; }; -export type EdgeComponentProps = Optional< - Omit< - EdgeProps, - 'source' | 'target' | 'sourceHandleId' | 'targetHandleId' | 'animated' | 'selected' | 'data' - >, - 'id' ->; - -export type BezierEdgeProps = EdgeComponentProps & { - pathOptions?: BezierPathOptions; +export type EdgeComponentProps = EdgePosition & { + id?: EdgeProps['id']; + hidden?: EdgeProps['hidden']; + deletable?: EdgeProps['deletable']; + selectable?: EdgeProps['selectable']; + markerStart?: EdgeProps['markerStart']; + markerEnd?: EdgeProps['markerEnd']; + zIndex?: EdgeProps['zIndex']; + ariaLabel?: EdgeProps['ariaLabel']; + interactionWidth?: EdgeProps['interactionWidth']; + label?: EdgeProps['label']; + labelStyle?: EdgeProps['labelStyle']; + style?: EdgeProps['style']; + class?: EdgeProps['class']; }; -export type SmoothStepEdgeProps = EdgeComponentProps & { - pathOptions?: SmoothStepPathOptions; +export type EdgeComponentWithPathOptions = EdgeComponentProps & { + pathOptions?: PathOptions; }; -export type StepEdgeProps = EdgeComponentProps & { - pathOptions?: StepPathOptions; -}; - -export type StraightEdgeProps = Omit< - EdgeComponentProps, - 'sourcePosition' | 'targetPosition' ->; +export type BezierEdgeProps = EdgeComponentWithPathOptions; +export type SmoothStepEdgeProps = EdgeComponentWithPathOptions; +export type StepEdgeProps = EdgeComponentWithPathOptions; +export type StraightEdgeProps = Omit; export type EdgeTypes = Record>>; diff --git a/packages/system/src/types/edges.ts b/packages/system/src/types/edges.ts index 65c8e641..5455b57a 100644 --- a/packages/system/src/types/edges.ts +++ b/packages/system/src/types/edges.ts @@ -19,7 +19,6 @@ export type EdgeBase = { zIndex?: number; ariaLabel?: string; interactionWidth?: number; - focusable?: boolean; }; export type SmoothStepPathOptions = { @@ -37,7 +36,7 @@ export type BezierPathOptions = { export type DefaultEdgeOptionsBase = Omit< EdgeType, - 'id' | 'source' | 'target' | 'sourceHandle' | 'targetHandle' | 'sourceNode' | 'targetNode' + 'id' | 'source' | 'target' | 'sourceHandle' | 'targetHandle' >; export enum ConnectionLineType {