Extend canvas when required #48

webassets/css/style.css

@@ -153,10 +153,11 @@ div#map {
 /* BANDS PANEL */
 
 div#bands-container {
+    min-height: 64em;
     margin: 0;
     padding: 0;
     overflow-x: auto;
-    overflow-y: auto;
+    overflow-y: visible;
     white-space: nowrap;
     display: flex;
     overscroll-behavior-x: none;
@@ -177,6 +178,7 @@ div#bands-container {
 #bands-table td {
     width: 20%;
     min-width: 12em;
+    height: 62em;
 }
 
 div.band-container {
@@ -193,6 +195,7 @@ div.band-markers {
     top: 0;
     left: 0;
     z-index: 13;
+    border-left: 2px dotted black;
 }
 
 div.band-spots {

webassets/js/bands.js

@@ -85,10 +85,8 @@ function updateBands() {
         }
 
         // Print the spots on the band. Each one is a div with the details, shifted down if necessary to prevent
-        // overlap, and a horizontal or diagonal line on the canvas linking it to where it properly appears on the
+        // overlap
-        // band.
         bandSpotsDiv = $("<div class='band-spots'>");
-        bandLinesCanvas = $(`<canvas class='band-lines-canvas' width='${BAND_COLUMN_CANVAS_WIDTH_PX}' height='${BAND_COLUMN_HEIGHT_PX}'>`);
         // Sort by frequency so we print higher frequencies later, and can bump them further down the track to prevent
         // overlaps
         spotList.sort(function(a, b) { return a.freq - b.freq; });
@@ -98,15 +96,31 @@ function updateBands() {
             // Work out how far down the div to draw it
             var percentDownBand = (s.freq - band.start_freq) / (band.end_freq - band.start_freq) * 0.97; // not 100% due to fudge, the first and last dashes are not exactly at the top and bottom of the div as some space is needed for text
             var emDownBand = percentDownBand * BAND_COLUMN_HEIGHT_EM;
-            var pxDownBandFreq = (percentDownBand + 0.015) * BAND_COLUMN_HEIGHT_PX; // same fudge but add half to put the left end of the line in the right place
             if (emDownBand < lastSpotEmDownBand + 1.6) {
                 emDownBand = lastSpotEmDownBand + 1.6; // Prevent overlap
             }
             lastSpotEmDownBand = emDownBand;
+            // Calculate how many px down the band div the label appears, and store it with the spot, so we can use it
+            // later for drawing the lines.
             var pxDownBandLabel = (emDownBand * BAND_COLUMN_FONT_SIZE) + (0.015 * BAND_COLUMN_HEIGHT_PX);
+            s["pxDownBandLabel"] = pxDownBandLabel;
 
             // Add spot div to DOM
             bandSpotsDiv.append(`<div class="band-spot" style="top: ${emDownBand}em; border-top: 1px solid ${s.band_color}; border-left: 5px solid ${s.band_color}; border-bottom: 1px solid ${s.band_color}; border-right: 1px solid ${s.band_color};"><span class="band-spot-call">${s.dx_call}</span><span class="band-spot-info">${s.dx_call} ${(s.freq/1000000).toFixed(3)} ${s.mode}</span></div>`);
+        });
+
+        // Work out how tall the canvas should be. Normally this is matching the normal band column height, but if some
+        // spots have gone off the end of the band markers and stretched their div, we need to resize the canvas to
+        // match, otherwise we have nowhere to draw their connecting lines.
+        var canvasHeight = Math.max(BAND_COLUMN_HEIGHT_PX, (lastSpotEmDownBand+1.6) * BAND_COLUMN_FONT_SIZE);
+
+        // Draw horizontal or diagonal lines to join up the "real" frequency with where the spot div ended up
+        var bandLinesCanvas = $(`<canvas class='band-lines-canvas' width='${BAND_COLUMN_CANVAS_WIDTH_PX}px' height='${canvasHeight}px' style='height:${canvasHeight}px !important;'>`);
+        spotList.forEach(s => {
+            // Work out how far down the div to draw it
+            var percentDownBand = (s.freq - band.start_freq) / (band.end_freq - band.start_freq) * 0.97; // not 100% due to fudge, the first and last dashes are not exactly at the top and bottom of the div as some space is needed for text
+            var pxDownBandFreq = (percentDownBand + 0.015) * BAND_COLUMN_HEIGHT_PX; // same fudge but add half to put the left end of the line in the right place
+            var pxDownBandLabel = s["pxDownBandLabel"];
 
             // Draw the line on the canvas
             var ctx = bandLinesCanvas[0].getContext('2d');