Quartz 4

151_edgeprops

1 min read

EdgeProps

Source on GitHub

When you implement a custom edge it is wrapped in a component that enables some basic functionality. The EdgeProps type takes a generic parameter to specify the type of edges you use in your application:

type AppEdgeProps = EdgeProps<MyEdgeType>;

Your custom edge component receives the following props:

Fields

When you implement a custom edge it is wrapped in a component that enables some basic functionality. The EdgeProps type is the props that are passed to this.

  • id: EdgeType["id"] Unique id of an edge.
  • type?: EdgeType["type"] Type of edge defined in edgeTypes.
  • animated?: EdgeType["animated"]
  • data?: EdgeType["data"] Arbitrary data passed to an edge.
  • style?: EdgeType["style"]
  • selected?: EdgeType["selected"]
  • source: EdgeType["source"] Id of source node.
  • target: EdgeType["target"] Id of target node.
  • selectable?: EdgeType["selectable"]
  • deletable?: EdgeType["deletable"]
  • sourceX: number
  • sourceY: number
  • targetX: number
  • targetY: number
  • sourcePosition: Position
  • targetPosition: Position
  • label?: ReactNode The label or custom element to render along the edge. This is commonly a text label or some custom controls.
  • labelStyle?: CSSProperties Custom styles to apply to the label.
  • labelShowBg?: boolean
  • labelBgStyle?: CSSProperties
  • labelBgPadding?: [number, number]
  • labelBgBorderRadius?: number
  • sourceHandleId?: string | null
  • targetHandleId?: string | null
  • markerStart?: string
  • markerEnd?: string
  • pathOptions?: any
  • interactionWidth?: number

Graph View