Darken when checked highlights footprints on render

Based on work by @unsynchronized, see
#203

Fixes #176
Fixes #203

Author: qu1ck

InteractiveHtmlBom/web/ibom.css

@@ -3,8 +3,12 @@
   --pad-color: #878787;
   --pad-hole-color: #CCCCCC;
   --pad-color-highlight: #D04040;
+  --pad-color-highlight-both: #D0D040;
+  --pad-color-highlight-darkened: #40D040;
   --pin1-outline-color: #ffb629;
   --pin1-outline-color-highlight: #b4ff03;
+  --pin1-outline-color-highlight-both: #b4ff03;
+  --pin1-outline-color-highlight-darkened: #b4ff03;
   --silkscreen-edge-color: #aa4;
   --silkscreen-polygon-color: #4aa;
   --silkscreen-text-color: #4aa;

InteractiveHtmlBom/web/ibom.js

@@ -10,6 +10,7 @@ var currentHighlightedRowId;
 var highlightHandlers = [];
 var footprintIndexToHandler = {};
 var netsToHandler = {};
+var darkenedFootprints = new Set();
 var highlightedFootprints = [];
 var highlightedNet = null;
 var lastClicked;
@@ -195,6 +196,10 @@ function createCheckboxChangeHandler(checkbox, references, row) {
       }
       if (darkenWhenChecked) {
         row.classList.add("checked");
+        for(var ref of references) {
+          darkenedFootprints.add(ref[1]);
+        }
+        drawHighlights();
       }
       eventArgs.state = 'checked';
     } else {
@@ -204,6 +209,10 @@ function createCheckboxChangeHandler(checkbox, references, row) {
       }
       if (darkenWhenChecked) {
         row.classList.remove("checked");
+        for(var ref of references) {
+          darkenedFootprints.delete(ref[1]);
+        }
+        drawHighlights();
       }
       eventArgs.state = 'unchecked';
     }
