drawnui-react 0.1.0-preview.1

package/dist/core/Animators.d.ts

@@ -0,0 +1,82 @@
+import type { DrawingContext, SkiaControl } from "./SkiaControl";
+import { Easing } from "./Easing";
+import { type Color } from "./Types";
+/** DrawnUi IOverlayEffect: drawn by the owning control after its content (PostAnimators). */
+export interface IOverlayEffect {
+    /** Return true to request another frame (still animating). */
+    Render(context: DrawingContext, control: SkiaControl): boolean;
+}
+/** DrawnUi AnimatorBase: registration + running state. Time is in nanoseconds like the .NET version. */
+export declare class AnimatorBase {
+    readonly Uid: number;
+    Parent: SkiaControl | null;
+    /** Post animators are also added to Parent.PostAnimators and drawn above its content. */
+    IsPostAnimator: boolean;
+    IsRunning: boolean;
+    WasStarted: boolean;
+    LastFrameTimeNanos: number;
+    StartFrameTimeNanos: number;
+    OnStart?: () => void;
+    OnStop?: () => void;
+    private delayHandle;
+    constructor(parent: SkiaControl);
+    protected Register(): boolean;
+    protected Unregister(): void;
+    Start(delayMs?: number): void;
+    Stop(): void;
+    /** Returns true when there is nothing more to do (not running / finished). */
+    TickFrame(frameTimeNanos: number): boolean;
+    Dispose(): void;
+    private SetRunning;
+}
+/** DrawnUi SkiaValueAnimator: drives mValue from mMinValue to mMaxValue over Speed ms with Easing. */
+export declare class SkiaValueAnimator extends AnimatorBase {
+    mValue: number;
+    mMinValue: number;
+    mMaxValue: number;
+    /** Duration in ms. */
+    Speed: number;
+    Easing: Easing;
+    /** -1 = forever, n = repeat n more times. */
+    Repeat: number;
+    /** Eased progress, may exceed 1 on the finishing frame. */
+    protected Progress: number;
+    OnUpdated?: (value: number) => void;
+    Finished?: () => void;
+    TickFrame(frameTimeNanos: number): boolean;
+    /** Passed over mValue; subclasses derive their own reported value here. */
+    protected TransformReportedValue(_deltaT: number): number;
+    /** Updates mValue from elapsed time; true when the target was reached. */
+    protected UpdateValue(_deltaT: number, deltaFromStart: number): boolean;
+    protected FinishedRunning(): boolean;
+}
+/** DrawnUi RenderingAnimator: a value animator that paints itself above its Parent (IOverlayEffect). */
+export declare class RenderingAnimator extends SkiaValueAnimator implements IOverlayEffect {
+    constructor(parent: SkiaControl);
+    Stop(): void;
+    /** While running, the ancestors' caches hold a frame without this effect: stale them so the parent's ExecutePostAnimators runs (C# parent invalidation). */
+    TickFrame(frameTimeNanos: number): boolean;
+    Render(context: DrawingContext, control: SkiaControl): boolean;
+    protected OnRendering(_context: DrawingContext, _control: SkiaControl): boolean;
+    /** Top-left of the control in canvas pixels (its last drawn position). */
+    protected static GetSelfDrawingLocation(control: SkiaControl): {
+        X: number;
+        Y: number;
+    };
+    /** Runs draw() clipped to the control's shape when control.ClipEffects is set. */
+    protected static DrawWithClipping(context: DrawingContext, control: SkiaControl, draw: () => void): void;
+}
+/** DrawnUi RippleAnimator: expanding fading circle from the touch point, 500ms CubicIn. */
+export declare class RippleAnimator extends RenderingAnimator {
+    static DiameterDefault: number;
+    static OpacityDefault: number;
+    Color: Color;
+    /** Touch point inside the control, points. */
+    X: number;
+    Y: number;
+    Diameter: number;
+    Opacity: number;
+    constructor(control: SkiaControl);
+    protected OnRendering(context: DrawingContext, control: SkiaControl): boolean;
+    protected TransformReportedValue(deltaT: number): number;
+}

package/dist/core/Animators.js

