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

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,9 +21,44 @@ 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";
+/** AppoMobi.Gestures PointerData: the device and button behind a Down / Up / Tapped (every button is delivered). */
+export declare class PointerData {
+    Button: MouseButton;
+    /** 1 = Left, 2 = Right, 3 = Middle, 4+ = extended, like AppoMobi.Gestures. */
+    ButtonNumber: number;
+    DeviceType: PointerDeviceType;
+    /** DOM `buttons` bitmask of the buttons held (1 left, 2 right, 4 middle, 8 back, 16 forward). */
+    PressedButtons: number;
+}
 /** AppoMobi.Gestures TouchActionEventArgs. */
 export declare class TouchActionEventArgs {
     Id: number;
+    /** Device and button of this event (mouse, pen, touch); undefined for wheel. */
+    Pointer?: PointerData;
     Type: TouchActionType;
     /** Pixels. */
     Location: SKPoint;
@@ -35,10 +70,21 @@ export declare class TouchActionEventArgs {
     Timestamp: number;
     /** ms since the previous event of the same pointer. */
     DeltaTimeMs: number;
-    /** Mouse wheel: Delta > 0 = wheel down (browser deltaY sign). */
+    /** 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.
+     */
     Wheel: {
         Delta: number;
+        IsHorizontal?: boolean;
     };
+    /**
+     * AppoMobi TouchActionEventArgs.Handled: set by a control that actually used the event. The canvas prevents the
+     * browser default (the page scrolling under the wheel) only for a Handled event in `Gestures="Enabled"`.
+     */
+    Handled: boolean;
     /** Same as the .NET helper: derives Start/End/Delta/Total from the previous event of the same pointer. */
     static FillDistanceInfo(current: TouchActionEventArgs, previous: TouchActionEventArgs | undefined): void;
 }

package/dist/core/Gestures.js

@@ -18,9 +18,81 @@ 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";
+    /** 1 = Left, 2 = Right, 3 = Middle, 4+ = extended, like AppoMobi.Gestures. */
+    ButtonNumber = 1;
+    DeviceType = "Mouse";
+    /** DOM `buttons` bitmask of the buttons held (1 left, 2 right, 4 middle, 8 back, 16 forward). */
+    PressedButtons = 0;
+}
 /** AppoMobi.Gestures TouchActionEventArgs. */
 export class TouchActionEventArgs {
     Id = 0;
+    /** Device and button of this event (mouse, pen, touch); undefined for wheel. */
+    Pointer;
     Type = "Pressed";
     /** Pixels. */
     Location = SKPoint.Empty;
@@ -32,8 +104,18 @@ export class TouchActionEventArgs {
     Timestamp = performance.now();
     /** ms since the previous event of the same pointer. */
     DeltaTimeMs = 0;
-    /** Mouse wheel: Delta > 0 = wheel down (browser deltaY sign). */
+    /** 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.
+     */
     Wheel = { Delta: 0 };
+    /**
+     * AppoMobi TouchActionEventArgs.Handled: set by a control that actually used the event. The canvas prevents the
+     * browser default (the page scrolling under the wheel) only for a Handled event in `Gestures="Enabled"`.
+     */
+    Handled = false;
     /** Same as the .NET helper: derives Start/End/Delta/Total from the previous event of the same pointer. */
     static FillDistanceInfo(current, previous) {
         if (!previous) {
@@ -49,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;
     }
 }

package/dist/core/Hover.d.ts

@@ -0,0 +1,47 @@
+import type { SkiaControl } from "./SkiaControl";
+/**
+ * DrawnUI hover (drawnui-cross 6m, C# DrawnView ReportHover / CommitHover): every control under the mouse that takes
+ * hover (`ReceivesHover`) is hovered, a card and the button inside it alike, as CSS :hover. Decided from the hit path
+ * of one pointer position, by the routing rules of ProcessGestures (visible, not InputTransparent, inside, children
+ * not locked, nothing below a control that blocks gestures below).
+ * While content moves under the pointer (a scroll glide, fling or pan, a carousel or drawer transition) hover is not
+ * tracked and what was hovered stays; one check at the last pointer position follows when it stops, and after
+ * controls are added or removed, a cell is rebound, a hovered control is hidden or a scroll jumps. Leaving the canvas
+ * clears hover at once. Touch never hovers. No allocation on frames where nothing changes.
+ */
+export declare class HoverManager {
+    /** The hovered controls, root first. */
+    readonly Hovered: SkiaControl[];
+    private readonly next;
+    /** The controls under the pointer at the last hit test, root first, and the pointer in each one's own space. */
+    readonly Path: SkiaControl[];
+    readonly PathX: number[];
+    readonly PathY: number[];
+    private readonly movers;
+    private hasPointer;
+    private x;
+    private y;
+    private paused;
+    private check;
+    /**
+     * The mouse (or a pen in range) moved to (x, y), canvas pixels, nothing pressed. The hit path is taken also while
+     * hover waits (the cursor follows it), hover changes only when nothing moves.
+     */
+    Move(root: SkiaControl | undefined, x: number, y: number): void;
+    /** Fills Path with the controls under the pointer by the routing rules of ProcessGestures. */
+    private HitTest;
+    /** The pointer left the canvas: nothing is hovered, also while content moves. */
+    Leave(): void;
+    /** The controls under a still pointer may have changed: checked once at the end of the frame. */
+    RequestCheck(): void;
+    /** A control that moves its content (MovesContent) while drawn: hover waits while any of them moves. */
+    RegisterMover(control: SkiaControl): void;
+    /** End of a frame: pause while content moves, else run a pending check (at most one a frame, none while pressed). */
+    AfterFrame(root: SkiaControl | undefined, pressed: boolean): void;
+    private static Shown;
+    /**
+     * The hovered set becomes the controls of the hit path that take hover (`fromPath`), or none: the ones that left get
+     * HoverChanged(false), then the new ones (true).
+     */
+    private Apply;
+}

package/dist/core/Hover.js

@@ -0,0 +1,134 @@
+import { SKPoint } from "./Gestures";
+/**
+ * DrawnUI hover (drawnui-cross 6m, C# DrawnView ReportHover / CommitHover): every control under the mouse that takes
+ * hover (`ReceivesHover`) is hovered, a card and the button inside it alike, as CSS :hover. Decided from the hit path
+ * of one pointer position, by the routing rules of ProcessGestures (visible, not InputTransparent, inside, children
+ * not locked, nothing below a control that blocks gestures below).
+ * While content moves under the pointer (a scroll glide, fling or pan, a carousel or drawer transition) hover is not
+ * tracked and what was hovered stays; one check at the last pointer position follows when it stops, and after
+ * controls are added or removed, a cell is rebound, a hovered control is hidden or a scroll jumps. Leaving the canvas
+ * clears hover at once. Touch never hovers. No allocation on frames where nothing changes.
+ */
+export class HoverManager {
+    /** The hovered controls, root first. */
+    Hovered = [];
+    next = [];
+    /** The controls under the pointer at the last hit test, root first, and the pointer in each one's own space. */
+    Path = [];
+    PathX = [];
+    PathY = [];
+    movers = [];
+    hasPointer = false;
+    x = 0;
+    y = 0;
+    paused = false;
+    check = false;
+    /**
+     * The mouse (or a pen in range) moved to (x, y), canvas pixels, nothing pressed. The hit path is taken also while
+     * hover waits (the cursor follows it), hover changes only when nothing moves.
+     */
+    Move(root, x, y) {
+        this.hasPointer = true;
+        this.x = x;
+        this.y = y;
+        this.HitTest(root);
+        if (this.paused)
+            return; // content moves under the pointer: what was hovered stays, one check when it stops
+        this.check = false;
+        this.Apply(true);
+    }
+    /** Fills Path with the controls under the pointer by the routing rules of ProcessGestures. */
+    HitTest(root) {
+        const path = this.Path;
+        path.length = 0;
+        this.PathX.length = 0;
+        this.PathY.length = 0;
+        if (root && root.IsVisible && !root.InputTransparent) {
+            const point = root.TransformPointToLocalSpace(new SKPoint(this.x, this.y));
+            if (root.HitIsInside(point.X, point.Y))
+                root.CollectHovered(point, path, this.PathX, this.PathY);
+        }
+    }
+    /** The pointer left the canvas: nothing is hovered, also while content moves. */
+    Leave() {
+        this.hasPointer = false;
+        this.check = false;
+        this.Path.length = 0;
+        this.PathX.length = 0;
+        this.PathY.length = 0;
+        this.Apply(false);
+    }
+    /** The controls under a still pointer may have changed: checked once at the end of the frame. */
+    RequestCheck() { if (this.hasPointer)
+        this.check = true; }
+    /** A control that moves its content (MovesContent) while drawn: hover waits while any of them moves. */
+    RegisterMover(control) { if (this.movers.indexOf(control) < 0)
+        this.movers.push(control); }
+    /** End of a frame: pause while content moves, else run a pending check (at most one a frame, none while pressed). */
+    AfterFrame(root, pressed) {
+        let moving = false;
+        for (let i = this.movers.length - 1; i >= 0; i--) {
+            const m = this.movers[i];
+            if (m.IsDisposed || !m.Superview) {
+                this.movers.splice(i, 1);
+                continue;
+            }
+            if (!moving && m.IsVisible && m.MovesContent())
+                moving = true;
+        }
+        if (moving) {
+            this.paused = true;
+            return;
+        }
+        if (this.paused) {
+            this.paused = false;
+            this.check = true;
+        }
+        // a hovered control (or an ancestor) hidden or removed under a still pointer stops being hovered
+        for (let i = 0; i < this.Hovered.length && !this.check; i++)
+            if (!HoverManager.Shown(this.Hovered[i]))
+                this.check = true;
+        if (!this.check)
+            return;
+        this.check = false;
+        if (!this.hasPointer || pressed)
+            return;
+        this.HitTest(root);
+        this.Apply(true);
+    }
+    static Shown(control) {
+        if (control.IsDisposed || !control.Superview)
+            return false;
+        for (let c = control; c; c = c.Parent)
+            if (!c.IsVisible)
+                return false;
+        return true;
+    }
+    /**
+     * The hovered set becomes the controls of the hit path that take hover (`fromPath`), or none: the ones that left get
+     * HoverChanged(false), then the new ones (true).
+     */
+    Apply(fromPath) {
+        const now = this.Hovered, next = this.next;
+        next.length = 0;
+        if (fromPath)
+            for (const c of this.Path)
+                if (c.ReceivesHover)
+                    next.push(c);
+        if (now.length === next.length) {
+            let same = true;
+            for (let i = 0; i < now.length && same; i++)
+                same = now[i] === next[i];
+            if (same)
+                return;
+        }
+        const was = now.splice(0);
+        now.push(...next);
+        for (const c of was)
+            if (now.indexOf(c) < 0)
+                c.ApplyHover(false);
+        for (const c of now)
+            if (was.indexOf(c) < 0)
+                c.ApplyHover(true);
+    }
+}

package/dist/core/KeyboardManager.d.ts

@@ -20,6 +20,19 @@ export declare class KeyboardManager {
     static AttachToKeyboard(): void;
     static Subscribe(down: (key: InputKey, e: KeyboardEvent) => void, char: (ch: string, e: KeyboardEvent) => void, up?: (key: InputKey, e: KeyboardEvent) => void): void;
     static Unsubscribe(down: (key: InputKey, e: KeyboardEvent) => void, char: (ch: string, e: KeyboardEvent) => void, up?: (key: InputKey, e: KeyboardEvent) => void): void;
+    /**
+     * Hooks observe keys, they never take them from the element that owns them (C# 845b26e9, GitHub #231). True when a
+     * focused DOM element is the key's target: a page input, textarea, select, button, link or contenteditable, an
+     * accessibility overlay node, the drawn editor's hidden textarea. False when the key goes to the page itself (body,
+     * html) or the canvas. A handler that acts on keys (edits, moves, calls preventDefault) skips owned keys, except
+     * those of its own element.
+     */
+    static IsOwnedByElement(e: KeyboardEvent): boolean;
+    /**
+     * The key belongs to the input method (an IME composition, a soft keyboard): isComposing, keyCode 229, key "Process"
+     * or "Unidentified". Its result arrives as input events (TextInputProxy), never act on the key itself.
+     */
+    static IsInputMethodKey(e: KeyboardEvent): boolean;
     /** JS blurExternalTextInput: a page text input outside the canvas would keep receiving the keys. */
     static BlurExternalTextInput(): void;
 }

package/dist/core/KeyboardManager.js

@@ -45,6 +45,24 @@ export class KeyboardManager {
         if (up)
             KeyboardManager.keyUp.delete(up);
     }
+    /**
+     * Hooks observe keys, they never take them from the element that owns them (C# 845b26e9, GitHub #231). True when a
+     * focused DOM element is the key's target: a page input, textarea, select, button, link or contenteditable, an
+     * accessibility overlay node, the drawn editor's hidden textarea. False when the key goes to the page itself (body,
+     * html) or the canvas. A handler that acts on keys (edits, moves, calls preventDefault) skips owned keys, except
+     * those of its own element.
+     */
+    static IsOwnedByElement(e) {
+        const tag = e.target?.tagName;
+        return !!tag && tag !== "BODY" && tag !== "HTML" && tag !== "CANVAS";
+    }
+    /**
+     * The key belongs to the input method (an IME composition, a soft keyboard): isComposing, keyCode 229, key "Process"
+     * or "Unidentified". Its result arrives as input events (TextInputProxy), never act on the key itself.
+     */
+    static IsInputMethodKey(e) {
+        return e.isComposing || e.keyCode === 229 || e.key === "Process" || e.key === "Unidentified";
+    }
     /** JS blurExternalTextInput: a page text input outside the canvas would keep receiving the keys. */
     static BlurExternalTextInput() {
         const a = typeof document !== "undefined" ? document.activeElement : null;

package/dist/core/ScrollAnimators.js

@@ -1,6 +1,7 @@
 // Mirrors DrawnUi scrolling physics: DecelerationTimingParameters + ScrollFlingAnimator (fling),
 // Spring + SpringTimingParameters + SpringWithVelocityAnimator (bounce), VelocityAccumulator, RubberBandUtils.
 import { SkiaValueAnimator } from "./Animators";
+import { VelocityTrail } from "./Gestures";
 /** UIKit-style exponential deceleration: value(t) = v0 * (rate^(1000 t) - 1) / k, k = 1000 ln(rate). */
 export class DecelerationTimingParameters {
     InitialValue;
@@ -201,6 +202,14 @@ export class VelocityAccumulator {
     Clear() { this.samples.length = 0; }
     CaptureVelocity(x, y, arrivedTimeNanos = 0) {
         const time = arrivedTimeNanos > 0 ? arrivedTimeNanos / 1e6 : performance.now();
+        // a move in the same burst as the last one replaces it: the first move of a burst carries only part of the burst's
+        // distance (DrawnUi.Rust VelocityAccumulator, 6d525f7)
+        const last = this.samples[this.samples.length - 1];
+        if (last && time - last.time < VelocityTrail.BurstMs) {
+            last.X = x;
+            last.Y = y;
+            return;
+        }
         if (this.samples.length === VelocityAccumulator.MaxSampleSize)
             this.samples.shift();
         this.samples.push({ X: x, Y: y, time });