@swiftbrowser/web 0.3.1 → 0.4.0

package/src/dragDrop.ts

@@ -0,0 +1,549 @@
+/**
+ * Reordering list rows and dragging views (docs/ops-protocol.md,
+ * "Reordering rows" and "Drag and drop"). The pointer sessions that start
+ * these live in src/interaction.ts; this module does the DOM work:
+ *
+ * - `RowReorder`: a movable `listrow` lifted by its edit-mode grip (or a long
+ *   press) follows the pointer up and down among its movable neighbours,
+ *   which slide out of its way; letting go settles it into its slot and
+ *   sends `move` with the child index it goes before.
+ * - `ViewDrag`: a lifted `draggable` is copied and the copy follows the
+ *   pointer over the screen; the `dropdestination` under it hears `drop`
+ *   with `entered` / `exited`, and `performed` when the pointer lifts there.
+ * - `ExternalDrops`: text, links and files dragged in from outside the page
+ *   (the browser's own drag and drop) reach a `dropdestination` whose
+ *   `accepts` patterns match them, as `items`.
+ */
+
+import { base64Encode } from './base64';
+import type { LayoutNode } from './layout';
+import type { DropEvent, DropItem, ElementId, RendererEvent } from './protocol';
+
+/** Duration of the slide a lifted row or view settles with; keep in sync with styles.css. */
+export const DRAG_SETTLE_MS = 300;
+/** A pointer this close to a scroller's edge scrolls it while a row is lifted. */
+const AUTOSCROLL_EDGE = 40;
+/** Fastest autoscroll, in px per frame. */
+const AUTOSCROLL_MAX = 10;
+
+const ID_ATTR = 'sbId';
+
+export interface DragDropHost {
+  readonly root: HTMLElement;
+  send(event: RendererEvent): void;
+  nodeOf(id: ElementId): LayoutNode | undefined;
+}
+
+function idOf(el: Element | null): ElementId | null {
+  const id = Number((el as HTMLElement | null)?.dataset[ID_ATTR]);
+  return Number.isInteger(id) ? id : null;
+}
+
+/** The CSS scale the screen is drawn at (the device frame scales it on small windows). */
+function scaleOf(root: HTMLElement): number {
+  const rect = root.getBoundingClientRect();
+  return root.offsetWidth > 0 ? rect.width / root.offsetWidth : 1;
+}
+
+function round2(v: number): number {
+  return Math.round(v * 100) / 100;
+}
+
+// ---------------------------------------------------------------------------
+// Reordering rows
+// ---------------------------------------------------------------------------
+
+/**
+ * One movable `listrow` being dragged. Its neighbours are the contiguous
+ * run of movable rows around it in the same card (a section's rows, or the
+ * loose rows of the list): the row cannot leave its `ForEach`.
+ */
+export class RowReorder {
+  /** The run of movable rows, in DOM order; `from` is the dragged row's index in it. */
+  private readonly run: HTMLElement[];
+  private readonly from: number;
+  private readonly tops: number[];
+  private readonly heights: number[];
+  private readonly container: HTMLElement;
+  private readonly scroller: HTMLElement | null;
+  private readonly scrollTop0: number;
+  private readonly scale: number;
+  /** The dragged row's place among the others (0 ... run.length - 1). */
+  private slot: number;
+  private dy = 0;
+  private clientY = 0;
+  private autoscroll: number | null = null;
+  private settleTimer: number | null = null;
+  private finished = false;
+
+  constructor(readonly row: HTMLElement, readonly id: ElementId, private readonly host: DragDropHost) {
+    this.container = row.parentElement as HTMLElement;
+    const siblings = Array.from(this.container.children) as HTMLElement[];
+    const index = siblings.indexOf(row);
+    const movable = (el: HTMLElement): boolean => el.classList.contains('sb-listrow') && el.hasAttribute('data-sb-movable') && !el.hidden;
+    let start = index;
+    while (start > 0 && movable(siblings[start - 1]!)) start -= 1;
+    let end = index;
+    while (end + 1 < siblings.length && movable(siblings[end + 1]!)) end += 1;
+    this.run = siblings.slice(start, end + 1);
+    this.from = index - start;
+    this.slot = this.from;
+    this.tops = this.run.map((el) => el.offsetTop);
+    this.heights = this.run.map((el) => el.offsetHeight);
+    this.scroller = row.closest<HTMLElement>('.sb-list');
+    this.scrollTop0 = this.scroller?.scrollTop ?? 0;
+    this.scale = scaleOf(host.root);
+  }
+
+  /** Lift the row: above its neighbours, with a shadow, following the pointer from now on. */
+  start(clientY: number): void {
+    this.clientY = clientY;
+    this.container.dataset['sbReordering'] = '';
+    this.row.dataset['sbLifting'] = '';
+    for (const el of this.run) el.style.transition = el === this.row ? 'none' : '';
+    this.apply();
+  }
+
+  /** The pointer moved `dy` px (client units) since the lift. */
+  move(dy: number, clientY: number): void {
+    if (this.finished) return;
+    this.dy = dy / this.scale;
+    this.clientY = clientY;
+    this.apply();
+    this.updateAutoscroll();
+  }
+
+  /** The pointer lifted: settle into the slot, then tell Swift (if the row moved). */
+  end(): void {
+    this.finish(this.slot);
+  }
+
+  /** The browser took the pointer: settle back where the row came from. */
+  cancel(): void {
+    this.finish(this.from);
+  }
+
+  /** Where the row is drawn now (its box offset by the drag), relative to the list origin. */
+  private get draggedCenter(): number {
+    const scrolled = (this.scroller?.scrollTop ?? 0) - this.scrollTop0;
+    return this.tops[this.from]! + this.heights[this.from]! / 2 + this.dy + scrolled;
+  }
+
+  private apply(): void {
+    const scrolled = (this.scroller?.scrollTop ?? 0) - this.scrollTop0;
+    this.row.style.transform = `translateY(${round2(this.dy + scrolled)}px)`;
+    // The others, in order: the slot is how many of them the dragged row is below.
+    const center = this.draggedCenter;
+    const others = this.run.filter((_, i) => i !== this.from);
+    let slot = 0;
+    for (let j = 0; j < others.length; j++) {
+      const i = j < this.from ? j : j + 1;
+      if (this.tops[i]! + this.heights[i]! / 2 < center) slot = j + 1;
+    }
+    this.slot = slot;
+    const height = this.heights[this.from]!;
+    others.forEach((el, j) => {
+      const i = j < this.from ? j : j + 1;
+      const shift = i < this.from && j >= slot ? height : i > this.from && j < slot ? -height : 0;
+      el.style.transform = shift === 0 ? '' : `translateY(${shift}px)`;
+    });
+  }
+
+  private updateAutoscroll(): void {
+    const scroller = this.scroller;
+    if (!scroller) return;
+    const rect = scroller.getBoundingClientRect();
+    const fromTop = this.clientY - rect.top;
+    const fromBottom = rect.bottom - this.clientY;
+    let speed = 0;
+    if (fromTop < AUTOSCROLL_EDGE * this.scale) speed = -AUTOSCROLL_MAX * (1 - Math.max(0, fromTop) / (AUTOSCROLL_EDGE * this.scale));
+    else if (fromBottom < AUTOSCROLL_EDGE * this.scale) speed = AUTOSCROLL_MAX * (1 - Math.max(0, fromBottom) / (AUTOSCROLL_EDGE * this.scale));
+    if (speed === 0) {
+      this.stopAutoscroll();
+      return;
+    }
+    if (this.autoscroll !== null) return;
+    const step = (): void => {
+      if (this.finished) return;
+      const before = scroller.scrollTop;
+      scroller.scrollTop += speed;
+      if (scroller.scrollTop === before) {
+        this.stopAutoscroll();
+        return;
+      }
+      this.apply();
+      this.autoscroll = requestAnimationFrame(step);
+    };
+    this.autoscroll = requestAnimationFrame(step);
+  }
+
+  private stopAutoscroll(): void {
+    if (this.autoscroll !== null) cancelAnimationFrame(this.autoscroll);
+    this.autoscroll = null;
+  }
+
+  /** The row's top once it sits at `slot`, with the others moved aside (relative to the list origin). */
+  private settledTop(slot: number): number {
+    if (slot === this.from) return this.tops[this.from]!;
+    // Above its old place: it takes the top of the other now below it, which
+    // is the run's row `slot`. Below: it sits under the other above it, the
+    // run's row `slot` too (the others' index `slot - 1`, past the dragged
+    // row), which has moved up by the dragged row's height.
+    if (slot < this.from) return this.tops[slot]!;
+    return this.tops[slot]! + this.heights[slot]! - this.heights[this.from]!;
+  }
+
+  private finish(slot: number): void {
+    if (this.finished) return;
+    this.finished = true;
+    this.stopAutoscroll();
+    this.slot = slot;
+    // Slide the others to their places for this slot and the row into it.
+    const scrolled = (this.scroller?.scrollTop ?? 0) - this.scrollTop0;
+    this.row.style.transition = '';
+    this.row.dataset['sbSettling'] = '';
+    const height = this.heights[this.from]!;
+    this.run.forEach((el, i) => {
+      if (i === this.from) return;
+      const j = i < this.from ? i : i - 1;
+      const shift = i < this.from && j >= slot ? height : i > this.from && j < slot ? -height : 0;
+      el.style.transform = shift === 0 ? '' : `translateY(${shift}px)`;
+    });
+    const target = this.settledTop(slot) - this.tops[this.from]!;
+    const current = this.dy + scrolled;
+    this.row.style.transform = `translateY(${round2(target)}px)`;
+    const moved = slot !== this.from;
+    const done = (): void => {
+      this.settleTimer = null;
+      for (const el of this.run) {
+        el.style.transform = '';
+        el.style.transition = '';
+      }
+      delete this.row.dataset['sbLifting'];
+      delete this.row.dataset['sbSettling'];
+      delete this.container.dataset['sbReordering'];
+      if (moved) {
+        const to = this.destination(slot);
+        if (to !== null) this.host.send({ type: 'move', id: this.id, to });
+      }
+    };
+    // Nothing to slide: finish now, so the move reaches Swift within the gesture.
+    if (Math.abs(target - current) < 0.5) done();
+    else this.settleTimer = window.setTimeout(done, DRAG_SETTLE_MS);
+  }
+
+  /**
+   * `move.to`: the index, among the container element's protocol children,
+   * of the row the dragged row now goes before (or the child count when it
+   * goes last), counted in the order before the move.
+   */
+  private destination(slot: number): number | null {
+    const slotEl = this.container;
+    const containerEl = slotEl.closest<HTMLElement>('.sb-section, .sb-list');
+    const containerId = idOf(containerEl);
+    if (containerId === null) return null;
+    const children = this.host.nodeOf(containerId)?.children ?? [];
+    // The row now sits after `slot` others: the next one in the old order
+    // (skipping itself) is what it goes before.
+    const others = this.run.filter((_, i) => i !== this.from);
+    const next = others[slot] ?? null;
+    if (next === null) {
+      // After the run's last row: before whatever followed the run, else last.
+      const last = this.run[this.run.length - 1]!;
+      const following = last === this.row ? this.run[this.run.length - 2] ?? null : last;
+      const afterRun = (following ?? this.row).nextElementSibling;
+      const afterId = idOf(afterRun);
+      if (afterId === null) return children.length;
+      const index = children.findIndex((child) => child.id === afterId);
+      return index < 0 ? children.length : index;
+    }
+    const nextId = idOf(next);
+    if (nextId === null) return null;
+    const index = children.findIndex((child) => child.id === nextId);
+    return index < 0 ? null : index;
+  }
+
+  /** Whether the row is still sliding into place (the `move` is yet to go out). */
+  get settling(): boolean {
+    return this.settleTimer !== null;
+  }
+}
+
+// ---------------------------------------------------------------------------
+// Dragging views
+// ---------------------------------------------------------------------------
+
+/**
+ * A lifted `draggable`: a copy of its element follows the pointer above
+ * everything else (the original dims), and the `dropdestination` under the
+ * pointer is told as the copy enters, leaves and drops.
+ */
+export class ViewDrag {
+  private readonly preview: HTMLElement;
+  private readonly origin: { left: number; top: number };
+  private readonly scale: number;
+  private target: HTMLElement | null = null;
+  private finished = false;
+
+  constructor(readonly el: HTMLElement, readonly id: ElementId, private readonly host: DragDropHost) {
+    this.scale = scaleOf(host.root);
+    const rootRect = host.root.getBoundingClientRect();
+    const rect = el.getBoundingClientRect();
+    this.origin = { left: (rect.left - rootRect.left) / this.scale, top: (rect.top - rootRect.top) / this.scale };
+    const preview = el.cloneNode(true) as HTMLElement;
+    // The copy is not an element of the tree: nothing may find it by id.
+    for (const node of [preview, ...Array.from(preview.querySelectorAll<HTMLElement>('[data-sb-id]'))]) {
+      delete node.dataset[ID_ATTR];
+      node.removeAttribute('data-sb-kind');
+    }
+    preview.classList.add('sb-drag-preview');
+    preview.style.position = 'absolute';
+    preview.style.left = `${round2(this.origin.left)}px`;
+    preview.style.top = `${round2(this.origin.top)}px`;
+    preview.style.width = `${round2(rect.width / this.scale)}px`;
+    preview.style.height = `${round2(rect.height / this.scale)}px`;
+    preview.style.margin = '0';
+    this.preview = preview;
+  }
+
+  /** Lift: the copy appears over the original, which dims; Swift makes the payload. */
+  start(): void {
+    this.host.root.append(this.preview);
+    this.el.dataset['sbDragging'] = '';
+    this.host.root.dataset['sbDragging'] = '';
+    this.host.send({ type: 'dragstart', id: this.id });
+  }
+
+  move(dx: number, dy: number, clientX: number, clientY: number): void {
+    if (this.finished) return;
+    this.preview.style.transform = `translate(${round2(dx / this.scale)}px, ${round2(dy / this.scale)}px)`;
+    this.retarget(this.destinationAt(clientX, clientY));
+  }
+
+  /** The pointer lifted: drop on the destination under it, or fly back. */
+  end(clientX: number, clientY: number): void {
+    if (this.finished) return;
+    this.finished = true;
+    const target = this.destinationAt(clientX, clientY);
+    this.retarget(target);
+    if (target) {
+      const id = idOf(target);
+      const rect = target.getBoundingClientRect();
+      if (id !== null) {
+        this.host.send({
+          type: 'drop',
+          id,
+          phase: 'performed',
+          source: this.id,
+          x: round2((clientX - rect.left) / this.scale),
+          y: round2((clientY - rect.top) / this.scale),
+        });
+      }
+      delete target.dataset['sbTargeted'];
+      this.preview.remove();
+      this.release();
+      return;
+    }
+    this.flyBack();
+  }
+
+  /** The browser took the pointer: the copy flies back, nothing is dropped. */
+  cancel(): void {
+    if (this.finished) return;
+    this.finished = true;
+    this.retarget(null);
+    this.flyBack();
+  }
+
+  private release(): void {
+    delete this.el.dataset['sbDragging'];
+    delete this.host.root.dataset['sbDragging'];
+    this.host.send({ type: 'dragend', id: this.id });
+  }
+
+  private flyBack(): void {
+    const preview = this.preview;
+    preview.dataset['sbSettling'] = '';
+    preview.style.transform = '';
+    window.setTimeout(() => {
+      preview.remove();
+      this.release();
+    }, DRAG_SETTLE_MS);
+  }
+
+  /** The `dropdestination` under the point (the copy lets the pointer through). */
+  private destinationAt(clientX: number, clientY: number): HTMLElement | null {
+    const under = document.elementFromPoint(clientX, clientY);
+    const destination = under?.closest<HTMLElement>('.sb-dropdestination') ?? null;
+    return destination && this.host.root.contains(destination) ? destination : null;
+  }
+
+  private retarget(target: HTMLElement | null): void {
+    if (target === this.target) return;
+    if (this.target) {
+      delete this.target.dataset['sbTargeted'];
+      this.notify(this.target, 'exited');
+    }
+    this.target = target;
+    if (target) {
+      target.dataset['sbTargeted'] = '';
+      this.notify(target, 'entered');
+    }
+  }
+
+  private notify(target: HTMLElement, phase: 'entered' | 'exited'): void {
+    const id = idOf(target);
+    if (id !== null) this.host.send({ type: 'drop', id, phase, source: this.id, x: 0, y: 0 });
+  }
+}
+
+// ---------------------------------------------------------------------------
+// Drops from outside the page
+// ---------------------------------------------------------------------------
+
+/** Whether a MIME type matches one of a destination's `accepts` patterns. */
+export function acceptsType(patterns: readonly string[], type: string): boolean {
+  const mime = type.split(';')[0]!.trim().toLowerCase() || 'application/octet-stream';
+  return patterns.some((pattern) => {
+    const p = pattern.toLowerCase();
+    if (p === '*/*') return true;
+    if (p.endsWith('/*')) return mime.startsWith(p.slice(0, -1));
+    return mime === p;
+  });
+}
+
+/** The MIME types a browser drag offers: its string items' types, and its files' (kind `file`). */
+function offeredTypes(transfer: DataTransfer): string[] {
+  const types: string[] = [];
+  for (const item of Array.from(transfer.items ?? [])) {
+    types.push(item.kind === 'file' ? item.type || 'application/octet-stream' : item.type);
+  }
+  if (types.length === 0) types.push(...Array.from(transfer.types));
+  return types;
+}
+
+function patternsOf(destination: HTMLElement): string[] {
+  return (destination.dataset['sbAccepts'] ?? '').split(' ').filter((p) => p.length > 0);
+}
+
+/**
+ * The browser's drag and drop into the screen: a `dropdestination` whose
+ * `accepts` match what is dragged hears `entered` / `exited` as the drag
+ * passes, and `performed` with the `items` when it drops. Dropping anywhere
+ * on the screen never navigates the page away.
+ */
+export class ExternalDrops {
+  private target: HTMLElement | null = null;
+
+  constructor(private readonly host: DragDropHost) {
+    const root = host.root;
+    root.addEventListener('dragenter', this.onDragOver);
+    root.addEventListener('dragover', this.onDragOver);
+    root.addEventListener('dragleave', this.onDragLeave);
+    root.addEventListener('drop', this.onDrop);
+  }
+
+  dispose(): void {
+    const root = this.host.root;
+    root.removeEventListener('dragenter', this.onDragOver);
+    root.removeEventListener('dragover', this.onDragOver);
+    root.removeEventListener('dragleave', this.onDragLeave);
+    root.removeEventListener('drop', this.onDrop);
+  }
+
+  /** The destination under `target` that takes what the drag carries. */
+  private destinationFor(target: EventTarget | null, transfer: DataTransfer | null): HTMLElement | null {
+    const destination = (target as Element | null)?.closest?.<HTMLElement>('.sb-dropdestination') ?? null;
+    if (!destination || !transfer || !this.host.root.contains(destination)) return null;
+    const patterns = patternsOf(destination);
+    return offeredTypes(transfer).some((type) => acceptsType(patterns, type)) ? destination : null;
+  }
+
+  private readonly onDragOver = (event: DragEvent): void => {
+    // A drag the page itself started (a `draggable` lifts through pointer
+    // events, not the browser's) never comes this way.
+    const destination = this.destinationFor(event.target, event.dataTransfer);
+    this.retarget(destination);
+    if (destination) {
+      event.preventDefault();
+      if (event.dataTransfer) event.dataTransfer.dropEffect = 'copy';
+    }
+  };
+
+  private readonly onDragLeave = (event: DragEvent): void => {
+    const to = event.relatedTarget as Node | null;
+    if (!to || !this.host.root.contains(to)) this.retarget(null);
+  };
+
+  private readonly onDrop = (event: DragEvent): void => {
+    // Never let the browser open a dropped file in place of the app.
+    event.preventDefault();
+    const destination = this.destinationFor(event.target, event.dataTransfer);
+    const transfer = event.dataTransfer;
+    this.retarget(null);
+    if (!destination || !transfer) return;
+    const id = idOf(destination);
+    if (id === null) return;
+    const rect = destination.getBoundingClientRect();
+    const scale = scaleOf(this.host.root);
+    const point = { x: round2((event.clientX - rect.left) / scale), y: round2((event.clientY - rect.top) / scale) };
+    const patterns = patternsOf(destination);
+    void readItems(transfer, patterns).then((items) => {
+      if (items.length === 0) return;
+      const drop: DropEvent = { type: 'drop', id, phase: 'performed', items, x: point.x, y: point.y };
+      this.host.send(drop);
+    });
+  };
+
+  private retarget(target: HTMLElement | null): void {
+    if (target === this.target) return;
+    if (this.target) {
+      delete this.target.dataset['sbTargeted'];
+      this.notify(this.target, 'exited');
+    }
+    this.target = target;
+    if (target) {
+      target.dataset['sbTargeted'] = '';
+      this.notify(target, 'entered');
+    }
+  }
+
+  private notify(target: HTMLElement, phase: 'entered' | 'exited'): void {
+    const id = idOf(target);
+    if (id !== null) this.host.send({ type: 'drop', id, phase, x: 0, y: 0 });
+  }
+}
+
+/** The drag's items the patterns accept: strings as text, files as base64 bytes. */
+export async function readItems(transfer: DataTransfer, patterns: readonly string[]): Promise<DropItem[]> {
+  const reads: Promise<DropItem | null>[] = [];
+  const items = Array.from(transfer.items ?? []);
+  if (items.length > 0) {
+    for (const item of items) {
+      if (item.kind === 'file') {
+        const file = item.getAsFile();
+        const type = file?.type || 'application/octet-stream';
+        if (!file || !acceptsType(patterns, type)) continue;
+        reads.push(readFile(file, type));
+      } else if (item.kind === 'string' && (item.type === 'text/plain' || item.type === 'text/uri-list') && acceptsType(patterns, item.type)) {
+        const type = item.type;
+        reads.push(new Promise((resolve) => item.getAsString((text) => resolve({ type, text }))));
+      }
+    }
+  } else {
+    // Without `items` (an older browser, a synthetic transfer): the strings only.
+    for (const type of ['text/plain', 'text/uri-list']) {
+      const text = transfer.getData(type);
+      if (text && acceptsType(patterns, type)) reads.push(Promise.resolve({ type, text }));
+    }
+  }
+  const results = await Promise.all(reads);
+  return results.filter((item): item is DropItem => item !== null);
+}
+
+function readFile(file: File, type: string): Promise<DropItem | null> {
+  return file
+    .arrayBuffer()
+    .then((buffer) => ({ type, name: file.name, data: base64Encode(new Uint8Array(buffer)) }))
+    .catch(() => null);
+}

