@swiftbrowser/web 0.1.0 → 0.2.0

package/src/richText.ts

@@ -0,0 +1,65 @@
+/**
+ * Rich text on the page (a `text` with `runs`; docs/ops-protocol.md, "Rich
+ * text"). The renderer turns each run into a template when the props arrive:
+ * a `span` carrying the run's color, lines, kerning, baseline offset and link,
+ * or the `image` element of an inline image. The layout pass then draws the
+ * engine's lines out of them: a block per line, the height the engine gave
+ * it, holding a clone of its run's span (with the run's font) per text
+ * fragment and the image elements themselves.
+ */
+
+import type { RichTextLayout } from './layout';
+import { bitmapLaidOut } from './bitmaps';
+
+/** The templates of a rich text's runs, by its element. */
+export const runTemplates = new WeakMap<HTMLElement, HTMLElement[]>();
+
+/** What a text element last drew, to skip redrawing the same lines. */
+const drawn = new WeakMap<HTMLElement, { templates: HTMLElement[]; key: string }>();
+
+/** Draws the engine's lines of a rich text into its element. */
+export function drawRichText(el: HTMLElement, rich: RichTextLayout): void {
+  const templates = runTemplates.get(el) ?? [];
+  const key = JSON.stringify([rich.lines, rich.heights, rich.fonts.map((font) => font.css)]);
+  const last = drawn.get(el);
+  if (last && last.templates === templates && last.key === key) return;
+  drawn.set(el, { templates, key });
+  const doc = el.ownerDocument;
+  const rows = rich.lines.map((line, index) => {
+    const row = doc.createElement('span');
+    row.className = 'sb-text-line';
+    const height = `${rich.heights[index] ?? 0}px`;
+    row.style.height = height;
+    row.style.lineHeight = height;
+    for (const fragment of line) {
+      const template = templates[fragment.run];
+      if (fragment.text === undefined) {
+        // The image element itself: an image run is never split.
+        if (!template) continue;
+        const s = template.style;
+        s.width = `${fragment.width}px`;
+        s.height = `${fragment.height ?? 0}px`;
+        // A symbol's glyph is sized by its run's font.
+        const font = rich.fonts[fragment.run];
+        if (font) s.fontSize = `${font.size}px`;
+        row.append(template);
+        bitmapLaidOut(template, fragment.width, fragment.height ?? 0);
+        continue;
+      }
+      const span = (template?.cloneNode(false) as HTMLElement | undefined) ?? doc.createElement('span');
+      const font = rich.fonts[fragment.run];
+      if (font) span.style.font = font.css;
+      // Every fragment shares the line's baseline (its height is the tallest run's).
+      span.style.lineHeight = 'inherit';
+      span.textContent = fragment.text;
+      row.append(span);
+    }
+    return row;
+  });
+  el.replaceChildren(...rows);
+}
+
+/** Forget what the element drew (it shows plain text now). */
+export function clearRichText(el: HTMLElement): void {
+  drawn.delete(el);
+}

package/src/scanner.ts

