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

package/dist/core/SkiaControl.js

@@ -134,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;
@@ -166,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;
@@ -193,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. */
@@ -277,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) { }
@@ -813,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)
@@ -836,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))) {
@@ -863,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)
@@ -916,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)
@@ -1134,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
@@ -1153,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/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...).

package/dist/react/reconciler.js

@@ -1,6 +1,7 @@
 import { createContext } from "react";
 import Reconciler from "react-reconciler";
 import { ConcurrentRoot, DefaultEventPriority } from "react-reconciler/constants";
+import { SkiaControl } from "../core/SkiaControl";
 import { SkiaLabel } from "../controls/SkiaLabel";
 import { TextSpan } from "../controls/TextSpan";
 import { SkiaRichLabel } from "../controls/SkiaRichLabel";
@@ -38,12 +39,14 @@ export const Registry = {
 const SKIP = new Set(["children", "key", "ref"]);
 /** Props that change how the subtree is composited, not what it contains: repaint, keep caches (DrawnUi RedrawCanvas). */
 const REPAINT_ONLY = new Set(["TranslationX", "TranslationY", "Rotation", "ScaleX", "ScaleY", "Scale", "SkewX", "SkewY", "AnchorX", "AnchorY", "Opacity"]);
+/** Props that change only how a control looks, never its size (C# NeedDraw): an ImageComposite above redraws only its area. */
+const isDrawOnly = (k) => k.endsWith("Color") || k === "FillGradient" || k === "StrokeGradient";
 /**
  * Assigns changed props straight onto the control (same names as the C# properties).
  * Handler props (functions) are swapped without invalidating: inline arrows change identity every render.
  */
 function applyProps(inst, prev, next) {
-    let changed = false, repaint = false;
+    let changed = false, repaint = false, layout = false;
     for (const k in next) {
         if (SKIP.has(k) || (prev && prev[k] === next[k]))
             continue;
@@ -52,23 +55,36 @@ function applyProps(inst, prev, next) {
             continue;
         if (REPAINT_ONLY.has(k))
             repaint = true;
-        else
+        else {
             changed = true;
+            if (!isDrawOnly(k))
+                layout = true;
+        }
     }
     if (prev)
         for (const k in prev)
             if (!SKIP.has(k) && !(k in next)) {
                 inst[k] = new inst.constructor()[k];
-                changed = true;
+                changed = layout = true;
             }
-    if (changed && prev)
-        inst.Update();
+    if (changed && prev) {
+        if (layout || !(inst instanceof SkiaControl))
+            inst.Update();
+        else
+            inst.UpdateDraw();
+    }
     else if (repaint && prev)
         inst.RepaintComposition?.();
 }
 let currentUpdatePriority = DefaultEventPriority;
 const noop = () => { };
 const hostContext = {};
+function appendChild(parent, child) {
+    if (parent instanceof SkiaLayout)
+        return parent.InsertChild(child);
+    child.IsChildrenItem = true;
+    parent.AddSubView(child);
+}
 // Record<string, unknown> absorbs members that react-reconciler 0.33 reads but @types 0.32 does not declare yet.
 const hostConfig = {
     supportsMutation: true,
@@ -94,12 +110,15 @@ const hostConfig = {
     createTextInstance(text) {
         throw new Error(`DrawnUi: raw text "${text}" is not allowed, use <SkiaLabel Text="..." />`);
     },
-    appendInitialChild: (parent, child) => parent.AddSubView(child),
-    appendChild: (parent, child) => parent.AddSubView(child),
+    // JSX children are the app's children (C# IsChildrenItem): a layout keeps them in JSX order inside the slots they
+    // occupy, so its own parts keep their place; an existing child passed again is a move
+    appendInitialChild: (parent, child) => appendChild(parent, child),
+    appendChild: (parent, child) => appendChild(parent, child),
     insertBefore: (parent, child, before) => {
-        const index = parent instanceof SkiaLayout ? parent.Views.indexOf(before)
-            : parent instanceof SkiaLabel ? parent.Spans.indexOf(before) : 0;
-        parent.InsertSubView(index, child);
+        if (parent instanceof SkiaLayout)
+            return parent.InsertChild(child, before);
+        child.IsChildrenItem = true;
+        parent.InsertSubView(parent instanceof SkiaLabel ? parent.Spans.indexOf(before) : 0, child);
     },
     removeChild: (parent, child) => parent.RemoveSubView(child),
     appendChildToContainer: (canvas, child) => { canvas.Content = child; },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "drawnui-react",
-  "version": "0.1.0-preview.15",
+  "version": "0.1.0-preview.16",
   "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)",
@@ -56,6 +56,9 @@
     "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",
+    "check:children": "node dev/check.mjs dev/check-children.tsx",
+    "check:composite": "node dev/check.mjs dev/check-composite.tsx",
+    "check:hover": "node dev/check.mjs dev/check-hover.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",