@hajimism/dek 0.1.0

package/src/runtime/fit.ts

@@ -0,0 +1,32 @@
+import type { Size } from "../core/size.ts";
+
+export function deckScale(options: {
+  viewport: Size;
+  logical: Size;
+  reservedRight?: number;
+}): number {
+  const availableWidth = options.viewport.width - (options.reservedRight ?? 0);
+  const { width, height } = options.logical;
+  if (width <= 0 || height <= 0 || availableWidth <= 0 || options.viewport.height <= 0) {
+    return 0;
+  }
+  return Math.min(availableWidth / width, options.viewport.height / height);
+}
+
+export function deckFitTransform(viewport: Size, logical: Size): string {
+  const scale = deckScale({ viewport, logical });
+  const x = (viewport.width - logical.width * scale) / 2;
+  const y = (viewport.height - logical.height * scale) / 2;
+  return `translate(${x}px, ${y}px) scale(${scale})`;
+}
+
+/** Scale `el`, laid out at the deck's size, to fit inside `stage` and center it there. */
+export function fitStage(
+  el: { offsetWidth: number; offsetHeight: number; style: { transform: string } },
+  stage: { clientWidth: number; clientHeight: number },
+): void {
+  el.style.transform = deckFitTransform(
+    { width: stage.clientWidth, height: stage.clientHeight },
+    { width: el.offsetWidth || 1280, height: el.offsetHeight || 720 },
+  );
+}

package/src/runtime/go.ts

@@ -0,0 +1,56 @@
+/**
+ * Run one move at a time. A move asked for while another runs waits, and only the latest waiting
+ * move runs next. `onQueue` fires as one starts waiting, so the move in flight can cut its
+ * animation short instead of making the presenter wait it out.
+ */
+export function createGuardedGo<T>(
+  run: (next: T) => Promise<void>,
+  options: { onQueue?: () => void } = {},
+): (next: T | null | undefined) => Promise<void> {
+  let busy = false;
+  let queued: T | undefined;
+  return async (next) => {
+    if (next == null) {
+      return;
+    }
+    if (busy) {
+      queued = next;
+      options.onQueue?.();
+      return;
+    }
+    busy = true;
+    let firstError: unknown;
+    try {
+      let current: T | undefined = next;
+      while (current !== undefined) {
+        queued = undefined;
+        try {
+          await run(current);
+        } catch (error) {
+          firstError ??= error;
+        }
+        current = queued;
+      }
+    } finally {
+      busy = false;
+    }
+    if (firstError !== undefined) {
+      throw firstError;
+    }
+  };
+}
+
+/** Follow a peer's move to `next` through `go`, unless the deck already heads there. */
+export function applyIncomingPosition<T>(
+  go: (next: T) => unknown,
+  next: T,
+  options: {
+    equal: (a: T, b: T) => boolean;
+    current: () => T;
+  },
+): void {
+  if (options.equal(options.current(), next)) {
+    return;
+  }
+  void go(next);
+}

package/src/runtime/input.ts

