@univerjs/engine-render 0.2.7 → 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) {
@@ -22988,10 +23067,14 @@ const _NodePositionConvertToCursor = class _NodePositionConvertToCursor {
         cursorList
       };
     if (!this._isValidPosition(startOrigin, endOrigin))
-      throw new Error("Invalid positions in NodePositionConvertToCursor, they are not in the same segment page when in header or footer.");
+      throw new Error(
+        `
+                Invalid positions in NodePositionConvertToCursor,
+                they are not in the same segment page when in header or footer.`
+      );
     const { start, end } = compareNodePosition(startOrigin, endOrigin);
     return this._selectionIterator(start, end, (start_sp, end_sp, isFirst, isLast, divide, line2) => {
-      const { lineHeight, marginTop, asc } = 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;
@@ -23002,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 + asc - anchorGlyph.bBox.ba,
+          startY: startY + paddingTop + asc - anchorGlyph.bBox.ba,
           endX: startX + lastGlyphLeft + lastGlyphWidth,
-          endY: startY + marginTop + asc + anchorGlyph.bBox.bd
+          endY: startY + paddingTop + asc + anchorGlyph.bBox.bd
         };
       else {
         const isStartBackFin = isStartBack && !isCurrentList;
@@ -23015,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 + asc - anchorGlyph.bBox.ba,
+          startY: startY + paddingTop + asc - anchorGlyph.bBox.ba,
           endX: startX + lastGlyphLeft + (isEndBack ? 0 : lastGlyphWidth),
-          endY: startY + marginTop + asc + anchorGlyph.bBox.bd
+          endY: startY + paddingTop + asc + anchorGlyph.bBox.bd
         };
       }
       borderBoxPointGroup.push(pushToPoints(borderBoxPosition)), contentBoxPointGroup.push(pushToPoints(contentBoxPosition)), cursorList.push({
@@ -23171,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);
@@ -23774,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.
@@ -23796,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;
@@ -24122,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,
@@ -24141,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;
@@ -24717,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;
@@ -25271,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 } });
       }
     }
   }
@@ -25294,6 +25386,9 @@ let SpreadsheetSkeleton = (_a6 = class extends Skeleton {
       border: new ObjectMatrix()
     }, this._renderedCellCache = new ObjectMatrix(), this._overflowCache.reset();
   }
+  resetCache() {
+    this._resetCache();
+  }
   _makeDocumentSkeletonDirty(r, c) {
     if (this._stylesCache.font == null)
       return;
@@ -25307,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);
@@ -25328,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;
@@ -25363,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;
@@ -25577,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))
@@ -25659,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();
@@ -27149,6 +27248,7 @@ const RICHTEXT_OBJECT_ARRAY = ["text", "richText", "fs"], _RichText = class _Ric
     __publicField(this, "_documentData");
     __publicField(this, "_documentSkeleton");
     __publicField(this, "_documents");
+    __publicField(this, "documentModel");
     /**
      * fontFamily
      */
@@ -27202,7 +27302,7 @@ const RICHTEXT_OBJECT_ARRAY = ["text", "richText", "fs"], _RichText = class _Ric
     __publicField(this, "_cl");
     __publicField(this, "objectType", ObjectType.RICH_TEXT);
     this._localeService = _localeService, props != null && props.richText ? this._documentData = props.richText : props && (this._fs = props.fs, this._ff = props.ff, this._it = props.it, this._bl = props.bl, this._ul = props.ul, this._st = props.st, this._ol = props.ol, this._bg = props.bg, this._bd = props.bd, this._cl = props.cl, this._documentData = this._convertToDocumentData(props.text || ""));
