drawnui-react 0.1.0-preview.1

package/dist/controls/SkiaGif.d.ts

@@ -0,0 +1,54 @@
+import type { Image } from "canvaskit-wasm";
+import type { DrawingContext } from "../core/SkiaControl";
+import { type DrawImageAlignment, SKRect, ScaledSize, type TransformAspect } from "../core/Types";
+import { AnimatedFramesRenderer } from "./AnimatedFramesRenderer";
+/** Mirrors DrawnUi GifAnimation: every frame decoded once, seek by frame or by time. */
+export declare class GifAnimation {
+    Frames: Image[];
+    /** Current frame image, changed by SeekFrame. */
+    Frame?: Image;
+    Width: number;
+    Height: number;
+    DurationMs: number;
+    TotalFrames: number;
+    private positionsMs;
+    /** Negative = the last frame. */
+    SeekFrame(frame: number): void;
+    GetFrameNumber(msTime: number): number;
+    /** Decodes every frame of an encoded GIF (CanvasKit AnimatedImage). */
+    LoadFromBytes(bytes: ArrayBuffer): void;
+    Dispose(): void;
+}
+/**
+ * Mirrors DrawnUi SkiaGif: `Source` (URL / app path), `Aspect` (default AspectFitFill), `AutoPlay`, `Repeat`,
+ * `SpeedRatio`, `DefaultFrame`, `Start`/`Stop`/`Seek(ms)`; frames are drawn like SkiaImage draws its bitmap.
+ */
+export declare class SkiaGif extends AnimatedFramesRenderer {
+    Aspect: TransformAspect;
+    HorizontalAlignment: DrawImageAlignment;
+    VerticalAlignment: DrawImageAlignment;
+    Success?: (sender: SkiaGif, source: string) => void;
+    Error?: (sender: SkiaGif, error: Error) => void;
+    Animation?: GifAnimation;
+    private source;
+    private loadGeneration;
+    constructor();
+    get Source(): string;
+    set Source(v: string);
+    Start(delayMs?: number): void;
+    protected OnAnimatorUpdated(value: number): void;
+    /** Seeks by time in ms (the animator range is 0..DurationMs). */
+    protected OnAnimatorSeeking(time: number): void;
+    protected OnAnimatorInitializing(): void;
+    protected ApplySpeed(): void;
+    protected CheckCanStartAnimator(): boolean;
+    SetAnimation(animation: GifAnimation, disposePrevious: boolean): void;
+    ReloadSource(): void;
+    /** Loads (does not apply) a GIF; C# LoadSource. */
+    LoadSource(source: string): Promise<GifAnimation | undefined>;
+    /** Same sizing as SkiaImage: an unbounded axis follows the GIF aspect. */
+    protected MeasureAbsolute(widthConstraint: number, heightConstraint: number, scale: number): ScaledSize;
+    protected RenderFrame(ctx: DrawingContext): void;
+    protected OnDisposing(): void;
+}
+export type { SKRect };

package/dist/controls/SkiaGif.js

