@hufe921/canvas-editor 0.9.57 → 0.9.58

package/CHANGELOG.md

@@ -1,3 +1,26 @@
+## [0.9.58](https://github.com/Hufe921/canvas-editor/compare/v0.9.57...v0.9.58) (2023-12-08)
+
+
+### Bug Fixes
+
+* empty list don't render placeholder ([910f756](https://github.com/Hufe921/canvas-editor/commit/910f75662f62dc38f068a71feb4cd68150b83341))
+* multiple empty lists render error in first row ([1487033](https://github.com/Hufe921/canvas-editor/commit/1487033d75e7c94c2fdf748217f79642181eaaf1))
+* not render margin indicator in print mode #354 ([3f1babe](https://github.com/Hufe921/canvas-editor/commit/3f1babec68b5d22babade28214ca9a7212d3cf8a)), closes [#354](https://github.com/Hufe921/canvas-editor/issues/354)
+* repeated input in firefox browser #357 ([6de3ad8](https://github.com/Hufe921/canvas-editor/commit/6de3ad8b21b557ddc9e218d22b283348dcbd9211)), closes [#357](https://github.com/Hufe921/canvas-editor/issues/357)
+
+
+### Chores
+
+* export splitText function ([bcbd879](https://github.com/Hufe921/canvas-editor/commit/bcbd879e0f44443f0bcac71402330b37def434b2))
+* update eslint fixAll option ([bba0b09](https://github.com/Hufe921/canvas-editor/commit/bba0b090f33e4f3e391a14e22c2b579f132b5348))
+
+
+### Features
+
+* add control indentation option #345 ([5f1cf3a](https://github.com/Hufe921/canvas-editor/commit/5f1cf3ab37aa22180eee45c02486b478dfbc6b99)), closes [#345](https://github.com/Hufe921/canvas-editor/issues/345)
+
+
+
 ## [0.9.57](https://github.com/Hufe921/canvas-editor/compare/v0.9.56...v0.9.57) (2023-12-03)
 
 

package/dist/canvas-editor.es.js

@@ -23,7 +23,7 @@ var __publicField = (obj, key, value) => {
   return value;
 };
 var index = "";
-const version = "0.9.57";
+const version = "0.9.58";
 var MaxHeightRatio;
 (function(MaxHeightRatio2) {
   MaxHeightRatio2["HALF"] = "half";
@@ -3589,6 +3589,11 @@ var ImageDisplay;
   ImageDisplay2["INLINE"] = "inline";
   ImageDisplay2["BLOCK"] = "block";
 })(ImageDisplay || (ImageDisplay = {}));
+var ControlIndentation;
+(function(ControlIndentation2) {
+  ControlIndentation2["ROW_START"] = "rowStart";
+  ControlIndentation2["VALUE_START"] = "valueStart";
+})(ControlIndentation || (ControlIndentation = {}));
 function unzipElementList(elementList) {
   const result = [];
   for (let v = 0; v < elementList.length; v++) {
@@ -3765,7 +3770,7 @@ function formatElementList(elementList, options) {
                 const isLastLetter = e === valueStrList.length - 1;
                 elementList.splice(i, 0, __spreadProps(__spreadValues({}, valueStyleList[valueStyleIndex]), {
                   controlId,
-                  value: value2,
+                  value: value2 === "\n" ? ZERO : value2,
                   letterSpacing: isLastLetter ? checkboxOption.gap : 0,
                   control: el.control,
                   controlComponent: ControlComponent.VALUE
@@ -3795,7 +3800,7 @@ function formatElementList(elementList, options) {
               const value2 = valueStrList[e];
               elementList.splice(i, 0, __spreadProps(__spreadValues({}, element), {
                 controlId,
-                value: value2,
+                value: value2 === "\n" ? ZERO : value2,
                 type: element.type || ElementType.TEXT,
                 control: el.control,
                 controlComponent: ControlComponent.VALUE
@@ -3814,7 +3819,7 @@ function formatElementList(elementList, options) {
           const value2 = placeholderStrList[p];
           elementList.splice(i, 0, __spreadValues({
             controlId,
-            value: value2,
+            value: value2 === "\n" ? ZERO : value2,
             type: el.type,
             control: el.control,
             controlComponent: ControlComponent.PLACEHOLDER
@@ -6008,7 +6013,7 @@ function compositionend(host, evt) {
       if (host.compositionInfo) {
         input(evt.data, host);
       }
-    });
+    }, 1);
   }
   const cursor = draw.getCursor();
   cursor.clearAgentDomValue();
@@ -6469,9 +6474,7 @@ class Position {
       } else if (curRow.rowFlex === RowFlex.RIGHT) {
         x += innerWidth - curRow.width;
       }
-      if (curRow.isList) {
-        x += curRow.offsetX || 0;
-      }
+      x += curRow.offsetX || 0;
       const tablePreX = x;
       const tablePreY = y;
       for (let j = 0; j < curRow.elementList.length; j++) {
@@ -6575,6 +6578,21 @@ class Position {
       startRowIndex += rowList.length;
     }
   }
+  computeRowPosition(payload) {
+    const { row, innerWidth } = payload;
+    const positionList = [];
+    this.computePageRowPosition({
+      positionList,
+      innerWidth,
+      rowList: [deepClone(row)],
+      pageNo: 0,
+      startX: 0,
+      startY: 0,
+      startIndex: 0,
+      startRowIndex: 0
+    });
+    return positionList;
+  }
   setCursorPosition(position) {
     this.cursorPosition = position;
   }
@@ -12410,7 +12428,7 @@ class Draw {
     return `${el.italic ? "italic " : ""}${el.bold ? "bold " : ""}${size * scale}px ${font}`;
   }
   computeRowList(innerWidth, elementList) {
-    var _a, _b, _c, _d, _e;
+    var _a, _b, _c, _d, _e, _f;
     const { defaultSize, defaultRowMargin, scale, tdPadding, defaultTabWidth } = this.options;
     const defaultBasicRowMarginHeight = this.getDefaultBasicRowMarginHeight();
     const canvas = document.createElement("canvas");
@@ -12440,7 +12458,7 @@ class Draw {
         boundingBoxAscent: 0,
         boundingBoxDescent: 0
       };
-      const offsetX = element.listId ? listStyleMap.get(element.listId) || 0 : 0;
+      const offsetX = curRow.offsetX || element.listId && listStyleMap.get(element.listId) || 0;
       const availableWidth = innerWidth - offsetX;
       if (element.type === ElementType.IMAGE || element.type === ElementType.LATEX) {
         const elementWidth = element.width * scale;
@@ -12676,7 +12694,7 @@ class Draw {
       }
       listId = element.listId;
       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 > availableWidth || i !== 0 && element.value === ZERO || (preElement == null ? void 0 : preElement.listId) !== element.listId) {
-        if (curRow.startIndex === 0 && curRow.elementList.length === 1 && (INLINE_ELEMENT_TYPE.includes(element.type) || element.listId)) {
+        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 > availableWidth) {
@@ -12696,6 +12714,19 @@ class Draw {
           rowFlex: (_e = elementList[i + 1]) == null ? void 0 : _e.rowFlex,
           isPageBreak: element.type === ElementType.PAGE_BREAK
         };
+        if (rowElement.controlComponent !== ControlComponent.PREFIX && ((_f = rowElement.control) == null ? void 0 : _f.indentation) === ControlIndentation.VALUE_START) {
+          const preStartIndex = curRow.elementList.findIndex((el) => el.controlId === rowElement.controlId && el.controlComponent !== ControlComponent.PREFIX);
+          if (~preStartIndex) {
+            const preRowPositionList = this.position.computeRowPosition({
+              row: curRow,
+              innerWidth: this.getInnerWidth()
+            });
+            const valueStartPosition = preRowPositionList[preStartIndex];
+            if (valueStartPosition) {
+              row.offsetX = valueStartPosition.coordinate.leftTop[0];
+            }
+          }
+        }
         if (element.listId) {
           row.isList = true;
           row.offsetX = listStyleMap.get(element.listId);
@@ -12929,6 +12960,7 @@ class Draw {
     this.blockParticle.clear();
   }
   _drawPage(payload) {
+    var _a;
     const { elementList, positionList, rowList, pageNo } = payload;
     const { inactiveAlpha, pageMode, header, footer, pageNumber } = this.options;
     const innerWidth = this.getInnerWidth();
@@ -12936,7 +12968,9 @@ class Draw {
     ctx.globalAlpha = !this.zone.isMainActive() ? inactiveAlpha : 1;
     this._clearPage(pageNo);
     this.background.render(ctx, pageNo);
-    this.margin.render(ctx, pageNo);
+    if (this.mode !== EditorMode.PRINT) {
+      this.margin.render(ctx, pageNo);
+    }
     const index2 = rowList[0].startIndex;
     this.drawRow(ctx, {
       elementList,
@@ -12964,7 +12998,7 @@ class Draw {
     if (pageMode !== PageMode.CONTINUITY && this.options.watermark.data) {
       this.waterMark.render(ctx);
     }
-    if (this.elementList.length <= 1) {
+    if (this.elementList.length <= 1 && !((_a = this.elementList[0]) == null ? void 0 : _a.listId)) {
       this.placeholder.render(ctx);
     }
   }
@@ -16462,5 +16496,5 @@ class Editor {
     this.use = plugin.use.bind(plugin);
   }
 }
-export { BlockType, Command, ControlType, EDITOR_COMPONENT, Editor, EditorComponent, EditorMode, EditorZone, ElementType, INTERNAL_CONTEXT_MENU_KEY, ImageDisplay, KeyMap, LETTER_CLASS, ListStyle, ListType, MaxHeightRatio, NumberType, PageMode, PaperDirection, RowFlex, TableBorder, TdBorder, TdSlash, TitleLevel, VerticalAlign, WordBreak, Editor as default };
+export { BlockType, Command, ControlIndentation, ControlType, EDITOR_COMPONENT, Editor, EditorComponent, EditorMode, EditorZone, ElementType, INTERNAL_CONTEXT_MENU_KEY, ImageDisplay, KeyMap, LETTER_CLASS, ListStyle, ListType, MaxHeightRatio, NumberType, PageMode, PaperDirection, RowFlex, TableBorder, TdBorder, TdSlash, TitleLevel, VerticalAlign, WordBreak, Editor as default, splitText };
 //# sourceMappingURL=canvas-editor.es.js.map