@@ -0,0 +1,234 @@
+/**
+ * The page side of AVFoundation's capture sessions (docs/ops-protocol.md,
+ * "Code scanning"). Where the browser has `BarcodeDetector` and a camera
+ * (Chrome on Android and macOS, today), `scan` opens the camera full screen
+ * over the page and answers with the first code it reads and the frame it
+ * read it in. Elsewhere, or when there is no camera, it asks the viewer to
+ * type or paste the code; a refused camera fails.
+ */
+
+import type { ScannerRequestParams } from './protocol';
+
+/** A code the camera read (corners in video pixels), or one the viewer typed (no corners). */
+export interface ScannedCode {
+  string: string;
+  format: string;
+  corners: { x: number; y: number }[];
+  /** The camera frame the code was read in, a base64 JPEG. */
+  image?: string;
+}
+
+export type ScannerResult = { camera: boolean } | ScannedCode | { cancelled: true };
+
+export interface ScanOptions {
+  torch: boolean;
+  vibrate: boolean;
+  facing: 'environment' | 'user';
+}
+
+/** The browser's camera and barcode detection; tests substitute them. */
+export interface ScannerHost {
+  /** Whether there is a camera and a detector for at least one of `formats`. */
+  available(formats: readonly string[]): Promise<boolean>;
+  /**
+   * Shows the camera (or asks for a typed code) until a code of `formats` is
+   * found (resolves with it) or the viewer closes it (null). Rejects with
+   * `permission: …` when the camera is refused.
+   */
+  scan(formats: readonly string[], options: ScanOptions): Promise<ScannedCode | null>;
+}
+
+export async function performScanner(params: ScannerRequestParams, host: ScannerHost | undefined): Promise<ScannerResult> {
+  switch (params.action) {
+    case 'probe':
+      return { camera: (await host?.available(params.formats).catch(() => false)) ?? false };
+    case 'scan': {
+      if (!host) throw new Error('unsupported: this page cannot scan codes');
+      const options: ScanOptions = { torch: params.torch ?? false, vibrate: params.vibrate ?? false, facing: params.facing ?? 'environment' };
+      const code = await host.scan(params.formats, options);
+      return code ?? { cancelled: true };
+    }
+    default:
+      throw new Error(`unsupported: scanner action ${String((params as { action: unknown }).action)}`);
+  }
+}
+
+interface DetectedBarcode {
+  rawValue: string;
+  format: string;
+  cornerPoints: { x: number; y: number }[];
+}
+
+interface BarcodeDetectorLike {
+  detect(source: HTMLVideoElement): Promise<DetectedBarcode[]>;
+}
+
+interface BarcodeDetectorClass {
+  new (options: { formats: string[] }): BarcodeDetectorLike;
+  getSupportedFormats(): Promise<string[]>;
+}
+
+/** The camera with `BarcodeDetector` where the browser has both, else a typed code; nothing outside a browser. */
+export function browserScannerHost(): ScannerHost | undefined {
+  if (typeof window === 'undefined' || typeof document === 'undefined') return undefined;
+  const Detector = (window as unknown as { BarcodeDetector?: BarcodeDetectorClass }).BarcodeDetector;
+  const canCapture = typeof navigator.mediaDevices?.getUserMedia === 'function';
+  const supported = async (formats: readonly string[]): Promise<string[]> => {
+    if (!Detector) return [];
+    const known = await Detector.getSupportedFormats();
+    return formats.filter((format) => known.includes(format));
+  };
+  return {
+    available: async (formats) => {
+      if (!canCapture || (await supported(formats)).length === 0) return false;
+      const devices = await navigator.mediaDevices.enumerateDevices();
+      return devices.some((device) => device.kind === 'videoinput');
+    },
+    scan: async (formats, options) => {
+      const readable = await supported(formats);
+      if (!Detector || !canCapture || readable.length === 0) return typedCode(formats);
+      let stream: MediaStream;
+      try {
+        stream = await navigator.mediaDevices.getUserMedia({ video: { facingMode: options.facing }, audio: false });
+      } catch (error) {
+        const name = error instanceof Error ? error.name : '';
+        const message = error instanceof Error ? error.message : String(error);
+        if (name === 'NotAllowedError' || name === 'SecurityError') throw new Error(`permission: ${message}`);
+        // No camera after all (or one that would not start): the viewer types the code.
+        return typedCode(formats);
+      }
+      const detector = new Detector({ formats: readable });
+      if (options.torch) {
+        const [track] = stream.getVideoTracks();
+        await track?.applyConstraints({ advanced: [{ torch: true } as MediaTrackConstraintSet] }).catch(() => undefined);
+      }
+      return cameraOverlay(stream, detector, options.vibrate);
+    },
+  };
+}
+
+const OVERLAY_STYLE = 'position:fixed;inset:0;z-index:2147483647;display:flex;align-items:center;justify-content:center';
+const FONT = '-apple-system,system-ui,sans-serif';
+
+function pillButton(label: string, primary: boolean): HTMLButtonElement {
+  const button = document.createElement('button');
+  button.type = 'button';
+  button.textContent = label;
+  button.style.cssText = `padding:12px 28px;border:0;border-radius:999px;font:600 17px ${FONT};color:#fff;background:${
+    primary ? '#007aff' : 'rgba(255,255,255,.25)'
+  };backdrop-filter:blur(12px)`;
+  return button;
+}
+
+/** The video's current frame as a base64 JPEG (no prefix); undefined when it cannot be read. */
+function frameJPEG(video: HTMLVideoElement): string | undefined {
+  try {
+    const canvas = document.createElement('canvas');
+    canvas.width = video.videoWidth;
+    canvas.height = video.videoHeight;
+    if (canvas.width === 0 || canvas.height === 0) return undefined;
+    canvas.getContext('2d')?.drawImage(video, 0, 0);
+    return canvas.toDataURL('image/jpeg', 0.85).split(',')[1];
+  } catch {
+    return undefined;
+  }
+}
+
+/** The camera full screen with a viewfinder and a Cancel button, polling the detector. */
+function cameraOverlay(stream: MediaStream, detector: BarcodeDetectorLike, vibrate: boolean): Promise<ScannedCode | null> {
+  const overlay = document.createElement('div');
+  overlay.dataset['sbScanner'] = 'camera';
+  overlay.style.cssText = `${OVERLAY_STYLE};background:#000`;
+  const video = document.createElement('video');
+  video.muted = true;
+  video.playsInline = true;
+  video.autoplay = true;
+  video.srcObject = stream;
+  video.style.cssText = 'position:absolute;inset:0;width:100%;height:100%;object-fit:cover';
+  const finder = document.createElement('div');
+  finder.style.cssText = 'position:relative;width:min(70vw,70vh);aspect-ratio:1;border:3px solid rgba(255,255,255,.9);border-radius:24px;box-shadow:0 0 0 100vmax rgba(0,0,0,.35)';
+  const cancel = pillButton('Cancel', false);
+  cancel.style.cssText += ';position:absolute;bottom:calc(env(safe-area-inset-bottom) + 32px);left:50%;transform:translateX(-50%)';
+  overlay.append(video, finder, cancel);
+  document.body.append(overlay);
+  void video.play().catch(() => undefined);
+
+  return new Promise((resolve) => {
+    let done = false;
+    const finish = (code: ScannedCode | null): void => {
+      if (done) return;
+      done = true;
+      for (const track of stream.getTracks()) track.stop();
+      overlay.remove();
+      resolve(code);
+    };
+    cancel.addEventListener('click', () => finish(null));
+    const tick = async (): Promise<void> => {
+      if (done) return;
+      if (video.readyState >= 2) {
+        try {
+          const [found] = await detector.detect(video);
+          if (found) {
+            if (vibrate) navigator.vibrate?.(100);
+            const image = frameJPEG(video);
+            finish({
+              string: found.rawValue,
+              format: found.format,
+              corners: found.cornerPoints.map(({ x, y }) => ({ x, y })),
+              ...(image ? { image } : {}),
+            });
+            return;
+          }
+        } catch {
+          // A frame the detector could not read; try the next one.
+        }
+      }
+      setTimeout(() => void tick(), 120);
+    };
+    void tick();
+  });
+}
+
+/** Where the browser cannot read codes: a dialog over the page asking for the code's contents. */
+export function typedCode(formats: readonly string[]): Promise<ScannedCode | null> {
+  const overlay = document.createElement('div');
+  overlay.dataset['sbScanner'] = 'typed';
+  overlay.style.cssText = `${OVERLAY_STYLE};background:rgba(0,0,0,.6);padding:16px`;
+  const panel = document.createElement('form');
+  panel.style.cssText = `width:min(420px,100%);display:flex;flex-direction:column;gap:12px;padding:20px;border-radius:20px;background:#1c1c1e;color:#fff;font:15px ${FONT}`;
+  const title = document.createElement('h2');
+  title.textContent = 'Enter a Code';
+  title.style.cssText = 'margin:0;font-size:20px;font-weight:600';
+  const note = document.createElement('p');
+  note.textContent = "This browser can't read codes with the camera. Type or paste what the code holds.";
+  note.style.cssText = 'margin:0;color:rgba(255,255,255,.7)';
+  const field = document.createElement('textarea');
+  field.rows = 3;
+  field.setAttribute('aria-label', 'Code contents');
+  field.style.cssText = `resize:vertical;padding:10px;border-radius:10px;border:1px solid rgba(255,255,255,.2);background:#2c2c2e;color:#fff;font:15px ${FONT}`;
+  const buttons = document.createElement('div');
+  buttons.style.cssText = 'display:flex;gap:12px;justify-content:flex-end';
+  const cancel = pillButton('Cancel', false);
+  const done = pillButton('Done', true);
+  done.type = 'submit';
+  buttons.append(cancel, done);
+  panel.append(title, note, field, buttons);
+  overlay.append(panel);
+  document.body.append(overlay);
+  field.focus();
+
+  return new Promise((resolve) => {
+    const finish = (code: ScannedCode | null): void => {
+      overlay.remove();
+      resolve(code);
+    };
+    cancel.addEventListener('click', () => finish(null));
+    panel.addEventListener('submit', (event) => {
+      event.preventDefault();
+      // Line breaks are kept: a QR code holds several lines as often as one.
+      const string = field.value.replace(/\r\n/g, '\n');
+      if (string.length === 0) return;
+      finish({ string, format: formats[0] ?? 'qr_code', corners: [] });
+    });
+  });
+}

