@hufe921/canvas-editor 0.9.71 → 0.9.72

package/CHANGELOG.md

@@ -1,3 +1,20 @@
+## [0.9.72](https://github.com/Hufe921/canvas-editor/compare/v0.9.71...v0.9.72) (2024-04-06)
+
+
+### Bug Fixes
+
+* cannot page when merge cells across columns in the same row #41 ([5851e61](https://github.com/Hufe921/canvas-editor/commit/5851e61cfcbb14fa199b507dc429917075659161)), closes [#41](https://github.com/Hufe921/canvas-editor/issues/41)
+* format text class elements boundary error ([95b337d](https://github.com/Hufe921/canvas-editor/commit/95b337de05df74a07d086dbec6c6c52ab95ba43a))
+* strikeout style rendering position #498 ([46e153d](https://github.com/Hufe921/canvas-editor/commit/46e153d588e78302e26827461a06682bbccd75aa)), closes [#498](https://github.com/Hufe921/canvas-editor/issues/498)
+* table range drawing boundary error ([1df98b9](https://github.com/Hufe921/canvas-editor/commit/1df98b9359f3ec4184a7045cfcea93e156ef7f9f))
+
+
+### Features
+
+* add isTable property to the RangeContext interface ([9ad991a](https://github.com/Hufe921/canvas-editor/commit/9ad991a3934fc284bb829d2652a739cfbec80eee))
+
+
+
 ## [0.9.71](https://github.com/Hufe921/canvas-editor/compare/v0.9.70...v0.9.71) (2024-03-29)
 
 

package/dist/canvas-editor.es.js

@@ -23,7 +23,7 @@ var __publicField = (obj, key, value) => {
   return value;
 };
 var index = "";
-const version = "0.9.71";
+const version = "0.9.72";
 var MaxHeightRatio;
 (function(MaxHeightRatio2) {
   MaxHeightRatio2["HALF"] = "half";
@@ -79,6 +79,7 @@ const LETTER_CLASS = {
   SWEDISH: "A-Za-z\xC5\xE5\xC4\xE4\xD6\xF6",
   GREEK: "\u0391\u03B1\u0392\u03B2\u0393\u03B3\u0394\u03B4\u0395\u03B5\u0396\u03B6\u0397\u03B7\u0398\u03B8\u0399\u03B9\u039A\u03BA\u039B\u03BB\u039C\u03BC\u039D\u03BD\u039E\u03BE\u039F\u03BF\u03A0\u03C0\u03A1\u03C1\u03A3\u03C3\u03C2\u03A4\u03C4\u03A5\u03C5\u03A6\u03C6\u03A7\u03C7\u03A8\u03C8\u03A9\u03C9"
 };
+const METRICS_BASIS_TEXT = "\u65E5";
 var RowFlex;
 (function(RowFlex2) {
   RowFlex2["LEFT"] = "left";
@@ -3963,7 +3964,7 @@ function formatElementList(elementList, options) {
         i++;
       }
       i--;
-    } else if ((!el.type || el.type === ElementType.TEXT) && el.value.length > 1) {
+    } else if ((!el.type || TEXTLIKE_ELEMENT_TYPE.includes(el.type)) && el.value.length > 1) {
       elementList.splice(i, 1);
       const valueList = splitText(el.value);
       for (let v = 0; v < valueList.length; v++) {
@@ -4281,6 +4282,9 @@ function convertElementToDom(element, options) {
   if (element.underline) {
     dom.style.textDecoration = "underline";
   }
+  if (element.strikeout) {
+    dom.style.textDecoration += " line-through";
+  }
   dom.innerText = element.value.replace(new RegExp(`${ZERO}`, "g"), "\n");
   return dom;
 }
@@ -4478,9 +4482,12 @@ function convertTextNodeToElement(textNode) {
   if (style.backgroundColor !== "rgba(0, 0, 0, 0)") {
     element.highlight = style.backgroundColor;
   }
-  if (style.textDecorationLine === "underline") {
+  if (style.textDecorationLine.includes("underline")) {
     element.underline = true;
   }
+  if (style.textDecorationLine.includes("line-through")) {
+    element.strikeout = true;
+  }
   return element;
 }
 function getElementListByHTML(htmlText, options) {
@@ -8555,9 +8562,10 @@ class Strikeout extends AbstractRichText {
   render(ctx) {
     if (!this.fillRect.width)
       return;
-    const { strikeoutColor } = this.options;
+    const { scale, strikeoutColor } = this.options;
     const { x, y, width } = this.fillRect;
     ctx.save();
+    ctx.lineWidth = scale;
     ctx.strokeStyle = strikeoutColor;
     const adjustY = y + 0.5;
     ctx.beginPath();
@@ -8678,6 +8686,15 @@ class TextParticle {
     this.curStyle = "";
     this.cacheMeasureText = new Map();
   }
+  measureBasisWord(ctx, font) {
+    ctx.save();
+    ctx.font = font;
+    const textMetrics = this.measureText(ctx, {
+      value: METRICS_BASIS_TEXT
+    });
+    ctx.restore();
+    return textMetrics;
+  }
   measureWord(ctx, elementList, curIndex) {
     const LETTER_REG = this.draw.getLetterReg();
     let width = 0;
@@ -13921,12 +13938,15 @@ class Draw {
     ctx.wordSpacing = "0px";
     ctx.direction = "ltr";
   }
-  _getFont(el, scale = 1) {
+  getElementFont(el, scale = 1) {
     const { defaultSize, defaultFont } = this.options;
     const font = el.font || defaultFont;
     const size = el.actualSize || el.size || defaultSize;
     return `${el.italic ? "italic " : ""}${el.bold ? "bold " : ""}${size * scale}px ${font}`;
   }
+  getElementSize(el) {
+    return el.actualSize || el.size || this.options.defaultSize;
+  }
   computeRowList(innerWidth, elementList) {
     var _a, _b, _c, _d, _e, _f, _g, _h;
     const { defaultSize, defaultRowMargin, scale, tdPadding, defaultTabWidth } = this.options;
@@ -14096,7 +14116,8 @@ class Draw {
               const tr = trList2[r];
               const trHeight = tr.height * scale;
               if (curPagePreHeight + rowMarginHeight + preTrHeight + trHeight > height2) {
-                if (((_d = element.colgroup) == null ? void 0 : _d.length) !== tr.tdList.length) {
+                const rowColCount = tr.tdList.reduce((pre, cur) => pre + cur.colspan, 0);
+                if (((_d = element.colgroup) == null ? void 0 : _d.length) !== rowColCount) {
                   deleteCount = 0;
                 }
                 break;
@@ -14184,7 +14205,7 @@ class Draw {
           element.actualSize = Math.ceil(size * 0.6);
         }
         metrics.height = (element.actualSize || size) * scale;
-        ctx.font = this._getFont(element);
+        ctx.font = this.getElementFont(element);
         const fontMetrics = this.textParticle.measureText(ctx, element);
         metrics.width = fontMetrics.width * scale;
         if (element.letterSpacing) {
@@ -14202,7 +14223,7 @@ class Draw {
       const height = rowMargin + metrics.boundingBoxAscent + metrics.boundingBoxDescent + rowMargin;
       const rowElement = Object.assign(element, {
         metrics,
-        style: this._getFont(element, scale)
+        style: this.getElementFont(element, scale)
       });
       if ((_e = rowElement.control) == null ? void 0 : _e.minWidth) {
         if (rowElement.controlComponent) {
@@ -14453,23 +14474,35 @@ class Draw {
           this.underline.render(ctx);
         }
         if (element.strikeout) {
-          this.strikeout.recordFillInfo(ctx, x, y + curRow.height / 2, metrics.width);
+          if (!element.type || TEXTLIKE_ELEMENT_TYPE.includes(element.type)) {
+            if (preElement && this.getElementSize(preElement) !== this.getElementSize(element)) {
+              this.strikeout.render(ctx);
+            }
+            const standardMetrics = this.textParticle.measureBasisWord(ctx, this.getElementFont(element));
+            let adjustY = y + offsetY + standardMetrics.actualBoundingBoxDescent * scale - metrics.height / 2;
+            if (element.type === ElementType.SUBSCRIPT) {
+              adjustY += this.subscriptParticle.getOffsetY(element);
+            } else if (element.type === ElementType.SUPERSCRIPT) {
+              adjustY += this.superscriptParticle.getOffsetY(element);
+            }
+            this.strikeout.recordFillInfo(ctx, x, adjustY, metrics.width);
+          }
         } else if (preElement == null ? void 0 : preElement.strikeout) {
           this.strikeout.render(ctx);
         }
         const { zone: currentZone, startIndex: startIndex2, endIndex } = this.range.getRange();
         if (currentZone === zone2 && startIndex2 !== endIndex && startIndex2 <= index2 && index2 <= endIndex) {
-          if (startIndex2 === index2) {
-            const nextElement = elementList[startIndex2 + 1];
-            if (nextElement && nextElement.value === ZERO) {
-              rangeRecord.x = x + metrics.width;
-              rangeRecord.y = y;
-              rangeRecord.height = curRow.height;
-              rangeRecord.width += this.options.rangeMinWidth;
-            }
-          } else {
-            const positionContext = this.position.getPositionContext();
-            if (!positionContext.isTable && !element.tdId || positionContext.tdId === element.tdId) {
+          const positionContext = this.position.getPositionContext();
+          if (!positionContext.isTable && !element.tdId || positionContext.tdId === element.tdId) {
+            if (startIndex2 === index2) {
+              const nextElement = elementList[startIndex2 + 1];
+              if (nextElement && nextElement.value === ZERO) {
+                rangeRecord.x = x + metrics.width;
+                rangeRecord.y = y;
+                rangeRecord.height = curRow.height;
+                rangeRecord.width += this.options.rangeMinWidth;
+              }
+            } else {
               let rangeWidth = metrics.width;
               if (rangeWidth === 0 && curRow.elementList.length === 1) {
                 rangeWidth = this.options.rangeMinWidth;
@@ -16877,6 +16910,7 @@ class CommandAdapt {
       });
     }
     const zone2 = this.draw.getZone().getZone();
+    const isTable = this.position.getPositionContext().isTable;
     return deepClone({
       isCollapsed,
       startElement,
@@ -16884,7 +16918,8 @@ class CommandAdapt {
       startPageNo,
       endPageNo,
       rangeRects,
-      zone: zone2
+      zone: zone2,
+      isTable
     });
   }
   getRangeRow() {