fix: Bandmap scroll bar to top
This commit is contained in:
@@ -284,6 +284,10 @@ export function BandMap({ band, spots, spotStatus, currentFreqHz, onSpotClick, o
|
|||||||
out.push({ spot: filtered[i], freqY: desired[i], labelY: centers[i] + shift - PILL_H / 2 });
|
out.push({ spot: filtered[i], freqY: desired[i], labelY: centers[i] + shift - PILL_H / 2 });
|
||||||
}
|
}
|
||||||
const lastLabelBottom = out.length ? out[out.length - 1].labelY + PILL_H : 0;
|
const lastLabelBottom = out.length ? out[out.length - 1].labelY + PILL_H : 0;
|
||||||
|
// In fit mode the band scale exactly fills the viewport (innerH = containerH
|
||||||
|
// − pads); when crowded sub-bands stack labels past the bottom the content
|
||||||
|
// grows and a scroll bar appears — the map defaults to the top so the whole
|
||||||
|
// band is visible, and you scroll down to reach the stacked spots.
|
||||||
return {
|
return {
|
||||||
placed: out,
|
placed: out,
|
||||||
totalH: Math.max(innerH + TOP_PAD + BOT_PAD, lastLabelBottom + BOT_PAD),
|
totalH: Math.max(innerH + TOP_PAD + BOT_PAD, lastLabelBottom + BOT_PAD),
|
||||||
@@ -300,15 +304,19 @@ export function BandMap({ band, spots, spotStatus, currentFreqHz, onSpotClick, o
|
|||||||
// frequency actually changes (or band/zoom/size), so tuning follows the rig
|
// frequency actually changes (or band/zoom/size), so tuning follows the rig
|
||||||
// while a stable frequency leaves your manual scroll alone.
|
// while a stable frequency leaves your manual scroll alone.
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (!range || containerH <= 0 || currentFreqHz <= 0) return;
|
if (!range || containerH <= 0) return;
|
||||||
const kHz = currentFreqHz / 1000;
|
|
||||||
if (kHz < lo || kHz > hi) return;
|
|
||||||
const el = scrollerRef.current;
|
const el = scrollerRef.current;
|
||||||
if (!el) return;
|
if (!el) return;
|
||||||
|
// Fit-to-band: keep the view at the top so the full band is always in frame;
|
||||||
|
// any overflow spots are reached by scrolling down (don't follow the rig).
|
||||||
|
if (fitToBand) { el.scrollTop = 0; return; }
|
||||||
|
if (currentFreqHz <= 0) return;
|
||||||
|
const kHz = currentFreqHz / 1000;
|
||||||
|
if (kHz < lo || kHz > hi) return;
|
||||||
el.scrollTop = Math.max(0, freqToY(kHz) - containerH / 2);
|
el.scrollTop = Math.max(0, freqToY(kHz) - containerH / 2);
|
||||||
// freqToY is recomputed each render; intentionally excluded from deps.
|
// freqToY is recomputed each render; intentionally excluded from deps.
|
||||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||||
}, [band, containerH, currentFreqHz, range, lo, hi, pxPerKHz]);
|
}, [band, containerH, currentFreqHz, range, lo, hi, pxPerKHz, fitToBand]);
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
const el = scrollerRef.current;
|
const el = scrollerRef.current;
|
||||||
|
|||||||
Reference in New Issue
Block a user