package/src/scrollTo.ts

@@ -0,0 +1,123 @@
+/**
+ * `ScrollViewProxy.scrollTo(_:anchor:)` (docs/ops-protocol.md, "Scrolling to
+ * a view"). Swift marks the target's `styled` box with `scrollTo` in exactly
+ * one pass; after laying that pass out the renderer calls `scrollToTarget`,
+ * which scrolls every scrolling ancestor (`scrollview`, `list`) along its
+ * axes so the target's anchor point meets the same point of the visible
+ * area, or, with no anchor, as little as makes the target visible.
+ *
+ * Geometry comes from the layout result, whose frames are screen
+ * coordinates with every scroll view at offset 0, so the wanted offset is a
+ * difference of frames and independent of where the views are scrolled now
+ * (and of any CSS scaling of the device frame).
+ */
+
+import type { LayoutNode, LayoutResult, Rect } from './layout';
+import type { ScrollToCommand, UnitPoint } from './protocol';
+
+/** One axis of a target and a viewport (start and length), in the same coordinates. */
+export interface AxisSpan {
+  start: number;
+  length: number;
+}
+
+/**
+ * The scroll offset on one axis that puts the target where the command
+ * wants it: `anchor` (0 = start, 1 = end) aligns that fraction of the target
+ * with the same fraction of the viewport; `null` keeps `current` when the
+ * target is fully visible, else aligns the nearer edge (the start when the
+ * target is longer than the viewport). Never negative; the browser clamps
+ * the far end.
+ */
+export function scrollOffset(target: AxisSpan, viewport: AxisSpan, anchor: number | null, current: number): number {
+  const top = target.start - viewport.start;
+  let offset: number;
+  if (anchor !== null) {
+    offset = top - anchor * (viewport.length - target.length);
+  } else if (top < current || target.length > viewport.length) {
+    offset = top;
+  } else if (top + target.length > current + viewport.length) {
+    offset = top + target.length - viewport.length;
+  } else {
+    offset = current;
+  }
+  return Math.max(0, offset);
+}
+
+/** What `scrollToTarget` needs from the renderer. */
+export interface ScrollContext {
+  nodes: Map<number, LayoutNode>;
+  parents: Map<number, number>;
+  elements: Map<number, HTMLElement>;
+}
+
+function anchorOf(command: ScrollToCommand | undefined): UnitPoint | null {
+  const anchor = command?.anchor;
+  if (!anchor || typeof anchor.x !== 'number' || typeof anchor.y !== 'number') return null;
+  return { x: anchor.x, y: anchor.y };
+}
+
+/** The axes a scrolling element scrolls on, or null for anything else. */
+function scrollAxes(node: LayoutNode): { horizontal: boolean; vertical: boolean } | null {
+  if (node.kind === 'list') return { horizontal: false, vertical: true };
+  if (node.kind !== 'scrollview') return null;
+  const axes = node.props['axes'];
+  return { horizontal: axes === 'horizontal' || axes === 'both', vertical: axes !== 'horizontal' };
+}
+
+/**
+ * Scroll the scrolling ancestors of element `id` to it. Each axis is
+ * scrolled by the nearest ancestor that scrolls on it; the visible area of
+ * a scroll view a tab bar covers ends at the bar (chrome `bottomInset`).
+ * Returns how many scroll positions it set (for tests).
+ */
+export function scrollToTarget(
+  ctx: ScrollContext,
+  result: LayoutResult,
+  id: number,
+  command: ScrollToCommand | undefined,
+  smooth: boolean,
+): number {
+  // A list row's box is the whole row, not its content.
+  const target = result.chrome.get(id)?.['row'] ?? result.frames.get(id);
+  if (!target) return 0;
+  const anchor = anchorOf(command);
+  let horizontalDone = false;
+  let verticalDone = false;
+  let scrolled = 0;
+  for (let at = ctx.parents.get(id); at !== undefined && at !== 0; at = ctx.parents.get(at)) {
+    const node = ctx.nodes.get(at);
+    const el = ctx.elements.get(at);
+    const frame = result.frames.get(at);
+    if (!node || !el || !frame) continue;
+    const axes = scrollAxes(node);
+    if (!axes) continue;
+    const viewport: Rect = { ...frame };
+    const covered = result.chrome.get(at)?.['bottomInset'];
+    if (covered) viewport.height = Math.max(0, covered.y - frame.y);
+    let left = el.scrollLeft;
+    let top = el.scrollTop;
+    let changed = false;
+    if (axes.horizontal && !horizontalDone) {
+      left = scrollOffset({ start: target.x, length: target.width }, { start: viewport.x, length: viewport.width }, anchor?.x ?? null, el.scrollLeft);
+      horizontalDone = true;
+      changed = true;
+    }
+    if (axes.vertical && !verticalDone) {
+      top = scrollOffset({ start: target.y, length: target.height }, { start: viewport.y, length: viewport.height }, anchor?.y ?? null, el.scrollTop);
+      verticalDone = true;
+      changed = true;
+    }
+    if (changed) {
+      if (smooth && typeof el.scrollTo === 'function') {
+        el.scrollTo({ left, top, behavior: 'smooth' });
+      } else {
+        el.scrollLeft = left;
+        el.scrollTop = top;
+      }
+      scrolled += 1;
+    }
+    if (horizontalDone && verticalDone) break;
+  }
+  return scrolled;
+}