@syncfusion/ej2-image-editor 28.1.41 → 29.1.33

package/dist/global/index.d.ts

@@ -1,6 +1,6 @@
 /*!
 *  filename: index.d.ts
-*  version : 28.1.41
+*  version : 29.1.33
 *  Copyright Syncfusion Inc. 2001 - 2024. All rights reserved.
 *  Use of this code is subject to the terms of our license.
 *  A copy of the current license can be obtained at any time by e-mailing

package/package.json

@@ -1,8 +1,8 @@
 {
   "_from": "@syncfusion/ej2-image-editor@*",
-  "_id": "@syncfusion/ej2-image-editor@28.1.39",
+  "_id": "@syncfusion/ej2-image-editor@28.1.33",
   "_inBundle": false,
-  "_integrity": "sha512-xQHF72FchEUkyjfMwpG53hkesJSw5EjMiWnEsn1Ipr9nknumGsGvToRt3ld1YqOlb5WpNXmvzVoCJdmggI5eBg==",
+  "_integrity": "sha512-IhibAvVcTb8/93MUyRUIv6ypSuzHIng/332tVEMgiqV2roeiiEPCLiGaBJPXuHUP6sH73x/mMUf1Q0S4KG/5Hg==",
   "_location": "/@syncfusion/ej2-image-editor",
   "_phantomChildren": {},
   "_requested": {
@@ -23,22 +23,22 @@
     "/@syncfusion/ej2-react-image-editor",
     "/@syncfusion/ej2-vue-image-editor"
   ],
-  "_resolved": "https://nexus.syncfusioninternal.com/repository/ej2-hotfix-new/@syncfusion/ej2-image-editor/-/ej2-image-editor-28.1.39.tgz",
-  "_shasum": "ffd308de5770a4ef97575c825f1ab3aac82b61d1",
+  "_resolved": "https://nexus.syncfusioninternal.com/repository/ej2-release/@syncfusion/ej2-image-editor/-/ej2-image-editor-28.1.33.tgz",
+  "_shasum": "d7cf3fcc02b854ee8fe345328507a49dd1a8cda2",
   "_spec": "@syncfusion/ej2-image-editor@*",
-  "_where": "/jenkins/workspace/elease-automation_release_28.1.1/packages/included",
+  "_where": "/jenkins/workspace/elease-automation_release_29.1.1/packages/included",
   "author": {
     "name": "Syncfusion Inc."
   },
   "bundleDependencies": false,
   "dependencies": {
-    "@syncfusion/ej2-base": "~28.1.33",
-    "@syncfusion/ej2-buttons": "~28.1.39",
-    "@syncfusion/ej2-dropdowns": "~28.1.41",
-    "@syncfusion/ej2-inputs": "~28.1.41",
-    "@syncfusion/ej2-navigations": "~28.1.41",
-    "@syncfusion/ej2-popups": "~28.1.39",
-    "@syncfusion/ej2-splitbuttons": "~28.1.41"
+    "@syncfusion/ej2-base": "~29.1.33",
+    "@syncfusion/ej2-buttons": "~29.1.33",
+    "@syncfusion/ej2-dropdowns": "~29.1.33",
+    "@syncfusion/ej2-inputs": "~29.1.33",
+    "@syncfusion/ej2-navigations": "~29.1.33",
+    "@syncfusion/ej2-popups": "~29.1.33",
+    "@syncfusion/ej2-splitbuttons": "~29.1.33"
   },
   "deprecated": false,
   "description": "Essential JS 2 ImageEditor",
@@ -68,7 +68,7 @@
     "url": "https://github.com/syncfusion/ej2-javascript-ui-controls/tree/master/controls/imageeditor"
   },
   "typings": "index.d.ts",
-  "version": "28.1.41",
+  "version": "29.1.33",
   "sideEffects": false,
   "homepage": "https://www.syncfusion.com/javascript-ui-controls"
 }

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

@@ -2032,7 +2032,7 @@ var Draw = /** @class */ (function () {
                 }
             }
             else {
-                canvasDraw.lineWidth = 0;
+                canvasDraw.lineWidth = 1;
             }
             var textStyle = '';
             if (bold) {

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

@@ -76,9 +76,6 @@ var Filter = /** @class */ (function () {
             case 'setAdjustmentValue':
                 this.adjustmentValue = args.value['adjustmentValue'];
                 break;
-            case 'getBrightnessAdjusted':
-                args.value['obj']['isBrightnessAdjusted'] = this.isBrightnessAdjusted;
-                break;
             case 'setBrightnessAdjusted':
                 this.isBrightnessAdjusted = args.value['isBrightnessAdjusted'];
                 if (this.parent.currentFilter.split('_') && this.parent.currentFilter.split('_')[1] === 'cold') {
@@ -156,18 +153,6 @@ var Filter = /** @class */ (function () {
         var splitWords = this.lowerContext.filter.split(' ');
         var values = [];
         var brightness = this.getFilterValue(this.adjustmentLevel.brightness);
-        var excludedTypes = ['brightness', 'contrast', 'hue', 'saturation', 'exposure', 'opacity', 'blur'];
-        if (excludedTypes.indexOf(type) === -1) {
-            if (isNullOrUndefined(isPreview) && (this.adjustmentLevel.sharpen || this.adjustmentLevel.bw)) {
-                parent.isUndoRedo = true;
-                var temp = this.lowerContext.filter;
-                this.lowerContext.filter = 'none';
-                parent.notify('shape', { prop: 'drawAnnotations', onPropertyChange: false,
-                    value: { ctx: this.lowerContext, shape: 'iterate', pen: 'iterate', isPreventApply: null } });
-                this.lowerContext.filter = temp;
-                parent.isUndoRedo = false;
-            }
-        }
         var saturate;
         var bright;
         var saturatePercent;

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

@@ -332,6 +332,48 @@ var Selection = /** @class */ (function () {
             case 'setTransformedShape':
                 this.isTransformedShape = args.value['bool'];
                 break;
+            case 'rgbToHex':
+                this.rgbToHex(args.value['r'], args.value['g'], args.value['b'], args.value['a']);
+                break;
+            case 'padLeft':
+                this.padLeft(args.value['value'], args.value['length'], args.value['padChar']);
+                break;
+            case 'setTimer':
+                this.setTimer(args.value['e']);
+                break;
+            case 'targetTouches':
+                args.value['output'] = this.targetTouches(args.value['touches']);
+                break;
+            case 'calculateScale':
+                args.value['output'] = this.calculateScale(args.value['startTouches'], args.value['endTouches']);
+                break;
+            case 'beforeSaveEvent':
+                this.beforeSaveEvent(args.value['args'], args.value['e']);
+                break;
+            case 'isKeyBoardCrop':
+                args.value['output'] = this.isKeyBoardCrop(args.value['e']);
+                break;
+            case 'focusRatioBtn':
+                this.focusRatioBtn();
+                break;
+            case 'performEnterAction':
+                this.performEnterAction(args.value['e']);
+                break;
+            case 'getImagePoints':
+                args.value['output'] = this.getImagePoints(args.value['x'], args.value['y']);
+                break;
+            case 'revertPoints':
+                this.revertPoints(args.value['actPoint'], args.value['tempActiveObj']);
+                break;
+            case 'performNWResize':
+                this.performNWResize(args.value['x'], args.value['y'], args.value['tempActiveObj'], args.value['actPoint']);
+                break;
+            case 'performSEResize':
+                this.performSEResize(args.value['x'], args.value['y'], args.value['tempActiveObj'], args.value['actPoint']);
+                break;
+            case 'isMouseOutsideImg':
+                args.value['output'] = this.isMouseOutsideImg(args.value['x'], args.value['y']);
+                break;
         }
     };
     Selection.prototype.getModuleName = function () {
@@ -3222,7 +3264,7 @@ var Selection = /** @class */ (function () {
             parent.cursor : 'default';
         var tempCursor = parent.upperCanvas.style.cursor;
         if (parent.isResize) {
-            this.performEnterAction();
+            this.performEnterAction(e);
             parent.upperCanvas.style.cursor = 'default';
             return;
         }
@@ -3860,9 +3902,10 @@ var Selection = /** @class */ (function () {
                     }
                     parent.notify('toolbar', { prop: 'update-toolbar-items', onPropertyChange: false });
                     if (!this.isFhdEditing) {
+                        var width = Math.floor(parent.activeObj.activePoint.width);
                         if (parent.activeObj.shape && parent.activeObj.shape === 'text' &&
-                            parent.activeObj.textSettings.fontSize === 11 && Math.floor(parent.activeObj.activePoint.width) === 55 &&
-                            Math.floor(parent.activeObj.activePoint.height) === 11) {
+                            parent.activeObj.textSettings.fontSize === 11 && Math.floor(parent.activeObj.activePoint.height) === 11 &&
+                            (width === 55 || (parent.activeObj.textSettings.bold && width === 58))) {
                             parent.notify('shape', { prop: 'refreshActiveObj', onPropertyChange: false });
                             if (parent.drawingShape === 'text' && !parent.activeObj.keyHistory) {
                                 parent.activeObj.keyHistory = 'Enter Text';

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

@@ -2198,13 +2198,16 @@ var Transform = /** @class */ (function () {
     };
     Transform.prototype.straightenImage = function (degree) {
         var parent = this.parent;
+        var isSelection = parent.activeObj.shape && parent.activeObj.shape.indexOf('crop-') > -1;
         if (parent.toolbar && parent.toolbar.length === 0) {
             parent.notify('draw', { prop: 'select', onPropertyChange: false,
                 value: { type: 'custom', startX: null, startY: null, width: null, height: null } });
         }
         parent.notify('toolbar', { prop: 'performCropTransformClick', value: { shape: null } });
         parent.setStraighten(degree);
-        parent.okBtn();
+        if (!isSelection) {
+            parent.okBtn();
+        }
     };
     return Transform;
 }());

package/src/image-editor/base/image-editor.d.ts

@@ -998,6 +998,7 @@ export declare class ImageEditor extends Component<HTMLDivElement> implements IN
     private windowResizeHandler;
     private notifyResetForAllModules;
     private allowShape;
+    private manageActiveAction;
     /**
      * Clears the current selection performed in the image editor.
      *
@@ -1627,10 +1628,11 @@ export declare class ImageEditor extends Component<HTMLDivElement> implements IN
      *
      * @param { boolean } isMouseDown - Specifies whether it is a mouse down.
      * @param { boolean } isFinalApply - Specifies whether it is a final apply.
+     * @param { boolean } isResize - Specifies whether it is called from resize public method.
      * @hidden
      * @returns {void}.
      */
-    okBtn(isMouseDown?: boolean, isFinalApply?: boolean): void;
+    okBtn(isMouseDown?: boolean, isFinalApply?: boolean, isResize?: boolean): void;
     triggerEditCompleteEvent(args: EditCompleteEventArgs): void;
     /**
      * Handles the OK button operation

package/src/image-editor/base/image-editor.js

@@ -808,6 +808,9 @@ var ImageEditor = /** @class */ (function (_super) {
             if (i === extension.length - 1 && extension.length > 1 &&
                 !((extension[i] === 'jpeg' || extension[i] === 'jpg') &&
                     (words.indexOf('JPG') > -1))) {
+                if (extension.length === 2 || (extension.length === 3 && extension.indexOf('jpeg') !== -1 && extension.indexOf('jpg') !== -1)) {
+                    words = words.replace(/,\s*$/, '');
+                }
                 words += ' ' + andObj['value'];
             }
             switch (extension[i]) {
@@ -896,22 +899,24 @@ var ImageEditor = /** @class */ (function (_super) {
         }
         this.element.style.width = this.width;
         this.element.style.height = this.height;
-        var canvasWrapper = this.element.appendChild(this.createElement('div', { id: this.element.id + '_canvasWrapper',
-            className: 'e-canvas-wrapper', attrs: { style: 'height:' + (this.element.offsetHeight - height - 2) + 'px; width:' +
-                    (this.element.offsetWidth - 2)
-                    + 'px; position: relative; overflow: hidden; margin: 0 auto;' }
-        }));
+        var canvasWrapperElement = this.createElement('div', { id: this.element.id + '_canvasWrapper', className: 'e-canvas-wrapper' });
+        canvasWrapperElement.style.cssText = "height: " + (this.element.offsetHeight - height - 2) + "px; width: " + (this.element.offsetWidth - 2) + "px; position: relative; overflow: hidden; margin: 0 auto;";
+        var canvasWrapper = this.element.appendChild(canvasWrapperElement);
         var dragObj = { key: 'DragText' };
         this.notify('toolbar', { prop: 'getLocaleText', onPropertyChange: false, value: { obj: dragObj } });
         var dropObj = { key: 'DropText' };
         this.notify('toolbar', { prop: 'getLocaleText', onPropertyChange: false, value: { obj: dropObj } });
         var browseObj = { key: 'BrowseText' };
         this.notify('toolbar', { prop: 'getLocaleText', onPropertyChange: false, value: { obj: browseObj } });
-        var dropAreaElement = this.createElement('div', { id: this.element.id + '_dropArea', className: 'e-ie-drop-area', attrs: { style: 'position: relative;' } });
-        var dropIconElement = this.createElement('span', { className: 'e-ie-drop-icon e-icons e-image', attrs: { style: 'position: absolute;' } });
-        var dropContentElement = this.createElement('span', { className: 'e-ie-drop-content', attrs: { style: 'position: absolute; display: none;' } });
+        var dropAreaElement = this.createElement('div', { id: this.element.id + '_dropArea', className: 'e-ie-drop-area' });
+        dropAreaElement.style.position = 'relative';
+        var dropIconElement = this.createElement('span', { className: 'e-ie-drop-icon e-icons e-image' });
+        dropIconElement.style.position = 'absolute';
+        var dropContentElement = this.createElement('span', { className: 'e-ie-drop-content' });
+        dropContentElement.style.cssText = 'position: absolute; display: none;';
         dropContentElement.textContent = dragObj['value'] + ' ';
-        var minDropContentElem = this.createElement('span', { className: 'e-ie-min-drop-content', attrs: { style: 'position: absolute;' } });
+        var minDropContentElem = this.createElement('span', { className: 'e-ie-min-drop-content' });
+        minDropContentElem.style.position = 'absolute';
         minDropContentElem.textContent = dropObj['value'] + ' ';
         var dropAnchorElement = this.createElement('a', { id: this.element.id + '_dropBrowse', className: 'e-ie-drop-browse' });
         dropAnchorElement.textContent = browseObj['value'];
@@ -1064,6 +1069,12 @@ var ImageEditor = /** @class */ (function (_super) {
             value: { x: x, y: y, obj: obj } });
         return obj['inRange'];
     };
+    ImageEditor.prototype.manageActiveAction = function () {
+        this.applyShapes();
+        if (this.activeObj.shape && this.activeObj.shape.indexOf('crop') > -1) {
+            this.discard();
+        }
+    };
     /**
      * Clears the current selection performed in the image editor.
      *
@@ -1105,6 +1116,8 @@ var ImageEditor = /** @class */ (function (_super) {
      *
      */
     ImageEditor.prototype.flip = function (direction) {
+        this.applyShapes();
+        this.updateImageTransformColl(direction.toLowerCase() + 'flip');
         this.notify('transform', { prop: 'flip', value: { direction: direction } });
         this.notify('draw', { prop: 'redrawDownScale' });
         this.notify('undo-redo', { prop: 'updateCurrUrc', value: { type: 'ok' } });
@@ -1292,6 +1305,10 @@ var ImageEditor = /** @class */ (function (_super) {
             if (Browser.isDevice && straightenObj['bool']) {
                 this.notify('crop', { prop: 'resizeWrapper' });
             }
+            var saveDialog = this.element.querySelector('#' + this.element.id + '_saveDialog');
+            if (saveDialog) {
+                getComponent(saveDialog, 'dialog').close();
+            }
             var actionArgs = { action: 'reset', actionEventArgs: null };
             this.triggerEditCompleteEvent(actionArgs);
         }
@@ -1312,6 +1329,7 @@ var ImageEditor = /** @class */ (function (_super) {
      */
     ImageEditor.prototype.rotate = function (degree) {
         var obj = { isRotate: false };
+        this.applyShapes();
         if (degree === 90 || degree === -90) {
             this.updateImageTransformColl(degree === 90 ? 'rotateright' : 'rotateleft');
         }
@@ -1401,7 +1419,7 @@ var ImageEditor = /** @class */ (function (_super) {
                 this.discard();
                 return;
             }
-            this.applyShapes();
+            this.manageActiveAction();
             this.freeHandDraw(value);
             var prevObj = { shapeSettingsObj: {} };
             this.notify('selection', { prop: 'updatePrevShapeSettings', onPropertyChange: false, value: { obj: prevObj } });
@@ -1468,6 +1486,7 @@ var ImageEditor = /** @class */ (function (_super) {
         var isPointsInRange = this.allowShape(x, y);
         if (!this.disabled && this.isImageLoaded && (isPointsInRange || (isNullOrUndefined(x) && isNullOrUndefined(y)))) {
             isEllipse = true;
+            this.manageActiveAction();
             this.notify('shape', { prop: 'drawEllipse', onPropertyChange: false, value: { x: x, y: y, radiusX: radiusX, radiusY: radiusY,
                     strokeWidth: strokeWidth, strokeColor: strokeColor, fillColor: fillColor, degree: degree, isSelected: isSelected } });
             this.editCompleted();
@@ -1491,6 +1510,7 @@ var ImageEditor = /** @class */ (function (_super) {
         var isPointsInRange = this.allowShape(startX, startY);
         if (!this.disabled && this.isImageLoaded && (isPointsInRange || (isNullOrUndefined(startX) && isNullOrUndefined(startY)))) {
             isLine = true;
+            this.manageActiveAction();
             this.notify('shape', { prop: 'drawLine', onPropertyChange: false, value: { startX: startX, startY: startY, endX: endX,
                     endY: endY, strokeWidth: strokeWidth, strokeColor: strokeColor, isSelected: isSelected } });
             this.editCompleted();
@@ -1516,6 +1536,7 @@ var ImageEditor = /** @class */ (function (_super) {
         var isPointsInRange = this.allowShape(startX, startY);
         if (!this.disabled && this.isImageLoaded && (isPointsInRange || (isNullOrUndefined(startX) && isNullOrUndefined(startY)))) {
             isArrow = true;
+            this.manageActiveAction();
             this.notify('shape', { prop: 'drawArrow', onPropertyChange: false, value: { startX: startX, startY: startY, endX: endX,
                     endY: endY, strokeWidth: strokeWidth, strokeColor: strokeColor, arrowStart: arrowStart, arrowEnd: arrowEnd,
                     isSelected: isSelected } });
@@ -1547,7 +1568,7 @@ var ImageEditor = /** @class */ (function (_super) {
         }
         if (!this.disabled && this.isImageLoaded && (obj['inRange'] || isNullOrUndefined(pointColl))) {
             isPath = true;
-            this.applyShapes();
+            this.manageActiveAction();
             this.notify('shape', { prop: 'drawPath', onPropertyChange: false, value: { pointColl: pointColl,
                     strokeWidth: strokeWidth, strokeColor: strokeColor, isSelected: isSelected } });
             this.editCompleted();
@@ -1574,6 +1595,7 @@ var ImageEditor = /** @class */ (function (_super) {
         var isPointsInRange = this.allowShape(x, y);
         if (!this.disabled && this.isImageLoaded && (isPointsInRange || (isNullOrUndefined(x) && isNullOrUndefined(y)))) {
             isRectangle = true;
+            this.manageActiveAction();
             this.notify('shape', { prop: 'drawRectangle', onPropertyChange: false, value: { x: x, y: y, width: width, height: height,
                     strokeWidth: strokeWidth, strokeColor: strokeColor, fillColor: fillColor, degree: degree, isSelected: isSelected,
                     radius: borderRadius } });
@@ -1608,6 +1630,7 @@ var ImageEditor = /** @class */ (function (_super) {
         var isPointsInRange = this.allowShape(x, y);
         if (!this.disabled && this.isImageLoaded && (isPointsInRange || (isNullOrUndefined(x) && isNullOrUndefined(y)))) {
             isText = true;
+            this.manageActiveAction();
             this.notify('shape', { prop: 'drawText', onPropertyChange: false, value: { x: x, y: y, text: text, fontFamily: fontFamily,
                     fontSize: fontSize, bold: bold, italic: italic, color: color, isSelected: isSelected, degree: degree, fillColor: fillColor,
                     outlineColor: strokeColor, outlineWidth: strokeWidth, transformCollection: transformCollection } });
@@ -1635,6 +1658,7 @@ var ImageEditor = /** @class */ (function (_super) {
         var isImage = false;
         var isPointsInRange = this.allowShape(x, y);
         if (!this.disabled && this.isImageLoaded && (isPointsInRange || (isNullOrUndefined(x) && isNullOrUndefined(y)))) {
+            this.manageActiveAction();
             var length_1 = this.objColl.length;
             this.notify('shape', { prop: 'drawImage', onPropertyChange: false, value: { x: x, y: y, width: width, height: height,
                     src: data, degree: degree, isAspectRatio: isAspectRatio, opacity: opacity, isSelected: isSelected } });
@@ -1682,7 +1706,7 @@ var ImageEditor = /** @class */ (function (_super) {
                 this.okBtn(null, true);
                 isTextArea = true;
             }
-            this.notify('shape', { prop: 'selectShape', onPropertyChange: false, value: { id: setting.id, obj: obj } });
+            this.notify('shape', { prop: 'selectShape', onPropertyChange: false, value: { id: setting.id, obj: obj, isShape: true } });
             this.notify('selection', { prop: 'getFreehandDrawEditing', onPropertyChange: false, value: { obj: freehandObj } });
             if (obj['isSelected']) {
                 var tempFontSize = this.activeObj.textSettings.fontSize;
@@ -1742,7 +1766,7 @@ var ImageEditor = /** @class */ (function (_super) {
     ImageEditor.prototype.selectShape = function (id) {
         this.applyShapes();
         var obj = { isSelected: false };
-        this.notify('shape', { prop: 'selectShape', onPropertyChange: false, value: { id: id, obj: obj } });
+        this.notify('shape', { prop: 'selectShape', onPropertyChange: false, value: { id: id, obj: obj, isShape: true } });
         this.editCompleted('shape-select');
         this.noRedact = false;
         return obj['isSelected'];
@@ -1764,7 +1788,7 @@ var ImageEditor = /** @class */ (function (_super) {
             return;
         }
         this.applyShapes();
-        this.notify('shape', { prop: 'deleteShape', onPropertyChange: false, value: { id: id } });
+        this.notify('shape', { prop: 'deleteShape', onPropertyChange: false, value: { id: id, isShape: true } });
         this.editCompleted('shape-delete');
     };
     /**
@@ -1823,7 +1847,7 @@ var ImageEditor = /** @class */ (function (_super) {
     ImageEditor.prototype.selectRedact = function (id) {
         this.applyShapes();
         var obj = { isSelected: false };
-        this.notify('shape', { prop: 'selectShape', onPropertyChange: false, value: { id: id, obj: obj } });
+        this.notify('shape', { prop: 'selectShape', onPropertyChange: false, value: { id: id, obj: obj, isRedact: true } });
         this.editCompleted('redact-select');
         this.noRedact = false;
         return obj['isSelected'];
@@ -1839,7 +1863,7 @@ var ImageEditor = /** @class */ (function (_super) {
      */
     ImageEditor.prototype.deleteRedact = function (id) {
         this.applyShapes();
-        this.notify('shape', { prop: 'deleteShape', onPropertyChange: false, value: { id: id } });
+        this.notify('shape', { prop: 'deleteShape', onPropertyChange: false, value: { id: id, isRedact: true } });
         this.editCompleted('redact-delete');
     };
     /**
@@ -1854,7 +1878,7 @@ var ImageEditor = /** @class */ (function (_super) {
     ImageEditor.prototype.updateRedact = function (setting, isSelected) {
         this.applyShapes();
         var obj = { isSelected: false };
-        this.notify('shape', { prop: 'selectShape', onPropertyChange: false, value: { id: setting.id, obj: obj } });
+        this.notify('shape', { prop: 'selectShape', onPropertyChange: false, value: { id: setting.id, obj: obj, isRedact: true } });
         if (obj['isSelected']) {
             this.notify('shape', { prop: 'updateShapeChangeEventArgs', onPropertyChange: false,
                 value: { shapeSettings: setting } });
@@ -1904,7 +1928,7 @@ var ImageEditor = /** @class */ (function (_super) {
      */
     ImageEditor.prototype.finetuneImage = function (finetuneOption, value) {
         if (!this.disabled && this.isImageLoaded) {
-            this.applyShapes();
+            this.manageActiveAction();
             this.notify('filter', { prop: 'finetuneImage', value: { value: value, option: finetuneOption } });
             this.editCompleteArgs = { finetune: finetuneOption, value: value };
             this.editCompleted('fine-tune');
@@ -1921,7 +1945,7 @@ var ImageEditor = /** @class */ (function (_super) {
      */
     ImageEditor.prototype.applyImageFilter = function (filterOption) {
         if (!this.disabled && this.isImageLoaded) {
-            this.applyShapes();
+            this.manageActiveAction();
             this.notify('filter', { prop: 'applyImageFilter', value: { option: filterOption.toString() } });
             this.editCompleteArgs = { filter: filterOption };
             this.editCompleted('filter');
@@ -1938,7 +1962,7 @@ var ImageEditor = /** @class */ (function (_super) {
      * @returns {void}.
      */
     ImageEditor.prototype.undo = function () {
-        this.applyShapes();
+        this.manageActiveAction();
         this.notify('undo-redo', { prop: 'undo', onPropertyChange: false });
         this.notify('draw', { prop: 'redrawDownScale' });
     };
@@ -1950,7 +1974,7 @@ var ImageEditor = /** @class */ (function (_super) {
      * @returns {void}.
      */
     ImageEditor.prototype.redo = function () {
-        this.applyShapes();
+        this.manageActiveAction();
         this.notify('undo-redo', { prop: 'redo', onPropertyChange: false });
         this.notify('draw', { prop: 'redrawDownScale' });
     };
@@ -1975,8 +1999,9 @@ var ImageEditor = /** @class */ (function (_super) {
      */
     ImageEditor.prototype.resize = function (width, height, isAspectRatio) {
         var isResized = false;
-        if ((width.toString()).length <= 4 && (height.toString()).length <= 4) {
-            this.applyShapes();
+        if (((width.toString()).length <= 4 && (height.toString()).length <= 4) && (!this.isCircleCrop || isAspectRatio)) {
+            this.manageActiveAction();
+            this.notify('toolbar', { prop: 'resizeClick', value: { bool: false } });
             var destPoints = { startX: this.img.destLeft, startY: this.img.destTop, width: this.img.destWidth,
                 height: this.img.destHeight };
             if (isAspectRatio) {
@@ -2001,7 +2026,12 @@ var ImageEditor = /** @class */ (function (_super) {
             if (destPoints.startX !== this.img.destLeft || destPoints.startY !== this.img.destTop ||
                 destPoints.width !== this.img.destWidth || destPoints.height !== this.img.destHeight) {
                 isResized = true;
-                this.okBtn();
+                this.aspectWidth = width;
+                this.aspectHeight = height;
+                if (isAspectRatio) {
+                    this.aspectHeight = null;
+                }
+                this.okBtn(false, false, true);
             }
             else {
                 this.notify('draw', { prop: 'performCancel', value: { isContextualToolbar: null } });
@@ -2026,7 +2056,7 @@ var ImageEditor = /** @class */ (function (_super) {
      * @returns {boolean}.
      */
     ImageEditor.prototype.drawFrame = function (frameType, color, gradientColor, size, inset, offset, borderRadius, frameLineStyle, lineCount) {
-        this.applyShapes();
+        this.manageActiveAction();
         var isFrame = false;
         var obj = { frameChangeEventArgs: null };
         color = color ? color : '#fff';
@@ -2071,6 +2101,10 @@ var ImageEditor = /** @class */ (function (_super) {
             this.tempFrameZoomLevel = null;
         }
         this.notify('draw', { prop: 'redrawDownScale' });
+        var ctxTbar = this.element.querySelector('.e-contextual-toolbar-wrapper');
+        if (ctxTbar) {
+            ctxTbar.classList.add('e-hide');
+        }
         return isFrame;
     };
     /**
@@ -2900,10 +2934,11 @@ var ImageEditor = /** @class */ (function (_super) {
      *
      * @param { boolean } isMouseDown - Specifies whether it is a mouse down.
      * @param { boolean } isFinalApply - Specifies whether it is a final apply.
+     * @param { boolean } isResize - Specifies whether it is called from resize public method.
      * @hidden
      * @returns {void}.
      */
-    ImageEditor.prototype.okBtn = function (isMouseDown, isFinalApply) {
+    ImageEditor.prototype.okBtn = function (isMouseDown, isFinalApply, isResize) {
         if (isFinalApply) {
             this.noPushUndo = false;
             var tempActiveObj = { activePoint: { startX: 0, startY: 0, endX: 0, endY: 0, width: 0, height: 0 },
@@ -3002,6 +3037,45 @@ var ImageEditor = /** @class */ (function (_super) {
             }
             this.isAspectRatio = false;
         }
+        else if (isResize) {
+            var isAspectRatio = false;
+            if (this.aspectWidth && this.aspectHeight) {
+                this.notify('transform', { prop: 'resize', value: { width: this.aspectWidth, height: this.aspectHeight, isAspectRatio: false } });
+            }
+            else if (this.aspectWidth) {
+                this.notify('transform', { prop: 'resize', value: { width: this.aspectWidth, height: null, isAspectRatio: true } });
+                this.aspectHeight = this.aspectWidth / (this.img.destWidth / this.img.destHeight);
+                isAspectRatio = true;
+            }
+            this.isResize = false;
+            this.notify('toolbar', { prop: 'refresh-toolbar', onPropertyChange: false, value: { type: 'main',
+                    isApplyBtn: false, isCropping: false, isZooming: null, cType: null } });
+            this.notify('transform', { prop: 'zoomAction', onPropertyChange: false,
+                value: { zoomFactor: -this.transform.zoomFactor, zoomPoint: null, isResize: true } });
+            this.notify('transform', { prop: 'zoomAction', onPropertyChange: false,
+                value: { zoomFactor: this.prevObj['defaultZoom'], zoomPoint: null, isResize: true } });
+            if (this.prevObj.zoomFactor) {
+                this.setProperties({ zoomSettings: { zoomFactor: this.prevObj.zoomFactor } }, true);
+            }
+            this.notify('transform', { prop: 'setPreviousZoomValue', onPropertyChange: false,
+                value: { previousZoomValue: this.zoomSettings.zoomFactor } });
+            this.notify('undo-redo', { prop: 'updateUndoRedoColl', onPropertyChange: false, value: { operation: 'resize',
+                    previousObj: this.prevObj, previousObjColl: this.prevObj['objColl'],
+                    previousPointColl: this.prevObj['pointColl'], previousSelPointColl: this.prevObj['selPointColl'],
+                    previousCropObj: this.prevCropObj, previousText: null, currentText: null, previousFilter: null,
+                    isCircleCrop: null } });
+            this.notify('undo-redo', { prop: 'updateCurrUrc', value: { type: 'ok' } });
+            var obj_4 = this.cancelCropSelection;
+            if ((obj_4 && isAspectRatio)) {
+                obj_4.previousObj.aspectWidth = obj_4.currentObj.aspectWidth = this.aspectWidth;
+                obj_4.previousObj.aspectHeight = obj_4.currentObj.aspectHeight = this.aspectHeight;
+                obj_4.previousCropObj = extend({}, this.cropObj, {}, true);
+                obj_4.currentCropObj = extend({}, this.cropObj, {}, true);
+                this.notify('draw', { prop: 'updateCropSelObj' });
+            }
+            this.cancelCropSelection = null;
+            this.isAspectRatio = false;
+        }
         var selElem = this.element.querySelector('.e-contextual-toolbar-wrapper .e-toolbar-item.e-selected');
         var obj = { bool: false };
         this.notify('selection', { prop: 'getFreehandDrawEditing', onPropertyChange: false, value: { obj: obj } });
@@ -3047,8 +3121,8 @@ var ImageEditor = /** @class */ (function (_super) {
         else if ((sliderWrap || this.currObjType.isFiltered) && !this.drawingShape && this.activeObj.shape !== 'redact') {
             this.initialAdjustmentValue = this.canvasFilter = this.lowerContext.filter;
             this.currObjType.isFiltered = false;
-            var obj_4 = { value: null };
-            this.notify('draw', { prop: 'getTempAdjustmentValue', value: { obj: obj_4 } });
+            var obj_5 = { value: null };
+            this.notify('draw', { prop: 'getTempAdjustmentValue', value: { obj: obj_5 } });
             if (!sliderWrap || sliderWrap.parentElement.previousElementSibling.textContent !== 'Opacity') {
                 this.notify('undo-redo', { prop: 'updateCurrUrc', value: { type: 'ok' } });
             }
@@ -3747,19 +3821,19 @@ var ImageEditor = /** @class */ (function (_super) {
         var obj = { bool: false };
         this.notify('selection', { prop: 'getFreehandDrawEditing', onPropertyChange: false, value: { obj: obj } });
         if (obj['bool']) {
-            var obj_5 = { penStrokeWidth: null };
-            this.notify('freehand-draw', { prop: 'getPenStrokeWidth', onPropertyChange: false, value: { obj: obj_5 } });
+            var obj_6 = { penStrokeWidth: null };
+            this.notify('freehand-draw', { prop: 'getPenStrokeWidth', onPropertyChange: false, value: { obj: obj_6 } });
             this.upperContext.clearRect(0, 0, this.upperCanvas.width, this.upperCanvas.height);
             this.lowerContext.clearRect(0, 0, this.lowerCanvas.width, this.lowerCanvas.height);
             this.notify('freehand-draw', { prop: 'hoverFhd', onPropertyChange: false,
-                value: { strokeColor: null, strokeWidth: obj_5['penStrokeWidth'] } });
+                value: { strokeColor: null, strokeWidth: obj_6['penStrokeWidth'] } });
             var indexObj = { freehandSelectedIndex: null };
             this.notify('freehand-draw', { prop: 'getFreehandSelectedIndex', onPropertyChange: false, value: { obj: indexObj } });
-            this.pointColl[indexObj['freehandSelectedIndex']].strokeWidth = obj_5['penStrokeWidth'];
+            this.pointColl[indexObj['freehandSelectedIndex']].strokeWidth = obj_6['penStrokeWidth'];
             this.notify('draw', { prop: 'render-image', value: { isMouseWheel: null } });
             this.notify('draw', { prop: 'redrawDownScale' });
             this.notify('freehand-draw', { prop: 'hoverFhd', onPropertyChange: false,
-                value: { strokeColor: null, strokeWidth: obj_5['penStrokeWidth'] } });
+                value: { strokeColor: null, strokeWidth: obj_6['penStrokeWidth'] } });
             this.notify('undo-redo', { prop: 'updateUndoRedoColl', onPropertyChange: false,
                 value: { operation: 'freehanddrawCustomized', previousObj: prevObj, previousObjColl: prevObj.objColl,
                     previousPointColl: prevObj.pointColl, previousSelPointColl: prevObj.selPointColl,
@@ -4400,9 +4474,9 @@ var ImageEditor = /** @class */ (function (_super) {
             var ctx = this.baseImgCanvas.getContext('2d');
             if (ctx.canvas.width !== this.lowerContext.canvas.width &&
                 ctx.canvas.height !== this.lowerContext.canvas.height) {
-                var obj_6 = { width: 0, height: 0 };
+                var obj_7 = { width: 0, height: 0 };
                 this.notify('crop', { prop: 'calcRatio', onPropertyChange: false,
-                    value: { obj: obj_6, dimension: { width: ctx.canvas.width, height: ctx.canvas.height } } });
+                    value: { obj: obj_7, dimension: { width: ctx.canvas.width, height: ctx.canvas.height } } });
             }
             var dimension = void 0;
             // eslint-disable-next-line prefer-const
@@ -4571,6 +4645,7 @@ var ImageEditor = /** @class */ (function (_super) {
         var isPointsInRange = this.allowShape(x, y);
         if (!this.disabled && this.isImageLoaded && (isPointsInRange || (isNullOrUndefined(x) && isNullOrUndefined(y)))) {
             isRedact = true;
+            this.manageActiveAction();
             this.notify('shape', {
                 prop: 'drawRedact', onPropertyChange: false, value: {
                     x: x, y: y, width: width, height: height, type: type, value: value