@syncfusion/ej2-image-editor 23.2.6 → 24.1.41

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

@@ -8,7 +8,7 @@ var Draw = /** @class */ (function () {
         this.isShapeTextInserted = false;
         this.isRotateZoom = false; // To restore zoomed image on selection crop selection
         this.tempStrokeSettings = { strokeColor: '#fff', fillColor: '', strokeWidth: null }; // restore stroke settings on cancel
-        this.tempTextSettings = { text: 'Enter Text', fontFamily: 'Arial', fontSize: null, fontRatio: null, bold: false, italic: false, underline: false }; // restore text settings on cancel
+        this.tempTextSettings = { text: 'Enter Text', fontFamily: '', fontSize: null, fontRatio: null, bold: false, italic: false, underline: false }; // restore text settings on cancel
         this.tempAdjValue = ''; // for temp internal slider value
         this.tempFilter = ''; // restore filter style on cancel
         this.tempUndoRedoStep = 0;
@@ -25,9 +25,12 @@ var Draw = /** @class */ (function () {
         this.arrowDimension = { bar: { width: 10, height: 32, ratioX: null, ratioY: null },
             arrow: { width: 24, height: 24, ratioX: null, ratioY: null }, arrowSolid: { width: 32, height: 32, ratioX: null, ratioY: null },
             circle: { width: 10, height: 10, ratioX: null, ratioY: null }, square: { width: 20, height: 20, ratioX: null, ratioY: null } };
-        this.tempFrame = 'none';
         this.origDim = { width: 0, height: 0 };
         this.isImageApply = false;
+        this.imgCanvasPoints = [];
+        this.isCropSelect = false;
+        this.isDownScale = false;
+        this.preventStraightening = false;
         this.parent = parent;
         this.addEventListener();
     }
@@ -70,7 +73,7 @@ var Draw = /** @class */ (function () {
                 this.setTransform(args.value['context'], args.value['value'], args.value['isReverse']);
                 break;
             case 'render-image':
-                this.renderImage(args.value['isMouseWheel'], args.value['isPreventClearRect'], args.value['isFrame']);
+                this.renderImage(args.value['isMouseWheel'], args.value['isPreventClearRect'], args.value['isFrame'], args.value['isStraighten']);
                 break;
             case 'draw-image-to-canvas':
                 this.drawImgToCanvas(args.value['dimension']);
@@ -100,10 +103,10 @@ var Draw = /** @class */ (function () {
                 this.redrawImgWithObj();
                 break;
             case 'setCurrentObj':
-                this.setCurrentObj(args.value['obj']);
+                this.setCurrentObj(args.value['obj'], args.value['isUndoRedo']);
                 break;
             case 'performPointZoom':
-                this.performPointZoom(args.value['x'], args.value['y'], args.value['type']);
+                this.performPointZoom(args.value['x'], args.value['y'], args.value['type'], args.value['isResize']);
                 break;
             case 'open':
                 this.open(args.value['data']);
@@ -212,15 +215,9 @@ var Draw = /** @class */ (function () {
             case 'applyFrame':
                 this.applyFrame(args.value['ctx'], args.value['frame'], args.value['preventImg']);
                 break;
-            case 'getTempFrame':
-                args.value['obj']['tempFrame'] = this.tempFrame;
-                break;
             case 'drawImage':
                 this.drawImage();
                 break;
-            case 'setTempFrame':
-                this.tempFrame = args.value['frame'];
-                break;
             case 'downScaleImgCanvas':
                 this.downScaleImgCanvas(args.value['ctx'], args.value['isImgAnnotation'], args.value['isHFlip'], args.value['isVFlip']);
                 break;
@@ -228,7 +225,7 @@ var Draw = /** @class */ (function () {
                 this.downScale(args.value['canvas'], args.value['width'], args.value['height']);
                 break;
             case 'resetFrameZoom':
-                this.resetFrameZoom();
+                this.resetFrameZoom(args.value['isOk']);
                 break;
             case 'triggerFrameChange':
                 args.value['obj']['frameChangeEventArgs'] = this.triggerFrameChange(args.value['prevFrameSettings']);
@@ -236,6 +233,63 @@ var Draw = /** @class */ (function () {
             case 'setImageApply':
                 this.isImageApply = args.value['bool'];
                 break;
+            case 'zoomToSel':
+                this.zoomToSel(args.value['activeObj'], args.value['isToolbar']);
+                break;
+            case 'getStraightenActObj':
+                args.value['obj']['activeObj'] = this.straightenActObj;
+                break;
+            case 'setStraightenActObj':
+                this.straightenActObj = args.value['activeObj'];
+                break;
+            case 'updateImgCanvasPoints':
+                this.updateImgCanvasPoints();
+                break;
+            case 'isLinesIntersect':
+                args.value['obj']['isIntersect'] = this.isLinesIntersect(args.value['obj']);
+                break;
+            case 'getImageCanvasPoints':
+                args.value['obj']['points'] = this.imgCanvasPoints;
+                break;
+            case 'setDestForStraighten':
+                this.setDestForStraighten();
+                break;
+            case 'setTempDestForStraighten':
+                this.tempStraightenDestPoints = extend({}, this.straightenDestPoints, {}, true);
+                break;
+            case 'getStraightenInitZoom':
+                args.value['obj']['zoomFactor'] = this.straightenInitZoom;
+                break;
+            case 'setStraightenInitZoom':
+                this.straightenInitZoom = args.value['zoomFactor'];
+                break;
+            case 'isPointsInsideImg':
+                args.value['obj']['bool'] = this.checkPointPosition(args.value['x'], args.value['y'], this.imgCanvasPoints[0].x, this.imgCanvasPoints[0].y, this.imgCanvasPoints[1].x, this.imgCanvasPoints[1].y, this.imgCanvasPoints[2].x, this.imgCanvasPoints[2].y, this.imgCanvasPoints[3].x, this.imgCanvasPoints[3].y) !== 'inside';
+                break;
+            case 'setIsCropSelect':
+                this.isCropSelect = args.value['bool'];
+                break;
+            case 'updateCropSelection':
+                this.updateCropSelection();
+                break;
+            case 'updateCropSelObj':
+                this.updateCropSelObj();
+                break;
+            case 'redrawDownScale':
+                this.redrawDownScale();
+                break;
+            case 'updateFinetune':
+                this.updateFinetune();
+                break;
+            case 'isSelOutsideImg':
+                args.value['obj']['bool'] = this.isSelOutsideImg();
+                break;
+            case 'resetStraightenDestPoints':
+                this.straightenDestPoints = null;
+                break;
+            case 'checkPointPosition':
+                args.value['obj']['position'] = this.checkPointPosition(args.value['obj']['x'], args.value['obj']['y'], args.value['obj']['x1'], args.value['obj']['y1'], args.value['obj']['x2'], args.value['obj']['y2'], args.value['obj']['x3'], args.value['obj']['y3'], args.value['obj']['x4'], args.value['obj']['y4']);
+                break;
         }
     };
     Draw.prototype.getModuleName = function () {
@@ -252,11 +306,13 @@ var Draw = /** @class */ (function () {
         if (isNullOrUndefined(this.tempZoomFactor)) {
             this.tempZoomFactor = parent.transform.zoomFactor;
         }
+        if (this.tempTextSettings.fontFamily === '') {
+            this.tempTextSettings.fontFamily = parent.fontFamily.default;
+        }
     };
     Draw.prototype.reset = function () {
         this.isInitialLoading = this.isErrorImage = this.isNewPath = this.isResizeSelect = false;
         this.isShapeTextInserted = false;
-        this.tempFrame = 'none';
         this.isImageApply = false;
         this.initZoomValue = null;
         this.tempFilter = '';
@@ -266,34 +322,71 @@ var Draw = /** @class */ (function () {
         this.tempAdjValue = '';
         this.tempStrokeSettings = { strokeColor: '#fff', fillColor: '', strokeWidth: null };
         this.tempTextSettings =
-            { 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.tempUndoRedoStep = this.tempFreehandCounter = this.tempCurrFhdIndex = 0;
         this.tempZoomFactor = null;
         this.isCancelAction = false;
         this.rotatedFlipCropSel = false;
         this.prevActObj = null;
+        this.tempStraightenDestPoints = null;
         this.arrowDimension = { bar: { width: 10, height: 32, ratioX: null, ratioY: null },
             arrow: { width: 24, height: 24, ratioX: null, ratioY: null }, arrowSolid: { width: 32, height: 32, ratioX: null, ratioY: null },
             circle: { width: 10, height: 10, ratioX: null, ratioY: null }, square: { width: 20, height: 20, ratioX: null, ratioY: null } };
+        this.straightenActObj = null;
+        this.imgCanvasPoints = [];
+        this.straightenInitZoom = null;
+        this.straightenDestPoints = null;
+        this.isCropSelect = this.isDownScale = this.preventStraightening = false;
+    };
+    Draw.prototype.redrawDownScale = function () {
+        var parent = this.parent;
+        if (parent.transform.zoomFactor && parent.transform.zoomFactor < 0) {
+            var activeObj = extend({}, parent.activeObj, {}, true);
+            parent.notify('shape', { prop: 'refreshActiveObj', onPropertyChange: false });
+            this.isDownScale = true;
+            this.renderImage();
+            this.isDownScale = false;
+            if (activeObj.shape) {
+                this.drawObject('duplicate', activeObj);
+            }
+        }
+    };
+    Draw.prototype.updateFinetune = function () {
+        var parent = this.parent;
+        if (parent.transform.zoomFactor && parent.transform.zoomFactor < 0) {
+            var filter = this.lowerContext.filter;
+            this.lowerContext.filter = 'none';
+            parent.notify('draw', { prop: 'redrawDownScale' });
+            var inMemoryContext = parent.inMemoryCanvas.getContext('2d');
+            var ctx = this.lowerContext;
+            var imageData = ctx.getImageData(0, 0, ctx.canvas.width, ctx.canvas.height);
+            parent.inMemoryCanvas.width = imageData.width;
+            parent.inMemoryCanvas.height = imageData.height;
+            inMemoryContext.putImageData(imageData, 0, 0);
+            this.lowerContext.filter = filter;
+            parent.notify('draw', { prop: 'redrawDownScale' });
+        }
     };
     Draw.prototype.drawImage = function () {
         this.applyFrame(this.lowerContext, this.parent.frameObj.type);
     };
     Draw.prototype.drawObject = function (canvas, obj, isCropRatio, points, isPreventDrag, saveContext, isPreventSelection) {
         var parent = this.parent;
+        var actObj = parent.activeObj;
         var actPoint = parent.activeObj.activePoint;
         this.upperContext.clearRect(0, 0, parent.upperCanvas.width, parent.upperCanvas.height);
         var canvasDraw;
-        if (canvas.toLowerCase() === 'original') {
+        canvas = canvas.toLowerCase();
+        if (canvas === 'original') {
             canvasDraw = this.lowerContext;
         }
-        else if (canvas.toLowerCase() === 'duplicate') {
+        else if (canvas === 'duplicate') {
             canvasDraw = this.upperContext;
         }
         else if (saveContext) {
             canvasDraw = saveContext;
         }
-        if (!isPreventDrag && parent.activeObj.shape) {
+        if (!isPreventDrag && actObj.shape) {
             this.setDragLimit();
         }
         if (parent.currObjType.shape) {
@@ -302,6 +395,19 @@ var Draw = /** @class */ (function () {
                 this.drawCropRatio();
             }
         }
+        actObj = parent.activeObj;
+        actPoint = parent.activeObj.activePoint;
+        if (isNullOrUndefined(actObj.strokeSettings)) {
+            var obj_1 = { strokeSettings: {} };
+            parent.notify('shape', { prop: 'getStrokeSettings', onPropertyChange: false, value: { obj: obj_1 } });
+            actObj.strokeSettings = obj_1['strokeSettings'];
+        }
+        if (isNullOrUndefined(actObj.strokeSettings.strokeWidth)) {
+            actObj.strokeSettings.strokeWidth = 2;
+        }
+        if (obj) {
+            parent.activeObj = extend({}, obj, {}, true);
+        }
         if (points) {
             actPoint.startX = points.startX;
             actPoint.startY = points.startY;
@@ -310,38 +416,38 @@ var Draw = /** @class */ (function () {
             actPoint.width = points.width;
             actPoint.height = points.height;
         }
-        if (isNullOrUndefined(parent.activeObj.strokeSettings)) {
-            var obj_1 = { strokeSettings: {} };
-            parent.notify('shape', { prop: 'getStrokeSettings', onPropertyChange: false,
-                value: { obj: obj_1 } });
-            parent.activeObj.strokeSettings = obj_1['strokeSettings'];
-        }
-        if (isNullOrUndefined(parent.activeObj.strokeSettings.strokeWidth)) {
-            parent.activeObj.strokeSettings.strokeWidth = 2;
-        }
-        if (obj) {
-            parent.activeObj = extend({}, obj, {}, true);
-        }
         this.updateActiveObject();
-        if (isNullOrUndefined(parent.activeObj.activePoint.startX) &&
-            isNullOrUndefined(parent.activeObj.activePoint.startY)) {
+        actObj = parent.activeObj;
+        actPoint = parent.activeObj.activePoint;
+        if (isNullOrUndefined(actPoint.startX) && isNullOrUndefined(actPoint.startY)) {
             return;
         }
         if (parent.currObjType.isText) {
             var obj_2 = { keyHistory: '' };
             parent.notify('shape', { prop: 'getKeyHistory', onPropertyChange: false, value: { obj: obj_2 } });
-            parent.activeObj.keyHistory = obj_2['keyHistory'];
+            actObj.keyHistory = obj_2['keyHistory'];
         }
-        if (canvas.toLowerCase() !== 'original') {
+        var isCrop = false;
+        if (canvas !== 'original') {
             var splitWords = void 0;
-            var isCrop = false;
-            if (parent.activeObj.shape) {
-                splitWords = parent.activeObj.shape.split('-');
+            if (actObj.shape) {
+                splitWords = actObj.shape.split('-');
                 if (splitWords[0] === 'crop') {
                     isCrop = true;
                 }
             }
             if (isCrop) {
+                if (points) {
+                    actPoint.startX = points.startX;
+                    actPoint.startY = points.startY;
+                    actPoint.endX = points.endX;
+                    actPoint.endY = points.endY;
+                    actPoint.width = points.width;
+                    actPoint.height = points.height;
+                }
+                else {
+                    actPoint = actObj.activePoint;
+                }
                 this.upperContext.fillStyle = 'rgb(0, 0, 0, 0.25)';
                 this.upperContext.fillRect(0, 0, parent.lowerCanvas.width, parent.lowerCanvas.height);
                 this.upperContext.clearRect(actPoint.startX, actPoint.startY, actPoint.width, actPoint.height);
@@ -361,42 +467,60 @@ var Draw = /** @class */ (function () {
         else if (object['keyHistory'] !== '' && parent.currObjType.isText) {
             this.drawShapeObj(canvas, 'text', saveContext, isPreventSelection);
         }
-        else if (parent.activeObj.shape) {
-            this.drawShapeObj(canvas, parent.activeObj.shape, saveContext, isPreventSelection);
+        else if (actObj.shape) {
+            this.drawShapeObj(canvas, actObj.shape, saveContext, isPreventSelection);
         }
         else {
             this.drawShapeObj(canvas, undefined, saveContext, isPreventSelection);
         }
+        if (canvas === 'duplicate' && isCrop && actObj.shape !== 'crop-circle' && parent.frameObj.type !== 'none') {
+            this.applyFrame(this.upperContext, parent.frameObj.type);
+            this.drawCornerCircles(this.upperContext);
+        }
     };
     Draw.prototype.rotateContext = function (type, ctx) {
         var parent = this.parent;
-        var activePoint = extend({}, parent.activeObj.activePoint, {}, true);
-        if (parent.activeObj.shape === 'line' || parent.activeObj.shape === 'arrow') {
+        var _a = parent.activeObj, shape = _a.shape, rotatedAngle = _a.rotatedAngle;
+        var _b = parent.img, destLeft = _b.destLeft, destTop = _b.destTop, destWidth = _b.destWidth, destHeight = _b.destHeight;
+        var _c = parent.activeObj.activePoint, startX = _c.startX, startY = _c.startY, width = _c.width, height = _c.height;
+        if (shape === 'line' || shape === 'arrow') {
             return;
         }
-        var rotationAngle = (type === 'initial') ? parent.activeObj.rotatedAngle : -parent.activeObj.rotatedAngle;
-        ctx.translate(activePoint.startX + (activePoint.width / 2), activePoint.startY + (activePoint.height / 2));
+        var rotationAngle = (type === 'initial') ? rotatedAngle : -rotatedAngle;
+        var translateX;
+        var translateY;
+        if (parent.transform.straighten === 0 && !parent.isCropTab) {
+            translateX = startX + (width / 2);
+            translateY = startY + (height / 2);
+        }
+        else {
+            translateX = destLeft + (destWidth / 2);
+            translateY = destTop + (destHeight / 2);
+        }
+        ctx.translate(translateX, translateY);
         ctx.rotate(rotationAngle);
-        ctx.translate(-(activePoint.startX + (activePoint.width / 2)), -(activePoint.startY + (activePoint.height / 2)));
+        ctx.translate(-translateX, -translateY);
     };
     Draw.prototype.setDragLimit = function () {
         var parent = this.parent;
         var actPoint = parent.activeObj.activePoint;
-        if (actPoint && parent.activeObj.shape !== 'image' && parent.activeObj.shape !== 'line' && parent.activeObj.rotatedAngle === 0) {
-            if (actPoint.startX < parent.img.destLeft) {
-                actPoint.startX = parent.img.destLeft;
-                actPoint.endX = actPoint.startX + actPoint.width;
+        var _a = parent.activeObj, shape = _a.shape, rotatedAngle = _a.rotatedAngle;
+        if (actPoint && shape !== 'image' && shape !== 'line' && rotatedAngle === 0) {
+            var _b = parent.img, destLeft = _b.destLeft, destTop = _b.destTop, destWidth = _b.destWidth, destHeight = _b.destHeight;
+            if (actPoint.startX < destLeft) {
+                actPoint.startX = destLeft;
+                actPoint.endX = Math.min(actPoint.startX + actPoint.width, destLeft + destWidth);
             }
-            else if (actPoint.endX > parent.img.destLeft + parent.img.destWidth) {
-                actPoint.endX = parent.img.destLeft + parent.img.destWidth;
-                actPoint.startX = actPoint.endX - actPoint.width;
+            else if (actPoint.endX > destLeft + destWidth) {
+                actPoint.endX = destLeft + destWidth;
+                actPoint.startX = Math.max(actPoint.endX - actPoint.width, destLeft);
             }
-            if (actPoint.startY < parent.img.destTop) {
-                actPoint.startY = parent.img.destTop;
+            if (actPoint.startY < destTop) {
+                actPoint.startY = destTop;
             }
-            else if (actPoint.endY > parent.img.destTop + parent.img.destHeight) {
-                actPoint.endY = parent.img.destTop + parent.img.destHeight;
-                actPoint.startY = actPoint.endY - actPoint.height;
+            else if (actPoint.endY > destTop + destHeight) {
+                actPoint.endY = destTop + destHeight;
+                actPoint.startY = Math.max(actPoint.endY - actPoint.height, destTop);
             }
             parent.activeObj = this.updateWidthHeight(parent.activeObj);
         }
@@ -408,26 +532,31 @@ var Draw = /** @class */ (function () {
         var y;
         var width;
         var height;
+        var canvasWidth = parent.lowerCanvas.clientWidth;
+        var canvasHeight = parent.lowerCanvas.clientHeight;
+        var _a = parent.img, destLeft = _a.destLeft, destTop = _a.destTop, destWidth = _a.destWidth, destHeight = _a.destHeight;
         if (parent.transform.zoomFactor > 0 && this.currSelPoint) {
             var activeObj = extend({}, parent.activeObj, {}, true);
             this.drawCustomSelection('crop-custom', null, null, null, null);
+            if (parent.transform.straighten !== 0) {
+                actPoint = parent.activeObj.activePoint;
+            }
             if (parent.transform.degree % 90 === 0 && parent.transform.degree % 180 !== 0) {
-                width = parent.activeObj.activePoint.width < parent.activeObj.activePoint.height ?
-                    parent.activeObj.activePoint.width : parent.activeObj.activePoint.height;
+                width = actPoint.width < actPoint.height ? actPoint.width : actPoint.height;
                 height = width;
             }
             else {
-                if (parent.img.destLeft + parent.img.destLeft + parent.img.destWidth <= parent.lowerCanvas.clientWidth) {
+                if (destLeft + destLeft + destWidth <= canvasWidth) {
                     width = actPoint.width;
                 }
                 else {
-                    width = parent.lowerCanvas.clientWidth - parent.img.destLeft;
+                    width = parent.transform.straighten === 0 ? canvasWidth - destLeft : actPoint.width;
                 }
-                if (parent.img.destTop + parent.img.destTop + parent.img.destHeight <= parent.lowerCanvas.clientHeight) {
+                if (destTop + destTop + destHeight <= canvasHeight) {
                     height = actPoint.height;
                 }
                 else {
-                    height = parent.lowerCanvas.clientHeight - parent.img.destTop;
+                    height = parent.transform.straighten === 0 ? canvasHeight - destTop : actPoint.height;
                 }
             }
             parent.notify('shape', { prop: 'refreshActiveObj', onPropertyChange: false });
@@ -437,20 +566,20 @@ var Draw = /** @class */ (function () {
             parent.currObjType.isCustomCrop = false;
         }
         else {
-            width = parent.img.destWidth;
-            height = parent.img.destHeight;
-            if (parent.img.destLeft < 0) {
-                width += parent.img.destLeft;
+            width = destWidth;
+            height = destHeight;
+            if (destLeft < 0) {
+                width += destLeft;
             }
-            if (parent.img.destTop < 0) {
-                height += parent.img.destTop;
+            if (destTop < 0) {
+                height += destTop;
             }
             if (parent.currObjType.shape.toLowerCase() !== 'crop-square' && parent.currObjType.shape.toLowerCase() !== 'crop-circle') {
-                if (parent.img.destLeft + parent.img.destWidth > parent.lowerCanvas.width) {
-                    width -= (parent.img.destLeft + parent.img.destWidth - parent.lowerCanvas.width);
+                if (destLeft + destWidth > parent.lowerCanvas.width) {
+                    width -= (destLeft + destWidth - parent.lowerCanvas.width);
                 }
-                if (parent.img.destTop + parent.img.destHeight > parent.lowerCanvas.height) {
-                    height -= (parent.img.destTop + parent.img.destHeight - parent.lowerCanvas.height);
+                if (destTop + destHeight > parent.lowerCanvas.height) {
+                    height -= (destTop + destHeight - parent.lowerCanvas.height);
                 }
             }
         }
@@ -467,25 +596,21 @@ var Draw = /** @class */ (function () {
                     actPoint.startY = 7.5;
                     actPoint.endY = parent.lowerCanvas.height - 7.5;
                 }
-                if (width === parent.img.destWidth && height === parent.img.destHeight) {
-                    actPoint.startX += parent.img.destLeft;
-                    actPoint.startY +=
-                        parent.img.destTop;
-                    actPoint.endX += parent.img.destLeft;
-                    actPoint.endY +=
-                        parent.img.destTop;
+                if (width === destWidth && height === destHeight) {
+                    actPoint.startX += destLeft;
+                    actPoint.startY += destTop;
+                    actPoint.endX += destLeft;
+                    actPoint.endY += destTop;
                 }
                 if (parent.lowerCanvas.width > parent.lowerCanvas.height) {
                     actPoint.height = actPoint.endY - actPoint.startY;
                     actPoint.width = actPoint.height;
-                    actPoint.endX = actPoint.startX +
-                        actPoint.width;
+                    actPoint.endX = actPoint.startX + actPoint.width;
                 }
                 else {
                     actPoint.width = actPoint.endX - actPoint.startX;
                     actPoint.height = actPoint.width;
-                    actPoint.endY = actPoint.startY +
-                        actPoint.height;
+                    actPoint.endY = actPoint.startY + actPoint.height;
                 }
                 break;
             case 'crop-3:2':
@@ -508,117 +633,205 @@ var Draw = /** @class */ (function () {
                 x = 16;
                 y = 9;
                 break;
+            case 'crop-2:3':
+                x = 2;
+                y = 3;
+                break;
+            case 'crop-3:4':
+                x = 3;
+                y = 4;
+                break;
+            case 'crop-4:5':
+                x = 4;
+                y = 5;
+                break;
+            case 'crop-5:7':
+                x = 5;
+                y = 7;
+                break;
+            case 'crop-9:16':
+                x = 9;
+                y = 16;
+                break;
         }
         if (x !== undefined && y !== undefined) {
             parent.notify('selection', { prop: 'calcShapeRatio', onPropertyChange: false,
                 value: { x: x, y: y, imgWidth: width, imgHeight: height } });
-            if (width === parent.img.destWidth && height === parent.img.destHeight) {
+            if (width === destWidth && height === destHeight) {
                 this.updatePoints();
             }
             actPoint = parent.activeObj.activePoint;
         }
-        if (actPoint.startX < parent.img.destLeft) {
-            var diff = (parent.img.destLeft - actPoint.startX) + 7.5;
+        if (actPoint.startX < destLeft) {
+            var diff = (destLeft - actPoint.startX) + 7.5;
             actPoint.startX += diff;
             actPoint.endX += diff;
         }
-        if (actPoint.startY < parent.img.destTop) {
-            var diff = (parent.img.destTop - actPoint.startY) + 7.5;
+        if (actPoint.startY < destTop) {
+            var diff = (destTop - actPoint.startY) + 7.5;
             actPoint.startY += diff;
             actPoint.endY += diff;
         }
         parent.activeObj = this.updateWidthHeight(parent.activeObj);
         this.adjToCenter();
+        this.enlargeToImg();
+        if (parent.transform.straighten !== 0) {
+            this.adjToStraighten();
+            this.updateActiveObject(parent.activeObj.activePoint, parent.activeObj);
+        }
+        var object = { isIntersect: null, arr: null };
+        var count = 0;
+        actPoint = parent.activeObj.activePoint;
+        if (parent.transform.straighten !== 0) {
+            while (this.isLinesIntersect(object) && count < 100) {
+                count++;
+                var diff = (actPoint.width * 1) / 100;
+                actPoint.startX += diff;
+                actPoint.endX -= diff;
+                diff = (actPoint.height * 1) / 100;
+                actPoint.startY += diff;
+                actPoint.endY -= diff;
+                actPoint.width = actPoint.endX - actPoint.startX;
+                actPoint.height = actPoint.endY - actPoint.startY;
+                this.updateActiveObject(actPoint, parent.activeObj);
+            }
+        }
+        this.straightenInitZoom = parent.transform.zoomFactor;
+        this.straightenActObj = extend({}, parent.activeObj, {}, true);
+        parent.notify('draw', { prop: 'resetStraightenDestPoints' });
+        parent.notify('draw', { prop: 'setDestForStraighten' });
     };
     Draw.prototype.adjToCenter = function () {
         var parent = this.parent;
-        var diffX = ((parent.lowerCanvas.width) / 2) - (parent.activeObj.activePoint.endX -
-            parent.activeObj.activePoint.width / 2);
-        var diffY = ((parent.lowerCanvas.height) / 2) - (parent.activeObj.activePoint.endY -
-            parent.activeObj.activePoint.height / 2);
-        parent.activeObj.activePoint.startX += diffX;
-        parent.activeObj.activePoint.endX += diffX;
-        parent.activeObj.activePoint.startY += diffY;
-        parent.activeObj.activePoint.endY += diffY;
-        if (parent.activeObj.activePoint.startX < (parent.img.destLeft >= 7.5 ? parent.img.destLeft : 7.5)) {
-            var diff = ((parent.img.destLeft >= 7.5 ? parent.img.destLeft : 0) - parent.activeObj.activePoint.startX);
-            parent.activeObj.activePoint.startX += diff;
-            parent.activeObj.activePoint.endX += diff;
-        }
-        else if (parent.activeObj.activePoint.endX > parent.img.destLeft + parent.img.destWidth) {
-            var diff = (parent.activeObj.activePoint.endX - (parent.img.destLeft + parent.img.destWidth));
-            parent.activeObj.activePoint.startX -= diff;
-            parent.activeObj.activePoint.endX -= diff;
-        }
-        if (parent.activeObj.activePoint.startY < (parent.img.destTop >= 7.5 ? parent.img.destTop : 7.5)) {
-            var diff = ((parent.img.destTop >= 7.5 ? parent.img.destTop : 0) - parent.activeObj.activePoint.startY);
-            parent.activeObj.activePoint.startY += diff;
-            parent.activeObj.activePoint.endY += diff;
-        }
-        else if (parent.activeObj.activePoint.endY > parent.img.destTop + parent.img.destHeight) {
-            var diff = (parent.activeObj.activePoint.endY - (parent.img.destTop + parent.img.destHeight));
-            parent.activeObj.activePoint.startY -= diff;
-            parent.activeObj.activePoint.endY -= diff;
+        var actPoint = parent.activeObj.activePoint;
+        var _a = parent.img, destLeft = _a.destLeft, destTop = _a.destTop, destWidth = _a.destWidth, destHeight = _a.destHeight;
+        var diffX = ((parent.lowerCanvas.width) / 2) - (actPoint.endX - actPoint.width / 2);
+        var diffY = ((parent.lowerCanvas.height) / 2) - (actPoint.endY - actPoint.height / 2);
+        actPoint.startX += diffX;
+        actPoint.endX += diffX;
+        actPoint.startY += diffY;
+        actPoint.endY += diffY;
+        if (actPoint.startX < (destLeft >= 7.5 ? destLeft : 7.5)) {
+            var diff = ((destLeft >= 7.5 ? destLeft : 0) - actPoint.startX);
+            actPoint.startX += diff;
+            actPoint.endX += diff;
+        }
+        else if (actPoint.endX > destLeft + destWidth) {
+            var diff = (actPoint.endX - (destLeft + destWidth));
+            actPoint.startX -= diff;
+            actPoint.endX -= diff;
+        }
+        if (actPoint.startY < (destTop >= 7.5 ? destTop : 7.5)) {
+            var diff = ((destTop >= 7.5 ? destTop : 0) - actPoint.startY);
+            actPoint.startY += diff;
+            actPoint.endY += diff;
+        }
+        else if (actPoint.endY > destTop + destHeight) {
+            var diff = (actPoint.endY - (destTop + destHeight));
+            actPoint.startY -= diff;
+            actPoint.endY -= diff;
+        }
+    };
+    Draw.prototype.enlargeToImg = function () {
+        var parent = this.parent;
+        if (parent.transform.straighten === 0) {
+            return;
+        }
+        if (parent.transform.degree % 90 === 0 && parent.transform.degree % 180 !== 0) {
+            var actPoint = parent.activeObj.activePoint;
+            var tempActPoint = extend({}, actPoint, {}, true);
+            var count = 0;
+            while (true) {
+                // Increase width and height by 5% from center to enlarge the crop selection
+                count++;
+                var diff = (actPoint.width * 5) / 100;
+                actPoint.startX -= diff;
+                actPoint.endX += diff;
+                diff = (actPoint.height * 5) / 100;
+                actPoint.startY -= diff;
+                actPoint.endY += diff;
+                actPoint.width = actPoint.endX - actPoint.startX;
+                actPoint.height = actPoint.endY - actPoint.startY;
+                this.updateActiveObject(actPoint, parent.activeObj);
+                var object = { isIntersect: null, arr: null };
+                this.updateImgCanvasPoints();
+                this.isLinesIntersect(object);
+                if (object['arr'][0] || object['arr'][1] || object['arr'][2] || object['arr'][3] ||
+                    actPoint.startX < 7.5 || actPoint.startY < 7.5 || count === 100) {
+                    actPoint = extend({}, tempActPoint, {}, true);
+                    diff = (actPoint.width * 1) / 100;
+                    actPoint.startX += diff;
+                    actPoint.endX -= diff;
+                    diff = (actPoint.height * 1) / 100;
+                    actPoint.startY += diff;
+                    actPoint.endY -= diff;
+                    actPoint.width = actPoint.endX - actPoint.startX;
+                    actPoint.height = actPoint.endY - actPoint.startY;
+                    this.updateActiveObject(actPoint, parent.activeObj);
+                    break;
+                }
+                tempActPoint = extend({}, actPoint, {}, true);
+            }
         }
     };
     Draw.prototype.updateActiveObject = function (actPoint, obj, isMouseMove, x, y) {
-        actPoint = actPoint ? actPoint : extend({}, this.parent.activeObj.activePoint, {}, true);
-        obj = obj ? obj : extend({}, this.parent.activeObj, {}, true);
+        var parent = this.parent;
+        actPoint = actPoint ? actPoint : extend({}, parent.activeObj.activePoint, {}, true);
+        obj = obj ? obj : extend({}, parent.activeObj, {}, true);
         actPoint.width = actPoint.endX - actPoint.startX;
         actPoint.height = actPoint.endY - actPoint.startY;
+        var startX = actPoint.startX, startY = actPoint.startY, endX = actPoint.endX, endY = actPoint.endY, width = actPoint.width, height = actPoint.height;
         x = x ? x : 0;
         y = y ? y : 0;
-        var horCircleWidth = actPoint.width / 2;
-        var verCircleHeight = actPoint.height / 2;
+        var horCircleWidth = width / 2;
+        var verCircleHeight = height / 2;
         var radius = 7.5;
-        obj.horTopLine = { startX: actPoint.startX + x, startY: actPoint.startY - y,
-            endX: actPoint.endX + x, endY: actPoint.endY + y };
-        obj.horBottomLine = { startX: actPoint.startX - x, startY: actPoint.endY - y,
-            endX: actPoint.endX - x, endY: actPoint.endY + y };
-        obj.verLeftLine = { startX: actPoint.startX + x, startY: actPoint.startY - y,
-            endX: actPoint.startX - y, endY: actPoint.endY - y };
-        obj.verRightLine = { startX: actPoint.endX + x, startY: actPoint.startY + y,
-            endX: actPoint.endX - x, endY: actPoint.endY + y };
-        obj.topLeftCircle = { startX: actPoint.startX, startY: actPoint.startY,
+        obj.horTopLine = { startX: startX + x, startY: startY - y,
+            endX: endX + x, endY: endY + y };
+        obj.horBottomLine = { startX: startX - x, startY: endY - y,
+            endX: endX - x, endY: endY + y };
+        obj.verLeftLine = { startX: startX + x, startY: startY - y,
+            endX: startX - y, endY: endY - y };
+        obj.verRightLine = { startX: endX + x, startY: startY + y,
+            endX: endX - x, endY: endY + y };
+        obj.topLeftCircle = { startX: startX, startY: startY,
             radius: obj.horTopLine.endX ? (radius) : 0 };
-        obj.topCenterCircle = { startX: actPoint.startX + horCircleWidth, startY: actPoint.startY,
+        obj.topCenterCircle = { startX: startX + horCircleWidth, startY: startY,
             radius: obj.horTopLine.endX ? (radius) : 0 };
-        obj.topRightCircle = { startX: actPoint.endX, startY: actPoint.startY,
+        obj.topRightCircle = { startX: endX, startY: startY,
             radius: obj.horTopLine.endX ? (radius) : 0 };
-        obj.centerLeftCircle = { startX: actPoint.startX, startY: actPoint.startY + verCircleHeight,
+        obj.centerLeftCircle = { startX: startX, startY: startY + verCircleHeight,
             radius: obj.horTopLine.endX ? (radius) : 0 };
-        obj.centerRightCircle = { startX: actPoint.endX, startY: actPoint.startY + verCircleHeight,
+        obj.centerRightCircle = { startX: endX, startY: startY + verCircleHeight,
             radius: obj.horTopLine.endX ? (radius) : 0 };
-        obj.bottomLeftCircle = { startX: actPoint.startX, startY: actPoint.endY,
+        obj.bottomLeftCircle = { startX: startX, startY: endY,
             radius: obj.horTopLine.endX ? (radius) : 0 };
-        obj.bottomCenterCircle = { startX: actPoint.startX + horCircleWidth, startY: actPoint.endY,
+        obj.bottomCenterCircle = { startX: startX + horCircleWidth, startY: endY,
             radius: obj.horTopLine.endX ? (radius) : 0 };
-        obj.bottomRightCircle = { startX: actPoint.endX, startY: actPoint.endY,
+        obj.bottomRightCircle = { startX: endX, startY: endY,
             radius: obj.horTopLine.endX ? (radius) : 0 };
         if (obj.rotatedAngle === 0) {
             obj.rotationCirclePoint = { x: obj.bottomCenterCircle.startX,
                 y: obj.bottomCenterCircle.startY + 25 };
-            obj.rotationCirclePoint.ratioX = (obj.rotationCirclePoint.x - this.parent.img.destLeft) / this.parent.img.destWidth;
-            obj.rotationCirclePoint.ratioY = (obj.rotationCirclePoint.y - this.parent.img.destTop) / this.parent.img.destHeight;
+            obj.rotationCirclePoint.ratioX = (obj.rotationCirclePoint.x - parent.img.destLeft) / parent.img.destWidth;
+            obj.rotationCirclePoint.ratioY = (obj.rotationCirclePoint.y - parent.img.destTop) / parent.img.destHeight;
         }
         obj.activePoint = actPoint;
         if (isNullOrUndefined(isMouseMove)) {
-            this.parent.activeObj = extend({}, obj, {}, true);
+            parent.activeObj = extend({}, obj, {}, true);
         }
     };
     Draw.prototype.drawOuterSelection = function (canvasDraw, isCropCircle) {
         var splitWords;
         var parent = this.parent;
         var actPoint = parent.activeObj.activePoint;
+        var actObj = parent.activeObj;
         canvasDraw.lineWidth = (0.5);
-        if (parent.activeObj.shape !== undefined) {
-            splitWords = parent.activeObj.shape.split('-');
+        var tempObj = extend({}, actObj, {}, true);
+        if (actObj.shape) {
+            splitWords = actObj.shape.split('-');
         }
-        var tempObj = extend({}, parent.activeObj, {}, true);
-        if (parent.activeObj.shape !== undefined) {
-            splitWords = parent.activeObj.shape.split('-');
-        }
-        if (((splitWords !== undefined && splitWords[0] === 'crop') || parent.activeObj.shape === undefined) && !isCropCircle) {
+        if (((splitWords && splitWords[0] === 'crop') || actObj.shape === undefined) && !isCropCircle) {
             this.upperContext.fillStyle = 'rgb(0, 0, 0, 0.25)';
             this.upperContext.fillRect(0, 0, parent.lowerCanvas.width, parent.lowerCanvas.height);
             this.upperContext.clearRect(actPoint.startX, actPoint.startY, actPoint.width, actPoint.height);
@@ -635,79 +848,56 @@ var Draw = /** @class */ (function () {
         if (degree < 0) {
             degree = 360 + degree;
         }
-        if (parent.activeObj.shape === 'arrow' || parent.activeObj.shape === 'line') {
+        if (actObj.shape === 'arrow' || actObj.shape === 'line') {
             canvasDraw.beginPath();
             canvasDraw.moveTo(actPoint.startX, actPoint.startY);
             canvasDraw.lineTo(actPoint.endX, actPoint.endY);
             canvasDraw.stroke();
         }
-        else if (parent.activeObj.shape === 'path') {
+        else if (actObj.shape === 'path') {
             canvasDraw.beginPath();
             var activeObj = extend({}, parent.activeObj, {}, true);
-            canvasDraw.moveTo(activeObj.pointColl[0].x, activeObj.pointColl[0].y);
-            if (activeObj.pointColl.length > 1) {
-                for (var i = 1, len = activeObj.pointColl.length; i < len; i++) {
-                    actPoint.endX = activeObj.pointColl[i].x;
-                    actPoint.endY = activeObj.pointColl[i].y;
-                    canvasDraw.lineTo(actPoint.endX, actPoint.endY);
+            if (activeObj.pointColl[0]) {
+                canvasDraw.moveTo(activeObj.pointColl[0].x, activeObj.pointColl[0].y);
+                if (activeObj.pointColl.length > 1) {
+                    for (var i = 1, len = activeObj.pointColl.length; i < len; i++) {
+                        actPoint.endX = activeObj.pointColl[i].x;
+                        actPoint.endY = activeObj.pointColl[i].y;
+                        canvasDraw.lineTo(actPoint.endX, actPoint.endY);
+                    }
                 }
             }
             var obj = { shape: null };
             parent.notify('selection', { prop: 'getCurrentDrawingShape', value: { obj: obj } });
             if (obj['shape'] === 'path') {
-                parent.activeObj = activeObj;
+                parent.activeObj = actObj = activeObj;
             }
             canvasDraw.lineTo(actPoint.endX, actPoint.endY);
             canvasDraw.stroke();
         }
         else {
-            canvasDraw.beginPath();
-            canvasDraw.rect(tempObj.activePoint.startX, tempObj.activePoint.startY, tempObj.activePoint.width, tempObj.activePoint.height);
-            canvasDraw.stroke();
-            canvasDraw.closePath();
-            if (parent.selectionSettings.showCircle) {
-                var strokeColor = canvasDraw.strokeStyle;
-                var fillColor = canvasDraw.fillStyle;
-                canvasDraw.strokeStyle = parent.selectionSettings.strokeColor;
-                canvasDraw.fillStyle = parent.selectionSettings.fillColor;
-                canvasDraw.lineWidth *= 2;
-                canvasDraw.beginPath();
-                canvasDraw.moveTo(tempObj.topLeftCircle.startX, tempObj.topLeftCircle.startY);
-                canvasDraw.arc(tempObj.topLeftCircle.startX, tempObj.topLeftCircle.startY, tempObj.topLeftCircle.radius, 0, 2 * Math.PI);
-                canvasDraw.moveTo(tempObj.topRightCircle.startX, tempObj.topRightCircle.startY);
-                canvasDraw.arc(tempObj.topRightCircle.startX, tempObj.topRightCircle.startY, tempObj.topRightCircle.radius, 0, 2 * Math.PI);
-                canvasDraw.moveTo(tempObj.bottomLeftCircle.startX, tempObj.bottomLeftCircle.startY);
-                canvasDraw.arc(tempObj.bottomLeftCircle.startX, tempObj.bottomLeftCircle.startY, tempObj.bottomLeftCircle.radius, 0, 2 * Math.PI);
-                canvasDraw.moveTo(tempObj.bottomRightCircle.startX, tempObj.bottomRightCircle.startY);
-                canvasDraw.arc(tempObj.bottomRightCircle.startX, tempObj.bottomRightCircle.startY, tempObj.bottomRightCircle.radius, 0, 2 * Math.PI);
-                canvasDraw.stroke();
-                canvasDraw.fill();
-                canvasDraw.closePath();
-                canvasDraw.lineWidth /= 2;
-                canvasDraw.strokeStyle = strokeColor;
-                canvasDraw.fillStyle = fillColor;
-            }
+            this.drawCornerCircles(canvasDraw);
         }
         if (parent.selectionSettings.showCircle && (splitWords === undefined || splitWords[0] !== 'crop')) {
             var strokeColor = canvasDraw.strokeStyle;
             var fillColor = canvasDraw.fillStyle;
             canvasDraw.strokeStyle = parent.selectionSettings.strokeColor;
             canvasDraw.fillStyle = parent.selectionSettings.fillColor;
-            if (parent.activeObj.shape === 'text') {
-                // Text rotation codes
-                // canvasDraw.lineWidth *= 2;
-                // canvasDraw.beginPath();
-                // this.drawRotationArcLine(canvasDraw);
-                // canvasDraw.lineTo(parent.activeObj.rotationCirclePoint.x, parent.activeObj.rotationCirclePoint.y);
-                // canvasDraw.stroke(); canvasDraw.fill(); canvasDraw.closePath();
-                // canvasDraw.beginPath();
-                // canvasDraw.moveTo(parent.activeObj.rotationCirclePoint.x, parent.activeObj.rotationCirclePoint.y);
-                // canvasDraw.arc(parent.activeObj.rotationCirclePoint.x, parent.activeObj.rotationCirclePoint.y,
-                //                parent.activeObj.bottomCenterCircle.radius, 0, 2 * Math.PI);
-                // canvasDraw.stroke();
-                // canvasDraw.fill();
-                // canvasDraw.closePath();
-                // canvasDraw.lineWidth /= 2;
+            if (actObj.shape === 'text') {
+                canvasDraw.lineWidth *= 2;
+                canvasDraw.beginPath();
+                this.drawRotationArcLine(canvasDraw);
+                canvasDraw.lineTo(actObj.rotationCirclePoint.x, actObj.rotationCirclePoint.y);
+                canvasDraw.stroke();
+                canvasDraw.fill();
+                canvasDraw.closePath();
+                canvasDraw.beginPath();
+                canvasDraw.moveTo(actObj.rotationCirclePoint.x, actObj.rotationCirclePoint.y);
+                canvasDraw.arc(actObj.rotationCirclePoint.x, actObj.rotationCirclePoint.y, actObj.bottomCenterCircle.radius, 0, 2 * Math.PI);
+                canvasDraw.stroke();
+                canvasDraw.fill();
+                canvasDraw.closePath();
+                canvasDraw.lineWidth /= 2;
             }
             else {
                 this.drawCenterCircles(canvasDraw);
@@ -715,7 +905,7 @@ var Draw = /** @class */ (function () {
             canvasDraw.strokeStyle = strokeColor;
             canvasDraw.fillStyle = fillColor;
         }
-        tempObj.rotationCircleLine = parent.activeObj.rotationCircleLine;
+        tempObj.rotationCircleLine = actObj.rotationCircleLine;
         parent.activeObj = extend({}, tempObj, {}, true);
     };
     Draw.prototype.drawArrowHead = function (canvasDraw, isStartHead) {
@@ -751,6 +941,8 @@ var Draw = /** @class */ (function () {
     Draw.prototype.drawShapeObj = function (canvas, shape, saveContext, isPreventSelection) {
         var parent = this.parent;
         var actPoint = parent.activeObj.activePoint;
+        var actObj = parent.activeObj;
+        var _a = actObj.strokeSettings, strokeColor = _a.strokeColor, fillColor = _a.fillColor, strokeWidth = _a.strokeWidth;
         var currentShape = shape !== undefined ? shape : parent.currObjType.shape;
         parent.currObjType.shape = currentShape;
         var canvasDraw;
@@ -763,17 +955,17 @@ var Draw = /** @class */ (function () {
         else if (saveContext) {
             canvasDraw = saveContext;
         }
-        if (parent.currObjType.shape.toLowerCase() === 'rectangle' || parent.currObjType.shape.toLowerCase() === 'ellipse'
-            || parent.currObjType.shape.toLowerCase() === 'line' || parent.activeObj.shape === 'arrow' ||
-            parent.activeObj.shape === 'path' || parent.activeObj.shape === 'image') {
-            parent.activeObj.shape = parent.currObjType.shape;
+        var shapeType = parent.currObjType.shape.toLowerCase();
+        var shapeColl = ['rectangle', 'ellipse', 'line', 'arrow', 'path', 'image'];
+        if (shapeColl.indexOf(shapeType) !== -1) {
+            actObj.shape = parent.currObjType.shape;
         }
-        canvasDraw.strokeStyle = parent.activeObj.strokeSettings.strokeColor;
+        canvasDraw.strokeStyle = strokeColor;
         if (shape === 'text' || shape === 'freehanddraw') {
-            canvasDraw.fillStyle = parent.activeObj.strokeSettings.strokeColor;
+            canvasDraw.fillStyle = strokeColor;
         }
         else {
-            canvasDraw.fillStyle = parent.activeObj.strokeSettings.fillColor;
+            canvasDraw.fillStyle = fillColor;
         }
         var horLineWidth = actPoint.width / 3;
         var verLineHeight = actPoint.height / 3;
@@ -795,12 +987,12 @@ var Draw = /** @class */ (function () {
                 selectionHeight = Math.abs(selectionHeight);
                 canvasDraw.beginPath();
                 canvasDraw.ellipse(actPoint.startX + (selectionWidth / 2), actPoint.startY + (selectionHeight / 2), selectionWidth / 2, selectionHeight / 2, 0, 0, 2 * Math.PI, false);
-                if (parent.activeObj.strokeSettings.fillColor !== '') {
-                    canvasDraw.fillStyle = parent.activeObj.strokeSettings.fillColor;
+                if (fillColor !== '') {
+                    canvasDraw.fillStyle = fillColor;
                     canvasDraw.fill();
                 }
-                canvasDraw.ellipse(actPoint.startX + (selectionWidth / 2), actPoint.startY + (selectionHeight / 2), Math.abs((selectionWidth / 2) - (parent.activeObj.strokeSettings.strokeWidth)), Math.abs((selectionHeight / 2) - (parent.activeObj.strokeSettings.strokeWidth)), 0, 0, 2 * Math.PI, false);
-                canvasDraw.fillStyle = parent.activeObj.strokeSettings.strokeColor;
+                canvasDraw.ellipse(actPoint.startX + (selectionWidth / 2), actPoint.startY + (selectionHeight / 2), Math.abs((selectionWidth / 2) - (strokeWidth)), Math.abs((selectionHeight / 2) - (strokeWidth)), 0, 0, 2 * Math.PI, false);
+                canvasDraw.fillStyle = strokeColor;
                 canvasDraw.fill('evenodd');
                 canvasDraw.closePath();
                 if (isNullOrUndefined(isPreventSelection) && canvasDraw === this.upperContext) {
@@ -820,28 +1012,28 @@ var Draw = /** @class */ (function () {
                 }
                 break;
             case 'arrow':
-                if (parent.activeObj.shapeDegree === 0) {
+                if (actObj.shapeDegree === 0) {
                     degree = parent.transform.degree;
                 }
                 else {
-                    degree = parent.transform.degree - parent.activeObj.shapeDegree;
+                    degree = parent.transform.degree - actObj.shapeDegree;
                 }
                 if (degree < 0) {
                     degree = 360 + degree;
                 }
                 canvasDraw.fillStyle = canvasDraw.strokeStyle;
-                if (isNullOrUndefined(parent.activeObj.triangleDirection)) {
-                    parent.activeObj.triangleDirection = 'right';
+                if (isNullOrUndefined(actObj.triangleDirection)) {
+                    actObj.triangleDirection = 'right';
                 }
-                if (isNullOrUndefined(parent.activeObj.start)) {
-                    parent.activeObj.start = 'none';
+                if (isNullOrUndefined(actObj.start)) {
+                    actObj.start = 'none';
                 }
-                if (isNullOrUndefined(parent.activeObj.end)) {
-                    parent.activeObj.end = 'arrowSolid';
+                if (isNullOrUndefined(actObj.end)) {
+                    actObj.end = 'arrowSolid';
                 }
                 this.drawArrowHead(canvasDraw, true);
                 this.drawArrowHead(canvasDraw, false);
-                if (parent.activeObj.end === 'none') {
+                if (actObj.end === 'none') {
                     this.shapeLine(canvasDraw, actPoint.startX, actPoint.startY, actPoint.endX, actPoint.endY);
                 }
                 canvasDraw.fillStyle = tempFillStyle;
@@ -883,7 +1075,7 @@ var Draw = /** @class */ (function () {
                             this.shapeLine(canvasDraw, actPoint.startX, actPoint.startY, actPoint.endX, actPoint.endY);
                         }
                     }
-                    parent.activeObj = activeObj;
+                    parent.activeObj = actObj = activeObj;
                 }
                 else {
                     this.shapeLine(canvasDraw, actPoint.startX, actPoint.startY, actPoint.endX, actPoint.endY);
@@ -922,29 +1114,63 @@ var Draw = /** @class */ (function () {
     };
     Draw.prototype.updatePoints = function () {
         var parent = this.parent;
-        parent.activeObj.activePoint.startX += parent.img.destLeft;
-        parent.activeObj.activePoint.startY += parent.img.destTop;
-        parent.activeObj.activePoint.endX += parent.img.destLeft;
-        parent.activeObj.activePoint.endY += parent.img.destTop;
+        var actPoint = parent.activeObj.activePoint;
+        var _a = parent.img, destLeft = _a.destLeft, destTop = _a.destTop;
+        actPoint.startX += destLeft;
+        actPoint.startY += destTop;
+        actPoint.endX += destLeft;
+        actPoint.endY += destTop;
         parent.activeObj = this.updateWidthHeight(parent.activeObj);
     };
     Draw.prototype.updateWidthHeight = function (obj) {
-        obj.activePoint.width = obj.activePoint.endX - obj.activePoint.startX;
-        obj.activePoint.height = obj.activePoint.endY - obj.activePoint.startY;
+        var _a = obj.activePoint, startX = _a.startX, startY = _a.startY, endX = _a.endX, endY = _a.endY;
+        obj.activePoint.width = endX - startX;
+        obj.activePoint.height = endY - startY;
         return obj;
     };
+    Draw.prototype.drawCornerCircles = function (canvasDraw) {
+        var parent = this.parent;
+        var tempObj = parent.activeObj;
+        canvasDraw.beginPath();
+        canvasDraw.rect(tempObj.activePoint.startX, tempObj.activePoint.startY, tempObj.activePoint.width, tempObj.activePoint.height);
+        canvasDraw.stroke();
+        canvasDraw.closePath();
+        if (parent.selectionSettings.showCircle) {
+            var strokeColor = canvasDraw.strokeStyle;
+            var fillColor = canvasDraw.fillStyle;
+            canvasDraw.strokeStyle = parent.selectionSettings.strokeColor;
+            canvasDraw.fillStyle = parent.selectionSettings.fillColor;
+            canvasDraw.lineWidth *= 2;
+            canvasDraw.beginPath();
+            canvasDraw.moveTo(tempObj.topLeftCircle.startX, tempObj.topLeftCircle.startY);
+            canvasDraw.arc(tempObj.topLeftCircle.startX, tempObj.topLeftCircle.startY, tempObj.topLeftCircle.radius, 0, 2 * Math.PI);
+            canvasDraw.moveTo(tempObj.topRightCircle.startX, tempObj.topRightCircle.startY);
+            canvasDraw.arc(tempObj.topRightCircle.startX, tempObj.topRightCircle.startY, tempObj.topRightCircle.radius, 0, 2 * Math.PI);
+            canvasDraw.moveTo(tempObj.bottomLeftCircle.startX, tempObj.bottomLeftCircle.startY);
+            canvasDraw.arc(tempObj.bottomLeftCircle.startX, tempObj.bottomLeftCircle.startY, tempObj.bottomLeftCircle.radius, 0, 2 * Math.PI);
+            canvasDraw.moveTo(tempObj.bottomRightCircle.startX, tempObj.bottomRightCircle.startY);
+            canvasDraw.arc(tempObj.bottomRightCircle.startX, tempObj.bottomRightCircle.startY, tempObj.bottomRightCircle.radius, 0, 2 * Math.PI);
+            canvasDraw.stroke();
+            canvasDraw.fill();
+            canvasDraw.closePath();
+            canvasDraw.lineWidth /= 2;
+            canvasDraw.strokeStyle = strokeColor;
+            canvasDraw.fillStyle = fillColor;
+        }
+    };
     Draw.prototype.drawCenterCircles = function (canvasDraw) {
         var parent = this.parent;
         var actPoint = parent.activeObj.activePoint;
+        var actObj = parent.activeObj;
         canvasDraw.lineWidth *= 2;
         canvasDraw.beginPath();
-        if (parent.activeObj.shape === 'arrow' || parent.activeObj.shape === 'line') {
+        if (actObj.shape === 'arrow' || actObj.shape === 'line') {
             canvasDraw.moveTo(actPoint.startX, actPoint.startY);
-            canvasDraw.arc(actPoint.startX, actPoint.startY, parent.activeObj.topCenterCircle.radius, 0, 2 * Math.PI);
+            canvasDraw.arc(actPoint.startX, actPoint.startY, actObj.topCenterCircle.radius, 0, 2 * Math.PI);
             canvasDraw.moveTo(actPoint.endX, actPoint.endY);
-            canvasDraw.arc(actPoint.endX, actPoint.endY, parent.activeObj.bottomCenterCircle.radius, 0, 2 * Math.PI);
+            canvasDraw.arc(actPoint.endX, actPoint.endY, actObj.bottomCenterCircle.radius, 0, 2 * Math.PI);
         }
-        else if (parent.activeObj.shape === 'path') {
+        else if (actObj.shape === 'path') {
             var activeObj = extend({}, parent.activeObj, {}, true);
             if (activeObj.pointColl.length > 1) {
                 for (var i = 1, len = activeObj.pointColl.length; i < len; i++) {
@@ -953,33 +1179,32 @@ var Draw = /** @class */ (function () {
                     actPoint.endX = activeObj.pointColl[i].x;
                     actPoint.endY = activeObj.pointColl[i].y;
                     canvasDraw.moveTo(actPoint.startX, actPoint.startY);
-                    canvasDraw.arc(actPoint.startX, actPoint.startY, parent.activeObj.topCenterCircle.radius, 0, 2 * Math.PI);
+                    canvasDraw.arc(actPoint.startX, actPoint.startY, actObj.topCenterCircle.radius, 0, 2 * Math.PI);
                     canvasDraw.moveTo(actPoint.endX, actPoint.endY);
-                    canvasDraw.arc(actPoint.endX, actPoint.endY, parent.activeObj.bottomCenterCircle.radius, 0, 2 * Math.PI);
+                    canvasDraw.arc(actPoint.endX, actPoint.endY, actObj.bottomCenterCircle.radius, 0, 2 * Math.PI);
                 }
             }
             var obj = { shape: null };
             parent.notify('selection', { prop: 'getCurrentDrawingShape', value: { obj: obj } });
             if (obj['shape'] === 'path') {
-                parent.activeObj = activeObj;
+                parent.activeObj = actObj = activeObj;
             }
             canvasDraw.moveTo(actPoint.startX, actPoint.startY);
-            canvasDraw.arc(actPoint.startX, actPoint.startY, parent.activeObj.topCenterCircle.radius, 0, 2 * Math.PI);
+            canvasDraw.arc(actPoint.startX, actPoint.startY, actObj.topCenterCircle.radius, 0, 2 * Math.PI);
             canvasDraw.moveTo(actPoint.endX, actPoint.endY);
-            canvasDraw.arc(actPoint.endX, actPoint.endY, parent.activeObj.bottomCenterCircle.radius, 0, 2 * Math.PI);
+            canvasDraw.arc(actPoint.endX, actPoint.endY, actObj.bottomCenterCircle.radius, 0, 2 * Math.PI);
         }
         else {
             this.drawRotationArcLine(canvasDraw);
-            canvasDraw.lineTo(parent.activeObj.rotationCirclePoint.x, parent.activeObj.rotationCirclePoint.y);
+            canvasDraw.lineTo(actObj.rotationCirclePoint.x, actObj.rotationCirclePoint.y);
         }
         canvasDraw.stroke();
         canvasDraw.fill();
         canvasDraw.closePath();
-        if (parent.activeObj.shape !== 'arrow' && parent.activeObj.shape !== 'line' &&
-            parent.activeObj.shape !== 'path') {
+        if (actObj.shape !== 'arrow' && actObj.shape !== 'line' && actObj.shape !== 'path') {
             canvasDraw.beginPath();
-            canvasDraw.moveTo(parent.activeObj.rotationCirclePoint.x, parent.activeObj.rotationCirclePoint.y);
-            canvasDraw.arc(parent.activeObj.rotationCirclePoint.x, parent.activeObj.rotationCirclePoint.y, parent.activeObj.bottomCenterCircle.radius, 0, 2 * Math.PI);
+            canvasDraw.moveTo(actObj.rotationCirclePoint.x, actObj.rotationCirclePoint.y);
+            canvasDraw.arc(actObj.rotationCirclePoint.x, actObj.rotationCirclePoint.y, actObj.bottomCenterCircle.radius, 0, 2 * Math.PI);
             canvasDraw.stroke();
             canvasDraw.fill();
             canvasDraw.closePath();
@@ -988,27 +1213,29 @@ var Draw = /** @class */ (function () {
     };
     Draw.prototype.drawRotationArcLine = function (canvasDraw) {
         var parent = this.parent;
-        if (isNullOrUndefined(parent.activeObj.rotationCircleLine)) {
-            parent.activeObj.rotationCircleLine = 22.5;
+        var actObj = parent.activeObj;
+        if (isNullOrUndefined(actObj.rotationCircleLine)) {
+            actObj.rotationCircleLine = 22.5;
         }
         var degree;
         var isHorizontalflip = false;
         var isVerticalflip = false;
-        if (parent.activeObj.shapeDegree === 0) {
+        if (actObj.shapeDegree === 0) {
             degree = parent.transform.degree;
         }
         else {
-            degree = parent.transform.degree - parent.activeObj.shapeDegree;
+            degree = parent.transform.degree - actObj.shapeDegree;
         }
         if (degree < 0) {
             degree = 360 + degree;
         }
-        if (parent.activeObj.flipObjColl) {
-            for (var i = 0, len = parent.activeObj.flipObjColl.length; i < len; i++) {
-                if (parent.activeObj.flipObjColl[i].toLowerCase() === 'horizontal') {
+        if (actObj.flipObjColl) {
+            for (var i = 0, len = actObj.flipObjColl.length; i < len; i++) {
+                var flipStr = actObj.flipObjColl[i].toLowerCase();
+                if (flipStr === 'horizontal') {
                     isHorizontalflip = true;
                 }
-                else if (parent.activeObj.flipObjColl[i].toLowerCase() === 'vertical') {
+                else if (flipStr === 'vertical') {
                     isVerticalflip = true;
                 }
             }
@@ -1017,53 +1244,53 @@ var Draw = /** @class */ (function () {
             case 0:
             case 360:
                 if (isVerticalflip) {
-                    parent.activeObj.rotationCirclePoint = { x: parent.activeObj.topCenterCircle.startX,
-                        y: parent.activeObj.topCenterCircle.startY - parent.activeObj.rotationCircleLine };
-                    canvasDraw.moveTo(parent.activeObj.rotationCirclePoint.x, parent.activeObj.rotationCirclePoint.y + parent.activeObj.rotationCircleLine);
+                    actObj.rotationCirclePoint = { x: actObj.topCenterCircle.startX,
+                        y: actObj.topCenterCircle.startY - actObj.rotationCircleLine };
+                    canvasDraw.moveTo(actObj.rotationCirclePoint.x, actObj.rotationCirclePoint.y + actObj.rotationCircleLine);
                 }
                 else {
-                    parent.activeObj.rotationCirclePoint = { x: parent.activeObj.bottomCenterCircle.startX,
-                        y: parent.activeObj.bottomCenterCircle.startY + parent.activeObj.rotationCircleLine };
-                    canvasDraw.moveTo(parent.activeObj.rotationCirclePoint.x, parent.activeObj.rotationCirclePoint.y - parent.activeObj.rotationCircleLine);
+                    actObj.rotationCirclePoint = { x: actObj.bottomCenterCircle.startX,
+                        y: actObj.bottomCenterCircle.startY + actObj.rotationCircleLine };
+                    canvasDraw.moveTo(actObj.rotationCirclePoint.x, actObj.rotationCirclePoint.y - actObj.rotationCircleLine);
                 }
                 break;
             case 90:
             case -270:
                 if (isHorizontalflip) {
-                    parent.activeObj.rotationCirclePoint = { x: parent.activeObj.centerRightCircle.startX +
-                            parent.activeObj.rotationCircleLine, y: parent.activeObj.centerLeftCircle.startY };
-                    canvasDraw.moveTo(parent.activeObj.rotationCirclePoint.x - parent.activeObj.rotationCircleLine, parent.activeObj.rotationCirclePoint.y);
+                    actObj.rotationCirclePoint = { x: actObj.centerRightCircle.startX +
+                            actObj.rotationCircleLine, y: actObj.centerLeftCircle.startY };
+                    canvasDraw.moveTo(actObj.rotationCirclePoint.x - actObj.rotationCircleLine, actObj.rotationCirclePoint.y);
                 }
                 else {
-                    parent.activeObj.rotationCirclePoint = { x: parent.activeObj.centerLeftCircle.startX -
-                            parent.activeObj.rotationCircleLine, y: parent.activeObj.centerLeftCircle.startY };
-                    canvasDraw.moveTo(parent.activeObj.rotationCirclePoint.x + parent.activeObj.rotationCircleLine, parent.activeObj.rotationCirclePoint.y);
+                    actObj.rotationCirclePoint = { x: actObj.centerLeftCircle.startX -
+                            actObj.rotationCircleLine, y: actObj.centerLeftCircle.startY };
+                    canvasDraw.moveTo(actObj.rotationCirclePoint.x + actObj.rotationCircleLine, actObj.rotationCirclePoint.y);
                 }
                 break;
             case 180:
             case -180:
                 if (isVerticalflip) {
-                    parent.activeObj.rotationCirclePoint = { x: parent.activeObj.bottomCenterCircle.startX,
-                        y: parent.activeObj.bottomCenterCircle.startY + parent.activeObj.rotationCircleLine };
-                    canvasDraw.moveTo(parent.activeObj.rotationCirclePoint.x, parent.activeObj.rotationCirclePoint.y - parent.activeObj.rotationCircleLine);
+                    actObj.rotationCirclePoint = { x: actObj.bottomCenterCircle.startX,
+                        y: actObj.bottomCenterCircle.startY + actObj.rotationCircleLine };
+                    canvasDraw.moveTo(actObj.rotationCirclePoint.x, actObj.rotationCirclePoint.y - actObj.rotationCircleLine);
                 }
                 else {
-                    parent.activeObj.rotationCirclePoint = { x: parent.activeObj.topCenterCircle.startX,
-                        y: parent.activeObj.topCenterCircle.startY - parent.activeObj.rotationCircleLine };
-                    canvasDraw.moveTo(parent.activeObj.rotationCirclePoint.x, parent.activeObj.rotationCirclePoint.y + parent.activeObj.rotationCircleLine);
+                    actObj.rotationCirclePoint = { x: actObj.topCenterCircle.startX,
+                        y: actObj.topCenterCircle.startY - actObj.rotationCircleLine };
+                    canvasDraw.moveTo(actObj.rotationCirclePoint.x, actObj.rotationCirclePoint.y + actObj.rotationCircleLine);
                 }
                 break;
             case 270:
             case -90:
                 if (isHorizontalflip) {
-                    parent.activeObj.rotationCirclePoint = { x: parent.activeObj.centerLeftCircle.startX -
-                            parent.activeObj.rotationCircleLine, y: parent.activeObj.centerLeftCircle.startY };
-                    canvasDraw.moveTo(parent.activeObj.rotationCirclePoint.x + parent.activeObj.rotationCircleLine, parent.activeObj.rotationCirclePoint.y);
+                    actObj.rotationCirclePoint = { x: actObj.centerLeftCircle.startX -
+                            actObj.rotationCircleLine, y: actObj.centerLeftCircle.startY };
+                    canvasDraw.moveTo(actObj.rotationCirclePoint.x + actObj.rotationCircleLine, actObj.rotationCirclePoint.y);
                 }
                 else {
-                    parent.activeObj.rotationCirclePoint = { x: parent.activeObj.centerRightCircle.startX +
-                            parent.activeObj.rotationCircleLine, y: parent.activeObj.centerLeftCircle.startY };
-                    canvasDraw.moveTo(parent.activeObj.rotationCirclePoint.x - parent.activeObj.rotationCircleLine, parent.activeObj.rotationCirclePoint.y);
+                    actObj.rotationCirclePoint = { x: actObj.centerRightCircle.startX +
+                            actObj.rotationCircleLine, y: actObj.centerLeftCircle.startY };
+                    canvasDraw.moveTo(actObj.rotationCirclePoint.x - actObj.rotationCircleLine, actObj.rotationCirclePoint.y);
                 }
                 break;
         }
@@ -1071,55 +1298,56 @@ var Draw = /** @class */ (function () {
     Draw.prototype.drawSquareLines = function (canvasDraw) {
         var splitWords;
         var parent = this.parent;
-        var actPoint = parent.activeObj.activePoint;
-        if (parent.activeObj.shape !== undefined) {
-            splitWords = parent.activeObj.shape.split('-');
+        var actObj = parent.activeObj;
+        var _a = actObj.activePoint, startX = _a.startX, startY = _a.startY, width = _a.width, height = _a.height;
+        var _b = actObj.strokeSettings, fillColor = _b.fillColor, strokeColor = _b.strokeColor, strokeWidth = _b.strokeWidth;
+        if (actObj.shape) {
+            splitWords = actObj.shape.split('-');
         }
         if (splitWords[0] === 'crop') {
             canvasDraw.strokeStyle = '#fff';
         }
         else {
-            canvasDraw.strokeStyle = parent.activeObj.strokeSettings.strokeColor;
+            canvasDraw.strokeStyle = strokeColor;
         }
         canvasDraw.beginPath();
-        canvasDraw.rect(actPoint.startX, actPoint.startY, actPoint.width, actPoint.height);
-        if (parent.activeObj.strokeSettings.fillColor !== '') {
-            canvasDraw.fillStyle = parent.activeObj.strokeSettings.fillColor;
+        canvasDraw.rect(startX, startY, width, height);
+        if (fillColor !== '') {
+            canvasDraw.fillStyle = fillColor;
             canvasDraw.fill();
         }
-        canvasDraw.rect(actPoint.startX + parent.activeObj.strokeSettings.strokeWidth, actPoint.startY + parent.activeObj.strokeSettings.strokeWidth, actPoint.width - (2 * parent.activeObj.strokeSettings.strokeWidth), actPoint.height - (2 * parent.activeObj.strokeSettings.strokeWidth));
-        canvasDraw.fillStyle = parent.activeObj.strokeSettings.strokeColor;
+        canvasDraw.rect(startX + strokeWidth, startY + strokeWidth, width - (2 * strokeWidth), height - (2 * strokeWidth));
+        canvasDraw.fillStyle = strokeColor;
         canvasDraw.fill('evenodd');
         canvasDraw.closePath();
     };
     Draw.prototype.drawSelection = function (horLineWidth, verLineHeight) {
         var parent = this.parent;
-        var actPoint = parent.activeObj.activePoint;
+        var actObj = parent.activeObj;
+        var _a = actObj.activePoint, startX = _a.startX, startY = _a.startY, endX = _a.endX, endY = _a.endY;
         this.upperContext.strokeStyle = parent.themeColl[parent.theme]['primaryColor'];
         this.upperContext.beginPath();
-        parent.activeObj.horTopInnerLine = { startX: actPoint.startX, startY: actPoint.startY +
-                verLineHeight, endX: actPoint.endX, endY: actPoint.endY + verLineHeight };
-        parent.activeObj.horBottomInnerLine = { startX: actPoint.startX, startY: actPoint.startY + (2 * verLineHeight), endX: actPoint.endX, endY: actPoint.endY + (2 * verLineHeight) };
-        parent.activeObj.verLeftInnerLine = { startX: actPoint.startX + horLineWidth,
-            startY: actPoint.startY, endX: actPoint.startX + horLineWidth,
-            endY: actPoint.endY };
-        parent.activeObj.verRightInnerLine = { startX: actPoint.startX + (2 * horLineWidth),
-            startY: actPoint.startY, endX: actPoint.startX + (2 * horLineWidth),
-            endY: actPoint.endY };
-        this.upperContext.moveTo(parent.activeObj.horTopInnerLine.startX, parent.activeObj.horTopInnerLine.startY);
-        this.upperContext.lineTo(parent.activeObj.horTopInnerLine.endX, parent.activeObj.horTopInnerLine.startY);
-        this.upperContext.moveTo(parent.activeObj.horBottomInnerLine.startX, parent.activeObj.horBottomInnerLine.startY);
-        this.upperContext.lineTo(parent.activeObj.horBottomInnerLine.endX, parent.activeObj.horBottomInnerLine.startY);
-        this.upperContext.moveTo(parent.activeObj.verLeftInnerLine.startX, parent.activeObj.verLeftInnerLine.startY);
-        this.upperContext.lineTo(parent.activeObj.verLeftInnerLine.endX, parent.activeObj.verLeftInnerLine.endY);
-        this.upperContext.moveTo(parent.activeObj.verRightInnerLine.startX, parent.activeObj.verRightInnerLine.startY);
-        this.upperContext.lineTo(parent.activeObj.verRightInnerLine.endX, parent.activeObj.verRightInnerLine.endY);
+        actObj.horTopInnerLine = { startX: startX, startY: startY +
+                verLineHeight, endX: endX, endY: endY + verLineHeight };
+        actObj.horBottomInnerLine = { startX: startX, startY: startY + (2 * verLineHeight), endX: endX, endY: endY + (2 * verLineHeight) };
+        actObj.verLeftInnerLine = { startX: startX + horLineWidth,
+            startY: startY, endX: startX + horLineWidth, endY: endY };
+        actObj.verRightInnerLine = { startX: startX + (2 * horLineWidth),
+            startY: startY, endX: startX + (2 * horLineWidth), endY: endY };
+        this.upperContext.moveTo(actObj.horTopInnerLine.startX, actObj.horTopInnerLine.startY);
+        this.upperContext.lineTo(actObj.horTopInnerLine.endX, actObj.horTopInnerLine.startY);
+        this.upperContext.moveTo(actObj.horBottomInnerLine.startX, actObj.horBottomInnerLine.startY);
+        this.upperContext.lineTo(actObj.horBottomInnerLine.endX, actObj.horBottomInnerLine.startY);
+        this.upperContext.moveTo(actObj.verLeftInnerLine.startX, actObj.verLeftInnerLine.startY);
+        this.upperContext.lineTo(actObj.verLeftInnerLine.endX, actObj.verLeftInnerLine.endY);
+        this.upperContext.moveTo(actObj.verRightInnerLine.startX, actObj.verRightInnerLine.startY);
+        this.upperContext.lineTo(actObj.verRightInnerLine.endX, actObj.verRightInnerLine.endY);
         this.upperContext.stroke();
         this.upperContext.closePath();
     };
     Draw.prototype.shapeCircle = function (canvasDraw, selectionWidth, selectionHeight) {
         var parent = this.parent;
-        var actPoint = parent.activeObj.activePoint;
+        var _a = parent.activeObj.activePoint, startX = _a.startX, startY = _a.startY, endX = _a.endX, endY = _a.endY, width = _a.width;
         canvasDraw.strokeStyle = parent.themeColl[parent.theme]['primaryColor'];
         canvasDraw.clearRect(0, 0, parent.lowerCanvas.width, parent.lowerCanvas.height);
         canvasDraw.fillStyle = 'rgb(0, 0, 0, 0.25)';
@@ -1133,7 +1361,7 @@ var Draw = /** @class */ (function () {
         canvasDraw.closePath();
         canvasDraw.save();
         canvasDraw.beginPath();
-        canvasDraw.arc(((actPoint.endX - actPoint.startX) / 2) + actPoint.startX, ((actPoint.endY - actPoint.startY) / 2) + actPoint.startY, (actPoint.width / 2), 0, Math.PI * 2);
+        canvasDraw.arc(((endX - startX) / 2) + startX, ((endY - startY) / 2) + startY, (width / 2), 0, Math.PI * 2);
         canvasDraw.closePath();
         canvasDraw.clip();
         canvasDraw.clearRect(0, 0, parent.lowerCanvas.width, parent.lowerCanvas.height);
@@ -1168,258 +1396,262 @@ var Draw = /** @class */ (function () {
     };
     Draw.prototype.arrow = function (canvasDraw, start) {
         var parent = this.parent;
-        var actPoint = parent.activeObj.activePoint;
-        canvasDraw.lineWidth = (parent.activeObj.strokeSettings.strokeWidth);
+        var actObj = parent.activeObj;
+        var _a = actObj.activePoint, startX = _a.startX, startY = _a.startY, endX = _a.endX, endY = _a.endY;
+        var strWidth = actObj.strokeSettings.strokeWidth;
+        canvasDraw.lineWidth = strWidth;
         var x = this.arrowDimension['arrow']['width'];
         var y = this.arrowDimension['arrow']['height'];
         var point = this.manipulateSaveCtx(canvasDraw, x, y);
-        x = point.x + parent.activeObj.strokeSettings.strokeWidth;
-        y = point.y + parent.activeObj.strokeSettings.strokeWidth;
-        this.dx = actPoint.endX - actPoint.startX;
-        this.dy = actPoint.endY - actPoint.startY;
-        canvasDraw.fillStyle = parent.activeObj.strokeSettings.strokeColor;
+        x = point.x + strWidth;
+        y = point.y + strWidth;
+        this.dx = endX - startX;
+        this.dy = endY - startY;
+        canvasDraw.fillStyle = actObj.strokeSettings.strokeColor;
         var angle = Math.atan2(this.dy, this.dx);
-        if ((start && (parent.activeObj.triangleDirection === 'left' || parent.activeObj.triangleDirection === 'right')
-            && (parent.activeObj.start === 'arrow' && parent.activeObj.end === 'none')
-            || (parent.activeObj.start === 'arrow' && parent.activeObj.end !== 'circle'
-                && parent.activeObj.end !== 'square')) ||
-            (!start && (parent.activeObj.end === 'arrow' && parent.activeObj.start === 'none'
-                || parent.activeObj.start !== 'circle' && parent.activeObj.start !== 'square'))) {
-            this.shapeLine(canvasDraw, actPoint.startX, actPoint.startY, actPoint.endX, actPoint.endY);
-        }
-        if ((start && parent.activeObj.triangleDirection === 'left') ||
-            (!start && parent.activeObj.triangleDirection === 'right')) {
-            canvasDraw.translate(actPoint.endX, actPoint.endY);
+        var isStartArrow = actObj.start === 'arrow';
+        var isEndArrow = actObj.end === 'arrow';
+        var isEndCircleOrSquare = actObj.end === 'circle' || actObj.end === 'square';
+        if ((start && actObj.triangleDirection === 'left' || actObj.triangleDirection === 'right') &&
+            ((isStartArrow && actObj.end === 'none') || (isStartArrow && !isEndCircleOrSquare)) ||
+            (!start && (isEndArrow && actObj.start === 'none' || !isStartArrow && !isEndCircleOrSquare))) {
+            this.shapeLine(canvasDraw, startX, startY, endX, endY);
+        }
+        if ((start && actObj.triangleDirection === 'left') || (!start && actObj.triangleDirection === 'right')) {
+            canvasDraw.translate(endX, endY);
             canvasDraw.rotate(angle);
             this.shapeLine(canvasDraw, 0, 0, -x, y / 2);
             this.shapeLine(canvasDraw, 0, 0, -x, -y / 2);
             canvasDraw.rotate(-angle);
-            canvasDraw.translate(-actPoint.endX, -actPoint.endY);
+            canvasDraw.translate(-endX, -endY);
         }
-        else if ((start && parent.activeObj.triangleDirection === 'right') ||
-            (!start && parent.activeObj.triangleDirection === 'left')) {
-            canvasDraw.translate(actPoint.startX, actPoint.startY);
+        else if ((start && actObj.triangleDirection === 'right') || (!start && actObj.triangleDirection === 'left')) {
+            canvasDraw.translate(startX, startY);
             canvasDraw.rotate(angle);
             this.shapeLine(canvasDraw, 0, 0, x, y / 2);
             this.shapeLine(canvasDraw, 0, 0, x, -y / 2);
             canvasDraw.rotate(-angle);
-            canvasDraw.translate(-actPoint.startX, -actPoint.startY);
+            canvasDraw.translate(-startX, -startY);
         }
     };
     Draw.prototype.arrowSolid = function (canvasDraw, start) {
         var parent = this.parent;
-        var actPoint = parent.activeObj.activePoint;
+        var actObj = parent.activeObj;
+        var strWidth = actObj.strokeSettings.strokeWidth;
+        var _a = actObj.activePoint, startX = _a.startX, startY = _a.startY, endX = _a.endX, endY = _a.endY;
         var x = this.arrowDimension['arrowSolid']['width'];
         var y = this.arrowDimension['arrowSolid']['height'];
         var point = this.manipulateSaveCtx(canvasDraw, x, y);
-        x = point.x + parent.activeObj.strokeSettings.strokeWidth;
-        y = point.y + parent.activeObj.strokeSettings.strokeWidth;
-        this.dx = actPoint.endX - actPoint.startX;
-        this.dy = actPoint.endY - actPoint.startY;
+        x = point.x + strWidth;
+        y = point.y + strWidth;
+        this.dx = endX - startX;
+        this.dy = endY - startY;
         var angle = Math.atan2(this.dy, this.dx);
-        if ((start && (parent.activeObj.start === 'arrowSolid' && parent.activeObj.end === 'none')
-            || (parent.activeObj.start === 'arrowSolid' && parent.activeObj.end !== 'circle' && parent.activeObj.end !== 'square')) ||
-            (!start && (parent.activeObj.end === 'arrowSolid' && parent.activeObj.start === 'none'
-                || parent.activeObj.start !== 'circle' && parent.activeObj.start !== 'square'))) {
-            this.shapeLine(canvasDraw, actPoint.startX, actPoint.startY, actPoint.endX, actPoint.endY);
-        }
-        if ((start && parent.activeObj.triangleDirection === 'left') ||
-            (!start && parent.activeObj.triangleDirection === 'right')) {
-            canvasDraw.translate(actPoint.endX, actPoint.endY);
+        var isStartArrowSolid = actObj.start === 'arrowSolid';
+        var isEndArrowSolid = actObj.end === 'arrowSolid';
+        var isEndCircleOrSquare = actObj.end === 'circle' || actObj.end === 'square';
+        if ((start && (isStartArrowSolid && actObj.end === 'none') || (isStartArrowSolid && !isEndCircleOrSquare)) ||
+            (!start && (isEndArrowSolid && actObj.start === 'none' || !isStartArrowSolid && !isEndCircleOrSquare))) {
+            this.shapeLine(canvasDraw, startX, startY, endX, endY);
+        }
+        if ((start && actObj.triangleDirection === 'left') || (!start && actObj.triangleDirection === 'right')) {
+            canvasDraw.translate(endX, endY);
             canvasDraw.rotate(angle);
             canvasDraw.beginPath();
-            canvasDraw.moveTo(parent.activeObj.strokeSettings.strokeWidth, 0);
+            canvasDraw.moveTo(strWidth, 0);
             canvasDraw.lineTo(-x + y / 2, y / 2);
             canvasDraw.lineTo(-x + y / 2, -y / 2);
             canvasDraw.closePath();
             canvasDraw.fill();
             canvasDraw.rotate(-angle);
-            canvasDraw.translate(-actPoint.endX, -actPoint.endY);
-            parent.activeObj.rotatedAngle = angle;
+            canvasDraw.translate(-endX, -endY);
+            actObj.rotatedAngle = angle;
         }
-        else if ((start && parent.activeObj.triangleDirection === 'right') ||
-            (!start && parent.activeObj.triangleDirection === 'left')) {
-            canvasDraw.translate(actPoint.startX, actPoint.startY);
+        else if ((start && actObj.triangleDirection === 'right') || (!start && actObj.triangleDirection === 'left')) {
+            canvasDraw.translate(startX, startY);
             canvasDraw.rotate(angle);
             canvasDraw.beginPath();
-            canvasDraw.moveTo(0 - parent.activeObj.strokeSettings.strokeWidth, 0);
+            canvasDraw.moveTo(0 - strWidth, 0);
             canvasDraw.lineTo(x - y / 2, y / 2);
             canvasDraw.lineTo(x - y / 2, -y / 2);
             canvasDraw.closePath();
             canvasDraw.fill();
             canvasDraw.rotate(-angle);
-            canvasDraw.translate(-actPoint.startX, -actPoint.startY);
-            parent.activeObj.rotatedAngle = angle;
+            canvasDraw.translate(-startX, -startY);
+            actObj.rotatedAngle = angle;
         }
     };
     Draw.prototype.arrowSquareStart = function (canvasDraw) {
         var parent = this.parent;
-        var actPoint = parent.activeObj.activePoint;
-        if ((parent.activeObj.start === 'square' && parent.activeObj.end === 'none')
-            || (parent.activeObj.start === 'square' && parent.activeObj.end !== 'circle'
-                && parent.activeObj.start !== 'square') || (parent.activeObj.start === 'squareSolid' && parent.activeObj.end === 'circleSolid')) {
-            this.shapeLine(canvasDraw, actPoint.startX, actPoint.startY, actPoint.endX, actPoint.endY);
-        }
-        canvasDraw.lineWidth = (parent.activeObj.strokeSettings.strokeWidth);
+        var actObj = parent.activeObj;
+        var strWidth = actObj.strokeSettings.strokeWidth;
+        var _a = actObj.activePoint, startX = _a.startX, startY = _a.startY, endX = _a.endX, endY = _a.endY;
+        var isStartSquare = actObj.start === 'square';
+        var isEndCircle = actObj.end === 'circle';
+        var isStartSquareSolid = actObj.start === 'squareSolid';
+        var isEndCircleSolid = actObj.end === 'circleSolid';
+        if ((isStartSquare && actObj.end === 'none') || (isStartSquare && !isEndCircle && actObj.start !== 'square') ||
+            (isStartSquareSolid && isEndCircleSolid)) {
+            this.shapeLine(canvasDraw, startX, startY, endX, endY);
+        }
+        canvasDraw.lineWidth = (strWidth);
         canvasDraw.beginPath();
-        canvasDraw.fillStyle = parent.activeObj.strokeSettings.strokeColor;
+        canvasDraw.fillStyle = actObj.strokeSettings.strokeColor;
         var x = this.arrowDimension['square']['width'];
         var y = this.arrowDimension['square']['height'];
         var point = this.manipulateSaveCtx(canvasDraw, x, y);
-        x = point.x + parent.activeObj.strokeSettings.strokeWidth;
-        y = point.y + parent.activeObj.strokeSettings.strokeWidth;
-        this.dx = actPoint.endX - actPoint.startX;
-        this.dy = actPoint.endY - actPoint.startY;
+        x = point.x + strWidth;
+        y = point.y + strWidth;
+        this.dx = endX - startX;
+        this.dy = endY - startY;
         var angle = Math.atan2(this.dy, this.dx);
-        if (parent.activeObj.triangleDirection === 'left') {
-            canvasDraw.translate(actPoint.endX, actPoint.endY);
+        if (actObj.triangleDirection === 'left') {
+            canvasDraw.translate(endX, endY);
             canvasDraw.rotate(angle);
-            if (parent.activeObj.start === 'squareSolid') {
+            if (actObj.start === 'squareSolid') {
                 canvasDraw.fillRect(-x + y / 2, -y / 2, x, y);
             }
             canvasDraw.strokeRect(-x + y / 2, -y / 2, x, y);
             canvasDraw.rotate(-angle);
-            canvasDraw.translate(-actPoint.endX, -actPoint.endY);
-            this.squareStartIntersectX1 = actPoint.endX - (y / 2) * Math.cos(angle);
-            this.squareStartIntersectY1 = actPoint.endY - (y / 2) * Math.sin(angle);
-            if (parent.activeObj.start === 'square' && parent.activeObj.end !== 'square'
-                && parent.activeObj.end !== 'circle' && parent.activeObj.end !== 'square') {
-                this.shapeLine(canvasDraw, actPoint.startX, actPoint.startY, this.squareStartIntersectX1, this.squareStartIntersectY1);
-            }
-            if (parent.activeObj.start === 'square' && parent.activeObj.end === 'circle') {
+            canvasDraw.translate(-endX, -endY);
+            this.squareStartIntersectX1 = endX - (y / 2) * Math.cos(angle);
+            this.squareStartIntersectY1 = endY - (y / 2) * Math.sin(angle);
+            if (actObj.start === 'square' && actObj.end !== 'square' && actObj.end !== 'circle') {
+                this.shapeLine(canvasDraw, startX, startY, this.squareStartIntersectX1, this.squareStartIntersectY1);
+            }
+            else if (actObj.start === 'square' && actObj.end === 'circle') {
                 this.shapeLine(canvasDraw, this.endCircleIntersectX1, this.endCircleIntersectY1, this.squareStartIntersectX1, this.squareStartIntersectY1);
             }
-            if (parent.activeObj.start === 'squareSolid' && parent.activeObj.end === 'squareSolid') {
-                this.shapeLine(canvasDraw, actPoint.startX, actPoint.startY, actPoint.endX, actPoint.endY);
+            else if (actObj.start === 'squareSolid' && actObj.end === 'squareSolid') {
+                this.shapeLine(canvasDraw, startX, startY, endX, endY);
             }
         }
-        else if (parent.activeObj.triangleDirection === 'right') {
-            canvasDraw.lineWidth = (parent.activeObj.strokeSettings.strokeWidth);
-            canvasDraw.fillStyle = parent.activeObj.strokeSettings.strokeColor;
-            if (parent.activeObj.start === 'squareSolid' && parent.activeObj.end === 'squareSolid') {
-                this.shapeLine(canvasDraw, actPoint.startX, actPoint.startY, actPoint.endX, actPoint.endY);
+        else if (actObj.triangleDirection === 'right') {
+            canvasDraw.lineWidth = (strWidth);
+            canvasDraw.fillStyle = actObj.strokeSettings.strokeColor;
+            if (actObj.start === 'squareSolid' && actObj.end === 'squareSolid') {
+                this.shapeLine(canvasDraw, startX, startY, endX, endY);
             }
-            canvasDraw.translate(actPoint.startX, actPoint.startY);
+            canvasDraw.translate(startX, startY);
             canvasDraw.rotate(angle);
-            if (parent.activeObj.start === 'squareSolid') {
+            if (actObj.start === 'squareSolid') {
                 canvasDraw.fillRect(y / 2 - x, -y / 2, x, y);
             }
             canvasDraw.strokeRect(y / 2 - x, -y / 2, x, y);
             canvasDraw.rotate(-angle);
-            canvasDraw.translate(-actPoint.startX, -actPoint.startY);
-            parent.activeObj.rotatedAngle = angle;
-            this.squareStartIntersectX1 = actPoint.startX + (y / 2) * Math.cos(angle);
-            this.squareStartIntersectY1 = actPoint.startY + (y / 2) * Math.sin(angle);
-            if (parent.activeObj.start === 'square' && parent.activeObj.end !== 'square'
-                && parent.activeObj.end !== 'circle' && parent.activeObj.end !== 'square') {
-                this.shapeLine(canvasDraw, actPoint.endX, actPoint.endY, this.squareStartIntersectX1, this.squareStartIntersectY1);
-            }
-            if (parent.activeObj.start === 'square' && parent.activeObj.end === 'circle') {
+            canvasDraw.translate(-startX, -startY);
+            actObj.rotatedAngle = angle;
+            this.squareStartIntersectX1 = startX + (y / 2) * Math.cos(angle);
+            this.squareStartIntersectY1 = startY + (y / 2) * Math.sin(angle);
+            if (actObj.start === 'square' && actObj.end !== 'square' && actObj.end !== 'circle') {
+                this.shapeLine(canvasDraw, endX, endY, this.squareStartIntersectX1, this.squareStartIntersectY1);
+            }
+            if (actObj.start === 'square' && actObj.end === 'circle') {
                 this.shapeLine(canvasDraw, this.endCircleIntersectX1, this.endCircleIntersectY1, this.squareStartIntersectX1, this.squareStartIntersectY1);
             }
         }
     };
     Draw.prototype.arrowSquareEnd = function (canvasDraw) {
         var parent = this.parent;
-        var actPoint = parent.activeObj.activePoint;
+        var actObj = parent.activeObj;
+        var _a = actObj.activePoint, startX = _a.startX, startY = _a.startY, endX = _a.endX, endY = _a.endY;
+        var strWidth = actObj.strokeSettings.strokeWidth;
         var x = this.arrowDimension['square']['width'];
         var y = this.arrowDimension['square']['height'];
         var point = this.manipulateSaveCtx(canvasDraw, x, y);
-        x = point.x + parent.activeObj.strokeSettings.strokeWidth;
-        y = point.y + parent.activeObj.strokeSettings.strokeWidth;
-        this.dx = actPoint.endX - actPoint.startX;
-        this.dy = actPoint.endY - actPoint.startY;
+        x = point.x + strWidth;
+        y = point.y + strWidth;
+        this.dx = endX - startX;
+        this.dy = endY - startY;
         var angle = Math.atan2(this.dy, this.dx);
-        canvasDraw.lineWidth = (parent.activeObj.strokeSettings.strokeWidth);
-        if (parent.activeObj.triangleDirection === 'right') {
-            canvasDraw.fillStyle = parent.activeObj.strokeSettings.strokeColor;
-            if (parent.activeObj.end === 'squareSolid' && parent.activeObj.start === 'none') {
-                this.shapeLine(canvasDraw, actPoint.startX, actPoint.startY, actPoint.endX, actPoint.endY);
+        canvasDraw.lineWidth = (strWidth);
+        if (actObj.triangleDirection === 'right') {
+            canvasDraw.fillStyle = actObj.strokeSettings.strokeColor;
+            if (actObj.end === 'squareSolid' && actObj.start === 'none') {
+                this.shapeLine(canvasDraw, startX, startY, endX, endY);
             }
-            canvasDraw.translate(actPoint.endX, actPoint.endY);
+            canvasDraw.translate(endX, endY);
             canvasDraw.rotate(angle);
-            if (parent.activeObj.end === 'squareSolid') {
+            if (actObj.end === 'squareSolid') {
                 canvasDraw.fillRect(-x + y / 2, -y / 2, x, y);
             }
             canvasDraw.strokeRect(-x + y / 2, -y / 2, x, y);
             canvasDraw.rotate(-angle);
-            canvasDraw.translate(-actPoint.endX, -actPoint.endY);
-            parent.activeObj.rotatedAngle = angle;
-            this.squareEndIntersectX1 = actPoint.endX - (y / 2) * Math.cos(angle);
-            this.squareEndIntersectY1 = actPoint.endY - (y / 2) * Math.sin(angle);
-            if (parent.activeObj.end === 'square' && parent.activeObj.start !== 'square' && parent.activeObj.start !== 'circle'
-                && parent.activeObj.end === 'square') {
-                this.shapeLine(canvasDraw, actPoint.startX, actPoint.startY, this.squareEndIntersectX1, this.squareEndIntersectY1);
-            }
-            else if ((parent.activeObj.start === 'circle') && parent.activeObj.end === 'square') {
+            canvasDraw.translate(-endX, -endY);
+            actObj.rotatedAngle = angle;
+            this.squareEndIntersectX1 = endX - (y / 2) * Math.cos(angle);
+            this.squareEndIntersectY1 = endY - (y / 2) * Math.sin(angle);
+            if (actObj.end === 'square' && actObj.start !== 'square' && actObj.start !== 'circle') {
+                this.shapeLine(canvasDraw, startX, startY, this.squareEndIntersectX1, this.squareEndIntersectY1);
+            }
+            else if (actObj.start === 'circle' && actObj.end === 'square') {
                 this.shapeLine(canvasDraw, this.squareEndIntersectX1, this.squareEndIntersectY1, this.startCircleIntersectX1, this.startCircleIntersectY1);
             }
-            else if ((parent.activeObj.start === 'square') && parent.activeObj.end === 'square') {
+            else if (actObj.start === 'square' && actObj.end === 'square') {
                 this.shapeLine(canvasDraw, this.squareEndIntersectX1, this.squareEndIntersectY1, this.squareStartIntersectX1, this.squareStartIntersectY1);
             }
         }
-        else if (parent.activeObj.triangleDirection === 'left') {
-            canvasDraw.translate(actPoint.startX, actPoint.startY);
+        else if (actObj.triangleDirection === 'left') {
+            canvasDraw.translate(startX, startY);
             canvasDraw.rotate(angle);
-            if (parent.activeObj.end === 'squareSolid') {
+            if (actObj.end === 'squareSolid') {
                 canvasDraw.fillRect(y / 2 - x, -y / 2, x, y);
             }
             canvasDraw.strokeRect(y / 2 - x, -y / 2, x, y);
             canvasDraw.rotate(-angle);
-            canvasDraw.translate(-actPoint.startX, -actPoint.startY);
-            parent.activeObj.rotatedAngle = angle;
-            this.squareEndIntersectX1 = actPoint.startX + (y / 2) * Math.cos(angle);
-            this.squareEndIntersectY1 = actPoint.startY + (y / 2) * Math.sin(angle);
-            if (parent.activeObj.end === 'square' && parent.activeObj.start !== 'square' &&
-                parent.activeObj.start !== 'circle' && parent.activeObj.end === 'square') {
-                this.shapeLine(canvasDraw, actPoint.endX, actPoint.endY, this.squareEndIntersectX1, this.squareEndIntersectY1);
-            }
-            else if ((parent.activeObj.start === 'circle') && parent.activeObj.end === 'square') {
+            canvasDraw.translate(-startX, -startY);
+            actObj.rotatedAngle = angle;
+            this.squareEndIntersectX1 = startX + (y / 2) * Math.cos(angle);
+            this.squareEndIntersectY1 = startY + (y / 2) * Math.sin(angle);
+            if (actObj.end === 'square' && actObj.start !== 'square' && actObj.start !== 'circle') {
+                this.shapeLine(canvasDraw, endX, endY, this.squareEndIntersectX1, this.squareEndIntersectY1);
+            }
+            else if (actObj.start === 'circle' && actObj.end === 'square') {
                 this.shapeLine(canvasDraw, this.squareEndIntersectX1, this.squareEndIntersectY1, this.startCircleIntersectX1, this.startCircleIntersectY1);
             }
-            else if ((parent.activeObj.start === 'square') && parent.activeObj.end === 'square') {
+            else if (actObj.start === 'square' && actObj.end === 'square') {
                 this.shapeLine(canvasDraw, this.squareEndIntersectX1, this.squareEndIntersectY1, this.squareStartIntersectX1, this.squareStartIntersectY1);
             }
         }
     };
     Draw.prototype.arrowCircle = function (canvasDraw, start) {
         var parent = this.parent;
-        var actPoint = parent.activeObj.activePoint;
-        if ((start && parent.activeObj.triangleDirection === 'left') ||
-            (!start && parent.activeObj.triangleDirection === 'right')) {
-            canvasDraw.lineWidth = (parent.activeObj.strokeSettings.strokeWidth);
+        var actObj = parent.activeObj;
+        var _a = actObj.activePoint, startX = _a.startX, startY = _a.startY, endX = _a.endX, endY = _a.endY;
+        var strWidth = actObj.strokeSettings.strokeWidth;
+        if ((start && actObj.triangleDirection === 'left') ||
+            (!start && actObj.triangleDirection === 'right')) {
+            canvasDraw.lineWidth = strWidth;
             var circleRadius = this.arrowDimension['circle']['width'];
             var point = this.manipulateSaveCtx(canvasDraw, circleRadius, null);
-            circleRadius = point.x + parent.activeObj.strokeSettings.strokeWidth;
+            circleRadius = point.x + strWidth;
             canvasDraw.beginPath();
-            canvasDraw.arc(actPoint.endX, actPoint.endY, circleRadius, 0, 2 * Math.PI);
+            canvasDraw.arc(endX, endY, circleRadius, 0, 2 * Math.PI);
             canvasDraw.stroke();
             canvasDraw.closePath();
-            this.dx = actPoint.endX - actPoint.startX;
-            this.dy = actPoint.endY - actPoint.startY;
+            this.dx = endX - startX;
+            this.dy = endY - startY;
             var a = this.dx * this.dx + this.dy * this.dy;
-            var b = 2 * (this.dx * (actPoint.startX - actPoint.endX) + this.dy * (actPoint.startY - actPoint.endY));
-            var c = (actPoint.startX - actPoint.endX) *
-                (actPoint.startX - actPoint.endX) +
-                (actPoint.startY - actPoint.endY) *
-                    (actPoint.startY - actPoint.endY) - circleRadius * circleRadius;
+            var b = 2 * (this.dx * (startX - endX) + this.dy * (startY - endY));
+            var c = (startX - endX) * (startX - endX) + (startY - endY) *
+                (startY - endY) - circleRadius * circleRadius;
             var intersect = b * b - 4 * a * c;
             if (intersect >= 0) {
-                canvasDraw.fillStyle = parent.activeObj.strokeSettings.strokeColor;
+                canvasDraw.fillStyle = actObj.strokeSettings.strokeColor;
                 var t2 = (-b - Math.sqrt(intersect)) / (2 * a);
-                var intersectionX1 = actPoint.startX + this.dx * t2;
-                var intersectionY1 = actPoint.startY + this.dy * t2;
+                var intersectionX1 = startX + this.dx * t2;
+                var intersectionY1 = startY + this.dy * t2;
                 if (start) {
                     this.startCircleIntersectX1 = intersectionX1;
                     this.startCircleIntersectY1 = intersectionY1;
                     canvasDraw.beginPath();
                     canvasDraw.fill();
                     canvasDraw.beginPath();
-                    if (parent.activeObj.start === 'circle' && parent.activeObj.end === 'circle') {
+                    if (actObj.start === 'circle' && actObj.end === 'circle') {
                         this.shapeLine(canvasDraw, this.startCircleIntersectX1, this.startCircleIntersectY1, this.endCircleIntersectX1, this.endCircleIntersectY1);
                     }
-                    else if (parent.activeObj.start === 'circle' && parent.activeObj.end !== 'circle' && parent.activeObj.end !== 'square') {
-                        this.shapeLine(canvasDraw, actPoint.startX, actPoint.startY, this.startCircleIntersectX1, this.startCircleIntersectY1);
+                    else if (actObj.start === 'circle' && actObj.end !== 'circle' && actObj.end !== 'square') {
+                        this.shapeLine(canvasDraw, startX, startY, this.startCircleIntersectX1, this.startCircleIntersectY1);
                     }
                     canvasDraw.stroke();
                     canvasDraw.closePath();
@@ -1427,47 +1659,44 @@ var Draw = /** @class */ (function () {
                 else {
                     this.endCircleIntersectX1 = intersectionX1;
                     this.endCircleIntersectY1 = intersectionY1;
-                    if (parent.activeObj.end === 'circle' && (parent.activeObj.start !== 'circle' && parent.activeObj.start !== 'square')) {
-                        this.shapeLine(canvasDraw, actPoint.startX, actPoint.startY, this.endCircleIntersectX1, this.endCircleIntersectY1);
+                    if (actObj.end === 'circle' && (actObj.start !== 'circle' && actObj.start !== 'square')) {
+                        this.shapeLine(canvasDraw, startX, startY, this.endCircleIntersectX1, this.endCircleIntersectY1);
                     }
                 }
             }
             var angle = Math.atan2(this.dy, this.dx);
             parent.activeObj.rotatedAngle = angle;
         }
-        else if ((start && parent.activeObj.triangleDirection === 'right') ||
-            (!start && parent.activeObj.triangleDirection === 'left')) {
-            canvasDraw.lineWidth = (parent.activeObj.strokeSettings.strokeWidth);
+        else if ((start && actObj.triangleDirection === 'right') ||
+            (!start && actObj.triangleDirection === 'left')) {
+            canvasDraw.lineWidth = strWidth;
             var circleRadius = this.arrowDimension['circle']['width'];
             var point = this.manipulateSaveCtx(canvasDraw, circleRadius, null);
-            circleRadius = point.x + parent.activeObj.strokeSettings.strokeWidth;
+            circleRadius = point.x + strWidth;
             canvasDraw.beginPath();
-            canvasDraw.arc(actPoint.startX, actPoint.startY, circleRadius, 0, 2 * Math.PI);
+            canvasDraw.arc(startX, startY, circleRadius, 0, 2 * Math.PI);
             canvasDraw.stroke();
             canvasDraw.closePath();
-            this.dx = actPoint.startX - actPoint.endX;
-            this.dy = actPoint.startY - actPoint.endY;
+            this.dx = startX - endX;
+            this.dy = startY - endY;
             var a = this.dx * this.dx + this.dy * this.dy;
-            var b = 2 * (this.dx * (actPoint.endX - actPoint.startX) +
-                this.dy * (actPoint.endY - actPoint.startY));
-            var c = (actPoint.endX - actPoint.startX) *
-                (actPoint.endX - actPoint.startX) +
-                (actPoint.endY - actPoint.startY) *
-                    (actPoint.endY - actPoint.startY) - circleRadius * circleRadius;
+            var b = 2 * (this.dx * (endX - startX) + this.dy * (endY - startY));
+            var c = (endX - startX) * (endX - startX) + (endY - startY) *
+                (endY - startY) - circleRadius * circleRadius;
             var intersect = b * b - 4 * a * c;
             if (intersect >= 0) {
-                canvasDraw.fillStyle = parent.activeObj.strokeSettings.strokeColor;
+                canvasDraw.fillStyle = actObj.strokeSettings.strokeColor;
                 var t2 = (-b - Math.sqrt(intersect)) / (2 * a);
-                var intersectionX1 = actPoint.endX + this.dx * t2;
-                var intersectionY1 = actPoint.endY + this.dy * t2;
+                var intersectionX1 = endX + this.dx * t2;
+                var intersectionY1 = endY + this.dy * t2;
                 if (start) {
                     this.startCircleIntersectX1 = intersectionX1;
                     this.startCircleIntersectY1 = intersectionY1;
-                    if (parent.activeObj.start === 'circle' && parent.activeObj.end === 'circle') {
+                    if (actObj.start === 'circle' && actObj.end === 'circle') {
                         this.shapeLine(canvasDraw, this.endCircleIntersectX1, this.endCircleIntersectY1, this.startCircleIntersectX1, this.startCircleIntersectY1);
                     }
-                    else if (parent.activeObj.start === 'circle' && parent.activeObj.end !== 'circle' && parent.activeObj.end !== 'square') {
-                        this.shapeLine(canvasDraw, actPoint.endX, actPoint.endY, this.startCircleIntersectX1, this.startCircleIntersectY1);
+                    else if (actObj.start === 'circle' && actObj.end !== 'circle' && actObj.end !== 'square') {
+                        this.shapeLine(canvasDraw, endX, endY, this.startCircleIntersectX1, this.startCircleIntersectY1);
                     }
                 }
                 else {
@@ -1476,8 +1705,8 @@ var Draw = /** @class */ (function () {
                     canvasDraw.beginPath();
                     canvasDraw.fill();
                     canvasDraw.beginPath();
-                    if (parent.activeObj.end === 'circle' && (parent.activeObj.start !== 'circle' && parent.activeObj.start !== 'square')) {
-                        this.shapeLine(canvasDraw, actPoint.endX, actPoint.endY, this.endCircleIntersectX1, this.endCircleIntersectY1);
+                    if (actObj.end === 'circle' && (actObj.start !== 'circle' && actObj.start !== 'square')) {
+                        this.shapeLine(canvasDraw, endX, endY, this.endCircleIntersectX1, this.endCircleIntersectY1);
                     }
                 }
             }
@@ -1487,121 +1716,122 @@ var Draw = /** @class */ (function () {
     };
     Draw.prototype.arrowCircleSolid = function (canvasDraw, start) {
         var parent = this.parent;
-        var actPoint = parent.activeObj.activePoint;
-        if ((start && parent.activeObj.triangleDirection === 'left') ||
-            (!start && parent.activeObj.triangleDirection === 'right')) {
-            canvasDraw.lineWidth = (parent.activeObj.strokeSettings.strokeWidth);
+        var actObj = parent.activeObj;
+        var _a = actObj.activePoint, startX = _a.startX, startY = _a.startY, endX = _a.endX, endY = _a.endY;
+        var isStartCircleSolid = actObj.start === 'circleSolid';
+        var strWidth = actObj.strokeSettings.strokeWidth;
+        if ((start && actObj.triangleDirection === 'left') || (!start && actObj.triangleDirection === 'right')) {
+            canvasDraw.lineWidth = strWidth;
             canvasDraw.beginPath();
-            canvasDraw.fillStyle = parent.activeObj.strokeSettings.strokeColor;
-            if ((start && (parent.activeObj.start === 'circleSolid' && parent.activeObj.end === 'none') ||
-                (parent.activeObj.start === 'circleSolid' && parent.activeObj.end !== 'circle' && parent.activeObj.end !== 'square')) ||
-                (!start && (parent.activeObj.end === 'circleSolid' && parent.activeObj.start === 'none'))) {
-                this.shapeLine(canvasDraw, actPoint.startX, actPoint.startY, actPoint.endX, actPoint.endY);
+            canvasDraw.fillStyle = actObj.strokeSettings.strokeColor;
+            if ((start && (isStartCircleSolid && actObj.end === 'none') ||
+                (isStartCircleSolid && actObj.end !== 'circle' && actObj.end !== 'square')) ||
+                (!start && (actObj.end === 'circleSolid' && actObj.start === 'none'))) {
+                this.shapeLine(canvasDraw, startX, startY, endX, endY);
             }
             var circleRadius = this.arrowDimension['circle']['width'];
             var point = this.manipulateSaveCtx(canvasDraw, circleRadius, null);
-            circleRadius = point.x + parent.activeObj.strokeSettings.strokeWidth;
-            this.dx = actPoint.endX - actPoint.startX;
-            this.dy = actPoint.endY - actPoint.startY;
+            circleRadius = point.x + strWidth;
+            this.dx = endX - startX;
+            this.dy = endY - startY;
             canvasDraw.save();
             canvasDraw.beginPath();
-            canvasDraw.arc(actPoint.endX, actPoint.endY, circleRadius, 0, 2 * Math.PI);
+            canvasDraw.arc(endX, endY, circleRadius, 0, 2 * Math.PI);
             canvasDraw.stroke();
             canvasDraw.fill();
             canvasDraw.closePath();
-            parent.activeObj.rotatedAngle = Math.atan2(this.dy, this.dx);
+            actObj.rotatedAngle = Math.atan2(this.dy, this.dx);
         }
-        else if ((start && parent.activeObj.triangleDirection === 'right') ||
-            (!start && parent.activeObj.triangleDirection === 'left')) {
-            canvasDraw.lineWidth = (parent.activeObj.strokeSettings.strokeWidth);
+        else if ((start && actObj.triangleDirection === 'right') || (!start && actObj.triangleDirection === 'left')) {
+            canvasDraw.lineWidth = strWidth;
             canvasDraw.beginPath();
-            canvasDraw.fillStyle = parent.activeObj.strokeSettings.strokeColor;
-            if ((start && (parent.activeObj.start === 'circleSolid' && parent.activeObj.end === 'none') ||
-                (parent.activeObj.start === 'circleSolid' && parent.activeObj.end !== 'circle' && parent.activeObj.end !== 'square')) ||
-                !start && (parent.activeObj.end === 'circleSolid' && parent.activeObj.start === 'none')) {
-                this.shapeLine(canvasDraw, actPoint.startX, actPoint.startY, actPoint.endX, actPoint.endY);
+            canvasDraw.fillStyle = actObj.strokeSettings.strokeColor;
+            if ((start && (isStartCircleSolid && actObj.end === 'none') ||
+                (isStartCircleSolid && actObj.end !== 'circle' && actObj.end !== 'square')) ||
+                !start && (actObj.end === 'circleSolid' && actObj.start === 'none')) {
+                this.shapeLine(canvasDraw, startX, startY, endX, endY);
             }
             var circleRadius = this.arrowDimension['circle']['width'];
             var point = this.manipulateSaveCtx(canvasDraw, circleRadius, null);
-            circleRadius = point.x + parent.activeObj.strokeSettings.strokeWidth;
-            this.dx = actPoint.endX - actPoint.startX;
-            this.dy = actPoint.endY - actPoint.startY;
+            circleRadius = point.x + strWidth;
+            this.dx = endX - startX;
+            this.dy = endY - startY;
             canvasDraw.save();
             canvasDraw.beginPath();
-            canvasDraw.arc(actPoint.startX, actPoint.startY, circleRadius, 0, 2 * Math.PI);
+            canvasDraw.arc(startX, startY, circleRadius, 0, 2 * Math.PI);
             canvasDraw.stroke();
             canvasDraw.fill();
             canvasDraw.closePath();
-            parent.activeObj.rotatedAngle = Math.atan2(this.dy, this.dx);
+            actObj.rotatedAngle = Math.atan2(this.dy, this.dx);
         }
     };
     Draw.prototype.arrowBar = function (canvasDraw, start) {
         var parent = this.parent;
-        var actPoint = parent.activeObj.activePoint;
-        if ((start && parent.activeObj.triangleDirection === 'left') ||
-            (!start && parent.activeObj.triangleDirection === 'right')) {
-            canvasDraw.lineWidth = (parent.activeObj.strokeSettings.strokeWidth);
+        var actObj = parent.activeObj;
+        var _a = actObj.activePoint, startX = _a.startX, startY = _a.startY, endX = _a.endX, endY = _a.endY;
+        var strWidth = actObj.strokeSettings.strokeWidth;
+        if ((start && actObj.triangleDirection === 'left') || (!start && actObj.triangleDirection === 'right')) {
+            canvasDraw.lineWidth = strWidth;
             canvasDraw.beginPath();
-            canvasDraw.fillStyle = parent.activeObj.strokeSettings.strokeColor;
-            if ((start && (parent.activeObj.start === 'bar' && parent.activeObj.end === 'none') ||
-                (parent.activeObj.start === 'bar' && (parent.activeObj.end !== 'circle' && parent.activeObj.end !== 'square'))) ||
-                (!start && ((parent.activeObj.end === 'bar' && parent.activeObj.start === 'none') ||
-                    (parent.activeObj.end === 'bar' && (parent.activeObj.start !== 'circle' && parent.activeObj.start !== 'square'))))) {
-                this.shapeLine(canvasDraw, actPoint.startX, actPoint.startY, actPoint.endX, actPoint.endY);
+            canvasDraw.fillStyle = actObj.strokeSettings.strokeColor;
+            if ((start && (actObj.start === 'bar' && actObj.end === 'none') ||
+                (actObj.start === 'bar' && (actObj.end !== 'circle' && actObj.end !== 'square'))) ||
+                (!start && ((actObj.end === 'bar' && actObj.start === 'none') ||
+                    (actObj.end === 'bar' && (actObj.start !== 'circle' && actObj.start !== 'square'))))) {
+                this.shapeLine(canvasDraw, startX, startY, endX, endY);
             }
             var x = this.arrowDimension['bar']['width'];
             var y = this.arrowDimension['bar']['height'];
             var point = this.manipulateSaveCtx(canvasDraw, x, y);
-            x = point.x + parent.activeObj.strokeSettings.strokeWidth;
-            y = point.y + parent.activeObj.strokeSettings.strokeWidth;
-            this.dx = actPoint.endX - actPoint.startX;
-            this.dy = actPoint.endY - actPoint.startY;
+            x = point.x + strWidth;
+            y = point.y + strWidth;
+            this.dx = endX - startX;
+            this.dy = endY - startY;
             var angle = Math.atan2(this.dy, this.dx);
-            canvasDraw.translate(actPoint.endX, actPoint.endY);
+            canvasDraw.translate(endX, endY);
             canvasDraw.rotate(angle);
             canvasDraw.fillRect(-x + y / 4, -y / 2, x, y);
             canvasDraw.rotate(-angle);
-            canvasDraw.translate(-actPoint.endX, -actPoint.endY);
-            parent.activeObj.rotatedAngle = angle;
+            canvasDraw.translate(-endX, -endY);
+            actObj.rotatedAngle = angle;
         }
-        else if ((start && parent.activeObj.triangleDirection === 'right') ||
-            (!start && parent.activeObj.triangleDirection === 'left')) {
-            canvasDraw.lineWidth = (parent.activeObj.strokeSettings.strokeWidth);
+        else if ((start && actObj.triangleDirection === 'right') || (!start && actObj.triangleDirection === 'left')) {
+            canvasDraw.lineWidth = strWidth;
             canvasDraw.beginPath();
-            canvasDraw.fillStyle = parent.activeObj.strokeSettings.strokeColor;
-            if ((start && (parent.activeObj.start === 'bar' && parent.activeObj.end === 'none')
-                || (parent.activeObj.start === 'bar' && (parent.activeObj.end !== 'circle' && parent.activeObj.end !== 'square'))) ||
-                (!start && (parent.activeObj.end === 'bar' && parent.activeObj.start === 'none'))) {
-                this.shapeLine(canvasDraw, actPoint.startX, actPoint.startY, actPoint.endX, actPoint.endY);
+            canvasDraw.fillStyle = actObj.strokeSettings.strokeColor;
+            if ((start && (actObj.start === 'bar' && actObj.end === 'none')
+                || (actObj.start === 'bar' && (actObj.end !== 'circle' && actObj.end !== 'square'))) ||
+                (!start && (actObj.end === 'bar' && actObj.start === 'none'))) {
+                this.shapeLine(canvasDraw, startX, startY, endX, endY);
             }
             var x = this.arrowDimension['bar']['width'];
             var y = this.arrowDimension['bar']['height'];
             var point = this.manipulateSaveCtx(canvasDraw, x, y);
-            x = point.x + parent.activeObj.strokeSettings.strokeWidth;
-            y = point.y + parent.activeObj.strokeSettings.strokeWidth;
-            this.dx = actPoint.endX - actPoint.startX;
-            this.dy = actPoint.endY - actPoint.startY;
+            x = point.x + strWidth;
+            y = point.y + strWidth;
+            this.dx = endX - startX;
+            this.dy = endY - startY;
             var angle = Math.atan2(this.dy, this.dx);
-            canvasDraw.translate(actPoint.startX, actPoint.startY);
+            canvasDraw.translate(startX, startY);
             canvasDraw.rotate(angle);
             canvasDraw.fillRect(y / 4 - x, -y / 2, x, y);
             canvasDraw.rotate(-angle);
-            canvasDraw.translate(-actPoint.startX, -actPoint.startY);
+            canvasDraw.translate(-startX, -startY);
             parent.activeObj.rotatedAngle = angle;
         }
     };
     Draw.prototype.shapeImage = function (canvasDraw) {
         var parent = this.parent;
-        var actObj = extend({}, parent.activeObj);
-        var ctx = parent.activeObj.imageCanvas.getContext('2d');
+        var actObj = parent.activeObj;
+        var _a = actObj.activePoint, startX = _a.startX, startY = _a.startY, width = _a.width, height = _a.height;
+        var ctx = actObj.imageCanvas.getContext('2d');
         if (canvasDraw === this.lowerContext && this.isImageApply) {
             var dimObj = { width: 0, height: 0 };
-            parent.notify('transform', { prop: 'calcMaxDimension', onPropertyChange: false,
-                value: { width: parent.activeObj.imageElement.width, height: parent.activeObj.imageElement.height, obj: dimObj, isImgShape: null } });
-            if (parent.activeObj.activePoint.width < (dimObj['width'] / 5) || parent.activeObj.activePoint.height < (dimObj['height'] / 5)) {
-                ctx.clearRect(0, 0, parent.activeObj.imageCanvas.width, parent.activeObj.imageCanvas.height);
-                parent.notify('draw', { prop: 'downScaleImgCanvas', onPropertyChange: false,
-                    value: { ctx: ctx, isImgAnnotation: true, isHFlip: null, isVFlip: null } });
+            parent.notify('transform', { prop: 'calcMaxDimension', onPropertyChange: false, value: { width: actObj
+                        .imageElement.width, height: actObj.imageElement.height, obj: dimObj, isImgShape: null } });
+            if (width < (dimObj['width'] / 5) || height < (dimObj['height'] / 5)) {
+                ctx.clearRect(0, 0, actObj.imageCanvas.width, actObj.imageCanvas.height);
+                parent.notify('selection', { prop: 'applyTransformToImg', onPropertyChange: false, value: { ctx: ctx } });
                 parent.notify('draw', { prop: 'drawObject', onPropertyChange: false, value: { canvas: 'duplicate' } });
                 this.upperContext.clearRect(0, 0, parent.upperCanvas.width, parent.upperCanvas.height);
                 parent.notify('selection', { prop: 'setImageClarity', onPropertyChange: false, value: { bool: false } });
@@ -1609,75 +1839,74 @@ var Draw = /** @class */ (function () {
             }
         }
         var imgPoint = { startX: 0, startY: 0, width: 0, height: 0 };
-        imgPoint.width = parent.activeObj.activePoint.width;
-        imgPoint.height = parent.activeObj.activePoint.height;
-        if (parent.activeObj.flipObjColl.length === 4) {
-            parent.activeObj.flipObjColl = [];
-            parent.activeObj.shapeFlip = '';
-        }
-        imgPoint.startX = ((parent.activeObj.activePoint.width - imgPoint.width) / 2) + parent.activeObj.activePoint.startX;
-        imgPoint.startY = ((parent.activeObj.activePoint.height - imgPoint.height) / 2) + parent.activeObj.activePoint.startY;
+        imgPoint.width = width;
+        imgPoint.height = height;
+        if (actObj.flipObjColl.length === 4) {
+            actObj.flipObjColl = [];
+            actObj.shapeFlip = '';
+        }
+        imgPoint.startX = ((width - imgPoint.width) / 2) + startX;
+        imgPoint.startY = ((height - imgPoint.height) / 2) + startY;
         var temp = canvasDraw.globalAlpha;
-        canvasDraw.globalAlpha = parent.activeObj.imageTransparency;
+        canvasDraw.globalAlpha = actObj.opacity;
         if (actObj.rotateFlipColl && actObj.rotateFlipColl.length > 0) {
             this.rotateImage(canvasDraw);
         }
         else {
-            canvasDraw.drawImage(parent.activeObj.imageCanvas, imgPoint.startX, imgPoint.startY, imgPoint.width, imgPoint.height);
+            canvasDraw.drawImage(actObj.imageCanvas, imgPoint.startX, imgPoint.startY, imgPoint.width, imgPoint.height);
         }
         canvasDraw.globalAlpha = temp;
         parent.currObjType.isText = false;
     };
     Draw.prototype.shapeText = function (canvasDraw) {
+        var parent = this.parent;
         var filter = canvasDraw.filter;
+        var actObj = parent.activeObj;
+        var _a = actObj.activePoint, startX = _a.startX, startY = _a.startY, width = _a.width, height = _a.height;
+        var rows = actObj.keyHistory.split('\n');
+        var _b = actObj.textSettings, fontFamily = _b.fontFamily, bold = _b.bold, italic = _b.italic;
+        var fontSize = actObj.textSettings.fontSize;
+        var lHeight = fontSize + fontSize * 0.25;
+        var lineHeight = ((lHeight * rows.length) - (fontSize * rows.length)) / rows.length;
         canvasDraw.filter = 'none';
-        var parent = this.parent;
-        var actPoint = parent.activeObj.activePoint;
-        var actObj = extend({}, parent.activeObj);
-        var rows = parent.activeObj.keyHistory.split('\n');
-        var height = parent.activeObj.textSettings.fontSize + parent.activeObj.textSettings.fontSize * 0.25;
-        var lineHeight = ((height * rows.length) - (parent.activeObj.textSettings.fontSize * rows.length)) / rows.length;
         for (var i = 0; i < rows.length; i++) {
             var text = rows[i];
-            var yPoint = ((i + 1) * parent.activeObj.textSettings.fontSize * 0.85) + (i * lineHeight);
+            var yPoint = ((i + 1) * fontSize * 0.85) + (i * lineHeight);
             if (parent.transform.degree === -360) {
                 parent.transform.degree = 0;
             }
             if (parent.transform.degree === 0 || parent.transform.degree === 180) {
-                if (parent.activeObj.textSettings.fontSize > actPoint.height) {
-                    parent.activeObj.textSettings.fontSize = actPoint.height -
-                        (actPoint.height * 0.1);
+                if (fontSize > height) {
+                    fontSize = actObj.textSettings.fontSize = height - (height * 0.1);
                 }
             }
             else {
-                if (parent.activeObj.textSettings.fontSize > actPoint.width) {
-                    parent.activeObj.textSettings.fontSize = actPoint.width -
-                        (actPoint.width * 0.1);
+                if (fontSize > width) {
+                    fontSize = actObj.textSettings.fontSize = width - (width * 0.1);
                 }
             }
-            canvasDraw.strokeStyle = parent.activeObj.strokeSettings.strokeColor;
-            canvasDraw.fillStyle = parent.activeObj.strokeSettings.strokeColor;
+            canvasDraw.strokeStyle = actObj.strokeSettings.strokeColor;
+            canvasDraw.fillStyle = actObj.strokeSettings.strokeColor;
             var textStyle = '';
-            if (parent.activeObj.textSettings.bold) {
+            if (bold) {
                 textStyle = 'bold ';
             }
-            if (parent.activeObj.textSettings.italic) {
+            if (italic) {
                 textStyle = 'italic ';
             }
-            if (parent.activeObj.textSettings.bold && parent.activeObj.textSettings.italic) {
+            if (bold && italic) {
                 textStyle = 'italic bold ';
             }
-            canvasDraw.font = textStyle + parent.activeObj.textSettings.fontSize + 'px' + ' ' +
-                parent.activeObj.textSettings.fontFamily;
-            if (parent.activeObj.flipObjColl.length === 4) {
-                parent.activeObj.flipObjColl = [];
-                parent.activeObj.shapeFlip = '';
+            canvasDraw.font = textStyle + fontSize + 'px' + ' ' + fontFamily;
+            if (actObj.flipObjColl.length === 4) {
+                actObj.flipObjColl = [];
+                actObj.shapeFlip = '';
             }
             if (actObj.rotateFlipColl && actObj.rotateFlipColl.length > 0) {
                 this.rotateText(canvasDraw);
             }
             else {
-                canvasDraw.fillText(text, actPoint.startX + parent.activeObj.textSettings.fontSize * 0.1, actPoint.startY + yPoint);
+                canvasDraw.fillText(text, startX + fontSize * 0.1, startY + yPoint);
             }
         }
         canvasDraw.filter = filter;
@@ -1685,32 +1914,34 @@ var Draw = /** @class */ (function () {
     };
     Draw.prototype.updateActPoint = function (degree, canvasDraw) {
         var parent = this.parent;
-        var actPoint = parent.activeObj.activePoint;
+        var actObj = parent.activeObj;
+        var actPoint = actObj.activePoint;
         if (degree.toLowerCase() === 'horizontal') {
             if (actPoint.startX <= canvasDraw.canvas.width / 2) {
-                actPoint.startX = canvasDraw.canvas.width / 2 + ((canvasDraw.canvas.width / 2) -
-                    actPoint.endX);
-                actPoint.endX = actPoint.startX +
-                    actPoint.width;
-                this.updateActiveObject(actPoint, parent.activeObj);
+                actPoint.startX = canvasDraw.canvas.width / 2 + ((canvasDraw.canvas.width / 2) - actPoint.endX);
+                actPoint.endX = actPoint.startX + actPoint.width;
+                this.updateActiveObject(actPoint, actObj);
+                parent.activeObj = actObj;
             }
             else if (actPoint.startX >= canvasDraw.canvas.width / 2) {
                 actPoint.startX = canvasDraw.canvas.width - actPoint.endX;
-                actPoint.endX = actPoint.startX +
-                    actPoint.width;
-                this.updateActiveObject(actPoint, parent.activeObj);
+                actPoint.endX = actPoint.startX + actPoint.width;
+                this.updateActiveObject(actPoint, actObj);
+                parent.activeObj = actObj;
             }
         }
         else if (degree.toLowerCase() === 'vertical') {
             if (actPoint.startY <= canvasDraw.canvas.height / 2) {
                 actPoint.startY = canvasDraw.canvas.height / 2 + ((canvasDraw.canvas.height / 2) - actPoint.endY);
                 actPoint.endY = actPoint.startY + actPoint.height;
-                this.updateActiveObject(actPoint, parent.activeObj);
+                this.updateActiveObject(actPoint, actObj);
+                parent.activeObj = actObj;
             }
             else if (actPoint.startY >= canvasDraw.canvas.height / 2) {
                 actPoint.startY = canvasDraw.canvas.height - actPoint.endY;
                 actPoint.endY = actPoint.startY + actPoint.height;
-                this.updateActiveObject(actPoint, parent.activeObj);
+                this.updateActiveObject(actPoint, actObj);
+                parent.activeObj = actObj;
             }
         }
         return actPoint;
@@ -1720,11 +1951,11 @@ var Draw = /** @class */ (function () {
         var degree;
         var actObj = parent.activeObj;
         var tempActiveObj = extend({}, parent.activeObj, null, true);
-        if (parent.activeObj.shapeDegree === 0) {
+        if (actObj.shapeDegree === 0) {
             degree = parent.transform.degree;
         }
         else {
-            degree = parent.transform.degree - parent.activeObj.shapeDegree;
+            degree = parent.transform.degree - actObj.shapeDegree;
         }
         if (degree === -450) {
             degree = -90;
@@ -1733,11 +1964,11 @@ var Draw = /** @class */ (function () {
             degree = 360 + degree;
         }
         var imgPoint = { startX: 0, startY: 0, width: 0, height: 0 };
-        imgPoint.width = degree % 90 === 0 && degree % 180 !== 0 ? parent.activeObj.activePoint.height : parent.activeObj.activePoint.width;
-        imgPoint.height = degree % 90 === 0 && degree % 180 !== 0 ? parent.activeObj.activePoint.width :
-            parent.activeObj.activePoint.height;
-        imgPoint.startX = parent.activeObj.activePoint.startX;
-        imgPoint.startY = parent.activeObj.activePoint.startY;
+        imgPoint.width = degree % 90 === 0 && degree % 180 !== 0 ? actObj.activePoint.height : actObj.activePoint.width;
+        imgPoint.height = degree % 90 === 0 && degree % 180 !== 0 ? actObj.activePoint.width :
+            actObj.activePoint.height;
+        imgPoint.startX = actObj.activePoint.startX;
+        imgPoint.startY = actObj.activePoint.startY;
         var startX = imgPoint.startX;
         var startY = imgPoint.startY;
         /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
@@ -1767,7 +1998,7 @@ var Draw = /** @class */ (function () {
                 canvasDraw.translate(canvasDraw.canvas.width / 2, canvasDraw.canvas.height / 2);
                 canvasDraw.rotate(Math.PI / 180 * coll);
                 canvasDraw.translate(-canvasDraw.canvas.height / 2, -canvasDraw.canvas.width / 2);
-                if (tempDegree % 90 === 0 && tempDegree % 270 !== 0) {
+                if ((tempDegree % 90 === 0 && tempDegree % 270 !== 0) || tempDegree === 0) {
                     startY = canvasDraw.canvas.width - (actObj.activePoint.startX + actObj.activePoint.width);
                     startY += ((actObj.activePoint.width - imgPoint.height) / 2);
                     startX = imgPoint.startY;
@@ -1825,11 +2056,12 @@ var Draw = /** @class */ (function () {
         var degree;
         var actObj = parent.activeObj;
         var tempActiveObj = extend({}, parent.activeObj, null, true);
-        if (parent.activeObj.shapeDegree === 0) {
+        var actPoint = parent.activeObj.activePoint;
+        if (actObj.shapeDegree === 0) {
             degree = parent.transform.degree;
         }
         else {
-            degree = parent.transform.degree - parent.activeObj.shapeDegree;
+            degree = parent.transform.degree - actObj.shapeDegree;
         }
         if (degree === -450) {
             degree = -90;
@@ -1838,11 +2070,10 @@ var Draw = /** @class */ (function () {
             degree = 360 + degree;
         }
         var imgPoint = { startX: 0, startY: 0, width: 0, height: 0 };
-        imgPoint.width = degree % 90 === 0 && degree % 180 !== 0 ? actObj.activePoint.height : actObj.activePoint.width;
-        imgPoint.height = degree % 90 === 0 && degree % 180 !== 0 ? actObj.activePoint.width :
-            actObj.activePoint.height;
-        imgPoint.startX = actObj.activePoint.startX;
-        imgPoint.startY = actObj.activePoint.startY;
+        imgPoint.width = degree % 90 === 0 && degree % 180 !== 0 ? actPoint.height : actPoint.width;
+        imgPoint.height = degree % 90 === 0 && degree % 180 !== 0 ? actPoint.width : actPoint.height;
+        imgPoint.startX = actPoint.startX;
+        imgPoint.startY = actPoint.startY;
         var startX = imgPoint.startX;
         var startY = imgPoint.startY;
         /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
@@ -1866,26 +2097,25 @@ var Draw = /** @class */ (function () {
                 if (tempDegree < 0) {
                     tempDegree = 360 + tempDegree;
                 }
-                imgPoint.width = tempDegree % 90 === 0 && tempDegree % 180 !== 0 ? actObj.activePoint.height : actObj.activePoint.width;
-                imgPoint.height = tempDegree % 90 === 0 && tempDegree % 180 !== 0 ? actObj.activePoint.width :
-                    actObj.activePoint.height;
+                imgPoint.width = tempDegree % 90 === 0 && tempDegree % 180 !== 0 ? actPoint.height : actPoint.width;
+                imgPoint.height = tempDegree % 90 === 0 && tempDegree % 180 !== 0 ? actPoint.width : actPoint.height;
                 canvasDraw.translate(canvasDraw.canvas.width / 2, canvasDraw.canvas.height / 2);
                 canvasDraw.rotate(Math.PI / 180 * coll);
                 canvasDraw.translate(-canvasDraw.canvas.height / 2, -canvasDraw.canvas.width / 2);
-                if (tempDegree % 90 === 0 && tempDegree % 270 !== 0) {
-                    startY = (parent.lowerCanvas.width - actObj.activePoint.endX);
-                    startX = actObj.activePoint.startY;
+                if ((tempDegree % 90 === 0 && tempDegree % 270 !== 0) || tempDegree === 0) {
+                    startY = (canvasDraw.canvas.width - actPoint.endX);
+                    startX = actPoint.startY;
                 }
                 else if (tempDegree % 270 === 0) {
-                    startX = parent.lowerCanvas.height - actObj.activePoint.endY;
-                    startY = actObj.activePoint.startX;
+                    startX = canvasDraw.canvas.height - actPoint.endY;
+                    startY = actPoint.startX;
                 }
                 imgPoint.startX = startX;
                 imgPoint.startY = startY;
-                actObj.activePoint.startX = startX;
-                actObj.activePoint.startY = startY;
-                actObj.activePoint.endX = actObj.activePoint.startX + imgPoint.width;
-                actObj.activePoint.endY = actObj.activePoint.startY + imgPoint.height;
+                actPoint.startX = startX;
+                actPoint.startY = startY;
+                actPoint.endX = actPoint.startX + imgPoint.width;
+                actPoint.endY = actPoint.startY + imgPoint.height;
                 actObj = this.updateWidthHeight(actObj);
             }
             else {
@@ -1898,18 +2128,17 @@ var Draw = /** @class */ (function () {
                 if (coll === 'horizontal') {
                     canvasDraw.translate(canvasDraw.canvas.width, 0);
                     canvasDraw.scale(-1, 1);
-                    actObj.activePoint = this.updateActPoint('horizontal', canvasDraw);
                 }
                 else if (coll === 'vertical') {
                     canvasDraw.translate(0, canvasDraw.canvas.height);
                     canvasDraw.scale(1, -1);
-                    actObj.activePoint = this.updateActPoint('vertical', canvasDraw);
                 }
-                imgPoint.startX = actObj.activePoint.startX;
-                imgPoint.startY = actObj.activePoint.startY;
+                actObj.activePoint = actPoint = this.updateActPoint(coll, canvasDraw);
+                imgPoint.startX = actPoint.startX;
+                imgPoint.startY = actPoint.startY;
             }
-            imgPoint.startX = actObj.activePoint.startX;
-            imgPoint.startY = actObj.activePoint.startY;
+            imgPoint.startX = actPoint.startX;
+            imgPoint.startY = actPoint.startY;
             startX = imgPoint.startX;
             startY = imgPoint.startY;
         }
@@ -1926,36 +2155,32 @@ var Draw = /** @class */ (function () {
     };
     Draw.prototype.textFlipDegree = function (canvasDraw, startX, startY) {
         var parent = this.parent;
-        var rows = parent.activeObj.keyHistory.split('\n');
-        var height = parent.activeObj.textSettings.fontSize;
-        var lineHeight = ((height * rows.length) - (parent.activeObj.textSettings.fontSize * rows.length)) / rows.length;
-        var yPoint = (parent.activeObj.textSettings.fontSize * 0.85) + lineHeight;
-        for (var i = 0; i < rows.length; i++) {
+        var actObj = parent.activeObj;
+        var rows = actObj.keyHistory.split('\n');
+        var fontSize = actObj.textSettings.fontSize;
+        var lineHeight = ((fontSize * rows.length) - (fontSize * rows.length)) / rows.length;
+        var yPoint = (fontSize * 0.85) + lineHeight;
+        for (var i = 0, len = rows.length; i < len; i++) {
             var text = rows[i];
             if (i > 0) {
                 if (i === 1) {
-                    yPoint -= (parent.activeObj.textSettings.fontSize * 0.85);
+                    yPoint -= (fontSize * 0.85);
                 }
-                yPoint += parent.activeObj.textSettings.fontSize + parent.activeObj.textSettings.fontSize * 0.15;
+                yPoint += fontSize + fontSize * 0.15;
             }
-            canvasDraw.fillText(text, startX + parent.activeObj.textSettings.fontSize * 0.15, startY +
-                yPoint + (i > 0 ? parent.activeObj.textSettings.fontSize * 0.25 : -parent.activeObj.textSettings.fontSize * 0.35));
+            canvasDraw.fillText(text, startX + fontSize * 0.15, startY +
+                yPoint + (i > 0 ? fontSize * 0.25 : -fontSize * 0.35));
         }
     };
     Draw.prototype.clearOuterCanvas = function (context) {
         var parent = this.parent;
-        var destLeft = parent.img.destLeft;
-        var destTop = parent.img.destTop;
-        if (parent.img.destWidth < parent.lowerCanvas.width) {
-            var left = parent.img.destLeft > 0 ? parent.img.destLeft : 0;
-            context.clearRect(0, 0, left, parent.lowerCanvas.height);
-            context.clearRect(parent.img.destLeft + parent.img.destWidth, 0, left, parent.lowerCanvas.height);
-        }
-        if (parent.img.destHeight < parent.lowerCanvas.height) {
-            var top_1 = parent.img.destTop > 0 ? parent.img.destTop : 0;
-            context.clearRect(0, 0, parent.lowerCanvas.width, top_1);
-            context.clearRect(0, parent.img.destTop + parent.img.destHeight, parent.lowerCanvas.width, top_1);
-        }
+        var _a = parent.img, destLeft = _a.destLeft, destTop = _a.destTop, destWidth = _a.destWidth, destHeight = _a.destHeight;
+        var left = destLeft > 0 ? destLeft : 0;
+        var top = destTop > 0 ? destTop : 0;
+        context.clearRect(0, 0, left, parent.lowerCanvas.height);
+        context.clearRect(destLeft + destWidth, 0, parent.lowerCanvas.width - (destLeft + destWidth), parent.lowerCanvas.height);
+        context.clearRect(0, 0, parent.lowerCanvas.width, top);
+        context.clearRect(0, destTop + destHeight, parent.lowerCanvas.width, parent.lowerCanvas.height - (destTop + destHeight));
         if (parent.transform.currFlipState !== '') {
             parent.img.destLeft = destLeft;
             parent.img.destTop = destTop;
@@ -1964,19 +2189,20 @@ var Draw = /** @class */ (function () {
     Draw.prototype.setDestPoints = function () {
         var maxDimension;
         var parent = this.parent;
-        if (parent.transform.degree % 90 === 0 && parent.transform.degree % 180 !== 0) {
+        var _a = parent.transform, degree = _a.degree, zoomFactor = _a.zoomFactor;
+        if (degree % 90 === 0 && degree % 180 !== 0) {
             var obj = { width: 0, height: 0 };
             parent.notify('transform', { prop: 'calcMaxDimension', onPropertyChange: false,
                 value: { width: parent.img.srcHeight, height: parent.img.srcWidth, obj: obj, isImgShape: null } });
             maxDimension = obj;
             if (this.isRotateZoom) {
-                maxDimension.width += (maxDimension.width * parent.transform.zoomFactor);
-                maxDimension.height += (maxDimension.height * parent.transform.zoomFactor);
+                maxDimension.width += (maxDimension.width * zoomFactor);
+                maxDimension.height += (maxDimension.height * zoomFactor);
                 parent.img.destWidth = maxDimension.height;
                 parent.img.destHeight = maxDimension.width;
             }
             parent.img.destLeft = (parent.lowerCanvas.clientWidth - maxDimension.height) / 2;
-            parent.img.destTop = (parent.lowerCanvas.clientHeight - maxDimension.width) / 2;
+            parent.img.destTop = (parent.lowerCanvas.clientHeight - maxDimension.width + 1) / 2;
             parent.img.destWidth = maxDimension.height;
             parent.img.destHeight = maxDimension.width;
         }
@@ -1986,18 +2212,18 @@ var Draw = /** @class */ (function () {
                 value: { width: parent.img.srcWidth, height: parent.img.srcHeight, obj: obj, isImgShape: null } });
             maxDimension = obj;
             if (this.isRotateZoom) {
-                maxDimension.width += (maxDimension.width * parent.transform.zoomFactor);
-                maxDimension.height += (maxDimension.height * parent.transform.zoomFactor);
+                maxDimension.width += (maxDimension.width * zoomFactor);
+                maxDimension.height += (maxDimension.height * zoomFactor);
                 parent.img.destWidth = maxDimension.width;
                 parent.img.destHeight = maxDimension.height;
             }
             parent.img.destLeft = (parent.lowerCanvas.clientWidth - maxDimension.width) / 2;
-            parent.img.destTop = (parent.lowerCanvas.clientHeight - maxDimension.height) / 2;
+            parent.img.destTop = (parent.lowerCanvas.clientHeight - maxDimension.height + 1) / 2;
             parent.img.destWidth = maxDimension.width;
             parent.img.destHeight = maxDimension.height;
         }
     };
-    Draw.prototype.updateCurrTransState = function (type, isPreventDestination, isRotatePan) {
+    Draw.prototype.updateCurrTransState = function (type, isPreventDestination, isRotatePan, isStraighten) {
         var parent = this.parent;
         var destLeft = parent.img.destLeft;
         var destTop = parent.img.destTop;
@@ -2009,7 +2235,8 @@ var Draw = /** @class */ (function () {
         }
         if (parent.isCircleCrop || (parent.currSelectionPoint && parent.currSelectionPoint.shape === 'crop-circle')) {
             this.currTransState(type, true, null, isRotatePan);
-            if (parent.transform.degree === 0 && parent.transform.currFlipState === '') {
+            if (parent.transform.degree === 0 && parent.transform.currFlipState === '' && parent.transform.straighten === 0 &&
+                isNullOrUndefined(isStraighten)) {
                 parent.img.destLeft = destLeft;
                 parent.img.destTop = destTop;
             }
@@ -2028,7 +2255,8 @@ var Draw = /** @class */ (function () {
         }
         else {
             this.currTransState(type, null, null, isRotatePan);
-            if (parent.transform.degree === 0 && parent.transform.currFlipState === '') {
+            if (parent.transform.degree === 0 && parent.transform.currFlipState === '' && parent.transform.straighten === 0 &&
+                isNullOrUndefined(isStraighten)) {
                 parent.img.destLeft = destLeft;
                 parent.img.destTop = destTop;
             }
@@ -2127,7 +2355,7 @@ var Draw = /** @class */ (function () {
         }
         this.lowerContext.filter = temp;
     };
-    Draw.prototype.renderImage = function (isMouseWheel, isPreventClearRect, isFrame) {
+    Draw.prototype.renderImage = function (isMouseWheel, isPreventClearRect, isFrame, isStraighten) {
         var parent = this.parent;
         var temp = this.lowerContext.filter;
         parent.notify('shape', { prop: 'applyActObj', onPropertyChange: false, value: { isMouseDown: null } });
@@ -2142,7 +2370,7 @@ var Draw = /** @class */ (function () {
             if (parent.transform.zoomFactor !== 0) {
                 this.isRotateZoom = true;
             }
-            this.updateCurrTransState('initial');
+            this.updateCurrTransState('initial', null, null, isStraighten);
         }
         parent.notify('transform', { prop: 'setDestPointsForFlipState', onPropertyChange: false });
         this.drawImage();
@@ -2151,10 +2379,9 @@ var Draw = /** @class */ (function () {
             this.setTransformColl(this.lowerContext, 'reverse');
         }
         else {
-            this.updateCurrTransState('reverse');
+            this.updateCurrTransState('reverse', null, null, isStraighten);
             this.isRotateZoom = false;
         }
-        this.lowerContext.filter = 'none';
         if (isFrame) {
             parent.notify('shape', { prop: 'zoomObjColl', onPropertyChange: false, value: { isPreventApply: null } });
             parent.notify('freehand-draw', { prop: 'zoomFHDColl', onPropertyChange: false, value: { isPreventApply: null } });
@@ -2164,7 +2391,6 @@ var Draw = /** @class */ (function () {
             parent.notify('freehand-draw', { prop: 'freehandRedraw', onPropertyChange: false,
                 value: { context: this.lowerContext, points: null } });
         }
-        this.lowerContext.filter = temp;
         this.clearOuterCanvas(this.lowerContext);
         if (parent.isCircleCrop || (parent.currSelectionPoint && parent.currSelectionPoint.shape === 'crop-circle')) {
             parent.notify('crop', { prop: 'cropCircle', onPropertyChange: false,
@@ -2193,7 +2419,8 @@ var Draw = /** @class */ (function () {
                 if (Browser.isDevice) {
                     parent.notify('toolbar', { prop: 'destroy-top-toolbar', onPropertyChange: false });
                     parent.notify('toolbar', { prop: 'destroy-bottom-toolbar', onPropertyChange: false });
-                    var eventargs = { isApplyBtn: false, isDevice: Browser.isDevice, isOkBtn: null };
+                    var eventargs = { isApplyBtn: false, isDevice: Browser.isDevice, isOkBtn: null,
+                        isResize: null, isFrame: null, isMainToolbar: true };
                     parent.notify('toolbar', { prop: 'init-main-toolbar', onPropertyChange: false, value: eventargs });
                     parent.notify('toolbar', { prop: 'create-bottom-toolbar', onPropertyChange: false });
                 }
@@ -2208,14 +2435,12 @@ var Draw = /** @class */ (function () {
                 if (Browser.isDevice) {
                     parent.element.querySelector('.e-bottom-toolbar-area').style.display = 'block';
                     parent.element.querySelector('.e-canvas-wrapper').style.height = (parent.element.offsetHeight
-                        - parent.toolbarHeight * 2) - 3 + 'px';
+                        - parent.toolbarHeight * 2) - 1 + 'px';
                 }
             }
         };
         parent.baseImg.onerror = function () {
             hideSpinner(parent.element);
-            // proxy.reset();
-            // proxy.parent.baseImg.src = proxy.baseImgSrc;
             proxy.isErrorImage = true;
             proxy.errorLoading();
         };
@@ -2246,7 +2471,7 @@ var Draw = /** @class */ (function () {
             value: { width: parent.img.srcWidth, height: parent.img.srcHeight, obj: obj, isImgShape: null } });
         var maxDimension = obj;
         parent.img.destLeft = (parent.lowerCanvas.clientWidth - maxDimension.width) / 2;
-        parent.img.destTop = (parent.lowerCanvas.clientHeight - maxDimension.height) / 2;
+        parent.img.destTop = (parent.lowerCanvas.clientHeight - maxDimension.height + 1) / 2;
         this.drawImgToCanvas(maxDimension);
         this.origDim.width = parent.img.destWidth;
         this.origDim.height = parent.img.destHeight;
@@ -2290,7 +2515,7 @@ var Draw = /** @class */ (function () {
         }
         this.isImageEdited = false;
     };
-    Draw.prototype.resetFrameZoom = function () {
+    Draw.prototype.resetFrameZoom = function (isOk) {
         var parent = this.parent;
         if (!isNullOrUndefined(parent.tempFrameZoomLevel)) {
             var temp = parent.tempFrameZoomLevel;
@@ -2298,10 +2523,19 @@ var Draw = /** @class */ (function () {
             parent.notify('transform', { prop: 'resetZoom', onPropertyChange: false });
             parent.notify('transform', { prop: 'zoomAction', onPropertyChange: false,
                 value: { zoomFactor: temp, zoomPoint: null, isResize: true } });
+            var obj = parent.cancelCropSelection;
+            if (isOk && obj) {
+                obj.previousObj.frameObj = extend({}, parent.frameObj, null, true);
+                obj.currentObj.frameObj = extend({}, parent.frameObj, null, true);
+                obj.previousObj.frame = obj.currentObj.frame = parent.frameObj.type;
+            }
+            this.updateCropSelObj();
+            parent.cancelCropSelection = null;
         }
     };
     Draw.prototype.performCancel = function (isContextualToolbar) {
         var parent = this.parent;
+        var straightenObj = { bool: parent.isStraightening };
         isContextualToolbar = isContextualToolbar ? isContextualToolbar : false;
         var obj = { bool: false };
         parent.allowDownScale = true;
@@ -2310,7 +2544,7 @@ var Draw = /** @class */ (function () {
             extend(parent.frameObj, parent.tempFrameObj);
             this.renderImage(null, null, true);
         }
-        this.resetFrameZoom();
+        this.resetFrameZoom(false);
         if (obj['bool']) {
             parent.notify('freehand-draw', { prop: 'cancelFhd', onPropertyChange: false });
             if (!isBlazor()) {
@@ -2321,7 +2555,7 @@ var Draw = /** @class */ (function () {
             }
             parent.notify('undo-redo', { prop: 'updateCurrUrc', value: { type: 'cancel' } });
         }
-        else if (parent.textArea.style.display === 'block') {
+        else if (parent.textArea.style.display === 'block' || parent.textArea.style.display === 'inline-block') {
             parent.textArea.style.display = 'none';
             parent.textArea.value = '';
             parent.textArea.style.transform = '';
@@ -2344,8 +2578,11 @@ var Draw = /** @class */ (function () {
             else {
                 parent.updateToolbar(parent.element, 'imageLoaded');
             }
+            parent.notify('selection', { prop: 'setTempActObj', onPropertyChange: false, value: { obj: parent.activeObj } });
         }
-        else if ((!isBlazor() && document.querySelector('#' + parent.element.id + '_sliderWrapper')) || (isBlazor() && !parent.element.querySelector('.e-ie-contextual-slider').classList.contains('e-hidden')) ||
+        else if ((!isBlazor() && (!Browser.isDevice || (Browser.isDevice && !straightenObj['bool'])) &&
+            document.querySelector('#' + parent.element.id + '_sliderWrapper')) ||
+            (isBlazor() && !parent.element.querySelector('.e-ie-contextual-slider').classList.contains('e-hidden')) ||
             parent.currObjType.isFiltered) {
             this.lowerContext.filter = this.tempAdjValue;
             parent.canvasFilter = this.tempAdjValue;
@@ -2356,6 +2593,7 @@ var Draw = /** @class */ (function () {
                 parent.notify('filter', { prop: 'setBrightnessAdjusted', onPropertyChange: false, value: { isBrightnessAdjusted: false } });
             }
             parent.currentFilter = this.tempFilter;
+            parent.notify('filter', { prop: 'setBevelFilter', onPropertyChange: false, value: { bevelFilter: this.lowerContext.filter } });
             this.lowerContext.clearRect(0, 0, parent.lowerCanvas.width, parent.lowerCanvas.height);
             this.redrawImgWithObj();
             parent.currObjType.isFiltered = false;
@@ -2383,7 +2621,7 @@ var Draw = /** @class */ (function () {
             parent.notify('undo-redo', { prop: 'updateCurrUrc', value: { type: 'cancel' } });
         }
         else {
-            if (isContextualToolbar) {
+            if (isContextualToolbar && (!Browser.isDevice || (Browser.isDevice && !straightenObj['bool']))) {
                 var eventargs = { type: 'main', isApplyBtn: null, isCropping: null, isZooming: null };
                 if (!isBlazor()) {
                     parent.notify('toolbar', { prop: 'refresh-toolbar', onPropertyChange: false, value: eventargs });
@@ -2414,8 +2652,9 @@ var Draw = /** @class */ (function () {
     Draw.prototype.cancelItems = function () {
         var parent = this.parent;
         var isCropSelection = false;
-        var ascpectIcon = this.parent.element.querySelector('#' + this.parent.element.id + '_aspectratio');
-        var nonAspectIcon = this.parent.element.querySelector('#' + this.parent.element.id + '_nonaspectratio');
+        var id = parent.element.id;
+        var ascpectIcon = parent.element.querySelector('#' + id + '_aspectratio');
+        var nonAspectIcon = parent.element.querySelector('#' + id + '_nonaspectratio');
         var splitWords;
         var shapes = ['rectangle', 'ellipse', 'line', 'arrow', 'path', 'image'];
         if (parent.activeObj.shape !== undefined) {
@@ -2432,14 +2671,15 @@ var Draw = /** @class */ (function () {
             parent.transform.zoomFactor = parent.transform.defaultZoomFactor;
         }
         if (parent.isResize) {
-            if (ascpectIcon || nonAspectIcon || parent.currentToolbar == "resize-toolbar") {
+            /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
+            if (ascpectIcon || nonAspectIcon || parent.currentToolbar === 'resize-toolbar') {
                 var obj = { width: null, height: null };
                 parent.notify('selection', { prop: 'getNumTextValue', onPropertyChange: false, value: { obj: obj } });
                 var point = { x: obj['width'], y: obj['height'] };
-                var aspectRatioElement = this.parent.element.querySelector('#' + this.parent.element.id + '_aspectratio');
-                var blrAspRatElem = this.parent.element.querySelector(".e-ie-toolbar-aspect-ratio-btn");
-                if (point && point.x && point.y && !isNullOrUndefined(this.parent.aspectWidth)) {
-                    if (aspectRatioElement || (blrAspRatElem && !blrAspRatElem.classList.contains("e-hidden"))) {
+                var aspectRatioElement = parent.element.querySelector('#' + parent.element.id + '_aspectratio');
+                var blrAspRatElem = parent.element.querySelector('.e-ie-toolbar-aspect-ratio-btn');
+                if (point && point.x && point.y && !isNullOrUndefined(parent.aspectWidth)) {
+                    if (aspectRatioElement || (blrAspRatElem && !blrAspRatElem.classList.contains('e-hidden'))) {
                         parent.notify('transform', { prop: 'resizeImage', value: { width: parent.aspectWidth, height: parent.aspectHeight } });
                     }
                     else {
@@ -2451,8 +2691,8 @@ var Draw = /** @class */ (function () {
                 }
                 var obj1 = { prevCropObj: parent.prevCropObj };
                 var obj2 = { prevObj: parent.prevObj };
-                this.parent.notify('toolbar', { prop: 'getPrevCropObj', onPropertyChange: false, value: { obj: obj1 } });
-                this.parent.notify('toolbar', { prop: 'getPrevObj', onPropertyChange: false, value: { obj: obj2 } });
+                parent.notify('toolbar', { prop: 'getPrevCropObj', onPropertyChange: false, value: { obj: obj1 } });
+                parent.notify('toolbar', { prop: 'getPrevObj', onPropertyChange: false, value: { obj: obj2 } });
                 if (obj1['prevCropObj'] && obj2['prevObj']) {
                     parent.objColl = [];
                     parent.pointColl = [];
@@ -2462,13 +2702,14 @@ var Draw = /** @class */ (function () {
                     parent.objColl = obj2['prevObj']['objColl'];
                     parent.pointColl = obj2['prevObj']['pointColl'];
                     parent.freehandCounter = parent.pointColl.length;
+                    parent.transform.straighten = 0;
                     parent.notify('shape', { prop: 'zoomObjColl', onPropertyChange: false, value: { isPreventApply: null } });
                     parent.notify('freehand-draw', { prop: 'zoomFHDColl', onPropertyChange: false, value: { isPreventApply: null } });
                     var currObj = parent.currSelectionPoint ?
                         extend({}, parent.currSelectionPoint, {}, true) : null;
-                    this.parent.notify('transform', { prop: 'zoomAction', onPropertyChange: false,
-                        value: { zoomFactor: -this.parent.transform.zoomFactor, zoomPoint: null, isResize: true } });
-                    this.parent.notify('transform', { prop: 'zoomAction', onPropertyChange: false,
+                    parent.notify('transform', { prop: 'zoomAction', onPropertyChange: false,
+                        value: { zoomFactor: -parent.transform.zoomFactor, zoomPoint: null, isResize: true } });
+                    parent.notify('transform', { prop: 'zoomAction', onPropertyChange: false,
                         value: { zoomFactor: obj2['prevObj']['defaultZoom'], zoomPoint: null, isResize: true } });
                     parent.currSelectionPoint = currObj;
                     if (obj2['prevObj'].zoomFactor) {
@@ -2479,24 +2720,30 @@ var Draw = /** @class */ (function () {
                 }
                 parent.isResize = false;
                 parent.notify('transform', { prop: 'setResizedImgAngle', onPropertyChange: false, value: { angle: null } });
+                var temp = parent.isCropTab;
+                parent.isCropTab = false;
+                this.updateCropSelObj();
+                parent.isCropTab = temp;
             }
         }
-        if (parent.togglePen) {
-            this.cancelPen();
-        }
-        else if (parent.activeObj.shape === 'text') {
-            this.cancelText(isCropSelection);
-        }
-        else if (shapes.indexOf(parent.activeObj.shape) !== -1) {
-            this.cancelShape();
-        }
-        else if (isCropSelection) {
-            this.cancelSelection();
-        }
-        else {
-            parent.notify('shape', { prop: 'refreshActiveObj', onPropertyChange: false });
-            this.upperContext.clearRect(0, 0, parent.upperCanvas.width, parent.upperCanvas.height);
-            parent.notify('undo-redo', { prop: 'updateCurrUrc', value: { type: 'cancel' } });
+        switch (true) {
+            case parent.togglePen:
+                this.cancelPen();
+                break;
+            case parent.activeObj.shape === 'text':
+                this.cancelText(isCropSelection);
+                break;
+            case shapes.indexOf(parent.activeObj.shape) !== -1:
+                this.cancelShape();
+                break;
+            case isCropSelection:
+                this.cancelSelection();
+                break;
+            default:
+                parent.notify('shape', { prop: 'refreshActiveObj', onPropertyChange: false });
+                this.upperContext.clearRect(0, 0, parent.upperCanvas.width, parent.upperCanvas.height);
+                parent.notify('undo-redo', { prop: 'updateCurrUrc', value: { type: 'cancel' } });
+                break;
         }
         parent.notify('selection', { prop: 'setCurrentDrawingShape', onPropertyChange: false, value: { value: '' } });
         parent.upperCanvas.style.cursor = parent.cursor = 'default';
@@ -2543,9 +2790,9 @@ var Draw = /** @class */ (function () {
             var object = { appliedUndoRedoColl: [] };
             parent.notify('undo-redo', { prop: 'getAppliedUndoRedoColl', value: { obj: object } });
             var len = object['appliedUndoRedoColl'].length;
-            if (this.prevActObj && object['appliedUndoRedoColl'][len - 1] &&
-                object['appliedUndoRedoColl'][len - 1].currentObjColl[object['appliedUndoRedoColl'][len - 1].currentObjColl.length - 1].currIndex
-                    === this.prevActObj.currIndex) {
+            var appliedColl = object['appliedUndoRedoColl'][len - 1];
+            if (this.prevActObj && appliedColl && appliedColl.currentObjColl.length &&
+                appliedColl.currentObjColl[appliedColl.currentObjColl.length - 1].currIndex === this.prevActObj.currIndex) {
                 parent.activeObj = this.prevActObj;
                 this.prevActObj = null;
             }
@@ -2575,7 +2822,7 @@ var Draw = /** @class */ (function () {
         else {
             parent.updateToolbar(parent.element, 'destroyQuickAccessToolbar');
         }
-        this.tempTextSettings = { text: 'Enter Text', fontFamily: 'Arial', fontSize: null, fontRatio: null, bold: false,
+        this.tempTextSettings = { text: 'Enter Text', fontFamily: parent.fontFamily.default, fontSize: null, fontRatio: null, bold: false,
             italic: false, underline: false };
     };
     Draw.prototype.cancelShape = function () {
@@ -2595,11 +2842,12 @@ var Draw = /** @class */ (function () {
             var object = { appliedUndoRedoColl: [] };
             parent.notify('undo-redo', { prop: 'getAppliedUndoRedoColl', value: { obj: object } });
             var obj = void 0;
-            for (var i = 0; i < object['appliedUndoRedoColl'].length; i++) {
-                for (var j = 0; j < object['appliedUndoRedoColl'][i].currentObjColl.length; j++) {
+            for (var i = 0, iLen = object['appliedUndoRedoColl'].length; i < iLen; i++) {
+                var currObjColl = object['appliedUndoRedoColl'][i].currentObjColl;
+                for (var j = 0, jLen = currObjColl.length; j < jLen; j++) {
                     if (this.prevActObj && this.prevActObj.currIndex &&
-                        object['appliedUndoRedoColl'][i].currentObjColl[j].currIndex === this.prevActObj.currIndex) {
-                        obj = object['appliedUndoRedoColl'][i].currentObjColl[0];
+                        currObjColl[j].currIndex === this.prevActObj.currIndex) {
+                        obj = currObjColl[0];
                         break;
                     }
                 }
@@ -2625,6 +2873,22 @@ var Draw = /** @class */ (function () {
         }
     };
     Draw.prototype.cancelSelection = function () {
+        var parent = this.parent;
+        if (parent.cancelCropSelection) {
+            var obj = { value: parent.tempStraighten };
+            parent.transform.straighten = obj['value'];
+            parent.straightenBaseImageCanvas();
+            parent.notify('freehand-draw', { prop: 'resetStraightenPoint' });
+            parent.notify('draw', { prop: 'render-image', value: { isMouseWheel: false } });
+            parent.notify('draw', { prop: 'setStraightenActObj', value: { activeObj: parent.activeObj } });
+            parent.notify('crop', { prop: 'resizeWrapper' });
+            this.updateCropSelObj();
+            if (this.tempStraightenDestPoints && JSON.stringify(this.tempStraightenDestPoints) !== JSON.stringify(this.straightenDestPoints)) {
+                this.straightenDestPoints = extend({}, this.tempStraightenDestPoints, {}, true);
+            }
+        }
+    };
+    Draw.prototype.updateCropSelObj = function () {
         var parent = this.parent;
         if (parent.cancelCropSelection) {
             parent.cropObj = extend({}, parent.cancelCropSelection.previousCropObj, {}, true);
@@ -2641,6 +2905,26 @@ var Draw = /** @class */ (function () {
             }
         }
     };
+    Draw.prototype.updateCropSelection = function () {
+        var parent = this.parent;
+        var object = { currObj: {} };
+        parent.notify('filter', { prop: 'getCurrentObj', onPropertyChange: false, value: { object: object } });
+        var currentObj = object['currObj'];
+        currentObj.objColl = extend([], parent.objColl, [], true);
+        currentObj.pointColl = extend([], parent.pointColl, [], true);
+        currentObj.afterCropActions = extend([], parent.afterCropActions, [], true);
+        var selPointCollObj = { selPointColl: null };
+        parent.notify('freehand-draw', { prop: 'getSelPointColl', onPropertyChange: false,
+            value: { obj: selPointCollObj } });
+        currentObj.selPointColl = extend([], selPointCollObj['selPointColl'], [], true);
+        parent.cancelCropSelection = { operation: 'cropTransform', previousObj: currentObj, currentObj: currentObj,
+            previousObjColl: currentObj.objColl, currentObjColl: currentObj.objColl,
+            previousPointColl: currentObj.pointColl, currentPointColl: currentObj.pointColl,
+            previousSelPointColl: currentObj.selPointColl, currentSelPointColl: currentObj.selPointColl,
+            previousCropObj: extend({}, parent.cropObj, {}, true),
+            currentCropObj: extend({}, parent.cropObj, {}, true),
+            previousText: null, currentText: null, filter: null, isCircleCrop: parent.isCircleCrop };
+    };
     Draw.prototype.updateFlipPan = function (tempSelectionObj) {
         var parent = this.parent;
         if (parent.transform.currFlipState !== '') {
@@ -2659,6 +2943,7 @@ var Draw = /** @class */ (function () {
     };
     Draw.prototype.select = function (type, startX, startY, width, height) {
         var parent = this.parent;
+        type = type.toLowerCase();
         if (!parent.disabled && parent.isImageLoaded) {
             parent.allowDownScale = false;
             var object = { currObj: {} };
@@ -2718,11 +3003,20 @@ var Draw = /** @class */ (function () {
                 }
                 parent.transform.zoomFactor = parent.transform.cropZoomFactor;
                 if (isNullOrUndefined(parent.cropObj.activeObj.shape)) {
-                    parent.currObjType.shape = 'crop-' + type.toLowerCase();
+                    parent.currObjType.shape = 'crop-' + type;
                     this.drawNewSelection(type, startX, startY, width, height);
                 }
             }
             else {
+                if (!this.isCropSelect) {
+                    parent.notify('crop', { prop: 'adjustStraightenForShapes', onPropertyChange: false,
+                        value: { type: 'reverse', isInitialRotated: true } });
+                    parent.notify('freehand-draw', { prop: 'updateFHDColl', onPropertyChange: false });
+                    this.renderImage();
+                }
+                else {
+                    this.isCropSelect = false;
+                }
                 if (type === 'custom') {
                     parent.currObjType.shape = '';
                 }
@@ -2733,19 +3027,25 @@ var Draw = /** @class */ (function () {
     Draw.prototype.drawNewSelection = function (type, startX, startY, width, height) {
         var parent = this.parent;
         var points;
-        var cropShape = 'crop-' + type;
-        if (cropShape.toLowerCase() === 'crop-custom') {
+        var cropShape = 'crop-' + type.toLowerCase();
+        if (cropShape === 'crop-custom') {
             if (parent.currObjType.shape === '' || parent.currObjType.shape === 'crop-custom') {
                 this.drawCustomSelection('crop-custom', startX, startY, width, height);
+                this.adjToStraighten();
+                this.updateSelectionInsert();
+                if (parent.isStraightening) {
+                    this.straightenActObj = extend({}, parent.activeObj, {}, true);
+                    this.straightenInitZoom = parent.transform.zoomFactor;
+                }
             }
         }
-        else if (cropShape.toLowerCase() === 'crop-canvas') {
+        else if (cropShape === 'crop-canvas') {
             parent.upperCanvas.style.display = 'block';
             parent.notify('selection', { prop: 'setDragCanvas', value: { bool: true } });
         }
         else {
             parent.currObjType.isCustomCrop = false;
-            parent.currObjType.shape = cropShape.toLowerCase();
+            parent.currObjType.shape = cropShape;
             if (width && height) {
                 points = { startX: startX, startY: startY, endX: startX + width, endY: startY + height,
                     width: width, height: height };
@@ -2754,7 +3054,7 @@ var Draw = /** @class */ (function () {
                 points = { startX: startX, startY: startY, endX: startX + width, endY: startY + width,
                     width: width, height: width };
             }
-            parent.activeObj.shape = cropShape.toLowerCase();
+            parent.activeObj.shape = cropShape;
             this.updateSelectionInsert(points);
         }
     };
@@ -2821,30 +3121,27 @@ var Draw = /** @class */ (function () {
         }
         else {
             if (isNullOrUndefined(parent.transform.zoomFactor) || parent.transform.zoomFactor === 0) {
-                var imgLeft_1 = parent.img.destLeft;
-                var imgTop_1 = parent.img.destTop;
-                var imgWidth_1 = parent.img.destWidth;
-                var imgHeight_1 = parent.img.destHeight;
+                var _a = parent.img, destLeft_1 = _a.destLeft, destTop_1 = _a.destTop, destWidth_1 = _a.destWidth, destHeight_1 = _a.destHeight;
                 var lowerCanvasWidth_1 = parent.lowerCanvas.width;
                 var lowerCanvasHeight_1 = parent.lowerCanvas.height;
                 var activePoint_1 = actPoint;
-                if (imgLeft_1 >= 0 && imgTop_1 >= 0) {
-                    activePoint_1.startX = imgLeft_1;
-                    activePoint_1.startY = imgTop_1;
-                    activePoint_1.endX = imgLeft_1 + imgWidth_1;
-                    activePoint_1.endY = imgTop_1 + imgHeight_1;
-                }
-                else if (imgLeft_1 >= 0) {
-                    activePoint_1.startX = imgLeft_1;
+                if (destLeft_1 >= 0 && destTop_1 >= 0) {
+                    activePoint_1.startX = destLeft_1;
+                    activePoint_1.startY = destTop_1;
+                    activePoint_1.endX = destLeft_1 + destWidth_1;
+                    activePoint_1.endY = destTop_1 + destHeight_1;
+                }
+                else if (destLeft_1 >= 0) {
+                    activePoint_1.startX = destLeft_1;
                     activePoint_1.startY = 7.5;
-                    activePoint_1.endX = imgLeft_1 + imgWidth_1;
+                    activePoint_1.endX = destLeft_1 + destWidth_1;
                     activePoint_1.endY = lowerCanvasHeight_1 - 15;
                 }
-                else if (imgTop_1 >= 0) {
+                else if (destTop_1 >= 0) {
                     activePoint_1.startX = 7.5;
-                    activePoint_1.startY = imgTop_1;
+                    activePoint_1.startY = destTop_1;
                     activePoint_1.endX = lowerCanvasWidth_1 - 15;
-                    activePoint_1.endY = imgTop_1 + imgHeight_1;
+                    activePoint_1.endY = destTop_1 + destHeight_1;
                 }
                 else {
                     activePoint_1.startX = 7.5;
@@ -2854,42 +3151,110 @@ var Draw = /** @class */ (function () {
                 }
             }
             else {
-                var imgLeft_2 = parent.img.destLeft;
-                var imgTop_2 = parent.img.destTop;
-                var imgWidth_2 = parent.img.destWidth;
-                var imgHeight_2 = parent.img.destHeight;
+                var _b = parent.img, destLeft_2 = _b.destLeft, destTop_2 = _b.destTop, destWidth_2 = _b.destWidth, destHeight_2 = _b.destHeight;
                 var lowerCanvasWidth_2 = parent.lowerCanvas.width;
                 var lowerCanvasHeight_2 = parent.lowerCanvas.height;
                 var activePoint_2 = actPoint;
-                activePoint_2.startX = Math.max(imgLeft_2 > 0 ? imgLeft_2 : 7.5, imgLeft_2);
-                activePoint_2.startY = Math.max(imgTop_2 > 0 ? imgTop_2 : 7.5, imgTop_2);
-                activePoint_2.endX = Math.min(imgLeft_2 + imgWidth_2 + 15 < lowerCanvasWidth_2 ? imgLeft_2 + imgWidth_2 - 15 :
-                    lowerCanvasWidth_2 - 15, imgLeft_2 + imgWidth_2);
-                activePoint_2.endY = Math.min(imgTop_2 + imgHeight_2 + 15 < lowerCanvasHeight_2 ? imgTop_2 + imgHeight_2 - 15 :
-                    lowerCanvasHeight_2 - 15, imgTop_2 + imgHeight_2);
-            }
-            var imgLeft = parent.img.destLeft;
-            var imgTop = parent.img.destTop;
-            var imgWidth = parent.img.destWidth;
-            var imgHeight = parent.img.destHeight;
+                activePoint_2.startX = Math.max(destLeft_2 > 0 ? destLeft_2 : 7.5, destLeft_2);
+                activePoint_2.startY = Math.max(destTop_2 > 0 ? destTop_2 : 7.5, destTop_2);
+                activePoint_2.endX = Math.min(destLeft_2 + destWidth_2 + 15 < lowerCanvasWidth_2 ? destLeft_2 + destWidth_2 - 15 :
+                    lowerCanvasWidth_2 - 15, destLeft_2 + destWidth_2);
+                activePoint_2.endY = Math.min(destTop_2 + destHeight_2 + 15 < lowerCanvasHeight_2 ? destTop_2 + destHeight_2 - 15 :
+                    lowerCanvasHeight_2 - 15, destTop_2 + destHeight_2);
+            }
+            var _c = parent.img, destLeft = _c.destLeft, destTop = _c.destTop, destWidth = _c.destWidth, destHeight = _c.destHeight;
             var lowerCanvasWidth = parent.lowerCanvas.clientWidth;
             var lowerCanvasHeight = parent.lowerCanvas.clientHeight;
             var activePoint = actPoint;
-            activePoint.startX = Math.max(activePoint.startX, imgLeft);
-            activePoint.startY = Math.max(activePoint.startY, imgTop);
-            activePoint.endX = Math.min(activePoint.endX, imgLeft + imgWidth);
-            activePoint.endY = Math.min(activePoint.endY, imgTop + imgHeight);
-            if (activePoint.startX === imgLeft && imgLeft + imgWidth > lowerCanvasWidth) {
+            activePoint.startX = Math.max(activePoint.startX, destLeft);
+            activePoint.startY = Math.max(activePoint.startY, destTop);
+            activePoint.endX = Math.min(activePoint.endX, destLeft + destWidth);
+            activePoint.endY = Math.min(activePoint.endY, destTop + destHeight);
+            if (parent.transform.straighten > 0) {
+                if (this.imgCanvasPoints[0].x > activePoint.startX) {
+                    activePoint.startX = this.imgCanvasPoints[0].x;
+                }
+                if (this.imgCanvasPoints[0].y > activePoint.startY) {
+                    activePoint.startY = this.imgCanvasPoints[0].y;
+                }
+                if (this.imgCanvasPoints[2].x < activePoint.endX) {
+                    activePoint.endX = this.imgCanvasPoints[2].x;
+                }
+                if (this.imgCanvasPoints[2].y < activePoint.endY) {
+                    activePoint.endY = this.imgCanvasPoints[2].x;
+                }
+            }
+            else if (parent.transform.straighten < 0) {
+                if (this.imgCanvasPoints[3].x > activePoint.startX) {
+                    activePoint.startX = this.imgCanvasPoints[3].x;
+                }
+                if (this.imgCanvasPoints[3].y < activePoint.startY) {
+                    activePoint.startY = this.imgCanvasPoints[3].y;
+                }
+                if (this.imgCanvasPoints[1].x < activePoint.endX) {
+                    activePoint.endX = this.imgCanvasPoints[1].x;
+                }
+                if (this.imgCanvasPoints[1].y > activePoint.endY) {
+                    activePoint.endY = this.imgCanvasPoints[1].x;
+                }
+            }
+            if (activePoint.startX === destLeft && destLeft + destWidth > lowerCanvasWidth) {
                 activePoint.endX = lowerCanvasWidth - 15;
             }
-            if (activePoint.startY === imgTop && imgTop + imgHeight > lowerCanvasHeight) {
+            if (activePoint.startY === destTop && destTop + destHeight > lowerCanvasHeight) {
                 activePoint.endY = lowerCanvasHeight - 15;
             }
+            if (parent.activeObj.activePoint.startX > parent.activeObj.activePoint.endX) {
+                var temp = parent.activeObj.activePoint.startX;
+                parent.activeObj.activePoint.startX = parent.activeObj.activePoint.endX;
+                parent.activeObj.activePoint.endX = temp;
+            }
+            if (parent.activeObj.activePoint.startY > parent.activeObj.activePoint.endY) {
+                var temp = parent.activeObj.activePoint.startY;
+                parent.activeObj.activePoint.startY = parent.activeObj.activePoint.endY;
+                parent.activeObj.activePoint.endY = temp;
+            }
             parent.activeObj = this.updateWidthHeight(parent.activeObj);
             this.updateActiveObject(actPoint, parent.activeObj);
+            this.adjActObj();
         }
         this.updateSelectionInsert();
     };
+    Draw.prototype.adjToStraighten = function () {
+        var parent = this.parent;
+        if (parent.transform.straighten !== 0 && parent.isStraightening) {
+            var actPoint = parent.activeObj.activePoint;
+            actPoint.startX += 7.5;
+            actPoint.startY += 7.5;
+            actPoint.endX -= 7.5;
+            actPoint.endY -= 7.5;
+            parent.activeObj = this.updateWidthHeight(parent.activeObj);
+        }
+    };
+    Draw.prototype.adjActObj = function () {
+        var parent = this.parent;
+        if (parent.transform.straighten === 0) {
+            return;
+        }
+        var actPoint = parent.activeObj.activePoint;
+        var tempActPoint = extend({}, actPoint, {}, true);
+        var count = 0;
+        while (true) {
+            count++;
+            var object = { isIntersect: null, arr: null };
+            parent.notify('draw', { prop: 'updateImgCanvasPoints', onPropertyChange: false });
+            parent.notify('draw', { prop: 'isLinesIntersect', onPropertyChange: false, value: { obj: object } });
+            if (object['arr'][0] || object['arr'][1] || object['arr'][2] || object['arr'][3] || count === 100) {
+                actPoint = extend({}, tempActPoint, {}, true);
+                break;
+            }
+            tempActPoint = extend({}, actPoint, {}, true);
+            actPoint.startX -= 5;
+            actPoint.endX += 5;
+            actPoint.width = actPoint.endX - actPoint.startX;
+            this.updateActiveObject(actPoint, parent.activeObj);
+        }
+    };
     Draw.prototype.callUpdateCurrTransState = function () {
         var parent = this.parent;
         var tempObjColl = extend([], parent.objColl, [], true);
@@ -2975,7 +3340,7 @@ var Draw = /** @class */ (function () {
                 value: { context: this.lowerContext, isSave: null, isFlip: null } });
         }
     };
-    Draw.prototype.setCurrentObj = function (obj) {
+    Draw.prototype.setCurrentObj = function (obj, isUndoRedo) {
         var parent = this.parent;
         var isObj = obj ? true : false;
         if (!isObj) {
@@ -2986,6 +3351,7 @@ var Draw = /** @class */ (function () {
         obj = obj ? obj : parent.cropObj;
         parent.transform.cropZoomFactor = obj.cropZoom;
         parent.transform.defaultZoomFactor = obj.defaultZoom;
+        this.straightenInitZoom = obj.straightenZoom;
         if (!isObj) {
             parent.transform.zoomFactor = obj.cropZoom;
         }
@@ -3008,14 +3374,17 @@ var Draw = /** @class */ (function () {
         parent.transform.degree = obj.degree;
         parent.frameObj.type = obj.frame;
         parent.transform.currFlipState = obj.currFlipState;
-        parent.img.destLeft = obj.destPoints.startX;
-        parent.img.destTop = obj.destPoints.startY;
-        parent.img.destWidth = obj.destPoints.width;
-        parent.img.destHeight = obj.destPoints.height;
-        parent.img.srcLeft = obj.srcPoints.startX;
-        parent.img.srcTop = obj.srcPoints.startY;
-        parent.img.srcWidth = obj.srcPoints.width;
-        parent.img.srcHeight = obj.srcPoints.height;
+        parent.notify('filter', { prop: 'setAdjustmentLevel', onPropertyChange: false, value: { adjustmentLevel: obj.adjustmentLevel } });
+        parent.notify('filter', { prop: 'setTempAdjVal' });
+        parent.currentFilter = obj.currentFilter;
+        parent.notify('filter', { prop: 'setTempFilVal' });
+        if (parent.transform.straighten !== obj.straighten || isUndoRedo) {
+            parent.transform.straighten = obj.straighten;
+            parent.straightenBaseImageCanvas();
+        }
+        parent.img = { destLeft: obj.destPoints.startX, destTop: obj.destPoints.startY, destWidth: obj.destPoints.width,
+            destHeight: obj.destPoints.height, srcLeft: obj.srcPoints.startX, srcTop: obj.srcPoints.startY,
+            srcWidth: obj.srcPoints.width, srcHeight: obj.srcPoints.height };
         parent.aspectWidth = obj.aspectWidth;
         parent.aspectHeight = obj.aspectHeight;
         if (obj.afterCropActions) {
@@ -3063,7 +3432,7 @@ var Draw = /** @class */ (function () {
         var afterCropActions = extend([], parent.afterCropActions, [], true);
         if (!isObj && afterCropActions.length > 0) {
             isAfterCropAction = true;
-            for (var i = 0; i < afterCropActions.length; i++) {
+            for (var i = 0, len = afterCropActions.length; i < len; i++) {
                 if (afterCropActions[i] === 'horizontalflip' || afterCropActions[i] === 'verticalflip') {
                     parent.activeObj = extend({}, currSelectionPoint, {}, true);
                     this.rotatedFlipCropSel = true;
@@ -3134,14 +3503,9 @@ var Draw = /** @class */ (function () {
             parent.notify('freehand-draw', { prop: 'zoomFHDColl', onPropertyChange: false, value: { isPreventApply: null } });
         }
         else {
-            parent.img.destLeft = obj.destPoints.startX;
-            parent.img.destTop = obj.destPoints.startY;
-            parent.img.destWidth = obj.destPoints.width;
-            parent.img.destHeight = obj.destPoints.height;
-            parent.img.srcLeft = obj.srcPoints.startX;
-            parent.img.srcTop = obj.srcPoints.startY;
-            parent.img.srcWidth = obj.srcPoints.width;
-            parent.img.srcHeight = obj.srcPoints.height;
+            parent.img = { destLeft: obj.destPoints.startX, destTop: obj.destPoints.startY, destWidth: obj.destPoints.width,
+                destHeight: obj.destPoints.height, srcLeft: obj.srcPoints.startX, srcTop: obj.srcPoints.startY,
+                srcWidth: obj.srcPoints.width, srcHeight: obj.srcPoints.height };
             if (obj.activeObj.activePoint.width !== 0 && obj.activeObj.activePoint.height !== 0) {
                 var destPoints = { startX: parent.img.destLeft, startY: parent.img.destTop, width: parent.img.destWidth,
                     height: parent.img.destHeight };
@@ -3160,22 +3524,22 @@ var Draw = /** @class */ (function () {
         parent.activeObj = activeObj;
         this.lowerContext.filter = temp;
     };
-    Draw.prototype.performPointZoom = function (x, y, type) {
+    Draw.prototype.performPointZoom = function (x, y, type, isResize, value) {
         var parent = this.parent;
-        var ratioX = (x - parent.img.destLeft) / parent.img.destWidth;
-        var ratioY = (y - parent.img.destTop) / parent.img.destHeight;
+        var _a = parent.img, destLeft = _a.destLeft, destTop = _a.destTop, destWidth = _a.destWidth, destHeight = _a.destHeight;
+        var ratioX = (x - destLeft) / destWidth;
+        var ratioY = (y - destTop) / destHeight;
         var isUndoRedo = parent.isUndoRedo;
         parent.isUndoRedo = true;
         parent.setProperties({ zoomSettings: { zoomPoint: { x: x, y: y } } }, true);
-        if (type === 'zoomIn') {
-            parent.notify('transform', { prop: 'zoomAction', onPropertyChange: false,
-                value: { zoomFactor: .1, zoomPoint: null }, isResize: null });
-        }
-        else if (type === 'zoomOut') {
-            parent.notify('transform', { prop: 'zoomAction', onPropertyChange: false,
-                value: { zoomFactor: -.1, zoomPoint: null }, isResize: null });
-        }
+        var zoomValue = value ? value : (type === 'zoomIn') ? .1 : -.1;
+        parent.notify('transform', { prop: 'zoomAction', onPropertyChange: false,
+            value: { zoomFactor: zoomValue, zoomPoint: null, isResize: isResize } });
         parent.isUndoRedo = isUndoRedo;
+        this.panToPoint(x, y, ratioX, ratioY);
+    };
+    Draw.prototype.panToPoint = function (x, y, ratioX, ratioY) {
+        var parent = this.parent;
         if (parent.transform.zoomFactor > 0) {
             var destLeft = parent.img.destLeft;
             var destTop = parent.img.destTop;
@@ -3190,9 +3554,14 @@ var Draw = /** @class */ (function () {
                 parent.isCropTab = true;
                 var objColl = extend([], parent.objColl, [], true);
                 var pointColl = extend([], parent.pointColl, [], true);
+                var straightenObj = { straightenPoint: null };
+                parent.notify('freehand-draw', { prop: 'getStraightenPoint', onPropertyChange: false,
+                    value: { obj: straightenObj } });
                 parent.objColl = [];
                 parent.pointColl = [];
                 parent.freehandCounter = 0;
+                parent.notify('freehand-draw', { prop: 'setStraightenPoint', onPropertyChange: false,
+                    value: { x: null, y: null, ratioX: null, ratioY: null } });
                 var object = { selPointColl: null };
                 parent.notify('freehand-draw', { prop: 'getSelPointColl', onPropertyChange: false,
                     value: { obj: object } });
@@ -3207,6 +3576,11 @@ var Draw = /** @class */ (function () {
                 parent.objColl = objColl;
                 parent.pointColl = pointColl;
                 parent.freehandCounter = parent.pointColl.length;
+                if (straightenObj['straightenPoint']['x'] && straightenObj['straightenPoint']['y']) {
+                    parent.notify('freehand-draw', { prop: 'setStraightenPoint', onPropertyChange: false,
+                        value: { x: straightenObj['straightenPoint']['x'], y: straightenObj['straightenPoint']['y'],
+                            ratioX: straightenObj['straightenPoint']['ratioX'], ratioY: straightenObj['straightenPoint']['ratioY'] } });
+                }
                 parent.notify('freehand-draw', { prop: 'setSelPointColl', onPropertyChange: false,
                     value: { obj: { selPointColl: cropSelPointColl } } });
                 parent.notify('shape', { prop: 'panObjColl', onPropertyChange: false,
@@ -3223,21 +3597,21 @@ var Draw = /** @class */ (function () {
     };
     Draw.prototype.adjustPanning = function (activeObj) {
         var parent = this.parent;
-        if (activeObj.activePoint.width !== 0 && activeObj.activePoint.height !== 0) {
-            var destLeft = parent.img.destLeft;
-            var destTop = parent.img.destTop;
+        var _a = activeObj.activePoint, startX = _a.startX, startY = _a.startY, width = _a.width, height = _a.height;
+        if (width !== 0 && height !== 0) {
+            var _b = parent.img, destLeft = _b.destLeft, destTop = _b.destTop, destWidth = _b.destWidth, destHeight = _b.destHeight;
             var point = { x: 0, y: 0 };
-            if (parent.img.destLeft > activeObj.activePoint.startX) {
-                point.x = parent.img.destLeft - activeObj.activePoint.startX;
+            if (destLeft > startX) {
+                point.x = destLeft - startX;
             }
-            else if (parent.img.destLeft + parent.img.destWidth < activeObj.activePoint.startX + activeObj.activePoint.width) {
-                point.x = (parent.img.destLeft + parent.img.destWidth) - (activeObj.activePoint.startX + activeObj.activePoint.width);
+            else if (destLeft + destWidth < startX + width) {
+                point.x = (destLeft + destWidth) - (startX + width);
             }
-            if (parent.img.destTop > activeObj.activePoint.startY) {
-                point.y = parent.img.destTop - activeObj.activePoint.startY;
+            if (destTop > startY) {
+                point.y = destTop - startY;
             }
-            else if (parent.img.destTop + parent.img.destHeight < activeObj.activePoint.startY + activeObj.activePoint.height) {
-                point.y = (parent.img.destTop + parent.img.destHeight) - (activeObj.activePoint.startY + activeObj.activePoint.height);
+            else if (destTop + destHeight < startY + height) {
+                point.y = (destTop + destHeight) - (startY + height);
             }
             if (parent.transform.degree === 0) {
                 parent.img.destLeft -= point.x;
@@ -3276,12 +3650,64 @@ var Draw = /** @class */ (function () {
             }
         }
     };
+    Draw.prototype.panToSel = function () {
+        var parent = this.parent;
+        var activeObj = extend({}, parent.activeObj, {}, true);
+        var img = parent.img;
+        var _a = activeObj.activePoint, startX = _a.startX, startY = _a.startY, width = _a.width, height = _a.height;
+        var straightenObj = { straightenPoint: null };
+        parent.notify('freehand-draw', { prop: 'getStraightenPoint', onPropertyChange: false,
+            value: { obj: straightenObj } });
+        if (straightenObj['straightenPoint']['x'] && straightenObj['straightenPoint']['y']) {
+            var panX = (startX + (width / 2)) - straightenObj['straightenPoint']['x'];
+            var panY = (startY + (height / 2)) - straightenObj['straightenPoint']['y'];
+            if (parent.transform.degree === 0) {
+                parent.img.destLeft += panX;
+                parent.img.destTop += panY;
+                parent.notify('transform', { prop: 'drawPannImage', value: { point: { x: panX, y: panY } } });
+            }
+            else {
+                parent.panPoint.currentPannedPoint = { x: panX, y: panY };
+                parent.notify('transform', { prop: 'drawPannedImage', value: { xDiff: panX, yDiff: panY } });
+                parent.panPoint.currentPannedPoint = { x: 0, y: 0 };
+                parent.notify('transform', { prop: 'setTempPanMove', value: { point: null } });
+            }
+            parent.notify('draw', { prop: 'drawObject', onPropertyChange: false, value: { canvas: 'duplicate', obj: activeObj } });
+            var _b = parent.img, destLeft_3 = _b.destLeft, destTop_3 = _b.destTop, destWidth_3 = _b.destWidth, destHeight_3 = _b.destHeight;
+            var points = this.imgCanvasPoints;
+            points.forEach(function (point) {
+                point.x = (point.ratioX * destWidth_3) + destLeft_3;
+                point.y = (point.ratioY * destHeight_3) + destTop_3;
+            });
+            this.imgCanvasPoints = points;
+            var count = 0;
+            if ((!isBlazor() && parent.transform.straighten === 3 && !this.preventStraightening) ||
+                (isBlazor() && parent.transform.straighten === 5 && !this.preventStraightening)) {
+                this.preventStraightening = true;
+                var temp = parent.prevStraightenedDegree;
+                parent.prevStraightenedDegree = parent.transform.straighten;
+                parent.setStraighten(0);
+                if (isBlazor()) {
+                    parent.setStraighten(5);
+                }
+                else {
+                    parent.setStraighten(3);
+                }
+                ;
+                parent.prevStraightenedDegree = temp;
+                this.preventStraightening = false;
+            }
+            while (this.isLinesIntersect() && parent.transform.straighten !== 0 && parent.transform.straighten !== 360 && count < 100) {
+                count++;
+                this.performPointZoom(parent.activeObj.activePoint.startX + (parent.activeObj.activePoint.width / 2), parent.activeObj.activePoint.startY + (parent.activeObj.activePoint.height / 2), 'zoomIn', false, 0.025);
+                this.updateImgCanvasPoints();
+            }
+        }
+    };
     Draw.prototype.drawZoomPanImage = function (x, y) {
         var parent = this.parent;
-        parent.notify('shape', { prop: 'panObjColl', onPropertyChange: false,
-            value: { xDiff: x, yDiff: y, panRegion: '' } });
-        parent.notify('freehand-draw', { prop: 'panFHDColl', onPropertyChange: false,
-            value: { xDiff: x, yDiff: y, panRegion: '' } });
+        parent.notify('shape', { prop: 'panObjColl', onPropertyChange: false, value: { xDiff: x, yDiff: y, panRegion: '' } });
+        parent.notify('freehand-draw', { prop: 'panFHDColl', onPropertyChange: false, value: { xDiff: x, yDiff: y, panRegion: '' } });
         this.renderImage(true);
         var obj = { width: 0, height: 0 };
         parent.notify('transform', { prop: 'calcMaxDimension', onPropertyChange: false,
@@ -3295,10 +3721,11 @@ var Draw = /** @class */ (function () {
     };
     Draw.prototype.openNewImage = function () {
         var parent = this.parent;
+        var id = parent.element.id;
         var inMemoryContext = parent.inMemoryCanvas.getContext('2d');
         showSpinner(parent.element);
         parent.element.style.opacity = '0.5';
-        var toolbar = document.querySelector('#' + parent.element.id + '_currPos');
+        var toolbar = document.querySelector('#' + id + '_currPos');
         if (toolbar) {
             toolbar.style.display = 'none';
         }
@@ -3306,14 +3733,14 @@ var Draw = /** @class */ (function () {
         if (!isBlazor()) {
             parent.notify('toolbar', { prop: 'getDefToolbarItems', value: { obj: obj } });
             if (obj['defToolbarItems'].length === 0 &&
-                (isNullOrUndefined(document.getElementById(parent.element.id + '_toolbar')))) {
-                var height = parent.element.querySelector('#' + parent.element.id + '_toolbarArea').clientHeight;
+                (isNullOrUndefined(document.getElementById(id + '_toolbar')))) {
+                var height = parent.element.querySelector('#' + id + '_toolbarArea').clientHeight;
                 parent.notify('toolbar', { prop: 'setToolbarHeight', value: { height: height } });
             }
         }
         else {
-            if (parent.element.querySelector('#' + parent.element.id + '_toolbarArea')) {
-                parent.toolbarHeight = parent.element.querySelector('#' + parent.element.id + '_toolbarArea').clientHeight;
+            if (parent.element.querySelector('#' + id + '_toolbarArea')) {
+                parent.toolbarHeight = parent.element.querySelector('#' + id + '_toolbarArea').clientHeight;
             }
         }
         parent.reset();
@@ -3349,8 +3776,8 @@ var Draw = /** @class */ (function () {
         else {
             this.fileName = 'ImageEditor';
             this.fileType = null;
-            parent.lowerCanvas = document.querySelector('#' + parent.element.id + '_lowerCanvas');
-            parent.upperCanvas = document.querySelector('#' + parent.element.id + '_upperCanvas');
+            parent.lowerCanvas = document.querySelector('#' + id + '_lowerCanvas');
+            parent.upperCanvas = document.querySelector('#' + id + '_upperCanvas');
             this.lowerContext = parent.lowerCanvas.getContext('2d');
             this.upperContext = parent.upperCanvas.getContext('2d');
             parent.clearContext(this.lowerContext);
@@ -3363,25 +3790,14 @@ var Draw = /** @class */ (function () {
         }
     };
     Draw.prototype.dlgBtnClick = function () {
-        var parent = this.parent;
-        parent.export();
-        if (this.isFileChanged) {
-            parent.isImageLoaded = this.isFileChanged = false;
-            parent.reset();
-            this.checkToolbarTemplate(this.inputElem, this.openURL);
-        }
-        else {
-            this.reset();
-            this.openNewImage();
-        }
-        if (!isBlazor()) {
-            getComponent(document.getElementById(parent.element.id + '_dialog'), 'dialog').destroy();
-        }
-        this.isImageEdited = false;
+        this.parent.export();
+        this.applyDialogOption();
     };
     Draw.prototype.dlgCloseBtnClick = function () {
+        this.applyDialogOption();
+    };
+    Draw.prototype.applyDialogOption = function () {
         var parent = this.parent;
-        this.baseImgSrc = parent.baseImg.src;
         if (this.isFileChanged) {
             parent.isImageLoaded = this.isFileChanged = false;
             parent.reset();
@@ -3397,15 +3813,16 @@ var Draw = /** @class */ (function () {
         this.isImageEdited = false;
     };
     Draw.prototype.showDialogPopup = function () {
+        var parent = this.parent;
         var headerObj = { key: 'ConfirmDialogHeader' };
-        this.parent.notify('toolbar', { prop: 'getLocaleText', onPropertyChange: false, value: { obj: headerObj } });
+        parent.notify('toolbar', { prop: 'getLocaleText', onPropertyChange: false, value: { obj: headerObj } });
         var contentObj = { key: 'ConfirmDialogContent' };
-        this.parent.notify('toolbar', { prop: 'getLocaleText', onPropertyChange: false, value: { obj: contentObj } });
+        parent.notify('toolbar', { prop: 'getLocaleText', onPropertyChange: false, value: { obj: contentObj } });
         var yesObj = { key: 'Yes' };
-        this.parent.notify('toolbar', { prop: 'getLocaleText', onPropertyChange: false, value: { obj: yesObj } });
+        parent.notify('toolbar', { prop: 'getLocaleText', onPropertyChange: false, value: { obj: yesObj } });
         var noObj = { key: 'No' };
-        this.parent.notify('toolbar', { prop: 'getLocaleText', onPropertyChange: false, value: { obj: noObj } });
-        this.parent.element.querySelector('#' + this.parent.element.id + '_dialog').style.display = 'block';
+        parent.notify('toolbar', { prop: 'getLocaleText', onPropertyChange: false, value: { obj: noObj } });
+        parent.element.querySelector('#' + parent.element.id + '_dialog').style.display = 'block';
         var dialog = new Dialog({
             header: headerObj['value'],
             closeOnEscape: true,
@@ -3423,21 +3840,10 @@ var Draw = /** @class */ (function () {
                     buttonModel: { content: yesObj['value'], isPrimary: true, iconCss: 'e-icons e-check' } }
             ]
         });
-        dialog.appendTo('#' + this.parent.element.id + '_dialog');
+        dialog.appendTo('#' + parent.element.id + '_dialog');
     };
     Draw.prototype.restoreOldImage = function () {
         if (this.parent.isImageLoaded) {
-            // if (this.isImageEdited || this.parent.pointColl.length > 0 || this.parent.objColl.length > 0) {
-            //     this.showDialogPopup();
-            // } else {
-            // this.reset();
-            // this.openNewImage();
-            // }
-            // const data: ImageData = this.parent.getImageData();
-            // const canvas: HTMLCanvasElement = document.createElement('canvas');
-            // canvas.width = data.width; canvas.height = data.height;
-            // canvas.getContext('2d').putImageData(data, 0, 0);
-            // this.baseImgSrc = canvas.toDataURL();
             this.reset();
             this.openNewImage();
         }
@@ -3507,7 +3913,7 @@ var Draw = /** @class */ (function () {
             var URL_1 = window.URL;
             var url = URL_1.createObjectURL(filesData);
             this.openURL = url;
-            if (parent.isImageLoaded && (this.isImageEdited || parent.pointColl.length > 0 || parent.objColl.length > 0)) {
+            if (parent.isImageLoaded && !parent.isChangesSaved && (this.isImageEdited || parent.pointColl.length > 0 || parent.objColl.length > 0)) {
                 this.isFileChanged = true;
                 if (!isBlazor()) {
                     this.showDialogPopup();
@@ -3536,8 +3942,9 @@ var Draw = /** @class */ (function () {
         var parent = this.parent;
         if (parent.activeObj.shape) {
             var isRotated = false;
-            for (var i = 0; i < parent.rotateFlipColl.length; i++) {
-                if (parent.rotateFlipColl[i] === 90 || parent.rotateFlipColl[i] === -90) {
+            for (var i = 0, len = parent.rotateFlipColl.length; i < len; i++) {
+                var degree = parent.rotateFlipColl[i];
+                if (degree === 90 || degree === -90) {
                     isRotated = true;
                     break;
                 }
@@ -3549,13 +3956,14 @@ var Draw = /** @class */ (function () {
                 var zoomFactor = parent.transform.zoomFactor;
                 parent.objColl.push(parent.activeObj);
                 parent.notify('shape', { prop: 'refreshActiveObj', onPropertyChange: false });
+                var currObj = parent.objColl[parent.objColl.length - 1];
                 if (type === 'rotateleft' || type === 'rotateright') {
                     if (parent.transform.degree % 90 === 0 && parent.transform.degree % 180 !== 0) {
-                        if (parent.objColl[parent.objColl.length - 1].activePoint.width < activeObj.activePoint.height) {
+                        if (currObj.activePoint.width < activeObj.activePoint.height) {
                             for (var i = 2; i < parent.zoomSettings.maxZoomFactor; i++) {
-                                if (parent.objColl[parent.objColl.length - 1].activePoint.width >= activeObj.activePoint.height ||
-                                    this.isSelectionBiggerThanCanvas(parent.objColl[parent.objColl.length - 1]) ||
-                                    this.isSelectionOutsideCanvas(parent.objColl[parent.objColl.length - 1])) {
+                                if (currObj.activePoint.width >= activeObj.activePoint.height ||
+                                    this.isSelectionBiggerThanCanvas(currObj) ||
+                                    this.isSelectionOutsideCanvas(currObj)) {
                                     if (!isNullOrUndefined(zoomFactor)) {
                                         parent.notify('transform', { prop: 'zoomAction', onPropertyChange: false,
                                             value: { zoomFactor: -0.1, zoomPoint: null }, isResize: null });
@@ -3569,9 +3977,9 @@ var Draw = /** @class */ (function () {
                         }
                         else {
                             for (var i = 2; i < parent.zoomSettings.maxZoomFactor; i++) {
-                                if (parent.objColl[parent.objColl.length - 1].activePoint.width >= activeObj.activePoint.height ||
-                                    this.isSelectionBiggerThanCanvas(parent.objColl[parent.objColl.length - 1]) ||
-                                    this.isSelectionOutsideCanvas(parent.objColl[parent.objColl.length - 1])) {
+                                if (currObj.activePoint.width >= activeObj.activePoint.height ||
+                                    this.isSelectionBiggerThanCanvas(currObj) ||
+                                    this.isSelectionOutsideCanvas(currObj)) {
                                     if (!isNullOrUndefined(zoomFactor)) {
                                         parent.notify('transform', { prop: 'zoomAction', onPropertyChange: false,
                                             value: { zoomFactor: 0.1, zoomPoint: null, isResize: null } });
@@ -3585,11 +3993,11 @@ var Draw = /** @class */ (function () {
                         }
                     }
                     else {
-                        if (parent.objColl[parent.objColl.length - 1].activePoint.height < activeObj.activePoint.width) {
+                        if (currObj.activePoint.height < activeObj.activePoint.width) {
                             for (var i = 2; i < parent.zoomSettings.maxZoomFactor; i++) {
-                                if (parent.objColl[parent.objColl.length - 1].activePoint.height >= activeObj.activePoint.width ||
-                                    this.isSelectionBiggerThanCanvas(parent.objColl[parent.objColl.length - 1]) ||
-                                    this.isSelectionOutsideCanvas(parent.objColl[parent.objColl.length - 1])) {
+                                if (currObj.activePoint.height >= activeObj.activePoint.width ||
+                                    this.isSelectionBiggerThanCanvas(currObj) ||
+                                    this.isSelectionOutsideCanvas(currObj)) {
                                     if (!isNullOrUndefined(zoomFactor)) {
                                         parent.notify('transform', { prop: 'zoomAction', onPropertyChange: false,
                                             value: { zoomFactor: -0.1, zoomPoint: null }, isResize: null });
@@ -3603,9 +4011,9 @@ var Draw = /** @class */ (function () {
                         }
                         else {
                             for (var i = 2; i < parent.zoomSettings.maxZoomFactor; i++) {
-                                if (parent.objColl[parent.objColl.length - 1].activePoint.height >= activeObj.activePoint.width ||
-                                    this.isSelectionBiggerThanCanvas(parent.objColl[parent.objColl.length - 1]) ||
-                                    this.isSelectionOutsideCanvas(parent.objColl[parent.objColl.length - 1])) {
+                                if (currObj.activePoint.height >= activeObj.activePoint.width ||
+                                    this.isSelectionBiggerThanCanvas(currObj) ||
+                                    this.isSelectionOutsideCanvas(currObj)) {
                                     if (!isNullOrUndefined(zoomFactor)) {
                                         parent.notify('transform', { prop: 'zoomAction', onPropertyChange: false,
                                             value: { zoomFactor: 0.1, zoomPoint: null }, isResize: null });
@@ -3619,10 +4027,13 @@ var Draw = /** @class */ (function () {
                         }
                     }
                 }
-                var panX = (parent.lowerCanvas.clientWidth / 2) - (parent.objColl[parent.objColl.length - 1].activePoint.startX +
-                    (parent.objColl[parent.objColl.length - 1].activePoint.width / 2));
-                var panY = (parent.lowerCanvas.clientHeight / 2) - (parent.objColl[parent.objColl.length - 1].activePoint.startY +
-                    (parent.objColl[parent.objColl.length - 1].activePoint.height / 2));
+                var panX = (parent.lowerCanvas.clientWidth / 2) - Math.floor(currObj.activePoint.startX +
+                    (currObj.activePoint.width / 2));
+                var panY = (parent.lowerCanvas.clientHeight / 2) - Math.floor(currObj.activePoint.startY +
+                    (currObj.activePoint.height / 2));
+                if (isNullOrUndefined(parent.activeObj.shape)) {
+                    parent.activeObj = extend({}, activeObj, {}, true);
+                }
                 if (parent.transform.degree === 0) {
                     parent.img.destLeft += panX;
                     parent.img.destTop += panY;
@@ -3643,18 +4054,19 @@ var Draw = /** @class */ (function () {
     };
     Draw.prototype.isSelectionBiggerThanCanvas = function (obj) {
         var isBigger = false;
-        if (obj.activePoint.startX <= this.parent.img.destLeft ||
-            obj.activePoint.startY <= this.parent.img.destTop ||
-            obj.activePoint.endX >= this.parent.img.destLeft + this.parent.img.destWidth ||
-            obj.activePoint.endY >= this.parent.img.destTop + this.parent.img.destHeight) {
+        var parent = this.parent;
+        var _a = obj.activePoint, startX = _a.startX, startY = _a.startY, endX = _a.endX, endY = _a.endY;
+        var _b = parent.img, destLeft = _b.destLeft, destTop = _b.destTop, destWidth = _b.destWidth, destHeight = _b.destHeight;
+        if (startX <= destLeft || startY <= destTop || endX >= destLeft + destWidth || endY >= destTop + destHeight) {
             isBigger = true;
         }
         return isBigger;
     };
     Draw.prototype.isSelectionOutsideCanvas = function (obj) {
         var isOutside = false;
-        if ((obj.activePoint.height < this.parent.lowerCanvas.height - this.parent.toolbarHeight) ||
-            (obj.activePoint.width < this.parent.lowerCanvas.width)) {
+        var parent = this.parent;
+        if ((obj.activePoint.height < parent.lowerCanvas.height - parent.toolbarHeight) ||
+            (obj.activePoint.width < parent.lowerCanvas.width)) {
             isOutside = true;
         }
         return isOutside;
@@ -3679,15 +4091,17 @@ var Draw = /** @class */ (function () {
             var tempCanvas = parent.createElement('canvas', {
                 id: parent.element.id + '_downScaleCanvas', attrs: { name: 'canvasImage' }
             });
-            tempCanvas.width = isImgAnnotation ? img.width : this.parent.img.srcWidth;
-            tempCanvas.height = isImgAnnotation ? img.height : this.parent.img.srcHeight;
+            tempCanvas.width = isImgAnnotation ? img.width : parent.img.srcWidth;
+            tempCanvas.height = isImgAnnotation ? img.height : parent.img.srcHeight;
             if (isImgAnnotation) {
                 tempCanvas.getContext('2d').drawImage(img, 0, 0, tempCanvas.width, tempCanvas.height);
             }
             else {
                 tempCanvas.getContext('2d').drawImage(canvas, parent.img.srcLeft, parent.img.srcTop, parent.img.srcWidth, parent.img.srcHeight, 0, 0, tempCanvas.width, tempCanvas.height);
             }
-            this.downScale(tempCanvas, width, height, isImgAnnotation);
+            if (isImgAnnotation || this.isDownScale) {
+                this.downScale(tempCanvas, width, height, isImgAnnotation);
+            }
             if (isImgAnnotation) {
                 ctx.canvas.width = tempCanvas.width;
                 ctx.canvas.height = tempCanvas.height;
@@ -3730,17 +4144,28 @@ var Draw = /** @class */ (function () {
                 ctx.drawImage(tempCanvas, 0, 0);
                 ctx.setTransform(1, 0, 0, 1, 0, 0);
             }
+            else if (parent.isFinetuning) {
+                ctx.save();
+                ctx.setTransform(1, 0, 0, 1, 0, 0);
+                ctx.drawImage(parent.inMemoryCanvas, 0, 0);
+                ctx.restore();
+            }
             else {
                 ctx.drawImage(tempCanvas, 0, 0, tempCanvas.width, tempCanvas.height, parent.img.destLeft, parent.img.destTop, tempCanvas.width, tempCanvas.height);
             }
         }
         else {
-            if (isNullOrUndefined(isImgAnnotation) || !isImgAnnotation) {
-                ctx.drawImage(parent.baseImg, parent.img.srcLeft, parent.img.srcTop, parent.img.srcWidth, parent.img.srcHeight, parent.img.destLeft, parent.img.destTop, parent.img.destWidth, parent.img.destHeight);
+            if ((isNullOrUndefined(isImgAnnotation) || !isImgAnnotation) && parent.baseImgCanvas.width !== 0 &&
+                parent.baseImgCanvas.height !== 0) {
+                ctx.drawImage(parent.baseImgCanvas, parent.img.srcLeft, parent.img.srcTop, parent.img.srcWidth, parent.img.srcHeight, parent.img.destLeft, parent.img.destTop, parent.img.destWidth, parent.img.destHeight);
             }
         }
     };
     Draw.prototype.downScale = function (canvas, width, height, isImgAnnotation) {
+        var parent = this.parent;
+        if (isImgAnnotation && parent.isStraightening) {
+            return;
+        }
         var widthSource = canvas.width;
         var heightSource = canvas.height;
         width = Math.round(width);
@@ -3796,13 +4221,13 @@ var Draw = /** @class */ (function () {
                 data2[x2 + 3] = a / alphaWeights;
             }
         }
-        canvas.width = isImgAnnotation ? this.parent.activeObj.activePoint.width : this.parent.lowerCanvas.width;
-        canvas.height = isImgAnnotation ? this.parent.activeObj.activePoint.height : this.parent.lowerCanvas.height;
+        canvas.width = isImgAnnotation ? parent.activeObj.activePoint.width : parent.lowerCanvas.width;
+        canvas.height = isImgAnnotation ? parent.activeObj.activePoint.height : parent.lowerCanvas.height;
         ctx.putImageData(img2, 0, 0);
     };
     Draw.prototype.drawImgToCtx = function (ctx, preventImg) {
         var parent = this.parent;
-        if (ctx.canvas.id !== parent.element.id + '_tempCanvas' && isNullOrUndefined(preventImg)) {
+        if (ctx.canvas.id !== parent.element.id + '_tempCanvas' && ctx !== this.upperContext && isNullOrUndefined(preventImg)) {
             this.downScaleImgCanvas(ctx, null, null, null);
         }
     };
@@ -3810,6 +4235,7 @@ var Draw = /** @class */ (function () {
         var parent = this.parent;
         var color = parent.frameObj.color;
         if (frameObj.gradientColor) {
+            /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
             var gradient = ctx.createLinearGradient(points.startX, points.startY, points.startX + points.width, points.startY + points.height);
             gradient.addColorStop(0, frameObj.color);
             gradient.addColorStop(1, frameObj.gradientColor);
@@ -3830,11 +4256,10 @@ var Draw = /** @class */ (function () {
         var frameObj = { type: parent.frameObj.type, color: parent.frameObj.color, size: parent.frameObj.size,
             inset: parent.frameObj.inset, offset: parent.frameObj.offset / 2, radius: parent.frameObj.radius,
             amount: parent.frameObj.amount, border: parent.frameObj.border, gradientColor: parent.frameObj.gradientColor };
+        var zoomFactor = parent.transform.zoomFactor;
         if (ctx.canvas.id === parent.element.id + '_tempCanvas') {
-            var newWidth = void 0;
-            var newHeight = void 0;
-            newWidth = ctx.canvas.width;
-            newHeight = ctx.canvas.height;
+            var newWidth = ctx.canvas.width;
+            var newHeight = ctx.canvas.height;
             var obj = { width: 0, height: 0 };
             parent.notify('crop', { prop: 'calcRatio', onPropertyChange: false,
                 value: { obj: obj, dimension: { width: newWidth, height: newHeight } } });
@@ -3844,20 +4269,38 @@ var Draw = /** @class */ (function () {
             frameObj.offset *= ((ratio.width + ratio.height) / 2);
             frameObj.radius *= ((ratio.width + ratio.height) / 2);
             points = { startX: 0, startY: 0, width: ctx.canvas.width, height: ctx.canvas.height };
+            parent.notify('export', { prop: 'updateSaveContext', onPropertyChange: false, value: { context: ctx } });
+        }
+        else if (ctx === this.upperContext && parent.activeObj.shape) {
+            points = { startX: parent.activeObj.activePoint.startX - ctx.lineWidth, startY: parent.activeObj.activePoint.startY
+                    - ctx.lineWidth, width: parent.activeObj.activePoint.width + (2 * ctx.lineWidth), height: parent.activeObj.activePoint.height + (2 * ctx.lineWidth) };
         }
         else if (isNullOrUndefined(preventImg)) {
             ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
         }
         var valueForty = (40 * ((ratio.width + ratio.height) / 2));
         var valueFifty = (50 * ((ratio.width + ratio.height) / 2));
-        frameObj.size += (frameObj.size * parent.transform.zoomFactor);
-        frameObj.inset += (frameObj.inset * parent.transform.zoomFactor);
-        frameObj.offset += (frameObj.offset * parent.transform.zoomFactor);
-        frameObj.radius += (frameObj.radius * parent.transform.zoomFactor);
-        valueForty += (valueForty * parent.transform.zoomFactor);
-        valueFifty += (valueFifty * parent.transform.zoomFactor);
+        if (ctx !== this.upperContext) {
+            frameObj.size += (frameObj.size * zoomFactor);
+            frameObj.inset += (frameObj.inset * zoomFactor);
+            frameObj.offset += (frameObj.offset * zoomFactor);
+            frameObj.radius += (frameObj.radius * zoomFactor);
+            valueForty += (valueForty * zoomFactor);
+            valueFifty += (valueFifty * zoomFactor);
+        }
+        if (ctx === this.upperContext && parent.activeObj.shape) {
+            if ((frame === 'mat' && ((points.width - (2 * frameObj.size) < 0) || (points.height - (2 * frameObj.size) < 0))) ||
+                (frame === 'bevel' && (points.width - (2 * frameObj.size) < 40 || points.height - (2 * frameObj.size) < 40)) ||
+                ((frame === 'inset') && (points.startX + points.width - frameObj.offset - (points.startX + frameObj.offset) < 0 ||
+                    points.startY + points.height - frameObj.offset - (points.startY + frameObj.offset) < 0)) ||
+                (frame === 'hook' && (points.width - (2 * frameObj.size) < 50 || points.height - (2 * frameObj.size) < 50))) {
+                return;
+            }
+        }
+        var bevelObj = { bevelFilter: ctx.filter };
         var filter = ctx.filter;
-        if ((parent.currSelectionPoint && parent.currSelectionPoint.shape === 'crop-circle') || parent.isCircleCrop) {
+        if ((parent.currSelectionPoint && parent.currSelectionPoint.shape === 'crop-circle') || parent.isCircleCrop ||
+            (ctx === this.lowerContext && parent.isCropTab)) {
             this.drawImgToCtx(ctx, preventImg);
         }
         else {
@@ -3867,6 +4310,10 @@ var Draw = /** @class */ (function () {
                     break;
                 case 'mat':
                     this.drawImgToCtx(ctx, preventImg);
+                    while (((points.width - (2 * frameObj.size) < 0) ||
+                        (points.height - (2 * frameObj.size) < 0)) && frameObj.size > 0) {
+                        frameObj.size -= 20;
+                    }
                     ctx.filter = 'none';
                     ctx.fillStyle = this.getFrameColor(frameObj, ctx, points);
                     ctx.beginPath();
@@ -3886,6 +4333,18 @@ var Draw = /** @class */ (function () {
                     points.startY += frameObj.size;
                     points.width -= (2 * frameObj.size);
                     points.height -= (2 * frameObj.size);
+                    while ((points.width - (2 * frameObj.size) < 40 ||
+                        points.height - (2 * frameObj.size) < 40) && frameObj.size > 0) {
+                        points.startX -= frameObj.size;
+                        points.startY -= frameObj.size;
+                        points.width += (2 * frameObj.size);
+                        points.height += (2 * frameObj.size);
+                        frameObj.size -= 20;
+                        points.startX += frameObj.size;
+                        points.startY += frameObj.size;
+                        points.width -= (2 * frameObj.size);
+                        points.height -= (2 * frameObj.size);
+                    }
                     ctx.fillStyle = this.getFrameColor(frameObj, ctx, points);
                     ctx.save();
                     ctx.beginPath();
@@ -3895,33 +4354,28 @@ var Draw = /** @class */ (function () {
                     ctx.lineTo(points.startX + points.width, points.startY + points.height - valueForty);
                     ctx.quadraticCurveTo(points.startX + points.width, points.startY + points.height, points.startX + points.width - valueForty, points.startY + points.height);
                     ctx.lineTo(points.startX + valueForty, points.startY + points.height);
-                    ctx.quadraticCurveTo(points.startX, points.startY + points.height, points.startX, points.startY + points.height - valueForty);
+                    ctx.quadraticCurveTo(points.startX, points.startY + points.height, points.startX, points.startY + points.height
+                        - valueForty);
                     ctx.lineTo(points.startX, points.startY + valueForty);
                     ctx.quadraticCurveTo(points.startX, points.startY, points.startX + valueForty, points.startY);
                     ctx.closePath();
                     ctx.clip();
                     ctx.filter = filter === 'none' ? parent.canvasFilter : filter;
                     if (ctx.canvas.id === parent.element.id + '_tempCanvas') {
-                        if (preventImg) {
-                            preventImg = null;
-                            ctx.drawImage(parent.baseImg, parent.img.srcLeft, parent.img.srcTop, parent.img.srcWidth, parent.img.srcHeight, 0, 0, ctx.canvas.width, ctx.canvas.height);
-                            parent.frameObj.type = 'none';
-                            ctx.filter = 'none';
-                            parent.notify('export', { prop: 'drawAnnotation', onPropertyChange: false,
-                                value: { context: ctx, ratio: ratio } });
-                            parent.frameObj.type = 'bevel';
-                            ctx.filter = filter === 'none' ? parent.canvasFilter : filter;
-                        }
-                        else {
-                            ctx.drawImage(parent.baseImg, parent.img.srcLeft, parent.img.srcTop, parent.img.srcWidth, parent.img.srcHeight, 0, 0, ctx.canvas.width, ctx.canvas.height);
-                        }
+                        preventImg = null;
+                        ctx.filter = 'none';
+                        ctx.drawImage(parent.inMemoryCanvas, 0, 0);
+                        ctx.filter = filter === 'none' ? parent.canvasFilter : filter;
                     }
                     else {
+                        ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
                         if (preventImg) {
                             preventImg = null;
                             if (parent.transform.zoomFactor !== 0) {
                                 this.isRotateZoom = true;
                             }
+                            parent.notify('filter', { prop: 'getBevelFilter', onPropertyChange: false, value: { obj: bevelObj } });
+                            ctx.filter = bevelObj['bevelFilter'];
                             this.updateCurrTransState('initial');
                             this.drawImgToCtx(ctx, preventImg);
                             this.updateCurrTransState('reverse');
@@ -3935,6 +4389,8 @@ var Draw = /** @class */ (function () {
                             ctx.filter = filter === 'none' ? parent.canvasFilter : filter;
                         }
                         else {
+                            parent.notify('filter', { prop: 'getBevelFilter', onPropertyChange: false, value: { obj: bevelObj } });
+                            ctx.filter = bevelObj['bevelFilter'];
                             this.drawImgToCtx(ctx, preventImg);
                         }
                     }
@@ -4039,15 +4495,16 @@ var Draw = /** @class */ (function () {
     Draw.prototype.triggerFrameChange = function (prevFrameSettings) {
         var _this = this;
         var parent = this.parent;
-        var currFrameSettings = { type: parent.toPascalCase(parent.frameObj.type), color: parent.frameObj.color,
-            gradientColor: parent.frameObj.gradientColor, size: parent.frameObj.size, inset: parent.frameObj.inset,
-            offset: parent.frameObj.offset, borderRadius: parent.frameObj.radius, frameLineStyle: parent.toPascalCase(parent.frameObj.border),
-            lineCount: parent.frameObj.amount };
-        var frameChange = { cancel: false, previousFrameSetting: prevFrameSettings, currentFrameSetting: currFrameSettings };
+        var currFrameSettings = { type: parent.toPascalCase(parent.frameObj.type),
+            color: parent.frameObj.color, gradientColor: parent.frameObj.gradientColor, size: parent.frameObj.size,
+            inset: parent.frameObj.inset, offset: parent.frameObj.offset, borderRadius: parent.frameObj.radius,
+            frameLineStyle: parent.toPascalCase(parent.frameObj.border), lineCount: parent.frameObj.amount };
+        var frameChange = { cancel: false, previousFrameSetting: prevFrameSettings,
+            currentFrameSetting: currFrameSettings };
         if (isBlazor()) {
             if (parent.events && parent.events.frameChanging.hasDelegate === true) {
                 /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
-                parent.dotNetRef.invokeMethodAsync('OnFrameChangingAsync', frameChange).then(function (args) {
+                parent.dotNetRef.invokeMethodAsync('OnFrameChangingAsync', 'FrameChanging', frameChange, null).then(function (args) {
                     if (!args.cancel) {
                         _this.setFrameObj(args.currentFrameSetting);
                         var obj = { currObj: {} };
@@ -4060,6 +4517,7 @@ var Draw = /** @class */ (function () {
                             } });
                         var fillColorDiv = parent.element.querySelector('.e-ie-toolbar-e-frame-color');
                         if (fillColorDiv) {
+                            /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
                             parent.element.querySelector('.e-ie-toolbar-e-frame-color' + parent.DDBPREVIEW).style.background = parent.frameObj.color;
                         }
                         var graColorDiv = parent.element.querySelector('.e-ie-toolbar-e-frame-gradient');
@@ -4068,15 +4526,20 @@ var Draw = /** @class */ (function () {
                             if (noColorDiv) {
                                 noColorDiv.querySelector('.e-nocolor-item').classList.remove('e-selected');
                             }
+                            /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
                             parent.element.querySelector('.e-ie-toolbar-e-frame-gradient' + parent.DDBPREVIEW).classList.remove('e-nocolor-item');
-                            if (parent.frameObj.gradientColor == '') {
+                            if (parent.frameObj.gradientColor === '') {
+                                /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
                                 parent.element.querySelector('.e-ie-toolbar-e-frame-gradient' + parent.DDBPREVIEW).classList.add('e-nocolor-item');
                             }
                             else {
+                                /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
                                 parent.element.querySelector('.e-ie-toolbar-e-frame-gradient' + parent.DDBPREVIEW).style.background = parent.frameObj.gradientColor;
                             }
                         }
                         parent.notify('draw', { prop: 'render-image', value: { isMouseWheel: null } });
+                        parent.curFrameObjEvent = { currentFrameSetting: args.currentFrameSetting };
+                        parent.isFrameBtnClick = true;
                     }
                 });
             }
@@ -4106,6 +4569,344 @@ var Draw = /** @class */ (function () {
         parent.frameObj.border = currFrameSettings.frameLineStyle.toLowerCase();
         parent.frameObj.amount = currFrameSettings.lineCount;
     };
+    Draw.prototype.zoomToSel = function (activeObj, isToolbar) {
+        var parent = this.parent;
+        if (this.straightenActObj && JSON.stringify(this.straightenActObj.activePoint) === JSON.stringify(activeObj.activePoint)) {
+            parent.activeObj = extend({}, this.straightenActObj, null, true);
+            if (parent.transform.straighten === 0) {
+                var destWidth = parent.img.destWidth;
+                var destHeight = parent.img.destHeight;
+                parent.transform.straighten = 360;
+                while (true) {
+                    if (!isNullOrUndefined(this.straightenInitZoom) &&
+                        (Math.round(parent.transform.zoomFactor * Math.pow(10, 3)) / Math.pow(10, 3)) >
+                            (Math.round(this.straightenInitZoom * Math.pow(10, 3)) / Math.pow(10, 3))) {
+                        this.setZoomPan('out');
+                        if (destWidth === parent.img.destWidth && destHeight === parent.img.destHeight) {
+                            this.performDummyZoom();
+                            break;
+                        }
+                        if (parent.transform.degree === 0) {
+                            parent.transform.zoomFactor -= 0.025;
+                            parent.transform.cropZoomFactor -= 0.025;
+                        }
+                    }
+                    else {
+                        this.performDummyZoom();
+                        break;
+                    }
+                }
+                parent.transform.straighten = 0;
+                parent.img = { destLeft: parent.img.destLeft, destTop: parent.img.destTop, destWidth: parent.img.destWidth,
+                    destHeight: parent.img.destHeight, srcLeft: parent.img.srcLeft, srcTop: parent.img.srcTop,
+                    srcWidth: parent.img.srcWidth, srcHeight: parent.img.srcHeight };
+            }
+            else {
+                if (isNullOrUndefined(this.straightenInitZoom)) {
+                    this.straightenInitZoom = parent.transform.zoomFactor;
+                }
+                if (this.straightenInitZoom - parent.transform.zoomFactor > 0) {
+                    parent.notify('transform', { prop: 'zoomAction', onPropertyChange: false,
+                        value: { zoomFactor: -(this.straightenInitZoom - parent.transform.zoomFactor), zoomPoint: null, isResize: true } });
+                }
+                else if (this.straightenInitZoom - parent.transform.zoomFactor < 0) {
+                    parent.notify('transform', { prop: 'zoomAction', onPropertyChange: false,
+                        value: { zoomFactor: (this.straightenInitZoom - parent.transform.zoomFactor), zoomPoint: null, isResize: true } });
+                }
+                parent.activeObj = extend({}, activeObj, null, true);
+                parent.transform.zoomFactor += 0.001;
+                this.calcStraightenedPoints(isToolbar);
+            }
+        }
+        else {
+            this.straightenActObj = extend({}, activeObj, null, true);
+            parent.activeObj = extend({}, this.straightenActObj, null, true);
+            this.straightenInitZoom = parent.transform.zoomFactor;
+            this.calcStraightenedPoints(isToolbar);
+        }
+    };
+    Draw.prototype.isDestPointSmall = function () {
+        var parent = this.parent;
+        var img = parent.img;
+        var destPoints = { startX: img.destLeft, startY: img.destTop,
+            width: img.destWidth, height: img.destHeight };
+        parent.notify('shape', { prop: 'straightenShapes', onPropertyChange: false });
+        var isSmall = false;
+        if (this.straightenDestPoints.destWidth && this.straightenDestPoints.destHeight &&
+            (img.destWidth < this.straightenDestPoints.destWidth || img.destHeight < this.straightenDestPoints.destHeight)) {
+            isSmall = true;
+        }
+        img.destLeft = destPoints.startX;
+        img.destTop = destPoints.startY;
+        img.destWidth = destPoints.width;
+        img.destHeight = destPoints.height;
+        parent.img = img;
+        return isSmall;
+    };
+    Draw.prototype.calcStraightenedPoints = function (isToolbar) {
+        var parent = this.parent;
+        var destWidth = parent.img.destWidth;
+        var destHeight = parent.img.destHeight;
+        if (isNullOrUndefined(parent.transform.zoomFactor)) {
+            parent.transform.zoomFactor += 0.025;
+        }
+        this.updateImgCanvasPoints();
+        var _loop_1 = function () {
+            if (this_1.isLinesIntersect() || this_1.isSelOutsideImg() || (isToolbar && this_1.isDestPointSmall())) {
+                parent.activeObj = extend({}, this_1.straightenActObj, null, true);
+                this_1.setZoomPan('in');
+                if (destWidth === parent.img.destWidth && destHeight === parent.img.destHeight) {
+                    this_1.performDummyZoom();
+                    return "break";
+                }
+                if (parent.transform.degree === 0) {
+                    parent.transform.zoomFactor += 0.025;
+                    parent.transform.cropZoomFactor += 0.025;
+                }
+                var points = this_1.imgCanvasPoints;
+                var left_1 = parent.img.destLeft;
+                var top_1 = parent.img.destTop;
+                var width_1 = parent.img.destWidth;
+                var height_1 = parent.img.destHeight;
+                points.forEach(function (point) {
+                    point.x = (point.ratioX * width_1) + left_1;
+                    point.y = (point.ratioY * height_1) + top_1;
+                });
+                this_1.imgCanvasPoints = points;
+            }
+            else {
+                this_1.performDummyZoom();
+                return "break";
+            }
+        };
+        var this_1 = this;
+        while (true) {
+            var state_1 = _loop_1();
+            if (state_1 === "break")
+                break;
+        }
+    };
+    Draw.prototype.performDummyZoom = function () {
+        var parent = this.parent;
+        parent.notify('transform', { prop: 'zoomAction', onPropertyChange: false,
+            value: { zoomFactor: 0.025, zoomPoint: null, isResize: true } });
+        parent.notify('transform', { prop: 'zoomAction', onPropertyChange: false,
+            value: { zoomFactor: -0.025, zoomPoint: null, isResize: true } });
+        var zoom = parent.transform.zoomFactor * 10;
+        if (zoom < 1) {
+            zoom = 1 + (zoom / 10);
+        }
+        parent.setProperties({ zoomSettings: { zoomFactor: zoom } }, true);
+        parent.notify('transform', { prop: 'setPreviousZoomValue', onPropertyChange: false,
+            value: { previousZoomValue: zoom } });
+        this.panToSel();
+    };
+    Draw.prototype.setZoomPan = function (type) {
+        var parent = this.parent;
+        var obj = { maxDimension: null };
+        if (parent.transform.degree === 0) {
+            parent.notify('transform', { prop: 'cropZoom', onPropertyChange: false,
+                value: { value: type === 'in' ? 0.025 : -0.025, selectionObj: parent.activeObj, obj: obj } });
+            parent.img.destWidth = obj['maxDimension']['width'];
+            parent.img.destHeight = obj['maxDimension']['height'];
+        }
+        else {
+            parent.transform.zoomFactor += (type === 'in' ? 0.025 : -0.025);
+            parent.transform.cropZoomFactor += (type === 'in' ? 0.025 : -0.025);
+            this.updateCurrTransState('initial');
+            this.isRotateZoom = true;
+            this.setDestPoints();
+            this.isRotateZoom = false;
+            this.updateCurrTransState('reverse');
+        }
+    };
+    Draw.prototype.updateImgCanvasPoints = function () {
+        var parent = this.parent;
+        var points = this.getImagePoints();
+        var obj = { width: 0, height: 0 };
+        var width = parent.baseImgCanvas.width;
+        var height = parent.baseImgCanvas.height;
+        parent.notify('crop', { prop: 'calcRatio', onPropertyChange: false,
+            value: { obj: obj, dimension: { width: width, height: height } } });
+        var ratio = obj;
+        width = parent.transform.degree % 90 === 0 && parent.transform.degree % 180 !== 0 ?
+            ratio.height : ratio.width;
+        height = parent.transform.degree % 90 === 0 && parent.transform.degree % 180 !== 0 ?
+            ratio.width : ratio.height;
+        var p1;
+        var p2;
+        var p3;
+        var p4;
+        var _a = parent.img, destLeft = _a.destLeft, destTop = _a.destTop, destWidth = _a.destWidth, destHeight = _a.destHeight;
+        if (parent.transform.straighten > 0) {
+            p1 = { x: destLeft + (points[0].x / width), y: destTop };
+            p2 = { x: destLeft + destWidth, y: destTop + (points[1].y / height) };
+            p3 = { x: destLeft + destWidth - (points[0].x / width), y: destTop + destHeight };
+            p4 = { x: destLeft, y: destTop + destHeight - (points[1].y / height) };
+        }
+        else {
+            p1 = { x: destLeft, y: destTop + (points[0].y / height) };
+            p2 = { x: destLeft + (points[1].x / width), y: destTop };
+            p3 = { x: destLeft + destWidth, y: destTop + destHeight - (points[0].y / height) };
+            p4 = { x: destLeft + destWidth - (points[1].x / width), y: destTop + destHeight };
+        }
+        p1.ratioX = (p1.x - destLeft) / destWidth;
+        p1.ratioY = (p1.y - destTop) / destHeight;
+        p2.ratioX = (p2.x - destLeft) / destWidth;
+        p2.ratioY = (p2.y - destTop) / destHeight;
+        p3.ratioX = (p3.x - destLeft) / destWidth;
+        p3.ratioY = (p3.y - destTop) / destHeight;
+        p4.ratioX = (p4.x - destLeft) / destWidth;
+        p4.ratioY = (p4.y - destTop) / destHeight;
+        this.imgCanvasPoints = [p1, p2, p3, p4];
+    };
+    Draw.prototype.isLinesIntersect = function (obj) {
+        var parent = this.parent;
+        var point = parent.activeObj.activePoint;
+        var imgPoints = this.imgCanvasPoints;
+        var isTopIntersect = this.doIntersect({ x: point.startX, y: point.startY }, { x: point.endX, y: point.startY }, imgPoints[0], imgPoints[1]);
+        var isRightIntersect = this.doIntersect({ x: point.endX, y: point.startY }, { x: point.endX, y: point.endY }, imgPoints[1], imgPoints[2]);
+        var isBottomIntersect = this.doIntersect({ x: point.startX, y: point.endY }, { x: point.endX, y: point.endY }, imgPoints[2], imgPoints[3]);
+        var isLeftIntersect = this.doIntersect({ x: point.startX, y: point.startY }, { x: point.startX, y: point.endY }, imgPoints[3], imgPoints[0]);
+        var isTopLeftInsideRect = this.isInsideRect(imgPoints[0]);
+        var isTopRightInsideRect = this.isInsideRect(imgPoints[1]);
+        var isBottomRightInsideRect = this.isInsideRect(imgPoints[2]);
+        var isBottomLeftInsideRect = this.isInsideRect(imgPoints[3]);
+        if (obj) {
+            obj['arr'] = [isTopIntersect, isRightIntersect, isBottomIntersect, isLeftIntersect];
+        }
+        return isTopIntersect || isRightIntersect || isBottomIntersect || isLeftIntersect ||
+            isTopLeftInsideRect || isTopRightInsideRect || isBottomRightInsideRect || isBottomLeftInsideRect ||
+            (imgPoints[0].x > point.startX && imgPoints[1].x < point.endX &&
+                imgPoints[2].x < point.endX && imgPoints[3].x > point.startX &&
+                imgPoints[0].y < point.startY && imgPoints[1].y < point.startY &&
+                imgPoints[2].y > point.endY && imgPoints[3].y > point.endY) ||
+            (imgPoints[0].x < point.startX && imgPoints[1].x > point.endX &&
+                imgPoints[2].x > point.endX && imgPoints[3].x < point.startX &&
+                imgPoints[0].y > point.startY && imgPoints[1].y > point.startY &&
+                imgPoints[2].y < point.endY && imgPoints[3].y < point.endY);
+    };
+    Draw.prototype.isSelOutsideImg = function () {
+        var parent = this.parent;
+        var points = this.imgCanvasPoints;
+        var actPoint = parent.activeObj.activePoint;
+        return (this.checkPointPosition(actPoint.startX, actPoint.startY, points[0].x, points[0].y, points[1].x, points[1].y, points[2].x, points[2].y, points[3].x, points[3].y) !== 'inside' ||
+            this.checkPointPosition(actPoint.endX, actPoint.startY, points[0].x, points[0].y, points[1].x, points[1].y, points[2].x, points[2].y, points[3].x, points[3].y) !== 'inside' ||
+            this.checkPointPosition(actPoint.startX, actPoint.endY, points[0].x, points[0].y, points[1].x, points[1].y, points[2].x, points[2].y, points[3].x, points[3].y) !== 'inside' ||
+            this.checkPointPosition(actPoint.endX, actPoint.endY, points[0].x, points[0].y, points[1].x, points[1].y, points[2].x, points[2].y, points[3].x, points[3].y) !== 'inside');
+    };
+    Draw.prototype.calcTriangleArea = function (x1, y1, x2, y2, x3, y3) {
+        return Math.abs((x1 * (y2 - y3) + x2 * (y3 - y1) + x3 * (y1 - y2)) / 2);
+    };
+    Draw.prototype.checkPointPosition = function (x, y, x1, y1, x2, y2, x3, y3, x4, y4) {
+        var area1 = this.calcTriangleArea(x, y, x1, y1, x4, y4);
+        var area2 = this.calcTriangleArea(x, y, x4, y4, x3, y3);
+        var area3 = this.calcTriangleArea(x, y, x3, y3, x2, y2);
+        var area4 = this.calcTriangleArea(x, y, x2, y2, x1, y1);
+        var areaRectangle = this.calcTriangleArea(x1, y1, x2, y2, x3, y3) + this.calcTriangleArea(x3, y3, x4, y4, x1, y1);
+        if (area1 + area2 + area3 + area4 > areaRectangle) {
+            return 'outside';
+        }
+        else if (area1 + area2 + area3 + area4 === areaRectangle && (area1 === 0 || area2 === 0 || area3 === 0 || area4 === 0)) {
+            return 'on';
+        }
+        else {
+            return 'inside';
+        }
+    };
+    Draw.prototype.getImagePoints = function () {
+        var point = [];
+        var parent = this.parent;
+        var degree = parent.transform.degree;
+        var width = parent.baseImg.width;
+        var height = parent.baseImg.height;
+        var obj = { dim: null, width: height, height: width, angle: parent.transform.straighten };
+        obj['dim'] = parent.getRotatedCanvasDim(obj['width'], obj['height'], obj['angle']);
+        var baseImgCanvasWidth = degree % 90 === 0 && degree % 180 !== 0 ? obj['dim']['width'] : parent.baseImgCanvas.width;
+        var baseImgCanvasHeight = degree % 90 === 0 && degree % 180 !== 0 ? obj['dim']['height'] : parent.baseImgCanvas.height;
+        var baseImgWidth = degree % 90 === 0 && degree % 180 !== 0 ? height : width;
+        var baseImgHeight = degree % 90 === 0 && degree % 180 !== 0 ? width : height;
+        var centerX = baseImgCanvasWidth / 2;
+        var centerY = baseImgCanvasHeight / 2;
+        var startX = centerX - (baseImgWidth / 2);
+        var startY = centerY - (baseImgHeight / 2);
+        var endX = centerX + (baseImgWidth / 2);
+        var endY = centerY + (baseImgHeight / 2);
+        var center = { x: centerX, y: centerY };
+        var radians = parent.transform.straighten * (Math.PI / 180);
+        var p1 = { x: Math.cos(radians) * (startX - center.x) - Math.sin(radians) * (startY - center.y) + center.x,
+            y: Math.sin(radians) * (startX - center.x) + Math.cos(radians) * (startY - center.y) + center.y };
+        var p2 = { x: Math.cos(radians) * (endX - center.x) - Math.sin(radians) * (startY - center.y) + center.x,
+            y: Math.sin(radians) * (endX - center.x) + Math.cos(radians) * (startY - center.y) + center.y };
+        var p3 = { x: Math.cos(radians) * (endX - center.x) - Math.sin(radians) * (endY - center.y) + center.x,
+            y: Math.sin(radians) * (endX - center.x) + Math.cos(radians) * (endY - center.y) + center.y };
+        var p4 = { x: Math.cos(radians) * (startX - center.x) - Math.sin(radians) * (endY - center.y) + center.x,
+            y: Math.sin(radians) * (startX - center.x) + Math.cos(radians) * (endY - center.y) + center.y };
+        point.push(p1);
+        point.push(p2);
+        point.push(p3);
+        point.push(p4);
+        return point;
+    };
+    Draw.prototype.doIntersect = function (a, b, c, d) {
+        var point1 = this.initiation(a, b, c);
+        var point2 = this.initiation(a, b, d);
+        var point3 = this.initiation(c, d, a);
+        var point4 = this.initiation(c, d, b);
+        if (point1 !== point2 && point3 !== point4) {
+            return true;
+        }
+        if (point1 === 0 && this.onSegment(a, c, b)) {
+            return true;
+        }
+        if (point2 === 0 && this.onSegment(a, d, b)) {
+            return true;
+        }
+        if (point3 === 0 && this.onSegment(c, a, d)) {
+            return true;
+        }
+        if (point4 === 0 && this.onSegment(c, b, d)) {
+            return true;
+        }
+        return false;
+    };
+    Draw.prototype.initiation = function (a, b, c) {
+        var value = (b.y - a.y) * (c.x - b.x) - (b.x - a.x) * (c.y - b.y);
+        if (value === 0) {
+            return 0;
+        }
+        return (value > 0) ? 1 : 2;
+    };
+    Draw.prototype.onSegment = function (a, b, c) {
+        if (b.x <= Math.max(a.x, c.x) && b.x >= Math.min(a.x, c.x) &&
+            b.y <= Math.max(a.y, c.y) && b.y >= Math.min(a.y, c.y)) {
+            return true;
+        }
+        return false;
+    };
+    Draw.prototype.isInsideRect = function (point) {
+        var parent = this.parent;
+        var actPoint = parent.activeObj.activePoint;
+        var isInside = false;
+        if (point.x >= actPoint.startX && point.x <= actPoint.endX &&
+            point.y >= actPoint.startY && point.y <= actPoint.endY) {
+            isInside = true;
+        }
+        return isInside;
+    };
+    Draw.prototype.setDestForStraighten = function () {
+        var parent = this.parent;
+        if (isNullOrUndefined(this.straightenDestPoints)) {
+            var _a = parent.img, destLeft = _a.destLeft, destTop = _a.destTop, destWidth = _a.destWidth, destHeight = _a.destHeight;
+            // If straightening performed, then destination points are set in non-straightened state
+            parent.notify('shape', { prop: 'straightenShapes', onPropertyChange: false });
+            this.straightenDestPoints = extend({}, parent.img, {}, true);
+            parent.img.destLeft = destLeft;
+            parent.img.destTop = destTop;
+            parent.img.destWidth = destWidth;
+            parent.img.destHeight = destHeight;
+        }
+    };
     return Draw;
 }());
 export { Draw };