-    const docModel = new DocumentDataModel(this._documentData), docViewModel = new DocumentViewModel(docModel);
+    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, {
       pageMarginLeft: 0,
       pageMarginTop: 0
@@ -27326,14 +27426,13 @@ 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 = new DocumentDataModel(this._documentData), docViewModel = new DocumentViewModel(docModel);
+    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, {
       pageMarginLeft: 0,
       pageMarginTop: 0
@@ -28015,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;
@@ -28160,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;
@@ -28265,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) {
@@ -28399,8 +28498,6 @@ const OBJECT_KEY = "__SHEET_EXTENSION_FONT_DOCUMENT_INSTANCE__", _Spreadsheet =
   }
   /**
    * draw by viewport
-   * cacheBound ---> viewBound
-   * diffCacheBounds ---> diffRange
    * @param ctx
    * @param viewportInfo
    */
@@ -28790,15 +28887,20 @@ const arrowPath = "M512 1024C229.248 1024 0 794.752 0 512S229.248 0 512 0s512 22
   constructor() {
     super(...arguments);
     __publicField(this, "slideChangePageByNavigation$", new EventSubject());
+    __publicField(this, "subSceneChanged$", new EventSubject());
     __publicField(this, "_navigationEnabled", !1);
   }
   activeFirstPage() {
     const firstKey = this.getSubScenes().keys().next().value;
     firstKey != null && this.changePage(firstKey);
   }
-  addPage(scene) {
-    const key = scene.sceneKey;
-    this.getSubScene(key) == null && (this.addSubScene(scene), this.addNavigation());
+  /**
+   * add pageScene to this._subScenes
+   * @param pageScene
+   */
+  addPageScene(pageScene) {
+    const key = pageScene.sceneKey;
+    this.getSubScene(key) || this.addSubScene(pageScene), this.addNavigation(), this.subSceneChanged$.emitEvent(pageScene);
   }
   changePage(id) {
     id !== null && (this.removeNavigation(), this.activeSubScene(id), this.addNavigation());
@@ -29067,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());
@@ -31307,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;
@@ -31340,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) {
@@ -31393,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;
@@ -31526,6 +31642,10 @@ const _Scene = class _Scene extends ThinScene {
       this.render(parentCtx), requestNewFrame(resolve);
     });
   }
+  /**
+   * create transformer if not exist, and then transformer attach to object that passed in by parameter.
+   * @param o
+   */
   attachTransformerTo(o) {
     var _a11;
     this._transformer || this.initTransformer(), (_a11 = this._transformer) == null || _a11.attachTo(o);
@@ -31816,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);
   }
@@ -31829,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) => {
@@ -31884,21 +32012,36 @@ let RenderManagerService = (_a8 = class extends Disposable {
       deps.forEach((dep) => remove(dependencies, dep));
     });
   }
