drawnui-react 0.1.0-preview.16 → 0.1.0-preview.18

package/dist/core/Animators.js

@@ -16,7 +16,20 @@ export class AnimatorBase {
     StartFrameTimeNanos = 0;
     OnStart;
     OnStop;
+    /** Paused: the canvas does not tick it and it wakes no frames; Resume goes on from where it was (C# Pause / Resume). */
+    IsPaused = false;
+    /** Paused by the canvas because its control is hidden; resumed when it shows again. */
+    PausedWhileHidden = false;
+    /**
+     * Frame time (ns) before which nothing it shows changes: the canvas does not tick it and it keeps no frames coming
+     * until then, a timer wakes the frame loop at that time (a GIF or a sprite between two frames; DrawnUi.Rust frame
+     * animators sleep between changes). 0 = tick every frame.
+     */
+    SleepUntilNanos = 0;
     delayHandle = 0;
+    delayEnd = 0;
+    delayLeft = 0;
+    pausedAt = 0;
     constructor(parent) { this.Parent = parent; }
     Register() {
         const parent = this.Parent;
@@ -60,6 +73,8 @@ export class AnimatorBase {
             this.delayHandle = 0;
         }
         if (delayMs > 0) {
+            // the delay waits without frames
+            this.delayEnd = performance.now() + delayMs;
             this.delayHandle = window.setTimeout(() => { this.delayHandle = 0; this.Start(); }, delayMs);
             return;
         }
@@ -72,7 +87,43 @@ export class AnimatorBase {
             }
         }
     }
