@syncfusion/ej2-image-editor 23.2.7 → 24.1.43

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

@@ -2,7 +2,7 @@ import { EventHandler, extend, isBlazor, isNullOrUndefined } from '@syncfusion/e
 import { ShapeType } from '../index';
 var Shape = /** @class */ (function () {
     function Shape(parent) {
-        this.textSettings = { text: 'Enter Text', fontFamily: 'Arial', fontSize: null, fontRatio: null, bold: false, italic: false, underline: false };
+        this.textSettings = { text: 'Enter Text', fontFamily: '', fontSize: null, fontRatio: null, bold: false, italic: false, underline: false };
         this.strokeSettings = { strokeColor: '#fff', fillColor: '', strokeWidth: null };
         this.keyHistory = ''; // text history
         this.parent = parent;
@@ -23,6 +23,7 @@ var Shape = /** @class */ (function () {
         this.parent.off('destroyed', this.destroy);
     };
     Shape.prototype.shape = function (args) {
+        var parent = this.parent;
         this.initShapePvtProps();
         var uploader;
         switch (args.prop) {
@@ -120,17 +121,17 @@ var Shape = /** @class */ (function () {
                 this.applyActObj(args.value['isMouseDown']);
                 break;
             case 'wireEvent':
-                EventHandler.add(this.parent.upperCanvas, 'dblclick', this.findTextTarget, this);
-                EventHandler.add(this.parent.textArea, 'mousedown', this.findTextTarget, this);
-                uploader = document.getElementById(this.parent.element.id + '_fileUpload');
+                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(this.parent.upperCanvas, 'dblclick', this.findTextTarget);
-                EventHandler.remove(this.parent.textArea, 'mousedown', this.findTextTarget);
-                uploader = document.getElementById(this.parent.element.id + '_fileUpload');
+                EventHandler.remove(parent.upperCanvas, 'dblclick', this.findTextTarget);
+                EventHandler.remove(parent.textArea, 'mousedown', this.findTextTarget);
+                uploader = document.getElementById(parent.element.id + '_fileUpload');
                 EventHandler.remove(uploader, 'change', this.fileChanged);
                 break;
             case 'getShapeSetting':
@@ -216,7 +217,7 @@ var Shape = /** @class */ (function () {
                 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']);
+                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']);
                 break;
             case 'reset':
                 this.reset();
@@ -227,30 +228,52 @@ var Shape = /** @class */ (function () {
             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 'updateSelectionChangeEventArgs':
                 this.updateSelectionChangeEventArgs(args.value['selectionSettings']);
                 break;
+            case 'setFlipState':
+                this.setFlipState(args.value['x'], args.value['y'], args.value['obj'], args.value['object']);
+                break;
         }
     };
     Shape.prototype.getModuleName = function () {
         return 'shape';
     };
     Shape.prototype.initShapePvtProps = function () {
-        if (this.parent.lowerCanvas) {
-            this.lowerContext = this.parent.lowerCanvas.getContext('2d');
+        var parent = this.parent;
+        if (parent.lowerCanvas) {
+            this.lowerContext = parent.lowerCanvas.getContext('2d');
         }
-        if (this.parent.upperCanvas) {
-            this.upperContext = this.parent.upperCanvas.getContext('2d');
+        if (parent.upperCanvas) {
+            this.upperContext = parent.upperCanvas.getContext('2d');
         }
         if (isNullOrUndefined(this.shapeImg)) {
-            this.shapeImg = this.parent.createElement('img', {
-                id: this.parent.element.id + '_shapeImg', attrs: { name: 'Image', crossorigin: 'anonymous' }
+            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;
+        }
     };
     Shape.prototype.reset = function () {
         this.textSettings =
-            { text: 'Enter Text', fontFamily: 'Arial', fontSize: null, fontRatio: null, bold: false, italic: false, underline: false };
+            { text: 'Enter Text', fontFamily: this.parent.fontFamily.default, fontSize: null, fontRatio: null, bold: false, italic: false, underline: false };
         this.strokeSettings = { strokeColor: '#fff', fillColor: '', strokeWidth: null };
     };
     Shape.prototype.drawEllipse = function (x, y, radiusX, radiusY, strokeWidth, strokeColor, fillColor, degree) {
@@ -266,18 +289,19 @@ var Shape = /** @class */ (function () {
         this.drawShape('line', strokeWidth, strokeColor, null, start, width, height);
     };
     Shape.prototype.drawPath = function (pointColl, strokeWidth, strokeColor) {
+        var parent = this.parent;
         this.initializeShape('path');
         if (pointColl) {
             this.drawShape('path', strokeWidth, strokeColor, null, null, null, null, pointColl);
         }
         else {
-            this.drawShape('line', strokeWidth, strokeColor, null, null, null, null);
-            var obj = extend({}, this.parent.objColl[this.parent.objColl.length - 1], null, true);
+            this.drawShape('line', strokeWidth, strokeColor);
+            var obj = extend({}, parent.objColl[parent.objColl.length - 1], null, true);
             obj.shape = 'path';
             obj.lineDraw = null;
             obj.pointColl = [{ x: obj.activePoint.startX, y: obj.activePoint.startY },
                 { x: obj.activePoint.endX, y: obj.activePoint.endY }];
-            this.parent.objColl[this.parent.objColl.length - 1] = obj;
+            parent.objColl[parent.objColl.length - 1] = obj;
         }
     };
     Shape.prototype.drawArrow = function (startX, startY, endX, endY, strokeWidth, strokeColor, arrowStart, arrowEnd) {
@@ -296,14 +320,15 @@ var Shape = /** @class */ (function () {
         this.drawShapeText(text, fontFamily, fontSize, bold, italic, color, x, y);
     };
     Shape.prototype.initializeShape = function (type) {
+        var parent = this.parent;
         this.redrawActObj();
-        this.parent.activeObj.shape = type;
-        if (this.parent.currObjType.shape === 'freehanddraw') {
+        parent.activeObj.shape = type;
+        if (parent.currObjType.shape === 'freehanddraw') {
             this.apply();
-            this.parent.upperCanvas.style.cursor = this.parent.cursor = 'default';
-            this.parent.currObjType.shape = '';
+            parent.upperCanvas.style.cursor = parent.cursor = 'default';
+            parent.currObjType.shape = '';
         }
-        this.parent.currObjType.isCustomCrop = false;
+        parent.currObjType.isCustomCrop = false;
     };
     Shape.prototype.updateWidthHeight = function (obj) {
         obj.activePoint.width = obj.activePoint.endX - obj.activePoint.startX;
@@ -311,12 +336,13 @@ var Shape = /** @class */ (function () {
         return obj;
     };
     Shape.prototype.setDimension = function (width, height) {
+        var parent = this.parent;
         if (width && height) {
-            this.parent.activeObj.activePoint.width = width;
-            this.parent.activeObj.activePoint.height = height;
-            if (this.parent.currObjType.shape.toLowerCase() === 'ellipse') {
-                this.parent.activeObj.activePoint.width = 2 * width;
-                this.parent.activeObj.activePoint.height = 2 * 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;
             }
         }
     };
@@ -329,7 +355,7 @@ var Shape = /** @class */ (function () {
         }
         return arrowType;
     };
-    Shape.prototype.drawShape = function (type, strokeWidth, strokeColor, fillColor, start, width, height, pointColl, arrowStart, arrowEnd, degree) {
+    Shape.prototype.drawShape = function (type, strokeWidth, strokeColor, fillColor, start, width, height, pointColl, arrowStart, arrowEnd, degree, opacity) {
         var _this = this;
         var parent = this.parent;
         if (!parent.disabled && parent.isImageLoaded) {
@@ -338,13 +364,13 @@ var Shape = /** @class */ (function () {
             var objColl_1 = extend([], parent.objColl, [], true);
             parent.togglePen = false;
             this.keyHistory = '';
-            this.parent.upperCanvas.style.display = 'block';
+            parent.upperCanvas.style.display = 'block';
             this.refreshActiveObj();
-            parent.currObjType.shape = type;
-            if (parent.currObjType.shape.toLowerCase() === 'path' && isNullOrUndefined(pointColl)) {
-                parent.activeObj.shape = parent.currObjType.shape.toLowerCase();
+            parent.currObjType.shape = type = type.toLowerCase();
+            if (type === 'path' && isNullOrUndefined(pointColl)) {
+                parent.activeObj.shape = type;
                 parent.activeObj.pointColl = [];
-                parent.upperCanvas.style.cursor = this.parent.cursor = 'crosshair';
+                parent.upperCanvas.style.cursor = parent.cursor = 'crosshair';
                 parent.notify('selection', { prop: 'setCurrentDrawingShape', onPropertyChange: false, value: { value: 'path' } });
                 if (!isBlazor()) {
                     parent.notify('toolbar', { prop: 'refresh-toolbar', onPropertyChange: false, value: { type: 'shapes',
@@ -353,32 +379,36 @@ var Shape = /** @class */ (function () {
                 }
             }
             else {
-                if (parent.currObjType.shape.toLowerCase() !== 'freehanddraw' && parent.currObjType.shape.toLowerCase() !== '') {
-                    parent.activeObj.shape = parent.currObjType.shape.toLowerCase();
+                if (type !== 'freehanddraw' && type !== '') {
+                    parent.activeObj.shape = type;
+                    var strokeSettings = parent.activeObj.strokeSettings;
                     this.upperContext.clearRect(0, 0, parent.upperCanvas.width, parent.upperCanvas.height);
-                    if (isNullOrUndefined(parent.activeObj.strokeSettings)) {
-                        parent.activeObj.strokeSettings = this.strokeSettings;
+                    if (isNullOrUndefined(strokeSettings)) {
+                        strokeSettings = this.strokeSettings;
                     }
-                    if (parent.currObjType.shape.toLowerCase() === 'path' && pointColl) {
+                    if (type === 'path' && pointColl) {
                         parent.activeObj.pointColl = pointColl;
                     }
-                    parent.activeObj.strokeSettings.strokeWidth = strokeWidth ? strokeWidth : parent.activeObj.strokeSettings.strokeWidth;
-                    parent.activeObj.strokeSettings.strokeColor = strokeColor ? strokeColor : parent.activeObj.strokeSettings.strokeColor;
-                    parent.activeObj.strokeSettings.fillColor = fillColor ? fillColor : parent.activeObj.strokeSettings.fillColor;
+                    if (opacity !== null && opacity !== undefined) {
+                        parent.activeObj.opacity = opacity;
+                    }
+                    strokeSettings.strokeWidth = strokeWidth ? strokeWidth : strokeSettings.strokeWidth;
+                    strokeSettings.strokeColor = strokeColor ? strokeColor : strokeSettings.strokeColor;
+                    strokeSettings.fillColor = fillColor ? fillColor : strokeSettings.fillColor;
                     var tempWidth = parent.img.destWidth > 100 ? 100 : parent.img.destWidth / 2;
                     var tempHeight = parent.img.destHeight > 100 ? 100 : parent.img.destHeight / 2;
                     parent.activeObj.activePoint.width = tempWidth;
                     parent.activeObj.activePoint.height = tempHeight;
-                    if (parent.currObjType.shape.toLowerCase() === 'line' || parent.currObjType.shape.toLowerCase() === 'arrow') {
+                    if (type === 'line' || type === 'arrow') {
                         parent.activeObj.lineDraw = 'horizontal';
                         parent.activeObj.activePoint.height = 0;
-                        if (parent.currObjType.shape.toLowerCase() === 'arrow') {
+                        if (type === 'arrow') {
                             parent.activeObj.activePoint.width += 50;
                             parent.activeObj.start = this.getArrowType(arrowStart);
                             parent.activeObj.end = this.getArrowType(arrowEnd);
                         }
                     }
-                    else if (parent.currObjType.shape.toLowerCase() === 'rectangle') {
+                    else if (type === 'rectangle') {
                         parent.activeObj.activePoint.width += parent.activeObj.activePoint.width / 2;
                     }
                     this.setDimension(width, height);
@@ -394,7 +424,7 @@ var Shape = /** @class */ (function () {
                         this.setCenterPoints();
                     }
                     this.setPointCollForLineAndArrow();
-                    if (parent.currObjType.shape.toLowerCase() === 'arrow') {
+                    if (type === 'arrow') {
                         parent.activeObj.triangleDirection = 'right';
                     }
                     parent.currObjType.isDragging = parent.currObjType.isCustomCrop = false;
@@ -402,11 +432,11 @@ var Shape = /** @class */ (function () {
                     var obj = { shapeSettingsObj: {} };
                     parent.notify('selection', { prop: 'updatePrevShapeSettings', onPropertyChange: false, value: { obj: obj } });
                     var shapeSettings = obj['shapeSettingsObj'];
-                    var shapeChangingArgs = { action: 'insert', previousShapeSettings: shapeSettings,
+                    var shapeChangingArgs = { cancel: false, action: 'insert', previousShapeSettings: shapeSettings,
                         currentShapeSettings: shapeSettings };
                     if (isBlazor() && parent.events && parent.events.shapeChanging.hasDelegate === true) {
                         /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
-                        this.parent.dotNetRef.invokeMethodAsync('ShapeEventAsync', 'OnShape', shapeChangingArgs).then(function (shapeChangingArgs) {
+                        parent.dotNetRef.invokeMethodAsync('ShapeEventAsync', 'OnShape', shapeChangingArgs, null).then(function (shapeChangingArgs) {
                             _this.updateShapeChangeEventArgs(shapeChangingArgs.currentShapeSettings);
                             _this.setDimension(width, height);
                             parent.notify('draw', { prop: 'drawObject', onPropertyChange: false, value: { canvas: 'duplicate' } });
@@ -461,8 +491,10 @@ var Shape = /** @class */ (function () {
     };
     Shape.prototype.setPointCollForLineAndArrow = function () {
         var parent = this.parent;
-        if (parent.activeObj.shape === 'line' || parent.activeObj.shape === 'arrow') {
-            parent.activeObj.pointColl = this.getLinePoints(parent.activeObj.activePoint.startX, parent.activeObj.activePoint.startY, parent.activeObj.activePoint.endX, parent.activeObj.activePoint.endY);
+        var shape = parent.activeObj.shape;
+        var _a = parent.activeObj.activePoint, startX = _a.startX, startY = _a.startY, endX = _a.endX, endY = _a.endY;
+        if (shape === 'line' || shape === 'arrow') {
+            parent.activeObj.pointColl = this.getLinePoints(startX, startY, endX, endY);
             if (parent.activeObj.pointColl) {
                 for (var i = 0, len = parent.activeObj.pointColl.length; i < len; i++) {
                     parent.activeObj.pointColl[i].ratioX = (parent.activeObj.pointColl[i].x -
@@ -533,11 +565,11 @@ var Shape = /** @class */ (function () {
             var obj = { shapeSettingsObj: {} };
             parent.notify('selection', { prop: 'updatePrevShapeSettings', onPropertyChange: false, value: { obj: obj } });
             var shapeSettings = obj['shapeSettingsObj'];
-            var shapeChangingArgs = { action: 'insert', previousShapeSettings: shapeSettings,
+            var shapeChangingArgs = { cancel: false, action: 'insert', previousShapeSettings: shapeSettings,
                 currentShapeSettings: shapeSettings };
             if (isBlazor() && parent.events && parent.events.shapeChanging.hasDelegate === true) {
                 /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
-                parent.dotNetRef.invokeMethodAsync('ShapeEventAsync', 'OnShape', shapeChangingArgs).then(function (shapeChangingArgs) {
+                parent.dotNetRef.invokeMethodAsync('ShapeEventAsync', 'OnShape', shapeChangingArgs, null).then(function (shapeChangingArgs) {
                     _this.drawShapeTextEvent(shapeChangingArgs);
                     if (parent.isPublicMethod) {
                         parent.notify('undo-redo', { prop: 'updateUndoRedo', onPropertyChange: false });
@@ -563,9 +595,8 @@ var Shape = /** @class */ (function () {
         var prevCropObj = extend({}, parent.cropObj, {}, true);
         parent.notify('undo-redo', { prop: 'updateUndoRedoColl', onPropertyChange: false,
             value: { operation: 'shapeTransform', 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 } });
+                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) {
@@ -596,25 +627,24 @@ var Shape = /** @class */ (function () {
         parent.notify('undo-redo', { prop: 'updateUndoRedoColl', onPropertyChange: false,
             value: { operation: 'shapeTransform', 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 } });
+                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 (!isBlazor()) {
-            parent.notify('toolbar', { prop: 'renderQAT', onPropertyChange: false, value: { isPenEdit: null } });
+        if (isBlazor()) {
+            parent.updateToolbar(parent.element, 'quickAccessToolbar', 'text');
         }
         else {
-            parent.updateToolbar(parent.element, 'quickAccessToolbar', 'text');
+            parent.notify('toolbar', { prop: 'renderQAT', onPropertyChange: false, value: { isPenEdit: null } });
         }
         parent.notify('selection', { prop: 'isShapeInserted', onPropertyChange: false, value: { bool: true } });
-        if (!isBlazor()) {
+        if (isBlazor()) {
+            parent.updateToolbar(parent.element, 'text');
+        }
+        else {
             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 });
         }
-        else {
-            parent.updateToolbar(parent.element, 'text');
-        }
     };
     Shape.prototype.initializeTextShape = function (text, fontFamily, fontSize, bold, italic, strokeColor) {
         var parent = this.parent;
@@ -633,9 +663,9 @@ var Shape = /** @class */ (function () {
         parent.activeObj.textSettings.bold = bold || parent.activeObj.textSettings.bold;
         parent.activeObj.textSettings.italic = italic || parent.activeObj.textSettings.italic;
     };
-    Shape.prototype.drawImage = function (x, y, width, height, src, degree, isAspectRatio) {
+    Shape.prototype.drawImage = function (x, y, width, height, src, degree, isAspectRatio, opacity) {
         this.initializeShape('image');
-        this.onLoadImgShape(x, y, width, height, src, null, degree, isAspectRatio);
+        this.onLoadImgShape(x, y, width, height, src, null, degree, isAspectRatio, opacity);
     };
     Shape.prototype.redrawActObj = function (x, y, isMouseDown) {
         var splitWords;
@@ -644,7 +674,7 @@ var Shape = /** @class */ (function () {
             splitWords = parent.activeObj.shape.split('-');
         }
         if (parent.activeObj.horTopLine && (parent.activeObj.shape && splitWords[0] !== 'crop')) {
-            if (parent.textArea.style.display === 'block') {
+            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) {
@@ -676,10 +706,6 @@ var Shape = /** @class */ (function () {
                 var temp = this.lowerContext.filter;
                 this.lowerContext.filter = 'none';
                 parent.togglePen = false;
-                this.iterateObjColl();
-                parent.notify('freehandDraw', { prop: 'freehandRedraw', onPropertyChange: false,
-                    value: { context: this.lowerContext, points: null } });
-                parent.togglePen = false;
                 if (parent.isCircleCrop || (parent.currSelectionPoint &&
                     parent.currSelectionPoint.shape === 'crop-circle')) {
                     parent.notify('crop', { prop: 'cropCircle', onPropertyChange: false,
@@ -704,7 +730,6 @@ var Shape = /** @class */ (function () {
                     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 } });
-                        parent.notify('draw', { prop: 'clearOuterCanvas', onPropertyChange: false, value: { context: this.lowerContext } });
                     }
                     else {
                         parent.notify('draw', { prop: 'drawObject', onPropertyChange: false, value: { canvas: canvas, obj: obj } });
@@ -737,61 +762,74 @@ var Shape = /** @class */ (function () {
     };
     Shape.prototype.updSelChangeEventArgs = function (selectionSettings) {
         var parent = this.parent;
-        parent.activeObj.activePoint.startX = selectionSettings.startX;
-        parent.activeObj.activePoint.startY = selectionSettings.startY;
-        parent.activeObj.activePoint.width = selectionSettings.width;
-        parent.activeObj.activePoint.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;
+        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 };
     };
     Shape.prototype.updateShapeChangeEventArgs = function (shapeSettings) {
         var parent = this.parent;
-        parent.activeObj.currIndex = shapeSettings.id;
-        parent.activeObj.activePoint.startX = shapeSettings.startX;
-        parent.activeObj.activePoint.startY = shapeSettings.startY;
-        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;
-        parent.activeObj.strokeSettings.strokeColor = shapeSettings.strokeColor;
-        parent.activeObj.strokeSettings.fillColor = shapeSettings.fillColor;
-        if (isNullOrUndefined(shapeSettings.degree)) {
-            shapeSettings.degree = 0;
-        }
-        switch (parent.activeObj.shape) {
-            case 'ellipse':
-                parent.activeObj.activePoint.width = shapeSettings.radius * 2;
-                parent.activeObj.rotatedAngle = shapeSettings.degree * (Math.PI / 180);
-                break;
-            case 'line':
-            case 'arrow':
-                parent.activeObj.activePoint.width = shapeSettings.length;
-                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.textSettings.fontFamily = shapeSettings.fontFamily;
-                break;
-            case 'rectangle':
-            case 'image':
-                if (shapeSettings.degree) {
-                    parent.activeObj.rotatedAngle = shapeSettings.degree * (Math.PI / 180);
-                }
-                break;
+        var shapeId;
+        if (shapeSettings.id && shapeSettings.id.split('_')[0] && shapeSettings.id.split('_')[0] === 'pen') {
+            shapeId = parseInt(shapeSettings.id.split('_')[1], 10) - 1;
+            parent.pointColl[shapeId].points = shapeSettings.points;
+            parent.pointColl[shapeId].strokeColor = shapeSettings.strokeColor;
+            parent.pointColl[shapeId].strokeWidth = shapeSettings.strokeWidth;
+            parent.pointColl[shapeId].opacity = shapeSettings.opacity;
         }
-        if (parent.activeObj.shape === 'text' && parent.activeObj.textSettings) {
-            for (var i = 0; i < shapeSettings.fontStyle.length; i++) {
-                switch (shapeSettings.fontStyle[i]) {
-                    case 'bold':
-                        parent.activeObj.textSettings.bold = true;
-                        break;
-                    case 'italic':
-                        parent.activeObj.textSettings.italic = true;
-                        break;
-                    case 'underline':
-                        parent.activeObj.textSettings.underline = true;
-                        break;
+        else {
+            parent.activeObj.currIndex = shapeSettings.id;
+            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;
+            }
+            parent.activeObj.strokeSettings.strokeColor = shapeSettings.strokeColor;
+            parent.activeObj.strokeSettings.fillColor = shapeSettings.fillColor;
+            parent.activeObj.opacity = shapeSettings.opacity;
+            if (isNullOrUndefined(shapeSettings.degree)) {
+                shapeSettings.degree = 0;
+            }
+            switch (parent.activeObj.shape) {
+                case 'ellipse':
+                    parent.activeObj.activePoint.width = shapeSettings.radius * 2;
+                    if (shapeSettings.degree) {
+                        parent.activeObj.rotatedAngle = shapeSettings.degree * (Math.PI / 180);
+                    }
+                    break;
+                case 'line':
+                case 'arrow':
+                    parent.activeObj.activePoint.width = shapeSettings.length;
+                    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.textSettings.fontFamily = shapeSettings.fontFamily;
+                    break;
+                case 'rectangle':
+                case 'image':
+                    if (shapeSettings.degree) {
+                        parent.activeObj.rotatedAngle = shapeSettings.degree * (Math.PI / 180);
+                    }
+                    break;
+            }
+            if (parent.activeObj.shape === 'text' && parent.activeObj.textSettings) {
+                for (var i = 0; i < shapeSettings.fontStyle.length; i++) {
+                    switch (shapeSettings.fontStyle[i]) {
+                        case 'bold':
+                            parent.activeObj.textSettings.bold = true;
+                            break;
+                        case 'italic':
+                            parent.activeObj.textSettings.italic = true;
+                            break;
+                        case 'underline':
+                            parent.activeObj.textSettings.underline = true;
+                            break;
+                    }
                 }
             }
         }
@@ -810,6 +848,7 @@ var Shape = /** @class */ (function () {
     Shape.prototype.addLetter = function (letter) {
         var parent = this.parent;
         if (parent.textArea.style.display === 'none' && (parent.currObjType.isText || parent.activeObj.shape === 'text')) {
+            var fontSize = parent.activeObj.textSettings.fontSize;
             if (letter === 'Backspace') {
                 this.keyHistory = this.keyHistory.slice(0, -1);
             }
@@ -818,11 +857,9 @@ var Shape = /** @class */ (function () {
             }
             this.upperContext.clearRect(0, 0, parent.upperCanvas.width, parent.upperCanvas.height);
             this.updateFontStyles();
-            var width = this.upperContext.measureText(this.keyHistory).width
-                + parent.activeObj.textSettings.fontSize * 0.5;
-            var height = parent.activeObj.textSettings.fontSize + parent.activeObj.textSettings.fontSize * 0.25;
-            this.upperContext.fillText(this.keyHistory, parent.activeObj.activePoint.startX, parent.activeObj.activePoint.startY +
-                parent.activeObj.textSettings.fontSize);
+            var width = this.upperContext.measureText(this.keyHistory).width + fontSize * 0.5;
+            var height = fontSize + fontSize * 0.25;
+            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,
@@ -831,18 +868,20 @@ var Shape = /** @class */ (function () {
     };
     Shape.prototype.redrawText = function () {
         var parent = this.parent;
+        var _a = parent.activeObj.textSettings, fontSize = _a.fontSize, fontFamily = _a.fontFamily, bold = _a.bold, italic = _a.italic;
         var fontStyle = '';
-        if (parent.activeObj.textSettings.bold) {
+        if (bold) {
             fontStyle += 'bold ';
         }
-        if (parent.activeObj.textSettings.italic) {
+        if (italic) {
             fontStyle += 'italic ';
         }
-        this.upperContext.font = fontStyle + parent.activeObj.textSettings.fontSize + 'px ' + parent.activeObj.textSettings.fontFamily;
+        this.upperContext.font = fontStyle + fontSize + 'px ' + fontFamily;
         var rows = parent.activeObj.keyHistory.split('\n');
-        var text = parent.textArea.style.display === 'block' ? this.getMaxText(true) : this.getMaxText();
-        var width = this.upperContext.measureText(text).width + parent.activeObj.textSettings.fontSize * 0.5;
-        var height = rows.length * (parent.activeObj.textSettings.fontSize + parent.activeObj.textSettings.fontSize * 0.25);
+        var text = (parent.textArea.style.display === 'block' || parent.textArea.style.display === 'inline-block') ?
+            this.getMaxText(true) : this.getMaxText();
+        var width = this.upperContext.measureText(text).width + fontSize * 0.5;
+        var height = rows.length * (fontSize + fontSize * 0.25);
         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,
@@ -853,13 +892,15 @@ var Shape = /** @class */ (function () {
     Shape.prototype.updateTextFromTextArea = function () {
         var parent = this.parent;
         var allowUndoRedo = false;
+        var fontSize = parent.activeObj.textSettings.fontSize;
+        var tempActiveObj = extend({}, parent.activeObj, {}, true);
         var prevCropObj = extend({}, parent.cropObj, {}, true);
         var object = { currObj: {} };
         parent.notify('filter', { prop: 'getCurrentObj', onPropertyChange: false, value: { object: object } });
         var prevObj = object['currObj'];
         prevObj.objColl = extend([], parent.objColl, [], true);
         prevObj.pointColl = extend([], parent.pointColl, [], true);
-        prevObj.afterCropActions = extend([], this.parent.afterCropActions, [], true);
+        prevObj.afterCropActions = extend([], parent.afterCropActions, [], true);
         var selPointCollObj = { selPointColl: null };
         parent.notify('freehand-draw', { prop: 'getSelPointColl', onPropertyChange: false,
             value: { obj: selPointCollObj } });
@@ -871,24 +912,44 @@ var Shape = /** @class */ (function () {
         parent.textArea.style.display = 'none';
         parent.textArea.value = '';
         this.updateFontStyles();
-        var width = this.upperContext.measureText(parent.activeObj.keyHistory).width +
-            parent.activeObj.textSettings.fontSize * 0.5;
-        var height = parent.activeObj.textSettings.fontSize + this.parent.activeObj.textSettings.fontSize * 0.25;
+        var width = this.upperContext.measureText(parent.activeObj.keyHistory).width + fontSize * 0.5;
+        var height = fontSize + fontSize * 0.25;
         var rows = parent.activeObj.keyHistory.split('\n');
         if (rows.length > 1) {
             height *= rows.length;
             var widthColl = [];
             for (var i = 0, len = rows.length; i < len; i++) {
-                widthColl.push(this.upperContext.measureText(rows[i]).width +
-                    parent.activeObj.textSettings.fontSize * 0.5);
+                widthColl.push(this.upperContext.measureText(rows[i]).width + fontSize * 0.5);
             }
             width = Math.max.apply(Math, widthColl);
         }
         parent.notify('selection', { prop: 'setTextSelection', onPropertyChange: false,
             value: { width: width, height: height } });
+        if (parent.activeObj.rotatedAngle !== 0) {
+            var width_1 = parent.activeObj.activePoint.width - tempActiveObj.activePoint.width;
+            var height_1 = parent.activeObj.activePoint.height - tempActiveObj.activePoint.height;
+            var value = '';
+            if (width_1 > 0 && height_1 > 0) {
+                value = 'widthHeight';
+            }
+            else if (width_1 !== 0) {
+                value = 'width';
+            }
+            else if (height_1 !== 0) {
+                value = 'height';
+            }
+            parent.activeObj.activePoint = extend({}, tempActiveObj.activePoint, {}, true);
+            parent.notify('selection', { prop: 'adjustRotationPoints', onPropertyChange: false, value: { rectangle: parent.activeObj.activePoint,
+                    x: width_1, y: height_1, 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));
@@ -907,7 +968,10 @@ var Shape = /** @class */ (function () {
         var parent = this.parent;
         if (parent.objColl.length > 0) {
             for (var i = 0, len = parent.objColl.length; i < len; i++) {
+                var temp = this.lowerContext.filter;
+                this.lowerContext.filter = 'none';
                 this.apply(parent.objColl[i].shape, parent.objColl[i]);
+                this.lowerContext.filter = temp;
                 this.refreshActiveObj();
             }
             parent.notify('draw', { prop: 'applyFrame', value: { ctx: this.lowerContext, frame: parent.frameObj.type, preventImg: true } });
@@ -915,18 +979,21 @@ var Shape = /** @class */ (function () {
     };
     Shape.prototype.updImgRatioForActObj = function () {
         var parent = this.parent;
-        parent.activeObj.imageRatio = { startX: ((parent.activeObj.activePoint.startX - parent.img.destLeft) /
-                parent.img.destWidth),
-            startY: ((parent.activeObj.activePoint.startY - parent.img.destTop) / parent.img.destHeight),
-            endX: ((parent.activeObj.activePoint.endX - parent.img.destLeft) / parent.img.destWidth),
-            endY: ((parent.activeObj.activePoint.endY - parent.img.destTop) / parent.img.destHeight),
-            width: parent.img.destWidth / parent.activeObj.activePoint.width, height: parent.img.destHeight /
-                parent.activeObj.activePoint.height };
+        var destPoints = { startX: parent.img.destLeft, startY: parent.img.destTop,
+            width: parent.img.destWidth, height: parent.img.destHeight };
+        this.straightenShapes();
+        var _a = parent.img, destLeft = _a.destLeft, destTop = _a.destTop, destWidth = _a.destWidth, destHeight = _a.destHeight;
+        var 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 -
-                parent.img.destLeft) / parent.img.destWidth;
+                destLeft) / destWidth;
             parent.activeObj.rotationCirclePointColl.ratioY = (parent.activeObj.rotationCirclePointColl.y -
-                parent.img.destTop) / parent.img.destHeight;
+                destTop) / destHeight;
         }
         if (parent.activeObj.shape === 'path') {
             this.updatePathRatio(parent.activeObj);
@@ -934,15 +1001,23 @@ var Shape = /** @class */ (function () {
         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;
     };
     Shape.prototype.zoomObjColl = function (preventApply) {
         var parent = this.parent;
+        var destPoints = { startX: parent.img.destLeft, startY: parent.img.destTop,
+            width: parent.img.destWidth, height: parent.img.destHeight };
+        this.straightenShapes();
+        var _a = parent.img, destLeft = _a.destLeft, destTop = _a.destTop, destWidth = _a.destWidth, destHeight = _a.destHeight;
         for (var i = 0, len = parent.objColl.length; i < len; i++) {
             var currObj = parent.objColl[i];
-            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.activePoint.startX = (currObj.imageRatio.startX * destWidth) + destLeft;
+            currObj.activePoint.startY = (currObj.imageRatio.startY * destHeight) + destTop;
+            currObj.activePoint.endX = (currObj.imageRatio.endX * destWidth) + destLeft;
+            currObj.activePoint.endY = (currObj.imageRatio.endY * destHeight) + destTop;
             currObj = this.updateWidthHeight(currObj);
             if (currObj.shape === 'text') {
                 this.updateFontSize(currObj);
@@ -951,22 +1026,28 @@ var Shape = /** @class */ (function () {
                 currObj.pointColl = this.getLinePoints(currObj.activePoint.startX, currObj.activePoint.startY, currObj.activePoint.endX, currObj.activePoint.endY);
                 for (var n = 0, len_1 = currObj.pointColl.length; n < len_1; n++) {
                     currObj.pointColl[n].ratioX =
-                        (currObj.pointColl[n].x - parent.img.destLeft) / parent.img.destWidth;
+                        (currObj.pointColl[n].x - destLeft) / destWidth;
                     currObj.pointColl[n].ratioY =
-                        (currObj.pointColl[n].y - parent.img.destTop) / parent.img.destHeight;
+                        (currObj.pointColl[n].y - destTop) / 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 (var l = 0, len_2 = currObj.pointColl.length; l < len_2; l++) {
-                    currObj.pointColl[l].x = (currObj.pointColl[l].ratioX * parent.img.destWidth)
-                        + parent.img.destLeft;
-                    currObj.pointColl[l].y = (currObj.pointColl[l].ratioY * parent.img.destHeight) +
-                        parent.img.destTop;
+                    currObj.pointColl[l].x = (currObj.pointColl[l].ratioX * destWidth) +
+                        destLeft;
+                    currObj.pointColl[l].y = (currObj.pointColl[l].ratioY * destHeight) +
+                        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 } });
@@ -980,23 +1061,134 @@ var Shape = /** @class */ (function () {
             }
             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;
-                currObj.rotationCirclePointColl.x =
-                    (currObj.rotationCirclePointColl.ratioX * parent.img.destWidth) +
-                        parent.img.destLeft;
-                currObj.rotationCirclePointColl.y =
-                    (currObj.rotationCirclePointColl.ratioY * parent.img.destHeight) +
-                        parent.img.destTop;
+                currObj.rotationCirclePoint.x = (currObj.rotationCirclePoint.ratioX * destWidth) + destLeft;
+                currObj.rotationCirclePoint.y = (currObj.rotationCirclePoint.ratioY * destHeight) + destTop;
+                currObj.rotationCirclePointColl.x = (currObj.rotationCirclePointColl.ratioX * destWidth) + destLeft;
+                currObj.rotationCirclePointColl.y = (currObj.rotationCirclePointColl.ratioY * destHeight) + destTop;
+            }
+        }
+        parent.img.destLeft = destPoints.startX;
+        parent.img.destTop = destPoints.startY;
+        parent.img.destWidth = destPoints.width;
+        parent.img.destHeight = destPoints.height;
+    };
+    Shape.prototype.straightenPath = function (obj) {
+        var point;
+        for (var j = 0, len = obj.pointColl.length; j < len; j++) {
+            point = this.straightenPoints(obj.pointColl[j].x, obj.pointColl[j].y);
+            obj.pointColl[j].x = point.x;
+            obj.pointColl[j].y = point.y;
+        }
+    };
+    Shape.prototype.straightenFHD = function () {
+        var parent = this.parent;
+        for (var i = 0, fLen = parent.freehandCounter; i < fLen; i++) {
+            parent.points = extend([], parent.pointColl[i].points, []);
+            var len = parent.points.length;
+            var point = void 0;
+            for (var l = 0; l < len; l++) {
+                point = this.straightenPoints(parent.points[l].x, parent.points[l].y);
+                parent.points[l].x = point.x;
+                parent.points[l].y = point.y;
             }
         }
+        var selPointCollObj = { selPointColl: null };
+        parent.notify('freehand-draw', { prop: 'getSelPointColl', onPropertyChange: false, value: { obj: selPointCollObj } });
+        for (var i = 0, fLen = parent.freehandCounter; i < fLen; i++) {
+            var len = selPointCollObj['selPointColl'][i].points.length;
+            var point = void 0;
+            for (var l = 0; l < len; l++) {
+                point = this.straightenPoints(selPointCollObj['selPointColl'][i].points[l].x, selPointCollObj['selPointColl'][i].points[l].y);
+                selPointCollObj['selPointColl'][i].points[l].x = point.x;
+                selPointCollObj['selPointColl'][i].points[l].y = point.y;
+            }
+        }
+        var straightenObj = { straightenPoint: null };
+        parent.notify('freehand-draw', { prop: 'getStraightenPoint', onPropertyChange: false, value: { obj: straightenObj } });
+        if (straightenObj['straightenPoint']['x'] && straightenObj['straightenPoint']['y']) {
+            var obj = { angle: 0 };
+            parent.notify('freehand-draw', { prop: 'getStraightenPointAngle', onPropertyChange: false, value: { obj: obj } });
+            var angle = (((parent.transform.straighten === 360 ? 0 : parent.transform.straighten) - obj['angle']) * (Math.PI / 180));
+            var 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 } });
+        }
+    };
+    Shape.prototype.straightenPoints = function (x, y, angle) {
+        var parent = this.parent;
+        var center = { 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));
+        var 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;
+    };
+    Shape.prototype.straightenShapes = function () {
+        var parent = this.parent;
+        var _a = parent.img, destLeft = _a.destLeft, destTop = _a.destTop, destWidth = _a.destWidth, destHeight = _a.destHeight;
+        var straightenObj = { bool: parent.isStraightening };
+        if (!straightenObj['bool'] || parent.transform.straighten === 0) {
+            return;
+        }
+        parent.notify('draw', { prop: 'updateImgCanvasPoints' });
+        var object = { points: null };
+        parent.notify('draw', { prop: 'getImageCanvasPoints', value: { obj: object } });
+        var center = { x: destLeft + (destWidth / 2), y: destTop + (destHeight / 2) };
+        var angle = -((parent.transform.straighten) * (Math.PI / 180));
+        var p1 = { 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 };
+        var p2 = { 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 };
+        var p3 = { 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;
+    };
+    Shape.prototype.straightenShapePoints = function (obj, isReverse) {
+        var parent = this.parent;
+        var _a = parent.img, destLeft = _a.destLeft, destTop = _a.destTop, destWidth = _a.destWidth, destHeight = _a.destHeight;
+        var straightenObj = { 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;
+            var center = { x: destLeft + (destWidth / 2), y: destTop + (destHeight / 2) };
+            var angle = (isReverse ? -parent.transform.straighten : parent.transform.straighten) * (Math.PI / 180);
+            var start = { 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 };
+            var end = { 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 } });
+        }
     };
     Shape.prototype.redrawObj = function (degree) {
         var parent = this.parent;
         var isShape = false;
-        if (this.parent.objColl.length > 0) {
+        if (parent.objColl.length > 0) {
             if (degree === 'horizontal' || degree === 'vertical' || degree === 'Horizontal' || degree === 'Vertical' ||
                 degree === 'horizontalVertical' || degree === 'verticalHorizontal') {
                 this.updateCurrentActiveObjPoint(degree.toLowerCase());
@@ -1023,6 +1215,7 @@ var Shape = /** @class */ (function () {
     Shape.prototype.updateCurrentActiveObjPoint = function (degree) {
         var parent = this.parent;
         var currActObjIndex;
+        var _a = parent.img, destLeft = _a.destLeft, destTop = _a.destTop, destWidth = _a.destWidth, destHeight = _a.destHeight;
         for (var index = 0, len = parent.objColl.length; index < len; index++) {
             var currObj = parent.objColl[index];
             if (parent.activeObj.shape === currObj.shape &&
@@ -1041,42 +1234,39 @@ var Shape = /** @class */ (function () {
                 for (var i = 0, len = parent.objColl.length; i < len; i++) {
                     var currObj = parent.objColl[i];
                     if (currObj.shapeFlip !== parent.transform.currFlipState) {
-                        if (currObj.activePoint.startX <= parent.img.destLeft + (parent.img.destWidth / 2)) {
-                            currObj.activePoint.endX = (parent.img.destLeft + parent.img.destWidth) - (currObj.activePoint.startX -
-                                parent.img.destLeft);
+                        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 >= parent.img.destLeft + (parent.img.destWidth / 2)) {
-                            currObj.activePoint.startX = parent.img.destLeft + (parent.img.destLeft + parent.img.destWidth -
-                                currObj.activePoint.endX);
+                        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 } });
+                            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 <= parent.img.destLeft + (parent.img.destWidth / 2)) {
-                                currObj.rotationCirclePointColl.x = (parent.img.destLeft + parent.img.destWidth) -
-                                    (currObj.rotationCirclePointColl.x - parent.img.destLeft);
+                            if (currObj.rotationCirclePointColl.x <= destLeft + (destWidth / 2)) {
+                                currObj.rotationCirclePointColl.x = (destLeft + destWidth) -
+                                    (currObj.rotationCirclePointColl.x - destLeft);
                             }
-                            else if (currObj.rotationCirclePointColl.x >= parent.img.destLeft + (parent.img.destWidth / 2)) {
-                                currObj.rotationCirclePointColl.x = parent.img.destLeft +
-                                    (parent.img.destLeft + parent.img.destWidth - currObj.rotationCirclePointColl.x);
+                            else if (currObj.rotationCirclePointColl.x >= destLeft + (destWidth / 2)) {
+                                currObj.rotationCirclePointColl.x = destLeft +
+                                    (destLeft + destWidth - currObj.rotationCirclePointColl.x);
                             }
                             currObj.rotationCirclePointColl.ratioX =
-                                (currObj.rotationCirclePointColl.x - parent.img.destLeft) / parent.img.destWidth;
+                                (currObj.rotationCirclePointColl.x - destLeft) / destWidth;
                         }
                         currObj.shapeFlip = parent.transform.currFlipState;
-                        currObj.imageRatio = { startX: ((currObj.activePoint.startX - parent.img.destLeft) / parent.img.destWidth),
-                            startY: ((currObj.activePoint.startY - parent.img.destTop) / parent.img.destHeight),
-                            endX: ((currObj.activePoint.endX - parent.img.destLeft) / parent.img.destWidth),
-                            endY: ((currObj.activePoint.endY - parent.img.destTop) / parent.img.destHeight),
-                            width: parent.img.destWidth / currObj.activePoint.width,
-                            height: parent.img.destHeight / currObj.activePoint.height };
+                        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 };
                     }
                 }
             }
@@ -1084,18 +1274,15 @@ var Shape = /** @class */ (function () {
                 for (var i = 0; i < parent.objColl.length; i++) {
                     var currObj = parent.objColl[i];
                     if (currObj.shapeFlip !== parent.transform.currFlipState) {
-                        if (currObj.activePoint.startY <= parent.img.destTop + (parent.img.destHeight / 2)) {
-                            currObj.activePoint.endY = (parent.img.destTop + parent.img.destHeight) -
-                                (currObj.activePoint.startY - parent.img.destTop);
+                        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 >= this.parent.lowerCanvas.height / 2) {
-                            currObj.activePoint.startY = parent.img.destTop + (parent.img.destTop +
-                                parent.img.destHeight - currObj.activePoint.endY);
-                            currObj.activePoint.endY = currObj.activePoint.startY +
-                                currObj.activePoint.height;
+                        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 } });
                         }
@@ -1105,25 +1292,23 @@ var Shape = /** @class */ (function () {
                         }
                         else if (currObj.rotatedAngle !== 0) {
                             currObj.rotatedAngle = -currObj.rotatedAngle;
-                            if (currObj.rotationCirclePointColl.y <= parent.img.destTop + (parent.img.destHeight / 2)) {
-                                currObj.rotationCirclePointColl.y = (parent.img.destTop + parent.img.destHeight) -
-                                    (currObj.rotationCirclePointColl.y - parent.img.destTop);
+                            if (currObj.rotationCirclePointColl.y <= destTop + (destHeight / 2)) {
+                                currObj.rotationCirclePointColl.y = (destTop + destHeight) - (currObj.rotationCirclePointColl.y - destTop);
                             }
-                            else if (currObj.rotationCirclePointColl.y >= parent.img.destTop +
-                                (parent.img.destHeight / 2)) {
-                                currObj.rotationCirclePointColl.y = parent.img.destTop + (parent.img.destTop +
-                                    parent.img.destHeight - currObj.rotationCirclePointColl.y);
+                            else if (currObj.rotationCirclePointColl.y >= destTop +
+                                (destHeight / 2)) {
+                                currObj.rotationCirclePointColl.y = destTop + (destTop + destHeight - currObj.rotationCirclePointColl.y);
                             }
                             currObj.rotationCirclePointColl.ratioY =
-                                (currObj.rotationCirclePointColl.y - parent.img.destTop) / parent.img.destHeight;
+                                (currObj.rotationCirclePointColl.y - destTop) / destHeight;
                         }
                         currObj.shapeFlip = parent.transform.currFlipState;
-                        currObj.imageRatio = { startX: ((currObj.activePoint.startX - parent.img.destLeft) / parent.img.destWidth),
-                            startY: ((currObj.activePoint.startY - parent.img.destTop) / parent.img.destHeight),
-                            endX: ((currObj.activePoint.endX - parent.img.destLeft) / parent.img.destWidth),
-                            endY: ((currObj.activePoint.endY - parent.img.destTop) / parent.img.destHeight),
-                            width: parent.img.destWidth / currObj.activePoint.width,
-                            height: parent.img.destHeight / currObj.activePoint.height };
+                        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 };
                     }
                 }
             }
@@ -1131,28 +1316,28 @@ var Shape = /** @class */ (function () {
                 for (var i = 0, len = parent.objColl.length; i < len; i++) {
                     var currObj = parent.objColl[i];
                     if (currObj.shapeFlip !== parent.transform.currFlipState) {
-                        if (currObj.activePoint.startX <= parent.img.destLeft + (parent.img.destWidth / 2)) {
-                            currObj.activePoint.endX = (parent.img.destLeft + parent.img.destWidth) - (currObj.activePoint.startX -
-                                parent.img.destLeft);
+                        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 >= parent.img.destLeft + (parent.img.destWidth / 2)) {
-                            currObj.activePoint.startX = parent.img.destLeft + (parent.img.destLeft +
-                                parent.img.destWidth - currObj.activePoint.endX);
+                        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 <= parent.img.destTop + (parent.img.destHeight / 2)) {
-                            currObj.activePoint.endY = (parent.img.destTop + parent.img.destHeight) -
-                                (currObj.activePoint.startY - parent.img.destTop);
+                        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 >= this.parent.lowerCanvas.height / 2) {
-                            currObj.activePoint.startY = parent.img.destTop + (parent.img.destTop +
-                                parent.img.destHeight - currObj.activePoint.endY);
+                        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 } });
@@ -1161,12 +1346,12 @@ var Shape = /** @class */ (function () {
                             this.flipLineArrowObj(currObj, degree);
                         }
                         currObj.shapeFlip = parent.transform.currFlipState;
-                        currObj.imageRatio = { startX: ((currObj.activePoint.startX - parent.img.destLeft) / parent.img.destWidth),
-                            startY: ((currObj.activePoint.startY - parent.img.destTop) / parent.img.destHeight),
-                            endX: ((currObj.activePoint.endX - parent.img.destLeft) / parent.img.destWidth),
-                            endY: ((currObj.activePoint.endY - parent.img.destTop) / parent.img.destHeight),
-                            width: parent.img.destWidth / currObj.activePoint.width,
-                            height: parent.img.destHeight / currObj.activePoint.height };
+                        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 };
                     }
                 }
             }
@@ -1195,45 +1380,41 @@ var Shape = /** @class */ (function () {
     };
     Shape.prototype.rotateObjColl = function () {
         var parent = this.parent;
+        var _a = parent.img, destWidth = _a.destWidth, destHeight = _a.destHeight, destLeft = _a.destLeft, destTop = _a.destTop;
         for (var i = 0, len = parent.objColl.length; i < len; i++) {
             var currObj = parent.objColl[i];
-            currObj.activePoint.startY = parent.img.destTop + (parent.img.destHeight * currObj.imageRatio.startX);
-            currObj.activePoint.endY = parent.img.destTop + (parent.img.destHeight * currObj.imageRatio.endX);
-            currObj.activePoint.startX = (parent.img.destLeft + parent.img.destWidth) -
-                (parent.img.destWidth * currObj.imageRatio.endY);
-            currObj.activePoint.endX = (parent.img.destLeft + parent.img.destWidth) -
-                (parent.img.destWidth * currObj.imageRatio.startY);
+            var shape = 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]);
             this.updateFontSize(currObj);
-            if (currObj.shape === 'line' || currObj.shape === 'arrow' ||
-                currObj.shape === 'path') {
+            if (shape === 'line' || shape === 'arrow' || shape === 'path') {
                 this.rotateLineArrowObj(currObj);
-                if (currObj.shape === 'arrow') {
+                if (shape === 'arrow') {
                     this.updateArrowSize(currObj);
                 }
             }
             else if (currObj.rotatedAngle !== 0) {
-                currObj.rotationCirclePointColl.y = parent.img.destTop + (parent.img.destHeight * currObj.rotationCirclePointColl.ratioX);
-                currObj.rotationCirclePointColl.x = (parent.img.destLeft + parent.img.destWidth) -
-                    (parent.img.destWidth * currObj.rotationCirclePointColl.ratioY);
-                currObj.rotationCirclePointColl.ratioX = (currObj.rotationCirclePointColl.x
-                    - parent.img.destLeft) / parent.img.destWidth;
-                currObj.rotationCirclePointColl.ratioY = (currObj.rotationCirclePointColl.y
-                    - parent.img.destTop) / parent.img.destHeight;
+                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 (var i = 0, len = parent.objColl.length; i < len; i++) {
             parent.notify('draw', { prop: 'updateActiveObject', onPropertyChange: false, value: { actPoint: parent.objColl[i].activePoint, obj: parent.objColl[i] } });
         }
-        // Update current image ratio for all objects
         for (var i = 0, len = parent.objColl.length; i < len; i++) {
             var currObj = parent.objColl[i];
-            currObj.imageRatio = { startX: ((currObj.activePoint.startX - parent.img.destLeft) / parent.img.destWidth),
-                startY: ((currObj.activePoint.startY - parent.img.destTop) / parent.img.destHeight),
-                endX: ((currObj.activePoint.endX - parent.img.destLeft) / parent.img.destWidth),
-                endY: ((currObj.activePoint.endY - parent.img.destTop) / parent.img.destHeight),
-                width: parent.img.destWidth / currObj.activePoint.width,
-                height: parent.img.destHeight / currObj.activePoint.height };
+            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 };
         }
     };
     Shape.prototype.rotateLineArrowObj = function (obj) {
@@ -1241,15 +1422,16 @@ var Shape = /** @class */ (function () {
             return;
         }
         var parent = this.parent;
+        var _a = parent.img, destWidth = _a.destWidth, destHeight = _a.destHeight, destLeft = _a.destLeft, destTop = _a.destTop;
         if (obj.pointColl.length > 0) {
             for (var n = 0; n < obj.pointColl.length; n++) {
-                obj.pointColl[n].y = parent.img.destTop + (parent.img.destHeight * obj.pointColl[n].ratioX);
-                obj.pointColl[n].x = (parent.img.destLeft + parent.img.destWidth) - (parent.img.destWidth *
+                obj.pointColl[n].y = destTop + (destHeight * obj.pointColl[n].ratioX);
+                obj.pointColl[n].x = (destLeft + destWidth) - (destWidth *
                     obj.pointColl[n].ratioY);
             }
             for (var n = 0; n < obj.pointColl.length; n++) {
-                obj.pointColl[n].ratioX = (obj.pointColl[n].x - parent.img.destLeft) / parent.img.destWidth;
-                obj.pointColl[n].ratioY = (obj.pointColl[n].y - parent.img.destTop) / parent.img.destHeight;
+                obj.pointColl[n].ratioX = (obj.pointColl[n].x - destLeft) / destWidth;
+                obj.pointColl[n].ratioY = (obj.pointColl[n].y - destTop) / destHeight;
             }
             var prevPoint = void 0;
             if (isNullOrUndefined(obj.pointColl[obj.pointColl.length - 2])) {
@@ -1268,13 +1450,14 @@ var Shape = /** @class */ (function () {
         }
     };
     Shape.prototype.flipLineArrowObj = function (obj, value) {
+        value = value.toLowerCase();
         if (isNullOrUndefined(obj.pointColl)) {
             return;
         }
-        if (value.toLowerCase() === 'horizontal') {
+        if (value === 'horizontal') {
             this.lineArrowHorizontalFlip(obj);
         }
-        else if (value.toLowerCase() === 'vertical') {
+        else if (value === 'vertical') {
             this.lineArrowVerticalFlip(obj);
         }
         else {
@@ -1297,20 +1480,18 @@ var Shape = /** @class */ (function () {
     };
     Shape.prototype.lineArrowHorizontalFlip = function (obj) {
         var parent = this.parent;
-        // Update flip value for point collection
+        var _a = parent.img, destWidth = _a.destWidth, destHeight = _a.destHeight, destLeft = _a.destLeft, destTop = _a.destTop;
         if (obj.shapeFlip !== parent.transform.currFlipState) {
             for (var l = 0, len = obj.pointColl.length; l < len; l++) {
                 var currPoint = obj.pointColl[l];
-                if (currPoint.x <= parent.img.destLeft + (parent.img.destWidth / 2)) {
-                    currPoint.x = (parent.img.destLeft + parent.img.destWidth) - (currPoint.x
-                        - parent.img.destLeft);
+                if (currPoint.x <= destLeft + (destWidth / 2)) {
+                    currPoint.x = (destLeft + destWidth) - (currPoint.x - destLeft);
                 }
-                else if (currPoint.x >= parent.img.destLeft + (parent.img.destWidth / 2)) {
-                    currPoint.x = parent.img.destLeft + (parent.img.destLeft + parent.img.destWidth -
-                        currPoint.x);
+                else if (currPoint.x >= destLeft + (destWidth / 2)) {
+                    currPoint.x = destLeft + (destLeft + destWidth - currPoint.x);
                 }
-                currPoint.ratioX = (currPoint.x - parent.img.destLeft) / parent.img.destWidth;
-                currPoint.ratioY = (currPoint.y - parent.img.destTop) / parent.img.destHeight;
+                currPoint.ratioX = (currPoint.x - destLeft) / destWidth;
+                currPoint.ratioY = (currPoint.y - destTop) / destHeight;
             }
             if (obj.shape === 'arrow') {
                 var value = obj.start;
@@ -1322,20 +1503,18 @@ var Shape = /** @class */ (function () {
     };
     Shape.prototype.lineArrowVerticalFlip = function (obj) {
         var parent = this.parent;
-        // Update flip value for point collection
+        var _a = parent.img, destWidth = _a.destWidth, destHeight = _a.destHeight, destLeft = _a.destLeft, destTop = _a.destTop;
         if (obj.shapeFlip !== parent.transform.currFlipState) {
             for (var l = 0, len = obj.pointColl.length; l < len; l++) {
                 var currPoint = obj.pointColl[l];
-                if (currPoint.y <= parent.img.destTop + (parent.img.destHeight / 2)) {
-                    currPoint.y = (parent.img.destTop + parent.img.destHeight) -
-                        (currPoint.y - parent.img.destTop);
+                if (currPoint.y <= destTop + (destHeight / 2)) {
+                    currPoint.y = (destTop + destHeight) - (currPoint.y - destTop);
                 }
-                else if (currPoint.y >= parent.img.destTop + (parent.img.destHeight / 2)) {
-                    currPoint.y = parent.img.destTop + (parent.img.destTop + parent.img.destHeight -
-                        currPoint.y);
+                else if (currPoint.y >= destTop + (destHeight / 2)) {
+                    currPoint.y = destTop + (destTop + destHeight - currPoint.y);
                 }
-                currPoint.ratioX = (currPoint.x - parent.img.destLeft) / parent.img.destWidth;
-                currPoint.ratioY = (currPoint.y - parent.img.destTop) / parent.img.destHeight;
+                currPoint.ratioX = (currPoint.x - destLeft) / destWidth;
+                currPoint.ratioY = (currPoint.y - destTop) / destHeight;
             }
             obj.shapeFlip = parent.transform.currFlipState;
         }
@@ -1357,20 +1536,23 @@ var Shape = /** @class */ (function () {
         var parent = this.parent;
         var degree = this.getRotDegOfShape(parent.activeObj);
         this.transformTextArea();
-        if (!isBlazor()) {
-            parent.notify('toolbar', { prop: 'destroy-qa-toolbar', onPropertyChange: false });
+        if (isBlazor()) {
+            parent.updateToolbar(parent.element, 'destroyQuickAccessToolbar');
         }
         else {
-            parent.updateToolbar(parent.element, 'destroyQuickAccessToolbar');
+            parent.notify('toolbar', { prop: 'destroy-qa-toolbar', onPropertyChange: false });
         }
-        if (parent.element.querySelector('#' + parent.element.id + '_duplicate')) {
-            parent.element.querySelector('#' + parent.element.id + '_duplicate').classList.add('e-disabled');
+        var dupElem = parent.element.querySelector('#' + parent.element.id + '_duplicate');
+        var removeElem = parent.element.querySelector('#' + parent.element.id + '_remove');
+        var editTextElem = parent.element.querySelector('#' + parent.element.id + '_editText');
+        if (dupElem) {
+            dupElem.classList.add('e-disabled');
         }
-        if (parent.element.querySelector('#' + parent.element.id + '_remove')) {
-            parent.element.querySelector('#' + parent.element.id + '_remove').classList.add('e-disabled');
+        if (removeElem) {
+            removeElem.classList.add('e-disabled');
         }
-        if (parent.element.querySelector('#' + parent.element.id + '_editText')) {
-            parent.element.querySelector('#' + parent.element.id + '_editText').classList.add('e-disabled');
+        if (editTextElem) {
+            editTextElem.classList.add('e-disabled');
         }
         parent.textArea.style.display = 'block';
         parent.textArea.style.left = x + 'px';
@@ -1402,6 +1584,9 @@ var Shape = /** @class */ (function () {
         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) {
@@ -1414,12 +1599,83 @@ var Shape = /** @class */ (function () {
                 this.alignTextAreaIntoCanvas();
             }
         }
+        // Limit text area
+        if (actObj.rotatedAngle !== 0) {
+            var tempLeft = parseFloat(parent.textArea.style.left);
+            var tempTop = parseFloat(parent.textArea.style.top);
+            if (actObj.flipObjColl.length > 0) {
+                var panObj = { panRegion: '' };
+                var _b = parent.lowerCanvas, clientWidth = _b.clientWidth, clientHeight = _b.clientHeight;
+                var center_1 = { x: 0, y: 0 };
+                parent.notify('crop', { prop: 'getCurrFlipState', onPropertyChange: false,
+                    value: { panObj: panObj } });
+                if (panObj['panRegion'] !== '') {
+                    if (panObj['panRegion'] === 'horizontal') {
+                        center_1.x = clientWidth - (clientWidth / 2);
+                        tempLeft = (center_1.x - tempLeft) + center_1.x;
+                    }
+                    else if (panObj['panRegion'] === 'vertical') {
+                        center_1.y = clientHeight - (clientHeight / 2);
+                        tempTop = (center_1.y - tempTop) + center_1.y;
+                    }
+                    else {
+                        center_1 = { x: clientWidth - (clientWidth / 2), y: clientHeight - (clientHeight / 2) };
+                        tempLeft = (center_1.x - tempLeft) + center_1.x;
+                        tempTop = (center_1.y - tempTop) + center_1.y;
+                    }
+                }
+            }
+            var left = tempLeft + parseFloat(parent.textArea.style.width);
+            var top_1 = tempTop + parseFloat(parent.textArea.style.height);
+            var width1 = parseFloat(parent.textArea.style.width);
+            var height1 = parseFloat(parent.textArea.style.height);
+            var center = { x: left - (width1 / 2), y: top_1 - (height1 / 2) };
+            var cosAngle = Math.cos(actObj.rotatedAngle);
+            var sinAngle = Math.sin(actObj.rotatedAngle);
+            var p1 = { x: cosAngle * (left - center.x) - sinAngle * (top_1 - center.y) + center.x,
+                y: sinAngle * (left - center.x) + cosAngle * (top_1 - center.y) + center.y };
+            if (p1.x > parent.img.destLeft && p1.x < parent.img.destLeft + parent.img.destWidth &&
+                p1.y > parent.img.destTop && p1.y + parseFloat(parent.textArea.style.fontSize) < parent.img.destTop + parent.img.destHeight) {
+                parent.textArea.style.width = parent.textArea.style.width;
+            }
+            else {
+                var count = 0;
+                var width2 = parseFloat(parent.textArea.style.width);
+                while (true) {
+                    count++;
+                    width1 -= 1;
+                    left = tempLeft + width1;
+                    center = { x: left - (width1 / 2), y: top_1 - (height1 / 2) };
+                    p1 = { x: cosAngle * (left - center.x) - sinAngle * (top_1 - center.y) + center.x,
+                        y: sinAngle * (left - center.x) + cosAngle * (top_1 - center.y) + center.y };
+                    if ((p1.x > parent.img.destLeft && p1.x < parent.img.destLeft + parent.img.destWidth &&
+                        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 });
     };
     Shape.prototype.setTextBoxWidth = function (e) {
         var parent = 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';
+            }
+        }
         var text = this.getMaxText(true);
-        if (parent.textArea.style.display === 'block') {
+        if (parent.textArea.style.display === 'block' || parent.textArea.style.display === 'inline-block') {
             this.updateFontStyles(true);
         }
         else {
@@ -1562,15 +1818,15 @@ var Shape = /** @class */ (function () {
             var obj = { shape: null };
             parent.notify('selection', { prop: 'getCurrentDrawingShape', value: { obj: obj } });
             if (obj['shape'] === 'path') {
-                var prevCropObj = extend({}, this.parent.cropObj, {}, true);
+                var prevCropObj = extend({}, parent.cropObj, {}, true);
                 var object = { currObj: {} };
-                this.parent.notify('filter', { prop: 'getCurrentObj', onPropertyChange: false, value: { object: object } });
+                parent.notify('filter', { prop: 'getCurrentObj', onPropertyChange: false, value: { object: object } });
                 var prevObj = object['currObj'];
-                prevObj.objColl = extend([], this.parent.objColl, [], true);
-                prevObj.pointColl = extend([], this.parent.pointColl, [], true);
-                prevObj.afterCropActions = extend([], this.parent.afterCropActions, [], true);
+                prevObj.objColl = extend([], parent.objColl, [], true);
+                prevObj.pointColl = extend([], parent.pointColl, [], true);
+                prevObj.afterCropActions = extend([], parent.afterCropActions, [], true);
                 var selPointCollObj = { selPointColl: null };
-                this.parent.notify('freehand-draw', { prop: 'getSelPointColl', onPropertyChange: false,
+                parent.notify('freehand-draw', { prop: 'getSelPointColl', onPropertyChange: false,
                     value: { obj: selPointCollObj } });
                 prevObj.selPointColl = extend([], selPointCollObj['selPointColl'], [], true);
                 parent.notify('selection', { prop: 'setCurrentDrawingShape', value: { value: '' } });
@@ -1579,6 +1835,9 @@ var Shape = /** @class */ (function () {
                     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,
@@ -1588,6 +1847,8 @@ var Shape = /** @class */ (function () {
                 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 });
                 }
                 parent.notify('draw', { prop: 'setNewPath', value: { bool: true } });
                 if (parent.objColl[parent.objColl.length - 1]) {
@@ -1602,8 +1863,8 @@ var Shape = /** @class */ (function () {
                 var obj_1 = { shapeSettingsObj: {} };
                 parent.notify('selection', { prop: 'updatePrevShapeSettings', onPropertyChange: false, value: { obj: obj_1 } });
                 var shapeSettings = obj_1['shapeSettingsObj'];
-                var shapeResizingArgs = { action: 'draw-end', previousShapeSettings: shapeSettings };
-                var shapeMovingArgs = { action: 'move', previousShapeSettings: shapeSettings };
+                var shapeResizingArgs = { cancel: false, action: 'draw-end', previousShapeSettings: shapeSettings };
+                var shapeMovingArgs = { cancel: false, action: 'move', previousShapeSettings: shapeSettings };
                 parent.notify('selection', { prop: 'triggerShapeChange', onPropertyChange: false,
                     value: { shapeResizingArgs: shapeResizingArgs, shapeMovingArgs: shapeMovingArgs, type: 'mouse-up' } });
             }
@@ -1612,8 +1873,25 @@ var Shape = /** @class */ (function () {
     Shape.prototype.findTextTarget = function (e) {
         var parent = this.parent;
         if (parent.activeObj.shape !== 'text') {
-            this.stopPathDrawing(e, null);
-            return;
+            if (parent.activeObj.shape === 'path') {
+                this.stopPathDrawing(e, null);
+                return;
+            }
+            else if (e.type === 'dblclick') {
+                var activeObj = extend({}, parent.activeObj, {}, true);
+                var objColl = extend([], parent.objColl, [], true);
+                var obj = { 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);
+                    return;
+                }
+            }
+            else {
+                return;
+            }
         }
         var x;
         var y;
@@ -1638,7 +1916,7 @@ var Shape = /** @class */ (function () {
             parent.updateToolbar(parent.element, 'enableDisableToolbarBtn', 'textAreaClicked');
         }
         if (!isNullOrUndefined(x) && !isNullOrUndefined(y)) {
-            var bbox = this.parent.lowerCanvas.getBoundingClientRect();
+            var bbox = parent.lowerCanvas.getBoundingClientRect();
             x -= bbox.left;
             y -= bbox.top;
             var flip = '';
@@ -1671,11 +1949,12 @@ var Shape = /** @class */ (function () {
                     }
                 }
                 this.refreshActiveObj();
-                this.upperContext.clearRect(0, 0, this.parent.upperCanvas.width, this.parent.upperCanvas.height);
-                this.lowerContext.clearRect(0, 0, this.parent.upperCanvas.width, this.parent.upperCanvas.height);
+                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 });
-                this.parent.notify('draw', { prop: 'clearOuterCanvas', onPropertyChange: false, value: { context: this.lowerContext } });
-                this.parent.notify('draw', { prop: 'clearOuterCanvas', onPropertyChange: false, value: { context: this.upperContext } });
+                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 } });
@@ -1683,11 +1962,29 @@ var Shape = /** @class */ (function () {
                 parent.activeObj = temp;
                 this.updateFontStyles();
                 var actObj = extend({}, parent.activeObj, {}, true);
-                if (x >= (actObj.activePoint.startX - (actObj.topLeftCircle.radius * 2)) &&
-                    x <= (actObj.activePoint.endX + (actObj.topLeftCircle.radius * 2)) &&
-                    y >= (actObj.activePoint.startY - (actObj.topLeftCircle.radius * 2)) &&
-                    y <= (actObj.activePoint.endY + (actObj.topLeftCircle.radius * 2))) {
-                    this.upperContext.clearRect(0, 0, this.parent.upperCanvas.width, this.parent.upperCanvas.height);
+                var radius = actObj.topLeftCircle.radius;
+                var _a = actObj.activePoint, startX = _a.startX, startY = _a.startY, endX = _a.endX, endY = _a.endY, width = _a.width, height = _a.height;
+                var center = { x: startX + (width / 2), y: startY +
+                        (height / 2) };
+                var cosAngle = Math.cos(actObj.rotatedAngle);
+                var sinAngle = Math.sin(actObj.rotatedAngle);
+                var p1 = { x: cosAngle * (startX - center.x) - sinAngle * (startY - center.y) + center.x,
+                    y: sinAngle * (startX - center.x) + cosAngle * (startY - center.y) + center.y };
+                var p2 = { x: cosAngle * (endX - center.x) - sinAngle * (startY - center.y) + center.x,
+                    y: sinAngle * (endX - center.x) + cosAngle * (startY - center.y) + center.y };
+                var p3 = { x: cosAngle * (startX - center.x) - sinAngle * (endY - center.y) + center.x,
+                    y: sinAngle * (startX - center.x) + cosAngle * (endY - center.y) + center.y };
+                var p4 = { x: cosAngle * (endX - center.x) - sinAngle * (endY - center.y) + center.x,
+                    y: sinAngle * (endX - center.x) + cosAngle * (endY - center.y) + center.y };
+                var obj = { 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 = '';
@@ -1707,8 +2004,12 @@ var Shape = /** @class */ (function () {
                         y = points.y;
                     }
                     if (parent.activeObj.rotatedAngle !== 0) {
-                        x = parent.activeObj.horTopLinePointColl[0].x;
-                        y = parent.activeObj.horTopLinePointColl[0].y;
+                        var 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);
                 }
@@ -1717,7 +2018,8 @@ var Shape = /** @class */ (function () {
                 }
             }
         }
-        else if (parent.textArea.style.display === 'block' && this.selectedText() !== '' && e.type === 'mousedown') {
+        else if ((parent.textArea.style.display === 'block' || parent.textArea.style.display === 'inline-block')
+            && this.selectedText() !== '' && e.type === 'mousedown') {
             var temp = parent.textArea.value;
             parent.textArea.value += 'a';
             parent.textArea.value = temp;
@@ -1726,6 +2028,67 @@ var Shape = /** @class */ (function () {
             parent.textArea.style.display = 'block';
         }
     };
+    Shape.prototype.getTextBoxPosition = function (obj, object) {
+        var point = { x: 0, y: 0 };
+        var _a = obj.activePoint, startX = _a.startX, startY = _a.startY, endX = _a.endX, endY = _a.endY, width = _a.width, height = _a.height;
+        var center = { x: startX + (width / 2), y: startY + (height / 2) };
+        var cosAngle = Math.cos(obj.rotatedAngle);
+        var sinAngle = Math.sin(obj.rotatedAngle);
+        var p1 = { x: cosAngle * (startX - center.x) - sinAngle * (startY - center.y) + center.x,
+            y: sinAngle * (startX - center.x) + cosAngle * (startY - center.y) + center.y };
+        var p2 = { x: cosAngle * (endX - center.x) - sinAngle * (startY - center.y) + center.x,
+            y: sinAngle * (endX - center.x) + cosAngle * (startY - center.y) + center.y };
+        var p3 = { x: cosAngle * (startX - center.x) - sinAngle * (endY - center.y) + center.x,
+            y: sinAngle * (startX - center.x) + cosAngle * (endY - center.y) + center.y };
+        var p4 = { x: cosAngle * (endX - center.x) - sinAngle * (endY - center.y) + center.x,
+            y: sinAngle * (endX - center.x) + cosAngle * (endY - center.y) + center.y };
+        var degree = 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;
+    };
+    Shape.prototype.setFlipState = function (x, y, obj, object) {
+        var parent = this.parent;
+        var panObj = { panRegion: '' };
+        var _a = parent.lowerCanvas, clientWidth = _a.clientWidth, clientHeight = _a.clientHeight;
+        var center = { 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
     Shape.prototype.fileChanged = function (e) {
         /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
@@ -1745,27 +2108,28 @@ var Shape = /** @class */ (function () {
             document.getElementById(this.parent.element.id + '_fileUpload').value = '';
         }
     };
-    Shape.prototype.onLoadImgShape = function (x, y, width, height, url, isSelect, degree, isAspectRatio) {
+    Shape.prototype.onLoadImgShape = function (x, y, width, height, url, isSelect, degree, isAspectRatio, opacity) {
         // eslint-disable-next-line @typescript-eslint/no-this-alias
         var proxy = this;
+        var parent = this.parent;
         if (typeof (url) === 'string') {
             this.shapeImg.src = url;
         }
         else {
-            this.parent.inMemoryCanvas.width = url.width;
-            this.parent.inMemoryCanvas.height = url.height;
-            this.parent.inMemoryCanvas.getContext('2d').putImageData(url, 0, 0);
-            this.shapeImg.src = this.parent.inMemoryCanvas.toDataURL();
+            parent.inMemoryCanvas.width = url.width;
+            parent.inMemoryCanvas.height = url.height;
+            parent.inMemoryCanvas.getContext('2d').putImageData(url, 0, 0);
+            this.shapeImg.src = parent.inMemoryCanvas.toDataURL();
         }
         this.prevObjColl();
-        this.parent.activeObj.shape = 'image';
+        parent.activeObj.shape = 'image';
         this.initShapeProps();
         this.shapeImg.onload = function () {
             proxy.upperContext.drawImage(proxy.shapeImg, 0, 0, proxy.shapeImg.width, proxy.shapeImg.height);
-            proxy.updateImgCanvas(isSelect, x, y, width, height, degree, isAspectRatio);
+            proxy.updateImgCanvas(isSelect, x, y, width, height, degree, isAspectRatio, opacity);
         };
     };
-    Shape.prototype.updateImgCanvas = function (isSelect, x, y, width, height, degree, isAspectRatio) {
+    Shape.prototype.updateImgCanvas = function (isSelect, x, y, width, height, degree, isAspectRatio, opacity) {
         var _this = this;
         var parent = this.parent;
         parent.activeObj.imageElement = this.shapeImg;
@@ -1800,6 +2164,9 @@ var Shape = /** @class */ (function () {
                 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;
@@ -1810,11 +2177,11 @@ var Shape = /** @class */ (function () {
         var obj = { shapeSettingsObj: {} };
         parent.notify('selection', { prop: 'updatePrevShapeSettings', onPropertyChange: false, value: { obj: obj } });
         var shapeSettings = obj['shapeSettingsObj'];
-        var shapeChangingArgs = { action: 'insert', previousShapeSettings: shapeSettings,
+        var shapeChangingArgs = { cancel: false, action: 'insert', previousShapeSettings: shapeSettings,
             currentShapeSettings: shapeSettings };
         if (isBlazor() && parent.events && parent.events.shapeChanging.hasDelegate === true) {
             /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
-            parent.dotNetRef.invokeMethodAsync('ShapeEventAsync', 'OnShape', shapeChangingArgs).then(function (shapeChangingArgs) {
+            parent.dotNetRef.invokeMethodAsync('ShapeEventAsync', 'OnShape', shapeChangingArgs, null).then(function (shapeChangingArgs) {
                 _this.drawShapeImageEvent(shapeChangingArgs, isSelect);
                 if (parent.isPublicMethod) {
                     parent.notify('undo-redo', { prop: 'updateUndoRedo', onPropertyChange: false });
@@ -1849,61 +2216,63 @@ var Shape = /** @class */ (function () {
     };
     Shape.prototype.setTextBoxPos = function (actObj, degree, flip, x, y) {
         var point = { x: x, y: y };
+        var _a = actObj.activePoint, startX = _a.startX, startY = _a.startY, endX = _a.endX, endY = _a.endY;
+        flip = flip.toLowerCase();
         switch (degree) {
             case 0:
-                if (flip.toLowerCase() === 'horizontal') {
-                    point.x = actObj.activePoint.endX;
-                    point.y = actObj.activePoint.startY;
+                if (flip === 'horizontal') {
+                    point.x = endX;
+                    point.y = startY;
                 }
-                else if (flip.toLowerCase() === 'vertical') {
-                    point.x = actObj.activePoint.startX;
-                    point.y = actObj.activePoint.endY;
+                else if (flip === 'vertical') {
+                    point.x = startX;
+                    point.y = endY;
                 }
                 else {
-                    point.x = actObj.activePoint.startX;
-                    point.y = actObj.activePoint.startY;
+                    point.x = startX;
+                    point.y = startY;
                 }
                 break;
             case 90:
-                if (flip.toLowerCase() === 'horizontal') {
-                    point.x = actObj.activePoint.startX;
-                    point.y = actObj.activePoint.startY;
+                if (flip === 'horizontal') {
+                    point.x = startX;
+                    point.y = startY;
                 }
-                else if (flip.toLowerCase() === 'vertical') {
-                    point.x = actObj.activePoint.endX;
-                    point.y = actObj.activePoint.endY;
+                else if (flip === 'vertical') {
+                    point.x = endX;
+                    point.y = endY;
                 }
                 else {
-                    point.x = actObj.activePoint.endX;
-                    point.y = actObj.activePoint.startY;
+                    point.x = endX;
+                    point.y = startY;
                 }
                 break;
             case 180:
-                if (flip.toLowerCase() === 'horizontal') {
-                    point.x = actObj.activePoint.startX;
-                    point.y = actObj.activePoint.endY;
+                if (flip === 'horizontal') {
+                    point.x = startX;
+                    point.y = endY;
                 }
-                else if (flip.toLowerCase() === 'vertical') {
-                    point.x = actObj.activePoint.endX;
-                    point.y = actObj.activePoint.startY;
+                else if (flip === 'vertical') {
+                    point.x = endX;
+                    point.y = startY;
                 }
                 else {
-                    point.x = actObj.activePoint.endX;
-                    point.y = actObj.activePoint.endY;
+                    point.x = endX;
+                    point.y = endY;
                 }
                 break;
             case 270:
-                if (flip.toLowerCase() === 'horizontal') {
-                    point.x = actObj.activePoint.endX;
-                    point.y = actObj.activePoint.endY;
+                if (flip === 'horizontal') {
+                    point.x = endX;
+                    point.y = endY;
                 }
-                else if (flip.toLowerCase() === 'vertical') {
-                    point.x = actObj.activePoint.startX;
-                    point.y = actObj.activePoint.startY;
+                else if (flip === 'vertical') {
+                    point.x = startX;
+                    point.y = startY;
                 }
                 else {
-                    point.x = actObj.activePoint.startX;
-                    point.y = actObj.activePoint.endY;
+                    point.x = startX;
+                    point.y = endY;
                 }
                 break;
         }
@@ -1911,92 +2280,94 @@ var Shape = /** @class */ (function () {
     };
     Shape.prototype.setTextBoxPoints = function (actObj, degree, flip, x, y) {
         var point = { x: x, y: y };
+        var _a = actObj.activePoint, startX = _a.startX, startY = _a.startY, endX = _a.endX, endY = _a.endY;
+        flip = flip.toLowerCase();
         switch (degree) {
             case 0:
                 if (actObj.flipObjColl[0] && actObj.flipObjColl[0].toLowerCase() === 'horizontal') {
-                    if (flip.toLowerCase() === 'horizontal') {
-                        point.x = (actObj.activePoint.startX);
-                        point.y = (actObj.activePoint.startY);
+                    if (flip === 'horizontal') {
+                        point.x = startX;
+                        point.y = startY;
                     }
-                    else if (flip.toLowerCase() === 'vertical') {
-                        point.x = (actObj.activePoint.endX);
-                        point.y = (actObj.activePoint.endY);
+                    else if (flip === 'vertical') {
+                        point.x = endX;
+                        point.y = endY;
                     }
                 }
                 else {
-                    if (flip.toLowerCase() === 'horizontal') {
-                        point.x = (actObj.activePoint.endX);
-                        point.y = (actObj.activePoint.endY);
+                    if (flip === 'horizontal') {
+                        point.x = endX;
+                        point.y = endY;
                     }
-                    else if (flip.toLowerCase() === 'vertical') {
-                        point.x = (actObj.activePoint.endX);
-                        point.y = (actObj.activePoint.startY);
+                    else if (flip === 'vertical') {
+                        point.x = endX;
+                        point.y = startY;
                     }
                 }
                 break;
             case 90:
                 if (actObj.flipObjColl[0] && actObj.flipObjColl[0].toLowerCase() === 'horizontal') {
-                    if (flip.toLowerCase() === 'horizontal') {
-                        point.x = (actObj.activePoint.endX);
-                        point.y = (actObj.activePoint.endY);
+                    if (flip === 'horizontal') {
+                        point.x = endX;
+                        point.y = endY;
                     }
-                    else if (flip.toLowerCase() === 'vertical') {
-                        point.x = (actObj.activePoint.startX);
-                        point.y = (actObj.activePoint.endY);
+                    else if (flip === 'vertical') {
+                        point.x = startX;
+                        point.y = endY;
                     }
                 }
                 else {
-                    if (flip.toLowerCase() === 'horizontal') {
-                        point.x = (actObj.activePoint.startX);
-                        point.y = (actObj.activePoint.endY);
+                    if (flip === 'horizontal') {
+                        point.x = startX;
+                        point.y = endY;
                     }
-                    else if (flip.toLowerCase() === 'vertical') {
-                        point.x = (actObj.activePoint.startX);
-                        point.y = (actObj.activePoint.startY);
+                    else if (flip === 'vertical') {
+                        point.x = startX;
+                        point.y = startY;
                     }
                 }
                 break;
             case 180:
                 if (actObj.flipObjColl[0] && actObj.flipObjColl[0].toLowerCase() === 'horizontal') {
-                    if (flip.toLowerCase() === 'horizontal') {
-                        point.x = (actObj.activePoint.startX);
-                        point.y = (actObj.activePoint.startY);
+                    if (flip === 'horizontal') {
+                        point.x = startX;
+                        point.y = startY;
                     }
-                    else if (flip.toLowerCase() === 'vertical') {
-                        point.x = (actObj.activePoint.startX);
-                        point.y = (actObj.activePoint.startY);
+                    else if (flip === 'vertical') {
+                        point.x = startX;
+                        point.y = startY;
                     }
                 }
                 else {
-                    if (flip.toLowerCase() === 'horizontal') {
-                        point.x = (actObj.activePoint.startX);
-                        point.y = (actObj.activePoint.startY);
+                    if (flip === 'horizontal') {
+                        point.x = startX;
+                        point.y = startY;
                     }
-                    else if (flip.toLowerCase() === 'vertical') {
-                        point.x = (actObj.activePoint.startX);
-                        point.y = (actObj.activePoint.endY);
+                    else if (flip === 'vertical') {
+                        point.x = startX;
+                        point.y = endY;
                     }
                 }
                 break;
             case 270:
                 if (actObj.flipObjColl[0] && actObj.flipObjColl[0].toLowerCase() === 'horizontal') {
-                    if (flip.toLowerCase() === 'horizontal') {
-                        point.x = (actObj.activePoint.startX);
-                        point.y = (actObj.activePoint.startY);
+                    if (flip === 'horizontal') {
+                        point.x = startX;
+                        point.y = startY;
                     }
-                    else if (flip.toLowerCase() === 'vertical') {
-                        point.x = (actObj.activePoint.endX);
-                        point.y = (actObj.activePoint.startY);
+                    else if (flip === 'vertical') {
+                        point.x = endX;
+                        point.y = startY;
                     }
                 }
                 else {
-                    if (flip.toLowerCase() === 'horizontal') {
-                        point.x = (actObj.activePoint.endX);
-                        point.y = (actObj.activePoint.startY);
+                    if (flip === 'horizontal') {
+                        point.x = endX;
+                        point.y = startY;
                     }
-                    else if (flip.toLowerCase() === 'vertical') {
-                        point.x = (actObj.activePoint.endX);
-                        point.y = (actObj.activePoint.endY);
+                    else if (flip === 'vertical') {
+                        point.x = endX;
+                        point.y = endY;
                     }
                 }
                 break;
@@ -2004,9 +2375,10 @@ var Shape = /** @class */ (function () {
         return point;
     };
     Shape.prototype.selectedText = function () {
-        var start = this.parent.textArea.selectionStart;
-        var finish = this.parent.textArea.selectionEnd;
-        return this.parent.textArea.value.substring(start, finish);
+        var parent = this.parent;
+        var start = parent.textArea.selectionStart;
+        var finish = parent.textArea.selectionEnd;
+        return parent.textArea.value.substring(start, finish);
     };
     Shape.prototype.panObjColl = function (xDiff, yDiff, panRegion) {
         var parent = this.parent;
@@ -2097,7 +2469,8 @@ var Shape = /** @class */ (function () {
             textStyle = 'italic bold ';
         }
         var fontSize = isTextBox ? parseFloat(parent.textArea.style.fontSize) : parent.activeObj.textSettings.fontSize;
-        var fontFamily = parent.textArea.style.display === 'block' ? parent.textArea.style.fontFamily : parent.activeObj.textSettings.fontFamily;
+        var fontFamily = (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;
     };
     Shape.prototype.applyFontStyle = function (item) {
@@ -2128,18 +2501,31 @@ var Shape = /** @class */ (function () {
                 this.updateFontStyle(item, objColl, 'bold', 'italic');
                 break;
         }
-        var shapeChangedArgs = { action: 'font-style', previousShapeSettings: extend({}, shapeSettings, {}, true),
-            currentShapeSettings: extend({}, shapeSettings, {}, true) };
+        var shapeChangedArgs = { action: 'font-style', currentShapeSettings: extend({}, shapeSettings, {}, true) };
         shapeChangedArgs.currentShapeSettings.fontStyle = [item];
         parent.triggerShapeChanged(shapeChangedArgs);
     };
     Shape.prototype.updateFontStyle = function (item, objColl, fontWeight, fontStyle) {
         var parent = this.parent;
-        if (parent.textArea.style.display === 'block') {
-            var width = this.getTextAreaWidth(item);
-            parent.textArea.style.width = width + 'px';
-            parent.textArea.style.fontWeight = fontWeight;
-            parent.textArea.style.fontStyle = fontStyle;
+        var style = parent.textArea.style;
+        if (style.display === 'block' || style.display === 'inline-block') {
+            if (style.fontWeight === 'normal' && fontWeight === 'bold') {
+                style.fontWeight = 'bold';
+            }
+            else if (style.fontWeight === 'bold' && fontWeight === 'bold') {
+                style.fontWeight = 'normal';
+            }
+            if (style.fontStyle === 'normal' && fontStyle === 'italic') {
+                style.fontStyle = 'italic';
+            }
+            else if (style.fontStyle === 'italic' && fontStyle === 'italic') {
+                style.fontStyle = 'normal';
+            }
+            var value = (style.fontWeight === 'normal' && style.fontStyle === 'normal' ? 'default' :
+                (style.fontWeight === 'bold' && style.fontStyle === 'normal' ? 'bold' :
+                    (style.fontWeight === 'normal' && style.fontStyle === 'italic' ? 'italic' : 'bolditalic')));
+            var width = this.getTextAreaWidth(value);
+            style.width = width + 'px';
             this.updateObjColl(item, objColl);
         }
         else {
@@ -2262,92 +2648,97 @@ var Shape = /** @class */ (function () {
         parent.activeObj.textSettings.italic = tempItalic;
     };
     Shape.prototype.pushActItemIntoObj = function () {
-        if (this.parent.textArea.style.display === 'none') {
-            this.parent.objColl.push(this.parent.activeObj);
+        var parent = this.parent;
+        if (parent.textArea.style.display === 'none') {
+            parent.objColl.push(parent.activeObj);
         }
         else {
-            var temp = extend({}, this.parent.activeObj, {}, true);
-            this.parent.notify('selection', { prop: 'setTextBoxStylesToActObj', onPropertyChange: false });
-            this.parent.objColl.push(this.parent.activeObj);
-            this.parent.activeObj = temp;
+            var temp = extend({}, parent.activeObj, {}, true);
+            parent.notify('selection', { prop: 'setTextBoxStylesToActObj', onPropertyChange: false });
+            parent.objColl.push(parent.activeObj);
+            parent.activeObj = temp;
         }
     };
     Shape.prototype.clearActObj = function () {
-        if (this.parent.textArea.style.display === 'none') {
+        var parent = this.parent;
+        if (parent.textArea.style.display === 'none') {
             this.refreshActiveObj();
             this.applyActObj();
             this.refreshActiveObj();
-            this.parent.currObjType.isCustomCrop = false;
+            parent.currObjType.isCustomCrop = false;
         }
     };
     Shape.prototype.refreshActiveObj = function () {
-        this.parent.activeObj = {};
-        this.parent.activeObj.activePoint = { startX: 0, startY: 0, endX: 0, endY: 0, width: 0, height: 0 };
-        this.parent.activeObj.triangle = [];
-        this.parent.activeObj.triangleRatio = [];
-        this.parent.activeObj.flipObjColl = [];
-        this.parent.activeObj.strokeSettings = this.strokeSettings;
-        this.parent.activeObj.textSettings = this.textSettings;
-        this.parent.activeObj.rotatedAngle = 0;
+        var parent = this.parent;
+        parent.activeObj = {};
+        parent.activeObj.activePoint = { startX: 0, startY: 0, endX: 0, endY: 0, width: 0, height: 0 };
+        parent.activeObj.triangle = [];
+        parent.activeObj.triangleRatio = [];
+        parent.activeObj.flipObjColl = [];
+        parent.activeObj.strokeSettings = this.strokeSettings;
+        parent.activeObj.textSettings = this.textSettings;
+        parent.activeObj.rotatedAngle = 0;
+        parent.activeObj.opacity = 1;
     };
     Shape.prototype.applyActObj = function (isMouseDown) {
+        var parent = this.parent;
         var isActObj = false;
-        if (this.parent.activeObj.shape !== undefined && this.parent.activeObj.shape === 'text' && this.parent.activeObj.keyHistory === '') {
+        if (parent.activeObj.shape !== undefined && parent.activeObj.shape === 'text' && parent.activeObj.keyHistory === '') {
             this.refreshActiveObj();
-            this.upperContext.clearRect(0, 0, this.parent.upperCanvas.width, this.parent.upperCanvas.height);
+            this.upperContext.clearRect(0, 0, parent.upperCanvas.width, parent.upperCanvas.height);
         }
         else {
             var splitWords = void 0;
             var isCropSelection = false;
-            if (this.parent.activeObj.shape !== undefined) {
-                splitWords = this.parent.activeObj.shape.split('-');
+            if (parent.activeObj.shape !== undefined) {
+                splitWords = parent.activeObj.shape.split('-');
             }
-            if (splitWords === undefined && this.parent.currObjType.isCustomCrop) {
+            if (splitWords === undefined && parent.currObjType.isCustomCrop) {
                 isCropSelection = true;
             }
             else if (splitWords !== undefined && splitWords[0] === 'crop') {
                 isCropSelection = true;
             }
-            if (this.parent.activeObj.shape && !isCropSelection && this.parent.activeObj.shape !== 'shape') {
-                for (var i = 0; i < this.parent.objColl.length; i++) {
-                    if (JSON.stringify(this.parent.activeObj) === JSON.stringify(this.parent.objColl[i])) {
+            if (parent.activeObj.shape && !isCropSelection && parent.activeObj.shape !== 'shape') {
+                for (var i = 0; i < parent.objColl.length; i++) {
+                    if (JSON.stringify(parent.activeObj) === JSON.stringify(parent.objColl[i])) {
                         isActObj = true;
                         break;
                     }
                 }
                 if (!isActObj) {
-                    if (isNullOrUndefined(this.parent.activeObj.currIndex)) {
-                        this.parent.activeObj.currIndex = 'shape_' + (this.parent.objColl.length + 1);
+                    if (isNullOrUndefined(parent.activeObj.currIndex)) {
+                        parent.activeObj.currIndex = 'shape_' + (parent.objColl.length + 1);
                     }
                     this.updImgRatioForActObj();
-                    var splitWords_1 = this.parent.activeObj.currIndex.split('_');
-                    var tempObjColl = this.parent.objColl.splice(0, parseInt(splitWords_1[1], 10) - 1);
-                    tempObjColl.push(extend({}, this.parent.activeObj, {}, true));
-                    for (var i = 0; i < this.parent.objColl.length; i++) {
-                        tempObjColl.push(this.parent.objColl[i]);
+                    var splitWords_1 = parent.activeObj.currIndex.split('_');
+                    var tempObjColl = parent.objColl.splice(0, parseInt(splitWords_1[1], 10) - 1);
+                    tempObjColl.push(extend({}, parent.activeObj, {}, true));
+                    for (var i = 0; i < parent.objColl.length; i++) {
+                        tempObjColl.push(parent.objColl[i]);
                     }
-                    this.parent.objColl = tempObjColl;
+                    parent.objColl = tempObjColl;
                     tempObjColl = [];
                     this.refreshActiveObj();
-                    this.lowerContext.clearRect(0, 0, this.parent.lowerCanvas.width, this.parent.lowerCanvas.height);
-                    this.parent.notify('draw', { prop: 'redrawImgWithObj', onPropertyChange: false });
-                    this.parent.notify('draw', { prop: 'clearOuterCanvas', onPropertyChange: false, value: { context: this.lowerContext } });
-                    this.parent.notify('draw', { prop: 'clearOuterCanvas', onPropertyChange: false, value: { context: this.upperContext } });
-                    this.parent.currObjType.shape = '';
+                    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 (this.parent.isCircleCrop) {
-                        this.parent.notify('crop', { prop: 'cropCircle', onPropertyChange: false,
+                    if (parent.isCircleCrop) {
+                        parent.notify('crop', { prop: 'cropCircle', onPropertyChange: false,
                             value: { context: this.lowerContext, isSave: null, isFlip: null } });
                     }
                     if (!isBlazor()) {
-                        this.parent.notify('toolbar', { prop: 'destroy-qa-toolbar', onPropertyChange: false });
+                        parent.notify('toolbar', { prop: 'destroy-qa-toolbar', onPropertyChange: false });
                     }
                     else {
-                        this.parent.updateToolbar(this.parent.element, 'destroyQuickAccessToolbar');
+                        parent.updateToolbar(parent.element, 'destroyQuickAccessToolbar');
                     }
                     if (isNullOrUndefined(isMouseDown)) {
-                        this.parent.notify('undo-redo', { prop: 'updateCurrUrc', value: { type: 'ok' } });
-                        this.parent.notify('draw', { prop: 'setPrevActObj', onPropertyChange: false, value: { prevActObj: null } });
+                        parent.notify('undo-redo', { prop: 'updateCurrUrc', value: { type: 'ok' } });
+                        parent.notify('draw', { prop: 'setPrevActObj', onPropertyChange: false, value: { prevActObj: null } });
                     }
                 }
             }
@@ -2372,7 +2763,6 @@ var Shape = /** @class */ (function () {
             var scale = '';
             var degree = this.getRotDegOfShape(parent.activeObj);
             if (parent.activeObj.flipObjColl.length > 0) {
-                // need to add scale value according to length.
                 for (var i = 0; i < parent.activeObj.flipObjColl.length; i++) {
                     if (degree !== 0 && degree % 90 === 0 && degree !== 180) {
                         scale += parent.activeObj.flipObjColl[i].toLowerCase() === 'horizontal' ? 'scale(1, -1)' :
@@ -2419,9 +2809,10 @@ var Shape = /** @class */ (function () {
                 parent.activeObj.textSettings.italic = true;
                 break;
         }
-        this.updateFontStyles();
+        var isTextArea = parent.textArea.style.display === 'none' ? false : true;
+        this.updateFontStyles(isTextArea);
         var width;
-        if (parent.textArea.style.display === 'none') {
+        if (!isTextArea) {
             width = this.upperContext.measureText(parent.activeObj.keyHistory).width +
                 parent.activeObj.textSettings.fontSize * 0.5;
         }
@@ -2528,8 +2919,9 @@ var Shape = /** @class */ (function () {
     };
     Shape.prototype.isPointsInRange = function (x, y, obj) {
         var inRange = false;
-        if (!isNullOrUndefined(x) && !isNullOrUndefined(y) && x >= this.parent.img.destLeft && y >= this.parent.img.destTop &&
-            x <= this.parent.img.destLeft + this.parent.img.destWidth && y <= this.parent.img.destTop + this.parent.img.destHeight) {
+        var parent = 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;
@@ -2601,49 +2993,40 @@ var Shape = /** @class */ (function () {
         return collection;
     };
     Shape.prototype.popForDefaultFlipState = function (collection) {
-        for (var i = 0; i < collection.length; i++) {
-            if (!isNullOrUndefined(collection[i + 3])) {
-                if ((collection[i] === 'horizontal' || collection[i] === 'Horizontal'
-                    || collection[i] === 'horizontalFlip')
-                    && (collection[i + 1] === 'vertical' || collection[i + 1] === 'Vertical'
-                        || collection[i] === 'verticalFlip') &&
-                    (collection[i + 2] === 'horizontal' || collection[i + 2] === 'Horizontal'
-                        || collection[i] === 'horizontalFlip') &&
-                    (collection[i + 3] === 'vertical' || collection[i + 3] === 'Vertical'
-                        || collection[i] === 'verticalFlip')) {
-                    collection.pop();
-                    collection.pop();
-                    collection.pop();
-                    collection.pop();
-                }
-                else if ((collection[i] === 'vertical' || collection[i] === 'Vertical'
-                    || collection[i] === 'verticalFlip')
-                    && (collection[i + 1] === 'horizontal' || collection[i + 1] === 'Horizontal'
-                        || collection[i + 1] === 'horizontalFlip') &&
-                    (collection[i + 2] === 'vertical' || collection[i + 2] === 'Vertical' || collection[i] === 'verticalFlip') &&
-                    (collection[i + 3] === 'horizontal' || collection[i + 3] === 'Horizontal' || collection[i] === 'horizontalFlip')) {
-                    collection.pop();
-                    collection.pop();
-                    collection.pop();
-                    collection.pop();
-                }
+        for (var i = 0, iLen = collection.length - 3; i < iLen; i++) {
+            var isHorizontal = collection[i] === 'horizontal' || collection[i] === 'Horizontal'
+                || collection[i] === 'horizontalFlip';
+            var isVertical = collection[i] === 'vertical' || collection[i] === 'Vertical' ||
+                collection[i] === 'verticalFlip';
+            var isNextHorizontal = collection[i + 1] === 'horizontal' || collection[i + 1] === 'Horizontal' ||
+                collection[i + 1] === 'horizontalFlip';
+            var isNextVertical = collection[i + 1] === 'vertical' || collection[i + 1] === 'Vertical' ||
+                collection[i + 1] === 'verticalFlip';
+            var isNextToNextHorizontal = collection[i + 2] === 'horizontal' || collection[i + 2] === 'Horizontal' ||
+                collection[i + 2] === 'horizontalFlip';
+            var isNextToNextVertical = collection[i + 2] === 'vertical' || collection[i + 2] === 'Vertical' ||
+                collection[i + 2] === 'verticalFlip';
+            var isNextToNextToNextHorizontal = 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;
     };
     Shape.prototype.popForDefaultRotateState = function (collection) {
-        for (var i = 0; i < collection.length; i++) {
-            if (!isNullOrUndefined(collection[i + 1])) {
-                if ((collection[i] === 90 || collection[i] === 'rotateRight') &&
-                    (collection[i + 1] === -90 || collection[i] === 'rotateLeft')) {
-                    collection.pop();
-                    collection.pop();
-                }
-                else if ((collection[i] === -90 || collection[i] === 'rotateLeft') &&
-                    (collection[i + 1] === 90 || collection[i] === 'rotateRight')) {
-                    collection.pop();
-                    collection.pop();
-                }
+        for (var i = 0; i < collection.length - 1; i++) {
+            var curr = collection[i];
+            var next = 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;
@@ -2691,7 +3074,7 @@ var Shape = /** @class */ (function () {
                     else {
                         parent.updateToolbar(parent.element, parent.activeObj.shape);
                         if (parent.activeObj.shape === 'path') {
-                            parent.updateToolbar(this.parent.element, 'path', 'pathQuickAccessToolbar');
+                            parent.updateToolbar(parent.element, 'path', 'pathQuickAccessToolbar');
                         }
                         else {
                             parent.updateToolbar(parent.element, 'quickAccessToolbar', parent.activeObj.shape);
@@ -2710,14 +3093,14 @@ var Shape = /** @class */ (function () {
                 if (obj_6['isIndex']) {
                     isSelected = true;
                     parent.notify('freehand-draw', { prop: 'selectFhd', value: { id: id } });
-                    if (!isBlazor()) {
-                        parent.notify('toolbar', { prop: 'renderQAT', onPropertyChange: false, value: { isPenEdit: true } });
-                        parent.notify('toolbar', { prop: 'update-toolbar-items', onPropertyChange: false });
-                    }
-                    else {
+                    if (isBlazor()) {
                         parent.updateToolbar(parent.element, 'pen');
                         parent.updateToolbar(parent.element, 'quickAccessToolbar', 'pen');
                     }
+                    else {
+                        parent.notify('toolbar', { prop: 'renderQAT', onPropertyChange: false, value: { isPenEdit: true } });
+                        parent.notify('toolbar', { prop: 'update-toolbar-items', onPropertyChange: false });
+                    }
                 }
                 else {
                     isSelected = false;
@@ -2873,31 +3256,27 @@ var Shape = /** @class */ (function () {
         return point[1] - getSlope * point[0];
     };
     Shape.prototype.setPointCollForShapeRotation = function (obj) {
-        var center = { x: obj.activePoint.startX + (obj.activePoint.width / 2), y: obj.activePoint.startY +
-                (obj.activePoint.height / 2) };
-        var p1 = { x: Math.cos(obj.rotatedAngle) * (obj.activePoint.startX - center.x) - Math.sin(obj.rotatedAngle) *
-                (obj.activePoint.startY - center.y) + center.x,
-            y: Math.sin(obj.rotatedAngle) * (obj.activePoint.startX - center.x) + Math.cos(obj.rotatedAngle) *
-                (obj.activePoint.startY - center.y) + center.y };
-        var p2 = { x: Math.cos(obj.rotatedAngle) * (obj.activePoint.endX - center.x) - Math.sin(obj.rotatedAngle) *
-                (obj.activePoint.startY - center.y) + center.x,
-            y: Math.sin(obj.rotatedAngle) * (obj.activePoint.endX - center.x) + Math.cos(obj.rotatedAngle) * (obj.activePoint.startY
-                - center.y) + center.y };
-        var p3 = { x: Math.cos(obj.rotatedAngle) * (obj.activePoint.startX - center.x) - Math.sin(obj.rotatedAngle) *
-                (obj.activePoint.endY - center.y) + center.x,
-            y: Math.sin(obj.rotatedAngle) * (obj.activePoint.startX - center.x) + Math.cos(obj.rotatedAngle) * (obj.activePoint.endY
-                - center.y) + center.y };
-        var p4 = { x: Math.cos(obj.rotatedAngle) * (obj.activePoint.endX - center.x) - Math.sin(obj.rotatedAngle) *
-                (obj.activePoint.endY - center.y) + center.x,
-            y: Math.sin(obj.rotatedAngle) * (obj.activePoint.endX - center.x) + Math.cos(obj.rotatedAngle) * (obj.activePoint.endY
-                - center.y) + center.y };
+        var parent = this.parent;
+        var _a = obj.activePoint, startX = _a.startX, startY = _a.startY, endX = _a.endX, endY = _a.endY, width = _a.width, height = _a.height;
+        var center = { x: startX + (width / 2), y: startY +
+                (height / 2) };
+        var cosAngle = Math.cos(obj.rotatedAngle);
+        var sinAngle = Math.sin(obj.rotatedAngle);
+        var p1 = { x: cosAngle * (startX - center.x) - sinAngle * (startY - center.y) + center.x,
+            y: sinAngle * (startX - center.x) + cosAngle * (startY - center.y) + center.y };
+        var p2 = { x: cosAngle * (endX - center.x) - sinAngle * (startY - center.y) + center.x,
+            y: sinAngle * (endX - center.x) + cosAngle * (startY - center.y) + center.y };
+        var p3 = { x: cosAngle * (startX - center.x) - sinAngle * (endY - center.y) + center.x,
+            y: sinAngle * (startX - center.x) + cosAngle * (endY - center.y) + center.y };
+        var p4 = { 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();
-        // Updating ratio for point collection
         for (var i = 0; i < obj.horTopLinePointColl.length; i++) {
             obj.horTopLinePointColl[i].ratioX = (obj.horTopLinePointColl[i].x -
                 this.parent.img.destLeft) / this.parent.img.destWidth;
@@ -2922,42 +3301,36 @@ var Shape = /** @class */ (function () {
             obj.verRightLinePointColl[i].ratioY = (obj.verRightLinePointColl[i].y -
                 this.parent.img.destTop) / this.parent.img.destHeight;
         }
-        if (this.parent.upperCanvas.style.cursor !== 'move') {
+        if (parent.upperCanvas.style.cursor !== 'move') {
             var object = { rotationCirclePoint: null };
-            this.parent.notify('selection', { prop: 'getTransRotationPoint', value: { obj: obj, object: object } });
+            parent.notify('selection', { prop: 'getTransRotationPoint', value: { obj: obj, object: object } });
             var rotationCirclePoint = object['rotationCirclePoint'];
             if (rotationCirclePoint) {
-                obj.rotationCirclePointColl = { x: Math.cos(obj.rotatedAngle) * (rotationCirclePoint.x - center.x) -
-                        Math.sin(obj.rotatedAngle) * (rotationCirclePoint.y - center.y) + center.x,
-                    y: Math.sin(obj.rotatedAngle) * (rotationCirclePoint.x - center.x) + Math.cos(obj.rotatedAngle)
+                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 - this.parent.img.destLeft) /
-                    this.parent.img.destWidth;
-                obj.rotationCirclePointColl.ratioY = (obj.rotationCirclePointColl.y - this.parent.img.destTop) /
-                    this.parent.img.destHeight;
+                obj.rotationCirclePointColl.ratioX = (obj.rotationCirclePointColl.x - parent.img.destLeft) /
+                    parent.img.destWidth;
+                obj.rotationCirclePointColl.ratioY = (obj.rotationCirclePointColl.y - parent.img.destTop) /
+                    parent.img.destHeight;
             }
         }
     };
     Shape.prototype.getSquarePointForRotatedShape = function (obj, object) {
         var point = { startX: 0, startY: 0, endX: 0, endY: 0, width: 0, height: 0 };
-        var center = { x: obj.activePoint.startX + (obj.activePoint.width / 2), y: obj.activePoint.startY +
-                (obj.activePoint.height / 2) };
-        var p1 = { x: Math.cos(obj.rotatedAngle) * (obj.activePoint.startX - center.x) - Math.sin(obj.rotatedAngle)
-                * (obj.activePoint.startY - center.y) + center.x,
-            y: Math.sin(obj.rotatedAngle) * (obj.activePoint.startX - center.x) + Math.cos(obj.rotatedAngle) * (obj.activePoint.startY
-                - center.y) + center.y };
-        var p2 = { x: Math.cos(obj.rotatedAngle) * (obj.activePoint.endX - center.x) - Math.sin(obj.rotatedAngle) *
-                (obj.activePoint.startY - center.y) + center.x,
-            y: Math.sin(obj.rotatedAngle) * (obj.activePoint.endX - center.x) + Math.cos(obj.rotatedAngle) * (obj.activePoint.startY
-                - center.y) + center.y };
-        var p3 = { x: Math.cos(obj.rotatedAngle) * (obj.activePoint.startX - center.x) - Math.sin(obj.rotatedAngle) *
-                (obj.activePoint.endY - center.y) + center.x,
-            y: Math.sin(obj.rotatedAngle) * (obj.activePoint.startX - center.x) + Math.cos(obj.rotatedAngle) * (obj.activePoint.endY
-                - center.y) + center.y };
-        var p4 = { x: Math.cos(obj.rotatedAngle) * (obj.activePoint.endX - center.x) - Math.sin(obj.rotatedAngle) *
-                (obj.activePoint.endY - center.y) + center.x,
-            y: Math.sin(obj.rotatedAngle) * (obj.activePoint.endX - center.x) + Math.cos(obj.rotatedAngle) *
-                (obj.activePoint.endY - center.y) + center.y };
+        var _a = obj.activePoint, startX = _a.startX, startY = _a.startY, endX = _a.endX, endY = _a.endY, width = _a.width, height = _a.height;
+        var center = { x: startX + (width / 2), y: startY + (height / 2) };
+        var cosAngle = Math.cos(obj.rotatedAngle);
+        var sinAngle = Math.sin(obj.rotatedAngle);
+        var p1 = { x: cosAngle * (startX - center.x) - sinAngle * (startY - center.y) + center.x,
+            y: sinAngle * (startX - center.x) + cosAngle * (startY - center.y) + center.y };
+        var p2 = { x: cosAngle * (endX - center.x) - sinAngle * (startY - center.y) + center.x,
+            y: sinAngle * (endX - center.x) + cosAngle * (startY - center.y) + center.y };
+        var p3 = { x: cosAngle * (startX - center.x) - sinAngle * (endY - center.y) + center.x,
+            y: sinAngle * (startX - center.x) + cosAngle * (endY - center.y) + center.y };
+        var p4 = { 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;