drawnui-react 0.1.0-preview.3 → 0.1.0-preview.5

package/SKIPPED.md

@@ -9,7 +9,7 @@ DrawnUi name and semantics; nothing here is a redesign, only an omission.
 |---|---|---|
 | `UseCache` | partial | `None`, `Operations` / `OperationsFull` (SkPicture replay), `Image` (offscreen surface snapshot, GPU-backed on WebGL, nearest-sampled blit), `ImageDoubleBuffered` (`RenderObjectPrevious` kept and drawn when a new cache cannot be produced yet, `DrawPlaceholder(ctx)` hook when there is none; recording itself is synchronous — no background thread, same as DrawnUi.Blazor with `CanUseCacheDoubleBuffering = false`), `ImageComposite` / `ImageCompositeGPU` (per-child composite, see the `UseCache="ImageComposite"` row below). `GPU` resolves to `Image` and `ImageCompositeGPU` to `ImageComposite`: no separate GPU-only path. `Super.CacheEnabled`, `RenderObject`/`CachedObject`, `InvalidateCache`, `DestroyRenderingObject`, `Canvas.DisposeObject` (deleted after flush). Defaults per C#: `SkiaLabel`/`SkiaSvg` Operations, everything else None. Not ported: `CacheSharing`, `AllowCaching`, offscreen bake threads, cache validity by GRContext. |
 | Incremental invalidation | partial | `Measure` returns the previous size when `!NeedMeasure` and constraints+scale are unchanged; `Update()`/`InvalidateMeasure()` bubble up and stale every ancestor cache; `Repaint()` keeps caches. Arrange still runs per frame for the whole tree; no dirty regions, no `DirtyChildrenTracker`. Post-animators on a control nested INSIDE a cached ancestor are drawn only when that ancestor re-records. |
