Store highlighted row status

Author: qu1ck

InteractiveHtmlBom/ibom.css

@@ -2,17 +2,14 @@
   --pcb-edge-color: black;
 }
 
-:root .dark {
-  --pcb-edge-color: #eee;
-}
-
 html, body {
   margin: 0px;
   height: 100%;
   font-family: Verdana, sans-serif;
 }
 
 .dark {
+  --pcb-edge-color: #eee;
   background-color: #252c30;
   color: #eee;
 }
@@ -150,6 +147,14 @@ canvas:active {
   background-color: #3b4749;
 }
 
+.bom tr.highlighted:nth-child(n) {
+  background-color: #cfc;
+}
+
+.dark .bom tr.highlighted:nth-child(n) {
+  background-color: #226022;
+}
+
 .bom tr:nth-child(even) {
   background-color: #f2f2f2;
 }
@@ -162,14 +167,6 @@ canvas:active {
   transition: background-color 0.2s;
 }
 
-.bom tr:hover {
-  background-color: #cfc;
-}
-
-.dark .bom tr:hover {
-  background-color: #226022;
-}
-
 .bom .numCol {
   width: 25px;
 }

InteractiveHtmlBom/ibom.js

@@ -6,6 +6,8 @@ var bomsplit;
 var canvassplit;
 var canvaslayout = "default";
 var bomlayout = "default";
+var currentHighlightedRowId;
+var highlightHandlers = [];
 var highlightedRefs = [];
 var bomCheckboxes = "";
 var storage;
@@ -105,8 +107,16 @@ function createCheckboxChangeHandler(checkbox, references) {
   }
 }
 
-function createRowMouseEnterHandler(refs) {
+function createRowHighlightHandler(rowid, refs) {
   return function() {
+    if (currentHighlightedRowId) {
+      if (currentHighlightedRowId == rowid) {
+        return;
+      }
+      document.getElementById(currentHighlightedRowId).classList.remove("highlighted");
+    }
+    document.getElementById(rowid).classList.add("highlighted");
+    currentHighlightedRowId = rowid;
     highlightedRefs = refs;
     drawHighlights();
   }
@@ -196,6 +206,7 @@ function populateBomHeader() {
 }
 
 function populateBomBody() {
+  highlightHandlers = [];
   var first = true;
   switch (canvaslayout) {
     case 'F':
@@ -255,7 +266,9 @@ function populateBomBody() {
     td.textContent = bomentry[3].length;
     tr.appendChild(td);
     bom.appendChild(tr);
-    tr.onmouseenter = createRowMouseEnterHandler(references);
+    var handler = createRowHighlightHandler(tr.id, references);
+    tr.onmouseenter = handler;
+    highlightHandlers.push({id: tr.id, handler: handler});
     if ((filter || reflookup) && first) {
       highlightedRefs = references;
       drawHighlights();