fb-slides 0.4.0 → 0.4.2

package/README.md

@@ -128,10 +128,10 @@ Note: a bad description is the most common reason a tool never gets used.
 | Key | |
 | --- | --- |
 | `→` / `Space` | next step (fragments included) |
-| `P` | the pen — draw on the slide, the ink fades on its own |
-| `A` | the arrow — click the tail, then the tip; same colours as the pen |
-| `C` | the pointer — replaces the cursor: a glowing halo, a dart aimed at the centre, or the normal mouse |
-| `Shift` (tap) | the spotlight — drag a rectangle, the rest of the slide dims and blurs |
+| `Q` | the pen — draw on the slide, the ink fades on its own |
+| `W` | the arrow — click the tail, then the tip; same colours as the pen |
+| `E` | the spotlight — drag a rectangle, the rest of the slide dims and blurs |
+| `R` | the pointer — replaces the cursor: a glowing halo, a dart aimed at the centre, or the normal mouse |
 | `S` | speaker view — notes, timer, next slide |
 | `Esc` / `O` | overview — the slides as a grid |
 | `V` | the vertical navigator — every slide by title, down the left edge |

package/package.json

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

package/runtime/annotate.js

@@ -14,8 +14,6 @@
 // pointer, not the slide's coordinate space.
 // ---------------------------------------------------------------------------
 
-import { unlistShortcut } from './shortcuts.js';
-
 // The pen's palette. It lives here rather than in theme.css because it is a
 // list the toolbar has to enumerate, not a token the theme swaps: `glow` is the
 // halo, `core` the bright thread down the middle of it. JS hands the selected
@@ -52,7 +50,7 @@ const WIDTH = 3.4; // px, the bright core of the line
 
 // The arrow's head: how far back along the shaft the wings reach, and how far
 // they open off it. A short arrow shrinks its head rather than being all head.
-const HEAD_LEN = 48;
+const HEAD_LEN = 56;
 const HEAD_SPREAD = 0.55; // radians
 // Under this, a press-and-release is a click placing the tail, not a whole
 // arrow: the tip then follows the pointer until the second click.
