@hufe921/canvas-editor 0.9.98 → 0.9.100

package/dist/canvas-editor.es.js

@@ -23,7 +23,7 @@ var __publicField = (obj, key, value) => {
   return value;
 };
 var index = "";
-const version = "0.9.98";
+const version = "0.9.100";
 var MaxHeightRatio;
 (function(MaxHeightRatio2) {
   MaxHeightRatio2["HALF"] = "half";
@@ -48,6 +48,11 @@ var LocationPosition;
   LocationPosition2["BEFORE"] = "before";
   LocationPosition2["AFTER"] = "after";
 })(LocationPosition || (LocationPosition = {}));
+var FlexDirection;
+(function(FlexDirection2) {
+  FlexDirection2["ROW"] = "row";
+  FlexDirection2["COLUMN"] = "column";
+})(FlexDirection || (FlexDirection = {}));
 const ZERO = "\u200B";
 const WRAP = "\n";
 const NBSP = " ";
@@ -407,6 +412,9 @@ var MoveDirection;
   MoveDirection2["LEFT"] = "left";
   MoveDirection2["RIGHT"] = "right";
 })(MoveDirection || (MoveDirection = {}));
+const isApple = typeof navigator !== "undefined" && /Mac OS X/.test(navigator.userAgent);
+const isIOS = typeof navigator !== "undefined" && /iPad|iPhone/.test(navigator.userAgent);
+const isMobile = /Mobile|Android|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
 var ElementType;
 (function(ElementType2) {
   ElementType2["TEXT"] = "text";
@@ -647,8 +655,8 @@ class ImageParticle {
     const { scale } = this.options;
     const width = element.width * scale;
     const height = element.height * scale;
-    if (this.imageCache.has(element.id)) {
-      const img = this.imageCache.get(element.id);
+    if (this.imageCache.has(element.value)) {
+      const img = this.imageCache.get(element.value);
       ctx.drawImage(img, x, y, width, height);
     } else {
       const imageLoadPromise = new Promise((resolve, reject) => {
@@ -656,7 +664,7 @@ class ImageParticle {
         img.setAttribute("crossOrigin", "Anonymous");
         img.src = element.value;
         img.onload = () => {
-          this.imageCache.set(element.id, img);
+          this.imageCache.set(element.value, img);
           resolve(element);
           if (element.imgDisplay === ImageDisplay.FLOAT_BOTTOM) {
             this.draw.render({
@@ -672,7 +680,7 @@ class ImageParticle {
           const fallbackImage = this.getFallbackImage(width, height);
           fallbackImage.onload = () => {
             ctx.drawImage(fallbackImage, x, y, width, height);
-            this.imageCache.set(element.id, fallbackImage);
+            this.imageCache.set(element.value, fallbackImage);
           };
           reject(error);
         };
@@ -3771,6 +3779,7 @@ var ControlType;
   ControlType2["CHECKBOX"] = "checkbox";
   ControlType2["RADIO"] = "radio";
   ControlType2["DATE"] = "date";
+  ControlType2["NUMBER"] = "number";
 })(ControlType || (ControlType = {}));
 var ControlComponent;
 (function(ControlComponent2) {
@@ -3990,6 +3999,10 @@ var RenderMode;
   RenderMode2["SPEED"] = "speed";
   RenderMode2["COMPATIBILITY"] = "compatibility";
 })(RenderMode || (RenderMode = {}));
+const defaultBadgeOption = {
+  top: 0,
+  left: 5
+};
 function mergeOption(options = {}) {
   const tableOptions = __spreadValues(__spreadValues({}, defaultTableOption), options.table);
   const headerOptions = __spreadValues(__spreadValues({}, defaultHeaderOption), options.header);
@@ -4010,6 +4023,7 @@ function mergeOption(options = {}) {
   const separatorOptions = __spreadValues(__spreadValues({}, defaultSeparatorOption), options.separator);
   const lineNumberOptions = __spreadValues(__spreadValues({}, defaultLineNumberOption), options.lineNumber);
   const pageBorderOptions = __spreadValues(__spreadValues({}, defaultPageBorderOption), options.pageBorder);
+  const badgeOptions = __spreadValues(__spreadValues({}, defaultBadgeOption), options.badge);
   return __spreadProps(__spreadValues({
     mode: EditorMode.EDIT,
     defaultType: "TEXT",
@@ -4070,7 +4084,8 @@ function mergeOption(options = {}) {
     lineBreak: lineBreakOptions,
     separator: separatorOptions,
     lineNumber: lineNumberOptions,
-    pageBorder: pageBorderOptions
+    pageBorder: pageBorderOptions,
+    badge: badgeOptions
   });
 }
 function unzipElementList(elementList) {
@@ -4179,13 +4194,13 @@ function formatElementList(elementList, options) {
       }
       i--;
     } else if (el.type === ElementType.TABLE) {
-      const tableId = getUUID();
+      const tableId = el.id || getUUID();
       el.id = tableId;
       if (el.trList) {
         const { defaultTrMinHeight } = editorOptions.table;
         for (let t = 0; t < el.trList.length; t++) {
           const tr = el.trList[t];
-          const trId = getUUID();
+          const trId = tr.id || getUUID();
           tr.id = trId;
           if (!tr.minHeight || tr.minHeight < defaultTrMinHeight) {
             tr.minHeight = defaultTrMinHeight;
@@ -4195,7 +4210,7 @@ function formatElementList(elementList, options) {
           }
           for (let d = 0; d < tr.tdList.length; d++) {
             const td = tr.tdList[d];
-            const tdId = getUUID();
+            const tdId = td.id || getUUID();
             td.id = tdId;
             formatElementList(td.value, __spreadProps(__spreadValues({}, options), {
               isHandleFirstElement: true,
@@ -4440,14 +4455,14 @@ function formatElementList(elementList, options) {
       el.value = ZERO;
     }
     if (el.type === ElementType.IMAGE || el.type === ElementType.BLOCK) {
-      el.id = getUUID();
+      el.id = el.id || getUUID();
     }
     if (el.type === ElementType.LATEX) {
       const { svg, width, height } = LaTexParticle.convertLaTextToSVG(el.value);
       el.width = el.width || width;
       el.height = el.height || height;
       el.laTexSVG = svg;
-      el.id = getUUID();
+      el.id = el.id || getUUID();
     }
     i++;
   }
@@ -5735,6 +5750,8 @@ class Cursor {
     }
   }
   focus() {
+    if (isMobile && this.draw.isReadonly())
+      return;
     const agentCursorDom = this.cursorAgent.getAgentCursorDom();
     if (document.activeElement !== agentCursorDom) {
       agentCursorDom.focus();
@@ -5833,8 +5850,6 @@ var MouseEventButton;
   MouseEventButton2[MouseEventButton2["CENTER"] = 1] = "CENTER";
   MouseEventButton2[MouseEventButton2["RIGHT"] = 2] = "RIGHT";
 })(MouseEventButton || (MouseEventButton = {}));
-const isApple = typeof navigator !== "undefined" && /Mac OS X/.test(navigator.userAgent);
-const isIOS = typeof navigator !== "undefined" && /iPad|iPhone/.test(navigator.userAgent);
 function isMod(evt) {
   return isApple ? evt.metaKey : evt.ctrlKey;
 }
@@ -7379,7 +7394,7 @@ function keydown(evt, host) {
   }
 }
 function input(data2, host) {
-  var _a;
+  var _a, _b;
   const draw = host.getDraw();
   if (draw.isReadonly() || draw.isDisabled())
     return;
@@ -7393,6 +7408,7 @@ function input(data2, host) {
   const rangeManager = draw.getRange();
   if (!rangeManager.getIsCanInput())
     return;
+  const defaultStyle = rangeManager.getDefaultStyle() || ((_b = host.compositionInfo) == null ? void 0 : _b.defaultStyle) || null;
   removeComposingInput(host);
   if (!isComposing) {
     const cursor = draw.getCursor();
@@ -7408,11 +7424,11 @@ function input(data2, host) {
     return;
   const isDesignMode = draw.isDesignMode();
   const inputData = splitText(text).map((value) => {
-    var _a2, _b;
+    var _a2, _b2;
     const newElement = {
       value
     };
-    if (isDesignMode || !((_a2 = copyElement.title) == null ? void 0 : _a2.disabled) && !((_b = copyElement.control) == null ? void 0 : _b.disabled)) {
+    if (isDesignMode || !((_a2 = copyElement.title) == null ? void 0 : _a2.disabled) && !((_b2 = copyElement.control) == null ? void 0 : _b2.disabled)) {
       const nextElement = elementList[endIndex + 1];
       if (!copyElement.type || copyElement.type === TEXT || copyElement.type === HYPERLINK && (nextElement == null ? void 0 : nextElement.type) === HYPERLINK || copyElement.type === DATE && (nextElement == null ? void 0 : nextElement.type) === DATE || copyElement.type === SUBSCRIPT && (nextElement == null ? void 0 : nextElement.type) === SUBSCRIPT || copyElement.type === SUPERSCRIPT && (nextElement == null ? void 0 : nextElement.type) === SUPERSCRIPT) {
         EDITOR_ELEMENT_COPY_ATTR.forEach((attr) => {
@@ -7424,6 +7440,14 @@ function input(data2, host) {
           }
         });
       }
+      if (defaultStyle) {
+        EDITOR_ELEMENT_STYLE_ATTR.forEach((attr) => {
+          const value2 = defaultStyle[attr];
+          if (value2 !== void 0) {
+            newElement[attr] = value2;
+          }
+        });
+      }
       if (isComposing) {
         newElement.underline = true;
       }
@@ -7457,7 +7481,8 @@ function input(data2, host) {
       elementList,
       value: text,
       startIndex: curIndex - inputData.length,
-      endIndex: curIndex
+      endIndex: curIndex,
+      defaultStyle
     };
   }
 }
@@ -7821,7 +7846,8 @@ function dragover(evt, host) {
   cursor.drawCursor({
     width: dragWidth,
     color: dragColor,
-    isBlink: false
+    isBlink: false,
+    isFocus: false
   });
 }
 var drag = {
@@ -10546,10 +10572,12 @@ class TableTool {
     if (!isTable)
       return;
     this.dispose();
-    const { scale } = this.options;
     const elementList = this.draw.getOriginalElementList();
     const positionList = this.position.getOriginalPositionList();
     const element = elementList[index2];
+    if (element.tableToolDisabled && !this.draw.isDesignMode())
+      return;
+    const { scale } = this.options;
     const position = positionList[index2];
     const { colgroup, trList } = element;
     const { coordinate: { leftTop } } = position;
@@ -12574,6 +12602,8 @@ class DateControl {
     this.destroy();
   }
 }
+class NumberControl extends TextControl {
+}
 class Control {
   constructor(draw) {
     __publicField(this, "controlBorder");
@@ -12781,9 +12811,32 @@ class Control {
   getActiveControl() {
     return this.activeControl;
   }
+  getControlElementList(context = {}) {
+    const elementList = context.elementList || this.getElementList();
+    const { startIndex } = context.range || this.getRange();
+    const startElement = elementList[startIndex];
+    const data2 = [];
+    let preIndex = startIndex;
+    while (preIndex > 0) {
+      const preElement = elementList[preIndex];
+      if (preElement.controlId !== startElement.controlId)
+        break;
+      data2.unshift(preElement);
+      preIndex--;
+    }
+    let nextIndex = startIndex + 1;
+    while (nextIndex < elementList.length) {
+      const nextElement = elementList[nextIndex];
+      if (nextElement.controlId !== startElement.controlId)
+        break;
+      data2.push(nextElement);
+      nextIndex++;
+    }
+    return data2;
+  }
   updateActiveControlValue() {
     if (this.activeControl) {
-      this.activeControlValue = this.activeControl.getValue();
+      this.activeControlValue = this.getControlElementList();
     }
   }
   initControl() {
@@ -12824,6 +12877,8 @@ class Control {
       const dateControl = new DateControl(element, this);
       this.activeControl = dateControl;
       dateControl.awake();
+    } else if (control.type === ControlType.NUMBER) {
+      this.activeControl = new NumberControl(element, this);
     }
     this.updateActiveControlValue();
     const isSubscribeControlChange = this.eventBus.isSubscribe("controlChange");
@@ -13125,13 +13180,13 @@ class Control {
           const nextElement = elementList[j];
           if (nextElement.controlId !== element.controlId)
             break;
-          if ((type === ControlType.TEXT || type === ControlType.DATE) && nextElement.controlComponent === ControlComponent.VALUE) {
+          if ((type === ControlType.TEXT || type === ControlType.DATE || type === ControlType.NUMBER) && nextElement.controlComponent === ControlComponent.VALUE) {
             textControlValue += nextElement.value;
             textControlElementList.push(omitObject(nextElement, CONTROL_CONTEXT_ATTR));
           }
           j++;
         }
-        if (type === ControlType.TEXT || type === ControlType.DATE) {
+        if (type === ControlType.TEXT || type === ControlType.DATE || type === ControlType.NUMBER) {
           result.push(__spreadProps(__spreadValues({}, element.control), {
             zone: zone2,
             value: textControlValue || null,
@@ -13261,6 +13316,19 @@ class Control {
           } else {
             date.clearSelect(controlContext, controlRule);
           }
+        } else if (type === ControlType.NUMBER) {
+          const formatValue = Array.isArray(value) ? value : [{ value }];
+          formatElementList(formatValue, {
+            isHandleFirstElement: false,
+            editorOptions: this.options
+          });
+          const text = new NumberControl(element, this);
+          this.activeControl = text;
+          if (value) {
+            text.setValue(formatValue, controlContext, controlRule);
+          } else {
+            text.clearValue(controlContext, controlRule);
+          }
         }
         this.activeControl = null;
         let newEndIndex = i;
@@ -16180,6 +16248,7 @@ class TableOperate {
     }
     const mergeTdIdList = [];
     const anchorTd = rowCol[0][0];
+    const anchorElement = anchorTd.value[0];
     for (let t = 0; t < rowCol.length; t++) {
       const tr = rowCol[t];
       for (let d = 0; d < tr.length; d++) {
@@ -16187,6 +16256,11 @@ class TableOperate {
         const isAnchorTd = t === 0 && d === 0;
         if (!isAnchorTd) {
           mergeTdIdList.push(td.id);
+          for (let d2 = 0; d2 < td.value.length; d2++) {
+            const tdElement = td.value[d2];
+            cloneProperty(TABLE_CONTEXT_ATTR, anchorElement, tdElement);
+            anchorTd.value.push(tdElement);
+          }
         }
         if (t === 0 && d !== 0) {
           anchorTd.colspan += td.colspan;
@@ -16456,6 +16530,9 @@ class Area {
     this.range = draw.getRange();
     this.position = draw.getPosition();
   }
+  getAreaInfo() {
+    return this.areaInfoMap;
+  }
   getActiveAreaId() {
     if (!this.areaInfoMap.size)
       return null;
@@ -16610,6 +16687,72 @@ class Area {
     });
   }
 }
+class Badge {
+  constructor(draw) {
+    __publicField(this, "draw");
+    __publicField(this, "options");
+    __publicField(this, "imageCache");
+    __publicField(this, "mainBadge");
+    __publicField(this, "areaBadgeMap");
+    this.draw = draw;
+    this.options = draw.getOptions();
+    this.imageCache = new Map();
+    this.mainBadge = null;
+    this.areaBadgeMap = new Map();
+  }
+  setMainBadge(payload) {
+    this.mainBadge = payload;
+  }
+  setAreaBadgeMap(payload) {
+    this.areaBadgeMap.clear();
+    payload.forEach((areaBadge) => {
+      this.areaBadgeMap.set(areaBadge.areaId, areaBadge.badge);
+    });
+  }
+  _drawImage(ctx, x, y, width, height, value) {
+    if (this.imageCache.has(value)) {
+      const img = this.imageCache.get(value);
+      ctx.drawImage(img, x, y, width, height);
+    } else {
+      const img = new Image();
+      img.setAttribute("crossOrigin", "Anonymous");
+      img.src = value;
+      img.onload = () => {
+        this.imageCache.set(value, img);
+        ctx.drawImage(img, x, y, width, height);
+      };
+    }
+  }
+  render(ctx, pageNo) {
+    if (pageNo === 0 && this.mainBadge) {
+      const { scale, badge } = this.options;
+      const { left: left2, top, width, height, value } = this.mainBadge;
+      const headerTop = this.draw.getMargins()[0] + this.draw.getHeader().getExtraHeight();
+      const x = (left2 || badge.left) * scale;
+      const y = (top || badge.top) * scale + headerTop;
+      this._drawImage(ctx, x, y, width * scale, height * scale, value);
+    }
+    if (this.areaBadgeMap.size) {
+      const areaInfo = this.draw.getArea().getAreaInfo();
+      if (areaInfo.size) {
+        const { scale, badge } = this.options;
+        for (const areaItem of areaInfo) {
+          const { positionList } = areaItem[1];
+          const firstPosition = positionList[0];
+          if (firstPosition.pageNo !== pageNo)
+            continue;
+          const badgeItem = this.areaBadgeMap.get(areaItem[0]);
+          if (!badgeItem)
+            continue;
+          const { left: left2, top, width, height, value } = badgeItem;
+          const x = (left2 || badge.left) * scale;
+          const y = (top || badge.top) * scale + firstPosition.coordinate.leftTop[1];
+          this._drawImage(ctx, x, y, width * scale, height * scale, value);
+        }
+      }
+    }
+  }
+}
 class Draw {
   constructor(rootContainer, options, data2, listener, eventBus, override) {
     __publicField(this, "container");
@@ -16633,6 +16776,7 @@ class Draw {
     __publicField(this, "range");
     __publicField(this, "margin");
     __publicField(this, "background");
+    __publicField(this, "badge");
     __publicField(this, "search");
     __publicField(this, "group");
     __publicField(this, "area");
@@ -16701,6 +16845,7 @@ class Draw {
     this.range = new RangeManager(this);
     this.margin = new Margin(this);
     this.background = new Background(this);
+    this.badge = new Badge(this);
     this.search = new Search(this);
     this.group = new Group(this);
     this.area = new Area(this);
@@ -16996,6 +17141,9 @@ class Draw {
   getArea() {
     return this.area;
   }
+  getBadge() {
+    return this.badge;
+  }
   getHistoryManager() {
     return this.historyManager;
   }
@@ -17535,7 +17683,7 @@ class Draw {
     return defaultBasicRowMarginHeight * ((_a = el.rowMargin) != null ? _a : defaultRowMargin) * scale;
   }
   computeRowList(payload) {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p;
     const { innerWidth, elementList, isPagingMode = false, isFromTable = false, startX = 0, startY = 0, pageHeight = 0, mainOuterHeight = 0, surroundElementList = [] } = payload;
     const { defaultSize, defaultRowMargin, scale, table: { tdPadding, defaultTrMinHeight }, defaultTabWidth } = this.options;
     const defaultBasicRowMarginHeight = this.getDefaultBasicRowMarginHeight();
@@ -17913,7 +18061,7 @@ class Draw {
       x = surroundPosition.x;
       curRowWidth += surroundPosition.rowIncreaseWidth;
       x += metrics.width;
-      const isForceBreak = element.type === ElementType.SEPARATOR || element.type === ElementType.TABLE || (preElement == null ? void 0 : preElement.type) === ElementType.TABLE || (preElement == null ? void 0 : preElement.type) === ElementType.BLOCK || element.type === ElementType.BLOCK || (preElement == null ? void 0 : preElement.imgDisplay) === ImageDisplay.INLINE || element.imgDisplay === ImageDisplay.INLINE || (preElement == null ? void 0 : preElement.listId) !== element.listId || (preElement == null ? void 0 : preElement.areaId) !== element.areaId || i !== 0 && element.value === ZERO;
+      const isForceBreak = element.type === ElementType.SEPARATOR || element.type === ElementType.TABLE || (preElement == null ? void 0 : preElement.type) === ElementType.TABLE || (preElement == null ? void 0 : preElement.type) === ElementType.BLOCK || element.type === ElementType.BLOCK || (preElement == null ? void 0 : preElement.imgDisplay) === ImageDisplay.INLINE || element.imgDisplay === ImageDisplay.INLINE || (preElement == null ? void 0 : preElement.listId) !== element.listId || (preElement == null ? void 0 : preElement.areaId) !== element.areaId || ((_i = element.control) == null ? void 0 : _i.flexDirection) === FlexDirection.COLUMN && (element.controlComponent === ControlComponent.CHECKBOX || element.controlComponent === ControlComponent.RADIO) && (preElement == null ? void 0 : preElement.controlComponent) === ControlComponent.VALUE || i !== 0 && element.value === ZERO;
       const isWidthNotEnough = curRowWidth > availableWidth;
       const isWrap = isForceBreak || isWidthNotEnough;
       if (isWrap) {
@@ -17924,10 +18072,10 @@ class Draw {
           elementList: [rowElement],
           ascent,
           rowIndex: curRow.rowIndex + 1,
-          rowFlex: ((_i = elementList[i]) == null ? void 0 : _i.rowFlex) || ((_j = elementList[i + 1]) == null ? void 0 : _j.rowFlex),
+          rowFlex: ((_j = elementList[i]) == null ? void 0 : _j.rowFlex) || ((_k = elementList[i + 1]) == null ? void 0 : _k.rowFlex),
           isPageBreak: element.type === ElementType.PAGE_BREAK
         };
-        if (rowElement.controlComponent !== ControlComponent.PREFIX && ((_k = rowElement.control) == null ? void 0 : _k.indentation) === ControlIndentation.VALUE_START) {
+        if (rowElement.controlComponent !== ControlComponent.PREFIX && ((_l = rowElement.control) == null ? void 0 : _l.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({
@@ -17945,11 +18093,11 @@ class Draw {
           row.offsetX = listStyleMap.get(element.listId);
           row.listIndex = listIndex;
         }
-        row.offsetY = !isFromTable && ((_l = element.area) == null ? void 0 : _l.top) && element.areaId !== ((_m = elementList[i - 1]) == null ? void 0 : _m.areaId) ? element.area.top * scale : 0;
+        row.offsetY = !isFromTable && ((_m = element.area) == null ? void 0 : _m.top) && element.areaId !== ((_n = elementList[i - 1]) == null ? void 0 : _n.areaId) ? element.area.top * scale : 0;
         rowList.push(row);
       } else {
         curRow.width += metrics.width;
-        if (i === 0 && (getIsBlockElement(elementList[1]) || !!((_n = elementList[1]) == null ? void 0 : _n.areaId))) {
+        if (i === 0 && (getIsBlockElement(elementList[1]) || !!((_o = elementList[1]) == null ? void 0 : _o.areaId))) {
           curRow.height = defaultBasicRowMarginHeight;
           curRow.ascent = defaultBasicRowMarginHeight;
         } else if (curRow.height < height) {
@@ -17961,7 +18109,7 @@ class Draw {
       if (isWrap || i === elementList.length - 1) {
         curRow.isWidthNotEnough = isWidthNotEnough && !isForceBreak;
         if (!curRow.isSurround && ((preElement == null ? void 0 : preElement.rowFlex) === RowFlex.JUSTIFY || (preElement == null ? void 0 : preElement.rowFlex) === RowFlex.ALIGNMENT && curRow.isWidthNotEnough)) {
-          const rowElementList = ((_o = curRow.elementList[0]) == null ? void 0 : _o.value) === ZERO ? curRow.elementList.slice(1) : curRow.elementList;
+          const rowElementList = ((_p = curRow.elementList[0]) == null ? void 0 : _p.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];
@@ -18309,6 +18457,9 @@ class Draw {
     if (!isPrintMode) {
       this.area.render(ctx, pageNo);
     }
+    if (pageMode !== PageMode.CONTINUITY && this.options.watermark.data) {
+      this.waterMark.render(ctx);
+    }
     if (!isPrintMode) {
       this.margin.render(ctx, pageNo);
     }
@@ -18347,9 +18498,6 @@ class Draw {
     if (!isPrintMode && this.search.getSearchKeyword()) {
       this.search.render(ctx, pageNo);
     }
-    if (pageMode !== PageMode.CONTINUITY && this.options.watermark.data) {
-      this.waterMark.render(ctx);
-    }
     if (this.elementList.length <= 1 && !((_b = this.elementList[0]) == null ? void 0 : _b.listId)) {
       this.placeholder.render(ctx);
     }
@@ -18359,6 +18507,7 @@ class Draw {
     if (!pageBorder.disabled) {
       this.pageBorder.render(ctx);
     }
+    this.badge.render(ctx, pageNo);
   }
   _disconnectLazyRender() {
     var _a;
@@ -18641,6 +18790,8 @@ class Command {
     __publicField(this, "executePaperSize");
     __publicField(this, "executePaperDirection");
     __publicField(this, "executeSetPaperMargin");
+    __publicField(this, "executeSetMainBadge");
+    __publicField(this, "executeSetAreaBadge");
     __publicField(this, "executeInsertElementList");
     __publicField(this, "executeInsertArea");
     __publicField(this, "executeSetAreaProperties");
@@ -18765,6 +18916,8 @@ class Command {
     this.executePaperSize = adapt.paperSize.bind(adapt);
     this.executePaperDirection = adapt.paperDirection.bind(adapt);
     this.executeSetPaperMargin = adapt.setPaperMargin.bind(adapt);
+    this.executeSetMainBadge = adapt.setMainBadge.bind(adapt);
+    this.executeSetAreaBadge = adapt.setAreaBadge.bind(adapt);
     this.getAreaValue = adapt.getAreaValue.bind(adapt);
     this.executeInsertArea = adapt.insertArea.bind(adapt);
     this.executeSetAreaProperties = adapt.setAreaProperties.bind(adapt);
@@ -20079,7 +20232,6 @@ class CommandAdapt {
     const element = elementList[startIndex];
     if (!element || element.type !== ElementType.IMAGE)
       return;
-    element.id = getUUID();
     element.value = payload;
     this.draw.render({
       isSetCursor: false
@@ -20338,6 +20490,20 @@ class CommandAdapt {
   setPaperMargin(payload) {
     return this.draw.setPaperMargin(payload);
   }
+  setMainBadge(payload) {
+    this.draw.getBadge().setMainBadge(payload);
+    this.draw.render({
+      isCompute: false,
+      isSubmitHistory: false
+    });
+  }
+  setAreaBadge(payload) {
+    this.draw.getBadge().setAreaBadgeMap(payload);
+    this.draw.render({
+      isCompute: false,
+      isSubmitHistory: false
+    });
+  }
   insertElementList(payload) {
     if (!payload.length)
       return;
@@ -20365,35 +20531,51 @@ class CommandAdapt {
     const { id, conceptId } = payload;
     if (!id && !conceptId)
       return;
-    function getElementIndexById(elementList) {
-      for (let e = 0; e < elementList.length; e++) {
-        const element = elementList[e];
-        if (id && element.id === id || conceptId && element.conceptId === conceptId) {
-          return e;
+    const updateElementInfoList = [];
+    function getElementInfoById(elementList) {
+      let i = 0;
+      while (i < elementList.length) {
+        const element = elementList[i];
+        i++;
+        if (element.type === ElementType.TABLE) {
+          const trList = element.trList;
+          for (let r = 0; r < trList.length; r++) {
+            const tr = trList[r];
+            for (let d = 0; d < tr.tdList.length; d++) {
+              const td = tr.tdList[d];
+              getElementInfoById(td.value);
+            }
+          }
+        }
+        if (id && (element.id === id || element.controlId === id) || conceptId && element.conceptId === conceptId) {
+          updateElementInfoList.push({
+            elementList,
+            index: i - 1
+          });
         }
       }
-      return -1;
     }
-    const getElementListFnList = [
-      this.draw.getOriginalMainElementList,
-      this.draw.getHeaderElementList,
-      this.draw.getFooterElementList
+    const data2 = [
+      this.draw.getOriginalMainElementList(),
+      this.draw.getHeaderElementList(),
+      this.draw.getFooterElementList()
     ];
-    for (const getElementList of getElementListFnList) {
-      const elementList = getElementList.call(this.draw);
-      const elementIndex = getElementIndexById(elementList);
-      if (~elementIndex) {
-        elementList[elementIndex] = __spreadValues(__spreadValues({}, elementList[elementIndex]), payload.properties);
-        formatElementList(zipElementList([elementList[elementIndex]]), {
-          isHandleFirstElement: false,
-          editorOptions: this.options
-        });
-        this.draw.render({
-          isSetCursor: false
-        });
-        break;
-      }
+    for (const elementList of data2) {
+      getElementInfoById(elementList);
+    }
+    if (!updateElementInfoList.length)
+      return;
+    for (let i = 0; i < updateElementInfoList.length; i++) {
+      const { elementList, index: index2 } = updateElementInfoList[i];
+      elementList[index2] = __spreadValues(__spreadValues({}, elementList[index2]), payload.properties);
+      formatElementList(zipElementList([elementList[index2]]), {
+        isHandleFirstElement: false,
+        editorOptions: this.options
+      });
     }
+    this.draw.render({
+      isSetCursor: false
+    });
   }
   getElementById(payload) {
     const { id, conceptId } = payload;
@@ -20405,7 +20587,17 @@ class CommandAdapt {
       while (i < elementList.length) {
         const element = elementList[i];
         i++;
-        if (id && element.controlId !== id || conceptId && element.conceptId !== conceptId) {
+        if (element.type === ElementType.TABLE) {
+          const trList = element.trList;
+          for (let r = 0; r < trList.length; r++) {
+            const tr = trList[r];
+            for (let d = 0; d < tr.tdList.length; d++) {
+              const td = tr.tdList[d];
+              getElement(td.value);
+            }
+          }
+        }
+        if (id && element.controlId !== id && element.id !== id || conceptId && element.conceptId !== conceptId) {
           continue;
         }
         result.push(element);
@@ -20426,22 +20618,62 @@ class CommandAdapt {
   setValue(payload, options) {
     this.draw.setValue(payload, options);
   }
-  removeControl() {
-    const { startIndex, endIndex } = this.range.getRange();
-    if (startIndex !== endIndex)
-      return;
-    const elementList = this.draw.getElementList();
-    const element = elementList[startIndex];
-    if (!element.controlId)
-      return;
-    const control = this.draw.getControl();
-    const newIndex = control.removeControl(startIndex);
-    if (newIndex === null)
-      return;
-    this.range.setRange(newIndex, newIndex);
-    this.draw.render({
-      curIndex: newIndex
-    });
+  removeControl(payload) {
+    if ((payload == null ? void 0 : payload.id) || (payload == null ? void 0 : payload.conceptId)) {
+      const { id, conceptId } = payload;
+      let isExistRemove = false;
+      const remove = (elementList) => {
+        let i = elementList.length - 1;
+        while (i >= 0) {
+          const element = elementList[i];
+          if (element.type === ElementType.TABLE) {
+            const trList = element.trList;
+            for (let r = 0; r < trList.length; r++) {
+              const tr = trList[r];
+              for (let d = 0; d < tr.tdList.length; d++) {
+                const td = tr.tdList[d];
+                remove(td.value);
+              }
+            }
+          }
+          i--;
+          if (!element.control || id && element.controlId !== id || conceptId && element.control.conceptId !== conceptId) {
+            continue;
+          }
+          isExistRemove = true;
+          elementList.splice(i + 1, 1);
+        }
+      };
+      const data2 = [
+        this.draw.getHeaderElementList(),
+        this.draw.getOriginalMainElementList(),
+        this.draw.getFooterElementList()
+      ];
+      for (const elementList of data2) {
+        remove(elementList);
+      }
+      if (isExistRemove) {
+        this.draw.render({
+          isSetCursor: false
+        });
+      }
+    } else {
+      const { startIndex, endIndex } = this.range.getRange();
+      if (startIndex !== endIndex)
+        return;
+      const elementList = this.draw.getElementList();
+      const element = elementList[startIndex];
+      if (!element.controlId)
+        return;
+      const control = this.draw.getControl();
+      const newIndex = control.removeControl(startIndex);
+      if (newIndex === null)
+        return;
+      this.range.setRange(newIndex, newIndex);
+      this.draw.render({
+        curIndex: newIndex
+      });
+    }
   }
   setLocale(payload) {
     this.i18n.setLocale(payload);
@@ -20454,7 +20686,7 @@ class CommandAdapt {
   }
   locationCatalog(titleId) {
     var _a;
-    const elementList = this.draw.getMainElementList();
+    const elementList = this.draw.getOriginalMainElementList();
     let newIndex = -1;
     for (let e = 0; e < elementList.length; e++) {
       const element = elementList[e];
@@ -20465,6 +20697,9 @@ class CommandAdapt {
     }
     if (!~newIndex)
       return;
+    this.position.setPositionContext({
+      isTable: false
+    });
     this.range.setRange(newIndex, newIndex);
     this.draw.render({
       curIndex: newIndex,
@@ -21996,5 +22231,5 @@ class Editor {
     this.use = plugin.use.bind(plugin);
   }
 }
-export { AreaMode, BackgroundRepeat, BackgroundSize, BlockType, Command, ControlIndentation, ControlState, ControlType, EDITOR_CLIPBOARD, 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, createDomFromElementList, Editor as default, getElementListByHTML, getTextFromElementList, splitText };
+export { AreaMode, BackgroundRepeat, BackgroundSize, BlockType, Command, ControlIndentation, ControlState, ControlType, EDITOR_CLIPBOARD, EDITOR_COMPONENT, Editor, EditorComponent, EditorMode, EditorZone, ElementType, FlexDirection, 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, createDomFromElementList, Editor as default, getElementListByHTML, getTextFromElementList, splitText };
 //# sourceMappingURL=canvas-editor.es.js.map