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

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;
@@ -136,18 +138,43 @@ export declare class SkiaControl {
     private compositeSurface?;
     /** Own content or structure changed: the next composite record is a full one. */
     private compositeFull;
+    /** Where the kept composite surface starts relative to DrawingRect (the effects margin it was laid out with). */
+    private compositeInsetX;
+    private compositeInsetY;
     /** Canvas-pixel bounds this control covered when its parent last recorded it (composite erase region). */
     private lastCompositeBounds?;
-    /** What the last composite record did (diagnostics): "full" or "partial", the number of children re-recorded and which ones. */
+    /**
+     * What the last composite record did (diagnostics): "full" or "partial", the number of children re-recorded and which
+     * ones; Areas: the pixels erased and drawn again for changes deeper than a child (C# Areas), Changed: the controls
+     * those areas belong to (C# Changed).
+     */
     LastCompositeRecord: {
         Mode: "full" | "partial";
         Children: number;
         Dirty: readonly SkiaControl[];
+        Areas: readonly SKRect[];
+        Changed: readonly SkiaControl[];
     };
+    /** C# MaxCompositionAreas: more areas than this in one composite record draw it whole instead. */
+    static MaxCompositionAreas: number;
+    /** C# MaxCompositionShare: areas covering more than this share of a composite draw it whole instead. */
+    static MaxCompositionShare: number;
+    /**
+     * Changes deeper than a direct child since the last composite record (drawnui-cross 6m): the control, the direct child
+     * it is in, where it was drawn before the change (its own drawn bounds, as drawn) and its rect then.
+     */
+    private compositeDeep?;
+    /** Set while an UpdateDraw climbs: the ancestors re-measure but an ImageComposite among them keeps its partial record. */
+    private static drawOrigin;
+    /** Nonzero while a composite redraws only some areas: layouts skip children entirely outside the clip. */
+    static CompositionCulling: number;
     /** The children a composite record can re-record individually; layouts return their views. */
     protected GetCompositeChildren(): readonly SkiaControl[];
     /** C# TrackChildAsDirty (DirtyChildrenTracker): the child changed without a remeasure of this control. */
     TrackChildAsDirty(child: SkiaControl): void;
+    private static readonly rejectRect;
+    /** During a partial composite record: true when this control draws nothing inside the canvas clip (skipped whole). */
+    OutsideCompositionClip(canvas: SkCanvas): boolean;
     /** Drawn bounds in canvas pixels including transforms and effects margins (C# GetTransformedDirtyBounds). */
     GetTransformedDirtyBounds(): SKRect;
     /** Current cache, if any. */
@@ -158,6 +185,36 @@ export declare class SkiaControl {
     /** Consume every gesture that lands on this control so nothing below (z-order) receives it. */
     BlockGesturesBelow: boolean;
     LockChildrenGestures: LockTouch;
+    private receivesHover?;
+    /**
+     * Whether this control takes mouse hover: the canvas sets IsHovered while the mouse is over it. Opt-in: false by
+     * default, true by default only in the controls that always had hover (SkiaButton, SkiaSlider, the toggles,
+     * SkiaRadioButton, SkiaCarousel, SkiaDrawer), never because a control has a tap handler. A HoverChanged handler turns
+     * it on (C# fluent OnHovered) unless it is set.
+     */
+    get ReceivesHover(): boolean;
+    set ReceivesHover(value: boolean);
+    /** The value of ReceivesHover until it is set. */
+    protected ReceivesHoverByDefault(): boolean;
+    private isHovered;
+    /**
+     * True while the mouse is over this control and it takes hover. Every such control under the pointer is hovered at
+     * once (a card and the button inside it, as CSS :hover); it stays as it is while content moves under the pointer and
+     * is checked again when that stops. Touch never hovers.
+     */
+    get IsHovered(): boolean;
+    /** IsHovered changed: true when the mouse came over this control, false when it left (C# HoverChanged / OnHovered). */
+    HoverChanged?: (sender: SkiaControl, hovered: boolean) => void;
+    /** Set by the canvas's HoverManager. */
+    ApplyHover(on: boolean): void;
+    /** A scroll, carousel or drawer moving its content right now: hover waits until it stops (C# IsScrolling / InTransition). */
+    MovesContent(): boolean;
+    /**
+     * Hover hit path (HoverManager): this control is under the point (in its own space), its children under it follow,
+     * top-most first, by the routing rules of ProcessGestures. True when this subtree blocks gestures below it, so the
+     * controls under it get no hover (a popup over a list).
+     */
+    CollectHovered(point: SKPoint, into: SkiaControl[]): boolean;
     TouchEffectColor: Color;
     /** Plays a ripple (from the tap point) when Tapped fires. */
     AnimationTapped: SkiaTouchAnimation;
@@ -209,6 +266,11 @@ export declare class SkiaControl {
      * built in code-behind is styled on its first measure and keeps whatever the code already set.
      */
     ApplyInitialStyles(atConstruction?: boolean): void;
+    /**
+     * C# IsChildrenItem: added by the app (JSX children or the `Children` list), not a part the control made itself. A new
+     * `Children` list drops only these, so a control's own parts keep their place.
+     */
+    IsChildrenItem: boolean;
     AddSubView(_control: SkiaControl): void;
     InsertSubView(_index: number, control: SkiaControl): void;
     RemoveSubView(_control: SkiaControl): void;
@@ -414,6 +476,30 @@ export declare class SkiaControl {
      * cache holds its composited output, so those are staled before redrawing (DrawnUi RedrawCanvas + parent invalidation).
      */
     RepaintComposition(): void;
+    /**
+     * Update() for a change of how this control looks, not of its size (a color set through props, C# NeedDraw): the same
+     * re-measure and cache invalidation, but an ImageComposite above redraws only this control's area instead of
+     * recording whole (drawnui-cross 6m). The record still goes whole when the control's rect changed after all.
+     */
+    UpdateDraw(): void;
+    /**
+     * A change of this control that keeps its layout, to every ImageComposite above: a direct child is drawn again whole
+     * (C# TrackChildAsDirty), a deeper control by its area, read now as it was drawn (its last matrix and effects margin).
+     */
+    private ReportToComposites;
+    /** The matrix this control will be drawn with (Render), from its current properties; undefined when none. */
+    private CurrentMatrix;
+    /** Where this control will be drawn: its rect grown by its effects margin, through its current matrix. */
+    private DrawnBoundsNow;
+    private static MapRect;
+    /** Its output depends on all of its content (a visual effect; a backdrop samples below): a change inside redraws it whole. */
+    protected get SamplesContent(): boolean;
+    /**
+     * Where a deep change shows inside the composite (drawnui-cross 6m rule b): the control as drawn before and as drawn
+     * now, then through the transform of every ancestor up to the composite. undefined: draw the child whole (an effect
+     * or a backdrop on the way, the control gone from the child); null: the layout changed, record whole.
+     */
+    private static DeepArea;
     /**
      * DrawnUi IsParentIndependent: this control's size never changes the layout around it, so its own invalidation
      * stops here (ancestors composite again, nothing above re-measures). The parent re-measures it on draw when

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;
@@ -132,6 +134,7 @@ export class SkiaControl {
             return;
         this.bindingContext = value;
         this.OnBindingContextChanged();
+        this.Superview?.Hover?.RequestCheck(); // a recycled cell under a still mouse now shows another item
     }
     /** Index of the bound item inside its ItemsSource, -1 when not templated. */
     ContextIndex = -1;
@@ -164,15 +167,45 @@ export class SkiaControl {
     compositeSurface;
     /** Own content or structure changed: the next composite record is a full one. */
     compositeFull = true;
+    /** Where the kept composite surface starts relative to DrawingRect (the effects margin it was laid out with). */
+    compositeInsetX = 0;
+    compositeInsetY = 0;
     /** Canvas-pixel bounds this control covered when its parent last recorded it (composite erase region). */
     lastCompositeBounds;
-    /** What the last composite record did (diagnostics): "full" or "partial", the number of children re-recorded and which ones. */
-    LastCompositeRecord = { Mode: "full", Children: 0, Dirty: [] };
+    /**
+     * What the last composite record did (diagnostics): "full" or "partial", the number of children re-recorded and which
+     * ones; Areas: the pixels erased and drawn again for changes deeper than a child (C# Areas), Changed: the controls
+     * those areas belong to (C# Changed).
+     */
+    LastCompositeRecord = { Mode: "full", Children: 0, Dirty: [], Areas: [], Changed: [] };
+    /** C# MaxCompositionAreas: more areas than this in one composite record draw it whole instead. */
+    static MaxCompositionAreas = 16;
+    /** C# MaxCompositionShare: areas covering more than this share of a composite draw it whole instead. */
+    static MaxCompositionShare = 0.5;
+    /**
+     * Changes deeper than a direct child since the last composite record (drawnui-cross 6m): the control, the direct child
+     * it is in, where it was drawn before the change (its own drawn bounds, as drawn) and its rect then.
+     */
+    compositeDeep;
+    /** Set while an UpdateDraw climbs: the ancestors re-measure but an ImageComposite among them keeps its partial record. */
+    static drawOrigin = null;
+    /** Nonzero while a composite redraws only some areas: layouts skip children entirely outside the clip. */
+    static CompositionCulling = 0;
     /** The children a composite record can re-record individually; layouts return their views. */
     GetCompositeChildren() { return []; }
     /** C# TrackChildAsDirty (DirtyChildrenTracker): the child changed without a remeasure of this control. */
     TrackChildAsDirty(child) { if (this.IsCacheComposite)
         this.DirtyChildrenInternal.add(child); }
+    static rejectRect = new Float32Array(4);
+    /** During a partial composite record: true when this control draws nothing inside the canvas clip (skipped whole). */
+    OutsideCompositionClip(canvas) {
+        const b = this.DrawnBoundsNow(this.RenderingScale), q = SkiaControl.rejectRect;
+        q[0] = b.Left;
+        q[1] = b.Top;
+        q[2] = b.Right;
+        q[3] = b.Bottom;
+        return canvas.quickReject(q);
+    }
     /** Drawn bounds in canvas pixels including transforms and effects margins (C# GetTransformedDirtyBounds). */
     GetTransformedDirtyBounds() {
         const r = this.ExpandedCacheRect(this.RenderingScale), m = this.RenderTransformMatrix;
@@ -191,6 +224,55 @@ export class SkiaControl {
     /** Consume every gesture that lands on this control so nothing below (z-order) receives it. */
     BlockGesturesBelow = false;
     LockChildrenGestures = "Disabled";
+    // ---- hover (drawnui-cross 6m, C# ReceivesHover / IsHovered / HoverChanged) ----
+    receivesHover;
+    /**
+     * Whether this control takes mouse hover: the canvas sets IsHovered while the mouse is over it. Opt-in: false by
+     * default, true by default only in the controls that always had hover (SkiaButton, SkiaSlider, the toggles,
+     * SkiaRadioButton, SkiaCarousel, SkiaDrawer), never because a control has a tap handler. A HoverChanged handler turns
+     * it on (C# fluent OnHovered) unless it is set.
+     */
+    get ReceivesHover() { return this.receivesHover ?? (this.HoverChanged ? true : this.ReceivesHoverByDefault()); }
+    set ReceivesHover(value) { this.receivesHover = value; }
+    /** The value of ReceivesHover until it is set. */
+    ReceivesHoverByDefault() { return false; }
+    isHovered = false;
+    /**
+     * True while the mouse is over this control and it takes hover. Every such control under the pointer is hovered at
+     * once (a card and the button inside it, as CSS :hover); it stays as it is while content moves under the pointer and
+     * is checked again when that stops. Touch never hovers.
+     */
+    get IsHovered() { return this.isHovered; }
+    /** IsHovered changed: true when the mouse came over this control, false when it left (C# HoverChanged / OnHovered). */
+    HoverChanged;
+    /** Set by the canvas's HoverManager. */
+    ApplyHover(on) {
+        if (this.isHovered === on)
+            return;
+        this.isHovered = on;
+        this.HoverChanged?.(this, on);
+    }
+    /** A scroll, carousel or drawer moving its content right now: hover waits until it stops (C# IsScrolling / InTransition). */
+    MovesContent() { return false; }
+    /**
+     * Hover hit path (HoverManager): this control is under the point (in its own space), its children under it follow,
+     * top-most first, by the routing rules of ProcessGestures. True when this subtree blocks gestures below it, so the
+     * controls under it get no hover (a popup over a list).
+     */
+    CollectHovered(point, into) {
+        into.push(this);
+        if (!this.CheckChildrenGesturesLocked("Pointer")) {
+            const listeners = this.GetGestureListeners();
+            for (let i = listeners.length - 1; i >= 0; i--) {
+                const child = listeners[i];
+                if (!child.IsVisible || child.InputTransparent || !this.IsGestureForChild(child, point))
+                    continue;
+                if (child.CollectHovered(child.TransformPointToLocalSpace(point), into))
+                    return true;
+            }
+        }
+        return this.BlockGesturesBelow;
+    }
     // ---- touch feedback (same names as DrawnUi) ----
     TouchEffectColor = Colors.White;
     /** Plays a ripple (from the tap point) when Tapped fires. */
@@ -275,6 +357,11 @@ export class SkiaControl {
         if (!SkiaStyles.IsEmpty)
             SkiaStyles.Apply(this, atConstruction);
     }
+    /**
+     * C# IsChildrenItem: added by the app (JSX children or the `Children` list), not a part the control made itself. A new
+     * `Children` list drops only these, so a control's own parts keep their place.
+     */
+    IsChildrenItem = false;
     AddSubView(_control) { throw new Error(`DrawnUi: ${this.constructor.name} cannot host children`); }
     InsertSubView(_index, control) { this.AddSubView(control); }
     RemoveSubView(_control) { }
@@ -691,7 +778,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)
@@ -750,6 +840,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);
@@ -773,6 +864,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;
     }
@@ -791,7 +883,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();
@@ -804,14 +898,46 @@ export class SkiaControl {
         }
         const canvas = surface.getCanvas();
         const children = this.GetCompositeChildren();
-        const partial = sameGeometry && !this.compositeFull && this.DirtyChildrenInternal.size > 0 && children.length > 0;
+        const deep = this.compositeDeep;
+        // the same size with another effects margin moves the content inside the surface: record whole (C# 97683f19)
+        const insetX = r.Left - this.DrawingRect.Left, insetY = r.Top - this.DrawingRect.Top;
+        const sameInset = insetX === this.compositeInsetX && insetY === this.compositeInsetY;
+        this.compositeInsetX = insetX;
+        this.compositeInsetY = insetY;
+        let partial = sameGeometry && sameInset && !this.compositeFull && children.length > 0 && (this.DirtyChildrenInternal.size > 0 || !!deep?.length);
+        // changes deeper than a child: only their areas, the child they are in drawn clipped to them (drawnui-cross 6m)
+        const areas = [], changed = [], inside = new Set();
+        if (partial && deep?.length) {
+            let covered = 0;
+            for (const d of deep) {
+                if (!children.includes(d.Child) || this.DirtyChildrenInternal.has(d.Child))
+                    continue;
+                const area = SkiaControl.DeepArea(d, this, ctx.Scale);
+                if (area === null) {
+                    partial = false;
+                    break;
+                }
+                if (!area) {
+                    this.DirtyChildrenInternal.add(d.Child);
+                    continue;
+                }
+                areas.push(area);
+                changed.push(d.Origin);
+                inside.add(d.Child);
+                covered += area.Width * area.Height;
+            }
+            if (areas.length > SkiaControl.MaxCompositionAreas || covered > r.Width * r.Height * SkiaControl.MaxCompositionShare)
+                partial = false;
+        }
+        if (deep)
+            deep.length = 0;
         const offset = prev && sameGeometry ? { X: r.Left - prev.Bounds.Left, Y: r.Top - prev.Bounds.Top } : { X: 0, Y: 0 };
         const saved = canvas.save();
         canvas.translate(-r.Left, -r.Top);
         if (partial) {
             // dirty = reported children + siblings intersecting their old or new bounds (C# makes intersecting children dirty too)
             const dirty = new Set();
-            const rects = [];
+            const rects = [...areas];
             const boundsOf = (c) => {
                 const out = [c.GetTransformedDirtyBounds()];
                 if (c.lastCompositeBounds)
@@ -827,7 +953,7 @@ export class SkiaControl {
             while (grew) {
                 grew = false;
                 for (const c of children) {
-                    if (dirty.has(c) || !c.IsVisible)
+                    if (dirty.has(c) || inside.has(c) || !c.IsVisible)
                         continue;
                     const own = boundsOf(c);
                     if (rects.some((d) => own.some((o) => o.Left < d.Right && d.Left < o.Right && o.Top < d.Bottom && d.Top < o.Bottom))) {
@@ -854,14 +980,23 @@ export class SkiaControl {
             this.DirtyChildrenInternal.clear();
             for (const c of dirty)
                 this.DirtyChildrenInternal.add(c);
-            this.PaintContent({ ...ctx, Context: { Canvas: canvas, Surface: surface, Origin: { X: r.Left, Y: r.Top } } });
+            for (const c of inside)
+                this.DirtyChildrenInternal.add(c);
+            SkiaControl.CompositionCulling++;
+            try {
+                this.PaintContent({ ...ctx, Context: { Canvas: canvas, Surface: surface, Origin: { X: r.Left, Y: r.Top } } });
+            }
+            finally {
+                SkiaControl.CompositionCulling--;
+            }
             this.IsRenderingWithComposition = false;
-            this.LastCompositeRecord = { Mode: "partial", Children: dirty.size, Dirty: [...dirty] };
+            const redrawn = children.filter((c) => this.DirtyChildrenInternal.has(c));
+            this.LastCompositeRecord = { Mode: "partial", Children: redrawn.length, Dirty: redrawn, Areas: areas, Changed: changed };
         }
         else {
             canvas.clear(CK.TRANSPARENT);
             this.PaintContent({ ...ctx, Context: { Canvas: canvas, Surface: surface, Origin: { X: r.Left, Y: r.Top } } });
-            this.LastCompositeRecord = { Mode: "full", Children: children.length, Dirty: children };
+            this.LastCompositeRecord = { Mode: "full", Children: children.length, Dirty: children, Areas: [], Changed: [] };
         }
         canvas.restoreToCount(saved);
         for (const c of children)
@@ -871,6 +1006,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)
@@ -906,7 +1042,11 @@ export class SkiaControl {
     /** Marks the cache stale; re-recorded on the next frame (a composite records fully: its own content changed). */
     InvalidateCache() { this.cacheDirty = true; this.compositeFull = true; }
     /** Effects margin recomputed on the next use (C# InvalidateEffectsMargin). */
-    InvalidateEffectsMargin() { this.effectsMarginCache = undefined; }
+    InvalidateEffectsMargin() {
+        // a layout's margin aggregates what its children paint outside it: every ancestor recomputes too (C# 97683f19)
+        for (let c = this; c; c = c.Parent)
+            c.effectsMarginCache = undefined;
+    }
     /** Draws PostAnimators above content; an effect returning true asks for another frame. */
     ExecutePostAnimators(ctx) {
         if (this.PostAnimators.length === 0)
@@ -1124,15 +1264,84 @@ export class SkiaControl {
      * cache holds its composited output, so those are staled before redrawing (DrawnUi RedrawCanvas + parent invalidation).
      */
     RepaintComposition() {
-        let child = this, p = this.Parent;
-        while (p) {
+        this.ReportToComposites();
+        for (let p = this.Parent; p; p = p.Parent)
             p.cacheDirty = true;
-            p.TrackChildAsDirty(child);
-            child = p;
-            p = p.Parent;
-        }
         this.Repaint();
     }
+    /**
+     * Update() for a change of how this control looks, not of its size (a color set through props, C# NeedDraw): the same
+     * re-measure and cache invalidation, but an ImageComposite above redraws only this control's area instead of
+     * recording whole (drawnui-cross 6m). The record still goes whole when the control's rect changed after all.
+     */
+    UpdateDraw() {
+        this.ReportToComposites();
+        const outer = SkiaControl.drawOrigin;
+        SkiaControl.drawOrigin = this;
+        try {
+            this.InvalidateMeasure();
+        }
+        finally {
+            SkiaControl.drawOrigin = outer;
+        }
+    }
+    /**
+     * A change of this control that keeps its layout, to every ImageComposite above: a direct child is drawn again whole
+     * (C# TrackChildAsDirty), a deeper control by its area, read now as it was drawn (its last matrix and effects margin).
+     */
+    ReportToComposites() {
+        let before;
+        let child = this;
+        for (let p = this.Parent; p; child = p, p = p.Parent) {
+            if (!p.IsCacheComposite)
+                continue;
+            if (child === this) {
+                p.TrackChildAsDirty(child);
+                continue;
+            }
+            const deep = p.compositeDeep ??= [];
+            if (deep.some((d) => d.Origin === this))
+                continue;
+            before ??= this.GetTransformedDirtyBounds();
+            const r = this.DrawingRect;
+            deep.push({ Origin: this, Child: child, Before: before, Rect: new SKRect(r.Left, r.Top, r.Right, r.Bottom) });
+        }
+    }
+    /** The matrix this control will be drawn with (Render), from its current properties; undefined when none. */
+    CurrentMatrix(scale) {
+        return this.HasTransform ? this.CreateRenderTransformMatrix(this.DrawingRect, scale) : undefined;
+    }
+    /** Where this control will be drawn: its rect grown by its effects margin, through its current matrix. */
+    DrawnBoundsNow(scale) { return SkiaControl.MapRect(this.CurrentMatrix(scale), this.ExpandedCacheRect(scale)); }
+    static MapRect(m, r) {
+        if (!m)
+            return r;
+        const pts = Super.CK.Matrix.mapPoints(m, [r.Left, r.Top, r.Right, r.Top, r.Right, r.Bottom, r.Left, r.Bottom]);
+        return new SKRect(Math.min(pts[0], pts[2], pts[4], pts[6]), Math.min(pts[1], pts[3], pts[5], pts[7]), Math.max(pts[0], pts[2], pts[4], pts[6]), Math.max(pts[1], pts[3], pts[5], pts[7]));
+    }
+    /** Its output depends on all of its content (a visual effect; a backdrop samples below): a change inside redraws it whole. */
+    get SamplesContent() { return !this.DisableEffects && this.visualEffects.length > 0; }
+    /**
+     * Where a deep change shows inside the composite (drawnui-cross 6m rule b): the control as drawn before and as drawn
+     * now, then through the transform of every ancestor up to the composite. undefined: draw the child whole (an effect
+     * or a backdrop on the way, the control gone from the child); null: the layout changed, record whole.
+     */
+    static DeepArea(d, composite, scale) {
+        const o = d.Origin, r = o.DrawingRect;
+        if (r.Left !== d.Rect.Left || r.Top !== d.Rect.Top || r.Right !== d.Rect.Right || r.Bottom !== d.Rect.Bottom)
+            return null;
+        if (!o.IsVisible)
+            return undefined;
+        const now = o.DrawnBoundsNow(scale);
+        let area = new SKRect(Math.min(now.Left, d.Before.Left), Math.min(now.Top, d.Before.Top), Math.max(now.Right, d.Before.Right), Math.max(now.Bottom, d.Before.Bottom));
+        let p = o.Parent, child = o;
+        for (; p && p !== composite; child = p, p = p.Parent) {
+            if (p.SamplesContent || !p.IsVisible)
+                return undefined;
+            area = SkiaControl.MapRect(p.CurrentMatrix(scale), area);
+        }
+        return p === composite && child === d.Child ? area : undefined;
+    }
     /**
      * DrawnUi IsParentIndependent: this control's size never changes the layout around it, so its own invalidation
      * stops here (ancestors composite again, nothing above re-measures). The parent re-measures it on draw when
@@ -1143,7 +1352,9 @@ export class SkiaControl {
     InvalidateMeasure() {
         this.NeedMeasure = true;
         this.cacheDirty = true;
-        this.compositeFull = true; // structure may change: a composite cannot patch it
+        // structure may change: a composite cannot patch it; a draw-only change (UpdateDraw) reported its area instead
+        if (SkiaControl.drawOrigin === null || SkiaControl.drawOrigin === this)
+            this.compositeFull = true;
         this.effectsMarginCache = undefined;
         if (this.Parent && this.IsParentIndependent)
             this.RepaintComposition();

package/dist/core/SkiaEffect.d.ts

@@ -125,6 +125,9 @@ 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;

package/dist/core/SkiaEffect.js

@@ -159,6 +159,9 @@ 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 }; }
@@ -176,7 +179,7 @@ export class SkiaShaderEffect extends SkiaEffect {
         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;
@@ -189,6 +192,7 @@ export class SkiaShaderEffect extends SkiaEffect {
                         this.frozenOwned = owned;
                         this.AquiredBackground = true;
                         this.frozenAt = this.ParentOrigin();
+                        this.frozenEpoch = this.GpuEpoch();
                     }
                 }
                 return this.FollowParent(this.frozen);
@@ -434,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)
@@ -449,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/dist/index.d.ts

@@ -9,6 +9,7 @@ export * from "./core/SkiaControl";
 export * from "./core/Canvas";
 export * from "./controls/SkiaLayout";
 export * from "./core/Accessibility";
+export * from "./core/Hover";
 export * from "./controls/SkiaLabel";
 export * from "./controls/TextSpan";
 export * from "./controls/SkiaRichLabel";

package/dist/index.js

@@ -9,6 +9,7 @@ export * from "./core/SkiaControl";
 export * from "./core/Canvas";
 export * from "./controls/SkiaLayout";
 export * from "./core/Accessibility";
+export * from "./core/Hover";
 export * from "./controls/SkiaLabel";
 export * from "./controls/TextSpan";
 export * from "./controls/SkiaRichLabel";

package/dist/react/index.d.ts

@@ -42,7 +42,7 @@ import type { GesturesMode } from "../core/Gestures";
  * and never appeared in completion.
  */
 type PropsOf<T> = Partial<{
-    [K in keyof T as T[K] extends Function ? (undefined extends T[K] ? K : never) : K extends "Children" | "Views" | "Parent" | "Spans" | "GridStructure" | "AccessibilityId" | "IsAccessibilityElement" | "HasTransform" | "RenderTransformMatrix" | "RenderObjectPrevious" | "LastMeasuredIndex" | "ItemsInsertedAtStart" | "UsingControlStyle" | "Track" | "Thumb" | "FrameOn" | "FrameOff" | "ViewCheckOn" | "ViewOn" | "ViewText" | "Ratio" | "StartThumbX" | "EndThumbX" | "SnapPoints" | "CurrentPosition" | "CurrentSnap" | "ContentOffsetBounds" | "InTransition" | "CanAnimate" | "MaxIndex" | "ChildrenTotal" | "IsAtStart" | "IsAtEnd" | "ScrollProgress" | "ScrollAmount" | "TransitionProgress" | "LastIndex" | "ChildrenCount" | "Horizontal" | "Animator" | "Animation" | "IsPlaying" | "PlayWhenAvailable" | "TotalFrames" | "HasEffects" | "IsDisposed" | "Label" | "IsMultiline" | "HasSelection" | "LayoutVersion" | "LinesCount" | "MeasuredLineHeight" | "Focused" | "SpriteSheet" | "FrameWidth" | "FrameHeight" | "DurationMs" | "FrameDurationMs" | "CurrentSprite" | "Rects" | "HasTapHandler" | "HasDecorations" | "LinesCount" | "Superview" | "DrawingRect" | "MeasuredSize" | "RenderingScale" | "NeedMeasure" | "_superview" | "HitBoxAuto" | "TotalDown" | "TotalTapped" | "TouchDown" | "PostAnimators" | "LoadedSource" | "IsLoading" | "DisplayRect" | "AspectScale" | "Content" | "ContentSize" | "ContentOffsetBounds" | "OverscrollDistance" | "OverScrolled" | "IsUserPanning" | "IsUserFocused" | "IsScrolling" | "IsTemplated" | "FirstVisibleIndex" | "LastVisibleIndex" | "DebugString" | "ChildrenFactory" | "ContextIndex" | "RenderObject" | "UsingCacheType" | "TransitionEffect" | "TransitionFromIndex" | "TransitionToIndex" | "EffectPostRenderers" | "CachedImage" | "ImageBitmap" | "ShouldSubmitOnEnter" | "Header" | "Footer" | "RefreshIndicator" | "ScrollBar" | "ScrollBarHorizontal" | "IsRunning" | "VisibleRatio" | "CurrentIndex" | "LastCompositeRecord" | "DirtyChildrenInternal" | "IsRenderingWithComposition" ? never : K]: T[K];
+    [K in keyof T as T[K] extends Function ? (undefined extends T[K] ? K : never) : K extends "Children" | "Views" | "Parent" | "Spans" | "GridStructure" | "AccessibilityId" | "IsAccessibilityElement" | "HasTransform" | "RenderTransformMatrix" | "RenderObjectPrevious" | "LastMeasuredIndex" | "ItemsInsertedAtStart" | "UsingControlStyle" | "Track" | "Thumb" | "FrameOn" | "FrameOff" | "ViewCheckOn" | "ViewOn" | "ViewText" | "Ratio" | "StartThumbX" | "EndThumbX" | "SnapPoints" | "CurrentPosition" | "CurrentSnap" | "ContentOffsetBounds" | "InTransition" | "CanAnimate" | "MaxIndex" | "ChildrenTotal" | "IsAtStart" | "IsAtEnd" | "ScrollProgress" | "ScrollAmount" | "TransitionProgress" | "LastIndex" | "ChildrenCount" | "Horizontal" | "Animator" | "Animation" | "IsPlaying" | "PlayWhenAvailable" | "TotalFrames" | "HasEffects" | "IsDisposed" | "Label" | "IsMultiline" | "HasSelection" | "LayoutVersion" | "LinesCount" | "MeasuredLineHeight" | "Focused" | "SpriteSheet" | "FrameWidth" | "FrameHeight" | "DurationMs" | "FrameDurationMs" | "CurrentSprite" | "Rects" | "HasTapHandler" | "HasDecorations" | "LinesCount" | "Superview" | "DrawingRect" | "MeasuredSize" | "RenderingScale" | "NeedMeasure" | "_superview" | "HitBoxAuto" | "TotalDown" | "TotalTapped" | "TouchDown" | "PostAnimators" | "LoadedSource" | "IsLoading" | "DisplayRect" | "AspectScale" | "Content" | "ContentSize" | "ContentOffsetBounds" | "OverscrollDistance" | "OverScrolled" | "IsUserPanning" | "IsUserFocused" | "IsScrolling" | "IsTemplated" | "FirstVisibleIndex" | "LastVisibleIndex" | "DebugString" | "ChildrenFactory" | "ContextIndex" | "RenderObject" | "UsingCacheType" | "TransitionEffect" | "TransitionFromIndex" | "TransitionToIndex" | "EffectPostRenderers" | "CachedImage" | "ImageBitmap" | "ShouldSubmitOnEnter" | "Header" | "Footer" | "RefreshIndicator" | "ScrollBar" | "ScrollBarHorizontal" | "IsRunning" | "VisibleRatio" | "CurrentIndex" | "LastCompositeRecord" | "DirtyChildrenInternal" | "IsRenderingWithComposition" | "IsHovered" ? never : K]: T[K];
 }>;
 /** `ref` receives the engine control instance (react-reconciler getPublicInstance). */
 type LeafProps<T> = PropsOf<T> & {

package/dist/react/index.js

@@ -221,9 +221,9 @@ function AccessibilityOverlay({ view }) {
                         n.Source.NotifyAccessibilityFocused(false);
                     }, children: n.Label }, n.Id)) : n.TextLines ? (
                 // AccessibilityTextSelectable: one positioned span per drawn line, in the drawn font, so the browser selects and copies it like HTML
-                _jsx("div", { role: n.Role, title: n.Hint, "aria-live": n.Live, className: "drawnui-a11y-node drawnui-a11y-text", style: pos, children: n.TextLines.map((l, i) => (_jsxs("span", { "data-w": l.Width, style: { left: l.Left, top: l.Top, height: l.Height, fontFamily: l.FontFamily, fontWeight: l.FontWeight, fontSize: l.FontSize, lineHeight: `${l.Height}px` }, children: [l.Text, i < n.TextLines.length - 1 ? "\n" : ""] }, i))) }, n.Id)) : (
+                _jsx("div", { role: n.Role, title: n.Hint, "aria-disabled": n.Disabled || undefined, "aria-live": n.Live, className: "drawnui-a11y-node drawnui-a11y-text", style: pos, children: n.TextLines.map((l, i) => (_jsxs("span", { "data-w": l.Width, style: { left: l.Left, top: l.Top, height: l.Height, fontFamily: l.FontFamily, fontWeight: l.FontWeight, fontSize: l.FontSize, lineHeight: `${l.Height}px` }, children: [l.Text, i < n.TextLines.length - 1 ? "\n" : ""] }, i))) }, n.Id)) : (
                 // static text is exposed as real (transparent) text content; aria-label only for roles that need a name
-                _jsx("div", { role: n.Role, "aria-label": n.Role === "text" ? undefined : n.Label, title: n.Hint, "aria-live": n.Live, className: "drawnui-a11y-node", style: pos, children: n.Label }, n.Id));
+                _jsx("div", { role: n.Role, "aria-label": n.Role === "text" ? undefined : n.Label, title: n.Hint, "aria-disabled": n.Disabled || undefined, "aria-live": n.Live, className: "drawnui-a11y-node", style: pos, children: n.Label }, n.Id));
             })] }));
 }
 // One import for apps: React tags + every engine type (Colors, Thickness, Super, gestures, animators...).