100 lines
2.1 KiB
TypeScript
100 lines
2.1 KiB
TypeScript
import React from 'react'
|
|
import {
|
|
BaseEdge,
|
|
getBezierPath,
|
|
type EdgeProps,
|
|
} from '@xyflow/react'
|
|
|
|
const EDGE_STROKE_WIDTH = 2
|
|
const DOT_MARKER_R = 1.5
|
|
|
|
export function AnimatedEdge({
|
|
id,
|
|
sourceX,
|
|
sourceY,
|
|
targetX,
|
|
targetY,
|
|
sourcePosition,
|
|
targetPosition,
|
|
style,
|
|
label,
|
|
labelStyle,
|
|
labelShowBg,
|
|
labelBgStyle,
|
|
labelBgPadding,
|
|
labelBgBorderRadius,
|
|
labelX,
|
|
labelY,
|
|
interactionWidth,
|
|
}: EdgeProps) {
|
|
const [edgePath] = getBezierPath({
|
|
sourceX,
|
|
sourceY,
|
|
targetX,
|
|
targetY,
|
|
sourcePosition,
|
|
targetPosition,
|
|
})
|
|
|
|
const startId = `animated-edge-dot-start-${id}`
|
|
const endId = `animated-edge-dot-end-${id}`
|
|
|
|
return (
|
|
<>
|
|
<defs>
|
|
<marker
|
|
id={startId}
|
|
markerWidth={DOT_MARKER_R * 2}
|
|
markerHeight={DOT_MARKER_R * 2}
|
|
refX={DOT_MARKER_R + 5}
|
|
refY={DOT_MARKER_R}
|
|
orient="auto"
|
|
>
|
|
<circle
|
|
r={DOT_MARKER_R}
|
|
cx={DOT_MARKER_R}
|
|
cy={DOT_MARKER_R}
|
|
className="fill-primary stroke-background"
|
|
strokeWidth={2}
|
|
/>
|
|
</marker>
|
|
<marker
|
|
id={endId}
|
|
markerWidth={DOT_MARKER_R * 2}
|
|
markerHeight={DOT_MARKER_R * 2}
|
|
refX={DOT_MARKER_R - 5}
|
|
refY={DOT_MARKER_R}
|
|
orient="auto"
|
|
>
|
|
<circle
|
|
r={DOT_MARKER_R}
|
|
cx={DOT_MARKER_R}
|
|
cy={DOT_MARKER_R}
|
|
className="fill-primary stroke-background"
|
|
strokeWidth={2}
|
|
/>
|
|
</marker>
|
|
</defs>
|
|
<BaseEdge
|
|
path={edgePath}
|
|
markerStart={`url(#${startId})`}
|
|
markerEnd={`url(#${endId})`}
|
|
style={{
|
|
strokeWidth: EDGE_STROKE_WIDTH,
|
|
...style,
|
|
}}
|
|
className="animated-edge-path"
|
|
label={label}
|
|
labelStyle={labelStyle}
|
|
labelShowBg={labelShowBg}
|
|
labelBgStyle={labelBgStyle}
|
|
labelBgPadding={labelBgPadding}
|
|
labelBgBorderRadius={labelBgBorderRadius}
|
|
labelX={labelX}
|
|
labelY={labelY}
|
|
interactionWidth={interactionWidth}
|
|
/>
|
|
</>
|
|
)
|
|
}
|