@hufe921/canvas-editor 0.9.17 → 0.9.19

package/dist/canvas-editor.es.js

@@ -23,7 +23,7 @@ var __publicField = (obj, key, value) => {
   return value;
 };
 var index = "";
-const version = "0.9.17";
+const version = "0.9.19";
 const ZERO = "\u200B";
 const WRAP = "\n";
 var RowFlex;
@@ -130,6 +130,11 @@ function mergeObject(source, target) {
   }
   return target;
 }
+function nextTick(fn) {
+  setTimeout(() => {
+    fn();
+  }, 0);
+}
 const CURSOR_AGENT_HEIGHT = 12;
 const defaultCursorOption = {
   width: 1,
@@ -235,11 +240,16 @@ var ImageDisplay;
 })(ImageDisplay || (ImageDisplay = {}));
 class ImageParticle {
   constructor(draw) {
+    __publicField(this, "draw");
     __publicField(this, "options");
     __publicField(this, "imageCache");
+    this.draw = draw;
     this.options = draw.getOptions();
     this.imageCache = new Map();
   }
+  addImageObserver(promise) {
+    this.draw.getImageObserver().add(promise);
+  }
   render(ctx, element, x, y) {
     const { scale } = this.options;
     const width = element.width * scale;
@@ -248,12 +258,19 @@ class ImageParticle {
       const img = this.imageCache.get(element.id);
       ctx.drawImage(img, x, y, width, height);
     } else {
-      const img = new Image();
-      img.src = element.value;
-      img.onload = () => {
-        ctx.drawImage(img, x, y, width, height);
-        this.imageCache.set(element.id, img);
-      };
+      const imageLoadPromise = new Promise((resolve, reject) => {
+        const img = new Image();
+        img.src = element.value;
+        img.onload = () => {
+          ctx.drawImage(img, x, y, width, height);
+          this.imageCache.set(element.id, img);
+          resolve(element);
+        };
+        img.onerror = (error) => {
+          reject(error);
+        };
+      });
+      this.addImageObserver(imageLoadPromise);
     }
   }
 }
@@ -3201,12 +3218,19 @@ class LaTexParticle extends ImageParticle {
       const img = this.imageCache.get(element.value);
       ctx.drawImage(img, x, y, width, height);
     } else {
-      const img = new Image();
-      img.src = element.laTexSVG;
-      img.onload = () => {
-        ctx.drawImage(img, x, y, width, height);
-        this.imageCache.set(element.value, img);
-      };
+      const laTexLoadPromise = new Promise((resolve, reject) => {
+        const img = new Image();
+        img.src = element.laTexSVG;
+        img.onload = () => {
+          ctx.drawImage(img, x, y, width, height);
+          this.imageCache.set(element.value, img);
+          resolve(element);
+        };
+        img.onerror = (error) => {
+          reject(error);
+        };
+      });
+      this.addImageObserver(laTexLoadPromise);
     }
   }
 }
@@ -3249,7 +3273,9 @@ function formatElementList(elementList, options) {
             const td = tr.tdList[d];
             const tdId = getUUID();
             td.id = tdId;
-            formatElementList(td.value, options);
+            formatElementList(td.value, __spreadProps(__spreadValues({}, options), {
+              isHandleFirstElement: true
+            }));
             for (let v = 0; v < td.value.length; v++) {
               const value = td.value[v];
               value.tdId = tdId;
@@ -4144,8 +4170,7 @@ class CheckboxControl {
     return data2;
   }
   setValue() {
-    const { endIndex } = this.control.getRange();
-    return endIndex;
+    return -1;
   }
   setSelect() {
     const { control } = this.element;
@@ -4260,7 +4285,7 @@ function mousedown(evt, host) {
       curIndex,
       isSubmitHistory: isSetCheckbox,
       isSetCursor: !isDirectHitImage && !isDirectHitCheckbox,
-      isComputeRowList: false
+      isCompute: false
     });
   }
   const previewer = draw.getPreviewer();
@@ -4410,7 +4435,7 @@ function mousemove(evt, host) {
   draw.render({
     isSubmitHistory: false,
     isSetCursor: false,
-    isComputeRowList: false
+    isCompute: false
   });
 }
 const isApple = typeof navigator !== "undefined" && /Mac OS X/.test(navigator.userAgent);
@@ -4488,7 +4513,7 @@ function keydown(evt, host) {
       value: ZERO
     }, restArg);
     let curIndex;
-    if (activeControl) {
+    if (activeControl && !control.isRangInPostfix()) {
       curIndex = control.setValue([enterText]);
     } else {
       if (isCollapsed) {
@@ -4498,8 +4523,10 @@ function keydown(evt, host) {
       }
       curIndex = index2 + 1;
     }
-    rangeManager.setRange(curIndex, curIndex);
-    draw.render({ curIndex });
+    if (~curIndex) {
+      rangeManager.setRange(curIndex, curIndex);
+      draw.render({ curIndex });
+    }
     evt.preventDefault();
   } else if (evt.key === KeyMap.Left) {
     if (isReadonly)
@@ -4530,7 +4557,7 @@ function keydown(evt, host) {
         curIndex: isCollapsed2 ? anchorStartIndex : void 0,
         isSetCursor: isCollapsed2,
         isSubmitHistory: false,
-        isComputeRowList: false
+        isCompute: false
       });
       evt.preventDefault();
     }
