virtua 0.52.9 → 0.53.0

package/lib/solid/index.jsx

@@ -903,6 +903,167 @@ var getBoxStyle = (from, to, inset, edge, zIndex) => {
 	return style;
 };
 
+//#endregion
+//#region src/core/layouts/masonry.ts
+var createMasonryLayout = (length, lanesOpt, gap = 0, itemSize, snapshot) => {
+	let lanes = max(lanesOpt, 1);
+	let nextLanes = lanes;
+	let nextGap = gap;
+	let defaultItemSize = snapshot && snapshot[1] || itemSize || 40;
+	let computedIndex = -1;
+	let estimatingIndexes = itemSize ? undefined : new Set();
+	let isEstimating = !itemSize;
+	const restoredSizes = snapshot && snapshot[0];
+	const sizes = restoredSizes ? fill(restoredSizes.slice(0, min(length, restoredSizes.length)), max(0, length - restoredSizes.length)) : fill([], length);
+	const offsets = [];
+	const laneIndexes = [];
+	const highs = [];
+	const getSize = (index) => {
+		const size = sizes[index];
+		return size === -1 ? defaultItemSize : size;
+	};
+	const compute = (index) => {
+		index = min(index, length - 1);
+		if (computedIndex >= index) return;
+		const bottoms = [];
+		const lastIndexes = [];
+		for (let l = 0; l < lanes; l++) {
+			bottoms.push(0);
+			lastIndexes.push(-1);
+		}
+		for (let j = computedIndex, remaining = lanes; j >= 0 && remaining; j--) {
+			const l = laneIndexes[j];
+			if (lastIndexes[l] === -1) {
+				lastIndexes[l] = j;
+				bottoms[l] = offsets[j] + getSize(j);
+				remaining--;
+			}
+		}
+		while (computedIndex < index) {
+			const i = ++computedIndex;
+			let lane = 0;
+			let offset = Infinity;
+			let lastIndex = Infinity;
+			for (let l = 0; l < lanes; l++) {
+				const candidate = bottoms[l] + (lastIndexes[l] >= 0 ? gap : 0);
+				if (candidate < offset || candidate === offset && lastIndexes[l] < lastIndex) {
+					lane = l;
+					offset = candidate;
+					lastIndex = lastIndexes[l];
+				}
+			}
+			offsets[i] = offset;
+			laneIndexes[i] = lane;
+			bottoms[lane] = offset + getSize(i);
+			lastIndexes[lane] = i;
+			highs[i] = max(i ? highs[i - 1] : 0, bottoms[lane]);
+		}
+	};
+	const getOffset = (index) => {
+		if (index >= length) return getTotalSize();
+		compute(index);
+		return offsets[index];
+	};
+	const getHigh = (index) => {
+		compute(index);
+		return highs[index];
+	};
+	const getTotalSize = () => length ? getHigh(length - 1) : 0;
+	const findStart = (offset) => {
+		if (!length) return 0;
+		const index = findIndex(getHigh, length, offset);
+		return getHigh(index) <= offset ? index + 1 : index;
+	};
+	return {
+		$getRange: (startOffset, endOffset) => {
+			const end = findIndex(getOffset, length, endOffset);
+			return [min(findStart(startOffset), end), end];
+		},
+		$findIndex: (offset) => findIndex(getOffset, length, offset),
+		$getItemOffset: getOffset,
+		$getItemSize: getSize,
+		$isSizeEqual: (index, size = -1) => sizes[index] === size,
+		$resize: (resizes, shouldKeep, scrollOffset, viewportSize) => {
+			let anchorIndex = findStart(scrollOffset);
+			while (anchorIndex > 0 && !shouldKeep(anchorIndex - 1)) {
+				anchorIndex--;
+			}
+			while (anchorIndex < length && shouldKeep(anchorIndex)) {
+				anchorIndex++;
+			}
+			const prevAnchorOffset = getOffset(anchorIndex);
+			for (const [index, size] of resizes) {
+				sizes[index] = size;
+				estimatingIndexes && estimatingIndexes.add(index);
+				computedIndex = min(index - 1, computedIndex);
+			}
+			let jump = getOffset(anchorIndex) - prevAnchorOffset;
+			if (estimatingIndexes && viewportSize) {
+				const measuredSizes = [];
+				let totalMeasuredSize = 0;
+				estimatingIndexes.forEach((index) => {
+					const size = sizes[index];
+					if (size > 0) {
+						measuredSizes.push(size);
+						totalMeasuredSize += size + gap;
+					}
+				});
+				if (totalMeasuredSize > viewportSize * lanes) {
+					sort(measuredSizes);
+					const len = measuredSizes.length;
+					const mid = len / 2 | 0;
+					const median = len % 2 === 0 ? (measuredSizes[mid - 1] + measuredSizes[mid]) / 2 : measuredSizes[mid];
+					const startIndex = findStart(scrollOffset + jump);
+					const prevStartOffset = getOffset(startIndex);
+					defaultItemSize = median;
+					computedIndex = -1;
+					jump += getOffset(startIndex) - prevStartOffset;
+					estimatingIndexes = undefined;
+					isEstimating = false;
+				}
+			}
+			return jump;
+		},
+		$getTotalSize: getTotalSize,
+		$getLength: () => length,
+		$setLength: (nextLength) => {
+			const diff = nextLength - length;
+			computedIndex = min(nextLength - 1, computedIndex);
+			length = nextLength;
+			if (diff > 0) {
+				fill(sizes, diff);
+			} else {
+				sizes.splice(diff);
+			}
+			return 0;
+		},
+		$relayout: (_, scrollOffset) => {
+			if (nextLanes === lanes && nextGap === gap) {
+				return;
+			}
+			const startIndex = findStart(scrollOffset);
+			const prevStartOffset = getOffset(startIndex);
+			lanes = nextLanes;
+			gap = nextGap;
+			computedIndex = -1;
+			estimatingIndexes = itemSize ? undefined : new Set();
+			return getOffset(startIndex) - prevStartOffset;
+		},
+		$setOptions: (lanes, gap = 0) => {
+			nextLanes = max(lanes, 1);
+			nextGap = gap;
+		},
+		$isEstimating: () => isEstimating,
+		$snapshot: () => [sizes.slice(), defaultItemSize],
+		$getLanes: () => lanes,
+		$getGap: () => gap,
+		$getItemLane: (index) => {
+			compute(index);
+			return laneIndexes[index];
+		}
+	};
+};
+
 //#endregion
 //#region src/core/observer.ts
 var createResizeObserver = (cb) => {
@@ -988,6 +1149,7 @@ var createScrollObserver = (store, viewport, scroller, isHorizontal, isRtl, onMo
 	viewport.addEventListener("touchstart", onTouchStart, { passive: true });
 	viewport.addEventListener("touchend", onTouchEnd, { passive: true });
 	return {
+		_sync: onScroll,
 		_dispose: () => {
 			viewport.removeEventListener("scroll", onScroll);
 			viewport.removeEventListener("wheel", onWheel);
@@ -1070,10 +1232,8 @@ var createScrollObserver = (store, viewport, scroller, isHorizontal, isRtl, onMo
 			};
 			if (smooth) {
 				store.$update(8, getTargetOffset());
-				microtask(start);
-			} else {
-				start();
 			}
+			start();
 		}
 	};
 };
@@ -1084,13 +1244,20 @@ var createContainerDriver = (store, isHorizontal) => {
 	let viewportElement;
 	let scrollObserver;
 	let initialized = createPromise();
+	let isViewportDisplayed = true;
 	const mountedIndexes = new WeakMap();
 	const resizeObserver = createResizeObserver((entries) => {
 		const resizes = [];
 		for (const { target, contentRect: { width, height } } of entries) {
 			if (target === viewportElement) {
 				if (width || height) {
+					if (!isViewportDisplayed) {
+						scrollObserver._sync();
+					}
+					isViewportDisplayed = true;
 					store.$update(4, isHorizontal ? width : height);
+				} else {
+					isViewportDisplayed = false;
 				}
 			} else if (target.offsetParent) {
 				const index = mountedIndexes.get(target);
@@ -1228,6 +1395,7 @@ var createContainerGridDriver = (rowStore, colStore) => {
 	let rowScrollObserver;
 	let colScrollObserver;
 	let initialized = createPromise();
+	let isViewportDisplayed = true;
 	const mountedRowIndexes = new WeakMap();
 	const mountedColIndexes = new WeakMap();
 	const resizeObserver = createResizeObserver((entries) => {
@@ -1236,8 +1404,15 @@ var createContainerGridDriver = (rowStore, colStore) => {
 		for (const { target, contentRect: { width, height } } of entries) {
 			if (target === viewportElement) {
 				if (width || height) {
+					if (!isViewportDisplayed) {
+						rowScrollObserver._sync();
+						colScrollObserver._sync();
+					}
+					isViewportDisplayed = true;
 					rowStore.$update(4, height);
 					colStore.$update(4, width);
+				} else {
+					isViewportDisplayed = false;
 				}
 			} else if (target.offsetParent) {
 				const rowIndex = mountedRowIndexes.get(target);
@@ -1263,9 +1438,8 @@ var createContainerGridDriver = (rowStore, colStore) => {
 				(isHorizontal ? colScrollObserver : rowScrollObserver)._scroll(getTargetOffset);
 			}
 		},
-		$observe(containerElement) {
-			const viewport = viewportElement = containerElement.parentElement;
-			resizeObserver._observe(viewport);
+		$observe(containerElement, viewport = containerElement.parentElement) {
+			resizeObserver._observe(viewportElement = viewport);
 			const observe = (store, isHorizontal) => createScrollObserver(store, viewport, viewport, isHorizontal, isHorizontal && getComputedStyle(viewport).direction === "rtl", () => {
 				const overflowKey = isHorizontal ? "overflowX" : "overflowY";
 				const style = viewport.style;
@@ -1586,7 +1760,7 @@ var VList = (props) => {
 		"style"
 	]);
 	return <div {...others} style={{
-		display: local.horizontal ? "inline-block" : "block",
+		display: "block",
 		[local.horizontal ? "overflow-x" : "overflow-y"]: "auto",
 		contain: "strict",
 		width: "100%",
@@ -1902,5 +2076,168 @@ var VGrid = (props) => {
 };
 
 //#endregion
-export { VGrid, VList, Virtualizer, WindowVirtualizer };
+//#region src/solid/VMasonry.tsx
+var toCrossValue = (fraction, px) => px ? `calc(${fraction * 100}% + ${px}px)` : fraction * 100 + "%";
+var MasonryItem = (props) => {
+	let elementRef;
+	createEffect(() => {
+		if (!elementRef) return;
+		onCleanup(props._resizer(elementRef, props._index));
+	});
+	const style = createMemo(() => ({
+		contain: "layout style",
+		position: "absolute",
+		top: props._offset + "px",
+		"inset-inline-start": props._crossOffset,
+		width: props._crossSize,
+		visibility: props._hide ? "hidden" : undefined
+	}));
+	return <div ref={elementRef} style={style()}>
+      {props._children}
+    </div>;
+};
+var VMasonry = (props) => {
+	let containerRef;
+	const { itemSize, cache } = props;
+	const [, others] = splitProps(props, [
+		"ref",
+		"data",
+		"children",
+		"lanes",
+		"gap",
+		"itemSize",
+		"bufferSize",
+		"cache",
+		"onScroll",
+		"onScrollEnd",
+		"style"
+	]);
+	const layout = createMasonryLayout(props.data.length, props.lanes, props.gap, itemSize, cache);
+	const store = createVirtualStore(layout);
+	const driver = createContainerDriver(store, false);
+	const [stateVersion, setRerender] = createSignal(store.$getStateVersion());
+	store.$subscribe(1, () => {
+		setRerender(store.$getStateVersion());
+	});
+	store.$subscribe(4, () => {
+		props.onScroll?.(store.$getScrollOffset());
+	});
+	store.$subscribe(8, () => {
+		props.onScrollEnd?.();
+	});
+	createComputed(() => {
+		layout.$setOptions(props.lanes, props.gap);
+		store.$update(9, undefined);
+	});
+	const range = createMemo((prev) => {
+		stateVersion();
+		const next = store.$getRange(props.bufferSize);
+		if (prev && isSameRange(prev, next)) {
+			return prev;
+		}
+		return next;
+	});
+	const isScrolling = createMemo(() => stateVersion() && store.$isScrolling());
+	const totalSize = createMemo(() => stateVersion() && store.$getTotalSize());
+	const lanes = createMemo(() => stateVersion() && layout.$getLanes());
+	const gap = createMemo(() => stateVersion() && layout.$getGap());
+	const crossSize = createMemo(() => toCrossValue(1 / lanes(), gap() / lanes() - gap()));
+	const ref = props.ref;
+	if (!isServer && ref) {
+		ref({
+			get cache() {
+				return layout.$snapshot();
+			},
+			get scrollOffset() {
+				return store.$getScrollOffset();
+			},
+			get scrollSize() {
+				return getScrollSize(store);
+			},
+			get viewportSize() {
+				return store.$getViewportSize();
+			},
+			getItemOffset: store.$getItemOffset,
+			getItemSize: store.$getItemSize,
+			scrollToIndex: (index, opts) => scrollToIndex(driver, store, index, opts),
+			scrollTo: (offset) => scrollTo(driver, offset),
+			scrollBy: (offset) => scrollBy(driver, store, offset)
+		});
+		onCleanup(() => ref());
+	}
+	onMount(() => {
+		driver.$observe(containerRef);
+		onCleanup(() => {
+			store.$dispose();
+			driver.$dispose();
+		});
+	});
+	createEffect(on(stateVersion, () => {
+		driver.$effect();
+	}));
+	const dataSlice = createMemo(() => {
+		const count = props.data.length;
+		untrack(() => {
+			if (count !== store.$getItemsLength()) {
+				store.$update(5, [count]);
+			}
+		});
+		const items = [];
+		const indexes = [];
+		for (let [i, j] = range(); i <= j; i++) {
+			items.push(props.data[i]);
+			indexes.push(i);
+		}
+		return {
+			_items: items,
+			_indexes: indexes
+		};
+	});
+	const renderItem = (data, index) => {
+		const offset = createMemo(() => {
+			stateVersion();
+			return store.$getItemOffset(index());
+		});
+		const lane = createMemo(() => {
+			stateVersion();
+			return layout.$getItemLane(index());
+		});
+		const hide = createMemo(() => {
+			stateVersion();
+			return store.$isUnmeasuredItem(index());
+		});
+		const children = createMemo(() => {
+			return untrack(() => props.children(data, index));
+		});
+		return <MasonryItem _index={index()} _resizer={driver.$observeItem} _offset={offset()} _crossOffset={toCrossValue(lane() / lanes(), lane() * gap() / lanes())} _crossSize={crossSize()} _hide={hide()} _children={children()} />;
+	};
+	return <div {...others} style={{
+		display: "block",
+		"overflow-y": "auto",
+		contain: "strict",
+		width: "100%",
+		height: "100%",
+		...props.style
+	}}>
+      <div ref={containerRef} style={{
+		contain: "size style",
+		"overflow-anchor": "none",
+		flex: "none",
+		position: "relative",
+		width: "100%",
+		height: totalSize() + "px",
+		"pointer-events": isScrolling() ? "none" : undefined
+	}}>
+        <For each={dataSlice()._items}>
+          {(data, index) => {
+		const itemIndex = createMemo(() => dataSlice()._indexes[index()]);
+		return renderItem(data, itemIndex);
+	}}
+        </For>
+      </div>
+    </div>;
+};
+
+//#endregion
+export { VGrid, VList, VMasonry, Virtualizer, WindowVirtualizer };
 //# sourceMappingURL=index.jsx.map