@syncfusion/ej2-image-editor 26.2.14 → 27.1.50

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

@@ -17,6 +17,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
+/* eslint-disable max-len */
 import { Component, NotifyPropertyChanges, Property, addClass, removeClass, extend } from '@syncfusion/ej2-base';
 import { Event, EventHandler, getComponent, isNullOrUndefined, getUniqueID, setValue } from '@syncfusion/ej2-base';
 import { Dialog, createSpinner } from '@syncfusion/ej2-popups';
@@ -151,7 +152,7 @@ var ImageEditor = /** @class */ (function (_super) {
         // current object's ui interaction properties
         /** @hidden */
         _this.currObjType = { shape: '', isDragging: false, isActiveObj: false, isText: false, isInitialText: false, isLine: false, isInitialLine: false,
-            isCustomCrop: false, isZoomed: false, isUndoZoom: false, isUndoAction: false, isFiltered: false, isSave: false, isResize: false };
+            isCustomCrop: false, isZoomed: false, isUndoZoom: false, isUndoAction: false, isFiltered: false, isSave: false, isResize: false, isRedact: false };
         /** @hidden */
         _this.objColl = [];
         /** @hidden */
@@ -263,6 +264,25 @@ var ImageEditor = /** @class */ (function (_super) {
         _this.shapeColl = [];
         /** @hidden */
         _this.isKBDNavigation = false;
+        /** @hidden */
+        _this.isMaskImage = false;
+        /** @hidden */
+        _this.tempObjColl = [];
+        /** @hidden */
+        _this.tempPointColl = [];
+        /** @hidden */
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        _this.tempShapeColl = [];
+        /** @hidden */
+        _this.isImageUpdated = false;
+        /** @hidden */
+        _this.noRedact = false;
+        /** @hidden */
+        _this.tempRedactBlur = 50;
+        /** @hidden */
+        _this.tempRedactPixel = 40;
+        _this.tempToolbarHeight = 0;
+        _this.tempToolbar = [];
         ImageEditor_1.Inject(Crop, Draw, Selection, Transform, Export, ToolbarModule);
         ImageEditor_1.Inject(UndoRedo);
         ImageEditor_1.Inject(Filter);
@@ -297,6 +317,7 @@ var ImageEditor = /** @class */ (function (_super) {
     ImageEditor.prototype.preRender = function () {
         // pre render code snippets
         this.element.id = this.element.id || getUniqueID('ej2-image-editor');
+        this.isSafari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent);
         if (Browser.isDevice) {
             this.element.classList.add('e-device');
         }
@@ -310,6 +331,7 @@ var ImageEditor = /** @class */ (function (_super) {
      * @returns {void}
      */
     ImageEditor.prototype.render = function () {
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
         if (this.isAngular) {
             var originalElement = this.element;
             var clonedElement = originalElement.cloneNode(true);
@@ -714,6 +736,8 @@ var ImageEditor = /** @class */ (function (_super) {
         this.notify('toolbar', { prop: 'getLocaleText', onPropertyChange: false, value: { obj: browseObj } });
         var supportObj = { key: 'SupportText' };
         this.notify('toolbar', { prop: 'getLocaleText', onPropertyChange: false, value: { obj: supportObj } });
+        var andObj = { key: 'And' };
+        this.notify('toolbar', { prop: 'getLocaleText', onPropertyChange: false, value: { obj: andObj } });
         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;' } });
@@ -729,7 +753,7 @@ var ImageEditor = /** @class */ (function (_super) {
         dropAnchorElement.href = '';
         minDropAnchorElem.href = '';
         var dropInfoElement = this.createElement('span', { className: 'e-ie-drop-info', attrs: { position: 'absolute' } });
-        dropInfoElement.textContent = supportObj['value'] + ' SVG, PNG, and JPG';
+        dropInfoElement.textContent = supportObj['value'] + ' SVG, PNG, ' + andObj['value'] + ' JPG';
         var dropUploader = dropAreaElement.appendChild(this.createElement('input', {
             id: this.element.id + '_dropfileUpload', className: 'e-fileUpload e-image-upload'
         }));
@@ -743,6 +767,9 @@ var ImageEditor = /** @class */ (function (_super) {
         this.lowerCanvas = canvasWrapper.appendChild(this.createElement('canvas', {
             id: this.element.id + '_lowerCanvas', attrs: { name: 'canvasImage' }
         }));
+        this.maskCanvas = canvasWrapper.appendChild(this.createElement('canvas', {
+            id: this.element.id + '_maskCanvas', attrs: { name: 'canvasImage' }
+        }));
         this.upperCanvas = canvasWrapper.appendChild(this.createElement('canvas', {
             id: this.element.id + '_upperCanvas', attrs: { name: 'canvasImage' }
         }));
@@ -767,12 +794,15 @@ var ImageEditor = /** @class */ (function (_super) {
         uploader.style.display = 'none';
         this.textArea.setAttribute('spellcheck', 'false');
         this.textArea.style.lineHeight = 'normal';
-        this.lowerCanvas.style.width = this.upperCanvas.style.width = this.inMemoryCanvas.style.width = '100%';
-        this.lowerCanvas.style.height = this.upperCanvas.style.height = this.inMemoryCanvas.style.height = '100%';
-        this.upperCanvas.style.position = this.lowerCanvas.style.position = this.textArea.style.position = 'absolute';
+        this.lowerCanvas.style.width = this.upperCanvas.style.width = this.maskCanvas.style.width =
+            this.inMemoryCanvas.style.width = '100%';
+        this.lowerCanvas.style.height = this.upperCanvas.style.height = this.maskCanvas.style.height =
+            this.inMemoryCanvas.style.height = '100%';
+        this.upperCanvas.style.position = this.lowerCanvas.style.position = this.maskCanvas.style.position =
+            this.textArea.style.position = 'absolute';
         this.textArea.style.backgroundColor = 'transparent';
         this.textArea.style.display = 'none';
-        this.textArea.style.resize = 'none';
+        this.maskCanvas.style.display = this.textArea.style.resize = 'none';
         this.lowerContext = this.lowerCanvas.getContext('2d');
         this.baseImg = this.createElement('img', {
             id: this.element.id + '_orgImg', attrs: { name: 'Image', crossorigin: 'anonymous' }
@@ -909,41 +939,66 @@ var ImageEditor = /** @class */ (function (_super) {
         this.notify('transform', { prop: 'flip', value: { direction: direction } });
         this.notify('draw', { prop: 'redrawDownScale' });
         this.notify('undo-redo', { prop: 'updateCurrUrc', value: { type: 'ok' } });
+        var actionArgs = { action: 'flip', actionEventArgs: this.editCompleteArgs };
+        this.triggerEditCompleteEvent(actionArgs);
     };
     /**
      * Returns an image as ImageData to load it in to a canvas.
      *
+     * @param {boolean} [includeAnnotations=true] - Optional. Specifies whether the returned image data should include annotations. The default value is true, meaning annotations are included.
+     *
      * @remarks
      * The data returned from this method is directly drawn in a canvas using 'putImageData' method.
      * And then the user can get the base64 string from the canvas using toDataURL method.
      *
      * @returns {ImageData}.
      */
-    ImageEditor.prototype.getImageData = function () {
-        var obj = { canvas: null };
-        this.applyShapes();
-        this.notify('export', { prop: 'exportToCanvas', value: { object: obj } });
-        return obj['canvas'].getContext('2d').getImageData(0, 0, obj['canvas'].width, obj['canvas'].height);
+    ImageEditor.prototype.getImageData = function (includeAnnotations) {
+        includeAnnotations = isNullOrUndefined(includeAnnotations) ? true : includeAnnotations;
+        var imageData;
+        if (includeAnnotations) {
+            var obj = { canvas: null };
+            this.applyShapes();
+            this.notify('export', { prop: 'exportToCanvas', value: { object: obj } });
+            imageData = obj['canvas'].getContext('2d').getImageData(0, 0, obj['canvas'].width, obj['canvas'].height);
+        }
+        else if (this.isMaskImage && this.element.getAttribute('data-value') === 'mask-drawing') {
+            imageData = this.getData(true);
+            this.updateColl('reset');
+        }
+        else {
+            imageData = this.getData();
+            this.notify('draw', { prop: 'render-image', value: { isMouseWheel: false } });
+        }
+        return imageData;
     };
     /**
      *  Opens an image as URL or ImageData for editing in an image editor.
      *
      * @param {string | ImageData } data - Specifies url of the image or image data.
+     * @param {boolean} [resetChanges=true] - Optional. Determines whether to reset existing changes when opening the image. The default value is true, which resets all existing changes.
+     * @param {ImageSettings} imageSettings - Optional. Specifies the image setting that contains background color to apply when opening a transparent image. The default value of background color is an empty string (''), meaning no background color is applied by default when a transparent image is opened.
      *
      * @remarks
      * The supported file types are JPG, JPEG, PNG, and SVG.
      *
      * @returns {void}.
      */
-    ImageEditor.prototype.open = function (data) {
-        if (isNullOrUndefined(data)) {
-            return;
+    ImageEditor.prototype.open = function (data, resetChanges, imageSettings) {
+        resetChanges = isNullOrUndefined(resetChanges) ? true : resetChanges;
+        if (resetChanges) {
+            if (isNullOrUndefined(data)) {
+                return;
+            }
+            var dropArea = document.getElementById(this.element.id + '_dropArea');
+            if (dropArea) {
+                dropArea.style.display = 'none';
+            }
+            this.notify('draw', { prop: 'open', value: { data: data } });
         }
-        var dropArea = document.getElementById(this.element.id + '_dropArea');
-        if (dropArea) {
-            dropArea.style.display = 'none';
+        else {
+            this.updateImage(data, imageSettings ? imageSettings.backgroundColor : null);
         }
-        this.notify('draw', { prop: 'open', value: { data: data } });
     };
     /**
      * Reset all the changes done in an image editor and revert to original image.
@@ -954,12 +1009,14 @@ var ImageEditor = /** @class */ (function (_super) {
      * @returns {void}.
      */
     ImageEditor.prototype.reset = function () {
+        this.updateColl('reset');
         var obj = { isErrorImage: false };
         this.notify('draw', { prop: 'getErrorImage', value: { obj: obj } });
         if (!this.disabled && !obj['isErrorImage']) {
             this.clearContext(this.inMemoryContext);
             this.clearContext(this.lowerContext);
             this.clearContext(this.upperContext);
+            this.notify('shape', { prop: 'setRedactType', onPropertyChange: false, value: { redactType: 'blur' } });
             this.notify('shape', { prop: 'refreshActiveObj', onPropertyChange: false });
             this.notify('toolbar', { prop: 'refresh-toolbar', onPropertyChange: false, value: { type: 'main',
                     isApplyBtn: false, isCropping: false, isZooming: null, cType: null } });
@@ -968,7 +1025,6 @@ var ImageEditor = /** @class */ (function (_super) {
                 this.notify('toolbar', { prop: 'create-bottom-toolbar', onPropertyChange: false });
             }
             var isImageLoaded = this.isImageLoaded;
-            // eslint-disable-next-line max-len
             this.currObjType.isUndoAction = this.isUndoRedo = this.togglePan = this.togglePen = this.isImageLoaded = this.isFinetuning = false;
             this.isCircleCrop = this.isCropTab = false;
             this.objColl = [];
@@ -1002,7 +1058,7 @@ var ImageEditor = /** @class */ (function (_super) {
             this.tempFrameObj = { type: 'none', color: '#fff', size: 20, inset: 20, offset: 20, radius: 0, amount: 1, border: 'solid', gradientColor: '' };
             this.currObjType = { shape: '', isDragging: false, isActiveObj: false, isText: false, isInitialText: false, isLine: false,
                 isInitialLine: false, isCustomCrop: false, isZoomed: false, isUndoZoom: false,
-                isUndoAction: false, isFiltered: false, isSave: false, isResize: false };
+                isUndoAction: false, isFiltered: false, isSave: false, isResize: false, isRedact: false };
             this.cropObj = { cropZoom: 0, defaultZoom: 0, totalPannedPoint: { x: 0, y: 0 }, totalPannedClientPoint: { x: 0, y: 0 },
                 totalPannedInternalPoint: { x: 0, y: 0 }, tempFlipPanPoint: { x: 0, y: 0 }, activeObj: {},
                 rotateFlipColl: [], degree: 0, currFlipState: '', straighten: 0, zoomFactor: 0, previousZoomValue: 0,
@@ -1019,11 +1075,21 @@ var ImageEditor = /** @class */ (function (_super) {
             this.transform.straighten = 0;
             this.cancelCropSelection = null;
             this.aspectWidth = this.aspectHeight = null;
-            this.isResize = false;
+            this.isResize = this.isMaskImage = false;
             this.drawingShape = null;
             this.isShapeDrawing = this.noPushUndo = this.isUndoRedoStack = this.isKBDNavigation = false;
             this.shapeColl = [];
+            this.tempObjColl = [];
+            this.tempPointColl = [];
+            this.tempShapeColl = [];
+            this.isImageUpdated = false;
+            this.tempToolbarHeight = 0;
+            this.tempToolbar = [];
+            this.tempRedactBlur = 50;
+            this.tempRedactPixel = 40;
             var obj_1 = { initialZoomValue: false };
+            this.editCompleteArgs = null;
+            this.isFinetuneBtnClick = false;
             this.notify('draw', { prop: 'getInitialZoomValue', onPropertyChange: false, value: { obj: obj_1 } });
             if (obj_1['initialZoomValue']) {
                 this.setProperties({ zoomSettings: { zoomFactor: obj_1['initialZoomValue'] } }, true);
@@ -1057,6 +1123,8 @@ var ImageEditor = /** @class */ (function (_super) {
             if (Browser.isDevice && straightenObj['bool']) {
                 this.notify('crop', { prop: 'resizeWrapper' });
             }
+            var actionArgs = { action: 'reset', actionEventArgs: null };
+            this.triggerEditCompleteEvent(actionArgs);
         }
     };
     /**
@@ -1080,6 +1148,8 @@ var ImageEditor = /** @class */ (function (_super) {
         }
         this.notify('transform', { prop: 'rotate', value: { degree: degree, obj: obj } });
         this.notify('draw', { prop: 'redrawDownScale' });
+        var actionArgs = { action: 'rotate', actionEventArgs: this.editCompleteArgs };
+        this.triggerEditCompleteEvent(actionArgs);
         return obj['isRotate'];
     };
     /**
@@ -1158,8 +1228,19 @@ var ImageEditor = /** @class */ (function (_super) {
      */
     ImageEditor.prototype.freehandDraw = function (value) {
         if (!this.disabled && this.isImageLoaded) {
+            if (!value && this.isMaskImage) {
+                this.discard();
+                return;
+            }
             this.applyShapes();
             this.freeHandDraw(value);
+            var prevObj = { shapeSettingsObj: {} };
+            this.notify('selection', { prop: 'updatePrevShapeSettings', onPropertyChange: false, value: { obj: prevObj } });
+            var shapeSettings = prevObj['shapeSettingsObj'];
+            shapeSettings.type = ShapeType.FreehandDraw;
+            var shapeChangingArgs = { cancel: false, action: 'insert', previousShapeSettings: shapeSettings,
+                currentShapeSettings: shapeSettings };
+            this.notify('freehand-draw', { prop: 'triggerShapeChanging', value: { shapeChangingArgs: shapeChangingArgs } });
         }
     };
     /**
@@ -1220,7 +1301,7 @@ var ImageEditor = /** @class */ (function (_super) {
             isEllipse = true;
             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.notify('draw', { prop: 'redrawDownScale' });
+            this.editCompleted();
         }
         return isEllipse;
     };
@@ -1243,7 +1324,7 @@ var ImageEditor = /** @class */ (function (_super) {
             isLine = true;
             this.notify('shape', { prop: 'drawLine', onPropertyChange: false, value: { startX: startX, startY: startY, endX: endX,
                     endY: endY, strokeWidth: strokeWidth, strokeColor: strokeColor, isSelected: isSelected } });
-            this.notify('draw', { prop: 'redrawDownScale' });
+            this.editCompleted();
         }
         return isLine;
     };
@@ -1269,7 +1350,7 @@ var ImageEditor = /** @class */ (function (_super) {
             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 } });
-            this.notify('draw', { prop: 'redrawDownScale' });
+            this.editCompleted();
         }
         return isArrow;
     };
@@ -1300,7 +1381,7 @@ var ImageEditor = /** @class */ (function (_super) {
             this.applyShapes();
             this.notify('shape', { prop: 'drawPath', onPropertyChange: false, value: { pointColl: pointColl,
                     strokeWidth: strokeWidth, strokeColor: strokeColor, isSelected: isSelected } });
-            this.notify('draw', { prop: 'redrawDownScale' });
+            this.editCompleted();
         }
         return isPath;
     };
@@ -1316,16 +1397,18 @@ var ImageEditor = /** @class */ (function (_super) {
      * @param {string} fillColor - Specifies the fill color of the rectangle.
      * @param {number} degree - Specifies the degree to rotate the rectangle.
      * @param {boolean} isSelected - Specifies to show the rectangle in the selected state.
+     * @param {number} borderRadius - Specifies the radius to apply border radius to rectangle.
      * @returns {boolean}.
      */
-    ImageEditor.prototype.drawRectangle = function (x, y, width, height, strokeWidth, strokeColor, fillColor, degree, isSelected) {
+    ImageEditor.prototype.drawRectangle = function (x, y, width, height, strokeWidth, strokeColor, fillColor, degree, isSelected, borderRadius) {
         var isRectangle = false;
         var isPointsInRange = this.allowShape(x, y);
         if (!this.disabled && this.isImageLoaded && (isPointsInRange || (isNullOrUndefined(x) && isNullOrUndefined(y)))) {
             isRectangle = true;
             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 } });
-            this.notify('draw', { prop: 'redrawDownScale' });
+                    strokeWidth: strokeWidth, strokeColor: strokeColor, fillColor: fillColor, degree: degree, isSelected: isSelected,
+                    radius: borderRadius } });
+            this.editCompleted();
         }
         return isRectangle;
     };
@@ -1344,17 +1427,21 @@ var ImageEditor = /** @class */ (function (_super) {
      * @param {string} color - Specifies font color of the text.
      * @param {boolean} isSelected - Specifies to show the text in the selected state.
      * @param {number} degree - Specifies the degree to rotate the text.
+     * @param {fillColor} fillColor - Specifies the background Color of the text.
+     * @param {string} strokeColor - Specifies the outline color of the text annotation.
+     * @param {number} strokeWidth - Specifies the outline stroke width of the text annotation.
      * @returns {boolean}.
      *
      */
-    ImageEditor.prototype.drawText = function (x, y, text, fontFamily, fontSize, bold, italic, color, isSelected, degree) {
+    ImageEditor.prototype.drawText = function (x, y, text, fontFamily, fontSize, bold, italic, color, isSelected, degree, fillColor, strokeColor, strokeWidth) {
         var isText = false;
         var isPointsInRange = this.allowShape(x, y);
         if (!this.disabled && this.isImageLoaded && (isPointsInRange || (isNullOrUndefined(x) && isNullOrUndefined(y)))) {
             isText = true;
             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 } });
-            this.notify('draw', { prop: 'redrawDownScale' });
+                    fontSize: fontSize, bold: bold, italic: italic, color: color, isSelected: isSelected, degree: degree, fillColor: fillColor,
+                    outlineColor: strokeColor, outlineWidth: strokeWidth } });
+            this.editCompleted();
         }
         return isText;
     };
@@ -1381,13 +1468,97 @@ var ImageEditor = /** @class */ (function (_super) {
             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 } });
-            this.notify('draw', { prop: 'redrawDownScale' });
+            this.editCompleted();
             if (this.objColl.length > length_1) {
                 isImage = true;
             }
         }
         return isImage;
     };
+    /**
+     * This method is used to update the existing shapes by changing its height, width, color, and font styles in the component.
+     * Use 'getShapeSettings' method to get the shape which is then passed to change the options of a shape.
+     * {% codeBlock src='image-editor/updateShape/index.md' %}{% endcodeBlock %}
+     *
+     * @param {ShapeSettings} setting - Specifies the shape settings to be updated for the shape on an image.
+     * @param {boolean} isSelected - Specifies to show the shape in the selected state.
+     * @returns {boolean}.
+     *
+     */
+    ImageEditor.prototype.updateShape = function (setting, isSelected) {
+        var obj = { isSelected: false };
+        var isTextArea = false;
+        var freehandObj = { bool: false };
+        if (isNullOrUndefined(setting.id)) {
+            if (setting.strokeColor) {
+                this.activeObj.strokeSettings.strokeColor = setting.strokeColor;
+            }
+            if (setting.fillColor) {
+                this.activeObj.strokeSettings.fillColor = setting.fillColor;
+            }
+            if (setting.strokeWidth) {
+                this.activeObj.strokeSettings.strokeWidth = setting.strokeWidth;
+            }
+            if (setting.index) {
+                this.activeObj.order = setting.index;
+            }
+            if (setting.type === 'FreehandDraw' && setting.strokeWidth) {
+                this.notify('freehand-draw', { prop: 'setPenStrokeWidth', onPropertyChange: false, value: { value: setting.strokeWidth } });
+            }
+        }
+        else {
+            if (setting.type.toLowerCase() === 'text' && (this.textArea.style.display === 'block' ||
+                this.textArea.style.display === 'inline-block')) {
+                this.okBtn(null, true);
+                isTextArea = true;
+            }
+            this.notify('shape', { prop: 'selectShape', onPropertyChange: false, value: { id: setting.id, obj: obj } });
+            this.notify('selection', { prop: 'getFreehandDrawEditing', onPropertyChange: false, value: { obj: freehandObj } });
+            if (obj['isSelected']) {
+                var tempFontSize = this.activeObj.textSettings.fontSize;
+                this.notify('shape', { prop: 'updateShapeChangeEventArgs', onPropertyChange: false,
+                    value: { shapeSettings: setting } });
+                if (this.activeObj.shape === 'text' && tempFontSize) {
+                    var diff = this.activeObj.textSettings.fontSize - tempFontSize;
+                    if (diff !== 0) {
+                        this.activeObj.activePoint.height += diff;
+                        this.activeObj.activePoint.startY -= (diff / 2);
+                        this.activeObj.activePoint.endY += (diff / 2);
+                        this.notify('draw', { prop: 'updateActiveObject', onPropertyChange: false, value: { actPoint: this.activeObj.activePoint, obj: this.activeObj,
+                                isMouseMove: null, x: null, y: null } });
+                    }
+                }
+                var activeObj = extend({}, this.activeObj, {}, true);
+                this.notify('shape', { prop: 'refreshActiveObj', onPropertyChange: false });
+                this.notify('draw', { prop: 'render-image', value: { isMouseWheel: null, isPreventClearRect: null, isFrame: null } });
+                this.upperContext.clearRect(0, 0, this.upperCanvas.width, this.upperCanvas.height);
+                if (activeObj.shape) {
+                    this.notify('draw', { prop: 'drawObject', onPropertyChange: false, value: { canvas: 'duplicate', obj: activeObj } });
+                }
+                if (this.activeObj.shape === 'text') {
+                    this.notify('toolbar', { prop: 'editText', onPropertyChange: false });
+                }
+                if (freehandObj['bool']) {
+                    this.notify('undo-redo', { prop: 'setPreventUR', value: { bool: true } });
+                }
+                this.okBtn(isSelected, true);
+                if (freehandObj['bool']) {
+                    this.notify('undo-redo', { prop: 'setPreventUR', value: { bool: false } });
+                }
+                this.upperContext.clearRect(0, 0, this.upperCanvas.width, this.upperCanvas.height);
+                this.editCompleteArgs = { action: 'shape-update', currentShapeSettings: setting };
+                this.editCompleted('shape-customize');
+                if (isTextArea) {
+                    this.enableTextEditing();
+                }
+                if (isSelected) {
+                    this.noRedact = true;
+                    this.selectShape(setting.id);
+                }
+            }
+        }
+        return obj['isSelected'];
+    };
     /**
      * Select a shape based on the given shape id.
      * Use 'getShapeSettings' method to get the shape id which is then passed to perform selection.
@@ -1402,7 +1573,8 @@ var ImageEditor = /** @class */ (function (_super) {
         this.applyShapes();
         var obj = { isSelected: false };
         this.notify('shape', { prop: 'selectShape', onPropertyChange: false, value: { id: id, obj: obj } });
-        this.notify('draw', { prop: 'redrawDownScale' });
+        this.editCompleted('shape-select');
+        this.noRedact = false;
         return obj['isSelected'];
     };
     /**
@@ -1416,9 +1588,14 @@ var ImageEditor = /** @class */ (function (_super) {
      *
      */
     ImageEditor.prototype.deleteShape = function (id) {
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        var shape = this.getShapeSetting(id);
+        if (shape.type === 'Redact') {
+            return;
+        }
         this.applyShapes();
         this.notify('shape', { prop: 'deleteShape', onPropertyChange: false, value: { id: id } });
-        this.notify('draw', { prop: 'redrawDownScale' });
+        this.editCompleted('shape-delete');
     };
     /**
      * Get particular shapes details based on id of the shape which is drawn on an image editor.
@@ -1448,7 +1625,92 @@ var ImageEditor = /** @class */ (function (_super) {
         var obj = { shapeDetailsColl: [] };
         this.notify('shape', { prop: 'getShapeSettings', onPropertyChange: false, value: { obj: obj } });
         this.notify('draw', { prop: 'redrawDownScale' });
-        return obj['shapeDetailsColl'];
+        /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
+        return obj.shapeDetailsColl.filter(function (item) { return item.type !== 'redact'; });
+    };
+    /**
+     * Get all the shapes details which is drawn on an image editor.
+     *
+     * @returns {RedactSettings[]}.
+     */
+    ImageEditor.prototype.getRedacts = function () {
+        this.applyShapes();
+        var obj = { shapeDetailsColl: [] };
+        this.notify('shape', { prop: 'getRedactSettings', onPropertyChange: false, value: { obj: obj } });
+        this.notify('draw', { prop: 'redrawDownScale' });
+        /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
+        return obj.shapeDetailsColl.filter(function (item) { return item.type !== 'redact'; });
+    };
+    /**
+     * Select a redaction based on the given redaction id.
+     * Use 'getRedacts' method to get the shape id which is then passed to perform selection.
+     *
+     *
+     * @param {string} id - Specifies the shape id to select a redact on an image.
+     * @returns {boolean}.
+     *
+     */
+    ImageEditor.prototype.selectRedact = function (id) {
+        this.applyShapes();
+        var obj = { isSelected: false };
+        this.notify('shape', { prop: 'selectShape', onPropertyChange: false, value: { id: id, obj: obj } });
+        this.editCompleted('redact-select');
+        this.noRedact = false;
+        return obj['isSelected'];
+    };
+    /**
+     * Deletes a redaction based on the given shape id.
+     * Use 'getRedacts' method to get the redaaction id which is then passed to perform deletion.
+     *
+     *
+     * @param {string} id - Specifies the redaction id to delete the redaction on an image.
+     * @returns {void}.
+     *
+     */
+    ImageEditor.prototype.deleteRedact = function (id) {
+        this.applyShapes();
+        this.notify('shape', { prop: 'deleteShape', onPropertyChange: false, value: { id: id } });
+        this.editCompleted('redact-delete');
+    };
+    /**
+     * This method is used to update the existing redacts by changing its height, width, blur, and pixel size in the component.
+     * Use 'getRedacts' method to get the redacts which is then passed to change the options of a redacts.
+     *
+     * @param {RedactSettings} setting - Specifies the redact settings to be updated for the shape on an image.
+     * @param {boolean} isSelected - Specifies to show the redacts in the selected state.
+     * @returns {boolean}.
+     *
+     */
+    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 } });
+        if (obj['isSelected']) {
+            this.notify('shape', { prop: 'updateShapeChangeEventArgs', onPropertyChange: false,
+                value: { shapeSettings: setting } });
+            if (setting.blurIntensity) {
+                this.activeObj.redactBlur = setting.blurIntensity;
+            }
+            if (setting.pixelSize) {
+                this.activeObj.redactPixelate = setting.pixelSize;
+            }
+            this.activeObj.redactType = setting.type.toLowerCase() === 'blur' ? 'blur' : 'pixelate';
+            var activeObj = extend({}, this.activeObj, {}, true);
+            this.notify('shape', { prop: 'refreshActiveObj', onPropertyChange: false });
+            this.notify('draw', { prop: 'render-image', value: { isMouseWheel: null, isPreventClearRect: null, isFrame: null } });
+            this.upperContext.clearRect(0, 0, this.upperCanvas.width, this.upperCanvas.height);
+            if (activeObj.shape) {
+                this.notify('draw', { prop: 'drawObject', onPropertyChange: false, value: { canvas: 'duplicate', obj: activeObj } });
+            }
+            this.okBtn(isSelected, true);
+            this.upperContext.clearRect(0, 0, this.upperCanvas.width, this.upperCanvas.height);
+            this.editCompleteArgs = { action: 'redact-update', currentShapeSettings: setting };
+            this.editCompleted('redact-customize');
+            if (isSelected) {
+                this.selectRedact(setting.id);
+            }
+        }
+        return obj['isSelected'];
     };
     /**
      * To refresh the Canvas Wrapper.
@@ -1474,7 +1736,8 @@ var ImageEditor = /** @class */ (function (_super) {
         if (!this.disabled && this.isImageLoaded) {
             this.applyShapes();
             this.notify('filter', { prop: 'finetuneImage', value: { value: value, option: finetuneOption } });
-            this.notify('draw', { prop: 'redrawDownScale' });
+            this.editCompleteArgs = { finetune: finetuneOption, value: value };
+            this.editCompleted('fine-tune');
         }
     };
     /**
@@ -1490,7 +1753,8 @@ var ImageEditor = /** @class */ (function (_super) {
         if (!this.disabled && this.isImageLoaded) {
             this.applyShapes();
             this.notify('filter', { prop: 'applyImageFilter', value: { option: filterOption.toString() } });
-            this.notify('draw', { prop: 'redrawDownScale' });
+            this.editCompleteArgs = { filter: filterOption };
+            this.editCompleted('filter');
             this.canvasFilter = this.lowerContext.filter;
             this.notify('undo-redo', { prop: 'updateCurrUrc', value: { type: 'ok' } });
         }
@@ -1660,88 +1924,6 @@ var ImageEditor = /** @class */ (function (_super) {
         }
         return isStraightened;
     };
-    /**
-     * This method is used to update the existing shapes by changing its height, width, color, and font styles in the component.
-     * Use 'getShapeSettings' method to get the shape which is then passed to change the options of a shape.
-     * {% codeBlock src='image-editor/updateShape/index.md' %}{% endcodeBlock %}
-     *
-     * @param {ShapeSettings} setting - Specifies the shape settings to be updated for the shape on an image.
-     * @param {boolean} isSelected - Specifies to show the shape in the selected state.
-     * @returns {boolean}.
-     *
-     */
-    ImageEditor.prototype.updateShape = function (setting, isSelected) {
-        var obj = { isSelected: false };
-        var isTextArea = false;
-        var freehandObj = { bool: false };
-        if (isNullOrUndefined(setting.id)) {
-            if (setting.strokeColor) {
-                this.activeObj.strokeSettings.strokeColor = setting.strokeColor;
-            }
-            if (setting.fillColor) {
-                this.activeObj.strokeSettings.fillColor = setting.fillColor;
-            }
-            if (setting.strokeWidth) {
-                this.activeObj.strokeSettings.strokeWidth = setting.strokeWidth;
-            }
-            if (setting.index) {
-                this.activeObj.order = setting.index;
-            }
-            if (setting.type === 'FreehandDraw' && setting.strokeWidth) {
-                this.notify('freehand-draw', { prop: 'setPenStrokeWidth', onPropertyChange: false, value: { value: setting.strokeWidth } });
-            }
-        }
-        else {
-            if (setting.type.toLowerCase() === 'text' && (this.textArea.style.display === 'block' ||
-                this.textArea.style.display === 'inline-block')) {
-                this.okBtn(null, true);
-                isTextArea = true;
-            }
-            this.notify('shape', { prop: 'selectShape', onPropertyChange: false, value: { id: setting.id, obj: obj } });
-            this.notify('selection', { prop: 'getFreehandDrawEditing', onPropertyChange: false, value: { obj: freehandObj } });
-            if (obj['isSelected']) {
-                var tempFontSize = this.activeObj.textSettings.fontSize;
-                this.notify('shape', { prop: 'updateShapeChangeEventArgs', onPropertyChange: false,
-                    value: { shapeSettings: setting } });
-                if (this.activeObj.shape === 'text' && tempFontSize) {
-                    var diff = this.activeObj.textSettings.fontSize - tempFontSize;
-                    if (diff !== 0) {
-                        this.activeObj.activePoint.height += diff;
-                        this.activeObj.activePoint.startY -= (diff / 2);
-                        this.activeObj.activePoint.endY += (diff / 2);
-                        this.notify('draw', { prop: 'updateActiveObject', onPropertyChange: false, value: { actPoint: this.activeObj.activePoint, obj: this.activeObj,
-                                isMouseMove: null, x: null, y: null } });
-                    }
-                }
-                var activeObj = extend({}, this.activeObj, {}, true);
-                this.notify('shape', { prop: 'refreshActiveObj', onPropertyChange: false });
-                this.notify('draw', { prop: 'render-image', value: { isMouseWheel: null, isPreventClearRect: null, isFrame: null } });
-                this.upperContext.clearRect(0, 0, this.upperCanvas.width, this.upperCanvas.height);
-                if (activeObj.shape) {
-                    this.notify('draw', { prop: 'drawObject', onPropertyChange: false, value: { canvas: 'duplicate', obj: activeObj } });
-                }
-                if (this.activeObj.shape === 'text') {
-                    this.notify('toolbar', { prop: 'editText', onPropertyChange: false });
-                }
-                if (freehandObj['bool']) {
-                    this.notify('undo-redo', { prop: 'setPreventUR', value: { bool: true } });
-                }
-                this.okBtn(isSelected, true);
-                if (freehandObj['bool']) {
-                    this.notify('undo-redo', { prop: 'setPreventUR', value: { bool: false } });
-                }
-                this.upperContext.clearRect(0, 0, this.upperCanvas.width, this.upperCanvas.height);
-                this.notify('draw', { prop: 'redrawDownScale' });
-                if (isTextArea) {
-                    this.enableTextEditing();
-                }
-                if (isSelected) {
-                    this.selectShape(setting.id);
-                }
-            }
-        }
-        return obj['isSelected'];
-    };
     /**
      * Duplicates a shape based on the given shape ID in the ImageEditor.
      * Use 'getShapeSettings' method to get the shape and then pass a shapeId from the returned shape to clone a shape.
@@ -1788,6 +1970,7 @@ var ImageEditor = /** @class */ (function (_super) {
             this.noPushUndo = true;
             this.okBtn();
             this.noPushUndo = false;
+            this.noRedact = true;
             this.selectShape(activeObj.currIndex);
             activeObj.order = this.activeObj.order;
         }
@@ -1844,8 +2027,14 @@ var ImageEditor = /** @class */ (function (_super) {
      * This method applies the actions performed after enabling annotation drawings, ensuring that the drawn annotations are applied to the image.
      */
     ImageEditor.prototype.apply = function () {
-        this.closeOverlayTbar();
-        this.okBtn(null, true);
+        if (this.isMaskImage) {
+            this.discard();
+        }
+        else {
+            this.updateColl('reset');
+            this.closeOverlayTbar();
+            this.okBtn(null, true);
+        }
     };
     /**
      * Discards the operations performed in the Image Editor, such as annotation drawings.
@@ -1855,6 +2044,7 @@ var ImageEditor = /** @class */ (function (_super) {
      * This method discards the actions performed after enabling annotation drawings, ensuring that the drawn annotations are not applied to the image.
      */
     ImageEditor.prototype.discard = function () {
+        this.updateColl('reset');
         this.notify('draw', { prop: 'performCancel', value: { isContextualToolbar: this.closeOverlayTbar(), isFinalCancel: true } });
     };
     /**
@@ -1888,6 +2078,10 @@ var ImageEditor = /** @class */ (function (_super) {
                 this.notify('toolbar', { prop: 'refresh-toolbar', onPropertyChange: false, value: { type: 'text',
                         isApplyBtn: null, isCropping: null, isZooming: null, cType: null } });
             }
+            else if (this.currObjType.shape === 'redact') {
+                this.notify('toolbar', { prop: 'refresh-toolbar', onPropertyChange: false, value: { type: 'redact',
+                        isApplyBtn: null, isCropping: null, isZooming: null, cType: null } });
+            }
             else {
                 this.notify('toolbar', { prop: 'refresh-toolbar', onPropertyChange: false, value: { type: 'shapes',
                         isApplyBtn: null, isCropping: null, isZooming: null, cType: null } });
@@ -1907,6 +2101,7 @@ var ImageEditor = /** @class */ (function (_super) {
      *
      */
     ImageEditor.prototype.bringToFront = function (shapeId) {
+        this.noRedact = true;
         if (this.selectShape(shapeId)) {
             this.updateShapeOrder(shapeId, 'bringToFront');
             this.apply();
@@ -1921,6 +2116,7 @@ var ImageEditor = /** @class */ (function (_super) {
      *
      */
     ImageEditor.prototype.bringForward = function (shapeId) {
+        this.noRedact = true;
         if (this.selectShape(shapeId)) {
             this.updateShapeOrder(shapeId, 'bringForward');
             this.apply();
@@ -1935,6 +2131,7 @@ var ImageEditor = /** @class */ (function (_super) {
      *
      */
     ImageEditor.prototype.sendToBack = function (shapeId) {
+        this.noRedact = true;
         if (this.selectShape(shapeId)) {
             this.updateShapeOrder(shapeId, 'sendToBack');
             this.apply();
@@ -1949,6 +2146,7 @@ var ImageEditor = /** @class */ (function (_super) {
      *
      */
     ImageEditor.prototype.sendBackward = function (shapeId) {
+        this.noRedact = true;
         if (this.selectShape(shapeId)) {
             this.updateShapeOrder(shapeId, 'sendBackward');
             this.apply();
@@ -1978,7 +2176,291 @@ var ImageEditor = /** @class */ (function (_super) {
             dropArea.style.display = 'block';
         }
     };
+    // AI related codes
+    /**
+     * Enables overlay drawing to erase objects in an image editor. The eraser tool assists in selecting the mask image.
+     *
+     * @remarks
+     * The selection UI is based on the 'theme' property.
+     *
+     * @param {number} strokeWidth - Specifies the stroke width of the drawing.
+     * @param {string} color - Specifies the color of the drawing.
+     * @hidden
+     * @returns {void}.
+     *
+     */
+    ImageEditor.prototype.selectMaskImage = function (strokeWidth, color) {
+        strokeWidth = strokeWidth ? strokeWidth : 10;
+        color = color ? color : '#512da880';
+        this.applyShapes();
+        this.isMaskImage = true;
+        this.updateColl('empty');
+        this.enableDisableToolbar(true);
+        this.update();
+        this.activeObj.strokeSettings.strokeWidth = strokeWidth;
+        this.notify('freehand-draw', { prop: 'setPenStrokeWidth', onPropertyChange: false, value: { value: strokeWidth } });
+        this.activeObj.strokeSettings.strokeColor = color;
+        this.notify('freehand-draw', { prop: 'freeHandDraw', onPropertyChange: false, value: { value: true } });
+        this.maskCanvas.style.display = 'block';
+    };
+    ImageEditor.prototype.enableDisableToolbar = function (value) {
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        var toolbar;
+        var elem = document.getElementById(this.element.id + '_toolbar');
+        if (elem) {
+            toolbar = getComponent(elem, 'toolbar');
+            if (toolbar) {
+                toolbar.disable(value);
+            }
+        }
+        elem = document.getElementById(this.element.id + '_bottomToolbar');
+        if (elem) {
+            toolbar = getComponent(elem, 'toolbar');
+            if (toolbar) {
+                toolbar.disable(value);
+            }
+        }
+    };
+    ImageEditor.prototype.updateImage = function (data, imageBackgroundColor) {
+        var _this = this;
+        if (data || imageBackgroundColor || imageBackgroundColor === '') {
+            var prevCropObj_1 = extend({}, this.cropObj, {}, true);
+            var object = { currObj: {} };
+            this.notify('filter', { prop: 'getCurrentObj', onPropertyChange: false, value: { object: object } });
+            var prevObj_1 = object['currObj'];
+            prevObj_1.objColl = extend([], this.objColl, [], true);
+            prevObj_1.pointColl = extend([], this.pointColl, [], true);
+            prevObj_1.afterCropActions = extend([], this.afterCropActions, [], true);
+            var selPointCollObj = { selPointColl: null };
+            this.notify('freehand-draw', { prop: 'getSelPointColl', onPropertyChange: false, value: { obj: selPointCollObj } });
+            prevObj_1.selPointColl = extend([], selPointCollObj['selPointColl'], [], true);
+            if (data) {
+                this.isImageUpdated = true;
+                if (typeof (data) !== 'string') {
+                    var canvas = this.createElement('canvas');
+                    canvas.width = data.width;
+                    canvas.height = data.height;
+                    canvas.getContext('2d').putImageData(data, 0, 0);
+                    data = canvas.toDataURL();
+                }
+                this.baseImg.src = data;
+                setTimeout(function () {
+                    if (_this.cropObj.straighten !== 0) {
+                        _this.notify('toolbar', { prop: 'performCropTransformClick', value: { shape: 'crop-' + 'custom' } });
+                        _this.noPushUndo = true;
+                        _this.crop();
+                        _this.noPushUndo = false;
+                    }
+                    else {
+                        _this.notify('draw', { prop: 'render-image', value: { isMouseWheel: false } });
+                    }
+                    _this.isImageUpdated = false;
+                    if (!imageBackgroundColor) {
+                        _this.notify('undo-redo', { prop: 'updateUndoRedoColl', onPropertyChange: false, value: { operation: 'updateImage', previousObj: prevObj_1,
+                                previousObjColl: prevObj_1.objColl, previousPointColl: prevObj_1.pointColl,
+                                previousSelPointColl: prevObj_1.selPointColl, previousCropObj: prevCropObj_1,
+                                previousText: null, currentText: null, previousFilter: null, isCircleCrop: null
+                            } });
+                        _this.notify('undo-redo', { prop: 'updateCurrUrc', value: { type: 'ok' } });
+                    }
+                }, 100);
+            }
+            if (imageBackgroundColor || imageBackgroundColor === '') {
+                this.notify('draw', { prop: 'imageBackgroundColor', onPropertyChange: false, value: { color: imageBackgroundColor } });
+                this.notify('draw', { prop: 'render-image', value: { isMouseWheel: false } });
+                if (!data) {
+                    this.notify('undo-redo', { prop: 'updateUndoRedoColl', onPropertyChange: false, value: { operation: 'bgColor', previousObj: prevObj_1,
+                            previousObjColl: prevObj_1.objColl, previousPointColl: prevObj_1.pointColl, previousSelPointColl: prevObj_1.selPointColl,
+                            previousCropObj: prevCropObj_1, previousText: null, currentText: null, previousFilter: null, isCircleCrop: null
+                        } });
+                    this.notify('undo-redo', { prop: 'updateCurrUrc', value: { type: 'ok' } });
+                }
+            }
+            if (data && imageBackgroundColor) {
+                this.notify('undo-redo', { prop: 'updateUndoRedoColl', onPropertyChange: false, value: { operation: 'updateImage', previousObj: prevObj_1,
+                        previousObjColl: prevObj_1.objColl, previousPointColl: prevObj_1.pointColl, previousSelPointColl: prevObj_1.selPointColl,
+                        previousCropObj: prevCropObj_1, previousText: null, currentText: null, previousFilter: null, isCircleCrop: null
+                    } });
+                this.notify('undo-redo', { prop: 'updateCurrUrc', value: { type: 'ok' } });
+            }
+        }
+    };
+    ImageEditor.prototype.editCompleted = function (type) {
+        this.notify('draw', { prop: 'redrawDownScale' });
+        var actionArgs = { action: type ? type : 'shape-insert',
+            actionEventArgs: this.editCompleteArgs };
+        this.triggerEditCompleteEvent(actionArgs);
+    };
+    ImageEditor.prototype.updateColl = function (type) {
+        if (!this.isMaskImage) {
+            return;
+        }
+        if (type === 'empty') {
+            this.tempToolbarHeight = this.toolbarHeight;
+            this.tempToolbar = this.toolbar ? extend([], this.toolbar, [], true) : null;
+            this.tempObjColl = extend([], this.objColl, [], true);
+            this.tempPointColl = extend([], this.pointColl, [], true);
+            this.tempShapeColl = extend([], this.shapeColl, [], true);
+            this.objColl = [];
+            this.pointColl = [];
+            this.shapeColl = [];
+            this.freehandCounter = 0;
+            this.notify('freehand-draw', { prop: 'setCurrentFreehandDrawIndex',
+                value: { value: 0 } });
+            this.notify('draw', { prop: 'render-image', value: { isMouseWheel: false } });
+        }
+        else if (type === 'reset') {
+            this.objColl = this.tempObjColl;
+            this.pointColl = this.tempPointColl;
+            this.shapeColl = this.tempShapeColl;
+            this.freehandCounter = this.pointColl.length;
+            this.notify('freehand-draw', { prop: 'setCurrentFreehandDrawIndex',
+                value: { value: this.freehandCounter } });
+            this.enableDisableToolbar(false);
+            if (this.cropObj.straighten !== 0) {
+                this.notify('toolbar', { prop: 'performCropTransformClick', value: { shape: 'crop-' + 'custom' } });
+                this.noPushUndo = true;
+                this.crop();
+                this.noPushUndo = false;
+            }
+            this.notify('draw', { prop: 'render-image', value: { isMouseWheel: false } });
+            this.isMaskImage = false;
+            this.upperContext.globalCompositeOperation = 'source-over';
+            this.maskCanvas.style.display = 'none';
+            this.activeObj.strokeSettings = { strokeColor: '#fff', fillColor: '', strokeWidth: null,
+                radius: null, outlineColor: '', outlineWidth: null };
+            this.notify('shape', { prop: 'setStrokeSettings', value: { strokeSettings: this.activeObj.strokeSettings,
+                    strokeColor: '#fff', fillColor: '', strokeWidth: null, outlineWidth: null } });
+            this.notify('freehand-draw', { prop: 'setPenStrokeWidth', onPropertyChange: false, value: { value: 2 } });
+            this.notify('freehand-draw', { prop: 'setMasking', onPropertyChange: false, value: { value: false } });
+        }
+    };
     // Toolbar related codes
+    ImageEditor.prototype.resetToolbar = function () {
+        if (this.toolbarHeight !== this.tempToolbarHeight && !((isNullOrUndefined(this.toolbar) ||
+            (this.toolbar && this.toolbar.length > 0)
+            || !isNullOrUndefined(this.toolbarTemplate)))) {
+            this.toolbarHeight = this.tempToolbarHeight;
+            this.notify('toolbar', { prop: 'setToolbarHeight', value: { height: this.toolbarHeight } });
+            this.toolbar = this.tempToolbar;
+            if (!this.toolbarTemplate) {
+                this.notify('toolbar', { prop: 'create-toolbar', onPropertyChange: false });
+                this.notify('toolbar', { prop: 'create-contextual-toolbar', onPropertyChange: false });
+            }
+            this.update();
+        }
+    };
+    ImageEditor.prototype.getData = function (isMaskImage) {
+        if (isMaskImage) {
+            this.resetToolbar();
+        }
+        var objColl = extend([], this.objColl, null, true);
+        var pointColl = extend([], this.pointColl, null, true);
+        /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
+        var shapeColl = extend([], this.shapeColl, null, true);
+        if (isMaskImage) {
+            this.notify('shape', { prop: 'updateShapeColl', onPropertyChange: false });
+            for (var i = 0; i < this.freehandCounter; i++) {
+                this.pointColl[i].strokeColor = '#fff';
+            }
+        }
+        else {
+            this.objColl = [];
+            this.pointColl = [];
+            this.shapeColl = [];
+            this.freehandCounter = 0;
+        }
+        var frameType = this.frameObj.type;
+        this.frameObj.type = 'none';
+        var aspectWidth = this.aspectWidth;
+        var aspectHeight = this.aspectHeight;
+        this.aspectWidth = this.aspectHeight = null;
+        var straighten = this.cropObj.straighten;
+        this.togglePen = false;
+        this.notify('toolbar', { prop: 'performCropTransformClick', value: { shape: 'crop-' + 'custom' } });
+        var tempDestPoints = extend({}, this.img, {}, true);
+        var tempCropObj = extend({}, this.cropObj, {}, true);
+        var tempSel = extend({}, this.activeObj, {}, true);
+        var tempTransform = extend({}, this.transform, {}, true);
+        var panPoint = extend({}, this.panPoint, {}, true);
+        if (straighten !== 0) {
+            this.setStraighten(0);
+        }
+        var point = this.activeObj.activePoint;
+        point.startX = this.img.destLeft;
+        point.startY = this.img.destTop;
+        point.width = this.img.destWidth;
+        point.height = this.img.destHeight;
+        point.endX = point.startX + point.width;
+        point.endY = point.startY + point.height;
+        this.notify('draw', { prop: 'updateActiveObject', onPropertyChange: false, value: { actPoint: point, obj: this.activeObj,
+                isMouseMove: null, x: null, y: null } });
+        this.noPushUndo = true;
+        this.crop();
+        this.noPushUndo = false;
+        this.isCropTab = false;
+        this.notify('shape', { prop: 'refreshActiveObj', onPropertyChange: false });
+        this.notify('crop', { prop: 'resetZoom', onPropertyChange: false });
+        this.isCropTab = true;
+        var afterCropActions = extend([], this.afterCropActions, [], true);
+        var coll = extend([], this.rotateFlipColl, [], true);
+        this.notify('crop', { prop: 'revertTransform', value: { type: 'initial', coll: coll } });
+        var imageData = this.getImageData();
+        if (isMaskImage) {
+            var canvas = this.createElement('canvas');
+            var ctx = canvas.getContext('2d');
+            canvas.width = imageData.width;
+            canvas.height = imageData.height;
+            ctx.fillRect(0, 0, canvas.width, canvas.height);
+            if (this.pointColl.length > 0) {
+                var obj = { width: 0, height: 0 };
+                this.notify('crop', { prop: 'calcRatio', onPropertyChange: false,
+                    value: { obj: obj, dimension: { width: canvas.width, height: canvas.height } } });
+                var ratio = obj;
+                this.notify('export', { prop: 'drawAnnotation', value: { context: ctx, ratio: ratio } });
+            }
+            this.upperContext.clearRect(0, 0, this.upperCanvas.width, this.upperCanvas.height);
+            imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
+        }
+        this.notify('crop', { prop: 'revertTransform', value: { type: 'reverse', coll: coll } });
+        this.notify('shape', { prop: 'refreshActiveObj', onPropertyChange: false });
+        this.afterCropActions = afterCropActions;
+        if (!isMaskImage) {
+            this.objColl = objColl;
+            this.pointColl = pointColl;
+            this.shapeColl = shapeColl;
+            this.freehandCounter = this.pointColl.length;
+        }
+        this.frameObj.type = frameType;
+        this.aspectWidth = aspectWidth;
+        this.aspectHeight = aspectHeight;
+        this.notify('toolbar', { prop: 'performCropTransformClick', value: { shape: 'crop-' + 'custom' } });
+        if (straighten !== 0) {
+            this.setStraighten(straighten);
+        }
+        this.img = tempDestPoints;
+        this.cropObj = tempCropObj;
+        this.activeObj = tempSel;
+        this.transform = tempTransform;
+        this.notify('transform', { prop: 'zoomAction', onPropertyChange: false,
+            value: { zoomFactor: 0.1, zoomPoint: null, isResize: null } });
+        this.notify('transform', { prop: 'zoomAction', onPropertyChange: false,
+            value: { zoomFactor: -0.1, zoomPoint: null, isResize: null } });
+        if (this.transform.degree !== 0) {
+            this.panPoint.currentPannedPoint = { x: panPoint.totalPannedClientPoint.x,
+                y: panPoint.totalPannedClientPoint.y };
+            this.notify('transform', { prop: 'drawPannedImage', value: { xDiff: panPoint.totalPannedClientPoint.x,
+                    yDiff: panPoint.totalPannedClientPoint.y } });
+            this.panPoint.currentPannedPoint = { x: 0, y: 0 };
+            this.notify('transform', { prop: 'setTempPanMove', value: { point: null } });
+        }
+        this.noPushUndo = true;
+        this.crop();
+        this.noPushUndo = false;
+        this.transform.straighten = 0;
+        this.notify('draw', { prop: 'render-image', value: { isMouseWheel: false } });
+        return imageData;
+    };
     ImageEditor.prototype.applyShapes = function () {
         if (this.isUndoRedoStack) {
             return;
@@ -2248,12 +2730,16 @@ var ImageEditor = /** @class */ (function (_super) {
                 shapeSettings.type = ShapeType.FreehandDraw;
             }
             var shapeChangedArgs = { action: 'apply', currentShapeSettings: extend({}, shapeSettings, {}, true) };
-            if (isFinalApply || this.isShapeDrawing) {
+            if (!this.currObjType.isRedact && (isFinalApply || this.isShapeDrawing)) {
                 if (this.isShapeDrawing) {
                     shapeChangedArgs.action = 'draw-end';
                 }
                 this.trigger('shapeChange', shapeChangedArgs);
             }
+            this.editCompleteArgs = shapeChangedArgs;
+            if (this.currObjType.isRedact) {
+                this.currObjType.isRedact = false;
+            }
         }
         if (aspectIcon || nonAspectIcon) {
             var obj_2 = { width: null, height: null };
@@ -2329,7 +2815,12 @@ var ImageEditor = /** @class */ (function (_super) {
         }
         else if (this.togglePen) {
             this.freeHandDraw(false);
-            this.notify('undo-redo', { prop: 'updateCurrUrc', value: { type: 'ok' } });
+            if (!this.isMaskImage) {
+                var widthObj = { penStrokeWidth: null };
+                this.notify('freehand-draw', { prop: 'getPenStrokeWidth', onPropertyChange: false, value: { obj: widthObj } });
+                this.notify('undo-redo', { prop: 'updateCurrUrc', value: { type: 'ok' } });
+                this.notify('freehand-draw', { prop: 'setPenStrokeWidth', onPropertyChange: false, value: { value: widthObj['penStrokeWidth'] } });
+            }
             this.notify('draw', { prop: 'clearOuterCanvas', onPropertyChange: false, value: { context: this.lowerContext } });
             this.notify('draw', { prop: 'clearOuterCanvas', onPropertyChange: false, value: { context: this.upperContext } });
         }
@@ -2344,13 +2835,12 @@ var ImageEditor = /** @class */ (function (_super) {
             this.notify('draw', { prop: 'clearOuterCanvas', onPropertyChange: false, value: { context: this.lowerContext } });
             this.notify('draw', { prop: 'clearOuterCanvas', onPropertyChange: false, value: { context: this.upperContext } });
         }
-        else if (sliderWrap || this.currObjType.isFiltered) {
+        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 } });
-            if (obj_4['value'] !== this.lowerContext.filter && (!sliderWrap ||
-                !sliderWrap.classList.contains('e-ie-finetune-slider-wrap'))) {
+            if (!sliderWrap || sliderWrap.parentElement.previousElementSibling.textContent !== 'Opacity') {
                 this.notify('undo-redo', { prop: 'updateCurrUrc', value: { type: 'ok' } });
             }
             if ((this.activeObj.activePoint.width !== 0 && this.activeObj.activePoint.height !== 0) ||
@@ -2383,6 +2873,17 @@ var ImageEditor = /** @class */ (function (_super) {
                         previousFilter: null, isCircleCrop: null
                     } });
                 this.notify('draw', { prop: 'render-image', value: { isMouseWheel: null, isPreventClearRect: null, isFrame: true } });
+                var currFrameSettings = { type: this.toPascalCase(this.frameObj.type),
+                    color: this.frameObj.color, gradientColor: this.frameObj.gradientColor, size: this.frameObj.size,
+                    inset: this.frameObj.inset, offset: this.frameObj.offset, borderRadius: this.frameObj.radius,
+                    frameLineStyle: this.toPascalCase(this.frameObj.border), lineCount: this.frameObj.amount };
+                var prevFrameSettings = { type: this.toPascalCase(this.tempFrameObj.type),
+                    color: this.tempFrameObj.color, gradientColor: this.tempFrameObj.gradientColor, size: this.tempFrameObj.size,
+                    inset: this.tempFrameObj.inset, offset: this.tempFrameObj.offset, borderRadius: this.tempFrameObj.radius,
+                    frameLineStyle: this.toPascalCase(this.tempFrameObj.border), lineCount: this.tempFrameObj.amount };
+                var frameChange = { cancel: false, previousFrameSetting: prevFrameSettings,
+                    currentFrameSetting: currFrameSettings };
+                this.editCompleteArgs = frameChange;
                 this.notify('undo-redo', { prop: 'updateCurrUrc', value: { type: 'ok' } });
                 this.tempFrameObj = extend({}, this.frameObj, {}, true);
             }
@@ -2391,19 +2892,29 @@ var ImageEditor = /** @class */ (function (_super) {
         if (!obj['isCropToolbar']) {
             this.notify('toolbar', { prop: 'refresh-toolbar', onPropertyChange: false, value: { type: 'main',
                     isApplyBtn: false, isCropping: null, isZooming: null, cType: null } });
+            this.currObjType.isRedact = false;
         }
         this.notify('draw', { prop: 'setNewPath', value: { bool: false } });
         this.transform.zoomFactor = this.transform.defaultZoomFactor;
         this.notify('selection', { prop: 'setCurrentDrawingShape', onPropertyChange: false, value: { value: '' } });
         this.isResizeOkBtn = false;
         this.notify('draw', { prop: 'redrawDownScale' });
-        this.isChangesSaved = false;
+        this.isChangesSaved = this.isFinetuneBtnClick = false;
         if (isFinalApply) {
             this.drawingShape = null;
             this.notify('draw', { prop: 'resetTempObjColl' });
             this.notify('draw', { prop: 'resetTempPointColl' });
         }
     };
+    ImageEditor.prototype.triggerEditCompleteEvent = function (args) {
+        if (args.action === 'shape-insert' && args.actionEventArgs &&
+            args.actionEventArgs.currentShapeSettings &&
+            args.actionEventArgs.currentShapeSettings.type.toString() === 'Redact') {
+            args.action = 'redact';
+        }
+        this.trigger('editComplete', args);
+        this.editCompleteArgs = null;
+    };
     /**
      * Handles the OK button operation
      *
@@ -2511,6 +3022,7 @@ var ImageEditor = /** @class */ (function (_super) {
     ImageEditor.prototype.setCurrAdjustmentValue = function (type, value) {
         var finetuneValueChanging = { finetune: this.getFinetuneOption(type), value: value, cancel: false };
         this.trigger('finetuneValueChanging', finetuneValueChanging);
+        this.editCompleteArgs = finetuneValueChanging;
         if (finetuneValueChanging.cancel) {
             return;
         }
@@ -2630,9 +3142,9 @@ var ImageEditor = /** @class */ (function (_super) {
                 toolbar_2.refreshOverflow();
             }
         }
-        // eslint-disable-next-line max-len
         var shapeChangedArgs = { action: type, currentShapeSettings: extend({}, shapeSettings, {}, true) };
         this.trigger('shapeChange', shapeChangedArgs);
+        this.editCompleteArgs = shapeChangedArgs;
     };
     /**
      * Apply Font style for text.
@@ -2715,6 +3227,7 @@ var ImageEditor = /** @class */ (function (_super) {
         var shapeChangedArgs = { action: 'font-family', currentShapeSettings: extend({}, shapeSettings, {}, true) };
         shapeChangedArgs.currentShapeSettings.fontFamily = this.textArea.style.fontFamily;
         this.trigger('shapeChange', shapeChangedArgs);
+        this.editCompleteArgs = shapeChangedArgs;
     };
     /**
      * Apply Font size for text.
@@ -2826,15 +3339,17 @@ var ImageEditor = /** @class */ (function (_super) {
         var shapeChangedArgs = { action: 'font-size', currentShapeSettings: extend({}, shapeSettings, {}, true) };
         shapeChangedArgs.currentShapeSettings.fontSize = this.activeObj.textSettings.fontSize;
         this.trigger('shapeChange', shapeChangedArgs);
+        this.editCompleteArgs = shapeChangedArgs;
     };
     /**
      * Apply Font color for text.
      *
      * @param { string } value - Specifies the selected color item value.
+     * @param { string } color - Specifies the selected color type value.
      * @hidden
      * @returns {void}.
      */
-    ImageEditor.prototype.updateFontColor = function (value) {
+    ImageEditor.prototype.updateFontColor = function (value, color) {
         this.notify('selection', { prop: 'setInitialTextEdit', value: { bool: false } });
         var isObjPushed = false;
         var collLength = this.objColl.length;
@@ -2860,12 +3375,19 @@ var ImageEditor = /** @class */ (function (_super) {
             this.objColl.pop();
         }
         if (this.textArea.style.display === 'none') {
-            this.activeObj.strokeSettings.strokeColor = value;
-            this.notify('shape', { prop: 'setStrokeSettings', value: { strokeSettings: null,
-                    strokeColor: this.activeObj.strokeSettings.strokeColor, fillColor: null, strokeWidth: null } });
+            if (color === 'Text') {
+                this.activeObj.strokeSettings.strokeColor = value;
+                this.notify('shape', { prop: 'setStrokeSettings', value: { strokeSettings: null,
+                        strokeColor: this.activeObj.strokeSettings.strokeColor, fillColor: null, strokeWidth: null } });
+            }
+            else {
+                this.activeObj.strokeSettings.fillColor = value;
+                this.notify('shape', { prop: 'setStrokeSettings', value: { strokeSettings: null,
+                        strokeColor: null, fillColor: this.activeObj.strokeSettings.fillColor, strokeWidth: null } });
+            }
             if (!this.togglePen) {
-                this.objColl.push(this.activeObj);
                 if (this.activeObj.activePoint.width !== 0 || this.activeObj.activePoint.height !== 0) {
+                    this.objColl.push(this.activeObj);
                     this.notify('undo-redo', { prop: 'updateUndoRedoColl', onPropertyChange: false,
                         value: { operation: 'shapeTransform', previousObj: prevObj, previousObjColl: prevObj.objColl,
                             previousPointColl: prevObj.pointColl, previousSelPointColl: prevObj.selPointColl,
@@ -2876,36 +3398,114 @@ var ImageEditor = /** @class */ (function (_super) {
             }
         }
         else if (this.textArea.style.display === 'block' || this.textArea.style.display === 'inline-block') {
-            this.textArea.style.color = value;
-            var temp = this.activeObj.strokeSettings.strokeColor;
-            this.activeObj.strokeSettings.strokeColor = value;
-            this.objColl.push(this.activeObj);
+            this.textArea.style[color === 'Text' ? 'color' : 'backgroundColor'] = value;
+            var temp = color === 'Text' ? this.activeObj.strokeSettings.strokeColor : this.activeObj.strokeSettings.fillColor;
+            this.activeObj.strokeSettings[color === 'Text' ? 'strokeColor' : 'fillColor'] = value;
             if (this.activeObj.activePoint.width !== 0 || this.activeObj.activePoint.height !== 0) {
+                this.objColl.push(this.activeObj);
                 this.notify('undo-redo', { prop: 'updateUndoRedoColl', onPropertyChange: false,
                     value: { operation: 'textAreaCustomization', previousObj: prevObj, previousObjColl: prevObj.objColl,
                         previousPointColl: prevObj.pointColl, previousSelPointColl: prevObj.selPointColl,
                         previousCropObj: prevCropObj, previousText: null,
                         currentText: null, previousFilter: null, isCircleCrop: null } });
+                this.objColl.pop();
             }
-            this.objColl.pop();
-            this.activeObj.strokeSettings.strokeColor = temp;
+            this.activeObj.strokeSettings[color === 'Text' ? 'strokeColor' : 'fillColor'] = temp;
         }
         else if (!this.togglePen) {
-            this.objColl.push(this.activeObj);
             if (this.activeObj.activePoint.width !== 0 || this.activeObj.activePoint.height !== 0) {
+                this.objColl.push(this.activeObj);
                 this.notify('undo-redo', { prop: 'updateUndoRedoColl', onPropertyChange: false,
                     value: { operation: 'shapeTransform', previousObj: prevObj, previousObjColl: prevObj.objColl,
                         previousPointColl: prevObj.pointColl, previousSelPointColl: prevObj.selPointColl,
                         previousCropObj: prevCropObj, previousText: null,
                         currentText: null, previousFilter: null, isCircleCrop: null } });
+                this.notify('selection', { prop: 'redrawShape', value: { obj: this.objColl[this.objColl.length - 1] } });
             }
+        }
+        var shapeChangedArgs = { action: 'font-color', currentShapeSettings: extend({}, shapeSettings, {}, true) };
+        shapeChangedArgs.currentShapeSettings.fillColor = value;
+        this.trigger('shapeChange', shapeChangedArgs);
+        this.editCompleteArgs = shapeChangedArgs;
+    };
+    /**
+     * Apply Font color for text.
+     *
+     * @param { string } value - Specifies the selected color item value.
+     * @hidden
+     * @returns {void}.
+     */
+    ImageEditor.prototype.updateStrokeTextColor = function (value) {
+        this.notify('selection', { prop: 'setInitialTextEdit', value: { bool: false } });
+        var isObjPushed = false;
+        var collLength = this.objColl.length;
+        this.notify('shape', { prop: 'pushActItemIntoObj' });
+        if (collLength !== this.objColl.length) {
+            isObjPushed = true;
+        }
+        var prevCropObj = extend({}, this.cropObj, {}, true);
+        var objt = { shapeSettingsObj: {} };
+        this.notify('selection', { prop: 'updatePrevShapeSettings', onPropertyChange: false, value: { obj: objt } });
+        var shapeSettings = objt['shapeSettingsObj'];
+        var object = { currObj: {} };
+        this.notify('filter', { prop: 'getCurrentObj', onPropertyChange: false, value: { object: object } });
+        var prevObj = object['currObj'];
+        prevObj.objColl = extend([], this.objColl, [], true);
+        prevObj.pointColl = extend([], this.pointColl, [], true);
+        prevObj.afterCropActions = extend([], this.afterCropActions, [], true);
+        var selPointCollObj = { selPointColl: null };
+        this.notify('freehand-draw', { prop: 'getSelPointColl', onPropertyChange: false,
+            value: { obj: selPointCollObj } });
+        prevObj.selPointColl = extend([], selPointCollObj['selPointColl'], [], true);
+        if (isObjPushed) {
+            this.objColl.pop();
+        }
+        if (this.textArea.style.display === 'none') {
+            this.activeObj.strokeSettings.outlineColor = value;
+            this.notify('shape', { prop: 'setStrokeSettings', value: { strokeSettings: null,
+                    strokeColor: null, fillColor: null, strokeWidth: null, outlineColor: this.activeObj.strokeSettings.outlineColor } });
+            if (!this.togglePen) {
+                if (this.activeObj.activePoint.width !== 0 || this.activeObj.activePoint.height !== 0) {
+                    this.objColl.push(this.activeObj);
+                    this.notify('undo-redo', { prop: 'updateUndoRedoColl', onPropertyChange: false,
+                        value: { operation: 'shapeTransform', previousObj: prevObj, previousObjColl: prevObj.objColl,
+                            previousPointColl: prevObj.pointColl, previousSelPointColl: prevObj.selPointColl,
+                            previousCropObj: prevCropObj, previousText: null,
+                            currentText: null, previousFilter: null, isCircleCrop: null } });
+                    this.notify('selection', { prop: 'redrawShape', value: { obj: this.objColl[this.objColl.length - 1] } });
+                }
+            }
+        }
+        else if (this.textArea.style.display === 'block' || this.textArea.style.display === 'inline-block') {
+            this.textArea.style.textShadow = "-1px -1px 0 " + value + ", 1px -1px 0 " + value + ", -1px 1px 0 " + value + ", 1px 1px 0 " + value;
+            var temp = this.activeObj.strokeSettings.outlineColor;
+            this.activeObj.strokeSettings.outlineColor = value;
+            if (this.activeObj.activePoint.width !== 0 || this.activeObj.activePoint.height !== 0) {
+                this.objColl.push(this.activeObj);
+                this.notify('undo-redo', { prop: 'updateUndoRedoColl', onPropertyChange: false,
+                    value: { operation: 'textAreaCustomization', previousObj: prevObj, previousObjColl: prevObj.objColl,
+                        previousPointColl: prevObj.pointColl, previousSelPointColl: prevObj.selPointColl,
+                        previousCropObj: prevCropObj, previousText: null,
+                        currentText: null, previousFilter: null, isCircleCrop: null } });
+                this.objColl.pop();
+            }
+            this.activeObj.strokeSettings.outlineColor = temp;
+        }
+        else if (!this.togglePen) {
             if (this.activeObj.activePoint.width !== 0 || this.activeObj.activePoint.height !== 0) {
+                this.objColl.push(this.activeObj);
+                this.notify('undo-redo', { prop: 'updateUndoRedoColl', onPropertyChange: false,
+                    value: { operation: 'shapeTransform', previousObj: prevObj, previousObjColl: prevObj.objColl,
+                        previousPointColl: prevObj.pointColl, previousSelPointColl: prevObj.selPointColl,
+                        previousCropObj: prevCropObj, previousText: null,
+                        currentText: null, previousFilter: null, isCircleCrop: null } });
                 this.notify('selection', { prop: 'redrawShape', value: { obj: this.objColl[this.objColl.length - 1] } });
             }
         }
         var shapeChangedArgs = { action: 'font-color', currentShapeSettings: extend({}, shapeSettings, {}, true) };
         shapeChangedArgs.currentShapeSettings.fillColor = value;
         this.trigger('shapeChange', shapeChangedArgs);
+        this.editCompleteArgs = shapeChangedArgs;
     };
     /**
      * Apply Pen stroke width.
@@ -2961,6 +3561,7 @@ var ImageEditor = /** @class */ (function (_super) {
         var shapeChangedArgs = { action: 'stroke-width', currentShapeSettings: extend({}, shapeSettings, {}, true) };
         shapeChangedArgs.currentShapeSettings.strokeWidth = this.activeObj.strokeSettings.strokeWidth;
         this.trigger('shapeChange', shapeChangedArgs);
+        this.editCompleteArgs = shapeChangedArgs;
     };
     /**
      * Apply Pen stroke color.
@@ -3021,15 +3622,18 @@ var ImageEditor = /** @class */ (function (_super) {
         var shapeChangedArgs = { action: 'stroke-color', currentShapeSettings: extend({}, shapeSettings, {}, true) };
         shapeChangedArgs.currentShapeSettings.strokeColor = value;
         this.trigger('shapeChange', shapeChangedArgs);
+        this.editCompleteArgs = shapeChangedArgs;
     };
     /**
      * Apply Shape stroke width.
      *
      * @param { string } id - Specifies the selected item id.
+     * @param { string } type - Specifies the type of selected item.
+     * @param { string } shapeType - Specifies the shape type of selected item.
      * @hidden
      * @returns {void}.
      */
-    ImageEditor.prototype.updateStrokeWidth = function (id) {
+    ImageEditor.prototype.updateStrokeWidth = function (id, type, shapeType) {
         if (this.activeObj.shape && (this.activeObj.shape !== 'path' || (this.activeObj.shape === 'path' &&
             this.activeObj.pointColl.length > 0))) {
             var obj = { shapeSettingsObj: {} };
@@ -3055,13 +3659,25 @@ var ImageEditor = /** @class */ (function (_super) {
             if (isObjPushed) {
                 this.objColl.pop();
             }
-            this.activeObj.strokeSettings.strokeWidth = parseInt(id, 10);
+            this.activeObj.strokeSettings[type === 'width' ? (shapeType === 'text' ? 'outlineWidth' : 'strokeWidth') : 'radius'] = parseInt(id, 10);
             if (this.activeObj.shape === 'rectangle' || this.activeObj.shape === 'ellipse') {
-                this.activeObj.strokeSettings.strokeWidth = parseInt(id, 10) - 1;
+                this.activeObj.strokeSettings[type === 'width' ? (shapeType === 'text' ? 'outlineWidth' : 'strokeWidth') : 'radius'] = parseInt(id, 10) - 1;
+            }
+            this.activeObj.strokeSettings[type === 'width' ? (shapeType === 'text' ? 'outlineWidth' : 'strokeWidth') : 'radius'] *= 2;
+            if (type === 'width') {
+                if (shapeType === 'text') {
+                    this.notify('shape', { prop: 'setStrokeSettings', value: { strokeSettings: null, strokeColor: null, fillColor: null,
+                            strokeWidth: null, radius: null, outlineWidth: this.activeObj.strokeSettings.outlineWidth } });
+                }
+                else {
+                    this.notify('shape', { prop: 'setStrokeSettings', value: { strokeSettings: null, strokeColor: null, fillColor: null,
+                            strokeWidth: this.activeObj.strokeSettings.strokeWidth, radius: null, outlineWidth: null } });
+                }
+            }
+            else {
+                this.notify('shape', { prop: 'setStrokeSettings', value: { strokeSettings: null, strokeColor: null, fillColor: null,
+                        strokeWidth: null, radius: this.activeObj.strokeSettings.radius } });
             }
-            this.activeObj.strokeSettings.strokeWidth *= 2;
-            this.notify('shape', { prop: 'setStrokeSettings', value: { strokeSettings: null, strokeColor: null, fillColor: null,
-                    strokeWidth: this.activeObj.strokeSettings.strokeWidth } });
             this.objColl.push(this.activeObj);
             if (this.activeObj.activePoint.width !== 0 || this.activeObj.activePoint.height !== 0) {
                 this.notify('undo-redo', { prop: 'updateUndoRedoColl', onPropertyChange: false,
@@ -3072,15 +3688,28 @@ var ImageEditor = /** @class */ (function (_super) {
             }
             this.notify('selection', { prop: 'redrawShape', value: { obj: this.objColl[this.objColl.length - 1] } });
             var shapeChangedArgs = { action: 'stroke-width', currentShapeSettings: extend({}, shapeSettings, {}, true) };
-            shapeChangedArgs.currentShapeSettings.strokeWidth = this.activeObj.strokeSettings.strokeWidth;
+            shapeChangedArgs.currentShapeSettings[type === 'width' ? (shapeType === 'text' ? 'outlineWidth' : 'strokeWidth') : 'radius'] = this.activeObj.strokeSettings[type === 'width' ? (shapeType === 'text' ? 'outlineWidth' : 'strokeWidth') : 'radius'];
             this.trigger('shapeChange', shapeChangedArgs);
+            this.editCompleteArgs = shapeChangedArgs;
         }
         else if (this.activeObj.shape && (this.activeObj.shape === 'path' &&
             this.activeObj.pointColl.length === 0)) {
             this.activeObj.strokeSettings.strokeWidth = parseInt(id, 10);
             this.activeObj.strokeSettings.strokeWidth *= 2;
-            this.notify('shape', { prop: 'setStrokeSettings', value: { strokeSettings: null, strokeColor: null, fillColor: null,
-                    strokeWidth: this.activeObj.strokeSettings.strokeWidth } });
+            if (type === 'width') {
+                if (shapeType === 'text') {
+                    this.notify('shape', { prop: 'setStrokeSettings', value: { strokeSettings: null, strokeColor: null, fillColor: null,
+                            strokeWidth: null, radius: null, outlineWidth: this.activeObj.strokeSettings.outlineWidth } });
+                }
+                else {
+                    this.notify('shape', { prop: 'setStrokeSettings', value: { strokeSettings: null, strokeColor: null, fillColor: null,
+                            strokeWidth: this.activeObj.strokeSettings.strokeWidth, radius: null, outlineWidth: null } });
+                }
+            }
+            else {
+                this.notify('shape', { prop: 'setStrokeSettings', value: { strokeSettings: null, strokeColor: null, fillColor: null,
+                        strokeWidth: null, radius: this.activeObj.strokeSettings.radius } });
+            }
         }
     };
     /**
@@ -3138,6 +3767,7 @@ var ImageEditor = /** @class */ (function (_super) {
         var shapeChangedArgs = { action: 'stroke-color', currentShapeSettings: extend({}, shapeSettings, {}, true) };
         shapeChangedArgs.currentShapeSettings.strokeColor = value;
         this.trigger('shapeChange', shapeChangedArgs);
+        this.editCompleteArgs = shapeChangedArgs;
     };
     /**
      * Apply Shape fill color.
@@ -3185,6 +3815,7 @@ var ImageEditor = /** @class */ (function (_super) {
         this.notify('selection', { prop: 'redrawShape', value: { obj: this.objColl[this.objColl.length - 1] } });
         var shapeChangedArgs = { action: 'fill-color', currentShapeSettings: extend({}, shapeSettings, {}, true) };
         this.trigger('shapeChange', shapeChangedArgs);
+        this.editCompleteArgs = shapeChangedArgs;
     };
     /**
      * Apply horizontal flip.
@@ -3488,8 +4119,11 @@ var ImageEditor = /** @class */ (function (_super) {
     ImageEditor.prototype.setStraighten = function (value) {
         var straightenEventArgs = { cancel: false, previousDegree: this.transform.straighten, currentDegree: value };
         this.trigger('rotating', straightenEventArgs);
+        this.editCompleteArgs = straightenEventArgs;
         if (!straightenEventArgs.cancel) {
             this.performStraighten(straightenEventArgs);
+            var actionArgs = { action: 'straighten', actionEventArgs: this.editCompleteArgs };
+            this.triggerEditCompleteEvent(actionArgs);
         }
     };
     ImageEditor.prototype.duplicateImage = function () {
@@ -3705,9 +4339,36 @@ var ImageEditor = /** @class */ (function (_super) {
             Material3Dark: { primaryColor: '#d0bcff', secondaryColor: '#fff' },
             Fluent2: { primaryColor: '#0f6cbd', secondaryColor: '#fff' },
             Fluent2Dark: { primaryColor: '#115ea3', secondaryColor: '#fff' },
-            Fluent2Highcontrast: { primaryColor: '#1aebff', secondaryColor: '#fff' }
+            Fluent2Highcontrast: { primaryColor: '#1aebff', secondaryColor: '#fff' },
+            'Bootstrap5.3': { primaryColor: '#0d6efd', secondaryColor: '#fff' },
+            'Bootstrap5.3Dark': { primaryColor: '#0d6efd', secondaryColor: '#fff' }
         };
     };
+    /**
+     * Draw a redaction on an image.
+     *
+     * @param {RedactType} type – Optional. Specifies the type of redaction to be drawn on the image such as blur or pixelate. If not specified, the redaction drawing is initiated with the default blur value.
+     * @param {number} x – Optional. Specifies x-coordinate of redaction. If not specified, the redaction drawing is initiated with the first parameter.
+     * @param {number} y – Optional. Specifies y-coordinate of redaction. If not specified it draws redaction from the center point of the image.
+     * @param {number} width – Optional. Specifies the width of the redaction. The default value is 100.
+     * @param {number} height – Optional. Specifies the height of the redaction. The default value is 50.
+     * @param {number} value – Optional. Specifies the blur value for blur-type redaction or the pixel size for pixelate-type redaction. Defaults to 20 since the default redaction is blur.
+     * @returns {boolean}.
+     */
+    ImageEditor.prototype.drawRedact = function (type, x, y, width, height, value) {
+        var isRedact = false;
+        var isPointsInRange = this.allowShape(x, y);
+        if (!this.disabled && this.isImageLoaded && (isPointsInRange || (isNullOrUndefined(x) && isNullOrUndefined(y)))) {
+            isRedact = true;
+            this.notify('shape', {
+                prop: 'drawRedact', onPropertyChange: false, value: {
+                    x: x, y: y, width: width, height: height, type: type, value: value
+                }
+            });
+            this.notify('draw', { prop: 'redrawDownScale' });
+        }
+        return isRedact;
+    };
     var ImageEditor_1;
     __decorate([
         Property('')
@@ -3829,6 +4490,9 @@ var ImageEditor = /** @class */ (function (_super) {
     __decorate([
         Event()
     ], ImageEditor.prototype, "frameChange", void 0);
+    __decorate([
+        Event()
+    ], ImageEditor.prototype, "editComplete", void 0);
     ImageEditor = ImageEditor_1 = __decorate([
         NotifyPropertyChanges
     ], ImageEditor);