v32: two small speed-ups in the HTML overlay

app/index.html

@@ -5,7 +5,7 @@
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <title>OverBoard PDF</title>
 <meta name="description" content="OverBoard: write on any PDF on your smartboard. Runs in the browser; nothing is uploaded.">
-<meta name="ob-version" content="86f90347201b">
+<meta name="ob-version" content="d09cc9d265bd">
 <meta name="theme-color" content="#1f1f1f">
 <link rel="manifest" href="manifest.json">
 <link rel="icon" href="icons/icon-192.png">
@@ -45,7 +45,7 @@ <h2 data-t="open_again">Open again</h2>
     <p class="note"><span data-th="start_note">Your PDF and your ink stay in this browser on this computer. Nothing is uploaded.
       Have a Word file? In Word, choose File → Save as PDF, then drop the PDF here.
       Have an HTML worksheet? Drop it here to get a <i>_board.html</i> copy you can write on.</span>
-      <br><a href="../" data-t="back_demo">Back to the HTML worksheet demo</a> · <a href="https://github.com/BPMData/OverBoard" data-t="about">About OverBoard</a> · <a href="report/?from=start" target="_blank" data-t="board_help">Board not working?</a> · <span id="ob-release" title="OverBoard version">v31</span></p>
+      <br><a href="../" data-t="back_demo">Back to the HTML worksheet demo</a> · <a href="https://github.com/BPMData/OverBoard" data-t="about">About OverBoard</a> · <a href="report/?from=start" target="_blank" data-t="board_help">Board not working?</a> · <span id="ob-release" title="OverBoard version">v32</span></p>
     <p class="note ob-langpick"><label><span aria-hidden="true">🌐</span> <select id="ob-lang" aria-label="Language" data-ta="language" data-tt="language" title="Language"></select></label></p>
   </div>
 </main>

app/report/index.html

@@ -96,7 +96,7 @@ <h1 data-t="r_h1">Is OverBoard not working on your board?</h1>
     <p data-th="r_intro2">If something doesn't work the way the page asks, that's fine. <b>That's exactly what I need to know.</b> Just keep going.</p>
     <p class="mute small" data-th="r_privacy">Nothing is sent until you press <b>Send</b> at the very end, and you'll see everything first. No worksheets, PDFs or ink are ever included.</p>
     <div class="row"><button class="go big" data-go="start" data-t="r_start">Start</button></div>
-    <p class="mute small" style="margin-top:28px">OverBoard <span id="ob-release" title="OverBoard version">v31</span></p>
+    <p class="mute small" style="margin-top:28px">OverBoard <span id="ob-release" title="OverBoard version">v32</span></p>
   </div></div>
 </section>
 

app/sw.js

@@ -1,7 +1,7 @@
 // ===== GENERATED by tools/build.py: every file the app needs, with the start of its SHA-256. Do not edit by hand. =====
