drawnui-react 0.1.0-preview.2 → 0.1.0-preview.21

package/dist/core/Canvas.js

@@ -1,7 +1,8 @@
 import { Super } from "./Super";
 import { SkiaAccessibilityManager } from "./Accessibility";
+import { HoverManager } from "./Hover";
 import { Colors, SKRect } from "./Types";
-import { ContextMenuEventArgs, GestureEventProcessingInfo, SKPoint, SkiaGesturesParameters, TouchActionEventArgs, } from "./Gestures";
+import { ContextMenuEventArgs, GestureEventProcessingInfo, PointerData, SKPoint, SkiaGesturesParameters, TouchActionEventArgs, } from "./Gestures";
 /**
  * Mirrors DrawnUi Canvas (DrawnView): hosts one Content control on an HTML canvas element,
  * owns RenderingScale (devicePixelRatio), the surface, the on-demand frame loop and raw input.
@@ -12,6 +13,11 @@ export class Canvas {
     Element;
     /** Points a pointer may travel between Down and Up and still count as a tap (AppoMobi TouchEffect default). */
     static TappedCancelMoveThresholdPoints = 16;
+    /**
+     * A press held this long without moving past TappedCancelMoveThresholdPoints is a LongPressing, at the press point
+     * (AppoMobi TouchEffect, DrawnUi.Rust LONG_PRESS_MS); its release sends no Tapped. A timer, no frames while waiting.
+     */
+    static LongPressTimeMs = 1500;
     BackgroundColor = Colors.Transparent;
     /** Accelerated = WebGL surface, Default = software. Read once at first frame. */
     RenderingMode = "Accelerated";