@@ -0,0 +1,206 @@
+import { Super } from "../core/Super";
+import { ScaledSize } from "../core/Types";
+import { AnimatedFramesRenderer } from "./AnimatedFramesRenderer";
+import { SkiaImage } from "./SkiaImage";
+/** Mirrors DrawnUi GifAnimation: every frame decoded once, seek by frame or by time. */
+export class GifAnimation {
+    Frames = [];
+    /** Current frame image, changed by SeekFrame. */
+    Frame;
+    Width = 0;
+    Height = 0;
+    DurationMs = 0;
+    TotalFrames = 0;
+    positionsMs = [];
+    /** Negative = the last frame. */
+    SeekFrame(frame) {
+        if (frame > this.TotalFrames - 1)
+            frame = this.TotalFrames - 1;
+        if (frame < 0)
+            frame = this.TotalFrames - 1;
+        if (frame >= 0 && frame <= this.TotalFrames - 1)
+            this.Frame = this.Frames[frame];
+    }
+    GetFrameNumber(msTime) {
+        if (this.positionsMs.length === 0 || this.DurationMs <= 0)
+            return 0;
+        if (msTime < 0)
+            msTime = this.DurationMs + msTime;
+        msTime %= this.DurationMs;
+        for (let i = 0; i < this.positionsMs.length; i++)
+            if (msTime < this.positionsMs[i])
+                return i;
+        return 0;
+    }
+    /** Decodes every frame of an encoded GIF (CanvasKit AnimatedImage). */
+    LoadFromBytes(bytes) {
+        const CK = Super.CK;
+        const animated = CK.MakeAnimatedImageFromEncoded(bytes);
+        if (!animated)
+            return;
+        const count = animated.getFrameCount();
+        const frames = [];
+        const positions = [];
+        let total = 0;
+        for (let i = 0; i < count; i++) {
+            if (i > 0)
+                animated.decodeNextFrame();
+            const duration = Math.max(1, animated.currentFrameDuration()); // ms
+            const image = animated.makeImageAtCurrentFrame();
+            if (!image)
+                break;
+            frames.push(image);
+            total += duration;
+            positions.push(total);
+        }
+        this.Width = animated.width();
+        this.Height = animated.height();
+        animated.delete();
+        for (const f of this.Frames)
+            f.delete();
+        this.Frames = frames;
+        this.TotalFrames = frames.length;
+        this.DurationMs = total;
+        this.positionsMs = positions;
+        this.SeekFrame(0);
+    }
+    Dispose() {
+        for (const f of this.Frames)
+            f.delete();
+        this.Frames = [];
+        this.Frame = undefined;
+        this.TotalFrames = 0;
+    }
+}
+/**
+ * Mirrors DrawnUi SkiaGif: `Source` (URL / app path), `Aspect` (default AspectFitFill), `AutoPlay`, `Repeat`,
+ * `SpeedRatio`, `DefaultFrame`, `Start`/`Stop`/`Seek(ms)`; frames are drawn like SkiaImage draws its bitmap.
+ */
+export class SkiaGif extends AnimatedFramesRenderer {
+    Aspect = "AspectFitFill";
+    HorizontalAlignment = "Center";
+    VerticalAlignment = "Center";
+    Success;
+    Error;
+    Animation;
+    source = "";
+    loadGeneration = 0;
+    constructor() {
+        super();
+        this.UseCache = "ImageDoubleBuffered";
+    }
+    get Source() { return this.source; }
+    set Source(v) { if (this.source !== v) {
+        this.source = v;
+        this.ReloadSource();
+    } }
+    Start(delayMs = 0) { if ((this.Animation?.TotalFrames ?? 0) > 0)
+        super.Start(delayMs); }
+    OnAnimatorUpdated(value) { this.Seek(value); }
+    /** Seeks by time in ms (the animator range is 0..DurationMs). */
+    OnAnimatorSeeking(time) {
+        const a = this.Animation;
+        if (!a)
+            return;
+        const before = a.Frame;
+        a.SeekFrame(a.GetFrameNumber(time));
+        if (a.Frame !== before) {
+            this.InvalidateCache();
+            this.RepaintComposition();
+        }
+    }
+    OnAnimatorInitializing() {
+        if (!this.Animation || !this.Animator)
+            return;
+        this.ApplySpeed();
+        this.Animator.mValue = 0;
+        this.Animator.mMinValue = 0;
+        this.Animator.mMaxValue = this.Animation.DurationMs;
+    }
+    ApplySpeed() {
+        if (!this.Animation || !this.Animator)
+            return;
+        const d = this.Animation.DurationMs;
+        this.Animator.Speed = this.SpeedRatio < 1 ? d * (1 + this.SpeedRatio) : d / this.SpeedRatio;
+    }
+    CheckCanStartAnimator() { return (this.Animation?.TotalFrames ?? 0) > 0; }
+    SetAnimation(animation, disposePrevious) {
+        if (!animation || animation === this.Animation)
+            return;
+        const wasPlaying = this.IsPlaying;
+        const kill = this.Animation;
+        if (wasPlaying)
+            this.Stop();
+        this.Animation = animation;
+        this.InitializeAnimator();
+        this.OnAnimatorSeeking(this.DefaultFrame);
+        if (wasPlaying && !this.IsPlaying)
+            this.Start();
+        if (kill && disposePrevious)
+            kill.Dispose();
+        this.Update();
+    }
+    ReloadSource() {
+        if (!this.source)
+            return;
+        const generation = ++this.loadGeneration;
+        const source = this.source;
+        this.LoadSource(source).then((animation) => { if (generation !== this.loadGeneration)
+            return; if (animation) {
+            this.Success?.(this, source);
+            this.SetAnimation(animation, true);
+        }
+        else
+            this.Error?.(this, new Error(`Failed to load source ${source}`)); }, (e) => { if (generation === this.loadGeneration)
+            this.Error?.(this, e); });
+    }
+    /** Loads (does not apply) a GIF; C# LoadSource. */
+    async LoadSource(source) {
+        if (!source)
+            return undefined;
+        const r = await fetch(source);
+        if (!r.ok)
+            throw new Error(`${r.status} ${source}`);
+        const animation = new GifAnimation();
+        animation.LoadFromBytes(await r.arrayBuffer());
+        return animation.TotalFrames > 0 ? animation : undefined;
+    }
+    /** Same sizing as SkiaImage: an unbounded axis follows the GIF aspect. */
+    MeasureAbsolute(widthConstraint, heightConstraint, scale) {
+        const a = this.Animation;
+        let w = widthConstraint, h = heightConstraint;
+        if (a && a.Width > 0 && a.Height > 0) {
+            const aspect = a.Width / a.Height;
+            if (!isFinite(w) && isFinite(h))
+                w = h * aspect;
+            else if (!isFinite(h) && isFinite(w))
+                h = w / aspect;
+        }
+        if (!isFinite(w) || !isFinite(h))
+            return ScaledSize.FromPixels(0, 0, scale);
+        return ScaledSize.FromPixels(w, h, scale);
+    }
+    RenderFrame(ctx) {
+        const img = this.Animation?.Frame;
+        if (!img)
+            return;
+        const CK = Super.CK;
+        const dest = ctx.Destination;
+        const scaled = SkiaImage.RescaleAspect(img.width(), img.height(), dest, this.Aspect);
+        const display = SkiaImage.CalculateDisplayRect(dest, img.width() * scaled.X, img.height() * scaled.Y, this.HorizontalAlignment, this.VerticalAlignment);
+        const canvas = ctx.Context.Canvas;
+        const saved = canvas.save();
+        canvas.clipRect(CK.LTRBRect(dest.Left, dest.Top, dest.Right, dest.Bottom), CK.ClipOp.Intersect, true);
+        const paint = new CK.Paint();
+        paint.setAntiAlias(true);
+        canvas.drawImageRectOptions(img, CK.LTRBRect(0, 0, img.width(), img.height()), CK.LTRBRect(display.Left, display.Top, display.Right, display.Bottom), CK.FilterMode.Linear, CK.MipmapMode.Linear, paint);
+        paint.delete();
+        canvas.restoreToCount(saved);
+    }
+    OnDisposing() {
+        this.loadGeneration++;
+        super.OnDisposing();
+        this.Animation?.Dispose();
+        this.Animation = undefined;
+    }
+}

