[fix](trx-frontend-http): move band plan strip above waterfall instead of between waveform and waterfall

Relocate the band plan strip from the top of the spectrum canvas to the
bottom, directly above the waterfall canvas. Move the DOM element inside
.spectrum-wrap before the waterfall canvas so it flows naturally in the
correct position. Remove the reparenting logic since the element is now
always inside .spectrum-wrap.

https://claude.ai/code/session_01FUD2eKgeXMFGhhYTzmA4Z6
Signed-off-by: Claude <noreply@anthropic.com>
This commit is contained in:
Claude
2026-03-30 07:49:43 +00:00
committed by Stan Grams
parent 9188b8ae4f
commit b8f6208aa7
3 changed files with 6 additions and 27 deletions
@@ -10189,12 +10189,12 @@ function drawSpectrum(data) {
spectrumGl.drawPoints(spectrumTmpMarkerPoints, Math.max(2, dpr * 1.6), cssColorToRgba(pal.waveformPeak));
}
// ── Bandplan WebGL strip (top of spectrum, above waterfall) ──
// ── Bandplan WebGL strip (bottom of spectrum, above waterfall) ──
if (bandplanRegion !== "off" && bandplanData) {
const bpSegs = bandplanVisibleSegments(bandplanRegion, range.visLoHz, range.visHiHz);
if (bpSegs.length > 0) {
const bpH = Math.round(BANDPLAN_STRIP_CSS_HEIGHT * dpr);
const bpY = 0;
const bpY = H - bpH;
// Dark backdrop so segments are readable over the spectrum fill.
spectrumGl.fillRect(0, bpY, W, bpH, [0.07, 0.09, 0.15, 0.82]);
// Thin separator line at bottom of bandplan strip.
@@ -11591,10 +11591,6 @@ let bandplanCacheKey = "";
const bandplanStripEl = document.getElementById("spectrum-bandplan-strip");
const bandplanRegionSelect = document.getElementById("bandplan-region-select");
const bandplanLabelsCheck = document.getElementById("bandplan-labels-check");
// Original parent of bandplan strip (for reparenting between flow and overlay).
const _bandplanOrigParent = bandplanStripEl ? bandplanStripEl.parentNode : null;
const _bandplanOrigNext = bandplanStripEl ? bandplanStripEl.nextSibling : null;
let _bandplanInWebglParent = false;
(function loadBandplanJson() {
fetch("/bandplan.json")
@@ -11678,10 +11674,6 @@ function _hideBandplanStrip() {
bandplanStripEl.classList.remove("bp-visible", "bp-webgl");
bandplanStripEl.innerHTML = "";
bandplanCacheKey = "";
if (_bandplanInWebglParent && _bandplanOrigParent) {
_bandplanOrigParent.insertBefore(bandplanStripEl, _bandplanOrigNext);
_bandplanInWebglParent = false;
}
}
function updateBandplanStrip(range) {
@@ -11707,22 +11699,8 @@ function updateBandplanStrip(range) {
bandplanStripEl.classList.add("bp-visible");
if (webglMode) {
bandplanStripEl.classList.add("bp-webgl");
// Reparent into .spectrum-wrap so absolute positioning is relative to the
// spectrum canvas rather than the outer flow container.
const specWrap = spectrumPanelEl.querySelector(".spectrum-wrap");
if (specWrap && !_bandplanInWebglParent) {
specWrap.appendChild(bandplanStripEl);
_bandplanInWebglParent = true;
bandplanCacheKey = ""; // force DOM rebuild after reparent
}
} else {
bandplanStripEl.classList.remove("bp-webgl");
// Move back to original document position for non-SDR flow layout.
if (_bandplanInWebglParent && _bandplanOrigParent) {
_bandplanOrigParent.insertBefore(bandplanStripEl, _bandplanOrigNext);
_bandplanInWebglParent = false;
bandplanCacheKey = "";
}
}
const newKey = bandplanRegion + ":" + (bandplanShowLabels ? "L" : "N") + ":" +