sjg/trx-rs
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[fix](trx-frontend): show bw label only during resize

Browse Source 
Lift the bandwidth label slightly and render it only while the bandwidth edges are being dragged.

Co-authored-by: OpenAI Codex <codex@openai.com>
Signed-off-by: Stan Grams <sjg@haxx.space>
This commit is contained in:
Stan Grams
2026-03-01 10:20:48 +01:00
parent a2872dece5
commit ec1ea49092
1 changed files with 32 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/trx-client/trx-frontend/trx-frontend-http/assets/web/app.js
+32 -28
View File
@@ -3777,34 +3777,38 @@ function drawSpectrum(data) {
ctx.beginPath(); ctx.moveTo(xL, 0); ctx.lineTo(xL, H); ctx.stroke(); ctx.beginPath(); ctx.moveTo(xL, 0); ctx.lineTo(xL, H); ctx.stroke();
ctx.beginPath(); ctx.moveTo(xR, 0); ctx.lineTo(xR, H); ctx.stroke(); ctx.beginPath(); ctx.moveTo(xR, 0); ctx.lineTo(xR, H); ctx.stroke();
// Bottom bookmark tab centered on the dial frequency if (_bwDragEdge) {
const xMid = hzToX(lastFreqHz); // Bottom bookmark tab centered on the dial frequency, shown only while resizing BW
const bwText = formatBwLabel(currentBandwidthHz); const xMid = hzToX(lastFreqHz);
ctx.save(); const bwText = formatBwLabel(currentBandwidthHz);
ctx.font = `bold ${Math.round(10 * dpr)}px sans-serif`; ctx.save();
const tw = ctx.measureText(bwText).width; ctx.font = `bold ${Math.round(10 * dpr)}px sans-serif`;
const PAD = 6 * dpr; const tw = ctx.measureText(bwText).width;
const TAB_H = 16 * dpr; const PAD = 6 * dpr;
const tabX = Math.max(0, Math.min(W - tw - PAD * 2, xMid - (tw + PAD * 2) / 2)); const TAB_H = 16 * dpr;
const tabY = H - TAB_H; const TAB_OFFSET = 4 * dpr;
const r = 3 * dpr; const tabX = Math.max(0, Math.min(W - tw - PAD * 2, xMid - (tw + PAD * 2) / 2));
// Rounded-bottom tab shape (flat top) const tabBottom = H - TAB_OFFSET;
ctx.fillStyle = "rgba(240,173,78,0.85)"; const tabY = tabBottom - TAB_H;
ctx.beginPath(); const r = 3 * dpr;
ctx.moveTo(tabX, tabY); // Rounded-bottom tab shape (flat top)
ctx.lineTo(tabX + tw + PAD * 2, tabY); ctx.fillStyle = "rgba(240,173,78,0.85)";
ctx.lineTo(tabX + tw + PAD * 2, H - r); ctx.beginPath();
ctx.arcTo(tabX + tw + PAD * 2, H, tabX + tw + PAD * 2 - r, H, r); ctx.moveTo(tabX, tabY);
ctx.lineTo(tabX + r, H); ctx.lineTo(tabX + tw + PAD * 2, tabY);
ctx.arcTo(tabX, H, tabX, H - r, r); ctx.lineTo(tabX + tw + PAD * 2, tabBottom - r);
ctx.lineTo(tabX, tabY); ctx.arcTo(tabX + tw + PAD * 2, tabBottom, tabX + tw + PAD * 2 - r, tabBottom, r);
ctx.closePath(); ctx.lineTo(tabX + r, tabBottom);
ctx.fill(); ctx.arcTo(tabX, tabBottom, tabX, tabBottom - r, r);
// Tab text ctx.lineTo(tabX, tabY);
ctx.fillStyle = spectrumBgColor(); ctx.closePath();
ctx.textAlign = "left"; ctx.fill();
ctx.fillText(bwText, tabX + PAD, H - 4 * dpr); // Tab text
ctx.restore(); ctx.fillStyle = spectrumBgColor();
ctx.textAlign = "left";
ctx.fillText(bwText, tabX + PAD, tabBottom - 4 * dpr);
ctx.restore();
}
} }
} }