@@ -73,14 +71,11 @@ const MAX_WIDTH = WIDTH * Math.max(...LAYERS.flatMap((l) => l.passes.map((p) =>
 // narrow band the erase front is crossing.
 const QUANTA = 24;
 
-// `P` is reveal's own previous-slide key, and a plugin binding wins over it —
-// which is the point: on stage the pen is reached for far more often than a key
-// ← and Shift+Space already do. Reveal's own row in the help overlay still
-// lists it, though, so it has to be corrected. `A` is reveal's auto-slide
-// toggle, idle in a deck that does not auto-advance — the arrow takes it.
-const PEN_KEY_CODE = 80;
-const ARROW_KEY_CODE = 65;
-const HELP_TAKEN_FROM = { key: 'P', from: /previous/i };
+// The tools live on the QWER row — four keys under the left hand, in the
+// toolbar's own order, and none of them is reveal's: its handler answers
+// nothing between Q and R (P, H/J/K/L, B, V, F, G, A, C, O are all elsewhere).
+const PEN_KEY_CODE = 81; // Q
+const ARROW_KEY_CODE = 87; // W
 
 const PEN_ICON = `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7"
   stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
@@ -144,9 +139,11 @@ const RevealAnnotate = () => ({
     toolbar.setAttribute('aria-label', 'Slide tools');
     toolbar.innerHTML = `
       <button id="tool-pen" class="deck-tool" type="button" aria-pressed="false"
-              title="Pen — draw on the slide (P)" aria-label="Pen">${PEN_ICON}</button>
+              title="Pen — draw on the slide (Q)" aria-label="Pen">${PEN_ICON}<span
+              class="deck-key" aria-hidden="true">Q</span></button>
       <button id="tool-arrow" class="deck-tool" type="button" aria-pressed="false"
-              title="Arrow — click the tail, then the tip (A)" aria-label="Arrow">${ARROW_ICON}</button>
+              title="Arrow — click the tail, then the tip (W)" aria-label="Arrow">${ARROW_ICON}<span
+              class="deck-key" aria-hidden="true">W</span></button>
       <div id="deck-swatches" role="radiogroup" aria-label="Ink colour" hidden>
         ${COLOURS.map(
           (colour, i) => `<button class="deck-swatch" type="button" role="radio"
@@ -254,8 +251,9 @@ const RevealAnnotate = () => ({
 
     // The slab of canvas a stroke can reach, clamped to the viewport. Padded by
     // half the widest pass, plus a little for the curve's overshoot between
-    // points.
-    const boundsOf = (points) => {
+    // points; `extra` widens it further for shapes whose paint reaches past
+    // the points themselves.
+    const boundsOf = (points, extra = 0) => {
       let minX = Infinity;
       let minY = Infinity;
       let maxX = -Infinity;
@@ -266,7 +264,7 @@ const RevealAnnotate = () => ({
         if (x > maxX) maxX = x;
         if (y > maxY) maxY = y;
       }
-      const pad = MAX_WIDTH / 2 + 3;
+      const pad = MAX_WIDTH / 2 + 3 + extra;
       const x = Math.max(0, Math.floor(minX - pad));
       const y = Math.max(0, Math.floor(minY - pad));
       return {
@@ -317,8 +315,6 @@ const RevealAnnotate = () => ({
       const { from, to } = stroke;
       const length = Math.hypot(to.x - from.x, to.y - from.y);
       if (length < 1) return true;
-      const box = boundsOf([from, to]);
-      if (box.w <= 0 || box.h <= 0) return true;
 
       const fade = progress === null ? 1 : 1 - progress;
       const angle = Math.atan2(to.y - from.y, to.x - from.x);
@@ -332,6 +328,13 @@ const RevealAnnotate = () => ({
         y: to.y - head * 0.75 * Math.sin(angle),
       };
 
+      // The wings go into the bounds along with the line's own ends: an
+      // axis-aligned arrow has a razor-thin from-to box, and the head reaches
+      // further out of it sideways than the stroke padding covers. The extra
+      // head-width of pad keeps the glow well clear of the clip on every side.
+      const box = boundsOf([from, to, ...wings], head);
+      if (box.w <= 0 || box.h <= 0) return true;
+
       for (const { ink, passes } of LAYERS) {
         onLayer(box, stroke.ink[ink], (c) => {
           c.lineCap = 'round';
@@ -568,10 +571,10 @@ const RevealAnnotate = () => ({
 
     // `addKeyBinding` with a descriptor binds the key and lists it in reveal's
     // own help overlay, which `registerKeyboardShortcut` alone would not do.
-    deck.addKeyBinding({ keyCode: PEN_KEY_CODE, key: 'P', description: 'Toggle the pen' }, () =>
+    deck.addKeyBinding({ keyCode: PEN_KEY_CODE, key: 'Q', description: 'Toggle the pen' }, () =>
       toggleTool('pen'),
     );
-    deck.addKeyBinding({ keyCode: ARROW_KEY_CODE, key: 'A', description: 'Toggle the arrow' }, () =>
+    deck.addKeyBinding({ keyCode: ARROW_KEY_CODE, key: 'W', description: 'Toggle the arrow' }, () =>
       toggleTool('arrow'),
     );
     // Keys the tools borrow only while one is armed, taken in capture phase so
@@ -595,9 +598,6 @@ const RevealAnnotate = () => ({
       true,
     );
 
-    // Only once reveal has configured itself is there a row to correct.
-    deck.on('ready', () => unlistShortcut(deck, HELP_TAKEN_FROM));
-
     // A new slide is a clean sheet — including a line still under the pointer.
     deck.on('slidechanged', clear);
     // The overview is a different surface; drawing over it would annotate nothing.

package/runtime/pointer.js

@@ -19,7 +19,7 @@
 // cursor now, not a mark on one slide.
 // ---------------------------------------------------------------------------
 
-const KEY_CODE = 67; // C
+const KEY_CODE = 82; // R — the last stop on the tools' QWER row
 
 const KINDS = [
   {
@@ -94,9 +94,9 @@ const RevealPointer = () => ({
     button.className = 'deck-tool';
     button.type = 'button';
     button.setAttribute('aria-pressed', 'false');
-    button.title = 'Pointer — replace the cursor (C)';
+    button.title = 'Pointer — replace the cursor (R)';
     button.setAttribute('aria-label', 'Pointer');
-    button.innerHTML = POINTER_ICON;
+    button.innerHTML = `${POINTER_ICON}<span class="deck-key" aria-hidden="true">R</span>`;
     toolbar.append(button);
 
     // The kind picker, hanging under the toolbar exactly like the pen's
@@ -217,8 +217,8 @@ const RevealPointer = () => ({
     });
 
     // `addKeyBinding` with a descriptor binds the key and lists it in reveal's
-    // own help overlay. `C` is unclaimed by reveal.
-    deck.addKeyBinding({ keyCode: KEY_CODE, key: 'C', description: 'Toggle the pointer' }, () =>
+    // own help overlay. `R` is unclaimed by reveal.
+    deck.addKeyBinding({ keyCode: KEY_CODE, key: 'R', description: 'Toggle the pointer' }, () =>
       setPointer(!armed),
     );
     // While armed: Escape stands it down, the number row picks the kind — the

package/runtime/spotlight.js

@@ -13,7 +13,9 @@
 // scales slides with.
 // ---------------------------------------------------------------------------
 
-import { listShortcutAfter } from './shortcuts.js';
+// `E` sits between the pen's Q/W and the pointer's R: the four tools walk the
+// QWER row in the toolbar's own order, and reveal answers none of those keys.
+const KEY_CODE = 69;
 
 const RADIUS = 10; // px, the hole's corner rounding
 const MIN_DRAG = 6; // px in either axis before a press counts as a drag
@@ -89,9 +91,9 @@ const RevealSpotlight = () => ({
     button.className = 'deck-tool';
     button.type = 'button';
     button.setAttribute('aria-pressed', 'false');
-    button.title = 'Spotlight — drag to light up part of the slide (Shift)';
+    button.title = 'Spotlight — drag to light up part of the slide (E)';
     button.setAttribute('aria-label', 'Spotlight');
-    button.innerHTML = SPOT_ICON;
+    button.innerHTML = `${SPOT_ICON}<span class="deck-key" aria-hidden="true">E</span>`;
     toolbar.append(button);
 
     // ---- state ----------------------------------------------------------
@@ -250,22 +252,10 @@ const RevealSpotlight = () => ({
 
     button.addEventListener('click', () => setSpot(!armed));
 
-    // The shortcut is a tap of Shift on its own — not through addKeyBinding,
-    // which knows nothing of keyup. Toggling on the keydown would fire on
-    // every Shift+Space and Shift+arrow reveal already answers, so the toggle
-    // waits for the release, and stands down the moment any other key shows
-    // Shift was there as a modifier.
-    let shiftTap = false;
-    document.addEventListener('keydown', (event) => {
-      shiftTap = event.key === 'Shift' && !event.repeat;
-    });
-    document.addEventListener('keyup', (event) => {
-      if (event.key === 'Shift' && shiftTap) setSpot(!armed);
-    });
-    // Hand-rolled keys are invisible to reveal's help overlay; shortcuts.js
-    // writes the row the binding above cannot.
-    deck.on('ready', () =>
-      listShortcutAfter(deck, { key: 'SHIFT', action: 'Toggle the spotlight', after: /overview/i }),
+    // `addKeyBinding` with a descriptor binds the key and lists it in reveal's
+    // own help overlay, exactly as the pen's Q and W do.
+    deck.addKeyBinding({ keyCode: KEY_CODE, key: 'E', description: 'Toggle the spotlight' }, () =>
+      setSpot(!armed),
     );
     // Escape is reveal's overview toggle; take it back only while armed, in the
     // capture phase, exactly as the pen does.

package/runtime/theme.base.css

@@ -472,6 +472,7 @@ html[data-reveal-theme] .reveal strong { color: var(--r-heading-color, var(--tex
 #deck-tools.is-armed { opacity: 1; }
 
 .deck-tool {
+  position: relative;
   display: grid;
   place-items: center;
   width: 34px;
@@ -488,6 +489,22 @@ html[data-reveal-theme] .reveal strong { color: var(--r-heading-color, var(--tex
   display: block;
   width: 19px;
   height: 19px;
+  /* Lifted a touch to leave the bottom of the chip to the shortcut letter. */
+  transform: translateY(-2.5px);
+}
+/* The tool's key, worn small along the chip's bottom edge — nobody should
+   have to open the help overlay to remember which letter arms which tool. */
+.deck-key {
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 1.5px;
+  font: 700 7.5px/1 var(--sans);
+  letter-spacing: 0.02em;
+  text-align: center;
+  color: currentColor;
+  opacity: 0.65;
+  pointer-events: none;
 }
 .deck-tool:hover {
   background: color-mix(in srgb, var(--text) 10%, transparent);