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

package/SKIPPED.md

@@ -47,7 +47,7 @@ DrawnUi name and semantics; nothing here is a redesign, only an omission.
 | Area | Status | Notes |
 |---|---|---|
 | `RenderingMode` | partial | `Accelerated` (WebGL) with automatic fallback to software; read once at first surface creation. |
-| `Gestures` param | ported | Enabled applies `touch-action:none; user-select:none`; Lock also blocks `touchmove` default. |
+| `Gestures` param | ported | Touch: `Lock` applies `touch-action:none`; `Enabled` behaves like MAUI's Enabled inside a native scroll view: `touch-action` is the axes the page (or a scrolling ancestor) can scroll (`pan-y` / `pan-x` / both, `none` when it cannot; inside an iframe the vertical axis always counts, because the embedding page cannot be inspected cross-origin), recomputed on attach, on window / html / body resize and after every touch, so a finger pan along a page axis scrolls the page and the canvas pointer is cancelled (a cancelled pointer never flings a `SkiaScroll`), taps and the other axis stay on the canvas, and a full-page app keeps every touch. `user-select:none` in both. Mouse wheel: `Enabled` shares it with the page like Blazor's `TouchHandlingStyle.Manual` (the wheel is processed in the DOM handler and the browser default is prevented only when a control used it: a scroll that moved, a `ConsumeGestures` handler that consumed, or any other consumer that is not a `BlockGesturesBelow` layer merely blocking the controls below, so an embedded canvas lets the page scroll over anything that does not scroll, including a shell page, and a scroll at its edge hands the wheel to the page; `TouchActionEventArgs.Handled` is the AppoMobi marker for that use); `Lock` prevents every wheel and also blocks `touchmove` default. Not ported: Blazor's pointer capture policy for `Enabled` (capture only while locked, release when a pan is not consumed); React captures every press. |
 | Mouse cursor over interactive controls (Blazor `Canvas.razor` `.xaml-a11y-interactive { cursor: pointer }`) | ported (differently) | The overlay here is `pointer-events: none`, so `Canvas.UpdateCursor` hit-tests mouse moves with no active pointer against the accessibility snapshot rects (`CanInteract` = has `Tapped`, buttons, links) and asks each hit control `WantsPointerCursor(x, y)` (default `AccessibilityCanInteract`; `SkiaLabel` also answers for its tappable `TextSpan`s), setting the canvas element's `cursor` only when the answer changes. Touch pointers do nothing. Engine hover (`IsHovered` / `OnHover`, `TouchActionResult.Pointer`) stays skipped, see Gestures. |
 | `ContextMenu` (right click / long press / Menu key, React extension) | ported (web-only) | `SkiaControl.ContextMenu` / `Canvas.ContextMenu` handlers with `ContextMenuEventArgs` (`Location` points, `Pixels`, `Local` px in the control, `Source`, `Native`); the DOM `contextmenu` event is routed like a tap (`ProcessContextMenu`: visible non-transparent children top-most first through `TransformPointToLocalSpace`, then the control, then the canvas). `true` = handled, browser menu suppressed; nothing handled = browser menu. Not in DrawnUi.Net. |
 | Keyboard, focus (`FocusedChild`) | skipped | |

package/dist/controls/SkiaScroll.js

@@ -560,6 +560,15 @@ export class SkiaScroll extends SkiaControl {
         const width = Math.max(0, this.ContentSize.Units.Width + (this.Orientation === "Horizontal" ? extra : 0) - viewportW);
         const height = Math.max(0, this.ContentSize.Units.Height + (this.Orientation !== "Horizontal" ? extra : 0) - viewportH);
         this.ContentOffsetBounds = new SKRect(-width, -height, 0, 0);
+        // C# InitializeViewport: pull an offset the new bounds no longer contain back inside them, here where
+        // the bounds change. Shrinking content (fewer items) otherwise leaves the viewport parked past its end
+        // with nothing on screen. Skipped under a live pan, a fling / bounce or pull-to-refresh, where being
+        // past the edge is intentional (rubber band, refresh indicator).
+        if (!this.IsUserPanning && !this.IsScrolling && !this.isRefreshing) {
+            const c = this.ClampOffset(this.offsetX, this.offsetY, this.ContentOffsetBounds, true);
+            this.ViewportOffsetX = c.X;
+            this.ViewportOffsetY = c.Y;
+        }
         this.ArrangeContent();
         this.CheckLoadMore();
     }
