@hufe921/canvas-editor 0.9.28 → 0.9.29

package/CHANGELOG.md

@@ -1,3 +1,26 @@
+## [0.9.29](https://github.com/Hufe921/canvas-editor/compare/v0.9.28...v0.9.29) (2023-04-01)
+
+
+### Bug Fixes
+
+* delete rowFlex when row position change #164 ([5c3ce57](https://github.com/Hufe921/canvas-editor/commit/5c3ce57c24253cfe9b16ddc682f0f75aaab653fd)), closes [#164](https://github.com/Hufe921/canvas-editor/issues/164)
+* failed to execute 'toDataURL' #163 ([f11d5c8](https://github.com/Hufe921/canvas-editor/commit/f11d5c806ea5cc308b59df4eaa58bf82998a3c50)), closes [#163](https://github.com/Hufe921/canvas-editor/issues/163)
+* render composing text error ([310e0e9](https://github.com/Hufe921/canvas-editor/commit/310e0e91fbe4ef64343b5cc746ec4e7d471df974))
+* table cell text render position error #166 ([266915a](https://github.com/Hufe921/canvas-editor/commit/266915af09be90a1a12092fdff2d266d62f3c90d)), closes [#166](https://github.com/Hufe921/canvas-editor/issues/166)
+* table cell vertical align error after page scaled #165 ([1fa1d10](https://github.com/Hufe921/canvas-editor/commit/1fa1d10fc9c279eb1d91b804484019d02fec945d)), closes [#165](https://github.com/Hufe921/canvas-editor/issues/165)
+
+
+### Documentation
+
+* update snapshot ([e0791cf](https://github.com/Hufe921/canvas-editor/commit/e0791cf5f74341547a86809e80c647a3f0fa5a2a))
+
+
+### Features
+
+* avoid punctuation at the beginning of a row ([29a988a](https://github.com/Hufe921/canvas-editor/commit/29a988a1d4d57a98068a299986ddbe38a52d80a4))
+
+
+
 ## [0.9.28](https://github.com/Hufe921/canvas-editor/compare/v0.9.27...v0.9.28) (2023-03-27)
 
 

package/README.md

@@ -35,7 +35,7 @@ new Editor(document.querySelector(".canvas-editor"), [
 
 ## snapshot
 
-![image](https://github.com/Hufe921/canvas-editor/blob/main/src/assets/snapshots/main_v0.9.23.png)
+![image](https://github.com/Hufe921/canvas-editor/blob/main/src/assets/snapshots/main_v0.9.29.png)
 
 ## install
 

package/dist/canvas-editor.es.js

@@ -23,7 +23,7 @@ var __publicField = (obj, key, value) => {
   return value;
 };
 var index = "";
-const version = "0.9.28";
+const version = "0.9.29";
 var MaxHeightRatio;
 (function(MaxHeightRatio2) {
   MaxHeightRatio2["HALF"] = "half";
@@ -32,6 +32,7 @@ var MaxHeightRatio;
 })(MaxHeightRatio || (MaxHeightRatio = {}));
 const ZERO = "\u200B";
 const WRAP = "\n";
+const PUNCTUATION_LIST = ["\xB7", "\u3001", ":", "\uFF1A", ",", "\uFF0C", ".", "\u3002", ";", "\uFF1B", "?", "\uFF1F", "!", "\uFF01"];
 const maxHeightRadioMapping = {
   [MaxHeightRatio.HALF]: 1 / 2,
   [MaxHeightRatio.ONE_THIRD]: 1 / 3,
@@ -231,6 +232,12 @@ const TEXTLIKE_ELEMENT_TYPE = [
   ElementType.CONTROL,
   ElementType.DATE
 ];
+const INLINE_ELEMENT_TYPE = [
+  ElementType.BLOCK,
+  ElementType.PAGE_BREAK,
+  ElementType.SEPARATOR,
+  ElementType.TABLE
+];
 var ControlType;
 (function(ControlType2) {
   ControlType2["TEXT"] = "text";
@@ -272,6 +279,7 @@ class ImageParticle {
     } else {
       const imageLoadPromise = new Promise((resolve, reject) => {
         const img = new Image();
+        img.setAttribute("crossOrigin", "Anonymous");
         img.src = element.value;
         img.onload = () => {
           ctx.drawImage(img, x, y, width, height);
@@ -4570,6 +4578,15 @@ function keydown(evt, host) {
         evt.preventDefault();
         return;
       }
+      const startElement = elementList[startIndex];
+      if (isCollapsed && startElement.rowFlex && startElement.value === ZERO) {
+        const rowList = draw.getRowList();
+        const rowNo = positionList[startIndex].rowNo;
+        const rowFlexElementList = rowList[rowNo].elementList;
+        rowFlexElementList.forEach((element) => {
+          delete element.rowFlex;
+        });
+      }
       if (!isCollapsed) {
         elementList.splice(startIndex + 1, endIndex - startIndex);
       } else {
@@ -4803,6 +4820,7 @@ function keydown(evt, host) {
   }
 }
 function input(data2, host) {
+  var _a;
   const draw = host.getDraw();
   const isReadonly = draw.isReadonly();
   if (isReadonly)
@@ -4811,16 +4829,17 @@ function input(data2, host) {
   const cursorPosition = position.getCursorPosition();
   if (!data2 || !cursorPosition)
     return;
+  const isComposing = host.isComposing;
+  if (isComposing && ((_a = host.compositionInfo) == null ? void 0 : _a.value) === data2)
+    return;
   const control = draw.getControl();
   if (control.isPartRangeInControlOutside()) {
     return;
   }
-  const isComposing = host.isComposing;
+  removeComposingInput(host);
   if (!isComposing) {
     const cursor = draw.getCursor();
     cursor.clearAgentDomValue();
-  } else {
-    removeComposingInput(host);
   }
   const activeControl = control.getActiveControl();
   const { TEXT, HYPERLINK, SUBSCRIPT, SUPERSCRIPT, DATE } = ElementType;
@@ -4835,15 +4854,17 @@ function input(data2, host) {
     restArg = { tdId, trId, tableId };
   }
   const elementList = draw.getElementList();
-  const element = elementList[endIndex];
+  const endElement = elementList[endIndex];
+  const endNextElement = elementList[endIndex + 1];
+  const copyElement = endElement.value === ZERO && endNextElement ? endNextElement : endElement;
   const inputData = splitText(text).map((value) => {
     const newElement = __spreadValues({
       value
     }, restArg);
     const nextElement = elementList[endIndex + 1];
-    if (element.type === TEXT || !element.type && element.value !== ZERO || element.type === HYPERLINK && (nextElement == null ? void 0 : nextElement.type) === HYPERLINK || element.type === DATE && (nextElement == null ? void 0 : nextElement.type) === DATE || element.type === SUBSCRIPT && (nextElement == null ? void 0 : nextElement.type) === SUBSCRIPT || element.type === SUPERSCRIPT && (nextElement == null ? void 0 : nextElement.type) === SUPERSCRIPT) {
+    if (copyElement.type === TEXT || !copyElement.type && copyElement.value !== ZERO || copyElement.type === HYPERLINK && (nextElement == null ? void 0 : nextElement.type) === HYPERLINK || copyElement.type === DATE && (nextElement == null ? void 0 : nextElement.type) === DATE || copyElement.type === SUBSCRIPT && (nextElement == null ? void 0 : nextElement.type) === SUBSCRIPT || copyElement.type === SUPERSCRIPT && (nextElement == null ? void 0 : nextElement.type) === SUPERSCRIPT) {
       EDITOR_ELEMENT_COPY_ATTR.forEach((attr) => {
-        const value2 = element[attr];
+        const value2 = copyElement[attr];
         if (value2 !== void 0) {
           newElement[attr] = value2;
         }
@@ -5056,21 +5077,23 @@ function compositionstart(host) {
 }
 function compositionend(host, evt) {
   host.isComposing = false;
-  removeComposingInput(host);
   const draw = host.getDraw();
-  const cursor = draw.getCursor();
   if (!evt.data) {
-    const agentText = cursor.getAgentDomValue();
-    if (agentText) {
-      input(agentText, host);
-    } else {
-      const rangeManager = draw.getRange();
-      const { endIndex: curIndex } = rangeManager.getRange();
-      draw.render({
-        curIndex
-      });
-    }
+    removeComposingInput(host);
+    const rangeManager = draw.getRange();
+    const { endIndex: curIndex } = rangeManager.getRange();
+    draw.render({
+      curIndex,
+      isSubmitHistory: false
+    });
+  } else {
+    setTimeout(() => {
+      if (host.compositionInfo) {
+        input(evt.data, host);
+      }
+    });
   }
+  const cursor = draw.getCursor();
   cursor.clearAgentDomValue();
 }
 var composition = {
@@ -5531,7 +5554,7 @@ class Position {
               });
               if (td.verticalAlign === VerticalAlign.MIDDLE || td.verticalAlign == VerticalAlign.BOTTOM) {
                 const rowsHeight = rowList2.reduce((pre, cur) => pre + cur.height, 0);
-                const blankHeight = td.height - tdGap - rowsHeight;
+                const blankHeight = (td.height - tdGap) * scale - rowsHeight;
                 const offsetHeight = td.verticalAlign === VerticalAlign.MIDDLE ? blankHeight / 2 : blankHeight;
                 if (Math.floor(offsetHeight) > 0) {
                   td.positionList.forEach((tdPosition) => {
@@ -6429,6 +6452,11 @@ class TextParticle {
     this.curStyle = "";
     this.cacheMeasureText = new Map();
   }
+  measurePunctuationWidth(ctx, element) {
+    if (!element || !PUNCTUATION_LIST.includes(element.value))
+      return 0;
+    return this.measureText(ctx, element).width;
+  }
   measureText(ctx, element) {
     const id = `${element.value}${ctx.font}`;
     const cacheTextMetrics = this.cacheMeasureText.get(id);
@@ -7199,6 +7227,9 @@ class Header {
     this.rowList = [];
     this.positionList = [];
   }
+  getRowList() {
+    return this.rowList;
+  }
   setElementList(elementList) {
     this.elementList = elementList;
   }
@@ -9343,6 +9374,9 @@ class Footer {
     this.rowList = [];
     this.positionList = [];
   }
+  getRowList() {
+    return this.rowList;
+  }
   setElementList(elementList) {
     this.elementList = elementList;
   }
@@ -9660,9 +9694,25 @@ class Draw {
   getPageList() {
     return this.pageList;
   }
-  getRowList() {
+  getTableRowList(sourceElementList) {
+    const positionContext = this.position.getPositionContext();
+    const { index: index2, trIndex, tdIndex } = positionContext;
+    return sourceElementList[index2].trList[trIndex].tdList[tdIndex].rowList;
+  }
+  getOriginalRowList() {
+    const zoneManager = this.getZone();
+    if (zoneManager.isHeaderActive()) {
+      return this.header.getRowList();
+    }
+    if (zoneManager.isFooterActive()) {
+      return this.footer.getRowList();
+    }
     return this.rowList;
   }
+  getRowList() {
+    const positionContext = this.position.getPositionContext();
+    return positionContext.isTable ? this.getTableRowList(this.getOriginalElementList()) : this.getOriginalRowList();
+  }
   getPageRowList() {
     return this.pageRowList;
   }
@@ -10035,9 +10085,9 @@ class Draw {
       if (element.type === ElementType.IMAGE || element.type === ElementType.LATEX) {
         const elementWidth = element.width * scale;
         const elementHeight = element.height * scale;
-        const curRowWidth = element.imgDisplay === ImageDisplay.INLINE ? 0 : curRow.width;
-        if (curRowWidth + elementWidth > innerWidth) {
-          const surplusWidth = innerWidth - curRowWidth;
+        const curRowWidth2 = element.imgDisplay === ImageDisplay.INLINE ? 0 : curRow.width;
+        if (curRowWidth2 + elementWidth > innerWidth) {
+          const surplusWidth = innerWidth - curRowWidth2;
           element.width = surplusWidth;
           element.height = elementHeight * surplusWidth / elementWidth;
           metrics.width = element.width;
@@ -10227,8 +10277,13 @@ class Draw {
         style: this._getFont(element, scale)
       });
       const preElement = elementList[i - 1];
-      if ((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 || curRow.width + metrics.width > innerWidth || i !== 0 && element.value === ZERO) {
-        if ((preElement == null ? void 0 : preElement.rowFlex) === RowFlex.ALIGNMENT && curRow.width + metrics.width > innerWidth) {
+      const nextElement = elementList[i + 1];
+      const curRowWidth = curRow.width + metrics.width + this.textParticle.measurePunctuationWidth(ctx, nextElement);
+      if (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 || curRowWidth > innerWidth || i !== 0 && element.value === ZERO) {
+        if (curRow.startIndex === 0 && curRow.elementList.length === 1 && INLINE_ELEMENT_TYPE.includes(element.type)) {
+          curRow.height = defaultBasicRowMarginHeight;
+        }
+        if ((preElement == null ? void 0 : preElement.rowFlex) === RowFlex.ALIGNMENT && curRowWidth > innerWidth) {
           const gap = (innerWidth - curRow.width) / curRow.elementList.length;
           for (let e = 0; e < curRow.elementList.length; e++) {
             const el = curRow.elementList[e];
@@ -11479,7 +11534,7 @@ class CommandAdapt {
     }
     const element = {
       type: ElementType.TABLE,
-      value: !startIndex ? "" : ZERO,
+      value: "",
       colgroup,
       trList
     };