@syncfusion/ej2-image-editor 21.1.35 → 21.1.39

package/dist/global/index.d.ts

@@ -1,6 +1,6 @@
 /*!
 *  filename: index.d.ts
-*  version : 21.1.35
+*  version : 21.1.39
 *  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.15.0",
+  "_id": "@syncfusion/ej2-image-editor@21.1.37",
   "_inBundle": false,
-  "_integrity": "sha512-Xmh+hp6L+IMvA9vK8dkYMdJ7v7Sr/WmeQuh2NNLhaNdjdEl+6EBY7iU6z7AXM4vJg9cy3Q4JMu0D/rPRDS0kPA==",
+  "_integrity": "sha512-NqoCmNu7dG4kLr3t5ln1b/tl1CHhMvwZa3DF8GJjjWvr6UuU+bGi7hmG9bTPgROsYJk4l+5O5NJfeh6jL30DPQ==",
   "_location": "/@syncfusion/ej2-image-editor",
   "_phantomChildren": {},
   "_requested": {
@@ -23,8 +23,8 @@
     "/@syncfusion/ej2-react-image-editor",
     "/@syncfusion/ej2-vue-image-editor"
   ],
-  "_resolved": "https://nexus.syncfusion.com/repository/ej2-release/@syncfusion/ej2-image-editor/-/ej2-image-editor-20.15.0.tgz",
-  "_shasum": "fbc13db02e3a21783e2b81260218e839b609f3e8",
+  "_resolved": "https://nexus.syncfusion.com/repository/ej2-hotfix-new/@syncfusion/ej2-image-editor/-/ej2-image-editor-21.1.37.tgz",
+  "_shasum": "480eed2590ef0f57854228517a728f5e54f06522",
   "_spec": "@syncfusion/ej2-image-editor@*",
   "_where": "/jenkins/workspace/elease-automation_release_21.1.1/packages/included",
   "author": {
@@ -32,12 +32,12 @@
   },
   "bundleDependencies": false,
   "dependencies": {
-    "@syncfusion/ej2-base": "~21.1.35",
-    "@syncfusion/ej2-buttons": "~21.1.35",
-    "@syncfusion/ej2-inputs": "~21.1.35",
-    "@syncfusion/ej2-navigations": "~21.1.35",
-    "@syncfusion/ej2-popups": "~21.1.35",
-    "@syncfusion/ej2-splitbuttons": "~21.1.35"
+    "@syncfusion/ej2-base": "~21.1.39",
+    "@syncfusion/ej2-buttons": "~21.1.37",
+    "@syncfusion/ej2-inputs": "~21.1.39",
+    "@syncfusion/ej2-navigations": "~21.1.39",
+    "@syncfusion/ej2-popups": "~21.1.37",
+    "@syncfusion/ej2-splitbuttons": "~21.1.37"
   },
   "deprecated": false,
   "description": "Essential JS 2 ImageEditor",
@@ -67,7 +67,7 @@
     "url": "https://github.com/syncfusion/ej2-javascript-ui-controls/tree/master/controls/imageeditor"
   },
   "typings": "index.d.ts",
-  "version": "21.1.35",
+  "version": "21.1.39",
   "sideEffects": false,
   "homepage": "https://www.syncfusion.com/javascript-ui-controls"
 }

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

@@ -326,6 +326,7 @@ export declare class ImageEditor extends Component<HTMLDivElement> implements IN
     private isShapeInserted;
     private isInitialTextEdited;
     private isShapeTextInserted;
+    private isErrorImage;
     /**
      * Defines one or more CSS classes that can be used to customize the appearance of an Image Editor component.
      *
@@ -756,6 +757,7 @@ export declare class ImageEditor extends Component<HTMLDivElement> implements IN
     private renderSaveBtn;
     private cropSelect;
     private transformSelect;
+    private resetZoom;
     private performTransformation;
     private updateTransform;
     private getShapesToolbarItem;
@@ -1189,6 +1191,7 @@ export declare class ImageEditor extends Component<HTMLDivElement> implements IN
      *
      */
     select(type: string, startX?: number, startY?: number, width?: number, height?: number): void;
