145 lines
4.1 KiB
TypeScript
145 lines
4.1 KiB
TypeScript
import React, { memo } from 'react'
|
|
import {
|
|
BaseEdge,
|
|
getBezierPath,
|
|
type EdgeProps,
|
|
} from '@xyflow/react'
|
|
import { useCanvasStore } from '@/app/canvas/canvasStore'
|
|
import { selectConnectionStatusForEdge } from '@/app/canvas/canvasStore.selectors'
|
|
import { CONNECTION_STATUS_CLASS } from '@/lib/graph/connectionStatus'
|
|
import { getConnectionLabelForTargetAndStatus } from '@/lib/graph/nodeRegistry'
|
|
|
|
const EDGE_STROKE_WIDTH = 2
|
|
const DOT_MARKER_R = 1.5
|
|
|
|
function AnimatedEdgeInner({
|
|
id,
|
|
source,
|
|
sourceX,
|
|
sourceY,
|
|
targetX,
|
|
targetY,
|
|
sourcePosition,
|
|
targetPosition,
|
|
style,
|
|
label: labelProp,
|
|
interactionWidth,
|
|
target,
|
|
data,
|
|
}: EdgeProps) {
|
|
const connectionStatus = useCanvasStore((s) =>
|
|
selectConnectionStatusForEdge(s, source, target)
|
|
)
|
|
const statusClass = CONNECTION_STATUS_CLASS[connectionStatus]
|
|
|
|
const targetType = (data as { targetType?: string } | undefined)?.targetType ?? ''
|
|
const dataLabel = (data as { connectionLabel?: string } | undefined)?.connectionLabel
|
|
const displayLabel =
|
|
getConnectionLabelForTargetAndStatus(targetType, connectionStatus) ?? labelProp ?? dataLabel
|
|
|
|
const [edgePath, edgeLabelX, edgeLabelY] = 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 - 1}
|
|
refY={DOT_MARKER_R}
|
|
orient="auto"
|
|
>
|
|
<circle
|
|
r={DOT_MARKER_R}
|
|
cx={DOT_MARKER_R}
|
|
cy={DOT_MARKER_R}
|
|
className="fill-primary"
|
|
strokeWidth={2}
|
|
/>
|
|
</marker>
|
|
<marker
|
|
id={endId}
|
|
markerWidth={DOT_MARKER_R * 2}
|
|
markerHeight={DOT_MARKER_R * 2}
|
|
refX={DOT_MARKER_R + 1}
|
|
refY={DOT_MARKER_R}
|
|
orient="auto"
|
|
>
|
|
<circle
|
|
r={DOT_MARKER_R}
|
|
cx={DOT_MARKER_R}
|
|
cy={DOT_MARKER_R}
|
|
className="fill-primary"
|
|
strokeWidth={2}
|
|
/>
|
|
</marker>
|
|
</defs>
|
|
<BaseEdge
|
|
path={edgePath}
|
|
markerStart={`url(#${startId})`}
|
|
markerEnd={`url(#${endId})`}
|
|
style={{
|
|
strokeWidth: EDGE_STROKE_WIDTH,
|
|
...style,
|
|
}}
|
|
className={`animated-edge-path${statusClass ? ` ${statusClass}` : ''}`}
|
|
interactionWidth={interactionWidth}
|
|
/>
|
|
{displayLabel != null && displayLabel !== '' && (
|
|
<g transform={`translate(${edgeLabelX}, ${edgeLabelY})`} className="nodrag nopan">
|
|
<rect
|
|
x={-32}
|
|
y={-9}
|
|
width={64}
|
|
height={18}
|
|
rx={4}
|
|
ry={4}
|
|
className="fill-background stroke-border"
|
|
strokeWidth={1}
|
|
/>
|
|
<text
|
|
textAnchor="middle"
|
|
dominantBaseline="middle"
|
|
className="fill-foreground text-[10px] font-medium"
|
|
>
|
|
{displayLabel}
|
|
</text>
|
|
</g>
|
|
)}
|
|
</>
|
|
)
|
|
}
|
|
function edgePropsAreEqual(prev: EdgeProps, next: EdgeProps): boolean {
|
|
return (
|
|
prev.id === next.id &&
|
|
prev.source === next.source &&
|
|
prev.target === next.target &&
|
|
prev.sourceX === next.sourceX &&
|
|
prev.sourceY === next.sourceY &&
|
|
prev.targetX === next.targetX &&
|
|
prev.targetY === next.targetY &&
|
|
prev.sourcePosition === next.sourcePosition &&
|
|
prev.targetPosition === next.targetPosition &&
|
|
prev.style === next.style &&
|
|
prev.label === next.label &&
|
|
(prev.data as { connectionLabel?: string; targetType?: string } | undefined)?.connectionLabel ===
|
|
(next.data as { connectionLabel?: string; targetType?: string } | undefined)?.connectionLabel &&
|
|
(prev.data as { targetType?: string } | undefined)?.targetType ===
|
|
(next.data as { targetType?: string } | undefined)?.targetType
|
|
)
|
|
}
|
|
|
|
export const AnimatedEdge = memo(AnimatedEdgeInner, edgePropsAreEqual)
|
|
|