@hufe921/canvas-editor 0.9.37 → 0.9.38

package/CHANGELOG.md

@@ -1,3 +1,25 @@
+## [0.9.38](https://github.com/Hufe921/canvas-editor/compare/v0.9.37...v0.9.38) (2023-07-12)
+
+
+### Bug Fixes
+
+* limit word break element type #212 ([d7424f8](https://github.com/Hufe921/canvas-editor/commit/d7424f8b8798cc889df3b54748523c1367af2776)), closes [#212](https://github.com/Hufe921/canvas-editor/issues/212)
+
+
+### Chores
+
+* add plugin tip ([8c6eee1](https://github.com/Hufe921/canvas-editor/commit/8c6eee1a57f5130919d1bdfa6a1067615f3a95e3))
+* update README.md ([ccb1aa7](https://github.com/Hufe921/canvas-editor/commit/ccb1aa70abacd9398f9ff0e5b066ad51cfc27274))
+* update release script ([4d1ad65](https://github.com/Hufe921/canvas-editor/commit/4d1ad650746ff2c4aa58dde2b725704ab9e7a639))
+
+
+### Features
+
+* add word break option #212 ([d471165](https://github.com/Hufe921/canvas-editor/commit/d471165430e27e5322160e22da5a5f53fc969b0f)), closes [#212](https://github.com/Hufe921/canvas-editor/issues/212)
+* get page value and append element api #211 ([85a9dcb](https://github.com/Hufe921/canvas-editor/commit/85a9dcbcf29a2fc0e1f89293c4f3ecbc976868b7)), closes [#211](https://github.com/Hufe921/canvas-editor/issues/211)
+
+
+
 ## [0.9.37](https://github.com/Hufe921/canvas-editor/compare/v0.9.36...v0.9.37) (2023-07-02)
 
 

package/README.md

@@ -5,8 +5,9 @@
 ## tips
 
 1. [docs](https://hufe.club/canvas-editor-docs/)
-2. The render layer by svg is under development, see [feature/svg](https://github.com/Hufe921/canvas-editor/tree/feature/svg)
-3. The export pdf feature is available now, see [feature/pdf](https://github.com/Hufe921/canvas-editor/tree/feature/pdf)
+2. [canvas-editor-plugin](https://github.com/Hufe921/canvas-editor-plugin)
+3. The render layer by svg is under development, see [feature/svg](https://github.com/Hufe921/canvas-editor/tree/feature/svg)
+4. The export pdf feature is available now, see [feature/pdf](https://github.com/Hufe921/canvas-editor/tree/feature/pdf)
 
 ## usage
 
@@ -28,11 +29,10 @@ new Editor(document.querySelector(".canvas-editor"), [
 
 ## next features
 
-1. [plugin](https://github.com/Hufe921/canvas-editor/tree/feature/plugin)
-2. improve performance
-3. control rules
-4. table paging
-5. [CRDT](https://github.com/Hufe921/canvas-editor/tree/feature/CRDT)
+1. improve performance
+2. control rules
+3. table paging
+4. [CRDT](https://github.com/Hufe921/canvas-editor/tree/feature/CRDT)
 
 ## snapshot
 

package/dist/canvas-editor.es.js

@@ -23,7 +23,7 @@ var __publicField = (obj, key, value) => {
   return value;
 };
 var index = "";
-const version = "0.9.37";
+const version = "0.9.38";
 var MaxHeightRatio;
 (function(MaxHeightRatio2) {
   MaxHeightRatio2["HALF"] = "half";
@@ -5464,6 +5464,7 @@ function drop(evt, host) {
 }
 const LETTER_REG = /[a-zA-Z]/;
 const NUMBER_LIKE_REG = /[0-9.]/;
+const WORD_LIKE_REG = /[^a-zA-Z][a-zA-Z]/;
 function dblclick(host, evt) {
   const draw = host.getDraw();
   const position = draw.getPosition();
@@ -5958,6 +5959,11 @@ var PaperDirection;
   PaperDirection2["VERTICAL"] = "vertical";
   PaperDirection2["HORIZONTAL"] = "horizontal";
 })(PaperDirection || (PaperDirection = {}));
+var WordBreak;
+(function(WordBreak2) {
+  WordBreak2["BREAK_ALL"] = "break-all";
+  WordBreak2["BREAK_WORD"] = "break-word";
+})(WordBreak || (WordBreak = {}));
 class Position {
   constructor(draw) {
     __publicField(this, "cursorPosition");
@@ -7065,6 +7071,24 @@ class TextParticle {
     this.curStyle = "";
     this.cacheMeasureText = new Map();
   }
+  measureWord(ctx, elementList, curIndex) {
+    let width = 0;
+    let endElement = elementList[curIndex];
+    let i = curIndex;
+    while (i < elementList.length) {
+      const element = elementList[i];
+      if (!LETTER_REG.test(element.value)) {
+        endElement = element;
+        break;
+      }
+      width += this.measureText(ctx, element).width;
+      i++;
+    }
+    return {
+      width,
+      endElement
+    };
+  }
   measurePunctuationWidth(ctx, element) {
     if (!element || !PUNCTUATION_LIST.includes(element.value))
       return 0;
@@ -10733,6 +10757,27 @@ class Draw {
       });
     }
   }
+  appendElementList(elementList, options = {}) {
+    if (!elementList.length)
+      return;
+    formatElementList(elementList, {
+      isHandleFirstElement: false,
+      editorOptions: this.options
+    });
+    let curIndex;
+    const { isPrepend } = options;
+    if (isPrepend) {
+      this.elementList.splice(1, 0, ...elementList);
+      curIndex = elementList.length;
+    } else {
+      this.elementList.push(...elementList);
+      curIndex = this.elementList.length - 1;
+    }
+    this.range.setRange(curIndex, curIndex);
+    this.render({
+      curIndex
+    });
+  }
   spliceElementList(elementList, start, deleteCount, ...items) {
     var _a;
     if (deleteCount > 0) {
@@ -10947,11 +10992,16 @@ class Draw {
       isSetCursor: false
     });
   }
-  getValue() {
+  getValue(options = {}) {
     const { width, height, margins, watermark } = this.options;
+    const { pageNo } = options;
+    let mainElementList = this.elementList;
+    if (Number.isInteger(pageNo) && pageNo >= 0 && pageNo < this.pageRowList.length) {
+      mainElementList = this.pageRowList[pageNo].flatMap((row) => row.elementList);
+    }
     const data2 = {
       header: zipElementList(this.headerElementList),
-      main: zipElementList(this.elementList),
+      main: zipElementList(mainElementList),
       footer: zipElementList(this.footerElementList)
     };
     return {
@@ -11265,8 +11315,19 @@ class Draw {
         style: this._getFont(element, scale)
       });
       const preElement = elementList[i - 1];
-      const nextElement = elementList[i + 1];
-      const curRowWidth = curRow.width + metrics.width + this.textParticle.measurePunctuationWidth(ctx, nextElement);
+      let nextElement = elementList[i + 1];
+      let curRowWidth = curRow.width + metrics.width;
+      if (this.options.wordBreak === WordBreak.BREAK_WORD) {
+        if ((!(preElement == null ? void 0 : preElement.type) || (preElement == null ? void 0 : preElement.type) === ElementType.TEXT) && (!element.type || element.type === ElementType.TEXT)) {
+          const word = `${(preElement == null ? void 0 : preElement.value) || ""}${element.value}`;
+          if (WORD_LIKE_REG.test(word)) {
+            const { width, endElement } = this.textParticle.measureWord(ctx, elementList, i);
+            curRowWidth += width;
+            nextElement = endElement;
+          }
+          curRowWidth += this.textParticle.measurePunctuationWidth(ctx, nextElement);
+        }
+      }
       if (element.listId) {
         if (element.listId !== listId) {
           listIndex = 0;
@@ -11752,6 +11813,7 @@ class Command {
     __publicField(this, "executePaperDirection");
     __publicField(this, "executeSetPaperMargin");
     __publicField(this, "executeInsertElementList");
+    __publicField(this, "executeAppendElementList");
     __publicField(this, "executeSetValue");
     __publicField(this, "executeRemoveControl");
     __publicField(this, "executeSetLocale");
@@ -11830,6 +11892,7 @@ class Command {
     this.executePaperDirection = adapt.paperDirection.bind(adapt);
     this.executeSetPaperMargin = adapt.setPaperMargin.bind(adapt);
     this.executeInsertElementList = adapt.insertElementList.bind(adapt);
+    this.executeAppendElementList = adapt.appendElementList.bind(adapt);
     this.executeSetValue = adapt.setValue.bind(adapt);
     this.executeRemoveControl = adapt.removeControl.bind(adapt);
     this.executeSetLocale = adapt.setLocale.bind(adapt);
@@ -13388,8 +13451,8 @@ class CommandAdapt {
   getImage() {
     return this.draw.getDataURL();
   }
-  getValue() {
-    return this.draw.getValue();
+  getValue(options) {
+    return this.draw.getValue(options);
   }
   getWordCount() {
     return this.workerManager.getWordCount();
@@ -13443,6 +13506,14 @@ class CommandAdapt {
     formatElementContext(elementList, payload, startIndex);
     this.draw.insertElementList(payload);
   }
+  appendElementList(elementList, options) {
+    if (!elementList.length)
+      return;
+    const isReadonly = this.draw.isReadonly();
+    if (isReadonly)
+      return;
+    this.draw.appendElementList(elementList, options);
+  }
   setValue(payload) {
     this.draw.setValue(payload);
   }
@@ -14398,7 +14469,8 @@ class Editor {
       defaultHyperlinkColor: "#0000FF",
       paperDirection: PaperDirection.VERTICAL,
       inactiveAlpha: 0.6,
-      historyMaxRecordCount: 100
+      historyMaxRecordCount: 100,
+      wordBreak: WordBreak.BREAK_WORD
     }, options), {
       header: headerOptions,
       footer: footerOptions,
@@ -14448,5 +14520,5 @@ class Editor {
     this.use = plugin.use.bind(plugin);
   }
 }
-export { BlockType, Command, ControlType, EDITOR_COMPONENT, Editor, EditorComponent, EditorMode, EditorZone, ElementType, ImageDisplay, KeyMap, ListStyle, ListType, MaxHeightRatio, NumberType, PageMode, PaperDirection, RowFlex, TableBorder, TitleLevel, VerticalAlign, Editor as default };
+export { BlockType, Command, ControlType, EDITOR_COMPONENT, Editor, EditorComponent, EditorMode, EditorZone, ElementType, ImageDisplay, KeyMap, ListStyle, ListType, MaxHeightRatio, NumberType, PageMode, PaperDirection, RowFlex, TableBorder, TitleLevel, VerticalAlign, WordBreak, Editor as default };
 //# sourceMappingURL=canvas-editor.es.js.map