@univerjs/engine-render 0.22.1 → 0.23.0-insiders.20260522-e8f2a3b

package/lib/cjs/index.js

@@ -4715,8 +4715,9 @@ var SpreadsheetColumnHeader = class extends SpreadsheetHeader {
 		const segment = spreadsheetSkeleton.rowColumnSegment;
 		if (!segment) return;
 		if (segment.startColumn === -1 && segment.endColumn === -1) return;
-		const { rowHeaderWidth } = spreadsheetSkeleton;
-		ctx.translateWithPrecision(rowHeaderWidth, 0);
+		const { columnHeaderHeight, columnHeaderHeightAndMarginTop, rowHeaderWidthAndMarginLeft } = spreadsheetSkeleton;
+		const marginTop = columnHeaderHeightAndMarginTop - columnHeaderHeight;
+		ctx.translateWithPrecision(rowHeaderWidthAndMarginLeft, marginTop);
 		const extensions = this.getExtensionsByOrder();
 		for (const extension of extensions) extension.draw(ctx, parentScale, spreadsheetSkeleton);
 	}
@@ -4724,8 +4725,9 @@ var SpreadsheetColumnHeader = class extends SpreadsheetHeader {
 		const oCoord = this.getInverseCoord(coord);
 		const skeleton = this.getSkeleton();
 		if (!skeleton) return false;
-		const { rowHeaderWidth, columnHeaderHeight } = skeleton;
-		if (oCoord.x > rowHeaderWidth && oCoord.y >= 0 && oCoord.y <= columnHeaderHeight) return true;
+		const { rowHeaderWidthAndMarginLeft, columnHeaderHeight, columnHeaderHeightAndMarginTop } = skeleton;
+		const marginTop = columnHeaderHeightAndMarginTop - columnHeaderHeight;
+		if (oCoord.x > rowHeaderWidthAndMarginLeft && oCoord.y >= marginTop && oCoord.y <= columnHeaderHeightAndMarginTop) return true;
 		return false;
 	}
 	_initialDefaultExtension() {
@@ -5474,36 +5476,38 @@ var Custom = class extends SheetExtension {
 		if (!worksheet) return;
 		const mergeCellRendered = /* @__PURE__ */ new Set();
 		const subUnitId = worksheet.getSheetId();
-		_univerjs_core.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(_univerjs_core.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) => {
+			_univerjs_core.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(_univerjs_core.sortRules);
+				ctx.save();
+				customRender.forEach((item) => {
+					item.drawWith(ctx, renderInfo, skeleton, this.parent);
+				});
+				ctx.restore();
 			});
-			ctx.restore();
 		});
 	}
 };
@@ -17294,54 +17298,58 @@ let SpreadsheetSkeleton = class SpreadsheetSkeleton extends _univerjs_core.Sheet
 	* @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;
 	}
 	/**
@@ -18308,12 +18316,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
@@ -18321,12 +18336,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)) {
@@ -18654,93 +18664,95 @@ var Marker = class extends SheetExtension {
 		const { worksheet, rowColumnSegment } = skeleton;
 		if (!worksheet) return;
 		const mergeCellRendered = /* @__PURE__ */ new Set();
-		_univerjs_core.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) => {
+			_univerjs_core.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();
+				}
+			});
 		});
 	}
 };
@@ -18964,8 +18976,9 @@ var SpreadsheetRowHeader = class extends SpreadsheetHeader {
 		const segment = spreadsheetSkeleton.rowColumnSegment;
 		if (!segment) return;
 		if (segment.startRow === -1 && segment.endRow === -1) return;
-		const { columnHeaderHeight } = spreadsheetSkeleton;
-		ctx.translateWithPrecision(0, columnHeaderHeight);
+		const { columnHeaderHeightAndMarginTop, rowHeaderWidth, rowHeaderWidthAndMarginLeft } = spreadsheetSkeleton;
+		const marginLeft = rowHeaderWidthAndMarginLeft - rowHeaderWidth;
+		ctx.translateWithPrecision(marginLeft, columnHeaderHeightAndMarginTop);
 		const extensions = this.getExtensionsByOrder();
 		for (const extension of extensions) extension.draw(ctx, parentScale, spreadsheetSkeleton);
 	}
