@syncfusion/ej2-image-editor 21.1.35 → 21.1.37

package/dist/es6/ej2-image-editor.es5.js

@@ -222,6 +222,7 @@ var ImageEditor = /** @__PURE__ @class */ (function (_super) {
         _this.isShapeInserted = false;
         _this.isInitialTextEdited = false;
         _this.isShapeTextInserted = false;
+        _this.isErrorImage = false;
         return _this;
     }
     ImageEditor_1 = ImageEditor;
@@ -427,7 +428,8 @@ var ImageEditor = /** @__PURE__ @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) {
@@ -1324,11 +1326,9 @@ var ImageEditor = /** @__PURE__ @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);
@@ -1342,6 +1342,12 @@ var ImageEditor = /** @__PURE__ @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;
@@ -2325,7 +2331,6 @@ var ImageEditor = /** @__PURE__ @class */ (function (_super) {
                 isDisabledFilter = true;
             }
             this.enableDisableToolbarBtn();
-            var previousObj = void 0;
             var duplicateObj = void 0;
             var objColl = void 0;
             if (!this.disabled) {
@@ -2375,11 +2380,6 @@ var ImageEditor = /** @__PURE__ @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();
@@ -4445,48 +4445,63 @@ var ImageEditor = /** @__PURE__ @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);
@@ -6255,7 +6270,7 @@ var ImageEditor = /** @__PURE__ @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')))) {
@@ -6276,6 +6291,10 @@ var ImageEditor = /** @__PURE__ @class */ (function (_super) {
                 _this.initToolbarItem(false, false, null);
             }
         };
+        this.baseImg.onerror = function () {
+            hideSpinner(_this.element);
+            _this.isErrorImage = true;
+        };
     };
     ImageEditor.prototype.refreshActiveObj = function () {
         this.activeObj = {};
@@ -6743,7 +6762,8 @@ var ImageEditor = /** @__PURE__ @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)) {
@@ -13242,7 +13262,28 @@ var ImageEditor = /** @__PURE__ @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;
     };
     /**
@@ -13265,12 +13306,15 @@ var ImageEditor = /** @__PURE__ @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;
@@ -13312,7 +13356,7 @@ var ImageEditor = /** @__PURE__ @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);
@@ -13383,7 +13427,7 @@ var ImageEditor = /** @__PURE__ @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 };
@@ -13538,6 +13582,11 @@ var ImageEditor = /** @__PURE__ @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);
             }