@hufe921/canvas-editor 0.9.16 → 0.9.18

package/dist/canvas-editor.es.js

@@ -23,7 +23,7 @@ var __publicField = (obj, key, value) => {
   return value;
 };
 var index = "";
-const version = "0.9.16";
+const version = "0.9.18";
 const ZERO = "\u200B";
 const WRAP = "\n";
 var RowFlex;
@@ -130,7 +130,18 @@ function mergeObject(source, target) {
   }
   return target;
 }
+function nextTick(fn) {
+  setTimeout(() => {
+    fn();
+  }, 0);
+}
 const CURSOR_AGENT_HEIGHT = 12;
+const defaultCursorOption = {
+  width: 1,
+  color: "#000000",
+  dragWidth: 2,
+  dragColor: "#0000FF"
+};
 const EDITOR_COMPONENT = "editor-component";
 const EDITOR_PREFIX = "ce";
 var ElementType;
@@ -229,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;
@@ -242,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);
     }
   }
 }
@@ -3195,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);
     }
   }
 }
@@ -3961,12 +3991,12 @@ class Cursor {
   clearAgentDomValue() {
     return this.getAgentDom().value = "";
   }
-  drawCursor() {
-    const isReadonly = this.draw.isReadonly();
+  drawCursor(payload) {
     const cursorPosition = this.position.getCursorPosition();
     if (!cursorPosition)
       return;
-    const { scale } = this.options;
+    const { scale, cursor } = this.options;
+    const { color, width, isBlink = true } = __spreadValues(__spreadValues({}, cursor), payload);
     const height = this.draw.getHeight();
     const pageGap = this.draw.getPageGap();
     const { metrics, coordinate: { leftTop, rightTop }, ascent, pageNo } = cursorPosition;
@@ -3983,13 +4013,21 @@ class Cursor {
     const cursorLeft = rightTop[0];
     agentCursorDom.style.left = `${cursorLeft}px`;
     agentCursorDom.style.top = `${cursorTop + cursorHeight - CURSOR_AGENT_HEIGHT * scale}px`;
+    const isReadonly = this.draw.isReadonly();
+    this.cursorDom.style.width = `${width}px`;
+    this.cursorDom.style.backgroundColor = color;
     this.cursorDom.style.left = `${cursorLeft}px`;
     this.cursorDom.style.top = `${cursorTop}px`;
     this.cursorDom.style.display = isReadonly ? "none" : "block";
     this.cursorDom.style.height = `${cursorHeight}px`;
-    setTimeout(() => {
-      this.cursorDom.classList.add(`${EDITOR_PREFIX}-cursor--animation`);
-    }, 200);
+    const animationClassName = `${EDITOR_PREFIX}-cursor--animation`;
+    if (isBlink) {
+      setTimeout(() => {
+        this.cursorDom.classList.add(animationClassName);
+      }, 200);
+    } else {
+      this.cursorDom.classList.remove(animationClassName);
+    }
   }
   recoveryCursor() {
     this.cursorDom.style.display = "none";
@@ -4246,7 +4284,7 @@ function mousedown(evt, host) {
       curIndex,
       isSubmitHistory: isSetCheckbox,
       isSetCursor: !isDirectHitImage && !isDirectHitCheckbox,
-      isComputeRowList: false
+      isCompute: false
     });
   }
   const previewer = draw.getPreviewer();
@@ -4396,7 +4434,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);
@@ -4516,7 +4554,7 @@ function keydown(evt, host) {
         curIndex: isCollapsed2 ? anchorStartIndex : void 0,
         isSetCursor: isCollapsed2,
         isSubmitHistory: false,
-        isComputeRowList: false
+        isCompute: false
       });
       evt.preventDefault();
     }
@@ -4550,7 +4588,7 @@ function keydown(evt, host) {
         curIndex: isCollapsed2 ? anchorStartIndex : void 0,
         isSetCursor: isCollapsed2,
         isSubmitHistory: false,
-        isComputeRowList: false
+        isCompute: false
       });
       evt.preventDefault();
     }
