Add continuous redraw on drag setting

Fixes #22

Author: qu1ck

InteractiveHtmlBom/ibom.css

@@ -1,7 +1,7 @@
 html, body {
   margin: 0px;
   height: 100%;
-  font-family: "Helvetica Neue", Helvetica, Verdana, sans-serif;
+  font-family: Verdana, sans-serif;
 }
 
 button {
@@ -256,13 +256,18 @@ mark.highlight {
   background-color: #eee;
 }
 
-.checkbox-label {
+.menu-label {
   display: inline-block;
   padding: 8px;
   border: 1px solid #ccc;
+  border-top: 0;
   width: calc(100% - 18px);
 }
 
+.menu-label-top {
+  border-top: 1px solid #ccc;
+}
+
 #dbg {
   display: none;
 }

InteractiveHtmlBom/ibom.html

@@ -35,11 +35,14 @@
       <div class="hideonprint menu" style="float: right; margin: 10px; top: 8px;">
         <button class="menubtn"></button>
         <div class="menu-content">
-          <label class="checkbox-label">
-            <input id="silkscreenCheckbox" type="checkbox" name="silkscreen"
-                   value="silkscreen" checked onchange="silkscreenVisible(this.checked)">
+          <label class="menu-label menu-label-top">
+            <input id="silkscreenCheckbox" type="checkbox" checked onchange="silkscreenVisible(this.checked)">
             Show silkscreen
           </label>
+          <label class="menu-label">
+            <input id="dragCheckbox" type="checkbox" checked onchange="setRedrawOnDrag(this.checked)">
+            Continuous redraw on drag
+          </label>
         </div>
       </div>
       <div class="button-container hideonprint"

InteractiveHtmlBom/ibom.js

@@ -310,6 +310,10 @@ window.onload = function(e) {
     document.getElementById("silkscreenCheckbox").checked = false;
     silkscreenVisible(false);
   }
+  if (readStorage("redrawOnDrag") === "false") {
+    document.getElementById("dragCheckbox").checked = false;
+    setRedrawOnDrag(false);
+  }
 }
 
 window.onresize = resizeAll;

InteractiveHtmlBom/render.js

@@ -1,5 +1,7 @@
 /* PCB rendering code */
 
+var redrawOnDrag = true;
+
 function deg2rad(deg) {
   return deg * Math.PI / 180;
 }
@@ -52,7 +54,7 @@ function drawtext(ctx, scalefactor, text, color, flip) {
 
 function drawedge(ctx, scalefactor, edge, color) {
   ctx.strokeStyle = color;
-  ctx.lineWidth = Math.max(2, edge.width) / scalefactor;
+  ctx.lineWidth = Math.max(1 / scalefactor, edge.width);
   ctx.lineCap = "round";
   if (edge.type == "segment") {
     ctx.beginPath();
@@ -349,8 +351,8 @@ function handleMouseUp(e, layerdict) {
     layerdict.transform.panx = 0;
     layerdict.transform.pany = 0;
     layerdict.transform.zoom = 1;
-    redrawCanvas(layerdict);
   }
+  redrawCanvas(layerdict);
 }
 
 function handleMouseMove(e, layerdict) {
@@ -365,7 +367,9 @@ function handleMouseMove(e, layerdict) {
   layerdict.transform.pany += 2 * dy / layerdict.transform.zoom;
   layerdict.transform.mousestartx = e.offsetX;
   layerdict.transform.mousestarty = e.offsetY;
-  redrawCanvas(layerdict);
+  if (redrawOnDrag) {
+    redrawCanvas(layerdict);
+  }
 }
 
 function handleMouseWheel(e, layerdict) {
@@ -408,6 +412,11 @@ function addMouseHandlers(div, layerdict) {
   }
 }
 
+function setRedrawOnDrag(value) {
+  redrawOnDrag = value;
+  writeStorage("redrawOnDrag", value);
+}
+
 function initRender() {
   allcanvas = {
     front: {