@univerjs/engine-render 0.2.8 → 0.2.10

package/lib/es/index.js

@@ -3,7 +3,7 @@ var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { en
 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, CustomDecorationType, CustomRangeType, PositionedObjectLayoutType, WrapTextType, TableAlignmentType, GridType, BulletAlignment, ColumnSeparatorType, GlyphType as GlyphType$1, numberToListABC, HorizontalAlign, DataStreamTreeNodeType, PageOrientType, ObjectRelativeFromV, TableTextWrapType, SpacingRule, ObjectMatrix, SectionType, NumberUnitType, VerticalAlign, WrapStrategy, AlignTypeH, ObjectRelativeFromH, AlignTypeV, Inject, LocaleService, insertTextToContent, horizontalLineSegmentsSubtraction, deleteContent, DocumentDataModel, PRESET_LIST_TYPE, searchArray, extractPureTextFromCell, CellValueType, isCellCoverable, isNullCell, getColorStyle, isWhiteColor, IContextService, DEFAULT_EMPTY_DOCUMENT_VALUE, Range, TextDecoration, COLORS, requestImmediateMacroTask, MOVE_BUFFER_VALUE, sortRulesByDesc, Injector, isClassDependencyItem, createIdentifier, remove, UniverInstanceType, IUniverInstanceService, Plugin, RxDisposable, ILogService, DocumentFlavor } from "@univerjs/core";
-import { BehaviorSubject, startWith, distinctUntilChanged, Subscription, Subject, Observable, shareReplay, fromEvent } from "rxjs";
+import { BehaviorSubject, Subject, startWith, distinctUntilChanged, Subscription, Observable, shareReplay, fromEvent } 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: [],
@@ -2980,14 +2980,14 @@ const _BaseObject = class _BaseObject extends Disposable {
   }
   getScene() {
     let parent = this.parent;
-    if (parent != null) {
+    if (parent == null)
+      return null;
+    if (parent.classType === RENDER_CLASS_TYPE.SCENE)
+      return parent;
+    for (; parent; ) {
       if (parent.classType === RENDER_CLASS_TYPE.SCENE)
         return parent;
-      for (; parent; ) {
-        if (parent.classType === RENDER_CLASS_TYPE.SCENE)
-          return parent;
-        parent = parent.getParent();
-      }
+      parent = parent.getParent();
     }
   }
   resetCursor() {
@@ -4319,13 +4319,11 @@ const _SpreadsheetColumnHeader = class _SpreadsheetColumnHeader extends Spreadsh
   }
   draw(ctx, bounds) {
     const spreadsheetSkeleton = this.getSkeleton();
-    if (!spreadsheetSkeleton)
-      return;
+    if (!spreadsheetSkeleton) return;
     const parentScale = this.getParentScale();
     spreadsheetSkeleton.calculateSegment(bounds);
     const segment = spreadsheetSkeleton.rowColumnSegment;
-    if (!segment || segment.startColumn === -1 && segment.endColumn === -1)
-      return;
+    if (!segment || segment.startColumn === -1 && segment.endColumn === -1) return;
     const { rowHeaderWidth } = spreadsheetSkeleton;
     ctx.translateWithPrecision(rowHeaderWidth, 0);
     const extensions = this.getExtensionsByOrder();
@@ -4346,6 +4344,10 @@ const _SpreadsheetColumnHeader = class _SpreadsheetColumnHeader extends Spreadsh
       "DefaultColumnHeaderLayoutExtension"
     );
   }
+  /**
+   * Custimize column header, such as custom header text and background.
+   * @param cfg
+   */
   setCustomHeader(cfg) {
     this.makeDirty(!0), this._columnHeaderLayoutExtension.configHeaderColumn(cfg);
   }
@@ -4358,6 +4360,16 @@ const _SheetExtension = class _SheetExtension extends ComponentExtension {
     super(...arguments);
     __publicField(this, "type", 0);
   }
+  /**
+   * Get ISelectionCellWithMergeInfo by cell rowIndex and cell columnIndex.
+   * The startXY in return value does not include rowHeader and columnHeader.
+   * @param rowIndex
+   * @param columnIndex
+   * @param rowHeightAccumulation
+   * @param columnWidthAccumulation
+   * @param dataMergeCache
+   * @returns ISelectionCellWithMergeInfo
+   */
   getCellIndex(rowIndex, columnIndex, rowHeightAccumulation, columnWidthAccumulation, dataMergeCache) {
     return getCellByIndex(rowIndex, columnIndex, rowHeightAccumulation, columnWidthAccumulation, dataMergeCache);
   }
@@ -20137,14 +20149,14 @@ function customBlockLineBreakExtension(breaker) {
   breaker.addRule("break_before_and_after_slash_b", (codePoint, lastCodePoint) => codePoint === SLASH_B_CODE_POINT || lastCodePoint === SLASH_B_CODE_POINT);
 }
 __name(customBlockLineBreakExtension, "customBlockLineBreakExtension");