@@ -4619,7 +4657,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) {
@@ -4674,7 +4712,8 @@ function input(data2, host) {
   if (control.isPartRangeInControlOutside()) {
     return;
   }
-  if (!host.isComposing) {
+  const isComposing = host.isComposing;
+  if (!isComposing) {
     const cursor = draw.getCursor();
     cursor.clearAgentDomValue();
   } else {
@@ -4707,7 +4746,7 @@ function input(data2, host) {
         }
       });
     }
-    if (host.isComposing) {
+    if (isComposing) {
       newElement.underline = true;
     }
     return newElement;
@@ -4727,9 +4766,10 @@ function input(data2, host) {
   }
   rangeManager.setRange(curIndex, curIndex);
   draw.render({
-    curIndex
+    curIndex,
+    isSubmitHistory: !isComposing
   });
-  if (host.isComposing) {
+  if (isComposing) {
     host.compositionInfo = {
       elementList,
       value: text,
@@ -4853,7 +4893,7 @@ function dblclick(host) {
   draw.render({
     isSubmitHistory: false,
     isSetCursor: false,
-    isComputeRowList: false
+    isCompute: false
   });
 }
 function threeClick(host) {
@@ -4891,7 +4931,7 @@ function threeClick(host) {
   draw.render({
     isSubmitHistory: false,
     isSetCursor: false,
-    isComputeRowList: false
+    isCompute: false
   });
 }
 var click = {
@@ -4952,7 +4992,12 @@ function dragover(evt, host) {
     position.setCursorPosition(positionList[curIndex]);
   }
   const cursor = draw.getCursor();
-  cursor.drawCursor();
+  const { cursor: { dragColor, dragWidth } } = draw.getOptions();
+  cursor.drawCursor({
+    width: dragWidth,
+    color: dragColor,
+    isBlink: false
+  });
 }
 var drag = {
   dragover
@@ -5043,7 +5088,7 @@ class CanvasEvent {
     this.draw.render({
       isSubmitHistory: false,
       isSetCursor: false,
-      isComputeRowList: false
+      isCompute: false
     });
   }
   mousemove(evt) {
@@ -5264,6 +5309,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;
   }
@@ -6015,7 +6148,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;
       }
@@ -6153,46 +6289,12 @@ class PageNumber {
 class ScrollObserver {
   constructor(draw) {
     __publicField(this, "draw");
-    __publicField(this, "options");
-    __publicField(this, "pageContainer");
-    __publicField(this, "pageHeight");
     __publicField(this, "_observer", debounce(() => {
-      const rect = this.pageContainer.getBoundingClientRect();
-      const top = Math.abs(rect.top);
-      const bottom = top + window.innerHeight;
-      const pageList = this.draw.getPageList();
-      const visiblePageNoList = [];
-      let intersectionPageNo = 0;
-      let intersectionMaxHeight = 0;
-      for (let i = 0; i < pageList.length; i++) {
-        const curTop = i * this.pageHeight;
-        const curBottom = (i + 1) * this.pageHeight;
-        if (curTop > bottom)
-          break;
-        if (curBottom < top)
-          continue;
-        let intersectionHeight = 0;
-        if (curTop < top && curBottom < bottom) {
-          intersectionHeight = curBottom - top;
-        } else if (curTop > top && curBottom > bottom) {
-          intersectionHeight = bottom - curTop;
-        } else {
-          intersectionHeight = rect.height;
-        }
-        if (intersectionHeight > intersectionMaxHeight) {
-          intersectionMaxHeight = intersectionHeight;
-          intersectionPageNo = i;
-        }
-        visiblePageNoList.push(i);
-      }
+      const { intersectionPageNo, visiblePageNoList } = this.getPageVisibleInfo();
       this.draw.setIntersectionPageNo(intersectionPageNo);
       this.draw.setVisiblePageNoList(visiblePageNoList);
     }, 150));
     this.draw = draw;
-    this.options = draw.getOptions();
-    this.pageContainer = draw.getPageContainer();
-    const { height, pageGap } = this.options;
-    this.pageHeight = height + pageGap;
     setTimeout(() => {
       if (!window.scrollY) {
         this._observer();
@@ -6206,6 +6308,37 @@ class ScrollObserver {
   removeEvent() {
     document.removeEventListener("scroll", this._observer);
   }
+  getElementVisibleInfo(element) {
+    const rect = element.getBoundingClientRect();
+    const viewHeight = Math.max(document.documentElement.clientHeight, window.innerHeight);
+    const visibleHeight = Math.min(rect.bottom, viewHeight) - Math.max(rect.top, 0);
+    return {
+      intersectionHeight: visibleHeight > 0 ? visibleHeight : 0
+    };
+  }
+  getPageVisibleInfo() {
+    const pageList = this.draw.getPageList();
+    const visiblePageNoList = [];
+    let intersectionPageNo = 0;
+    let intersectionMaxHeight = 0;
+    for (let i = 0; i < pageList.length; i++) {
+      const curPage = pageList[i];
+      const { intersectionHeight } = this.getElementVisibleInfo(curPage);
+      if (intersectionMaxHeight && !intersectionHeight)
+        break;
+      if (intersectionHeight) {
+        visiblePageNoList.push(i);
+      }
+      if (intersectionHeight > intersectionMaxHeight) {
+        intersectionMaxHeight = intersectionHeight;
+        intersectionPageNo = i;
+      }
+    }
+    return {
+      intersectionPageNo,
+      visiblePageNoList
+    };
+  }
 }
 var MoveDirection;
 (function(MoveDirection2) {
@@ -6216,13 +6349,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;
     });
@@ -6234,25 +6365,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() {
@@ -6266,34 +6395,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 {
@@ -7368,8 +7494,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;
   }
@@ -8644,6 +8771,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");
@@ -8689,11 +8831,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 = [];
@@ -8735,6 +8880,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();
@@ -8742,10 +8888,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() {
@@ -8840,6 +8988,12 @@ class Draw {
   getPageList() {
     return this.pageList;
   }
+  getRowList() {
+    return this.rowList;
+  }
+  getPageRowList() {
+    return this.pageRowList;
+  }
   getCtx() {
     return this.ctxList[this.pageNo];
   }
@@ -8870,8 +9024,11 @@ class Draw {
     if (!payload.length)
       return;
     const activeControl = this.control.getActiveControl();
-    if (activeControl)
-      return;
+    if (activeControl) {
+      const element = activeControl.getElement();
+      if (element.controlComponent !== ControlComponent.POSTFIX)
+        return;
+    }
     const isPartRangeInControlOutside = this.control.isPartRangeInControlOutside();
     if (isPartRangeInControlOutside)
       return;
@@ -8937,13 +9094,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() {
@@ -9108,7 +9275,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 = [];
@@ -9118,6 +9284,7 @@ class Draw {
         height: 0,
         ascent: 0,
         elementList: [],
+        startIndex: 0,
         rowFlex: (_a = elementList == null ? void 0 : elementList[1]) == null ? void 0 : _a.rowFlex
       });
     }
@@ -9149,6 +9316,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++) {
@@ -9302,6 +9470,7 @@ class Draw {
         rowList.push({
           width: metrics.width,
           height,
+          startIndex: i,
           elementList: [rowElement],
           ascent,
           rowFlex: (_d = elementList[i + 1]) == null ? void 0 : _d.rowFlex,
@@ -9322,6 +9491,44 @@ 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;
+      }
+    } 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);
@@ -9329,22 +9536,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,
@@ -9355,24 +9552,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);
@@ -9461,42 +9641,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];
@@ -9506,28 +9677,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, {
+    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()) {
@@ -9537,76 +9699,67 @@ 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;
-    const { pageMode } = this.options;
-    const { isSubmitHistory = true, isSetCursor = true, isComputeRowList = true } = payload || {};
+    var _a;
+    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) {
+      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;
         }
@@ -9624,19 +9777,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();
@@ -10130,7 +10283,7 @@ class CommandAdapt {
     const isCollapsed = startIndex === endIndex;
     this.draw.render({
       curIndex: isCollapsed ? startIndex : void 0,
-      isComputeRowList: false,
+      isCompute: false,
       isSubmitHistory: false,
       isSetCursor: isCollapsed
     });
@@ -10352,7 +10505,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();
@@ -10364,7 +10520,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();
@@ -11081,7 +11240,7 @@ class CommandAdapt {
     const { endIndex } = this.range.getRange();
     this.draw.render({
       curIndex: endIndex,
-      isComputeRowList: false
+      isCompute: false
     });
   }
   editHyperlink(payload) {
@@ -11098,7 +11257,7 @@ class CommandAdapt {
     const { endIndex } = this.range.getRange();
     this.draw.render({
       curIndex: endIndex,
-      isComputeRowList: false
+      isCompute: false
     });
   }
   separator(payload) {
@@ -11161,7 +11320,8 @@ class CommandAdapt {
     options.watermark.font = payload.font || font;
     this.draw.render({
       isSetCursor: false,
-      isSubmitHistory: false
+      isSubmitHistory: false,
+      isCompute: false
     });
   }
   deleteWatermark() {
@@ -11173,7 +11333,8 @@ class CommandAdapt {
       options.watermark = __spreadValues({}, defaultWatermarkOption);
       this.draw.render({
         isSetCursor: false,
-        isSubmitHistory: false
+        isSubmitHistory: false,
+        isCompute: false
       });
     }
   }
@@ -11218,7 +11379,9 @@ class CommandAdapt {
       return;
     this.draw.render({
       isSetCursor: false,
-      isSubmitHistory: false
+      isSubmitHistory: false,
+      isCompute: false,
+      isLazy: false
     });
   }
   searchNavigateNext() {
@@ -11227,7 +11390,9 @@ class CommandAdapt {
       return;
     this.draw.render({
       isSetCursor: false,
-      isSubmitHistory: false
+      isSubmitHistory: false,
+      isCompute: false,
+      isLazy: false
     });
   }
   getSearchNavigateInfo() {
@@ -11330,12 +11495,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);
     }
@@ -12118,6 +12284,7 @@ class Editor {
     const waterMarkOptions = __spreadValues(__spreadValues({}, defaultWatermarkOption), options.watermark);
     const controlOptions = __spreadValues(__spreadValues({}, defaultControlOption), options.control);
     const checkboxOptions = __spreadValues(__spreadValues({}, defaultCheckboxOption), options.checkbox);
+    const cursorOptions = __spreadValues(__spreadValues({}, defaultCursorOption), options.cursor);
     const editorOptions = __spreadProps(__spreadValues({
       mode: EditorMode.EDIT,
       defaultType: "TEXT",
@@ -12156,7 +12323,8 @@ class Editor {
       header: headerOptions,
       watermark: waterMarkOptions,
       control: controlOptions,
-      checkbox: checkboxOptions
+      checkbox: checkboxOptions,
+      cursor: cursorOptions
     });
     formatElementList(elementList, {
       editorOptions