package/dist/controls/SkiaHotspot.d.ts

@@ -0,0 +1,13 @@
+import { SkiaControl } from "../core/SkiaControl";
+import type { GestureEventProcessingInfo, SkiaGesturesParameters } from "../core/Gestures";
+/** Mirrors DrawnUi SkiaHotspot: invisible Fill/Fill tap area. Consumes only Tapped (and Panning when LockPanning). */
+export declare class SkiaHotspot extends SkiaControl {
+    LockPanning: boolean;
+    TouchDown: boolean;
+    TotalDown: number;
+    TotalTapped: number;
+    Down?: (sender: SkiaHotspot, args: SkiaGesturesParameters) => void;
+    Up?: (sender: SkiaHotspot, args: SkiaGesturesParameters) => void;
+    constructor();
+    ProcessGestures(args: SkiaGesturesParameters, apply: GestureEventProcessingInfo): SkiaControl | null;
+}

package/dist/controls/SkiaHotspot.js

@@ -0,0 +1,36 @@
+import { SkiaControl } from "../core/SkiaControl";
+/** Mirrors DrawnUi SkiaHotspot: invisible Fill/Fill tap area. Consumes only Tapped (and Panning when LockPanning). */
+export class SkiaHotspot extends SkiaControl {
+    LockPanning = false;
+    TouchDown = false;
+    TotalDown = 0;
+    TotalTapped = 0;
+    Down;
+    Up;
+    constructor() {
+        super();
+        this.HorizontalOptions = "Fill";
+        this.VerticalOptions = "Fill";
+    }
+    ProcessGestures(args, apply) {
+        if (args.Type === "Down") {
+            this.TotalDown++;
+            this.TouchDown = true;
+            this.Down?.(this, args);
+        }
+        else if (args.Type === "Up") {
+            this.TouchDown = false;
+            this.Up?.(this, args);
+        }
+        else if (args.Type === "Tapped") {
+            const consumed = this.SendTapped(args, apply);
+            this.TotalTapped++;
+            return consumed ? this : null;
+        }
+        else if (args.Type === "Panning") {
+            if (this.LockPanning)
+                return this;
+        }
+        return null;
+    }
+}

