@univerjs/engine-render 0.4.1 → 0.4.2-nightly.202410301606

package/lib/es/index.js

@@ -2,8 +2,8 @@ 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, 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";
+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, DocumentFlavor, PageOrientType, HorizontalAlign, VerticalAlign, WrapStrategy, AlignTypeH, ObjectRelativeFromH, AlignTypeV, mergeWith, GlyphType as GlyphType$1, numberToListABC, PRESET_LIST_TYPE, DEFAULT_EMPTY_DOCUMENT_VALUE, IS_ROW_STYLE_PRECEDE_COLUMN_STYLE, searchArray, extractPureTextFromCell, CellValueType, isCellCoverable, isNullCell, composeStyles, getColorStyle, isWhiteColor, IContextService, IConfigService, BuildTextUtils, TextX, TextDecoration, COLORS, requestImmediateMacroTask, MOVE_BUFFER_VALUE, sortRulesByDesc, Injector, isClassDependencyItem, createIdentifier, remove, UniverInstanceType, IUniverInstanceService, Plugin, registerDependencies } from "@univerjs/core";
+import { BehaviorSubject, Subject, startWith, distinctUntilChanged, Subscription, debounceTime, 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 = {
   lines: [],
@@ -22,7 +22,7 @@ const MIDDLE_CELL_POS_MAGIC_NUMBER = 1, DEFAULT_FONTFACE_PLANE = '"Helvetica Neu
 var CURSOR_TYPE = /* @__PURE__ */ ((CURSOR_TYPE2) => (CURSOR_TYPE2.DEFAULT = "default", CURSOR_TYPE2.AUTO = "auto", CURSOR_TYPE2.CROSSHAIR = "crosshair", CURSOR_TYPE2.POINTER = "pointer", CURSOR_TYPE2.MOVE = "move", CURSOR_TYPE2.EAST_RESIZE = "e-resize", CURSOR_TYPE2.NORTH_EAST_RESIZE = "ne-resize", CURSOR_TYPE2.NORTH_WEST_RESIZE = "nw-resize", CURSOR_TYPE2.NORTH_RESIZE = "n-resize", CURSOR_TYPE2.SOUTH_EAST_RESIZE = "se-resize", CURSOR_TYPE2.SOUTH_WEST_RESIZE = "sw-resize", CURSOR_TYPE2.SOUTH_RESIZE = "s-resize", CURSOR_TYPE2.WEST_RESIZE = "w-resize", CURSOR_TYPE2.TEXT = "text", CURSOR_TYPE2.WAIT = "wait", CURSOR_TYPE2.HELP = "help", CURSOR_TYPE2.CELL = "cell", CURSOR_TYPE2.NONE = "none", CURSOR_TYPE2.VERTICAL_TEXT = "vertical-text", CURSOR_TYPE2.NO_DROP = "no-drop", CURSOR_TYPE2.GRAB = "grab", CURSOR_TYPE2.GRABBING = "grabbing", CURSOR_TYPE2.ALL_SCROLL = "all-scroll", CURSOR_TYPE2.COLUMN_RESIZE = "col-resize", CURSOR_TYPE2.ROW_RESIZE = "row-resize", CURSOR_TYPE2.PROGRESS = "progress", CURSOR_TYPE2.NOT_ALLOWED = "not-allowed", CURSOR_TYPE2.ZOOM_IN = "zoom-in", CURSOR_TYPE2.ZOOM_OUT = "zoom-out", CURSOR_TYPE2))(CURSOR_TYPE || {}), DOCUMENT_CONTEXT_CLIP_TYPE = /* @__PURE__ */ ((DOCUMENT_CONTEXT_CLIP_TYPE2) => (DOCUMENT_CONTEXT_CLIP_TYPE2[DOCUMENT_CONTEXT_CLIP_TYPE2.noClip = 0] = "noClip", DOCUMENT_CONTEXT_CLIP_TYPE2[DOCUMENT_CONTEXT_CLIP_TYPE2.DOC_SIZE = 1] = "DOC_SIZE", DOCUMENT_CONTEXT_CLIP_TYPE2[DOCUMENT_CONTEXT_CLIP_TYPE2.CONTENT_SIZE_LEFT = 2] = "CONTENT_SIZE_LEFT", DOCUMENT_CONTEXT_CLIP_TYPE2[DOCUMENT_CONTEXT_CLIP_TYPE2.CONTENT_SIZE_CENTER = 3] = "CONTENT_SIZE_CENTER", DOCUMENT_CONTEXT_CLIP_TYPE2[DOCUMENT_CONTEXT_CLIP_TYPE2.CONTENT_SIZE_Right = 4] = "CONTENT_SIZE_Right", DOCUMENT_CONTEXT_CLIP_TYPE2))(DOCUMENT_CONTEXT_CLIP_TYPE || {});
 const COLOR_BLACK_RGB = "rgb(0,0,0)";
 var BORDER_TYPE = /* @__PURE__ */ ((BORDER_TYPE2) => (BORDER_TYPE2.TOP = "t", BORDER_TYPE2.BOTTOM = "b", BORDER_TYPE2.LEFT = "l", BORDER_TYPE2.RIGHT = "r", BORDER_TYPE2.TL_BR = "tl_br", BORDER_TYPE2.TL_BC = "tl_bc", BORDER_TYPE2.TL_MR = "tl_mr", BORDER_TYPE2.BL_TR = "bl_tr", BORDER_TYPE2.ML_TR = "ml_tr", BORDER_TYPE2.BC_TR = "bc_tr", BORDER_TYPE2))(BORDER_TYPE || {}), ORIENTATION_TYPE = /* @__PURE__ */ ((ORIENTATION_TYPE2) => (ORIENTATION_TYPE2[ORIENTATION_TYPE2.UP = 0] = "UP", ORIENTATION_TYPE2[ORIENTATION_TYPE2.DOWN = 1] = "DOWN", ORIENTATION_TYPE2))(ORIENTATION_TYPE || {}), RENDER_CLASS_TYPE = /* @__PURE__ */ ((RENDER_CLASS_TYPE2) => (RENDER_CLASS_TYPE2.ENGINE = "Engine", RENDER_CLASS_TYPE2.SCENE = "Scene", RENDER_CLASS_TYPE2.BASE_OBJECT = "BaseObject", RENDER_CLASS_TYPE2.SCENE_VIEWER = "SceneViewer", RENDER_CLASS_TYPE2.CANVAS = "Canvas", RENDER_CLASS_TYPE2.VIEWPORT = "Viewport", RENDER_CLASS_TYPE2.LAYER = "Layer", RENDER_CLASS_TYPE2.GROUP = "Group", RENDER_CLASS_TYPE2.IMAGE = "Image", RENDER_CLASS_TYPE2.SHAPE = "Shape", RENDER_CLASS_TYPE2.TEXT = "Text", RENDER_CLASS_TYPE2))(RENDER_CLASS_TYPE || {});
-const MAXIMUM_ROW_HEIGHT = 2e3, FIX_ONE_PIXEL_BLUR_OFFSET = 0.5, DRAWING_OBJECT_LOWER_LAYER_INDEX = 3, DRAWING_OBJECT_LAYER_INDEX = 4, DRAWING_OBJECT_UPPER_LAYER_INDEX = 5;
+const MAXIMUM_ROW_HEIGHT = 2e3, MAXIMUM_COL_WIDTH = 2e3, FIX_ONE_PIXEL_BLUR_OFFSET = 0.5, DRAWING_OBJECT_LOWER_LAYER_INDEX = 3, DRAWING_OBJECT_LAYER_INDEX = 4, DRAWING_OBJECT_UPPER_LAYER_INDEX = 5;
 var TRANSFORM_CHANGE_OBSERVABLE_TYPE = /* @__PURE__ */ ((TRANSFORM_CHANGE_OBSERVABLE_TYPE2) => (TRANSFORM_CHANGE_OBSERVABLE_TYPE2[TRANSFORM_CHANGE_OBSERVABLE_TYPE2.translate = 0] = "translate", TRANSFORM_CHANGE_OBSERVABLE_TYPE2[TRANSFORM_CHANGE_OBSERVABLE_TYPE2.resize = 1] = "resize", TRANSFORM_CHANGE_OBSERVABLE_TYPE2[TRANSFORM_CHANGE_OBSERVABLE_TYPE2.scale = 2] = "scale", TRANSFORM_CHANGE_OBSERVABLE_TYPE2[TRANSFORM_CHANGE_OBSERVABLE_TYPE2.skew = 3] = "skew", TRANSFORM_CHANGE_OBSERVABLE_TYPE2[TRANSFORM_CHANGE_OBSERVABLE_TYPE2.flip = 4] = "flip", TRANSFORM_CHANGE_OBSERVABLE_TYPE2[TRANSFORM_CHANGE_OBSERVABLE_TYPE2.all = 5] = "all", TRANSFORM_CHANGE_OBSERVABLE_TYPE2))(TRANSFORM_CHANGE_OBSERVABLE_TYPE || {});
 const _Base = class _Base {
   isEmpty() {
@@ -1388,7 +1388,7 @@ function fixLineWidthByScale(num, scale) {
   return Math.round(num * scale) / scale;
 }
 __name(fixLineWidthByScale, "fixLineWidthByScale");
-function getFontStyleString(textStyle, _localeService) {
+function getFontStyleString(textStyle) {
   const defaultFont = DEFAULT_STYLES.ff, defaultFontSize = DEFAULT_STYLES.fs;
   if (!textStyle) {
     const fontString2 = `${defaultFontSize}pt  ${defaultFont}`;
@@ -2593,7 +2593,7 @@ const BASE_OBJECT_ARRAY = [
   "flipY",
   "strokeWidth"
 ];
-var ObjectType = /* @__PURE__ */ ((ObjectType2) => (ObjectType2[ObjectType2.UNKNOWN = 0] = "UNKNOWN", ObjectType2[ObjectType2.RICH_TEXT = 1] = "RICH_TEXT", ObjectType2[ObjectType2.SHAPE = 2] = "SHAPE", ObjectType2[ObjectType2.IMAGE = 3] = "IMAGE", ObjectType2[ObjectType2.RECT = 4] = "RECT", ObjectType2[ObjectType2.CIRCLE = 5] = "CIRCLE", ObjectType2))(ObjectType || {});
+var ObjectType = /* @__PURE__ */ ((ObjectType2) => (ObjectType2[ObjectType2.UNKNOWN = 0] = "UNKNOWN", ObjectType2[ObjectType2.RICH_TEXT = 1] = "RICH_TEXT", ObjectType2[ObjectType2.SHAPE = 2] = "SHAPE", ObjectType2[ObjectType2.IMAGE = 3] = "IMAGE", ObjectType2[ObjectType2.RECT = 4] = "RECT", ObjectType2[ObjectType2.CIRCLE = 5] = "CIRCLE", ObjectType2[ObjectType2.CHART = 6] = "CHART", ObjectType2))(ObjectType || {});
 const _BaseObject = class _BaseObject extends Disposable {
   // TODO: @DR-Univer. Belong to layer
   constructor(key) {
@@ -3625,14 +3625,20 @@ __name(getOffsetRectForDom, "getOffsetRectForDom");
 const _UniverRenderingContext2D = class _UniverRenderingContext2D {
   constructor(context) {
     __publicField(this, "__mode", "rendering");
-    __publicField(this, "_system");
-    __publicField(this, "_browser");
     __publicField(this, "_transformCache");
     __publicField(this, "canvas");
     __publicField(this, "_context");
     __publicField(this, "_systemType");
     __publicField(this, "_browserType");
-    this._context = context, this.canvas = context.canvas;
+    __publicField(this, "renderConfig", {});
+    __publicField(this, "_id");
+    this.canvas = context.canvas, this._context = context;
+  }
+  getId() {
+    return this._id;
+  }
+  setId(id) {
+    this._id = id;
   }
   isContextLost() {
     return this._context.isContextLost();
@@ -3823,11 +3829,15 @@ const _UniverRenderingContext2D = class _UniverRenderingContext2D {
   set textBaseline(val) {
     this._context.textBaseline = val;
   }
+  /**
+   * Get scale from ctx.
+   * DOMMatrix.a DOMMatrix.d would affect by ctx.rotate()
+   */
   _getScale() {
-    const m = this._transformCache || this.getTransform();
-    return !this._transformCache && m && (this._transformCache = m), {
-      scaleX: m.a,
-      scaleY: m.d
+    const transform = this.getTransform(), { a, b, c, d } = transform, scaleX = Math.sqrt(a * a + b * b), scaleY = Math.sqrt(c * c + d * d);
+    return {
+      scaleX,
+      scaleY
     };
   }
   getScale() {
@@ -3850,7 +3860,7 @@ const _UniverRenderingContext2D = class _UniverRenderingContext2D {
     x = fixLineWidthByScale(x, scaleX), y = fixLineWidthByScale(y, scaleY), w = fixLineWidthByScale(w, scaleX), h = fixLineWidthByScale(h, scaleY), this.roundRect(x, y, w, h, radii);
   }
   getTransform() {
-    return this._context.getTransform();
+    return this._transformCache || this._context.getTransform();
   }
   resetTransform() {
     this._transformCache = null, this._context.resetTransform();
@@ -4089,6 +4099,10 @@ const _UniverRenderingContext2D = class _UniverRenderingContext2D {
     const { scaleX, scaleY } = this._getScale();
     x = fixLineWidthByScale(x, scaleX), y = fixLineWidthByScale(y, scaleY), this.moveTo(x, y);
   }
+  moveToByPrecisionLog(x, y) {
+    const { scaleX, scaleY } = this._getScale(), afterX = fixLineWidthByScale(x, scaleX), afterY = fixLineWidthByScale(y, scaleY);
+    this.moveTo(afterX, afterY);
+  }
   /**
    * rect function.
    * @method
@@ -4130,7 +4144,7 @@ const _UniverRenderingContext2D = class _UniverRenderingContext2D {
    * @method
    */
   rotate(angle) {
-    this._context.rotate(angle);
+    this._transformCache = null, this._context.rotate(angle);
   }
   /**
    * save function.
@@ -4144,7 +4158,7 @@ const _UniverRenderingContext2D = class _UniverRenderingContext2D {
    * @method
    */
   scale(x, y) {
-    this._context.scale(x, y);
+    this._transformCache = null, this._context.scale(x, y);
   }
   /**
    * setLineDash function.
@@ -4190,20 +4204,21 @@ const _UniverRenderingContext2D = class _UniverRenderingContext2D {
    * @method
    */
   transform(a, b, c, d, e, f) {
-    this._context.transform(a, b, c, d, e, f), this._transformCache = null;
+    this._transformCache = null, this._context.transform(a, b, c, d, e, f);
   }
   /**
    * translate function.
    * @method
    */
   translate(x, y) {
-    this._context.translate(x, y);
+    this._transformCache = null, this._context.translate(x, y);
   }
   translateWithPrecision(x, y) {
     const { scaleX, scaleY } = this._getScale();
-    x = fixLineWidthByScale(x, scaleX), y = fixLineWidthByScale(y, scaleY), this._context.translate(x, y);
+    x = fixLineWidthByScale(x, scaleX), y = fixLineWidthByScale(y, scaleY), this._transformCache = null, this._context.translate(x, y);
   }
   translateWithPrecisionRatio(x, y) {
+    this._transformCache = null;
     const { scaleX, scaleY } = this._getScale();
     this._context.translate(x / scaleX, y / scaleY);
   }
@@ -4216,14 +4231,6 @@ const _UniverRenderingContext2D = class _UniverRenderingContext2D {
 };
 __name(_UniverRenderingContext2D, "UniverRenderingContext2D");
 let UniverRenderingContext2D = _UniverRenderingContext2D;
-const _UniverRenderingContextWebGL = class _UniverRenderingContextWebGL {
-};
-__name(_UniverRenderingContextWebGL, "UniverRenderingContextWebGL");
-let UniverRenderingContextWebGL = _UniverRenderingContextWebGL;
-const _UniverRenderingContextWebGPU = class _UniverRenderingContextWebGPU {
-};
-__name(_UniverRenderingContextWebGPU, "UniverRenderingContextWebGPU");
-let UniverRenderingContextWebGPU = _UniverRenderingContextWebGPU;
 const _UniverRenderingContext = class _UniverRenderingContext extends UniverRenderingContext2D {
 };
 __name(_UniverRenderingContext, "UniverRenderingContext");
@@ -4233,15 +4240,8 @@ const _UniverPrintingContext = class _UniverPrintingContext extends UniverRender
     super(...arguments);
     __publicField(this, "__mode", "printing");
   }
-  __getScale() {
-    const m = this.getTransform();
-    return {
-      scaleX: m.a,
-      scaleY: m.d
-    };
-  }
   clearRect(x, y, width, height) {
-    const { scaleX, scaleY } = this.__getScale();
+    const { scaleX, scaleY } = this._getScale();
     x = fixLineWidthByScale(x, scaleX), y = fixLineWidthByScale(y, scaleY), width = fixLineWidthByScale(width, scaleX), height = fixLineWidthByScale(height, scaleY), this._context.save(), this._context.fillStyle = getColor([255, 255, 255]), this._context.fillRect(x, y, width, height), this._context.restore();
   }
   clearRectForTexture(x, y, width, height) {
@@ -4470,7 +4470,7 @@ const _SpreadsheetColumnHeader = class _SpreadsheetColumnHeader extends Spreadsh
     const spreadsheetSkeleton = this.getSkeleton();
     if (!spreadsheetSkeleton) return;
     const parentScale = this.getParentScale();
-    spreadsheetSkeleton.calculateSegment(bounds);
+    spreadsheetSkeleton.updateVisibleRange(bounds);
     const segment = spreadsheetSkeleton.rowColumnSegment;
     if (!segment || segment.startColumn === -1 && segment.endColumn === -1) return;
     const { rowHeaderWidth } = spreadsheetSkeleton;
@@ -4918,18 +4918,19 @@ 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 ShowGridlinesState = /* @__PURE__ */ ((ShowGridlinesState2) => (ShowGridlinesState2[ShowGridlinesState2.OFF = 0] = "OFF", ShowGridlinesState2[ShowGridlinesState2.ON = 1] = "ON", ShowGridlinesState2))(ShowGridlinesState || {}), SHEET_VIEWPORT_KEY = /* @__PURE__ */ ((SHEET_VIEWPORT_KEY2) => (SHEET_VIEWPORT_KEY2.VIEW_MAIN = "viewMain", SHEET_VIEWPORT_KEY2.VIEW_MAIN_LEFT_TOP = "viewMainLeftTop", SHEET_VIEWPORT_KEY2.VIEW_MAIN_TOP = "viewMainTop", SHEET_VIEWPORT_KEY2.VIEW_MAIN_LEFT = "viewMainLeft", SHEET_VIEWPORT_KEY2.VIEW_ROW_TOP = "viewRowTop", SHEET_VIEWPORT_KEY2.VIEW_ROW_BOTTOM = "viewRowBottom", SHEET_VIEWPORT_KEY2.VIEW_COLUMN_LEFT = "viewColumnLeft", SHEET_VIEWPORT_KEY2.VIEW_COLUMN_RIGHT = "viewColumnRight", SHEET_VIEWPORT_KEY2.VIEW_LEFT_TOP = "viewLeftTop", SHEET_VIEWPORT_KEY2))(SHEET_VIEWPORT_KEY || {});
+const FONT_EXTENSION_Z_INDEX = 45, EXPAND_SIZE_FOR_RENDER_OVERFLOW = 20, sheetContentViewportKeys = [SHEET_VIEWPORT_KEY.VIEW_MAIN, SHEET_VIEWPORT_KEY.VIEW_MAIN_LEFT_TOP, SHEET_VIEWPORT_KEY.VIEW_MAIN_TOP, SHEET_VIEWPORT_KEY.VIEW_MAIN_LEFT], sheetHeaderViewportKeys = [SHEET_VIEWPORT_KEY.VIEW_ROW_TOP, SHEET_VIEWPORT_KEY.VIEW_ROW_BOTTOM, SHEET_VIEWPORT_KEY.VIEW_COLUMN_LEFT, SHEET_VIEWPORT_KEY.VIEW_COLUMN_RIGHT, SHEET_VIEWPORT_KEY.VIEW_LEFT_TOP];
 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);
   return kind && result && __defProp$4(target, key, result), result;
 }, "__decorateClass$4"), __decorateParam$4 = /* @__PURE__ */ __name((index2, decorator) => (target, key) => decorator(target, key, index2), "__decorateParam$4"), _a3;
 let Skeleton = (_a3 = class extends Disposable {
-  constructor(_localService) {
+  constructor(_localeService) {
     super();
     __publicField(this, "_fontLocale");
     __publicField(this, "_dirty", !0);
-    this._localService = _localService, this._localeInitial();
+    this._localeService = _localeService, this._localeInitial();
   }
   get dirty() {
     return this._dirty;
@@ -7267,7 +7268,7 @@ function getFontCreateConfig(index2, viewModel, paragraphNode, sectionBreakConfi
     },
     marginRight = 0,
     marginLeft = 0,
-    localeService,
+    // localeService,
     renderConfig = {}
   } = sectionBreakConfig, { paragraphStyle = {}, bullet } = paragraph, { isRenderStyle } = renderConfig, { startIndex } = paragraphNode, originTextRun = viewModel.getTextRun(index2 + startIndex), textRun = isRenderStyle === BooleanNumber.FALSE ? DEFAULT_TEXT_RUN : originTextRun != null ? originTextRun : DEFAULT_TEXT_RUN, customDecoration = viewModel.getCustomDecoration(index2 + startIndex), showCustomDecoration = customDecoration && customDecoration.show !== !1, customDecorationStyle = showCustomDecoration ? getCustomDecorationStyle(customDecoration) : null, customRange = viewModel.getCustomRange(index2 + startIndex), showCustomRange = customRange && customRange.show !== !1, customRangeStyle = showCustomRange ? getCustomRangeStyle(customRange) : null, hasAddonStyle = showCustomRange || showCustomDecoration || !!bullet, { st, ed } = textRun;
   let { ts: textStyle = {} } = textRun;
@@ -7321,10 +7322,46 @@ const DEFAULT_SECTION_BREAK = {
   columnSeparatorType: ColumnSeparatorType.NONE,
   sectionType: SectionType.SECTION_TYPE_UNSPECIFIED,
   startIndex: 0
-}, DEFAULT_PAGE_SIZE = { width: Number.POSITIVE_INFINITY, height: Number.POSITIVE_INFINITY };
+}, DEFAULT_PAGE_SIZE = { width: Number.POSITIVE_INFINITY, height: Number.POSITIVE_INFINITY }, DEFAULT_MODERN_DOCUMENT_STYLE = {
+  pageNumberStart: 1,
+  pageSize: {
+    width: ptToPixel(595),
+    height: Number.POSITIVE_INFINITY
+  },
+  marginTop: ptToPixel(50),
+  marginBottom: ptToPixel(50),
+  marginRight: ptToPixel(50),
+  marginLeft: ptToPixel(50),
+  renderConfig: {
+    vertexAngle: 0,
+    centerAngle: 0,
+    background: {
+      rgb: "#FFFFFF"
+    }
+  },
+  defaultHeaderId: "",
+  defaultFooterId: "",
+  evenPageHeaderId: "",
+  evenPageFooterId: "",
+  firstPageHeaderId: "",
+  firstPageFooterId: "",
+  evenAndOddHeaders: BooleanNumber.FALSE,
+  useFirstPageHeaderFooter: BooleanNumber.FALSE,
+  marginHeader: 0,
+  marginFooter: 0
+}, DEFAULT_MODERN_SECTION_BREAK = {
+  columnProperties: [],
+  columnSeparatorType: ColumnSeparatorType.NONE,
+  sectionType: SectionType.SECTION_TYPE_UNSPECIFIED
+};
 function prepareSectionBreakConfig(ctx, nodeIndex) {
   var _a10;
-  const { viewModel, dataModel, docsConfig } = ctx, sectionNode = viewModel.children[nodeIndex], sectionBreak = viewModel.getSectionBreak(sectionNode.endIndex) || DEFAULT_SECTION_BREAK, { documentStyle } = dataModel, {
+  const { viewModel, dataModel, docsConfig } = ctx, sectionNode = viewModel.children[nodeIndex];
+  let { documentStyle } = dataModel;
+  const { documentFlavor } = documentStyle;
+  let sectionBreak = viewModel.getSectionBreak(sectionNode.endIndex) || DEFAULT_SECTION_BREAK;
+  documentFlavor === DocumentFlavor.MODERN && (sectionBreak = Object.assign({}, sectionBreak, DEFAULT_MODERN_SECTION_BREAK), documentStyle = Object.assign({}, documentStyle, DEFAULT_MODERN_DOCUMENT_STYLE));
+  const {
     pageNumberStart: global_pageNumberStart = 1,
     // pageNumberStart
     pageSize: global_pageSize = DEFAULT_PAGE_SIZE,
@@ -7904,7 +7941,7 @@ function getDefaultBulletSke(listId, startIndex = 1) {
   };
 }
 __name(getDefaultBulletSke, "getDefaultBulletSke");
-function _getBulletSke(listId, nestingLevel, nestings, listLevelAncestors, textStyleConfig, localeService) {
+function _getBulletSke(listId, nestingLevel, nestings, listLevelAncestors, textStyleConfig, _localeService) {
   var _a10, _b;
   const nesting = nestings[nestingLevel], {
     bulletAlignment,
@@ -13826,7 +13863,13 @@ function compareFontInfoDistance(a, b) {
 __name(compareFontInfoDistance, "compareFontInfoDistance");
 async function checkLocalFontsPermission() {
   var _a10;
-  return typeof window > "u" ? void 0 : window.navigator == null || ((_a10 = window.navigator) == null ? void 0 : _a10.permissions) == null ? !1 : (await window.navigator.permissions.query({ name: "local-fonts" })).state === "granted";
+  if (typeof WorkerGlobalScope < "u" && self instanceof WorkerGlobalScope || typeof window > "u" || window.navigator == null || ((_a10 = window.navigator) == null ? void 0 : _a10.permissions) == null)
+    return !1;
+  try {
+    return (await window.navigator.permissions.query({ name: "local-fonts" })).state === "granted";
+  } catch {
+    return !1;
+  }
 }
 __name(checkLocalFontsPermission, "checkLocalFontsPermission");
 const _FontLibrary = class _FontLibrary {
@@ -24394,7 +24437,7 @@ const _DocumentSkeleton = class _DocumentSkeleton extends Skeleton {
       footerTreeMap,
       lists,
       drawings,
-      localeService: this._localService,
+      localeService: this._localeService,
       paragraphLineGapDefault,
       defaultTabStop,
       documentTextStyle: textStyle
@@ -24592,6 +24635,88 @@ const _DocumentSkeleton = class _DocumentSkeleton extends Skeleton {
 };
 __name(_DocumentSkeleton, "DocumentSkeleton");
 let DocumentSkeleton = _DocumentSkeleton;
+function createDocumentModelWithStyle(content, textStyle, config = {}) {
+  const contentLength = content.length, {
+    textRotation,
+    paddingData = DEFAULT_PADDING_DATA,
+    horizontalAlign = HorizontalAlign.UNSPECIFIED,
+    verticalAlign = VerticalAlign.UNSPECIFIED,
+    wrapStrategy = WrapStrategy.UNSPECIFIED,
+    cellValueType
+  } = config, { t: marginTop, r: marginRight, b: marginBottom, l: marginLeft } = paddingData, { vertexAngle, centerAngle } = convertTextRotation(textRotation), documentData = {
+    id: "d",
+    body: {
+      dataStream: `${content}${DEFAULT_EMPTY_DOCUMENT_VALUE}`,
+      textRuns: [
+        {
+          ts: textStyle,
+          st: 0,
+          ed: contentLength
+        }
+      ],
+      paragraphs: [
+        {
+          startIndex: contentLength,
+          paragraphStyle: {
+            horizontalAlign
+          }
+        }
+      ],
+      sectionBreaks: [{
+        startIndex: contentLength + 1
+      }]
+    },
+    documentStyle: {
+      pageSize: {
+        width: Number.POSITIVE_INFINITY,
+        height: Number.POSITIVE_INFINITY
+      },
+      marginTop,
+      marginBottom,
+      marginRight,
+      marginLeft,
+      renderConfig: {
+        horizontalAlign,
+        verticalAlign,
+        centerAngle,
+        vertexAngle,
+        wrapStrategy,
+        cellValueType
+      }
+    },
+    drawings: {},
+    drawingsOrder: []
+  };
+  return new DocumentDataModel(documentData);
+}
+__name(createDocumentModelWithStyle, "createDocumentModelWithStyle");
+function extractOtherStyle(style) {
+  if (!style) return {};
+  const {
+    tr: textRotation,
+    td: textDirection,
+    ht: horizontalAlign,
+    vt: verticalAlign,
+    tb: wrapStrategy,
+    pd: paddingData
+  } = style;
+  return {
+    textRotation,
+    textDirection,
+    horizontalAlign,
+    verticalAlign,
+    wrapStrategy,
+    paddingData
+  };
+}
+__name(extractOtherStyle, "extractOtherStyle");
+function getFontFormat(format) {
+  if (!format)
+    return {};
+  const { ff, fs, it, bl, ul, st, ol, cl } = format, style = {};
+  return ff && (style.ff = ff), fs && (style.fs = fs), it && (style.it = it), bl && (style.bl = bl), ul && (style.ul = ul), st && (style.st = st), ol && (style.ol = ol), cl && (style.cl = cl), style;
+}
+__name(getFontFormat, "getFontFormat");
 var __defProp$3 = Object.defineProperty, __getOwnPropDesc$3 = Object.getOwnPropertyDescriptor, __decorateClass$3 = /* @__PURE__ */ __name((decorators, target, key, kind) => {
   for (var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$3(target, key) : target, i = decorators.length - 1, decorator; i >= 0; i--)
     (decorator = decorators[i]) && (result = (kind ? decorator(target, key, result) : decorator(result)) || result);
@@ -24658,7 +24783,8 @@ const DEFAULT_CELL_DOCUMENT_MODEL_OPTION = {
 }, RENDER_RAW_FORMULA_KEY = "RENDER_RAW_FORMULA";
 var _a6;
 let SpreadsheetSkeleton = (_a6 = class extends Skeleton {
-  constructor(worksheet, _worksheetData, _cellData, _styles, _localeService, _contextService) {
+  constructor(worksheet, _worksheetData, _cellData, _styles, _localeService, _contextService, _configService) {
+    var _a10;
     super(_localeService);
     __publicField(this, "_rowHeightAccumulation", []);
     __publicField(this, "_columnWidthAccumulation", []);
@@ -24667,7 +24793,8 @@ let SpreadsheetSkeleton = (_a6 = class extends Skeleton {
     __publicField(this, "_rowHeaderWidth", 0);
     __publicField(this, "_columnHeaderHeight", 0);
     /**
-     * Range of visible area(range in viewBounds)
+     * Range viewBounds. only update by viewBounds.
+     * It would change multiple times in one frame if there is multiple viewport (after freeze row&col)
      */
     __publicField(this, "_visibleRange", {
       startRow: -1,
@@ -24675,6 +24802,7 @@ let SpreadsheetSkeleton = (_a6 = class extends Skeleton {
       startColumn: -1,
       endColumn: -1
     });
+    __publicField(this, "_visibleRangeMap", /* @__PURE__ */ new Map());
     // private _dataMergeCache: IRange[] = [];
     __publicField(this, "_overflowCache", new ObjectMatrix());
     __publicField(this, "_stylesCache", {
@@ -24691,8 +24819,12 @@ let SpreadsheetSkeleton = (_a6 = class extends Skeleton {
     __publicField(this, "_showGridlines", BooleanNumber.TRUE);
     __publicField(this, "_marginTop", 0);
     __publicField(this, "_marginLeft", 0);
+    /**
+     * Whether the row style precedes the column style.
+     */
+    __publicField(this, "_isRowStylePrecedeColumnStyle", !1);
     __publicField(this, "_renderRawFormula", !1);
-    this.worksheet = worksheet, this._worksheetData = _worksheetData, this._cellData = _cellData, this._styles = _styles, this._contextService = _contextService, this._updateLayout(), this._initContextListener();
+    this.worksheet = worksheet, this._worksheetData = _worksheetData, this._cellData = _cellData, this._styles = _styles, this._contextService = _contextService, this._configService = _configService, this._updateLayout(), this._initContextListener(), this._isRowStylePrecedeColumnStyle = (_a10 = this._configService.getConfig(IS_ROW_STYLE_PRECEDE_COLUMN_STYLE)) != null ? _a10 : !1;
   }
   get rowHeightAccumulation() {
     return this._rowHeightAccumulation;
@@ -24718,8 +24850,8 @@ let SpreadsheetSkeleton = (_a6 = class extends Skeleton {
   get rowColumnSegment() {
     return this._visibleRange;
   }
-  get visibleArea() {
-    return this._visibleRange;
+  visibleRangeByViewportKey(viewportKey) {
+    return this._visibleRangeMap.get(viewportKey);
   }
   // get dataMergeCache(): IRange[] {
   //     return this._dataMergeCache;
@@ -24800,16 +24932,61 @@ let SpreadsheetSkeleton = (_a6 = class extends Skeleton {
    * @param bounds
    * @returns boolean
    */
-  calculateSegment(bounds) {
-    return !this._worksheetData || (this._updateLayout(), !this._rowHeightAccumulation || !this._columnWidthAccumulation) ? !1 : (bounds != null && (this._visibleRange = this.getRowColumnSegment(bounds)), !0);
+  updateVisibleRange(bounds) {
+    if (!this._worksheetData || (this._updateLayout(), !this._rowHeightAccumulation || !this._columnWidthAccumulation))
+      return !1;
+    if (bounds != null) {
+      const range = this.getRowColumnSegment(bounds);
+      this._visibleRange = range, this._visibleRangeMap.set(bounds.viewportKey, range);
+    }
+    return !0;
   }
-  calculateWithoutClearingCache(bounds) {
-    if (this.calculateSegment(bounds))
-      return this._calculateStylesCache(), this;
+  /**
+   * Set border background and font to this._stylesCache by visible range, which derives from bounds)
+   * @param bounds viewBounds
+   */
+  setStylesCache(bounds) {
+    if (!this.updateVisibleRange(bounds))
+      return;
+    const rowColumnSegment = this._visibleRange, columnWidthAccumulation = this.columnWidthAccumulation, { startRow: visibleStartRow, endRow: visibleEndRow, startColumn: visibleStartColumn, endColumn: visibleEndColumn } = rowColumnSegment;
+    if (visibleEndColumn === -1 || visibleEndRow === -1) return;
+    const mergeRanges = this.getCurrentRowColumnSegmentMergeData(this._visibleRange);
+    for (const mergeRange of mergeRanges)
+      this._setStylesCacheForOneCell(mergeRange.startRow, mergeRange.startColumn, {
+        mergeRange
+      });
+    const expandStartCol = Math.max(0, visibleStartColumn - EXPAND_SIZE_FOR_RENDER_OVERFLOW), expandEndCol = Math.min(columnWidthAccumulation.length - 1, visibleEndColumn + EXPAND_SIZE_FOR_RENDER_OVERFLOW);
+    for (let r = visibleStartRow; r <= visibleEndRow; r++)
+      if (this.worksheet.getRowVisible(r) !== !1) {
+        for (let c = visibleStartColumn; c <= visibleEndColumn; c++)
+          this._setStylesCacheForOneCell(r, c, { cacheItem: { bg: !0, border: !0 } });
+        for (let c = expandStartCol; c < visibleEndColumn; c++)
+          this._setStylesCacheForOneCell(r, c, { cacheItem: { bg: !1, border: !1 } });
+        if (visibleEndColumn !== 0)
+          for (let c = visibleEndColumn + 1; c < expandEndCol; c++)
+            this._setStylesCacheForOneCell(r, c, { cacheItem: { bg: !1, border: !1 } });
+      }
+    return this;
   }
   calculate(bounds) {
-    return this._resetCache(), this.calculateWithoutClearingCache(bounds), this;
+    return this._resetCache(), this.setStylesCache(bounds), this;
+  }
+  _hasUnMergedCellInRow(rowIndex, startColumn, endColumn) {
+    if (!this.worksheet.getMergeData())
+      return !1;
+    for (let i = startColumn; i <= endColumn; i++) {
+      const { isMerged, isMergedMainCell } = this._getCellMergeInfo(rowIndex, i);
+      if (!isMerged && !isMergedMainCell)
+        return !0;
+    }
+    return !1;
   }
+  //#region auto height
+  /**
+   * Calc all auto height by getDocsSkeletonPageSize in ranges
+   * @param ranges
+   * @returns {IRowAutoHeightInfo[]} result
+   */
   calculateAutoHeightInRange(ranges) {
     var _a10;
     if (!Tools.isArray(ranges))
@@ -24831,24 +25008,10 @@ let SpreadsheetSkeleton = (_a6 = class extends Skeleton {
     }
     return results;
   }
-  _hasUnMergedCellInRow(rowIndex, startColumn, endColumn) {
-    if (!this.worksheet.getMergeData())
-      return !1;
-    for (let i = startColumn; i <= endColumn; i++) {
-      const { isMerged, isMergedMainCell } = this._getCellMergeInfo(rowIndex, i);
-      if (!isMerged && !isMergedMainCell)
-        return !0;
-    }
-    return !1;
-  }
-  // TODO: auto height
   _calculateRowAutoHeight(rowNum) {
     var _a10, _b, _c;
-    const { columnCount, columnData, defaultRowHeight, defaultColumnWidth } = this._worksheetData;
+    const worksheet = this.worksheet, { columnCount, columnData, defaultRowHeight, defaultColumnWidth } = this._worksheetData;
     let height = defaultRowHeight;
-    const worksheet = this.worksheet;
-    if (!worksheet)
-      return height;
     for (let i = 0; i < columnCount; i++) {
       const { isMerged, isMergedMainCell } = this._getCellMergeInfo(rowNum, i);
       if (isMerged || isMergedMainCell)
@@ -24869,7 +25032,7 @@ let SpreadsheetSkeleton = (_a6 = class extends Skeleton {
         continue;
       const documentViewModel = new DocumentViewModel(documentModel), { vertexAngle: angle } = convertTextRotation(textRotation), colWidth = (_b = (_a10 = columnData[i]) == null ? void 0 : _a10.w) != null ? _b : defaultColumnWidth;
       typeof colWidth == "number" && wrapStrategy === WrapStrategy.WRAP && documentModel.updateDocumentDataPageSize(colWidth);
-      const documentSkeleton = DocumentSkeleton.create(documentViewModel, this._localService);
+      const documentSkeleton = DocumentSkeleton.create(documentViewModel, this._localeService);
       documentSkeleton.calculate();
       let { height: h = 0 } = (_c = getDocsSkeletonPageSize(documentSkeleton, angle)) != null ? _c : {};
       if (documentSkeleton) {
@@ -24885,6 +25048,95 @@ let SpreadsheetSkeleton = (_a6 = class extends Skeleton {
     }
     return Math.min(height, MAXIMUM_ROW_HEIGHT);
   }
+  //#endregion
+  //#region calculate auto width
+  calculateAutoWidthInRange(ranges) {
+    if (!Tools.isArray(ranges))
+      return [];
+    const results = [], calculatedCols = /* @__PURE__ */ new Set();
+    for (const range of ranges) {
+      const { startColumn, endColumn } = range;
+      for (let colIndex = startColumn; colIndex <= endColumn; colIndex++) {
+        if (!this.worksheet.getColVisible(colIndex) || calculatedCols.has(colIndex)) continue;
+        const autoWidth = this._calculateColWidth(colIndex);
+        calculatedCols.add(colIndex), results.push({
+          col: colIndex,
+          width: autoWidth
+        });
+      }
+    }
+    return results;
+  }
+  /**
+   * Iterate rows in visible area(and rows around it) and return column width of the specified column(by column index)
+   *
+   * @param colIndex
+   * @returns {number} width
+   */
+  _calculateColWidth(colIndex) {
+    var _a10, _b;
+    const worksheet = this.worksheet;
+    let colWidth = 0;
+    const visibleRangeViewMain = this.visibleRangeByViewportKey(SHEET_VIEWPORT_KEY.VIEW_MAIN);
+    if (!visibleRangeViewMain) return colWidth;
+    const { startRow: startRowOfViewMain, endRow: endRowOfViewMain } = visibleRangeViewMain, rowCount = this.worksheet.getRowCount(), checkStart = Math.max(0, startRowOfViewMain - 1e4), checkEnd = Math.min(rowCount, endRowOfViewMain + 1e4), otherRowIndex = /* @__PURE__ */ new Set();
+    otherRowIndex.add(0), otherRowIndex.add(rowCount - 1);
+    const visibleRangeViewMainTop = this.visibleRangeByViewportKey(SHEET_VIEWPORT_KEY.VIEW_MAIN_TOP);
+    if (visibleRangeViewMainTop) {
+      const { startRow: startRowOfViewMainTop, endRow: endRowOfViewMainTop } = visibleRangeViewMainTop;
+      for (let i = startRowOfViewMainTop; i <= endRowOfViewMainTop; i++)
+        otherRowIndex.add(i);
+    }
+    const rowIdxArr = (/* @__PURE__ */ __name((start, end, additionalArr) => [...Array.from(
+      { length: end - start + 1 },
+      (_2, i) => i + start
+    ), ...additionalArr], "createRowSequence"))(checkStart, checkEnd, otherRowIndex), preColIndex = Math.max(0, colIndex - 1), currColWidth = this._columnWidthAccumulation[colIndex] - this._columnWidthAccumulation[preColIndex];
+    for (let i = 0; i < rowIdxArr.length; i++) {
+      const row = rowIdxArr[i], { isMerged, isMergedMainCell } = this._getCellMergeInfo(colIndex, row);
+      if (isMerged && !isMergedMainCell || !this.worksheet.getRowVisible(row)) continue;
+      const cell = worksheet.getCell(row, colIndex);
+      if (!cell || cell.p && (row + 1e3 <= startRowOfViewMain || row - 1e3 >= endRowOfViewMain))
+        continue;
+      let measuredWidth = this._getMeasuredWidthByCell(cell, currColWidth);
+      if (cell.fontRenderExtension && (measuredWidth += (((_a10 = cell.fontRenderExtension) == null ? void 0 : _a10.leftOffset) || 0) + (((_b = cell.fontRenderExtension) == null ? void 0 : _b.rightOffset) || 0)), colWidth = Math.max(colWidth, measuredWidth), colWidth >= MAXIMUM_COL_WIDTH)
+        return MAXIMUM_COL_WIDTH;
+    }
+    return colWidth === 0 ? currColWidth : colWidth;
+  }
+  /**
+   * For _calculateColMaxWidth
+   * @param cell
+   * @returns {number} width
+   */
+  _getMeasuredWidthByCell(cell, currColWidth) {
+    var _a10, _b, _c;
+    let measuredWidth = 0;
+    if ((_a10 = cell.fontRenderExtension) != null && _a10.isSkip && (cell != null && cell.interceptorAutoWidth)) {
+      const cellWidth = (_b = cell.interceptorAutoWidth) == null ? void 0 : _b.call(cell);
+      if (cellWidth)
+        return cellWidth;
+    }
+    const modelObject = this._getCellDocumentModel(cell);
+    if (modelObject == null)
+      return measuredWidth;
+    const { documentModel, textRotation } = modelObject;
+    if (documentModel == null)
+      return measuredWidth;
+    const documentViewModel = new DocumentViewModel(documentModel), { vertexAngle: angle } = convertTextRotation(textRotation), cellStyle = this._styles.getStyleByCell(cell);
+    (cellStyle == null ? void 0 : cellStyle.tb) === WrapStrategy.WRAP ? documentModel.updateDocumentDataPageSize(currColWidth, 1 / 0) : documentModel.updateDocumentDataPageSize(1 / 0, 1 / 0);
+    const documentSkeleton = DocumentSkeleton.create(documentViewModel, this._localeService);
+    if (documentSkeleton.calculate(), measuredWidth = ((_c = getDocsSkeletonPageSize(documentSkeleton, angle)) != null ? _c : { width: 0 }).width, documentSkeleton) {
+      const skeletonData = documentSkeleton.getSkeletonData(), {
+        marginTop: t,
+        marginBottom: b,
+        marginLeft: l,
+        marginRight: r
+      } = skeletonData.pages[skeletonData.pages.length - 1], absAngleInRad = Math.abs(degToRad(angle));
+      measuredWidth += t * Math.sin(absAngleInRad) + r * Math.cos(absAngleInRad) + b * Math.sin(absAngleInRad) + l * Math.cos(absAngleInRad);
+    }
+    return measuredWidth;
+  }
+  //#endregion
   /**
    * Calculate data for row col & cell position, then update position value to this._rowHeaderWidth & this._rowHeightAccumulation & this._columnHeaderHeight & this._columnWidthAccumulation.
    */
@@ -25178,16 +25430,14 @@ let SpreadsheetSkeleton = (_a6 = class extends Skeleton {
   }
   // Only used for cell edit, and no need to rotate text when edit cell content!
   getBlankCellDocumentModel(cell) {
-    const documentModelObject = this._getCellDocumentModel(cell, {
-      ignoreTextRotation: !0
-    }), style = this._styles.getStyleByCell(cell), textStyle = this._getFontFormat(style);
+    const documentModelObject = this._getCellDocumentModel(cell, { ignoreTextRotation: !0 }), style = this._styles.getStyleByCell(cell), textStyle = getFontFormat(style);
     if (documentModelObject != null)
-      return documentModelObject.documentModel == null && (documentModelObject.documentModel = this._getDocumentDataByStyle("", textStyle, {})), documentModelObject;
+      return documentModelObject.documentModel == null && (documentModelObject.documentModel = createDocumentModelWithStyle("", textStyle)), documentModelObject;
     const content = "";
     let fontString = "document";
     const textRotation = DEFAULT_STYLES.tr, horizontalAlign = DEFAULT_STYLES.ht, verticalAlign = DEFAULT_STYLES.vt, wrapStrategy = DEFAULT_STYLES.tb, paddingData = DEFAULT_PADDING_DATA;
-    return fontString = getFontStyleString({}, this._localService).fontCache, {
-      documentModel: this._getDocumentDataByStyle(content, textStyle, {}),
+    return fontString = getFontStyleString({}).fontCache, {
+      documentModel: createDocumentModelWithStyle(content, textStyle),
       fontString,
       textRotation,
       wrapStrategy,
@@ -25221,11 +25471,11 @@ let SpreadsheetSkeleton = (_a6 = class extends Skeleton {
     if (!cell)
       return;
     let documentModel, fontString = "document";
-    const cellOtherConfig = this._getOtherStyle(style), textRotation = ignoreTextRotation ? DEFAULT_STYLES.tr : cellOtherConfig.textRotation || DEFAULT_STYLES.tr;
+    const cellOtherConfig = extractOtherStyle(style), textRotation = ignoreTextRotation ? DEFAULT_STYLES.tr : cellOtherConfig.textRotation || DEFAULT_STYLES.tr;
     let horizontalAlign = cellOtherConfig.horizontalAlign || DEFAULT_STYLES.ht;
     const verticalAlign = cellOtherConfig.verticalAlign || DEFAULT_STYLES.vt, wrapStrategy = cellOtherConfig.wrapStrategy || DEFAULT_STYLES.tb, paddingData = cellOtherConfig.paddingData || DEFAULT_PADDING_DATA;
     if (cell.f && displayRawFormula)
-      documentModel = this._getDocumentDataByStyle(cell.f.toString(), {}, { verticalAlign }), horizontalAlign = DEFAULT_STYLES.ht;
+      documentModel = createDocumentModelWithStyle(cell.f.toString(), {}, { verticalAlign }), horizontalAlign = DEFAULT_STYLES.ht;
     else if (cell.p) {
       const { centerAngle, vertexAngle } = convertTextRotation(textRotation);
       documentModel = this._updateConfigAndGetDocumentModel(
@@ -25241,10 +25491,10 @@ let SpreadsheetSkeleton = (_a6 = class extends Skeleton {
         }
       );
     } else if (cell.v != null) {
-      const textStyle = this._getFontFormat(style);
-      fontString = getFontStyleString(textStyle, this._localService).fontCache;
+      const textStyle = getFontFormat(style);
+      fontString = getFontStyleString(textStyle).fontCache;
       let cellText = extractPureTextFromCell(cell);
-      cell.t === CellValueType.FORCE_STRING && displayRawFormula && (cellText = `'${cellText}`), documentModel = this._getDocumentDataByStyle(cellText, textStyle, {
+      cell.t === CellValueType.FORCE_STRING && displayRawFormula && (cellText = `'${cellText}`), documentModel = createDocumentModelWithStyle(cellText, textStyle, {
         ...cellOtherConfig,
         textRotation,
         cellValueType: cell.t
@@ -25379,6 +25629,12 @@ let SpreadsheetSkeleton = (_a6 = class extends Skeleton {
       rowHeightAccumulation
     };
   }
+  /**
+   * Calc columnWidthAccumulation by columnData
+   * @param colCount
+   * @param columnData
+   * @param defaultColumnWidth
+   */
   _generateColumnMatrixCache(colCount, columnData, defaultColumnWidth) {
     let columnTotalWidth = 0;
     const columnWidthAccumulation = [], data2 = columnData;
@@ -25435,19 +25691,6 @@ let SpreadsheetSkeleton = (_a6 = class extends Skeleton {
   intersectMergeRange(row, column) {
     return !!this.worksheet.getMergedCell(row, column);
   }
-  // private _getMergeRangeCache() {
-  //     const dataMergeCache = this.dataMergeCache;
-  //     const mergeRangeCache = new ObjectMatrix<ObjectMatrix<boolean>>();
-  //     dataMergeCache?.forEach((r, dataMergeRow) => {
-  //         dataMergeRow?.forEach((c, dataCache) => {
-  //             const { startRow: startRowMargeIndex, endRow: endRowMargeIndex, startColumn: startColumnMargeIndex, endColumn: endColumnMargeIndex } = dataCache;
-  //             const endObject = new ObjectMatrix<boolean>();
-  //             endObject.setValue(endRowMargeIndex, endColumnMargeIndex, true);
-  //             mergeRangeCache.setValue(startRowMargeIndex, startColumnMargeIndex, endObject);
-  //         });
-  //     });
-  //     return mergeRangeCache;
-  // }
   /**
    * get the current row and column segment visible merge data
    * @returns {IRange} The visible merge data
@@ -25461,25 +25704,6 @@ let SpreadsheetSkeleton = (_a6 = class extends Skeleton {
       startColumn: 0
     } : 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._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 } });
-      }
-  }
   resetCache() {
     this._resetCache();
   }
@@ -25524,7 +25748,7 @@ let SpreadsheetSkeleton = (_a6 = class extends Skeleton {
     if (documentModel == null) return;
     const { fontString: _fontString, textRotation, wrapStrategy, verticalAlign, horizontalAlign } = modelObject, documentViewModel = new DocumentViewModel(documentModel);
     if (documentViewModel) {
-      const { vertexAngle, centerAngle } = convertTextRotation(textRotation), documentSkeleton = DocumentSkeleton.create(documentViewModel, this._localService);
+      const { vertexAngle, centerAngle } = convertTextRotation(textRotation), documentSkeleton = DocumentSkeleton.create(documentViewModel, this._localeService);
       documentSkeleton.calculate();
       const config = {
         documentSkeleton,
@@ -25538,12 +25762,12 @@ let SpreadsheetSkeleton = (_a6 = class extends Skeleton {
     }
   }
   /**
-   * Set border background and font to this._stylesCache
+   * Set border background and font to this._stylesCache cell by cell.
    * @param row {number}
    * @param col {number}
    * @param options {{ mergeRange: IRange; cacheItem: ICacheItem } | undefined}
    */
-  _setStylesCache(row, col, options) {
+  _setStylesCacheForOneCell(row, col, options) {
     if (row === -1 || col === -1)
       return;
     const handledBgCell = Tools.isDefine(this._handleBgMatrix.getValue(row, col)), handledBorderCell = Tools.isDefine(this._handleBorderMatrix.getValue(row, col));
@@ -25557,7 +25781,7 @@ let SpreadsheetSkeleton = (_a6 = class extends Skeleton {
       if (!isMergedMainCell)
         return;
     }
-    const cell = this.worksheet.getCell(row, col) || this.worksheet.getCellRaw(row, col), style = this._styles.getStyleByCell(cell);
+    const cell = this.worksheet.getCell(row, col) || this.worksheet.getCellRaw(row, col), cellStyle = this._styles.getStyleByCell(cell), columnStyle = this.worksheet.getColumnStyle(col), rowStyle = this.worksheet.getRowStyle(row), defaultStyle = this.worksheet.getDefaultCellStyleInternal(), style = this._isRowStylePrecedeColumnStyle ? composeStyles(defaultStyle, columnStyle, rowStyle, cellStyle) : composeStyles(defaultStyle, rowStyle, columnStyle, cellStyle);
     this._setBgStylesCache(row, col, style, options), this._setBorderStylesCache(row, col, style, options), this._setFontStylesCache(row, col, cell);
   }
   _updateConfigAndGetDocumentModel(documentData, horizontalAlign, paddingData, renderConfig) {
@@ -25573,60 +25797,6 @@ let SpreadsheetSkeleton = (_a6 = class extends Skeleton {
       paragraph.paragraphStyle || (paragraph.paragraphStyle = {}), paragraph.paragraphStyle.horizontalAlign = horizontalAlign;
     return new DocumentDataModel(documentData);
   }
-  _getDocumentDataByStyle(content, textStyle, config) {
-    const contentLength = content.length, {
-      textRotation,
-      paddingData = DEFAULT_PADDING_DATA,
-      horizontalAlign = HorizontalAlign.UNSPECIFIED,
-      verticalAlign = VerticalAlign.UNSPECIFIED,
-      wrapStrategy = WrapStrategy.UNSPECIFIED,
-      cellValueType
-    } = config, { t: marginTop, r: marginRight, b: marginBottom, l: marginLeft } = paddingData || {}, { vertexAngle, centerAngle } = convertTextRotation(textRotation), documentData = {
-      id: "d",
-      body: {
-        dataStream: `${content}${DEFAULT_EMPTY_DOCUMENT_VALUE}`,
-        textRuns: [
-          {
-            ts: textStyle,
-            st: 0,
-            ed: contentLength
-          }
-        ],
-        paragraphs: [
-          {
-            startIndex: contentLength,
-            paragraphStyle: {
-              horizontalAlign
-            }
-          }
-        ],
-        sectionBreaks: [{
-          startIndex: contentLength + 1
-        }]
-      },
-      documentStyle: {
-        pageSize: {
-          width: Number.POSITIVE_INFINITY,
-          height: Number.POSITIVE_INFINITY
-        },
-        marginTop,
-        marginBottom,
-        marginRight,
-        marginLeft,
-        renderConfig: {
-          horizontalAlign,
-          verticalAlign,
-          centerAngle,
-          vertexAngle,
-          wrapStrategy,
-          cellValueType
-        }
-      },
-      drawings: {},
-      drawingsOrder: []
-    };
-    return new DocumentDataModel(documentData);
-  }
   /**
    * pro/issues/344
    * In Excel, for the border rendering of merged cells to take effect, the outermost cells need to have the same border style.
@@ -25694,26 +25864,6 @@ let SpreadsheetSkeleton = (_a6 = class extends Skeleton {
     const { ff, fs, it, bl, ul, st, ol, cl } = format, style = {};
     return ff && (style.ff = ff), fs && (style.fs = fs), it && (style.it = it), bl && (style.bl = bl), ul && (style.ul = ul), st && (style.st = st), ol && (style.ol = ol), cl && (style.cl = cl), style;
   }
-  _getOtherStyle(format) {
-    if (!format)
-      return {};
-    const {
-      tr: textRotation,
-      td: textDirection,
-      ht: horizontalAlign,
-      vt: verticalAlign,
-      tb: wrapStrategy,
-      pd: paddingData
-    } = format;
-    return {
-      textRotation,
-      textDirection,
-      horizontalAlign,
-      verticalAlign,
-      wrapStrategy,
-      paddingData
-    };
-  }
   /**
    * New version to get merge data.
    * @param row
@@ -25765,7 +25915,8 @@ let SpreadsheetSkeleton = (_a6 = class extends Skeleton {
 }, __name(_a6, "SpreadsheetSkeleton"), _a6);
 SpreadsheetSkeleton = __decorateClass$3([
   __decorateParam$3(4, Inject(LocaleService)),
-  __decorateParam$3(5, IContextService)
+  __decorateParam$3(5, IContextService),
+  __decorateParam$3(6, IConfigService)
 ], SpreadsheetSkeleton);
 const UNIQUE_KEY$6 = "DefaultFontExtension", _Font = class _Font extends SheetExtension {
   constructor() {
@@ -25814,12 +25965,10 @@ const UNIQUE_KEY$6 = "DefaultFontExtension", _Font = class _Font extends SheetEx
   }
   renderFontEachCell(renderFontCtx, row, col, fontMatrix) {
     var _a10;
-    const { ctx, viewRanges, diffRanges, spreadsheetSkeleton, cellInfo } = renderFontCtx;
-    let { startY, endY, startX, endX } = cellInfo;
-    const { isMerged, isMergedMainCell, mergeInfo } = cellInfo;
-    if (isMerged && !isMergedMainCell)
+    const { ctx, viewRanges, diffRanges, spreadsheetSkeleton, cellInfo } = renderFontCtx, { startY, endY, startX, endX } = cellInfo, { isMerged, isMergedMainCell, mergeInfo } = cellInfo;
+    if (renderFontCtx.startX = startX, renderFontCtx.startY = startY, renderFontCtx.endX = endX, renderFontCtx.endY = endY, isMerged && !isMergedMainCell)
       return !0;
-    isMergedMainCell && (startY = mergeInfo.startY, endY = mergeInfo.endY, startX = mergeInfo.startX, endX = mergeInfo.endX);
+    isMergedMainCell && (renderFontCtx.startX = mergeInfo.startX, renderFontCtx.startY = mergeInfo.startY, renderFontCtx.endX = mergeInfo.endX, renderFontCtx.endY = mergeInfo.endY);
     const fontsConfig = fontMatrix.getValue(row, col);
     if (!fontsConfig) return !0;
     const overflowRange = spreadsheetSkeleton.overflowCache.getValue(row, col), renderRange = diffRanges && diffRanges.length > 0 ? diffRanges : viewRanges;
@@ -25830,7 +25979,7 @@ const UNIQUE_KEY$6 = "DefaultFontExtension", _Font = class _Font extends SheetEx
     const cellData = spreadsheetSkeleton.worksheet.getCell(row, col) || {};
     if ((_a10 = cellData.fontRenderExtension) != null && _a10.isSkip)
       return !0;
-    ctx.save(), ctx.beginPath(), renderFontCtx.overflowRectangle = overflowRange, renderFontCtx.cellData = cellData, renderFontCtx.startX = startX, renderFontCtx.startY = startY, renderFontCtx.endX = endX, renderFontCtx.endY = endY, this._setFontRenderBounds(renderFontCtx, row, col, fontMatrix), ctx.translate(startX + FIX_ONE_PIXEL_BLUR_OFFSET, startY + FIX_ONE_PIXEL_BLUR_OFFSET), this._renderDocuments(ctx, fontsConfig, renderFontCtx.startX, renderFontCtx.startY, renderFontCtx.endX, renderFontCtx.endY, row, col, spreadsheetSkeleton.overflowCache), ctx.closePath(), ctx.restore();
+    ctx.save(), ctx.beginPath(), renderFontCtx.overflowRectangle = overflowRange, renderFontCtx.cellData = cellData, this._setFontRenderBounds(renderFontCtx, row, col, fontMatrix), ctx.translate(renderFontCtx.startX + FIX_ONE_PIXEL_BLUR_OFFSET, renderFontCtx.startY + FIX_ONE_PIXEL_BLUR_OFFSET), this._renderDocuments(ctx, fontsConfig, renderFontCtx.startX, renderFontCtx.startY, renderFontCtx.endX, renderFontCtx.endY, row, col, spreadsheetSkeleton.overflowCache), ctx.closePath(), ctx.restore();
   }
   /**
    * Change font render bounds, for overflow and filter icon & custom render.
@@ -26066,7 +26215,6 @@ const UNIQUE_KEY$4 = "DefaultRowHeaderLayoutExtension", DEFAULT_ROW_STYLE = {
 __name(_RowHeaderLayout, "RowHeaderLayout");
 let RowHeaderLayout = _RowHeaderLayout;
 SheetRowHeaderExtensionRegistry.add(new RowHeaderLayout());
-var ShowGridlinesState = /* @__PURE__ */ ((ShowGridlinesState2) => (ShowGridlinesState2[ShowGridlinesState2.OFF = 0] = "OFF", ShowGridlinesState2[ShowGridlinesState2.ON = 1] = "ON", ShowGridlinesState2))(ShowGridlinesState || {}), SHEET_VIEWPORT_KEY = /* @__PURE__ */ ((SHEET_VIEWPORT_KEY2) => (SHEET_VIEWPORT_KEY2.VIEW_MAIN = "viewMain", SHEET_VIEWPORT_KEY2.VIEW_MAIN_LEFT_TOP = "viewMainLeftTop", SHEET_VIEWPORT_KEY2.VIEW_MAIN_TOP = "viewMainTop", SHEET_VIEWPORT_KEY2.VIEW_MAIN_LEFT = "viewMainLeft", SHEET_VIEWPORT_KEY2.VIEW_ROW_TOP = "viewRowTop", SHEET_VIEWPORT_KEY2.VIEW_ROW_BOTTOM = "viewRowBottom", SHEET_VIEWPORT_KEY2.VIEW_COLUMN_LEFT = "viewColumnLeft", SHEET_VIEWPORT_KEY2.VIEW_COLUMN_RIGHT = "viewColumnRight", SHEET_VIEWPORT_KEY2.VIEW_LEFT_TOP = "viewLeftTop", SHEET_VIEWPORT_KEY2))(SHEET_VIEWPORT_KEY || {});
 const _SpreadsheetRowHeader = class _SpreadsheetRowHeader extends SpreadsheetHeader {
   constructor(oKey, spreadsheetSkeleton) {
     super(oKey, spreadsheetSkeleton);
@@ -26090,7 +26238,7 @@ const _SpreadsheetRowHeader = class _SpreadsheetRowHeader extends SpreadsheetHea
     if (!spreadsheetSkeleton)
       return;
     const parentScale = this.getParentScale();
-    spreadsheetSkeleton.calculateSegment(bounds);
+    spreadsheetSkeleton.updateVisibleRange(bounds);
     const segment = spreadsheetSkeleton.rowColumnSegment;
     if (!segment || segment.startRow === -1 && segment.endRow === -1)
       return;
@@ -26444,10 +26592,10 @@ const BASE_OBJECT_ARRAY_Set = new Set(BASE_OBJECT_ARRAY), SHAPE_OBJECT_ARRAY = [
       return;
     const transformState = {};
     let hasTransformState = !1;
-    const hasRotateEnabled = (props == null ? void 0 : props.rotateEnabled) !== void 0, hasResizeEnabled = (props == null ? void 0 : props.resizeEnabled) !== void 0;
-    if (hasRotateEnabled || hasResizeEnabled) {
+    const hasRotateEnabled = (props == null ? void 0 : props.rotateEnabled) !== void 0, hasResizeEnabled = (props == null ? void 0 : props.resizeEnabled) !== void 0, hasBorderEnabled = (props == null ? void 0 : props.borderEnabled) !== void 0;
+    if (hasRotateEnabled || hasResizeEnabled || hasBorderEnabled) {
       const transformerConfig = this.transformerConfig || {};
-      hasRotateEnabled && (transformerConfig.rotateEnabled = props == null ? void 0 : props.rotateEnabled), hasResizeEnabled && (transformerConfig.resizeEnabled = props == null ? void 0 : props.resizeEnabled), this.transformerConfig = { ...transformerConfig };
+      hasRotateEnabled && (transformerConfig.rotateEnabled = props == null ? void 0 : props.rotateEnabled), hasResizeEnabled && (transformerConfig.resizeEnabled = props == null ? void 0 : props.resizeEnabled), hasBorderEnabled && (transformerConfig.borderEnabled = props == null ? void 0 : props.borderEnabled), this.transformerConfig = { ...transformerConfig };
     }
     themeKeys.forEach((key) => {
       if (props[key] === void 0)
@@ -26552,6 +26700,9 @@ const RECT_OBJECT_ARRAY = ["radius"], _Rect = class _Rect extends Shape {
   get radius() {
     return this._radius;
   }
+  setObjectType(type) {
+    this.objectType = type;
+  }
   static drawWith(ctx, props) {
     let { radius, width, height } = props;
     if (radius = radius != null ? radius : 0, width = width != null ? width : 0, height = height != null ? height : 0, ctx.save(), ctx.beginPath(), props.strokeDashArray && ctx.setLineDash(props.strokeDashArray), props.visualHeight && (ctx.translate(0, (height - (props.visualHeight || 0)) / 2), height = props.visualHeight), props.visualWidth && (ctx.translate((width - (props.visualWidth || 0)) / 2, 0), width = props.visualWidth), !radius)
@@ -27952,11 +28103,11 @@ const UNIQUE_KEY = "DefaultDocsLineExtension", DOC_EXTENSION_Z_INDEX = 40, _Line
   }
   draw(ctx, parentScale, glyph) {
     var _a10;
-    const line2 = (_a10 = glyph.parent) == null ? void 0 : _a10.parent, { renderConfig } = this.extensionOffset, vertexAngle = (renderConfig == null ? void 0 : renderConfig.vertexAngle) || 0, drawStrikeAndUnderline = !(((renderConfig == null ? void 0 : renderConfig.centerAngle) || 0) === 0 && vertexAngle !== 0 && vertexAngle % 90 === 0), { ts: textStyle, bBox, content } = glyph;
+    const line2 = (_a10 = glyph.parent) == null ? void 0 : _a10.parent, { ts: textStyle, bBox, content } = glyph;
     if (line2 == null || textStyle == null || content === "\r")
       return;
     const { asc, dsc } = line2, { sp: strikeoutPosition, spo, sbo, bd } = bBox, scale = getScale(parentScale), DELTA = 0.5, { ul: underline, st: strikethrough, ol: overline, va: baselineOffset, bbl: bottomBorderLine } = textStyle;
-    if (drawStrikeAndUnderline && underline) {
+    if (underline) {
       const startY = asc + dsc;
       this._drawLine(ctx, glyph, underline, startY, scale);
     }
@@ -27964,7 +28115,7 @@ const UNIQUE_KEY = "DefaultDocsLineExtension", DOC_EXTENSION_Z_INDEX = 40, _Line
       const startY = asc + dsc + 3;
       this._drawLine(ctx, glyph, bottomBorderLine, startY, scale, 2);
     }
-    if (drawStrikeAndUnderline && strikethrough) {
+    if (strikethrough) {
       let startY = asc + bd - strikeoutPosition - DELTA;
       baselineOffset === BaselineOffset.SUPERSCRIPT ? startY -= spo : baselineOffset === BaselineOffset.SUBSCRIPT && (startY += sbo), this._drawLine(ctx, glyph, strikethrough, startY, scale);
     }
@@ -27986,11 +28137,11 @@ const UNIQUE_KEY = "DefaultDocsLineExtension", DOC_EXTENSION_Z_INDEX = 40, _Line
       originTranslate = Vector2.create(0, 0),
       alignOffset = Vector2.create(0, 0),
       renderConfig = {}
-    } = this.extensionOffset, { left, width } = glyph, { centerAngle: centerAngleDeg = 0, vertexAngle: vertexAngleDeg = 0 } = renderConfig, centerAngle = degToRad(centerAngleDeg), vertexAngle = degToRad(vertexAngleDeg);
-    ctx.save(), ctx.translateWithPrecisionRatio(FIX_ONE_PIXEL_BLUR_OFFSET, FIX_ONE_PIXEL_BLUR_OFFSET);
+    } = this.extensionOffset, { left, width } = glyph, { centerAngle: centerAngleDeg = 0, vertexAngle: vertexAngleDeg = 0 } = renderConfig;
+    ctx.save();
     const color = (c === BooleanNumber.TRUE ? getColorStyle((_a10 = glyph.ts) == null ? void 0 : _a10.cl) : getColorStyle(colorStyle)) || COLOR_BLACK_RGB;
     ctx.strokeStyle = color, ctx.lineWidth = lineWidth, this._setLineType(ctx, lineType || TextDecoration.SINGLE);
-    const start = calculateRectRotate(
+    const centerAngle = degToRad(centerAngleDeg), vertexAngle = degToRad(vertexAngleDeg), start = calculateRectRotate(
       originTranslate.addByPoint(left, startY),
       Vector2.create(0, 0),
       centerAngle,
@@ -28017,8 +28168,6 @@ const _Documents = class _Documents extends DocComponent {
     super(oKey, documentSkeleton, config);
     __publicField(this, "_pageRender$", new Subject());
     __publicField(this, "pageRender$", this._pageRender$.asObservable());
-    __publicField(this, "docsLeft", 0);
-    __publicField(this, "docsTop", 0);
     __publicField(this, "_drawLiquid", new Liquid());
     this._initialDefaultExtension(), this.makeDirty(!0);
   }
@@ -28564,9 +28713,6 @@ const OBJECT_KEY = "__SHEET_EXTENSION_FONT_DOCUMENT_INSTANCE__", _Spreadsheet =
   get forceDisableGridlines() {
     return this._forceDisableGridlines;
   }
-  /**
-   * TODO: DR-Univer, fix as unknown as
-   */
   dispose() {
     var _a10;
     super.dispose(), (_a10 = this._documents) == null || _a10.dispose(), this._documents = null, this._backgroundExtension = null, this._borderExtension = null, this._fontExtension = null;
@@ -28721,7 +28867,7 @@ const OBJECT_KEY = "__SHEET_EXTENSION_FONT_DOCUMENT_INSTANCE__", _Spreadsheet =
     const spreadsheetSkeleton = this.getSkeleton();
     if (!spreadsheetSkeleton)
       return;
-    spreadsheetSkeleton.calculateWithoutClearingCache(viewportInfo);
+    spreadsheetSkeleton.setStylesCache(viewportInfo);
     const segment = spreadsheetSkeleton.rowColumnSegment;
     if (!segment || segment.startRow === -1 && segment.endRow === -1 || segment.startColumn === -1 && segment.endColumn === -1)
       return;
@@ -28729,7 +28875,7 @@ const OBJECT_KEY = "__SHEET_EXTENSION_FONT_DOCUMENT_INSTANCE__", _Spreadsheet =
     const { rowHeaderWidth, columnHeaderHeight } = spreadsheetSkeleton;
     mainCtx.translateWithPrecision(rowHeaderWidth, columnHeaderHeight);
     const { viewportKey } = viewportInfo;
-    return this.sheetContentViewport().includes(viewportKey) ? viewportInfo && viewportInfo.cacheCanvas ? this.renderByViewport(mainCtx, viewportInfo, spreadsheetSkeleton) : this._draw(mainCtx, viewportInfo) : this.sheetHeaderViewport().includes(viewportKey) || (viewportInfo && viewportInfo.cacheCanvas ? this.renderByViewport(mainCtx, viewportInfo, spreadsheetSkeleton) : this._draw(mainCtx, viewportInfo)), mainCtx.restore(), this;
+    return sheetContentViewportKeys.includes(viewportKey) ? viewportInfo && viewportInfo.cacheCanvas ? this.renderByViewport(mainCtx, viewportInfo, spreadsheetSkeleton) : this._draw(mainCtx, viewportInfo) : sheetHeaderViewportKeys.includes(viewportKey) || (viewportInfo && viewportInfo.cacheCanvas ? this.renderByViewport(mainCtx, viewportInfo, spreadsheetSkeleton) : this._draw(mainCtx, viewportInfo)), mainCtx.restore(), this;
   }
   /**
    * applyCache from cache canvas
@@ -28801,6 +28947,7 @@ const OBJECT_KEY = "__SHEET_EXTENSION_FONT_DOCUMENT_INSTANCE__", _Spreadsheet =
    */
   // eslint-disable-next-line max-lines-per-function
   _drawAuxiliary(ctx) {
+    var _a10;
     const spreadsheetSkeleton = this.getSkeleton();
     if (spreadsheetSkeleton == null)
       return;
@@ -28810,7 +28957,7 @@ const OBJECT_KEY = "__SHEET_EXTENSION_FONT_DOCUMENT_INSTANCE__", _Spreadsheet =
     const { rowHeightAccumulation, columnTotalWidth, columnWidthAccumulation, rowTotalHeight } = spreadsheetSkeleton;
     if (!rowHeightAccumulation || !columnWidthAccumulation || columnTotalWidth === void 0 || rowTotalHeight === void 0)
       return;
-    ctx.save(), ctx.setLineWidthByPrecision(1), ctx.strokeStyle = getColor([214, 216, 219]);
+    ctx.save(), ctx.setLineWidthByPrecision(1), ctx.strokeStyle = (_a10 = ctx.renderConfig.gridlineColor) != null ? _a10 : getColor([214, 216, 219]);
     const columnWidthAccumulationLength = columnWidthAccumulation.length, rowHeightAccumulationLength = rowHeightAccumulation.length, EXTRA_BOUND = 0.4, rowCount = endRow - startRow + 1, columnCount = endColumn - startColumn + 1, extraRowCount = Math.ceil(rowCount * EXTRA_BOUND), extraColumnCount = Math.ceil(columnCount * EXTRA_BOUND), rowStart = Math.max(Math.floor(startRow - extraRowCount), 0), rowEnd = Math.min(Math.ceil(endRow + extraRowCount), rowHeightAccumulationLength - 1), columnEnd = Math.min(Math.ceil(endColumn + extraColumnCount), columnWidthAccumulationLength - 1), columnStart = Math.max(Math.floor(startColumn - extraColumnCount), 0), startX = columnWidthAccumulation[columnStart - 1] || 0, startY = rowHeightAccumulation[rowStart - 1] || 0, endX = columnWidthAccumulation[columnEnd], endY = rowHeightAccumulation[rowEnd];
     ctx.translateWithPrecisionRatio(FIX_ONE_PIXEL_BLUR_OFFSET, FIX_ONE_PIXEL_BLUR_OFFSET), ctx.beginPath(), ctx.moveToByPrecision(startX, startY), ctx.lineToByPrecision(endX, startY), ctx.moveToByPrecision(startX, startY), ctx.lineToByPrecision(startX, endY), ctx.closePathByEnv(), ctx.stroke();
     for (let r = rowStart; r <= rowEnd; r++) {
@@ -28847,12 +28994,6 @@ const OBJECT_KEY = "__SHEET_EXTENSION_FONT_DOCUMENT_INSTANCE__", _Spreadsheet =
       isMergedMainCell && (startY = mergeInfo.startY, endY = mergeInfo.endY, startX = mergeInfo.startX, endX = mergeInfo.endX), ctx.clearRectForTexture(startX, startY, endX - startX + 0.5, endY - startY + 0.5);
     });
   }
-  sheetContentViewport() {
-    return [SHEET_VIEWPORT_KEY.VIEW_MAIN, SHEET_VIEWPORT_KEY.VIEW_MAIN_LEFT_TOP, SHEET_VIEWPORT_KEY.VIEW_MAIN_TOP, SHEET_VIEWPORT_KEY.VIEW_MAIN_LEFT];
-  }
-  sheetHeaderViewport() {
-    return [SHEET_VIEWPORT_KEY.VIEW_ROW_TOP, SHEET_VIEWPORT_KEY.VIEW_ROW_BOTTOM, SHEET_VIEWPORT_KEY.VIEW_COLUMN_LEFT, SHEET_VIEWPORT_KEY.VIEW_COLUMN_RIGHT, SHEET_VIEWPORT_KEY.VIEW_LEFT_TOP];
-  }
   testShowRuler(cacheCtx, viewportInfo) {
     const { cacheBound } = viewportInfo, spreadsheetSkeleton = this.getSkeleton(), { rowHeaderWidth, columnHeaderHeight } = spreadsheetSkeleton, { left, top, right, bottom } = cacheBound, findClosestHundred = /* @__PURE__ */ __name((number) => {
       const remainder = number % 100;
@@ -29108,6 +29249,27 @@ const arrowPath = "M512 1024C229.248 1024 0 794.752 0 512S229.248 0 512 0s512 22
 };
 __name(_Slide, "Slide");
 let Slide = _Slide;
+const _UniverRenderConfigService = class _UniverRenderConfigService {
+  constructor() {
+    __publicField(this, "_renderConfig", {
+      ok: "111"
+    });
+    __publicField(this, "_updateSignal$", new Subject());
+    __publicField(this, "updateSignal$", this._updateSignal$.pipe(debounceTime(4)));
+  }
+  setRenderConfig(key, value) {
+    if (value == null) {
+      delete this._renderConfig[key];
+      return;
+    }
+    this._renderConfig[key] = value;
+  }
+  getRenderConfig() {
+    return this._renderConfig;
+  }
+};
+__name(_UniverRenderConfigService, "UniverRenderConfigService");
+let UniverRenderConfigService = _UniverRenderConfigService;
 const PAGE_STROKE_COLOR = "rgba(198, 198, 198, 1)", PAGE_FILL_COLOR = "rgba(255, 255, 255, 1)", MARGIN_STROKE_COLOR = "rgba(158, 158, 158, 1)", _DocBackground = class _DocBackground extends DocComponent {
   constructor(oKey, documentSkeleton, config) {
     super(oKey, documentSkeleton, config);
@@ -29122,7 +29284,9 @@ const PAGE_STROKE_COLOR = "rgba(198, 198, 198, 1)", PAGE_FILL_COLOR = "rgba(255,
     const skeletonData = (_a10 = this.getSkeleton()) == null ? void 0 : _a10.getSkeletonData(), docDataModel = (_b = this.getSkeleton()) == null ? void 0 : _b.getViewModel().getDataModel();
     if (skeletonData == null || docDataModel == null)
       return;
-    const documentFlavor = docDataModel.getSnapshot().documentStyle.documentFlavor;
+    const { documentFlavor } = docDataModel.getSnapshot().documentStyle;
+    if (documentFlavor !== DocumentFlavor.TRADITIONAL)
+      return;
     this._drawLiquid.reset();
     const { pages } = skeletonData;
     let pageTop = 0, pageLeft = 0;
@@ -29148,51 +29312,49 @@ const PAGE_STROKE_COLOR = "rgba(198, 198, 198, 1)", PAGE_FILL_COLOR = "rgba(255,
         fill: PAGE_FILL_COLOR,
         zIndex: 3
       };
-      if (Rect.drawWith(ctx, backgroundOptions), documentFlavor === DocumentFlavor.TRADITIONAL) {
-        const marginIdentification = {
-          dataArray: [{
-            command: "M",
-            points: [marginLeft - 15, originMarginTop]
-          }, {
-            command: "L",
-            points: [marginLeft, originMarginTop]
-          }, {
-            command: "L",
-            points: [marginLeft, originMarginTop - 15]
-          }, {
-            command: "M",
-            points: [pageWidth - marginRight + 15, originMarginTop]
-          }, {
-            command: "L",
-            points: [pageWidth - marginRight, originMarginTop]
-          }, {
-            command: "L",
-            points: [pageWidth - marginRight, originMarginTop - 15]
-          }, {
-            command: "M",
-            points: [marginLeft - 15, pageHeight - originMarginBottom]
-          }, {
-            command: "L",
-            points: [marginLeft, pageHeight - originMarginBottom]
-          }, {
-            command: "L",
-            points: [marginLeft, pageHeight - originMarginBottom + 15]
-          }, {
-            command: "M",
-            points: [pageWidth - marginRight + 15, pageHeight - originMarginBottom]
-          }, {
-            command: "L",
-            points: [pageWidth - marginRight, pageHeight - originMarginBottom]
-          }, {
-            command: "L",
-            points: [pageWidth - marginRight, pageHeight - originMarginBottom + 15]
-          }],
-          strokeWidth: 1.5,
-          stroke: MARGIN_STROKE_COLOR
-        };
-        Path.drawWith(ctx, marginIdentification);
-      }
-      ctx.restore();
+      Rect.drawWith(ctx, backgroundOptions);
+      const IDENTIFIER_WIDTH = 15, marginIdentification = {
+        dataArray: [{
+          command: "M",
+          points: [marginLeft - IDENTIFIER_WIDTH, originMarginTop]
+        }, {
+          command: "L",
+          points: [marginLeft, originMarginTop]
+        }, {
+          command: "L",
+          points: [marginLeft, originMarginTop - IDENTIFIER_WIDTH]
+        }, {
+          command: "M",
+          points: [pageWidth - marginRight + IDENTIFIER_WIDTH, originMarginTop]
+        }, {
+          command: "L",
+          points: [pageWidth - marginRight, originMarginTop]
+        }, {
+          command: "L",
+          points: [pageWidth - marginRight, originMarginTop - IDENTIFIER_WIDTH]
+        }, {
+          command: "M",
+          points: [marginLeft - IDENTIFIER_WIDTH, pageHeight - originMarginBottom]
+        }, {
+          command: "L",
+          points: [marginLeft, pageHeight - originMarginBottom]
+        }, {
+          command: "L",
+          points: [marginLeft, pageHeight - originMarginBottom + IDENTIFIER_WIDTH]
+        }, {
+          command: "M",
+          points: [pageWidth - marginRight + IDENTIFIER_WIDTH, pageHeight - originMarginBottom]
+        }, {
+          command: "L",
+          points: [pageWidth - marginRight, pageHeight - originMarginBottom]
+        }, {
+          command: "L",
+          points: [pageWidth - marginRight, pageHeight - originMarginBottom + IDENTIFIER_WIDTH]
+        }],
+        strokeWidth: 1.5,
+        stroke: MARGIN_STROKE_COLOR
+      };
+      Path.drawWith(ctx, marginIdentification), ctx.restore();
       const { x, y } = this._drawLiquid.translatePage(
         page,
         this.pageLayoutType,
@@ -30162,7 +30324,7 @@ const _Layer = class _Layer extends Disposable {
 };
 __name(_Layer, "Layer");
 let Layer = _Layer;
-const _InputManager = class _InputManager extends Disposable {
+const PLUGIN_CONFIG_KEY = "engine-render.config", defaultPluginConfig = {}, _InputManager = class _InputManager extends Disposable {
   constructor(scene) {
     super();
     __publicField(this, "_scene");
@@ -30439,7 +30601,9 @@ const TransformerManagerTypeArray = [
   "__SpreadsheetTransformerResizeCB__",
   "__SpreadsheetTransformerResizeRB__"
   /* RESIZE_RB */
-], DEFAULT_TRANSFORMER_LAYER_INDEX = 2, MINI_WIDTH_LIMIT = 20, MINI_HEIGHT_LIMIT = 20, DEFAULT_CONTROL_PLUS_INDEX = 5e3, _Transformer = class _Transformer extends Disposable {
+], DEFAULT_TRANSFORMER_LAYER_INDEX = 2, MINI_WIDTH_LIMIT = 20, MINI_HEIGHT_LIMIT = 20, DEFAULT_CONTROL_PLUS_INDEX = 5e3, SINGLE_ACTIVE_OBJECT_TYPE_MAP = /* @__PURE__ */ new Set([
+  ObjectType.CHART
+]), _Transformer = class _Transformer extends Disposable {
   constructor(_scene, config) {
     super();
     __publicField(this, "isCropper", !1);
@@ -31336,6 +31500,15 @@ const TransformerManagerTypeArray = [
   _clearControls(changeSelf = !1) {
     this._clearControlMap(), this._clearControl$.next(changeSelf);
   }
+  /**
+   * @description Clear the control of the object with the specified id
+   * @param {string[]} ids the id of the object to be cleared
+   */
+  clearControlByIds(ids) {
+    for (const id of ids)
+      this._selectedObjectMap.delete(id);
+    this.refreshControls();
+  }
   _clearControlMap() {
     this._transformerControlMap.forEach((control) => {
       control.dispose();
@@ -31414,7 +31587,7 @@ const TransformerManagerTypeArray = [
   }
   _updateActiveObjectList(applyObject, evt) {
     const { isCropper } = this._getConfig(applyObject);
-    applyObject = this._findGroupObject(applyObject), !this._selectedObjectMap.has(applyObject.oKey) && (evt.ctrlKey || (this._selectedObjectMap.clear(), this._clearControlMap()), isCropper || this._selectedObjectMap.set(applyObject.oKey, applyObject), this._createControl(applyObject));
+    applyObject = this._findGroupObject(applyObject), !this._selectedObjectMap.has(applyObject.oKey) && ((!evt.ctrlKey || SINGLE_ACTIVE_OBJECT_TYPE_MAP.has(applyObject.objectType)) && (this._selectedObjectMap.clear(), this._clearControlMap()), isCropper || this._selectedObjectMap.set(applyObject.oKey, applyObject), this._createControl(applyObject));
   }
   _findGroupObject(applyObject) {
     if (!applyObject.isInGroup)
@@ -32455,7 +32628,6 @@ function isDisposable(thing) {
   return !!thing && typeof thing.dispose == "function";
 }
 __name(isDisposable, "isDisposable");
-const PLUGIN_CONFIG_KEY = "engine-render.config", defaultPluginConfig = {};
 var __defProp2 = Object.defineProperty, __getOwnPropDesc = Object.getOwnPropertyDescriptor, __decorateClass = /* @__PURE__ */ __name((decorators, target, key, kind) => {
   for (var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target, i = decorators.length - 1, decorator; i >= 0; i--)
     (decorator = decorators[i]) && (result = (kind ? decorator(target, key, result) : decorator(result)) || result);
@@ -32467,11 +32639,9 @@ let UniverRenderEnginePlugin = (_a9 = class extends Plugin {
   constructor(_config = defaultPluginConfig, _injector, _configService) {
     super(), this._config = _config, this._injector = _injector, this._configService = _configService;
     const { ...rest } = this._config;
-    this._configService.setConfig(PLUGIN_CONFIG_KEY, rest), this._injector.add([IRenderingEngine, { useFactory: /* @__PURE__ */ __name(() => new Engine(), "useFactory") }]), this._injector.add([
-      IRenderManagerService,
-      {
-        useClass: RenderManagerService
-      }
+    this._configService.setConfig(PLUGIN_CONFIG_KEY, rest), registerDependencies(this._injector, [
+      [IRenderingEngine, { useFactory: /* @__PURE__ */ __name(() => new Engine(), "useFactory") }],
+      [IRenderManagerService, { useClass: RenderManagerService }]
     ]);
   }
 }, __name(_a9, "UniverRenderEnginePlugin"), __publicField(_a9, "pluginName", PLUGIN_NAME), _a9);
@@ -32746,6 +32916,9 @@ const MOUSE_WHEEL_SPEED_SMOOTHING_FACTOR = 3, _Viewport = class _Viewport {
   get _deltaViewportScrollY() {
     return this.viewportScrollY - this._preViewportScrollY;
   }
+  get canvas() {
+    return this._cacheCanvas;
+  }
   enable() {
     this._active = !0;
   }
@@ -33406,6 +33579,7 @@ export {
   Layer,
   LineType,
   Liquid,
+  MAXIMUM_COL_WIDTH,
   MAXIMUM_ROW_HEIGHT,
   MIDDLE_CELL_POS_MAGIC_NUMBER,
   Marker,
@@ -33463,11 +33637,10 @@ export {
   ThinScene,
   Transform,
   UniverPrintingContext,
+  UniverRenderConfigService,
   UniverRenderEnginePlugin,
   UniverRenderingContext,
   UniverRenderingContext2D,
-  UniverRenderingContextWebGL,
-  UniverRenderingContextWebGPU,
   VERTICAL_ROTATE_ANGLE,
   Vector2,
   Viewport,