refactor(types): cleanup edge types

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<HTMLAttributes<HTMLDivElement>, 'onError'> & {
   multiSelectionKeyCode?: KeyCode | null;
   zoomActivationKeyCode?: KeyCode | null;
   snapToGrid?: boolean;
-  snapGrid?: [number, number];
+  snapGrid?: SnapGrid;
   onlyRenderVisibleElements?: boolean;
   nodesDraggable?: boolean;
   nodesConnectable?: boolean;

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<EdgeData = any> = EdgeBase<EdgeData> & {
+export type DefaultEdge<EdgeData = any> = EdgeBase<EdgeData> &
-  style?: CSSProperties;
+  EdgeLabelOptions & {
-  className?: string;
+    style?: CSSProperties;
-  sourceNode?: Node;
+    className?: string;
-  targetNode?: Node;
+    updatable?: EdgeUpdatable;
-  updatable?: EdgeUpdatable;
+    focusable?: boolean;
-} & EdgeLabelOptions;
+  };
 
 type SmoothStepEdgeType<T> = DefaultEdge<T> & {
   type: 'smoothstep';
@@ -53,6 +52,9 @@ type StepEdgeType<T> = DefaultEdge<T> & {
   pathOptions?: StepPathOptions;
 };
 
+/**
+ * The Edge type is mainly used for the `edges` that get passed to the ReactFlow component.
+ */
 export type Edge<T = any> = DefaultEdge<T> | SmoothStepEdgeType<T> | BezierEdgeType<T> | StepEdgeType<T>;
 
 export type EdgeMouseHandler = (event: ReactMouseEvent, edge: Edge) => void;
@@ -85,45 +87,58 @@ export type EdgeTextProps = HTMLAttributes<SVGElement> &
     y: number;
   };
 
-// props that get passed to a custom edge
+/**
+ * Custom edge component props.
+ */
 export type EdgeProps<T = any> = Pick<
   Edge<T>,
   'id' | 'animated' | 'data' | 'style' | 'selected' | 'source' | 'target'
 > &
-  Pick<WrapEdgeProps, 'sourceHandleId' | 'targetHandleId' | 'interactionWidth'> &
   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<EdgeProps, 'style' | 'markerStart' | 'markerEnd' | 'interactionWidth'> &
+/**
+ * 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;
+    id?: EdgeProps['id'];
-    labelX?: number;
+    markerStart?: EdgeProps['markerStart'];
-    labelY?: number;
+    markerEnd?: EdgeProps['markerEnd'];
-    path: string;
+    interactionWidth?: EdgeProps['interactionWidth'];
+    style?: EdgeProps['style'];
+    sourceHandleId?: EdgeProps['sourceHandleId'];
+    targetHandleId?: EdgeProps['targetHandleId'];
   };
 
-export type EdgeComponentProps<T = any> = Optional<Omit<EdgeProps<T>, 'source' | 'target'>, 'id'>;
+export type EdgeComponentWithPathOptions<PathOptions> = EdgeComponentProps & {
-
+  pathOptions?: PathOptions;
-export type StraightEdgeProps<T = any> = Omit<EdgeComponentProps<T>, 'sourcePosition' | 'targetPosition'>;
-
-export type SmoothStepEdgeProps<T = any> = EdgeComponentProps<T> & {
-  pathOptions?: SmoothStepPathOptions;
 };
 
-export type BezierEdgeProps<T = any> = EdgeComponentProps<T> & {
+export type BezierEdgeProps = EdgeComponentWithPathOptions<BezierPathOptions>;
-  pathOptions?: BezierPathOptions;
+export type SmoothStepEdgeProps = EdgeComponentWithPathOptions<SmoothStepPathOptions>;
-};
+export type StepEdgeProps = EdgeComponentWithPathOptions<StepPathOptions>;
-
+export type StraightEdgeProps = Omit<EdgeComponentProps, 'sourcePosition' | 'targetPosition'>;
-export type StepEdgeProps<T = any> = EdgeComponentProps<T> & {
+export type SimpleBezierEdgeProps = EdgeComponentProps;
-  pathOptions?: StepPathOptions;
-};
-
-export type SimpleBezierEdgeProps<T = any> = EdgeComponentProps<T>;
 
 export type OnEdgeUpdateFunc<T = any> = (oldEdge: Edge<T>, newConnection: Connection) => void;
 

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<NodeData = any, NodeType extends string | undefined = string | undefined> = 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<NodeData = any> = Pick<
   Node<NodeData>,
   'id' | 'data' | 'style' | 'className' | 'dragHandle' | 'sourcePosition' | 'targetPosition' | 'hidden' | 'ariaLabel'
-> &
+> & {
-  Required<Pick<Node<NodeData>, 'selected' | 'type' | 'zIndex'>> & {
+  type: string;
-    isConnectable: boolean;
+  selected: boolean;
-    xPos: number;
+  zIndex: number;
-    yPos: number;
+  isConnectable: boolean;
-    xPosOrigin: number;
+  xPos: number;
-    yPosOrigin: number;
+  yPos: number;
-    positionAbsolute: XYPosition;
+  xPosOrigin: number;
-    initialized: boolean;
+  yPosOrigin: number;
-    isSelectable: boolean;
+  positionAbsolute: XYPosition;
-    isDraggable: boolean;
+  initialized: boolean;
-    isFocusable: boolean;
+  isSelectable: boolean;
-    onClick?: NodeMouseHandler;
+  isDraggable: boolean;
-    onDoubleClick?: NodeMouseHandler;
+  isFocusable: boolean;
-    onMouseEnter?: NodeMouseHandler;
+  onClick?: NodeMouseHandler;
-    onMouseMove?: NodeMouseHandler;
+  onDoubleClick?: NodeMouseHandler;
-    onMouseLeave?: NodeMouseHandler;
+  onMouseEnter?: NodeMouseHandler;
-    onContextMenu?: NodeMouseHandler;
+  onMouseMove?: NodeMouseHandler;
-    resizeObserver: ResizeObserver | null;
+  onMouseLeave?: NodeMouseHandler;
-    isParent: boolean;
+  onContextMenu?: NodeMouseHandler;
-    noDragClassName: string;
+  resizeObserver: ResizeObserver | null;
-    noPanClassName: string;
+  isParent: boolean;
-    rfId: string;
+  noDragClassName: string;
-    disableKeyboardA11y: boolean;
+  noPanClassName: string;
-    width?: number;
+  rfId: string;
-    height?: number;
+  disableKeyboardA11y: boolean;
-  };
+  width?: number;
+  height?: number;
+};

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<EdgeData = any> = Omit<EdgeBase<EdgeData>, 'focusable'> & {
+export type DefaultEdge<EdgeData = any> = EdgeBase<EdgeData> & {
   label?: string;
   labelStyle?: string;
   style?: string;
@@ -34,12 +33,18 @@ type StepEdgeType<T> = DefaultEdge<T> & {
   pathOptions?: StepPathOptions;
 };
 
+/**
+ * The Edge type is mainly used for the `edges` that get passed to the SvelteFlow component.
+ */
 export type Edge<T = any> =
   | DefaultEdge<T>
   | SmoothStepEdgeType<T>
   | BezierEdgeType<T>
   | StepEdgeType<T>;
 
+/**
+ * Custom edge component props.
+ */
 export type EdgeProps<T = any> = Omit<Edge<T>, 'sourceHandle' | 'targetHandle' | 'type'> &
   EdgePosition & {
     markerStart?: string;
@@ -48,30 +53,30 @@ export type EdgeProps<T = any> = Omit<Edge<T>, 'sourceHandle' | 'targetHandle' |
     targetHandleId?: string | null;
   };
 
-export type EdgeComponentProps<T = any> = Optional<
+export type EdgeComponentProps = EdgePosition & {
-  Omit<
+  id?: EdgeProps['id'];
-    EdgeProps<T>,
+  hidden?: EdgeProps['hidden'];
-    'source' | 'target' | 'sourceHandleId' | 'targetHandleId' | 'animated' | 'selected' | 'data'
+  deletable?: EdgeProps['deletable'];
-  >,
+  selectable?: EdgeProps['selectable'];
-  'id'
+  markerStart?: EdgeProps['markerStart'];
->;
+  markerEnd?: EdgeProps['markerEnd'];
-
+  zIndex?: EdgeProps['zIndex'];
-export type BezierEdgeProps<T = any> = EdgeComponentProps<T> & {
+  ariaLabel?: EdgeProps['ariaLabel'];
-  pathOptions?: BezierPathOptions;
+  interactionWidth?: EdgeProps['interactionWidth'];
+  label?: EdgeProps['label'];
+  labelStyle?: EdgeProps['labelStyle'];
+  style?: EdgeProps['style'];
+  class?: EdgeProps['class'];
 };
 
-export type SmoothStepEdgeProps<T = any> = EdgeComponentProps<T> & {
+export type EdgeComponentWithPathOptions<PathOptions> = EdgeComponentProps & {
-  pathOptions?: SmoothStepPathOptions;
+  pathOptions?: PathOptions;
 };
 
-export type StepEdgeProps<T = any> = EdgeComponentProps<T> & {
+export type BezierEdgeProps = EdgeComponentWithPathOptions<BezierPathOptions>;
-  pathOptions?: StepPathOptions;
+export type SmoothStepEdgeProps = EdgeComponentWithPathOptions<SmoothStepPathOptions>;
-};
+export type StepEdgeProps = EdgeComponentWithPathOptions<StepPathOptions>;
-
+export type StraightEdgeProps = Omit<EdgeComponentProps, 'sourcePosition' | 'targetPosition'>;
-export type StraightEdgeProps<T = any> = Omit<
-  EdgeComponentProps<T>,
-  'sourcePosition' | 'targetPosition'
->;
 
 export type EdgeTypes = Record<string, ComponentType<SvelteComponent<EdgeProps>>>;
 

packages/system/src/types/edges.ts

@@ -19,7 +19,6 @@ export type EdgeBase<EdgeData = any> = {
   zIndex?: number;
   ariaLabel?: string;
   interactionWidth?: number;
-  focusable?: boolean;
 };
 
 export type SmoothStepPathOptions = {
@@ -37,7 +36,7 @@ export type BezierPathOptions = {
 
 export type DefaultEdgeOptionsBase<EdgeType extends EdgeBase> = Omit<
   EdgeType,
-  'id' | 'source' | 'target' | 'sourceHandle' | 'targetHandle' | 'sourceNode' | 'targetNode'
+  'id' | 'source' | 'target' | 'sourceHandle' | 'targetHandle'
 >;
 
 export enum ConnectionLineType {