@univerjs/engine-render 0.22.1 → 0.23.0

package/lib/es/index.js

@@ -5445,36 +5445,38 @@ var Custom = class extends SheetExtension {
 		if (!worksheet) return;
 		const mergeCellRendered = /* @__PURE__ */ new Set();
 		const subUnitId = worksheet.getSheetId();
-		Range.foreach(rowColumnSegment, (row, col) => {
-			if (!worksheet.getRowVisible(row) || !worksheet.getColVisible(col)) return;
-			let primaryWithCoord = skeleton.getCellWithCoordByIndex(row, col, false);
-			const { mergeInfo } = primaryWithCoord;
-			let cellData = worksheet.getCell(row, col);
-			if (primaryWithCoord.isMerged) cellData = worksheet.getCell(mergeInfo.startRow, mergeInfo.startColumn);
-			if (!(cellData === null || cellData === void 0 ? void 0 : cellData.customRender)) return;
-			if (!this.isRenderDiffRangesByRow(mergeInfo.startRow, mergeInfo.endRow, diffRanges)) return true;
-			if (primaryWithCoord.isMerged || primaryWithCoord.isMergedMainCell) {
-				const rangeStr = stringifyRange$1(mergeInfo);
-				if (mergeCellRendered.has(rangeStr)) return;
-				mergeCellRendered.add(rangeStr);
-			}
-			if (primaryWithCoord.isMerged) primaryWithCoord = skeleton.getCellWithCoordByIndex(mergeInfo.startRow, mergeInfo.startColumn, false);
-			const renderInfo = {
-				data: cellData,
-				style: skeleton.getStyles().getStyleByCell(cellData),
-				primaryWithCoord,
-				subUnitId,
-				row,
-				col,
-				worksheet,
-				unitId: worksheet.unitId
-			};
-			const customRender = cellData.customRender.sort(sortRules);
-			ctx.save();
-			customRender.forEach((item) => {
-				item.drawWith(ctx, renderInfo, skeleton, this.parent);
+		((diffRanges === null || diffRanges === void 0 ? void 0 : diffRanges.length) ? diffRanges : [rowColumnSegment]).forEach((range) => {
+			Range.foreach(range, (row, col) => {
+				if (!worksheet.getRowVisible(row) || !worksheet.getColVisible(col)) return;
+				let primaryWithCoord = skeleton.getCellWithCoordByIndex(row, col, false);
+				const { mergeInfo } = primaryWithCoord;
+				let cellData = worksheet.getCell(row, col);
+				if (primaryWithCoord.isMerged) cellData = worksheet.getCell(mergeInfo.startRow, mergeInfo.startColumn);
+				if (!(cellData === null || cellData === void 0 ? void 0 : cellData.customRender)) return;
+				if (!this.isRenderDiffRangesByRow(mergeInfo.startRow, mergeInfo.endRow, diffRanges)) return true;
+				if (primaryWithCoord.isMerged || primaryWithCoord.isMergedMainCell) {
+					const rangeStr = stringifyRange$1(mergeInfo);
+					if (mergeCellRendered.has(rangeStr)) return;
+					mergeCellRendered.add(rangeStr);
+				}
+				if (primaryWithCoord.isMerged) primaryWithCoord = skeleton.getCellWithCoordByIndex(mergeInfo.startRow, mergeInfo.startColumn, false);
+				const renderInfo = {
+					data: cellData,
+					style: skeleton.getStyles().getStyleByCell(cellData),
+					primaryWithCoord,
+					subUnitId,
+					row,
+					col,
+					worksheet,
+					unitId: worksheet.unitId
+				};
+				const customRender = cellData.customRender.sort(sortRules);
+				ctx.save();
+				customRender.forEach((item) => {
+					item.drawWith(ctx, renderInfo, skeleton, this.parent);
+				});
+				ctx.restore();
 			});
-			ctx.restore();
 		});
 	}
 };
@@ -17265,54 +17267,58 @@ let SpreadsheetSkeleton = class SpreadsheetSkeleton extends SheetSkeleton {
 	* @param vpInfo viewBounds
 	*/
 	setStylesCache(vpInfo) {
+		var _vpInfo$diffBounds, _vpInfo$diffCacheBoun, _vpInfo$diffCacheBoun2, _vpInfo$diffCacheBoun3;
 		if (!this._worksheetData) return;
 		if (!this.rowHeightAccumulation || !this.columnWidthAccumulation) return;
 		this.updateVisibleRange(vpInfo);
 		const rowColumnSegment = this._drawingRange;
 		const columnWidthAccumulation = this.columnWidthAccumulation;
-		const { startRow: visibleStartRow, endRow: visibleEndRow, startColumn: visibleStartColumn, endColumn: visibleEndColumn } = rowColumnSegment;
-		if (visibleEndColumn === -1 || visibleEndRow === -1) return;
-		const mergeVisibleRanges = [];
-		let mergeVisibleRangeStartRow = visibleStartRow;
-		const expandStartCol = Math.max(0, visibleStartColumn - 20);
-		const expandEndCol = Math.min(columnWidthAccumulation.length - 1, visibleEndColumn + 20);
-		for (let r = visibleStartRow; r <= visibleEndRow; r++) {
-			if (this.worksheet.getRowVisible(r) === false) {
-				if (mergeVisibleRangeStartRow < r) mergeVisibleRanges.push({
+		const styleRanges = !!vpInfo && !vpInfo.isDirty && !vpInfo.isForceDirty && (!!((_vpInfo$diffBounds = vpInfo.diffBounds) === null || _vpInfo$diffBounds === void 0 ? void 0 : _vpInfo$diffBounds.length) || !!((_vpInfo$diffCacheBoun = vpInfo.diffCacheBounds) === null || _vpInfo$diffCacheBoun === void 0 ? void 0 : _vpInfo$diffCacheBoun.length) || !!vpInfo.diffX || !!vpInfo.diffY) ? vpInfo.shouldCacheUpdate ? (_vpInfo$diffCacheBoun2 = (_vpInfo$diffCacheBoun3 = vpInfo.diffCacheBounds) === null || _vpInfo$diffCacheBoun3 === void 0 ? void 0 : _vpInfo$diffCacheBoun3.map((bound) => this.getRangeByViewBound(bound))) !== null && _vpInfo$diffCacheBoun2 !== void 0 ? _vpInfo$diffCacheBoun2 : [] : [] : [rowColumnSegment];
+		for (const styleRange of styleRanges) {
+			const { startRow: visibleStartRow, endRow: visibleEndRow, startColumn: visibleStartColumn, endColumn: visibleEndColumn } = styleRange;
+			if (visibleEndColumn === -1 || visibleEndRow === -1) continue;
+			const mergeVisibleRanges = [];
+			let mergeVisibleRangeStartRow = visibleStartRow;
+			const expandStartCol = Math.max(0, visibleStartColumn - 20);
+			const expandEndCol = Math.min(columnWidthAccumulation.length - 1, visibleEndColumn + 20);
+			for (let r = visibleStartRow; r <= visibleEndRow; r++) {
+				if (this.worksheet.getRowVisible(r) === false) {
+					if (mergeVisibleRangeStartRow < r) mergeVisibleRanges.push({
+						startRow: mergeVisibleRangeStartRow,
+						endRow: r - 1,
+						startColumn: visibleStartColumn,
+						endColumn: visibleEndColumn
+					});
+					mergeVisibleRangeStartRow = r + 1;
+					continue;
+				}
+				if (r === visibleEndRow) mergeVisibleRanges.push({
 					startRow: mergeVisibleRangeStartRow,
-					endRow: r - 1,
+					endRow: r,
 					startColumn: visibleStartColumn,
 					endColumn: visibleEndColumn
 				});
-				mergeVisibleRangeStartRow = r + 1;
-				continue;
+				for (let c = visibleStartColumn; c <= visibleEndColumn; c++) this._setStylesCacheForOneCell(r, c, { cacheItem: {
+					bg: true,
+					border: true
+				} });
+				for (let c = expandStartCol; c < visibleEndColumn; c++) this._setStylesCacheForOneCell(r, c, { cacheItem: {
+					bg: false,
+					border: false
+				} });
+				if (visibleEndColumn === 0) continue;
+				for (let c = visibleEndColumn + 1; c < expandEndCol; c++) this._setStylesCacheForOneCell(r, c, { cacheItem: {
+					bg: false,
+					border: false
+				} });
 			}
-			if (r === visibleEndRow) mergeVisibleRanges.push({
-				startRow: mergeVisibleRangeStartRow,
-				endRow: r,
-				startColumn: visibleStartColumn,
-				endColumn: visibleEndColumn
-			});
-			for (let c = visibleStartColumn; c <= visibleEndColumn; c++) this._setStylesCacheForOneCell(r, c, { cacheItem: {
-				bg: true,
-				border: true
-			} });
-			for (let c = expandStartCol; c < visibleEndColumn; c++) this._setStylesCacheForOneCell(r, c, { cacheItem: {
-				bg: false,
-				border: false
-			} });
-			if (visibleEndColumn === 0) continue;
-			for (let c = visibleEndColumn + 1; c < expandEndCol; c++) this._setStylesCacheForOneCell(r, c, { cacheItem: {
-				bg: false,
-				border: false
-			} });
-		}
-		const mergeRanges = [];
-		for (const mergeVisibleRange of mergeVisibleRanges) {
-			const mergeRangeInVisible = this.getCurrentRowColumnSegmentMergeData(mergeVisibleRange);
-			mergeRanges.push(...mergeRangeInVisible);
+			const mergeRanges = [];
+			for (const mergeVisibleRange of mergeVisibleRanges) {
+				const mergeRangeInVisible = this.getCurrentRowColumnSegmentMergeData(mergeVisibleRange);
+				mergeRanges.push(...mergeRangeInVisible);
+			}
+			for (const mergeRange of mergeRanges) this._setStylesCacheForOneCell(mergeRange.startRow, mergeRange.startColumn, { mergeRange });
 		}
-		for (const mergeRange of mergeRanges) this._setStylesCacheForOneCell(mergeRange.startRow, mergeRange.startColumn, { mergeRange });
 		return this;
 	}
 	/**
@@ -18279,12 +18285,19 @@ var Font = class extends SheetExtension {
 		if (!rowHeightAccumulation || !columnWidthAccumulation || columnTotalWidth === void 0 || rowTotalHeight === void 0 || !worksheet) return;
 		const scale = this._getScale(parentScale);
 		const { viewRanges = [], checkOutOfViewBound } = moreBoundsInfo;
+		const lastRowIndex = spreadsheetSkeleton.getRowCount() - 1;
+		const lastColIndex = spreadsheetSkeleton.getColumnCount() - 1;
+		const expandedViewRanges = viewRanges.map((range) => clampRange({
+			...range,
+			startColumn: range.startColumn - 20,
+			endColumn: range.endColumn + 20
+		}, lastRowIndex, lastColIndex));
 		const renderFontContext = {
 			ctx,
 			scale,
 			columnTotalWidth,
 			rowTotalHeight,
-			viewRanges,
+			viewRanges: expandedViewRanges,
 			checkOutOfViewBound: checkOutOfViewBound || true,
 			diffRanges,
 			spreadsheetSkeleton
@@ -18292,12 +18305,7 @@ var Font = class extends SheetExtension {
 		ctx.save();
 		const uniqueMergeRanges = [];
 		const mergeRangeIDSet = /* @__PURE__ */ new Set();
-		const lastRowIndex = spreadsheetSkeleton.getRowCount() - 1;
-		const lastColIndex = spreadsheetSkeleton.getColumnCount() - 1;
-		viewRanges.forEach((range) => {
-			range.startColumn -= 20;
-			range.endColumn += 20;
-			range = clampRange(range, lastRowIndex, lastColIndex);
+		expandedViewRanges.forEach((range) => {
 			spreadsheetSkeleton.worksheet.getMergedCellRange(range.startRow, range.startColumn, range.endRow, range.endColumn).forEach((mergeRange) => {
 				const mergeRangeIndex = spreadsheetSkeleton.worksheet.getSpanModel().getMergeDataIndex(mergeRange.startRow, mergeRange.startColumn);
 				if (!mergeRangeIDSet.has(mergeRangeIndex)) {
@@ -18625,93 +18633,95 @@ var Marker = class extends SheetExtension {
 		const { worksheet, rowColumnSegment } = skeleton;
 		if (!worksheet) return;
 		const mergeCellRendered = /* @__PURE__ */ new Set();
-		Range.foreach(rowColumnSegment, (row, col) => {
-			var _cellData$markers, _cellData$markers2, _cellData$markers3, _cellData$markers4;
-			if (!worksheet.getRowVisible(row) || !worksheet.getColVisible(col)) return;
-			let cellData = worksheet.getCell(row, col);
-			const cellInfo = skeleton.getCellWithCoordByIndex(row, col, false);
-			const { isMerged, isMergedMainCell, mergeInfo } = cellInfo;
-			let { startY, endY, startX, endX } = cellInfo;
-			if (isMergedMainCell || isMerged) {
-				startY = mergeInfo.startY;
-				endY = mergeInfo.endY;
-				startX = mergeInfo.startX;
-				endX = mergeInfo.endX;
-			}
-			if (isMerged) {
-				const mainCell = {
-					row: mergeInfo.startRow,
-					col: mergeInfo.startColumn
-				};
-				cellData = worksheet.getCell(mainCell.row, mainCell.col);
-			}
-			if (!this.isRenderDiffRangesByRow(mergeInfo.startRow, mergeInfo.endRow, diffRanges)) return true;
-			if (cellInfo.isMerged || cellInfo.isMergedMainCell) {
-				const rangeStr = stringifyRange(mergeInfo);
-				if (mergeCellRendered.has(rangeStr)) return;
-				mergeCellRendered.add(rangeStr);
-			}
-			if (!cellData) return;
-			if ((_cellData$markers = cellData.markers) === null || _cellData$markers === void 0 ? void 0 : _cellData$markers.tr) {
-				ctx.save();
-				const marker = cellData.markers.tr;
-				const x = endX;
-				const y = startY;
-				ctx.fillStyle = marker.color;
-				ctx.moveTo(x, y);
-				ctx.beginPath();
-				ctx.lineTo(x - marker.size, y);
-				ctx.lineTo(x, y + marker.size);
-				ctx.lineTo(x, y);
-				ctx.closePath();
-				ctx.fill();
-				ctx.restore();
-			}
-			if ((_cellData$markers2 = cellData.markers) === null || _cellData$markers2 === void 0 ? void 0 : _cellData$markers2.tl) {
-				ctx.save();
-				const marker = cellData.markers.tl;
-				const x = startX;
-				const y = startY;
-				ctx.fillStyle = marker.color;
-				ctx.moveTo(x, y);
-				ctx.beginPath();
-				ctx.lineTo(x + marker.size, y);
-				ctx.lineTo(x, y + marker.size);
-				ctx.lineTo(x, y);
-				ctx.closePath();
-				ctx.fill();
-				ctx.restore();
-			}
-			if ((_cellData$markers3 = cellData.markers) === null || _cellData$markers3 === void 0 ? void 0 : _cellData$markers3.br) {
-				ctx.save();
-				const marker = cellData.markers.br;
-				const x = endX;
-				const y = endY;
-				ctx.fillStyle = marker.color;
-				ctx.moveTo(x, y);
-				ctx.beginPath();
-				ctx.lineTo(x - marker.size, y);
-				ctx.lineTo(x, y - marker.size);
-				ctx.lineTo(x, y);
-				ctx.closePath();
-				ctx.fill();
-				ctx.restore();
-			}
-			if ((_cellData$markers4 = cellData.markers) === null || _cellData$markers4 === void 0 ? void 0 : _cellData$markers4.bl) {
-				ctx.save();
-				const marker = cellData.markers.bl;
-				const x = startX;
-				const y = endY;
-				ctx.fillStyle = marker.color;
-				ctx.moveTo(x, y);
-				ctx.beginPath();
-				ctx.lineTo(x + marker.size, y);
-				ctx.lineTo(x, y - marker.size);
-				ctx.lineTo(x, y);
-				ctx.closePath();
-				ctx.fill();
-				ctx.restore();
-			}
+		((diffRanges === null || diffRanges === void 0 ? void 0 : diffRanges.length) ? diffRanges : [rowColumnSegment]).forEach((range) => {
+			Range.foreach(range, (row, col) => {
+				var _cellData$markers, _cellData$markers2, _cellData$markers3, _cellData$markers4;
+				if (!worksheet.getRowVisible(row) || !worksheet.getColVisible(col)) return;
+				let cellData = worksheet.getCell(row, col);
+				const cellInfo = skeleton.getCellWithCoordByIndex(row, col, false);
+				const { isMerged, isMergedMainCell, mergeInfo } = cellInfo;
+				let { startY, endY, startX, endX } = cellInfo;
+				if (isMergedMainCell || isMerged) {
+					startY = mergeInfo.startY;
+					endY = mergeInfo.endY;
+					startX = mergeInfo.startX;
+					endX = mergeInfo.endX;
+				}
+				if (isMerged) {
+					const mainCell = {
+						row: mergeInfo.startRow,
+						col: mergeInfo.startColumn
+					};
+					cellData = worksheet.getCell(mainCell.row, mainCell.col);
+				}
+				if (!this.isRenderDiffRangesByRow(mergeInfo.startRow, mergeInfo.endRow, diffRanges)) return true;
+				if (cellInfo.isMerged || cellInfo.isMergedMainCell) {
+					const rangeStr = stringifyRange(mergeInfo);
+					if (mergeCellRendered.has(rangeStr)) return;
+					mergeCellRendered.add(rangeStr);
+				}
+				if (!cellData) return;
+				if ((_cellData$markers = cellData.markers) === null || _cellData$markers === void 0 ? void 0 : _cellData$markers.tr) {
+					ctx.save();
+					const marker = cellData.markers.tr;
+					const x = endX;
+					const y = startY;
+					ctx.fillStyle = marker.color;
+					ctx.moveTo(x, y);
+					ctx.beginPath();
+					ctx.lineTo(x - marker.size, y);
+					ctx.lineTo(x, y + marker.size);
+					ctx.lineTo(x, y);
+					ctx.closePath();
+					ctx.fill();
+					ctx.restore();
+				}
+				if ((_cellData$markers2 = cellData.markers) === null || _cellData$markers2 === void 0 ? void 0 : _cellData$markers2.tl) {
+					ctx.save();
+					const marker = cellData.markers.tl;
+					const x = startX;
+					const y = startY;
+					ctx.fillStyle = marker.color;
+					ctx.moveTo(x, y);
+					ctx.beginPath();
+					ctx.lineTo(x + marker.size, y);
+					ctx.lineTo(x, y + marker.size);
+					ctx.lineTo(x, y);
+					ctx.closePath();
+					ctx.fill();
+					ctx.restore();
+				}
+				if ((_cellData$markers3 = cellData.markers) === null || _cellData$markers3 === void 0 ? void 0 : _cellData$markers3.br) {
+					ctx.save();
+					const marker = cellData.markers.br;
+					const x = endX;
+					const y = endY;
+					ctx.fillStyle = marker.color;
+					ctx.moveTo(x, y);
+					ctx.beginPath();
+					ctx.lineTo(x - marker.size, y);
+					ctx.lineTo(x, y - marker.size);
+					ctx.lineTo(x, y);
+					ctx.closePath();
+					ctx.fill();
+					ctx.restore();
+				}
+				if ((_cellData$markers4 = cellData.markers) === null || _cellData$markers4 === void 0 ? void 0 : _cellData$markers4.bl) {
+					ctx.save();
+					const marker = cellData.markers.bl;
+					const x = startX;
+					const y = endY;
+					ctx.fillStyle = marker.color;
+					ctx.moveTo(x, y);
+					ctx.beginPath();
+					ctx.lineTo(x + marker.size, y);
+					ctx.lineTo(x, y - marker.size);
+					ctx.lineTo(x, y);
+					ctx.closePath();
+					ctx.fill();
+					ctx.restore();
+				}
+			});
 		});
 	}
 };
@@ -22060,20 +22070,28 @@ var Spreadsheet = class extends SheetComponent {
 		this._drawAuxiliary(ctx);
 		const parentScale = this.getParentScale();
 		const diffRanges = this._refreshIncrementalState && viewportInfo.diffBounds ? (_viewportInfo$diffBou = viewportInfo.diffBounds) === null || _viewportInfo$diffBou === void 0 ? void 0 : _viewportInfo$diffBou.map((bound) => spreadsheetSkeleton.getRangeByViewBound(bound)) : [];
-		const viewRanges = [spreadsheetSkeleton.getCacheRangeByViewport(viewportInfo, this.isPrinting)];
+		const cacheRange = spreadsheetSkeleton.getCacheRangeByViewport(viewportInfo, this.isPrinting);
+		const viewRanges = this._refreshIncrementalState && diffRanges.length > 0 ? diffRanges : [cacheRange];
+		const overflowSafeViewRanges = this._refreshIncrementalState && diffRanges.length > 0 ? diffRanges.map((range) => ({
+			...range,
+			startColumn: cacheRange.startColumn,
+			endColumn: cacheRange.endColumn
+		})) : viewRanges;
 		const extensions = this.getExtensionsByOrder();
 		const scene = this.getScene();
 		for (const extension of extensions) {
+			const extensionViewRanges = extension === this._fontExtension || extension === this._borderExtension ? overflowSafeViewRanges : viewRanges;
 			const timeKey = `${SHEET_EXTENSION_PREFIX}${extension.uKey}`;
 			const st = Tools.now();
 			extension.draw(ctx, parentScale, spreadsheetSkeleton, diffRanges, {
-				viewRanges,
+				viewRanges: extensionViewRanges,
 				checkOutOfViewBound: true,
 				viewportKey: viewportInfo.viewportKey,
 				viewBound: viewportInfo.cacheBound,
 				diffBounds: viewportInfo.diffBounds
 			});
-			this.addRenderFrameTimeMetricToScene(timeKey, Tools.now() - st, scene);
+			const cost = Tools.now() - st;
+			this.addRenderFrameTimeMetricToScene(timeKey, cost, scene);
 		}
 	}
 	addRenderFrameTimeMetricToScene(timeKey, val, scene) {
@@ -24445,7 +24463,7 @@ Engine = __decorate([__decorateParam(2, ICanvasColorService)], Engine);
 //#endregion
 //#region package.json
 var name = "@univerjs/engine-render";
-var version = "0.22.1";
+var version = "0.23.0";
 
 //#endregion
 //#region src/config/config.ts