@hufe921/canvas-editor 0.9.74 → 0.9.75

package/CHANGELOG.md

@@ -1,3 +1,25 @@
+## [0.9.75](https://github.com/Hufe921/canvas-editor/compare/v0.9.74...v0.9.75) (2024-04-27)
+
+
+### Bug Fixes
+
+* control element rendering boundary error in table #527 ([f41cea2](https://github.com/Hufe921/canvas-editor/commit/f41cea244309e98ca880c74aaa4e0f3a2811ad66)), closes [#527](https://github.com/Hufe921/canvas-editor/issues/527)
+* list position error when setting row flex #523 ([3fdd4de](https://github.com/Hufe921/canvas-editor/commit/3fdd4dedf434a45ded0c7114cf1cd0c8a1e94a18)), closes [#523](https://github.com/Hufe921/canvas-editor/issues/523)
+* search for duplicate keyword boundary error #528 ([d4c6cd2](https://github.com/Hufe921/canvas-editor/commit/d4c6cd25f639ea5d933e2c4a2d006c96e3138219)), closes [#528](https://github.com/Hufe921/canvas-editor/issues/528)
+* word break boundary error #521 ([4d1a0b6](https://github.com/Hufe921/canvas-editor/commit/4d1a0b69f876eada2d0c5d866bd25464d2587a79)), closes [#521](https://github.com/Hufe921/canvas-editor/issues/521)
+
+
+### Chores
+
+* add editor option settings in the demo ([07956ca](https://github.com/Hufe921/canvas-editor/commit/07956caec20eea75c994e968429028ebcfb174f4))
+
+
+### Features
+
+* draw line break marker #520 ([4c2b8fc](https://github.com/Hufe921/canvas-editor/commit/4c2b8fc20af98533796d5c4fec0d8d0c3d876116)), closes [#520](https://github.com/Hufe921/canvas-editor/issues/520)
+
+
+
 ## [0.9.74](https://github.com/Hufe921/canvas-editor/compare/v0.9.73...v0.9.74) (2024-04-19)
 
 

package/dist/canvas-editor.es.js

@@ -23,7 +23,7 @@ var __publicField = (obj, key, value) => {
   return value;
 };
 var index = "";
-const version = "0.9.74";
+const version = "0.9.75";
 var MaxHeightRatio;
 (function(MaxHeightRatio2) {
   MaxHeightRatio2["HALF"] = "half";
@@ -3866,6 +3866,7 @@ function formatElementList(elementList, options) {
       const { editorOptions: { control: controlOption, checkbox: checkboxOption } } = options;
       const controlId = getUUID();
       elementList.splice(i, 1);
+      const controlContext = pickObject(el, EDITOR_ELEMENT_CONTEXT_ATTR);
       const controlDefaultStyle = pickObject(el.control, CONTROL_STYLE_ATTR);
       const thePrePostfixArg = __spreadProps(__spreadValues({}, controlDefaultStyle), {
         color: editorOptions.control.bracketColor
@@ -3873,7 +3874,7 @@ function formatElementList(elementList, options) {
       const prefixStrList = splitText(prefix || controlOption.prefix);
       for (let p = 0; p < prefixStrList.length; p++) {
         const value2 = prefixStrList[p];
-        elementList.splice(i, 0, __spreadProps(__spreadValues({}, thePrePostfixArg), {
+        elementList.splice(i, 0, __spreadProps(__spreadValues(__spreadValues({}, controlContext), thePrePostfixArg), {
           controlId,
           value: value2,
           type: el.type,
@@ -3891,7 +3892,7 @@ function formatElementList(elementList, options) {
             let valueStyleIndex = 0;
             for (let v = 0; v < valueSets.length; v++) {
               const valueSet = valueSets[v];
-              elementList.splice(i, 0, {
+              elementList.splice(i, 0, __spreadProps(__spreadValues({}, controlContext), {
                 controlId,
                 value: "",
                 type: el.type,
@@ -3901,13 +3902,13 @@ function formatElementList(elementList, options) {
                   code: valueSet.code,
                   value: codeList.includes(valueSet.code)
                 }
-              });
+              }));
               i++;
               const valueStrList = splitText(valueSet.value);
               for (let e = 0; e < valueStrList.length; e++) {
                 const value2 = valueStrList[e];
                 const isLastLetter = e === valueStrList.length - 1;
-                elementList.splice(i, 0, __spreadProps(__spreadValues(__spreadValues({}, controlDefaultStyle), valueStyleList[valueStyleIndex]), {
+                elementList.splice(i, 0, __spreadProps(__spreadValues(__spreadValues(__spreadValues({}, controlContext), controlDefaultStyle), valueStyleList[valueStyleIndex]), {
                   controlId,
                   value: value2 === "\n" ? ZERO : value2,
                   letterSpacing: isLastLetter ? checkboxOption.gap : 0,
@@ -3938,7 +3939,7 @@ function formatElementList(elementList, options) {
           for (let v = 0; v < valueList.length; v++) {
             const element = valueList[v];
             const value2 = element.value;
-            elementList.splice(i, 0, __spreadProps(__spreadValues(__spreadValues({}, controlDefaultStyle), element), {
+            elementList.splice(i, 0, __spreadProps(__spreadValues(__spreadValues(__spreadValues({}, controlContext), controlDefaultStyle), element), {
               controlId,
               value: value2 === "\n" ? ZERO : value2,
               type: element.type || ElementType.TEXT,
@@ -3955,7 +3956,7 @@ function formatElementList(elementList, options) {
         const placeholderStrList = splitText(placeholder);
         for (let p = 0; p < placeholderStrList.length; p++) {
           const value2 = placeholderStrList[p];
-          elementList.splice(i, 0, __spreadProps(__spreadValues({}, thePlaceholderArgs), {
+          elementList.splice(i, 0, __spreadProps(__spreadValues(__spreadValues({}, controlContext), thePlaceholderArgs), {
             controlId,
             value: value2 === "\n" ? ZERO : value2,
             type: el.type,
@@ -3968,7 +3969,7 @@ function formatElementList(elementList, options) {
       const postfixStrList = splitText(postfix || controlOption.postfix);
       for (let p = 0; p < postfixStrList.length; p++) {
         const value2 = postfixStrList[p];
-        elementList.splice(i, 0, __spreadProps(__spreadValues({}, thePrePostfixArg), {
+        elementList.splice(i, 0, __spreadProps(__spreadValues(__spreadValues({}, controlContext), thePrePostfixArg), {
           controlId,
           value: value2,
           type: el.type,
@@ -7329,10 +7330,11 @@ class Position {
     let index2 = startIndex;
     for (let i = 0; i < rowList.length; i++) {
       const curRow = rowList[i];
+      const curRowWidth = curRow.width + (curRow.offsetX || 0);
       if (curRow.rowFlex === RowFlex.CENTER) {
-        x += (innerWidth - curRow.width) / 2;
+        x += (innerWidth - curRowWidth) / 2;
       } else if (curRow.rowFlex === RowFlex.RIGHT) {
-        x += innerWidth - curRow.width;
+        x += innerWidth - curRowWidth;
       }
       x += curRow.offsetX || 0;
       const tablePreX = x;
@@ -8575,7 +8577,7 @@ class Search {
       let index2 = text.indexOf(payload2);
       while (index2 !== -1) {
         matchStartIndexList.push(index2);
-        index2 = text.indexOf(payload2, index2 + 1);
+        index2 = text.indexOf(payload2, index2 + payload2.length);
       }
       for (let m = 0; m < matchStartIndexList.length; m++) {
         const startIndex = matchStartIndexList[m];
@@ -13089,6 +13091,41 @@ class ListParticle {
     }
   }
 }
+const _LineBreakParticle = class {
+  constructor(draw) {
+    __publicField(this, "options");
+    this.options = draw.getOptions();
+  }
+  render(ctx, element, x, y) {
+    const { scale, lineBreak: { color, lineWidth } } = this.options;
+    ctx.save();
+    ctx.beginPath();
+    const top = y - _LineBreakParticle.HEIGHT * scale / 2;
+    const left2 = x + element.metrics.width;
+    ctx.translate(left2, top);
+    ctx.scale(scale, scale);
+    ctx.strokeStyle = color;
+    ctx.lineWidth = lineWidth;
+    ctx.lineCap = "round";
+    ctx.lineJoin = "round";
+    ctx.beginPath();
+    ctx.moveTo(8, 0);
+    ctx.lineTo(12, 0);
+    ctx.lineTo(12, 6);
+    ctx.lineTo(3, 6);
+    ctx.moveTo(3, 6);
+    ctx.lineTo(6, 3);
+    ctx.moveTo(3, 6);
+    ctx.lineTo(6, 9);
+    ctx.stroke();
+    ctx.closePath();
+    ctx.restore();
+  }
+};
+let LineBreakParticle = _LineBreakParticle;
+__publicField(LineBreakParticle, "WIDTH", 12);
+__publicField(LineBreakParticle, "HEIGHT", 9);
+__publicField(LineBreakParticle, "GAP", 3);
 class Placeholder {
   constructor(draw) {
     __publicField(this, "draw");
@@ -13121,10 +13158,14 @@ class Placeholder {
     });
   }
   _computePositionList() {
+    const { lineBreak, scale } = this.options;
     const headerExtraHeight = this.draw.getHeader().getExtraHeight();
     const innerWidth = this.draw.getInnerWidth();
     const margins = this.draw.getMargins();
-    const startX = margins[3];
+    let startX = margins[3];
+    if (!lineBreak.disabled) {
+      startX += (LineBreakParticle.WIDTH + LineBreakParticle.GAP) * scale;
+    }
     const startY = margins[0] + headerExtraHeight;
     this.position.computePageRowPosition({
       positionList: this.positionList,
@@ -13163,7 +13204,8 @@ class Placeholder {
       rowList: this.rowList,
       pageNo: 0,
       startIndex: 0,
-      innerWidth
+      innerWidth,
+      isDrawLineBreak: false
     });
     ctx.restore();
   }
@@ -13378,6 +13420,7 @@ class Draw {
     __publicField(this, "checkboxParticle");
     __publicField(this, "blockParticle");
     __publicField(this, "listParticle");
+    __publicField(this, "lineBreakParticle");
     __publicField(this, "control");
     __publicField(this, "workerManager");
     __publicField(this, "scrollObserver");
@@ -13439,6 +13482,7 @@ class Draw {
     this.checkboxParticle = new CheckboxParticle(this);
     this.blockParticle = new BlockParticle(this);
     this.listParticle = new ListParticle(this);
+    this.lineBreakParticle = new LineBreakParticle(this);
     this.control = new Control(this);
     this.scrollObserver = new ScrollObserver(this);
     this.selectionObserver = new SelectionObserver(this);
@@ -13492,6 +13536,7 @@ class Draw {
       this.setEditorData(this.printModeData);
       this.printModeData = null;
     }
+    this.range.clearRange();
     this.mode = payload;
     this.render({
       isSetCursor: false,
@@ -13669,6 +13714,9 @@ class Draw {
   getRange() {
     return this.range;
   }
+  getLineBreakParticle() {
+    return this.lineBreakParticle;
+  }
   getHeaderElementList() {
     return this.header.getElementList();
   }
@@ -14462,8 +14510,10 @@ class Draw {
           const word = `${(preElement == null ? void 0 : preElement.value) || ""}${element.value}`;
           if (this.WORD_LIKE_REG.test(word)) {
             const { width, endElement } = this.textParticle.measureWord(ctx, elementList, i);
-            curRowWidth += width;
-            nextElement = endElement;
+            if (width <= availableWidth) {
+              curRowWidth += width;
+              nextElement = endElement;
+            }
           }
           curRowWidth += this.textParticle.measurePunctuationWidth(ctx, nextElement);
         }
@@ -14476,7 +14526,10 @@ class Draw {
         }
       }
       listId = element.listId;
-      if (element.type === ElementType.SEPARATOR || 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 > availableWidth || i !== 0 && element.value === ZERO || (preElement == null ? void 0 : preElement.listId) !== element.listId) {
+      const isForceBreak = element.type === ElementType.SEPARATOR || 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 || (preElement == null ? void 0 : preElement.listId) !== element.listId || i !== 0 && element.value === ZERO;
+      const isWidthNotEnough = curRowWidth > availableWidth;
+      if (isForceBreak || isWidthNotEnough) {
+        curRow.isWidthNotEnough = isWidthNotEnough && !isForceBreak;
         if (curRow.startIndex === 0 && curRow.elementList.length === 1 && INLINE_ELEMENT_TYPE.includes(element.type)) {
           curRow.height = defaultBasicRowMarginHeight;
         }
@@ -14588,9 +14641,9 @@ class Draw {
   drawRow(ctx, payload) {
     var _a, _b, _c, _d, _e, _f;
     this._drawHighlight(ctx, payload);
-    const { rowList, pageNo, elementList, positionList, startIndex, zone: zone2 } = payload;
+    const { scale, tdPadding, group: group2, lineBreak } = this.options;
+    const { rowList, pageNo, elementList, positionList, startIndex, zone: zone2, isDrawLineBreak = !lineBreak.disabled } = payload;
     const isPrintMode = this.mode === EditorMode.PRINT;
-    const { scale, tdPadding, group: group2 } = this.options;
     const { isCrossRowCol, tableId } = this.range.getRange();
     let index2 = startIndex;
     for (let i = 0; i < rowList.length; i++) {
@@ -14668,6 +14721,9 @@ class Draw {
             this.textParticle.complete();
           }
         }
+        if (isDrawLineBreak && !curRow.isWidthNotEnough && j === curRow.elementList.length - 1) {
+          this.lineBreakParticle.render(ctx, element, x, y + curRow.height / 2);
+        }
         if ((_a = element.control) == null ? void 0 : _a.border) {
           if (((_b = preElement == null ? void 0 : preElement.control) == null ? void 0 : _b.border) && preElement.controlId !== element.controlId) {
             this.control.drawBorder(ctx);
@@ -14754,7 +14810,8 @@ class Draw {
                 pageNo,
                 startIndex: 0,
                 innerWidth: (td.width - tdPaddingWidth) * scale,
-                zone: zone2
+                zone: zone2,
+                isDrawLineBreak
               });
             }
           }
@@ -16845,7 +16902,7 @@ class CommandAdapt {
     if (!~startIndex && !~endIndex)
       return;
     const { value, width, height } = payload;
-    this.draw.insertElementList([
+    this.insertElementList([
       {
         value,
         width,
@@ -18480,6 +18537,11 @@ const defaultBackground = {
   size: BackgroundSize.COVER,
   repeat: BackgroundRepeat.NO_REPEAT
 };
+const defaultLineBreak = {
+  disabled: true,
+  color: "#CCCCCC",
+  lineWidth: 1.5
+};
 class Editor {
   constructor(container, data2, options = {}) {
     __publicField(this, "command");
@@ -18502,6 +18564,7 @@ class Editor {
     const pageBreakOptions = __spreadValues(__spreadValues({}, defaultPageBreakOption), options.pageBreak);
     const zoneOptions = __spreadValues(__spreadValues({}, defaultZoneOption), options.zone);
     const backgroundOptions = __spreadValues(__spreadValues({}, defaultBackground), options.background);
+    const lineBreakOptions = __spreadValues(__spreadValues({}, defaultLineBreak), options.lineBreak);
     const editorOptions = __spreadProps(__spreadValues({
       mode: EditorMode.EDIT,
       defaultType: "TEXT",
@@ -18558,7 +18621,8 @@ class Editor {
       group: groupOptions,
       pageBreak: pageBreakOptions,
       zone: zoneOptions,
-      background: backgroundOptions
+      background: backgroundOptions,
+      lineBreak: lineBreakOptions
     });
     data2 = deepClone(data2);
     let headerElementList = [];