@windoc/core 0.3.22 → 0.3.24

package/dist/index.mjs

@@ -1,5 +1,5 @@
 // src/version.ts
-var version = "0.3.22";
+var version = "0.3.24";
 
 // src/dataset/enum/Common.ts
 var MaxHeightRatio = /* @__PURE__ */ ((MaxHeightRatio2) => {
@@ -106,21 +106,6 @@ function debounce(func, delay) {
     }, delay);
   };
 }
-function deepCloneOmitKeys(obj, omitKeys) {
-  if (!obj || typeof obj !== "object") {
-    return obj;
-  }
-  let newObj = {};
-  if (Array.isArray(obj)) {
-    newObj = obj.map((item) => deepCloneOmitKeys(item, omitKeys));
-  } else {
-    Object.keys(obj).forEach((key) => {
-      if (omitKeys.includes(key)) return;
-      newObj[key] = deepCloneOmitKeys(obj[key], omitKeys);
-    });
-  }
-  return newObj;
-}
 function deepClone(obj) {
   if (typeof structuredClone === "function") {
     return structuredClone(obj);
@@ -4422,6 +4407,7 @@ function mergeOption(options = {}) {
     wordBreak: "break-word" /* BREAK_WORD */,
     printPixelRatio: 3,
     maskMargin: [0, 0, 0, 0],
+    scrollPaddingLines: 3,
     letterClass: [LETTER_CLASS.ENGLISH],
     contextMenuDisableKeys: [],
     shortcutDisableKeys: [],
@@ -4943,9 +4929,7 @@ function mergeSplitTableRowsForZip(trList) {
   for (let t = trList.length - 1; t >= 0; t--) {
     const splitTr = trList[t];
     if (!splitTr.splitParentId) continue;
-    const parentTrIdx = trList.findIndex(
-      (tr) => tr.id === splitTr.splitParentId
-    );
+    const parentTrIdx = trList.findIndex((tr) => tr.id === splitTr.splitParentId);
     if (!~parentTrIdx) continue;
     const parentTr = trList[parentTrIdx];
     parentTr.height += splitTr.height;
@@ -5991,10 +5975,184 @@ ${ulListStyleText || `${listIndex + 1}.`}${buildText(
   return buildText(zipElementList(elementList));
 }
 function getSlimCloneElementList(elementList) {
-  return deepCloneOmitKeys(elementList, [
-    "metrics",
-    "style"
-  ]);
+  const snapshotElementList = [];
+  let preSourceElement = null;
+  let preSnapshotElement = null;
+  for (let i = 0; i < elementList.length; i++) {
+    const element = elementList[i];
+    if (preSourceElement && preSnapshotElement && isHistoryTextSnapshotMergeable(preSourceElement, element)) {
+      preSnapshotElement.value += element.value;
+      preSourceElement = element;
+      continue;
+    }
+    const snapshotElement = cloneHistorySnapshotElement(element);
+    snapshotElementList.push(snapshotElement);
+    preSourceElement = element;
+    preSnapshotElement = snapshotElement;
+  }
+  return snapshotElementList;
+}
+var HISTORY_SNAPSHOT_OMIT_ATTR = /* @__PURE__ */ new Set([
+  "metrics",
+  "style",
+  "rowList",
+  "positionList",
+  "x",
+  "y",
+  "trIndex",
+  "tdIndex",
+  "isLastRowTd",
+  "isLastColTd",
+  "isLastTd",
+  "rowIndex",
+  "colIndex",
+  "mainHeight",
+  "realHeight",
+  "realMinHeight",
+  "splitBoundaryTop",
+  "splitBoundaryBottom",
+  "actualSize"
+]);
+function cloneHistorySnapshotValue(payload) {
+  if (!payload || typeof payload !== "object") {
+    return payload;
+  }
+  if (Array.isArray(payload)) {
+    return payload.map((item) => cloneHistorySnapshotValue(item));
+  }
+  const snapshot = {};
+  for (const key of Object.keys(payload)) {
+    if (HISTORY_SNAPSHOT_OMIT_ATTR.has(String(key))) continue;
+    snapshot[String(key)] = cloneHistorySnapshotValue(
+      payload[key]
+    );
+  }
+  return snapshot;
+}
+function cloneHistorySnapshotTd(td) {
+  const snapshot = {};
+  for (const key of Object.keys(td)) {
+    if (HISTORY_SNAPSHOT_OMIT_ATTR.has(String(key))) continue;
+    const value = td[key];
+    if (key === "value") {
+      snapshot.value = getSlimCloneElementList(value);
+      continue;
+    }
+    snapshot[String(key)] = cloneHistorySnapshotValue(value);
+  }
+  return snapshot;
+}
+function cloneHistorySnapshotTr(tr) {
+  const snapshot = {};
+  for (const key of Object.keys(tr)) {
+    if (HISTORY_SNAPSHOT_OMIT_ATTR.has(String(key))) continue;
+    const value = tr[key];
+    if (key === "tdList") {
+      snapshot.tdList = value.map((td) => cloneHistorySnapshotTd(td));
+      continue;
+    }
+    snapshot[String(key)] = cloneHistorySnapshotValue(value);
+  }
+  return snapshot;
+}
+function cloneHistorySnapshotElement(element) {
+  const snapshot = {};
+  for (const key of Object.keys(element)) {
+    if (HISTORY_SNAPSHOT_OMIT_ATTR.has(String(key))) continue;
+    const value = element[key];
+    if (key === "trList" && Array.isArray(value)) {
+      snapshot.trList = value.map((tr) => cloneHistorySnapshotTr(tr));
+      continue;
+    }
+    if (key === "valueList" && Array.isArray(value)) {
+      snapshot.valueList = getSlimCloneElementList(value);
+      continue;
+    }
+    if (key === "control" && value && typeof value === "object") {
+      snapshot.control = cloneHistorySnapshotControl(
+        value
+      );
+      continue;
+    }
+    snapshot[String(key)] = cloneHistorySnapshotValue(value);
+  }
+  return snapshot;
+}
+function cloneHistorySnapshotControl(control) {
+  const snapshot = {};
+  for (const key of Object.keys(control)) {
+    const value = control[key];
+    if (key === "value" && Array.isArray(value)) {
+      snapshot.value = getSlimCloneElementList(value);
+      continue;
+    }
+    snapshot[String(key)] = cloneHistorySnapshotValue(value);
+  }
+  return snapshot;
+}
+function isHistoryTextSnapshotElement(element) {
+  return !element.type || TEXTLIKE_ELEMENT_TYPE.includes(element.type);
+}
+function isHistoryTextSnapshotMergeable(source, target) {
+  if (!isHistoryTextSnapshotElement(source) || !isHistoryTextSnapshotElement(target)) {
+    return false;
+  }
+  return isSameHistoryElementExceptValue(source, target);
+}
+function isSameHistoryElementExceptValue(source, target) {
+  const sourceKeys = Object.keys(source).filter(
+    (key) => !HISTORY_SNAPSHOT_OMIT_ATTR.has(key)
+  );
+  const targetKeys = Object.keys(target).filter(
+    (key) => !HISTORY_SNAPSHOT_OMIT_ATTR.has(key)
+  );
+  if (sourceKeys.length !== targetKeys.length) return false;
+  for (let s = 0; s < sourceKeys.length; s++) {
+    const key = sourceKeys[s];
+    if (key === "value") continue;
+    if (key === "groupIds" && Array.isArray(source[key]) && Array.isArray(target[key]) && isArrayEqual(source[key], target[key])) {
+      continue;
+    }
+    if (source[key] !== target[key]) {
+      return false;
+    }
+  }
+  return true;
+}
+function inflateElementList(elementList) {
+  let i = 0;
+  while (i < elementList.length) {
+    const element = elementList[i];
+    if (element.trList?.length) {
+      for (let t = 0; t < element.trList.length; t++) {
+        const tr = element.trList[t];
+        for (let d = 0; d < tr.tdList.length; d++) {
+          inflateElementList(tr.tdList[d].value);
+        }
+      }
+    }
+    if (element.valueList?.length) {
+      inflateElementList(element.valueList);
+    }
+    if (element.control?.value?.length) {
+      inflateElementList(element.control.value);
+    }
+    if (isHistoryTextSnapshotElement(element) && element.value?.length > 1) {
+      const textList = splitText(element.value);
+      elementList.splice(
+        i,
+        1,
+        ...textList.map((value) => ({
+          ...element,
+          value
+        }))
+      );
+      i += textList.length;
+      continue;
+    }
+    i++;
+  }
+  return elementList;
 }
 function getIsBlockElement(element) {
   return !!element?.type && (BLOCK_ELEMENT_TYPE.includes(element.type) || element.imgDisplay === "inline" /* INLINE */);
@@ -6410,7 +6568,10 @@ var Cursor = class {
     const agentCursorDom = this.cursorAgent.getAgentCursorDom();
     if (document.activeElement !== agentCursorDom) {
       agentCursorDom.focus({ preventScroll: true });
+      const scrollContainer = findScrollContainer(this.container);
+      const { scrollLeft, scrollTop } = scrollContainer;
       agentCursorDom.setSelectionRange(0, 0);
+      scrollContainer.scroll(scrollLeft, scrollTop);
     }
   }
   drawCursor(payload) {
@@ -6480,7 +6641,6 @@ var Cursor = class {
       this.recoveryCursor();
       return;
     }
-    const oldTop = this.cursorDom.style.top;
     const isReadonly = this.draw.isReadonly();
     this.cursorDom.style.width = `${width * scale}px`;
     this.cursorDom.style.backgroundColor = color;
@@ -6494,10 +6654,7 @@ var Cursor = class {
       this._clearBlinkTimeout();
     }
     nextTick2(() => {
-      this.moveCursorToVisible({
-        cursorPosition,
-        direction: parseInt(oldTop) > cursorTop ? "top" /* UP */ : "down" /* DOWN */
-      });
+      this.moveCursorToVisible({ cursorPosition });
     });
   }
   recoveryCursor() {
@@ -6505,41 +6662,44 @@ var Cursor = class {
     this._clearBlinkTimeout();
   }
   moveCursorToVisible(payload) {
-    const { cursorPosition, direction } = payload;
-    if (!cursorPosition || !direction) return;
+    const { cursorPosition } = payload;
+    if (!cursorPosition) return;
     const {
       pageNo,
-      coordinate: { leftTop, leftBottom }
+      coordinate: { leftTop },
+      ascent,
+      metrics: { boundingBoxAscent, boundingBoxDescent }
     } = cursorPosition;
-    const prePageY = pageNo * (this.draw.getHeight() + this.draw.getPageGap()) + this.container.getBoundingClientRect().top;
-    const isUp = direction === "top" /* UP */;
-    const x = leftBottom[0];
-    const cursorTop = leftTop[1] + cursorPosition.ascent - cursorPosition.metrics.boundingBoxAscent;
-    const cursorBottom = cursorTop + cursorPosition.metrics.boundingBoxAscent + cursorPosition.metrics.boundingBoxDescent;
-    const y = isUp ? cursorTop + prePageY : cursorBottom + prePageY;
+    const containerRect = this.container.getBoundingClientRect();
+    const pageOffset = pageNo * (this.draw.getHeight() + this.draw.getPageGap());
+    const cursorTopViewport = containerRect.top + pageOffset + leftTop[1] + ascent - boundingBoxAscent;
+    const cursorBottomViewport = cursorTopViewport + boundingBoxAscent + boundingBoxDescent;
     const scrollContainer = findScrollContainer(this.container);
-    const rect = {
-      left: 0,
-      right: 0,
-      top: 0,
-      bottom: 0
-    };
+    let visibleTop;
+    let visibleBottom;
     if (scrollContainer === document.documentElement) {
-      rect.right = window.innerWidth;
-      rect.bottom = window.innerHeight;
+      visibleTop = 0;
+      visibleBottom = window.innerHeight;
     } else {
-      const { left: left2, right: right2, top, bottom } = scrollContainer.getBoundingClientRect();
-      rect.left = left2;
-      rect.right = right2;
-      rect.top = top;
-      rect.bottom = bottom;
-    }
-    const { maskMargin } = this.options;
-    rect.top += maskMargin[0];
-    rect.bottom -= maskMargin[2];
-    if (!(x >= rect.left && x <= rect.right && y >= rect.top && y <= rect.bottom)) {
-      const { scrollLeft, scrollTop } = scrollContainer;
-      isUp ? scrollContainer.scroll(scrollLeft, scrollTop - (rect.top - y)) : scrollContainer.scroll(scrollLeft, scrollTop + y - rect.bottom);
+      const scrollRect = scrollContainer.getBoundingClientRect();
+      visibleTop = scrollRect.top;
+      visibleBottom = scrollRect.bottom;
+    }
+    if (cursorTopViewport >= visibleTop && cursorBottomViewport <= visibleBottom) {
+      return;
+    }
+    const scrollPadding = (boundingBoxAscent + boundingBoxDescent) * this.options.scrollPaddingLines;
+    const { scrollLeft, scrollTop } = scrollContainer;
+    if (cursorTopViewport < visibleTop) {
+      scrollContainer.scroll(
+        scrollLeft,
+        scrollTop - (visibleTop - cursorTopViewport) - scrollPadding
+      );
+    } else {
+      scrollContainer.scroll(
+        scrollLeft,
+        scrollTop + (cursorBottomViewport - visibleBottom) + scrollPadding
+      );
     }
   }
 };
@@ -7665,7 +7825,8 @@ function backspace(evt, host) {
   } else {
     rangeManager.setRange(curIndex, curIndex);
     draw.render({
-      curIndex
+      curIndex,
+      dirtyStartIndex: curIndex + 1
     });
   }
 }
@@ -7807,7 +7968,8 @@ function del(evt, host) {
   } else {
     rangeManager.setRange(curIndex, curIndex);
     draw.render({
-      curIndex
+      curIndex,
+      dirtyStartIndex: curIndex + 1
     });
   }
 }
@@ -8511,8 +8673,7 @@ function updown(evt, host) {
   });
   if (!isCollapsed) {
     draw.getCursor().moveCursorToVisible({
-      cursorPosition: positionList[isUp ? anchorStartIndex : anchorEndIndex],
-      direction: isUp ? "top" /* UP */ : "down" /* DOWN */
+      cursorPosition: positionList[isUp ? anchorStartIndex : anchorEndIndex]
     });
   }
 }
@@ -8650,10 +8811,12 @@ function input(data2, host) {
   if (~curIndex) {
     rangeManager.setRange(curIndex, curIndex);
     const isWordBoundary = !isComposing && /[\s\p{P}]/u.test(data2);
+    const dirtyStartIndex = startIndex + 1;
     draw.render({
       curIndex,
       isSubmitHistory: !isComposing,
-      isInputHistory: !isComposing && !isWordBoundary
+      isInputHistory: !isComposing && !isWordBoundary,
+      dirtyStartIndex
     });
   }
   if (isComposing && ~curIndex) {
@@ -9337,7 +9500,7 @@ var HistoryManager = class {
       const pop = this.undoStack.pop();
       this.redoStack.push(pop);
       if (this.undoStack.length) {
-        this.undoStack[this.undoStack.length - 1]();
+        this.undoStack[this.undoStack.length - 1].restore();
       }
     }
   }
@@ -9345,11 +9508,11 @@ var HistoryManager = class {
     if (this.redoStack.length) {
       const pop = this.redoStack.pop();
       this.undoStack.push(pop);
-      pop();
+      pop.restore();
     }
   }
-  execute(fn) {
-    this.undoStack.push(fn);
+  execute(entry) {
+    this.undoStack.push(this._normalizeEntry(entry));
     if (this.redoStack.length) {
       this.redoStack = [];
     }
@@ -9357,11 +9520,12 @@ var HistoryManager = class {
       this.undoStack.shift();
     }
   }
-  replaceLatest(fn) {
+  replaceLatest(entry) {
+    const normalizedEntry = this._normalizeEntry(entry);
     if (this.undoStack.length > 0) {
-      this.undoStack[this.undoStack.length - 1] = fn;
+      this.undoStack[this.undoStack.length - 1] = normalizedEntry;
     } else {
-      this.execute(fn);
+      this.execute(normalizedEntry);
     }
     if (this.redoStack.length) {
       this.redoStack = [];
@@ -9392,6 +9556,14 @@ var HistoryManager = class {
   popUndo() {
     return this.undoStack.pop();
   }
+  _normalizeEntry(entry) {
+    if (typeof entry === "function") {
+      return {
+        restore: entry
+      };
+    }
+    return entry;
+  }
 };
 
 // src/core/position/Position.ts
@@ -11599,6 +11771,7 @@ var ScrollObserver = class {
       const { intersectionPageNo, visiblePageNoList } = this.getPageVisibleInfo();
       this.draw.setIntersectionPageNo(intersectionPageNo);
       this.draw.setVisiblePageNoList(visiblePageNoList);
+      this.draw.renderVisiblePages(visiblePageNoList);
     }, 150);
     this.draw = draw;
     this.options = draw.getOptions();
@@ -20406,6 +20579,9 @@ var Area = class {
   getAreaInfo() {
     return this.areaInfoMap;
   }
+  clear() {
+    this.areaInfoMap.clear();
+  }
   getActiveAreaId() {
     if (!this.areaInfoMap.size) return null;
     const { startIndex } = this.range.getRange();
@@ -20797,6 +20973,7 @@ var Draw = class {
     this.container = this._wrapContainer(rootContainer);
     this.pageList = [];
     this.ctxList = [];
+    this.pageRenderVersionList = [];
     this.pageNo = 0;
     this.renderCount = 0;
     this.pagePixelRatio = null;
@@ -20809,6 +20986,7 @@ var Draw = class {
     this._formatContainer();
     this.pageContainer = this._createPageContainer();
     this._createPage(0);
+    this.measureCtx = this._createMeasureContext();
     this.i18n = new I18n(options.locale);
     this.historyManager = new HistoryManager(this);
     this.position = new Position(this);
@@ -20873,6 +21051,8 @@ var Draw = class {
     this.pageRowList = [];
     this.painterStyle = null;
     this.painterOptions = null;
+    this.elementFontCache = /* @__PURE__ */ new WeakMap();
+    this.elementRowMarginCache = /* @__PURE__ */ new WeakMap();
     this.visiblePageNoList = [];
     this.intersectionPageNo = 0;
     this.lazyRenderIntersectionObserver = null;
@@ -21039,7 +21219,9 @@ var Draw = class {
   getContextInnerWidth() {
     const positionContext = this.position.getPositionContext();
     if (positionContext.isTable) {
-      const td = this.resolveTableCellContext(this.getOriginalElementList())?.td;
+      const td = this.resolveTableCellContext(
+        this.getOriginalElementList()
+      )?.td;
       if (!td) return this.getColumnWidth() / this.options.scale;
       const tdPadding = this.getTdPadding();
       return td.width - tdPadding[1] - tdPadding[3];
@@ -21092,6 +21274,7 @@ var Draw = class {
     return this.visiblePageNoList;
   }
   setVisiblePageNoList(payload) {
+    if (isArrayEqual(this.visiblePageNoList, payload)) return;
     this.visiblePageNoList = payload;
     if (this.listener.visiblePageNoListChange) {
       this.listener.visiblePageNoListChange(this.visiblePageNoList);
@@ -21104,6 +21287,7 @@ var Draw = class {
     return this.intersectionPageNo;
   }
   setIntersectionPageNo(payload) {
+    if (this.intersectionPageNo === payload) return;
     this.intersectionPageNo = payload;
     if (this.listener.intersectionPageNoChange) {
       this.listener.intersectionPageNoChange(this.intersectionPageNo);
@@ -21131,7 +21315,9 @@ var Draw = class {
       candidateIndexes.push(context.index);
     }
     if (context.tableId) {
-      const tableIndex = sourceElementList.findIndex((el) => el.id === context.tableId);
+      const tableIndex = sourceElementList.findIndex(
+        (el) => el.id === context.tableId
+      );
       if (~tableIndex && !candidateIndexes.includes(tableIndex)) {
         candidateIndexes.push(tableIndex);
       }
@@ -21240,9 +21426,7 @@ var Draw = class {
     return this.header.getElementList();
   }
   getTableElementList(sourceElementList) {
-    const splitCellSelectionContext = this.getSplitCellSelectionContext(
-      sourceElementList
-    );
+    const splitCellSelectionContext = this.getSplitCellSelectionContext(sourceElementList);
     if (splitCellSelectionContext) {
       return splitCellSelectionContext.value;
     }
@@ -21366,10 +21550,7 @@ var Draw = class {
       positionContext.trId = continuationTr.id;
       positionContext.tableId = tableId;
       this.position.setPositionContext(positionContext);
-      this.range.setRange(
-        continuationCursorIndex,
-        continuationCursorIndex
-      );
+      this.range.setRange(continuationCursorIndex, continuationCursorIndex);
       this.pendingTableCursorIndex = continuationCursorIndex;
       return true;
     }
@@ -21429,7 +21610,10 @@ var Draw = class {
     });
     const splitCellSelection = this.range.getSplitCellSelection();
     if (splitCellSelection) {
-      const curIndex2 = this.replaceSplitCellSelection(payload, splitCellSelection);
+      const curIndex2 = this.replaceSplitCellSelection(
+        payload,
+        splitCellSelection
+      );
       if (~curIndex2) {
         this.range.setRange(curIndex2, curIndex2);
         this.render({
@@ -21559,12 +21743,7 @@ var Draw = class {
       trId: rootCellContext.tr.id,
       tdId: rootTd.id
     });
-    this.spliceElementList(
-      rootTd.value,
-      1,
-      rootTd.value.length - 1,
-      payload
-    );
+    this.spliceElementList(rootTd.value, 1, rootTd.value.length - 1, payload);
     rootTd.rowList = void 0;
     rootTd.positionList = void 0;
     rootTd.mainHeight = void 0;
@@ -21984,6 +22163,15 @@ var Draw = class {
     this._initPageContext(ctx);
     this.pageList.push(canvas);
     this.ctxList.push(ctx);
+    this.pageRenderVersionList.push(0);
+  }
+  _createMeasureContext() {
+    const canvas = document.createElement("canvas");
+    const ctx = canvas.getContext("2d");
+    ctx.letterSpacing = "0px";
+    ctx.wordSpacing = "0px";
+    ctx.direction = "ltr";
+    return ctx;
   }
   _initPageContext(ctx) {
     const dpr = this.getPagePixelRatio();
@@ -21996,8 +22184,22 @@ var Draw = class {
     const { defaultSize, defaultFont } = this.options;
     const font = el.font || defaultFont;
     const size = el.actualSize || el.size || defaultSize;
+    const cache = this.elementFontCache.get(el);
+    if (cache && cache.scale === scale && cache.font === font && cache.size === size && cache.actualSize === el.actualSize && cache.bold === el.bold && cache.italic === el.italic) {
+      return cache.style;
+    }
     const sizePx = size * (96 / 72) * scale;
-    return `${el.italic ? "italic " : ""}${el.bold ? "bold " : ""}${sizePx}px ${font}`;
+    const style = `${el.italic ? "italic " : ""}${el.bold ? "bold " : ""}${sizePx}px ${font}`;
+    this.elementFontCache.set(el, {
+      scale,
+      font,
+      size,
+      actualSize: el.actualSize,
+      bold: el.bold,
+      italic: el.italic,
+      style
+    });
+    return style;
   }
   getElementSize(el) {
     return el.actualSize || el.size || this.options.defaultSize;
@@ -22010,13 +22212,25 @@ var Draw = class {
       scale
     } = this.options;
     const fontSize = el.size || defaultSize;
+    const rowMarginValue = el.rowMargin ?? defaultRowMargin;
+    const cache = this.elementRowMarginCache.get(el);
+    if (cache && cache.scale === scale && cache.size === fontSize && cache.rowMargin === rowMarginValue) {
+      return cache.value;
+    }
     let ratio = 1;
     if (fontSize < 12) {
       ratio = fontSize / 12;
     } else if (fontSize > 30) {
       ratio = 1 + (fontSize - 30) / 30;
     }
-    return defaultBasicRowMarginHeight * ratio * (el.rowMargin ?? defaultRowMargin) * scale;
+    const value = defaultBasicRowMarginHeight * ratio * rowMarginValue * scale;
+    this.elementRowMarginCache.set(el, {
+      scale,
+      size: fontSize,
+      rowMargin: rowMarginValue,
+      value
+    });
+    return value;
   }
   createListStateSeed(initialListState) {
     const listLevelIndex = /* @__PURE__ */ new Map();
@@ -22095,7 +22309,12 @@ var Draw = class {
       pageHeight = 0,
       mainOuterHeight = 0,
       surroundElementList = [],
-      initialListState
+      initialListState,
+      hasListElement = true,
+      fromIndex = 0,
+      initialY = startY,
+      initialPageNo = 0,
+      initialRowIndex = 0
     } = payload;
     const {
       defaultSize,
@@ -22104,27 +22323,62 @@ var Draw = class {
       defaultTabWidth
     } = this.options;
     const defaultBasicRowMarginHeight = this.getDefaultBasicRowMarginHeight();
-    const canvas = document.createElement("canvas");
-    const ctx = canvas.getContext("2d");
-    const listStyleMap = this.listParticle.computeListStyle(ctx, elementList);
+    const ctx = this.measureCtx;
+    ctx.save();
+    ctx.font = "10px sans-serif";
+    ctx.textAlign = "start";
+    ctx.textBaseline = "alphabetic";
+    const listStyleMap = hasListElement ? this.listParticle.computeListStyle(ctx, elementList) : /* @__PURE__ */ new Map();
+    const wordMeasureCache = /* @__PURE__ */ new Map();
+    const getWordMeasure = (curIndex, elementFont) => {
+      const cache = wordMeasureCache.get(curIndex);
+      if (cache) return cache;
+      let endIndex = curIndex;
+      while (endIndex < elementList.length) {
+        const measureElement = elementList[endIndex];
+        if (measureElement.type && measureElement.type !== "text" /* TEXT */ || !this.LETTER_REG.test(measureElement.value)) {
+          break;
+        }
+        if (this.getElementFont(measureElement) !== elementFont) {
+          const fallbackWord = this.textParticle.measureWord(
+            ctx,
+            elementList,
+            curIndex
+          );
+          wordMeasureCache.set(curIndex, fallbackWord);
+          return fallbackWord;
+        }
+        endIndex++;
+      }
+      const endElement = elementList[endIndex] || null;
+      let suffixWidth = 0;
+      for (let i = endIndex - 1; i >= curIndex; i--) {
+        suffixWidth += this.textParticle.measureText(ctx, elementList[i]).width;
+        wordMeasureCache.set(i, {
+          width: suffixWidth,
+          endElement
+        });
+      }
+      return wordMeasureCache.get(curIndex);
+    };
     const rowList = [];
-    if (elementList.length) {
+    if (elementList.length && fromIndex < elementList.length) {
       rowList.push({
         width: 0,
         height: 0,
         ascent: 0,
         elementList: [],
-        startIndex: 0,
-        rowIndex: 0,
-        rowFlex: elementList?.[0]?.rowFlex || elementList?.[1]?.rowFlex
+        startIndex: fromIndex,
+        rowIndex: initialRowIndex,
+        rowFlex: elementList?.[fromIndex]?.rowFlex || elementList?.[fromIndex + 1]?.rowFlex
       });
     }
     let x = startX;
-    let y = startY;
-    let pageNo = 0;
+    let y = initialY;
+    let pageNo = initialPageNo;
     const listState = this.createListStateSeed(initialListState);
     let controlRealWidth = 0;
-    for (let i = 0; i < elementList.length; i++) {
+    for (let i = fromIndex; i < elementList.length; i++) {
       const curRow = rowList[rowList.length - 1];
       const element = elementList[i];
       const rowMargin = this.getElementRowMargin(element);
@@ -22170,9 +22424,7 @@ var Draw = class {
       } else if (element.type === "table" /* TABLE */) {
         let activeSplitRange;
         let mergedSplitFallback;
-        const logicalSplitCursor = this.getCollapsedSplitTableCursorContext(
-          element
-        );
+        const logicalSplitCursor = this.getCollapsedSplitTableCursorContext(element);
         if (element.pagingId) {
           let tableIndex = i + 1;
           let combineCount = 0;
@@ -22777,16 +23029,14 @@ var Draw = class {
           element.actualSize = Math.ceil(size * 0.6);
         }
         metrics.height = (element.actualSize || size) * scale;
-        ctx.font = this.getElementFont(element);
+        const elementFont = this.getElementFont(element);
+        ctx.font = elementFont;
         const fontMetrics = this.textParticle.measureText(ctx, element);
         metrics.width = fontMetrics.width * scale;
         if (element.letterSpacing) {
           metrics.width += element.letterSpacing * scale;
         }
-        const basisMetrics = this.textParticle.measureBasisWord(
-          ctx,
-          element.font
-        );
+        const basisMetrics = this.textParticle.measureBasisWord(ctx, elementFont);
         metrics.boundingBoxAscent = basisMetrics.fontBoundingBoxAscent * scale;
         metrics.boundingBoxDescent = basisMetrics.fontBoundingBoxDescent * scale;
         if (element.type === "superscript" /* SUPERSCRIPT */) {
@@ -22823,11 +23073,7 @@ var Draw = class {
         if ((!preElement?.type || preElement?.type === "text" /* TEXT */) && (!element.type || element.type === "text" /* TEXT */)) {
           const word = `${preElement?.value || ""}${element.value}`;
           if (this.WORD_LIKE_REG.test(word)) {
-            const { width, endElement } = this.textParticle.measureWord(
-              ctx,
-              elementList,
-              i
-            );
+            const { width, endElement } = getWordMeasure(i, ctx.font);
             const wordWidth = width * scale;
             if (endElement && wordWidth <= availableWidth) {
               curRowWidth += wordWidth;
@@ -22960,6 +23206,7 @@ var Draw = class {
         x += metrics.width;
       }
     }
+    ctx.restore();
     return rowList;
   }
   _applyRowSpacing() {
@@ -23552,30 +23799,11 @@ var Draw = class {
     if (this.isGraffitiMode()) {
       this.graffiti.render(ctx, pageNo);
     }
+    this.pageRenderVersionList[pageNo] = this.renderCount;
   }
   _disconnectLazyRender() {
     this.lazyRenderIntersectionObserver?.disconnect();
-  }
-  _lazyRender() {
-    const positionList = this.position.getOriginalMainPositionList();
-    const elementList = this.getOriginalMainElementList();
-    this._disconnectLazyRender();
-    this.lazyRenderIntersectionObserver = new IntersectionObserver((entries) => {
-      entries.forEach((entry) => {
-        if (entry.isIntersecting) {
-          const index = Number(entry.target.dataset.index);
-          this._drawPage({
-            elementList,
-            positionList,
-            rowList: this.pageRowList[index],
-            pageNo: index
-          });
-        }
-      });
-    });
-    this.pageList.forEach((el) => {
-      this.lazyRenderIntersectionObserver.observe(el);
-    });
+    this.lazyRenderIntersectionObserver = null;
   }
   _immediateRender() {
     const positionList = this.position.getOriginalMainPositionList();
@@ -23589,6 +23817,100 @@ var Draw = class {
       });
     }
   }
+  _collectMainRenderMeta() {
+    const surroundElementList = [];
+    let hasAreaElement = false;
+    let hasListElement = false;
+    let hasStructuralElement = false;
+    for (let i = 0; i < this.elementList.length; i++) {
+      const element = this.elementList[i];
+      if (!hasAreaElement && element.areaId) {
+        hasAreaElement = true;
+      }
+      if (!hasListElement && element.listId) {
+        hasListElement = true;
+      }
+      if (!hasStructuralElement && (element.type === "table" /* TABLE */ || element.type === "block" /* BLOCK */ || element.type === "pageBreak" /* PAGE_BREAK */ || element.type === "columnBreak" /* COLUMN_BREAK */ || element.type === "image" /* IMAGE */ || element.type === "latex" /* LATEX */ || element.type === "separator" /* SEPARATOR */)) {
+        hasStructuralElement = true;
+      }
+      if (element.imgDisplay === "surround" /* SURROUND */) {
+        surroundElementList.push(element);
+      }
+    }
+    return {
+      hasAreaElement,
+      hasListElement,
+      hasStructuralElement,
+      surroundElementList
+    };
+  }
+  _getIncrementalRestartState(dirtyStartIndex, rowList, pageRowList, startY) {
+    if (!rowList.length || !pageRowList.length) return null;
+    const searchIndex = Math.max(dirtyStartIndex - 1, 0);
+    let restartRowIndex = -1;
+    for (let i = 0; i < rowList.length; i++) {
+      if (rowList[i].startIndex <= searchIndex) {
+        restartRowIndex = i;
+      } else {
+        break;
+      }
+    }
+    if (restartRowIndex < 0) return null;
+    if (restartRowIndex > 0 && this.elementList[rowList[restartRowIndex].startIndex]?.value === ZERO && !this.elementList[rowList[restartRowIndex].startIndex]?.listWrap) {
+      restartRowIndex -= 1;
+    }
+    const restartRow = rowList[restartRowIndex];
+    const fromIndex = Math.min(restartRow.startIndex, this.elementList.length);
+    let initialPageNo = 0;
+    let initialY = startY;
+    let absoluteRowIndex = 0;
+    let isFound = false;
+    for (let pageNo = 0; pageNo < pageRowList.length; pageNo++) {
+      const rows = pageRowList[pageNo];
+      let y = startY;
+      for (let rowNo = 0; rowNo < rows.length; rowNo++) {
+        if (absoluteRowIndex === restartRowIndex) {
+          initialPageNo = pageNo;
+          initialY = y;
+          isFound = true;
+          break;
+        }
+        const row = rows[rowNo];
+        y += (row.offsetY || 0) + (row.spaceAbove || 0) + row.height + (row.spaceBelow || 0);
+        absoluteRowIndex++;
+      }
+      if (isFound) break;
+    }
+    if (!isFound) return null;
+    return {
+      fromIndex,
+      initialY,
+      initialPageNo,
+      initialRowIndex: restartRow.rowIndex,
+      initialListState: this.getListStateBeforeIndex(this.elementList, fromIndex),
+      prefixRows: rowList.slice(0, restartRowIndex)
+    };
+  }
+  renderVisiblePages(pageNoList) {
+    const positionList = this.position.getOriginalMainPositionList();
+    const elementList = this.getOriginalMainElementList();
+    const targetPageNoList = pageNoList ?? this.visiblePageNoList;
+    if (!targetPageNoList?.length) return;
+    const renderedPageNoSet = /* @__PURE__ */ new Set();
+    for (let i = 0; i < targetPageNoList.length; i++) {
+      const pageNo = targetPageNoList[i];
+      if (renderedPageNoSet.has(pageNo) || pageNo < 0 || pageNo >= this.pageRowList.length || this.pageRenderVersionList[pageNo] === this.renderCount) {
+        continue;
+      }
+      renderedPageNoSet.add(pageNo);
+      this._drawPage({
+        elementList,
+        positionList,
+        rowList: this.pageRowList[pageNo],
+        pageNo
+      });
+    }
+  }
   render(payload) {
     this.renderCount++;
     const { header, footer } = this.options;
@@ -23600,15 +23922,19 @@ var Draw = class {
       isLazy = true,
       isInit = false,
       isSourceHistory = false,
-      isFirstRender = false
+      isFirstRender = false,
+      dirtyStartIndex
     } = payload || {};
     let { curIndex } = payload || {};
     this.pendingTableCursorIndex = void 0;
     const innerWidth = this.getInnerWidth();
     const columnWidth = this.getColumnWidth();
     const isPagingMode = this.getIsPagingMode();
+    const columnCount = this.getColumnCount();
     const oldPageSize = this.pageRowList.length;
     if (isCompute) {
+      const oldRowList = this.rowList;
+      const oldPageRowList = this.pageRowList;
       this.position.setFloatPositionList([]);
       if (isPagingMode) {
         if (!header.disabled) {
@@ -23624,8 +23950,13 @@ var Draw = class {
       const mainOuterHeight = this.getMainOuterHeight();
       const startX = margins[3];
       const startY = margins[0] + extraHeight;
-      const surroundElementList = pickSurroundElementList(this.elementList);
-      this.rowList = this.computeRowList({
+      const {
+        hasAreaElement,
+        hasListElement,
+        hasStructuralElement,
+        surroundElementList
+      } = this._collectMainRenderMeta();
+      const rowListPayload = {
         startX,
         startY,
         pageHeight,
@@ -23633,12 +23964,41 @@ var Draw = class {
         isPagingMode,
         innerWidth: columnWidth,
         surroundElementList,
+        hasListElement,
         elementList: this.elementList
-      });
+      };
+      const canUseIncrementalMainRows = dirtyStartIndex !== void 0 && dirtyStartIndex >= 0 && !isInit && !isSourceHistory && isPagingMode && columnCount === 1 && !hasAreaElement && !hasStructuralElement && surroundElementList.length === 0 && oldRowList.length > 0 && oldPageRowList.length > 0;
+      if (canUseIncrementalMainRows) {
+        const restartState = this._getIncrementalRestartState(
+          dirtyStartIndex,
+          oldRowList,
+          oldPageRowList,
+          startY
+        );
+        if (restartState) {
+          const suffixRows = this.computeRowList({
+            ...rowListPayload,
+            fromIndex: restartState.fromIndex,
+            initialY: restartState.initialY,
+            initialPageNo: restartState.initialPageNo,
+            initialRowIndex: restartState.initialRowIndex,
+            initialListState: restartState.initialListState
+          });
+          this.rowList = restartState.prefixRows.concat(suffixRows);
+        } else {
+          this.rowList = this.computeRowList(rowListPayload);
+        }
+      } else {
+        this.rowList = this.computeRowList(rowListPayload);
+      }
       this._applyRowSpacing();
       this.pageRowList = this._computePageList();
       this.position.computePositionList();
-      this.area.compute();
+      if (hasAreaElement) {
+        this.area.compute();
+      } else {
+        this.area.clear();
+      }
       if (!this.isPrintMode()) {
         const searchKeyword = this.search.getSearchKeyword();
         if (searchKeyword) {
@@ -23662,10 +24022,26 @@ var Draw = class {
     if (prePageCount > curPageCount) {
       const deleteCount = prePageCount - curPageCount;
       this.ctxList.splice(curPageCount, deleteCount);
+      this.pageRenderVersionList.splice(curPageCount, deleteCount);
       this.pageList.splice(curPageCount, deleteCount).forEach((page) => page.remove());
     }
     if (isLazy && isPagingMode) {
-      this._lazyRender();
+      let visiblePageNoList = this.visiblePageNoList.filter(
+        (pageNo) => pageNo >= 0 && pageNo < curPageCount
+      );
+      let intersectionPageNo = Math.min(
+        this.intersectionPageNo,
+        Math.max(curPageCount - 1, 0)
+      );
+      if (!visiblePageNoList.length || oldPageSize !== curPageCount || intersectionPageNo >= curPageCount) {
+        const visibleInfo = this.scrollObserver.getPageVisibleInfo();
+        intersectionPageNo = visibleInfo.intersectionPageNo;
+        visiblePageNoList = visibleInfo.visiblePageNoList;
+        this.setIntersectionPageNo(intersectionPageNo);
+        this.setVisiblePageNoList(visiblePageNoList);
+      }
+      const renderPageNoList = visiblePageNoList.length ? visiblePageNoList : [intersectionPageNo];
+      this.renderVisiblePages(renderPageNoList);
     } else {
       this._immediateRender();
     }
@@ -23714,7 +24090,9 @@ var Draw = class {
     const positionContext = this.position.getPositionContext();
     const positionList = this.position.getPositionList();
     if (positionContext.isTable) {
-      const tablePositionList = this.resolveTableCellContext(this.getOriginalElementList())?.td.positionList;
+      const tablePositionList = this.resolveTableCellContext(
+        this.getOriginalElementList()
+      )?.td.positionList;
       if (curIndex === void 0 && tablePositionList) {
         curIndex = tablePositionList.length - 1;
       }
@@ -23741,36 +24119,51 @@ var Draw = class {
     return curIndex;
   }
   submitHistory(curIndex, isInput = false) {
-    const positionContext = this.position.getPositionContext();
-    const oldElementList = getSlimCloneElementList(this.elementList);
-    const oldHeaderElementList = getSlimCloneElementList(
-      this.header.getElementList()
-    );
-    const oldFooterElementList = getSlimCloneElementList(
-      this.footer.getElementList()
-    );
-    const oldRange = deepClone(this.range.getRange());
-    const pageNo = this.pageNo;
-    const oldPositionContext = deepClone(positionContext);
-    const zone = this.zone.getZone();
-    const fn = () => {
-      this.zone.setZone(zone);
-      this.setPageNo(pageNo);
-      this.position.setPositionContext(deepClone(oldPositionContext));
-      this.header.setElementList(deepClone(oldHeaderElementList));
-      this.footer.setElementList(deepClone(oldFooterElementList));
-      this.elementList = deepClone(oldElementList);
-      this.range.replaceRange(deepClone(oldRange));
-      this.render({
-        curIndex,
-        isSubmitHistory: false,
-        isSourceHistory: true
-      });
+    const snapshot = {
+      elementList: getSlimCloneElementList(this.elementList),
+      headerElementList: getSlimCloneElementList(this.header.getElementList()),
+      footerElementList: getSlimCloneElementList(this.footer.getElementList()),
+      range: deepClone(this.range.getRange()),
+      pageNo: this.pageNo,
+      positionContext: deepClone(this.position.getPositionContext()),
+      zone: this.zone.getZone()
+    };
+    const entry = {
+      restore: () => {
+        const {
+          elementList,
+          headerElementList,
+          footerElementList,
+          range,
+          pageNo,
+          positionContext,
+          zone
+        } = snapshot;
+        const restoredHeaderElementList = inflateElementList(
+          deepClone(headerElementList)
+        );
+        const restoredFooterElementList = inflateElementList(
+          deepClone(footerElementList)
+        );
+        const restoredMainElementList = inflateElementList(deepClone(elementList));
+        this.zone.setZone(zone);
+        this.setPageNo(pageNo);
+        this.position.setPositionContext(deepClone(positionContext));
+        this.header.setElementList(restoredHeaderElementList);
+        this.footer.setElementList(restoredFooterElementList);
+        this.elementList = restoredMainElementList;
+        this.range.replaceRange(deepClone(range));
+        this.render({
+          curIndex,
+          isSubmitHistory: false,
+          isSourceHistory: true
+        });
+      }
     };
     if (isInput && this.historyManager.isInputGroupable()) {
-      this.historyManager.replaceLatest(fn);
+      this.historyManager.replaceLatest(entry);
     } else {
-      this.historyManager.execute(fn);
+      this.historyManager.execute(entry);
     }
     if (isInput) {
       this.historyManager.recordInputTime();