@syncfusion/ej2-image-editor 30.2.4 → 31.1.17

package/dist/ts/image-editor/action/crop.ts

@@ -0,0 +1,867 @@
+import { Browser, extend, isNullOrUndefined } from '@syncfusion/ej2-base';
+import { ActivePoint, Dimension } from '@syncfusion/ej2-inputs';
+import { CropEventArgs, CurrentObject, ImageEditor, Point, SelectionPoint, ImageDimension } from '../index';
+
+export class Crop {
+    private parent: ImageEditor;
+    private lowerContext: CanvasRenderingContext2D;
+    private upperContext: CanvasRenderingContext2D;
+    private prevCropCurrObj: CurrentObject;
+    private croppedDegree: number = 0; // Specifies the degree when crop is performed
+    private cropDestPoints: ActivePoint = {startX: 0, startY: 0, width: 0, height: 0} as ActivePoint; // To redraw old image when navigate to crop tab
+    private tempFlipPanPoint: Point = {x: 0, y: 0};
+    private isPreventScaling: boolean = false;
+    private isInitCrop: boolean = false;
+    private isTransformCrop: boolean = false;
+
+    constructor(parent: ImageEditor) {
+        this.parent = parent;
+        this.addEventListener();
+    }
+
+    public destroy(): void {
+        if (this.parent.isDestroyed) { return; }
+        this.removeEventListener();
+    }
+
+    private addEventListener(): void {
+        this.parent.on('crop', this.cropping, this);
+        this.parent.on('destroyed', this.destroy, this);
+    }
+
+    private removeEventListener(): void {
+        this.parent.off('crop', this.cropping);
+        this.parent.off('destroyed', this.destroy);
+    }
+
+    private cropping(args?: { onPropertyChange: boolean, prop: string, value?: object }): void {
+        this.updateCropPvtVar();
+        switch (args.prop) {
+        case 'cropCircle':
+            this.cropCircle(args.value['context'], args.value['isSave'], args.value['isFlip']);
+            break;
+        case 'setCurrSelPoints':
+            this.setCurrSelPoints(args.value['isSetDimension']);
+            break;
+        case 'updateRotatePan':
+            this.updateRotatePan();
+            break;
+        case 'crop':
+            this.crop(args.value['obj']);
+            break;
+        case 'calcRatio':
+            this.calcRatio(args.value['obj'], args.value['dimension']);
+            break;
+        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;
+        case 'setCropDestPoints':
+            this.cropDestPoints = args.value['point'];
+            break;
+        case 'getTempFlipPanPoint':
+            args.value['obj']['point'] = this.tempFlipPanPoint;
+            break;
+        case 'setTempFlipPanPoint':
+            if (isNullOrUndefined(args.value['isAdd'])) {
+                this.tempFlipPanPoint = args.value['point'];
+            } else {
+                this.tempFlipPanPoint.x += args.value['point'].x;
+                this.tempFlipPanPoint.y += args.value['point'].y;
+            }
+            break;
+        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 'resetZoom':
+            this.resetZoom();
+            break;
+        case 'revertTransform':
+            this.revertTransform(args.value['type'], args.value['coll']);
+            break;
+        case 'reset':
+            this.reset();
+            break;
+        }
+    }
+
+    public getModuleName(): string {
+        return 'crop';
+    }
+
+    private updateCropPvtVar(): void {
+        const parent: ImageEditor = this.parent;
+        if (parent.lowerCanvas) {this.lowerContext = parent.lowerCanvas.getContext('2d'); }
+        if (parent.upperCanvas) {this.upperContext = parent.upperCanvas.getContext('2d'); }
+    }
+
+    private reset(): void {
+        this.prevCropCurrObj = null; this.croppedDegree = 0;
+        this.cropDestPoints = {startX: 0, startY: 0, width: 0, height: 0} as ActivePoint;
+        this.tempFlipPanPoint = {x: 0, y: 0}; this.isPreventScaling = false; this.isInitCrop = false;
+        this.isTransformCrop = false;
+    }
+
+    private cropImg(isRotateCrop?: boolean): void {
+        const parent: ImageEditor = this.parent; const isNullCrop: boolean = isNullOrUndefined(isRotateCrop);
+        const resizeIcon: HTMLInputElement = (parent.element.querySelector('#' + parent.element.id + '_nonaspectratio') as HTMLInputElement);
+        const actPoint: ActivePoint = parent.activeObj.activePoint; const img: ImageDimension = parent.img; let isRotated: boolean = false;
+        for (let i: number = 0, len: number = parent.rotateFlipColl.length; i < len; i++) {
+            const currentValue: number = parent.rotateFlipColl[i as number];
+            if (currentValue === 90 || currentValue === -90) {
+                isRotated = true;
+            }
+        }
+        parent.notify('draw', { prop: 'setImageEdited', onPropertyChange: false });
+        if (isNullCrop || resizeIcon) {
+            this.croppedDegree = parent.transform.degree;
+        }
+        if (isNullCrop && (parent.transform.degree !== 0) || isRotated) {
+            this.updateCropObj();
+            const point: ActivePoint = {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();
+            const point: ActivePoint = {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 }});
+            const ratio: Dimension = 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});
+                const point: ActivePoint = {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) as SelectionPoint;
+                this.cropDestPoints = {startX: img.destLeft, startY: img.destTop, width: img.destWidth, height: img.destHeight};
+            }
+            const obj: Object = {width: 0, height: 0 };
+            parent.notify('transform', { prop: 'calcMaxDimension', onPropertyChange: false, value: {width: actPoint.width * ratio.width,
+                height: actPoint.height * ratio.height, obj: obj, isImgShape: null }});
+            const maxDimension: Dimension = obj as Dimension;
+            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) - (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) / 2,
+                destWidth: maxDimension.width, destHeight: maxDimension.height };
+            const temp: string = this.lowerContext.filter;
+            parent.notify('draw', { prop: 'drawImage', onPropertyChange: false});
+            this.lowerContext.filter = 'none';
+            const activeObj: SelectionPoint = extend({}, parent.activeObj, {}, true) as SelectionPoint;
+            this.cropObjColl();
+            parent.transform.straighten = 0;
+            parent.activeObj = activeObj;
+            this.cropFreehandDrawColl();
+            parent.shapeColl = [];
+            parent.notify('shape', { prop: 'updateShapeColl', onPropertyChange: false });
+            parent.notify('shape', { prop: 'drawAnnotations', onPropertyChange: false,
+                value: {ctx: this.lowerContext, shape: 'zoom', pen: 'zoom', 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 && parent.currSelectionPoint.shape === 'crop-circle') {this.cropCircle(this.lowerContext); }
+            else {parent.isCircleCrop = false; }
+            this.lowerContext.filter = temp;
+            parent.notify('shape', { prop: 'refreshActiveObj', onPropertyChange: false});
+            parent.currObjType.isCustomCrop = false;
+            parent.pan(false);
+            parent.transform.defaultZoomFactor = 0;
+        }
+    }
+
+    private adjustStraightenForShapes(type: string, isInitialRotated: boolean): void {
+        const parent: ImageEditor = this.parent;
+        const center: Point = {
+            x: parent.img.destLeft + parent.img.destWidth / 2,
+            y: parent.img.destTop + parent.img.destHeight / 2
+        };
+        for (const obj of parent.objColl) {
+            if (['rectangle', 'ellipse', 'text', 'image', 'redact'].indexOf(obj.shape) !== -1) {
+                if (isInitialRotated || obj.rotatedAngle !== 0) {
+                    const { startX, startY, width, height } = obj.activePoint;
+                    const angle: number = type === 'initial' ? obj.rotatedAngle : -obj.rotatedAngle;
+                    const diffX: number = startX + width / 2 - center.x;
+                    const diffY: number = startY + height / 2 - center.y;
+                    const cosAngle: number = Math.cos(angle);
+                    const sinAngle: number = Math.sin(angle);
+                    const centerX: number = cosAngle * diffX - sinAngle * diffY + center.x;
+                    const centerY: number = sinAngle * diffX + cosAngle * diffY + center.y;
+                    const diffXUpdated: number = centerX - startX - width / 2;
+                    const diffYUpdated: number = centerY - startY - height / 2;
+                    obj.activePoint.startX += diffXUpdated; obj.activePoint.startY += diffYUpdated;
+                    obj.activePoint.endX += diffXUpdated; obj.activePoint.endY += diffYUpdated;
+                }
+            }
+        }
+    }
+
+    private updateCropObj(): void {
+        this.parent.afterCropActions = []; const object: Object = {currObj: {} as CurrentObject };
+        this.parent.notify('filter', { prop: 'getCurrentObj', onPropertyChange: false, value: {object: object }});
+        const obj: CurrentObject = object['currObj']; obj.straighten = this.parent.transform.straighten;
+        this.parent.cropObj = extend({}, obj, {}, true) as CurrentObject;
+    }
+
+    private rotateCrop(): void {
+        const parent: ImageEditor = this.parent;
+        const flipState: string = this.getCurrFlipState();
+        const shape: string = parent.activeObj.shape || '';
+        parent.notify('shape', { prop: 'updImgRatioForActObj', onPropertyChange: false});
+        parent.currSelectionPoint = extend({}, parent.activeObj, {}, true) as SelectionPoint;
+        parent.objColl.push(parent.activeObj);
+        parent.activeObj = extend({}, parent.objColl[parent.objColl.length - 1], {}, true) as SelectionPoint;
+        let activeObj: SelectionPoint = extend({}, parent.objColl[parent.objColl.length - 1], {}, true) as SelectionPoint;
+        const tempCurrSelObj: SelectionPoint = extend({}, parent.currSelectionPoint, {}, true) as SelectionPoint;
+        const preventSelObj: Object = {bool: null };
+        parent.notify('transform', { prop: 'getPreventSelect', onPropertyChange: false, value: {obj: preventSelObj }});
+        parent.notify('transform', { prop: 'setPreventSelect', onPropertyChange: false, value: {bool: true }});
+        const coll: string[] | number[] = extend([], parent.rotateFlipColl, [], true) as string[] | number[];
+        this.panToSelRangle(true);
+        activeObj = extend({}, parent.objColl[parent.objColl.length - 1], {}, true) as SelectionPoint;
+        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
+        const straighten: number = parent.transform.straighten;
+        if (straighten !== 0) {
+            parent.transform.straighten = 0;
+            parent.straightenBaseImageCanvas();
+            parent.notify('shape', { prop: 'drawAnnotations', onPropertyChange: false,
+                value: {ctx: this.lowerContext, shape: 'zoom', pen: 'zoom', isPreventApply: null }});
+            parent.notify('shape', { prop: 'refreshActiveObj', onPropertyChange: false });
+            parent.notify('draw', { prop: 'render-image', value: { isMouseWheel: false } });
+        }
+        this.resetZoom();
+        const afterCropActions: string[] = extend([], parent.afterCropActions, [], true) as string[];
+        this.revertTransform('initial', coll);
+        // Perform straighten
+        if (straighten !== 0) {
+            parent.transform.straighten = (flipState === 'horizontal' || flipState === 'vertical') ? -straighten : straighten;
+            parent.straightenBaseImageCanvas();
+            parent.notify('shape', { prop: 'drawAnnotations', onPropertyChange: false,
+                value: {ctx: this.lowerContext, shape: 'zoom', pen: 'zoom', isPreventApply: null }});
+            parent.notify('draw', { prop: 'render-image', value: { isMouseWheel: false } });
+            parent.notify('shape', { prop: 'drawAnnotations', onPropertyChange: false,
+                value: {ctx: this.lowerContext, shape: 'zoom', pen: 'zoom', isPreventApply: null }});
+        }
+        activeObj = extend({}, parent.objColl[parent.objColl.length - 1], {}, true) as SelectionPoint;
+        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
+        const object: Object = {isIntersect: null };
+        parent.notify('draw', { prop: 'updateImgCanvasPoints', onPropertyChange: false });
+        parent.notify('draw', { prop: 'isLinesIntersect', onPropertyChange: false, value: {obj: object }});
+        let count: number = 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;
+        parent.currSelectionPoint = tempCurrSelObj;
+        parent.notify('transform', { prop: 'setPreventSelect', onPropertyChange: false, value: {bool: preventSelObj['bool'] }});
+        parent.notify('draw', { prop: 'clearOuterCanvas', onPropertyChange: false, value: {context: this.lowerContext}});
+        parent.notify('draw', { prop: 'clearOuterCanvas', onPropertyChange: false, value: {context: this.upperContext}});
+        if (shape === 'crop-circle') {this.cropCircle(this.lowerContext); }
+        this.upperContext.clearRect(0, 0, parent.upperCanvas.width, parent.upperCanvas.height);
+        parent.notify('draw', { prop: 'resetPanPoints', onPropertyChange: false});
+    }
+
+    private revertTransform(type: string, coll: string[] | number[]): void {
+        const parent: ImageEditor = this.parent;
+        const obj: Object = {isRotate: false };
+        if (type === 'initial') {
+            for (let i: number = coll.length - 1; i >= 0; i--) {
+                const value: number = coll[i as number] as number;
+                switch (value) {
+                case 90:
+                    parent.notify('transform', {prop: 'rotate', value: { degree: -90, obj: obj }});
+                    break;
+                case -90:
+                    parent.notify('transform', {prop: 'rotate', value: { degree: 90, obj: obj }});
+                    break;
+                default:
+                    parent.notify('transform', {prop: 'flipImage', value: { direction: parent.toPascalCase(value.toString()) }});
+                    break;
+                }
+            }
+        } else {
+            this.updateFlipState();
+            for (let i: number = 0, len: number = coll.length; i < len; i++) {
+                const value: number = coll[i as number] as number;
+                switch (value) {
+                case 90:
+                    parent.notify('transform', {prop: 'rotate', value: { degree: 90, obj: obj }});
+                    break;
+                case -90:
+                    parent.notify('transform', {prop: 'rotate', value: { degree: -90, obj: obj }});
+                    break;
+                default:
+                    parent.notify('transform', {prop: 'flipImage', value: { direction: parent.toPascalCase(value.toString()) }});
+                    break;
+                }
+            }
+        }
+    }
+
+    private updateFlipState(): void {
+        const parent: ImageEditor = this.parent;
+        const objColl: SelectionPoint[] = parent.objColl as SelectionPoint[];
+        for (let i: number = 0, len: number = objColl.length; i < len; i++) {
+            objColl[i as number].shapeFlip = '';
+        }
+        // eslint-disable-next-line
+        let pointColl: any = parent.pointColl;
+        for (let i: number = 0; i < parent.freehandCounter; i++) {
+            pointColl[i as number].shapeFlip = '';
+        }
+    }
+
+    private resetZoom(): void {
+        const parent: ImageEditor = this.parent;
+        if (parent.transform.zoomFactor > 0) {
+            const zoomFactor: number = parent.transform.zoomFactor;
+            const isUndoRedo: boolean = parent.isUndoRedo;
+            parent.setProperties({zoomSettings: { zoomFactor: (zoomFactor * 10)}}, true);
+            parent.notify('transform', { prop: 'setPreviousZoomValue', onPropertyChange: false,
+                value: { previousZoomValue: parent.zoomSettings.zoomFactor } });
+            for (let i: number = 0; i < (zoomFactor * 10); i++) {
+                parent.isUndoRedo = true;
+                parent.notify('transform', { prop: 'zoomAction', onPropertyChange: false,
+                    value: {zoomFactor: -0.1, zoomPoint: null}, isResize: null});
+            }
+            parent.isUndoRedo = isUndoRedo;
+            parent.notify('draw', { prop: 'resetPanPoints', onPropertyChange: false});
+        }
+    }
+
+    private flipCrop(): void {
+        const parent: ImageEditor = this.parent;
+        parent.notify('transform', { prop: 'setReverseFlip', onPropertyChange: false, value: {isReverseFlip: true }});
+        parent.panPoint.totalPannedPoint.x += this.tempFlipPanPoint.x;
+        parent.panPoint.totalPannedPoint.y += this.tempFlipPanPoint.y;
+        const tempCurrFlipState: string = parent.transform.currFlipState;
+        const obj: Object = {flipColl: null };
+        parent.notify('transform', { prop: 'getFlipColl', onPropertyChange: false, value: {obj: obj }});
+        const tempFlipColl: string[] = obj['flipColl'];
+        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) {
+            const panX: number = -parent.cropObj.totalPannedPoint.x; const panY: number = -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) as SelectionPoint;
+            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) as SelectionPoint;
+        this.lowerContext.clearRect(0, 0, parent.lowerCanvas.width, parent.lowerCanvas.height);
+        this.upperContext.clearRect(0, 0, parent.upperCanvas.width, parent.upperCanvas.height);
+        const temp: string = this.lowerContext.filter;
+        parent.notify('draw', { prop: 'drawImage', onPropertyChange: false});
+        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()}});
+        parent.activeObj = extend({}, parent.objColl[parent.objColl.length - 1], {}, true) as SelectionPoint;
+        parent.objColl.pop();
+        this.upperContext.clearRect(0, 0, parent.upperCanvas.width, parent.upperCanvas.height);
+        parent.notify('draw', { prop: 'drawObject', onPropertyChange: false, value: {canvas: 'duplicate'}});
+        this.cropImg(true);
+        parent.notify('transform', { prop: 'setReverseRotate', onPropertyChange: false, value: {bool: true}});
+        this.lowerContext.setTransform(1, 0, 0, 1, 0, 0);
+        parent.notify('draw', { prop: 'setDestPoints', onPropertyChange: false});
+        parent.notify('draw', { prop: 'currTransState', onPropertyChange: false,
+            value: {type: 'initial', isPreventDestination: null, context: null, isPreventCircleCrop: null} });
+        parent.notify('draw', { prop: 'drawImage', onPropertyChange: false});
+        this.lowerContext.filter = temp;
+        parent.notify('draw', { prop: 'setRotateZoom', onPropertyChange: false, value: {isRotateZoom: false }});
+        parent.notify('draw', { prop: 'currTransState', onPropertyChange: false,
+            value: {type: 'reverse', isPreventDestination: null, context: null, isPreventCircleCrop: null} });
+        parent.transform.currFlipState = tempCurrFlipState;
+        parent.notify('transform', { prop: 'setFlipColl', onPropertyChange: false, value: {flipColl: tempFlipColl }});
+        this.lowerContext.filter = 'none';
+        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()}});
+        parent.notify('shape', { prop: 'drawAnnotations', onPropertyChange: false,
+            value: {ctx: this.lowerContext, shape: 'zoom', pen: 'zoom', isPreventApply: null }});
+        this.lowerContext.filter = temp;
+        if ((parent.currSelectionPoint && parent.currSelectionPoint.shape === 'crop-circle') || parent.isCircleCrop) {
+            this.cropCircle(this.lowerContext);
+        }
+        parent.notify('shape', { prop: 'refreshActiveObj', onPropertyChange: false});
+        parent.notify('draw', { prop: 'clearOuterCanvas', onPropertyChange: false, value: {context: this.lowerContext}});
+        parent.notify('draw', { prop: 'clearOuterCanvas', onPropertyChange: false, value: {context: this.upperContext}});
+        this.upperContext.clearRect(0, 0, parent.upperCanvas.width, parent.upperCanvas.height);
+        parent.notify('transform', { prop: 'setReverseFlip', onPropertyChange: false, value: {isReverseFlip: false }});
+        parent.notify('draw', { prop: 'resetPanPoints', onPropertyChange: false});
+        this.tempFlipPanPoint = {x: 0, y: 0};
+    }
+
+    private cropObjColl(): void {
+        const parent: ImageEditor = this.parent;
+        let point: ActivePoint; let shape: string; let obj: SelectionPoint;
+        if (parent.objColl.length > 0) {
+            for (let i: number = 0, len: number = parent.objColl.length; i < len; i++) {
+                obj = parent.objColl[i as number];
+                point = obj.activePoint;
+                const { startX, startY, width, height} = parent.activeObj.activePoint;
+                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 };
+                let degree: number; let size: number;
+                switch (shape) {
+                case 'text':
+                    degree = (obj.shapeDegree === 0) ? parent.transform.degree : parent.transform.degree - obj.shapeDegree;
+                    size = (degree === 0 || Math.abs(degree) === 180) ? point.width : point.height;
+                    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: obj }});
+                    }
+                    break;
+                case 'path':
+                    this.cropPointCollection(i);
+                    break;
+                }
+            }
+        }
+    }
+
+    private cropPointCollection(i: number): void {
+        const parent: ImageEditor = this.parent;
+        const shape: string = parent.objColl[i as number].shape;
+        let x: number; let y: number; let width: number; let height: number;
+        const point: ActivePoint = parent.activeObj.activePoint;
+        const { destLeft, destTop, destWidth, destHeight } = parent.img;
+        if (shape === 'path') {
+            x = point.startX; y = point.startY; width = point.width; height = point.height;
+        } else {
+            x = destLeft; y = destTop; width = destWidth; height = destHeight;
+        }
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        const pointColl: any = parent.objColl[i as number].pointColl;
+        for (let n: number = 0, len: number = pointColl.length; n < len; n++) {
+            pointColl[n as number].ratioX = (pointColl[n as number].x - x) / width;
+            pointColl[n as number].ratioY = (pointColl[n as number].y - y) / height;
+        }
+    }
+
+    private cropFreehandDrawColl(): void {
+        const parent: ImageEditor = this.parent;
+        const { startX, startY, width, height} =  parent.activeObj.activePoint;
+        for (let n: number = 0; n < parent.freehandCounter; n++) {
+            parent.points = extend([], parent.pointColl[n as number].points, []) as Point[];
+            parent.notify('freehand-draw', { prop: 'setPointCounter', onPropertyChange: false, value: {value: 0 }});
+            const len: number = parent.points.length;
+            for (let l: number = 0; l < len; l++) {
+                parent.points[l as number].ratioX = (parent.points[l as number].x - startX) / width;
+                parent.points[l as number].ratioY = (parent.points[l as number].y - startY) / height;
+            }
+        }
+        parent.notify('freehand-draw', { prop: 'updateCropPtsForSel', onPropertyChange: false});
+    }
+
+    private resetAnnotations(): void {
+        const parent: ImageEditor = this.parent; parent.objColl = []; parent.pointColl = []; parent.freehandCounter = 0;
+        parent.notify('freehand-draw', { prop: 'resetStraightenPoint' });
+    }
+
+    private setCurrSelPoints(isSetDimension?: boolean): void {
+        const parent: ImageEditor = this.parent;
+        parent.allowDownScale = false;
+        const destPoint: ActivePoint = this.cropDestPoints;
+        const filter: string = this.lowerContext.filter;
+        const isCropTab: boolean = 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 };
+        const img: ImageDimension = parent.img;
+        const currSelPoint: SelectionPoint = 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 && 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) {
+            img.destLeft += parent.panPoint.totalPannedInternalPoint.x;
+            img.destTop += parent.panPoint.totalPannedInternalPoint.y;
+        }
+        parent.notify('draw', { prop: 'drawImage', onPropertyChange: false});
+        this.lowerContext.filter = filter;
+        parent.notify('draw', { prop: 'currTransState', onPropertyChange: false,
+            value: {type: 'reverse', isPreventDestination: null, context: null, isPreventCircleCrop: true} });
+        let cropObjColl: SelectionPoint[] = extend([], parent.objColl, null, true) as SelectionPoint[];
+        let cropPointColl: Point[] = extend([], parent.pointColl, null, true) as Point[];
+        const straightenObj: Object = {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) as SelectionPoint;
+        }
+        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) {
+            const destPoints: ActivePoint = {startX: img.destLeft, startY: img.destTop, width: img.destWidth, height: img.destHeight};
+            if (currSelPoint && currSelPoint.activePoint) {
+                const { startX, startY, width, height} = currSelPoint.activePoint;
+                img.destLeft = startX; img.destTop = startY;
+                img.destWidth = width; img.destHeight = height;
+            }
+            parent.notify('shape', { prop: 'drawAnnotations', onPropertyChange: false,
+                value: {ctx: this.lowerContext, shape: 'zoom', pen: 'zoom', isPreventApply: null }});
+            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) as SelectionPoint[];
+            cropPointColl = extend([], parent.pointColl, null, true) as Point[];
+            parent.notify('freehand-draw', { prop: 'getStraightenPoint', onPropertyChange: false, value: {obj: straightenObj }});
+            this.resetAnnotations();
+            const object: Object = {selPointColl: null };
+            parent.notify('freehand-draw', { prop: 'getSelPointColl', onPropertyChange: false, value: {obj: object }});
+            const cropSelPointColl: Point[] = object['selPointColl'];
+            parent.notify('freehand-draw', { prop: 'setSelPointColl', onPropertyChange: false, value: {obj: {selPointColl: [] } }});
+            parent.cropObj.filter = this.lowerContext.filter;
+            const actObj: SelectionPoint = extend({}, parent.currSelectionPoint, null, true) as SelectionPoint;
+            parent.notify('draw', { prop: 'setCurrentObj', onPropertyChange: false, value: {obj: null}});
+            parent.activeObj = extend({}, actObj, null, true) as SelectionPoint;
+            const activeObj: SelectionPoint = extend({}, parent.activeObj, null, true) as SelectionPoint;
+            parent.notify('shape', { prop: 'refreshActiveObj', onPropertyChange: false});
+            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) as SelectionPoint;
+                }
+                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: 'drawAnnotations', onPropertyChange: false,
+                value: {ctx: this.lowerContext, shape: 'iterate', pen: 'iterate', isPreventApply: null }});
+            this.adjustStraightenForShapes('reverse', false);
+            parent.notify('freehand-draw', { prop: 'updateFHDColl', onPropertyChange: false, value: {isPreventApply: true }});
+            parent.notify('shape', { prop: 'drawAnnotations', onPropertyChange: false,
+                value: {ctx: this.lowerContext, shape: 'zoom', pen: 'zoom', 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) as SelectionPoint;
+                }
+                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,
+                value: {point: null }});
+            if (!this.isInitCrop && parent.transform.degree === 0 && parent.cropObj.currFlipState !== '' &&
+                parent.cropObj.cropZoom !==  0) {
+                this.isInitCrop = true;
+                const obj: Object = {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}});
+            } else {this.isInitCrop = false; }
+        } else {
+            this.adjustStraightenForShapes('reverse', true);
+            parent.notify('freehand-draw', { prop: 'updateFHDColl', onPropertyChange: false, value: {isPreventApply: true }});
+            const temp: string = this.lowerContext.filter;
+            this.lowerContext.filter = 'none';
+            parent.notify('shape', { prop: 'drawAnnotations', onPropertyChange: false,
+                value: {ctx: this.lowerContext, shape: 'iterate', pen: 'iterate', isPreventApply: null }});
+            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';
+        }
+    }
+
+    private panToSelRangle(isReverse?: boolean): void {
+        const parent: ImageEditor = this.parent;
+        const pannedPoint: Point = parent.cropObj.totalPannedClientPoint;
+        const panX: number = parent.transform.degree !== 0 ? isReverse ? -pannedPoint.x : pannedPoint.x : 0;
+        const panY: number = 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 } });
+            parent.panPoint.currentPannedPoint = { x: 0, y: 0 };
+        }
+    }
+
+    private cropCircle(context: CanvasRenderingContext2D, isSave?: boolean, isFlip?: boolean): void {
+        const parent: ImageEditor = this.parent; const { destLeft, destTop, destWidth, destHeight } = parent.img;
+        if (isFlip && parent.transform.currFlipState !== '') {
+            parent.notify('draw', { prop: 'setTransform', onPropertyChange: false,
+                value: {context: context, value: parent.transform.currFlipState, isReverse: null}});
+        }
+        const temp: string = context.filter;
+        context.filter = 'none';
+        context.globalCompositeOperation = 'destination-in';
+        context.beginPath();
+        const centerX: number = isNullOrUndefined(isSave) ? destLeft + (destWidth / 2) : context.canvas.width / 2;
+        const centerY: number = isNullOrUndefined(isSave) ? destTop + (destHeight / 2) : context.canvas.height / 2;
+        const radius: number = isSave ? context.canvas.width / 2 : destWidth / 2;
+        context.arc(centerX, centerY, radius, 0, Math.PI * 2);
+        context.closePath(); context.fill(); context.restore();
+        context.globalCompositeOperation = 'source-over';
+        parent.currObjType.isActiveObj = parent.isCircleCrop = true;
+        context.filter = temp;
+        if (isFlip && parent.transform.currFlipState !== '') {
+            parent.notify('draw', { prop: 'setTransform', onPropertyChange: false,
+                value: {context: context, value: parent.transform.currFlipState, isReverse: null}});
+        }
+    }
+
+    private getCurrCropState(): string {
+        const parent: ImageEditor = this.parent; let flipState: string = '';
+        const obj: Object = {flipColl: null };
+        parent.notify('transform', { prop: 'getFlipColl', onPropertyChange: false, value: {obj: obj }});
+        flipState = this.getCurrFlipState();
+        if (parent.transform.degree === -90 || parent.transform.degree === -270) {
+            if (flipState === 'horizontal') {flipState = 'vertical'; }
+            else if (flipState === 'vertical') {flipState = 'horizontal'; }
+        }
+        if (flipState === '') {flipState = obj['flipColl'].length > 1 ? this.getCurrFlipState() : parent.transform.currFlipState; }
+        return flipState;
+    }
+
+    private updateRotatePan(): void {
+        const parent: ImageEditor = this.parent;
+        if (isNullOrUndefined(parent.panPoint.currentPannedPoint)) {
+            return;
+        }
+        let panRegion: string = ''; const degree: number = parent.transform.degree;
+        const { x, y} = parent.panPoint.currentPannedPoint;
+        if (parent.rotateFlipColl.length > 0 && typeof(parent.rotateFlipColl[0]) === 'number'
+            && degree < 0) {
+            panRegion = this.getCurrCropState();
+        } else {
+            panRegion = this.getCurrFlipState();
+        }
+        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 += y;
+                } else {
+                    parent.img.destLeft -= y;
+                }
+                if (panRegion === '' || panRegion === 'vertical') {
+                    parent.img.destTop -= x;
+                } else {
+                    parent.img.destTop += x;
+                }
+            }
+            else if (degree === 270 || (degree === -270 && (panRegion === 'horizontal' || panRegion === 'vertical'))
+                || (degree === -90 && (panRegion === '' || panRegion === 'verticalHorizontal'
+                || panRegion === 'horizontalVertical'))) {
+                if (panRegion === '' || panRegion === 'horizontal') {
+                    parent.img.destLeft -= y;
+                } else {
+                    parent.img.destLeft += y;
+                }
+                if (panRegion === '' || panRegion === 'vertical') {
+                    parent.img.destTop += x;
+                } else {
+                    parent.img.destTop -= x;
+                }
+            }
+        } else {
+            if (degree === 180 || degree === -180) {
+                if (panRegion === '' || panRegion === 'vertical') {
+                    parent.img.destLeft -= x;
+                } else {
+                    parent.img.destLeft += x;
+                }
+                if (panRegion === '' || panRegion === 'horizontal') {
+                    parent.img.destTop -= y;
+                } else {
+                    parent.img.destTop += y;
+                }
+            }
+        }
+    }
+
+    private crop(obj: Object): void {
+        const parent: ImageEditor = this.parent; const { startX, startY, endX, endY} = parent.activeObj.activePoint;
+        if (!parent.disabled && parent.isImageLoaded) {
+            const object: Object = {isCropToolbar: parent.isCropToolbar };
+            if (parent.currObjType.isUndoAction && !object['isCropToolbar']) {
+                parent.notify('undo-redo', {prop: 'refreshUrc', value: {bool: null }});
+            }
+            const transitionArgs: CropEventArgs = {cancel: false, startPoint: { x: startX, y: startY },
+                endPoint: {x: endX, y: endY }, preventScaling: false };
+            if (!object['isCropToolbar']) {
+                parent.trigger('cropping', transitionArgs);
+                parent.editCompleteArgs = transitionArgs;
+            }
+            this.cropEvent(transitionArgs, obj, object);
+        }
+    }
+
+    private cropEvent(transitionArgs: CropEventArgs, obj: Object, object: Object): void {
+        const parent: ImageEditor = this.parent;
+        let splitWords: string[];
+        if (!transitionArgs.cancel) {
+            splitWords = parent.activeObj.shape ? parent.activeObj.shape.split('-') : [];
+            if (!parent.disabled && parent.activeObj.horTopLine && (parent.currObjType.isCustomCrop || (splitWords.length > 0 &&
+                splitWords[0] === 'crop'))) {
+                // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                (obj as any).isCrop = true;
+                const prevCropObj: CurrentObject = extend({}, parent.cropObj, {}, true) as CurrentObject;
+                const prevObj: CurrentObject = extend({}, this.prevCropCurrObj, {}, true) as CurrentObject;
+                if (transitionArgs.preventScaling) {this.isPreventScaling = true; }
+                else {this.isPreventScaling = false; }
+                this.cropImg();
+                if (this.isPreventScaling) {
+                    parent.aspectWidth = parent.img.destWidth;
+                    parent.aspectHeight = parent.img.destHeight;
+                }
+                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 } });
+                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 }});
+                const aspectIcon: HTMLInputElement = (parent.element.querySelector('#' + parent.element.id + '_aspectratio') as HTMLInputElement);
+                const nonAspectIcon: HTMLInputElement = (parent.element.querySelector('#' + parent.element.id + '_nonaspectratio') as HTMLInputElement);
+                parent.notify('draw', { prop: 'render-image', value: { isMouseWheel: false } });
+                if (!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}});
+                }
+                this.resizeWrapper();
+                if (Browser.isDevice) {this.updateUndoRedoColl(prevObj, prevCropObj, object); }
+            }
+        }
+    }
+
+    private updateUndoRedoColl(prevObj: CurrentObject, prevCropObj: CurrentObject, object: Object): void {
+        const parent: ImageEditor = this.parent;
+        const currSelPtObj: Object = {prevCurrSelectionPoint: parent.prevCurrSelectionPoint };
+        prevObj.currSelectionPoint = extend({}, currSelPtObj['prevCurrSelectionPoint'], {}, true) as SelectionPoint;
+        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' }});
+        }
+    }
+
+    private resizeWrapper(): void {
+        const parent: ImageEditor = this.parent;
+        if (Browser.isDevice) {
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            const elem: HTMLElement = (parent as any).element;
+            const ctxToolbar: HTMLElement = elem.querySelector('#' + elem.id + '_contextualToolbarArea') as HTMLElement;
+            if (ctxToolbar && ctxToolbar.style.position === '' && !this.isTransformCrop) {
+                ctxToolbar.style.position = 'absolute';
+                parent.isStraightening = false;
+                parent.update();
+                parent.notify('filter', { prop: 'setAdjustmentValue', value: { adjustmentValue: parent.canvasFilter } });
+            }
+        }
+    }
+
+    private calcRatio(obj?: Object, dimension?: Dimension): Dimension {
+        const parent: ImageEditor = this.parent;
+        const { degree } = parent.transform;
+        const { destWidth, destHeight } = parent.img;
+        const { width, height } = dimension || parent.baseImgCanvas;
+        const widthRatio: number = (degree === 0 || degree % 180 === 0) ? width / destWidth : height / destWidth;
+        const heightRatio: number = (degree === 0 || degree % 180 === 0) ? height / destHeight : width / destHeight;
+        if (obj) {
+            obj['width'] = widthRatio;
+            obj['height'] = heightRatio;
+        }
+        return { width: widthRatio, height: heightRatio };
+    }
+
+    private getCurrFlipState(panObj?: Object): string {
+        const parent: ImageEditor = this.parent;
+        const obj: Object = {panRegion: ''};
+        const object: Object = {collection: parent.rotateFlipColl};
+        parent.notify('shape', { prop: 'alignRotateFlipColl', onPropertyChange: false,
+            value: {collection: parent.rotateFlipColl, isRotateFlipCollection: true, obj: object }});
+        parent.rotateFlipColl = object['collection'];
+        for (let i: number = 0, len: number = parent.rotateFlipColl.length; i < len; i++) {
+            parent.notify('transform', { prop: 'setCurrPanRegion', onPropertyChange: false,
+                value: {region: obj['panRegion'], type: parent.rotateFlipColl[i as number], obj: obj }});
+        }
+        if (panObj) { panObj['panRegion'] = obj['panRegion']; }
+        return obj['panRegion'];
+    }
+}