drawnui-react 0.1.0-preview.2 → 0.1.0-preview.21

package/dist/controls/SkiaScroll.d.ts

@@ -12,7 +12,7 @@ export interface ScaledPoint {
  * Mirrors DrawnUi SkiaScroll (plain content, no header/footer/refresh/virtualization yet).
  * Offsets are in POINTS and <= 0 while inside bounds (content moves up/left as you scroll).
  * Physics ported 1:1: deceleration fling (rate = 1 - FrictionScrolled/100) cut at the content edge,
- * rubber-band overscroll while dragging, spring bounce back on release, wheel = WheelLineSize per notch.
+ * rubber-band overscroll while dragging, spring bounce back on release, wheel = WheelLineSize per notch (an event moves by its share of a notch).
  */
 export declare class SkiaScroll extends SkiaControl {
     static WheelLineSize: number;
@@ -31,7 +31,11 @@ export declare class SkiaScroll extends SkiaControl {
     AutoScrollingSpeedMs: number;
     ScrollingSpeedMs: number;
     IgnoreWrongDirection: boolean;
-    RespondsToGestures: boolean;
+    private respondsToGestures;
+    /** False: neither a drag, the wheel nor the keyboard scrolls it (code still can), and it is reported disabled; its content keeps its own taps (drawnui-cross 6w). */
+    get RespondsToGestures(): boolean;
+    set RespondsToGestures(v: boolean);
+    protected AcceptsInput(): boolean;
     private header?;
     private footer?;
     /** A view before the content along the scroll axis; `Tag="Header"` on a JSX child sets it. */
@@ -156,6 +160,10 @@ export declare class SkiaScroll extends SkiaControl {
     set ViewportOffsetX(value: number);
     get ViewportOffsetY(): number;
     set ViewportOffsetY(value: number);
+    /** An offset set without a glide or a pan (a jump, a touchpad step): the controls under a still mouse changed. */
+    private OffsetJumped;
+    /** Hover waits while the content glides, flings, bounces or follows a pan (C# IsScrolling). */
+    MovesContent(): boolean;
     private readonly animatorFlingX;
     private readonly animatorFlingY;
     private readonly bounceX;
@@ -214,18 +222,40 @@ export declare class SkiaScroll extends SkiaControl {
      * templated layout (the recycled list is the scroll's only child; a header goes above the scroll or in Header).
      */
     ScrollToIndex(index: number, animate: boolean, option?: RelativePositionType): void;
+    /**
+     * An open ScrollToIndex (C# OrderedScrollToIndex, DrawnUi.Rust scroll_to_index): a row not measured yet is gone to by
+     * the sizes as they are estimated, and the order is aimed again every frame until the row has its real place and the
+     * viewport stands on it; an animated move goes on to a moved target in the time it has left, later corrections jump.
+     * A press, the wheel or another scroll drops it; while it is open LoadMore waits.
+     */
+    private indexOrder?;
+    private pursuing;
+    /** One step of the open order (C# ExecuteScrollToIndexOrder, Rust `pursue`), at the start of every paint. */
+    private PursueIndexOrder;
+    /** The offset (points) that puts item `index` where `option` says, by the sizes the list knows now; Exact = its place is measured. */
+    private AimIndex;
     private StopAnimators;
     /** DrawnUi DecelerationRatio: FrictionScrolled / 100, floored at 0.1 friction. */
     private get DecelerationRatio();
     private ResetPan;
+    private draggedScrollBar?;
+    private scrollBarOwnsGesture;
+    /**
+     * Thumb drag and track press on a ScrollBar / ScrollBarHorizontal with IsDraggable set (C# ProcessScrollBarGestures).
+     * A gesture that starts on the bar belongs to it until the next down: the content neither pans nor gets the tap.
+     * True when the gesture was handled here.
+     */
+    protected ProcessScrollBarGestures(args: SkiaGesturesParameters, apply: GestureEventProcessingInfo): boolean;
+    private ApplyScrollBarDrag;
     ProcessGestures(args: SkiaGesturesParameters, apply: GestureEventProcessingInfo): SkiaControl | null;
     private Bounce;
     /** DrawnUi StartToFlingFrom + PrepareToFlingAfterInitialized: cut the curve so it stops exactly at the edge. */
     private StartToFlingFrom;
     /**
-     * One wheel notch = WheelLineSize points, hard-clamped, animated over AutoScrollingSpeedMs.
-     * Notches arriving while the previous one is still animating add onto its target, so a fast wheel
-     * spin travels N steps instead of restarting from the barely-moved current offset.
+     * One wheel notch = WheelLineSize points, hard-clamped, animated over AutoScrollingSpeedMs. An event moves by its share
+     * of a notch (Canvas.WheelDeltaPerNotch), so a touchpad's many small events scroll as far as the fingers moved (C#
+     * aaa871c3); an event under half a notch moves the content at once (no glide). Events arriving while the previous one is still animating add onto its target, so a fast wheel spin
+     * travels N steps instead of restarting from the barely-moved current offset.
      */
     private ApplyWheelScroll;
 }

package/dist/controls/SkiaScroll.js

@@ -9,7 +9,7 @@ import { RubberBandUtils, ScrollFlingAnimator, Spring, SpringWithVelocityAnimato
  * Mirrors DrawnUi SkiaScroll (plain content, no header/footer/refresh/virtualization yet).
  * Offsets are in POINTS and <= 0 while inside bounds (content moves up/left as you scroll).
  * Physics ported 1:1: deceleration fling (rate = 1 - FrictionScrolled/100) cut at the content edge,
- * rubber-band overscroll while dragging, spring bounce back on release, wheel = WheelLineSize per notch.
+ * rubber-band overscroll while dragging, spring bounce back on release, wheel = WheelLineSize per notch (an event moves by its share of a notch).
  */
 export class SkiaScroll extends SkiaControl {
     static WheelLineSize = 150;
@@ -28,7 +28,14 @@ export class SkiaScroll extends SkiaControl {
     AutoScrollingSpeedMs = 600;
     ScrollingSpeedMs = 400;
     IgnoreWrongDirection = false;
-    RespondsToGestures = true;
+    respondsToGestures = true;
+    /** False: neither a drag, the wheel nor the keyboard scrolls it (code still can), and it is reported disabled; its content keeps its own taps (drawnui-cross 6w). */
+    get RespondsToGestures() { return this.respondsToGestures; }
+    set RespondsToGestures(v) { if (this.respondsToGestures !== v) {
+        this.respondsToGestures = v;
+        this.NotifyAccessibility();
+    } }
+    AcceptsInput() { return this.respondsToGestures; }
     // ---- header / footer (C# SkiaScroll.Header / Footer) ----
     header;
     footer;
@@ -121,7 +128,7 @@ export class SkiaScroll extends SkiaControl {
     }
     /** C# UpdateScrollBarIndicator: pushes progress / thumb ratio / overscroll / scrolling state when any changed. */
     UpdateScrollBarIndicator() {
-        const isScrolling = this.IsScrolling || this.IsUserPanning;
+        const isScrolling = this.IsScrolling || this.IsUserPanning || !!this.draggedScrollBar;
         const scale = this.RenderingScale;
         const viewportH = this.DrawingRect.Height / scale, viewportW = this.DrawingRect.Width / scale;
         const extentH = this.ContentSize.Units.Height + this.HeaderExtentPts + this.FooterExtentPts, extentW = this.ContentSize.Units.Width + this.HeaderExtentPts + this.FooterExtentPts;
@@ -333,6 +340,8 @@ export class SkiaScroll extends SkiaControl {
     loadMoreTopArmed = false;
     /** C# CheckNeedToLoadMore: fires once per content extent near an edge; re-arms when the content grows or the user moves away (>offset+100pt, >2 s). */
     CheckLoadMore() {
+        if (this.indexOrder)
+            return; // an open ScrollToIndex has the viewport on its way: the edges are looked at after it
         const vertical = this.Orientation !== "Horizontal";
         const offset = vertical ? this.offsetY : this.offsetX;
         const min = vertical ? this.ContentOffsetBounds.Top : this.ContentOffsetBounds.Left; // most negative offset
@@ -399,12 +408,19 @@ export class SkiaScroll extends SkiaControl {
     set ViewportOffsetX(value) { if (this.offsetX !== value) {
         this.offsetX = value;
         this.OnScrolled();
+        this.OffsetJumped();
     } }
     get ViewportOffsetY() { return this.offsetY; }
     set ViewportOffsetY(value) { if (this.offsetY !== value) {
         this.offsetY = value;
         this.OnScrolled();
+        this.OffsetJumped();
     } }
+    /** An offset set without a glide or a pan (a jump, a touchpad step): the controls under a still mouse changed. */
+    OffsetJumped() { if (!this.MovesContent())
+        this.Superview?.Hover?.RequestCheck(); }
+    /** Hover waits while the content glides, flings, bounces or follows a pan (C# IsScrolling). */
+    MovesContent() { return this.IsScrolling || this.IsUserPanning || !!this.draggedScrollBar; }
     animatorFlingX = new ScrollFlingAnimator(this);
     animatorFlingY = new ScrollFlingAnimator(this);
     bounceX = new SpringWithVelocityAnimator(this);
@@ -506,6 +522,7 @@ export class SkiaScroll extends SkiaControl {
     }
     InsertSubView(_index, control) { this.AddSubView(control); }
     RemoveSubView(control) {
+        this.Superview?.Hover?.RequestCheck();
         if (this.content === control)
             this.Content = undefined;
         else if (this.header === control)
@@ -560,6 +577,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();
     }
@@ -617,6 +643,8 @@ export class SkiaScroll extends SkiaControl {
             }
     }
     Paint(ctx) {
+        this.Superview?.Hover?.RegisterMover(this);
+        this.PursueIndexOrder();
         const c = this.content;
         if (!c)
             return;
@@ -637,9 +665,18 @@ export class SkiaScroll extends SkiaControl {
         if (this.RefreshEnabled && this.refreshIndicator && this.refreshIndicator.IsVisible && (this.OverScrolled || this.isRefreshing))
             this.refreshIndicator.Render(ctx);
         this.UpdateScrollBarIndicator();
-        for (const bar of [this.scrollBar, this.scrollBarHorizontal])
-            if (bar && bar.IsVisible && bar.Opacity > 0)
-                bar.Render(ctx);
+        for (const bar of [this.scrollBar, this.scrollBarHorizontal]) {
+            if (!bar || !bar.IsVisible || bar.Opacity <= 0)
+                continue;
+            // the bar is parent-independent: its thumb resizing (squash on a bounce) invalidates the bar alone, so it is
+            // re-measured here on draw instead of dragging the scroll and every ancestor through a measure each frame
+            if (bar.NeedMeasure) {
+                const r = this.DrawingRect;
+                bar.Measure(r.Width, r.Height, this.RenderingScale);
+                bar.Arrange(r, bar.WidthRequest, bar.HeightRequest, this.RenderingScale);
+            }
+            bar.Render(ctx);
+        }
         canvas.restoreToCount(saved);
     }
     OnScrolled() {
@@ -710,6 +747,8 @@ export class SkiaScroll extends SkiaControl {
             this.ViewportOffsetY = target;
     }
     ScrollTo(x, y, maxSpeedSecs, clamp = true) {
+        if (!this.pursuing)
+            this.indexOrder = undefined; // another scroll drops an open ScrollToIndex
         this.StopAnimators(); // also forgets any pending edge bounce: a programmatic scroll never bounces
         let tx = x, ty = y;
         if (clamp) {
@@ -742,25 +781,109 @@ export class SkiaScroll extends SkiaControl {
         else
             this.ScrollTo(this.offsetX, this.ContentOffsetBounds.Top, maxTimeSecs);
     }
-    StopScrolling() { this.StopAnimators(); this.IsUserPanning = false; }
+    StopScrolling() { this.indexOrder = undefined; this.StopAnimators(); this.IsUserPanning = false; }
     /**
      * Scrolls so that item `index` is at the viewport start (or end). Like DrawnUi, Content must BE the
      * templated layout (the recycled list is the scroll's only child; a header goes above the scroll or in Header).
      */
     ScrollToIndex(index, animate, option = "Start") {
+        this.indexOrder = { Index: index, Option: option, Secs: animate ? this.ScrollingSpeedMs / 1000 : 0, Stalled: 0 };
+        this.PursueIndexOrder();
+        this.Repaint();
+    }
+    /**
+     * An open ScrollToIndex (C# OrderedScrollToIndex, DrawnUi.Rust scroll_to_index): a row not measured yet is gone to by
+     * the sizes as they are estimated, and the order is aimed again every frame until the row has its real place and the
+     * viewport stands on it; an animated move goes on to a moved target in the time it has left, later corrections jump.
+     * A press, the wheel or another scroll drops it; while it is open LoadMore waits.
+     */
+    indexOrder;
+    pursuing = false;
+    /** One step of the open order (C# ExecuteScrollToIndexOrder, Rust `pursue`), at the start of every paint. */
+    PursueIndexOrder() {
+        const order = this.indexOrder;
+        if (!order)
+            return;
+        const horizontal = this.Orientation === "Horizontal";
+        const before = horizontal ? this.offsetX : this.offsetY;
+        const running = horizontal ? this.animatorFlingX : this.animatorFlingY;
+        const aim = this.AimIndex(order.Index, order.Option);
+        let done = false;
+        if (aim) {
+            const c = this.ClampOffset(horizontal ? aim.Offset : this.offsetX, horizontal ? this.offsetY : aim.Offset, this.ContentOffsetBounds, true);
+            const target = horizontal ? c.X : c.Y;
+            const runningTo = horizontal ? this.scrollToTargetX : this.scrollToTargetY;
+            const move = (to, secs) => {
+                this.pursuing = true;
+                try {
+                    this.ScrollTo(horizontal ? to : this.offsetX, horizontal ? this.offsetY : to, secs, true);
+                }
+                finally {
+                    this.pursuing = false;
+                }
+            };
+            if (running.IsRunning && runningTo !== null) {
+                if (Math.abs(runningTo - target) > 0.5) {
+                    // on the way: the move goes on to the new target in the time it has left
+                    const now = this.Superview?.FrameTimeNanos || performance.now() * 1_000_000;
+                    move(target, running.StartFrameTimeNanos ? Math.max(0.016, running.Speed - (now - running.StartFrameTimeNanos) / 1e9) : running.Speed);
+                    running.StartFrameTimeNanos = running.LastFrameTimeNanos = now;
+                }
+            }
+            else if (Math.abs(before - target) <= 0.5) {
+                if (horizontal)
+                    this.ViewportOffsetX = target;
+                else
+                    this.ViewportOffsetY = target;
+                done = aim.Exact;
+            }
+            else {
+                move(target, order.Secs);
+                order.Secs = 0;
+            }
+        }
+        // no list yet, or a row that never gets its real place: not forever
+        order.Stalled = (horizontal ? this.offsetX : this.offsetY) === before && !running.IsRunning ? order.Stalled + 1 : 0;
+        if (done || order.Stalled >= 10) {
+            this.indexOrder = undefined;
+            this.CheckLoadMore();
+            return;
+        }
+        this.Repaint(); // the next frame aims again
+    }
+    /** The offset (points) that puts item `index` where `option` says, by the sizes the list knows now; Exact = its place is measured. */
+    AimIndex(index, option) {
         const layout = this.content instanceof SkiaLayout && this.content.IsTemplated ? this.content : undefined;
         const items = layout?.ItemsSource;
         if (!layout || !items || items.length === 0 || !this.content)
-            return;
+            return undefined;
         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 undefined;
+            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;
+        return { Offset: -target, Exact: layout.IsItemMeasured(i) };
     }
     StopAnimators() {
         this.flingEdgeX = null;
@@ -783,11 +906,70 @@ export class SkiaScroll extends SkiaControl {
         this.panningLastDelta = SKPoint.Empty;
         this.panningCurrentOffsetPts = new SKPoint(this.offsetX, this.offsetY);
     }
+    draggedScrollBar;
+    scrollBarOwnsGesture = false;
+    /**
+     * Thumb drag and track press on a ScrollBar / ScrollBarHorizontal with IsDraggable set (C# ProcessScrollBarGestures).
+     * A gesture that starts on the bar belongs to it until the next down: the content neither pans nor gets the tap.
+     * True when the gesture was handled here.
+     */
+    ProcessScrollBarGestures(args, apply) {
+        if (args.Type === "Down") {
+            this.draggedScrollBar = undefined;
+            this.scrollBarOwnsGesture = false;
+            const draggable = (b) => b && b.IsDraggable && b.BeginDrag && b.GetDragProgress ? b : undefined;
+            const v = draggable(this.scrollBar), h = draggable(this.scrollBarHorizontal);
+            if (!v && !h)
+                return false;
+            const x = apply.MappedLocation.X + apply.ChildOffset.X, y = apply.MappedLocation.Y + apply.ChildOffset.Y;
+            if (v && v.BeginDrag(x, y))
+                this.draggedScrollBar = v;
+            else if (h && h.BeginDrag(x, y))
+                this.draggedScrollBar = h;
+            if (!this.draggedScrollBar)
+                return false;
+            this.scrollBarOwnsGesture = true;
+            this.StopScrolling();
+            this.ApplyScrollBarDrag(x, y);
+            args.Event.Handled = true; // used: a touch on the bar is claimed, the page must not take the drag
+            return true;
+        }
+        if (!this.scrollBarOwnsGesture)
+            return false;
+        if (!this.draggedScrollBar)
+            return args.Type === "Tapped" || args.Type === "LongPressing"; // released already: only the tap that follows belongs to the bar
+        if (args.Type === "Panning") {
+            this.ApplyScrollBarDrag(apply.MappedLocation.X + apply.ChildOffset.X, apply.MappedLocation.Y + apply.ChildOffset.Y);
+            args.Event.Handled = true;
+        }
+        else if (args.Type === "Up") {
+            this.draggedScrollBar = undefined;
+            this.scrollBarLast = undefined; // push the idle state so an auto-hiding bar fades again
+            this.scrollBarHLast = undefined;
+            this.Repaint();
+        }
+        return true;
+    }
+    ApplyScrollBarDrag(x, y) {
+        const bar = this.draggedScrollBar;
+        if (!bar)
+            return;
+        const progress = bar.GetDragProgress(x, y);
+        const b = this.ContentOffsetBounds;
+        if (bar === this.scrollBarHorizontal)
+            this.ViewportOffsetX = this.ClampOffset(-progress * b.Width, this.offsetY, b, true).X;
+        else
+            this.ViewportOffsetY = this.ClampOffset(this.offsetX, -progress * b.Height, b, true).Y;
+        this.Repaint();
+    }
     ProcessGestures(args, apply) {
         const consumedDefault = this.BlockGesturesBelow ? this : null;
         const scale = this.RenderingScale;
         const e = args.Event;
+        if (this.ProcessScrollBarGestures(args, apply))
+            return this;
         if (args.Type === "Down") {
+            this.indexOrder = undefined; // a press drops an open ScrollToIndex
             this.hadDown = true;
             this.snapped = false;
             if (this.RespondsToGestures) {
@@ -801,15 +983,21 @@ export class SkiaScroll extends SkiaControl {
             const child = super.ProcessGestures(args, apply);
             if (child && child !== this)
                 return child;
-            if (!this.RespondsToGestures)
+            if (!this.RespondsToGestures || this.Orientation === "Neither")
+                return child ?? consumedDefault; // Neither: not used, a parent scroll may take it
+            // a vertical scroll leaves horizontal events (the sideways part of a diagonal swipe) to whatever is around it
+            if (e.Wheel.IsHorizontal && this.Orientation === "Vertical")
                 return child ?? consumedDefault;
-            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;
         const wrongDirection = (this.Orientation === "Vertical" && Math.abs(e.Distance.Total.X) > Math.abs(e.Distance.Total.Y) && Math.abs(e.Distance.Total.X) > SkiaScroll.ScrollVelocityThreshold * scale) ||
             (this.Orientation === "Horizontal" && Math.abs(e.Distance.Total.Y) > Math.abs(e.Distance.Total.X) && Math.abs(e.Distance.Total.Y) > SkiaScroll.ScrollVelocityThreshold * scale);
-        if (args.Type === "Panning" && this.RespondsToGestures && this.hadDown) {
+        if (args.Type === "Panning" && this.RespondsToGestures && this.hadDown && this.Orientation !== "Neither") {
             if (!this.IsUserPanning) {
                 // A child may own the pan (slider, nested horizontal scroll); ask once before taking over.
                 const childConsumed = super.ProcessGestures(args, apply);
@@ -860,6 +1048,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);
@@ -934,15 +1128,20 @@ export class SkiaScroll extends SkiaControl {
         return true;
     }
     /**
-     * One wheel notch = WheelLineSize points, hard-clamped, animated over AutoScrollingSpeedMs.
-     * Notches arriving while the previous one is still animating add onto its target, so a fast wheel
-     * spin travels N steps instead of restarting from the barely-moved current offset.
+     * One wheel notch = WheelLineSize points, hard-clamped, animated over AutoScrollingSpeedMs. An event moves by its share
+     * of a notch (Canvas.WheelDeltaPerNotch), so a touchpad's many small events scroll as far as the fingers moved (C#
+     * aaa871c3); an event under half a notch moves the content at once (no glide). Events arriving while the previous one is still animating add onto its target, so a fast wheel spin
+     * travels N steps instead of restarting from the barely-moved current offset.
      */
     ApplyWheelScroll(delta) {
-        const step = SkiaScroll.WheelLineSize * -Math.sign(delta); // wheel down = content up = more negative offset
+        const perNotch = this.Superview?.WheelDeltaPerNotch ?? 0;
+        const lines = perNotch > 0 ? delta / perNotch : Math.sign(delta);
+        const step = -SkiaScroll.WheelLineSize * lines; // wheel down = content up = more negative offset
         const horizontal = this.Orientation === "Horizontal";
-        const running = horizontal ? this.animatorFlingX : this.animatorFlingY;
-        const base = running.IsRunning && running.Parameters ? running.Parameters.Destination : horizontal ? this.offsetX : this.offsetY;
+        // the target the running wheel / ScrollTo move lands on: Parameters.Destination is where its deceleration curve would
+        // end if it ran on, beyond that target, so continuing from it overshot more with every event (a touchpad swipe flew away)
+        const running = horizontal ? this.animatorFlingX : this.animatorFlingY, target = horizontal ? this.scrollToTargetX : this.scrollToTargetY;
+        const base = running.IsRunning && target !== null ? target : horizontal ? this.offsetX : this.offsetY;
         const b = this.ContentOffsetBounds;
         const min = horizontal ? b.Left : b.Top, max = horizontal ? b.Right : b.Bottom;
         if ((step < 0 && base <= min) || (step > 0 && base >= max))
@@ -952,7 +1151,18 @@ export class SkiaScroll extends SkiaControl {
             x = base + step;
         else
             y = base + step;
-        this.ScrollTo(x, y, this.AutoScrollingSpeedMs / 1000, true);
+        // a notch glides over AutoScrollingSpeedMs; smaller events (a touchpad, a free-spinning or high-resolution wheel) come
+        // as a stream and move the content at once, as the browser scrolls a page: easing each one over 600 ms kept the
+        // content behind the fingers, a visible delay before it started to move
+        const glide = perNotch <= 0 || Math.abs(delta) >= perNotch / 2;
+        this.ScrollTo(x, y, glide ? this.AutoScrollingSpeedMs / 1000 : 0, true);
+        // a restarted glide starts at the event, not at its first frame: a fast trackpad swipe sends a notch-sized event
+        // before every frame, and a glide drawn at progress 0 on each of them left the content standing still until the
+        // events stopped, then it jumped (DrawnUi.Rust dfe36fe). Never before the last frame, at most one frame back.
+        if (glide && running.IsRunning) {
+            const event = performance.now() * 1_000_000;
+            running.StartFrameTimeNanos = running.LastFrameTimeNanos = Math.max(this.Superview?.FrameTimeNanos ?? 0, event - 16_666_667);
+        }
         return true;
     }
 }

package/dist/controls/SkiaScrollBar.d.ts

@@ -11,6 +11,12 @@ export type ScrollBarDock = "End" | "Start";
  */
 export interface IScrollBar {
     SetScrollProgress(orientation: ScrollOrientation, progress: number, thumbSizeRatio: number, overscrollPts: number, isScrolling: boolean): void;
+    /** Optional desktop behavior: the bar takes the gesture that starts on it (thumb drag, track press). */
+    IsDraggable?: boolean;
+    /** Canvas pixels; true when the point is on the bar and a drag starts. */
+    BeginDrag?(x: number, y: number): boolean;
+    /** Scroll progress 0..1 for the pointer during a drag started by BeginDrag. */
+    GetDragProgress?(x: number, y: number): number;
 }
 /**
  * Mirrors DrawnUi SkiaScrollBar: thin rounded thumb over an optional track, docked at the right edge for vertical
@@ -41,6 +47,19 @@ export declare class SkiaScrollBar extends SkiaLayout implements IScrollBar {
     /** Fade out after scrolling stops. */
     AutoHide: boolean;
     HideDelaySecs: number;
+    /** Duration in seconds of the fade-out once HideDelaySecs has passed. */
+    HideDurationSecs: number;
+    /**
+     * Lets the user drag the thumb and press the track to jump there (desktop scroll bar behavior). The owning
+     * SkiaScroll then takes the whole gesture, from down to up, when it starts on the bar. Default false: the bar only
+     * indicates and every gesture passes through to the content.
+     */
+    IsDraggable: boolean;
+    /** Extra grab area in points on both sides of the bar, across the scrolling axis, so a thin bar is easy to hit with a mouse. */
+    GrabPadding: number;
+    private thumbOffsetPts;
+    private dragGrabPx;
+    private hasTravel;
     protected readonly thumb: SkiaShape;
     protected readonly track: SkiaShape;
     private hideTimer;
@@ -52,5 +71,13 @@ export declare class SkiaScrollBar extends SkiaLayout implements IScrollBar {
     protected ApplyOrientation(): void;
     SetScrollProgress(orientation: ScrollOrientation, progress: number, thumbSizeRatio: number, overscrollPts: number, isScrolling: boolean): void;
     private CancelHide;
+    /**
+     * Called by the owning scroll on touch down, coordinates in canvas pixels. True when the point is on the bar (track
+     * plus GrabPadding) and a drag starts: on the thumb it keeps the grab point, on the track the thumb jumps to center
+     * under the pointer.
+     */
+    BeginDrag(x: number, y: number): boolean;
+    /** Scroll progress 0..1 for the pointer position during a drag started by BeginDrag, coordinates in canvas pixels. */
+    GetDragProgress(x: number, y: number): number;
     protected OnDisposing(): void;
 }

package/dist/controls/SkiaScrollBar.js

@@ -1,4 +1,4 @@
-import { Colors, Thickness } from "../core/Types";
+import { Colors, SKRect, Thickness } from "../core/Types";
 import { SkiaLayout } from "./SkiaLayout";
 import { SkiaShape } from "./SkiaShape";
 /**
@@ -49,6 +49,19 @@ export class SkiaScrollBar extends SkiaLayout {
     /** Fade out after scrolling stops. */
     AutoHide = true;
     HideDelaySecs = 1;
+    /** Duration in seconds of the fade-out once HideDelaySecs has passed. */
+    HideDurationSecs = 0.25;
+    /**
+     * Lets the user drag the thumb and press the track to jump there (desktop scroll bar behavior). The owning
+     * SkiaScroll then takes the whole gesture, from down to up, when it starts on the bar. Default false: the bar only
+     * indicates and every gesture passes through to the content.
+     */
+    IsDraggable = false;
+    /** Extra grab area in points on both sides of the bar, across the scrolling axis, so a thin bar is easy to hit with a mouse. */
+    GrabPadding = 8;
+    thumbOffsetPts = 0;
+    dragGrabPx = 0;
+    hasTravel = false;
     thumb = new SkiaShape();
     track = new SkiaShape();
     hideTimer = 0;
@@ -62,6 +75,7 @@ export class SkiaScrollBar extends SkiaLayout {
         this.HorizontalOptions = "Fill";
         this.VerticalOptions = "Fill";
         this.InputTransparent = true; // display only, gestures pass through
+        this.IsParentIndependent = true; // the bar's look (thumb squashed on overscroll) never changes the layout around it
         this.Opacity = 0; // hidden until the first scroll
         this.track.Type = "Rectangle";
         this.track.BackgroundColor = this.trackColor;
@@ -127,6 +141,8 @@ export class SkiaScrollBar extends SkiaLayout {
             thumbLen = Math.max(this.MinThumbSize / 2, thumbLen - Math.abs(overscrollPts)); // squash on bounce
         const travel = track - thumbLen;
         const offset = Math.max(0, Math.min(1, progress)) * travel;
+        this.thumbOffsetPts = offset;
+        this.hasTravel = travel > 0;
         if (Math.abs(thumbLen - this.lastThumbLen) > 0.5) {
             this.lastThumbLen = thumbLen;
             if (orientation === "Horizontal")
@@ -142,7 +158,7 @@ export class SkiaScrollBar extends SkiaLayout {
         this.CancelHide();
         this.Opacity = 1;
         if (this.AutoHide && !isScrolling) {
-            this.hideTimer = window.setTimeout(() => { this.hideTimer = 0; this.hideAbort = new AbortController(); void this.FadeToAsync(0, 250, undefined, this.hideAbort.signal); }, this.HideDelaySecs * 1000);
+            this.hideTimer = window.setTimeout(() => { this.hideTimer = 0; this.hideAbort = new AbortController(); void this.FadeToAsync(0, Math.max(0, this.HideDurationSecs * 1000), undefined, this.hideAbort.signal); }, this.HideDelaySecs * 1000);
         }
         this.RepaintComposition();
     }
@@ -154,5 +170,38 @@ export class SkiaScrollBar extends SkiaLayout {
         this.hideAbort?.abort();
         this.hideAbort = undefined;
     }
+    /**
+     * Called by the owning scroll on touch down, coordinates in canvas pixels. True when the point is on the bar (track
+     * plus GrabPadding) and a drag starts: on the thumb it keeps the grab point, on the track the thumb jumps to center
+     * under the pointer.
+     */
+    BeginDrag(x, y) {
+        if (!this.IsDraggable || !this.hasTravel)
+            return false;
+        const scale = this.RenderingScale || 1;
+        const track = this.track.DrawingRect;
+        const pad = this.GrabPadding * scale;
+        const vertical = this.orientation !== "Horizontal";
+        const hit = vertical ? new SKRect(track.Left - pad, track.Top, track.Right + pad, track.Bottom) : new SKRect(track.Left, track.Top - pad, track.Right, track.Bottom + pad);
+        if (x < hit.Left || x > hit.Right || y < hit.Top || y > hit.Bottom)
+            return false;
+        // an auto-hidden bar that gets grabbed shows again right away: never drag something invisible
+        this.CancelHide();
+        this.Opacity = 1;
+        const pos = vertical ? y - track.Top : x - track.Left;
+        const thumbStart = this.thumbOffsetPts * scale, thumbLen = this.lastThumbLen * scale;
+        this.dragGrabPx = pos >= thumbStart && pos <= thumbStart + thumbLen ? pos - thumbStart : thumbLen / 2;
+        this.RepaintComposition();
+        return true;
+    }
+    /** Scroll progress 0..1 for the pointer position during a drag started by BeginDrag, coordinates in canvas pixels. */
+    GetDragProgress(x, y) {
+        const scale = this.RenderingScale || 1;
+        const track = this.track.DrawingRect;
+        const vertical = this.orientation !== "Horizontal";
+        const pos = (vertical ? y - track.Top : x - track.Left) - this.dragGrabPx;
+        const travel = (vertical ? track.Height : track.Width) - this.lastThumbLen * scale;
+        return travel > 0 ? Math.max(0, Math.min(1, pos / travel)) : 0;
+    }
     OnDisposing() { this.CancelHide(); super.OnDisposing(); }
 }

package/dist/controls/SkiaShaderCarousel.d.ts

@@ -56,6 +56,11 @@ export declare class SkiaShaderCarousel extends SkiaCarousel {
     protected OnScrollProgressChanged(): void;
     /** Slides never move: the transition effect renders the change (C# AnimateVisibleChild no-op). */
     protected SlideOffset(_offset: SKPoint): SKPoint;
+    /**
+     * Slides all sit on the same rect, so only the selected one may take gestures: otherwise the topmost slide in the
+     * gesture list (the last on-screen one, a neighbour exactly one width away counts as on screen) caught every tap.
+     */
+    protected IsSlideHitTestable(index: number): boolean;
     ProcessGestures(args: SkiaGesturesParameters, apply: GestureEventProcessingInfo): SkiaControl | null;
     /**
      * Gesture targeting (C#): one gesture moves at most one slide from the slide it started on; a flick moves one slide

package/dist/controls/SkiaShaderCarousel.js

@@ -145,6 +145,11 @@ export class SkiaShaderCarousel extends SkiaCarousel {
     }
     /** Slides never move: the transition effect renders the change (C# AnimateVisibleChild no-op). */
     SlideOffset(_offset) { return SKPoint.Empty; }
+    /**
+     * Slides all sit on the same rect, so only the selected one may take gestures: otherwise the topmost slide in the
+     * gesture list (the last on-screen one, a neighbour exactly one width away counts as on screen) caught every tap.
+     */
+    IsSlideHitTestable(index) { return index === this.SelectedIndex; }
     ProcessGestures(args, apply) {
         if (args.Type === "Down") {
             const interrupted = this.InTransition;