@hufe921/canvas-editor 0.9.89 → 0.9.91

package/dist/canvas-editor.es.js

@@ -23,7 +23,7 @@ var __publicField = (obj, key, value) => {
   return value;
 };
 var index = "";
-const version = "0.9.89";
+const version = "0.9.91";
 var MaxHeightRatio;
 (function(MaxHeightRatio2) {
   MaxHeightRatio2["HALF"] = "half";
@@ -42,6 +42,11 @@ var ImageDisplay;
   ImageDisplay2["FLOAT_TOP"] = "float-top";
   ImageDisplay2["FLOAT_BOTTOM"] = "float-bottom";
 })(ImageDisplay || (ImageDisplay = {}));
+var LocationPosition;
+(function(LocationPosition2) {
+  LocationPosition2["BEFORE"] = "before";
+  LocationPosition2["AFTER"] = "after";
+})(LocationPosition || (LocationPosition = {}));
 const ZERO = "\u200B";
 const WRAP = "\n";
 const NBSP = " ";
@@ -508,8 +513,7 @@ const CONTROL_STYLE_ATTR = [
 const EDITOR_ELEMENT_CONTEXT_ATTR = [
   ...TABLE_CONTEXT_ATTR,
   ...TITLE_CONTEXT_ATTR,
-  ...LIST_CONTEXT_ATTR,
-  ...EDITOR_ROW_ATTR
+  ...LIST_CONTEXT_ATTR
 ];
 const TEXTLIKE_ELEMENT_TYPE = [
   ElementType.TEXT,
@@ -3764,11 +3768,9 @@ function unzipElementList(elementList) {
   return result;
 }
 function formatElementList(elementList, options) {
-  const { isHandleFirstElement, editorOptions } = __spreadValues({
-    isHandleFirstElement: true
-  }, options);
+  const { isHandleFirstElement = true, isForceCompensation = false, editorOptions } = options;
   const startElement = elementList[0];
-  if (isHandleFirstElement && (startElement == null ? void 0 : startElement.type) !== ElementType.LIST && ((startElement == null ? void 0 : startElement.type) && startElement.type !== ElementType.TEXT || !START_LINE_BREAK_REG.test(startElement == null ? void 0 : startElement.value))) {
+  if (isForceCompensation || isHandleFirstElement && (startElement == null ? void 0 : startElement.type) !== ElementType.LIST && ((startElement == null ? void 0 : startElement.type) && startElement.type !== ElementType.TEXT || !START_LINE_BREAK_REG.test(startElement == null ? void 0 : startElement.value))) {
     elementList.unshift({
       value: ZERO
     });
@@ -3780,7 +3782,8 @@ function formatElementList(elementList, options) {
       elementList.splice(i, 1);
       const valueList = el.valueList || [];
       formatElementList(valueList, __spreadProps(__spreadValues({}, options), {
-        isHandleFirstElement: false
+        isHandleFirstElement: false,
+        isForceCompensation: false
       }));
       if (valueList.length) {
         const titleId = getUUID();
@@ -3809,7 +3812,8 @@ function formatElementList(elementList, options) {
       elementList.splice(i, 1);
       const valueList = el.valueList || [];
       formatElementList(valueList, __spreadProps(__spreadValues({}, options), {
-        isHandleFirstElement: true
+        isHandleFirstElement: true,
+        isForceCompensation: false
       }));
       if (valueList.length) {
         const listId = getUUID();
@@ -3843,7 +3847,8 @@ function formatElementList(elementList, options) {
             const tdId = getUUID();
             td.id = tdId;
             formatElementList(td.value, __spreadProps(__spreadValues({}, options), {
-              isHandleFirstElement: true
+              isHandleFirstElement: true,
+              isForceCompensation: true
             }));
             for (let v = 0; v < td.value.length; v++) {
               const value = td.value[v];
@@ -3893,7 +3898,10 @@ function formatElementList(elementList, options) {
       const { editorOptions: { control: controlOption, checkbox: checkboxOption, radio: radioOption } } = options;
       const controlId = getUUID();
       elementList.splice(i, 1);
-      const controlContext = pickObject(el, EDITOR_ELEMENT_CONTEXT_ATTR);
+      const controlContext = pickObject(el, [
+        ...EDITOR_ELEMENT_CONTEXT_ATTR,
+        ...EDITOR_ROW_ATTR
+      ]);
       const controlDefaultStyle = pickObject(el.control, CONTROL_STYLE_ATTR);
       const thePrePostfixArg = __spreadProps(__spreadValues({}, controlDefaultStyle), {
         color: editorOptions.control.bracketColor
@@ -3995,7 +4003,8 @@ function formatElementList(elementList, options) {
             }
           }
           formatElementList(valueList, __spreadProps(__spreadValues({}, options), {
-            isHandleFirstElement: false
+            isHandleFirstElement: false,
+            isForceCompensation: false
           }));
           for (let v = 0; v < valueList.length; v++) {
             const element = valueList[v];
@@ -4048,7 +4057,7 @@ function formatElementList(elementList, options) {
       }
       el = elementList[i];
     }
-    if (el.value === "\n") {
+    if (el.value === "\n" || el.value == "\r\n") {
       el.value = ZERO;
     }
     if (el.type === ElementType.IMAGE || el.type === ElementType.BLOCK) {
@@ -4358,17 +4367,21 @@ function formatElementContext(sourceElementList, formatElementList2, anchorIndex
       isBreakWarped = true;
     }
     if (isBreakWarped || !copyElement.listId && targetElement.type === ElementType.LIST) {
-      const cloneAttr = [...TABLE_CONTEXT_ATTR, ...EDITOR_ROW_ATTR];
-      cloneProperty(cloneAttr, copyElement, targetElement);
+      const cloneAttr2 = [...TABLE_CONTEXT_ATTR, ...EDITOR_ROW_ATTR];
+      cloneProperty(cloneAttr2, copyElement, targetElement);
       (_b = targetElement.valueList) == null ? void 0 : _b.forEach((valueItem) => {
-        cloneProperty(cloneAttr, copyElement, valueItem);
+        cloneProperty(cloneAttr2, copyElement, valueItem);
       });
       continue;
     }
     if ((_c = targetElement.valueList) == null ? void 0 : _c.length) {
       formatElementContext(sourceElementList, targetElement.valueList, anchorIndex);
     }
-    cloneProperty(EDITOR_ELEMENT_CONTEXT_ATTR, copyElement, targetElement);
+    const cloneAttr = [...EDITOR_ELEMENT_CONTEXT_ATTR];
+    if (!getIsBlockElement(targetElement)) {
+      cloneAttr.push(...EDITOR_ROW_ATTR);
+    }
+    cloneProperty(cloneAttr, copyElement, targetElement);
   }
 }
 function convertElementToDom(element, options) {
@@ -5647,7 +5660,40 @@ function setRangeCache(host) {
   host.cachePositionList = position.getPositionList();
   host.cachePositionContext = position.getPositionContext();
 }
+function hitCheckbox(element, draw) {
+  const { checkbox, control } = element;
+  if (!control) {
+    draw.getCheckboxParticle().setSelect(element);
+  } else {
+    const codes = (control == null ? void 0 : control.code) ? control.code.split(",") : [];
+    if (checkbox == null ? void 0 : checkbox.value) {
+      const codeIndex = codes.findIndex((c) => c === checkbox.code);
+      codes.splice(codeIndex, 1);
+    } else {
+      if (checkbox == null ? void 0 : checkbox.code) {
+        codes.push(checkbox.code);
+      }
+    }
+    const activeControl = draw.getControl().getActiveControl();
+    if (activeControl instanceof CheckboxControl) {
+      activeControl.setSelect(codes);
+    }
+  }
+}
+function hitRadio(element, draw) {
+  const { radio, control } = element;
+  if (!control) {
+    draw.getRadioParticle().setSelect(element);
+  } else {
+    const codes = (radio == null ? void 0 : radio.code) ? [radio.code] : [];
+    const activeControl = draw.getControl().getActiveControl();
+    if (activeControl instanceof RadioControl) {
+      activeControl.setSelect(codes);
+    }
+  }
+}
 function mousedown(evt, host) {
+  var _a, _b;
   if (evt.button === MouseEventButton.RIGHT)
     return;
   const draw = host.getDraw();
@@ -5708,37 +5754,22 @@ function mousedown(evt, host) {
     }
     rangeManager.setRange(startIndex, endIndex);
     position.setCursorPosition(positionList[curIndex]);
-    const isSetCheckbox = isDirectHitCheckbox && !isReadonly;
-    const isSetRadio = isDirectHitRadio && !isReadonly;
-    if (isSetCheckbox) {
-      const { checkbox, control } = curElement;
-      if (!control) {
-        draw.getCheckboxParticle().setSelect(curElement);
-      } else {
-        const codes = (control == null ? void 0 : control.code) ? control.code.split(",") : [];
-        if (checkbox == null ? void 0 : checkbox.value) {
-          const codeIndex = codes.findIndex((c) => c === checkbox.code);
-          codes.splice(codeIndex, 1);
-        } else {
-          if (checkbox == null ? void 0 : checkbox.code) {
-            codes.push(checkbox.code);
-          }
-        }
-        const activeControl = draw.getControl().getActiveControl();
-        if (activeControl instanceof CheckboxControl) {
-          activeControl.setSelect(codes);
-        }
-      }
-    } else if (isSetRadio) {
-      const { control, radio } = curElement;
-      if (!control) {
-        draw.getRadioParticle().setSelect(curElement);
-      } else {
-        const codes = (radio == null ? void 0 : radio.code) ? [radio.code] : [];
-        const activeControl = draw.getControl().getActiveControl();
-        if (activeControl instanceof RadioControl) {
-          activeControl.setSelect(codes);
+    if (isDirectHitCheckbox && !isReadonly) {
+      hitCheckbox(curElement, draw);
+    } else if (isDirectHitRadio && !isReadonly) {
+      hitRadio(curElement, draw);
+    } else if (curElement.controlComponent === ControlComponent.VALUE && (((_a = curElement.control) == null ? void 0 : _a.type) === ControlType.CHECKBOX || ((_b = curElement.control) == null ? void 0 : _b.type) === ControlType.RADIO)) {
+      let preIndex = curIndex;
+      while (preIndex > 0) {
+        const preElement = elementList[preIndex];
+        if (preElement.controlComponent === ControlComponent.CHECKBOX) {
+          hitCheckbox(preElement, draw);
+          break;
+        } else if (preElement.controlComponent === ControlComponent.RADIO) {
+          hitRadio(preElement, draw);
+          break;
         }
+        preIndex--;
       }
     } else {
       draw.render({
@@ -6112,13 +6143,13 @@ function backspace(evt, host) {
     }
     const startElement = elementList[startIndex];
     if (isCollapsed && startElement.rowFlex && startElement.value === ZERO) {
-      const rowList = draw.getRowList();
-      const positionList = position.getPositionList();
-      const rowNo = positionList[startIndex].rowNo;
-      const rowFlexElementList = rowList[rowNo].elementList;
-      rowFlexElementList.forEach((element) => {
-        delete element.rowFlex;
-      });
+      const rowFlexElementList = rangeManager.getRangeRowElementList();
+      if (rowFlexElementList) {
+        const preElement = elementList[startIndex - 1];
+        rowFlexElementList.forEach((element) => {
+          element.rowFlex = preElement == null ? void 0 : preElement.rowFlex;
+        });
+      }
     }
     if (!isCollapsed) {
       draw.spliceElementList(elementList, startIndex + 1, endIndex - startIndex);
@@ -8351,7 +8382,8 @@ class RangeManager {
       }
       start--;
     }
-    if (startIndex !== endIndex) {
+    const isCollapsed = startIndex === endIndex;
+    if (!isCollapsed) {
       let middle = startIndex + 1;
       while (middle < endIndex) {
         const { pageNo, rowNo } = positionList[middle];
@@ -8367,6 +8399,9 @@ class RangeManager {
       }
     }
     let end = endIndex;
+    if (isCollapsed && elementList[startIndex].value === ZERO) {
+      end += 1;
+    }
     while (end < positionList.length) {
       const element = elementList[end];
       const nextElement = elementList[end + 1];
@@ -8511,7 +8546,7 @@ class RangeManager {
     this.setRange(range.startIndex, range.endIndex, range.tableId, range.startTdIndex, range.endTdIndex, range.startTrIndex, range.endTrIndex);
   }
   setRangeStyle() {
-    var _a;
+    var _a, _b;
     const rangeStyleChangeListener = this.listener.rangeStyleChange;
     const isSubscribeRangeStyleChange = this.eventBus.isSubscribe("rangeStyleChange");
     if (!rangeStyleChangeListener && !isSubscribeRangeStyleChange)
@@ -8545,7 +8580,7 @@ class RangeManager {
     const color = curElement.color || null;
     const highlight = curElement.highlight || null;
     const rowFlex = curElement.rowFlex || null;
-    const rowMargin = curElement.rowMargin || this.options.defaultRowMargin;
+    const rowMargin = (_a = curElement.rowMargin) != null ? _a : this.options.defaultRowMargin;
     const dashArray = curElement.dashArray || [];
     const level = curElement.level || null;
     const listType = curElement.listType || null;
@@ -8555,7 +8590,7 @@ class RangeManager {
     const undo = this.historyManager.isCanUndo();
     const redo = this.historyManager.isCanRedo();
     const groupIds = curElement.groupIds || null;
-    const extension = (_a = curElement.extension) != null ? _a : null;
+    const extension = (_b = curElement.extension) != null ? _b : null;
     const rangeStyle = {
       type,
       undo,
@@ -12491,7 +12526,8 @@ class Control {
       const elementList = zipElementList(pageComponentData[pageComponentKey]);
       pageComponentData[pageComponentKey] = elementList;
       formatElementList(elementList, {
-        editorOptions: this.options
+        editorOptions: this.options,
+        isForceCompensation: true
       });
     }
     this.draw.setEditorData(pageComponentData);
@@ -12774,6 +12810,12 @@ class Control {
     });
   }
 }
+var VerticalAlign;
+(function(VerticalAlign2) {
+  VerticalAlign2["TOP"] = "top";
+  VerticalAlign2["MIDDLE"] = "middle";
+  VerticalAlign2["BOTTOM"] = "bottom";
+})(VerticalAlign || (VerticalAlign = {}));
 class CheckboxParticle {
   constructor(draw) {
     __publicField(this, "draw");
@@ -12795,9 +12837,32 @@ class CheckboxParticle {
       isSetCursor: false
     });
   }
-  render(ctx, element, x, y) {
-    const { checkbox: { gap, lineWidth, fillStyle, strokeStyle }, scale } = this.options;
-    const { metrics, checkbox } = element;
+  render(payload) {
+    const { ctx, x, index: index2, row } = payload;
+    let { y } = payload;
+    const { checkbox: { gap, lineWidth, fillStyle, strokeStyle, verticalAlign }, scale } = this.options;
+    const { metrics, checkbox } = row.elementList[index2];
+    if (verticalAlign === VerticalAlign.TOP || verticalAlign === VerticalAlign.MIDDLE) {
+      let nextIndex = index2 + 1;
+      let nextElement = null;
+      while (nextIndex < row.elementList.length) {
+        nextElement = row.elementList[nextIndex];
+        if (nextElement.value !== ZERO && nextElement.value !== NBSP)
+          break;
+        nextIndex++;
+      }
+      if (nextElement) {
+        const { metrics: { boundingBoxAscent, boundingBoxDescent } } = nextElement;
+        const textHeight = boundingBoxAscent + boundingBoxDescent;
+        if (textHeight > metrics.height) {
+          if (verticalAlign === VerticalAlign.TOP) {
+            y -= boundingBoxAscent - metrics.height;
+          } else if (verticalAlign === VerticalAlign.MIDDLE) {
+            y -= (textHeight - metrics.height) / 2;
+          }
+        }
+      }
+    }
     const left2 = Math.round(x + gap * scale);
     const top = Math.round(y - metrics.height + lineWidth);
     const width = metrics.width - gap * 2 * scale;
@@ -12850,9 +12915,32 @@ class RadioParticle {
       isSetCursor: false
     });
   }
-  render(ctx, element, x, y) {
-    const { radio: { gap, lineWidth, fillStyle, strokeStyle }, scale } = this.options;
-    const { metrics, radio } = element;
+  render(payload) {
+    const { ctx, x, index: index2, row } = payload;
+    let { y } = payload;
+    const { radio: { gap, lineWidth, fillStyle, strokeStyle, verticalAlign }, scale } = this.options;
+    const { metrics, radio } = row.elementList[index2];
+    if (verticalAlign === VerticalAlign.TOP || verticalAlign === VerticalAlign.MIDDLE) {
+      let nextIndex = index2 + 1;
+      let nextElement = null;
+      while (nextIndex < row.elementList.length) {
+        nextElement = row.elementList[nextIndex];
+        if (nextElement.value !== ZERO && nextElement.value !== NBSP)
+          break;
+        nextIndex++;
+      }
+      if (nextElement) {
+        const { metrics: { boundingBoxAscent, boundingBoxDescent } } = nextElement;
+        const textHeight = boundingBoxAscent + boundingBoxDescent;
+        if (textHeight > metrics.height) {
+          if (verticalAlign === VerticalAlign.TOP) {
+            y -= boundingBoxAscent - metrics.height;
+          } else if (verticalAlign === VerticalAlign.MIDDLE) {
+            y -= (textHeight - metrics.height) / 2;
+          }
+        }
+      }
+    }
     const left2 = Math.round(x + gap * scale);
     const top = Math.round(y - metrics.height + lineWidth);
     const width = metrics.width - gap * 2 * scale;
@@ -14279,7 +14367,15 @@ class ListParticle {
           height: height * scale
         })
       });
-      this.draw.getCheckboxParticle().render(ctx, checkboxRowElement, x - gap * scale, y);
+      this.draw.getCheckboxParticle().render({
+        ctx,
+        x: x - gap * scale,
+        y,
+        index: 0,
+        row: __spreadProps(__spreadValues({}, row), {
+          elementList: [checkboxRowElement, ...row.elementList]
+        })
+      });
     } else {
       let text = "";
       if (startElement.listType === ListType.UL) {
@@ -14397,7 +14493,8 @@ class Placeholder {
       }
     ];
     formatElementList(this.elementList, {
-      editorOptions: this.options
+      editorOptions: this.options,
+      isForceCompensation: true
     });
     this._compute();
     const innerWidth = this.draw.getInnerWidth();
@@ -14640,6 +14737,33 @@ class LineNumber {
     ctx.restore();
   }
 }
+class PageBorder {
+  constructor(draw) {
+    __publicField(this, "draw");
+    __publicField(this, "header");
+    __publicField(this, "footer");
+    __publicField(this, "options");
+    this.draw = draw;
+    this.header = draw.getHeader();
+    this.footer = draw.getFooter();
+    this.options = draw.getOptions();
+  }
+  render(ctx) {
+    const { scale, pageBorder: { color, lineWidth, padding } } = this.options;
+    ctx.save();
+    ctx.translate(0.5, 0.5);
+    ctx.strokeStyle = color;
+    ctx.lineWidth = lineWidth * scale;
+    const margins = this.draw.getMargins();
+    const x = margins[3] - padding[3] * scale;
+    const y = margins[0] + this.header.getExtraHeight() - padding[0] * scale;
+    const width = this.draw.getInnerWidth() + (padding[1] + padding[3]) * scale;
+    const height = this.draw.getHeight() - y - this.footer.getExtraHeight() - margins[2] + padding[2] * scale;
+    ctx.rect(x, y, width, height);
+    ctx.stroke();
+    ctx.restore();
+  }
+}
 class Draw {
   constructor(rootContainer, options, data2, listener, eventBus, override) {
     __publicField(this, "container");
@@ -14693,6 +14817,7 @@ class Draw {
     __publicField(this, "listParticle");
     __publicField(this, "lineBreakParticle");
     __publicField(this, "control");
+    __publicField(this, "pageBorder");
     __publicField(this, "workerManager");
     __publicField(this, "scrollObserver");
     __publicField(this, "selectionObserver");
@@ -14757,6 +14882,7 @@ class Draw {
     this.listParticle = new ListParticle(this);
     this.lineBreakParticle = new LineBreakParticle(this);
     this.control = new Control(this);
+    this.pageBorder = new PageBorder(this);
     this.scrollObserver = new ScrollObserver(this);
     this.selectionObserver = new SelectionObserver(this);
     this.imageObserver = new ImageObserver();
@@ -14813,6 +14939,7 @@ class Draw {
     this.clearSideEffect();
     this.range.clearRange();
     this.mode = payload;
+    this.options.mode = payload;
     this.render({
       isSetCursor: false,
       isSubmitHistory: false
@@ -14886,6 +15013,17 @@ class Draw {
     const margins = this.getOriginalMargins();
     return width - margins[1] - margins[3];
   }
+  getContextInnerWidth() {
+    const positionContext = this.position.getPositionContext();
+    if (positionContext.isTable) {
+      const { index: index2, trIndex, tdIndex } = positionContext;
+      const elementList = this.getOriginalElementList();
+      const td = elementList[index2].trList[trIndex].tdList[tdIndex];
+      const tdPadding = this.getTdPadding();
+      return td.width - tdPadding[1] - tdPadding[3];
+    }
+    return this.getOriginalInnerWidth();
+  }
   getMargins() {
     return this.getOriginalMargins().map((m) => m * this.options.scale);
   }
@@ -15426,7 +15564,8 @@ class Draw {
       if (!data2)
         return;
       formatElementList(data2, {
-        editorOptions: this.options
+        editorOptions: this.options,
+        isForceCompensation: true
       });
     });
     this.setEditorData({
@@ -15510,11 +15649,12 @@ class Draw {
     return el.actualSize || el.size || this.options.defaultSize;
   }
   getElementRowMargin(el) {
+    var _a;
     const { defaultBasicRowMarginHeight, defaultRowMargin, scale } = this.options;
-    return defaultBasicRowMarginHeight * (el.rowMargin || defaultRowMargin) * scale;
+    return defaultBasicRowMarginHeight * ((_a = el.rowMargin) != null ? _a : defaultRowMargin) * scale;
   }
   computeRowList(payload) {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k;
     const { innerWidth, elementList, isPagingMode = false } = payload;
     const { defaultSize, defaultRowMargin, scale, table: { tdPadding }, defaultTabWidth } = this.options;
     const defaultBasicRowMarginHeight = this.getDefaultBasicRowMarginHeight();
@@ -15539,7 +15679,7 @@ class Draw {
     for (let i = 0; i < elementList.length; i++) {
       const curRow = rowList[rowList.length - 1];
       const element = elementList[i];
-      const rowMargin = defaultBasicRowMarginHeight * (element.rowMargin || defaultRowMargin);
+      const rowMargin = defaultBasicRowMarginHeight * ((_c = element.rowMargin) != null ? _c : defaultRowMargin);
       const metrics = {
         width: 0,
         height: 0,
@@ -15592,7 +15732,7 @@ class Draw {
             elementList.splice(i + 1, combineCount);
           }
         }
-        element.pagingIndex = (_c = element.pagingIndex) != null ? _c : 0;
+        element.pagingIndex = (_d = element.pagingIndex) != null ? _d : 0;
         this.tableParticle.computeRowColInfo(element);
         const trList = element.trList;
         for (let t = 0; t < trList.length; t++) {
@@ -15668,7 +15808,7 @@ class Draw {
           let curPagePreHeight = marginHeight;
           for (let r = 0; r < rowList.length; r++) {
             const row = rowList[r];
-            if (row.height + curPagePreHeight > height2 || ((_d = rowList[r - 1]) == null ? void 0 : _d.isPageBreak)) {
+            if (row.height + curPagePreHeight > height2 || ((_e = rowList[r - 1]) == null ? void 0 : _e.isPageBreak)) {
               curPagePreHeight = marginHeight + row.height;
             } else {
               curPagePreHeight += row.height;
@@ -15689,7 +15829,7 @@ class Draw {
                 const trHeight = tr.height * scale;
                 if (curPagePreHeight + rowMarginHeight + preTrHeight + trHeight > height2) {
                   const rowColCount = tr.tdList.reduce((pre, cur) => pre + cur.colspan, 0);
-                  if (((_e = element.colgroup) == null ? void 0 : _e.length) !== rowColCount) {
+                  if (((_f = element.colgroup) == null ? void 0 : _f.length) !== rowColCount) {
                     deleteCount = 0;
                   }
                   break;
@@ -15812,7 +15952,7 @@ class Draw {
         metrics,
         style: this.getElementFont(element, scale)
       });
-      if ((_f = rowElement.control) == null ? void 0 : _f.minWidth) {
+      if ((_g = rowElement.control) == null ? void 0 : _g.minWidth) {
         if (rowElement.controlComponent) {
           controlRealWidth += metrics.width;
         }
@@ -15865,10 +16005,10 @@ class Draw {
           elementList: [rowElement],
           ascent,
           rowIndex: curRow.rowIndex + 1,
-          rowFlex: ((_g = elementList[i]) == null ? void 0 : _g.rowFlex) || ((_h = elementList[i + 1]) == null ? void 0 : _h.rowFlex),
+          rowFlex: ((_h = elementList[i]) == null ? void 0 : _h.rowFlex) || ((_i = elementList[i + 1]) == null ? void 0 : _i.rowFlex),
           isPageBreak: element.type === ElementType.PAGE_BREAK
         };
-        if (rowElement.controlComponent !== ControlComponent.PREFIX && ((_i = rowElement.control) == null ? void 0 : _i.indentation) === ControlIndentation.VALUE_START) {
+        if (rowElement.controlComponent !== ControlComponent.PREFIX && ((_j = rowElement.control) == null ? void 0 : _j.indentation) === ControlIndentation.VALUE_START) {
           const preStartIndex = curRow.elementList.findIndex((el) => el.controlId === rowElement.controlId && el.controlComponent !== ControlComponent.PREFIX);
           if (~preStartIndex) {
             const preRowPositionList = this.position.computeRowPosition({
@@ -15901,7 +16041,7 @@ class Draw {
       if (isForceBreak || isWidthNotEnough || i === elementList.length - 1) {
         curRow.isWidthNotEnough = isWidthNotEnough && !isForceBreak;
         if ((preElement == null ? void 0 : preElement.rowFlex) === RowFlex.JUSTIFY || (preElement == null ? void 0 : preElement.rowFlex) === RowFlex.ALIGNMENT && isWidthNotEnough) {
-          const rowElementList = ((_j = curRow.elementList[0]) == null ? void 0 : _j.value) === ZERO ? curRow.elementList.slice(1) : curRow.elementList;
+          const rowElementList = ((_k = curRow.elementList[0]) == null ? void 0 : _k.value) === ZERO ? curRow.elementList.slice(1) : curRow.elementList;
           const gap = (availableWidth - curRow.width) / (rowElementList.length - 1);
           for (let e = 0; e < rowElementList.length - 1; e++) {
             const el = rowElementList[e];
@@ -16039,10 +16179,22 @@ class Draw {
           }
         } else if (element.type === ElementType.CHECKBOX || element.controlComponent === ControlComponent.CHECKBOX) {
           this.textParticle.complete();
-          this.checkboxParticle.render(ctx, element, x, y + offsetY);
+          this.checkboxParticle.render({
+            ctx,
+            x,
+            y: y + offsetY,
+            index: j,
+            row: curRow
+          });
         } else if (element.type === ElementType.RADIO || element.controlComponent === ControlComponent.RADIO) {
           this.textParticle.complete();
-          this.radioParticle.render(ctx, element, x, y + offsetY);
+          this.radioParticle.render({
+            ctx,
+            x,
+            y: y + offsetY,
+            index: j,
+            row: curRow
+          });
         } else if (element.type === ElementType.TAB) {
           this.textParticle.complete();
         } else if (element.rowFlex === RowFlex.ALIGNMENT || element.rowFlex === RowFlex.JUSTIFY) {
@@ -16175,6 +16327,7 @@ class Draw {
     }
   }
   _drawFloat(ctx, payload) {
+    const { scale } = this.options;
     const floatPositionList = this.position.getFloatPositionList();
     const { imgDisplay, pageNo } = payload;
     for (let e = 0; e < floatPositionList.length; e++) {
@@ -16182,7 +16335,7 @@ class Draw {
       const element = floatPosition.element;
       if ((pageNo === floatPosition.pageNo || floatPosition.zone === EditorZone.HEADER || floatPosition.zone == EditorZone.FOOTER) && element.imgDisplay === imgDisplay && element.type === ElementType.IMAGE) {
         const imgFloatPosition = element.imgFloatPosition;
-        this.imageParticle.render(ctx, element, imgFloatPosition.x, imgFloatPosition.y);
+        this.imageParticle.render(ctx, element, imgFloatPosition.x * scale, imgFloatPosition.y * scale);
       }
     }
   }
@@ -16195,7 +16348,7 @@ class Draw {
   _drawPage(payload) {
     var _a, _b;
     const { elementList, positionList, rowList, pageNo } = payload;
-    const { inactiveAlpha, pageMode, header, footer, pageNumber, lineNumber } = this.options;
+    const { inactiveAlpha, pageMode, header, footer, pageNumber, lineNumber, pageBorder } = this.options;
     const innerWidth = this.getInnerWidth();
     const ctx = this.ctxList[pageNo];
     ctx.globalAlpha = !this.zone.isMainActive() ? inactiveAlpha : 1;
@@ -16246,6 +16399,9 @@ class Draw {
     if (!lineNumber.disabled) {
       this.lineNumber.render(ctx, pageNo);
     }
+    if (!pageBorder.disabled) {
+      this.pageBorder.render(ctx);
+    }
   }
   _disconnectLazyRender() {
     var _a;
@@ -16673,12 +16829,6 @@ const defaultWatermarkOption = {
   size: 200,
   font: "Microsoft YaHei"
 };
-var VerticalAlign;
-(function(VerticalAlign2) {
-  VerticalAlign2["TOP"] = "top";
-  VerticalAlign2["MIDDLE"] = "middle";
-  VerticalAlign2["BOTTOM"] = "bottom";
-})(VerticalAlign || (VerticalAlign = {}));
 const defaultBackground = {
   color: "#FFFFFF",
   image: "",
@@ -16692,7 +16842,8 @@ const defaultCheckboxOption = {
   gap: 5,
   lineWidth: 1,
   fillStyle: "#5175f4",
-  strokeStyle: "#ffffff"
+  strokeStyle: "#ffffff",
+  verticalAlign: VerticalAlign.BOTTOM
 };
 const defaultControlOption = {
   placeholderColor: "#9c9b9b",
@@ -16742,7 +16893,8 @@ const defaultRadioOption = {
   gap: 5,
   lineWidth: 1,
   fillStyle: "#5175f4",
-  strokeStyle: "#000000"
+  strokeStyle: "#000000",
+  verticalAlign: VerticalAlign.BOTTOM
 };
 const defaultSeparatorOption = {
   lineWidth: 1,
@@ -16764,6 +16916,12 @@ const defaultLineNumberOption = {
   right: 20,
   type: LineNumberType.CONTINUITY
 };
+const defaultPageBorderOption = {
+  color: "#000000",
+  lineWidth: 1,
+  padding: [0, 5, 0, 5],
+  disabled: true
+};
 function mergeOption(options = {}) {
   const tableOptions = __spreadValues(__spreadValues({}, defaultTableOption), options.table);
   const headerOptions = __spreadValues(__spreadValues({}, defaultHeaderOption), options.header);
@@ -16783,6 +16941,7 @@ function mergeOption(options = {}) {
   const lineBreakOptions = __spreadValues(__spreadValues({}, defaultLineBreak), options.lineBreak);
   const separatorOptions = __spreadValues(__spreadValues({}, defaultSeparatorOption), options.separator);
   const lineNumberOptions = __spreadValues(__spreadValues({}, defaultLineNumberOption), options.lineNumber);
+  const pageBorderOptions = __spreadValues(__spreadValues({}, defaultPageBorderOption), options.pageBorder);
   return __spreadProps(__spreadValues({
     mode: EditorMode.EDIT,
     defaultType: "TEXT",
@@ -16842,9 +17001,38 @@ function mergeOption(options = {}) {
     background: backgroundOptions,
     lineBreak: lineBreakOptions,
     separator: separatorOptions,
-    lineNumber: lineNumberOptions
+    lineNumber: lineNumberOptions,
+    pageBorder: pageBorderOptions
   });
 }
+function convertPxToPaperSize(width, height) {
+  if (width === 1125 && height === 1593) {
+    return {
+      size: "a3",
+      width: "297mm",
+      height: "420mm"
+    };
+  }
+  if (width === 794 && height === 1123) {
+    return {
+      size: "a4",
+      width: "210mm",
+      height: "297mm"
+    };
+  }
+  if (width === 565 && height === 796) {
+    return {
+      size: "a5",
+      width: "148mm",
+      height: "210mm"
+    };
+  }
+  return {
+    size: "",
+    width: `${width}px`,
+    height: `${height}px`
+  };
+}
 function printImageBase64(base64List, options) {
   const { width, height, direction = PaperDirection.VERTICAL } = options;
   const iframe = document.createElement("iframe");
@@ -16860,10 +17048,11 @@ function printImageBase64(base64List, options) {
   const doc = contentWindow.document;
   doc.open();
   const container = document.createElement("div");
+  const paperSize = convertPxToPaperSize(width, height);
   base64List.forEach((base64) => {
     const image = document.createElement("img");
-    image.style.width = `${width}px`;
-    image.style.height = `${height}px`;
+    image.style.width = direction === PaperDirection.HORIZONTAL ? paperSize.height : paperSize.width;
+    image.style.height = direction === PaperDirection.HORIZONTAL ? paperSize.width : paperSize.height;
     image.src = base64;
     container.append(image);
   });
@@ -16875,7 +17064,7 @@ function printImageBase64(base64List, options) {
   }
   @page {
     margin: 0;
-    size: ${direction === PaperDirection.HORIZONTAL ? `landscape` : `portrait`};
+    size: ${paperSize.size} ${direction === PaperDirection.HORIZONTAL ? `landscape` : `portrait`};
   }`;
   style.append(document.createTextNode(stylesheet));
   setTimeout(() => {
@@ -17509,7 +17698,7 @@ class CommandAdapt {
       const row2 = rowList[rowIndex];
       offsetX = (row2 == null ? void 0 : row2.offsetX) || 0;
     }
-    const innerWidth = this.draw.getOriginalInnerWidth() - offsetX;
+    const innerWidth = this.draw.getContextInnerWidth() - offsetX;
     const colgroup = [];
     const colWidth = innerWidth / col;
     for (let c = 0; c < col; c++) {
@@ -17528,7 +17717,7 @@ class CommandAdapt {
         tdList.push({
           colspan: 1,
           rowspan: 1,
-          value: [{ value: ZERO, size: 16 }]
+          value: []
         });
       }
       trList.push(tr);
@@ -18578,12 +18767,10 @@ class CommandAdapt {
     });
   }
   async print() {
-    const { scale, printPixelRatio, paperDirection } = this.options;
+    const { scale, printPixelRatio, paperDirection, width, height } = this.options;
     if (scale !== 1) {
       this.draw.setPageScale(1);
     }
-    const width = this.draw.getOriginalWidth();
-    const height = this.draw.getOriginalHeight();
     const base64List = await this.draw.getDataURL({
       pixelRatio: printPixelRatio,
       mode: EditorMode.PRINT
@@ -19015,7 +19202,8 @@ class CommandAdapt {
   getControlList() {
     return this.draw.getControl().getList();
   }
-  locationControl(controlId) {
+  locationControl(controlId, options) {
+    const isLocationAfter = (options == null ? void 0 : options.position) === LocationPosition.AFTER;
     function location(elementList, zone2) {
       let i = 0;
       while (i < elementList.length) {
@@ -19046,7 +19234,13 @@ class CommandAdapt {
         }
         if ((element == null ? void 0 : element.controlId) !== controlId)
           continue;
-        const curIndex = i - 1;
+        let curIndex = i - 1;
+        if (isLocationAfter) {
+          curIndex -= 1;
+          if (element.controlComponent !== ControlComponent.PLACEHOLDER && element.controlComponent !== ControlComponent.POSTFIX) {
+            continue;
+          }
+        }
         return {
           zone: zone2,
           range: {
@@ -20340,7 +20534,8 @@ class Editor {
     ];
     pageComponentData.forEach((elementList) => {
       formatElementList(elementList, {
-        editorOptions
+        editorOptions,
+        isForceCompensation: true
       });
     });
     this.listener = new Listener();
@@ -20368,5 +20563,5 @@ class Editor {
     this.use = plugin.use.bind(plugin);
   }
 }
-export { BackgroundRepeat, BackgroundSize, BlockType, Command, ControlIndentation, ControlType, EDITOR_COMPONENT, Editor, EditorComponent, EditorMode, EditorZone, ElementType, INTERNAL_CONTEXT_MENU_KEY, ImageDisplay, KeyMap, LETTER_CLASS, LineNumberType, ListStyle, ListType, MaxHeightRatio, NumberType, PageMode, PaperDirection, RenderMode, RowFlex, TableBorder, TdBorder, TdSlash, TextDecorationStyle, TitleLevel, VerticalAlign, WordBreak, Editor as default, splitText };
+export { BackgroundRepeat, BackgroundSize, BlockType, Command, ControlIndentation, ControlType, EDITOR_COMPONENT, Editor, EditorComponent, EditorMode, EditorZone, ElementType, INTERNAL_CONTEXT_MENU_KEY, ImageDisplay, KeyMap, LETTER_CLASS, LineNumberType, ListStyle, ListType, LocationPosition, MaxHeightRatio, NumberType, PageMode, PaperDirection, RenderMode, RowFlex, TableBorder, TdBorder, TdSlash, TextDecorationStyle, TitleLevel, VerticalAlign, WordBreak, Editor as default, splitText };
 //# sourceMappingURL=canvas-editor.es.js.map