e-suite/webui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

The curved lines are looking clearer now

Browse Source
This commit is contained in:
Colin Dawson 2026-02-26 12:02:05 +00:00
parent 6e9088a7da
commit e2f5d2dc89
1 changed files with 43 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

53
src/modules/manager/workflowTemplates/components/VisualisetTab.tsx
View File

@ -23,7 +23,7 @@ const VisualiserTab: React.FC<VisualiserTabProps> = ({
const taskColumnMap = useRef<Map<string, number>>(new Map());
const visualiserContainerRef = useRef<HTMLDivElement>(null);
const [taskDOMPositions, setTaskDOMPositions] = useState<
Map<string, { x: number; y: number }>
Map<string, { x: number; y: number; width: number; height: number }>
>(new Map());
// Calculate column range directly from taskColumnMap in render
@ -223,7 +223,10 @@ const VisualiserTab: React.FC<VisualiserTabProps> = ({
const containerRect =
visualiserContainerRef.current.getBoundingClientRect();
const positions = new Map<string, { x: number; y: number }>();
const positions = new Map<
string,
{ x: number; y: number; width: number; height: number }
>();
const nodes =
visualiserContainerRef.current.querySelectorAll(".visualiser-node");
@ -246,8 +249,15 @@ const VisualiserTab: React.FC<VisualiserTabProps> = ({
((nodeRect.top - containerRect.top + nodeRect.height / 2) /
containerRect.height) *
100;
const widthPercent = (nodeRect.width / containerRect.width) * 100;
const heightPercent = (nodeRect.height / containerRect.height) * 100;
positions.set(task.config.guid as string, { x: relX, y: relY });
positions.set(task.config.guid as string, {
x: relX,
y: relY,
width: widthPercent,
height: heightPercent,
});
});
setTaskDOMPositions(positions);
@ -557,6 +567,10 @@ const VisualiserTab: React.FC<VisualiserTabProps> = ({
targetX: number;
sourceY: number;
targetY: number;
sourceWidth: number;
sourceHeight: number;
targetWidth: number;
targetHeight: number;
curveOffset: number;
}> => {
const connections: Array<{
@ -567,6 +581,10 @@ const VisualiserTab: React.FC<VisualiserTabProps> = ({
targetX: number;
sourceY: number;
targetY: number;
sourceWidth: number;
sourceHeight: number;
targetWidth: number;
targetHeight: number;
curveOffset: number;
}> = [];
@ -591,6 +609,10 @@ const VisualiserTab: React.FC<VisualiserTabProps> = ({
sourceY: sourcePos.y,
targetX: targetPos.x,
targetY: targetPos.y,
sourceWidth: sourcePos.width,
sourceHeight: sourcePos.height,
targetWidth: targetPos.width,
targetHeight: targetPos.height,
curveOffset: 0, // Will be calculated below
});
}
@ -825,6 +847,17 @@ const VisualiserTab: React.FC<VisualiserTabProps> = ({
const isBackwardFlow = conn.sourceY > conn.targetY;
const curveDirection = isBackwardFlow ? -1 : 1;
// Calculate edge points based on curve direction
const sourceEdgeX =
curveDirection > 0
? conn.sourceX + conn.sourceWidth / 2 // right edge for rightward curves
: conn.sourceX - conn.sourceWidth / 2; // left edge for leftward curves
const targetEdgeX =
curveDirection > 0
? conn.targetX + conn.targetWidth / 2 // right edge for rightward curves
: conn.targetX - conn.targetWidth / 2; // left edge for leftward curves
const baseControlOffsetX = 20 + Math.abs(conn.curveOffset) * 0.3;
const controlOffsetY =
(Math.abs(conn.targetY - conn.sourceY) / 2) * 0.3;
@ -834,16 +867,16 @@ const VisualiserTab: React.FC<VisualiserTabProps> = ({
// Calculate text position at the curve's midpoint (t=0.5 on Bezier curve)
const t = 0.5;
const p0 = { x: conn.sourceX, y: conn.sourceY };
const p0 = { x: sourceEdgeX, y: conn.sourceY };
const p1 = {
x: conn.sourceX + baseControlOffsetX * curveDirection + offsetX,
x: sourceEdgeX + baseControlOffsetX * curveDirection + offsetX,
y: conn.sourceY + controlOffsetY,
};
const p2 = {
x: conn.targetX + baseControlOffsetX * curveDirection + offsetX,
x: targetEdgeX + baseControlOffsetX * curveDirection + offsetX,
y: conn.targetY - controlOffsetY,
};
const p3 = { x: conn.targetX, y: conn.targetY };
const p3 = { x: targetEdgeX, y: conn.targetY };
// Cubic Bezier curve formula at t
const textX =
@ -893,10 +926,10 @@ const VisualiserTab: React.FC<VisualiserTabProps> = ({
>
<path
className="visualiser-outcome-connector-line"
d={`M ${conn.sourceX} ${conn.sourceY}
d={`M ${sourceEdgeX} ${conn.sourceY}
C ${p1.x} ${p1.y},
${p2.x} ${p2.y},
${conn.targetX} ${conn.targetY}`}
${targetEdgeX} ${conn.targetY}`}
/>
{/* Directional arrow along curve */}
<polygon
@ -907,7 +940,7 @@ const VisualiserTab: React.FC<VisualiserTabProps> = ({
{/* End arrow */}
<polygon
className="visualiser-outcome-connector-arrow"
points={`${conn.targetX - 1},${conn.targetY - 3} ${conn.targetX + 1},${conn.targetY - 3} ${conn.targetX},${conn.targetY}`}
points={`${targetEdgeX - 1},${conn.targetY - 3} ${targetEdgeX + 1},${conn.targetY - 3} ${targetEdgeX},${conn.targetY}`}
/>
<text
x={textX}