@fusion.dev/helix-core 0.215.1 → 0.215.3

package/dist/controllers/virtualize-controller/virtualize-controller.d.ts

@@ -215,6 +215,12 @@ export declare class VirtualizeController implements ReactiveController {
     private heading;
     /** Whether a finger is on the box. iOS keeps scrolling after it lifts. */
     private touching;
+    /**
+     * Whether the reader uses a touch screen: the device says its pointer is
+     * coarse, or a finger has been on the box. Rows are held while the box moves
+     * on such a screen only, since a mouse wheel does not end on a row change.
+     */
+    private touched;
     /** The timer that ends a scroll, set again on every scroll event. */
     private resting;
     /**
@@ -299,8 +305,13 @@ export declare class VirtualizeController implements ReactiveController {
      * scroll offset, with what is owed to it and less the drift.
      */
     private offset;
-    /** How far past the screen to draw toward the side the box is scrolling to. */
+    /**
+     * How far past the screen to draw toward the side the box is scrolling to,
+     * and on a touched screen on both sides, `BUFFER` boxes of it.
+     */
     private lead;
+    /** Whether the rows beyond the box are drawn on the side the box is not scrolling to. */
+    private both;
     /**
      * Reads the scroll offset and settles the window.
      *
@@ -309,6 +320,16 @@ export declare class VirtualizeController implements ReactiveController {
      * so requesting one per event would re-render the list for every pixel.
      */
     measure(): void;
+    /**
+     * Whether the rows already drawn are kept for now: the screen is touched, the
+     * box is moving, and the rows drawn cover all of it.
+     *
+     * Not in a waterfall, where an item measured moves the items under it and
+     * the host draws them again.
+     */
+    private holds;
+    /** The window with the rows `first` to `last`, and the spacers that stand in for the rest. */
+    private frame;
     /** The straight line: one estimate, so offset and index convert by division. */
     private uniform;
     /**

package/dist/controllers/virtualize-controller/virtualize-controller.js

@@ -3,6 +3,7 @@ import { reportRuntime } from '../../utils/report-runtime/report-runtime.js';
 import { Heights } from './heights.js';
 const UNSTABLE = 10;
 const REST = 150;
+const BUFFER = 2;
 export class VirtualizeController {
     constructor(host, options) {
         this.watching = false;
@@ -15,6 +16,7 @@ export class VirtualizeController {
         this.lastTop = 0;
         this.heading = 0;
         this.touching = false;
+        this.touched = typeof matchMedia === 'function' && matchMedia('(any-pointer: coarse)').matches;
         this.uneven = false;
         this.handleScroll = () => {
             const box = this.options.container();
@@ -34,6 +36,7 @@ export class VirtualizeController {
         };
         this.handleTouchStart = () => {
             this.touching = true;
+            this.touched = true;
         };
         this.handleTouchEnd = () => {
             this.touching = false;
@@ -43,7 +46,13 @@ export class VirtualizeController {
         };
         this.rest = () => {
             this.resting = undefined;
-            if (this.touching || this.drift === 0) {
+            if (this.touching) {
+                return;
+            }
+            if (this.drift === 0) {
+                if (this.touched) {
+                    this.measure();
+                }
                 return;
             }
             this.square();
@@ -148,8 +157,14 @@ export class VirtualizeController {
         return this.scrolled(box) + this.owed - this.drift;
     }
     lead(box) {
+        if (this.touched) {
+            return this.span(box) * BUFFER;
+        }
         return this.heading === 0 ? 0 : this.span(box);
     }
+    both() {
+        return this.touched;
+    }
     measure() {
         this.watch();
         const box = this.options.container();
@@ -168,10 +183,14 @@ export class VirtualizeController {
             this.square();
             next = choose();
         }
-        if (this.last?.count !== total || this.last.estimate !== size) {
+        const moved = this.last?.count !== total || this.last.estimate !== size;
+        if (moved) {
             this.last = { count: total, estimate: size };
             this.settling = 0;
         }
+        if (!moved && this.holds(box, total)) {
+            next = this.frame(this.window.first, this.window.last, total, size);
+        }
         const same = next.first === this.window.first &&
             next.last === this.window.last &&
             next.before === this.window.before &&
@@ -188,11 +207,38 @@ export class VirtualizeController {
         this.window = next;
         this.host.requestUpdate();
     }
+    holds(box, total) {
+        if (!this.touched || !this.scrolling() || this.laned(total)) {
+            return false;
+        }
+        const { first, last, before } = this.window;
+        if (last <= first || last > total) {
+            return false;
+        }
+        const size = this.line();
+        const drawn = this.measuring()
+            ? this.startOf(last, total) - this.startOf(first, total)
+            : (last - first) * size;
+        const top = this.scrolled(box);
+        return top >= before && top + this.span(box) <= before + drawn;
+    }
+    frame(first, last, total, size) {
+        return this.measuring()
+            ? {
+                after: Math.max(0, this.startOf(total, total) - this.startOf(last, total)),
+                before: this.startOf(first, total) + this.drift,
+                first,
+                last,
+            }
+            : { after: Math.max(0, (total - last) * size), before: first * size, first, last };
+    }
     uniform(box, total, size, overscan) {
         const extra = Math.ceil(this.lead(box) / size);
         const at = Math.min(Math.floor(this.offset(box) / size), total);
-        const first = Math.max(0, at - overscan - (this.heading < 0 ? extra : 0));
-        const fits = Math.ceil(this.span(box) / size) + overscan * 2 + (this.heading === 0 ? 0 : extra);
+        const first = Math.max(0, at - overscan - (this.heading < 0 || this.both() ? extra : 0));
+        const fits = Math.ceil(this.span(box) / size) +
+            overscan * 2 +
+            (this.both() ? extra * 2 : this.heading === 0 ? 0 : extra);
         const last = Math.min(total, first + fits);
         return { after: Math.max(0, (total - last) * size), before: first * size, first, last };
     }
@@ -287,10 +333,10 @@ export class VirtualizeController {
     placed(box, total, overscan) {
         const top = this.offset(box);
         const lead = this.lead(box);
-        const from = this.heading < 0 ? top - lead : top;
+        const from = this.heading < 0 || this.both() ? top - lead : top;
         const more = overscan * (this.laned(total)?.lanes ?? 1);
         const first = Math.max(0, this.indexAt(from, total) - more);
-        const bottom = top + this.span(box) + (this.heading > 0 ? lead : 0);
+        const bottom = top + this.span(box) + (this.heading > 0 || this.both() ? lead : 0);
         let last = this.indexAt(top, total);
         while (last < total && this.startOf(last, total) < bottom) {
             last += 1;

package/dist/version.d.ts

@@ -6,4 +6,4 @@
  * release, so the two never disagree; a spec beside this holds them to it.
  * Nothing else in the running code knows which release it is.
  */
-export declare const VERSION = "0.215.1";
+export declare const VERSION = "0.215.3";

package/dist/version.js

@@ -1 +1 @@
-export const VERSION = '0.215.1';
+export const VERSION = '0.215.3';

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@fusion.dev/helix-core",
   "description": "Helix element primitives: base classes, mixins, decorators, utilities.",
-  "version": "0.215.1",
+  "version": "0.215.3",
   "license": "MIT",
   "author": "Ross Sheppard <ross.sheppard@fusion.dev>",
   "repository": {
@@ -81,12 +81,12 @@
   "bugs": "https://github.com/project-fusion/fusion/issues",
   "dependencies": {
     "@floating-ui/dom": "^1.8.0",
-    "@fusion.dev/helix-icons": "0.215.1",
+    "@fusion.dev/helix-icons": "0.215.3",
     "tslib": "^2.8.1"
   },
   "devDependencies": {
-    "@fusion.dev/helix-cem": "0.215.1",
-    "@fusion.dev/helix-testing": "0.215.1",
+    "@fusion.dev/helix-cem": "0.215.3",
+    "@fusion.dev/helix-testing": "0.215.3",
     "@lit-labs/ssr": "^4.1.0",
     "lit": "^3.2.1"
   },