@univerjs/engine-render 0.2.8 → 0.2.9

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() {
@@ -20137,14 +20137,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 +20153,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 +20169,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 +20228,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 +20247,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 +20266,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 +20279,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 +20294,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 +20304,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 +20314,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 +20324,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 +20651,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 +20660,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 +21121,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 +21184,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 +21222,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 +21239,7 @@ function _divideOperator(ctx, glyphGroup, pages, sectionBreakConfig, paragraphCo
           pages,
           sectionBreakConfig,
           paragraphConfig,
-          paragraphStart,
+          isParagraphFirstShapedText,
           breakPointType,
           defaultSpanLineHeight
         );
@@ -21255,7 +21255,7 @@ function _divideOperator(ctx, glyphGroup, pages, sectionBreakConfig, paragraphCo
         pages,
         sectionBreakConfig,
         paragraphConfig,
-        paragraphStart,
+        isParagraphFirstShapedText,
         breakPointType,
         defaultSpanLineHeight
       );
@@ -21272,13 +21272,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 +21293,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 +21347,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 +21366,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 +21381,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 +21397,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 +21418,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 +21440,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 +21595,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 +21664,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 +21692,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 +21703,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 +21791,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 +22114,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 +22133,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 +22404,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 +22620,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 +22861,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 +23074,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;
@@ -23006,12 +23085,12 @@ const _NodePositionConvertToCursor = class _NodePositionConvertToCursor {
           startX: startX + firstGlyphLeft + (isCurrentList ? firstGlyphWidth : 0),
           startY,
           endX: startX + lastGlyphLeft + lastGlyphWidth,
-          endY: startY + lineHeight
+          endY: startY + lineHeight - marginTop - marginBottom
         }, contentBoxPosition = {
           startX: startX + firstGlyphLeft + (isCurrentList ? firstGlyphWidth : 0),
-          startY: startY + marginTop + paddingTop + asc - anchorGlyph.bBox.ba,
+          startY: startY + paddingTop + asc - anchorGlyph.bBox.ba,
           endX: startX + lastGlyphLeft + lastGlyphWidth,
-          endY: startY + marginTop + paddingTop + asc + anchorGlyph.bBox.bd
+          endY: startY + paddingTop + asc + anchorGlyph.bBox.bd
         };
       else {
         const isStartBackFin = isStartBack && !isCurrentList;
@@ -23019,12 +23098,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 +23254,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 +23857,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 +23881,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;
@@ -24126,7 +24207,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,7 +24228,6 @@ 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)
       for (const section of sections) {
         const { columns } = section;
@@ -24721,6 +24803,10 @@ 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.
+   * @returns this
+   */
   _updateLayout() {
     if (!this.dirty)
       return;
@@ -25275,18 +25361,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 +25402,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 +25423,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 +25462,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;
@@ -25584,14 +25676,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,7 +25757,8 @@ 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();
@@ -27334,12 +27426,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 +27837,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 +28106,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 +28114,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 +28124,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 +28137,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 +28145,7 @@ const _Documents = class _Documents extends DocComponent {
                   ), spanPointWithFont = calculateRectRotate(
                     originTranslate.addByPoint(
                       spanLeft + maxLineAscSin + xOffset,
-                      maxLineAscCos + paddingTop
+                      maxLineAscCos
                     ),
                     centerPoint,
                     centerAngle,
@@ -28160,7 +28251,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 +28259,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 +28269,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 +28282,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 +28290,7 @@ const _Documents = class _Documents extends DocComponent {
                 ), spanPointWithFont = calculateRectRotate(
                   originTranslate.addByPoint(
                     spanLeft + maxLineAscSin + xOffset,
-                    maxLineAscCos + paddingTop
+                    maxLineAscCos
                   ),
                   centerPoint,
                   centerAngle,
@@ -28265,7 +28356,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 +28364,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 +28384,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 +28397,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 +28405,7 @@ const _Documents = class _Documents extends DocComponent {
                 ), spanPointWithFont = calculateRectRotate(
                   originTranslate.addByPoint(
                     spanLeft + maxLineAscSin + xOffset,
-                    maxLineAscCos + paddingTop
+                    maxLineAscCos
                   ),
                   centerPoint,
                   centerAngle,
@@ -28407,8 +28498,6 @@ const OBJECT_KEY = "__SHEET_EXTENSION_FONT_DOCUMENT_INSTANCE__", _Spreadsheet =
   }
   /**
    * draw by viewport
-   * cacheBound ---> viewBound
-   * diffCacheBounds ---> diffRange
    * @param ctx
    * @param viewportInfo
    */
@@ -29080,9 +29169,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());
@@ -31320,8 +31417,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 +31452,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) {
@@ -31406,6 +31503,12 @@ const _Scene = class _Scene extends ThinScene {
     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).
+   * @param o
+   * @param zIndex layer index
+   * @returns scene
+   */
   addObject(o, zIndex = 1) {
     var _a11;
     return (_a11 = this.getLayer(zIndex)) == null || _a11.addObject(o), this._addObject$.next(this), this;
@@ -31833,11 +31936,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 +31953,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) => {
@@ -32320,10 +32431,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 +32466,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 +32508,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 +32575,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 +32593,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 +32840,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;
@@ -33781,7 +33881,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,
@@ -34075,11 +34175,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) {