@syncfusion/ej2-image-editor 30.2.4 → 31.1.17

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

@@ -0,0 +1,2008 @@
+/* eslint-disable prefer-const */
+import { Browser, extend, getComponent, isNullOrUndefined } from '@syncfusion/ej2-base';
+import { ActivePoint, Dimension, NumericTextBox } from '@syncfusion/ej2-inputs';
+import { EditCompleteEventArgs , CurrentObject, Direction, FlipEventArgs, ImageEditor, PanEventArgs, Point, ResizeEventArgs, ShapeType } from '../index';
+import { ImageDimension, RotateEventArgs, SelectionPoint, StrokeSettings, ZoomEventArgs } from '../index';
+import { hideSpinner, showSpinner } from '@syncfusion/ej2-popups';
+import { Toolbar } from '@syncfusion/ej2-navigations';
+
+export class Transform {
+    private parent: ImageEditor;
+    private lowerContext: CanvasRenderingContext2D;
+    private upperContext: CanvasRenderingContext2D;
+    /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
+    private zoomBtnHold: any;
+    private tempPanMove: Point; // To store previous pan move point
+    private panMove: Point; // To store pan move point
+    private isReverseFlip: boolean = false; // True when rotate method is called from iteration
+    private disablePan: boolean = false; // auto enable / disable pan while zooming
+    private currDestPoint: ActivePoint; // To redraw old image when navigate to crop tab
+    private isReverseRotate: boolean = false; // True when rotate method is called from iteration
+    private flipColl: string[] = []; // To store flip order
+    private transCurrObj: CurrentObject;
+    private prevZoomValue: number = 1;
+    private tempActiveObj: SelectionPoint; private isShape: boolean;
+    private cropDimension: Dimension = { width: 0, height: 0 };
+    private isPreventSelect: boolean = false;
+    private prevResizeCurrObj: CurrentObject;
+    private preventDownScale: boolean = false;
+    private resizedImgAngle: number = null;
+    private resizeEventCancel: boolean;
+
+    constructor(parent: ImageEditor) {
+        this.parent = parent;
+        this.addEventListener();
+    }
+
+    public destroy(): void {
+        if (this.parent.isDestroyed) { return; }
+        this.removeEventListener();
+    }
+
+    private addEventListener(): void {
+        this.parent.on('transform', this.transform, this);
+        this.parent.on('destroyed', this.destroy, this);
+    }
+
+    private removeEventListener(): void {
+        this.parent.off('transform', this.transform);
+        this.parent.off('destroyed', this.destroy);
+    }
+
+    private transform(args?: { onPropertyChange: boolean, prop: string, value?: object }): void {
+        this.initTransformPvtVar();
+        switch (args.prop) {
+        case 'flipImage':
+            this.flipImage(args.value['direction']);
+            break;
+        case 'setDestPointsForFlipState':
+            this.setDestPointsForFlipState();
+            break;
+        case 'zoomAction':
+            this.zoomAction(args.value['zoomFactor'], args.value['zoomPoint'], args.value['isResize']);
+            break;
+        case 'disableZoomOutBtn':
+            this.disableZoomOutBtn(args.value['isZoomOut']);
+            break;
+        case 'rotatedFlip':
+            this.rotatedFlip();
+            break;
+        case 'drawPannedImage':
+            this.drawPannedImage(args.value['xDiff'], args.value['yDiff']);
+            break;
+        case 'drawPannImage':
+            this.drawPannImage(args.value['point']);
+            break;
+        case 'performTransformation':
+            this.performTransformation(args.value['text']);
+            break;
+        case 'updateTransform':
+            this.updateTransform(args.value['text']);
+            break;
+        case 'rotatePan':
+            this.rotatePan(args.value['isCropSelection'], args.value['isDefaultZoom']);
+            break;
+        case 'resetZoom':
+            this.resetZoom();
+            break;
+        case 'pan':
+            this.pan(args.value['value'], args.value['x'], args.value['y']);
+            break;
+        case 'zoom':
+            this.zoom(args.value['zoomFactor'], args.value['zoomPoint']);
+            break;
+        case 'setCurrPanRegion':
+            this.setCurrPanRegion(args.value['region'], args.value['type'], args.value['obj']);
+            break;
+        case 'rotate':
+            this.rotate(args.value['degree'], args.value['obj']);
+            break;
+        case 'flip':
+            this.flip(args.value['direction']);
+            break;
+        case 'update':
+            this.update();
+            break;
+        case 'calcMaxDimension':
+            this.calcMaxDimension(args.value['width'], args.value['height'], args.value['obj'], args.value['isImgShape']);
+            break;
+        case 'getPanMove':
+            args.value['obj']['panMove'] = this.panMove;
+            break;
+        case 'setPanMove':
+            this.panMove = args.value['point'];
+            break;
+        case 'getTempPanMove':
+            args.value['obj']['tempPanMove'] = this.tempPanMove;
+            break;
+        case 'setTempPanMove':
+            this.tempPanMove = args.value['point'];
+            break;
+        case 'setReverseFlip':
+            this.isReverseFlip = args.value['isReverseFlip'];
+            break;
+        case 'setDisablePan':
+            this.disablePan = args.value['bool'];
+            break;
+        case 'setCurrDestinationPoint':
+            this.currDestPoint = args.value['point'];
+            this.currDestPoint.startX -= this.parent.cropObj.totalPannedPoint.x;
+            this.currDestPoint.startY -= this.parent.cropObj.totalPannedPoint.y;
+            break;
+        case 'setReverseRotate':
+            this.isReverseRotate = args.value['bool'];
+            break;
+        case 'getFlipColl':
+            args.value['obj']['flipColl'] = this.flipColl;
+            break;
+        case 'setFlipColl':
+            this.flipColl = args.value['flipColl'];
+            break;
+        case 'getPreviousZoomValue':
+            args.value['obj']['previousZoomValue'] = this.prevZoomValue;
+            break;
+        case 'setPreviousZoomValue':
+            this.prevZoomValue = args.value['previousZoomValue'];
+            break;
+        case 'getCropDimension':
+            args.value['obj']['cropDimension'] = this.cropDimension;
+            break;
+        case 'setCropDimension':
+            this.cropDimension.width = args.value['width']; this.cropDimension.height = args.value['height'];
+            break;
+        case 'getPreventSelect':
+            args.value['obj']['bool'] = this.isPreventSelect;
+            break;
+        case 'setPreventSelect':
+            this.isPreventSelect = args.value['bool'];
+            break;
+        case 'resizeImage':
+            this.resizeImage(args.value['width'], args.value['height']);
+            break;
+        case 'resizeCrop':
+            this.resizeCrop(args.value['width'], args.value['height']);
+            break;
+        case 'updateResize':
+            this.updateResize();
+            break;
+        case 'resize':
+            this.resize(args.value['width'], args.value['height'], args.value['isAspectRatio']);
+            break;
+        case 'straightenImage':
+            this.straightenImage(args.value['degree']);
+            break;
+        case 'reset':
+            this.reset();
+            break;
+        case 'cropZoom':
+            args.value['obj']['maxDimension'] = this.cropZoom(args.value['value'], args.value['selectionObj']);
+            break;
+        case 'setResizedImgAngle':
+            this.resizedImgAngle = args.value['angle'];
+            break;
+        }
+    }
+
+    public getModuleName(): string {
+        return 'transform';
+    }
+
+    private initTransformPvtVar(): void {
+        if (this.parent.lowerCanvas) {this.lowerContext = this.parent.lowerCanvas.getContext('2d'); }
+        if (this.parent.upperCanvas) {this.upperContext = this.parent.upperCanvas.getContext('2d'); }
+    }
+
+    private reset(): void {
+        this.zoomBtnHold = null; this.tempPanMove = null; this.panMove = null; this.disablePan = false;
+        this.currDestPoint = null; this.isReverseRotate = false; this.flipColl = []; this.resizedImgAngle = null;
+        this.transCurrObj = null; this.prevZoomValue = 1; this.isPreventSelect = this.preventDownScale = false;
+    }
+
+    private rotateImage(degree: number): void {
+        const parent: ImageEditor = this.parent;
+        const transitionArgs: RotateEventArgs = {cancel: false, previousDegree: parent.transform.degree,
+            currentDegree: Math.abs(parent.transform.degree + degree) === 360 ? 0 : parent.transform.degree + degree };
+        if (!this.isPreventSelect) {
+            parent.trigger('rotating', transitionArgs);
+            parent.editCompleteArgs = transitionArgs;
+        }
+        this.rotateEvent(transitionArgs, degree);
+    }
+
+    private rotateEvent(transitionArgs: RotateEventArgs, degree: number): void {
+        const parent: ImageEditor = this.parent;
+        if (!transitionArgs.cancel) {
+            let prevObj: CurrentObject;
+            if (isNullOrUndefined(this.transCurrObj)) {
+                const object: Object = {currObj: {} as CurrentObject };
+                parent.notify('filter', { prop: 'getCurrentObj', onPropertyChange: false, value: {object: object }});
+                prevObj = object['currObj'];
+                prevObj.objColl = extend([], parent.objColl, null, true) as SelectionPoint[];
+                prevObj.pointColl = extend({}, parent.pointColl, null, true) as Point[];
+                prevObj.afterCropActions = extend([], parent.afterCropActions, [], true) as string[];
+                const selPointCollObj: Object = {selPointColl: null };
+                parent.notify('freehand-draw', { prop: 'getSelPointColl', onPropertyChange: false, value: {obj: selPointCollObj }});
+                prevObj.selPointColl = extend([], selPointCollObj['selPointColl'], [], true) as Point[];
+            }
+            parent.afterCropActions.push(degree === 90 ? 'rotateRight' : 'rotateLeft');
+            let splitWords: string[] = []; let activeObjShape: string;
+            if (parent.activeObj.activePoint && parent.activeObj.shape) {
+                if (parent.activeObj.shape !== undefined) {splitWords = parent.activeObj.shape.split('-'); }
+                if (parent.currObjType.isCustomCrop || splitWords[0] === 'crop') {
+                    activeObjShape = parent.currObjType.isCustomCrop ? 'custom' : splitWords[1];
+                    parent.notify('shape', { prop: 'updImgRatioForActObj', onPropertyChange: false});
+                    parent.objColl.push(parent.activeObj);
+                    parent.notify('shape', { prop: 'refreshActiveObj', onPropertyChange: false});
+                }
+            }
+            parent.notify('shape', { prop: 'redrawActObj', onPropertyChange: false,
+                value: {x: null, y: null, isMouseDown: true}});
+            this.upperContext.clearRect(0, 0, parent.upperCanvas.width, parent.upperCanvas.height);
+            this.drawRotatedImage(degree);
+            parent.notify('draw', { prop: 'setImageEdited', onPropertyChange: false });
+            parent.notify('draw', { prop: 'clearOuterCanvas', onPropertyChange: false, value: {context: this.lowerContext}});
+            parent.notify('draw', { prop: 'clearOuterCanvas', onPropertyChange: false, value: {context: this.upperContext}});
+            if (parent.isCircleCrop) {
+                parent.notify('crop', { prop: 'cropCircle', onPropertyChange: false,
+                    value: {context: this.lowerContext, isSave: null, isFlip: null}});
+            }
+            if (activeObjShape) {
+                this.upperContext.clearRect(0, 0, parent.upperCanvas.width, parent.upperCanvas.height);
+                parent.activeObj = extend({}, parent.objColl[parent.objColl.length - 1], {}, true) as SelectionPoint;
+                parent.objColl.pop();
+                parent.notify('draw', { prop: 'drawObject', onPropertyChange: false, value: {canvas: 'duplicate', obj: parent.activeObj}});
+            }
+            parent.isUndoRedo = false; const obj: Object = {collection: parent.rotateFlipColl};
+            parent.notify('shape', { prop: 'alignRotateFlipColl', onPropertyChange: false,
+                value: {collection: parent.rotateFlipColl, isRotateFlipCollection: true, obj: obj }});
+            parent.rotateFlipColl = obj['collection'];
+            if (parent.cropObj.activeObj.shape && !this.isPreventSelect) {
+                parent.notify('draw', { prop: 'setIsCropSelect', value: {bool: true }});
+                this.isPreventSelect = true;
+                parent.notify('draw', { prop: 'select', onPropertyChange: false,
+                    value: {type: 'custom', startX: null, startY: null, width: null, height: null }});
+                this.isPreventSelect = false;
+                parent.setProperties({zoomSettings: { zoomFactor: 1 }}, true);
+                this.prevZoomValue = parent.zoomSettings.zoomFactor;
+            }
+        } else {
+            parent.notify('draw', { prop: 'setCurrentObj', onPropertyChange: false, value: {obj: parent.prevEventObjPoint}});
+            parent.activeObj = parent.prevEventSelectionPoint;
+            parent.notify('draw', { prop: 'drawObject', onPropertyChange: false, value: {canvas: 'duplicate', obj: parent.activeObj}});
+        }
+    }
+
+    private drawRotatedImage(degree: number): void {
+        const parent: ImageEditor = this.parent;
+        if (degree === 0) {parent.transform.degree = 0; }
+        else {parent.transform.degree += degree; }
+        if (Math.abs(parent.transform.degree) === 360) {parent.transform.degree = 0; }
+        parent.notify('draw', { prop: 'setDestPoints', onPropertyChange: false});
+        const tempObjColl: SelectionPoint[] = extend([], parent.objColl, [], true) as SelectionPoint[];
+        const tempActiveObj: SelectionPoint = extend({}, parent.activeObj, {}, true) as SelectionPoint;
+        parent.objColl = [];
+        parent.notify('shape', { prop: 'refreshActiveObj', onPropertyChange: false});
+        if (!this.isReverseRotate) {
+            parent.notify('draw', { prop: 'updateCurrTransState', onPropertyChange: false,
+                value: {type: 'initial', isPreventDestination: null, isRotatePan: null} });
+        }
+        this.rotateDegree(degree);
+        if (!this.isReverseRotate) {
+            parent.notify('draw', { prop: 'updateCurrTransState', onPropertyChange: false,
+                value: {type: 'reverse', isPreventDestination: null, isRotatePan: null} });
+            parent.rotateFlipColl.push(degree as number);
+        }
+        parent.objColl = extend([], tempObjColl, [], true) as SelectionPoint[];
+        parent.activeObj = extend({}, tempActiveObj, {}, true) as SelectionPoint;
+        if (parent.isCircleCrop) {
+            parent.notify('crop', { prop: 'cropCircle', onPropertyChange: false,
+                value: {context: this.lowerContext, isSave: null, isFlip: null}});
+        }
+        parent.notify('shape', { prop: 'redrawObj', onPropertyChange: false, value: {degree: degree}});
+        parent.notify('shape', { prop: 'refreshActiveObj', onPropertyChange: false});
+        if (degree > 0) {parent.notify('freehand-draw', { prop: 'rotateFhdColl', onPropertyChange: false}); }
+        else {
+            for (let i: number = 0; i < 3; i++) {
+                parent.notify('freehand-draw', { prop: 'rotateFhdColl', onPropertyChange: false});
+            }
+        }
+        parent.notify('freehand-draw', { prop: 'freehandRedraw', onPropertyChange: false,
+            value: {context: this.lowerContext, points: null} });
+        this.updateCurrSelectionPoint(degree);
+    }
+
+    private rotateDegree(degree: number): void {
+        const parent: ImageEditor = this.parent;
+        this.lowerContext.save();
+        this.lowerContext.clearRect(0, 0, parent.lowerCanvas.width, parent.lowerCanvas.height);
+        this.lowerContext.translate(parent.lowerCanvas.width / 2, parent.lowerCanvas.height / 2);
+        this.lowerContext.rotate(Math.PI / 180 * degree);
+        this.lowerContext.translate(-parent.lowerCanvas.width / 2, -parent.lowerCanvas.height / 2);
+        const temp: string = this.lowerContext.filter;
+        parent.notify('draw', { prop: 'drawImage', onPropertyChange: false});
+        this.lowerContext.filter = temp;
+        this.lowerContext.translate(parent.lowerCanvas.width / 2, parent.lowerCanvas.height / 2);
+        this.lowerContext.rotate(Math.PI / 180 * -degree);
+        this.lowerContext.translate(-parent.lowerCanvas.width / 2, -parent.lowerCanvas.height / 2);
+        this.lowerContext.restore();
+    }
+
+    private updateCurrSelectionPoint(degree: number | string): void {
+        const parent: ImageEditor = this.parent;
+        if (parent.currSelectionPoint && this.currDestPoint) {
+            const activeObj: SelectionPoint = extend({}, parent.activeObj, {}, true) as SelectionPoint;
+            const objColl: SelectionPoint[] = extend([], parent.objColl, [], true) as SelectionPoint[];
+            const srcPoints: ActivePoint = {startX: parent.img.srcLeft, startY: parent.img.srcTop, width: parent.img.srcWidth,
+                height: parent.img.srcHeight};
+            const destPoints: ActivePoint = {startX: parent.img.destLeft, startY: parent.img.destTop, width: parent.img.destWidth,
+                height: parent.img.destHeight};
+            parent.objColl = [];
+            parent.objColl.push(extend({}, parent.currSelectionPoint, {}, true) as SelectionPoint);
+            parent.img = {srcLeft: 0, srcTop: 0, srcWidth: parent.baseImgCanvas.width, srcHeight: parent.baseImgCanvas.height,
+                destLeft: this.currDestPoint.startX, destTop: this.currDestPoint.startY, destWidth: this.currDestPoint.width,
+                destHeight: this.currDestPoint.height};
+            if (typeof(degree) === 'number') {
+                parent.notify('draw', { prop: 'setDestPoints', onPropertyChange: false});
+                parent.notify('draw', { prop: 'setClientTransDim', onPropertyChange: false,
+                    value: {isPreventDimension: null}});
+            }
+            parent.notify('shape', { prop: 'redrawObj', onPropertyChange: false, value: {degree: degree}});
+            parent.currSelectionPoint = extend({}, parent.objColl[0], {}, true) as SelectionPoint;
+            this.currDestPoint = {startX: parent.img.destLeft, startY: parent.img.destTop, width: parent.img.destWidth,
+                height: parent.img.destHeight};
+            parent.objColl = objColl; parent.activeObj = activeObj;
+            parent.img = {srcLeft: srcPoints.startX, srcTop: srcPoints.startY, srcWidth: srcPoints.width, srcHeight: srcPoints.height,
+                destLeft: destPoints.startX, destTop: destPoints.startY, destWidth: destPoints.width, destHeight: destPoints.height};
+        }
+    }
+
+    private flipImage(direction: Direction): void {
+        const parent: ImageEditor = this.parent;
+        const transitionArgs: FlipEventArgs = {direction: direction, cancel: false,
+            previousDirection: parent.toPascalCase(parent.transform.currFlipState || direction )};
+        if (!this.isPreventSelect) {
+            parent.trigger('flipping', transitionArgs);
+            parent.editCompleteArgs = transitionArgs;
+        }
+        this.flipEvent(transitionArgs, direction);
+    }
+
+    private flipEvent(transitionArgs: FlipEventArgs, direction: Direction): void {
+        const parent: ImageEditor = this.parent;
+        if (transitionArgs.cancel) {
+            parent.notify('draw', { prop: 'setCurrentObj', onPropertyChange: false, value: {obj: parent.prevEventObjPoint}});
+            parent.activeObj = parent.prevEventSelectionPoint;
+            parent.notify('draw', { prop: 'drawObject', onPropertyChange: false, value: {canvas: 'duplicate', obj: parent.activeObj}});
+            return;
+        }
+        let prevObj: CurrentObject;
+        if (isNullOrUndefined(this.transCurrObj)) {
+            const object: Object = {currObj: {} as CurrentObject };
+            parent.notify('filter', { prop: 'getCurrentObj', onPropertyChange: false, value: {object: object }});
+            prevObj = object['currObj'];
+            prevObj.objColl = extend([], parent.objColl, null, true) as SelectionPoint[];
+            prevObj.pointColl = extend({}, parent.pointColl, null, true) as Point[];
+            prevObj.afterCropActions = extend([], parent.afterCropActions, [], true) as string[];
+            const selPointCollObj: Object = {selPointColl: null };
+            parent.notify('freehand-draw', { prop: 'getSelPointColl', onPropertyChange: false,
+                value: {obj: selPointCollObj }});
+            prevObj.selPointColl = extend([], selPointCollObj['selPointColl'], [], true) as Point[];
+        }
+        parent.afterCropActions.push(direction.toLowerCase() === 'horizontal' ? 'horizontalflip' : 'verticalflip');
+        let splitWords: string[] = []; let activeObjShape: string;
+        if (parent.activeObj.activePoint) {
+            if (parent.activeObj.shape !== undefined) {splitWords = parent.activeObj.shape.split('-'); }
+            if (parent.currObjType.isCustomCrop || splitWords[0] === 'crop') {
+                activeObjShape = parent.currObjType.isCustomCrop ? 'custom' : splitWords[1];
+                parent.notify('shape', { prop: 'updImgRatioForActObj', onPropertyChange: false});
+                parent.objColl.push(parent.activeObj);
+                parent.notify('shape', { prop: 'refreshActiveObj', onPropertyChange: false});
+            }
+        }
+        parent.notify('shape', { prop: 'redrawActObj', onPropertyChange: false,
+            value: {x: null, y: null, isMouseDown: true}});
+        parent.clearContext(this.lowerContext); parent.clearContext(this.upperContext);
+        const tempObjColl: SelectionPoint[] = extend([], parent.objColl, [], true) as SelectionPoint[];
+        const tempActiveObj: SelectionPoint = extend({}, parent.activeObj, {}, true) as SelectionPoint;
+        parent.objColl = [];
+        parent.notify('shape', { prop: 'refreshActiveObj', onPropertyChange: false});
+        if (!this.isReverseFlip) {
+            parent.notify('draw', { prop: 'updateCurrTransState', onPropertyChange: false,
+                value: {type: 'initial', isPreventDestination: null, isRotatePan: null} });
+        }
+        const lowercaseDirection: string = direction.toLowerCase();
+        this.updateFlipState(lowercaseDirection);
+        const flipState: string = parent.transform.currFlipState.toLowerCase();
+        parent.transform.currFlipState = (lowercaseDirection === 'horizontal' && flipState === 'horizontal') ||
+                                 (lowercaseDirection === 'vertical' && flipState === 'vertical') ? '' : lowercaseDirection;
+        const selObj: Object = {isSelected: null };
+        parent.notify('draw', { prop: 'getRotatedFlipCropSelection', onPropertyChange: false, value: {bool: selObj }});
+        if (selObj['isSelected']) {
+            parent.img.destLeft += parent.panPoint.totalPannedInternalPoint.x;
+            parent.img.destTop += parent.panPoint.totalPannedInternalPoint.y;
+        }
+        const temp: string = this.lowerContext.filter;
+        parent.notify('draw', { prop: 'drawImage', onPropertyChange: false});
+        this.lowerContext.filter = temp;
+        parent.notify('draw', { prop: 'setImageEdited', onPropertyChange: false });
+        this.updateFlipState(direction.toLowerCase());
+        if (!this.isReverseFlip) {
+            parent.notify('draw', { prop: 'updateCurrTransState', onPropertyChange: false,
+                value: {type: 'reverse', isPreventDestination: null, isRotatePan: null} });
+            this.updateFlipColl(direction.toLocaleLowerCase());
+            parent.rotateFlipColl.push(direction.toLowerCase());
+        }
+        if (parent.rotateFlipColl.length === 1) {
+            const panObj: Object = {panRegion: '' };
+            parent.notify('crop', { prop: 'getCurrFlipState', onPropertyChange: false,
+                value: {panObj: panObj }});
+            if (panObj['panRegion'] === '') {
+                parent.notify('draw', { prop: 'setClientTransDim', onPropertyChange: false,
+                    value: {isPreventDimension: null}});
+            } else {
+                this.setDestPointsForFlipState();
+            }
+        }
+        if (parent.isCircleCrop) {
+            parent.notify('crop', { prop: 'cropCircle', onPropertyChange: false,
+                value: {context: this.lowerContext, isSave: null, isFlip: null}});
+        }
+        parent.objColl = extend([], tempObjColl, [], true) as SelectionPoint[];
+        parent.activeObj = extend({}, tempActiveObj, {}, true) as SelectionPoint;
+        for (let i: number = 0, len: number = parent.objColl.length; i < len; i++) {
+            const flipObjColl: string[] = parent.objColl[i as number].flipObjColl;
+            if (flipObjColl.length === 0) {
+                flipObjColl.push(direction);
+            } else if (flipObjColl[flipObjColl.length - 1] === direction) {
+                flipObjColl.pop();
+            } else {
+                flipObjColl.push(direction);
+            }
+        }
+        parent.notify('shape', { prop: 'redrawObj', onPropertyChange: false, value: {degree: direction.toLowerCase()}});
+        const tempFilter: string = this.lowerContext.filter;
+        this.lowerContext.filter = 'brightness(' + 1 + ') ' + 'contrast(' + 100 + '%) ' + 'hue-rotate(' + 0 + 'deg) ' +
+            'saturate(' + 100 + '%) ' + 'opacity(' + 1 + ') ' + 'blur(' + 0 + 'px) ' + 'sepia(0%) ' + 'grayscale(0%) ' + 'invert(0%)';
+        parent.notify('shape', { prop: 'iterateObjColl', onPropertyChange: false});
+        const dir: string = direction.toLowerCase();
+        if (dir === 'horizontal' || dir === 'vertical') {
+            parent.notify('freehand-draw', { prop: 'flipFHDColl', onPropertyChange: false,
+                value: {value: dir}});
+            parent.notify('freehand-draw', { prop: 'freehandRedraw', onPropertyChange: false,
+                value: {context: this.lowerContext, points: null} });
+        } else {
+            parent.notify('freehand-draw', { prop: 'freehandRedraw', onPropertyChange: false,
+                value: {context: this.lowerContext, points: null} });
+        }
+        this.lowerContext.filter = tempFilter;
+        parent.notify('shape', { prop: 'refreshActiveObj', onPropertyChange: false});
+        this.updateCurrSelectionPoint(dir);
+        parent.isUndoRedo = false;
+        parent.notify('draw', { prop: 'clearOuterCanvas', onPropertyChange: false, value: {context: this.lowerContext}});
+        parent.notify('draw', { prop: 'clearOuterCanvas', onPropertyChange: false, value: {context: this.upperContext}});
+        if (parent.isCircleCrop) {
+            parent.notify('crop', { prop: 'cropCircle', onPropertyChange: false,
+                value: {context: this.lowerContext, isSave: null, isFlip: null}});
+        }
+        if (activeObjShape) {
+            this.upperContext.clearRect(0, 0, parent.upperCanvas.width, parent.upperCanvas.height);
+            parent.activeObj = extend({}, parent.objColl[parent.objColl.length - 1], {}, true) as SelectionPoint;
+            parent.objColl.pop();
+            parent.notify('draw', { prop: 'drawObject', onPropertyChange: false, value: {canvas: 'duplicate', obj: parent.activeObj}});
+        }
+        const obj: Object = {collection: parent.rotateFlipColl};
+        parent.notify('shape', { prop: 'alignRotateFlipColl', onPropertyChange: false,
+            value: {collection: parent.rotateFlipColl, isRotateFlipCollection: true, obj: obj }});
+        parent.rotateFlipColl = obj['collection'];
+        if (parent.cropObj.activeObj.shape && !this.isPreventSelect) {
+            parent.notify('draw', { prop: 'setIsCropSelect', value: {bool: true }});
+            this.isPreventSelect = true;
+            parent.notify('draw', { prop: 'select', onPropertyChange: false,
+                value: {type: 'custom', startX: null, startY: null, width: null, height: null }});
+            this.isPreventSelect = false;
+            parent.setProperties({zoomSettings: { zoomFactor: 1 }}, true);
+            this.prevZoomValue = parent.zoomSettings.zoomFactor;
+        }
+    }
+
+    private updateFlipState(direction: string): void {
+        const degree: number = this.parent.transform.degree;
+        if (direction === 'horizontal') {
+            if (degree % 90 === 0 && degree % 180 !== 0) {
+                this.verticalFlip();
+            } else {
+                this.horizontalFlip();
+            }
+        } else if (direction === 'vertical') {
+            if (degree % 90 === 0 && degree % 180 !== 0) {
+                this.horizontalFlip();
+            } else {
+                this.verticalFlip();
+            }
+        }
+    }
+
+    private horizontalFlip(): void {
+        this.lowerContext.translate(this.lowerContext.canvas.width, 0);
+        this.lowerContext.scale(-1, 1);
+        this.upperContext.translate(this.upperContext.canvas.width, 0);
+        this.upperContext.scale(-1, 1);
+    }
+
+    private verticalFlip(): void {
+        this.lowerContext.translate(0, this.lowerContext.canvas.height);
+        this.lowerContext.scale(1, -1);
+        this.upperContext.translate(0, this.upperContext.canvas.height);
+        this.upperContext.scale(1, -1);
+    }
+
+    private updateFlipColl(direction: string): void {
+        if (this.isPreventSelect) {
+            return;
+        }
+        if (this.flipColl.length === 0 || this.flipColl[this.flipColl.length - 1] !== direction) {
+            this.flipColl.push(direction);
+        } else {
+            this.flipColl.pop();
+        }
+        if (this.flipColl.length >= 4) {
+            const lastFourItems: string[] = this.flipColl.slice(-4);
+            if (
+                (lastFourItems[0] === 'horizontal' && lastFourItems[1] === 'vertical' &&
+                lastFourItems[2] === 'horizontal' && lastFourItems[3] === 'vertical') ||
+                (lastFourItems[0] === 'vertical' && lastFourItems[1] === 'horizontal' &&
+                lastFourItems[2] === 'vertical' && lastFourItems[3] === 'horizontal')
+            ) {
+                this.flipColl.splice(-4);
+            }
+        }
+    }
+
+    private setDestPointsForFlipState(): void {
+        const parent: ImageEditor = this.parent; const panObj: Object = {panRegion: '' };
+        const { destLeft, destTop, destWidth, destHeight } = parent.img;
+        const { clientWidth, clientHeight } = parent.lowerCanvas;
+        parent.notify('crop', { prop: 'getCurrFlipState', onPropertyChange: false,
+            value: {panObj: panObj }});
+        if (panObj['panRegion'] !== '') {
+            if (panObj['panRegion'] === 'horizontal') {
+                parent.img.destLeft = clientWidth - (destWidth + destLeft);
+            } else if (panObj['panRegion'] === 'vertical') {
+                parent.img.destTop = clientHeight - (destHeight + destTop);
+            } else {
+                parent.img.destLeft = clientWidth - (destWidth + destLeft);
+                parent.img.destTop = clientHeight - (destHeight + destTop);
+            }
+        }
+    }
+
+    private zoomAction(zoomFactor: number, zoomPoint?: Point, isResize?: boolean, isPreventApply?: boolean): void {
+        const parent: ImageEditor = this.parent;
+        if (!parent.disabled && parent.isImageLoaded) {
+            if (isNullOrUndefined(isResize) && (parent.zoomSettings.zoomFactor >= parent.zoomSettings.maxZoomFactor && zoomFactor > 0 ||
+                (parent.zoomSettings.zoomFactor > parent.zoomSettings.minZoomFactor && zoomFactor < 0 && this.disableZoomOutBtn(true)) ||
+                (parent.zoomSettings.zoomFactor <= parent.zoomSettings.minZoomFactor && zoomFactor < 0))) {
+                parent.notify('toolbar', { prop: 'zoom-up-handler', onPropertyChange: false});
+                return;
+            }
+            parent.notify('draw', { prop: 'setImageEdited', onPropertyChange: false });
+            const tempZoomFactor: number = zoomFactor;
+            zoomFactor = tempZoomFactor > 0 ? 0.1 : -0.1;
+            for (let i: number = 0; i < Math.round(Math.abs(tempZoomFactor / 0.1)); i++) {
+                if (this.prevZoomValue === 1) {
+                    this.prevZoomValue += zoomFactor > 0 ? zoomFactor * 10 : (zoomFactor * 10) / 10;
+                } else if (this.prevZoomValue > 1) {
+                    this.prevZoomValue += (zoomFactor * 10);
+                } else if (this.prevZoomValue < 1) {
+                    this.prevZoomValue += (zoomFactor * 10) / 10;
+                    const powerOften: number = Math.pow(10, 1);
+                    this.prevZoomValue = (Math.round(this.prevZoomValue * powerOften ) / powerOften);
+                }
+            }
+            zoomFactor = tempZoomFactor;
+            parent.setProperties({zoomSettings: { zoomFactor: this.prevZoomValue}}, true);
+            let splitWords: string[]; this.tempActiveObj = null; this.isShape = false;
+            if (parent.activeObj.shape !== undefined) {
+                if (parent.activeObj.shape === 'shape') {
+                    parent.notify('shape', { prop: 'refreshActiveObj', onPropertyChange: false});
+                }
+                else {splitWords = parent.activeObj.shape.split('-'); }
+            }
+            if (splitWords !== undefined && splitWords[0] === 'crop') {
+                this.tempActiveObj = extend({}, parent.activeObj, {}, true) as SelectionPoint;
+                parent.isCropTab = true;
+            } else if (parent.activeObj.shape && splitWords[0] !== 'crop' &&
+                (parent.activeObj.activePoint.width !== 0 || parent.activeObj.activePoint.height !== 0) ||
+                (parent.activeObj.shape === 'path' && parent.activeObj.pointColl.length > 0)) {
+                this.isShape = true;
+            }
+            const obj: Object = {zoomType: null };
+            parent.notify('selection', { prop: 'getZoomType', onPropertyChange: false, value: {obj: obj }});
+            if (isNullOrUndefined(zoomPoint)) {
+                if (parent.isCropTab && this.tempActiveObj) {
+                    zoomPoint = {x: parent.activeObj.activePoint.startX + (parent.activeObj.activePoint.width / 2),
+                        y: parent.activeObj.activePoint.startY + (parent.activeObj.activePoint.height / 2) };
+                } else {
+                    zoomPoint = {x: parent.lowerCanvas.clientWidth / 2, y: parent.lowerCanvas.clientHeight / 2 };
+                }
+                if (obj['zoomType'] === 'MouseWheel' || obj['zoomType'] === 'Pinch') {
+                    zoomPoint = {x: parent.zoomSettings.zoomPoint.x, y: parent.zoomSettings.zoomPoint.y};
+                }
+            }
+            const previousZoomFactor: number = parent.zoomSettings.zoomFactor - (zoomFactor * 10);
+            const zoomEventArgs: ZoomEventArgs = {zoomPoint: zoomPoint, cancel: false, previousZoomFactor: previousZoomFactor,
+                currentZoomFactor: parent.zoomSettings.zoomFactor, zoomTrigger: obj['zoomType']};
+            if (!parent.isCropToolbar && parent.isZoomBtnClick) {
+                parent.trigger('zooming', zoomEventArgs);
+                parent.editCompleteArgs = zoomEventArgs;
+            }
+            this.zoomEvent(zoomEventArgs, zoomFactor, isPreventApply);
+        }
+    }
+
+    private zoomEvent(zoomEventArgs: ZoomEventArgs, zoomFact: number, isPreventApply?: boolean): void {
+        const parent: ImageEditor = this.parent;
+        let shapeId: string;
+        const { zoomFactor, minZoomFactor } = parent.zoomSettings;
+        if (zoomEventArgs.cancel) { parent.isZoomBtnClick = false; return; }
+        if (this.parent.activeObj.redactType !== 'blur' && this.parent.activeObj.redactType !== 'pixelate') {
+            parent.notify('toolbar', { prop: 'close-contextual-toolbar', onPropertyChange: false});
+        }
+        if (!parent.isCropTab && parent.activeObj.shape) {
+            shapeId = parent.activeObj.currIndex;
+        }
+        parent.notify('shape', { prop: 'redrawActObj', onPropertyChange: false,
+            value: {x: null, y: null, isMouseDown: true}});
+        parent.notify('shape', { prop: 'refreshActiveObj', onPropertyChange: false});
+        this.upperContext.clearRect(0, 0, parent.lowerCanvas.width, parent.lowerCanvas.height);
+        const object: Object = {canvasFilter: parent.canvasFilter };
+        this.lowerContext.filter = object['canvasFilter'];
+        parent.upperCanvas.style.cursor = parent.cursor = 'default';
+        let objColl: SelectionPoint[] = extend([], parent.objColl, [], true) as SelectionPoint[];
+        if (!parent.isCropTab) {
+            if (parent.transform.degree !== 0) {
+                parent.notify('shape', { prop: 'redrawActObj', onPropertyChange: false, value: {x: null, y: null, isMouseDown: null}});
+                parent.panPoint.currentPannedPoint = {x: 0, y: 0};
+                const temp: boolean = parent.allowDownScale;
+                parent.allowDownScale = false;
+                this.rotatePan(true, true);
+                parent.allowDownScale = temp;
+            } else if (parent.transform.currFlipState !== '') {
+                parent.panPoint.totalPannedPoint = {x: 0, y: 0};
+            }
+            if (parent.transform.straighten === 0 && !this.isPreventSelect) {
+                parent.notify('freehand-draw', { prop: 'updateFHDColl', onPropertyChange: false, value: {isPreventApply: isPreventApply }});
+            }
+        }
+        if (parent.transform.degree === 0) {
+            this.drawZoomImgToCanvas(zoomFact, this.tempActiveObj);
+            const panObj: Object = {panRegion: '' };
+            parent.notify('crop', { prop: 'getCurrFlipState', onPropertyChange: false, value: {panObj: panObj }});
+            if (panObj['panRegion'] !== '') {
+                parent.notify('crop', { prop: 'setTempFlipPanPoint', onPropertyChange: false, value: {point: parent.panPoint.totalPannedPoint, isAdd: true }});
+                objColl = extend([], parent.objColl, [], true) as SelectionPoint[];
+                parent.objColl = [];
+                const destLeft: number = parent.img.destLeft; const destTop: number = parent.img.destTop;
+                this.setDestPointsForFlipState();
+                this.rotatedFlip();
+                parent.img.destLeft = destLeft; parent.img.destTop = destTop;
+                parent.objColl = objColl;
+                parent.notify('shape', { prop: 'drawAnnotations', onPropertyChange: false,
+                    value: {ctx: this.lowerContext, shape: 'zoom', pen: 'zoom', isPreventApply: isPreventApply }});
+                if (parent.transform.straighten === 0 && !this.isPreventSelect) {
+                    parent.notify('freehand-draw', { prop: 'updateFHDColl', onPropertyChange: false, value: {isPreventApply: isPreventApply }});
+                }
+            }
+            if (zoomFactor <= minZoomFactor && !parent.isCropTab) {
+                parent.panPoint.totalPannedPoint = { x: 0, y: 0 };
+            }
+        } else {
+            if (parent.transform.straighten === 0 && !this.isPreventSelect) {
+                parent.notify('freehand-draw', { prop: 'updateFHDColl', onPropertyChange: false, value: {isPreventApply: isPreventApply }});
+            }
+            parent.panPoint.totalPannedClientPoint = { x: 0, y: 0 };
+            parent.panPoint.totalPannedInternalPoint = { x: 0, y: 0 };
+            this.rotateZoom(zoomFact);
+            const panObj: Object = {panRegion: '' };
+            parent.notify('crop', { prop: 'getCurrFlipState', onPropertyChange: false, value: {panObj: panObj }});
+            if (panObj['panRegion'] !== '') {
+                const temp: string = this.lowerContext.filter;
+                this.lowerContext.filter = 'none';
+                parent.notify('shape', { prop: 'drawAnnotations', onPropertyChange: false,
+                    value: {ctx: this.lowerContext, shape: 'zoom', pen: 'zoom', isPreventApply: isPreventApply }});
+                this.lowerContext.filter = temp;
+            }
+        }
+        const powerOften: number = Math.pow(10, 1);
+        if (zoomFactor <= minZoomFactor ||
+            (Math.round(parent.transform.zoomFactor * powerOften ) / powerOften) === 2) {
+            clearInterval(this.zoomBtnHold); this.zoomBtnHold = 0;
+        }
+        const panObj: Object = {panRegion: '' };
+        parent.notify('crop', { prop: 'getCurrFlipState', onPropertyChange: false, value: {panObj: panObj }});
+        if (panObj['panRegion'] === '') {
+            const temp: string = this.lowerContext.filter;
+            this.lowerContext.filter = 'none';
+            parent.notify('shape', { prop: 'drawAnnotations', onPropertyChange: false,
+                value: {ctx: this.lowerContext, shape: 'zoom', pen: 'zoom', isPreventApply: isPreventApply }});
+            this.lowerContext.filter = temp;
+        }
+        if ((parent.currSelectionPoint && parent.currSelectionPoint.shape === 'crop-circle') || parent.isCircleCrop) {
+            parent.notify('crop', { prop: 'cropCircle', onPropertyChange: false,
+                value: {context: this.lowerContext, isSave: null, isFlip: null}});
+        }
+        parent.notify('draw', { prop: 'clearOuterCanvas', onPropertyChange: false, value: {context: this.lowerContext}});
+        parent.notify('shape', { prop: 'refreshActiveObj', onPropertyChange: false});
+        if (this.tempActiveObj) {
+            parent.activeObj = extend({}, this.tempActiveObj, {}, true) as SelectionPoint;
+            parent.notify('draw', { prop: 'drawObject', onPropertyChange: false, value: {canvas: 'duplicate', obj: parent.activeObj}});
+            if (zoomFactor <= minZoomFactor) {parent.currSelectionPoint = null; }
+        }
+        parent.isUndoRedo = false;
+        let zoomOut: HTMLElement;
+        zoomOut = document.querySelector('#' + parent.element.id + '_zoomOut');
+        if (zoomOut && zoomFactor <= minZoomFactor) {
+            zoomOut.classList.add('e-disabled');
+            zoomOut.parentElement.classList.add('e-overlay');
+        } else if (zoomOut) {
+            zoomOut.classList.remove('e-disabled');
+            zoomOut.parentElement.classList.remove('e-overlay');
+        }
+        const drawingShape: string = parent.drawingShape;
+        this.autoEnablePan();
+        parent.drawingShape = drawingShape;
+        if (this.tempActiveObj) {
+            parent.activeObj = extend({}, this.tempActiveObj, {}, true) as SelectionPoint;
+        }
+        if (parent.activeObj.shape === 'crop-custom') {parent.currObjType.isCustomCrop = true; }
+        if (this.isShape) {
+            if (shapeId) {
+                for (let i: number = 0, len: number = parent.objColl.length; i < len; i++) {
+                    if (parent.objColl[i as number].currIndex === shapeId) {
+                        parent.activeObj = extend({}, parent.objColl[i as number], {}, true) as SelectionPoint;
+                        parent.objColl.splice(i, 1);
+                        break;
+                    }
+                }
+            } else {
+                parent.activeObj = extend({}, parent.objColl[parent.objColl.length - 1], {}, true) as SelectionPoint;
+                parent.objColl.pop();
+            }
+            parent.notify('draw', { prop: 'drawObject', onPropertyChange: false, value: {canvas: 'duplicate', obj: parent.activeObj, isCropRatio: null,
+                points: null, isPreventDrag: true, saveContext: null, isPreventSelection: null} });
+            parent.notify('toolbar', { prop: 'update-toolbar-items', onPropertyChange: false});
+            parent.notify('toolbar', { prop: 'renderQAT', onPropertyChange: false, value: {isPenEdit: null} });
+        }
+        parent.notify('toolbar', { prop: 'enable-disable-btns', onPropertyChange: false});
+        parent.notify('selection', { prop: 'setZoomType', onPropertyChange: false, value: {zoomType: 'Toolbar' }});
+        // eslint-disable-next-line max-len
+        zoomEventArgs = { zoomPoint: zoomEventArgs.zoomPoint, previousZoomFactor: zoomEventArgs.previousZoomFactor, currentZoomFactor: zoomEventArgs.currentZoomFactor, zoomTrigger: zoomEventArgs.zoomTrigger};
+        if (!parent.isCropToolbar && parent.isZoomBtnClick) {
+            parent.isZoomBtnClick = false;
+        }
+        if (parent.drawingShape) {
+            const activeObj: SelectionPoint = extend({}, parent.activeObj, {}, true) as SelectionPoint;
+            parent.enableShapeDrawing(parent.toPascalCase(parent.drawingShape) as ShapeType, true);
+            parent.activeObj = activeObj;
+            if (activeObj.activePoint.width > 0 || activeObj.activePoint.height > 0 ||
+                (activeObj.pointColl && activeObj.pointColl.length > 0)) {
+                if (activeObj.shape === 'redact') {
+                    parent.notify('toolbar', { prop: 'renderQAT', onPropertyChange: false, value: { isPenEdit: null } });
+                }
+                const zOrderElem: HTMLElement = parent.element.querySelector('#' + parent.element.id + '_zOrderBtn');
+                const dupElem: HTMLElement = parent.element.querySelector('#' + parent.element.id + '_duplicate');
+                const removeElem: HTMLElement = parent.element.querySelector('#' + parent.element.id + '_remove');
+                const editTextElem: HTMLElement = parent.element.querySelector('#' + parent.element.id + '_editText');
+                if (zOrderElem) {zOrderElem.classList.remove('e-overlay'); }
+                if (dupElem) {dupElem.classList.remove('e-overlay'); }
+                if (removeElem) {removeElem.classList.remove('e-overlay'); }
+                if (editTextElem) {editTextElem.classList.remove('e-overlay'); }
+            }
+        } else if (parent.activeObj.shape && parent.activeObj.shape === 'redact') {
+            parent.notify('toolbar', { prop: 'refresh-toolbar', onPropertyChange: false, value: { type: 'redact',
+                isApplyBtn: false, isCropping: false } });
+            parent.notify('toolbar', { prop: 'renderQAT', onPropertyChange: false, value: { isPenEdit: null } });
+        }
+    }
+
+    private disableZoomOutBtn(isZoomOut?: boolean): boolean {
+        const parent: ImageEditor = this.parent; const { zoomFactor, minZoomFactor } = parent.zoomSettings;
+        let isDisabled: boolean = false;
+        let zoomOut: HTMLElement;
+        if (!isNullOrUndefined(isZoomOut)) {
+            parent.transform.zoomFactor -= 0.1;
+        }
+        zoomOut = parent.element.querySelector('#' + parent.element.id + '_zoomOut');
+        const destPoints: Object = {destLeft: parent.img.destLeft, destTop: parent.img.destTop,
+            destWidth: parent.img.destWidth, destHeight: parent.img.destHeight };
+        if (parent.activeObj.shape) {
+            const maxDimension: Dimension = this.setZoomDimension(-0.1, parent.activeObj);
+            const actPoint: ActivePoint = parent.activeObj.activePoint;
+            if (parent.transform.straighten === 0) {
+                if (parent.img.destLeft > actPoint.startX || parent.img.destTop >
+                    actPoint.startY || parent.img.destLeft + parent.img.destWidth <
+                    actPoint.endX || parent.img.destTop + parent.img.destHeight < actPoint.endY
+                    || zoomFactor === minZoomFactor) {
+                    isDisabled = true;
+                } else {
+                    isDisabled = false;
+                }
+            } else {
+                parent.img.destWidth = maxDimension.width; parent.img.destHeight = maxDimension.height;
+                const obj: Object = {isIntersect: null };
+                parent.notify('draw', { prop: 'updateImgCanvasPoints', onPropertyChange: false });
+                parent.notify('draw', { prop: 'isLinesIntersect', onPropertyChange: false, value: {obj: obj }});
+                if (obj['isIntersect'] ||
+                    zoomFactor === minZoomFactor) {
+                    isDisabled = true;
+                } else {
+                    isDisabled = false;
+                }
+            }
+            if (zoomOut) {
+                if (isDisabled) {
+                    zoomOut.classList.add('e-disabled');
+                    zoomOut.parentElement.classList.add('e-overlay');
+                } else {
+                    zoomOut.classList.remove('e-disabled');
+                    zoomOut.parentElement.classList.remove('e-overlay');
+                }
+            }
+        } else {
+            this.setZoomDimension(-0.1, null);
+        }
+        if (!isNullOrUndefined(isZoomOut)) {
+            parent.transform.zoomFactor += 0.1;
+        }
+        parent.img.destLeft = destPoints['destLeft']; parent.img.destTop = destPoints['destTop'];
+        parent.img.destWidth = destPoints['destWidth']; parent.img.destHeight = destPoints['destHeight'];
+        return isDisabled;
+    }
+
+    private drawZoomImgToCanvas(value: number, selectionObj?: SelectionPoint): void {
+        const parent: ImageEditor = this.parent;
+        const powerOften: number = Math.pow(10, 1);
+        const zmFactor: number = Math.round(parent.transform.zoomFactor * powerOften ) / powerOften;
+        if ((zmFactor === 0.1 && value === -0.1) || zmFactor === 0 && value === -0.025) {
+            parent.transform.zoomFactor = 0;
+        } else {parent.transform.zoomFactor += value; }
+        parent.transform[parent.isCropTab ? 'cropZoomFactor' : 'defaultZoomFactor'] = parent.transform.zoomFactor;
+        let maxDimension: Dimension = {width: 0, height: 0};
+        if (parent.isCropTab) {
+            maxDimension = this.cropZoom(value, selectionObj);
+        } else {
+            maxDimension = this.calcMaxDimension(parent.img.srcWidth, parent.img.srcHeight);
+            maxDimension.width += (maxDimension.width * parent.transform.zoomFactor);
+            maxDimension.height += (maxDimension.height * parent.transform.zoomFactor);
+            parent.img.destLeft = (parent.lowerCanvas.clientWidth - maxDimension.width) / 2;
+            parent.img.destTop = (parent.lowerCanvas.clientHeight - maxDimension.height) / 2;
+        }
+        parent.notify('draw', {prop: 'draw-image-to-canvas', value: {dimension: maxDimension } });
+        maxDimension.width = this.cropDimension.width; maxDimension.height = this.cropDimension.height;
+        maxDimension.width += (maxDimension.width * parent.transform.zoomFactor);
+        maxDimension.height += (maxDimension.height * parent.transform.zoomFactor);
+        parent.notify('draw', {prop: 'setZoomCropWidth', value: {width: maxDimension.width, height: maxDimension.height }});
+    }
+
+    private rotatedFlip(): void {
+        const parent: ImageEditor = this.parent;
+        this.isReverseFlip = true;
+        let tempCurrFlipState: string = parent.transform.currFlipState;
+        const tempFlipColl: string[] = this.flipColl;
+        const tempObjColl: SelectionPoint[] = extend([], parent.objColl, [], true) as SelectionPoint[];
+        const tempActiveObj: SelectionPoint = extend({}, parent.activeObj, {}, true) as SelectionPoint;
+        this.flipColl = []; parent.objColl = [];
+        parent.notify('shape', { prop: 'refreshActiveObj', onPropertyChange: false});
+        parent.notify('draw', { prop: 'currTransState', onPropertyChange: false,
+            value: {type: 'initial', isPreventDestination: null, context: null, isPreventCircleCrop: null} });
+        const temp: string = this.lowerContext.filter;
+        parent.notify('draw', { prop: 'drawImage', onPropertyChange: false});
+        this.lowerContext.filter = temp;
+        parent.notify('draw', { prop: 'currTransState', onPropertyChange: false,
+            value: {type: 'reverse', isPreventDestination: true, context: null, isPreventCircleCrop: null} });
+        if (tempCurrFlipState === '' && parent.transform.currFlipState !== '') {
+            tempCurrFlipState = parent.transform.currFlipState;
+        }
+        parent.transform.currFlipState = tempCurrFlipState;
+        this.flipColl = tempFlipColl;
+        parent.objColl = extend([], tempObjColl, [], true) as SelectionPoint[];
+        this.lowerContext.filter = 'none';
+        parent.notify('shape', { prop: 'iterateObjColl', onPropertyChange: false});
+        this.lowerContext.filter = temp;
+        if (tempActiveObj.activePoint.width !== 0) {
+            parent.activeObj = extend({}, tempActiveObj, {}, true) as SelectionPoint;
+        }
+        this.isReverseFlip = false;
+    }
+
+    private rotateZoom(value: number): void {
+        const parent: ImageEditor = this.parent;
+        const powerOften: number = Math.pow(10, 1);
+        const zmFactor: number = Math.round(parent.transform.zoomFactor * powerOften ) / powerOften;
+        if ((zmFactor === 0.1 && value === -0.1) || zmFactor === 0 && value === -0.025) {
+            parent.transform.zoomFactor = 0;
+        } else {parent.transform.zoomFactor += value; }
+        if (parent.isCropTab) {
+            parent.transform.cropZoomFactor = parent.transform.zoomFactor;
+        } else {
+            parent.transform.defaultZoomFactor = parent.transform.zoomFactor;
+        }
+        const tempObjColl: SelectionPoint[] = extend([], parent.objColl, [], true) as SelectionPoint[];
+        const tempActiveObj: SelectionPoint = extend({}, parent.activeObj, {}, true) as SelectionPoint;
+        parent.objColl = [];
+        parent.notify('shape', { prop: 'refreshActiveObj', onPropertyChange: false});
+        parent.notify('draw', { prop: 'updateCurrTransState', onPropertyChange: false,
+            value: {type: 'initial', isPreventDestination: null, isRotatePan: null} });
+        parent.notify('draw', { prop: 'setRotateZoom', onPropertyChange: false, value: {isRotateZoom: true }});
+        parent.notify('draw', { prop: 'setDestPoints', onPropertyChange: false});
+        const temp: string = this.lowerContext.filter;
+        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: 'updateCurrTransState', onPropertyChange: false,
+            value: {type: 'reverse', isPreventDestination: null, isRotatePan: null} });
+        parent.objColl = tempObjColl;
+        parent.activeObj = tempActiveObj;
+        const maxDimension: Dimension = {width: this.cropDimension.width, height: this.cropDimension.height };
+        maxDimension.width += (maxDimension.width * parent.transform.zoomFactor);
+        maxDimension.height += (maxDimension.height * parent.transform.zoomFactor);
+        parent.notify('draw', {prop: 'setZoomCropWidth', value: {width: maxDimension.width, height: maxDimension.height }});
+    }
+
+    private autoEnablePan(): void {
+        const parent: ImageEditor = this.parent;
+        if (parent.transform.zoomFactor <= 0) {
+            parent.togglePan = false;
+            parent.notify('selection', {prop: 'setDragCanvas', value: {bool: false }});
+            parent.pan(false); this.disablePan = false;
+        } else {
+            parent.pan(!this.disablePan);
+        }
+    }
+
+    private cropZoom(value: number, selectionObj?: SelectionPoint): Dimension {
+        const parent: ImageEditor = this.parent;
+        let destLeft: number = parent.img.destLeft; let destTop: number = parent.img.destTop;
+        let maxDimension: Dimension = {width: 0, height: 0};
+        if (parent.transform.degree % 90 === 0 && parent.transform.degree % 180 !== 0) {
+            maxDimension = this.calcMaxDimension(parent.img.srcHeight, parent.img.srcWidth);
+        } else {
+            maxDimension = this.calcMaxDimension(parent.img.srcWidth, parent.img.srcHeight);
+        }
+        maxDimension.width += (maxDimension.width * parent.transform.zoomFactor);
+        maxDimension.height += (maxDimension.height * parent.transform.zoomFactor);
+        parent.img.destLeft = destLeft - ((maxDimension.width - parent.img.destWidth) / 2);
+        parent.img.destTop = destTop - ((maxDimension.height - parent.img.destHeight) / 2);
+        destLeft = parent.img.destLeft; destTop = parent.img.destTop;
+        if (selectionObj && parent.transform.straighten === 0) {
+            if (parent.img.destLeft > selectionObj.activePoint.startX) {
+                parent.img.destLeft = selectionObj.activePoint.startX;
+                if (parent.transform.degree === 0) {
+                    parent.panPoint.totalPannedPoint.x -= (destLeft - parent.img.destLeft);
+                }
+            }
+            if (parent.img.destTop > selectionObj.activePoint.startY) {
+                parent.img.destTop = selectionObj.activePoint.startY;
+                if (parent.transform.degree === 0) {
+                    parent.panPoint.totalPannedPoint.y -= (destTop - parent.img.destTop);
+                }
+            }
+            if (parent.img.destLeft + maxDimension.width < selectionObj.activePoint.endX) {
+                parent.img.destLeft = selectionObj.activePoint.endX - maxDimension.width;
+                if (parent.transform.degree === 0) {
+                    parent.panPoint.totalPannedPoint.x -= (destLeft - parent.img.destLeft);
+                }
+            }
+            if (parent.img.destTop + maxDimension.height < selectionObj.activePoint.endY) {
+                parent.img.destTop = selectionObj.activePoint.endY - maxDimension.height;
+                if (parent.transform.degree === 0) {
+                    parent.panPoint.totalPannedPoint.y -= (destTop - parent.img.destTop);
+                }
+            }
+        }
+        return maxDimension;
+    }
+
+    private setZoomDimension(value: number, selectionObj: SelectionPoint): Dimension {
+        const parent: ImageEditor = this.parent; const degree: number = parent.transform.degree;
+        let maxDimension: Dimension = { width: 0, height: 0 };
+        if (degree % 90 === 0 && degree % 180 !== 0) {
+            maxDimension = this.calcMaxDimension(parent.img.srcHeight, parent.img.srcWidth);
+        } else {
+            maxDimension = this.calcMaxDimension(parent.img.srcWidth, parent.img.srcHeight);
+        }
+        maxDimension.width += (maxDimension.width * parent.transform.zoomFactor);
+        maxDimension.height += (maxDimension.height * parent.transform.zoomFactor);
+        parent.img.destLeft += ((parent.img.destWidth - maxDimension.width) / 2);
+        parent.img.destTop += ((parent.img.destHeight - maxDimension.height) / 2);
+        // While zoom out limit image to draw inside the selection range
+        if (value < 0 && selectionObj) {
+            const startX: number = selectionObj.activePoint.startX;
+            const startY: number = selectionObj.activePoint.startY;
+            const width: number = selectionObj.activePoint.width;
+            const height: number = selectionObj.activePoint.height;
+            const maxDestLeft: number = parent.img.destLeft + maxDimension.width;
+            const maxDestTop: number = parent.img.destTop + maxDimension.height;
+            if (parent.img.destLeft > startX) { parent.img.destLeft = startX; }
+            if (parent.img.destTop > startY) { parent.img.destTop = startY; }
+            if (maxDestLeft < startX + width) { parent.img.destLeft = startX + width - maxDimension.width; }
+            if (maxDestTop < startY + height) { parent.img.destTop = startY + height - maxDimension.height; }
+        } else if (value < 0 && isNullOrUndefined(selectionObj)) {
+            if (parent.img.destLeft > 0) {parent.img.destLeft = 0; }
+            if (parent.img.destTop > 0) {parent.img.destTop = 0; }
+            if (parent.img.destLeft +  maxDimension.width < parent.lowerCanvas.clientWidth) {
+                parent.img.destLeft = parent.lowerCanvas.clientWidth - parent.img.destWidth;
+            }
+            if (parent.img.destTop +  maxDimension.height < parent.lowerCanvas.clientHeight) {
+                parent.img.destTop = parent.lowerCanvas.clientHeight - parent.img.destHeight;
+            }
+        }
+        return maxDimension;
+    }
+
+    private drawPannedImage(xDiff?: number, yDiff?: number): void {
+        const parent: ImageEditor = this.parent;
+        const obj: Object = {panDown: null };
+        parent.notify('selection', { prop: 'getPanDown', onPropertyChange: false, value: {obj: obj }});
+        const panEventArgs: PanEventArgs = {startPoint: obj['panDown'], endPoint: this.panMove, cancel: false};
+        parent.trigger('panning', panEventArgs);
+        if (panEventArgs.cancel) { return; }
+        this.panEvent(xDiff, yDiff);
+    }
+
+    private panEvent(xDiff?: number, yDiff?: number, isPanMethod?: boolean): void {
+        const parent: ImageEditor = this.parent; let isObjCreated: boolean = false;
+        if (parent.activeObj.shape && parent.activeObj.shape === 'shape') {
+            parent.notify('shape', { prop: 'refreshActiveObj', onPropertyChange: false});
+        }
+        if (isNullOrUndefined(parent.activeObj.shape)) {
+            isObjCreated = true;
+            const actPoint: ActivePoint = parent.activeObj.activePoint = {startX: parent.img.destLeft, startY: parent.img.destTop,
+                endX: parent.img.destLeft + parent.img.destWidth, endY: parent.img.destTop + parent.img.destHeight};
+            const startX: number = actPoint.startX;
+            const startY: number = actPoint.startY;
+            const endX: number = actPoint.endX;
+            const endY: number = actPoint.endY;
+            if (startX < 0) {actPoint.startX = 0; }
+            if (startY < 0) {actPoint.startY = 0; }
+            if (endX > parent.lowerCanvas.width) {actPoint.endX = parent.lowerCanvas.width; }
+            if (endY > parent.lowerCanvas.height) {actPoint.endY = parent.lowerCanvas.height; }
+            actPoint.width = actPoint.endX - actPoint.startX;
+            actPoint.height = actPoint.endY - actPoint.startY;
+            parent.activeObj.shape = 'crop-custom';
+            const obj: Object = {strokeSettings: {} as StrokeSettings };
+            parent.notify('shape', { prop: 'getStrokeSettings', onPropertyChange: false, value: {obj: obj }});
+            parent.activeObj.strokeSettings = obj['strokeSettings'];
+            parent.notify('draw', { prop: 'updateActiveObject', onPropertyChange: false, value: {actPoint: actPoint, obj: parent.activeObj,
+                isMouseMove: null, x: null, y: null}});
+            parent.isCropTab = true;
+        }
+        if (parent.transform.degree === 0) {
+            let point: Point;
+            if ((isNullOrUndefined(xDiff) && isNullOrUndefined(yDiff)) || isPanMethod) {
+                if (isPanMethod) {
+                    point = this.updatePanPoints(xDiff, yDiff);
+                } else {
+                    point = this.updatePanPoints();
+                }
+            } else {point = {x: xDiff, y: yDiff}; }
+            parent.panPoint.totalPannedPoint.x += point.x; parent.panPoint.totalPannedPoint.y += point.y;
+            const tempSelectionObj: SelectionPoint = extend({}, parent.activeObj, {}, true) as SelectionPoint;
+            const temp: string = this.lowerContext.filter;
+            this.drawPannImage(point, isObjCreated); this.lowerContext.filter = temp;
+            this.tempPanMove = extend({}, this.panMove, {}, true) as Point;
+            parent.activeObj = extend({}, tempSelectionObj, {}, true) as SelectionPoint;
+            this.upperContext.clearRect(0, 0, parent.upperCanvas.width, parent.upperCanvas.height);
+            if (parent.activeObj.shape) {
+                parent.notify('draw', { prop: 'drawObject', onPropertyChange: false, value: {canvas: 'duplicate', obj: parent.activeObj}});
+            }
+        } else {
+            const tempFlipState: string = parent.transform.currFlipState; parent.isCropTab = true;
+            if ((isNullOrUndefined(xDiff) && isNullOrUndefined(yDiff)) || isPanMethod) {
+                if (isPanMethod) {
+                    parent.panPoint.currentPannedPoint = this.updatePanPoints(xDiff, yDiff);
+                } else {
+                    parent.panPoint.currentPannedPoint = this.updatePanPoints();
+                }
+            } else {
+                parent.panPoint.currentPannedPoint = {x: xDiff, y: yDiff};
+            }
+            parent.transform.currFlipState = tempFlipState; this.rotatePan(null, null, isObjCreated); parent.isCropTab = false;
+            this.tempPanMove = extend({}, this.panMove, {}, true) as Point;
+        }
+        if (isObjCreated) {
+            parent.notify('shape', { prop: 'refreshActiveObj', onPropertyChange: false}); parent.isCropTab = false;
+            this.upperContext.clearRect(0, 0, parent.upperCanvas.width, parent.upperCanvas.height);
+        }
+    }
+
+    private drawPannImage(point: Point, isObjCreated?: boolean): void {
+        const parent: ImageEditor = this.parent;
+        const filter: string = this.lowerContext.filter;
+        const destPoints: ActivePoint = {startX: parent.img.destLeft, startY: parent.img.destTop, width: parent.img.destWidth,
+            height: parent.img.destHeight};
+        this.lowerContext.clearRect(0, 0, parent.lowerCanvas.width, parent.lowerCanvas.height);
+        parent.notify('draw', { prop: 'updateCurrTransState', onPropertyChange: false,
+            value: {type: 'initial', isPreventDestination: null, isRotatePan: null} });
+        parent.img.destLeft = destPoints.startX; parent.img.destTop = destPoints.startY;
+        parent.img.destWidth = destPoints.width; parent.img.destHeight = destPoints.height;
+        this.setDestPointsForFlipState();
+        if (isObjCreated) {parent.isCropTab = false; }
+        parent.notify('draw', { prop: 'drawImage', onPropertyChange: false});
+        if (isObjCreated) {parent.isCropTab = true; }
+        if ((parent.currSelectionPoint && parent.currSelectionPoint.shape === 'crop-circle') || parent.isCircleCrop) {
+            parent.notify('crop', { prop: 'cropCircle', onPropertyChange: false,
+                value: {context: this.lowerContext, isSave: null, isFlip: true}});
+        }
+        this.lowerContext.filter = filter;
+        parent.notify('draw', { prop: 'updateCurrTransState', onPropertyChange: false,
+            value: {type: 'reverse', isPreventDestination: null, isRotatePan: null} });
+        parent.img.destLeft = destPoints.startX; parent.img.destTop = destPoints.startY;
+        parent.img.destWidth = destPoints.width; parent.img.destHeight = destPoints.height;
+        const temp: string = this.lowerContext.filter;
+        this.lowerContext.filter = 'none';
+        if (isObjCreated) {parent.isCropTab = false; }
+        parent.notify('shape', { prop: 'drawAnnotations', onPropertyChange: false,
+            value: {ctx: this.lowerContext, shape: 'pan', pen: 'pan', x: point.x,
+                y: point.y, panRegion: '' }});
+        if (isObjCreated) {parent.isCropTab = true; }
+        this.lowerContext.filter = temp;
+        parent.notify('draw', { prop: 'clearOuterCanvas', onPropertyChange: false, value: {context: this.lowerContext}});
+        if (parent.isCircleCrop) {
+            parent.notify('crop', { prop: 'cropCircle', onPropertyChange: false,
+                value: {context: this.lowerContext, isSave: null, isFlip: true}});
+        }
+    }
+
+    private resetZoom(): void {
+        const parent: ImageEditor = this.parent;
+        if (parent.transform.defaultZoomFactor !== 0) {
+            const isUndoRedo: boolean = parent.isUndoRedo;
+            const object: Object = {currObj: {} as CurrentObject };
+            parent.notify('filter', { prop: 'getCurrentObj', onPropertyChange: false, value: {object: object }});
+            this.transCurrObj = object['currObj'];
+            this.transCurrObj.objColl = extend([], parent.objColl, null, true) as SelectionPoint[];
+            this.transCurrObj.pointColl = extend({}, parent.pointColl, null, true) as Point[];
+            this.transCurrObj.afterCropActions = extend([], parent.afterCropActions, [], true) as string[];
+            const selPointCollObj: Object = {selPointColl: null };
+            parent.notify('freehand-draw', { prop: 'getSelPointColl', onPropertyChange: false,
+                value: {obj: selPointCollObj }});
+            this.transCurrObj.selPointColl = extend([], selPointCollObj['selPointColl'], [], true) as Point[];
+            parent.isUndoRedo = parent.isCropToolbar = true;
+            const zmFactor: number = parent.transform.defaultZoomFactor;
+            if (zmFactor > 0) {
+                this.zoomAction(-zmFactor);
+            } else {
+                this.zoomAction(Math.abs(zmFactor));
+            }
+            parent.isCropToolbar = false; parent.isUndoRedo = isUndoRedo;
+        }
+    }
+
+    private performTransformation(text: string): void {
+        const parent: ImageEditor = this.parent;
+        this.resetZoom();
+        this.updateTransform(text);
+        for (let i: number = 0, len: number = parent.objColl.length; i < len; i++) {
+            if (parent.objColl[i as number].flipObjColl.length > 0) {
+                const flipObjColl: Object = {collection: parent.objColl[i as number].flipObjColl };
+                parent.notify('shape', { prop: 'alignRotateFlipColl', onPropertyChange: false,
+                    value: {collection: flipObjColl['collection'], isRotateFlipCollection: null, obj: flipObjColl }});
+                parent.objColl[i as number].flipObjColl = flipObjColl['collection'];
+                if (parent.objColl[i as number].flipObjColl.length === 0) {
+                    parent.objColl[i as number].shapeFlip = '';
+                }
+            }
+        }
+    }
+
+    private updateTransform(text: string): void {
+        switch (text.toLowerCase()) {
+        case 'rotateleft':
+            this.rotateImage(-90);
+            break;
+        case 'rotateright':
+            this.rotateImage(90);
+            break;
+        case 'horizontalflip':
+            this.flipImage(Direction.Horizontal);
+            break;
+        case 'verticalflip':
+            this.flipImage(Direction.Vertical);
+            break;
+        }
+    }
+
+    private rotatePan(isCropSelection?: boolean, isDefaultZoom?: boolean, isObjCreated?: boolean): void {
+        const parent: ImageEditor = this.parent; this.isReverseRotate = true;
+        const tempDegree: number = parent.transform.degree;
+        let rotatePanActiveObj: SelectionPoint; const object: Object = {selPointColl: null };
+        if (parent.activeObj.activePoint && parent.activeObj.shape) {
+            rotatePanActiveObj = extend({}, parent.activeObj, {}, true) as SelectionPoint;
+        }
+        const tempObjColl: SelectionPoint[] = extend([], parent.objColl, [], true) as SelectionPoint[];
+        const tempPointColl: Point[] = extend([], parent.pointColl, [], true) as Point[];
+        parent.objColl = []; parent.pointColl = []; parent.freehandCounter = 0;
+        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.notify('shape', { prop: 'refreshActiveObj', onPropertyChange: false});
+        parent.notify('draw', { prop: 'setRotateZoom', onPropertyChange: false, value: {isRotateZoom: true }});
+        parent.notify('draw', { prop: 'updateCurrTransState', onPropertyChange: false,
+            value: {type: 'initial', isPreventDestination: null, isRotatePan: null} });
+        const initialDestLeft: number = parent.img.destLeft; const initialDestTop: number = parent.img.destTop;
+        const intPan: Point = parent.panPoint.totalPannedInternalPoint;
+        if (parent.isCropTab) {
+            parent.img.destLeft += intPan.x;
+            parent.img.destTop += intPan.y;
+        }
+        parent.notify('crop', { prop: 'updateRotatePan', onPropertyChange: false});
+        if (parent.isCropTab) {
+            parent.panPoint.totalPannedInternalPoint.x = parent.img.destLeft - initialDestLeft;
+            parent.panPoint.totalPannedInternalPoint.y = parent.img.destTop - initialDestTop;
+        }
+        const temp: string = this.lowerContext.filter;
+        if (isObjCreated) {parent.isCropTab = false; }
+        parent.notify('draw', { prop: 'drawImage', onPropertyChange: false});
+        if (isObjCreated) {parent.isCropTab = true; }
+        parent.notify('draw', { prop: 'setRotateZoom', onPropertyChange: false, value: {isRotateZoom: false }});
+        parent.notify('draw', { prop: 'updateCurrTransState', onPropertyChange: false,
+            value: {type: 'reverse', isPreventDestination: true, isRotatePan: true} });
+        const destLeft: number = parent.img.destLeft; const destTop: number = parent.img.destTop;
+        parent.img.destLeft += parent.panPoint.totalPannedClientPoint.x;
+        parent.img.destTop += parent.panPoint.totalPannedClientPoint.y;
+        parent.img.destLeft += parent.panPoint.currentPannedPoint.x;
+        parent.img.destTop += parent.panPoint.currentPannedPoint.y;
+        parent.panPoint.totalPannedClientPoint.x = parent.img.destLeft - destLeft;
+        parent.panPoint.totalPannedClientPoint.y = parent.img.destTop - destTop;
+        parent.objColl = tempObjColl; parent.pointColl = tempPointColl; parent.freehandCounter = parent.pointColl.length;
+        parent.notify('freehand-draw', { prop: 'setSelPointColl', onPropertyChange: false,
+            value: {obj: {selPointColl: cropSelPointColl } }});
+        parent.transform.degree = tempDegree;
+        this.lowerContext.filter = 'none';
+        if (isCropSelection) {
+            if (isDefaultZoom) {
+                parent.panPoint.totalPannedClientPoint.x = -parent.panPoint.totalPannedClientPoint.x;
+                parent.panPoint.totalPannedClientPoint.y = -parent.panPoint.totalPannedClientPoint.y;
+                parent.panPoint.currentPannedPoint = extend({}, parent.panPoint.totalPannedClientPoint, {}, true) as Point;
+                parent.panPoint.totalPannedClientPoint = { x: 0, y: 0 };
+                parent.img.destLeft += parent.panPoint.currentPannedPoint.x;
+                parent.img.destTop += parent.panPoint.currentPannedPoint.y;
+            } else {
+                parent.panPoint.currentPannedPoint = extend({}, parent.panPoint.totalPannedClientPoint, {}, true) as Point;
+            }
+        }
+        if (isObjCreated) {parent.isCropTab = false; }
+        parent.notify('shape', { prop: 'drawAnnotations', onPropertyChange: false,
+            value: {ctx: this.lowerContext, shape: 'pan', pen: 'pan', x: parent.panPoint.currentPannedPoint.x,
+                y: parent.panPoint.currentPannedPoint.y, panRegion: '' }});
+        if (isObjCreated) {parent.isCropTab = true; }
+        this.lowerContext.filter = temp;
+        parent.notify('draw', { prop: 'clearOuterCanvas', onPropertyChange: false, value: {context: this.lowerContext}});
+        this.upperContext.clearRect(0, 0, parent.upperCanvas.width, parent.upperCanvas.height);
+        parent.activeObj = extend({}, rotatePanActiveObj, {}, true) as SelectionPoint;
+        if (parent.activeObj.activePoint) {
+            parent.notify('draw', { prop: 'drawObject', onPropertyChange: false, value: {canvas: 'duplicate', obj: parent.activeObj, isCropRatio: null,
+                points: null, isPreventDrag: true, saveContext: null, isPreventSelection: null} });
+        }
+        this.isReverseRotate = false;
+    }
+
+    private limitPan(): void {
+        const parent: ImageEditor = this.parent;
+        const { startX, startY, endX, endY } = parent.activeObj.activePoint;
+        const img: ImageDimension = parent.img;
+        if (parent.activeObj.activePoint) {
+            if (img.destLeft > startX) {
+                parent.img.destLeft = startX;
+            }
+            if (img.destTop > startY) {
+                parent.img.destTop = startY;
+            }
+            if (img.destLeft + img.destWidth < endX) {
+                parent.img.destLeft = endX - img.destWidth;
+            }
+            if (img.destTop + img.destHeight < endY) {
+                parent.img.destTop = endY - img.destHeight;
+            }
+        }
+    }
+
+    private pan(value: boolean, x?: number, y?: number): void {
+        const parent: ImageEditor = this.parent;
+        if (!parent.disabled && parent.isImageLoaded) {
+            if (value) {
+                parent.togglePan = true;
+                parent.notify('shape', { prop: 'redrawActObj', onPropertyChange: false,
+                    value: {x: null, y: null, isMouseDown: null}});
+                parent.notify('selection', {prop: 'setDragCanvas', value: {bool: true }});
+                parent.lowerCanvas.style.cursor = parent.upperCanvas.style.cursor = parent.cursor = 'grab';
+                parent.notify('selection', { prop: 'setPanDown', onPropertyChange: false, value: {panDown: null }});
+                if (x || y) {
+                    x = x ? x : 0; y = y ? y : 0;
+                    if (isNullOrUndefined(this.panMove)) {
+                        this.panMove = {x: x, y: y};
+                    }
+                    if (isNullOrUndefined(this.tempPanMove)) {this.tempPanMove = {x: this.panMove.x, y: this.panMove.y}; }
+                    this.panEvent(x, y, true);
+                    this.tempPanMove = null;
+                }
+            } else {
+                parent.togglePan = parent.currObjType.isCustomCrop = false;
+                parent.notify('selection', {prop: 'setDragCanvas', value: {bool: false }});
+                parent.lowerCanvas.style.cursor = parent.upperCanvas.style.cursor = parent.cursor = 'default';
+            }
+        }
+    }
+
+    private zoom(zoomFactor: number, zoomPoint?: Point): void {
+        const parent: ImageEditor = this.parent;
+        if (!parent.disabled && parent.isImageLoaded) {
+            const value: number = this.getCurrentZoomFactor(zoomFactor);
+            if (isNullOrUndefined(zoomPoint)) {
+                this.zoomAction(value, zoomPoint);
+            } else {
+                const type: string = value > 0 ? 'zoomIn' : 'zoomOut';
+                const absValue: number = Math.abs(value) * 10;
+                for (let i: number = 0; i < absValue; i++) {
+                    parent.notify('draw', { prop: 'performPointZoom', onPropertyChange: false,
+                        value: {x: zoomPoint.x, y: zoomPoint.y, type: type, isResize: null }});
+                }
+            }
+            const actionArgs: EditCompleteEventArgs  = { action: value > 0 ? 'zoom-in' : 'zoom-out',
+                actionEventArgs: parent.editCompleteArgs };
+            parent.triggerEditCompleteEvent(actionArgs);
+        }
+    }
+
+    private getCurrentZoomFactor(zoomFactor: number): number {
+        return zoomFactor >= 1 ? (this.prevZoomValue < 1 ? (zoomFactor - this.prevZoomValue) : (zoomFactor - this.prevZoomValue) * 0.1) :
+            (zoomFactor - this.prevZoomValue);
+    }
+
+    private setCurrPanRegion(region: string, type: number | string, obj: Object): void {
+        let panRegion: string = region;
+        if (region === '') {
+            panRegion = type === 'horizontal' ? 'horizontal' : type === 'vertical' ? 'vertical' : region;
+        } else if (region === 'horizontal') {
+            panRegion = type === 'horizontal' ? 'horizontalVertical' : type === 'vertical' ? 'verticalHorizontal' : type === 90 ?
+                'vertical' : type === -90 ? 'horizontal' : region;
+        } else if (region === 'vertical') {
+            panRegion = type === 'horizontal' ? 'horizontalVertical' : type === 'vertical' ? 'verticalHorizontal' : type === 90 ?
+                'horizontal' : type === -90 ? 'vertical' : region;
+        } else {
+            panRegion = type === 'horizontal' ? 'vertical' : type === 'vertical' ? 'horizontal' : region;
+        }
+        obj['panRegion'] = panRegion;
+    }
+
+    private rotate(degree: number, obj: Object): void {
+        const parent: ImageEditor = this.parent;
+        const isRotate: boolean = false;
+        if (!parent.disabled && parent.isImageLoaded && (degree % 90 === 0)) {
+            this.rotateImage(degree);
+        }
+        obj['isRotate'] = isRotate;
+    }
+
+    private flip(direction: Direction): void {
+        const parent: ImageEditor = this.parent;
+        if (!parent.disabled && parent.isImageLoaded) {
+            this.flipImage(direction);
+        }
+    }
+
+    private update(): void {
+        const parent: ImageEditor = this.parent; let toolbarHeight: number = 0;
+        let isActiveObj: boolean = false;  const freehandObj: Object = {bool: false };
+        const straightenObj: Object = {bool: parent.isStraightening }; let cxtTbarHeight: number = 0;
+        const ctToolbar: HTMLElement = parent.element.querySelector('#' + parent.element.id + '_contextualToolbar');
+        const ctWrapper: HTMLElement = parent.element.querySelector('.e-contextual-toolbar-wrapper');
+        const hdWrapper: HTMLElement = parent.element.querySelector('#' + parent.element.id + '_headWrapper');
+        if (parent.isImageLoaded) {
+            let isCropSelection: boolean = false; let splitWords: string[];
+            if (Browser.isDevice) {
+                if (parent.activeObj.shape) {splitWords = parent.activeObj.shape.split('-'); }
+                if (parent.currObjType.isCustomCrop) {isCropSelection = true; }
+                else if (splitWords && splitWords[0] === 'crop'){isCropSelection = true; }
+            }
+            const frameObj: Object = {bool: null };
+            parent.notify('toolbar', { prop: 'getFrameToolbar', onPropertyChange: false, value: {obj: frameObj }});
+            if (!straightenObj['bool'] && ((ctToolbar && !ctToolbar.parentElement.classList.contains('e-hide')) ||
+                (hdWrapper && !hdWrapper.parentElement.classList.contains('e-hide')))) {
+                ctWrapper.classList.add('e-hide');
+                if (!isCropSelection) {parent.okBtn(null, true); }
+                parent.notify('toolbar', { prop: 'refresh-main-toolbar', onPropertyChange: false});
+                parent.notify('toolbar', { prop: 'destroy-qa-toolbar', onPropertyChange: false});
+            }
+            parent.notify('selection', { prop: 'getFreehandDrawEditing', onPropertyChange: false, value: {obj: freehandObj }});
+            if (freehandObj['bool']) {
+                parent.notify('toolbar', { prop: 'destroy-qa-toolbar', onPropertyChange: false});
+            }
+            const actPoint: ActivePoint = extend({}, parent.activeObj.activePoint, {}, true) as ActivePoint;
+            if (parent.activeObj.shape && (actPoint.width !== 0 || actPoint.height !== 0)) {
+                isActiveObj = true;
+                if (parent.textArea.style.display === 'block' || parent.textArea.style.display === 'inline-block') {
+                    parent.notify('shape', { prop: 'redrawActObj', onPropertyChange: false,
+                        value: {x: null, y: null, isMouseDown: null}});
+                    parent.notify('toolbar', { prop: 'destroy-qa-toolbar', onPropertyChange: false});
+                } else {
+                    parent.notify('shape', { prop: 'updImgRatioForActObj', onPropertyChange: false});
+                    parent.objColl.push(parent.activeObj);
+                }
+                parent.notify('shape', { prop: 'refreshActiveObj', onPropertyChange: false});
+            }
+        }
+        parent.updateDropInfoContent(parent.element.querySelector('.e-ie-drop-info'));
+        const tempFilter: string = this.lowerContext.filter;
+        const canvasWrapper: HTMLElement = parent.element.querySelector('#' + parent.element.id + '_canvasWrapper');
+        if (canvasWrapper) {
+            canvasWrapper.style.width = parent.element.offsetWidth - 2 + 'px';
+        }
+        parent.lowerCanvas.width = parent.upperCanvas.width = parent.maskCanvas.width = parent.element.offsetWidth - 2;
+        if (parent.toolbarTemplate) {
+            toolbarHeight = parent.element.querySelector('#' + parent.element.id + '_toolbarArea').clientHeight;
+        } else if (parent.element.querySelector('#' + parent.element.id + '_toolbar')) {
+            toolbarHeight = parent.element.querySelector('#' + parent.element.id + '_toolbar').clientHeight;
+            if (toolbarHeight === 0 && parent.toolbar && parent.toolbar.length > 0 && parent.toolbar.indexOf('Open') === -1) {
+                const obj: Object = {toolbarHeight: 0 };
+                parent.notify('toolbar', { prop: 'getToolbarHeight', value: {obj: obj }});
+                toolbarHeight = obj['toolbarHeight'];
+            }
+        }
+        const ctxTbarArea: HTMLElement = parent.element.querySelector('#' + parent.element.id + '_contextualToolbarArea');
+        if (Browser.isDevice && straightenObj['bool'] && ctxTbarArea) {
+            cxtTbarHeight = ctxTbarArea.clientHeight;
+        }
+        parent.notify('toolbar', { prop: 'setToolbarHeight', value: {height: toolbarHeight }});
+        if (Browser.isDevice) {
+            if (canvasWrapper) {
+                canvasWrapper.style.height = parent.element.offsetHeight - ((2 * toolbarHeight) + cxtTbarHeight) - 4 + 'px';
+            }
+        } else {
+            if (canvasWrapper) {
+                canvasWrapper.style.height = parent.element.offsetHeight - toolbarHeight - 2 + 'px';
+            }
+        }
+        parent.lowerCanvas.height = parent.upperCanvas.height = parseFloat(canvasWrapper.style.height);
+        this.lowerContext.filter =
+            'brightness(' + 1 + ') ' + 'contrast(' + 100 + '%) ' + 'hue-rotate(' + 0 + 'deg) ' +
+            'saturate(' + 100 + '%) ' + 'opacity(' + 1 + ') ' + 'blur(' + 0 + 'px) ' + 'sepia(0%) ' + 'grayscale(0%) ' + 'invert(0%)';
+        parent.notify('filter', { prop: 'setAdjustmentValue', onPropertyChange: false, value: {adjustmentValue: this.lowerContext.filter }});
+        parent.canvasFilter = this.lowerContext.filter; parent.initialAdjustmentValue = this.lowerContext.filter;
+        parent.clearContext(this.lowerContext); parent.clearContext(this.upperContext);
+        if (parent.isImageLoaded) {
+            parent.notify('shape', { prop: 'applyActObj', onPropertyChange: false, value: {isMouseDown: null}});
+            parent.notify('shape', { prop: 'refreshActiveObj', onPropertyChange: false});
+            this.lowerContext.filter = tempFilter; parent.initialAdjustmentValue = tempFilter;
+            parent.canvasFilter = this.lowerContext.filter;
+            if (parent.isImageLoaded) {
+                showSpinner(parent.element);
+                parent.element.style.opacity = '0.5';
+            }
+            this.lowerContext.clearRect(0, 0, parent.lowerCanvas.width, parent.lowerCanvas.height);
+            this.upperContext.clearRect(0, 0, parent.upperCanvas.width, parent.upperCanvas.height);
+            if (canvasWrapper) {
+                canvasWrapper.style.width = parent.element.offsetWidth - 2 + 'px';
+                canvasWrapper.style.height = parent.element.offsetHeight + 'px';
+                const obj: Object = {toolbarHeight: 0 };
+                parent.notify('toolbar', { prop: 'getToolbarHeight', value: {obj: obj }});
+                if (Browser.isDevice) {
+                    canvasWrapper.style.height = (parseFloat(canvasWrapper.style.height) - (2 * obj['toolbarHeight']) - cxtTbarHeight) - 4 + 'px';
+                } else {
+                    canvasWrapper.style.height = (parseFloat(canvasWrapper.style.height) - obj['toolbarHeight']) - 2 + 'px';
+                }
+
+            }
+            parent.lowerCanvas.width = parent.upperCanvas.width = parent.maskCanvas.width =
+                parseFloat(canvasWrapper.style.width);
+            parent.lowerCanvas.height = parent.upperCanvas.height = parent.maskCanvas.height =
+                parseFloat(canvasWrapper.style.height);
+            this.lowerContext.filter = tempFilter;
+            this.lowerContext.imageSmoothingQuality = parent.imageSmoothingEnabled ? 'high' : 'low';
+            const obj: Object = {width: 0, height: 0 };
+            this.calcMaxDimension(parent.img.srcWidth, parent.img.srcHeight, obj);
+            const maxDimension: Dimension = obj as Dimension;
+            if (straightenObj['bool'] && parent.transform.cropZoomFactor !== 0) {
+                maxDimension.width += (maxDimension.width * parent.transform.cropZoomFactor);
+                maxDimension.height += (maxDimension.height * parent.transform.cropZoomFactor);
+            } else if (parent.transform.defaultZoomFactor > 0) {
+                maxDimension.width += (maxDimension.width * parent.transform.defaultZoomFactor);
+                maxDimension.height += (maxDimension.height * parent.transform.defaultZoomFactor);
+            }
+            parent.img.destLeft = (parent.lowerCanvas.clientWidth - maxDimension.width) / 2;
+            parent.img.destTop = (parent.lowerCanvas.clientHeight - maxDimension.height) / 2;
+            if (parent.transform.degree === 0 && parent.transform.currFlipState === '') {
+                if (parent.transform.defaultZoomFactor > 0) {
+                    parent.img.destLeft += parent.panPoint.totalPannedPoint.x;
+                    parent.img.destTop += parent.panPoint.totalPannedPoint.y;
+                }
+                parent.notify('draw', {prop: 'draw-image-to-canvas', value: {dimension: maxDimension } });
+            } else {
+                parent.notify('draw', {prop: 'draw-image-to-canvas', value: {dimension: maxDimension } });
+                parent.notify('draw', { prop: 'updateCurrTransState', onPropertyChange: false,
+                    value: {type: 'initial', isPreventDestination: null, isRotatePan: null} });
+                const temp: string = this.lowerContext.filter;
+                parent.notify('draw', { prop: 'drawImage', onPropertyChange: false});
+                this.lowerContext.filter = temp;
+                parent.notify('draw', { prop: 'updateCurrTransState', onPropertyChange: false,
+                    value: {type: 'reverse', isPreventDestination: null, isRotatePan: null} });
+            }
+            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.isCircleCrop) {
+                parent.notify('crop', { prop: 'cropCircle', onPropertyChange: false,
+                    value: {context: this.lowerContext, isSave: null, isFlip: null}});
+            }
+            hideSpinner(parent.element); parent.element.style.opacity = '1';
+            const obj1: Object = {defToolbarItems : null };
+            parent.notify('toolbar', { prop: 'getDefToolbarItems', value: {obj: obj1 }});
+            if (obj1['defToolbarItems'] && obj1['defToolbarItems'].length > 0 && document.getElementById(parent.element.id + '_toolbar')) {
+                /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
+                const toolbar: any = getComponent(parent.element.id + '_toolbar', 'toolbar') as Toolbar;
+                if (toolbar) {toolbar.refreshOverflow(); }
+                if (ctWrapper && !straightenObj['bool']) {
+                    ctWrapper.classList.add('e-hide');
+                }
+            }
+            parent.notify('shape', { prop: 'refreshActiveObj', onPropertyChange: false});
+            this.upperContext.clearRect(0, 0, parent.upperCanvas.width, parent.upperCanvas.height);
+            if (isActiveObj) {
+                let activeObj: SelectionPoint = extend({}, parent.objColl[parent.objColl.length - 1], null, true) as SelectionPoint;
+                parent.objColl.pop();
+                if (activeObj.activePoint.width !== 0 && activeObj.activePoint.height !== 0) {
+                    this.lowerContext.clearRect(0, 0, parent.lowerCanvas.width, parent.lowerCanvas.height);
+                    parent.notify('draw', {prop: 'render-image', value: {isMouseWheel: null }});
+                    parent.objColl.push(activeObj);
+                    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], null, true) as SelectionPoint;
+                    parent.objColl.pop();
+                    this.lowerContext.clearRect(0, 0, parent.lowerCanvas.width, parent.lowerCanvas.height);
+                    parent.notify('draw', {prop: 'render-image', value: {isMouseWheel: null }});
+                    parent.notify('draw', { prop: 'drawObject', onPropertyChange: false, value: {canvas: 'duplicate', obj: activeObj}});
+                    if (straightenObj['bool']) {
+                        parent.notify('draw', { prop: 'setStraightenActObj', value: {activeObj: activeObj }});
+                    }
+                    if (parent.activeObj.shape === 'rectangle' || parent.activeObj.shape === 'ellipse' || parent.activeObj.shape === 'text' ||
+                        parent.activeObj.shape === 'line' || parent.activeObj.shape === 'arrow' || parent.activeObj.shape === 'path' ||
+                        parent.activeObj.shape === 'image') {
+                        parent.notify('toolbar', { prop: 'renderQAT', onPropertyChange: false, value: {isPenEdit: null} });
+                    }
+                }
+            }
+            if (freehandObj['bool']) {
+                parent.notify('toolbar', { prop: 'renderQAT', onPropertyChange: false, value: {isPenEdit: true} });
+            }
+            if (parent.isResize) {
+                parent.aspectWidth = Math.ceil(parent.img.destWidth); parent.aspectHeight = Math.ceil(parent.img.destHeight);
+                parent.notify('toolbar', { prop: 'refresh-toolbar', onPropertyChange: false, value: {type: 'resize',
+                    isApplyBtn: false, isCropping: false }});
+                parent.notify('toolbar', { prop: 'refresh-toolbar', onPropertyChange: false, value: {type: 'resize',
+                    isApplyBtn: false, isCropping: false }});
+            }
+            if ((parent.transform.degree !== 0 || parent.transform.currFlipState !== '') && parent.transform.defaultZoomFactor > 0) {
+                const totalPannedPoint: Point = extend({}, parent.panPoint.totalPannedPoint, null, true) as Point;
+                const totalPannedInternalPoint: Point = extend({}, parent.panPoint.totalPannedInternalPoint, null, true) as Point;
+                const totalPannedClientPoint: Point = extend({}, parent.panPoint.totalPannedClientPoint, null, true) as Point;
+                this.zoomAction(.1);
+                this.zoomAction(-.1);
+                if (parent.transform.degree === 0) {
+                    parent.img.destLeft += totalPannedPoint.x; parent.img.destTop += totalPannedPoint.y;
+                    parent.panPoint.totalPannedPoint = totalPannedPoint;
+                    parent.notify('draw', {prop: 'updateFlipPan', value: {tempSelectionObj: null}});
+                } else {
+                    parent.panPoint.totalPannedInternalPoint = totalPannedInternalPoint;
+                    parent.panPoint.totalPannedClientPoint = totalPannedClientPoint;
+                    parent.panPoint.currentPannedPoint = {x: 0, y: 0};
+                    parent.isCropTab = true;
+                    this.rotatePan();
+                    parent.isCropTab = false;
+                }
+            } else if (parent.transform.degree !== 0 && parent.transform.cropZoomFactor > 0) {
+                parent.transform.zoomFactor = 0; parent.transform.cropZoomFactor = null;
+                parent.notify('toolbar', { prop: 'enable-disable-btns', onPropertyChange: false});
+            }
+        }
+    }
+
+    private calcMaxDimension(width: number, height: number, obj?: Object, isImgShape?: boolean): Dimension {
+        const object: Object = {toolbarHeight: 0 }; const parent: ImageEditor = this.parent;
+        parent.notify('toolbar', { prop: 'getToolbarHeight', value: {obj: object }});
+        const newWidth: number = parent.imageSettings.width ? parent.imageSettings.width : parent.element.clientWidth;
+        const newHeight: number = parent.imageSettings.height ? parent.imageSettings.height : parent.element.clientHeight - (object['toolbarHeight']);
+        let canvasMaxWidth: number = isImgShape ? parent.element.clientWidth / 3 : newWidth;
+        let canvasMaxHeight: number = isImgShape ? (parent.element.clientHeight - object['toolbarHeight']) / 3 : newHeight;
+        canvasMaxHeight = Browser.isDevice ? canvasMaxHeight - (object['toolbarHeight']) : canvasMaxHeight;
+        if (Browser.isDevice && parent.isStraightening) {
+            const cxtTbar: HTMLElement = parent.element.querySelector('#' + parent.element.id + '_contextualToolbarArea');
+            canvasMaxHeight -= cxtTbar ? cxtTbar.clientHeight : 0;
+        }
+        if (!isImgShape && parent.element.clientHeight === 0) {
+            canvasMaxHeight = 0;
+        }
+        const isImageSettings: boolean = parent.imageSettings.width && parent.imageSettings.height ? true : false;
+        if (isNullOrUndefined(isImgShape) && !(isImageSettings)) {
+            if (canvasMaxWidth > 30) {canvasMaxWidth -= 30; } if (canvasMaxHeight > 30) {canvasMaxHeight -= 30; }
+        }
+        const widthScale: number = canvasMaxWidth / width; const heightScale: number = canvasMaxHeight / height;
+        let cssMaxWidth: number = Math.min(width, canvasMaxWidth); let cssMaxHeight: number = Math.min(height, canvasMaxHeight);
+        if (widthScale < 1 && widthScale < heightScale) {
+            cssMaxWidth = width * widthScale; cssMaxHeight = height * widthScale;
+        }
+        else if (heightScale < 1 && heightScale < widthScale) {cssMaxWidth = width * heightScale; cssMaxHeight = height * heightScale; }
+        if (isNullOrUndefined(isImgShape)) {
+            const cropObj: Object = {bool: null };
+            parent.notify('crop', { prop: 'getPreventScaling', onPropertyChange: false,
+                value: {obj: cropObj }});
+            if (cropObj['bool'] && parent.cropObj.activeObj.activePoint &&
+                parent.cropObj.activeObj.activePoint.width !== 0 && parent.cropObj.activeObj.activePoint.height !== 0) {
+                cssMaxWidth =  parent.cropObj.activeObj.activePoint.width;
+                cssMaxHeight = parent.cropObj.activeObj.activePoint.height;
+            }
+        }
+        if (obj) {obj['width'] = cssMaxWidth; obj['height'] = cssMaxHeight; }
+        return {width: cssMaxWidth, height: cssMaxHeight};
+    }
+
+    private updatePanPoints(x?: number, y?: number): Point {
+        const parent: ImageEditor = this.parent;
+        const tempActObj: SelectionPoint = extend({}, parent.activeObj, {}, true) as SelectionPoint;
+        const tempDestLeft: number = parent.img.destLeft; const tempDestTop: number = parent.img.destTop;
+        if (isNullOrUndefined(this.tempPanMove)) {this.tempPanMove = {x: this.panMove.x, y: this.panMove.y}; }
+        let xDiff: number = this.panMove.x - this.tempPanMove.x; let yDiff: number = this.panMove.y - this.tempPanMove.y;
+        if (x || y) {xDiff = x; yDiff = y; }
+        parent.img.destLeft += xDiff; parent.img.destTop += yDiff;
+        this.limitPan();
+        const obj: Object = {bool: null };
+        const object: Object = {isIntersect: null };
+        parent.notify('draw', { prop: 'updateImgCanvasPoints', onPropertyChange: false });
+        parent.notify('draw', { prop: 'isLinesIntersect', onPropertyChange: false, value: {obj: object }});
+        parent.notify('draw', { prop: 'isSelOutsideImg', onPropertyChange: false, value: {obj: obj }});
+        let count: number = 0;
+        while (parent.transform.straighten !== 0 && (object['isIntersect'] || obj['bool'])) {
+            count++;
+            parent.img.destLeft = tempDestLeft; parent.img.destTop = tempDestTop;
+            if (xDiff !== 0 && xDiff > 0) {xDiff -= 1; } else if (xDiff !== 0 && xDiff < 0) {xDiff += 1; }
+            if (yDiff !== 0 && yDiff > 0) {yDiff -= 1; } else if (yDiff !== 0 && yDiff < 0) {yDiff += 1; }
+            if ((xDiff === 0 && yDiff === 0) || count === 200) {
+                break;
+            }
+            parent.img.destLeft += xDiff; parent.img.destTop += yDiff;
+            this.limitPan();
+            parent.notify('draw', { prop: 'updateImgCanvasPoints', onPropertyChange: false });
+            parent.notify('draw', { prop: 'isLinesIntersect', onPropertyChange: false, value: { obj: object } });
+            parent.notify('draw', { prop: 'isSelOutsideImg', onPropertyChange: false, value: { obj: obj } });
+        }
+        parent.activeObj = tempActObj;
+        return {x: parent.img.destLeft - tempDestLeft, y: parent.img.destTop - tempDestTop};
+    }
+
+    private resizeImage(width?: number, height?: number): void {
+        const parent: ImageEditor = this.parent; let temp: boolean = true; let temp1: boolean = true;
+        parent.allowDownScale = false;
+        parent.img.srcLeft = 0; parent.img.srcTop = 0; parent.isAspectRatio = true; const minimum: number[] = [];
+        parent.img.srcWidth = parent.baseImgCanvas.width; parent.img.srcHeight = parent.baseImgCanvas.height;
+        if (parent.resizeSrc && parent.resizeSrc.width !== 0 && parent.resizeSrc.height !== 0) {
+            parent.img.srcLeft = parent.resizeSrc.startX; parent.img.srcTop = parent.resizeSrc.startY;
+            parent.img.srcWidth = parent.resizeSrc.width; parent.img.srcHeight = parent.resizeSrc.height;
+        }
+        while ((width < parent.img.destWidth || height < parent.img.destHeight) && temp1) {
+            this.zoomAction(-.1, null, true, true);
+            if (width > parent.img.destWidth || height > parent.img.destHeight) {
+                while (width > parent.img.destWidth || height > parent.img.destHeight) {
+                    this.zoomAction(0.0125, null, true, true);
+                    temp1 = false;
+                    minimum.push(parent.img.destWidth);
+                }
+            }
+        }
+        while ((width > parent.img.destWidth || height > parent.img.destHeight) && temp1 && temp) {
+            this.zoomAction(.1, null, true, true);
+            if (width < parent.img.destWidth || height < parent.img.destHeight) {
+                while (width < parent.img.destWidth) {
+                    this.zoomAction(-.0125, null, true, true);
+                    temp = false;
+                    minimum.push(parent.img.destWidth);
+                }
+            }
+        }
+        let nearestNumber: number = minimum[0]; let smallestDifference: number = Math.abs(parent.img.destWidth - nearestNumber);
+        for (const num of minimum) {
+            const difference: number = Math.abs(width - num);
+            if (difference < smallestDifference) {
+                nearestNumber = num; smallestDifference = difference;
+            }
+        }
+        if (nearestNumber < width && temp) {
+            this.zoomAction(-.0125, null, true, true); temp = false;
+        }
+        if (nearestNumber > width && !temp) {
+            this.zoomAction(.0125, null, true, true); temp = false;
+        }
+        this.zoomAction(.0125, null, true); parent.allowDownScale = true; this.zoomAction(-.0125, null, true);
+        const prevCropObj: CurrentObject = extend({}, parent.cropObj, {}, true) as CurrentObject;
+        const prevObj: CurrentObject = extend({}, this.prevResizeCurrObj, {}, true) as CurrentObject;
+        parent.notify('undo-redo', { prop: 'updateUndoRedoColl', onPropertyChange: false, value: { operation: 'resize',
+            previousObj: prevObj, previousObjColl: prevObj.objColl, previousPointColl: prevObj.pointColl,
+            previousSelPointColl: prevObj.selPointColl, previousCropObj: prevCropObj, previousText: null, currentText: null,
+            previousFilter: null, isCircleCrop: parent.isCircleCrop }});
+        parent.notify('undo-redo', { prop: 'updateCurrUrc', value: { type: 'ok' } });
+    }
+
+    private resizeCrop(width?: number, height?: number): void {
+        const parent: ImageEditor = this.parent; let temp: boolean = true;
+        const obj1: object = {prevObj: parent.prevObj};
+        parent.cropObj = extend({}, parent.prevCropObj, {}, true) as CurrentObject;
+        parent.allowDownScale = false;
+        parent.notify('toolbar', { prop: 'getPrevObj', onPropertyChange: false, value: { obj: obj1 } });
+        const activeObj: SelectionPoint = extend({}, obj1['prevObj']['activeObj'], {}, true) as SelectionPoint;
+        obj1['prevObj']['activeObj'] = extend({}, parent.activeObj, {}, true) as SelectionPoint;
+        parent.notify('draw', { prop: 'setCurrentObj', onPropertyChange: false, value: { obj: obj1['prevObj'] }});
+        parent.objColl = extend([], obj1['prevObj']['objColl'], [], true) as SelectionPoint[];
+        parent.pointColl = extend([], obj1['prevObj']['pointColl'], [], true) as Point[];
+        parent.transform.straighten = 0;
+        parent.notify('shape', { prop: 'drawAnnotations', onPropertyChange: false,
+            value: {ctx: this.lowerContext, shape: 'zoom', pen: 'zoom', isPreventApply: null }});
+        if (parent.transform.straighten === 0 && !this.isPreventSelect) {
+            parent.notify('freehand-draw', { prop: 'updateFHDColl', onPropertyChange: false});
+        }
+        const tempwidth: number = width; const tempheight: number = height; let tempZoom: boolean = false;
+        if (height >= width && height <= Math.ceil(parent.img.destHeight)) {
+            while ((height <= Math.ceil(parent.img.destHeight)) && temp) {
+                this.zoomAction(-.1, null, true, true);
+                if (width > parent.img.destWidth || height > parent.img.destHeight) {
+                    while (width > parent.img.destWidth || height > parent.img.destHeight) {
+                        this.zoomAction(.0125, null, true, true); temp = false;
+                    }
+                }
+            }
+        } else if (height <= width  && width < parent.img.destWidth) {
+            while ((width < parent.img.destWidth) && temp) {
+                this.zoomAction(-.1, null, true, true);
+                if (width > parent.img.destWidth || height > parent.img.destHeight) {
+                    while (width > parent.img.destWidth || height > parent.img.destHeight) {
+                        this.zoomAction(.0125, null, true, true); temp = false;
+                    }
+                }
+            }
+        } else if (height >= width && height >= parent.img.destHeight) {
+            while ((height >= parent.img.destHeight) && temp) {
+                this.zoomAction(.1, null, true, true);
+            }
+        } else if (width >= height && width >= parent.img.destWidth) {
+            while ((width >= parent.img.destWidth) && temp) {
+                this.zoomAction(.1, null, true, true);
+            }
+            if (width < parent.img.destWidth && height < parent.img.destHeight) {
+                while (width < parent.img.destWidth && height < parent.img.destHeight) {
+                    this.zoomAction(-.0125, null, true, true);
+                    temp = false;
+                }
+                this.zoomAction(.0125, null, true, true);
+            }
+        } else if (height > parent.img.destHeight && width > parent.img.destWidth ) {
+            while ((height > parent.img.destHeight) && (width > parent.img.destWidth) && temp) {
+                this.zoomAction(.1, null, true, true);
+            }
+            if (width < parent.img.destWidth && height < parent.img.destHeight) {
+                while (width < parent.img.destWidth && height < parent.img.destHeight) {
+                    this.zoomAction(-.0125, null, true, true);
+                    temp = false;
+                }
+                this.zoomAction(.0125, null, true, true);
+            }
+        }
+        if (parent.isPublicMethod && parent.aspectWidth === width && parent.aspectHeight === height) {
+            return;
+        }
+        this.resizeImg(activeObj, width, height); width = tempwidth; height = tempheight;
+        if ((height !== parent.img.destHeight || width !== parent.img.destWidth)) {
+            while ((height > parent.img.destHeight || width > parent.img.destWidth)) {
+                this.zoomAction(.0125, null, true, true); tempZoom = true;
+            }
+            if (tempZoom) {
+                this.zoomAction(-.0125, null, true, true); tempZoom = false;
+            }
+        }
+        if ((height !== parent.img.destHeight || width !== parent.img.destWidth)) {
+            while ((height < parent.img.destHeight || width < parent.img.destWidth)) {
+                this.zoomAction(-.0125, null, true, true); tempZoom = true;
+            }
+            if (tempZoom) {
+                this.zoomAction(-.0125, null, true, true); tempZoom = false;
+            }
+        }
+        obj1['prevObj']['activeObj'] = extend({}, activeObj, {}, true) as SelectionPoint;
+        this.zoomAction(.0125, null, true);
+        parent.allowDownScale = this.preventDownScale ? false : true; parent.isCropTab = false;
+        this.zoomAction(-.0125, null, true);
+        parent.aspectWidth = width; parent.aspectHeight = height;
+    }
+
+    private resizeImg(activeObj: SelectionPoint, width: number, height: number): void {
+        const parent: ImageEditor = this.parent; const widthRatio: number = width / parent.img.destWidth;
+        const heightRatio: number = height / parent.img.destHeight;
+        if (activeObj.shape) {
+            parent.currSelectionPoint = activeObj;
+            parent.notify('crop', { prop: 'setInitCrop', onPropertyChange: false, value: {bool: true}});
+        } else if (parent.img.srcWidth === parent.baseImgCanvas.width && parent.img.srcHeight === parent.baseImgCanvas.height) {
+            parent.currSelectionPoint = null;
+            parent.notify('draw', { prop: 'select', onPropertyChange: false,
+                value: {type: 'custom', startX: null, startY: null, width: null, height: null }});
+        }
+        if (isNullOrUndefined(parent.currSelectionPoint)) {
+            /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
+            if (!parent.shapeColl.some((item: any) => item.rotatedAngle && item.rotatedAngle !== 0)) {
+                parent.notify('draw', { prop: 'select', onPropertyChange: false,
+                    value: {type: 'custom', startX: parent.img.destLeft, startY: parent.img.destTop,
+                        width: parent.img.destWidth, height: parent.img.destHeight }});
+            }
+        } else {
+            parent.notify('draw', { prop: 'select', onPropertyChange: false,
+                value: {type: 'custom', startX: null, startY: null, width: null, height: null}});
+        }
+        width = parent.activeObj.activePoint.width * widthRatio;
+        height = parent.activeObj.activePoint.height * heightRatio;
+        let sx: number = (parent.activeObj.activePoint.startX + (parent.activeObj.activePoint.width / 2)) - (width / 2);
+        let sy: number = (parent.activeObj.activePoint.startY + (parent.activeObj.activePoint.height / 2)) - (height / 2);
+        let count: number = 0;
+        while (Browser.isDevice && count < 500 && (sx < 0 || sy < 0 || (sx + width) > parent.img.destWidth
+            || (sy + height) > parent.img.destHeight)) {
+            count++;
+            width -= 1; height -= 1;
+            sx = (parent.activeObj.activePoint.startX + (parent.activeObj.activePoint.width / 2)) - (width / 2);
+            sy = (parent.activeObj.activePoint.startY + (parent.activeObj.activePoint.height / 2)) - (height / 2);
+        }
+        parent.transform.defaultZoomFactor = 0;
+        parent.notify('draw', {prop: 'setResizeSelect', value: {bool: true }});
+        parent.notify('draw', {prop: 'setIsCropSelect', value: {bool: true }});
+        parent.notify('draw', { prop: 'select', onPropertyChange: false,
+            value: {type: 'custom', startX: sx, startY: sy, width: width, height: height}});
+        parent.notify('draw', {prop: 'setResizeSelect', value: {bool: false }});
+        if (parent.transform.straighten !== 0) {
+            const obj: Object = {isIntersect: null, arr: null };
+            parent.notify('draw', { prop: 'updateImgCanvasPoints', onPropertyChange: false });
+            parent.notify('draw', { prop: 'isLinesIntersect', onPropertyChange: false, value: {obj: obj }});
+            while (obj['arr'][0] || obj['arr'][1] || obj['arr'][2] || obj['arr'][3]) {
+                this.zoomAction(.0125, null, true);
+                parent.notify('draw', { prop: 'updateImgCanvasPoints', onPropertyChange: false });
+                parent.notify('draw', { prop: 'isLinesIntersect', onPropertyChange: false, value: {obj: obj }});
+            }
+        }
+        parent.isCropToolbar = true;
+        parent.crop();
+        parent.isCropToolbar = false;
+    }
+
+    private updateResize(): void {
+        const parent: ImageEditor = this.parent;
+        parent.prevCropObj = extend({}, parent.cropObj, {}, true) as CurrentObject;
+        const currObject: Object = {currObj: {} as CurrentObject };
+        parent.notify('filter', { prop: 'getCurrentObj', onPropertyChange: false, value: {object: currObject }});
+        parent.prevObj = currObject['currObj'];
+        if (parent.currSelectionPoint && parent.prevCropObj.activeObj.shape) {
+            parent.prevObj.activeObj = extend({}, parent.prevCropObj.activeObj, {}, true) as SelectionPoint;
+        }
+        parent.prevObj.objColl = extend([], parent.objColl, [], true) as SelectionPoint[];
+        parent.prevObj.pointColl = extend([], parent.pointColl, [], true) as Point[];
+        parent.prevObj.afterCropActions = extend([], parent.afterCropActions, [], true) as string[];
+        const selPointCollObj: Object = {selPointColl: null };
+        parent.notify('freehand-draw', { prop: 'getSelPointColl', onPropertyChange: false,
+            value: {obj: selPointCollObj }});
+        parent.prevObj.selPointColl = extend([], selPointCollObj['selPointColl'], [], true) as Point[];
+        parent.resizeSrc = {startX: parent.img.srcLeft, startY: parent.img.srcTop, width: parent.img.srcWidth,
+            height: parent.img.srcHeight };
+    }
+
+    private resize(width: number, height: number, isAspectRatio?: boolean): void {
+        const parent: ImageEditor = this.parent;
+        let aspectHeight: string;
+        parent.isResize = true;
+        if (isNullOrUndefined(parent.prevCropObj) && isNullOrUndefined(parent.prevObj)) {
+            parent.notify('transform', { prop: 'updateResize', value: {bool: false }});
+        }
+        const aspectIcon: HTMLInputElement = (parent.element.querySelector('#' + parent.element.id + '_aspectratio') as HTMLInputElement);
+        const nonAspectIcon: HTMLInputElement = (parent.element.querySelector('#' + parent.element.id + '_nonaspectratio') as HTMLInputElement);
+        if (aspectIcon && nonAspectIcon) {
+            parent.notify('toolbar', { prop: 'initResizeToolbar'});
+            if (Browser.isDevice) {
+                parent.notify('toolbar', { prop: 'init-main-toolbar', value: {isApplyBtn: false, isDevice: true, isOkBtn: true, isResize: true}});
+            }
+        }
+        const aspectRatioHeight: HTMLInputElement = parent.element.querySelector('#' + parent.element.id + '_resizeHeight');
+        if (aspectRatioHeight) {
+            aspectHeight = aspectRatioHeight.value === '' ? aspectRatioHeight.placeholder : aspectRatioHeight.value;
+        } else {
+            aspectHeight = height + 'px';
+        }
+        const resizeEventArgs: ResizeEventArgs = {cancel: false, previousWidth: Math.ceil(parent.img.destWidth),
+            previousHeight: Math.ceil(parent.img.destHeight), width: Math.ceil(width), height: height && height !== 0 ? Math.ceil(height) :
+                (isAspectRatio ? Math.ceil(parseFloat(aspectHeight)) : Math.ceil(parent.img.destHeight)),
+            isAspectRatio: isAspectRatio ? isAspectRatio : false };
+        parent.trigger('resizing', resizeEventArgs);
+        parent.editCompleteArgs = resizeEventArgs;
+        if (!resizeEventArgs.cancel) {
+            this.resizeEventHandler(resizeEventArgs);
+        } else if (parent.aspectHeight && parent.aspectWidth) {
+            parent.aspectHeight = resizeEventArgs.previousHeight; parent.aspectWidth = resizeEventArgs.previousWidth;
+        }
+    }
+
+    private resizeEventHandler(args: ResizeEventArgs): void {
+        const parent: ImageEditor = this.parent; let isRotate: boolean;
+        const aspectRatioWidth: HTMLInputElement = parent.element.querySelector('#' + parent.element.id + '_resizeWidth');
+        const aspectRatioHeight: HTMLInputElement = parent.element.querySelector('#' + parent.element.id + '_resizeHeight');
+        if (args.isAspectRatio) {
+            if (this.resizedImgAngle == null || this.resizedImgAngle !== parent.transform.degree) {
+                this.resizedImgAngle = parent.transform.degree;
+                isRotate = true;
+            }
+            if (isRotate) {
+                parent.notify('transform', { prop: 'resizeImage', value: { width: args.width, height: 0 } });
+                const originalWidth: number = parent.img.destWidth;
+                const originalHeight: number = parent.img.destHeight;
+                let aspectRatioWidthValue: number;
+                if (aspectRatioHeight) {
+                    aspectRatioWidthValue = parseFloat(aspectRatioWidth.value === '' ? aspectRatioWidth.placeholder : aspectRatioWidth.value);
+                    let value: number = aspectRatioWidthValue / (originalWidth / originalHeight);
+                    // eslint-disable-next-line max-len
+                    const height: number = value % 1 >= 0.5 || value % 1 <= -0.5 ? Math.round(value) : (value < 0) ? Math.ceil(value) : Math.floor(value);
+                    (getComponent(aspectRatioHeight, 'numerictextbox') as NumericTextBox).value = height;
+                    (aspectRatioHeight as HTMLInputElement).value = height.toString() + ' px';
+                    parent.aspectHeight = height;
+                    if (aspectRatioWidth && (aspectRatioWidth as HTMLInputElement).value === '') {
+                        const aspectRatioHeightValue: number = parseFloat(aspectRatioHeight.value === '' ? aspectRatioHeight.placeholder :
+                            aspectRatioHeight.value);
+                        value = aspectRatioHeightValue / (originalHeight / originalWidth);
+                        // eslint-disable-next-line max-len
+                        const width: number = value % 1 >= 0.5 || value % 1 <= -0.5 ? Math.round(value) : (value < 0) ? Math.ceil(value) : Math.floor(value);
+                        (getComponent(aspectRatioWidth, 'numerictextbox') as NumericTextBox).value = width;
+                        (aspectRatioWidth as HTMLInputElement).value = width.toString() + ' px';
+                        parent.aspectWidth = width;
+                    }
+                }
+            } else {
+                parent.notify('transform', { prop: 'resizeImage', value: { width: args.width, height: null } });
+            }
+        } else {
+            if (this.resizedImgAngle !== null && this.resizedImgAngle !== parent.transform.degree) {
+                this.resizedImgAngle = parent.transform.degree;
+                isRotate = true;
+            }
+            if (isRotate) {
+                parent.notify('transform', { prop: 'setPreventDownScale', value: { bool: true } });
+                parent.notify('transform', { prop: 'resizeCrop', value: { width: args.width, height: args.height } });
+                parent.notify('undo-redo', { prop: 'setPreventUR', value: { bool: true } });
+                parent.okBtn(null, true);
+                parent.notify('undo-redo', { prop: 'setPreventUR', value: { bool: false } });
+                parent.resizeSrc = { startX: parent.img.srcLeft, startY: parent.img.srcTop, width: parent.img.srcWidth,
+                    height: parent.img.srcHeight };
+                parent.notify('toolbar', { prop: 'refresh-toolbar', onPropertyChange: false, value: {type: 'resize',
+                    isApplyBtn: null, isCropping: null, isZooming: null, cType: null}});
+                parent.notify('transform', { prop: 'setPreventDownScale', value: { bool: false } });
+                parent.notify('toolbar', { prop: 'refresh-toolbar', onPropertyChange: false, value: {type: 'resize',
+                    isApplyBtn: null, isCropping: null, isZooming: null, cType: null}});
+            } else {
+                parent.notify('transform', { prop: 'resizeCrop', value: { width: args.width, height: args.height } });
+            }
+        }
+        this.resizedImgAngle = parent.transform.degree;
+    }
+
+    private straightenImage(degree: number): void {
+        const parent: ImageEditor = this.parent;
+        const isSelection: boolean = parent.activeObj.shape && parent.activeObj.shape.indexOf('crop-') > -1;
+        if (parent.toolbar && parent.toolbar.length === 0) {
+            parent.notify('draw', { prop: 'select', onPropertyChange: false,
+                value: { type: 'custom', startX: null, startY: null, width: null, height: null } });
+        }
+        parent.notify('toolbar', { prop: 'performCropTransformClick', value: {shape: null }});
+        parent.setStraighten(degree);
+        if (!isSelection) {
+            parent.okBtn();
+        }
+    }
+}