@@ -0,0 +1,128 @@
+/// <reference lib="dom" />
+import { PAGE_ID } from "../core/page.ts";
+
+import type { Move } from "../core/position.ts";
+import { isPresenterToggleKey } from "./presenter.ts";
+import { isRailToggleKey } from "./rail.ts";
+import { isInteractive, isLetterKey, isTextEntry, keyToMove, pointerMove } from "./step.ts";
+
+/** What a key or a touch on the page may ask for. Each returns whether it took the request. */
+export type InputActions = {
+  /** Any key the page hears. */
+  onKey: () => void;
+  togglePresenter: () => boolean;
+  toggleFullscreen: () => void;
+  toggleRail: () => boolean;
+  /** Space; left to `move` unless this takes it (a rehearsal plays and pauses). */
+  togglePlay: () => boolean;
+  toggleLaser: () => boolean;
+  /** Mark the beat on screen to rewrite, or unmark it; false where marks cannot be kept. */
+  toggleMark: () => boolean;
+  /** While the laser is on, the slide is for pointing: a tap or a click on it moves nothing. */
+  pointing: () => boolean;
+  move: (move: Move) => void;
+};
+
+/** Listen for the keys on the page and for taps and swipes on the slide stage. */
+export function bindInput(actions: InputActions): void {
+  document.addEventListener("keydown", (event) => {
+    // Keys typed into a field on a slide are the field's.
+    if (isTextEntry(event.target)) {
+      return;
+    }
+    actions.onKey();
+    if (isPresenterToggleKey(event)) {
+      if (actions.togglePresenter()) {
+        event.preventDefault();
+      }
+      return;
+    }
+    if (isLetterKey(event, "f")) {
+      event.preventDefault();
+      actions.toggleFullscreen();
+      return;
+    }
+    if (isLetterKey(event, "m")) {
+      if (actions.toggleMark()) {
+        event.preventDefault();
+      }
+      return;
+    }
+    if (isLetterKey(event, "l")) {
+      if (actions.toggleLaser()) {
+        event.preventDefault();
+      }
+      return;
+    }
+    if (isRailToggleKey(event)) {
+      if (actions.toggleRail()) {
+        event.preventDefault();
+      }
+      return;
+    }
+    if (event.key === " " && actions.togglePlay()) {
+      event.preventDefault();
+      return;
+    }
+    const move = keyToMove(event);
+    if (!move) {
+      return;
+    }
+    event.preventDefault();
+    actions.move(move);
+  });
+  const stageEl = document.getElementById(PAGE_ID.currentStage);
+  if (stageEl) {
+    bindStagePointer(stageEl, actions);
+  }
+}
+
+function bindStagePointer(
+  stageEl: HTMLElement,
+  actions: Pick<InputActions, "move" | "pointing">,
+): void {
+  const onMove = actions.move;
+  let start: { x: number; y: number; id: number } | undefined;
+  stageEl.addEventListener("pointerdown", (event) => {
+    if (actions.pointing()) {
+      start = undefined;
+      return;
+    }
+    // A right click, or one held with a modifier (Shift extends a selection), is the browser's.
+    const modified = event.altKey || event.ctrlKey || event.metaKey || event.shiftKey;
+    const theirs = event.pointerType === "mouse" && (event.button !== 0 || modified);
+    if (theirs || isInteractive(event.target)) {
+      start = undefined;
+      return;
+    }
+    start = { x: event.clientX, y: event.clientY, id: event.pointerId };
+  });
+  stageEl.addEventListener("pointerup", (event) => {
+    if (!start || start.id !== event.pointerId) {
+      return;
+    }
+    // A click that ends a text selection, such as a double click on a word, keeps the slide.
+    if (event.pointerType === "mouse" && getSelection()?.isCollapsed === false) {
+      start = undefined;
+      return;
+    }
+    const rect = stageEl.getBoundingClientRect();
+    const move = pointerMove(
+      {
+        x: event.clientX - rect.left,
+        y: event.clientY - rect.top,
+        dx: event.clientX - start.x,
+        dy: event.clientY - start.y,
+      },
+      rect,
+      event.pointerType,
+    );
+    start = undefined;
+    if (move) {
+      onMove(move);
+    }
+  });
+  stageEl.addEventListener("pointercancel", () => {
+    start = undefined;
+  });
+}

package/src/runtime/laser-view.ts

