@hufe921/canvas-editor 0.9.36 → 0.9.38

package/CHANGELOG.md

@@ -1,3 +1,48 @@
+## [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)
+
+
+### Chores
+
+* add plugin demo ([107c4b8](https://github.com/Hufe921/canvas-editor/commit/107c4b86a8703bd1ab01ab7fc9d3cc8a1078591d))
+* update next features roadmap ([ca28454](https://github.com/Hufe921/canvas-editor/commit/ca284540493b985081c86623b569eeef4bf9dcdc))
+
+
+### Documentation
+
+* add plugin ([d0e1c9b](https://github.com/Hufe921/canvas-editor/commit/d0e1c9b5267e15c0afa94bbd400502735846050b))
+
+
+### Features
+
+* add fallback placeholder image ([366374e](https://github.com/Hufe921/canvas-editor/commit/366374eb105a49360f7ddecfdb63420e48254698))
+* add plugin interface ([ad0bb32](https://github.com/Hufe921/canvas-editor/commit/ad0bb32b70cd2a7b8cf2c25a83091e92cc13f53b))
+* add setValue command api #210 ([193bd21](https://github.com/Hufe921/canvas-editor/commit/193bd21f7049a565abddd3ae9be761d95d49fea1)), closes [#210](https://github.com/Hufe921/canvas-editor/issues/210)
+* smooth signature drawing ([c328778](https://github.com/Hufe921/canvas-editor/commit/c3287783abfb27670e3572db8c431f23cc04c6ce))
+
+
+
 ## [0.9.36](https://github.com/Hufe921/canvas-editor/compare/v0.9.35...v0.9.36) (2023-06-16)
 
 

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. improve list and title
-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.36";
+const version = "0.9.38";
 var MaxHeightRatio;
 (function(MaxHeightRatio2) {
   MaxHeightRatio2["HALF"] = "half";
@@ -184,6 +184,13 @@ function cloneProperty(properties, sourceElement, targetElement) {
     }
   }
 }
+function convertStringToBase64(input2) {
+  const encoder = new TextEncoder();
+  const data2 = encoder.encode(input2);
+  const charArray = Array.from(data2, (byte) => String.fromCharCode(byte));
+  const base64 = window.btoa(charArray.join(""));
+  return base64;
+}
 const CURSOR_AGENT_HEIGHT = 12;
 const defaultCursorOption = {
   width: 1,
@@ -419,6 +426,23 @@ class ImageParticle {
   addImageObserver(promise) {
     this.draw.getImageObserver().add(promise);
   }
+  getFallbackImage(width, height) {
+    const tileSize = 8;
+    const x = (width - Math.ceil(width / tileSize) * tileSize) / 2;
+    const y = (height - Math.ceil(height / tileSize) * tileSize) / 2;
+    const svg = `<svg xmlns="http://www.w3.org/2000/svg" width="${width}" height="${height}" viewBox="0 0 ${width} ${height}">
+                  <rect width="${width}" height="${height}" fill="url(#mosaic)" />
+                  <defs>
+                    <pattern id="mosaic" x="${x}" y="${y}" width="${tileSize * 2}" height="${tileSize * 2}" patternUnits="userSpaceOnUse">
+                      <rect width="${tileSize}" height="${tileSize}" fill="#cccccc" />
+                      <rect width="${tileSize}" height="${tileSize}" fill="#cccccc" transform="translate(${tileSize}, ${tileSize})" />
+                    </pattern>
+                  </defs>
+                </svg>`;
+    const fallbackImage = new Image();
+    fallbackImage.src = `data:image/svg+xml;base64,${convertStringToBase64(svg)}`;
+    return fallbackImage;
+  }
   render(ctx, element, x, y) {
     const { scale } = this.options;
     const width = element.width * scale;
@@ -437,6 +461,11 @@ class ImageParticle {
           resolve(element);
         };
         img.onerror = (error) => {
+          const fallbackImage = this.getFallbackImage(width, height);
+          fallbackImage.onload = () => {
+            ctx.drawImage(fallbackImage, x, y, width, height);
+            this.imageCache.set(element.id, fallbackImage);
+          };
           reject(error);
         };
       });
@@ -5435,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();
@@ -5887,6 +5917,10 @@ class HistoryManager {
   isCanRedo() {
     return !!this.redoStack.length;
   }
+  recovery() {
+    this.undoStack = [];
+    this.redoStack = [];
+  }
 }
 var EditorComponent;
 (function(EditorComponent2) {
@@ -5925,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");
@@ -7032,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;
@@ -10700,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) {
@@ -10914,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 {
@@ -10930,6 +11013,33 @@ class Draw {
       data: data2
     };
   }
+  setValue(payload) {
+    const { header, main, footer } = payload;
+    if (!header && !main && !footer)
+      return;
+    if (header) {
+      formatElementList(header, {
+        editorOptions: this.options
+      });
+      this.header.setElementList(header);
+    }
+    if (main) {
+      formatElementList(main, {
+        editorOptions: this.options
+      });
+      this.elementList = main;
+    }
+    if (footer) {
+      formatElementList(footer, {
+        editorOptions: this.options
+      });
+      this.footer.setElementList(footer);
+    }
+    this.historyManager.recovery();
+    this.render({
+      isSetCursor: false
+    });
+  }
   _wrapContainer(rootContainer) {
     const container = document.createElement("div");
     rootContainer.append(container);
@@ -11205,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;
@@ -11692,6 +11813,8 @@ class Command {
     __publicField(this, "executePaperDirection");
     __publicField(this, "executeSetPaperMargin");
     __publicField(this, "executeInsertElementList");
+    __publicField(this, "executeAppendElementList");
+    __publicField(this, "executeSetValue");
     __publicField(this, "executeRemoveControl");
     __publicField(this, "executeSetLocale");
     __publicField(this, "executeLocationCatalog");
@@ -11769,6 +11892,8 @@ 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);
     this.executeLocationCatalog = adapt.locationCatalog.bind(adapt);
@@ -13326,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();
@@ -13381,6 +13506,17 @@ 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);
+  }
   removeControl() {
     const { startIndex, endIndex } = this.range.getRange();
     if (startIndex !== endIndex)
@@ -14274,12 +14410,22 @@ const defaultPlaceholderOption = {
   size: 16,
   font: "Yahei"
 };
+class Plugin {
+  constructor(editor) {
+    __publicField(this, "editor");
+    this.editor = editor;
+  }
+  use(pluginFunction, options) {
+    pluginFunction(this.editor, options);
+  }
+}
 class Editor {
   constructor(container, data2, options = {}) {
     __publicField(this, "command");
     __publicField(this, "listener");
     __publicField(this, "register");
     __publicField(this, "destroy");
+    __publicField(this, "use");
     const headerOptions = __spreadValues(__spreadValues({}, defaultHeaderOption), options.header);
     const footerOptions = __spreadValues(__spreadValues({}, defaultFooterOption), options.footer);
     const pageNumberOptions = __spreadValues(__spreadValues({}, defaultPageNumberOption), options.pageNumber);
@@ -14323,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,
@@ -14369,7 +14516,9 @@ class Editor {
       shortcut.removeEvent();
       contextMenu.removeEvent();
     };
+    const plugin = new Plugin(this);
+    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