@hufe921/canvas-editor 0.9.62 → 0.9.64

package/CHANGELOG.md

@@ -1,3 +1,36 @@
+## [0.9.64](https://github.com/Hufe921/canvas-editor/compare/v0.9.63...v0.9.64) (2024-01-28)
+
+
+### Bug Fixes
+
+* error inserting image within control #422 ([ea4ac33](https://github.com/Hufe921/canvas-editor/commit/ea4ac339c7de962845f639a1c5ac24d8e3640485)), closes [#422](https://github.com/Hufe921/canvas-editor/issues/422)
+* render error when row element is empty #420 ([8999f28](https://github.com/Hufe921/canvas-editor/commit/8999f283bb87d92fe58b1aa8330bf4d9d75b9064)), closes [#420](https://github.com/Hufe921/canvas-editor/issues/420)
+* zone tip position error in firefox browser #423 ([3cf911c](https://github.com/Hufe921/canvas-editor/commit/3cf911c501a0c0af85d994d5b50c657c6cd77692)), closes [#423](https://github.com/Hufe921/canvas-editor/issues/423)
+
+
+### Features
+
+* add executeSetControlProperties api #391 ([3ffb6b9](https://github.com/Hufe921/canvas-editor/commit/3ffb6b94b57a0d0fe81cc778a26d4e2a234e24ab)), closes [#391](https://github.com/Hufe921/canvas-editor/issues/391)
+* copy and paste original elements #397 (#426) ([2fc16de](https://github.com/Hufe921/canvas-editor/commit/2fc16de4e15578cdd181c4186b4cf978924b5207)), closes [#397](https://github.com/Hufe921/canvas-editor/issues/397) [#426](https://github.com/Hufe921/canvas-editor/issues/426)
+
+
+
+## [0.9.63](https://github.com/Hufe921/canvas-editor/compare/v0.9.62...v0.9.63) (2024-01-19)
+
+
+### Bug Fixes
+
+* copy row properties on input #415 ([55a43e6](https://github.com/Hufe921/canvas-editor/commit/55a43e61bf6aded9f50644e86d3a1c276ee7a53a)), closes [#415](https://github.com/Hufe921/canvas-editor/issues/415)
+* format list element boundary error ([094af57](https://github.com/Hufe921/canvas-editor/commit/094af57302a7db0c83cb3dd8a5eb9bbe5581b8f8))
+* image render error within the control #406 ([d175f92](https://github.com/Hufe921/canvas-editor/commit/d175f920e8887cc3b1f5132e8ac7443b0d556204)), closes [#406](https://github.com/Hufe921/canvas-editor/issues/406)
+
+
+### Features
+
+* keep aspect ratio when drag image #414 ([e8684da](https://github.com/Hufe921/canvas-editor/commit/e8684daffd40a8efda0342809846451afa0027a2)), closes [#414](https://github.com/Hufe921/canvas-editor/issues/414)
+
+
+
 ## [0.9.62](https://github.com/Hufe921/canvas-editor/compare/v0.9.61...v0.9.62) (2024-01-12)
 
 

package/dist/canvas-editor.es.js

@@ -23,7 +23,7 @@ var __publicField = (obj, key, value) => {
   return value;
 };
 var index = "";
-const version = "0.9.62";
+const version = "0.9.64";
 var MaxHeightRatio;
 (function(MaxHeightRatio2) {
   MaxHeightRatio2["HALF"] = "half";
@@ -327,6 +327,7 @@ const defaultCursorOption = {
 };
 const EDITOR_COMPONENT = "editor-component";
 const EDITOR_PREFIX = "ce";
+const EDITOR_CLIPBOARD = `${EDITOR_PREFIX}-clipboard`;
 var MoveDirection;
 (function(MoveDirection2) {
   MoveDirection2["UP"] = "top";
@@ -363,6 +364,7 @@ const EDITOR_ELEMENT_STYLE_ATTR = [
   "underline",
   "strikeout"
 ];
+const EDITOR_ROW_ATTR = ["rowFlex", "rowMargin"];
 const EDITOR_ELEMENT_COPY_ATTR = [
   "type",
   "font",
@@ -378,7 +380,9 @@ const EDITOR_ELEMENT_COPY_ATTR = [
   "hyperlinkId",
   "dateId",
   "dateFormat",
-  "groupIds"
+  "groupIds",
+  "rowFlex",
+  "rowMargin"
 ];
 const EDITOR_ELEMENT_ZIP_ATTR = [
   "type",
@@ -3668,7 +3672,9 @@ function formatElementList(elementList, options) {
     } else if (el.type === ElementType.LIST) {
       elementList.splice(i, 1);
       const valueList = el.valueList || [];
-      formatElementList(valueList, __spreadValues({}, options));
+      formatElementList(valueList, __spreadProps(__spreadValues({}, options), {
+        isHandleFirstElement: true
+      }));
       if (valueList.length) {
         const listId = getUUID();
         for (let v = 0; v < valueList.length; v++) {
@@ -3742,6 +3748,10 @@ function formatElementList(elementList, options) {
       }
       i--;
     } else if (el.type === ElementType.CONTROL) {
+      if (!el.control) {
+        i++;
+        continue;
+      }
       const { prefix, postfix, value, placeholder, code, type, valueSets } = el.control;
       const { editorOptions: { control: controlOption, checkbox: checkboxOption } } = options;
       const controlId = getUUID();
@@ -3812,20 +3822,20 @@ function formatElementList(elementList, options) {
               }
             }
           }
+          formatElementList(valueList, __spreadProps(__spreadValues({}, options), {
+            isHandleFirstElement: false
+          }));
           for (let v = 0; v < valueList.length; v++) {
             const element = valueList[v];
-            const valueStrList = splitText(element.value);
-            for (let e = 0; e < valueStrList.length; e++) {
-              const value2 = valueStrList[e];
-              elementList.splice(i, 0, __spreadProps(__spreadValues({}, element), {
-                controlId,
-                value: value2 === "\n" ? ZERO : value2,
-                type: element.type || ElementType.TEXT,
-                control: el.control,
-                controlComponent: ControlComponent.VALUE
-              }));
-              i++;
-            }
+            const value2 = element.value;
+            elementList.splice(i, 0, __spreadProps(__spreadValues({}, element), {
+              controlId,
+              value: value2 === "\n" ? ZERO : value2,
+              type: element.type || ElementType.TEXT,
+              control: el.control,
+              controlComponent: ControlComponent.VALUE
+            }));
+            i++;
           }
         }
       } else if (placeholder) {
@@ -4544,35 +4554,81 @@ ${listIndex + 1}.${buildText(listElementList)}${isLast ? `
   }
   return buildText(zipElementList(elementList));
 }
-function pastHTML(host, htmlText) {
+function setClipboardData(data2) {
+  localStorage.setItem(EDITOR_CLIPBOARD, JSON.stringify({
+    text: data2.text,
+    elementList: data2.elementList
+  }));
+}
+function getClipboardData() {
+  const clipboardText = localStorage.getItem(EDITOR_CLIPBOARD);
+  return clipboardText ? JSON.parse(clipboardText) : null;
+}
+function removeClipboardData() {
+  localStorage.removeItem(EDITOR_CLIPBOARD);
+}
+function writeClipboardItem(text, html, elementList) {
+  if (!text && !html && !elementList.length)
+    return;
+  const plainText = new Blob([text], { type: "text/plain" });
+  const htmlText = new Blob([html], { type: "text/html" });
+  if (window.ClipboardItem) {
+    const item = new ClipboardItem({
+      [plainText.type]: plainText,
+      [htmlText.type]: htmlText
+    });
+    window.navigator.clipboard.write([item]);
+  } else {
+    const fakeElement = document.createElement("div");
+    fakeElement.setAttribute("contenteditable", "true");
+    fakeElement.innerHTML = html;
+    document.body.append(fakeElement);
+    const selection = window.getSelection();
+    const range = document.createRange();
+    range.selectNodeContents(fakeElement);
+    selection == null ? void 0 : selection.removeAllRanges();
+    selection == null ? void 0 : selection.addRange(range);
+    document.execCommand("copy");
+    fakeElement.remove();
+  }
+  setClipboardData({ text, elementList });
+}
+function writeElementList(elementList, options) {
+  const clipboardDom = createDomFromElementList(elementList, options);
+  document.body.append(clipboardDom);
+  const text = clipboardDom.innerText;
+  clipboardDom.remove();
+  const html = clipboardDom.innerHTML;
+  if (!text && !html && !elementList.length)
+    return;
+  writeClipboardItem(text, html, zipElementList(elementList));
+}
+function pasteElement(host, elementList) {
   const draw = host.getDraw();
   const isReadonly = draw.isReadonly();
   if (isReadonly)
     return;
   const rangeManager = draw.getRange();
   const { startIndex } = rangeManager.getRange();
-  const elementList = draw.getElementList();
-  const pasteElementList = getElementListByHTML(htmlText, {
-    innerWidth: draw.getOriginalInnerWidth()
-  });
+  const originalElementList = draw.getElementList();
   if (~startIndex && !rangeManager.getIsSelectAll()) {
-    const anchorElement = elementList[startIndex];
+    const anchorElement = originalElementList[startIndex];
     if ((anchorElement == null ? void 0 : anchorElement.titleId) || (anchorElement == null ? void 0 : anchorElement.listId)) {
       let start = 0;
-      while (start < pasteElementList.length) {
-        const pasteElement = pasteElementList[start];
-        if (anchorElement.titleId && /^\n/.test(pasteElement.value)) {
+      while (start < elementList.length) {
+        const pasteElement2 = elementList[start];
+        if (anchorElement.titleId && /^\n/.test(pasteElement2.value)) {
           break;
         }
-        if (VIRTUAL_ELEMENT_TYPE.includes(pasteElement.type)) {
-          pasteElementList.splice(start, 1);
-          if (pasteElement.valueList) {
-            for (let v = 0; v < pasteElement.valueList.length; v++) {
-              const element = pasteElement.valueList[v];
+        if (VIRTUAL_ELEMENT_TYPE.includes(pasteElement2.type)) {
+          elementList.splice(start, 1);
+          if (pasteElement2.valueList) {
+            for (let v = 0; v < pasteElement2.valueList.length; v++) {
+              const element = pasteElement2.valueList[v];
               if (element.value === ZERO || element.value === "\n") {
                 continue;
               }
-              pasteElementList.splice(start, 0, element);
+              elementList.splice(start, 0, element);
               start++;
             }
           }
@@ -4581,11 +4637,21 @@ function pastHTML(host, htmlText) {
         start++;
       }
     }
-    formatElementContext(elementList, pasteElementList, startIndex, {
+    formatElementContext(originalElementList, elementList, startIndex, {
       isBreakWhenWrap: true
     });
   }
-  draw.insertElementList(pasteElementList);
+  draw.insertElementList(elementList);
+}
+function pasteHTML(host, htmlText) {
+  const draw = host.getDraw();
+  const isReadonly = draw.isReadonly();
+  if (isReadonly)
+    return;
+  const elementList = getElementListByHTML(htmlText, {
+    innerWidth: draw.getOriginalInnerWidth()
+  });
+  pasteElement(host, elementList);
 }
 function pasteImage(host, file) {
   const draw = host.getDraw();
@@ -4628,6 +4694,13 @@ function pasteByEvent(host, evt) {
     paste(evt);
     return;
   }
+  const clipboardText = clipboardData.getData("text");
+  const editorClipboardData = getClipboardData();
+  if (clipboardText === (editorClipboardData == null ? void 0 : editorClipboardData.text)) {
+    pasteElement(host, editorClipboardData.elementList);
+    return;
+  }
+  removeClipboardData();
   let isHTML = false;
   for (let i = 0; i < clipboardData.items.length; i++) {
     const item = clipboardData.items[i];
@@ -4647,7 +4720,7 @@ function pasteByEvent(host, evt) {
       }
       if (item.type === "text/html" && isHTML) {
         item.getAsString((htmlText) => {
-          pastHTML(host, htmlText);
+          pasteHTML(host, htmlText);
         });
         break;
       }
@@ -4696,7 +4769,7 @@ async function pasteByApi(host, options) {
         const htmlTextBlob = await item.getType("text/html");
         const htmlText = await htmlTextBlob.text();
         if (htmlText) {
-          pastHTML(host, htmlText);
+          pasteHTML(host, htmlText);
         }
       } else if (item.types.some((type) => type.startsWith("image/"))) {
         const type = item.types.find((type2) => type2.startsWith("image/"));
@@ -5467,7 +5540,8 @@ function enter(evt, host) {
   }
   const copyElement = getAnchorElement(elementList, endIndex);
   if (copyElement) {
-    EDITOR_ELEMENT_STYLE_ATTR.forEach((attr) => {
+    const copyAttr = [...EDITOR_ELEMENT_STYLE_ATTR, ...EDITOR_ROW_ATTR];
+    copyAttr.forEach((attr) => {
       const value = copyElement[attr];
       if (value !== void 0) {
         enterText[attr] = value;
@@ -5895,41 +5969,6 @@ function removeComposingInput(host) {
   rangeManager.setRange(startIndex, startIndex);
   host.compositionInfo = null;
 }
-function writeClipboardItem(text, html) {
-  if (!text || !html)
-    return;
-  const plainText = new Blob([text], { type: "text/plain" });
-  const htmlText = new Blob([html], { type: "text/html" });
-  if (window.ClipboardItem) {
-    const item = new ClipboardItem({
-      [plainText.type]: plainText,
-      [htmlText.type]: htmlText
-    });
-    window.navigator.clipboard.write([item]);
-  } else {
-    const fakeElement = document.createElement("div");
-    fakeElement.setAttribute("contenteditable", "true");
-    fakeElement.innerHTML = html;
-    document.body.append(fakeElement);
-    const selection = window.getSelection();
-    const range = document.createRange();
-    range.selectNodeContents(fakeElement);
-    selection == null ? void 0 : selection.removeAllRanges();
-    selection == null ? void 0 : selection.addRange(range);
-    document.execCommand("copy");
-    fakeElement.remove();
-  }
-}
-function writeElementList(elementList, options) {
-  const clipboardDom = createDomFromElementList(elementList, options);
-  document.body.append(clipboardDom);
-  const text = clipboardDom.innerText;
-  clipboardDom.remove();
-  const html = clipboardDom.innerHTML;
-  if (!text || !html)
-    return;
-  writeClipboardItem(text, html);
-}
 function cut(host) {
   const draw = host.getDraw();
   const rangeManager = draw.getRange();
@@ -6632,6 +6671,7 @@ class Position {
     return { x, y, index: index2 };
   }
   computePositionList() {
+    var _a;
     this.positionList = [];
     const innerWidth = this.draw.getInnerWidth();
     const pageRowList = this.draw.getPageRowList();
@@ -6643,7 +6683,7 @@ class Position {
     let startRowIndex = 0;
     for (let i = 0; i < pageRowList.length; i++) {
       const rowList = pageRowList[i];
-      const startIndex = rowList[0].startIndex;
+      const startIndex = (_a = rowList[0]) == null ? void 0 : _a.startIndex;
       this.computePageRowPosition({
         positionList: this.positionList,
         rowList,
@@ -9594,6 +9634,17 @@ class Control {
     }
     return false;
   }
+  isRangeCanInput() {
+    const { startIndex, endIndex } = this.getRange();
+    if (!~startIndex && !~endIndex)
+      return false;
+    if (startIndex === endIndex)
+      return true;
+    const elementList = this.getElementList();
+    const startElement = elementList[startIndex];
+    const endElement = elementList[endIndex];
+    return !startElement.controlId && !endElement.controlId || (!startElement.controlId || startElement.controlComponent === ControlComponent.POSTFIX) && endElement.controlComponent === ControlComponent.POSTFIX || !!startElement.controlId && endElement.controlId === startElement.controlId && endElement.controlComponent !== ControlComponent.POSTFIX;
+  }
   isDisabledControl() {
     var _a, _b;
     return !!((_b = (_a = this.activeControl) == null ? void 0 : _a.getElement().control) == null ? void 0 : _b.disabled);
@@ -10060,6 +10111,55 @@ class Control {
       setExtension(elementList);
     }
   }
+  setPropertiesByConceptId(payload) {
+    var _a;
+    const isReadonly = this.draw.isReadonly();
+    if (isReadonly)
+      return;
+    const { conceptId, properties } = payload;
+    let isExistUpdate = false;
+    const pageComponentData = {
+      header: this.draw.getHeaderElementList(),
+      main: this.draw.getOriginalMainElementList(),
+      footer: this.draw.getFooterElementList()
+    };
+    for (const key in pageComponentData) {
+      const elementList = pageComponentData[key];
+      let i = 0;
+      while (i < elementList.length) {
+        const element = elementList[i];
+        i++;
+        if (((_a = element == null ? void 0 : element.control) == null ? void 0 : _a.conceptId) !== conceptId)
+          continue;
+        isExistUpdate = true;
+        element.control = __spreadProps(__spreadValues(__spreadValues({}, element.control), properties), {
+          value: element.control.value
+        });
+        let newEndIndex = i;
+        while (newEndIndex < elementList.length) {
+          const nextElement = elementList[newEndIndex];
+          if (nextElement.controlId !== element.controlId)
+            break;
+          newEndIndex++;
+        }
+        i = newEndIndex;
+      }
+    }
+    if (!isExistUpdate)
+      return;
+    for (const key in pageComponentData) {
+      const pageComponentKey = key;
+      const elementList = zipElementList(pageComponentData[pageComponentKey]);
+      pageComponentData[pageComponentKey] = elementList;
+      formatElementList(elementList, {
+        editorOptions: this.options
+      });
+    }
+    this.draw.setEditorData(pageComponentData);
+    this.draw.render({
+      isSetCursor: false
+    });
+  }
 }
 class CheckboxParticle {
   constructor(draw) {
@@ -10330,15 +10430,31 @@ class Previewer {
     let dy = 0;
     switch (this.curHandleIndex) {
       case 0:
-        dx = this.mousedownX - evt.x;
-        dy = this.mousedownY - evt.y;
+        {
+          const offsetX = this.mousedownX - evt.x;
+          const offsetY = this.mousedownY - evt.y;
+          dx = Math.cbrt(offsetX ** 3 + offsetY ** 3);
+          dy = this.curElement.height * dx / this.curElement.width;
+        }
         break;
       case 1:
         dy = this.mousedownY - evt.y;
         break;
       case 2:
-        dx = evt.x - this.mousedownX;
-        dy = this.mousedownY - evt.y;
+        {
+          const offsetX = evt.x - this.mousedownX;
+          const offsetY = this.mousedownY - evt.y;
+          dx = Math.cbrt(offsetX ** 3 + offsetY ** 3);
+          dy = this.curElement.height * dx / this.curElement.width;
+        }
+        break;
+      case 4:
+        {
+          const offsetX = evt.x - this.mousedownX;
+          const offsetY = evt.y - this.mousedownY;
+          dx = Math.cbrt(offsetX ** 3 + offsetY ** 3);
+          dy = this.curElement.height * dx / this.curElement.width;
+        }
         break;
       case 3:
         dx = evt.x - this.mousedownX;
@@ -10347,16 +10463,16 @@ class Previewer {
         dy = evt.y - this.mousedownY;
         break;
       case 6:
-        dx = this.mousedownX - evt.x;
-        dy = evt.y - this.mousedownY;
+        {
+          const offsetX = this.mousedownX - evt.x;
+          const offsetY = evt.y - this.mousedownY;
+          dx = Math.cbrt(offsetX ** 3 + offsetY ** 3);
+          dy = this.curElement.height * dx / this.curElement.width;
+        }
         break;
       case 7:
         dx = this.mousedownX - evt.x;
         break;
-      default:
-        dx = evt.x - this.mousedownX;
-        dy = evt.y - this.mousedownY;
-        break;
     }
     const dw = this.curElement.width + dx / scale;
     const dh = this.curElement.height + dy / scale;
@@ -11497,6 +11613,8 @@ class ZoneTip {
     this.pageContainer.addEventListener("mousemove", throttle((evt) => {
       if (this.isDisableMouseMove)
         return;
+      if (!evt.offsetY)
+        return;
       if (evt.target instanceof HTMLCanvasElement) {
         const mousemoveZone = this.zone.getZoneByY(evt.offsetY);
         if (!watchZones.includes(mousemoveZone)) {
@@ -12542,8 +12660,8 @@ class Draw {
   insertElementList(payload) {
     if (!payload.length)
       return;
-    const isPartRangeInControlOutside = this.control.isPartRangeInControlOutside();
-    if (isPartRangeInControlOutside)
+    const isRangeCanInput = this.control.isRangeCanInput();
+    if (!isRangeCanInput)
       return;
     const { startIndex, endIndex } = this.range.getRange();
     if (!~startIndex && !~endIndex)
@@ -12553,7 +12671,11 @@ class Draw {
       editorOptions: this.options
     });
     let curIndex = -1;
-    const activeControl = this.control.getActiveControl();
+    let activeControl = this.control.getActiveControl();
+    if (!activeControl && this.control.isRangeWithinControl()) {
+      this.control.initControl();
+      activeControl = this.control.getActiveControl();
+    }
     if (activeControl && !this.control.isRangInPostfix()) {
       curIndex = activeControl.setValue(payload, void 0, {
         isIgnoreDisabledRule: true
@@ -12960,7 +13082,7 @@ class Draw {
     return `${el.italic ? "italic " : ""}${el.bold ? "bold " : ""}${size * scale}px ${font}`;
   }
   computeRowList(innerWidth, elementList) {
-    var _a, _b, _c, _d, _e, _f;
+    var _a, _b, _c, _d, _e, _f, _g, _h;
     const { defaultSize, defaultRowMargin, scale, tdPadding, defaultTabWidth } = this.options;
     const defaultBasicRowMarginHeight = this.getDefaultBasicRowMarginHeight();
     const canvas = document.createElement("canvas");
@@ -12974,7 +13096,7 @@ class Draw {
         ascent: 0,
         elementList: [],
         startIndex: 0,
-        rowFlex: (_a = elementList == null ? void 0 : elementList[1]) == null ? void 0 : _a.rowFlex
+        rowFlex: ((_a = elementList == null ? void 0 : elementList[0]) == null ? void 0 : _a.rowFlex) || ((_b = elementList == null ? void 0 : elementList[1]) == null ? void 0 : _b.rowFlex)
       });
     }
     let listId;
@@ -13083,7 +13205,7 @@ class Draw {
         let curPagePreHeight = marginHeight;
         for (let r = 0; r < rowList.length; r++) {
           const row = rowList[r];
-          if (row.height + curPagePreHeight > height2 || ((_b = rowList[r - 1]) == null ? void 0 : _b.isPageBreak)) {
+          if (row.height + curPagePreHeight > height2 || ((_c = rowList[r - 1]) == null ? void 0 : _c.isPageBreak)) {
             curPagePreHeight = marginHeight + row.height;
           } else {
             curPagePreHeight += row.height;
@@ -13100,7 +13222,7 @@ class Draw {
               const tr = trList2[r];
               const trHeight = tr.height * scale;
               if (curPagePreHeight + rowMarginHeight + preTrHeight + trHeight > height2) {
-                if (((_c = element.colgroup) == null ? void 0 : _c.length) !== tr.tdList.length) {
+                if (((_d = element.colgroup) == null ? void 0 : _d.length) !== tr.tdList.length) {
                   deleteCount = 0;
                 }
                 break;
@@ -13186,7 +13308,7 @@ class Draw {
         metrics,
         style: this._getFont(element, scale)
       });
-      if ((_d = rowElement.control) == null ? void 0 : _d.minWidth) {
+      if ((_e = rowElement.control) == null ? void 0 : _e.minWidth) {
         if (rowElement.controlComponent) {
           controlRealWidth += metrics.width;
         }
@@ -13243,10 +13365,10 @@ class Draw {
           startIndex: i,
           elementList: [rowElement],
           ascent,
-          rowFlex: (_e = elementList[i + 1]) == null ? void 0 : _e.rowFlex,
+          rowFlex: ((_f = elementList[i]) == null ? void 0 : _f.rowFlex) || ((_g = elementList[i + 1]) == null ? void 0 : _g.rowFlex),
           isPageBreak: element.type === ElementType.PAGE_BREAK
         };
-        if (rowElement.controlComponent !== ControlComponent.PREFIX && ((_f = rowElement.control) == null ? void 0 : _f.indentation) === ControlIndentation.VALUE_START) {
+        if (rowElement.controlComponent !== ControlComponent.PREFIX && ((_h = rowElement.control) == null ? void 0 : _h.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({
@@ -13495,7 +13617,7 @@ class Draw {
     this.blockParticle.clear();
   }
   _drawPage(payload) {
-    var _a;
+    var _a, _b;
     const { elementList, positionList, rowList, pageNo } = payload;
     const { inactiveAlpha, pageMode, header, footer, pageNumber } = this.options;
     const innerWidth = this.getInnerWidth();
@@ -13507,7 +13629,7 @@ class Draw {
       this.margin.render(ctx, pageNo);
     }
     this.control.renderHighlightList(ctx, pageNo);
-    const index2 = rowList[0].startIndex;
+    const index2 = (_a = rowList[0]) == null ? void 0 : _a.startIndex;
     this.drawRow(ctx, {
       elementList,
       positionList,
@@ -13534,7 +13656,7 @@ class Draw {
     if (pageMode !== PageMode.CONTINUITY && this.options.watermark.data) {
       this.waterMark.render(ctx);
     }
-    if (this.elementList.length <= 1 && !((_a = this.elementList[0]) == null ? void 0 : _a.listId)) {
+    if (this.elementList.length <= 1 && !((_b = this.elementList[0]) == null ? void 0 : _b.listId)) {
       this.placeholder.render(ctx);
     }
   }
@@ -13778,6 +13900,7 @@ class Command {
     __publicField(this, "executeSetZone");
     __publicField(this, "executeSetControlValue");
     __publicField(this, "executeSetControlExtension");
+    __publicField(this, "executeSetControlProperties");
     __publicField(this, "executeSetControlHighlight");
     __publicField(this, "getCatalog");
     __publicField(this, "getImage");
@@ -13900,6 +14023,7 @@ class Command {
     this.getContainer = adapt.getContainer.bind(adapt);
     this.executeSetControlValue = adapt.setControlValue.bind(adapt);
     this.executeSetControlExtension = adapt.setControlExtension.bind(adapt);
+    this.executeSetControlProperties = adapt.setControlProperties.bind(adapt);
     this.executeSetControlHighlight = adapt.setControlHighlight.bind(adapt);
     this.getControlValue = adapt.getControlValue.bind(adapt);
   }
@@ -15451,26 +15575,19 @@ class CommandAdapt {
     const isDisabled = this.draw.isReadonly() || this.control.isDisabledControl();
     if (isDisabled)
       return;
-    const activeControl = this.control.getActiveControl();
-    if (activeControl)
-      return;
     const { startIndex, endIndex } = this.range.getRange();
     if (!~startIndex && !~endIndex)
       return;
-    const elementList = this.draw.getElementList();
     const { value, width, height } = payload;
-    const element = {
-      value,
-      width,
-      height,
-      id: getUUID(),
-      type: ElementType.IMAGE
-    };
-    const curIndex = startIndex + 1;
-    formatElementContext(elementList, [element], startIndex);
-    this.draw.spliceElementList(elementList, curIndex, startIndex === endIndex ? 0 : endIndex - startIndex, element);
-    this.range.setRange(curIndex, curIndex);
-    this.draw.render({ curIndex });
+    this.draw.insertElementList([
+      {
+        value,
+        width,
+        height,
+        id: getUUID(),
+        type: ElementType.IMAGE
+      }
+    ]);
   }
   search(payload) {
     this.searchManager.setSearchKeyword(payload);
@@ -15953,6 +16070,12 @@ class CommandAdapt {
       return;
     this.draw.getControl().setExtensionByConceptId(payload);
   }
+  setControlProperties(payload) {
+    const isReadonly = this.draw.isReadonly();
+    if (isReadonly)
+      return;
+    this.draw.getControl().setPropertiesByConceptId(payload);
+  }
   setControlHighlight(payload) {
     this.draw.getControl().setHighlightList(payload);
   }