Optimization: remove redundant render calls

Author: qu1ck

InteractiveHtmlBom/web/ibom.js

@@ -4,6 +4,7 @@ var bomsplit;
 var canvassplit;
 var canvaslayout = "default";
 var bomlayout = "default";
+var initDone = false;
 var bomSortFunction = null;
 var currentSortColumn = null;
 var currentSortOrder = null;
@@ -26,15 +27,19 @@ function setDarkMode(value) {
     topmostdiv.classList.remove("dark");
   }
   writeStorage("darkmode", value);
-  redrawCanvas(allcanvas.front);
-  redrawCanvas(allcanvas.back);
+  if (initDone) {
+    redrawCanvas(allcanvas.front);
+    redrawCanvas(allcanvas.back);
+  }
 }
 
 function setHighlightPin1(value) {
   writeStorage("highlightpin1", value);
   highlightpin1 = value;
-  redrawCanvas(allcanvas.front);
-  redrawCanvas(allcanvas.back);
+  if (initDone) {
+    redrawCanvas(allcanvas.front);
+    redrawCanvas(allcanvas.back);
+  }
 }
 
 function getStoredCheckboxRefs(checkbox) {
@@ -757,6 +762,7 @@ window.onload = function(e) {
   bomhead = document.getElementById("bomhead");
   filter = "";
   reflookup = "";
+  initDone = true;
   // Triggers render
   changeBomLayout(bomlayout);
 }

InteractiveHtmlBom/web/render.js

@@ -244,20 +244,19 @@ function drawEdges(canvas, scalefactor) {
   }
 }
 
-function drawModules(canvas, layer, scalefactor, highlightedModules) {
+function drawModules(canvas, layer, scalefactor, highlight) {
   var ctx = canvas.getContext("2d");
   ctx.lineWidth = 3 / scalefactor;
   var style = getComputedStyle(topmostdiv);
   var padcolor = style.getPropertyValue('--pad-color');
   var outlinecolor = style.getPropertyValue('--pin1-outline-color');
-  if (highlightedModules.length > 0) {
+  if (highlight > 0) {
     padcolor = style.getPropertyValue('--pad-color-highlight');
     outlinecolor = style.getPropertyValue('--pin1-outline-color-highlight');
   }
   for (var i = 0; i < pcbdata.modules.length; i++) {
     var mod = pcbdata.modules[i];
-    var highlight = highlightedModules.includes(i);
-    if (highlightedModules.length == 0 || highlight) {
+    if (!highlight || highlightedModules.includes(i)) {
       drawModule(ctx, layer, scalefactor, mod, padcolor, outlinecolor, highlight);
     }
   }
@@ -287,7 +286,7 @@ function clearCanvas(canvas) {
 function drawHighlightsOnLayer(canvasdict) {
   clearCanvas(canvasdict.highlight);
   drawModules(canvasdict.highlight, canvasdict.layer,
-    canvasdict.transform.s * canvasdict.transform.zoom, highlightedModules);
+    canvasdict.transform.s * canvasdict.transform.zoom, true);
 }
 
 function drawHighlights() {
@@ -300,7 +299,7 @@ function drawBackground(canvasdict) {
   clearCanvas(canvasdict.silk);
   drawEdges(canvasdict.bg, canvasdict.transform.s);
   drawModules(canvasdict.bg, canvasdict.layer,
-    canvasdict.transform.s * canvasdict.transform.zoom, []);
+    canvasdict.transform.s * canvasdict.transform.zoom, false);
   drawSilkscreen(canvasdict.silk, canvasdict.layer, canvasdict.transform.s);
 }
 
@@ -439,7 +438,6 @@ function handleMouseClick(e, layerdict) {
   var modules = bboxScan(layerdict.layer, v[0], v[1]);
   if (modules.length > 0) {
     modulesClicked(modules);
-    drawHighlights();
   }
 }