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

package/SKIPPED.md

@@ -12,7 +12,7 @@ DrawnUi name and semantics; nothing here is a redesign, only an omission.
 | Gestures core: `Canvas.Gestures` (Disabled/Enabled/Lock), `ProcessGestures(args, apply)`, `ConsumeGestures`, `Tapped`/`ChildTapped`, `InputTransparent`, `BlockGesturesBelow`, `LockChildrenGestures`, `HitBoxAuto`/`HitIsInside`/`IsGestureForChild`, `SkiaGesturesParameters`/`GestureEventProcessingInfo`/`SkiaGesturesInfo`/`ControlTappedEventArgs` | ported | Pointer events -> per-pointer `OnTouchAction` state machine (port of DrawnUi.Blazor) -> Down/Panning/Tapped/Up, queued and processed at frame start. Tap slop = 16pt like AppoMobi TouchEffect. The control that consumes a gesture keeps receiving it until it lets go (DrawnUi `Canvas.HadInput`, one pointer here instead of C#'s set): without it a drag handle, a slider thumb or a held button stops getting `Panning` the moment the finger leaves its box, and a control that stops consuming hands routing straight back to the tree (a button whose press turns into a scroll pan). Every mouse button is delivered (`Event.Pointer`: `Button`, `ButtonNumber`, `DeviceType`, `PressedButtons`, the AppoMobi.Gestures PointerData): a right click is Down / Up / Tapped with `Button` "Right" plus a `ContextMenu`; handlers that must be primary-only check `e.Parameters.Event.Pointer?.Button`. |
 | Gestures: `Pointer` (routed as a gesture; hover itself is ported, see `ReceivesHover`; `LongPressing` is produced since 2026-10-10: `Canvas.LongPressTimeMs` 1500 held still, no Tapped after it), multi-touch pinch, `SoftLock`, `AddGestures` attached props, `OnGestures` delegate | skipped | The enum members exist for parity and are never produced; there is no pinch member at all. Ported instead of skipped: velocity (`Gestures.ts` fills `Distance.Velocity` per move, the scroll / snapping physics run on it) and transform-aware mapping — a child receives the point through the inverse `RenderTransformMatrix` (`TransformPointToLocalSpace`), so rotated / scaled / translated controls hit-test correctly. `ChildOffset` stays zero because that inverse matrix replaces the C# cache-offset math (`TranslateInputCoords`), not because transforms are missing. `Wheel` IS produced (`Canvas.onWheel`). |
 | C# multi-subscriber `event`s | changed shape | One callback per event prop (`Tapped={fn}`), same names. `Command*` (ICommand) variants not ported. |
-| `Opacity`, `TranslationX/Y`, `Rotation`, `ScaleX/Y` (+`Scale`), `SkewX/Y`, `AnchorX/Y`, `HasTransform`, `RenderTransformMatrix`, `TransformPointToLocalSpace` | ported | Same matrix order as C# `ApplyTransforms` (pivot → rotation → scale/skew → translation), opacity = `saveLayer` alpha over the subtree, gestures mapped through the inverse matrix (`IsGestureForChild`, child receives the local point), accessibility rect = transformed bounds. Animations: `AnimateAsync`, `AnimateRangeAsync`, `FadeToAsync`, `ScaleToAsync`, `TranslateToAsync`, `RotateToAsync` as Promises with `AbortSignal` (one running per kind, like the C# per-property cancellation). Not ported: `RotationX/Y/Z`, `TranslationZ`, `Perspective1/2`, `CameraAngle`, `LinkTransforms`, `AddTranslationX/Y`, `UseTranslation*` overrides, `CustomizeLayerPaint`, `SkipRenderingOutOfBounds`. |
+| `Opacity`, `TranslationX/Y`, `Rotation`, `ScaleX/Y` (+`Scale`), `SkewX/Y`, `RotationX/Y/Z`, `TranslationZ`, `AnchorX/Y`, `HasTransform`, `RenderTransformMatrix`, `TransformPointToLocalSpace` | ported | Same matrix order as C# `ApplyTransforms` (pivot → rotation → scale/skew → 3D → translation; 3D = C# `Create3dMatrix`, camera 576 px, TranslationZ as depth), image caches drawn smooth once the final matrix distorts them (C# `WillDrawDistorted`, a picture holding image blits records again when its playback turns distorted or straight), opacity = `saveLayer` alpha over the subtree, gestures mapped through the inverse matrix (`IsGestureForChild`, child receives the local point), accessibility rect = transformed bounds. Animations: `AnimateAsync`, `AnimateRangeAsync`, `FadeToAsync`, `ScaleToAsync`, `TranslateToAsync`, `RotateToAsync` as Promises with `AbortSignal` (one running per kind, like the C# per-property cancellation). Not ported: `Perspective1/2`, `CameraAngle`, `LinkTransforms`, `AddTranslationX/Y`, `UseTranslation*` overrides, `CustomizeLayerPaint`, `SkipRenderingOutOfBounds`. |
 | `Left` / `Top` | ported (as a translate) | Same paint-time offset in points, but folded into the render matrix (a `canvas.translate`, hit-testing follows) for every control, cached or not; C# applies them only when blitting a cache. |
 | `AnimatedFramesRenderer` / `SkiaLottie` / `SkiaGif` | ported | `AutoPlay`, `Repeat`, `SpeedRatio`, `DefaultFrame` (-1 = last), `Start(delay)`/`Stop`/`Seek`, `IsPlaying`, `Started`/`Finished`, `PlayWhenAvailable`, `GetFrameAt`. Lottie on CanvasKit Skottie (needs the `full` build, +0.9 MB raw wasm): `Source` (URL / app path, JSON cached per source, in-flight dedup), `ColorTint` / `Colors` (C# `ApplyTint` JSON rewrite), `IsOn` + `DefaultFrameWhenOn` + `ApplyIsOnWhenNotPlaying`, `StopAtCurrentFrame`, `ProcessJson`, `GoToStart`/`GoToEnd`, `SetAnimation`, `LoadSource`, `CreateAnimation`, `TotalFrames`; default cache `Operations` (C# ImageDoubleBuffered, see PARITY "Lottie and GIF default caches"). GIF on CanvasKit AnimatedImage: every frame decoded once (`GifAnimation`: `SeekFrame`, `GetFrameNumber`, `DurationMs`, `TotalFrames`), `Aspect` (AspectFitFill), alignment, `Success`/`Error`, default cache `None` (C# ImageDoubleBuffered). Not ported: `SkiaGif.Display` inner SkiaImage (frames are drawn directly), custom-control ctor `SkiaGif(display)`, `SkiaLottie` Skottie property/slot editing, sound, `ReloadSource` sync file paths, `Dispose` wiring on unmount (no engine hook from the reconciler yet). |
 | `SkiaBackdrop` | ported | `Blur` (5), `Brightness` (gamma), `UseContext`, `BackgroundColor` tint, `HasEffects`, `GetImage`; children drawn first and blurred with the snapshot (C# order); `UseContext` snapshots the surface the pixels end up on (on-screen, or the nearest Image cache surface through its `Origin`), also while an Operations picture is being recorded, since caches record inline; after each paint the ancestors' caches are staled for the next frame (no frame requested) so content that changes beneath without invalidating this branch (an image loading later) is picked up by the next frame. Used by the shell popups/modals (`ShellDefaults.PopupsBackgroundBlur`). Not ported: `CacheSource`, the ghost mode. |

package/dist/core/SkiaControl.d.ts

@@ -21,6 +21,10 @@ export interface DrawingContext {
             Y: number;
         };
         Recording?: boolean;
+        /** The picture being recorded is drawn scaled, turned, skewed or projected: images blitted into it sample smoothly (C#). */
+        PlaybackDistorted?: boolean;
+        /** An image cache (or a picture holding one) was blitted here (C#): the picture is recorded again when its playback distortion changes. */
+        HasImageBlits?: boolean;
     };
     Destination: SKRect;
     Scale: number;
@@ -38,8 +42,12 @@ export declare class CachedObject {
     Bounds: SKRect, Scale: number, Picture?: SkPicture | undefined, Image?: Image | undefined);
     /** Canvas.GpuEpoch it was made in: after a WebGL context restore it is remade (a picture may replay old GPU images). */
     Epoch: number;
-    /** Replays the cache with its top-left moved to (left, top). */
-    Draw(canvas: SkCanvas, left: number, top: number): void;
+    /** A picture recorded to be drawn distorted: the images in it sample smoothly (C# CachedObject.PlaybackDistorted). */
+    PlaybackDistorted: boolean;
+    /** A picture holding image blits, whose sampling was fixed when it was recorded (C# CachedObject.HasImageBlits). */
+    HasImageBlits: boolean;
+    /** Replays the cache with its top-left moved to (left, top); `smooth` = an image drawn distorted (linear + mipmaps). */
+    Draw(canvas: SkCanvas, left: number, top: number, smooth?: boolean): void;
     Dispose(): void;
 }
 /**
@@ -86,6 +94,14 @@ export declare class SkiaControl {
     /** Degrees. */
     SkewX: number;
     SkewY: number;
+    /** Degrees, a 3D turn around the horizontal axis through the pivot, seen with perspective (C# RotationX). */
+    RotationX: number;
+    /** Degrees, a 3D turn around the vertical axis through the pivot (C# RotationY). */
+    RotationY: number;
+    /** Degrees, a 3D turn around the axis facing the viewer, after RotationX and RotationY (C# RotationZ). */
+    RotationZ: number;
+    /** Depth: toward the viewer (+, bigger) or away (−, smaller), turned or flat; draws at 576 / (576 − TranslationZ) (C# TranslationZ). */
+    TranslationZ: number;
     /** Pivot for Rotation/Scale/Skew as a fraction of the box (MAUI default 0.5). */
     AnchorX: number;
     AnchorY: number;
@@ -109,6 +125,7 @@ export declare class SkiaControl {
     get Scale(): number;
     set Scale(v: number);
     get HasTransform(): boolean;
+    private get Has3d();
     /** Matrix applied at the last render (canvas space), undefined when none; gestures map through its inverse. */
     RenderTransformMatrix?: number[];
     /** Generic numeric parameters (DrawnUi Value1/Value2): SkiaShape Arc uses start angle / sweep angle in degrees. */
@@ -293,6 +310,12 @@ export declare class SkiaControl {
     protected MeasureAbsolute(_widthConstraint: number, _heightConstraint: number, scale: number): ScaledSize;
     /** Places MeasuredSize inside destination per Margin + Horizontal/VerticalOptions -> DrawingRect. */
     Arrange(destination: SKRect, _widthRequest: number, _heightRequest: number, scale: number): void;
+    /**
+     * A cached ancestor replays its picture where a re-arrange moved it (a scroll) without rendering this control again,
+     * so the matrix made at its last Render moves with its rect: taps, hover and the accessibility rect stay on what is
+     * drawn (C# offsets the cached render tree instead). A control that renders again gets a fresh matrix there.
+     */
+    private FollowMatrix;
     /** C# SuperViewChanged: starts the animators queued before this control was attached. */
     private StartPendingAnimators;
     private static nextAccessibilityId;
@@ -408,8 +431,22 @@ export declare class SkiaControl {
     /** DrawingRect grown by the effects margin, in pixels — the rect a cache is recorded for. */
     protected ExpandedCacheRect(scale: number): SKRect;
     Render(ctx: DrawingContext): void;
-    /** Port of DrawnUi ApplyTransforms: T(-pivot) · rotation · scale/skew · T(pivot) · translation, in canvas pixels. */
+    /** Port of DrawnUi ApplyTransforms: T(-pivot) · rotation · scale/skew · 3D · T(pivot) · translation, in canvas pixels. */
     protected CreateRenderTransformMatrix(destination: SKRect, scale: number): number[];
+    /** C# camera distance of the 3D transforms (Sk3dView.CameraDistance): 8 inches at 72 dpi, in canvas pixels. */
+    static readonly CameraDistance = 576;
+    /**
+     * C# Create3dMatrix (Sk3dView): RotationX, then RotationY, then RotationZ (negated) around the pivot, projected from
+     * the camera; TranslationZ is depth, a flat control at depth z draws at camera / (camera − z).
+     */
+    static Create3dMatrix(rotationX: number, rotationY: number, rotationZ: number, translationZ: number): number[];
+    /** C# SkiaSamplingOptions.IsMoveOnly: the matrix only moves (or mirrors), so a bitmap keeps its pixels 1:1. */
+    static IsMoveOnly(m: ArrayLike<number>): boolean;
+    /**
+     * C# WillDrawDistorted: what this control draws here ends up scaled, turned, skewed or projected, by its own transforms
+     * or a live ancestor's (both in the canvas matrix) or by the picture it is recorded into. Images then sample smoothly.
+     */
+    protected WillDrawDistorted(ctx: DrawingContext): boolean;
     /** Maps a point given in the parent's space into this control's untransformed space (DrawnUi TransformPointToLocalSpace). */
     TransformPointToLocalSpace(point: SKPoint): SKPoint;
     /**
@@ -419,6 +456,8 @@ export declare class SkiaControl {
     private AlignedCacheRect;
     /** Cache blit or live paint, then post animators — the part a transform/opacity layer wraps. */
     private RenderContent;
+    /** Blits a cache: an image samples smoothly when drawn distorted; a picture being recorded learns it holds image blits. */
+    private DrawCache;
     /** Background + Paint(): the part of the control that a cache captures. */
     protected PaintContent(ctx: DrawingContext): void;
     /** Subclasses whose PaintBackground has something to draw without a BackgroundColor (shape shadows). */

package/dist/core/SkiaControl.js

@@ -24,12 +24,19 @@ export class CachedObject {
     }
     /** Canvas.GpuEpoch it was made in: after a WebGL context restore it is remade (a picture may replay old GPU images). */
     Epoch = 0;
-    /** Replays the cache with its top-left moved to (left, top). */
-    Draw(canvas, left, top) {
+    /** A picture recorded to be drawn distorted: the images in it sample smoothly (C# CachedObject.PlaybackDistorted). */
+    PlaybackDistorted = false;
+    /** A picture holding image blits, whose sampling was fixed when it was recorded (C# CachedObject.HasImageBlits). */
+    HasImageBlits = false;
+    /** Replays the cache with its top-left moved to (left, top); `smooth` = an image drawn distorted (linear + mipmaps). */
+    Draw(canvas, left, top, smooth = false) {
         const CK = Super.CK;
         if (this.Image) {
-            // Nearest sampling: a cached bitmap is blitted 1:1, never resampled.
-            canvas.drawImageOptions(this.Image, left, top, CK.FilterMode.Nearest, CK.MipmapMode.None, null);
+            // nearest keeps a bitmap blitted 1:1 sharp; once scaled, turned or projected it needs smooth sampling (C# 1e4610f6)
+            if (smooth)
+                canvas.drawImageOptions(this.Image, left, top, CK.FilterMode.Linear, CK.MipmapMode.Linear, null);
+            else
+                canvas.drawImageOptions(this.Image, left, top, CK.FilterMode.Nearest, CK.MipmapMode.None, null);
         }
         else if (this.Picture) {
             const saved = canvas.save();
@@ -89,6 +96,14 @@ export class SkiaControl {
     /** Degrees. */
     SkewX = 0;
     SkewY = 0;
+    /** Degrees, a 3D turn around the horizontal axis through the pivot, seen with perspective (C# RotationX). */
+    RotationX = 0;
+    /** Degrees, a 3D turn around the vertical axis through the pivot (C# RotationY). */
+    RotationY = 0;
+    /** Degrees, a 3D turn around the axis facing the viewer, after RotationX and RotationY (C# RotationZ). */
+    RotationZ = 0;
+    /** Depth: toward the viewer (+, bigger) or away (−, smaller), turned or flat; draws at 576 / (576 − TranslationZ) (C# TranslationZ). */
+    TranslationZ = 0;
     /** Pivot for Rotation/Scale/Skew as a fraction of the box (MAUI default 0.5). */
     AnchorX = 0.5;
     AnchorY = 0.5;
@@ -116,8 +131,9 @@ export class SkiaControl {
     get Scale() { return this.ScaleX; }
     set Scale(v) { this.ScaleX = v; this.ScaleY = v; }
     get HasTransform() {
-        return this.TranslationX !== 0 || this.TranslationY !== 0 || this.Left !== 0 || this.Top !== 0 || this.Rotation !== 0 || this.ScaleX !== 1 || this.ScaleY !== 1 || this.SkewX !== 0 || this.SkewY !== 0;
+        return this.TranslationX !== 0 || this.TranslationY !== 0 || this.Left !== 0 || this.Top !== 0 || this.Rotation !== 0 || this.ScaleX !== 1 || this.ScaleY !== 1 || this.SkewX !== 0 || this.SkewY !== 0 || this.Has3d;
     }
+    get Has3d() { return this.RotationX !== 0 || this.RotationY !== 0 || this.RotationZ !== 0 || this.TranslationZ !== 0; }
     /** Matrix applied at the last render (canvas space), undefined when none; gestures map through its inverse. */
     RenderTransformMatrix;
     /** Generic numeric parameters (DrawnUi Value1/Value2): SkiaShape Arc uses start angle / sweep angle in degrees. */
@@ -470,7 +486,9 @@ export class SkiaControl {
         const fullW = destination.Width - m.HorizontalThickness * scale, fullH = destination.Height - m.VerticalThickness * scale;
         const x = availL + SkiaControl.Align(this.HorizontalOptions, fullW, w);
         const y = availT + SkiaControl.Align(this.VerticalOptions, fullH, h);
+        const old = this.DrawingRect;
         this.DrawingRect = SKRect.Create(x, y, w, h);
+        this.FollowMatrix(old);
         this.OnLayoutChanged();
         if (this.PendingUnattachedAnimators)
             this.StartPendingAnimators();
@@ -478,6 +496,18 @@ export class SkiaControl {
         if (!this.registeredWithAccessibility && this.IsAccessibilityElement)
             this.NotifyAccessibility();
     }
+    /**
+     * A cached ancestor replays its picture where a re-arrange moved it (a scroll) without rendering this control again,
+     * so the matrix made at its last Render moves with its rect: taps, hover and the accessibility rect stay on what is
+     * drawn (C# offsets the cached render tree instead). A control that renders again gets a fresh matrix there.
+     */
+    FollowMatrix(old) {
+        const m = this.RenderTransformMatrix, r = this.DrawingRect;
+        if (!m || (old.Left === r.Left && old.Top === r.Top))
+            return;
+        const M = Super.CK.Matrix, dx = r.Left - old.Left, dy = r.Top - old.Top;
+        this.RenderTransformMatrix = M.multiply(M.translated(dx, dy), m, M.translated(-dx, -dy));
+    }
     /** C# SuperViewChanged: starts the animators queued before this control was attached. */
     StartPendingAnimators() {
         if (!this.Superview)
@@ -711,7 +741,7 @@ export class SkiaControl {
         const applyOpacity = this.Opacity < 1;
         // C# Left/Top: a cached control is blitted at an offset, no matrix and no save/restore around the subtree
         const offsetOnly = (this.Left !== 0 || this.Top !== 0) && this.UsingCacheType !== "None" && this.TranslationX === 0 && this.TranslationY === 0
-            && this.Rotation === 0 && this.ScaleX === 1 && this.ScaleY === 1 && this.SkewX === 0 && this.SkewY === 0;
+            && this.Rotation === 0 && this.ScaleX === 1 && this.ScaleY === 1 && this.SkewX === 0 && this.SkewY === 0 && !this.Has3d;
         const needTransform = this.HasTransform && !offsetOnly;
         let dx = 0, dy = 0;
         if (needTransform) {
@@ -757,11 +787,12 @@ export class SkiaControl {
         if (saved)
             canvas.restore();
     }
-    /** Port of DrawnUi ApplyTransforms: T(-pivot) · rotation · scale/skew · T(pivot) · translation, in canvas pixels. */
+    /** Port of DrawnUi ApplyTransforms: T(-pivot) · rotation · scale/skew · 3D · T(pivot) · translation, in canvas pixels. */
     CreateRenderTransformMatrix(destination, scale) {
         const M = Super.CK.Matrix;
         const moveX = (this.TranslationX + this.Left) * scale, moveY = (this.TranslationY + this.Top) * scale;
-        if (this.Rotation === 0 && this.ScaleX === 1 && this.ScaleY === 1 && this.SkewX === 0 && this.SkewY === 0)
+        const has3d = this.Has3d;
+        if (this.Rotation === 0 && this.ScaleX === 1 && this.ScaleY === 1 && this.SkewX === 0 && this.SkewY === 0 && !has3d)
             return M.translated(moveX, moveY);
         const px = destination.Left + destination.Width * this.AnchorX;
         const py = destination.Top + destination.Height * this.AnchorY;
@@ -770,7 +801,36 @@ export class SkiaControl {
         const scaleSkew = [this.ScaleX, kx, 0, ky, this.ScaleY, 0, 0, 0, 1];
         const rotation = this.Rotation !== 0 ? M.rotated((Math.PI * this.Rotation) / 180) : M.identity();
         // multiply(a, b, c) = a·b·c, the right-most applies first
-        return M.multiply(M.translated(px + moveX, py + moveY), scaleSkew, rotation, M.translated(-px, -py));
+        if (!has3d)
+            return M.multiply(M.translated(px + moveX, py + moveY), scaleSkew, rotation, M.translated(-px, -py));
+        return M.multiply(M.translated(px + moveX, py + moveY), SkiaControl.Create3dMatrix(this.RotationX, this.RotationY, this.RotationZ, this.TranslationZ), scaleSkew, rotation, M.translated(-px, -py));
+    }
+    /** C# camera distance of the 3D transforms (Sk3dView.CameraDistance): 8 inches at 72 dpi, in canvas pixels. */
+    static CameraDistance = 576;
+    /**
+     * C# Create3dMatrix (Sk3dView): RotationX, then RotationY, then RotationZ (negated) around the pivot, projected from
+     * the camera; TranslationZ is depth, a flat control at depth z draws at camera / (camera − z).
+     */
+    static Create3dMatrix(rotationX, rotationY, rotationZ, translationZ) {
+        const d = Math.PI / 180, camera = SkiaControl.CameraDistance;
+        const sx = Math.sin(rotationX * d), cx = Math.cos(rotationX * d), sy = Math.sin(rotationY * d), cy = Math.cos(rotationY * d);
+        const sz = Math.sin(-rotationZ * d), cz = Math.cos(-rotationZ * d);
+        return [
+            cy * cz, cy * sz, 0,
+            sx * sy * cz - cx * sz, sx * sy * sz + cx * cz, 0,
+            (cx * sy * cz + sx * sz) / camera, (cx * sy * sz - sx * cz) / camera, Math.max(camera - translationZ, 1) / camera,
+        ];
+    }
+    /** C# SkiaSamplingOptions.IsMoveOnly: the matrix only moves (or mirrors), so a bitmap keeps its pixels 1:1. */
+    static IsMoveOnly(m) {
+        return m[1] === 0 && m[3] === 0 && m[6] === 0 && m[7] === 0 && m[8] === 1 && Math.abs(m[0]) === 1 && Math.abs(m[4]) === 1;
+    }
+    /**
+     * C# WillDrawDistorted: what this control draws here ends up scaled, turned, skewed or projected, by its own transforms
+     * or a live ancestor's (both in the canvas matrix) or by the picture it is recorded into. Images then sample smoothly.
+     */
+    WillDrawDistorted(ctx) {
+        return !!ctx.Context.PlaybackDistorted || !SkiaControl.IsMoveOnly(ctx.Context.Canvas.getTotalMatrix());
     }
     /** Maps a point given in the parent's space into this control's untransformed space (DrawnUi TransformPointToLocalSpace). */
     TransformPointToLocalSpace(point) {
@@ -809,23 +869,32 @@ export class SkiaControl {
             const epoch = this.Superview?.GpuEpoch ?? 0;
             if (this.RenderObjectPrevious && this.RenderObjectPrevious.Epoch !== epoch)
                 this.DisposePrevious(); // made on a lost GPU context
-            if (this.CacheStale(ctx.Scale))
+            // a picture replays its image blits with the sampling chosen when it was recorded: recorded again once its
+            // playback turns distorted or straight (C# SamplingMismatch), else a cached child of a turning card stays jagged
+            const o = this.RenderObject;
+            if (this.CacheStale(ctx.Scale) || (o?.Picture && o.HasImageBlits && o.PlaybackDistorted !== this.WillDrawDistorted(ctx)))
                 this.CreateRenderingObject({ ...ctx, Destination: this.DrawingRect }, cacheType);
             if (this.RenderObject) {
                 // C# DrawRenderObject: with post renderers an Image cache is not blitted, the effects sample it (CachedImage)
                 // and paint the result; a picture cache has no texture, so it is replayed first and snapshotted by the effect
                 if (post.length === 0 || !this.RenderObject.Image)
-                    this.RenderObject.Draw(ctx.Context.Canvas, r.Left + dx, r.Top + dy);
+                    this.DrawCache(this.RenderObject, ctx, r.Left + dx, r.Top + dy);
                 for (const e of post)
                     e.Render(own);
             }
             else if (this.RenderObjectPrevious)
-                this.RenderObjectPrevious.Draw(ctx.Context.Canvas, r.Left + dx, r.Top + dy); // double buffer: last good frame
+                this.DrawCache(this.RenderObjectPrevious, ctx, r.Left + dx, r.Top + dy); // double buffer: last good frame
             else
                 this.DrawPlaceholder(own);
         }
         this.ExecutePostAnimators(own);
     }
+    /** Blits a cache: an image samples smoothly when drawn distorted; a picture being recorded learns it holds image blits. */
+    DrawCache(cache, ctx, left, top) {
+        if (cache.Image || cache.HasImageBlits)
+            ctx.Context.HasImageBlits = true;
+        cache.Draw(ctx.Context.Canvas, left, top, !!cache.Image && this.WillDrawDistorted(ctx));
+    }
     /** Background + Paint(): the part of the control that a cache captures. */
     PaintContent(ctx) {
         if (this.BackgroundColor || (this.FillGradient && this.FillGradientPaintsBackground()) || this.PaintsBackgroundWithoutColor())
@@ -860,12 +929,16 @@ export class SkiaControl {
         }
         if (cacheType === "Operations") {
             const recorder = new CK.PictureRecorder();
+            const playbackDistorted = this.WillDrawDistorted(ctx);
             const canvas = recorder.beginRecording(CK.LTRBRect(r.Left, r.Top, r.Right, r.Bottom));
-            this.PaintContent({ ...ctx, Context: { ...ctx.Context, Canvas: canvas, Recording: true } });
+            const recording = { ...ctx.Context, Canvas: canvas, Recording: true, PlaybackDistorted: playbackDistorted, HasImageBlits: false };
+            this.PaintContent({ ...ctx, Context: recording });
             const picture = recorder.finishRecordingAsPicture();
             recorder.delete();
             this.RenderObject = new CachedObject("Operations", r, ctx.Scale, picture);
             this.RenderObject.Epoch = this.Superview?.GpuEpoch ?? 0;
+            this.RenderObject.PlaybackDistorted = playbackDistorted;
+            this.RenderObject.HasImageBlits = recording.HasImageBlits;
         }
         else if (cacheType === "ImageComposite") {
             this.CreateCompositeRenderingObject(ctx, r, w, h);

package/dist/react/reconciler.js

@@ -38,7 +38,7 @@ export const Registry = {
 };
 const SKIP = new Set(["children", "key", "ref"]);
 /** Props that change how the subtree is composited, not what it contains: repaint, keep caches (DrawnUi RedrawCanvas). */
-const REPAINT_ONLY = new Set(["TranslationX", "TranslationY", "Rotation", "ScaleX", "ScaleY", "Scale", "SkewX", "SkewY", "AnchorX", "AnchorY", "Opacity"]);
+const REPAINT_ONLY = new Set(["TranslationX", "TranslationY", "TranslationZ", "Rotation", "RotationX", "RotationY", "RotationZ", "ScaleX", "ScaleY", "Scale", "SkewX", "SkewY", "AnchorX", "AnchorY", "Opacity"]);
 /** Props that change only how a control looks, never its size (C# NeedDraw): an ImageComposite above redraws only its area. */
 const isDrawOnly = (k) => k.endsWith("Color") || k === "FillGradient" || k === "StrokeGradient";
 /**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "drawnui-react",
-  "version": "0.1.0-preview.18",
+  "version": "0.1.0-preview.19",
   "description": "DrawnUi for React: the DrawnUi (.NET) drawn-UI engine in TypeScript on CanvasKit (Skia WASM). Same controls, same PascalCase API as DrawnUi.Net.",
   "license": "MIT",
   "author": "Nick Kovalsky (AppoMobi)",
@@ -74,6 +74,7 @@
     "check:scroll-index": "node dev/check.mjs dev/check-scroll-index.ts",
     "check:culling": "node dev/check.mjs dev/check-culling.ts",
     "check:responds": "node dev/check.mjs dev/check-responds.ts",
+    "check:3d": "node dev/check.mjs dev/check-3d.ts",
     "site:extras": "node dev/site-extras.mjs dist/demo",
     "build:lib": "node -e \"require('fs').rmSync('dist',{recursive:true,force:true})\" && tsc -p tsconfig.build.json",
     "prepublishOnly": "npm run build:lib",