+    /** Freezes the run (and what is left of a start delay); Resume goes on from there. */
+    Pause() {
+        if (this.IsPaused)
+            return;
+        this.IsPaused = true;
+        this.pausedAt = performance.now();
+        if (this.delayHandle) {
+            clearTimeout(this.delayHandle);
+            this.delayHandle = 0;
+            this.delayLeft = Math.max(0, this.delayEnd - this.pausedAt);
+        }
+    }
+    /** Goes on from where Pause froze it: the paused time is not counted. */
+    Resume() {
+        if (!this.IsPaused)
+            return;
+        this.IsPaused = false;
+        const paused = (performance.now() - this.pausedAt) * 1_000_000;
+        if (this.StartFrameTimeNanos !== 0) {
+            this.StartFrameTimeNanos += paused;
+            this.LastFrameTimeNanos += paused;
+        }
+        if (this.SleepUntilNanos !== 0)
+            this.SleepUntilNanos += paused;
+        if (this.delayLeft > 0) {
+            const left = this.delayLeft;
+            this.delayLeft = 0;
+            this.Start(left);
+            return;
+        }
+        this.Parent?.Repaint(); // frames again
+    }
     Stop() {
+        this.IsPaused = false;
+        this.PausedWhileHidden = false;
+        this.SleepUntilNanos = 0;
+        this.delayLeft = 0;
         if (this.delayHandle) {
             clearTimeout(this.delayHandle);
             this.delayHandle = 0;
@@ -155,23 +206,21 @@ export class SkiaValueAnimator extends AnimatorBase {
     }
     /** Passed over mValue; subclasses derive their own reported value here. */
     TransformReportedValue(_deltaT) { return this.mValue; }
-    /** Updates mValue from elapsed time; true when the target was reached. */
+    /**
+     * Updates mValue from elapsed time; true when the run is over. The eased value is not clamped to the range: a spring
+     * easing goes past its ends, and a run whose mMinValue is above mMaxValue (a ping-pong's way back) goes down.
+     */
     UpdateValue(_deltaT, deltaFromStart) {
         const elapsedMs = deltaFromStart / 1_000_000;
         const progress = this.Speed > 0 ? elapsedMs / this.Speed : 1;
         const deltaValue = this.mMaxValue - this.mMinValue;
         const eased = this.Easing.Ease(Math.min(progress, 1));
         this.Progress = eased;
-        const value = deltaValue * eased + this.mMinValue;
-        if (value < this.mMinValue) {
-            this.mValue = this.mMinValue;
-            return false;
-        }
-        if (value >= this.mMaxValue || progress >= 1) {
+        if (progress >= 1) {
             this.mValue = this.mMaxValue;
             return true;
         }
-        this.mValue = value;
+        this.mValue = deltaValue * eased + this.mMinValue;
         return false;
     }
     FinishedRunning() {
@@ -188,6 +237,25 @@ export class SkiaValueAnimator extends AnimatorBase {
         return true;
     }
 }
+/** DrawnUi PingPongAnimator: every repeat runs the other way (Repeat -1 = forever by default). */
+export class PingPongAnimator extends SkiaValueAnimator {
+    /** One way done, the next starts (C# CycleFInished). */
+    CycleFinished;
+    constructor(parent) { super(parent); this.Repeat = -1; }
+    FinishedRunning() {
+        if (this.Repeat !== 0) {
+            this.CycleFinished?.();
+            if (this.Repeat > 0)
+                this.Repeat--;
+            [this.mMinValue, this.mMaxValue] = [this.mMaxValue, this.mMinValue];
+            this.mValue = this.mMinValue;
+            this.LastFrameTimeNanos = 0;
+            this.StartFrameTimeNanos = 0;
+            return false;
+        }
+        return super.FinishedRunning();
+    }
+}
 /** DrawnUi RenderingAnimator: a value animator that paints itself above its Parent (IOverlayEffect). */
 export class RenderingAnimator extends SkiaValueAnimator {
     constructor(parent) { super(parent); }

package/dist/core/Canvas.d.ts

@@ -15,6 +15,11 @@ export declare class Canvas {
     readonly Element: HTMLCanvasElement;
     /** Points a pointer may travel between Down and Up and still count as a tap (AppoMobi TouchEffect default). */
     static TappedCancelMoveThresholdPoints: number;
+    /**
+     * 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: number;
     BackgroundColor: Color;
     /** Accelerated = WebGL surface, Default = software. Read once at first frame. */
     RenderingMode: RenderingModeType;
@@ -96,6 +101,10 @@ export declare class Canvas {
     UnregisterAnimator(uid: number): void;
     /** Ticks every registered animator once; returns how many ran. */
     protected ExecuteAnimators(frameTimeNanos: number): number;
+    private wakeTimer;
+    private wakeAtNanos;
+    /** One timer for the earliest sleeping animator: the frame loop wakes then, no frames run in between. */
+    private WakeAt;
     /** Frames drawn so far (SkiaBackdrop uses it to refresh once after a cached record). */
     FrameIndex: number;
     /**
@@ -143,10 +152,11 @@ export declare class Canvas {
     private cursorPointer;
     /**
      * 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.
      */
     private UpdateCursor;
     /**
@@ -179,9 +189,16 @@ export declare class Canvas {
     private readonly UpdateTouchAction;
     private pageObserver?;
     private AttachInput;
+    /** The page's own overscroll-behavior before Lock set it to none (html, body), put back on detach. */
+    private pageOverscroll?;
     private DetachInput;
     /** Port of DrawnUi.Blazor Canvas.OnTouchAction: per-pointer state machine producing Down / Panning / Tapped / Up. */
     OnTouchAction(args: TouchActionEventArgs): void;
+    private readonly longPressTimers;
+    private readonly longPressed;
+    /** The long press of a new press: due LongPressTimeMs later unless the pointer moves away or lets go. */
+    private ArmLongPress;
+    private DisarmLongPress;
     private OnGestureEvent;
     private ProcessPendingGestures;
     /**

package/dist/core/Canvas.js

@@ -13,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";
@@ -242,17 +247,51 @@ 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;
     /**
@@ -311,6 +350,10 @@ 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";
@@ -351,10 +394,10 @@ export class Canvas {
         if (type === "Moved" && !this.activeTouchIds.has(e.pointerId)) {
             if (e.pointerType === "touch")
                 return; // touch never hovers
-            if (e.pointerType === "mouse")
-                this.UpdateCursor(e.offsetX, e.offsetY);
             if (this.activeTouchIds.size === 0)
                 this.Hover.Move(this.content, e.offsetX * this.RenderingScale, e.offsetY * this.RenderingScale);
+            if (e.pointerType === "mouse")
+                this.UpdateCursor();
             return;
         }
         if ((type === "Released" || type === "Cancelled") && !this.activeTouchIds.has(e.pointerId))
@@ -414,23 +457,19 @@ 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;
@@ -534,11 +573,22 @@ export class Canvas {
         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 = "";
@@ -553,7 +603,17 @@ export class Canvas {
         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();
@@ -564,6 +624,7 @@ 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;
@@ -588,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);
@@ -595,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");
@@ -606,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();
@@ -634,21 +724,30 @@ export class Canvas {
     /** Entry into the control tree, same shape as DrawnUi Canvas.ProcessGestures. */
     ProcessGestures(root, args) {
         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)) {
+        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)
-                this.gestureOwner = args.Type === "Up" ? null : consumed;
+                if (!wheel)
+                    this.gestureOwner = args.Type === "Up" ? null : consumed;
                 return consumed;
             }
-            this.gestureOwner = null; // it let go (a button whose press turned into a pan): route normally again
+            // 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());
-        this.gestureOwner = consumed && args.Type !== "Up" ? consumed : null;
+        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;
 }

package/dist/core/Gestures.d.ts

@@ -9,7 +9,7 @@ export declare class SKPoint {
 }
 /** Raw platform action (subset of TouchActionType). */
 export type TouchActionType = "Pressed" | "Moved" | "Released" | "Cancelled" | "Wheel" | "Pointer";
-/** Recognized gesture (TouchActionResult). LongPressing/Pointer/Touch declared for parity, not produced yet. */
+/** Recognized gesture (TouchActionResult). LongPressing after Canvas.LongPressTimeMs held still; Pointer / Touch declared for parity, not produced. */
 export type TouchActionResult = "Touch" | "Down" | "Up" | "Tapped" | "LongPressing" | "Panning" | "Wheel" | "Pointer";
 export type GesturesMode = "Disabled" | "Enabled" | "Lock";
 export type LockTouch = "Disabled" | "Enabled" | "PassNone" | "PassTap" | "PassTapAndLongPress";
@@ -21,6 +21,27 @@ export declare class DistanceInfo {
     Total: SKPoint;
     Velocity: SKPoint;
 }
+/**
+ * The last positions of a press with their times (DrawnUi.Rust gestures `Trail`, 6d525f7). Measured only against the
+ * previous move, irregular delivery made the velocity worthless: moves handled in one burst (queued pointer events
+ * handed over back to back by a busy main thread, WSLg pairs 0.01 ms apart) gave millions of px/s and every fling at
+ * the limit. Moves under BurstMs apart are one position; a move's velocity is its displacement over the last WindowMs,
+ * the earlier position interpolated; when the previous move is already that old, its own velocity exactly (evenly
+ * spaced input at 60 Hz measures as before).
+ */
+export declare class VelocityTrail {
+    /** A move's velocity is its displacement over this much time. */
+    static readonly WindowMs = 16;
+    /** Below this since the press no velocity is measured yet: the first moves of a burst. */
+    static readonly MinMs = 4;
+    /** Moves closer than this came in one burst: one position, at the burst's first time. */
+    static readonly BurstMs = 1;
+    private static readonly Capacity;
+    private readonly points;
+    Push(x: number, y: number, t: number): void;
+    /** The velocity at (x, y) at time t (ms), pixels per second; `fallback` right after the press. */
+    Velocity(x: number, y: number, t: number, fallback: SKPoint): SKPoint;
+}
 /** AppoMobi.Gestures MouseButton: which button pressed / released (DOM button 0..4). */
 export type MouseButton = "Left" | "Middle" | "Right" | "XButton1" | "XButton2" | "Extended";
 export type PointerDeviceType = "Mouse" | "Touch" | "Pen";
@@ -49,6 +70,8 @@ export declare class TouchActionEventArgs {
     Timestamp: number;
     /** ms since the previous event of the same pointer. */
     DeltaTimeMs: number;
+    /** The press's recent positions the velocity is measured over, carried from event to event of one pointer. */
+    Trail?: VelocityTrail;
     /**
      * Mouse wheel: Delta > 0 = wheel down / right (browser sign). IsHorizontal: the event is along the X axis (a tilting
      * wheel, the sideways part of a two-finger touchpad swipe), as C# WheelEventArgs.IsHorizontal.

package/dist/core/Gestures.js

@@ -18,6 +18,67 @@ export class DistanceInfo {
     Total = SKPoint.Empty;
     Velocity = SKPoint.Empty;
 }
+/**
+ * The last positions of a press with their times (DrawnUi.Rust gestures `Trail`, 6d525f7). Measured only against the
+ * previous move, irregular delivery made the velocity worthless: moves handled in one burst (queued pointer events
+ * handed over back to back by a busy main thread, WSLg pairs 0.01 ms apart) gave millions of px/s and every fling at
+ * the limit. Moves under BurstMs apart are one position; a move's velocity is its displacement over the last WindowMs,
+ * the earlier position interpolated; when the previous move is already that old, its own velocity exactly (evenly
+ * spaced input at 60 Hz measures as before).
+ */
+export class VelocityTrail {
+    /** A move's velocity is its displacement over this much time. */
+    static WindowMs = 16;
+    /** Below this since the press no velocity is measured yet: the first moves of a burst. */
+    static MinMs = 4;
+    /** Moves closer than this came in one burst: one position, at the burst's first time. */
+    static BurstMs = 1;
+    static Capacity = 16;
+    points = [];
+    Push(x, y, t) {
+        const last = this.points[this.points.length - 1];
+        if (last && t - last.T < VelocityTrail.BurstMs) {
+            last.X = x;
+            last.Y = y;
+            return;
+        }
+        if (this.points.length === VelocityTrail.Capacity)
+            this.points.shift();
+        this.points.push({ X: x, Y: y, T: t });
+    }
+    /** The velocity at (x, y) at time t (ms), pixels per second; `fallback` right after the press. */
+    Velocity(x, y, t, fallback) {
+        let n = this.points.length;
+        // a move in the burst of the last position measures from the positions before it
+        if (n > 0 && t - this.points[n - 1].T < VelocityTrail.BurstMs)
+            n--;
+        if (n === 0)
+            return fallback;
+        const since = t - this.points[0].T;
+        if (since < VelocityTrail.MinMs)
+            return fallback;
+        const window = Math.min(VelocityTrail.WindowMs, since), at = t - window;
+        const last = this.points[n - 1];
+        if (last.T <= at) {
+            const secs = (t - last.T) / 1000;
+            return new SKPoint((x - last.X) / secs, (y - last.Y) / secs);
+        }
+        // the position at `at`: between the two positions around it (the current one included)
+        let fromX = this.points[0].X, fromY = this.points[0].Y, prev = this.points[0];
+        for (let i = 1; i <= n; i++) {
+            const p = i < n ? this.points[i] : { X: x, Y: y, T: t };
+            if (p.T >= at) {
+                const share = p.T - prev.T < 1e-6 ? 1 : (at - prev.T) / (p.T - prev.T);
+                fromX = prev.X + (p.X - prev.X) * share;
+                fromY = prev.Y + (p.Y - prev.Y) * share;
+                break;
+            }
+            prev = p;
+        }
+        const secs = window / 1000;
+        return new SKPoint((x - fromX) / secs, (y - fromY) / secs);
+    }
+}
 /** AppoMobi.Gestures PointerData: the device and button behind a Down / Up / Tapped (every button is delivered). */
 export class PointerData {
     Button = "Left";
@@ -43,6 +104,8 @@ export class TouchActionEventArgs {
     Timestamp = performance.now();
     /** ms since the previous event of the same pointer. */
     DeltaTimeMs = 0;
+    /** The press's recent positions the velocity is measured over, carried from event to event of one pointer. */
+    Trail;
     /**
      * Mouse wheel: Delta > 0 = wheel down / right (browser sign). IsHorizontal: the event is along the X axis (a tilting
      * wheel, the sideways part of a two-finger touchpad swipe), as C# WheelEventArgs.IsHorizontal.
@@ -68,8 +131,18 @@ export class TouchActionEventArgs {
         d.End = released ? previous.Location : current.Location;
         d.Delta = released ? SKPoint.Empty : current.Location.Subtract(previous.Location);
         d.Total = previous.Distance.Total.Add(d.Delta);
-        const secs = current.DeltaTimeMs / 1000;
-        d.Velocity = secs > 0 && !released ? new SKPoint(d.Delta.X / secs, d.Delta.Y / secs) : previous.Distance.Velocity;
+        if (released)
+            d.Velocity = previous.Distance.Velocity;
+        else {
+            let trail = previous.Trail;
+            if (!trail) {
+                trail = new VelocityTrail();
+                trail.Push(previous.Location.X, previous.Location.Y, previous.Timestamp);
+            }
+            d.Velocity = trail.Velocity(current.Location.X, current.Location.Y, current.Timestamp, previous.Distance.Velocity);
+            trail.Push(current.Location.X, current.Location.Y, current.Timestamp);
+            current.Trail = trail;
+        }
         current.Distance = d;
     }
 }