@syncfusion/ej2-image-editor 22.2.10 → 23.1.36

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

@@ -31,6 +31,7 @@ var Selection = /** @class */ (function () {
         this.initialPrevObj = {};
         this.touchTime = 0;
         this.resizedElement = '';
+        this.isImageClarity = true;
         this.parent = parent;
         this.addEventListener();
     }
@@ -243,6 +244,18 @@ var Selection = /** @class */ (function () {
             case 'updPtCollForShpRot':
                 this.updPtCollForShpRot(args.value['obj']);
                 break;
+            case 'findImageRatio':
+                this.findImageRatio(args.value['width'], args.value['height'], args.value['obj']);
+                break;
+            case 'getNumTextValue':
+                this.getNumTextValue(args.value['obj']);
+                break;
+            case 'setImageClarity':
+                this.isImageClarity = args.value['bool'];
+                break;
+            case 'upgradeImageQuality':
+                this.upgradeImageQuality();
+                break;
         }
     };
     Selection.prototype.getModuleName = function () {
@@ -284,6 +297,7 @@ var Selection = /** @class */ (function () {
         this.isFhdEditing = false;
         this.pathAdjustedIndex = null;
         this.touchTime = 0;
+        this.isImageClarity = true;
         this.currentDrawingShape = '';
         this.initialPrevObj = {};
         this.resizedElement = '';
@@ -378,6 +392,12 @@ var Selection = /** @class */ (function () {
     };
     Selection.prototype.setCursor = function (x, y) {
         var parent = this.parent;
+        var frameObject = { bool: null };
+        parent.notify('toolbar', { prop: 'getFrameToolbar', onPropertyChange: false, value: { obj: frameObject } });
+        if (parent.isResize || 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;
@@ -853,7 +873,7 @@ var Selection = /** @class */ (function () {
         var parent = this.parent;
         var obj = { width: 0, height: 0 };
         parent.notify('transform', { prop: 'calcMaxDimension', onPropertyChange: false,
-            value: { width: parent.activeObj.activePoint.width, height: parent.activeObj.activePoint.height, obj: obj } });
+            value: { width: parent.activeObj.activePoint.width, height: parent.activeObj.activePoint.height, obj: obj, isImgShape: null } });
         var maxDimension = obj;
         var previousShapeSettings = this.updatePrevShapeSettings();
         var shapeResizingArgs = { action: 'resize', previousShapeSettings: previousShapeSettings };
@@ -1021,10 +1041,10 @@ var Selection = /** @class */ (function () {
                                 parent.activeObj.pointColl[i].y += height;
                             }
                         }
-                        if (!this.isPreventDragging && (parent.activeObj.activePoint.startX < parent.img.destLeft ||
+                        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
-                            + parent.img.destHeight)) {
+                            + parent.img.destHeight))) {
                             parent.activeObj.activePoint.startX -= width;
                             parent.activeObj.activePoint.endX -= width;
                             parent.activeObj.activePoint.startY -= height;
@@ -1233,6 +1253,9 @@ var Selection = /** @class */ (function () {
     };
     Selection.prototype.preventDraggingInvertly = function () {
         var parent = this.parent;
+        if (parent.activeObj.shape === 'image') {
+            return;
+        }
         if (!this.isPreventDragging && parent.activeObj.rotatedAngle === 0) {
             this.limitDrag(true);
             if (parent.activeObj.shape === 'line' || parent.activeObj.shape === 'arrow' ||
@@ -1272,9 +1295,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.split('-');
-            if (ratio.length > 1) {
-                ratio = ratio[1].split(':');
+            var ratio = parent.activeObj.shape === 'image' ?
+                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(':');
                 var newScale = scale / (parseInt(ratio[1], 10));
                 point.x = newScale * (parseInt(ratio[0], 10));
                 point.y = newScale * (parseInt(ratio[1], 10));
@@ -1282,6 +1307,21 @@ var Selection = /** @class */ (function () {
         }
         return point;
     };
+    Selection.prototype.findImageRatio = function (width, height, obj) {
+        // eslint-disable-next-line @typescript-eslint/tslint/config
+        var gcd = function (a, b) {
+            if (b === 0) {
+                return a;
+            }
+            return gcd(b, a % b);
+        };
+        var divisor = gcd(width, height);
+        var ratio = width / divisor + ":" + height / divisor;
+        if (obj) {
+            obj['ratio'] = ratio;
+        }
+        return ratio;
+    };
     Selection.prototype.updateNWPoints = function (x, y, maxDimension) {
         var parent = this.parent;
         var diff;
@@ -1327,7 +1367,12 @@ var Selection = /** @class */ (function () {
                 splitWords = parent.activeObj.shape.split('-');
             }
             if (parent.activeObj.shape === 'crop-custom' || (parent.activeObj.shape !== undefined && splitWords[0] !== 'crop')) {
-                this.adjustNWPoints(parent.activeObj.activePoint, x, y, parent.activeObj.rotatedAngle);
+                if (parent.activeObj.shape === 'image') {
+                    this.resizeImg(x, y, 'nw-resize', tempActiveObj);
+                }
+                else {
+                    this.adjustNWPoints(parent.activeObj.activePoint, 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;
@@ -1489,7 +1534,12 @@ var Selection = /** @class */ (function () {
                 splitWords = parent.activeObj.shape.split('-');
             }
             if (parent.activeObj.shape === 'crop-custom' || (parent.activeObj.shape !== undefined && splitWords[0] !== 'crop')) {
-                this.adjustNEPoints(parent.activeObj.activePoint, x, y, parent.activeObj.rotatedAngle);
+                if (parent.activeObj.shape === 'image') {
+                    this.resizeImg(x, y, 'ne-resize', tempActiveObj);
+                }
+                else {
+                    this.adjustNEPoints(parent.activeObj.activePoint, 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;
@@ -1746,7 +1796,12 @@ var Selection = /** @class */ (function () {
                 splitWords = parent.activeObj.shape.split('-');
             }
             if (parent.activeObj.shape === 'crop-custom' || (parent.activeObj.shape !== undefined && splitWords[0] !== 'crop')) {
-                this.adjustSWPoints(parent.activeObj.activePoint, x, y, parent.activeObj.rotatedAngle);
+                if (parent.activeObj.shape === 'image') {
+                    this.resizeImg(x, y, 'sw-resize', tempActiveObj);
+                }
+                else {
+                    this.adjustSWPoints(parent.activeObj.activePoint, 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;
@@ -1906,11 +1961,17 @@ var Selection = /** @class */ (function () {
         }
         else {
             var splitWords = void 0;
+            var newScale = void 0;
             if (parent.activeObj.shape !== undefined) {
                 splitWords = parent.activeObj.shape.split('-');
             }
             if (parent.activeObj.shape === 'crop-custom' || (parent.activeObj.shape !== undefined && splitWords[0] !== 'crop')) {
-                this.adjustSEPoints(parent.activeObj.activePoint, x, y, parent.activeObj.rotatedAngle);
+                if (parent.activeObj.shape === 'image') {
+                    this.resizeImg(x, y, 'se-resize', tempActiveObj);
+                }
+                else {
+                    this.adjustSEPoints(parent.activeObj.activePoint, 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;
@@ -1930,7 +1991,7 @@ var Selection = /** @class */ (function () {
                     width = parent.activeObj.activePoint.endX - x;
                     height = parent.activeObj.activePoint.endY - y;
                     scale = Math.min(width, height);
-                    var newScale = this.getScaleRatio(scale);
+                    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 ?
@@ -1946,7 +2007,7 @@ var Selection = /** @class */ (function () {
                     width = x - parent.activeObj.activePoint.endX;
                     height = y - parent.activeObj.activePoint.endY;
                     scale = Math.max(width, height);
-                    var newScale = this.getScaleRatio(scale);
+                    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 +
@@ -1964,6 +2025,106 @@ var Selection = /** @class */ (function () {
             this.preventInverseResize(tempActiveObj);
         }
     };
+    Selection.prototype.resizeImg = function (x, y, elem, tempActiveObj) {
+        var parent = this.parent;
+        var width;
+        var height;
+        var scale;
+        var newScale;
+        if (this.previousPoint.x !== 0 && this.previousPoint.y !== 0) {
+            switch (parent.upperCanvas.style.cursor) {
+                case 'se-resize':
+                case 's-resize':
+                    if (this.previousPoint.x > x || this.previousPoint.y > y) {
+                        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);
+                    }
+                    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);
+                    }
+                    break;
+                case 'sw-resize':
+                    if (this.previousPoint.x < x || this.previousPoint.y > y) {
+                        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);
+                    }
+                    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);
+                    }
+                    break;
+                case 'w-resize':
+                case 'nw-resize':
+                    if (this.previousPoint.x < x || this.previousPoint.y < y) {
+                        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);
+                    }
+                    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);
+                    }
+                    break;
+                case 'n-resize':
+                case 'ne-resize':
+                    if (this.previousPoint.x > x || this.previousPoint.y < y) {
+                        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);
+                    }
+                    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);
+                    }
+                    break;
+                case 'e-resize':
+                    if (this.previousPoint.x > x || this.previousPoint.y > y) {
+                        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);
+                    }
+                    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);
+                    }
+                    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) {
+                parent.activeObj = extend({}, tempActiveObj, null, true);
+            }
+        }
+        this.previousPoint = { x: x, y: y };
+    };
     Selection.prototype.adjustNWPoints = function (rectangle, x, y, angle) {
         var cx = rectangle.startX + rectangle.width / 2;
         var cy = rectangle.startY + rectangle.height / 2;
@@ -2024,10 +2185,10 @@ var Selection = /** @class */ (function () {
         rectangle.endY = rectangle.startY + rectangle.height;
         return rectangle;
     };
-    Selection.prototype.adjustRotationPoints = function (rectangle, x, y, angle) {
+    Selection.prototype.adjustRotationPoints = function (rectangle, x, y, angle, type, elem) {
         var cx = rectangle.startX + rectangle.width / 2;
         var cy = rectangle.startY + rectangle.height / 2;
-        this.getResizeDirection(rectangle, x, y, angle);
+        this.getResizeDirection(rectangle, x, y, angle, type, elem);
         var rotatedA = this.rotatePoints(rectangle.startX, rectangle.startY, cx, cy, angle);
         var rotatedB = this.rotatePoints(rectangle.endX, rectangle.startY, cx, cy, angle);
         var rotatedC = this.rotatePoints(rectangle.endX, rectangle.endY, cx, cy, angle);
@@ -2076,10 +2237,16 @@ var Selection = /** @class */ (function () {
             case 'x-y':
                 value += (x + (y / 2));
                 break;
+            case 'img-resize-x':
+                value += x;
+                break;
+            case 'img-resize-y':
+                value += y;
+                break;
         }
         return value;
     };
-    Selection.prototype.getResizeDirection = function (rectangle, x, y, angle) {
+    Selection.prototype.getResizeDirection = function (rectangle, x, y, angle, type, elem) {
         var rotatedAngle = angle * (180 / Math.PI);
         var element = this.getResizedElement(rotatedAngle, this.resizedElement);
         if (this.resizedElement === 'e-resize') {
@@ -2098,6 +2265,26 @@ var Selection = /** @class */ (function () {
             rectangle.height = this.setResizedValue(element, rectangle.height, x, y);
             rectangle.endY = rectangle.height + rectangle.startY;
         }
+        else if (type && type === 'img-resize') {
+            rectangle.width = this.setResizedValue('img-resize-x', rectangle.width, x, y);
+            rectangle.height = this.setResizedValue('img-resize-y', rectangle.height, x, y);
+            if (elem === 'se-resize') {
+                rectangle.endX = rectangle.width + rectangle.startX;
+                rectangle.endY = rectangle.height + rectangle.startY;
+            }
+            else if (elem === 'sw-resize') {
+                rectangle.startX = rectangle.endX - rectangle.width;
+                rectangle.endY = rectangle.height + rectangle.startY;
+            }
+            else if (elem === 'ne-resize') {
+                rectangle.endX = rectangle.width + rectangle.startX;
+                rectangle.startY = rectangle.endY - rectangle.height;
+            }
+            else if (elem === 'nw-resize') {
+                rectangle.startX = rectangle.endX - rectangle.width;
+                rectangle.startY = rectangle.endY - rectangle.height;
+            }
+        }
     };
     Selection.prototype.getResizedElement = function (degree, element) {
         var resizeMappings = [];
@@ -2544,7 +2731,7 @@ var Selection = /** @class */ (function () {
             var textWidth = startX ? startX : 0;
             var textHeight = startY ? startY : parent.activeObj.textSettings.fontSize;
             if (parent.activeObj.textSettings.fontSize === undefined) {
-                parent.activeObj.textSettings.fontSize = (Math.abs(parent.baseImg.width - parent.baseImg.height)) * 0.1;
+                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;
@@ -2625,7 +2812,15 @@ var Selection = /** @class */ (function () {
         var y = imageEditorClickEventArgs.point.y;
         var cursor = parent.activeObj.shape && parent.activeObj.shape === 'text' ?
             parent.cursor : 'default';
-        if (this.currentDrawingShape !== '') {
+        if (parent.isResize) {
+            // parent.okBtn();
+            this.performEnterAction();
+            return;
+        }
+        else if (JSON.stringify(parent.frameObj) !== JSON.stringify(parent.tempFrameObj)) {
+            parent.okBtn();
+        }
+        else if (this.currentDrawingShape !== '') {
             var object_1 = { currObj: {} };
             parent.notify('filter', { prop: 'getCurrentObj', onPropertyChange: false, value: { object: object_1 } });
             this.initialPrevObj = object_1['currObj'];
@@ -2652,6 +2847,7 @@ var Selection = /** @class */ (function () {
             parent.currObjType.isDragging = true;
             return;
         }
+        parent.notify('draw', { prop: 'resetFrameZoom', onPropertyChange: false });
         if (this.isCropSelection && this.dragCanvas) {
             this.setCursor(x, y);
             if (parent.cursor !== 'move' && parent.cursor !== 'crosshair' &&
@@ -2715,7 +2911,8 @@ var Selection = /** @class */ (function () {
             }
             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 === 'arrow' || parent.activeObj.shape === 'path' || parent.activeObj.shape === 'text' ||
+                parent.activeObj.shape === 'image')) {
                 parent.notify('shape', { prop: 'redrawActObj', onPropertyChange: false,
                     value: { x: null, y: null, isMouseDown: null } });
                 parent.notify('shape', { prop: 'refreshActiveObj', onPropertyChange: false });
@@ -2769,6 +2966,8 @@ var Selection = /** @class */ (function () {
                 parent.notify('freehand-draw', { prop: 'getFreehandSelectedIndex', onPropertyChange: false, value: { obj: indexObj } });
                 if (!isNullOrUndefined(obj['index']) && obj['index'] > -1) {
                     parent.notify('freehand-draw', { prop: 'selectFhd', value: { type: 'ok' } });
+                    parent.notify('freehand-draw', { prop: 'hoverFhd', onPropertyChange: false,
+                        value: { strokeColor: null, strokeWidth: null } });
                     if (!isBlazor()) {
                         parent.notify('toolbar', { prop: 'renderQAT', onPropertyChange: false, value: { isPenEdit: true } });
                     }
@@ -2783,6 +2982,9 @@ var Selection = /** @class */ (function () {
                     parent.notify('freehand-draw', { prop: 'hoverFhd', onPropertyChange: false,
                         value: { strokeColor: strokeColor, strokeWidth: parent.pointColl[indexObj['freehandSelectedIndex']].strokeWidth } });
                 }
+                else if (this.findTargetObj(x_1, y_1, false)) {
+                    this.findTarget(x_1, y_1, e.type);
+                }
             }
             else {
                 if (this.isFhdEditing) {
@@ -2830,9 +3032,6 @@ var Selection = /** @class */ (function () {
                 }
                 if ((parent.cursor !== 'crosshair' && e.type.toLowerCase() === 'touchstart') ||
                     (parent.currObjType.isActiveObj && parent.cursor !== 'default' && !parent.togglePen)) {
-                    if (parent.currObjType.isUndoAction) {
-                        parent.notify('undo-redo', { prop: 'refreshUrc', value: { bool: null } });
-                    }
                     this.findTarget(x_1, y_1, e.type);
                 }
                 else if ((parent.currObjType.shape === '' || parent.currObjType.isCustomCrop) && !parent.togglePen && parent.cursor !== 'default') {
@@ -3049,9 +3248,20 @@ var Selection = /** @class */ (function () {
             this.parent.eventType = null;
         }
         if (this.currentDrawingShape === 'path') {
+            var elem = e.srcElement;
+            if (e.currentTarget !== parent.upperCanvas && e.currentTarget !== parent.lowerCanvas &&
+                (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 } });
+                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 } });
+            }
             return;
         }
-        if (e.currentTarget === parent.upperCanvas) {
+        if (e.currentTarget === parent.upperCanvas && !parent.isResize) {
             this.pathAdjustedIndex = null;
             if (this.currentDrawingShape !== '') {
                 if (this.currentDrawingShape === 'text') {
@@ -3142,7 +3352,8 @@ var Selection = /** @class */ (function () {
                 }
                 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 === 'line' || parent.activeObj.shape === 'arrow' || parent.activeObj.shape === 'path'
+                            || parent.activeObj.shape === 'image')) {
                         parent.updateToolbar(parent.element, parent.activeObj.shape);
                     }
                     else if (parent.activeObj.shape === 'text' && parent.textArea.style.display === 'none') {
@@ -3300,6 +3511,10 @@ var Selection = /** @class */ (function () {
             isShape = this.findTargetObj(x, y, isCropSelection);
             if (!isCropSelection) {
                 this.upperContext.clearRect(0, 0, parent.upperCanvas.width, parent.upperCanvas.height);
+                if (isShape) {
+                    parent.notify('shape', { prop: 'redrawActObj', onPropertyChange: false,
+                        value: { x: null, y: null, isMouseDown: true } });
+                }
             }
             if (isTextArea) {
                 parent.textArea.value = parent.objColl[parent.objColl.length - 1].keyHistory;
@@ -3422,7 +3637,7 @@ var Selection = /** @class */ (function () {
         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 === '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)) &&
@@ -3518,6 +3733,12 @@ var Selection = /** @class */ (function () {
     };
     Selection.prototype.canvasMouseMoveHandler = function (e) {
         var parent = this.parent;
+        var frameObject = { bool: null };
+        parent.notify('toolbar', { prop: 'getFrameToolbar', onPropertyChange: false, value: { obj: frameObject } });
+        if (parent.isResize || frameObject['bool']) {
+            parent.upperCanvas.style.cursor = 'default';
+            return;
+        }
         if (this.dragCanvas) {
             parent.lowerCanvas.style.cursor = 'grab';
         }
@@ -3572,7 +3793,7 @@ var Selection = /** @class */ (function () {
         }
         else {
             if (((new Date().getTime()) - this.touchTime) < 400) {
-                this.parent.notify('shape', { prop: 'stopPathDrawing', onPropertyChange: false, value: { e: e } });
+                this.parent.notify('shape', { prop: 'stopPathDrawing', onPropertyChange: false, value: { e: e, isApply: null } });
                 this.touchTime = 0;
             }
             else {
@@ -3605,7 +3826,6 @@ var Selection = /** @class */ (function () {
         var obj = { fileName: '', fileType: null };
         parent.notify('draw', { prop: 'getFileName', onPropertyChange: false, value: { obj: obj } });
         var beforeSave = { fileName: obj['fileName'], fileType: obj['fileType'], cancel: false };
-        var splitWords;
         switch (e.key) {
             case (e.ctrlKey && 's'):
                 if (isBlazor() && parent.events && parent.events.saving.hasDelegate === true) {
@@ -3633,14 +3853,14 @@ var Selection = /** @class */ (function () {
                 if ((parent.zoomSettings.zoomTrigger & ZoomTrigger.Commands) === ZoomTrigger.Commands) {
                     this.zoomType = 'Commands';
                     parent.notify('transform', { prop: 'zoomAction', onPropertyChange: false,
-                        value: { zoomFactor: .1, zoomPoint: null } });
+                        value: { zoomFactor: .1, zoomPoint: null }, isResize: null });
                 }
                 break;
             case (e.ctrlKey && '-'):
                 if ((parent.zoomSettings.zoomTrigger & ZoomTrigger.Commands) === ZoomTrigger.Commands) {
                     this.zoomType = 'Commands';
                     parent.notify('transform', { prop: 'zoomAction', onPropertyChange: false,
-                        value: { zoomFactor: -.1, zoomPoint: null } });
+                        value: { zoomFactor: -.1, zoomPoint: null }, isResize: null });
                 }
                 break;
             case 'Delete':
@@ -3650,13 +3870,7 @@ var Selection = /** @class */ (function () {
                 parent.notify('draw', { prop: 'performCancel', value: { isContextualToolbar: null } });
                 break;
             case 'Enter':
-                if (parent.activeObj.shape) {
-                    splitWords = parent.activeObj.shape.split('-');
-                }
-                if (this.isKeyBoardCrop(e) &&
-                    parent.activeObj.horTopLine && (parent.activeObj.shape && splitWords[0] === 'crop')) {
-                    parent.crop();
-                }
+                this.performEnterAction(e);
                 break;
             case 'Tab':
                 this.performTabAction();
@@ -3668,6 +3882,32 @@ var Selection = /** @class */ (function () {
                 break;
         }
     };
+    Selection.prototype.performEnterAction = function (e) {
+        var parent = this.parent;
+        if (parent.isResize) {
+            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');
+            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 } });
+                }
+                else {
+                    parent.notify('transform', { prop: 'resize', value: { width: point.x, height: point.y, isAspectRatio: false } });
+                }
+            }
+        }
+        else {
+            var splitWords = void 0;
+            if (parent.activeObj.shape) {
+                splitWords = parent.activeObj.shape.split('-');
+            }
+            if (e && this.isKeyBoardCrop(e) &&
+                parent.activeObj.horTopLine && (parent.activeObj.shape && splitWords[0] === 'crop')) {
+                parent.crop();
+            }
+        }
+    };
     Selection.prototype.isKeyBoardCrop = function (e) {
         var bool = false;
         /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
@@ -3910,16 +4150,23 @@ var Selection = /** @class */ (function () {
                             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 (this.isTouch || parent.cursor === 'move' ||
-                                parent.cursor === 'grab' || this.isShapeInserted) {
-                                if (diffX === 0 || diffX > x - actObj.activePoint.startX) {
-                                    diffX = x - parent.objColl[index].activePoint.startX;
+                            if (this.tempActiveObj && this.tempActiveObj.activePoint &&
+                                JSON.stringify(this.tempActiveObj.activePoint) === JSON.stringify(actObj.activePoint)) {
+                                i = index;
+                                break;
+                            }
+                            else {
+                                if (this.isTouch || parent.cursor === 'move' ||
+                                    parent.cursor === 'grab' || this.isShapeInserted) {
+                                    if (diffX === 0 || diffX > x - actObj.activePoint.startX) {
+                                        diffX = x - parent.objColl[index].activePoint.startX;
+                                        i = index;
+                                    }
+                                }
+                                else if (parent.objColl[index].currIndex === this.tempActiveObj.currIndex) {
                                     i = index;
                                 }
                             }
-                            else if (parent.objColl[index].currIndex === this.tempActiveObj.currIndex) {
-                                i = index;
-                            }
                             break;
                         }
                     }
@@ -3927,29 +4174,43 @@ 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') {
-                        if (this.isTouch || parent.cursor === 'move' || parent.cursor === 'grab' || this.isShapeInserted) {
-                            if (diffX === 0 || diffX > x - actObj.activePoint.startX) {
-                                diffX = x - parent.objColl[index].activePoint.startX;
+                        if (this.tempActiveObj && this.tempActiveObj.activePoint &&
+                            JSON.stringify(this.tempActiveObj.activePoint) === JSON.stringify(actObj.activePoint)) {
+                            i = index;
+                            break;
+                        }
+                        else {
+                            if (this.isTouch || parent.cursor === 'move' || parent.cursor === 'grab' || this.isShapeInserted) {
+                                if (diffX === 0 || diffX > x - actObj.activePoint.startX) {
+                                    diffX = x - parent.objColl[index].activePoint.startX;
+                                    i = index;
+                                }
+                            }
+                            else if (parent.objColl[index].currIndex === this.tempActiveObj.currIndex) {
                                 i = index;
                             }
                         }
-                        else if (parent.objColl[index].currIndex === this.tempActiveObj.currIndex) {
-                            i = index;
-                        }
                     }
                 }
                 else if (actObj.rotatedAngle !== 0) {
                     var cursor_2 = this.setCursorForRotatedObject(actObj, x, y, parent.upperCanvas);
                     if (cursor_2 !== 'default' && cursor_2 !== 'grab') {
-                        if (this.isTouch || parent.cursor === 'move' || parent.cursor === 'grab' || this.isShapeInserted) {
-                            if (diffX === 0 || diffX > x - actObj.activePoint.startX) {
-                                diffX = x - parent.objColl[index].activePoint.startX;
+                        if (this.tempActiveObj && this.tempActiveObj.activePoint &&
+                            JSON.stringify(this.tempActiveObj.activePoint) === JSON.stringify(actObj.activePoint)) {
+                            i = index;
+                            break;
+                        }
+                        else {
+                            if (this.isTouch || parent.cursor === 'move' || parent.cursor === 'grab' || this.isShapeInserted) {
+                                if (diffX === 0 || diffX > x - actObj.activePoint.startX) {
+                                    diffX = x - parent.objColl[index].activePoint.startX;
+                                    i = index;
+                                }
+                            }
+                            else if (parent.objColl[index].currIndex === this.tempActiveObj.currIndex) {
                                 i = index;
                             }
                         }
-                        else if (parent.objColl[index].currIndex === this.tempActiveObj.currIndex) {
-                            i = index;
-                        }
                     }
                 }
                 else {
@@ -3963,16 +4224,23 @@ var Selection = /** @class */ (function () {
                             x <= (rotationCirclePoint.x + (actObj.topLeftCircle.radius * 2)) &&
                             y >= (rotationCirclePoint.y - (actObj.topLeftCircle.radius * 2)) &&
                             y <= (rotationCirclePoint.y + (actObj.topLeftCircle.radius * 2)))) {
-                        if (this.isTouch || cursor === 'move' || cursor === 'grabbing' || this.isShapeInserted
-                            || parent.cursor === 'move' || parent.cursor === 'grabbing') {
-                            if (diffX === 0 || diffX > x - actObj.activePoint.startX) {
-                                diffX = x - parent.objColl[index].activePoint.startX;
+                        if (this.tempActiveObj && this.tempActiveObj.activePoint &&
+                            JSON.stringify(this.tempActiveObj.activePoint) === JSON.stringify(actObj.activePoint)) {
+                            i = index;
+                            break;
+                        }
+                        else {
+                            if (this.isTouch || cursor === 'move' || cursor === 'grabbing' || this.isShapeInserted
+                                || parent.cursor === 'move' || parent.cursor === 'grabbing') {
+                                if (diffX === 0 || diffX > x - actObj.activePoint.startX) {
+                                    diffX = x - parent.objColl[index].activePoint.startX;
+                                    i = index;
+                                }
+                            }
+                            else if (parent.objColl[index].currIndex === this.tempActiveObj.currIndex) {
                                 i = index;
                             }
                         }
-                        else if (parent.objColl[index].currIndex === this.tempActiveObj.currIndex) {
-                            i = index;
-                        }
                     }
                 }
             }
@@ -3989,8 +4257,7 @@ var Selection = /** @class */ (function () {
                 if (parent.transform.degree === 0) {
                     var temp_1 = this.lowerContext.filter;
                     this.lowerContext.clearRect(0, 0, parent.lowerCanvas.width, parent.lowerCanvas.height);
-                    parent.notify('filter', { prop: 'updateBrightFilter', onPropertyChange: false });
-                    this.lowerContext.drawImage(parent.baseImg, parent.img.srcLeft, parent.img.srcTop, parent.img.srcWidth, parent.img.srcHeight, parent.img.destLeft, parent.img.destTop, parent.img.destWidth, parent.img.destHeight);
+                    parent.notify('draw', { prop: 'drawImage', onPropertyChange: false });
                     this.lowerContext.filter = 'none';
                     parent.notify('shape', { prop: 'iterateObjColl', onPropertyChange: false });
                     parent.activeObj = extend({}, temp_1, {}, true);
@@ -4009,6 +4276,7 @@ var Selection = /** @class */ (function () {
                     parent.notify('crop', { prop: 'cropCircle', onPropertyChange: false,
                         value: { context: this.lowerContext, isSave: null, isFlip: null } });
                 }
+                parent.activeObj = extend({}, temp, {}, true);
                 this.setActivePoint();
                 parent.activeObj = extend({}, temp, {}, true);
                 var tempStrokeSettings = extend({}, parent.activeObj.strokeSettings, {}, true);
@@ -4089,6 +4357,10 @@ var Selection = /** @class */ (function () {
                 parent.notify('draw', { prop: 'setPrevActObj', onPropertyChange: false,
                     value: { prevActObj: extend({}, parent.activeObj, {}, true) } });
             }
+            if (parent.activeObj.shape === 'image' && !this.isImageClarity) {
+                this.upgradeImageQuality();
+                this.isImageClarity = true;
+            }
             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) {
@@ -4107,6 +4379,19 @@ var Selection = /** @class */ (function () {
             }
         }
     };
+    Selection.prototype.upgradeImageQuality = function () {
+        var parent = this.parent;
+        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('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 } });
+        parent.activeObj = activeObj;
+    };
     // eslint-disable-next-line
     Selection.prototype.targetTouches = function (touches) {
         var bbox = this.parent.lowerCanvas.getBoundingClientRect();
@@ -4194,7 +4479,7 @@ var Selection = /** @class */ (function () {
             this.tempActiveObj = { activePoint: { startX: 0, startY: 0, endX: 0, endY: 0, width: 0, height: 0 },
                 flipObjColl: [], triangle: [], triangleRatio: [] };
         }
-        else if (actObj.shape === 'text' && this.dragElement !== '') {
+        else if ((actObj.shape === 'text' || actObj.shape === 'image') && this.dragElement !== '') {
             isInside = true;
         }
         else if (actObj.shape === 'line' || actObj.shape === 'arrow') {
@@ -4238,7 +4523,8 @@ var Selection = /** @class */ (function () {
                 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.currObjType.shape === 'line' || parent.activeObj.shape === 'arrow' || parent.activeObj.shape === 'path' ||
+                parent.activeObj.shape === 'image')) {
                 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%) ' +
@@ -4452,7 +4738,10 @@ var Selection = /** @class */ (function () {
             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
+            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
         };
         if (obj) {
             obj['shapeSettingsObj'] = shapeSettingsObj;
@@ -4549,6 +4838,31 @@ var Selection = /** @class */ (function () {
         }
         return rotationCirclePoint;
     };
+    Selection.prototype.getNumTextValue = function (obj) {
+        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');
+        }
+        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');
+        }
+        if (widthElement && heightElement) {
+            var heightString = heightElement.value.replace(/,/g, '');
+            var widthString = widthElement.value.replace(/,/g, '');
+            height = parseFloat(heightString);
+            width = parseFloat(widthString);
+        }
+        if (obj) {
+            obj['width'] = width;
+            obj['height'] = height;
+        }
+        return { x: width, y: height };
+    };
     return Selection;
 }());
 export { Selection };