@hufe921/canvas-editor 0.9.98 → 0.9.99

package/CHANGELOG.md

@@ -1,3 +1,29 @@
+## [0.9.99](https://github.com/Hufe921/canvas-editor/compare/v0.9.98...v0.9.99) (2024-12-20)
+
+
+### Bug Fixes
+
+* locate catalog when the context is within the table ([012dc7d](https://github.com/Hufe921/canvas-editor/commit/012dc7debcce4366c8e094cbc2af1a7892227ad2))
+* optimize image caching method #933 ([8516931](https://github.com/Hufe921/canvas-editor/commit/85169313bd8f51feb9f442cb32b774dcbc580e96)), closes [#933](https://github.com/Hufe921/canvas-editor/issues/933)
+* verify control integrity boundary error #920 ([77a2550](https://github.com/Hufe921/canvas-editor/commit/77a25504bc40caaf20390944f286748bdf113e39)), closes [#920](https://github.com/Hufe921/canvas-editor/issues/920)
+
+
+### Chores
+
+* rename some particles ([b5d18d3](https://github.com/Hufe921/canvas-editor/commit/b5d18d3a59f89a701758af160fc889e49ba1f5c6))
+
+
+### Features
+
+* add badge option #918 ([190785a](https://github.com/Hufe921/canvas-editor/commit/190785ac69f6187d10abb070eab32a523e394b34)), closes [#918](https://github.com/Hufe921/canvas-editor/issues/918)
+* add control flex direction option #652 ([c599d56](https://github.com/Hufe921/canvas-editor/commit/c599d563b631f29a6bea6fe94624afa05c6879ef)), closes [#652](https://github.com/Hufe921/canvas-editor/issues/652)
+* add number control #925 ([aff4979](https://github.com/Hufe921/canvas-editor/commit/aff49797da3f7e966b9f692269468ccb792af309)), closes [#925](https://github.com/Hufe921/canvas-editor/issues/925)
+* delete control by id or conceptId #905 ([5d434bd](https://github.com/Hufe921/canvas-editor/commit/5d434bd7d3dce31f761a0e1f6c81dfa7a80bb03e)), closes [#905](https://github.com/Hufe921/canvas-editor/issues/905)
+* element id support customization ([c79be3a](https://github.com/Hufe921/canvas-editor/commit/c79be3ab72e9e1cda75e7af2b8b8d50e1ba2085a))
+* optimize cursor focus when dragging elements #926 ([3679cbd](https://github.com/Hufe921/canvas-editor/commit/3679cbd4205427a1337e023c318ea98be3c952f8)), closes [#926](https://github.com/Hufe921/canvas-editor/issues/926)
+
+
+
 ## [0.9.98](https://github.com/Hufe921/canvas-editor/compare/v0.9.97...v0.9.98) (2024-12-01)
 
 

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.99";
 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 = " ";
@@ -647,8 +652,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 +661,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 +677,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 +3776,7 @@ var ControlType;
   ControlType2["CHECKBOX"] = "checkbox";
   ControlType2["RADIO"] = "radio";
   ControlType2["DATE"] = "date";
+  ControlType2["NUMBER"] = "number";
 })(ControlType || (ControlType = {}));
 var ControlComponent;
 (function(ControlComponent2) {
@@ -3990,6 +3996,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 +4020,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 +4081,8 @@ function mergeOption(options = {}) {
     lineBreak: lineBreakOptions,
     separator: separatorOptions,
     lineNumber: lineNumberOptions,
-    pageBorder: pageBorderOptions
+    pageBorder: pageBorderOptions,
+    badge: badgeOptions
   });
 }
 function unzipElementList(elementList) {
@@ -4179,13 +4191,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 +4207,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 +4452,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++;
   }
@@ -7821,7 +7833,8 @@ function dragover(evt, host) {
   cursor.drawCursor({
     width: dragWidth,
     color: dragColor,
-    isBlink: false
+    isBlink: false,
+    isFocus: false
   });
 }
 var drag = {
@@ -12574,6 +12587,8 @@ class DateControl {
     this.destroy();
   }
 }
+class NumberControl extends TextControl {
+}
 class Control {
   constructor(draw) {
     __publicField(this, "controlBorder");
@@ -12781,9 +12796,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 +12862,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 +13165,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 +13301,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;
@@ -16456,6 +16509,9 @@ class Area {
     this.range = draw.getRange();
     this.position = draw.getPosition();
   }
+  getAreaInfo() {
+    return this.areaInfoMap;
+  }
   getActiveAreaId() {
     if (!this.areaInfoMap.size)
       return null;
@@ -16610,6 +16666,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 +16755,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 +16824,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 +17120,9 @@ class Draw {
   getArea() {
     return this.area;
   }
+  getBadge() {
+    return this.badge;
+  }
   getHistoryManager() {
     return this.historyManager;
   }
@@ -17535,7 +17662,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 +18040,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 +18051,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 +18072,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 +18088,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];
@@ -18359,6 +18486,7 @@ class Draw {
     if (!pageBorder.disabled) {
       this.pageBorder.render(ctx);
     }
+    this.badge.render(ctx, pageNo);
   }
   _disconnectLazyRender() {
     var _a;
@@ -18641,6 +18769,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 +18895,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 +20211,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 +20469,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;
@@ -20426,22 +20571,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 +20639,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 +20650,9 @@ class CommandAdapt {
     }
     if (!~newIndex)
       return;
+    this.position.setPositionContext({
+      isTable: false
+    });
     this.range.setRange(newIndex, newIndex);
     this.draw.render({
       curIndex: newIndex,
@@ -21996,5 +22184,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