@@ -0,0 +1,110 @@
+/// <reference lib="dom" />
+import type { Pointer } from "../core/live-protocol.ts";
+import { PAGE_ID } from "../core/page.ts";
+import { createLaserDot, createLaserFeed, pointOnSlide } from "./laser.ts";
+
+export type LaserView = {
+  /** Turn this window's laser on or off; true, since the key is always the laser's. */
+  toggle(): boolean;
+  /** Whether this window's laser is on, so the slide is for pointing rather than for tapping. */
+  isOn(): boolean;
+  /** Where another window's laser points, or null once it went away. */
+  receive(pointer: Pointer | null): void;
+  /** The deck moved. */
+  sync(): void;
+};
+
+/**
+ * The laser: while it is on, where the pointer or a finger rests on the slide is shown here and
+ * sent to the deck's other windows, which show it at the same place on the slide. A window with
+ * its laser off still shows another's. The dot is the deck's first child, so it scales with the
+ * slide and stays out of what counts slides, such as the print CSS's last page.
+ */
+export function createLaserView(options: {
+  /** The slide on screen. */
+  current: () => number;
+  /** Send a point to the deck's other windows. */
+  send: (pointer: Pointer | null) => void;
+}): LaserView {
+  const deckEl = document.getElementById(PAGE_ID.deck);
+  const stageEl = document.getElementById(PAGE_ID.currentStage);
+  const toggleEl = document.getElementById(PAGE_ID.laserToggle);
+  const dotEl = document.createElement("div");
+  dotEl.id = PAGE_ID.laser;
+  dotEl.hidden = true;
+  dotEl.setAttribute("aria-hidden", "true");
+  deckEl?.prepend(dotEl);
+
+  const timers = {
+    setTimer: (fn: () => void, ms: number) => window.setTimeout(fn, ms),
+    clearTimer: (id: number) => window.clearTimeout(id),
+  };
+  const dot = createLaserDot({
+    ...timers,
+    current: options.current,
+    draw(pointer) {
+      dotEl.hidden = pointer === null;
+      if (pointer) {
+        dotEl.style.left = `${pointer.x * 100}%`;
+        dotEl.style.top = `${pointer.y * 100}%`;
+      }
+    },
+  });
+  // This window's own dot is one more reader of what it sends.
+  const feed = createLaserFeed({
+    ...timers,
+    frame: (fn) => window.requestAnimationFrame(fn),
+    send(pointer) {
+      options.send(pointer);
+      dot.receive(pointer);
+    },
+  });
+  let on = false;
+
+  function setOn(next: boolean): void {
+    on = next;
+    document.body.classList.toggle("is-laser", on);
+    toggleEl?.setAttribute("aria-pressed", String(on));
+    if (!on) {
+      feed.lift();
+    }
+  }
+
+  function track(event: PointerEvent): void {
+    if (!on || !deckEl) {
+      return;
+    }
+    const at = pointOnSlide({ x: event.clientX, y: event.clientY }, deckEl.getBoundingClientRect());
+    if (at) {
+      feed.point({ slideIndex: options.current(), ...at });
+    } else {
+      feed.lift();
+    }
+  }
+
+  stageEl?.addEventListener("pointermove", track);
+  stageEl?.addEventListener("pointerdown", track);
+  stageEl?.addEventListener("pointerleave", () => feed.lift());
+  stageEl?.addEventListener("pointercancel", () => feed.lift());
+  // A finger that lifts takes the laser with it; a mouse stays where it is.
+  stageEl?.addEventListener("pointerup", (event) => {
+    if (event.pointerType !== "mouse") {
+      feed.lift();
+    }
+  });
+  toggleEl?.addEventListener("click", () => setOn(!on));
+
+  return {
+    toggle() {
+      setOn(!on);
+      return true;
+    },
+    isOn: () => on,
+    receive: (pointer) => dot.receive(pointer),
+    sync() {
+      // A point made on the slide the deck left is no longer where the laser is.
+      feed.lift();
+      dot.sync();
+    },
+  };
+}

package/src/runtime/laser.ts

