@hufe921/canvas-editor 0.9.18 → 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.18";
+const version = "0.9.19";
 const ZERO = "\u200B";
 const WRAP = "\n";
 var RowFlex;
@@ -3273,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;
@@ -4168,8 +4170,7 @@ class CheckboxControl {
     return data2;
   }
   setValue() {
-    const { endIndex } = this.control.getRange();
-    return endIndex;
+    return -1;
   }
   setSelect() {
     const { control } = this.element;
@@ -4512,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) {
@@ -4522,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)
@@ -4699,7 +4702,6 @@ function keydown(evt, host) {
   }
 }
 function input(data2, host) {
-  var _a;
   const draw = host.getDraw();
   const isReadonly = draw.isReadonly();
   if (isReadonly)
@@ -4752,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;
@@ -4764,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,
@@ -5890,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();
@@ -6277,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";
@@ -7026,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();
@@ -7326,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();
   }
@@ -8911,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() {
@@ -8982,8 +8995,8 @@ 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;
@@ -9023,12 +9036,6 @@ class Draw {
   insertElementList(payload) {
     if (!payload.length)
       return;
-    const activeControl = this.control.getActiveControl();
-    if (activeControl) {
-      const element = activeControl.getElement();
-      if (element.controlComponent !== ControlComponent.POSTFIX)
-        return;
-    }
     const isPartRangeInControlOutside = this.control.isPartRangeInControlOutside();
     if (isPartRangeInControlOutside)
       return;
@@ -9039,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;
@@ -9145,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,
@@ -9514,6 +9530,7 @@ class Draw {
         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];
@@ -9681,7 +9698,7 @@ class Draw {
     const ctx = this.ctxList[pageNo];
     this._clearPage(pageNo);
     this.background.render(ctx);
-    this.margin.render(ctx);
+    this.margin.render(ctx, pageNo);
     const index2 = rowList[0].startIndex;
     this._drawRow(ctx, {
       positionList,
@@ -9723,6 +9740,7 @@ class Draw {
   }
   render(payload) {
     var _a;
+    const { pageMode } = this.options;
     const { isSubmitHistory = true, isSetCursor = true, isCompute = true, isLazy = true } = payload || {};
     let { curIndex } = payload || {};
     const innerWidth = this.getInnerWidth();
@@ -9750,7 +9768,7 @@ class Draw {
       this.ctxList.splice(curPageCount, deleteCount);
       this.pageList.splice(curPageCount, deleteCount).forEach((page) => page.remove());
     }
-    if (isLazy) {
+    if (isLazy && pageMode === PageMode.PAGING) {
       this._lazyRender();
     } else {
       this._immediateRender();