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

UI tweaks on the hover

Browse Source
This commit is contained in:
Colin Dawson 2026-03-13 01:14:39 +00:00
parent 1a3aaac5b3
commit 1dd188323e
2 changed files with 58 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
src/Sass/visualiser.scss
View File

@ -208,6 +208,19 @@
stroke-dasharray: 0;
}
.visualiser-outcome-connector-line.is-active-outgoing {
stroke-width: 2.8px;
stroke: rgba($blue, 0.82);
stroke-dasharray: 0;
filter: drop-shadow(0 0 3px rgba($blue, 0.6));
}
.visualiser-outcome-connector-line.is-active-incoming {
stroke-width: 2.2px;
stroke: rgba($blue, 0.58);
stroke-dasharray: 2, 2;
}
.visualiser-outcome-connector-line.is-dim {
opacity: 0.2;
}
@ -216,6 +229,14 @@
fill: darken($blue, 8%);
}
.visualiser-outcome-connector-label.is-active-outgoing {
fill: darken($blue, 12%);
}
.visualiser-outcome-connector-label.is-active-incoming {
fill: darken($blue, 2%);
}
.visualiser-outcome-connector-label.is-dim {
opacity: 0.25;
}

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

@ -650,28 +650,29 @@ const VisualiserTab: React.FC<VisualiserTabProps> = ({
labelY = startY - 1.5 - Math.abs(laneSpread) * 0.12;
labelAnchor = "end";
} else {
// Adjacent forward flow: keep curved center connectors.
// Adjacent forward flow: use orthogonal segments only.
const startX = source.x;
const startY = source.y + source.height / 2;
const endX = target.x;
const endY = target.y - target.height / 2;
const controlOffset = Math.max(4, Math.abs(endY - startY) * 0.25);
const startControlX = startX + sourceShift + laneSpread;
const endControlX = endX + targetShift + laneSpread;
const xDelta = Math.abs(endX - startX);
const shouldSnapVertical = xDelta < 1.25;
path = `M ${startX} ${startY} C ${startControlX} ${startY + controlOffset}, ${endControlX} ${endY - controlOffset}, ${endX} ${endY}`;
if (shouldSnapVertical) {
const snappedX = (startX + endX) / 2;
path = `M ${snappedX} ${startY} L ${snappedX} ${endY}`;
labelX = snappedX;
labelY = (startY + endY) / 2;
} else {
const offsetX = (sourceShift + targetShift + laneSpread) * 0.35;
const midY = (startY + endY) / 2;
const fromX = startX + offsetX;
const toX = endX + offsetX;
const t = 0.5;
labelX =
Math.pow(1 - t, 3) * startX +
3 * Math.pow(1 - t, 2) * t * startControlX +
3 * (1 - t) * Math.pow(t, 2) * endControlX +
Math.pow(t, 3) * endX;
labelY =
Math.pow(1 - t, 3) * startY +
3 * Math.pow(1 - t, 2) * t * (startY + controlOffset) +
3 * (1 - t) * Math.pow(t, 2) * (endY - controlOffset) +
Math.pow(t, 3) * endY;
path = `M ${startX} ${startY} L ${fromX} ${startY} L ${fromX} ${midY} L ${toX} ${midY} L ${toX} ${endY} L ${endX} ${endY}`;
labelX = (fromX + toX) / 2;
labelY = midY;
}
labelAnchor = "middle";
}
@ -699,12 +700,20 @@ const VisualiserTab: React.FC<VisualiserTabProps> = ({
(edge.sourceGuid === hoveredGuid ||
edge.targetGuid === hoveredGuid);
const edgeIsDim = hoveredGuid !== null && !edgeIsActive;
const edgeIntensityClass =
hoveredGuid === edge.sourceGuid
? " is-active-outgoing"
: hoveredGuid === edge.targetGuid
? " is-active-incoming"
: edgeIsActive
? " is-active"
: "";
const adjustedLabelY = getAdjustedLabelY(labelX, labelY - 1.25);
return (
<g key={`${edge.sourceGuid}-${edge.targetGuid}`}>
<path
className={`visualiser-outcome-connector-line${edgeIsActive ? " is-active" : ""}${edgeIsDim ? " is-dim" : ""}`}
className={`visualiser-outcome-connector-line${edgeIntensityClass}${edgeIsDim ? " is-dim" : ""}`}
d={path}
markerEnd={
isMergedLeft ? undefined : "url(#visualiser-arrow)"
@ -714,7 +723,7 @@ const VisualiserTab: React.FC<VisualiserTabProps> = ({
<text
x={labelX}
y={adjustedLabelY}
className={`visualiser-outcome-connector-label${edgeIsActive ? " is-active" : ""}${edgeIsDim ? " is-dim" : ""}`}
className={`visualiser-outcome-connector-label${edgeIntensityClass}${edgeIsDim ? " is-dim" : ""}`}
textAnchor={labelAnchor}
dominantBaseline="middle"
>
@ -739,14 +748,22 @@ const VisualiserTab: React.FC<VisualiserTabProps> = ({
edges.some(
(edge) =>
edge.targetGuid === targetGuid &&
edge.sourceGuid === hoveredGuid,
edge.sourceGuid === hoveredGuid &&
(levelByGuid.get(edge.sourceGuid) ?? 0) >
(levelByGuid.get(edge.targetGuid) ?? 0),
));
const mergedIsDim = hoveredGuid !== null && !mergedIsActive;
const mergedIntensityClass =
hoveredGuid === targetGuid
? " is-active-incoming"
: mergedIsActive
? " is-active-outgoing"
: "";
return (
<path
key={`merged-left-${targetGuid}`}
className={`visualiser-outcome-connector-line${mergedIsActive ? " is-active" : ""}${mergedIsDim ? " is-dim" : ""}`}
className={`visualiser-outcome-connector-line${mergedIntensityClass}${mergedIsDim ? " is-dim" : ""}`}
d={`M ${laneX} ${endY} L ${endX} ${endY}`}
markerEnd="url(#visualiser-arrow)"
/>