@swiftbrowser/web 0.26.6 → 0.26.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@swiftbrowser/web",
-  "version": "0.26.6",
+  "version": "0.26.7",
   "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/pointerEffects.ts

@@ -1,43 +1,70 @@
 /**
  * What a page with a mouse adds to a phone's UI: `hover` events (`.onHover`),
- * tooltips (`.help`), cursors (`.pointerStyle`), and SF Symbols' effects
- * (`.symbolEffect`) drawn with CSS. The Swift shim draws an iPhone and sends
- * none of these; producers in the page (@swiftbrowser/react) do.
+ * `continuoushover` events (`.onContinuousHover`: where the mouse is as it
+ * moves), tooltips (`.help`), cursors (`.pointerStyle`), and SF Symbols'
+ * effects (`.symbolEffect`) drawn with CSS. The Swift shim draws an iPhone
+ * and sends none of these; producers in the page (@swiftbrowser/react) do.
  */
 
-import type { ElementId, Style, SymbolEffectStyle } from './protocol';
+import type { ContinuousHoverEvent, ElementId, HoverEvent, Style, SymbolEffectStyle } from './protocol';
 
 // ---------------------------------------------------------------------------
 // Hover
 // ---------------------------------------------------------------------------
 
 const HOVER_ATTR = 'sbHover';
+const CONTINUOUS_HOVER_ATTR = 'sbContinuousHover';
 
