@hufe921/canvas-editor 0.9.54 → 0.9.55

package/CHANGELOG.md

@@ -1,3 +1,23 @@
+## [0.9.55](https://github.com/Hufe921/canvas-editor/compare/v0.9.54...v0.9.55) (2023-11-10)
+
+
+### Bug Fixes
+
+*  break after pasting HTML #318 ([80f6531](https://github.com/Hufe921/canvas-editor/commit/80f6531b96e22b434cd10b4441dba86c8944f99b)), closes [#318](https://github.com/Hufe921/canvas-editor/issues/318)
+* delete table row boundary error #313 ([8f8bc04](https://github.com/Hufe921/canvas-editor/commit/8f8bc046db60a7c66c3b17e61b1f9f5a5c731f58)), closes [#313](https://github.com/Hufe921/canvas-editor/issues/313)
+* reset event ability after delete element #314 ([c6483a4](https://github.com/Hufe921/canvas-editor/commit/c6483a4da68881490cc25c52cafcf96386d9a0a6)), closes [#314](https://github.com/Hufe921/canvas-editor/issues/314)
+* shrink control range boundary error #305 ([a9fc226](https://github.com/Hufe921/canvas-editor/commit/a9fc226a39c3ef78d217fe7435b4b463c5879eac)), closes [#305](https://github.com/Hufe921/canvas-editor/issues/305)
+
+
+### Features
+
+* add pageScaleChange eventbus #321 ([c697586](https://github.com/Hufe921/canvas-editor/commit/c69758686de22328ac84138ed2c2aa9a0668ed78)), closes [#321](https://github.com/Hufe921/canvas-editor/issues/321)
+* add scrollContainerSelection option #320 ([192113e](https://github.com/Hufe921/canvas-editor/commit/192113e271b02cf3e4a462343a7b3d5604b90b23)), closes [#320](https://github.com/Hufe921/canvas-editor/issues/320)
+* collapsed selection rect information ([7c32f95](https://github.com/Hufe921/canvas-editor/commit/7c32f9572f4d29fbf2f5d6d3f775c5dbe2d0ba8b))
+* support for paste richtext data in contextmenu ([8989831](https://github.com/Hufe921/canvas-editor/commit/8989831474f637fe52133abc85d1ed2dc41f6354))
+
+
+
 ## [0.9.54](https://github.com/Hufe921/canvas-editor/compare/v0.9.53...v0.9.54) (2023-11-03)
 
 

package/dist/canvas-editor.es.js

@@ -23,7 +23,7 @@ var __publicField = (obj, key, value) => {
   return value;
 };
 var index = "";
-const version = "0.9.54";
+const version = "0.9.55";
 var MaxHeightRatio;
 (function(MaxHeightRatio2) {
   MaxHeightRatio2["HALF"] = "half";
@@ -4516,6 +4516,168 @@ ${listIndex + 1}.${buildText(listElementList)}${isLast ? `
   }
   return buildText(zipElementList(elementList));
 }
+function pastHTML(host, htmlText) {
+  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()
+  });
+  if (~startIndex && !rangeManager.getIsSelectAll()) {
+    const anchorElement = elementList[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)) {
+          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 (element.value === ZERO || element.value === "\n") {
+                continue;
+              }
+              pasteElementList.splice(start, 0, element);
+              start++;
+            }
+          }
+          start--;
+        }
+        start++;
+      }
+    }
+    formatElementContext(elementList, pasteElementList, startIndex, {
+      isBreakWhenWrap: true
+    });
+  }
+  draw.insertElementList(pasteElementList);
+}
+function pasteImage(host, file) {
+  const draw = host.getDraw();
+  const isReadonly = draw.isReadonly();
+  if (isReadonly)
+    return;
+  const rangeManager = draw.getRange();
+  const { startIndex } = rangeManager.getRange();
+  const elementList = draw.getElementList();
+  const fileReader = new FileReader();
+  fileReader.readAsDataURL(file);
+  fileReader.onload = () => {
+    const image = new Image();
+    const value = fileReader.result;
+    image.src = value;
+    image.onload = () => {
+      const imageElement = {
+        value,
+        type: ElementType.IMAGE,
+        width: image.width,
+        height: image.height
+      };
+      if (~startIndex) {
+        formatElementContext(elementList, [imageElement], startIndex);
+      }
+      draw.insertElementList([imageElement]);
+    };
+  };
+}
+function pasteByEvent(host, evt) {
+  const draw = host.getDraw();
+  const isReadonly = draw.isReadonly();
+  if (isReadonly)
+    return;
+  const clipboardData = evt.clipboardData;
+  if (!clipboardData)
+    return;
+  const { paste } = draw.getOverride();
+  if (paste) {
+    paste(evt);
+    return;
+  }
+  let isHTML = false;
+  for (let i = 0; i < clipboardData.items.length; i++) {
+    const item = clipboardData.items[i];
+    if (item.type === "text/html") {
+      isHTML = true;
+      break;
+    }
+  }
+  for (let i = 0; i < clipboardData.items.length; i++) {
+    const item = clipboardData.items[i];
+    if (item.kind === "string") {
+      if (item.type === "text/plain" && !isHTML) {
+        item.getAsString((plainText) => {
+          host.input(plainText);
+        });
+        break;
+      }
+      if (item.type === "text/html" && isHTML) {
+        item.getAsString((htmlText) => {
+          pastHTML(host, htmlText);
+        });
+        break;
+      }
+    } else if (item.kind === "file") {
+      if (item.type.includes("image")) {
+        const file = item.getAsFile();
+        if (file) {
+          pasteImage(host, file);
+        }
+      }
+    }
+  }
+}
+async function pasteByApi(host, options) {
+  const draw = host.getDraw();
+  const isReadonly = draw.isReadonly();
+  if (isReadonly)
+    return;
+  const { paste } = draw.getOverride();
+  if (paste) {
+    paste();
+    return;
+  }
+  if (options == null ? void 0 : options.isPlainText) {
+    const text = await navigator.clipboard.readText();
+    if (text) {
+      host.input(text);
+    }
+  } else {
+    const clipboardData = await navigator.clipboard.read();
+    let isHTML = false;
+    for (const item of clipboardData) {
+      if (item.types.includes("text/html")) {
+        isHTML = true;
+        break;
+      }
+    }
+    for (const item of clipboardData) {
+      if (item.types.includes("text/plain") && !isHTML) {
+        const textBlob = await item.getType("text/plain");
+        const text = await textBlob.text();
+        if (text) {
+          host.input(text);
+        }
+      } else if (item.types.includes("text/html") && isHTML) {
+        const htmlTextBlob = await item.getType("text/html");
+        const htmlText = await htmlTextBlob.text();
+        if (htmlText) {
+          pastHTML(host, htmlText);
+        }
+      } else if (item.types.some((type) => type.startsWith("image/"))) {
+        const type = item.types.find((type2) => type2.startsWith("image/"));
+        const imageBlob = await item.getType(type);
+        pasteImage(host, imageBlob);
+      }
+    }
+  }
+}
 class CursorAgent {
   constructor(draw, canvasEvent) {
     __publicField(this, "draw");
@@ -4555,95 +4717,7 @@ class CursorAgent {
     const clipboardData = evt.clipboardData;
     if (!clipboardData)
       return;
-    const { paste } = this.draw.getOverride();
-    if (paste) {
-      paste(evt);
-      return;
-    }
-    const rangeManager = this.draw.getRange();
-    const { startIndex } = rangeManager.getRange();
-    const elementList = this.draw.getElementList();
-    let isHTML = false;
-    for (let i = 0; i < clipboardData.items.length; i++) {
-      const item = clipboardData.items[i];
-      if (item.type === "text/html") {
-        isHTML = true;
-        break;
-      }
-    }
-    for (let i = 0; i < clipboardData.items.length; i++) {
-      const item = clipboardData.items[i];
-      if (item.kind === "string") {
-        if (item.type === "text/plain" && !isHTML) {
-          item.getAsString((plainText) => {
-            this.canvasEvent.input(plainText);
-          });
-        }
-        if (item.type === "text/html" && isHTML) {
-          item.getAsString((htmlText) => {
-            const pasteElementList = getElementListByHTML(htmlText, {
-              innerWidth: this.draw.getOriginalInnerWidth()
-            });
-            if (~startIndex && !rangeManager.getIsSelectAll()) {
-              const anchorElement = elementList[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)) {
-                    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 (element.value === ZERO || element.value === "\n") {
-                          continue;
-                        }
-                        pasteElementList.splice(start, 0, element);
-                        start++;
-                      }
-                    }
-                    start--;
-                  }
-                  start++;
-                }
-              }
-              formatElementContext(elementList, pasteElementList, startIndex, {
-                isBreakWhenWrap: true
-              });
-            }
-            this.draw.insertElementList(pasteElementList);
-          });
-        }
-      } else if (item.kind === "file") {
-        if (item.type.includes("image")) {
-          const file = item.getAsFile();
-          if (file) {
-            const fileReader = new FileReader();
-            fileReader.readAsDataURL(file);
-            fileReader.onload = () => {
-              const image = new Image();
-              const value = fileReader.result;
-              image.src = value;
-              image.onload = () => {
-                const imageElement = {
-                  value,
-                  type: ElementType.IMAGE,
-                  width: image.width,
-                  height: image.height
-                };
-                if (~startIndex) {
-                  formatElementContext(elementList, [imageElement], startIndex);
-                }
-                this.draw.insertElementList([imageElement]);
-              };
-            };
-          }
-        }
-      }
-    }
+    pasteByEvent(this.canvasEvent, evt);
     evt.preventDefault();
   }
   _compositionstart() {
@@ -5330,6 +5404,7 @@ function keydown(evt, host) {
     }
     if (curIndex === null)
       return;
+    draw.getGlobalEvent().setCanvasEventAbility();
     rangeManager.setRange(curIndex, curIndex);
     draw.render({ curIndex });
   } else if (evt.key === KeyMap.Delete) {
@@ -5350,6 +5425,7 @@ function keydown(evt, host) {
     }
     if (curIndex === null)
       return;
+    draw.getGlobalEvent().setCanvasEventAbility();
     rangeManager.setRange(curIndex, curIndex);
     draw.render({ curIndex });
   } else if (evt.key === KeyMap.Enter) {
@@ -7050,6 +7126,8 @@ class RangeManager {
     const elementList = this.draw.getElementList();
     const range = this.getRange();
     const { startIndex, endIndex } = range;
+    if (!~startIndex && !~endIndex)
+      return;
     const startElement = elementList[startIndex];
     const endElement = elementList[endIndex];
     if (startIndex === endIndex) {
@@ -7685,12 +7763,16 @@ class PageNumber {
 class ScrollObserver {
   constructor(draw) {
     __publicField(this, "draw");
+    __publicField(this, "options");
+    __publicField(this, "scrollContainer");
     __publicField(this, "_observer", debounce(() => {
       const { intersectionPageNo, visiblePageNoList } = this.getPageVisibleInfo();
       this.draw.setIntersectionPageNo(intersectionPageNo);
       this.draw.setVisiblePageNoList(visiblePageNoList);
     }, 150));
     this.draw = draw;
+    this.options = draw.getOptions();
+    this.scrollContainer = this.getScrollContainer();
     setTimeout(() => {
       if (!window.scrollY) {
         this._observer();
@@ -7698,15 +7780,18 @@ class ScrollObserver {
     });
     this._addEvent();
   }
+  getScrollContainer() {
+    return this.options.scrollContainerSelector ? document.querySelector(this.options.scrollContainerSelector) || document : document;
+  }
   _addEvent() {
-    document.addEventListener("scroll", this._observer);
+    this.scrollContainer.addEventListener("scroll", this._observer);
   }
   removeEvent() {
-    document.removeEventListener("scroll", this._observer);
+    this.scrollContainer.removeEventListener("scroll", this._observer);
   }
   getElementVisibleInfo(element) {
     const rect = element.getBoundingClientRect();
-    const viewHeight = Math.max(document.documentElement.clientHeight, window.innerHeight);
+    const viewHeight = this.scrollContainer === document ? Math.max(document.documentElement.clientHeight, window.innerHeight) : this.scrollContainer.clientHeight;
     const visibleHeight = Math.min(rect.bottom, viewHeight) - Math.max(rect.top, 0);
     return {
       intersectionHeight: visibleHeight > 0 ? visibleHeight : 0
@@ -11860,6 +11945,9 @@ class Draw {
   getCanvasEvent() {
     return this.canvasEvent;
   }
+  getGlobalEvent() {
+    return this.globalEvent;
+  }
   getListener() {
     return this.listener;
   }
@@ -12016,6 +12104,9 @@ class Draw {
     if (this.listener.pageScaleChange) {
       this.listener.pageScaleChange(payload);
     }
+    if (this.eventBus.isSubscribe("pageScaleChange")) {
+      this.eventBus.emit("pageScaleChange", payload);
+    }
   }
   getPagePixelRatio() {
     return this.pagePixelRatio || window.devicePixelRatio;
@@ -13179,14 +13270,11 @@ class CommandAdapt {
   copy() {
     this.canvasEvent.copy();
   }
-  async paste() {
+  paste(payload) {
     const isReadonly = this.draw.isReadonly();
     if (isReadonly)
       return;
-    const text = await navigator.clipboard.readText();
-    if (text) {
-      this.canvasEvent.input(text);
-    }
+    pasteByApi(this.canvasEvent, payload);
   }
   selectAll() {
     this.canvasEvent.selectAll();
@@ -13905,45 +13993,52 @@ class CommandAdapt {
     const positionContext = this.position.getPositionContext();
     if (!positionContext.isTable)
       return;
-    const { index: index2, trIndex } = positionContext;
+    const { index: index2, trIndex, tdIndex } = positionContext;
     const originalElementList = this.draw.getOriginalElementList();
     const element = originalElementList[index2];
-    const curTrList = element.trList;
-    const curTr = curTrList[trIndex];
-    if (curTrList.length <= 1) {
+    const trList = element.trList;
+    const curTr = trList[trIndex];
+    const curTdRowIndex = curTr.tdList[tdIndex].rowIndex;
+    if (trList.length <= 1) {
       this.deleteTable();
       return;
     }
+    for (let r = 0; r < curTdRowIndex; r++) {
+      const tr = trList[r];
+      const tdList = tr.tdList;
+      for (let d = 0; d < tdList.length; d++) {
+        const td = tdList[d];
+        if (td.rowIndex + td.rowspan > curTdRowIndex) {
+          td.rowspan--;
+        }
+      }
+    }
     for (let d = 0; d < curTr.tdList.length; d++) {
       const td = curTr.tdList[d];
       if (td.rowspan > 1) {
-        let start = trIndex + 1;
-        while (start < trIndex + td.rowspan) {
-          const tdId = getUUID();
-          const tr = curTrList[start];
-          tr.tdList.splice(d, 0, {
-            id: tdId,
-            rowspan: 1,
-            colspan: 1,
-            value: [
-              {
-                value: ZERO,
-                size: 16,
-                tableId: element.id,
-                trId: tr.id,
-                tdId
-              }
-            ]
-          });
-          start += 1;
-        }
+        const tdId = getUUID();
+        const nextTr = trList[trIndex + 1];
+        nextTr.tdList.splice(d, 0, {
+          id: tdId,
+          rowspan: td.rowspan - 1,
+          colspan: td.colspan,
+          value: [
+            {
+              value: ZERO,
+              size: 16,
+              tableId: element.id,
+              trId: nextTr.id,
+              tdId
+            }
+          ]
+        });
       }
     }
-    curTrList.splice(trIndex, 1);
+    trList.splice(trIndex, 1);
     this.position.setPositionContext({
       isTable: false
     });
-    this.range.setRange(0, 0);
+    this.range.clearRange();
     this.draw.render({
       curIndex: positionContext.index
     });
@@ -14754,10 +14849,10 @@ class CommandAdapt {
     const startPageNo = positionList[startIndex].pageNo;
     const endPageNo = positionList[endIndex].pageNo;
     const rangeRects = [];
+    const height = this.draw.getOriginalHeight();
+    const pageGap = this.draw.getOriginalPageGap();
     const selectionPositionList = this.position.getSelectionPositionList();
     if (selectionPositionList) {
-      const height = this.draw.getOriginalHeight();
-      const pageGap = this.draw.getOriginalPageGap();
       let currentRowNo = null;
       let currentX = 0;
       let rangeRect = null;
@@ -14782,6 +14877,16 @@ class CommandAdapt {
           rangeRects.push(rangeRect);
         }
       }
+    } else {
+      const positionList2 = this.position.getPositionList();
+      const position = positionList2[endIndex];
+      const { coordinate: { rightTop }, pageNo, lineHeight } = position;
+      rangeRects.push({
+        x: rightTop[0],
+        y: rightTop[1] + pageNo * (height + pageGap),
+        width: 0,
+        height: lineHeight
+      });
     }
     return deepClone({
       isCollapsed,
@@ -16108,7 +16213,8 @@ class Editor {
       printPixelRatio: 3,
       maskMargin: [0, 0, 0, 0],
       letterClass: [LETTER_CLASS.ENGLISH],
-      contextMenuDisableKeys: []
+      contextMenuDisableKeys: [],
+      scrollContainerSelector: ""
     }, options), {
       header: headerOptions,
       footer: footerOptions,