drawnui-react 0.1.0-preview.13 → 0.1.0-preview.14

package/SKIPPED.md

@@ -77,7 +77,7 @@ DrawnUi name and semantics; nothing here is a redesign, only an omission.
 | `SkiaImageManager` | partial | `Instance.LoadImageAsync(url, signal)` (direct), `LoadImageManagedAsync(url, signal, priority)` through the priority queue (High > Normal > Low, `MaxParallelLoads` 5 in flight like the C# semaphore, one fetch per url serves every requester), `PreloadImage` / `PreloadImages(urls, priority)`, `CancelAll`, `GetFromCache`, `CanReload` callback on failure, `QueuedCount` / `RunningCount`, `ReuseBitmaps`, `Clear()`; in-memory cache of decoded images only. No `CacheLongevitySecs` eviction, no platform loaders, no `LoadImageOnlineAsync` retry policy, no `ImageSource` types (urls only). |
 | `SkiaImageTiles` | ported | `TileWidth` / `TileHeight` (points, nothing drawn until set), `TileAspect` (AspectCover), `TileOffsetX` / `TileOffsetY` (wrap), `TileCacheType` (Image) for the inner tile `SkiaImage` sharing the decoded source, clipped to bounds. |
 | `SkiaSvg` | partial | Inline `SvgString` without `xmlns` gets it injected (browsers refuse to decode an `<img>` SVG without it, SkiaSharp does not care) — the C# check-mark markup relies on that. `Source` (URL) / `SvgString`, `Aspect` (default `AspectFitFill`, uses the shared `RescaleAspect` math, not SkiaSvg's own matrix path), alignments, `TintColor` (SrcIn), `Success`/`Error`, `IsLoading`, `DisplayRect`. Rendering: browser decodes the SVG, rasterized at the displayed pixel size and cached per size (CanvasKit npm has no SVG module). Not ported: shadows, FontAwesome duotone colors, `FillGradient`, `Zoom*`/offsets/`InflateAmount`, `IconFilePath`/embedded resources, `UseCache=Operations` default (no caching yet). |
-| `SkiaScroll` | partial | `Orientation` Vertical/Horizontal/Both/Neither (Neither: pans never move the viewport, the wheel is not consumed so a parent scroll may take it; programmatic `ScrollTo` still works), single `Content`, `ViewportOffsetX/Y` (points, <= 0), pan with the C# 0.85 delta interpolation, fling on the DrawnUi deceleration curve (`FrictionScrolled`, `ChangeVelocityScrolled`, `MaxVelocity`, edge-cut duration), rubber-band overscroll (`Bounces`, `RubberEffect`) + spring bounce (`RubberDamping`, `MaxBounceVelocity`), mouse wheel (`WheelLineSize` per notch, an event moving by its share of a notch: `Canvas.WheelDeltaPerNotch` 100 CSS px after `deltaMode` lines x 40 / pages x 800, dominant axis, as the C# browser heads; `AutoScrollingSpeedMs` glide for a notch, an event under half a notch moves at once (touchpads, see PARITY); events accumulate onto the running move's exact target), `ScrollTo`/`ScrollToTop`/`ScrollToBottom`/`StopScrolling`, `Scrolled`, `IgnoreWrongDirection`, `RespondsToGestures`, `IsUserPanning`/`IsScrolling`, `ContentSize`, `ContentOffsetBounds`, `OverScrolled`. `Header` / `Footer` (JSX children with `Tag="Header"` / `Tag="Footer"`; the header scrolls in the flow, `HeaderSticky` pins it at the viewport start drawn over the content, `HeaderBehind` draws it under the content, `HeaderParallaxRatio` (1 = with the content, 0.5 = half speed), `ParallaxOverscrollEnabled`, `ContentOffset` between a behind / sticky header and the content; both add to the scroll extent), scroll bars (`ScrollBarsVisibility` None / Vertical / Horizontal / Both creating default `SkiaScrollBar`s, `ScrollBar` / `ScrollBarHorizontal` custom `IScrollBar` controls via `Tag="ScrollBar"` / `"ScrollBarHorizontal"`, `ScrollBarThumbColor` / `ScrollBarTrackColor`; `SkiaScrollBar`: `Dock`, `ThumbColor`, `TrackColor`, `Thickness` 4, `EdgeMargin` 2, `MinThumbSize` 32, `AutoHide` + `HideDelaySecs` 1 + `HideDurationSecs` 0.25, thumb squashed on overscroll, `IsDraggable` + `GrabPadding` 8: the scroll takes a gesture that starts on the bar from down to up, thumb drag keeps the grab point, a track press jumps the thumb under the pointer, the content gets neither the pan nor the tap; a custom `IScrollBar` opts in by implementing `IsDraggable` / `BeginDrag` / `GetDragProgress`; bars are parent-independent (C# `IsParentIndependent`): a thumb resize invalidates the bar alone and the scroll re-measures it on draw, nothing above re-measures), pull to refresh (`RefreshEnabled`, `RefreshCommand` callback, `IsRefreshing` two-way, `RefreshDistanceLimit` 150, `RefreshShowDistance` 50, `RefreshIndicator` `IRefreshIndicator` control via `Tag="RefreshIndicator"`; `RefreshIndicator` base: `Orientation`, `SetDragRatio` slides the view in with the pull and parks it at RefreshShowDistance, `IsRunning` + `OnIsRunningChanged`, `VisibleRatio`), `SnapToChildren` Center / Side after a fling or a release (`Snap`, `CheckNeedToSnap`), `TrackIndexPosition` Start / Center / End + `TrackIndexPositionOffset` reporting `CurrentIndex` / `CurrentIndexChanged`. Not ported: `ScrollToIndex` with `Center`/deferred ordered scroll for unmeasured indexes (Start/End on measured structures ported), zoom (`ViewportZoom`, `ZoomLocked`), `ReverseGestures` (inverted chat), keyboard adaptation, `ResetScrollPositionOnContentSizeChanged`, `ScrollType`, `ScrollingEnded` event, `LottieRefreshIndicator`, virtualization hooks (`Virtualisation`, `UseVirtual`, windowed content bounds); the C# refresh-indicator position curve is replaced by a linear slide-in. |
+| `SkiaScroll` | partial | `Orientation` Vertical/Horizontal/Both/Neither (Neither: pans never move the viewport, the wheel is not consumed so a parent scroll may take it; programmatic `ScrollTo` still works), single `Content`, `ViewportOffsetX/Y` (points, <= 0), pan with the C# 0.85 delta interpolation, fling on the DrawnUi deceleration curve (`FrictionScrolled`, `ChangeVelocityScrolled`, `MaxVelocity`, edge-cut duration), rubber-band overscroll (`Bounces`, `RubberEffect`) + spring bounce (`RubberDamping`, `MaxBounceVelocity`), mouse wheel (`WheelLineSize` per notch, an event moving by its share of a notch: `Canvas.WheelDeltaPerNotch` 100 CSS px after `deltaMode` lines x 40 / pages x 800, dominant axis, as the C# browser heads; `AutoScrollingSpeedMs` glide for a notch, an event under half a notch moves at once (touchpads, see PARITY); events accumulate onto the running move's exact target, and a restarted glide starts at the event so a fast swipe moves on every frame; `Wheel.IsHorizontal`: a vertical scroll leaves horizontal events, a horizontal scroll takes both, C# ba03cb20), `ScrollTo`/`ScrollToTop`/`ScrollToBottom`/`StopScrolling`, `Scrolled`, `IgnoreWrongDirection`, `RespondsToGestures`, `IsUserPanning`/`IsScrolling`, `ContentSize`, `ContentOffsetBounds`, `OverScrolled`. `Header` / `Footer` (JSX children with `Tag="Header"` / `Tag="Footer"`; the header scrolls in the flow, `HeaderSticky` pins it at the viewport start drawn over the content, `HeaderBehind` draws it under the content, `HeaderParallaxRatio` (1 = with the content, 0.5 = half speed), `ParallaxOverscrollEnabled`, `ContentOffset` between a behind / sticky header and the content; both add to the scroll extent), scroll bars (`ScrollBarsVisibility` None / Vertical / Horizontal / Both creating default `SkiaScrollBar`s, `ScrollBar` / `ScrollBarHorizontal` custom `IScrollBar` controls via `Tag="ScrollBar"` / `"ScrollBarHorizontal"`, `ScrollBarThumbColor` / `ScrollBarTrackColor`; `SkiaScrollBar`: `Dock`, `ThumbColor`, `TrackColor`, `Thickness` 4, `EdgeMargin` 2, `MinThumbSize` 32, `AutoHide` + `HideDelaySecs` 1 + `HideDurationSecs` 0.25, thumb squashed on overscroll, `IsDraggable` + `GrabPadding` 8: the scroll takes a gesture that starts on the bar from down to up, thumb drag keeps the grab point, a track press jumps the thumb under the pointer, the content gets neither the pan nor the tap; a custom `IScrollBar` opts in by implementing `IsDraggable` / `BeginDrag` / `GetDragProgress`; bars are parent-independent (C# `IsParentIndependent`): a thumb resize invalidates the bar alone and the scroll re-measures it on draw, nothing above re-measures), pull to refresh (`RefreshEnabled`, `RefreshCommand` callback, `IsRefreshing` two-way, `RefreshDistanceLimit` 150, `RefreshShowDistance` 50, `RefreshIndicator` `IRefreshIndicator` control via `Tag="RefreshIndicator"`; `RefreshIndicator` base: `Orientation`, `SetDragRatio` slides the view in with the pull and parks it at RefreshShowDistance, `IsRunning` + `OnIsRunningChanged`, `VisibleRatio`), `SnapToChildren` Center / Side after a fling or a release (`Snap`, `CheckNeedToSnap`), `TrackIndexPosition` Start / Center / End + `TrackIndexPositionOffset` reporting `CurrentIndex` / `CurrentIndexChanged`. Not ported: `ScrollToIndex` with `Center`/deferred ordered scroll for unmeasured indexes (Start/End on measured structures ported), zoom (`ViewportZoom`, `ZoomLocked`), `ReverseGestures` (inverted chat), keyboard adaptation, `ResetScrollPositionOnContentSizeChanged`, `ScrollType`, `ScrollingEnded` event, `LottieRefreshIndicator`, virtualization hooks (`Virtualisation`, `UseVirtual`, windowed content bounds); the C# refresh-indicator position curve is replaced by a linear slide-in. |
 | `SkiaShape` (+ `SkiaFrame`) | partial | `BevelType` Bevel / Emboss + `Bevel` (`Depth`, `LightColor`, `ShadowColor`, `Opacity`; C# `PaintBevelEffect` edge paths for Rectangle, rounded Rectangle, Circle/Ellipse, Polygon, Path via ContourMeasure halves).  `Shadows` (`SkiaShadow` X/Y/Blur/Opacity/Color/ShadowOnly, plain literals accepted): fill painted once per shadow with a DropShadow image filter (C# `PaintWithShadowsInternal`), hollow shapes clip their outline away so only the outside shadow remains; caches record the effects margin (`3·Blur·scale ± offset`, C# `MergeShadowMargin`) via `ComputeEffectsMargin`/`ExpandedCacheRect`. Not ported: `PlatformShadow` (MAUI `Shadow` brush), `ExpandDirtyRegion`, bevel/emboss. `Type` Rectangle/Circle/Ellipse/Arc (`Value1` start, `Value2` sweep)/Polygon+Line (`Points` ratios)/Path (`PathData`, fitted + centered), `CornerRadius` (uniform or per-corner), `StrokeWidth` (points, negative = px) drawn inside the bounds, `StrokeColor`, `StrokeCap`, `ClipBackgroundColor`, children laid out inside the stroke and clipped to the shape, `CreateClip` = shape, `FillGradient` fill, `UseCache=Operations` default. Not ported: `Squricle`, `Custom`, `SmoothPoints`, `StrokePath` (dashes), `StrokeGradient`, `StrokeBlendMode`, sub-1px stroke compensation, `MeasuredStrokeAware*` exposure, `LayoutChildren` override hook. |
 | `SkiaButton` | partial | Now a `SkiaLayout` hosting a `SkiaShape` frame (`Tag="BtnShape"`) + `SkiaLabel` (`Tag="BtnText"`), sized from the label + Padding; `CornerRadius` (default 8), `StrokeColor`/`StrokeWidth`, `BackgroundColor`, text props, `ApplyEffect`, `Tapped`/`Down`/`Up`. Still no `ButtonStyle` looks, icons, `TextCase`, elevation, shimmer, custom templating through tags. |
 | `SnappingLayout` | ported | `Animated`, `RespondsToGestures`, `IgnoreWrongDirection`, `Bounces`, `RubberDamping`, `RubberEffect`, `AutoVelocityMultiplyPts`, `SnapDistanceRatio`, `SnapPoints`, `CurrentPosition`, `CurrentSnap`, `ContentOffsetBounds`, `IsUserPanning`/`IsUserFocused`, `InTransition`, `Scrolled`/`TransitionChanged`/`Stopped`, `ClampOffset` (rubber), `FindNearestAnchor`, `SelectNextAnchor` (dot product), `ScrollToNearestAnchor`, `ScrollToOffset` (spring `Spring(1+RubberDamping, 200, 0.5·(1+RubberDamping))` when `Bounces`, else 0.1–0.8 s from velocity). The settled state is reported when the snap animation stops (C# relies on `ApplyPosition` ticks). Not ported: `AnimatorSpring` reuse, `SnapDistanceRatio` for non-carousel layouts, hover. |

package/dist/controls/SkiaCarousel.js

@@ -561,6 +561,10 @@ export class SkiaCarousel extends SnappingLayout {
                 if (!this.IsUserPanning) {
                     const movex = Math.abs(e.Distance.Total.X), movey = Math.abs(e.Distance.Total.Y);
                     const along = this.IsVertical ? movey : movex, across = this.IsVertical ? movex : movey;
+                    // a first move too short to tell the direction decides nothing yet (a 1 CSS px move at devicePixelRatio 2):
+                    // marking it wrong kept the whole drag dead until the next press (DrawnUi.Rust c6b22e3; C# decides on every move)
+                    if (along < scale * 2 && across < scale * 2)
+                        return consumedDefault;
                     if (along < scale * 2 || across > along) {
                         this.wrongDirection = true;
                         return consumedDefault;

package/dist/controls/SkiaScroll.js

@@ -901,6 +901,9 @@ export class SkiaScroll extends SkiaControl {
                 return child;
             if (!this.RespondsToGestures || this.Orientation === "Neither")
                 return child ?? consumedDefault; // Neither: not used, a parent scroll may take it
+            // a vertical scroll leaves horizontal events (the sideways part of a diagonal swipe) to whatever is around it
+            if (e.Wheel.IsHorizontal && this.Orientation === "Vertical")
+                return child ?? consumedDefault;
             if (!this.ApplyWheelScroll(e.Wheel.Delta))
                 return consumedDefault; // at its edge: not used, the page may take it
             e.Handled = true;
@@ -1069,6 +1072,13 @@ export class SkiaScroll extends SkiaControl {
         // content behind the fingers, a visible delay before it started to move
         const glide = perNotch <= 0 || Math.abs(delta) >= perNotch / 2;
         this.ScrollTo(x, y, glide ? this.AutoScrollingSpeedMs / 1000 : 0, true);
+        // a restarted glide starts at the event, not at its first frame: a fast trackpad swipe sends a notch-sized event
+        // before every frame, and a glide drawn at progress 0 on each of them left the content standing still until the
+        // events stopped, then it jumped (DrawnUi.Rust dfe36fe). Never before the last frame, at most one frame back.
+        if (glide && running.IsRunning) {
+            const event = performance.now() * 1_000_000;
+            running.StartFrameTimeNanos = running.LastFrameTimeNanos = Math.max(this.Superview?.FrameTimeNanos ?? 0, event - 16_666_667);
+        }
         return true;
     }
 }

package/dist/core/Canvas.d.ts

@@ -83,6 +83,8 @@ export declare class Canvas {
      * fingers moved. 0 = units unknown: every event scrolls one line.
      */
     WheelDeltaPerNotch: number;
+    /** Vsync time of the last frame the animators ran on (nanoseconds, the performance.now() timeline). */
+    FrameTimeNanos: number;
     /** On-screen surface (SkiaBackdrop snapshots it). */
     get Surface(): Surface | undefined;
     /**

package/dist/core/Canvas.js

@@ -140,6 +140,7 @@ export class Canvas {
         // (measured 12..23 ms between frames shown 16.7 ms apart), and a game loop moving by speed * delta then
         // jumps unevenly on screen.
         const frameTime = Number(document.timeline?.currentTime ?? started);
+        this.FrameTimeNanos = Math.round(frameTime * 1_000_000);
         const executed = this.ExecuteAnimators(Math.round(frameTime * 1_000_000));
         const canRender = this.CanRender;
         if (canRender && !this.WasRendered)
@@ -209,6 +210,8 @@ export class Canvas {
      * fingers moved. 0 = units unknown: every event scrolls one line.
      */
     WheelDeltaPerNotch = 100;
+    /** Vsync time of the last frame the animators ran on (nanoseconds, the performance.now() timeline). */
+    FrameTimeNanos = 0;
     /** On-screen surface (SkiaBackdrop snapshots it). */
     get Surface() { return this.surface; }
     /**
@@ -389,9 +392,11 @@ export class Canvas {
         args.Scale = this.RenderingScale;
         args.Location = new SKPoint((e.clientX - rect.left) * this.RenderingScale, (e.clientY - rect.top) * this.RenderingScale);
         args.StartingLocation = args.Location;
-        // lines and pages to pixels, then the dominant axis (the .NET browser heads, fc8980c1)
+        // lines and pages to pixels, then the dominant axis (the .NET browser heads, fc8980c1); a vertical scroll leaves
+        // horizontal events alone (C# ba03cb20)
         const factor = e.deltaMode === 1 ? 40 : e.deltaMode === 2 ? 800 : 1;
-        args.Wheel = { Delta: (Math.abs(e.deltaY) >= Math.abs(e.deltaX) ? e.deltaY : e.deltaX) * factor };
+        const horizontal = Math.abs(e.deltaX) > Math.abs(e.deltaY);
+        args.Wheel = { Delta: (horizontal ? e.deltaX : e.deltaY) * factor, IsHorizontal: horizontal };
         if (this.gestures === "Lock") {
             e.preventDefault();
             this.OnGestureEvent(args, "Wheel");

package/dist/core/Gestures.d.ts

@@ -49,9 +49,13 @@ export declare class TouchActionEventArgs {
     Timestamp: number;
     /** ms since the previous event of the same pointer. */
     DeltaTimeMs: number;
-    /** Mouse wheel: Delta > 0 = wheel down (browser deltaY sign). */
+    /**
+     * Mouse wheel: Delta > 0 = wheel down / right (browser sign). IsHorizontal: the event is along the X axis (a tilting
+     * wheel, the sideways part of a two-finger touchpad swipe), as C# WheelEventArgs.IsHorizontal.
+     */
     Wheel: {
         Delta: number;
+        IsHorizontal?: boolean;
     };
     /**
      * AppoMobi TouchActionEventArgs.Handled: set by a control that actually used the event. The canvas prevents the

package/dist/core/Gestures.js

@@ -43,7 +43,10 @@ export class TouchActionEventArgs {
     Timestamp = performance.now();
     /** ms since the previous event of the same pointer. */
     DeltaTimeMs = 0;
-    /** Mouse wheel: Delta > 0 = wheel down (browser deltaY sign). */
+    /**
+     * Mouse wheel: Delta > 0 = wheel down / right (browser sign). IsHorizontal: the event is along the X axis (a tilting
+     * wheel, the sideways part of a two-finger touchpad swipe), as C# WheelEventArgs.IsHorizontal.
+     */
     Wheel = { Delta: 0 };
     /**
      * AppoMobi TouchActionEventArgs.Handled: set by a control that actually used the event. The canvas prevents the

package/dist/core/SkiaControl.d.ts

@@ -181,7 +181,12 @@ export declare class SkiaControl {
     protected OnVisualEffectsChanged(): void;
     /** Post renderers that can render this frame (compiled shaders); an unready effect leaves the control drawn plainly. */
     private ActivePostRenderers;
-    /** C# CachedImage: the cached texture and the canvas rect it was rasterized over (Image caches only). */
+    /**
+     * C# CachedImage: the cached texture (Image caches only) and the canvas rect it covers NOW. Scrolled content is
+     * re-arranged here, not drawn through a translated canvas, so a cache recorded before its control moved is blitted
+     * at the control's current aligned rect (RenderContent) and its record-time Bounds are stale: an effect sampling it
+     * there (the slides of a SkiaShaderCarousel after the page scrolled) was off by the scroll amount.
+     */
     get CachedImage(): CachedTexture | undefined;
     /** Clip overlay effects to the control's shape (CreateClip). */
     ClipEffects: boolean;

package/dist/core/SkiaControl.js

@@ -235,10 +235,18 @@ export class SkiaControl {
             return [];
         return this.EffectPostRenderers.filter((e) => e.NeedApply);
     }
-    /** C# CachedImage: the cached texture and the canvas rect it was rasterized over (Image caches only). */
+    /**
+     * C# CachedImage: the cached texture (Image caches only) and the canvas rect it covers NOW. Scrolled content is
+     * re-arranged here, not drawn through a translated canvas, so a cache recorded before its control moved is blitted
+     * at the control's current aligned rect (RenderContent) and its record-time Bounds are stale: an effect sampling it
+     * there (the slides of a SkiaShaderCarousel after the page scrolled) was off by the scroll amount.
+     */
     get CachedImage() {
         const c = this.RenderObject;
-        return c?.Image ? { Image: c.Image, Bounds: c.Bounds } : undefined;
+        if (!c?.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) };
     }
     /** Clip overlay effects to the control's shape (CreateClip). */
     ClipEffects = true;

package/dist/core/SkiaEffect.d.ts

@@ -125,6 +125,10 @@ export declare class SkiaShaderEffect extends SkiaEffect implements IPostRendere
     protected ApplyShaderSource(): void;
     /** Snapshot of what the parent painted (C# CreateSnapshot): the surface the pixels are on, mapped through its origin. */
     protected CreateSnapshot(ctx: DrawingContext, destination: SKRect): CachedTexture | undefined;
+    /** Where the parent was when the texture was frozen (Once): the texture moves with it, as its cache does. */
+    private frozenAt?;
+    private ParentOrigin;
+    private FollowParent;
     /** C# GetPrimaryTexture: the parent's cache, a frozen snapshot (Once) or nothing (Never). */
     protected GetPrimaryTexture(_ctx: DrawingContext, _destination: SKRect): CachedTexture | undefined;
     /** Image → shader with the effect's sampling, translated so texel (0,0) = bounds top-left; cached per image. */

package/dist/core/SkiaEffect.js

@@ -2,7 +2,7 @@ import { SkiaValueAnimator } from "./Animators";
 import { Easing } from "./Easing";
 import { SkiaImageManager } from "./SkiaImageManager";
 import { Super } from "./Super";
-import { Thickness } from "./Types";
+import { SKRect, Thickness } from "./Types";
 /**
  * Mirrors DrawnUi SkiaEffect: something attached to a control through `VisualEffects`. `Update()` re-renders the
  * parent (C# invalidates the parent's cache and redraws), `GetEffectMargin` reports what it paints outside the box.
@@ -129,6 +129,7 @@ export class SkiaShaderEffect extends SkiaEffect {
             this.DisposeImage(this.frozen.Image);
         this.frozen = undefined;
         this.frozenOwned = false;
+        this.frozenAt = undefined;
     }
     DisposeImage(image) {
         const sv = this.Parent?.Superview;
@@ -158,6 +159,18 @@ export class SkiaShaderEffect extends SkiaEffect {
             return undefined;
         return { Image: image, Bounds: destination, Origin: { X: ox, Y: oy } };
     }
+    /** Where the parent was when the texture was frozen (Once): the texture moves with it, as its cache does. */
+    frozenAt;
+    ParentOrigin() { const r = this.Parent?.DrawingRect; return { X: r?.Left ?? 0, Y: r?.Top ?? 0 }; }
+    FollowParent(texture) {
+        if (!texture || !this.frozenAt)
+            return texture;
+        const now = this.ParentOrigin(), dx = now.X - this.frozenAt.X, dy = now.Y - this.frozenAt.Y;
+        if (dx === 0 && dy === 0)
+            return texture;
+        const b = texture.Bounds;
+        return { Image: texture.Image, Bounds: new SKRect(b.Left + dx, b.Top + dy, b.Right + dx, b.Bottom + dy), Origin: texture.Origin && { X: texture.Origin.X + dx, Y: texture.Origin.Y + dy } };
+    }
     /** C# GetPrimaryTexture: the parent's cache, a frozen snapshot (Once) or nothing (Never). */
     GetPrimaryTexture(_ctx, _destination) {
         switch (this.UseBackground) {
@@ -175,9 +188,10 @@ export class SkiaShaderEffect extends SkiaEffect {
                         this.frozen = snapshot;
                         this.frozenOwned = owned;
                         this.AquiredBackground = true;
+                        this.frozenAt = this.ParentOrigin();
                     }
                 }
-                return this.frozen;
+                return this.FollowParent(this.frozen);
             default:
                 return this.Parent?.CachedImage;
         }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "drawnui-react",
-  "version": "0.1.0-preview.13",
+  "version": "0.1.0-preview.14",
   "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)",
@@ -55,6 +55,7 @@
     "sync:skills": "node dev/sync-skills.mjs",
     "check:recycling": "node dev/check.mjs dev/check-recycling.ts",
     "check:keyboard": "node dev/check.mjs dev/check-keyboard.ts",
+    "check:wheel": "node dev/check.mjs dev/check-wheel.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",