+    private updateSelectionInsert;
     /**
      * Enable or disable a freehand drawing option in an Image Editor.
      *

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

@@ -225,6 +225,7 @@ var ImageEditor = /** @class */ (function (_super) {
         _this.isShapeInserted = false;
         _this.isInitialTextEdited = false;
         _this.isShapeTextInserted = false;
+        _this.isErrorImage = false;
         return _this;
     }
     ImageEditor_1 = ImageEditor;
@@ -430,7 +431,8 @@ var ImageEditor = /** @class */ (function (_super) {
                         this.zoomSettings.zoomTrigger = newProperties.zoomSettings.zoomTrigger;
                     }
                     if (isNullOrUndefined(this.zoomSettings.zoomTrigger)) {
-                        this.zoomSettings.zoomTrigger = (ZoomTrigger.MouseWheel | ZoomTrigger.Pinch | ZoomTrigger.Toolbar | ZoomTrigger.Commands);
+                        this.zoomSettings.zoomTrigger = (ZoomTrigger.MouseWheel | ZoomTrigger.Pinch | ZoomTrigger.Toolbar |
+                            ZoomTrigger.Commands);
                         this.refreshToolbar('main');
                     }
                     else if ((newProperties.zoomSettings.zoomTrigger & ZoomTrigger.Toolbar) === ZoomTrigger.Toolbar) {
@@ -1327,11 +1329,9 @@ var ImageEditor = /** @class */ (function (_super) {
         this.performTransformation(args.item.id);
         this.updateCurrentUndoRedoColl('ok');
     };
-    ImageEditor.prototype.performTransformation = function (text) {
-        var tempZoomFactor = this.defaultZoomFactor;
-        var isUndoRedo = this.isUndoRedo;
-        var prevCropObj = extend({}, this.cropObj, {}, true);
+    ImageEditor.prototype.resetZoom = function () {
         if (this.defaultZoomFactor !== 0) {
+            var isUndoRedo = this.isUndoRedo;
             this.transformCurrentObj = this.getCurrentObj();
             this.transformCurrentObj.objColl = extend([], this.objColl, null, true);
             this.transformCurrentObj.pointColl = extend({}, this.pointColl, null, true);
@@ -1345,6 +1345,12 @@ var ImageEditor = /** @class */ (function (_super) {
             }
             this.isUndoRedo = isUndoRedo;
         }
+    };
+    ImageEditor.prototype.performTransformation = function (text) {
+        var tempZoomFactor = this.defaultZoomFactor;
+        var isUndoRedo = this.isUndoRedo;
+        var prevCropObj = extend({}, this.cropObj, {}, true);
+        this.resetZoom();
         this.updateTransform(text);
         if (tempZoomFactor !== 0) {
             this.isUndoRedo = true;
@@ -2328,7 +2334,6 @@ var ImageEditor = /** @class */ (function (_super) {
                 isDisabledFilter = true;
             }
             this.enableDisableToolbarBtn();
-            var previousObj = void 0;
             var duplicateObj = void 0;
             var objColl = void 0;
             if (!this.disabled) {
@@ -2378,11 +2383,6 @@ var ImageEditor = /** @class */ (function (_super) {
                         this.currentToolbar = 'main';
                         break;
                     case 'crop':
-                        previousObj = this.getCurrentObj();
-                        previousObj.objColl = extend([], this.objColl, [], true);
-                        previousObj.pointColl = extend([], this.pointColl, [], true);
-                        previousObj.afterCropActions = this.afterCropActions;
-                        this.previousCropCurrentObj = previousObj;
                         if (!isNullOrUndefined(this.currSelectionPoint)) {
                             if (this.currObjType.isUndoAction) {
                                 this.refreshUndoRedoColl();
@@ -4448,48 +4448,63 @@ var ImageEditor = /** @class */ (function (_super) {
         this.inMemoryCanvas.width = imageData.width;
         this.inMemoryCanvas.height = imageData.height;
         this.inMemoryContext.putImageData(imageData, 0, 0);
+        var ctx;
         var noFilter = document.querySelector('#' + this.element.id + '_defaultCanvas');
-        var ctx = noFilter.getContext('2d');
-        noFilter.style.width = '100px';
-        noFilter.style.height = '100px';
-        ctx.filter = this.updateAdjustment('default', null, true);
-        ctx.drawImage(this.inMemoryCanvas, 0, 0, 300, 150);
+        if (!isNullOrUndefined(noFilter)) {
+            ctx = noFilter.getContext('2d');
+            noFilter.style.width = '100px';
+            noFilter.style.height = '100px';
+            ctx.filter = this.updateAdjustment('default', null, true);
+            ctx.drawImage(this.inMemoryCanvas, 0, 0, 300, 150);
+        }
         var chrome = document.querySelector('#' + this.element.id + '_chromeCanvas');
-        ctx = chrome.getContext('2d');
-        chrome.style.width = '100px';
-        chrome.style.height = '100px';
-        ctx.filter = this.updateAdjustment('chrome', null, true);
-        ctx.drawImage(this.inMemoryCanvas, 0, 0, 300, 150);
+        if (!isNullOrUndefined(chrome)) {
+            ctx = chrome.getContext('2d');
+            chrome.style.width = '100px';
+            chrome.style.height = '100px';
+            ctx.filter = this.updateAdjustment('chrome', null, true);
+            ctx.drawImage(this.inMemoryCanvas, 0, 0, 300, 150);
+        }
         var cold = document.querySelector('#' + this.element.id + '_coldCanvas');
-        ctx = cold.getContext('2d');
-        cold.style.width = '100px';
-        cold.style.height = '100px';
-        ctx.filter = this.updateAdjustment('cold', null, true);
-        ctx.drawImage(this.inMemoryCanvas, 0, 0, 300, 150);
+        if (!isNullOrUndefined(cold)) {
+            ctx = cold.getContext('2d');
+            cold.style.width = '100px';
+            cold.style.height = '100px';
+            ctx.filter = this.updateAdjustment('cold', null, true);
+            ctx.drawImage(this.inMemoryCanvas, 0, 0, 300, 150);
+        }
         var warm = document.querySelector('#' + this.element.id + '_warmCanvas');
-        ctx = warm.getContext('2d');
-        warm.style.width = '100px';
-        warm.style.height = '100px';
-        ctx.filter = this.updateAdjustment('warm', null, true);
-        ctx.drawImage(this.inMemoryCanvas, 0, 0, 300, 150);
+        if (!isNullOrUndefined(warm)) {
+            ctx = warm.getContext('2d');
+            warm.style.width = '100px';
+            warm.style.height = '100px';
+            ctx.filter = this.updateAdjustment('warm', null, true);
+            ctx.drawImage(this.inMemoryCanvas, 0, 0, 300, 150);
+        }
         var grayscale = document.querySelector('#' + this.element.id + '_grayscaleCanvas');
-        ctx = grayscale.getContext('2d');
-        grayscale.style.width = '100px';
-        grayscale.style.height = '100px';
-        ctx.filter = this.updateAdjustment('grayscale', null, true);
-        ctx.drawImage(this.inMemoryCanvas, 0, 0, 300, 150);
+        if (!isNullOrUndefined(grayscale)) {
+            ctx = grayscale.getContext('2d');
+            grayscale.style.width = '100px';
+            grayscale.style.height = '100px';
+            ctx.filter = this.updateAdjustment('grayscale', null, true);
+            ctx.drawImage(this.inMemoryCanvas, 0, 0, 300, 150);
+        }
         var sepia = document.querySelector('#' + this.element.id + '_sepiaCanvas');
-        ctx = sepia.getContext('2d');
-        sepia.style.width = '100px';
-        sepia.style.height = '100px';
-        ctx.filter = this.updateAdjustment('sepia', null, true);
-        ctx.drawImage(this.inMemoryCanvas, 0, 0, 300, 150);
+        if (!isNullOrUndefined(sepia)) {
+            ctx = sepia.getContext('2d');
+            sepia.style.width = '100px';
+            sepia.style.height = '100px';
+            ctx.filter = this.updateAdjustment('sepia', null, true);
+            ctx.drawImage(this.inMemoryCanvas, 0, 0, 300, 150);
+        }
         var invert = document.querySelector('#' + this.element.id + '_invertCanvas');
-        ctx = invert.getContext('2d');
-        invert.style.width = '100px';
-        invert.style.height = '100px';
-        ctx.filter = this.updateAdjustment('invert', null, true);
-        ctx.drawImage(this.inMemoryCanvas, 0, 0, 300, 150);
+        if (!isNullOrUndefined(invert)) {
+            ctx = invert.getContext('2d');
+            invert.style.width = '100px';
+            invert.style.height = '100px';
+            ctx.filter = this.updateAdjustment('invert', null, true);
+            ctx.drawImage(this.inMemoryCanvas, 0, 0, 300, 150);
+        }
     };
     ImageEditor.prototype.callUpdateCurrentTransformedState = function () {
         var tempObjColl = extend([], this.objColl, [], true);
@@ -5127,6 +5142,7 @@ var ImageEditor = /** @class */ (function (_super) {
             this.activeObj.activePoint.height = this.activeObj.activePoint.endY - this.activeObj.activePoint.startY;
             this.updateActiveObject(this.activeObj.activePoint, this.activeObj);
         }
+        this.updateSelectionInsert();
         this.drawObject('duplicate', this.activeObj, null, null, true);
     };
     ImageEditor.prototype.clearOuterCanvas = function (context) {
@@ -6258,7 +6274,7 @@ var ImageEditor = /** @class */ (function (_super) {
                 _this.currObjType.isUndoZoom = false;
                 _this.lowerCanvas.style.display = 'block';
             }
-            _this.isUndoRedo = false;
+            _this.isUndoRedo = _this.isErrorImage = false;
             if (Browser.isDevice) {
                 if (_this.isToolbar() && (!isNullOrUndefined(document.getElementById(_this.element.id + '_toolbar'))) &&
                     (!isNullOrUndefined(getComponent(document.getElementById(_this.element.id + '_toolbar'), 'toolbar')))) {
@@ -6279,6 +6295,10 @@ var ImageEditor = /** @class */ (function (_super) {
                 _this.initToolbarItem(false, false, null);
             }
         };
+        this.baseImg.onerror = function () {
+            hideSpinner(_this.element);
+            _this.isErrorImage = true;
+        };
     };
     ImageEditor.prototype.refreshActiveObj = function () {
         this.activeObj = {};
@@ -6746,7 +6766,8 @@ var ImageEditor = /** @class */ (function (_super) {
             else if (!isShape && !isNullOrUndefined(activeObj.shape)) {
                 this.activeObj = activeObj;
                 var index = this.getCurrentIndex();
-                if ((!isNullOrUndefined(index) && JSON.stringify(this.activeObj.activePoint) === JSON.stringify(this.objColl[index].activePoint))) {
+                if ((!isNullOrUndefined(index) &&
+                    JSON.stringify(this.activeObj.activePoint) === JSON.stringify(this.objColl[index].activePoint))) {
                     this.objColl.splice(index, 1);
                 }
                 else if (isNullOrUndefined(this.activeObj.currIndex)) {
@@ -12822,6 +12843,13 @@ var ImageEditor = /** @class */ (function (_super) {
                     width: width, height: width };
             }
             this.activeObj.shape = cropShape.toLowerCase();
+            this.updateSelectionInsert();
+            if (this.activeObj.activePoint.startX !== 0 || this.activeObj.activePoint.startY !== 0 ||
+                this.activeObj.activePoint.width !== 0 || this.activeObj.activePoint.height !== 0) {
+                points = { startX: this.activeObj.activePoint.startX, startY: this.activeObj.activePoint.startY,
+                    endX: this.activeObj.activePoint.endX, endY: this.activeObj.activePoint.endY,
+                    width: this.activeObj.activePoint.width, height: this.activeObj.activePoint.height };
+            }
             this.drawObject('duplicate', null, true, points);
         }
     };
@@ -13245,7 +13273,28 @@ var ImageEditor = /** @class */ (function (_super) {
      * @returns {ImageData}.
      */
     ImageEditor.prototype.getImageData = function () {
+        if (!isNullOrUndefined(this.activeObj.shape)) {
+            this.performCancel();
+        }
+        var currentObj;
+        if (this.defaultZoomFactor > 0) {
+            currentObj = this.getCurrentObj();
+            currentObj.objColl = extend([], this.objColl, [], true);
+            currentObj.pointColl = extend([], this.pointColl, [], true);
+            currentObj.afterCropActions = extend([], this.afterCropActions, [], true);
+        }
+        this.resetZoom();
         var data = this.lowerContext.getImageData(this.destLeft, this.destTop, this.destWidth, this.destHeight);
+        if (!isNullOrUndefined(currentObj)) {
+            this.setCurrentObj(currentObj);
+            this.objColl = extend([], currentObj.objColl, [], true);
+            this.pointColl = extend([], currentObj.pointColl, [], true);
+            this.freehandCounter = this.pointColl.length;
+            this.lowerContext.filter = 'none';
+            this.zoomObjColl();
+            this.zoomFreehandDrawColl();
+            this.lowerContext.filter = currentObj.filter;
+        }
         return data;
     };
     /**
@@ -13268,12 +13317,15 @@ var ImageEditor = /** @class */ (function (_super) {
             }
             if (this.defToolbarItems.length === 0 &&
                 (isNullOrUndefined(document.getElementById(this.element.id + '_toolbar')))) {
-                this.toolbarHeight = 0;
-            }
-            if (isNullOrUndefined(this.toolbarTemplate)) {
-                this.reset();
-                this.update();
+                if (isNullOrUndefined(this.toolbarTemplate)) {
+                    this.toolbarHeight = 0;
+                }
+                else if (!isNullOrUndefined(this.element.querySelector('#' + this.element.id + '_toolbarArea'))) {
+                    this.toolbarHeight = this.element.querySelector('#' + this.element.id + '_toolbarArea').clientHeight;
+                }
             }
+            this.reset();
+            this.update();
             this.degree = 0;
             this.zoomFactor = 0;
             this.isImageLoaded = false;
@@ -13315,7 +13367,7 @@ var ImageEditor = /** @class */ (function (_super) {
      * @returns {void}.
      */
     ImageEditor.prototype.reset = function () {
-        if (!this.disabled) {
+        if (!this.disabled && !this.isErrorImage) {
             this.inMemoryContext.clearRect(0, 0, this.lowerCanvas.width, this.lowerCanvas.height);
             this.inMemoryContext.clearRect(0, 0, this.lowerCanvas.height, this.lowerCanvas.width);
             this.lowerContext.clearRect(0, 0, this.lowerCanvas.width, this.lowerCanvas.height);
@@ -13386,7 +13438,7 @@ var ImageEditor = /** @class */ (function (_super) {
             this.rotatedDestPoints = { startX: 0, startY: 0, width: 0, height: 0 };
             this.croppedDegree = 0;
             this.freehandDrawHoveredIndex = this.freehandDrawSelectedIndex = null;
-            this.isFreehandDrawingPoint = this.isFreehandDrawEditing = false;
+            this.isFreehandDrawingPoint = this.isFreehandDrawEditing = this.isErrorImage = false;
             this.tempFreeHandDrawEditingStyles = { strokeColor: null, fillColor: null, strokeWidth: null };
             this.totalPannedInternalPoint = { x: 0, y: 0 };
             this.totalPannedClientPoint = { x: 0, y: 0 };
@@ -13541,6 +13593,11 @@ var ImageEditor = /** @class */ (function (_super) {
      */
     ImageEditor.prototype.select = function (type, startX, startY, width, height) {
         if (!this.disabled && this.isImageLoaded) {
+            var previousObj = this.getCurrentObj();
+            previousObj.objColl = extend([], this.objColl, [], true);
+            previousObj.pointColl = extend([], this.pointColl, [], true);
+            previousObj.afterCropActions = this.afterCropActions;
+            this.previousCropCurrentObj = previousObj;
             if (this.zoomFactor > 0 && !isNullOrUndefined(this.activeObj.shape) && this.activeObj.shape.split('-')[0] === 'crop' && isNullOrUndefined(this.currentSelectionPoint)) {
                 this.currentSelectionPoint = extend({}, this.activeObj, {}, true);
             }
@@ -13597,6 +13654,13 @@ var ImageEditor = /** @class */ (function (_super) {
             }
         }
     };
+    ImageEditor.prototype.updateSelectionInsert = function () {
+        var shapeSettings = this.updatePreviousShapeSettings();
+        var shapeChangingArgs = { action: 'insert', previousShapeSettings: shapeSettings,
+            currentShapeSettings: shapeSettings };
+        this.trigger('shapeChanging', shapeChangingArgs);
+        this.updateShapeChangeEventArgs(shapeChangingArgs.currentShapeSettings);
+    };
     /**
      * Enable or disable a freehand drawing option in an Image Editor.
      *