@syncfusion/ej2-image-editor 28.2.3 → 29.1.33

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

@@ -2930,7 +2930,7 @@ class Draw {
                 }
             }
             else {
-                canvasDraw.lineWidth = 0;
+                canvasDraw.lineWidth = 1;
             }
             let textStyle = '';
             if (bold) {
@@ -6827,9 +6827,6 @@ class Filter {
             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') {
@@ -6906,18 +6903,6 @@ class Filter {
         let splitWords = this.lowerContext.filter.split(' ');
         let values = [];
         const brightness = this.getFilterValue(this.adjustmentLevel.brightness);
-        const 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;
-                const 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;
-            }
-        }
         let saturate;
         let bright;
         let saturatePercent;
@@ -9182,6 +9167,48 @@ class Selection {
             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;
         }
     }
     getModuleName() {
@@ -12070,7 +12097,7 @@ class Selection {
             parent.cursor : 'default';
         const tempCursor = parent.upperCanvas.style.cursor;
         if (parent.isResize) {
-            this.performEnterAction();
+            this.performEnterAction(e);
             parent.upperCanvas.style.cursor = 'default';
             return;
         }
@@ -12708,9 +12735,10 @@ class Selection {
                     }
                     parent.notify('toolbar', { prop: 'update-toolbar-items', onPropertyChange: false });
                     if (!this.isFhdEditing) {
+                        const 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';
@@ -20628,13 +20656,16 @@ class Transform {
     }
     straightenImage(degree) {
         const parent = this.parent;
+        const 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();
+        }
     }
 }
 
@@ -22571,6 +22602,9 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends Component {
             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]) {
@@ -22659,22 +22693,24 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends Component {
         }
         this.element.style.width = this.width;
         this.element.style.height = this.height;
-        const 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;' }
-        }));
+        const 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;`;
+        const canvasWrapper = this.element.appendChild(canvasWrapperElement);
         const dragObj = { key: 'DragText' };
         this.notify('toolbar', { prop: 'getLocaleText', onPropertyChange: false, value: { obj: dragObj } });
         const dropObj = { key: 'DropText' };
         this.notify('toolbar', { prop: 'getLocaleText', onPropertyChange: false, value: { obj: dropObj } });
         const browseObj = { key: 'BrowseText' };
         this.notify('toolbar', { prop: 'getLocaleText', onPropertyChange: false, value: { obj: browseObj } });
-        const dropAreaElement = this.createElement('div', { id: this.element.id + '_dropArea', className: 'e-ie-drop-area', attrs: { style: 'position: relative;' } });
-        const dropIconElement = this.createElement('span', { className: 'e-ie-drop-icon e-icons e-image', attrs: { style: 'position: absolute;' } });
-        const dropContentElement = this.createElement('span', { className: 'e-ie-drop-content', attrs: { style: 'position: absolute; display: none;' } });
+        const dropAreaElement = this.createElement('div', { id: this.element.id + '_dropArea', className: 'e-ie-drop-area' });
+        dropAreaElement.style.position = 'relative';
+        const dropIconElement = this.createElement('span', { className: 'e-ie-drop-icon e-icons e-image' });
+        dropIconElement.style.position = 'absolute';
+        const dropContentElement = this.createElement('span', { className: 'e-ie-drop-content' });
+        dropContentElement.style.cssText = 'position: absolute; display: none;';
         dropContentElement.textContent = dragObj['value'] + ' ';
-        const minDropContentElem = this.createElement('span', { className: 'e-ie-min-drop-content', attrs: { style: 'position: absolute;' } });
+        const minDropContentElem = this.createElement('span', { className: 'e-ie-min-drop-content' });
+        minDropContentElem.style.position = 'absolute';
         minDropContentElem.textContent = dropObj['value'] + ' ';
         const dropAnchorElement = this.createElement('a', { id: this.element.id + '_dropBrowse', className: 'e-ie-drop-browse' });
         dropAnchorElement.textContent = browseObj['value'];
@@ -22827,6 +22863,12 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends Component {
             value: { x: x, y: y, obj: obj } });
         return obj['inRange'];
     }
+    manageActiveAction() {
+        this.applyShapes();
+        if (this.activeObj.shape && this.activeObj.shape.indexOf('crop') > -1) {
+            this.discard();
+        }
+    }
     /**
      * Clears the current selection performed in the image editor.
      *
@@ -22868,6 +22910,8 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends Component {
      *
      */
     flip(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' } });
@@ -23055,6 +23099,10 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends Component {
             if (Browser.isDevice && straightenObj['bool']) {
                 this.notify('crop', { prop: 'resizeWrapper' });
             }
+            const saveDialog = this.element.querySelector('#' + this.element.id + '_saveDialog');
+            if (saveDialog) {
+                getComponent(saveDialog, 'dialog').close();
+            }
             const actionArgs = { action: 'reset', actionEventArgs: null };
             this.triggerEditCompleteEvent(actionArgs);
         }
@@ -23075,6 +23123,7 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends Component {
      */
     rotate(degree) {
         const obj = { isRotate: false };
+        this.applyShapes();
         if (degree === 90 || degree === -90) {
             this.updateImageTransformColl(degree === 90 ? 'rotateright' : 'rotateleft');
         }
@@ -23164,7 +23213,7 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends Component {
                 this.discard();
                 return;
             }
-            this.applyShapes();
+            this.manageActiveAction();
             this.freeHandDraw(value);
             const prevObj = { shapeSettingsObj: {} };
             this.notify('selection', { prop: 'updatePrevShapeSettings', onPropertyChange: false, value: { obj: prevObj } });
@@ -23231,6 +23280,7 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends Component {
         const 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();
@@ -23254,6 +23304,7 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends Component {
         const 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();
@@ -23279,6 +23330,7 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends Component {
         const 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 } });
@@ -23310,7 +23362,7 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends Component {
         }
         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();
@@ -23337,6 +23389,7 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends Component {
         const 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 } });
@@ -23371,6 +23424,7 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends Component {
         const 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 } });
@@ -23398,6 +23452,7 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends Component {
         let isImage = false;
         const isPointsInRange = this.allowShape(x, y);
         if (!this.disabled && this.isImageLoaded && (isPointsInRange || (isNullOrUndefined(x) && isNullOrUndefined(y)))) {
+            this.manageActiveAction();
             const length = 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 } });
@@ -23445,7 +23500,7 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends Component {
                 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']) {
                 const tempFontSize = this.activeObj.textSettings.fontSize;
@@ -23505,7 +23560,7 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends Component {
     selectShape(id) {
         this.applyShapes();
         const 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'];
@@ -23527,7 +23582,7 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends Component {
             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');
     }
     /**
@@ -23586,7 +23641,7 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends Component {
     selectRedact(id) {
         this.applyShapes();
         const 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'];
@@ -23602,7 +23657,7 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends Component {
      */
     deleteRedact(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');
     }
     /**
@@ -23617,7 +23672,7 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends Component {
     updateRedact(setting, isSelected) {
         this.applyShapes();
         const 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 } });
@@ -23667,7 +23722,7 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends Component {
      */
     finetuneImage(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');
@@ -23684,7 +23739,7 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends Component {
      */
     applyImageFilter(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');
@@ -23701,7 +23756,7 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends Component {
      * @returns {void}.
      */
     undo() {
-        this.applyShapes();
+        this.manageActiveAction();
         this.notify('undo-redo', { prop: 'undo', onPropertyChange: false });
         this.notify('draw', { prop: 'redrawDownScale' });
     }
@@ -23713,7 +23768,7 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends Component {
      * @returns {void}.
      */
     redo() {
-        this.applyShapes();
+        this.manageActiveAction();
         this.notify('undo-redo', { prop: 'redo', onPropertyChange: false });
         this.notify('draw', { prop: 'redrawDownScale' });
     }
@@ -23738,8 +23793,9 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends Component {
      */
     resize(width, height, isAspectRatio) {
         let 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 } });
             const destPoints = { startX: this.img.destLeft, startY: this.img.destTop, width: this.img.destWidth,
                 height: this.img.destHeight };
             if (isAspectRatio) {
@@ -23764,7 +23820,12 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends Component {
             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 } });
@@ -23789,7 +23850,7 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends Component {
      * @returns {boolean}.
      */
     drawFrame(frameType, color, gradientColor, size, inset, offset, borderRadius, frameLineStyle, lineCount) {
-        this.applyShapes();
+        this.manageActiveAction();
         let isFrame = false;
         const obj = { frameChangeEventArgs: null };
         color = color ? color : '#fff';
@@ -23834,6 +23895,10 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends Component {
             this.tempFrameZoomLevel = null;
         }
         this.notify('draw', { prop: 'redrawDownScale' });
+        const ctxTbar = this.element.querySelector('.e-contextual-toolbar-wrapper');
+        if (ctxTbar) {
+            ctxTbar.classList.add('e-hide');
+        }
         return isFrame;
     }
     /**
@@ -24662,10 +24727,11 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends Component {
      *
      * @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, isFinalApply) {
+    okBtn(isMouseDown, isFinalApply, isResize) {
         if (isFinalApply) {
             this.noPushUndo = false;
             const tempActiveObj = { activePoint: { startX: 0, startY: 0, endX: 0, endY: 0, width: 0, height: 0 },
@@ -24764,6 +24830,45 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends Component {
             }
             this.isAspectRatio = false;
         }
+        else if (isResize) {
+            let 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' } });
+            const obj = this.cancelCropSelection;
+            if ((obj && isAspectRatio)) {
+                obj.previousObj.aspectWidth = obj.currentObj.aspectWidth = this.aspectWidth;
+                obj.previousObj.aspectHeight = obj.currentObj.aspectHeight = this.aspectHeight;
+                obj.previousCropObj = extend({}, this.cropObj, {}, true);
+                obj.currentCropObj = extend({}, this.cropObj, {}, true);
+                this.notify('draw', { prop: 'updateCropSelObj' });
+            }
+            this.cancelCropSelection = null;
+            this.isAspectRatio = false;
+        }
         const selElem = this.element.querySelector('.e-contextual-toolbar-wrapper .e-toolbar-item.e-selected');
         const obj = { bool: false };
         this.notify('selection', { prop: 'getFreehandDrawEditing', onPropertyChange: false, value: { obj: obj } });
@@ -26333,6 +26438,7 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends Component {
         const 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
@@ -27117,6 +27223,48 @@ class ToolbarModule {
             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;
         }
     }
     updatePrivateVariables() {
@@ -27244,9 +27392,9 @@ class ToolbarModule {
         const parent = this.parent;
         const 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;' }
-            }));
+            const contextualToolbarArea = parent.createElement('div', { id: id + '_contextualToolbarArea', className: 'e-contextual-toolbar-wrapper e-hide' });
+            contextualToolbarArea.style.position = 'absolute';
+            parent.element.appendChild(contextualToolbarArea);
             const toolbarArea = document.getElementById(id + '_contextualToolbarArea');
             const toolbar = parent.createElement('div', { id: id + '_contextualToolbar' });
             toolbarArea.appendChild(toolbar);
@@ -28121,8 +28269,9 @@ class ToolbarModule {
     enableDisableCloneBtn(toolbarId, obj) {
         const parent = this.parent;
         let isDummyTextClick = false;
+        const 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;
         }
@@ -28309,8 +28458,9 @@ class ToolbarModule {
         const quality = ['Good', 'Great', 'Highest'];
         parent.element.appendChild(parent.createElement('div', { id: id + '_saveDialog' }));
         const dialogContent = parent.createElement('div', {
-            id: id + '_dialogContent', attrs: { style: 'display: flex;' }
+            id: id + '_dialogContent'
         });
+        dialogContent.style.display = 'flex';
         const dialogImgContent = dialogContent.appendChild(parent.createElement('div', {
             id: id + '_dialogImgContent', className: 'e-ie-dlg-img-content'
         }));
@@ -28747,7 +28897,7 @@ class ToolbarModule {
         }
         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)) {
                 const spanWidth = document.createElement('span');
                 spanWidth.innerHTML = this.l10n.getConstant('Straighten');
                 toolbarItems.push({ id: id + '_straightenSpan', cssClass: 'e-ie-straighten-span', template: spanWidth, align: 'Center' });
@@ -29966,7 +30116,9 @@ class ToolbarModule {
                 }
                 break;
             case 'shapes':
-                parent.noPushUndo = true;
+                if (!parent.isPublicMethod) {
+                    parent.noPushUndo = true;
+                }
                 if (Browser.isDevice) {
                     this.initMainToolbar(false, true, true);
                 }
@@ -30300,37 +30452,37 @@ class ToolbarModule {
         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>' });
         }
         const tempToolbarItems = this.processToolbar('center');
         for (let i = 0, len = tempToolbarItems.length; i < len; i++) {
@@ -31920,6 +32072,7 @@ class ToolbarModule {
         let splitWords;
         let actionType;
         let actionArgs;
+        let isRedactClick = false;
         if (parent.activeObj.shape !== undefined) {
             splitWords = parent.activeObj.shape.split('-');
         }
@@ -32223,7 +32376,7 @@ class ToolbarModule {
                     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;
@@ -32236,7 +32389,7 @@ class ToolbarModule {
                     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') {
@@ -32270,7 +32423,7 @@ class ToolbarModule {
                     }
                     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,
@@ -32305,6 +32458,10 @@ class ToolbarModule {
                     }
                     break;
             }
+            if (isRedactClick) {
+                parent.notify('draw', { prop: 'updateTempObjColl' });
+                parent.notify('draw', { prop: 'updateTempPointColl' });
+            }
         }
     }
     updateRedactType(value) {