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

package/SKIPPED.md

@@ -15,7 +15,7 @@ DrawnUi name and semantics; nothing here is a redesign, only an omission.
 | `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. |
+| `SkiaBackdrop` | ported | `Blur` (5), `Brightness` (gamma), `UseContext`, `BackgroundColor` tint, `HasEffects`, `GetImage`; copies the area it covers through every ancestor transform, drawn back 1:1 (C# 6fd3bae3); inside a picture-cached ancestor it marks it `HostsBackdrop` and that ancestor draws live (C# bcce0739); inside an Image-cached ancestor it copies that cache's surface (no warning: C# reverted 9d6ae911, a valid use when what shows through is inside that cache); 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. |
 | Disposal (`Dispose` / `OnDisposing`) | ported | The React renderer calls `Dispose()` when an element leaves the tree (`detachDeletedInstance`): caches, gradient shaders, running `*ToAsync` animations, overlay effects, the accessibility node, then the children (static and templated pool); `SkiaScroll`/`SnappingLayout` stop their animators, `SkiaSvg` drops its raster, `SkiaLottie`/`SkiaGif` free the Skottie animation / frames; `Canvas.Dispose` disposes the content. Not ported: `IsDisposing` staged disposal, `Disposing` event, `OnWillDisposeWithChildren`. |
 | Hover: `ReceivesHover` (opt-in; on by default in SkiaButton, SkiaSlider, the toggles, SkiaRadioButton, SkiaCarousel, SkiaDrawer), `IsHovered`, `HoverChanged` (turns `ReceivesHover` on, as C# `OnHovered`) | ported | drawnui-cross 6m: every opted-in control under the mouse is hovered; nothing changes while a scroll, carousel or drawer moves its content, one check at the last pointer position when it stops and after an add / remove, a rebind, a hidden hovered control or an instant scroll jump; pointerleave clears at once; touch never hovers (`Canvas.Hover`, a `HoverManager`). Not ported: C# `SetHover`, `CheckHovered` / `OnHover` / `IsPointerOver` (no Pointer gestures are routed), SkiaSpinner / wheel picker (no such controls). |
 | `KeyboardManager` | ported | Window-level keydown / keyup capture listeners like `drawnui-keyboard.js`: `KeyDown` / `KeyUp` with the DOM `event.code` ("KeyA", "ArrowLeft"; C# maps the same codes to `InputKey`), `KeyChar` for printable keys without Ctrl / Alt / Meta, `IsShiftPressed` / `IsControlPressed` / `IsAltPressed`, `AttachToKeyboard` (idempotent, pointerdown pulls window focus inside iframes), `BlurExternalTextInput`, `IsOwnedByElement` / `IsInputMethodKey` (React additions: a handler acting on keys skips keys a focused DOM element or the input method owns, C# 845b26e9); `Subscribe` / `Unsubscribe` instead of C# events. Not ported: `InputKey` enum (codes are strings). |
@@ -38,7 +38,7 @@ DrawnUi name and semantics; nothing here is a redesign, only an omission.
 | Touch feedback: `AnimationTapped="Ripple"` + `TouchEffectColor` + `AnimationTappedSpeed` on any control, `SkiaButton.ApplyEffect="Ripple"` (on Down), `PlayRippleAnimation`, `RippleAnimator`, `ClipEffects`/`CreateClip` | ported | Same numbers as C#: 500ms CubicIn, radius 300pt, opacity 0.20 fading over 1.15x progress. |
 | `Shimmer` touch animation, `ShimmerAnimator`, `ClippedEffectsWith`, `TransformView`, `DelayCallbackMs`, `removePrevious`, `Pause`/`Resume`, `UseInterpolator`, spring/deceleration timing, `AnimateExtensions` (`FadeToAsync`, `TranslateToAsync`, ...) | skipped | |
 | `VisualEffects` + `SkiaEffect` / `IPostRendererEffect` / `ISkiaGestureProcessor` | partial | `VisualEffects` array on every control (assign a new array; effects attach / detach, dispose with the control, `DisableEffects`, `GetEffectMargin` aggregated into the effects margin); post renderers run after the direct paint (C# `DrawDirectInternal`) or instead of the Image cache blit (C# `DrawRenderObject`, the effect samples `CachedImage`); effects with `ProcessGestures` see the parent's gestures first (C# `EffectsGestureProcessors`). Not ported: `IRenderEffect` chain (`ChainEffectResult`, `Draw(ctx, drawControl)`), `IColorEffect` / `IImageEffect` on VisualEffects (`BlurEffect`, `DropShadowEffect`, `OuterGlowEffect`, `ColorPresetEffect`, `AdjustRGBEffect`, `ChainAdjust*`, `Chain*`), `IStateEffect.UpdateState`, `Tag` lookup. |
-| `SkiaShaderEffect` / `ShaderDoubleTexturesEffect` / `ShaderTransitionEffect` / `AnimatedShaderEffect` | ported | CanvasKit `RuntimeEffect` (SkSL): `ShaderSource` (fetched once per url), `ShaderCode`, `ShaderTemplate` (`//script-goes-here`), compiled once per source text, Shadertoy uniforms `iResolution` / `iImageResolution` / `iTime` / `iOffset` / `iMouse` (`TimeSeconds`, `MouseCurrent`, `MouseInitial`), `Uniforms` + `SetUniform` (arrays sized by the next uniform slot, undeclared names skipped like C#), `UseBackground` Always / Once (`AquiredBackground`, `ReleaseFrozenSnapshot`) / Never, `AutoCreateInputTexture`, `UseContext`, `BlendMode`, `FilterMode` / `MipmapMode` / `TileMode`, `OnCompilationError` (logged when unset), `LoadedCode`, `IsCompiled`; texture children by declaration order (`uniform shader` names parsed, missing ones sample transparent); double textures: `ControlFrom` / `ControlTo` (their Image caches), `PrimarySource` / `SecondarySource` (resized to the parent box); transition: `Progress`, `ratio`, embedded gl-transitions `DefaultTemplate`; animated: `Play` / `Stop` / `Completed`, `DurationMs`, `Center` -> `iCenter`. `iOrigin` is not written (C# neither). Not ported: `SkiaShader` engine class as a standalone (`DrawRect` / `DrawImage` helpers), `CompareTo` / equality. |
+| `SkiaShaderEffect` / `ShaderDoubleTexturesEffect` / `ShaderTransitionEffect` / `AnimatedShaderEffect` | ported | `ShouldInvalidateParentCache` (default false) + `UpdateUniforms()` (C# 0c6d9ef1: uniform changes and animation ticks keep the parent's cache unless asked to invalidate it). On a cached control the shader replaces it and reads its content (a picture cache hands effects its picture drawn into an image once per cache, C# caa1c8c1 `GetPictureImage`); on an uncached one it draws over the control and reads the canvas. CanvasKit `RuntimeEffect` (SkSL): `ShaderSource` (fetched once per url), `ShaderCode`, `ShaderTemplate` (`//script-goes-here`), compiled once per source text, Shadertoy uniforms `iResolution` / `iImageResolution` / `iTime` / `iOffset` / `iMouse` (`TimeSeconds`, `MouseCurrent`, `MouseInitial`), `Uniforms` + `SetUniform` (arrays sized by the next uniform slot, undeclared names skipped like C#), `UseBackground` Always / Once (`AquiredBackground`, `ReleaseFrozenSnapshot`) / Never, `AutoCreateInputTexture`, `UseContext`, `BlendMode`, `FilterMode` / `MipmapMode` / `TileMode`, `OnCompilationError` (logged when unset), `LoadedCode`, `IsCompiled`; texture children by declaration order (`uniform shader` names parsed, missing ones sample transparent); double textures: `ControlFrom` / `ControlTo` (their Image caches), `PrimarySource` / `SecondarySource` (resized to the parent box); transition: `Progress`, `ratio`, embedded gl-transitions `DefaultTemplate`; animated: `Play` / `Stop` / `Completed`, `DurationMs`, `Center` -> `iCenter`. `iOrigin` is not written (C# neither). Not ported: `SkiaShader` engine class as a standalone (`DrawRect` / `DrawImage` helpers), `CompareTo` / equality. |
 | Multithreading / offscreen rendering | skipped | Browser main thread only. |
 | Hot reload hook | skipped | Vite HMR reloads the page. |
 | Second measure pass / fill-in-auto re-measure rules | skipped | Column/Row give children an infinite main axis; cross axis = available. |

package/dist/controls/SkiaBackdrop.d.ts

@@ -4,8 +4,10 @@ import { SkiaLayout } from "./SkiaLayout";
 /**
  * Mirrors DrawnUi SkiaBackdrop: draws what is already painted beneath its box through `Blur` (points, default 5)
  * and `Brightness` (gamma, 1 = unchanged), tinted by `BackgroundColor`; children draw first and are blurred too.
- * The snapshot comes from the surface being drawn (`UseContext`) or the on-screen surface. Not cached (re-blurs
- * on every frame it is drawn in; inside a cached parent it is re-recorded with that parent).
+ * The snapshot comes from the surface being drawn (`UseContext`, the area it covers there through every ancestor
+ * transform) or the on-screen surface. Not cached (re-blurs on every frame it is drawn in); picture-cached ancestors
+ * draw live once it is inside them (HostsBackdrop); inside an Image-cached ancestor it copies that cache's surface
+ * (right when what shows through the glass is inside that cache, wrong when it should show content outside it).
  */
 export declare class SkiaBackdrop extends SkiaLayout {
     /** Samples what is drawn below: a composite above redraws it whole when something inside changes (drawnui-cross 6m). */
@@ -23,5 +25,7 @@ export declare class SkiaBackdrop extends SkiaLayout {
     protected PaintBackground(_ctx: DrawingContext): void;
     protected PaintsBackgroundWithoutColor(): boolean;
     protected Paint(ctx: DrawingContext): void;
+    /** C# StopPictureCachesAbove: the picture-cached ancestors draw live from the next frame, which this asks for. */
+    protected StopPictureCachesAbove(): void;
     protected OnDisposing(): void;
 }

package/dist/controls/SkiaBackdrop.js

@@ -4,8 +4,10 @@ import { SkiaLayout } from "./SkiaLayout";
 /**
  * Mirrors DrawnUi SkiaBackdrop: draws what is already painted beneath its box through `Blur` (points, default 5)
  * and `Brightness` (gamma, 1 = unchanged), tinted by `BackgroundColor`; children draw first and are blurred too.
- * The snapshot comes from the surface being drawn (`UseContext`) or the on-screen surface. Not cached (re-blurs
- * on every frame it is drawn in; inside a cached parent it is re-recorded with that parent).
+ * The snapshot comes from the surface being drawn (`UseContext`, the area it covers there through every ancestor
+ * transform) or the on-screen surface. Not cached (re-blurs on every frame it is drawn in); picture-cached ancestors
+ * draw live once it is inside them (HostsBackdrop); inside an Image-cached ancestor it copies that cache's surface
+ * (right when what shows through the glass is inside that cache, wrong when it should show content outside it).
  */
 export class SkiaBackdrop extends SkiaLayout {
     /** Samples what is drawn below: a composite above redraws it whole when something inside changes (drawnui-cross 6m). */
@@ -40,16 +42,36 @@ export class SkiaBackdrop extends SkiaLayout {
         }
         if (!this.HasEffects)
             return;
+        // C# StopPictureCachesAbove: a screen copy recorded into an ancestor's picture would be replayed frozen; this frame
+        // draws no copy, the picture-cached ancestors draw live from the next frame on (HostsBackdrop)
+        if (ctx.Context.Recording) {
+            this.StopPictureCachesAbove();
+            return;
+        }
         // C# UseContext: snapshot the surface the pixels end up on — the on-screen surface or the nearest Image cache
-        // surface (Origin = its top-left in canvas pixels). Content beneath is already there because caches are recorded
-        // inline while the parent paints, so this also works while an Operations picture is being recorded.
+        // surface. Copied where the backdrop really is on that surface: its rect through the canvas matrix (ancestor
+        // scale, move, rotation, 3D, the cache origin), rounded out, clamped to the surface, and drawn back 1:1 with the
+        // matrix undone, clipped to the backdrop's own (maybe turned) rect: the blur stays the same on screen while an
+        // ancestor scales (C# 6fd3bae3). The global surface (UseContext false) is copied at the layout rect.
         const surface = this.UseContext ? ctx.Context.Surface : this.Superview?.Surface;
         if (!surface)
             return;
         surface.flush();
-        const origin = this.UseContext ? ctx.Context.Origin : undefined;
-        const ox = origin?.X ?? 0, oy = origin?.Y ?? 0;
-        const l = Math.floor(d.Left - ox), t = Math.floor(d.Top - oy), r = Math.ceil(d.Right - ox), b = Math.ceil(d.Bottom - oy);
+        let l = Math.floor(d.Left), t = Math.floor(d.Top), r = Math.ceil(d.Right), b = Math.ceil(d.Bottom);
+        let device = null;
+        if (this.UseContext) {
+            const m = canvas.getTotalMatrix();
+            const p = CK.Matrix.mapPoints(m, [d.Left, d.Top, d.Right, d.Top, d.Right, d.Bottom, d.Left, d.Bottom]);
+            l = Math.max(0, Math.floor(Math.min(p[0], p[2], p[4], p[6])));
+            t = Math.max(0, Math.floor(Math.min(p[1], p[3], p[5], p[7])));
+            r = Math.min(surface.width(), Math.ceil(Math.max(p[0], p[2], p[4], p[6])));
+            b = Math.min(surface.height(), Math.ceil(Math.max(p[1], p[3], p[5], p[7])));
+            if (r <= l || b <= t)
+                return;
+            device = CK.Matrix.invert(m);
+            if (!device)
+                return;
+        }
         // whole-surface snapshot, sub-rect on draw: a bounded snapshot of a GPU surface is not origin-safe in CanvasKit
         const image = surface.makeImageSnapshot();
         if (!image)
@@ -63,7 +85,13 @@ export class SkiaBackdrop extends SkiaLayout {
             paint.setColorFilter(gamma);
         const saved = canvas.save();
         canvas.clipRect(CK.LTRBRect(d.Left, d.Top, d.Right, d.Bottom), CK.ClipOp.Intersect, true);
-        canvas.drawImageRectOptions(image, CK.LTRBRect(l, t, r, b), CK.LTRBRect(d.Left, d.Top, d.Right, d.Bottom), CK.FilterMode.Linear, CK.MipmapMode.None, paint);
+        if (device) {
+            canvas.concat(device);
+            canvas.drawImageRectOptions(image, CK.LTRBRect(l, t, r, b), CK.LTRBRect(l, t, r, b), CK.FilterMode.Nearest, CK.MipmapMode.None, paint);
+        }
+        else {
+            canvas.drawImageRectOptions(image, CK.LTRBRect(l, t, r, b), CK.LTRBRect(d.Left, d.Top, d.Right, d.Bottom), CK.FilterMode.Linear, CK.MipmapMode.None, paint);
+        }
         canvas.restoreToCount(saved);
         blur?.delete();
         gamma?.delete();
@@ -78,5 +106,15 @@ export class SkiaBackdrop extends SkiaLayout {
             p = p.Parent;
         } });
     }
+    /** C# StopPictureCachesAbove: the picture-cached ancestors draw live from the next frame, which this asks for. */
+    StopPictureCachesAbove() {
+        for (let p = this.Parent; p; p = p.Parent) {
+            if (p.UsingCacheType === "Operations") {
+                p.HostsBackdrop = true;
+                p.InvalidateCache();
+            }
+        }
+        queueMicrotask(() => this.Update());
+    }
     OnDisposing() { this.snapshot?.delete(); this.snapshot = undefined; }
 }