@@ -0,0 +1,247 @@
+// Mirrors DrawnUi Features/Animators: AnimatorBase -> SkiaValueAnimator -> RenderingAnimator (+ RippleAnimator).
+// Animators register with the Canvas (Superview.RegisterAnimator) and tick once per drawn frame.
+import { Easing } from "./Easing";
+import { Super } from "./Super";
+import { Colors } from "./Types";
+let uidCounter = 0;
+/** DrawnUi AnimatorBase: registration + running state. Time is in nanoseconds like the .NET version. */
+export class AnimatorBase {
+    Uid = ++uidCounter;
+    Parent;
+    /** Post animators are also added to Parent.PostAnimators and drawn above its content. */
+    IsPostAnimator = false;
+    IsRunning = false;
+    WasStarted = false;
+    LastFrameTimeNanos = 0;
+    StartFrameTimeNanos = 0;
+    OnStart;
+    OnStop;
+    delayHandle = 0;
+    constructor(parent) { this.Parent = parent; }
+    Register() {
+        const parent = this.Parent;
+        if (!parent)
+            return false;
+        if (this.IsPostAnimator) {
+            const effect = this;
+            if (typeof effect.Render !== "function")
+                throw new Error("Post animator must implement IOverlayEffect");
+            if (!parent.PostAnimators.includes(effect))
+                parent.PostAnimators.push(effect);
+        }
+        const ok = parent.Superview?.RegisterAnimator(this) ?? false;
+        parent.Repaint();
+        return ok;
+    }
+    Unregister() {
+        const parent = this.Parent;
+        if (!parent)
+            return;
+        if (this.IsPostAnimator) {
+            const i = parent.PostAnimators.indexOf(this);
+            if (i >= 0)
+                parent.PostAnimators.splice(i, 1);
+        }
+        parent.Superview?.UnregisterAnimator(this.Uid);
+    }
+    Start(delayMs = 0) {
+        if (this.delayHandle) {
+            clearTimeout(this.delayHandle);
+            this.delayHandle = 0;
+        }
+        if (delayMs > 0) {
+            this.delayHandle = window.setTimeout(() => { this.delayHandle = 0; this.Start(); }, delayMs);
+            return;
+        }
+        if (this.Register()) {
+            this.WasStarted = true;
+            if (!this.IsRunning) {
+                this.LastFrameTimeNanos = 0;
+                this.StartFrameTimeNanos = 0;
+                this.SetRunning(true);
+            }
+        }
+    }
+    Stop() {
+        if (this.delayHandle) {
+            clearTimeout(this.delayHandle);
+            this.delayHandle = 0;
+        }
+        this.Unregister();
+        this.LastFrameTimeNanos = 0;
+        this.StartFrameTimeNanos = 0;
+        this.SetRunning(false);
+        this.WasStarted = false;
+    }
+    /** Returns true when there is nothing more to do (not running / finished). */
+    TickFrame(frameTimeNanos) {
+        if (!this.IsRunning)
+            return true;
+        this.LastFrameTimeNanos = frameTimeNanos;
+        return false;
+    }
+    Dispose() {
+        this.Stop();
+        this.Parent = null;
+        this.OnStart = undefined;
+        this.OnStop = undefined;
+    }
+    SetRunning(value) {
+        if (this.IsRunning === value)
+            return;
+        this.IsRunning = value;
+        if (value)
+            this.OnStart?.();
+        else
+            this.OnStop?.();
+    }
+}
+/** DrawnUi SkiaValueAnimator: drives mValue from mMinValue to mMaxValue over Speed ms with Easing. */
+export class SkiaValueAnimator extends AnimatorBase {
+    mValue = 0;
+    mMinValue = Number.MIN_SAFE_INTEGER;
+    mMaxValue = Number.MAX_SAFE_INTEGER;
+    /** Duration in ms. */
+    Speed = 0;
+    Easing = Easing.Linear;
+    /** -1 = forever, n = repeat n more times. */
+    Repeat = 0;
+    /** Eased progress, may exceed 1 on the finishing frame. */
+    Progress = 0;
+    OnUpdated;
+    Finished;
+    TickFrame(frameTimeNanos) {
+        if (!this.IsRunning)
+            return true;
+        if (this.LastFrameTimeNanos === 0) {
+            this.LastFrameTimeNanos = frameTimeNanos;
+            this.StartFrameTimeNanos = frameTimeNanos;
+        }
+        const deltaFromStart = frameTimeNanos - this.StartFrameTimeNanos;
+        const deltaNanos = frameTimeNanos - this.LastFrameTimeNanos;
+        this.LastFrameTimeNanos = frameTimeNanos;
+        let finished = this.UpdateValue(deltaNanos, deltaFromStart);
+        // Always evaluate: subclasses derive their state here (a?.(f()) would skip f() with no subscriber).
+        const reported = this.TransformReportedValue(deltaNanos);
+        this.OnUpdated?.(reported);
+        if (finished)
+            finished = this.FinishedRunning();
+        return finished;
+    }
+    /** 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. */
+    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) {
+            this.mValue = this.mMaxValue;
+            return true;
+        }
+        this.mValue = value;
+        return false;
+    }
+    FinishedRunning() {
+        if (this.Repeat < 0 || this.Repeat > 0) {
+            if (this.Repeat > 0)
+                this.Repeat--;
+            this.mValue = this.mMinValue;
+            this.LastFrameTimeNanos = 0;
+            this.StartFrameTimeNanos = 0;
+            return false;
+        }
+        this.Stop();
+        this.Finished?.();
+        return true;
+    }
+}
+/** DrawnUi RenderingAnimator: a value animator that paints itself above its Parent (IOverlayEffect). */
+export class RenderingAnimator extends SkiaValueAnimator {
+    constructor(parent) { super(parent); }
+    Stop() {
+        const parent = this.Parent;
+        super.Stop();
+        parent?.RepaintComposition(); // ancestors re-record without the effect
+    }
+    /** While running, the ancestors' caches hold a frame without this effect: stale them so the parent's ExecutePostAnimators runs (C# parent invalidation). */
+    TickFrame(frameTimeNanos) {
+        const finished = super.TickFrame(frameTimeNanos);
+        if (this.IsRunning)
+            this.Parent?.RepaintComposition();
+        return finished;
+    }
+    Render(context, control) {
+        return this.OnRendering(context, control);
+    }
+    OnRendering(_context, _control) { return false; }
+    /** Top-left of the control in canvas pixels (its last drawn position). */
+    static GetSelfDrawingLocation(control) {
+        return { X: control.DrawingRect.Left, Y: control.DrawingRect.Top };
+    }
+    /** Runs draw() clipped to the control's shape when control.ClipEffects is set. */
+    static DrawWithClipping(context, control, draw) {
+        const canvas = context.Context.Canvas;
+        if (!control.ClipEffects) {
+            draw();
+            return;
+        }
+        const clip = control.CreateClip();
+        const count = canvas.save();
+        canvas.clipPath(clip, Super.CK.ClipOp.Intersect, true);
+        draw();
+        canvas.restoreToCount(count);
+        clip.delete();
+    }
+}
+/** DrawnUi RippleAnimator: expanding fading circle from the touch point, 500ms CubicIn. */
+export class RippleAnimator extends RenderingAnimator {
+    static DiameterDefault = 300.0;
+    static OpacityDefault = 0.2;
+    Color = Colors.White;
+    /** Touch point inside the control, points. */
+    X = 0;
+    Y = 0;
+    Diameter = 0;
+    Opacity = 0;
+    constructor(control) {
+        super(control);
+        this.IsPostAnimator = true;
+        this.Speed = 500;
+        this.mMinValue = 0;
+        this.mMaxValue = 1;
+        this.Easing = Easing.CubicIn;
+    }
+    OnRendering(context, control) {
+        if (!this.IsRunning)
+            return false;
+        const loc = RenderingAnimator.GetSelfDrawingLocation(control);
+        const x = this.X * context.Scale + loc.X;
+        const y = this.Y * context.Scale + loc.Y;
+        RenderingAnimator.DrawWithClipping(context, control, () => {
+            const paint = new Super.CK.Paint();
+            paint.setAntiAlias(true);
+            const c = Super.ParseColor(this.Color);
+            paint.setColor(Super.CK.Color4f(c[0], c[1], c[2], this.Opacity));
+            // Same as the .NET RippleAnimator: Diameter is passed as the circle radius.
+            context.Context.Canvas.drawCircle(x, y, this.Diameter * context.Scale, paint);
+            paint.delete();
+        });
+        return true;
+    }
+    TransformReportedValue(deltaT) {
+        const progress = super.TransformReportedValue(deltaT);
+        const opacityProgress = progress * 1.15;
+        if (opacityProgress <= 1)
+            this.Opacity = RippleAnimator.OpacityDefault - RippleAnimator.OpacityDefault * opacityProgress;
+        this.Diameter = RippleAnimator.DiameterDefault * progress;
+        return progress;
+    }
+}