-| Gestures core: `Canvas.Gestures` (Disabled/Enabled/Lock), `ProcessGestures(args, apply)`, `ConsumeGestures`, `Tapped`/`ChildTapped`, `InputTransparent`, `BlockGesturesBelow`, `LockChildrenGestures`, `HitBoxAuto`/`HitIsInside`/`IsGestureForChild`, `SkiaGesturesParameters`/`GestureEventProcessingInfo`/`SkiaGesturesInfo`/`ControlTappedEventArgs` | ported | Pointer events -> per-pointer `OnTouchAction` state machine (port of DrawnUi.Blazor) -> Down/Panning/Tapped/Up, queued and processed at frame start. Tap slop = 16pt like AppoMobi TouchEffect. Every mouse button is delivered (`Event.Pointer`: `Button`, `ButtonNumber`, `DeviceType`, `PressedButtons`, the AppoMobi.Gestures PointerData): a right click is Down / Up / Tapped with `Button` "Right" plus a `ContextMenu`; handlers that must be primary-only check `e.Parameters.Event.Pointer?.Button`. |
+| Gestures core: `Canvas.Gestures` (Disabled/Enabled/Lock), `ProcessGestures(args, apply)`, `ConsumeGestures`, `Tapped`/`ChildTapped`, `InputTransparent`, `BlockGesturesBelow`, `LockChildrenGestures`, `HitBoxAuto`/`HitIsInside`/`IsGestureForChild`, `SkiaGesturesParameters`/`GestureEventProcessingInfo`/`SkiaGesturesInfo`/`ControlTappedEventArgs` | ported | Pointer events -> per-pointer `OnTouchAction` state machine (port of DrawnUi.Blazor) -> Down/Panning/Tapped/Up, queued and processed at frame start. Tap slop = 16pt like AppoMobi TouchEffect. The control that consumes a gesture keeps receiving it until it lets go (DrawnUi `Canvas.HadInput`, one pointer here instead of C#'s set): without it a drag handle, a slider thumb or a held button stops getting `Panning` the moment the finger leaves its box, and a control that stops consuming hands routing straight back to the tree (a button whose press turns into a scroll pan). Every mouse button is delivered (`Event.Pointer`: `Button`, `ButtonNumber`, `DeviceType`, `PressedButtons`, the AppoMobi.Gestures PointerData): a right click is Down / Up / Tapped with `Button` "Right" plus a `ContextMenu`; handlers that must be primary-only check `e.Parameters.Event.Pointer?.Button`. |
 | Gestures: `LongPressing`, `Pointer` (hover), multi-touch pinch, `SoftLock`, `AddGestures` attached props, `OnGestures` delegate | skipped | The enum members exist for parity and are never produced; there is no pinch member at all. Ported instead of skipped: velocity (`Gestures.ts` fills `Distance.Velocity` per move, the scroll / snapping physics run on it) and transform-aware mapping — a child receives the point through the inverse `RenderTransformMatrix` (`TransformPointToLocalSpace`), so rotated / scaled / translated controls hit-test correctly. `ChildOffset` stays zero because that inverse matrix replaces the C# cache-offset math (`TranslateInputCoords`), not because transforms are missing. `Wheel` IS produced (`Canvas.onWheel`). |
 | C# multi-subscriber `event`s | changed shape | One callback per event prop (`Tapped={fn}`), same names. `Command*` (ICommand) variants not ported. |
 | `Opacity`, `TranslationX/Y`, `Rotation`, `ScaleX/Y` (+`Scale`), `SkewX/Y`, `AnchorX/Y`, `HasTransform`, `RenderTransformMatrix`, `TransformPointToLocalSpace` | ported | Same matrix order as C# `ApplyTransforms` (pivot → rotation → scale/skew → translation), opacity = `saveLayer` alpha over the subtree, gestures mapped through the inverse matrix (`IsGestureForChild`, child receives the local point), accessibility rect = transformed bounds. Animations: `AnimateAsync`, `AnimateRangeAsync`, `FadeToAsync`, `ScaleToAsync`, `TranslateToAsync`, `RotateToAsync` as Promises with `AbortSignal` (one running per kind, like the C# per-property cancellation). Not ported: `RotationX/Y/Z`, `TranslationZ`, `Perspective1/2`, `CameraAngle`, `LinkTransforms`, `AddTranslationX/Y`, `UseTranslation*` overrides, `CustomizeLayerPaint`, `SkipRenderingOutOfBounds`. |
@@ -61,7 +61,7 @@ DrawnUi name and semantics; nothing here is a redesign, only an omission.
 | `SkiaLayout` Absolute / Column / Row (+ `SkiaStack`, `SkiaRow`, `SkiaLayer`) | ported | `Spacing`, `Padding`, `Children`/`Views`, `AddSubView`/`RemoveSubView`/`InsertSubView`. |
 | `SkiaLayout` templated (Column only): `ItemsSource` (array), `ItemTemplate` (factory `() => SkiaControl`), `RecyclingTemplate` Enabled/Disabled, `MeasureItemsStrategy` `MeasureFirst` (uniform, O(1) for 100k items) / `MeasureAll`, `ChildrenFactory` (ViewsAdapter pool: `GetOrCreateViewForIndex`, `ReleaseViewAt`), `FirstVisibleIndex`/`LastVisibleIndex`, `DebugString`, `ApplyItemsSource`, `VirtualisationInflated`, `BindingContext`/`ContextIndex` on every control, `SkiaDynamicDrawnCell.SetContent` | ported | Cells realized/bound/arranged/drawn only for the visible viewport (+inflation) each frame. |
 | `LoadMoreCommand` / `LoadMoreTopCommand` / `LoadMoreOffset` / `LoadMoreTopOffset` | ported | Callbacks instead of ICommand. Bottom fires once per content extent when within the offset of the end (or when the content underfills the viewport), re-arms when the content grows or the user moves away (>offset+100 pt, >2 s) — C# CheckNeedToLoadMore. Top arms only after the offset left the top edge, fires when it comes back. Not ported: opposite-direction cooldown (`IsOppositeLoadMoreBlocked`), `IInsideViewport.ShouldTriggerLoadMore`. |
-| Structure-preserving `ItemsSource` updates | ported (array diff) | C# listens to `ObservableCollection` Add/Insert; React apps replace the array, so the setter detects **append** (old is a prefix: measured heights kept, tail measured lazily) and **prepend** (old is a suffix: view indices shifted without rebinding, new head measured synchronously up to 200 items, `ItemsInsertedAtStart(px)` lets the `SkiaScroll` move its offset so visible rows stay put — C# head-insert rebase). Any other change rebuilds the structure (heights re-measured, offset kept). Not ported: removals/moves in place, `Replace`. |
+| Structure-preserving `ItemsSource` updates | ported (array diff) | C# listens to `ObservableCollection` Add/Insert; React apps replace the array, so the setter detects **append** (old is a prefix: measured heights kept, tail measured lazily) and **prepend** (old is a suffix: view indices shifted without rebinding, new head measured synchronously up to 200 items, `ItemsInsertedAtStart(px)` lets the `SkiaScroll` move its offset so visible rows stay put — C# head-insert rebase). and **reorder** (same items permuted, the C# `ObservableCollection.Move` case: contexts rebound, the index-keyed measured heights permuted with their items, nothing re-measured, extent and scroll offset unchanged). Any other change rebuilds the structure (heights re-measured, offset kept). Not ported: removals in place, `Replace`. |
 | Templated Row/Grid/Wrap, `Split`, `ItemTemplateSelector`, `ItemTemplatePoolSize`/`ReserveTemplates`, `UsePreparedViews`, `SkiaCachedStack`, measure memo | skipped | |
 | `ItemsSourceWindow` / `WindowSourceThreshold` (built-in window over huge sources) | not needed | The C# window bounds pipeline work (structures, pools, measures) for `MeasureFirst`/`MeasureAll` over big collections. React `MeasureVisible` measures on demand and keeps only visible cells realized, so the pipeline is already O(visible); memory of the array itself belongs to the app (paginate with `LoadMore*`). Revisit only if `MeasureAll` over 100k+ items becomes a requirement. |
 | `MeasureItemsStrategy="MeasureVisible"` + background measurement | ported | Initial pass measures enough items to fill the viewport (≥ `BackgroundMeasurementBatchSize`), content extent = exact prefix + average × remaining (C# MeasureList estimate), visible cells measured on demand and laid out with their real heights, the prefix grows in `requestIdleCallback` slices (time-budgeted, then one `InvalidateMeasure`), `LastMeasuredIndex`, `DebugString` shows `measured n/N`. Not ported: cancellation/`_pendingStructureChanges` interplay, `UsePreparedViews`, windowed sources, anchor correction when an estimate above the viewport changes (content may shift by the delta). |

package/dist/controls/SkiaLayout.d.ts

@@ -70,6 +70,16 @@ export declare class SkiaLayout extends SkiaControl {
      * anything else rebuilds. Returns false when a full rebuild is needed.
      */
     private ApplyIncrementalChange;
+    /**
+     * Same items in another order — a drag-to-reorder, or any code writing a permuted array. DrawnUi handles the
+     * matching `ObservableCollection.Move` by keeping the structure and only rebinding the contexts, because its
+     * arrange re-flows each row from its bound view (`HandleStructurePreservingMove` / `ApplyMoveChange`, 2026-09-08).
+     * The measured heights here are index-keyed and authoritative, so they travel with their items instead: nothing is
+     * remeasured, the extent cannot change, and the scroll keeps its offset. Rebuilding instead would reset
+     * `MeasureVisible` to "exact for the first screen, estimated after" and throw a scrolled list back towards the top.
+     * Returns false when the two arrays are not a permutation of each other, so a real content change still rebuilds.
+     */
+    private ApplyReorderChange;
     /** Factory creating one cell (DrawnUi DataTemplate). Cells receive the item as BindingContext. */
     get ItemTemplate(): (() => SkiaControl) | undefined;
     set ItemTemplate(value: (() => SkiaControl) | undefined);

package/dist/controls/SkiaLayout.js

@@ -87,7 +87,11 @@ export class SkiaLayout extends SkiaControl {
      */
     ApplyIncrementalChange(old, items) {
         const n = items.length, o = old.length;
-        if (n <= o || o === 0)
+        if (o === 0)
+            return false;
+        if (n === o)
+            return this.ApplyReorderChange(old, items);
+        if (n < o)
             return false;
         const k = n - o;
         const scale = this.RenderingScale, gap = this.Spacing * scale, w = this.measuredWidthPx;
@@ -143,6 +147,65 @@ export class SkiaLayout extends SkiaControl {
         }
         return false;
     }
+    /**
+     * Same items in another order — a drag-to-reorder, or any code writing a permuted array. DrawnUi handles the
+     * matching `ObservableCollection.Move` by keeping the structure and only rebinding the contexts, because its
+     * arrange re-flows each row from its bound view (`HandleStructurePreservingMove` / `ApplyMoveChange`, 2026-09-08).
+     * The measured heights here are index-keyed and authoritative, so they travel with their items instead: nothing is
+     * remeasured, the extent cannot change, and the scroll keeps its offset. Rebuilding instead would reset
+     * `MeasureVisible` to "exact for the first screen, estimated after" and throw a scrolled list back towards the top.
+     * Returns false when the two arrays are not a permutation of each other, so a real content change still rebuilds.
+     */
+    ApplyReorderChange(old, items) {
+        const n = items.length;
+        if (this.MeasureItemsStrategy === "MeasureAll" && this.itemHeights.length !== n)
+            return false;
+        if (this.MeasureItemsStrategy === "MeasureVisible" && this.mvHeights.length !== n)
+            return false;
+        const moved = [];
+        for (let i = 0; i < n; i++)
+            if (old[i] !== items[i])
+                moved.push(i);
+        if (moved.length === 0) {
+            this.ChildrenFactory.UpdateItems(items);
+            return true;
+        } // same order, new array reference
+        // every slot that changed must hold an item that was in one of those slots before, otherwise this is not a reorder
+        const free = new Map();
+        for (const i of moved) {
+            const q = free.get(old[i]);
+            if (q)
+                q.push(i);
+            else
+                free.set(old[i], [i]);
+        }
+        const from = new Int32Array(n);
+        for (let i = 0; i < n; i++)
+            from[i] = i;
+        for (const i of moved) {
+            const q = free.get(items[i]);
+            if (!q || q.length === 0)
+                return false;
+            from[i] = q.shift();
+        }
+        if (this.MeasureItemsStrategy === "MeasureAll") {
+            const was = this.itemHeights;
+            this.itemHeights = Array.from({ length: n }, (_, i) => was[from[i]]);
+        }
+        else if (this.MeasureItemsStrategy === "MeasureVisible") {
+            const was = this.mvHeights, heights = new Float64Array(n);
+            for (let i = 0; i < n; i++)
+                heights[i] = was[from[i]];
+            this.mvHeights = heights;
+            // an item that was never measured can land inside the exact prefix: rebuild it over the leading measured run
+            this.mvPrefix = new Float64Array(n + 1);
+            this.mvMeasured = 0;
+            this.MvExtendPrefix(this.Spacing * this.RenderingScale);
+        }
+        // MeasureFirst has one height for every row, so a reorder is a pure rebind there (same as the C# note).
+        this.ChildrenFactory.UpdateItems(items);
+        return true;
+    }
     /** Factory creating one cell (DrawnUi DataTemplate). Cells receive the item as BindingContext. */
     get ItemTemplate() { return this.itemTemplate; }
     set ItemTemplate(value) {

package/dist/core/Canvas.d.ts

@@ -109,6 +109,15 @@ export declare class Canvas {
     OnTouchAction(args: TouchActionEventArgs): void;
     private OnGestureEvent;
     private ProcessPendingGestures;
+    /**
+     * The control that consumed the current gesture keeps it until it lets go (DrawnUi Canvas.HadInput). Without this a
+     * gesture is re-routed by the pointer position on every event, so anything the finger drags away from — a drag
+     * handle, a slider thumb, a button being held — stops receiving Panning the moment the pointer leaves its box.
+     * Single pointer, which is what the web gives us here; C# keeps a set for multi-touch.
+     */
+    private gestureOwner;
+    /** DrawnUi IsSavedGesture: the types replayed to the owner instead of being routed again. */
+    private static IsSavedGesture;
     /** Entry into the control tree, same shape as DrawnUi Canvas.ProcessGestures. */
     protected ProcessGestures(root: SkiaControl, args: SkiaGesturesParameters): SkiaControl | null;
 }

package/dist/core/Canvas.js

@@ -422,8 +422,35 @@ export class Canvas {
         for (const args of batch)
             this.ProcessGestures(root, args);
     }
+    /**
+     * The control that consumed the current gesture keeps it until it lets go (DrawnUi Canvas.HadInput). Without this a
+     * gesture is re-routed by the pointer position on every event, so anything the finger drags away from — a drag
+     * handle, a slider thumb, a button being held — stops receiving Panning the moment the pointer leaves its box.
+     * Single pointer, which is what the web gives us here; C# keeps a set for multi-touch.
+     */
+    gestureOwner = null;
+    /** DrawnUi IsSavedGesture: the types replayed to the owner instead of being routed again. */
+    static IsSavedGesture(type) {
+        return type === "Panning" || type === "Wheel" || type === "Up";
+    }
     /** Entry into the control tree, same shape as DrawnUi Canvas.ProcessGestures. */
     ProcessGestures(root, args) {
-        return root.ProcessGestures(args, new GestureEventProcessingInfo(args.Event.Location, SKPoint.Empty, SKPoint.Empty, null));
+        const info = () => new GestureEventProcessingInfo(args.Event.Location, SKPoint.Empty, SKPoint.Empty, null);
+        if (args.Type === "Down")
+            this.gestureOwner = null;
+        else if (this.gestureOwner && Canvas.IsSavedGesture(args.Type)) {
+            const owner = this.gestureOwner;
+            const alive = !!owner.Superview && owner.IsVisible && !owner.InputTransparent;
+            const consumed = alive ? owner.OnSkiaGestureEvent(args, info()) : null;
+            if (consumed) {
+                // it still wants the gesture: nobody else sees this one (C# skips the tree pass for a saved gesture)
+                this.gestureOwner = args.Type === "Up" ? null : consumed;
+                return consumed;
+            }
+            this.gestureOwner = null; // it let go (a button whose press turned into a pan): route normally again
+        }
+        const consumed = root.ProcessGestures(args, info());
+        this.gestureOwner = consumed && args.Type !== "Up" ? consumed : null;
+        return consumed;
     }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "drawnui-react",
-  "version": "0.1.0-preview.3",
+  "version": "0.1.0-preview.5",
   "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)",
@@ -65,8 +65,12 @@
     "vite": ">=5"
   },
   "peerDependenciesMeta": {
-    "playwright-core": { "optional": true },
-    "vite": { "optional": true }
+    "playwright-core": {
+      "optional": true
+    },
+    "vite": {
+      "optional": true
+    }
   },
   "dependencies": {
     "canvaskit-wasm": "^0.42.0",