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(xR, 0); ctx.lineTo(xR, H); ctx.stroke();
// Bottom bookmark tab centered on the dial frequency
const xMid = hzToX(lastFreqHz);
const bwText = formatBwLabel(currentBandwidthHz);
ctx.save();
ctx.font = `bold ${Math.round(10 * dpr)}px sans-serif`;
const tw = ctx.measureText(bwText).width;
const PAD = 6 * dpr;
const TAB_H = 16 * dpr;
const tabX = Math.max(0, Math.min(W - tw - PAD * 2, xMid - (tw + PAD * 2) / 2));
const tabY = H - TAB_H;
const r = 3 * dpr;
// Rounded-bottom tab shape (flat top)
ctx.fillStyle = "rgba(240,173,78,0.85)";
ctx.beginPath();
ctx.moveTo(tabX, tabY);
ctx.lineTo(tabX + tw + PAD * 2, tabY);
ctx.lineTo(tabX + tw + PAD * 2, H - r);
ctx.arcTo(tabX + tw + PAD * 2, H, tabX + tw + PAD * 2 - r, H, r);
ctx.lineTo(tabX + r, H);
ctx.arcTo(tabX, H, tabX, H - r, r);
ctx.lineTo(tabX, tabY);
ctx.closePath();
ctx.fill();
// Tab text
ctx.fillStyle = spectrumBgColor();
ctx.textAlign = "left";
ctx.fillText(bwText, tabX + PAD, H - 4 * dpr);
ctx.restore();
if (_bwDragEdge) {
// Bottom bookmark tab centered on the dial frequency, shown only while resizing BW
const xMid = hzToX(lastFreqHz);
const bwText = formatBwLabel(currentBandwidthHz);
ctx.save();
ctx.font = `bold ${Math.round(10 * dpr)}px sans-serif`;
const tw = ctx.measureText(bwText).width;
const PAD = 6 * dpr;
const TAB_H = 16 * dpr;
const TAB_OFFSET = 4 * dpr;
const tabX = Math.max(0, Math.min(W - tw - PAD * 2, xMid - (tw + PAD * 2) / 2));
const tabBottom = H - TAB_OFFSET;
const tabY = tabBottom - TAB_H;
const r = 3 * dpr;
// Rounded-bottom tab shape (flat top)
ctx.fillStyle = "rgba(240,173,78,0.85)";
ctx.beginPath();
ctx.moveTo(tabX, tabY);
ctx.lineTo(tabX + tw + PAD * 2, tabY);
ctx.lineTo(tabX + tw + PAD * 2, tabBottom - r);
ctx.arcTo(tabX + tw + PAD * 2, tabBottom, tabX + tw + PAD * 2 - r, tabBottom, r);
ctx.lineTo(tabX + r, tabBottom);
ctx.arcTo(tabX, tabBottom, tabX, tabBottom - r, r);
ctx.lineTo(tabX, tabY);
ctx.closePath();
ctx.fill();
// Tab text
ctx.fillStyle = spectrumBgColor();
ctx.textAlign = "left";
ctx.fillText(bwText, tabX + PAD, tabBottom - 4 * dpr);
ctx.restore();
}
}
}