@syncfusion/ej2-image-editor 28.2.3 → 29.1.33

package/dist/es6/ej2-image-editor.es5.js

@@ -2959,7 +2959,7 @@ var Draw = /** @__PURE__ @class */ (function () {
                 }
             }
             else {
-                canvasDraw.lineWidth = 0;
+                canvasDraw.lineWidth = 1;
             }
             var textStyle = '';
             if (bold) {
@@ -6876,9 +6876,6 @@ var Filter = /** @__PURE__ @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') {
@@ -6956,18 +6953,6 @@ var Filter = /** @__PURE__ @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;
@@ -9243,6 +9228,48 @@ var Selection = /** @__PURE__ @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 () {
@@ -12133,7 +12160,7 @@ var Selection = /** @__PURE__ @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;
         }
@@ -12771,9 +12798,10 @@ var Selection = /** @__PURE__ @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';
@@ -20696,13 +20724,16 @@ var Transform = /** @__PURE__ @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;
 }());
@@ -22685,6 +22716,9 @@ var ImageEditor = /** @__PURE__ @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]) {
@@ -22773,22 +22807,24 @@ var ImageEditor = /** @__PURE__ @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'];
@@ -22941,6 +22977,12 @@ var ImageEditor = /** @__PURE__ @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.
      *
@@ -22982,6 +23024,8 @@ var ImageEditor = /** @__PURE__ @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' } });
@@ -23169,6 +23213,10 @@ var ImageEditor = /** @__PURE__ @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);
         }
@@ -23189,6 +23237,7 @@ var ImageEditor = /** @__PURE__ @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');
         }
@@ -23278,7 +23327,7 @@ var ImageEditor = /** @__PURE__ @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 } });
@@ -23345,6 +23394,7 @@ var ImageEditor = /** @__PURE__ @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();
@@ -23368,6 +23418,7 @@ var ImageEditor = /** @__PURE__ @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();
@@ -23393,6 +23444,7 @@ var ImageEditor = /** @__PURE__ @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 } });
@@ -23424,7 +23476,7 @@ var ImageEditor = /** @__PURE__ @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();
@@ -23451,6 +23503,7 @@ var ImageEditor = /** @__PURE__ @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 } });
@@ -23485,6 +23538,7 @@ var ImageEditor = /** @__PURE__ @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 } });
@@ -23512,6 +23566,7 @@ var ImageEditor = /** @__PURE__ @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 } });
@@ -23559,7 +23614,7 @@ var ImageEditor = /** @__PURE__ @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;
@@ -23619,7 +23674,7 @@ var ImageEditor = /** @__PURE__ @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'];
@@ -23641,7 +23696,7 @@ var ImageEditor = /** @__PURE__ @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');
     };
     /**
@@ -23700,7 +23755,7 @@ var ImageEditor = /** @__PURE__ @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'];
@@ -23716,7 +23771,7 @@ var ImageEditor = /** @__PURE__ @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');
     };
     /**
@@ -23731,7 +23786,7 @@ var ImageEditor = /** @__PURE__ @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 } });
@@ -23781,7 +23836,7 @@ var ImageEditor = /** @__PURE__ @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');
@@ -23798,7 +23853,7 @@ var ImageEditor = /** @__PURE__ @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');
@@ -23815,7 +23870,7 @@ var ImageEditor = /** @__PURE__ @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' });
     };
@@ -23827,7 +23882,7 @@ var ImageEditor = /** @__PURE__ @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' });
     };
@@ -23852,8 +23907,9 @@ var ImageEditor = /** @__PURE__ @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) {
@@ -23878,7 +23934,12 @@ var ImageEditor = /** @__PURE__ @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 } });
@@ -23903,7 +23964,7 @@ var ImageEditor = /** @__PURE__ @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';
@@ -23948,6 +24009,10 @@ var ImageEditor = /** @__PURE__ @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;
     };
     /**
@@ -24777,10 +24842,11 @@ var ImageEditor = /** @__PURE__ @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 },
@@ -24879,6 +24945,45 @@ var ImageEditor = /** @__PURE__ @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 } });
@@ -24924,8 +25029,8 @@ var ImageEditor = /** @__PURE__ @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' } });
             }
@@ -25624,19 +25729,19 @@ var ImageEditor = /** @__PURE__ @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,
@@ -26277,9 +26382,9 @@ var ImageEditor = /** @__PURE__ @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
@@ -26448,6 +26553,7 @@ var ImageEditor = /** @__PURE__ @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
@@ -27234,6 +27340,48 @@ var ToolbarModule = /** @__PURE__ @class */ (function () {
             case 'heightAspectRatio':
                 this.heightAspectRatio(args.value['e']);
                 break;
+            case 'cancelPan':
+                this.cancelPan();
+                break;
+            case 'zoomInBtnMouseDownHandler':
+                this.zoomInBtnMouseDownHandler(args.value['event']);
+                break;
+            case 'zoomOutBtnMouseDownHandler':
+                this.zoomOutBtnMouseDownHandler(args.value['event']);
+                break;
+            case 'drawDashedLine':
+                this.drawDashedLine(args.value['context']);
+                break;
+            case 'saveDialogClosed':
+                this.saveDialogClosed(args.value['id']);
+                break;
+            case 'getIndex':
+                this.getIndex(args.value['item']);
+                break;
+            case 'getRectRadius':
+                this.getRectRadius(args.value['text']);
+                break;
+            case 'applyPreviewFilter':
+                this.applyPreviewFilter();
+                break;
+            case 'renderSlider':
+                this.renderSlider(args.value['type'], args.value['isSelect']);
+                break;
+            case 'zoomInBtnClickHandler':
+                this.zoomInBtnClickHandler(args.value['e']);
+                break;
+            case 'zoomOutBtnClickHandler':
+                this.zoomOutBtnClickHandler(args.value['e']);
+                break;
+            case 'getAdjustmentToolbarItem':
+                this.getAdjustmentToolbarItem();
+                break;
+            case 'getFilterToolbarItem':
+                this.getFilterToolbarItem();
+                break;
+            case 'renderCropBtn':
+                this.renderCropBtn();
+                break;
         }
     };
     ToolbarModule.prototype.updatePrivateVariables = function () {
@@ -27362,9 +27510,9 @@ var ToolbarModule = /** @__PURE__ @class */ (function () {
         var parent = this.parent;
         var id = parent.element.id;
         if (isNullOrUndefined(parent.toolbar) || (parent.toolbar && parent.toolbar.length > 0)) {
-            parent.element.appendChild(parent.createElement('div', { id: id + '_contextualToolbarArea',
-                className: 'e-contextual-toolbar-wrapper e-hide', attrs: { style: 'position: absolute;' }
-            }));
+            var contextualToolbarArea = parent.createElement('div', { id: id + '_contextualToolbarArea', className: 'e-contextual-toolbar-wrapper e-hide' });
+            contextualToolbarArea.style.position = 'absolute';
+            parent.element.appendChild(contextualToolbarArea);
             var toolbarArea = document.getElementById(id + '_contextualToolbarArea');
             var toolbar_2 = parent.createElement('div', { id: id + '_contextualToolbar' });
             toolbarArea.appendChild(toolbar_2);
@@ -28243,8 +28391,9 @@ var ToolbarModule = /** @__PURE__ @class */ (function () {
     ToolbarModule.prototype.enableDisableCloneBtn = function (toolbarId, obj) {
         var parent = this.parent;
         var isDummyTextClick = false;
+        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 &&
+            parent.activeObj.textSettings.fontSize === 11 && (width === 55 || (parent.activeObj.textSettings.bold && width === 58)) &&
             Math.floor(parent.activeObj.activePoint.height) === 11) {
             isDummyTextClick = true;
         }
@@ -28434,8 +28583,9 @@ var ToolbarModule = /** @__PURE__ @class */ (function () {
         var quality = ['Good', 'Great', 'Highest'];
         parent.element.appendChild(parent.createElement('div', { id: id + '_saveDialog' }));
         var dialogContent = parent.createElement('div', {
-            id: id + '_dialogContent', attrs: { style: 'display: flex;' }
+            id: id + '_dialogContent'
         });
+        dialogContent.style.display = 'flex';
         var dialogImgContent = dialogContent.appendChild(parent.createElement('div', {
             id: id + '_dialogImgContent', className: 'e-ie-dlg-img-content'
         }));
@@ -28874,7 +29024,7 @@ var ToolbarModule = /** @__PURE__ @class */ (function () {
         }
         if ((isNullOrUndefined(parent.toolbar) || (parent.toolbar && parent.toolbar.indexOf('Straightening') > -1)) && !Browser.isDevice) {
             toolbarItems.push({ align: 'Center', type: 'Separator' });
-            if (isNullOrUndefined(parent.toolbar) || (parent.toolbar && (parent.toolbar.indexOf('Straighten') > -1 || parent.toolbar.indexOf('Straighten') > -1))) {
+            if (isNullOrUndefined(parent.toolbar) || (parent.toolbar && parent.toolbar.indexOf('Straightening') > -1)) {
                 var spanWidth = document.createElement('span');
                 spanWidth.innerHTML = this.l10n.getConstant('Straighten');
                 toolbarItems.push({ id: id + '_straightenSpan', cssClass: 'e-ie-straighten-span', template: spanWidth, align: 'Center' });
@@ -30106,7 +30256,9 @@ var ToolbarModule = /** @__PURE__ @class */ (function () {
                 }
                 break;
             case 'shapes':
-                parent.noPushUndo = true;
+                if (!parent.isPublicMethod) {
+                    parent.noPushUndo = true;
+                }
                 if (Browser.isDevice) {
                     this.initMainToolbar(false, true, true);
                 }
@@ -30440,37 +30592,37 @@ var ToolbarModule = /** @__PURE__ @class */ (function () {
         if (isNullOrUndefined(parent.toolbar) || !isCustomized || (parent.toolbar && parent.toolbar.indexOf('Default') > -1)) {
             toolbarItems.push({ id: id + '_default', prefixIcon: 'e-icons e-none', cssClass: 'top-icon e-none',
                 tooltipText: this.l10n.getConstant('Default'), align: 'Center',
-                template: '<div class="filter-wrapper" style="box-sizing: content-box;"><canvas id=' + id + '_defaultCanvas' + ' tabindex=0></canvas><div style="text-align:center;"><span>' + this.l10n.getConstant('Default') + '</span></div></div>' });
+                template: '<div class="filter-wrapper"><canvas id=' + id + '_defaultCanvas' + ' tabindex=0></canvas><div><span>' + this.l10n.getConstant('Default') + '</span></div></div>' });
         }
         if (isNullOrUndefined(parent.toolbar) || !isCustomized || (parent.toolbar && parent.toolbar.indexOf('Chrome') > -1)) {
             toolbarItems.push({ id: id + '_chrome', prefixIcon: 'e-icons e-none', cssClass: 'top-icon e-none',
                 tooltipText: this.l10n.getConstant('Chrome'), align: 'Center',
-                template: '<div class="filter-wrapper" style="box-sizing: content-box;"><canvas id=' + id + '_chromeCanvas' + '></canvas><div style="text-align:center;"><span>' + this.l10n.getConstant('Chrome') + '</span></div></div>' });
+                template: '<div class="filter-wrapper"><canvas id=' + id + '_chromeCanvas' + '></canvas><div><span>' + this.l10n.getConstant('Chrome') + '</span></div></div>' });
         }
         if (isNullOrUndefined(parent.toolbar) || !isCustomized || (parent.toolbar && parent.toolbar.indexOf('Cold') > -1)) {
             toolbarItems.push({ id: id + '_cold', prefixIcon: 'e-icons e-none', cssClass: 'top-icon e-none',
                 tooltipText: this.l10n.getConstant('Cold'), align: 'Center',
-                template: '<div class="filter-wrapper" style="box-sizing: content-box;"><canvas id=' + id + '_coldCanvas' + '></canvas><div style="text-align:center;"><span>' + this.l10n.getConstant('Cold') + '</span></div></div>' });
+                template: '<div class="filter-wrapper"><canvas id=' + id + '_coldCanvas' + '></canvas><div><span>' + this.l10n.getConstant('Cold') + '</span></div></div>' });
         }
         if (isNullOrUndefined(parent.toolbar) || !isCustomized || (parent.toolbar && parent.toolbar.indexOf('Warm') > -1)) {
             toolbarItems.push({ id: id + '_warm', prefixIcon: 'e-icons e-none', cssClass: 'top-icon e-none',
                 tooltipText: this.l10n.getConstant('Warm'), align: 'Center',
-                template: '<div class="filter-wrapper" style="box-sizing: content-box;"><canvas id=' + id + '_warmCanvas' + '></canvas><div style="text-align:center;"><span>' + this.l10n.getConstant('Warm') + '</span></div></div>' });
+                template: '<div class="filter-wrapper"><canvas id=' + id + '_warmCanvas' + '></canvas><div><span>' + this.l10n.getConstant('Warm') + '</span></div></div>' });
         }
         if (isNullOrUndefined(parent.toolbar) || !isCustomized || (parent.toolbar && parent.toolbar.indexOf('Grayscale') > -1)) {
             toolbarItems.push({ id: id + '_grayscale', prefixIcon: 'e-icons e-none', cssClass: 'top-icon e-none',
                 tooltipText: this.l10n.getConstant('Grayscale'), align: 'Center',
-                template: '<div class="filter-wrapper" style="box-sizing: content-box;"><canvas id=' + id + '_grayscaleCanvas' + '></canvas><div style="text-align:center;"><span>' + this.l10n.getConstant('Grayscale') + '</span></div></div>' });
+                template: '<div class="filter-wrapper"><canvas id=' + id + '_grayscaleCanvas' + '></canvas><div><span>' + this.l10n.getConstant('Grayscale') + '</span></div></div>' });
         }
         if (isNullOrUndefined(parent.toolbar) || !isCustomized || (parent.toolbar && parent.toolbar.indexOf('Sepia') > -1)) {
             toolbarItems.push({ id: id + '_sepia', prefixIcon: 'e-icons e-none', cssClass: 'top-icon e-none',
                 tooltipText: this.l10n.getConstant('Sepia'), align: 'Center',
-                template: '<div class="filter-wrapper" style="box-sizing: content-box;"><canvas id=' + id + '_sepiaCanvas' + '></canvas><div style="text-align:center;"><span>' + this.l10n.getConstant('Sepia') + '</span></div></div>' });
+                template: '<div class="filter-wrapper"><canvas id=' + id + '_sepiaCanvas' + '></canvas><div><span>' + this.l10n.getConstant('Sepia') + '</span></div></div>' });
         }
         if (isNullOrUndefined(parent.toolbar) || !isCustomized || (parent.toolbar && parent.toolbar.indexOf('Invert') > -1)) {
             toolbarItems.push({ id: id + '_invert', prefixIcon: 'e-icons e-none', cssClass: 'top-icon e-none',
                 tooltipText: this.l10n.getConstant('Invert'), align: 'Center',
-                template: '<div class="filter-wrapper" style="box-sizing: content-box;"><canvas id=' + id + '_invertCanvas' + '></canvas><div style="text-align:center;"><span>' + this.l10n.getConstant('Invert') + '</span></div></div>' });
+                template: '<div class="filter-wrapper"><canvas id=' + id + '_invertCanvas' + '></canvas><div><span>' + this.l10n.getConstant('Invert') + '</span></div></div>' });
         }
         var tempToolbarItems = this.processToolbar('center');
         for (var i = 0, len = tempToolbarItems.length; i < len; i++) {
@@ -32072,6 +32224,7 @@ var ToolbarModule = /** @__PURE__ @class */ (function () {
         var splitWords;
         var actionType;
         var actionArgs;
+        var isRedactClick = false;
         if (parent.activeObj.shape !== undefined) {
             splitWords = parent.activeObj.shape.split('-');
         }
@@ -32375,7 +32528,7 @@ var ToolbarModule = /** @__PURE__ @class */ (function () {
                     parent.notify('draw', { prop: 'triggerFrameChange', value: { prevFrameSettings: parent.tempFrameObj, obj: { frameChangeEventArgs: null } } });
                     break;
                 case 'redact':
-                    parent.currObjType.isRedact = true;
+                    parent.currObjType.isRedact = isRedactClick = true;
                     parent.drawingShape = 'redact';
                     if (isNullOrUndefined(parent.activeObj.redactBlur)) {
                         parent.activeObj.redactBlur = 20;
@@ -32388,7 +32541,7 @@ var ToolbarModule = /** @__PURE__ @class */ (function () {
                     this.redactSlider(parent.activeObj.redactType);
                     break;
                 case 'pixelate':
-                    parent.currObjType.isRedact = true;
+                    parent.currObjType.isRedact = isRedactClick = true;
                     parent.drawingShape = 'redact';
                     parent.notify('selection', { prop: 'annotate', value: { shape: 'redact' } });
                     if (parent.activeObj.redactType === 'blur') {
@@ -32422,7 +32575,7 @@ var ToolbarModule = /** @__PURE__ @class */ (function () {
                     }
                     break;
                 case 'redactblur':
-                    parent.currObjType.isRedact = true;
+                    parent.currObjType.isRedact = isRedactClick = true;
                     parent.drawingShape = 'redact';
                     parent.notify('selection', { prop: 'annotate', value: { shape: 'redact' } });
                     parent.notify('shape', { prop: 'setRedactType', onPropertyChange: false,
@@ -32457,6 +32610,10 @@ var ToolbarModule = /** @__PURE__ @class */ (function () {
                     }
                     break;
             }
+            if (isRedactClick) {
+                parent.notify('draw', { prop: 'updateTempObjColl' });
+                parent.notify('draw', { prop: 'updateTempPointColl' });
+            }
         }
     };
     ToolbarModule.prototype.updateRedactType = function (value) {