@syncfusion/ej2-image-editor 30.2.5 → 31.1.17

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

@@ -0,0 +1,3917 @@
+/* eslint-disable no-constant-condition */
+import { EventHandler, extend, isNullOrUndefined } from '@syncfusion/ej2-base';
+import { CurrentObject, ImageEditor, Point, SelectionPoint, CropSelectionSettings, ShapeChangeEventArgs, ShapeSettings, ShapeType,
+    StrokeSettings, TextSettings, RedactType, RedactSettings, ArrowheadType, ActivePoint, TransformationCollection} from '../index';
+
+export class Shape {
+    private parent: ImageEditor;
+    private lowerContext: CanvasRenderingContext2D;
+    private upperContext: CanvasRenderingContext2D;
+    private textSettings: TextSettings =
+    {text: 'Enter Text', fontFamily: '', fontSize: null, fontRatio: null, bold: false, italic: false, underline: false, strikethrough: false};
+    private strokeSettings: StrokeSettings = {strokeColor: '#fff', fillColor: '', strokeWidth: null, radius: null, outlineColor: '', outlineWidth: null};
+    private keyHistory: string = '';  // text history
+    private prevObj: CurrentObject;
+    private shapeImg: HTMLImageElement;
+    private preventFrameAnnotation: boolean = false;
+    private redactType: string = 'blur';
+
+    constructor(parent: ImageEditor) {
+        this.parent = parent;
+        this.addEventListener();
+    }
+
+    public destroy(): void {
+        if (this.parent.isDestroyed) { return; }
+        this.removeEventListener();
+    }
+
+    private addEventListener(): void {
+        this.parent.on('shape', this.shape, this);
+        this.parent.on('destroyed', this.destroy, this);
+    }
+
+    private removeEventListener(): void {
+        this.parent.off('shape', this.shape);
+        this.parent.off('destroyed', this.destroy);
+    }
+
+    private shape(args?: { onPropertyChange: boolean, prop: string, value?: object }): void {
+        const parent: ImageEditor = this.parent;
+        this.initShapePvtProps(); let uploader: HTMLElement;
+        switch (args.prop) {
+        case 'drawEllipse':
+            this.drawEllipse(args.value['x'], args.value['y'], args.value['radiusX'], args.value['radiusY'],
+                             args.value['strokeWidth'], args.value['strokeColor'], args.value['fillColor'],
+                             args.value['degree'], args.value['isSelected']);
+            break;
+        case 'drawLine':
+            this.drawLine(args.value['startX'], args.value['startY'], args.value['endX'], args.value['endY'],
+                          args.value['strokeWidth'], args.value['strokeColor'], args.value['isSelected']);
+            break;
+        case 'drawArrow':
+            this.drawArrow(args.value['startX'], args.value['startY'], args.value['endX'], args.value['endY'],
+                           args.value['strokeWidth'], args.value['strokeColor'], args.value['arrowStart'],
+                           args.value['arrowEnd'], args.value['isSelected']);
+            break;
+        case 'drawPath':
+            this.drawPath(args.value['pointColl'], args.value['strokeWidth'], args.value['strokeColor'], args.value['isSelected']);
+            break;
+        case 'drawRectangle':
+            this.drawRectangle(args.value['x'], args.value['y'], args.value['width'], args.value['height'],
+                               args.value['strokeWidth'], args.value['strokeColor'], args.value['fillColor'],
+                               args.value['degree'], args.value['isSelected'], args.value['radius']);
+            break;
+        case 'drawText':
+            this.drawText(args.value['x'], args.value['y'], args.value['text'], args.value['fontFamily'],
+                          args.value['fontSize'], args.value['bold'], args.value['italic'], args.value['color'],
+                          args.value['isSelected'], args.value['degree'], args.value['fillColor'], args.value['outlineColor'],
+                          args.value['outlineWidth'], args.value['transformCollection'], args.value['underline'], args.value['strikethrough']);
+            break;
+        case 'redrawActObj':
+            this.redrawActObj(args.value['x'], args.value['y'], args.value['isMouseDown']);
+            break;
+        case 'apply':
+            this.apply(args.value['shape'], args.value['obj'], args.value['canvas']);
+            break;
+        case 'updateShapeChangeEventArgs':
+            this.updateShapeChangeEventArgs(args.value['shapeSettings'], args.value['allowShapeOverflow']);
+            break;
+        case 'updSelChangeEventArgs':
+            this.updSelChangeEventArgs(args.value['selectionSettings']);
+            break;
+        case 'iterateObjColl':
+            this.iterateObjColl();
+            break;
+        case 'updImgRatioForActObj':
+            this.updImgRatioForActObj();
+            break;
+        case 'redrawObj':
+            this.redrawObj(args.value['degree']);
+            break;
+        case 'redraw-text':
+            this.redrawText();
+            break;
+        case 'draw-shape':
+            this.drawShape(args.value['obj'] as string, args.value['strokeWidth'], args.value['strokeColor'],
+                           args.value['fillColor'], args.value['start'], args.value['width'], args.value['height']);
+            break;
+        case 'renderTextArea':
+            this.renderTextArea(args.value['x'], args.value['y'], args.value['actObj']);
+            break;
+        case 'setTextBoxWidth':
+            this.setTextBoxWidth(args.value['e']);
+            break;
+        case 'findTextTarget':
+            this.findTextTarget(args.value['e']);
+            break;
+        case 'updateFontStyles':
+            this.updateFontStyles(args.value['isTextBox']);
+            break;
+        case 'applyFontStyle':
+            this.applyFontStyle(args.value['item']);
+            break;
+        case 'updateFontRatio':
+            this.updateFontRatio(args.value['obj'], args.value['isTextArea']);
+            break;
+        case 'updateFontSize':
+            this.updateFontSize(args.value['obj']);
+            break;
+        case 'pushActItemIntoObj':
+            this.pushActItemIntoObj();
+            break;
+        case 'clearActObj':
+            this.clearActObj();
+            break;
+        case 'refreshActiveObj':
+            this.refreshActiveObj();
+            break;
+        case 'applyActObj':
+            this.applyActObj(args.value['isMouseDown']);
+            break;
+        case 'wireEvent':
+            EventHandler.add(parent.upperCanvas, 'dblclick', this.findTextTarget, this);
+            EventHandler.add(parent.textArea, 'mousedown', this.findTextTarget, this);
+            uploader = document.getElementById(parent.element.id + '_fileUpload');
+            if (uploader) {
+                EventHandler.add(uploader, 'change', this.fileChanged, this);
+            }
+            break;
+        case 'unWireEvent':
+            EventHandler.remove(parent.upperCanvas, 'dblclick', this.findTextTarget);
+            EventHandler.remove(parent.textArea, 'mousedown', this.findTextTarget);
+            uploader = document.getElementById(parent.element.id + '_fileUpload');
+            if (uploader) {
+                EventHandler.remove(uploader, 'change', this.fileChanged);
+            }
+            break;
+        case 'getShapeSetting':
+            this.getShapeSetting(args.value['id'], args.value['obj']);
+            break;
+        case 'getShapeSettings':
+            this.getShapeSettings(args.value['obj']);
+            break;
+        case 'getRedactSettings':
+            this.getRedactSettings(args.value['obj']);
+            break;
+        case 'isPointsInRange':
+            this.isPointsInRange(args.value['x'], args.value['y'], args.value['obj']);
+            break;
+        case 'alignRotateFlipColl':
+            this.alignRotateFlipColl(args.value['collection'], args.value['isRotateFlipCollection'],
+                                     args.value['obj']);
+            break;
+        case 'selectShape':
+            this.selectShape(args.value['id'], args.value['obj']);
+            break;
+        case 'deleteShape':
+            this.deleteShape(args.value['id']);
+            break;
+        case 'getMaxText':
+            this.getMaxText(args.value['isTextBox'], args.value['text'], args.value['obj']);
+            break;
+        case 'setPointCollForLineArrow':
+            args.value['obj'].pointColl = this.getLinePoints(args.value['obj'].activePoint.startX,
+                                                             args.value['obj'].activePoint.startY, args.value['obj'].activePoint.endX,
+                                                             args.value['obj'].activePoint.endY);
+            break;
+        case 'setPointCollForShapeRotation':
+            this.setPointCollForShapeRotation(args.value['obj']);
+            break;
+        case 'setTextSettings':
+            if (args.value['textSettings']) {
+                this.textSettings = args.value['textSettings'];
+            } else if (args.value['fontFamily']) {
+                this.textSettings.fontFamily = args.value['fontFamily'];
+            } else if (args.value['fontSize']) {
+                this.textSettings.fontSize = args.value['fontSize'];
+            } else if (args.value['radius']) {
+                this.strokeSettings.radius = args.value['radius'];
+            }
+            break;
+        case 'setStrokeSettings':
+            if (args.value['strokeSettings']) {
+                this.strokeSettings = args.value['strokeSettings'];
+            } else if (args.value['strokeColor']) {
+                this.strokeSettings.strokeColor = args.value['strokeColor'];
+            }  else if (args.value['fillColor']) {
+                this.strokeSettings.fillColor = args.value['fillColor'];
+            } else if (args.value['strokeWidth']) {
+                this.strokeSettings.strokeWidth = args.value['strokeWidth'];
+            } else if (args.value['outlineColor']) {
+                this.strokeSettings.outlineColor = args.value['outlineColor'];
+            } else if (args.value['radius']) {
+                this.strokeSettings.radius = args.value['radius'];
+            } else if (args.value['outlineWidth']) {
+                this.strokeSettings.outlineWidth = args.value['outlineWidth'];
+            }
+            break;
+        case 'getStrokeSettings':
+            args.value['obj']['strokeSettings'] = this.strokeSettings;
+            break;
+        case 'setKeyHistory':
+            this.keyHistory = args.value['keyHistory'];
+            break;
+        case 'getKeyHistory':
+            args.value['obj']['keyHistory'] = this.keyHistory;
+            break;
+        case 'setTextBoxPos':
+            this.setTextBoxPos(args.value['actObj'], args.value['degree'], args.value['flip'], args.value['x'], args.value['y']);
+            break;
+        case 'setTextBoxPoints':
+            this.setTextBoxPoints(args.value['actObj'], args.value['degree'], args.value['flip'], args.value['x'], args.value['y']);
+            break;
+        case 'alignTextAreaIntoCanvas':
+            this.alignTextAreaIntoCanvas();
+            break;
+        case 'initializeTextShape':
+            this.initializeTextShape(args.value['text'], args.value['fontFamily'], args.value['fontSize'],
+                                     args.value['bold'], args.value['italic'], args.value['underline'], args.value['strikethrough'], args.value['strokeColor'],
+                                     args.value['fillColor'], args.value['outlineColor'], args.value['outlineWidth']);
+            break;
+        case 'stopPathDrawing':
+            this.stopPathDrawing(args.value['e'], args.value['isApply']);
+            break;
+        case 'updateArrowRatio':
+            this.updateArrowRatio(args.value['obj']);
+            break;
+        case 'getSquarePointForRotatedShape':
+            this.getSquarePointForRotatedShape(args.value['obj'], args.value['object']);
+            break;
+        case 'drawImage':
+            this.drawImage(args.value['x'], args.value['y'], args.value['width'], args.value['height'],
+                           args.value['src'], args.value['degree'], args.value['isAspectRatio'], args.value['opacity'],
+                           args.value['isSelected']);
+            break;
+        case 'reset':
+            this.reset();
+            break;
+        case 'updateObj':
+            this.updateObj(args.value['dimObj'], args.value['x'], args.value['y']);
+            break;
+        case 'straightenShapes':
+            this.straightenShapes();
+            break;
+        case 'straightenShapePoints':
+            this.straightenShapePoints(args.value['obj'], args.value['isReverse']);
+            break;
+        case 'straightenPath':
+            this.straightenPath(args.value['obj']);
+            break;
+        case 'straightenFHD':
+            this.straightenFHD();
+            break;
+        case 'getTextBoxPosition':
+            this.getTextBoxPosition(args.value['obj'], args.value['object']);
+            break;
+        case 'setFlipState':
+            this.setFlipState(args.value['x'], args.value['y'], args.value['obj'], args.value['object']);
+            break;
+        case 'getNewShapeId':
+            args.value['obj']['id'] = this.getNewShapeId();
+            break;
+        case 'z-order':
+            this.updateZOrder(args.value['obj'], args.value['value']);
+            break;
+        case 'getSmallestIndex':
+            args.value['obj']['index'] = this.getSmallestIndex();
+            break;
+        case 'isIndexInObjColl':
+            args.value['obj']['bool'] = this.isIndexInObjColl(args.value['index']);
+            break;
+        case 'drawAnnotations':
+            this.drawAnnotations(args.value['ctx'], args.value['shape'], args.value['pen'],
+                                 args.value['isPreventApply'], args.value['x'], args.value['y'], args.value['panRegion']);
+            break;
+        case 'updateShapeColl':
+            this.updateShapeColl();
+            break;
+        case 'getNewOrder':
+            args.value['obj']['order'] = this.getNewOrder();
+            break;
+        case 'getHighestOrder':
+            args.value['obj']['order'] = this.getHighestOrder();
+            break;
+        case 'getLowestOrder':
+            args.value['obj']['order'] = this.getLowestOrder();
+            break;
+        case 'drawRedact':
+            this.drawRedact(args.value['x'], args.value['y'], args.value['width'], args.value['height'],
+                            args.value['type'], args.value['value']);
+            break;
+        case 'setRedactType':
+            this.redactType = args.value['redactType'];
+            break;
+        }
+    }
+
+    public getModuleName(): string {
+        return 'shape';
+    }
+
+    private initShapePvtProps(): void {
+        const parent: ImageEditor = this.parent;
+        if (parent.lowerCanvas) {this.lowerContext = parent.lowerCanvas.getContext('2d'); }
+        if (parent.upperCanvas) {this.upperContext = parent.upperCanvas.getContext('2d'); }
+        if (isNullOrUndefined(this.shapeImg)) {
+            this.shapeImg = parent.createElement('img', {
+                id: parent.element.id + '_shapeImg', attrs: { name: 'Image', crossorigin: 'anonymous' }
+            });
+        }
+        if (this.textSettings.fontFamily === '') {
+            this.textSettings.fontFamily = parent.fontFamily.default;
+        }
+    }
+
+    private reset(): void {
+        this.textSettings =
+            {text: 'Enter Text', fontFamily: this.parent.fontFamily.default, fontSize: null, fontRatio: null, bold: false, italic: false, underline: false, strikethrough: false};
+        this.strokeSettings = {strokeColor: '#fff', fillColor: '', strokeWidth: null, radius: null, outlineColor: '', outlineWidth: null};
+        this.preventFrameAnnotation = false;
+    }
+
+    private drawEllipse(x?: number, y?: number, radiusX?: number, radiusY?: number, strokeWidth?: number, strokeColor?: string,
+                        fillColor?: string, degree?: number, isSelected?: boolean): void {
+        this.initializeShape('ellipse');
+        const start: Point = x && y ? {x: x, y: y} : null;
+        this.drawShape('ellipse', strokeWidth, strokeColor, fillColor, start, radiusX, radiusY,
+                       null, null, null, degree, null, isSelected);
+    }
+
+    private drawLine(startX?: number, startY?: number, endX?: number, endY?: number, strokeWidth?: number,
+                     strokeColor?: string, isSelected?: boolean): void {
+        this.initializeShape('line');
+        const start: Point = startX && startY ? {x: startX, y: startY} : null;
+        const width: number = endX - startX; const height: number = endY - startY;
+        this.drawShape('line', strokeWidth, strokeColor, null, start, width, height, null, null, null, null, null, isSelected);
+    }
+
+    private drawPath(pointColl: Point[], strokeWidth?: number, strokeColor?: string, isSelected?: boolean): void {
+        this.initializeShape('path');
+        if (pointColl) {
+            this.drawShape('path', strokeWidth, strokeColor, null, null, null, null, pointColl, null, null, null, null, isSelected);
+        }
+    }
+
+    private drawArrow(startX?: number, startY?: number, endX?: number, endY?: number, strokeWidth?: number,
+                      strokeColor?: string, arrowStart?: ArrowheadType, arrowEnd?: ArrowheadType, isSelected?: boolean): void {
+        this.initializeShape('arrow');
+        const start: Point = startX && startY ? {x: startX, y: startY} : null;
+        const width: number = endX - startX; const height: number = endY - startY;
+        this.drawShape('arrow', strokeWidth, strokeColor, null, start, width, height, null, arrowStart, arrowEnd, null, null, isSelected);
+    }
+
+    private drawRectangle(x?: number, y?: number, width?: number, height?: number, strokeWidth?: number, strokeColor?: string,
+                          fillColor?: string, degree?: number, isSelected?: boolean, radius?: number): void {
+        this.initializeShape('rectangle');
+        const start: Point = x && y ? {x: x, y: y} : null;
+        this.drawShape('rectangle', strokeWidth, strokeColor, fillColor, start, width, height, null,
+                       null, null, degree, null, isSelected, radius);
+    }
+
+    // eslint-disable-next-line @typescript-eslint/tslint/config
+    private drawRedact(x?: number, y?: number, width?: number, height?: number, type?: RedactType, value?: number) {
+        this.initializeShape('redact');
+        const start: Point = x && y ? {x: x, y: y} : null;
+        this.drawShape('redact', null, null, null, start, width, height, null,
+                       null, null, null, null, null, null, type, value);
+    }
+
+    private drawText(x?: number, y?: number, text?: string, fontFamily?: string, fontSize?: number, bold?: boolean, italic?: boolean,
+                     color?: string, isSelected?: boolean, degree?: number, fillColor?: string, outlineColor?: string,
+                     outlineWidth?: number, transformCollection?: TransformationCollection[], underline?: boolean,
+                     strikethrough?: boolean): void {
+        this.drawShapeText(text, fontFamily, fontSize, bold, italic, color, x, y, isSelected, degree,
+                           fillColor, outlineColor, outlineWidth, transformCollection, underline, strikethrough);
+    }
+
+    private initializeShape(type: string): void {
+        const parent: ImageEditor = this.parent;
+        this.redrawActObj();
+        parent.activeObj.shape = type;
+        parent.currObjType.isCustomCrop = false;
+    }
+
+    private updateWidthHeight(obj: SelectionPoint): SelectionPoint {
+        obj.activePoint.width = obj.activePoint.endX - obj.activePoint.startX;
+        obj.activePoint.height = obj.activePoint.endY - obj.activePoint.startY;
+        return obj;
+    }
+
+    private setDimension(width: number, height: number): void {
+        const parent: ImageEditor = this.parent;
+        const shape: string = parent.activeObj.shape;
+        if ((width && height) || ((shape === 'line' || shape === 'arrow') && (width || height))) {
+            parent.activeObj.activePoint.width = width; parent.activeObj.activePoint.height = height;
+            if (parent.currObjType.shape.toLowerCase() === 'ellipse') {
+                parent.activeObj.activePoint.width = 2 * width;
+                parent.activeObj.activePoint.height = 2 * height;
+            }
+        }
+    }
+
+    private getArrowType(type: ArrowheadType): string {
+        let arrowType: string = type;
+        if (type) {
+            const typeToArrowType: Object = {'None': 'none', 'Arrow': 'arrow', 'SolidArrow': 'arrowSolid',
+                'Circle': 'circle', 'SolidCircle': 'circleSolid', 'Square': 'square', 'SolidSquare': 'squareSolid', 'Bar': 'bar' };
+            arrowType = typeToArrowType[`${type}`];
+        }
+        return arrowType;
+    }
+
+    private drawShape(type: string, strokeWidth?: number, strokeColor?: string, fillColor?: string, start?: Point, width?: number,
+                      height?: number, pointColl?: Point[], arrowStart?: ArrowheadType, arrowEnd?: ArrowheadType, degree?: number,
+                      opacity?: number, isSelected?: boolean, radius?: number, redactType?: RedactType, value?: number): void {
+        const parent: ImageEditor = this.parent;
+        if (!parent.disabled && parent.isImageLoaded) {
+            parent.notify('draw', { prop: 'setImageEdited', onPropertyChange: false });
+            this.redrawActObj();
+            const objColl: SelectionPoint[] = extend([], parent.objColl, [], true) as SelectionPoint[];
+            parent.togglePen = false; this.keyHistory = '';
+            parent.upperCanvas.style.display = 'block'; this.refreshActiveObj();
+            parent.currObjType.shape = type = type.toLowerCase();
+            if (type !== 'freehanddraw' && type !== '') {
+                parent.activeObj.shape = type;
+                let strokeSettings: StrokeSettings = parent.activeObj.strokeSettings;
+                this.upperContext.clearRect(0, 0, parent.upperCanvas.width, parent.upperCanvas.height);
+                if (isNullOrUndefined(strokeSettings)) {
+                    strokeSettings = this.strokeSettings;
+                }
+                if (type === 'path' && pointColl) {
+                    parent.activeObj.pointColl = pointColl;
+                }
+                if (opacity !== null && opacity !== undefined) {parent.activeObj.opacity = opacity; }
+                strokeSettings.strokeWidth = strokeWidth ? strokeWidth : strokeSettings.strokeWidth;
+                const shape: string = parent.activeObj.shape;
+                if ((shape === 'rectangle' || shape === 'ellipse') && strokeWidth === 0) {
+                    strokeSettings.strokeWidth = 0;
+                }
+                strokeSettings.strokeColor = strokeColor ? strokeColor : strokeSettings.strokeColor;
+                strokeSettings.fillColor = fillColor || fillColor === '' ? fillColor : strokeSettings.fillColor;
+                strokeSettings.radius = radius ? radius : strokeSettings.radius;
+                const tempWidth: number = parent.img.destWidth > 100 ? 100 : parent.img.destWidth / 2;
+                const tempHeight: number = parent.img.destHeight > 100 ? 100 : parent.img.destHeight / 2;
+                parent.activeObj.activePoint.width = tempWidth; parent.activeObj.activePoint.height = tempHeight;
+                if (type === 'line' || type === 'arrow') {
+                    parent.activeObj.lineDraw = 'horizontal'; parent.activeObj.activePoint.height = 0;
+                    if (type === 'arrow') {
+                        parent.activeObj.activePoint.width += 50;
+                        parent.activeObj.start = this.getArrowType(arrowStart); parent.activeObj.end = this.getArrowType(arrowEnd);
+                    }
+                } else if (type === 'rectangle') {
+                    parent.activeObj.activePoint.width += parent.activeObj.activePoint.width / 2;
+                } else if (type === 'redact') {
+                    if (redactType) {
+                        parent.activeObj.redactType = redactType.toLowerCase();
+                        if (redactType === RedactType.Blur) {
+                            if (value) {
+                                parent.activeObj.redactBlur = value;
+                            }
+                        } else {
+                            if (value) {
+                                parent.activeObj.redactPixelate = value;
+                            }
+                        }
+                        parent.activeObj.redactImage = parent.createElement('canvas');
+                    }
+                }
+                this.setDimension(width, height);
+                if (start) {
+                    parent.activeObj.activePoint.startX = start.x; parent.activeObj.activePoint.startY = start.y;
+                    parent.activeObj.activePoint.endX = parent.activeObj.activePoint.startX +
+                        parent.activeObj.activePoint.width;
+                    parent.activeObj.activePoint.endY = parent.activeObj.activePoint.startY +
+                        parent.activeObj.activePoint.height;
+                } else {
+                    this.setCenterPoints();
+                }
+                this.setPointCollForLineAndArrow();
+                if (type === 'arrow') {
+                    parent.activeObj.triangleDirection = 'right';
+                }
+                parent.currObjType.isDragging = parent.currObjType.isCustomCrop = false;
+                this.initShapeProps();
+                const obj: Object = {shapeSettingsObj: {} as ShapeSettings };
+                parent.notify('selection', { prop: 'updatePrevShapeSettings', onPropertyChange: false, value: {obj: obj}});
+                const shapeSettings: ShapeSettings = obj['shapeSettingsObj'];
+                const shapeChangingArgs: ShapeChangeEventArgs = {cancel: false, action: 'insert', previousShapeSettings: shapeSettings,
+                    currentShapeSettings: shapeSettings};
+                parent.trigger('shapeChanging', shapeChangingArgs);
+                parent.editCompleteArgs = shapeChangingArgs;
+                this.updateShapeChangeEventArgs(shapeChangingArgs.currentShapeSettings, shapeChangingArgs.allowShapeOverflow);
+                this.setDimension(width, height);
+                parent.notify('draw', { prop: 'drawObject', onPropertyChange: false, value: {canvas: 'duplicate'}});
+                if (degree) {
+                    parent.activeObj.rotatedAngle = degree * (Math.PI / 180);
+                    parent.notify('selection', {prop: 'updPtCollForShpRot', onPropertyChange: false, value: {obj: parent.activeObj }});
+                }
+                parent.notify('toolbar', { prop: 'renderQAT', onPropertyChange: false, value: {isPenEdit: null} });
+                parent.notify('selection', { prop: 'isShapeInserted', onPropertyChange: false, value: {bool: true} });
+                parent.notify('undo-redo', { prop: 'updateUrObj', onPropertyChange: false, value: {objColl: objColl}});
+                if (type === 'redact') {
+                    parent.notify('toolbar', { prop: 'refresh-toolbar', onPropertyChange: false, value: {type: 'redact',
+                        isApplyBtn: null, isCropping: null, isZooming: null, cType: null}});
+                } else {
+                    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});
+                if (parent.isPublicMethod && !isSelected) {
+                    parent.notify('undo-redo', {prop: 'updateUndoRedo', value: {operation: 'shapeInsert'}, onPropertyChange: false});
+                }
+                parent.isPublicMethod = false;
+            }
+        }
+    }
+
+    private initShapeProps(): void {
+        const parent: ImageEditor = this.parent;
+        parent.activeObj.shapeDegree = parent.transform.degree;
+        parent.activeObj.shapeFlip = parent.transform.currFlipState;
+        parent.activeObj.textFlip = parent.transform.currFlipState;
+        parent.activeObj.flipObjColl = [];
+        parent.activeObj.order = this.getNewOrder();
+    }
+
+    private setPointCollForLineAndArrow(): void {
+        const parent: ImageEditor = this.parent;
+        const shape: string = parent.activeObj.shape;
+        const {startX, startY, endX, endY} : ActivePoint = parent.activeObj.activePoint;
+        if (shape === 'line' || shape === 'arrow') {
+            parent.activeObj.pointColl = this.getLinePoints(startX, startY, endX, endY);
+            if (parent.activeObj.pointColl) {
+                for (let i: number = 0, len: number = parent.activeObj.pointColl.length; i < len; i++) {
+                    parent.activeObj.pointColl[i as number].ratioX = (parent.activeObj.pointColl[i as number].x -
+                        parent.img.destLeft) / parent.img.destWidth;
+                    parent.activeObj.pointColl[i as number].ratioY = (parent.activeObj.pointColl[i as number].y -
+                        parent.img.destTop) / parent.img.destHeight;
+                }
+            }
+        }
+    }
+
+    private prevObjColl(): void {
+        const parent: ImageEditor = this.parent;
+        const object: Object = {currObj: {} as CurrentObject };
+        parent.notify('filter', { prop: 'getCurrentObj', onPropertyChange: false, value: {object: object }});
+        this.prevObj = object['currObj'];
+        this.prevObj.objColl = extend([], parent.objColl, [], true) as SelectionPoint[];
+        this.prevObj.pointColl = extend([], parent.pointColl, [], true) as Point[];
+        this.prevObj.afterCropActions = extend([], parent.afterCropActions, [], true) as string[];
+        const selPointCollObj: Object = {selPointColl: null };
+        parent.notify('freehand-draw', { prop: 'getSelPointColl', onPropertyChange: false,
+            value: {obj: selPointCollObj }});
+        this.prevObj.selPointColl = extend([], selPointCollObj['selPointColl'], [], true) as Point[];
+    }
+
+    private drawShapeText(text?: string, fontFamily?: string, fontSize?: number, bold?: boolean, italic?: boolean,
+                          strokeColor?: string, x?: number, y?: number, isSelected?: boolean, degree?: number, fillColor?: string,
+                          outlineColor?: string, outlineWidth?: number, transformCollection?: TransformationCollection[],
+                          underline?: boolean, strikethrough?: boolean): void {
+        const parent: ImageEditor = this.parent;
+        if (!parent.disabled && parent.isImageLoaded) {
+            if (parent.currObjType.shape === 'freehanddraw') {
+                this.apply();
+                parent.upperCanvas.style.cursor = parent.cursor = 'default';
+                parent.currObjType.shape = '';
+            }
+            parent.notify('draw', { prop: 'setImageEdited', onPropertyChange: false });
+            parent.togglePen = false; this.redrawActObj();
+            this.prevObjColl();
+            this.refreshActiveObj(); parent.activeObj.shape = parent.currObjType.shape = 'text';
+            parent.currObjType.isCustomCrop = false;
+            this.initializeTextShape(text, fontFamily, fontSize, bold, italic, underline, strikethrough, strokeColor, fillColor,
+                                     outlineColor, outlineWidth);
+            parent.currObjType.isText = parent.currObjType.isInitialText = true;
+            if (isNullOrUndefined(parent.activeObj.textSettings.fontSize)) {
+                parent.getFontSizes();
+                parent.activeObj.textSettings.fontSize = parseInt(parent.fontSizeColl[(parseInt('3', 10) - 1)].text, 10);
+            }
+            if (parent.img.destWidth < 100) {
+                parent.activeObj.textSettings.fontSize = Math.floor((parent.img.destWidth / 20));
+            } else if (parent.img.destHeight < 100) {
+                parent.activeObj.textSettings.fontSize = Math.floor((parent.img.destHeight / 20));
+            }
+            parent.activeObj.shapeDegree = parent.transform.degree;
+            parent.activeObj.shapeFlip = parent.transform.currFlipState;
+            parent.activeObj.flipObjColl = []; this.updateFontStyles();
+            parent.activeObj.order = this.getNewOrder();
+            let width: number = this.upperContext.measureText(parent.activeObj.textSettings.text).width +
+                parent.activeObj.textSettings.fontSize * 0.5;
+            let height: number = parent.activeObj.textSettings.fontSize;
+            if (text) {
+                parent.activeObj.keyHistory = text;
+                let maxText: string = this.getMaxText();
+                maxText = maxText ? maxText : parent.activeObj.textSettings.text;
+                width = this.upperContext.measureText(maxText).width + parent.activeObj.textSettings.fontSize * 0.5;
+                const rows: string[] = text.split('\n');
+                if (rows.length > 1) {
+                    height = rows.length * parent.activeObj.textSettings.fontSize;
+                    height += (fontSize * 0.25);
+                }
+            }
+            if (!isNullOrUndefined(x) && !isNullOrUndefined(y)) {
+                parent.activeObj.activePoint.startX = x; parent.activeObj.activePoint.startY = y;
+                parent.activeObj.activePoint.endX = parent.activeObj.activePoint.startX + width;
+                parent.activeObj.activePoint.endY = parent.activeObj.activePoint.startY + height;
+            } else {
+                this.setCenterPoints(true, width, height);
+            }
+            if (transformCollection) {
+                parent.notify('selection', { prop: 'setTransformedShape', onPropertyChange: false, value: {bool: true}});
+                this.setTransformColl(transformCollection);
+                const actObj: SelectionPoint = parent.activeObj;
+                actObj.shapeDegree = 0;
+                actObj.shapeFlip = '';
+                let tempDegree: number = 0;
+                // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                const coll: any = actObj.rotateFlipColl;
+                for (let i: number = 0; i < coll.length; i++) {
+                    if (typeof(coll[i as number]) === 'number') {
+                        tempDegree += coll[i as number];
+                    }
+                }
+                if (tempDegree % 90 === 0 && Math.abs(tempDegree) % 180 === 90) {
+                    actObj.activePoint.endX = actObj.activePoint.startX + height;
+                    actObj.activePoint.endY = actObj.activePoint.startY + width;
+                    actObj.activePoint.width = actObj.activePoint.endX - actObj.activePoint.startX;
+                    actObj.activePoint.height = actObj.activePoint.endY - actObj.activePoint.startY;
+                }
+            }
+            const obj: Object = {shapeSettingsObj: {} as ShapeSettings };
+            parent.notify('selection', { prop: 'updatePrevShapeSettings', onPropertyChange: false, value: {obj: obj}});
+            const shapeSettings: ShapeSettings = obj['shapeSettingsObj'];
+            const shapeChangingArgs: ShapeChangeEventArgs = {cancel: false, action: 'insert', previousShapeSettings: shapeSettings,
+                currentShapeSettings: shapeSettings};
+            parent.trigger('shapeChanging', shapeChangingArgs);
+            parent.editCompleteArgs = shapeChangingArgs;
+            this.drawShapeTextEvent(shapeChangingArgs);
+            if (degree) {
+                parent.activeObj.rotatedAngle = degree * (Math.PI / 180);
+                parent.notify('selection', { prop: 'updPtCollForShpRot', onPropertyChange: false, value: { obj: parent.activeObj } });
+                this.upperContext.clearRect(0, 0, parent.upperCanvas.width, parent.upperCanvas.height);
+                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: 'destroy-qa-toolbar', onPropertyChange: false });
+                parent.notify('toolbar', { prop: 'renderQAT', onPropertyChange: false, value: { isPenEdit: null } });
+            }
+            if (text && text.indexOf('\n') > -1 && parent.isPublicMethod) {
+                // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                const fontSizeInd: string = String((parent.fontSizeColl as any).findIndex(
+                    (item: { text: string; }) => item.text === String(parent.activeObj.textSettings.fontSize)) + 1);
+                parent.noPushUndo = true;
+                parent.updateFontSize('5');
+                if (parseInt(fontSizeInd, 10) > 0) {
+                    parent.updateFontSize(fontSizeInd);
+                }
+                parent.noPushUndo = false;
+            }
+            if (parent.isPublicMethod && !isSelected) {
+                parent.notify('undo-redo', {prop: 'updateUndoRedo', value: {operation: 'shapeInsert'}, onPropertyChange: false});
+            }
+            parent.isPublicMethod = false;
+        }
+    }
+
+    private drawShapeImageEvent(shapeChangingArgs: ShapeChangeEventArgs, isSelect: boolean): void {
+        const parent: ImageEditor = this.parent;
+        this.updateShapeChangeEventArgs(shapeChangingArgs.currentShapeSettings, shapeChangingArgs.allowShapeOverflow);
+        parent.notify('draw', { prop: 'drawObject', onPropertyChange: false, value: {canvas: 'duplicate' }});
+        parent.objColl.push(parent.activeObj);
+        const prevCropObj: CurrentObject = extend({}, parent.cropObj, {}, true) as CurrentObject;
+        parent.notify('undo-redo', { prop: 'updateUndoRedoColl', onPropertyChange: false,
+            value: {operation: 'shapeInsert', previousObj: this.prevObj, previousObjColl: this.prevObj.objColl,
+                previousPointColl: this.prevObj.pointColl, previousSelPointColl: this.prevObj.selPointColl, previousCropObj: prevCropObj,
+                previousText: null, currentText: null, previousFilter: null, isCircleCrop: null}});
+        parent.notify('selection', { prop: 'redrawShape', onPropertyChange: false,
+            value: {obj: parent.objColl[parent.objColl.length - 1]}});
+        if (isSelect) {
+            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});
+            parent.notify('toolbar', { prop: 'renderQAT', onPropertyChange: false, value: {isPenEdit: null} });
+        } else {
+            parent.okBtn(null, true);
+        }
+        parent.notify('selection', { prop: 'isShapeInserted', onPropertyChange: false, value: {bool: true} });
+    }
+
+    private setTransformColl(transformCollection: TransformationCollection[]): void {
+        const parent: ImageEditor = this.parent;
+        parent.activeObj.rotateFlipColl = [];
+        if (transformCollection) {
+            for (let i: number = 0; i < transformCollection.length; i++) {
+                if (transformCollection[i as number].degree) {
+                    parent.activeObj.rotateFlipColl.push(transformCollection[i as number].degree);
+                } else {
+                    parent.activeObj.rotateFlipColl.push(transformCollection[i as number].flip.toLowerCase());
+                }
+            }
+        }
+    }
+
+    private drawShapeTextEvent(shapeChangingArgs: ShapeChangeEventArgs): void {
+        const parent: ImageEditor = this.parent;
+        this.updateShapeChangeEventArgs(shapeChangingArgs.currentShapeSettings, shapeChangingArgs.allowShapeOverflow);
+        this.addLetter(parent.activeObj.textSettings.text);
+        parent.activeObj.textFlip = parent.transform.currFlipState;
+        this.updateFontRatio(parent.activeObj);
+        parent.objColl.push(parent.activeObj);
+        const prevCropObj: CurrentObject = extend({}, parent.cropObj, {}, true) as CurrentObject;
+        parent.notify('undo-redo', { prop: 'updateUndoRedoColl', onPropertyChange: false,
+            value: {operation: 'shapeInsert', previousObj: this.prevObj, previousObjColl: this.prevObj.objColl,
+                previousPointColl: this.prevObj.pointColl, previousSelPointColl: this.prevObj.selPointColl,
+                previousCropObj: prevCropObj, previousText: null, currentText: null, previousFilter: null, isCircleCrop: null}});
+        parent.notify('selection', { prop: 'redrawShape', onPropertyChange: false,
+            value: {obj: parent.objColl[parent.objColl.length - 1]}});
+        parent.notify('toolbar', { prop: 'renderQAT', onPropertyChange: false, value: {isPenEdit: null} });
+        parent.notify('selection', { prop: 'isShapeInserted', onPropertyChange: false, value: {bool: true} });
+        parent.notify('toolbar', { prop: 'refresh-toolbar', onPropertyChange: false, value: {type: 'text',
+            isApplyBtn: null, isCropping: null, isZooming: null, cType: null}});
+        parent.notify('toolbar', { prop: 'update-toolbar-items', onPropertyChange: false});
+    }
+
+    private initializeTextShape(
+        text?: string, fontFamily?: string, fontSize?: number, bold?: boolean, italic?: boolean,
+        underline?: boolean, strikethrough?: boolean, strokeColor?: string, fillColor?: string, outlineColor?: string, outlineWidth?: number
+    ): void {
+        const parent: ImageEditor = this.parent;
+        this.keyHistory = ''; parent.upperCanvas.style.display = 'block';
+        parent.activeObj.strokeSettings.strokeColor = strokeColor || parent.activeObj.strokeSettings.strokeColor;
+        parent.activeObj.strokeSettings.fillColor = fillColor || parent.activeObj.strokeSettings.fillColor;
+        parent.activeObj.textSettings.text = text || parent.activeObj.textSettings.text;
+        parent.activeObj.textSettings.fontFamily = fontFamily || parent.activeObj.textSettings.fontFamily;
+        parent.activeObj.textSettings.fontSize = fontSize || parent.activeObj.textSettings.fontSize;
+        parent.activeObj.textSettings.bold = bold || parent.activeObj.textSettings.bold;
+        parent.activeObj.textSettings.italic = italic || parent.activeObj.textSettings.italic;
+        parent.activeObj.textSettings.underline = underline || parent.activeObj.textSettings.underline;
+        parent.activeObj.textSettings.strikethrough = strikethrough || parent.activeObj.textSettings.strikethrough;
+        parent.activeObj.strokeSettings.outlineColor = outlineColor || parent.activeObj.strokeSettings.outlineColor;
+        parent.activeObj.strokeSettings.outlineWidth = outlineWidth || parent.activeObj.strokeSettings.outlineWidth;
+    }
+
+    private drawImage(x: number, y: number, width: number, height: number, src: string | ImageData, degree: number,
+                      isAspectRatio: boolean, opacity?: number, isSelected?: boolean): void {
+        this.initializeShape('image');
+        this.onLoadImgShape(x, y, width, height, src, null, degree, isAspectRatio, opacity, isSelected);
+    }
+
+    private redrawActObj(x?: number, y?: number, isMouseDown?: boolean): void {
+        let splitWords: string[];
+        const parent: ImageEditor = this.parent;
+        if (parent.activeObj.shape) {splitWords = parent.activeObj.shape.split('-'); }
+        if (parent.activeObj.horTopLine && (parent.activeObj.shape && splitWords[0] !== 'crop')) {
+            if (parent.textArea.style.display === 'block' || parent.textArea.style.display === 'inline-block') {
+                parent.notify('selection', { prop: 'setTextBoxStylesToActObj', onPropertyChange: false });
+                this.updateFontRatio(parent.activeObj, true);
+                if (x && y) {
+                    if ((x !== parent.activeObj.activePoint.startX) && (y !== parent.activeObj.activePoint.startY)) {
+                        this.updateTextFromTextArea();
+                    }
+                } else {
+                    this.updateTextFromTextArea();
+                    parent.textArea.style.transform = '';
+                    parent.notify('toolbar', { prop: 'refresh-main-toolbar', onPropertyChange: false});
+                }
+                this.refreshActiveObj();
+            } else {
+                this.applyActObj(isMouseDown);
+            }
+        }
+    }
+
+    private apply(shape?: string, obj?: SelectionPoint, canvas?: string): void {
+        const parent: ImageEditor = this.parent;
+        if (!parent.disabled) {
+            if (parent.togglePen && !parent.currObjType.isCustomCrop) {
+                const destLeft: number = parent.img.destLeft; const destTop: number = parent.img.destTop;
+                const destWidth: number = parent.img.destWidth; const destHeight: number = parent.img.destHeight;
+                parent.notify('draw', { prop: 'callUpdateCurrTransState', onPropertyChange: false});
+                const temp: string = this.lowerContext.filter; this.lowerContext.filter = 'none';
+                parent.togglePen = false;
+                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}});
+                }
+                parent.img.destLeft = destLeft; parent.img.destTop = destTop; parent.img.destWidth = destWidth;
+                parent.img.destHeight = destHeight; this.lowerContext.filter = temp;
+            }
+            else {
+                canvas = canvas ? canvas : 'original';
+                if (isNullOrUndefined(parent.activeObj.shape) && isNullOrUndefined(shape)) {
+                    parent.currObjType.shape = '';
+                } else {
+                    parent.currObjType.shape = shape || parent.currObjType.shape;
+                }
+                if (parent.currObjType.shape !== '') {
+                    this.upperContext.clearRect(0, 0, parent.upperCanvas.width, parent.upperCanvas.height);
+                    if (parent.activeObj.shape === 'text') {
+                        parent.notify('draw', { prop: 'drawObject', onPropertyChange: false, value: {canvas: canvas, obj: obj, isCropRatio: null,
+                            points: null, isPreventDrag: true, saveContext: null, isPreventSelection: null} });
+                    } else {
+                        parent.notify('draw', { prop: 'drawObject', onPropertyChange: false, value: {canvas: canvas, obj: obj} });
+                    }
+                    parent.activeObj.shape = parent.currObjType.shape.toLowerCase();
+                    if (!shape && parent.currObjType.shape !== '' && !parent.currObjType.isCustomCrop) {
+                        parent.objColl.push(extend({}, parent.activeObj, {}, true) as SelectionPoint);
+                    }
+                    this.keyHistory = '';
+                }
+            }
+        }
+    }
+
+    private setCenterPoints(text?: boolean, width?: number, height?: number): void {
+        const parent: ImageEditor = this.parent;
+        let renderWidth: number; let renderHeight: number;
+        if (text && width && height) { renderWidth = width; renderHeight = height; }
+        else {renderWidth = parent.activeObj.activePoint.width; renderHeight = parent.activeObj.activePoint.height; }
+        parent.activeObj.activePoint.startX = (parent.lowerCanvas.width / 2) - renderWidth / 2;
+        parent.activeObj.activePoint.startY = (parent.lowerCanvas.height / 2) - renderHeight / 2;
+        parent.activeObj.activePoint.endX = (parent.lowerCanvas.width / 2) + renderWidth / 2;
+        parent.activeObj.activePoint.endY = (parent.lowerCanvas.height / 2) + renderHeight / 2;
+    }
+
+    private updSelChangeEventArgs(selectionSettings: CropSelectionSettings): void {
+        const parent: ImageEditor = this.parent;
+        parent.activeObj.activePoint = { startX: selectionSettings.startX, startY: selectionSettings.startY,
+            endX: parent.activeObj.activePoint.startX + parent.activeObj.activePoint.width,
+            endY: parent.activeObj.activePoint.startY + parent.activeObj.activePoint.height,
+            width: selectionSettings.width, height: selectionSettings.height };
+        parent.activeObj.activePoint.endX = parent.activeObj.activePoint.startX + parent.activeObj.activePoint.width;
+        parent.activeObj.activePoint.endY = parent.activeObj.activePoint.startY + parent.activeObj.activePoint.height;
+    }
+
+    private updateShapeChangeEventArgs(shapeSettings: ShapeSettings, allowShapeOverflow: boolean): void {
+        const parent: ImageEditor = this.parent; let shapeId: number;
+        if (shapeSettings.id && shapeSettings.id.indexOf('shape_') === -1 &&
+            shapeSettings.id.indexOf('pen_') === -1) {
+            if (parent.activeObj.currIndex) {
+                parent.activeObj.currIndex = 'shape_' + shapeSettings.id;
+            } else {
+                parent.pointColl[shapeId as number].id = 'pen_' + shapeSettings.id;
+            }
+        }
+        if (shapeSettings.id && shapeSettings.id.split('_')[0] && shapeSettings.id.split('_')[0] === 'pen') {
+            shapeId = parseInt(shapeSettings.id.split('_')[1], 10) - 1;
+            parent.pointColl[shapeId as number].points = shapeSettings.points;
+            parent.pointColl[shapeId as number].strokeColor = shapeSettings.strokeColor;
+            parent.pointColl[shapeId as number].strokeWidth = shapeSettings.strokeWidth;
+            parent.pointColl[shapeId as number].opacity = shapeSettings.opacity;
+            if (shapeSettings.index) {
+                parent.pointColl[shapeId as number].order = shapeSettings.index;
+            }
+        } else {
+            parent.activeObj.activePoint.startX = shapeSettings.startX;
+            parent.activeObj.activePoint.startY = shapeSettings.startY;
+            if (shapeSettings.width && shapeSettings.height) {
+                parent.activeObj.activePoint.width = shapeSettings.width;
+                parent.activeObj.activePoint.height = shapeSettings.height;
+                parent.activeObj.activePoint.endX = parent.activeObj.activePoint.startX + parent.activeObj.activePoint.width;
+                parent.activeObj.activePoint.endY = parent.activeObj.activePoint.startY + parent.activeObj.activePoint.height;
+            }
+            if (parent.activeObj.shape !== 'text') {
+                parent.activeObj.strokeSettings.strokeColor = shapeSettings.strokeColor;
+                parent.activeObj.strokeSettings.strokeWidth = shapeSettings.strokeWidth;
+            }
+            parent.activeObj.strokeSettings.fillColor = shapeSettings.fillColor;
+            parent.activeObj.opacity = shapeSettings.opacity;
+            if (shapeSettings.index) {
+                parent.activeObj.order = shapeSettings.index;
+            }
+            parent.activeObj.preventShapeDragOut = !allowShapeOverflow;
+            if (isNullOrUndefined(shapeSettings.degree)) { shapeSettings.degree = 0; }
+            switch (parent.activeObj.shape) {
+            case 'ellipse':
+                parent.activeObj.activePoint.width = shapeSettings.radiusX * 2;
+                parent.activeObj.activePoint.height = shapeSettings.radiusY * 2;
+                parent.activeObj.activePoint.endX = parent.activeObj.activePoint.startX + parent.activeObj.activePoint.width;
+                parent.activeObj.activePoint.endY = parent.activeObj.activePoint.startY + parent.activeObj.activePoint.height;
+                if (shapeSettings.degree) {
+                    parent.activeObj.rotatedAngle = shapeSettings.degree * (Math.PI / 180);
+                }
+                break;
+            case 'line':
+            case 'arrow':
+                parent.activeObj.activePoint.width = shapeSettings.length;
+                parent.activeObj.activePoint.endX = shapeSettings.endX;
+                parent.activeObj.activePoint.endY = shapeSettings.endY;
+                parent.activeObj.activePoint.width = parent.activeObj.activePoint.startX + parent.activeObj.activePoint.width;
+                parent.activeObj.activePoint.height = parent.activeObj.activePoint.startY + parent.activeObj.activePoint.height;
+                if (parent.activeObj.shape === 'arrow') {
+                    parent.activeObj.start = this.getArrowType(shapeSettings.arrowHead);
+                    parent.activeObj.end = this.getArrowType(shapeSettings.arrowTail);
+                }
+                break;
+            case 'text':
+                parent.activeObj.keyHistory = parent.activeObj.textSettings.text = shapeSettings.text;
+                parent.activeObj.textSettings.fontSize = shapeSettings.fontSize;
+                parent.activeObj.strokeSettings.strokeColor = shapeSettings.color;
+                parent.activeObj.strokeSettings.outlineColor = shapeSettings.strokeColor;
+                parent.activeObj.strokeSettings.outlineWidth = shapeSettings.strokeWidth;
+                parent.activeObj.strokeSettings.fillColor = shapeSettings.fillColor;
+                parent.activeObj.textSettings.fontFamily = shapeSettings.fontFamily;
+                this.setTransformColl(shapeSettings.transformCollection);
+                if (shapeSettings.degree) {
+                    parent.activeObj.rotatedAngle = shapeSettings.degree * (Math.PI / 180);
+                }
+                this.updateFontRatio(parent.activeObj);
+                break;
+            case 'rectangle':
+            case 'image':
+                if (shapeSettings.degree) {
+                    parent.activeObj.rotatedAngle = shapeSettings.degree * (Math.PI / 180);
+                }
+                // Prevented setting image src as it cannot be set in canvas
+                break;
+            case 'path':
+                parent.activeObj.pointColl = shapeSettings.points;
+                break;
+            }
+            if (parent.activeObj.shape === 'text' && parent.activeObj.textSettings) {
+                parent.activeObj.textSettings.bold = false; parent.activeObj.textSettings.italic = false;
+                parent.activeObj.textSettings.underline = false; parent.activeObj.textSettings.strikethrough = false;
+                for (let i: number = 0; i < shapeSettings.fontStyle.length; i++) {
+                    switch (shapeSettings.fontStyle[i as number]) {
+                    case 'bold':
+                        parent.activeObj.textSettings.bold = true;
+                        break;
+                    case 'italic':
+                        parent.activeObj.textSettings.italic = true;
+                        break;
+                    case 'underline':
+                        parent.activeObj.textSettings.underline = true;
+                        break;
+                    case 'strikethrough':
+                        parent.activeObj.textSettings.strikethrough = true;
+                        break;
+                    }
+                }
+            }
+        }
+    }
+
+    private addLetter(letter: string): void {
+        const parent: ImageEditor = this.parent;
+        if (parent.textArea.style.display === 'none' && (parent.currObjType.isText || parent.activeObj.shape === 'text')) {
+            const {fontSize} : TextSettings = parent.activeObj.textSettings;
+            if (letter === 'Backspace') {this.keyHistory = this.keyHistory.slice(0, -1); }
+            else {this.keyHistory += letter; }
+            this.upperContext.clearRect(0, 0, parent.upperCanvas.width, parent.upperCanvas.height);
+            this.updateFontStyles();
+            const width: number = this.upperContext.measureText(this.keyHistory).width + fontSize * 0.5;
+            const height: number = fontSize * 1.18;
+            this.upperContext.fillText(this.keyHistory, parent.activeObj.activePoint.startX,
+                                       parent.activeObj.activePoint.startY + fontSize);
+            this.upperContext.clearRect(0, 0, parent.upperCanvas.width, parent.upperCanvas.height);
+            parent.currObjType.isText = true;
+            parent.notify('selection', { prop: 'setActivePoint', onPropertyChange: false,
+                value: {startX: width, startY: height}});
+        }
+    }
+
+    private redrawText(): void {
+        const parent: ImageEditor = this.parent;
+        const {fontSize, fontFamily, bold, italic } : TextSettings = parent.activeObj.textSettings;
+        let fontStyle: string = '';
+        if (bold) {
+            fontStyle += 'bold ';
+        }
+        if (italic) {
+            fontStyle += 'italic ';
+        }
+        this.upperContext.font = fontStyle + fontSize + 'px ' + fontFamily;
+        const rows: string[] = parent.activeObj.keyHistory.split('\n');
+        const text: string = (parent.textArea.style.display === 'block' || parent.textArea.style.display === 'inline-block') ?
+            this.getMaxText(true) : this.getMaxText();
+        const width: number = this.upperContext.measureText(text).width + fontSize * 0.5;
+        let height: number = rows.length * fontSize * 1.18;
+        if (rows.length > 1) {height += (fontSize * 0.50); }
+        parent.notify('selection', { prop: 'setTextSelection', onPropertyChange: false,
+            value: {width: width, height: height}});
+        parent.notify('draw', { prop: 'updateActiveObject', onPropertyChange: false, value: {actPoint: parent.activeObj.activePoint, obj: parent.activeObj,
+            isMouseMove: null, x: null, y: null}});
+        parent.notify('selection', { prop: 'redrawShape', onPropertyChange: false,
+            value: {obj: parent.activeObj}});
+    }
+
+    private updateTextFromTextArea(): void {
+        const parent: ImageEditor = this.parent; let allowUndoRedo: boolean = false;
+        const { fontSize } : TextSettings = parent.activeObj.textSettings;
+        const tempActiveObj: SelectionPoint = extend({}, parent.activeObj, {}, true) as SelectionPoint;
+        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 (parent.activeObj.keyHistory !== parent.textArea.value) {
+            allowUndoRedo = true;
+        }
+        parent.activeObj.keyHistory = parent.textArea.value; parent.textArea.style.display = 'none';
+        parent.textArea.value = ''; this.updateFontStyles();
+        let width: number = this.upperContext.measureText(parent.activeObj.keyHistory).width + fontSize * 0.5;
+        let height: number = fontSize * 1.18;
+        const rows: string[] = parent.activeObj.keyHistory.split('\n');
+        if (rows.length > 1) {
+            height *= rows.length;
+            height += (fontSize * 0.1 * rows.length);
+            const widthColl: number[] = [];
+            for (let i: number = 0, len: number = rows.length; i < len; i++) {
+                widthColl.push(this.upperContext.measureText(rows[i as number]).width + fontSize * 0.5);
+            }
+            width = Math.max(...widthColl);
+        }
+        parent.notify('selection', { prop: 'setTextSelection', onPropertyChange: false,
+            value: {width: width, height: height}});
+        if (parent.activeObj.rotatedAngle !== 0) {
+            const width: number = parent.activeObj.activePoint.width - tempActiveObj.activePoint.width;
+            const height: number = parent.activeObj.activePoint.height - tempActiveObj.activePoint.height;
+            let value: string = '';
+            if (width > 0 && height > 0) {
+                value = 'widthHeight';
+            } else if (width !== 0) {
+                value = 'width';
+            } else if (height !== 0) {
+                value = 'height';
+            }
+            parent.activeObj.activePoint = extend({}, tempActiveObj.activePoint, {}, true) as ActivePoint;
+            parent.notify('selection', { prop: 'adjustRotationPoints', onPropertyChange: false, value: { rectangle: parent.activeObj.activePoint,
+                x: width, y: height, angle: parent.activeObj.rotatedAngle, type: 'text', elem: value }});
+            parent.notify('shape', { prop: 'updateFontSize', onPropertyChange: false,
+                value: {obj: parent.activeObj}});
+        }
+        parent.notify('draw', { prop: 'updateActiveObject', onPropertyChange: false, value: {actPoint: parent.activeObj.activePoint, obj: parent.activeObj,
+            isMouseMove: null, x: null, y: null}});
+        this.updImgRatioForActObj();
+        if  (parent.activeObj.rotatedAngle !== 0) {
+            parent.notify('selection', {prop: 'updPtCollForShpRot', onPropertyChange: false, value: {obj: parent.activeObj }});
+        }
+        if (allowUndoRedo) {
+            this.apply(parent.activeObj.shape, parent.activeObj);
+            parent.objColl.push(extend({}, parent.activeObj, {}, true) as SelectionPoint);
+            parent.notify('undo-redo', { prop: 'updateUndoRedoColl', onPropertyChange: false,
+                value: {operation: 'text', previousObj: prevObj, previousObjColl: prevObj.objColl,
+                    previousPointColl: prevObj.pointColl, previousSelPointColl: prevObj.selPointColl,
+                    previousCropObj: prevCropObj, previousText: parent.activeObj.keyHistory,
+                    currentText: parent.textArea.value, previousFilter: null, isCircleCrop: null}});
+        } else {
+            this.apply(parent.activeObj.shape, parent.activeObj);
+            parent.objColl.push(extend({}, parent.activeObj, {}, true) as SelectionPoint);
+        }
+    }
+
+    private iterateObjColl(): void {
+        const parent: ImageEditor = this.parent;
+        if (parent.objColl.length > 0) {
+            let index: number = this.getSmallestIndex();
+            const objColl: SelectionPoint[] = extend([], parent.objColl, [], true) as SelectionPoint[];
+            while (objColl.length > 0) {
+                let found: boolean = false;
+                for (let i: number = 0; i < objColl.length; i++) {
+                    const currentObj: SelectionPoint = objColl[i as number];
+                    if (isNullOrUndefined(currentObj.order)) {
+                        objColl.splice(i, 1);
+                        i--;
+                        continue;
+                    }
+                    if (currentObj.order === index) {
+                        this.apply(currentObj.shape, currentObj);
+                        if (currentObj.shape === 'redact' && JSON.stringify(currentObj.activePoint) === JSON.stringify(parent.activeObj.activePoint) &&
+                            currentObj.redactImage !== parent.activeObj.redactImage) {
+                            currentObj.redactImage = parent.activeObj.redactImage;
+                            if (parent.objColl[i as number] && JSON.stringify(parent.objColl[i as number].activePoint) ===
+                                JSON.stringify(currentObj.activePoint)) {
+                                parent.objColl[i as number].redactImage = parent.activeObj.redactImage;
+                            }
+                        }
+                        this.refreshActiveObj();
+                        index++;
+                        if (!this.isIndexInObjColl(index)) {index++; }
+                        objColl.splice(i, 1);
+                        found = true;
+                        break; // Exit the loop to start from the beginning
+                    }
+                }
+                if (!found) {
+                    break; // If no matching order was found, exit the loop
+                }
+            }
+        }
+    }
+
+    private getSmallestIndex(): number {
+        const parent: ImageEditor = this.parent;
+        let smallestIndex: number;
+        for (let i: number = 0, len: number = parent.objColl.length; i < len; i++) {
+            const currentObj: SelectionPoint = parent.objColl[i as number];
+            if (isNullOrUndefined(currentObj.order)) {
+                continue;
+            }
+            if (isNullOrUndefined(smallestIndex) || currentObj.order < smallestIndex) {
+                smallestIndex = currentObj.order;
+            }
+        }
+        return smallestIndex;
+    }
+
+    private isIndexInObjColl(index: number): boolean {
+        const parent: ImageEditor = this.parent;
+        for (let i: number = 0, len: number = parent.objColl.length; i < len; i++) {
+            const currentObj: SelectionPoint = parent.objColl[i as number];
+            if (isNullOrUndefined(currentObj.order)) {
+                continue;
+            }
+            if (currentObj.order === index) {
+                return true;
+            }
+        }
+        return false;
+    }
+
+    private updImgRatioForActObj(): void {
+        const parent: ImageEditor = this.parent;
+        const destPoints: ActivePoint = {startX: parent.img.destLeft, startY: parent.img.destTop,
+            width: parent.img.destWidth, height: parent.img.destHeight};
+        this.straightenShapes();
+        const { destLeft, destTop, destWidth, destHeight } = parent.img;
+        const activePoint: ActivePoint = parent.activeObj.activePoint;
+        parent.activeObj.imageRatio = { startX: ((activePoint.startX - destLeft) /
+            destWidth), startY: ((activePoint.startY - destTop) / destHeight),
+        endX: ((activePoint.endX - destLeft) / destWidth),
+        endY: ((activePoint.endY - destTop) / destHeight),
+        width: destWidth / activePoint.width, height: destHeight / activePoint.height };
+        if (parent.activeObj.rotationCirclePointColl) {
+            parent.activeObj.rotationCirclePointColl.ratioX = (parent.activeObj.rotationCirclePointColl.x -
+                destLeft) / destWidth;
+            parent.activeObj.rotationCirclePointColl.ratioY = (parent.activeObj.rotationCirclePointColl.y -
+                destTop) / destHeight;
+        }
+        if (parent.activeObj.shape === 'path') {this.updatePathRatio(parent.activeObj); }
+        else if (parent.activeObj.shape === 'arrow') {this.updateArrowRatio(parent.activeObj); }
+        parent.img.destLeft = destPoints.startX; parent.img.destTop = destPoints.startY;
+        parent.img.destWidth = destPoints.width; parent.img.destHeight = destPoints.height;
+    }
+
+    private zoomObjColl(preventApply?: boolean): void {
+        const parent: ImageEditor = this.parent;
+        const destPoints: ActivePoint = {startX: parent.img.destLeft, startY: parent.img.destTop,
+            width: parent.img.destWidth, height: parent.img.destHeight};
+        this.straightenShapes();
+        if (parent.objColl.length > 0) {
+            for (let i: number = 0, len: number = parent.objColl.length; i < len; i++) {
+                let currObj: SelectionPoint = parent.objColl[i as number];
+                if (currObj.imageRatio) {
+                    currObj.activePoint.startX = (currObj.imageRatio.startX * parent.img.destWidth) + parent.img.destLeft;
+                    currObj.activePoint.startY = (currObj.imageRatio.startY * parent.img.destHeight) + parent.img.destTop;
+                    currObj.activePoint.endX = (currObj.imageRatio.endX * parent.img.destWidth) + parent.img.destLeft;
+                    currObj.activePoint.endY = (currObj.imageRatio.endY * parent.img.destHeight) + parent.img.destTop;
+                }
+                currObj = this.updateWidthHeight(currObj);
+                if (currObj.shape === 'text') {
+                    this.updateFontSize(currObj);
+                } else if (currObj.shape === 'line' || currObj.shape === 'arrow') {
+                    currObj.pointColl = this.getLinePoints(currObj.activePoint.startX, currObj.activePoint.startY, currObj.activePoint.endX,
+                                                           currObj.activePoint.endY);
+                    for (let n: number = 0, len: number = currObj.pointColl.length; n < len; n++) {
+                        currObj.pointColl[n as number].ratioX =
+                            (currObj.pointColl[n as number].x - parent.img.destLeft) / parent.img.destWidth;
+                        currObj.pointColl[n as number].ratioY =
+                            (currObj.pointColl[n as number].y - parent.img.destTop) / parent.img.destHeight;
+                    }
+                    if (currObj.shape === 'arrow') {
+                        this.updateArrowSize(currObj);
+                    }
+                    if (parent.transform.straighten !== 0 && (currObj.shape === 'line' || currObj.shape === 'arrow')) {
+                        this.straightenShapePoints(currObj);
+                    }
+                } else if (currObj.shape === 'path') {
+                    for (let l: number = 0, len: number = currObj.pointColl.length; l < len; l++) {
+                        currObj.pointColl[l as number].x = (currObj.pointColl[l as number].ratioX * parent.img.destWidth) +
+                            parent.img.destLeft;
+                        currObj.pointColl[l as number].y = (currObj.pointColl[l as number].ratioY * parent.img.destHeight) +
+                            parent.img.destTop;
+                    }
+                    this.updatePathRatio(currObj);
+                    if (parent.transform.straighten !== 0) {
+                        this.straightenPath(currObj);
+                    }
+                }
+                parent.notify('draw', { prop: 'updateActiveObject', onPropertyChange: false, value: {actPoint: currObj.activePoint,
+                    obj: currObj}});
+                if (currObj.shape !== 'line' && currObj.shape !== 'arrow' && currObj.shape !== 'path' && currObj.rotatedAngle !== 0) {
+                    this.setPointCollForShapeRotation(currObj);
+                    currObj.rotationCirclePoint.x =
+                        (currObj.rotationCirclePoint.ratioX * parent.img.destWidth) + parent.img.destLeft;
+                    currObj.rotationCirclePoint.y =
+                        (currObj.rotationCirclePoint.ratioY * parent.img.destHeight) + parent.img.destTop;
+                    if (currObj.rotationCirclePointColl) {
+                        currObj.rotationCirclePointColl.x =
+                            (currObj.rotationCirclePointColl.ratioX * parent.img.destWidth) + parent.img.destLeft;
+                        currObj.rotationCirclePointColl.y =
+                            (currObj.rotationCirclePointColl.ratioY * parent.img.destHeight) + parent.img.destTop;
+                    }
+                }
+            }
+            if (isNullOrUndefined(preventApply)) {
+                const temp: string = this.lowerContext.filter; this.lowerContext.filter = 'none';
+                this.iterateObjColl();
+                this.lowerContext.filter = temp;
+            }
+        }
+        parent.img.destLeft = destPoints.startX; parent.img.destTop = destPoints.startY;
+        parent.img.destWidth = destPoints.width; parent.img.destHeight = destPoints.height;
+    }
+
+    private straightenPath(obj: SelectionPoint): void {
+        let point: Point;
+        for (let j: number = 0, len: number = obj.pointColl.length; j < len; j++) {
+            point = this.straightenPoints(obj.pointColl[j as number].x, obj.pointColl[j as number].y);
+            obj.pointColl[j as number].x = point.x;
+            obj.pointColl[j as number].y = point.y;
+        }
+    }
+
+    private straightenFHD(): void {
+        const parent: ImageEditor = this.parent;
+        for (let i: number = 0, fLen: number = parent.freehandCounter; i < fLen; i++) {
+            parent.points = extend([], parent.pointColl[i as number].points, []) as Point[];
+            const len: number = parent.points.length; let point: Point;
+            for (let l: number = 0; l < len; l++) {
+                point = this.straightenPoints(parent.points[l as number].x, parent.points[l as number].y);
+                parent.points[l as number].x = point.x; parent.points[l as number].y = point.y;
+            }
+        }
+        const selPointCollObj: Object = {selPointColl: null };
+        parent.notify('freehand-draw', { prop: 'getSelPointColl', onPropertyChange: false, value: {obj: selPointCollObj }});
+        for (let i: number = 0, fLen: number = parent.freehandCounter; i < fLen; i++) {
+            if (selPointCollObj['selPointColl'][i as number] && selPointCollObj['selPointColl'][i as number].points) {
+                const len: number = selPointCollObj['selPointColl'][i as number].points.length; let point: Point;
+                for (let l: number = 0; l < len; l++) {
+                    point = this.straightenPoints(selPointCollObj['selPointColl'][i as number].points[l as number].x,
+                                                  selPointCollObj['selPointColl'][i as number].points[l as number].y);
+                    selPointCollObj['selPointColl'][i as number].points[l as number].x = point.x;
+                    selPointCollObj['selPointColl'][i as number].points[l as number].y = point.y;
+                }
+            }
+        }
+        const straightenObj: Object = { straightenPoint: null };
+        parent.notify('freehand-draw', { prop: 'getStraightenPoint', onPropertyChange: false, value: {obj: straightenObj }});
+        if (straightenObj['straightenPoint']['x'] && straightenObj['straightenPoint']['y']) {
+            const obj: Object = {angle: 0 };
+            parent.notify('freehand-draw', { prop: 'getStraightenPointAngle', onPropertyChange: false, value: {obj: obj }});
+            const angle: number = (((parent.transform.straighten === 360 ? 0 : parent.transform.straighten) - obj['angle']) * (Math.PI / 180));
+            const point: Point = this.straightenPoints(straightenObj['straightenPoint']['x'], straightenObj['straightenPoint']['y'], angle);
+            if (angle === 0) {
+                point.x = straightenObj['straightenPoint']['x']; point.y = straightenObj['straightenPoint']['y'];
+            }
+            parent.notify('freehand-draw', { prop: 'setStraightenPoint', onPropertyChange: false, value: {x: point.x, y: point.y }});
+        }
+    }
+
+    private straightenPoints(x: number, y: number, angle?: number): Point {
+        const parent: ImageEditor = this.parent;
+        const center: Point = {x: parent.img.destLeft + (parent.img.destWidth / 2), y: parent.img.destTop + (parent.img.destHeight / 2)};
+        angle = angle ? angle : ((parent.transform.straighten) * (Math.PI / 180));
+        const point: Point = { x: Math.cos(angle) * (x - center.x) - Math.sin(angle) * (y - center.y) + center.x,
+            y: Math.sin(angle) * (x - center.x) + Math.cos(angle) * (y - center.y) + center.y };
+        return point;
+    }
+
+    private straightenShapes(): void {
+        const parent: ImageEditor = this.parent;
+        const { destLeft, destTop, destWidth, destHeight } = parent.img;
+        const straightenObj: Object = {bool: parent.isStraightening };
+        if (!straightenObj['bool'] || parent.transform.straighten === 0) {
+            return;
+        }
+        parent.notify('draw', {prop: 'updateImgCanvasPoints'});
+        const object: Object = {points: null };
+        parent.notify('draw', {prop: 'getImageCanvasPoints', value: {obj: object }});
+        const center: Point = {x: destLeft + (destWidth / 2), y: destTop + (destHeight / 2)};
+        const angle: number = -((parent.transform.straighten) * (Math.PI / 180));
+        const p1: Point = { x: Math.cos(angle) * (object['points'][0]['x'] - center.x) - Math.sin(angle) *
+            (object['points'][0]['y'] - center.y) + center.x,
+        y: Math.sin(angle) * (object['points'][0]['x'] - center.x) + Math.cos(angle) *
+            (object['points'][0]['y'] - center.y) + center.y };
+        const p2: Point = { x: Math.cos(angle) * (object['points'][1]['x'] - center.x) - Math.sin(angle) *
+            (object['points'][1]['y'] - center.y) + center.x,
+        y: Math.sin(angle) * (object['points'][1]['x'] - center.x) + Math.cos(angle) * (object['points'][1]['y']
+            - center.y) + center.y };
+        const p3: Point = { x: Math.cos(angle) * (object['points'][2]['x'] - center.x) - Math.sin(angle) *
+            (object['points'][2]['y'] - center.y) + center.x,
+        y: Math.sin(angle) * (object['points'][2]['x'] - center.x) + Math.cos(angle) * (object['points'][2]['y']
+            - center.y) + center.y };
+        parent.img.destWidth = p2.x - p1.x; parent.img.destHeight = p3.y - p2.y;
+        parent.img.destLeft = p1.x; parent.img.destTop = p1.y;
+    }
+
+    private straightenShapePoints(obj: SelectionPoint, isReverse?: boolean): void {
+        const parent: ImageEditor = this.parent;
+        const { destLeft, destTop, destWidth, destHeight } = parent.img;
+        const straightenObj: Object = {bool: parent.isStraightening };
+        if (!straightenObj['bool']) {
+            return;
+        }
+        if (obj.shape === 'line' || obj.shape === 'arrow') {
+            obj.activePoint.width = obj.activePoint.endX > obj.activePoint.startX ? obj.activePoint.endX -
+                obj.activePoint.startX : obj.activePoint.startX - obj.activePoint.endX;
+            obj.activePoint.height = obj.activePoint.endY > obj.activePoint.startY ? obj.activePoint.endY -
+                obj.activePoint.startY : obj.activePoint.startY - obj.activePoint.endY;
+            const center: Point = {x: destLeft + (destWidth / 2), y: destTop + (destHeight / 2)};
+            const angle: number = (isReverse ? -parent.transform.straighten : parent.transform.straighten) * (Math.PI / 180);
+            const start: Point = { x: Math.cos(angle) * (obj.activePoint.startX - center.x) - Math.sin(angle) *
+                (obj.activePoint.startY - center.y) + center.x, y: Math.sin(angle) * (obj.activePoint.startX - center.x) + Math.cos(angle)
+                * (obj.activePoint.startY - center.y) + center.y };
+            const end: Point = { x: Math.cos(angle) * (obj.activePoint.endX - center.x) -
+                Math.sin(angle) * (obj.activePoint.endY - center.y) + center.x, y: Math.sin(angle) * (obj.activePoint.endX  - center.x) +
+                Math.cos(angle) * (obj.activePoint.endY - center.y) + center.y };
+            obj.activePoint.startX = start.x; obj.activePoint.startY = start.y;
+            obj.activePoint.endX = end.x; obj.activePoint.endY = end.y;
+            obj.activePoint.width = obj.activePoint.endX > obj.activePoint.startX ? obj.activePoint.endX -
+                obj.activePoint.startX : obj.activePoint.startX - obj.activePoint.endX;
+            obj.activePoint.height = obj.activePoint.endY > obj.activePoint.startY ? obj.activePoint.endY -
+                obj.activePoint.startY : obj.activePoint.startY - obj.activePoint.endY;
+            parent.notify('selection', { prop: 'adjustActObjForLineArrow', onPropertyChange: false, value: {obj: obj }});
+        }
+    }
+
+    private redrawObj(degree?: number | string): void {
+        const parent: ImageEditor = this.parent;
+        let isShape: boolean = false;
+        if (parent.objColl.length > 0) {
+            if (degree === 'horizontal' || degree === 'vertical' || degree === 'Horizontal' || degree === 'Vertical' ||
+            degree === 'horizontalVertical' || degree === 'verticalHorizontal') {
+                this.updateCurrentActiveObjPoint((degree as string).toLowerCase());
+            } else if (typeof(degree) === 'number') {
+                this.updateCurrentActiveObjPoint(degree); 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%)';
+                for (let i: number = 0, len: number = parent.objColl.length; i < len; i++) {
+                    const splitWords: string[] = parent.objColl[i as number].shape.split('-');
+                    if (splitWords[0] !== 'crop') {
+                        this.apply(parent.objColl[i as number].shape, parent.objColl[i as number]);
+                        isShape = true;
+                    }
+                }
+                if (isShape) {
+                    parent.notify('draw', {prop: 'applyFrame', value: {ctx: this.lowerContext, frame: parent.frameObj.type, preventImg: true}});
+                }
+                this.lowerContext.filter = tempFilter;
+            }
+        }
+    }
+
+    private updateCurrentActiveObjPoint(degree: number | string): void {
+        const parent: ImageEditor = this.parent;
+        let currActObjIndex: number; const { destLeft, destTop, destWidth, destHeight } = parent.img;
+        for (let index: number = 0, len: number = parent.objColl.length; index < len; index++) {
+            const currObj: SelectionPoint = parent.objColl[index as number];
+            if (parent.activeObj.shape === currObj.shape &&
+                parent.activeObj.activePoint.startX === currObj.activePoint.startX &&
+                parent.activeObj.activePoint.startY === currObj.activePoint.startY &&
+                parent.activeObj.activePoint.endX === currObj.activePoint.endX &&
+                parent.activeObj.activePoint.endY === currObj.activePoint.endY &&
+                parent.activeObj.currIndex === currObj.currIndex) {
+                currActObjIndex = index;
+                break;
+            }
+        }
+        if (degree === 'horizontal' || degree === 'vertical' || degree === 'Horizontal' || degree === 'Vertical' ||
+        degree === 'horizontalvertical' || degree === 'verticalhorizontal') {
+            if (degree === 'horizontal' || degree === 'Horizontal') {
+                for (let i: number = 0, len: number = parent.objColl.length; i < len; i++) {
+                    const currObj: SelectionPoint = parent.objColl[i as number];
+                    if (currObj.shapeFlip !== parent.transform.currFlipState) {
+                        if (currObj.activePoint.startX <= destLeft + (destWidth / 2)) {
+                            currObj.activePoint.endX = (destLeft + destWidth) - (currObj.activePoint.startX - destLeft);
+                            currObj.activePoint.startX = currObj.activePoint.endX - currObj.activePoint.width;
+                            parent.notify('draw', { prop: 'updateActiveObject', onPropertyChange: false, value: {actPoint:
+                                currObj.activePoint, obj: currObj}});
+                        } else if (currObj.activePoint.startX >= destLeft + (destWidth / 2)) {
+                            currObj.activePoint.startX = destLeft + (destLeft + destWidth - currObj.activePoint.endX);
+                            currObj.activePoint.endX = currObj.activePoint.startX + currObj.activePoint.width;
+                            parent.notify('draw', { prop: 'updateActiveObject', onPropertyChange: false, value:
+                                {actPoint: currObj.activePoint, obj: currObj}});
+                        }
+                        if (currObj.shape === 'line' || currObj.shape === 'arrow' || currObj.shape === 'path') {
+                            this.flipLineArrowObj(currObj, 'horizontal');
+                        } else if (currObj.rotatedAngle !== 0) {
+                            currObj.rotatedAngle = currObj.rotatedAngle + (Math.PI - currObj.rotatedAngle) * 2;
+                            if (currObj.rotationCirclePointColl.x <= destLeft + (destWidth / 2)) {
+                                currObj.rotationCirclePointColl.x = (destLeft + destWidth) -
+                                (currObj.rotationCirclePointColl.x - destLeft);
+                            } else if (currObj.rotationCirclePointColl.x >= destLeft + (destWidth / 2)) {
+                                currObj.rotationCirclePointColl.x = destLeft +
+                                (destLeft + destWidth - currObj.rotationCirclePointColl.x);
+                            }
+                            currObj.rotationCirclePointColl.ratioX =
+                                (currObj.rotationCirclePointColl.x - destLeft) / destWidth;
+                        }
+                        currObj.shapeFlip = parent.transform.currFlipState;
+                        currObj.imageRatio = {startX: ((currObj.activePoint.startX - destLeft) / destWidth),
+                            startY: ((currObj.activePoint.startY - destTop) / destHeight),
+                            endX: ((currObj.activePoint.endX - destLeft) / destWidth),
+                            endY: ((currObj.activePoint.endY - destTop) / destHeight),
+                            width: destWidth / currObj.activePoint.width,
+                            height: destHeight / currObj.activePoint.height };
+                    }
+                }
+            }
+            else if (degree === 'vertical' || degree === 'Vertical') {
+                for (let i: number = 0; i < parent.objColl.length; i++) {
+                    const currObj: SelectionPoint = parent.objColl[i as number];
+                    if (currObj.shapeFlip !== parent.transform.currFlipState) {
+                        if (currObj.activePoint.startY <= destTop + (destHeight / 2)) {
+                            currObj.activePoint.endY = (destTop + destHeight) - (currObj.activePoint.startY - destTop);
+                            currObj.activePoint.startY = currObj.activePoint.endY - currObj.activePoint.height;
+                            parent.notify('draw', { prop: 'updateActiveObject', onPropertyChange: false, value: {actPoint: currObj.activePoint,
+                                obj: currObj}});
+                        } else if (currObj.activePoint.startY >= parent.lowerCanvas.height / 2) {
+                            currObj.activePoint.startY = destTop + (destTop + destHeight - currObj.activePoint.endY);
+                            currObj.activePoint.endY = currObj.activePoint.startY + currObj.activePoint.height;
+                            parent.notify('draw', { prop: 'updateActiveObject', onPropertyChange: false, value: {actPoint: currObj.activePoint,
+                                obj: currObj}});
+                        }
+                        if (currObj.shape === 'line' || currObj.shape === 'arrow' ||
+                            currObj.shape === 'path') {
+                            this.flipLineArrowObj(currObj, 'vertical');
+                        } else if (currObj.rotatedAngle !== 0) {
+                            currObj.rotatedAngle = -currObj.rotatedAngle;
+                            if (currObj.rotationCirclePointColl.y <= destTop + (destHeight / 2)) {
+                                currObj.rotationCirclePointColl.y = (destTop + destHeight) - (currObj.rotationCirclePointColl.y - destTop);
+                            } else if (currObj.rotationCirclePointColl.y >= destTop +
+                                (destHeight / 2)) {
+                                currObj.rotationCirclePointColl.y = destTop + (destTop + destHeight - currObj.rotationCirclePointColl.y);
+                            }
+                            currObj.rotationCirclePointColl.ratioY =
+                                (currObj.rotationCirclePointColl.y - destTop) / destHeight;
+                        }
+                        currObj.shapeFlip = parent.transform.currFlipState;
+                        currObj.imageRatio = {startX: ((currObj.activePoint.startX - destLeft) / destWidth),
+                            startY: ((currObj.activePoint.startY - destTop) / destHeight),
+                            endX: ((currObj.activePoint.endX - destLeft) / destWidth),
+                            endY: ((currObj.activePoint.endY - destTop) / destHeight),
+                            width: destWidth / currObj.activePoint.width,
+                            height: destHeight / currObj.activePoint.height };
+                    }
+                }
+            }
+            else if (degree === 'verticalhorizontal' || degree === 'horizontalvertical') {
+                for (let i: number = 0, len: number = parent.objColl.length; i < len; i++) {
+                    const currObj: SelectionPoint = parent.objColl[i as number];
+                    if (currObj.shapeFlip !== parent.transform.currFlipState) {
+                        if (currObj.activePoint.startX <= destLeft + (destWidth / 2)) {
+                            currObj.activePoint.endX = (destLeft + destWidth) - (currObj.activePoint.startX -
+                                destLeft);
+                            currObj.activePoint.startX = currObj.activePoint.endX - currObj.activePoint.width;
+                            parent.notify('draw', { prop: 'updateActiveObject', onPropertyChange: false, value:
+                            {actPoint: currObj.activePoint, obj: currObj}});
+                        } else if (currObj.activePoint.startX >= destLeft + (destWidth / 2)) {
+                            currObj.activePoint.startX = destLeft + (destLeft +
+                                destWidth - currObj.activePoint.endX);
+                            currObj.activePoint.endX = currObj.activePoint.startX + currObj.activePoint.width;
+                            parent.notify('draw', { prop: 'updateActiveObject', onPropertyChange: false, value: {actPoint:
+                                currObj.activePoint, obj: currObj}});
+                        }
+                        if (currObj.activePoint.startY <= destTop + (destHeight / 2)) {
+                            currObj.activePoint.endY = (destTop + destHeight) -
+                            (currObj.activePoint.startY - destTop);
+                            currObj.activePoint.startY = currObj.activePoint.endY -
+                            currObj.activePoint.height;
+                            parent.notify('draw', { prop: 'updateActiveObject', onPropertyChange: false, value: {actPoint:
+                                currObj.activePoint, obj: currObj}});
+                        } else if (currObj.activePoint.startY >= parent.lowerCanvas.height / 2) {
+                            currObj.activePoint.startY = destTop + (destTop +
+                                destHeight - currObj.activePoint.endY);
+                            currObj.activePoint.endY = currObj.activePoint.startY +
+                            currObj.activePoint.height;
+                            parent.notify('draw', { prop: 'updateActiveObject', onPropertyChange: false, value:
+                            {actPoint: currObj.activePoint, obj: currObj}});
+                        }
+                        if (currObj.shape === 'line' || currObj.shape === 'arrow' || currObj.shape === 'path') {
+                            this.flipLineArrowObj(currObj, degree);
+                        }
+                        currObj.shapeFlip = parent.transform.currFlipState;
+                        currObj.imageRatio = {startX: ((currObj.activePoint.startX - destLeft) / destWidth),
+                            startY: ((currObj.activePoint.startY - destTop) / destHeight),
+                            endX: ((currObj.activePoint.endX - destLeft) / destWidth),
+                            endY: ((currObj.activePoint.endY - destTop) / destHeight),
+                            width: destWidth / currObj.activePoint.width,
+                            height: destHeight / currObj.activePoint.height };
+                    }
+                }
+            }
+            if (currActObjIndex !== undefined) {
+                parent.activeObj = extend({}, parent.objColl[currActObjIndex as number], {}, true) as SelectionPoint;
+            }
+        }
+        else if (degree === 90) {
+            this.rotateObjColl();
+        }
+        else if (degree === -90) {
+            for (let i: number = 0; i < 3; i++) {
+                this.rotateObjColl();
+            }
+        } else if (typeof(degree) === 'number') {
+            if (degree > 0) {this.rotateObjColl(); }
+            else {
+                for (let i: number = 0; i < 3; i++) {
+                    this.rotateObjColl();
+                }
+            }
+        }
+    }
+
+    private rotateObjColl(): void {
+        const parent: ImageEditor = this.parent;
+        const { destWidth, destHeight, destLeft, destTop } = parent.img;
+        for (let i: number = 0, len: number = parent.objColl.length; i < len; i++) {
+            let currObj: SelectionPoint = parent.objColl[i as number];
+            const shape: string = currObj.shape;
+            currObj.activePoint.startY = destTop + (destHeight * currObj.imageRatio.startX);
+            currObj.activePoint.endY = destTop + (destHeight * currObj.imageRatio.endX);
+            currObj.activePoint.startX = (destLeft + destWidth) - (destWidth * currObj.imageRatio.endY);
+            currObj.activePoint.endX = (destLeft + destWidth) - (destWidth * currObj.imageRatio.startY);
+            currObj = this.updateWidthHeight(parent.objColl[i as number]);
+            this.updateFontSize(currObj);
+            if (shape === 'line' || shape === 'arrow' || shape === 'path') {
+                this.rotateLineArrowObj(currObj);
+                if (shape === 'arrow') {
+                    this.updateArrowSize(currObj);
+                }
+            } else if (currObj.rotatedAngle !== 0) {
+                currObj.rotationCirclePointColl.y = destTop + (destHeight * currObj.rotationCirclePointColl.ratioX);
+                currObj.rotationCirclePointColl.x = (destLeft + destWidth) -
+                    (destWidth * currObj.rotationCirclePointColl.ratioY);
+                currObj.rotationCirclePointColl.ratioX = (currObj.rotationCirclePointColl.x - destLeft) / destWidth;
+                currObj.rotationCirclePointColl.ratioY = (currObj.rotationCirclePointColl.y - destTop) / destHeight;
+            }
+        }
+        for (let i: number = 0, len: number = parent.objColl.length; i < len; i++) {
+            parent.notify('draw', { prop: 'updateActiveObject', onPropertyChange: false, value: {actPoint:
+                parent.objColl[i as number].activePoint, obj: parent.objColl[i as number]}});
+        }
+        for (let i: number = 0, len: number = parent.objColl.length; i < len; i++) {
+            const currObj: SelectionPoint = parent.objColl[i as number];
+            currObj.imageRatio = {startX: ((currObj.activePoint.startX - destLeft) / destWidth),
+                startY: ((currObj.activePoint.startY - destTop) / destHeight),
+                endX: ((currObj.activePoint.endX - destLeft) / destWidth),
+                endY: ((currObj.activePoint.endY - destTop) / destHeight),
+                width: destWidth / currObj.activePoint.width,
+                height: destHeight / currObj.activePoint.height };
+        }
+    }
+
+    private rotateLineArrowObj(obj: SelectionPoint): void {
+        if (isNullOrUndefined(obj.pointColl)) {
+            return;
+        }
+        const parent: ImageEditor = this.parent;
+        const { destWidth, destHeight, destLeft, destTop } = parent.img;
+        if (obj.pointColl.length > 0) {
+            for (let n: number = 0; n < obj.pointColl.length; n++) {
+                obj.pointColl[n as number].y = destTop + (destHeight * obj.pointColl[n as number].ratioX);
+                obj.pointColl[n as number].x = (destLeft + destWidth) - (destWidth *
+                    obj.pointColl[n as number].ratioY);
+            }
+            for (let n: number = 0; n < obj.pointColl.length; n++) {
+                obj.pointColl[n as number].ratioX = (obj.pointColl[n as number].x - destLeft) / destWidth;
+                obj.pointColl[n as number].ratioY = (obj.pointColl[n as number].y - destTop) / destHeight;
+            }
+            let prevPoint: Point;
+            if (isNullOrUndefined(obj.pointColl[obj.pointColl.length - 2])) {prevPoint = {x: 0, y: 0 }; }
+            else {prevPoint = {x: obj.pointColl[obj.pointColl.length - 2].x, y: obj.pointColl[obj.pointColl.length - 2].y }; }
+            const diffX: number = obj.pointColl[obj.pointColl.length - 1].x - prevPoint.x;
+            const diffY: number = obj.pointColl[obj.pointColl.length - 1].y - prevPoint.y;
+            obj.activePoint.startX = obj.pointColl[0].x; obj.activePoint.startY = obj.pointColl[0].y;
+            obj.activePoint.endX = obj.pointColl[obj.pointColl.length - 1].x + (diffX / 2);
+            obj.activePoint.endY = obj.pointColl[obj.pointColl.length - 1].y + (diffY / 2);
+            obj = this.updateWidthHeight(obj);
+        }
+    }
+
+    private flipLineArrowObj(obj: SelectionPoint, value: string): void {
+        value = value.toLowerCase();
+        if (isNullOrUndefined(obj.pointColl)) {return; }
+        if (value === 'horizontal') {this.lineArrowHorizontalFlip(obj); }
+        else if (value === 'vertical') {this.lineArrowVerticalFlip(obj); }
+        else {this.lineArrowHorizontalFlip(obj); obj.shapeFlip = ''; this.lineArrowVerticalFlip(obj); }
+        obj.activePoint.startX = obj.pointColl[0].x; obj.activePoint.startY = obj.pointColl[0].y;
+        obj.activePoint.endX = obj.pointColl[obj.pointColl.length - 1].x;
+        obj.activePoint.endY = obj.pointColl[obj.pointColl.length - 1].y;
+        if (obj.activePoint.startX > obj.activePoint.endX) {
+            let temp: number = obj.activePoint.startX; obj.activePoint.startX = obj.activePoint.endX;
+            obj.activePoint.endX = temp; temp = obj.activePoint.startY;
+            obj.activePoint.startY = obj.activePoint.endY; obj.activePoint.endY = temp;
+        }
+    }
+
+    private lineArrowHorizontalFlip(obj: SelectionPoint): void {
+        const parent: ImageEditor = this.parent;
+        const { destWidth, destHeight, destLeft, destTop } = parent.img;
+        if (obj.shapeFlip !== parent.transform.currFlipState) {
+            for (let l: number = 0, len: number = obj.pointColl.length; l < len; l++) {
+                const currPoint: Point = obj.pointColl[l as number];
+                if (currPoint.x <= destLeft + (destWidth / 2)) {
+                    currPoint.x = (destLeft + destWidth) - (currPoint.x - destLeft);
+                } else if (currPoint.x >= destLeft + (destWidth / 2)) {
+                    currPoint.x = destLeft + (destLeft + destWidth - currPoint.x);
+                }
+                currPoint.ratioX = (currPoint.x - destLeft) / destWidth;
+                currPoint.ratioY = (currPoint.y - destTop) / destHeight;
+            }
+            if (obj.shape === 'arrow') {
+                const value: string = obj.start; obj.start = obj.end; obj.end = value;
+            }
+            obj.shapeFlip = parent.transform.currFlipState;
+        }
+    }
+
+    private lineArrowVerticalFlip(obj: SelectionPoint): void {
+        const parent: ImageEditor = this.parent;
+        const { destWidth, destHeight, destLeft, destTop } = parent.img;
+        if (obj.shapeFlip !== parent.transform.currFlipState) {
+            for (let l: number = 0, len: number = obj.pointColl.length; l < len; l++) {
+                const currPoint: Point = obj.pointColl[l as number];
+                if (currPoint.y <= destTop + (destHeight / 2)) {
+                    currPoint.y = (destTop + destHeight) - (currPoint.y - destTop);
+                } else if (currPoint.y >= destTop + (destHeight / 2)) {
+                    currPoint.y = destTop + (destTop + destHeight - currPoint.y);
+                }
+                currPoint.ratioX = (currPoint.x - destLeft) / destWidth;
+                currPoint.ratioY = (currPoint.y - destTop) / destHeight;
+            }
+            obj.shapeFlip = parent.transform.currFlipState;
+        }
+    }
+
+    private getRotDegOfShape(obj: SelectionPoint, value?: boolean): number {
+        const parent: ImageEditor = this.parent;
+        let degree: number;
+        if (obj.shapeDegree === 0) {degree = this.parent.transform.degree; }
+        else {degree = this.parent.transform.degree - obj.shapeDegree; }
+        if (degree < 0) {degree = 360 + degree; }
+        const transformObj: Object = {bool: false };
+        parent.notify('selection', { prop: 'getTransformedShape', onPropertyChange: false, value: {obj: transformObj}});
+        if (transformObj['bool'] && !value && parent.activeObj.rotateFlipColl) {
+            degree = 0;
+            for (let i: number = 0; i < parent.activeObj.rotateFlipColl.length; i++) {
+                if (typeof(parent.activeObj.rotateFlipColl[i as number]) === 'number') {
+                    degree += (parent.activeObj.rotateFlipColl[i as number]);
+                }
+            }
+        }
+        return degree;
+    }
+
+    private renderTextArea(x: number, y: number, actObj: SelectionPoint): void {
+        const parent: ImageEditor = this.parent;
+        const shapeObj: Object = {shapeSettingsObj: {} as ShapeSettings };
+        parent.notify('selection', { prop: 'updatePrevShapeSettings', onPropertyChange: false, value: {obj: shapeObj}});
+        const shapeSettings: ShapeSettings = shapeObj['shapeSettingsObj'];
+        const shapeChangingArgs: ShapeChangeEventArgs = {cancel: false, action: 'text-edit', previousShapeSettings: shapeSettings,
+            currentShapeSettings: shapeSettings};
+        parent.trigger('shapeChanging', shapeChangingArgs);
+        this.updateShapeChangeEventArgs(shapeChangingArgs.currentShapeSettings, shapeChangingArgs.allowShapeOverflow);
+        const degree: number = this.getRotDegOfShape(parent.activeObj);
+        this.transformTextArea();
+        parent.notify('toolbar', { prop: 'destroy-qa-toolbar', onPropertyChange: false});
+        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');
+        const shadowColor: string = actObj.strokeSettings.outlineColor;
+        const outlineWidth: number = actObj.strokeSettings.outlineWidth;
+        const shadows: string[] = [];
+        if (zOrderElem) {zOrderElem.classList.add('e-overlay'); }
+        if (dupElem) {dupElem.classList.add('e-overlay'); }
+        if (removeElem) {removeElem.classList.add('e-overlay'); }
+        if (editTextElem) {editTextElem.classList.add('e-overlay'); }
+        if (actObj.strokeSettings.fillColor !== '') {
+            parent.textArea.style.backgroundColor = actObj.strokeSettings.fillColor;
+        } else {
+            parent.textArea.style.backgroundColor = 'transparent';
+        }
+        parent.textArea.style.display = 'block'; parent.textArea.style.left = x + 'px';
+        parent.textArea.style.top = y + 'px'; parent.textArea.style.fontFamily = actObj.textSettings.fontFamily;
+        parent.textArea.style.fontSize = actObj.textSettings.fontSize + 'px';
+        parent.textArea.style.color = actObj.strokeSettings.strokeColor;
+        const fontSize: number = actObj.textSettings.fontSize;
+        const baseWidth: number = Math.max(1, outlineWidth / 2);
+        const adjustedOutlineWidth: number = baseWidth * (Math.floor((fontSize - 1) / 16) * 0.5 + 0.5);
+        if (/^#([0-9A-Fa-f]{3}|[0-9A-Fa-f]{6}|[0-9A-Fa-f]{8})$|^[a-zA-Z]+$/.test(actObj.strokeSettings.outlineColor)) {
+            for (let x: number = -adjustedOutlineWidth; x <= adjustedOutlineWidth; x++) {
+                for (let y: number = -adjustedOutlineWidth; y <= adjustedOutlineWidth; y++) {
+                    if (x !== 0 || y !== 0) {
+                        shadows.push(`${x / 2}px ${y / 2}px 0 ${shadowColor}`);
+                    }
+                }
+            }
+            parent.textArea.style.textShadow = shadows.join(', ');
+        } else {
+            parent.textArea.style.textShadow = null;
+        }
+        parent.textArea.style.fontWeight = actObj.textSettings.bold ? 'bold' : 'normal';
+        parent.textArea.style.fontStyle = actObj.textSettings.italic ? 'italic' : 'normal';
+        parent.textArea.style.textDecoration = (actObj.textSettings.underline && actObj.textSettings.strikethrough) ? 'underline line-through' :
+            (actObj.textSettings.underline) ? 'underline' :
+                (actObj.textSettings.strikethrough) ? 'line-through' : 'none';
+        parent.textArea.style.border = '2px solid ' + parent.themeColl[parent.theme]['primaryColor'];
+        parent.textArea.value = actObj.keyHistory; parent.textArea.style.overflow = 'hidden';
+        parent.textArea.style.width = 'auto'; parent.textArea.style.height = 'auto';
+        parent.textArea.focus();
+        const { width, height } = actObj.activePoint;
+        if (degree % 90 === 0 && degree % 180 !== 0 && degree !== 0) {
+            parent.textArea.style.width = height + (height * 0.25) + 'px';
+            parent.textArea.style.height = width + (width * 0.25) + 'px';
+        } else {
+            parent.textArea.style.width = width + (width * 0.25) + 'px';
+            parent.textArea.style.height = height + (height * 0.25) + 'px';
+        }
+        this.setTextBoxWidth(); const obj: Object = {flipColl: null };
+        parent.notify('transform', { prop: 'getFlipColl', onPropertyChange: false, value: {obj: obj }});
+        if (obj['flipColl'].length <= 1) {this.setTextBoxHeight(); }
+        if (parseFloat(parent.textArea.style.maxHeight) < parent.activeObj.textSettings.fontSize) {
+            parent.textArea.style.maxHeight = parent.activeObj.textSettings.fontSize + 'px';
+        }
+        if (degree % 90 === 0 && degree % 180 !== 0) {
+            if (parseFloat(parent.textArea.style.left) + parseFloat(parent.textArea.style.width) > parent.img.destTop +
+            parent.img.destHeight) {this.alignTextAreaIntoCanvas(); }
+        } else {
+            if (parseFloat(parent.textArea.style.left) + parseFloat(parent.textArea.style.width) > parent.img.destLeft +
+            parent.img.destWidth) {this.alignTextAreaIntoCanvas(); }
+        }
+        // Limit text area
+        if (actObj.rotatedAngle !== 0) {
+            let tempLeft: number = parseFloat(parent.textArea.style.left); let tempTop: number = parseFloat(parent.textArea.style.top);
+            if (actObj.flipObjColl.length > 0) {
+                const panObj: Object = {panRegion: '' };
+                const { clientWidth, clientHeight } = parent.lowerCanvas;
+                let center: Point = {x: 0, y: 0};
+                parent.notify('crop', { prop: 'getCurrFlipState', onPropertyChange: false,
+                    value: {panObj: panObj }});
+                if (panObj['panRegion'] !== '') {
+                    if (panObj['panRegion'] === 'horizontal') {
+                        center.x = clientWidth - (clientWidth / 2);
+                        tempLeft = (center.x - tempLeft) + center.x;
+                    } else if (panObj['panRegion'] === 'vertical') {
+                        center.y = clientHeight - (clientHeight / 2);
+                        tempTop = (center.y - tempTop) + center.y;
+                    } else {
+                        center = {x: clientWidth - (clientWidth / 2), y: clientHeight - (clientHeight / 2)};
+                        tempLeft = (center.x - tempLeft) + center.x;
+                        tempTop = (center.y - tempTop) + center.y;
+                    }
+                }
+            }
+            let left: number = tempLeft + parseFloat(parent.textArea.style.width);
+            const top: number = tempTop + parseFloat(parent.textArea.style.height);
+            let width1: number = parseFloat(parent.textArea.style.width);
+            const height1: number = parseFloat(parent.textArea.style.height);
+            let center: Point = {x: left - (width1 / 2), y: top - (height1 / 2)};
+            const cosAngle: number = Math.cos(actObj.rotatedAngle);
+            const sinAngle: number = Math.sin(actObj.rotatedAngle);
+            let p1: Point = { x: cosAngle * (left - center.x) - sinAngle * (top - center.y) + center.x,
+                y: sinAngle * (left - center.x) + cosAngle * (top - center.y) + center.y };
+            if (p1.x > parent.img.destLeft && p1.x < parent.img.destLeft + parent.img.destWidth &&
+                // eslint-disable-next-line max-len
+                p1.y > parent.img.destTop && p1.y + parseFloat(parent.textArea.style.fontSize) < parent.img.destTop + parent.img.destHeight) {
+                // eslint-disable-next-line no-self-assign
+                parent.textArea.style.width = parent.textArea.style.width;
+            } else {
+                let count: number = 0;
+                const width2: number = parseFloat(parent.textArea.style.width);
+                while (true) {
+                    count++;
+                    width1 -= 1;
+                    left = tempLeft + width1;
+                    center = {x: left - (width1 / 2), y: top - (height1 / 2)};
+                    p1 = { x: cosAngle * (left - center.x) - sinAngle * (top - center.y) + center.x,
+                        y: sinAngle * (left - center.x) + cosAngle * (top - center.y) + center.y };
+                    if ((p1.x > parent.img.destLeft && p1.x < parent.img.destLeft + parent.img.destWidth &&
+                        // eslint-disable-next-line max-len
+                        p1.y > parent.img.destTop && p1.y + parseFloat(parent.textArea.style.fontSize) < parent.img.destTop + parent.img.destHeight) ||
+                        count === width2) {
+                        parent.textArea.style.width = width1 + 'px';
+                        break;
+                    }
+                }
+            }
+        }
+        parent.notify('selection', { prop: 'clearUpperCanvas', onPropertyChange: false});
+    }
+
+    private setTextBoxWidth(e?: KeyboardEvent): void {
+        const parent: ImageEditor = this.parent;
+        if (parent.activeObj.rotatedAngle !== 0) {
+            parent.textArea.style.whiteSpace = 'nowrap';
+            parent.textArea.style.textOverflow = 'ellipsis';
+            parent.textArea.style.display = 'inline-block';
+            return;
+        } else {
+            parent.textArea.style.whiteSpace = '';
+            parent.textArea.style.textOverflow = '';
+            if (parent.textArea.style.display === 'inline-block') {
+                parent.textArea.style.display = 'block';
+            }
+        }
+        const text: string = this.getMaxText(true);
+        if (parent.textArea.style.display === 'block' || parent.textArea.style.display === 'inline-block') {this.updateFontStyles(true); }
+        else {this.updateFontStyles(); }
+        const textAreaWidth: number = (this.upperContext.measureText(text).width + (parseFloat(parent.textArea.style.fontSize) / 2));
+        const letterWidth: number = e ? this.upperContext.measureText(String.fromCharCode(e.which)).width : 0;
+        const actObj: SelectionPoint = extend({}, parent.activeObj, {}, true) as SelectionPoint;
+        let flip: string = ''; const degree: number = this.getRotDegOfShape(actObj);
+        if (actObj.shapeFlip !== parent.transform.currFlipState) {flip = ''; }
+        else {flip = parent.transform.currFlipState; }
+        if ((e && parseFloat(parent.textArea.style.width) < (textAreaWidth + letterWidth)) || isNullOrUndefined(e)) {
+            if (degree === 0) {
+                if (flip.toLowerCase() === 'horizontal') {
+                    if ((parseFloat(parent.textArea.style.left) - parent.img.destLeft) - textAreaWidth - letterWidth > 0) {
+                        parent.textArea.style.width = (textAreaWidth + letterWidth) + 'px';
+                    }
+                } else if ((parent.img.destWidth - (parseFloat(parent.textArea.style.left) -
+                    parent.img.destLeft)) > (textAreaWidth + letterWidth)) {
+                    parent.textArea.style.width = (textAreaWidth + letterWidth) + 'px';
+                }
+            } else if (degree === 90) {
+                if (flip.toLowerCase() === 'vertical') {
+                    if ((parseFloat(parent.textArea.style.top) - parent.img.destTop) - textAreaWidth - letterWidth > 0) {
+                        parent.textArea.style.width = (textAreaWidth + letterWidth) + 'px';
+                    }
+                }
+                else if ((parent.img.destHeight - (parseFloat(parent.textArea.style.top) -
+                    parent.img.destTop)) > (textAreaWidth + letterWidth)) {
+                    parent.textArea.style.width = (textAreaWidth + letterWidth) + 'px';
+                }
+            } else if (degree === 180) {
+                const textAreaLeft: number = parseFloat(parent.textArea.style.left);
+                const destLeft: number = parent.img.destLeft;
+                if (flip.toLowerCase() === 'horizontal') {
+                    const remainingWidth: number = parent.img.destWidth - (textAreaLeft - destLeft);
+                    if (remainingWidth > textAreaWidth + letterWidth) {
+                        parent.textArea.style.width = (textAreaWidth + letterWidth) + 'px';
+                    }
+                } else {
+                    const distanceToLeft: number = textAreaLeft - destLeft;
+                    if (distanceToLeft - textAreaWidth - letterWidth > 0) {
+                        parent.textArea.style.width = (textAreaWidth + letterWidth) + 'px';
+                    }
+                }
+            } else if (degree === 270) {
+                const textAreaTop: number = parseFloat(parent.textArea.style.top);
+                const destTop: number = parent.img.destTop;
+                if (flip.toLowerCase() === 'vertical') {
+                    const remainingHeight: number = parent.img.destHeight - (textAreaTop - destTop);
+                    if (remainingHeight > textAreaWidth + letterWidth) {
+                        parent.textArea.style.width = (textAreaWidth + letterWidth) + 'px';
+                    }
+                } else {
+                    const distanceToTop: number = textAreaTop - destTop;
+                    if (distanceToTop - textAreaWidth - letterWidth > 0) {
+                        parent.textArea.style.width = (textAreaWidth + letterWidth) + 'px';
+                    }
+                }
+            }
+        }
+    }
+
+    private setTextBoxHeight(): void {
+        const parent: ImageEditor = this.parent; let textAreaTop: number;
+        const actObj: SelectionPoint = extend({}, parent.activeObj, {}, true) as SelectionPoint;
+        let flip: string = ''; const degree: number = this.getRotDegOfShape(actObj);
+        if (actObj.textFlip === parent.transform.currFlipState) {
+            flip = '';
+        } else if (actObj.textFlip === '') {
+            flip = parent.transform.currFlipState;
+        } else {
+            flip = actObj.textFlip;
+        }
+        switch (degree) {
+        case 0:
+            if (flip.toLowerCase() === 'vertical') {
+                parent.textArea.style.maxHeight = (parent.img.destHeight - (parent.img.destHeight -
+                    parseFloat(parent.textArea.style.top))) + 'px';
+            } else {
+                textAreaTop = parseFloat(parent.textArea.style.top) - parent.img.destTop;
+                parent.textArea.style.maxHeight = (parent.img.destHeight - textAreaTop) + 'px';
+            }
+            break;
+        case 90:
+            if (flip.toLowerCase() === 'horizontal') {
+                parent.textArea.style.maxHeight = (parent.img.destWidth - (parseFloat(parent.textArea.style.left) -
+                parent.img.destLeft)) + 'px';
+            } else {
+                parent.textArea.style.maxHeight = (parseFloat(parent.textArea.style.left) - parent.img.destLeft) + 'px';
+            }
+            break;
+        case 180:
+            if (flip.toLowerCase() === 'vertical') {
+                textAreaTop = parseFloat(parent.textArea.style.top) - parent.img.destTop;
+                parent.textArea.style.maxHeight = (parent.img.destHeight - textAreaTop) + 'px';
+            } else {
+                parent.textArea.style.maxHeight = (parseFloat(parent.textArea.style.top) - parent.img.destTop) + 'px';
+            }
+            break;
+        case 270:
+            if (flip.toLowerCase() === 'horizontal') {
+                parent.textArea.style.maxHeight = (parseFloat(parent.textArea.style.left) - parent.img.destLeft) + 'px';
+            } else {
+                parent.textArea.style.maxHeight = parent.img.destWidth - (parseFloat(parent.textArea.style.left)
+                - parent.img.destLeft) + 'px';
+            }
+            break;
+        }
+    }
+
+    private updatePathRatio(obj: SelectionPoint): void {
+        const parent: ImageEditor = this.parent;
+        for (let i: number = 0, len: number = obj.pointColl.length; i < len; i++) {
+            const currPoint: Point = obj.pointColl[i as number];
+            currPoint.ratioX = (currPoint.x - parent.img.destLeft) / parent.img.destWidth;
+            currPoint.ratioY = (currPoint.y - parent.img.destTop) / parent.img.destHeight;
+        }
+    }
+
+    private stopPathDrawing(e: MouseEvent & TouchEvent, isApply: boolean): void {
+        const parent: ImageEditor = this.parent;
+        if (parent.activeObj.shape === 'path') {
+            const obj: Object = {shape: null };
+            parent.notify('selection', { prop: 'getCurrentDrawingShape', value: {obj: obj }});
+            if (obj['shape'] === 'path') {
+                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[];
+                parent.notify('selection', { prop: 'setCurrentDrawingShape', value: {value: '' }});
+                parent.currObjType.isDragging = false;
+                if (e && e.type !== 'touchstart' && isNullOrUndefined(isApply)) {parent.activeObj.pointColl.pop(); }
+                this.updatePathRatio(parent.activeObj);
+                if (isNullOrUndefined(parent.activeObj.imageRatio)) {
+                    parent.notify('shape', { prop: 'updImgRatioForActObj', onPropertyChange: false});
+                }
+                parent.objColl.push(parent.activeObj);
+                parent.notify('undo-redo', { prop: 'updateUndoRedoColl', onPropertyChange: false,
+                    value: {operation: 'shapeTransform', previousObj: prevObj, previousObjColl: prevObj.objColl,
+                        previousPointColl: prevObj.pointColl, previousSelPointColl: prevObj.selPointColl,
+                        previousCropObj: prevCropObj, previousText: null,
+                        currentText: null, previousFilter: null, isCircleCrop: null}});
+                parent.objColl.pop();
+                if (e) {
+                    parent.notify('selection', { prop: 'mouseUpEventHandler', value: {e: e }});
+                    this.lowerContext.clearRect(0, 0, parent.lowerCanvas.width, parent.lowerCanvas.height);
+                    parent.notify('draw', { prop: 'redrawImgWithObj', onPropertyChange: false});
+                    if (parent.objColl.length > 0) {
+                        const obj1: ActivePoint = parent.activeObj.activePoint;
+                        const obj2: ActivePoint = parent.objColl[parent.objColl.length - 1].activePoint;
+                        if (Math.floor(obj1.startX) === Math.floor(obj2.startX) &&
+                            Math.floor(obj1.startY) === Math.floor(obj2.startY) &&
+                            Math.floor(obj1.endX) === Math.floor(obj2.endX) &&
+                            Math.floor(obj1.endY) === Math.floor(obj2.endY)) {
+                            this.refreshActiveObj();
+                        }
+                    }
+                }
+                parent.notify('draw', { prop: 'setNewPath', value: {bool: true }});
+                if (parent.objColl[parent.objColl.length - 1]) {
+                    const shape: string = parent.drawingShape;
+                    parent.notify('selection', { prop: 'setCurrentDrawingShape', value: {value: '' }});
+                    parent.noRedact = true;
+                    parent.selectShape(parent.objColl[parent.objColl.length - 1].currIndex);
+                    parent.notify('selection', { prop: 'setCurrentDrawingShape', value: {value: 'path' }});
+                    parent.drawingShape = shape;
+                }
+                parent.notify('toolbar', { prop: 'renderQAT', onPropertyChange: false, value: {isPenEdit: null} });
+                const obj: Object = {shapeSettingsObj: {} as ShapeSettings };
+                parent.notify('selection', { prop: 'updatePrevShapeSettings', onPropertyChange: false, value: {obj: obj}});
+                const shapeSettings: ShapeSettings = obj['shapeSettingsObj'];
+                const shapeResizingArgs: ShapeChangeEventArgs = {cancel: false, action: 'draw-end',  previousShapeSettings: shapeSettings};
+                const shapeMovingArgs: ShapeChangeEventArgs = {cancel: false, action: 'move', previousShapeSettings: shapeSettings};
+                parent.notify('selection', { prop: 'triggerShapeChange', onPropertyChange: false,
+                    value: {shapeResizingArgs: shapeResizingArgs, shapeMovingArgs: shapeMovingArgs, type: 'mouse-up'}});
+                parent.notify('undo-redo', { prop: 'updateUndoRedoStack', onPropertyChange: false });
+            }
+        }
+    }
+
+    private findTextTarget(e: MouseEvent & TouchEvent): void {
+        const parent: ImageEditor = this.parent;
+        if (!e) {return; }
+        if (parent.activeObj.shape !== 'text') {
+            if (parent.activeObj.shape === 'path') {
+                this.stopPathDrawing(e, null);
+                return;
+            } else if (e.type === 'dblclick') {
+                parent.notify('selection', { prop: 'setPanDown', onPropertyChange: false, value: {panDown: null }});
+                const activeObj: SelectionPoint = extend({}, parent.activeObj, {}, true) as SelectionPoint;
+                const objColl: SelectionPoint[] = extend([], parent.objColl, [], true) as SelectionPoint[];
+                const obj: Object = {bool: null };
+                parent.notify('selection', { prop: 'findTargetObj', onPropertyChange: false,
+                    value: {x: e.clientX, y: e.clientY, isCrop: false, obj: obj }});
+                parent.objColl = objColl;
+                if (!obj['bool'] || parent.activeObj.shape !== 'text') {
+                    parent.activeObj = extend({}, activeObj, {}, true) as SelectionPoint;
+                    return;
+                }
+            } else {
+                return;
+            }
+        }
+        let x: number; let y: number;
+        if (e.type === 'dblclick') {x = e.clientX; y = e.clientY; }
+        else if (e.type === 'touchstart') {
+            x = e.touches[0].clientX; y = e.touches[0].clientY;
+            parent.notify('selection', { prop: 'setTouchEndPoint', onPropertyChange: false,
+                value: {x: e.touches[0].clientX, y: e.touches[0].clientY}});
+        }
+        parent.notify('toolbar', { prop: 'setPreventZoomBtn', onPropertyChange: false, value: {isPrevent: true }});
+        parent.notify('toolbar', { prop: 'refresh-toolbar', onPropertyChange: false, value: {type: 'text',
+            isApplyBtn: null, isCropping: null, isZooming: null, cType: null}});
+        parent.notify('toolbar', { prop: 'setPreventZoomBtn', onPropertyChange: false, value: {isPrevent: false }});
+        parent.notify('toolbar', { prop: 'update-toolbar-items', onPropertyChange: false});
+        if (!isNullOrUndefined(x) && !isNullOrUndefined(y)) {
+            const bbox: DOMRect = parent.lowerCanvas.getBoundingClientRect() as DOMRect;
+            x -= bbox.left; y -= bbox.top; let flip: string = '';
+            const degree: number = this.getRotDegOfShape(parent.activeObj);
+            if (parent.activeObj.textFlip === '') {
+                if (parent.activeObj.textFlip === parent.transform.currFlipState) {flip = ''; }
+                else {flip = parent.transform.currFlipState; }
+            } else {
+                if (parent.activeObj.textFlip === parent.transform.currFlipState) {flip = ''; }
+                else if (parent.transform.currFlipState === '') {flip = parent.activeObj.textFlip; }
+                else {flip = parent.transform.currFlipState; }
+            }
+            let temp: SelectionPoint;
+            if (parent.textArea.style.display === 'none') {
+                temp = extend({}, parent.activeObj, {}, true) as SelectionPoint;
+                for (let i: number = 0; i < parent.objColl.length; i++) {
+                    if (JSON.stringify(parent.activeObj) === JSON.stringify(parent.objColl[i as number])) {
+                        parent.objColl.splice(i, 1);
+                    }
+                }
+                this.refreshActiveObj();
+                this.upperContext.clearRect(0, 0, parent.upperCanvas.width, parent.upperCanvas.height);
+                this.lowerContext.clearRect(0, 0, parent.upperCanvas.width, parent.upperCanvas.height);
+                parent.notify('draw', { prop: 'redrawImgWithObj', onPropertyChange: false});
+                parent.notify('draw', { prop: 'redrawDownScale' });
+                parent.notify('draw', { prop: 'clearOuterCanvas', onPropertyChange: false, value: {context: this.lowerContext}});
+                parent.notify('draw', { prop: 'clearOuterCanvas', onPropertyChange: false, value: {context: this.upperContext}});
+                if ((parent.currSelectionPoint && parent.currSelectionPoint.shape === 'crop-circle') || parent.isCircleCrop) {
+                    parent.notify('crop', { prop: 'cropCircle', onPropertyChange: false,
+                        value: {context: this.lowerContext, isSave: null, isFlip: null}});
+                }
+                parent.activeObj = temp; this.updateFontStyles();
+                const actObj: SelectionPoint = extend({}, parent.activeObj, {}, true) as SelectionPoint;
+                const radius: number = actObj.topLeftCircle.radius;
+                const { startX, startY, endX, endY, width, height } = actObj.activePoint;
+                const center: Point = {x: startX + (width / 2), y: startY +
+                    (height / 2)};
+                const cosAngle: number = Math.cos(actObj.rotatedAngle);
+                const sinAngle: number = Math.sin(actObj.rotatedAngle);
+                const p1: Point = { x: cosAngle * (startX - center.x) - sinAngle * (startY - center.y) + center.x,
+                    y: sinAngle * (startX - center.x) + cosAngle * (startY - center.y) + center.y };
+                const p2: Point = { x: cosAngle * (endX - center.x) - sinAngle * (startY - center.y) + center.x,
+                    y: sinAngle * (endX - center.x) + cosAngle * (startY - center.y) + center.y };
+                const p3: Point = { x: cosAngle * (startX - center.x) - sinAngle * (endY - center.y) + center.x,
+                    y: sinAngle * (startX - center.x) + cosAngle * (endY - center.y) + center.y };
+                const p4: Point = { x: cosAngle * (endX - center.x) - sinAngle * (endY - center.y) + center.x,
+                    y: sinAngle * (endX - center.x) + cosAngle * (endY - center.y) + center.y };
+                const obj: Object = {position: null, x: x, y: y, x1: p1.x, y1: p1.y, x2: p2.x, y2: p2.y,
+                    x3: p3.x, y3: p3.y, x4: p4.x, y4: p4.y };
+                parent.notify('draw', { prop: 'checkPointPosition', onPropertyChange: false, value: {obj: obj }});
+                if ((actObj.rotatedAngle !== 0 && (obj['position'] === 'inside' || obj['position'] === 'on')) ||
+                    (actObj.rotatedAngle === 0 && x >= (actObj.activePoint.startX - (radius * 2)) &&
+                    x <= (actObj.activePoint.endX + (radius * 2)) &&
+                    y >= (actObj.activePoint.startY - (radius * 2)) &&
+                    y <= (actObj.activePoint.endY + (radius * 2)))) {
+                    this.upperContext.clearRect(0, 0, parent.upperCanvas.width, parent.upperCanvas.height);
+                    if (actObj.flipObjColl.length === 4) {
+                        actObj.flipObjColl = []; flip = ''; actObj.shapeFlip = '';
+                    }
+                    if (flip === '' && actObj.flipObjColl.length > 1) {
+                        flip = actObj.flipObjColl[actObj.flipObjColl.length - 1];
+                    }
+                    if (actObj.flipObjColl.length <= 1) {
+                        const points: Point = this.setTextBoxPos(actObj, degree, flip, x, y);
+                        x = points.x; y = points.y;
+                    } else {
+                        const points: Point = this.setTextBoxPoints(actObj, degree, flip, x, y);
+                        x = points.x; y = points.y;
+                    }
+                    if (parent.activeObj.rotatedAngle !== 0) {
+                        let point: Point = this.getTextBoxPosition(parent.activeObj);
+                        x = point.x; y = point.y;
+                        point = this.setFlipState(x, y, parent.activeObj);
+                        x = point.x; y = point.y;
+                    }
+                    this.renderTextArea(x, y, actObj);
+
+                } else {this.applyActObj(); }
+            }
+        } else if ((parent.textArea.style.display === 'block' || parent.textArea.style.display === 'inline-block')
+            && this.selectedText() !== '' && e.type === 'mousedown') {
+            const temp: string = parent.textArea.value; parent.textArea.value += 'a'; parent.textArea.value = temp;
+        } else if (parent.textArea.style.display === 'none') {
+            parent.textArea.style.display = 'block';
+        }
+    }
+
+    private getTextBoxPosition(obj: SelectionPoint, object?: Object): Point {
+        let point: Point = {x: 0, y: 0 };
+        const { startX, startY, endX, endY, width, height } = obj.activePoint;
+        const center: Point = {x: startX + (width / 2), y: startY + (height / 2)};
+        const cosAngle: number = Math.cos(obj.rotatedAngle);
+        const sinAngle: number = Math.sin(obj.rotatedAngle);
+        const p1: Point = { x: cosAngle * (startX - center.x) - sinAngle * (startY - center.y) + center.x,
+            y: sinAngle * (startX - center.x) + cosAngle * (startY - center.y) + center.y };
+        const p2: Point = { x: cosAngle * (endX - center.x) - sinAngle * (startY - center.y) + center.x,
+            y: sinAngle * (endX - center.x) + cosAngle * (startY - center.y) + center.y };
+        const p3: Point = { x: cosAngle * (startX - center.x) - sinAngle * (endY - center.y) + center.x,
+            y: sinAngle * (startX - center.x) + cosAngle * (endY - center.y) + center.y };
+        const p4: Point = { x: cosAngle * (endX - center.x) - sinAngle * (endY - center.y) + center.x,
+            y: sinAngle * (endX - center.x) + cosAngle * (endY - center.y) + center.y };
+        const degree: number = this.getRotDegOfShape(obj);
+        if (degree === 0 || degree === 360) {point = {x: p1.x, y: p1.y}; }
+        else if (degree === 90 || degree === -270) {point = {x: p2.x, y: p2.y}; }
+        else if (degree === 180 || degree === -180) {point = {x: p4.x, y: p4.y}; }
+        else if (degree === 270 || degree === -90) {point = {x: p3.x, y: p3.y}; }
+        if (object) {object['x'] = point.x; object['y'] = point.y; }
+        return point;
+    }
+
+    private setFlipState(x: number, y: number, obj: SelectionPoint, object?: Object): Point {
+        const parent: ImageEditor = this.parent; const panObj: Object = {panRegion: '' };
+        const { clientWidth, clientHeight } = parent.lowerCanvas;
+        let center: Point = {x: 0, y: 0};
+        parent.notify('crop', { prop: 'getCurrFlipState', onPropertyChange: false,
+            value: {panObj: panObj }});
+        if (panObj['panRegion'] !== '') {
+            if (panObj['panRegion'] === 'horizontal') {
+                center.x = clientWidth - (clientWidth / 2);
+                x = (center.x - x) + center.x;
+            } else if (panObj['panRegion'] === 'vertical') {
+                center.y = clientHeight - (clientHeight / 2);
+                y = (center.y - y) + center.y;
+            } else {
+                center = {x: clientWidth - (clientWidth / 2), y: clientHeight - (clientHeight / 2)};
+                x = (center.x - x) + center.x;
+                y = (center.y - y) + center.y;
+            }
+        }
+        if (object) {object['x'] = x; object['y'] = y; }
+        return {x: x, y: y};
+    }
+
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    private fileChanged(e: any): void {
+        /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
+        const filesData: FileList = (e.target as any).files[0];
+        /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
+        const fileData: any = filesData;
+        const fileExtension: string = fileData.name && fileData.name.split('.').pop().toLowerCase();
+        if (fileExtension && ['jpg', 'jpeg', 'png', 'svg', 'webp', 'bmp'].indexOf(fileExtension) === -1) {
+            this.refreshActiveObj();
+            return;
+        }
+        // eslint-disable-next-line @typescript-eslint/tslint/config, @typescript-eslint/no-explicit-any
+        const URL = window.URL; const url = URL.createObjectURL((e.target as any).files[0]);
+        this.onLoadImgShape(null, null, null, null, url.toString(), true);
+        (document.getElementById(this.parent.element.id + '_fileUpload') as HTMLInputElement).value = '';
+    }
+
+    private onLoadImgShape(x: number, y: number, width: number, height: number, url: string | ImageData,
+                           isSelect?: boolean, degree?: number, isAspectRatio?: boolean, opacity?: number, isSelected?: boolean): void {
+        // eslint-disable-next-line @typescript-eslint/no-this-alias
+        const proxy: Shape = this; const parent: ImageEditor = this.parent;
+        if (typeof(url) === 'string') {this.shapeImg.src = url; }
+        else {
+            parent.inMemoryCanvas.width = (url as ImageData).width;
+            parent.inMemoryCanvas.height = (url as ImageData).height;
+            parent.inMemoryCanvas.getContext('2d').putImageData((url as ImageData), 0, 0);
+            this.shapeImg.src = parent.inMemoryCanvas.toDataURL();
+        }
+        this.prevObjColl();
+        parent.activeObj.shape = 'image';
+        this.initShapeProps();
+        this.shapeImg.onload = () => {
+            proxy.upperContext.drawImage(proxy.shapeImg, 0, 0, proxy.shapeImg.width, proxy.shapeImg.height);
+            proxy.updateImgCanvas(isSelect, x, y, width, height, degree, isAspectRatio, opacity, isSelected);
+        };
+    }
+
+    private updateImgCanvas(isSelect: boolean, x: number, y: number, width: number, height: number, degree: number,
+                            isAspectRatio: boolean, opacity: number, isSelected?: boolean): void {
+        const parent: ImageEditor = this.parent;
+        parent.activeObj.imageElement = this.shapeImg;
+        parent.activeObj.imageCanvas = parent.createElement('canvas');
+        let dimObj: Object = {width: 0, height: 0 };
+        parent.notify('transform', { prop: 'calcMaxDimension', onPropertyChange: false,
+            value: {width: this.shapeImg.width, height: this.shapeImg.height, obj: dimObj, isImgShape: null }});
+        if (width && height) {
+            if (isAspectRatio) {
+                const obj: Object = {ratio: null };
+                parent.notify('selection', { prop: 'findImageRatio', onPropertyChange: false,
+                    value: {width: this.shapeImg.width, height: this.shapeImg.height, obj: obj }});
+                dimObj = this.resizeImage(width, obj['ratio']);
+            } else {
+                dimObj = {width: width, height: height };
+            }
+        }
+        this.updateObj(dimObj, x, y);
+        parent.notify('draw', { prop: 'downScaleImgCanvas', onPropertyChange: false,
+            value: {ctx: parent.activeObj.imageCanvas.getContext('2d'), isImgAnnotation: true, isHFlip: null, isVFlip: null }});
+        parent.notify('transform', { prop: 'calcMaxDimension', onPropertyChange: false,
+            value: {width: this.shapeImg.width, height: this.shapeImg.height, obj: dimObj, isImgShape: true }});
+        if (width && height) {
+            if (isAspectRatio) {
+                const obj: Object = {ratio: null };
+                parent.notify('selection', { prop: 'findImageRatio', onPropertyChange: false,
+                    value: {width: this.shapeImg.width, height: this.shapeImg.height, obj: obj }});
+                dimObj = this.resizeImage(width, obj['ratio']);
+            } else {
+                dimObj = {width: width, height: height };
+            }
+        }
+        if (opacity !== null && opacity !== undefined) {parent.activeObj.opacity = opacity; }
+        this.updateObj(dimObj, x, y);
+        parent.notify('draw', { prop: 'drawObject', onPropertyChange: false, value: {canvas: 'duplicate' }});
+        this.shapeImg = null;
+        if (degree) {
+            parent.activeObj.rotatedAngle = degree * (Math.PI / 180);
+            parent.notify('selection', {prop: 'updPtCollForShpRot', onPropertyChange: false, value: {obj: parent.activeObj }});
+        }
+        const obj: Object = {shapeSettingsObj: {} as ShapeSettings };
+        parent.notify('selection', { prop: 'updatePrevShapeSettings', onPropertyChange: false, value: {obj: obj}});
+        const shapeSettings: ShapeSettings = obj['shapeSettingsObj'];
+        const shapeChangingArgs: ShapeChangeEventArgs = {cancel: false, action: 'insert', previousShapeSettings: shapeSettings,
+            currentShapeSettings: shapeSettings};
+        parent.trigger('shapeChanging', shapeChangingArgs);
+        parent.editCompleteArgs = shapeChangingArgs;
+        isSelect = isSelect ? isSelect : isSelected;
+        this.drawShapeImageEvent(shapeChangingArgs, isSelect);
+        if (parent.isPublicMethod && !isSelected) {
+            parent.notify('undo-redo', {prop: 'updateUndoRedo', onPropertyChange: false});
+        } else if (!parent.isPublicMethod) {
+            parent.notify('undo-redo', { prop: 'updateUndoRedoStack', onPropertyChange: false});
+        }
+        parent.isPublicMethod = false;
+    }
+
+    private updateObj(dimObj: Object, x: number, y: number): void {
+        const parent: ImageEditor = this.parent;
+        parent.activeObj.activePoint.width = dimObj['width'];
+        parent.activeObj.activePoint.height = dimObj['height'];
+        parent.activeObj.activePoint.startX = x ? x : (parent.lowerCanvas.width / 2) - (dimObj['width'] / 2);
+        parent.activeObj.activePoint.startY = y ? y : (parent.lowerCanvas.height / 2) - (dimObj['height'] / 2);
+        parent.activeObj.activePoint.endX = parent.activeObj.activePoint.startX + dimObj['width'];
+        parent.activeObj.activePoint.endY = parent.activeObj.activePoint.startY + dimObj['height'];
+    }
+
+    private resizeImage(newWidth: number, aspectRatio: string): Object {
+        const aspectRatioArray: string[] = aspectRatio.split(':');
+        const aspectRatioWidth: number = parseInt(aspectRatioArray[0], 10);
+        const aspectRatioHeight: number = parseInt(aspectRatioArray[1], 10);
+        const newHeight: number = Math.round((newWidth * aspectRatioHeight) / aspectRatioWidth);
+        return { width: newWidth, height: newHeight };
+    }
+
+    private setTextBoxPos(actObj: SelectionPoint, degree: number, flip: string, x: number, y: number): Point {
+        const point: Point = {x: x, y: y};
+        const { startX, startY, endX, endY } = actObj.activePoint;
+        flip = flip.toLowerCase();
+        switch (degree) {
+        case 0:
+            if (flip === 'horizontal') {
+                point.x = endX; point.y = startY;
+            } else if (flip === 'vertical') {
+                point.x = startX; point.y = endY;
+            } else {
+                point.x = startX; point.y = startY;
+            }
+            break;
+        case 90:
+            if (flip === 'horizontal') {
+                point.x = startX; point.y = startY;
+            } else if (flip === 'vertical') {
+                point.x = endX; point.y = endY;
+            } else {
+                point.x = endX; point.y = startY;
+            }
+            break;
+        case 180:
+            if (flip === 'horizontal') {
+                point.x = startX; point.y = endY;
+            } else if (flip === 'vertical') {
+                point.x = endX; point.y = startY;
+            } else {
+                point.x = endX; point.y = endY;
+            }
+            break;
+        case 270:
+            if (flip === 'horizontal') {
+                point.x = endX; point.y = endY;
+            } else if (flip === 'vertical') {
+                point.x = startX; point.y = startY;
+            } else {
+                point.x = startX; point.y = endY;
+            }
+            break;
+        }
+        return point;
+    }
+
+    private setTextBoxPoints(actObj: SelectionPoint, degree: number, flip: string, x: number, y: number): Point {
+        const point: Point = {x: x, y: y};
+        const { startX, startY, endX, endY } = actObj.activePoint;
+        flip = flip.toLowerCase();
+        switch (degree) {
+        case 0:
+            if (actObj.flipObjColl[0] && actObj.flipObjColl[0].toLowerCase() === 'horizontal') {
+                if (flip === 'horizontal') {
+                    point.x = startX; point.y = startY;
+                } else if (flip === 'vertical') {
+                    point.x = endX; point.y = endY;
+                }
+            } else {
+                if (flip === 'horizontal') {
+                    point.x = endX; point.y = endY;
+                } else if (flip === 'vertical') {
+                    point.x = endX; point.y = startY;
+                }
+            }
+            break;
+        case 90:
+            if (actObj.flipObjColl[0] && actObj.flipObjColl[0].toLowerCase() === 'horizontal') {
+                if (flip === 'horizontal') {
+                    point.x = endX; point.y = endY;
+                } else if (flip === 'vertical') {
+                    point.x = startX; point.y = endY;
+                }
+            } else {
+                if (flip === 'horizontal') {
+                    point.x = startX; point.y = endY;
+                } else if (flip === 'vertical') {
+                    point.x = startX; point.y = startY;
+                }
+            }
+            break;
+        case 180:
+            if (actObj.flipObjColl[0] && actObj.flipObjColl[0].toLowerCase() === 'horizontal') {
+                if (flip === 'horizontal') {
+                    point.x = startX; point.y = startY;
+                } else if (flip === 'vertical') {
+                    point.x = startX; point.y = startY;
+                }
+            } else {
+                if (flip === 'horizontal') {
+                    point.x = startX; point.y = startY;
+                } else if (flip === 'vertical') {
+                    point.x = startX; point.y = endY;
+                }
+            }
+            break;
+        case 270:
+            if (actObj.flipObjColl[0] && actObj.flipObjColl[0].toLowerCase() === 'horizontal') {
+                if (flip === 'horizontal') {
+                    point.x = startX; point.y = startY;
+                } else if (flip === 'vertical') {
+                    point.x = endX; point.y = startY;
+                }
+            } else {
+                if (flip === 'horizontal') {
+                    point.x = endX; point.y = startY;
+                } else if (flip === 'vertical') {
+                    point.x = endX; point.y = endY;
+                }
+            }
+            break;
+        }
+        return point;
+    }
+
+    private selectedText(): string {
+        const parent: ImageEditor = this.parent;
+        const start: number = parent.textArea.selectionStart;
+        const finish: number = parent.textArea.selectionEnd;
+        return parent.textArea.value.substring(start, finish);
+    }
+
+    private panObjColl(xDiff: number, yDiff: number, panRegion: string): void {
+        const parent: ImageEditor = this.parent;
+        if (parent.objColl.length > 0) {
+            for (let i: number = 0, len: number = parent.objColl.length; i < len; i++) {
+                let currObj: SelectionPoint = parent.objColl[i as number];
+                if (panRegion === '') {
+                    currObj.activePoint.startX += xDiff;
+                    currObj.activePoint.endX += xDiff;
+                    if (currObj.rotationCirclePointColl) {
+                        currObj.rotationCirclePointColl.x += xDiff;
+                    }
+                    if (currObj.shape === 'path') {
+                        for (let l: number = 0, len: number = currObj.pointColl.length; l < len; l++) {
+                            currObj.pointColl[l as number].x += xDiff;
+                        }
+                    }
+                    currObj.activePoint.startY += yDiff;
+                    currObj.activePoint.endY += yDiff;
+                    if (currObj.rotationCirclePointColl) {
+                        currObj.rotationCirclePointColl.y += yDiff;
+                    }
+                    if (currObj.shape === 'path') {
+                        for (let l: number = 0; l < currObj.pointColl.length; l++) {
+                            currObj.pointColl[l as number].y += yDiff;
+                        }
+                    }
+                }
+                currObj = this.updateWidthHeight(currObj);
+                parent.notify('draw', { prop: 'updateActiveObject', onPropertyChange: false, value:
+                {actPoint: currObj.activePoint,
+                    obj: currObj}});
+                if (currObj.shape === 'line' || currObj.shape === 'arrow') {
+                    currObj.pointColl = this.getLinePoints(currObj.activePoint.startX, currObj.activePoint.startY, currObj.activePoint.endX,
+                                                           currObj.activePoint.endY);
+                    for (let j: number = 0, len: number = currObj.pointColl.length; j < len; j++) {
+                        currObj.pointColl[j as number].ratioX =
+                            (currObj.pointColl[j as number].x - parent.img.destLeft) / parent.img.destWidth;
+                        currObj.pointColl[j as number].ratioY =
+                            (currObj.pointColl[j as number].y - parent.img.destTop) / parent.img.destHeight;
+                    }
+                }
+                this.refreshActiveObj();
+            }
+            const temp: string = this.lowerContext.filter; this.lowerContext.filter = 'none';
+            this.iterateObjColl();
+            this.lowerContext.filter = temp; this.refreshActiveObj();
+            parent.notify('draw', {prop: 'applyFrame', value: {ctx: this.lowerContext, frame: parent.frameObj.type, preventImg: true}});
+        }
+    }
+
+    private updateFontStyles(isTextBox?: boolean): void {
+        const parent: ImageEditor = this.parent;
+        this.upperContext.strokeStyle = parent.activeObj.strokeSettings.strokeColor;
+        this.upperContext.fillStyle = parent.activeObj.strokeSettings.strokeColor;
+        let textStyle: string = '';
+        if (parent.activeObj.textSettings.bold) {textStyle = 'bold '; }
+        if (parent.activeObj.textSettings.italic) {textStyle = 'italic '; }
+        if (parent.activeObj.textSettings.bold && parent.activeObj.textSettings.italic) {textStyle = 'italic bold '; }
+        const fontSize: number = isTextBox ? parseFloat(parent.textArea.style.fontSize) : parent.activeObj.textSettings.fontSize;
+        const fontFamily: string = (parent.textArea.style.display === 'block' || parent.textArea.style.display === 'inline-block') ?
+            parent.textArea.style.fontFamily : parent.activeObj.textSettings.fontFamily;
+        this.upperContext.font = textStyle + fontSize + 'px' + ' ' + fontFamily;
+    }
+
+    private applyFontStyle(item: string): void {
+        const parent: ImageEditor = this.parent;
+        const obj: Object = {shapeSettingsObj: {} as ShapeSettings };
+        parent.notify('selection', { prop: 'updatePrevShapeSettings', onPropertyChange: false, value: {obj: obj}});
+        const shapeSettings: ShapeSettings = obj['shapeSettingsObj'];
+        let isObjPushed: boolean = false;
+        const collLength: number = parent.objColl.length;
+        this.pushActItemIntoObj();
+        if (collLength !== parent.objColl.length) {isObjPushed = true; }
+        const objColl: SelectionPoint[] = extend([], parent.objColl, [], true) as SelectionPoint[];
+        if (isObjPushed) {
+            parent.objColl.pop();
+        }
+        if (parent.textArea.style.display === 'none') { this.updateFontRatio(parent.activeObj); }
+        else { this.updateFontRatio(parent.activeObj, true); }
+        switch (item) {
+        case 'default':
+            this.updateFontStyle(item, objColl, 'normal', 'normal', false, false);
+            break;
+        case 'bold':
+            this.updateFontStyle(item, objColl, 'bold', 'normal', false, false);
+            break;
+        case 'italic':
+            this.updateFontStyle(item, objColl, 'normal', 'italic', false, false);
+            break;
+        case 'bolditalic':
+            this.updateFontStyle(item, objColl, 'bold', 'italic', false, false);
+            break;
+        case 'underline':
+            this.updateFontStyle(item, objColl, 'normal', 'normal', true, false);
+            break;
+        case 'boldunderline':
+            this.updateFontStyle(item, objColl, 'bold', 'normal', true, false);
+            break;
+        case 'italicunderline':
+            this.updateFontStyle(item, objColl, 'normal', 'italic', true, false);
+            break;
+        case 'bolditalicunderline':
+            this.updateFontStyle(item, objColl, 'bold', 'italic', true, false);
+            break;
+        case 'strikethrough':
+            this.updateFontStyle(item, objColl, 'normal', 'normal', false, true);
+            break;
+        case 'boldstrikethrough':
+            this.updateFontStyle(item, objColl, 'bold', 'normal', false, true);
+            break;
+        case 'italicstrikethrough':
+            this.updateFontStyle(item, objColl, 'normal', 'italic', false, true);
+            break;
+        case 'underlinestrikethrough':
+            this.updateFontStyle(item, objColl, 'normal', 'normal', true, true);
+            break;
+        case 'bolditalicstrikethrough':
+            this.updateFontStyle(item, objColl, 'bold', 'italic', false, true);
+            break;
+        case 'boldunderlinestrikethrough':
+            this.updateFontStyle(item, objColl, 'bold', 'normal', true, true);
+            break;
+        case 'italicunderlinestrikethrough':
+            this.updateFontStyle(item, objColl, 'normal', 'italic', true, true);
+            break;
+        case 'bolditalicunderlinestrikethrough':
+            this.updateFontStyle(item, objColl, 'bold', 'italic', true, true);
+            break;
+        }
+        const shapeChangedArgs: ShapeChangeEventArgs = {action: 'font-style', currentShapeSettings: extend({}, shapeSettings, {}, true) as ShapeSettings};
+        shapeChangedArgs.currentShapeSettings.fontStyle = this.getFontStyleArray(item);
+        parent.trigger('shapeChange', shapeChangedArgs);
+        parent.editCompleteArgs = shapeChangedArgs;
+    }
+
+    private getFontStyleArray(item: string): string[] {
+        const styleArray: string[] = [];
+        const lowerItem: string = item.toLowerCase();
+        if (lowerItem.indexOf('bold') > -1) {
+            styleArray.push('bold');
+        }
+        if (lowerItem.indexOf('italic') > -1) {
+            styleArray.push('italic');
+        }
+        if (lowerItem.indexOf('underline') > -1) {
+            styleArray.push('underline');
+        }
+        if (lowerItem.indexOf('strikethrough') > -1) {
+            styleArray.push('strikethrough');
+        }
+        return styleArray;
+    }
+
+    private updateFontStyle(item: string, objColl: SelectionPoint[], fontWeight: string, fontStyle: string, underline: boolean,
+                            strikethrough: boolean): void {
+        const parent: ImageEditor = this.parent;
+        const style: CSSStyleDeclaration = parent.textArea.style;
+        if (style.display === 'block' || style.display === 'inline-block') {
+            if (fontWeight === 'bold') {style.fontWeight = 'bold'; }
+            else {style.fontWeight = 'normal'; }
+            if (fontStyle === 'italic') {style.fontStyle = 'italic'; }
+            else {style.fontStyle = 'normal'; }
+            if (underline && strikethrough) {
+                style.textDecoration = 'underline line-through';
+            }
+            else if (strikethrough)
+            {
+                style.textDecoration = 'line-through';
+            }
+            else if (underline) {
+                style.textDecoration = 'underline';
+            }
+            else {
+                style.textDecoration = 'none';
+            }
+            const key: string = [
+                style.fontWeight === 'bold' ? 'bold' : '',
+                style.fontStyle === 'italic' ? 'italic' : '',
+                typeof style.textDecoration === 'string' && style.textDecoration.indexOf('underline') > -1 ? 'underline' : '',
+                typeof style.textDecoration === 'string' && style.textDecoration.indexOf('line-through') > -1 ? 'strikethrough' : ''
+            ].filter(Boolean).join('');
+            const valueMap: Record<string, string> = {
+                '': 'default',
+                bold: 'bold',
+                italic: 'italic',
+                underline: 'underline',
+                strikethrough: 'strikethrough',
+                bolditalic: 'bolditalic',
+                boldunderline: 'boldunderline',
+                boldstrikethrough: 'boldstrikethrough',
+                italicunderline: 'italicunderline',
+                italicstrikethrough: 'italicstrikethrough',
+                underlinestrikethrough: 'underlinestrikethrough',
+                bolditalicunderline: 'bolditalicunderline',
+                bolditalicstrikethrough: 'bolditalicstrikethrough',
+                boldunderlinestrikethrough: 'boldunderlinestrikethrough',
+                italicunderlinestrikethrough: 'italicunderlinestrikethrough',
+                bolditalicunderlinestrikethrough: 'bolditalicunderlinestrikethrough'
+            };
+            const value: string = key in valueMap ? valueMap[key as string] : 'default';
+            const width: number = this.getTextAreaWidth(value); style.width = width + 'px';
+            this.updateObjColl(item, objColl);
+        } else {
+            this.textSettings.bold = parent.activeObj.textSettings.bold = fontWeight === 'normal' ? false : true;
+            this.textSettings.italic = parent.activeObj.textSettings.italic = fontStyle === 'normal' ? false : true;
+            this.textSettings.underline = parent.activeObj.textSettings.underline = underline ? true : false;
+            this.textSettings.strikethrough = parent.activeObj.textSettings.strikethrough = strikethrough ? true : false;
+            if (parent.activeObj.activePoint.width !== 0 || parent.activeObj.activePoint.height !== 0) {
+                this.redrawText();
+            }
+            parent.notify('undo-redo', { prop: 'updateUrObj', onPropertyChange: false, value: {objColl: objColl}});
+        }
+    }
+
+    private updateArrowRatio(obj: SelectionPoint): void {
+        const parent: ImageEditor = this.parent;
+        const object: Object = {arrowDimension: null };
+        parent.notify('draw', { prop: 'getArrowDimension', onPropertyChange: false, value: {obj: object }});
+        let length: number;
+        if (Math.abs(obj.activePoint.width) > Math.abs(obj.activePoint.height)) {length =  Math.abs(obj.activePoint.width); }
+        else {length =  Math.abs(obj.activePoint.height); }
+        let dimension: string; const dimensions: string[] = ['bar', 'arrow', 'arrowSolid', 'circle', 'square'];
+        for (dimension of dimensions) {
+            const ratioX: number = length / object['arrowDimension'][dimension as string]['width'];
+            const ratioY: number = length / object['arrowDimension'][dimension as string]['height'];
+            object['arrowDimension'][dimension as string]['ratioX'] = ratioX;
+            object['arrowDimension'][dimension as string]['ratioY'] = ratioY;
+        }
+    }
+
+    private updateArrowSize(obj: SelectionPoint): void {
+        const object: Object = {arrowDimension: null };
+        this.parent.notify('draw', { prop: 'getArrowDimension', onPropertyChange: false, value: {obj: object }});
+        let length: number;
+        if (Math.abs(obj.activePoint.width) > Math.abs(obj.activePoint.height)) {length =  Math.abs(obj.activePoint.width); }
+        else {length =  Math.abs(obj.activePoint.height); }
+        let dimension: string; const dimensions: string[] = ['bar', 'arrow', 'arrowSolid', 'circle', 'square'];
+        for (dimension of dimensions) {
+            const ratioX: number = object['arrowDimension'][dimension as string]['ratioX'];
+            const ratioY: number = object['arrowDimension'][dimension as string]['ratioY'];
+            object['arrowDimension'][dimension as string]['width'] = length / ratioX;
+            object['arrowDimension'][dimension as string]['height'] = length / ratioY;
+        }
+    }
+
+    private updateFontRatio(obj: SelectionPoint, isTextArea?: boolean): void {
+        const parent: ImageEditor = this.parent;
+        const text: string = this.getMaxText(isTextArea);
+        const width: number = this.upperContext.measureText(text).width +
+            parent.activeObj.textSettings.fontSize * 0.5;
+        const height: number = parent.activeObj.textSettings.fontSize;
+        const degree: number = this.getRotDegOfShape(obj);
+        if (isNullOrUndefined(isTextArea)) {
+            if (degree === 0 || Math.abs(degree) === 180) {
+                obj.textSettings.fontRatio = width / obj.textSettings.fontSize;
+            } else {
+                obj.textSettings.fontRatio = height / obj.textSettings.fontSize;
+            }
+        } else if (isTextArea) {
+            const transformObj: Object = {bool: false };
+            parent.notify('selection', { prop: 'getTransformedShape', onPropertyChange: false, value: {obj: transformObj}});
+            if (!transformObj['bool'] || degree === 0 || Math.abs(degree) === 180) {
+                obj.textSettings.fontRatio = width / parseFloat(parent.textArea.style.fontSize);
+            } else {
+                obj.textSettings.fontRatio = height / parseFloat(parent.textArea.style.fontSize);
+            }
+        }
+    }
+
+    private updateFontSize(obj: SelectionPoint): void {
+        const degree: number = this.getRotDegOfShape(obj, true);
+        if (degree === 0 || Math.abs(degree) === 180) {
+            obj.textSettings.fontSize = (obj.activePoint.width / obj.textSettings.fontRatio);
+        } else {
+            obj.textSettings.fontSize = (obj.activePoint.height / obj.textSettings.fontRatio);
+        }
+    }
+
+    private updateObjColl(item: string, objColl: SelectionPoint[]): 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 = objColl;
+        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[];
+        const textSettings: TextSettings = parent.activeObj.textSettings;
+        const tempBold: boolean = textSettings.bold;
+        const tempItalic: boolean = textSettings.italic;
+        const tempUnderline: boolean = textSettings.underline;
+        const tempStrikethrough: boolean = textSettings.strikethrough;
+        switch (item) {
+        case 'default':
+            textSettings.bold = false;
+            textSettings.italic = false;
+            textSettings.underline = false;
+            textSettings.strikethrough = false;
+            break;
+        case 'bold':
+            textSettings.bold = true;
+            textSettings.italic = false;
+            textSettings.underline = false;
+            textSettings.strikethrough = false;
+            break;
+        case 'italic':
+            textSettings.bold = false;
+            textSettings.italic = true;
+            textSettings.underline = false;
+            textSettings.strikethrough = false;
+            break;
+        case 'bolditalic':
+            textSettings.bold = true;
+            textSettings.italic = true;
+            textSettings.underline = false;
+            textSettings.strikethrough = false;
+            break;
+        case 'underline':
+            textSettings.bold = false;
+            textSettings.italic = false;
+            textSettings.underline = true;
+            textSettings.strikethrough = false;
+            break;
+        case 'boldunderline':
+            textSettings.bold = true;
+            textSettings.italic = false;
+            textSettings.underline = true;
+            textSettings.strikethrough = false;
+            break;
+        case 'italicunderline':
+            textSettings.bold = false;
+            textSettings.italic = true;
+            textSettings.underline = true;
+            textSettings.strikethrough = false;
+            break;
+        case 'bolditalicunderline':
+            textSettings.bold = true;
+            textSettings.italic = true;
+            textSettings.underline = true;
+            textSettings.strikethrough = false;
+            break;
+        case 'strikethrough':
+            textSettings.bold = false;
+            textSettings.italic = false;
+            textSettings.underline = false;
+            textSettings.strikethrough = true;
+            break;
+        case 'boldstrikethrough':
+            textSettings.bold = true;
+            textSettings.italic = false;
+            textSettings.underline = false;
+            textSettings.strikethrough = true;
+            break;
+        case 'italicstrikethrough':
+            textSettings.bold = false;
+            textSettings.italic = true;
+            textSettings.underline = false;
+            textSettings.strikethrough = true;
+            break;
+        case 'underlinestrikethrough':
+            textSettings.bold = false;
+            textSettings.italic = false;
+            textSettings.underline = true;
+            textSettings.strikethrough = true;
+            break;
+        case 'bolditalicstrikethrough':
+            textSettings.bold = true;
+            textSettings.italic = true;
+            textSettings.underline = false;
+            textSettings.strikethrough = true;
+            break;
+        case 'boldunderlinestrikethrough':
+            textSettings.bold = true;
+            textSettings.italic = false;
+            textSettings.underline = true;
+            textSettings.strikethrough = true;
+            break;
+        case 'italicunderlinestrikethrough':
+            textSettings.bold = false;
+            textSettings.italic = true;
+            textSettings.underline = true;
+            textSettings.strikethrough = true;
+            break;
+        case 'bolditalicunderlinestrikethrough':
+            textSettings.bold = true;
+            textSettings.italic = true;
+            textSettings.underline = true;
+            textSettings.strikethrough = true;
+            break;
+        }
+        parent.objColl.push(parent.activeObj);
+        parent.notify('undo-redo', { prop: 'updateUndoRedoColl', onPropertyChange: false,
+            value: {operation: 'textAreaCustomization', previousObj: prevObj, previousObjColl: prevObj.objColl,
+                previousPointColl: prevObj.pointColl, previousSelPointColl: prevObj.selPointColl,
+                previousCropObj: prevCropObj, previousText: null,
+                currentText: null, previousFilter: null, isCircleCrop: null}});
+        parent.objColl.pop();
+        textSettings.bold = tempBold; textSettings.italic = tempItalic;
+        textSettings.underline = tempUnderline; textSettings.strikethrough = tempStrikethrough;
+    }
+
+    private pushActItemIntoObj(): void {
+        const parent: ImageEditor = this.parent;
+        if (parent.textArea.style.display === 'none') {
+            if (parent.activeObj.activePoint.width !== 0 || parent.activeObj.activePoint.height !== 0) {
+                parent.objColl.push(parent.activeObj);
+            }
+        } else {
+            const temp: SelectionPoint = extend({}, parent.activeObj, {}, true) as SelectionPoint;
+            parent.notify('selection', { prop: 'setTextBoxStylesToActObj', onPropertyChange: false });
+            parent.objColl.push(parent.activeObj); parent.activeObj = temp;
+        }
+    }
+
+    private clearActObj(): void {
+        const parent: ImageEditor = this.parent;
+        if (parent.textArea.style.display === 'none') {
+            this.refreshActiveObj(); this.applyActObj();
+            this.refreshActiveObj(); parent.currObjType.isCustomCrop = false;
+        }
+    }
+
+    private refreshActiveObj(): void {
+        const parent: ImageEditor = this.parent;
+        parent.activeObj = {} as SelectionPoint;
+        parent.activeObj.activePoint = {startX: 0, startY: 0, endX: 0, endY: 0, width: 0, height: 0};
+        parent.activeObj.triangle = []; parent.activeObj.triangleRatio = []; parent.activeObj.order = null;
+        parent.activeObj.flipObjColl = []; parent.activeObj.strokeSettings = this.strokeSettings;
+        parent.activeObj.textSettings = this.textSettings; parent.activeObj.rotatedAngle = 0;
+        parent.activeObj.opacity = 1;
+        parent.activeObj.redactType = this.redactType;
+        parent.activeObj.redactBlur = parent.tempRedactBlur;
+        parent.activeObj.redactPixelate = parent.tempRedactPixel;
+    }
+
+    private applyActObj(isMouseDown?: boolean): void {
+        const parent: ImageEditor = this.parent;
+        let isActObj: boolean = false;
+        if (parent.activeObj.shape !== undefined && parent.activeObj.shape === 'text' && parent.activeObj.keyHistory === '') {
+            this.refreshActiveObj();
+            this.upperContext.clearRect(0, 0 , parent.upperCanvas.width, parent.upperCanvas.height);
+        } else {
+            let splitWords: string[]; let isCropSelection: boolean = false;
+            if (parent.activeObj.shape !== undefined) {splitWords = parent.activeObj.shape.split('-'); }
+            if (splitWords === undefined && parent.currObjType.isCustomCrop) {isCropSelection = true; }
+            else if (splitWords !== undefined && splitWords[0] === 'crop') {isCropSelection = true; }
+            if (parent.activeObj.shape && !isCropSelection && parent.activeObj.shape !== 'shape') {
+                for (let i: number = 0; i < parent.objColl.length; i++) {
+                    if (JSON.stringify(parent.activeObj) === JSON.stringify(parent.objColl[i as number])) {
+                        isActObj = true;
+                        break;
+                    }
+                }
+                if (!isActObj) {
+                    if (isNullOrUndefined(parent.activeObj.currIndex)) {
+                        parent.activeObj.currIndex = this.getNewShapeId();
+                    }
+                    if (isNullOrUndefined(parent.activeObj.order)) {
+                        parent.activeObj.order = this.getNewOrder();
+                    }
+                    this.updImgRatioForActObj();
+                    const splitWords: string[] = parent.activeObj.currIndex.split('_');
+                    let tempObjColl: SelectionPoint[] = parent.objColl.splice(0, parseInt(splitWords[1], 10) - 1);
+                    tempObjColl.push(extend({}, parent.activeObj, {}, true) as SelectionPoint);
+                    for (let i: number = 0; i < parent.objColl.length; i++) {
+                        tempObjColl.push(parent.objColl[i as number]);
+                    }
+                    parent.objColl = tempObjColl;
+                    tempObjColl = []; this.refreshActiveObj();
+                    this.lowerContext.clearRect(0, 0, parent.lowerCanvas.width, parent.lowerCanvas.height);
+                    parent.notify('draw', { prop: 'redrawImgWithObj', onPropertyChange: false});
+                    parent.notify('draw', { prop: 'clearOuterCanvas', onPropertyChange: false, value: {context: this.lowerContext}});
+                    parent.notify('draw', { prop: 'clearOuterCanvas', onPropertyChange: false, value: {context: this.upperContext}});
+                    parent.currObjType.shape = ''; this.refreshActiveObj();
+                    if (parent.isCircleCrop) {
+                        parent.notify('crop', { prop: 'cropCircle', onPropertyChange: false,
+                            value: {context: this.lowerContext, isSave: null, isFlip: null}});
+                    }
+                    parent.notify('toolbar', { prop: 'destroy-qa-toolbar', onPropertyChange: false});
+                    if (isNullOrUndefined(isMouseDown)) {
+                        parent.notify('undo-redo', {prop: 'updateCurrUrc', value: {type: 'ok' }});
+                        parent.notify('draw', { prop: 'setPrevActObj', onPropertyChange: false, value: { prevActObj: null }});
+                    }
+                }
+            }
+        }
+    }
+
+    private getNewShapeId(): string {
+        const parent: ImageEditor = this.parent;
+        let value: number = parent.objColl.length + 1;
+        for (let i: number = 0; i < parent.objColl.length; i++) {
+            if (parent.objColl[i as number].currIndex === 'shape_' + value) {
+                value++; i = -1;
+            }
+        }
+        return 'shape_' + value;
+    }
+
+    private getNewOrder(): number {
+        const parent: ImageEditor = this.parent;
+        this.updateShapeColl();
+        let value: number = parent.shapeColl.length + 1;
+        for (let i: number = 0; i < parent.shapeColl.length; i++) {
+            if (parent.shapeColl[i as number].order === value) {
+                value++; i = -1;
+            }
+        }
+        return value;
+    }
+
+    private getHighestOrder(): number {
+        const parent: ImageEditor = this.parent;
+        this.updateShapeColl();
+        let value: number = 0;
+        for (let i: number = 0; i < parent.shapeColl.length; i++) {
+            if (parent.shapeColl[i as number].order > value) {
+                value = parent.shapeColl[i as number].order;
+            }
+        }
+        return value;
+    }
+
+    private getLowestOrder(): number {
+        const parent: ImageEditor = this.parent;
+        this.updateShapeColl();
+        let value: number = 1;
+        for (let i: number = 0; i < parent.shapeColl.length; i++) {
+            if (parent.shapeColl[i as number].order < value) {
+                value = parent.shapeColl[i as number].order;
+            }
+        }
+        return value;
+    }
+
+    private alignTextAreaIntoCanvas(): void {
+        const parent: ImageEditor = this.parent; const letters: string = parent.textArea.value;
+        parent.textArea.value = '';
+        for (let i: number = 0, len: number = letters.length; i < len; i++) {
+            parent.textArea.value += letters[i as number]; parent.textArea.style.height = 'auto';
+            parent.textArea.style.height = parent.textArea.scrollHeight + 'px'; this.setTextBoxWidth();
+        }
+    }
+
+    private transformTextArea(): void {
+        const parent: ImageEditor = this.parent;
+        if (parent.activeObj.shape === 'text') {
+            parent.textArea.style.transformOrigin = '0 0';
+            const rotatedDegree: number = parent.activeObj.rotatedAngle * (180 / Math.PI);
+            let scale: string = ''; let degree: number = this.getRotDegOfShape(parent.activeObj);
+            if (parent.activeObj.flipObjColl.length > 0) {
+                for (let i: number = 0; i < parent.activeObj.flipObjColl.length; i++) {
+                    if (degree !== 0 && degree % 90 === 0 && degree !== 180) {
+                        scale += parent.activeObj.flipObjColl[i as number].toLowerCase() === 'horizontal' ? 'scale(1, -1)' :
+                            'scale(-1, 1)';
+                    } else {
+                        scale += parent.activeObj.flipObjColl[i as number].toLowerCase() === 'horizontal' ? 'scale(-1, 1)' :
+                            'scale(1, -1)';
+                    }
+                    degree += rotatedDegree;
+                    if (parent.activeObj.flipObjColl[i as number].toLowerCase() === 'horizontal') {
+                        parent.textArea.style.transform = 'rotate(' + degree + 'deg)' + scale;
+                    } else if (parent.activeObj.flipObjColl[i as number].toLowerCase() === 'vertical') {
+                        parent.textArea.style.transform = 'rotate(' + degree + 'deg)' + scale;
+                    }
+                }
+            } else {
+                degree += rotatedDegree; parent.textArea.style.transform = 'rotate(' + degree + 'deg)';
+            }
+        }
+    }
+
+    private getTextAreaWidth(item: string): number {
+        const parent: ImageEditor = this.parent;
+        const textSettings: TextSettings = parent.activeObj.textSettings;
+        const tempBold: boolean = textSettings.bold;
+        const tempItalic: boolean = textSettings.italic;
+        const tempUnderline: boolean = textSettings.underline;
+        const tempStrikethrough: boolean = textSettings.strikethrough;
+        switch (item) {
+        case 'default':
+            textSettings.bold = false;
+            textSettings.italic = false;
+            textSettings.underline = false;
+            textSettings.strikethrough = false;
+            break;
+        case 'bold':
+            textSettings.bold = true;
+            textSettings.italic = false;
+            textSettings.underline = false;
+            textSettings.strikethrough = false;
+            break;
+        case 'italic':
+            textSettings.bold = false;
+            textSettings.italic = true;
+            textSettings.underline = false;
+            textSettings.strikethrough = false;
+            break;
+        case 'bolditalic':
+            textSettings.bold = true;
+            textSettings.italic = true;
+            textSettings.underline = false;
+            textSettings.strikethrough = false;
+            break;
+        case 'underline':
+            textSettings.bold = false;
+            textSettings.italic = false;
+            textSettings.underline = true;
+            textSettings.strikethrough = false;
+            break;
+        case 'boldunderline':
+            textSettings.bold = true;
+            textSettings.italic = false;
+            textSettings.underline = true;
+            textSettings.strikethrough = false;
+            break;
+        case 'italicunderline':
+            textSettings.bold = false;
+            textSettings.italic = true;
+            textSettings.underline = true;
+            textSettings.strikethrough = false;
+            break;
+        case 'bolditalicunderline':
+            textSettings.bold = true;
+            textSettings.italic = true;
+            textSettings.underline = true;
+            textSettings.strikethrough = false;
+            break;
+        case 'strikethrough':
+            textSettings.bold = false;
+            textSettings.italic = false;
+            textSettings.underline = false;
+            textSettings.strikethrough = true;
+            break;
+        case 'boldstrikethrough':
+            textSettings.bold = true;
+            textSettings.italic = false;
+            textSettings.underline = false;
+            textSettings.strikethrough = true;
+            break;
+        case 'italicstrikethrough':
+            textSettings.bold = false;
+            textSettings.italic = true;
+            textSettings.underline = false;
+            textSettings.strikethrough = true;
+            break;
+        case 'underlinestrikethrough':
+            textSettings.bold = false;
+            textSettings.italic = false;
+            textSettings.underline = true;
+            textSettings.strikethrough = true;
+            break;
+        case 'bolditalicstrikethrough':
+            textSettings.bold = true;
+            textSettings.italic = true;
+            textSettings.underline = false;
+            textSettings.strikethrough = true;
+            break;
+        case 'boldunderlinestrikethrough':
+            textSettings.bold = true;
+            textSettings.italic = false;
+            textSettings.underline = true;
+            textSettings.strikethrough = true;
+            break;
+        case 'italicunderlinestrikethrough':
+            textSettings.bold = false;
+            textSettings.italic = true;
+            textSettings.underline = true;
+            textSettings.strikethrough = true;
+            break;
+        case 'bolditalicunderlinestrikethrough':
+            textSettings.bold = true;
+            textSettings.italic = true;
+            textSettings.underline = true;
+            textSettings.strikethrough = true;
+            break;
+        }
+        const isTextArea: boolean = parent.textArea.style.display === 'none' ? false : true;
+        this.updateFontStyles(isTextArea); let width: number;
+        if (!isTextArea) {
+            width = this.upperContext.measureText(parent.activeObj.keyHistory).width +
+            textSettings.fontSize * 0.5;
+        } else {
+            width = this.upperContext.measureText(parent.textArea.value).width +
+            textSettings.fontSize * 0.5;
+        }
+        textSettings.bold = tempBold; textSettings.italic = tempItalic;
+        textSettings.underline = tempUnderline; textSettings.strikethrough = tempStrikethrough;
+        return width;
+    }
+
+    private getRedactObjDetails(obj: SelectionPoint): RedactSettings {
+        const parent: ImageEditor = this.parent;
+        const redactDetails: RedactSettings = {} as RedactSettings; redactDetails.id = obj.currIndex;
+        redactDetails.type = parent.toPascalCase(obj.redactType) as RedactType;
+        redactDetails.startX = obj.activePoint.startX; redactDetails.startY = obj.activePoint.startY;
+        redactDetails.width = obj.activePoint.width; redactDetails.height = obj.activePoint.height;
+        switch (obj.redactType) {
+        case 'blur':
+            redactDetails.blurIntensity = obj.redactBlur;
+            break;
+        case 'pixelate':
+            redactDetails.pixelSize = obj.redactPixelate;
+            break;
+        }
+        return redactDetails;
+    }
+
+    private getObjDetails(obj: SelectionPoint): ShapeSettings {
+        const parent: ImageEditor = this.parent;
+        const shapeDetails: ShapeSettings = {} as ShapeSettings; shapeDetails.id = obj.currIndex;
+        shapeDetails.type = parent.toPascalCase(obj.shape) as ShapeType;
+        shapeDetails.startX = obj.activePoint.startX; shapeDetails.startY = obj.activePoint.startY;
+        shapeDetails.index = obj.order;
+        const transformObj: Object = {coll: null };
+        switch (obj.shape) {
+        case 'rectangle':
+            shapeDetails.width = obj.activePoint.width;
+            shapeDetails.height = obj.activePoint.height;
+            shapeDetails.strokeColor = obj.strokeSettings.strokeColor;
+            shapeDetails.fillColor = obj.strokeSettings.fillColor;
+            shapeDetails.strokeWidth = obj.strokeSettings.strokeWidth;
+            shapeDetails.degree = obj.rotatedAngle * (180 / Math.PI);
+            break;
+        case 'ellipse':
+            shapeDetails.radius = obj.activePoint.width / 2;
+            shapeDetails.strokeColor = obj.strokeSettings.strokeColor;
+            shapeDetails.fillColor = obj.strokeSettings.fillColor;
+            shapeDetails.strokeWidth = obj.strokeSettings.strokeWidth;
+            shapeDetails.radiusX = obj.activePoint.width / 2;
+            shapeDetails.radiusY = obj.activePoint.height / 2;
+            shapeDetails.degree = obj.rotatedAngle * (180 / Math.PI);
+            break;
+        case 'line':
+        case 'arrow':
+            shapeDetails.length = obj.activePoint.width;
+            shapeDetails.strokeColor = obj.strokeSettings.strokeColor;
+            shapeDetails.strokeWidth = obj.strokeSettings.strokeWidth;
+            shapeDetails.endX = obj.activePoint.endX;
+            shapeDetails.endY = obj.activePoint.endY;
+            if (obj.shape === 'arrow') {
+                const arrowObj: Object = {type: null };
+                parent.notify('selection', {prop: 'getArrowType', onPropertyChange: false, value: {type: obj.start, obj: arrowObj}});
+                shapeDetails.arrowHead = arrowObj['type'];
+                parent.notify('selection', {prop: 'getArrowType', onPropertyChange: false, value: {type: obj.end, obj: arrowObj}});
+                shapeDetails.arrowTail = arrowObj['type'];
+            }
+            break;
+        case 'text':
+            shapeDetails.text = obj.keyHistory;
+            shapeDetails.fontSize = obj.textSettings.fontSize;
+            shapeDetails.fontFamily = obj.textSettings.fontFamily;
+            shapeDetails.color = obj.strokeSettings.strokeColor;
+            shapeDetails.strokeColor = obj.strokeSettings.outlineColor;
+            shapeDetails.fillColor = obj.strokeSettings.fillColor;
+            shapeDetails.strokeWidth = obj.strokeSettings.outlineWidth;
+            shapeDetails.fontStyle = [];
+            if (obj.textSettings.bold) {shapeDetails.fontStyle.push('bold'); }
+            if (obj.textSettings.italic) {shapeDetails.fontStyle.push('italic'); }
+            if (obj.textSettings.underline) {shapeDetails.fontStyle.push('underline'); }
+            if (obj.textSettings.strikethrough) {shapeDetails.fontStyle.push('strikethrough'); }
+            shapeDetails.degree = obj.rotatedAngle * (180 / Math.PI);
+            parent.notify('selection', {prop: 'updateTransColl', onPropertyChange: false, value: {obj: transformObj, object: obj}});
+            shapeDetails.transformCollection = transformObj['coll'];
+            break;
+        case 'path':
+            shapeDetails.strokeColor = obj.strokeSettings.strokeColor;
+            shapeDetails.strokeWidth = obj.strokeSettings.strokeWidth;
+            shapeDetails.points = obj.pointColl;
+            break;
+        case 'image':
+            shapeDetails.imageData = obj.imageCanvas.toDataURL();
+            shapeDetails.degree = obj.rotatedAngle * (180 / Math.PI);
+            shapeDetails.width = obj.activePoint.width;
+            shapeDetails.height = obj.activePoint.height;
+            shapeDetails.opacity = obj.opacity;
+            break;
+        }
+        return shapeDetails;
+    }
+
+    private getFreehandDrawDetails(index: number): ShapeSettings {
+        const parent: ImageEditor = this.parent;
+        const shapeDetails: ShapeSettings = {} as ShapeSettings;
+        shapeDetails.id = parent.pointColl[index as number].id;
+        shapeDetails.type = ShapeType.FreehandDraw;
+        shapeDetails.points = extend([], parent.pointColl[index as number].points) as Point[];
+        shapeDetails.strokeColor = parent.pointColl[index as number].strokeColor;
+        shapeDetails.strokeWidth = parent.pointColl[index as number].strokeWidth;
+        shapeDetails.index = parent.pointColl[index as number].order;
+        return shapeDetails;
+    }
+
+    private getShapeSetting(id: string, obj: Object): void {
+        const parent: ImageEditor = this.parent; let shapeDetails: ShapeSettings;
+        if (!parent.disabled && parent.isImageLoaded) {
+            if (parent.textArea.style.display !== 'none') {
+                parent.okBtn(null, true);
+            } else {
+                this.applyActObj(true);
+            }
+            if (id.split('_')[0] === 'shape') {
+                let obj: SelectionPoint;
+                for (let i: number = 0, len: number = parent.objColl.length; i < len; i++) {
+                    if (parent.objColl[i as number].currIndex === id) {
+                        obj = extend({}, parent.objColl[i as number], {}, true) as SelectionPoint;
+                        break;
+                    }
+                }
+                shapeDetails = this.getObjDetails(obj);
+            } else if (id.split('_')[0] === 'pen') {
+                shapeDetails = this.getFreehandDrawDetails(parseInt(id.split('_')[1], 10) - 1);
+            }
+        }
+        obj['shapeDetails'] = shapeDetails;
+    }
+
+    private getShapeSettings(obj: Object): void {
+        const parent: ImageEditor = this.parent; const shapeDetailsColl: ShapeSettings[] = [];
+        if (!parent.disabled && parent.isImageLoaded) {
+            if (parent.textArea.style.display !== 'none') {
+                parent.okBtn(null, true);
+            } else {
+                this.applyActObj(true);
+            }
+            for (let i: number = 0, len: number = parent.objColl.length; i < len; i++) {
+                const shapeDetails: ShapeSettings = this.getObjDetails(parent.objColl[i as number]);
+                shapeDetailsColl.push(shapeDetails);
+            }
+            for (let i: number = 0; i < parent.freehandCounter; i++) {
+                const shapeDetails: ShapeSettings = this.getFreehandDrawDetails(i as number);
+                shapeDetailsColl.push(shapeDetails);
+            }
+        }
+        obj['shapeDetailsColl'] = shapeDetailsColl;
+    }
+
+    private getRedactSettings(obj: Object): void {
+        const parent: ImageEditor = this.parent; const RedactDetailsColl: RedactSettings[] = [];
+        if (!parent.disabled && parent.isImageLoaded) {
+            if (parent.textArea.style.display !== 'none') {
+                parent.okBtn(null, true);
+            } else {
+                this.applyActObj(true);
+            }
+            for (let i: number = 0, len: number = parent.objColl.length; i < len; i++) {
+                const redactDetails: RedactSettings = this.getRedactObjDetails(parent.objColl[i as number]);
+                RedactDetailsColl.push(redactDetails);
+            }
+        }
+        obj['shapeDetailsColl'] = RedactDetailsColl;
+    }
+
+    private isPointsInRange(x: number, y: number, obj: Object): void {
+        let inRange: boolean = false; const parent: ImageEditor = this.parent;
+        if (!isNullOrUndefined(x) && !isNullOrUndefined(y) && x >= parent.img.destLeft && y >= parent.img.destTop &&
+            x <= parent.img.destLeft + parent.img.destWidth && y <= parent.img.destTop + parent.img.destHeight) {
+            inRange = true;
+        }
+        obj['inRange'] = inRange;
+    }
+
+    private alignRotateFlipColl(collection: number[] | string[], isRotateFlipCollection?: boolean,
+                                obj?: Object): number[] | string[] {
+        collection = this.popForDefaultTransformedState(collection);
+        collection = this.popForDefaultFlipState(collection);
+        collection = this.popForDefaultRotateState(collection);
+        if (collection.length === 0 && isRotateFlipCollection) {
+            this.parent.transform.degree = 0; this.parent.transform.currFlipState = '';
+        }
+        obj['collection'] = collection;
+        return collection;
+    }
+
+    private popForDefaultTransformedState(collection: number[] | string[]): number[] | string[] {
+        let rotateRight: number = 0; let rotateleft: number = 0; let horizontal: number = 0; let vertical: number = 0;
+        for (let i: number = 0; i < collection.length; i++) {
+            if (collection[i as number] === 90 || collection[i as number] === 'rotateRight') {
+                rotateRight++; rotateleft = 0; horizontal = 0; vertical = 0;
+                if (rotateRight === 4) {
+                    collection.pop(); collection.pop(); collection.pop(); collection.pop();
+                }
+            } else if (collection[i as number] === -90 || collection[i as number] === 'rotateLeft') {
+                rotateleft++; rotateRight = 0; horizontal = 0; vertical = 0;
+                if (rotateleft === 4) {
+                    collection.pop(); collection.pop(); collection.pop(); collection.pop();
+                }
+            } else if (collection[i as number] === 'horizontal' || collection[i as number] === 'Horizontal'
+                || collection[i as number] === 'horizontalflip') {
+                horizontal++; rotateleft = 0; rotateRight = 0; vertical = 0;
+                if (horizontal === 2) {
+                    collection.pop(); collection.pop();
+                }
+            } else if (collection[i as number] === 'vertical' || collection[i as number] === 'Vertical'
+                || collection[i as number] === 'verticalflip') {
+                vertical++; horizontal = 0; rotateleft = 0; rotateRight = 0;
+                if (vertical === 2) {
+                    collection.pop(); collection.pop();
+                }
+            }
+        }
+        return collection;
+    }
+
+    private popForDefaultFlipState(collection: number[] | string[]): number[] | string[] {
+        for (let i: number = 0, iLen: number = collection.length - 3; i < iLen; i++) {
+            const isHorizontal: boolean = collection[i as number] === 'horizontal' || collection[i as number] === 'Horizontal'
+            || collection[i as number] === 'horizontalFlip';
+            const isVertical: boolean = collection[i as number] === 'vertical' || collection[i as number] === 'Vertical' ||
+            collection[i as number] === 'verticalFlip';
+            const isNextHorizontal: boolean = collection[i + 1] === 'horizontal' || collection[i + 1] === 'Horizontal' ||
+            collection[i + 1] === 'horizontalFlip';
+            const isNextVertical: boolean = collection[i + 1] === 'vertical' || collection[i + 1] === 'Vertical' ||
+            collection[i + 1] === 'verticalFlip';
+            const isNextToNextHorizontal: boolean = collection[i + 2] === 'horizontal' || collection[i + 2] === 'Horizontal' ||
+            collection[i + 2] === 'horizontalFlip';
+            const isNextToNextVertical: boolean = collection[i + 2] === 'vertical' || collection[i + 2] === 'Vertical' ||
+            collection[i + 2] === 'verticalFlip';
+            const isNextToNextToNextHorizontal: boolean = collection[i + 3] === 'horizontal' || collection[i + 3] === 'Horizontal' ||
+            collection[i + 3] === 'horizontalFlip';
+            if ((isHorizontal && isNextVertical && isNextToNextHorizontal && isNextToNextVertical) ||
+                (isVertical && isNextHorizontal && isNextToNextVertical && isNextToNextToNextHorizontal)) {
+                collection.splice(i, 4);
+                i -= 4;
+            }
+        }
+        return collection;
+    }
+
+    private popForDefaultRotateState(collection: number[] | string[]): number[] | string[] {
+        for (let i: number = 0; i < collection.length - 1; i++) {
+            const curr: number | string = collection[i as number];
+            const next: number | string = collection[i + 1];
+            if ((curr === 90 || curr === 'rotateRight') && (next === -90 || next === 'rotateLeft')) {
+                collection.splice(i, 2);
+                i -= 2;
+            } else if ((curr === -90 || curr === 'rotateLeft') && (next === 90 || next === 'rotateRight')) {
+                collection.splice(i, 2);
+                i -= 2;
+            }
+        }
+        return collection;
+    }
+
+    private selectShape(id: string, obj: Object): void {
+        const parent: ImageEditor = this.parent; let isSelected: boolean = false;
+        if (!parent.disabled && parent.isImageLoaded) {
+            this.applyActObj();
+            if (id.split('_')[0] === 'shape') {
+                let obj: SelectionPoint;
+                for (let i: number = 0, len: number = parent.objColl.length; i < len; i++) {
+                    if (parent.objColl[i as number].currIndex === id) {
+                        obj = extend({}, parent.objColl[i as number], {}, true) as SelectionPoint;
+                        break;
+                    }
+                }
+                if (isNullOrUndefined(obj)) {isSelected = false; }
+                else {
+                    isSelected = true; parent.activeObj = obj;
+                    const object: Object = {canvasFilter: null };
+                    parent.notify('toolbar', { prop: 'getCanvasFilter', onPropertyChange: false, value: {obj: object }});
+                    this.lowerContext.filter = object['canvasFilter'];
+                    parent.notify('selection', { prop: 'redrawShape', onPropertyChange: false,
+                        value: {obj: parent.activeObj}});
+                    if (parent.activeObj.shape === 'text') {
+                        parent.notify('toolbar', { prop: 'refresh-toolbar', onPropertyChange: false, value: {type: 'text',
+                            isApplyBtn: null, isCropping: null, isZooming: null, cType: null}});
+                    } else if (parent.activeObj.shape === 'pen') {
+                        parent.notify('toolbar', { prop: 'refresh-toolbar', onPropertyChange: false, value: {type: 'pen',
+                            isApplyBtn: null, isCropping: null, isZooming: null, cType: null}});
+                    } else if (parent.activeObj.shape === 'redact') {
+                        parent.notify('toolbar', { prop: 'refresh-toolbar', onPropertyChange: false, value: {type: 'redact',
+                            isApplyBtn: null, isCropping: null, isZooming: null, cType: null}});
+                    } else {
+                        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});
+                    parent.notify('toolbar', { prop: 'renderQAT', onPropertyChange: false, value: {isPenEdit: null} });
+                }
+            } else if (id.split('_')[0] === 'pen') {
+                const object: Object = {bool: false };
+                parent.notify('selection', { prop: 'getFreehandDrawEditing', onPropertyChange: false, value: {obj: object }});
+                if (object['bool']) {parent.okBtn(null, true); }
+                const obj: Object = {isIndex: false };
+                parent.notify('freehand-draw', { prop: 'isFHDIdx', value: { index: parseInt(id.split('_')[1], 10) - 1, obj: obj }});
+                if (obj['isIndex']) {
+                    isSelected = true;
+                    parent.notify('freehand-draw', { prop: 'selectFhd', value: { id: id} });
+                    parent.notify('toolbar', { prop: 'renderQAT', onPropertyChange: false, value: {isPenEdit: true} });
+                    parent.notify('toolbar', { prop: 'update-toolbar-items', onPropertyChange: false});
+                } else {
+                    isSelected = false;
+                }
+            }
+        }
+        obj['isSelected'] = isSelected;
+    }
+
+    private deleteShape(id: string): void {
+        const parent: ImageEditor = this.parent;
+        if (!parent.disabled && parent.isImageLoaded) {
+            if (parent.activeObj.currIndex && parent.activeObj.currIndex === id) {
+                parent.notify('selection', { prop: 'deleteItem', onPropertyChange: false});
+            } else {
+                this.applyActObj();
+                if (id.split('_')[0] === 'shape') {
+                    for (let i: number = 0, len: number = parent.objColl.length; i < len; i++) {
+                        if (parent.objColl[i as number].currIndex === id) {
+                            parent.objColl.splice(i, 1);
+                            break;
+                        }
+                    }
+                } else if (id.split('_')[0] === 'pen') {
+                    parent.notify('freehand-draw', {prop: 'handle-freehand-draw', value: {id: id}});
+                }
+            }
+            const object: Object = {canvasFilter: null };
+            parent.notify('toolbar', { prop: 'getCanvasFilter', onPropertyChange: false, value: {obj: object }});
+            this.lowerContext.filter = object['canvasFilter'];
+            this.lowerContext.clearRect(0, 0, parent.lowerCanvas.width, parent.lowerCanvas.height);
+            parent.notify('draw', { prop: 'redrawImgWithObj', onPropertyChange: false});
+            parent.notify('toolbar', { prop: 'refresh-main-toolbar', onPropertyChange: false});
+            parent.notify('undo-redo', {prop: 'updateCurrUrc', value: {type: 'ok' }});
+        }
+    }
+
+    private getMaxText(isTextBox?: boolean, text?: string, obj?: Object): string {
+        if (isNullOrUndefined(text)) {
+            text = isTextBox ? this.parent.textArea.value : this.parent.activeObj.keyHistory;
+            if (!text) {return text; }
+        }
+        let maxi: number; const rows: string[] = text.split('\n'); let maxStr: number = rows[0].length;
+        let maxText: string = rows[0];
+        for (let i: number = 1; i < rows.length; i++) {
+            maxi = rows[i as number].length;
+            if (maxi > maxStr) {
+                maxText = rows[i as number]; maxStr = maxi;
+            }
+        }
+        if (obj) { obj['maxText'] = maxText; }
+        return maxText;
+    }
+    private getLinePoints(x1: number, y1: number, x2: number, y2: number): Point[] {
+        let points: Point[] = []; let i: number[]; let j: number[];
+        if (x1 === x2) {
+            if (y1 < y2) {
+                i = [x1, y1]; j = [x2, y2];
+            } else {
+                j = [x1, y1]; i = [x2, y2];
+            }
+            const m: number = this.getSlope(i, j, true); const b: number = this.getIntercept(i, m);
+            for (let y: number = i[1]; y <= j[1]; y++){
+                const x: number = m * y + b; points.push({x: x, y: y});
+            }
+        } else {
+            if (x1 < x2) {
+                i = [x1, y1]; j = [x2, y2];
+            } else {
+                j = [x1, y1]; i = [x2, y2];
+            }
+            const m: number = this.getSlope(i, j, false); const b: number = this.getIntercept(i, m);
+            for (let x: number = i[0]; x <= j[0]; x++){
+                const y: number = m * x + b; points.push({x: x, y: y});
+            }
+        }
+        if (Math.floor(x1) === Math.floor(x2) || (points.length < 10 && (y2 - y1 > 10 || y1 - y2 > 10))) {
+            points = [];
+            const lesserY: number = Math.min(y1, y2);
+            for (let i: number = 0; i < Math.abs(Math.floor(y2) - Math.floor(y1)); i++) {
+                points.push({x: x1, y: lesserY + i});
+            }
+            if (points.length > 1) {
+                let prev: Point;
+                if (isNullOrUndefined(points[points.length - 2])) {prev = {x: 0, y: 0}; }
+                else {prev = points[points.length - 2]; }
+                const diffX: number = points[points.length - 1]['x'] - prev.x;
+                const diffY: number = points[points.length - 1]['y'] - prev.y;
+                points.push({ x: points[points.length - 1]['x'] + (diffX / 2), y: points[points.length - 1]['y'] + (diffY / 2) });
+            }
+        } else if (Math.floor(y1) === Math.floor(y2) || (points.length < 10 && (x2 - x1 > 10 || x1 - x2 > 10))) {
+            points = [];
+            const lesserX: number = Math.min(x1, x2);
+            for (let i: number = 0; i < Math.abs(Math.floor(x2) - Math.floor(x1)); i++) {
+                points.push({x: lesserX + i, y: y1});
+            }
+            if (points.length > 1) {
+                let prev: Point;
+                if (isNullOrUndefined(points[points.length - 2])) {prev = {x: 0, y: 0}; }
+                else {prev = points[points.length - 2]; }
+                const diffX: number = points[points.length - 1]['x'] - prev.x;
+                const diffY: number = points[points.length - 1]['y'] - prev.y;
+                points.push({ x: points[points.length - 1]['x'] + (diffX / 2), y: points[points.length - 1]['y'] + (diffY / 2) });
+            }
+        }
+        return points;
+    }
+
+    private getSlope(a: number[], b: number[], isSameAxis: boolean): number {
+        let slope: number;
+        if (isSameAxis) {
+            if (a[1] === b[1]) {return null; } slope = (b[0] - a[0]) / (b[1] - a[1]);
+        } else {
+            if (a[0] === b[0]) {return null; } slope = (b[1] - a[1]) / (b[0] - a[0]);
+        }
+        return slope;
+    }
+
+    private getIntercept(point: number[], getSlope: number): number {
+        if (getSlope === null) {return point[0]; }
+        return point[1] - getSlope * point[0];
+    }
+
+    private setPointCollForShapeRotation(obj: SelectionPoint): void {
+        const parent: ImageEditor = this.parent;
+        const { startX, startY, endX, endY, width, height } = obj.activePoint;
+        const center: Point = {x: startX + (width / 2), y: startY +
+        (height / 2)};
+        const cosAngle: number = Math.cos(obj.rotatedAngle);
+        const sinAngle: number = Math.sin(obj.rotatedAngle);
+        const p1: Point = { x: cosAngle * (startX - center.x) - sinAngle * (startY - center.y) + center.x,
+            y: sinAngle * (startX - center.x) + cosAngle * (startY - center.y) + center.y };
+        const p2: Point = { x: cosAngle * (endX - center.x) - sinAngle * (startY - center.y) + center.x,
+            y: sinAngle * (endX - center.x) + cosAngle * (startY - center.y) + center.y };
+        const p3: Point = { x: cosAngle * (startX - center.x) - sinAngle * (endY - center.y) + center.x,
+            y: sinAngle * (startX - center.x) + cosAngle * (endY - center.y) + center.y };
+        const p4: Point = { x: cosAngle * (endX - center.x) - sinAngle * (endY - center.y) + center.x,
+            y: sinAngle * (endX - center.x) + cosAngle * (endY - center.y) + center.y };
+        obj.horTopLinePointColl = this.getLinePoints(p1.x, p1.y, p2.x, p2.y);
+        obj.horTopLinePointColl = this.getLinePoints(p1.x, p1.y, p2.x, p2.y);
+        obj.horBottomLinePointColl = this.getLinePoints(p3.x, p3.y, p4.x, p4.y);
+        obj.verLeftLinePointColl = this.getLinePoints(p1.x, p1.y, p3.x, p3.y);
+        obj.verRightLinePointColl = this.getLinePoints(p2.x, p2.y, p4.x, p4.y);
+        obj.verLeftLinePointColl.reverse(); obj.verRightLinePointColl.reverse();
+        for (let i: number = 0; i < obj.horTopLinePointColl.length; i++) {
+            obj.horTopLinePointColl[i as number].ratioX = (obj.horTopLinePointColl[i as number].x -
+                this.parent.img.destLeft) / this.parent.img.destWidth;
+            obj.horTopLinePointColl[i as number].ratioY = (obj.horTopLinePointColl[i as number].y -
+                this.parent.img.destTop) / this.parent.img.destHeight;
+        }
+        for (let i: number = 0; i < obj.horBottomLinePointColl.length; i++) {
+            obj.horBottomLinePointColl[i as number].ratioX = (obj.horBottomLinePointColl[i as number].x -
+                this.parent.img.destLeft) / this.parent.img.destWidth;
+            obj.horBottomLinePointColl[i as number].ratioY = (obj.horBottomLinePointColl[i as number].y -
+                this.parent.img.destTop) / this.parent.img.destHeight;
+        }
+        for (let i: number = 0; i < obj.verLeftLinePointColl.length; i++) {
+            obj.verLeftLinePointColl[i as number].ratioX = (obj.verLeftLinePointColl[i as number].x -
+                this.parent.img.destLeft) / this.parent.img.destWidth;
+            obj.verLeftLinePointColl[i as number].ratioY = (obj.verLeftLinePointColl[i as number].y -
+                this.parent.img.destTop) / this.parent.img.destHeight;
+        }
+        for (let i: number = 0; i < obj.verRightLinePointColl.length; i++) {
+            obj.verRightLinePointColl[i as number].ratioX = (obj.verRightLinePointColl[i as number].x -
+                this.parent.img.destLeft) / this.parent.img.destWidth;
+            obj.verRightLinePointColl[i as number].ratioY = (obj.verRightLinePointColl[i as number].y -
+                this.parent.img.destTop) / this.parent.img.destHeight;
+        }
+        if (parent.upperCanvas.style.cursor !== 'move') {
+            const object: Object = {rotationCirclePoint: null };
+            parent.notify('selection', { prop: 'getTransRotationPoint', value: {obj: obj, object: object }});
+            const rotationCirclePoint: Point = object['rotationCirclePoint'];
+            if (rotationCirclePoint) {
+                obj.rotationCirclePointColl = { x: cosAngle * (rotationCirclePoint.x - center.x) -
+                    sinAngle * (rotationCirclePoint.y - center.y) + center.x,
+                y: sinAngle * (rotationCirclePoint.x - center.x) + cosAngle
+                    * (rotationCirclePoint.y - center.y) + center.y };
+                obj.rotationCirclePointColl.ratioX = (obj.rotationCirclePointColl.x - parent.img.destLeft) /
+                parent.img.destWidth;
+                obj.rotationCirclePointColl.ratioY = (obj.rotationCirclePointColl.y - parent.img.destTop) /
+                parent.img.destHeight;
+            }
+        }
+    }
+
+    private getSquarePointForRotatedShape(obj: SelectionPoint, object?: Object): ActivePoint {
+        const point: ActivePoint = { startX: 0, startY: 0, endX: 0, endY: 0, width: 0, height: 0 };
+        const { startX, startY, endX, endY, width, height } = obj.activePoint;
+        const center: Point = {x: startX + (width / 2), y: startY + (height / 2)};
+        const cosAngle: number = Math.cos(obj.rotatedAngle);
+        const sinAngle: number = Math.sin(obj.rotatedAngle);
+        const p1: Point = { x: cosAngle * (startX - center.x) - sinAngle * (startY - center.y) + center.x,
+            y: sinAngle * (startX - center.x) + cosAngle * (startY - center.y) + center.y };
+        const p2: Point = { x: cosAngle * (endX - center.x) - sinAngle * (startY - center.y) + center.x,
+            y: sinAngle * (endX - center.x) + cosAngle * (startY - center.y) + center.y };
+        const p3: Point = { x: cosAngle * (startX - center.x) - sinAngle * (endY - center.y) + center.x,
+            y: sinAngle * (startX - center.x) + cosAngle * (endY - center.y) + center.y };
+        const p4: Point = { x: cosAngle * (endX - center.x) - sinAngle * (endY - center.y) + center.x,
+            y: sinAngle * (endX - center.x) + cosAngle * (endY - center.y) + center.y };
+        point.startX = p1.x; point.startY = p1.y; point.endX = p1.x; point.endY = p1.y;
+        if (point.startX > p2.x) { point.startX = p2.x; } if (point.startX > p3.x) { point.startX = p3.x; }
+        if (point.startX > p4.x) { point.startX = p4.x; } if (point.startY > p2.y) { point.startY = p2.y; }
+        if (point.startY > p3.y) { point.startY = p3.y; } if (point.startY > p4.y) { point.startY = p4.y; }
+        if (point.endX < p2.x) { point.endX = p2.x; } if (point.endX < p3.x) { point.endX = p3.x; }
+        if (point.endX < p4.x) { point.endX = p4.x; } if (point.endY < p2.y) { point.endY = p2.y; }
+        if (point.endY < p3.y) { point.endY = p3.y; } if (point.endY < p4.y) { point.endY = p4.y; }
+        point.width = point.endX - point.startX; point.height = point.endY - point.startY;
+        if (object) {
+            object['activePoint'] = point;
+        }
+        return point;
+    }
+
+    private updateZOrder(obj: SelectionPoint | Object, value: string): void {
+        const parent: ImageEditor = this.parent;
+        value = value.toLowerCase();
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        const object: any = obj;
+        if (isNullOrUndefined(object.order)) {return; }
+        let index: number; let prevIndex: number;
+        const highestOrder: number = this.getHighestOrder();
+        this.updateShapeColl();
+        if (parent.shapeColl.length === 0) {
+            return;
+        }
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        let coll: any;
+        for (let i: number = 0; i < parent.shapeColl.length; i++) {
+            coll = parent.shapeColl[i as number];
+            if (object.id && object.id.indexOf('pen') > -1) {
+                if (coll.id && coll.id === object.id) {
+                    parent.shapeColl.splice(i, 1);
+                }
+            } else if (coll.shape && coll.shape.indexOf('crop-') > -1) {
+                parent.shapeColl.splice(i, 1);
+            }
+        }
+        switch (value) {
+        case 'sendtoback':
+            prevIndex = object.order;
+            index = object.order;
+            object.order = 1;
+            break;
+        case 'sendbackward':
+            object.order -= 1;
+            index = object.order;
+            break;
+        case 'bringtofront':
+            prevIndex = object.order;
+            index = highestOrder;
+            object.order = index;
+            break;
+        case 'bringforward':
+            object.order += 1;
+            index = object.order;
+            break;
+        }
+        this.reArrangeObjColl(index, value, prevIndex);
+        if (object.id && object.id.indexOf('pen') > -1) {
+            this.reUpdateShapeColl(object);
+        }
+    }
+
+    private reArrangeObjColl(index: number, value: string, prevIndex: number): void {
+        const parent: ImageEditor = this.parent;
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        let obj: any;
+        switch (value) {
+        case 'sendtoback':
+            for (let i: number = 0, len: number = parent.shapeColl.length; i < len; i++) {
+                obj = parent.shapeColl[i as number];
+                if (obj.order < prevIndex && obj.order <= index) {
+                    obj.order += 1;
+                    this.reUpdateShapeColl(obj);
+                }
+            }
+            break;
+        case 'sendbackward':
+            for (let i: number = 0, len: number = parent.shapeColl.length; i < len; i++) {
+                obj = parent.shapeColl[i as number];
+                if (obj.order === index) {
+                    obj.order += 1;
+                    this.reUpdateShapeColl(obj);
+                    break;
+                }
+            }
+            break;
+        case 'bringtofront':
+            for (let i: number = 0, len: number = parent.shapeColl.length; i < len; i++) {
+                obj = parent.shapeColl[i as number];
+                if (obj.order > prevIndex && obj.order <= index) {
+                    obj.order -= 1;
+                    this.reUpdateShapeColl(obj);
+                }
+            }
+            break;
+        case 'bringforward':
+            for (let i: number = 0, len: number = parent.shapeColl.length; i < len; i++) {
+                obj = parent.shapeColl[i as number];
+                if (obj.order === index) {
+                    obj.order -= 1;
+                    this.reUpdateShapeColl(obj);
+                    break;
+                }
+            }
+            break;
+        }
+    }
+
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    private reorderRedact(tempObjColl: SelectionPoint[] | any): SelectionPoint[] | any {
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        const nonRedact: any = tempObjColl.filter((item: SelectionPoint) => item.shape !== 'redact');
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        const redact: any = tempObjColl.filter((item: SelectionPoint) => item.shape === 'redact');
+        return redact.concat(nonRedact);
+    }
+
+    private updateShapeColl(): void {
+        const parent: ImageEditor = this.parent;
+        let isOrdered: boolean = false; let tempOrder: number = 1;
+        let tempObjColl: SelectionPoint[] = extend([], parent.objColl, [], true) as SelectionPoint[];
+        tempObjColl  = this.reorderRedact(tempObjColl);
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        let tempPointColl: any = extend([], parent.pointColl, [], true);
+        if (parent.shapeColl.length > 0 &&
+            parent.shapeColl.length === parent.objColl.length + parent.pointColl.length) {
+            for (let i: number = 0; i < parent.shapeColl.length; i++) {
+                if (parent.shapeColl[i as number].order === tempOrder) {
+                    isOrdered = true; tempOrder++;
+                } else {
+                    isOrdered = false;
+                    break;
+                }
+            }
+            if (isOrdered) {
+                for (let i: number = 0; i < parent.shapeColl.length; i++) {
+                    if (parent.shapeColl[i as number].currIndex &&
+                        parent.shapeColl[i as number].currIndex.indexOf('shape') > -1) {
+                        for (let j: number = 0; j < tempObjColl.length; j++) {
+                            if (parent.shapeColl[i as number].currIndex === tempObjColl[j as number].currIndex) {
+                                parent.shapeColl[i as number] = extend({}, tempObjColl[j as number], {}, true);
+                                tempObjColl.splice(j, 1);
+                                break;
+                            }
+                        }
+                    } else if (parent.shapeColl[i as number].id && parent.shapeColl[i as number].id.indexOf('pen') > -1) {
+                        for (let j: number = 0; j < tempPointColl.length; j++) {
+                            if (parent.shapeColl[i as number].id === tempPointColl[j as number].id) {
+                                parent.shapeColl[i as number] = extend([], tempPointColl[j as number], [], true);
+                                tempPointColl.splice(j, 1);
+                                break;
+                            }
+                        }
+                    }
+                }
+                return;
+            }
+        }
+        tempObjColl = extend([], parent.objColl, [], true) as SelectionPoint[];
+        tempPointColl = extend([], parent.pointColl, [], true);
+        parent.shapeColl = []; let order: number = 1; let isBreak: boolean; let isCrop: boolean = false;
+        while (tempObjColl.length !== 0 || tempPointColl.length !== 0) {
+            isBreak = isCrop = false;
+            for (let i: number = 0; i < tempObjColl.length; i++) {
+                if (tempObjColl[i as number].order === order ||
+                    (!tempObjColl[i as number].order && tempObjColl[i as number].shape &&
+                        tempObjColl[i as number].shape.indexOf('crop-') > -1)) {
+                    parent.shapeColl.push(extend({}, tempObjColl[i as number], {}, true));
+                    if (tempObjColl[i as number].shape && tempObjColl[i as number].shape.indexOf('crop-') > -1) {
+                        isCrop = true;
+                    }
+                    tempObjColl.splice(i, 1);
+                    isBreak = true;
+                    break;
+                }
+            }
+            if (!isBreak) {
+                for (let i: number = 0; i < tempPointColl.length; i++) {
+                    if (tempPointColl[i as number].order === order) {
+                        parent.shapeColl.push(extend([], tempPointColl[i as number], [], true));
+                        tempPointColl.splice(i, 1);
+                        isBreak = true;
+                        break;
+                    }
+                }
+            }
+            if (!isCrop) {order++; }
+        }
+    }
+
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    private reUpdateShapeColl(obj: any): void {
+        const parent: ImageEditor = this.parent;
+        if (obj.id && obj.id.indexOf('pen') > -1) {
+            if (parent.freehandCounter > 0) {
+                for (let i: number = 0; i < parent.freehandCounter; i++) {
+                    if (parent.pointColl[i as number].id === obj.id) {
+                        parent.pointColl[i as number].order = obj.order;
+                    }
+                }
+            }
+        } else if (obj.currIndex && obj.currIndex.indexOf('shape') > -1) {
+            for (let i: number = 0; i < parent.objColl.length; i++) {
+                if (parent.objColl[i as number].currIndex === obj.currIndex) {
+                    parent.objColl[i as number].order = obj.order;
+                }
+            }
+        }
+    }
+
+    private drawAnnotations(ctx: CanvasRenderingContext2D, shape: string, pen: string, isPreventApply: boolean,
+                            x: number, y: number, panRegion: string): void {
+        const parent: ImageEditor = this.parent;
+        const activeObj: SelectionPoint = extend({}, parent.activeObj, {}, true) as SelectionPoint;
+        const tempObjColl: SelectionPoint[] = extend([], parent.objColl, [], true) as SelectionPoint[];
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        const tempPointColl: any = extend([], parent.pointColl, [], true);
+        const tempSelPointCollObj: Object = {selPointColl: null };
+        parent.notify('freehand-draw', { prop: 'getSelPointColl', onPropertyChange: false,
+            value: {obj: tempSelPointCollObj }});
+        const selPointCollObj: Object = {selPointColl: null };
+        parent.notify('freehand-draw', { prop: 'getSelPointColl', onPropertyChange: false,
+            value: {obj: selPointCollObj }});
+        this.updateShapeColl();
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        let tempShapeColl: any = extend([], parent.shapeColl, [], true);
+        tempShapeColl = this.reorderRedact(tempShapeColl);
+        let isPrevented: boolean = false;
+        if (!this.preventFrameAnnotation) {this.preventFrameAnnotation = isPrevented = true; }
+        for (let i: number = 0; i < tempShapeColl.length; i++) {
+            const isPenId: string = tempShapeColl[i as number].id;
+            if ((tempShapeColl[i as number].order) ||
+                (!tempShapeColl[i as number].order && tempShapeColl[i as number].shape && tempShapeColl[i as number].shape.indexOf('crop-') > -1) ||
+                (!tempShapeColl[i as number].order && tempShapeColl[i as number].shape === 'path' && parent.drawingShape === 'path')) {
+                if (tempShapeColl[i as number].currIndex && tempShapeColl[i as number].currIndex.indexOf('shape') > -1) {
+                    parent.objColl = [];
+                    parent.objColl.push(extend({}, tempShapeColl[i as number], {}, true) as SelectionPoint);
+                    if (shape === 'iterate') {
+                        const temp: string = this.lowerContext.filter;
+                        this.lowerContext.filter = 'none';
+                        this.iterateObjColl();
+                        this.lowerContext.filter = temp;
+                    } else if (shape === 'zoom' || shape === 'pan') {
+                        let tempObjCollIndex: number = -1;
+                        for (let i: number = 0; i < tempObjColl.length; i++) {
+                            if (JSON.stringify(tempObjColl[i as number]) === JSON.stringify(parent.objColl[0])) {
+                                tempObjCollIndex = i;
+                                break;
+                            }
+                        }
+                        if (shape === 'zoom') {
+                            this.zoomObjColl(isPreventApply);
+                        } else {
+                            this.panObjColl(x, y, panRegion);
+                        }
+                        if (tempObjCollIndex > -1) {
+                            tempObjColl[tempObjCollIndex as number] = extend({}, parent.objColl[0], {}, true) as SelectionPoint;
+                        }
+                    }
+                } else if (tempShapeColl[i as number].id && tempShapeColl[i as number].id.indexOf('pen') > -1) {
+                    parent.pointColl = []; parent.freehandCounter = 0;
+                    parent.notify('freehand-draw', { prop: 'setSelPointColl', onPropertyChange: false, value: {obj: {selPointColl: [] } }});
+                    parent.pointColl.push(extend({}, tempShapeColl[i as number], {}, true));
+                    parent.notify('freehand-draw', { prop: 'pushSelPointColl', onPropertyChange: false,
+                        value: {obj: {selPointColl: selPointCollObj['selPointColl'][i as number] } }});
+                    parent.freehandCounter = parent.pointColl.length;
+                    if (pen === 'iterate') {
+                        parent.notify('freehand-draw', { prop: 'freehandRedraw', onPropertyChange: false,
+                            value: {context: ctx, points: null} });
+                    } else if (pen === 'zoom' || pen === 'pan') {
+                        if (pen === 'zoom') {
+                            parent.notify('freehand-draw', { prop: 'zoomFHDColl', onPropertyChange: false,
+                                value: {isPreventApply: isPreventApply}});
+                        } else {
+                            parent.notify('freehand-draw', { prop: 'panFHDColl', onPropertyChange: false,
+                                value: {xDiff: x, yDiff: y, panRegion: panRegion}});
+                        }
+                        for (let i: number = 0; i < tempPointColl.length; i++) {
+                            if (tempPointColl[i as number].id === parent.pointColl[0].id) {
+                                tempPointColl[i as number] = extend({}, parent.pointColl[0], {}, true);
+                                break;
+                            }
+                        }
+                        for (let i: number = 0, len: number = tempSelPointCollObj['selPointColl'].length; i < len; i++) {
+                            if (tempSelPointCollObj['selPointColl'][i as number].id === selPointCollObj['selPointColl'][i as number].id) {
+                                tempSelPointCollObj['selPointColl'][i as number] = extend({}, selPointCollObj['selPointColl'][i as number], {}, true);
+                                break;
+                            }
+                        }
+                    }
+                }
+            } else if ((!tempShapeColl[i as number].shape && !isPenId) ||
+                (!tempShapeColl[i as number].currIndex && !isPenId)) {
+                tempShapeColl.splice(i, 1);
+            }
+        }
+        if (pen && pen === 'zoom') {
+            parent.pointColl = []; parent.freehandCounter = 0;
+            parent.notify('freehand-draw', { prop: 'zoomFHDColl', onPropertyChange: false, value: {isPreventApply: isPreventApply}});
+        }
+        parent.objColl = tempObjColl; parent.pointColl = tempPointColl; parent.freehandCounter = parent.pointColl.length;
+        parent.notify('freehand-draw', { prop: 'setSelPointColl', onPropertyChange: false, value: {obj: {selPointColl: tempSelPointCollObj['selPointColl'] } }});
+        if (isPrevented && this.preventFrameAnnotation) {
+            parent.notify('draw', { prop: 'applyFrame', value: { ctx: this.lowerContext, frame: parent.frameObj.type, preventImg: true } });
+            this.preventFrameAnnotation = false;
+        }
+        parent.activeObj = activeObj;
+    }
+}