@@ -4564,7 +4591,7 @@ function keydown(evt, host) {
         curIndex: isCollapsed2 ? anchorStartIndex : void 0,
         isSetCursor: isCollapsed2,
         isSubmitHistory: false,
-        isComputeRowList: false
+        isCompute: false
       });
       evt.preventDefault();
     }
@@ -4633,7 +4660,7 @@ function keydown(evt, host) {
         curIndex: isCollapsed2 ? anchorStartIndex : void 0,
         isSetCursor: isCollapsed2,
         isSubmitHistory: false,
-        isComputeRowList: false
+        isCompute: false
       });
     }
   } else if (isMod(evt) && evt.key === KeyMap.Z) {
@@ -4675,7 +4702,6 @@ function keydown(evt, host) {
   }
 }
 function input(data2, host) {
-  var _a;
   const draw = host.getDraw();
   const isReadonly = draw.isReadonly();
   if (isReadonly)
@@ -4728,7 +4754,7 @@ function input(data2, host) {
     return newElement;
   });
   let curIndex;
-  if (activeControl && ((_a = elementList[endIndex + 1]) == null ? void 0 : _a.controlId) === element.controlId) {
+  if (activeControl && !control.isRangInPostfix()) {
     curIndex = control.setValue(inputData);
   } else {
     const start = startIndex + 1;
@@ -4740,11 +4766,13 @@ function input(data2, host) {
     }
     curIndex = startIndex + inputData.length;
   }
-  rangeManager.setRange(curIndex, curIndex);
-  draw.render({
-    curIndex,
-    isSubmitHistory: !isComposing
-  });
+  if (~curIndex) {
+    rangeManager.setRange(curIndex, curIndex);
+    draw.render({
+      curIndex,
+      isSubmitHistory: !isComposing
+    });
+  }
   if (isComposing) {
     host.compositionInfo = {
       elementList,
@@ -4869,7 +4897,7 @@ function dblclick(host) {
   draw.render({
     isSubmitHistory: false,
     isSetCursor: false,
-    isComputeRowList: false
+    isCompute: false
   });
 }
 function threeClick(host) {
@@ -4907,7 +4935,7 @@ function threeClick(host) {
   draw.render({
     isSubmitHistory: false,
     isSetCursor: false,
-    isComputeRowList: false
+    isCompute: false
   });
 }
 var click = {
@@ -5064,7 +5092,7 @@ class CanvasEvent {
     this.draw.render({
       isSubmitHistory: false,
       isSetCursor: false,
-      isComputeRowList: false
+      isCompute: false
     });
   }
   mousemove(evt) {
@@ -5285,6 +5313,94 @@ class Position {
   setPositionList(payload) {
     this.positionList = payload;
   }
+  computePageRowPosition(payload) {
+    const { positionList, rowList, pageNo, startX, startY, startIndex, innerWidth } = payload;
+    const { scale, tdPadding } = this.options;
+    let x = startX;
+    let y = startY;
+    let index2 = startIndex;
+    for (let i = 0; i < rowList.length; i++) {
+      const curRow = rowList[i];
+      if (curRow.rowFlex === RowFlex.CENTER) {
+        x += (innerWidth - curRow.width) / 2;
+      } else if (curRow.rowFlex === RowFlex.RIGHT) {
+        x += innerWidth - curRow.width;
+      }
+      const tablePreX = x;
+      const tablePreY = y;
+      for (let j = 0; j < curRow.elementList.length; j++) {
+        const element = curRow.elementList[j];
+        const metrics = element.metrics;
+        const offsetY = element.imgDisplay !== ImageDisplay.INLINE && element.type === ElementType.IMAGE || element.type === ElementType.LATEX ? curRow.ascent - metrics.height : curRow.ascent;
+        const positionItem = {
+          pageNo,
+          index: index2,
+          value: element.value,
+          rowNo: i,
+          metrics,
+          ascent: offsetY,
+          lineHeight: curRow.height,
+          isLastLetter: j === curRow.elementList.length - 1,
+          coordinate: {
+            leftTop: [x, y],
+            leftBottom: [x, y + curRow.height],
+            rightTop: [x + metrics.width, y],
+            rightBottom: [x + metrics.width, y + curRow.height]
+          }
+        };
+        positionList.push(positionItem);
+        index2++;
+        x += metrics.width;
+        if (element.type === ElementType.TABLE) {
+          const tdGap = tdPadding * 2;
+          for (let t = 0; t < element.trList.length; t++) {
+            const tr = element.trList[t];
+            for (let d = 0; d < tr.tdList.length; d++) {
+              const td = tr.tdList[d];
+              td.positionList = [];
+              const drawRowResult = this.computePageRowPosition({
+                positionList: td.positionList,
+                rowList: td.rowList,
+                pageNo,
+                startIndex: 0,
+                startX: (td.x + tdPadding) * scale + tablePreX,
+                startY: td.y * scale + tablePreY,
+                innerWidth: (td.width - tdGap) * scale
+              });
+              x = drawRowResult.x;
+              y = drawRowResult.y;
+            }
+          }
+          x = tablePreX;
+          y = tablePreY;
+        }
+      }
+      x = startX;
+      y += curRow.height;
+    }
+    return { x, y, index: index2 };
+  }
+  computePositionList() {
+    this.positionList = [];
+    const innerWidth = this.draw.getInnerWidth();
+    const pageRowList = this.draw.getPageRowList();
+    const margins = this.draw.getMargins();
+    const startX = margins[3];
+    const startY = margins[0];
+    for (let i = 0; i < pageRowList.length; i++) {
+      const rowList = pageRowList[i];
+      const startIndex = rowList[0].startIndex;
+      this.computePageRowPosition({
+        positionList: this.positionList,
+        rowList,
+        pageNo: i,
+        startIndex,
+        startX,
+        startY,
+        innerWidth
+      });
+    }
+  }
   setCursorPosition(position) {
     this.cursorPosition = position;
   }
@@ -5778,10 +5894,10 @@ class Margin {
     this.draw = draw;
     this.options = draw.getOptions();
   }
-  render(ctx) {
+  render(ctx, pageNo) {
     const { marginIndicatorColor, pageMode } = this.options;
     const width = this.draw.getWidth();
-    const height = pageMode === PageMode.CONTINUITY ? this.draw.getCanvasHeight() : this.draw.getHeight();
+    const height = pageMode === PageMode.CONTINUITY ? this.draw.getCanvasHeight(pageNo) : this.draw.getHeight();
     const margins = this.draw.getMargins();
     const marginIndicatorSize = this.draw.getMarginIndicatorSize();
     ctx.save();
@@ -6036,7 +6152,10 @@ class Search {
       const searchMatchIndexList = this.getSearchNavigateIndexList();
       if (searchMatchIndexList.includes(s)) {
         ctx.fillStyle = searchNavigateMatchColor;
-        this.searchNavigateScrollIntoView(position);
+        const preSearchMatch = this.searchMatchList[s - 1];
+        if (!preSearchMatch || preSearchMatch.groupId !== searchMatch.groupId) {
+          this.searchNavigateScrollIntoView(position);
+        }
       } else {
         ctx.fillStyle = searchMatchColor;
       }
@@ -6162,7 +6281,7 @@ class PageNumber {
   render(ctx, pageNo) {
     const { pageNumberSize, pageNumberFont, scale, pageMode } = this.options;
     const width = this.draw.getWidth();
-    const height = pageMode === PageMode.CONTINUITY ? this.draw.getCanvasHeight() : this.draw.getHeight();
+    const height = pageMode === PageMode.CONTINUITY ? this.draw.getCanvasHeight(pageNo) : this.draw.getHeight();
     const pageNumberBottom = this.draw.getPageNumberBottom();
     ctx.save();
     ctx.fillStyle = "#00000";
@@ -6234,13 +6353,11 @@ var MoveDirection;
 })(MoveDirection || (MoveDirection = {}));
 class SelectionObserver {
   constructor() {
-    __publicField(this, "threshold");
+    __publicField(this, "step", 5);
+    __publicField(this, "thresholdPoints", [70, 40, 10, 20]);
     __publicField(this, "requestAnimationFrameId");
-    __publicField(this, "tippingPoints");
     __publicField(this, "isMousedown");
     __publicField(this, "isMoving");
-    __publicField(this, "clientWidth");
-    __publicField(this, "clientHeight");
     __publicField(this, "_mousedown", () => {
       this.isMousedown = true;
     });
@@ -6252,25 +6369,23 @@ class SelectionObserver {
       if (!this.isMousedown)
         return;
       const { x, y } = evt;
-      if (y < this.tippingPoints[0]) {
+      const clientWidth = document.documentElement.clientWidth;
+      const clientHeight = document.documentElement.clientHeight;
+      if (y < this.thresholdPoints[0]) {
         this._startMove(MoveDirection.UP);
-      } else if (this.clientHeight - y <= this.tippingPoints[1]) {
+      } else if (clientHeight - y <= this.thresholdPoints[1]) {
         this._startMove(MoveDirection.DOWN);
-      } else if (x < this.tippingPoints[2]) {
+      } else if (x < this.thresholdPoints[2]) {
         this._startMove(MoveDirection.LEFT);
-      } else if (this.clientWidth - x < this.tippingPoints[3]) {
+      } else if (clientWidth - x < this.thresholdPoints[3]) {
         this._startMove(MoveDirection.RIGHT);
       } else {
         this._stopMove();
       }
     });
-    this.threshold = 10;
-    this.tippingPoints = [70, 40, 10, 20];
-    this.requestAnimationFrameId = -1;
+    this.requestAnimationFrameId = null;
     this.isMousedown = false;
     this.isMoving = false;
-    this.clientWidth = 0;
-    this.clientHeight = 0;
     this._addEvent();
   }
   _addEvent() {
@@ -6284,34 +6399,31 @@ class SelectionObserver {
     document.removeEventListener("mouseup", this._mouseup);
   }
   _move(direction) {
-    const x = window.screenX;
-    const y = window.screenY;
+    const x = window.scrollX;
+    const y = window.scrollY;
     if (direction === MoveDirection.DOWN) {
-      window.scrollBy(x, y + this.threshold);
+      window.scrollTo(x, y + this.step);
     } else if (direction === MoveDirection.UP) {
-      window.scrollBy(x, y - this.threshold);
+      window.scrollTo(x, y - this.step);
     } else if (direction === MoveDirection.LEFT) {
-      window.scrollBy(x - this.threshold, y);
+      window.scrollTo(x - this.step, y);
     } else {
-      window.scrollBy(x + this.threshold, y);
+      window.scrollTo(x + this.step, y);
     }
     this.requestAnimationFrameId = window.requestAnimationFrame(this._move.bind(this, direction));
   }
   _startMove(direction) {
     if (this.isMoving)
       return;
-    this.clientWidth = document.documentElement.clientWidth;
-    this.clientHeight = document.documentElement.clientHeight;
     this.isMoving = true;
-    this.requestAnimationFrameId = window.requestAnimationFrame(this._move.bind(this, direction));
+    this._move(direction);
   }
   _stopMove() {
-    if (!this.isMoving)
-      return;
-    if (~this.requestAnimationFrameId) {
+    if (this.requestAnimationFrameId) {
       window.cancelAnimationFrame(this.requestAnimationFrameId);
+      this.requestAnimationFrameId = null;
+      this.isMoving = false;
     }
-    this.isMoving = false;
   }
 }
 class TableParticle {
@@ -6918,8 +7030,7 @@ class SelectControl {
     return data2;
   }
   setValue() {
-    const range = this.control.getRange();
-    return range.endIndex;
+    return -1;
   }
   keydown(evt) {
     const elementList = this.control.getElementList();
@@ -7218,6 +7329,16 @@ class Control {
     }
     return false;
   }
+  isRangInPostfix() {
+    if (!this.activeControl)
+      return false;
+    const { startIndex, endIndex } = this.getRange();
+    if (startIndex !== endIndex)
+      return false;
+    const elementList = this.getElementList();
+    const element = elementList[startIndex];
+    return element.controlComponent === ControlComponent.POSTFIX;
+  }
   getContainer() {
     return this.draw.getContainer();
   }
@@ -7386,8 +7507,9 @@ class Control {
     if (nextIndex === elementList.length) {
       rightIndex = nextIndex - 1;
     }
-    if (!~leftIndex || !~rightIndex)
+    if (!~leftIndex && !~rightIndex)
       return startIndex;
+    leftIndex = ~leftIndex ? leftIndex : 0;
     elementList.splice(leftIndex + 1, rightIndex - leftIndex);
     return leftIndex;
   }
@@ -8662,6 +8784,21 @@ class I18n {
     return value;
   }
 }
+class ImageObserver {
+  constructor() {
+    __publicField(this, "promiseList");
+    this.promiseList = [];
+  }
+  add(payload) {
+    this.promiseList.push(payload);
+  }
+  clearAll() {
+    this.promiseList = [];
+  }
+  allSettled() {
+    return Promise.allSettled(this.promiseList);
+  }
+}
 class Draw {
   constructor(rootContainer, options, elementList, listener) {
     __publicField(this, "container");
@@ -8707,11 +8844,14 @@ class Draw {
     __publicField(this, "workerManager");
     __publicField(this, "scrollObserver");
     __publicField(this, "selectionObserver");
+    __publicField(this, "imageObserver");
     __publicField(this, "rowList");
+    __publicField(this, "pageRowList");
     __publicField(this, "painterStyle");
     __publicField(this, "painterOptions");
     __publicField(this, "visiblePageNoList");
     __publicField(this, "intersectionPageNo");
+    __publicField(this, "lazyRenderIntersectionObserver");
     this.container = this._wrapContainer(rootContainer);
     this.pageList = [];
     this.ctxList = [];
@@ -8753,6 +8893,7 @@ class Draw {
     this.control = new Control(this);
     this.scrollObserver = new ScrollObserver(this);
     this.selectionObserver = new SelectionObserver();
+    this.imageObserver = new ImageObserver();
     this.canvasEvent = new CanvasEvent(this);
     this.cursor = new Cursor(this, this.canvasEvent);
     this.canvasEvent.register();
@@ -8760,10 +8901,12 @@ class Draw {
     this.globalEvent.register();
     this.workerManager = new WorkerManager(this);
     this.rowList = [];
+    this.pageRowList = [];
     this.painterStyle = null;
     this.painterOptions = null;
     this.visiblePageNoList = [];
     this.intersectionPageNo = 0;
+    this.lazyRenderIntersectionObserver = null;
     this.render({ isSetCursor: false });
   }
   getMode() {
@@ -8781,12 +8924,12 @@ class Draw {
   getHeight() {
     return Math.floor(this.options.height * this.options.scale);
   }
-  getCanvasWidth() {
-    const page = this.getPage();
+  getCanvasWidth(pageNo = -1) {
+    const page = this.getPage(pageNo);
     return page.width;
   }
-  getCanvasHeight() {
-    const page = this.getPage();
+  getCanvasHeight(pageNo = -1) {
+    const page = this.getPage(pageNo);
     return page.height;
   }
   getInnerWidth() {
@@ -8852,12 +8995,18 @@ class Draw {
   setPageNo(payload) {
     this.pageNo = payload;
   }
-  getPage() {
-    return this.pageList[this.pageNo];
+  getPage(pageNo = -1) {
+    return this.pageList[~pageNo ? pageNo : this.pageNo];
   }
   getPageList() {
     return this.pageList;
   }
+  getRowList() {
+    return this.rowList;
+  }
+  getPageRowList() {
+    return this.pageRowList;
+  }
   getCtx() {
     return this.ctxList[this.pageNo];
   }
@@ -8887,9 +9036,6 @@ class Draw {
   insertElementList(payload) {
     if (!payload.length)
       return;
-    const activeControl = this.control.getActiveControl();
-    if (activeControl)
-      return;
     const isPartRangeInControlOutside = this.control.isPartRangeInControlOutside();
     if (isPartRangeInControlOutside)
       return;
@@ -8900,27 +9046,35 @@ class Draw {
       isHandleFirstElement: false,
       editorOptions: this.options
     });
-    const elementList = this.getElementList();
-    const isCollapsed = startIndex === endIndex;
-    const start = startIndex + 1;
-    if (!isCollapsed) {
-      elementList.splice(start, endIndex - startIndex);
-    }
-    const positionContext = this.position.getPositionContext();
-    for (let i = 0; i < payload.length; i++) {
-      const element = payload[i];
-      if (positionContext.isTable) {
-        element.tdId = positionContext.tdId;
-        element.trId = positionContext.trId;
-        element.tableId = positionContext.tableId;
+    let curIndex = -1;
+    const activeControl = this.control.getActiveControl();
+    if (activeControl && !this.control.isRangInPostfix()) {
+      curIndex = activeControl.setValue(payload);
+    } else {
+      const elementList = this.getElementList();
+      const isCollapsed = startIndex === endIndex;
+      const start = startIndex + 1;
+      if (!isCollapsed) {
+        elementList.splice(start, endIndex - startIndex);
+      }
+      const positionContext = this.position.getPositionContext();
+      for (let i = 0; i < payload.length; i++) {
+        const element = payload[i];
+        if (positionContext.isTable) {
+          element.tdId = positionContext.tdId;
+          element.trId = positionContext.trId;
+          element.tableId = positionContext.tableId;
+        }
+        elementList.splice(start + i, 0, element);
       }
-      elementList.splice(start + i, 0, element);
+      curIndex = startIndex + payload.length;
+    }
+    if (~curIndex) {
+      this.range.setRange(curIndex, curIndex);
+      this.render({
+        curIndex
+      });
     }
-    const curIndex = startIndex + payload.length;
-    this.range.setRange(curIndex, curIndex);
-    this.render({
-      curIndex
-    });
   }
   getOriginalElementList() {
     return this.elementList;
@@ -8955,13 +9109,23 @@ class Draw {
   getWorkerManager() {
     return this.workerManager;
   }
+  getImageObserver() {
+    return this.imageObserver;
+  }
   getI18n() {
     return this.i18n;
   }
   getRowCount() {
     return this.rowList.length;
   }
-  getDataURL() {
+  async getDataURL() {
+    this.render({
+      isLazy: false,
+      isCompute: false,
+      isSetCursor: false,
+      isSubmitHistory: false
+    });
+    await this.imageObserver.allSettled();
     return this.pageList.map((c) => c.toDataURL());
   }
   getPainterStyle() {
@@ -8996,6 +9160,7 @@ class Draw {
       const canvas = this.pageList[0];
       canvas.style.height = `${height}px`;
       canvas.height = height * dpr;
+      this.ctxList[0].scale(dpr, dpr);
     }
     this.render({
       isSubmitHistory: false,
@@ -9126,7 +9291,6 @@ class Draw {
     var _a, _b, _c, _d;
     const { defaultSize, defaultRowMargin, scale, tdPadding, defaultTabWidth } = this.options;
     const defaultBasicRowMarginHeight = this.getDefaultBasicRowMarginHeight();
-    const tdGap = tdPadding * 2;
     const canvas = document.createElement("canvas");
     const ctx = canvas.getContext("2d");
     const rowList = [];
@@ -9136,6 +9300,7 @@ class Draw {
         height: 0,
         ascent: 0,
         elementList: [],
+        startIndex: 0,
         rowFlex: (_a = elementList == null ? void 0 : elementList[1]) == null ? void 0 : _a.rowFlex
       });
     }
@@ -9167,6 +9332,7 @@ class Draw {
         }
         metrics.boundingBoxAscent = 0;
       } else if (element.type === ElementType.TABLE) {
+        const tdGap = tdPadding * 2;
         this.tableParticle.computeRowColInfo(element);
         const trList = element.trList;
         for (let t = 0; t < trList.length; t++) {
@@ -9320,6 +9486,7 @@ class Draw {
         rowList.push({
           width: metrics.width,
           height,
+          startIndex: i,
           elementList: [rowElement],
           ascent,
           rowFlex: (_d = elementList[i + 1]) == null ? void 0 : _d.rowFlex,
@@ -9340,6 +9507,45 @@ class Draw {
     }
     return rowList;
   }
+  _computePageList() {
+    var _a;
+    const pageRowList = [[]];
+    const { pageMode } = this.options;
+    const height = this.getHeight();
+    const margins = this.getMargins();
+    const marginHeight = margins[0] + margins[2];
+    let pageHeight = marginHeight;
+    let pageNo = 0;
+    if (pageMode === PageMode.CONTINUITY) {
+      pageRowList[0] = this.rowList;
+      pageHeight += this.rowList.reduce((pre, cur) => pre + cur.height, 0);
+      const dpr = window.devicePixelRatio;
+      const pageDom = this.pageList[0];
+      const pageDomHeight = Number(pageDom.style.height.replace("px", ""));
+      if (pageHeight > pageDomHeight) {
+        pageDom.style.height = `${pageHeight}px`;
+        pageDom.height = pageHeight * dpr;
+      } else {
+        const reduceHeight = pageHeight < height ? height : pageHeight;
+        pageDom.style.height = `${reduceHeight}px`;
+        pageDom.height = reduceHeight * dpr;
+      }
+      this.ctxList[0].scale(dpr, dpr);
+    } else {
+      for (let i = 0; i < this.rowList.length; i++) {
+        const row = this.rowList[i];
+        if (row.height + pageHeight > height || ((_a = this.rowList[i - 1]) == null ? void 0 : _a.isPageBreak)) {
+          pageHeight = marginHeight + row.height;
+          pageRowList.push([row]);
+          pageNo++;
+        } else {
+          pageHeight += row.height;
+          pageRowList[pageNo].push(row);
+        }
+      }
+    }
+    return pageRowList;
+  }
   _drawRichText(ctx) {
     this.underline.render(ctx);
     this.strikeout.render(ctx);
@@ -9347,22 +9553,12 @@ class Draw {
     this.textParticle.complete();
   }
   _drawRow(ctx, payload) {
-    const { positionList, rowList, pageNo, startX, startY, startIndex, innerWidth } = payload;
+    const { rowList, pageNo, positionList, startIndex } = payload;
     const { scale, tdPadding } = this.options;
     const { isCrossRowCol, tableId } = this.range.getRange();
-    const tdGap = tdPadding * 2;
-    let x = startX;
-    let y = startY;
     let index2 = startIndex;
     for (let i = 0; i < rowList.length; i++) {
       const curRow = rowList[i];
-      if (curRow.rowFlex === RowFlex.CENTER) {
-        x += (innerWidth - curRow.width) / 2;
-      } else if (curRow.rowFlex === RowFlex.RIGHT) {
-        x += innerWidth - curRow.width;
-      }
-      const tablePreX = x;
-      const tablePreY = y;
       const rangeRecord = {
         x: 0,
         y: 0,
@@ -9373,24 +9569,7 @@ class Draw {
       for (let j = 0; j < curRow.elementList.length; j++) {
         const element = curRow.elementList[j];
         const metrics = element.metrics;
-        const offsetY = element.imgDisplay !== ImageDisplay.INLINE && element.type === ElementType.IMAGE || element.type === ElementType.LATEX ? curRow.ascent - metrics.height : curRow.ascent;
-        const positionItem = {
-          pageNo,
-          index: index2,
-          value: element.value,
-          rowNo: i,
-          metrics,
-          ascent: offsetY,
-          lineHeight: curRow.height,
-          isLastLetter: j === curRow.elementList.length - 1,
-          coordinate: {
-            leftTop: [x, y],
-            leftBottom: [x, y + curRow.height],
-            rightTop: [x + metrics.width, y],
-            rightBottom: [x + metrics.width, y + curRow.height]
-          }
-        };
-        positionList.push(positionItem);
+        const { ascent: offsetY, coordinate: { leftTop: [x, y] } } = positionList[curRow.startIndex + j];
         if (element.type === ElementType.IMAGE) {
           this._drawRichText(ctx);
           this.imageParticle.render(ctx, element, x, y + offsetY);
@@ -9479,42 +9658,33 @@ class Draw {
           }
         }
         index2++;
-        x += metrics.width;
         if (element.type === ElementType.TABLE) {
+          const tdGap = tdPadding * 2;
           for (let t = 0; t < element.trList.length; t++) {
             const tr = element.trList[t];
             for (let d = 0; d < tr.tdList.length; d++) {
               const td = tr.tdList[d];
-              td.positionList = [];
-              const drawRowResult = this._drawRow(ctx, {
+              this._drawRow(ctx, {
                 positionList: td.positionList,
                 rowList: td.rowList,
                 pageNo,
                 startIndex: 0,
-                startX: (td.x + tdPadding) * scale + tablePreX,
-                startY: td.y * scale + tablePreY,
                 innerWidth: (td.width - tdGap) * scale
               });
-              x = drawRowResult.x;
-              y = drawRowResult.y;
             }
           }
-          x = tablePreX;
-          y = tablePreY;
         }
       }
       this._drawRichText(ctx);
       if (rangeRecord.width && rangeRecord.height) {
-        const { x: x2, y: y2, width, height } = rangeRecord;
-        this.range.render(ctx, x2, y2, width, height);
+        const { x, y, width, height } = rangeRecord;
+        this.range.render(ctx, x, y, width, height);
       }
       if (isCrossRowCol && tableRangeElement && tableRangeElement.id === tableId) {
+        const { coordinate: { leftTop: [x, y] } } = positionList[curRow.startIndex];
         this.tableParticle.drawRange(ctx, tableRangeElement, x, y);
       }
-      x = startX;
-      y += curRow.height;
     }
-    return { x, y, index: index2 };
   }
   _clearPage(pageNo) {
     const ctx = this.ctxList[pageNo];
@@ -9524,28 +9694,19 @@ class Draw {
   }
   _drawPage(positionList, rowList, pageNo) {
     const { pageMode } = this.options;
-    const margins = this.getMargins();
     const innerWidth = this.getInnerWidth();
     const ctx = this.ctxList[pageNo];
     this._clearPage(pageNo);
     this.background.render(ctx);
-    const leftTopPoint = [margins[3], margins[0]];
-    this.margin.render(ctx);
-    let x = leftTopPoint[0];
-    let y = leftTopPoint[1];
-    let index2 = positionList.length;
-    const drawRowResult = this._drawRow(ctx, {
+    this.margin.render(ctx, pageNo);
+    const index2 = rowList[0].startIndex;
+    this._drawRow(ctx, {
       positionList,
       rowList,
       pageNo,
       startIndex: index2,
-      startX: x,
-      startY: y,
       innerWidth
     });
-    x = drawRowResult.x;
-    y = drawRowResult.y;
-    index2 = drawRowResult.index;
     this.header.render(ctx);
     this.pageNumber.render(ctx, pageNo);
     if (this.search.getSearchKeyword()) {
@@ -9555,76 +9716,68 @@ class Draw {
       this.waterMark.render(ctx);
     }
   }
+  _lazyRender() {
+    var _a;
+    const positionList = this.position.getOriginalPositionList();
+    (_a = this.lazyRenderIntersectionObserver) == null ? void 0 : _a.disconnect();
+    this.lazyRenderIntersectionObserver = new IntersectionObserver((entries) => {
+      entries.forEach((entry) => {
+        if (entry.isIntersecting) {
+          const index2 = Number(entry.target.dataset.index);
+          this._drawPage(positionList, this.pageRowList[index2], index2);
+        }
+      });
+    });
+    this.pageList.forEach((el) => {
+      this.lazyRenderIntersectionObserver.observe(el);
+    });
+  }
+  _immediateRender() {
+    const positionList = this.position.getOriginalPositionList();
+    for (let i = 0; i < this.pageRowList.length; i++) {
+      this._drawPage(positionList, this.pageRowList[i], i);
+    }
+  }
   render(payload) {
-    var _a, _b;
+    var _a;
     const { pageMode } = this.options;
-    const { isSubmitHistory = true, isSetCursor = true, isComputeRowList = true } = payload || {};
+    const { isSubmitHistory = true, isSetCursor = true, isCompute = true, isLazy = true } = payload || {};
     let { curIndex } = payload || {};
-    const height = this.getHeight();
     const innerWidth = this.getInnerWidth();
-    if (isComputeRowList) {
+    if (isCompute) {
       this.rowList = this._computeRowList(innerWidth, this.elementList);
+      this.pageRowList = this._computePageList();
+      this.position.computePositionList();
       const searchKeyword = this.search.getSearchKeyword();
       if (searchKeyword) {
         this.search.compute(searchKeyword);
       }
     }
+    this.imageObserver.clearAll();
     this.cursor.recoveryCursor();
-    this.position.setPositionList([]);
     const positionList = this.position.getOriginalPositionList();
-    const margins = this.getMargins();
-    const marginHeight = margins[0] + margins[2];
-    let pageHeight = marginHeight;
-    let pageNo = 0;
-    const pageRowList = [[]];
-    if (pageMode === PageMode.CONTINUITY) {
-      pageRowList[0] = this.rowList;
-      pageHeight += this.rowList.reduce((pre, cur) => pre + cur.height, 0);
-      const dpr = window.devicePixelRatio;
-      const pageDom = this.pageList[0];
-      const pageDomHeight = Number(pageDom.style.height.replace("px", ""));
-      if (pageHeight > pageDomHeight) {
-        pageDom.style.height = `${pageHeight}px`;
-        pageDom.height = pageHeight * dpr;
-      } else {
-        const reduceHeight = pageHeight < height ? height : pageHeight;
-        pageDom.style.height = `${reduceHeight}px`;
-        pageDom.height = reduceHeight * dpr;
-      }
-    } else {
-      for (let i = 0; i < this.rowList.length; i++) {
-        const row = this.rowList[i];
-        if (row.height + pageHeight > height || ((_a = this.rowList[i - 1]) == null ? void 0 : _a.isPageBreak)) {
-          pageHeight = marginHeight + row.height;
-          pageRowList.push([row]);
-          pageNo++;
-        } else {
-          pageHeight += row.height;
-          pageRowList[pageNo].push(row);
-        }
-      }
-    }
-    for (let i = 0; i < pageRowList.length; i++) {
+    for (let i = 0; i < this.pageRowList.length; i++) {
       if (!this.pageList[i]) {
         this._createPage(i);
       }
-      const rowList = pageRowList[i];
-      this._drawPage(positionList, rowList, i);
     }
-    setTimeout(() => {
-      const curPageCount = pageRowList.length;
-      const prePageCount = this.pageList.length;
-      if (prePageCount > curPageCount) {
-        const deleteCount = prePageCount - curPageCount;
-        this.ctxList.splice(curPageCount, deleteCount);
-        this.pageList.splice(curPageCount, deleteCount).forEach((page) => page.remove());
-      }
-    });
+    const curPageCount = this.pageRowList.length;
+    const prePageCount = this.pageList.length;
+    if (prePageCount > curPageCount) {
+      const deleteCount = prePageCount - curPageCount;
+      this.ctxList.splice(curPageCount, deleteCount);
+      this.pageList.splice(curPageCount, deleteCount).forEach((page) => page.remove());
+    }
+    if (isLazy && pageMode === PageMode.PAGING) {
+      this._lazyRender();
+    } else {
+      this._immediateRender();
+    }
     if (isSetCursor) {
       const positionContext = this.position.getPositionContext();
       if (positionContext.isTable) {
         const { index: index2, trIndex, tdIndex } = positionContext;
-        const tablePositionList = (_b = this.elementList[index2].trList) == null ? void 0 : _b[trIndex].tdList[tdIndex].positionList;
+        const tablePositionList = (_a = this.elementList[index2].trList) == null ? void 0 : _a[trIndex].tdList[tdIndex].positionList;
         if (curIndex === void 0 && tablePositionList) {
           curIndex = tablePositionList.length - 1;
         }
@@ -9642,19 +9795,19 @@ class Draw {
       const self = this;
       const oldElementList = deepClone(this.elementList);
       const { startIndex, endIndex } = this.range.getRange();
-      const pageNo2 = this.pageNo;
+      const pageNo = this.pageNo;
       const oldPositionContext = deepClone(this.position.getPositionContext());
       this.historyManager.execute(function() {
-        self.setPageNo(pageNo2);
+        self.setPageNo(pageNo);
         self.position.setPositionContext(oldPositionContext);
         self.elementList = deepClone(oldElementList);
         self.range.setRange(startIndex, endIndex);
         self.render({ curIndex, isSubmitHistory: false });
       });
     }
-    setTimeout(() => {
+    nextTick(() => {
       if (this.listener.pageSizeChange) {
-        this.listener.pageSizeChange(pageRowList.length);
+        this.listener.pageSizeChange(this.pageRowList.length);
       }
       if (this.listener.contentChange && isSubmitHistory) {
         this.listener.contentChange();
@@ -10148,7 +10301,7 @@ class CommandAdapt {
     const isCollapsed = startIndex === endIndex;
     this.draw.render({
       curIndex: isCollapsed ? startIndex : void 0,
-      isComputeRowList: false,
+      isCompute: false,
       isSubmitHistory: false,
       isSetCursor: isCollapsed
     });
@@ -10370,7 +10523,10 @@ class CommandAdapt {
     selection.forEach((el) => {
       el.color = payload;
     });
-    this.draw.render({ isSetCursor: false });
+    this.draw.render({
+      isSetCursor: false,
+      isCompute: false
+    });
   }
   highlight(payload) {
     const isReadonly = this.draw.isReadonly();
@@ -10382,7 +10538,10 @@ class CommandAdapt {
     selection.forEach((el) => {
       el.highlight = payload;
     });
-    this.draw.render({ isSetCursor: false });
+    this.draw.render({
+      isSetCursor: false,
+      isCompute: false
+    });
   }
   rowFlex(payload) {
     const isReadonly = this.draw.isReadonly();
@@ -11099,7 +11258,7 @@ class CommandAdapt {
     const { endIndex } = this.range.getRange();
     this.draw.render({
       curIndex: endIndex,
-      isComputeRowList: false
+      isCompute: false
     });
   }
   editHyperlink(payload) {
@@ -11116,7 +11275,7 @@ class CommandAdapt {
     const { endIndex } = this.range.getRange();
     this.draw.render({
       curIndex: endIndex,
-      isComputeRowList: false
+      isCompute: false
     });
   }
   separator(payload) {
@@ -11179,7 +11338,8 @@ class CommandAdapt {
     options.watermark.font = payload.font || font;
     this.draw.render({
       isSetCursor: false,
-      isSubmitHistory: false
+      isSubmitHistory: false,
+      isCompute: false
     });
   }
   deleteWatermark() {
@@ -11191,7 +11351,8 @@ class CommandAdapt {
       options.watermark = __spreadValues({}, defaultWatermarkOption);
       this.draw.render({
         isSetCursor: false,
-        isSubmitHistory: false
+        isSubmitHistory: false,
+        isCompute: false
       });
     }
   }
@@ -11236,7 +11397,9 @@ class CommandAdapt {
       return;
     this.draw.render({
       isSetCursor: false,
-      isSubmitHistory: false
+      isSubmitHistory: false,
+      isCompute: false,
+      isLazy: false
     });
   }
   searchNavigateNext() {
@@ -11245,7 +11408,9 @@ class CommandAdapt {
       return;
     this.draw.render({
       isSetCursor: false,
-      isSubmitHistory: false
+      isSubmitHistory: false,
+      isCompute: false,
+      isLazy: false
     });
   }
   getSearchNavigateInfo() {
@@ -11348,12 +11513,13 @@ class CommandAdapt {
       curIndex: firstIndex
     });
   }
-  print() {
+  async print() {
     const { width, height, scale } = this.options;
     if (scale !== 1) {
       this.draw.setPageScale(1);
     }
-    printImageBase64(this.draw.getDataURL(), width, height);
+    const base64List = await this.draw.getDataURL();
+    printImageBase64(base64List, width, height);
     if (scale !== 1) {
       this.draw.setPageScale(scale);
     }