package/dist/core/SkiaControl.d.ts

@@ -52,6 +52,15 @@ export declare class CachedObject {
     private static BlitPaint;
     /** 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;
+    /**
+     * C# GetPictureImage: the picture of a picture cache (Operations, OperationsFull) drawn into an image, made on the
+     * first call (on `main`'s GPU context when given) and kept as long as this cache lives. Shader effects read it as
+     * their input, so on such a control they work on its own content, as on an Image cache.
+     */
+    GetPictureImage(main?: Surface): Image | undefined;
+    private pictureImage?;
+    /** The picture drawn into an image, once GetPictureImage made it. */
+    get PictureImage(): Image | undefined;
     Dispose(): void;
 }
 /**
@@ -148,6 +157,11 @@ export declare class SkiaControl {
     /** What to cache for this subtree; see SkiaCacheType. Layouts default to None, SkiaLabel/SkiaSvg to Operations. */
     UseCache: SkiaCacheType;
     /** The cache type actually applied (None while caching is disabled globally). */
+    /**
+     * C# HostsBackdrop: a SkiaBackdrop inside asked this picture-cached control to draw live (a picture would replay
+     * the backdrop's screen copy frozen). Stays set after the backdrop is removed: the control just keeps drawing live.
+     */
+    HostsBackdrop: boolean;
     get UsingCacheType(): SkiaCacheType;
     /** C# IsCacheComposite: the offscreen surface is kept and only the changed children are re-recorded. */
     get IsCacheComposite(): boolean;