package/dist/core/Canvas.d.ts

@@ -0,0 +1,89 @@
+import type { Surface } from "canvaskit-wasm";
+import type { SkiaControl } from "./SkiaControl";
+import type { AnimatorBase } from "./Animators";
+import { SkiaAccessibilityManager } from "./Accessibility";
+import { type Color, type RenderingModeType } from "./Types";
+import { type GesturesMode, 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.
+ * Frames are drawn only after Update() (invalidation), never continuously.
+ * Gestures are accumulated and processed in order at the START of the next frame, like DrawnUi.
+ */
+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;
+    BackgroundColor: Color;
+    /** Accelerated = WebGL surface, Default = software. Read once at first frame. */
+    RenderingMode: RenderingModeType;
+    RenderingScale: number;
+    /** Duration of the last Draw in ms (measure + arrange + render, excluding GPU flush). */
+    FrameTime: number;
+    /** Frames per second over the last second of drawn frames. */
+    FPS: number;
+    private frameTimes;
+    /** Registry + rate-limited snapshot of accessible controls, rendered by the DOM overlay (DrawnUi AccessibilityManager). */
+    readonly AccessibilityManager: SkiaAccessibilityManager;
+    private content?;
+    get Content(): SkiaControl | undefined;
+    set Content(value: SkiaControl | undefined);
+    private surface?;
+    /** GL context + GrContext live for the Canvas lifetime; only the on-screen surface is recreated on resize. */
+    private glHandle?;
+    private grContext?;
+    private frameId;
+    private disposed;
+    private readonly observer;
+    constructor(Element: HTMLCanvasElement);
+    /** Request a redraw (full measure + arrange + render) on the next animation frame. */
+    Update(): void;
+    /** Deletes the current surface; a pending frame on it is cancelled first (drawing on a deleted surface faults). */
+    private ReleaseSurface;
+    /** On-screen surface at the element's current pixel size, reusing the GL/GrContext when accelerated. */
+    private CreateSurface;
+    /**
+     * Resize = the browser wipes the bitmap when width/height change, so the new frame is drawn
+     * SYNCHRONOUSLY here. ResizeObserver callbacks run after layout and before paint, so the
+     * redrawn content lands in the same paint and no blank frame is ever shown while dragging.
+     */
+    private OnResized;
+    /** Draws one frame immediately (outside the rAF loop) and presents it. */
+    private DrawNow;
+    private Draw;
+    private readonly disposeQueue;
+    /** Queues a cache for deletion after the current frame has been flushed. */
+    DisposeObject(obj: {
+        Dispose(): void;
+    }): void;
+    private DrainDisposeQueue;
+    readonly AnimatingControls: Map<number, AnimatorBase>;
+    RegisterAnimator(animator: AnimatorBase): boolean;
+    UnregisterAnimator(uid: number): void;
+    /** Ticks every registered animator once; returns how many ran. */
+    protected ExecuteAnimators(frameTimeNanos: number): number;
+    /** Frames drawn so far (SkiaBackdrop uses it to refresh once after a cached record). */
+    FrameIndex: number;
+    /** On-screen surface (SkiaBackdrop snapshots it). */
+    get Surface(): Surface | undefined;
+    Dispose(): void;
+    private gestures;
+    get Gestures(): GesturesMode;
+    set Gestures(value: GesturesMode);
+    private readonly activeTouchIds;
+    private readonly pointerDownArgs;
+    private readonly previousTouchArgs;
+    private readonly pendingGestures;
+    private readonly onPointer;
+    private readonly preventTouch;
+    /** Mouse wheel -> TouchActionResult.Wheel (page scroll suppressed while gestures are enabled). */
+    private readonly onWheel;
+    private AttachInput;
+    private DetachInput;
+    /** Port of DrawnUi.Blazor Canvas.OnTouchAction: per-pointer state machine producing Down / Panning / Tapped / Up. */
+    OnTouchAction(args: TouchActionEventArgs): void;
+    private OnGestureEvent;
+    private ProcessPendingGestures;
+    /** Entry into the control tree, same shape as DrawnUi Canvas.ProcessGestures. */
+    protected ProcessGestures(root: SkiaControl, args: SkiaGesturesParameters): SkiaControl | null;
+}