-/** Sends `hover` as a mouse enters and leaves the boxes marked `data-sb-hover` under `root`. */
+/**
+ * Sends `hover` as a mouse enters and leaves the boxes marked `data-sb-hover`
+ * under `root`, and `continuoushover` as it moves over the boxes marked
+ * `data-sb-continuous-hover` (its value the space of the location: the box's
+ * own, or the root's), one per animation frame per box, then `ended` as it
+ * leaves each.
+ */
 export class HoverTracker {
   private readonly hovered = new Set<HTMLElement>();
+  /** The boxes the mouse is over that follow it, with the location to send at the next frame. */
+  private readonly followed = new Map<HTMLElement, { x: number; y: number } | null>();
+  private frame: number | null = null;
 
   constructor(
     private readonly root: HTMLElement,
-    private readonly send: (id: ElementId, value: boolean) => void,
+    private readonly send: (event: HoverEvent | ContinuousHoverEvent) => void,
   ) {
     root.addEventListener('pointerover', this.onOver);
     root.addEventListener('pointerout', this.onOut);
+    root.addEventListener('pointermove', this.onMove);
   }
 
   dispose(): void {
     this.root.removeEventListener('pointerover', this.onOver);
     this.root.removeEventListener('pointerout', this.onOut);
+    this.root.removeEventListener('pointermove', this.onMove);
     this.hovered.clear();
+    this.followed.clear();
+    if (this.frame !== null) cancelAnimationFrame(this.frame);
+    this.frame = null;
   }
 
   private readonly onOver = (event: PointerEvent): void => {
     if (event.pointerType === 'touch') return;
     for (let el = event.target as HTMLElement | null; el && el !== this.root; el = el.parentElement) {
-      if (el.dataset[HOVER_ATTR] === undefined || this.hovered.has(el)) continue;
-      this.hovered.add(el);
-      this.report(el, true);
+      if (el.dataset[HOVER_ATTR] !== undefined && !this.hovered.has(el)) {
+        this.hovered.add(el);
+        this.report(el, true);
+      }
+      if (el.dataset[CONTINUOUS_HOVER_ATTR] !== undefined && !this.followed.has(el)) this.followed.set(el, this.locationIn(el, event));
+    }
+    if (this.followed.size) this.schedule();
+  };
+
+  private readonly onMove = (event: PointerEvent): void => {
+    if (event.pointerType === 'touch' || !this.followed.size) return;
+    for (let el = event.target as HTMLElement | null; el && el !== this.root; el = el.parentElement) {
+      if (this.followed.has(el)) this.followed.set(el, this.locationIn(el, event));
     }
+    this.schedule();
   };
 
   private readonly onOut = (event: PointerEvent): void => {
@@ -48,11 +75,42 @@ export class HoverTracker {
       this.hovered.delete(el);
       this.report(el, false);
     }
+    for (const el of [...this.followed.keys()]) {
+      if (next && el.contains(next)) continue;
+      this.followed.delete(el);
+      const id = this.idOf(el);
+      if (id !== null) this.send({ type: 'continuoushover', id, phase: 'ended' });
+    }
   };
 
-  private report(el: HTMLElement, value: boolean): void {
+  /** Where the mouse is, in the box's own coordinates or the root's, as the box's style asks. */
+  private locationIn(el: HTMLElement, event: PointerEvent): { x: number; y: number } {
+    const rect = (el.dataset[CONTINUOUS_HOVER_ATTR] === 'global' ? this.root : el).getBoundingClientRect();
+    return { x: Math.round((event.clientX - rect.left) * 100) / 100, y: Math.round((event.clientY - rect.top) * 100) / 100 };
+  }
+
+  /** The followed boxes' locations go out at the next frame, however many moves came in. */
+  private schedule(): void {
+    if (this.frame !== null) return;
+    this.frame = requestAnimationFrame(() => {
+      this.frame = null;
+      for (const [el, location] of this.followed) {
+        if (!location) continue;
+        this.followed.set(el, null);
+        const id = this.idOf(el);
+        if (id !== null) this.send({ type: 'continuoushover', id, phase: 'active', location });
+      }
+    });
+  }
+
+  private idOf(el: HTMLElement): ElementId | null {
     const id = Number(el.dataset['sbId']);
-    if (Number.isInteger(id) && el.isConnected) this.send(id, value);
+    return Number.isInteger(id) && el.isConnected ? id : null;
+  }
+
+  private report(el: HTMLElement, value: boolean): void {
+    const id = this.idOf(el);
+    if (id !== null) this.send({ type: 'hover', id, value });
   }
 }
 
@@ -87,6 +145,8 @@ const triggers = new WeakMap<HTMLElement, number>();
 /** Apply the pointer and effect fields of a `styled` element's style (called on create and update). */
 export function applyPointerAndEffects(el: HTMLElement, style: Style): void {
   if (style.hover) el.dataset[HOVER_ATTR] = '';
+  if (style.continuousHover) el.dataset[CONTINUOUS_HOVER_ATTR] = style.continuousHover;
+  else delete el.dataset[CONTINUOUS_HOVER_ATTR];
   if (style.help) {
     el.title = style.help;
     el.dataset['sbHelp'] = '';

package/src/protocol.ts

@@ -1593,6 +1593,7 @@ export type RendererEvent =
   | LazyEvent
   | MenuEvent
   | HoverEvent
+  | ContinuousHoverEvent
   // Scroll geometry and animation completion (the block at the end of this file)
   | ScrollGeometryEvent
   | AnimationCompleteEvent
@@ -2694,6 +2695,13 @@ export interface SymbolEffectStyle {
 export interface Style {
   /** The page sends `hover` events as a mouse enters and leaves the box (`.onHover`). */
   hover?: boolean;
+  /**
+   * `.onContinuousHover(coordinateSpace:)`: the page sends `continuoushover`
+   * events as a mouse moves over the box, its location in the box's own
+   * coordinates (`local`) or the root's, scrolling included (`global`, the
+   * same a `reportsFrame` geometry event reports), and once as it leaves.
+   */
+  continuousHover?: 'local' | 'global';
   /** `.help(_:)`: a tooltip on the box. */
   help?: string;
   /** `.pointerStyle(_:)`: the CSS cursor over the box (`pointer`, `text`, `grab`…). */
@@ -2735,6 +2743,13 @@ export interface HoverEvent {
   value: boolean;
 }
 
+/**
+ * A mouse (or pen) over a box whose style has `continuousHover`: `active`
+ * with where it is, coalesced to one per animation frame while it moves,
+ * then `ended` once as it leaves. Touch never hovers.
+ */
+export type ContinuousHoverEvent = { type: 'continuoushover'; id: ElementId; phase: 'active'; location: Point } | { type: 'continuoushover'; id: ElementId; phase: 'ended' };
+
 export interface ScrollToCommand {
   anchor: UnitPoint | null;
   /** Increases with every request (across readers); the page carries out each serial once. */

package/src/renderer.ts

@@ -422,7 +422,7 @@ export class Renderer {
    * for size changes, and the measurements of the current layout pass.
    */
   private readonly hostObserver: ResizeObserver | null = null;
-  /** `hover` events for boxes whose style asks for them (pointerEffects.ts). */
+  /** `hover` and `continuoushover` events for boxes whose style asks for them (pointerEffects.ts). */
   private readonly hover: HoverTracker;
   /** A frame check of the `reportsFrame` readers is queued for the next animation frame (after a scroll). */
   private frameCheckQueued = false;
@@ -1171,7 +1171,7 @@ export class Renderer {
     this.stopRichEditors = listenToRichEditors(root, editorId, (event) => this.onEvent(event));
     // After `onInput` above, so a keystroke's `text` goes before its `selection`.
     this.stopPlainEditors = listenToPlainEditors(root, editorId, (event) => this.onEvent(event));
-    this.hover = new HoverTracker(root, (id, value) => this.onEvent({ type: 'hover', id, value }));
+    this.hover = new HoverTracker(root, (event) => this.onEvent(event));
     root.addEventListener('scroll', this.queueFrameCheck, { capture: true, passive: true });
     // Scroll transitions and pinned views follow the scroll in the frame it is drawn in.
     root.addEventListener('scroll', drawScrollTransitions, { capture: true, passive: true });

package/src/styles.css

@@ -4499,9 +4499,11 @@ svg.sb-path {
   height: auto;
 }
 
-/* `.onHover` (pointerEffects.ts): the whole box hovers, as SwiftUI uses the
-   view's frame, so a hover box is hit in its empty space too. */
-.sb-styled[data-sb-hover] {
+/* `.onHover` and `.onContinuousHover` (pointerEffects.ts): the whole box
+   hovers, as SwiftUI uses the view's frame, so a hover box is hit in its
+   empty space too. */
+.sb-styled[data-sb-hover],
+.sb-styled[data-sb-continuous-hover] {
   pointer-events: auto;
 }