package/dist/core/SkiaControl.js

@@ -53,9 +53,36 @@ export class CachedObject {
             canvas.restoreToCount(saved);
         }
     }
+    /**
+     * C# GetPictureImage: the picture of a picture cache (Operations, OperationsFull) drawn into an image, made on the
+     * first call (on `main`'s GPU context when given) and kept as long as this cache lives. Shader effects read it as
+     * their input, so on such a control they work on its own content, as on an Image cache.
+     */
+    GetPictureImage(main) {
+        if (this.pictureImage || !this.Picture)
+            return this.pictureImage;
+        const w = Math.ceil(this.Bounds.Width), h = Math.ceil(this.Bounds.Height);
+        if (w <= 0 || h <= 0)
+            return undefined;
+        const surface = main?.makeSurface({ ...main.imageInfo(), width: w, height: h }) ?? Super.CK.MakeSurface(w, h);
+        if (!surface)
+            return undefined;
+        const canvas = surface.getCanvas();
+        canvas.clear(Super.CK.TRANSPARENT);
+        canvas.translate(-this.Bounds.Left, -this.Bounds.Top);
+        canvas.drawPicture(this.Picture);
+        this.pictureImage = surface.makeImageSnapshot();
+        surface.delete();
+        return this.pictureImage;
+    }
+    pictureImage;
+    /** The picture drawn into an image, once GetPictureImage made it. */
+    get PictureImage() { return this.pictureImage; }
     Dispose() {
         this.Picture?.delete();
         this.Image?.delete();
+        this.pictureImage?.delete();
+        this.pictureImage = undefined;
     }
 }
 /**
@@ -168,13 +195,18 @@ export class SkiaControl {
     /** What to cache for this subtree; see SkiaCacheType. Layouts default to None, SkiaLabel/SkiaSvg to Operations. */
     UseCache = "None";
     /** The cache type actually applied (None while caching is disabled globally). */
