@swiftbrowser/web 0.17.7 → 0.18.0

package/src/interaction.ts

@@ -35,6 +35,12 @@
  * directly for pull to refresh (the browser cancels the pointer once it
  * scrolls the list).
  *
+ * A gesture's `mode` changes its place in the order (src/gestureComposition.ts):
+ * `highPriority` is asked before the wrappers inside it, and `simultaneous`
+ * never claims: it begins when its own distance is met and receives every
+ * move beside the owner, whoever that turns out to be, so a canvas can track
+ * a finger its items are also dragging.
+ *
  * Two more candidates lift something (src/dragDrop.ts does the DOM work):
  * a movable `listrow` (by its edit-mode grip from the pointer down, or by a
  * long press when the list is not editing) is reordered among its
@@ -44,9 +50,10 @@
  */
 
 import { RowReorder, ViewDrag } from './dragDrop';
+import { isSimultaneous, placeWrapper } from './gestureComposition';
 import type { LayoutNode } from './layout';
 import { symbolOf, textOf, tintOf, unwrapStyledNode } from './nodeQueries';
-import type { DragEvent, ElementId, RendererEvent } from './protocol';
+import type { DragEvent, ElementId, GestureCoordinateSpace, GestureMode, RendererEvent } from './protocol';
 import { colorToCSS } from './styles';
 import {
   SWIPE_ACTION_WIDTH,
@@ -136,17 +143,27 @@ interface SwipeHost {
   actions: Record<SwipeEdge, ActionSpec[]>;
 }
 
+interface GestureCandidate {
+  kind: 'gesture';
+  el: HTMLElement;
+  id: ElementId;
+  drag: boolean;
+  longPress: boolean;
+  minDistance: number;
+  minDuration: number;
+  /** `.highPriorityGesture` / `.simultaneousGesture`; absent for `.gesture`. */
+  mode?: GestureMode;
+  /** The space of the drag's `location` and `startLocation`. */
+  space: GestureCoordinateSpace;
+  /** The element's box when the drag began (locations are relative to it). */
+  rect: DOMRect | null;
+  /** A simultaneous gesture that has begun (it runs beside the owner). */
+  active: boolean;
+}
+
 type Candidate =
   | { kind: 'swipeback'; screen: HTMLElement; below: HTMLElement | null; id: ElementId; width: number }
-  | {
-      kind: 'gesture';
-      el: HTMLElement;
-      id: ElementId;
-      drag: boolean;
-      longPress: boolean;
-      minDistance: number;
-      minDuration: number;
-    }
+  | GestureCandidate
   | { kind: 'contextmenu'; el: HTMLElement; id: ElementId }
   | { kind: 'swipe'; host: SwipeHost }
   | { kind: 'sheet'; sheet: HTMLElement; card: HTMLElement; id: ElementId }
@@ -165,15 +182,18 @@ interface Session {
   samples: Sample[];
   candidates: Candidate[];
   claimed: Candidate | null;
+  /** The simultaneous gestures running beside the owner (or alone, before any claim). */
+  along: GestureCandidate[];
+  /** The root's box, for `global` drag locations. */
+  rootRect: DOMRect | null;
   /** A long press fired: the session ignores further motion. */
   done: boolean;
   suppressClick: boolean;
   longPressTimer: number | null;
   /** The pointer went down on a pushed screen's edge strip (touch): a plain tap is forwarded. */
   edgeStrip: HTMLElement | null;
-  // gesture drag
-  gestureRect: DOMRect | null;
-  pendingDrag: DragEvent | null;
+  // gesture drag (one per gesture: the owner's and the simultaneous ones')
+  pendingDrag: Map<ElementId, DragEvent> | null;
   raf: number | null;
   // swipe row
   swipeStart: number;
@@ -322,11 +342,12 @@ export class InteractionController {
       samples: [{ t: event.timeStamp, x: event.clientX, y: event.clientY }],
       candidates,
       claimed: null,
+      along: [],
+      rootRect: null,
       done: false,
       suppressClick: false,
       longPressTimer: null,
       edgeStrip,
-      gestureRect: null,
       pendingDrag: null,
       raf: null,
       swipeStart: 0,
@@ -353,8 +374,12 @@ export class InteractionController {
       session.longPressTimer = window.setTimeout(() => this.fireLongPress(session, presser), duration);
     }
     // An immediate drag gesture (`minimumDistance: 0`) and a row's grip own the pointer from the start.
-    const immediate = candidates.find((c) => (c.kind === 'gesture' && c.drag && c.minDistance <= 0) || (c.kind === 'reorder' && c.immediate));
-    if (immediate && candidates[0] === immediate) this.claim(session, immediate, event.pointerId);
+    const immediate = candidates.find((c) => (c.kind === 'gesture' && c.drag && c.minDistance <= 0 && !isSimultaneous(c)) || (c.kind === 'reorder' && c.immediate));
+    if (immediate && candidates.find((c) => !isSimultaneous(c)) === immediate) this.claim(session, immediate, event.pointerId);
+    // An immediate simultaneous gesture begins beside whatever else there is.
+    for (const c of candidates) {
+      if (c.kind === 'gesture' && isSimultaneous(c) && c.drag && c.minDistance <= 0) this.beginAlong(session, c);
+    }
   };
 
   /** A lifted row or view moves with the finger: the list under it must not scroll. */
@@ -378,12 +403,16 @@ export class InteractionController {
       window.clearTimeout(session.longPressTimer);
       session.longPressTimer = null;
     }
+    // A simultaneous gesture begins once its own distance is met, claiming nothing.
+    for (const c of session.candidates) {
+      if (c.kind === 'gesture' && isSimultaneous(c) && !c.active && this.wants(c, dx, dy, distance)) this.beginAlong(session, c);
+    }
     if (!session.claimed) {
-      const owner = session.candidates.find((c) => this.wants(c, dx, dy, distance));
-      if (!owner) return;
-      this.claim(session, owner, event.pointerId);
+      const owner = session.candidates.find((c) => !isSimultaneous(c) && this.wants(c, dx, dy, distance));
+      if (owner) this.claim(session, owner, event.pointerId);
     }
     if (session.claimed) this.move(session, session.claimed, dx, dy);
+    for (const c of session.along) this.move(session, c, dx, dy);
   };
 
   private readonly onPointerUp = (event: PointerEvent): void => {
@@ -412,10 +441,20 @@ export class InteractionController {
     const dx = session.x - session.startX;
     const dy = session.y - session.startY;
     const velocity = velocityFrom(session.samples);
+    for (const c of session.along) {
+      if (cancelled) this.cancel(session, c, dx, dy);
+      else this.end(session, c, dx, dy, velocity);
+    }
     if (session.claimed) {
       if (cancelled) this.cancel(session, session.claimed, dx, dy);
       else this.end(session, session.claimed, dx, dy, velocity);
       session.suppressClick = true;
+    } else if (!cancelled && !session.done && this.tapImmediateGesture(session)) {
+      session.suppressClick = true;
+    } else if (session.along.length > 0 && Math.hypot(dx, dy) >= LONG_PRESS_SLOP) {
+      // A simultaneous gesture alone leaves a tap to the taps under it (as
+      // SwiftUI's tap and simultaneous drag both fire); a real drag was no tap.
+      session.suppressClick = true;
     } else if (!cancelled && session.edgeStrip && Math.hypot(dx, dy) < LONG_PRESS_SLOP && !session.done) {
       // A plain tap on the (touch-only) edge strip goes to whatever is under it.
       this.forwardTap(session.edgeStrip, session.x, session.y);
@@ -424,6 +463,21 @@ export class InteractionController {
     if (session.suppressClick) suppressNextClick();
   }
 
+  /**
+   * A tap that nothing claimed still reaches an immediate drag gesture
+   * (`minimumDistance: 0`) under it, as `began` then `ended`: a back swipe's
+   * edge, first in line there, keeps the gesture from claiming at the
+   * pointer down, but on iOS the edge pan only begins with motion.
+   */
+  private tapImmediateGesture(session: Session): boolean {
+    if (session.candidates[0]?.kind !== 'swipeback') return false;
+    const gesture = session.candidates.find((c): c is GestureCandidate => c.kind === 'gesture' && c.drag && c.minDistance <= 0 && !isSimultaneous(c));
+    if (!gesture) return false;
+    this.claim(session, gesture, session.pointerId);
+    this.end(session, gesture, session.x - session.startX, session.y - session.startY, { x: 0, y: 0 });
+    return true;
+  }
+
   private detachWindow(): void {
     window.removeEventListener('pointermove', this.onPointerMove);
     window.removeEventListener('pointerup', this.onPointerUp);
@@ -453,6 +507,7 @@ export class InteractionController {
     }
     // A horizontal scroll view takes horizontal motion from the rows around it.
     let inHorizontalScroller = false;
+    const wrapperStart = out.length;
     for (let el: HTMLElement | null = target; el && el !== this.host.root; el = el.parentElement) {
       const id = Number(el.dataset[ID_ATTR]);
       if (isHorizontalScroller(el)) inHorizontalScroller = true;
@@ -464,7 +519,21 @@ export class InteractionController {
         if (!drag && !longPress) continue;
         const minDistance = typeof props['minimumDistance'] === 'number' ? Math.max(0, props['minimumDistance']) : DRAG_MIN_DISTANCE;
         const minDuration = typeof props['minimumDuration'] === 'number' ? Math.max(0, props['minimumDuration']) * 1000 : LONG_PRESS_MS;
-        out.push({ kind: 'gesture', el, id, drag, longPress, minDistance, minDuration });
+        const mode = props['mode'];
+        const candidate: GestureCandidate = {
+          kind: 'gesture',
+          el,
+          id,
+          drag,
+          longPress,
+          minDistance,
+          minDuration,
+          space: props['coordinateSpace'] === 'global' ? 'global' : 'local',
+          rect: null,
+          active: false,
+        };
+        if (mode === 'highPriority' || mode === 'simultaneous') candidate.mode = mode;
+        placeWrapper(out, candidate, wrapperStart);
       } else if (el.classList.contains('sb-contextmenu') && Number.isInteger(id)) {
         out.push({ kind: 'contextmenu', el, id });
       } else if (el.classList.contains('sb-draggable') && Number.isInteger(id)) {
@@ -533,9 +602,19 @@ export class InteractionController {
     }
   }
 
+  /** A simultaneous gesture begins: `began` goes out and it hears every move until the pointer lifts. */
+  private beginAlong(session: Session, c: GestureCandidate): void {
+    c.active = true;
+    c.rect = c.el.getBoundingClientRect();
+    session.rootRect ??= this.host.root.getBoundingClientRect();
+    session.along.push(c);
+    this.host.send(this.dragEvent(session, c, 'began', { x: 0, y: 0 }));
+  }
+
   private claim(session: Session, c: Candidate, pointerId: number): void {
     session.claimed = c;
-    session.candidates = [c];
+    // The simultaneous gestures stay: those running keep hearing the pointer, the others may still begin.
+    session.candidates = [c, ...session.candidates.filter((other) => other !== c && isSimultaneous(other))];
     if (session.longPressTimer !== null) {
       window.clearTimeout(session.longPressTimer);
       session.longPressTimer = null;
@@ -548,7 +627,8 @@ export class InteractionController {
     }
     switch (c.kind) {
       case 'gesture': {
-        session.gestureRect = c.el.getBoundingClientRect();
+        c.rect = c.el.getBoundingClientRect();
+        session.rootRect ??= this.host.root.getBoundingClientRect();
         this.host.send(this.dragEvent(session, c, 'began', { x: 0, y: 0 }));
         break;
       }
@@ -610,14 +690,14 @@ export class InteractionController {
   private move(session: Session, c: Candidate, dx: number, dy: number): void {
     switch (c.kind) {
       case 'gesture': {
-        // Coalesced: the latest position goes out once per animation frame.
-        session.pendingDrag = this.dragEvent(session, c, 'changed', { x: 0, y: 0 });
+        // Coalesced: the latest position goes out once per animation frame (one per gesture).
+        (session.pendingDrag ??= new Map()).set(c.id, this.dragEvent(session, c, 'changed', { x: 0, y: 0 }));
         if (session.raf === null) {
           session.raf = requestAnimationFrame(() => {
             session.raf = null;
             const pending = session.pendingDrag;
             session.pendingDrag = null;
-            if (pending && this.session === session) this.host.send(pending);
+            if (pending && this.session === session) for (const event of pending.values()) this.host.send(event);
           });
         }
         return;
@@ -754,8 +834,9 @@ export class InteractionController {
     return reorder !== null && reorder.settling && reorder.row.parentElement === row.parentElement;
   }
 
-  private dragEvent(session: Session, c: Extract<Candidate, { kind: 'gesture' }>, phase: DragEvent['phase'], velocity: { x: number; y: number }): DragEvent {
-    const rect = session.gestureRect ?? c.el.getBoundingClientRect();
+  /** The event for `c` at the pointer's position, its locations in the gesture's space (the element's box, or the root's). */
+  private dragEvent(session: Session, c: GestureCandidate, phase: DragEvent['phase'], velocity: { x: number; y: number }): DragEvent {
+    const rect = c.space === 'global' ? (session.rootRect ??= this.host.root.getBoundingClientRect()) : (c.rect ??= c.el.getBoundingClientRect());
     return {
       type: 'drag',
       id: c.id,