package/dist/controls/SkiaImage.d.ts

@@ -0,0 +1,75 @@
+import type { ColorFilter, Image, ImageFilter } from "canvaskit-wasm";
+import { type DrawingContext, SkiaControl } from "../core/SkiaControl";
+import { type LoadPriority } from "../core/SkiaImageManager";
+import { type Color, type DrawImageAlignment, SKRect, ScaledSize, type TransformAspect } from "../core/Types";
+import { type BlendMode, type SkiaImageEffect } from "../core/ImageEffects";
+/**
+ * Mirrors DrawnUi SkiaImage: async Source -> decoded image, drawn into DrawingRect with Aspect
+ * (default AspectCover = fill and crop) and alignment. Content larger than the box is clipped.
+ */
+export declare class SkiaImage extends SkiaControl {
+    Aspect: TransformAspect;
+    HorizontalAlignment: DrawImageAlignment;
+    VerticalAlignment: DrawImageAlignment;
+    AddEffect: SkiaImageEffect;
+    ColorTint: Color;
+    EffectBlendMode: BlendMode;
+    Darken: number;
+    Lighten: number;
+    Contrast: number;
+    Brightness: number;
+    Gamma: number;
+    /** Blur sigma (points); 0 = off. */
+    Blur: number;
+    Saturation: number;
+    ZoomX: number;
+    ZoomY: number;
+    /** Points, shifts the drawn image inside the box. */
+    HorizontalOffset: number;
+    VerticalOffset: number;
+    /**
+     * C# PaintColorFilter / PaintImageFilter: set your own CanvasKit filters (owned by you, not deleted here); a color
+     * filter set here is used instead of the one derived from `AddEffect` (`AddEffect="Custom"` derives none), an image
+     * filter replaces the `Blur` one.
+     */
+    PaintColorFilter?: ColorFilter;
+    PaintImageFilter?: ImageFilter;
+    /** C# PaintColorFilter selection (null = no filter). */
+    private CreateColorFilter;
+    /** Fired after the image decoded and the control invalidated. */
+    Success?: (sender: SkiaImage, source: string) => void;
+    Error?: (sender: SkiaImage, error: Error) => void;
+    /** Decoded image currently shown. */
+    LoadedSource?: Image;
+    /** C# ImageBitmap: show an already decoded image (shared, not owned) instead of loading a Source. */
+    get ImageBitmap(): Image | undefined;
+    set ImageBitmap(image: Image | undefined);
+    IsLoading: boolean;
+    /** Where the scaled image was drawn last frame, canvas pixels. */
+    DisplayRect: SKRect;
+    /** Scale applied to the source per axis at the last measure/draw (DrawnUi AspectScale). */
+    AspectScale: {
+        X: number;
+        Y: number;
+    };
+    /** Queue priority of the Source load (C# LoadPriority). */
+    LoadPriority: LoadPriority;
+    private source;
+    private loadGeneration;
+    /** URL of the image; setting it starts loading, the control redraws when the image arrives. */
+    get Source(): string;
+    set Source(value: string);
+    /** Port of DrawnUi SkiaControl.RescaleAspect: per-axis scale to apply to (width, height) inside dest. */
+    static RescaleAspect(width: number, height: number, dest: SKRect, stretch: TransformAspect): {
+        X: number;
+        Y: number;
+    };
+    /** Port of DrawnUi CalculateDisplayRect: places a (bmpWidth x bmpHeight) box inside dest by alignment. */
+    static CalculateDisplayRect(dest: SKRect, bmpWidth: number, bmpHeight: number, horizontal: DrawImageAlignment, vertical: DrawImageAlignment): SKRect;
+    /**
+     * DrawnUi sizing: a finite box is taken as is; an unbounded axis follows the source aspect from the
+     * bounded one; with nothing loaded or nothing bounded the image measures empty.
+     */
+    protected MeasureAbsolute(widthConstraint: number, heightConstraint: number, scale: number): ScaledSize;
+    protected Paint(ctx: DrawingContext): void;
+}