+    /**
+     * C# HostsBackdrop: a SkiaBackdrop inside asked this picture-cached control to draw live (a picture would replay
+     * the backdrop's screen copy frozen). Stays set after the backdrop is removed: the control just keeps drawing live.
+     */
+    HostsBackdrop = false;
     get UsingCacheType() {
         if (!Super.CacheEnabled)
             return "None";
         switch (this.UseCache) {
             case "None": return "None";
             case "Operations":
-            case "OperationsFull": return "Operations";
+            case "OperationsFull": return this.HostsBackdrop ? "None" : "Operations";
             case "ImageDoubleBuffered": return "ImageDoubleBuffered";
             case "ImageComposite":
             case "ImageCompositeGPU": return "ImageComposite";
@@ -358,10 +390,19 @@ export class SkiaControl {
      */
     get CachedImage() {
         const c = this.RenderObject;
-        if (!c?.Image)
+        if (!c)
+            return undefined;
+        if (c.Image) {
+            const r = this.AlignedCacheRect(c.Scale);
+            return { Image: c.Image, Bounds: SKRect.Create(r.Left, r.Top, c.Bounds.Width, c.Bounds.Height) };
+        }
+        // a picture cache: its picture drawn into an image (made in RenderContent), so effects work on this control's
+        // content instead of a snapshot of what is behind it (C# caa1c8c1)
+        const image = c.PictureImage;
+        if (!image)
             return undefined;
-        const r = this.AlignedCacheRect(c.Scale);
-        return { Image: c.Image, Bounds: SKRect.Create(r.Left, r.Top, c.Bounds.Width, c.Bounds.Height) };
+        const r = this.ExpandedCacheRect(c.Scale);
+        return { Image: image, Bounds: SKRect.Create(r.Left, r.Top, image.width(), image.height()) };
     }
     /** Clip overlay effects to the control's shape (CreateClip). */
     ClipEffects = true;
@@ -883,10 +924,14 @@ export class SkiaControl {
             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.DrawCache(this.RenderObject, ctx, r.Left + dx, r.Top + dy);
+                // C# DrawRenderObject: with post renderers a cache is not blitted, the effects sample it (CachedImage) and paint
+                // the result, so the shader replaces the control; a picture cache hands them its picture drawn into an image
+                // (made once per cache, C# GetPictureImage); drawn as before only when that image could not be made
+                const cache = this.RenderObject;
+                if (post.length > 0 && cache.Picture)
+                    cache.GetPictureImage(ctx.Context.Surface);
+                if (post.length === 0 || !(cache.Image ?? cache.PictureImage))
+                    this.DrawCache(cache, ctx, r.Left + dx, r.Top + dy);
                 for (const e of post)
                     e.Render(own);
             }

package/dist/core/SkiaEffect.d.ts

@@ -119,6 +119,16 @@ export declare class SkiaShaderEffect extends SkiaEffect implements IPostRendere
     get NeedApply(): boolean;
     /** Loads (async, once) and compiles (sync) when needed; true when a compiled effect exists. */
     EnsureCompiled(): boolean;
+    /**
+     * C# ShouldInvalidateParentCache (default false): animation ticks, `SetUniform` and `UpdateUniforms()` only redraw
+     * this effect over the parent's cache (ancestor caches still redraw), because the effect paints over the parent's
+     * cached content and a uniform change needs no new cache. True: they also invalidate the parent's cache, so the parent
+     * re-renders its content on every change; set it when that content refreshes only through the effect's redraws (a
+     * custom Paint reading changing data without calling Update()). `Update()` always invalidates the cache.
+     */
+    ShouldInvalidateParentCache: boolean;
+    /** Call after changing a value only the shader reads (a uniform, an animation progress): redraws the effect over the parent's cache, or `Update()` when ShouldInvalidateParentCache is true. */
+    UpdateUniforms(): void;
     SetUniform(name: string, ...values: number[]): this;
     ReleaseFrozenSnapshot(): void;
     private DisposeImage;

package/dist/core/SkiaEffect.js

@@ -116,11 +116,27 @@ export class SkiaShaderEffect extends SkiaEffect {
         }
         return this.compiled !== undefined;
     }
+    /**
+     * C# ShouldInvalidateParentCache (default false): animation ticks, `SetUniform` and `UpdateUniforms()` only redraw
+     * this effect over the parent's cache (ancestor caches still redraw), because the effect paints over the parent's
+     * cached content and a uniform change needs no new cache. True: they also invalidate the parent's cache, so the parent
+     * re-renders its content on every change; set it when that content refreshes only through the effect's redraws (a
+     * custom Paint reading changing data without calling Update()). `Update()` always invalidates the cache.
+     */
+    ShouldInvalidateParentCache = false;
+    /** Call after changing a value only the shader reads (a uniform, an animation progress): redraws the effect over the parent's cache, or `Update()` when ShouldInvalidateParentCache is true. */
+    UpdateUniforms() {
+        if (this.ShouldInvalidateParentCache) {
+            this.Update();
+            return;
+        }
+        this.Parent?.RepaintComposition();
+    }
     // ---- uniforms API (C# SetUniform overloads) ----
     SetUniform(name, ...values) {
         if (name && values.length > 0) {
             this.Uniforms.set(name, values);
-            this.Update();
+            this.UpdateUniforms();
         }
         return this;
     }
@@ -565,7 +581,7 @@ export class AnimatedShaderEffect extends SkiaShaderEffect {
             return;
         if (!this.Animator) {
             const a = new SkiaValueAnimator(parent);
-            a.OnUpdated = (v) => { this.Progress = v; this.Update(); };
+            a.OnUpdated = (v) => { this.Progress = v; this.UpdateUniforms(); };
             a.Finished = () => this.Completed?.(this);
             this.Animator = a;
         }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "drawnui-react",
-  "version": "0.1.0-preview.20",
+  "version": "0.1.0-preview.21",
   "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)",
@@ -75,6 +75,10 @@
     "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",
+    "check:gesture-owner": "node dev/check.mjs dev/check-gesture-owner.ts",
+    "check:shader-cache": "node dev/check.mjs dev/check-shader-cache.ts",
+    "check:shader-content": "node dev/check.mjs dev/check-shader-content.ts",
+    "check:backdrop": "node dev/check.mjs dev/check-backdrop.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",