package/src/hostContent.ts

@@ -0,0 +1,37 @@
+/**
+ * `host` elements: a box the page fills with its own DOM. The producer of the
+ * ops (a React tree through @swiftbrowser/react's `Host`, or any page script)
+ * registers an element under a key and emits `{ kind: "host", props: {
+ * content: key, sizing } }`; the renderer adopts the element into the host's
+ * box and the layout engine measures it (src/layout, `measureHost`). When
+ * the content changes size on its own, `notifyHostContentChange` asks the
+ * renderer to lay the tree out again. DOM-free apart from the element type,
+ * so the registry can be imported by headless code.
+ */
+
+const contents = new Map<string, HTMLElement>();
+const listeners = new Set<(key: string) => void>();
+
+export function registerHostContent(key: string, element: HTMLElement): void {
+  contents.set(key, element);
+}
+
+export function unregisterHostContent(key: string): void {
+  contents.delete(key);
+}
+
+export function hostContent(key: string): HTMLElement | undefined {
+  return contents.get(key);
+}
+
+/** Called with the key whose content changed (its size, most often); returns the unsubscribe. */
+export function onHostContentChange(listener: (key: string) => void): () => void {
+  listeners.add(listener);
+  return () => {
+    listeners.delete(listener);
+  };
+}
+
+export function notifyHostContentChange(key: string): void {
+  for (const listener of listeners) listener(key);
+}