@@ -995,16 +1004,21 @@ function checkBomCheckbox(bomrowid, checkboxname) {
 
 function setBomCheckboxes(value) {
   writeStorage("bomCheckboxes", value);
-  settings.checkboxes = value.split(",").filter((e) => e);
+  settings.checkboxes = value.split(",").map((e) => e.trim()).filter((e) => e);
   prepCheckboxes();
-  populateBomTable();
   populateDarkenWhenCheckedOptions();
+  setDarkenWhenChecked(settings.darkenWhenChecked);
 }
 
 function setDarkenWhenChecked(value) {
   writeStorage("darkenWhenChecked", value);
   settings.darkenWhenChecked = value;
+  darkenedFootprints.clear();
+  for(var ref of (value ? getStoredCheckboxRefs(value) : [])) {
+    darkenedFootprints.add(ref);
+  }
   populateBomTable();
+  drawHighlights();
 }
 
 function prepCheckboxes() {
@@ -1177,7 +1191,7 @@ window.onload = function(e) {
     hideNetlistButton();
   }
   initDone = true;
-  prepCheckboxes();
+  setBomCheckboxes(document.getElementById("bomCheckboxes").value);
   // Triggers render
   changeBomLayout(settings.bomlayout);
 

InteractiveHtmlBom/web/render.js

@@ -297,7 +297,7 @@ function drawPadHole(ctx, pad, padHoleColor) {
   ctx.restore();
 }
 
-function drawFootprint(ctx, layer, scalefactor, footprint, padColor, padHoleColor, outlineColor, highlight, outline) {
+function drawFootprint(ctx, layer, scalefactor, footprint, colors, highlight, outline) {
   if (highlight) {
     // draw bounding box
     if (footprint.layer == layer) {
@@ -306,32 +306,32 @@ function drawFootprint(ctx, layer, scalefactor, footprint, padColor, padHoleColo
       ctx.translate(...footprint.bbox.pos);
       ctx.rotate(deg2rad(-footprint.bbox.angle));
       ctx.translate(...footprint.bbox.relpos);
-      ctx.fillStyle = padColor;
+      ctx.fillStyle = colors.pad;
       ctx.fillRect(0, 0, ...footprint.bbox.size);
       ctx.globalAlpha = 1;
-      ctx.strokeStyle = padColor;
+      ctx.strokeStyle = colors.pad;
       ctx.strokeRect(0, 0, ...footprint.bbox.size);
       ctx.restore();
     }
   }
   // draw drawings
   for (var drawing of footprint.drawings) {
     if (drawing.layer == layer) {
-      drawDrawing(ctx, scalefactor, drawing.drawing, padColor);
+      drawDrawing(ctx, scalefactor, drawing.drawing, colors.pad);
     }
   }
   // draw pads
   if (settings.renderPads) {
     for (var pad of footprint.pads) {
       if (pad.layers.includes(layer)) {
-        drawPad(ctx, pad, padColor, outline);
+        drawPad(ctx, pad, colors.pad, outline);
         if (pad.pin1 && settings.highlightpin1) {
-          drawPad(ctx, pad, outlineColor, true);
+          drawPad(ctx, pad, colors.outline, true);
         }
       }
     }
     for (var pad of footprint.pads) {
-      drawPadHole(ctx, pad, padHoleColor);
+      drawPadHole(ctx, pad, colors.padHole);
     }
   }
 }
@@ -348,18 +348,32 @@ function drawFootprints(canvas, layer, scalefactor, highlight) {
   var ctx = canvas.getContext("2d");
   ctx.lineWidth = 3 / scalefactor;
   var style = getComputedStyle(topmostdiv);
-  var padColor = style.getPropertyValue('--pad-color');
-  var padHoleColor = style.getPropertyValue('--pad-hole-color');
-  var outlineColor = style.getPropertyValue('--pin1-outline-color');
-  if (highlight) {
-    padColor = style.getPropertyValue('--pad-color-highlight');
-    outlineColor = style.getPropertyValue('--pin1-outline-color-highlight');
+
+  var colors = {
+    pad: style.getPropertyValue('--pad-color'),
+    padHole: style.getPropertyValue('--pad-hole-color'),
+    outline: style.getPropertyValue('--pin1-outline-color'),
   }
+
   for (var i = 0; i < pcbdata.footprints.length; i++) {
     var mod = pcbdata.footprints[i];
     var outline = settings.renderDnpOutline && pcbdata.bom.skipped.includes(i);
-    if (!highlight || highlightedFootprints.includes(i)) {
-      drawFootprint(ctx, layer, scalefactor, mod, padColor, padHoleColor, outlineColor, highlight, outline);
+    var h = highlightedFootprints.includes(i);
+    var d = darkenedFootprints.has(i);
+    if (highlight) {
+      if(h && d) {
+        colors.pad = style.getPropertyValue('--pad-color-highlight-both');
+        colors.outline = style.getPropertyValue('--pin1-outline-highlight-both');
+      } else if (h) {
+        colors.pad = style.getPropertyValue('--pad-color-highlight');
+        colors.outline = style.getPropertyValue('--pin1-outline-color-highlight');
+      } else if (d) {
+        colors.pad = style.getPropertyValue('--pad-color-highlight-darkened');
+        colors.outline = style.getPropertyValue('--pin1-outline-color-highlight-darkened');
+      }
+    }
+    if( h || d || !highlight) {
+      drawFootprint(ctx, layer, scalefactor, mod, colors, highlight, outline);
     }
   }
 }
@@ -469,7 +483,7 @@ function drawHighlightsOnLayer(canvasdict, clear = true) {
   if (clear) {
     clearCanvas(canvasdict.highlight);
   }
-  if (highlightedFootprints.length > 0) {
+  if (darkenedFootprints.size > 0 || highlightedFootprints.length > 0) {
     drawFootprints(canvasdict.highlight, canvasdict.layer,
       canvasdict.transform.s * canvasdict.transform.zoom, true);
   }