@@ -0,0 +1,145 @@
+import type { Pointer } from "../core/live-protocol.ts";
+
+/** How often a laser held still says again where it points. */
+export const LASER_HEARTBEAT_MS = 1_000;
+
+/**
+ * How long a dot stays with no word from its laser. Past a few heartbeats missed, the window
+ * that pointed has closed or lost its line, and a dot left on the projector would mislead.
+ */
+export const LASER_STALE_MS = 3_000;
+
+type Rect = { left: number; top: number; width: number; height: number };
+
+/** Where on the slide a point in the window falls, as a share of each side; nothing off it. */
+export function pointOnSlide(
+  client: { x: number; y: number },
+  rect: Rect,
+): { x: number; y: number } | undefined {
+  if (rect.width <= 0 || rect.height <= 0) {
+    return undefined;
+  }
+  const x = (client.x - rect.left) / rect.width;
+  const y = (client.y - rect.top) / rect.height;
+  return x >= 0 && x <= 1 && y >= 0 && y <= 1 ? { x, y } : undefined;
+}
+
+type Timers = {
+  setTimer: (fn: () => void, ms: number) => number;
+  clearTimer: (id: number) => void;
+};
+
+export type LaserFeed = {
+  /** The laser points here now. */
+  point(pointer: Pointer): void;
+  /** The laser went away: off the slide, the finger lifted, or the laser turned off. */
+  lift(): void;
+};
+
+/**
+ * What one window's laser sends. A hand moves the pointer many times a frame, so only the latest
+ * point of each frame goes out; a hand held still says again where it points each heartbeat, so
+ * the other windows can tell a laser at rest from one that is gone.
+ */
+export function createLaserFeed(
+  options: Timers & {
+    send: (pointer: Pointer | null) => void;
+    /** Run once before the next paint: requestAnimationFrame in a browser. */
+    frame: (fn: () => void) => void;
+  },
+): LaserFeed {
+  let latest: Pointer | undefined;
+  let framed = false;
+  let heartbeat: number | undefined;
+  let pointing = false;
+
+  const stopHeartbeat = (): void => {
+    if (heartbeat !== undefined) {
+      options.clearTimer(heartbeat);
+      heartbeat = undefined;
+    }
+  };
+
+  const send = (pointer: Pointer): void => {
+    pointing = true;
+    options.send(pointer);
+    stopHeartbeat();
+    heartbeat = options.setTimer(() => {
+      heartbeat = undefined;
+      send(pointer);
+    }, LASER_HEARTBEAT_MS);
+  };
+
+  return {
+    point(pointer) {
+      latest = pointer;
+      if (framed) {
+        return;
+      }
+      framed = true;
+      options.frame(() => {
+        framed = false;
+        if (latest) {
+          send(latest);
+        }
+      });
+    },
+    lift() {
+      latest = undefined;
+      stopHeartbeat();
+      if (pointing) {
+        pointing = false;
+        options.send(null);
+      }
+    },
+  };
+}
+
+export type LaserDot = {
+  /** A point, or null for none, from this window's laser or another's. */
+  receive(pointer: Pointer | null): void;
+  /** The deck moved: a point made on another slide is no longer on screen. */
+  sync(): void;
+};
+
+/**
+ * The dot every window of the deck draws where a laser points: on the slide it was made on, and
+ * only for as long as its laser keeps saying so.
+ */
+export function createLaserDot(
+  options: Timers & {
+    /** Put the dot at a point, or take it away for null. */
+    draw: (pointer: Pointer | null) => void;
+    /** The slide on screen. */
+    current: () => number;
+  },
+): LaserDot {
+  let shown: Pointer | null = null;
+  let stale: number | undefined;
+
+  const show = (pointer: Pointer | null): void => {
+    shown = pointer && pointer.slideIndex === options.current() ? pointer : null;
+    options.draw(shown);
+  };
+
+  return {
+    receive(pointer) {
+      if (stale !== undefined) {
+        options.clearTimer(stale);
+        stale = undefined;
+      }
+      show(pointer);
+      if (pointer) {
+        stale = options.setTimer(() => {
+          stale = undefined;
+          show(null);
+        }, LASER_STALE_MS);
+      }
+    },
+    sync() {
+      if (shown && shown.slideIndex !== options.current()) {
+        show(null);
+      }
+    },
+  };
+}

package/src/runtime/live-host.ts