-const VERSION = '02572123a8ee';
+const VERSION = '0d41e9e4f1bc';
 const FILES = {
-  "../overlay/ink_overlay.html": "c8af57d0d48b19cd",
+  "../overlay/ink_overlay.html": "09a4ae086c905c46",
   "../shared/ink-core.js": "f5235bb4ef99a375",
   "../shared/strings.js": "d0525093455e4d45",
   "../shared/toolbar.css": "d3155c02c903c96e",
@@ -14,14 +14,14 @@ const FILES = {
   "icons/icon-192.png": "d245e15b36475003",
   "icons/icon-512.png": "17c1021fe2a0ade1",
   "icons/maskable-512.png": "0c58f1bdccc9eda9",
-  "index.html": "4b5c66216bb59125",
+  "index.html": "9e5127b09c51f5f2",
   "ink.js": "069771a403be1378",
   "libs.js": "c09f60186ab9029a",
   "main.js": "ac823fa04ab55eb2",
   "manifest.json": "f7ee4a6c6f83cd40",
   "notebook.js": "47bcfd4f80712344",
   "offline.js": "6504935b2738711a",
-  "report/index.html": "beee65975d0d2445",
+  "report/index.html": "ff1e97cbd50d69c5",
   "store.js": "66af54cd32e6cbd2",
   "textlayer.js": "1911308ed3e2a8b5",
   "vendor/[email protected]/LICENSE.md": "f2c9fc00fdb66eb9",
@@ -214,7 +214,7 @@ const FILES = {
   "vendor/[email protected]/standard_fonts/LiberationSans-BoldItalic.ttf": "a224075ac17495ad",
   "vendor/[email protected]/standard_fonts/LiberationSans-Italic.ttf": "832b4406dbef2362",
   "vendor/[email protected]/standard_fonts/LiberationSans-Regular.ttf": "f8ace1f892b2bd9d",
-  "version.json": "f59b4daff279aa28",
+  "version.json": "782a6ec72a3a6b14",
   "viewer.js": "648b4479c5b68b93"
 };
 // ===== END GENERATED =====

app/version.json

@@ -1,5 +1,5 @@
 {
-  "v": "86f90347201b",
+  "v": "d09cc9d265bd",
   "js": [
     "embed.js",
     "export.js",

index.html

@@ -54,7 +54,7 @@ <h2>Exit ticket</h2>
   <div class="lines"><div></div><div></div><div></div><div></div></div>
   <div class="foot">OverBoard · page 2 / 2 · Your ink saves in this browser only. Nothing is uploaded.</div>
 </div>
-<!-- ===== INK OVERLAY START (v31) =====
+<!-- ===== INK OVERLAY START (v32) =====
   Smartboard writing layer. Paste this whole block just before </body> in any .html file.
   SMART BOARD: pen tip writes. Palm, fist or side of hand erases (the board reports it as an eraser).
   Finger (and the round end of the SMART pen) scrolls the page; the "Finger" button switches it to drawing if you lose the pen.
@@ -1685,7 +1685,10 @@ <h2>Exit ticket</h2>
 
   /* ---------- drawing ---------- */
   // pen ink and covers go on the top canvas, highlights on the layer under it, the eraser cuts through both
-  function layers(s){ return s.e ? [ctx, hctx] : seeThrough(s) ? [hctx] : [ctx]; }
+  function layers(s){ if (seeThrough(s)) showHl(true); return s.e ? [ctx, hctx] : seeThrough(s) ? [hctx] : [ctx]; }
+  // the highlighter layer is hidden while it has nothing on it, so the browser can skip blending it over the page
+  var hlShown = true;
+  function showHl(on){ if (on !== hlShown) { hlShown = on; hcan.style.visibility = on ? '' : 'hidden'; } }
   function drawStroke(s){ layers(s).forEach(function(g){ paintStroke(g, s, scale, OX * scale, -BY * scale); }); }
   // live drawing draws the same curve piece by piece as points arrive (matches paintStroke exactly)
   var live = null;
@@ -1697,7 +1700,7 @@ <h2>Exit ticket</h2>
     return hi + s.w >= BY && lo - s.w <= BY + BH;
   }
   function redraw(){
-    clearCanvas(canvas, ctx); clearCanvas(hcan, hctx);
+    clearCanvas(canvas, ctx); clearCanvas(hcan, hctx); showHl(false);   // drawing a highlight below shows it again
     for (var i = 0; i < strokes.length; i++) if (inBand(strokes[i])) drawStroke(strokes[i]);
     if (cur) drawStroke(cur);   // a stroke still being drawn when the band moves
   }
@@ -1713,7 +1716,7 @@ <h2>Exit ticket</h2>
   // falls back to the processor and every pen move gets slow: a 20-page worksheet on a 2x (Retina) screen ran at a few
   // frames a second.
   var FW = 0, OX = 0, BY = 0, BH = 0;   // full canvas width (CSS px) and where the page column starts inside it
-  function docTop(){ return canvas.getBoundingClientRect().top - BY * Z; }   // screen y of the worksheet's top edge
+  function docTop(r){ return (r || canvas.getBoundingClientRect()).top - BY * Z; }   // screen y of the worksheet's top edge
   function size(){
     var h = Math.ceil(body.offsetHeight), cw = calcCW();
     var fw = Math.max(cw, Math.floor(document.documentElement.clientWidth / Z));
@@ -1738,9 +1741,9 @@ <h2>Exit ticket</h2>
     redraw();
   }
 
-  function pt(e){
-    var t = docTop(), r = canvas.getBoundingClientRect();   // screen px; ink is in the worksheet's own px, so divide by the zoom
-    return [Math.round(((e.clientX - r.left) / Z - OX) * 10) / 10, Math.round((e.clientY - t) / Z * 10) / 10];
+  function pt(e, r){   // r: the canvas's screen box, when the caller already has it
+    r = r || canvas.getBoundingClientRect();   // screen px; ink is in the worksheet's own px, so divide by the zoom
+    return [Math.round(((e.clientX - r.left) / Z - OX) * 10) / 10, Math.round((e.clientY - docTop(r)) / Z * 10) / 10];
   }
   canvas.addEventListener('pointerdown', function(e){
     if (active !== null || !ready) return;
@@ -1765,7 +1768,8 @@ <h2>Exit ticket</h2>
     if (e.pointerId !== active || !cur) return;
     var evs = e.getCoalescedEvents ? e.getCoalescedEvents() : null;
     if (!evs || !evs.length) evs = [e];
-    for (var i = 0; i < evs.length; i++) { var q = pt(evs[i]); liveAdd(cur, live, q[0], q[1], smooth); }   // smoothing steadies board jitter
+    var r = canvas.getBoundingClientRect();   // once for all the samples in this move
+    for (var i = 0; i < evs.length; i++) { var q = pt(evs[i], r); liveAdd(cur, live, q[0], q[1], smooth); }   // smoothing steadies board jitter
     drawPieces(cur, livePieces(cur, live));
     e.preventDefault();
   });

overlay/ink_overlay.html

@@ -1,4 +1,4 @@
-<!-- ===== INK OVERLAY START (v31) =====
+<!-- ===== INK OVERLAY START (v32) =====
   Smartboard writing layer. Paste this whole block just before </body> in any .html file.
   SMART BOARD: pen tip writes. Palm, fist or side of hand erases (the board reports it as an eraser).
   Finger (and the round end of the SMART pen) scrolls the page; the "Finger" button switches it to drawing if you lose the pen.
@@ -1629,7 +1629,10 @@
 
   /* ---------- drawing ---------- */
   // pen ink and covers go on the top canvas, highlights on the layer under it, the eraser cuts through both
-  function layers(s){ return s.e ? [ctx, hctx] : seeThrough(s) ? [hctx] : [ctx]; }
+  function layers(s){ if (seeThrough(s)) showHl(true); return s.e ? [ctx, hctx] : seeThrough(s) ? [hctx] : [ctx]; }
+  // the highlighter layer is hidden while it has nothing on it, so the browser can skip blending it over the page
+  var hlShown = true;
+  function showHl(on){ if (on !== hlShown) { hlShown = on; hcan.style.visibility = on ? '' : 'hidden'; } }
   function drawStroke(s){ layers(s).forEach(function(g){ paintStroke(g, s, scale, OX * scale, -BY * scale); }); }
   // live drawing draws the same curve piece by piece as points arrive (matches paintStroke exactly)
   var live = null;
@@ -1641,7 +1644,7 @@
     return hi + s.w >= BY && lo - s.w <= BY + BH;
   }
   function redraw(){
-    clearCanvas(canvas, ctx); clearCanvas(hcan, hctx);
+    clearCanvas(canvas, ctx); clearCanvas(hcan, hctx); showHl(false);   // drawing a highlight below shows it again
     for (var i = 0; i < strokes.length; i++) if (inBand(strokes[i])) drawStroke(strokes[i]);
     if (cur) drawStroke(cur);   // a stroke still being drawn when the band moves
   }
@@ -1657,7 +1660,7 @@
   // falls back to the processor and every pen move gets slow: a 20-page worksheet on a 2x (Retina) screen ran at a few
   // frames a second.
   var FW = 0, OX = 0, BY = 0, BH = 0;   // full canvas width (CSS px) and where the page column starts inside it
-  function docTop(){ return canvas.getBoundingClientRect().top - BY * Z; }   // screen y of the worksheet's top edge
+  function docTop(r){ return (r || canvas.getBoundingClientRect()).top - BY * Z; }   // screen y of the worksheet's top edge
   function size(){
     var h = Math.ceil(body.offsetHeight), cw = calcCW();
     var fw = Math.max(cw, Math.floor(document.documentElement.clientWidth / Z));
@@ -1682,9 +1685,9 @@
     redraw();
   }
 
-  function pt(e){
-    var t = docTop(), r = canvas.getBoundingClientRect();   // screen px; ink is in the worksheet's own px, so divide by the zoom
-    return [Math.round(((e.clientX - r.left) / Z - OX) * 10) / 10, Math.round((e.clientY - t) / Z * 10) / 10];
+  function pt(e, r){   // r: the canvas's screen box, when the caller already has it
+    r = r || canvas.getBoundingClientRect();   // screen px; ink is in the worksheet's own px, so divide by the zoom
+    return [Math.round(((e.clientX - r.left) / Z - OX) * 10) / 10, Math.round((e.clientY - docTop(r)) / Z * 10) / 10];
   }
   canvas.addEventListener('pointerdown', function(e){
     if (active !== null || !ready) return;
@@ -1709,7 +1712,8 @@
     if (e.pointerId !== active || !cur) return;
     var evs = e.getCoalescedEvents ? e.getCoalescedEvents() : null;
     if (!evs || !evs.length) evs = [e];
-    for (var i = 0; i < evs.length; i++) { var q = pt(evs[i]); liveAdd(cur, live, q[0], q[1], smooth); }   // smoothing steadies board jitter
+    var r = canvas.getBoundingClientRect();   // once for all the samples in this move
+    for (var i = 0; i < evs.length; i++) { var q = pt(evs[i], r); liveAdd(cur, live, q[0], q[1], smooth); }   // smoothing steadies board jitter
     drawPieces(cur, livePieces(cur, live));
     e.preventDefault();
   });