@@ -21,8 +27,22 @@ export class Canvas {
     /** Frames per second over the last second of drawn frames. */
     FPS = 0;
     frameTimes = [];
+    /** DrawnView.WasRendered: a frame has been drawn on a ready surface (set after the first one completes). */
+    WasRendered = false;
+    /** DrawnView.CanRender: the surface (and its GPU context when accelerated) is ready to draw. */
+    get CanRender() { return !!this.surface && !this.disposed; }
+    /**
+     * DrawnView.WillFirstTimeDraw: raised once, right before the first frame drawn on a ready surface, with that
+     * frame's drawing context. The engine draws its first frame while it is being constructed (so the page never shows
+     * an unpainted canvas): pass it through the constructor's `init` to receive that frame.
+     */
+    WillFirstTimeDraw;
+    /** DrawnView.WasDrawn: raised after every frame has been drawn (the C# event passes no context). */
+    WasDrawn;
     /** Registry + rate-limited snapshot of accessible controls, rendered by the DOM overlay (DrawnUi AccessibilityManager). */
     AccessibilityManager = new SkiaAccessibilityManager();
+    /** Mouse hover of the controls (drawnui-cross 6m): ReceivesHover / IsHovered / HoverChanged. */
+    Hover = new HoverManager();
     content;
     get Content() { return this.content; }
     set Content(value) {
@@ -33,6 +53,7 @@ export class Canvas {
             value.Parent = undefined;
             value._superview = this;
         }
+        this.Hover.RequestCheck();
         this.Update();
     }
     surface;
@@ -42,17 +63,28 @@ export class Canvas {
     frameId = 0;
     disposed = false;
     observer;
-    constructor(Element) {
+    /** The WebGL context is lost: no frames until the browser restores it. */
+    contextLost = false;
+    /**
+     * Bumped when the WebGL context was restored: every GPU object made before (Image caches, picture caches that may
+     * replay them, kept composite surfaces, effect textures) is remade at its next draw (DrawnUi.Rust Gpu::epoch).
+     */
+    GpuEpoch = 0;
+    /** `init` runs before the first frame is drawn: the place to attach `WillFirstTimeDraw` / `WasDrawn` for that frame. */
+    constructor(Element, init) {
         this.Element = Element;
         if (!Super.CK)
             throw new Error("DrawnUi: call Super.UseDrawnUi()...BuildAsync() before creating a Canvas");
+        init?.(this);
+        Element.addEventListener("webglcontextlost", this.onContextLost);
+        Element.addEventListener("webglcontextrestored", this.onContextRestored);
         this.observer = new ResizeObserver(() => this.OnResized());
         this.observer.observe(Element);
         this.OnResized();
     }
     /** Request a redraw (full measure + arrange + render) on the next animation frame. */
     Update() {
-        if (this.frameId || !this.surface || this.disposed)
+        if (this.frameId || !this.surface || this.disposed || this.contextLost)
             return;
         const surface = this.surface;
         this.frameId = surface.requestAnimationFrame((c) => {
@@ -103,16 +135,53 @@ export class Canvas {
         this.RenderingScale = dpr;
         this.Element.width = w;
         this.Element.height = h;
+        if (this.contextLost)
+            return; // the restore makes the surface at this size
         this.ReleaseSurface();
         this.surface = this.CreateSurface(w, h);
         if (!this.surface)
             throw new Error("DrawnUi: cannot create surface");
         this.DrawNow();
     }
+    /** WebGL context lost: keep the browser restoring it (preventDefault) and stop the frames. */
+    onContextLost = (e) => {
+        e.preventDefault();
+        this.contextLost = true;
+        if (this.frameId) {
+            cancelAnimationFrame(this.frameId);
+            this.frameId = 0;
+        }
+    };
+    /**
+     * WebGL context restored (as DrawnUi.Rust and the C# Wasm / Blazor heads): every GL object of the lost generation is
+     * gone. The old Skia context is abandoned first, while its own GL handle is current and before the new context makes
+     * any object, so its GL calls reach only lost-generation objects. CanvasKit exposes no `abandonContext`;
+     * `releaseResourcesAndAbandonContext` is its only way to abandon, and after it freeing an old image or surface makes no
+     * GL call. Then the same WebGL object is registered again (the old handle deleted first, which clears the canvas'
+     * context object) with a new GrContext and surface; GpuEpoch makes the old generation's GPU objects remake themselves.
+     */
+    onContextRestored = () => {
+        if (this.disposed)
+            return;
+        if (this.grContext)
+            this.grContext.releaseResourcesAndAbandonContext();
+        this.surface?.delete();
+        this.surface = undefined;
+        this.grContext?.delete();
+        this.grContext = undefined;
+        if (this.glHandle) {
+            Super.CK.deleteContext(this.glHandle);
+            this.glHandle = undefined;
+        }
+        this.contextLost = false;
+        this.GpuEpoch++;
+        this.surface = this.CreateSurface(this.Element.width, this.Element.height);
+        this.DrawNow();
+    };
     /** Draws one frame immediately (outside the rAF loop) and presents it. */
     DrawNow() {
         const surface = this.surface;
-        if (!surface || this.disposed)
+        if (!surface || this.disposed || this.contextLost)
             return;
         this.Draw(surface.getCanvas());
         surface.flush();
@@ -121,7 +190,16 @@ export class Canvas {
     Draw(canvas) {
         const started = performance.now();
         this.ProcessPendingGestures();
-        const executed = this.ExecuteAnimators(Math.round(started * 1_000_000));
+        // Animators run on the frame's vsync time (inside a rAF callback document.timeline.currentTime is the frame
+        // timestamp), not on when this callback happened to start: callback starts drift by several ms around vsync
+        // (measured 12..23 ms between frames shown 16.7 ms apart), and a game loop moving by speed * delta then
+        // jumps unevenly on screen.
+        const frameTime = Number(document.timeline?.currentTime ?? started);
+        this.FrameTimeNanos = Math.round(frameTime * 1_000_000);
+        const executed = this.ExecuteAnimators(Math.round(frameTime * 1_000_000));
+        const canRender = this.CanRender;
+        if (canRender && !this.WasRendered)
+            this.WillFirstTimeDraw?.(this, { Canvas: canvas, Surface: this.surface });
         canvas.clear(Super.ParseColor(this.BackgroundColor));
         const root = this.content;
         if (root) {
@@ -132,6 +210,7 @@ export class Canvas {
             root.Render({ Context: { Canvas: canvas, Surface: this.surface }, Destination: new SKRect(0, 0, w, h), Scale: scale });
         }
         this.AccessibilityManager.OnFrameEnd(this.RenderingScale, this.Element.width, this.Element.height, () => this.Update());
+        this.Hover.AfterFrame(this.content, this.activeTouchIds.size > 0);
         const now = performance.now();
         this.FrameTime = now - started;
         this.FrameIndex++;
@@ -141,6 +220,10 @@ export class Canvas {
         this.FPS = this.frameTimes.length;
         if (executed > 0)
             this.Update(); // animators running: keep frames coming
+        // C# order: WasDrawn at the end of the frame, then the frame counts as rendered
+        this.WasDrawn?.(this);
+        if (!this.WasRendered && canRender)
+            this.WasRendered = true;
     }
     // ---- deferred disposal (DrawnUi DisposeObject: never delete Skia objects mid-frame) ----
     disposeQueue = [];
@@ -164,19 +247,61 @@ export class Canvas {
     UnregisterAnimator(uid) { this.AnimatingControls.delete(uid); }
     /** Ticks every registered animator once; returns how many ran. */
     ExecuteAnimators(frameTimeNanos) {
-        let executed = 0;
+        let executed = 0, wake = Infinity;
         for (const a of [...this.AnimatingControls.values()]) {
             if (!a.Parent) {
                 this.AnimatingControls.delete(a.Uid);
                 continue;
             }
+            // the control or a parent is hidden: its animator pauses, no frames, and goes on from where it was when shown
+            if (a.Parent.HiddenInTree()) {
+                if (!a.IsPaused) {
+                    a.Pause();
+                    a.PausedWhileHidden = true;
+                }
+                continue;
+            }
+            if (a.PausedWhileHidden) {
+                a.PausedWhileHidden = false;
+                a.Resume();
+            }
+            if (a.IsPaused)
+                continue; // a paused animator neither ticks nor keeps frames coming (C# DrawnView)
+            if (a.SleepUntilNanos > frameTimeNanos) {
+                wake = Math.min(wake, a.SleepUntilNanos);
+                continue;
+            } // nothing changes yet
             a.TickFrame(frameTimeNanos);
             executed++;
+            if (a.SleepUntilNanos > frameTimeNanos)
+                wake = Math.min(wake, a.SleepUntilNanos);
         }
+        this.WakeAt(wake, frameTimeNanos);
         return executed;
     }
+    wakeTimer = 0;
+    wakeAtNanos = Infinity;
+    /** One timer for the earliest sleeping animator: the frame loop wakes then, no frames run in between. */
+    WakeAt(nanos, nowNanos) {
+        if (!isFinite(nanos))
+            return;
+        if (this.wakeTimer && this.wakeAtNanos <= nanos)
+            return;
+        if (this.wakeTimer)
+            clearTimeout(this.wakeTimer);
+        this.wakeAtNanos = nanos;
+        this.wakeTimer = window.setTimeout(() => { this.wakeTimer = 0; this.wakeAtNanos = Infinity; this.Update(); }, Math.max(0, (nanos - nowNanos) / 1_000_000));
+    }
     /** Frames drawn so far (SkiaBackdrop uses it to refresh once after a cached record). */
     FrameIndex = 0;
+    /**
+     * DrawnView.WheelDeltaPerNotch: the Wheel.Delta one mouse-wheel notch produces, 100 CSS pixels in Chrome and Edge. A
+     * scroll moves by the event's share of a notch, so a touchpad, which sends many small events, scrolls as far as the
+     * fingers moved. 0 = units unknown: every event scrolls one line.
+     */
+    WheelDeltaPerNotch = 100;
+    /** Vsync time of the last frame the animators ran on (nanoseconds, the performance.now() timeline). */
+    FrameTimeNanos = 0;
     /** On-screen surface (SkiaBackdrop snapshots it). */
     get Surface() { return this.surface; }
     /**
@@ -225,6 +350,12 @@ export class Canvas {
     }
     Dispose() {
         this.disposed = true;
+        if (this.wakeTimer) {
+            clearTimeout(this.wakeTimer);
+            this.wakeTimer = 0;
+        }
+        this.Element.removeEventListener("webglcontextlost", this.onContextLost);
+        this.Element.removeEventListener("webglcontextrestored", this.onContextRestored);
         this.Gestures = "Disabled";
         this.observer.disconnect();
         this.content?.Dispose();
@@ -260,17 +391,17 @@ export class Canvas {
                     e.type === "pointercancel" ? "Cancelled" : undefined;
         if (!type)
             return;
-        // only the primary mouse button is a touch (DrawnUi.Blazor): right / middle buttons never start a gesture, and
-        // their Up / Cancel (pointer never pressed here) is ignored too, so a right click cannot end as a Tapped
-        if (type === "Pressed" && e.pointerType === "mouse" && e.button !== 0)
-            return;
         if (type === "Moved" && !this.activeTouchIds.has(e.pointerId)) {
+            if (e.pointerType === "touch")
+                return; // touch never hovers
+            if (this.activeTouchIds.size === 0)
+                this.Hover.Move(this.content, e.offsetX * this.RenderingScale, e.offsetY * this.RenderingScale);
             if (e.pointerType === "mouse")
-                this.UpdateCursor(e.offsetX, e.offsetY);
+                this.UpdateCursor();
             return;
-        } // hover not ported (TouchActionResult.Pointer)
+        }
         if ((type === "Released" || type === "Cancelled") && !this.activeTouchIds.has(e.pointerId))
-            return;
+            return; // Up of a pointer that never pressed here
         // Capture so Up outside the element still arrives; throws for synthetic events (tests) — harmless.
         if (type === "Pressed") {
             try {
@@ -284,9 +415,29 @@ export class Canvas {
         args.Type = type;
         args.Scale = this.RenderingScale;
         args.Location = new SKPoint((e.clientX - rect.left) * this.RenderingScale, (e.clientY - rect.top) * this.RenderingScale);
+        // every mouse button is delivered with its PointerData (AppoMobi.Gestures): a right click is a Down / Up / Tapped
+        // with Button "Right" for games and custom controls, and a ContextMenu on top
+        const pd = new PointerData();
+        pd.Button = e.button === 0 ? "Left" : e.button === 1 ? "Middle" : e.button === 2 ? "Right" : e.button === 3 ? "XButton1" : e.button === 4 ? "XButton2" : "Extended";
+        pd.ButtonNumber = e.button === 1 ? 3 : e.button === 2 ? 2 : e.button + 1;
+        pd.DeviceType = e.pointerType === "touch" ? "Touch" : e.pointerType === "pen" ? "Pen" : "Mouse";
+        pd.PressedButtons = e.buttons;
+        args.Pointer = pd;
         this.OnTouchAction(args);
+        if (type === "Released" || type === "Cancelled") {
+            this.claimedTouches.delete(e.pointerId);
+            this.UpdateTouchAction();
+        }
     };
+    /** The mouse left the canvas: hover ends at once, also while content moves. */
+    onPointerLeave = (e) => { if (e.pointerType !== "touch")
+        this.Hover.Leave(); };
     preventTouch = (e) => e.preventDefault();
+    /** Gestures="Enabled": touch / pen pointers whose Down a control used (see OnTouchAction). */
+    claimedTouches = new Set();
+    /** Gestures="Enabled": while a claimed touch is down the page may not take its drag. */
+    preventClaimedTouch = (e) => { if (this.claimedTouches.size > 0 && e.cancelable)
+        e.preventDefault(); };
     /** Called when no control handled a context-menu request; return true to suppress the browser's canvas menu. */
     ContextMenu;
     /** DOM contextmenu (right click / long press / Menu key) -> ContextMenuEventArgs routed through the tree like a tap. */
@@ -306,32 +457,33 @@ export class Canvas {
     cursorPointer = false;
     /**
      * DrawnUi.Blazor shows `cursor: pointer` over interactive controls through its overlay elements; here the overlay
-     * is pointer-events:none, so the mouse position is tested against the accessibility snapshot (the accessible
-     * controls' rects in points, already sorted and rate-limited), each hit control answering WantsPointerCursor
-     * (itself tappable, or a tappable span of a label), and the canvas element's cursor is switched only when the
-     * answer changes. Mouse moves only, no work without a mouse and none in the frame loop.
+     * is pointer-events:none, so the canvas decides from the hover hit path (Hover.Path: the controls under the mouse by
+     * the routing rules of ProcessGestures, so nothing below a popup that blocks gestures below): a control in the
+     * accessibility tree (it has a role) that answers WantsPointerCursor (itself tappable, or a tappable span of a label)
+     * shows the hand. A popup's close-on-background-tap wrapper has no role, so its backdrop shows none. The canvas
+     * element's cursor is switched only when the answer changes. Mouse moves only, none in the frame loop.
      */
-    UpdateCursor(x, y) {
+    UpdateCursor() {
         let hit = false;
-        const scale = this.RenderingScale;
-        for (const n of this.AccessibilityManager.Snapshot) {
-            if (x < n.Rect.Left || x >= n.Rect.Right || y < n.Rect.Top || y >= n.Rect.Bottom)
-                continue;
-            // the control decides (whole control, or a tappable span of a label); point in pixels relative to the control's
-            // origin, taken from the snapshot rect (already carries the scroll / cache offset; a rotated control gets its bbox)
-            if (n.Source.WantsPointerCursor((x - n.Rect.Left) * scale, (y - n.Rect.Top) * scale)) {
+        const path = this.Hover.Path, xs = this.Hover.PathX, ys = this.Hover.PathY;
+        for (let i = path.length - 1; i >= 0 && !hit; i--) {
+            const c = path[i];
+            if (c.IsAccessibilityElement && c.WantsPointerCursor(xs[i] - c.DrawingRect.Left, ys[i] - c.DrawingRect.Top))
                 hit = true;
-                break;
-            }
         }
         if (hit !== this.cursorPointer) {
             this.cursorPointer = hit;
             this.Element.style.cursor = hit ? "pointer" : "";
         }
     }
-    /** Mouse wheel -> TouchActionResult.Wheel (page scroll suppressed while gestures are enabled). */
+    /**
+     * Mouse wheel -> TouchActionResult.Wheel.
+     * Lock keeps every wheel on the canvas. Enabled shares it with the page, like DrawnUi.Blazor's
+     * TouchHandlingStyle.Manual: the page scrolls unless a control consumed this wheel. The browser needs that answer
+     * inside this handler, so the wheel is processed now instead of at the next frame (Blazor does the same, for the
+     * same reason); pending gestures are flushed first so the event order is kept.
+     */
     onWheel = (e) => {
-        e.preventDefault();
         const rect = this.Element.getBoundingClientRect();
         const args = new TouchActionEventArgs();
         args.Id = -1;
@@ -339,29 +491,129 @@ export class Canvas {
         args.Scale = this.RenderingScale;
         args.Location = new SKPoint((e.clientX - rect.left) * this.RenderingScale, (e.clientY - rect.top) * this.RenderingScale);
         args.StartingLocation = args.Location;
-        args.Wheel = { Delta: e.deltaY !== 0 ? e.deltaY : e.deltaX };
-        this.OnGestureEvent(args, "Wheel");
+        // lines and pages to pixels, then the dominant axis (the .NET browser heads, fc8980c1); a vertical scroll leaves
+        // horizontal events alone (C# ba03cb20)
+        const factor = e.deltaMode === 1 ? 40 : e.deltaMode === 2 ? 800 : 1;
+        const horizontal = Math.abs(e.deltaX) > Math.abs(e.deltaY);
+        args.Wheel = { Delta: (horizontal ? e.deltaX : e.deltaY) * factor, IsHorizontal: horizontal };
+        if (this.gestures === "Lock") {
+            e.preventDefault();
+            this.OnGestureEvent(args, "Wheel");
+            return;
+        }
+        if (this.ProcessGestureNow(args, "Wheel"))
+            e.preventDefault();
+    };
+    /**
+     * Processes one gesture immediately (after whatever is queued) and reports whether a control USED it: a consumer
+     * that marked the event Handled, or any consumer that is not a `BlockGesturesBelow` layer. A blocker returns itself
+     * for every gesture it keeps from the controls below (a shell page, a popup backdrop), which is not a use: counting
+     * it would block the page wheel over every shell app.
+     */
+    ProcessGestureNow(args, result) {
+        this.ProcessPendingGestures();
+        const root = this.content;
+        const consumed = root ? this.ProcessGestures(root, SkiaGesturesParameters.Create(result, args)) : null;
+        this.Update();
+        return !!consumed && (args.Handled || !consumed.BlockGesturesBelow);
+    }
+    /**
+     * The page axes a touch pan over the canvas hands to the browser: "pan-y" when the page (or a scrolling ancestor) can
+     * scroll vertically, "pan-x" horizontally, both, or "none". Mirrors MAUI's Gestures="Enabled" inside a native scroll
+     * view, where the parent takes the pans it scrolls in.
+     */
+    static PageScrollAxes(el) {
+        const scrolls = (v) => v === "auto" || v === "scroll" || v === "overlay";
+        const clips = (v) => v === "hidden" || v === "clip";
+        let x = false, y = false;
+        for (let n = el.parentElement; n && n !== document.body && n !== document.documentElement; n = n.parentElement) {
+            const st = getComputedStyle(n);
+            if (!y && scrolls(st.overflowY) && n.scrollHeight > n.clientHeight + 1)
+                y = true;
+            if (!x && scrolls(st.overflowX) && n.scrollWidth > n.clientWidth + 1)
+                x = true;
+        }
+        // the viewport scrolls unless html or body clips it
+        const root = document.scrollingElement ?? document.documentElement;
+        const hs = getComputedStyle(document.documentElement), bs = getComputedStyle(document.body);
+        if (!y && !clips(hs.overflowY) && !clips(bs.overflowY) && root.scrollHeight > root.clientHeight + 1)
+            y = true;
+        if (!x && !clips(hs.overflowX) && !clips(bs.overflowX) && root.scrollWidth > root.clientWidth + 1)
+            x = true;
+        // a canvas filling a framed document (a widget in an iframe): the page that scrolls is the parent, which a
+        // cross-origin frame cannot inspect, so assume it scrolls vertically; horizontal pans and taps stay on the canvas
+        if (!y && window.self !== window.top)
+            y = true;
+        return x && y ? "pan-x pan-y" : y ? "pan-y" : x ? "pan-x" : "none";
+    }
+    /**
+     * Gestures="Enabled" shares touch pans with the page like MAUI's Enabled inside a native scroll view: along an axis
+     * the page can scroll, the browser takes the pan (and sends pointercancel), taps and the other axis stay on the
+     * canvas. A page that cannot scroll, and Lock, keep every touch. The browser reads touch-action when a touch starts,
+     * so it is kept current ahead of time: on attach, when the window / html / body resize, and after every touch.
+     */
+    UpdateTouchAction = () => {
+        if (this.gestures === "Disabled")
+            return;
+        const pan = this.gestures === "Enabled" ? Canvas.PageScrollAxes(this.Element) : "none";
+        if (this.Element.style.touchAction !== pan)
+            this.Element.style.touchAction = pan;
     };
+    pageObserver;
     AttachInput() {
         const el = this.Element;
-        el.style.touchAction = "none";
+        this.UpdateTouchAction();
+        window.addEventListener("resize", this.UpdateTouchAction);
+        this.pageObserver = new ResizeObserver(this.UpdateTouchAction);
+        this.pageObserver.observe(document.documentElement);
+        this.pageObserver.observe(document.body);
         el.style.userSelect = "none";
         for (const t of ["pointerdown", "pointermove", "pointerup", "pointercancel"])
             el.addEventListener(t, this.onPointer);
+        el.addEventListener("pointerleave", this.onPointerLeave);
         el.addEventListener("contextmenu", this.onContextMenu);
         el.addEventListener("wheel", this.onWheel, { passive: false });
-        if (this.gestures === "Lock")
+        if (this.gestures === "Lock") {
             el.addEventListener("touchmove", this.preventTouch, { passive: false });
+            // the canvas owns every touch (DrawnUi.Web applyGestureStyle, DrawnUi.Rust host): no iOS callout or text
+            // selection on a long press, and no rubber band / pull-down of the page starting on it
+            const st = el.style;
+            st.webkitUserSelect = "none";
+            st.webkitTouchCallout = "none";
+            this.pageOverscroll = [document.documentElement.style.overscrollBehavior, document.body.style.overscrollBehavior];
+            document.documentElement.style.overscrollBehavior = "none";
+            document.body.style.overscrollBehavior = "none";
+        }
+        else if (this.gestures === "Enabled")
+            el.addEventListener("touchmove", this.preventClaimedTouch, { passive: false });
     }
+    /** The page's own overscroll-behavior before Lock set it to none (html, body), put back on detach. */
+    pageOverscroll;
     DetachInput() {
         const el = this.Element;
         el.style.touchAction = "";
+        window.removeEventListener("resize", this.UpdateTouchAction);
+        this.pageObserver?.disconnect();
+        this.pageObserver = undefined;
         el.style.userSelect = "";
         for (const t of ["pointerdown", "pointermove", "pointerup", "pointercancel"])
             el.removeEventListener(t, this.onPointer);
+        el.removeEventListener("pointerleave", this.onPointerLeave);
         el.removeEventListener("contextmenu", this.onContextMenu);
         el.removeEventListener("wheel", this.onWheel);
         el.removeEventListener("touchmove", this.preventTouch);
+        el.removeEventListener("touchmove", this.preventClaimedTouch);
+        if (this.pageOverscroll) {
+            const st = el.style;
+            st.webkitUserSelect = "";
+            st.webkitTouchCallout = "";
+            [document.documentElement.style.overscrollBehavior, document.body.style.overscrollBehavior] = this.pageOverscroll;
+            this.pageOverscroll = undefined;
+        }
+        this.claimedTouches.clear();
+        for (const id of [...this.longPressTimers.keys()])
+            this.DisarmLongPress(id);
+        this.longPressed.clear();
         this.activeTouchIds.clear();
         this.pointerDownArgs.clear();
         this.previousTouchArgs.clear();
@@ -372,12 +624,23 @@ export class Canvas {
             return;
         const id = args.Id;
         if (args.Type === "Pressed") {
+            this.ArmLongPress(id, args);
             this.activeTouchIds.add(id);
             args.NumberOfTouches = this.activeTouchIds.size;
             args.StartingLocation = args.Location;
             args.IsInContact = true;
             this.pointerDownArgs.set(id, args);
             this.previousTouchArgs.set(id, args);
+            // Gestures="Enabled", touch or pen: page scrolling was left to touch-action alone, and iOS Safari still takes an
+            // off-axis drag from the page axis (pointercancel mid-gesture, w3c/pointerevents#303). So the Down is processed
+            // now, like the wheel (queued gestures first, same "used" rule): when a control used it the touch is claimed and
+            // its touchmoves are default-prevented until it ends. It is not queued as well, so it is processed exactly once and
+            // the Panning / Up that follow keep their order. An unclaimed touch shares the page as before.
+            if (this.gestures === "Enabled" && args.Pointer && args.Pointer.DeviceType !== "Mouse") {
+                if (this.ProcessGestureNow(args, "Down"))
+                    this.claimedTouches.add(id);
+                return;
+            }
             this.OnGestureEvent(args, "Down");
             return;
         }
@@ -386,6 +649,9 @@ export class Canvas {
         const downArgs = this.pointerDownArgs.get(id);
         args.StartingLocation = downArgs ? downArgs.StartingLocation : args.Location;
         if (args.Type === "Moved") {
+            const threshold = Canvas.TappedCancelMoveThresholdPoints * Math.max(0.1, this.RenderingScale);
+            if (Math.abs(args.Distance.Total.X) >= threshold || Math.abs(args.Distance.Total.Y) >= threshold)
+                this.DisarmLongPress(id);
             if (args.Distance.Delta.X !== 0 || args.Distance.Delta.Y !== 0)
                 this.OnGestureEvent(args, "Panning");
             this.previousTouchArgs.set(id, args);
@@ -393,7 +659,9 @@ export class Canvas {
         }
         if (args.Type === "Released" || args.Type === "Cancelled") {
             args.IsInContact = args.NumberOfTouches > 1;
-            if (!args.IsInContact && downArgs && args.Type === "Released") {
+            const longPressed = this.longPressed.delete(id);
+            this.DisarmLongPress(id);
+            if (!args.IsInContact && downArgs && args.Type === "Released" && !longPressed) {
                 const threshold = Canvas.TappedCancelMoveThresholdPoints * Math.max(0.1, this.RenderingScale);
                 if (Math.abs(args.Distance.Total.X) < threshold && Math.abs(args.Distance.Total.Y) < threshold)
                     this.OnGestureEvent(args, "Tapped");
@@ -404,6 +672,30 @@ export class Canvas {
             this.activeTouchIds.delete(id);
         }
     }
+    longPressTimers = new Map();
+    longPressed = new Set();
+    /** The long press of a new press: due LongPressTimeMs later unless the pointer moves away or lets go. */
+    ArmLongPress(id, down) {
+        this.DisarmLongPress(id);
+        this.longPressed.delete(id);
+        this.longPressTimers.set(id, window.setTimeout(() => {
+            this.longPressTimers.delete(id);
+            if (!this.activeTouchIds.has(id))
+                return;
+            this.longPressed.add(id);
+            const args = new TouchActionEventArgs();
+            Object.assign(args, down);
+            args.Location = down.StartingLocation ?? down.Location;
+            this.OnGestureEvent(args, "LongPressing");
+        }, Canvas.LongPressTimeMs));
+    }
+    DisarmLongPress(id) {
+        const t = this.longPressTimers.get(id);
+        if (t) {
+            clearTimeout(t);
+            this.longPressTimers.delete(id);
+        }
+    }
     OnGestureEvent(args, result) {
         this.pendingGestures.push(SkiaGesturesParameters.Create(result, args));
         this.Update();
@@ -418,8 +710,44 @@ export class Canvas {
         for (const args of batch)
             this.ProcessGestures(root, args);
     }
+    /**
+     * The control that consumed the current gesture keeps it until it lets go (DrawnUi Canvas.HadInput). Without this a
+     * gesture is re-routed by the pointer position on every event, so anything the finger drags away from — a drag
+     * handle, a slider thumb, a button being held — stops receiving Panning the moment the pointer leaves its box.
+     * Single pointer, which is what the web gives us here; C# keeps a set for multi-touch.
+     */
+    gestureOwner = null;
+    /** DrawnUi IsSavedGesture: the types replayed to the owner instead of being routed again. */
+    static IsSavedGesture(type) {
+        return type === "Panning" || type === "Wheel" || type === "Up";
+    }
     /** Entry into the control tree, same shape as DrawnUi Canvas.ProcessGestures. */
     ProcessGestures(root, args) {
-        return root.ProcessGestures(args, new GestureEventProcessingInfo(args.Event.Location, SKPoint.Empty, SKPoint.Empty, null));
+        const info = () => new GestureEventProcessingInfo(args.Event.Location, SKPoint.Empty, SKPoint.Empty, null);
+        // the wheel goes to the press owner only while a press is held; between presses it goes by position, and it
+        // never makes an owner: a wheel over a second scroll moves that one, not the last one the wheel moved
+        // (DrawnUi.Rust input_router "the wheel goes to the owner of the press first"; C# keeps the last wheel consumer)
+        const wheel = args.Type === "Wheel";
+        if (args.Type === "Down")
+            this.gestureOwner = null;
+        else if (this.gestureOwner && Canvas.IsSavedGesture(args.Type) && (!wheel || this.activeTouchIds.size > 0)) {
+            const owner = this.gestureOwner;
+            const alive = !!owner.Superview && owner.IsVisible && !owner.InputTransparent;
+            const consumed = alive ? owner.OnSkiaGestureEvent(args, info()) : null;
+            if (consumed) {
+                // it still wants the gesture: nobody else sees this one (C# skips the tree pass for a saved gesture)
+                if (!wheel)
+                    this.gestureOwner = args.Type === "Up" ? null : consumed;
+                return consumed;
+            }
+            // it let go (a button whose press turned into a pan): route normally again; a wheel it does not use goes by
+            // position and leaves it the press
+            if (!wheel)
+                this.gestureOwner = null;
+        }
+        const consumed = root.ProcessGestures(args, info());
+        if (!wheel)
+            this.gestureOwner = consumed && args.Type !== "Up" ? consumed : null;
+        return consumed;
     }
 }

package/dist/core/Easing.d.ts

@@ -1,4 +1,4 @@
-/** Mirrors MAUI Easing (subset): Ease(t) with t in 0..1. */
+/** Mirrors MAUI Easing: Ease(t) with t in 0..1 (Spring* leave 0..1 on the way). */
 export declare class Easing {
     private readonly fn;
     constructor(fn: (x: number) => number);
@@ -9,5 +9,16 @@ export declare class Easing {
     static readonly CubicInOut: Easing;
     static readonly SinOut: Easing;
     static readonly SinIn: Easing;
+    /** Half a cosine: slow at both ends. */
+    static readonly SinInOut: Easing;
+    /** Leaps to the end, bounces three times and settles. */
+    static readonly BounceOut: Easing;
+    /** Bounces three times, then leaps to the end. */
+    static readonly BounceIn: Easing;
+    /** Moves away first, then leaps to the end. */
+    static readonly SpringIn: Easing;
+    /** Goes a little past the end and comes back. */
+    static readonly SpringOut: Easing;
+    private static Bounce;
     static readonly Default: Easing;
 }

package/dist/core/Easing.js

@@ -1,4 +1,4 @@
-/** Mirrors MAUI Easing (subset): Ease(t) with t in 0..1. */
+/** Mirrors MAUI Easing: Ease(t) with t in 0..1 (Spring* leave 0..1 on the way). */
 export class Easing {
     fn;
     constructor(fn) {
@@ -11,5 +11,29 @@ export class Easing {
     static CubicInOut = new Easing((x) => (x < 0.5 ? 4 * x ** 3 : (x - 1) * (2 * x - 2) ** 2 + 1));
     static SinOut = new Easing((x) => Math.sin((x * Math.PI) / 2));
     static SinIn = new Easing((x) => 1 - Math.cos((x * Math.PI) / 2));
+    /** Half a cosine: slow at both ends. */
+    static SinInOut = new Easing((x) => -Math.cos(Math.PI * x) / 2 + 0.5);
+    /** Leaps to the end, bounces three times and settles. */
+    static BounceOut = new Easing(Easing.Bounce);
+    /** Bounces three times, then leaps to the end. */
+    static BounceIn = new Easing((x) => 1 - Easing.Bounce(1 - x));
+    /** Moves away first, then leaps to the end. */
+    static SpringIn = new Easing((x) => x * x * ((1.70158 + 1) * x - 1.70158));
+    /** Goes a little past the end and comes back. */
+    static SpringOut = new Easing((x) => (x - 1) * (x - 1) * ((1.70158 + 1) * (x - 1) + 1.70158) + 1);
+    static Bounce(p) {
+        if (p < 1 / 2.75)
+            return 7.5625 * p * p;
+        if (p < 2 / 2.75) {
+            p -= 1.5 / 2.75;
+            return 7.5625 * p * p + 0.75;
+        }
+        if (p < 2.5 / 2.75) {
+            p -= 2.25 / 2.75;
+            return 7.5625 * p * p + 0.9375;
+        }
+        p -= 2.625 / 2.75;
+        return 7.5625 * p * p + 0.984375;
+    }
     static Default = Easing.CubicInOut;
 }