@syncfusion/ej2-image-editor 20.4.49 → 20.4.51

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

@@ -180,9 +180,9 @@ var ImageEditor = /** @class */ (function (_super) {
         _this.isAllowCropPan = false;
         _this.tempPannedPoint = { x: 0, y: 0 };
         _this.cropObj = { cropZoom: 0, defaultZoom: 0, totalPannedPoint: { x: 0, y: 0 }, totalPannedClientPoint: { x: 0, y: 0 },
-            totalPannedInternalPoint: { x: 0, y: 0 }, activeObj: {}, rotateFlipColl: [], degree: 0,
-            currFlipState: '', destPoints: { startX: 0, startY: 0, width: 0, height: 0 },
-            srcPoints: { startX: 0, startY: 0, width: 0, height: 0 } };
+            totalPannedInternalPoint: { x: 0, y: 0 }, tempFlipPanPoint: { x: 0, y: 0 }, activeObj: {}, rotateFlipColl: [],
+            degree: 0, currFlipState: '', destPoints: { startX: 0, startY: 0, width: 0, height: 0 },
+            srcPoints: { startX: 0, startY: 0, width: 0, height: 0 }, filter: '' };
         _this.afterCropActions = [];
         _this.isCancelAction = false;
         _this.isFreehandPointMoved = false;
@@ -401,7 +401,6 @@ var ImageEditor = /** @class */ (function (_super) {
         this.unwireEvent();
         _super.prototype.destroy.call(this);
         this.element.innerHTML = '';
-        this.trigger('destroyed');
     };
     ImageEditor.prototype.initialize = function () {
         this.updateFinetunes();
@@ -969,7 +968,7 @@ var ImageEditor = /** @class */ (function (_super) {
             redo.parentElement.classList.remove('e-overlay');
         }
         var zoomIn = document.querySelector('#' + this.element.id + '_zoomIn');
-        if (!isNullOrUndefined(zoomIn) && this.zoomFactor >= 5) {
+        if (!isNullOrUndefined(zoomIn) && this.zoomFactor >= 2) {
             zoomIn.classList.add('e-disabled');
             zoomIn.parentElement.classList.add('e-overlay');
         }
@@ -1182,32 +1181,34 @@ var ImageEditor = /** @class */ (function (_super) {
     ImageEditor.prototype.cropSelect = function (args) {
         this.isCropTab = true;
         this.zoomFactor = this.cropZoomFactor;
-        var activeObj = this.activeObj;
+        var prevCropObj = extend({}, this.cropObj, {}, true);
+        var previousObj = this.getCurrentObj();
+        previousObj.objColl = extend([], this.objColl, [], true);
+        previousObj.pointColl = extend([], this.pointColl, [], true);
+        previousObj.afterCropActions = this.afterCropActions;
         var text = args.item.id;
         this.currentToolbar = 'crop';
         this.currSelectionPoint = null;
         this.select(text);
         this.refreshToolbar('main', true, true);
         this.refreshDropDownBtn(true);
-        this.undoRedoColl.push({ operation: 'selectionTransform', value: null,
-            currentObj: extend([], this.objColl, [], true),
-            previousObj: extend([], this.objColl, [], true),
-            previousSelectionObj: extend({}, activeObj, {}, true),
-            currentSelectionObj: extend({}, this.activeObj, {}, true),
-            zoomFactor: this.zoomFactor, sharpen: this.adjustmentLevel.sharpen, bw: this.adjustmentLevel.bw });
-        this.undoRedoStep++;
+        this.updateUndoRedoColl('selectionTransform', previousObj, previousObj.objColl, previousObj.pointColl, prevCropObj);
         this.enableDisableToolbarBtn();
     };
     ImageEditor.prototype.transformSelect = function (args) {
         this.cropSelectedState();
         this.currentSelectionPoint = null;
         this.performTransformation(args.item.id);
-        this.afterCropActions.push(args.item.id);
     };
     ImageEditor.prototype.performTransformation = function (text) {
         var tempZoomFactor = this.defaultZoomFactor;
         var isUndoRedo = this.isUndoRedo;
+        var prevCropObj = extend({}, this.cropObj, {}, true);
         if (this.defaultZoomFactor !== 0) {
+            this.transformCurrentObj = this.getCurrentObj();
+            this.transformCurrentObj.objColl = extend([], this.objColl, null, true);
+            this.transformCurrentObj.pointColl = extend({}, this.pointColl, null, true);
+            this.transformCurrentObj.afterCropActions = extend([], this.afterCropActions, [], true);
             this.isUndoRedo = true;
             if (this.defaultZoomFactor > 0) {
                 this.zoom(-this.defaultZoomFactor);
@@ -1222,10 +1223,19 @@ var ImageEditor = /** @class */ (function (_super) {
             this.isUndoRedo = true;
             this.zoom(tempZoomFactor);
             this.isUndoRedo = isUndoRedo;
+            var state = '';
+            if (text === 'rotateleft' || text === 'rotateright') {
+                state = 'rotate';
+            }
+            else if (text === 'horizontalflip' || text === 'verticalflip') {
+                state = 'flip';
+            }
+            this.updateUndoRedoColl(state, this.transformCurrentObj, this.transformCurrentObj.objColl, this.transformCurrentObj.pointColl, prevCropObj);
+            this.transformCurrentObj = null;
         }
     };
     ImageEditor.prototype.updateTransform = function (text) {
-        switch (text) {
+        switch (text.toLowerCase()) {
             case 'rotateleft':
                 this.rotate(-90);
                 break;
@@ -1327,15 +1337,16 @@ var ImageEditor = /** @class */ (function (_super) {
                 showButtons: false, mode: 'Palette', cssClass: 'e-shape-fill-color',
                 change: function (args) {
                     _this.pushActItemIntoObj();
-                    var objColl = extend([], _this.objColl, [], true);
+                    var prevCropObj = extend({}, _this.cropObj, {}, true);
+                    var prevObj = _this.getCurrentObj();
+                    prevObj.objColl = extend([], _this.objColl, [], true);
+                    prevObj.pointColl = extend([], _this.pointColl, [], true);
+                    prevObj.afterCropActions = extend([], _this.afterCropActions, [], true);
                     _this.objColl.pop();
                     proxy.activeObj.strokeSettings.fillColor = args.currentValue.hex;
                     proxy.strokeSettings.fillColor = proxy.activeObj.strokeSettings.fillColor;
                     _this.objColl.push(_this.activeObj);
-                    proxy.undoRedoColl.push({ operation: 'shapeTransform', value: null, currentObj: extend([], proxy.objColl, [], true),
-                        previousObj: objColl, zoomFactor: proxy.zoomFactor, sharpen: proxy.adjustmentLevel.sharpen,
-                        bw: proxy.adjustmentLevel.bw });
-                    proxy.undoRedoStep++;
+                    _this.updateUndoRedoColl('shapeTransform', prevObj, prevObj.objColl, prevObj.pointColl, prevCropObj);
                     proxy.redrawShape(proxy.objColl[proxy.objColl.length - 1]);
                     if (args.currentValue.rgba === '') {
                         fillDDB_1.element.children[0].classList.add('e-nocolor-item');
@@ -1370,17 +1381,17 @@ var ImageEditor = /** @class */ (function (_super) {
                 showButtons: false, mode: 'Palette', cssClass: 'e-shape-stroke-color',
                 change: function (args) {
                     _this.pushActItemIntoObj();
-                    var objColl = extend([], _this.objColl, [], true);
+                    var prevCropObj = extend({}, _this.cropObj, {}, true);
+                    var prevObj = _this.getCurrentObj();
+                    prevObj.objColl = extend([], _this.objColl, [], true);
+                    prevObj.pointColl = extend([], _this.pointColl, [], true);
+                    prevObj.afterCropActions = extend([], _this.afterCropActions, [], true);
                     _this.objColl.pop();
                     proxy.activeObj.strokeSettings.strokeColor = args.currentValue.hex;
                     proxy.strokeSettings.strokeColor = proxy.activeObj.strokeSettings.strokeColor;
                     if (!proxy.togglePen) {
                         _this.objColl.push(_this.activeObj);
-                        proxy.undoRedoColl.push({ operation: 'shapeTransform', value: null,
-                            currentObj: extend([], proxy.objColl, [], true),
-                            previousObj: objColl, zoomFactor: proxy.zoomFactor,
-                            sharpen: proxy.adjustmentLevel.sharpen, bw: proxy.adjustmentLevel.bw });
-                        proxy.undoRedoStep++;
+                        proxy.updateUndoRedoColl('shapeTransform', prevObj, prevObj.objColl, prevObj.pointColl, prevCropObj);
                         proxy.redrawShape(proxy.objColl[proxy.objColl.length - 1]);
                     }
                     strokeDDB_1.element.children[0].style.backgroundColor = args.currentValue.rgba;
@@ -1431,18 +1442,18 @@ var ImageEditor = /** @class */ (function (_super) {
                 },
                 select: function (args) {
                     _this.pushActItemIntoObj();
-                    var objColl = extend([], _this.objColl, [], true);
+                    var prevCropObj = extend({}, _this.cropObj, {}, true);
+                    var prevObj = _this.getCurrentObj();
+                    prevObj.objColl = extend([], _this.objColl, [], true);
+                    prevObj.pointColl = extend([], _this.pointColl, [], true);
+                    prevObj.afterCropActions = extend([], _this.afterCropActions, [], true);
                     _this.objColl.pop();
                     spanElem_1.textContent = args.item.text;
                     _this.activeObj.strokeSettings.strokeWidth = parseInt(args.item.id, 10);
                     _this.activeObj.strokeSettings.strokeWidth *= 2;
                     _this.strokeSettings.strokeWidth = _this.activeObj.strokeSettings.strokeWidth;
                     _this.objColl.push(_this.activeObj);
-                    _this.undoRedoColl.push({ operation: 'shapeTransform', value: null,
-                        currentObj: extend([], _this.objColl, [], true),
-                        previousObj: objColl, zoomFactor: _this.zoomFactor,
-                        sharpen: _this.adjustmentLevel.sharpen, bw: _this.adjustmentLevel.bw });
-                    _this.undoRedoStep++;
+                    _this.updateUndoRedoColl('shapeTransform', prevObj, prevObj.objColl, prevObj.pointColl, prevCropObj);
                     _this.redrawShape(_this.objColl[_this.objColl.length - 1]);
                     if (Browser.isDevice) {
                         if (!isNullOrUndefined(document.getElementById(_this.element.id + '_bottomToolbar'))) {
@@ -1573,17 +1584,17 @@ var ImageEditor = /** @class */ (function (_super) {
                 showButtons: false, mode: 'Palette', cssClass: 'e-text-fontt-color',
                 change: function (args) {
                     _this.pushActItemIntoObj();
-                    var objColl = extend([], _this.objColl, [], true);
+                    var prevCropObj = extend({}, _this.cropObj, {}, true);
+                    var prevObj = _this.getCurrentObj();
+                    prevObj.objColl = extend([], _this.objColl, [], true);
+                    prevObj.pointColl = extend([], _this.pointColl, [], true);
+                    prevObj.afterCropActions = extend([], _this.afterCropActions, [], true);
                     _this.objColl.pop();
                     if (proxy.textArea.style.display === 'none') {
                         proxy.strokeSettings.strokeColor = proxy.activeObj.strokeSettings.strokeColor = args.currentValue.hex;
                         if (!proxy.togglePen) {
                             _this.objColl.push(_this.activeObj);
-                            proxy.undoRedoColl.push({ operation: 'shapeTransform',
-                                value: null, currentObj: extend([], proxy.objColl, [], true),
-                                previousObj: objColl, zoomFactor: proxy.zoomFactor,
-                                sharpen: proxy.adjustmentLevel.sharpen, bw: proxy.adjustmentLevel.bw });
-                            proxy.undoRedoStep++;
+                            proxy.updateUndoRedoColl('shapeTransform', prevObj, prevObj.objColl, prevObj.pointColl, prevCropObj);
                             proxy.redrawShape(proxy.objColl[proxy.objColl.length - 1]);
                         }
                     }
@@ -1592,21 +1603,13 @@ var ImageEditor = /** @class */ (function (_super) {
                         var temp = proxy.activeObj.strokeSettings.strokeColor;
                         proxy.activeObj.strokeSettings.strokeColor = args.currentValue.hex;
                         _this.objColl.push(_this.activeObj);
-                        _this.undoRedoColl.push({ operation: 'textTransform', value: null,
-                            currentObj: extend([], _this.objColl, [], true),
-                            previousObj: objColl, zoomFactor: proxy.zoomFactor,
-                            sharpen: proxy.adjustmentLevel.sharpen, bw: proxy.adjustmentLevel.bw });
-                        _this.undoRedoStep++;
+                        _this.updateUndoRedoColl('textAreaCustomization', prevObj, prevObj.objColl, prevObj.pointColl, prevCropObj);
                         _this.objColl.pop();
                         proxy.activeObj.strokeSettings.strokeColor = temp;
                     }
                     else if (!proxy.togglePen) {
                         _this.objColl.push(_this.activeObj);
-                        proxy.undoRedoColl.push({ operation: 'shapeTransform', value: null,
-                            currentObj: extend([], proxy.objColl, [], true),
-                            previousObj: objColl, zoomFactor: proxy.zoomFactor,
-                            sharpen: proxy.adjustmentLevel.sharpen, bw: proxy.adjustmentLevel.bw });
-                        proxy.undoRedoStep++;
+                        _this.updateUndoRedoColl('shapeTransform', prevObj, prevObj.objColl, prevObj.pointColl, prevCropObj);
                         proxy.redrawShape(proxy.objColl[proxy.objColl.length - 1]);
                     }
                     strokeDDB_2.element.children[0].style.backgroundColor = args.currentValue.rgba;
@@ -1678,6 +1681,11 @@ var ImageEditor = /** @class */ (function (_super) {
                 select: function (args) {
                     _this.pushActItemIntoObj();
                     var objColl = extend([], _this.objColl, [], true);
+                    var prevCropObj = extend({}, _this.cropObj, {}, true);
+                    var prevObj = _this.getCurrentObj();
+                    prevObj.objColl = extend([], _this.objColl, [], true);
+                    prevObj.pointColl = extend([], _this.pointColl, [], true);
+                    prevObj.afterCropActions = extend([], _this.afterCropActions, [], true);
                     _this.objColl.pop();
                     spanElem_2.textContent = args.item.text;
                     if (Browser.isDevice) {
@@ -1689,11 +1697,7 @@ var ImageEditor = /** @class */ (function (_super) {
                         _this.activeObj.textSettings.fontFamily = _this.toPascalCase(args.item.id);
                         _this.redrawText();
                         _this.objColl.push(_this.activeObj);
-                        _this.undoRedoColl.push({ operation: 'textTransform', value: null,
-                            currentObj: extend([], _this.objColl, [], true),
-                            previousObj: objColl, zoomFactor: _this.zoomFactor,
-                            sharpen: _this.adjustmentLevel.sharpen, bw: _this.adjustmentLevel.bw });
-                        _this.undoRedoStep++;
+                        _this.updateUndoRedoColl('textAreaCustomization', prevObj, prevObj.objColl, prevObj.pointColl, prevCropObj);
                         _this.objColl.pop();
                         _this.upperContext.clearRect(0, 0, _this.upperCanvas.width, _this.upperCanvas.height);
                         var width = _this.activeObj.activePoint.width +
@@ -1708,11 +1712,7 @@ var ImageEditor = /** @class */ (function (_super) {
                         _this.textSettings.fontFamily = _this.activeObj.textSettings.fontFamily = _this.toPascalCase(args.item.id);
                         _this.redrawText();
                         _this.objColl.push(_this.activeObj);
-                        _this.undoRedoColl.push({ operation: 'shapeTransform', value: null,
-                            currentObj: extend([], _this.objColl, [], true),
-                            previousObj: objColl, zoomFactor: _this.zoomFactor,
-                            sharpen: _this.adjustmentLevel.sharpen, bw: _this.adjustmentLevel.bw });
-                        _this.undoRedoStep++;
+                        _this.updateUndoRedoColl('shapeTransform', prevObj, objColl, extend([], _this.pointColl, [], true), prevCropObj);
                         _this.redrawShape(_this.objColl[_this.objColl.length - 1]);
                     }
                 }
@@ -1813,7 +1813,11 @@ var ImageEditor = /** @class */ (function (_super) {
                 },
                 select: function (args) {
                     _this.pushActItemIntoObj();
-                    var objColl = extend([], _this.objColl, [], true);
+                    var prevCropObj = extend({}, _this.cropObj, {}, true);
+                    var prevObj = _this.getCurrentObj();
+                    prevObj.objColl = extend([], _this.objColl, [], true);
+                    prevObj.pointColl = extend([], _this.pointColl, [], true);
+                    prevObj.afterCropActions = extend([], _this.afterCropActions, [], true);
                     _this.objColl.pop();
                     fontSizeSpanElem_1.textContent = args.item.text;
                     if (_this.textArea.style.display === 'block') {
@@ -1821,11 +1825,7 @@ var ImageEditor = /** @class */ (function (_super) {
                         var temp = _this.activeObj.textSettings.fontSize;
                         _this.activeObj.textSettings.fontSize = parseInt(_this.fontSizeColl[(parseInt(args.item.text, 10) - 1)].text, 10);
                         _this.objColl.push(_this.activeObj);
-                        _this.undoRedoColl.push({ operation: 'textTransform', value: null,
-                            currentObj: extend([], _this.objColl, [], true),
-                            previousObj: objColl, zoomFactor: _this.zoomFactor,
-                            sharpen: _this.adjustmentLevel.sharpen, bw: _this.adjustmentLevel.bw });
-                        _this.undoRedoStep++;
+                        _this.updateUndoRedoColl('textAreaCustomization', prevObj, prevObj.objColl, prevObj.pointColl, prevCropObj);
                         _this.objColl.pop();
                         var textStyle = '';
                         if (_this.textArea.style.fontWeight === 'bold') {
@@ -1865,11 +1865,7 @@ var ImageEditor = /** @class */ (function (_super) {
                         _this.updateActiveObject(_this.activeObj.activePoint, _this.activeObj);
                         _this.redrawText();
                         _this.objColl.push(_this.activeObj);
-                        _this.undoRedoColl.push({ operation: 'shapeTransform', value: null,
-                            currentObj: extend([], _this.objColl, [], true),
-                            previousObj: objColl, zoomFactor: _this.zoomFactor,
-                            sharpen: _this.adjustmentLevel.sharpen, bw: _this.adjustmentLevel.bw });
-                        _this.undoRedoStep++;
+                        _this.updateUndoRedoColl('shapeTransform', prevObj, prevObj.objColl, prevObj.pointColl, prevCropObj);
                         _this.redrawShape(_this.objColl[_this.objColl.length - 1]);
                     }
                 }
@@ -1929,14 +1925,27 @@ var ImageEditor = /** @class */ (function (_super) {
         return width;
     };
     ImageEditor.prototype.updateUndoRedoObj = function (objColl) {
-        this.objColl.push(this.activeObj);
-        this.undoRedoColl.push({ operation: 'shapeTransform', value: null,
-            currentObj: extend([], this.objColl, [], true), previousObj: objColl, zoomFactor: this.zoomFactor,
-            sharpen: this.adjustmentLevel.sharpen, bw: this.adjustmentLevel.bw });
-        this.undoRedoStep++;
-        this.redrawShape(this.objColl[this.objColl.length - 1]);
+        if (this.allowUndoRedo) {
+            this.objColl.push(this.activeObj);
+            var cropObj = extend({}, this.cropObj, {}, true);
+            var obj = this.getCurrentObj();
+            obj.objColl = extend([], this.objColl, [], true);
+            obj.pointColl = extend([], this.pointColl, [], true);
+            obj.afterCropActions = extend([], this.afterCropActions, [], true);
+            this.undoRedoColl.push({ operation: 'shapeTransform', previousObj: obj, currentObj: obj,
+                previousObjColl: objColl, currentObjColl: obj.objColl,
+                previousPointColl: obj.pointColl, currentPointColl: obj.pointColl,
+                previousCropObj: cropObj, currentCropObj: cropObj });
+            this.undoRedoStep++;
+            this.redrawShape(this.objColl[this.objColl.length - 1]);
+        }
     };
     ImageEditor.prototype.updateObjColl = function (item, objColl) {
+        var prevCropObj = extend({}, this.cropObj, {}, true);
+        var prevObj = this.getCurrentObj();
+        prevObj.objColl = extend([], this.objColl, [], true);
+        prevObj.pointColl = extend([], this.pointColl, [], true);
+        prevObj.afterCropActions = extend([], this.afterCropActions, [], true);
         var tempBold = this.activeObj.textSettings.bold;
         var tempItalic = this.activeObj.textSettings.italic;
         switch (item) {
@@ -1958,10 +1967,7 @@ var ImageEditor = /** @class */ (function (_super) {
                 break;
         }
         this.objColl.push(this.activeObj);
-        this.undoRedoColl.push({ operation: 'textTransform', value: null,
-            currentObj: extend([], this.objColl, [], true), previousObj: objColl, zoomFactor: this.zoomFactor,
-            sharpen: this.adjustmentLevel.sharpen, bw: this.adjustmentLevel.bw });
-        this.undoRedoStep++;
+        this.updateUndoRedoColl('textAreaCustomization', prevObj, prevObj.objColl, prevObj.pointColl, prevCropObj);
         this.objColl.pop();
         this.activeObj.textSettings.bold = tempBold;
         this.activeObj.textSettings.italic = tempItalic;
@@ -2190,7 +2196,7 @@ var ImageEditor = /** @class */ (function (_super) {
                         this.disablePan = false;
                     }
                     zoomIn = document.querySelector('#' + this.element.id + '_zoomIn');
-                    if (!isNullOrUndefined(zoomIn) && this.zoomFactor >= 5) {
+                    if (!isNullOrUndefined(zoomIn) && this.zoomFactor >= 2) {
                         zoomIn.classList.add('e-disabled');
                         zoomIn.parentElement.classList.add('e-overlay');
                     }
@@ -2210,7 +2216,12 @@ var ImageEditor = /** @class */ (function (_super) {
                     break;
                 case 'crop':
                     if (!isNullOrUndefined(this.currSelectionPoint)) {
-                        this.select('Custom');
+                        if (this.currObjType.isUndoAction) {
+                            this.refreshUndoRedoColl();
+                        }
+                        if (!isNullOrUndefined(this.cropObj.activeObj.shape)) {
+                            this.select(this.cropObj.activeObj.shape);
+                        }
                         this.refreshToolbar('main', true, true);
                         getComponent(this.element.querySelector('#' + this.element.id + '_cropBtn'), 'dropdown-btn').toggle();
                         if (!isNullOrUndefined(this.activeObj.shape)) {
@@ -2222,12 +2233,12 @@ var ImageEditor = /** @class */ (function (_super) {
                     imageEditorObj.reset();
                     this.currentToolbar = 'main';
                     break;
-                case 'undo':
-                    this.callUndo();
-                    break;
-                case 'redo':
-                    this.callRedo();
-                    break;
+                // case 'undo':
+                //     this.callUndo();
+                //     break;
+                // case 'redo':
+                //     this.callRedo();
+                //     break;
                 case 'adjustment':
                     if (!isDisabledAdjustment) {
                         this.refreshToolbar('adjustment');
@@ -2259,6 +2270,9 @@ var ImageEditor = /** @class */ (function (_super) {
                 case 'sepia':
                 case 'invert':
                 case 'sharpen':
+                    if (this.currObjType.isUndoAction) {
+                        this.refreshUndoRedoColl();
+                    }
                     this.currObjType.isFiltered = true;
                     this.setFilter(type);
                     break;
@@ -2291,7 +2305,6 @@ var ImageEditor = /** @class */ (function (_super) {
             this.currObjType.isFiltered = false;
             this.adjustmentLevel = extend({}, this.tempAdjustmentLevel, {}, true);
             this.element.querySelector('.e-contextual-toolbar-wrapper').classList.add('e-hide');
-            this.undoRedoColl = extend([], this.tempUndoRedoColl, [], true);
             this.undoRedoStep = this.tempUndoRedoStep;
             this.upperCanvas.style.cursor = 'default';
             this.currObjType.isCustomCrop = false;
@@ -2330,7 +2343,9 @@ var ImageEditor = /** @class */ (function (_super) {
         this.lowerContext.clearRect(0, 0, this.lowerCanvas.width, this.lowerCanvas.height);
         this.renderImage();
         this.refreshToolbar('main');
-        this.pointColl[this.freehandDrawSelectedIndex].isSelected = false;
+        if (!isNullOrUndefined(this.pointColl[this.freehandDrawSelectedIndex])) {
+            this.pointColl[this.freehandDrawSelectedIndex].isSelected = false;
+        }
         this.isFreehandDrawEditing = this.isFreehandDrawingPoint = false;
         this.freehandDrawHoveredIndex = this.freehandDrawSelectedIndex = null;
     };
@@ -2342,8 +2357,10 @@ var ImageEditor = /** @class */ (function (_super) {
             this.pointColl[n].strokeWidth = this.tempFreeHandDrawEditingStyles.strokeWidth;
         }
         this.pointCounter = 0;
-        this.pointColl[this.freehandDrawSelectedIndex].isSelected = false;
-        this.freehandDrawHoveredIndex = this.freehandDrawSelectedIndex = null;
+        if (!isNullOrUndefined(this.pointColl[this.freehandDrawSelectedIndex])) {
+            this.pointColl[this.freehandDrawSelectedIndex].isSelected = false;
+        }
+        this.freehandDrawHoveredIndex = this.freehandDrawSelectedIndex = this.freehandDrawSelectedId = null;
         this.isFreehandDrawEditing = this.isFreehandDrawingPoint = false;
         this.tempFreeHandDrawEditingStyles = { strokeColor: null, strokeWidth: null, fillColor: null };
         this.refreshToolbar('main');
@@ -2881,6 +2898,9 @@ var ImageEditor = /** @class */ (function (_super) {
             width: Browser.isDevice ? '200px' : '300px',
             cssClass: 'e-slider',
             change: function (args) {
+                if (_this.currObjType.isUndoAction) {
+                    _this.refreshUndoRedoColl();
+                }
                 _this.setCurrAdjustmentValue(type, args.value);
                 _this.enableDisableToolbarBtn();
             }
@@ -2985,11 +3005,80 @@ var ImageEditor = /** @class */ (function (_super) {
             this.iterateObjColl();
             this.freehandRedraw(this.lowerContext);
             this.lowerContext.filter = temp;
+            this.currSelectionPoint = null;
+        }
+        else {
+            if (this.cropObj.cropZoom > 0) {
+                var cropObjColl_1 = extend([], this.objColl, null, true);
+                var cropPointColl_1 = extend([], this.pointColl, null, true);
+                this.objColl = [];
+                this.pointColl = [];
+                this.freehandCounter = 0;
+                this.zoom(this.cropObj.cropZoom);
+                this.objColl = cropObjColl_1;
+                this.pointColl = cropPointColl_1;
+                this.freehandCounter = this.pointColl.length;
+                this.currSelectionPoint = extend({}, this.cropObj.activeObj, null, true);
+                if (this.cropObj.currFlipState !== '') {
+                    this.cropObj.totalPannedPoint.x += this.cropObj.tempFlipPanPoint.x;
+                    this.cropObj.totalPannedPoint.y += this.cropObj.tempFlipPanPoint.y;
+                }
+            }
+            var destPoints = { startX: this.destLeft, startY: this.destTop, width: this.destWidth, height: this.destHeight };
+            this.destLeft = this.currSelectionPoint.activePoint.startX;
+            this.destTop = this.currSelectionPoint.activePoint.startY;
+            this.destWidth = this.currSelectionPoint.activePoint.width;
+            this.destHeight = this.currSelectionPoint.activePoint.height;
+            this.zoomObjColl();
+            this.zoomFreehandDrawColl();
+            this.destLeft = destPoints.startX;
+            this.destTop = destPoints.startY;
+            this.destWidth = destPoints.width;
+            this.destHeight = destPoints.height;
+            this.updatePannedRegion();
+            this.updateObjAndFreeHandDrawColl();
+            var cropObjColl = extend([], this.objColl, null, true);
+            var cropPointColl = extend([], this.pointColl, null, true);
+            this.objColl = [];
+            this.pointColl = [];
+            this.freehandCounter = 0;
+            this.setCurrentObj();
+            var activeObj = extend({}, this.activeObj, null, true);
+            this.refreshActiveObj();
+            this.objColl = cropObjColl;
+            this.pointColl = cropPointColl;
+            this.freehandCounter = this.pointColl.length;
+            this.zoomObjColl();
+            this.zoomFreehandDrawColl();
+            this.currSelectionPoint = null;
+            if (this.degree === 0) {
+                this.drawPannImage({ x: 0, y: 0 });
+            }
+            this.activeObj = activeObj;
+            this.drawObject('duplicate');
+        }
+    };
+    ImageEditor.prototype.updatePannedRegion = function () {
+        var pannedPoint = this.degree === 0 ? this.cropObj.totalPannedPoint : this.cropObj.totalPannedClientPoint;
+        if (this.currFlipState === this.cropObj.currFlipState) {
+            this.panObjColl(-pannedPoint.x, -pannedPoint.y, '');
+            this.panFreehandDrawColl(-pannedPoint.x, -pannedPoint.y, '');
         }
         else {
-            this.setCropObj();
+            if (this.currFlipState === 'horizontal' && this.cropObj.currFlipState === '' ||
+                this.currFlipState === 'vertical' && this.cropObj.currFlipState === '') {
+                this.panObjColl(-pannedPoint.x, -pannedPoint.y, '');
+                this.panFreehandDrawColl(-pannedPoint.x, -pannedPoint.y, '');
+            }
+            else if (this.currFlipState === '' && this.cropObj.currFlipState === 'horizontal') {
+                this.panObjColl(pannedPoint.x, -pannedPoint.y, '');
+                this.panFreehandDrawColl(pannedPoint.x, -pannedPoint.y, '');
+            }
+            else if (this.currFlipState === '' && this.cropObj.currFlipState === 'vertical') {
+                this.panObjColl(-pannedPoint.x, pannedPoint.y, '');
+                this.panFreehandDrawColl(-pannedPoint.x, pannedPoint.y, '');
+            }
         }
-        this.currSelectionPoint = null;
     };
     ImageEditor.prototype.updateObjAndFreeHandDrawColl = function () {
         for (var i = 0; i < this.objColl.length; i++) {
@@ -3109,7 +3198,7 @@ var ImageEditor = /** @class */ (function (_super) {
                     var activeObj = extend({}, this.activeObj, {});
                     this.destLeft += (-this.totalPannedPoint.x);
                     this.destTop += (-this.totalPannedPoint.y);
-                    this.drawPannImage({ x: -this.totalPannedPoint.x, y: -this.totalPannedPoint.y }, this.getCurrentPanRegion());
+                    this.drawPannImage({ x: -this.totalPannedPoint.x, y: -this.totalPannedPoint.y });
                     this.updateFlipPan(activeObj);
                     this.totalPannedPoint = { x: 0, y: 0 };
                 }
@@ -3129,6 +3218,7 @@ var ImageEditor = /** @class */ (function (_super) {
                 else {
                     this.zoom(Math.abs(length_1));
                 }
+                this.cropZoomFactor = this.tempZoomFactor;
             }
             else {
                 this.isCancelAction = true;
@@ -3138,7 +3228,7 @@ var ImageEditor = /** @class */ (function (_super) {
                 this.freehandCounter = 0;
                 var cropObj = extend({}, this.cropObj, {});
                 var afterCropActions = extend([], this.afterCropActions, {}, true);
-                this.setCropObj();
+                this.setCurrentObj();
                 this.cropImg();
                 this.cropObj = cropObj;
                 this.afterCropActions = afterCropActions;
@@ -3191,6 +3281,11 @@ var ImageEditor = /** @class */ (function (_super) {
             }
         }
         context.closePath();
+        var prevCropObj = extend({}, this.cropObj, {}, true);
+        var prevObj = this.getCurrentObj();
+        prevObj.objColl = extend([], this.objColl, [], true);
+        prevObj.pointColl = extend([], this.pointColl, [], true);
+        prevObj.afterCropActions = extend([], this.afterCropActions, [], true);
         this.pointColl[this.freehandCounter] = {};
         this.pointColl[this.freehandCounter].points = extend([], this.points);
         this.pointColl[this.freehandCounter].strokeColor = this.activeObj.strokeSettings.strokeColor;
@@ -3202,16 +3297,7 @@ var ImageEditor = /** @class */ (function (_super) {
         this.freehandCounter++;
         this.currentFreehandDrawIndex++;
         this.isFreehandDrawing = false;
-        /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
-        var currentObj = extend([], this.pointColl, [], true);
-        this.pointColl = {};
-        for (var i = 0; i < this.freehandCounter - 1; i++) {
-            this.pointColl[i] = currentObj[i];
-        }
-        /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
-        var previousObj = extend([], this.pointColl, [], true);
-        this.updateUndoRedoColl('freehanddraw', null, previousObj, currentObj, this.zoomFactor);
-        this.pointColl = currentObj;
+        this.updateUndoRedoColl('freehanddraw', prevObj, prevObj.objColl, prevObj.pointColl, prevCropObj);
     };
     ImageEditor.prototype.freehandMoveHandler = function (e) {
         this.isFreehandPointMoved = true;
@@ -3695,8 +3781,11 @@ var ImageEditor = /** @class */ (function (_super) {
                     /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
                     var temp = extend([], _this.pointColl, [], true);
                     _this.updateFreehandDrawColorChange();
-                    /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
-                    var previousObj = extend([], _this.pointColl, [], true);
+                    var prevCropObj = extend({}, _this.cropObj, {}, true);
+                    var prevObj = _this.getCurrentObj();
+                    prevObj.objColl = extend([], _this.objColl, [], true);
+                    prevObj.pointColl = extend([], _this.pointColl, [], true);
+                    prevObj.afterCropActions = extend([], _this.afterCropActions, [], true);
                     _this.pointColl = temp;
                     proxy.isFreehandDrawCustomized = true;
                     proxy.activeObj.strokeSettings.strokeColor = proxy.selectedFreehandColor = args.currentValue.hex;
@@ -3704,7 +3793,7 @@ var ImageEditor = /** @class */ (function (_super) {
                         _this.upperContext.clearRect(0, 0, _this.upperCanvas.width, _this.upperCanvas.height);
                         _this.pointColl[_this.freehandDrawSelectedIndex].strokeColor = args.currentValue.hex;
                         _this.hoverFreehandraw(args.currentValue.hex);
-                        _this.updateUndoRedoColl('freehanddrawCustomized', null, previousObj, _this.pointColl, _this.zoomFactor);
+                        _this.updateUndoRedoColl('freehanddrawCustomized', prevObj, prevObj.objColl, prevObj.pointColl, prevCropObj);
                     }
                     else if (!proxy.togglePen) {
                         proxy.redrawShape(_this.activeObj);
@@ -3769,8 +3858,11 @@ var ImageEditor = /** @class */ (function (_super) {
                     /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
                     var temp = extend([], _this.pointColl, [], true);
                     _this.updateFreehandDrawColorChange();
-                    /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
-                    var previousObj = extend([], _this.pointColl, [], true);
+                    var prevCropObj = extend({}, _this.cropObj, {}, true);
+                    var prevObj = _this.getCurrentObj();
+                    prevObj.objColl = extend([], _this.objColl, [], true);
+                    prevObj.pointColl = extend([], _this.pointColl, [], true);
+                    prevObj.afterCropActions = extend([], _this.afterCropActions, [], true);
                     _this.pointColl = temp;
                     _this.isFreehandDrawCustomized = true;
                     spanElem_3.textContent = args.item.text;
@@ -3779,7 +3871,7 @@ var ImageEditor = /** @class */ (function (_super) {
                         _this.upperContext.clearRect(0, 0, _this.upperCanvas.width, _this.upperCanvas.height);
                         _this.hoverFreehandraw(null, _this.penStrokeWidth);
                         _this.pointColl[_this.freehandDrawSelectedIndex].strokeWidth = _this.penStrokeWidth;
-                        _this.updateUndoRedoColl('freehanddrawCustomized', null, previousObj, _this.pointColl, _this.zoomFactor);
+                        _this.updateUndoRedoColl('freehanddrawCustomized', prevObj, prevObj.objColl, prevObj.pointColl, prevCropObj);
                     }
                     if (Browser.isDevice) {
                         if (!isNullOrUndefined(document.getElementById(_this.element.id + '_bottomToolbar'))) {
@@ -3988,6 +4080,9 @@ var ImageEditor = /** @class */ (function (_super) {
         this.destLeft += this.totalPannedInternalPoint.x;
         this.destTop += this.totalPannedInternalPoint.y;
         var temp = this.lowerContext.filter;
+        if (this.degree === 0) {
+            this.setDestPointsForFlipState();
+        }
         this.updateBrightnessFilter();
         this.lowerContext.drawImage(this.baseImg, this.srcLeft, this.srcTop, this.srcWidth, this.srcHeight, this.destLeft, this.destTop, this.destWidth, this.destHeight);
         this.updateCurrentTransformedState('reverse');
@@ -4231,6 +4326,10 @@ var ImageEditor = /** @class */ (function (_super) {
         context.strokeStyle = '#fff';
         minStrokeWidth = maxStrokeWidth = this.penStrokeWidth = strokeWidth ?
             strokeWidth : this.pointColl[idx].strokeWidth;
+        if (len === 1) {
+            controlPoint1 = controlPoint2 = startPoint = endPoint = this.points[0];
+            this.startDraw(context, controlPoint1, controlPoint2, startPoint, endPoint, minStrokeWidth, maxStrokeWidth);
+        }
         for (var l = 0; l < len - 3; l++) {
             if (this.points[l + 1] && this.points[l + 2] && this.points[l + 2]) {
                 controlPoint1 = (this.calcCurveControlPoints(this.points[l + 0], this.points[l + 1], this.points[l + 2])).controlPoint2;
@@ -4239,55 +4338,64 @@ var ImageEditor = /** @class */ (function (_super) {
                 endPoint = this.points[l + 2];
                 this.startDraw(context, controlPoint1, controlPoint2, startPoint, endPoint, minStrokeWidth, maxStrokeWidth);
             }
-            if (len === 1) {
-                controlPoint1 = controlPoint2 = startPoint = endPoint = this.points[0];
-                this.startDraw(context, controlPoint1, controlPoint2, startPoint, endPoint, minStrokeWidth, maxStrokeWidth);
-            }
         }
         context.closePath();
     };
-    ImageEditor.prototype.flipFreehandrawColl = function (value) {
-        if (value.toLowerCase() === 'horizontal') {
-            for (var n = 0; n < this.freehandCounter; n++) {
-                if (this.pointColl[n].shapeFlip !== this.currFlipState) {
-                    this.points = extend([], this.pointColl[n].points, []);
-                    this.pointCounter = 0;
-                    var len = this.points.length;
-                    for (var l = 0; l < len; l++) {
-                        if (this.points[l].x <= this.destLeft + (this.destWidth / 2)) {
-                            this.points[l].x = (this.destLeft + this.destWidth) - (this.points[l].x - this.destLeft);
-                        }
-                        else if (this.points[l].x >= this.destLeft + (this.destWidth / 2)) {
-                            this.points[l].x = this.destLeft + (this.destLeft + this.destWidth - this.points[l].x);
-                        }
-                        this.points[l].ratioX = (this.points[l].x - this.destLeft) / this.destWidth;
-                        this.points[l].ratioY = (this.points[l].y - this.destTop) / this.destHeight;
+    ImageEditor.prototype.pointsHorizontalFlip = function () {
+        for (var n = 0; n < this.freehandCounter; n++) {
+            if (this.pointColl[n].shapeFlip !== this.currFlipState) {
+                this.points = extend([], this.pointColl[n].points, []);
+                this.pointCounter = 0;
+                var len = this.points.length;
+                for (var l = 0; l < len; l++) {
+                    if (this.points[l].x <= this.destLeft + (this.destWidth / 2)) {
+                        this.points[l].x = (this.destLeft + this.destWidth) - (this.points[l].x - this.destLeft);
                     }
-                    this.pointColl[n].shapeFlip = this.currFlipState;
+                    else if (this.points[l].x >= this.destLeft + (this.destWidth / 2)) {
+                        this.points[l].x = this.destLeft + (this.destLeft + this.destWidth - this.points[l].x);
+                    }
+                    this.points[l].ratioX = (this.points[l].x - this.destLeft) / this.destWidth;
+                    this.points[l].ratioY = (this.points[l].y - this.destTop) / this.destHeight;
                 }
+                this.pointColl[n].shapeFlip = this.currFlipState;
             }
         }
-        else {
-            for (var n = 0; n < this.freehandCounter; n++) {
-                if (this.pointColl[n].shapeFlip !== this.currFlipState) {
-                    this.points = extend([], this.pointColl[n].points, []);
-                    this.pointCounter = 0;
-                    var len = this.points.length;
-                    for (var l = 0; l < len; l++) {
-                        if (this.points[l].y <= this.destTop + (this.destHeight / 2)) {
-                            this.points[l].y = (this.destTop + this.destHeight) - (this.points[l].y - this.destTop);
-                        }
-                        else if (this.points[l].y >= this.destTop + (this.destHeight / 2)) {
-                            this.points[l].y = this.destTop + (this.destTop + this.destHeight - this.points[l].y);
-                        }
-                        this.points[l].ratioX = (this.points[l].x - this.destLeft) / this.destWidth;
-                        this.points[l].ratioY = (this.points[l].y - this.destTop) / this.destHeight;
+    };
+    ImageEditor.prototype.pointsVerticalFlip = function () {
+        for (var n = 0; n < this.freehandCounter; n++) {
+            if (this.pointColl[n].shapeFlip !== this.currFlipState) {
+                this.points = extend([], this.pointColl[n].points, []);
+                this.pointCounter = 0;
+                var len = this.points.length;
+                for (var l = 0; l < len; l++) {
+                    if (this.points[l].y <= this.destTop + (this.destHeight / 2)) {
+                        this.points[l].y = (this.destTop + this.destHeight) - (this.points[l].y - this.destTop);
+                    }
+                    else if (this.points[l].y >= this.destTop + (this.destHeight / 2)) {
+                        this.points[l].y = this.destTop + (this.destTop + this.destHeight - this.points[l].y);
                     }
-                    this.pointColl[n].shapeFlip = this.currFlipState;
+                    this.points[l].ratioX = (this.points[l].x - this.destLeft) / this.destWidth;
+                    this.points[l].ratioY = (this.points[l].y - this.destTop) / this.destHeight;
                 }
+                this.pointColl[n].shapeFlip = this.currFlipState;
             }
         }
     };
+    ImageEditor.prototype.flipFreehandrawColl = function (value) {
+        if (value.toLowerCase() === 'horizontal') {
+            this.pointsHorizontalFlip();
+        }
+        else if (value.toLowerCase() === 'vertical') {
+            this.pointsVerticalFlip();
+        }
+        else {
+            this.pointsHorizontalFlip();
+            for (var i = 0; i < this.freehandCounter; i++) {
+                this.pointColl[i].shapeFlip = '';
+            }
+            this.pointsVerticalFlip();
+        }
+    };
     ImageEditor.prototype.rotateFreehandDrawColl = function () {
         for (var n = 0; n < this.freehandCounter; n++) {
             this.points = extend([], this.pointColl[n].points, []);
@@ -4309,7 +4417,7 @@ var ImageEditor = /** @class */ (function (_super) {
             }
         }
     };
-    ImageEditor.prototype.zoomFreehandDrawColl = function () {
+    ImageEditor.prototype.zoomFreehandDrawColl = function (isPreventApply) {
         for (var n = 0; n < this.freehandCounter; n++) {
             this.points = extend([], this.pointColl[n].points, []);
             this.pointCounter = 0;
@@ -4319,7 +4427,9 @@ var ImageEditor = /** @class */ (function (_super) {
                 this.points[l].y = this.zoomY(this.points[l].ratioY);
             }
         }
-        this.freehandRedraw(this.lowerContext);
+        if (isNullOrUndefined(isPreventApply)) {
+            this.freehandRedraw(this.lowerContext);
+        }
     };
     ImageEditor.prototype.zoomX = function (x) {
         return (x * this.destWidth) + this.destLeft;
@@ -4488,170 +4598,154 @@ var ImageEditor = /** @class */ (function (_super) {
     };
     ImageEditor.prototype.updateCropObj = function () {
         this.afterCropActions = [];
-        this.cropObj.cropZoom = this.cropZoomFactor;
-        this.cropObj.defaultZoom = this.defaultZoomFactor;
-        this.cropObj.totalPannedPoint = extend({}, this.totalPannedPoint, {}, true);
-        this.cropObj.totalPannedClientPoint = extend({}, this.totalPannedClientPoint, {}, true);
-        this.cropObj.totalPannedInternalPoint = extend({}, this.totalPannedInternalPoint, {}, true);
-        this.cropObj.activeObj = extend({}, this.activeObj, {}, true);
-        this.cropObj.rotateFlipColl = extend([], this.rotateFlipColl, [], true);
-        this.cropObj.degree = this.degree;
-        this.cropObj.currFlipState = this.currFlipState;
-        this.cropObj.destPoints = { startX: this.destLeft, startY: this.destTop, endX: 0, endY: 0,
-            width: this.destWidth, height: this.destHeight };
-        this.cropObj.srcPoints = { startX: this.srcLeft, startY: this.srcTop, endX: 0, endY: 0,
-            width: this.srcWidth, height: this.srcHeight };
+        var obj = this.getCurrentObj();
+        this.cropObj = extend({}, obj, {}, true);
     };
-    ImageEditor.prototype.setCropObj = function () {
-        this.cropZoomFactor = this.zoomFactor = this.cropObj.cropZoom;
-        this.defaultZoomFactor = this.cropObj.defaultZoom;
-        this.totalPannedPoint = extend({}, this.cropObj.totalPannedPoint, {}, true);
-        this.totalPannedClientPoint = extend({}, this.cropObj.totalPannedClientPoint, {}, true);
-        this.totalPannedInternalPoint = extend({}, this.cropObj.totalPannedInternalPoint, {}, true);
-        this.rotateFlipColl = extend([], this.cropObj.rotateFlipColl, [], true);
-        this.degree = this.cropObj.degree;
-        this.currFlipState = this.cropObj.currFlipState;
-        this.destLeft = this.cropObj.destPoints.startX;
-        this.destTop = this.cropObj.destPoints.startY;
-        this.destWidth = this.cropObj.destPoints.width;
-        this.destHeight = this.cropObj.destPoints.height;
-        this.srcLeft = this.cropObj.srcPoints.startX;
-        this.srcTop = this.cropObj.srcPoints.startY;
-        this.srcWidth = this.cropObj.srcPoints.width;
-        this.srcHeight = this.cropObj.srcPoints.height;
-        this.drawCropSelectionImage();
-        if (this.degree !== 0) {
-            this.isCircleCrop = false;
-            if (!isNullOrUndefined(this.currSelectionPoint)) {
-                this.currSelectionPoint.shape = '';
+    ImageEditor.prototype.setCurrentObj = function (obj) {
+        var isObj = obj ? true : false;
+        obj = obj ? obj : this.cropObj;
+        this.cropZoomFactor = obj.cropZoom;
+        this.defaultZoomFactor = obj.defaultZoom;
+        if (!isObj) {
+            this.zoomFactor = obj.cropZoom;
+        }
+        else {
+            if (!isNullOrUndefined(obj.activeObj.shape) && obj.activeObj.shape.split('-')[0] === 'crop') {
+                this.zoomFactor = obj.cropZoom;
+            }
+            else {
+                this.zoomFactor = obj.defaultZoom;
+            }
+        }
+        this.totalPannedPoint = extend({}, obj.totalPannedPoint, {}, true);
+        this.totalPannedClientPoint = extend({}, obj.totalPannedClientPoint, {}, true);
+        this.totalPannedInternalPoint = extend({}, obj.totalPannedInternalPoint, {}, true);
+        this.tempFlipPanPoint = extend({}, obj.tempFlipPanPoint, {}, true);
+        this.rotateFlipColl = extend([], obj.rotateFlipColl, [], true);
+        this.degree = obj.degree;
+        this.currFlipState = obj.currFlipState;
+        this.destLeft = obj.destPoints.startX;
+        this.destTop = obj.destPoints.startY;
+        this.destWidth = obj.destPoints.width;
+        this.destHeight = obj.destPoints.height;
+        this.srcLeft = obj.srcPoints.startX;
+        this.srcTop = obj.srcPoints.startY;
+        this.srcWidth = obj.srcPoints.width;
+        this.srcHeight = obj.srcPoints.height;
+        this.lowerContext.filter = obj.filter;
+        if (this.lowerContext.filter.split(' ').length > 1) {
+            if (this.lowerContext.filter.split(' ')[0].split('(')[1].split(')')[0] === '1') {
+                this.isBrightnessAdjusted = false;
+            }
+            else {
+                this.isBrightnessAdjusted = true;
             }
+        }
+        var isCircleCrop = this.isCircleCrop;
+        var currSelectionPoint = extend({}, this.currSelectionPoint, {}, true);
+        this.currSelectionPoint = null;
+        this.isCircleCrop = false;
+        this.drawCropSelectionImage(obj, false);
+        if (this.degree !== 0) {
             this.currentPannedPoint = { x: 0, y: 0 };
             this.rotatePan();
         }
-        this.activeObj = extend({}, this.cropObj.activeObj, {}, true);
+        this.activeObj = extend({}, obj.activeObj, {}, true);
         this.upperContext.clearRect(0, 0, this.upperCanvas.width, this.upperCanvas.height);
-        this.drawObject('duplicate');
-        var activeObj = extend({}, this.cropObj.activeObj, {}, true);
+        if (this.activeObj.activePoint.width !== 0 && this.activeObj.activePoint.height !== 0) {
+            this.drawObject('duplicate');
+        }
+        var activeObj = extend({}, obj.activeObj, {}, true);
         var isAfterCropAction = false;
-        if (this.afterCropActions.length > 0) {
+        this.afterCropActions = this.alignRotateFlipColl(this.afterCropActions);
+        var afterCropActions = extend([], this.afterCropActions, [], true);
+        if (!isObj && afterCropActions.length > 0) {
             isAfterCropAction = true;
-            var objColl = extend([], this.objColl, {}, true);
-            var pointColl = extend([], this.pointColl, {}, true);
-            var freehandCounter = this.freehandCounter;
-            this.objColl = [];
-            this.pointColl = [];
-            this.freehandCounter = 0;
-            var isCircleCrop = this.isCircleCrop;
-            var currSelectionPoint = extend({}, this.currSelectionPoint, {}, true);
-            this.currSelectionPoint = null;
-            this.isCircleCrop = false;
-            var isFlip = false;
-            for (var i = 0; i < this.afterCropActions.length; i++) {
+            for (var i = 0; i < afterCropActions.length; i++) {
                 if (this.degree % 90 === 0 && this.degree % 180 !== 0 &&
-                    (this.afterCropActions[i] === 'horizontalflip' || this.afterCropActions[i] === 'verticalflip')) {
+                    (afterCropActions[i] === 'horizontalflip' || afterCropActions[i] === 'verticalflip')) {
                     this.rotatedFlipCropSelection = true;
                 }
-                this.updateTransform(this.afterCropActions[i]);
-                if (this.afterCropActions[i] === 'horizontalflip' || this.afterCropActions[i] === 'verticalflip') {
-                    if (this.degree === 0) {
-                        this.destLeft += this.totalPannedPoint.x;
-                        this.destTop += this.totalPannedPoint.y;
+                this.updateTransform(afterCropActions[i]);
+                if (afterCropActions[i] === 'horizontalflip' || afterCropActions[i] === 'verticalflip') {
+                    if (afterCropActions.length === 1) {
+                        this.activeObj = extend({}, this.cropObj.activeObj, {}, true);
+                        this.upperContext.clearRect(0, 0, this.upperCanvas.width, this.upperCanvas.height);
+                        this.drawObject('duplicate');
                     }
-                    isFlip = true;
                 }
             }
-            this.isCircleCrop = isCircleCrop;
-            this.currSelectionPoint = currSelectionPoint;
-            var destPoints = { startX: this.destLeft, startY: this.destTop, width: this.destWidth, height: this.destHeight };
             activeObj = extend({}, this.activeObj, {}, true);
-            this.refreshActiveObj();
-            this.objColl = objColl;
-            this.pointColl = pointColl;
-            this.freehandCounter = freehandCounter;
-            if (this.rotateFlipColl.length > 1 && typeof (this.rotateFlipColl[this.rotateFlipColl.length - 1]) === 'string') {
-                this.iterateObjColl();
-                this.freehandRedraw(this.lowerContext);
-            }
-            else if (this.rotateFlipColl.length > 1 && typeof (this.rotateFlipColl[this.rotateFlipColl.length - 1]) === 'number' ||
-                this.rotateFlipColl.length >= 0) {
-                this.destLeft = activeObj.activePoint.startX;
-                this.destTop = activeObj.activePoint.startY;
-                this.destWidth = activeObj.activePoint.width;
-                this.destHeight = activeObj.activePoint.height;
-                this.zoomObjColl();
-                this.zoomFreehandDrawColl();
-            }
-            this.destLeft = destPoints.startX;
-            this.destTop = destPoints.startY;
-            this.destWidth = destPoints.width;
-            this.destHeight = destPoints.height;
             this.totalPannedPoint = { x: 0, y: 0 };
             this.totalPannedClientPoint = { x: 0, y: 0 };
             this.totalPannedInternalPoint = { x: 0, y: 0 };
             this.activeObj = activeObj;
             this.upperContext.clearRect(0, 0, this.upperCanvas.width, this.upperCanvas.height);
-            this.drawObject('duplicate');
-            if (this.cropObj.degree !== this.degree) {
+            if (this.activeObj.activePoint.width !== 0 && this.activeObj.activePoint.height !== 0) {
+                this.drawObject('duplicate');
+            }
+            if (obj.degree !== this.degree) {
                 this.cropZoomFactor = this.zoomFactor = 0;
             }
             this.updateObjAndFreeHandDrawColl();
-            if (isFlip) {
-                if (this.degree === 0) {
-                    var currSelectionPoint_1 = extend({}, this.currSelectionPoint, {}, true);
-                    this.currSelectionPoint = null;
-                    this.isCircleCrop = false;
-                    this.drawPannImage({ x: 0, y: 0 }, this.getCurrentPanRegion());
-                    this.updateFlipPan(activeObj);
-                    this.isCircleCrop = isCircleCrop;
-                    this.currSelectionPoint = currSelectionPoint_1;
-                }
-                this.activeObj = activeObj;
-                this.upperContext.clearRect(0, 0, this.upperCanvas.width, this.upperCanvas.height);
-                this.drawObject('duplicate');
-            }
             if (this.rotatedFlipCropSelection) {
                 // this.totalPannedInternalPoint = extend({}, this.cropObj.totalPannedInternalPoint, {}, true) as Point;
                 this.rotatedFlipCropSelection = false;
             }
         }
+        this.afterCropActions = afterCropActions;
         if (!this.isCancelAction && !isAfterCropAction) {
-            this.setDestPointsForFlipState();
             this.updateObjAndFreeHandDrawColl();
             this.zoomFreehandDrawColl();
-            this.destLeft = this.cropObj.destPoints.startX;
-            this.destTop = this.cropObj.destPoints.startY;
+            this.destLeft = obj.destPoints.startX;
+            this.destTop = obj.destPoints.startY;
         }
         this.activeObj = activeObj;
+        this.isCircleCrop = isCircleCrop;
+        this.currSelectionPoint = currSelectionPoint;
     };
-    ImageEditor.prototype.drawCropSelectionImage = function () {
+    ImageEditor.prototype.drawCropSelectionImage = function (obj, isObj) {
         var temp = this.lowerContext.filter;
         this.upperContext.clearRect(0, 0, this.lowerCanvas.width, this.lowerCanvas.height);
         this.lowerContext.clearRect(0, 0, this.lowerCanvas.width, this.lowerCanvas.height);
         this.reverseTransformedState();
-        this.iterateRotateFlipColl(this.lowerContext, 'initial');
+        if (isObj) {
+            this.updateCurrentTransformedState('initial');
+        }
+        else {
+            this.iterateRotateFlipColl(this.lowerContext, 'initial');
+        }
+        this.setDestPointsForFlipState();
         this.updateBrightnessFilter();
         this.lowerContext.drawImage(this.baseImg, this.srcLeft, this.srcTop, this.srcWidth, this.srcHeight, this.destLeft, this.destTop, this.destWidth, this.destHeight);
-        this.iterateRotateFlipColl(this.lowerContext, 'reverse');
-        var activeObj = extend({}, this.cropObj.activeObj, {}, true);
+        if (isObj) {
+            this.updateCurrentTransformedState('reverse');
+        }
+        else {
+            this.iterateRotateFlipColl(this.lowerContext, 'reverse');
+        }
+        this.destLeft = this.cropObj.destPoints.startX;
+        this.destTop = this.cropObj.destPoints.startY;
+        var activeObj = extend({}, obj.activeObj, {}, true);
         this.lowerContext.filter = 'none';
         if (this.isCancelAction) {
             this.zoomObjColl();
             this.zoomFreehandDrawColl();
         }
         else {
-            this.destLeft = this.cropObj.destPoints.startX;
-            this.destTop = this.cropObj.destPoints.startY;
-            this.destWidth = this.cropObj.destPoints.width;
-            this.destHeight = this.cropObj.destPoints.height;
-            this.srcLeft = this.cropObj.srcPoints.startX;
-            this.srcTop = this.cropObj.srcPoints.startY;
-            this.srcWidth = this.cropObj.srcPoints.width;
-            this.srcHeight = this.cropObj.srcPoints.height;
+            this.destLeft = obj.destPoints.startX;
+            this.destTop = obj.destPoints.startY;
+            this.destWidth = obj.destPoints.width;
+            this.destHeight = obj.destPoints.height;
+            this.srcLeft = obj.srcPoints.startX;
+            this.srcTop = obj.srcPoints.startY;
+            this.srcWidth = obj.srcPoints.width;
+            this.srcHeight = obj.srcPoints.height;
             var destPoints = { startX: this.destLeft, startY: this.destTop, width: this.destWidth, height: this.destHeight };
-            this.destLeft = this.cropObj.activeObj.activePoint.startX;
-            this.destTop = this.cropObj.activeObj.activePoint.startY;
-            this.destWidth = this.cropObj.activeObj.activePoint.width;
-            this.destHeight = this.cropObj.activeObj.activePoint.height;
+            this.destLeft = obj.activeObj.activePoint.startX;
+            this.destTop = obj.activeObj.activePoint.startY;
+            this.destWidth = obj.activeObj.activePoint.width;
+            this.destHeight = obj.activeObj.activePoint.height;
             this.zoomObjColl();
             this.zoomFreehandDrawColl();
             this.destLeft = destPoints.startX;
@@ -4668,10 +4762,12 @@ var ImageEditor = /** @class */ (function (_super) {
         }
         if (isNullOrUndefined(isRotateCrop) && this.degree !== 0) {
             this.updateCropObj();
+            this.currDestinationPoint = { startX: this.destLeft, startY: this.destTop, width: this.destWidth, height: this.destHeight };
             this.rotateCrop();
         }
         else if (isNullOrUndefined(isRotateCrop) && this.currFlipState !== '') {
             this.updateCropObj();
+            this.currDestinationPoint = { startX: this.destLeft, startY: this.destTop, width: this.destWidth, height: this.destHeight };
             this.flipCrop();
         }
         else {
@@ -4681,6 +4777,7 @@ var ImageEditor = /** @class */ (function (_super) {
                 this.updateCropObj();
                 this.resetPanPoints();
                 this.updateImageRatioForActObj();
+                this.currDestinationPoint = { startX: this.destLeft, startY: this.destTop, width: this.destWidth, height: this.destHeight };
                 this.currSelectionPoint = extend({}, this.activeObj, {}, true);
                 this.cropDestPoints = { startX: this.destLeft, startY: this.destTop, width: this.destWidth, height: this.destHeight };
             }
@@ -4870,21 +4967,35 @@ var ImageEditor = /** @class */ (function (_super) {
         }
         return panRegion;
     };
-    ImageEditor.prototype.drawPannImage = function (point, panRegion) {
+    ImageEditor.prototype.drawPannImage = function (point) {
+        var destPoints = { startX: this.destLeft, startY: this.destTop, width: this.destWidth, height: this.destHeight };
         this.lowerContext.clearRect(0, 0, this.lowerCanvas.width, this.lowerCanvas.height);
+        this.updateCurrentTransformedState('initial');
+        this.destLeft = destPoints.startX;
+        this.destTop = destPoints.startY;
+        this.destWidth = destPoints.width;
+        this.destHeight = destPoints.height;
+        this.setDestPointsForFlipState();
         this.updateBrightnessFilter();
         this.lowerContext.drawImage(this.baseImg, this.srcLeft, this.srcTop, this.srcWidth, this.srcHeight, this.destLeft, this.destTop, this.destWidth, this.destHeight);
         if ((!isNullOrUndefined(this.currSelectionPoint) && this.currSelectionPoint.shape === 'crop-circle') || this.isCircleCrop) {
             this.cropCircle(this.lowerContext, null, true);
         }
+        this.updateCurrentTransformedState('reverse');
+        this.destLeft = destPoints.startX;
+        this.destTop = destPoints.startY;
+        this.destWidth = destPoints.width;
+        this.destHeight = destPoints.height;
         this.lowerContext.filter = 'none';
-        this.panObjColl(point.x, point.y, panRegion);
-        this.panFreehandDrawColl(point.x, point.y, panRegion);
+        this.panObjColl(point.x, point.y, '');
+        this.panFreehandDrawColl(point.x, point.y, '');
         if (this.isCircleCrop) {
             this.cropCircle(this.lowerContext, null, true);
         }
     };
     ImageEditor.prototype.drawPannedImage = function (xDiff, yDiff) {
+        var panEventArgs = { startPoint: this.panDown, endPoint: this.panMove };
+        this.trigger('panning', panEventArgs);
         var isObjCreated = false;
         if (isNullOrUndefined(this.activeObj.shape)) {
             isObjCreated = true;
@@ -4909,11 +5020,10 @@ var ImageEditor = /** @class */ (function (_super) {
             this.updateActiveObject(this.activeObj.activePoint, this.activeObj);
             this.isCropTab = true;
         }
-        var panRegion = this.getCurrentPanRegion();
         if (this.degree === 0) {
             var point = void 0;
             if (isNullOrUndefined(xDiff) && isNullOrUndefined(yDiff)) {
-                point = this.updatePanPoints(panRegion);
+                point = this.updatePanPoints('');
             }
             else {
                 point = { x: xDiff, y: yDiff };
@@ -4922,7 +5032,7 @@ var ImageEditor = /** @class */ (function (_super) {
             this.totalPannedPoint.y += point.y;
             var tempSelectionObj = extend({}, this.activeObj, {}, true);
             var temp = this.lowerContext.filter;
-            this.drawPannImage(point, panRegion);
+            this.drawPannImage(point);
             this.lowerContext.filter = temp;
             this.tempPanMove = extend({}, this.panMove, {}, true);
             this.activeObj = extend({}, tempSelectionObj, {}, true);
@@ -4930,13 +5040,12 @@ var ImageEditor = /** @class */ (function (_super) {
             if (!isNullOrUndefined(this.activeObj.shape)) {
                 this.drawObject('duplicate', this.activeObj);
             }
-            this.updateFlipPan(tempSelectionObj);
         }
         else {
             var tempFlipState = this.currFlipState;
             this.isCropTab = true;
             if (isNullOrUndefined(xDiff) && isNullOrUndefined(yDiff)) {
-                this.currentPannedPoint = this.updatePanPoints(panRegion);
+                this.currentPannedPoint = this.updatePanPoints('');
             }
             else {
                 this.currentPannedPoint = { x: xDiff, y: yDiff };
@@ -5020,45 +5129,23 @@ var ImageEditor = /** @class */ (function (_super) {
         var tempFlipColl = this.flipColl;
         this.flipColl = [];
         this.updateImageRatioForActObj();
-        this.currSelectionPoint = extend({}, this.activeObj, {}, true);
+        this.objColl.push(this.activeObj);
+        if (this.zoomFactor > 0) {
+            var zoomFactor = this.zoomFactor;
+            var isUndoRedo = this.isUndoRedo;
+            for (var i = 0; i < (zoomFactor * 10); i++) {
+                this.isUndoRedo = true;
+                this.zoom(-0.1);
+            }
+            this.isUndoRedo = isUndoRedo;
+            this.resetPanPoints();
+        }
+        this.currSelectionPoint = extend({}, this.objColl[this.objColl.length - 1], {}, true);
         this.lowerContext.clearRect(0, 0, this.lowerCanvas.width, this.lowerCanvas.height);
         this.upperContext.clearRect(0, 0, this.upperCanvas.width, this.upperCanvas.height);
         var temp = this.lowerContext.filter;
         this.updateBrightnessFilter();
-        if (!isNullOrUndefined(this.tempPannedPoint) && this.totalPannedPoint.x === 0 && this.totalPannedPoint.y === 0) {
-            this.totalPannedPoint = extend({}, this.tempPannedPoint, {}, true);
-            this.tempPannedPoint = { x: 0, y: 0 };
-        }
-        var isPrevent = true;
-        if (!isNullOrUndefined(this.activeObj.shape) && this.activeObj.shape.split('-')[0] === 'crop' &&
-            this.zoomFactor === 0 && this.cropObj.cropZoom !== 0) {
-            isPrevent = false;
-        }
-        if (this.zoomFactor === 0 && isPrevent) {
-            if (this.totalPannedPoint.x > 0) {
-                this.destLeft -= Math.abs(this.totalPannedPoint.x);
-            }
-            else {
-                this.destLeft += Math.abs(this.totalPannedPoint.x);
-            }
-            if (this.totalPannedPoint.y > 0) {
-                this.destTop -= Math.abs(this.totalPannedPoint.y);
-            }
-            else {
-                this.destTop += Math.abs(this.totalPannedPoint.y);
-            }
-        }
         this.lowerContext.drawImage(this.baseImg, this.srcLeft, this.srcTop, this.srcWidth, this.srcHeight, this.destLeft, this.destTop, this.destWidth, this.destHeight);
-        var destLeft = this.destLeft;
-        var destTop = this.destTop;
-        if (this.currFlipState === 'horizontal' && this.zoomFactor > 0 && this.totalPannedPoint.x !== 0) {
-            this.destLeft = destLeft - this.totalPannedPoint.x;
-        }
-        else if (this.currFlipState === 'vertical' && this.zoomFactor > 0 && this.totalPannedPoint.y !== 0) {
-            this.destTop = destTop - this.totalPannedPoint.y;
-        }
-        this.updateImageRatioForActObj();
-        this.objColl.push(this.activeObj);
         for (var i = 0; i < this.objColl.length; i++) {
             this.objColl[i].shapeFlip = '';
         }
@@ -5066,37 +5153,21 @@ var ImageEditor = /** @class */ (function (_super) {
             this.pointColl[i].shapeFlip = '';
         }
         this.redrawObj(this.getCurrentPanRegion());
-        this.flipFreehandrawColl(this.currFlipState);
-        if (this.zoomFactor === 0 && isPrevent) {
-            if (this.getCurrentPanRegion() === 'horizontal') {
-                this.panObjColl(this.totalPannedPoint.x, -this.totalPannedPoint.y, this.getCurrentPanRegion());
-                this.panFreehandDrawColl(this.totalPannedPoint.x, -this.totalPannedPoint.y, this.getCurrentPanRegion());
-            }
-            else if (this.getCurrentPanRegion() === 'vertical') {
-                this.panObjColl(-this.totalPannedPoint.x, this.totalPannedPoint.y, this.getCurrentPanRegion());
-                this.panFreehandDrawColl(-this.totalPannedPoint.x, this.totalPannedPoint.y, this.getCurrentPanRegion());
-            }
-            else {
-                this.panObjColl(-this.totalPannedPoint.x, -this.totalPannedPoint.y, this.getCurrentPanRegion());
-                this.panFreehandDrawColl(-this.totalPannedPoint.x, -this.totalPannedPoint.y, this.getCurrentPanRegion());
-            }
-        }
+        this.flipFreehandrawColl(this.getCurrentPanRegion());
         this.activeObj = extend({}, this.objColl[this.objColl.length - 1], {}, true);
         this.objColl.pop();
+        this.upperContext.clearRect(0, 0, this.upperCanvas.width, this.upperCanvas.height);
         this.drawObject('duplicate');
-        this.destLeft = destLeft;
-        this.destTop = destTop;
         this.cropImg(true);
-        this.updateCurrentTransformedState('initial');
+        this.isReverseRotate = true;
+        this.reverseTransformedState();
         this.setDestinationPoints();
+        this.currentTransformedState('initial');
         this.updateBrightnessFilter();
         this.lowerContext.drawImage(this.baseImg, this.srcLeft, this.srcTop, this.srcWidth, this.srcHeight, this.destLeft, this.destTop, this.destWidth, this.destHeight);
         this.lowerContext.filter = temp;
         this.isRotateZoom = false;
         this.updateCurrentTransformedState('reverse');
-        if (tempCurrFlipState === '' && this.currFlipState !== '') {
-            tempCurrFlipState = this.currFlipState;
-        }
         this.currFlipState = tempCurrFlipState;
         this.flipColl = tempFlipColl;
         this.lowerContext.filter = 'none';
@@ -5107,9 +5178,9 @@ var ImageEditor = /** @class */ (function (_super) {
             this.pointColl[i].shapeFlip = '';
         }
         this.redrawObj(this.getCurrentPanRegion());
-        this.flipFreehandrawColl(this.currFlipState);
-        this.iterateObjColl();
-        this.freehandRedraw(this.lowerContext);
+        this.flipFreehandrawColl(this.getCurrentPanRegion());
+        this.zoomObjColl();
+        this.zoomFreehandDrawColl();
         this.lowerContext.filter = temp;
         if ((!isNullOrUndefined(this.currSelectionPoint) && this.currSelectionPoint.shape === 'crop-circle') || this.isCircleCrop) {
             this.cropCircle(this.lowerContext);
@@ -5120,6 +5191,7 @@ var ImageEditor = /** @class */ (function (_super) {
         this.upperContext.clearRect(0, 0, this.upperCanvas.width, this.upperCanvas.height);
         this.isReverseFlip = false;
         this.resetPanPoints();
+        this.tempFlipPanPoint = { x: 0, y: 0 };
     };
     ImageEditor.prototype.rotateCrop = function () {
         var shape = '';
@@ -5162,31 +5234,19 @@ var ImageEditor = /** @class */ (function (_super) {
         }
         var activeObj = extend({}, this.objColl[this.objColl.length - 1], {}, true);
         if (this.currFlipState !== '') {
-            var flipState = '';
             for (var i = 0; i < this.objColl.length; i++) {
                 this.objColl[i].shapeFlip = '';
             }
-            if (this.currFlipState === 'horizontal') {
-                flipState = this.degree % 90 === 0 && this.degree % 180 !== 0 ? 'vertical' : 'horizontal';
-                this.redrawObj(flipState);
-            }
-            else if (this.currFlipState === 'vertical') {
-                flipState = this.degree % 90 === 0 && this.degree % 180 !== 0 ? 'horizontal' : 'vertical';
-                this.redrawObj(flipState);
-            }
             for (var i = 0; i < this.freehandCounter; i++) {
                 this.pointColl[i].shapeFlip = '';
             }
-            if (this.currFlipState === 'horizontal') {
-                flipState = this.degree % 90 === 0 && this.degree % 180 !== 0 ? 'vertical' : 'horizontal';
-                this.flipFreehandrawColl(flipState);
-            }
-            else if (this.currFlipState === 'vertical') {
-                flipState = this.degree % 90 === 0 && this.degree % 180 !== 0 ? 'horizontal' : 'vertical';
-                this.flipFreehandrawColl(flipState);
-            }
+            var flipState = this.getCurrentCropState('initial');
+            this.redrawObj(flipState);
+            this.flipFreehandrawColl(flipState);
         }
+        this.zoomObjColl();
         this.zoomFreehandDrawColl();
+        activeObj = extend({}, this.objColl[this.objColl.length - 1], {}, true);
         this.upperContext.clearRect(0, 0, this.upperCanvas.width, this.upperCanvas.height);
         this.drawObject('duplicate', activeObj);
         this.objColl.pop();
@@ -5215,25 +5275,16 @@ var ImageEditor = /** @class */ (function (_super) {
             this.rotateObjColl();
             this.rotateFreehandDrawColl();
         }
-        if (this.currFlipState !== '') {
+        if (this.getCurrentPanRegion() !== '') {
             for (var i = 0; i < this.objColl.length; i++) {
                 this.objColl[i].shapeFlip = '';
             }
-            if (this.currFlipState === 'horizontal') {
-                this.redrawObj('horizontal');
-            }
-            else if (this.currFlipState === 'vertical') {
-                this.redrawObj('vertical');
-            }
             for (var i = 0; i < this.freehandCounter; i++) {
                 this.pointColl[i].shapeFlip = '';
             }
-            if (this.currFlipState === 'horizontal') {
-                this.flipFreehandrawColl('horizontal');
-            }
-            else if (this.currFlipState === 'vertical') {
-                this.flipFreehandrawColl('vertical');
-            }
+            var flipState = this.getCurrentCropState('reverse');
+            this.redrawObj(flipState);
+            this.flipFreehandrawColl(flipState);
         }
         this.isReverseRotate = false;
         if (shape === 'crop-circle') {
@@ -5256,37 +5307,141 @@ var ImageEditor = /** @class */ (function (_super) {
         this.upperContext.clearRect(0, 0, this.upperCanvas.width, this.upperCanvas.height);
         this.resetPanPoints();
     };
-    ImageEditor.prototype.updateRotatePanPoints = function () {
-        if (this.degree % 90 === 0 && this.degree % 180 !== 0) {
-            if (this.degree === 90 || this.degree === -270) {
-                this.destLeft += this.currentPannedPoint.y;
-                this.destTop -= this.currentPannedPoint.x;
+    ImageEditor.prototype.getCurrentCropState = function (type, isAllowInvert) {
+        var flipState = '';
+        var state = [];
+        if (type === 'initial') {
+            if (this.degree === 180 || this.degree === -180) {
+                flipState = this.flipColl.length > 1 ? this.getCurrentPanRegion() : this.currFlipState;
             }
-            else if (this.degree === 270 || this.degree === -90) {
-                this.destLeft -= this.currentPannedPoint.y;
-                this.destTop += this.currentPannedPoint.x;
+            else {
+                for (var i = 0; i < this.rotateFlipColl.length; i++) {
+                    if (typeof (this.rotateFlipColl[i]) === 'number') {
+                        state.push('number');
+                    }
+                    else if (typeof (this.rotateFlipColl[i]) === 'string') {
+                        state.push('string');
+                    }
+                }
+                if (state.length > 1 && state[state.length - 1] === 'string' && state[state.length - 2] === 'number') {
+                    if (this.currFlipState === 'horizontal') {
+                        flipState = 'vertical';
+                    }
+                    else if (this.currFlipState === 'vertical') {
+                        flipState = 'horizontal';
+                    }
+                }
+                else if (state.length > 1 && state[state.length - 1] === 'number' && state[state.length - 2] === 'string') {
+                    flipState = this.flipColl.length > 1 ? this.getCurrentPanRegion() : this.currFlipState;
+                }
             }
         }
         else {
-            if (this.degree === 180 || this.degree === -180) {
-                this.destLeft -= this.currentPannedPoint.x;
-                this.destTop -= this.currentPannedPoint.y;
-            }
-            else {
-                this.destLeft += this.currentPannedPoint.x;
-                this.destTop += this.currentPannedPoint.y;
+            flipState = this.getCurrentPanRegion();
+            if (isAllowInvert || !this.isInitialRotate()) {
+                if (this.degree === -90 || this.degree === -270) {
+                    if (flipState === 'horizontal') {
+                        flipState = 'vertical';
+                    }
+                    else if (flipState === 'vertical') {
+                        flipState = 'horizontal';
+                    }
+                }
             }
         }
+        if (flipState === '') {
+            flipState = this.flipColl.length > 1 ? this.getCurrentPanRegion() : this.currFlipState;
+        }
+        return flipState;
     };
-    ImageEditor.prototype.rotatePan = function (isCropSelection) {
-        this.isReverseRotate = true;
-        var tempDegree = this.degree;
-        var rotatePanActiveObj;
-        if (!isNullOrUndefined(this.activeObj.activePoint) && !isNullOrUndefined(this.activeObj.shape)) {
-            rotatePanActiveObj = extend({}, this.activeObj, {}, true);
+    ImageEditor.prototype.isInitialRotate = function () {
+        var isRotate = false;
+        if (this.rotateFlipColl.length > 0 && typeof (this.rotateFlipColl[0]) === 'number') {
+            isRotate = true;
         }
-        var tempObjColl = extend([], this.objColl, [], true);
+        return isRotate;
+    };
+    ImageEditor.prototype.updateRotatePanPoints = function () {
+        var panRegion = '';
+        if (this.isInitialRotate() && this.degree < 0) {
+            panRegion = this.getCurrentCropState('reverse', true);
+        }
+        else {
+            panRegion = this.getCurrentPanRegion();
+        }
+        if (this.degree % 90 === 0 && this.degree % 180 !== 0) {
+            if (this.degree === 90 || (this.degree === -90 && (panRegion === 'horizontal' || panRegion === 'vertical'))
+                || (this.degree === -270 && (panRegion === '' || panRegion === 'verticalHorizontal' || panRegion === 'horizontalVertical'))) {
+                if (panRegion === '') {
+                    this.destLeft += this.currentPannedPoint.y;
+                    this.destTop -= this.currentPannedPoint.x;
+                }
+                else if (panRegion === 'horizontal') {
+                    this.destLeft += this.currentPannedPoint.y;
+                    this.destTop += this.currentPannedPoint.x;
+                }
+                else if (panRegion === 'vertical') {
+                    this.destLeft -= this.currentPannedPoint.y;
+                    this.destTop -= this.currentPannedPoint.x;
+                }
+                else {
+                    this.destLeft -= this.currentPannedPoint.y;
+                    this.destTop += this.currentPannedPoint.x;
+                }
+            }
+            else if (this.degree === 270 || (this.degree === -270 && (panRegion === 'horizontal' || panRegion === 'vertical'))
+                || (this.degree === -90 && (panRegion === '' || panRegion === 'verticalHorizontal' || panRegion === 'horizontalVertical'))) {
+                if (panRegion === '') {
+                    this.destLeft -= this.currentPannedPoint.y;
+                    this.destTop += this.currentPannedPoint.x;
+                }
+                else if (panRegion === 'horizontal') {
+                    this.destLeft -= this.currentPannedPoint.y;
+                    this.destTop -= this.currentPannedPoint.x;
+                }
+                else if (panRegion === 'vertical') {
+                    this.destLeft += this.currentPannedPoint.y;
+                    this.destTop += this.currentPannedPoint.x;
+                }
+                else {
+                    this.destLeft += this.currentPannedPoint.y;
+                    this.destTop -= this.currentPannedPoint.x;
+                }
+            }
+        }
+        else {
+            if (this.degree === 180 || this.degree === -180) {
+                if (panRegion === '') {
+                    this.destLeft -= this.currentPannedPoint.x;
+                    this.destTop -= this.currentPannedPoint.y;
+                }
+                else if (panRegion === 'horizontal') {
+                    this.destLeft += this.currentPannedPoint.x;
+                    this.destTop -= this.currentPannedPoint.y;
+                }
+                else if (panRegion === 'vertical') {
+                    this.destLeft -= this.currentPannedPoint.x;
+                    this.destTop += this.currentPannedPoint.y;
+                }
+                else {
+                    this.destLeft += this.currentPannedPoint.x;
+                    this.destTop += this.currentPannedPoint.y;
+                }
+            }
+        }
+    };
+    ImageEditor.prototype.rotatePan = function (isCropSelection, isDefaultZoom) {
+        this.isReverseRotate = true;
+        var tempDegree = this.degree;
+        var rotatePanActiveObj;
+        if (!isNullOrUndefined(this.activeObj.activePoint) && !isNullOrUndefined(this.activeObj.shape)) {
+            rotatePanActiveObj = extend({}, this.activeObj, {}, true);
+        }
+        var tempObjColl = extend([], this.objColl, [], true);
+        var tempPointColl = extend([], this.pointColl, [], true);
         this.objColl = [];
+        this.pointColl = [];
+        this.freehandCounter = 0;
         this.refreshActiveObj();
         this.isRotateZoom = true;
         this.updateCurrentTransformedState('initial');
@@ -5315,15 +5470,25 @@ var ImageEditor = /** @class */ (function (_super) {
         this.totalPannedClientPoint.x = this.destLeft - destLeft;
         this.totalPannedClientPoint.y = this.destTop - destTop;
         this.objColl = tempObjColl;
+        this.pointColl = tempPointColl;
+        this.freehandCounter = this.pointColl.length;
         this.degree = tempDegree;
-        this.objColl = extend([], tempObjColl, [], true);
         this.lowerContext.filter = 'none';
-        var panRegion = this.getCurrentPanRegion();
         if (isCropSelection) {
-            this.currentPannedPoint = extend({}, this.totalPannedClientPoint, {}, true);
+            if (isDefaultZoom) {
+                this.totalPannedClientPoint.x = -this.totalPannedClientPoint.x;
+                this.totalPannedClientPoint.y = -this.totalPannedClientPoint.y;
+                this.currentPannedPoint = extend({}, this.totalPannedClientPoint, {}, true);
+                this.totalPannedClientPoint = { x: 0, y: 0 };
+                this.destLeft += this.currentPannedPoint.x;
+                this.destTop += this.currentPannedPoint.y;
+            }
+            else {
+                this.currentPannedPoint = extend({}, this.totalPannedClientPoint, {}, true);
+            }
         }
-        this.panObjColl(this.currentPannedPoint.x, this.currentPannedPoint.y, panRegion);
-        this.panFreehandDrawColl(this.currentPannedPoint.x, this.currentPannedPoint.y, panRegion);
+        this.panObjColl(this.currentPannedPoint.x, this.currentPannedPoint.y, '');
+        this.panFreehandDrawColl(this.currentPannedPoint.x, this.currentPannedPoint.y, '');
         this.lowerContext.filter = temp;
         this.upperContext.clearRect(0, 0, this.upperCanvas.width, this.upperCanvas.height);
         this.activeObj = extend({}, rotatePanActiveObj, {}, true);
@@ -5371,7 +5536,7 @@ var ImageEditor = /** @class */ (function (_super) {
             this.zoomFactor += value;
         }
         if (this.isCropTab) {
-            this.cropZoomFactor += value;
+            this.cropZoomFactor = this.zoomFactor;
         }
         else {
             this.defaultZoomFactor = this.zoomFactor;
@@ -5413,18 +5578,32 @@ var ImageEditor = /** @class */ (function (_super) {
         }
         this.destLeft = destLeft - ((maxDimension.width - this.destWidth) / 2);
         this.destTop = destTop - ((maxDimension.height - this.destHeight) / 2);
+        destLeft = this.destLeft;
+        destTop = this.destTop;
         if (!isNullOrUndefined(selectionObj)) {
             if (this.destLeft > selectionObj.activePoint.startX) {
                 this.destLeft = selectionObj.activePoint.startX;
+                if (this.degree === 0) {
+                    this.totalPannedPoint.x -= (destLeft - this.destLeft);
+                }
             }
             if (this.destTop > selectionObj.activePoint.startY) {
                 this.destTop = selectionObj.activePoint.startY;
+                if (this.degree === 0) {
+                    this.totalPannedPoint.y -= (destTop - this.destTop);
+                }
             }
             if (this.destLeft + maxDimension.width < selectionObj.activePoint.endX) {
                 this.destLeft = selectionObj.activePoint.endX - maxDimension.width;
+                if (this.degree === 0) {
+                    this.totalPannedPoint.x -= (destLeft - this.destLeft);
+                }
             }
             if (this.destTop + maxDimension.height < selectionObj.activePoint.endY) {
                 this.destTop = selectionObj.activePoint.endY - maxDimension.height;
+                if (this.degree === 0) {
+                    this.totalPannedPoint.y -= (destTop - this.destTop);
+                }
             }
         }
         return maxDimension;
@@ -5646,11 +5825,44 @@ var ImageEditor = /** @class */ (function (_super) {
             this.degree = 0;
         }
     };
-    ImageEditor.prototype.updateUndoRedoColl = function (operation, value, previousObj, currentObj, zoomFactor, sharpen, bw) {
-        if (!this.isInitialLoading) {
+    ImageEditor.prototype.getCurrentObj = function () {
+        var obj = { cropZoom: 0, defaultZoom: 0, totalPannedPoint: { x: 0, y: 0 }, totalPannedClientPoint: { x: 0, y: 0 },
+            totalPannedInternalPoint: { x: 0, y: 0 }, tempFlipPanPoint: { x: 0, y: 0 }, activeObj: {},
+            rotateFlipColl: [], degree: 0, currFlipState: '',
+            destPoints: { startX: 0, startY: 0, width: 0, height: 0 },
+            srcPoints: { startX: 0, startY: 0, width: 0, height: 0 }, filter: '' };
+        obj.cropZoom = this.cropZoomFactor;
+        obj.defaultZoom = this.defaultZoomFactor;
+        obj.totalPannedPoint = extend({}, this.totalPannedPoint, {}, true);
+        obj.totalPannedClientPoint = extend({}, this.totalPannedClientPoint, {}, true);
+        obj.totalPannedInternalPoint = extend({}, this.totalPannedInternalPoint, {}, true);
+        obj.tempFlipPanPoint = extend({}, this.tempFlipPanPoint, {}, true);
+        obj.activeObj = extend({}, this.activeObj, {}, true);
+        obj.rotateFlipColl = extend([], this.rotateFlipColl, [], true);
+        obj.degree = this.degree;
+        obj.currFlipState = this.currFlipState;
+        obj.destPoints = { startX: this.destLeft, startY: this.destTop, endX: 0, endY: 0,
+            width: this.destWidth, height: this.destHeight };
+        obj.srcPoints = { startX: this.srcLeft, startY: this.srcTop, endX: 0, endY: 0,
+            width: this.srcWidth, height: this.srcHeight };
+        obj.filter = this.lowerContext.filter;
+        return obj;
+    };
+    ImageEditor.prototype.updateUndoRedoColl = function (operation, previousObj, previousObjColl, previousPointColl, previousCropObj, previousText, currentText, previousFilter) {
+        if (!this.isInitialLoading && this.allowUndoRedo) {
+            if (this.currObjType.isUndoAction) {
+                this.refreshUndoRedoColl();
+            }
             this.undoRedoStep++;
-            this.undoRedoColl.push({ operation: operation, value: value, previousObj: previousObj, currentObj: currentObj,
-                zoomFactor: zoomFactor, sharpen: sharpen, bw: bw });
+            var currentObj = this.getCurrentObj();
+            currentObj.objColl = extend([], this.objColl, [], true);
+            currentObj.pointColl = extend([], this.pointColl, [], true);
+            currentObj.afterCropActions = extend([], this.afterCropActions, [], true);
+            this.undoRedoColl.push({ operation: operation, previousObj: previousObj, currentObj: currentObj,
+                previousObjColl: previousObjColl, currentObjColl: currentObj.objColl,
+                previousPointColl: previousPointColl, currentPointColl: currentObj.pointColl,
+                previousCropObj: previousCropObj, currentCropObj: extend({}, this.cropObj, {}, true),
+                previousText: previousText, currentText: currentText, filter: previousFilter });
             if (this.undoRedoColl.length > 16) {
                 this.undoRedoColl.splice(0, 1);
                 this.undoRedoStep--;
@@ -5925,6 +6137,7 @@ var ImageEditor = /** @class */ (function (_super) {
         }
         this.freehandDrawSelectedIndex = this.freehandDrawHoveredIndex;
         this.pointColl[this.freehandDrawSelectedIndex].isSelected = true;
+        this.freehandDrawSelectedId = this.pointColl[this.freehandDrawSelectedIndex].id;
         if (this.pointColl[this.freehandDrawHoveredIndex].strokeColor !== '#42a5f5') {
             this.tempFreeHandDrawEditingStyles.strokeColor = this.pointColl[this.freehandDrawHoveredIndex].strokeColor;
         }
@@ -6217,15 +6430,16 @@ var ImageEditor = /** @class */ (function (_super) {
         }
         if (e.currentTarget === this.upperCanvas) {
             this.currObjType.shape = this.currObjType.shape.toLowerCase();
-            if (!this.togglePen && !this.dragCanvas) {
+            var prevCropObj = extend({}, this.cropObj, {}, true);
+            var prevObj = this.getCurrentObj();
+            prevObj.objColl = extend([], this.objColl, [], true);
+            prevObj.pointColl = extend([], this.pointColl, [], true);
+            prevObj.afterCropActions = extend([], this.afterCropActions, [], true);
+            if (!this.togglePen && !isCropSelection) {
                 if (!isNullOrUndefined(this.tempObjColl) && this.activeObj.activePoint.width !== 0) {
                     this.objColl.push(this.activeObj);
                     if (JSON.stringify(this.activeObj.activePoint) !== JSON.stringify(this.tempActiveObj.activePoint)) {
-                        this.undoRedoColl.push({ operation: 'shapeTransform', value: null,
-                            currentObj: extend([], this.objColl, [], true),
-                            previousObj: this.tempObjColl, zoomFactor: this.zoomFactor,
-                            sharpen: this.adjustmentLevel.sharpen, bw: this.adjustmentLevel.bw });
-                        this.undoRedoStep++;
+                        this.updateUndoRedoColl('shapeTransform', prevObj, this.tempObjColl, prevObj.pointColl, prevCropObj);
                     }
                     this.redrawShape(this.objColl[this.objColl.length - 1]);
                     this.tempObjColl = undefined;
@@ -6236,13 +6450,8 @@ var ImageEditor = /** @class */ (function (_super) {
             }
             else if (isCropSelection && !this.togglePen) {
                 if (JSON.stringify(this.activeObj.activePoint) !== JSON.stringify(this.tempActiveObj.activePoint)) {
-                    this.undoRedoColl.push({ operation: 'selectionTransform', value: null,
-                        currentObj: extend([], this.objColl, [], true),
-                        previousObj: this.objColl, zoomFactor: this.zoomFactor,
-                        currentSelectionObj: extend([], this.activeObj, {}, true),
-                        previousSelectionObj: extend([], this.tempActiveObj, {}, true),
-                        sharpen: this.adjustmentLevel.sharpen, bw: this.adjustmentLevel.bw });
-                    this.undoRedoStep++;
+                    prevObj.activeObj = extend([], this.tempActiveObj, {}, true);
+                    this.updateUndoRedoColl('selectionTransform', prevObj, prevObj.objColl, prevObj.pointColl, prevCropObj);
                 }
             }
         }
@@ -6273,27 +6482,34 @@ var ImageEditor = /** @class */ (function (_super) {
                 e.preventDefault();
                 e.stopImmediatePropagation();
                 break;
-            case (e.ctrlKey && 'z'):
-                if (this.allowUndoRedo) {
-                    this.callUndo();
-                }
-                break;
-            case (e.ctrlKey && 'y'):
-                if (this.allowUndoRedo) {
-                    this.callRedo();
-                }
-                break;
+            // case (e.ctrlKey && 'z'):
+            //     if (this.allowUndoRedo) {
+            //         this.callUndo();
+            //     }
+            //     break;
+            // case (e.ctrlKey && 'y'):
+            //     if (this.allowUndoRedo) {
+            //         this.callRedo();
+            //     }
+            //     break;
             case 'Delete':
                 if (this.isFreehandDrawEditing) {
                     this.updateFreehandDrawColorChange();
-                    // eslint-disable-next-line
-                    var previousObj = extend([], this.pointColl, [], true);
-                    this.deleteFreehandDraw(this.freehandDrawHoveredIndex);
-                    this.updateUndoRedoColl('delete', 'freehanddraw', previousObj, this.pointColl, this.zoomFactor);
+                    var prevCropObj = extend({}, this.cropObj, {}, true);
+                    var prevObj = this.getCurrentObj();
+                    prevObj.objColl = extend([], this.objColl, [], true);
+                    prevObj.pointColl = extend([], this.pointColl, [], true);
+                    prevObj.afterCropActions = extend([], this.afterCropActions, [], true);
+                    this.deleteFreehandDraw(parseInt(this.freehandDrawSelectedId.split('_')[1], 10) - 1, true);
+                    this.updateUndoRedoColl('deleteFreehandDrawing', prevObj, prevObj.objColl, prevObj.pointColl, prevCropObj);
                 }
                 else if (this.textArea.style.display === 'none') {
                     this.objColl.push(this.activeObj);
-                    var previousObj = extend([], this.objColl, [], true);
+                    var prevCropObj = extend({}, this.cropObj, {}, true);
+                    var prevObj = this.getCurrentObj();
+                    prevObj.objColl = extend([], this.objColl, [], true);
+                    prevObj.pointColl = extend([], this.pointColl, [], true);
+                    prevObj.afterCropActions = extend([], this.afterCropActions, [], true);
                     this.objColl.pop();
                     previousShapeSettings = this.updatePreviousShapeSettings();
                     shapeChangingArgs = { action: 'delete', previousShapeSettings: previousShapeSettings, currentShapeSettings: null };
@@ -6301,7 +6517,7 @@ var ImageEditor = /** @class */ (function (_super) {
                     this.clearSelection();
                     this.trigger('shapeChanging', shapeChangingArgs);
                     this.refreshToolbar('main');
-                    this.updateUndoRedoColl('delete', 'shape', previousObj, this.objColl, this.zoomFactor);
+                    this.updateUndoRedoColl('deleteObj', prevObj, prevObj.objColl, prevObj.pointColl, prevCropObj);
                 }
                 break;
             case 'Escape':
@@ -6356,6 +6572,10 @@ var ImageEditor = /** @class */ (function (_super) {
         this.lastPan = { x: this.destLeft, y: this.destTop };
         if (isNullOrUndefined(this.tempPanMove)) {
             this.tempPanMove = { x: x, y: y };
+            this.panStartObj = this.getCurrentObj();
+            this.panStartObj.objColl = extend([], this.objColl, [], true);
+            this.panStartObj.pointColl = extend([], this.pointColl, [], true);
+            this.panStartObj.afterCropActions = this.afterCropActions;
         }
     };
     ImageEditor.prototype.canvasMouseMoveHandler = function (e) {
@@ -6388,10 +6608,12 @@ var ImageEditor = /** @class */ (function (_super) {
         e.preventDefault();
         if (this.togglePan) {
             if (this.panDown && this.panMove && this.togglePan && this.dragCanvas) {
+                var prevCropObj = extend({}, this.cropObj, {}, true);
+                this.updateUndoRedoColl('pan', this.panStartObj, this.panStartObj.objColl, this.panStartObj.pointColl, prevCropObj);
                 this.panDown = null;
                 this.panMove = null;
                 this.tempPanMove = null;
-                this.updateUndoRedoColl('pan', null, { x: this.lastPan.x, y: this.lastPan.y }, { x: this.destLeft, y: this.destTop });
+                this.panStartObj = null;
             }
         }
         this.currObjType.isDragging = false;
@@ -6704,7 +6926,12 @@ var ImageEditor = /** @class */ (function (_super) {
     };
     ImageEditor.prototype.updateTextFromTextArea = function () {
         if (this.activeObj.keyHistory !== this.textArea.value) {
-            this.updateUndoRedoColl('text', this.objColl, this.activeObj.keyHistory, this.textArea.value, this.zoomFactor, this.adjustmentLevel.sharpen, this.adjustmentLevel.bw);
+            var prevCropObj = extend({}, this.cropObj, {}, true);
+            var prevObj = this.getCurrentObj();
+            prevObj.objColl = extend([], this.objColl, [], true);
+            prevObj.pointColl = extend([], this.pointColl, [], true);
+            prevObj.afterCropActions = extend([], this.afterCropActions, [], true);
+            this.updateUndoRedoColl('text', prevObj, prevObj.objColl, prevObj.pointColl, prevCropObj, this.activeObj.keyHistory, this.textArea.value);
         }
         this.activeObj.keyHistory = this.textArea.value;
         this.textArea.style.display = 'none';
@@ -6985,7 +7212,6 @@ var ImageEditor = /** @class */ (function (_super) {
                 this.refreshActiveObj();
                 this.lowerContext.clearRect(0, 0, this.upperCanvas.width, this.upperCanvas.height);
                 this.redrawImgWithObj();
-                //this.zoomFreehandDrawColl();
                 if ((!isNullOrUndefined(this.currSelectionPoint) && this.currSelectionPoint.shape === 'crop-circle') || this.isCircleCrop) {
                     this.cropCircle(this.lowerContext);
                 }
@@ -8189,6 +8415,7 @@ var ImageEditor = /** @class */ (function (_super) {
         this.activeObj = extend({}, tempObj, {}, true);
     };
     ImageEditor.prototype.drawObject = function (canvas, obj, isCropRatio, points, isPreventDrag, saveContext) {
+        this.upperContext.clearRect(0, 0, this.upperCanvas.width, this.upperCanvas.height);
         var canvasDraw;
         if (canvas.toLowerCase() === 'original') {
             canvasDraw = this.lowerContext;
@@ -9939,28 +10166,6 @@ var ImageEditor = /** @class */ (function (_super) {
                 height: this.destHeight / this.objColl[i].activePoint.height };
         }
     };
-    ImageEditor.prototype.setTextFontSize = function (obj) {
-        if (obj.shape === 'text') {
-            var maxText = this.getMaxText(null, obj.keyHistory);
-            var degree = void 0;
-            if (obj.shapeDegree === 0) {
-                degree = this.degree;
-            }
-            else {
-                degree = this.degree - obj.shapeDegree;
-            }
-            var multiplier = 2;
-            if (maxText.length === 1) {
-                multiplier = 1;
-            }
-            if (degree === 0 || degree === 180 || degree === -180) {
-                obj.textSettings.fontSize = (obj.activePoint.width / maxText.length) * multiplier;
-            }
-            else {
-                obj.textSettings.fontSize = (obj.activePoint.height / maxText.length) * multiplier;
-            }
-        }
-    };
     ImageEditor.prototype.redrawShape = function (obj) {
         for (var i = 0; i < this.objColl.length; i++) {
             if (JSON.stringify(obj) === JSON.stringify(this.objColl[i])) {
@@ -10161,7 +10366,10 @@ var ImageEditor = /** @class */ (function (_super) {
             }
             this.togglePen = false;
             this.redrawActObj();
-            var objColl = extend([], this.objColl, [], true);
+            var prevObj = this.getCurrentObj();
+            prevObj.objColl = extend([], this.objColl, [], true);
+            prevObj.pointColl = extend([], this.pointColl, [], true);
+            prevObj.afterCropActions = extend([], this.afterCropActions, [], true);
             this.keyHistory = '';
             this.refreshActiveObj();
             this.activeObj.shape = 'text';
@@ -10225,10 +10433,8 @@ var ImageEditor = /** @class */ (function (_super) {
             this.activeObj.textFlip = this.currFlipState;
             this.updateFontRatio(this.activeObj);
             this.objColl.push(this.activeObj);
-            this.undoRedoColl.push({ operation: 'shapeTransform', value: null,
-                currentObj: extend([], this.objColl, [], true), previousObj: objColl, zoomFactor: this.zoomFactor,
-                sharpen: this.adjustmentLevel.sharpen, bw: this.adjustmentLevel.bw });
-            this.undoRedoStep++;
+            var prevCropObj = extend({}, this.cropObj, {}, true);
+            this.updateUndoRedoColl('shapeTransform', prevObj, prevObj.objColl, prevObj.pointColl, prevCropObj);
             this.redrawShape(this.objColl[this.objColl.length - 1]);
             this.isShapeInserted = true;
             this.refreshToolbar('text');
@@ -10373,6 +10579,43 @@ var ImageEditor = /** @class */ (function (_super) {
             }
         }
         this.freehandRedraw(this.lowerContext);
+        this.updateCurrSelectionPoint(degree);
+    };
+    ImageEditor.prototype.updateCurrSelectionPoint = function (degree) {
+        if (!isNullOrUndefined(this.currSelectionPoint) && !isNullOrUndefined(this.currDestinationPoint)) {
+            var activeObj = extend({}, this.activeObj, {}, true);
+            var objColl = extend([], this.objColl, [], true);
+            var srcPoints = { startX: this.srcLeft, startY: this.srcTop, width: this.srcWidth, height: this.srcHeight };
+            var destPoints = { startX: this.destLeft, startY: this.destTop, width: this.destWidth, height: this.destHeight };
+            this.objColl = [];
+            this.objColl.push(extend({}, this.currSelectionPoint, {}, true));
+            this.srcLeft = 0;
+            this.srcTop = 0;
+            this.srcWidth = this.baseImg.width;
+            this.srcHeight = this.baseImg.height;
+            this.destLeft = this.currDestinationPoint.startX;
+            this.destTop = this.currDestinationPoint.startY;
+            this.destWidth = this.currDestinationPoint.width;
+            this.destHeight = this.currDestinationPoint.height;
+            if (typeof (degree) === 'number') {
+                this.setDestinationPoints();
+                this.setClientTransformedDimension();
+            }
+            this.objColl[0].shapeFlip = '';
+            this.redrawObj(degree);
+            this.currSelectionPoint = extend({}, this.objColl[0], {}, true);
+            this.currDestinationPoint = { startX: this.destLeft, startY: this.destTop, width: this.destWidth, height: this.destHeight };
+            this.objColl = objColl;
+            this.activeObj = activeObj;
+            this.srcLeft = srcPoints.startX;
+            this.srcTop = srcPoints.startY;
+            this.srcWidth = srcPoints.width;
+            this.srcHeight = srcPoints.height;
+            this.destLeft = destPoints.startX;
+            this.destTop = destPoints.startY;
+            this.destWidth = destPoints.width;
+            this.destHeight = destPoints.height;
+        }
     };
     ImageEditor.prototype.setClientTransformedDimension = function (isPreventDimension) {
         if (this.degree % 90 === 0 && this.degree % 180 !== 0) {
@@ -10389,100 +10632,110 @@ var ImageEditor = /** @class */ (function (_super) {
             }
         }
     };
-    ImageEditor.prototype.popForDefaultTransformedState = function () {
+    ImageEditor.prototype.popForDefaultTransformedState = function (collection) {
         var rotateRight = 0;
         var rotateleft = 0;
         var horizontal = 0;
         var vertical = 0;
-        for (var i = 0; i < this.rotateFlipColl.length; i++) {
-            if (this.rotateFlipColl[i] === 90) {
+        for (var i = 0; i < collection.length; i++) {
+            if (collection[i] === 90 || collection[i] === 'rotateRight') {
                 rotateRight++;
                 rotateleft = 0;
                 horizontal = 0;
                 vertical = 0;
                 if (rotateRight === 4) {
-                    this.rotateFlipColl.pop();
-                    this.rotateFlipColl.pop();
-                    this.rotateFlipColl.pop();
-                    this.rotateFlipColl.pop();
+                    collection.pop();
+                    collection.pop();
+                    collection.pop();
+                    collection.pop();
                 }
             }
-            else if (this.rotateFlipColl[i] === -90) {
+            else if (collection[i] === -90 || collection[i] === 'rotateLeft') {
                 rotateleft++;
                 rotateRight = 0;
                 horizontal = 0;
                 vertical = 0;
                 if (rotateleft === 4) {
-                    this.rotateFlipColl.pop();
-                    this.rotateFlipColl.pop();
-                    this.rotateFlipColl.pop();
-                    this.rotateFlipColl.pop();
+                    collection.pop();
+                    collection.pop();
+                    collection.pop();
+                    collection.pop();
                 }
             }
-            else if (this.rotateFlipColl[i] === 'horizontal') {
+            else if (collection[i] === 'horizontal' || collection[i] === 'horizontalflip') {
                 horizontal++;
                 rotateleft = 0;
                 rotateRight = 0;
                 vertical = 0;
                 if (horizontal === 2) {
-                    this.rotateFlipColl.pop();
-                    this.rotateFlipColl.pop();
+                    collection.pop();
+                    collection.pop();
                 }
             }
-            else if (this.rotateFlipColl[i] === 'vertical') {
+            else if (collection[i] === 'vertical' || collection[i] === 'verticalflip') {
                 vertical++;
                 horizontal = 0;
                 rotateleft = 0;
                 rotateRight = 0;
                 if (vertical === 2) {
-                    this.rotateFlipColl.pop();
-                    this.rotateFlipColl.pop();
+                    collection.pop();
+                    collection.pop();
                 }
             }
         }
+        return collection;
     };
-    ImageEditor.prototype.popForDefaultFlipState = function () {
-        for (var i = 0; i < this.rotateFlipColl.length; i++) {
-            if (!isNullOrUndefined(this.rotateFlipColl[i + 3])) {
-                if (this.rotateFlipColl[i] === 'horizontal' && this.rotateFlipColl[i + 1] === 'vertical' &&
-                    this.rotateFlipColl[i + 2] === 'horizontal' && this.rotateFlipColl[i + 3] === 'vertical') {
-                    this.rotateFlipColl.pop();
-                    this.rotateFlipColl.pop();
-                    this.rotateFlipColl.pop();
-                    this.rotateFlipColl.pop();
+    ImageEditor.prototype.popForDefaultFlipState = function (collection) {
+        for (var i = 0; i < collection.length; i++) {
+            if (!isNullOrUndefined(collection[i + 3])) {
+                if ((collection[i] === 'horizontal' || collection[i] === 'horizontalFlip')
+                    && (collection[i + 1] === 'vertical' || collection[i] === 'verticalFlip') &&
+                    (collection[i + 2] === 'horizontal' || collection[i] === 'horizontalFlip') &&
+                    (collection[i + 3] === 'vertical' || collection[i] === 'verticalFlip')) {
+                    collection.pop();
+                    collection.pop();
+                    collection.pop();
+                    collection.pop();
                 }
-                else if (this.rotateFlipColl[i] === 'vertical' && this.rotateFlipColl[i + 1] === 'horizontal' &&
-                    this.rotateFlipColl[i + 2] === 'vertical' && this.rotateFlipColl[i + 3] === 'horizontal') {
-                    this.rotateFlipColl.pop();
-                    this.rotateFlipColl.pop();
-                    this.rotateFlipColl.pop();
-                    this.rotateFlipColl.pop();
+                else if ((collection[i] === 'vertical' || collection[i] === 'verticalFlip')
+                    && (collection[i + 1] === 'horizontal' || collection[i + 1] === 'horizontalFlip') &&
+                    (collection[i + 2] === 'vertical' || collection[i] === 'verticalFlip') &&
+                    (collection[i + 3] === 'horizontal' || collection[i] === 'horizontalFlip')) {
+                    collection.pop();
+                    collection.pop();
+                    collection.pop();
+                    collection.pop();
                 }
             }
         }
+        return collection;
     };
-    ImageEditor.prototype.popForDefaultRotateState = function () {
-        for (var i = 0; i < this.rotateFlipColl.length; i++) {
-            if (!isNullOrUndefined(this.rotateFlipColl[i + 1])) {
-                if (this.rotateFlipColl[i] === 90 && this.rotateFlipColl[i + 1] === -90) {
-                    this.rotateFlipColl.pop();
-                    this.rotateFlipColl.pop();
+    ImageEditor.prototype.popForDefaultRotateState = function (collection) {
+        for (var i = 0; i < collection.length; i++) {
+            if (!isNullOrUndefined(collection[i + 1])) {
+                if ((collection[i] === 90 || collection[i] === 'rotateRight') &&
+                    (collection[i + 1] === -90 || collection[i] === 'rotateLeft')) {
+                    collection.pop();
+                    collection.pop();
                 }
-                else if (this.rotateFlipColl[i] === -90 && this.rotateFlipColl[i + 1] === 90) {
-                    this.rotateFlipColl.pop();
-                    this.rotateFlipColl.pop();
+                else if ((collection[i] === -90 || collection[i] === 'rotateLeft') &&
+                    (collection[i + 1] === 90 || collection[i] === 'rotateRight')) {
+                    collection.pop();
+                    collection.pop();
                 }
             }
         }
+        return collection;
     };
-    ImageEditor.prototype.alignRotateFlipColl = function () {
-        this.popForDefaultTransformedState();
-        this.popForDefaultFlipState();
-        this.popForDefaultRotateState();
-        if (this.rotateFlipColl.length === 0) {
+    ImageEditor.prototype.alignRotateFlipColl = function (collection, isRotateFlipCollection) {
+        collection = this.popForDefaultTransformedState(collection);
+        collection = this.popForDefaultFlipState(collection);
+        collection = this.popForDefaultRotateState(collection);
+        if (collection.length === 0 && isRotateFlipCollection) {
             this.degree = 0;
             this.currFlipState = '';
         }
+        return collection;
     };
     ImageEditor.prototype.updateFlipColl = function (direction) {
         if (this.flipColl.length === 0) {
@@ -10653,35 +10906,51 @@ var ImageEditor = /** @class */ (function (_super) {
         this.applyPenDraw();
         this.adjustmentLevel.brightness = value;
         value = this.getFilterValue(value);
-        var temp = this.lowerContext.filter;
+        var prevCropObj = extend({}, this.cropObj, {}, true);
+        var prevObj = this.getCurrentObj();
+        prevObj.objColl = extend([], this.objColl, [], true);
+        prevObj.pointColl = extend([], this.pointColl, [], true);
+        prevObj.afterCropActions = extend([], this.afterCropActions, [], true);
         this.updateAdjustment('brightness', value);
-        this.updateUndoRedoColl('brightness', value, temp, this.lowerContext.filter, this.zoomFactor, this.adjustmentLevel.sharpen, this.adjustmentLevel.bw);
+        this.updateUndoRedoColl('brightness', prevObj, prevObj.objColl, prevObj.pointColl, prevCropObj);
     };
     ImageEditor.prototype.setContrast = function (value) {
         this.applyPenDraw();
         this.adjustmentLevel.contrast = value;
-        var temp = this.lowerContext.filter;
         value = this.getFilterValue(value);
         value *= 100;
+        var prevCropObj = extend({}, this.cropObj, {}, true);
+        var prevObj = this.getCurrentObj();
+        prevObj.objColl = extend([], this.objColl, [], true);
+        prevObj.pointColl = extend([], this.pointColl, [], true);
+        prevObj.afterCropActions = extend([], this.afterCropActions, [], true);
         this.updateAdjustment('contrast', value);
-        this.updateUndoRedoColl('contrast', value, temp, this.lowerContext.filter, this.zoomFactor, this.adjustmentLevel.sharpen, this.adjustmentLevel.bw);
+        this.updateUndoRedoColl('contrast', prevObj, prevObj.objColl, prevObj.pointColl, prevCropObj);
     };
     ImageEditor.prototype.setHue = function (value) {
         this.applyPenDraw();
         this.adjustmentLevel.hue = value;
         value *= 3;
-        var temp = this.lowerContext.filter;
+        var prevCropObj = extend({}, this.cropObj, {}, true);
+        var prevObj = this.getCurrentObj();
+        prevObj.objColl = extend([], this.objColl, [], true);
+        prevObj.pointColl = extend([], this.pointColl, [], true);
+        prevObj.afterCropActions = extend([], this.afterCropActions, [], true);
         this.updateAdjustment('hue', value);
-        this.updateUndoRedoColl('hue', value, temp, this.lowerContext.filter, this.zoomFactor, this.adjustmentLevel.sharpen, this.adjustmentLevel.bw);
+        this.updateUndoRedoColl('hue', prevObj, prevObj.objColl, prevObj.pointColl, prevCropObj);
     };
     ImageEditor.prototype.setSaturation = function (value) {
         this.applyPenDraw();
         this.adjustmentLevel.saturation = value;
         value = this.getSaturationFilterValue(value);
         value *= 100;
-        var temp = this.lowerContext.filter;
+        var prevCropObj = extend({}, this.cropObj, {}, true);
+        var prevObj = this.getCurrentObj();
+        prevObj.objColl = extend([], this.objColl, [], true);
+        prevObj.pointColl = extend([], this.pointColl, [], true);
+        prevObj.afterCropActions = extend([], this.afterCropActions, [], true);
         this.updateAdjustment('saturation', value);
-        this.updateUndoRedoColl('saturation', value, temp, this.lowerContext.filter, this.zoomFactor, this.adjustmentLevel.sharpen, this.adjustmentLevel.bw);
+        this.updateUndoRedoColl('saturation', prevObj, prevObj.objColl, prevObj.pointColl, prevCropObj);
     };
     ImageEditor.prototype.setOpacity = function (value) {
         this.applyPenDraw();
@@ -10704,9 +10973,13 @@ var ImageEditor = /** @class */ (function (_super) {
         else if (value === 0) {
             value = 0.25;
         }
-        var temp = this.lowerContext.filter;
+        var prevCropObj = extend({}, this.cropObj, {}, true);
+        var prevObj = this.getCurrentObj();
+        prevObj.objColl = extend([], this.objColl, [], true);
+        prevObj.pointColl = extend([], this.pointColl, [], true);
+        prevObj.afterCropActions = extend([], this.afterCropActions, [], true);
         this.updateAdjustment('opacity', value);
-        this.updateUndoRedoColl('opacity', value, temp, this.lowerContext.filter, this.zoomFactor, this.adjustmentLevel.sharpen, this.adjustmentLevel.bw);
+        this.updateUndoRedoColl('opacity', prevObj, prevObj.objColl, prevObj.pointColl, prevCropObj);
     };
     ImageEditor.prototype.setBlur = function (value) {
         this.applyPenDraw();
@@ -10714,25 +10987,37 @@ var ImageEditor = /** @class */ (function (_super) {
         value /= 20;
         // Since 0.5 is not working in blur we consider from 1
         value += 0.5;
-        var temp = this.lowerContext.filter;
+        var prevCropObj = extend({}, this.cropObj, {}, true);
+        var prevObj = this.getCurrentObj();
+        prevObj.objColl = extend([], this.objColl, [], true);
+        prevObj.pointColl = extend([], this.pointColl, [], true);
+        prevObj.afterCropActions = extend([], this.afterCropActions, [], true);
         this.updateAdjustment('blur', value);
-        this.updateUndoRedoColl('blur', value, temp, this.lowerContext.filter, this.zoomFactor, this.adjustmentLevel.sharpen, this.adjustmentLevel.bw);
+        this.updateUndoRedoColl('blur', prevObj, prevObj.objColl, prevObj.pointColl, prevCropObj);
     };
     ImageEditor.prototype.setExposure = function (value) {
         this.applyPenDraw();
         this.adjustmentLevel.exposure = value;
         value = this.getFilterValue(value);
-        var temp = this.lowerContext.filter;
+        var prevCropObj = extend({}, this.cropObj, {}, true);
+        var prevObj = this.getCurrentObj();
+        prevObj.objColl = extend([], this.objColl, [], true);
+        prevObj.pointColl = extend([], this.pointColl, [], true);
+        prevObj.afterCropActions = extend([], this.afterCropActions, [], true);
         this.updateAdjustment('exposure', value);
-        this.updateUndoRedoColl('exposure', value, temp, this.lowerContext.filter, this.zoomFactor, this.adjustmentLevel.sharpen, this.adjustmentLevel.bw);
+        this.updateUndoRedoColl('exposure', prevObj, prevObj.objColl, prevObj.pointColl, prevCropObj);
     };
     ImageEditor.prototype.setFilter = function (type) {
         type = type.toLowerCase();
         this.applyPenDraw();
-        var tempFilter = this.lowerContext.filter;
         var prevFilter = this.currentFilter;
+        var prevCropObj = extend({}, this.cropObj, {}, true);
+        var prevObj = this.getCurrentObj();
+        prevObj.objColl = extend([], this.objColl, [], true);
+        prevObj.pointColl = extend([], this.pointColl, [], true);
+        prevObj.afterCropActions = extend([], this.afterCropActions, [], true);
         this.updateAdjustment(type, null);
-        this.updateUndoRedoColl(type, prevFilter, tempFilter, this.lowerContext.filter, this.zoomFactor, this.adjustmentLevel.sharpen, this.adjustmentLevel.bw);
+        this.updateUndoRedoColl(type, prevObj, prevObj.objColl, prevObj.pointColl, prevCropObj, null, null, prevFilter);
     };
     ImageEditor.prototype.renderImage = function () {
         var temp = this.lowerContext.filter;
@@ -10767,8 +11052,81 @@ var ImageEditor = /** @class */ (function (_super) {
         this.updateFontStyles();
         this.textArea.style.width = this.activeObj.activePoint.width + 'px';
     };
+    ImageEditor.prototype.drawNewSelection = function (type, startX, startY, width, height) {
+        var points;
+        var cropShape = 'crop-' + type;
+        if (cropShape.toLowerCase() === 'crop-custom') {
+            if (this.currObjType.shape === '') {
+                this.drawCustomSelection('crop-custom');
+            }
+            if (startX && startY) {
+                this.upperContext.clearRect(0, 0, this.upperCanvas.width, this.upperCanvas.height);
+                this.currObjType.shape = this.activeObj.shape = cropShape.toLowerCase();
+                this.activeObj.activePoint.startX = startX;
+                this.activeObj.activePoint.startY = startY;
+                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.drawObject('duplicate');
+            }
+        }
+        else if (cropShape.toLowerCase() === 'crop-canvas') {
+            this.upperCanvas.style.display = 'none';
+            this.dragCanvas = true;
+        }
+        else {
+            this.currObjType.isCustomCrop = false;
+            this.currObjType.shape = cropShape.toLowerCase();
+            if (width && height) {
+                points = { startX: startX, startY: startY, endX: startX + width, endY: startY + height,
+                    width: width, height: height };
+            }
+            else if (width && cropShape === 'crop-circle') {
+                points = { startX: startX, startY: startY, endX: startX + width, endY: startY + width,
+                    width: width, height: width };
+            }
+            this.activeObj.shape = cropShape.toLowerCase();
+            this.drawObject('duplicate', null, true, points);
+        }
+    };
+    ImageEditor.prototype.setDestPointsForFlipState = function (isUpdate) {
+        if (this.getCurrentPanRegion() !== '') {
+            if (this.getCurrentPanRegion() === 'horizontal') {
+                this.destLeft = this.lowerCanvas.clientWidth - (this.destWidth + this.destLeft);
+            }
+            else if (this.getCurrentPanRegion() === 'vertical') {
+                this.destTop = this.lowerCanvas.clientHeight - (this.destHeight + this.destTop);
+            }
+            else {
+                this.destLeft = this.lowerCanvas.clientWidth - (this.destWidth + this.destLeft);
+                this.destTop = this.lowerCanvas.clientHeight - (this.destHeight + this.destTop);
+            }
+        }
+    };
+    ImageEditor.prototype.performUndoDefaultAction = function (obj) {
+        this.lowerContext.filter = obj.previousObj.filter;
+        this.objColl = [];
+        this.pointColl = [];
+        this.freehandCounter = 0;
+        this.setCurrentObj(obj.previousObj);
+        this.destLeft = obj.previousObj.destPoints.startX;
+        this.destTop = obj.previousObj.destPoints.startY;
+        var activeObj = extend({}, this.activeObj, {}, true);
+        this.objColl = extend([], obj.previousObjColl, [], true);
+        this.pointColl = extend([], obj.previousPointColl, [], true);
+        this.freehandCounter = this.pointColl.length;
+        this.lowerContext.filter = 'none';
+        this.iterateObjColl();
+        this.freehandRedraw(this.lowerContext);
+        this.lowerContext.filter = obj.previousObj.filter;
+        this.activeObj = activeObj;
+        this.upperContext.clearRect(0, 0, this.upperCanvas.width, this.upperCanvas.height);
+        if (this.activeObj.activePoint.width !== 0 && this.activeObj.activePoint.height !== 0) {
+            this.drawObject('duplicate');
+        }
+    };
     ImageEditor.prototype.setAdjustment = function (type) {
-        this.lowerContext.clearRect(0, 0, this.lowerCanvas.width, this.lowerCanvas.height);
         var splitWords = this.lowerContext.filter.split(' ');
         var value;
         var valueArr;
@@ -10831,59 +11189,25 @@ var ImageEditor = /** @class */ (function (_super) {
                 this.adjustmentLevel.exposure = this.setFilterValue(value);
                 break;
         }
-        this.callUpdateCurrentTransformedState();
-    };
-    ImageEditor.prototype.updateFilter = function (obj) {
-        var selEle = this.element.querySelector('.e-contextual-toolbar-wrapper .e-toolbar-item.e-selected');
-        if (selEle) {
-            selEle.classList.remove('e-selected');
-        }
-        var filterCanvas = document.getElementById(obj.value + 'Canvas');
-        if (filterCanvas) {
-            filterCanvas.parentElement.classList.add('e-selected');
-        }
-        this.currentFilter = obj.value;
-        this.lowerContext.filter = this.canvasFilter = obj.previousObj;
-        this.lowerContext.clearRect(0, 0, this.lowerCanvas.width, this.lowerCanvas.height);
-        this.isUndoRedo = true;
-        this.redrawImgWithObj();
     };
-    ImageEditor.prototype.drawNewSelection = function (type, startX, startY, width, height) {
-        var points;
-        var cropShape = 'crop-' + type;
-        if (cropShape.toLowerCase() === 'crop-custom') {
-            if (this.currObjType.shape === '') {
-                this.drawCustomSelection('crop-custom');
+    ImageEditor.prototype.updateFilter = function (type, previousFilter) {
+        if (type === 'default' || type === 'chrome' || type === 'cold' ||
+            type === 'warm' || type === 'grayscale' || type === 'blackandwhite' ||
+            type === 'sepia' || type === 'invert' || type === 'sharpen') {
+            var selEle = this.element.querySelector('.e-contextual-toolbar-wrapper .e-toolbar-item.e-selected');
+            if (selEle) {
+                selEle.classList.remove('e-selected');
             }
-            if (startX && startY) {
-                this.upperContext.clearRect(0, 0, this.upperCanvas.width, this.upperCanvas.height);
-                this.currObjType.shape = this.activeObj.shape = cropShape.toLowerCase();
-                this.activeObj.activePoint.startX = startX;
-                this.activeObj.activePoint.startY = startY;
-                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.drawObject('duplicate');
+            var filterCanvas = document.getElementById(this.element.id + '_' + type + 'Canvas');
+            if (filterCanvas) {
+                filterCanvas.parentElement.classList.add('e-selected');
             }
-        }
-        else if (cropShape.toLowerCase() === 'crop-canvas') {
-            this.upperCanvas.style.display = 'none';
-            this.dragCanvas = true;
-        }
-        else {
-            this.currObjType.isCustomCrop = false;
-            this.currObjType.shape = cropShape.toLowerCase();
-            if (width && height) {
-                points = { startX: startX, startY: startY, endX: startX + width, endY: startY + height,
-                    width: width, height: height };
+            if (!isNullOrUndefined(previousFilter)) {
+                this.currentFilter = previousFilter;
             }
-            else if (width && cropShape === 'crop-circle') {
-                points = { startX: startX, startY: startY, endX: startX + width, endY: startY + width,
-                    width: width, height: width };
+            else {
+                this.currentFilter = this.element.id + '_' + type;
             }
-            this.activeObj.shape = cropShape.toLowerCase();
-            this.drawObject('duplicate', null, true, points);
         }
     };
     /**
@@ -10924,11 +11248,15 @@ var ImageEditor = /** @class */ (function (_super) {
             }
             if (!this.disabled && this.activeObj.horTopLine !== undefined && (this.currObjType.isCustomCrop || splitWords[0] === 'crop')) {
                 isCrop = true;
-                var shape = this.activeObj.shape;
+                var prevCropObj = extend({}, this.cropObj, {}, true);
+                var prevObj = this.getCurrentObj();
+                prevObj.objColl = extend([], this.objColl, [], true);
+                prevObj.pointColl = extend([], this.pointColl, [], true);
+                prevObj.afterCropActions = extend([], this.afterCropActions, [], true);
                 this.cropImg();
                 this.zoomFactor = 0;
                 this.enableDisableToolbarBtn();
-                this.updateUndoRedoColl('crop', shape);
+                this.updateUndoRedoColl('crop', prevObj, prevObj.objColl, prevObj.pointColl, prevCropObj);
             }
         }
         return isCrop;
@@ -10941,9 +11269,17 @@ var ImageEditor = /** @class */ (function (_super) {
      */
     ImageEditor.prototype.flip = function (direction) {
         if (!this.disabled && this.isImageLoaded) {
-            var zoomFactor = this.zoomFactor;
             var transitionArgs = { direction: direction };
             this.trigger('flipping', transitionArgs);
+            var prevCropObj = extend({}, this.cropObj, {}, true);
+            var prevObj = void 0;
+            if (isNullOrUndefined(this.transformCurrentObj)) {
+                prevObj = this.getCurrentObj();
+                prevObj.objColl = extend([], this.objColl, null, true);
+                prevObj.pointColl = extend({}, this.pointColl, null, true);
+                prevObj.afterCropActions = extend([], this.afterCropActions, [], true);
+            }
+            this.afterCropActions.push(direction.toLowerCase() === 'horizontal' ? 'horizontalflip' : 'verticalflip');
             var splitWords = [];
             var activeObjShape = void 0;
             if (!isNullOrUndefined(this.activeObj.activePoint)) {
@@ -11002,7 +11338,12 @@ var ImageEditor = /** @class */ (function (_super) {
                 this.rotateFlipColl.push(direction.toLowerCase());
             }
             if (this.rotateFlipColl.length === 1) {
-                this.setClientTransformedDimension();
+                if (this.getCurrentPanRegion() === '') {
+                    this.setClientTransformedDimension();
+                }
+                else {
+                    this.setDestPointsForFlipState();
+                }
             }
             if (this.isCircleCrop) {
                 this.cropCircle(this.lowerContext);
@@ -11041,8 +11382,9 @@ var ImageEditor = /** @class */ (function (_super) {
             }
             this.lowerContext.filter = tempFilter;
             this.refreshActiveObj();
-            if (!this.isUndoRedo) {
-                this.updateUndoRedoColl('flip', direction, this.objColl, null, zoomFactor, this.adjustmentLevel.sharpen, this.adjustmentLevel.bw);
+            this.updateCurrSelectionPoint(direction.toLowerCase());
+            if (!this.isUndoRedo && isNullOrUndefined(this.transformCurrentObj)) {
+                this.updateUndoRedoColl('flip', prevObj, prevObj.objColl, prevObj.pointColl, prevCropObj);
             }
             this.isUndoRedo = false;
             this.clearOuterCanvas(this.lowerContext);
@@ -11062,7 +11404,7 @@ var ImageEditor = /** @class */ (function (_super) {
             else if (!this.isReverseFlip) {
                 this.refreshToolbar('main', true, true);
             }
-            this.alignRotateFlipColl();
+            this.rotateFlipColl = this.alignRotateFlipColl(this.rotateFlipColl, true);
         }
     };
     /**
@@ -11224,17 +11566,16 @@ var ImageEditor = /** @class */ (function (_super) {
             this.selectedFreehandColor = '#42a5f5';
             this.isFreehandDrawCustomized = false;
             this.isShapeInserted = false;
-            this.tempActObj = undefined;
-            this.lastPan = { x: 0, y: 0 };
+            this.isAllowCropPan = false;
+            this.tempPannedPoint = { x: 0, y: 0 };
             this.currObjType = { shape: '', isDragging: false, isActiveObj: false, isText: false, isInitialText: false, isLine: false,
                 isInitialLine: false, isCustomCrop: false, isZoomed: false, isUndoZoom: false,
                 isUndoAction: false, isFiltered: false, isSave: false };
-            this.isAllowCropPan = false;
-            this.tempPannedPoint = { x: 0, y: 0 };
             this.cropObj = { cropZoom: 0, defaultZoom: 0, totalPannedPoint: { x: 0, y: 0 }, totalPannedClientPoint: { x: 0, y: 0 },
-                totalPannedInternalPoint: { x: 0, y: 0 }, activeObj: {}, rotateFlipColl: [], degree: 0,
-                currFlipState: '', destPoints: { startX: 0, startY: 0, width: 0, height: 0 },
-                srcPoints: { startX: 0, startY: 0, width: 0, height: 0 } };
+                totalPannedInternalPoint: { x: 0, y: 0 }, tempFlipPanPoint: { x: 0, y: 0 }, activeObj: {},
+                rotateFlipColl: [], degree: 0, currFlipState: '',
+                destPoints: { startX: 0, startY: 0, width: 0, height: 0 },
+                srcPoints: { startX: 0, startY: 0, width: 0, height: 0 }, filter: '' };
             this.afterCropActions = [];
             this.isCancelAction = this.preventZoomBtn = this.isFreehandPointMoved = false;
             this.isTouch = false;
@@ -11244,6 +11585,11 @@ var ImageEditor = /** @class */ (function (_super) {
             this.tempCurrentFreehandDrawIndex = 0;
             this.cancelObjColl = [];
             this.cancelPointColl = [];
+            this.freehandDrawSelectedId = null;
+            this.transformCurrentObj = null;
+            this.rotatedFlipCropSelection = false;
+            this.panStartObj = null;
+            this.currDestinationPoint = null;
             this.updateCanvas();
             this.refreshDropDownBtn(false);
             this.enableDisableToolbarBtn();
@@ -11263,6 +11609,15 @@ var ImageEditor = /** @class */ (function (_super) {
             isRotate = true;
             var transitionArgs = { degree: degree };
             this.trigger('rotating', transitionArgs);
+            var prevCropObj = extend({}, this.cropObj, {}, true);
+            var prevObj = void 0;
+            if (isNullOrUndefined(this.transformCurrentObj)) {
+                prevObj = this.getCurrentObj();
+                prevObj.objColl = extend([], this.objColl, null, true);
+                prevObj.pointColl = extend({}, this.pointColl, null, true);
+                prevObj.afterCropActions = extend([], this.afterCropActions, [], true);
+            }
+            this.afterCropActions.push(degree === 90 ? 'rotateRight' : 'rotateLeft');
             var splitWords = [];
             var activeObjShape = void 0;
             if (!isNullOrUndefined(this.activeObj.activePoint) && !isNullOrUndefined(this.activeObj.shape)) {
@@ -11278,7 +11633,6 @@ var ImageEditor = /** @class */ (function (_super) {
             }
             this.redrawActObj();
             this.upperContext.clearRect(0, 0, this.upperCanvas.width, this.upperCanvas.height);
-            var zoomFactor = this.zoomFactor;
             this.drawRotatedImage(degree);
             this.clearOuterCanvas(this.lowerContext);
             this.clearOuterCanvas(this.upperContext);
@@ -11291,8 +11645,8 @@ var ImageEditor = /** @class */ (function (_super) {
                     this.refreshToolbar('main', true, true);
                 }
             }
-            if (!this.isUndoRedo) {
-                this.updateUndoRedoColl('rotate', degree, this.objColl, null, zoomFactor, this.adjustmentLevel.sharpen, this.adjustmentLevel.bw);
+            if (!this.isUndoRedo && isNullOrUndefined(this.transformCurrentObj)) {
+                this.updateUndoRedoColl('rotate', prevObj, prevObj.objColl, prevObj.pointColl, prevCropObj);
             }
             this.isUndoRedo = false;
             if (isNullOrUndefined(this.activeObj.shape) && !this.isReverseRotate) {
@@ -11301,7 +11655,7 @@ var ImageEditor = /** @class */ (function (_super) {
             else if (!this.isReverseRotate) {
                 this.refreshToolbar('main', true, true);
             }
-            this.alignRotateFlipColl();
+            this.rotateFlipColl = this.alignRotateFlipColl(this.rotateFlipColl, true);
         }
         return isRotate;
     };
@@ -11398,6 +11752,11 @@ var ImageEditor = /** @class */ (function (_super) {
             else if (splitWords !== undefined && splitWords[0] === 'crop') {
                 isPrevent = true;
             }
+            var prevCropObj = extend({}, this.cropObj, {}, true);
+            var prevObj = this.getCurrentObj();
+            prevObj.objColl = extend([], this.objColl, [], true);
+            prevObj.pointColl = extend([], this.pointColl, [], true);
+            prevObj.afterCropActions = extend([], this.afterCropActions, [], true);
             this.redrawActObj();
             this.refreshActiveObj();
             this.keyHistory = '';
@@ -11409,19 +11768,26 @@ var ImageEditor = /** @class */ (function (_super) {
                 if (this.defaultZoomFactor > 0) {
                     var zoomFactor = this.zoomFactor = this.defaultZoomFactor;
                     this.isCropTab = false;
+                    var isUndoRedo = this.isUndoRedo;
                     for (var i = 0; i < (zoomFactor * 10); i++) {
+                        this.isUndoRedo = true;
                         this.zoom(-0.1);
                     }
+                    this.isUndoRedo = isUndoRedo;
                     this.resetPanPoints();
                 }
                 this.cancelObjColl = extend([], this.objColl, [], true);
                 this.cancelPointColl = extend([], this.pointColl, [], true);
+                this.updateObjAndFreeHandDrawColl();
                 this.isCropTab = true;
                 this.setCurrSelectionPoints(true);
                 this.zoomFactor = this.cropZoomFactor;
                 if (isNullOrUndefined(this.cropObj.activeObj.shape)) {
                     this.drawNewSelection(type, startX, startY, width, height);
                 }
+                else {
+                    this.updateUndoRedoColl('crop-selection', prevObj, prevObj.objColl, prevObj.pointColl, prevCropObj);
+                }
             }
             else {
                 if (type === 'custom') {
@@ -11496,23 +11862,6 @@ var ImageEditor = /** @class */ (function (_super) {
             }
         }
     };
-    ImageEditor.prototype.setDestPointsForFlipState = function (isUpdate) {
-        if (this.getCurrentPanRegion() !== '') {
-            if (this.getCurrentPanRegion() === 'horizontal') {
-                this.destLeft = this.lowerCanvas.clientWidth - (this.destWidth + this.destLeft);
-            }
-            else if (this.getCurrentPanRegion() === 'vertical') {
-                this.destTop = this.lowerCanvas.clientHeight - (this.destHeight + this.destTop);
-            }
-            else {
-                this.destLeft = this.lowerCanvas.clientWidth - (this.destWidth + this.destLeft);
-                this.destTop = this.lowerCanvas.clientHeight - (this.destHeight + this.destTop);
-            }
-            if (!isNullOrUndefined(isUpdate)) {
-                this.updateObjAndFreeHandDrawColl();
-            }
-        }
-    };
     /**
      * Increase / Decrease the magnification of an image.
      *
@@ -11521,7 +11870,7 @@ var ImageEditor = /** @class */ (function (_super) {
      */
     ImageEditor.prototype.zoom = function (value) {
         if (!this.disabled && this.isImageLoaded) {
-            if ((this.zoomFactor === 0 && value < 0) || (this.zoomFactor > 5 && value > 0 ||
+            if ((this.zoomFactor === 0 && value < 0) || (this.zoomFactor > 2 && value > 0 ||
                 (this.zoomFactor > 0 && value < 0 && this.disableZoomOutBtn()))) {
                 return;
             }
@@ -11538,6 +11887,24 @@ var ImageEditor = /** @class */ (function (_super) {
             else if (!isNullOrUndefined(this.activeObj.shape) && splitWords[0] !== 'crop') {
                 isShape = true;
             }
+            var zoomPoint = void 0;
+            var zoomLevel = void 0;
+            if (this.isCropTab && !isNullOrUndefined(tempActiveObj)) {
+                zoomLevel = this.cropZoomFactor;
+                zoomPoint = { x: this.activeObj.activePoint.startX + (this.activeObj.activePoint.width / 2),
+                    y: this.activeObj.activePoint.startY + (this.activeObj.activePoint.height / 2) };
+            }
+            else {
+                zoomLevel = this.defaultZoomFactor;
+                zoomPoint = { x: this.lowerCanvas.clientWidth / 2, y: this.lowerCanvas.clientHeight / 2 };
+            }
+            var zoomEventArgs = { zoomPoint: zoomPoint, zoomLevel: zoomLevel };
+            this.trigger('zooming', zoomEventArgs);
+            var prevCropObj = extend({}, this.cropObj, {}, true);
+            var prevObj = this.getCurrentObj();
+            prevObj.objColl = extend([], this.objColl, [], true);
+            prevObj.pointColl = extend([], this.pointColl, [], true);
+            prevObj.afterCropActions = extend([], this.afterCropActions, [], true);
             this.redrawActObj();
             this.refreshActiveObj();
             this.upperContext.clearRect(0, 0, this.lowerCanvas.width, this.lowerCanvas.height);
@@ -11558,9 +11925,9 @@ var ImageEditor = /** @class */ (function (_super) {
                 if (this.degree !== 0) {
                     this.redrawActObj();
                     this.currentPannedPoint = { x: 0, y: 0 };
-                    this.rotatePan();
+                    this.rotatePan(true, true);
                 }
-                this.setDestPointsForFlipState(true);
+                this.updateObjAndFreeHandDrawColl();
             }
             if (this.degree === 0) {
                 this.drawZoomImgToCanvas(value, tempActiveObj);
@@ -11569,13 +11936,19 @@ var ImageEditor = /** @class */ (function (_super) {
                     this.tempFlipPanPoint.y += this.totalPannedPoint.y;
                     objColl = extend([], this.objColl, [], true);
                     this.objColl = [];
+                    var destLeft = this.destLeft;
+                    var destTop = this.destTop;
+                    this.setDestPointsForFlipState();
                     this.rotatedFlip();
-                    if (this.totalPannedPoint.x !== 0 || this.totalPannedPoint.y !== 0) {
-                        this.totalPannedPoint = { x: 0, y: 0 };
-                    }
-                    if (this.tempPannedPoint.x !== 0 || this.tempPannedPoint.y !== 0) {
-                        this.tempPannedPoint = { x: 0, y: 0 };
-                    }
+                    this.destLeft = destLeft;
+                    this.destTop = destTop;
+                    this.objColl = objColl;
+                    this.zoomObjColl();
+                    this.zoomFreehandDrawColl();
+                    this.updateObjAndFreeHandDrawColl();
+                }
+                if (this.zoomFactor === 0 && !this.isCropTab) {
+                    this.totalPannedPoint = { x: 0, y: 0 };
                 }
             }
             else {
@@ -11598,19 +11971,6 @@ var ImageEditor = /** @class */ (function (_super) {
                 this.zoomFreehandDrawColl();
                 this.lowerContext.filter = temp;
             }
-            else if (this.degree === 0) {
-                var temp = this.lowerContext.filter;
-                this.lowerContext.filter = 'none';
-                var destLeft = this.destLeft;
-                var destTop = this.destTop;
-                this.setDestPointsForFlipState();
-                this.objColl = objColl;
-                this.zoomObjColl();
-                this.zoomFreehandDrawColl();
-                this.destLeft = destLeft;
-                this.destTop = destTop;
-                this.lowerContext.filter = temp;
-            }
             if ((!isNullOrUndefined(this.currSelectionPoint) && this.currSelectionPoint.shape === 'crop-circle') || this.isCircleCrop) {
                 this.cropCircle(this.lowerContext);
             }
@@ -11619,18 +11979,12 @@ var ImageEditor = /** @class */ (function (_super) {
             if (!isNullOrUndefined(tempActiveObj)) {
                 this.activeObj = extend({}, tempActiveObj, {}, true);
                 this.drawObject('duplicate', this.activeObj);
-                if (this.currentToolbar === 'crop') {
-                    this.refreshToolbar('main', true, true);
-                }
-                else {
-                    this.refreshToolbar(this.currentToolbar, true, true);
-                }
                 if (this.zoomFactor === 0) {
                     this.currSelectionPoint = null;
                 }
             }
             if (!this.isUndoRedo) {
-                this.updateUndoRedoColl('zoom', zoomState, this.objColl, null, this.zoomFactor, this.adjustmentLevel.sharpen, this.adjustmentLevel.bw);
+                this.updateUndoRedoColl('zoom', prevObj, prevObj.objColl, prevObj.pointColl, prevCropObj);
             }
             this.isUndoRedo = false;
             var zoomOut = document.querySelector('#' + this.element.id + '_zoomOut');
@@ -11642,9 +11996,6 @@ var ImageEditor = /** @class */ (function (_super) {
                 zoomOut.classList.remove('e-disabled');
                 zoomOut.parentElement.classList.remove('e-overlay');
             }
-            if (!this.togglePan) {
-                this.callMainToolbar(false, true);
-            }
             this.autoEnablePan();
             if (!isNullOrUndefined(tempActiveObj)) {
                 this.activeObj = extend({}, tempActiveObj, {}, true);
@@ -11652,24 +12003,6 @@ var ImageEditor = /** @class */ (function (_super) {
             if (this.activeObj.shape === 'crop-custom') {
                 this.currObjType.isCustomCrop = true;
             }
-            if (isNullOrUndefined(this.activeObj.activePoint) || this.activeObj.activePoint.width === 0) {
-                if (this.currentToolbar === 'crop' || !isNullOrUndefined(tempActiveObj)) {
-                    this.refreshToolbar('main', true, true);
-                }
-                else {
-                    this.refreshToolbar('main');
-                    this.currentToolbar = 'main';
-                }
-            }
-            else {
-                if (this.currentToolbar === 'crop' || !isNullOrUndefined(tempActiveObj)) {
-                    this.refreshToolbar('main', true, true);
-                }
-                else {
-                    this.refreshToolbar('main');
-                    this.currentToolbar = 'main';
-                }
-            }
             var panBtn = this.element.querySelector('.e-img-pan .e-btn');
             if (!isNullOrUndefined(panBtn) && this.togglePan) {
                 panBtn.classList.add('e-selected-btn');
@@ -11681,12 +12014,6 @@ var ImageEditor = /** @class */ (function (_super) {
                 this.activeObj = extend({}, this.objColl[this.objColl.length - 1], {}, true);
                 this.objColl.pop();
                 this.drawObject('duplicate', this.activeObj);
-                if (this.activeObj.shape === 'text') {
-                    this.refreshToolbar('text');
-                }
-                else {
-                    this.refreshToolbar('shapes');
-                }
                 this.updateToolbarItems();
             }
         }
@@ -12090,14 +12417,13 @@ var ImageEditor = /** @class */ (function (_super) {
                 else {
                     this.refreshToolbar('main');
                 }
-                if (this.activeObj.activePoint.width !== 0) {
+                if (!isNullOrUndefined(this.activeObj.activePoint) && this.activeObj.activePoint.width !== 0) {
                     this.tempActObj = this.activeObj;
                 }
-                //this.refreshActiveObj();
+                this.refreshActiveObj();
                 this.undoRedoStep--;
                 this.enableDisableToolbarBtn();
                 this.isUndoRedo = true;
-                this.lowerContext.filter = this.canvasFilter;
                 var obj = this.undoRedoColl[this.undoRedoStep];
                 if (this.undoRedoColl.length === this.undoRedoStep) {
                     this.currObjType.isUndoAction = false;
@@ -12105,82 +12431,47 @@ var ImageEditor = /** @class */ (function (_super) {
                 else {
                     this.currObjType.isUndoAction = true;
                 }
-                if (obj.operation !== 'textTransform' && this.textArea.style.display === 'block') {
+                if (obj.operation !== 'textAreaCustomization' && this.textArea.style.display === 'block') {
                     this.textArea.style.display = 'none';
                 }
                 this.element.querySelector('.e-contextual-toolbar-wrapper').classList.add('e-hide');
-                var xDiff = void 0;
-                var yDiff = void 0;
-                var tempUndoRedoColl = [];
-                var prevObj = void 0;
-                var value = '';
+                this.isCancelAction = true;
+                var activeObj = void 0;
+                this.cropObj = extend({}, obj.previousCropObj, {}, true);
+                this.afterCropActions = obj.previousObj.afterCropActions;
+                this.lowerContext.filter = this.canvasFilter = obj.previousObj.filter;
                 switch (obj.operation) {
-                    case 'rotate':
-                        if (obj.value === 90) {
-                            value = 'rotateleft';
-                        }
-                        else if (obj.value === -90) {
-                            value = 'rotateright';
-                        }
-                        this.performTransformation(value);
-                        break;
-                    case 'flip':
-                        if (obj.value.toLowerCase() === 'horizontal') {
-                            value = 'horizontalflip';
-                        }
-                        else if (obj.value.toLowerCase() === 'vertical') {
-                            value = 'verticalflip';
-                        }
-                        this.performTransformation(value);
-                        break;
-                    case 'zoom':
-                        if (this.zoomFactor === 0 && obj.zoomFactor !== 0) {
-                            this.zoomFactor = obj.zoomFactor;
-                        }
-                        this.zoom(-obj.value);
+                    case 'shapeTransform':
+                        this.objColl = extend([], obj.previousObjColl, [], true);
+                        this.lowerContext.clearRect(0, 0, this.lowerCanvas.width, this.lowerCanvas.height);
+                        this.upperContext.clearRect(0, 0, this.upperCanvas.width, this.upperCanvas.height);
                         this.isUndoRedo = true;
-                        break;
-                    case 'pan':
-                        xDiff = this.destLeft;
-                        yDiff = this.destTop;
-                        this.destLeft = obj.previousObj.x;
-                        this.destTop = obj.previousObj.y;
-                        xDiff += this.destLeft;
-                        yDiff += this.destTop;
-                        this.drawPannedImage(xDiff, yDiff);
-                        break;
-                    case 'crop':
-                        if (!isNullOrUndefined(this.currSelectionPoint)) {
-                            tempUndoRedoColl = extend([], this.undoRedoColl, [], true);
-                            this.select('Custom');
-                            this.refreshToolbar('main', true, true);
-                            getComponent(this.element.querySelector('#' + this.element.id + '_cropBtn'), 'dropdown-btn').toggle();
-                            this.undoRedoColl = tempUndoRedoColl;
-                            this.enableDisableToolbarBtn();
-                        }
+                        this.redrawImgWithObj();
+                        this.refreshActiveObj();
                         break;
                     case 'freehanddraw':
-                        this.pointColl = obj.previousObj;
-                        this.freehandCounter--;
+                        this.pointColl = obj.previousPointColl;
+                        this.freehandCounter = this.pointColl.length;
                         this.lowerContext.clearRect(0, 0, this.lowerCanvas.width, this.lowerCanvas.height);
                         this.upperContext.clearRect(0, 0, this.upperCanvas.width, this.upperCanvas.height);
                         this.isUndoRedo = true;
                         this.redrawImgWithObj();
                         break;
                     case 'freehanddrawCustomized':
-                        this.pointColl = obj.previousObj;
+                        this.pointColl = obj.previousPointColl;
                         this.lowerContext.clearRect(0, 0, this.lowerCanvas.width, this.lowerCanvas.height);
                         this.upperContext.clearRect(0, 0, this.upperCanvas.width, this.upperCanvas.height);
                         this.isUndoRedo = true;
                         this.redrawImgWithObj();
                         break;
-                    case 'delete':
-                        if (obj.value === 'freehanddraw') {
-                            this.pointColl = obj.previousObj;
-                            this.freehandCounter++;
+                    case 'deleteFreehandDrawing':
+                    case 'deleteObj':
+                        if (obj.operation === 'deleteFreehandDrawing') {
+                            this.pointColl = obj.previousPointColl;
+                            this.freehandCounter = this.pointColl.length;
                         }
-                        else if (obj.value === 'shape') {
-                            this.objColl = obj.previousObj;
+                        else if (obj.operation === 'deleteObj') {
+                            this.objColl = obj.previousObjColl;
                         }
                         this.lowerContext.clearRect(0, 0, this.lowerCanvas.width, this.lowerCanvas.height);
                         this.upperContext.clearRect(0, 0, this.upperCanvas.width, this.upperCanvas.height);
@@ -12188,7 +12479,7 @@ var ImageEditor = /** @class */ (function (_super) {
                         this.redrawImgWithObj();
                         break;
                     case 'selectionTransform':
-                        this.activeObj = extend({}, obj.previousSelectionObj, {}, true);
+                        this.activeObj = extend({}, obj.previousObj.activeObj, {}, true);
                         this.upperContext.clearRect(0, 0, this.upperCanvas.width, this.upperCanvas.height);
                         if (this.activeObj.activePoint.width !== 0 && this.activeObj.activePoint.height !== 0) {
                             this.drawObject('duplicate', this.activeObj);
@@ -12196,83 +12487,84 @@ var ImageEditor = /** @class */ (function (_super) {
                         }
                         else {
                             this.refreshToolbar('main');
+                            this.performUndoDefaultAction(obj);
                         }
                         this.currObjType.isCustomCrop = false;
                         break;
-                    case 'shapeTransform':
-                        this.objColl = extend([], obj.previousObj, [], true);
-                        this.lowerContext.clearRect(0, 0, this.lowerCanvas.width, this.lowerCanvas.height);
-                        this.upperContext.clearRect(0, 0, this.upperCanvas.width, this.upperCanvas.height);
-                        this.isUndoRedo = true;
-                        this.redrawImgWithObj();
-                        this.refreshActiveObj();
-                        break;
-                    case 'textTransform':
-                        this.objColl = extend([], obj.previousObj, [], true);
-                        for (var i = 0; i < obj.previousObj.length; i++) {
-                            if (this.tempActObj.currIndex === obj.previousObj[i].currIndex) {
-                                prevObj = extend({}, obj.previousObj[i], {}, true);
+                    case 'textAreaCustomization':
+                        this.objColl = extend([], obj.previousObjColl, [], true);
+                        for (var i = 0; i < obj.previousObjColl.length; i++) {
+                            if (!isNullOrUndefined(this.tempActObj)) {
+                                if (this.tempActObj.currIndex === obj.previousObjColl[i].currIndex) {
+                                    activeObj = extend({}, obj.previousObjColl[i], {}, true);
+                                    this.objColl.splice(i, 1);
+                                    break;
+                                }
+                            }
+                            else {
+                                activeObj = extend({}, obj.previousObjColl[obj.previousObjColl.length - 1], {}, true);
                                 this.objColl.splice(i, 1);
                                 break;
                             }
                         }
-                        if (!isNullOrUndefined(prevObj)) {
-                            this.updateTextBox(prevObj);
+                        if (!isNullOrUndefined(activeObj)) {
+                            this.updateTextBox(activeObj);
                         }
                         break;
                     case 'text':
                         if (!isNullOrUndefined(this.tempActObj)) {
                             this.activeObj = extend({}, this.tempActObj, {}, true);
                         }
-                        if (obj.value.length === 0 && this.objColl.length === 1) {
+                        if (obj.previousObjColl.length === 0 && this.objColl.length === 1) {
                             this.tempActObj = extend({}, this.objColl[0], {}, true);
                         }
                         else {
                             for (var i = 0; i < this.objColl.length; i++) {
                                 if (!isNullOrUndefined(this.objColl[i]) &&
-                                    isNullOrUndefined(obj.value[i])) {
-                                    this.tempActObj = extend({}, obj.value[i], {}, true);
+                                    isNullOrUndefined(obj.previousObjColl[i])) {
+                                    this.tempActObj = extend({}, this.objColl[i], {}, true);
                                     break;
                                 }
-                                if (obj.value[i].currIndex !== this.objColl[i].currIndex) {
+                                if (obj.previousObjColl[i].currIndex !== this.objColl[i].currIndex) {
                                     this.tempActObj = extend({}, this.objColl[i], {}, true);
                                     break;
                                 }
                             }
                         }
                         this.activeObj = extend({}, this.tempActObj, {}, true);
-                        this.objColl = extend([], obj.value, [], true);
+                        this.objColl = extend([], obj.previousObjColl, [], true);
                         this.lowerContext.clearRect(0, 0, this.lowerCanvas.width, this.lowerCanvas.height);
                         this.isUndoRedo = true;
                         this.redrawImgWithObj();
-                        this.textArea.style.display = 'block';
-                        this.textArea.value = obj.previousObj;
-                        break;
-                    case 'brightness':
-                    case 'contrast':
-                    case 'hue':
-                    case 'saturation':
-                    case 'opacity':
-                    case 'blur':
-                    case 'exposure':
-                        this.lowerContext.filter = this.canvasFilter = obj.previousObj;
-                        if (this.lowerContext.filter.split(' ').length > 1 &&
-                            this.lowerContext.filter.split(' ')[0].split('(')[1].split(')')[0] === '1') {
-                            this.isBrightnessAdjusted = false;
+                        if (!isNullOrUndefined(this.activeObj) && this.activeObj.activePoint.width !== 0
+                            && this.activeObj.activePoint.height !== 0) {
+                            this.drawObject('duplicate');
+                        }
+                        else {
+                            this.textArea.style.display = 'block';
+                            this.textArea.value = obj.previousText;
                         }
-                        this.setAdjustment(obj.operation);
-                        this.isUndoRedo = true;
                         break;
-                    case 'default':
-                    case 'chrome':
-                    case 'cold':
-                    case 'warm':
-                    case 'grayscale':
-                    case 'sepia':
-                    case 'invert':
-                        this.updateFilter(obj);
+                    default:
+                        this.performUndoDefaultAction(obj);
+                        this.setAdjustment(obj.operation);
+                        this.updateFilter(obj.operation, obj.filter);
                         break;
                 }
+                this.clearOuterCanvas(this.lowerContext);
+                if (this.isCircleCrop && obj.operation !== 'crop') {
+                    this.cropCircle(this.lowerContext);
+                }
+                if (this.zoomFactor > 0) {
+                    this.dragCanvas = true;
+                }
+                this.isCancelAction = false;
+                if (!isNullOrUndefined(this.activeObj.shape) && this.activeObj.shape.split('-')[0] === 'crop') {
+                    this.refreshToolbar('main', true, true);
+                }
+                else {
+                    this.refreshToolbar('main');
+                }
             }
         }
     };
@@ -12294,7 +12586,6 @@ var ImageEditor = /** @class */ (function (_super) {
                 this.undoRedoStep++;
                 this.enableDisableToolbarBtn();
                 this.isUndoRedo = true;
-                this.lowerContext.filter = this.canvasFilter;
                 var obj = this.undoRedoColl[this.undoRedoStep - 1];
                 if (this.undoRedoColl.length === this.undoRedoStep) {
                     this.currObjType.isUndoAction = false;
@@ -12302,74 +12593,49 @@ var ImageEditor = /** @class */ (function (_super) {
                 else {
                     this.currObjType.isUndoAction = true;
                 }
-                if (obj.operation !== 'textTransform' && this.textArea.style.display === 'block') {
+                if (obj.operation !== 'textAreaCustomization' && this.textArea.style.display === 'block') {
                     this.textArea.style.display = 'none';
                 }
                 this.element.querySelector('.e-contextual-toolbar-wrapper').classList.add('e-hide');
-                var selEle = this.element.querySelector('.e-contextual-toolbar-wrapper .e-toolbar-item.e-selected');
-                var xDiff = void 0;
-                var yDiff = void 0;
+                this.isCancelAction = true;
+                this.cropObj = extend({}, obj.currentCropObj, {}, true);
+                this.afterCropActions = obj.currentObj.afterCropActions;
+                this.lowerContext.filter = this.canvasFilter = obj.currentObj.filter;
+                var activeObj = void 0;
                 var tempUndoRedoColl = void 0;
                 var tempUndoRedoStep = void 0;
-                var value = '';
-                var currObj = void 0;
                 switch (obj.operation) {
-                    case 'rotate':
-                        if (obj.value === 90) {
-                            value = 'rotateright';
-                        }
-                        else if (obj.value === -90) {
-                            value = 'rotateleft';
-                        }
-                        this.performTransformation(value);
-                        break;
-                    case 'flip':
-                        if (obj.value.toLowerCase() === 'horizontal') {
-                            value = 'horizontalflip';
-                        }
-                        else if (obj.value.toLowerCase() === 'vertical') {
-                            value = 'verticalflip';
-                        }
-                        this.performTransformation(value);
-                        break;
-                    case 'zoom':
-                        this.zoom(obj.value);
-                        break;
-                    case 'pan':
-                        xDiff = this.destLeft;
-                        yDiff = this.destTop;
-                        this.destLeft = obj.currentObj.x;
-                        this.destTop = obj.currentObj.y;
-                        xDiff += this.destLeft;
-                        yDiff += this.destTop;
-                        this.drawPannedImage(xDiff, yDiff);
-                        break;
-                    case 'crop':
-                        this.cropImg();
-                        this.refreshToolbar('main');
+                    case 'shapeTransform':
+                        this.objColl = extend([], obj.currentObjColl, [], true);
+                        this.lowerContext.clearRect(0, 0, this.lowerCanvas.width, this.lowerCanvas.height);
+                        this.upperContext.clearRect(0, 0, this.upperCanvas.width, this.upperCanvas.height);
+                        this.isUndoRedo = true;
+                        this.redrawImgWithObj();
+                        this.refreshActiveObj();
                         break;
                     case 'freehanddraw':
-                        this.pointColl = obj.currentObj;
-                        this.freehandCounter++;
+                        this.pointColl = obj.currentPointColl;
+                        this.freehandCounter = this.pointColl.length;
                         this.lowerContext.clearRect(0, 0, this.lowerCanvas.width, this.lowerCanvas.height);
                         this.upperContext.clearRect(0, 0, this.upperCanvas.width, this.upperCanvas.height);
                         this.isUndoRedo = true;
                         this.redrawImgWithObj();
                         break;
                     case 'freehanddrawCustomized':
-                        this.pointColl = obj.currentObj;
+                        this.pointColl = obj.currentPointColl;
                         this.lowerContext.clearRect(0, 0, this.lowerCanvas.width, this.lowerCanvas.height);
                         this.upperContext.clearRect(0, 0, this.upperCanvas.width, this.upperCanvas.height);
                         this.isUndoRedo = true;
                         this.redrawImgWithObj();
                         break;
-                    case 'delete':
-                        if (obj.value === 'freehanddraw') {
-                            this.pointColl = obj.currentObj;
-                            this.freehandCounter--;
+                    case 'deleteFreehandDrawing':
+                    case 'deleteObj':
+                        if (obj.operation === 'deleteFreehandDrawing') {
+                            this.pointColl = obj.currentPointColl;
+                            this.freehandCounter = this.pointColl.length;
                         }
-                        else if (obj.value === 'shape') {
-                            this.objColl = obj.currentObj;
+                        else if (obj.operation === 'deleteObj') {
+                            this.objColl = obj.currentObjColl;
                         }
                         this.lowerContext.clearRect(0, 0, this.lowerCanvas.width, this.lowerCanvas.height);
                         this.upperContext.clearRect(0, 0, this.upperCanvas.width, this.upperCanvas.height);
@@ -12377,15 +12643,7 @@ var ImageEditor = /** @class */ (function (_super) {
                         this.redrawImgWithObj();
                         break;
                     case 'selectionTransform':
-                        if (this.zoomFactor !== obj.zoomFactor) {
-                            if (this.zoomFactor > 0) {
-                                this.zoom(-this.zoomFactor);
-                            }
-                            else {
-                                this.zoom(Math.abs(this.zoomFactor));
-                            }
-                        }
-                        this.activeObj = extend({}, obj.currentSelectionObj, {}, true);
+                        this.activeObj = extend({}, obj.currentObj.activeObj, {}, true);
                         this.upperContext.clearRect(0, 0, this.upperCanvas.width, this.upperCanvas.height);
                         if (this.activeObj.activePoint.width !== 0 && this.activeObj.activePoint.height !== 0) {
                             this.drawObject('duplicate', this.activeObj);
@@ -12394,38 +12652,57 @@ var ImageEditor = /** @class */ (function (_super) {
                         else {
                             this.refreshToolbar('main');
                         }
+                        this.currObjType.isCustomCrop = false;
                         break;
-                    case 'shapeTransform':
-                        this.objColl = extend([], obj.currentObj, [], true);
-                        this.lowerContext.clearRect(0, 0, this.lowerCanvas.width, this.lowerCanvas.height);
-                        this.upperContext.clearRect(0, 0, this.upperCanvas.width, this.upperCanvas.height);
-                        this.isUndoRedo = true;
-                        this.redrawImgWithObj();
-                        this.refreshActiveObj();
-                        break;
-                    case 'textTransform':
-                        this.objColl = extend([], obj.currentObj, [], true);
-                        for (var i = 0; i < obj.previousObj.length; i++) {
-                            if (this.tempActObj.currIndex === obj.currentObj[i].currIndex) {
-                                currObj = extend({}, obj.currentObj[i], {}, true);
+                    case 'textAreaCustomization':
+                        this.objColl = extend([], obj.currentObjColl, [], true);
+                        for (var i = 0; i < obj.currentObjColl.length; i++) {
+                            if (!isNullOrUndefined(this.tempActObj)) {
+                                if (this.tempActObj.currIndex === obj.currentObjColl[i].currIndex) {
+                                    activeObj = extend({}, obj.currentObjColl[i], {}, true);
+                                    this.objColl.splice(i, 1);
+                                    break;
+                                }
+                            }
+                            else {
+                                activeObj = extend({}, obj.currentObjColl[obj.currentObjColl.length - 1], {}, true);
                                 this.objColl.splice(i, 1);
                                 break;
                             }
                         }
-                        if (!isNullOrUndefined(currObj)) {
-                            this.updateTextBox(currObj);
+                        if (!isNullOrUndefined(activeObj)) {
+                            this.updateTextBox(activeObj);
                         }
                         break;
                     case 'text':
                         if (!isNullOrUndefined(this.tempActObj)) {
                             this.activeObj = extend({}, this.tempActObj, {}, true);
                         }
-                        this.objColl = extend([], obj.value, [], true);
+                        if (obj.previousObjColl.length === 0 && this.objColl.length === 1) {
+                            this.tempActObj = extend({}, this.objColl[0], {}, true);
+                        }
+                        else {
+                            for (var i = 0; i < this.objColl.length; i++) {
+                                if (!isNullOrUndefined(this.objColl[i]) &&
+                                    isNullOrUndefined(obj.previousObjColl[i])) {
+                                    this.tempActObj = extend({}, this.objColl[i], {}, true);
+                                    break;
+                                }
+                                if (obj.previousObjColl[i].currIndex !== this.objColl[i].currIndex) {
+                                    this.tempActObj = extend({}, this.objColl[i], {}, true);
+                                    break;
+                                }
+                            }
+                        }
+                        this.objColl = extend([], obj.currentObjColl, [], true);
                         this.lowerContext.clearRect(0, 0, this.lowerCanvas.width, this.lowerCanvas.height);
                         this.isUndoRedo = true;
                         this.redrawImgWithObj();
+                        if (!isNullOrUndefined(this.tempActObj)) {
+                            this.activeObj = extend({}, this.tempActObj, {}, true);
+                        }
                         this.textArea.style.display = 'block';
-                        this.textArea.value = obj.currentObj;
+                        this.textArea.value = obj.currentText;
                         tempUndoRedoColl = extend([], this.undoRedoColl, [], true);
                         tempUndoRedoStep = this.undoRedoStep;
                         this.redrawActObj();
@@ -12433,39 +12710,49 @@ var ImageEditor = /** @class */ (function (_super) {
                         this.undoRedoStep = tempUndoRedoStep;
                         this.textArea.style.display = 'none';
                         this.textArea.value = '';
+                        this.redrawActObj();
                         break;
-                    case 'brightness':
-                    case 'contrast':
-                    case 'hue':
-                    case 'saturation':
-                    case 'opacity':
-                    case 'blur':
-                    case 'exposure':
-                        this.lowerContext.filter = this.canvasFilter = obj.currentObj;
-                        this.setAdjustment(obj.operation);
-                        break;
-                    case 'default':
-                    case 'chrome':
-                    case 'cold':
-                    case 'warm':
-                    case 'grayscale':
-                    case 'sepia':
-                    case 'invert':
-                        if (selEle) {
-                            selEle.classList.remove('e-selected');
-                        }
-                        if (document.getElementById(this.element.id + '_' + obj.operation + 'Canvas')) {
-                            document.getElementById(this.element.id + '_' + obj.operation + 'Canvas').parentElement.classList.add('e-selected');
+                    default:
+                        this.objColl = [];
+                        this.pointColl = [];
+                        this.freehandCounter = 0;
+                        this.setCurrentObj(obj.currentObj);
+                        this.destLeft = obj.currentObj.destPoints.startX;
+                        this.destTop = obj.currentObj.destPoints.startY;
+                        activeObj = extend({}, this.activeObj, {}, true);
+                        this.objColl = extend([], obj.currentObjColl, [], true);
+                        this.pointColl = extend([], obj.currentPointColl, [], true);
+                        this.freehandCounter = this.pointColl.length;
+                        this.lowerContext.filter = 'none';
+                        this.iterateObjColl();
+                        this.freehandRedraw(this.lowerContext);
+                        this.lowerContext.filter = obj.currentObj.filter;
+                        this.activeObj = activeObj;
+                        this.upperContext.clearRect(0, 0, this.upperCanvas.width, this.upperCanvas.height);
+                        if (this.activeObj.activePoint.width !== 0 && this.activeObj.activePoint.height !== 0) {
+                            this.drawObject('duplicate');
                         }
-                        this.currentFilter = this.element.id + '_' + obj.operation;
-                        this.lowerContext.filter = this.canvasFilter = obj.currentObj;
-                        this.lowerContext.clearRect(0, 0, this.lowerCanvas.width, this.lowerCanvas.height);
-                        this.redrawImgWithObj();
+                        this.setAdjustment(obj.operation);
+                        this.updateFilter(obj.operation);
                         break;
                 }
+                this.clearOuterCanvas(this.lowerContext);
+                if (this.isCircleCrop) {
+                    this.cropCircle(this.lowerContext);
+                }
+                if (this.zoomFactor > 0) {
+                    this.dragCanvas = true;
+                }
+                this.isCancelAction = false;
                 if (this.undoRedoStep === this.undoRedoColl.length) {
                     this.isUndoRedo = false;
                 }
+                if (!isNullOrUndefined(this.activeObj.shape) && this.activeObj.shape.split('-')[0] === 'crop') {
+                    this.refreshToolbar('main', true, true);
+                }
+                else {
+                    this.refreshToolbar('main');
+                }
             }
         }
     };