ding-image-editor 3.15.3 → 3.15.5

package/index.d.ts

@@ -1,4 +1,4 @@
-// Type definitions for TOAST UI Image Editor v3.15.3
+// Type definitions for TOAST UI Image Editor v3.15.5
 // TypeScript Version: 3.2.2
 
 declare namespace tuiImageEditor {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ding-image-editor",
-  "version": "3.15.3",
+  "version": "3.15.5",
   "description": "TOAST UI ImageEditor",
   "keywords": [
     "nhn",

package/src/js/component/freeDrawing.js

@@ -27,8 +27,13 @@ class FreeDrawing extends Component {
     this._handlers = {
       mousedown: this._onFabricMouseDown.bind(this),
       mousemove: this._onFabricMouseMove.bind(this),
-      mouseup: this._onFabricMouseUp.bind(this),
+      mouseup: this._onMasikMouseUp.bind(this),
     };
+
+    /**
+     * imageEditor instance
+     */
+    this.imageEditor = null;
   }
 
   /**
@@ -37,10 +42,11 @@ class FreeDrawing extends Component {
    */
   start(setting) {
     console.log(setting);
-    if (setting?.masik) {
-      this.startMasik();
+    if (setting?.mosaic) {
+      this.setMosaic(setting);
     } else {
       const canvas = this.getCanvas();
+      console.log(canvas);
       canvas.isDrawingMode = true;
       this.setBrush(setting);
     }
@@ -73,9 +79,11 @@ class FreeDrawing extends Component {
   }
 
   /**
-   * Set masik
+   * Set mosaic
    */
-  startMasik() {
+  setMosaic(setting) {
+    this.imageEditor = setting.imageEditor;
+    this.width = setting.width;
     const canvas = this.getCanvas();
     canvas.selection = false;
     canvas.on('mouse:down', this._handlers.mousedown);
@@ -101,11 +109,15 @@ class FreeDrawing extends Component {
    */
   _onFabricMouseMove(fEvent) {
     const canvas = this.getCanvas();
-    const blockSize = 20;
+    const blockSize = this.width;
+    const halfSize = this.width / 2;
+    // 直接获取e中的x，y有问题
     const startPoints = canvas.getPointer(fEvent.e);
-    const startX = startPoints.x;
-    const startY = startPoints.y;
-    const ctx = canvas.getContext('2d');
+    console.log(startPoints);
+    const startX = startPoints.x - halfSize;
+    console.log(startX);
+    const startY = startPoints.y - halfSize;
+    const ctx = canvas.contextContainer;
     const imageData = ctx.getImageData(startX, startY, blockSize, blockSize);
     const { data } = imageData;
     let r = 0;
@@ -132,7 +144,14 @@ class FreeDrawing extends Component {
    * MouseUp event handler on canvas
    * @private
    */
-  _onFabricMouseUp() {
+  async _onMasikMouseUp() {
+    const doms = document.getElementsByClassName('lower-canvas');
+    const [domCanvas] = doms;
+    const dataURL = domCanvas.toDataURL();
+    const response = await fetch(dataURL);
+    const blob = await response.blob();
+    const imgUrl = URL.createObjectURL(blob);
+    this.imageEditor.invoke('addImageObject', imgUrl);
     const canvas = this.getCanvas();
     canvas.off({
       'mouse:move': this._handlers.mousemove,

package/src/js/component/text.js

@@ -488,6 +488,7 @@ class Text extends Component {
    * @private
    */
   _onFabricSelect(fEvent) {
+    console.log('ssssssss')
     this.isPrevEditing = true;
 
     this.setSelectedInfo(fEvent.target, true);
@@ -505,11 +506,11 @@ class Text extends Component {
       return;
     }
 
-    if (this.isPrevEditing) {
-      this.isPrevEditing = false;
+    // if (this.isPrevEditing) {
+    //   this.isPrevEditing = false;
 
-      return;
-    }
+    //   return;
+    // }
 
     this._fireAddText(fEvent);
   }

package/src/js/component/zoom.js

@@ -666,8 +666,8 @@ class Zoom extends Component {
   _addScrollBar() {
     const canvas = this.getCanvas();
 
-    canvas.add(this._horizontalScroll);
-    canvas.add(this._verticalScroll);
+    // canvas.add(this._horizontalScroll);
+    // canvas.add(this._verticalScroll);
 
     if (this.scrollBarTid) {
       clearTimeout(this.scrollBarTid);

package/src/js/graphics.js

@@ -132,6 +132,8 @@ class Graphics {
      */
     this._componentMap = {};
 
+    this._zoomLevel = 1;
+
     /**
      * fabric event handlers
      * @type {Object.<string, function>}
@@ -462,6 +464,7 @@ class Graphics {
     const zoom = this.getComponent(components.ZOOM);
 
     zoom.zoom({ x, y }, zoomLevel);
+    this._zoomLevel = zoomLevel
   }
 
   /**
@@ -584,9 +587,21 @@ class Graphics {
       canvasImage = this.canvasImage;
     }
 
-    const { width, height } = canvasImage.getBoundingRect();
+    let { width, height } = canvasImage.getBoundingRect();
+
+    if(this._zoomLevel!==1){
+      width= width/this._zoomLevel
+      height= height/this._zoomLevel
+    }
+
+    console.log('adjustimage',width,height)
+
+    console.log('adjustmax',this.cssMaxWidth,this.cssMaxHeight)
+
+    // 修改了 _calcMaxDimension
     const maxDimension = this._calcMaxDimension(width, height);
 
+    console.log('maxDimension',maxDimension)
     this.setCanvasCssDimension({
       width: '100%',
       height: '100%', // Set height '' for IE9
@@ -1046,8 +1061,10 @@ class Graphics {
   _calcMaxDimension(width, height) {
     const wScaleFactor = this.cssMaxWidth / width;
     const hScaleFactor = this.cssMaxHeight / height;
-    let cssMaxWidth = Math.min(width, this.cssMaxWidth);
-    let cssMaxHeight = Math.min(height, this.cssMaxHeight);
+    // let cssMaxWidth = Math.min(width, this.cssMaxWidth);
+    // let cssMaxHeight = Math.min(height, this.cssMaxHeight);
+    let cssMaxWidth = this.cssMaxWidth;
+    let cssMaxHeight = this.cssMaxHeight;
 
     if (wScaleFactor < 1 && wScaleFactor < hScaleFactor) {
       cssMaxWidth = width * wScaleFactor;

package/src/js/imageEditor.js

@@ -734,6 +734,13 @@ class ImageEditor {
     }
   }
 
+  /**
+   * get canvas image center
+   */
+  getCenterPoint() {
+    return this._graphics.canvasImage.getCenterPoint();
+  }
+
   /**
    * Load image from file
    * @param {File} imgFile - Image file
@@ -965,6 +972,7 @@ class ImageEditor {
    * });
    */
   rotate(angle, isSilent) {
+    console.log('isSilent',isSilent)
     return this._rotate('rotate', angle, isSilent);
   }