@jsenv/navi 0.29.421 → 0.29.423
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/dev/jsenv_navi.js +70 -13
- package/dist/dev/jsenv_navi.js.map +2 -2
- package/dist/jsenv_navi.js +70 -13
- package/dist/jsenv_navi.js.map +2 -2
- package/docs/scroll.md +40 -5
- package/package.json +1 -1
package/docs/scroll.md
CHANGED
|
@@ -301,14 +301,48 @@ games and games to come) holds ten times more of the first on a screen than of
|
|
|
301
301
|
the second. `"100item"` covers four screens of the one-line items and thirty of
|
|
302
302
|
the cards, and nobody scrolls to the thirtieth; a count right for the cards
|
|
303
303
|
leaves blank screens when a fling crosses the one-line items. With a size, the
|
|
304
|
-
window weighs the items it draws
|
|
305
|
-
yet like the drawn items next to it — items of one kind come together — then
|
|
306
|
-
weighs it again once it is drawn.
|
|
304
|
+
window weighs the items it draws (see below).
|
|
307
305
|
|
|
308
306
|
A run whose rows all fit the window is just rows: nothing is virtualized, and
|
|
309
307
|
it costs what the same rows would as children. There is no reason to hold back
|
|
310
308
|
from it for a list that might grow.
|
|
311
309
|
|
|
310
|
+
### What the list knows, and what it guesses
|
|
311
|
+
|
|
312
|
+
A virtualized list has one aim: draw as few items as it can, and never show a
|
|
313
|
+
blank where an item should be — with one simple rule, not a model of every kind
|
|
314
|
+
of item.
|
|
315
|
+
|
|
316
|
+
What is drawn, the list measures: the render window is sized on the room the
|
|
317
|
+
items it draws actually take. What is not drawn it cannot measure, so it
|
|
318
|
+
guesses:
|
|
319
|
+
|
|
320
|
+
- the fillers hold every item outside the window at one size — `virtualItemSize`
|
|
321
|
+
when given, the average of the items measured so far otherwise. A scroll
|
|
322
|
+
position inside a filler is read with it too, and an item on its way takes at
|
|
323
|
+
least that room;
|
|
324
|
+
- when the window reaches past what it has drawn, it weighs the next items like
|
|
325
|
+
the drawn ones next to them, and measures them once they are drawn.
|
|
326
|
+
|
|
327
|
+
A guess is wrong one way or the other, and the two ways do not cost the same.
|
|
328
|
+
An item guessed **smaller** than it is makes the list count more items to fill
|
|
329
|
+
a space than it needs: it builds one or two more, and the screen is covered. An
|
|
330
|
+
item guessed **bigger** makes it count too few, and a blank shows until they
|
|
331
|
+
are measured. So a size you give is the **worst case**: in a list whose items
|
|
332
|
+
differ in height, `virtualItemSize` is the smallest an item can be — the
|
|
333
|
+
one-line item, in a thread of one-line items and cards. The scrollbar then
|
|
334
|
+
under-states a list made mostly of big items; the screen stays covered. One
|
|
335
|
+
number for the whole list is the point: a size per kind of item, or per state
|
|
336
|
+
of one, is a model to keep in step with the markup, for a scrollbar a little
|
|
337
|
+
more exact.
|
|
338
|
+
|
|
339
|
+
The window's own guess past what it has drawn is the one that is not the worst
|
|
340
|
+
case, on purpose. Guessing the smallest there walks into cards at the one-line
|
|
341
|
+
size and builds them several at a time — tasks of 50–65 ms while reading down
|
|
342
|
+
through cards, measured, for no blank spared. It guesses the neighbours' size
|
|
343
|
+
instead: items of one kind come together, and a window that comes up short is
|
|
344
|
+
measured and extended on the next frame.
|
|
345
|
+
|
|
312
346
|
### The first paint of a list that opens in a click
|
|
313
347
|
|
|
314
348
|
A popup's content is built in the click that opens it (see
|
|
@@ -389,8 +423,9 @@ Reference: `src/control/demos/19_list_find_in_page_demo.html`.
|
|
|
389
423
|
Define it outside the component, or `useCallback` it, and let it read the
|
|
390
424
|
item and the index it is given rather than closing over state.
|
|
391
425
|
|
|
392
|
-
The rest — `virtualItemSize
|
|
393
|
-
|
|
426
|
+
The rest — `virtualItemSize`, the room an item not drawn is held at (uniform
|
|
427
|
+
items, or the smallest one of a mixed list — the worst case, see above), a `key`
|
|
428
|
+
on the run when the collection changes as a whole (never to refresh it, see
|
|
394
429
|
[list_refresh.md](./list_refresh.md#a-paginated-list-stays-on-screen-too)),
|
|
395
430
|
`groupBy` for sections — is in the JSDoc of `List` and `List.Items`
|
|
396
431
|
(`src/control/list/list.jsx`). Demos:
|