56f98671ca
Backend: - Set POLYLINE edge routing on ELK root — eliminates curved/bent edges between horizontally aligned nodes - Collect edges from handler section roots (not just main root) so internal handler edges are included in the layout output - Use correct root reference for coordinate calculation per edge Frontend: - Render ALL edge points as line segments (polylines), not cubic bezier. ELK bend points are waypoints, not bezier control points — the cubic bezier interpretation caused false curves. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
45 lines
1.5 KiB
TypeScript
45 lines
1.5 KiB
TypeScript
import type { DiagramEdge as DiagramEdgeType } from '../../api/queries/diagrams';
|
|
|
|
interface DiagramEdgeProps {
|
|
edge: DiagramEdgeType;
|
|
offsetY?: number;
|
|
/** undefined = no overlay (default gray solid), true = traversed (green solid), false = not traversed (gray dashed) */
|
|
traversed?: boolean | undefined;
|
|
}
|
|
|
|
export function DiagramEdge({ edge, offsetY = 0, traversed }: DiagramEdgeProps) {
|
|
const pts = edge.points;
|
|
if (!pts || pts.length < 2) return null;
|
|
|
|
// Build SVG path: move to first point, then line segments through all waypoints.
|
|
// ELK bend points are waypoints, not bezier control points.
|
|
let d = `M ${pts[0][0]} ${pts[0][1] + offsetY}`;
|
|
for (let i = 1; i < pts.length; i++) {
|
|
d += ` L ${pts[i][0]} ${pts[i][1] + offsetY}`;
|
|
}
|
|
|
|
return (
|
|
<g className="diagram-edge">
|
|
<path
|
|
d={d}
|
|
fill="none"
|
|
stroke={traversed === true ? '#3D7C47' : '#9CA3AF'}
|
|
strokeWidth={traversed === true ? 1.5 : traversed === false ? 1 : 1.5}
|
|
strokeDasharray={traversed === false ? '4,3' : undefined}
|
|
markerEnd={traversed === true ? 'url(#arrowhead-green)' : traversed === false ? undefined : 'url(#arrowhead)'}
|
|
/>
|
|
{edge.label && pts.length >= 2 && (
|
|
<text
|
|
x={(pts[0][0] + pts[pts.length - 1][0]) / 2}
|
|
y={(pts[0][1] + pts[pts.length - 1][1]) / 2 + offsetY - 6}
|
|
fill="#9C9184"
|
|
fontSize={9}
|
|
textAnchor="middle"
|
|
>
|
|
{edge.label}
|
|
</text>
|
|
)}
|
|
</g>
|
|
);
|
|
}
|