@hufe921/canvas-editor 0.9.102 → 0.9.103

package/CHANGELOG.md

@@ -1,3 +1,32 @@
+## [0.9.103](https://github.com/Hufe921/canvas-editor/compare/v0.9.102...v0.9.103) (2025-02-16)
+
+
+### Bug Fixes
+
+* checkbox list select error in paper horizontal mode #997 ([5442f5e](https://github.com/Hufe921/canvas-editor/commit/5442f5ea1795cd54869912e887aacb60a3160cc9)), closes [#997](https://github.com/Hufe921/canvas-editor/issues/997)
+* control content change event boundary error #996 ([e6c681d](https://github.com/Hufe921/canvas-editor/commit/e6c681d2867c7894491b42842ac180503f0702a3)), closes [#996](https://github.com/Hufe921/canvas-editor/issues/996)
+* format error when update element by id #1006 ([15728e8](https://github.com/Hufe921/canvas-editor/commit/15728e8d799cf334bcc355cc7198ebcfc0345843)), closes [#1006](https://github.com/Hufe921/canvas-editor/issues/1006)
+
+
+### Chores
+
+* update issue template ([fd34310](https://github.com/Hufe921/canvas-editor/commit/fd343106fbd613f395a78d768dbca306d9461338))
+* update README.md ([e355de8](https://github.com/Hufe921/canvas-editor/commit/e355de8a597b58b9b79aba1bfec2ae31e0db4589))
+
+
+### Features
+
+* add executeDeleteElementById api #1003 ([089d684](https://github.com/Hufe921/canvas-editor/commit/089d6841988d20efb84efd6556469455207d5a2e)), closes [#1003](https://github.com/Hufe921/canvas-editor/issues/1003)
+* convert block elements to html #984 ([b77fd96](https://github.com/Hufe921/canvas-editor/commit/b77fd96dfadc012c6a2a9a4957d59fb8af0abc55)), closes [#984](https://github.com/Hufe921/canvas-editor/issues/984)
+
+
+### Performance Improvements
+
+* mouse event listener option #1010 ([56f9604](https://github.com/Hufe921/canvas-editor/commit/56f9604e9c8c11e31c7c86f5246373412bcc6625)), closes [#1010](https://github.com/Hufe921/canvas-editor/issues/1010)
+* timing of updating range style #985 ([cfb09ce](https://github.com/Hufe921/canvas-editor/commit/cfb09cef78c9e661540b87834495dc5a19839ef8)), closes [#985](https://github.com/Hufe921/canvas-editor/issues/985)
+
+
+
 ## [0.9.102](https://github.com/Hufe921/canvas-editor/compare/v0.9.101...v0.9.102) (2025-02-07)
 
 

package/README.md

@@ -33,6 +33,7 @@
 1. Official plugin: [canvas-editor-plugin](https://github.com/Hufe921/canvas-editor-plugin)
 2. The render layer by svg is under development, see [feature/svg](https://github.com/Hufe921/canvas-editor/tree/feature/svg)
 3. The export pdf feature is available now, see [feature/pdf](https://github.com/Hufe921/canvas-editor/tree/feature/pdf)
+4. The AI-powered text processing demo, see [feature/ai](https://github.com/Hufe921/canvas-editor/tree/feature/ai)
 
 ## Basic usage
 

package/dist/canvas-editor.es.js

@@ -23,7 +23,7 @@ var __publicField = (obj, key, value) => {
   return value;
 };
 var index = "";
-const version = "0.9.102";
+const version = "0.9.103";
 var MaxHeightRatio;
 (function(MaxHeightRatio2) {
   MaxHeightRatio2["HALF"] = "half";
@@ -582,6 +582,41 @@ const VIRTUAL_ELEMENT_TYPE = [
   ElementType.TITLE,
   ElementType.LIST
 ];
+const _IFrameBlock = class {
+  constructor(element) {
+    __publicField(this, "element");
+    this.element = element;
+  }
+  _defineIframeProperties(iframeWindow) {
+    Object.defineProperties(iframeWindow, {
+      parent: {
+        get: () => null
+      },
+      __POWERED_BY_CANVAS_EDITOR__: {
+        get: () => true
+      }
+    });
+  }
+  render(blockItemContainer) {
+    var _a, _b;
+    const block = this.element.block;
+    const iframe = document.createElement("iframe");
+    iframe.setAttribute("data-id", this.element.id);
+    iframe.sandbox.add(..._IFrameBlock.sandbox);
+    iframe.style.border = "none";
+    iframe.style.width = "100%";
+    iframe.style.height = "100%";
+    if ((_a = block.iframeBlock) == null ? void 0 : _a.src) {
+      iframe.src = block.iframeBlock.src;
+    } else if ((_b = block.iframeBlock) == null ? void 0 : _b.srcdoc) {
+      iframe.srcdoc = block.iframeBlock.srcdoc;
+    }
+    blockItemContainer.append(iframe);
+    this._defineIframeProperties(iframe.contentWindow);
+  }
+};
+let IFrameBlock = _IFrameBlock;
+__publicField(IFrameBlock, "sandbox", ["allow-scripts", "allow-same-origin"]);
 class ImageParticle {
   constructor(draw) {
     __publicField(this, "draw");
@@ -4937,7 +4972,7 @@ function groupElementListByRowFlex(elementList) {
 function createDomFromElementList(elementList, options) {
   const editorOptions = mergeOption(options);
   function buildDom(payload) {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _i;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l;
     const clipboardDom2 = document.createElement("div");
     for (let e = 0; e < payload.length; e++) {
       const element = payload[e];
@@ -5032,20 +5067,49 @@ function createDomFromElementList(elementList, options) {
           img.height = element.height;
         }
         clipboardDom2.append(img);
+      } else if (element.type === ElementType.BLOCK) {
+        if (((_e = element.block) == null ? void 0 : _e.type) === BlockType.VIDEO) {
+          const src = (_f = element.block.videoBlock) == null ? void 0 : _f.src;
+          if (src) {
+            const video = document.createElement("video");
+            video.style.display = "block";
+            video.controls = true;
+            video.src = src;
+            video.width = element.width || (options == null ? void 0 : options.width) || window.innerWidth;
+            video.height = element.height;
+            clipboardDom2.append(video);
+          }
+        } else if (((_g = element.block) == null ? void 0 : _g.type) === BlockType.IFRAME) {
+          const { src, srcdoc } = element.block.iframeBlock || {};
+          if (src || srcdoc) {
+            const iframe = document.createElement("iframe");
+            iframe.sandbox.add(...IFrameBlock.sandbox);
+            iframe.style.display = "block";
+            iframe.style.border = "none";
+            if (src) {
+              iframe.src = src;
+            } else if (srcdoc) {
+              iframe.srcdoc = srcdoc;
+            }
+            iframe.width = `${element.width || (options == null ? void 0 : options.width) || window.innerWidth}`;
+            iframe.height = `${element.height}`;
+            clipboardDom2.append(iframe);
+          }
+        }
       } else if (element.type === ElementType.SEPARATOR) {
         const hr = document.createElement("hr");
         clipboardDom2.append(hr);
       } else if (element.type === ElementType.CHECKBOX) {
         const checkbox = document.createElement("input");
         checkbox.type = "checkbox";
-        if ((_e = element.checkbox) == null ? void 0 : _e.value) {
+        if ((_h = element.checkbox) == null ? void 0 : _h.value) {
           checkbox.setAttribute("checked", "true");
         }
         clipboardDom2.append(checkbox);
       } else if (element.type === ElementType.RADIO) {
         const radio = document.createElement("input");
         radio.type = "radio";
-        if ((_f = element.radio) == null ? void 0 : _f.value) {
+        if ((_i = element.radio) == null ? void 0 : _i.value) {
           radio.setAttribute("checked", "true");
         }
         clipboardDom2.append(radio);
@@ -5055,20 +5119,20 @@ function createDomFromElementList(elementList, options) {
         clipboardDom2.append(tab2);
       } else if (element.type === ElementType.CONTROL) {
         const controlElement = document.createElement("span");
-        const childDom = buildDom(((_g = element.control) == null ? void 0 : _g.value) || []);
+        const childDom = buildDom(((_j = element.control) == null ? void 0 : _j.value) || []);
         controlElement.innerHTML = childDom.innerHTML;
         clipboardDom2.append(controlElement);
       } else if (!element.type || element.type === ElementType.LATEX || TEXTLIKE_ELEMENT_TYPE.includes(element.type)) {
         let text = "";
         if (element.type === ElementType.DATE) {
-          text = ((_h = element.valueList) == null ? void 0 : _h.map((v) => v.value).join("")) || "";
+          text = ((_k = element.valueList) == null ? void 0 : _k.map((v) => v.value).join("")) || "";
         } else {
           text = element.value;
         }
         if (!text)
           continue;
         const dom = convertElementToDom(element, editorOptions);
-        if (((_i = payload[e - 1]) == null ? void 0 : _i.type) === ElementType.TITLE) {
+        if (((_l = payload[e - 1]) == null ? void 0 : _l.type) === ElementType.TITLE) {
           text = text.replace(/^\n/, "");
         }
         dom.innerText = text.replace(new RegExp(`${ZERO}`, "g"), "\n");
@@ -5225,6 +5289,39 @@ function getElementListByHTML(htmlText, options) {
               type: ElementType.IMAGE
             });
           }
+        } else if (node.nodeName === "VIDEO") {
+          const { src, width, height } = node;
+          if (src && width && height) {
+            elementList.push({
+              value: "",
+              type: ElementType.BLOCK,
+              block: {
+                type: BlockType.VIDEO,
+                videoBlock: {
+                  src
+                }
+              },
+              width,
+              height
+            });
+          }
+        } else if (node.nodeName === "IFRAME") {
+          const { src, srcdoc, width, height } = node;
+          if ((src || srcdoc) && width && height) {
+            elementList.push({
+              value: "",
+              type: ElementType.BLOCK,
+              block: {
+                type: BlockType.IFRAME,
+                iframeBlock: {
+                  src,
+                  srcdoc
+                }
+              },
+              width: parseInt(width),
+              height: parseInt(height)
+            });
+          }
         } else if (node.nodeName === "TABLE") {
           const tableElement = node;
           const element = {
@@ -8113,13 +8210,10 @@ class GlobalEvent {
       const target = (evt == null ? void 0 : evt.composedPath()[0]) || evt.target;
       const pageList = this.draw.getPageList();
       const innerEditorDom = findParent(target, (node) => pageList.includes(node), true);
-      if (innerEditorDom) {
-        this.setRangeStyle();
+      if (innerEditorDom)
         return;
-      }
       const outerEditorDom = findParent(target, (node) => !!node && node.nodeType === 1 && !!node.getAttribute(EDITOR_COMPONENT), true);
       if (outerEditorDom) {
-        this.setRangeStyle();
         this.watchCursorActive();
         return;
       }
@@ -8136,9 +8230,6 @@ class GlobalEvent {
       this.canvasEvent.setIsAllowDrag(false);
       this.canvasEvent.setIsAllowSelection(false);
     });
-    __publicField(this, "setRangeStyle", () => {
-      this.range.setRangeStyle();
-    });
     __publicField(this, "setPageScale", (evt) => {
       if (!evt.ctrlKey)
         return;
@@ -8191,8 +8282,7 @@ class GlobalEvent {
   }
   addEvent() {
     window.addEventListener("blur", this.clearSideEffect);
-    document.addEventListener("keyup", this.setRangeStyle);
-    document.addEventListener("click", this.clearSideEffect);
+    document.addEventListener("mousedown", this.clearSideEffect);
     document.addEventListener("mouseup", this.setCanvasEventAbility);
     document.addEventListener("wheel", this.setPageScale, { passive: false });
     document.addEventListener("visibilitychange", this._handleVisibilityChange);
@@ -8200,8 +8290,7 @@ class GlobalEvent {
   }
   removeEvent() {
     window.removeEventListener("blur", this.clearSideEffect);
-    document.removeEventListener("keyup", this.setRangeStyle);
-    document.removeEventListener("click", this.clearSideEffect);
+    document.removeEventListener("mousedown", this.clearSideEffect);
     document.removeEventListener("mouseup", this.setCanvasEventAbility);
     document.removeEventListener("wheel", this.setPageScale);
     document.removeEventListener("visibilitychange", this._handleVisibilityChange);
@@ -8654,7 +8743,7 @@ class Position {
         const headIndex = positionList.findIndex((p) => p.pageNo === positionNo && p.rowNo === rowNo);
         const headElement = elementList[headIndex];
         const headPosition = positionList[headIndex];
-        const headStartX = headElement.listStyle === ListStyle.CHECKBOX ? this.options.margins[3] : headPosition.coordinate.leftTop[0];
+        const headStartX = headElement.listStyle === ListStyle.CHECKBOX ? this.draw.getMargins()[3] : headPosition.coordinate.leftTop[0];
         if (x < headStartX) {
           if (~headIndex) {
             if (headPosition.value === ZERO) {
@@ -13057,6 +13146,8 @@ class Control {
     const elementList = context.elementList || this.getElementList();
     const { startIndex } = context.range || this.getRange();
     const startElement = elementList[startIndex];
+    if (!(startElement == null ? void 0 : startElement.controlId))
+      return [];
     const data2 = [];
     let preIndex = startIndex;
     while (preIndex > 0) {
@@ -13198,7 +13289,7 @@ class Control {
     }
   }
   emitControlContentChange(options) {
-    var _a, _b, _c;
+    var _a, _b, _c, _d, _e, _f;
     const isSubscribeControlContentChange = this.eventBus.isSubscribe("controlContentChange");
     if (!isSubscribeControlContentChange && !this.listener.controlContentChange) {
       return;
@@ -13206,6 +13297,10 @@ class Control {
     const controlElement = (options == null ? void 0 : options.controlElement) || ((_a = this.activeControl) == null ? void 0 : _a.getElement());
     if (!controlElement)
       return;
+    const elementList = ((_b = options == null ? void 0 : options.context) == null ? void 0 : _b.elementList) || this.getElementList();
+    const { startIndex } = ((_c = options == null ? void 0 : options.context) == null ? void 0 : _c.range) || this.getRange();
+    if (!((_d = elementList[startIndex]) == null ? void 0 : _d.controlId))
+      return;
     const controlValue = (options == null ? void 0 : options.controlValue) || this.getControlElementList(options == null ? void 0 : options.context);
     let control;
     if (controlValue == null ? void 0 : controlValue.length) {
@@ -13220,7 +13315,7 @@ class Control {
       control,
       controlId: controlElement.controlId
     };
-    (_c = (_b = this.listener).controlContentChange) == null ? void 0 : _c.call(_b, payload);
+    (_f = (_e = this.listener).controlContentChange) == null ? void 0 : _f.call(_e, payload);
     if (isSubscribeControlContentChange) {
       this.eventBus.emit("controlContentChange", payload);
     }
@@ -14782,41 +14877,6 @@ var BlockType;
   BlockType2["IFRAME"] = "iframe";
   BlockType2["VIDEO"] = "video";
 })(BlockType || (BlockType = {}));
-const _IFrameBlock = class {
-  constructor(element) {
-    __publicField(this, "element");
-    this.element = element;
-  }
-  _defineIframeProperties(iframeWindow) {
-    Object.defineProperties(iframeWindow, {
-      parent: {
-        get: () => null
-      },
-      __POWERED_BY_CANVAS_EDITOR__: {
-        get: () => true
-      }
-    });
-  }
-  render(blockItemContainer) {
-    var _a, _b;
-    const block = this.element.block;
-    const iframe = document.createElement("iframe");
-    iframe.setAttribute("data-id", this.element.id);
-    iframe.sandbox.add(..._IFrameBlock.sandbox);
-    iframe.style.border = "none";
-    iframe.style.width = "100%";
-    iframe.style.height = "100%";
-    if ((_a = block.iframeBlock) == null ? void 0 : _a.src) {
-      iframe.src = block.iframeBlock.src;
-    } else if ((_b = block.iframeBlock) == null ? void 0 : _b.srcdoc) {
-      iframe.srcdoc = block.iframeBlock.srcdoc;
-    }
-    blockItemContainer.append(iframe);
-    this._defineIframeProperties(iframe.contentWindow);
-  }
-};
-let IFrameBlock = _IFrameBlock;
-__publicField(IFrameBlock, "sandbox", ["allow-scripts", "allow-same-origin"]);
 class VideoBlock {
   constructor(element) {
     __publicField(this, "element");
@@ -14831,7 +14891,6 @@ class VideoBlock {
     video.style.objectFit = "contain";
     video.src = ((_a = block.videoBlock) == null ? void 0 : _a.src) || "";
     video.controls = true;
-    video.crossOrigin = "anonymous";
     blockItemContainer.append(video);
   }
 }
@@ -15979,6 +16038,9 @@ class MouseObserver {
     this.pageContainer.addEventListener("mousemove", this._mousemove.bind(this));
     this.pageContainer.addEventListener("mouseenter", this._mouseenter.bind(this));
     this.pageContainer.addEventListener("mouseleave", this._mouseleave.bind(this));
+    this.pageContainer.addEventListener("mousedown", this._mousedown.bind(this));
+    this.pageContainer.addEventListener("mouseup", this._mouseup.bind(this));
+    this.pageContainer.addEventListener("click", this._click.bind(this));
   }
   _mousemove(evt) {
     if (!this.eventBus.isSubscribe("mousemove"))
@@ -15995,6 +16057,21 @@ class MouseObserver {
       return;
     this.eventBus.emit("mouseleave", evt);
   }
+  _mousedown(evt) {
+    if (!this.eventBus.isSubscribe("mousedown"))
+      return;
+    this.eventBus.emit("mousedown", evt);
+  }
+  _mouseup(evt) {
+    if (!this.eventBus.isSubscribe("mouseup"))
+      return;
+    this.eventBus.emit("mouseup", evt);
+  }
+  _click(evt) {
+    if (!this.eventBus.isSubscribe("click"))
+      return;
+    this.eventBus.emit("click", evt);
+  }
 }
 class LineNumber {
   constructor(draw) {
@@ -19050,6 +19127,7 @@ class Draw {
       this.submitHistory(curIndex);
     }
     nextTick(() => {
+      this.range.setRangeStyle();
       if (isCompute && this.control.getActiveControl()) {
         this.control.reAwakeControl();
       }
@@ -19231,6 +19309,7 @@ class Command {
     __publicField(this, "executeLocationArea");
     __publicField(this, "executeAppendElementList");
     __publicField(this, "executeUpdateElementById");
+    __publicField(this, "executeDeleteElementById");
     __publicField(this, "executeSetValue");
     __publicField(this, "executeRemoveControl");
     __publicField(this, "executeSetLocale");
@@ -19361,6 +19440,7 @@ class Command {
     this.executeInsertElementList = adapt.insertElementList.bind(adapt);
     this.executeAppendElementList = adapt.appendElementList.bind(adapt);
     this.executeUpdateElementById = adapt.updateElementById.bind(adapt);
+    this.executeDeleteElementById = adapt.deleteElementById.bind(adapt);
     this.executeSetValue = adapt.setValue.bind(adapt);
     this.executeRemoveControl = adapt.removeControl.bind(adapt);
     this.executeSetLocale = adapt.setLocale.bind(adapt);
@@ -20904,7 +20984,7 @@ class CommandAdapt {
             }
           }
         }
-        if (id && (element.id === id || element.controlId === id) || conceptId && element.conceptId === conceptId) {
+        if (id && element.id === id || conceptId && element.conceptId === conceptId) {
           updateElementInfoList.push({
             elementList,
             index: i - 1
@@ -20924,16 +21004,60 @@ class CommandAdapt {
       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]]), {
+      const newElement = zipElementList([
+        __spreadValues(__spreadValues({}, elementList[index2]), payload.properties)
+      ]);
+      formatElementList(newElement, {
         isHandleFirstElement: false,
         editorOptions: this.options
       });
+      elementList[index2] = newElement[0];
     }
     this.draw.render({
       isSetCursor: false
     });
   }
+  deleteElementById(payload) {
+    const { id, conceptId } = payload;
+    if (!id && !conceptId)
+      return;
+    let isExistDelete = false;
+    function deleteElement(elementList) {
+      let i = 0;
+      while (i < elementList.length) {
+        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];
+              deleteElement(td.value);
+            }
+          }
+        }
+        if (id && element.id === id || conceptId && element.conceptId === conceptId) {
+          isExistDelete = true;
+          elementList.splice(i, 1);
+          i--;
+        }
+        i++;
+      }
+    }
+    const data2 = [
+      this.draw.getOriginalMainElementList(),
+      this.draw.getHeaderElementList(),
+      this.draw.getFooterElementList()
+    ];
+    for (const elementList of data2) {
+      deleteElement(elementList);
+    }
+    if (!isExistDelete)
+      return;
+    this.draw.render({
+      isSetCursor: false
+    });
+  }
   getElementById(payload) {
     const { id, conceptId } = payload;
     const result = [];
@@ -20954,7 +21078,7 @@ class CommandAdapt {
             }
           }
         }
-        if (id && element.controlId !== id && element.id !== id || conceptId && element.conceptId !== conceptId) {
+        if (id && element.id !== id || conceptId && element.conceptId !== conceptId) {
           continue;
         }
         result.push(element);
@@ -21338,11 +21462,12 @@ class CommandAdapt {
     }
     return result;
   }
-  getPositionContextByEvent(evt) {
+  getPositionContextByEvent(evt, options = {}) {
     var _a, _b, _c;
     const pageIndex = (_a = evt.target) == null ? void 0 : _a.dataset.index;
     if (!pageIndex)
       return null;
+    const { isMustDirectHit = true } = options;
     const pageNo = Number(pageIndex);
     const positionContext = this.position.getPositionByXY({
       x: evt.offsetX,
@@ -21350,8 +21475,10 @@ class CommandAdapt {
       pageNo
     });
     const { isDirectHit, isTable, index: index2, trIndex, tdIndex, tdValueIndex, zone: zone2 } = positionContext;
-    if (!isDirectHit || zone2 && zone2 !== this.zone.getZone())
+    if (isMustDirectHit && !isDirectHit || zone2 && zone2 !== this.zone.getZone()) {
       return null;
+    }
+    let tableInfo = null;
     let element = null;
     const elementList = this.draw.getOriginalElementList();
     let position = null;
@@ -21360,6 +21487,11 @@ class CommandAdapt {
       const td = (_b = elementList[index2].trList) == null ? void 0 : _b[trIndex].tdList[tdIndex];
       element = (td == null ? void 0 : td.value[tdValueIndex]) || null;
       position = ((_c = td == null ? void 0 : td.positionList) == null ? void 0 : _c[tdValueIndex]) || null;
+      tableInfo = {
+        element: elementList[index2],
+        trIndex,
+        tdIndex
+      };
     } else {
       element = elementList[index2] || null;
       position = positionList[index2] || null;
@@ -21379,7 +21511,8 @@ class CommandAdapt {
     return {
       pageNo,
       element,
-      rangeRect
+      rangeRect,
+      tableInfo
     };
   }
   insertTitle(payload) {