@syncfusion/ej2-image-editor 20.4.48 → 20.4.51

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

@@ -160,9 +160,9 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends Component {
         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;
@@ -378,7 +378,6 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends Component {
         this.unwireEvent();
         super.destroy();
         this.element.innerHTML = '';
-        this.trigger('destroyed');
     }
     initialize() {
         this.updateFinetunes();
@@ -943,7 +942,7 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends Component {
             redo.parentElement.classList.remove('e-overlay');
         }
         const 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');
         }
@@ -1153,32 +1152,34 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends Component {
     cropSelect(args) {
         this.isCropTab = true;
         this.zoomFactor = this.cropZoomFactor;
-        const activeObj = this.activeObj;
+        const prevCropObj = extend({}, this.cropObj, {}, true);
+        const previousObj = this.getCurrentObj();
+        previousObj.objColl = extend([], this.objColl, [], true);
+        previousObj.pointColl = extend([], this.pointColl, [], true);
+        previousObj.afterCropActions = this.afterCropActions;
         const 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();
     }
     transformSelect(args) {
         this.cropSelectedState();
         this.currentSelectionPoint = null;
         this.performTransformation(args.item.id);
-        this.afterCropActions.push(args.item.id);
     }
     performTransformation(text) {
         const tempZoomFactor = this.defaultZoomFactor;
         const isUndoRedo = this.isUndoRedo;
+        const 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);
@@ -1193,10 +1194,19 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends Component {
             this.isUndoRedo = true;
             this.zoom(tempZoomFactor);
             this.isUndoRedo = isUndoRedo;
+            let 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;
         }
     }
     updateTransform(text) {
-        switch (text) {
+        switch (text.toLowerCase()) {
             case 'rotateleft':
                 this.rotate(-90);
                 break;
@@ -1296,15 +1306,16 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends Component {
                 showButtons: false, mode: 'Palette', cssClass: 'e-shape-fill-color',
                 change: (args) => {
                     this.pushActItemIntoObj();
-                    const objColl = extend([], this.objColl, [], true);
+                    const prevCropObj = extend({}, this.cropObj, {}, true);
+                    const 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.element.children[0].classList.add('e-nocolor-item');
@@ -1339,17 +1350,17 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends Component {
                 showButtons: false, mode: 'Palette', cssClass: 'e-shape-stroke-color',
                 change: (args) => {
                     this.pushActItemIntoObj();
-                    const objColl = extend([], this.objColl, [], true);
+                    const prevCropObj = extend({}, this.cropObj, {}, true);
+                    const 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.element.children[0].style.backgroundColor = args.currentValue.rgba;
@@ -1399,18 +1410,18 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends Component {
                 },
                 select: (args) => {
                     this.pushActItemIntoObj();
-                    const objColl = extend([], this.objColl, [], true);
+                    const prevCropObj = extend({}, this.cropObj, {}, true);
+                    const 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.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'))) {
@@ -1539,17 +1550,17 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends Component {
                 showButtons: false, mode: 'Palette', cssClass: 'e-text-fontt-color',
                 change: (args) => {
                     this.pushActItemIntoObj();
-                    const objColl = extend([], this.objColl, [], true);
+                    const prevCropObj = extend({}, this.cropObj, {}, true);
+                    const 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]);
                         }
                     }
@@ -1558,21 +1569,13 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends Component {
                         const 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.element.children[0].style.backgroundColor = args.currentValue.rgba;
@@ -1643,6 +1646,11 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends Component {
                 select: (args) => {
                     this.pushActItemIntoObj();
                     const objColl = extend([], this.objColl, [], true);
+                    const prevCropObj = extend({}, this.cropObj, {}, true);
+                    const 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.textContent = args.item.text;
                     if (Browser.isDevice) {
@@ -1654,11 +1662,7 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends Component {
                         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);
                         const width = this.activeObj.activePoint.width +
@@ -1673,11 +1677,7 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends Component {
                         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]);
                     }
                 }
@@ -1778,7 +1778,11 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends Component {
                 },
                 select: (args) => {
                     this.pushActItemIntoObj();
-                    const objColl = extend([], this.objColl, [], true);
+                    const prevCropObj = extend({}, this.cropObj, {}, true);
+                    const 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.textContent = args.item.text;
                     if (this.textArea.style.display === 'block') {
@@ -1786,11 +1790,7 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends Component {
                         const 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();
                         let textStyle = '';
                         if (this.textArea.style.fontWeight === 'bold') {
@@ -1830,11 +1830,7 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends Component {
                         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]);
                     }
                 }
@@ -1894,14 +1890,27 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends Component {
         return width;
     }
     updateUndoRedoObj(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);
+            const cropObj = extend({}, this.cropObj, {}, true);
+            const 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]);
+        }
     }
     updateObjColl(item, objColl) {
+        const prevCropObj = extend({}, this.cropObj, {}, true);
+        const prevObj = this.getCurrentObj();
+        prevObj.objColl = extend([], this.objColl, [], true);
+        prevObj.pointColl = extend([], this.pointColl, [], true);
+        prevObj.afterCropActions = extend([], this.afterCropActions, [], true);
         const tempBold = this.activeObj.textSettings.bold;
         const tempItalic = this.activeObj.textSettings.italic;
         switch (item) {
@@ -1923,10 +1932,7 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends Component {
                 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;
@@ -2154,7 +2160,7 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends Component {
                         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');
                     }
@@ -2174,7 +2180,12 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends Component {
                     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)) {
@@ -2186,12 +2197,12 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends Component {
                     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');
@@ -2223,6 +2234,9 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends Component {
                 case 'sepia':
                 case 'invert':
                 case 'sharpen':
+                    if (this.currObjType.isUndoAction) {
+                        this.refreshUndoRedoColl();
+                    }
                     this.currObjType.isFiltered = true;
                     this.setFilter(type);
                     break;
@@ -2255,7 +2269,6 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends Component {
             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;
@@ -2294,7 +2307,9 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends Component {
         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;
     }
@@ -2306,8 +2321,10 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends Component {
             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');
@@ -2842,6 +2859,9 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends Component {
             width: Browser.isDevice ? '200px' : '300px',
             cssClass: 'e-slider',
             change: (args) => {
+                if (this.currObjType.isUndoAction) {
+                    this.refreshUndoRedoColl();
+                }
                 this.setCurrAdjustmentValue(type, args.value);
                 this.enableDisableToolbarBtn();
             }
@@ -2946,11 +2966,80 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends Component {
             this.iterateObjColl();
             this.freehandRedraw(this.lowerContext);
             this.lowerContext.filter = temp;
+            this.currSelectionPoint = null;
+        }
+        else {
+            if (this.cropObj.cropZoom > 0) {
+                const cropObjColl = extend([], this.objColl, null, true);
+                const cropPointColl = extend([], this.pointColl, null, true);
+                this.objColl = [];
+                this.pointColl = [];
+                this.freehandCounter = 0;
+                this.zoom(this.cropObj.cropZoom);
+                this.objColl = cropObjColl;
+                this.pointColl = cropPointColl;
+                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;
+                }
+            }
+            const 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();
+            const cropObjColl = extend([], this.objColl, null, true);
+            const cropPointColl = extend([], this.pointColl, null, true);
+            this.objColl = [];
+            this.pointColl = [];
+            this.freehandCounter = 0;
+            this.setCurrentObj();
+            const 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');
+        }
+    }
+    updatePannedRegion() {
+        let 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;
     }
     updateObjAndFreeHandDrawColl() {
         for (let i = 0; i < this.objColl.length; i++) {
@@ -3070,7 +3159,7 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends Component {
                     const 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 };
                 }
@@ -3090,6 +3179,7 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends Component {
                 else {
                     this.zoom(Math.abs(length));
                 }
+                this.cropZoomFactor = this.tempZoomFactor;
             }
             else {
                 this.isCancelAction = true;
@@ -3099,7 +3189,7 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends Component {
                 this.freehandCounter = 0;
                 const cropObj = extend({}, this.cropObj, {});
                 const afterCropActions = extend([], this.afterCropActions, {}, true);
-                this.setCropObj();
+                this.setCurrentObj();
                 this.cropImg();
                 this.cropObj = cropObj;
                 this.afterCropActions = afterCropActions;
@@ -3152,6 +3242,11 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends Component {
             }
         }
         context.closePath();
+        const prevCropObj = extend({}, this.cropObj, {}, true);
+        const 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;
@@ -3163,16 +3258,7 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends Component {
         this.freehandCounter++;
         this.currentFreehandDrawIndex++;
         this.isFreehandDrawing = false;
-        /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
-        const currentObj = extend([], this.pointColl, [], true);
-        this.pointColl = {};
-        for (let i = 0; i < this.freehandCounter - 1; i++) {
-            this.pointColl[i] = currentObj[i];
-        }
-        /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
-        const 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);
     }
     freehandMoveHandler(e) {
         this.isFreehandPointMoved = true;
@@ -3654,8 +3740,11 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends Component {
                     /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
                     const temp = extend([], this.pointColl, [], true);
                     this.updateFreehandDrawColorChange();
-                    /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
-                    const previousObj = extend([], this.pointColl, [], true);
+                    const prevCropObj = extend({}, this.cropObj, {}, true);
+                    const 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;
@@ -3663,7 +3752,7 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends Component {
                         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);
@@ -3727,8 +3816,11 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends Component {
                     /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
                     const temp = extend([], this.pointColl, [], true);
                     this.updateFreehandDrawColorChange();
-                    /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
-                    const previousObj = extend([], this.pointColl, [], true);
+                    const prevCropObj = extend({}, this.cropObj, {}, true);
+                    const 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.textContent = args.item.text;
@@ -3737,7 +3829,7 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends Component {
                         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'))) {
@@ -3944,6 +4036,9 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends Component {
         this.destLeft += this.totalPannedInternalPoint.x;
         this.destTop += this.totalPannedInternalPoint.y;
         const 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');
@@ -4187,6 +4282,10 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends Component {
         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 (let 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;
@@ -4195,53 +4294,62 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends Component {
                 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();
     }
-    flipFreehandrawColl(value) {
-        if (value.toLowerCase() === 'horizontal') {
-            for (let n = 0; n < this.freehandCounter; n++) {
-                if (this.pointColl[n].shapeFlip !== this.currFlipState) {
-                    this.points = extend([], this.pointColl[n].points, []);
-                    this.pointCounter = 0;
-                    const len = this.points.length;
-                    for (let 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;
+    pointsHorizontalFlip() {
+        for (let n = 0; n < this.freehandCounter; n++) {
+            if (this.pointColl[n].shapeFlip !== this.currFlipState) {
+                this.points = extend([], this.pointColl[n].points, []);
+                this.pointCounter = 0;
+                const len = this.points.length;
+                for (let 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.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;
             }
         }
-        else {
-            for (let n = 0; n < this.freehandCounter; n++) {
-                if (this.pointColl[n].shapeFlip !== this.currFlipState) {
-                    this.points = extend([], this.pointColl[n].points, []);
-                    this.pointCounter = 0;
-                    const len = this.points.length;
-                    for (let 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;
+    }
+    pointsVerticalFlip() {
+        for (let n = 0; n < this.freehandCounter; n++) {
+            if (this.pointColl[n].shapeFlip !== this.currFlipState) {
+                this.points = extend([], this.pointColl[n].points, []);
+                this.pointCounter = 0;
+                const len = this.points.length;
+                for (let 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);
                     }
-                    this.pointColl[n].shapeFlip = this.currFlipState;
+                    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;
                 }
+                this.pointColl[n].shapeFlip = this.currFlipState;
+            }
+        }
+    }
+    flipFreehandrawColl(value) {
+        if (value.toLowerCase() === 'horizontal') {
+            this.pointsHorizontalFlip();
+        }
+        else if (value.toLowerCase() === 'vertical') {
+            this.pointsVerticalFlip();
+        }
+        else {
+            this.pointsHorizontalFlip();
+            for (let i = 0; i < this.freehandCounter; i++) {
+                this.pointColl[i].shapeFlip = '';
             }
+            this.pointsVerticalFlip();
         }
     }
     rotateFreehandDrawColl() {
@@ -4265,7 +4373,7 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends Component {
             }
         }
     }
-    zoomFreehandDrawColl() {
+    zoomFreehandDrawColl(isPreventApply) {
         for (let n = 0; n < this.freehandCounter; n++) {
             this.points = extend([], this.pointColl[n].points, []);
             this.pointCounter = 0;
@@ -4275,7 +4383,9 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends Component {
                 this.points[l].y = this.zoomY(this.points[l].ratioY);
             }
         }
-        this.freehandRedraw(this.lowerContext);
+        if (isNullOrUndefined(isPreventApply)) {
+            this.freehandRedraw(this.lowerContext);
+        }
     }
     zoomX(x) {
         return (x * this.destWidth) + this.destLeft;
@@ -4444,170 +4554,154 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends Component {
     }
     updateCropObj() {
         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 };
+        const obj = this.getCurrentObj();
+        this.cropObj = extend({}, obj, {}, true);
     }
-    setCropObj() {
-        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 = '';
+    setCurrentObj(obj) {
+        const 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;
             }
+        }
+        const isCircleCrop = this.isCircleCrop;
+        const 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');
-        let activeObj = extend({}, this.cropObj.activeObj, {}, true);
+        if (this.activeObj.activePoint.width !== 0 && this.activeObj.activePoint.height !== 0) {
+            this.drawObject('duplicate');
+        }
+        let activeObj = extend({}, obj.activeObj, {}, true);
         let isAfterCropAction = false;
-        if (this.afterCropActions.length > 0) {
+        this.afterCropActions = this.alignRotateFlipColl(this.afterCropActions);
+        const afterCropActions = extend([], this.afterCropActions, [], true);
+        if (!isObj && afterCropActions.length > 0) {
             isAfterCropAction = true;
-            const objColl = extend([], this.objColl, {}, true);
-            const pointColl = extend([], this.pointColl, {}, true);
-            const freehandCounter = this.freehandCounter;
-            this.objColl = [];
-            this.pointColl = [];
-            this.freehandCounter = 0;
-            const isCircleCrop = this.isCircleCrop;
-            const currSelectionPoint = extend({}, this.currSelectionPoint, {}, true);
-            this.currSelectionPoint = null;
-            this.isCircleCrop = false;
-            let isFlip = false;
-            for (let i = 0; i < this.afterCropActions.length; i++) {
+            for (let 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;
-            const 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) {
-                    const currSelectionPoint = 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;
-                }
-                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;
     }
-    drawCropSelectionImage() {
+    drawCropSelectionImage(obj, isObj) {
         const 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');
-        const 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;
+        const 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;
             const 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;
@@ -4624,10 +4718,12 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends Component {
         }
         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 {
@@ -4637,6 +4733,7 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends Component {
                 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 };
             }
@@ -4826,21 +4923,35 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends Component {
         }
         return panRegion;
     }
-    drawPannImage(point, panRegion) {
+    drawPannImage(point) {
+        const 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);
         }
     }
     drawPannedImage(xDiff, yDiff) {
+        const panEventArgs = { startPoint: this.panDown, endPoint: this.panMove };
+        this.trigger('panning', panEventArgs);
         let isObjCreated = false;
         if (isNullOrUndefined(this.activeObj.shape)) {
             isObjCreated = true;
@@ -4865,11 +4976,10 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends Component {
             this.updateActiveObject(this.activeObj.activePoint, this.activeObj);
             this.isCropTab = true;
         }
-        const panRegion = this.getCurrentPanRegion();
         if (this.degree === 0) {
             let point;
             if (isNullOrUndefined(xDiff) && isNullOrUndefined(yDiff)) {
-                point = this.updatePanPoints(panRegion);
+                point = this.updatePanPoints('');
             }
             else {
                 point = { x: xDiff, y: yDiff };
@@ -4878,7 +4988,7 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends Component {
             this.totalPannedPoint.y += point.y;
             const tempSelectionObj = extend({}, this.activeObj, {}, true);
             const 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);
@@ -4886,13 +4996,12 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends Component {
             if (!isNullOrUndefined(this.activeObj.shape)) {
                 this.drawObject('duplicate', this.activeObj);
             }
-            this.updateFlipPan(tempSelectionObj);
         }
         else {
             const 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 };
@@ -4976,45 +5085,23 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends Component {
         const tempFlipColl = this.flipColl;
         this.flipColl = [];
         this.updateImageRatioForActObj();
-        this.currSelectionPoint = extend({}, this.activeObj, {}, true);
+        this.objColl.push(this.activeObj);
+        if (this.zoomFactor > 0) {
+            const zoomFactor = this.zoomFactor;
+            const isUndoRedo = this.isUndoRedo;
+            for (let 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);
         const 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 };
-        }
-        let 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);
-        const destLeft = this.destLeft;
-        const 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 (let i = 0; i < this.objColl.length; i++) {
             this.objColl[i].shapeFlip = '';
         }
@@ -5022,37 +5109,21 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends Component {
             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';
@@ -5063,9 +5134,9 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends Component {
             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);
@@ -5076,6 +5147,7 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends Component {
         this.upperContext.clearRect(0, 0, this.upperCanvas.width, this.upperCanvas.height);
         this.isReverseFlip = false;
         this.resetPanPoints();
+        this.tempFlipPanPoint = { x: 0, y: 0 };
     }
     rotateCrop() {
         let shape = '';
@@ -5116,33 +5188,21 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends Component {
             this.rotateObjColl();
             this.rotateFreehandDrawColl();
         }
-        const activeObj = extend({}, this.objColl[this.objColl.length - 1], {}, true);
+        let activeObj = extend({}, this.objColl[this.objColl.length - 1], {}, true);
         if (this.currFlipState !== '') {
-            let flipState = '';
             for (let 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 (let 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);
-            }
+            let 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();
@@ -5171,25 +5231,16 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends Component {
             this.rotateObjColl();
             this.rotateFreehandDrawColl();
         }
-        if (this.currFlipState !== '') {
+        if (this.getCurrentPanRegion() !== '') {
             for (let 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 (let 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');
-            }
+            let flipState = this.getCurrentCropState('reverse');
+            this.redrawObj(flipState);
+            this.flipFreehandrawColl(flipState);
         }
         this.isReverseRotate = false;
         if (shape === 'crop-circle') {
@@ -5212,37 +5263,141 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends Component {
         this.upperContext.clearRect(0, 0, this.upperCanvas.width, this.upperCanvas.height);
         this.resetPanPoints();
     }
-    updateRotatePanPoints() {
-        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;
+    getCurrentCropState(type, isAllowInvert) {
+        let flipState = '';
+        let 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 (let 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';
+                    }
+                }
             }
         }
-    }
-    rotatePan(isCropSelection) {
-        this.isReverseRotate = true;
-        const tempDegree = this.degree;
-        let rotatePanActiveObj;
-        if (!isNullOrUndefined(this.activeObj.activePoint) && !isNullOrUndefined(this.activeObj.shape)) {
-            rotatePanActiveObj = extend({}, this.activeObj, {}, true);
+        if (flipState === '') {
+            flipState = this.flipColl.length > 1 ? this.getCurrentPanRegion() : this.currFlipState;
         }
-        const tempObjColl = extend([], this.objColl, [], true);
+        return flipState;
+    }
+    isInitialRotate() {
+        let isRotate = false;
+        if (this.rotateFlipColl.length > 0 && typeof (this.rotateFlipColl[0]) === 'number') {
+            isRotate = true;
+        }
+        return isRotate;
+    }
+    updateRotatePanPoints() {
+        let 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;
+                }
+            }
+        }
+    }
+    rotatePan(isCropSelection, isDefaultZoom) {
+        this.isReverseRotate = true;
+        const tempDegree = this.degree;
+        let rotatePanActiveObj;
+        if (!isNullOrUndefined(this.activeObj.activePoint) && !isNullOrUndefined(this.activeObj.shape)) {
+            rotatePanActiveObj = extend({}, this.activeObj, {}, true);
+        }
+        const tempObjColl = extend([], this.objColl, [], true);
+        const tempPointColl = extend([], this.pointColl, [], true);
         this.objColl = [];
+        this.pointColl = [];
+        this.freehandCounter = 0;
         this.refreshActiveObj();
         this.isRotateZoom = true;
         this.updateCurrentTransformedState('initial');
@@ -5271,15 +5426,25 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends Component {
         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';
-        const 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);
@@ -5327,7 +5492,7 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends Component {
             this.zoomFactor += value;
         }
         if (this.isCropTab) {
-            this.cropZoomFactor += value;
+            this.cropZoomFactor = this.zoomFactor;
         }
         else {
             this.defaultZoomFactor = this.zoomFactor;
@@ -5346,8 +5511,8 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends Component {
         this.drawImgToCanvas(maxDimension);
     }
     cropZoom(value, selectionObj) {
-        const destLeft = this.destLeft;
-        const destTop = this.destTop;
+        let destLeft = this.destLeft;
+        let destTop = this.destTop;
         let maxDimension = { width: 0, height: 0 };
         if (this.srcLeft === 0 || this.srcTop === 0) {
             if (isNullOrUndefined(selectionObj)) {
@@ -5369,18 +5534,32 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends Component {
         }
         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;
@@ -5601,11 +5780,44 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends Component {
             this.degree = 0;
         }
     }
-    updateUndoRedoColl(operation, value, previousObj, currentObj, zoomFactor, sharpen, bw) {
-        if (!this.isInitialLoading) {
+    getCurrentObj() {
+        const 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;
+    }
+    updateUndoRedoColl(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 });
+            const 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--;
@@ -5880,6 +6092,7 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends Component {
         }
         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;
         }
@@ -6172,15 +6385,16 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends Component {
         }
         if (e.currentTarget === this.upperCanvas) {
             this.currObjType.shape = this.currObjType.shape.toLowerCase();
-            if (!this.togglePen && !this.dragCanvas) {
+            const prevCropObj = extend({}, this.cropObj, {}, true);
+            const 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;
@@ -6191,13 +6405,8 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends Component {
             }
             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);
                 }
             }
         }
@@ -6227,27 +6436,34 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends Component {
                 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
-                    const previousObj = extend([], this.pointColl, [], true);
-                    this.deleteFreehandDraw(this.freehandDrawHoveredIndex);
-                    this.updateUndoRedoColl('delete', 'freehanddraw', previousObj, this.pointColl, this.zoomFactor);
+                    const prevCropObj = extend({}, this.cropObj, {}, true);
+                    const 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);
-                    const previousObj = extend([], this.objColl, [], true);
+                    const prevCropObj = extend({}, this.cropObj, {}, true);
+                    const 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 };
@@ -6255,7 +6471,7 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends Component {
                     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':
@@ -6310,6 +6526,10 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends Component {
         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;
         }
     }
     canvasMouseMoveHandler(e) {
@@ -6342,10 +6562,12 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends Component {
         e.preventDefault();
         if (this.togglePan) {
             if (this.panDown && this.panMove && this.togglePan && this.dragCanvas) {
+                const 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;
@@ -6387,7 +6609,8 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends Component {
     adjustToScreen() {
         // eslint-disable-next-line @typescript-eslint/no-this-alias
         const proxy = this;
-        if (!this.element.querySelector('#' + this.element.id + '_contextualToolbar').parentElement.classList.contains('e-hide') ||
+        if ((!isNullOrUndefined(this.element.querySelector('#' + this.element.id + '_contextualToolbar')) &&
+            !this.element.querySelector('#' + this.element.id + '_contextualToolbar').parentElement.classList.contains('e-hide')) ||
             (!isNullOrUndefined(this.element.querySelector('#' + this.element.id + '_headWrapper'))
                 && !this.element.querySelector('#' + this.element.id + '_headWrapper').parentElement.classList.contains('e-hide'))) {
             this.element.querySelector('.e-contextual-toolbar-wrapper').classList.add('e-hide');
@@ -6657,7 +6880,12 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends Component {
     }
     updateTextFromTextArea() {
         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);
+            const prevCropObj = extend({}, this.cropObj, {}, true);
+            const 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';
@@ -6938,7 +7166,6 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends Component {
                 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);
                 }
@@ -8142,6 +8369,7 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends Component {
         this.activeObj = extend({}, tempObj, {}, true);
     }
     drawObject(canvas, obj, isCropRatio, points, isPreventDrag, saveContext) {
+        this.upperContext.clearRect(0, 0, this.upperCanvas.width, this.upperCanvas.height);
         let canvasDraw;
         if (canvas.toLowerCase() === 'original') {
             canvasDraw = this.lowerContext;
@@ -9892,28 +10120,6 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends Component {
                 height: this.destHeight / this.objColl[i].activePoint.height };
         }
     }
-    setTextFontSize(obj) {
-        if (obj.shape === 'text') {
-            const maxText = this.getMaxText(null, obj.keyHistory);
-            let degree;
-            if (obj.shapeDegree === 0) {
-                degree = this.degree;
-            }
-            else {
-                degree = this.degree - obj.shapeDegree;
-            }
-            let 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;
-            }
-        }
-    }
     redrawShape(obj) {
         for (let i = 0; i < this.objColl.length; i++) {
             if (JSON.stringify(obj) === JSON.stringify(this.objColl[i])) {
@@ -10114,7 +10320,10 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends Component {
             }
             this.togglePen = false;
             this.redrawActObj();
-            const objColl = extend([], this.objColl, [], true);
+            const 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';
@@ -10178,10 +10387,8 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends Component {
             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++;
+            const 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');
@@ -10326,6 +10533,43 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends Component {
             }
         }
         this.freehandRedraw(this.lowerContext);
+        this.updateCurrSelectionPoint(degree);
+    }
+    updateCurrSelectionPoint(degree) {
+        if (!isNullOrUndefined(this.currSelectionPoint) && !isNullOrUndefined(this.currDestinationPoint)) {
+            const activeObj = extend({}, this.activeObj, {}, true);
+            const objColl = extend([], this.objColl, [], true);
+            const srcPoints = { startX: this.srcLeft, startY: this.srcTop, width: this.srcWidth, height: this.srcHeight };
+            const 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;
+        }
     }
     setClientTransformedDimension(isPreventDimension) {
         if (this.degree % 90 === 0 && this.degree % 180 !== 0) {
@@ -10342,100 +10586,110 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends Component {
             }
         }
     }
-    popForDefaultTransformedState() {
+    popForDefaultTransformedState(collection) {
         let rotateRight = 0;
         let rotateleft = 0;
         let horizontal = 0;
         let vertical = 0;
-        for (let i = 0; i < this.rotateFlipColl.length; i++) {
-            if (this.rotateFlipColl[i] === 90) {
+        for (let 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;
     }
-    popForDefaultFlipState() {
-        for (let 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();
+    popForDefaultFlipState(collection) {
+        for (let 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;
     }
-    popForDefaultRotateState() {
-        for (let 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();
+    popForDefaultRotateState(collection) {
+        for (let 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;
     }
-    alignRotateFlipColl() {
-        this.popForDefaultTransformedState();
-        this.popForDefaultFlipState();
-        this.popForDefaultRotateState();
-        if (this.rotateFlipColl.length === 0) {
+    alignRotateFlipColl(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;
     }
     updateFlipColl(direction) {
         if (this.flipColl.length === 0) {
@@ -10606,35 +10860,51 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends Component {
         this.applyPenDraw();
         this.adjustmentLevel.brightness = value;
         value = this.getFilterValue(value);
-        const temp = this.lowerContext.filter;
+        const prevCropObj = extend({}, this.cropObj, {}, true);
+        const 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);
     }
     setContrast(value) {
         this.applyPenDraw();
         this.adjustmentLevel.contrast = value;
-        const temp = this.lowerContext.filter;
         value = this.getFilterValue(value);
         value *= 100;
+        const prevCropObj = extend({}, this.cropObj, {}, true);
+        const 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);
     }
     setHue(value) {
         this.applyPenDraw();
         this.adjustmentLevel.hue = value;
         value *= 3;
-        const temp = this.lowerContext.filter;
+        const prevCropObj = extend({}, this.cropObj, {}, true);
+        const 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);
     }
     setSaturation(value) {
         this.applyPenDraw();
         this.adjustmentLevel.saturation = value;
         value = this.getSaturationFilterValue(value);
         value *= 100;
-        const temp = this.lowerContext.filter;
+        const prevCropObj = extend({}, this.cropObj, {}, true);
+        const 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);
     }
     setOpacity(value) {
         this.applyPenDraw();
@@ -10657,9 +10927,13 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends Component {
         else if (value === 0) {
             value = 0.25;
         }
-        const temp = this.lowerContext.filter;
+        const prevCropObj = extend({}, this.cropObj, {}, true);
+        const 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);
     }
     setBlur(value) {
         this.applyPenDraw();
@@ -10667,25 +10941,37 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends Component {
         value /= 20;
         // Since 0.5 is not working in blur we consider from 1
         value += 0.5;
-        const temp = this.lowerContext.filter;
+        const prevCropObj = extend({}, this.cropObj, {}, true);
+        const 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);
     }
     setExposure(value) {
         this.applyPenDraw();
         this.adjustmentLevel.exposure = value;
         value = this.getFilterValue(value);
-        const temp = this.lowerContext.filter;
+        const prevCropObj = extend({}, this.cropObj, {}, true);
+        const 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);
     }
     setFilter(type) {
         type = type.toLowerCase();
         this.applyPenDraw();
-        const tempFilter = this.lowerContext.filter;
         const prevFilter = this.currentFilter;
+        const prevCropObj = extend({}, this.cropObj, {}, true);
+        const 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);
     }
     renderImage() {
         const temp = this.lowerContext.filter;
@@ -10720,8 +11006,81 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends Component {
         this.updateFontStyles();
         this.textArea.style.width = this.activeObj.activePoint.width + 'px';
     }
+    drawNewSelection(type, startX, startY, width, height) {
+        let points;
+        const 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);
+        }
+    }
+    setDestPointsForFlipState(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);
+            }
+        }
+    }
+    performUndoDefaultAction(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;
+        const 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');
+        }
+    }
     setAdjustment(type) {
-        this.lowerContext.clearRect(0, 0, this.lowerCanvas.width, this.lowerCanvas.height);
         const splitWords = this.lowerContext.filter.split(' ');
         let value;
         let valueArr;
@@ -10784,59 +11143,25 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends Component {
                 this.adjustmentLevel.exposure = this.setFilterValue(value);
                 break;
         }
-        this.callUpdateCurrentTransformedState();
-    }
-    updateFilter(obj) {
-        const selEle = this.element.querySelector('.e-contextual-toolbar-wrapper .e-toolbar-item.e-selected');
-        if (selEle) {
-            selEle.classList.remove('e-selected');
-        }
-        const 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();
     }
-    drawNewSelection(type, startX, startY, width, height) {
-        let points;
-        const cropShape = 'crop-' + type;
-        if (cropShape.toLowerCase() === 'crop-custom') {
-            if (this.currObjType.shape === '') {
-                this.drawCustomSelection('crop-custom');
+    updateFilter(type, previousFilter) {
+        if (type === 'default' || type === 'chrome' || type === 'cold' ||
+            type === 'warm' || type === 'grayscale' || type === 'blackandwhite' ||
+            type === 'sepia' || type === 'invert' || type === 'sharpen') {
+            const 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');
+            const 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);
         }
     }
     /**
@@ -10877,11 +11202,15 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends Component {
             }
             if (!this.disabled && this.activeObj.horTopLine !== undefined && (this.currObjType.isCustomCrop || splitWords[0] === 'crop')) {
                 isCrop = true;
-                const shape = this.activeObj.shape;
+                const prevCropObj = extend({}, this.cropObj, {}, true);
+                const 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;
@@ -10894,9 +11223,17 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends Component {
      */
     flip(direction) {
         if (!this.disabled && this.isImageLoaded) {
-            const zoomFactor = this.zoomFactor;
             const transitionArgs = { direction: direction };
             this.trigger('flipping', transitionArgs);
+            const prevCropObj = extend({}, this.cropObj, {}, true);
+            let prevObj;
+            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');
             let splitWords = [];
             let activeObjShape;
             if (!isNullOrUndefined(this.activeObj.activePoint)) {
@@ -10955,7 +11292,12 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends Component {
                 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);
@@ -10994,8 +11336,9 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends Component {
             }
             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);
@@ -11015,7 +11358,7 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends Component {
             else if (!this.isReverseFlip) {
                 this.refreshToolbar('main', true, true);
             }
-            this.alignRotateFlipColl();
+            this.rotateFlipColl = this.alignRotateFlipColl(this.rotateFlipColl, true);
         }
     }
     /**
@@ -11177,17 +11520,16 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends Component {
             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;
@@ -11197,6 +11539,11 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends Component {
             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();
@@ -11216,6 +11563,15 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends Component {
             isRotate = true;
             const transitionArgs = { degree: degree };
             this.trigger('rotating', transitionArgs);
+            const prevCropObj = extend({}, this.cropObj, {}, true);
+            let prevObj;
+            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');
             let splitWords = [];
             let activeObjShape;
             if (!isNullOrUndefined(this.activeObj.activePoint) && !isNullOrUndefined(this.activeObj.shape)) {
@@ -11231,7 +11587,6 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends Component {
             }
             this.redrawActObj();
             this.upperContext.clearRect(0, 0, this.upperCanvas.width, this.upperCanvas.height);
-            const zoomFactor = this.zoomFactor;
             this.drawRotatedImage(degree);
             this.clearOuterCanvas(this.lowerContext);
             this.clearOuterCanvas(this.upperContext);
@@ -11244,8 +11599,8 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends Component {
                     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) {
@@ -11254,7 +11609,7 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends Component {
             else if (!this.isReverseRotate) {
                 this.refreshToolbar('main', true, true);
             }
-            this.alignRotateFlipColl();
+            this.rotateFlipColl = this.alignRotateFlipColl(this.rotateFlipColl, true);
         }
         return isRotate;
     }
@@ -11350,6 +11705,11 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends Component {
             else if (splitWords !== undefined && splitWords[0] === 'crop') {
                 isPrevent = true;
             }
+            const prevCropObj = extend({}, this.cropObj, {}, true);
+            const 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 = '';
@@ -11361,19 +11721,26 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends Component {
                 if (this.defaultZoomFactor > 0) {
                     const zoomFactor = this.zoomFactor = this.defaultZoomFactor;
                     this.isCropTab = false;
+                    const isUndoRedo = this.isUndoRedo;
                     for (let 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') {
@@ -11448,23 +11815,6 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends Component {
             }
         }
     }
-    setDestPointsForFlipState(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.
      *
@@ -11473,7 +11823,7 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends Component {
      */
     zoom(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;
             }
@@ -11490,29 +11840,37 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends Component {
             else if (!isNullOrUndefined(this.activeObj.shape) && splitWords[0] !== 'crop') {
                 isShape = true;
             }
+            let zoomPoint;
+            let zoomLevel;
+            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 };
+            }
+            const zoomEventArgs = { zoomPoint: zoomPoint, zoomLevel: zoomLevel };
+            this.trigger('zooming', zoomEventArgs);
+            const prevCropObj = extend({}, this.cropObj, {}, true);
+            const 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);
             this.lowerContext.filter = this.canvasFilter;
             this.upperCanvas.style.cursor = 'default';
-            let zoomState;
             let objColl = extend([], this.objColl, [], true);
-            if (value === 3.75 || value === 1) {
-                zoomState = 0.1;
-            }
-            else if (value === -3.75) {
-                zoomState = -0.1;
-            }
-            else {
-                zoomState = value;
-            }
             if (!this.isCropTab) {
                 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);
@@ -11521,13 +11879,19 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends Component {
                     this.tempFlipPanPoint.y += this.totalPannedPoint.y;
                     objColl = extend([], this.objColl, [], true);
                     this.objColl = [];
+                    const destLeft = this.destLeft;
+                    const 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 {
@@ -11550,19 +11914,6 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends Component {
                 this.zoomFreehandDrawColl();
                 this.lowerContext.filter = temp;
             }
-            else if (this.degree === 0) {
-                const temp = this.lowerContext.filter;
-                this.lowerContext.filter = 'none';
-                const destLeft = this.destLeft;
-                const 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);
             }
@@ -11571,18 +11922,12 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends Component {
             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;
             const zoomOut = document.querySelector('#' + this.element.id + '_zoomOut');
@@ -11594,9 +11939,6 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends Component {
                 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);
@@ -11604,24 +11946,6 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends Component {
             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';
-                }
-            }
             const panBtn = this.element.querySelector('.e-img-pan .e-btn');
             if (!isNullOrUndefined(panBtn) && this.togglePan) {
                 panBtn.classList.add('e-selected-btn');
@@ -11633,12 +11957,6 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends Component {
                 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();
             }
         }
@@ -12042,14 +12360,13 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends Component {
                 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;
                 const obj = this.undoRedoColl[this.undoRedoStep];
                 if (this.undoRedoColl.length === this.undoRedoStep) {
                     this.currObjType.isUndoAction = false;
@@ -12057,82 +12374,47 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends Component {
                 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');
-                let xDiff;
-                let yDiff;
-                let tempUndoRedoColl = [];
-                let prevObj;
-                let value = '';
+                this.isCancelAction = true;
+                let activeObj;
+                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);
@@ -12140,7 +12422,7 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends Component {
                         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);
@@ -12148,83 +12430,84 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends Component {
                         }
                         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 (let 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 (let 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 (let 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');
+                }
             }
         }
     }
@@ -12246,7 +12529,6 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends Component {
                 this.undoRedoStep++;
                 this.enableDisableToolbarBtn();
                 this.isUndoRedo = true;
-                this.lowerContext.filter = this.canvasFilter;
                 const obj = this.undoRedoColl[this.undoRedoStep - 1];
                 if (this.undoRedoColl.length === this.undoRedoStep) {
                     this.currObjType.isUndoAction = false;
@@ -12254,74 +12536,49 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends Component {
                 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');
-                const selEle = this.element.querySelector('.e-contextual-toolbar-wrapper .e-toolbar-item.e-selected');
-                let xDiff;
-                let yDiff;
+                this.isCancelAction = true;
+                this.cropObj = extend({}, obj.currentCropObj, {}, true);
+                this.afterCropActions = obj.currentObj.afterCropActions;
+                this.lowerContext.filter = this.canvasFilter = obj.currentObj.filter;
+                let activeObj;
                 let tempUndoRedoColl;
                 let tempUndoRedoStep;
-                let value = '';
-                let currObj;
                 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);
@@ -12329,15 +12586,7 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends Component {
                         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);
@@ -12346,38 +12595,57 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends Component {
                         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 (let 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 (let 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 (let 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();
@@ -12385,39 +12653,49 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends Component {
                         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');
+                }
             }
         }
     }