@univerjs/engine-render 0.3.0 → 0.4.0-alpha.1

package/lib/es/index.js

@@ -2,7 +2,7 @@ var __defProp = Object.defineProperty;
 var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: !0, configurable: !0, writable: !0, value }) : obj[key] = value;
 var __name = (target, value) => __defProp(target, "name", { value, configurable: !0 });
 var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key != "symbol" ? key + "" : key, value);
-import { Tools, DEFAULT_STYLES, FontStyleType, BaselineOffset, getCellInfoInMergeData, Rectangle, ColorKit, Disposable, EventSubject, checkParagraphHasIndentByStyle, DataStreamTreeTokenType, BorderStyleTypes, BooleanNumber, DisposableCollection, toDisposable, sortRules, Registry, numberToABC, Range, Inject, LocaleService, insertTextToContent, horizontalLineSegmentsSubtraction, deleteContent, DataStreamTreeNodeType, DocumentDataModel, GridType, BulletAlignment, PositionedObjectLayoutType, WrapTextType, ColumnSeparatorType, TableAlignmentType, ObjectRelativeFromV, TableTextWrapType, SpacingRule, CustomDecorationType, CustomRangeType, ObjectMatrix, SectionType, NumberUnitType, PageOrientType, HorizontalAlign, VerticalAlign, WrapStrategy, AlignTypeH, ObjectRelativeFromH, AlignTypeV, mergeWith, GlyphType as GlyphType$1, numberToListABC, PRESET_LIST_TYPE, searchArray, extractPureTextFromCell, CellValueType, isCellCoverable, isNullCell, getColorStyle, isWhiteColor, IContextService, BuildTextUtils, TextX, DEFAULT_EMPTY_DOCUMENT_VALUE, TextDecoration, COLORS, DocumentFlavor, requestImmediateMacroTask, MOVE_BUFFER_VALUE, sortRulesByDesc, Injector, isClassDependencyItem, createIdentifier, remove, UniverInstanceType, IUniverInstanceService, Plugin, IConfigService } from "@univerjs/core";
+import { Tools, DEFAULT_STYLES, FontStyleType, BaselineOffset, getCellInfoInMergeData, Rectangle, ColorKit, Disposable, EventSubject, checkParagraphHasIndentByStyle, DataStreamTreeTokenType, BorderStyleTypes, BooleanNumber, DisposableCollection, toDisposable, sortRules, Registry, Range, numberToABC, Inject, LocaleService, insertTextToContent, horizontalLineSegmentsSubtraction, deleteContent, DataStreamTreeNodeType, DocumentDataModel, GridType, BulletAlignment, PositionedObjectLayoutType, WrapTextType, ColumnSeparatorType, TableAlignmentType, ObjectRelativeFromV, TableTextWrapType, SpacingRule, CustomDecorationType, CustomRangeType, ObjectMatrix, SectionType, NumberUnitType, PageOrientType, HorizontalAlign, VerticalAlign, WrapStrategy, AlignTypeH, ObjectRelativeFromH, AlignTypeV, mergeWith, GlyphType as GlyphType$1, numberToListABC, PRESET_LIST_TYPE, searchArray, extractPureTextFromCell, CellValueType, isCellCoverable, isNullCell, getColorStyle, isWhiteColor, IContextService, BuildTextUtils, TextX, DEFAULT_EMPTY_DOCUMENT_VALUE, TextDecoration, COLORS, DocumentFlavor, requestImmediateMacroTask, MOVE_BUFFER_VALUE, sortRulesByDesc, Injector, isClassDependencyItem, createIdentifier, remove, UniverInstanceType, IUniverInstanceService, Plugin, IConfigService } from "@univerjs/core";
 import { BehaviorSubject, Subject, startWith, distinctUntilChanged, Subscription, Observable, shareReplay } from "rxjs";
 var SHAPE_TYPE = /* @__PURE__ */ ((SHAPE_TYPE2) => (SHAPE_TYPE2.RECT = "rect", SHAPE_TYPE2.CIRCLE = "circle", SHAPE_TYPE2.PATH = "path", SHAPE_TYPE2))(SHAPE_TYPE || {}), LINK_VIEW_PORT_TYPE = /* @__PURE__ */ ((LINK_VIEW_PORT_TYPE2) => (LINK_VIEW_PORT_TYPE2[LINK_VIEW_PORT_TYPE2.XY = 0] = "XY", LINK_VIEW_PORT_TYPE2[LINK_VIEW_PORT_TYPE2.X = 1] = "X", LINK_VIEW_PORT_TYPE2[LINK_VIEW_PORT_TYPE2.Y = 2] = "Y", LINK_VIEW_PORT_TYPE2))(LINK_VIEW_PORT_TYPE || {});
 const MIDDLE_CELL_POS_MAGIC_NUMBER = 1, DEFAULT_FONTFACE_PLANE = '"Helvetica Neue", Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", "Heiti SC", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif', DEFAULT_SKELETON_HEADER_FOOTER = {
@@ -1743,7 +1743,7 @@ function expandRangeIfIntersects(mainRanges, ranges) {
   return mainRanges.concat(intersects);
 }
 __name(expandRangeIfIntersects, "expandRangeIfIntersects");
-function clampRanges(range) {
+function clampRange(range) {
   return {
     startRow: Math.max(0, range.startRow),
     startColumn: Math.max(0, range.startColumn),
@@ -1751,7 +1751,7 @@ function clampRanges(range) {
     endColumn: Math.max(0, range.endColumn)
   };
 }
-__name(clampRanges, "clampRanges");
+__name(clampRange, "clampRange");
 function getSystemHighlightColor() {
   const hiddenEle = document.createElement("div");
   hiddenEle.style.width = "0", hiddenEle.style.height = "0", hiddenEle.style.backgroundColor = "highlight", document.body.append(hiddenEle);
@@ -3177,13 +3177,47 @@ __name(drawLineByBorderType, "drawLineByBorderType");
 function drawDiagonalLineByBorderType(ctx, type, position) {
   let drawStartX = 0, drawStartY = 0, drawEndX = 0, drawEndY = 0;
   const { startX, startY, endX, endY } = position;
-  type === BORDER_TYPE.TL_BR ? (drawStartX = startX, drawStartY = startY, drawEndX = endX, drawEndY = endY) : type === BORDER_TYPE.TL_BC ? (drawStartX = startX, drawStartY = startY, drawEndX = (startX + endX) / 2, drawEndY = endY) : type === BORDER_TYPE.TL_MR ? (drawStartX = startX, drawStartY = startY, drawEndX = endX, drawEndY = (startY + endY) / 2) : type === BORDER_TYPE.BL_TR ? (drawStartX = startX, drawStartY = endY, drawEndX = endX, drawEndY = startY) : type === BORDER_TYPE.ML_TR ? (drawStartX = startX, drawStartY = (startY + endY) / 2, drawEndX = endX, drawEndY = startY) : type === BORDER_TYPE.BC_TR && (drawStartX = (startX + endX) / 2, drawStartY = endY, drawEndX = endX, drawEndY = startY), ctx.beginPath(), ctx.moveToByPrecision(drawStartX, drawStartY), ctx.lineToByPrecision(drawEndX, drawEndY), ctx.closePathByEnv(), ctx.stroke();
+  switch (type) {
+    case BORDER_TYPE.TL_BR:
+      drawStartX = startX, drawStartY = startY, drawEndX = endX, drawEndY = endY;
+      break;
+    case BORDER_TYPE.TL_BC:
+      drawStartX = startX, drawStartY = startY, drawEndX = (startX + endX) / 2, drawEndY = endY;
+      break;
+    case BORDER_TYPE.TL_MR:
+      drawStartX = startX, drawStartY = startY, drawEndX = endX, drawEndY = (startY + endY) / 2;
+      break;
+    case BORDER_TYPE.BL_TR:
+      drawStartX = startX, drawStartY = endY, drawEndX = endX, drawEndY = startY;
+      break;
+    case BORDER_TYPE.ML_TR:
+      drawStartX = startX, drawStartY = (startY + endY) / 2, drawEndX = endX, drawEndY = startY;
+      break;
+    case BORDER_TYPE.BC_TR:
+      drawStartX = (startX + endX) / 2, drawStartY = endY, drawEndX = endX, drawEndY = startY;
+      break;
+  }
+  ctx.beginPath(), ctx.moveToByPrecision(drawStartX, drawStartY), ctx.lineToByPrecision(drawEndX, drawEndY), ctx.closePathByEnv(), ctx.stroke();
 }
 __name(drawDiagonalLineByBorderType, "drawDiagonalLineByBorderType");
 function clearLineByBorderType(ctx, type, position) {
   let drawStartX = 0, drawStartY = 0, drawEndX = 0, drawEndY = 0;
   const { startX, startY, endX, endY } = position;
-  type === BORDER_TYPE.TOP ? (drawStartX = startX, drawStartY = startY, drawEndX = endX, drawEndY = startY) : type === BORDER_TYPE.BOTTOM ? (drawStartX = startX, drawStartY = endY, drawEndX = endX, drawEndY = endY) : type === BORDER_TYPE.LEFT ? (drawStartX = startX, drawStartY = startY, drawEndX = startX, drawEndY = endY) : type === BORDER_TYPE.RIGHT && (drawStartX = endX, drawStartY = startY, drawEndX = endX, drawEndY = endY), ctx.beginPath(), ctx.clearRectForTexture(drawStartX, drawStartY, drawEndX - drawStartX, drawEndY - drawStartY);
+  switch (type) {
+    case BORDER_TYPE.TOP:
+      drawStartX = startX, drawStartY = startY, drawEndX = endX, drawEndY = startY;
+      break;
+    case BORDER_TYPE.BOTTOM:
+      drawStartX = startX, drawStartY = endY, drawEndX = endX, drawEndY = endY;
+      break;
+    case BORDER_TYPE.LEFT:
+      drawStartX = startX, drawStartY = startY, drawEndX = startX, drawEndY = endY;
+      break;
+    case BORDER_TYPE.RIGHT:
+      drawStartX = endX, drawStartY = startY, drawEndX = endX, drawEndY = endY;
+      break;
+  }
+  ctx.beginPath(), ctx.clearRectForTexture(drawStartX, drawStartY, drawEndX - drawStartX, drawEndY - drawStartY);
 }
 __name(clearLineByBorderType, "clearLineByBorderType");
 function setLineType(ctx, style) {
@@ -3593,6 +3627,7 @@ const _UniverRenderingContext2D = class _UniverRenderingContext2D {
     __publicField(this, "__mode", "rendering");
     __publicField(this, "_system");
     __publicField(this, "_browser");
+    __publicField(this, "_transformCache");
     __publicField(this, "canvas");
     __publicField(this, "_context");
     __publicField(this, "_systemType");
@@ -3789,8 +3824,8 @@ const _UniverRenderingContext2D = class _UniverRenderingContext2D {
     this._context.textBaseline = val;
   }
   _getScale() {
-    const m = this.getTransform();
-    return {
+    const m = this._transformCache || this.getTransform();
+    return !this._transformCache && m && (this._transformCache = m), {
       scaleX: m.a,
       scaleY: m.d
     };
@@ -3818,7 +3853,7 @@ const _UniverRenderingContext2D = class _UniverRenderingContext2D {
     return this._context.getTransform();
   }
   resetTransform() {
-    this._context.resetTransform();
+    this._transformCache = null, this._context.resetTransform();
   }
   drawFocusIfNeeded(...args) {
     return this._context.drawFocusIfNeeded(...args);
@@ -3828,7 +3863,7 @@ const _UniverRenderingContext2D = class _UniverRenderingContext2D {
    * @method
    */
   reset() {
-    this._context.reset();
+    this._transformCache = null, this._context.reset();
   }
   /**
    * arc function.
@@ -4126,7 +4161,7 @@ const _UniverRenderingContext2D = class _UniverRenderingContext2D {
     return this._context.getLineDash();
   }
   setTransform(...args) {
-    this._context.setTransform(...args);
+    this._transformCache = null, this._context.setTransform(...args);
   }
   /**
    * stroke function.
@@ -4155,7 +4190,7 @@ const _UniverRenderingContext2D = class _UniverRenderingContext2D {
    * @method
    */
   transform(a, b, c, d, e, f) {
-    this._context.transform(a, b, c, d, e, f);
+    this._context.transform(a, b, c, d, e, f), this._transformCache = null;
   }
   /**
    * translate function.
@@ -4604,32 +4639,65 @@ let Background$1 = (_a = class extends SheetExtension {
     var _a10;
     return (_a10 = this.parent) != null && _a10.isPrinting ? this.PRINTING_Z_INDEX : this.Z_INDEX;
   }
+  // eslint-disable-next-line max-lines-per-function
   draw(ctx, _parentScale, spreadsheetSkeleton, diffRanges, { viewRanges, checkOutOfViewBound }) {
-    const { stylesCache, worksheet, rowHeightAccumulation, columnTotalWidth, columnWidthAccumulation, rowTotalHeight } = spreadsheetSkeleton, { background: backgroundCache, backgroundPositions } = stylesCache;
-    if (!worksheet || !backgroundCache || !rowHeightAccumulation || !columnWidthAccumulation || columnTotalWidth === void 0 || rowTotalHeight === void 0)
+    const { stylesCache, worksheet, rowHeightAccumulation, columnTotalWidth, columnWidthAccumulation, rowTotalHeight } = spreadsheetSkeleton, { background: bgMatrixCacheByColor, backgroundPositions } = stylesCache;
+    if (!worksheet || !bgMatrixCacheByColor || !rowHeightAccumulation || !columnWidthAccumulation || columnTotalWidth === void 0 || rowTotalHeight === void 0)
       return;
     ctx.save();
-    const { scaleX, scaleY } = ctx.getScale(), renderBGCore = /* @__PURE__ */ __name((rgb) => {
-      ctx.beginPath();
-      const bgColorMatrix = backgroundCache[rgb];
+    const { scaleX, scaleY } = ctx.getScale(), renderBGContext = {
+      ctx,
+      backgroundPositions,
+      scaleX,
+      scaleY,
+      checkOutOfViewBound,
+      viewRanges,
+      diffRanges,
+      spreadsheetSkeleton
+    }, mergeRanges = [];
+    viewRanges.forEach((range) => {
+      const intersectMergeRangesInViewRanges = spreadsheetSkeleton.worksheet.getMergedCellRange(range.startRow, range.startColumn, range.endRow, range.endColumn);
+      mergeRanges.push(...intersectMergeRangesInViewRanges);
+    });
+    const renderBGCore = /* @__PURE__ */ __name((rgb) => {
+      const bgColorMatrix = bgMatrixCacheByColor[rgb];
       ctx.fillStyle = rgb || getColor([255, 255, 255]);
-      const backgroundPaths = new Path2D(), renderBGByCell = /* @__PURE__ */ __name((row, col) => {
-        if (!checkOutOfViewBound && !inViewRanges(viewRanges, row, col))
-          return !0;
-        const cellInfo = backgroundPositions == null ? void 0 : backgroundPositions.getValue(row, col);
-        if (cellInfo == null)
-          return !0;
-        let { startY, endY, startX, endX } = cellInfo;
-        const { isMerged, isMergedMainCell, mergeInfo } = cellInfo, combineWithMergeRanges = diffRanges && diffRanges.length > 0 ? diffRanges : viewRanges;
-        if (!inViewRanges(combineWithMergeRanges, row, col) || (isMergedMainCell && (startY = mergeInfo.startY, endY = mergeInfo.endY, startX = mergeInfo.startX, endX = mergeInfo.endX), isMerged)) return !0;
-        const visibleRow = spreadsheetSkeleton.worksheet.getRowVisible(row), visibleCol = spreadsheetSkeleton.worksheet.getColVisible(col);
-        if (!visibleRow || !visibleCol) return !0;
-        const startXPrecise = fixLineWidthByScale(startX, scaleX), startYPrecise = fixLineWidthByScale(startY, scaleY), endXPrecise = fixLineWidthByScale(endX, scaleX), endYPrecise = fixLineWidthByScale(endY, scaleY);
-        backgroundPaths.rect(startXPrecise, startYPrecise, endXPrecise - startXPrecise, endYPrecise - startYPrecise);
-      }, "renderBGByCell");
-      bgColorMatrix.forValue(renderBGByCell), ctx.fill(backgroundPaths), ctx.closePath();
-    }, "renderBGCore");
-    Object.keys(backgroundCache).forEach(renderBGCore), ctx.restore();
+      const backgroundPaths = new Path2D();
+      renderBGContext.backgroundPaths = backgroundPaths, ctx.beginPath(), viewRanges.forEach((range) => {
+        Range.foreach(range, (row, col) => {
+          if (spreadsheetSkeleton.worksheet.getSpanModel().getMergeDataIndex(row, col) !== -1)
+            return;
+          const cellInfo = spreadsheetSkeleton.getCellByIndexWithNoHeader(row, col);
+          if (!cellInfo) return;
+          bgColorMatrix.getValue(row, col) && (renderBGContext.cellInfo = cellInfo, this.renderBGByCell(renderBGContext, row, col));
+        });
+      }), ctx.fill(backgroundPaths), ctx.closePath();
+    }, "renderBGCore"), renderBGForMergedCells = /* @__PURE__ */ __name((rgb) => {
+      const bgColorMatrix = bgMatrixCacheByColor[rgb];
+      ctx.fillStyle = rgb || getColor([255, 255, 255]);
+      const backgroundPaths = new Path2D();
+      renderBGContext.backgroundPaths = backgroundPaths, ctx.beginPath(), mergeRanges.forEach((range) => {
+        if (bgColorMatrix.getValue(range.startRow, range.startColumn)) {
+          const cellInfo = spreadsheetSkeleton.getCellByIndexWithNoHeader(range.startRow, range.startColumn);
+          if (!cellInfo) return;
+          renderBGContext.cellInfo = cellInfo, this.renderBGByCell(renderBGContext, range.startRow, range.startColumn);
+        }
+      }), ctx.fill(backgroundPaths), ctx.closePath();
+    }, "renderBGForMergedCells");
+    Object.keys(bgMatrixCacheByColor).forEach((rgb) => {
+      renderBGCore(rgb), renderBGForMergedCells(rgb);
+    }), ctx.restore();
+  }
+  renderBGByCell(bgContext, row, col) {
+    const { spreadsheetSkeleton, backgroundPaths, scaleX, scaleY, viewRanges, diffRanges, cellInfo } = bgContext;
+    let { startY, endY, startX, endX } = cellInfo;
+    const { isMerged, isMergedMainCell, mergeInfo } = cellInfo, renderRange = diffRanges && diffRanges.length > 0 ? diffRanges : viewRanges;
+    if (startY = mergeInfo.startY, endY = mergeInfo.endY, startX = mergeInfo.startX, endX = mergeInfo.endX, !isMerged && !isMergedMainCell && !inViewRanges(renderRange, row, col))
+      return !0;
+    const visibleRow = spreadsheetSkeleton.worksheet.getRowVisible(row), visibleCol = spreadsheetSkeleton.worksheet.getColVisible(col);
+    if (!visibleRow || !visibleCol) return !0;
+    const startXPrecise = fixLineWidthByScale(startX, scaleX), startYPrecise = fixLineWidthByScale(startY, scaleY), endXPrecise = fixLineWidthByScale(endX, scaleX), endYPrecise = fixLineWidthByScale(endY, scaleY);
+    backgroundPaths.rect(startXPrecise, startYPrecise, endXPrecise - startXPrecise, endYPrecise - startYPrecise);
   }
 }, __name(_a, "Background"), _a);
 SpreadsheetExtensionRegistry.add(Background$1);
@@ -4640,51 +4708,63 @@ let Border$1 = (_a2 = class extends SheetExtension {
     super(...arguments);
     __publicField(this, "uKey", UNIQUE_KEY$9);
     __publicField(this, "Z_INDEX", BORDER_Z_INDEX);
+    __publicField(this, "preStyle");
+    __publicField(this, "preColor");
   }
-  // eslint-disable-next-line max-lines-per-function
-  draw(ctx, _parentScale, spreadsheetSkeleton, diffRanges) {
+  draw(ctx, _parentScale, spreadsheetSkeleton, diffRanges, { viewRanges }) {
     const { stylesCache, overflowCache, worksheet, rowHeightAccumulation, columnTotalWidth, columnWidthAccumulation, rowTotalHeight } = spreadsheetSkeleton;
     if (!worksheet || !rowHeightAccumulation || !columnWidthAccumulation || columnTotalWidth === void 0 || rowTotalHeight === void 0)
       return;
-    ctx.save();
-    let preStyle, preColor;
-    ctx.translateWithPrecisionRatio(FIX_ONE_PIXEL_BLUR_OFFSET, FIX_ONE_PIXEL_BLUR_OFFSET);
+    ctx.save(), ctx.translateWithPrecisionRatio(FIX_ONE_PIXEL_BLUR_OFFSET, FIX_ONE_PIXEL_BLUR_OFFSET);
     const precisionScale = this._getScale(ctx.getScale()), { border } = stylesCache;
-    border == null || border.forValue((rowIndex, columnIndex, borderCaches) => {
-      if (!borderCaches)
-        return !0;
-      const cellInfo = spreadsheetSkeleton.getCellByIndexWithNoHeader(rowIndex, columnIndex), { startY: cellStartY, endY: cellEndY, startX: cellStartX, endX: cellEndX } = cellInfo, { isMerged, isMergedMainCell, mergeInfo } = cellInfo;
-      if (!isMerged) {
-        const visibleRow = spreadsheetSkeleton.worksheet.getRowVisible(rowIndex), visibleCol = spreadsheetSkeleton.worksheet.getColVisible(columnIndex);
-        if (!visibleRow || !visibleCol) return !0;
-      }
-      if (!this.isRenderDiffRangesByRow(mergeInfo.startRow, mergeInfo.endRow, diffRanges))
-        return !0;
-      for (const key in borderCaches) {
-        const { type, style, color } = borderCaches[key];
-        if (style === BorderStyleTypes.NONE)
-          continue;
-        let startY = cellStartY, endY = cellEndY, startX = cellStartX, endX = cellEndX;
-        if (type !== BORDER_TYPE.TOP && type !== BORDER_TYPE.BOTTOM && type !== BORDER_TYPE.LEFT && type !== BORDER_TYPE.RIGHT) {
-          if (isMerged)
-            return !0;
-          isMergedMainCell && (startY = mergeInfo.startY, endY = mergeInfo.endY, startX = mergeInfo.startX, endX = mergeInfo.endX);
-        }
-        const lineWidth = getLineWidth(style);
-        style !== preStyle && (setLineType(ctx, style), ctx.setLineWidthByPrecision(lineWidth), preStyle = style), color !== preColor && (ctx.strokeStyle = color || COLOR_BLACK_RGB, preColor = color), drawDiagonalLineByBorderType(ctx, type, {
-          startX,
-          startY,
-          endX,
-          endY
-        }), !this._getOverflowExclusion(overflowCache, type, rowIndex, columnIndex) && drawLineByBorderType(ctx, type, (lineWidth - 1) / 2 / precisionScale, {
-          startX,
-          startY,
-          endX,
-          endY
-        });
-      }
+    if (!border) return;
+    const renderBorderContext = {
+      ctx,
+      precisionScale,
+      overflowCache,
+      diffRanges,
+      viewRanges,
+      spreadsheetSkeleton
+    };
+    ctx.beginPath(), viewRanges.forEach((range) => {
+      Range.foreach(range, (row, col) => {
+        const borderConfig = border.getValue(row, col);
+        borderConfig && this.renderBorderByCell(renderBorderContext, row, col, borderConfig);
+      });
     }), ctx.closePath(), ctx.restore();
   }
+  renderBorderByCell(renderBorderContext, row, col, borderCacheItem) {
+    const { ctx, precisionScale, overflowCache, spreadsheetSkeleton, diffRanges } = renderBorderContext, cellInfo = spreadsheetSkeleton.getCellByIndexWithNoHeader(row, col), { startY: cellStartY, endY: cellEndY, startX: cellStartX, endX: cellEndX } = cellInfo, { isMerged, isMergedMainCell, mergeInfo } = cellInfo;
+    if (!isMerged) {
+      const visibleRow = spreadsheetSkeleton.worksheet.getRowVisible(row), visibleCol = spreadsheetSkeleton.worksheet.getColVisible(col);
+      if (!visibleRow || !visibleCol) return !0;
+    }
+    if (!this.isRenderDiffRangesByRow(mergeInfo.startRow, mergeInfo.endRow, diffRanges))
+      return !0;
+    for (const key in borderCacheItem) {
+      const { type, style, color } = borderCacheItem[key];
+      if (style === BorderStyleTypes.NONE)
+        continue;
+      let startY = cellStartY, endY = cellEndY, startX = cellStartX, endX = cellEndX;
+      if (type !== BORDER_TYPE.TOP && type !== BORDER_TYPE.BOTTOM && type !== BORDER_TYPE.LEFT && type !== BORDER_TYPE.RIGHT) {
+        if (isMerged)
+          return !0;
+        isMergedMainCell && (startY = mergeInfo.startY, endY = mergeInfo.endY, startX = mergeInfo.startX, endX = mergeInfo.endX);
+      }
+      const lineWidth = getLineWidth(style);
+      setLineType(ctx, style), ctx.setLineWidthByPrecision(lineWidth), ctx.strokeStyle = color || COLOR_BLACK_RGB, drawDiagonalLineByBorderType(ctx, type, {
+        startX,
+        startY,
+        endX,
+        endY
+      }), !this._getOverflowExclusion(overflowCache, type, row, col) && drawLineByBorderType(ctx, type, (lineWidth - 1) / 2 / precisionScale, {
+        startX,
+        startY,
+        endX,
+        endY
+      });
+    }
+  }
   _getOverflowExclusion(overflowCache, type, borderRow, borderColumn) {
     let isDraw = !1;
     return type === BORDER_TYPE.TOP || type === BORDER_TYPE.BOTTOM || overflowCache == null || overflowCache.forRow((row, rowArray) => {
@@ -4835,6 +4915,7 @@ const UNIQUE_KEY$7 = "DefaultCustomExtension", Z_INDEX$1 = 55, stringifyRange$1
 __name(_Custom, "Custom");
 let Custom = _Custom;
 SpreadsheetExtensionRegistry.add(Custom);
+const FONT_EXTENSION_Z_INDEX = 45, EXPAND_SIZE_FOR_RENDER_OVERFLOW = 20;
 var __defProp$4 = Object.defineProperty, __getOwnPropDesc$4 = Object.getOwnPropertyDescriptor, __decorateClass$4 = /* @__PURE__ */ __name((decorators, target, key, kind) => {
   for (var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$4(target, key) : target, i = decorators.length - 1, decorator; i >= 0; i--)
     (decorator = decorators[i]) && (result = (kind ? decorator(target, key, result) : decorator(result)) || result);
@@ -23999,9 +24080,9 @@ const _DocumentSkeleton = class _DocumentSkeleton extends Skeleton {
     const cache = {
       nearestNodeList: [],
       nearestNodeDistanceList: []
-    }, { pages, skeHeaders, skeFooters } = skeletonData, editArea = this.findEditAreaByCoord(coord, pageLayoutType, pageMarginLeft, pageMarginTop).editArea;
+    }, { pages, skeHeaders, skeFooters } = skeletonData, editArea = this.findEditAreaByCoord(coord, pageLayoutType, pageMarginLeft, pageMarginTop).editArea, pageLength = pages.length;
     if (this._findLiquid.reset(), restrictions == null)
-      for (let pi = 0, len = pages.length; pi < len; pi++) {
+      for (let pi = 0; pi < pageLength; pi++) {
         const page = pages[pi], { headerId, footerId, pageWidth } = page;
         let exactMatch = null;
         if (editArea === DocumentEditArea.HEADER || editArea === DocumentEditArea.FOOTER) {
@@ -24014,7 +24095,8 @@ const _DocumentSkeleton = class _DocumentSkeleton extends Skeleton {
             pi,
             cache,
             x,
-            y
+            y,
+            pageLength
           ));
           const footerSke = (_b = skeFooters.get(footerId)) == null ? void 0 : _b.get(pageWidth);
           footerSke && (exactMatch = exactMatch != null ? exactMatch : this._collectNearestNode(
@@ -24025,7 +24107,8 @@ const _DocumentSkeleton = class _DocumentSkeleton extends Skeleton {
             pi,
             cache,
             x,
-            y
+            y,
+            pageLength
           ));
         } else
           exactMatch = this._collectNearestNode(
@@ -24036,7 +24119,8 @@ const _DocumentSkeleton = class _DocumentSkeleton extends Skeleton {
             pi,
             cache,
             x,
-            y
+            y,
+            pageLength
           );
         if (exactMatch)
           return exactMatch;
@@ -24046,7 +24130,7 @@ const _DocumentSkeleton = class _DocumentSkeleton extends Skeleton {
       const { segmentId, segmentPage, strict } = restrictions;
       let exactMatch = null;
       if (strict === !1)
-        for (let pi = 0, len = pages.length; pi < len; pi++) {
+        for (let pi = 0; pi < pageLength; pi++) {
           const page = pages[pi], { headerId, footerId, pageWidth } = page;
           if (segmentId !== "") {
             const headerSke = (_c = skeHeaders.get(headerId)) == null ? void 0 : _c.get(pageWidth);
@@ -24058,7 +24142,8 @@ const _DocumentSkeleton = class _DocumentSkeleton extends Skeleton {
               pi,
               cache,
               x,
-              y
+              y,
+              pageLength
             ));
             const footerSke = (_d = skeFooters.get(footerId)) == null ? void 0 : _d.get(pageWidth);
             footerSke && (exactMatch = exactMatch != null ? exactMatch : this._collectNearestNode(
@@ -24069,7 +24154,8 @@ const _DocumentSkeleton = class _DocumentSkeleton extends Skeleton {
               pi,
               cache,
               x,
-              y
+              y,
+              pageLength
             ));
           } else
             exactMatch = this._collectNearestNode(
@@ -24080,14 +24166,15 @@ const _DocumentSkeleton = class _DocumentSkeleton extends Skeleton {
               pi,
               cache,
               x,
-              y
+              y,
+              pageLength
             );
           if (exactMatch)
             return exactMatch;
           this._translatePage(page, pageLayoutType, pageMarginLeft, pageMarginTop);
         }
       else
-        for (let pi = 0, len = pages.length; pi < len; pi++) {
+        for (let pi = 0; pi < pageLength; pi++) {
           const page = pages[pi];
           if (segmentId) {
             if (segmentPage !== pi) {
@@ -24103,7 +24190,8 @@ const _DocumentSkeleton = class _DocumentSkeleton extends Skeleton {
               segmentPage,
               cache,
               x,
-              y
+              y,
+              pageLength
             ));
           } else
             exactMatch = this._collectNearestNode(
@@ -24114,7 +24202,8 @@ const _DocumentSkeleton = class _DocumentSkeleton extends Skeleton {
               pi,
               cache,
               x,
-              y
+              y,
+              pageLength
             );
           if (exactMatch)
             return exactMatch;
@@ -24123,11 +24212,16 @@ const _DocumentSkeleton = class _DocumentSkeleton extends Skeleton {
     }
     return this._getNearestNode(cache.nearestNodeList, cache.nearestNodeDistanceList);
   }
-  _collectNearestNode(segmentPage, pageType, page, segmentId, pi, cache, x, y, nestLevel = 0) {
+  _collectNearestNode(segmentPage, pageType, page, segmentId, pi, cache, x, y, pageLength, nestLevel = 0) {
     var _a10, _b, _c, _d, _e, _f, _g, _h, _i;
     const { sections, skeTables } = segmentPage;
     this._findLiquid.translateSave();
-    const pageLeft = this._findLiquid.x, pageRight = pageLeft + page.pageWidth, pageTop = this._findLiquid.y + (pageType === DocumentSkeletonPageType.FOOTER ? page.pageHeight - segmentPage.pageHeight : 0), pageBottom = pageTop + segmentPage.pageHeight, pointInPage = x >= pageLeft && x <= pageRight && y >= pageTop && y <= pageBottom;
+    const pageLeft = this._findLiquid.x, pageRight = pageLeft + page.pageWidth, pageTop = this._findLiquid.y + (pageType === DocumentSkeletonPageType.FOOTER ? page.pageHeight - segmentPage.pageHeight : 0), pageBottom = pageTop + segmentPage.pageHeight;
+    let pointInPage = x >= pageLeft && x <= pageRight && y >= pageTop && y <= pageBottom;
+    if (nestLevel === 0 && pageType === DocumentSkeletonPageType.BODY) {
+      const isFirstPage = pi === 0, isLastPage = pi === pageLength - 1, halfMarginTop = page.originMarginTop / 2;
+      isFirstPage && isLastPage ? pointInPage = !0 : isFirstPage ? pointInPage = y <= pageBottom + halfMarginTop : isLastPage ? pointInPage = y >= pageTop - halfMarginTop : pointInPage = y >= pageTop - halfMarginTop && y <= pageBottom + halfMarginTop;
+    }
     switch (pageType) {
       case DocumentSkeletonPageType.HEADER: {
         this._findLiquid.translatePagePadding({
@@ -24231,6 +24325,7 @@ const _DocumentSkeleton = class _DocumentSkeleton extends Skeleton {
               cache,
               x,
               y,
+              pageLength,
               nestLevel + 1
             ), (_g = this._findLiquid) == null || _g.translateRestore();
           }
@@ -24570,7 +24665,7 @@ let SpreadsheetSkeleton = (_a6 = class extends Skeleton {
     /**
      * Range of visible area(range in viewBounds)
      */
-    __publicField(this, "_rowColumnSegment", {
+    __publicField(this, "_visibleRange", {
       startRow: -1,
       endRow: -1,
       startColumn: -1,
@@ -24617,7 +24712,10 @@ let SpreadsheetSkeleton = (_a6 = class extends Skeleton {
    * Range of visible area(range in viewBounds)
    */
   get rowColumnSegment() {
-    return this._rowColumnSegment;
+    return this._visibleRange;
+  }
+  get visibleArea() {
+    return this._visibleRange;
   }
   // get dataMergeCache(): IRange[] {
   //     return this._dataMergeCache;
@@ -24641,7 +24739,7 @@ let SpreadsheetSkeleton = (_a6 = class extends Skeleton {
     return this.columnHeaderHeight + this._marginTop;
   }
   dispose() {
-    super.dispose(), this._rowHeightAccumulation = [], this._columnWidthAccumulation = [], this._rowTotalHeight = 0, this._columnTotalWidth = 0, this._rowHeaderWidth = 0, this._columnHeaderHeight = 0, this._rowColumnSegment = {
+    super.dispose(), this._rowHeightAccumulation = [], this._columnWidthAccumulation = [], this._rowTotalHeight = 0, this._columnTotalWidth = 0, this._rowHeaderWidth = 0, this._columnHeaderHeight = 0, this._visibleRange = {
       startRow: -1,
       endRow: -1,
       startColumn: -1,
@@ -24699,7 +24797,7 @@ let SpreadsheetSkeleton = (_a6 = class extends Skeleton {
    * @returns boolean
    */
   calculateSegment(bounds) {
-    return !this._worksheetData || (this._updateLayout(), !this._rowHeightAccumulation || !this._columnWidthAccumulation) ? !1 : (bounds != null && (this._rowColumnSegment = this.getRowColumnSegment(bounds)), !0);
+    return !this._worksheetData || (this._updateLayout(), !this._rowHeightAccumulation || !this._columnWidthAccumulation) ? !1 : (bounds != null && (this._visibleRange = this.getRowColumnSegment(bounds)), !0);
   }
   calculateWithoutClearingCache(bounds) {
     if (this.calculateSegment(bounds))
@@ -25035,6 +25133,12 @@ let SpreadsheetSkeleton = (_a6 = class extends Skeleton {
       mergeInfo
     };
   }
+  /**
+   * New merge info, but position without header.
+   * @param row
+   * @param column
+   * @returns {ISelectionCellWithMergeInfo} cellInfo with merge info
+   */
   getCellByIndexWithNoHeader(row, column) {
     const { rowHeightAccumulation, columnWidthAccumulation } = this, primary = getCellByIndexWithMergeInfo(
       row,
@@ -25341,7 +25445,6 @@ let SpreadsheetSkeleton = (_a6 = class extends Skeleton {
   //     return mergeRangeCache;
   // }
   /**
-   * @deprecated use _getCellMergeInfo instead.
    * get the current row and column segment visible merge data
    * @returns {IRange} The visible merge data
    */
@@ -25355,21 +25458,23 @@ let SpreadsheetSkeleton = (_a6 = class extends Skeleton {
     } : range = { startRow: 0, startColumn: 0, endRow: this.rowHeightAccumulation.length - 1, endColumn: endColumnLast }, this.worksheet.getSpanModel().getMergedCellRangeForSkeleton(range.startRow, range.startColumn, range.endRow, range.endColumn);
   }
   _calculateStylesCache() {
-    const rowColumnSegment = this._rowColumnSegment, columnWidthAccumulation = this.columnWidthAccumulation, { startRow, endRow, startColumn, endColumn } = rowColumnSegment;
-    if (!(endColumn === -1 || endRow === -1)) {
-      for (let r = startRow; r <= endRow; r++)
-        if (this.worksheet.getRowVisible(r) !== !1) {
-          for (let c = startColumn; c <= endColumn; c++)
-            this._setStylesCache(r, c, {
-              cacheItem: { bg: !0, border: !0 }
-            });
-          for (let c = 0; c < startColumn; c++)
+    const rowColumnSegment = this._visibleRange, columnWidthAccumulation = this.columnWidthAccumulation, { startRow, endRow, startColumn, endColumn } = rowColumnSegment;
+    if (endColumn === -1 || endRow === -1) return;
+    const mergeRanges = this.getCurrentRowColumnSegmentMergeData(this._visibleRange);
+    for (const mergeRange of mergeRanges)
+      this._setStylesCache(mergeRange.startRow, mergeRange.startColumn, {
+        mergeRange
+      });
+    for (let r = startRow; r <= endRow; r++)
+      if (this.worksheet.getRowVisible(r) !== !1) {
+        for (let c = startColumn; c <= endColumn; c++)
+          this._setStylesCache(r, c, { cacheItem: { bg: !0, border: !0 } });
+        for (let c = 0; c < startColumn; c++)
+          this._setStylesCache(r, c, { cacheItem: { bg: !1, border: !1 } });
+        if (endColumn !== 0)
+          for (let c = endColumn + 1; c < columnWidthAccumulation.length; c++)
             this._setStylesCache(r, c, { cacheItem: { bg: !1, border: !1 } });
-          if (endColumn !== 0)
-            for (let c = endColumn + 1; c < columnWidthAccumulation.length; c++)
-              this._setStylesCache(r, c, { cacheItem: { bg: !1, border: !1 } });
-        }
-    }
+      }
   }
   resetCache() {
     this._resetCache();
@@ -25442,7 +25547,7 @@ let SpreadsheetSkeleton = (_a6 = class extends Skeleton {
       return;
     options || (options = { cacheItem: { bg: !0, border: !0 } });
     const { isMerged, isMergedMainCell, startRow, startColumn, endRow, endColumn } = this._getCellMergeInfo(row, col);
-    if (options && (options.mergeRange = { startRow, startColumn, endRow, endColumn }), this.worksheet.getColVisible(col) === !1 || this.worksheet.getRowVisible(row) === !1) {
+    if (options.mergeRange = { startRow, startColumn, endRow, endColumn }, this.worksheet.getColVisible(col) === !1 || this.worksheet.getRowVisible(row) === !1) {
       if (isMerged && !isMergedMainCell)
         return;
       if (!isMergedMainCell)
@@ -25658,95 +25763,119 @@ SpreadsheetSkeleton = __decorateClass$3([
   __decorateParam$3(4, Inject(LocaleService)),
   __decorateParam$3(5, IContextService)
 ], SpreadsheetSkeleton);
-const UNIQUE_KEY$6 = "DefaultFontExtension", EXTENSION_Z_INDEX = 45, _Font = class _Font extends SheetExtension {
+const UNIQUE_KEY$6 = "DefaultFontExtension", _Font = class _Font extends SheetExtension {
   constructor() {
     super(...arguments);
     __publicField(this, "uKey", UNIQUE_KEY$6);
-    __publicField(this, "Z_INDEX", EXTENSION_Z_INDEX);
+    __publicField(this, "Z_INDEX", FONT_EXTENSION_Z_INDEX);
   }
   getDocuments() {
     const parent = this.parent;
     return parent == null ? void 0 : parent.getDocuments();
   }
   draw(ctx, parentScale, spreadsheetSkeleton, diffRanges, moreBoundsInfo) {
-    const { stylesCache, overflowCache, worksheet } = spreadsheetSkeleton, { fontMatrix } = stylesCache;
+    const { stylesCache, worksheet } = spreadsheetSkeleton, { fontMatrix } = stylesCache;
     if (!spreadsheetSkeleton || !worksheet || !fontMatrix) return;
     const { rowHeightAccumulation, columnTotalWidth, columnWidthAccumulation, rowTotalHeight } = spreadsheetSkeleton;
     if (!rowHeightAccumulation || !columnWidthAccumulation || columnTotalWidth === void 0 || rowTotalHeight === void 0 || !worksheet)
       return;
+    const scale = this._getScale(parentScale), { viewRanges = [], checkOutOfViewBound } = moreBoundsInfo, renderFontContext = {
+      ctx,
+      scale,
+      rowHeightAccumulation,
+      columnTotalWidth,
+      columnWidthAccumulation,
+      rowTotalHeight,
+      viewRanges,
+      checkOutOfViewBound: checkOutOfViewBound || !0,
+      diffRanges,
+      spreadsheetSkeleton
+    };
     ctx.save();
-    const scale = this._getScale(parentScale), { viewRanges = [], checkOutOfViewBound } = moreBoundsInfo, renderFontByCellMatrix = /* @__PURE__ */ __name((rowIndex, columnIndex, docsConfig) => {
-      var _a10, _b, _c, _d, _e;
-      if (!checkOutOfViewBound && !inViewRanges(viewRanges, rowIndex, columnIndex))
-        return !0;
-      const cellInfo = spreadsheetSkeleton.getCellByIndexWithNoHeader(
-        rowIndex,
-        columnIndex
+    const uniqueMergeRanges = [], mergeRangeIDSet = /* @__PURE__ */ new Set();
+    viewRanges.forEach((range) => {
+      range.startColumn -= EXPAND_SIZE_FOR_RENDER_OVERFLOW, range.endColumn += EXPAND_SIZE_FOR_RENDER_OVERFLOW, range = clampRange(range), spreadsheetSkeleton.worksheet.getMergedCellRange(range.startRow, range.startColumn, range.endRow, range.endColumn).forEach((mergeRange) => {
+        const mergeRangeIndex = spreadsheetSkeleton.worksheet.getSpanModel().getMergeDataIndex(mergeRange.startRow, mergeRange.startColumn);
+        mergeRangeIDSet.has(mergeRangeIndex) || (mergeRangeIDSet.add(mergeRangeIndex), uniqueMergeRanges.push(mergeRange));
+      }), Range.foreach(range, (row, col) => {
+        if (spreadsheetSkeleton.worksheet.getSpanModel().getMergeDataIndex(row, col) !== -1)
+          return;
+        const cellInfo = spreadsheetSkeleton.getCellByIndexWithNoHeader(row, col);
+        cellInfo && (renderFontContext.cellInfo = cellInfo, this.renderFontEachCell(renderFontContext, row, col, fontMatrix));
+      });
+    }), uniqueMergeRanges.forEach((range) => {
+      const cellInfo = spreadsheetSkeleton.getCellByIndexWithNoHeader(range.startRow, range.startColumn);
+      renderFontContext.cellInfo = cellInfo, this.renderFontEachCell(renderFontContext, range.startRow, range.startColumn, fontMatrix);
+    }), ctx.restore();
+  }
+  renderFontEachCell(renderFontContext, row, col, fontMatrix) {
+    var _a10;
+    const { ctx, viewRanges, diffRanges, spreadsheetSkeleton, cellInfo } = renderFontContext;
+    let { startY, endY, startX, endX } = cellInfo;
+    const { isMerged, isMergedMainCell, mergeInfo } = cellInfo;
+    if (isMerged && !isMergedMainCell)
+      return !0;
+    isMergedMainCell && (startY = mergeInfo.startY, endY = mergeInfo.endY, startX = mergeInfo.startX, endX = mergeInfo.endX);
+    const fontsConfig = fontMatrix.getValue(row, col);
+    if (!fontsConfig) return !0;
+    const overflowRange = spreadsheetSkeleton.overflowCache.getValue(row, col), renderRange = diffRanges && diffRanges.length > 0 ? diffRanges : viewRanges;
+    if (!overflowRange && (!isMergedMainCell && !isMerged) && !inViewRanges(renderRange, row, col))
+      return !0;
+    const visibleRow = spreadsheetSkeleton.worksheet.getRowVisible(row), visibleCol = spreadsheetSkeleton.worksheet.getColVisible(col);
+    if (!visibleRow || !visibleCol) return !0;
+    const cellData = spreadsheetSkeleton.worksheet.getCell(row, col) || {};
+    if ((_a10 = cellData.fontRenderExtension) != null && _a10.isSkip)
+      return !0;
+    ctx.save(), ctx.beginPath(), renderFontContext.overflowRectangle = overflowRange, renderFontContext.cellData = cellData, renderFontContext.startX = startX, renderFontContext.startY = startY, renderFontContext.endX = endX, renderFontContext.endY = endY, this._clipTextOverflow(renderFontContext, row, col, fontMatrix), ctx.translate(startX + FIX_ONE_PIXEL_BLUR_OFFSET, startY + FIX_ONE_PIXEL_BLUR_OFFSET), this._renderDocuments(ctx, fontsConfig, startX, startY, endX, endY, row, col, spreadsheetSkeleton.overflowCache), ctx.closePath(), ctx.restore();
+  }
+  _clipTextOverflow(renderFontContext, row, col, fontMatrix) {
+    var _a10, _b, _c, _d;
+    const { ctx, scale, overflowRectangle, rowHeightAccumulation, columnWidthAccumulation, cellData } = renderFontContext;
+    let { startX, endX, startY, endY } = renderFontContext;
+    const fontsConfig = fontMatrix.getValue(row, col), { horizontalAlign, vertexAngle = 0, centerAngle = 0 } = fontsConfig;
+    let horizontalAlignOverFlow = horizontalAlign;
+    horizontalAlign === HorizontalAlign.UNSPECIFIED && (centerAngle === VERTICAL_ROTATE_ANGLE && vertexAngle === VERTICAL_ROTATE_ANGLE ? horizontalAlignOverFlow = HorizontalAlign.CENTER : (vertexAngle > 0 && vertexAngle !== VERTICAL_ROTATE_ANGLE || vertexAngle === -VERTICAL_ROTATE_ANGLE) && (horizontalAlignOverFlow = HorizontalAlign.RIGHT));
+    const rightOffset = (_b = (_a10 = cellData.fontRenderExtension) == null ? void 0 : _a10.rightOffset) != null ? _b : 0, leftOffset = (_d = (_c = cellData.fontRenderExtension) == null ? void 0 : _c.leftOffset) != null ? _d : 0;
+    let isOverflow = !0;
+    vertexAngle === 0 && (startX = startX + leftOffset, endX = endX - rightOffset, (rightOffset !== 0 || leftOffset !== 0) && (isOverflow = !1));
+    const cellWidth = endX - startX, cellHeight = endY - startY;
+    if (overflowRectangle && isOverflow) {
+      const { startColumn, startRow, endColumn, endRow } = overflowRectangle;
+      startColumn === endColumn && startColumn === col ? (ctx.rectByPrecision(
+        startX + 1 / scale,
+        startY + 1 / scale,
+        cellWidth - 2 / scale,
+        cellHeight - 2 / scale
+      ), ctx.clip()) : horizontalAlignOverFlow === HorizontalAlign.CENTER ? this._clipRectangleForOverflow(
+        ctx,
+        startRow,
+        endRow,
+        startColumn,
+        endColumn,
+        scale,
+        rowHeightAccumulation,
+        columnWidthAccumulation
+      ) : horizontalAlignOverFlow === HorizontalAlign.RIGHT ? this._clipRectangleForOverflow(
+        ctx,
+        startRow,
+        row,
+        startColumn,
+        col,
+        scale,
+        rowHeightAccumulation,
+        columnWidthAccumulation
+      ) : this._clipRectangleForOverflow(
+        ctx,
+        row,
+        endRow,
+        col,
+        endColumn,
+        scale,
+        rowHeightAccumulation,
+        columnWidthAccumulation
       );
-      let { startY, endY, startX, endX } = cellInfo;
-      const { isMerged, isMergedMainCell, mergeInfo } = cellInfo;
-      if (isMerged)
-        return !0;
-      {
-        const visibleRow = spreadsheetSkeleton.worksheet.getRowVisible(rowIndex), visibleCol = spreadsheetSkeleton.worksheet.getColVisible(columnIndex);
-        if (!visibleRow || !visibleCol) return !0;
-      }
-      const mergeTo = diffRanges && diffRanges.length > 0 ? diffRanges : viewRanges, combineWithMergeRanges = expandRangeIfIntersects([...mergeTo], [mergeInfo]);
-      if (!inRowViewRanges(combineWithMergeRanges, rowIndex) || (isMergedMainCell && (startY = mergeInfo.startY, endY = mergeInfo.endY, startX = mergeInfo.startX, endX = mergeInfo.endX), diffRanges && !this.isRowInRanges(mergeInfo.startRow, mergeInfo.endRow, diffRanges)))
-        return !0;
-      const overflowRectangle = overflowCache.getValue(rowIndex, columnIndex), { horizontalAlign, vertexAngle = 0, centerAngle = 0 } = docsConfig;
-      if (!overflowRectangle && !inViewRanges(combineWithMergeRanges, rowIndex, columnIndex))
-        return !0;
-      let horizontalAlignOverFlow = horizontalAlign;
-      horizontalAlign === HorizontalAlign.UNSPECIFIED && (centerAngle === VERTICAL_ROTATE_ANGLE && vertexAngle === VERTICAL_ROTATE_ANGLE ? horizontalAlignOverFlow = HorizontalAlign.CENTER : (vertexAngle > 0 && vertexAngle !== VERTICAL_ROTATE_ANGLE || vertexAngle === -VERTICAL_ROTATE_ANGLE) && (horizontalAlignOverFlow = HorizontalAlign.RIGHT));
-      const cellData = worksheet.getCell(rowIndex, columnIndex) || {};
-      if ((_a10 = cellData.fontRenderExtension) != null && _a10.isSkip)
-        return !0;
-      ctx.save(), ctx.beginPath();
-      const rightOffset = (_c = (_b = cellData.fontRenderExtension) == null ? void 0 : _b.rightOffset) != null ? _c : 0, leftOffset = (_e = (_d = cellData.fontRenderExtension) == null ? void 0 : _d.leftOffset) != null ? _e : 0;
-      let isOverflow = !0;
-      vertexAngle === 0 && (startX = startX + leftOffset, endX = endX - rightOffset, (rightOffset !== 0 || leftOffset !== 0) && (isOverflow = !1));
-      const cellWidth = endX - startX, cellHeight = endY - startY;
-      if (overflowRectangle && isOverflow) {
-        const { startColumn, startRow, endColumn, endRow } = overflowRectangle;
-        startColumn === endColumn && startColumn === columnIndex ? (ctx.rectByPrecision(
-          startX + 1 / scale,
-          startY + 1 / scale,
-          cellWidth - 2 / scale,
-          cellHeight - 2 / scale
-        ), ctx.clip()) : horizontalAlignOverFlow === HorizontalAlign.CENTER ? this._clipRectangleForOverflow(
-          ctx,
-          startRow,
-          endRow,
-          startColumn,
-          endColumn,
-          scale,
-          rowHeightAccumulation,
-          columnWidthAccumulation
-        ) : horizontalAlignOverFlow === HorizontalAlign.RIGHT ? this._clipRectangleForOverflow(
-          ctx,
-          startRow,
-          rowIndex,
-          startColumn,
-          columnIndex,
-          scale,
-          rowHeightAccumulation,
-          columnWidthAccumulation
-        ) : this._clipRectangleForOverflow(
-          ctx,
-          rowIndex,
-          endRow,
-          columnIndex,
-          endColumn,
-          scale,
-          rowHeightAccumulation,
-          columnWidthAccumulation
-        );
-      } else
-        ctx.rectByPrecision(startX + 1 / scale, startY + 1 / scale, cellWidth - 2 / scale, cellHeight - 2 / scale), ctx.clip();
-      ctx.translate(startX + FIX_ONE_PIXEL_BLUR_OFFSET, startY + FIX_ONE_PIXEL_BLUR_OFFSET), this._renderDocuments(ctx, docsConfig, startX, startY, endX, endY, rowIndex, columnIndex, overflowCache), ctx.closePath(), ctx.restore();
-    }, "renderFontByCellMatrix");
-    fontMatrix.forValue(renderFontByCellMatrix), ctx.restore();
+    } else
+      ctx.rectByPrecision(startX + 1 / scale, startY + 1 / scale, cellWidth - 2 / scale, cellHeight - 2 / scale), ctx.clip();
   }
   _renderDocuments(ctx, docsConfig, startX, startY, endX, endY, row, column, overflowCache) {
     const documents = this.getDocuments();
@@ -26046,8 +26175,8 @@ const UNIQUE_KEY$3 = "DefaultDocsBackgroundExtension", DOC_EXTENSION_Z_INDEX$2 =
     const { contentHeight = 0 } = line2, { ts: textStyle, width, content } = span;
     if ((textStyle == null ? void 0 : textStyle.bg) == null)
       return;
-    const { bg } = textStyle, background = getColorStyle(bg), { spanStartPoint = Vector2.create(0, 0) } = this.extensionOffset, DELTA = 1.5;
-    background && content !== "\r" && (ctx.fillStyle = background, ctx.fillRectByPrecision(spanStartPoint.x - 0.5, spanStartPoint.y - 1, width + 1, contentHeight + 2 * DELTA));
+    const { bg } = textStyle, background = getColorStyle(bg), { spanStartPoint = Vector2.create(0, 0) } = this.extensionOffset, DELTA = 1;
+    background && content !== "\r" && (ctx.fillStyle = background, ctx.fillRectByPrecision(spanStartPoint.x - 0.5, spanStartPoint.y + 1, width + 1, contentHeight + 2 * DELTA));
   }
   clearCache() {
     this._preBackgroundColor = "";
@@ -28441,7 +28570,8 @@ const OBJECT_KEY = "__SHEET_EXTENSION_FONT_DOCUMENT_INSTANCE__", _Spreadsheet =
       extension.draw(ctx, parentScale, spreadsheetSkeleton, diffRanges, {
         viewRanges,
         checkOutOfViewBound: !0,
-        viewportKey: viewportInfo.viewportKey
+        viewportKey: viewportInfo.viewportKey,
+        viewBound: viewportInfo.cacheBound
       }), this.addRenderFrameTimeMetricToScene(timeKey, Tools.now() - st, scene);
     }
   }
@@ -29091,6 +29221,10 @@ const _CustomObject = class _CustomObject extends BaseObject {
 __name(_CustomObject, "CustomObject");
 let CustomObject = _CustomObject;
 const min = Math.min, max = Math.max, floor = Math.floor;
+function hasWindow() {
+  return typeof window < "u";
+}
+__name(hasWindow, "hasWindow");
 function getNodeName(node) {
   return isNode(node) ? (node.nodeName || "").toLowerCase() : "#document";
 }
@@ -29106,15 +29240,15 @@ function getDocumentElement(node) {
 }
 __name(getDocumentElement, "getDocumentElement");
 function isNode(value) {
-  return value instanceof Node || value instanceof getWindow(value).Node;
+  return hasWindow() ? value instanceof Node || value instanceof getWindow(value).Node : !1;
 }
 __name(isNode, "isNode");
 function isHTMLElement(value) {
-  return value instanceof HTMLElement || value instanceof getWindow(value).HTMLElement;
+  return hasWindow() ? value instanceof HTMLElement || value instanceof getWindow(value).HTMLElement : !1;
 }
 __name(isHTMLElement, "isHTMLElement");
 function isShadowRoot(value) {
-  return typeof ShadowRoot > "u" ? !1 : value instanceof ShadowRoot || value instanceof getWindow(value).ShadowRoot;
+  return !hasWindow() || typeof ShadowRoot > "u" ? !1 : value instanceof ShadowRoot || value instanceof getWindow(value).ShadowRoot;
 }
 __name(isShadowRoot, "isShadowRoot");
 function isOverflowElement(element) {
@@ -31407,6 +31541,8 @@ const _Scene = class _Scene extends ThinScene {
     __publicField(this, "addObject$", this._addObject$.asObservable());
     __publicField(this, "_beforeRender$", new BehaviorSubject(null));
     __publicField(this, "beforeRender$", this._beforeRender$.asObservable());
+    __publicField(this, "_afterRender$", new BehaviorSubject(null));
+    __publicField(this, "afterRender$", this._afterRender$.asObservable());
     /**
      * Transformer constructor.  Transformer is a special type of group that allow you transform
      * primitives and shapes. Transforming tool is not changing `width` and `height` properties of nodes
@@ -31764,10 +31900,11 @@ const _Scene = class _Scene extends ThinScene {
     if (!this.isDirty())
       return;
     !parentCtx && ((_a10 = this.getEngine()) == null || _a10.clearCanvas());
-    const layers = this._layers.sort(sortRules);
-    this._beforeRender$.next((_b = this.getEngine()) == null ? void 0 : _b.getCanvas());
+    const layers = this._layers.sort(sortRules), canvasInstance = (_b = this.getEngine()) == null ? void 0 : _b.getCanvas();
+    this._beforeRender$.next(canvasInstance);
     for (let i = 0, len = layers.length; i < len; i++)
       layers[i].render(parentCtx, i === len - 1);
+    this._afterRender$.next(canvasInstance);
   }
   async requestRender(parentCtx) {
     return new Promise((resolve, _reject) => {
@@ -32796,7 +32933,7 @@ const MOUSE_WHEEL_SPEED_SMOOTHING_FACTOR = 3, _Viewport = class _Viewport {
       return this._makeDefaultViewport();
     const sceneTrans = this._scene.transform.clone();
     let width = this._width, height = this._height;
-    const size = this._getViewPortSize();
+    const size = this._calcViewPortSize();
     width = size.width, height = size.height;
     const xFrom = this.left, xTo = (width || 0) + this.left, yFrom = this.top, yTo = (height || 0) + this.top, topLeft = this.transformVector2SceneCoord(Vector2.FromArray([xFrom, yFrom])), bottomRight = this.transformVector2SceneCoord(Vector2.FromArray([xTo, yTo])), viewBound = {
       left: topLeft.x,
@@ -32893,7 +33030,7 @@ const MOUSE_WHEEL_SPEED_SMOOTHING_FACTOR = 3, _Viewport = class _Viewport {
   isHit(coord) {
     if (this.isActive === !1)
       return;
-    const { width, height } = this._getViewPortSize();
+    const { width, height } = this._calcViewPortSize();
     return coord.x >= this.left && coord.x <= this.left + (width || 0) && coord.y >= this.top && coord.y <= this.top + (height || 0);
   }
   pickScrollBar(coord) {
@@ -32922,7 +33059,7 @@ const MOUSE_WHEEL_SPEED_SMOOTHING_FACTOR = 3, _Viewport = class _Viewport {
         isLimitedY: !1
       };
     scrollX = scrollX != null ? scrollX : this.scrollX, scrollY = scrollY != null ? scrollY : this.scrollY;
-    const { height, width } = this._getViewPortSize();
+    const { height, width } = this._calcViewPortSize();
     this._sceneWCurrVpAfterScale <= width && (scrollX = 0), this._sceneHCurrVpAfterScale <= height && (scrollY = 0);
     const limitX = (_a10 = this._scrollBar) == null ? void 0 : _a10.limitX, limitY = (_b = this._scrollBar) == null ? void 0 : _b.limitY;
     let isLimitedX = !1, isLimitedY = !1;
@@ -32940,7 +33077,7 @@ const MOUSE_WHEEL_SPEED_SMOOTHING_FACTOR = 3, _Viewport = class _Viewport {
    * @returns
    */
   _limitViewportScroll(viewportScrollX, viewportScrollY) {
-    const { width, height } = this._getViewPortSize(), freezeHeight = this._paddingEndY - this._paddingStartY, freezeWidth = this._paddingEndX - this._paddingStartX, scaleY = this.scene.scaleY, scaleX = this.scene.scaleX, maxViewportScrollX = this._sceneWidthAfterScale - freezeWidth * scaleX - width, maxViewportScrollY = this._sceneHeightAfterScale - freezeHeight * scaleY - height;
+    const { width, height } = this._calcViewPortSize(), freezeHeight = this._paddingEndY - this._paddingStartY, freezeWidth = this._paddingEndX - this._paddingStartX, scaleY = this.scene.scaleY, scaleX = this.scene.scaleX, maxViewportScrollX = this._sceneWidthAfterScale - freezeWidth * scaleX - width, maxViewportScrollY = this._sceneHeightAfterScale - freezeHeight * scaleY - height;
     return {
       viewportScrollX: Tools.clamp(viewportScrollX, this._paddingStartX, maxViewportScrollX / scaleX),
       viewportScrollY: Tools.clamp(viewportScrollY, this._paddingStartY, maxViewportScrollY / scaleY),
@@ -32968,7 +33105,7 @@ const MOUSE_WHEEL_SPEED_SMOOTHING_FACTOR = 3, _Viewport = class _Viewport {
    */
   _resizeCacheCanvas() {
     var _a10;
-    const { width, height } = this._getViewPortSize();
+    const { width, height } = this._calcViewPortSize();
     this.width = width, this.height = height;
     const scaleX = this.scene.scaleX, scaleY = this.scene.scaleY, canvasW = width !== 0 ? width + this.bufferEdgeX * 2 * scaleX : 0, canvasH = height !== 0 ? height + this.bufferEdgeY * 2 * scaleY : 0;
     (_a10 = this._cacheCanvas) == null || _a10.setSize(canvasW, canvasH), this.cacheBound = this._viewBound, this.preCacheBound = null, this.markForceDirty(!0);
@@ -32978,7 +33115,7 @@ const MOUSE_WHEEL_SPEED_SMOOTHING_FACTOR = 3, _Viewport = class _Viewport {
    */
   _updateScrollByViewportScrollValue() {
     if (!this.width || this.width < 0 || !this.height || this.height < 0) return;
-    const { width, height } = this._getViewPortSize(), sceneWidthCurrVpAfterScale = (this._scene.width - this._paddingEndX) * this._scene.scaleX, sceneHeightCurrVpAfterScale = (this._scene.height - this._paddingEndY) * this._scene.scaleY;
+    const { width, height } = this._calcViewPortSize(), sceneWidthCurrVpAfterScale = (this._scene.width - this._paddingEndX) * this._scene.scaleX, sceneHeightCurrVpAfterScale = (this._scene.height - this._paddingEndY) * this._scene.scaleY;
     if (this._sceneWCurrVpAfterScale = sceneWidthCurrVpAfterScale, this._sceneHCurrVpAfterScale = sceneHeightCurrVpAfterScale, this._sceneWidthAfterScale = this._scene.width * this._scene.scaleX, this._sceneHeightAfterScale = this._scene.height * this._scene.scaleY, this._scrollBar) {
       this._scrollBar.resize(width, height, sceneWidthCurrVpAfterScale, sceneHeightCurrVpAfterScale);
       const viewportScrollX = this.viewportScrollX, viewportScrollY = this.viewportScrollY;
@@ -32989,11 +33126,11 @@ const MOUSE_WHEEL_SPEED_SMOOTHING_FACTOR = 3, _Viewport = class _Viewport {
     }
     this.markForceDirty(!0);
   }
-  _getViewPortSize() {
+  _calcViewPortSize() {
     const parent = this._scene.getParent(), { width: parentWidth, height: parentHeight } = parent, { scaleX = 1, scaleY = 1 } = this._scene;
     let width, height;
     const left = this._leftOrigin * scaleX, top = this._topOrigin * scaleY;
-    return this._left = left, this._top = top, this._explicitViewportWidthSet ? width = (this._widthOrigin || 0) * scaleX : width = parentWidth - (this._left + this._right), this._explicitViewportHeightSet ? height = (this._heightOrigin || 0) * scaleY : height = parentHeight - (this._top + this._bottom), {
+    return this._left = left, this._top = top, Tools.isDefine(this._widthOrigin) || this._explicitViewportWidthSet ? width = (this._widthOrigin || 0) * scaleX : width = parentWidth - (this._left + this._right), Tools.isDefine(this._heightOrigin) || this._explicitViewportHeightSet ? height = (this._heightOrigin || 0) * scaleY : height = parentHeight - (this._top + this._bottom), {
       width,
       height,
       parentHeight
@@ -33170,7 +33307,7 @@ const MOUSE_WHEEL_SPEED_SMOOTHING_FACTOR = 3, _Viewport = class _Viewport {
     parent.classType === RENDER_CLASS_TYPE.SCENE_VIEWER ? this._scrollBar.render(ctx) : parent.classType === RENDER_CLASS_TYPE.ENGINE && this._scrollBar.render(ctx);
   }
   _setViewportSize(props) {
-    Tools.isDefine(props == null ? void 0 : props.top) && (this.top = props.top), Tools.isDefine(props == null ? void 0 : props.left) && (this.left = props.left), Tools.isDefine(props == null ? void 0 : props.bottom) && (this.bottom = props.bottom), Tools.isDefine(props == null ? void 0 : props.right) && (this.right = props.right), Tools.isDefine(props == null ? void 0 : props.width) && this._explicitViewportWidthSet ? (this.width = props == null ? void 0 : props.width, this._widthOrigin = this.width) : (this.width = null, this._widthOrigin = null), Tools.isDefine(props == null ? void 0 : props.height) && this._explicitViewportHeightSet ? (this.height = props == null ? void 0 : props.height, this._heightOrigin = this.height) : (this.height = null, this._heightOrigin = null);
+    Tools.isDefine(props == null ? void 0 : props.top) && (this.top = props.top), Tools.isDefine(props == null ? void 0 : props.left) && (this.left = props.left), Tools.isDefine(props == null ? void 0 : props.bottom) && (this.bottom = props.bottom), Tools.isDefine(props == null ? void 0 : props.right) && (this.right = props.right), Tools.isDefine(props == null ? void 0 : props.width) ? (this.width = props == null ? void 0 : props.width, this._widthOrigin = props == null ? void 0 : props.width) : (this.width = null, this._widthOrigin = null), Tools.isDefine(props == null ? void 0 : props.height) ? (this.height = props == null ? void 0 : props.height, this._heightOrigin = props == null ? void 0 : props.height) : (this.height = null, this._heightOrigin = null);
   }
   /**
    * main canvas element resize
@@ -33314,7 +33451,7 @@ export {
   calculateRectRotate,
   cancelRequestFrame,
   checkStyle,
-  clampRanges,
+  clampRange,
   clearLineByBorderType,
   convertTextRotation,
   createCanvasElement,