@@ -0,0 +1,33 @@
+/// <reference lib="dom" />
+
+import { type LiveHost, slideSelector } from "./live.ts";
+
+export function documentLiveHost(): LiveHost {
+  return {
+    replaceSlide(slug, html) {
+      const current = document.querySelector(slideSelector(slug));
+      if (current) {
+        current.outerHTML = html;
+      }
+    },
+    setTheme(css) {
+      const el = document.querySelector("style[data-dek-theme]");
+      if (el) {
+        el.textContent = css;
+      }
+    },
+    setDiagnostics(text) {
+      let el = document.querySelector(".dek-diagnostics");
+      if (!text) {
+        el?.remove();
+        return;
+      }
+      if (!el) {
+        el = document.createElement("div");
+        el.className = "dek-diagnostics";
+        document.body.prepend(el);
+      }
+      el.textContent = text;
+    },
+  };
+}

package/src/runtime/live-reload.ts

@@ -0,0 +1,29 @@
+import { formatDeckRoute, liveTokenQuery, withDeckPrefix } from "./routes.ts";
+
+/**
+ * The page's line to its deck's event stream on the dev server. A presenter page sends its
+ * token, as the socket does, so the stream is cleared for the presenter's events.
+ */
+export function liveReloadScript(): string {
+  return `(() => {
+  const withDeckPrefix = ${withDeckPrefix};
+  const liveTokenQuery = ${liveTokenQuery};
+  const url = withDeckPrefix(location.pathname, ${JSON.stringify(formatDeckRoute({ kind: "events" }))});
+  const es = new EventSource(url + liveTokenQuery(document.body.dataset.liveToken));
+  es.onmessage = async (message) => {
+    let event;
+    try {
+      event = JSON.parse(message.data);
+    } catch {
+      location.reload();
+      return;
+    }
+    const live = window["dekLive"];
+    if (typeof live === "function") {
+      await live(event);
+      return;
+    }
+    location.reload();
+  };
+})();`;
+}

package/src/runtime/live.ts

