@hajimism/dek 0.2.0 → 0.2.2

package/src/core/zip.ts

@@ -0,0 +1,77 @@
+/** One file of an archive: its path inside it, with `/` between folders, and its bytes. */
+export type ZipFile = { path: string; data: Uint8Array };
+
+/**
+ * A ZIP archive of `files`, in order, each stored as it is. What dek packs is pictures, already
+ * compressed, and a little XML, so deflating would buy little and cost a dependency or a
+ * compressor to keep. Paths are UTF-8, and the time is fixed, so the same files make the same
+ * bytes.
+ */
+export function zipStored(files: readonly ZipFile[]): Uint8Array {
+  const encoder = new TextEncoder();
+  const locals: Uint8Array[] = [];
+  const centrals: Uint8Array[] = [];
+  let offset = 0;
+  for (const file of files) {
+    const name = encoder.encode(file.path);
+    const crc = Bun.hash.crc32(file.data);
+    const size = file.data.length;
+
+    const local = new Uint8Array(30 + name.length);
+    const head = new DataView(local.buffer);
+    head.setUint32(0, 0x04034b50, true);
+    writeCommon(head, 4, { crc, size });
+    head.setUint16(26, name.length, true);
+    local.set(name, 30);
+    locals.push(local, file.data);
+
+    const central = new Uint8Array(46 + name.length);
+    const entry = new DataView(central.buffer);
+    entry.setUint32(0, 0x02014b50, true);
+    entry.setUint16(4, 20, true);
+    writeCommon(entry, 6, { crc, size });
+    entry.setUint16(28, name.length, true);
+    entry.setUint32(42, offset, true);
+    central.set(name, 46);
+    centrals.push(central);
+
+    offset += local.length + size;
+  }
+  const directorySize = centrals.reduce((sum, part) => sum + part.length, 0);
+  const end = new Uint8Array(22);
+  const tail = new DataView(end.buffer);
+  tail.setUint32(0, 0x06054b50, true);
+  tail.setUint16(8, files.length, true);
+  tail.setUint16(10, files.length, true);
+  tail.setUint32(12, directorySize, true);
+  tail.setUint32(16, offset, true);
+  return concat([...locals, ...centrals, end]);
+}
+
+/** 1980-01-01 00:00, the earliest time a ZIP can say. */
+const DOS_DATE = (0 << 9) | (1 << 5) | 1;
+
+/**
+ * What the local header and the central directory entry share, from the version needed on: no
+ * flags but UTF-8 names, stored, the fixed time, the CRC, and the size twice.
+ */
+function writeCommon(view: DataView, at: number, { crc, size }: { crc: number; size: number }) {
+  view.setUint16(at, 20, true);
+  view.setUint16(at + 2, 1 << 11, true);
+  view.setUint16(at + 4, 0, true);
+  view.setUint16(at + 6, 0, true);
+  view.setUint16(at + 8, DOS_DATE, true);
+  view.setUint32(at + 10, crc, true);
+  view.setUint32(at + 14, size, true);
+  view.setUint32(at + 18, size, true);
+}
+
+function concat(parts: readonly Uint8Array[]): Uint8Array {
+  const out = new Uint8Array(parts.reduce((sum, part) => sum + part.length, 0));
+  let at = 0;
+  for (const part of parts) {
+    out.set(part, at);
+    at += part.length;
+  }
+  return out;
+}

package/src/runtime/annotate-pick.ts

