@syncfusion/ej2-image-editor 21.1.35 → 21.1.39

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

@@ -199,6 +199,7 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends Component {
         this.isShapeInserted = false;
         this.isInitialTextEdited = false;
         this.isShapeTextInserted = false;
+        this.isErrorImage = false;
     }
     preRender() {
         // pre render code snippets
@@ -401,7 +402,8 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends Component {
                         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) {
@@ -1293,11 +1295,9 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends Component {
         this.performTransformation(args.item.id);
         this.updateCurrentUndoRedoColl('ok');
     }
-    performTransformation(text) {
-        const tempZoomFactor = this.defaultZoomFactor;
-        const isUndoRedo = this.isUndoRedo;
-        const prevCropObj = extend({}, this.cropObj, {}, true);
+    resetZoom() {
         if (this.defaultZoomFactor !== 0) {
+            const isUndoRedo = this.isUndoRedo;
             this.transformCurrentObj = this.getCurrentObj();
             this.transformCurrentObj.objColl = extend([], this.objColl, null, true);
             this.transformCurrentObj.pointColl = extend({}, this.pointColl, null, true);
@@ -1311,6 +1311,12 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends Component {
             }
             this.isUndoRedo = isUndoRedo;
         }
+    }
+    performTransformation(text) {
+        const tempZoomFactor = this.defaultZoomFactor;
+        const isUndoRedo = this.isUndoRedo;
+        const prevCropObj = extend({}, this.cropObj, {}, true);
+        this.resetZoom();
         this.updateTransform(text);
         if (tempZoomFactor !== 0) {
             this.isUndoRedo = true;
@@ -2287,7 +2293,6 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends Component {
                 isDisabledFilter = true;
             }
             this.enableDisableToolbarBtn();
-            let previousObj;
             let duplicateObj;
             let objColl;
             if (!this.disabled) {
@@ -2337,11 +2342,6 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends Component {
                         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();
@@ -4401,48 +4401,63 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends Component {
         this.inMemoryCanvas.width = imageData.width;
         this.inMemoryCanvas.height = imageData.height;
         this.inMemoryContext.putImageData(imageData, 0, 0);
+        let ctx;
         const noFilter = document.querySelector('#' + this.element.id + '_defaultCanvas');
-        let 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);
+        }
         const 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);
+        }
         const 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);
+        }
         const 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);
+        }
         const 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);
+        }
         const 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);
+        }
         const 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);
+        }
     }
     callUpdateCurrentTransformedState() {
         const tempObjColl = extend([], this.objColl, [], true);
@@ -5080,6 +5095,7 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends Component {
             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);
     }
     clearOuterCanvas(context) {
@@ -6210,7 +6226,7 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends Component {
                 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')))) {
@@ -6231,6 +6247,10 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends Component {
                 this.initToolbarItem(false, false, null);
             }
         };
+        this.baseImg.onerror = () => {
+            hideSpinner(this.element);
+            this.isErrorImage = true;
+        };
     }
     refreshActiveObj() {
         this.activeObj = {};
@@ -6698,7 +6718,8 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends Component {
             else if (!isShape && !isNullOrUndefined(activeObj.shape)) {
                 this.activeObj = activeObj;
                 const 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)) {
@@ -12772,6 +12793,13 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends Component {
                     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);
         }
     }
@@ -13195,7 +13223,28 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends Component {
      * @returns {ImageData}.
      */
     getImageData() {
+        if (!isNullOrUndefined(this.activeObj.shape)) {
+            this.performCancel();
+        }
+        let 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();
         const 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;
     }
     /**
@@ -13218,12 +13267,15 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends Component {
             }
             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;
@@ -13265,7 +13317,7 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends Component {
      * @returns {void}.
      */
     reset() {
-        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);
@@ -13336,7 +13388,7 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends Component {
             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 };
@@ -13490,6 +13542,11 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends Component {
      */
     select(type, startX, startY, width, height) {
         if (!this.disabled && this.isImageLoaded) {
+            const 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);
             }
@@ -13546,6 +13603,13 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends Component {
             }
         }
     }
+    updateSelectionInsert() {
+        const shapeSettings = this.updatePreviousShapeSettings();
+        const 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.
      *