@@ -754,13 +763,35 @@ export class SkiaScroll extends SkiaControl {
             return;
         const i = Math.max(0, Math.min(items.length - 1, index));
         const scale = this.RenderingScale;
-        const layoutTopPts = (layout.DrawingRect.Top - this.content.DrawingRect.Top) / scale;
-        let target = layoutTopPts + layout.GetItemOffsetPixels(i) / scale;
+        const horizontal = this.Orientation === "Horizontal";
+        const viewport = (horizontal ? this.DrawingRect.Width : this.DrawingRect.Height) / scale;
+        // Item start and size in points, relative to the content start along the scroll axis.
+        let itemStart, itemSize;
+        if (!horizontal && layout.Type === "Column" && layout.Split <= 1) {
+            // The virtualized list: cells past the viewport are not realized, the structure knows their offsets.
+            itemStart = (layout.DrawingRect.Top - this.content.DrawingRect.Top + layout.GetItemOffsetPixels(i)) / scale;
+            itemSize = (layout.GetItemOffsetPixels(i + 1) - layout.GetItemOffsetPixels(i)) / scale;
+        }
+        else {
+            // A templated Row / Wrap / Grid realizes every item (C# non-list layouts are not virtualized): read the cell's
+            // arranged rect, like C# reads the structure cell's Destination.
+            const cell = layout.ChildrenFactory.GetViewForIndex(i);
+            if (!cell)
+                return;
+            const r = cell.DrawingRect, c = this.content.DrawingRect;
+            itemStart = (horizontal ? r.Left - c.Left : r.Top - c.Top) / scale;
+            itemSize = (horizontal ? r.Width : r.Height) / scale;
+        }
+        let target = itemStart;
         if (option === "End")
-            target -= this.DrawingRect.Height / scale - layout.GetItemOffsetPixels(i + 1) / scale + layout.GetItemOffsetPixels(i) / scale;
+            target -= viewport - itemSize;
         else if (option === "Center")
-            target -= this.DrawingRect.Height / scale / 2;
-        this.ScrollTo(this.offsetX, -target, animate ? this.ScrollingSpeedMs / 1000 : 0, true);
+            target -= (viewport - itemSize) / 2;
+        const time = animate ? this.ScrollingSpeedMs / 1000 : 0;
+        if (horizontal)
+            this.ScrollTo(-target, this.offsetY, time, true);
+        else
+            this.ScrollTo(this.offsetX, -target, time, true);
     }
     StopAnimators() {
         this.flingEdgeX = null;
@@ -803,7 +834,10 @@ export class SkiaScroll extends SkiaControl {
                 return child;
             if (!this.RespondsToGestures)
                 return child ?? consumedDefault;
-            return this.ApplyWheelScroll(e.Wheel.Delta) ? this : consumedDefault;
+            if (!this.ApplyWheelScroll(e.Wheel.Delta))
+                return consumedDefault; // at its edge: not used, the page may take it
+            e.Handled = true;
+            return this;
         }
         this.velocityY = e.Distance.Velocity.Y / scale;
         this.velocityX = e.Distance.Velocity.X / scale;
@@ -860,6 +894,12 @@ export class SkiaScroll extends SkiaControl {
             const swipeThreshold = SkiaScroll.ThesholdSwipeOnUp * scale;
             let vx = finalVelocity.X * this.ChangeVelocityScrolled;
             let vy = finalVelocity.Y * this.ChangeVelocityScrolled;
+            // a cancelled pointer (the browser took the pan to scroll the page, or a parent intercepted it) settles in place:
+            // flinging from the few moves that arrived before the cancel would scroll the list while the page scrolls
+            if (e.Type === "Cancelled") {
+                vx = 0;
+                vy = 0;
+            }
             let fling = false;
             if (this.OverScrolled) {
                 const rest = this.ClampOffset(this.offsetX, this.offsetY, this.ContentOffsetBounds, true);

package/dist/core/Canvas.d.ts

@@ -101,8 +101,35 @@ export declare class Canvas {
      * answer changes. Mouse moves only, no work without a mouse and none in the frame loop.
      */
     private UpdateCursor;
-    /** Mouse wheel -> TouchActionResult.Wheel (page scroll suppressed while gestures are enabled). */
+    /**
+     * Mouse wheel -> TouchActionResult.Wheel.
+     * Lock keeps every wheel on the canvas. Enabled shares it with the page, like DrawnUi.Blazor's
+     * TouchHandlingStyle.Manual: the page scrolls unless a control consumed this wheel. The browser needs that answer
+     * inside this handler, so the wheel is processed now instead of at the next frame (Blazor does the same, for the
+     * same reason); pending gestures are flushed first so the event order is kept.
+     */
     private readonly onWheel;
+    /**
+     * Processes one gesture immediately (after whatever is queued) and reports whether a control USED it: a consumer
+     * that marked the event Handled, or any consumer that is not a `BlockGesturesBelow` layer. A blocker returns itself
+     * for every gesture it keeps from the controls below (a shell page, a popup backdrop), which is not a use: counting
+     * it would block the page wheel over every shell app.
+     */
+    private ProcessGestureNow;
+    /**
+     * The page axes a touch pan over the canvas hands to the browser: "pan-y" when the page (or a scrolling ancestor) can
+     * scroll vertically, "pan-x" horizontally, both, or "none". Mirrors MAUI's Gestures="Enabled" inside a native scroll
+     * view, where the parent takes the pans it scrolls in.
+     */
+    private static PageScrollAxes;
+    /**
+     * Gestures="Enabled" shares touch pans with the page like MAUI's Enabled inside a native scroll view: along an axis
+     * the page can scroll, the browser takes the pan (and sends pointercancel), taps and the other axis stay on the
+     * canvas. A page that cannot scroll, and Lock, keep every touch. The browser reads touch-action when a touch starts,
+     * so it is kept current ahead of time: on attach, when the window / html / body resize, and after every touch.
+     */
+    private readonly UpdateTouchAction;
+    private pageObserver?;
     private AttachInput;
     private DetachInput;
     /** Port of DrawnUi.Blazor Canvas.OnTouchAction: per-pointer state machine producing Down / Panning / Tapped / Up. */

package/dist/core/Canvas.js

@@ -289,6 +289,8 @@ export class Canvas {
         pd.PressedButtons = e.buttons;
         args.Pointer = pd;
         this.OnTouchAction(args);
+        if (type === "Released" || type === "Cancelled")
+            this.UpdateTouchAction();
     };
     preventTouch = (e) => e.preventDefault();
     /** Called when no control handled a context-menu request; return true to suppress the browser's canvas menu. */
@@ -333,9 +335,14 @@ export class Canvas {
             this.Element.style.cursor = hit ? "pointer" : "";
         }
     }
-    /** Mouse wheel -> TouchActionResult.Wheel (page scroll suppressed while gestures are enabled). */
+    /**
+     * Mouse wheel -> TouchActionResult.Wheel.
+     * Lock keeps every wheel on the canvas. Enabled shares it with the page, like DrawnUi.Blazor's
+     * TouchHandlingStyle.Manual: the page scrolls unless a control consumed this wheel. The browser needs that answer
+     * inside this handler, so the wheel is processed now instead of at the next frame (Blazor does the same, for the
+     * same reason); pending gestures are flushed first so the event order is kept.
+     */
     onWheel = (e) => {
-        e.preventDefault();
         const rect = this.Element.getBoundingClientRect();
         const args = new TouchActionEventArgs();
         args.Id = -1;
@@ -344,11 +351,73 @@ export class Canvas {
         args.Location = new SKPoint((e.clientX - rect.left) * this.RenderingScale, (e.clientY - rect.top) * this.RenderingScale);
         args.StartingLocation = args.Location;
         args.Wheel = { Delta: e.deltaY !== 0 ? e.deltaY : e.deltaX };
-        this.OnGestureEvent(args, "Wheel");
+        if (this.gestures === "Lock") {
+            e.preventDefault();
+            this.OnGestureEvent(args, "Wheel");
+            return;
+        }
+        if (this.ProcessGestureNow(args, "Wheel"))
+            e.preventDefault();
+    };
+    /**
+     * Processes one gesture immediately (after whatever is queued) and reports whether a control USED it: a consumer
+     * that marked the event Handled, or any consumer that is not a `BlockGesturesBelow` layer. A blocker returns itself
+     * for every gesture it keeps from the controls below (a shell page, a popup backdrop), which is not a use: counting
+     * it would block the page wheel over every shell app.
+     */
+    ProcessGestureNow(args, result) {
+        this.ProcessPendingGestures();
+        const root = this.content;
+        const consumed = root ? this.ProcessGestures(root, SkiaGesturesParameters.Create(result, args)) : null;
+        this.Update();
+        return !!consumed && (args.Handled || !consumed.BlockGesturesBelow);
+    }
+    /**
+     * The page axes a touch pan over the canvas hands to the browser: "pan-y" when the page (or a scrolling ancestor) can
+     * scroll vertically, "pan-x" horizontally, both, or "none". Mirrors MAUI's Gestures="Enabled" inside a native scroll
+     * view, where the parent takes the pans it scrolls in.
+     */
+    static PageScrollAxes(el) {
+        const scrolls = (v) => v === "auto" || v === "scroll" || v === "overlay";
+        const clips = (v) => v === "hidden" || v === "clip";
+        let x = false, y = false;
+        for (let n = el.parentElement; n && n !== document.body && n !== document.documentElement; n = n.parentElement) {
+            const st = getComputedStyle(n);
+            if (!y && scrolls(st.overflowY) && n.scrollHeight > n.clientHeight + 1)
+                y = true;
+            if (!x && scrolls(st.overflowX) && n.scrollWidth > n.clientWidth + 1)
+                x = true;
+        }
+        // the viewport scrolls unless html or body clips it
+        const root = document.scrollingElement ?? document.documentElement;
+        const hs = getComputedStyle(document.documentElement), bs = getComputedStyle(document.body);
+        if (!y && !clips(hs.overflowY) && !clips(bs.overflowY) && root.scrollHeight > root.clientHeight + 1)
+            y = true;
+        if (!x && !clips(hs.overflowX) && !clips(bs.overflowX) && root.scrollWidth > root.clientWidth + 1)
+            x = true;
+        return x && y ? "pan-x pan-y" : y ? "pan-y" : x ? "pan-x" : "none";
+    }
+    /**
+     * Gestures="Enabled" shares touch pans with the page like MAUI's Enabled inside a native scroll view: along an axis
+     * the page can scroll, the browser takes the pan (and sends pointercancel), taps and the other axis stay on the
+     * canvas. A page that cannot scroll, and Lock, keep every touch. The browser reads touch-action when a touch starts,
+     * so it is kept current ahead of time: on attach, when the window / html / body resize, and after every touch.
+     */
+    UpdateTouchAction = () => {
+        if (this.gestures === "Disabled")
+            return;
+        const pan = this.gestures === "Enabled" ? Canvas.PageScrollAxes(this.Element) : "none";
+        if (this.Element.style.touchAction !== pan)
+            this.Element.style.touchAction = pan;
     };
+    pageObserver;
     AttachInput() {
         const el = this.Element;
-        el.style.touchAction = "none";
+        this.UpdateTouchAction();
+        window.addEventListener("resize", this.UpdateTouchAction);
+        this.pageObserver = new ResizeObserver(this.UpdateTouchAction);
+        this.pageObserver.observe(document.documentElement);
+        this.pageObserver.observe(document.body);
         el.style.userSelect = "none";
         for (const t of ["pointerdown", "pointermove", "pointerup", "pointercancel"])
             el.addEventListener(t, this.onPointer);
@@ -360,6 +429,9 @@ export class Canvas {
     DetachInput() {
         const el = this.Element;
         el.style.touchAction = "";
+        window.removeEventListener("resize", this.UpdateTouchAction);
+        this.pageObserver?.disconnect();
+        this.pageObserver = undefined;
         el.style.userSelect = "";
         for (const t of ["pointerdown", "pointermove", "pointerup", "pointercancel"])
             el.removeEventListener(t, this.onPointer);

package/dist/core/Gestures.d.ts

@@ -53,6 +53,11 @@ export declare class TouchActionEventArgs {
     Wheel: {
         Delta: number;
     };
+    /**
+     * AppoMobi TouchActionEventArgs.Handled: set by a control that actually used the event. The canvas prevents the
+     * browser default (the page scrolling under the wheel) only for a Handled event in `Gestures="Enabled"`.
+     */
+    Handled: boolean;
     /** Same as the .NET helper: derives Start/End/Delta/Total from the previous event of the same pointer. */
     static FillDistanceInfo(current: TouchActionEventArgs, previous: TouchActionEventArgs | undefined): void;
 }

package/dist/core/Gestures.js

@@ -45,6 +45,11 @@ export class TouchActionEventArgs {
     DeltaTimeMs = 0;
     /** Mouse wheel: Delta > 0 = wheel down (browser deltaY sign). */
     Wheel = { Delta: 0 };
+    /**
+     * AppoMobi TouchActionEventArgs.Handled: set by a control that actually used the event. The canvas prevents the
+     * browser default (the page scrolling under the wheel) only for a Handled event in `Gestures="Enabled"`.
+     */
+    Handled = false;
     /** Same as the .NET helper: derives Start/End/Delta/Total from the previous event of the same pointer. */
     static FillDistanceInfo(current, previous) {
         if (!previous) {

package/dist/core/SkiaControl.js

@@ -1150,15 +1150,19 @@ export class SkiaControl {
         if (this.ConsumeGestures) {
             const sent = new SkiaGesturesInfo(args, apply);
             this.ConsumeGestures(this, sent);
-            if (args.Type !== "Up" && sent.Consumed)
+            if (args.Type !== "Up" && sent.Consumed) {
+                args.Event.Handled = true;
                 return this;
+            }
         }
         // C# EffectsGestureProcessors: attached effects that process gestures (ISkiaGestureProcessor) see them first
         if (!this.DisableEffects)
             for (const e of this.visualEffects) {
                 const p = e.ProcessGestures;
-                if (typeof p === "function" && p.call(e, args, apply) && args.Type !== "Up")
+                if (typeof p === "function" && p.call(e, args, apply) && args.Type !== "Up") {
+                    args.Event.Handled = true;
                     return this;
+                }
             }
         if (this.CheckChildrenGesturesLocked(args.Type))
             return consumedDefault;

package/dist/react/index.d.ts

@@ -100,7 +100,11 @@ export declare const SkiaDrawer: FC<LayoutProps<SkiaDrawerCtrl>>;
 export interface CanvasProps {
     BackgroundColor?: Color;
     RenderingMode?: RenderingModeType;
-    /** Disabled (default) / Enabled / Lock, like DrawnUi Canvas.Gestures. */
+    /**
+     * Disabled (default) / Enabled / Lock, like DrawnUi Canvas.Gestures. Enabled shares input with the page like MAUI's
+     * Enabled inside a native scroll view: a touch pan along an axis the page can scroll scrolls the page, and the wheel
+     * scrolls it unless a control used the wheel. A page that cannot scroll keeps every touch. Lock keeps all input.
+     */
     Gestures?: GesturesMode;
     children?: ReactNode;
     style?: CSSProperties;

package/package.json

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