virtua 0.52.5 → 0.52.7

package/lib/solid/index.jsx

@@ -283,6 +283,13 @@ var createVirtualStore = ({ $getRange: getRange, $findIndex: findIndex, $getItem
 //#endregion
 //#region src/core/cache.ts
 var UNCACHED = -1;
+var fill = (array, length, prepend) => {
+	const key = prepend ? "unshift" : "push";
+	for (let i = 0; i < length; i++) {
+		array[key](-1);
+	}
+	return array;
+};
 var findIndex = (getOffset, length, offset, low = 0, high = length - 1) => {
 	let found = low;
 	while (low <= high) {
@@ -299,13 +306,6 @@ var findIndex = (getOffset, length, offset, low = 0, high = length - 1) => {
 
 //#endregion
 //#region src/core/layouts/list.ts
-var fill = (array, length, prepend) => {
-	const key = prepend ? "unshift" : "push";
-	for (let i = 0; i < length; i++) {
-		array[key](-1);
-	}
-	return array;
-};
 var createListLayout = (length, itemSize, snapshot) => {
 	let defaultItemSize = snapshot && snapshot[1] || itemSize || 40;
 	let computedOffsetIndex = -1;
@@ -405,99 +405,149 @@ var createListLayout = (length, itemSize, snapshot) => {
 var getAxisLength = (axis) => typeof axis === "number" ? axis : axis.length;
 var getAxisItem = (axis, index) => typeof axis === "number" ? index : axis[index];
 var createGridLayout = (axis, size, gap = 0) => {
+	let length = getAxisLength(axis);
+	const isUniform = typeof size === "number";
+	const isAuto = size === "auto";
+	let defaultItemSize = (isUniform ? size : 40) + gap;
+	let computedOffsetIndex = -1;
 	let header = 0;
 	let footer = 0;
-	const setPinned = (nextHeader = 0, nextFooter = 0) => {
-		header = nextHeader;
-		footer = nextFooter;
+	let currentSizes = null;
+	const sizes = [];
+	const offsets = [];
+	const autos = [];
+	const isMeasurable = (index) => isAuto || !!autos[index];
+	const materialize = () => {
+		if (!sizes.length) {
+			fill(sizes, length);
+		}
 	};
-	const getPinnedStart = (length) => min(header, length);
-	const getTrailStart = (length) => max(length - footer, getPinnedStart(length));
-	const pinRange = (getRange, getOffset, length, startOffset, endOffset) => {
-		const insetStart = getOffset(getPinnedStart(length));
-		const insetEnd = getOffset(length) - getOffset(getTrailStart(length));
-		const start = startOffset + (insetStart ? insetStart - gap : 0);
-		return getRange(start, max(start, endOffset - (insetEnd ? insetEnd - gap : 0)));
+	const getSize = (index) => {
+		const size = sizes[index];
+		return size === -1 ? defaultItemSize : size;
 	};
-	if (typeof size === "number") {
-		let length = getAxisLength(axis);
-		let itemSize = size;
-		const findIndex = (offset) => itemSize + gap ? clamp(floor(offset / (itemSize + gap)), 0, length - 1) : 0;
-		const getItemOffset = (index) => index * (itemSize + gap);
-		const findRange = (startOffset, endOffset) => [findIndex(startOffset), findIndex(endOffset)];
-		return {
-			$getRange: (startOffset, endOffset) => pinRange(findRange, getItemOffset, length, startOffset, endOffset),
-			$findIndex: findIndex,
-			$getItemOffset: getItemOffset,
-			$getItemSize: () => itemSize,
-			$setItemSize: () => false,
-			$isSizeEqual: () => false,
-			$getTotalSize: () => length ? length * (itemSize + gap) - gap : 0,
-			$getLength: () => length,
-			$setLength: (nextLength) => {
-				length = nextLength;
-				return 0;
-			},
-			$isMeasurable: () => false,
-			$setPinned: setPinned,
-			$getPinnedStart: () => getPinnedStart(length),
-			$getTrailStart: () => getTrailStart(length),
-			$setAxis: (_axis, nextSize, scrollOffset) => {
-				if (typeof nextSize !== "number" || nextSize === itemSize) {
-					return;
+	const getOffset = (index) => {
+		if (!length) return 0;
+		if (!sizes.length) {
+			return index * defaultItemSize;
+		}
+		if (computedOffsetIndex >= index) {
+			return offsets[index];
+		}
+		if (computedOffsetIndex < 0) {
+			offsets[0] = 0;
+			computedOffsetIndex = 0;
+		}
+		let i = computedOffsetIndex;
+		let top = offsets[i];
+		while (i < index) {
+			top += getSize(i);
+			offsets[++i] = top;
+		}
+		computedOffsetIndex = index;
+		return top;
+	};
+	const setSize = (index, size) => {
+		sizes[index] = size;
+		computedOffsetIndex = min(index, computedOffsetIndex);
+	};
+	const find = (offset) => sizes.length ? findIndex(getOffset, length, offset) : defaultItemSize ? clamp(floor(offset / defaultItemSize), 0, length - 1) : 0;
+	const getPinnedStart = () => min(header, length);
+	const getTrailStart = () => max(length - footer, getPinnedStart());
+	return {
+		$getRange: (startOffset, endOffset) => {
+			const insetStart = getOffset(getPinnedStart());
+			const insetEnd = getOffset(length) - getOffset(getTrailStart());
+			const start = startOffset + (insetStart ? insetStart - gap : 0);
+			return [find(start), find(max(start, endOffset - (insetEnd ? insetEnd - gap : 0)))];
+		},
+		$findIndex: find,
+		$getItemOffset: getOffset,
+		$getItemSize: (index) => (sizes.length ? getSize(index) : defaultItemSize) - gap,
+		$setItemSize: (index, size) => {
+			if (!isMeasurable(index)) {
+				return false;
+			}
+			materialize();
+			const isInitialMeasurement = sizes[index] === -1;
+			setSize(index, size + gap);
+			return isInitialMeasurement;
+		},
+		$isSizeEqual: (index, size) => (sizes.length ? sizes[index] : -1) === size + gap,
+		$getTotalSize: () => length ? getOffset(length) - gap : 0,
+		$getLength: () => length,
+		$setLength: (nextLength) => {
+			const diff = nextLength - length;
+			computedOffsetIndex = min(nextLength - 1, computedOffsetIndex);
+			length = nextLength;
+			if (sizes.length) {
+				if (diff > 0) {
+					fill(sizes, diff);
+				} else {
+					sizes.splice(diff);
 				}
-				const jump = findIndex(scrollOffset) * (nextSize - itemSize);
-				itemSize = nextSize;
-				return jump;
 			}
-		};
-	}
-	const isAuto = size === "auto";
-	let currentAxis;
-	let currentSize = size;
-	const length = getAxisLength(axis);
-	const autos = [];
-	const inner = createListLayout(length, undefined, [[], 40 + gap]);
-	const isMeasurable = (index) => isAuto || !!autos[index];
-	const layout = {
-		$getRange: (startOffset, endOffset) => pinRange(inner.$getRange, inner.$getItemOffset, inner.$getLength(), startOffset, endOffset),
-		$findIndex: inner.$findIndex,
-		$getItemOffset: inner.$getItemOffset,
-		$getItemSize: (index) => inner.$getItemSize(index) - gap,
-		$setItemSize: (index, s) => isMeasurable(index) && inner.$setItemSize(index, s + gap),
-		$isSizeEqual: (index, s) => inner.$isSizeEqual(index, s + gap),
-		$getTotalSize: () => inner.$getLength() ? inner.$getTotalSize() - gap : 0,
-		$getLength: inner.$getLength,
-		$setLength: inner.$setLength,
-		$estimateDefaultSize: isAuto ? inner.$estimateDefaultSize : undefined,
+			return 0;
+		},
+		$estimateDefaultSize: isAuto ? (startIndex) => {
+			let measuredCountBeforeStart = 0;
+			const measuredSizes = [];
+			sizes.forEach((s, i) => {
+				if (s !== -1) {
+					if (s) {
+						measuredSizes.push(s);
+					}
+					if (i < startIndex) {
+						measuredCountBeforeStart++;
+					}
+				}
+			});
+			computedOffsetIndex = -1;
+			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 prevDefaultItemSize = defaultItemSize;
+			return ((defaultItemSize = median) - prevDefaultItemSize) * max(startIndex - measuredCountBeforeStart, 0);
+		} : undefined,
 		$isMeasurable: isMeasurable,
-		$setPinned: setPinned,
-		$getPinnedStart: () => getPinnedStart(inner.$getLength()),
-		$getTrailStart: () => getTrailStart(inner.$getLength()),
-		$setAxis: (nextAxis, requestedSize, scrollOffset, mutable) => {
-			if (isAuto) {
+		$setPinned: (nextHeader = 0, nextFooter = 0) => {
+			header = nextHeader;
+			footer = nextFooter;
+		},
+		$getPinnedStart: getPinnedStart,
+		$getTrailStart: getTrailStart,
+		$getSizes: (nextAxis, nextSize) => typeof nextSize === "number" ? isUniform ? nextSize : null : isUniform || isAuto || nextSize === "auto" ? null : nextAxis.map((item) => item != null ? item[nextSize] : null),
+		$setAxis: (nextSizes, scrollOffset) => {
+			if (nextSizes == null) {
 				return;
 			}
-			const nextSize = typeof requestedSize === "number" || requestedSize === "auto" ? currentSize : requestedSize;
-			const length = inner.$getLength();
-			if (!mutable && nextAxis === currentAxis && nextSize === currentSize && length === autos.length) {
+			if (typeof nextSizes === "number") {
+				const nextDefaultItemSize = nextSizes + gap;
+				if (nextDefaultItemSize === defaultItemSize) {
+					return;
+				}
+				const jump = find(scrollOffset) * (nextDefaultItemSize - defaultItemSize);
+				defaultItemSize = nextDefaultItemSize;
+				return jump;
+			}
+			if (nextSizes === currentSizes && length === autos.length) {
 				return;
 			}
-			currentAxis = nextAxis;
-			currentSize = nextSize;
+			currentSizes = nextSizes;
 			autos.length = length;
-			const anchorIndex = inner.$findIndex(scrollOffset);
-			const prevOffset = inner.$getItemOffset(anchorIndex);
+			materialize();
+			const anchorIndex = find(scrollOffset);
+			const prevOffset = getOffset(anchorIndex);
 			let changed;
 			for (let i = 0; i < length; i++) {
-				const item = nextAxis[i];
-				const itemSize = item !== null && typeof item === "object" ? item[nextSize] : null;
+				const itemSize = nextSizes[i];
 				const isAutoItem = typeof itemSize !== "number";
 				if (!isAutoItem || !autos[i]) {
 					autos[i] = isAutoItem;
 					const target = isAutoItem ? -1 : itemSize + gap;
-					if (!inner.$isSizeEqual(i, target)) {
-						inner.$setItemSize(i, target);
+					if (sizes[i] !== target) {
+						setSize(i, target);
 						changed = true;
 					}
 				}
@@ -505,28 +555,40 @@ var createGridLayout = (axis, size, gap = 0) => {
 			if (!changed) {
 				return;
 			}
-			return inner.$getItemOffset(anchorIndex) - prevOffset;
+			return getOffset(anchorIndex) - prevOffset;
 		}
 	};
-	layout.$setAxis(axis, size, 0);
-	return layout;
 };
 
 //#endregion
 //#region src/core/grid.ts
-var updateGridAxis = (store, layout, axis, size, header, footer, mutable) => {
+var updateGridAxis = (store, layout, axis, sizes, header, footer) => {
 	const length = getAxisLength(axis);
 	layout.$setPinned(header, footer);
 	if (length !== store.$getItemsLength()) {
 		store.$update(5, [length]);
 	}
-	const jump = layout.$setAxis(axis, size, store.$getScrollOffset() - store.$getItemOffset(0), mutable);
+	const jump = layout.$setAxis(sizes, store.$getScrollOffset() - store.$getItemOffset(0));
 	if (jump != null) {
 		store.$update(9, jump);
 	}
 };
 var rowStatesCache = /*#__PURE__*/ new WeakMap();
-var hasVisibleTrack = (from, to, pinnedStart, start, end, trailStart) => from < pinnedStart || max(from, start) < min(to, end + 1) || trailStart < to;
+var createGridSpanIndex = (spans = EMPTY) => {
+	const index = new Map();
+	for (const span of spans) {
+		const rowTo = span.rowIndex + (span.rowSpan || 1);
+		for (let rowIndex = span.rowIndex; rowIndex < rowTo; rowIndex++) {
+			const rowSpans = index.get(rowIndex);
+			if (rowSpans) {
+				rowSpans.push(span);
+			} else {
+				index.set(rowIndex, [span]);
+			}
+		}
+	}
+	return index;
+};
 var getSectionStarts = (sectionRows, pinnedStart, trailStart) => {
 	const starts = [];
 	for (const rowIndex of sectionRows) {
@@ -615,17 +677,17 @@ var gridStyleToString = (style) => {
 	}
 	return css;
 };
-var createGridPlan = (rowLayout, colLayout, rowRange, colRange, sectionRows = EMPTY, spans = EMPTY, kept = EMPTY, sortedCell) => {
+var createGridPlan = (rowLayout, colLayout, [rowRangeStart, rowRangeEnd], [colRangeStart, colRangeEnd], spanIndex, sectionRows = EMPTY, kept = EMPTY, sortedCell) => {
 	const totalRowCount = rowLayout.$getLength();
 	const totalColCount = colLayout.$getLength();
 	const rowPinnedStart = rowLayout.$getPinnedStart();
 	const rowTrailStart = rowLayout.$getTrailStart();
 	const colPinnedStart = colLayout.$getPinnedStart();
 	const colTrailStart = colLayout.$getTrailStart();
-	const rowRangeStart = clamp(rowRange[0], rowPinnedStart, rowTrailStart);
-	const rowRangeEnd = min(rowRange[1], rowTrailStart - 1);
-	const colRangeStart = clamp(colRange[0], colPinnedStart, colTrailStart);
-	const colRangeEnd = min(colRange[1], colTrailStart - 1);
+	rowRangeStart = clamp(rowRangeStart, rowPinnedStart, rowTrailStart);
+	rowRangeEnd = min(rowRangeEnd, rowTrailStart - 1);
+	colRangeStart = clamp(colRangeStart, colPinnedStart, colTrailStart);
+	colRangeEnd = min(colRangeEnd, colTrailStart - 1);
 	const sectionStarts = getSectionStarts(sectionRows, rowPinnedStart, rowTrailStart);
 	const rowHeaderCol = max(colPinnedStart - 1, 0);
 	const extraRows = [];
@@ -634,28 +696,30 @@ var createGridPlan = (rowLayout, colLayout, rowRange, colRange, sectionRows = EM
 	for (const cell of kept) {
 		if (cell.rowIndex < totalRowCount && cell.colIndex < totalColCount) {
 			extraCells.push(cell);
+			extraRows.push(cell.rowIndex);
 		}
 	}
 	const keptLength = extraCells.length;
-	const sectionLength = sectionStarts.length;
 	const firstSection = getSectionIndex(sectionStarts, rowRangeStart, rowTrailStart);
 	const firstSectionStart = firstSection < 0 ? -1 : sectionStarts[firstSection];
 	if (firstSectionStart >= 0) {
 		extraRows.push(firstSectionStart);
 	}
-	for (const span of spans) {
-		const row = span.rowIndex;
-		const col = span.colIndex;
-		const rowTo = getSpanRowEnd(span, totalRowCount);
-		const colTo = getSpanColEnd(span, totalColCount);
-		if (row < totalRowCount && col < totalColCount && (rowTo - row > 1 || colTo - col > 1)) {
-			let isLaid = (hasVisibleTrack(row, rowTo, rowPinnedStart, rowRangeStart, rowRangeEnd, rowTrailStart) || firstSectionStart >= row && firstSectionStart < rowTo) && hasVisibleTrack(col, colTo, colPinnedStart, colRangeStart, colRangeEnd, colTrailStart);
-			for (let k = 0; !isLaid && k < keptLength; k++) {
-				const { rowIndex, colIndex } = extraCells[k];
-				isLaid = rowIndex >= row && rowIndex < rowTo && colIndex >= col && colIndex < colTo;
-			}
-			if (isLaid) {
-				extraCells.push(span);
+	const seenRows = getTrackIndexes(sort(extraRows), totalRowCount, rowPinnedStart, rowRangeStart, rowRangeEnd, rowTrailStart);
+	for (let s = 0; s < seenRows.length; s++) {
+		for (const span of spanIndex.get(seenRows[s]) || EMPTY) {
+			const { rowIndex, colIndex } = span;
+			const rowTo = getSpanRowEnd(span, totalRowCount);
+			const colTo = getSpanColEnd(span, totalColCount);
+			if ((s < 1 || seenRows[s - 1] < rowIndex) && colIndex < totalColCount && (rowTo - rowIndex > 1 || colTo - colIndex > 1)) {
+				let isLaid = (rowIndex < rowPinnedStart || max(rowIndex, rowRangeStart) < min(rowTo, rowRangeEnd + 1) || rowTrailStart < rowTo || firstSectionStart >= rowIndex && firstSectionStart < rowTo) && (colIndex < colPinnedStart || max(colIndex, colRangeStart) < min(colTo, colRangeEnd + 1) || colTrailStart < colTo);
+				for (let k = 0; !isLaid && k < keptLength; k++) {
+					const cell = extraCells[k];
+					isLaid = cell.rowIndex >= rowIndex && cell.rowIndex < rowTo && cell.colIndex >= colIndex && cell.colIndex < colTo;
+				}
+				if (isLaid) {
+					extraCells.push(span);
+				}
 			}
 		}
 	}
@@ -705,7 +769,7 @@ var createGridPlan = (rowLayout, colLayout, rowRange, colRange, sectionRows = EM
 		const section = getSectionIndex(sectionStarts, rowIndex, rowTrailStart);
 		const groupStart = isRowPinnedStart ? 0 : isRowPinnedEnd ? rowTrailStart : section < 0 ? -1 : sectionStarts[section];
 		if (rowIndex === groupStart) {
-			const groupEnd = isRowPinnedStart ? rowPinnedStart : isRowPinnedEnd ? totalRowCount : section + 1 < sectionLength ? sectionStarts[section + 1] : rowTrailStart;
+			const groupEnd = isRowPinnedStart ? rowPinnedStart : isRowPinnedEnd ? totalRowCount : section + 1 < sectionStarts.length ? sectionStarts[section + 1] : rowTrailStart;
 			rowCuts.push(groupEnd);
 			const groupedRows = [];
 			groups.push({
@@ -746,7 +810,7 @@ var createGridPlan = (rowLayout, colLayout, rowRange, colRange, sectionRows = EM
 				let measureColIndex;
 				rowEnd = max(rowEnd, rowTo);
 				const stickyStart = isColPinnedStart ? colLayout.$getItemOffset(colIndex) : null;
-				const stickyEnd = isColPinnedEnd ? colLayout.$getTotalSize() - colLayout.$getItemOffset(colTo - 1) - colLayout.$getItemSize(colTo - 1) : null;
+				const stickyEnd = isColPinnedEnd ? colLayout.$getItemOffset(totalColCount) - colLayout.$getItemOffset(colTo) : null;
 				if (measuredRow === false && !isSpanningRows) {
 					measureRowIndex = rowIndex;
 					measuredRow = true;
@@ -1714,6 +1778,9 @@ var VGrid = (props) => {
 	]);
 	const rowLayout = createGridLayout(rows, rowHeight, gap);
 	const colLayout = createGridLayout(cols, colWidth, gap);
+	const rowSizes = createMemo(() => rowLayout.$getSizes(props.rows, props.rowHeight));
+	const colSizes = createMemo(() => colLayout.$getSizes(props.cols, props.colWidth));
+	const spanIndex = createMemo(() => createGridSpanIndex(props.spans));
 	const rowStore = createVirtualStore(rowLayout);
 	const colStore = createVirtualStore(colLayout);
 	const driver = createContainerGridDriver(rowStore, colStore);
@@ -1740,16 +1807,16 @@ var VGrid = (props) => {
 	rowStore.$subscribe(8, notifyScrollEnd);
 	colStore.$subscribe(8, notifyScrollEnd);
 	createComputed(() => {
-		updateGridAxis(rowStore, rowLayout, props.rows, props.rowHeight, props.headerRows, props.footerRows, true);
+		updateGridAxis(rowStore, rowLayout, props.rows, rowSizes(), props.headerRows, props.footerRows);
 	});
 	createComputed(() => {
-		updateGridAxis(colStore, colLayout, props.cols, props.colWidth, props.headerCols, props.footerCols, true);
+		updateGridAxis(colStore, colLayout, props.cols, colSizes(), props.headerCols, props.footerCols);
 	});
 	const rowCount = createMemo(() => stateVersion() && rowStore.$getItemsLength());
 	const colCount = createMemo(() => stateVersion() && colStore.$getItemsLength());
 	const plan = createMemo(() => {
 		stateVersion();
-		return createGridPlan(rowLayout, colLayout, rowStore.$getRange(props.bufferSize), colStore.$getRange(props.bufferSize), props.sectionRows, props.spans, props.keepMounted, props.ariaSort);
+		return createGridPlan(rowLayout, colLayout, rowStore.$getRange(props.bufferSize), colStore.$getRange(props.bufferSize), spanIndex(), props.sectionRows, props.keepMounted, props.ariaSort);
 	});
 	const keys = createMemo(() => plan().$groups.map((state) => "$rows" in state ? state.$key : state.$row));
 	const isScrolling = createMemo(() => stateVersion() && (rowStore.$isScrolling() || colStore.$isScrolling()));