-function otherHandler(index2, charArray, viewModel, paragraphNode, sectionBreakConfig, paragraphStyle) {
+function otherHandler(index2, charArray, viewModel, paragraphNode, sectionBreakConfig, paragraph) {
   const glyphGroup = [];
   let step = 0;
   for (let i = 0; i < charArray.length; i++) {
     const newChar = charArray[i];
     if (hasSpace(newChar) || startWithEmoji(charArray.substring(i)))
       break;
-    const config = getFontCreateConfig(index2 + i, viewModel, paragraphNode, sectionBreakConfig, paragraphStyle), glyph = createSkeletonLetterGlyph(newChar, config);
+    const config = getFontCreateConfig(index2 + i, viewModel, paragraphNode, sectionBreakConfig, paragraph), glyph = createSkeletonLetterGlyph(newChar, config);
     glyphGroup.push(glyph), step++;
   }
   return {
@@ -20153,8 +20165,8 @@ function otherHandler(index2, charArray, viewModel, paragraphNode, sectionBreakC
   };
 }
 __name(otherHandler, "otherHandler");
-function ArabicHandler(index2, charArray, viewModel, paragraphNode, sectionBreakConfig, paragraphStyle) {
-  const config = getFontCreateConfig(index2, viewModel, paragraphNode, sectionBreakConfig, paragraphStyle), glyph = [];
+function ArabicHandler(index2, charArray, viewModel, paragraphNode, sectionBreakConfig, paragraph) {
+  const config = getFontCreateConfig(index2, viewModel, paragraphNode, sectionBreakConfig, paragraph), glyph = [];
   let step = 0;
   for (let i = 0; i < charArray.length; i++) {
     const newChar = charArray[i];
@@ -20169,16 +20181,16 @@ function ArabicHandler(index2, charArray, viewModel, paragraphNode, sectionBreak
   };
 }
 __name(ArabicHandler, "ArabicHandler");
-function emojiHandler(index2, charArray, viewModel, paragraphNode, sectionBreakConfig, paragraphStyle) {
-  const config = getFontCreateConfig(index2, viewModel, paragraphNode, sectionBreakConfig, paragraphStyle), match = charArray.match(EMOJI_REG);
+function emojiHandler(index2, charArray, viewModel, paragraphNode, sectionBreakConfig, paragraph) {
+  const config = getFontCreateConfig(index2, viewModel, paragraphNode, sectionBreakConfig, paragraph), match = charArray.match(EMOJI_REG);
   return {
     step: match[0].length,
     glyphGroup: [createSkeletonLetterGlyph(match[0], config)]
   };
 }
 __name(emojiHandler, "emojiHandler");
-function TibetanHandler(index2, charArray, viewModel, paragraphNode, sectionBreakConfig, paragraphStyle) {
-  const config = getFontCreateConfig(index2, viewModel, paragraphNode, sectionBreakConfig, paragraphStyle), glyph = [];
+function TibetanHandler(index2, charArray, viewModel, paragraphNode, sectionBreakConfig, paragraph) {
+  const config = getFontCreateConfig(index2, viewModel, paragraphNode, sectionBreakConfig, paragraph), glyph = [];
   let step = 0;
   for (let i = 0; i < charArray.length; i++) {
     const newChar = charArray[i];
@@ -20228,7 +20240,7 @@ function shaping(ctx, content, viewModel, paragraphNode, sectionBreakConfig, use
     drawings = {}
   } = sectionBreakConfig, shapedTextList = [];
   let breaker = new LineBreaker(content);
-  const { endIndex } = paragraphNode, { paragraphStyle = {} } = viewModel.getParagraph(endIndex) || { startIndex: 0 }, { snapToGrid = BooleanNumber.TRUE } = paragraphStyle;
+  const { endIndex } = paragraphNode, paragraph = viewModel.getParagraph(endIndex) || { startIndex: 0 }, { paragraphStyle = {} } = paragraph, { snapToGrid = BooleanNumber.TRUE } = paragraphStyle;
   let last = 0, bk, lastGlyphIndex = 0;
   const { hyphen, languageDetector } = ctx, paragraphBody = prepareParagraphBody(viewModel.getBody(), endIndex);
   let glyphInfos = [];
@@ -20247,7 +20259,7 @@ function shaping(ctx, content, viewModel, paragraphNode, sectionBreakConfig, use
       }
       lastGlyphIndex = i;
       for (const glyphInfo of glyphInfosInWord) {
-        const { start, char } = glyphInfo, config = getFontCreateConfig(start, viewModel, paragraphNode, sectionBreakConfig, paragraphStyle);
+        const { start, char } = glyphInfo, config = getFontCreateConfig(start, viewModel, paragraphNode, sectionBreakConfig, paragraph);
         if (char === DataStreamTreeTokenType.TAB) {
           const charSpaceApply = getCharSpaceApply(charSpace, defaultTabStop, gridType, snapToGrid), newSpan = createSkeletonTabGlyph(config, charSpaceApply);
           shapedGlyphs.push(newSpan);
@@ -20266,7 +20278,7 @@ function shaping(ctx, content, viewModel, paragraphNode, sectionBreakConfig, use
         if (char == null)
           break;
         if (char === DataStreamTreeTokenType.CUSTOM_BLOCK) {
-          const config = getFontCreateConfig(i, viewModel, paragraphNode, sectionBreakConfig, paragraphStyle);
+          const config = getFontCreateConfig(i, viewModel, paragraphNode, sectionBreakConfig, paragraph);
           let newGlyph = null;
           const customBlock = viewModel.getCustomBlockWithoutSetCurrentIndex(paragraphNode.startIndex + i);
           if (customBlock != null) {
@@ -20279,7 +20291,7 @@ function shaping(ctx, content, viewModel, paragraphNode, sectionBreakConfig, use
           }
           newGlyph == null && (newGlyph = createSkeletonLetterGlyph(char, config)), shapedGlyphs.push(newGlyph), i += char.length, src = src.substring(char.length);
         } else if (/\s/.test(char) || hasCJK(char)) {
-          const config = getFontCreateConfig(i, viewModel, paragraphNode, sectionBreakConfig, paragraphStyle);
+          const config = getFontCreateConfig(i, viewModel, paragraphNode, sectionBreakConfig, paragraph);
           let newGlyph = null;
           if (char === DataStreamTreeTokenType.TAB) {
             const charSpaceApply = getCharSpaceApply(charSpace, defaultTabStop, gridType, snapToGrid);
@@ -20294,7 +20306,7 @@ function shaping(ctx, content, viewModel, paragraphNode, sectionBreakConfig, use
             viewModel,
             paragraphNode,
             sectionBreakConfig,
-            paragraphStyle
+            paragraph
           );
           shapedGlyphs.push(...glyphGroup), i += step, src = src.substring(step);
         } else if (hasArabic(char)) {
@@ -20304,7 +20316,7 @@ function shaping(ctx, content, viewModel, paragraphNode, sectionBreakConfig, use
             viewModel,
             paragraphNode,
             sectionBreakConfig,
-            paragraphStyle
+            paragraph
           );
           shapedGlyphs.push(...glyphGroup), i += step, src = src.substring(step);
         } else if (hasTibetan(char)) {
@@ -20314,7 +20326,7 @@ function shaping(ctx, content, viewModel, paragraphNode, sectionBreakConfig, use
             viewModel,
             paragraphNode,
             sectionBreakConfig,
-            paragraphStyle
+            paragraph
           );
           shapedGlyphs.push(...glyphGroup), i += step, src = src.substring(step);
         } else {
@@ -20324,7 +20336,7 @@ function shaping(ctx, content, viewModel, paragraphNode, sectionBreakConfig, use
             viewModel,
             paragraphNode,
             sectionBreakConfig,
-            paragraphStyle
+            paragraph
           );
           shapedGlyphs.push(...glyphGroup), i += step, src = src.substring(step);
         }
@@ -20651,8 +20663,8 @@ function lineBreaking(ctx, viewModel, shapedTextList, curPage, paragraphNode, se
     const { blockId } = customBlock, drawingOrigin = drawings[blockId];
     drawingOrigin.layoutType === PositionedObjectLayoutType.INLINE ? paragraphInlineSkeDrawings.set(blockId, _getDrawingSkeletonFormat(drawingOrigin)) : paragraphAffectSkeDrawings.set(blockId, _getDrawingSkeletonFormat(drawingOrigin));
   }
-  let allPages = [curPage], paragraphStart = !0;
-  for (const { text, glyphs, breakPointType } of shapedTextList) {
+  let allPages = [curPage], isParagraphFirstShapedText = !0;
+  for (const [_index, { text, glyphs, breakPointType }] of shapedTextList.entries()) {
     const pushPending = /* @__PURE__ */ __name(() => {
       glyphs.length !== 0 && (allPages = layoutParagraph(
         ctx,
@@ -20660,9 +20672,9 @@ function lineBreaking(ctx, viewModel, shapedTextList, curPage, paragraphNode, se
         allPages,
         sectionBreakConfig,
         paragraphConfig,
-        paragraphStart,
+        isParagraphFirstShapedText,
         breakPointType
-      ), paragraphStart = !1);
+      ), isParagraphFirstShapedText = !1);
     }, "pushPending");
     if (text.endsWith(DataStreamTreeTokenType.PAGE_BREAK)) {
       pushPending(), allPages.push(
@@ -21121,17 +21133,17 @@ function _getVerticalMargin(marginTB, headerOrFooter, pageHeight) {
   return Math.min(maxMargin, Math.max(marginTB, HeaderFooterPageHeight));
 }
 __name(_getVerticalMargin, "_getVerticalMargin");
-function layoutParagraph(ctx, glyphGroup, pages, sectionBreakConfig, paragraphConfig, paragraphStart = !1, breakPointType = BreakPointType.Normal) {
-  if (paragraphStart)
+function layoutParagraph(ctx, glyphGroup, pages, sectionBreakConfig, paragraphConfig, isParagraphFirstShapedText, breakPointType = BreakPointType.Normal) {
+  if (isParagraphFirstShapedText)
     if (paragraphConfig.bulletSkeleton) {
       const { bulletSkeleton, paragraphStyle = {} } = paragraphConfig, { gridType = GridType.LINES, charSpace = 0, defaultTabStop = 10.5 } = sectionBreakConfig, paragraphProperties = bulletSkeleton.paragraphProperties || {};
       paragraphConfig.paragraphStyle = mergeByV(paragraphConfig.paragraphStyle, paragraphProperties);
       const { snapToGrid = BooleanNumber.TRUE } = paragraphStyle, charSpaceApply = getCharSpaceApply(charSpace, defaultTabStop, gridType, snapToGrid), bulletGlyph = createSkeletonBulletGlyph(glyphGroup[0], bulletSkeleton, charSpaceApply);
-      _lineOperator(ctx, [bulletGlyph, ...glyphGroup], pages, sectionBreakConfig, paragraphConfig, paragraphStart, breakPointType);
+      _lineOperator(ctx, [bulletGlyph, ...glyphGroup], pages, sectionBreakConfig, paragraphConfig, isParagraphFirstShapedText, breakPointType);
     } else
-      _lineOperator(ctx, glyphGroup, pages, sectionBreakConfig, paragraphConfig, paragraphStart, breakPointType);
+      _lineOperator(ctx, glyphGroup, pages, sectionBreakConfig, paragraphConfig, isParagraphFirstShapedText, breakPointType);
   else
-    _divideOperator(ctx, glyphGroup, pages, sectionBreakConfig, paragraphConfig, paragraphStart, breakPointType);
+    _divideOperator(ctx, glyphGroup, pages, sectionBreakConfig, paragraphConfig, isParagraphFirstShapedText, breakPointType);
   return [...pages];
 }
 __name(layoutParagraph, "layoutParagraph");
@@ -21184,7 +21196,7 @@ function _popHyphenSlice(divide) {
   return divide.glyphGroup.length === 0 && (divide.glyphGroup.push(...glyphGroup), glyphGroup.length = 0), glyphGroup;
 }
 __name(_popHyphenSlice, "_popHyphenSlice");
-function _divideOperator(ctx, glyphGroup, pages, sectionBreakConfig, paragraphConfig, paragraphStart = !1, breakPointType = BreakPointType.Normal, defaultSpanLineHeight) {
+function _divideOperator(ctx, glyphGroup, pages, sectionBreakConfig, paragraphConfig, isParagraphFirstShapedText, breakPointType = BreakPointType.Normal, defaultSpanLineHeight) {
   var _a11;
   const lastPage = getLastPage(pages), divideInfo = getLastNotFullDivideInfo(lastPage);
   if (divideInfo) {
@@ -21222,13 +21234,13 @@ function _divideOperator(ctx, glyphGroup, pages, sectionBreakConfig, paragraphCo
         const hyphenSliceGlyphGroup = _popHyphenSlice(divide);
         hyphenSliceGlyphGroup.length > 0 && (updateDivideInfo(divide, {
           breakType: BreakPointType.Normal
-        }), _divideOperator(ctx, hyphenSliceGlyphGroup, pages, sectionBreakConfig, paragraphConfig, paragraphStart, BreakPointType.Hyphen)), _divideOperator(
+        }), _divideOperator(ctx, hyphenSliceGlyphGroup, pages, sectionBreakConfig, paragraphConfig, isParagraphFirstShapedText, BreakPointType.Hyphen)), _divideOperator(
           ctx,
           glyphGroup,
           pages,
           sectionBreakConfig,
           paragraphConfig,
-          paragraphStart,
+          isParagraphFirstShapedText,
           breakPointType,
           defaultSpanLineHeight
         );
@@ -21239,7 +21251,7 @@ function _divideOperator(ctx, glyphGroup, pages, sectionBreakConfig, paragraphCo
           pages,
           sectionBreakConfig,
           paragraphConfig,
-          paragraphStart,
+          isParagraphFirstShapedText,
           breakPointType,
           defaultSpanLineHeight
         );
@@ -21255,7 +21267,7 @@ function _divideOperator(ctx, glyphGroup, pages, sectionBreakConfig, paragraphCo
         pages,
         sectionBreakConfig,
         paragraphConfig,
-        paragraphStart,
+        isParagraphFirstShapedText,
         breakPointType,
         defaultSpanLineHeight
       );
@@ -21272,13 +21284,13 @@ function _divideOperator(ctx, glyphGroup, pages, sectionBreakConfig, paragraphCo
           snapToGrid
         );
         if (currentLine.contentHeight < contentHeight) {
-          const spanGroupCached = __getSpanGroupByLine(currentLine), spanGroupCachedLen = spanGroupCached.length;
-          let newSpanGroup = [], startIndex = 1;
-          spanGroupCachedLen > 2 && spanGroupCached[0].glyphType === GlyphType.LIST ? (newSpanGroup = [spanGroupCached[0], spanGroupCached[1]], startIndex = 2) : newSpanGroup = [spanGroupCached[0]];
+          const spanGroupCached = __getGlyphGroupByLine(currentLine), spanGroupCachedLen = spanGroupCached.length;
+          let newGlyphGroup = [], startIndex = 1;
+          spanGroupCachedLen > 2 && spanGroupCached[0].glyphType === GlyphType.LIST ? (newGlyphGroup = [spanGroupCached[0], spanGroupCached[1]], startIndex = 2) : newGlyphGroup = [spanGroupCached[0]];
           const column = currentLine.parent, { paragraphStart: lineIsStart } = column == null ? void 0 : column.lines.pop();
           _lineOperator(
             ctx,
-            newSpanGroup,
+            newGlyphGroup,
             pages,
             sectionBreakConfig,
             paragraphConfig,
@@ -21293,28 +21305,45 @@ function _divideOperator(ctx, glyphGroup, pages, sectionBreakConfig, paragraphCo
               pages,
               sectionBreakConfig,
               paragraphConfig,
-              paragraphStart
+              isParagraphFirstShapedText
             );
-          _divideOperator(ctx, glyphGroup, pages, sectionBreakConfig, paragraphConfig, paragraphStart, breakPointType);
+          _divideOperator(
+            ctx,
+            glyphGroup,
+            pages,
+            sectionBreakConfig,
+            paragraphConfig,
+            isParagraphFirstShapedText,
+            breakPointType
+          );
           return;
         }
       }
       addGlyphToDivide(divide, glyphGroup, preOffsetLeft), updateDivideInfo(divide, { breakType: breakPointType });
     }
   } else
-    _lineOperator(ctx, glyphGroup, pages, sectionBreakConfig, paragraphConfig, paragraphStart, breakPointType, defaultSpanLineHeight);
+    _lineOperator(
+      ctx,
+      glyphGroup,
+      pages,
+      sectionBreakConfig,
+      paragraphConfig,
+      isParagraphFirstShapedText,
+      breakPointType,
+      defaultSpanLineHeight
+    );
 }
 __name(_divideOperator, "_divideOperator");
-function _lineOperator(ctx, glyphGroup, pages, sectionBreakConfig, paragraphConfig, paragraphStart = !1, breakPointType = BreakPointType.Normal, defaultSpanLineHeight) {
+function _lineOperator(ctx, glyphGroup, pages, sectionBreakConfig, paragraphConfig, isParagraphFirstShapedText, breakPointType = BreakPointType.Normal, defaultGlyphLineHeight) {
   var _a11, _b, _c, _d, _e, _f;
   let lastPage = getLastPage(pages), columnInfo = getLastNotFullColumnInfo(lastPage);
-  if ((!columnInfo || !columnInfo.column) && (_pageOperator(ctx, glyphGroup, pages, sectionBreakConfig, paragraphConfig, void 0, breakPointType), lastPage = getLastPage(pages), columnInfo = getLastNotFullColumnInfo(lastPage)), !columnInfo) return;
+  if ((!columnInfo || !columnInfo.column) && (_pageOperator(ctx, glyphGroup, pages, sectionBreakConfig, paragraphConfig, !0, breakPointType), lastPage = getLastPage(pages), columnInfo = getLastNotFullColumnInfo(lastPage)), !columnInfo) return;
   const column = columnInfo.column;
   if (column.width <= 0) {
     console.error("The column width is less than 0, need to adjust page width to make it great than 0");
     return;
   }
-  const preLine = getLastLineByColumn(column), ascent = Math.max(...glyphGroup.map((glyph) => glyph.bBox.ba)), descent = Math.max(...glyphGroup.map((glyph) => glyph.bBox.bd)), spanLineHeight = defaultSpanLineHeight || ascent + descent, {
+  const preLine = getLastLineByColumn(column), ascent = Math.max(...glyphGroup.map((glyph) => glyph.bBox.ba)), descent = Math.max(...glyphGroup.map((glyph) => glyph.bBox.bd)), glyphLineHeight = defaultGlyphLineHeight || ascent + descent, {
     paragraphStyle = {},
     paragraphAffectSkeDrawings,
     skeTablesInParagraph,
@@ -21330,11 +21359,18 @@ function _lineOperator(ctx, glyphGroup, pages, sectionBreakConfig, paragraphConf
     hanging,
     indentStart,
     indentEnd
-  } = paragraphStyle, { paragraphLineGapDefault, linePitch, lineSpacing, spacingRule, snapToGrid, gridType } = getLineHeightConfig(
+  } = paragraphStyle, {
+    paragraphLineGapDefault,
+    linePitch,
+    lineSpacing,
+    spacingRule,
+    snapToGrid,
+    gridType
+  } = getLineHeightConfig(
     sectionBreakConfig,
     paragraphConfig
   ), { paddingTop, paddingBottom, contentHeight, lineSpacingApply } = __getLineHeight(
-    spanLineHeight,
+    glyphLineHeight,
     paragraphLineGapDefault,
     linePitch,
     gridType,
@@ -21342,10 +21378,11 @@ function _lineOperator(ctx, glyphGroup, pages, sectionBreakConfig, paragraphConf
     spacingRule,
     snapToGrid
   ), { marginTop, spaceBelowApply } = __getParagraphSpace(
+    ctx,
     lineSpacingApply,
     spaceAbove,
     spaceBelow,
-    paragraphStart,
+    isParagraphFirstShapedText,
     preLine
   ), lineHeight = marginTop + paddingTop + contentHeight + paddingBottom;
   let section = column.parent;
@@ -21356,12 +21393,12 @@ function _lineOperator(ctx, glyphGroup, pages, sectionBreakConfig, paragraphConf
     const drawingsInLine = _getCustomBlockIdsInLine(preLine);
     if (drawingsInLine.length > 0) {
       const affectDrawings = (_d = (_c = ctx.paragraphConfigCache.get(segmentId)) == null ? void 0 : _c.get(preLine.paragraphIndex)) == null ? void 0 : _d.paragraphAffectSkeDrawings, relativeLineDrawings = [...(_e = affectDrawings == null ? void 0 : affectDrawings.values()) != null ? _e : []].filter((drawing) => drawing.drawingOrigin.docTransform.positionV.relativeFrom === ObjectRelativeFromV.LINE).filter((drawing) => drawingsInLine.includes(drawing.drawingId));
-      relativeLineDrawings.length > 0 && __updateAndPositionDrawings(ctx, preLine.top, preLine.lineHeight, column, relativeLineDrawings, preLine.paragraphIndex, paragraphStart);
+      relativeLineDrawings.length > 0 && __updateAndPositionDrawings(ctx, preLine.top, preLine.lineHeight, column, relativeLineDrawings, preLine.paragraphIndex, isParagraphFirstShapedText);
     }
   }
   if (paragraphAffectSkeDrawings != null && paragraphAffectSkeDrawings.size > 0) {
     const targetDrawings = [...paragraphAffectSkeDrawings.values()].filter((drawing) => drawing.drawingOrigin.docTransform.positionV.relativeFrom !== ObjectRelativeFromV.LINE);
-    __updateAndPositionDrawings(ctx, lineTop, lineHeight, column, targetDrawings, paragraphConfig.paragraphIndex, paragraphStart, (_f = pDrawingAnchor == null ? void 0 : pDrawingAnchor.get(paragraphIndex)) == null ? void 0 : _f.top);
+    __updateAndPositionDrawings(ctx, lineTop, lineHeight, column, targetDrawings, paragraphConfig.paragraphIndex, isParagraphFirstShapedText, (_f = pDrawingAnchor == null ? void 0 : pDrawingAnchor.get(paragraphIndex)) == null ? void 0 : _f.top);
   }
   skeTablesInParagraph != null && skeTablesInParagraph.length > 0 && (needOpenNewPageByTableLayout = _updateAndPositionTable(lineTop, lastPage, section, skeTablesInParagraph));
   const newLineTop = calculateLineTopByDrawings(
@@ -21372,7 +21409,16 @@ function _lineOperator(ctx, glyphGroup, pages, sectionBreakConfig, paragraphConf
     footerPage
   );
   if (lineHeight + newLineTop > section.height && column.lines.length > 0 && lastPage.sections.length > 0 || needOpenNewPageByTableLayout) {
-    if (setColumnFullState(column, !0), _columnOperator(ctx, glyphGroup, pages, sectionBreakConfig, paragraphConfig, paragraphStart, breakPointType, defaultSpanLineHeight), paragraphStart && paragraphAffectSkeDrawings && paragraphAffectSkeDrawings.size > 0)
+    if (setColumnFullState(column, !0), _columnOperator(
+      ctx,
+      glyphGroup,
+      pages,
+      sectionBreakConfig,
+      paragraphConfig,
+      isParagraphFirstShapedText,
+      breakPointType,
+      defaultGlyphLineHeight
+    ), isParagraphFirstShapedText && paragraphAffectSkeDrawings && paragraphAffectSkeDrawings.size > 0)
       for (const drawing of paragraphAffectSkeDrawings.values())
         lastPage.skeDrawings.has(drawing.drawingId) && lastPage.skeDrawings.delete(drawing.drawingId), ctx.drawingsCache.has(drawing.drawingId) && (ctx.drawingsCache.delete(drawing.drawingId), ctx.isDirty = !1, ctx.layoutStartPointer[segmentId] = null);
     return;
@@ -21384,7 +21430,7 @@ function _lineOperator(ctx, glyphGroup, pages, sectionBreakConfig, paragraphConf
     indentStart,
     indentEnd,
     charSpaceApply,
-    paragraphStart
+    isParagraphFirstShapedText
   );
   if (paddingLeft + paddingRight >= column.width) {
     const leftPercent = paddingLeft / (paddingLeft + paddingRight);
@@ -21406,23 +21452,32 @@ function _lineOperator(ctx, glyphGroup, pages, sectionBreakConfig, paragraphConf
     },
     column.width,
     lineIndex,
-    paragraphStart,
+    isParagraphFirstShapedText,
     paragraphConfig,
     lastPage,
     headerPage,
     footerPage
   );
-  column.lines.push(newLine), newLine.parent = column, createAndUpdateBlockAnchor(paragraphIndex, newLine, lineTop, pDrawingAnchor), _divideOperator(ctx, glyphGroup, pages, sectionBreakConfig, paragraphConfig, paragraphStart, breakPointType, defaultSpanLineHeight);
+  column.lines.push(newLine), newLine.parent = column, createAndUpdateBlockAnchor(paragraphIndex, newLine, lineTop, pDrawingAnchor), _divideOperator(
+    ctx,
+    glyphGroup,
+    pages,
+    sectionBreakConfig,
+    paragraphConfig,
+    isParagraphFirstShapedText,
+    breakPointType,
+    defaultGlyphLineHeight
+  );
 }
 __name(_lineOperator, "_lineOperator");
-function __updateAndPositionDrawings(ctx, lineTop, lineHeight, column, targetDrawings, paragraphIndex, paragraphStart, drawingAnchorTop) {
+function __updateAndPositionDrawings(ctx, lineTop, lineHeight, column, targetDrawings, paragraphIndex, isParagraphFirstShapedText, drawingAnchorTop) {
   if (targetDrawings.length === 0)
     return;
   const drawings = __getDrawingPosition(
     lineTop,
     lineHeight,
     column,
-    paragraphStart,
+    isParagraphFirstShapedText,
     drawingAnchorTop,
     targetDrawings
   );
@@ -21552,29 +21607,56 @@ function checkRelativeDrawingNeedRePosition(ctx, drawing) {
   return !1;
 }
 __name(checkRelativeDrawingNeedRePosition, "checkRelativeDrawingNeedRePosition");
-function _columnOperator(ctx, glyphGroup, pages, sectionBreakConfig, paragraphConfig, paragraphStart = !1, breakPointType = BreakPointType.Normal, defaultSpanLineHeight) {
+function _columnOperator(ctx, glyphGroup, pages, sectionBreakConfig, paragraphConfig, isParagraphFirstShapedText, breakPointType = BreakPointType.Normal, defaultSpanLineHeight) {
   const lastPage = getLastPage(pages);
-  isColumnFull(lastPage) === !0 ? _pageOperator(ctx, glyphGroup, pages, sectionBreakConfig, paragraphConfig, paragraphStart, breakPointType, defaultSpanLineHeight) : _lineOperator(ctx, glyphGroup, pages, sectionBreakConfig, paragraphConfig, paragraphStart, breakPointType, defaultSpanLineHeight);
+  isColumnFull(lastPage) === !0 ? _pageOperator(
+    ctx,
+    glyphGroup,
+    pages,
+    sectionBreakConfig,
+    paragraphConfig,
+    isParagraphFirstShapedText,
+    breakPointType,
+    defaultSpanLineHeight
+  ) : _lineOperator(
+    ctx,
+    glyphGroup,
+    pages,
+    sectionBreakConfig,
+    paragraphConfig,
+    isParagraphFirstShapedText,
+    breakPointType,
+    defaultSpanLineHeight
+  );
 }
 __name(_columnOperator, "_columnOperator");
-function _pageOperator(ctx, glyphGroup, pages, sectionBreakConfig, paragraphConfig, paragraphStart = !1, breakPointType = BreakPointType.Normal, defaultSpanLineHeight) {
+function _pageOperator(ctx, glyphGroup, pages, sectionBreakConfig, paragraphConfig, isParagraphFirstShapedText, breakPointType = BreakPointType.Normal, defaultSpanLineHeight) {
   const curSkeletonPage = getLastPage(pages), { skeHeaders, skeFooters } = paragraphConfig;
-  pages.push(createSkeletonPage(ctx, sectionBreakConfig, { skeHeaders, skeFooters }, (curSkeletonPage == null ? void 0 : curSkeletonPage.pageNumber) + 1)), _columnOperator(ctx, glyphGroup, pages, sectionBreakConfig, paragraphConfig, paragraphStart, breakPointType, defaultSpanLineHeight);
+  pages.push(createSkeletonPage(ctx, sectionBreakConfig, { skeHeaders, skeFooters }, (curSkeletonPage == null ? void 0 : curSkeletonPage.pageNumber) + 1)), _columnOperator(
+    ctx,
+    glyphGroup,
+    pages,
+    sectionBreakConfig,
+    paragraphConfig,
+    isParagraphFirstShapedText,
+    breakPointType,
+    defaultSpanLineHeight
+  );
 }
 __name(_pageOperator, "_pageOperator");
-function __getIndentPadding(indentFirstLine, hanging, indentStart, indentEnd, charSpaceApply, paragraphStart = !1) {
+function __getIndentPadding(indentFirstLine, hanging, indentStart, indentEnd, charSpaceApply, isParagraphFirstShapedText = !1) {
   const indentFirstLineNumber = getNumberUnitValue(indentFirstLine, charSpaceApply), hangingNumber = getNumberUnitValue(hanging, charSpaceApply), indentStartNumber = getNumberUnitValue(indentStart, charSpaceApply), indentEndNumber = getNumberUnitValue(indentEnd, charSpaceApply);
   let paddingLeft = indentStartNumber;
   const paddingRight = indentEndNumber;
-  return indentFirstLineNumber > 0 && paragraphStart && (paddingLeft += indentFirstLineNumber), hangingNumber > 0 && !paragraphStart && (paddingLeft += hangingNumber), {
+  return indentFirstLineNumber > 0 && isParagraphFirstShapedText && (paddingLeft += indentFirstLineNumber), hangingNumber > 0 && !isParagraphFirstShapedText && (paddingLeft += hangingNumber), {
     paddingLeft,
     paddingRight
   };
 }
 __name(__getIndentPadding, "__getIndentPadding");
-function __getParagraphSpace(lineSpacing = 0, spaceAbove, spaceBelow, paragraphStart, preLine) {
+function __getParagraphSpace(ctx, lineSpacing = 0, spaceAbove, spaceBelow, isParagraphFirstShapedText, preLine) {
   const spaceBelowApply = getNumberUnitValue(spaceBelow, lineSpacing);
-  if (paragraphStart) {
+  if (isParagraphFirstShapedText) {
     let marginTop = getNumberUnitValue(spaceAbove, lineSpacing);
     if (preLine) {
       const { spaceBelowApply: preSpaceBelowApply } = preLine;
@@ -21594,25 +21676,25 @@ function __getParagraphSpace(lineSpacing = 0, spaceAbove, spaceBelow, paragraphS
   };
 }
 __name(__getParagraphSpace, "__getParagraphSpace");
-function __getLineHeight(spanLineHeight, paragraphLineGapDefault, linePitch, gridType, lineSpacing, spacingRule, snapToGrid) {
+function __getLineHeight(glyphLineHeight, paragraphLineGapDefault, linePitch, gridType, lineSpacing, spacingRule, snapToGrid) {
   let paddingTop = paragraphLineGapDefault, paddingBottom = paragraphLineGapDefault;
   if (gridType === GridType.DEFAULT || snapToGrid === BooleanNumber.FALSE)
     return spacingRule === SpacingRule.AUTO ? {
       paddingTop,
       paddingBottom,
-      contentHeight: lineSpacing * spanLineHeight,
-      lineSpacingApply: spanLineHeight
+      contentHeight: lineSpacing * glyphLineHeight,
+      lineSpacingApply: glyphLineHeight
     } : {
       paddingTop,
       paddingBottom,
-      contentHeight: Math.max(lineSpacing, spanLineHeight),
+      contentHeight: Math.max(lineSpacing, glyphLineHeight),
       lineSpacingApply: lineSpacing
     };
   let lineSpacingApply = 0;
-  return spacingRule === SpacingRule.AUTO ? lineSpacingApply = lineSpacing * linePitch : lineSpacingApply = lineSpacing, spanLineHeight + paragraphLineGapDefault * 2 < lineSpacingApply && (paddingTop = paddingBottom = (lineSpacingApply - spanLineHeight) / 2), {
+  return spacingRule === SpacingRule.AUTO ? lineSpacingApply = lineSpacing * linePitch : lineSpacingApply = lineSpacing, glyphLineHeight + paragraphLineGapDefault * 2 < lineSpacingApply ? paddingTop = paddingBottom = (lineSpacingApply - glyphLineHeight) / 2 : lineSpacingApply = glyphLineHeight, {
     paddingTop,
     paddingBottom,
-    contentHeight: spanLineHeight,
+    contentHeight: glyphLineHeight,
     lineSpacingApply
   };
 }
@@ -21622,7 +21704,7 @@ function updateInlineDrawingPosition(line2, paragraphInlineSkeDrawings, blockAnc
   const column = line2.parent, page = (_b = (_a11 = line2 == null ? void 0 : line2.parent) == null ? void 0 : _a11.parent) == null ? void 0 : _b.parent;
   if (page == null || column == null)
     return;
-  const isPageBreak = __checkPageBreak(column), drawings = /* @__PURE__ */ new Map(), { top, lineHeight } = line2;
+  const isPageBreak = __checkPageBreak(column), drawings = /* @__PURE__ */ new Map(), { top, lineHeight, marginBottom = 0 } = line2;
   for (const divide of line2.divides)
     for (const glyph of divide.glyphGroup)
       if (glyph.streamType === DataStreamTreeTokenType.CUSTOM_BLOCK && glyph.width !== 0) {
@@ -21633,19 +21715,19 @@ function updateInlineDrawingPosition(line2, paragraphInlineSkeDrawings, blockAnc
         if (drawingOrigin == null || drawing == null)
           continue;
         const { docTransform } = drawingOrigin, { size, angle } = docTransform, { width = 0, height = 0 } = size, glyphHeight = glyph.bBox.bd + glyph.bBox.ba;
-        drawing.aLeft = divide.left + divide.paddingLeft + glyph.left + 0.5 * glyph.width - 0.5 * width || 0, drawing.aTop = top + lineHeight - 0.5 * glyphHeight - 0.5 * height || 0, drawing.width = width, drawing.height = height, drawing.angle = angle, drawing.isPageBreak = isPageBreak, drawing.lineTop = top, drawing.columnLeft = column.left, drawing.blockAnchorTop = blockAnchorTop != null ? blockAnchorTop : top, drawing.lineHeight = line2.lineHeight, drawings.set(drawing.drawingId, drawing);
+        drawing.aLeft = divide.left + divide.paddingLeft + glyph.left + 0.5 * glyph.width - 0.5 * width || 0, drawing.aTop = top + lineHeight - 0.5 * glyphHeight - 0.5 * height - marginBottom, drawing.width = width, drawing.height = height, drawing.angle = angle, drawing.isPageBreak = isPageBreak, drawing.lineTop = top, drawing.columnLeft = column.left, drawing.blockAnchorTop = blockAnchorTop != null ? blockAnchorTop : top, drawing.lineHeight = line2.lineHeight, drawings.set(drawing.drawingId, drawing);
       }
   const res = new Map([...page.skeDrawings, ...drawings]);
   page.skeDrawings = res;
 }
 __name(updateInlineDrawingPosition, "updateInlineDrawingPosition");
-function __getDrawingPosition(lineTop, lineHeight, column, paragraphStart, blockAnchorTop, needPositionDrawings = []) {
+function __getDrawingPosition(lineTop, lineHeight, column, isParagraphFirstShapedText, blockAnchorTop, needPositionDrawings = []) {
   var _a11, _b, _c;
   const page = (_a11 = column.parent) == null ? void 0 : _a11.parent;
   if (page == null || needPositionDrawings.length === 0)
     return;
   const drawings = /* @__PURE__ */ new Map(), isPageBreak = __checkPageBreak(column);
-  if (!(isPageBreak && !paragraphStart)) {
+  if (!(isPageBreak && !isParagraphFirstShapedText)) {
     for (const drawing of needPositionDrawings) {
       const { drawingOrigin } = drawing;
       if (!drawingOrigin)
@@ -21721,10 +21803,10 @@ function __maxFontBoundingBoxByGlyphGroup(glyphGroup) {
   return maxBox;
 }
 __name(__maxFontBoundingBoxByGlyphGroup, "__maxFontBoundingBoxByGlyphGroup");
-function __getSpanGroupByLine({ divides }) {
+function __getGlyphGroupByLine({ divides }) {
   return divides.flatMap((divide) => divide.glyphGroup);
 }
-__name(__getSpanGroupByLine, "__getSpanGroupByLine");
+__name(__getGlyphGroupByLine, "__getGlyphGroupByLine");
 function __isNullLine(line2) {
   return !line2.divides[0].glyphGroup[0];
 }
@@ -22044,7 +22126,13 @@ function getFontConfigFromLastGlyph(glyph, sectionBreakConfig, paragraphStyle) {
   };
 }
 __name(getFontConfigFromLastGlyph, "getFontConfigFromLastGlyph");
-function getFontCreateConfig(index2, viewModel, paragraphNode, sectionBreakConfig, paragraphStyle) {
+function getBulletParagraphTextStyle(bullet, viewModel) {
+  var _a11;
+  const { listType } = bullet;
+  return (_a11 = viewModel.getDataModel().getBulletPresetList()[listType].nestingLevel[0].paragraphProperties) == null ? void 0 : _a11.textStyle;
+}
+__name(getBulletParagraphTextStyle, "getBulletParagraphTextStyle");
+function getFontCreateConfig(index2, viewModel, paragraphNode, sectionBreakConfig, paragraph) {
   const {
     gridType = GridType.LINES,
     charSpace = 0,
@@ -22057,18 +22145,18 @@ function getFontCreateConfig(index2, viewModel, paragraphNode, sectionBreakConfi
     marginLeft = 0,
     localeService,
     renderConfig = {}
-  } = sectionBreakConfig, { isRenderStyle } = renderConfig, { startIndex } = paragraphNode, textRun = isRenderStyle === BooleanNumber.FALSE ? { ts: {}, st: 0, ed: 0 } : viewModel.getTextRun(index2 + startIndex) || { ts: {}, st: 0, ed: 0 }, 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, { st, ed } = textRun;
+  } = sectionBreakConfig, { paragraphStyle = {}, bullet } = paragraph, { isRenderStyle } = renderConfig, { startIndex } = paragraphNode, textRun = isRenderStyle === BooleanNumber.FALSE ? { ts: {}, st: 0, ed: 0 } : viewModel.getTextRun(index2 + startIndex) || { ts: {}, st: 0, ed: 0 }, 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, { st, ed } = textRun;
   let { ts: textStyle = {} } = textRun;
   const cache = fontCreateConfigCache.getValue(st, ed);
   if (cache && !hasAddonStyle)
     return cache;
-  const { snapToGrid = BooleanNumber.TRUE, textStyle: paragraphStyleTextStyle } = paragraphStyle;
+  const { snapToGrid = BooleanNumber.TRUE } = paragraphStyle, bulletTextStyle = bullet ? getBulletParagraphTextStyle(bullet, viewModel) : null;
   textStyle = {
     ...documentTextStyle,
     ...textStyle,
     ...customDecorationStyle,
     ...customRangeStyle,
-    ...paragraphStyleTextStyle
+    ...bulletTextStyle
   };
   const fontStyle = getFontStyleString(textStyle), mixTextStyle = {
     ...documentTextStyle,
@@ -22328,14 +22416,14 @@ const _Liquid = class _Liquid {
       y: 0
     };
   }
-  translateLine(line2, isDraw = !1) {
+  translateLine(line2, includeMarginTop = !1, includePaddingTop = !1) {
     const {
       top: lineTop,
       marginBottom: _lineMarginBottom = 0,
       marginTop: lineMarginTop = 0,
       paddingTop: linePaddingTop = 0,
       paddingBottom: _linePaddingBottom = 0
-    } = line2, lineOffset = lineTop + (isDraw === !0 ? lineMarginTop : 0) + linePaddingTop;
+    } = line2, lineOffset = lineTop + (includeMarginTop ? lineMarginTop : 0) + (includePaddingTop ? linePaddingTop : 0);
     return this.translate(0, lineOffset), {
       x: 0,
       y: lineOffset
@@ -22544,6 +22632,8 @@ const _DocumentViewModel = class _DocumentViewModel {
     __publicField(this, "editAreaChange$", this._editAreaChange$.asObservable());
     __publicField(this, "headerTreeMap", /* @__PURE__ */ new Map());
     __publicField(this, "footerTreeMap", /* @__PURE__ */ new Map());
+    __publicField(this, "_segmentViewModels$", new BehaviorSubject([]));
+    __publicField(this, "segmentViewModels$", this._segmentViewModels$.asObservable());
     this._documentDataModel = _documentDataModel, _documentDataModel.getBody() != null && (this.children = parseDataStreamToTree(_documentDataModel.getBody().dataStream), this._buildHeaderFooterViewModel());
   }
   registerCustomRangeInterceptor(interceptor) {
@@ -22783,11 +22873,12 @@ const _DocumentViewModel = class _DocumentViewModel {
     return this._interceptor ? this._interceptor.getCustomDecoration(index2) : this.getCustomDecorationRaw(index2);
   }
   _buildHeaderFooterViewModel() {
-    const { headerModelMap, footerModelMap } = this._documentDataModel;
+    const { headerModelMap, footerModelMap } = this._documentDataModel, viewModels = [];
     for (const [headerId, headerModel] of headerModelMap)
-      this.headerTreeMap.set(headerId, new _DocumentViewModel(headerModel));
+      this.headerTreeMap.set(headerId, new _DocumentViewModel(headerModel)), viewModels.push(this.headerTreeMap.get(headerId));
     for (const [footerId, footerModel] of footerModelMap)
-      this.footerTreeMap.set(footerId, new _DocumentViewModel(footerModel));
+      this.footerTreeMap.set(footerId, new _DocumentViewModel(footerModel)), viewModels.push(this.footerTreeMap.get(footerId));
+    this._segmentViewModels$.next(viewModels);
   }
   _getParagraphByIndex(nodes, insertIndex) {
     for (const node of nodes) {
@@ -22995,7 +23086,7 @@ const _NodePositionConvertToCursor = class _NodePositionConvertToCursor {
       );
     const { start, end } = compareNodePosition(startOrigin, endOrigin);
     return this._selectionIterator(start, end, (start_sp, end_sp, isFirst, isLast, divide, line2) => {
-      const { lineHeight, marginTop, asc, paddingTop } = line2, { glyphGroup, st } = divide;
+      const { lineHeight, asc, paddingTop, marginTop, marginBottom } = line2, { glyphGroup, st } = divide;
       if (glyphGroup.length === 0)
         return;
       const { x: startX, y: startY } = this._liquid;
@@ -23005,13 +23096,13 @@ const _NodePositionConvertToCursor = class _NodePositionConvertToCursor {
         borderBoxPosition = {
           startX: startX + firstGlyphLeft + (isCurrentList ? firstGlyphWidth : 0),
           startY,
-          endX: startX + lastGlyphLeft + lastGlyphWidth,
-          endY: startY + lineHeight
+          endX: startX + lastGlyphLeft + (isEndBack ? 0 : lastGlyphWidth),
+          endY: startY + lineHeight - marginTop - marginBottom
         }, contentBoxPosition = {
           startX: startX + firstGlyphLeft + (isCurrentList ? firstGlyphWidth : 0),
-          startY: startY + marginTop + paddingTop + asc - anchorGlyph.bBox.ba,
-          endX: startX + lastGlyphLeft + lastGlyphWidth,
-          endY: startY + marginTop + paddingTop + asc + anchorGlyph.bBox.bd
+          startY: startY + paddingTop + asc - anchorGlyph.bBox.ba,
+          endX: startX + lastGlyphLeft + (isEndBack ? 0 : lastGlyphWidth),
+          endY: startY + paddingTop + asc + anchorGlyph.bBox.bd
         };
       else {
         const isStartBackFin = isStartBack && !isCurrentList;
@@ -23019,12 +23110,12 @@ const _NodePositionConvertToCursor = class _NodePositionConvertToCursor {
           startX: startX + firstGlyphLeft + (isStartBackFin ? 0 : firstGlyphWidth),
           startY,
           endX: startX + lastGlyphLeft + (isEndBack ? 0 : lastGlyphWidth),
-          endY: startY + lineHeight
+          endY: startY + lineHeight - marginTop - marginBottom
         }, contentBoxPosition = {
           startX: startX + firstGlyphLeft + (isStartBackFin ? 0 : firstGlyphWidth),
-          startY: startY + marginTop + paddingTop + asc - anchorGlyph.bBox.ba,
+          startY: startY + paddingTop + asc - anchorGlyph.bBox.ba,
           endX: startX + lastGlyphLeft + (isEndBack ? 0 : lastGlyphWidth),
-          endY: startY + marginTop + paddingTop + asc + anchorGlyph.bBox.bd
+          endY: startY + paddingTop + asc + anchorGlyph.bBox.bd
         };
       }
       borderBoxPointGroup.push(pushToPoints(borderBoxPosition)), contentBoxPointGroup.push(pushToPoints(contentBoxPosition)), cursorList.push({
@@ -23175,7 +23266,7 @@ const _NodePositionConvertToCursor = class _NodePositionConvertToCursor {
               divides.length - 1,
               l
             );
-            this._liquid.translateSave(), this._liquid.translateLine(line2);
+            this._liquid.translateSave(), this._liquid.translateLine(line2, !0, !1);
             for (let d = start_d; d <= end_d; d++) {
               const divide = divides[d];
               this._liquid.translateSave(), this._liquid.translateDivide(divide);
@@ -23778,6 +23869,8 @@ __name(getPagePath, "getPagePath");
 const _DocumentSkeleton = class _DocumentSkeleton extends Skeleton {
   constructor(_docViewModel, localeService) {
     super(localeService);
+    __publicField(this, "_dirty$", new Subject());
+    __publicField(this, "dirty$", this._dirty$.asObservable());
     __publicField(this, "_skeletonData");
     __publicField(this, "_findLiquid", new Liquid());
     // Use for hyphenation.
@@ -23800,7 +23893,7 @@ const _DocumentSkeleton = class _DocumentSkeleton extends Skeleton {
     if (!this.dirty)
       return;
     const ctx = this._prepareLayoutContext();
-    this._skeletonData = this._createSkeleton(ctx, bounds);
+    this._skeletonData = this._createSkeleton(ctx, bounds), this._dirty$.next(!0);
   }
   getSkeletonData() {
     return this._skeletonData;
@@ -23879,7 +23972,7 @@ const _DocumentSkeleton = class _DocumentSkeleton extends Skeleton {
         break;
       index2 += g.count;
     }
-    return index2;
+    return position.isBack ? index2 : index2 + glyph.count;
   }
   findNodePositionByCharIndex(charIndex, isBack = !0, segmentId = "", segmentPIndex = -1) {
     const nodes = this._findNodeByIndex(charIndex, segmentId, segmentPIndex);
@@ -23931,10 +24024,8 @@ const _DocumentSkeleton = class _DocumentSkeleton extends Skeleton {
     const skeletonData = this.getSkeletonData();
     if (skeletonData == null)
       return;
-    const { pages, skeFooters, skeHeaders } = skeletonData, { divide, line: line2, column, section, isBack, segmentPage, pageType, path } = position;
-    let { glyph } = position;
-    isBack === !1 && (glyph += 1);
-    let skePage = null;
+    const { pages, skeFooters, skeHeaders } = skeletonData, { divide, line: line2, column, section, segmentPage, pageType, path } = position;
+    let { glyph } = position, skePage = null;
     if (pageType === DocumentSkeletonPageType.HEADER || pageType === DocumentSkeletonPageType.FOOTER) {
       skePage = pages[segmentPage];
       const { headerId, footerId, pageWidth } = skePage;
@@ -23997,8 +24088,7 @@ const _DocumentSkeleton = class _DocumentSkeleton extends Skeleton {
       return;
     const cache = {
       nearestNodeList: [],
-      nearestNodeDistanceList: [],
-      nearestNodeDistanceY: Number.POSITIVE_INFINITY
+      nearestNodeDistanceList: []
     }, { pages, skeHeaders, skeFooters } = skeletonData, editArea = this.findEditAreaByCoord(coord, pageLayoutType, pageMarginLeft, pageMarginTop).editArea;
     if (this._findLiquid.reset(), restrictions == null)
       for (let pi = 0, len = pages.length; pi < len; pi++) {
@@ -24126,7 +24216,9 @@ const _DocumentSkeleton = class _DocumentSkeleton extends Skeleton {
   _collectNearestNode(segmentPage, pageType, page, segmentId, pi, cache, x, y, nestLevel = 0) {
     var _a11, _b, _c, _d, _e, _f, _g, _h, _i;
     const { sections, skeTables } = segmentPage;
-    switch (this._findLiquid.translateSave(), pageType) {
+    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;
+    switch (pageType) {
       case DocumentSkeletonPageType.HEADER: {
         this._findLiquid.translatePagePadding({
           ...segmentPage,
@@ -24145,8 +24237,8 @@ const _DocumentSkeleton = class _DocumentSkeleton extends Skeleton {
         break;
       }
     }
-    const pointInPage = x >= this._findLiquid.x && x <= this._findLiquid.x + segmentPage.pageWidth && y >= this._findLiquid.y && y <= this._findLiquid.y + segmentPage.pageHeight;
-    if (pointInPage)
+    if (pointInPage) {
+      let nearestNodeDistanceY = Number.POSITIVE_INFINITY;
       for (const section of sections) {
         const { columns } = section;
         this._findLiquid.translateSave(), this._findLiquid.translateSection(section);
@@ -24175,7 +24267,7 @@ const _DocumentSkeleton = class _DocumentSkeleton extends Skeleton {
                         ratioX: x / (startX_fin + endX_fin),
                         ratioY: y / (startY_fin + endY_fin)
                       };
-                    cache.nearestNodeDistanceY !== Number.NEGATIVE_INFINITY && (cache.nearestNodeList = [], cache.nearestNodeDistanceList = []), cache.nearestNodeList.push({
+                    nearestNodeDistanceY !== Number.NEGATIVE_INFINITY && (cache.nearestNodeList = [], cache.nearestNodeDistanceList = []), cache.nearestNodeList.push({
                       node: glyph,
                       segmentPage: pageType === DocumentSkeletonPageType.BODY ? -1 : pi,
                       segmentId,
@@ -24185,10 +24277,10 @@ const _DocumentSkeleton = class _DocumentSkeleton extends Skeleton {
                       coordInPage: pointInPage,
                       distance: distanceX,
                       nestLevel
-                    }), cache.nearestNodeDistanceY = Number.NEGATIVE_INFINITY;
+                    }), nearestNodeDistanceY = Number.NEGATIVE_INFINITY;
                     continue;
                   }
-                  distanceY < cache.nearestNodeDistanceY && (cache.nearestNodeDistanceY = distanceY, cache.nearestNodeList = [], cache.nearestNodeDistanceList = []), distanceY === cache.nearestNodeDistanceY && (cache.nearestNodeList.push({
+                  distanceY < nearestNodeDistanceY && (nearestNodeDistanceY = distanceY, cache.nearestNodeList = [], cache.nearestNodeDistanceList = []), distanceY === nearestNodeDistanceY && (cache.nearestNodeList.push({
                     node: glyph,
                     segmentPage: pageType === DocumentSkeletonPageType.BODY ? -1 : pi,
                     segmentId,
@@ -24209,6 +24301,7 @@ const _DocumentSkeleton = class _DocumentSkeleton extends Skeleton {
         }
         this._findLiquid.translateRestore();
       }
+    }
     let exactMatch = null;
     if (skeTables.size > 0)
       for (const table2 of skeTables.values()) {
@@ -24498,7 +24591,7 @@ var __defProp$4 = Object.defineProperty, __getOwnPropDesc$4 = Object.getOwnPrope
 function getDocsSkeletonPageSize(documentSkeleton, angleInDegree = 0) {
   const skeletonData = documentSkeleton == null ? void 0 : documentSkeleton.getSkeletonData(), angle = degToRad(angleInDegree);
   if (!skeletonData)
-    return;
+    return null;
   const { pages } = skeletonData, lastPage = pages[pages.length - 1], { width, height } = lastPage;
   if (angle === 0)
     return { width, height };
@@ -24647,8 +24740,7 @@ let SpreadsheetSkeleton = (_a6 = class extends Skeleton {
     this._marginTop = top;
   }
   calculateSegment(bounds) {
-    if (this._worksheetData && (this._updateLayout(), !(!this._rowHeightAccumulation || !this._columnWidthAccumulation)))
-      return bounds != null && (this._rowColumnSegment = this.getRowColumnSegment(bounds)), !0;
+    return !this._worksheetData || (this._updateLayout(), !this._rowHeightAccumulation || !this._columnWidthAccumulation) ? !1 : (bounds != null && (this._rowColumnSegment = this.getRowColumnSegment(bounds)), !0);
   }
   calculateWithoutClearingCache(bounds) {
     if (!this.calculateSegment(bounds))
@@ -24694,8 +24786,11 @@ let SpreadsheetSkeleton = (_a6 = class extends Skeleton {
         continue;
       const cell = worksheet.getCell(rowNum, i);
       if (cell != null && cell.interceptorAutoHeight) {
-        height = Math.max(height, cell.interceptorAutoHeight);
-        continue;
+        const cellHeight = cell.interceptorAutoHeight();
+        if (cellHeight) {
+          height = Math.max(height, cellHeight);
+          continue;
+        }
       }
       const modelObject = cell && this._getCellDocumentModel(cell);
       if (modelObject == null)
@@ -24721,6 +24816,9 @@ let SpreadsheetSkeleton = (_a6 = class extends Skeleton {
     }
     return Math.min(height, MAXIMUM_ROW_HEIGHT);
   }
+  /**
+   * Calculate data for row col & cell position, then update position value to this._rowHeaderWidth & this._rowHeightAccumulation & this._columnHeaderHeight & this._columnWidthAccumulation.
+   */
   _updateLayout() {
     if (!this.dirty)
       return;
@@ -24743,7 +24841,7 @@ let SpreadsheetSkeleton = (_a6 = class extends Skeleton {
       columnData,
       defaultColumnWidth
     );
-    return this._rowHeaderWidth = rowHeader.hidden !== BooleanNumber.TRUE ? this._dynamicallyUpdateRowHeaderWidth(rowHeader) : 0, this._columnHeaderHeight = columnHeader.hidden !== BooleanNumber.TRUE ? columnHeader.height : 0, this._rowTotalHeight = rowTotalHeight, this._rowHeightAccumulation = rowHeightAccumulation, this._columnTotalWidth = columnTotalWidth, this._columnWidthAccumulation = columnWidthAccumulation, this._showGridlines = showGridlines, this.makeDirty(!1), this;
+    this._rowHeaderWidth = rowHeader.hidden !== BooleanNumber.TRUE ? this._dynamicallyUpdateRowHeaderWidth(rowHeader) : 0, this._columnHeaderHeight = columnHeader.hidden !== BooleanNumber.TRUE ? columnHeader.height : 0, this._rowTotalHeight = rowTotalHeight, this._rowHeightAccumulation = rowHeightAccumulation, this._columnTotalWidth = columnTotalWidth, this._columnWidthAccumulation = columnWidthAccumulation, this._showGridlines = showGridlines, this.makeDirty(!1);
   }
   _dynamicallyUpdateRowHeaderWidth(rowHeader) {
     const widthByComputation = `${this.worksheet.getRowCount()}`.length * 8;
@@ -24819,7 +24917,8 @@ let SpreadsheetSkeleton = (_a6 = class extends Skeleton {
     return this._rowHeightAccumulation.length;
   }
   getOverflowPosition(contentSize, horizontalAlign, row, column, columnCount) {
-    const { width: contentWidth } = contentSize;
+    var _a11;
+    const contentWidth = (_a11 = contentSize == null ? void 0 : contentSize.width) != null ? _a11 : 0;
     let startColumn = column, endColumn = column;
     return horizontalAlign === HorizontalAlign.CENTER ? (startColumn = this._getOverflowBound(row, column, 0, contentWidth / 2, horizontalAlign), endColumn = this._getOverflowBound(row, column, columnCount - 1, contentWidth / 2, horizontalAlign)) : horizontalAlign === HorizontalAlign.RIGHT ? startColumn = this._getOverflowBound(row, column, 0, contentWidth) : endColumn = this._getOverflowBound(row, column, columnCount - 1, contentWidth), {
       startColumn,
@@ -24861,7 +24960,7 @@ let SpreadsheetSkeleton = (_a6 = class extends Skeleton {
     };
   }
   /**
-   *
+   * Get cell by pos(offsetX, offsetY).
    * @param offsetX HTML coordinate system, mouse position x.
    * @param offsetY HTML coordinate system, mouse position y.
    * @param scaleX render scene scale x-axis, scene.getAncestorScale
@@ -25006,14 +25105,14 @@ let SpreadsheetSkeleton = (_a6 = class extends Skeleton {
   getBlankCellDocumentModel(cell) {
     const documentModelObject = this._getCellDocumentModel(cell, {
       ignoreTextRotation: !0
-    });
+    }), style = this._styles.getStyleByCell(cell), textStyle = this._getFontFormat(style);
     if (documentModelObject != null)
-      return documentModelObject.documentModel == null && (documentModelObject.documentModel = this._getDocumentDataByStyle("", {}, {})), documentModelObject;
+      return documentModelObject.documentModel == null && (documentModelObject.documentModel = this._getDocumentDataByStyle("", 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, {}, {}),
+      documentModel: this._getDocumentDataByStyle(content, textStyle, {}),
       fontString,
       textRotation,
       wrapStrategy,
@@ -25146,6 +25245,7 @@ let SpreadsheetSkeleton = (_a6 = class extends Skeleton {
         return !0;
       this.appendToOverflowCache(row, column, startColumn, endColumn);
     }
+    return !1;
   }
   /**
    *
@@ -25213,6 +25313,7 @@ let SpreadsheetSkeleton = (_a6 = class extends Skeleton {
       columnWidthAccumulation
     };
   }
+  //eslint-disable-next-line complexity
   _getOverflowBound(row, startColumn, endColumn, contentWidth, horizontalAlign = HorizontalAlign.LEFT) {
     let cumWidth = 0;
     if (startColumn > endColumn) {
@@ -25275,18 +25376,20 @@ let SpreadsheetSkeleton = (_a6 = class extends Skeleton {
   //     return mergeRangeCache;
   // }
   _calculateStylesCache() {
-    const dataMergeCache = this._dataMergeCache, rowColumnSegment = this._rowColumnSegment, columnWidthAccumulation = this.columnWidthAccumulation, { startRow, endRow, startColumn, endColumn } = rowColumnSegment;
+    const dataMergeCaches = this._dataMergeCache, rowColumnSegment = this._rowColumnSegment, columnWidthAccumulation = this.columnWidthAccumulation, { startRow, endRow, startColumn, endColumn } = rowColumnSegment;
     if (!(endColumn === -1 || endRow === -1)) {
-      for (const data2 of dataMergeCache)
-        this._setCellCache(data2.startRow, data2.startColumn, !1, data2);
+      for (const mergeRange of dataMergeCaches)
+        this._setCellStylesCache(mergeRange.startRow, mergeRange.startColumn, {
+          mergeRange
+        });
       for (let r = startRow; r <= endRow; r++) {
         for (let c = startColumn; c <= endColumn; c++)
-          this._setCellCache(r, c, !1);
+          this._setCellStylesCache(r, c);
         for (let c = 0; c < startColumn; c++)
-          this._setCellCache(r, c, !0);
+          this._setCellStylesCache(r, c, { cacheItem: { bg: !1, border: !1 } });
         if (endColumn !== 0)
           for (let c = endColumn + 1; c < columnWidthAccumulation.length; c++)
-            this._setCellCache(r, c, !0);
+            this._setCellStylesCache(r, c, { cacheItem: { bg: !1, border: !1 } });
       }
     }
   }
@@ -25314,11 +25417,11 @@ let SpreadsheetSkeleton = (_a6 = class extends Skeleton {
     }
   }
   // eslint-disable-next-line complexity
-  _setCellCache(r, c, skipBackgroundAndBorder, mergeRange) {
+  _setCellStylesCache(r, c, options) {
     var _a11;
-    const needsRendering = this._renderedCellCache.getValue(r, c);
     if (r === -1 || c === -1)
       return !0;
+    const needsRendering = this._renderedCellCache.getValue(r, c);
     if (needsRendering === !1)
       return this._makeDocumentSkeletonDirty(r, c), !0;
     const cell = this.worksheet.getCell(r, c) || this.worksheet.getCellRaw(r, c);
@@ -25335,14 +25438,18 @@ let SpreadsheetSkeleton = (_a6 = class extends Skeleton {
       if (!isMergedMainCell)
         return !0;
     }
-    const cache = this._stylesCache, style = this._styles.getStyleByCell(cell);
-    if (!skipBackgroundAndBorder && style && style.bg && style.bg.rgb) {
+    const cache = this._stylesCache, style = this._styles.getStyleByCell(cell), cacheItem = (options == null ? void 0 : options.cacheItem) || { bg: !0, border: !0 };
+    if (cacheItem.bg && style && style.bg && style.bg.rgb) {
       const rgb = style.bg.rgb;
       cache.background[rgb] || (cache.background[rgb] = new ObjectMatrix()), cache.background[rgb].setValue(r, c, rgb);
       const cellInfo = this.getCellByIndexWithNoHeader(r, c);
       (_a11 = cache.backgroundPositions) == null || _a11.setValue(r, c, cellInfo);
     }
-    if (!skipBackgroundAndBorder && style && style.bd && (mergeRange ? (this._setMergeBorderProps(BORDER_TYPE.TOP, cache, mergeRange), this._setMergeBorderProps(BORDER_TYPE.BOTTOM, cache, mergeRange), this._setMergeBorderProps(BORDER_TYPE.LEFT, cache, mergeRange), this._setMergeBorderProps(BORDER_TYPE.RIGHT, cache, mergeRange)) : this.intersectMergeRange(r, c) || (this._setBorderProps(r, c, BORDER_TYPE.TOP, style, cache), this._setBorderProps(r, c, BORDER_TYPE.BOTTOM, style, cache), this._setBorderProps(r, c, BORDER_TYPE.LEFT, style, cache), this._setBorderProps(r, c, BORDER_TYPE.RIGHT, style, cache)), this._setBorderProps(r, c, BORDER_TYPE.TL_BR, style, cache), this._setBorderProps(r, c, BORDER_TYPE.TL_BC, style, cache), this._setBorderProps(r, c, BORDER_TYPE.TL_MR, style, cache), this._setBorderProps(r, c, BORDER_TYPE.BL_TR, style, cache), this._setBorderProps(r, c, BORDER_TYPE.ML_TR, style, cache), this._setBorderProps(r, c, BORDER_TYPE.BC_TR, style, cache)), needsRendering === !0)
+    if (cacheItem.border && style && style.bd) {
+      const mergeRange = options == null ? void 0 : options.mergeRange;
+      mergeRange ? (this._setMergeBorderProps(BORDER_TYPE.TOP, cache, mergeRange), this._setMergeBorderProps(BORDER_TYPE.BOTTOM, cache, mergeRange), this._setMergeBorderProps(BORDER_TYPE.LEFT, cache, mergeRange), this._setMergeBorderProps(BORDER_TYPE.RIGHT, cache, mergeRange)) : this.intersectMergeRange(r, c) || (this._setBorderProps(r, c, BORDER_TYPE.TOP, style, cache), this._setBorderProps(r, c, BORDER_TYPE.BOTTOM, style, cache), this._setBorderProps(r, c, BORDER_TYPE.LEFT, style, cache), this._setBorderProps(r, c, BORDER_TYPE.RIGHT, style, cache)), this._setBorderProps(r, c, BORDER_TYPE.TL_BR, style, cache), this._setBorderProps(r, c, BORDER_TYPE.TL_BC, style, cache), this._setBorderProps(r, c, BORDER_TYPE.TL_MR, style, cache), this._setBorderProps(r, c, BORDER_TYPE.BL_TR, style, cache), this._setBorderProps(r, c, BORDER_TYPE.ML_TR, style, cache), this._setBorderProps(r, c, BORDER_TYPE.BC_TR, style, cache);
+    }
+    if (needsRendering === !0)
       return this._makeDocumentSkeletonDirty(r, c), !0;
     if (isNullCell(cell))
       return;
@@ -25370,7 +25477,7 @@ let SpreadsheetSkeleton = (_a6 = class extends Skeleton {
       };
       fontCache2.setValue(r, c, config), this._calculateOverflowCell(r, c, config);
     }
-    skipBackgroundAndBorder ? this._renderedCellCache.setValue(r, c, !0) : this._renderedCellCache.setValue(r, c, !1);
+    cacheItem.bg || cacheItem.border ? this._renderedCellCache.setValue(r, c, !1) : this._renderedCellCache.setValue(r, c, !0);
   }
   _updateConfigAndGetDocumentModel(documentData, horizontalAlign, renderConfig) {
     var _a11;
@@ -25391,7 +25498,8 @@ let SpreadsheetSkeleton = (_a6 = class extends Skeleton {
       paddingData = {
         t: 0,
         r: 2,
-        b: 1,
+        b: 2,
+        // must over 1, see https://github.com/dream-num/univer/issues/2727
         l: 2
       },
       horizontalAlign = HorizontalAlign.UNSPECIFIED,
@@ -25416,7 +25524,10 @@ let SpreadsheetSkeleton = (_a6 = class extends Skeleton {
               horizontalAlign
             }
           }
-        ]
+        ],
+        sectionBreaks: [{
+          startIndex: contentLength + 1
+        }]
       },
       documentStyle: {
         pageSize: {
@@ -25489,13 +25600,13 @@ let SpreadsheetSkeleton = (_a6 = class extends Skeleton {
     var _a11, _b, _c;
     const props = (_a11 = style.bd) == null ? void 0 : _a11[type];
     if (!props || !cache.border)
-      return !0;
+      return;
     const rgb = getColorStyle(props.cl) || COLOR_BLACK_RGB, borderCache = cache.border;
     if (borderCache.getValue(r, c) || borderCache.setValue(r, c, { [type]: {} }), type === BORDER_TYPE.TOP) {
       if (((_b = borderCache.getValue(r - 1, c)) == null ? void 0 : _b[BORDER_TYPE.BOTTOM]) && isWhiteColor(rgb))
-        return !0;
+        return;
     } else if (type === BORDER_TYPE.LEFT && ((_c = borderCache.getValue(r, c - 1)) == null ? void 0 : _c[BORDER_TYPE.RIGHT]) && isWhiteColor(rgb))
-      return !0;
+      return;
     borderCache.getValue(r, c)[type] = {
       type,
       style: props.s,
@@ -25584,14 +25695,13 @@ const UNIQUE_KEY$7 = "DefaultFontExtension", EXTENSION_Z_INDEX = 45, _Font = cla
   }
   draw(ctx, parentScale, spreadsheetSkeleton, diffRanges, moreBoundsInfo) {
     const { viewRanges = [], checkOutOfViewBound } = moreBoundsInfo, { stylesCache, dataMergeCache, overflowCache, worksheet } = spreadsheetSkeleton, { font: fontList } = stylesCache;
-    if (!spreadsheetSkeleton || !worksheet)
+    if (!spreadsheetSkeleton || !worksheet || !fontList)
       return;
     const { rowHeightAccumulation, columnTotalWidth, columnWidthAccumulation, rowTotalHeight } = spreadsheetSkeleton;
     if (!rowHeightAccumulation || !columnWidthAccumulation || columnTotalWidth === void 0 || rowTotalHeight === void 0 || !worksheet)
       return;
     ctx.save();
-    const scale = this._getScale(parentScale);
-    fontList && Object.keys(fontList).forEach((fontFormat) => {
+    const scale = this._getScale(parentScale), renderFontByCell = /* @__PURE__ */ __name((fontFormat) => {
       fontList[fontFormat].forValue((rowIndex, columnIndex, docsConfig) => {
         var _a11, _b, _c, _d, _e;
         if (!checkOutOfViewBound && !inViewRanges(viewRanges, rowIndex, columnIndex))
@@ -25666,13 +25776,14 @@ const UNIQUE_KEY$7 = "DefaultFontExtension", EXTENSION_Z_INDEX = 45, _Font = cla
           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();
       });
-    }), ctx.restore();
+    }, "renderFontByCell");
+    Object.keys(fontList).forEach(renderFontByCell), ctx.restore();
   }
   _renderDocuments(ctx, docsConfig, startX, startY, endX, endY, row, column, overflowCache) {
     const documents = this.getDocuments();
     if (documents == null)
       throw new Error("documents is null");
-    const { documentSkeleton, vertexAngle = 0, wrapStrategy } = docsConfig, cellWidth = endX - startX, cellHeight = endY - startY;
+    const { documentSkeleton, vertexAngle = 0, wrapStrategy } = docsConfig, cellHeight = endY - startY, cellWidth = endX - startX;
     wrapStrategy === WrapStrategy.WRAP && vertexAngle === 0 ? (documentSkeleton.getViewModel().getDataModel().updateDocumentDataPageSize(cellWidth), documentSkeleton.calculate()) : documentSkeleton.getViewModel().getDataModel().updateDocumentDataPageSize(Number.POSITIVE_INFINITY);
     const overflowRectangle = overflowCache.getValue(row, column);
     if (!(wrapStrategy === WrapStrategy.WRAP && !overflowRectangle && vertexAngle === 0)) {
@@ -26210,16 +26321,19 @@ const SHAPE_OBJECT_ARRAY = [
     const m = this.transform.getMatrix();
     return mainCtx.save(), mainCtx.transform(m[0], m[1], m[2], m[3], m[4], m[5]), this._draw(mainCtx, bounds), mainCtx.restore(), this.makeDirty(!1), this;
   }
+  /**
+   * this[_key] = props[key]
+   * @param props
+   */
   setProps(props) {
     if (!props)
-      return;
+      return this;
     const themeKeys = Object.keys(props);
-    if (themeKeys.length !== 0)
-      return themeKeys.forEach((key) => {
-        if (props[key] === void 0)
-          return !0;
-        BASE_OBJECT_ARRAY.indexOf(key) === -1 && (this[`_${key}`] = props[key]);
-      }), this.makeDirty(!0), this;
+    return themeKeys.length === 0 ? this : (themeKeys.forEach((key) => {
+      if (props[key] === void 0)
+        return !0;
+      BASE_OBJECT_ARRAY.indexOf(key) === -1 && (this[`_${key}`] = props[key]);
+    }), this.makeDirty(!0), this);
   }
   toJson() {
     const props = {};
@@ -27334,12 +27448,11 @@ const RICHTEXT_OBJECT_ARRAY = ["text", "richText", "fs"], _RichText = class _Ric
     }), this.setProps(props), this.makeDirty(!0);
   }
   /**
-   *
-   * it should be invoked when _documentData changed.
-   * _documentData changed ---> update _documentSkeleton & _documentSkeleton
-   *
-   * now it is invoked when transformByState(change editor size) & end of editing
+   * After changing editor size & end of editing, update skeleton of doc.
    */
+  // TODO: This method should be invoked when _documentData changed.
+  // _documentData changed ---> update _documentSkeleton & _documentSkeleton
+  // now it is invoked when transformByState(change editor size) & end of editing
   refreshDocumentByDocData() {
     const docModel = this.documentModel = new DocumentDataModel(this._documentData), docViewModel = new DocumentViewModel(docModel);
     this._documentSkeleton = DocumentSkeleton.create(docViewModel, this._localeService), this._documents = new Documents(`${this.oKey}_DOCUMENTS`, this._documentSkeleton, {
@@ -27746,21 +27859,21 @@ const UNIQUE_KEY = "DefaultDocsLineExtension", DOC_EXTENSION_Z_INDEX = 40, _Line
     const line2 = (_a11 = glyph.parent) == null ? void 0 : _a11.parent, { ts: textStyle, bBox, content } = glyph;
     if (line2 == null || textStyle == null || content === "\r")
       return;
-    const { asc, dsc, paddingTop } = line2, { sp: strikeoutPosition, spo, sbo, bd } = bBox, scale = getScale(parentScale), DELTA = 0.5, { ul: underline, st: strikethrough, ol: overline, va: baselineOffset, bbl: bottomBorderLine } = textStyle;
+    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 (underline) {
-      const startY = asc + dsc + paddingTop;
+      const startY = asc + dsc;
       this._drawLine(ctx, glyph, underline, startY, scale);
     }
     if (bottomBorderLine) {
-      const startY = asc + dsc + 3 + paddingTop;
+      const startY = asc + dsc + 3;
       this._drawLine(ctx, glyph, bottomBorderLine, startY, scale, 2);
     }
     if (strikethrough) {
-      let startY = asc + bd - strikeoutPosition - DELTA + paddingTop;
+      let startY = asc + bd - strikeoutPosition - DELTA;
       baselineOffset === BaselineOffset.SUPERSCRIPT ? startY -= spo : baselineOffset === BaselineOffset.SUBSCRIPT && (startY += sbo), this._drawLine(ctx, glyph, strikethrough, startY, scale);
     }
     if (overline) {
-      const startY = -DEFAULT_OFFSET_SPACING - DELTA + paddingTop;
+      const startY = -DEFAULT_OFFSET_SPACING - DELTA;
       this._drawLine(ctx, glyph, overline, startY, scale);
     }
   }
@@ -28015,7 +28128,7 @@ const _Documents = class _Documents extends DocComponent {
             rotatedHeight > this.height && (vertexAngle < 0 ? exceedHeightFix = this.height - (rotatedHeight + fixOffsetY) : exceedHeightFix = -fixOffsetY), alignOffset = Vector2.create(horizontalOffset + fixOffsetX, exceedHeightFix), this._drawLiquid.translate(0, -rotateTranslateY), rotateTranslateXListApply = rotateTranslateXList;
           } else wrapStrategy === WrapStrategy.WRAP && (horizontalAlign !== HorizontalAlign.UNSPECIFIED || cellValueType !== CellValueType.NUMBER) && (alignOffset.x = pagePaddingLeft);
           for (let i2 = 0; i2 < linesCount; i2++) {
-            const line2 = lines[i2], { divides, asc = 0, type, lineHeight = 0, paddingTop } = line2, maxLineAsc = asc, maxLineAscSin = maxLineAsc * Math.sin(centerAngle), maxLineAscCos = maxLineAsc * Math.cos(centerAngle);
+            const line2 = lines[i2], { divides, asc = 0, type, lineHeight = 0 } = line2, maxLineAsc = asc, maxLineAscSin = maxLineAsc * Math.sin(centerAngle), maxLineAscCos = maxLineAsc * Math.cos(centerAngle);
             if (type === LineType.BLOCK)
               for (const extension of extensions)
                 extension.type === DOCS_EXTENSION_TYPE.LINE && (extension.extensionOffset = {
@@ -28023,7 +28136,7 @@ const _Documents = class _Documents extends DocComponent {
                   renderConfig
                 }, extension.draw(ctx, parentScale, line2));
             else {
-              this._drawLiquid.translateSave(), this._drawLiquid.translateLine(line2, !0), rotateTranslateXListApply && this._drawLiquid.translate(rotateTranslateXListApply[i2]);
+              this._drawLiquid.translateSave(), this._drawLiquid.translateLine(line2, !0, !0), rotateTranslateXListApply && this._drawLiquid.translate(rotateTranslateXListApply[i2]);
               const divideLength = divides.length;
               for (let i3 = 0; i3 < divideLength; i3++) {
                 const divide = divides[i3], { glyphGroup } = divide;
@@ -28033,7 +28146,7 @@ const _Documents = class _Documents extends DocComponent {
                     continue;
                   const { width: spanWidth, left: spanLeft } = glyph, { x: translateX, y: translateY } = this._drawLiquid, originTranslate = Vector2.create(translateX, translateY), centerPoint = Vector2.create(spanWidth / 2, lineHeight / 2), extensionOffset = {
                     spanStartPoint: calculateRectRotate(
-                      originTranslate.addByPoint(spanLeft, paddingTop),
+                      originTranslate.addByPoint(spanLeft, 0),
                       centerPoint,
                       centerAngle,
                       vertexAngle,
@@ -28046,7 +28159,7 @@ const _Documents = class _Documents extends DocComponent {
                   if (!glyph.content || glyph.content.length === 0)
                     continue;
                   const { width: spanWidth, left: spanLeft, xOffset } = glyph, { x: translateX, y: translateY } = this._drawLiquid, originTranslate = Vector2.create(translateX, translateY), centerPoint = Vector2.create(spanWidth / 2, lineHeight / 2), spanStartPoint = calculateRectRotate(
-                    originTranslate.addByPoint(spanLeft + xOffset, paddingTop),
+                    originTranslate.addByPoint(spanLeft + xOffset, 0),
                     centerPoint,
                     centerAngle,
                     vertexAngle,
@@ -28054,7 +28167,7 @@ const _Documents = class _Documents extends DocComponent {
                   ), spanPointWithFont = calculateRectRotate(
                     originTranslate.addByPoint(
                       spanLeft + maxLineAscSin + xOffset,
-                      maxLineAscCos + paddingTop
+                      maxLineAscCos
                     ),
                     centerPoint,
                     centerAngle,
@@ -28160,7 +28273,7 @@ const _Documents = class _Documents extends DocComponent {
         this._drawLiquid.translateSave(), this._drawLiquid.translateColumn(column);
         const linesCount = lines.length, alignOffset = alignOffsetNoAngle;
         for (let i = 0; i < linesCount; i++) {
-          const line2 = lines[i], { divides, asc = 0, type, lineHeight = 0, paddingTop } = line2, maxLineAsc = asc, maxLineAscSin = maxLineAsc * Math.sin(centerAngle), maxLineAscCos = maxLineAsc * Math.cos(centerAngle);
+          const line2 = lines[i], { divides, asc = 0, type, lineHeight = 0 } = line2, maxLineAsc = asc, maxLineAscSin = maxLineAsc * Math.sin(centerAngle), maxLineAscCos = maxLineAsc * Math.cos(centerAngle);
           if (type === LineType.BLOCK)
             for (const extension of extensions)
               extension.type === DOCS_EXTENSION_TYPE.LINE && (extension.extensionOffset = {
@@ -28168,7 +28281,7 @@ const _Documents = class _Documents extends DocComponent {
                 renderConfig
               }, extension.draw(ctx, parentScale, line2));
           else {
-            this._drawLiquid.translateSave(), this._drawLiquid.translateLine(line2, !0);
+            this._drawLiquid.translateSave(), this._drawLiquid.translateLine(line2, !0, !0);
             const divideLength = divides.length;
             for (let i2 = 0; i2 < divideLength; i2++) {
               const divide = divides[i2], { glyphGroup } = divide;
@@ -28178,7 +28291,7 @@ const _Documents = class _Documents extends DocComponent {
                   continue;
                 const { width: spanWidth, left: spanLeft } = glyph, { x: translateX, y: translateY } = this._drawLiquid, originTranslate = Vector2.create(translateX, translateY), centerPoint = Vector2.create(spanWidth / 2, lineHeight / 2), extensionOffset = {
                   spanStartPoint: calculateRectRotate(
-                    originTranslate.addByPoint(spanLeft, paddingTop),
+                    originTranslate.addByPoint(spanLeft, 0),
                     centerPoint,
                     centerAngle,
                     vertexAngle,
@@ -28191,7 +28304,7 @@ const _Documents = class _Documents extends DocComponent {
                 if (!glyph.content || glyph.content.length === 0)
                   continue;
                 const { width: spanWidth, left: spanLeft, xOffset } = glyph, { x: translateX, y: translateY } = this._drawLiquid, originTranslate = Vector2.create(translateX, translateY), centerPoint = Vector2.create(spanWidth / 2, lineHeight / 2), spanStartPoint = calculateRectRotate(
-                  originTranslate.addByPoint(spanLeft + xOffset, paddingTop),
+                  originTranslate.addByPoint(spanLeft + xOffset, 0),
                   centerPoint,
                   centerAngle,
                   vertexAngle,
@@ -28199,7 +28312,7 @@ const _Documents = class _Documents extends DocComponent {
                 ), spanPointWithFont = calculateRectRotate(
                   originTranslate.addByPoint(
                     spanLeft + maxLineAscSin + xOffset,
-                    maxLineAscCos + paddingTop
+                    maxLineAscCos
                   ),
                   centerPoint,
                   centerAngle,
@@ -28265,7 +28378,7 @@ const _Documents = class _Documents extends DocComponent {
         this._drawLiquid.translateSave(), this._drawLiquid.translateColumn(column);
         const linesCount = lines.length, alignOffset = alignOffsetNoAngle;
         for (let i = 0; i < linesCount; i++) {
-          const line2 = lines[i], { divides, asc = 0, type, lineHeight = 0, paddingTop } = line2, maxLineAsc = asc, maxLineAscSin = maxLineAsc * Math.sin(centerAngle), maxLineAscCos = maxLineAsc * Math.cos(centerAngle);
+          const line2 = lines[i], { divides, asc = 0, type, lineHeight = 0 } = line2, maxLineAsc = asc, maxLineAscSin = maxLineAsc * Math.sin(centerAngle), maxLineAscCos = maxLineAsc * Math.cos(centerAngle);
           if (type === LineType.BLOCK)
             for (const extension of extensions)
               extension.type === DOCS_EXTENSION_TYPE.LINE && (extension.extensionOffset = {
@@ -28273,7 +28386,7 @@ const _Documents = class _Documents extends DocComponent {
                 renderConfig
               }, extension.draw(ctx, parentScale, line2));
           else {
-            this._drawLiquid.translateSave(), this._drawLiquid.translateLine(line2, !0);
+            this._drawLiquid.translateSave(), this._drawLiquid.translateLine(line2, !0, !0);
             const { y } = this._drawLiquid;
             if (isHeader) {
               if (y - originY + alignOffset.y > (parentPage.pageHeight - 100) / 2) {
@@ -28293,7 +28406,7 @@ const _Documents = class _Documents extends DocComponent {
                   continue;
                 const { width: spanWidth, left: spanLeft } = glyph, { x: translateX, y: translateY } = this._drawLiquid, originTranslate = Vector2.create(translateX, translateY), centerPoint = Vector2.create(spanWidth / 2, lineHeight / 2), extensionOffset = {
                   spanStartPoint: calculateRectRotate(
-                    originTranslate.addByPoint(spanLeft, paddingTop),
+                    originTranslate.addByPoint(spanLeft, 0),
                     centerPoint,
                     centerAngle,
                     vertexAngle,
@@ -28306,7 +28419,7 @@ const _Documents = class _Documents extends DocComponent {
                 if (!glyph.content || glyph.content.length === 0)
                   continue;
                 const { width: spanWidth, left: spanLeft, xOffset } = glyph, { x: translateX, y: translateY } = this._drawLiquid, originTranslate = Vector2.create(translateX, translateY), centerPoint = Vector2.create(spanWidth / 2, lineHeight / 2), spanStartPoint = calculateRectRotate(
-                  originTranslate.addByPoint(spanLeft + xOffset, paddingTop),
+                  originTranslate.addByPoint(spanLeft + xOffset, 0),
                   centerPoint,
                   centerAngle,
                   vertexAngle,
@@ -28314,7 +28427,7 @@ const _Documents = class _Documents extends DocComponent {
                 ), spanPointWithFont = calculateRectRotate(
                   originTranslate.addByPoint(
                     spanLeft + maxLineAscSin + xOffset,
-                    maxLineAscCos + paddingTop
+                    maxLineAscCos
                   ),
                   centerPoint,
                   centerAngle,
@@ -28407,8 +28520,6 @@ const OBJECT_KEY = "__SHEET_EXTENSION_FONT_DOCUMENT_INSTANCE__", _Spreadsheet =
   }
   /**
    * draw by viewport
-   * cacheBound ---> viewBound
-   * diffCacheBounds ---> diffRange
    * @param ctx
    * @param viewportInfo
    */
@@ -29080,9 +29191,17 @@ function getOverflowAncestors(node, list, traverseIframes) {
   var _node$ownerDocument2;
   list === void 0 && (list = []), traverseIframes === void 0 && (traverseIframes = !0);
   const scrollableAncestor = getNearestOverflowAncestor(node), isBody = scrollableAncestor === ((_node$ownerDocument2 = node.ownerDocument) == null ? void 0 : _node$ownerDocument2.body), win = getWindow(scrollableAncestor);
-  return isBody ? list.concat(win, win.visualViewport || [], isOverflowElement(scrollableAncestor) ? scrollableAncestor : [], win.frameElement && traverseIframes ? getOverflowAncestors(win.frameElement) : []) : list.concat(scrollableAncestor, getOverflowAncestors(scrollableAncestor, [], traverseIframes));
+  if (isBody) {
+    const frameElement = getFrameElement(win);
+    return list.concat(win, win.visualViewport || [], isOverflowElement(scrollableAncestor) ? scrollableAncestor : [], frameElement && traverseIframes ? getOverflowAncestors(frameElement) : []);
+  }
+  return list.concat(scrollableAncestor, getOverflowAncestors(scrollableAncestor, [], traverseIframes));
 }
 __name(getOverflowAncestors, "getOverflowAncestors");
+function getFrameElement(win) {
+  return win.parent && Object.getPrototypeOf(win.parent) ? win.frameElement : null;
+}
+__name(getFrameElement, "getFrameElement");
 function observeClientRect(containerElement) {
   return new Observable((observer) => {
     const disposable = autoClientRect(containerElement, () => observer.next());
@@ -29187,7 +29306,7 @@ const _Engine = class _Engine extends ThinEngine {
     __publicField(this, "_dropEvent");
     __publicField(this, "_remainCapture", -1);
     /** previous pointer position */
-    __publicField(this, "pointer", {});
+    __publicField(this, "_pointer", {});
     __publicField(this, "_mouseId", -1);
     __publicField(this, "_isUsingFirefox", navigator.userAgent.indexOf("Firefox") !== -1);
     __publicField(this, "_previousWidth", -1e3);
@@ -29388,21 +29507,21 @@ const _Engine = class _Engine extends ThinEngine {
     const eventPrefix = getPointerPrefix();
     this._pointerMoveEvent = (e) => {
       const evt = e, deviceType = this._getPointerType(evt);
-      this.pointer[PointerInput.Horizontal] = evt.clientX, this.pointer[PointerInput.Vertical] = evt.clientY, this.pointer[PointerInput.DeltaHorizontal] = evt.movementX, this.pointer[PointerInput.DeltaVertical] = evt.movementY;
+      this._pointer[PointerInput.Horizontal] = evt.clientX, this._pointer[PointerInput.Vertical] = evt.clientY, this._pointer[PointerInput.DeltaHorizontal] = evt.movementX, this._pointer[PointerInput.DeltaVertical] = evt.movementY;
       const deviceEvent = evt;
-      deviceEvent.deviceType = deviceType, deviceEvent.inputIndex = PointerInput.Horizontal, this.onInputChanged$.emitEvent(deviceEvent), !this._usingSafari && evt.button !== -1 && (deviceEvent.inputIndex = evt.button + 2, deviceEvent.previousState = this.pointer[evt.button + 2], this.pointer[evt.button + 2] = this.pointer[evt.button + 2] ? 0 : 1, deviceEvent.currentState = this.pointer[evt.button + 2], this.onInputChanged$.emitEvent(deviceEvent));
+      deviceEvent.deviceType = deviceType, deviceEvent.inputIndex = PointerInput.Horizontal, this.onInputChanged$.emitEvent(deviceEvent), !this._usingSafari && evt.button !== -1 && (deviceEvent.inputIndex = evt.button + 2, deviceEvent.previousState = this._pointer[evt.button + 2], this._pointer[evt.button + 2] = this._pointer[evt.button + 2] ? 0 : 1, deviceEvent.currentState = this._pointer[evt.button + 2], this.onInputChanged$.emitEvent(deviceEvent));
     }, this._pointerDownEvent = (nativeEvent) => {
-      const evt = nativeEvent, deviceType = this._getPointerType(evt), previousHorizontal = this.pointer[PointerInput.Horizontal], previousVertical = this.pointer[PointerInput.Vertical], previousButton = this.pointer[evt.button + 2];
-      deviceType === DeviceType.Mouse ? (this._mouseId === -1 && (evt.pointerId === void 0 ? this._mouseId = this._isUsingFirefox ? 0 : 1 : this._mouseId = evt.pointerId), document.pointerLockElement || (this._remainCapture = this._mouseId, this.getCanvasElement().setPointerCapture(this._mouseId))) : evt.pointerId && !document.pointerLockElement && (this._remainCapture = evt.pointerId, this.getCanvasElement().setPointerCapture(evt.pointerId)), this.pointer[PointerInput.Horizontal] = evt.clientX, this.pointer[PointerInput.Vertical] = evt.clientY, this.pointer[evt.button + 2] = 1;
+      const evt = nativeEvent, deviceType = this._getPointerType(evt), previousHorizontal = this._pointer[PointerInput.Horizontal], previousVertical = this._pointer[PointerInput.Vertical], previousButton = this._pointer[evt.button + 2];
+      deviceType === DeviceType.Mouse ? (this._mouseId === -1 && (evt.pointerId === void 0 ? this._mouseId = this._isUsingFirefox ? 0 : 1 : this._mouseId = evt.pointerId), document.pointerLockElement || (this._remainCapture = this._mouseId, this.getCanvasElement().setPointerCapture(this._mouseId))) : evt.pointerId && !document.pointerLockElement && (this._remainCapture = evt.pointerId, this.getCanvasElement().setPointerCapture(evt.pointerId)), this._pointer[PointerInput.Horizontal] = evt.clientX, this._pointer[PointerInput.Vertical] = evt.clientY, this._pointer[evt.button + 2] = 1;
       const deviceEvent = evt;
-      deviceEvent.deviceType = deviceType, previousHorizontal !== evt.clientX && (deviceEvent.inputIndex = PointerInput.Horizontal, deviceEvent.previousState = previousHorizontal, deviceEvent.currentState = this.pointer[PointerInput.Horizontal], this.onInputChanged$.emitEvent(deviceEvent)), previousVertical !== evt.clientY && (deviceEvent.inputIndex = PointerInput.Vertical, deviceEvent.previousState = previousVertical, deviceEvent.currentState = this.pointer[PointerInput.Vertical], this.onInputChanged$.emitEvent(deviceEvent)), deviceEvent.inputIndex = evt.button + 2, deviceEvent.previousState = previousButton, deviceEvent.currentState = this.pointer[evt.button + 2], this.onInputChanged$.emitEvent(deviceEvent);
+      deviceEvent.deviceType = deviceType, previousHorizontal !== evt.clientX && (deviceEvent.inputIndex = PointerInput.Horizontal, deviceEvent.previousState = previousHorizontal, deviceEvent.currentState = this._pointer[PointerInput.Horizontal], this.onInputChanged$.emitEvent(deviceEvent)), previousVertical !== evt.clientY && (deviceEvent.inputIndex = PointerInput.Vertical, deviceEvent.previousState = previousVertical, deviceEvent.currentState = this._pointer[PointerInput.Vertical], this.onInputChanged$.emitEvent(deviceEvent)), deviceEvent.inputIndex = evt.button + 2, deviceEvent.previousState = previousButton, deviceEvent.currentState = this._pointer[evt.button + 2], this.onInputChanged$.emitEvent(deviceEvent);
     }, this._pointerUpEvent = (_evt) => {
-      const evt = _evt, deviceType = this._getPointerType(evt), previousHorizontal = this.pointer[PointerInput.Horizontal], previousVertical = this.pointer[PointerInput.Vertical], previousButton = this.pointer[evt.button + 2];
-      this.pointer[PointerInput.Horizontal] = evt.clientX, this.pointer[PointerInput.Vertical] = evt.clientY, this.pointer[evt.button + 2] = 0;
+      const evt = _evt, deviceType = this._getPointerType(evt), previousHorizontal = this._pointer[PointerInput.Horizontal], previousVertical = this._pointer[PointerInput.Vertical], previousButton = this._pointer[evt.button + 2];
+      this._pointer[PointerInput.Horizontal] = evt.clientX, this._pointer[PointerInput.Vertical] = evt.clientY, this._pointer[evt.button + 2] = 0;
       const deviceEvent = evt;
-      deviceEvent.deviceType = deviceType, previousHorizontal !== evt.clientX && (deviceEvent.inputIndex = PointerInput.Horizontal, deviceEvent.previousState = previousHorizontal, deviceEvent.currentState = this.pointer[PointerInput.Horizontal], this.onInputChanged$.emitEvent(deviceEvent)), previousVertical !== evt.clientY && (deviceEvent.inputIndex = PointerInput.Vertical, deviceEvent.previousState = previousVertical, deviceEvent.currentState = this.pointer[PointerInput.Vertical], this.onInputChanged$.emitEvent(deviceEvent)), deviceEvent.inputIndex = evt.button + 2, deviceEvent.previousState = previousButton, deviceEvent.currentState = this.pointer[evt.button + 2];
+      deviceEvent.deviceType = deviceType, previousHorizontal !== evt.clientX && (deviceEvent.inputIndex = PointerInput.Horizontal, deviceEvent.previousState = previousHorizontal, deviceEvent.currentState = this._pointer[PointerInput.Horizontal], this.onInputChanged$.emitEvent(deviceEvent)), previousVertical !== evt.clientY && (deviceEvent.inputIndex = PointerInput.Vertical, deviceEvent.previousState = previousVertical, deviceEvent.currentState = this._pointer[PointerInput.Vertical], this.onInputChanged$.emitEvent(deviceEvent)), deviceEvent.inputIndex = evt.button + 2, deviceEvent.previousState = previousButton, deviceEvent.currentState = this._pointer[evt.button + 2];
       const canvasEle2 = this.getCanvasElement();
-      deviceType === DeviceType.Mouse && this._mouseId >= 0 && canvasEle2.hasPointerCapture(this._mouseId) ? (this._remainCapture = this._mouseId, canvasEle2.releasePointerCapture(this._mouseId)) : deviceEvent.pointerId && canvasEle2.hasPointerCapture(deviceEvent.pointerId) && (this._remainCapture = deviceEvent.pointerId, canvasEle2.releasePointerCapture(deviceEvent.pointerId)), this.onInputChanged$.emitEvent(deviceEvent), deviceType !== DeviceType.Mouse && (this.pointer = {});
+      deviceType === DeviceType.Mouse && this._mouseId >= 0 && canvasEle2.hasPointerCapture(this._mouseId) ? (this._remainCapture = this._mouseId, canvasEle2.releasePointerCapture(this._mouseId)) : deviceEvent.pointerId && canvasEle2.hasPointerCapture(deviceEvent.pointerId) && (this._remainCapture = deviceEvent.pointerId, canvasEle2.releasePointerCapture(deviceEvent.pointerId)), this.onInputChanged$.emitEvent(deviceEvent), deviceType !== DeviceType.Mouse && (this._pointer = {});
     }, this._pointerEnterEvent = (evt) => {
       const deviceType = this._getPointerType(evt), deviceEvent = evt;
       deviceEvent.deviceType = deviceType, deviceEvent.currentState = 2, this.onInputChanged$.emitEvent(deviceEvent);
@@ -29416,12 +29535,12 @@ const _Engine = class _Engine extends ThinEngine {
       const deviceType = this._getPointerType(evt), deviceEvent = evt;
       deviceEvent.deviceType = deviceType, deviceEvent.currentState = 3, this.onInputChanged$.emitEvent(deviceEvent);
     }, this._pointerBlurEvent = () => {
-      this._mouseId >= 0 && this.getCanvasElement().hasPointerCapture(this._mouseId), this.pointer = {};
+      this._mouseId >= 0 && this.getCanvasElement().hasPointerCapture(this._mouseId), this._pointer = {};
     }, this._pointerWheelEvent = (evt) => {
-      const deviceType = DeviceType.Mouse, previousWheelScrollX = this.pointer[PointerInput.MouseWheelX], previousWheelScrollY = this.pointer[PointerInput.MouseWheelY], previousWheelScrollZ = this.pointer[PointerInput.MouseWheelZ];
-      this.pointer[PointerInput.MouseWheelX] = evt.deltaX || 0, this.pointer[PointerInput.MouseWheelY] = evt.deltaY || evt.wheelDelta || 0, this.pointer[PointerInput.MouseWheelZ] = evt.deltaZ || 0;
+      const deviceType = DeviceType.Mouse, previousWheelScrollX = this._pointer[PointerInput.MouseWheelX], previousWheelScrollY = this._pointer[PointerInput.MouseWheelY], previousWheelScrollZ = this._pointer[PointerInput.MouseWheelZ];
+      this._pointer[PointerInput.MouseWheelX] = evt.deltaX || 0, this._pointer[PointerInput.MouseWheelY] = evt.deltaY || evt.wheelDelta || 0, this._pointer[PointerInput.MouseWheelZ] = evt.deltaZ || 0;
       const deviceEvent = evt;
-      deviceEvent.deviceType = deviceType, this.pointer[PointerInput.MouseWheelX] !== 0 && (deviceEvent.inputIndex = PointerInput.MouseWheelX, deviceEvent.previousState = previousWheelScrollX, deviceEvent.currentState = this.pointer[PointerInput.MouseWheelX], this.onInputChanged$.emitEvent(deviceEvent)), this.pointer[PointerInput.MouseWheelY] !== 0 && (deviceEvent.inputIndex = PointerInput.MouseWheelY, deviceEvent.previousState = previousWheelScrollY, deviceEvent.currentState = this.pointer[PointerInput.MouseWheelY], this.onInputChanged$.emitEvent(deviceEvent)), this.pointer[PointerInput.MouseWheelZ] !== 0 && (deviceEvent.inputIndex = PointerInput.MouseWheelZ, deviceEvent.previousState = previousWheelScrollZ, deviceEvent.currentState = this.pointer[PointerInput.MouseWheelZ], this.onInputChanged$.emitEvent(deviceEvent));
+      deviceEvent.deviceType = deviceType, this._pointer[PointerInput.MouseWheelX] !== 0 && (deviceEvent.inputIndex = PointerInput.MouseWheelX, deviceEvent.previousState = previousWheelScrollX, deviceEvent.currentState = this._pointer[PointerInput.MouseWheelX], this.onInputChanged$.emitEvent(deviceEvent)), this._pointer[PointerInput.MouseWheelY] !== 0 && (deviceEvent.inputIndex = PointerInput.MouseWheelY, deviceEvent.previousState = previousWheelScrollY, deviceEvent.currentState = this._pointer[PointerInput.MouseWheelY], this.onInputChanged$.emitEvent(deviceEvent)), this._pointer[PointerInput.MouseWheelZ] !== 0 && (deviceEvent.inputIndex = PointerInput.MouseWheelZ, deviceEvent.previousState = previousWheelScrollZ, deviceEvent.currentState = this._pointer[PointerInput.MouseWheelZ], this.onInputChanged$.emitEvent(deviceEvent));
     };
     const canvasEle = this.getCanvasElement();
     canvasEle.addEventListener(`${eventPrefix}enter`, this._pointerEnterEvent), canvasEle.addEventListener(`${eventPrefix}leave`, this._pointerLeaveEvent), canvasEle.addEventListener(`${eventPrefix}move`, this._pointerMoveEvent), canvasEle.addEventListener(`${eventPrefix}down`, this._pointerDownEvent), canvasEle.addEventListener(`${eventPrefix}up`, this._pointerUpEvent), canvasEle.addEventListener(`${eventPrefix}out`, this._pointerOutEvent), canvasEle.addEventListener(`${eventPrefix}cancel`, this._pointerCancelEvent), canvasEle.addEventListener("blur", this._pointerBlurEvent), canvasEle.addEventListener(
@@ -29440,10 +29559,10 @@ const _Engine = class _Engine extends ThinEngine {
       deviceEvent.deviceType = deviceType, deviceEvent.currentState = 5, this.onInputChanged$.emitEvent(deviceEvent);
     }, this._dragOverEvent = (evt) => {
       evt.preventDefault();
-      const deviceType = this._getPointerType(evt), previousHorizontal = this.pointer[PointerInput.Horizontal], previousVertical = this.pointer[PointerInput.Vertical], previousDeltaHorizontal = this.pointer[PointerInput.DeltaHorizontal], previousDeltaVertical = this.pointer[PointerInput.DeltaVertical];
-      this.pointer[PointerInput.Horizontal] = evt.clientX, this.pointer[PointerInput.Vertical] = evt.clientY, this.pointer[PointerInput.DeltaHorizontal] = evt.movementX, this.pointer[PointerInput.DeltaVertical] = evt.movementY;
+      const deviceType = this._getPointerType(evt), previousHorizontal = this._pointer[PointerInput.Horizontal], previousVertical = this._pointer[PointerInput.Vertical], previousDeltaHorizontal = this._pointer[PointerInput.DeltaHorizontal], previousDeltaVertical = this._pointer[PointerInput.DeltaVertical];
+      this._pointer[PointerInput.Horizontal] = evt.clientX, this._pointer[PointerInput.Vertical] = evt.clientY, this._pointer[PointerInput.DeltaHorizontal] = evt.movementX, this._pointer[PointerInput.DeltaVertical] = evt.movementY;
       const deviceEvent = evt;
-      deviceEvent.deviceType = deviceType, previousHorizontal !== evt.clientX && (deviceEvent.inputIndex = PointerInput.Horizontal, deviceEvent.previousState = previousHorizontal, deviceEvent.currentState = this.pointer[PointerInput.Horizontal], this.onInputChanged$.emitEvent(deviceEvent)), previousVertical !== evt.clientY && (deviceEvent.inputIndex = PointerInput.Vertical, deviceEvent.previousState = previousVertical, deviceEvent.currentState = this.pointer[PointerInput.Vertical], this.onInputChanged$.emitEvent(deviceEvent)), this.pointer[PointerInput.DeltaHorizontal] !== 0 && (deviceEvent.inputIndex = PointerInput.DeltaHorizontal, deviceEvent.previousState = previousDeltaHorizontal, deviceEvent.currentState = this.pointer[PointerInput.DeltaHorizontal], this.onInputChanged$.emitEvent(deviceEvent)), this.pointer[PointerInput.DeltaVertical] !== 0 && (deviceEvent.inputIndex = PointerInput.DeltaVertical, deviceEvent.previousState = previousDeltaVertical, deviceEvent.currentState = this.pointer[PointerInput.DeltaVertical], this.onInputChanged$.emitEvent(deviceEvent)), !this._usingSafari && evt.button !== -1 && (deviceEvent.inputIndex = evt.button + 2, deviceEvent.previousState = this.pointer[evt.button + 2], this.pointer[evt.button + 2] = this.pointer[evt.button + 2] ? 0 : 1, deviceEvent.currentState = this.pointer[evt.button + 2], this.onInputChanged$.emitEvent(deviceEvent));
+      deviceEvent.deviceType = deviceType, previousHorizontal !== evt.clientX && (deviceEvent.inputIndex = PointerInput.Horizontal, deviceEvent.previousState = previousHorizontal, deviceEvent.currentState = this._pointer[PointerInput.Horizontal], this.onInputChanged$.emitEvent(deviceEvent)), previousVertical !== evt.clientY && (deviceEvent.inputIndex = PointerInput.Vertical, deviceEvent.previousState = previousVertical, deviceEvent.currentState = this._pointer[PointerInput.Vertical], this.onInputChanged$.emitEvent(deviceEvent)), this._pointer[PointerInput.DeltaHorizontal] !== 0 && (deviceEvent.inputIndex = PointerInput.DeltaHorizontal, deviceEvent.previousState = previousDeltaHorizontal, deviceEvent.currentState = this._pointer[PointerInput.DeltaHorizontal], this.onInputChanged$.emitEvent(deviceEvent)), this._pointer[PointerInput.DeltaVertical] !== 0 && (deviceEvent.inputIndex = PointerInput.DeltaVertical, deviceEvent.previousState = previousDeltaVertical, deviceEvent.currentState = this._pointer[PointerInput.DeltaVertical], this.onInputChanged$.emitEvent(deviceEvent)), !this._usingSafari && evt.button !== -1 && (deviceEvent.inputIndex = evt.button + 2, deviceEvent.previousState = this._pointer[evt.button + 2], this._pointer[evt.button + 2] = this._pointer[evt.button + 2] ? 0 : 1, deviceEvent.currentState = this._pointer[evt.button + 2], this.onInputChanged$.emitEvent(deviceEvent));
     }, this._dropEvent = (evt) => {
       const deviceType = this._getPointerType(evt), deviceEvent = evt;
       deviceEvent.deviceType = deviceType, deviceEvent.currentState = 6, this.onInputChanged$.emitEvent(deviceEvent);
@@ -29684,8 +29803,8 @@ const _Layer = class _Layer extends Disposable {
     return this._allowCache;
   }
   /**
-   * get objects which is visible and not in a group.
-   * @returns BaseObject[]
+   * Get direct visible children in order. (direct means object is not in group), default order is ascending by z-index.
+   * @returns {BaseObject[]} objects
    */
   getObjectsByOrder() {
     const objects = [];
@@ -29694,6 +29813,10 @@ const _Layer = class _Layer extends Disposable {
       !o.isInGroup && o.visible && objects.push(o);
     return objects;
   }
+  /**
+   * Get visible and evented objects.
+   * @returns {BaseObject[]} objects
+   */
   getObjectsByOrderForPick() {
     const objects = [];
     this._objects.sort(sortRules);
@@ -29705,10 +29828,9 @@ const _Layer = class _Layer extends Disposable {
     return this._objects;
   }
   /**
-   * insert o to _objects[]
-   * if o is a group, insert all its children and group itself to _objects[]
+   * Insert object to this._objects, if object is a group, insert all its children and group itself to _objects[]
    * @param o
-   * @returns this
+   * @returns {Layer} this
    */
   addObject(o) {
     if (o.classType === RENDER_CLASS_TYPE.GROUP) {
@@ -29733,6 +29855,11 @@ const _Layer = class _Layer extends Disposable {
           return;
         }
   }
+  /**
+   * Insert objects to this._objects, if object is a group, insert all its children and group itself to _objects[]
+   * @param objects
+   * @returns {Layer} this
+   */
   addObjects(objects) {
     return objects.forEach((o) => {
       this.addObject(o);
@@ -31320,8 +31447,10 @@ const _Scene = class _Scene extends ThinScene {
     scaleX !== void 0 && (this.scaleX = scaleX), scaleY !== void 0 && (this.scaleY = scaleY);
   }
   /**
-   * scale to value, absolute
-   * setTransform ---> viewport._updateScrollBarPosByViewportScroll --->  scrollTo
+   * Set scale, and then emit event to update Viewport scroll state.
+   * @param scaleX
+   * @param scaleY
+   * @returns Scene
    */
   scale(scaleX, scaleY) {
     const preScaleX = this.scaleX;
@@ -31353,9 +31482,7 @@ const _Scene = class _Scene extends ThinScene {
     }), this;
   }
   /**
-   * This sequence will initiate a series of updates:
-   * scene._setTransForm --> viewport@resetCanvasSizeAndUpdateScrollBar ---> scrollTo ---> limitedScroll ---> onScrollBeforeObserver ---> setScrollInfo
-   * scrollInfo needs accurate scene width & height, limitedScroll depends on scene & engine's width & height
+   * Reset canvas size and update scroll
    * @param state
    */
   transformByState(state) {
@@ -31402,21 +31529,37 @@ const _Scene = class _Scene extends ThinScene {
   addLayer(...argument2) {
     this._layers.push(...argument2);
   }
+  /**
+   * Add objects to Layer( Layer is specfied by zIndex)
+   * If object is a group, insert all its children and group itself to _objects[].
+   * @param objects
+   * @param zIndex
+   * @returns {Scene} this
+   */
   addObjects(objects, zIndex = 1) {
     var _a11;
     return (_a11 = this.getLayer(zIndex)) == null || _a11.addObjects(objects), this._addObject$.next(this), this;
   }
+  /**
+   * Add object to Layer (Layer is specified by zIndex).
+   * If object is a group, insert all its children and group itself to _objects[].
+   * @param o
+   * @param zIndex layer index
+   * @returns {Scene} scene
+   */
   addObject(o, zIndex = 1) {
     var _a11;
     return (_a11 = this.getLayer(zIndex)) == null || _a11.addObject(o), this._addObject$.next(this), this;
   }
   /**
-   * make object parent to scene
+   * Set Scene as object parent, if object has no parent.
    * @param o
+   * @returns {void}
    */
   setObjectBehavior(o) {
     o.parent || (o.parent = this), o.onIsAddedToParent$.emitEvent(this);
   }
+  // Why? return values is so strange! removeObject should return true/false, or didn't return anything.
   removeObject(object) {
     if (object == null)
       return;
@@ -31453,10 +31596,21 @@ const _Scene = class _Scene extends ThinScene {
     return objects;
   }
   /**
-   * get objects which is visible and not in a group in each layer.
-   * @returns BaseObject[]
+   * Get all objects of each Layer.
+   * @returns {BaseObject[]} objects
    */
   getAllObjects() {
+    const objects = [];
+    this._layers.sort(sortRules);
+    for (const layer of this._layers)
+      objects.push(...layer.getObjects());
+    return objects;
+  }
+  /**
+   * Get objects which is visible and not in a group in each layer.
+   * @returns BaseObject[]
+   */
+  getAllObjectsByOrder() {
     const objects = [];
     this._layers.sort(sortRules);
     for (const layer of this._layers)
@@ -31468,13 +31622,18 @@ const _Scene = class _Scene extends ThinScene {
    * @param isDesc
    * @returns BaseObject[]
    */
-  getAllObjectsByOrder(isDesc = !1) {
+  getAllObjectsByDescOrder(isDesc = !1) {
     const objects = [], useSortRules = isDesc ? sortRulesByDesc : sortRules;
     this._layers.sort(useSortRules);
     for (const layer of this._layers)
       objects.push(...layer.getObjectsByOrder().sort(useSortRules));
     return objects;
   }
+  /**
+   * Get visible and evented objects.
+   * @param isDesc
+   * @returns {BaseObject[]} objects
+   */
   getAllObjectsByOrderForPick(isDesc = !1) {
     const objects = [], useSortRules = isDesc ? sortRulesByDesc : sortRules;
     this._layers.sort(useSortRules);
@@ -31833,11 +31992,15 @@ let RenderUnit = (_a7 = class extends Disposable {
     this._injector.dispose(), super.dispose();
   }
   /**
-   * Get render controller hold by this render unit.
+   * Get a dependency from the RenderUnit's injector.
    */
   with(dependency) {
     return this._injector.get(dependency);
   }
+  /**
+   * Add render dependencies to the RenderUnit's injector. Note that the dependencies would be initialized immediately
+   * after being added.
+   */
   addRenderDependencies(dependencies) {
     this._initDependencies(dependencies);
   }
@@ -31846,9 +32009,13 @@ let RenderUnit = (_a7 = class extends Disposable {
     dependencies.forEach((dep) => {
       const [identifier, implOrNull] = Array.isArray(dep) ? dep : [dep, null];
       if (!implOrNull)
-        j.add([identifier, { useFactory: /* @__PURE__ */ __name(() => j.createInstance(identifier, this._renderContext), "useFactory") }]);
+        j.add([identifier, {
+          useFactory: /* @__PURE__ */ __name(() => j.createInstance(identifier, this._renderContext), "useFactory")
+        }]);
       else if (isClassDependencyItem(implOrNull))
-        j.add([identifier, { useFactory: /* @__PURE__ */ __name(() => j.createInstance(implOrNull.useClass, this._renderContext), "useFactory") }]);
+        j.add([identifier, {
+          useFactory: /* @__PURE__ */ __name(() => j.createInstance(implOrNull.useClass, this._renderContext), "useFactory")
+        }]);
       else
         throw new Error("[RenderUnit]: render dependency could only be an class!");
     }), dependencies.forEach((dep) => {
@@ -31981,7 +32148,7 @@ let RenderManagerService = (_a8 = class extends Disposable {
         engine,
         scene,
         isMainScene
-      }), this._tryAddRenderDependencies(renderUnit, ctorOfDeps);
+      }), this._addRenderUnit(unitId, renderUnit), this._tryAddRenderDependencies(renderUnit, ctorOfDeps);
     } else
       renderUnit = {
         isThumbNail: !0,
@@ -31996,14 +32163,14 @@ let RenderManagerService = (_a8 = class extends Disposable {
         with(_dependency) {
           return null;
         }
-      };
-    return this._addRenderUnit(unitId, renderUnit), renderUnit;
+      }, this._addRenderUnit(unitId, renderUnit);
+    return renderUnit;
   }
-  addRender(unitId, item) {
-    this._addRenderUnit(unitId, item);
+  addRender(unitId, renderUnit) {
+    this._addRenderUnit(unitId, renderUnit);
   }
-  _addRenderUnit(unitId, item) {
-    this._renderMap.set(unitId, item);
+  _addRenderUnit(unitId, renderUnit) {
+    this._renderMap.set(unitId, renderUnit);
   }
   removeRender(unitId) {
     const item = this._renderMap.get(unitId);
@@ -32320,10 +32487,6 @@ const MOUSE_WHEEL_SPEED_SMOOTHING_FACTOR = 3, _Viewport = class _Viewport {
   disable() {
     this._active = !1;
   }
-  /**
-   * invoked when canvas element size change
-   * engineResizeObserver --> engine.resizeBySize --> scene._setTransForm
-   */
   resetCanvasSizeAndUpdateScroll() {
     this._resizeCacheCanvas(), this._updateScrollByViewportScrollValue();
   }
@@ -32359,33 +32522,18 @@ const MOUSE_WHEEL_SPEED_SMOOTHING_FACTOR = 3, _Viewport = class _Viewport {
     });
   }
   /**
-   * There are serval cases to call this method.
-   * the most common case is scrolling. Other situations include:
-   * 1. changing the frozen row & col settings
-   * 2. changing curr skeleton
-   * 3. changing selection which cross viewport
-   * 4. changing the viewport size (also include change window size)
-   * 5. changing the scroll bar position
-   *
-   * when scrolling by trackpad:
-   * scene.input-manager@_onMouseWheel --> scene@triggerMouseWheel --> sheet-render.controller@scene.onMouseWheel$.add -->
-   * set-scroll.command.ts --> scroll.operation.ts -->
-   * scrollManagerService.setScrollInfoAndEmitEvent
-   *
-   * when change skelenton:
-   * _currentSkeletonBefore$ ---> scroll.render-controller@_updateSceneSize --> setSearchParam --> scene@_setTransForm ---> viewport.resetCanvasSizeAndUpdateScrollBar ---> scrollToXX
-   * --> onScrollAfterObserver.notifyObservers --> scroll.render-controller@onScrollAfterObserver ---> setScrollInfoToCurrSheetWithoutNotify  ---> sms._setScrollInfo
-   *
-   * _currentSkeleton$ ---> selection.render-controller ---> formula@_autoScroll ---> viewport.resize ---> get scrollXY by viewportScrollXY ---> scrollTo
-   * _currentSkeleton$ ---> selection.render-controller ---> setCurrentSelection ---> formula@_autoScroll ---> scrollTo
-   * _currentSkeleton$ ---> freeze.render-controller@_refreshFreeze --> viewport.resize ---> scrollTo  ---> _scroll
-   *
-   * Debug
-   * window.scene.getViewports()[0].scrollTo({x: 14.2, y: 1.8}, true)
-   *
-   * @param pos
-   *
+   * ScrollBar scroll to certain position.
+   * @param pos position of scrollBar
    */
+  // There are serval cases to call this method.
+  // the most common case is scrolling. Other situations include:
+  // 1. changing the frozen row & col settings
+  // 2. changing curr skeleton
+  // 3. changing selection which cross viewport
+  // 4. changing the viewport size (also include change window size)
+  // 5. changing the scroll bar position
+  // Debug
+  // window.scene.getViewports()[0].scrollTo({x: 14.2, y: 1.8}, true)
   scrollToBarPos(pos) {
     return this._scrollToBarPosCore(pos);
   }
@@ -32416,6 +32564,12 @@ const MOUSE_WHEEL_SPEED_SMOOTHING_FACTOR = 3, _Viewport = class _Viewport {
       isTrigger
     });
   }
+  /**
+   * Viewport scroll to certain position.
+   * @param pos
+   * @param isTrigger
+   * @returns IViewportScrollPosition
+   */
   scrollToViewportPos(pos, isTrigger = !0) {
     if (!this._scrollBar || this.isActive === !1)
       return;
@@ -32477,8 +32631,11 @@ const MOUSE_WHEEL_SPEED_SMOOTHING_FACTOR = 3, _Viewport = class _Viewport {
   getScrollBar() {
     return this._scrollBar;
   }
-  // scrollTo ---> _scroll ---> onScrollAfter$.next ---> scroll.render-controller@updateScroll
-  // scrollTo ---> _scroll ---> onScrollAfter$.next ---> freeze.render-controller@updateScroll
+  /**
+   * Just record state of scroll. This method won't scroll viewport and scrollbar.
+   * @param current
+   * @returns Viewport
+   */
   updateScrollVal(current) {
     this._preScrollX = this.scrollX, this._preScrollY = this.scrollY;
     const { scrollX, scrollY, viewportScrollX, viewportScrollY } = current;
@@ -32492,8 +32649,7 @@ const MOUSE_WHEEL_SPEED_SMOOTHING_FACTOR = 3, _Viewport = class _Viewport {
     return !(this.isActive === !1 || this.width == null || this.height == null || this.width <= 1 || this.height <= 1);
   }
   /**
-   * call stack: engine.renderLoop ---> scene.render ---> layer.render ---> viewport.render
-   * that means each layer call all viewports to render
+   * Render function in each render loop.
    * @param parentCtx parentCtx is cacheCtx from layer when layer._allowCache is true
    * @param objects
    * @param isMaxLayer
@@ -32740,7 +32896,7 @@ const MOUSE_WHEEL_SPEED_SMOOTHING_FACTOR = 3, _Viewport = class _Viewport {
     (_a11 = this._cacheCanvas) == null || _a11.setSize(canvasW, canvasH), this.cacheBound = this._viewBound, this.preCacheBound = null, this.markForceDirty(!0);
   }
   /**
-   * This method will be invoked when viewport is resizing and removing rol & col
+   * Update scroll when viewport is resizing and removing rol & col
    */
   _updateScrollByViewportScrollValue() {
     if (!this.width || this.width < 0 || !this.height || this.height < 0) return;
@@ -33187,7 +33343,14 @@ function isInSameTableCell(anchorNodePosition, focusNodePosition) {
 }
 __name(isInSameTableCell, "isInSameTableCell");
 function compareNodePositionInTable(a, b) {
-  const { path: aPath } = a, { path: bPath } = b, aRowCount = aPath[aPath.length - 3], bRowCount = bPath[bPath.length - 3], aCellCount = aPath[aPath.length - 1], bCellCount = bPath[bPath.length - 1];
+  if (isInSameTableCell(a, b))
+    return compareNodePositionLogic(a, b);
+  const { path: aPath } = a, { path: bPath } = b, aTableId = aPath[aPath.length - 5], bTableId = bPath[bPath.length - 5];
+  if (aTableId !== bTableId && typeof aTableId == "string" && typeof bTableId == "string") {
+    const aSlideId = aTableId.split("#-#")[1], bSlideId = bTableId.split("#-#")[1];
+    return +aSlideId < +bSlideId;
+  }
+  const aRowCount = aPath[aPath.length - 3], bRowCount = bPath[bPath.length - 3], aCellCount = aPath[aPath.length - 1], bCellCount = bPath[bPath.length - 1];
   return aRowCount < bRowCount ? !0 : aRowCount > bRowCount ? !1 : aCellCount <= bCellCount;
 }
 __name(compareNodePositionInTable, "compareNodePositionInTable");
@@ -33553,13 +33716,13 @@ function getRangeListFromSelection(anchorPosition, focusPosition, scene, documen
           tableStartPosition = skeleton.findNodePositionByCharIndex(tableStart + 3, !0, segmentId, segmentPage), tableEndPosition = skeleton.findNodePositionByCharIndex(endRow.endIndex - 3, !0, segmentId, segmentPage), end = tableStart - 1, endInTable = !0;
         else if (tableStart > startOffset && tableEnd < endOffset) {
           if (tableStartPosition = skeleton.findNodePositionByCharIndex(tableStart + 3, !0, segmentId, segmentPage), tableEndPosition = skeleton.findNodePositionByCharIndex(tableEnd - 4, !0, segmentId, segmentPage), start <= tableStart - 1) {
-            const sp = skeleton.findNodePositionByCharIndex(start, !0, segmentId, segmentPage), ep = skeleton.findNodePositionByCharIndex(tableStart - 1, !1, segmentId, segmentPage), ap = direction ? sp : ep, fp = direction ? ep : sp;
+            const sp = skeleton.findNodePositionByCharIndex(start, !0, segmentId, segmentPage), ep = skeleton.findNodePositionByCharIndex(tableStart - 1, !1, segmentId, segmentPage), ap = direction === RANGE_DIRECTION.FORWARD ? sp : ep, fp = direction === RANGE_DIRECTION.FORWARD ? ep : sp;
             textRanges.push(new TextRange(scene, document2, skeleton, ap, fp, style, segmentId));
           }
           start = tableEnd + 1;
         }
         if (tableStartPosition && tableEndPosition) {
-          const ap = direction ? tableStartPosition : tableEndPosition, fp = direction ? tableEndPosition : tableStartPosition;
+          const ap = direction === RANGE_DIRECTION.FORWARD ? tableStartPosition : tableEndPosition, fp = direction === RANGE_DIRECTION.FORWARD ? tableEndPosition : tableStartPosition;
           rectRanges.push(...convertPositionsToRectRanges(
             scene,
             document2,
@@ -33572,7 +33735,7 @@ function getRangeListFromSelection(anchorPosition, focusPosition, scene, documen
         }
       }
       if (end >= startIndex && end <= endIndex || endInTable) {
-        const sp = skeleton.findNodePositionByCharIndex(start, !0, segmentId, segmentPage), ep = skeleton.findNodePositionByCharIndex(end, !endInTable, segmentId, segmentPage), ap = direction ? sp : ep, fp = direction ? ep : sp;
+        const sp = skeleton.findNodePositionByCharIndex(start, !0, segmentId, segmentPage), ep = skeleton.findNodePositionByCharIndex(end, !endInTable, segmentId, segmentPage), ap = direction === RANGE_DIRECTION.FORWARD ? sp : ep, fp = direction === RANGE_DIRECTION.FORWARD ? ep : sp;
         if (rectRanges.length && Tools.diffValue(ap, fp))
           continue;
         textRanges.push(new TextRange(scene, document2, skeleton, ap, fp, style, segmentId));
@@ -33772,7 +33935,7 @@ let TextSelectionRenderManager = (_a10 = class extends RxDisposable {
     }), this._updateInputPosition();
   }
   setCursorManually(evtOffsetX, evtOffsetY) {
-    const startNode = this.findNodeByCoord(evtOffsetX, evtOffsetY, {
+    const startNode = this._findNodeByCoord(evtOffsetX, evtOffsetY, {
       strict: !0,
       segmentId: this._currentSegmentId,
       segmentPage: this._currentSegmentPage
@@ -33781,7 +33944,7 @@ let TextSelectionRenderManager = (_a10 = class extends RxDisposable {
       this._removeAllRanges();
       return;
     }
-    (startNode == null ? void 0 : startNode.node.streamType) === DataStreamTreeTokenType.PARAGRAPH && (position.isBack = !0), this._updateTextRangeAnchorPosition(position), this._activeSelectionRefresh(), this._textSelectionInner$.next({
+    (startNode == null ? void 0 : startNode.node.streamType) === DataStreamTreeTokenType.PARAGRAPH && (position.isBack = !0), this._createTextRangeByAnchorPosition(position), this._textSelectionInner$.next({
       textRanges: this._getAllTextRanges(),
       rectRanges: this._getAllRectRanges(),
       segmentId: this._currentSegmentId,
@@ -33823,7 +33986,7 @@ let TextSelectionRenderManager = (_a10 = class extends RxDisposable {
   handleDblClick(evt) {
     if (!this._scene || !this._isSelectionEnabled)
       return;
-    const { offsetX: evtOffsetX, offsetY: evtOffsetY } = evt, startNode = this.findNodeByCoord(evtOffsetX, evtOffsetY, {
+    const { offsetX: evtOffsetX, offsetY: evtOffsetY } = evt, startNode = this._findNodeByCoord(evtOffsetX, evtOffsetY, {
       strict: !1,
       segmentId: this._currentSegmentId,
       segmentPage: this._currentSegmentPage
@@ -33857,7 +34020,7 @@ let TextSelectionRenderManager = (_a10 = class extends RxDisposable {
   handleTripleClick(evt) {
     if (!this._scene || !this._isSelectionEnabled)
       return;
-    const { offsetX: evtOffsetX, offsetY: evtOffsetY } = evt, startNode = this.findNodeByCoord(evtOffsetX, evtOffsetY, {
+    const { offsetX: evtOffsetX, offsetY: evtOffsetY } = evt, startNode = this._findNodeByCoord(evtOffsetX, evtOffsetY, {
       strict: !1,
       segmentId: this._currentSegmentId,
       segmentPage: this._currentSegmentPage
@@ -33883,7 +34046,7 @@ let TextSelectionRenderManager = (_a10 = class extends RxDisposable {
     if (!this._scene || !this._isSelectionEnabled)
       return;
     this._editorFocusing = !0;
-    const scene = this._scene, { offsetX: evtOffsetX, offsetY: evtOffsetY } = evt, startNode = this.findNodeByCoord(evtOffsetX, evtOffsetY, {
+    const scene = this._scene, { offsetX: evtOffsetX, offsetY: evtOffsetY } = evt, startNode = this._findNodeByCoord(evtOffsetX, evtOffsetY, {
       strict: !1,
       segmentId: this._currentSegmentId,
       segmentPage: this._currentSegmentPage
@@ -34075,11 +34238,12 @@ let TextSelectionRenderManager = (_a10 = class extends RxDisposable {
   _addRectRanges(rectRanges) {
     rectRanges.length !== 0 && (this._deactivateAllRectRanges(), rectRanges[rectRanges.length - 1].activate(), this._rectRangeList.push(...rectRanges));
   }
-  _updateTextRangeAnchorPosition(position) {
+  _createTextRangeByAnchorPosition(position) {
     if (!this._scene)
       return;
-    let lastRange = this._rangeList.pop();
-    lastRange || (lastRange = new TextRange(this._scene, this._document, this._docSkeleton, position, void 0, this._selectionStyle, this._currentSegmentId)), this._removeAllTextRanges(), lastRange.activate(), lastRange.anchorNodePosition = position, lastRange.focusNodePosition = null, this._rangeList = [lastRange];
+    this._removeAllRanges();
+    const lastRange = new TextRange(this._scene, this._document, this._docSkeleton, position, void 0, this._selectionStyle, this._currentSegmentId);
+    this._addTextRange(lastRange);
   }
   _updateActiveRangePosition(position) {
     if (!this._scene) {
@@ -34134,7 +34298,7 @@ let TextSelectionRenderManager = (_a10 = class extends RxDisposable {
     var _a11, _b;
     if (this._docSkeleton == null)
       return;
-    const focusNode = this.findNodeByCoord(moveOffsetX, moveOffsetY, {
+    const focusNode = this._findNodeByCoord(moveOffsetX, moveOffsetY, {
       strict: !0,
       segmentId: this._currentSegmentId,
       segmentPage: this._currentSegmentPage
@@ -34274,7 +34438,7 @@ let TextSelectionRenderManager = (_a10 = class extends RxDisposable {
     if (originCoord)
       return documentTransform.clone().invert().applyPoint(originCoord);
   }
-  findNodeByCoord(evtOffsetX, evtOffsetY, restrictions) {
+  _findNodeByCoord(evtOffsetX, evtOffsetY, restrictions) {
     var _a11;
     const coord = this._getTransformCoordForDocumentOffset(evtOffsetX, evtOffsetY);
     if (coord == null)
@@ -34292,18 +34456,9 @@ let TextSelectionRenderManager = (_a10 = class extends RxDisposable {
       restrictions
     );
   }
-  _getNodeIndex(node) {
-    return node.node.parent.st + node.node.parent.glyphGroup.indexOf(node.node);
-  }
   _detachEvent() {
     this._onInputBefore$.complete(), this._onKeydown$.complete(), this._onInput$.complete(), this._onCompositionstart$.complete(), this._onCompositionupdate$.complete(), this._onCompositionend$.complete(), this._onSelectionStart$.complete();
   }
-  _activeSelectionRefresh() {
-    if (this._docSkeleton == null)
-      return;
-    const activeRangeInstance = this._getActiveRangeInstance();
-    activeRangeInstance == null || activeRangeInstance.refresh();
-  }
 }, __name(_a10, "TextSelectionRenderManager"), _a10);
 TextSelectionRenderManager = __decorateClass([
   __decorateParam(0, ILogService)