@hufe921/canvas-editor 0.9.36 → 0.9.37

package/CHANGELOG.md

@@ -1,3 +1,26 @@
+## [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

@@ -28,7 +28,7 @@ new Editor(document.querySelector(".canvas-editor"), [
 
 ## next features
 
-1. improve list and title
+1. [plugin](https://github.com/Hufe921/canvas-editor/tree/feature/plugin)
 2. improve performance
 3. control rules
 4. table paging

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.37";
 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);
         };
       });
@@ -5887,6 +5916,10 @@ class HistoryManager {
   isCanRedo() {
     return !!this.redoStack.length;
   }
+  recovery() {
+    this.undoStack = [];
+    this.redoStack = [];
+  }
 }
 var EditorComponent;
 (function(EditorComponent2) {
@@ -10930,6 +10963,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);
@@ -11692,6 +11752,7 @@ class Command {
     __publicField(this, "executePaperDirection");
     __publicField(this, "executeSetPaperMargin");
     __publicField(this, "executeInsertElementList");
+    __publicField(this, "executeSetValue");
     __publicField(this, "executeRemoveControl");
     __publicField(this, "executeSetLocale");
     __publicField(this, "executeLocationCatalog");
@@ -11769,6 +11830,7 @@ class Command {
     this.executePaperDirection = adapt.paperDirection.bind(adapt);
     this.executeSetPaperMargin = adapt.setPaperMargin.bind(adapt);
     this.executeInsertElementList = adapt.insertElementList.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);
@@ -13381,6 +13443,9 @@ class CommandAdapt {
     formatElementContext(elementList, payload, startIndex);
     this.draw.insertElementList(payload);
   }
+  setValue(payload) {
+    this.draw.setValue(payload);
+  }
   removeControl() {
     const { startIndex, endIndex } = this.range.getRange();
     if (startIndex !== endIndex)
@@ -14274,12 +14339,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);
@@ -14369,6 +14444,8 @@ 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 };