@syncfusion/ej2-image-editor 23.2.7 → 24.1.43

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

@@ -1,4 +1,4 @@
-import { extend, isBlazor, isNullOrUndefined } from '@syncfusion/ej2-base';
+import { Browser, extend, isBlazor, isNullOrUndefined } from '@syncfusion/ej2-base';
 var Crop = /** @class */ (function () {
     function Crop(parent) {
         this.croppedDegree = 0; // Specifies the degree when crop is performed
@@ -6,6 +6,7 @@ var Crop = /** @class */ (function () {
         this.tempFlipPanPoint = { x: 0, y: 0 };
         this.isPreventScaling = false;
         this.isInitCrop = false;
+        this.isTransformCrop = false;
         this.parent = parent;
         this.addEventListener();
     }
@@ -50,6 +51,9 @@ var Crop = /** @class */ (function () {
             case 'getCurrFlipState':
                 this.getCurrFlipState(args.value['panObj']);
                 break;
+            case 'getPreviousCropCurrentObj':
+                args.value['obj']['prevObj'] = this.prevCropCurrObj;
+                break;
             case 'setPreviousCropCurrentObj':
                 this.prevCropCurrObj = args.value['obj'];
                 break;
@@ -71,6 +75,18 @@ var Crop = /** @class */ (function () {
             case 'getPreventScaling':
                 args.value['obj']['bool'] = this.isPreventScaling;
                 break;
+            case 'adjustStraightenForShapes':
+                this.adjustStraightenForShapes(args.value['type'], args.value['isInitialRotated']);
+                break;
+            case 'resizeWrapper':
+                this.resizeWrapper();
+                break;
+            case 'setTransformCrop':
+                this.isTransformCrop = args.value['bool'];
+                break;
+            case 'setInitCrop':
+                this.isInitCrop = args.value['bool'];
+                break;
             case 'reset':
                 this.reset();
                 break;
@@ -95,15 +111,18 @@ var Crop = /** @class */ (function () {
         this.tempFlipPanPoint = { x: 0, y: 0 };
         this.isPreventScaling = false;
         this.isInitCrop = false;
+        this.isTransformCrop = false;
     };
     Crop.prototype.cropImg = function (isRotateCrop) {
         var parent = this.parent;
         var isNullCrop = isNullOrUndefined(isRotateCrop);
-        var resizeIcon = this.parent.element.querySelector('#' + this.parent.element.id + '_nonaspectratio');
+        var resizeIcon = parent.element.querySelector('#' + parent.element.id + '_nonaspectratio');
         var actPoint = parent.activeObj.activePoint;
+        var img = parent.img;
         var isRotated = false;
-        for (var i = 0; i < parent.rotateFlipColl.length; i++) {
-            if (parent.rotateFlipColl[i] === 90 || parent.rotateFlipColl[i] === -90) {
+        for (var i = 0, len = parent.rotateFlipColl.length; i < len; i++) {
+            var currentValue = parent.rotateFlipColl[i];
+            if (currentValue === 90 || currentValue === -90) {
                 isRotated = true;
             }
         }
@@ -113,57 +132,53 @@ var Crop = /** @class */ (function () {
         }
         if (isNullCrop && (parent.transform.degree !== 0) || isRotated) {
             this.updateCropObj();
-            var point = { startX: parent.img.destLeft, startY: parent.img.destTop, width: parent.img.destWidth,
-                height: parent.img.destHeight };
+            var point = { startX: img.destLeft, startY: img.destTop, width: img.destWidth, height: img.destHeight };
             parent.notify('transform', { prop: 'setCurrDestinationPoint', onPropertyChange: false, value: { point: point } });
             this.rotateCrop();
         }
         else if (isNullCrop && parent.transform.currFlipState !== '') {
             this.updateCropObj();
-            var point = { startX: parent.img.destLeft, startY: parent.img.destTop, width: parent.img.destWidth,
-                height: parent.img.destHeight };
+            var point = { startX: img.destLeft, startY: img.destTop, width: img.destWidth, height: img.destHeight };
             parent.notify('transform', { prop: 'setCurrDestinationPoint', onPropertyChange: false, value: { point: point } });
             this.flipCrop();
         }
         else {
+            this.adjustStraightenForShapes('initial', false);
             parent.notify('draw', { prop: 'setTempZoomFactor', onPropertyChange: false, value: { tempZoomFactor: parent.transform.zoomFactor } });
             var ratio = this.calcRatio();
             if (isNullCrop || !isRotateCrop) { // isRotateCrop is NULL or False
                 this.updateCropObj();
                 parent.notify('draw', { prop: 'resetPanPoints', onPropertyChange: false });
                 parent.notify('shape', { prop: 'updImgRatioForActObj', onPropertyChange: false });
-                var point = { startX: parent.img.destLeft, startY: parent.img.destTop, width: parent.img.destWidth,
-                    height: parent.img.destHeight };
+                var point = { startX: img.destLeft, startY: img.destTop, width: img.destWidth, height: img.destHeight };
                 parent.notify('transform', { prop: 'setCurrDestinationPoint', onPropertyChange: false, value: { point: point } });
                 parent.currSelectionPoint = extend({}, parent.activeObj, {}, true);
-                this.cropDestPoints = { startX: parent.img.destLeft, startY: parent.img.destTop, width: parent.img.destWidth,
-                    height: parent.img.destHeight };
+                this.cropDestPoints = { startX: img.destLeft, startY: img.destTop, width: img.destWidth, height: img.destHeight };
             }
             var obj = { width: 0, height: 0 };
-            parent.notify('transform', { prop: 'calcMaxDimension', onPropertyChange: false,
-                value: { width: actPoint.width * ratio.width,
+            parent.notify('transform', { prop: 'calcMaxDimension', onPropertyChange: false, value: { width: actPoint.width * ratio.width,
                     height: actPoint.height * ratio.height, obj: obj, isImgShape: null } });
             var maxDimension = obj;
             this.upperContext.clearRect(0, 0, parent.upperCanvas.width, parent.upperCanvas.height);
             this.lowerContext.clearRect(0, 0, parent.lowerCanvas.width, parent.lowerCanvas.height);
-            parent.img.srcLeft = (actPoint.startX * ratio.width) - (parent.img.destLeft * ratio.width);
-            parent.img.srcTop = (actPoint.startY * ratio.height) - (parent.img.destTop * ratio.height);
-            parent.img.srcWidth = (actPoint.width * ratio.width);
-            parent.img.srcHeight = (actPoint.height * ratio.height);
-            parent.img.destLeft = (parent.lowerCanvas.clientWidth - maxDimension.width) / 2;
-            parent.img.destTop = (parent.lowerCanvas.clientHeight - maxDimension.height) / 2;
-            parent.img.destWidth = maxDimension.width;
-            parent.img.destHeight = maxDimension.height;
+            parent.img = { srcLeft: (actPoint.startX * ratio.width) - (img.destLeft * ratio.width),
+                srcTop: (actPoint.startY * ratio.height) - (img.destTop * ratio.height),
+                srcWidth: (actPoint.width * ratio.width), srcHeight: (actPoint.height * ratio.height),
+                destLeft: (parent.lowerCanvas.clientWidth - maxDimension.width) / 2,
+                destTop: (parent.lowerCanvas.clientHeight - maxDimension.height + 1) / 2,
+                destWidth: maxDimension.width, destHeight: maxDimension.height };
             var temp = this.lowerContext.filter;
             parent.notify('draw', { prop: 'drawImage', onPropertyChange: false });
             this.lowerContext.filter = 'none';
             var activeObj = extend({}, parent.activeObj, {}, true);
             this.cropObjColl();
+            parent.transform.straighten = 0;
             parent.notify('shape', { prop: 'zoomObjColl', onPropertyChange: false, value: { isPreventApply: null } });
-            for (var i = 0, len = parent.objColl.length; i < len; i++) {
-                if (this.isObjInImage(parent.objColl[i])) {
+            var objColl = extend([], parent.objColl, [], true);
+            for (var i = 0, len = objColl.length; i < len; i++) {
+                if (this.isObjInImage(objColl[i])) {
                     parent.notify('shape', { prop: 'apply', onPropertyChange: false,
-                        value: { shape: parent.objColl[i].shape, obj: parent.objColl[i], canvas: null } });
+                        value: { shape: objColl[i].shape, obj: objColl[i], canvas: null } });
                     parent.notify('shape', { prop: 'refreshActiveObj', onPropertyChange: false });
                 }
             }
@@ -172,7 +187,7 @@ var Crop = /** @class */ (function () {
             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.currSelectionPoint != null && parent.currSelectionPoint.shape === 'crop-circle') {
+            if (parent.currSelectionPoint && parent.currSelectionPoint.shape === 'crop-circle') {
                 this.cropCircle(this.lowerContext);
             }
             else {
@@ -185,15 +200,45 @@ var Crop = /** @class */ (function () {
             parent.transform.defaultZoomFactor = 0;
         }
     };
+    Crop.prototype.adjustStraightenForShapes = function (type, isInitialRotated) {
+        var parent = this.parent;
+        var center = {
+            x: parent.img.destLeft + parent.img.destWidth / 2,
+            y: parent.img.destTop + parent.img.destHeight / 2
+        };
+        for (var _i = 0, _a = parent.objColl; _i < _a.length; _i++) {
+            var obj = _a[_i];
+            if (['rectangle', 'ellipse', 'text', 'image'].indexOf(obj.shape) !== -1) {
+                if (isInitialRotated || obj.rotatedAngle !== 0) {
+                    var _b = obj.activePoint, startX = _b.startX, startY = _b.startY, width = _b.width, height = _b.height;
+                    var angle = type === 'initial' ? obj.rotatedAngle : -obj.rotatedAngle;
+                    var diffX = startX + width / 2 - center.x;
+                    var diffY = startY + height / 2 - center.y;
+                    var cosAngle = Math.cos(angle);
+                    var sinAngle = Math.sin(angle);
+                    var centerX = cosAngle * diffX - sinAngle * diffY + center.x;
+                    var centerY = sinAngle * diffX + cosAngle * diffY + center.y;
+                    var diffXUpdated = centerX - startX - width / 2;
+                    var diffYUpdated = centerY - startY - height / 2;
+                    obj.activePoint.startX += diffXUpdated;
+                    obj.activePoint.startY += diffYUpdated;
+                    obj.activePoint.endX += diffXUpdated;
+                    obj.activePoint.endY += diffYUpdated;
+                }
+            }
+        }
+    };
     Crop.prototype.updateCropObj = function () {
         this.parent.afterCropActions = [];
         var object = { currObj: {} };
         this.parent.notify('filter', { prop: 'getCurrentObj', onPropertyChange: false, value: { object: object } });
         var obj = object['currObj'];
+        obj.straighten = this.parent.transform.straighten;
         this.parent.cropObj = extend({}, obj, {}, true);
     };
     Crop.prototype.rotateCrop = function () {
         var parent = this.parent;
+        var flipState = this.getCurrFlipState();
         var shape = parent.activeObj.shape || '';
         parent.notify('shape', { prop: 'updImgRatioForActObj', onPropertyChange: false });
         parent.currSelectionPoint = extend({}, parent.activeObj, {}, true);
@@ -206,14 +251,54 @@ var Crop = /** @class */ (function () {
         parent.notify('transform', { prop: 'setPreventSelect', onPropertyChange: false, value: { bool: true } });
         var coll = extend([], parent.rotateFlipColl, [], true);
         this.panToSelRangle(true);
+        activeObj = extend({}, parent.objColl[parent.objColl.length - 1], {}, true);
+        this.upperContext.clearRect(0, 0, parent.upperCanvas.width, parent.upperCanvas.height);
+        parent.notify('draw', { prop: 'drawObject', onPropertyChange: false, value: { canvas: 'duplicate', obj: activeObj } });
+        parent.objColl.pop();
+        parent.notify('shape', { prop: 'updImgRatioForActObj', onPropertyChange: false });
+        parent.objColl.push(parent.activeObj);
+        // For reverse straightening
+        var straighten = parent.transform.straighten;
+        if (straighten !== 0) {
+            parent.transform.straighten = 0;
+            parent.straightenBaseImageCanvas();
+            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: 'render-image', value: { isMouseWheel: false } });
+        }
         this.resetZoom();
         var afterCropActions = extend([], parent.afterCropActions, [], true);
         this.revertTransform('initial', coll);
+        // Perform straighten
+        if (straighten !== 0) {
+            parent.transform.straighten = (flipState === 'horizontal' || flipState === 'vertical') ? -straighten : straighten;
+            parent.straightenBaseImageCanvas();
+            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: 'render-image', value: { isMouseWheel: false } });
+            parent.notify('shape', { prop: 'zoomObjColl', onPropertyChange: false, value: { isPreventApply: null } });
+            parent.notify('freehand-draw', { prop: 'zoomFHDColl', onPropertyChange: false, value: { isPreventApply: null } });
+        }
         activeObj = extend({}, parent.objColl[parent.objColl.length - 1], {}, true);
         this.upperContext.clearRect(0, 0, parent.upperCanvas.width, parent.upperCanvas.height);
         parent.notify('draw', { prop: 'drawObject', onPropertyChange: false, value: { canvas: 'duplicate', obj: activeObj } });
         parent.objColl.pop();
         parent.transform.degree = 0;
+        // Checking for selection inside image
+        var object = { isIntersect: null };
+        parent.notify('draw', { prop: 'updateImgCanvasPoints', onPropertyChange: false });
+        parent.notify('draw', { prop: 'isLinesIntersect', onPropertyChange: false, value: { obj: object } });
+        var count = 0;
+        while (straighten !== 0 && object['isIntersect']) {
+            count++;
+            if (count === 50) {
+                break;
+            }
+            parent.notify('transform', { prop: 'zoomAction', onPropertyChange: false,
+                value: { zoomFactor: 0.025, zoomPoint: null }, isResize: null });
+            parent.notify('draw', { prop: 'updateImgCanvasPoints', onPropertyChange: false });
+            parent.notify('draw', { prop: 'isLinesIntersect', onPropertyChange: false, value: { obj: object } });
+        }
         this.cropImg(true);
         this.revertTransform('reverse', coll);
         parent.afterCropActions = afterCropActions;
@@ -232,7 +317,8 @@ var Crop = /** @class */ (function () {
         var obj = { isRotate: false };
         if (type === 'initial') {
             for (var i = coll.length - 1; i >= 0; i--) {
-                switch (coll[i]) {
+                var value = coll[i];
+                switch (value) {
                     case 90:
                         parent.notify('transform', { prop: 'rotate', value: { degree: -90, obj: obj } });
                         break;
@@ -240,20 +326,16 @@ var Crop = /** @class */ (function () {
                         parent.notify('transform', { prop: 'rotate', value: { degree: 90, obj: obj } });
                         break;
                     default:
-                        parent.notify('transform', { prop: 'flipImage', value: { direction: parent.toPascalCase(coll[i]) } });
+                        parent.notify('transform', { prop: 'flipImage', value: { direction: parent.toPascalCase(value.toString()) } });
                         break;
                 }
             }
         }
         else {
-            for (var i = 0, len = parent.objColl.length; i < len; i++) {
-                parent.objColl[i].shapeFlip = '';
-            }
-            for (var i = 0; i < parent.freehandCounter; i++) {
-                parent.pointColl[i].shapeFlip = '';
-            }
+            this.updateFlipState();
             for (var i = 0, len = coll.length; i < len; i++) {
-                switch (coll[i]) {
+                var value = coll[i];
+                switch (value) {
                     case 90:
                         parent.notify('transform', { prop: 'rotate', value: { degree: 90, obj: obj } });
                         break;
@@ -261,17 +343,32 @@ var Crop = /** @class */ (function () {
                         parent.notify('transform', { prop: 'rotate', value: { degree: -90, obj: obj } });
                         break;
                     default:
-                        parent.notify('transform', { prop: 'flipImage', value: { direction: parent.toPascalCase(coll[i]) } });
+                        parent.notify('transform', { prop: 'flipImage', value: { direction: parent.toPascalCase(value.toString()) } });
                         break;
                 }
             }
         }
     };
+    Crop.prototype.updateFlipState = function () {
+        var parent = this.parent;
+        var objColl = parent.objColl;
+        for (var i = 0, len = objColl.length; i < len; i++) {
+            objColl[i].shapeFlip = '';
+        }
+        // eslint-disable-next-line
+        var pointColl = parent.pointColl;
+        for (var i = 0; i < parent.freehandCounter; i++) {
+            pointColl[i].shapeFlip = '';
+        }
+    };
     Crop.prototype.resetZoom = function () {
         var parent = this.parent;
         if (parent.transform.zoomFactor > 0) {
             var zoomFactor = parent.transform.zoomFactor;
             var isUndoRedo = parent.isUndoRedo;
+            parent.setProperties({ zoomSettings: { zoomFactor: (zoomFactor * 10) } }, true);
+            parent.notify('transform', { prop: 'setPreviousZoomValue', onPropertyChange: false,
+                value: { previousZoomValue: parent.zoomSettings.zoomFactor } });
             for (var i = 0; i < (zoomFactor * 10); i++) {
                 parent.isUndoRedo = true;
                 parent.notify('transform', { prop: 'zoomAction', onPropertyChange: false,
@@ -293,18 +390,26 @@ var Crop = /** @class */ (function () {
         parent.notify('transform', { prop: 'setFlipColl', onPropertyChange: false, value: { flipColl: [] } });
         parent.notify('shape', { prop: 'updImgRatioForActObj', onPropertyChange: false });
         parent.objColl.push(parent.activeObj);
+        if (parent.transform.degree === 0) {
+            var panX = -parent.cropObj.totalPannedPoint.x;
+            var panY = -parent.cropObj.totalPannedPoint.y;
+            parent.img.destLeft += panX;
+            parent.img.destTop += panY;
+            parent.notify('transform', { prop: 'drawPannImage', value: { point: { x: panX, y: panY } } });
+            parent.activeObj = extend({}, parent.objColl[parent.objColl.length - 1], {}, true);
+            this.upperContext.clearRect(0, 0, parent.upperCanvas.width, parent.upperCanvas.height);
+            parent.notify('draw', { prop: 'drawObject', onPropertyChange: false, value: { canvas: 'duplicate', obj: parent.activeObj } });
+            parent.objColl.pop();
+            parent.notify('shape', { prop: 'updImgRatioForActObj', onPropertyChange: false });
+            parent.objColl.push(parent.activeObj);
+        }
         this.resetZoom();
         parent.currSelectionPoint = extend({}, parent.objColl[parent.objColl.length - 1], {}, true);
         this.lowerContext.clearRect(0, 0, parent.lowerCanvas.width, parent.lowerCanvas.height);
         this.upperContext.clearRect(0, 0, parent.upperCanvas.width, parent.upperCanvas.height);
         var temp = this.lowerContext.filter;
         parent.notify('draw', { prop: 'drawImage', onPropertyChange: false });
-        for (var i = 0, len = parent.objColl.length; i < len; i++) {
-            parent.objColl[i].shapeFlip = '';
-        }
-        for (var i = 0; i < parent.freehandCounter; i++) {
-            parent.pointColl[i].shapeFlip = '';
-        }
+        this.updateFlipState();
         parent.notify('shape', { prop: 'redrawObj', onPropertyChange: false, value: { degree: this.getCurrFlipState() } });
         parent.notify('freehand-draw', { prop: 'flipFHDColl', onPropertyChange: false,
             value: { value: this.getCurrFlipState() } });
@@ -326,12 +431,7 @@ var Crop = /** @class */ (function () {
         parent.transform.currFlipState = tempCurrFlipState;
         parent.notify('transform', { prop: 'setFlipColl', onPropertyChange: false, value: { flipColl: tempFlipColl } });
         this.lowerContext.filter = 'none';
-        for (var i = 0, len = parent.objColl.length; i < len; i++) {
-            parent.objColl[i].shapeFlip = '';
-        }
-        for (var i = 0; i < parent.freehandCounter; i++) {
-            parent.pointColl[i].shapeFlip = '';
-        }
+        this.updateFlipState();
         parent.notify('shape', { prop: 'redrawObj', onPropertyChange: false, value: { degree: this.getCurrFlipState() } });
         parent.notify('freehand-draw', { prop: 'flipFHDColl', onPropertyChange: false,
             value: { value: this.getCurrFlipState() } });
@@ -352,37 +452,31 @@ var Crop = /** @class */ (function () {
     Crop.prototype.cropObjColl = function () {
         var parent = this.parent;
         var point;
-        var activePoint;
         var shape;
+        var obj;
         if (parent.objColl.length > 0) {
             for (var i = 0, len = parent.objColl.length; i < len; i++) {
-                point = parent.objColl[i].activePoint;
-                activePoint = parent.activeObj.activePoint;
-                shape = parent.objColl[i].shape;
-                parent.objColl[i].imageRatio = { startX: ((point.startX - activePoint.startX) / activePoint.width),
-                    startY: ((point.startY - activePoint.startY) / activePoint.height),
-                    endX: ((point.endX - activePoint.startX) / activePoint.width),
-                    endY: ((point.endY - activePoint.startY) / activePoint.height),
-                    width: activePoint.width / point.width,
-                    height: activePoint.height / point.height };
+                obj = parent.objColl[i];
+                point = obj.activePoint;
+                var _a = parent.activeObj.activePoint, startX = _a.startX, startY = _a.startY, width = _a.width, height = _a.height;
+                shape = obj.shape;
+                obj.imageRatio = { startX: ((point.startX - startX) / width),
+                    startY: ((point.startY - startY) / height),
+                    endX: ((point.endX - startX) / width), endY: ((point.endY - startY) / height),
+                    width: width / point.width, height: height / point.height };
                 var degree = void 0;
                 var size = void 0;
                 switch (shape) {
                     case 'text':
-                        if (parent.objColl[i].shapeDegree === 0) {
-                            degree = this.parent.transform.degree;
-                        }
-                        else {
-                            degree = this.parent.transform.degree - parent.objColl[i].shapeDegree;
-                        }
+                        degree = (obj.shapeDegree === 0) ? parent.transform.degree : parent.transform.degree - obj.shapeDegree;
                         size = (degree === 0 || Math.abs(degree) === 180) ? point.width : point.height;
-                        parent.objColl[i].textSettings.fontRatio = size / parent.objColl[i].textSettings.fontSize;
+                        obj.textSettings.fontRatio = size / obj.textSettings.fontSize;
                         break;
                     case 'line':
                     case 'arrow':
                         this.cropPointCollection(i);
                         if (shape === 'arrow') {
-                            parent.notify('shape', { prop: 'updateArrowRatio', onPropertyChange: false, value: { obj: parent.objColl[i] } });
+                            parent.notify('shape', { prop: 'updateArrowRatio', onPropertyChange: false, value: { obj: obj } });
                         }
                         break;
                     case 'path':
@@ -400,6 +494,7 @@ var Crop = /** @class */ (function () {
         var width;
         var height;
         var point = parent.activeObj.activePoint;
+        var _a = parent.img, destLeft = _a.destLeft, destTop = _a.destTop, destWidth = _a.destWidth, destHeight = _a.destHeight;
         if (shape === 'path') {
             x = point.startX;
             y = point.startY;
@@ -407,64 +502,64 @@ var Crop = /** @class */ (function () {
             height = point.height;
         }
         else {
-            x = parent.img.destLeft;
-            y = parent.img.destTop;
-            width = parent.img.destWidth;
-            height = parent.img.destHeight;
+            x = destLeft;
+            y = destTop;
+            width = destWidth;
+            height = destHeight;
         }
-        var selPoint = parent.objColl[i];
-        for (var n = 0, len = selPoint.pointColl.length; n < len; n++) {
-            selPoint.pointColl[n].ratioX =
-                (selPoint.pointColl[n].x - x) / width;
-            selPoint.pointColl[n].ratioY =
-                (selPoint.pointColl[n].y - y) / height;
+        var pointColl = parent.objColl[i].pointColl;
+        for (var n = 0, len = pointColl.length; n < len; n++) {
+            pointColl[n].ratioX = (pointColl[n].x - x) / width;
+            pointColl[n].ratioY = (pointColl[n].y - y) / height;
         }
     };
     Crop.prototype.cropFreehandDrawColl = function () {
         var parent = this.parent;
-        // Update crop values to point collection
+        var _a = parent.activeObj.activePoint, startX = _a.startX, startY = _a.startY, width = _a.width, height = _a.height;
         for (var n = 0; n < parent.freehandCounter; n++) {
             parent.points = extend([], parent.pointColl[n].points, []);
             parent.notify('freehand-draw', { prop: 'setPointCounter', onPropertyChange: false, value: { value: 0 } });
             var len = parent.points.length;
             for (var l = 0; l < len; l++) {
-                parent.points[l].ratioX = (parent.points[l].x -
-                    parent.activeObj.activePoint.startX) / parent.activeObj.activePoint.width;
-                parent.points[l].ratioY = (parent.points[l].y -
-                    parent.activeObj.activePoint.startY) / parent.activeObj.activePoint.height;
+                parent.points[l].ratioX = (parent.points[l].x - startX) / width;
+                parent.points[l].ratioY = (parent.points[l].y - startY) / height;
             }
         }
         parent.notify('freehand-draw', { prop: 'updateCropPtsForSel', onPropertyChange: false });
     };
+    Crop.prototype.resetAnnotations = function () {
+        var parent = this.parent;
+        parent.objColl = [];
+        parent.pointColl = [];
+        parent.freehandCounter = 0;
+        parent.notify('freehand-draw', { prop: 'resetStraightenPoint' });
+    };
     Crop.prototype.setCurrSelPoints = function (isSetDimension) {
         var parent = this.parent;
         parent.allowDownScale = false;
         var destPoint = this.cropDestPoints;
         var filter = this.lowerContext.filter;
-        parent.img.srcLeft = 0;
-        parent.img.srcTop = 0;
-        parent.img.srcWidth = parent.baseImgCanvas.width;
-        parent.img.srcHeight = parent.baseImgCanvas.height;
-        parent.img.destLeft = destPoint.startX;
-        parent.img.destTop = destPoint.startY;
-        parent.img.destWidth = destPoint.width;
-        parent.img.destHeight = destPoint.height;
+        var isCropTab = parent.isCropTab;
+        parent.img = { srcLeft: 0, srcTop: 0, srcWidth: parent.baseImgCanvas.width, srcHeight: parent.baseImgCanvas.height,
+            destLeft: destPoint.startX, destTop: destPoint.startY, destWidth: destPoint.width, destHeight: destPoint.height };
+        var img = parent.img;
+        var currSelPoint = parent.currSelectionPoint;
         this.lowerContext.clearRect(0, 0, parent.lowerCanvas.width, parent.lowerCanvas.height);
         if (isSetDimension) {
             parent.notify('draw', { prop: 'setDestPoints', onPropertyChange: false });
         }
         parent.notify('draw', { prop: 'currTransState', onPropertyChange: false,
             value: { type: 'initial', isPreventDestination: null, context: null, isPreventCircleCrop: null } });
-        if (this.croppedDegree === 0 && parent.transform.degree === 0 && parent.currSelectionPoint
-            && parent.currSelectionPoint.shape !== 'crop-circle' && parent.currSelectionPoint.shape !== 'crop-square') {
-            parent.img.destLeft = destPoint.startX;
-            parent.img.destTop = destPoint.startY;
-            parent.img.destWidth = destPoint.width;
-            parent.img.destHeight = destPoint.height;
+        if (this.croppedDegree === 0 && parent.transform.degree === 0 && currSelPoint
+            && currSelPoint.shape !== 'crop-circle' && currSelPoint.shape !== 'crop-square') {
+            img.destLeft = destPoint.startX;
+            img.destTop = destPoint.startY;
+            img.destWidth = destPoint.width;
+            img.destHeight = destPoint.height;
         }
         if (parent.transform.degree === 0) {
-            parent.img.destLeft += parent.panPoint.totalPannedInternalPoint.x;
-            parent.img.destTop += parent.panPoint.totalPannedInternalPoint.y;
+            img.destLeft += parent.panPoint.totalPannedInternalPoint.x;
+            img.destTop += parent.panPoint.totalPannedInternalPoint.y;
         }
         parent.notify('draw', { prop: 'drawImage', onPropertyChange: false });
         this.lowerContext.filter = filter;
@@ -472,40 +567,47 @@ var Crop = /** @class */ (function () {
             value: { type: 'reverse', isPreventDestination: null, context: null, isPreventCircleCrop: true } });
         var cropObjColl = extend([], parent.objColl, null, true);
         var cropPointColl = extend([], parent.pointColl, null, true);
-        parent.objColl = [];
-        parent.pointColl = [];
-        parent.freehandCounter = 0;
+        var straightenObj = { straightenPoint: null };
+        parent.notify('freehand-draw', { prop: 'getStraightenPoint', onPropertyChange: false,
+            value: { obj: straightenObj } });
+        this.resetAnnotations();
+        if (isNullOrUndefined(parent.activeObj.shape) && parent.cropObj.activeObj.shape) {
+            parent.activeObj = extend({}, parent.cropObj.activeObj, null, true);
+        }
         this.panToSelRangle();
+        parent.isCropTab = isCropTab;
         parent.objColl = cropObjColl;
         parent.pointColl = cropPointColl;
         parent.freehandCounter = parent.pointColl.length;
+        if (straightenObj['straightenPoint']['x'] && straightenObj['straightenPoint']['y']) {
+            parent.notify('freehand-draw', { prop: 'setStraightenPoint', onPropertyChange: false,
+                value: { x: straightenObj['straightenPoint']['x'], y: straightenObj['straightenPoint']['y'],
+                    ratioX: straightenObj['straightenPoint']['ratioX'], ratioY: straightenObj['straightenPoint']['ratioY'] } });
+        }
         if (parent.cropObj.activeObj.shape) {
-            var destPoints = { startX: parent.img.destLeft, startY: parent.img.destTop, width: parent.img.destWidth,
-                height: parent.img.destHeight };
-            if (parent.currSelectionPoint && parent.currSelectionPoint.activePoint) {
-                parent.img.destLeft = parent.currSelectionPoint.activePoint.startX;
-                parent.img.destTop = parent.currSelectionPoint.activePoint.startY;
-                parent.img.destWidth = parent.currSelectionPoint.activePoint.width;
-                parent.img.destHeight = parent.currSelectionPoint.activePoint.height;
+            var destPoints = { startX: img.destLeft, startY: img.destTop, width: img.destWidth, height: img.destHeight };
+            if (currSelPoint && currSelPoint.activePoint) {
+                var _a = currSelPoint.activePoint, startX = _a.startX, startY = _a.startY, width = _a.width, height = _a.height;
+                img.destLeft = startX;
+                img.destTop = startY;
+                img.destWidth = width;
+                img.destHeight = height;
             }
             parent.notify('shape', { prop: 'zoomObjColl', onPropertyChange: false, value: { isPreventApply: null } });
             parent.notify('freehand-draw', { prop: 'zoomFHDColl', onPropertyChange: false, value: { isPreventApply: null } });
-            parent.img.destLeft = destPoints.startX;
-            parent.img.destTop = destPoints.startY;
-            parent.img.destWidth = destPoints.width;
-            parent.img.destHeight = destPoints.height;
+            img.destLeft = destPoints.startX;
+            img.destTop = destPoints.startY;
+            img.destWidth = destPoints.width;
+            img.destHeight = destPoints.height;
             parent.notify('freehand-draw', { prop: 'updateFHDColl', onPropertyChange: false });
             cropObjColl = extend([], parent.objColl, null, true);
             cropPointColl = extend([], parent.pointColl, null, true);
-            parent.objColl = [];
-            parent.pointColl = [];
-            parent.freehandCounter = 0;
+            parent.notify('freehand-draw', { prop: 'getStraightenPoint', onPropertyChange: false, value: { obj: straightenObj } });
+            this.resetAnnotations();
             var object = { selPointColl: null };
-            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.cropObj.filter = this.lowerContext.filter;
             var actObj = extend({}, parent.currSelectionPoint, null, true);
             parent.notify('draw', { prop: 'setCurrentObj', onPropertyChange: false, value: { obj: null } });
@@ -515,24 +617,40 @@ var Crop = /** @class */ (function () {
             parent.currSelectionPoint = null;
             parent.isCircleCrop = false;
             if (parent.transform.degree !== 0) {
+                if (isNullOrUndefined(parent.activeObj.shape) && parent.cropObj.activeObj.shape) {
+                    parent.activeObj = extend({}, parent.cropObj.activeObj, null, true);
+                }
                 parent.notify('transform', { prop: 'drawPannedImage', value: { xDiff: 0, yDiff: 0 } });
                 parent.panPoint.currentPannedPoint = { x: 0, y: 0 };
             }
             parent.objColl = cropObjColl;
             parent.pointColl = cropPointColl;
             parent.freehandCounter = parent.pointColl.length;
+            if (straightenObj['straightenPoint']['x'] && straightenObj['straightenPoint']['y']) {
+                parent.notify('freehand-draw', { prop: 'setStraightenPoint', onPropertyChange: false,
+                    value: { x: straightenObj['straightenPoint']['x'], y: straightenObj['straightenPoint']['y'],
+                        ratioX: straightenObj['straightenPoint']['ratioX'], ratioY: straightenObj['straightenPoint']['ratioY'] } });
+            }
             parent.notify('freehand-draw', { prop: 'setSelPointColl', onPropertyChange: false,
                 value: { obj: { selPointColl: cropSelPointColl } } });
             parent.notify('shape', { prop: 'iterateObjColl', onPropertyChange: false });
             parent.notify('freehand-draw', { prop: 'freehandRedraw', onPropertyChange: false,
                 value: { context: this.lowerContext, points: null } });
-            parent.notify('freehand-draw', { prop: 'updateFHDColl', onPropertyChange: false });
+            this.adjustStraightenForShapes('reverse', false);
+            parent.notify('freehand-draw', { prop: 'updateFHDColl', onPropertyChange: false, value: { isPreventApply: true } });
             parent.notify('shape', { prop: 'zoomObjColl', onPropertyChange: false, value: { isPreventApply: null } });
             parent.notify('freehand-draw', { prop: 'zoomFHDColl', onPropertyChange: false, value: { isPreventApply: null } });
             if (parent.transform.degree === 0) {
                 parent.notify('transform', { prop: 'drawPannImage', onPropertyChange: false,
                     value: { point: { x: 0, y: 0 } } });
             }
+            else {
+                if (isNullOrUndefined(parent.activeObj.shape) && parent.cropObj.activeObj.shape) {
+                    parent.activeObj = extend({}, parent.cropObj.activeObj, null, true);
+                }
+                parent.notify('transform', { prop: 'drawPannedImage', value: { xDiff: 0, yDiff: 0 } });
+                parent.panPoint.currentPannedPoint = { x: 0, y: 0 };
+            }
             parent.activeObj = activeObj;
             parent.notify('draw', { prop: 'drawObject', onPropertyChange: false, value: { canvas: 'duplicate' } });
             parent.notify('transform', { prop: 'setTempPanMove', onPropertyChange: false,
@@ -540,7 +658,10 @@ var Crop = /** @class */ (function () {
             if (!this.isInitCrop && parent.transform.degree === 0 && parent.cropObj.currFlipState !== '' &&
                 parent.cropObj.cropZoom !== 0) {
                 this.isInitCrop = true;
+                var obj = { activeObj: null };
+                parent.notify('draw', { prop: 'getStraightenActObj', onPropertyChange: false, value: { obj: obj } });
                 parent.notify('draw', { prop: 'performCancel', value: { isContextualToolbar: null } });
+                parent.notify('draw', { prop: 'setStraightenActObj', onPropertyChange: false, value: { activeObj: obj['activeObj'] } });
                 parent.notify('toolbar', { prop: 'refresh-toolbar', onPropertyChange: false, value: { type: 'croptransform',
                         isApplyBtn: false, isCropping: null, isZooming: null, cType: null } });
             }
@@ -549,6 +670,8 @@ var Crop = /** @class */ (function () {
             }
         }
         else {
+            this.adjustStraightenForShapes('reverse', true);
+            parent.notify('freehand-draw', { prop: 'updateFHDColl', onPropertyChange: false, value: { isPreventApply: true } });
             var temp = this.lowerContext.filter;
             this.lowerContext.filter = 'none';
             parent.notify('shape', { prop: 'iterateObjColl', onPropertyChange: false });
@@ -557,13 +680,15 @@ var Crop = /** @class */ (function () {
             this.lowerContext.filter = temp;
             parent.currSelectionPoint = null;
         }
+        if (document.querySelector('.e-ie-straighten-value-span')) {
+            document.querySelector('.e-ie-straighten-value-span').innerHTML = parent.transform.straighten.toString() + '&#176';
+        }
     };
     Crop.prototype.panToSelRangle = function (isReverse) {
         var parent = this.parent;
-        var panX = parent.transform.degree !== 0 ?
-            isReverse ? -parent.cropObj.totalPannedClientPoint.x : parent.cropObj.totalPannedClientPoint.x : 0;
-        var panY = parent.transform.degree !== 0 ?
-            isReverse ? -parent.cropObj.totalPannedClientPoint.y : parent.cropObj.totalPannedClientPoint.y : 0;
+        var pannedPoint = parent.cropObj.totalPannedClientPoint;
+        var panX = parent.transform.degree !== 0 ? isReverse ? -pannedPoint.x : pannedPoint.x : 0;
+        var panY = parent.transform.degree !== 0 ? isReverse ? -pannedPoint.y : pannedPoint.y : 0;
         if (parent.transform.degree !== 0) {
             parent.panPoint.currentPannedPoint = { x: panX, y: panY };
             parent.notify('transform', { prop: 'drawPannedImage', value: { xDiff: panX, yDiff: panY } });
@@ -572,6 +697,7 @@ var Crop = /** @class */ (function () {
     };
     Crop.prototype.cropCircle = function (context, isSave, isFlip) {
         var parent = this.parent;
+        var _a = parent.img, destLeft = _a.destLeft, destTop = _a.destTop, destWidth = _a.destWidth, destHeight = _a.destHeight;
         if (isFlip && parent.transform.currFlipState !== '') {
             parent.notify('draw', { prop: 'setTransform', onPropertyChange: false,
                 value: { context: context, value: parent.transform.currFlipState, isReverse: null } });
@@ -580,9 +706,9 @@ var Crop = /** @class */ (function () {
         context.filter = 'none';
         context.globalCompositeOperation = 'destination-in';
         context.beginPath();
-        var centerX = isNullOrUndefined(isSave) ? parent.img.destLeft + (parent.img.destWidth / 2) : context.canvas.width / 2;
-        var centerY = isNullOrUndefined(isSave) ? parent.img.destTop + (parent.img.destHeight / 2) : context.canvas.height / 2;
-        var radius = isSave ? context.canvas.width / 2 : parent.img.destWidth / 2;
+        var centerX = isNullOrUndefined(isSave) ? destLeft + (destWidth / 2) : context.canvas.width / 2;
+        var centerY = isNullOrUndefined(isSave) ? destTop + (destHeight / 2) : context.canvas.height / 2;
+        var radius = isSave ? context.canvas.width / 2 : destWidth / 2;
         context.arc(centerX, centerY, radius, 0, Math.PI * 2);
         context.closePath();
         context.fill();
@@ -658,62 +784,62 @@ var Crop = /** @class */ (function () {
             return;
         }
         var panRegion = '';
+        var degree = parent.transform.degree;
+        var _a = parent.panPoint.currentPannedPoint, x = _a.x, y = _a.y;
         if (parent.rotateFlipColl.length > 0 && typeof (parent.rotateFlipColl[0]) === 'number'
-            && parent.transform.degree < 0) {
+            && degree < 0) {
             panRegion = this.getCurrCropState('reverse', true);
         }
         else {
             panRegion = this.getCurrFlipState();
         }
-        if (parent.transform.degree % 90 === 0 && parent.transform.degree % 180 !== 0) {
-            if (parent.transform.degree === 90 || (parent.transform.degree === -90 &&
-                (panRegion === 'horizontal' || panRegion === 'vertical'))
-                || (parent.transform.degree === -270 && (panRegion === '' || panRegion === 'verticalHorizontal'
+        if (degree % 90 === 0 && degree % 180 !== 0) {
+            if (degree === 90 || (degree === -90 && (panRegion === 'horizontal' || panRegion === 'vertical'))
+                || (degree === -270 && (panRegion === '' || panRegion === 'verticalHorizontal'
                     || panRegion === 'horizontalVertical'))) {
                 if (panRegion === 'horizontal' || panRegion === '') {
-                    parent.img.destLeft += parent.panPoint.currentPannedPoint.y;
+                    parent.img.destLeft += y;
                 }
                 else {
-                    parent.img.destLeft -= parent.panPoint.currentPannedPoint.y;
+                    parent.img.destLeft -= y;
                 }
                 if (panRegion === '' || panRegion === 'vertical') {
-                    parent.img.destTop -= parent.panPoint.currentPannedPoint.x;
+                    parent.img.destTop -= x;
                 }
                 else {
-                    parent.img.destTop += parent.panPoint.currentPannedPoint.x;
+                    parent.img.destTop += x;
                 }
             }
-            else if (parent.transform.degree === 270 || (parent.transform.degree === -270 &&
-                (panRegion === 'horizontal' || panRegion === 'vertical'))
-                || (parent.transform.degree === -90 && (panRegion === '' || panRegion === 'verticalHorizontal'
+            else if (degree === 270 || (degree === -270 && (panRegion === 'horizontal' || panRegion === 'vertical'))
+                || (degree === -90 && (panRegion === '' || panRegion === 'verticalHorizontal'
                     || panRegion === 'horizontalVertical'))) {
                 if (panRegion === '' || panRegion === 'horizontal') {
-                    parent.img.destLeft -= parent.panPoint.currentPannedPoint.y;
+                    parent.img.destLeft -= y;
                 }
                 else {
-                    parent.img.destLeft += parent.panPoint.currentPannedPoint.y;
+                    parent.img.destLeft += y;
                 }
                 if (panRegion === '' || panRegion === 'vertical') {
-                    parent.img.destTop += parent.panPoint.currentPannedPoint.x;
+                    parent.img.destTop += x;
                 }
                 else {
-                    parent.img.destTop -= parent.panPoint.currentPannedPoint.x;
+                    parent.img.destTop -= x;
                 }
             }
         }
         else {
-            if (parent.transform.degree === 180 || parent.transform.degree === -180) {
+            if (degree === 180 || degree === -180) {
                 if (panRegion === '' || panRegion === 'vertical') {
-                    parent.img.destLeft -= parent.panPoint.currentPannedPoint.x;
+                    parent.img.destLeft -= x;
                 }
                 else {
-                    parent.img.destLeft += parent.panPoint.currentPannedPoint.x;
+                    parent.img.destLeft += x;
                 }
                 if (panRegion === '' || panRegion === 'horizontal') {
-                    parent.img.destTop -= parent.panPoint.currentPannedPoint.y;
+                    parent.img.destTop -= y;
                 }
                 else {
-                    parent.img.destTop += parent.panPoint.currentPannedPoint.y;
+                    parent.img.destTop += y;
                 }
             }
         }
@@ -721,22 +847,23 @@ var Crop = /** @class */ (function () {
     Crop.prototype.crop = function (obj) {
         var _this = this;
         var parent = this.parent;
+        var _a = parent.activeObj.activePoint, startX = _a.startX, startY = _a.startY, endX = _a.endX, endY = _a.endY;
         if (!parent.disabled && parent.isImageLoaded) {
             var object_1 = { isCropToolbar: parent.isCropToolbar };
             if (parent.currObjType.isUndoAction && !object_1['isCropToolbar']) {
                 parent.notify('undo-redo', { prop: 'refreshUrc', value: { bool: null } });
             }
-            var transitionArgs = { cancel: false, startPoint: { x: parent.activeObj.activePoint.startX,
-                    y: parent.activeObj.activePoint.startY }, endPoint: { x: parent.activeObj.activePoint.endX,
-                    y: parent.activeObj.activePoint.endY }, preventScaling: false };
+            var transitionArgs = { cancel: false, startPoint: { x: startX, y: startY },
+                endPoint: { x: endX, y: endY }, preventScaling: false };
             if (!object_1['isCropToolbar'] && isBlazor() && parent.events && parent.events.cropping.hasDelegate === true) {
-                if (parent.currentToolbar == 'resize-toolbar') {
-                    parent.dotNetRef.invokeMethodAsync('CropEventAsync', 'OnCrop', transitionArgs);
+                /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
+                if (parent.currentToolbar === 'resize-toolbar') {
+                    parent.dotNetRef.invokeMethodAsync('CropEventAsync', 'OnCrop', transitionArgs, null);
                     this.cropEvent(transitionArgs, obj, object_1);
                 }
                 else {
                     /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
-                    parent.dotNetRef.invokeMethodAsync('CropEventAsync', 'OnCrop', transitionArgs).then(function (args) {
+                    parent.dotNetRef.invokeMethodAsync('CropEventAsync', 'OnCrop', transitionArgs, null).then(function (args) {
                         _this.cropEvent(args, obj, object_1);
                     });
                 }
@@ -767,47 +894,84 @@ var Crop = /** @class */ (function () {
                     this.isPreventScaling = false;
                 }
                 this.cropImg();
+                parent.notify('freehand-draw', { prop: 'resetStraightenPoint' });
+                parent.isCropTab = false;
                 parent.transform.zoomFactor = 0;
                 parent.setProperties({ zoomSettings: { zoomFactor: 1 } }, true);
                 parent.notify('transform', { prop: 'setPreviousZoomValue', onPropertyChange: false,
                     value: { previousZoomValue: parent.zoomSettings.zoomFactor } });
-                var currSelPtObj = { prevCurrSelectionPoint: this.parent.prevCurrSelectionPoint };
-                prevObj.currSelectionPoint = extend({}, currSelPtObj['prevCurrSelectionPoint'], {}, true);
-                parent.notify('undo-redo', { prop: 'updateUndoRedoColl', onPropertyChange: false,
-                    value: { operation: 'crop', previousObj: prevObj, previousObjColl: prevObj.objColl,
-                        previousPointColl: prevObj.pointColl, previousSelPointColl: prevObj.selPointColl,
-                        previousCropObj: prevCropObj, previousText: null,
-                        currentText: null, previousFilter: null, isCircleCrop: parent.isCircleCrop } });
-                if (!object['isCropToolbar']) {
-                    parent.notify('undo-redo', { prop: 'updateCurrUrc', value: { type: 'ok' } });
+                if (!Browser.isDevice) {
+                    this.updateUndoRedoColl(prevObj, prevCropObj, object);
                 }
                 parent.notify('transform', { prop: 'setCropDimension', onPropertyChange: false,
                     value: { width: parent.cropObj.destPoints.width, height: parent.cropObj.destPoints.height } });
-                var aspectIcon = this.parent.element.querySelector('#' + this.parent.element.id + '_aspectratio');
-                var nonAspectIcon = this.parent.element.querySelector('#' + this.parent.element.id + '_nonaspectratio');
+                var aspectIcon = parent.element.querySelector('#' + parent.element.id + '_aspectratio');
+                var nonAspectIcon = parent.element.querySelector('#' + parent.element.id + '_nonaspectratio');
+                parent.notify('draw', { prop: 'render-image', value: { isMouseWheel: false } });
                 if (!isBlazor() && !object['isCropToolbar'] && (isNullOrUndefined(aspectIcon) && isNullOrUndefined(nonAspectIcon))) {
                     parent.notify('toolbar', { prop: 'refresh-toolbar', onPropertyChange: false, value: { type: 'main',
                             isApplyBtn: false, isCropping: false, isZooming: null, cType: null } });
+                }
+                else if (!object['isCropToolbar']) {
                     /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
+                    if (parent.currentToolbar !== 'resize-toolbar') {
+                        parent.updateToolbar(parent.element, 'imageLoaded');
+                    }
                 }
-                else if (!object['isCropToolbar'] && this.parent.currentToolbar !== 'resize-toolbar') {
-                    this.parent.updateToolbar(this.parent.element, 'imageLoaded');
+                this.resizeWrapper();
+                if (Browser.isDevice) {
+                    this.updateUndoRedoColl(prevObj, prevCropObj, object);
                 }
+                transitionArgs = { startPoint: transitionArgs.startPoint, endPoint: transitionArgs.endPoint };
+                if (!object['isCropToolbar'] && isBlazor() && parent.events && parent.events.cropped.hasDelegate === true) {
+                    parent.dotNetRef.invokeMethodAsync('CropEventAsync', 'Cropped', null, transitionArgs);
+                }
+                else { }
             }
         }
     };
-    Crop.prototype.calcRatio = function (obj, dimension) {
+    Crop.prototype.updateUndoRedoColl = function (prevObj, prevCropObj, object) {
         var parent = this.parent;
-        var widthRatio;
-        var heightRatio;
-        if (parent.transform.degree === 0 || parent.transform.degree % 180 === 0) {
-            widthRatio = (dimension ? dimension.width : parent.baseImgCanvas.width) / parent.img.destWidth;
-            heightRatio = (dimension ? dimension.height : parent.baseImgCanvas.height) / parent.img.destHeight;
+        var currSelPtObj = { prevCurrSelectionPoint: parent.prevCurrSelectionPoint };
+        prevObj.currSelectionPoint = extend({}, currSelPtObj['prevCurrSelectionPoint'], {}, true);
+        parent.notify('undo-redo', { prop: 'updateUndoRedoColl', onPropertyChange: false,
+            value: { operation: 'crop', previousObj: prevObj, previousObjColl: prevObj.objColl,
+                previousPointColl: prevObj.pointColl, previousSelPointColl: prevObj.selPointColl,
+                previousCropObj: prevCropObj, previousText: null,
+                currentText: null, previousFilter: null, isCircleCrop: parent.isCircleCrop } });
+        if (!object['isCropToolbar']) {
+            parent.notify('undo-redo', { prop: 'updateCurrUrc', value: { type: 'ok' } });
         }
-        else {
-            widthRatio = (dimension ? dimension.height : parent.baseImgCanvas.height) / parent.img.destWidth;
-            heightRatio = (dimension ? dimension.width : parent.baseImgCanvas.width) / parent.img.destHeight;
+    };
+    Crop.prototype.resizeWrapper = function () {
+        var parent = this.parent;
+        if (Browser.isDevice && !isBlazor()) {
+            var elem = parent.element;
+            var ctxToolbar = elem.querySelector('#' + elem.id + '_contextualToolbarArea');
+            if (ctxToolbar.style.position === '' && !this.isTransformCrop) {
+                ctxToolbar.style.position = 'absolute';
+                parent.isStraightening = false;
+                parent.update();
+                parent.notify('filter', { prop: 'setAdjustmentValue', value: { adjustmentValue: parent.canvasFilter } });
+            }
+        }
+        else if (Browser.isDevice && isBlazor() && !this.isTransformCrop) {
+            parent.isStraightening = false;
+            parent.update();
+            var canvasWrapper = parent.element.querySelector('#' + parent.element.id + '_canvasWrapper');
+            if (canvasWrapper) {
+                canvasWrapper.style.height = (parseInt(canvasWrapper.style.height) + 2) + 'px';
+            }
+            parent.notify('filter', { prop: 'setAdjustmentValue', value: { adjustmentValue: parent.canvasFilter } });
         }
+    };
+    Crop.prototype.calcRatio = function (obj, dimension) {
+        var parent = this.parent;
+        var degree = parent.transform.degree;
+        var _a = parent.img, destWidth = _a.destWidth, destHeight = _a.destHeight;
+        var _b = dimension || parent.baseImgCanvas, width = _b.width, height = _b.height;
+        var widthRatio = (degree === 0 || degree % 180 === 0) ? width / destWidth : height / destWidth;
+        var heightRatio = (degree === 0 || degree % 180 === 0) ? height / destHeight : width / destHeight;
         if (obj) {
             obj['width'] = widthRatio;
             obj['height'] = heightRatio;
@@ -816,19 +980,14 @@ var Crop = /** @class */ (function () {
     };
     Crop.prototype.isObjInImage = function (obj, dummyObj) {
         var parent = this.parent;
-        var isInside = false;
-        var startX = obj.activePoint.startX;
-        var endX = obj.activePoint.endX;
-        var startY = obj.activePoint.startY;
-        var endY = obj.activePoint.endY;
-        if ((startX >= parent.img.destLeft && endX <= (parent.img.destLeft + parent.img.destWidth)) ||
-            (startX <= parent.img.destLeft && endX >= parent.img.destLeft) ||
-            (startX <= (parent.img.destLeft + parent.img.destWidth) && endX >= (parent.img.destLeft + parent.img.destWidth)) ||
-            (startY >= parent.img.destTop && endY <= (parent.img.destTop + parent.img.destHeight)) ||
-            (startY <= parent.img.destTop && endY >= parent.img.destTop) ||
-            (startY <= (parent.img.destTop + parent.img.destHeight) && endY >= (parent.img.destTop + parent.img.destHeight))) {
-            isInside = true;
-        }
+        var _a = parent.img, destLeft = _a.destLeft, destTop = _a.destTop, destWidth = _a.destWidth, destHeight = _a.destHeight;
+        var _b = obj.activePoint, startX = _b.startX, endX = _b.endX, startY = _b.startY, endY = _b.endY;
+        var isInside = ((startX >= destLeft && endX <= (destLeft + destWidth)) ||
+            (startX <= destLeft && endX >= destLeft) ||
+            (startX <= (destLeft + destWidth) && endX >= (destLeft + destWidth)) ||
+            (startY >= destTop && endY <= (destTop + destHeight)) ||
+            (startY <= destTop && endY >= destTop) ||
+            (startY <= (destTop + destHeight) && endY >= (destTop + destHeight)));
         if (dummyObj) {
             dummyObj['isInside'] = isInside;
         }