package/dist/controls/SkiaImage.js

@@ -0,0 +1,222 @@
+import { SkiaControl } from "../core/SkiaControl";
+import { SkiaImageManager } from "../core/SkiaImageManager";
+import { Super } from "../core/Super";
+import { Colors, SKRect, ScaledSize } from "../core/Types";
+import { SkiaImageEffects } from "../core/ImageEffects";
+/**
+ * Mirrors DrawnUi SkiaImage: async Source -> decoded image, drawn into DrawingRect with Aspect
+ * (default AspectCover = fill and crop) and alignment. Content larger than the box is clipped.
+ */
+export class SkiaImage extends SkiaControl {
+    Aspect = "AspectCover";
+    HorizontalAlignment = "Center";
+    VerticalAlignment = "Center";
+    // ---- effects (DrawnUi SkiaImage: AddEffect + parameters, same defaults) ----
+    AddEffect = "None";
+    ColorTint = Colors.Transparent;
+    EffectBlendMode = "SrcIn";
+    Darken = 5;
+    Lighten = 5;
+    Contrast = 1;
+    Brightness = 1;
+    Gamma = 1;
+    /** Blur sigma (points); 0 = off. */
+    Blur = 0;
+    Saturation = 0;
+    ZoomX = 1;
+    ZoomY = 1;
+    /** Points, shifts the drawn image inside the box. */
+    HorizontalOffset = 0;
+    VerticalOffset = 0;
+    /**
+     * C# PaintColorFilter / PaintImageFilter: set your own CanvasKit filters (owned by you, not deleted here); a color
+     * filter set here is used instead of the one derived from `AddEffect` (`AddEffect="Custom"` derives none), an image
+     * filter replaces the `Blur` one.
+     */
+    PaintColorFilter;
+    PaintImageFilter;
+    /** C# PaintColorFilter selection (null = no filter). */
+    CreateColorFilter() {
+        if (this.PaintColorFilter)
+            return null; // custom filter applied as is
+        switch (this.AddEffect) {
+            case "Tint": return this.ColorTint !== Colors.Transparent ? SkiaImageEffects.Tint(this.ColorTint, this.EffectBlendMode) : null;
+            case "Darken": return this.Darken !== 0 ? SkiaImageEffects.Darken(this.Darken) : null;
+            case "BlackAndWhite":
+            case "Grayscale": return SkiaImageEffects.Grayscale();
+            case "Pastel": return SkiaImageEffects.Pastel();
+            case "Lighten": return this.Lighten !== 0 ? SkiaImageEffects.Lighten(this.Lighten) : null;
+            case "Sepia": return SkiaImageEffects.Sepia();
+            case "InvertColors": return SkiaImageEffects.InvertColors();
+            case "Gamma": return this.Gamma >= 0 ? SkiaImageEffects.Gamma(this.Gamma) : null;
+            case "Contrast": return this.Contrast >= 1 ? SkiaImageEffects.Contrast(this.Contrast) : null;
+            case "Saturation": return this.Saturation >= 0 ? SkiaImageEffects.Saturation(this.Saturation) : null;
+            case "Brightness": return this.Brightness >= 1 ? SkiaImageEffects.Brightness(this.Brightness) : null;
+            case "TSL": return this.BackgroundColor && this.BackgroundColor !== Colors.Transparent ? SkiaImageEffects.TintSL(this.BackgroundColor, this.Saturation, this.Brightness, this.EffectBlendMode) : null;
+            case "HSL": return this.BackgroundColor && this.BackgroundColor !== Colors.Transparent ? SkiaImageEffects.HSL(this.Gamma, this.Saturation, this.Brightness, this.EffectBlendMode) : null;
+            default: return null; // None, Custom (PaintColorFilter)
+        }
+    }
+    /** Fired after the image decoded and the control invalidated. */
+    Success;
+    Error;
+    /** Decoded image currently shown. */
+    LoadedSource;
+    /** C# ImageBitmap: show an already decoded image (shared, not owned) instead of loading a Source. */
+    get ImageBitmap() { return this.LoadedSource; }
+    set ImageBitmap(image) {
+        if (this.LoadedSource === image)
+            return;
+        this.loadGeneration++;
+        this.IsLoading = false;
+        this.LoadedSource = image;
+        this.Update();
+    }
+    IsLoading = false;
+    /** Where the scaled image was drawn last frame, canvas pixels. */
+    DisplayRect = SKRect.Empty;
+    /** Scale applied to the source per axis at the last measure/draw (DrawnUi AspectScale). */
+    AspectScale = { X: 0, Y: 0 };
+    /** Queue priority of the Source load (C# LoadPriority). */
+    LoadPriority = "Normal";
+    source = "";
+    loadGeneration = 0;
+    /** URL of the image; setting it starts loading, the control redraws when the image arrives. */
+    get Source() { return this.source; }
+    set Source(value) {
+        if (this.source === value)
+            return;
+        this.source = value;
+        const generation = ++this.loadGeneration;
+        this.LoadedSource = undefined;
+        if (!value) {
+            this.IsLoading = false;
+            this.Update();
+            return;
+        }
+        this.IsLoading = true;
+        SkiaImageManager.Instance.LoadImageManagedAsync(value, undefined, this.LoadPriority).then((image) => { if (generation !== this.loadGeneration)
+            return; this.IsLoading = false; this.LoadedSource = image; this.Update(); this.Success?.(this, value); }, (error) => { if (generation !== this.loadGeneration)
+            return; this.IsLoading = false; this.Error?.(this, error); });
+    }
+    /** Port of DrawnUi SkiaControl.RescaleAspect: per-axis scale to apply to (width, height) inside dest. */
+    static RescaleAspect(width, height, dest, stretch) {
+        let aspectX = 1, aspectY = 1;
+        const s1 = dest.Width / width;
+        const s2 = dest.Height / height;
+        switch (stretch) {
+            case "None": break;
+            case "Fit":
+                aspectX = dest.Width < width ? dest.Width / width : 1;
+                aspectY = dest.Height < height ? dest.Height / height : 1;
+                break;
+            case "Fill":
+                aspectX = width < dest.Width ? s1 : 1;
+                aspectY = height < dest.Height ? s2 : 1;
+                break;
+            case "FitFill":
+                aspectX = width < dest.Width ? s1 : 1;
+                aspectY = height < dest.Height ? s2 : 1;
+                if (width * aspectX > dest.Width || height * aspectY > dest.Height) {
+                    aspectX = dest.Width < width ? dest.Width / width : 1;
+                    aspectY = dest.Height < height ? dest.Height / height : 1;
+                }
+                break;
+            case "Cover":
+                aspectX = s1;
+                aspectY = s2;
+                break;
+            case "AspectCover":
+                aspectX = aspectY = Math.max(s1, s2);
+                break;
+            case "AspectFill":
+                aspectX = aspectY = width < dest.Width ? Math.max(s1, s2) : 1;
+                break;
+            case "AspectFit":
+                aspectX = aspectY = Math.min(s1, s2);
+                break;
+            case "AspectFitFill":
+                aspectX = aspectY = width < dest.Width ? Math.max(s1, s2) : 1;
+                if (width * aspectX > dest.Width || height * aspectY > dest.Height)
+                    aspectX = aspectY = Math.min(s1, s2);
+                break;
+            case "Tile": break; // C# too: tiling is SkiaImageTiles
+        }
+        return { X: aspectX, Y: aspectY };
+    }
+    /** Port of DrawnUi CalculateDisplayRect: places a (bmpWidth x bmpHeight) box inside dest by alignment. */
+    static CalculateDisplayRect(dest, bmpWidth, bmpHeight, horizontal, vertical) {
+        let x = 0, y = 0;
+        if (horizontal === "Center")
+            x = (dest.Width - bmpWidth) / 2;
+        else if (horizontal === "End")
+            x = dest.Width - bmpWidth;
+        if (vertical === "Center")
+            y = (dest.Height - bmpHeight) / 2;
+        else if (vertical === "End")
+            y = dest.Height - bmpHeight;
+        return SKRect.Create(dest.Left + x, dest.Top + y, bmpWidth, bmpHeight);
+    }
+    /**
+     * DrawnUi sizing: a finite box is taken as is; an unbounded axis follows the source aspect from the
+     * bounded one; with nothing loaded or nothing bounded the image measures empty.
+     */
+    MeasureAbsolute(widthConstraint, heightConstraint, scale) {
+        const img = this.LoadedSource;
+        let w = widthConstraint, h = heightConstraint;
+        if (img) {
+            const aspect = img.width() / img.height();
+            if (!isFinite(w) && isFinite(h))
+                w = h * aspect;
+            else if (!isFinite(h) && isFinite(w))
+                h = w / aspect;
+        }
+        if (!isFinite(w) || !isFinite(h)) {
+            this.AspectScale = { X: 0, Y: 0 };
+            return ScaledSize.FromPixels(0, 0, scale);
+        }
+        if (img)
+            this.AspectScale = SkiaImage.RescaleAspect(img.width(), img.height(), SKRect.Create(0, 0, w, h), this.Aspect);
+        return ScaledSize.FromPixels(w, h, scale);
+    }
+    Paint(ctx) {
+        const img = this.LoadedSource;
+        if (!img)
+            return;
+        const dest = ctx.Destination;
+        const scaled = SkiaImage.RescaleAspect(img.width(), img.height(), dest, this.Aspect);
+        this.AspectScale = scaled;
+        let display = SkiaImage.CalculateDisplayRect(dest, img.width() * scaled.X, img.height() * scaled.Y, this.HorizontalAlignment, this.VerticalAlignment);
+        // ZoomX/ZoomY scale around the center, offsets shift (points)
+        const scale = ctx.Scale;
+        if (this.ZoomX !== 1 || this.ZoomY !== 1 || this.HorizontalOffset !== 0 || this.VerticalOffset !== 0) {
+            const cx = (display.Left + display.Right) / 2 + this.HorizontalOffset * scale, cy = (display.Top + display.Bottom) / 2 + this.VerticalOffset * scale;
+            const hw = (display.Width * this.ZoomX) / 2, hh = (display.Height * this.ZoomY) / 2;
+            display = new SKRect(cx - hw, cy - hh, cx + hw, cy + hh);
+        }
+        this.DisplayRect = display;
+        const CK = Super.CK;
+        const canvas = ctx.Context.Canvas;
+        const overflows = this.Blur > 0 || !!this.PaintImageFilter || display.Left < dest.Left || display.Top < dest.Top || display.Right > dest.Right || display.Bottom > dest.Bottom;
+        const saved = canvas.save();
+        if (overflows)
+            canvas.clipRect(CK.LTRBRect(dest.Left, dest.Top, dest.Right, dest.Bottom), CK.ClipOp.Intersect, true);
+        const paint = new CK.Paint();
+        paint.setAntiAlias(true);
+        const colorFilter = this.CreateColorFilter();
+        if (colorFilter)
+            paint.setColorFilter(colorFilter);
+        const blur = !this.PaintImageFilter && this.Blur > 0 ? CK.ImageFilter.MakeBlur(this.Blur * scale, this.Blur * scale, CK.TileMode.Mirror, null) : null;
+        if (this.PaintImageFilter)
+            paint.setImageFilter(this.PaintImageFilter);
+        else if (blur)
+            paint.setImageFilter(blur);
+        if (this.PaintColorFilter)
+            paint.setColorFilter(this.PaintColorFilter);
+        canvas.drawImageRectOptions(img, CK.LTRBRect(0, 0, img.width(), img.height()), CK.LTRBRect(display.Left, display.Top, display.Right, display.Bottom), CK.FilterMode.Linear, CK.MipmapMode.Linear, paint);
+        colorFilter?.delete();
+        blur?.delete();
+        paint.delete();
+        canvas.restoreToCount(saved);
+    }
+}

