@syncfusion/ej2-image-editor 23.2.6 → 24.1.41

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

@@ -32,6 +32,8 @@ var Selection = /** @class */ (function () {
         this.touchTime = 0;
         this.resizedElement = '';
         this.isImageClarity = true;
+        this.isPinching = false;
+        this.isSliding = false;
         this.parent = parent;
         this.addEventListener();
     }
@@ -50,7 +52,7 @@ var Selection = /** @class */ (function () {
         this.parent.off('destroyed', this.destroy);
     };
     Selection.prototype.selection = function (args) {
-        var _this = this;
+        var parent = this.parent;
         this.updatePrivateVariables();
         switch (args.prop) {
             case 'mouse-up':
@@ -89,7 +91,7 @@ var Selection = /** @class */ (function () {
             case 'clearUpperCanvas':
                 if (this.isTouch) {
                     setTimeout(function () {
-                        _this.parent.upperCanvas.getContext('2d').clearRect(0, 0, _this.parent.upperCanvas.width, _this.parent.upperCanvas.height);
+                        parent.upperCanvas.getContext('2d').clearRect(0, 0, parent.upperCanvas.width, parent.upperCanvas.height);
                     }, 550);
                 }
                 break;
@@ -205,13 +207,13 @@ var Selection = /** @class */ (function () {
             case 'annotate':
                 this.currentDrawingShape = args.value['shape'];
                 if (args.value['shape'] === 'text') {
-                    this.parent.activeObj.textSettings.fontSize = 100;
-                    this.parent.activeObj.keyHistory = 'Enter Text';
-                    this.parent.notify('shape', { prop: 'initializeTextShape', onPropertyChange: false,
+                    parent.activeObj.textSettings.fontSize = 100;
+                    parent.activeObj.keyHistory = 'Enter Text';
+                    parent.notify('shape', { prop: 'initializeTextShape', onPropertyChange: false,
                         value: { text: null, fontFamily: null, fontSize: null, bold: null, italic: null, strokeColor: null } });
                 }
                 else if (args.value['shape'] === 'path') {
-                    this.parent.activeObj.pointColl = [];
+                    parent.activeObj.pointColl = [];
                 }
                 break;
             case 'getCurrentDrawingShape':
@@ -227,7 +229,7 @@ var Selection = /** @class */ (function () {
                 this.adjustNEPoints(args.value['rectangle'], args.value['x'], args.value['y'], args.value['angle']);
                 break;
             case 'adjustRotationPoints':
-                this.adjustRotationPoints(args.value['rectangle'], args.value['x'], args.value['y'], args.value['angle']);
+                this.adjustRotationPoints(args.value['rectangle'], args.value['x'], args.value['y'], args.value['angle'], args.value['type'], args.value['elem']);
                 break;
             case 'getResizeDirection':
                 this.getResizeDirection(args.value['rectangle'], args.value['x'], args.value['y'], args.value['angle']);
@@ -256,9 +258,24 @@ var Selection = /** @class */ (function () {
             case 'upgradeImageQuality':
                 this.upgradeImageQuality();
                 break;
+            case 'getScaleRatio':
+                args.value['obj']['newScale'] = this.getScaleRatio(args.value['scale']);
+                break;
             case 'triggerShapeChange':
                 this.triggerShapeChange(args.value['shapeResizingArgs'], args.value['shapeMovingArgs'], args.value['type']);
                 break;
+            case 'limitDrag':
+                args.value['bool'] = this.limitDrag(args.value['isStart']);
+                break;
+            case 'applyTransformToImg':
+                this.applyTransformToImg(args.value['ctx']);
+                break;
+            case 'findTargetObj':
+                args.value['obj']['bool'] = this.findTargetObj(args.value['x'], args.value['y'], args.value['isCrop']);
+                break;
+            case 'setSliding':
+                this.isSliding = args.value['bool'];
+                break;
         }
     };
     Selection.prototype.getModuleName = function () {
@@ -293,10 +310,11 @@ var Selection = /** @class */ (function () {
         this.previousPoint = { x: 0, y: 0 };
         this.zoomType = 'Toolbar';
         this.isInitialTextEdited = false;
-        this.dragCanvas = false;
+        this.dragCanvas = this.isPinching = false;
         this.isFhdCustomized = false;
         this.touchEndPoint = {};
         this.panDown = null;
+        this.isSliding = false;
         this.isFhdEditing = false;
         this.pathAdjustedIndex = null;
         this.touchTime = 0;
@@ -306,12 +324,13 @@ var Selection = /** @class */ (function () {
         this.resizedElement = '';
     };
     Selection.prototype.performTabAction = function () {
-        if (this.parent.textArea.style.display === 'block') {
+        var parent = this.parent;
+        if (parent.textArea.style.display === 'block' || parent.textArea.style.display === 'inline-block') {
             var allowUndoRedoPush = this.applyCurrShape(false);
-            this.parent.notify('shape', { prop: 'redrawActObj', onPropertyChange: false,
+            parent.notify('shape', { prop: 'redrawActObj', onPropertyChange: false,
                 value: { x: null, y: null, isMouseDown: null } });
             if (allowUndoRedoPush) {
-                this.parent.notify('undo-redo', { prop: 'updateCurrUrc', value: { type: 'ok' } });
+                parent.notify('undo-redo', { prop: 'updateCurrUrc', value: { type: 'ok' } });
             }
         }
     };
@@ -321,6 +340,7 @@ var Selection = /** @class */ (function () {
     };
     Selection.prototype.getMouseCursor = function (actObj, x, y, isCropSelection, isApply) {
         var rotationCirclePoint = this.getTransRotationPoint(actObj);
+        var radius = actObj.bottomCenterCircle.radius;
         var cursor = 'default';
         var ratio = isApply ? 0 : ((actObj.topLeftCircle.radius * 2));
         if (x >= (actObj.topLeftCircle.startX - ratio) &&
@@ -382,10 +402,10 @@ var Selection = /** @class */ (function () {
             }
         }
         else if (rotationCirclePoint && !isApply &&
-            x >= (rotationCirclePoint.x - (actObj.bottomCenterCircle.radius + 2)) &&
-            x <= rotationCirclePoint.x + (actObj.bottomCenterCircle.radius + 2) &&
-            y >= rotationCirclePoint.y - (actObj.bottomCenterCircle.radius + 2) &&
-            y <= rotationCirclePoint.y + (actObj.bottomCenterCircle.radius + 2)) {
+            x >= (rotationCirclePoint.x - (radius + 2)) &&
+            x <= rotationCirclePoint.x + (radius + 2) &&
+            y >= rotationCirclePoint.y - (radius + 2) &&
+            y <= rotationCirclePoint.y + (radius + 2)) {
             cursor = 'grabbing';
         }
         else {
@@ -397,24 +417,22 @@ var Selection = /** @class */ (function () {
         var parent = this.parent;
         var frameObject = { bool: null };
         parent.notify('toolbar', { prop: 'getFrameToolbar', onPropertyChange: false, value: { obj: frameObject } });
-        if (parent.isResize || frameObject['bool']) {
+        if (parent.isResize || this.isSliding || frameObject['bool']) {
             parent.upperCanvas.style.cursor = 'default';
             return;
         }
-        var lowerCanvas = document.querySelector('#' + parent.element.id + '_lowerCanvas');
-        var upperCanvas = document.querySelector('#' + parent.element.id + '_upperCanvas');
         var isCropSelection = false;
         var splitWords;
         if (this.currentDrawingShape !== '') {
-            upperCanvas.style.cursor = parent.cursor = 'crosshair';
+            parent.upperCanvas.style.cursor = parent.cursor = 'crosshair';
             return;
         }
         if (parent.currObjType.isDragging) {
             if (this.dragElement === '') {
-                upperCanvas.style.cursor = parent.cursor = 'move';
+                parent.upperCanvas.style.cursor = parent.cursor = 'move';
             }
             else {
-                upperCanvas.style.cursor = parent.cursor = this.dragElement;
+                parent.upperCanvas.style.cursor = parent.cursor = this.dragElement;
             }
             return;
         }
@@ -429,9 +447,9 @@ var Selection = /** @class */ (function () {
                 isCropSelection = true;
             }
             if (!isCropSelection && parent.togglePan) {
-                lowerCanvas.style.cursor = upperCanvas.style.cursor = parent.cursor = 'grab';
+                parent.lowerCanvas.style.cursor = parent.upperCanvas.style.cursor = parent.cursor = 'grab';
             }
-            var cursor = upperCanvas.style.cursor;
+            var cursor = parent.upperCanvas.style.cursor;
             var actObj = extend({}, parent.activeObj, {}, true);
             this.cursorTargetId = actObj.currIndex;
             var degree = void 0;
@@ -445,53 +463,52 @@ var Selection = /** @class */ (function () {
                 degree = 360 + degree;
             }
             if (actObj.shape === 'line' || actObj.shape === 'arrow') {
-                this.setCursorForLineArrow(actObj, x, y, upperCanvas);
+                this.setCursorForLineArrow(actObj, x, y, parent.upperCanvas);
             }
             else if (actObj.shape === 'path') {
-                this.setCursorForPath(actObj, x, y, upperCanvas);
+                this.setCursorForPath(actObj, x, y, parent.upperCanvas);
             }
             else if (!isNullOrUndefined(actObj.rotatedAngle) && actObj.rotatedAngle !== 0) {
-                this.setCursorForRotatedObject(actObj, x, y, upperCanvas);
+                this.setCursorForRotatedObject(actObj, x, y, parent.upperCanvas);
             }
             else {
-                upperCanvas.style.cursor = parent.cursor = this.getMouseCursor(actObj, x, y, isCropSelection, false);
-                if ((actObj.shape === 'text') && (parent.cursor === 'n-resize' ||
-                    parent.cursor === 's-resize' || parent.cursor === 'e-resize' ||
-                    parent.cursor === 'w-resize')) {
-                    upperCanvas.style.cursor = parent.cursor = 'move';
+                parent.upperCanvas.style.cursor = parent.cursor = this.getMouseCursor(actObj, x, y, isCropSelection, false);
+                var cursorColl = ['n-resize', 's-resize', 'e-resize', 'w-resize'];
+                if ((actObj.shape === 'text') && cursorColl.indexOf(parent.cursor) > -1) {
+                    parent.upperCanvas.style.cursor = parent.cursor = 'move';
                 }
             }
             if (cursor === 'default' && parent.cursor === 'default' && isCropSelection) {
-                upperCanvas.style.cursor = parent.cursor = 'grab';
+                parent.upperCanvas.style.cursor = parent.cursor = 'grab';
             }
             if (cursor === 'grab' && parent.cursor === 'default') {
-                upperCanvas.style.cursor = parent.cursor = 'grab';
+                parent.upperCanvas.style.cursor = parent.cursor = 'grab';
             }
         }
         else if (parent.togglePan && !parent.togglePen) {
-            lowerCanvas.style.cursor = upperCanvas.style.cursor = parent.cursor = 'grab';
+            parent.lowerCanvas.style.cursor = parent.upperCanvas.style.cursor = parent.cursor = 'grab';
         }
         else {
             if (parent.currObjType.isCustomCrop || parent.togglePen) {
-                upperCanvas.style.cursor = parent.cursor = 'crosshair';
+                parent.upperCanvas.style.cursor = parent.cursor = 'crosshair';
             }
             else {
-                upperCanvas.style.cursor = parent.cursor = 'default';
+                parent.upperCanvas.style.cursor = parent.cursor = 'default';
             }
         }
         if (parent.cursor === 'default' || parent.cursor === 'grab') {
-            var cursor = upperCanvas.style.cursor;
+            var cursor = parent.upperCanvas.style.cursor;
             if (parent.objColl.length > 0 && (parent.cursor !== 'grab' || !isCropSelection)) {
-                this.setCursorFromObj(x, y, parent.objColl, upperCanvas, isCropSelection);
+                this.setCursorFromObj(x, y, parent.objColl, parent.upperCanvas, isCropSelection);
             }
             if (cursor === 'grab' && parent.cursor === 'default') {
-                upperCanvas.style.cursor = parent.cursor = 'grab';
+                parent.upperCanvas.style.cursor = parent.cursor = 'grab';
             }
         }
         if ((parent.cursor === 'default' || parent.cursor === 'grab')
             && parent.pointColl[0] && (parent.cursor !== 'grab' || !isCropSelection)
             && !parent.currObjType.isDragging && !parent.currObjType.isResize) {
-            this.setCursorForFreehandDrawing(x, y, upperCanvas);
+            this.setCursorForFreehandDrawing(x, y, parent.upperCanvas);
         }
     };
     Selection.prototype.setCursorForPath = function (actObj, x, y, upperCanvas) {
@@ -500,7 +517,7 @@ var Selection = /** @class */ (function () {
         if (parent.cursor === 'default') {
             var obj = extend({}, actObj, null, true);
             var isMove = false;
-            for (var i = 1; i < actObj.pointColl.length; i++) {
+            for (var i = 1, len = actObj.pointColl.length; i < len; i++) {
                 if (isMove) {
                     break;
                 }
@@ -510,16 +527,17 @@ var Selection = /** @class */ (function () {
                 obj.activePoint.endY = actObj.pointColl[i].y;
                 parent.notify('shape', { prop: 'setPointCollForLineArrow', onPropertyChange: false,
                     value: { obj: obj } });
-                for (var j = 0; j < obj.pointColl.length; j++) {
+                var radius = actObj.topLeftCircle.radius;
+                for (var j = 0, jLen = obj.pointColl.length; j < jLen; j++) {
                     var point = obj.pointColl[j];
-                    if (!isNullOrUndefined(point.x - (actObj.topLeftCircle.radius * 2)) &&
-                        !isNullOrUndefined(point.x + (actObj.topLeftCircle.radius * 2)) &&
-                        !isNullOrUndefined(point.y - (actObj.topLeftCircle.radius * 2)) &&
-                        !isNullOrUndefined(point.y + (actObj.topLeftCircle.radius * 2)) &&
-                        x >= (point.x - (actObj.topLeftCircle.radius * 2)) &&
-                        x <= (point.x + (actObj.topLeftCircle.radius * 2)) &&
-                        y >= (point.y - (actObj.topLeftCircle.radius * 2)) &&
-                        y <= (point.y + (actObj.topLeftCircle.radius * 2))) {
+                    if (!isNullOrUndefined(point.x - (radius * 2)) &&
+                        !isNullOrUndefined(point.x + (radius * 2)) &&
+                        !isNullOrUndefined(point.y - (radius * 2)) &&
+                        !isNullOrUndefined(point.y + (radius * 2)) &&
+                        x >= (point.x - (radius * 2)) &&
+                        x <= (point.x + (radius * 2)) &&
+                        y >= (point.y - (radius * 2)) &&
+                        y <= (point.y + (radius * 2))) {
                         upperCanvas.style.cursor = parent.cursor = 'move';
                         isMove = true;
                         break;
@@ -534,10 +552,11 @@ var Selection = /** @class */ (function () {
     };
     Selection.prototype.setCursorForLineArrow = function (actObj, x, y, upperCanvas) {
         var index;
-        for (var i = 0; i < actObj.pointColl.length; i++) {
+        var radius = actObj.topLeftCircle.radius;
+        for (var i = 0, len = actObj.pointColl.length; i < len; i++) {
             var point = actObj.pointColl[i];
-            if (x >= (point.x - (actObj.topLeftCircle.radius * 2)) && x <= (point.x + (actObj.topLeftCircle.radius * 2)) &&
-                y >= (point.y - (actObj.topLeftCircle.radius * 2)) && y <= (point.y + (actObj.topLeftCircle.radius * 2))) {
+            if (x >= (point.x - (radius * 2)) && x <= (point.x + (radius * 2)) &&
+                y >= (point.y - (radius * 2)) && y <= (point.y + (radius * 2))) {
                 upperCanvas.style.cursor = this.parent.cursor = 'move';
                 index = i;
                 break;
@@ -551,67 +570,46 @@ var Selection = /** @class */ (function () {
     Selection.prototype.setCursorForRotatedObject = function (actObj, x, y, upperCanvas) {
         this.resizedElement = '';
         var parent = this.parent;
-        if (x >= (actObj.horTopLinePointColl[0].x - (actObj.bottomCenterCircle.radius + 2)) &&
-            x <= (actObj.horTopLinePointColl[0].x + (actObj.bottomCenterCircle.radius + 2)) &&
-            y >= (actObj.horTopLinePointColl[0].y - (actObj.bottomCenterCircle.radius + 2)) &&
-            y <= (actObj.horTopLinePointColl[0].y + (actObj.bottomCenterCircle.radius + 2))) {
+        var radius = actObj.bottomCenterCircle.radius;
+        var horTP = actObj.horTopLinePointColl[Math.round(actObj.horTopLinePointColl.length / 2)];
+        var horTP1 = actObj.horTopLinePointColl[Math.round(actObj.horTopLinePointColl.length - 1)];
+        var verLP = actObj.verLeftLinePointColl[Math.round(actObj.verLeftLinePointColl.length / 2)];
+        var verRP = actObj.verRightLinePointColl[Math.round(actObj.verRightLinePointColl.length / 2)];
+        var horBP = actObj.horBottomLinePointColl[Math.round(actObj.horBottomLinePointColl.length / 2)];
+        var horBP1 = actObj.horBottomLinePointColl[Math.round(actObj.horBottomLinePointColl.length - 1)];
+        var rotCP = actObj.rotationCirclePointColl;
+        var horTP0 = actObj.horTopLinePointColl[0];
+        var horBP0 = actObj.horBottomLinePointColl[0];
+        if (x >= (horTP0.x - (radius + 2)) && x <= (horTP0.x + (radius + 2)) && y >= (horTP0.y - (radius + 2)) &&
+            y <= (horTP0.y + (radius + 2))) {
             upperCanvas.style.cursor = parent.cursor = 'nw-resize';
         }
-        else if (x >= (actObj.horTopLinePointColl[Math.round(actObj.horTopLinePointColl.length / 2)].x - 5) &&
-            x <= (actObj.horTopLinePointColl[Math.round(actObj.horTopLinePointColl.length / 2)].x + 5) &&
-            y >= (actObj.horTopLinePointColl[Math.round(actObj.horTopLinePointColl.length / 2)].y - 5) &&
-            y <= (actObj.horTopLinePointColl[Math.round(actObj.horTopLinePointColl.length / 2)].y + 5)) {
+        else if (x >= (horTP.x - 5) && x <= (horTP.x + 5) && y >= (horTP.y - 5) && y <= (horTP.y + 5)) {
             upperCanvas.style.cursor = parent.cursor = this.resizedElement = 'n-resize';
         }
-        else if (x >= (actObj.horTopLinePointColl[Math.round(actObj.horTopLinePointColl.length - 1)].x -
-            (actObj.bottomCenterCircle.radius + 2)) &&
-            x <= (actObj.horTopLinePointColl[Math.round(actObj.horTopLinePointColl.length - 1)].x +
-                (actObj.bottomCenterCircle.radius + 2)) &&
-            y >= (actObj.horTopLinePointColl[Math.round(actObj.horTopLinePointColl.length - 1)].y -
-                (actObj.bottomCenterCircle.radius + 2)) &&
-            y <= (actObj.horTopLinePointColl[Math.round(actObj.horTopLinePointColl.length - 1)].y +
-                (actObj.bottomCenterCircle.radius + 2))) {
+        else if (x >= (horTP1.x - (radius + 2)) && x <= (horTP1.x + (radius + 2)) && y >= (horTP1.y - (radius + 2)) &&
+            y <= (horTP1.y + (radius + 2))) {
             upperCanvas.style.cursor = parent.cursor = 'ne-resize';
         }
-        else if (x >= (actObj.verLeftLinePointColl[Math.round(actObj.verLeftLinePointColl.length / 2)].x - 5) &&
-            x <= (actObj.verLeftLinePointColl[Math.round(actObj.verLeftLinePointColl.length / 2)].x + 5) &&
-            y >= (actObj.verLeftLinePointColl[Math.round(actObj.verLeftLinePointColl.length / 2)].y - 5)
-            && y <= (actObj.verLeftLinePointColl[Math.round(actObj.verLeftLinePointColl.length / 2)].y + 5)) {
+        else if (x >= (verLP.x - 5) && x <= (verLP.x + 5) && y >= (verLP.y - 5) && y <= (verLP.y + 5)) {
             upperCanvas.style.cursor = parent.cursor = this.resizedElement = 'w-resize';
         }
-        else if (x >= (actObj.verRightLinePointColl[Math.round(actObj.verRightLinePointColl.length / 2)].x - 5) &&
-            x <= (actObj.verRightLinePointColl[Math.round(actObj.verRightLinePointColl.length / 2)].x + 5)
-            && y >= (actObj.verRightLinePointColl[Math.round(actObj.verRightLinePointColl.length / 2)].y - 5) &&
-            y <= (actObj.verRightLinePointColl[Math.round(actObj.verRightLinePointColl.length / 2)].y + 5)) {
+        else if (x >= (verRP.x - 5) && x <= (verRP.x + 5) && y >= (verRP.y - 5) && y <= (verRP.y + 5)) {
             upperCanvas.style.cursor = parent.cursor = this.resizedElement = 'e-resize';
         }
-        else if (x >= (actObj.horBottomLinePointColl[0].x - (actObj.bottomCenterCircle.radius + 2)) &&
-            x <= (actObj.horBottomLinePointColl[0].x + (actObj.bottomCenterCircle.radius + 2)) &&
-            y >= (actObj.horBottomLinePointColl[0].y - (actObj.bottomCenterCircle.radius + 2)) &&
-            y <= (actObj.horBottomLinePointColl[0].y + (actObj.bottomCenterCircle.radius + 2))) {
+        else if (x >= (horBP0.x - (radius + 2)) && x <= (horBP0.x + (radius + 2)) && y >= (horBP0.y - (radius + 2)) &&
+            y <= (horBP0.y + (radius + 2))) {
             upperCanvas.style.cursor = parent.cursor = 'sw-resize';
         }
-        else if (x >= (actObj.horBottomLinePointColl[Math.round(actObj.horBottomLinePointColl.length / 2)].x - 5) &&
-            x <= (actObj.horBottomLinePointColl[Math.round(actObj.horBottomLinePointColl.length / 2)].x + 5) &&
-            y >= (actObj.horBottomLinePointColl[Math.round(actObj.horBottomLinePointColl.length / 2)].y - 5) &&
-            y <= (actObj.horBottomLinePointColl[Math.round(actObj.horBottomLinePointColl.length / 2)].y + 5)) {
+        else if (x >= (horBP.x - 5) && x <= (horBP.x + 5) && y >= (horBP.y - 5) && y <= (horBP.y + 5)) {
             upperCanvas.style.cursor = parent.cursor = this.resizedElement = 's-resize';
         }
-        else if (x >= (actObj.horBottomLinePointColl[Math.round(actObj.horBottomLinePointColl.length - 1)].x -
-            (actObj.bottomCenterCircle.radius + 2)) &&
-            x <= (actObj.horBottomLinePointColl[Math.round(actObj.horBottomLinePointColl.length - 1)].x +
-                (actObj.bottomCenterCircle.radius + 2)) &&
-            y >= (actObj.horBottomLinePointColl[Math.round(actObj.horBottomLinePointColl.length - 1)].y -
-                (actObj.bottomCenterCircle.radius + 2)) &&
-            y <= (actObj.horBottomLinePointColl[Math.round(actObj.horBottomLinePointColl.length - 1)].y +
-                (actObj.bottomCenterCircle.radius + 2))) {
+        else if (x >= (horBP1.x - (radius + 2)) && x <= (horBP1.x + (radius + 2)) && y >= (horBP1.y - (radius + 2)) &&
+            y <= (horBP1.y + (radius + 2))) {
             upperCanvas.style.cursor = parent.cursor = 'se-resize';
         }
-        else if (actObj.rotationCirclePointColl &&
-            x >= (actObj.rotationCirclePointColl.x - (actObj.bottomCenterCircle.radius + 2)) &&
-            x <= actObj.rotationCirclePointColl.x + (actObj.bottomCenterCircle.radius + 2) &&
-            y >= actObj.rotationCirclePointColl.y - (actObj.bottomCenterCircle.radius + 2) &&
-            y <= actObj.rotationCirclePointColl.y + (actObj.bottomCenterCircle.radius + 2)) {
+        else if (rotCP && x >= (rotCP.x - (radius + 2)) && x <= rotCP.x + (radius + 2) && y >= rotCP.y - (radius + 2) &&
+            y <= rotCP.y + (radius + 2)) {
             upperCanvas.style.cursor = parent.cursor = 'grabbing';
         }
         else {
@@ -623,10 +621,8 @@ var Selection = /** @class */ (function () {
         }
         if (parent.cursor === 'default') {
             for (var i = 0, len = actObj.horTopLinePointColl.length; i < len; i++) {
-                if (x >= (actObj.horTopLinePointColl[i].x - 5) &&
-                    x <= (actObj.horTopLinePointColl[i].x + 5) &&
-                    y >= (actObj.horTopLinePointColl[i].y - 5) &&
-                    y <= (actObj.horTopLinePointColl[i].y + 5)) {
+                var horTP_1 = actObj.horTopLinePointColl[i];
+                if (x >= (horTP_1.x - 5) && x <= (horTP_1.x + 5) && y >= (horTP_1.y - 5) && y <= (horTP_1.y + 5)) {
                     upperCanvas.style.cursor = parent.cursor = this.resizedElement = 'n-resize';
                     break;
                 }
@@ -634,10 +630,8 @@ var Selection = /** @class */ (function () {
         }
         if (parent.cursor === 'default') {
             for (var i = 0, len = actObj.horBottomLinePointColl.length; i < len; i++) {
-                if (x >= (actObj.horBottomLinePointColl[i].x - 5) &&
-                    x <= (actObj.horBottomLinePointColl[i].x + 5) &&
-                    y >= (actObj.horBottomLinePointColl[i].y - 5) &&
-                    y <= (actObj.horBottomLinePointColl[i].y + 5)) {
+                var horBP_1 = actObj.horBottomLinePointColl[i];
+                if (x >= (horBP_1.x - 5) && x <= (horBP_1.x + 5) && y >= (horBP_1.y - 5) && y <= (horBP_1.y + 5)) {
                     upperCanvas.style.cursor = parent.cursor = this.resizedElement = 's-resize';
                     break;
                 }
@@ -645,10 +639,8 @@ var Selection = /** @class */ (function () {
         }
         if (parent.cursor === 'default') {
             for (var i = 0, len = actObj.verLeftLinePointColl.length; i < len; i++) {
-                if (x >= (actObj.verLeftLinePointColl[i].x - 5) &&
-                    x <= (actObj.verLeftLinePointColl[i].x + 5) &&
-                    y >= (actObj.verLeftLinePointColl[i].y - 5) &&
-                    y <= (actObj.verLeftLinePointColl[i].y + 5)) {
+                var verLP_1 = actObj.verLeftLinePointColl[i];
+                if (x >= (verLP_1.x - 5) && x <= (verLP_1.x + 5) && y >= (verLP_1.y - 5) && y <= (verLP_1.y + 5)) {
                     upperCanvas.style.cursor = parent.cursor = this.resizedElement = 'w-resize';
                     break;
                 }
@@ -656,10 +648,8 @@ var Selection = /** @class */ (function () {
         }
         if (parent.cursor === 'default') {
             for (var i = 0, len = actObj.verRightLinePointColl.length; i < len; i++) {
-                if (x >= (actObj.verRightLinePointColl[i].x - 5) &&
-                    x <= (actObj.verRightLinePointColl[i].x + 5) &&
-                    y >= (actObj.verRightLinePointColl[i].y - 5) &&
-                    y <= (actObj.verRightLinePointColl[i].y + 5)) {
+                var verRP_1 = actObj.verRightLinePointColl[i];
+                if (x >= (verRP_1.x - 5) && x <= (verRP_1.x + 5) && y >= (verRP_1.y - 5) && y <= (verRP_1.y + 5)) {
                     upperCanvas.style.cursor = parent.cursor = this.resizedElement = 'e-resize';
                     break;
                 }
@@ -686,62 +676,64 @@ var Selection = /** @class */ (function () {
     };
     Selection.prototype.getResizeElement = function (degree, element) {
         var resizeMappings = [];
-        if (element === 'nw-resize') {
-            resizeMappings = [
-                [337.5, 22.5, 'nw-resize'], [22.5, 67.5, 'n-resize'], [67.5, 112.5, 'ne-resize'],
-                [112.5, 157.5, 'e-resize'], [157.5, 202.5, 'se-resize'],
-                [202.5, 247.5, 's-resize'], [247.5, 292.5, 'sw-resize'],
-                [292.5, 337.5, 'w-resize']
-            ];
-        }
-        else if (element === 'n-resize') {
-            resizeMappings = [
-                [337.5, 22.5, 'n-resize'], [22.5, 67.5, 'ne-resize'], [67.5, 112.5, 'e-resize'],
-                [112.5, 157.5, 'se-resize'], [157.5, 202.5, 's-resize'], [202.5, 247.5, 'sw-resize'],
-                [247.5, 292.5, 'w-resize'], [292.5, 337.5, 'nw-resize']
-            ];
-        }
-        else if (element === 'ne-resize') {
-            resizeMappings = [
-                [337.5, 22.5, 'ne-resize'], [22.5, 67.5, 'e-resize'],
-                [67.5, 112.5, 'se-resize'], [112.5, 157.5, 's-resize'], [157.5, 202.5, 'sw-resize'],
-                [202.5, 247.5, 'w-resize'], [247.5, 292.5, 'nw-resize'], [292.5, 337.5, 'n-resize']
-            ];
-        }
-        else if (element === 'e-resize') {
-            resizeMappings = [
-                [337.5, 22.5, 'e-resize'], [22.5, 67.5, 'se-resize'], [67.5, 112.5, 's-resize'],
-                [112.5, 157.5, 'sw-resize'], [157.5, 202.5, 'w-resize'], [202.5, 247.5, 'nw-resize'],
-                [247.5, 292.5, 'n-resize'], [292.5, 337.5, 'ne-resize']
-            ];
-        }
-        else if (element === 'se-resize') {
-            resizeMappings = [
-                [337.5, 22.5, 'se-resize'], [22.5, 67.5, 's-resize'], [67.5, 112.5, 'sw-resize'],
-                [112.5, 157.5, 'w-resize'], [157.5, 202.5, 'nw-resize'], [202.5, 247.5, 'n-resize'],
-                [247.5, 292.5, 'ne-resize'], [292.5, 337.5, 'e-resize']
-            ];
-        }
-        else if (element === 's-resize') {
-            resizeMappings = [
-                [337.5, 22.5, 's-resize'], [22.5, 67.5, 'sw-resize'], [67.5, 112.5, 'w-resize'],
-                [112.5, 157.5, 'nw-resize'], [157.5, 202.5, 'n-resize'], [202.5, 247.5, 'ne-resize'],
-                [247.5, 292.5, 'e-resize'], [292.5, 337.5, 'se-resize']
-            ];
-        }
-        else if (element === 'sw-resize') {
-            resizeMappings = [
-                [337.5, 22.5, 'sw-resize'], [22.5, 67.5, 'w-resize'], [67.5, 112.5, 'nw-resize'],
-                [112.5, 157.5, 'n-resize'], [157.5, 202.5, 'ne-resize'], [202.5, 247.5, 'e-resize'],
-                [247.5, 292.5, 'se-resize'], [292.5, 337.5, 's-resize']
-            ];
-        }
-        else if (element === 'w-resize') {
-            resizeMappings = [
-                [337.5, 22.5, 'w-resize'], [22.5, 67.5, 'nw-resize'], [67.5, 112.5, 'n-resize'],
-                [112.5, 157.5, 'ne-resize'], [157.5, 202.5, 'e-resize'], [202.5, 247.5, 'se-resize'],
-                [247.5, 292.5, 's-resize'], [292.5, 337.5, 'sw-resize']
-            ];
+        switch (element) {
+            case 'nw-resize':
+                resizeMappings = [
+                    [337.5, 22.5, 'nw-resize'], [22.5, 67.5, 'n-resize'], [67.5, 112.5, 'ne-resize'],
+                    [112.5, 157.5, 'e-resize'], [157.5, 202.5, 'se-resize'],
+                    [202.5, 247.5, 's-resize'], [247.5, 292.5, 'sw-resize'],
+                    [292.5, 337.5, 'w-resize']
+                ];
+                break;
+            case 'n-resize':
+                resizeMappings = [
+                    [337.5, 22.5, 'n-resize'], [22.5, 67.5, 'ne-resize'], [67.5, 112.5, 'e-resize'],
+                    [112.5, 157.5, 'se-resize'], [157.5, 202.5, 's-resize'], [202.5, 247.5, 'sw-resize'],
+                    [247.5, 292.5, 'w-resize'], [292.5, 337.5, 'nw-resize']
+                ];
+                break;
+            case 'ne-resize':
+                resizeMappings = [
+                    [337.5, 22.5, 'ne-resize'], [22.5, 67.5, 'e-resize'],
+                    [67.5, 112.5, 'se-resize'], [112.5, 157.5, 's-resize'], [157.5, 202.5, 'sw-resize'],
+                    [202.5, 247.5, 'w-resize'], [247.5, 292.5, 'nw-resize'], [292.5, 337.5, 'n-resize']
+                ];
+                break;
+            case 'e-resize':
+                resizeMappings = [
+                    [337.5, 22.5, 'e-resize'], [22.5, 67.5, 'se-resize'], [67.5, 112.5, 's-resize'],
+                    [112.5, 157.5, 'sw-resize'], [157.5, 202.5, 'w-resize'], [202.5, 247.5, 'nw-resize'],
+                    [247.5, 292.5, 'n-resize'], [292.5, 337.5, 'ne-resize']
+                ];
+                break;
+            case 'se-resize':
+                resizeMappings = [
+                    [337.5, 22.5, 'se-resize'], [22.5, 67.5, 's-resize'], [67.5, 112.5, 'sw-resize'],
+                    [112.5, 157.5, 'w-resize'], [157.5, 202.5, 'nw-resize'], [202.5, 247.5, 'n-resize'],
+                    [247.5, 292.5, 'ne-resize'], [292.5, 337.5, 'e-resize']
+                ];
+                break;
+            case 's-resize':
+                resizeMappings = [
+                    [337.5, 22.5, 's-resize'], [22.5, 67.5, 'sw-resize'], [67.5, 112.5, 'w-resize'],
+                    [112.5, 157.5, 'nw-resize'], [157.5, 202.5, 'n-resize'], [202.5, 247.5, 'ne-resize'],
+                    [247.5, 292.5, 'e-resize'], [292.5, 337.5, 'se-resize']
+                ];
+                break;
+            case 'sw-resize':
+                resizeMappings = [
+                    [337.5, 22.5, 'sw-resize'], [22.5, 67.5, 'w-resize'], [67.5, 112.5, 'nw-resize'],
+                    [112.5, 157.5, 'n-resize'], [157.5, 202.5, 'ne-resize'], [202.5, 247.5, 'e-resize'],
+                    [247.5, 292.5, 'se-resize'], [292.5, 337.5, 's-resize']
+                ];
+                break;
+            case 'w-resize':
+                resizeMappings = [
+                    [337.5, 22.5, 'w-resize'], [22.5, 67.5, 'nw-resize'], [67.5, 112.5, 'n-resize'],
+                    [112.5, 157.5, 'ne-resize'], [157.5, 202.5, 'e-resize'], [202.5, 247.5, 'se-resize'],
+                    [247.5, 292.5, 's-resize'], [292.5, 337.5, 'sw-resize']
+                ];
+                break;
         }
         var positiveDegree = degree < 0 ? 360 - Math.abs(degree) : degree;
         for (var _i = 0, resizeMappings_1 = resizeMappings; _i < resizeMappings_1.length; _i++) {
@@ -766,6 +758,8 @@ var Selection = /** @class */ (function () {
             parent.notify('freehand-draw', { prop: 'getSelPointColl', onPropertyChange: false, value: { obj: obj } });
             sPoints = extend([], obj['selPointColl'][n].points, []);
             parent.points = extend([], parent.pointColl[n].points, []);
+            /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
+            var ptc = parent.pointColl[n];
             parent.notify('freehand-draw', { prop: 'setPointCounter', onPropertyChange: false, value: { value: 0 } });
             var len = sPoints.length;
             for (var l = 0; l < len; l++) {
@@ -784,7 +778,7 @@ var Selection = /** @class */ (function () {
                         isEntered = true;
                         break;
                     }
-                    else if (!this.isFhdEditing || parent.pointColl[n].isSelected) {
+                    else if (!this.isFhdEditing || ptc.isSelected) {
                         if (this.isFhdPoint || this.isFhdEditing) {
                             upperContext.clearRect(0, 0, upperCanvas.width, upperCanvas.height);
                             if (parent.activeObj.shape && textArea.style.display === 'none') {
@@ -792,9 +786,9 @@ var Selection = /** @class */ (function () {
                             }
                         }
                         if (this.isFhdEditing) {
-                            var strokeColor = parent.pointColl[n].strokeColor;
+                            var strokeColor = ptc.strokeColor;
                             parent.notify('freehand-draw', { prop: 'hoverFhd', onPropertyChange: false,
-                                value: { strokeColor: strokeColor, strokeWidth: parent.pointColl[n].strokeWidth } });
+                                value: { strokeColor: strokeColor, strokeWidth: ptc.strokeWidth } });
                         }
                         else {
                             parent.notify('freehand-draw', { prop: 'setFreehandDrawHoveredIndex', onPropertyChange: false,
@@ -804,20 +798,17 @@ var Selection = /** @class */ (function () {
                     }
                 }
                 else {
-                    if (x > parent.points[l].x - parent.pointColl[n].strokeWidth &&
-                        x < parent.points[l].x + parent.pointColl[n].strokeWidth &&
-                        y > parent.points[l].y - parent.pointColl[n].strokeWidth &&
-                        y < parent.points[l].y + parent.pointColl[n].strokeWidth) {
+                    var pt = parent.points[l];
+                    if (x > pt.x - ptc.strokeWidth && x < pt.x + ptc.strokeWidth && y > pt.y - ptc.strokeWidth &&
+                        y < pt.y + ptc.strokeWidth) {
                         this.isFhdPoint = true;
-                        parent.notify('freehand-draw', { prop: 'setFreehandDrawHoveredIndex', onPropertyChange: false,
-                            value: { index: n } });
-                        parent.notify('freehand-draw', { prop: 'hoverFhd', onPropertyChange: false,
-                            value: { strokeColor: null, strokeWidth: null } });
+                        parent.notify('freehand-draw', { prop: 'setFreehandDrawHoveredIndex', onPropertyChange: false, value: { index: n } });
+                        parent.notify('freehand-draw', { prop: 'hoverFhd', onPropertyChange: false, value: { strokeColor: null, strokeWidth: null } });
                         upperCanvas.style.cursor = parent.cursor = 'pointer';
                         isEntered = true;
                         break;
                     }
-                    else if (!this.isFhdEditing || parent.pointColl[n].isSelected) {
+                    else if (!this.isFhdEditing || ptc.isSelected) {
                         if (this.isFhdPoint || this.isFhdEditing) {
                             upperContext.clearRect(0, 0, upperCanvas.width, upperCanvas.height);
                             if (parent.activeObj.shape && textArea.style.display === 'none') {
@@ -825,9 +816,9 @@ var Selection = /** @class */ (function () {
                             }
                         }
                         if (this.isFhdEditing) {
-                            var strokeColor = parent.pointColl[n].strokeColor;
+                            var strokeColor = ptc.strokeColor;
                             parent.notify('freehand-draw', { prop: 'hoverFhd', onPropertyChange: false,
-                                value: { strokeColor: strokeColor, strokeWidth: parent.pointColl[n].strokeWidth } });
+                                value: { strokeColor: strokeColor, strokeWidth: ptc.strokeWidth } });
                         }
                         this.isFhdPoint = false;
                     }
@@ -875,12 +866,14 @@ var Selection = /** @class */ (function () {
     Selection.prototype.updateActivePoint = function (x, y, isCropSelection) {
         var parent = this.parent;
         var obj = { width: 0, height: 0 };
+        var _a = parent.activeObj.activePoint, startX = _a.startX, startY = _a.startY, endX = _a.endX, endY = _a.endY;
+        var _b = parent.activeObj.activePoint, width = _b.width, height = _b.height;
         parent.notify('transform', { prop: 'calcMaxDimension', onPropertyChange: false,
-            value: { width: parent.activeObj.activePoint.width, height: parent.activeObj.activePoint.height, obj: obj, isImgShape: null } });
+            value: { width: width, height: height, obj: obj, isImgShape: null } });
         var maxDimension = obj;
         var previousShapeSettings = this.updatePrevShapeSettings();
-        var shapeResizingArgs = { action: 'resize', previousShapeSettings: previousShapeSettings };
-        var shapeMovingArgs = { action: 'move', previousShapeSettings: previousShapeSettings };
+        var shapeResizingArgs = { cancel: false, action: 'resize', previousShapeSettings: previousShapeSettings };
+        var shapeMovingArgs = { cancel: false, action: 'move', previousShapeSettings: previousShapeSettings };
         this.shapeResizingArgs = shapeResizingArgs;
         this.shapeMovingArgs = shapeMovingArgs;
         if (parent.activeObj.shape === 'text' && this.dragElement !== '') {
@@ -888,21 +881,21 @@ var Selection = /** @class */ (function () {
                 value: { obj: parent.activeObj, isTextArea: null } });
         }
         if (this.currentDrawingShape !== '' && (this.dragElement === '' || this.dragElement === 'move')) {
-            if (parent.activeObj.shape === 'line' || parent.activeObj.shape === 'arrow' ||
-                parent.activeObj.shape === 'path') {
+            var shapeColl = ['line', 'arrow', 'path'];
+            if (shapeColl.indexOf(parent.activeObj.shape) > -1) {
                 this.dragElement = 'e-resize';
             }
             else {
-                if (x > parent.activeObj.activePoint.startX && y > parent.activeObj.activePoint.startY) {
+                if (x > startX && y > startY) {
                     this.dragElement = 'se-resize';
                 }
-                else if (x < parent.activeObj.activePoint.startX && y > parent.activeObj.activePoint.startY) {
+                else if (x < startX && y > startY) {
                     this.dragElement = 'sw-resize';
                 }
-                else if (x > parent.activeObj.activePoint.startX && y < parent.activeObj.activePoint.startY) {
+                else if (x > startX && y < startY) {
                     this.dragElement = 'ne-resize';
                 }
-                else if (x < parent.activeObj.activePoint.startX && y < parent.activeObj.activePoint.startY) {
+                else if (x < startX && y < startY) {
                     this.dragElement = 'nw-resize';
                 }
             }
@@ -918,6 +911,9 @@ var Selection = /** @class */ (function () {
         var degree;
         var isHorizontalflip = false;
         var isVerticalflip = false;
+        if (isCropSelection && parent.transform.straighten !== 0 && this.isMouseOutsideImg(x, y)) {
+            return;
+        }
         switch (this.dragElement.toLowerCase()) {
             case 'nw-resize':
                 this.updateNWPoints(x, y, maxDimension);
@@ -968,14 +964,11 @@ var Selection = /** @class */ (function () {
                 this.triggerShapeChange(shapeResizingArgs, shapeMovingArgs, 'resize');
                 break;
             case 'grabbing':
-                if (Math.atan2(x - (parent.activeObj.activePoint.startX + (parent.activeObj.activePoint.width / 2)), y - (parent.activeObj.activePoint.startY + (parent.activeObj.activePoint.height / 2))) > 0) {
-                    parent.activeObj.rotatedAngle = -Math.atan2(x - (parent.activeObj.activePoint.startX + (parent.activeObj.activePoint.width
-                        / 2)), y - (parent.activeObj.activePoint.startY + (parent.activeObj.activePoint.height / 2)));
+                if (Math.atan2(x - (startX + (width / 2)), y - (startY + (height / 2))) > 0) {
+                    parent.activeObj.rotatedAngle = -Math.atan2(x - (startX + (width / 2)), y - (startY + (height / 2)));
                 }
                 else {
-                    parent.activeObj.rotatedAngle = Math.abs(Math.atan2(x - (parent.activeObj.activePoint.startX +
-                        (parent.activeObj.activePoint.width / 2)), y - (parent.activeObj.activePoint.startY +
-                        (parent.activeObj.activePoint.height / 2))));
+                    parent.activeObj.rotatedAngle = Math.abs(Math.atan2(x - (startX + (width / 2)), y - (startY + (height / 2))));
                 }
                 if (parent.activeObj.shapeDegree === 0) {
                     degree = parent.transform.degree;
@@ -1024,52 +1017,57 @@ var Selection = /** @class */ (function () {
                 break;
             default:
                 if (!isCropSelection && !parent.currObjType.isCustomCrop) {
+                    var activePoint = parent.activeObj.activePoint;
                     if (this.dragPoint.startX) {
-                        var width = (this.dragPoint.endX - this.previousPoint.x);
-                        var height = (this.dragPoint.endY - this.previousPoint.y);
-                        parent.activeObj.activePoint.startX += width;
-                        parent.activeObj.activePoint.endX += width;
-                        parent.activeObj.activePoint.startY += height;
-                        parent.activeObj.activePoint.endY += height;
+                        var width_1 = (this.dragPoint.endX - this.previousPoint.x);
+                        var height_1 = (this.dragPoint.endY - this.previousPoint.y);
+                        activePoint.startX += width_1;
+                        activePoint.endX += width_1;
+                        activePoint.startY += height_1;
+                        activePoint.endY += height_1;
+                        startX = activePoint.startX;
+                        startY = activePoint.startY;
+                        endX = activePoint.endX;
+                        endY = activePoint.endY;
                         if (parent.activeObj.shape !== 'line' && parent.activeObj.shape !== 'arrow' &&
                             parent.activeObj.rotationCirclePointColl) {
-                            parent.activeObj.rotationCirclePointColl.x += width;
-                            parent.activeObj.rotationCirclePointColl.y += height;
-                            parent.activeObj.rotationCirclePoint.x += width;
-                            parent.activeObj.rotationCirclePoint.y += height;
+                            parent.activeObj.rotationCirclePointColl.x += width_1;
+                            parent.activeObj.rotationCirclePointColl.y += height_1;
+                            parent.activeObj.rotationCirclePoint.x += width_1;
+                            parent.activeObj.rotationCirclePoint.y += height_1;
                         }
                         if (parent.activeObj.shape === 'path') {
                             for (var i = 0, len = parent.activeObj.pointColl.length; i < len; i++) {
-                                parent.activeObj.pointColl[i].x += width;
-                                parent.activeObj.pointColl[i].y += height;
+                                parent.activeObj.pointColl[i].x += width_1;
+                                parent.activeObj.pointColl[i].y += height_1;
                             }
                         }
-                        if (!this.isPreventDragging && parent.activeObj.shape !== 'line' && (parent.activeObj.rotatedAngle === 0 && (parent.activeObj.activePoint.startX < parent.img.destLeft ||
-                            parent.activeObj.activePoint.startY < parent.img.destTop || parent.activeObj.activePoint.endX >
-                            parent.img.destLeft + parent.img.destWidth || parent.activeObj.activePoint.endY > parent.img.destTop
+                        if (!this.isPreventDragging && parent.activeObj.shape !== 'line' && (parent.activeObj.rotatedAngle === 0 && (startX < parent.img.destLeft ||
+                            startY < parent.img.destTop || endX >
+                            parent.img.destLeft + parent.img.destWidth || endY > parent.img.destTop
                             + parent.img.destHeight))) {
-                            parent.activeObj.activePoint.startX -= width;
-                            parent.activeObj.activePoint.endX -= width;
-                            parent.activeObj.activePoint.startY -= height;
-                            parent.activeObj.activePoint.endY -= height;
+                            activePoint.startX -= width_1;
+                            activePoint.endX -= width_1;
+                            activePoint.startY -= height_1;
+                            activePoint.endY -= height_1;
                             if (parent.activeObj.shape !== 'line' && parent.activeObj.shape !== 'arrow' &&
                                 parent.activeObj.rotationCirclePointColl) {
-                                parent.activeObj.rotationCirclePointColl.x -= width;
-                                parent.activeObj.rotationCirclePointColl.y -= height;
-                                parent.activeObj.rotationCirclePoint.x -= width;
-                                parent.activeObj.rotationCirclePoint.y -= height;
+                                parent.activeObj.rotationCirclePointColl.x -= width_1;
+                                parent.activeObj.rotationCirclePointColl.y -= height_1;
+                                parent.activeObj.rotationCirclePoint.x -= width_1;
+                                parent.activeObj.rotationCirclePoint.y -= height_1;
                             }
-                            this.setDragWidth(width);
-                            this.setDragHeight(height);
+                            this.setDragWidth(width_1);
+                            this.setDragHeight(height_1);
                         }
                     }
                     else {
-                        parent.activeObj.activePoint.startX = x < this.mouseDownPoint.x ? x : this.mouseDownPoint.x;
-                        parent.activeObj.activePoint.startY = y < this.mouseDownPoint.y ? y : this.mouseDownPoint.y;
+                        activePoint.startX = x < this.mouseDownPoint.x ? x : this.mouseDownPoint.x;
+                        activePoint.startY = y < this.mouseDownPoint.y ? y : this.mouseDownPoint.y;
                         x = x < this.mouseDownPoint.x ? this.mouseDownPoint.x : x;
                         y = y < this.mouseDownPoint.y ? this.mouseDownPoint.y : y;
-                        parent.activeObj.activePoint.endX = x;
-                        parent.activeObj.activePoint.endY = y;
+                        activePoint.endX = x;
+                        activePoint.endY = y;
                     }
                     this.triggerShapeChange(shapeResizingArgs, shapeMovingArgs, 'move');
                 }
@@ -1078,8 +1076,9 @@ var Selection = /** @class */ (function () {
     };
     Selection.prototype.triggerShapeChange = function (shapeResizingArgs, shapeMovingArgs, type) {
         var parent = this.parent;
-        parent.activeObj.activePoint.width = parent.activeObj.activePoint.endX - parent.activeObj.activePoint.startX;
-        parent.activeObj.activePoint.height = parent.activeObj.activePoint.endY - parent.activeObj.activePoint.startY;
+        var actPoint = parent.activeObj.activePoint;
+        actPoint.width = actPoint.endX - actPoint.startX;
+        actPoint.height = actPoint.endY - actPoint.startY;
         var currentShapeSettings = this.updatePrevShapeSettings();
         if (!isNullOrUndefined(this.shapeResizingArgs) && !isNullOrUndefined(this.shapeMovingArgs)) {
             shapeResizingArgs.currentShapeSettings = this.shapeResizingArgs.currentShapeSettings = currentShapeSettings;
@@ -1098,10 +1097,10 @@ var Selection = /** @class */ (function () {
             if (splitWords !== undefined && splitWords[0] === 'crop') {
                 this.isCropSelection = true;
             }
-            if (!this.isCropSelection && this.parent.eventType !== 'resize' && isBlazor() && parent.events && this.parent.events.onShapeResizeStart.hasDelegate === true) {
+            if (!this.isCropSelection && parent.eventType !== 'resize' && isBlazor() && parent.events && parent.events.onShapeResizeStart.hasDelegate === true) {
                 shapeResizingArgs.action = this.currentDrawingShape !== '' ? 'drawing' : 'resize-start';
                 /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
-                parent.dotNetRef.invokeMethodAsync('ShapeEventAsync', 'OnShapeResizeStart', shapeResizingArgs).then(function (shapeResizingArgs) {
+                parent.dotNetRef.invokeMethodAsync('ShapeEventAsync', 'OnShapeResizeStart', shapeResizingArgs, null).then(function (shapeResizingArgs) {
                     parent.notify('shape', { prop: 'updateShapeChangeEventArgs', onPropertyChange: false,
                         value: { shapeSettings: shapeResizingArgs.currentShapeSettings } });
                 });
@@ -1127,7 +1126,7 @@ var Selection = /** @class */ (function () {
                         width: shapeResizingArgs.currentShapeSettings.width,
                         height: shapeResizingArgs.currentShapeSettings.height } };
                 this.selectionResizingArgs = selectionResizingArgs;
-                if (isBlazor() && isNullOrUndefined(this.parent.eventType) && parent.events &&
+                if (isBlazor() && isNullOrUndefined(parent.eventType) && parent.events &&
                     parent.events.onSelectionResizeStart.hasDelegate === true) {
                     selectionResizingArgs.action = 'resize-start';
                     /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
@@ -1146,7 +1145,7 @@ var Selection = /** @class */ (function () {
         else if (type === 'mouse-down' || type === 'mouse-up') {
             if (isBlazor() && parent.events && parent.events.shapeChanging.hasDelegate === true) {
                 /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
-                parent.dotNetRef.invokeMethodAsync('ShapeEventAsync', 'OnShape', shapeResizingArgs).then(function (shapeResizingArgs) {
+                parent.dotNetRef.invokeMethodAsync('ShapeEventAsync', 'OnShape', shapeResizingArgs, null).then(function (shapeResizingArgs) {
                     parent.notify('shape', { prop: 'updateShapeChangeEventArgs', onPropertyChange: false,
                         value: { shapeSettings: shapeResizingArgs.currentShapeSettings } });
                 });
@@ -1158,11 +1157,11 @@ var Selection = /** @class */ (function () {
             }
         }
         else {
-            if (isBlazor() && isNullOrUndefined(this.parent.eventType) && parent.events &&
+            if (isBlazor() && isNullOrUndefined(parent.eventType) && parent.events &&
                 parent.events.onShapeDragStart.hasDelegate === true) {
                 shapeMovingArgs.action = 'drag-start';
                 /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
-                parent.dotNetRef.invokeMethodAsync('ShapeEventAsync', 'OnShapeDragStart', shapeMovingArgs).then(function (shapeMovingArgs) {
+                parent.dotNetRef.invokeMethodAsync('ShapeEventAsync', 'OnShapeDragStart', shapeMovingArgs, null).then(function (shapeMovingArgs) {
                     parent.notify('shape', { prop: 'updateShapeChangeEventArgs', onPropertyChange: false,
                         value: { shapeSettings: shapeMovingArgs.currentShapeSettings } });
                 });
@@ -1173,128 +1172,154 @@ var Selection = /** @class */ (function () {
                     value: { shapeSettings: shapeMovingArgs.currentShapeSettings } });
             }
         }
-        this.parent.eventType = type;
+        parent.eventType = type;
     };
     Selection.prototype.setDragWidth = function (width) {
         var parent = this.parent;
+        var actPoint = parent.activeObj.activePoint;
+        var _a = parent.img, destLeft = _a.destLeft, destWidth = _a.destWidth;
         var tempWidth = width;
         if (tempWidth >= 0) {
             for (var i = 0; i < tempWidth; i++) {
                 width = tempWidth - i;
-                parent.activeObj.activePoint.startX += width;
-                parent.activeObj.activePoint.endX += width;
-                if (parent.activeObj.activePoint.startX >= parent.img.destLeft &&
-                    parent.activeObj.activePoint.endX <= parent.img.destLeft + parent.img.destWidth) {
+                actPoint.startX += width;
+                actPoint.endX += width;
+                if (actPoint.startX >= destLeft &&
+                    actPoint.endX <= destLeft + destWidth) {
                     break;
                 }
                 else {
-                    parent.activeObj.activePoint.startX -= width;
-                    parent.activeObj.activePoint.endX -= width;
+                    actPoint.startX -= width;
+                    actPoint.endX -= width;
                 }
             }
         }
         else {
             for (var i = 1; i < Math.abs(tempWidth); i++) {
                 width = tempWidth + i;
-                parent.activeObj.activePoint.startX += width;
-                parent.activeObj.activePoint.endX += width;
-                if (parent.activeObj.activePoint.startX >= parent.img.destLeft &&
-                    parent.activeObj.activePoint.endX <= parent.img.destLeft + parent.img.destWidth) {
+                actPoint.startX += width;
+                actPoint.endX += width;
+                if (actPoint.startX >= destLeft &&
+                    actPoint.endX <= destLeft + destWidth) {
                     break;
                 }
                 else {
-                    parent.activeObj.activePoint.startX -= width;
-                    parent.activeObj.activePoint.endX -= width;
+                    actPoint.startX -= width;
+                    actPoint.endX -= width;
                 }
             }
         }
     };
     Selection.prototype.setDragHeight = function (height) {
         var parent = this.parent;
+        var actPoint = parent.activeObj.activePoint;
+        var _a = parent.img, destTop = _a.destTop, destHeight = _a.destHeight;
         var tempHeight = height;
         if (tempHeight >= 0) {
             for (var i = 1; i < tempHeight; i++) {
                 height = tempHeight - i;
-                parent.activeObj.activePoint.startY += height;
-                parent.activeObj.activePoint.endY += height;
-                if (parent.activeObj.activePoint.startY >= parent.img.destTop &&
-                    parent.activeObj.activePoint.endY <= parent.img.destTop + parent.img.destHeight) {
+                actPoint.startY += height;
+                actPoint.endY += height;
+                if (actPoint.startY >= destTop &&
+                    actPoint.endY <= destTop + destHeight) {
                     break;
                 }
                 else {
-                    parent.activeObj.activePoint.startY -= height;
-                    parent.activeObj.activePoint.endY -= height;
+                    actPoint.startY -= height;
+                    actPoint.endY -= height;
                 }
             }
         }
         else {
             for (var i = 0; i < Math.abs(tempHeight); i++) {
                 height = tempHeight + i;
-                parent.activeObj.activePoint.startY += height;
-                parent.activeObj.activePoint.endY += height;
-                if (parent.activeObj.activePoint.startY >= parent.img.destTop &&
-                    parent.activeObj.activePoint.endY <= parent.img.destTop + parent.img.destHeight) {
+                actPoint.startY += height;
+                actPoint.endY += height;
+                if (actPoint.startY >= destTop &&
+                    actPoint.endY <= destTop + destHeight) {
                     break;
                 }
                 else {
-                    parent.activeObj.activePoint.startY -= height;
-                    parent.activeObj.activePoint.endY -= height;
+                    actPoint.startY -= height;
+                    actPoint.endY -= height;
                 }
             }
         }
     };
     Selection.prototype.limitDrag = function (isStart) {
+        var isLimiting = false;
         var parent = this.parent;
-        var startX = isStart ? parent.activeObj.activePoint.startX : parent.activeObj.activePoint.endX;
-        var startY = isStart ? parent.activeObj.activePoint.startY : parent.activeObj.activePoint.endY;
-        var endX = isStart ? parent.activeObj.activePoint.endX : parent.activeObj.activePoint.startX;
-        var endY = isStart ? parent.activeObj.activePoint.endY : parent.activeObj.activePoint.startY;
-        if (startX < parent.img.destLeft) {
-            startX = parent.img.destLeft;
-        }
-        if (startY < parent.img.destTop) {
-            startY = parent.img.destTop;
-        }
-        if (endX > parent.img.destLeft + parent.img.destWidth) {
-            endX = parent.img.destLeft + parent.img.destWidth;
-        }
-        if (endY > parent.img.destTop + parent.img.destHeight) {
-            endY = parent.img.destTop + parent.img.destHeight;
+        var _a = parent.img, destLeft = _a.destLeft, destTop = _a.destTop, destWidth = _a.destWidth, destHeight = _a.destHeight;
+        var actPoint = parent.activeObj.activePoint;
+        var startX = isStart ? actPoint.startX : actPoint.endX;
+        var startY = isStart ? actPoint.startY : actPoint.endY;
+        var endX = isStart ? actPoint.endX : actPoint.startX;
+        var endY = isStart ? actPoint.endY : actPoint.startY;
+        if (startX < destLeft) {
+            startX = destLeft;
+        }
+        if (startY < destTop) {
+            startY = destTop;
+        }
+        if (endX > destLeft + destWidth) {
+            endX = destLeft + destWidth;
+        }
+        if (endY > destTop + destHeight) {
+            endY = destTop + destHeight;
+        }
+        if (parent.transform.straighten !== 0) {
+            var obj = { isIntersect: null, arr: null };
+            parent.notify('draw', { prop: 'updateImgCanvasPoints', onPropertyChange: false });
+            parent.notify('draw', { prop: 'isLinesIntersect', onPropertyChange: false, value: { obj: obj } });
+            if (obj['arr'][0] || obj['arr'][1] || obj['arr'][2] || obj['arr'][3]) {
+                isLimiting = true;
+            }
         }
         if (isStart) {
-            parent.activeObj.activePoint.startX = startX;
-            parent.activeObj.activePoint.startY = startY;
-            parent.activeObj.activePoint.endX = endX;
-            parent.activeObj.activePoint.endY = endY;
+            actPoint.startX = startX;
+            actPoint.startY = startY;
+            actPoint.endX = endX;
+            actPoint.endY = endY;
         }
         else {
-            parent.activeObj.activePoint.startX = endX;
-            parent.activeObj.activePoint.startY = endY;
-            parent.activeObj.activePoint.endX = startX;
-            parent.activeObj.activePoint.endY = startY;
+            actPoint.startX = endX;
+            actPoint.startY = endY;
+            actPoint.endX = startX;
+            actPoint.endY = startY;
         }
+        return isLimiting;
+    };
+    Selection.prototype.isMouseOutsideImg = function (x, y) {
+        var obj = { bool: false };
+        this.parent.notify('draw', { prop: 'updateImgCanvasPoints', onPropertyChange: false });
+        this.parent.notify('draw', { prop: 'isPointsInsideImg', value: { obj: obj, x: x, y: y } });
+        return obj['bool'];
     };
     Selection.prototype.preventDraggingInvertly = function () {
+        var isLimiting = false;
         var parent = this.parent;
         if (parent.activeObj.shape === 'image') {
-            return;
+            return isLimiting;
         }
         if (!this.isPreventDragging && parent.activeObj.rotatedAngle === 0) {
-            this.limitDrag(true);
-            if (parent.activeObj.shape === 'line' || parent.activeObj.shape === 'arrow' ||
-                parent.activeObj.shape === 'path') {
-                this.limitDrag(false);
+            isLimiting = this.limitDrag(true);
+            var shapeColl = ['line', 'arrow', 'path'];
+            if (shapeColl.indexOf(parent.activeObj.shape) > -1) {
+                isLimiting = this.limitDrag(false);
             }
         }
+        return isLimiting;
     };
     Selection.prototype.preventTextDraggingInvertly = function () {
         var parent = this.parent;
         var isLimiting = false;
+        var actPoint = parent.activeObj.activePoint;
+        var _a = parent.img, destLeft = _a.destLeft, destTop = _a.destTop, destWidth = _a.destWidth, destHeight = _a.destHeight;
         if (!this.isPreventDragging) {
-            if (parent.activeObj.activePoint.startX < parent.img.destLeft ||
-                parent.activeObj.activePoint.startY < parent.img.destTop ||
-                parent.activeObj.activePoint.endX > parent.img.destLeft + parent.img.destWidth ||
-                parent.activeObj.activePoint.endY > parent.img.destTop + parent.img.destHeight) {
+            if (actPoint.startX < destLeft ||
+                actPoint.startY < destTop ||
+                actPoint.endX > destLeft + destWidth ||
+                actPoint.endY > destTop + destHeight) {
                 isLimiting = true;
             }
         }
@@ -1302,15 +1327,16 @@ var Selection = /** @class */ (function () {
     };
     Selection.prototype.preventInverseResize = function (tempActiveObj) {
         var parent = this.parent;
-        if (parent.activeObj.activePoint.width < 0) {
-            parent.activeObj.activePoint.width = 0;
-            parent.activeObj.activePoint.startX = tempActiveObj.activePoint.startX;
-            parent.activeObj.activePoint.endX = tempActiveObj.activePoint.endX;
+        var actPoint = parent.activeObj.activePoint;
+        if (actPoint.width < 0) {
+            actPoint.width = 0;
+            actPoint.startX = tempActiveObj.activePoint.startX;
+            actPoint.endX = tempActiveObj.activePoint.endX;
         }
-        if (parent.activeObj.activePoint.height < 0) {
-            parent.activeObj.activePoint.height = 0;
-            parent.activeObj.activePoint.startY = tempActiveObj.activePoint.startY;
-            parent.activeObj.activePoint.endY = tempActiveObj.activePoint.endY;
+        if (actPoint.height < 0) {
+            actPoint.height = 0;
+            actPoint.startY = tempActiveObj.activePoint.startY;
+            actPoint.endY = tempActiveObj.activePoint.endY;
         }
     };
     Selection.prototype.getScaleRatio = function (scale) {
@@ -1318,11 +1344,11 @@ var Selection = /** @class */ (function () {
         var point = { x: scale, y: scale };
         if (parent.activeObj.shape && parent.activeObj.shape !== 'crop-custom' &&
             parent.activeObj.shape !== 'crop-circle' && parent.activeObj.shape !== 'crop-square') {
-            var ratio = parent.activeObj.shape === 'image' ?
+            var ratio = parent.activeObj.shape === 'image' || parent.activeObj.shape === 'text' ?
                 this.findImageRatio(parent.activeObj.activePoint.width, parent.activeObj.activePoint.height).split('-') :
                 parent.activeObj.shape.split('-');
-            if (ratio.length > 1 || parent.activeObj.shape === 'image') {
-                ratio = parent.activeObj.shape === 'image' ? ratio[0].split(':') : ratio[1].split(':');
+            if (ratio.length > 1 || parent.activeObj.shape === 'image' || parent.activeObj.shape === 'text') {
+                ratio = parent.activeObj.shape === 'image' || parent.activeObj.shape === 'text' ? ratio[0].split(':') : ratio[1].split(':');
                 var newScale = scale / (parseInt(ratio[1], 10));
                 point.x = newScale * (parseInt(ratio[0], 10));
                 point.y = newScale * (parseInt(ratio[1], 10));
@@ -1345,42 +1371,25 @@ var Selection = /** @class */ (function () {
         }
         return ratio;
     };
+    Selection.prototype.revertResizing = function (tempActiveObj) {
+        var parent = this.parent;
+        var actPoint = parent.activeObj.activePoint;
+        if (this.preventDraggingInvertly()) {
+            actPoint.startX = tempActiveObj.activePoint.startX;
+            actPoint.startY = tempActiveObj.activePoint.startY;
+            actPoint.endX = tempActiveObj.activePoint.endX;
+            actPoint.endY = tempActiveObj.activePoint.endY;
+        }
+    };
     Selection.prototype.updateNWPoints = function (x, y, maxDimension) {
         var parent = this.parent;
-        var diff;
+        var actPoint = parent.activeObj.activePoint;
         var width;
         var height;
         var scale;
-        var percentage;
-        var prevDiffX = this.diffPoint.x;
-        var prevDiffY = this.diffPoint.y;
         var tempActiveObj = extend({}, parent.activeObj, null, true);
         if (parent.activeObj.shape === 'text') {
-            if (this.oldPoint.x === undefined && this.oldPoint.y === undefined) {
-                this.diffPoint.x = parent.activeObj.activePoint.startX - x;
-                this.diffPoint.y = parent.activeObj.activePoint.startY - y;
-            }
-            else {
-                this.diffPoint.x = this.oldPoint.x - x;
-                this.diffPoint.y = this.oldPoint.y - y;
-            }
-            this.oldPoint.x = x;
-            this.oldPoint.y = y;
-            if (this.diffPoint.x <= prevDiffX && this.diffPoint.y >= prevDiffY) {
-                diff = Math.min(this.diffPoint.x, this.diffPoint.y);
-            }
-            else {
-                diff = Math.max(this.diffPoint.x, this.diffPoint.y);
-            }
-            percentage = (diff / 10);
-            parent.activeObj.activePoint.startX -= (maxDimension.width / 100) * percentage;
-            parent.activeObj.activePoint.startY -= (maxDimension.height / 100) * percentage;
-            if (this.preventTextDraggingInvertly()) {
-                parent.activeObj.activePoint.startX += (maxDimension.width / 100) * percentage;
-                parent.activeObj.activePoint.startY += (maxDimension.height / 100) * percentage;
-            }
-            parent.activeObj.activePoint.width = parent.activeObj.activePoint.endX - parent.activeObj.activePoint.startX;
-            parent.activeObj.activePoint.height = parent.activeObj.activePoint.endY - parent.activeObj.activePoint.startY;
+            this.resizeImg(x, y, 'nw-resize', tempActiveObj);
             parent.notify('shape', { prop: 'updateFontSize', onPropertyChange: false,
                 value: { obj: parent.activeObj } });
         }
@@ -1394,62 +1403,68 @@ var Selection = /** @class */ (function () {
                     this.resizeImg(x, y, 'nw-resize', tempActiveObj);
                 }
                 else {
-                    this.adjustNWPoints(parent.activeObj.activePoint, x, y, parent.activeObj.rotatedAngle);
+                    this.adjustNWPoints(actPoint, x, y, parent.activeObj.rotatedAngle);
                 }
-                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 (actPoint.startX > actPoint.endX) {
+                    var temp = actPoint.startX;
+                    actPoint.startX = actPoint.endX;
+                    actPoint.endX = temp;
                     this.dragElement = parent.upperCanvas.style.cursor = parent.cursor = 'ne-resize';
                 }
-                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;
+                if (actPoint.startY > actPoint.endY) {
+                    var temp = actPoint.startY;
+                    actPoint.startY = actPoint.endY;
+                    actPoint.endY = temp;
                     this.dragElement = parent.upperCanvas.style.cursor = parent.cursor = 'sw-resize';
                 }
-                this.preventDraggingInvertly();
+                this.revertResizing(tempActiveObj);
             }
             else {
-                if (parent.activeObj.activePoint.startX < x && parent.activeObj.activePoint.startY < y) {
-                    width = x - parent.activeObj.activePoint.startX;
-                    height = y - parent.activeObj.activePoint.startY;
+                var _a = parent.img, destLeft = _a.destLeft, destTop = _a.destTop, destWidth = _a.destWidth, destHeight = _a.destHeight;
+                if (actPoint.startX < x && actPoint.startY < y) {
+                    width = x - actPoint.startX;
+                    height = y - actPoint.startY;
                     scale = Math.min(width, height);
                     var newScale = this.getScaleRatio(scale);
-                    parent.activeObj.activePoint.startX += newScale.x;
-                    parent.activeObj.activePoint.startY += newScale.y;
-                    var left = parent.img.destLeft > 0 ? parent.img.destLeft : 0;
-                    var top_1 = parent.img.destTop > 0 ? parent.img.destTop : 0;
-                    if (parent.activeObj.activePoint.startX < left || parent.activeObj.activePoint.startY < top_1) {
-                        parent.activeObj.activePoint.startX -= newScale.x;
-                        parent.activeObj.activePoint.startY -= newScale.y;
+                    actPoint.startX += newScale.x;
+                    actPoint.startY += newScale.y;
+                    var left = destLeft > 0 ? destLeft : 0;
+                    var top_1 = destTop > 0 ? destTop : 0;
+                    if (actPoint.startX < left || actPoint.startY < top_1) {
+                        actPoint.startX -= newScale.x;
+                        actPoint.startY -= newScale.y;
                     }
                 }
                 else {
-                    width = parent.activeObj.activePoint.startX - x;
-                    height = y - parent.activeObj.activePoint.endY;
+                    width = actPoint.startX - x;
+                    height = y - actPoint.endY;
                     scale = Math.max(width, height);
                     var newScale = this.getScaleRatio(scale);
-                    parent.activeObj.activePoint.startX -= newScale.x;
-                    parent.activeObj.activePoint.startY -= newScale.y;
-                    var left = parent.img.destLeft > 0 ? parent.img.destLeft : 0;
-                    var top_2 = parent.img.destTop > 0 ? parent.img.destTop : 0;
-                    if (parent.activeObj.activePoint.startX < left || parent.activeObj.activePoint.startY < top_2) {
-                        parent.activeObj.activePoint.startX += newScale.x;
-                        parent.activeObj.activePoint.startY += newScale.y;
+                    actPoint.startX -= newScale.x;
+                    actPoint.startY -= newScale.y;
+                    var left = destLeft > 0 ? destLeft : 0;
+                    var top_2 = destTop > 0 ? destTop : 0;
+                    if (actPoint.startX < left || actPoint.startY < top_2) {
+                        actPoint.startX += newScale.x;
+                        actPoint.startY += newScale.y;
                     }
                 }
+                actPoint.width = actPoint.endX - actPoint.startX;
+                actPoint.height = actPoint.endY - actPoint.startY;
+                this.revertResizing(tempActiveObj);
             }
-            parent.activeObj.activePoint.width = parent.activeObj.activePoint.endX - parent.activeObj.activePoint.startX;
-            parent.activeObj.activePoint.height = parent.activeObj.activePoint.endY - parent.activeObj.activePoint.startY;
+            actPoint.width = actPoint.endX - actPoint.startX;
+            actPoint.height = actPoint.endY - actPoint.startY;
             this.preventInverseResize(tempActiveObj);
         }
     };
     Selection.prototype.updateNPoints = function (x, y) {
         var parent = this.parent;
+        var actPoint = parent.activeObj.activePoint;
         var width;
         var height;
         var scale;
+        var tempActiveObj = extend({}, parent.activeObj, null, true);
         if (parent.activeObj.shape !== 'text') {
             var splitWords = void 0;
             if (parent.activeObj.shape) {
@@ -1466,88 +1481,63 @@ var Selection = /** @class */ (function () {
                     }
                     width = (this.dragPoint.endX - this.previousPoint.x);
                     height = (this.dragPoint.endY - this.previousPoint.y);
-                    this.adjustRotationPoints(parent.activeObj.activePoint, width, height, parent.activeObj.rotatedAngle);
+                    this.adjustRotationPoints(actPoint, width, height, parent.activeObj.rotatedAngle);
                 }
                 else {
-                    parent.activeObj.activePoint.startY = y;
-                    parent.activeObj.activePoint.height = parent.activeObj.activePoint.endY - parent.activeObj.activePoint.startY;
+                    actPoint.startY = y;
+                    actPoint.height = actPoint.endY - actPoint.startY;
                 }
-                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;
+                if (actPoint.startY > actPoint.endY) {
+                    var temp = actPoint.startY;
+                    actPoint.startY = actPoint.endY;
+                    actPoint.endY = temp;
                     this.dragElement = this.resizedElement = 's-resize';
                 }
-                this.preventDraggingInvertly();
+                this.revertResizing(tempActiveObj);
             }
             else {
-                if (parent.activeObj.activePoint.endX > x && parent.activeObj.activePoint.startY < y) {
-                    width = parent.activeObj.activePoint.endX - x;
-                    height = y - parent.activeObj.activePoint.startY;
+                var _a = parent.img, destLeft = _a.destLeft, destTop = _a.destTop, destWidth = _a.destWidth, destHeight = _a.destHeight;
+                if (actPoint.endX > x && actPoint.startY < y) {
+                    width = actPoint.endX - x;
+                    height = y - actPoint.startY;
                     scale = Math.min(width, height);
                     var newScale = this.getScaleRatio(scale);
-                    parent.activeObj.activePoint.endX -= newScale.x;
-                    parent.activeObj.activePoint.startY += newScale.y;
-                    if (parent.activeObj.activePoint.endX > (parent.img.destLeft + parent.img.destWidth) ||
-                        parent.activeObj.activePoint.startY < parent.img.destTop) {
-                        parent.activeObj.activePoint.endX += newScale.x;
-                        parent.activeObj.activePoint.startY -= newScale.y;
+                    actPoint.endX -= newScale.x;
+                    actPoint.startY += newScale.y;
+                    if (actPoint.endX > (destLeft + destWidth) ||
+                        actPoint.startY < destTop) {
+                        actPoint.endX += newScale.x;
+                        actPoint.startY -= newScale.y;
                     }
                 }
                 else {
-                    width = x - parent.activeObj.activePoint.endX;
-                    height = parent.activeObj.activePoint.startY - y;
+                    width = x - actPoint.endX;
+                    height = actPoint.startY - y;
                     scale = Math.max(width, height);
                     var newScale = this.getScaleRatio(scale);
-                    parent.activeObj.activePoint.endX += newScale.x;
-                    parent.activeObj.activePoint.startY -= newScale.y;
-                    if (parent.activeObj.activePoint.endX > (parent.img.destLeft + parent.img.destWidth) ||
-                        parent.activeObj.activePoint.startY < parent.img.destTop) {
-                        parent.activeObj.activePoint.endX -= newScale.x;
-                        parent.activeObj.activePoint.startY += newScale.y;
+                    actPoint.endX += newScale.x;
+                    actPoint.startY -= newScale.y;
+                    if (actPoint.endX > (destLeft + destWidth) ||
+                        actPoint.startY < destTop) {
+                        actPoint.endX -= newScale.x;
+                        actPoint.startY += newScale.y;
                     }
                 }
-                parent.activeObj.activePoint.width = parent.activeObj.activePoint.endX - parent.activeObj.activePoint.startX;
-                parent.activeObj.activePoint.height = parent.activeObj.activePoint.endY - parent.activeObj.activePoint.startY;
+                actPoint.width = actPoint.endX - actPoint.startX;
+                actPoint.height = actPoint.endY - actPoint.startY;
+                this.revertResizing(tempActiveObj);
             }
         }
     };
     Selection.prototype.updateNEPoints = function (x, y, maxDimension) {
         var parent = this.parent;
-        var diff;
+        var actPoint = parent.activeObj.activePoint;
         var width;
         var height;
         var scale;
-        var percentage;
-        var prevDiffX = this.diffPoint.x;
-        var prevDiffY = this.diffPoint.y;
         var tempActiveObj = extend({}, parent.activeObj, null, true);
         if (parent.activeObj.shape === 'text') {
-            if (this.oldPoint.x === undefined && this.oldPoint.y === undefined) {
-                this.diffPoint.x = x - parent.activeObj.activePoint.endX;
-                this.diffPoint.y = parent.activeObj.activePoint.startY - y;
-            }
-            else {
-                this.diffPoint.x = x - this.oldPoint.x;
-                this.diffPoint.y = this.oldPoint.y - y;
-            }
-            this.oldPoint.x = x;
-            this.oldPoint.y = y;
-            if (this.diffPoint.x <= prevDiffX && this.diffPoint.y >= prevDiffY) {
-                diff = Math.min(this.diffPoint.x, this.diffPoint.y);
-            }
-            else {
-                diff = Math.max(this.diffPoint.x, this.diffPoint.y);
-            }
-            percentage = (diff / 10);
-            parent.activeObj.activePoint.endX += (maxDimension.width / 100) * percentage;
-            parent.activeObj.activePoint.startY -= (maxDimension.height / 100) * percentage;
-            if (this.preventTextDraggingInvertly()) {
-                parent.activeObj.activePoint.endX -= (maxDimension.width / 100) * percentage;
-                parent.activeObj.activePoint.startY += (maxDimension.height / 100) * percentage;
-            }
-            parent.activeObj.activePoint.width = parent.activeObj.activePoint.endX - parent.activeObj.activePoint.startX;
-            parent.activeObj.activePoint.height = parent.activeObj.activePoint.endY - parent.activeObj.activePoint.startY;
+            this.resizeImg(x, y, 'ne-resize', tempActiveObj);
             parent.notify('shape', { prop: 'updateFontSize', onPropertyChange: false,
                 value: { obj: parent.activeObj } });
         }
@@ -1561,64 +1551,70 @@ var Selection = /** @class */ (function () {
                     this.resizeImg(x, y, 'ne-resize', tempActiveObj);
                 }
                 else {
-                    this.adjustNEPoints(parent.activeObj.activePoint, x, y, parent.activeObj.rotatedAngle);
+                    this.adjustNEPoints(actPoint, x, y, parent.activeObj.rotatedAngle);
                 }
-                if (parent.activeObj.activePoint.endX < parent.activeObj.activePoint.startX) {
-                    var temp = parent.activeObj.activePoint.endX;
-                    parent.activeObj.activePoint.endX = parent.activeObj.activePoint.startX;
-                    parent.activeObj.activePoint.startX = temp;
+                if (actPoint.endX < actPoint.startX) {
+                    var temp = actPoint.endX;
+                    actPoint.endX = actPoint.startX;
+                    actPoint.startX = temp;
                     this.dragElement = parent.upperCanvas.style.cursor = parent.cursor = 'nw-resize';
                 }
-                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;
+                if (actPoint.startY > actPoint.endY) {
+                    var temp = actPoint.startY;
+                    actPoint.startY = actPoint.endY;
+                    actPoint.endY = temp;
                     this.dragElement = parent.upperCanvas.style.cursor = parent.cursor = 'se-resize';
                 }
-                this.preventDraggingInvertly();
+                this.revertResizing(tempActiveObj);
             }
             else {
-                if (parent.activeObj.activePoint.endX > x && parent.activeObj.activePoint.startY < y) {
-                    width = parent.activeObj.activePoint.endX - x;
-                    height = y - parent.activeObj.activePoint.startY;
+                var _a = parent.img, destLeft = _a.destLeft, destTop = _a.destTop, destWidth = _a.destWidth, destHeight = _a.destHeight;
+                if (actPoint.endX > x && actPoint.startY < y) {
+                    width = actPoint.endX - x;
+                    height = y - actPoint.startY;
                     scale = Math.min(width, height);
                     var newScale = this.getScaleRatio(scale);
-                    parent.activeObj.activePoint.endX -= newScale.x;
-                    parent.activeObj.activePoint.startY += newScale.y;
-                    var endX = parent.img.destLeft + parent.img.destWidth < parent.lowerCanvas.width ?
-                        parent.img.destLeft + parent.img.destWidth : parent.lowerCanvas.width;
-                    var endY = parent.img.destTop > 0 ? parent.img.destTop : 0;
-                    if (parent.activeObj.activePoint.endX > endX || parent.activeObj.activePoint.startY < endY) {
-                        parent.activeObj.activePoint.endX += newScale.x;
-                        parent.activeObj.activePoint.startY -= newScale.y;
+                    actPoint.endX -= newScale.x;
+                    actPoint.startY += newScale.y;
+                    var endX = destLeft + destWidth < parent.lowerCanvas.width ?
+                        destLeft + destWidth : parent.lowerCanvas.width;
+                    var endY = destTop > 0 ? destTop : 0;
+                    if (actPoint.endX > endX || actPoint.startY < endY) {
+                        actPoint.endX += newScale.x;
+                        actPoint.startY -= newScale.y;
                     }
                 }
                 else {
-                    width = x - parent.activeObj.activePoint.endX;
-                    height = parent.activeObj.activePoint.startY - y;
+                    width = x - actPoint.endX;
+                    height = actPoint.startY - y;
                     scale = Math.max(width, height);
                     var newScale = this.getScaleRatio(scale);
-                    parent.activeObj.activePoint.endX += newScale.x;
-                    parent.activeObj.activePoint.startY -= newScale.y;
-                    var endX = parent.img.destLeft + parent.img.destWidth < parent.lowerCanvas.width ?
-                        parent.img.destLeft + parent.img.destWidth : parent.lowerCanvas.width;
-                    var endY = parent.img.destTop > 0 ? parent.img.destTop : 0;
-                    if (parent.activeObj.activePoint.endX > endX || parent.activeObj.activePoint.startY < endY) {
-                        parent.activeObj.activePoint.endX -= newScale.x;
-                        parent.activeObj.activePoint.startY += newScale.y;
+                    actPoint.endX += newScale.x;
+                    actPoint.startY -= newScale.y;
+                    var endX = destLeft + destWidth < parent.lowerCanvas.width ?
+                        destLeft + destWidth : parent.lowerCanvas.width;
+                    var endY = destTop > 0 ? destTop : 0;
+                    if (actPoint.endX > endX || actPoint.startY < endY) {
+                        actPoint.endX -= newScale.x;
+                        actPoint.startY += newScale.y;
                     }
                 }
+                actPoint.width = actPoint.endX - actPoint.startX;
+                actPoint.height = actPoint.endY - actPoint.startY;
+                this.revertResizing(tempActiveObj);
             }
-            parent.activeObj.activePoint.width = parent.activeObj.activePoint.endX - parent.activeObj.activePoint.startX;
-            parent.activeObj.activePoint.height = parent.activeObj.activePoint.endY - parent.activeObj.activePoint.startY;
+            actPoint.width = actPoint.endX - actPoint.startX;
+            actPoint.height = actPoint.endY - actPoint.startY;
             this.preventInverseResize(tempActiveObj);
         }
     };
     Selection.prototype.updateWPoints = function (x, y) {
         var parent = this.parent;
+        var actPoint = parent.activeObj.activePoint;
         var width;
         var height;
         var scale;
+        var tempActiveObj = extend({}, parent.activeObj, null, true);
         if (parent.activeObj.shape !== 'text') {
             var splitWords = void 0;
             if (parent.activeObj.shape) {
@@ -1635,15 +1631,15 @@ var Selection = /** @class */ (function () {
                     }
                     width = (this.dragPoint.endX - this.previousPoint.x);
                     height = (this.dragPoint.endY - this.previousPoint.y);
-                    this.adjustRotationPoints(parent.activeObj.activePoint, width, height, parent.activeObj.rotatedAngle);
+                    this.adjustRotationPoints(actPoint, width, height, parent.activeObj.rotatedAngle);
                 }
                 else {
-                    parent.activeObj.activePoint.startX = x;
-                    parent.activeObj.activePoint.width = parent.activeObj.activePoint.endX - parent.activeObj.activePoint.startX;
+                    actPoint.startX = x;
+                    actPoint.width = actPoint.endX - actPoint.startX;
                 }
                 if (parent.activeObj.shape === 'line' || parent.activeObj.shape === 'arrow' || parent.activeObj.shape === 'path') {
-                    parent.activeObj.activePoint.startY = y;
-                    parent.activeObj.activePoint.height = parent.activeObj.activePoint.endY - parent.activeObj.activePoint.startY;
+                    actPoint.startY = y;
+                    actPoint.height = actPoint.endY - actPoint.startY;
                     if (this.adjustActObjForLineArrow()) {
                         this.dragElement = 'e-resize';
                         if (parent.activeObj.triangleDirection === 'right') {
@@ -1654,51 +1650,55 @@ var Selection = /** @class */ (function () {
                         }
                     }
                 }
-                else 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;
+                else if (actPoint.startX > actPoint.endX) {
+                    var temp = actPoint.startX;
+                    actPoint.startX = actPoint.endX;
+                    actPoint.endX = temp;
                     this.dragElement = this.resizedElement = 'e-resize';
                 }
-                this.preventDraggingInvertly();
+                this.revertResizing(tempActiveObj);
             }
             else {
-                if (parent.activeObj.activePoint.startX < x && parent.activeObj.activePoint.endY > y) {
-                    width = x - parent.activeObj.activePoint.startX;
-                    height = parent.activeObj.activePoint.endY - y;
+                var _a = parent.img, destLeft = _a.destLeft, destTop = _a.destTop, destWidth = _a.destWidth, destHeight = _a.destHeight;
+                if (actPoint.startX < x && actPoint.endY > y) {
+                    width = x - actPoint.startX;
+                    height = actPoint.endY - y;
                     scale = Math.min(width, height);
                     var newScale = this.getScaleRatio(scale);
-                    parent.activeObj.activePoint.startX += newScale.x;
-                    parent.activeObj.activePoint.endY -= newScale.y;
-                    if (parent.activeObj.activePoint.startX < parent.img.destLeft || parent.activeObj.activePoint.endY >
-                        (parent.img.destTop + parent.img.destHeight)) {
-                        parent.activeObj.activePoint.startX -= newScale.x;
-                        parent.activeObj.activePoint.endY += newScale.y;
+                    actPoint.startX += newScale.x;
+                    actPoint.endY -= newScale.y;
+                    if (actPoint.startX < destLeft || actPoint.endY >
+                        (destTop + destHeight)) {
+                        actPoint.startX -= newScale.x;
+                        actPoint.endY += newScale.y;
                     }
                 }
                 else {
-                    width = parent.activeObj.activePoint.startX - x;
-                    height = y - parent.activeObj.activePoint.endY;
+                    width = actPoint.startX - x;
+                    height = y - actPoint.endY;
                     scale = Math.max(width, height);
                     var newScale = this.getScaleRatio(scale);
-                    parent.activeObj.activePoint.startX -= newScale.x;
-                    parent.activeObj.activePoint.endY += newScale.y;
-                    if (parent.activeObj.activePoint.startX < parent.img.destLeft || parent.activeObj.activePoint.endY >
-                        (parent.img.destTop + parent.img.destHeight)) {
-                        parent.activeObj.activePoint.startX += newScale.x;
-                        parent.activeObj.activePoint.endY -= newScale.y;
+                    actPoint.startX -= newScale.x;
+                    actPoint.endY += newScale.y;
+                    if (actPoint.startX < destLeft || actPoint.endY >
+                        (destTop + destHeight)) {
+                        actPoint.startX += newScale.x;
+                        actPoint.endY -= newScale.y;
                     }
                 }
-                parent.activeObj.activePoint.width = parent.activeObj.activePoint.endX - parent.activeObj.activePoint.startX;
-                parent.activeObj.activePoint.height = parent.activeObj.activePoint.endY - parent.activeObj.activePoint.startY;
+                actPoint.width = actPoint.endX - actPoint.startX;
+                actPoint.height = actPoint.endY - actPoint.startY;
+                this.revertResizing(tempActiveObj);
             }
         }
     };
     Selection.prototype.updateEPoints = function (x, y) {
         var parent = this.parent;
+        var actPoint = parent.activeObj.activePoint;
         var width;
         var height;
         var scale;
+        var tempActiveObj = extend({}, parent.activeObj, null, true);
         if (parent.activeObj.shape !== 'text') {
             var splitWords = void 0;
             if (parent.activeObj.shape) {
@@ -1715,15 +1715,15 @@ var Selection = /** @class */ (function () {
                     }
                     width = (this.dragPoint.endX - this.previousPoint.x);
                     height = (this.dragPoint.endY - this.previousPoint.y);
-                    this.adjustRotationPoints(parent.activeObj.activePoint, width, height, parent.activeObj.rotatedAngle);
+                    this.adjustRotationPoints(actPoint, width, height, parent.activeObj.rotatedAngle);
                 }
                 else {
-                    parent.activeObj.activePoint.endX = x;
-                    parent.activeObj.activePoint.width = parent.activeObj.activePoint.endX - parent.activeObj.activePoint.startX;
+                    actPoint.endX = x;
+                    actPoint.width = actPoint.endX - actPoint.startX;
                 }
                 if (parent.activeObj.shape === 'line' || parent.activeObj.shape === 'arrow' || parent.activeObj.shape === 'path') {
-                    parent.activeObj.activePoint.endY = y;
-                    parent.activeObj.activePoint.height = parent.activeObj.activePoint.endY - parent.activeObj.activePoint.startY;
+                    actPoint.endY = y;
+                    actPoint.height = actPoint.endY - actPoint.startY;
                     if (this.adjustActObjForLineArrow()) {
                         this.dragElement = 'w-resize';
                         if (parent.activeObj.triangleDirection === 'right') {
@@ -1734,82 +1734,57 @@ var Selection = /** @class */ (function () {
                         }
                     }
                 }
-                else if (parent.activeObj.activePoint.endX < parent.activeObj.activePoint.startX) {
-                    var temp = parent.activeObj.activePoint.endX;
-                    parent.activeObj.activePoint.endX = parent.activeObj.activePoint.startX;
-                    parent.activeObj.activePoint.startX = temp;
+                else if (actPoint.endX < actPoint.startX) {
+                    var temp = actPoint.endX;
+                    actPoint.endX = actPoint.startX;
+                    actPoint.startX = temp;
                     this.dragElement = this.resizedElement = 'w-resize';
                 }
-                this.preventDraggingInvertly();
+                this.revertResizing(tempActiveObj);
             }
             else {
-                if (parent.activeObj.activePoint.endX > x && parent.activeObj.activePoint.endY > y) {
-                    width = parent.activeObj.activePoint.endX - x;
-                    height = parent.activeObj.activePoint.endY - y;
+                var _a = parent.img, destLeft = _a.destLeft, destTop = _a.destTop, destWidth = _a.destWidth, destHeight = _a.destHeight;
+                if (actPoint.endX > x && actPoint.endY > y) {
+                    width = actPoint.endX - x;
+                    height = actPoint.endY - y;
                     scale = Math.min(width, height);
                     var newScale = this.getScaleRatio(scale);
-                    parent.activeObj.activePoint.endX -= newScale.x;
-                    parent.activeObj.activePoint.endY -= newScale.y;
-                    if (parent.activeObj.activePoint.endX > (parent.img.destLeft + parent.img.destWidth) ||
-                        parent.activeObj.activePoint.endY > (parent.img.destTop + parent.img.destHeight)) {
-                        parent.activeObj.activePoint.endX += newScale.x;
-                        parent.activeObj.activePoint.endY += newScale.y;
+                    actPoint.endX -= newScale.x;
+                    actPoint.endY -= newScale.y;
+                    if (actPoint.endX > (destLeft + destWidth) ||
+                        actPoint.endY > (destTop + destHeight)) {
+                        actPoint.endX += newScale.x;
+                        actPoint.endY += newScale.y;
                     }
                 }
                 else {
-                    width = x - parent.activeObj.activePoint.endX;
-                    height = y - parent.activeObj.activePoint.endY;
+                    width = x - actPoint.endX;
+                    height = y - actPoint.endY;
                     scale = Math.max(width, height);
                     var newScale = this.getScaleRatio(scale);
-                    parent.activeObj.activePoint.endX += newScale.x;
-                    parent.activeObj.activePoint.endY += newScale.y;
-                    if (parent.activeObj.activePoint.endX > (parent.img.destLeft + parent.img.destWidth) ||
-                        parent.activeObj.activePoint.endY > (parent.img.destTop + parent.img.destHeight)) {
-                        parent.activeObj.activePoint.endX -= newScale.x;
-                        parent.activeObj.activePoint.endY -= newScale.y;
+                    actPoint.endX += newScale.x;
+                    actPoint.endY += newScale.y;
+                    if (actPoint.endX > (destLeft + destWidth) ||
+                        actPoint.endY > (destTop + destHeight)) {
+                        actPoint.endX -= newScale.x;
+                        actPoint.endY -= newScale.y;
                     }
                 }
-                parent.activeObj.activePoint.width = parent.activeObj.activePoint.endX - parent.activeObj.activePoint.startX;
-                parent.activeObj.activePoint.height = parent.activeObj.activePoint.endY - parent.activeObj.activePoint.startY;
+                actPoint.width = actPoint.endX - actPoint.startX;
+                actPoint.height = actPoint.endY - actPoint.startY;
+                this.revertResizing(tempActiveObj);
             }
         }
     };
     Selection.prototype.updateSWPoints = function (x, y, maxDimension) {
         var parent = this.parent;
-        var diff;
+        var actPoint = parent.activeObj.activePoint;
         var width;
         var height;
         var scale;
-        var percentage;
-        var prevDiffX = this.diffPoint.x;
-        var prevDiffY = this.diffPoint.y;
         var tempActiveObj = extend({}, parent.activeObj, null, true);
         if (parent.activeObj.shape === 'text') {
-            if (isNullOrUndefined(this.oldPoint.x) && isNullOrUndefined(this.oldPoint.y)) {
-                this.diffPoint.x = parent.activeObj.activePoint.startX - x;
-                this.diffPoint.y = y - parent.activeObj.activePoint.endY;
-            }
-            else {
-                this.diffPoint.x = this.oldPoint.x - x;
-                this.diffPoint.y = y - this.oldPoint.y;
-            }
-            this.oldPoint.x = x;
-            this.oldPoint.y = y;
-            if (this.diffPoint.x <= prevDiffX && this.diffPoint.y >= prevDiffY) {
-                diff = Math.min(this.diffPoint.x, this.diffPoint.y);
-            }
-            else {
-                diff = Math.max(this.diffPoint.x, this.diffPoint.y);
-            }
-            percentage = (diff / 10);
-            parent.activeObj.activePoint.startX -= (maxDimension.width / 100) * percentage;
-            parent.activeObj.activePoint.endY += (maxDimension.height / 100) * percentage;
-            if (this.preventTextDraggingInvertly()) {
-                parent.activeObj.activePoint.startX += (maxDimension.width / 100) * percentage;
-                parent.activeObj.activePoint.endY -= (maxDimension.height / 100) * percentage;
-            }
-            parent.activeObj.activePoint.width = parent.activeObj.activePoint.endX - parent.activeObj.activePoint.startX;
-            parent.activeObj.activePoint.height = parent.activeObj.activePoint.endY - parent.activeObj.activePoint.startY;
+            this.resizeImg(x, y, 'sw-resize', tempActiveObj);
             parent.notify('shape', { prop: 'updateFontSize', onPropertyChange: false,
                 value: { obj: parent.activeObj } });
         }
@@ -1823,64 +1798,70 @@ var Selection = /** @class */ (function () {
                     this.resizeImg(x, y, 'sw-resize', tempActiveObj);
                 }
                 else {
-                    this.adjustSWPoints(parent.activeObj.activePoint, x, y, parent.activeObj.rotatedAngle);
+                    this.adjustSWPoints(actPoint, x, y, parent.activeObj.rotatedAngle);
                 }
-                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 (actPoint.startX > actPoint.endX) {
+                    var temp = actPoint.startX;
+                    actPoint.startX = actPoint.endX;
+                    actPoint.endX = temp;
                     this.dragElement = parent.upperCanvas.style.cursor = parent.cursor = 'se-resize';
                 }
-                if (parent.activeObj.activePoint.endY < parent.activeObj.activePoint.startY) {
-                    var temp = parent.activeObj.activePoint.endY;
-                    parent.activeObj.activePoint.endY = parent.activeObj.activePoint.startY;
-                    parent.activeObj.activePoint.startY = temp;
+                if (actPoint.endY < actPoint.startY) {
+                    var temp = actPoint.endY;
+                    actPoint.endY = actPoint.startY;
+                    actPoint.startY = temp;
                     this.dragElement = parent.upperCanvas.style.cursor = parent.cursor = 'nw-resize';
                 }
-                this.preventDraggingInvertly();
+                this.revertResizing(tempActiveObj);
             }
             else {
-                if (parent.activeObj.activePoint.startX < x && parent.activeObj.activePoint.endY > y) {
-                    width = x - parent.activeObj.activePoint.startX;
-                    height = parent.activeObj.activePoint.endY - y;
+                var _a = parent.img, destLeft = _a.destLeft, destTop = _a.destTop, destWidth = _a.destWidth, destHeight = _a.destHeight;
+                if (actPoint.startX < x && actPoint.endY > y) {
+                    width = x - actPoint.startX;
+                    height = actPoint.endY - y;
                     scale = Math.min(width, height);
                     var newScale = this.getScaleRatio(scale);
-                    parent.activeObj.activePoint.startX += newScale.x;
-                    parent.activeObj.activePoint.endY -= newScale.y;
-                    var endX = parent.img.destLeft > 0 ? parent.img.destLeft : 0;
-                    var endY = parent.img.destTop + parent.img.destHeight < parent.lowerCanvas.height ? parent.img.destTop +
-                        parent.img.destHeight : parent.lowerCanvas.height;
-                    if (parent.activeObj.activePoint.startX < endX || parent.activeObj.activePoint.endY > endY) {
-                        parent.activeObj.activePoint.startX -= newScale.x;
-                        parent.activeObj.activePoint.endY += newScale.y;
+                    actPoint.startX += newScale.x;
+                    actPoint.endY -= newScale.y;
+                    var endX = destLeft > 0 ? destLeft : 0;
+                    var endY = destTop + destHeight < parent.lowerCanvas.height ? destTop +
+                        destHeight : parent.lowerCanvas.height;
+                    if (actPoint.startX < endX || actPoint.endY > endY) {
+                        actPoint.startX -= newScale.x;
+                        actPoint.endY += newScale.y;
                     }
                 }
                 else {
-                    width = parent.activeObj.activePoint.startX - x;
-                    height = y - parent.activeObj.activePoint.endY;
+                    width = actPoint.startX - x;
+                    height = y - actPoint.endY;
                     scale = Math.max(width, height);
                     var newScale = this.getScaleRatio(scale);
-                    parent.activeObj.activePoint.startX -= newScale.x;
-                    parent.activeObj.activePoint.endY += newScale.y;
-                    var endX = parent.img.destLeft > 0 ? parent.img.destLeft : 0;
-                    var endY = parent.img.destTop + parent.img.destHeight < parent.lowerCanvas.height ? parent.img.destTop +
-                        parent.img.destHeight : parent.lowerCanvas.height;
-                    if (parent.activeObj.activePoint.startX < endX || parent.activeObj.activePoint.endY > endY) {
-                        parent.activeObj.activePoint.startX += newScale.x;
-                        parent.activeObj.activePoint.endY -= newScale.y;
+                    actPoint.startX -= newScale.x;
+                    actPoint.endY += newScale.y;
+                    var endX = destLeft > 0 ? destLeft : 0;
+                    var endY = destTop + destHeight < parent.lowerCanvas.height ? destTop +
+                        destHeight : parent.lowerCanvas.height;
+                    if (actPoint.startX < endX || actPoint.endY > endY) {
+                        actPoint.startX += newScale.x;
+                        actPoint.endY -= newScale.y;
                     }
                 }
+                actPoint.width = actPoint.endX - actPoint.startX;
+                actPoint.height = actPoint.endY - actPoint.startY;
+                this.revertResizing(tempActiveObj);
             }
-            parent.activeObj.activePoint.width = parent.activeObj.activePoint.endX - parent.activeObj.activePoint.startX;
-            parent.activeObj.activePoint.height = parent.activeObj.activePoint.endY - parent.activeObj.activePoint.startY;
+            actPoint.width = actPoint.endX - actPoint.startX;
+            actPoint.height = actPoint.endY - actPoint.startY;
             this.preventInverseResize(tempActiveObj);
         }
     };
     Selection.prototype.updateSPoints = function (x, y) {
         var parent = this.parent;
+        var actPoint = parent.activeObj.activePoint;
         var width;
         var height;
         var scale;
+        var tempActiveObj = extend({}, parent.activeObj, null, true);
         if (parent.activeObj.shape !== 'text') {
             var splitWords = void 0;
             if (parent.activeObj.shape) {
@@ -1897,88 +1878,63 @@ var Selection = /** @class */ (function () {
                     }
                     width = (this.dragPoint.endX - this.previousPoint.x);
                     height = (this.dragPoint.endY - this.previousPoint.y);
-                    this.adjustRotationPoints(parent.activeObj.activePoint, width, height, parent.activeObj.rotatedAngle);
+                    this.adjustRotationPoints(actPoint, width, height, parent.activeObj.rotatedAngle);
                 }
                 else {
-                    parent.activeObj.activePoint.endY = y;
-                    parent.activeObj.activePoint.height = parent.activeObj.activePoint.endY - parent.activeObj.activePoint.startY;
+                    actPoint.endY = y;
+                    actPoint.height = actPoint.endY - actPoint.startY;
                 }
-                if (parent.activeObj.activePoint.endY < parent.activeObj.activePoint.startY) {
-                    var temp = parent.activeObj.activePoint.endY;
-                    parent.activeObj.activePoint.endY = parent.activeObj.activePoint.startY;
-                    parent.activeObj.activePoint.startY = temp;
+                if (actPoint.endY < actPoint.startY) {
+                    var temp = actPoint.endY;
+                    actPoint.endY = actPoint.startY;
+                    actPoint.startY = temp;
                     this.dragElement = this.resizedElement = 'n-resize';
                 }
-                this.preventDraggingInvertly();
+                this.revertResizing(tempActiveObj);
             }
             else {
-                if (parent.activeObj.activePoint.endX > x && parent.activeObj.activePoint.endY > y) {
-                    width = parent.activeObj.activePoint.endX - x;
-                    height = parent.activeObj.activePoint.endY - y;
+                var _a = parent.img, destLeft = _a.destLeft, destTop = _a.destTop, destWidth = _a.destWidth, destHeight = _a.destHeight;
+                if (actPoint.endX > x && actPoint.endY > y) {
+                    width = actPoint.endX - x;
+                    height = actPoint.endY - y;
                     scale = Math.min(width, height);
                     var newScale = this.getScaleRatio(scale);
-                    parent.activeObj.activePoint.endX -= newScale.x;
-                    parent.activeObj.activePoint.endY -= newScale.y;
-                    if (parent.activeObj.activePoint.endX > (parent.img.destLeft + parent.img.destWidth) ||
-                        parent.activeObj.activePoint.endY > (parent.img.destTop + parent.img.destHeight)) {
-                        parent.activeObj.activePoint.endX += newScale.x;
-                        parent.activeObj.activePoint.endY += newScale.y;
+                    actPoint.endX -= newScale.x;
+                    actPoint.endY -= newScale.y;
+                    if (actPoint.endX > (destLeft + destWidth) ||
+                        actPoint.endY > (destTop + destHeight)) {
+                        actPoint.endX += newScale.x;
+                        actPoint.endY += newScale.y;
                     }
                 }
                 else {
-                    width = x - parent.activeObj.activePoint.endX;
-                    height = y - parent.activeObj.activePoint.endY;
+                    width = x - actPoint.endX;
+                    height = y - actPoint.endY;
                     scale = Math.max(width, height);
                     var newScale = this.getScaleRatio(scale);
-                    parent.activeObj.activePoint.endX += newScale.x;
-                    parent.activeObj.activePoint.endY += newScale.x;
-                    if (parent.activeObj.activePoint.endX > (parent.img.destLeft + parent.img.destWidth) ||
-                        parent.activeObj.activePoint.endY > (parent.img.destTop + parent.img.destHeight)) {
-                        parent.activeObj.activePoint.endX -= newScale.x;
-                        parent.activeObj.activePoint.endY -= newScale.y;
+                    actPoint.endX += newScale.x;
+                    actPoint.endY += newScale.x;
+                    if (actPoint.endX > (destLeft + destWidth) ||
+                        actPoint.endY > (destTop + destHeight)) {
+                        actPoint.endX -= newScale.x;
+                        actPoint.endY -= newScale.y;
                     }
                 }
-                parent.activeObj.activePoint.width = parent.activeObj.activePoint.endX - parent.activeObj.activePoint.startX;
-                parent.activeObj.activePoint.height = parent.activeObj.activePoint.endY - parent.activeObj.activePoint.startY;
+                actPoint.width = actPoint.endX - actPoint.startX;
+                actPoint.height = actPoint.endY - actPoint.startY;
+                this.revertResizing(tempActiveObj);
             }
         }
     };
     Selection.prototype.updateSEPoints = function (x, y, maxDimension) {
         var parent = this.parent;
-        var diff;
+        var actPoint = parent.activeObj.activePoint;
         var width;
         var height;
         var scale;
-        var percentage;
-        var prevDiffX = this.diffPoint.x;
-        var prevDiffY = this.diffPoint.y;
         var tempActiveObj = extend({}, parent.activeObj, null, true);
         if (parent.activeObj.shape === 'text') {
-            if (this.oldPoint.x === undefined && this.oldPoint.y === undefined) {
-                this.diffPoint.x = x - parent.activeObj.activePoint.endX;
-                this.diffPoint.y = y - parent.activeObj.activePoint.endY;
-            }
-            else {
-                this.diffPoint.x = x - this.oldPoint.x;
-                this.diffPoint.y = y - this.oldPoint.y;
-            }
-            this.oldPoint.x = x;
-            this.oldPoint.y = y;
-            if (this.diffPoint.x >= prevDiffX && this.diffPoint.y >= prevDiffY) {
-                diff = Math.max(this.diffPoint.x, this.diffPoint.y);
-            }
-            else {
-                diff = Math.min(this.diffPoint.x, this.diffPoint.y);
-            }
-            percentage = (diff / 10);
-            parent.activeObj.activePoint.endX += (maxDimension.width / 50) * percentage;
-            parent.activeObj.activePoint.endY += (maxDimension.height / 50) * percentage;
-            if (this.preventTextDraggingInvertly()) {
-                parent.activeObj.activePoint.endX -= (maxDimension.width / 50) * percentage;
-                parent.activeObj.activePoint.endY -= (maxDimension.height / 50) * percentage;
-            }
-            parent.activeObj.activePoint.width = parent.activeObj.activePoint.endX - parent.activeObj.activePoint.startX;
-            parent.activeObj.activePoint.height = parent.activeObj.activePoint.endY - parent.activeObj.activePoint.startY;
+            this.resizeImg(x, y, 'se-resize', tempActiveObj);
             parent.notify('shape', { prop: 'updateFontSize', onPropertyChange: false,
                 value: { obj: parent.activeObj } });
         }
@@ -1993,63 +1949,66 @@ var Selection = /** @class */ (function () {
                     this.resizeImg(x, y, 'se-resize', tempActiveObj);
                 }
                 else {
-                    this.adjustSEPoints(parent.activeObj.activePoint, x, y, parent.activeObj.rotatedAngle);
+                    this.adjustSEPoints(actPoint, x, y, parent.activeObj.rotatedAngle);
                 }
-                if (parent.activeObj.activePoint.endX < parent.activeObj.activePoint.startX) {
-                    var temp = parent.activeObj.activePoint.endX;
-                    parent.activeObj.activePoint.endX = parent.activeObj.activePoint.startX;
-                    parent.activeObj.activePoint.startX = temp;
+                if (actPoint.endX < actPoint.startX) {
+                    var temp = actPoint.endX;
+                    actPoint.endX = actPoint.startX;
+                    actPoint.startX = temp;
                     this.dragElement = parent.upperCanvas.style.cursor = parent.cursor = 'sw-resize';
                 }
-                if (parent.activeObj.activePoint.endY < parent.activeObj.activePoint.startY) {
-                    var temp = parent.activeObj.activePoint.endY;
-                    parent.activeObj.activePoint.endY = parent.activeObj.activePoint.startY;
-                    parent.activeObj.activePoint.startY = temp;
+                if (actPoint.endY < actPoint.startY) {
+                    var temp = actPoint.endY;
+                    actPoint.endY = actPoint.startY;
+                    actPoint.startY = temp;
                     this.dragElement = parent.upperCanvas.style.cursor = parent.cursor = 'ne-resize';
                 }
-                this.preventDraggingInvertly();
+                this.revertResizing(tempActiveObj);
             }
             else {
-                if (parent.activeObj.activePoint.endX > x && parent.activeObj.activePoint.endY > y) {
-                    width = parent.activeObj.activePoint.endX - x;
-                    height = parent.activeObj.activePoint.endY - y;
+                var _a = parent.img, destLeft = _a.destLeft, destTop = _a.destTop, destWidth = _a.destWidth, destHeight = _a.destHeight;
+                if (actPoint.endX > x && actPoint.endY > y) {
+                    width = actPoint.endX - x;
+                    height = actPoint.endY - y;
                     scale = Math.min(width, height);
                     newScale = this.getScaleRatio(scale);
-                    parent.activeObj.activePoint.endX -= newScale.x;
-                    parent.activeObj.activePoint.endY -= newScale.y;
-                    var endX = parent.img.destLeft + parent.img.destWidth < parent.lowerCanvas.width ?
-                        parent.img.destLeft + parent.img.destWidth : parent.lowerCanvas.width;
-                    var endY = parent.img.destTop + parent.img.destHeight < parent.lowerCanvas.height ?
-                        parent.img.destTop + parent.img.destHeight : parent.lowerCanvas.height;
-                    if (parent.activeObj.activePoint.endX > endX || parent.activeObj.activePoint.endY > endY) {
-                        parent.activeObj.activePoint.endX += newScale.x;
-                        parent.activeObj.activePoint.endY += newScale.y;
+                    actPoint.endX -= newScale.x;
+                    actPoint.endY -= newScale.y;
+                    var endX = destLeft + destWidth < parent.lowerCanvas.width ?
+                        destLeft + destWidth : parent.lowerCanvas.width;
+                    var endY = destTop + destHeight < parent.lowerCanvas.height ?
+                        destTop + destHeight : parent.lowerCanvas.height;
+                    if (actPoint.endX > endX || actPoint.endY > endY) {
+                        actPoint.endX += newScale.x;
+                        actPoint.endY += newScale.y;
                     }
                 }
                 else {
-                    width = x - parent.activeObj.activePoint.endX;
-                    height = y - parent.activeObj.activePoint.endY;
+                    width = x - actPoint.endX;
+                    height = y - actPoint.endY;
                     scale = Math.max(width, height);
                     newScale = this.getScaleRatio(scale);
-                    parent.activeObj.activePoint.endX += newScale.x;
-                    parent.activeObj.activePoint.endY += newScale.y;
-                    var endX = parent.img.destLeft + parent.img.destWidth < parent.lowerCanvas.width ? parent.img.destLeft +
-                        parent.img.destWidth : parent.lowerCanvas.width;
-                    var endY = parent.img.destTop + parent.img.destHeight < parent.lowerCanvas.height ? parent.img.destTop +
-                        parent.img.destHeight : parent.lowerCanvas.height;
-                    if (parent.activeObj.activePoint.endX > endX || parent.activeObj.activePoint.endY > endY) {
-                        parent.activeObj.activePoint.endX -= newScale.x;
-                        parent.activeObj.activePoint.endY -= newScale.y;
+                    actPoint.endX += newScale.x;
+                    actPoint.endY += newScale.y;
+                    var endX = destLeft + destWidth < parent.lowerCanvas.width ? destLeft +
+                        destWidth : parent.lowerCanvas.width;
+                    var endY = destTop + destHeight < parent.lowerCanvas.height ? destTop +
+                        destHeight : parent.lowerCanvas.height;
+                    if (actPoint.endX > endX || actPoint.endY > endY) {
+                        actPoint.endX -= newScale.x;
+                        actPoint.endY -= newScale.y;
                     }
                 }
+                actPoint.width = actPoint.endX - actPoint.startX;
+                actPoint.height = actPoint.endY - actPoint.startY;
+                this.revertResizing(tempActiveObj);
             }
-            parent.activeObj.activePoint.width = parent.activeObj.activePoint.endX - parent.activeObj.activePoint.startX;
-            parent.activeObj.activePoint.height = parent.activeObj.activePoint.endY - parent.activeObj.activePoint.startY;
             this.preventInverseResize(tempActiveObj);
         }
     };
     Selection.prototype.resizeImg = function (x, y, elem, tempActiveObj) {
         var parent = this.parent;
+        var actPoint = parent.activeObj.activePoint;
         var width;
         var height;
         var scale;
@@ -2063,14 +2022,14 @@ var Selection = /** @class */ (function () {
                         height = (this.previousPoint.y - y);
                         scale = (width + height) / 2;
                         newScale = this.getScaleRatio(scale);
-                        this.adjustRotationPoints(parent.activeObj.activePoint, -Math.abs(newScale.x), -Math.abs(newScale.y), parent.activeObj.rotatedAngle, 'img-resize', elem);
+                        this.adjustRotationPoints(actPoint, -Math.abs(newScale.x), -Math.abs(newScale.y), parent.activeObj.rotatedAngle, 'img-resize', elem);
                     }
                     else if (this.previousPoint.x !== 0 && this.previousPoint.y !== 0) {
                         width = (x - this.previousPoint.x);
                         height = (y - this.previousPoint.y);
                         scale = (width + height) / 2;
                         newScale = this.getScaleRatio(scale);
-                        this.adjustRotationPoints(parent.activeObj.activePoint, Math.abs(newScale.x), Math.abs(newScale.y), parent.activeObj.rotatedAngle, 'img-resize', elem);
+                        this.adjustRotationPoints(actPoint, Math.abs(newScale.x), Math.abs(newScale.y), parent.activeObj.rotatedAngle, 'img-resize', elem);
                     }
                     break;
                 case 'sw-resize':
@@ -2079,14 +2038,14 @@ var Selection = /** @class */ (function () {
                         height = (this.previousPoint.y - y);
                         scale = (width + height) / 2;
                         newScale = this.getScaleRatio(scale);
-                        this.adjustRotationPoints(parent.activeObj.activePoint, -Math.abs(newScale.x), -Math.abs(newScale.y), parent.activeObj.rotatedAngle, 'img-resize', elem);
+                        this.adjustRotationPoints(actPoint, -Math.abs(newScale.x), -Math.abs(newScale.y), parent.activeObj.rotatedAngle, 'img-resize', elem);
                     }
                     else if (this.previousPoint.x !== 0 && this.previousPoint.y !== 0) {
                         width = (this.previousPoint.x - x);
                         height = (y - this.previousPoint.y);
                         scale = (width + height) / 2;
                         newScale = this.getScaleRatio(scale);
-                        this.adjustRotationPoints(parent.activeObj.activePoint, Math.abs(newScale.x), Math.abs(newScale.y), parent.activeObj.rotatedAngle, 'img-resize', elem);
+                        this.adjustRotationPoints(actPoint, Math.abs(newScale.x), Math.abs(newScale.y), parent.activeObj.rotatedAngle, 'img-resize', elem);
                     }
                     break;
                 case 'w-resize':
@@ -2096,14 +2055,14 @@ var Selection = /** @class */ (function () {
                         height = (y - this.previousPoint.y);
                         scale = (width + height) / 2;
                         newScale = this.getScaleRatio(scale);
-                        this.adjustRotationPoints(parent.activeObj.activePoint, -Math.abs(newScale.x), -Math.abs(newScale.y), parent.activeObj.rotatedAngle, 'img-resize', elem);
+                        this.adjustRotationPoints(actPoint, -Math.abs(newScale.x), -Math.abs(newScale.y), parent.activeObj.rotatedAngle, 'img-resize', elem);
                     }
                     else if (this.previousPoint.x !== 0 && this.previousPoint.y !== 0) {
                         width = (this.previousPoint.x - x);
                         height = (this.previousPoint.y - y);
                         scale = (width + height) / 2;
                         newScale = this.getScaleRatio(scale);
-                        this.adjustRotationPoints(parent.activeObj.activePoint, Math.abs(newScale.x), Math.abs(newScale.y), parent.activeObj.rotatedAngle, 'img-resize', elem);
+                        this.adjustRotationPoints(actPoint, Math.abs(newScale.x), Math.abs(newScale.y), parent.activeObj.rotatedAngle, 'img-resize', elem);
                     }
                     break;
                 case 'n-resize':
@@ -2113,14 +2072,14 @@ var Selection = /** @class */ (function () {
                         height = (y - this.previousPoint.y);
                         scale = (width + height) / 2;
                         newScale = this.getScaleRatio(scale);
-                        this.adjustRotationPoints(parent.activeObj.activePoint, -Math.abs(newScale.x), -Math.abs(newScale.y), parent.activeObj.rotatedAngle, 'img-resize', elem);
+                        this.adjustRotationPoints(actPoint, -Math.abs(newScale.x), -Math.abs(newScale.y), parent.activeObj.rotatedAngle, 'img-resize', elem);
                     }
                     else if (this.previousPoint.x !== 0 && this.previousPoint.y !== 0) {
                         width = (x - this.previousPoint.x);
                         height = (this.previousPoint.y - y);
                         scale = (width + height) / 2;
                         newScale = this.getScaleRatio(scale);
-                        this.adjustRotationPoints(parent.activeObj.activePoint, Math.abs(newScale.x), Math.abs(newScale.y), parent.activeObj.rotatedAngle, 'img-resize', elem);
+                        this.adjustRotationPoints(actPoint, Math.abs(newScale.x), Math.abs(newScale.y), parent.activeObj.rotatedAngle, 'img-resize', elem);
                     }
                     break;
                 case 'e-resize':
@@ -2129,20 +2088,21 @@ var Selection = /** @class */ (function () {
                         height = (this.previousPoint.y - y);
                         scale = (width + height) / 2;
                         newScale = this.getScaleRatio(scale);
-                        this.adjustRotationPoints(parent.activeObj.activePoint, -Math.abs(newScale.x), -Math.abs(newScale.y), parent.activeObj.rotatedAngle, 'img-resize', elem);
+                        this.adjustRotationPoints(actPoint, -Math.abs(newScale.x), -Math.abs(newScale.y), parent.activeObj.rotatedAngle, 'img-resize', elem);
                     }
                     else if (this.previousPoint.x !== 0 && this.previousPoint.y !== 0) {
                         width = (x - this.previousPoint.x);
                         height = (y - this.previousPoint.y);
                         scale = (width + height) / 2;
                         newScale = this.getScaleRatio(scale);
-                        this.adjustRotationPoints(parent.activeObj.activePoint, Math.abs(newScale.x), Math.abs(newScale.y), parent.activeObj.rotatedAngle, 'img-resize', elem);
+                        this.adjustRotationPoints(actPoint, Math.abs(newScale.x), Math.abs(newScale.y), parent.activeObj.rotatedAngle, 'img-resize', elem);
                     }
                     break;
             }
-            parent.activeObj.activePoint.width = parent.activeObj.activePoint.endX - parent.activeObj.activePoint.startX;
-            parent.activeObj.activePoint.height = parent.activeObj.activePoint.endY - parent.activeObj.activePoint.startY;
-            if (parent.activeObj.activePoint.width < 10 || parent.activeObj.activePoint.height < 10) {
+            actPoint.width = actPoint.endX - actPoint.startX;
+            actPoint.height = actPoint.endY - actPoint.startY;
+            if ((actPoint.width < 10 || actPoint.height < 10) ||
+                (parent.activeObj.shape === 'text' && parent.activeObj.rotatedAngle === 0 && this.preventTextDraggingInvertly())) {
                 parent.activeObj = extend({}, tempActiveObj, null, true);
             }
         }
@@ -2260,6 +2220,9 @@ var Selection = /** @class */ (function () {
             case 'x-y':
                 value += (x + (y / 2));
                 break;
+            case 'y-x':
+                value += (y + (x / 2));
+                break;
             case 'img-resize-x':
                 value += x;
                 break;
@@ -2308,6 +2271,22 @@ var Selection = /** @class */ (function () {
                 rectangle.startY = rectangle.endY - rectangle.height;
             }
         }
+        else if (type && type === 'text') {
+            if (elem === 'widthHeight') {
+                rectangle.width = this.setResizedValue('x-y', rectangle.width, x, y);
+                rectangle.endX = rectangle.width + rectangle.startX;
+                rectangle.height = this.setResizedValue('y-x', rectangle.height, x, y);
+                rectangle.endY = rectangle.height + rectangle.startY;
+            }
+            else if (elem === 'width') {
+                rectangle.width = this.setResizedValue('x-y', rectangle.width, x, y);
+                rectangle.endX = rectangle.width + rectangle.startX;
+            }
+            else if (elem === 'height') {
+                rectangle.height = this.setResizedValue('y-abs-x', rectangle.height, x, y);
+                rectangle.endY = rectangle.height + rectangle.startY;
+            }
+        }
     };
     Selection.prototype.getResizedElement = function (degree, element) {
         var resizeMappings = [];
@@ -2404,7 +2383,7 @@ var Selection = /** @class */ (function () {
             else if (actObj.rotatedAngle) {
                 this.setCursorForRotatedObject(actObj, x, y, parent.upperCanvas);
                 if (parent.cursor === 'grabbing') {
-                    parent.upperCanvas.style.cursor = this.parent.cursor = 'grabbing';
+                    parent.upperCanvas.style.cursor = parent.cursor = 'grabbing';
                     this.dragElement = parent.cursor;
                 }
                 else if (parent.cursor === 'move') {
@@ -2419,83 +2398,84 @@ var Selection = /** @class */ (function () {
             }
             else {
                 var rotationCirclePoint = this.getTransRotationPoint(actObj);
-                if (x >= (actObj.topLeftCircle.startX - (actObj.topLeftCircle.radius * 2)) &&
-                    x <= (actObj.topLeftCircle.startX + (actObj.topLeftCircle.radius * 2)) &&
-                    y >= (actObj.topLeftCircle.startY - (actObj.topLeftCircle.radius * 2)) &&
-                    y <= (actObj.topLeftCircle.startY + (actObj.topLeftCircle.radius * 2)) && this.dragElement !== 'nw-resize') {
+                var radius = actObj.topLeftCircle.radius;
+                if (x >= (actObj.topLeftCircle.startX - (radius * 2)) &&
+                    x <= (actObj.topLeftCircle.startX + (radius * 2)) &&
+                    y >= (actObj.topLeftCircle.startY - (radius * 2)) &&
+                    y <= (actObj.topLeftCircle.startY + (radius * 2)) && this.dragElement !== 'nw-resize') {
                     actObj.topLeftCircle.startX = actObj.topLeftCircle.startY = 0;
                     parent.upperCanvas.style.cursor = parent.cursor = 'nw-resize';
                     isResize = true;
                     this.dragElement = parent.upperCanvas.style.cursor;
                 }
-                else if (x >= (actObj.topLeftCircle.startX - (actObj.topLeftCircle.radius * 2)) &&
-                    x <= (actObj.topRightCircle.startX - (actObj.topLeftCircle.radius * 2)) &&
-                    y >= (actObj.topCenterCircle.startY - (actObj.topLeftCircle.radius * 2)) &&
-                    y <= (actObj.topCenterCircle.startY + (actObj.topLeftCircle.radius * 2)) && this.dragElement !== 'n-resize') {
+                else if (x >= (actObj.topLeftCircle.startX - (radius * 2)) &&
+                    x <= (actObj.topRightCircle.startX - (radius * 2)) &&
+                    y >= (actObj.topCenterCircle.startY - (radius * 2)) &&
+                    y <= (actObj.topCenterCircle.startY + (radius * 2)) && this.dragElement !== 'n-resize') {
                     actObj.topCenterCircle.startX = actObj.topCenterCircle.startY = 0;
                     parent.upperCanvas.style.cursor = parent.cursor = 'n-resize';
                     isResize = true;
                     this.dragElement = parent.upperCanvas.style.cursor;
                 }
-                else if (x >= (actObj.topRightCircle.startX - (actObj.topLeftCircle.radius * 2)) &&
-                    x <= (actObj.topRightCircle.startX + (actObj.topLeftCircle.radius * 2)) &&
-                    y >= (actObj.topRightCircle.startY - (actObj.topLeftCircle.radius * 2)) &&
-                    y <= (actObj.topRightCircle.startY + (actObj.topLeftCircle.radius * 2)) && this.dragElement !== 'ne-resize') {
+                else if (x >= (actObj.topRightCircle.startX - (radius * 2)) &&
+                    x <= (actObj.topRightCircle.startX + (radius * 2)) &&
+                    y >= (actObj.topRightCircle.startY - (radius * 2)) &&
+                    y <= (actObj.topRightCircle.startY + (radius * 2)) && this.dragElement !== 'ne-resize') {
                     actObj.topRightCircle.startX = actObj.topRightCircle.startY = 0;
                     parent.upperCanvas.style.cursor = parent.cursor = 'ne-resize';
                     isResize = true;
                     this.dragElement = parent.upperCanvas.style.cursor;
                 }
-                else if (x >= (actObj.centerLeftCircle.startX - (actObj.topLeftCircle.radius * 2)) &&
-                    x <= (actObj.centerLeftCircle.startX + (actObj.topLeftCircle.radius * 2)) &&
-                    y >= (actObj.topLeftCircle.startY - (actObj.topLeftCircle.radius * 2)) &&
-                    y <= (actObj.bottomLeftCircle.startY - (actObj.topLeftCircle.radius * 2)) && this.dragElement !== 'w-resize') {
+                else if (x >= (actObj.centerLeftCircle.startX - (radius * 2)) &&
+                    x <= (actObj.centerLeftCircle.startX + (radius * 2)) &&
+                    y >= (actObj.topLeftCircle.startY - (radius * 2)) &&
+                    y <= (actObj.bottomLeftCircle.startY - (radius * 2)) && this.dragElement !== 'w-resize') {
                     actObj.centerLeftCircle.startX = actObj.centerLeftCircle.startY = 0;
                     parent.upperCanvas.style.cursor = parent.cursor = 'w-resize';
                     isResize = true;
                     this.dragElement = parent.upperCanvas.style.cursor;
                 }
-                else if (x >= (actObj.centerRightCircle.startX - (actObj.topLeftCircle.radius * 2)) &&
-                    x <= (actObj.centerRightCircle.startX + (actObj.topLeftCircle.radius * 2)) &&
-                    y >= (actObj.topRightCircle.startY - (actObj.topLeftCircle.radius * 2)) &&
-                    y <= (actObj.bottomRightCircle.startY - (actObj.topLeftCircle.radius * 2)) && this.dragElement !== 'e-resize') {
+                else if (x >= (actObj.centerRightCircle.startX - (radius * 2)) &&
+                    x <= (actObj.centerRightCircle.startX + (radius * 2)) &&
+                    y >= (actObj.topRightCircle.startY - (radius * 2)) &&
+                    y <= (actObj.bottomRightCircle.startY - (radius * 2)) && this.dragElement !== 'e-resize') {
                     actObj.centerRightCircle.startX = actObj.centerRightCircle.startY = 0;
                     parent.upperCanvas.style.cursor = parent.cursor = 'e-resize';
                     isResize = true;
                     this.dragElement = parent.upperCanvas.style.cursor;
                 }
-                else if (x >= (actObj.bottomLeftCircle.startX - (actObj.topLeftCircle.radius * 2)) &&
-                    x <= (actObj.bottomLeftCircle.startX + (actObj.topLeftCircle.radius * 2)) &&
-                    y >= (actObj.bottomLeftCircle.startY - (actObj.topLeftCircle.radius * 2)) &&
-                    y <= (actObj.bottomLeftCircle.startY + (actObj.topLeftCircle.radius * 2)) && this.dragElement !== 'sw-resize') {
+                else if (x >= (actObj.bottomLeftCircle.startX - (radius * 2)) &&
+                    x <= (actObj.bottomLeftCircle.startX + (radius * 2)) &&
+                    y >= (actObj.bottomLeftCircle.startY - (radius * 2)) &&
+                    y <= (actObj.bottomLeftCircle.startY + (radius * 2)) && this.dragElement !== 'sw-resize') {
                     actObj.bottomLeftCircle.startX = actObj.bottomLeftCircle.startY = 0;
                     parent.upperCanvas.style.cursor = parent.cursor = 'sw-resize';
                     isResize = true;
                     this.dragElement = parent.upperCanvas.style.cursor;
                 }
-                else if (x >= (actObj.bottomLeftCircle.startX - (actObj.topLeftCircle.radius * 2)) &&
-                    x <= (actObj.bottomRightCircle.startX - (actObj.topLeftCircle.radius * 2)) &&
-                    y >= (actObj.bottomCenterCircle.startY - (actObj.topLeftCircle.radius * 2)) &&
-                    y <= (actObj.bottomCenterCircle.startY + (actObj.topLeftCircle.radius * 2)) && this.dragElement !== 's-resize') {
+                else if (x >= (actObj.bottomLeftCircle.startX - (radius * 2)) &&
+                    x <= (actObj.bottomRightCircle.startX - (radius * 2)) &&
+                    y >= (actObj.bottomCenterCircle.startY - (radius * 2)) &&
+                    y <= (actObj.bottomCenterCircle.startY + (radius * 2)) && this.dragElement !== 's-resize') {
                     actObj.bottomCenterCircle.startX = actObj.bottomCenterCircle.startY = 0;
                     parent.upperCanvas.style.cursor = parent.cursor = 's-resize';
                     isResize = true;
                     this.dragElement = parent.upperCanvas.style.cursor;
                 }
-                else if (x >= (actObj.bottomRightCircle.startX - (actObj.topLeftCircle.radius * 2)) &&
-                    x <= (actObj.bottomRightCircle.startX + (actObj.topLeftCircle.radius * 2)) &&
-                    y >= (actObj.bottomRightCircle.startY - (actObj.topLeftCircle.radius * 2)) &&
-                    y <= (actObj.bottomRightCircle.startY + (actObj.topLeftCircle.radius * 2)) && this.dragElement !== 'se-resize') {
+                else if (x >= (actObj.bottomRightCircle.startX - (radius * 2)) &&
+                    x <= (actObj.bottomRightCircle.startX + (radius * 2)) &&
+                    y >= (actObj.bottomRightCircle.startY - (radius * 2)) &&
+                    y <= (actObj.bottomRightCircle.startY + (radius * 2)) && this.dragElement !== 'se-resize') {
                     actObj.bottomRightCircle.startX = actObj.bottomRightCircle.startY = 0;
                     parent.upperCanvas.style.cursor = parent.cursor = 'se-resize';
                     isResize = true;
                     this.dragElement = parent.upperCanvas.style.cursor;
                 }
                 else if (rotationCirclePoint &&
-                    x >= rotationCirclePoint.x - (actObj.topLeftCircle.radius * 2) &&
-                    x <= rotationCirclePoint.x + (actObj.topLeftCircle.radius * 2) &&
-                    y >= rotationCirclePoint.y - (actObj.topLeftCircle.radius * 2) &&
-                    y <= rotationCirclePoint.y + (actObj.topLeftCircle.radius * 2) && this.dragElement !== 'grabbing') {
+                    x >= rotationCirclePoint.x - (radius * 2) &&
+                    x <= rotationCirclePoint.x + (radius * 2) &&
+                    y >= rotationCirclePoint.y - (radius * 2) &&
+                    y <= rotationCirclePoint.y + (radius * 2) && this.dragElement !== 'grabbing') {
                     parent.upperCanvas.style.cursor = parent.cursor = 'grabbing';
                     this.dragElement = parent.upperCanvas.style.cursor;
                 }
@@ -2550,10 +2530,11 @@ var Selection = /** @class */ (function () {
         var isResize = false;
         var parent = this.parent;
         var point;
+        var radius = actObj.topLeftCircle.radius;
         for (var i = 0; i < 5; i++) {
             point = actObj.pointColl[i];
-            if (x >= (point.x - (actObj.topLeftCircle.radius * 2)) && x <= (point.x + (actObj.topLeftCircle.radius * 2)) &&
-                y >= (point.y - (actObj.topLeftCircle.radius * 2)) && y <= (point.y + (actObj.topLeftCircle.radius * 2))) {
+            if (x >= (point.x - (radius * 2)) && x <= (point.x + (radius * 2)) &&
+                y >= (point.y - (radius * 2)) && y <= (point.y + (radius * 2))) {
                 actObj.centerLeftCircle.startX = actObj.centerLeftCircle.startY = 0;
                 this.dragElement = 'w-resize';
                 isResize = true;
@@ -2563,8 +2544,8 @@ var Selection = /** @class */ (function () {
         if (!isResize) {
             for (var i = 1; i < 6; i++) {
                 point = actObj.pointColl[actObj.pointColl.length - i];
-                if (x >= (point.x - (actObj.topLeftCircle.radius * 2)) && x <= (point.x + (actObj.topLeftCircle.radius * 2)) &&
-                    y >= (point.y - (actObj.topLeftCircle.radius * 2)) && y <= (point.y + (actObj.topLeftCircle.radius * 2))) {
+                if (x >= (point.x - (radius * 2)) && x <= (point.x + (radius * 2)) &&
+                    y >= (point.y - (radius * 2)) && y <= (point.y + (radius * 2))) {
                     actObj.centerRightCircle.startX = actObj.centerRightCircle.startY = 0;
                     this.dragElement = 'e-resize';
                     isResize = true;
@@ -2575,8 +2556,8 @@ var Selection = /** @class */ (function () {
         if (!isResize) {
             for (var i = 0; i < actObj.pointColl.length; i++) {
                 point = actObj.pointColl[i];
-                if (x >= (point.x - (actObj.topLeftCircle.radius * 2)) && x <= (point.x + (actObj.topLeftCircle.radius * 2)) &&
-                    y >= (point.y - (actObj.topLeftCircle.radius * 2)) && y <= (point.y + (actObj.topLeftCircle.radius * 2))) {
+                if (x >= (point.x - (radius * 2)) && x <= (point.x + (radius * 2)) &&
+                    y >= (point.y - (radius * 2)) && y <= (point.y + (radius * 2))) {
                     parent.upperCanvas.style.cursor = parent.cursor = 'move';
                     this.dragPoint.startX = this.previousPoint.x = this.dragPoint.endX = x;
                     this.dragPoint.startY = this.previousPoint.y = this.dragPoint.endY = y;
@@ -2591,13 +2572,14 @@ var Selection = /** @class */ (function () {
     };
     Selection.prototype.updateCursorStylesForPath = function (x, y, actObj) {
         var isResize = false;
-        this.pathAdjustedIndex = this.setCursorForLineArrow(actObj, x, y, this.parent.upperCanvas);
-        if (this.parent.cursor === 'move') {
+        var parent = this.parent;
+        this.pathAdjustedIndex = this.setCursorForLineArrow(actObj, x, y, parent.upperCanvas);
+        if (parent.cursor === 'move') {
             isResize = true;
             this.dragElement = 'pathDrag';
         }
         if (!isResize) {
-            this.parent.upperCanvas.style.cursor = this.parent.cursor = 'move';
+            parent.upperCanvas.style.cursor = parent.cursor = 'move';
             this.dragPoint.startX = this.previousPoint.x = this.dragPoint.endX = x;
             this.dragPoint.startY = this.previousPoint.y = this.dragPoint.endY = y;
         }
@@ -2605,6 +2587,7 @@ var Selection = /** @class */ (function () {
     };
     Selection.prototype.setTextSelection = function (width, height) {
         var parent = this.parent;
+        var actPoint = parent.activeObj.activePoint;
         var degree = parent.transform.degree;
         if (parent.activeObj.shapeDegree === 0) {
             degree = parent.transform.degree;
@@ -2621,92 +2604,72 @@ var Selection = /** @class */ (function () {
                 case 0:
                     switch (flip) {
                         case 'horizontal':
-                            parent.activeObj.activePoint = { startX: parent.activeObj.activePoint.endX - width,
-                                startY: parent.activeObj.activePoint.startY,
-                                endX: (parent.activeObj.activePoint.endX),
-                                endY: parent.activeObj.activePoint.startY + (height ? height : 0) };
+                            actPoint = { startX: actPoint.endX - width, startY: actPoint.startY, endX: (actPoint.endX),
+                                endY: actPoint.startY + (height ? height : 0) };
                             break;
                         case 'vertical':
-                            parent.activeObj.activePoint.startY = parent.activeObj.activePoint.endY - height;
-                            parent.activeObj.activePoint = { startX: parent.activeObj.activePoint.startX,
-                                startY: parent.activeObj.activePoint.startY,
-                                endX: (parent.activeObj.activePoint.startX + (width ? width : 0)),
-                                endY: parent.activeObj.activePoint.endY };
+                            actPoint.startY = actPoint.endY - height;
+                            actPoint = { startX: actPoint.startX, startY: actPoint.startY, endX: (actPoint.startX + (width ? width : 0)),
+                                endY: actPoint.endY };
                             break;
                         default:
-                            parent.activeObj.activePoint = { startX: parent.activeObj.activePoint.startX,
-                                startY: parent.activeObj.activePoint.startY,
-                                endX: (parent.activeObj.activePoint.startX + (width ? width : 0)),
-                                endY: parent.activeObj.activePoint.startY + (height ? height : 0) };
+                            actPoint = { startX: actPoint.startX,
+                                startY: actPoint.startY, endX: (actPoint.startX + (width ? width : 0)), endY: actPoint.startY +
+                                    (height ? height : 0) };
                             break;
                     }
                     break;
                 case 90:
                     switch (flip) {
                         case 'horizontal':
-                            parent.activeObj.activePoint.endX = parent.activeObj.activePoint.startX + height;
-                            parent.activeObj.activePoint = { startX: parent.activeObj.activePoint.startX,
-                                startY: parent.activeObj.activePoint.startY, endX: (parent.activeObj.activePoint.endX),
-                                endY: parent.activeObj.activePoint.startY + (width ? width : 0) };
+                            actPoint.endX = actPoint.startX + height;
+                            actPoint = { startX: actPoint.startX, startY: actPoint.startY, endX: (actPoint.endX),
+                                endY: actPoint.startY + (width ? width : 0) };
                             break;
                         case 'vertical':
-                            parent.activeObj.activePoint.startX = parent.activeObj.activePoint.endX - height;
-                            parent.activeObj.activePoint = { startX: parent.activeObj.activePoint.startX,
-                                startY: parent.activeObj.activePoint.endY - width,
-                                endX: (parent.activeObj.activePoint.endX),
-                                endY: parent.activeObj.activePoint.endY };
+                            actPoint.startX = actPoint.endX - height;
+                            actPoint = { startX: actPoint.startX, startY: actPoint.endY - width, endX: (actPoint.endX), endY: actPoint.endY };
                             break;
                         default:
-                            parent.activeObj.activePoint.startX = parent.activeObj.activePoint.endX - height;
-                            parent.activeObj.activePoint = { startX: parent.activeObj.activePoint.startX,
-                                startY: parent.activeObj.activePoint.startY, endX: (parent.activeObj.activePoint.endX),
-                                endY: parent.activeObj.activePoint.startY + (width ? width : 0) };
+                            actPoint.startX = actPoint.endX - height;
+                            actPoint = { startX: actPoint.startX, startY: actPoint.startY, endX: (actPoint.endX),
+                                endY: actPoint.startY + (width ? width : 0) };
                             break;
                     }
                     break;
                 case 180:
                     switch (flip) {
                         case 'horizontal':
-                            parent.activeObj.activePoint.startY = parent.activeObj.activePoint.endY - height;
-                            parent.activeObj.activePoint = { startX: parent.activeObj.activePoint.startX,
-                                startY: parent.activeObj.activePoint.startY,
-                                endX: (parent.activeObj.activePoint.startX + width),
-                                endY: parent.activeObj.activePoint.endY };
+                            actPoint.startY = actPoint.endY - height;
+                            actPoint = { startX: actPoint.startX, startY: actPoint.startY, endX: (actPoint.startX + width),
+                                endY: actPoint.endY };
                             break;
                         case 'vertical':
-                            parent.activeObj.activePoint.endY = parent.activeObj.activePoint.startY + height;
-                            parent.activeObj.activePoint = { endX: parent.activeObj.activePoint.endX, endY: parent.activeObj.activePoint.endY,
-                                startX: (parent.activeObj.activePoint.endX - (width ? width : 0)),
-                                startY: parent.activeObj.activePoint.startY };
+                            actPoint.endY = actPoint.startY + height;
+                            actPoint = { endX: actPoint.endX, endY: actPoint.endY, startX: (actPoint.endX - (width ? width : 0)),
+                                startY: actPoint.startY };
                             break;
                         default:
-                            parent.activeObj.activePoint = { endX: parent.activeObj.activePoint.endX, endY: parent.activeObj.activePoint.endY,
-                                startX: (parent.activeObj.activePoint.endX - (width ? width : 0)),
-                                startY: parent.activeObj.activePoint.endY - (height ? height : 0) };
+                            actPoint = { endX: actPoint.endX, endY: actPoint.endY, startX: (actPoint.endX - (width ? width : 0)),
+                                startY: actPoint.endY - (height ? height : 0) };
                             break;
                     }
                     break;
                 case 270:
                     switch (flip) {
                         case 'horizontal':
-                            parent.activeObj.activePoint.startX = parent.activeObj.activePoint.endX - height;
-                            parent.activeObj.activePoint = { startX: parent.activeObj.activePoint.startX,
-                                startY: parent.activeObj.activePoint.endY - (width ? width : 0),
-                                endX: parent.activeObj.activePoint.endX,
-                                endY: parent.activeObj.activePoint.endY };
+                            actPoint.startX = actPoint.endX - height;
+                            actPoint = { startX: actPoint.startX, startY: actPoint.endY - (width ? width : 0), endX: actPoint.endX,
+                                endY: actPoint.endY };
                             break;
                         case 'vertical':
-                            parent.activeObj.activePoint = { startX: parent.activeObj.activePoint.startX,
-                                startY: parent.activeObj.activePoint.startY,
-                                endX: (parent.activeObj.activePoint.startX + height),
-                                endY: parent.activeObj.activePoint.startY + (width ? width : 0) };
+                            actPoint = { startX: actPoint.startX, startY: actPoint.startY, endX: (actPoint.startX + height),
+                                endY: actPoint.startY + (width ? width : 0) };
                             break;
                         default:
-                            parent.activeObj.activePoint.endX = parent.activeObj.activePoint.startX + height;
-                            parent.activeObj.activePoint = { startX: parent.activeObj.activePoint.startX,
-                                startY: parent.activeObj.activePoint.endY - (width ? width : 0),
-                                endX: parent.activeObj.activePoint.endX,
-                                endY: parent.activeObj.activePoint.endY };
+                            actPoint.endX = actPoint.startX + height;
+                            actPoint = { startX: actPoint.startX, startY: actPoint.endY - (width ? width : 0), endX: actPoint.endX,
+                                endY: actPoint.endY };
                             break;
                     }
                     break;
@@ -2715,39 +2678,36 @@ var Selection = /** @class */ (function () {
         if (parent.activeObj.flipObjColl.length === 0) {
             switch (degree) {
                 case 0:
-                    parent.activeObj.activePoint = { startX: parent.activeObj.activePoint.startX, startY: parent.activeObj.activePoint.startY,
-                        endX: (parent.activeObj.activePoint.startX + (width ? width : 0)),
-                        endY: parent.activeObj.activePoint.startY + (height ? height : 0) };
+                    actPoint = { startX: actPoint.startX, startY: actPoint.startY, endX: (actPoint.startX + (width ? width : 0)),
+                        endY: actPoint.startY + (height ? height : 0) };
                     break;
                 case 90:
-                    parent.activeObj.activePoint.startX = parent.activeObj.activePoint.endX - height;
-                    parent.activeObj.activePoint = { startX: parent.activeObj.activePoint.startX, startY: parent.activeObj.activePoint.startY,
-                        endX: (parent.activeObj.activePoint.endX),
-                        endY: parent.activeObj.activePoint.startY + (width ? width : 0) };
+                    actPoint.startX = actPoint.endX - height;
+                    actPoint = { startX: actPoint.startX, startY: actPoint.startY, endX: (actPoint.endX),
+                        endY: actPoint.startY + (width ? width : 0) };
                     break;
                 case 180:
-                    parent.activeObj.activePoint = { endX: parent.activeObj.activePoint.endX, endY: parent.activeObj.activePoint.endY,
-                        startX: (parent.activeObj.activePoint.endX - (width ? width : 0)),
-                        startY: parent.activeObj.activePoint.endY - (height ? height : 0) };
+                    actPoint = { endX: actPoint.endX, endY: actPoint.endY, startX: (actPoint.endX - (width ? width : 0)),
+                        startY: actPoint.endY - (height ? height : 0) };
                     break;
                 case 270:
-                    parent.activeObj.activePoint.endX = parent.activeObj.activePoint.startX + height;
-                    parent.activeObj.activePoint = { startX: parent.activeObj.activePoint.startX,
-                        startY: parent.activeObj.activePoint.endY - (width ? width : 0),
-                        endX: parent.activeObj.activePoint.endX,
-                        endY: parent.activeObj.activePoint.endY };
+                    actPoint.endX = actPoint.startX + height;
+                    actPoint = { startX: actPoint.startX, startY: actPoint.endY - (width ? width : 0), endX: actPoint.endX,
+                        endY: actPoint.endY };
                     break;
             }
         }
-        parent.activeObj.activePoint.width = parent.activeObj.activePoint.endX - parent.activeObj.activePoint.startX;
-        parent.activeObj.activePoint.height = parent.activeObj.activePoint.endY - parent.activeObj.activePoint.startY;
+        actPoint.width = actPoint.endX - actPoint.startX;
+        actPoint.height = actPoint.endY - actPoint.startY;
+        parent.activeObj.activePoint = actPoint;
         if (parent.transform.degree === 360 || parent.transform.degree === -360) {
             parent.transform.degree = 0;
         }
     };
     Selection.prototype.setActivePoint = function (startX, startY) {
         var parent = this.parent;
-        if (isNullOrUndefined(parent.activeObj.activePoint)) {
+        var activePoint = parent.activeObj.activePoint;
+        if (isNullOrUndefined(activePoint)) {
             return;
         }
         if (parent.currObjType.isText) {
@@ -2757,24 +2717,24 @@ var Selection = /** @class */ (function () {
                 parent.activeObj.textSettings.fontSize = (Math.abs(parent.baseImgCanvas.width - parent.baseImgCanvas.height)) * 0.1;
             }
             this.setTextSelection(textWidth, textHeight);
-            this.mouseDownPoint.x = parent.activeObj.activePoint.endX;
-            this.mouseDownPoint.y = parent.activeObj.activePoint.endY;
+            this.mouseDownPoint.x = activePoint.endX;
+            this.mouseDownPoint.y = activePoint.endY;
             if (parent.activeObj.horTopLine !== undefined) {
-                parent.activeObj.activePoint = extend({}, parent.activeObj.activePoint, {}, true);
+                parent.activeObj.activePoint = extend({}, activePoint, {}, true);
             }
             parent.notify('draw', { prop: 'drawObject', onPropertyChange: false, value: { canvas: 'duplicate' } });
         }
         else if (startX && startY) {
-            parent.activeObj.activePoint.startX = this.mouseDownPoint.x = startX;
-            parent.activeObj.activePoint.startY = this.mouseDownPoint.y = startY;
+            activePoint.startX = this.mouseDownPoint.x = startX;
+            activePoint.startY = this.mouseDownPoint.y = startY;
             parent.currObjType.isDragging = true;
         }
         else {
             var selectInfo = parent.activeObj;
-            parent.activeObj.activePoint = { startX: selectInfo.horTopLine.startX, startY: selectInfo.horTopLine.startY,
+            activePoint = { startX: selectInfo.horTopLine.startX, startY: selectInfo.horTopLine.startY,
                 endX: selectInfo.horTopLine.endX, endY: selectInfo.horTopLine.endY };
-            parent.activeObj.activePoint.width = parent.activeObj.activePoint.endX - parent.activeObj.activePoint.startX;
-            parent.activeObj.activePoint.height = parent.activeObj.activePoint.endY - parent.activeObj.activePoint.startY;
+            activePoint.width = activePoint.endX - activePoint.startX;
+            activePoint.height = activePoint.endY - activePoint.startY;
         }
     };
     Selection.prototype.mouseDownEventHandler = function (e) {
@@ -2815,29 +2775,31 @@ var Selection = /** @class */ (function () {
     };
     Selection.prototype.getImagePoints = function (x, y) {
         var parent = this.parent;
-        if (x < parent.img.destLeft) {
-            x = parent.img.destLeft;
+        var _a = parent.img, destLeft = _a.destLeft, destTop = _a.destTop, destWidth = _a.destWidth, destHeight = _a.destHeight;
+        if (x < destLeft) {
+            x = destLeft;
         }
-        else if (x > parent.img.destLeft + parent.img.destWidth) {
-            x = parent.img.destLeft + parent.img.destWidth;
+        else if (x > destLeft + destWidth) {
+            x = destLeft + destWidth;
         }
-        if (y < parent.img.destTop) {
-            y = parent.img.destTop;
+        if (y < destTop) {
+            y = destTop;
         }
-        else if (y > parent.img.destTop + parent.img.destHeight) {
-            y = parent.img.destTop + parent.img.destHeight;
+        else if (y > destTop + destHeight) {
+            y = destTop + destHeight;
         }
         return { x: x, y: y };
     };
     Selection.prototype.clickEvent = function (imageEditorClickEventArgs, e) {
         var parent = this.parent;
+        var activePoint = parent.activeObj.activePoint;
         var x = imageEditorClickEventArgs.point.x;
         var y = imageEditorClickEventArgs.point.y;
         var cursor = parent.activeObj.shape && parent.activeObj.shape === 'text' ?
             parent.cursor : 'default';
         if (parent.isResize) {
-            // parent.okBtn();
             this.performEnterAction();
+            parent.upperCanvas.style.cursor = 'default';
             return;
         }
         else if (JSON.stringify(parent.frameObj) !== JSON.stringify(parent.tempFrameObj)) {
@@ -2858,25 +2820,25 @@ var Selection = /** @class */ (function () {
             if (this.currentDrawingShape === 'path') {
                 var point = this.getImagePoints(x, y);
                 parent.activeObj.pointColl.push({ x: point.x, y: point.y });
-                if (parent.activeObj.activePoint.width !== 0 && parent.activeObj.activePoint.height !== 0) {
-                    parent.activeObj.activePoint.width = 0;
-                    parent.activeObj.activePoint.height = 0;
-                    parent.activeObj.activePoint.startX = parent.activeObj.pointColl[parent.activeObj.pointColl.length - 1].x;
-                    parent.activeObj.activePoint.startY = parent.activeObj.pointColl[parent.activeObj.pointColl.length - 1].y;
+                if (activePoint.width !== 0 && activePoint.height !== 0) {
+                    activePoint.width = 0;
+                    activePoint.height = 0;
+                    activePoint.startX = parent.activeObj.pointColl[parent.activeObj.pointColl.length - 1].x;
+                    activePoint.startY = parent.activeObj.pointColl[parent.activeObj.pointColl.length - 1].y;
                 }
             }
-            parent.activeObj.activePoint.endX = parent.activeObj.activePoint.startX;
-            parent.activeObj.activePoint.endY = parent.activeObj.activePoint.startY;
+            activePoint.endX = activePoint.startX;
+            activePoint.endY = activePoint.startY;
             parent.currObjType.isDragging = true;
             var previousShapeSettings = this.updatePrevShapeSettings();
-            var shapeResizingArgs = { action: 'draw-start', previousShapeSettings: previousShapeSettings };
-            var shapeMovingArgs = { action: 'move', previousShapeSettings: previousShapeSettings };
+            var shapeResizingArgs = { cancel: false, action: 'draw-start', previousShapeSettings: previousShapeSettings };
+            var shapeMovingArgs = { cancel: false, action: 'move', previousShapeSettings: previousShapeSettings };
             this.shapeResizingArgs = shapeResizingArgs;
             this.shapeMovingArgs = shapeMovingArgs;
             this.triggerShapeChange(shapeResizingArgs, shapeMovingArgs, 'mouse-down');
             return;
         }
-        parent.notify('draw', { prop: 'resetFrameZoom', onPropertyChange: false });
+        parent.notify('draw', { prop: 'resetFrameZoom', onPropertyChange: false, value: { isOk: true } });
         if (this.isCropSelection && this.dragCanvas) {
             this.setCursor(x, y);
             if (parent.cursor !== 'move' && parent.cursor !== 'crosshair' &&
@@ -2898,6 +2860,7 @@ var Selection = /** @class */ (function () {
         var isFreehandDraw = this.isFreehandDrawTouch(e, this.isCropSelection);
         var isShapeClick = isShape ? isShape : this.isShapeClick(e, this.isCropSelection);
         var allowUndoRedoPush = this.applyCurrShape(isShapeClick);
+        var isTextArea = parent.textArea.style.display !== 'none' ? true : false;
         if (this.isTouch && !isShape && activeObj.shape && !this.isCropSelection) {
             if (this.applyObj(x, y)) {
                 parent.okBtn(true);
@@ -2927,7 +2890,9 @@ var Selection = /** @class */ (function () {
             if (this.applyObj(x, y)) {
                 parent.okBtn(true);
                 if (allowUndoRedoPush) {
+                    var cursor_1 = parent.cursor;
                     parent.notify('undo-redo', { prop: 'updateCurrUrc', value: { type: 'ok' } });
+                    parent.cursor = cursor_1;
                 }
                 parent.notify('draw', { prop: 'setPrevActObj', onPropertyChange: false, value: { prevActObj: null } });
             }
@@ -2938,10 +2903,9 @@ var Selection = /** @class */ (function () {
                     parent.notify('toolbar', { prop: 'destroy-qa-toolbar', onPropertyChange: false });
                 }
             }
-            if (parent.activeObj.shape && (parent.activeObj.shape === 'rectangle' ||
-                parent.activeObj.shape === 'ellipse' || parent.activeObj.shape === 'line' ||
-                parent.activeObj.shape === 'arrow' || parent.activeObj.shape === 'path' || parent.activeObj.shape === 'text' ||
-                parent.activeObj.shape === 'image')) {
+            var shape = parent.activeObj.shape;
+            var shapeColl = ['rectangle', 'ellipse', 'line', 'arrow', 'path', 'text', 'image'];
+            if (shape && shapeColl.indexOf(shape) > -1) {
                 parent.notify('shape', { prop: 'redrawActObj', onPropertyChange: false,
                     value: { x: null, y: null, isMouseDown: null } });
                 parent.notify('shape', { prop: 'refreshActiveObj', onPropertyChange: false });
@@ -2967,7 +2931,9 @@ var Selection = /** @class */ (function () {
             if (this.applyObj(x_1, y_1)) {
                 parent.okBtn(true);
                 if (allowUndoRedoPush) {
+                    var cursor_2 = parent.cursor;
                     parent.notify('undo-redo', { prop: 'updateCurrUrc', value: { type: 'ok' } });
+                    parent.cursor = cursor_2;
                 }
                 parent.notify('draw', { prop: 'setPrevActObj', onPropertyChange: false, value: { prevActObj: null } });
             }
@@ -2993,6 +2959,7 @@ var Selection = /** @class */ (function () {
                 }
                 indexObj['freehandSelectedIndex'] = null;
                 parent.notify('freehand-draw', { prop: 'getFreehandSelectedIndex', onPropertyChange: false, value: { obj: indexObj } });
+                var objColl = extend([], parent.objColl, [], true);
                 if (!isNullOrUndefined(obj['index']) && obj['index'] > -1) {
                     parent.notify('freehand-draw', { prop: 'selectFhd', value: { type: 'ok' } });
                     parent.notify('freehand-draw', { prop: 'hoverFhd', onPropertyChange: false,
@@ -3012,18 +2979,25 @@ var Selection = /** @class */ (function () {
                         value: { strokeColor: strokeColor, strokeWidth: parent.pointColl[indexObj['freehandSelectedIndex']].strokeWidth } });
                 }
                 else if (this.findTargetObj(x_1, y_1, false)) {
+                    parent.objColl = objColl;
                     this.findTarget(x_1, y_1, e.type);
+                    parent.notify('draw', { prop: 'redrawDownScale' });
                 }
             }
             else {
                 if (this.isFhdEditing) {
                     parent.notify('freehand-draw', { prop: 'cancelFhd', value: { type: 'ok' } });
-                    if (document.getElementById(parent.element.id + '_quickAccessToolbarArea')) {
-                        document.getElementById(parent.element.id + '_quickAccessToolbarArea').style.display = 'none';
+                    var qbArea = document.getElementById(parent.element.id + '_quickAccessToolbarArea');
+                    if (qbArea) {
+                        qbArea.style.display = 'none';
                     }
                 }
                 if (!isBlazor()) {
+                    var isPenDraw = parent.togglePen;
                     parent.notify('toolbar', { prop: 'close-contextual-toolbar', onPropertyChange: false });
+                    if (isPenDraw) {
+                        parent.freehandDraw(true);
+                    }
                 }
                 this.isFhdEditing = false;
                 if (isLineArrow) {
@@ -3032,13 +3006,11 @@ var Selection = /** @class */ (function () {
                 else if (cursor !== 'default') {
                     parent.upperCanvas.style.cursor = parent.cursor = cursor;
                 }
-                // this.setCursor(x, y);
                 if (parent.cursor === 'crosshair' || (Browser.isDevice && parent.togglePen)) {
                     if (parent.togglePen) {
                         if (isNullOrUndefined(parent.activeObj.strokeSettings)) {
                             var obj_1 = { strokeSettings: {} };
-                            parent.notify('shape', { prop: 'getStrokeSettings', onPropertyChange: false,
-                                value: { obj: obj_1 } });
+                            parent.notify('shape', { prop: 'getStrokeSettings', onPropertyChange: false, value: { obj: obj_1 } });
                             parent.activeObj.strokeSettings = obj_1['strokeSettings'];
                         }
                         var obj_2 = { penStrokeWidth: null };
@@ -3062,10 +3034,14 @@ var Selection = /** @class */ (function () {
                 if ((parent.cursor !== 'crosshair' && e.type.toLowerCase() === 'touchstart') ||
                     (parent.currObjType.isActiveObj && parent.cursor !== 'default' && !parent.togglePen)) {
                     this.findTarget(x_1, y_1, e.type);
+                    parent.notify('draw', { prop: 'redrawDownScale' });
                 }
                 else if ((parent.currObjType.shape === '' || parent.currObjType.isCustomCrop) && !parent.togglePen && parent.cursor !== 'default') {
                     this.setActivePoint(x_1, y_1);
                 }
+                if (isTextArea) {
+                    parent.notify('draw', { prop: 'clearOuterCanvas', onPropertyChange: false, value: { context: this.lowerContext } });
+                }
             }
         }
         this.isShapeInserted = false;
@@ -3076,6 +3052,9 @@ var Selection = /** @class */ (function () {
         var cursor = parent.cursor;
         var canvasCursor = parent.upperCanvas.style.cursor;
         e.preventDefault();
+        if (this.timer && this.timer > 0) {
+            this.timer = 0;
+        }
         var bbox = parent.lowerCanvas.getBoundingClientRect();
         if (e.type === 'touchmove' && e.touches.length === 2) {
             if (this.isFirstMove) {
@@ -3109,7 +3088,7 @@ var Selection = /** @class */ (function () {
                     }
                     if (type !== '') {
                         parent.notify('draw', { prop: 'performPointZoom', onPropertyChange: false,
-                            value: { x: center.x, y: center.y, type: type } });
+                            value: { x: center.x, y: center.y, type: type, isResize: null } });
                     }
                     this.tempTouches = [];
                     this.tempTouches.push({ x: e.touches[0].clientX || (e.touches[0].pageX - parent.lowerCanvas.offsetLeft),
@@ -3118,6 +3097,7 @@ var Selection = /** @class */ (function () {
                         y: e.touches[1].clientY || (e.touches[1].pageY - parent.lowerCanvas.offsetTop) });
                     this.currMousePoint.x = center.x;
                     this.currMousePoint.y = center.y;
+                    this.isPinching = true;
                 }
             }
             this.isFirstMove = false;
@@ -3164,15 +3144,16 @@ var Selection = /** @class */ (function () {
                 this.findTarget(x, y, e.type);
             }
         }
+        var _a = parent.img, destLeft = _a.destLeft, destTop = _a.destTop, destWidth = _a.destWidth, destHeight = _a.destHeight;
         if (parent.currObjType.isDragging) {
             this.upperContext.clearRect(0, 0, parent.lowerCanvas.width, parent.lowerCanvas.height);
             this.updateActivePoint(x, y, isCropSelection);
             parent.notify('shape', { prop: 'updateTrianglePoints', onPropertyChange: false, value: { obj: parent.activeObj } });
             if (this.isPreventDragging) {
-                if ((parent.activeObj.activePoint.startX > parent.img.destLeft) &&
-                    (parent.activeObj.activePoint.endX < parent.img.destLeft + parent.img.destWidth) &&
-                    (parent.activeObj.activePoint.startY > parent.img.destTop)
-                    && (parent.activeObj.activePoint.endY < parent.img.destTop + parent.img.destHeight)) {
+                if ((parent.activeObj.activePoint.startX > destLeft) &&
+                    (parent.activeObj.activePoint.endX < destLeft + destWidth) &&
+                    (parent.activeObj.activePoint.startY > destTop)
+                    && (parent.activeObj.activePoint.endY < destTop + destHeight)) {
                     this.isPreventDragging = false;
                 }
                 parent.notify('draw', { prop: 'drawObject', onPropertyChange: false, value: { canvas: 'duplicate', obj: null, isCropRatio: null,
@@ -3188,8 +3169,14 @@ var Selection = /** @class */ (function () {
         }
     };
     Selection.prototype.mouseUpEventHandler = function (e) {
-        var _this = this;
         var parent = this.parent;
+        var id = parent.element.id;
+        if (!Browser.isDevice && ((parent.element.querySelector('#' + id + '_contextualToolbar') &&
+            !parent.element.querySelector('#' + id + '_contextualToolbar').parentElement.classList.contains('e-hide')) ||
+            (parent.element.querySelector('#' + id + '_headWrapper')
+                && !parent.element.querySelector('#' + id + '_headWrapper').parentElement.classList.contains('e-hide')))) {
+            return;
+        }
         if (e.type === 'touchstart') {
             this.isTouch = false;
         }
@@ -3219,6 +3206,19 @@ var Selection = /** @class */ (function () {
             if (parent.textArea.style.display === 'none') {
                 this.timer = 0;
             }
+            if (this.isPinching) {
+                this.isPinching = false;
+                parent.notify('draw', { prop: 'redrawDownScale' });
+                if (parent.isCropTab || parent.activeObj.shape) {
+                    parent.notify('draw', { prop: 'setStraightenActObj', value: { activeObj: null } });
+                    parent.notify('freehand-draw', { prop: 'resetStraightenPoint' });
+                }
+                if (parent.isStraightening) {
+                    parent.notify('draw', { prop: 'resetStraightenDestPoints' });
+                    parent.notify('draw', { prop: 'setDestForStraighten' });
+                }
+                return;
+            }
         }
         var isCropSelection = false;
         var splitWords;
@@ -3228,25 +3228,25 @@ var Selection = /** @class */ (function () {
         if (splitWords !== undefined && splitWords[0] === 'crop') {
             isCropSelection = true;
         }
-        if (isBlazor() && this.parent.eventType) {
-            if (this.parent.eventType === 'pan') {
+        if (isBlazor() && parent.eventType) {
+            if (parent.eventType === 'pan') {
                 if (parent.events && parent.events.onPanEnd.hasDelegate === true) {
-                    parent.dotNetRef.invokeMethodAsync('PanEventAsync', 'OnPanEnd', this.parent.panEventArgs);
+                    parent.dotNetRef.invokeMethodAsync('PanEventAsync', 'OnPanEnd', parent.panEventArgs);
                 }
             }
-            else if (this.parent.eventType === 'resize') {
-                if (!this.isCropSelection && this.parent.events && this.parent.events.onShapeResizeEnd.hasDelegate === true) {
+            else if (parent.eventType === 'resize') {
+                if (!this.isCropSelection && parent.events && parent.events.onShapeResizeEnd.hasDelegate === true) {
                     this.shapeResizingArgs.currentShapeSettings = this.updatePrevShapeSettings();
                     this.shapeResizingArgs.action = this.currentDrawingShape !== '' ? 'drawing' : 'resize-end';
                     /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
-                    this.parent.dotNetRef.invokeMethodAsync('ShapeEventAsync', 'OnShapeResizeEnd', this.shapeResizingArgs).then(function (shapeResizingArgs) {
-                        _this.parent.notify('shape', { prop: 'updateShapeChangeEventArgs', onPropertyChange: false,
+                    parent.dotNetRef.invokeMethodAsync('ShapeEventAsync', 'OnShapeResizeEnd', this.shapeResizingArgs, null).then(function (shapeResizingArgs) {
+                        parent.notify('shape', { prop: 'updateShapeChangeEventArgs', onPropertyChange: false,
                             value: { shapeSettings: shapeResizingArgs.currentShapeSettings } });
                     });
                 }
-                else if (this.shapeResizingArgs && this.selectionResizingArgs && this.parent.events &&
-                    this.parent.events.onSelectionResizeEnd.hasDelegate === true) {
-                    var currentSelectionSettings = { type: this.parent.activeObj.shape,
+                else if (this.shapeResizingArgs && this.selectionResizingArgs && parent.events &&
+                    parent.events.onSelectionResizeEnd.hasDelegate === true) {
+                    var currentSelectionSettings = { type: parent.activeObj.shape,
                         startX: this.shapeResizingArgs.currentShapeSettings.startX,
                         startY: this.shapeResizingArgs.currentShapeSettings.startY,
                         width: this.shapeResizingArgs.currentShapeSettings.width,
@@ -3254,36 +3254,38 @@ var Selection = /** @class */ (function () {
                     this.selectionResizingArgs.currentSelectionSettings = currentSelectionSettings;
                     this.selectionResizingArgs.action = 'resize-end';
                     /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
-                    this.parent.dotNetRef.invokeMethodAsync('SelectionEventAsync', 'OnSelectionResizeEnd', this.selectionResizingArgs).then(function (selectionResizingArgs) {
-                        _this.parent.notify('shape', { prop: 'updateSelectionChangeEventArgs', onPropertyChange: false,
+                    parent.dotNetRef.invokeMethodAsync('SelectionEventAsync', 'OnSelectionResizeEnd', this.selectionResizingArgs).then(function (selectionResizingArgs) {
+                        parent.notify('shape', { prop: 'updateSelectionChangeEventArgs', onPropertyChange: false,
                             value: { selectionSettings: selectionResizingArgs.currentSelectionSettings } });
                     });
                 }
             }
             else {
-                if (this.shapeMovingArgs && this.parent.events && this.parent.events.onShapeDragEnd.hasDelegate === true) {
+                if (this.shapeMovingArgs && parent.events && parent.events.onShapeDragEnd.hasDelegate === true) {
                     this.shapeMovingArgs.currentShapeSettings = this.updatePrevShapeSettings();
                     this.shapeMovingArgs.action = 'drag-end';
                     /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
-                    this.parent.dotNetRef.invokeMethodAsync('ShapeEventAsync', 'OnShapeDragEnd', this.shapeMovingArgs).then(function (shapeMovingArgs) {
-                        _this.parent.notify('shape', { prop: 'updateShapeChangeEventArgs', onPropertyChange: false,
+                    parent.dotNetRef.invokeMethodAsync('ShapeEventAsync', 'OnShapeDragEnd', this.shapeMovingArgs, null).then(function (shapeMovingArgs) {
+                        parent.notify('shape', { prop: 'updateShapeChangeEventArgs', onPropertyChange: false,
                             value: { shapeSettings: shapeMovingArgs.currentShapeSettings } });
                     });
                 }
             }
             this.shapeResizingArgs = null;
             this.shapeMovingArgs = null;
-            this.parent.panEventArgs = null;
-            this.parent.eventType = null;
+            parent.panEventArgs = null;
+            parent.eventType = null;
         }
         if (this.currentDrawingShape === 'path') {
+            /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
             var elem = e.srcElement;
+            var elemId = elem.parentElement.id;
+            var id_1 = parent.element.id;
             if (e.currentTarget !== parent.upperCanvas && e.currentTarget !== parent.lowerCanvas && parent.activeObj.pointColl.length > 0 &&
-                (elem.classList.contains('e-upload-icon') || elem.parentElement.id === parent.element.id + '_zoomIn' ||
-                    elem.parentElement.id === parent.element.id + '_zoomOut' || elem.parentElement.id === parent.element.id + '_annotationBtn' ||
-                    elem.parentElement.id === parent.element.id + '_borderColorBtn' || elem.parentElement.id === parent.element.id + '_borderWidthBtn' ||
-                    elem.parentElement.id === parent.element.id + '_saveBtn')) {
-                this.parent.notify('shape', { prop: 'stopPathDrawing', onPropertyChange: false, value: { e: e, isApply: true } });
+                (elem.classList.contains('e-upload-icon') || elemId === id_1 + '_zoomIn' ||
+                    elemId === id_1 + '_zoomOut' || elemId === id_1 + '_annotationBtn' ||
+                    elemId === id_1 + '_borderColorBtn' || elemId === id_1 + '_borderWidthBtn' || elemId === id_1 + '_saveBtn')) {
+                parent.notify('shape', { prop: 'stopPathDrawing', onPropertyChange: false, value: { e: e, isApply: true } });
                 this.upperContext.clearRect(0, 0, parent.upperCanvas.width, parent.upperCanvas.height);
                 parent.notify('draw', { prop: 'drawObject', onPropertyChange: false, value: { canvas: 'duplicate', obj: parent.activeObj, isCropRatio: null,
                         points: null, isPreventDrag: true, saveContext: null, isPreventSelection: true } });
@@ -3310,8 +3312,8 @@ var Selection = /** @class */ (function () {
                     parent.notify('draw', { prop: 'performCancel', value: { isContextualToolbar: null } });
                 }
                 var previousShapeSettings = this.updatePrevShapeSettings();
-                var shapeResizingArgs = { action: 'draw-end', previousShapeSettings: previousShapeSettings };
-                var shapeMovingArgs = { action: 'move', previousShapeSettings: previousShapeSettings };
+                var shapeResizingArgs = { cancel: false, action: 'draw-end', previousShapeSettings: previousShapeSettings };
+                var shapeMovingArgs = { cancel: false, action: 'move', previousShapeSettings: previousShapeSettings };
                 this.shapeResizingArgs = shapeResizingArgs;
                 this.shapeMovingArgs = shapeMovingArgs;
                 this.triggerShapeChange(shapeResizingArgs, shapeMovingArgs, 'mouse-up');
@@ -3332,6 +3334,7 @@ var Selection = /** @class */ (function () {
             prevObj.selPointColl = extend([], selPointCollObj['selPointColl'], [], true);
             if (!parent.togglePen && !isCropSelection) {
                 if (this.tempObjColl && parent.activeObj.activePoint.width !== 0) {
+                    parent.notify('shape', { prop: 'updImgRatioForActObj', onPropertyChange: false });
                     parent.objColl.push(parent.activeObj);
                     if (JSON.stringify(parent.activeObj.activePoint) !== JSON.stringify(this.tempActiveObj.activePoint)) {
                         parent.notify('undo-redo', { prop: 'updateUndoRedoColl', onPropertyChange: false,
@@ -3363,13 +3366,14 @@ var Selection = /** @class */ (function () {
                 else if (splitWords_1 !== undefined && splitWords_1[0] === 'crop') {
                     isCropSelection_1 = true;
                 }
+                var shape = parent.activeObj.shape;
                 if (!isBlazor()) {
-                    if ((parent.activeObj.shape === 'rectangle') || (parent.activeObj.shape === 'ellipse')
-                        || (parent.activeObj.shape === 'line' || parent.activeObj.shape === 'arrow' || parent.activeObj.shape === 'path')) {
+                    var shapeColl = ['rectangle', 'ellipse', 'line', 'arrow', 'path'];
+                    if (shapeColl.indexOf(shape) > -1) {
                         parent.notify('toolbar', { prop: 'refresh-toolbar', onPropertyChange: false, value: { type: 'shapes',
                                 isApplyBtn: null, isCropping: null, isZooming: null, cType: null } });
                     }
-                    else if (parent.activeObj.shape === 'text') {
+                    else if (shape === 'text') {
                         if (parent.textArea.style.display === 'none') {
                             parent.notify('toolbar', { prop: 'refresh-toolbar', onPropertyChange: false, value: { type: 'text',
                                     isApplyBtn: null, isCropping: null, isZooming: null, cType: null } });
@@ -3386,9 +3390,8 @@ var Selection = /** @class */ (function () {
                     parent.notify('toolbar', { prop: 'update-toolbar-items', onPropertyChange: false });
                 }
                 else {
-                    if ((parent.activeObj.shape === 'rectangle') || (parent.activeObj.shape === 'ellipse')
-                        || (parent.activeObj.shape === 'line' || parent.activeObj.shape === 'arrow' || parent.activeObj.shape === 'path'
-                            || parent.activeObj.shape === 'image')) {
+                    var shapeColl = ['rectangle', 'ellipse', 'line', 'arrow', 'path', 'image'];
+                    if (shapeColl.indexOf(shape) > -1) {
                         parent.updateToolbar(parent.element, parent.activeObj.shape);
                     }
                     else if (parent.activeObj.shape === 'text' && parent.textArea.style.display === 'none') {
@@ -3457,7 +3460,6 @@ var Selection = /** @class */ (function () {
             if (parent.activeObj.shape !== 'path') {
                 parent.notify('shape', { prop: 'setPointCollForLineArrow', onPropertyChange: false,
                     value: { obj: obj } });
-                // Updating ratio for point collection
                 for (var i = 0; i < obj.pointColl.length; i++) {
                     obj.pointColl[i].ratioX = (obj.pointColl[i].x -
                         parent.img.destLeft) / parent.img.destWidth;
@@ -3472,33 +3474,17 @@ var Selection = /** @class */ (function () {
         var parent = this.parent;
         obj = obj ? obj : parent.activeObj;
         if (obj.shape && obj.rotatedAngle !== 0) {
-            parent.notify('shape', { prop: 'setPointCollForShapeRotation', onPropertyChange: false,
-                value: { obj: obj } });
-            // Updating ratio for point collection
-            for (var i = 0; i < obj.horTopLinePointColl.length; i++) {
-                obj.horTopLinePointColl[i].ratioX = (obj.horTopLinePointColl[i].x -
-                    parent.img.destLeft) / parent.img.destWidth;
-                obj.horTopLinePointColl[i].ratioY = (obj.horTopLinePointColl[i].y -
-                    parent.img.destTop) / parent.img.destHeight;
-            }
-            for (var i = 0; i < obj.horBottomLinePointColl.length; i++) {
-                obj.horBottomLinePointColl[i].ratioX = (obj.horBottomLinePointColl[i].x -
-                    parent.img.destLeft) / parent.img.destWidth;
-                obj.horBottomLinePointColl[i].ratioY = (obj.horBottomLinePointColl[i].y -
-                    parent.img.destTop) / parent.img.destHeight;
-            }
-            for (var i = 0; i < obj.verLeftLinePointColl.length; i++) {
-                obj.verLeftLinePointColl[i].ratioX = (obj.verLeftLinePointColl[i].x -
-                    parent.img.destLeft) / parent.img.destWidth;
-                obj.verLeftLinePointColl[i].ratioY = (obj.verLeftLinePointColl[i].y -
-                    parent.img.destTop) / parent.img.destHeight;
-            }
-            for (var i = 0; i < obj.verRightLinePointColl.length; i++) {
-                obj.verRightLinePointColl[i].ratioX = (obj.verRightLinePointColl[i].x -
-                    parent.img.destLeft) / parent.img.destWidth;
-                obj.verRightLinePointColl[i].ratioY = (obj.verRightLinePointColl[i].y -
-                    parent.img.destTop) / parent.img.destHeight;
-            }
+            parent.notify('shape', { prop: 'setPointCollForShapeRotation', onPropertyChange: false, value: { obj: obj } });
+            var _a = parent.img, destLeft_1 = _a.destLeft, destTop_1 = _a.destTop, destWidth_1 = _a.destWidth, destHeight_1 = _a.destHeight;
+            var horTopLinePointColl = obj.horTopLinePointColl, horBottomLinePointColl = obj.horBottomLinePointColl, verLeftLinePointColl = obj.verLeftLinePointColl, verRightLinePointColl = obj.verRightLinePointColl;
+            var setRatio = function (point) {
+                point.ratioX = (point.x - destLeft_1) / destWidth_1;
+                point.ratioY = (point.y - destTop_1) / destHeight_1;
+            };
+            horTopLinePointColl.forEach(setRatio);
+            horBottomLinePointColl.forEach(setRatio);
+            verLeftLinePointColl.forEach(setRatio);
+            verRightLinePointColl.forEach(setRatio);
         }
     };
     Selection.prototype.setXYPoints = function (e) {
@@ -3521,7 +3507,7 @@ var Selection = /** @class */ (function () {
     Selection.prototype.getCurrentIndex = function () {
         var index;
         var parent = this.parent;
-        for (var i = 0; i < parent.objColl.length; i++) {
+        for (var i = 0, len = parent.objColl.length; i < len; i++) {
             if (parent.activeObj.currIndex === parent.objColl[i].currIndex) {
                 index = i;
                 break;
@@ -3536,7 +3522,8 @@ var Selection = /** @class */ (function () {
             return isShape;
         }
         if (parent.activeObj.shape && parent.activeObj.shape === 'text' && this.isShapeInserted) {
-            var isTextArea = parent.textArea.style.display === 'block' ? true : false;
+            var isTextArea = (parent.textArea.style.display === 'block' || parent.textArea.style.display === 'inline-block')
+                ? true : false;
             var activeObj = extend({}, parent.activeObj, null, true);
             parent.notify('shape', { prop: 'redrawActObj', onPropertyChange: false,
                 value: { x: null, y: null, isMouseDown: true } });
@@ -3584,7 +3571,8 @@ var Selection = /** @class */ (function () {
             if (parent.activeObj && parent.activeObj.shape === 'text') {
                 this.timer = setTimeout(this.setTimer.bind(this), 1000, e);
             }
-            var isTextArea = parent.textArea.style.display === 'block' ? true : false;
+            var isTextArea = (parent.textArea.style.display === 'block' || parent.textArea.style.display === 'inline-block')
+                ? true : false;
             var activeObj = extend({}, parent.activeObj, null, true);
             parent.notify('shape', { prop: 'redrawActObj', onPropertyChange: false,
                 value: { x: null, y: null, isMouseDown: true } });
@@ -3620,7 +3608,6 @@ var Selection = /** @class */ (function () {
                     }
                 }
             }
-            // this.timer = null;
         }
         return isShape;
     };
@@ -3628,7 +3615,8 @@ var Selection = /** @class */ (function () {
         var parent = this.parent;
         var isFreehandDraw = false;
         if (e.type === 'touchstart' && !isCropSelection && !parent.togglePen) {
-            var isTextArea = parent.textArea.style.display === 'block' ? true : false;
+            var isTextArea = (parent.textArea.style.display === 'block' || parent.textArea.style.display === 'inline-block')
+                ? true : false;
             var activeObj = extend({}, parent.activeObj, null, true);
             parent.notify('shape', { prop: 'redrawActObj', onPropertyChange: false,
                 value: { x: null, y: null, isMouseDown: true } });
@@ -3670,13 +3658,12 @@ var Selection = /** @class */ (function () {
     Selection.prototype.applyObj = function (x, y) {
         var parent = this.parent;
         var isApply = false;
-        if (parent.activeObj.shape && (parent.activeObj.shape === 'rectangle' || parent.activeObj.shape === 'ellipse' ||
-            parent.activeObj.shape === 'text' || parent.activeObj.shape === 'line' || parent.activeObj.shape === 'arrow' ||
-            parent.activeObj.shape === 'path' || parent.activeObj.shape === 'image')) {
-            if (x >= (parent.activeObj.activePoint.startX - (parent.activeObj.topLeftCircle.radius * 2)) &&
-                x <= (parent.activeObj.activePoint.endX + (parent.activeObj.topLeftCircle.radius * 2)) &&
-                y >= (parent.activeObj.activePoint.startY - (parent.activeObj.topLeftCircle.radius * 2)) &&
-                y <= (parent.activeObj.activePoint.endY + (parent.activeObj.topLeftCircle.radius * 2))) {
+        var shapeColl = ['rectangle', 'ellipse', 'line', 'arrow', 'path', 'image', 'text'];
+        var _a = parent.activeObj.activePoint, startX = _a.startX, startY = _a.startY, endX = _a.endX, endY = _a.endY;
+        if (parent.activeObj.shape && shapeColl.indexOf(parent.activeObj.shape) > -1) {
+            var radius = parent.activeObj.topLeftCircle.radius;
+            if (x >= (startX - (radius * 2)) && x <= (endX + (radius * 2)) && y >= (startY - (radius * 2)) &&
+                y <= (endY + (radius * 2))) {
                 isApply = false;
             }
             else if (parent.upperCanvas.style.cursor !== 'default' && parent.upperCanvas.style.cursor !== 'grab' &&
@@ -3701,7 +3688,7 @@ var Selection = /** @class */ (function () {
             this.isInitialTextEdited = true;
             parent.notify('draw', { prop: 'setShapeTextInsert', onPropertyChange: false, value: { bool: true } });
         }
-        if (parent.textArea.style.display === 'block') {
+        if (parent.textArea.style.display === 'block' || parent.textArea.style.display === 'inline-block') {
             var activeObj = extend({}, parent.activeObj, null, true);
             parent.notify('shape', { prop: 'redrawActObj', onPropertyChange: false,
                 value: { x: null, y: null, isMouseDown: null } });
@@ -3711,7 +3698,7 @@ var Selection = /** @class */ (function () {
             parent.textArea.value = obj.keyHistory;
             parent.textArea.style.display = 'block';
             var strokeColor = obj.strokeSettings && obj.strokeSettings.strokeColor ? obj.strokeSettings.strokeColor.split('(')[0] === 'rgb' ?
-                this.rgbToHex(parseFloat(obj.strokeSettings.strokeColor.split('(')[1].split(',')[0]), parseFloat(obj.strokeSettings.strokeColor.split('(')[1].split(',')[1]), parseFloat(obj.strokeSettings.strokeColor.split('(')[1].split(',')[2])) :
+                this.rgbToHex(parseFloat(obj.strokeSettings.strokeColor.split('(')[1].split(',')[0]), parseFloat(obj.strokeSettings.strokeColor.split('(')[1].split(',')[1]), parseFloat(obj.strokeSettings.strokeColor.split('(')[1].split(',')[2]), parseFloat(obj.strokeSettings.strokeColor.split('(')[1].split(',')[3])) :
                 obj.strokeSettings.strokeColor : null;
             if (strokeColor && strokeColor === '#ffffff') {
                 strokeColor = '#fff';
@@ -3798,6 +3785,10 @@ var Selection = /** @class */ (function () {
         parent.notify('transform', { prop: 'setPanMove', onPropertyChange: false,
             value: { point: { x: x, y: y } } });
         if (this.panDown && panMove && parent.togglePan && this.dragCanvas) {
+            if (parent.isCropTab || parent.activeObj.shape) {
+                parent.notify('draw', { prop: 'setStraightenActObj', value: { activeObj: null } });
+                parent.notify('freehand-draw', { prop: 'resetStraightenPoint' });
+            }
             parent.notify('transform', { prop: 'drawPannedImage', onPropertyChange: false,
                 value: { xDiff: null, yDiff: null } });
         }
@@ -3823,12 +3814,13 @@ var Selection = /** @class */ (function () {
     };
     Selection.prototype.touchStartHandler = function (e) {
         e.preventDefault();
+        var parent = this.parent;
         if (this.touchTime === 0) {
             this.touchTime = new Date().getTime();
         }
         else {
             if (((new Date().getTime()) - this.touchTime) < 400) {
-                this.parent.notify('shape', { prop: 'stopPathDrawing', onPropertyChange: false, value: { e: e, isApply: null } });
+                parent.notify('shape', { prop: 'stopPathDrawing', onPropertyChange: false, value: { e: e, isApply: null } });
                 this.touchTime = 0;
             }
             else {
@@ -3841,16 +3833,17 @@ var Selection = /** @class */ (function () {
         else {
             this.mouseDownEventHandler(e);
         }
-        EventHandler.add(this.parent.lowerCanvas, 'touchend', this.mouseUpEventHandler, this);
-        EventHandler.add(this.parent.lowerCanvas, 'touchmove', this.mouseMoveEventHandler, this);
-        EventHandler.add(this.parent.upperCanvas, 'touchend', this.mouseUpEventHandler, this);
-        EventHandler.add(this.parent.upperCanvas, 'touchmove', this.mouseMoveEventHandler, this);
+        EventHandler.add(parent.lowerCanvas, 'touchend', this.mouseUpEventHandler, this);
+        EventHandler.add(parent.lowerCanvas, 'touchmove', this.mouseMoveEventHandler, this);
+        EventHandler.add(parent.upperCanvas, 'touchend', this.mouseUpEventHandler, this);
+        EventHandler.add(parent.upperCanvas, 'touchmove', this.mouseMoveEventHandler, this);
     };
     Selection.prototype.unwireEvent = function () {
-        EventHandler.remove(this.parent.lowerCanvas, 'touchend', this.mouseUpEventHandler);
-        EventHandler.remove(this.parent.lowerCanvas, 'touchmove', this.mouseMoveEventHandler);
-        EventHandler.remove(this.parent.upperCanvas, 'touchend', this.mouseUpEventHandler);
-        EventHandler.remove(this.parent.upperCanvas, 'touchmove', this.mouseMoveEventHandler);
+        var parent = this.parent;
+        EventHandler.remove(parent.lowerCanvas, 'touchend', this.mouseUpEventHandler);
+        EventHandler.remove(parent.lowerCanvas, 'touchmove', this.mouseMoveEventHandler);
+        EventHandler.remove(parent.upperCanvas, 'touchend', this.mouseUpEventHandler);
+        EventHandler.remove(parent.upperCanvas, 'touchmove', this.mouseMoveEventHandler);
     };
     Selection.prototype.keyDownEventHandler = function (e) {
         var _this = this;
@@ -3889,6 +3882,15 @@ var Selection = /** @class */ (function () {
                     this.zoomType = 'Commands';
                     parent.notify('transform', { prop: 'zoomAction', onPropertyChange: false,
                         value: { zoomFactor: .1, zoomPoint: null }, isResize: null });
+                    parent.notify('draw', { prop: 'redrawDownScale' });
+                    if (parent.isCropTab || parent.activeObj.shape) {
+                        parent.notify('draw', { prop: 'setStraightenActObj', value: { activeObj: null } });
+                        parent.notify('freehand-draw', { prop: 'resetStraightenPoint' });
+                    }
+                    if (parent.isStraightening) {
+                        parent.notify('draw', { prop: 'resetStraightenDestPoints' });
+                        parent.notify('draw', { prop: 'setDestForStraighten' });
+                    }
                 }
                 break;
             case (e.ctrlKey && '-'):
@@ -3896,6 +3898,15 @@ var Selection = /** @class */ (function () {
                     this.zoomType = 'Commands';
                     parent.notify('transform', { prop: 'zoomAction', onPropertyChange: false,
                         value: { zoomFactor: -.1, zoomPoint: null }, isResize: null });
+                    parent.notify('draw', { prop: 'redrawDownScale' });
+                    if (parent.isCropTab || parent.activeObj.shape) {
+                        parent.notify('draw', { prop: 'setStraightenActObj', value: { activeObj: null } });
+                        parent.notify('freehand-draw', { prop: 'resetStraightenPoint' });
+                    }
+                    if (parent.isStraightening) {
+                        parent.notify('draw', { prop: 'resetStraightenDestPoints' });
+                        parent.notify('draw', { prop: 'setDestForStraighten' });
+                    }
                 }
                 break;
             case 'Delete':
@@ -3911,7 +3922,7 @@ var Selection = /** @class */ (function () {
                 this.performTabAction();
                 break;
             default:
-                if (Browser.isDevice && parent.textArea.style.display === 'block') {
+                if (Browser.isDevice && (parent.textArea.style.display === 'block' || parent.textArea.style.display === 'inline-block')) {
                     setTimeout(this.textKeyDown.bind(this), 1, e);
                 }
                 break;
@@ -3925,8 +3936,8 @@ var Selection = /** @class */ (function () {
                 return;
             }
             var point = this.getNumTextValue();
-            var aspectRatioElement = this.parent.element.querySelector('#' + this.parent.element.id + '_aspectratio');
-            var blrAspRatElem = this.parent.element.querySelector('.e-ie-toolbar-aspect-ratio-btn');
+            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) {
                 if (aspectRatioElement || (blrAspRatElem && !blrAspRatElem.classList.contains('e-hidden'))) {
                     parent.notify('transform', { prop: 'resize', value: { width: point.x, height: null, isAspectRatio: true } });
@@ -3936,16 +3947,16 @@ var Selection = /** @class */ (function () {
                 }
             }
             if (isBlazor()) {
-                var aspectRatioHeight = this.parent.element.querySelector('.e-ie-toolbar-e-resize-height-input .e-numerictextbox');
-                var aspectRatioWidth = this.parent.element.querySelector('.e-ie-toolbar-e-resize-width-input .e-numerictextbox');
+                var aspectRatioHeight = this.parent.element.querySelector('.e-ie-toolbar-e-resize-height-input .e-textbox');
+                var aspectRatioWidth = this.parent.element.querySelector('.e-ie-toolbar-e-resize-width-input .e-textbox');
                 if ((blrAspRatElem && blrAspRatElem.classList.contains('e-hidden'))) {
                     if (aspectRatioHeight && aspectRatioHeight.value === "") {
                         aspectRatioHeight.value = aspectRatioHeight.placeholder;
-                        aspectRatioHeight.value = Math.floor(parent.img.destHeight).toString();
+                        aspectRatioHeight.value = aspectRatioHeight.placeholder;
                     }
                     if (aspectRatioWidth && aspectRatioWidth.value === "") {
                         aspectRatioWidth.value = aspectRatioWidth.placeholder;
-                        aspectRatioWidth.value = Math.floor(parent.img.destWidth).toString();
+                        aspectRatioWidth.value = aspectRatioWidth.placeholder;
                     }
                 }
             }
@@ -3955,20 +3966,21 @@ var Selection = /** @class */ (function () {
                 if (isNullOrUndefined(aspectRatioElement)) {
                     if (aspectRatioHeight) {
                         var elem = getComponent(aspectRatioHeight, 'numerictextbox');
-                        if (aspectRatioHeight && isNullOrUndefined(elem.value)) {
+                        if (aspectRatioHeight && aspectRatioHeight.value === '') {
                             elem.value = parseFloat(elem.placeholder);
-                            aspectRatioHeight.value = Math.floor(parent.img.destHeight).toString() + ' px';
+                            aspectRatioHeight.value = elem.placeholder + 'px';
                         }
                     }
                     if (aspectRatioWidth) {
                         var elem = getComponent(aspectRatioWidth, 'numerictextbox');
-                        if (aspectRatioWidth && isNullOrUndefined(elem.value)) {
+                        if (aspectRatioWidth && aspectRatioWidth.value === '') {
                             elem.value = parseFloat(elem.placeholder);
-                            aspectRatioWidth.value = Math.floor(parent.img.destWidth).toString() + ' px';
+                            aspectRatioWidth.value = elem.placeholder + 'px';
                         }
                     }
                 }
             }
+            parent.notify('draw', { prop: 'redrawDownScale' });
         }
         else {
             var splitWords = void 0;
@@ -4038,12 +4050,24 @@ var Selection = /** @class */ (function () {
             }
             if (type !== '') {
                 parent.notify('draw', { prop: 'performPointZoom', onPropertyChange: false,
-                    value: { x: x, y: y, type: type } });
+                    value: { x: x, y: y, type: type, isResize: null } });
+                parent.notify('draw', { prop: 'redrawDownScale' });
+                if (parent.isCropTab || parent.activeObj.shape) {
+                    parent.notify('draw', { prop: 'setStraightenActObj', value: { activeObj: null } });
+                    parent.notify('freehand-draw', { prop: 'resetStraightenPoint' });
+                }
+                if (parent.isStraightening) {
+                    parent.notify('draw', { prop: 'resetStraightenDestPoints' });
+                    parent.notify('draw', { prop: 'setDestForStraighten' });
+                }
             }
         }
     };
     Selection.prototype.textKeyDown = function (e) {
         var parent = this.parent;
+        if (parent.activeObj.rotatedAngle !== 0) {
+            return;
+        }
         if (String.fromCharCode(e.which) === '\r') {
             this.textRow += 1;
         }
@@ -4076,33 +4100,33 @@ var Selection = /** @class */ (function () {
     Selection.prototype.setDragDirection = function (width, height) {
         var arcRadius = (7.5);
         var parent = this.parent;
+        var actPoint = parent.activeObj.activePoint;
         if (parent.img.destWidth > parent.img.destHeight) {
-            parent.activeObj.activePoint.startX = this.dragPoint.startX = ((width / 2) - (height / 2))
-                + arcRadius;
-            parent.activeObj.activePoint.startY = this.dragPoint.startY = ((height / 2) - (height / 2))
-                + arcRadius;
-            parent.activeObj.activePoint.endX = ((width / 2) + (height / 2)) - arcRadius;
-            parent.activeObj.activePoint.endY = ((height / 2) + (height / 2)) - arcRadius;
+            actPoint.startX = this.dragPoint.startX = ((width / 2) - (height / 2)) + arcRadius;
+            actPoint.startY = this.dragPoint.startY = ((height / 2) - (height / 2)) + arcRadius;
+            actPoint.endX = ((width / 2) + (height / 2)) - arcRadius;
+            actPoint.endY = ((height / 2) + (height / 2)) - arcRadius;
         }
         else {
-            parent.activeObj.activePoint.startY = this.dragPoint.startX = ((height / 2) - (width) / 2)
-                + arcRadius;
-            parent.activeObj.activePoint.endY = ((height / 2) + (width) / 2) - arcRadius;
-            parent.activeObj.activePoint.startX = this.dragPoint.startX = arcRadius;
-            parent.activeObj.activePoint.endX = width - arcRadius;
+            actPoint.startY = this.dragPoint.startX = ((height / 2) - (width) / 2) + arcRadius;
+            actPoint.endY = ((height / 2) + (width) / 2) - arcRadius;
+            actPoint.startX = this.dragPoint.startX = arcRadius;
+            actPoint.endX = width - arcRadius;
         }
     };
     Selection.prototype.calcShapeRatio = function (x, y, imgWidth, imgHeight) {
         var parent = this.parent;
+        var actPoint = parent.activeObj.activePoint;
         var arcRadius = (7.5);
+        var presetRatio = x / y;
         var originalWidth = imgWidth;
         var originalHeight = imgHeight;
-        var presetRatio = x / y;
         var standardSize = originalWidth >= originalHeight ? originalWidth : originalHeight;
         var width = standardSize * presetRatio;
         var height = standardSize;
         var scaleWidth = this.getScale(width, originalWidth);
         var snippetArray = [];
+        var _a = parent.img, destLeft = _a.destLeft, destTop = _a.destTop, destWidth = _a.destWidth, destHeight = _a.destHeight;
         for (var i = 0; i < 2; i++) {
             if (i === 0) {
                 snippetArray.push(width * scaleWidth);
@@ -4125,24 +4149,22 @@ var Selection = /** @class */ (function () {
         }
         width = snippetArray1[0];
         height = snippetArray1[1];
-        parent.activeObj.activePoint.width = width;
-        parent.activeObj.activePoint.height = height;
-        parent.activeObj.activePoint.startX = (this.dragPoint.startX = (originalWidth - width) / 2) + arcRadius;
-        parent.activeObj.activePoint.startY = (this.dragPoint.startY = (originalHeight - height) / 2) + arcRadius;
-        parent.activeObj.activePoint.endX = ((originalWidth - width) / 2 + width) - arcRadius;
-        parent.activeObj.activePoint.endY = ((originalHeight - height) / 2 + height) - arcRadius;
-        if (parent.activeObj.activePoint.startX < parent.img.destLeft && parent.img.destLeft + parent.img.destWidth >
-            parent.lowerCanvas.clientWidth) {
-            parent.activeObj.activePoint.startX = parent.img.destLeft;
-            parent.activeObj.activePoint.endX = parent.activeObj.activePoint.startX + width - arcRadius;
-        }
-        if (parent.activeObj.activePoint.startY < parent.img.destTop && parent.img.destTop + parent.img.destHeight >
-            parent.lowerCanvas.clientHeight) {
-            parent.activeObj.activePoint.startY = parent.img.destTop;
-            parent.activeObj.activePoint.endY = parent.activeObj.activePoint.startY + height - arcRadius;
-        }
-        parent.activeObj.activePoint.width = parent.activeObj.activePoint.endX - parent.activeObj.activePoint.startX;
-        parent.activeObj.activePoint.height = parent.activeObj.activePoint.endY - parent.activeObj.activePoint.startY;
+        actPoint.width = width;
+        actPoint.height = height;
+        actPoint.startX = (this.dragPoint.startX = (originalWidth - width) / 2) + arcRadius;
+        actPoint.startY = (this.dragPoint.startY = (originalHeight - height) / 2) + arcRadius;
+        actPoint.endX = ((originalWidth - width) / 2 + width) - arcRadius;
+        actPoint.endY = ((originalHeight - height) / 2 + height) - arcRadius;
+        if (actPoint.startX < destLeft && destLeft + destWidth > parent.lowerCanvas.clientWidth) {
+            actPoint.startX = destLeft;
+            actPoint.endX = actPoint.startX + width - arcRadius;
+        }
+        if (actPoint.startY < destTop && destTop + destHeight > parent.lowerCanvas.clientHeight) {
+            actPoint.startY = destTop;
+            actPoint.endY = actPoint.startY + height - arcRadius;
+        }
+        actPoint.width = actPoint.endX - actPoint.startX;
+        actPoint.height = actPoint.endY - actPoint.startY;
     };
     Selection.prototype.getScale = function (value, originalValue) {
         return value > originalValue ? originalValue / value : 1;
@@ -4162,38 +4184,39 @@ var Selection = /** @class */ (function () {
             this.updateCursorStyles(x, y, type);
         }
         else {
+            var _a = parent.activeObj, topLeftCircle = _a.topLeftCircle, topCenterCircle = _a.topCenterCircle, topRightCircle = _a.topRightCircle, centerLeftCircle = _a.centerLeftCircle, centerRightCircle = _a.centerRightCircle, bottomLeftCircle = _a.bottomLeftCircle, bottomCenterCircle = _a.bottomCenterCircle, bottomRightCircle = _a.bottomRightCircle;
             switch (this.dragElement.toLowerCase()) {
                 case 'nw-resize':
-                    parent.activeObj.topLeftCircle.startX = x;
-                    parent.activeObj.topLeftCircle.startY = y;
+                    topLeftCircle.startX = x;
+                    topLeftCircle.startY = y;
                     break;
                 case 'n-resize':
-                    parent.activeObj.topCenterCircle.startX = x;
-                    parent.activeObj.topCenterCircle.startY = y;
+                    topCenterCircle.startX = x;
+                    topCenterCircle.startY = y;
                     break;
                 case 'ne-resize':
-                    parent.activeObj.topRightCircle.startX = x;
-                    parent.activeObj.topRightCircle.startY = y;
+                    topRightCircle.startX = x;
+                    topRightCircle.startY = y;
                     break;
                 case 'w-resize':
-                    parent.activeObj.centerLeftCircle.startX = x;
-                    parent.activeObj.centerLeftCircle.startY = y;
+                    centerLeftCircle.startX = x;
+                    centerLeftCircle.startY = y;
                     break;
                 case 'e-resize':
-                    parent.activeObj.centerRightCircle.startX = x;
-                    parent.activeObj.centerRightCircle.startY = y;
+                    centerRightCircle.startX = x;
+                    centerRightCircle.startY = y;
                     break;
                 case 'sw-resize':
-                    parent.activeObj.bottomLeftCircle.startX = x;
-                    parent.activeObj.bottomLeftCircle.startY = y;
+                    bottomLeftCircle.startX = x;
+                    bottomLeftCircle.startY = y;
                     break;
                 case 's-resize':
-                    parent.activeObj.bottomCenterCircle.startX = x;
-                    parent.activeObj.bottomCenterCircle.startY = y;
+                    bottomCenterCircle.startX = x;
+                    bottomCenterCircle.startY = y;
                     break;
                 case 'se-resize':
-                    parent.activeObj.bottomRightCircle.startX = x;
-                    parent.activeObj.bottomRightCircle.startY = y;
+                    bottomRightCircle.startX = x;
+                    bottomRightCircle.startY = y;
                     break;
                 default:
                     if (this.dragPoint.startX && this.dragPoint.startY) {
@@ -4217,12 +4240,13 @@ var Selection = /** @class */ (function () {
                 var cursor = parent.upperCanvas.style.cursor;
                 this.setCursor(x, y);
                 var actObj = extend({}, parent.objColl[index], {}, true);
+                var radius = actObj.topLeftCircle.radius;
                 if (actObj.shape === 'line' || actObj.shape === 'arrow') {
                     for (var j = 0; j < actObj.pointColl.length; j++) {
-                        if (x >= actObj.pointColl[j].x - (actObj.topLeftCircle.radius * 2) &&
-                            x <= actObj.pointColl[j].x + (actObj.topLeftCircle.radius * 2) &&
-                            y >= actObj.pointColl[j].y - (actObj.topLeftCircle.radius * 2) &&
-                            y <= actObj.pointColl[j].y + (actObj.topLeftCircle.radius * 2)) {
+                        if (x >= actObj.pointColl[j].x - (radius * 2) &&
+                            x <= actObj.pointColl[j].x + (radius * 2) &&
+                            y >= actObj.pointColl[j].y - (radius * 2) &&
+                            y <= actObj.pointColl[j].y + (radius * 2)) {
                             if (this.tempActiveObj && this.tempActiveObj.activePoint &&
                                 JSON.stringify(this.tempActiveObj.activePoint) === JSON.stringify(actObj.activePoint)) {
                                 i = index;
@@ -4245,8 +4269,8 @@ var Selection = /** @class */ (function () {
                     }
                 }
                 else if (actObj.shape === 'path') {
-                    var cursor_1 = this.setCursorForPath(actObj, x, y, parent.upperCanvas);
-                    if (cursor_1 !== 'default' && cursor_1 !== 'grab') {
+                    var cursor_3 = this.setCursorForPath(actObj, x, y, parent.upperCanvas);
+                    if (cursor_3 !== 'default' && cursor_3 !== 'grab') {
                         if (this.tempActiveObj && this.tempActiveObj.activePoint &&
                             JSON.stringify(this.tempActiveObj.activePoint) === JSON.stringify(actObj.activePoint)) {
                             i = index;
@@ -4266,8 +4290,8 @@ var Selection = /** @class */ (function () {
                     }
                 }
                 else if (actObj.rotatedAngle !== 0) {
-                    var cursor_2 = this.setCursorForRotatedObject(actObj, x, y, parent.upperCanvas);
-                    if (cursor_2 !== 'default' && cursor_2 !== 'grab') {
+                    var cursor_4 = this.setCursorForRotatedObject(actObj, x, y, parent.upperCanvas);
+                    if (cursor_4 !== 'default' && cursor_4 !== 'grab') {
                         if (this.tempActiveObj && this.tempActiveObj.activePoint &&
                             JSON.stringify(this.tempActiveObj.activePoint) === JSON.stringify(actObj.activePoint)) {
                             i = index;
@@ -4288,15 +4312,15 @@ var Selection = /** @class */ (function () {
                 }
                 else {
                     var rotationCirclePoint = this.getTransRotationPoint(actObj);
-                    if ((x >= (actObj.activePoint.startX - (actObj.topLeftCircle.radius * 2)) &&
-                        x <= (actObj.activePoint.endX + (actObj.topLeftCircle.radius * 2)) &&
-                        y >= (actObj.activePoint.startY - (actObj.topLeftCircle.radius * 2)) &&
-                        y <= (actObj.activePoint.endY + (actObj.topLeftCircle.radius * 2))) ||
+                    if ((x >= (actObj.activePoint.startX - (radius * 2)) &&
+                        x <= (actObj.activePoint.endX + (radius * 2)) &&
+                        y >= (actObj.activePoint.startY - (radius * 2)) &&
+                        y <= (actObj.activePoint.endY + (radius * 2))) ||
                         (rotationCirclePoint &&
-                            x >= (rotationCirclePoint.x - (actObj.topLeftCircle.radius * 2)) &&
-                            x <= (rotationCirclePoint.x + (actObj.topLeftCircle.radius * 2)) &&
-                            y >= (rotationCirclePoint.y - (actObj.topLeftCircle.radius * 2)) &&
-                            y <= (rotationCirclePoint.y + (actObj.topLeftCircle.radius * 2)))) {
+                            x >= (rotationCirclePoint.x - (radius * 2)) &&
+                            x <= (rotationCirclePoint.x + (radius * 2)) &&
+                            y >= (rotationCirclePoint.y - (radius * 2)) &&
+                            y <= (rotationCirclePoint.y + (radius * 2)))) {
                         if (this.tempActiveObj && this.tempActiveObj.activePoint &&
                             JSON.stringify(this.tempActiveObj.activePoint) === JSON.stringify(actObj.activePoint)) {
                             i = index;
@@ -4358,7 +4382,7 @@ var Selection = /** @class */ (function () {
                 var tempTextSettings = extend({}, parent.activeObj.textSettings, {}, true);
                 parent.notify('draw', { prop: 'setTempTextSettings', onPropertyChange: false, value: { tempTextSettings: tempTextSettings } });
                 var shapeSettings = this.updatePrevShapeSettings();
-                var shapeChangingArgs_1 = { action: 'select', previousShapeSettings: shapeSettings,
+                var shapeChangingArgs_1 = { cancel: false, action: 'select', previousShapeSettings: shapeSettings,
                     currentShapeSettings: shapeSettings };
                 if (parent.activeObj.shape === 'line' || parent.activeObj.shape === 'arrow') {
                     shapeChangingArgs_1.currentShapeSettings.width = parent.activeObj.activePoint.endX - parent.activeObj.activePoint.startX;
@@ -4372,10 +4396,10 @@ var Selection = /** @class */ (function () {
                 if (splitWords !== undefined && splitWords[0] === 'crop') {
                     this.isCropSelection = true;
                 }
-                if (!this.isCropSelection && isBlazor() && isNullOrUndefined(this.parent.eventType) &&
+                if (!this.isCropSelection && isBlazor() && isNullOrUndefined(parent.eventType) &&
                     parent.events && parent.events.shapeChanging.hasDelegate === true) {
                     /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
-                    parent.dotNetRef.invokeMethodAsync('ShapeEventAsync', 'OnShape', shapeChangingArgs_1).then(function (shapeChangingArgs) {
+                    parent.dotNetRef.invokeMethodAsync('ShapeEventAsync', 'OnShape', shapeChangingArgs_1, null).then(function (shapeChangingArgs) {
                         _this.shapeEvent(shapeChangingArgs);
                     });
                 }
@@ -4415,6 +4439,16 @@ var Selection = /** @class */ (function () {
                     }
                 }
                 isShape = true;
+                if (isBlazor()) {
+                    /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
+                    var tempCursor = parent.upperCanvas.style.cursor;
+                    this.setCursor(x, y);
+                    if (shapeChangingArgs_1.action === 'select' && parent.upperCanvas.style.cursor === 'move') {
+                        /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
+                        parent.getShapeValue(parent.activeObj.shape);
+                    }
+                    parent.upperCanvas.style.cursor = tempCursor;
+                }
             }
         }
         return isShape;
@@ -4437,18 +4471,13 @@ var Selection = /** @class */ (function () {
             parent.notify('draw', { prop: 'drawObject', onPropertyChange: false, value: { canvas: 'duplicate', obj: parent.activeObj, isCropRatio: null,
                     points: null, isPreventDrag: true, saveContext: null, isPreventSelection: true } });
             if (!this.isShapeInserted) {
-                if (parent.activeObj.activePoint.startX < parent.img.destLeft) {
-                    this.isPreventDragging = true;
-                }
-                else if (parent.activeObj.activePoint.endX > parent.img.destLeft + parent.img.destWidth) {
-                    this.isPreventDragging = true;
-                }
-                else if (parent.activeObj.activePoint.startY < parent.img.destTop) {
-                    this.isPreventDragging = true;
-                }
-                else if (parent.activeObj.activePoint.endY > parent.img.destTop + parent.img.destHeight) {
-                    this.isPreventDragging = true;
-                }
+                var activePoint = parent.activeObj.activePoint;
+                var _a = parent.img, destLeft = _a.destLeft, destWidth = _a.destWidth, destTop = _a.destTop, destHeight = _a.destHeight;
+                this.isPreventDragging =
+                    activePoint.startX < destLeft ||
+                        activePoint.endX > destLeft + destWidth ||
+                        activePoint.startY < destTop ||
+                        activePoint.endY > destTop + destHeight;
             }
         }
     };
@@ -4457,14 +4486,35 @@ var Selection = /** @class */ (function () {
         var activeObj = extend({}, parent.activeObj, null, true);
         var ctx = parent.activeObj.imageCanvas.getContext('2d');
         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 } });
+        parent.notify('transform', { prop: 'calcMaxDimension', onPropertyChange: false, value: { width: parent.activeObj.imageElement.width,
+                height: parent.activeObj.imageElement.height, obj: dimObj, isImgShape: null } });
         parent.notify('shape', { prop: 'updateObj', onPropertyChange: false, value: { dimObj: dimObj, x: null, y: null } });
         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 } });
+        this.applyTransformToImg(ctx);
         parent.activeObj = activeObj;
     };
+    Selection.prototype.applyTransformToImg = function (ctx) {
+        var parent = this.parent;
+        if (parent.activeObj.isHorImageFlip && parent.activeObj.isVerImageFlip) {
+            parent.activeObj.isHorImageFlip = parent.activeObj.isVerImageFlip = false;
+            parent.notify('draw', { prop: 'downScaleImgCanvas', onPropertyChange: false,
+                value: { ctx: ctx, isImgAnnotation: true, isHFlip: true, isVFlip: true } });
+        }
+        else if (parent.activeObj.isHorImageFlip) {
+            parent.activeObj.isHorImageFlip = false;
+            parent.notify('draw', { prop: 'downScaleImgCanvas', onPropertyChange: false,
+                value: { ctx: ctx, isImgAnnotation: true, isHFlip: true, isVFlip: false } });
+        }
+        else if (parent.activeObj.isVerImageFlip) {
+            parent.activeObj.isVerImageFlip = false;
+            parent.notify('draw', { prop: 'downScaleImgCanvas', onPropertyChange: false,
+                value: { ctx: ctx, isImgAnnotation: true, isHFlip: false, isVFlip: true } });
+        }
+        else {
+            parent.notify('draw', { prop: 'downScaleImgCanvas', onPropertyChange: false,
+                value: { ctx: ctx, isImgAnnotation: true, isHFlip: false, isVFlip: false } });
+        }
+    };
     // eslint-disable-next-line
     Selection.prototype.targetTouches = function (touches) {
         var bbox = this.parent.lowerCanvas.getBoundingClientRect();
@@ -4521,12 +4571,13 @@ var Selection = /** @class */ (function () {
         }
     };
     Selection.prototype.setTimer = function (e) {
+        var parent = this.parent;
         if (this.timer > 10) {
             clearTimeout(this.timer);
             this.timer = 0;
-            this.parent.notify('shape', { prop: 'findTextTarget', onPropertyChange: false, value: { e: e } });
+            parent.notify('shape', { prop: 'findTextTarget', onPropertyChange: false, value: { e: e } });
             if (Browser.isDevice) {
-                this.upperContext.clearRect(0, 0, this.parent.upperCanvas.width, this.parent.upperCanvas.height);
+                this.upperContext.clearRect(0, 0, parent.upperCanvas.width, parent.upperCanvas.height);
             }
         }
     };
@@ -4537,17 +4588,13 @@ var Selection = /** @class */ (function () {
         if (isNullOrUndefined(actObj.activePoint)) {
             return;
         }
+        var _a = actObj.activePoint, startX = _a.startX, startY = _a.startY, endX = _a.endX, endY = _a.endY;
         var radius = actObj.topLeftCircle ? actObj.topLeftCircle.radius : 0;
-        if ((x >= Math.floor(actObj.activePoint.startX) &&
-            x <= Math.ceil(actObj.activePoint.endX) &&
-            y >= Math.floor(actObj.activePoint.startY) &&
-            y <= Math.ceil(actObj.activePoint.endY))) {
+        if ((x >= Math.floor(startX) && x <= Math.ceil(endX) && y >= Math.floor(startY) && y <= Math.ceil(endY))) {
             isInside = true;
         }
-        else if (radius !== 0 && (x >= Math.floor(actObj.activePoint.startX) - radius &&
-            x <= Math.ceil(actObj.activePoint.endX) + radius &&
-            y >= Math.floor(actObj.activePoint.startY) - radius &&
-            y <= Math.ceil(actObj.activePoint.endY) + radius)) {
+        else if (radius !== 0 && (x >= Math.floor(startX) - radius && x <= Math.ceil(endX) + radius &&
+            y >= Math.floor(startY) - radius && y <= Math.ceil(endY) + radius)) {
             isInside = true;
             this.tempActiveObj = { activePoint: { startX: 0, startY: 0, endX: 0, endY: 0, width: 0, height: 0 },
                 flipObjColl: [], triangle: [], triangleRatio: [] };
@@ -4556,12 +4603,8 @@ var Selection = /** @class */ (function () {
             isInside = true;
         }
         else if (actObj.shape === 'line' || actObj.shape === 'arrow') {
-            var smallPoint = { x: actObj.activePoint.startX < actObj.activePoint.endX ? actObj.activePoint.startX :
-                    actObj.activePoint.endX,
-                y: actObj.activePoint.startY < actObj.activePoint.endY ? actObj.activePoint.startY : actObj.activePoint.endY };
-            var largePoint = { x: actObj.activePoint.startX > actObj.activePoint.endX ? actObj.activePoint.startX :
-                    actObj.activePoint.endX,
-                y: actObj.activePoint.startY > actObj.activePoint.endY ? actObj.activePoint.startY : actObj.activePoint.endY };
+            var smallPoint = { x: startX < endX ? startX : endX, y: startY < endY ? startY : endY };
+            var largePoint = { x: startX > endX ? startX : endX, y: startY > endY ? startY : endY };
             if (x >= (Math.floor(smallPoint.x) - 5) && x <= (Math.ceil(largePoint.x) + 5) &&
                 y >= (Math.floor(smallPoint.y) - 5) && y <= (Math.ceil(largePoint.y) + 5)) {
                 isInside = true;
@@ -4583,7 +4626,7 @@ var Selection = /** @class */ (function () {
                 isInside = true;
             }
         }
-        else if (parent.textArea.style.display === 'block') {
+        else if (parent.textArea.style.display === 'block' || parent.textArea.style.display === 'inline-block') {
             isInside = true;
         }
         if (!isInside) {
@@ -4595,9 +4638,8 @@ var Selection = /** @class */ (function () {
                 !== 0 && !parent.currObjType.isCustomCrop && parent.currObjType.shape !== '') {
                 parent.objColl.push(extend({}, parent.activeObj, {}, true));
             }
-            if (parent.activeObj.shape === 'text' || (parent.currObjType.shape === 'ellipse' || parent.currObjType.shape === 'rectangle' ||
-                parent.currObjType.shape === 'line' || parent.activeObj.shape === 'arrow' || parent.activeObj.shape === 'path' ||
-                parent.activeObj.shape === 'image')) {
+            var shapeColl = ['rectangle', 'ellipse', 'line', 'arrow', 'path', 'text', 'image'];
+            if (shapeColl.indexOf(parent.activeObj.shape) > -1) {
                 var tempFilter = this.lowerContext.filter;
                 this.lowerContext.filter = 'brightness(' + 1 + ') ' + 'contrast(' + 100 + '%) ' + 'hue-rotate(' + 0 + 'deg) ' +
                     'saturate(' + 100 + '%) ' + 'opacity(' + 1 + ') ' + 'blur(' + 0 + 'px) ' + 'sepia(0%) ' + 'grayscale(0%) ' +
@@ -4646,8 +4688,9 @@ var Selection = /** @class */ (function () {
         parent.activeObj.textSettings.fontFamily = parent.textArea.style.fontFamily;
         parent.activeObj.strokeSettings.strokeColor = parent.textArea.style.color !== '' &&
             parent.textArea.style.color.split('(')[1] && parent.textArea.style.color.split('(')[1].split(',')[0] &&
-            parent.textArea.style.color.split('(')[1].split(',')[1] && parent.textArea.style.color.split('(')[1].split(',')[2] ?
-            this.rgbToHex(parseFloat(parent.textArea.style.color.split('(')[1].split(',')[0]), parseFloat(parent.textArea.style.color.split('(')[1].split(',')[1]), parseFloat(parent.textArea.style.color.split('(')[1].split(',')[2])) :
+            parent.textArea.style.color.split('(')[1].split(',')[1] && parent.textArea.style.color.split('(')[1].split(',')[2]
+            && parent.textArea.style.color.split('(')[1].split(',')[3] ?
+            this.rgbToHex(parseFloat(parent.textArea.style.color.split('(')[1].split(',')[0]), parseFloat(parent.textArea.style.color.split('(')[1].split(',')[1]), parseFloat(parent.textArea.style.color.split('(')[1].split(',')[2]), parseFloat(parent.textArea.style.color.split('(')[1].split(',')[3])) :
             parent.textArea.style.color;
         if (parent.textArea.style.fontWeight === 'bold') {
             parent.activeObj.textSettings.bold = true;
@@ -4663,16 +4706,27 @@ var Selection = /** @class */ (function () {
         }
         parent.activeObj.textSettings.fontSize = (parseFloat(parent.textArea.style.fontSize));
     };
-    Selection.prototype.rgbToHex = function (r, g, b) {
-        return '#' + this.componentToHex(r) + this.componentToHex(g) + this.componentToHex(b);
+    Selection.prototype.rgbToHex = function (r, g, b, a) {
+        r = Math.max(0, Math.min(255, Math.round(r)));
+        g = Math.max(0, Math.min(255, Math.round(g)));
+        b = Math.max(0, Math.min(255, Math.round(b)));
+        a = Math.max(0, Math.min(1, a));
+        var hexR = this.padLeft(r.toString(16), 2, '0');
+        var hexG = this.padLeft(g.toString(16), 2, '0');
+        var hexB = this.padLeft(b.toString(16), 2, '0');
+        var hexA = this.padLeft(Math.round(a * 255).toString(16), 2, '0');
+        var hex = "#" + hexR + hexG + hexB + hexA;
+        return hex;
     };
-    Selection.prototype.componentToHex = function (rgb) {
-        var hex = rgb.toString(16);
-        return hex.length === 1 ? '0' + hex : hex;
+    Selection.prototype.padLeft = function (value, length, padChar) {
+        while (value.length < length) {
+            value = padChar + value;
+        }
+        return value;
     };
     Selection.prototype.deleteItem = function () {
         var parent = this.parent;
-        var shapeChangingArgs = {};
+        var shapeChangingArgs = { cancel: false };
         var previousShapeSettings = {};
         if (this.isFhdEditing) {
             this.updateFreehandDrawColorChange();
@@ -4708,7 +4762,7 @@ var Selection = /** @class */ (function () {
             if (obj['prevActObj'] && JSON.stringify(obj['prevActObj']) !== JSON.stringify(parent.activeObj)) {
                 var index = parent.activeObj.currIndex;
                 parent.notify('draw', { prop: 'performCancel', value: { isContextualToolbar: null } });
-                for (var i = 0; i < parent.objColl.length; i++) {
+                for (var i = 0, len = parent.objColl.length; i < len; i++) {
                     if (parent.objColl[i].currIndex === index) {
                         parent.objColl.splice(i, 1);
                         parent.notify('draw', { prop: 'render-image', value: { isMouseWheel: null } });
@@ -4744,11 +4798,11 @@ var Selection = /** @class */ (function () {
                 prevObj.selPointColl = extend([], selPointCollObj['selPointColl'], [], true);
                 parent.objColl.pop();
                 previousShapeSettings = this.updatePrevShapeSettings();
-                shapeChangingArgs = { action: 'delete', previousShapeSettings: previousShapeSettings, currentShapeSettings: null };
+                shapeChangingArgs = { cancel: false, action: 'delete', previousShapeSettings: previousShapeSettings, currentShapeSettings: null };
                 parent.notify('shape', { prop: 'setKeyHistory', onPropertyChange: false, value: { keyHistory: '' } });
                 parent.clearSelection();
                 if (isBlazor() && parent.events && parent.events.shapeChanging.hasDelegate === true) {
-                    parent.dotNetRef.invokeMethodAsync('ShapeEventAsync', 'OnShape', shapeChangingArgs);
+                    parent.dotNetRef.invokeMethodAsync('ShapeEventAsync', 'OnShape', shapeChangingArgs, null);
                 }
                 else {
                     parent.trigger('shapeChanging', shapeChangingArgs);
@@ -4796,25 +4850,25 @@ var Selection = /** @class */ (function () {
                 fontStyle.push('underline');
             }
         }
+        var _a = parent.activeObj.activePoint, startX = _a.startX, startY = _a.startY, width = _a.width, height = _a.height;
+        var _b = parent.activeObj, keyHistory = _b.keyHistory, currIndex = _b.currIndex, shape = _b.shape, textSettings = _b.textSettings, strokeSettings = _b.strokeSettings, rotatedAngle = _b.rotatedAngle, imageElement = _b.imageElement, opacity = _b.opacity;
         var shapeSettingsObj = {
-            id: !isNullOrUndefined(parent.activeObj.currIndex) ? parent.activeObj.currIndex : null,
-            type: parent.toPascalCase(parent.activeObj.shape),
-            startX: parent.activeObj.activePoint.startX, startY: parent.activeObj.activePoint.startY,
-            width: parent.activeObj.activePoint.width, height: parent.activeObj.activePoint.height,
-            strokeColor: parent.activeObj.strokeSettings ? parent.activeObj.strokeSettings.strokeColor : null,
-            strokeWidth: parent.activeObj.strokeSettings ? parent.activeObj.strokeSettings.strokeWidth : null,
-            fillColor: parent.activeObj.strokeSettings ? parent.activeObj.strokeSettings.fillColor : null,
-            radius: parent.activeObj.shape === 'ellipse' ? parent.activeObj.activePoint.width / 2 : null,
-            length: parent.activeObj.shape === 'line' || parent.activeObj.shape === 'arrow' ? parent.activeObj.activePoint.width : null,
-            text: parent.activeObj.shape === 'text' ? (parent.activeObj.keyHistory ? parent.activeObj.keyHistory :
-                (parent.activeObj.textSettings.text ? parent.activeObj.textSettings.text : null)) : null,
-            fontSize: parent.activeObj.shape === 'text' ? (parent.activeObj.textSettings ? parent.activeObj.textSettings.fontSize : null) : null,
-            fontFamily: parent.activeObj.shape === 'text' ? (parent.activeObj.textSettings ? parent.activeObj.textSettings.fontFamily : null) : null,
-            fontStyle: parent.activeObj.shape === 'text' ? fontStyle : null,
-            color: parent.activeObj.shape === 'text' ? (parent.activeObj.strokeSettings ? parent.activeObj.strokeSettings.strokeColor : null) : null,
-            degree: parent.activeObj.shape === 'ellipse' || parent.activeObj.shape === 'rectangle' || parent.activeObj.shape === 'image' ?
-                parent.activeObj.rotatedAngle * (180 / Math.PI) : null,
-            imageData: parent.activeObj.shape === 'image' ? parent.activeObj.imageElement.src : null
+            id: !isNullOrUndefined(currIndex) ? currIndex : null,
+            type: parent.toPascalCase(shape),
+            startX: startX, startY: startY, width: width, height: height,
+            strokeColor: strokeSettings ? strokeSettings.strokeColor : null,
+            strokeWidth: strokeSettings ? strokeSettings.strokeWidth : null,
+            fillColor: strokeSettings ? strokeSettings.fillColor : null,
+            radius: shape === 'ellipse' ? width / 2 : null,
+            length: shape === 'line' || shape === 'arrow' ? width : null,
+            text: shape === 'text' ? (keyHistory ? keyHistory : (textSettings.text ? textSettings.text : null)) : null,
+            fontSize: shape === 'text' ? (textSettings ? textSettings.fontSize : null) : null,
+            fontFamily: shape === 'text' ? (textSettings ? textSettings.fontFamily : null) : null,
+            fontStyle: shape === 'text' ? fontStyle : null,
+            color: shape === 'text' ? (strokeSettings ? strokeSettings.strokeColor : null) : null,
+            degree: shape === 'ellipse' || shape === 'rectangle' || shape === 'image' ? rotatedAngle * (180 / Math.PI) : null,
+            imageData: shape === 'image' ? imageElement.src : null,
+            opacity: shape === 'image' ? opacity : null
         };
         if (obj) {
             obj['shapeSettingsObj'] = shapeSettingsObj;
@@ -4833,13 +4887,12 @@ var Selection = /** @class */ (function () {
         var rotatedY = -localX * sinAngle + localY * cosAngle;
         var halfWidth = rectWidth / 2;
         var halfHeight = rectHeight / 2;
-        // Check if the rotated point is within the bounds of the rectangle
         if (rotatedX >= -halfWidth && rotatedX <= halfWidth && rotatedY >= -halfHeight &&
             rotatedY <= halfHeight) {
-            return true; // Point is inside the rotated rectangle
+            return true;
         }
         else {
-            return false; // Point is outside the rotated rectangle
+            return false;
         }
     };
     Selection.prototype.getTransRotationPoint = function (obj, object) {
@@ -4847,17 +4900,12 @@ var Selection = /** @class */ (function () {
         var degree;
         var isHorizontalflip = false;
         var isVerticalflip = false;
-        if (obj.shapeDegree === 0) {
-            degree = this.parent.transform.degree;
-        }
-        else {
-            degree = this.parent.transform.degree - obj.shapeDegree;
-        }
+        degree = (obj.shapeDegree === 0) ? this.parent.transform.degree : this.parent.transform.degree - obj.shapeDegree;
         if (degree < 0) {
             degree = 360 + degree;
         }
         if (obj.flipObjColl) {
-            for (var i = 0; i < obj.flipObjColl.length; i++) {
+            for (var i = 0, iLen = obj.flipObjColl.length; i < iLen; i++) {
                 if (obj.flipObjColl[i].toLowerCase() === 'horizontal') {
                     isHorizontalflip = true;
                 }
@@ -4868,42 +4916,34 @@ var Selection = /** @class */ (function () {
         }
         if (degree === 0 || degree === 360) {
             if (isVerticalflip) {
-                rotationCirclePoint = { x: obj.topCenterCircle.startX,
-                    y: obj.topCenterCircle.startY - obj.rotationCircleLine };
+                rotationCirclePoint = { x: obj.topCenterCircle.startX, y: obj.topCenterCircle.startY - obj.rotationCircleLine };
             }
             else {
-                rotationCirclePoint = { x: obj.bottomCenterCircle.startX,
-                    y: obj.bottomCenterCircle.startY + obj.rotationCircleLine };
+                rotationCirclePoint = { x: obj.bottomCenterCircle.startX, y: obj.bottomCenterCircle.startY + obj.rotationCircleLine };
             }
         }
         else if (degree === 90 || degree === -270) {
             if (isHorizontalflip) {
-                rotationCirclePoint = { x: obj.centerRightCircle.startX +
-                        obj.rotationCircleLine, y: obj.centerLeftCircle.startY };
+                rotationCirclePoint = { x: obj.centerRightCircle.startX + obj.rotationCircleLine, y: obj.centerLeftCircle.startY };
             }
             else {
-                rotationCirclePoint = { x: obj.centerLeftCircle.startX -
-                        obj.rotationCircleLine, y: obj.centerLeftCircle.startY };
+                rotationCirclePoint = { x: obj.centerLeftCircle.startX - obj.rotationCircleLine, y: obj.centerLeftCircle.startY };
             }
         }
         else if (degree === 180 || degree === -180) {
             if (isVerticalflip) {
-                rotationCirclePoint = { x: obj.bottomCenterCircle.startX,
-                    y: obj.bottomCenterCircle.startY + obj.rotationCircleLine };
+                rotationCirclePoint = { x: obj.bottomCenterCircle.startX, y: obj.bottomCenterCircle.startY + obj.rotationCircleLine };
             }
             else {
-                rotationCirclePoint = { x: obj.topCenterCircle.startX,
-                    y: obj.topCenterCircle.startY - obj.rotationCircleLine };
+                rotationCirclePoint = { x: obj.topCenterCircle.startX, y: obj.topCenterCircle.startY - obj.rotationCircleLine };
             }
         }
         else if (degree === 270 || degree === -90) {
             if (isHorizontalflip) {
-                rotationCirclePoint = { x: obj.centerLeftCircle.startX -
-                        obj.rotationCircleLine, y: obj.centerLeftCircle.startY };
+                rotationCirclePoint = { x: obj.centerLeftCircle.startX - obj.rotationCircleLine, y: obj.centerLeftCircle.startY };
             }
             else {
-                rotationCirclePoint = { x: obj.centerRightCircle.startX +
-                        obj.rotationCircleLine, y: obj.centerLeftCircle.startY };
+                rotationCirclePoint = { x: obj.centerRightCircle.startX + obj.rotationCircleLine, y: obj.centerLeftCircle.startY };
             }
         }
         if (object) {
@@ -4912,17 +4952,19 @@ var Selection = /** @class */ (function () {
         return rotationCirclePoint;
     };
     Selection.prototype.getNumTextValue = function (obj) {
+        var parent = this.parent;
+        var elem = parent.element;
         var height;
         var width;
         var widthElement;
         var heightElement;
-        if (!isBlazor()) {
-            widthElement = this.parent.element.querySelector('#' + this.parent.element.id + '_resizeWidth');
-            heightElement = this.parent.element.querySelector('#' + this.parent.element.id + '_resizeHeight');
+        if (isBlazor()) {
+            widthElement = elem.querySelector('.e-ie-toolbar-e-resize-width-input .e-textbox');
+            heightElement = elem.querySelector('.e-ie-toolbar-e-resize-height-input .e-textbox');
         }
         else {
-            widthElement = this.parent.element.querySelector('.e-ie-toolbar-e-resize-width-input .e-numerictextbox');
-            heightElement = this.parent.element.querySelector('.e-ie-toolbar-e-resize-height-input .e-numerictextbox');
+            widthElement = elem.querySelector('#' + elem.id + '_resizeWidth');
+            heightElement = elem.querySelector('#' + elem.id + '_resizeHeight');
         }
         if (widthElement && heightElement) {
             var heightString = heightElement.value.replace(/,/g, '');
@@ -4951,8 +4993,8 @@ var Selection = /** @class */ (function () {
             heightElement = this.parent.element.querySelector('#' + this.parent.element.id + '_resizeHeight');
         }
         else {
-            widthElement = this.parent.element.querySelector('.e-ie-toolbar-e-resize-width-input .e-numerictextbox');
-            heightElement = this.parent.element.querySelector('.e-ie-toolbar-e-resize-height-input .e-numerictextbox');
+            widthElement = this.parent.element.querySelector('.e-ie-toolbar-e-resize-width-input .e-textbox');
+            heightElement = this.parent.element.querySelector('.e-ie-toolbar-e-resize-height-input .e-textbox');
         }
         if (widthElement && heightElement) {
             if (heightElement.value.replace(/,/g, '') === '' && widthElement.value.replace(/,/g, '') === '') {