-  registerRenderModule(type, ctor) {
+  /**
+   * add dep to _renderDependencies(type, dep)
+   * @param type
+   * @param depCtor
+   */
+  registerRenderModule(type, depCtor) {
     this._renderDependencies.has(type) || this._renderDependencies.set(type, []);
     const dependencies = this._renderDependencies.get(type);
-    dependencies.push(ctor);
+    dependencies.push(depCtor);
     for (const [_2, render] of this._renderMap)
-      render.type === type && this._tryAddRenderDependencies(render, [ctor]);
-    return toDisposable(() => remove(dependencies, ctor));
+      render.type === type && this._tryAddRenderDependencies(render, [depCtor]);
+    return toDisposable(() => remove(dependencies, depCtor));
   }
-  _getRenderControllersForType(type) {
+  /**
+   * get render dependencies from _renderDependencies
+   * @param type
+   * @returns Dependency[]
+   */
+  _getRenderDepsByType(type) {
     var _a11;
     return Array.from((_a11 = this._renderDependencies.get(type)) != null ? _a11 : []);
   }
   create(unitId) {
     this._createRender$.next(unitId);
   }
+  /**
+   * create renderUnit & init deps from renderDependencies
+   * @param unitId
+   * @returns renderUnit:IRender
+   */
   createRender(unitId) {
     const renderer = this._createRender(unitId, new Engine());
     return this._renderCreated$.next(renderer), renderer;
@@ -31918,9 +32061,21 @@ let RenderManagerService = (_a8 = class extends Disposable {
     const current = this._univerInstanceService.getCurrentUnitForType(type);
     return current ? (_a11 = this.getRenderById(current.getUnitId())) == null ? void 0 : _a11.with(id) : null;
   }
+  /**
+   * init deps by injector.get(dep), and injector derives from renderer.
+   * @param renderer
+   * @param deps
+   */
   _tryAddRenderDependencies(renderer, deps) {
     renderer instanceof RenderUnit && renderer.addRenderDependencies(deps);
   }
+  /**
+   * create renderUnit & init deps from renderDependencies by renderUnit's type
+   * @param unitId
+   * @param engine
+   * @param isMainScene
+   * @returns renderUnit:IRender
+   */
   _createRender(unitId, engine, isMainScene = !0) {
     const existItem = this.getRenderById(unitId);
     let shouldDestroyEngine = !0;
@@ -31931,13 +32086,13 @@ let RenderManagerService = (_a8 = class extends Disposable {
     }), unit = this._univerInstanceService.getUnit(unitId);
     let renderUnit;
     if (unit) {
-      const type = this._univerInstanceService.getUnitType(unitId), ctors = this._getRenderControllersForType(type);
+      const type = this._univerInstanceService.getUnitType(unitId), ctorOfDeps = this._getRenderDepsByType(type);
       renderUnit = this._injector.createInstance(RenderUnit, {
         unit,
         engine,
         scene,
         isMainScene
-      }), this._tryAddRenderDependencies(renderUnit, ctors);
+      }), this._tryAddRenderDependencies(renderUnit, ctorOfDeps);
     } else
       renderUnit = {
         isThumbNail: !0,
@@ -31977,6 +32132,11 @@ let RenderManagerService = (_a8 = class extends Disposable {
   getFirst() {
     return [...this.getRenderAll().values()][0];
   }
+  /**
+   * get RenderUnit from this._renderMap
+   * @param unitId
+   * @returns RenderUnit, aka IRender
+   */
   getRenderById(unitId) {
     return this._renderMap.get(unitId);
   }
@@ -32271,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();
   }
@@ -32310,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);
   }
@@ -32367,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;
@@ -32428,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;
@@ -32443,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
@@ -32691,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;
@@ -33503,8 +33652,8 @@ function getRangeListFromSelection(anchorPosition, focusPosition, scene, documen
         else if (endOffset > tableStart && endOffset < tableEnd)
           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, !0, segmentId, segmentPage), ap = direction ? sp : ep, fp = direction ? ep : sp;
+          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;
             textRanges.push(new TextRange(scene, document2, skeleton, ap, fp, style, segmentId));
           }
           start = tableEnd + 1;
@@ -33523,8 +33672,8 @@ function getRangeListFromSelection(anchorPosition, focusPosition, scene, documen
         }
       }
       if (end >= startIndex && end <= endIndex || endInTable) {
-        const sp = skeleton.findNodePositionByCharIndex(start, !0, segmentId, segmentPage), ep = skeleton.findNodePositionByCharIndex(end, !0, segmentId, segmentPage), ap = direction ? sp : ep, fp = direction ? ep : sp;
-        if (rectRanges.length && start === end)
+        const sp = skeleton.findNodePositionByCharIndex(start, !0, segmentId, segmentPage), ep = skeleton.findNodePositionByCharIndex(end, !endInTable, segmentId, segmentPage), ap = direction ? sp : ep, fp = direction ? ep : sp;
+        if (rectRanges.length && Tools.diffValue(ap, fp))
           continue;
         textRanges.push(new TextRange(scene, document2, skeleton, ap, fp, style, segmentId));
       }
@@ -33732,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,
@@ -34026,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) {