@@ -0,0 +1,88 @@
+import type { Diagnostic } from "../core/diagnostic.ts";
+import type { LiveEvent } from "../core/live-protocol.ts";
+import { deckUrl } from "./routes.ts";
+
+/** What live reload changes on the page; the stage draws the current beat again after. */
+export type LiveHost = {
+  replaceSlide(slug: string, html: string): void;
+  setTheme(css: string): void;
+  setDiagnostics(text: string | null): void;
+};
+
+type Hydrated<Type extends LiveEvent["type"], Extra> = Extract<LiveEvent, { type: Type }> & Extra;
+
+/** A live event with what it names fetched: a slide's new fragment, the theme's new CSS. */
+export type HydratedLiveEvent =
+  | Exclude<LiveEvent, { type: "reload-slide" | "reload-theme" }>
+  | Hydrated<"reload-slide", { html: string }>
+  | Hydrated<"reload-theme", { css: string }>;
+
+export function slideSelector(slug: string): string {
+  const escaped = slug.replace(/\\/g, "\\\\").replace(/"/g, '\\"');
+  return `#deck > .slide[data-slug="${escaped}"]`;
+}
+
+/** The slice of `fetch` the live client uses; keeps test stubs free of the fetch namespace. */
+export type LiveFetch = (input: string) => Promise<Response>;
+
+export async function hydrateLiveEvent(
+  event: LiveEvent,
+  pathname: string,
+  fetchImpl: LiveFetch = fetch,
+): Promise<HydratedLiveEvent | undefined> {
+  if (event.type === "reload-slide") {
+    const response = await fetchImpl(liveSlidePath(pathname, event.slug));
+    if (!response.ok) {
+      return undefined;
+    }
+    return { ...event, html: await response.text() };
+  }
+  if (event.type === "reload-theme") {
+    const response = await fetchImpl(liveThemePath(pathname));
+    if (!response.ok) {
+      return undefined;
+    }
+    return { ...event, css: await response.text() };
+  }
+  return event;
+}
+
+export function applyLiveEvent(event: HydratedLiveEvent, host: LiveHost): { reload: boolean } {
+  switch (event.type) {
+    case "sync":
+    case "reload-script":
+      return { reload: true };
+    case "reload-slide":
+      host.replaceSlide(event.slug, event.html);
+      return { reload: false };
+    case "reload-theme":
+      host.setTheme(event.css);
+      return { reload: false };
+    case "diagnostics":
+      host.setDiagnostics(formatLiveDiagnostics(event.diagnostics));
+      return { reload: false };
+    case "timeline":
+      return { reload: false };
+  }
+}
+
+function formatLiveDiagnostics(diagnostics: Diagnostic[]): string | null {
+  if (diagnostics.length === 0) {
+    return null;
+  }
+  return diagnostics
+    .map((diagnostic) =>
+      diagnostic.severity === "warning"
+        ? `${diagnostic.id} warning: ${diagnostic.message}`
+        : `${diagnostic.id}: ${diagnostic.message}`,
+    )
+    .join("\n");
+}
+
+export function liveSlidePath(pathname: string, slug: string): string {
+  return deckUrl(pathname, { kind: "slide", slug });
+}
+
+export function liveThemePath(pathname: string): string {
+  return deckUrl(pathname, { kind: "theme" });
+}

package/src/runtime/marks-view.ts

@@ -0,0 +1,74 @@
+/// <reference lib="dom" />
+import { decodePosition, encodePosition } from "../core/live-protocol.ts";
+import { PAGE_ID } from "../core/page.ts";
+import { positionsEqual } from "../core/position.ts";
+import type { Position } from "../core/step.ts";
+
+export type MarksView = {
+  /** Mark the beat on screen, or unmark it; true, since the key is the marks' on this page. */
+  toggle(): boolean;
+  /** Show whether the beat at `pos` is marked, and which beats of its slide are. */
+  render(pos: Position): void;
+};
+
+/**
+ * The marks the speaker leaves while rehearsing on beats that want rewriting, kept by the dev
+ * server in a file an agent reads with `dekc marks`. Only a page whose presenter bar has the mark
+ * button has marks, so a built file never tries to reach a server it does not have.
+ */
+export function createMarksView(options: {
+  /** The dev server's marks endpoint for this deck, with the presenter's token. */
+  url: string;
+  /** The beat on screen. */
+  current: () => Position;
+  fetch: (url: string, init?: RequestInit) => Promise<Response>;
+}): MarksView | undefined {
+  const button = document.getElementById(PAGE_ID.markToggle);
+  if (!button) {
+    return undefined;
+  }
+  let marked: Position[] = [];
+
+  function render(pos: Position): void {
+    const isMarked = (beatIndex: number): boolean =>
+      marked.some((mark) => positionsEqual(mark, { slideIndex: pos.slideIndex, beatIndex }));
+    button?.setAttribute("aria-pressed", String(isMarked(pos.beatIndex)));
+    for (const item of document.querySelectorAll(`#${PAGE_ID.beats} [data-beat-index]`)) {
+      item.classList.toggle("is-marked", isMarked(Number(item.getAttribute("data-beat-index"))));
+    }
+  }
+
+  /** Ask the server, and draw what it says the marks are now; a refusal is said on the button. */
+  async function ask(init?: RequestInit): Promise<void> {
+    try {
+      const response = await options.fetch(options.url, init);
+      if (!response.ok) {
+        throw new Error(`the dev server answered ${response.status}`);
+      }
+      const body = (await response.json()) as { positions?: unknown[] };
+      marked = (body.positions ?? []).flatMap((raw) => decodePosition(raw) ?? []);
+      button?.removeAttribute("data-error");
+      button?.setAttribute("title", button.getAttribute("aria-label") ?? "");
+    } catch (error) {
+      button?.setAttribute("data-error", "");
+      button?.setAttribute(
+        "title",
+        `not marked: ${error instanceof Error ? error.message : error}`,
+      );
+    }
+    render(options.current());
+  }
+
+  function toggle(): boolean {
+    void ask({
+      method: "POST",
+      headers: { "content-type": "application/json" },
+      body: encodePosition(options.current()),
+    });
+    return true;
+  }
+
+  button.addEventListener("click", () => toggle());
+  void ask();
+  return { toggle, render };
+}