@swiftbrowser/web 0.9.11 → 0.9.12

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@swiftbrowser/web",
-  "version": "0.9.11",
+  "version": "0.9.12",
   "type": "module",
   "description": "SwiftBrowser web renderer and dev server: applies render ops from a Swift/Wasm app to the DOM inside an iPhone frame.",
   "repository": {

package/src/renderer.ts

@@ -1808,10 +1808,19 @@ export class Renderer {
       .map((id) => ({ id, command: (this.nodes.get(id)?.props as Partial<StyledProps> | undefined)?.style?.scrollTo }))
       .filter((entry): entry is { id: ElementId; command: ScrollToCommand } => entry.command !== undefined)
       .sort((a, b) => a.command.serial - b.command.serial);
+    // A page a finger set running gives way to the app's commands; a drag in progress carries on across them.
+    const fresh = commands.some(({ command }) => command.serial > this.scrollSerial);
+    if (fresh) this.touchPaging.beforeScrollCommands();
     for (const { id, command } of commands) {
       if (command.serial <= this.scrollSerial) continue;
       scrollToTarget(this, result, id, command, animated);
+      // The scroll views it moved report their position afresh when they next settle, even one they
+      // reported last: the app set its binding itself, and where the view rests may not be it.
+      for (let scroller = this.elements.get(id)?.parentElement?.closest<HTMLElement>('.sb-scrollview, .sb-list'); scroller; scroller = scroller.parentElement?.closest<HTMLElement>('.sb-scrollview, .sb-list') ?? null) {
+        this.reportedPositions.delete(scroller);
+      }
     }
+    if (fresh) this.touchPaging.afterScrollCommands();
     for (const { command } of commands) this.scrollSerial = Math.max(this.scrollSerial, command.serial);
   }
 

package/src/styles.css

@@ -751,6 +751,17 @@ svg[data-sb-symbol="progress.indicator"] > line:nth-child(8) { animation-delay:
   touch-action: pan-x pinch-zoom;
 }
 
+/* Nothing inside widens the pans the browser may make along the paging axis:
+   a button's `manipulation` would let Safari pan the view itself under a
+   quick swipe that starts on it. */
+.sb-scrollview[data-sb-snap="paging"][data-sb-axes="horizontal"] * {
+  touch-action: pan-y pinch-zoom;
+}
+
+.sb-scrollview[data-sb-snap="paging"][data-sb-axes="vertical"] * {
+  touch-action: pan-x pinch-zoom;
+}
+
 .sb-scroll-content,
 .sb-list-content {
   position: relative;

package/src/touchPaging.ts

@@ -18,8 +18,14 @@ export const FLICK_VELOCITY = 0.3;
 export const FLICK_WINDOW_MS = 100;
 /** How far a flick carries on inside a page longer than the viewport (its velocity times this). */
 export const FLICK_RUN_MS = 250;
-/** A touch is a drag once it moved this far; the larger axis then decides whose gesture it is. */
-export const DIRECTION_SLOP = 6;
+/**
+ * A touch is a drag once it moved this far; the larger axis of that first
+ * move decides whose gesture it is. Small, and under Safari's own threshold
+ * for starting a pan: a move left to the browser lets it begin a pan, after
+ * which it cancels the touch for the page, and a drag of ours would end in
+ * a run from wherever the finger was.
+ */
+export const DIRECTION_SLOP = 3;
 
 /** Where a scroll view may rest for one page: at its start, or anywhere a page longer than the viewport fills it (`start === end` for a page the viewport's size). */
 export interface RestInterval {
@@ -120,19 +126,37 @@ interface Gesture {
   /** The finger position (along the axis) where our drag took over. */
   fromPos: number;
   samples: TouchSample[];
+  /** The page under the leading edge as of the last move, to find again after the app's scroll commands. */
+  page: Page | null;
 }
 
 interface Run {
   el: HTMLElement;
   frame: number;
-  /** The offset the last frame wrote: another writer moving the view ends the run. */
-  written: number;
+}
+
+/** Where a drag was when the app's scroll commands began: the offset, and the page under it to find again after. */
+interface Held {
+  el: HTMLElement;
+  offset: number;
+  page: Page | null;
 }
 
 const PAGING_SELECTOR = '.sb-scrollview[data-sb-snap="paging"]';
 
+export interface Page {
+  element: Element;
+  start: number;
+  length: number;
+}
+
+/** The page whose extent holds `offset` (the leading edge), if any. */
+function pageAt(el: HTMLElement, horizontal: boolean, offset: number): Page | null {
+  return pagesOf(el, horizontal).find((p) => p.start <= offset + 1 && offset < p.start + p.length) ?? null;
+}
+
 /** Pages of a paging scroll view in scroll coordinates along its axis: the children of its `scrollTargetLayout` stack, else of its content. */
-export function pagesOf(el: HTMLElement, horizontal: boolean): { start: number; length: number }[] {
+export function pagesOf(el: HTMLElement, horizontal: boolean): Page[] {
   const targets = [...el.querySelectorAll<HTMLElement>('[data-sb-scroll-target] > *')].filter((t) => t.parentElement?.closest('.sb-scrollview, .sb-list') === el);
   const children = targets.length > 0 ? targets : [...((el.firstElementChild?.children ?? []) as Iterable<Element>)];
   const box = el.getBoundingClientRect();
@@ -141,13 +165,14 @@ export function pagesOf(el: HTMLElement, horizontal: boolean): { start: number;
   const offset = horizontal ? el.scrollLeft : el.scrollTop;
   return children.map((child) => {
     const rect = child.getBoundingClientRect();
-    return horizontal ? { start: rect.left - box.left - padding + offset, length: rect.width } : { start: rect.top - box.top - padding + offset, length: rect.height };
+    return horizontal ? { element: child, start: rect.left - box.left - padding + offset, length: rect.width } : { element: child, start: rect.top - box.top - padding + offset, length: rect.height };
   });
 }
 
 export class TouchPaging {
   private gesture: Gesture | null = null;
   private run: Run | null = null;
+  private held: Held | null = null;
 
   /**
    * `onRest(el)`: the view came to rest on a page after a gesture of ours
@@ -159,7 +184,9 @@ export class TouchPaging {
     private readonly onRest: (el: HTMLElement) => void = () => {},
   ) {
     root.addEventListener('touchstart', this.onTouchStart, { passive: true });
-    root.addEventListener('touchmove', this.onTouchMove, { passive: true });
+    // Not passive: a drag of ours cancels the browser's own handling of the moves (Safari pans a
+    // scroll view under a finger whatever `touch-action` says, and the two would fight over it).
+    root.addEventListener('touchmove', this.onTouchMove, { passive: false });
     root.addEventListener('touchend', this.onTouchEnd, { passive: true });
     root.addEventListener('touchcancel', this.onTouchEnd, { passive: true });
   }
@@ -169,6 +196,67 @@ export class TouchPaging {
     return (this.gesture?.el === el && this.gesture.ours === true) || this.run?.el === el;
   }
 
+  /**
+   * The app is about to scroll (`scrollTo` commands): a run still going
+   * gives way to them, and a drag in progress notes where the view is and
+   * which page is under the finger, to carry on from there once the
+   * commands are done (`afterScrollCommands`).
+   */
+  beforeScrollCommands(): void {
+    const run = this.run;
+    if (run) {
+      this.stopRun();
+      this.onRest(run.el);
+    }
+    const g = this.gesture;
+    this.held = null;
+    if (!g?.ours) return;
+    // The page as of the drag's last move: the commands' pass has already changed the tree by now.
+    this.held = { el: g.el, offset: g.horizontal ? g.el.scrollLeft : g.el.scrollTop, page: g.page };
+  }
+
+  /**
+   * The app's scroll commands are done. A drag in progress keeps the
+   * content under the finger where it was: an app re-centring its pages
+   * on the one arrived at moves the content a page and scrolls the same
+   * page, which the command's own offset would show aligned, dropping the
+   * drag so far. The page's new places reach the DOM on the next frame
+   * (the renderer commits its layout then), so the drag carries on from
+   * them at the next frame or the next move, whichever comes first.
+   */
+  afterScrollCommands(): void {
+    const held = this.held;
+    if (!held) return;
+    const g = this.gesture;
+    if (!g?.ours || g.el !== held.el) {
+      this.held = null;
+      return;
+    }
+    requestAnimationFrame(() => this.carryOn());
+  }
+
+  /**
+   * The page that was under the finger is found again and the offset
+   * moved by what it moved; without it (a page that is gone), the drag
+   * carries on from the offset the commands set.
+   */
+  private carryOn(): void {
+    const held = this.held;
+    this.held = null;
+    const g = this.gesture;
+    if (!held || !g?.ours || g.el !== held.el) return;
+    const now = g.horizontal ? g.el.scrollLeft : g.el.scrollTop;
+    const page = held.page ? pagesOf(g.el, g.horizontal).find((p) => p.element === held.page!.element) : undefined;
+    const shift = page ? page.start - held.page!.start : now - held.offset;
+    g.from += shift;
+    if (page) {
+      const max = g.horizontal ? g.el.scrollWidth - g.el.clientWidth : g.el.scrollHeight - g.el.clientHeight;
+      const offset = Math.min(max, Math.max(0, held.offset + shift));
+      if (g.horizontal) g.el.scrollLeft = offset;
+      else g.el.scrollTop = offset;
+    }
+  }
+
   dispose(): void {
     this.root.removeEventListener('touchstart', this.onTouchStart);
     this.root.removeEventListener('touchmove', this.onTouchMove);
@@ -186,7 +274,7 @@ export class TouchPaging {
     const axes = el.dataset['sbAxes'];
     if (axes !== 'horizontal' && axes !== 'vertical') return;
     const horizontal = axes === 'horizontal';
-    this.gesture = { el, horizontal, startX: touch.clientX, startY: touch.clientY, ours: null, from: 0, fromPos: 0, samples: [] };
+    this.gesture = { el, horizontal, startX: touch.clientX, startY: touch.clientY, ours: null, from: 0, fromPos: 0, samples: [], page: null };
     // A finger on a page still running to its place catches it: the drag is
     // ours from here, and the lift runs it on to a page.
     if (this.run?.el === el) {
@@ -202,6 +290,7 @@ export class TouchPaging {
     const g = this.gesture;
     const touch = event.touches[0];
     if (!g || !touch) return;
+    if (this.held) this.carryOn();
     const pos = g.horizontal ? touch.clientX : touch.clientY;
     if (g.ours === null) {
       const dx = touch.clientX - g.startX;
@@ -218,10 +307,12 @@ export class TouchPaging {
       g.from = g.horizontal ? g.el.scrollLeft : g.el.scrollTop;
       g.fromPos = pos;
     }
+    if (event.cancelable) event.preventDefault();
     const max = g.horizontal ? g.el.scrollWidth - g.el.clientWidth : g.el.scrollHeight - g.el.clientHeight;
     const offset = Math.min(max, Math.max(0, g.from - (pos - g.fromPos)));
     if (g.horizontal) g.el.scrollLeft = offset;
     else g.el.scrollTop = offset;
+    g.page = pageAt(g.el, g.horizontal, offset);
     g.samples.push({ t: event.timeStamp, pos });
     if (g.samples.length > 20) g.samples.shift();
   };
@@ -230,6 +321,7 @@ export class TouchPaging {
     const g = this.gesture;
     if (!g) return;
     if (event.touches.length > 0) return;
+    if (this.held) this.carryOn();
     this.gesture = null;
     if (!g.ours) return;
     const el = g.el;
@@ -253,15 +345,10 @@ export class TouchPaging {
     }
     const duration = runDuration(distance);
     const started = performance.now();
+    // The run writes the offset every frame and the last write is the page itself, whatever
+    // else moved the view meanwhile (the offset Safari reads back can trail a write); only an
+    // app's own scroll command ends it early (`interrupt`).
     const step = (now: number): void => {
-      const run = this.run;
-      const current = horizontal ? el.scrollLeft : el.scrollTop;
-      // Another writer moved the view (an app re-centring on the page): the run is over.
-      if (run && Math.abs(current - run.written) > 1) {
-        this.stopRun();
-        this.onRest(el);
-        return;
-      }
       const t = (now - started) / duration;
       const offset = t >= 1 ? to : from + distance * easeOut(t);
       if (horizontal) el.scrollLeft = offset;
@@ -272,9 +359,9 @@ export class TouchPaging {
         this.onRest(el);
         return;
       }
-      this.run = { el, frame: requestAnimationFrame(step), written: offset };
+      this.run = { el, frame: requestAnimationFrame(step) };
     };
-    this.run = { el, frame: requestAnimationFrame(step), written: from };
+    this.run = { el, frame: requestAnimationFrame(step) };
   }
 
   private stopRun(): void {