fb-slides 0.1.2

package/runtime/annotate.js

@@ -0,0 +1,458 @@
+// ---------------------------------------------------------------------------
+// RevealAnnotate — draw on the slide.
+//
+// A reveal.js plugin: `init()` gets the deck instance, so this file owns the
+// whole feature — its chrome, its canvas and its key bindings — and index.html
+// stays a page of slides. Register it in the `plugins:` array like any other.
+//
+// The ink goes on one full-viewport canvas in screen pixels, which keeps it
+// clear of the CSS transform reveal scales a slide with: the pen follows the
+// 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
+// one back to CSS as `--pen`, which is what colours the armed button.
+const COLOURS = [
+  { label: 'Orange', glow: '#ff8c1a', core: '#ffd6a8' },
+  { label: 'Green', glow: '#35d76f', core: '#c9f7dd' },
+  { label: 'Fire red', glow: '#ff3b20', core: '#ffc7bb' },
+  { label: 'Sky', glow: '#4cc9ff', core: '#d3efff' },
+  { label: 'White', glow: '#ffffff', core: '#ffffff' },
+  { label: 'Black', glow: '#000000', core: '#000000' },
+];
+
+// A released stroke rubs itself out from its oldest point towards its newest.
+// FADE_MS is how long that takes end to end, FADE_TAIL how much of the stroke
+// the erase front softens as it passes — at 0 it would be a hard wipe.
+const FADE_MS = 1600;
+const FADE_TAIL = 0.35;
+
+// Softness comes from the input, not the curve: resample the pointer onto
+// points that are far enough apart to be signal, and pull each one back towards
+// the last so the hand's own tremor never reaches the canvas.
+const MIN_STEP = 3; // px between recorded points; anything closer is jitter
+const SMOOTHING = 0.45; // how far each raw sample is dragged towards the last
+
+// Catmull-Rom through the points, as one cubic per segment. 1/6 is the tension
+// that makes the spline pass through each point with a continuous tangent —
+// higher bulges the curve out past them.
+const TENSION = 1 / 6;
+
+const WIDTH = 3.4; // px, the bright core of the line
+
+// Two layers, each the same path stroked at a few widths: a soft halo, then the
+// core on top of it. Within a layer the passes stack additively, hence the low
+// alphas. Cheaper than a shadowBlur per segment.
+const LAYERS = [
+  { ink: 'glow', passes: [{ width: 7, alpha: 0.07 }, { width: 3.2, alpha: 0.16 }] },
+  { ink: 'core', passes: [{ width: 1, alpha: 1 }] },
+];
+
+const MAX_WIDTH = WIDTH * Math.max(...LAYERS.flatMap((l) => l.passes.map((p) => p.width)));
+
+// Alpha is quantised so consecutive segments sharing a value can go down as one
+// path: a stroke is hundreds of segments, but the fade only varies across the
+// 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.
+const KEY_CODE = 80;
+const HELP_TAKEN_FROM = { key: 'P', from: /previous/i };
+
+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">
+  <path d="M15.2 4.6l4.2 4.2" /><path d="M4 20l4.7-1L19.8 7.9a2 2 0 0 0-2.8-2.8L5.9 16.3 4 20z" />
+</svg>`;
+
+// Black text on a light chip, light text on a dark one — the armed pen button
+// wears the ink's own colour, and two of the six are the extremes.
+const readable = (hex) => {
+  const [r, g, b] = [1, 3, 5].map((i) => parseInt(hex.slice(i, i + 2), 16) / 255);
+  return 0.2126 * r + 0.7152 * g + 0.0722 * b > 0.5 ? '#17110a' : '#f2f5f9';
+};
+
+// The two control points of the cubic running from `points[i]` to `points[i+1]`,
+// each aimed along the line between that point's own neighbours. Consecutive
+// segments therefore leave and arrive on the same tangent, which is what lets
+// the fade cut the stroke into pieces without the seams showing.
+const controls = (points, i) => {
+  const before = points[Math.max(i - 1, 0)];
+  const from = points[i];
+  const to = points[i + 1];
+  const after = points[Math.min(i + 2, points.length - 1)];
+  return [
+    from.x + (to.x - before.x) * TENSION,
+    from.y + (to.y - before.y) * TENSION,
+    to.x - (after.x - from.x) * TENSION,
+    to.y - (after.y - from.y) * TENSION,
+  ];
+};
+
+// How opaque a stroke is `u` of the way along itself (0 oldest, 1 newest), when
+// it is `progress` of the way through its fade. `null` is a stroke still being
+// drawn — those do not fade at all.
+const alphaAt = (u, progress) => {
+  if (progress === null) return 1;
+  const front = progress * (1 + FADE_TAIL) - FADE_TAIL;
+  return Math.min(1, Math.max(0, (u - front) / FADE_TAIL));
+};
+
+const quantise = (alpha) => Math.round(alpha * QUANTA) / QUANTA;
+
+const RevealAnnotate = () => ({
+  id: 'annotate',
+
+  init(deck) {
+    // ---- chrome ---------------------------------------------------------
+    // Fixed-position overlays, so they live on <body> next to the deck's other
+    // corners rather than inside `.reveal`, whose transforms they must escape.
+    const canvas = document.createElement('canvas');
+    canvas.id = 'deck-ink';
+    canvas.setAttribute('aria-hidden', 'true');
+
+    const toolbar = document.createElement('div');
+    toolbar.id = 'deck-tools';
+    toolbar.setAttribute('role', 'toolbar');
+    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>
+      <div id="deck-swatches" role="radiogroup" aria-label="Pen colour" hidden>
+        ${COLOURS.map(
+          (colour, i) => `<button class="deck-swatch" type="button" role="radio"
+             aria-checked="${i === 0}" data-colour="${i}" style="--ink:${colour.glow}"
+             title="${colour.label}" aria-label="${colour.label}"></button>`,
+        ).join('')}
+      </div>
+    `;
+
+    document.body.append(canvas, toolbar);
+    const penButton = toolbar.querySelector('#tool-pen');
+    const swatches = toolbar.querySelector('#deck-swatches');
+    const ctx = canvas.getContext('2d');
+
+    // ---- the canvas -----------------------------------------------------
+
+    let width = 0;
+    let height = 0;
+    let dpr = 1;
+    // Built on first use: a deck nobody draws on should not be paying for a
+    // second full-screen canvas. See `onLayer` for what it is for.
+    let layer = null;
+    let layerCtx = null;
+
+    const resize = () => {
+      // Past 2x the extra pixels are free to nobody: this canvas is repainted
+      // whole on every frame of a fade, and the ink is a soft glow anyway.
+      dpr = Math.min(window.devicePixelRatio || 1, 2);
+      width = window.innerWidth;
+      height = window.innerHeight;
+      // Assigning width/height resets the context, transform included — so
+      // scale after, not before, and let the render repaint what was on it.
+      canvas.width = Math.round(width * dpr);
+      canvas.height = Math.round(height * dpr);
+      canvas.style.width = `${width}px`;
+      canvas.style.height = `${height}px`;
+      ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
+      layer = null;
+      schedule();
+    };
+
+    // Build a shape on its own layer, then tint it. Every colour has to behave
+    // the same, black included, and that rules out drawing an ink-coloured line
+    // straight onto the slide: the seams between the runs of a fade only
+    // disappear under `lighter`, which is additive and therefore blind to dark
+    // ink. So the shape is laid down in white — where `lighter` adds the two
+    // halves of a seam pixel back into a whole — and `source-in` then replaces
+    // that white with the ink, keeping the coverage it just worked out.
+    //
+    // Everything is clipped to the stroke's own box: `source-in` clears whatever
+    // the source does not cover, and unclipped that is the whole canvas.
+    const onLayer = (box, tint, drawShape) => {
+      if (!layer) {
+        layer = document.createElement('canvas');
+        layer.width = canvas.width;
+        layer.height = canvas.height;
+        layerCtx = layer.getContext('2d');
+      }
+      layerCtx.setTransform(dpr, 0, 0, dpr, 0, 0);
+      layerCtx.save();
+      layerCtx.beginPath();
+      layerCtx.rect(box.x, box.y, box.w, box.h);
+      layerCtx.clip();
+      layerCtx.clearRect(box.x, box.y, box.w, box.h);
+      layerCtx.globalCompositeOperation = 'lighter';
+      layerCtx.lineJoin = 'round';
+      drawShape(layerCtx);
+      layerCtx.globalCompositeOperation = 'source-in';
+      layerCtx.fillStyle = tint;
+      layerCtx.fillRect(box.x, box.y, box.w, box.h);
+      layerCtx.restore();
+
+      ctx.drawImage(
+        layer,
+        box.x * dpr, box.y * dpr, box.w * dpr, box.h * dpr,
+        box.x, box.y, box.w, box.h,
+      );
+    };
+
+    // ---- strokes --------------------------------------------------------
+    // A stroke is its points, the colour it was drawn in, and the moment the
+    // pointer left the slide: `releasedAt: null` is one still under the pen.
+
+    const strokes = [];
+    let drawing = null;
+    let frame = 0;
+
+    const addPoint = (event) => {
+      const points = drawing.points;
+      const previous = points[points.length - 1];
+      let { clientX: x, clientY: y } = event;
+
+      if (previous) {
+        x = previous.x + (x - previous.x) * (1 - SMOOTHING);
+        y = previous.y + (y - previous.y) * (1 - SMOOTHING);
+        if (Math.hypot(x - previous.x, y - previous.y) < MIN_STEP) return;
+      }
+      points.push({ x, y });
+    };
+
+    // 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) => {
+      let minX = Infinity;
+      let minY = Infinity;
+      let maxX = -Infinity;
+      let maxY = -Infinity;
+      for (const { x, y } of points) {
+        if (x < minX) minX = x;
+        if (y < minY) minY = y;
+        if (x > maxX) maxX = x;
+        if (y > maxY) maxY = y;
+      }
+      const pad = MAX_WIDTH / 2 + 3;
+      const x = Math.max(0, Math.floor(minX - pad));
+      const y = Math.max(0, Math.floor(minY - pad));
+      return {
+        x,
+        y,
+        w: Math.min(width, Math.ceil(maxX + pad)) - x,
+        h: Math.min(height, Math.ceil(maxY + pad)) - y,
+      };
+    };
+
+    // Cut the stroke into runs of segments that share a quantised alpha. Runs
+    // meet end to end on a shared point and a shared tangent, and are stroked
+    // with a butt cap: a round cap would lay a disc over the next run's start,
+    // and those are the beads that crawl along a line as it fades.
+    const runsOf = (stroke, progress) => {
+      const points = stroke.points;
+      const segments = points.length - 1;
+      const runs = [];
+
+      let path = null;
+      let alpha = -1;
+      for (let i = 0; i < segments; i++) {
+        // A one-segment stroke has no oldest end to start from: fade it whole.
+        const next = quantise(alphaAt(segments === 1 ? 0.5 : i / (segments - 1), progress));
+        if (next !== alpha) {
+          alpha = next;
+          path = null;
+          if (alpha > 0) {
+            path = new Path2D();
+            path.moveTo(points[i].x, points[i].y);
+            runs.push({ path, alpha, round: false });
+          }
+        }
+        if (!path) continue;
+        path.bezierCurveTo(...controls(points, i), points[i + 1].x, points[i + 1].y);
+      }
+      // `lineCap` applies to both ends of a path, so a run can only be rounded
+      // off when it has no seam to spoil — which is every stroke that is not
+      // mid-fade, the pen's own line included.
+      if (runs.length === 1) runs[0].round = true;
+      return runs;
+    };
+
+    // Returns false once the stroke has faded out and can be dropped.
+    const paint = (stroke, now) => {
+      const progress = stroke.releasedAt === null ? null : (now - stroke.releasedAt) / FADE_MS;
+      if (progress !== null && progress >= 1) return false;
+
+      const box = boundsOf(stroke.points);
+      if (box.w <= 0 || box.h <= 0) return true;
+
+      // Pressed without moving: the pen still left a mark.
+      if (stroke.points.length < 2) {
+        const alpha = progress === null ? 1 : 1 - progress;
+        const [point] = stroke.points;
+        for (const { ink, passes } of LAYERS) {
+          onLayer(box, stroke.ink[ink], (c) => {
+            for (const pass of passes) {
+              c.beginPath();
+              c.arc(point.x, point.y, (WIDTH * pass.width) / 2, 0, Math.PI * 2);
+              c.fillStyle = `rgba(255, 255, 255, ${alpha * pass.alpha})`;
+              c.fill();
+            }
+          });
+        }
+        return true;
+      }
+
+      const runs = runsOf(stroke, progress);
+      for (const { ink, passes } of LAYERS) {
+        onLayer(box, stroke.ink[ink], (c) => {
+          for (const pass of passes) {
+            c.lineWidth = WIDTH * pass.width;
+            for (const run of runs) {
+              c.lineCap = run.round ? 'round' : 'butt';
+              c.strokeStyle = `rgba(255, 255, 255, ${run.alpha * pass.alpha})`;
+              c.stroke(run.path);
+            }
+          }
+        });
+      }
+      return true;
+    };
+
+    const render = () => {
+      frame = 0;
+      const now = performance.now();
+
+      ctx.globalCompositeOperation = 'source-over';
+      ctx.clearRect(0, 0, width, height);
+
+      for (let i = strokes.length - 1; i >= 0; i--) {
+        if (!paint(strokes[i], now)) strokes.splice(i, 1);
+      }
+      // Only a fading stroke needs the next frame. A live one changes when a
+      // point is added and not before, so a pen held still costs nothing —
+      // without this the loop repaints a full-screen canvas forever.
+      if (strokes.some((stroke) => stroke.releasedAt !== null)) schedule();
+    };
+
+    const schedule = () => {
+      frame ||= requestAnimationFrame(render);
+    };
+
+    const clear = () => {
+      drawing = null;
+      strokes.length = 0;
+      ctx.clearRect(0, 0, width, height);
+    };
+
+    // ---- the pen --------------------------------------------------------
+
+    let penOn = false;
+    let ink = COLOURS[0];
+
+    const setInk = (colour) => {
+      ink = colour;
+      // Handed back to CSS: the armed button wears the colour it draws in.
+      toolbar.style.setProperty('--pen', colour.glow);
+      toolbar.style.setProperty('--pen-ink', readable(colour.glow));
+      for (const button of swatches.children) {
+        button.setAttribute('aria-checked', String(COLOURS[button.dataset.colour] === colour));
+      }
+    };
+
+    const setPen = (on) => {
+      penOn = on;
+      penButton.setAttribute('aria-pressed', String(on));
+      toolbar.classList.toggle('is-armed', on);
+      // The colours are only worth showing while there is a pen to apply them
+      // to, which makes arming it the one gesture that opens them.
+      swatches.hidden = !on;
+      // Only an armed canvas takes the pointer; the rest of the time clicks
+      // fall through to the slide underneath.
+      canvas.classList.toggle('is-live', on);
+      if (on) document.dispatchEvent(new CustomEvent('deck:tool-armed', { detail: 'pen' }));
+      else clear();
+    };
+
+    // Two tools, one pointer: arming either disarms the other. The handshake
+    // is a DOM event rather than an import either way round, so each plugin
+    // works alone.
+    document.addEventListener('deck:tool-armed', (event) => {
+      if (event.detail !== 'pen' && penOn) setPen(false);
+    });
+
+    canvas.addEventListener('pointerdown', (event) => {
+      if (!penOn || event.button !== 0) return;
+      canvas.setPointerCapture(event.pointerId);
+      // The colour is caught at the down-stroke, so a line already fading keeps
+      // the one it was drawn in when you pick another.
+      drawing = { id: event.pointerId, points: [], releasedAt: null, ink };
+      strokes.push(drawing);
+      addPoint(event);
+      schedule();
+    });
+
+    canvas.addEventListener('pointermove', (event) => {
+      if (!drawing || event.pointerId !== drawing.id) return;
+      // A trackpad reports faster than the display refreshes, and the samples
+      // in between are what keeps a quick curve smooth instead of faceted.
+      // The list comes back empty where there is nothing to coalesce, which is
+      // still a move worth recording — hence the event itself as the fallback.
+      const samples = event.getCoalescedEvents?.() ?? [];
+      for (const sample of samples.length ? samples : [event]) addPoint(sample);
+      schedule();
+    });
+
+    const release = (event) => {
+      if (!drawing || event.pointerId !== drawing.id) return;
+      drawing.releasedAt = performance.now();
+      drawing = null;
+      schedule();
+    };
+    canvas.addEventListener('pointerup', release);
+    canvas.addEventListener('pointercancel', release);
+
+    penButton.addEventListener('click', () => setPen(!penOn));
+    swatches.addEventListener('click', (event) => {
+      const button = event.target.closest('.deck-swatch');
+      if (button) setInk(COLOURS[button.dataset.colour]);
+    });
+
+    // `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: KEY_CODE, key: 'P', description: 'Toggle the pen' }, () =>
+      setPen(!penOn),
+    );
+    // Escape is reveal's own overview toggle, and it binds before a plugin can.
+    // Capture phase gets there first — but only to take Escape back while the
+    // pen is armed, so the key still opens the overview the rest of the time.
+    document.addEventListener(
+      'keydown',
+      (event) => {
+        if (event.key !== 'Escape' || !penOn) return;
+        setPen(false);
+        event.stopPropagation();
+        event.preventDefault();
+      },
+      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.
+    deck.on('overviewshown', () => setPen(false));
+
+    window.addEventListener('resize', resize);
+    setInk(ink);
+    resize();
+  },
+});
+
+export default RevealAnnotate;