import type { Component } from 'svelte'; import type { ClassValue, HTMLAttributes, SVGAttributes } from 'svelte/elements'; import type { EdgeBase, BezierPathOptions, DefaultEdgeOptionsBase, EdgePosition, SmoothStepPathOptions, StepPathOptions } from '@xyflow/system'; import type { Node } from './'; /** * An `Edge` is the complete description with everything Svelte Flow needs to know in order to * render it. * @public */ export type Edge = Record, EdgeType extends string | undefined = string | undefined> = EdgeBase & { label?: string; labelStyle?: string; style?: string; class?: ClassValue; focusable?: boolean; /** * The ARIA role attribute for the edge, used for accessibility. * @default "group" */ ariaRole?: HTMLAttributes['role']; /** * General escape hatch for adding custom attributes to the edge's DOM element. */ domAttributes?: Omit, 'id' | 'style' | 'class' | 'role' | 'aria-label' | 'dangerouslySetInnerHTML'>; }; export type BaseEdgeProps = Pick & { id?: string; /** SVG path of the edge */ path: string; /** The x coordinate of the label */ labelX?: number; /** The y coordinate of the label */ labelY?: number; /** * The id of the SVG marker to use at the start of the edge. This should be defined in a * `` element in a separate SVG document or element. Use the format "url(#markerId)" where markerId is the id of your marker definition. * @example 'url(#arrow)' */ markerStart?: string; /** * The id of the SVG marker to use at the end of the edge. This should be defined in a `` * element in a separate SVG document or element. Use the format "url(#markerId)" where markerId is the id of your marker definition. * @example 'url(#arrow)' */ markerEnd?: string; class?: ClassValue; } & HTMLAttributes; type SmoothStepEdge = Record> = Edge & { pathOptions?: SmoothStepPathOptions; }; type BezierEdge = Record> = Edge & { pathOptions?: BezierPathOptions; }; type StepEdge = Record> = Edge & { pathOptions?: StepPathOptions; }; type StraightEdge = Record> = Edge; export type BuiltInEdge = SmoothStepEdge | BezierEdge | StepEdge | StraightEdge; /** * Custom edge component props. */ export type EdgeProps = Omit & EdgePosition & { type: string; markerStart?: string; markerEnd?: string; sourceHandleId?: string | null; targetHandleId?: string | null; }; /** * Helper type for edge components that get exported by the library. */ 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 EdgeComponentWithPathOptions = EdgeComponentProps & { pathOptions?: PathOptions; }; /** * BezierEdge component props */ export type BezierEdgeProps = EdgeComponentWithPathOptions; /** * SmoothStepEdge component props */ export type SmoothStepEdgeProps = EdgeComponentWithPathOptions; /** * StepEdge component props */ export type StepEdgeProps = EdgeComponentWithPathOptions; /** * StraightEdge component props */ export type StraightEdgeProps = Omit; export type EdgeTypes = Record>; export type DefaultEdgeOptions = DefaultEdgeOptionsBase; export type EdgeLayouted = EdgeType & EdgePosition & { sourceNode?: Node; targetNode?: Node; sourceHandleId?: string | null; targetHandleId?: string | null; edge: EdgeType; }; export {};