@syncfusion/ej2-image-editor 31.1.17 → 31.1.21

package/dist/ts/image-editor/action/undo-redo.ts

@@ -1,1169 +0,0 @@
-import { isNullOrUndefined, extend } from '@syncfusion/ej2-base';
-import { EditCompleteEventArgs , Adjustment, CurrentObject, FrameValue, ImageEditor, Point, SelectionPoint, Transition, ZoomSettings } from '../index';
-import { Dimension } from '@syncfusion/ej2-inputs';
-
-export class UndoRedo {
-    private parent: ImageEditor;
-    private lowerContext: CanvasRenderingContext2D;
-    private upperContext: CanvasRenderingContext2D;
-    private tempCurrSelPoint: SelectionPoint;
-    private undoRedoStep: number = 0;
-    private undoRedoColl: Transition[] = [];
-    private appliedUndoRedoColl: Transition[] = [];
-    private tempUndoRedoColl: Transition[] = [];
-    private tempUndoRedoStep: number = 0;
-    private tempActObj: SelectionPoint; // For text editing undo redo
-    private isPreventing: boolean = false;
-    private preventEditComplete: boolean = false;
-    private preventApplyEditComplete: boolean = false;
-
-    constructor(parent: ImageEditor) {
-        this.parent = parent;
-        this.addEventListener();
-    }
-
-    public destroy(): void {
-        if (this.parent.isDestroyed) { return; }
-        this.removeEventListener();
-    }
-
-    private addEventListener(): void {
-        this.parent.on('undo-redo', this.undoRedo, this);
-        this.parent.on('destroyed', this.destroy, this);
-    }
-
-    private removeEventListener(): void {
-        this.parent.off('undo-redo', this.undoRedo);
-        this.parent.off('destroyed', this.destroy);
-    }
-
-    private initializeUrPvtProp(): void {
-        if (this.parent.lowerCanvas) {this.lowerContext = this.parent.lowerCanvas.getContext('2d'); }
-        if (this.parent.upperCanvas) {this.upperContext = this.parent.upperCanvas.getContext('2d'); }
-    }
-
-    private undoRedo(args?: { onPropertyChange?: boolean, prop: string, value?: object }): void {
-        this.initializeUrPvtProp();
-        switch (args.prop) {
-        case 'updateUndoRedoColl':
-            this.updateUrc(args.value['operation'], args.value['previousObj'],
-                           args.value['previousObjColl'], args.value['previousPointColl'], args.value['previousSelPointColl'],
-                           args.value['previousCropObj'], args.value['previousText'], args.value['currentText'],
-                           args.value['previousFilter'], args.value['isCircleCrop']);
-            break;
-        case 'refreshUrc':
-            this.refreshUrc(args.value['bool']);
-            break;
-        case 'updateCurrUrc':
-            this.updateCurrUrc(args.value['type'], args.value['isCancel']);
-            break;
-        case 'call-undo':
-            this.callUndo();
-            break;
-        case 'call-redo':
-            this.callRedo();
-            break;
-        case 'undo':
-            this.undo();
-            break;
-        case 'redo':
-            this.redo();
-            break;
-        case 'updateUrObj':
-            this.updateUrObj(args.value['objColl'], args.value['operation']);
-            break;
-        case 'updateUndoRedo':
-            this.updateUndoRedo(args.value ? args.value['operation'] : null);
-            break;
-        case 'getAppliedUndoRedoColl':
-            args.value['obj']['appliedUndoRedoColl'] = this.appliedUndoRedoColl;
-            break;
-        case 'getUndoRedoStep':
-            args.value['obj']['undoRedoStep'] = this.undoRedoStep;
-            break;
-        case 'setUndoRedoStep':
-            this.undoRedoStep = args.value['step'];
-            break;
-        case 'undoDefault':
-            this.undoDefault(args.value['obj']);
-            break;
-        case 'setPreventUR':
-            this.isPreventing = args.value['bool'];
-            break;
-        case 'updateUndoRedoStack':
-            if (args.value && args.value['isPenDraw']) {
-                this.updateUndoRedoStack(args.value['isPenDraw']);
-            } else {
-                this.updateUndoRedoStack();
-            }
-            break;
-        case 'preventEditComplete':
-            args.value['obj']['bool'] = this.preventEditComplete;
-            break;
-        case 'preventApplyEditComplete':
-            this.preventApplyEditComplete = args.value['bool'];
-            break;
-        case 'reset':
-            this.reset();
-            break;
-        }
-    }
-
-    public getModuleName(): string {
-        return 'undo-redo';
-    }
-
-    private reset(): void {
-        this.tempCurrSelPoint = null; this.undoRedoStep = 0;
-        this.undoRedoColl = []; this.appliedUndoRedoColl = []; this.tempActObj = null;
-        this.tempUndoRedoColl = []; this.tempUndoRedoStep = 0; this.isPreventing = false;
-        this.preventEditComplete = this.preventApplyEditComplete = false;
-    }
-
-    private refreshUrc(refreshToolbar?: boolean): void {
-        const parent: ImageEditor = this.parent;
-        if (parent.isImageUpdated) {return; }
-        refreshToolbar = refreshToolbar ? refreshToolbar : false;
-        if (refreshToolbar) {
-            parent.notify('toolbar', { prop: 'setEnableDisableUndoRedo', value: {isPrevent: true} });
-            this.tempUndoRedoColl = extend([], this.appliedUndoRedoColl, [], true) as Transition[];
-            this.tempUndoRedoStep = this.undoRedoStep;
-        }
-        parent.notify('toolbar', { prop: 'setEnableDisableUndoRedo', value: {isPrevent: false} });
-        this.undoRedoColl = this.undoRedoColl.slice(0, this.undoRedoStep);
-        this.appliedUndoRedoColl = this.appliedUndoRedoColl.slice(0, this.undoRedoStep);
-        parent.isUndoRedo = parent.currObjType.isUndoAction = false;
-        parent.notify('toolbar', { prop: 'enable-disable-btns' });
-    }
-
-    private updateCurrUrc(type: string, isCancel?: boolean): void {
-        const parent: ImageEditor = this.parent;
-        if (parent.isResize || this.isPreventing || parent.noPushUndo) {return; }
-        parent.notify('toolbar', { prop: 'setEnableDisableUndoRedo', value: {isPrevent: false} });
-        if (type === 'ok') {
-            parent.notify('draw', { prop: 'setShapeTextInsert', onPropertyChange: false, value: {bool: false } });
-            const collection: Transition[] = this.tempUndoRedoColl.length > 0 ?
-                extend([], this.tempUndoRedoColl, [], true) as Transition[] :
-                extend([], this.undoRedoColl, [], true) as Transition[];
-            const prevObj: Transition = this.undoRedoColl[this.undoRedoColl.length - 1];
-            const appliedURColl: Transition = this.appliedUndoRedoColl[this.appliedUndoRedoColl.length - 1];
-            const prevTransform: CurrentObject = prevObj ? extend({}, prevObj.previousObj, {}, true) as CurrentObject
-                : null;
-            if (isNullOrUndefined(appliedURColl)) {
-                if (this.undoRedoColl[0]) {
-                    prevObj.previousCropObj = collection[0].previousCropObj;
-                    prevObj.previousObj = collection[0].previousObj;
-                    prevObj.previousObjColl = collection[0].previousObjColl;
-                    prevObj.previousPointColl = collection[0].previousPointColl;
-                    prevObj.previousText = collection[0].previousText;
-                }
-            } else if (prevObj.operation !== 'imageHFlip' && prevObj.operation !== 'imageVFlip') {
-                prevObj.previousCropObj = appliedURColl.currentCropObj;
-                prevObj.previousObj = appliedURColl.currentObj;
-                prevObj.previousObjColl = appliedURColl.currentObjColl;
-                prevObj.previousPointColl = appliedURColl.currentPointColl;
-                prevObj.previousText = appliedURColl.currentText;
-                if (prevObj.operation === 'frame' && prevObj.previousObj && prevTransform) {
-                    prevObj.previousObj.defaultZoom = prevTransform.defaultZoom;
-                    prevObj.previousObj.zoomFactor = prevTransform.zoomFactor;
-                    prevObj.previousObj.cropZoom = prevTransform.cropZoom;
-                }
-            }
-            if (prevObj) {
-                if (prevObj.operation !== 'imageHFlip' && prevObj.operation !== 'imageVFlip') {
-                    const obj: Object = this.getZeroZoomObjPointValue(prevObj.currentObjColl, prevObj.currentPointColl);
-                    prevObj.currentObjColl = obj['obj'];
-                    prevObj.currentPointColl = obj['point'];
-                    const adjObj: Object = {adjustmentLevel: null  };
-                    parent.notify('filter', { prop: 'getAdjustmentLevel', onPropertyChange: false, value: {obj: adjObj }});
-                    prevObj.currentObj.adjustmentLevel = extend({}, adjObj['adjustmentLevel'], {}, true) as Adjustment;
-                    parent.notify('filter', { prop: 'setTempAdjVal' });
-                    prevObj.currentObj.currentFilter = parent.currentFilter;
-                }
-                this.appliedUndoRedoColl.push(prevObj);
-                if (!isCancel) {
-                    this.triggerActionCompletedEvent(prevObj.operation);
-                }
-            }
-            this.tempUndoRedoColl = []; this.tempUndoRedoStep = 0;
-        } else if (this.tempUndoRedoColl.length > 0) {
-            this.appliedUndoRedoColl = extend([], this.tempUndoRedoColl, [], true) as Transition[];
-            this.undoRedoStep = this.tempUndoRedoStep;
-            this.tempUndoRedoColl = []; this.tempUndoRedoStep = 0;
-        }
-        let lastObj: Transition = this.appliedUndoRedoColl[this.appliedUndoRedoColl.length - 1];
-        let lastPrevObj: Transition = this.appliedUndoRedoColl[this.appliedUndoRedoColl.length - 2];
-        if (this.appliedUndoRedoColl.length > 16) {
-            this.appliedUndoRedoColl.splice(0, 1);
-        } else if (!isCancel && lastObj && lastPrevObj) {
-            if ((((lastObj.operation === 'shapeTransform' && lastPrevObj.operation === 'shapeTransform') ||
-                    (lastObj.operation === 'shapeInsert' && lastPrevObj.operation === 'shapeInsert')) &&
-                    JSON.stringify(lastObj.currentObjColl) === JSON.stringify(lastPrevObj.currentObjColl)) ||
-                (lastObj.operation === 'freehand-draw' && lastPrevObj.operation === 'freehand-draw' &&
-                    JSON.stringify(lastObj.currentPointColl) === JSON.stringify(lastPrevObj.currentPointColl)) ||
-                (lastObj.operation === 'freehanddrawCustomized' && lastPrevObj.operation === 'freehanddrawCustomized' &&
-                    JSON.stringify(lastObj.currentPointColl) === JSON.stringify(lastPrevObj.currentPointColl))) {
-                this.appliedUndoRedoColl.splice(this.appliedUndoRedoColl.length - 1, 1);
-            } else if (this.undoRedoStep !== this.appliedUndoRedoColl.length - 1) {
-                lastObj = this.appliedUndoRedoColl[this.appliedUndoRedoColl.length - 1];
-                lastPrevObj = this.appliedUndoRedoColl[this.undoRedoStep];
-                if (lastObj && lastPrevObj && lastObj.operation === 'shapeTransform' &&
-                    lastPrevObj.operation === 'shapeTransform' &&
-                    JSON.stringify(lastObj.currentObjColl) === JSON.stringify(lastPrevObj.previousObjColl)) {
-                    this.appliedUndoRedoColl.splice(this.appliedUndoRedoColl.length - 1, 1);
-                    this.undoRedoColl = [];
-                    this.undoRedoColl = extend([], this.appliedUndoRedoColl, [], true) as Transition[];
-                    return;
-                }
-            }
-        }
-        this.undoRedoColl = [];
-        this.undoRedoColl = extend([], this.appliedUndoRedoColl, [], true) as Transition[];
-        if (type === 'ok') {
-            this.undoRedoStep = this.undoRedoColl.length;
-            parent.notify('toolbar', { prop: 'enable-disable-btns' });
-        }
-        if (parent.transform.zoomFactor > 0) {
-            parent.togglePan = true;
-            parent.notify('selection', {prop: 'setDragCanvas', value: {bool: true }});
-        }
-    }
-
-    private triggerActionCompletedEvent(action: string): void {
-        const parent: ImageEditor = this.parent;
-        /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
-        const actionMap: any = {'brightness': 'fine-tune', 'contrast': 'fine-tune', 'hue': 'fine-tune',
-            'saturation': 'fine-tune', 'opacity': 'fine-tune', 'blur': 'fine-tune', 'exposure': 'fine-tune',
-            'default': 'filter', 'chrome': 'filter', 'cold': 'filter', 'warm': 'filter',
-            'grayscale': 'filter', 'sepia': 'filter', 'invert': 'filter',
-            'deleteObj': 'shape-delete', 'deleteFreehandDrawing': 'freehand-draw-delete',
-            'shapeInsert': 'shape-insert', 'shapeTransform': 'shape-customize',
-            'freehanddrawCustomized': 'freehand-draw-customize'
-        };
-        const actionResult: string = actionMap[action as string] || action;
-        const actionArgs: EditCompleteEventArgs  = { action: actionResult, actionEventArgs: parent.editCompleteArgs };
-        parent.triggerEditCompleteEvent(actionArgs);
-    }
-
-    private getUndoRedoAction(action: string): string {
-        /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
-        const actionMap: any = {'brightness': 'fine-tune', 'contrast': 'fine-tune', 'hue': 'fine-tune',
-            'saturation': 'fine-tune', 'opacity': 'fine-tune', 'blur': 'fine-tune', 'exposure': 'fine-tune',
-            'default': 'filter', 'chrome': 'filter', 'cold': 'filter', 'warm': 'filter',
-            'grayscale': 'filter', 'sepia': 'filter', 'invert': 'filter',
-            'deleteObj': 'shape-delete', 'deleteFreehandDrawing': 'freehand-drawing-delete',
-            'shapeInsert': 'shape-insert', 'shapeTransform': 'shape-customize', 'imageRotate': 'shape-customize',
-            'freehanddraw': 'freehand-draw', 'freehanddrawCustomized': 'freehand-draw-customize',
-            'textAreaCustomization': 'text-area-customization', 'imageHFlip': 'shape-customize',
-            'imageVFlip': 'shape-customize', 'bgColor': 'background-color', 'updateImage': 'image-update'
-        };
-        return actionMap[action as string] || action;
-    }
-
-    private cancelCropSelection(): void {
-        const parent: ImageEditor = this.parent;
-        let isCropSelection: boolean = false;
-        let splitWords: string[];
-        if (parent.activeObj.shape) {splitWords = parent.activeObj.shape.split('-'); }
-        if (parent.currObjType.isCustomCrop || (splitWords && splitWords[0] === 'crop')) {
-            isCropSelection = true;
-        }
-        if (isCropSelection) {
-            parent.notify('draw', {prop: 'performCancel', value: {isContextualToolbar: null }});
-        }
-        if (this.tempUndoRedoColl.length !== 0 || this.tempUndoRedoStep !== 0) {
-            this.appliedUndoRedoColl = extend([], this.tempUndoRedoColl, [], true) as Transition[];
-            this.undoRedoColl = extend([], this.tempUndoRedoColl, [], true) as Transition[];
-            this.undoRedoStep = this.tempUndoRedoStep;
-            this.tempUndoRedoColl = []; this.tempUndoRedoStep = 0;
-            parent.notify('toolbar', { prop: 'setEnableDisableUndoRedo', value: {isPrevent: false} });
-        }
-    }
-
-    private refreshToolbarActions(): void {
-        const parent: ImageEditor = this.parent;
-        if (parent.activeObj.shape) {
-            parent.notify('toolbar', { prop: 'refresh-toolbar', onPropertyChange: false, value: {type: 'shapes',
-                isApplyBtn: null, isCropping: null, isZooming: null, cType: null}});
-            parent.notify('toolbar', { prop: 'update-toolbar-items', onPropertyChange: false});
-        } else {
-            parent.notify('toolbar', { prop: 'refresh-main-toolbar', onPropertyChange: false});
-        }
-    }
-
-    private applyCurrentChanges(): void {
-        const parent: ImageEditor = this.parent;
-        parent.currObjType.isFiltered = false;
-        if (parent.transform.zoomFactor === 0) {
-            parent.togglePan = false;
-            parent.notify('selection', {prop: 'setDragCanvas', value: {bool: false }});
-        }
-        if (parent.element.querySelector('.e-contextual-toolbar-wrapper')) {
-            parent.element.querySelector('.e-contextual-toolbar-wrapper').classList.add('e-hide');
-        }
-        if (parent.togglePen) {
-            parent.togglePen = false;
-            parent.upperCanvas.style.cursor = parent.cursor = 'default';
-            this.upperContext.clearRect(0, 0, parent.upperCanvas.width, parent.upperCanvas.height);
-        }
-        if (this.appliedUndoRedoColl.length > 0) {
-            this.undoRedoColl = extend([], this.appliedUndoRedoColl, [], true) as Transition[];
-        }
-    }
-
-    private callUndo(): void {
-        this.applyCurrentChanges();
-        this.undo();
-    }
-
-    private callRedo(): void {
-        this.applyCurrentChanges();
-        this.redo();
-    }
-
-    private undo(): void {
-        const parent: ImageEditor = this.parent;
-        this.cancelCropSelection();
-        parent.notify('draw', { prop: 'resetFrameZoom', onPropertyChange: false, value: {isOk: false }});
-        if (!parent.disabled && parent.isImageLoaded) {
-            if (this.undoRedoStep > 0) {
-                this.refreshToolbarActions();
-                if (parent.activeObj.activePoint && parent.activeObj.activePoint.width !== 0) {
-                    this.tempActObj = parent.activeObj;
-                }
-                parent.notify('shape', { prop: 'refreshActiveObj', onPropertyChange: false});
-                this.undoRedoStep--;
-                parent.notify('toolbar', {prop: 'enable-disable-btns'});
-                if (parent.element.querySelector('.e-contextual-toolbar-wrapper')) {
-                    parent.element.querySelector('.e-contextual-toolbar-wrapper').classList.add('e-hide');
-                }
-                parent.isUndoRedo = true;
-                const obj: Transition = this.undoRedoColl[this.undoRedoStep];
-                if (this.undoRedoColl.length === this.undoRedoStep) { parent.currObjType.isUndoAction = false; }
-                else { parent.currObjType.isUndoAction = true; }
-                if (obj.operation !== 'textAreaCustomization' &&
-                    (parent.textArea.style.display === 'block' || parent.textArea.style.display === 'inline-block')) {
-                    parent.textArea.style.display = 'none';
-                }
-                parent.notify('draw', { prop: 'setCancelAction', onPropertyChange: false, value: {bool: true }});
-                let activeObj: SelectionPoint;
-                parent.cropObj = extend({}, obj.previousCropObj, {}, true) as CurrentObject;
-                parent.afterCropActions = obj.previousObj.afterCropActions;
-                this.lowerContext.filter = obj.previousObj.filter;
-                parent.notify('filter', { prop: 'setAdjustmentLevel', onPropertyChange: false, value: { adjustmentLevel: obj.previousObj.adjustmentLevel }});
-                parent.notify('filter', { prop: 'setTempAdjVal' });
-                parent.currentFilter = obj.previousObj.currentFilter;
-                parent.notify('filter', { prop: 'setTempFilVal' });
-                parent.canvasFilter = this.lowerContext.filter;
-                parent.initialAdjustmentValue = this.lowerContext.filter;
-                parent.notify('filter', { prop: 'setBevelFilter', onPropertyChange: false, value: { bevelFilter: this.lowerContext.filter }});
-                const editCompleteArgs: object = {action: this.getUndoRedoAction(obj.operation) };
-                switch (obj.operation) {
-                case 'shapeTransform':
-                case 'brightness':
-                case 'contrast':
-                case 'hue':
-                case 'saturation':
-                case 'opacity':
-                case 'blur':
-                case 'exposure':
-                case 'default':
-                case 'chrome':
-                case 'cold':
-                case 'warm':
-                case 'grayscale':
-                case 'blackandwhite':
-                case 'sepia':
-                case 'invert':
-                case 'sharpen':
-                case 'imageRotate':
-                case 'shapeInsert':
-                    this.shapeTransform(obj.previousObjColl, obj.previousPointColl);
-                    break;
-                case 'freehanddraw':
-                case 'freehand-draw':
-                    this.updateFreehandDraw(obj.previousPointColl, obj.previousSelPointColl);
-                    parent.notify('freehand-draw', {prop: 'setCurrentFreehandDrawIndex',
-                        value: {value: parent.pointColl.length}});
-                    break;
-                case 'freehanddrawCustomized':
-                    this.updateFreehandDrawCustomized(obj.previousObjColl, obj.previousPointColl);
-                    break;
-                case 'deleteFreehandDrawing':
-                case 'deleteObj':
-                    this.updateDelete(obj.operation, obj.previousObjColl, obj.previousPointColl, obj.previousSelPointColl);
-                    break;
-                case 'textAreaCustomization':
-                    this.shapeTransform(obj.previousObjColl, obj.previousPointColl);
-                    this.updateTextAreaCustomization(activeObj, obj.previousObjColl);
-                    break;
-                case 'text':
-                    this.updateText(obj.previousObjColl, true);
-                    break;
-                case 'frame':
-                    parent.transform.zoomFactor = parent.transform.defaultZoomFactor = obj.previousObj.defaultZoom;
-                    parent.setProperties({zoomSettings: { zoomFactor: obj.previousObj.zoomFactor}}, true);
-                    parent.notify('transform', { prop: 'setPreviousZoomValue', onPropertyChange: false,
-                        value: { previousZoomValue: parent.zoomSettings.zoomFactor } });
-                    extend(parent.frameObj, obj.previousObj.frameObj);
-                    parent.notify('draw', {prop: 'render-image', value: {isMouseWheel: true, isPreventClearRect: null, isFrame: true } });
-                    break;
-                case 'imageHFlip':
-                    this.imageFlip('horizontal', obj.previousObjColl);
-                    break;
-                case 'imageVFlip':
-                    this.imageFlip('vertical', obj.previousObjColl);
-                    break;
-                case 'bgColor':
-                    parent.notify('draw', { prop: 'imageBackgroundColor', onPropertyChange: false, value: {color: obj.previousObj.bgColor }});
-                    parent.notify('draw', { prop: 'render-image', value: { isMouseWheel: false } });
-                    break;
-                case 'updateImage':
-                    parent.isImageUpdated = true;
-                    parent.baseImg.src = obj.previousObj.imageSource;
-                    setTimeout(() => {
-                        if (parent.cropObj.straighten !== 0) {
-                            parent.notify('toolbar', { prop: 'performCropTransformClick', value: { shape: 'crop-' + 'custom' } });
-                            parent.noPushUndo = true;
-                            parent.crop();
-                            parent.noPushUndo = false;
-                        } else {
-                            parent.notify('draw', { prop: 'render-image', value: { isMouseWheel: false } });
-                        }
-                        parent.isImageUpdated = false;
-                    });
-                    break;
-                default:
-                    this.undoDefault(obj, true);
-                    parent.notify('filter', { prop: 'set-adjustment', value: {operation: obj.operation}});
-                    parent.notify('filter', { prop: 'update-filter', value: {operation: obj.operation, filter: obj.filter}});
-                    break;
-                }
-                if (obj.operation === 'crop') {
-                    if (obj.previousObj.currSelectionPoint) {
-                        parent.currSelectionPoint = extend({}, obj.previousObj.currSelectionPoint, {}, true) as SelectionPoint;
-                        if (parent.currSelectionPoint && isNullOrUndefined(parent.currSelectionPoint.shape)) {
-                            parent.currSelectionPoint = null;
-                        }
-                    }
-                    parent.updateCropTransformItems();
-                    parent.notify('draw', { prop: 'select', onPropertyChange: false,
-                        value: {type: 'custom', startX: null, startY: null, width: null, height: null}});
-                    if (parent.isCircleCrop) {
-                        parent.isCircleCrop = false;
-                        this.tempCurrSelPoint = extend({}, parent.currSelectionPoint, {}, true) as SelectionPoint;
-                        parent.currSelectionPoint = null;
-                    }
-                    const tempCircleCrop: boolean = parent.cancelCropSelection.isCircleCrop;
-                    parent.cancelCropSelection.isCircleCrop = false;
-                    parent.notify('draw', {prop: 'performCancel', value: {isContextualToolbar: null, isUndoRedo: true }});
-                    parent.cancelCropSelection.isCircleCrop = tempCircleCrop;
-                    parent.currObjType.isActiveObj = false;
-                    if (parent.transform.straighten !== 0) {
-                        parent.notify('draw', { prop: 'setStraightenActObj', value: {activeObj: null }});
-                    }
-                } else if (obj.operation === 'resize' && parent.cropObj && parent.cropObj.activeObj) {
-                    parent.currSelectionPoint = extend({}, parent.cropObj.activeObj, {}, true) as SelectionPoint;
-                }
-                if ((this.undoRedoColl[this.undoRedoStep - 1]
-                    && this.undoRedoColl[this.undoRedoStep - 1].isCircleCrop)) {
-                    parent.isCircleCrop = true;
-                    parent.notify('crop', { prop: 'cropCircle', onPropertyChange: false,
-                        value: {context: this.lowerContext, isSave: null, isFlip: null}});
-                }
-                this.endUndoRedo(obj.operation, true);
-                const action: EditCompleteEventArgs  = { action: 'undo', actionEventArgs: editCompleteArgs };
-                parent.triggerEditCompleteEvent(action);
-            }
-        }
-    }
-
-    private redo(): void {
-        const parent: ImageEditor = this.parent;
-        this.cancelCropSelection();
-        parent.notify('draw', { prop: 'resetFrameZoom', onPropertyChange: false, value: {isOk: false }});
-        if (!parent.disabled && parent.isImageLoaded) {
-            if (this.undoRedoStep < this.appliedUndoRedoColl.length) {
-                this.refreshToolbarActions();
-                this.undoRedoStep++;
-                parent.notify('toolbar', {prop: 'enable-disable-btns'});
-                parent.isUndoRedo = true;
-                const obj: Transition = this.undoRedoColl[this.undoRedoStep - 1];
-                if (this.undoRedoColl.length === this.undoRedoStep) { parent.currObjType.isUndoAction = false; }
-                else { parent.currObjType.isUndoAction = true; }
-                if (obj.operation !== 'textAreaCustomization' &&
-                    (parent.textArea.style.display === 'block' || parent.textArea.style.display === 'inline-block')) {
-                    parent.textArea.style.display = 'none';
-                }
-                parent.notify('draw', { prop: 'setCancelAction', onPropertyChange: false, value: {bool: true }});
-                parent.cropObj = extend({}, obj.currentCropObj, {}, true) as CurrentObject;
-                parent.afterCropActions = obj.currentObj.afterCropActions;
-                this.lowerContext.filter = obj.currentObj.filter;
-                if (parent.element.querySelector('.e-contextual-toolbar-wrapper')) {
-                    parent.element.querySelector('.e-contextual-toolbar-wrapper').classList.add('e-hide');
-                }
-                parent.notify('filter', { prop: 'setAdjustmentLevel', onPropertyChange: false, value: { adjustmentLevel: obj.currentObj.adjustmentLevel }});
-                parent.notify('filter', { prop: 'setTempAdjVal' });
-                parent.currentFilter = obj.currentObj.currentFilter;
-                parent.notify('filter', { prop: 'setTempFilVal' });
-                parent.canvasFilter = this.lowerContext.filter;
-                parent.initialAdjustmentValue = this.lowerContext.filter;
-                parent.notify('filter', { prop: 'setBevelFilter', onPropertyChange: false, value: { bevelFilter: this.lowerContext.filter }});
-                let activeObj: SelectionPoint;
-                const editCompleteArgs: object = {action: this.getUndoRedoAction(obj.operation) };
-                switch (obj.operation) {
-                case 'shapeTransform':
-                case 'brightness':
-                case 'contrast':
-                case 'hue':
-                case 'saturation':
-                case 'opacity':
-                case 'blur':
-                case 'exposure':
-                case 'default':
-                case 'chrome':
-                case 'cold':
-                case 'warm':
-                case 'grayscale':
-                case 'blackandwhite':
-                case 'sepia':
-                case 'invert':
-                case 'sharpen':
-                case 'imageRotate':
-                case 'shapeInsert':
-                    this.shapeTransform(obj.currentObjColl, obj.currentPointColl);
-                    break;
-                case 'freehanddraw':
-                case 'freehand-draw':
-                    this.updateFreehandDraw(obj.currentPointColl, obj.currentSelPointColl);
-                    parent.notify('freehand-draw', {prop: 'setCurrentFreehandDrawIndex',
-                        value: {value: parent.pointColl.length}});
-                    break;
-                case 'freehanddrawCustomized':
-                    this.updateFreehandDrawCustomized(obj.currentObjColl, obj.currentPointColl);
-                    break;
-                case 'deleteFreehandDrawing':
-                case 'deleteObj':
-                    this.updateDelete(obj.operation, obj.currentObjColl, obj.currentPointColl, obj.currentSelPointColl);
-                    break;
-                case 'textAreaCustomization':
-                    this.shapeTransform(obj.currentObjColl, obj.currentPointColl);
-                    this.updateTextAreaCustomization(activeObj, obj.currentObjColl);
-                    break;
-                case 'text':
-                    this.updateText(obj.currentObjColl, false);
-                    break;
-                case 'frame':
-                    extend(parent.frameObj, obj.currentObj.frameObj);
-                    parent.notify('draw', {prop: 'render-image', value: {isMouseWheel: true, isPreventClearRect: null, isFrame: true } });
-                    break;
-                case 'imageHFlip':
-                    this.imageFlip('horizontal', obj.currentObjColl);
-                    break;
-                case 'imageVFlip':
-                    this.imageFlip('vertical', obj.currentObjColl);
-                    break;
-                case 'bgColor':
-                    parent.notify('draw', { prop: 'imageBackgroundColor', onPropertyChange: false, value: {color: obj.currentObj.bgColor }});
-                    parent.notify('draw', { prop: 'render-image', value: { isMouseWheel: false } });
-                    break;
-                case 'updateImage':
-                    parent.isImageUpdated = true;
-                    parent.baseImg.src = obj.currentObj.imageSource;
-                    setTimeout(() => {
-                        if (parent.cropObj.straighten !== 0) {
-                            parent.notify('toolbar', { prop: 'performCropTransformClick', value: { shape: 'crop-' + 'custom' } });
-                            parent.noPushUndo = true;
-                            parent.crop();
-                            parent.noPushUndo = false;
-                        } else {
-                            parent.notify('draw', { prop: 'render-image', value: { isMouseWheel: false } });
-                        }
-                        parent.isImageUpdated = false;
-                    });
-                    break;
-                default:
-                    parent.objColl = []; parent.pointColl = []; parent.freehandCounter = 0;
-                    parent.notify('freehand-draw', { prop: 'setSelPointColl', onPropertyChange: false,
-                        value: {obj: {selPointColl: [] }}});
-                    parent.notify('draw', { prop: 'setCurrentObj', onPropertyChange: false, value: {obj: obj.currentObj, isUndoRedo: true }});
-                    parent.img.destLeft = obj.currentObj.destPoints.startX;
-                    parent.img.destTop = obj.currentObj.destPoints.startY;
-                    activeObj = extend({}, parent.activeObj, {}, true) as SelectionPoint;
-                    parent.objColl = extend([], obj.currentObjColl, [], true) as SelectionPoint[];
-                    parent.pointColl = extend([], obj.currentPointColl, [], true) as Point[];
-                    parent.freehandCounter = parent.pointColl.length;
-                    parent.notify('freehand-draw', { prop: 'setSelPointColl', onPropertyChange: false,
-                        value: {obj: {selPointColl: extend([], obj.currentSelPointColl, [], true) as Point[] } }});
-                    parent.transform.straighten = 0;
-                    this.lowerContext.filter = 'none';
-                    parent.notify('shape', { prop: 'drawAnnotations', onPropertyChange: false,
-                        value: {ctx: this.lowerContext, shape: 'zoom', pen: 'zoom', isPreventApply: null }});
-                    this.lowerContext.filter = obj.currentObj.filter;
-                    parent.prevStraightenedDegree = parent.transform.straighten;
-                    parent.activeObj = activeObj;
-                    this.upperContext.clearRect(0, 0, parent.upperCanvas.width, parent.upperCanvas.height);
-                    if (parent.activeObj.activePoint.width !== 0 && parent.activeObj.activePoint.height !== 0) {
-                        parent.notify('draw', { prop: 'drawObject', onPropertyChange: false, value: {canvas: 'duplicate'}});
-                    }
-                    parent.notify('filter', { prop: 'set-adjustment', value: {operation: obj.operation}});
-                    parent.notify('filter', { prop: 'update-filter', value: {operation: obj.operation }});
-                    break;
-                }
-                if (obj.operation === 'crop' && obj.isCircleCrop) {
-                    parent.isCircleCrop = true;
-                    parent.currSelectionPoint = extend({}, this.tempCurrSelPoint, {}, true) as SelectionPoint;
-                    this.tempCurrSelPoint = null;
-                }
-                if (obj.operation === 'crop' && !obj.isCircleCrop) {
-                    parent.isCircleCrop = false;
-                }
-                if (obj.operation === 'crop' && obj.currentObj.currSelectionPoint) {
-                    parent.currSelectionPoint = extend({}, obj.currentObj.currSelectionPoint, {}, true) as SelectionPoint;
-                    parent.notify('draw', { prop: 'setStraightenActObj', value: {activeObj: parent.currSelectionPoint }});
-                }
-                if (parent.currSelectionPoint && isNullOrUndefined(parent.currSelectionPoint.shape)) {
-                    parent.currSelectionPoint = null;
-                }
-                if (obj.operation === 'resize' && parent.cropObj && parent.cropObj.activeObj) {
-                    parent.currSelectionPoint = extend({}, parent.cropObj.activeObj, {}, true) as SelectionPoint;
-                }
-                this.endUndoRedo(obj.operation, false);
-                const action: EditCompleteEventArgs  = { action: 'redo', actionEventArgs: editCompleteArgs };
-                parent.triggerEditCompleteEvent(action);
-            }
-        }
-    }
-
-    private imageFlip(type: string, objColl: SelectionPoint[]): void {
-        const parent: ImageEditor = this.parent;
-        this.shapeTransform(objColl, null);
-        parent.activeObj = extend({}, parent.objColl[parent.objColl.length - 1], {}, true) as SelectionPoint;
-        const { shape, isHorImageFlip, isVerImageFlip } = parent.activeObj;
-        parent.objColl.pop();
-        if (shape && shape === 'image') {
-            if (type === 'horizontal') {
-                if (isNullOrUndefined(isHorImageFlip) && isVerImageFlip) {
-                    parent.activeObj.isHorImageFlip = true; parent.activeObj.isVerImageFlip = null;
-                    parent.horizontalFlip(this.upperContext, true);
-                } else {
-                    if (isNullOrUndefined(isHorImageFlip) || !isHorImageFlip) {
-                        parent.activeObj.isHorImageFlip = true;
-                    } else {
-                        parent.activeObj.isHorImageFlip = null;
-                    }
-                    parent.horizontalFlip(this.upperContext, true);
-                }
-            } else if (type === 'vertical') {
-                if (isNullOrUndefined(isVerImageFlip) && isHorImageFlip) {
-                    parent.activeObj.isVerImageFlip = true; parent.activeObj.isHorImageFlip = null;
-                    parent.verticalFlip(this.upperContext, true);
-                } else {
-                    if (isNullOrUndefined(isVerImageFlip) || !isVerImageFlip) {
-                        parent.activeObj.isVerImageFlip = true;
-                    } else {
-                        parent.activeObj.isVerImageFlip = null;
-                    }
-                    parent.verticalFlip(this.upperContext, true);
-                }
-            }
-            parent.notify('shape', { prop: 'applyActObj', onPropertyChange: false, value: {isMouseDown: true }});
-        } else {
-            parent.notify('draw', { prop: 'render-image', value: { isMouseWheel: true } });
-        }
-    }
-
-    private shapeTransform(objColl: SelectionPoint[], pointColl: Point[]): void {
-        const parent: ImageEditor = this.parent;
-        parent.objColl = extend([], objColl, [], true) as SelectionPoint[];
-        if (pointColl) {
-            parent.pointColl = extend([], pointColl, [], true) as Point[];
-            parent.freehandCounter = parent.pointColl.length;
-        }
-        parent.notify('shape', { prop: 'drawAnnotations', onPropertyChange: false,
-            value: {ctx: this.lowerContext, shape: 'zoom', pen: 'zoom', isPreventApply: null }});
-        this.lowerContext.clearRect(0, 0, parent.lowerCanvas.width, parent.lowerCanvas.height);
-        this.upperContext.clearRect(0, 0, parent.upperCanvas.width, parent.upperCanvas.height);
-        parent.isUndoRedo = true; parent.notify('draw', { prop: 'redrawImgWithObj', onPropertyChange: false});
-        parent.notify('shape', { prop: 'refreshActiveObj', onPropertyChange: false});
-    }
-
-    private updateFreehandDraw(pointColl: Point[], selPointColl: Point[]): void {
-        const parent: ImageEditor = this.parent;
-        parent.pointColl = pointColl;
-        parent.notify('freehand-draw', { prop: 'setSelPointColl', onPropertyChange: false,
-            value: {obj: {selPointColl: selPointColl }}});
-        parent.freehandCounter = parent.pointColl.length;
-        parent.notify('shape', { prop: 'drawAnnotations', onPropertyChange: false,
-            value: {ctx: this.lowerContext, shape: 'zoom', pen: 'zoom', isPreventApply: null }});
-        this.lowerContext.clearRect(0, 0, parent.lowerCanvas.width, parent.lowerCanvas.height);
-        this.upperContext.clearRect(0, 0, parent.upperCanvas.width, parent.upperCanvas.height);
-        parent.isUndoRedo = true; parent.notify('draw', { prop: 'redrawImgWithObj', onPropertyChange: false});
-    }
-
-    private updateFreehandDrawCustomized(objColl: SelectionPoint[], pointColl: Point[]): void {
-        const parent: ImageEditor = this.parent;
-        parent.objColl = extend([], objColl, [], true) as SelectionPoint[];
-        parent.pointColl = pointColl;
-        parent.notify('shape', { prop: 'drawAnnotations', onPropertyChange: false,
-            value: {ctx: this.lowerContext, shape: 'zoom', pen: 'zoom', isPreventApply: null }});
-        this.lowerContext.clearRect(0, 0, parent.lowerCanvas.width, parent.lowerCanvas.height);
-        this.upperContext.clearRect(0, 0, parent.upperCanvas.width, parent.upperCanvas.height);
-        parent.isUndoRedo = true; parent.notify('draw', { prop: 'redrawImgWithObj', onPropertyChange: false});
-    }
-
-    private updateDelete(operation: string, objColl: SelectionPoint[], pointColl: Point[], selPointColl: Point[]): void {
-        const parent: ImageEditor = this.parent;
-        if (operation === 'deleteFreehandDrawing') {
-            parent.pointColl = pointColl;
-            parent.freehandCounter = parent.pointColl.length;
-            parent.notify('freehand-draw', { prop: 'setSelPointColl', onPropertyChange: false,
-                value: {obj: {selPointColl: selPointColl } }});
-            parent.notify('shape', { prop: 'drawAnnotations', onPropertyChange: false,
-                value: {ctx: this.lowerContext, shape: 'zoom', pen: 'zoom', isPreventApply: null }});
-        } else if (operation === 'deleteObj') {
-            parent.objColl = objColl as SelectionPoint[];
-            parent.notify('shape', { prop: 'drawAnnotations', onPropertyChange: false,
-                value: {ctx: this.lowerContext, shape: 'zoom', pen: 'zoom', isPreventApply: null }});
-        }
-        this.lowerContext.clearRect(0, 0, parent.lowerCanvas.width, parent.lowerCanvas.height);
-        this.upperContext.clearRect(0, 0, parent.upperCanvas.width, parent.upperCanvas.height);
-        parent.isUndoRedo = true; parent.notify('draw', { prop: 'redrawImgWithObj', onPropertyChange: false});
-    }
-
-    private updateTextAreaCustomization(activeObj: SelectionPoint, objColl: SelectionPoint[]): void {
-        const parent: ImageEditor = this.parent;
-        parent.objColl = extend([], objColl, [], true) as SelectionPoint[];
-        parent.notify('shape', { prop: 'drawAnnotations', onPropertyChange: false,
-            value: {ctx: this.lowerContext, shape: 'zoom', pen: 'zoom', isPreventApply: null }});
-        this.lowerContext.clearRect(0, 0, parent.lowerCanvas.width, parent.lowerCanvas.height);
-        parent.isUndoRedo = true; parent.notify('draw', { prop: 'redrawImgWithObj', onPropertyChange: false});
-        for (let i: number = 0, len: number = (objColl as SelectionPoint[]).length; i < len; i++) {
-            if (this.tempActObj) {
-                if (this.tempActObj.currIndex === (objColl as SelectionPoint[])[i as number].currIndex) {
-                    activeObj = extend({}, objColl[i as number], {}, true) as SelectionPoint;
-                    parent.objColl.splice(i, 1);
-                    break;
-                }
-            } else {
-                activeObj = extend({}, objColl[objColl.length - 1], {}, true) as SelectionPoint;
-                parent.objColl.splice(i, 1);
-                break;
-            }
-        }
-        if (activeObj) { this.updateTextBox(activeObj); }
-        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}});
-        }
-    }
-
-    private updateText(objColl: SelectionPoint[], allowActiveObj: boolean): void {
-        const parent: ImageEditor = this.parent;
-        if (this.tempActObj) {
-            parent.activeObj = extend({}, this.tempActObj, {}, true) as SelectionPoint;
-        }
-        if (objColl.length === 0 && parent.objColl.length === 1) {
-            this.tempActObj = extend({}, parent.objColl[0], {}, true) as SelectionPoint;
-        } else {
-            for (let i: number = 0, iLen: number = parent.objColl.length; i < iLen; i++) {
-                if (parent.objColl[i as number] && isNullOrUndefined(objColl[i as number])) {
-                    this.tempActObj = extend({}, parent.objColl[i as number], {}, true) as SelectionPoint;
-                    break;
-                }
-                if (objColl[i as number].currIndex !== parent.objColl[i as number].currIndex) {
-                    this.tempActObj = extend({}, parent.objColl[i as number], {}, true) as SelectionPoint;
-                    break;
-                }
-            }
-        }
-        if (allowActiveObj) {parent.activeObj = extend({}, this.tempActObj, {}, true) as SelectionPoint; }
-        parent.objColl = extend([], objColl, [], true) as SelectionPoint[];
-        parent.notify('shape', { prop: 'drawAnnotations', onPropertyChange: false,
-            value: {ctx: this.lowerContext, shape: 'zoom', pen: 'zoom', isPreventApply: true }});
-        this.upperContext.clearRect(0, 0, parent.upperCanvas.width, parent.upperCanvas.height);
-        this.lowerContext.clearRect(0, 0, parent.lowerCanvas.width, parent.lowerCanvas.height);
-        parent.isUndoRedo = true; parent.notify('draw', { prop: 'redrawImgWithObj', onPropertyChange: false});
-        parent.notify('shape', { prop: 'refreshActiveObj', onPropertyChange: false});
-    }
-
-    private updateTextBox(obj: SelectionPoint): void {
-        const parent: ImageEditor = this.parent;
-        this.upperContext.clearRect(0, 0, parent.lowerCanvas.width, parent.lowerCanvas.height);
-        this.lowerContext.clearRect(0, 0, parent.lowerCanvas.width, parent.lowerCanvas.height);
-        parent.notify('draw', { prop: 'redrawImgWithObj', onPropertyChange: false});
-        parent.notify('toolbar', { prop: 'destroy-qa-toolbar', onPropertyChange: false});
-        const textArea: HTMLInputElement = parent.textArea;
-        textArea.style.display = 'block';
-        textArea.style.fontFamily = obj.textSettings.fontFamily;
-        textArea.style.fontSize = obj.textSettings.fontSize + 'px';
-        textArea.style.color = obj.strokeSettings.strokeColor;
-        textArea.style.fontWeight = obj.textSettings.bold ? 'bold' : 'normal';
-        textArea.style.fontStyle = obj.textSettings.italic ? 'italic' : 'normal';
-        textArea.style.textDecoration = (obj.textSettings.underline && obj.textSettings.strikethrough) ? 'underline line-through' :
-            (obj.textSettings.underline) ? 'underline' :
-                (obj.textSettings.strikethrough) ? 'line-through' :
-                    'none';
-        textArea.style.border = '2px solid ' + parent.themeColl[parent.theme]['primaryColor'];
-        textArea.value = obj.keyHistory;
-        parent.activeObj = extend({}, obj, {}, true) as SelectionPoint;
-        parent.notify('shape', { prop: 'updateFontStyles', onPropertyChange: false,
-            value: { isTextBox: null}});
-        parent.textArea.style.width = parent.activeObj.activePoint.width + 'px';
-    }
-
-    private undoDefault(obj: Transition, isUndoRedo?: boolean): void {
-        this.lowerContext.filter = obj.previousObj.filter;
-        const parent: ImageEditor = this.parent;
-        parent.objColl = []; parent.pointColl = []; parent.freehandCounter = 0;
-        parent.notify('freehand-draw', { prop: 'setSelPointColl', onPropertyChange: false,
-            value: {obj: {selPointColl: [] } }});
-        const isCircleCrop: boolean = !isUndoRedo ? obj.isCircleCrop : false;
-        parent.notify('draw', { prop: 'setCurrentObj', onPropertyChange: false, value: {obj: obj.previousObj, isUndoRedo: isUndoRedo, isCircleCrop: isCircleCrop }});
-        parent.prevStraightenedDegree = parent.transform.straighten;
-        this.upperContext.clearRect(0, 0, parent.upperCanvas.width, parent.upperCanvas.height);
-        parent.notify('shape', { prop: 'refreshActiveObj', onPropertyChange: false});
-        parent.img.destLeft = obj.previousObj.destPoints.startX;
-        parent.img.destTop = obj.previousObj.destPoints.startY;
-        const activeObj: SelectionPoint = extend({}, parent.activeObj, {}, true) as SelectionPoint;
-        parent.objColl = extend([], obj.previousObjColl, [], true) as SelectionPoint[];
-        parent.pointColl = extend([], obj.previousPointColl, [], true) as Point[];
-        parent.freehandCounter = parent.pointColl.length;
-        parent.notify('freehand-draw', { prop: 'setSelPointColl', onPropertyChange: false,
-            value: {obj: {selPointColl: extend([], obj.previousSelPointColl, [], true) as Point[] } }});
-        parent.transform.straighten = 0;
-        this.lowerContext.filter = 'none';
-        parent.notify('shape', { prop: 'drawAnnotations', onPropertyChange: false,
-            value: {ctx: this.lowerContext, shape: 'zoom', pen: 'zoom', isPreventApply: null }});
-        this.lowerContext.filter = obj.previousObj.filter;
-        parent.activeObj = activeObj;
-        this.upperContext.clearRect(0, 0, parent.upperCanvas.width, parent.upperCanvas.height);
-        if (parent.activeObj.activePoint.width !== 0 && parent.activeObj.activePoint.height !== 0) {
-            parent.notify('draw', { prop: 'drawObject', onPropertyChange: false, value: {canvas: 'duplicate'}});
-        }
-    }
-
-    private endUndoRedo(operation: string, isUndo: boolean): void {
-        const parent: ImageEditor = this.parent;
-        const frameObj: FrameValue = {type: 'none', color: '#fff', size: 20, inset: 20, offset: 20, radius: 0, amount: 1, border: 'solid', gradientColor: '' };
-        if (((parent.currSelectionPoint && parent.currSelectionPoint.shape === 'crop-circle') || parent.isCircleCrop) &&
-            JSON.stringify(parent.frameObj) !== JSON.stringify(frameObj)) {
-            parent.notify('draw', {prop: 'render-image', value: {isMouseWheel: true } });
-        }
-        parent.notify('draw', { prop: 'clearOuterCanvas', onPropertyChange: false, value: {context: this.lowerContext}});
-        if (parent.isCircleCrop && ((isUndo && operation !== 'crop') || !isUndo)) {
-            parent.notify('crop', { prop: 'cropCircle', onPropertyChange: false,
-                value: {context: this.lowerContext, isSave: null, isFlip: null}});
-        }
-        if (parent.transform.zoomFactor > 0) {
-            parent.notify('selection', {prop: 'setDragCanvas', value: {bool: true }});
-        }
-        parent.notify('draw', { prop: 'setCancelAction', onPropertyChange: false, value: {bool: false }});
-        if (parent.activeObj.shape && parent.activeObj.shape.split('-')[0] === 'crop') {
-            parent.notify('toolbar', { prop: 'refresh-toolbar', onPropertyChange: false, value: {type: 'main',
-                isApplyBtn: true, isCropping: true, isZooming: null, cType: null}});
-        } else {
-            parent.notify('toolbar', { prop: 'refresh-main-toolbar', onPropertyChange: false});
-        }
-        parent.notify('toolbar', {prop: 'enable-disable-btns'});
-        if (document.getElementById(parent.element.id + '_quickAccessToolbarArea')) {
-            document.getElementById(parent.element.id + '_quickAccessToolbarArea').style.display = 'none';
-        }
-        parent.notify('toolbar', {prop: 'enable-disable-btns'});
-        if (parent.transform.degree !== 0) {
-            parent.notify('transform', { prop: 'drawPannedImage', onPropertyChange: false,
-                value: {xDiff: 0, yDiff: 0 }});
-        }
-        parent.notify('filter', { prop: 'setAdjustmentValue', onPropertyChange: false, value: {adjustmentValue: this.lowerContext.filter }});
-        parent.currObjType.isCustomCrop = false;
-    }
-
-    private updateUrc(operation: string, previousObj: CurrentObject, previousObjColl: SelectionPoint[],
-                      previousPointColl: Point[], previousSelPointColl: Point[],
-                      previousCropObj: CurrentObject, previousText?: string,
-                      currentText?: string, previousFilter?: string, isCircleCrop?: boolean): void {
-        const parent: ImageEditor = this.parent;
-        if (parent.isResize || this.isPreventing) {return; }
-        const obj: Object = {isInitialLoaded: false };
-        if (parent.currObjType.isUndoAction) { this.refreshUrc(true); }
-        parent.notify('draw', { prop: 'isInitialLoaded', onPropertyChange: false, value: {object: obj }});
-        if (!obj['isInitialLoaded'] && parent.allowUndoRedo) {
-            const object: Object = {currObj: {} as CurrentObject };
-            parent.notify('filter', { prop: 'getCurrentObj', onPropertyChange: false, value: {object: object }});
-            const currentObj: CurrentObject = object['currObj'];
-            currentObj.objColl = extend([], parent.objColl, [], true) as SelectionPoint[];
-            currentObj.pointColl = extend([], parent.pointColl, [], true) as Point[];
-            currentObj.afterCropActions = extend([], parent.afterCropActions, [], true) as string[];
-            const selPointCollObj: Object = {selPointColl: null };
-            parent.notify('freehand-draw', { prop: 'getSelPointColl', onPropertyChange: false,
-                value: {obj: selPointCollObj }});
-            currentObj.selPointColl = extend([], selPointCollObj['selPointColl'], [], true) as Point[];
-            if (operation === 'crop') {
-                currentObj.currSelectionPoint = extend({}, parent.currSelectionPoint, {}, true) as SelectionPoint;
-            } else if (operation === 'frame') {
-                previousObj.destPoints = {startX: parent.frameDestPoints.destLeft, startY: parent.frameDestPoints.destTop,
-                    width: parent.frameDestPoints.destWidth, height: parent.frameDestPoints.destHeight };
-                currentObj.destPoints = {startX: parent.frameDestPoints.destLeft, startY: parent.frameDestPoints.destTop,
-                    width: parent.frameDestPoints.destWidth, height: parent.frameDestPoints.destHeight };
-                if (!isNullOrUndefined(parent.tempFrameZoomLevel)) {
-                    previousObj.defaultZoom = currentObj.defaultZoom = parent.tempFrameZoomLevel;
-                }
-            } else if ((operation === 'imageHFlip' || operation === 'imageVFlip') && this.appliedUndoRedoColl.length > 0) {
-                const index: string = previousObjColl[previousObjColl.length - 1].currIndex;
-                previousObjColl = this.appliedUndoRedoColl[this.appliedUndoRedoColl.length - 1].currentObjColl;
-                if (index) {
-                    for (let i: number = 0, len: number = previousObjColl.length; i < len; i++) {
-                        if (previousObjColl[i as number].currIndex === index) {
-                            const actObj: SelectionPoint = extend({}, previousObjColl[i as number], {}, true) as SelectionPoint;
-                            previousObjColl.splice(i, 1);
-                            previousObjColl.push(actObj);
-                            break;
-                        }
-                    }
-                }
-            }
-            this.undoRedoColl.push({operation: operation, previousObj: previousObj, currentObj: currentObj,
-                previousObjColl: previousObjColl, currentObjColl: currentObj.objColl,
-                previousPointColl: previousPointColl, currentPointColl: currentObj.pointColl,
-                previousSelPointColl: previousSelPointColl, currentSelPointColl: currentObj.selPointColl,
-                previousCropObj: previousCropObj, currentCropObj: extend({}, parent.cropObj, {}, true) as CurrentObject,
-                previousText: previousText, currentText: currentText, filter: previousFilter, isCircleCrop: isCircleCrop });
-            parent.notify('toolbar', { prop: 'enable-disable-btns', onPropertyChange: false});
-        }
-    }
-
-    private updateUrObj(objColl: SelectionPoint[], operation?: string): void {
-        const parent: ImageEditor = this.parent;
-        if (parent.allowUndoRedo) {
-            if (parent.currObjType.isUndoAction && !parent.isShapeDrawing) { this.refreshUrc(true); }
-            if (isNullOrUndefined(parent.activeObj.imageRatio)) {
-                parent.notify('shape', { prop: 'updImgRatioForActObj', onPropertyChange: false});
-            }
-            parent.objColl.push(parent.activeObj);
-            const cropObj: CurrentObject = extend({}, parent.cropObj, {}, true) as CurrentObject;
-            const object: Object = {currObj: {} as CurrentObject };
-            parent.notify('filter', { prop: 'getCurrentObj', onPropertyChange: false, value: {object: object }});
-            const obj: CurrentObject = object['currObj'];
-            obj.objColl = extend([], parent.objColl, [], true) as SelectionPoint[];
-            obj.pointColl = extend([], parent.pointColl, [], true) as Point[];
-            obj.afterCropActions = extend([], parent.afterCropActions, [], true) as string[];
-            const selPointCollObj: Object = {selPointColl: null };
-            parent.notify('freehand-draw', { prop: 'getSelPointColl', onPropertyChange: false,
-                value: {obj: selPointCollObj }});
-            obj.selPointColl = extend([], selPointCollObj['selPointColl'], [], true) as Point[];
-            const oper: string = operation ? operation : 'shapeTransform';
-            this.undoRedoColl.push({operation: oper, previousObj: obj, currentObj: obj,
-                previousObjColl: objColl, currentObjColl: obj.objColl,
-                previousPointColl: obj.pointColl, currentPointColl: obj.pointColl,
-                previousSelPointColl: obj.selPointColl, currentSelPointColl: obj.selPointColl,
-                previousCropObj: cropObj, currentCropObj: cropObj});
-            parent.notify('selection', { prop: 'redrawShape', onPropertyChange: false,
-                value: {obj: parent.objColl[parent.objColl.length - 1]}});
-        }
-    }
-
-    private updateUndoRedo(operation?: string): void {
-        const parent: ImageEditor = this.parent;
-        const prevCropObj: CurrentObject = extend({}, parent.cropObj, {}, true) as CurrentObject;
-        const object: Object = {currObj: {} as CurrentObject };
-        parent.notify('filter', { prop: 'getCurrentObj', onPropertyChange: false, value: {object: object }});
-        const prevObj: CurrentObject = object['currObj'];
-        prevObj.objColl = extend([], parent.objColl, [], true) as SelectionPoint[];
-        prevObj.pointColl = extend([], parent.pointColl, [], 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[];
-        if (isNullOrUndefined(parent.activeObj.imageRatio)) {
-            parent.notify('shape', { prop: 'updImgRatioForActObj', onPropertyChange: false});
-        }
-        parent.objColl.push(parent.activeObj);
-        const oper: string = operation ? operation : 'shapeTransform';
-        this.updateUrc(oper, prevObj, prevObj.objColl, prevObj.pointColl, prevObj.selPointColl, prevCropObj);
-        parent.objColl.pop();
-        parent.notify('shape', { prop: 'applyActObj', onPropertyChange: false, value: {isMouseDown: null}});
-        parent.notify('shape', { prop: 'refreshActiveObj', onPropertyChange: false});
-        parent.notify('toolbar', { prop: 'refresh-toolbar', onPropertyChange: false, value: { type: 'shapes',
-            isApplyBtn: null, isCropping: null, isZooming: null, cType: null } });
-        parent.notify('toolbar', { prop: 'refresh-toolbar', onPropertyChange: false, value: { type: 'main',
-            isApplyBtn: null, isCropping: null, isZooming: null, cType: null } });
-    }
-
-    private getZeroZoomObjPointValue(obj: SelectionPoint[], point: Point[]): Object {
-        const parent: ImageEditor = this.parent;
-        this.updateObjColl();
-        const object: Object = {currObj: {} as CurrentObject };
-        parent.notify('filter', { prop: 'getCurrentObj', onPropertyChange: false, value: {object: object }});
-        const currentObj: CurrentObject = object['currObj'];
-        currentObj.objColl = extend([], parent.objColl, [], true) as SelectionPoint[];
-        currentObj.pointColl = extend([], parent.pointColl, [], true) as Point[];
-        currentObj.afterCropActions = extend([], parent.afterCropActions, [], true) as string[];
-        const selPointCollObj: Object = {selPointColl: null };
-        parent.notify('freehand-draw', { prop: 'getSelPointColl', onPropertyChange: false,
-            value: {obj: selPointCollObj }});
-        currentObj.selPointColl = extend([], selPointCollObj['selPointColl'], [], true) as Point[];
-        const cropDimensionObj: Object = {cropDimension: null };
-        parent.notify('transform', { prop: 'getCropDimension', onPropertyChange: false, value: {obj: cropDimensionObj }});
-        let getZeroZoomObjColl: SelectionPoint[] = extend([], parent.objColl, [], true) as SelectionPoint[];
-        let getZeroZoomPointColl: Point[] = extend([], parent.pointColl, [], true) as Point[];
-        const arrowObj: Object = {arrowDimension: null };
-        this.parent.notify('draw', { prop: 'getArrowDimension', onPropertyChange: false, value: {obj: arrowObj }});
-        const tempArrowObj: Object = extend({}, arrowObj['arrowDimension'], {}, true) as Object;
-        if (parent.transform.zoomFactor > 0 && (obj.length > 0 || point.length > 0)) {
-            if (obj.length > 0) {
-                for (let i: number = 0; i < obj.length; i++) {
-                    if (obj[i as number].currIndex) {
-                        continue;
-                    } else {
-                        obj[i as number].currIndex = 'shape_' + (i + 1);
-                    }
-                }
-            }
-            parent.objColl = obj; parent.pointColl = point;
-            const isUndoRedo: boolean = parent.isUndoRedo;
-            const isCropTab: boolean = parent.isCropTab;
-            if (parent.transform.zoomFactor !== 0) {
-                parent.isUndoRedo = true;
-                parent.notify('shape', { prop: 'drawAnnotations', onPropertyChange: false,
-                    value: {ctx: this.lowerContext, shape: 'zoom', pen: 'zoom', isPreventApply: true }});
-                parent.notify('freehand-draw', { prop: 'updateFHDColl', onPropertyChange: false});
-                parent.isCropTab = true;
-                const zoomSettings: ZoomSettings = extend({}, parent.zoomSettings, null, true) as ZoomSettings;
-                if (parent.transform.zoomFactor > 0) {
-                    parent.notify('transform', { prop: 'zoomAction', onPropertyChange: false,
-                        value: {zoomFactor: -parent.transform.zoomFactor, zoomPoint: null, isResize: null }});
-                } else {
-                    parent.notify('transform', { prop: 'zoomAction', onPropertyChange: false,
-                        value: {zoomFactor: Math.abs(parent.transform.zoomFactor), zoomPoint: null, isResize: null }});
-                }
-                parent.zoomSettings = zoomSettings; parent.isCropTab = isCropTab; parent.isUndoRedo = isUndoRedo;
-                getZeroZoomObjColl = extend([], parent.objColl, [], true) as SelectionPoint[];
-                getZeroZoomPointColl = extend([], parent.pointColl, [], true) as Point[];
-                parent.objColl = []; parent.pointColl = []; parent.freehandCounter = 0;
-                parent.notify('freehand-draw', { prop: 'setSelPointColl', onPropertyChange: false,
-                    value: {obj: {selPointColl: [] } }});
-                parent.notify('transform', { prop: 'setCropDimension', onPropertyChange: false,
-                    value: {width: cropDimensionObj['cropDimension']['width'], height: cropDimensionObj['cropDimension']['height']}});
-                const maxDimension: Dimension = {width: cropDimensionObj['cropDimension']['width'], height: cropDimensionObj['cropDimension']['height'] };
-                maxDimension.width += (maxDimension.width * currentObj.defaultZoom);
-                maxDimension.height += (maxDimension.height * currentObj.defaultZoom);
-                parent.notify('draw', {prop: 'setZoomCropWidth', value: {width: maxDimension.width, height: maxDimension.height }});
-                parent.notify('draw', { prop: 'setCurrentObj', onPropertyChange: false, value: {obj: currentObj}});
-                parent.img.destLeft = currentObj.destPoints.startX; parent.img.destTop = currentObj.destPoints.startY;
-                parent.panPoint.totalPannedPoint = currentObj.totalPannedPoint;
-                parent.panPoint.totalPannedClientPoint = currentObj.totalPannedClientPoint;
-                parent.panPoint.totalPannedInternalPoint = currentObj.totalPannedInternalPoint;
-                parent.objColl = extend([], currentObj.objColl, [], true) as SelectionPoint[];
-                parent.pointColl = extend([], currentObj.pointColl, [], true) as Point[];
-                parent.freehandCounter = parent.pointColl.length;
-                parent.notify('draw', { prop: 'setArrowDimension', onPropertyChange: false, value: {arrowDimension: tempArrowObj }});
-                parent.notify('freehand-draw', { prop: 'setSelPointColl', onPropertyChange: false,
-                    value: {obj: {selPointColl: extend([], currentObj.selPointColl, [], true) as Point[] } }});
-                this.lowerContext.filter = 'none';
-                parent.transform.straighten = 0;
-                this.applyImgTranform();
-                parent.notify('shape', { prop: 'drawAnnotations', onPropertyChange: false,
-                    value: {ctx: this.lowerContext, shape: 'iterate', pen: 'iterate', isPreventApply: null }});
-                parent.notify('freehand-draw', { prop: 'updateFHDCurPts', onPropertyChange: false});
-                this.lowerContext.filter = currentObj.filter;
-                if (parent.transform.degree !== 0) {
-                    parent.notify('transform', { prop: 'drawPannedImage', onPropertyChange: false,
-                        value: {xDiff: 0, yDiff: 0 }});
-                }
-                parent.notify('draw', { prop: 'clearOuterCanvas', onPropertyChange: false, value: {context: this.lowerContext}});
-                if (parent.isCircleCrop || (parent.currSelectionPoint && parent.currSelectionPoint.shape === 'crop-circle')) {
-                    parent.notify('crop', { prop: 'cropCircle', onPropertyChange: false,
-                        value: {context: this.lowerContext, isSave: null, isFlip: null}});
-                }
-            }
-        }
-        return {obj: getZeroZoomObjColl, point: getZeroZoomPointColl };
-    }
-
-    private updateObjColl(): void {
-        const parent: ImageEditor = this.parent;
-        for (let i: number = 0; i < parent.objColl.length; i++) {
-            let obj: SelectionPoint = parent.objColl[i as number];
-            let isUpdated: boolean = false;
-            if (obj.shape === 'line' || obj.shape === 'arrow') {
-                if (obj.activePoint.width < 0) {
-                    obj.activePoint.width = Math.abs(obj.activePoint.width);
-                    isUpdated = true;
-                }
-                if (obj.activePoint.height < 0) {
-                    obj.activePoint.height = Math.abs(obj.activePoint.height);
-                    isUpdated = true;
-                }
-                if (isUpdated) {
-                    const activeObj: SelectionPoint = extend({}, parent.activeObj, {}, true) as SelectionPoint;
-                    parent.activeObj = obj;
-                    parent.notify('shape', { prop: 'updImgRatioForActObj', onPropertyChange: false });
-                    obj = parent.activeObj;
-                    parent.activeObj = activeObj;
-                }
-            }
-        }
-    }
-
-    private applyImgTranform(): void {
-        const parent: ImageEditor = this.parent;
-        const obj: SelectionPoint = extend({}, parent.activeObj, {}, true) as SelectionPoint;
-        for (let i: number = 0, len: number = parent.objColl.length; i < len; i++) {
-            if (parent.objColl[i as number].shape === 'image') {
-                parent.activeObj = extend({}, parent.objColl[i as number], {}, true) as SelectionPoint;
-                const ctx: CanvasRenderingContext2D = parent.objColl[i as number].imageCanvas.getContext('2d');
-                parent.notify('selection', { prop: 'applyTransformToImg', onPropertyChange: false, value: {ctx: ctx }});
-                this.upperContext.clearRect(0, 0, parent.upperCanvas.width, parent.upperCanvas.height);
-                parent.notify('selection', { prop: 'setImageClarity', onPropertyChange: false, value: {bool: true }});
-            }
-        }
-        parent.activeObj = obj;
-    }
-
-    private updateUndoRedoStack(isPenDraw?: boolean): void {
-        const parent: ImageEditor = this.parent;
-        if ((parent.activeObj.currIndex && parent.activeObj.activePoint.width !== 0 ||
-            parent.activeObj.activePoint.height !== 0 || (parent.activeObj.pointColl &&
-            parent.activeObj.pointColl.length > 0)) || isPenDraw) {
-            const isTextArea: boolean = parent.textArea.style.display === 'none' ? false : true;
-            const temp: boolean = parent.noPushUndo;
-            parent.noPushUndo = false; parent.isUndoRedoStack = true;
-            this.preventEditComplete = true;
-            if (isPenDraw) {
-                const tempTogglePen: boolean = parent.togglePen;
-                const obj: Object = {freehandDrawSelectedId: null };
-                parent.notify('freehand-draw', { prop: 'getFreehandDrawSelectedId', onPropertyChange: false, value: {obj: obj }});
-                parent.okBtn();
-                parent.noPushUndo = temp;
-                if (obj['freehandDrawSelectedId']){
-                    parent.noRedact = true;
-                    parent.selectShape(obj['freehandDrawSelectedId']);
-                } else {
-                    parent.freeHandDraw(true);
-                }
-                parent.togglePen = tempTogglePen;
-            } else if (parent.activeObj.currIndex) {
-                const shapeId: string = parent.activeObj.currIndex;
-                parent.okBtn();
-                parent.noPushUndo = temp;
-                parent.noRedact = true;
-                parent.selectShape(shapeId);
-                if (parent.drawingShape) {
-                    parent.notify('selection', { prop: 'setCurrentDrawingShape', onPropertyChange: false, value: {value: parent.drawingShape.toLowerCase() }});
-                }
-                if (isTextArea) {
-                    parent.enableTextEditing();
-                }
-            }
-            if (this.preventEditComplete) {
-                parent.isUndoRedoStack = this.preventEditComplete = false;
-                if (!this.preventApplyEditComplete) {
-                    this.triggerActionCompletedEvent('shape-customize');
-                }
-                this.triggerActionCompletedEvent('shape-select');
-            }
-            parent.isUndoRedoStack = this.preventEditComplete = false;
-        }
-    }
-}