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

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

@@ -47,6 +47,13 @@ export declare class Canvas {
     private frameId;
     private disposed;
     private readonly observer;
+    /** The WebGL context is lost: no frames until the browser restores it. */
+    private contextLost;
+    /**
+     * Bumped when the WebGL context was restored: every GPU object made before (Image caches, picture caches that may
+     * replay them, kept composite surfaces, effect textures) is remade at its next draw (DrawnUi.Rust Gpu::epoch).
+     */
+    GpuEpoch: number;
     /** `init` runs before the first frame is drawn: the place to attach `WillFirstTimeDraw` / `WasDrawn` for that frame. */
     constructor(Element: HTMLCanvasElement, init?: (canvas: Canvas) => void);
     /** Request a redraw (full measure + arrange + render) on the next animation frame. */
@@ -61,6 +68,17 @@ export declare class Canvas {
      * redrawn content lands in the same paint and no blank frame is ever shown while dragging.
      */
     private OnResized;
+    /** WebGL context lost: keep the browser restoring it (preventDefault) and stop the frames. */
+    private readonly onContextLost;
+    /**
+     * WebGL context restored (as DrawnUi.Rust and the C# Wasm / Blazor heads): every GL object of the lost generation is
+     * gone. The old Skia context is abandoned first, while its own GL handle is current and before the new context makes
+     * any object, so its GL calls reach only lost-generation objects. CanvasKit exposes no `abandonContext`;
+     * `releaseResourcesAndAbandonContext` is its only way to abandon, and after it freeing an old image or surface makes no
+     * GL call. Then the same WebGL object is registered again (the old handle deleted first, which clears the canvas'
+     * context object) with a new GrContext and surface; GpuEpoch makes the old generation's GPU objects remake themselves.
+     */
+    private readonly onContextRestored;
     /** Draws one frame immediately (outside the rAF loop) and presents it. */
     private DrawNow;
     private Draw;
@@ -83,6 +101,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

@@ -54,19 +54,28 @@ export class Canvas {
     frameId = 0;
     disposed = false;
     observer;
+    /** The WebGL context is lost: no frames until the browser restores it. */
+    contextLost = false;
+    /**
+     * Bumped when the WebGL context was restored: every GPU object made before (Image caches, picture caches that may
+     * replay them, kept composite surfaces, effect textures) is remade at its next draw (DrawnUi.Rust Gpu::epoch).
+     */
+    GpuEpoch = 0;
     /** `init` runs before the first frame is drawn: the place to attach `WillFirstTimeDraw` / `WasDrawn` for that frame. */
     constructor(Element, init) {
         this.Element = Element;
         if (!Super.CK)
             throw new Error("DrawnUi: call Super.UseDrawnUi()...BuildAsync() before creating a Canvas");
         init?.(this);
+        Element.addEventListener("webglcontextlost", this.onContextLost);
+        Element.addEventListener("webglcontextrestored", this.onContextRestored);
         this.observer = new ResizeObserver(() => this.OnResized());
         this.observer.observe(Element);
         this.OnResized();
     }
     /** Request a redraw (full measure + arrange + render) on the next animation frame. */
     Update() {
-        if (this.frameId || !this.surface || this.disposed)
+        if (this.frameId || !this.surface || this.disposed || this.contextLost)
             return;
         const surface = this.surface;
         this.frameId = surface.requestAnimationFrame((c) => {
@@ -117,16 +126,53 @@ export class Canvas {
         this.RenderingScale = dpr;
         this.Element.width = w;
         this.Element.height = h;
+        if (this.contextLost)
+            return; // the restore makes the surface at this size
         this.ReleaseSurface();
         this.surface = this.CreateSurface(w, h);
         if (!this.surface)
             throw new Error("DrawnUi: cannot create surface");
         this.DrawNow();
     }
+    /** WebGL context lost: keep the browser restoring it (preventDefault) and stop the frames. */
+    onContextLost = (e) => {
+        e.preventDefault();
+        this.contextLost = true;
+        if (this.frameId) {
+            cancelAnimationFrame(this.frameId);
+            this.frameId = 0;
+        }
+    };
+    /**
+     * WebGL context restored (as DrawnUi.Rust and the C# Wasm / Blazor heads): every GL object of the lost generation is
+     * gone. The old Skia context is abandoned first, while its own GL handle is current and before the new context makes
+     * any object, so its GL calls reach only lost-generation objects. CanvasKit exposes no `abandonContext`;
+     * `releaseResourcesAndAbandonContext` is its only way to abandon, and after it freeing an old image or surface makes no
+     * GL call. Then the same WebGL object is registered again (the old handle deleted first, which clears the canvas'
+     * context object) with a new GrContext and surface; GpuEpoch makes the old generation's GPU objects remake themselves.
+     */
+    onContextRestored = () => {
+        if (this.disposed)
+            return;
+        if (this.grContext)
+            this.grContext.releaseResourcesAndAbandonContext();
+        this.surface?.delete();
+        this.surface = undefined;
+        this.grContext?.delete();
+        this.grContext = undefined;
+        if (this.glHandle) {
+            Super.CK.deleteContext(this.glHandle);
+            this.glHandle = undefined;
+        }
+        this.contextLost = false;
+        this.GpuEpoch++;
+        this.surface = this.CreateSurface(this.Element.width, this.Element.height);
+        this.DrawNow();
+    };
     /** Draws one frame immediately (outside the rAF loop) and presents it. */
     DrawNow() {
         const surface = this.surface;
-        if (!surface || this.disposed)
+        if (!surface || this.disposed || this.contextLost)
             return;
         this.Draw(surface.getCanvas());
         surface.flush();
@@ -140,6 +186,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 +256,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; }
     /**
@@ -257,6 +306,8 @@ export class Canvas {
     }
     Dispose() {
         this.disposed = true;
+        this.Element.removeEventListener("webglcontextlost", this.onContextLost);
+        this.Element.removeEventListener("webglcontextrestored", this.onContextRestored);
         this.Gestures = "Disabled";
         this.observer.disconnect();
         this.content?.Dispose();
@@ -389,9 +440,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

@@ -36,6 +36,8 @@ export declare class CachedObject {
     constructor(Type: SkiaCacheType, 
     /** Rect the content was recorded for, canvas pixels at recording time. */
     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;
     Dispose(): void;
@@ -181,7 +183,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

@@ -22,6 +22,8 @@ export class CachedObject {
         this.Picture = Picture;
         this.Image = Image;
     }
+    /** 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) {
         const CK = Super.CK;
@@ -235,10 +237,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;
@@ -683,7 +693,10 @@ export class SkiaControl {
         }
         else {
             const r = cacheType === "Operations" ? this.ExpandedCacheRect(ctx.Scale) : this.AlignedCacheRect(ctx.Scale);
-            const stale = this.cacheDirty || !this.RenderObject || this.RenderObject.Type !== cacheType
+            const epoch = this.Superview?.GpuEpoch ?? 0;
+            if (this.RenderObjectPrevious && this.RenderObjectPrevious.Epoch !== epoch)
+                this.DisposePrevious(); // made on a lost GPU context
+            const stale = this.cacheDirty || !this.RenderObject || this.RenderObject.Type !== cacheType || this.RenderObject.Epoch !== epoch
                 || this.RenderObject.Scale !== ctx.Scale
                 || Math.round(this.RenderObject.Bounds.Width) !== Math.round(r.Width) || Math.round(this.RenderObject.Bounds.Height) !== Math.round(r.Height);
             if (stale)
@@ -742,6 +755,7 @@ export class SkiaControl {
             const picture = recorder.finishRecordingAsPicture();
             recorder.delete();
             this.RenderObject = new CachedObject("Operations", r, ctx.Scale, picture);
+            this.RenderObject.Epoch = this.Superview?.GpuEpoch ?? 0;
         }
         else if (cacheType === "ImageComposite") {
             this.CreateCompositeRenderingObject(ctx, r, w, h);
@@ -765,6 +779,7 @@ export class SkiaControl {
             const image = offscreen.makeImageSnapshot();
             offscreen.delete();
             this.RenderObject = new CachedObject(cacheType, r, ctx.Scale, undefined, image);
+            this.RenderObject.Epoch = this.Superview?.GpuEpoch ?? 0;
         }
         this.cacheDirty = false;
     }
@@ -783,7 +798,9 @@ export class SkiaControl {
         }
         let surface = this.compositeSurface;
         const prev = this.RenderObject;
-        const sameGeometry = !!surface && !!prev && prev.Type === "ImageComposite" && prev.Scale === ctx.Scale
+        const epoch = this.Superview?.GpuEpoch ?? 0;
+        // the kept surface belongs to the GPU context it was made on: after a context restore it is made again
+        const sameGeometry = !!surface && !!prev && prev.Type === "ImageComposite" && prev.Scale === ctx.Scale && prev.Epoch === epoch
             && Math.round(prev.Bounds.Width) === w && Math.round(prev.Bounds.Height) === h;
         if (!sameGeometry) {
             surface?.delete();
@@ -863,6 +880,7 @@ export class SkiaControl {
         const image = surface.makeImageSnapshot();
         const old = this.RenderObject;
         this.RenderObject = new CachedObject("ImageComposite", r, ctx.Scale, undefined, image);
+        this.RenderObject.Epoch = epoch;
         if (old) {
             const sv = this.Superview;
             if (sv)

package/dist/core/SkiaEffect.d.ts

@@ -125,6 +125,13 @@ 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;
+    private frozenEpoch;
+    /** Canvas.GpuEpoch: GPU textures made before a WebGL context restore are made again. */
+    protected GpuEpoch(): number;
+    /** 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,12 +159,27 @@ export class SkiaShaderEffect extends SkiaEffect {
             return undefined;
         return { Image: image, Bounds: destination, Origin: { X: ox, Y: oy } };
     }
+    frozenEpoch = 0;
+    /** Canvas.GpuEpoch: GPU textures made before a WebGL context restore are made again. */
+    GpuEpoch() { return this.Parent?.Superview?.GpuEpoch ?? 0; }
+    /** 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) {
             case "Never": return undefined;
             case "Once":
-                if (!this.AquiredBackground || !this.frozen) {
+                if (!this.AquiredBackground || !this.frozen || this.frozenEpoch !== this.GpuEpoch()) { // a frozen texture of a lost GPU context is taken again
                     this.ReleaseFrozenSnapshot();
                     let snapshot = this.Parent?.CachedImage;
                     let owned = false;
@@ -175,9 +191,11 @@ export class SkiaShaderEffect extends SkiaEffect {
                         this.frozen = snapshot;
                         this.frozenOwned = owned;
                         this.AquiredBackground = true;
+                        this.frozenAt = this.ParentOrigin();
+                        this.frozenEpoch = this.GpuEpoch();
                     }
                 }
-                return this.frozen;
+                return this.FollowParent(this.frozen);
             default:
                 return this.Parent?.CachedImage;
         }
@@ -420,7 +438,8 @@ export class ShaderDoubleTexturesEffect extends SkiaShaderEffect {
             return undefined;
         const w = Math.round(d.Width), h = Math.round(d.Height);
         const cur = slot === "p" ? this.resizedPrimary : this.resizedSecondary;
-        if (cur && cur.source === source && cur.w === w && cur.h === h)
+        const epoch = this.GpuEpoch();
+        if (cur && cur.source === source && cur.w === w && cur.h === h && cur.epoch === epoch)
             return cur.image;
         const main = ctx.Context.Surface;
         if (!main)
@@ -435,7 +454,7 @@ export class ShaderDoubleTexturesEffect extends SkiaShaderEffect {
         const image = surface.makeImageSnapshot();
         surface.delete();
         cur?.image.delete();
-        const entry = { source, w, h, image };
+        const entry = { source, w, h, epoch, image };
         if (slot === "p")
             this.resizedPrimary = entry;
         else

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "drawnui-react",
-  "version": "0.1.0-preview.13",
+  "version": "0.1.0-preview.15",
   "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",