@syncfusion/ej2-image-editor 23.2.7 → 24.1.43

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

@@ -98,9 +98,6 @@ var Transform = /** @class */ (function () {
             case 'calcMaxDimension':
                 this.calcMaxDimension(args.value['width'], args.value['height'], args.value['obj'], args.value['isImgShape']);
                 break;
-            case 'updatePanPoints':
-                this.updatePanPoints(args.value['panRegion'], args.value['obj']);
-                break;
             case 'getPanMove':
                 args.value['obj']['panMove'] = this.panMove;
                 break;
@@ -167,12 +164,18 @@ var Transform = /** @class */ (function () {
             case 'resize':
                 this.resize(args.value['width'], args.value['height'], args.value['isAspectRatio']);
                 break;
-            case 'setResizedImgAngle':
-                this.resizedImgAngle = args.value['angle'];
+            case 'straightenImage':
+                this.straightenImage(args.value['degree']);
                 break;
             case 'reset':
                 this.reset();
                 break;
+            case 'cropZoom':
+                args.value['obj']['maxDimension'] = this.cropZoom(args.value['value'], args.value['selectionObj']);
+                break;
+            case 'setResizedImgAngle':
+                this.resizedImgAngle = args.value['angle'];
+                break;
         }
     };
     Transform.prototype.getModuleName = function () {
@@ -206,7 +209,7 @@ var Transform = /** @class */ (function () {
             currentDegree: Math.abs(parent.transform.degree + degree) === 360 ? 0 : parent.transform.degree + degree };
         if (!this.isPreventSelect && isBlazor() && parent.events && parent.events.rotating.hasDelegate === true) {
             /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
-            parent.dotNetRef.invokeMethodAsync('RotateEventAsync', 'OnRotate', transitionArgs).then(function (args) {
+            parent.dotNetRef.invokeMethodAsync('RotateEventAsync', 'OnRotate', transitionArgs, null).then(function (args) {
                 _this.rotateEvent(args, degree);
             });
         }
@@ -229,8 +232,7 @@ var Transform = /** @class */ (function () {
                 prevObj.pointColl = extend({}, parent.pointColl, null, true);
                 prevObj.afterCropActions = extend([], parent.afterCropActions, [], true);
                 var selPointCollObj = { selPointColl: null };
-                parent.notify('freehand-draw', { prop: 'getSelPointColl', onPropertyChange: false,
-                    value: { obj: selPointCollObj } });
+                parent.notify('freehand-draw', { prop: 'getSelPointColl', onPropertyChange: false, value: { obj: selPointCollObj } });
                 prevObj.selPointColl = extend([], selPointCollObj['selPointColl'], [], true);
             }
             parent.afterCropActions.push(degree === 90 ? 'rotateRight' : 'rotateLeft');
@@ -270,6 +272,7 @@ var Transform = /** @class */ (function () {
                 value: { collection: parent.rotateFlipColl, isRotateFlipCollection: true, obj: obj } });
             parent.rotateFlipColl = obj['collection'];
             if (parent.cropObj.activeObj.shape && !this.isPreventSelect) {
+                parent.notify('draw', { prop: 'setIsCropSelect', value: { bool: true } });
                 this.isPreventSelect = true;
                 parent.notify('draw', { prop: 'select', onPropertyChange: false,
                     value: { type: 'custom', startX: null, startY: null, width: null, height: null } });
@@ -277,6 +280,21 @@ var Transform = /** @class */ (function () {
                 parent.setProperties({ zoomSettings: { zoomFactor: 1 } }, true);
                 this.prevZoomValue = parent.zoomSettings.zoomFactor;
             }
+            transitionArgs = { previousDegree: transitionArgs.previousDegree, currentDegree: transitionArgs.currentDegree };
+            if (!this.isPreventSelect && isBlazor() && parent.events && parent.events.rotated.hasDelegate === true) {
+                var rotatedArgs = { degree: transitionArgs.currentDegree };
+                parent.dotNetRef.invokeMethodAsync('RotateEventAsync', 'Rotated', null, rotatedArgs);
+            }
+            else if (!this.isPreventSelect) { }
+            if (isBlazor() && parent.events && parent.events.rotating.hasDelegate === true) {
+                parent.notify('draw', { prop: 'resetStraightenDestPoints' });
+                parent.notify('draw', { prop: 'setDestForStraighten' });
+            }
+        }
+        else {
+            parent.notify('draw', { prop: 'setCurrentObj', onPropertyChange: false, value: { obj: parent.prevEventObjPoint } });
+            parent.activeObj = parent.prevEventSelectionPoint;
+            parent.notify('draw', { prop: 'drawObject', onPropertyChange: false, value: { canvas: 'duplicate', obj: parent.activeObj } });
         }
     };
     Transform.prototype.drawRotatedImage = function (degree) {
@@ -356,14 +374,9 @@ var Transform = /** @class */ (function () {
                 parent.notify('shape', { prop: 'updImgRatioForActObj', onPropertyChange: false });
                 parent.objColl[0] = parent.activeObj;
             }
-            parent.img.srcLeft = 0;
-            parent.img.srcTop = 0;
-            parent.img.srcWidth = parent.baseImgCanvas.width;
-            parent.img.srcHeight = parent.baseImgCanvas.height;
-            parent.img.destLeft = this.currDestPoint.startX;
-            parent.img.destTop = this.currDestPoint.startY;
-            parent.img.destWidth = this.currDestPoint.width;
-            parent.img.destHeight = this.currDestPoint.height;
+            parent.img = { srcLeft: 0, srcTop: 0, srcWidth: parent.baseImgCanvas.width, srcHeight: parent.baseImgCanvas.height,
+                destLeft: this.currDestPoint.startX, destTop: this.currDestPoint.startY, destWidth: this.currDestPoint.width,
+                destHeight: this.currDestPoint.height };
             if (typeof (degree) === 'number') {
                 parent.notify('draw', { prop: 'setDestPoints', onPropertyChange: false });
                 parent.notify('draw', { prop: 'setClientTransDim', onPropertyChange: false,
@@ -375,14 +388,8 @@ var Transform = /** @class */ (function () {
                 height: parent.img.destHeight };
             parent.objColl = objColl;
             parent.activeObj = activeObj;
-            parent.img.srcLeft = srcPoints.startX;
-            parent.img.srcTop = srcPoints.startY;
-            parent.img.srcWidth = srcPoints.width;
-            parent.img.srcHeight = srcPoints.height;
-            parent.img.destLeft = destPoints.startX;
-            parent.img.destTop = destPoints.startY;
-            parent.img.destWidth = destPoints.width;
-            parent.img.destHeight = destPoints.height;
+            parent.img = { srcLeft: srcPoints.startX, srcTop: srcPoints.startY, srcWidth: srcPoints.width, srcHeight: srcPoints.height,
+                destLeft: destPoints.startX, destTop: destPoints.startY, destWidth: destPoints.width, destHeight: destPoints.height };
         }
     };
     Transform.prototype.flipImage = function (direction) {
@@ -392,7 +399,7 @@ var Transform = /** @class */ (function () {
             previousDirection: parent.toPascalCase(parent.transform.currFlipState || direction) };
         if (!this.isPreventSelect && isBlazor() && parent.events && parent.events.flipping.hasDelegate === true) {
             /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
-            parent.dotNetRef.invokeMethodAsync('FlipEventAsync', 'OnFlip', transitionArgs).then(function (args) {
+            parent.dotNetRef.invokeMethodAsync('FlipEventAsync', 'OnFlip', transitionArgs, null).then(function (args) {
                 _this.flipEvent(args, direction);
             });
         }
@@ -406,6 +413,9 @@ var Transform = /** @class */ (function () {
     Transform.prototype.flipEvent = function (transitionArgs, direction) {
         var parent = this.parent;
         if (transitionArgs.cancel) {
+            parent.notify('draw', { prop: 'setCurrentObj', onPropertyChange: false, value: { obj: parent.prevEventObjPoint } });
+            parent.activeObj = parent.prevEventSelectionPoint;
+            parent.notify('draw', { prop: 'drawObject', onPropertyChange: false, value: { canvas: 'duplicate', obj: parent.activeObj } });
             return;
         }
         var prevObj;
@@ -449,12 +459,9 @@ var Transform = /** @class */ (function () {
         }
         var lowercaseDirection = direction.toLowerCase();
         this.updateFlipState(lowercaseDirection);
-        if (lowercaseDirection === 'horizontal') {
-            parent.transform.currFlipState = (parent.transform.currFlipState.toLowerCase() === 'horizontal') ? '' : 'horizontal';
-        }
-        else {
-            parent.transform.currFlipState = (parent.transform.currFlipState.toLowerCase() === 'vertical') ? '' : 'vertical';
-        }
+        var flipState = parent.transform.currFlipState.toLowerCase();
+        parent.transform.currFlipState = (lowercaseDirection === 'horizontal' && flipState === 'horizontal') ||
+            (lowercaseDirection === 'vertical' && flipState === 'vertical') ? '' : lowercaseDirection;
         var selObj = { isSelected: null };
         parent.notify('draw', { prop: 'getRotatedFlipCropSelection', onPropertyChange: false, value: { bool: selObj } });
         if (selObj['isSelected']) {
@@ -507,9 +514,10 @@ var Transform = /** @class */ (function () {
         this.lowerContext.filter = 'brightness(' + 1 + ') ' + 'contrast(' + 100 + '%) ' + 'hue-rotate(' + 0 + 'deg) ' +
             'saturate(' + 100 + '%) ' + 'opacity(' + 1 + ') ' + 'blur(' + 0 + 'px) ' + 'sepia(0%) ' + 'grayscale(0%) ' + 'invert(0%)';
         parent.notify('shape', { prop: 'iterateObjColl', onPropertyChange: false });
-        if (direction.toLowerCase() === 'horizontal' || direction.toLowerCase() === 'vertical') {
+        var dir = direction.toLowerCase();
+        if (dir === 'horizontal' || dir === 'vertical') {
             parent.notify('freehand-draw', { prop: 'flipFHDColl', onPropertyChange: false,
-                value: { value: direction.toLowerCase() } });
+                value: { value: dir } });
             parent.notify('freehand-draw', { prop: 'freehandRedraw', onPropertyChange: false,
                 value: { context: this.lowerContext, points: null } });
         }
@@ -519,7 +527,7 @@ var Transform = /** @class */ (function () {
         }
         this.lowerContext.filter = tempFilter;
         parent.notify('shape', { prop: 'refreshActiveObj', onPropertyChange: false });
-        this.updateCurrSelectionPoint(direction.toLowerCase());
+        this.updateCurrSelectionPoint(dir);
         parent.isUndoRedo = false;
         parent.notify('draw', { prop: 'clearOuterCanvas', onPropertyChange: false, value: { context: this.lowerContext } });
         parent.notify('draw', { prop: 'clearOuterCanvas', onPropertyChange: false, value: { context: this.upperContext } });
@@ -538,6 +546,7 @@ var Transform = /** @class */ (function () {
             value: { collection: parent.rotateFlipColl, isRotateFlipCollection: true, obj: obj } });
         parent.rotateFlipColl = obj['collection'];
         if (parent.cropObj.activeObj.shape && !this.isPreventSelect) {
+            parent.notify('draw', { prop: 'setIsCropSelect', value: { bool: true } });
             this.isPreventSelect = true;
             parent.notify('draw', { prop: 'select', onPropertyChange: false,
                 value: { type: 'custom', startX: null, startY: null, width: null, height: null } });
@@ -545,6 +554,12 @@ var Transform = /** @class */ (function () {
             parent.setProperties({ zoomSettings: { zoomFactor: 1 } }, true);
             this.prevZoomValue = parent.zoomSettings.zoomFactor;
         }
+        transitionArgs = { previousDirection: transitionArgs.previousDirection, direction: transitionArgs.direction };
+        if (!this.isPreventSelect && isBlazor() && parent.events && parent.events.flipped.hasDelegate === true) {
+            var flipped = { direction: transitionArgs.direction };
+            parent.dotNetRef.invokeMethodAsync('FlipEventAsync', 'Flipped', null, flipped);
+        }
+        else { }
     };
     Transform.prototype.updateFlipState = function (direction) {
         var degree = this.parent.transform.degree;
@@ -600,22 +615,24 @@ var Transform = /** @class */ (function () {
     Transform.prototype.setDestPointsForFlipState = function () {
         var parent = this.parent;
         var panObj = { panRegion: '' };
+        var _a = parent.img, destLeft = _a.destLeft, destTop = _a.destTop, destWidth = _a.destWidth, destHeight = _a.destHeight;
+        var _b = parent.lowerCanvas, clientWidth = _b.clientWidth, clientHeight = _b.clientHeight;
         parent.notify('crop', { prop: 'getCurrFlipState', onPropertyChange: false,
             value: { panObj: panObj } });
         if (panObj['panRegion'] !== '') {
             if (panObj['panRegion'] === 'horizontal') {
-                parent.img.destLeft = parent.lowerCanvas.clientWidth - (parent.img.destWidth + parent.img.destLeft);
+                parent.img.destLeft = clientWidth - (destWidth + destLeft);
             }
             else if (panObj['panRegion'] === 'vertical') {
-                parent.img.destTop = parent.lowerCanvas.clientHeight - (parent.img.destHeight + parent.img.destTop);
+                parent.img.destTop = clientHeight - (destHeight + destTop);
             }
             else {
-                parent.img.destLeft = parent.lowerCanvas.clientWidth - (parent.img.destWidth + parent.img.destLeft);
-                parent.img.destTop = parent.lowerCanvas.clientHeight - (parent.img.destHeight + parent.img.destTop);
+                parent.img.destLeft = clientWidth - (destWidth + destLeft);
+                parent.img.destTop = clientHeight - (destHeight + destTop);
             }
         }
     };
-    Transform.prototype.zoomAction = function (zoomFactor, zoomPoint, isResize) {
+    Transform.prototype.zoomAction = function (zoomFactor, zoomPoint, isResize, isPreventApply) {
         var _this = this;
         var parent = this.parent;
         if (!parent.disabled && parent.isImageLoaded) {
@@ -680,19 +697,18 @@ var Transform = /** @class */ (function () {
             var previousZoomFactor = parent.zoomSettings.zoomFactor - (zoomFactor * 10);
             var zoomEventArgs = { zoomPoint: zoomPoint, cancel: false, previousZoomFactor: previousZoomFactor,
                 currentZoomFactor: parent.zoomSettings.zoomFactor, zoomTrigger: obj['zoomType'] };
-            if (isBlazor() && !parent.isCropToolbar && parent.currentToolbar !== 'resize-toolbar' && parent.currentToolbar !== 'frame-toolbar'
-                && parent.events && parent.events.zooming.hasDelegate === true) {
+            if (!parent.isCropToolbar && isBlazor() && parent.isZoomBtnClick && parent.events && parent.events.zooming.hasDelegate === true) {
                 zoomEventArgs.zoomTrigger = parseInt(this.getZoomTriggerType(zoomEventArgs.zoomTrigger));
                 /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
-                parent.dotNetRef.invokeMethodAsync('ZoomEventAsync', 'OnZoom', zoomEventArgs).then(function (args) {
-                    _this.zoomEvent(args, zoomFactor);
+                parent.dotNetRef.invokeMethodAsync('ZoomEventAsync', 'OnZoom', zoomEventArgs, null).then(function (args) {
+                    _this.zoomEvent(args, zoomFactor, isPreventApply);
                 });
             }
             else {
-                if (!parent.isCropToolbar) {
+                if (!parent.isCropToolbar && parent.isZoomBtnClick) {
                     parent.trigger('zooming', zoomEventArgs);
                 }
-                this.zoomEvent(zoomEventArgs, zoomFactor);
+                this.zoomEvent(zoomEventArgs, zoomFactor, isPreventApply);
             }
         }
     };
@@ -708,29 +724,31 @@ var Transform = /** @class */ (function () {
                 return '8';
         }
     };
-    Transform.prototype.zoomEvent = function (zoomEventArgs, zoomFactor) {
+    Transform.prototype.zoomEvent = function (zoomEventArgs, zoomFact, isPreventApply) {
         var parent = this.parent;
+        var _a = parent.zoomSettings, zoomFactor = _a.zoomFactor, minZoomFactor = _a.minZoomFactor;
         if (zoomEventArgs.cancel) {
+            parent.isZoomBtnClick = false;
             return;
         }
         if (!isBlazor()) {
             parent.notify('toolbar', { prop: 'close-contextual-toolbar', onPropertyChange: false });
+            /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
         }
-        else if (parent.currentToolbar !== 'resize-toolbar' && parent.element.querySelector('.e-contextual-toolbar-wrapper') && !parent.element.querySelector('.e-contextual-toolbar-wrapper').classList.contains('e-hidden')) {
+        else if ((parent.currentToolbar !== 'resize-toolbar' && parent.currentToolbar !== 'crop-toolbar') && parent.element.querySelector('.e-contextual-toolbar-wrapper') && !parent.element.querySelector('.e-contextual-toolbar-wrapper').classList.contains('e-hidden')) {
             parent.updateToolbar(parent.element, 'closeContextualToolbar');
         }
         parent.notify('shape', { prop: 'redrawActObj', onPropertyChange: false,
             value: { x: null, y: null, isMouseDown: true } });
         parent.notify('shape', { prop: 'refreshActiveObj', onPropertyChange: false });
         this.upperContext.clearRect(0, 0, parent.lowerCanvas.width, parent.lowerCanvas.height);
-        var object = { canvasFilter: this.parent.canvasFilter };
+        var object = { canvasFilter: parent.canvasFilter };
         this.lowerContext.filter = object['canvasFilter'];
         parent.upperCanvas.style.cursor = parent.cursor = 'default';
         var objColl = extend([], parent.objColl, [], true);
         if (!parent.isCropTab) {
             if (parent.transform.degree !== 0) {
-                parent.notify('shape', { prop: 'redrawActObj', onPropertyChange: false,
-                    value: { x: null, y: null, isMouseDown: null } });
+                parent.notify('shape', { prop: 'redrawActObj', onPropertyChange: false, value: { x: null, y: null, isMouseDown: null } });
                 parent.panPoint.currentPannedPoint = { x: 0, y: 0 };
                 var temp = parent.allowDownScale;
                 parent.allowDownScale = false;
@@ -740,13 +758,14 @@ var Transform = /** @class */ (function () {
             else if (parent.transform.currFlipState !== '') {
                 parent.panPoint.totalPannedPoint = { x: 0, y: 0 };
             }
-            parent.notify('freehand-draw', { prop: 'updateFHDColl', onPropertyChange: false });
+            if (parent.transform.straighten === 0 && !this.isPreventSelect) {
+                parent.notify('freehand-draw', { prop: 'updateFHDColl', onPropertyChange: false, value: { isPreventApply: isPreventApply } });
+            }
         }
         if (parent.transform.degree === 0) {
-            this.drawZoomImgToCanvas(zoomFactor, this.tempActiveObj);
+            this.drawZoomImgToCanvas(zoomFact, this.tempActiveObj);
             var panObj_1 = { panRegion: '' };
-            parent.notify('crop', { prop: 'getCurrFlipState', onPropertyChange: false,
-                value: { panObj: panObj_1 } });
+            parent.notify('crop', { prop: 'getCurrFlipState', onPropertyChange: false, value: { panObj: panObj_1 } });
             if (panObj_1['panRegion'] !== '') {
                 parent.notify('crop', { prop: 'setTempFlipPanPoint', onPropertyChange: false, value: { point: parent.panPoint.totalPannedPoint, isAdd: true } });
                 objColl = extend([], parent.objColl, [], true);
@@ -758,44 +777,46 @@ var Transform = /** @class */ (function () {
                 parent.img.destLeft = destLeft;
                 parent.img.destTop = destTop;
                 parent.objColl = objColl;
-                parent.notify('shape', { prop: 'zoomObjColl', onPropertyChange: false, value: { isPreventApply: null } });
-                parent.notify('freehand-draw', { prop: 'zoomFHDColl', onPropertyChange: false, value: { isPreventApply: null } });
-                parent.notify('freehand-draw', { prop: 'updateFHDColl', onPropertyChange: false });
+                parent.notify('shape', { prop: 'zoomObjColl', onPropertyChange: false, value: { isPreventApply: isPreventApply } });
+                parent.notify('freehand-draw', { prop: 'zoomFHDColl', onPropertyChange: false, value: { isPreventApply: isPreventApply } });
+                if (parent.transform.straighten === 0 && !this.isPreventSelect) {
+                    parent.notify('freehand-draw', { prop: 'updateFHDColl', onPropertyChange: false, value: { isPreventApply: isPreventApply } });
+                }
             }
-            if (parent.zoomSettings.zoomFactor <= parent.zoomSettings.minZoomFactor && !parent.isCropTab) {
+            if (zoomFactor <= minZoomFactor && !parent.isCropTab) {
                 parent.panPoint.totalPannedPoint = { x: 0, y: 0 };
             }
         }
         else {
-            parent.notify('freehand-draw', { prop: 'updateFHDColl', onPropertyChange: false });
+            if (parent.transform.straighten === 0 && !this.isPreventSelect) {
+                parent.notify('freehand-draw', { prop: 'updateFHDColl', onPropertyChange: false, value: { isPreventApply: isPreventApply } });
+            }
             parent.panPoint.totalPannedClientPoint = { x: 0, y: 0 };
             parent.panPoint.totalPannedInternalPoint = { x: 0, y: 0 };
-            this.rotateZoom(zoomFactor);
+            this.rotateZoom(zoomFact);
             var panObj_2 = { panRegion: '' };
-            parent.notify('crop', { prop: 'getCurrFlipState', onPropertyChange: false,
-                value: { panObj: panObj_2 } });
+            parent.notify('crop', { prop: 'getCurrFlipState', onPropertyChange: false, value: { panObj: panObj_2 } });
             if (panObj_2['panRegion'] !== '') {
                 var temp = this.lowerContext.filter;
                 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 } });
+                parent.notify('shape', { prop: 'zoomObjColl', onPropertyChange: false, value: { isPreventApply: isPreventApply } });
+                parent.notify('freehand-draw', { prop: 'zoomFHDColl', onPropertyChange: false, value: { isPreventApply: isPreventApply } });
                 this.lowerContext.filter = temp;
             }
         }
         var powerOften = Math.pow(10, 1);
-        if (parent.zoomSettings.zoomFactor <= parent.zoomSettings.minZoomFactor ||
+        if (zoomFactor <= minZoomFactor ||
             (Math.round(parent.transform.zoomFactor * powerOften) / powerOften) === 2) {
             clearInterval(this.zoomBtnHold);
             this.zoomBtnHold = 0;
         }
         var panObj = { panRegion: '' };
-        parent.notify('crop', { prop: 'getCurrFlipState', onPropertyChange: false,
-            value: { panObj: panObj } });
+        parent.notify('crop', { prop: 'getCurrFlipState', onPropertyChange: false, value: { panObj: panObj } });
         if (panObj['panRegion'] === '') {
             var temp = this.lowerContext.filter;
             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 } });
+            parent.notify('shape', { prop: 'zoomObjColl', onPropertyChange: false, value: { isPreventApply: isPreventApply } });
+            parent.notify('freehand-draw', { prop: 'zoomFHDColl', onPropertyChange: false, value: { isPreventApply: isPreventApply } });
             this.lowerContext.filter = temp;
         }
         if ((parent.currSelectionPoint && parent.currSelectionPoint.shape === 'crop-circle') || parent.isCircleCrop) {
@@ -807,7 +828,7 @@ var Transform = /** @class */ (function () {
         if (this.tempActiveObj) {
             parent.activeObj = extend({}, this.tempActiveObj, {}, true);
             parent.notify('draw', { prop: 'drawObject', onPropertyChange: false, value: { canvas: 'duplicate', obj: parent.activeObj } });
-            if (parent.zoomSettings.zoomFactor <= parent.zoomSettings.minZoomFactor) {
+            if (zoomFactor <= minZoomFactor) {
                 parent.currSelectionPoint = null;
             }
         }
@@ -815,7 +836,7 @@ var Transform = /** @class */ (function () {
         var zoomOut;
         if (!isBlazor()) {
             zoomOut = document.querySelector('#' + parent.element.id + '_zoomOut');
-            if (zoomOut && parent.zoomSettings.zoomFactor <= parent.zoomSettings.minZoomFactor) {
+            if (zoomOut && zoomFactor <= minZoomFactor) {
                 zoomOut.classList.add('e-disabled');
                 zoomOut.parentElement.classList.add('e-overlay');
             }
@@ -826,7 +847,7 @@ var Transform = /** @class */ (function () {
         }
         else {
             zoomOut = parent.element.querySelector('#zoomout');
-            if (zoomOut && parent.zoomSettings.zoomFactor <= parent.zoomSettings.minZoomFactor) {
+            if (zoomOut && zoomFactor <= minZoomFactor) {
                 zoomOut.classList.add('e-overlay');
             }
             else if (zoomOut) {
@@ -864,49 +885,89 @@ var Transform = /** @class */ (function () {
             parent.updateToolbar(parent.element, 'enableDisableToolbarBtn');
         }
         parent.notify('selection', { prop: 'setZoomType', onPropertyChange: false, value: { zoomType: 'Toolbar' } });
+        zoomEventArgs = { zoomPoint: zoomEventArgs.zoomPoint, previousZoomFactor: zoomEventArgs.previousZoomFactor, currentZoomFactor: zoomEventArgs.currentZoomFactor, zoomTrigger: zoomEventArgs.zoomTrigger };
+        if (isBlazor() && !parent.isCropToolbar && parent.isZoomBtnClick && parent.events && parent.events.zoomed.hasDelegate === true) {
+            zoomEventArgs.zoomTrigger = typeof zoomEventArgs.zoomTrigger !== 'number' ? parseInt(this.getZoomTriggerType(zoomEventArgs.zoomTrigger)) : zoomEventArgs.zoomTrigger;
+            var zoomedArgs = { zoomPoint: zoomEventArgs.zoomPoint, zoomFactor: zoomEventArgs.currentZoomFactor, zoomTrigger: zoomEventArgs.zoomTrigger };
+            parent.dotNetRef.invokeMethodAsync('ZoomEventAsync', 'Zoomed', null, zoomedArgs);
+            parent.isZoomBtnClick = false;
+        }
+        else if (!parent.isCropToolbar && parent.isZoomBtnClick) {
+            parent.isZoomBtnClick = false;
+        }
     };
     Transform.prototype.disableZoomOutBtn = function (isZoomOut) {
         var parent = this.parent;
+        var _a = parent.zoomSettings, zoomFactor = _a.zoomFactor, minZoomFactor = _a.minZoomFactor;
         var isDisabled = false;
         var zoomOut;
         if (!isNullOrUndefined(isZoomOut)) {
             parent.transform.zoomFactor -= 0.1;
         }
-        if (!isBlazor()) {
-            zoomOut = document.querySelector('#' + parent.element.id + '_zoomOut');
+        if (isBlazor()) {
+            zoomOut = parent.element.querySelector('#zoomout');
         }
         else {
-            zoomOut = this.parent.element.querySelector('#zoomout');
+            zoomOut = parent.element.querySelector('#' + parent.element.id + '_zoomOut');
         }
-        var destLeft = parent.img.destLeft;
-        var destTop = parent.img.destTop;
-        var destWidth = parent.img.destWidth;
-        var destHeight = parent.img.destHeight;
+        var destPoints = { destLeft: parent.img.destLeft, destTop: parent.img.destTop,
+            destWidth: parent.img.destWidth, destHeight: parent.img.destHeight };
         if (parent.activeObj.shape) {
-            this.setZoomDimension(-0.1, parent.activeObj);
+            var maxDimension = this.setZoomDimension(-0.1, parent.activeObj);
             if (!isNullOrUndefined(zoomOut)) {
-                if (parent.img.destLeft > parent.activeObj.activePoint.startX || parent.img.destTop > parent.activeObj.activePoint.startY
-                    || parent.img.destLeft + parent.img.destWidth < parent.activeObj.activePoint.endX || parent.img.destTop +
-                    parent.img.destHeight < parent.activeObj.activePoint.endY || parent.zoomSettings.zoomFactor ===
-                    parent.zoomSettings.minZoomFactor) {
-                    if (!isBlazor()) {
-                        zoomOut.classList.add('e-disabled');
-                        zoomOut.parentElement.classList.add('e-overlay');
+                var actPoint = parent.activeObj.activePoint;
+                if (parent.transform.straighten === 0) {
+                    if (parent.img.destLeft > actPoint.startX || parent.img.destTop >
+                        actPoint.startY || parent.img.destLeft + parent.img.destWidth <
+                        actPoint.endX || parent.img.destTop + parent.img.destHeight < actPoint.endY
+                        || zoomFactor === minZoomFactor) {
+                        if (!isBlazor()) {
+                            zoomOut.classList.add('e-disabled');
+                            zoomOut.parentElement.classList.add('e-overlay');
+                        }
+                        else {
+                            zoomOut.classList.add('e-overlay');
+                        }
+                        isDisabled = true;
                     }
                     else {
-                        zoomOut.classList.add('e-overlay');
+                        if (!isBlazor()) {
+                            zoomOut.classList.remove('e-disabled');
+                            zoomOut.parentElement.classList.remove('e-overlay');
+                        }
+                        else {
+                            zoomOut.classList.remove('e-overlay');
+                        }
+                        isDisabled = false;
                     }
-                    isDisabled = true;
                 }
                 else {
-                    if (!isBlazor()) {
-                        zoomOut.classList.remove('e-disabled');
-                        zoomOut.parentElement.classList.remove('e-overlay');
+                    parent.img.destWidth = maxDimension.width;
+                    parent.img.destHeight = maxDimension.height;
+                    var obj = { isIntersect: null };
+                    parent.notify('draw', { prop: 'updateImgCanvasPoints', onPropertyChange: false });
+                    parent.notify('draw', { prop: 'isLinesIntersect', onPropertyChange: false, value: { obj: obj } });
+                    if (obj['isIntersect'] ||
+                        zoomFactor === minZoomFactor) {
+                        if (!isBlazor()) {
+                            zoomOut.classList.add('e-disabled');
+                            zoomOut.parentElement.classList.add('e-overlay');
+                        }
+                        else {
+                            zoomOut.classList.add('e-overlay');
+                        }
+                        isDisabled = true;
                     }
                     else {
-                        zoomOut.classList.remove('e-overlay');
+                        if (!isBlazor()) {
+                            zoomOut.classList.remove('e-disabled');
+                            zoomOut.parentElement.classList.remove('e-overlay');
+                        }
+                        else {
+                            zoomOut.classList.remove('e-overlay');
+                        }
+                        isDisabled = false;
                     }
-                    isDisabled = false;
                 }
             }
         }
@@ -916,16 +977,17 @@ var Transform = /** @class */ (function () {
         if (!isNullOrUndefined(isZoomOut)) {
             parent.transform.zoomFactor += 0.1;
         }
-        parent.img.destLeft = destLeft;
-        parent.img.destTop = destTop;
-        parent.img.destWidth = destWidth;
-        parent.img.destHeight = destHeight;
+        parent.img.destLeft = destPoints['destLeft'];
+        parent.img.destTop = destPoints['destTop'];
+        parent.img.destWidth = destPoints['destWidth'];
+        parent.img.destHeight = destPoints['destHeight'];
         return isDisabled;
     };
     Transform.prototype.drawZoomImgToCanvas = function (value, selectionObj) {
         var parent = this.parent;
         var powerOften = Math.pow(10, 1);
-        if ((Math.round(parent.transform.zoomFactor * powerOften) / powerOften) === 0.1 && value === -0.1) {
+        var zmFactor = Math.round(parent.transform.zoomFactor * powerOften) / powerOften;
+        if ((zmFactor === 0.1 && value === -0.1) || zmFactor === 0 && value === -0.025) {
             parent.transform.zoomFactor = 0;
         }
         else {
@@ -941,7 +1003,7 @@ var Transform = /** @class */ (function () {
             maxDimension.width += (maxDimension.width * parent.transform.zoomFactor);
             maxDimension.height += (maxDimension.height * parent.transform.zoomFactor);
             parent.img.destLeft = (parent.lowerCanvas.clientWidth - maxDimension.width) / 2;
-            parent.img.destTop = (parent.lowerCanvas.clientHeight - maxDimension.height) / 2;
+            parent.img.destTop = (parent.lowerCanvas.clientHeight - maxDimension.height + 1) / 2;
         }
         parent.notify('draw', { prop: 'draw-image-to-canvas', value: { dimension: maxDimension } });
         maxDimension.width = this.cropDimension.width;
@@ -984,7 +1046,8 @@ var Transform = /** @class */ (function () {
     Transform.prototype.rotateZoom = function (value) {
         var parent = this.parent;
         var powerOften = Math.pow(10, 1);
-        if ((Math.round(parent.transform.zoomFactor * powerOften) / powerOften) === 0.1 && value === -0.1) {
+        var zmFactor = Math.round(parent.transform.zoomFactor * powerOften) / powerOften;
+        if ((zmFactor === 0.1 && value === -0.1) || zmFactor === 0 && value === -0.025) {
             parent.transform.zoomFactor = 0;
         }
         else {
@@ -1018,14 +1081,15 @@ var Transform = /** @class */ (function () {
         parent.notify('draw', { prop: 'setZoomCropWidth', value: { width: maxDimension.width, height: maxDimension.height } });
     };
     Transform.prototype.autoEnablePan = function () {
-        if (this.parent.transform.zoomFactor <= 0) {
-            this.parent.togglePan = false;
-            this.parent.notify('selection', { prop: 'setDragCanvas', value: { bool: false } });
-            this.parent.pan(false);
+        var parent = this.parent;
+        if (parent.transform.zoomFactor <= 0) {
+            parent.togglePan = false;
+            parent.notify('selection', { prop: 'setDragCanvas', value: { bool: false } });
+            parent.pan(false);
             this.disablePan = false;
         }
         else {
-            this.parent.pan(!this.disablePan);
+            parent.pan(!this.disablePan);
         }
     };
     Transform.prototype.cropZoom = function (value, selectionObj) {
@@ -1055,7 +1119,7 @@ var Transform = /** @class */ (function () {
         parent.img.destTop = destTop - ((maxDimension.height - parent.img.destHeight) / 2);
         destLeft = parent.img.destLeft;
         destTop = parent.img.destTop;
-        if (selectionObj) {
+        if (selectionObj && parent.transform.straighten === 0) {
             if (parent.img.destLeft > selectionObj.activePoint.startX) {
                 parent.img.destLeft = selectionObj.activePoint.startX;
                 if (parent.transform.degree === 0) {
@@ -1085,8 +1149,9 @@ var Transform = /** @class */ (function () {
     };
     Transform.prototype.setZoomDimension = function (value, selectionObj) {
         var parent = this.parent;
+        var degree = parent.transform.degree;
         var maxDimension = { width: 0, height: 0 };
-        if (parent.transform.degree % 90 === 0 && parent.transform.degree % 180 !== 0) {
+        if (degree % 90 === 0 && degree % 180 !== 0) {
             maxDimension = this.calcMaxDimension(parent.img.srcHeight, parent.img.srcWidth);
         }
         else {
@@ -1139,9 +1204,9 @@ var Transform = /** @class */ (function () {
         var obj = { panDown: null };
         parent.notify('selection', { prop: 'getPanDown', onPropertyChange: false, value: { obj: obj } });
         var panEventArgs = { startPoint: obj['panDown'], endPoint: this.panMove, cancel: false };
-        if (isBlazor() && isNullOrUndefined(this.parent.eventType) && parent.events && parent.events.onPanStart.hasDelegate === true) {
-            this.parent.eventType = 'pan';
-            this.parent.panEventArgs = panEventArgs;
+        if (isBlazor() && isNullOrUndefined(parent.eventType) && parent.events && parent.events.onPanStart.hasDelegate === true) {
+            parent.eventType = 'pan';
+            parent.panEventArgs = panEventArgs;
             /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
             parent.dotNetRef.invokeMethodAsync('PanEventAsync', 'OnPanStart', panEventArgs).then(function (args) {
                 _this.panEvent(args, xDiff, yDiff);
@@ -1163,41 +1228,38 @@ var Transform = /** @class */ (function () {
         }
         if (isNullOrUndefined(parent.activeObj.shape)) {
             isObjCreated = true;
-            parent.activeObj.activePoint = { startX: parent.img.destLeft, startY: parent.img.destTop,
+            var actPoint = parent.activeObj.activePoint = { startX: parent.img.destLeft, startY: parent.img.destTop,
                 endX: parent.img.destLeft + parent.img.destWidth, endY: parent.img.destTop + parent.img.destHeight };
-            var startX = parent.activeObj.activePoint.startX;
-            var startY = parent.activeObj.activePoint.startY;
-            var endX = parent.activeObj.activePoint.endX;
-            var endY = parent.activeObj.activePoint.endY;
+            var startX = actPoint.startX;
+            var startY = actPoint.startY;
+            var endX = actPoint.endX;
+            var endY = actPoint.endY;
             if (startX < 0) {
-                parent.activeObj.activePoint.startX = 0;
+                actPoint.startX = 0;
             }
             if (startY < 0) {
-                parent.activeObj.activePoint.startY = 0;
+                actPoint.startY = 0;
             }
             if (endX > parent.lowerCanvas.width) {
-                parent.activeObj.activePoint.endX =
-                    parent.lowerCanvas.width;
+                actPoint.endX = parent.lowerCanvas.width;
             }
             if (endY > parent.lowerCanvas.height) {
-                parent.activeObj.activePoint.endY =
-                    parent.lowerCanvas.height;
+                actPoint.endY = parent.lowerCanvas.height;
             }
-            parent.activeObj.activePoint.width = parent.activeObj.activePoint.endX - parent.activeObj.activePoint.startX;
-            parent.activeObj.activePoint.height = parent.activeObj.activePoint.endY - parent.activeObj.activePoint.startY;
+            actPoint.width = actPoint.endX - actPoint.startX;
+            actPoint.height = actPoint.endY - actPoint.startY;
             parent.activeObj.shape = 'crop-custom';
             var obj = { strokeSettings: {} };
-            parent.notify('shape', { prop: 'getStrokeSettings', onPropertyChange: false,
-                value: { obj: obj } });
+            parent.notify('shape', { prop: 'getStrokeSettings', onPropertyChange: false, value: { obj: obj } });
             parent.activeObj.strokeSettings = obj['strokeSettings'];
-            parent.notify('draw', { prop: 'updateActiveObject', onPropertyChange: false, value: { actPoint: parent.activeObj.activePoint, obj: parent.activeObj,
+            parent.notify('draw', { prop: 'updateActiveObject', onPropertyChange: false, value: { actPoint: actPoint, obj: parent.activeObj,
                     isMouseMove: null, x: null, y: null } });
             parent.isCropTab = true;
         }
         if (parent.transform.degree === 0) {
             var point = void 0;
             if (isNullOrUndefined(xDiff) && isNullOrUndefined(yDiff)) {
-                point = this.updatePanPoints('');
+                point = this.updatePanPoints();
             }
             else {
                 point = { x: xDiff, y: yDiff };
@@ -1206,7 +1268,7 @@ var Transform = /** @class */ (function () {
             parent.panPoint.totalPannedPoint.y += point.y;
             var tempSelectionObj = extend({}, parent.activeObj, {}, true);
             var temp = this.lowerContext.filter;
-            this.drawPannImage(point);
+            this.drawPannImage(point, isObjCreated);
             this.lowerContext.filter = temp;
             this.tempPanMove = extend({}, this.panMove, {}, true);
             parent.activeObj = extend({}, tempSelectionObj, {}, true);
@@ -1219,13 +1281,13 @@ var Transform = /** @class */ (function () {
             var tempFlipState = parent.transform.currFlipState;
             parent.isCropTab = true;
             if (isNullOrUndefined(xDiff) && isNullOrUndefined(yDiff)) {
-                parent.panPoint.currentPannedPoint = this.updatePanPoints('');
+                parent.panPoint.currentPannedPoint = this.updatePanPoints();
             }
             else {
                 parent.panPoint.currentPannedPoint = { x: xDiff, y: yDiff };
             }
             parent.transform.currFlipState = tempFlipState;
-            this.rotatePan();
+            this.rotatePan(null, null, isObjCreated);
             parent.isCropTab = false;
             this.tempPanMove = extend({}, this.panMove, {}, true);
         }
@@ -1235,7 +1297,7 @@ var Transform = /** @class */ (function () {
             this.upperContext.clearRect(0, 0, parent.upperCanvas.width, parent.upperCanvas.height);
         }
     };
-    Transform.prototype.drawPannImage = function (point) {
+    Transform.prototype.drawPannImage = function (point, isObjCreated) {
         var parent = this.parent;
         var filter = this.lowerContext.filter;
         var destPoints = { startX: parent.img.destLeft, startY: parent.img.destTop, width: parent.img.destWidth,
@@ -1248,7 +1310,13 @@ var Transform = /** @class */ (function () {
         parent.img.destWidth = destPoints.width;
         parent.img.destHeight = destPoints.height;
         this.setDestPointsForFlipState();
+        if (isObjCreated) {
+            parent.isCropTab = false;
+        }
         parent.notify('draw', { prop: 'drawImage', onPropertyChange: false });
+        if (isObjCreated) {
+            parent.isCropTab = true;
+        }
         if ((parent.currSelectionPoint && parent.currSelectionPoint.shape === 'crop-circle') || parent.isCircleCrop) {
             parent.notify('crop', { prop: 'cropCircle', onPropertyChange: false,
                 value: { context: this.lowerContext, isSave: null, isFlip: true } });
@@ -1262,10 +1330,16 @@ var Transform = /** @class */ (function () {
         parent.img.destHeight = destPoints.height;
         var temp = this.lowerContext.filter;
         this.lowerContext.filter = 'none';
+        if (isObjCreated) {
+            parent.isCropTab = false;
+        }
         parent.notify('shape', { prop: 'panObjColl', onPropertyChange: false,
             value: { xDiff: point.x, yDiff: point.y, panRegion: '' } });
         parent.notify('freehand-draw', { prop: 'panFHDColl', onPropertyChange: false,
             value: { xDiff: point.x, yDiff: point.y, panRegion: '' } });
+        if (isObjCreated) {
+            parent.isCropTab = true;
+        }
         this.lowerContext.filter = temp;
         parent.notify('draw', { prop: 'clearOuterCanvas', onPropertyChange: false, value: { context: this.lowerContext } });
         if (parent.isCircleCrop) {
@@ -1288,11 +1362,12 @@ var Transform = /** @class */ (function () {
                 value: { obj: selPointCollObj } });
             this.transCurrObj.selPointColl = extend([], selPointCollObj['selPointColl'], [], true);
             parent.isUndoRedo = parent.isCropToolbar = true;
-            if (parent.transform.defaultZoomFactor > 0) {
-                this.zoomAction(-parent.transform.defaultZoomFactor);
+            var zmFactor = parent.transform.defaultZoomFactor;
+            if (zmFactor > 0) {
+                this.zoomAction(-zmFactor);
             }
             else {
-                this.zoomAction(Math.abs(parent.transform.defaultZoomFactor));
+                this.zoomAction(Math.abs(zmFactor));
             }
             parent.isCropToolbar = false;
             parent.isUndoRedo = isUndoRedo;
@@ -1309,7 +1384,7 @@ var Transform = /** @class */ (function () {
             if (parent.objColl[i].flipObjColl.length > 0) {
                 var flipObjColl = { collection: parent.objColl[i].flipObjColl };
                 parent.notify('shape', { prop: 'alignRotateFlipColl', onPropertyChange: false,
-                    value: { collection: parent.objColl[i].flipObjColl, isRotateFlipCollection: null, obj: flipObjColl } });
+                    value: { collection: flipObjColl['collection'], isRotateFlipCollection: null, obj: flipObjColl } });
                 parent.objColl[i].flipObjColl = flipObjColl['collection'];
                 if (parent.objColl[i].flipObjColl.length === 0) {
                     parent.objColl[i].shapeFlip = '';
@@ -1351,7 +1426,7 @@ var Transform = /** @class */ (function () {
                 break;
         }
     };
-    Transform.prototype.rotatePan = function (isCropSelection, isDefaultZoom) {
+    Transform.prototype.rotatePan = function (isCropSelection, isDefaultZoom, isObjCreated) {
         var parent = this.parent;
         this.isReverseRotate = true;
         var tempDegree = parent.transform.degree;
@@ -1365,20 +1440,19 @@ var Transform = /** @class */ (function () {
         parent.objColl = [];
         parent.pointColl = [];
         parent.freehandCounter = 0;
-        parent.notify('freehand-draw', { prop: 'getSelPointColl', onPropertyChange: false,
-            value: { obj: object } });
+        parent.notify('freehand-draw', { prop: 'getSelPointColl', onPropertyChange: false, value: { obj: object } });
         var cropSelPointColl = object['selPointColl'];
-        parent.notify('freehand-draw', { prop: 'setSelPointColl', onPropertyChange: false,
-            value: { obj: { selPointColl: [] } } });
+        parent.notify('freehand-draw', { prop: 'setSelPointColl', onPropertyChange: false, value: { obj: { selPointColl: [] } } });
         parent.notify('shape', { prop: 'refreshActiveObj', onPropertyChange: false });
         parent.notify('draw', { prop: 'setRotateZoom', onPropertyChange: false, value: { isRotateZoom: true } });
         parent.notify('draw', { prop: 'updateCurrTransState', onPropertyChange: false,
             value: { type: 'initial', isPreventDestination: null, isRotatePan: null } });
         var initialDestLeft = parent.img.destLeft;
         var initialDestTop = parent.img.destTop;
+        var intPan = parent.panPoint.totalPannedInternalPoint;
         if (parent.isCropTab) {
-            parent.img.destLeft += parent.panPoint.totalPannedInternalPoint.x;
-            parent.img.destTop += parent.panPoint.totalPannedInternalPoint.y;
+            parent.img.destLeft += intPan.x;
+            parent.img.destTop += intPan.y;
         }
         parent.notify('crop', { prop: 'updateRotatePan', onPropertyChange: false });
         if (parent.isCropTab) {
@@ -1386,7 +1460,13 @@ var Transform = /** @class */ (function () {
             parent.panPoint.totalPannedInternalPoint.y = parent.img.destTop - initialDestTop;
         }
         var temp = this.lowerContext.filter;
+        if (isObjCreated) {
+            parent.isCropTab = false;
+        }
         parent.notify('draw', { prop: 'drawImage', onPropertyChange: false });
+        if (isObjCreated) {
+            parent.isCropTab = true;
+        }
         parent.notify('draw', { prop: 'setRotateZoom', onPropertyChange: false, value: { isRotateZoom: false } });
         parent.notify('draw', { prop: 'updateCurrTransState', onPropertyChange: false,
             value: { type: 'reverse', isPreventDestination: true, isRotatePan: true } });
@@ -1397,8 +1477,7 @@ var Transform = /** @class */ (function () {
         parent.img.destLeft += parent.panPoint.currentPannedPoint.x;
         parent.img.destTop += parent.panPoint.currentPannedPoint.y;
         parent.panPoint.totalPannedClientPoint.x = parent.img.destLeft - destLeft;
-        parent.panPoint.totalPannedClientPoint.y =
-            parent.img.destTop - destTop;
+        parent.panPoint.totalPannedClientPoint.y = parent.img.destTop - destTop;
         parent.objColl = tempObjColl;
         parent.pointColl = tempPointColl;
         parent.freehandCounter = parent.pointColl.length;
@@ -1419,10 +1498,16 @@ var Transform = /** @class */ (function () {
                 parent.panPoint.currentPannedPoint = extend({}, parent.panPoint.totalPannedClientPoint, {}, true);
             }
         }
+        if (isObjCreated) {
+            parent.isCropTab = false;
+        }
         parent.notify('shape', { prop: 'panObjColl', onPropertyChange: false,
             value: { xDiff: parent.panPoint.currentPannedPoint.x, yDiff: parent.panPoint.currentPannedPoint.y, panRegion: '' } });
         parent.notify('freehand-draw', { prop: 'panFHDColl', onPropertyChange: false,
             value: { xDiff: parent.panPoint.currentPannedPoint.x, yDiff: parent.panPoint.currentPannedPoint.y, panRegion: '' } });
+        if (isObjCreated) {
+            parent.isCropTab = true;
+        }
         this.lowerContext.filter = temp;
         parent.notify('draw', { prop: 'clearOuterCanvas', onPropertyChange: false, value: { context: this.lowerContext } });
         this.upperContext.clearRect(0, 0, parent.upperCanvas.width, parent.upperCanvas.height);
@@ -1435,63 +1520,53 @@ var Transform = /** @class */ (function () {
     };
     Transform.prototype.limitPan = function () {
         var parent = this.parent;
+        var _a = parent.activeObj.activePoint, startX = _a.startX, startY = _a.startY, endX = _a.endX, endY = _a.endY;
+        var img = parent.img;
         if (parent.activeObj.activePoint) {
-            if (parent.img.destLeft > parent.activeObj.activePoint.startX) {
-                parent.img.destLeft = parent.activeObj.activePoint.startX;
+            if (img.destLeft > startX) {
+                parent.img.destLeft = startX;
             }
-            if (parent.img.destTop > parent.activeObj.activePoint.startY) {
-                parent.img.destTop = parent.activeObj.activePoint.startY;
+            if (img.destTop > startY) {
+                parent.img.destTop = startY;
             }
-            if (parent.img.destLeft + parent.img.destWidth < parent.activeObj.activePoint.endX) {
-                parent.img.destLeft = parent.activeObj.activePoint.endX - parent.img.destWidth;
+            if (img.destLeft + img.destWidth < endX) {
+                parent.img.destLeft = endX - img.destWidth;
             }
-            if (parent.img.destTop + parent.img.destHeight < parent.activeObj.activePoint.endY) {
-                parent.img.destTop = parent.activeObj.activePoint.endY - parent.img.destHeight;
+            if (img.destTop + img.destHeight < endY) {
+                parent.img.destTop = endY - img.destHeight;
             }
         }
     };
     Transform.prototype.updateFlipActiveObj = function (panRegion) {
         var parent = this.parent;
+        var actPoint = parent.activeObj.activePoint;
+        var _a = parent.lowerCanvas, width = _a.width, height = _a.height;
+        var endX;
+        var endY;
         if (panRegion === 'horizontal') {
-            if (parent.activeObj.activePoint.startX > parent.lowerCanvas.width / 2) {
-                parent.activeObj.activePoint.endX = (parent.lowerCanvas.width / 2) -
-                    (parent.activeObj.activePoint.startX - (parent.lowerCanvas.width / 2));
-            }
-            else {
-                parent.activeObj.activePoint.endX = (parent.lowerCanvas.width / 2) + ((parent.lowerCanvas.width / 2) -
-                    parent.activeObj.activePoint.startX);
-            }
-            parent.activeObj.activePoint.startX = parent.activeObj.activePoint.endX - parent.activeObj.activePoint.width;
+            endX = actPoint.startX > width / 2 ? (width / 2) - (actPoint.startX - (width / 2)) :
+                (width / 2) + ((width / 2) - actPoint.startX);
+            actPoint.startX = endX - actPoint.width;
+            actPoint.endX = endX;
         }
         else if (panRegion === 'vertical') {
-            if (parent.activeObj.activePoint.startX > parent.lowerCanvas.width / 2) {
-                parent.activeObj.activePoint.endY = (parent.lowerCanvas.height / 2) -
-                    (parent.activeObj.activePoint.startY - (parent.lowerCanvas.height / 2));
-            }
-            else {
-                parent.activeObj.activePoint.endY = (parent.lowerCanvas.height / 2) +
-                    ((parent.lowerCanvas.height / 2) - parent.activeObj.activePoint.startY);
-            }
-            parent.activeObj.activePoint.startY = parent.activeObj.activePoint.endY - parent.activeObj.activePoint.height;
+            endY = actPoint.startX > width / 2 ? (height / 2) - (actPoint.startY - (height / 2)) :
+                (height / 2) + ((height / 2) - actPoint.startY);
+            actPoint.startY = endY - actPoint.height;
+            actPoint.endY = endY;
         }
         else if (panRegion === 'verticalHorizontal' || panRegion === 'horizontalVertical') {
-            if (parent.activeObj.activePoint.startX > parent.lowerCanvas.width / 2) {
-                parent.activeObj.activePoint.endX = (parent.lowerCanvas.width / 2) -
-                    (parent.activeObj.activePoint.startX - (parent.lowerCanvas.width / 2));
-                parent.activeObj.activePoint.endY = (parent.lowerCanvas.height / 2) -
-                    (parent.activeObj.activePoint.startY - (parent.lowerCanvas.height / 2));
-            }
-            else {
-                parent.activeObj.activePoint.endX = (parent.lowerCanvas.width / 2) + ((parent.lowerCanvas.width / 2) -
-                    parent.activeObj.activePoint.startX);
-                parent.activeObj.activePoint.endY = (parent.lowerCanvas.height / 2) +
-                    ((parent.lowerCanvas.height / 2) - parent.activeObj.activePoint.startY);
-            }
-            parent.activeObj.activePoint.startX = parent.activeObj.activePoint.endX - parent.activeObj.activePoint.width;
-            parent.activeObj.activePoint.startY = parent.activeObj.activePoint.endY - parent.activeObj.activePoint.height;
-        }
-        parent.notify('draw', { prop: 'updateActiveObject', onPropertyChange: false, value: { actPoint: parent.activeObj.activePoint, obj: parent.activeObj,
-                isMouseMove: null, x: null, y: null } });
+            endX = actPoint.startX > width / 2 ? (width / 2) - (actPoint.startX - (width / 2)) :
+                (width / 2) + ((width / 2) - actPoint.startX);
+            endY = actPoint.startX > width / 2 ? (height / 2) - (actPoint.startY - (height / 2)) :
+                (height / 2) + ((height / 2) - actPoint.startY);
+            actPoint.startX = endX - actPoint.width;
+            actPoint.startY = endY - actPoint.height;
+            actPoint.endX = endX;
+            actPoint.endY = endY;
+        }
+        parent.notify('draw', { prop: 'updateActiveObject', onPropertyChange: false, value: { actPoint: actPoint,
+                obj: parent.activeObj, isMouseMove: null, x: null, y: null } });
     };
     Transform.prototype.pan = function (value) {
         var parent = this.parent;
@@ -1520,9 +1595,10 @@ var Transform = /** @class */ (function () {
             }
             else {
                 var type = value > 0 ? 'zoomIn' : 'zoomOut';
-                for (var i = 0; i < (Math.abs(value) * 10); i++) {
+                var absValue = Math.abs(value) * 10;
+                for (var i = 0; i < absValue; i++) {
                     parent.notify('draw', { prop: 'performPointZoom', onPropertyChange: false,
-                        value: { x: zoomPoint.x, y: zoomPoint.y, type: type } });
+                        value: { x: zoomPoint.x, y: zoomPoint.y, type: type, isResize: null } });
                 }
             }
         }
@@ -1534,48 +1610,18 @@ var Transform = /** @class */ (function () {
     Transform.prototype.setCurrPanRegion = function (region, type, obj) {
         var panRegion = region;
         if (region === '') {
-            if (type === 'horizontal') {
-                panRegion = 'horizontal';
-            }
-            else if (type === 'vertical') {
-                panRegion = 'vertical';
-            }
+            panRegion = type === 'horizontal' ? 'horizontal' : type === 'vertical' ? 'vertical' : region;
         }
         else if (region === 'horizontal') {
-            if (type === 'horizontal') {
-                panRegion = 'horizontalVertical';
-            }
-            else if (type === 'vertical') {
-                panRegion = 'verticalHorizontal';
-            }
-            else if (type === 90) {
-                panRegion = 'vertical';
-            }
-            else if (type === -90) {
-                panRegion = 'horizontal';
-            }
+            panRegion = type === 'horizontal' ? 'horizontalVertical' : type === 'vertical' ? 'verticalHorizontal' : type === 90 ?
+                'vertical' : type === -90 ? 'horizontal' : region;
         }
         else if (region === 'vertical') {
-            if (type === 'horizontal') {
-                panRegion = 'horizontalVertical';
-            }
-            else if (type === 'vertical') {
-                panRegion = 'verticalHorizontal';
-            }
-            else if (type === 90) {
-                panRegion = 'horizontal';
-            }
-            else if (type === -90) {
-                panRegion = 'vertical';
-            }
+            panRegion = type === 'horizontal' ? 'horizontalVertical' : type === 'vertical' ? 'verticalHorizontal' : type === 90 ?
+                'horizontal' : type === -90 ? 'vertical' : region;
         }
         else {
-            if (type === 'horizontal') {
-                panRegion = 'vertical';
-            }
-            else if (type === 'vertical') {
-                panRegion = 'horizontal';
-            }
+            panRegion = type === 'horizontal' ? 'vertical' : type === 'vertical' ? 'horizontal' : region;
         }
         obj['panRegion'] = panRegion;
     };
@@ -1599,18 +1645,37 @@ var Transform = /** @class */ (function () {
         var isFrameToolbar = false;
         var isActiveObj = false;
         var freehandObj = { bool: false };
+        var straightenObj = { bool: parent.isStraightening };
+        var cxtTbarHeight = 0;
+        var ctToolbar = parent.element.querySelector('#' + parent.element.id + '_contextualToolbar');
+        var ctWrapper = parent.element.querySelector('.e-contextual-toolbar-wrapper');
+        var hdWrapper = parent.element.querySelector('#' + parent.element.id + '_headWrapper');
         if (parent.isImageLoaded) {
+            var isCropSelection = false;
+            var splitWords = void 0;
+            if (Browser.isDevice) {
+                if (parent.activeObj.shape) {
+                    splitWords = parent.activeObj.shape.split('-');
+                }
+                if (parent.currObjType.isCustomCrop) {
+                    isCropSelection = true;
+                }
+                else if (splitWords && splitWords[0] === 'crop') {
+                    isCropSelection = true;
+                }
+            }
             var frameObj = { bool: null };
             parent.notify('toolbar', { prop: 'getFrameToolbar', onPropertyChange: false, value: { obj: frameObj } });
-            if (frameObj['bool'] || (isBlazor() && parent.currentToolbar == 'frame-toolbar')) {
+            /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
+            if (frameObj['bool'] || (isBlazor() && parent.currentToolbar === 'frame-toolbar')) {
                 isFrameToolbar = true;
             }
-            if ((parent.element.querySelector('#' + parent.element.id + '_contextualToolbar') &&
-                !parent.element.querySelector('#' + parent.element.id + '_contextualToolbar').parentElement.classList.contains('e-hide')) ||
-                (parent.element.querySelector('#' + parent.element.id + '_headWrapper')
-                    && !parent.element.querySelector('#' + parent.element.id + '_headWrapper').parentElement.classList.contains('e-hide'))) {
-                parent.element.querySelector('.e-contextual-toolbar-wrapper').classList.add('e-hide');
-                parent.okBtn();
+            if (!straightenObj['bool'] && ((ctToolbar && !ctToolbar.parentElement.classList.contains('e-hide')) ||
+                (hdWrapper && !hdWrapper.parentElement.classList.contains('e-hide')))) {
+                ctWrapper.classList.add('e-hide');
+                if (!isCropSelection) {
+                    parent.okBtn();
+                }
                 if (!isBlazor()) {
                     parent.notify('toolbar', { prop: 'refresh-main-toolbar', onPropertyChange: false });
                     parent.notify('toolbar', { prop: 'destroy-qa-toolbar', onPropertyChange: false });
@@ -1630,14 +1695,14 @@ var Transform = /** @class */ (function () {
             }
             if (parent.activeObj.shape !== undefined) {
                 isActiveObj = true;
-                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 } });
-                    if (!isBlazor()) {
-                        parent.notify('toolbar', { prop: 'destroy-qa-toolbar', onPropertyChange: false });
+                    if (isBlazor()) {
+                        parent.updateToolbar(parent.element, 'destroyQuickAccessToolbar');
                     }
                     else {
-                        parent.updateToolbar(parent.element, 'destroyQuickAccessToolbar');
+                        parent.notify('toolbar', { prop: 'destroy-qa-toolbar', onPropertyChange: false });
                     }
                 }
                 else {
@@ -1648,7 +1713,7 @@ var Transform = /** @class */ (function () {
             }
         }
         var tempFilter = this.lowerContext.filter;
-        var canvasWrapper = document.querySelector('#' + parent.element.id + '_canvasWrapper');
+        var canvasWrapper = parent.element.querySelector('#' + parent.element.id + '_canvasWrapper');
         if (canvasWrapper) {
             canvasWrapper.style.width = parent.element.offsetWidth - 2 + 'px';
         }
@@ -1659,27 +1724,29 @@ var Transform = /** @class */ (function () {
         else if (parent.element.querySelector('#' + parent.element.id + '_toolbar')) {
             toolbarHeight = parent.element.querySelector('#' + parent.element.id + '_toolbar').clientHeight;
         }
+        if (Browser.isDevice && straightenObj['bool']) {
+            cxtTbarHeight = parent.element.querySelector('#' + parent.element.id + '_contextualToolbarArea').clientHeight;
+        }
         parent.notify('toolbar', { prop: 'setToolbarHeight', value: { height: toolbarHeight } });
         if (Browser.isDevice) {
             if (canvasWrapper) {
-                canvasWrapper.style.height = parent.element.offsetHeight - (2 * toolbarHeight) - 5 + 'px';
+                canvasWrapper.style.height = parent.element.offsetHeight - ((2 * toolbarHeight) + cxtTbarHeight) - 4 + 'px';
             }
-            parent.lowerCanvas.height = parent.upperCanvas.height = parent.element.offsetHeight - (2 * toolbarHeight) - 5;
         }
         else {
             if (canvasWrapper) {
-                canvasWrapper.style.height = parent.element.offsetHeight - toolbarHeight - 3 + 'px';
+                canvasWrapper.style.height = parent.element.offsetHeight - toolbarHeight - 2 + 'px';
             }
-            parent.lowerCanvas.height = parent.upperCanvas.height = parent.element.offsetHeight - toolbarHeight - 3;
         }
+        parent.lowerCanvas.height = parent.upperCanvas.height = parseFloat(canvasWrapper.style.height);
         this.lowerContext.filter =
             'brightness(' + 1 + ') ' + 'contrast(' + 100 + '%) ' + 'hue-rotate(' + 0 + 'deg) ' +
                 'saturate(' + 100 + '%) ' + 'opacity(' + 1 + ') ' + 'blur(' + 0 + 'px) ' + 'sepia(0%) ' + 'grayscale(0%) ' + 'invert(0%)';
         parent.notify('filter', { prop: 'setAdjustmentValue', onPropertyChange: false, value: { adjustmentValue: this.lowerContext.filter } });
         parent.canvasFilter = this.lowerContext.filter;
-        this.parent.initialAdjustmentValue = this.lowerContext.filter;
+        parent.initialAdjustmentValue = this.lowerContext.filter;
         parent.clearContext(this.lowerContext);
-        this.parent.clearContext(this.upperContext);
+        parent.clearContext(this.upperContext);
         if (parent.isImageLoaded) {
             parent.notify('shape', { prop: 'applyActObj', onPropertyChange: false, value: { isMouseDown: null } });
             parent.notify('shape', { prop: 'refreshActiveObj', onPropertyChange: false });
@@ -1700,21 +1767,28 @@ var Transform = /** @class */ (function () {
                     parent.notify('toolbar', { prop: 'getToolbarHeight', value: { obj: obj_1 } });
                 }
                 if (Browser.isDevice) {
-                    canvasWrapper.style.height = (parseFloat(canvasWrapper.style.height) - (2 * obj_1['toolbarHeight'])) - 3 + 'px';
+                    canvasWrapper.style.height = (parseFloat(canvasWrapper.style.height) - (2 * obj_1['toolbarHeight']) - cxtTbarHeight) - 4 + 'px';
                 }
                 else {
-                    canvasWrapper.style.height = (parseFloat(canvasWrapper.style.height) - obj_1['toolbarHeight']) - 3 + 'px';
+                    canvasWrapper.style.height = (parseFloat(canvasWrapper.style.height) - obj_1['toolbarHeight']) - 2 + 'px';
                 }
             }
+            parent.lowerCanvas.width = parent.upperCanvas.width = parseFloat(canvasWrapper.style.width);
+            parent.lowerCanvas.height = parent.upperCanvas.height = parseFloat(canvasWrapper.style.height);
+            this.lowerContext.filter = tempFilter;
             var obj = { width: 0, height: 0 };
             this.calcMaxDimension(parent.img.srcWidth, parent.img.srcHeight, obj);
             var maxDimension = obj;
-            if (parent.transform.defaultZoomFactor > 0) {
+            if (straightenObj['bool'] && parent.transform.cropZoomFactor !== 0) {
+                maxDimension.width += (maxDimension.width * parent.transform.cropZoomFactor);
+                maxDimension.height += (maxDimension.height * parent.transform.cropZoomFactor);
+            }
+            else if (parent.transform.defaultZoomFactor > 0) {
                 maxDimension.width += (maxDimension.width * parent.transform.defaultZoomFactor);
                 maxDimension.height += (maxDimension.height * parent.transform.defaultZoomFactor);
             }
             parent.img.destLeft = (parent.lowerCanvas.clientWidth - maxDimension.width) / 2;
-            parent.img.destTop = (parent.lowerCanvas.clientHeight - maxDimension.height) / 2;
+            parent.img.destTop = (parent.lowerCanvas.clientHeight - maxDimension.height + 1) / 2;
             if (parent.transform.degree === 0 && parent.transform.currFlipState === '') {
                 if (parent.transform.defaultZoomFactor > 0) {
                     parent.img.destLeft += parent.panPoint.totalPannedPoint.x;
@@ -1734,6 +1808,8 @@ var Transform = /** @class */ (function () {
             }
             parent.notify('shape', { prop: 'zoomObjColl', onPropertyChange: false, value: { isPreventApply: null } });
             parent.notify('freehand-draw', { prop: 'zoomFHDColl', onPropertyChange: false, value: { isPreventApply: null } });
+            parent.notify('draw', { prop: 'clearOuterCanvas', onPropertyChange: false, value: { context: this.lowerContext } });
+            parent.notify('draw', { prop: 'clearOuterCanvas', onPropertyChange: false, value: { context: this.upperContext } });
             if (parent.isCircleCrop) {
                 parent.notify('crop', { prop: 'cropCircle', onPropertyChange: false,
                     value: { context: this.lowerContext, isSave: null, isFlip: null } });
@@ -1747,8 +1823,8 @@ var Transform = /** @class */ (function () {
                     /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
                     var toolbar_1 = getComponent(parent.element.id + '_toolbar', 'toolbar');
                     toolbar_1.refreshOverflow();
-                    if (parent.element.querySelector('.e-contextual-toolbar-wrapper')) {
-                        parent.element.querySelector('.e-contextual-toolbar-wrapper').classList.add('e-hide');
+                    if (ctWrapper && !straightenObj['bool']) {
+                        ctWrapper.classList.add('e-hide');
                     }
                 }
             }
@@ -1759,8 +1835,18 @@ var Transform = /** @class */ (function () {
                 parent.objColl.pop();
                 if (activeObj.activePoint.width !== 0 && activeObj.activePoint.height !== 0) {
                     this.lowerContext.clearRect(0, 0, parent.lowerCanvas.width, parent.lowerCanvas.height);
-                    parent.notify('draw', { prop: 'render-image', value: { isMouseWheel: true } });
+                    parent.notify('draw', { prop: 'render-image', value: { isMouseWheel: null } });
+                    parent.objColl.push(activeObj);
+                    parent.notify('shape', { prop: 'zoomObjColl', onPropertyChange: false, value: { isPreventApply: true } });
+                    parent.notify('freehand-draw', { prop: 'zoomFHDColl', onPropertyChange: false, value: { isPreventApply: null } });
+                    activeObj = extend({}, parent.objColl[parent.objColl.length - 1], null, true);
+                    parent.objColl.pop();
+                    this.lowerContext.clearRect(0, 0, parent.lowerCanvas.width, parent.lowerCanvas.height);
+                    parent.notify('draw', { prop: 'render-image', value: { isMouseWheel: null } });
                     parent.notify('draw', { prop: 'drawObject', onPropertyChange: false, value: { canvas: 'duplicate', obj: activeObj } });
+                    if (straightenObj['bool']) {
+                        parent.notify('draw', { prop: 'setStraightenActObj', value: { activeObj: activeObj } });
+                    }
                     if (parent.activeObj.shape === 'rectangle' || parent.activeObj.shape === 'ellipse' || parent.activeObj.shape === 'text' ||
                         parent.activeObj.shape === 'line' || parent.activeObj.shape === 'arrow' || parent.activeObj.shape === 'path' ||
                         parent.activeObj.shape === 'image') {
@@ -1774,11 +1860,11 @@ var Transform = /** @class */ (function () {
                 }
             }
             if (freehandObj['bool']) {
-                if (!isBlazor()) {
-                    parent.notify('toolbar', { prop: 'renderQAT', onPropertyChange: false, value: { isPenEdit: true } });
+                if (isBlazor()) {
+                    parent.updateToolbar(parent.element, 'quickAccessToolbar', 'pen');
                 }
                 else {
-                    parent.updateToolbar(parent.element, 'quickAccessToolbar', 'pen');
+                    parent.notify('toolbar', { prop: 'renderQAT', onPropertyChange: false, value: { isPenEdit: true } });
                 }
             }
             if (isFrameToolbar) {
@@ -1826,28 +1912,33 @@ var Transform = /** @class */ (function () {
             else if (parent.transform.degree !== 0 && parent.transform.cropZoomFactor > 0) {
                 parent.transform.zoomFactor = 0;
                 parent.transform.cropZoomFactor = null;
-                if (!isBlazor()) {
-                    parent.notify('toolbar', { prop: 'enable-disable-btns', onPropertyChange: false });
+                if (isBlazor()) {
+                    parent.updateToolbar(parent.element, 'enableDisableToolbarBtn');
                 }
                 else {
-                    parent.updateToolbar(parent.element, 'enableDisableToolbarBtn');
+                    parent.notify('toolbar', { prop: 'enable-disable-btns', onPropertyChange: false });
                 }
             }
         }
     };
     Transform.prototype.calcMaxDimension = function (width, height, obj, isImgShape) {
         var object = { toolbarHeight: 0 };
+        var parent = this.parent;
         if (!isBlazor()) {
-            this.parent.notify('toolbar', { prop: 'getToolbarHeight', value: { obj: object } });
+            parent.notify('toolbar', { prop: 'getToolbarHeight', value: { obj: object } });
         }
         else {
-            object['toolbarHeight'] = this.parent.toolbarHeight;
+            object['toolbarHeight'] = parent.toolbarHeight;
+        }
+        var canvasMaxWidth = isImgShape ? parent.element.clientWidth / 3 :
+            parent.element.clientWidth;
+        var canvasMaxHeight = isImgShape ? (parent.element.clientHeight - object['toolbarHeight']) / 3 :
+            parent.element.clientHeight - (object['toolbarHeight']); // 1px border
+        canvasMaxHeight = Browser.isDevice ? canvasMaxHeight - (object['toolbarHeight']) : canvasMaxHeight; // 1px border
+        if (Browser.isDevice && parent.isStraightening) {
+            var cxtTbar = parent.element.querySelector('#' + parent.element.id + '_contextualToolbarArea');
+            canvasMaxHeight -= cxtTbar ? cxtTbar.clientHeight : 0;
         }
-        var canvasMaxWidth = isImgShape ? this.parent.element.clientWidth / 3 :
-            this.parent.element.clientWidth;
-        var canvasMaxHeight = isImgShape ? (this.parent.element.clientHeight - object['toolbarHeight']) / 3 :
-            this.parent.element.clientHeight - object['toolbarHeight'];
-        canvasMaxHeight = Browser.isDevice ? canvasMaxHeight - object['toolbarHeight'] : canvasMaxHeight;
         if (isNullOrUndefined(isImgShape)) {
             if (canvasMaxWidth > 30) {
                 canvasMaxWidth -= 30;
@@ -1870,12 +1961,12 @@ var Transform = /** @class */ (function () {
         }
         if (isNullOrUndefined(isImgShape)) {
             var cropObj = { bool: null };
-            this.parent.notify('crop', { prop: 'getPreventScaling', onPropertyChange: false,
+            parent.notify('crop', { prop: 'getPreventScaling', onPropertyChange: false,
                 value: { obj: cropObj } });
-            if (cropObj['bool'] && this.parent.cropObj.activeObj.activePoint &&
-                this.parent.cropObj.activeObj.activePoint.width !== 0 && this.parent.cropObj.activeObj.activePoint.height !== 0) {
-                cssMaxWidth = this.parent.cropObj.activeObj.activePoint.width;
-                cssMaxHeight = this.parent.cropObj.activeObj.activePoint.height;
+            if (cropObj['bool'] && parent.cropObj.activeObj.activePoint &&
+                parent.cropObj.activeObj.activePoint.width !== 0 && parent.cropObj.activeObj.activePoint.height !== 0) {
+                cssMaxWidth = parent.cropObj.activeObj.activePoint.width;
+                cssMaxHeight = parent.cropObj.activeObj.activePoint.height;
             }
         }
         if (obj) {
@@ -1884,7 +1975,7 @@ var Transform = /** @class */ (function () {
         }
         return { width: cssMaxWidth, height: cssMaxHeight };
     };
-    Transform.prototype.updatePanPoints = function (panRegion, obj) {
+    Transform.prototype.updatePanPoints = function () {
         var parent = this.parent;
         var tempActObj = extend({}, parent.activeObj, {}, true);
         var tempDestLeft = parent.img.destLeft;
@@ -1894,42 +1985,42 @@ var Transform = /** @class */ (function () {
         }
         var xDiff = this.panMove.x - this.tempPanMove.x;
         var yDiff = this.panMove.y - this.tempPanMove.y;
-        switch (panRegion) {
-            case '':
-                parent.img.destLeft += xDiff;
-                parent.img.destTop += yDiff;
-                break;
-            case 'horizontal':
-                this.updateFlipActiveObj(panRegion);
-                xDiff = this.tempPanMove.x - this.panMove.x;
-                parent.img.destLeft += xDiff;
-                parent.img.destTop += yDiff;
-                break;
-            case 'vertical':
-                this.updateFlipActiveObj(panRegion);
-                yDiff = this.tempPanMove.y - this.panMove.y;
-                parent.img.destLeft += xDiff;
-                parent.img.destTop += yDiff;
-                break;
-            case 'horizontalVertical':
-                this.updateFlipActiveObj(panRegion);
-                xDiff = this.tempPanMove.x - this.panMove.x;
-                parent.img.destLeft += xDiff;
-                parent.img.destTop -= yDiff;
-                break;
-            case 'verticalHorizontal':
-                this.updateFlipActiveObj(panRegion);
-                yDiff = this.tempPanMove.y - this.panMove.y;
-                parent.img.destLeft -= xDiff;
-                parent.img.destTop += yDiff;
+        parent.img.destLeft += xDiff;
+        parent.img.destTop += yDiff;
+        this.limitPan();
+        var obj = { bool: null };
+        var object = { isIntersect: null };
+        parent.notify('draw', { prop: 'updateImgCanvasPoints', onPropertyChange: false });
+        parent.notify('draw', { prop: 'isLinesIntersect', onPropertyChange: false, value: { obj: object } });
+        parent.notify('draw', { prop: 'isSelOutsideImg', onPropertyChange: false, value: { obj: obj } });
+        var count = 0;
+        while (parent.transform.straighten !== 0 && (object['isIntersect'] || obj['bool'])) {
+            count++;
+            parent.img.destLeft = tempDestLeft;
+            parent.img.destTop = tempDestTop;
+            if (xDiff !== 0 && xDiff > 0) {
+                xDiff -= 1;
+            }
+            else if (xDiff !== 0 && xDiff < 0) {
+                xDiff += 1;
+            }
+            if (yDiff !== 0 && yDiff > 0) {
+                yDiff -= 1;
+            }
+            else if (yDiff !== 0 && yDiff < 0) {
+                yDiff += 1;
+            }
+            if ((xDiff === 0 && yDiff === 0) || count === 200) {
                 break;
+            }
+            parent.img.destLeft += xDiff;
+            parent.img.destTop += yDiff;
+            this.limitPan();
+            parent.notify('draw', { prop: 'updateImgCanvasPoints', onPropertyChange: false });
+            parent.notify('draw', { prop: 'isLinesIntersect', onPropertyChange: false, value: { obj: object } });
+            parent.notify('draw', { prop: 'isSelOutsideImg', onPropertyChange: false, value: { obj: obj } });
         }
-        this.limitPan();
         parent.activeObj = tempActObj;
-        if (obj) {
-            obj['x'] = parent.img.destLeft - tempDestLeft;
-            obj['y'] = parent.img.destTop - tempDestTop;
-        }
         return { x: parent.img.destLeft - tempDestLeft, y: parent.img.destTop - tempDestTop };
     };
     Transform.prototype.resizeImage = function (width, height) {
@@ -1941,29 +2032,29 @@ var Transform = /** @class */ (function () {
         parent.img.srcTop = 0;
         parent.isAspectRatio = true;
         var minimum = [];
-        parent.img.srcWidth = parent.baseImg.width;
-        parent.img.srcHeight = parent.baseImg.height;
-        if (parent.resizeSrc && parent.resizeSrc.width != 0 && parent.resizeSrc.height != 0) {
+        parent.img.srcWidth = parent.baseImgCanvas.width;
+        parent.img.srcHeight = parent.baseImgCanvas.height;
+        if (parent.resizeSrc && parent.resizeSrc.width !== 0 && parent.resizeSrc.height !== 0) {
             parent.img.srcLeft = parent.resizeSrc.startX;
             parent.img.srcTop = parent.resizeSrc.startY;
             parent.img.srcWidth = parent.resizeSrc.width;
             parent.img.srcHeight = parent.resizeSrc.height;
         }
         while ((width < parent.img.destWidth || height < parent.img.destHeight) && temp1) {
-            this.zoomAction(-.1, null, true);
+            this.zoomAction(-.1, null, true, true);
             if (width > parent.img.destWidth || height > parent.img.destHeight) {
                 while (width > parent.img.destWidth || height > parent.img.destHeight) {
-                    this.zoomAction(0.0125, null, true);
+                    this.zoomAction(0.0125, null, true, true);
                     temp1 = false;
                     minimum.push(parent.img.destWidth);
                 }
             }
         }
         while ((width > parent.img.destWidth || height > parent.img.destHeight) && temp1 && temp) {
-            this.zoomAction(.1, null, true);
+            this.zoomAction(.1, null, true, true);
             if (width < parent.img.destWidth || height < parent.img.destHeight) {
                 while (width < parent.img.destWidth) {
-                    this.zoomAction(-.0125, null, true);
+                    this.zoomAction(-.0125, null, true, true);
                     temp = false;
                     minimum.push(parent.img.destWidth);
                 }
@@ -1980,11 +2071,11 @@ var Transform = /** @class */ (function () {
             }
         }
         if (nearestNumber < width && temp) {
-            this.zoomAction(-.0125, null, true);
+            this.zoomAction(-.0125, null, true, true);
             temp = false;
         }
         if (nearestNumber > width && !temp) {
-            this.zoomAction(.0125, null, true);
+            this.zoomAction(.0125, null, true, true);
             temp = false;
         }
         this.zoomAction(.0125, null, true);
@@ -2010,18 +2101,21 @@ var Transform = /** @class */ (function () {
         parent.notify('draw', { prop: 'setCurrentObj', onPropertyChange: false, value: { obj: obj1['prevObj'] } });
         parent.objColl = extend([], obj1['prevObj']['objColl'], [], true);
         parent.pointColl = extend([], obj1['prevObj']['pointColl'], [], true);
+        parent.transform.straighten = 0;
         parent.notify('shape', { prop: 'zoomObjColl', onPropertyChange: false, value: { isPreventApply: null } });
         parent.notify('freehand-draw', { prop: 'zoomFHDColl', onPropertyChange: false, value: { isPreventApply: null } });
-        parent.notify('freehand-draw', { prop: 'updateFHDColl', onPropertyChange: false });
+        if (parent.transform.straighten === 0 && !this.isPreventSelect) {
+            parent.notify('freehand-draw', { prop: 'updateFHDColl', onPropertyChange: false });
+        }
         var tempwidth = width;
         var tempheight = height;
         var tempZoom = false;
         if (height >= width && height <= Math.ceil(parent.img.destHeight)) {
             while ((height <= Math.ceil(parent.img.destHeight)) && temp) {
-                this.zoomAction(-.1, null, true);
+                this.zoomAction(-.1, null, true, true);
                 if (width > parent.img.destWidth || height > parent.img.destHeight) {
                     while (width > parent.img.destWidth || height > parent.img.destHeight) {
-                        this.zoomAction(.0125, null, true);
+                        this.zoomAction(.0125, null, true, true);
                         temp = false;
                     }
                 }
@@ -2029,10 +2123,10 @@ var Transform = /** @class */ (function () {
         }
         else if (height <= width && width < parent.img.destWidth) {
             while ((width < parent.img.destWidth) && temp) {
-                this.zoomAction(-.1, null, true);
+                this.zoomAction(-.1, null, true, true);
                 if (width > parent.img.destWidth || height > parent.img.destHeight) {
                     while (width > parent.img.destWidth || height > parent.img.destHeight) {
-                        this.zoomAction(.0125, null, true);
+                        this.zoomAction(.0125, null, true, true);
                         temp = false;
                     }
                 }
@@ -2040,31 +2134,31 @@ var Transform = /** @class */ (function () {
         }
         else if (height >= width && height >= parent.img.destHeight) {
             while ((height >= parent.img.destHeight) && temp) {
-                this.zoomAction(.1, null, true);
+                this.zoomAction(.1, null, true, true);
             }
         }
         else if (width >= height && width >= parent.img.destWidth) {
             while ((width >= parent.img.destWidth) && temp) {
-                this.zoomAction(.1, null, true);
+                this.zoomAction(.1, null, true, true);
             }
             if (width < parent.img.destWidth && height < parent.img.destHeight) {
                 while (width < parent.img.destWidth && height < parent.img.destHeight) {
-                    this.zoomAction(-.0125, null, true);
+                    this.zoomAction(-.0125, null, true, true);
                     temp = false;
                 }
-                this.zoomAction(.0125, null, true);
+                this.zoomAction(.0125, null, true, true);
             }
         }
         else if (height > parent.img.destHeight && width > parent.img.destWidth) {
             while ((height > parent.img.destHeight) && (width > parent.img.destWidth) && temp) {
-                this.zoomAction(.1, null, true);
+                this.zoomAction(.1, null, true, true);
             }
             if (width < parent.img.destWidth && height < parent.img.destHeight) {
                 while (width < parent.img.destWidth && height < parent.img.destHeight) {
-                    this.zoomAction(-.0125, null, true);
+                    this.zoomAction(-.0125, null, true, true);
                     temp = false;
                 }
-                this.zoomAction(.0125, null, true);
+                this.zoomAction(.0125, null, true, true);
             }
         }
         this.resizeImg(activeObj, width, height);
@@ -2072,21 +2166,21 @@ var Transform = /** @class */ (function () {
         height = tempheight;
         if ((height !== parent.img.destHeight || width !== parent.img.destWidth)) {
             while ((height > parent.img.destHeight || width > parent.img.destWidth)) {
-                this.zoomAction(.0125, null, true);
+                this.zoomAction(.0125, null, true, true);
                 tempZoom = true;
             }
             if (tempZoom) {
-                this.zoomAction(-.0125, null, true);
+                this.zoomAction(-.0125, null, true, true);
                 tempZoom = false;
             }
         }
         if ((height !== parent.img.destHeight || width !== parent.img.destWidth)) {
             while ((height < parent.img.destHeight || width < parent.img.destWidth)) {
-                this.zoomAction(-.0125, null, true);
+                this.zoomAction(-.0125, null, true, true);
                 tempZoom = true;
             }
             if (tempZoom) {
-                this.zoomAction(-.0125, null, true);
+                this.zoomAction(-.0125, null, true, true);
                 tempZoom = false;
             }
         }
@@ -2104,6 +2198,7 @@ var Transform = /** @class */ (function () {
         var heightRatio = height / parent.img.destHeight;
         if (activeObj.shape) {
             parent.currSelectionPoint = activeObj;
+            parent.notify('crop', { prop: 'setInitCrop', onPropertyChange: false, value: { bool: true } });
         }
         else if (parent.img.srcWidth === parent.baseImgCanvas.width && parent.img.srcHeight === parent.baseImgCanvas.height) {
             parent.currSelectionPoint = null;
@@ -2123,11 +2218,31 @@ var Transform = /** @class */ (function () {
         height = parent.activeObj.activePoint.height * heightRatio;
         var sx = (parent.activeObj.activePoint.startX + (parent.activeObj.activePoint.width / 2)) - (width / 2);
         var sy = (parent.activeObj.activePoint.startY + (parent.activeObj.activePoint.height / 2)) - (height / 2);
+        var count = 0;
+        while (Browser.isDevice && count < 500 && (sx < 0 || sy < 0 || (sx + width) > parent.img.destWidth
+            || (sy + height) > parent.img.destHeight)) {
+            count++;
+            width -= 1;
+            height -= 1;
+            sx = (parent.activeObj.activePoint.startX + (parent.activeObj.activePoint.width / 2)) - (width / 2);
+            sy = (parent.activeObj.activePoint.startY + (parent.activeObj.activePoint.height / 2)) - (height / 2);
+        }
         parent.transform.defaultZoomFactor = 0;
         parent.notify('draw', { prop: 'setResizeSelect', value: { bool: true } });
+        parent.notify('draw', { prop: 'setIsCropSelect', value: { bool: true } });
         parent.notify('draw', { prop: 'select', onPropertyChange: false,
             value: { type: 'custom', startX: sx, startY: sy, width: width, height: height } });
         parent.notify('draw', { prop: 'setResizeSelect', value: { bool: false } });
+        if (parent.transform.straighten !== 0) {
+            var obj = { isIntersect: null, arr: null };
+            parent.notify('draw', { prop: 'updateImgCanvasPoints', onPropertyChange: false });
+            parent.notify('draw', { prop: 'isLinesIntersect', onPropertyChange: false, value: { obj: obj } });
+            while (obj['arr'][0] || obj['arr'][1] || obj['arr'][2] || obj['arr'][3]) {
+                this.zoomAction(.0125, null, true);
+                parent.notify('draw', { prop: 'updateImgCanvasPoints', onPropertyChange: false });
+                parent.notify('draw', { prop: 'isLinesIntersect', onPropertyChange: false, value: { obj: obj } });
+            }
+        }
         parent.isCropToolbar = true;
         parent.crop();
         parent.isCropToolbar = false;
@@ -2160,30 +2275,40 @@ var Transform = /** @class */ (function () {
         }
         var aspectIcon = parent.element.querySelector('#' + parent.element.id + '_aspectratio');
         var nonAspectIcon = parent.element.querySelector('#' + parent.element.id + '_nonaspectratio');
-        if (!isNullOrUndefined(aspectIcon) && !isNullOrUndefined(nonAspectIcon)) {
+        if (aspectIcon && nonAspectIcon) {
             parent.notify('toolbar', { prop: 'initResizeToolbar' });
             if (Browser.isDevice) {
                 parent.notify('toolbar', { prop: 'init-main-toolbar', value: { isApplyBtn: false, isDevice: true, isOkBtn: true, isResize: true } });
             }
         }
-        var resizeEventArgs = { cancel: false, previousWidth: Math.ceil(parent.img.destWidth), previousHeight: Math.ceil(parent.img.destHeight),
-            width: Math.ceil(width), height: height && height !== 0 ? Math.ceil(height) : (parent.aspectHeight ? parent.aspectHeight : Math.ceil(parent.img.destHeight)),
+        var resizeEventArgs = { cancel: false, previousWidth: Math.ceil(parent.img.destWidth),
+            previousHeight: Math.ceil(parent.img.destHeight), width: Math.ceil(width), height: height && height !== 0 ? Math.ceil(height) :
+                (parent.aspectHeight ? parent.aspectHeight : Math.ceil(parent.img.destHeight)),
             isAspectRatio: isAspectRatio ? isAspectRatio : false };
         if (!isBlazor()) {
             parent.trigger('resizing', resizeEventArgs);
             if (!resizeEventArgs.cancel) {
                 this.resizeEventHandler(resizeEventArgs);
             }
+            else if (parent.aspectHeight && parent.aspectWidth) {
+                parent.aspectHeight = resizeEventArgs.previousHeight;
+                parent.aspectWidth = resizeEventArgs.previousWidth;
+            }
         }
-        else if (isBlazor() && parent.events && parent.events.imageResizing.hasDelegate === true) {
+        else if (isBlazor() && parent.events && parent.events.imageResizing.hasDelegate === true && !parent.isResizeOkBtn) {
             /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
-            parent.dotNetRef.invokeMethodAsync('OnImageResizingAsync', resizeEventArgs).then(function (args) {
+            parent.dotNetRef.invokeMethodAsync('OnImageResizingAsync', 'ImageResizing', resizeEventArgs, null).then(function (args) {
+                _this.resizeEventCancel = args.cancel;
                 if (!args.cancel) {
                     _this.resizeEventHandler(args);
                 }
+                else if (parent.aspectHeight && parent.aspectWidth) {
+                    parent.aspectHeight = resizeEventArgs.previousHeight;
+                    parent.aspectWidth = resizeEventArgs.previousWidth;
+                }
             });
         }
-        else {
+        else if (!this.resizeEventCancel) {
             this.resizeEventHandler(resizeEventArgs);
         }
     };
@@ -2192,8 +2317,8 @@ var Transform = /** @class */ (function () {
         var isRotate;
         var aspectRatioWidth = parent.element.querySelector('#' + parent.element.id + '_resizeWidth');
         var aspectRatioHeight = parent.element.querySelector('#' + parent.element.id + '_resizeHeight');
-        var widthElem = parent.element.querySelector(".e-ie-toolbar-e-resize-width-input .e-numerictextbox");
-        var heightElem = parent.element.querySelector(".e-ie-toolbar-e-resize-height-input .e-numerictextbox");
+        var heightElem = parent.element.querySelector('.e-ie-toolbar-e-resize-height-input .e-textbox');
+        var widthElem = parent.element.querySelector('.e-ie-toolbar-e-resize-width-input .e-textbox');
         if (args.isAspectRatio) {
             if (this.resizedImgAngle == null || this.resizedImgAngle !== parent.transform.degree) {
                 this.resizedImgAngle = parent.transform.degree;
@@ -2201,22 +2326,43 @@ var Transform = /** @class */ (function () {
             }
             if (isRotate) {
                 parent.notify('transform', { prop: 'resizeImage', value: { width: args.width, height: 0 } });
+                var originalWidth = parent.img.destWidth;
+                var originalHeight = parent.img.destHeight;
+                var aspectRatioWidthValue = void 0;
+                if (!isBlazor()) {
+                    aspectRatioWidthValue = parseFloat(aspectRatioWidth.value === '' ? aspectRatioWidth.placeholder :
+                        aspectRatioWidth.value);
+                }
+                else {
+                    aspectRatioWidthValue = parseFloat(widthElem.value === '' ? widthElem.placeholder : widthElem.value);
+                }
                 if (aspectRatioHeight) {
-                    getComponent(aspectRatioHeight, 'numerictextbox').value = Math.floor(parent.img.destHeight);
-                    aspectRatioHeight.value = Math.floor(parent.img.destHeight).toString() + ' px';
-                    parent.aspectHeight = Math.floor(parent.img.destHeight);
+                    var value = aspectRatioWidthValue / (originalWidth / originalHeight);
+                    var height = value % 1 >= 0.5 || value % 1 <= -0.5 ? Math.round(value) : (value < 0) ? Math.ceil(value) : Math.floor(value);
+                    getComponent(aspectRatioHeight, 'numerictextbox').value = height;
+                    aspectRatioHeight.value = height.toString() + ' px';
+                    parent.aspectHeight = height;
                     if (aspectRatioWidth && aspectRatioWidth.value === '') {
-                        getComponent(aspectRatioWidth, 'numerictextbox').value = Math.floor(parent.img.destWidth);
-                        aspectRatioWidth.value = Math.floor(parent.img.destWidth).toString() + ' px';
-                        parent.aspectWidth = Math.floor(parent.img.destWidth);
+                        var aspectRatioHeightValue = parseFloat(aspectRatioHeight.value === '' ? aspectRatioHeight.placeholder :
+                            aspectRatioHeight.value);
+                        value = aspectRatioHeightValue / (originalHeight / originalWidth);
+                        var width = value % 1 >= 0.5 || value % 1 <= -0.5 ? Math.round(value) : (value < 0) ? Math.ceil(value) : Math.floor(value);
+                        getComponent(aspectRatioWidth, 'numerictextbox').value = width;
+                        aspectRatioWidth.value = width.toString() + ' px';
+                        parent.aspectWidth = width;
                     }
                 }
                 else if (heightElem) {
-                    heightElem.value = Math.floor(parent.img.destHeight).toString();
-                    parent.aspectHeight = Math.floor(parent.img.destHeight);
+                    var value = aspectRatioWidthValue / (originalWidth / originalHeight);
+                    var height = value % 1 >= 0.5 || value % 1 <= -0.5 ? Math.round(value) : (value < 0) ? Math.ceil(value) : Math.floor(value);
+                    heightElem.value = height.toString();
+                    parent.aspectHeight = height;
                     if (widthElem && widthElem.value === '') {
-                        widthElem.value = Math.floor(parent.img.destWidth).toString();
-                        parent.aspectWidth = Math.floor(parent.img.destWidth);
+                        var aspectRatioHeightValue = parseFloat(heightElem.value === '' ? heightElem.placeholder : heightElem.value);
+                        value = aspectRatioHeightValue / (originalHeight / originalWidth);
+                        var width = value % 1 >= 0.5 || value % 1 <= -0.5 ? Math.round(value) : (value < 0) ? Math.ceil(value) : Math.floor(value);
+                        widthElem.value = width.toString();
+                        parent.aspectWidth = width;
                     }
                 }
             }
@@ -2232,7 +2378,9 @@ var Transform = /** @class */ (function () {
             if (isRotate) {
                 parent.notify('transform', { prop: 'setPreventDownScale', value: { bool: true } });
                 parent.notify('transform', { prop: 'resizeCrop', value: { width: args.width, height: args.height } });
+                parent.notify('undo-redo', { prop: 'setPreventUR', value: { bool: true } });
                 parent.okBtn();
+                parent.notify('undo-redo', { prop: 'setPreventUR', value: { bool: false } });
                 parent.resizeSrc = { startX: parent.img.srcLeft, startY: parent.img.srcTop, width: parent.img.srcWidth,
                     height: parent.img.srcHeight };
                 if (isBlazor()) {
@@ -2251,6 +2399,30 @@ var Transform = /** @class */ (function () {
             }
         }
         this.resizedImgAngle = parent.transform.degree;
+        args = { previousHeight: args.previousHeight, previousWidth: args.previousWidth, width: args.width, height: args.height, isAspectRatio: args.isAspectRatio };
+        if (isBlazor() && parent.isResizeOkBtn && parent.events && parent.events.imageResized.hasDelegate === true) {
+            var resizeArgs = { width: args.width, height: args.height, isAspectRatio: args.isAspectRatio };
+            parent.dotNetRef.invokeMethodAsync('OnImageResizingAsync', 'ImageResized', null, resizeArgs);
+        }
+        else { }
+    };
+    Transform.prototype.straightenImage = function (degree) {
+        var parent = this.parent;
+        if (parent.toolbar && parent.toolbar.length === 0) {
+            parent.notify('draw', { prop: 'select', onPropertyChange: false,
+                value: { type: 'custom', startX: null, startY: null, width: null, height: null } });
+        }
+        if (isBlazor()) {
+            /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
+            parent.performCropClick();
+        }
+        else {
+            parent.notify('toolbar', { prop: 'performCropTransformClick', value: { shape: null } });
+        }
+        parent.setStraighten(degree, true);
+        if ((isBlazor() && parent.events && parent.events.straightening.hasDelegate === false) || !isBlazor()) {
+            parent.okBtn();
+        }
     };
     return Transform;
 }());