@syncfusion/ej2-image-editor 23.2.7 → 24.1.43

package/src/image-editor/action/undo-redo.d.ts

@@ -10,6 +10,7 @@ export declare class UndoRedo {
     private tempUndoRedoColl;
     private tempUndoRedoStep;
     private tempActObj;
+    private isPreventing;
     constructor(parent: ImageEditor);
     destroy(): void;
     private addEventListener;
@@ -41,4 +42,5 @@ export declare class UndoRedo {
     private updateUrObj;
     private updateUndoRedo;
     private getZeroZoomObjPointValue;
+    private applyImgTranform;
 }

package/src/image-editor/action/undo-redo.js

@@ -6,6 +6,7 @@ var UndoRedo = /** @class */ (function () {
         this.appliedUndoRedoColl = [];
         this.tempUndoRedoColl = [];
         this.tempUndoRedoStep = 0;
+        this.isPreventing = false;
         this.parent = parent;
         this.addEventListener();
     }
@@ -73,6 +74,9 @@ var UndoRedo = /** @class */ (function () {
             case 'undoDefault':
                 this.undoDefault(args.value['obj']);
                 break;
+            case 'setPreventUR':
+                this.isPreventing = args.value['bool'];
+                break;
             case 'reset':
                 this.reset();
                 break;
@@ -89,6 +93,7 @@ var UndoRedo = /** @class */ (function () {
         this.tempActObj = null;
         this.tempUndoRedoColl = [];
         this.tempUndoRedoStep = 0;
+        this.isPreventing = false;
     };
     UndoRedo.prototype.refreshUrc = function (refreshToolbar) {
         var parent = this.parent;
@@ -115,7 +120,7 @@ var UndoRedo = /** @class */ (function () {
     };
     UndoRedo.prototype.updateCurrUrc = function (type) {
         var parent = this.parent;
-        if (parent.isResize) {
+        if (parent.isResize || this.isPreventing) {
             return;
         }
         if (!isBlazor()) {
@@ -127,7 +132,10 @@ var UndoRedo = /** @class */ (function () {
                 extend([], this.tempUndoRedoColl, [], true) :
                 extend([], this.undoRedoColl, [], true);
             var prevObj = this.undoRedoColl[this.undoRedoColl.length - 1];
-            if (isNullOrUndefined(this.appliedUndoRedoColl[this.appliedUndoRedoColl.length - 1])) {
+            var appliedURColl = this.appliedUndoRedoColl[this.appliedUndoRedoColl.length - 1];
+            var prevTransform = prevObj ? extend({}, prevObj.previousObj, {}, true)
+                : null;
+            if (isNullOrUndefined(appliedURColl)) {
                 if (this.undoRedoColl[0]) {
                     prevObj.previousCropObj = collection[0].previousCropObj;
                     prevObj.previousObj = collection[0].previousObj;
@@ -137,17 +145,27 @@ var UndoRedo = /** @class */ (function () {
                 }
             }
             else if (prevObj.operation !== 'imageHFlip' && prevObj.operation !== 'imageVFlip') {
-                prevObj.previousCropObj = this.appliedUndoRedoColl[this.appliedUndoRedoColl.length - 1].currentCropObj;
-                prevObj.previousObj = this.appliedUndoRedoColl[this.appliedUndoRedoColl.length - 1].currentObj;
-                prevObj.previousObjColl = this.appliedUndoRedoColl[this.appliedUndoRedoColl.length - 1].currentObjColl;
-                prevObj.previousPointColl = this.appliedUndoRedoColl[this.appliedUndoRedoColl.length - 1].currentPointColl;
-                prevObj.previousText = this.appliedUndoRedoColl[this.appliedUndoRedoColl.length - 1].currentText;
+                prevObj.previousCropObj = appliedURColl.currentCropObj;
+                prevObj.previousObj = appliedURColl.currentObj;
+                prevObj.previousObjColl = appliedURColl.currentObjColl;
+                prevObj.previousPointColl = appliedURColl.currentPointColl;
+                prevObj.previousText = appliedURColl.currentText;
+                if (prevObj.operation === 'frame' && prevObj.previousObj && prevTransform) {
+                    prevObj.previousObj.defaultZoom = prevTransform.defaultZoom;
+                    prevObj.previousObj.zoomFactor = prevTransform.zoomFactor;
+                    prevObj.previousObj.cropZoom = prevTransform.cropZoom;
+                }
             }
             if (prevObj) {
                 if (prevObj.operation !== 'imageHFlip' && prevObj.operation !== 'imageVFlip') {
                     var obj = this.getZeroZoomObjPointValue(prevObj.currentObjColl, prevObj.currentPointColl);
                     prevObj.currentObjColl = obj['obj'];
                     prevObj.currentPointColl = obj['point'];
+                    var adjObj = { adjustmentLevel: null };
+                    parent.notify('filter', { prop: 'getAdjustmentLevel', onPropertyChange: false, value: { obj: adjObj } });
+                    prevObj.currentObj.adjustmentLevel = extend({}, adjObj['adjustmentLevel'], {}, true);
+                    parent.notify('filter', { prop: 'setTempAdjVal' });
+                    prevObj.currentObj.currentFilter = parent.currentFilter;
                 }
                 this.appliedUndoRedoColl.push(prevObj);
             }
@@ -274,7 +292,8 @@ var UndoRedo = /** @class */ (function () {
                 else {
                     parent.currObjType.isUndoAction = true;
                 }
-                if (obj.operation !== 'textAreaCustomization' && parent.textArea.style.display === 'block') {
+                if (obj.operation !== 'textAreaCustomization' &&
+                    (parent.textArea.style.display === 'block' || parent.textArea.style.display === 'inline-block')) {
                     parent.textArea.style.display = 'none';
                 }
                 parent.notify('draw', { prop: 'setCancelAction', onPropertyChange: false, value: { bool: true } });
@@ -282,7 +301,13 @@ var UndoRedo = /** @class */ (function () {
                 parent.cropObj = extend({}, obj.previousCropObj, {}, true);
                 parent.afterCropActions = obj.previousObj.afterCropActions;
                 this.lowerContext.filter = obj.previousObj.filter;
+                parent.notify('filter', { prop: 'setAdjustmentLevel', onPropertyChange: false, value: { adjustmentLevel: obj.previousObj.adjustmentLevel } });
+                parent.notify('filter', { prop: 'setTempAdjVal' });
+                parent.currentFilter = obj.previousObj.currentFilter;
+                parent.notify('filter', { prop: 'setTempFilVal' });
                 parent.canvasFilter = this.lowerContext.filter;
+                parent.initialAdjustmentValue = this.lowerContext.filter;
+                parent.notify('filter', { prop: 'setBevelFilter', onPropertyChange: false, value: { bevelFilter: this.lowerContext.filter } });
                 switch (obj.operation) {
                     case 'shapeTransform':
                     case 'brightness':
@@ -301,6 +326,7 @@ var UndoRedo = /** @class */ (function () {
                     case 'sepia':
                     case 'invert':
                     case 'sharpen':
+                    case 'imageRotate':
                         this.shapeTransform(obj.previousObjColl);
                         break;
                     case 'freehanddraw':
@@ -312,9 +338,10 @@ var UndoRedo = /** @class */ (function () {
                         break;
                     case 'deleteFreehandDrawing':
                     case 'deleteObj':
-                        this.updateDelete(obj.operation, obj.previousObjColl, obj.previousPointColl);
+                        this.updateDelete(obj.operation, obj.previousObjColl, obj.previousPointColl, obj.previousSelPointColl);
                         break;
                     case 'textAreaCustomization':
+                        this.shapeTransform(obj.previousObjColl);
                         this.updateTextAreaCustomization(activeObj, obj.previousObjColl);
                         break;
                     case 'text':
@@ -335,7 +362,7 @@ var UndoRedo = /** @class */ (function () {
                         this.imageFlip('vertical', obj.previousObjColl);
                         break;
                     default:
-                        this.undoDefault(obj);
+                        this.undoDefault(obj, true);
                         parent.notify('filter', { prop: 'set-adjustment', value: { operation: obj.operation } });
                         parent.notify('filter', { prop: 'update-filter', value: { operation: obj.operation, filter: obj.filter } });
                         break;
@@ -357,6 +384,12 @@ var UndoRedo = /** @class */ (function () {
                     }
                     parent.notify('draw', { prop: 'performCancel', value: { isContextualToolbar: null } });
                     parent.currObjType.isActiveObj = false;
+                    if (parent.transform.straighten !== 0) {
+                        parent.notify('draw', { prop: 'setStraightenActObj', value: { activeObj: null } });
+                    }
+                }
+                else if (obj.operation === 'resize' && parent.cropObj && parent.cropObj.activeObj) {
+                    parent.currSelectionPoint = extend({}, parent.cropObj.activeObj, {}, true);
                 }
                 if ((this.undoRedoColl[this.undoRedoStep - 1]
                     && this.undoRedoColl[this.undoRedoStep - 1].isCircleCrop)) {
@@ -389,7 +422,8 @@ var UndoRedo = /** @class */ (function () {
                 else {
                     parent.currObjType.isUndoAction = true;
                 }
-                if (obj.operation !== 'textAreaCustomization' && parent.textArea.style.display === 'block') {
+                if (obj.operation !== 'textAreaCustomization' &&
+                    (parent.textArea.style.display === 'block' || parent.textArea.style.display === 'inline-block')) {
                     parent.textArea.style.display = 'none';
                 }
                 parent.notify('draw', { prop: 'setCancelAction', onPropertyChange: false, value: { bool: true } });
@@ -399,7 +433,13 @@ var UndoRedo = /** @class */ (function () {
                 if (!isBlazor() && parent.element.querySelector('.e-contextual-toolbar-wrapper')) {
                     parent.element.querySelector('.e-contextual-toolbar-wrapper').classList.add('e-hide');
                 }
+                parent.notify('filter', { prop: 'setAdjustmentLevel', onPropertyChange: false, value: { adjustmentLevel: obj.currentObj.adjustmentLevel } });
+                parent.notify('filter', { prop: 'setTempAdjVal' });
+                parent.currentFilter = obj.currentObj.currentFilter;
+                parent.notify('filter', { prop: 'setTempFilVal' });
                 parent.canvasFilter = this.lowerContext.filter;
+                parent.initialAdjustmentValue = this.lowerContext.filter;
+                parent.notify('filter', { prop: 'setBevelFilter', onPropertyChange: false, value: { bevelFilter: this.lowerContext.filter } });
                 var activeObj = void 0;
                 switch (obj.operation) {
                     case 'shapeTransform':
@@ -419,6 +459,7 @@ var UndoRedo = /** @class */ (function () {
                     case 'sepia':
                     case 'invert':
                     case 'sharpen':
+                    case 'imageRotate':
                         this.shapeTransform(obj.currentObjColl);
                         break;
                     case 'freehanddraw':
@@ -430,9 +471,10 @@ var UndoRedo = /** @class */ (function () {
                         break;
                     case 'deleteFreehandDrawing':
                     case 'deleteObj':
-                        this.updateDelete(obj.operation, obj.currentObjColl, obj.currentPointColl);
+                        this.updateDelete(obj.operation, obj.currentObjColl, obj.currentPointColl, obj.currentSelPointColl);
                         break;
                     case 'textAreaCustomization':
+                        this.shapeTransform(obj.currentObjColl);
                         this.updateTextAreaCustomization(activeObj, obj.currentObjColl);
                         break;
                     case 'text':
@@ -454,7 +496,7 @@ var UndoRedo = /** @class */ (function () {
                         parent.freehandCounter = 0;
                         parent.notify('freehand-draw', { prop: 'setSelPointColl', onPropertyChange: false,
                             value: { obj: { selPointColl: [] } } });
-                        parent.notify('draw', { prop: 'setCurrentObj', onPropertyChange: false, value: { obj: obj.currentObj } });
+                        parent.notify('draw', { prop: 'setCurrentObj', onPropertyChange: false, value: { obj: obj.currentObj, isUndoRedo: true } });
                         parent.img.destLeft = obj.currentObj.destPoints.startX;
                         parent.img.destTop = obj.currentObj.destPoints.startY;
                         activeObj = extend({}, parent.activeObj, {}, true);
@@ -463,10 +505,12 @@ var UndoRedo = /** @class */ (function () {
                         parent.freehandCounter = parent.pointColl.length;
                         parent.notify('freehand-draw', { prop: 'setSelPointColl', onPropertyChange: false,
                             value: { obj: { selPointColl: extend([], obj.currentSelPointColl, [], true) } } });
+                        parent.transform.straighten = 0;
                         this.lowerContext.filter = 'none';
                         parent.notify('shape', { prop: 'zoomObjColl', onPropertyChange: false, value: { isPreventApply: null } });
                         parent.notify('freehand-draw', { prop: 'zoomFHDColl', onPropertyChange: false, value: { isPreventApply: null } });
                         this.lowerContext.filter = obj.currentObj.filter;
+                        parent.prevStraightenedDegree = parent.transform.straighten;
                         parent.activeObj = activeObj;
                         this.upperContext.clearRect(0, 0, parent.upperCanvas.width, parent.upperCanvas.height);
                         if (parent.activeObj.activePoint.width !== 0 && parent.activeObj.activePoint.height !== 0) {
@@ -486,28 +530,33 @@ var UndoRedo = /** @class */ (function () {
                 }
                 if (obj.operation === 'crop' && obj.currentObj.currSelectionPoint) {
                     parent.currSelectionPoint = extend({}, obj.currentObj.currSelectionPoint, {}, true);
+                    parent.notify('draw', { prop: 'setStraightenActObj', value: { activeObj: parent.currSelectionPoint } });
                 }
                 if (parent.currSelectionPoint && isNullOrUndefined(parent.currSelectionPoint.shape)) {
                     parent.currSelectionPoint = null;
                 }
+                if (obj.operation === 'resize' && parent.cropObj && parent.cropObj.activeObj) {
+                    parent.currSelectionPoint = extend({}, parent.cropObj.activeObj, {}, true);
+                }
                 this.endUndoRedo(obj.operation, false);
             }
         }
     };
     UndoRedo.prototype.imageFlip = function (type, objColl) {
         var parent = this.parent;
-        parent.objColl = extend([], objColl, [], true);
+        this.shapeTransform(objColl);
         parent.activeObj = extend({}, parent.objColl[parent.objColl.length - 1], {}, true);
+        var _a = parent.activeObj, shape = _a.shape, isHorImageFlip = _a.isHorImageFlip, isVerImageFlip = _a.isVerImageFlip;
         parent.objColl.pop();
-        if (parent.activeObj.shape && parent.activeObj.shape === 'image') {
+        if (shape && shape === 'image') {
             if (type === 'horizontal') {
-                if (isNullOrUndefined(parent.activeObj.isHorImageFlip) && parent.activeObj.isVerImageFlip) {
+                if (isNullOrUndefined(isHorImageFlip) && isVerImageFlip) {
                     parent.activeObj.isHorImageFlip = true;
                     parent.activeObj.isVerImageFlip = null;
                     parent.horizontalFlip(this.upperContext, true);
                 }
                 else {
-                    if (isNullOrUndefined(parent.activeObj.isHorImageFlip) || !parent.activeObj.isHorImageFlip) {
+                    if (isNullOrUndefined(isHorImageFlip) || !isHorImageFlip) {
                         parent.activeObj.isHorImageFlip = true;
                     }
                     else {
@@ -517,13 +566,13 @@ var UndoRedo = /** @class */ (function () {
                 }
             }
             else if (type === 'vertical') {
-                if (isNullOrUndefined(parent.activeObj.isVerImageFlip) && parent.activeObj.isHorImageFlip) {
+                if (isNullOrUndefined(isVerImageFlip) && isHorImageFlip) {
                     parent.activeObj.isVerImageFlip = true;
                     parent.activeObj.isHorImageFlip = null;
                     parent.verticalFlip(this.upperContext, true);
                 }
                 else {
-                    if (isNullOrUndefined(parent.activeObj.isVerImageFlip) || !parent.activeObj.isVerImageFlip) {
+                    if (isNullOrUndefined(isVerImageFlip) || !isVerImageFlip) {
                         parent.activeObj.isVerImageFlip = true;
                     }
                     else {
@@ -569,11 +618,13 @@ var UndoRedo = /** @class */ (function () {
         parent.isUndoRedo = true;
         parent.notify('draw', { prop: 'redrawImgWithObj', onPropertyChange: false });
     };
-    UndoRedo.prototype.updateDelete = function (operation, objColl, pointColl) {
+    UndoRedo.prototype.updateDelete = function (operation, objColl, pointColl, selPointColl) {
         var parent = this.parent;
         if (operation === 'deleteFreehandDrawing') {
             parent.pointColl = pointColl;
             parent.freehandCounter = parent.pointColl.length;
+            parent.notify('freehand-draw', { prop: 'setSelPointColl', onPropertyChange: false,
+                value: { obj: { selPointColl: selPointColl } } });
             parent.notify('freehand-draw', { prop: 'zoomFHDColl', onPropertyChange: false, value: { isPreventApply: null } });
         }
         else if (operation === 'deleteObj') {
@@ -609,7 +660,7 @@ var UndoRedo = /** @class */ (function () {
         if (activeObj) {
             this.updateTextBox(activeObj);
         }
-        if (parent.textArea.style.display === 'block') {
+        if (parent.textArea.style.display === 'block' || parent.textArea.style.display === 'inline-block') {
             parent.notify('shape', { prop: 'redrawActObj', onPropertyChange: false,
                 value: { x: null, y: null, isMouseDown: null } });
         }
@@ -623,7 +674,7 @@ var UndoRedo = /** @class */ (function () {
             this.tempActObj = extend({}, parent.objColl[0], {}, true);
         }
         else {
-            for (var i = 0; i < parent.objColl.length; i++) {
+            for (var i = 0, iLen = parent.objColl.length; i < iLen; i++) {
                 if (parent.objColl[i] && isNullOrUndefined(objColl[i])) {
                     this.tempActObj = extend({}, parent.objColl[i], {}, true);
                     break;
@@ -656,20 +707,21 @@ var UndoRedo = /** @class */ (function () {
         else {
             parent.updateToolbar(parent.element, 'destroyQuickAccessToolbar');
         }
-        parent.textArea.style.display = 'block';
-        parent.textArea.style.fontFamily = obj.textSettings.fontFamily;
-        parent.textArea.style.fontSize = obj.textSettings.fontSize + 'px';
-        parent.textArea.style.color = obj.strokeSettings.strokeColor;
-        parent.textArea.style.fontWeight = obj.textSettings.bold ? 'bold' : 'normal';
-        parent.textArea.style.fontStyle = obj.textSettings.italic ? 'italic' : 'normal';
-        parent.textArea.style.border = '2px solid ' + parent.themeColl[parent.theme]['primaryColor'];
-        parent.textArea.value = obj.keyHistory;
+        var textArea = parent.textArea;
+        textArea.style.display = 'block';
+        textArea.style.fontFamily = obj.textSettings.fontFamily;
+        textArea.style.fontSize = obj.textSettings.fontSize + 'px';
+        textArea.style.color = obj.strokeSettings.strokeColor;
+        textArea.style.fontWeight = obj.textSettings.bold ? 'bold' : 'normal';
+        textArea.style.fontStyle = obj.textSettings.italic ? 'italic' : 'normal';
+        textArea.style.border = '2px solid ' + parent.themeColl[parent.theme]['primaryColor'];
+        textArea.value = obj.keyHistory;
         parent.activeObj = extend({}, obj, {}, true);
         parent.notify('shape', { prop: 'updateFontStyles', onPropertyChange: false,
             value: { isTextBox: null } });
         parent.textArea.style.width = parent.activeObj.activePoint.width + 'px';
     };
-    UndoRedo.prototype.undoDefault = function (obj) {
+    UndoRedo.prototype.undoDefault = function (obj, isUndoRedo) {
         this.lowerContext.filter = obj.previousObj.filter;
         var parent = this.parent;
         parent.objColl = [];
@@ -677,7 +729,8 @@ var UndoRedo = /** @class */ (function () {
         parent.freehandCounter = 0;
         parent.notify('freehand-draw', { prop: 'setSelPointColl', onPropertyChange: false,
             value: { obj: { selPointColl: [] } } });
-        parent.notify('draw', { prop: 'setCurrentObj', onPropertyChange: false, value: { obj: obj.previousObj } });
+        parent.notify('draw', { prop: 'setCurrentObj', onPropertyChange: false, value: { obj: obj.previousObj, isUndoRedo: isUndoRedo } });
+        parent.prevStraightenedDegree = parent.transform.straighten;
         this.upperContext.clearRect(0, 0, parent.upperCanvas.width, parent.upperCanvas.height);
         parent.notify('shape', { prop: 'refreshActiveObj', onPropertyChange: false });
         parent.img.destLeft = obj.previousObj.destPoints.startX;
@@ -688,6 +741,7 @@ var UndoRedo = /** @class */ (function () {
         parent.freehandCounter = parent.pointColl.length;
         parent.notify('freehand-draw', { prop: 'setSelPointColl', onPropertyChange: false,
             value: { obj: { selPointColl: extend([], obj.previousSelPointColl, [], true) } } });
+        parent.transform.straighten = 0;
         this.lowerContext.filter = 'none';
         parent.notify('shape', { prop: 'zoomObjColl', onPropertyChange: false, value: { isPreventApply: null } });
         parent.notify('freehand-draw', { prop: 'zoomFHDColl', onPropertyChange: false, value: { isPreventApply: null } });
@@ -746,7 +800,7 @@ var UndoRedo = /** @class */ (function () {
     };
     UndoRedo.prototype.updateUrc = function (operation, previousObj, previousObjColl, previousPointColl, previousSelPointColl, previousCropObj, previousText, currentText, previousFilter, isCircleCrop) {
         var parent = this.parent;
-        if (parent.isResize) {
+        if (parent.isResize || this.isPreventing) {
             return;
         }
         var obj = { isInitialLoaded: false };
@@ -773,6 +827,23 @@ var UndoRedo = /** @class */ (function () {
                     width: parent.frameDestPoints.destWidth, height: parent.frameDestPoints.destHeight };
                 currentObj.destPoints = { startX: parent.frameDestPoints.destLeft, startY: parent.frameDestPoints.destTop,
                     width: parent.frameDestPoints.destWidth, height: parent.frameDestPoints.destHeight };
+                if (!isNullOrUndefined(parent.tempFrameZoomLevel)) {
+                    previousObj.defaultZoom = currentObj.defaultZoom = parent.tempFrameZoomLevel;
+                }
+            }
+            else if ((operation === 'imageHFlip' || operation === 'imageVFlip') && this.appliedUndoRedoColl.length > 0) {
+                var index = previousObjColl[previousObjColl.length - 1].currIndex;
+                previousObjColl = this.appliedUndoRedoColl[this.appliedUndoRedoColl.length - 1].currentObjColl;
+                if (index) {
+                    for (var i = 0, len = previousObjColl.length; i < len; i++) {
+                        if (previousObjColl[i].currIndex === index) {
+                            var actObj = extend({}, previousObjColl[i], {}, true);
+                            previousObjColl.splice(i, 1);
+                            previousObjColl.push(actObj);
+                            break;
+                        }
+                    }
+                }
             }
             this.undoRedoColl.push({ operation: operation, previousObj: previousObj, currentObj: currentObj,
                 previousObjColl: previousObjColl, currentObjColl: currentObj.objColl,
@@ -785,7 +856,11 @@ var UndoRedo = /** @class */ (function () {
                 /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
             }
             else if (parent.currentToolbar !== 'pen-toolbar') {
-                parent.updateToolbar(parent.element, 'enableDisableToolbarBtn');
+                var toolbarValue = null;
+                if (parent.currentToolbar === 'text-toolbar' && operation === 'textAreaCustomization') {
+                    toolbarValue = 'textAreaClicked';
+                }
+                parent.updateToolbar(parent.element, 'enableDisableToolbarBtn', toolbarValue);
             }
         }
     };
@@ -795,6 +870,9 @@ var UndoRedo = /** @class */ (function () {
             if (parent.currObjType.isUndoAction) {
                 this.refreshUrc(true);
             }
+            if (isNullOrUndefined(parent.activeObj.imageRatio)) {
+                parent.notify('shape', { prop: 'updImgRatioForActObj', onPropertyChange: false });
+            }
             parent.objColl.push(parent.activeObj);
             var cropObj = extend({}, parent.cropObj, {}, true);
             var object = { currObj: {} };
@@ -829,6 +907,9 @@ var UndoRedo = /** @class */ (function () {
         parent.notify('freehand-draw', { prop: 'getSelPointColl', onPropertyChange: false,
             value: { obj: selPointCollObj } });
         prevObj.selPointColl = extend([], selPointCollObj['selPointColl'], [], true);
+        if (isNullOrUndefined(parent.activeObj.imageRatio)) {
+            parent.notify('shape', { prop: 'updImgRatioForActObj', onPropertyChange: false });
+        }
         parent.objColl.push(parent.activeObj);
         this.updateUrc('shapeTransform', prevObj, prevObj.objColl, prevObj.pointColl, prevObj.selPointColl, prevCropObj);
         parent.objColl.pop();
@@ -867,9 +948,13 @@ var UndoRedo = /** @class */ (function () {
             parent.objColl = obj;
             parent.pointColl = point;
             var isUndoRedo = parent.isUndoRedo;
+            var isCropTab = parent.isCropTab;
             if (parent.transform.zoomFactor !== 0) {
-                parent.isUndoRedo = parent.isCropTab = true;
+                parent.isUndoRedo = true;
+                parent.notify('shape', { prop: 'zoomObjColl', onPropertyChange: false, value: { isPreventApply: true } });
+                parent.notify('freehand-draw', { prop: 'zoomFHDColl', onPropertyChange: false, value: { isPreventApply: true } });
                 parent.notify('freehand-draw', { prop: 'updateFHDColl', onPropertyChange: false });
+                parent.isCropTab = true;
                 var zoomSettings = extend({}, parent.zoomSettings, null, true);
                 if (parent.transform.zoomFactor > 0) {
                     parent.notify('transform', { prop: 'zoomAction', onPropertyChange: false,
@@ -880,7 +965,7 @@ var UndoRedo = /** @class */ (function () {
                         value: { zoomFactor: Math.abs(parent.transform.zoomFactor), zoomPoint: null, isResize: null } });
                 }
                 parent.zoomSettings = zoomSettings;
-                parent.isCropTab = false;
+                parent.isCropTab = isCropTab;
                 parent.isUndoRedo = isUndoRedo;
                 getZeroZoomObjColl = extend([], parent.objColl, [], true);
                 getZeroZoomPointColl = extend([], parent.pointColl, [], true);
@@ -908,6 +993,8 @@ var UndoRedo = /** @class */ (function () {
                 parent.notify('freehand-draw', { prop: 'setSelPointColl', onPropertyChange: false,
                     value: { obj: { selPointColl: extend([], currentObj.selPointColl, [], true) } } });
                 this.lowerContext.filter = 'none';
+                parent.transform.straighten = 0;
+                this.applyImgTranform();
                 parent.notify('shape', { prop: 'iterateObjColl', onPropertyChange: false });
                 parent.notify('freehand-draw', { prop: 'freehandRedraw', onPropertyChange: false,
                     value: { context: this.lowerContext, points: null } });
@@ -926,6 +1013,20 @@ var UndoRedo = /** @class */ (function () {
         }
         return { obj: getZeroZoomObjColl, point: getZeroZoomPointColl };
     };
+    UndoRedo.prototype.applyImgTranform = function () {
+        var parent = this.parent;
+        var obj = extend({}, parent.activeObj, {}, true);
+        for (var i = 0, len = parent.objColl.length; i < len; i++) {
+            if (parent.objColl[i].shape === 'image') {
+                parent.activeObj = extend({}, parent.objColl[i], {}, true);
+                var ctx = parent.objColl[i].imageCanvas.getContext('2d');
+                parent.notify('selection', { prop: 'applyTransformToImg', onPropertyChange: false, value: { ctx: ctx } });
+                this.upperContext.clearRect(0, 0, parent.upperCanvas.width, parent.upperCanvas.height);
+                parent.notify('selection', { prop: 'setImageClarity', onPropertyChange: false, value: { bool: true } });
+            }
+        }
+        parent.activeObj = obj;
+    };
     return UndoRedo;
 }());
 export { UndoRedo };

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

@@ -149,7 +149,8 @@ export declare enum ImageEditorCommand {
     Warm = "Warm",
     Grayscale = "Grayscale",
     Sepia = "Sepia",
-    Invert = "Invert"
+    Invert = "Invert",
+    Straightening = "Straightening"
 }
 /**
  * An enumeration of available image filter options.

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

@@ -156,6 +156,7 @@ export var ImageEditorCommand;
     ImageEditorCommand["Grayscale"] = "Grayscale";
     ImageEditorCommand["Sepia"] = "Sepia";
     ImageEditorCommand["Invert"] = "Invert";
+    ImageEditorCommand["Straightening"] = "Straightening";
 })(ImageEditorCommand || (ImageEditorCommand = {}));
 /**
  * An enumeration of available image filter options.

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

@@ -191,6 +191,27 @@ export interface SelectionSettingsModel {
 
 }
 
+/**
+ * Interface for a class FontFamily
+ */
+export interface FontFamilyModel {
+
+    /**
+     * Specifies default font family selection
+     *
+     * @default 'Arial'
+     */
+    default?: string;
+
+    /**
+     * Specifies default font family items
+     *
+     * @default null
+     */
+    items?: DropDownButtonItemModel[];
+
+}
+
 /**
  * Interface for a class ImageEditor
  */
@@ -457,6 +478,11 @@ export interface ImageEditorModel extends ComponentModel{
      */
     selectionSettings?: SelectionSettingsModel;
 
+    /**
+     * Predefine the font families that populate in font family dropdown list from the toolbar.
+     */
+    fontFamily?: FontFamilyModel;
+
     /**
      * Event callback that is raised before an image is saved.
      *
@@ -586,6 +612,15 @@ export interface ImageEditorModel extends ComponentModel{
      */
     click?: EmitType<ImageEditorClickEventArgs>
 
+    /**
+     * Event callback that is raised after shape changing action is performed in an image editor. 
+     * @remarks 
+     * This event is triggered after changing stroke color, fill Color, and stroke width property for the shapes and after the shape is applied to the canvas while clicking the OK button in toolbar.
+     *
+     * @event shapeChange
+     */
+    shapeChange?: EmitType<ShapeChangeEventArgs>
+
     /**
      * Event callback that is raised when opening the quick access toolbar.
      *
@@ -631,10 +666,10 @@ export interface ImageEditorModel extends ComponentModel{
     quickAccessToolbarItemClick?: EmitType<ClickEventArgs>
 
     /**
-     *  Event callback that is raised while applying frames on an image. 
+     *  Event callback that is raised while applying frames on an image.
      *
      * @event frameChange
-     */ 
+     */
     frameChange?: EmitType<FrameChangeEventArgs>
 
 }