@syncfusion/ej2-image-editor 20.3.47 → 20.3.48

package/dist/global/index.d.ts

@@ -1,6 +1,6 @@
 /*!
 *  filename: index.d.ts
-*  version : 20.3.47
+*  version : 20.3.48
 *  Copyright Syncfusion Inc. 2001 - 2020. All rights reserved.
 *  Use of this code is subject to the terms of our license.
 *  A copy of the current license can be obtained at any time by e-mailing

package/package.json

@@ -1,8 +1,8 @@
 {
   "_from": "@syncfusion/ej2-image-editor@*",
-  "_id": "@syncfusion/ej2-image-editor@20.2.52",
+  "_id": "@syncfusion/ej2-image-editor@20.3.47",
   "_inBundle": false,
-  "_integrity": "sha512-XXA7tsh8G5fSVsWD0gq2hx3oqzU/y+RmufrctYIqDbPBxjoeOnMkH2N8cSp27i/lp1LOhjtMPB8uWqQsBIeNdA==",
+  "_integrity": "sha512-Q62yo/sQO5+omyPnSjFaUTf9jOEPjzBURoZEtIr2TZKIgSumJhofZcN80i/Lq8cJOGAQixaIANZIcZV2tn2Wng==",
   "_location": "/@syncfusion/ej2-image-editor",
   "_phantomChildren": {},
   "_requested": {
@@ -23,8 +23,8 @@
     "/@syncfusion/ej2-react-image-editor",
     "/@syncfusion/ej2-vue-image-editor"
   ],
-  "_resolved": "http://nexus.syncfusion.com/repository/ej2-release/@syncfusion/ej2-image-editor/-/ej2-image-editor-20.2.52.tgz",
-  "_shasum": "bc48db2256ebc59e271c1506bea6f38c63c2870d",
+  "_resolved": "http://nexus.syncfusion.com/repository/ej2-hotfix-new/@syncfusion/ej2-image-editor/-/ej2-image-editor-20.3.47.tgz",
+  "_shasum": "92f90ea59cb20e1aa045767d9da0ff40b10f584f",
   "_spec": "@syncfusion/ej2-image-editor@*",
   "_where": "/jenkins/workspace/automation_release_19.1.0.1-ZPMUBNQ6AUYH6YGEFBPVYMEQLRRW2SLD4XCZ6GATNZJFYJ3RIAOA/packages/included",
   "author": {
@@ -32,11 +32,11 @@
   },
   "bundleDependencies": false,
   "dependencies": {
-    "@syncfusion/ej2-base": "~20.3.47",
-    "@syncfusion/ej2-buttons": "~20.3.47",
+    "@syncfusion/ej2-base": "~20.3.48",
+    "@syncfusion/ej2-buttons": "~20.3.48",
     "@syncfusion/ej2-inputs": "~20.3.47",
-    "@syncfusion/ej2-navigations": "~20.3.47",
-    "@syncfusion/ej2-popups": "~20.3.47",
+    "@syncfusion/ej2-navigations": "~20.3.48",
+    "@syncfusion/ej2-popups": "~20.3.48",
     "@syncfusion/ej2-splitbuttons": "~20.3.47"
   },
   "deprecated": false,
@@ -69,6 +69,6 @@
     "url": "https://github.com/syncfusion/ej2-javascript-ui-controls/tree/master/controls/imageeditor"
   },
   "typings": "index.d.ts",
-  "version": "20.3.47",
+  "version": "20.3.48",
   "sideEffects": false
 }

package/src/image-editor/image-editor.d.ts

@@ -42,7 +42,6 @@ export declare class ImageEditor extends SignatureBase implements INotifyPropert
     private dragPoint;
     private diffPoint;
     private oldPoint;
-    private zoomedImg;
     private objColl;
     private undoRedoColl;
     private imgDataColl;

package/src/image-editor/image-editor.js

@@ -61,7 +61,6 @@ var ImageEditor = /** @class */ (function (_super) {
         _this.dragPoint = { startX: 0, startY: 0, endX: 0, endY: 0 }; // updates drag start and end points in mousedown and mousemove
         _this.diffPoint = { x: 0, y: 0 }; // updates resize points
         _this.oldPoint = {};
-        _this.zoomedImg = { startX: 0, startY: 0, endX: 0, endY: 0, width: 0, height: 0 }; // calculates zoomed image's points
         _this.objColl = []; // shapes, text obj collection
         _this.undoRedoColl = [];
         _this.imgDataColl = []; // collection of Image Data mainly used for reset state
@@ -2131,8 +2130,6 @@ var ImageEditor = /** @class */ (function (_super) {
         }
     };
     ImageEditor.prototype.updateCanvas = function () {
-        this.zoomedImg.width = this.baseImg.width;
-        this.zoomedImg.height = this.baseImg.height;
         this.lastX = this.baseImg.width / 2;
         this.lastY = this.baseImg.height / 2;
         var wrapperWidth;
@@ -2553,6 +2550,9 @@ var ImageEditor = /** @class */ (function (_super) {
         EventHandler.add(this.upperCanvas, 'touchmove', this.mouseMoveEventHandler, this); // Unbind mousedown to prevent double triggers from touch devices
     };
     ImageEditor.prototype.mouseDownEventHandler = function (e) {
+        if (e.type === 'touchstart' && e.currentTarget === this.lowerCanvas && this.imgDataColl.length === 0) {
+            return;
+        }
         var ratio = this.calcRatio();
         if (this.dragCanvas) {
             this.canvasMouseDownHandler(e);
@@ -2864,6 +2864,17 @@ var ImageEditor = /** @class */ (function (_super) {
         this.upperContext.clearRect(0, 0, this.upperCanvas.width, this.upperCanvas.height);
         this.lowerCanvas.width = this.upperCanvas.width = this.element.offsetWidth;
         this.lowerCanvas.height = this.upperCanvas.height = this.element.offsetHeight;
+        var canvasWrapper = document.querySelector('#' + this.element.id + '_canvasWrapper');
+        if (!isNullOrUndefined(canvasWrapper)) {
+            canvasWrapper.style.width = this.element.offsetWidth + 'px';
+            canvasWrapper.style.height = this.element.offsetHeight + 'px';
+            if (Browser.isDevice) {
+                canvasWrapper.style.height = (parseFloat(canvasWrapper.style.height) - (2 * this.toolbarHeight)) - 3 + 'px';
+            }
+            else {
+                canvasWrapper.style.height = (parseFloat(canvasWrapper.style.height) - this.toolbarHeight) - 3 + 'px';
+            }
+        }
         this.redrawImg();
         // eslint-disable-next-line @typescript-eslint/tslint/config
         this.lowerCanvas.toBlob(function (blob) {
@@ -2878,7 +2889,7 @@ var ImageEditor = /** @class */ (function (_super) {
     ImageEditor.prototype.screenOrientation = function () {
         if (Browser.isDevice) {
             this.isScreenOriented = true;
-            this.adjustToScreen();
+            setTimeout(this.adjustToScreen.bind(this), 100);
         }
     };
     ImageEditor.prototype.windowResizeHandler = function () {
@@ -3675,24 +3686,28 @@ var ImageEditor = /** @class */ (function (_super) {
                 this.textBox.value = actObj.keyHistory;
                 this.textBox.style.overflow = 'hidden';
                 this.textBox.style.height = 'auto';
-                this.setTextBoxWidth();
-                this.setTextBoxHeight();
                 if (degree % 90 === 0 && degree % 180 !== 0 && degree !== 0) {
                     if (this.factor === 1) {
+                        this.textBox.style.width = (actObj.activePoint.height / ratio.height) + 'px';
                         this.textBox.style.height = (actObj.activePoint.width / ratio.width) + 'px';
                     }
                     else {
+                        this.textBox.style.width = actObj.activePoint.height + 'px';
                         this.textBox.style.height = actObj.activePoint.width + 'px';
                     }
                 }
                 else {
                     if (this.factor === 1) {
+                        this.textBox.style.width = (actObj.activePoint.width / ratio.width) + 'px';
                         this.textBox.style.height = (actObj.activePoint.height / ratio.height) + 'px';
                     }
                     else {
+                        this.textBox.style.width = actObj.activePoint.width + 'px';
                         this.textBox.style.height = actObj.activePoint.height + 'px';
                     }
                 }
+                this.setTextBoxWidth();
+                this.setTextBoxHeight();
             }
             else {
                 this.applyActObj();
@@ -3725,42 +3740,55 @@ var ImageEditor = /** @class */ (function (_super) {
         }
         if (degree === 0) {
             if (flip.toLowerCase() === 'vertical') {
-                this.textBox.style.maxHeight = ((this.lowerCanvas.height - (this.lowerCanvas.height - actObj.activePoint.endY)) / ratio.height) + 'px';
+                this.textBox.style.maxHeight = (parseFloat(this.lowerCanvas.style.maxHeight) - (parseFloat(this.lowerCanvas.style.maxHeight)
+                    - parseFloat(this.textBox.style.top))) + 'px';
             }
             else {
                 textBoxTop = parseFloat(this.textBox.style.top) - parseFloat(this.lowerCanvas.style.top);
-                this.textBox.style.maxHeight = ((this.lowerCanvas.height / ratio.height) - textBoxTop) + 'px';
+                this.textBox.style.maxHeight = (parseFloat(this.lowerCanvas.style.maxHeight) - textBoxTop) + 'px';
             }
         }
         else if (degree === 90) {
             if (flip.toLowerCase() === 'horizontal') {
-                this.textBox.style.maxHeight = ((this.lowerCanvas.width - actObj.activePoint.startX) / ratio.width) + 'px';
+                this.textBox.style.maxHeight = (parseFloat(this.lowerCanvas.style.maxWidth) - (parseFloat(this.textBox.style.left)
+                    - parseFloat(this.lowerCanvas.style.left))) + 'px';
             }
             else {
-                this.textBox.style.maxHeight = ((this.lowerCanvas.width - (this.lowerCanvas.width - actObj.activePoint.endX)) / ratio.width) + 'px';
+                this.textBox.style.maxHeight = (parseFloat(this.textBox.style.left)
+                    - parseFloat(this.lowerCanvas.style.left)) + 'px';
             }
         }
         else if (degree === 180) {
             if (flip.toLowerCase() === 'vertical') {
-                this.textBox.style.maxHeight = ((this.lowerCanvas.height - actObj.activePoint.startY) / ratio.height) + 'px';
+                textBoxTop = parseFloat(this.textBox.style.top) - parseFloat(this.lowerCanvas.style.top);
+                this.textBox.style.maxHeight = (parseFloat(this.lowerCanvas.style.maxHeight) - textBoxTop) + 'px';
             }
             else {
-                this.textBox.style.maxHeight = ((this.lowerCanvas.height - (this.lowerCanvas.height - actObj.activePoint.endY)) / ratio.height) + 'px';
+                this.textBox.style.maxHeight = (parseFloat(this.textBox.style.top)
+                    - parseFloat(this.lowerCanvas.style.top)) + 'px';
             }
         }
         else if (degree === 270) {
             if (flip.toLowerCase() === 'horizontal') {
-                this.textBox.style.maxHeight = ((this.lowerCanvas.width - (this.lowerCanvas.width - actObj.activePoint.endX)) / ratio.width) + 'px';
+                this.textBox.style.maxHeight = (parseFloat(this.textBox.style.left)
+                    - parseFloat(this.lowerCanvas.style.left)) + 'px';
             }
             else {
-                this.textBox.style.maxHeight = ((this.lowerCanvas.width - actObj.activePoint.startX) / ratio.width) + 'px';
+                this.textBox.style.maxHeight = parseFloat(this.lowerCanvas.style.maxWidth) - (parseFloat(this.textBox.style.left)
+                    - parseFloat(this.lowerCanvas.style.left)) + 'px';
             }
         }
-        this.textBox.style.maxHeight = ((parseFloat(this.textBox.style.maxHeight) - parseFloat(this.textBox.style.fontSize) * 0.5)) * this.factor + 'px';
+        this.textBox.style.maxHeight = ((parseFloat(this.textBox.style.maxHeight) - parseFloat(this.textBox.style.fontSize) * 0.5)) + 'px';
     };
     ImageEditor.prototype.setTextBoxWidth = function (e) {
         var ratio = this.calcRatio();
         var text = this.getMaxText(true);
+        if (this.textBox.style.display === 'block') {
+            this.updateFontStyles(true);
+        }
+        else {
+            this.updateFontStyles();
+        }
         var textBoxWidth = (this.upperContext.measureText(text).width + (parseFloat(this.textBox.style.fontSize) / 2));
         var letterWidth = e ? this.upperContext.measureText(String.fromCharCode(e.which)).width : 0;
         var actObj = extend({}, this.activeObj, {}, true);
@@ -3787,56 +3815,56 @@ var ImageEditor = /** @class */ (function (_super) {
         if ((!isNullOrUndefined(e) && parseFloat(this.textBox.style.width) < (textBoxWidth + letterWidth)) || isNullOrUndefined(e)) {
             if (degree === 0) {
                 if (flip.toLowerCase() === 'horizontal') {
-                    if (actObj.activePoint.endX - textBoxWidth - letterWidth > 0) {
-                        this.textBox.style.width = ((textBoxWidth + letterWidth) / ratio.width) + 'px';
+                    if ((parseFloat(this.textBox.style.left) - parseFloat(this.lowerCanvas.style.left)) - textBoxWidth - letterWidth > 0) {
+                        this.textBox.style.width = (textBoxWidth + letterWidth) + 'px';
                     }
                 }
                 else {
-                    if (textBoxWidth + letterWidth + actObj.activePoint.startX < this.lowerCanvas.width) {
-                        this.textBox.style.width = ((textBoxWidth + letterWidth) / ratio.width) + 'px';
+                    if ((parseFloat(this.lowerCanvas.style.maxWidth) - (parseFloat(this.textBox.style.left)
+                        - parseFloat(this.lowerCanvas.style.left))) > (textBoxWidth + letterWidth)) {
+                        this.textBox.style.width = (textBoxWidth + letterWidth) + 'px';
                     }
                 }
             }
             else if (degree === 90) {
                 if (flip.toLowerCase() === 'vertical') {
-                    if (actObj.activePoint.endY - textBoxWidth - letterWidth > 0) {
-                        this.textBox.style.width = ((textBoxWidth + letterWidth) / ratio.height) + 'px';
+                    if ((parseFloat(this.textBox.style.top) - parseFloat(this.lowerCanvas.style.top)) - textBoxWidth - letterWidth > 0) {
+                        this.textBox.style.width = (textBoxWidth + letterWidth) + 'px';
                     }
                 }
                 else {
-                    if (textBoxWidth + letterWidth + actObj.activePoint.startY < this.lowerCanvas.height) {
-                        this.textBox.style.width = ((textBoxWidth + letterWidth) / ratio.height) + 'px';
+                    if ((parseFloat(this.lowerCanvas.style.maxHeight) - (parseFloat(this.textBox.style.top)
+                        - parseFloat(this.lowerCanvas.style.top))) > (textBoxWidth + letterWidth)) {
+                        this.textBox.style.width = (textBoxWidth + letterWidth) + 'px';
                     }
                 }
             }
             else if (degree === 180) {
                 if (flip.toLowerCase() === 'horizontal') {
-                    if (textBoxWidth + letterWidth + actObj.activePoint.startX < this.lowerCanvas.width) {
-                        this.textBox.style.width = ((textBoxWidth + letterWidth) / ratio.width) + 'px';
+                    if ((parseFloat(this.lowerCanvas.style.maxWidth) - (parseFloat(this.textBox.style.left)
+                        - parseFloat(this.lowerCanvas.style.left))) > (textBoxWidth + letterWidth)) {
+                        this.textBox.style.width = (textBoxWidth + letterWidth) + 'px';
                     }
                 }
                 else {
-                    if (actObj.activePoint.endX - textBoxWidth - letterWidth > 0) {
-                        this.textBox.style.width = ((textBoxWidth + letterWidth) / ratio.width) + 'px';
+                    if ((parseFloat(this.textBox.style.left) - parseFloat(this.lowerCanvas.style.left)) - textBoxWidth - letterWidth > 0) {
+                        this.textBox.style.width = (textBoxWidth + letterWidth) + 'px';
                     }
                 }
             }
             else if (degree === 270) {
                 if (flip.toLowerCase() === 'vertical') {
-                    if (textBoxWidth + letterWidth + actObj.activePoint.startY < this.lowerCanvas.height) {
-                        this.textBox.style.width = ((textBoxWidth + letterWidth) / ratio.height) + 'px';
+                    if ((parseFloat(this.lowerCanvas.style.maxHeight) - (parseFloat(this.textBox.style.top)
+                        - parseFloat(this.lowerCanvas.style.top))) > (textBoxWidth + letterWidth)) {
+                        this.textBox.style.width = (textBoxWidth + letterWidth) + 'px';
                     }
                 }
                 else {
-                    if (actObj.activePoint.endY - textBoxWidth - letterWidth > 0) {
-                        this.textBox.style.width = ((textBoxWidth + letterWidth) / ratio.height) + 'px';
+                    if ((parseFloat(this.textBox.style.top) - parseFloat(this.lowerCanvas.style.top)) - textBoxWidth - letterWidth > 0) {
+                        this.textBox.style.width = (textBoxWidth + letterWidth) + 'px';
                     }
                 }
             }
-            this.textBox.style.width = parseFloat(this.textBox.style.width) * this.factor + 'px';
-            if (isNullOrUndefined(e)) {
-                this.textBox.style.width = parseFloat(this.textBox.style.width) + parseFloat(this.textBox.style.fontSize) + 'px';
-            }
         }
     };
     ImageEditor.prototype.setActivePoint = function (startX, startY) {
@@ -5802,7 +5830,7 @@ var ImageEditor = /** @class */ (function (_super) {
             this.setActivePoint(width, height);
         }
     };
-    ImageEditor.prototype.updateFontStyles = function () {
+    ImageEditor.prototype.updateFontStyles = function (isTextBox) {
         this.upperContext.strokeStyle = this.activeObj.strokeSettings.strokeColor;
         this.upperContext.fillStyle = this.activeObj.strokeSettings.strokeColor;
         var textStyle = '';
@@ -5815,7 +5843,7 @@ var ImageEditor = /** @class */ (function (_super) {
         if (this.activeObj.textSettings.bold && this.activeObj.textSettings.italic) {
             textStyle = 'italic bold ';
         }
-        var fontSize = this.activeObj.textSettings.fontSize;
+        var fontSize = isTextBox ? parseFloat(this.textBox.style.fontSize) : this.activeObj.textSettings.fontSize;
         var fontFamily = this.textBox.style.display === 'block' ? this.textBox.style.fontFamily : this.activeObj.textSettings.fontFamily;
         this.upperContext.font = textStyle + fontSize + 'px' + ' ' + fontFamily;
     };
@@ -5931,24 +5959,14 @@ var ImageEditor = /** @class */ (function (_super) {
             this.degree = 0;
         }
     };
-    ImageEditor.prototype.redrawSelection = function (isZoomed) {
+    ImageEditor.prototype.redrawSelection = function () {
         var ratio = this.calcRatio();
-        if (isZoomed) {
-            this.activeObj.activePoint.startX = (this.lowerCanvas.width - this.zoomedImg.width) / 2;
-            this.activeObj.activePoint.startY = (this.lowerCanvas.height - this.zoomedImg.height) / 2;
-            this.activeObj.activePoint.endX = this.activeObj.activePoint.startX + this.zoomedImg.width;
-            this.activeObj.activePoint.endY = this.activeObj.activePoint.startY + this.zoomedImg.height;
-            this.activeObj.activePoint.width = this.zoomedImg.width;
-            this.activeObj.activePoint.height = this.zoomedImg.height;
-        }
-        else {
-            this.activeObj.activePoint.startX = 0;
-            this.activeObj.activePoint.startY = 0;
-            this.activeObj.activePoint.endX = this.lowerCanvas.width;
-            this.activeObj.activePoint.endY = this.lowerCanvas.height;
-            this.activeObj.activePoint.width = this.activeObj.activePoint.endX - this.activeObj.activePoint.startX;
-            this.activeObj.activePoint.height = this.activeObj.activePoint.endY - this.activeObj.activePoint.startY;
-        }
+        this.activeObj.activePoint.startX = 0;
+        this.activeObj.activePoint.startY = 0;
+        this.activeObj.activePoint.endX = this.lowerCanvas.width;
+        this.activeObj.activePoint.endY = this.lowerCanvas.height;
+        this.activeObj.activePoint.width = this.activeObj.activePoint.endX - this.activeObj.activePoint.startX;
+        this.activeObj.activePoint.height = this.activeObj.activePoint.endY - this.activeObj.activePoint.startY;
         this.updateActiveObject(ratio, this.activeObj.activePoint, this.activeObj);
         this.drawObject('duplicate', this.activeObj);
     };