fb-slides 0.4.2 → 0.4.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "fb-slides",
-  "version": "0.4.2",
+  "version": "0.4.3",
   "type": "module",
   "description": "Markdown-driven reveal.js decks: live demo embeds, annotation, mermaid, and a zero-config dev server",
   "keywords": [

package/runtime/spotlight.js

@@ -102,6 +102,7 @@ const RevealSpotlight = () => ({
     let rect = null; // {x, y, w, h} in screen px, or null when the veil is clear
     let press = null; // where the current drag started, or null
     let grab = null; // the pointer's offset into a rectangle being moved, or null
+    let ghostTimer = 0; // closes the old hole once the veil has faded out
 
     const layout = () => {
       if (!rect) return;
@@ -120,7 +121,11 @@ const RevealSpotlight = () => ({
     };
 
     // The clip-path stays as it was, so the hole holds its place while the
-    // veil fades out around it.
+    // veil fades out around it — but only for as long as the fade runs. The
+    // clip cuts hit-testing along with paint, so a ghost hole left on an
+    // armed veil would keep handing the pointer to the slide underneath:
+    // right where the light last was, a drag would select text instead of
+    // drawing the next rectangle.
     const clear = () => {
       rect = null;
       press = null;
@@ -128,12 +133,19 @@ const RevealSpotlight = () => ({
       veil.classList.remove('has-hole');
       ring.classList.remove('has-hole', 'is-live');
       ring.style.cursor = '';
+      clearTimeout(ghostTimer);
+      ghostTimer = setTimeout(() => {
+        if (!rect) veil.style.clipPath = '';
+      }, 320); // just past the 0.3s fade
     };
 
     const setSpot = (on) => {
       armed = on;
       button.setAttribute('aria-pressed', String(on));
       toolbar.classList.toggle('is-armed', on);
+      // Arming must start from a whole veil: a hole still mid-fade from last
+      // time would leak the pointer through (see clear above).
+      if (on) veil.style.clipPath = '';
       // Only an armed veil takes the pointer; the rest of the time clicks fall
       // through to the slide underneath — same contract as the pen's canvas.
       veil.classList.toggle('is-live', on);