ding-image-editor 3.15.4 → 3.15.6

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.4",
+  "version": "3.15.6",
   "description": "TOAST UI ImageEditor",
   "keywords": [
     "nhn",

package/src/js/component/shape.js

@@ -226,6 +226,13 @@ export default class Shape extends Component {
 
       this._bindEventOnShape(shapeObj);
 
+      shapeObj.hasControls = false;
+      shapeObj.hasBorders = false;
+
+      console.log('shapObe',shapeObj)
+      shapeObj.borderColor ='black'
+      console.log('shapObe',shapeObj)
+
       canvas.add(shapeObj).setActiveObject(shapeObj);
 
       this._resetPositionFillFilter(shapeObj);

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

@@ -562,10 +562,30 @@ class Zoom extends Component {
   _onMouseMoveWithHandMode({ e }) {
     const canvas = this.getCanvas();
     const { x, y } = canvas.getPointer(e);
+
+    
     const deltaX = x - this._startHandPoint.x;
     const deltaY = y - this._startHandPoint.y;
 
-    this._movePointOfZoom({ x: deltaX, y: deltaY });
+    console.log('deltaX',deltaX)
+    console.log('deltaY',deltaY)
+
+    const canvasImage = this.getCanvasImage()
+    const bounding = canvasImage.getBoundingRect();
+    console.log( bounding)
+
+    const halfWidth = Math.floor(bounding.width/2);
+    const left = Math.floor(Math.abs(bounding.left))
+    if((bounding.left<0 && deltaX>0 && Math.abs(deltaX) >  Math.abs(deltaY)) || (deltaX <0 && left< halfWidth  && Math.abs(deltaX) >  Math.abs(deltaY))  ){
+      this._movePointOfZoom({ x: deltaX, y: 0 });
+    }
+   
+
+    const halfHeight = Math.floor(bounding.height/2);
+    const top = Math.floor(Math.abs(bounding.top))
+    if((bounding.top<0 && deltaY>0 &&  Math.abs(deltaX) < Math.abs(deltaY) ) ||(top<halfHeight && deltaY<0 &&  Math.abs(deltaX) < Math.abs(deltaY) ) ){
+      this._movePointOfZoom({ x: 0, y: deltaY });
+    }
   }
 
   /**
@@ -666,8 +686,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

@@ -972,6 +972,7 @@ class ImageEditor {
    * });
    */
   rotate(angle, isSilent) {
+    console.log('isSilent',isSilent)
     return this._rotate('rotate', angle, isSilent);
   }