@univerjs/engine-render 0.22.0 → 0.22.1-insiders.20260516-8900c44

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)) {
@@ -18391,40 +18399,24 @@ var Font = class extends SheetExtension {
 		return false;
 	}
 	_renderImages(ctx, fontsConfig, startX, startY, endX, endY) {
-		var _getSkeletonData;
+		var _fontsConfig$style, _padding$l, _padding$r, _padding$t, _padding$b, _getSkeletonData;
 		const { documentSkeleton, verticalAlign, horizontalAlign } = fontsConfig;
-		const fontHeight = documentSkeleton.getSkeletonData().pages[0].height;
-		const fontWidth = documentSkeleton.getSkeletonData().pages[0].width;
 		const PADDING = 2;
-		let fontX = startX;
-		let fontY = startY;
-		switch (verticalAlign) {
-			case VerticalAlign.TOP:
-				fontY = startY + PADDING;
-				break;
-			case VerticalAlign.MIDDLE:
-				fontY = (startY + endY) / 2 - fontHeight / 2;
-				break;
-			default:
-				fontY = endY - fontHeight - PADDING;
-				break;
-		}
-		switch (horizontalAlign) {
-			case HorizontalAlign.RIGHT:
-				fontX = endX - fontWidth - PADDING;
-				break;
-			case HorizontalAlign.CENTER:
-				fontX = (startX + endX) / 2 - fontWidth / 2;
-				break;
-			default:
-				fontX = startX + PADDING;
-				break;
-		}
+		const padding = (_fontsConfig$style = fontsConfig.style) === null || _fontsConfig$style === void 0 ? void 0 : _fontsConfig$style.pd;
+		const paddingLeft = (_padding$l = padding === null || padding === void 0 ? void 0 : padding.l) !== null && _padding$l !== void 0 ? _padding$l : PADDING;
+		const paddingRight = (_padding$r = padding === null || padding === void 0 ? void 0 : padding.r) !== null && _padding$r !== void 0 ? _padding$r : PADDING;
+		const paddingTop = (_padding$t = padding === null || padding === void 0 ? void 0 : padding.t) !== null && _padding$t !== void 0 ? _padding$t : PADDING;
+		const paddingBottom = (_padding$b = padding === null || padding === void 0 ? void 0 : padding.b) !== null && _padding$b !== void 0 ? _padding$b : PADDING;
+		const contentStartX = startX + paddingLeft;
+		const contentEndX = endX - paddingRight;
+		const contentStartY = startY + paddingTop;
+		const contentEndY = endY - paddingBottom;
 		const drawingDatas = documentSkeleton.getViewModel().getDataModel().getDrawings();
 		const drawings = (_getSkeletonData = documentSkeleton.getSkeletonData()) === null || _getSkeletonData === void 0 ? void 0 : _getSkeletonData.pages[0].skeDrawings;
 		drawings === null || drawings === void 0 || drawings.forEach((drawing) => {
 			const drawingData = drawingDatas === null || drawingDatas === void 0 ? void 0 : drawingDatas[drawing.drawingId];
 			if (drawingData) {
+				var _drawingData$docTrans, _drawingData$docTrans2, _drawingData$docTrans3, _drawingData$docTrans4, _drawingData$docTrans5, _drawingData$docTrans6;
 				const image = fontsConfig.imageCacheMap.getImage(drawingData.imageSourceType, drawingData.source, () => {
 					var _this$parent;
 					(_this$parent = this.parent) === null || _this$parent === void 0 || _this$parent.makeDirty();
@@ -18432,11 +18424,33 @@ var Font = class extends SheetExtension {
 					var _this$parent2;
 					(_this$parent2 = this.parent) === null || _this$parent2 === void 0 || _this$parent2.makeDirty();
 				});
-				const x = fontX + drawing.aLeft;
-				const y = fontY + drawing.aTop;
-				const width = drawing.width;
-				const height = drawing.height;
-				const angle = drawing.angle;
+				const width = (_drawingData$docTrans = (_drawingData$docTrans2 = drawingData.docTransform) === null || _drawingData$docTrans2 === void 0 ? void 0 : _drawingData$docTrans2.size.width) !== null && _drawingData$docTrans !== void 0 ? _drawingData$docTrans : drawing.width;
+				const height = (_drawingData$docTrans3 = (_drawingData$docTrans4 = drawingData.docTransform) === null || _drawingData$docTrans4 === void 0 ? void 0 : _drawingData$docTrans4.size.height) !== null && _drawingData$docTrans3 !== void 0 ? _drawingData$docTrans3 : drawing.height;
+				const angle = (_drawingData$docTrans5 = (_drawingData$docTrans6 = drawingData.docTransform) === null || _drawingData$docTrans6 === void 0 ? void 0 : _drawingData$docTrans6.angle) !== null && _drawingData$docTrans5 !== void 0 ? _drawingData$docTrans5 : drawing.angle;
+				let x = startX;
+				let y = startY;
+				switch (verticalAlign) {
+					case VerticalAlign.TOP:
+						y = contentStartY;
+						break;
+					case VerticalAlign.MIDDLE:
+						y = (contentStartY + contentEndY) / 2 - height / 2;
+						break;
+					default:
+						y = contentEndY - height;
+						break;
+				}
+				switch (horizontalAlign) {
+					case HorizontalAlign.RIGHT:
+						x = contentEndX - width;
+						break;
+					case HorizontalAlign.CENTER:
+						x = (contentStartX + contentEndX) / 2 - width / 2;
+						break;
+					default:
+						x = contentStartX;
+						break;
+				}
 				const { rotatedHeight, rotatedWidth } = rotatedBoundingBox(width, height, angle);
 				if (image && image.complete) {
 					const angleRadians = angle * Math.PI / 180;
@@ -18504,14 +18518,14 @@ var Font = class extends SheetExtension {
 		renderFontContext.endY = endY;
 	}
 	_renderText(ctx, row, col, renderFontCtx, overflowCache) {
-		var _fontCache$style$pd, _fontCache$style, _padding$l, _padding$r, _padding$t, _padding$b, _fontCache$style2, _fontCache$style3, _fontCache$style4, _fontCache$style5;
+		var _fontCache$style$pd, _fontCache$style, _padding$l2, _padding$r2, _padding$t2, _padding$b2, _fontCache$style2, _fontCache$style3, _fontCache$style4, _fontCache$style5;
 		const { fontCache } = renderFontCtx;
 		if (!fontCache) return;
 		const padding = (_fontCache$style$pd = (_fontCache$style = fontCache.style) === null || _fontCache$style === void 0 ? void 0 : _fontCache$style.pd) !== null && _fontCache$style$pd !== void 0 ? _fontCache$style$pd : DEFAULT_PADDING_DATA;
-		const paddingLeft = (_padding$l = padding.l) !== null && _padding$l !== void 0 ? _padding$l : DEFAULT_PADDING_DATA.l;
-		const paddingRight = (_padding$r = padding.r) !== null && _padding$r !== void 0 ? _padding$r : DEFAULT_PADDING_DATA.r;
-		const paddingTop = (_padding$t = padding.t) !== null && _padding$t !== void 0 ? _padding$t : DEFAULT_PADDING_DATA.t;
-		const paddingBottom = (_padding$b = padding.b) !== null && _padding$b !== void 0 ? _padding$b : DEFAULT_PADDING_DATA.b;
+		const paddingLeft = (_padding$l2 = padding.l) !== null && _padding$l2 !== void 0 ? _padding$l2 : DEFAULT_PADDING_DATA.l;
+		const paddingRight = (_padding$r2 = padding.r) !== null && _padding$r2 !== void 0 ? _padding$r2 : DEFAULT_PADDING_DATA.r;
+		const paddingTop = (_padding$t2 = padding.t) !== null && _padding$t2 !== void 0 ? _padding$t2 : DEFAULT_PADDING_DATA.t;
+		const paddingBottom = (_padding$b2 = padding.b) !== null && _padding$b2 !== void 0 ? _padding$b2 : DEFAULT_PADDING_DATA.b;
 		const { vertexAngle = 0, wrapStrategy, cellData } = fontCache;
 		if ((cellData === null || cellData === void 0 ? void 0 : cellData.v) === void 0 || (cellData === null || cellData === void 0 ? void 0 : cellData.v) === null) return;
 		const text = getDisplayValueFromCell(cellData);
@@ -18619,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();
+				}
+			});
 		});
 	}
 };
@@ -22054,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) {
@@ -24439,7 +24463,7 @@ Engine = __decorate([__decorateParam(2, ICanvasColorService)], Engine);
 //#endregion
 //#region package.json
 var name = "@univerjs/engine-render";
-var version = "0.22.0";
+var version = "0.22.1-insiders.20260516-8900c44";
 
 //#endregion
 //#region src/config/config.ts