Implement reverse lookup on click

Notes: only works when corresponding bom row is not filtered out.
When there is ambiguity on click, subsequent clicks will cycle through
possible interpretations.

Fixes #9

Author: qu1ck

InteractiveHtmlBom/ibom.css

@@ -379,5 +379,5 @@ mark.highlight {
 }
 
 #dbg {
-  display: none;
+  display: block;
 }

InteractiveHtmlBom/ibom.js

@@ -12,6 +12,7 @@ var highlightedRefs = [];
 var checkboxes = [];
 var bomCheckboxes = "";
 var storage;
+var lastClickedRef;
 
 function initStorage(key) {
   try {
@@ -44,8 +45,8 @@ function writeStorage(key, value) {
   }
 }
 
-function dbg(str) {
-  dbgdiv.textContent = str;
+function dbg(html) {
+  dbgdiv.innerHTML = html;
 }
 
 function setDarkMode(value) {
@@ -272,7 +273,8 @@ function populateBomBody() {
     tr.onmousemove = handler;
     highlightHandlers.push({
       id: tr.id,
-      handler: handler
+      handler: handler,
+      refs: references
     });
     if ((filter || reflookup) && first) {
       highlightedRefs = references;
@@ -282,6 +284,13 @@ function populateBomBody() {
   }
 }
 
+function smoothScrollToRow(rowid) {
+  document.getElementById(rowid).scrollIntoView({
+    behavior: "smooth",
+    block: "center",
+    inline: "nearest"
+  });}
+
 function highlightPreviousRow() {
   if (!currentHighlightedRowId) {
     highlightHandlers[highlightHandlers.length - 1].handler();
@@ -298,11 +307,7 @@ function highlightPreviousRow() {
       }
     }
   }
-  document.getElementById(currentHighlightedRowId).scrollIntoView({
-    behavior: "smooth",
-    block: "center",
-    inline: "nearest"
-  });
+  smoothScrollToRow(currentHighlightedRowId);
 }
 
 function highlightNextRow() {
@@ -321,11 +326,7 @@ function highlightNextRow() {
       }
     }
   }
-  document.getElementById(currentHighlightedRowId).scrollIntoView({
-    behavior: "smooth",
-    block: "center",
-    inline: "nearest"
-  });
+  smoothScrollToRow(currentHighlightedRowId);
 }
 
 function populateBomTable() {
@@ -339,6 +340,19 @@ function populateBomTable() {
   populateBomBody();
 }
 
+function modulesClicked(references) {
+  var lastClickedIndex = references.indexOf(lastClickedRef);
+  var ref = references[(lastClickedIndex + 1) % references.length];
+  for (var handler of highlightHandlers) {
+    if (handler.refs.indexOf(ref) >= 0) {
+      lastClickedRef = ref;
+      handler.handler();
+      smoothScrollToRow(currentHighlightedRowId);
+      break;
+    }
+  }
+}
+
 function updateFilter(input) {
   filter = input.toLowerCase();
   populateBomTable();

InteractiveHtmlBom/render.js

@@ -236,7 +236,8 @@ function clearCanvas(canvas) {
 
 function drawHighlightsOnLayer(canvasdict) {
   clearCanvas(canvasdict.highlight);
-  drawModules(canvasdict.highlight, canvasdict.layer, canvasdict.transform.s, highlightedRefs);
+  drawModules(canvasdict.highlight, canvasdict.layer,
+    canvasdict.transform.s, highlightedRefs);
 }
 
 function drawHighlights() {
@@ -268,7 +269,7 @@ function prepareCanvas(canvas, flip, transform) {
 }
 
 function prepareLayer(canvasdict) {
-  flip = (canvasdict.layer == "B");
+  var flip = (canvasdict.layer == "B");
   for (c of ["bg", "silk", "highlight"]) {
     prepareCanvas(canvasdict[c], flip, canvasdict.transform);
   }
@@ -290,7 +291,7 @@ function recalcLayerScale(canvasdict) {
     scalefactor = 1;
   }
   canvasdict.transform.s = scalefactor;
-  flip = (canvasdict.layer == "B");
+  var flip = (canvasdict.layer == "B");
   if (flip) {
     canvasdict.transform.x = -((bbox.maxx + bbox.minx) * scalefactor + width) * 0.5;
   } else {
@@ -311,9 +312,6 @@ function redrawCanvas(layerdict) {
   prepareLayer(layerdict);
   drawBackground(layerdict);
   drawHighlights(layerdict);
-  t = layerdict.transform;
-  dbgdiv.innerHTML = "x: " + t.x + "</br>y: " + t.y + "</br>s: " + t.s +
-    "</br>panx: " + t.panx + "</br>pany: " + t.pany + "</br>zoom: " + t.zoom;
 }
 
 function resizeCanvas(layerdict) {
@@ -326,6 +324,21 @@ function resizeAll() {
   resizeCanvas(allcanvas.back);
 }
 
+function bboxScan(layer, x, y) {
+  var result = [];
+  for (var i in pcbdata.modules) {
+    var module = pcbdata.modules[i];
+    if (module.layer == layer) {
+      var b = module.bbox;
+      if (b.pos[0] <= x && b.pos[0] + b.size[0] >= x &&
+        b.pos[1] <= y && b.pos[1] + b.size[1] >= y) {
+        result.push(module.ref);
+      }
+    }
+  }
+  return result;
+}
+
 function handleMouseDown(e, layerdict) {
   if (e.which != 1) {
     return;
@@ -334,12 +347,37 @@ function handleMouseDown(e, layerdict) {
   e.stopPropagation();
   layerdict.transform.mousestartx = e.offsetX;
   layerdict.transform.mousestarty = e.offsetY;
+  layerdict.transform.mousedownx = e.offsetX;
+  layerdict.transform.mousedowny = e.offsetY;
   layerdict.transform.mousedown = true;
 }
 
+function handleMouseClick(e, layerdict) {
+  var x = e.offsetX;
+  var y = e.offsetY;
+  var t = layerdict.transform;
+  if (layerdict.layer == "B") {
+    x = (2 * x / t.zoom - t.panx + t.x) / -t.s;
+  } else {
+    x = (2 * x / t.zoom - t.panx - t.x) / t.s;
+  }
+  y = (2 * y / t.zoom - t.y - t.pany) / t.s;
+  var reflist = bboxScan(layerdict.layer, x, y);
+  if (reflist.length > 0) {
+    modulesClicked(reflist);
+  }
+}
+
 function handleMouseUp(e, layerdict) {
   e.preventDefault();
   e.stopPropagation();
+  if (e.which == 1 &&
+    layerdict.transform.mousedown &&
+    layerdict.transform.mousedownx == e.offsetX &&
+    layerdict.transform.mousedowny == e.offsetY) {
+    // This is just a click
+    handleMouseClick(e, layerdict);
+  }
   layerdict.transform.mousedown = false;
   if (e.which == 3) {
     // Reset pan and zoom on right click.

README.md

@@ -89,8 +89,13 @@ path/to/kicad/bin/python.exe .../generate_interactive_bom.py .../board.kicad_pcb
 
 ### BOM mouse actions
 
-You can pan the pcb drawings using left mouse button, zoom using mouse wheel
-and reset view by right click.
+You can pan the pcb drawings by dragging with left mouse button, zoom using
+mouse wheel and reset view by right click.
+
+Left click on a component drawing will highlight corresponding component group,
+unless it is currently filtered out by filter or reference lookup fields.
+If there are multiple components under mouse cursor, subsequent clicks
+will cycle through possible interpretations.
 
 ### BOM keyboard shortcuts