package/dist/controls/SkiaImageTiles.d.ts

@@ -0,0 +1,27 @@
+import type { DrawingContext } from "../core/SkiaControl";
+import { type SkiaCacheType, type TransformAspect } from "../core/Types";
+import { SkiaImage } from "./SkiaImage";
+/**
+ * Mirrors DrawnUi SkiaImageTiles: the loaded source is drawn as a cached tile of `TileWidth` x `TileHeight` points
+ * (`TileAspect` inside the tile, default AspectCover) repeated over the box, shifted by `TileOffsetX` / `TileOffsetY`
+ * (points, wrap around — animate them for a scrolling background). Nothing is drawn until both tile sizes are set.
+ */
+export declare class SkiaImageTiles extends SkiaImage {
+    TileAspect: TransformAspect;
+    TileWidth: number;
+    TileHeight: number;
+    TileOffsetX: number;
+    TileOffsetY: number;
+    /** Cache of the tile image (C# default Image). */
+    TileCacheType: SkiaCacheType;
+    /** Cached image used as the tile (C# Tile). */
+    protected Tile?: SkiaImage;
+    constructor();
+    /** C# CreateTile: a SkiaImage sharing the decoded source, sized to one tile. */
+    protected CreateTile(width: number, height: number): SkiaImage;
+    private tileKey;
+    /** C# SetupTiles: (re)creates the tile when the source or the tile geometry changed. */
+    protected SetupTiles(): void;
+    protected Paint(ctx: DrawingContext): void;
+    protected OnDisposing(): void;
+}