@@ -0,0 +1,144 @@
+/// <reference lib="dom" />
+// What annotate mode can point at: the elements of the slide on screen under the pointer, what
+// each is called, and where it is on the slide. Only elements the dev server stamped with where
+// they are written count, so every one can be named by its file and line.
+
+import { type Box, cutText } from "../core/annotation-rows.ts";
+import { deckStops, positionFromHash } from "../core/position.ts";
+import { type BeatRef, stepKey } from "../core/step.ts";
+
+/** The attribute the dev server writes on each start tag of a slide: `<line>:<column>`. */
+export const SOURCE_ATTR = "data-dek-source";
+
+/** The classes the dev server saw written on each stamped tag, before any script added more. */
+const CLASS_ATTR = "data-dek-class";
+
+type Point = { x: number; y: number };
+
+/**
+ * The points tried around the pointer: the pointer itself first, then rings out to a few pixels,
+ * so a line one pixel thick is found from beside it as well as on it.
+ */
+export function ringPoints(at: Point): Point[] {
+  const points = [at];
+  for (let radius = 1; radius <= 5; radius++) {
+    for (let step = 0; step < 8; step++) {
+      const angle = (step * Math.PI) / 4;
+      points.push({ x: at.x + radius * Math.cos(angle), y: at.y + radius * Math.sin(angle) });
+    }
+  }
+  return points;
+}
+
+/**
+ * The elements of `slide` that can be picked at `at`: what is under the pointer, then what is
+ * only near it, each before anything it is inside, and the slide itself last. A line beside the
+ * pointer so comes before the drawing it is in, which is under the pointer and easy to hit.
+ * `elementsAt` is the document's `elementsFromPoint`, every element at a point, topmost first.
+ */
+export function candidatesAt(
+  at: Point,
+  slide: Element,
+  elementsAt: (x: number, y: number) => readonly Element[],
+): Element[] {
+  const found: Element[] = [];
+  for (const point of ringPoints(at)) {
+    for (const el of elementsAt(point.x, point.y)) {
+      if (el === slide || found.includes(el) || !isCandidate(el, slide)) {
+        continue;
+      }
+      const outer = found.findIndex((other) => other.contains(el));
+      found.splice(outer < 0 ? found.length : outer, 0, el);
+    }
+  }
+  return isCandidate(slide, slide) ? [...found, slide] : found;
+}
+
+function isCandidate(el: Element, slide: Element): boolean {
+  return el.hasAttribute(SOURCE_ATTR) && slide.contains(el) && isShown(el, slide);
+}
+
+/** Whether `el` shows: neither it nor anything it is in on the slide is transparent or hidden. */
+function isShown(el: Element, slide: Element): boolean {
+  const view = el.ownerDocument.defaultView;
+  if (!view) {
+    return true;
+  }
+  if (view.getComputedStyle(el).visibility === "hidden") {
+    return false;
+  }
+  for (let node: Element | null = el; node; node = node.parentElement) {
+    if (view.getComputedStyle(node).opacity === "0") {
+      return false;
+    }
+    if (node === slide) {
+      break;
+    }
+  }
+  return true;
+}
+
+/**
+ * What a note says an element is: where it is written, its tag and its classes as written, and
+ * its text cut short. The classes the player or a slide script added since, such as
+ * `is-current`, are in no file to find. The slide's text is the whole slide, which names
+ * nothing, so it has none.
+ */
+export function describeElement(
+  el: Element,
+  slide: Element,
+): { source: string; name: string; text: string } {
+  const classes = (el.getAttribute(CLASS_ATTR) ?? "").split(" ").filter(Boolean);
+  return {
+    source: el.getAttribute(SOURCE_ATTR) ?? "",
+    name: [el.tagName.toLowerCase(), ...classes].join("."),
+    text: el === slide ? "" : cutText(el.textContent ?? ""),
+  };
+}
+
+/** Where `el` is on the slide, in the slide's own pixels, whatever the stage scales it to. */
+export function slideBox(el: Element, deck: HTMLElement): Box {
+  const scale = deckScale(deck);
+  const origin = deck.getBoundingClientRect();
+  const rect = el.getBoundingClientRect();
+  return {
+    x: Math.round((rect.left - origin.left) / scale),
+    y: Math.round((rect.top - origin.top) / scale),
+    width: Math.round(rect.width / scale),
+    height: Math.round(rect.height / scale),
+  };
+}
+
+/** A point in the window as a point on the slide, in the slide's own pixels. */
+export function slidePoint(at: Point, deck: HTMLElement): Point {
+  const scale = deckScale(deck);
+  const origin = deck.getBoundingClientRect();
+  return {
+    x: Math.round((at.x - origin.left) / scale),
+    y: Math.round((at.y - origin.top) / scale),
+  };
+}
+
+/** A point on the slide, in its own pixels, as a point in the window. */
+export function windowPoint(at: Point, deck: HTMLElement): Point {
+  const scale = deckScale(deck);
+  const origin = deck.getBoundingClientRect();
+  return { x: origin.left + at.x * scale, y: origin.top + at.y * scale };
+}
+
+function deckScale(deck: HTMLElement): number {
+  const width = deck.getBoundingClientRect().width;
+  return deck.offsetWidth > 0 && width > 0 ? width / deck.offsetWidth : 1;
+}
+
+/** The slide on screen and its beat, as the hash says and `dekc shot --step` takes it. */
+export function currentStop(
+  hash: string,
+  slides: ReadonlyArray<{ slug: string; beats: BeatRef[] }>,
+): { slideIndex: number; step: string } {
+  const pos = positionFromHash(hash, deckStops(slides));
+  return {
+    slideIndex: pos.slideIndex,
+    step: stepKey(slides[pos.slideIndex]?.beats ?? [], pos.beatIndex),
+  };
+}

package/src/runtime/annotate-place.ts

@@ -0,0 +1,46 @@
+// Where annotate mode's popup goes: beside what was picked, never over it, inside the window.
+
+type Rect = { left: number; top: number; right: number; bottom: number };
+type Size = { width: number; height: number };
+
+/** How far the popup keeps from what was picked and from the window's edges. */
+const GAP = 8;
+
+/**
+ * The popup's top left corner for a note on `picked`, the box around every element picked:
+ * under it, else above it, else to its right, else to its left, on the first side it fits on
+ * whole. Covering what the note is about would hide what the human is pointing at. When no side
+ * fits, it goes under, held inside the window.
+ */
+export function placePopup(
+  picked: Rect,
+  size: Size,
+  viewport: Size,
+): { left: number; top: number } {
+  const clampLeft = (left: number): number =>
+    Math.max(GAP, Math.min(left, viewport.width - size.width - GAP));
+  const clampTop = (top: number): number =>
+    Math.max(GAP, Math.min(top, viewport.height - size.height - GAP));
+  const fitsTop = (top: number): boolean =>
+    top >= GAP && top + size.height <= viewport.height - GAP;
+  const fitsLeft = (left: number): boolean =>
+    left >= GAP && left + size.width <= viewport.width - GAP;
+
+  const below = picked.bottom + GAP;
+  if (fitsTop(below)) {
+    return { left: clampLeft(picked.left), top: below };
+  }
+  const above = picked.top - GAP - size.height;
+  if (fitsTop(above)) {
+    return { left: clampLeft(picked.left), top: above };
+  }
+  const right = picked.right + GAP;
+  if (fitsLeft(right)) {
+    return { left: right, top: clampTop(picked.top) };
+  }
+  const left = picked.left - GAP - size.width;
+  if (fitsLeft(left)) {
+    return { left, top: clampTop(picked.top) };
+  }
+  return { left: clampLeft(picked.left), top: clampTop(below) };
+}