@@ -18973,8 +18986,9 @@ var SpreadsheetRowHeader = class extends SpreadsheetHeader {
 		const oCoord = this.getInverseCoord(coord);
 		const skeleton = this.getSkeleton();
 		if (!skeleton) return false;
-		const { rowHeaderWidth, columnHeaderHeight } = skeleton;
-		if (oCoord.x >= 0 && oCoord.x <= rowHeaderWidth && oCoord.y > columnHeaderHeight) return true;
+		const { rowHeaderWidth, rowHeaderWidthAndMarginLeft, columnHeaderHeightAndMarginTop } = skeleton;
+		const marginLeft = rowHeaderWidthAndMarginLeft - rowHeaderWidth;
+		if (oCoord.x >= marginLeft && oCoord.x <= rowHeaderWidthAndMarginLeft && oCoord.y > columnHeaderHeightAndMarginTop) return true;
 		return false;
 	}
 	_initialDefaultExtension() {
@@ -22089,20 +22103,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 = _univerjs_core.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, _univerjs_core.Tools.now() - st, scene);
+			const cost = _univerjs_core.Tools.now() - st;
+			this.addRenderFrameTimeMetricToScene(timeKey, cost, scene);
 		}
 	}
 	addRenderFrameTimeMetricToScene(timeKey, val, scene) {
@@ -22126,8 +22148,8 @@ var Spreadsheet = class extends SheetComponent {
 		const oCoord = this.getInverseCoord(coord);
 		const skeleton = this.getSkeleton();
 		if (!skeleton) return false;
-		const { rowHeaderWidth, columnHeaderHeight } = skeleton;
-		if (oCoord.x > rowHeaderWidth && oCoord.y > columnHeaderHeight) return true;
+		const { rowHeaderWidthAndMarginLeft, columnHeaderHeightAndMarginTop } = skeleton;
+		if (oCoord.x > rowHeaderWidthAndMarginLeft && oCoord.y > columnHeaderHeightAndMarginTop) return true;
 		return false;
 	}
 	getNoMergeCellPositionByIndex(rowIndex, columnIndex) {
@@ -22195,7 +22217,7 @@ var Spreadsheet = class extends SheetComponent {
 	}
 	renderByViewports(mainCtx, viewportInfo, spreadsheetSkeleton) {
 		const { diffBounds, diffX, diffY, viewPortPosition, cacheCanvas, leftOrigin, topOrigin, bufferEdgeX, bufferEdgeY, isDirty: isViewportDirty, isForceDirty: isViewportForceDirty } = viewportInfo;
-		const { rowHeaderWidth, columnHeaderHeight } = spreadsheetSkeleton;
+		const { rowHeaderWidthAndMarginLeft, columnHeaderHeightAndMarginTop } = spreadsheetSkeleton;
 		const { a: scaleX = 1, d: scaleY = 1 } = mainCtx.getTransform();
 		const bufferEdgeSizeX = bufferEdgeX * scaleX / window.devicePixelRatio;
 		const bufferEdgeSizeY = bufferEdgeY * scaleY / window.devicePixelRatio;
@@ -22228,20 +22250,20 @@ var Spreadsheet = class extends SheetComponent {
 				bufferEdgeY,
 				scaleX,
 				scaleY,
-				columnHeaderHeight,
-				rowHeaderWidth
+				columnHeaderHeightAndMarginTop,
+				rowHeaderWidthAndMarginLeft
 			});
 		}
 		const sourceLeft = bufferEdgeSizeX * Math.min(1, window.devicePixelRatio);
 		const sourceTop = bufferEdgeSizeY * Math.min(1, window.devicePixelRatio);
 		const { left, top, right, bottom } = viewPortPosition;
-		const dw = right - left + rowHeaderWidth;
-		const dh = bottom - top + columnHeaderHeight;
+		const dw = right - left + rowHeaderWidthAndMarginLeft;
+		const dh = bottom - top + columnHeaderHeightAndMarginTop;
 		this._applyCache(cacheCanvas, mainCtx, sourceLeft, sourceTop, dw, dh, left, top, dw, dh);
 		cacheCtx.restore();
 	}
 	paintNewAreaForScrolling(viewportInfo, param) {
-		const { cacheCanvas, cacheCtx, mainCtx, topOrigin, leftOrigin, bufferEdgeX, bufferEdgeY, scaleX, scaleY, columnHeaderHeight, rowHeaderWidth } = param;
+		const { cacheCanvas, cacheCtx, mainCtx, topOrigin, leftOrigin, bufferEdgeX, bufferEdgeY, scaleX, scaleY, columnHeaderHeightAndMarginTop, rowHeaderWidthAndMarginLeft } = param;
 		const { shouldCacheUpdate, diffCacheBounds, diffX, diffY } = viewportInfo;
 		cacheCtx.save();
 		cacheCtx.setTransform(1, 0, 0, 1, 0, 0);
@@ -22254,8 +22276,8 @@ var Spreadsheet = class extends SheetComponent {
 		cacheCtx.translateWithPrecision(m.e / m.a - leftOrigin + bufferEdgeX, m.f / m.d - topOrigin + bufferEdgeY);
 		if (shouldCacheUpdate) for (const diffBound of diffCacheBounds) {
 			const { left: diffLeft, right: diffRight, bottom: diffBottom, top: diffTop } = diffBound;
-			const x = diffLeft - rowHeaderWidth;
-			const y = diffTop - columnHeaderHeight;
+			const x = diffLeft - rowHeaderWidthAndMarginLeft;
+			const y = diffTop - columnHeaderHeightAndMarginTop;
 			const w = diffRight - diffLeft;
 			const h = diffBottom - diffTop;
 			cacheCtx.clearRectByPrecision(x, y, w, h);
@@ -22301,9 +22323,9 @@ var Spreadsheet = class extends SheetComponent {
 		if (!segment) return;
 		if (segment.startRow === -1 && segment.endRow === -1 || segment.startColumn === -1 && segment.endColumn === -1) return;
 		mainCtx.save();
-		const { rowHeaderWidth, columnHeaderHeight } = spreadsheetSkeleton;
-		mainCtx.translateWithPrecision(rowHeaderWidth, columnHeaderHeight);
-		(_this$getScene = this.getScene()) === null || _this$getScene === void 0 || _this$getScene.updateTransformerZero(spreadsheetSkeleton.rowHeaderWidth, spreadsheetSkeleton.columnHeaderHeight);
+		const { rowHeaderWidthAndMarginLeft, columnHeaderHeightAndMarginTop } = spreadsheetSkeleton;
+		mainCtx.translateWithPrecision(rowHeaderWidthAndMarginLeft, columnHeaderHeightAndMarginTop);
+		(_this$getScene = this.getScene()) === null || _this$getScene === void 0 || _this$getScene.updateTransformerZero(rowHeaderWidthAndMarginLeft, columnHeaderHeightAndMarginTop);
 		const { viewportKey } = viewportInfo;
 		if (sheetContentViewportKeys.includes(viewportKey)) if (viewportInfo && viewportInfo.cacheCanvas) this.renderByViewports(mainCtx, viewportInfo, spreadsheetSkeleton);
 		else this._draw(mainCtx, viewportInfo);
@@ -24440,14 +24462,13 @@ let Engine = class Engine extends _univerjs_core.Disposable {
 	}
 	_getPassive() {
 		let passiveSupported = false;
-		const noop = () => {};
 		try {
 			const options = { passive: { get() {
 				passiveSupported = true;
 			} } };
 			const canvasEle = this.getCanvasElement();
-			canvasEle.addEventListener("test", noop, options);
-			canvasEle.removeEventListener("test", noop, options);
+			canvasEle.addEventListener("test", _univerjs_core.noop, options);
+			canvasEle.removeEventListener("test", _univerjs_core.noop, options);
 		} catch (e) {}
 		return passiveSupported;
 	}
@@ -24474,7 +24495,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-insiders.20260522-e8f2a3b";
 
 //#endregion
 //#region src/config/config.ts