@syncfusion/ej2-image-editor 26.2.14 → 27.1.50

package/src/image-editor/renderer/toolbar.js

@@ -195,7 +195,14 @@ var ToolbarModule = /** @class */ (function () {
             SendBackward: 'Send Backward',
             SendToBack: 'Send to Back',
             BringToFront: 'Bring to Front',
-            ZOrder: 'Z-Order'
+            ZOrder: 'Z-Order',
+            Redact: 'Redact',
+            Pixelate: 'Pixelate',
+            BorderRadius: 'Border Radius',
+            TextOutlineColor: 'Outline Color',
+            TextOutlineWidth: 'Outline Width',
+            PixelSize: 'Pixel Size',
+            And: 'and'
         };
         this.l10n = new L10n('image-editor', this.defaultLocale, this.parent.locale);
     };
@@ -319,9 +326,6 @@ var ToolbarModule = /** @class */ (function () {
             case 'getFrameToolbar':
                 args.value['obj']['bool'] = this.isFrameToolbar;
                 break;
-            case 'callFrameToolbar':
-                this.callFrameToolbar();
-                break;
             case 'resizeClick':
                 this.resizeClick();
                 break;
@@ -340,6 +344,18 @@ var ToolbarModule = /** @class */ (function () {
             case 'setInitialSize':
                 this.initialSize = Number(args.value['value']);
                 break;
+            case 'widthPress':
+                this.widthPress(args.value['e']);
+                break;
+            case 'heightPress':
+                this.heightPress(args.value['e']);
+                break;
+            case 'widthAspectRatio':
+                this.widthAspectRatio(args.value['e']);
+                break;
+            case 'heightAspectRatio':
+                this.heightAspectRatio(args.value['e']);
+                break;
         }
     };
     ToolbarModule.prototype.updatePrivateVariables = function () {
@@ -515,17 +531,17 @@ var ToolbarModule = /** @class */ (function () {
             toolbarObj.appendTo('#' + id + '_quickAccessToolbar');
         }
     };
-    ToolbarModule.prototype.initMainToolbar = function (isApplyOption, isDevice, isOkBtn, isResize, isFrame, isMainToolbar) {
+    ToolbarModule.prototype.initMainToolbar = function (isApplyOption, isDevice, isOkBtn, isResize, isFrame, isMainToolbar, isRedact) {
         var _this = this;
         var parent = this.parent;
         var id = parent.element.id;
         if (this.isToolbar()) {
             var leftItem = this.getLeftToolbarItem(isOkBtn, isResize);
-            var rightItem = this.getRightToolbarItem(isOkBtn, isMainToolbar);
-            var mainItem = this.getMainToolbarItem(isApplyOption, isFrame);
+            var rightItem = this.getRightToolbarItem(isOkBtn, isMainToolbar, isRedact);
+            var mainItem = this.getMainToolbarItem(isApplyOption, isFrame, isRedact);
             var zoomItem = this.getZoomToolbarItem();
             if (isDevice) {
-                if (isFrame) {
+                if (isFrame || isRedact) {
                     this.defToolbarItems = mainItem;
                 }
                 else {
@@ -551,7 +567,7 @@ var ToolbarModule = /** @class */ (function () {
                         parent.trigger('toolbarCreated', { toolbarType: 'main' });
                     }
                 });
-                if (isDevice && isFrame) {
+                if ((isDevice && isFrame) || (isDevice && isRedact)) {
                     toolbarObj.appendTo('#' + id + '_bottomToolbar');
                 }
                 else {
@@ -633,11 +649,11 @@ var ToolbarModule = /** @class */ (function () {
         }
         return toolbarItems;
     };
-    ToolbarModule.prototype.getRightToolbarItem = function (isOkBtn, isMainToolbar) {
+    ToolbarModule.prototype.getRightToolbarItem = function (isOkBtn, isMainToolbar, isRedact) {
         var parent = this.parent;
         var id = parent.element.id;
         var toolbarItems = [];
-        if (isOkBtn) {
+        if (isOkBtn || isRedact) {
             toolbarItems.push({ id: id + '_ok', prefixIcon: 'e-icons e-check', cssClass: 'top-icon e-tick',
                 tooltipText: this.l10n.getConstant('OK'), align: 'Right', tabIndex: 0 });
             toolbarItems.push({ id: id + '_cancel', prefixIcon: 'e-icons e-close', cssClass: 'top-icon e-save',
@@ -659,7 +675,7 @@ var ToolbarModule = /** @class */ (function () {
         }
         return toolbarItems;
     };
-    ToolbarModule.prototype.getMainToolbarItem = function (isApplyOption, isFrame) {
+    ToolbarModule.prototype.getMainToolbarItem = function (isApplyOption, isFrame, isRedact) {
         var parent = this.parent;
         var id = parent.element.id;
         var toolbarItems = [];
@@ -689,6 +705,16 @@ var ToolbarModule = /** @class */ (function () {
                     tooltipText: this.l10n.getConstant('Hook'), align: 'Center' });
             }
         }
+        else if (isRedact) {
+            toolbarItems.push({ id: id + '_redactBlur', prefixIcon: 'e-icons e-tint', cssClass: 'top-icon e-opacity',
+                tooltipText: this.l10n.getConstant('Blur'), align: 'Center' });
+            toolbarItems.push({ id: id + '_pixelate', prefixIcon: 'e-icons e-opacity', cssClass: 'top-icon e-opacity',
+                tooltipText: this.l10n.getConstant('Pixelate'), align: 'Center' });
+            toolbarItems.push({ id: id + '_duplicate', prefixIcon: 'e-icons e-order', cssClass: 'top-icon e-order',
+                tooltipText: this.l10n.getConstant('Duplicate'), align: 'Center' });
+            toolbarItems.push({ id: id + '_remove', prefixIcon: 'e-icons e-trash', cssClass: 'top-icon e-trash',
+                tooltipText: this.l10n.getConstant('Remove'), align: 'Center' });
+        }
         else {
             if (isNullOrUndefined(parent.toolbar) || (parent.toolbar && parent.toolbar.indexOf('Crop') > -1)) {
                 toolbarItems.push({ id: id + '_cropTransform', prefixIcon: 'e-icons e-crop', cssClass: 'top-icon e-crop',
@@ -714,6 +740,10 @@ var ToolbarModule = /** @class */ (function () {
                 toolbarItems.push({ id: id + '_resize', prefixIcon: 'e-icons e-resize', cssClass: 'top-icon e-resize',
                     tooltipText: this.l10n.getConstant('Resize'), align: 'Center' });
             }
+            if (isNullOrUndefined(parent.toolbar) || (!isNullOrUndefined(parent.toolbar) && parent.toolbar.indexOf('Redact') > -1)) {
+                toolbarItems.push({ id: id + '_redact', prefixIcon: 'e-icons e-redact', cssClass: 'top-icon e-opacity',
+                    tooltipText: this.l10n.getConstant('Redact'), align: 'Center' });
+            }
         }
         var tempToolbarItems = this.processToolbar('center');
         for (var i = 0, len = tempToolbarItems.length; i < len; i++) {
@@ -840,13 +870,11 @@ var ToolbarModule = /** @class */ (function () {
             zoomIn.addEventListener('mousedown', this.zoomInBtnMouseDownHandler.bind(this));
             zoomIn.addEventListener('mouseup', this.zoomBtnMouseUpHandler.bind(this));
             zoomIn.addEventListener('click', this.zoomInBtnClickHandler.bind(this));
-            zoomIn.addEventListener('touchstart', this.zoomInBtnClickHandler.bind(this));
         }
         if (zoomOut) {
             zoomOut.addEventListener('mousedown', this.zoomOutBtnMouseDownHandler.bind(this));
             zoomOut.addEventListener('mouseup', this.zoomBtnMouseUpHandler.bind(this));
             zoomOut.addEventListener('click', this.zoomOutBtnClickHandler.bind(this));
-            zoomIn.addEventListener('touchstart', this.zoomInBtnClickHandler.bind(this));
         }
     };
     ToolbarModule.prototype.widthPress = function (e) {
@@ -1108,10 +1136,17 @@ var ToolbarModule = /** @class */ (function () {
         }
         var frame = document.querySelector('#' + id + '_frame');
         if (frame && ((parent.currSelectionPoint && parent.currSelectionPoint.shape === 'crop-circle') || parent.isCircleCrop)) {
-            frame.classList.add('e-disabled');
+            frame.classList.add('e-overlay');
         }
         else if (frame) {
-            frame.classList.remove('e-disabled');
+            frame.classList.remove('e-overlay');
+        }
+        var ratio = document.querySelector('#' + id + '_aspectratio');
+        if (ratio && ((parent.currSelectionPoint && parent.currSelectionPoint.shape === 'crop-circle') || parent.isCircleCrop)) {
+            ratio.classList.add('e-overlay');
+        }
+        else if (ratio) {
+            ratio.classList.remove('e-overlay');
         }
     };
     ToolbarModule.prototype.createLeftToolbarControls = function () {
@@ -1126,6 +1161,7 @@ var ToolbarModule = /** @class */ (function () {
                 var uploadBtnElem = uploadDiv.getElementsByTagName('button')[0];
                 uploadBtnElem.className = 'e-tbar-btn e-tbtn-txt top-icon';
                 uploadBtnElem.innerHTML = '';
+                uploadBtnElem.title = this.l10n.getConstant('Browse');
                 uploadBtnElem.appendChild(parent.createElement('span', {
                     className: 'e-btn-icon e-icons e-upload-icon e-icon-left'
                 }));
@@ -1193,46 +1229,13 @@ var ToolbarModule = /** @class */ (function () {
         }
         var obj = { freehandDrawSelectedId: null };
         parent.notify('freehand-draw', { prop: 'getFreehandDrawSelectedId', onPropertyChange: false, value: { obj: obj } });
-        var duplicateElement = document.querySelector('#' + id + '_duplicate');
-        var removeElement = document.querySelector('#' + id + '_remove');
-        var editTextElement = document.querySelector('#' + id + '_editText');
-        var zOrderElement = document.querySelector('#' + id + '_zOrderBtn');
-        if ((parent.activeObj.activePoint.width === 0 && parent.activeObj.activePoint.height === 0) &&
-            (isNullOrUndefined(parent.activeObj.pointColl) || (parent.activeObj.pointColl
-                && parent.activeObj.pointColl.length === 0)) &&
-            isNullOrUndefined(obj['freehandDrawSelectedId'])) {
-            if (duplicateElement) {
-                duplicateElement.classList.add('e-disabled');
-            }
-            if (removeElement) {
-                removeElement.classList.add('e-disabled');
-            }
-            if (editTextElement) {
-                editTextElement.classList.add('e-disabled');
-            }
-            if (zOrderElement) {
-                zOrderElement.classList.add('e-disabled');
-            }
-        }
-        else {
-            if (duplicateElement) {
-                duplicateElement.classList.remove('e-disabled');
-            }
-            if (removeElement) {
-                removeElement.classList.remove('e-disabled');
-            }
-            if (editTextElement) {
-                editTextElement.classList.remove('e-disabled');
-            }
-            if (zOrderElement) {
-                zOrderElement.classList.remove('e-disabled');
-            }
-        }
+        var toolbarId = Browser.isDevice ? '#' + id + '_bottomToolbar ' + '#' + id : '#' + id;
+        this.enableDisableCloneBtn(toolbarId, obj);
         var iconCss = isContextualToolbar ? this.getCurrentShapeIcon(parent.activeObj.shape) : 'e-annotation';
         var drpDownBtn = new DropDownButton({ items: items, iconCss: 'e-icons ' + iconCss,
             cssClass: 'e-image-popup',
             open: function (args) {
-                if (parent.currObjType.isFiltered) {
+                if (parent.currObjType.isFiltered || parent.currObjType.isRedact) {
                     parent.okBtn();
                     parent.element.querySelector('#' + id + '_annotationBtn').click();
                 }
@@ -1273,11 +1276,16 @@ var ToolbarModule = /** @class */ (function () {
                 var prevObj = { shapeSettingsObj: {} };
                 var shapeSettings;
                 var shapeChangingArgs;
+                var shapes = ['ellipse', 'rectangle', 'text', 'image'];
+                var allowOutofBound;
                 drpDownBtn.iconCss = 'e-icons ' + _this.getCurrentShapeIcon(args.item.id);
                 parent.notify('draw', { prop: 'updateTempObjColl' });
                 parent.notify('draw', { prop: 'updateTempPointColl' });
+                var penStrokeWidthObj = { penStrokeWidth: 2 };
                 switch (args.item.id) {
                     case 'pen':
+                        parent.notify('freehand-draw', { prop: 'getPenStrokeWidth', onPropertyChange: false, value: { obj: penStrokeWidthObj } });
+                        parent.notify('draw', { prop: 'setTempStrokeWidth', value: { strokeWidth: penStrokeWidthObj['penStrokeWidth'] } });
                         parent.drawingShape = null;
                         parent.notify('draw', { prop: 'setTempFreehandCounter', value: { tempFreehandCounter: parent.freehandCounter } });
                         parent.notify('draw', { prop: 'setTempCurrentFreehandDrawIndex', value: { tempCurrentFreehandDrawIndex: obj['currentFreehandDrawIndex'] } });
@@ -1285,6 +1293,8 @@ var ToolbarModule = /** @class */ (function () {
                         parent.freeHandDraw(true);
                         parent.notify('selection', { prop: 'updatePrevShapeSettings', onPropertyChange: false, value: { obj: prevObj } });
                         shapeSettings = prevObj['shapeSettingsObj'];
+                        parent.notify('freehand-draw', { prop: 'getPenStrokeWidth', onPropertyChange: false, value: { obj: penStrokeWidthObj } });
+                        shapeSettings.strokeWidth = penStrokeWidthObj['penStrokeWidth'];
                         shapeSettings.type = ShapeType.FreehandDraw;
                         shapeChangingArgs = { cancel: false, action: 'insert', previousShapeSettings: shapeSettings,
                             currentShapeSettings: shapeSettings };
@@ -1317,9 +1327,11 @@ var ToolbarModule = /** @class */ (function () {
                                 isApplyBtn: null, isCropping: null, isZooming: null, cType: null } });
                         parent.notify('selection', { prop: 'updatePrevShapeSettings', onPropertyChange: false, value: { obj: prevObj } });
                         shapeSettings = prevObj['shapeSettingsObj'];
+                        allowOutofBound = shapes.indexOf(_this.parent.activeObj.shape) !== -1 ? false : true;
                         shapeChangingArgs = { cancel: false, action: 'insert', previousShapeSettings: shapeSettings,
-                            currentShapeSettings: shapeSettings };
+                            currentShapeSettings: shapeSettings, allowShapeOverflow: allowOutofBound };
                         parent.trigger('shapeChanging', shapeChangingArgs);
+                        parent.editCompleteArgs = shapeChangingArgs;
                         parent.notify('shape', { prop: 'updateShapeChangeEventArgs', value: { shapeSettings: shapeChangingArgs.currentShapeSettings } });
                         break;
                 }
@@ -1335,6 +1347,50 @@ var ToolbarModule = /** @class */ (function () {
         // Render initialized DropDownButton.
         drpDownBtn.appendTo('#' + id + '_annotationBtn');
     };
+    ToolbarModule.prototype.enableDisableCloneBtn = function (toolbarId, obj) {
+        var parent = this.parent;
+        var isDummyTextClick = false;
+        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) {
+            isDummyTextClick = true;
+        }
+        var duplicateElement = document.querySelector(toolbarId + '_duplicate');
+        var removeElement = document.querySelector(toolbarId + '_remove');
+        var editTextElement = document.querySelector(toolbarId + '_editText');
+        var zOrderElement = document.querySelector(toolbarId + '_zOrderBtn');
+        if (isDummyTextClick || (parent.activeObj.activePoint.width === 0 && parent.activeObj.activePoint.height === 0) &&
+            (isNullOrUndefined(parent.activeObj.pointColl) || (parent.activeObj.pointColl
+                && parent.activeObj.pointColl.length === 0)) &&
+            isNullOrUndefined(obj['freehandDrawSelectedId'])) {
+            if (duplicateElement) {
+                duplicateElement.classList.add('e-overlay');
+            }
+            if (removeElement) {
+                removeElement.classList.add('e-overlay');
+            }
+            if (editTextElement) {
+                editTextElement.classList.add('e-overlay');
+            }
+            if (zOrderElement) {
+                zOrderElement.classList.add('e-overlay');
+            }
+        }
+        else {
+            if (duplicateElement) {
+                duplicateElement.classList.remove('e-overlay');
+            }
+            if (removeElement) {
+                removeElement.classList.remove('e-overlay');
+            }
+            if (editTextElement) {
+                editTextElement.classList.remove('e-overlay');
+            }
+            if (zOrderElement) {
+                zOrderElement.classList.remove('e-overlay');
+            }
+        }
+    };
     ToolbarModule.prototype.renderStraightenSlider = function () {
         var parent = this.parent;
         var id = parent.element.id;
@@ -1683,13 +1739,7 @@ var ToolbarModule = /** @class */ (function () {
                     if (args.item.id !== 'jpeg') {
                         qualityContainer.style.display = 'none';
                         imageNameLabel.style.display = 'block';
-                        if (_this.initialSize > 1000) {
-                            var megabytes = _this.initialSize / 1048576;
-                            imageNameLabel.innerHTML = _this.l10n.getConstant('ImageSize') + ': ' + megabytes.toFixed(2) + ' MB';
-                        }
-                        else {
-                            imageNameLabel.innerHTML = _this.l10n.getConstant('ImageSize') + ': ' + _this.initialSize.toFixed(2) + ' KB';
-                        }
+                        _this.updateImageSize(1, obj['canvas'], _this.fileType);
                         if (slider) {
                             if (_this.isSlider) {
                                 getComponent(slider, 'slider').destroy();
@@ -1703,7 +1753,7 @@ var ToolbarModule = /** @class */ (function () {
                         removeClass([qualityBtnGrp], 'e-hide');
                         slider.style.display = 'none';
                         imageNameLabel.style.display = 'block';
-                        _this.updateImageSize(isNullOrUndefined(_this.currentQuality) ? 1 : _this.currentQuality, obj['canvas']);
+                        _this.updateImageSize(isNullOrUndefined(_this.currentQuality) ? 1 : _this.currentQuality, obj['canvas'], _this.fileType);
                         document.getElementById(id + '_' + _this.imageQuality).checked = true;
                     }
                 }
@@ -1719,10 +1769,10 @@ var ToolbarModule = /** @class */ (function () {
             if (Browser.isDevice) {
                 document.getElementById(id + '_dialogImgContent').style.display = 'none';
                 document.getElementById(id + '_dialogRightContent').style.width = '100%';
-                this.updateImageSize(1, obj['canvas']);
+                this.updateImageSize(1, obj['canvas'], this.fileType);
             }
             else {
-                this.updateImageSize(1, obj['canvas']);
+                this.updateImageSize(1, obj['canvas'], this.fileType);
             }
         }
         document.getElementById(id + '_' + this.imageQuality).checked = true;
@@ -1759,14 +1809,14 @@ var ToolbarModule = /** @class */ (function () {
                 type: 'MinRange',
                 width: Browser.isDevice ? '80%' : '190px',
                 created: function () {
-                    _this.updateImageSize(_this.currentQuality, obj['canvas']);
+                    _this.updateImageSize(_this.currentQuality, obj['canvas'], 'jpeg');
                     qualitySliderValueSpan.innerHTML = (Math.round(_this.currentQuality * 100)).toString();
                 },
                 changed: function (args) {
                     _this.currentQuality = args.value;
                     qualitySliderValueSpan.innerHTML = (Math.round(_this.currentQuality * 100)).toString();
                     parent.notify('export', { prop: 'setImageQuality', value: { value: args.value } });
-                    _this.updateImageSize(args.value, obj['canvas']);
+                    _this.updateImageSize(args.value, obj['canvas'], 'jpeg');
                 }
             });
             sliderObj.appendTo('#' + id + '_qualitySlider');
@@ -1786,10 +1836,10 @@ var ToolbarModule = /** @class */ (function () {
             event.target.previousElementSibling.checked = true;
             this.currentQuality = compressionValues[target.textContent];
             this.imageQuality = target.textContent.toLowerCase();
-            this.updateImageSize(compressionValues[target.textContent], obj['canvas']);
+            this.updateImageSize(compressionValues[target.textContent], obj['canvas'], 'jpeg');
         }
     };
-    ToolbarModule.prototype.updateImageSize = function (quality, tempCanvas) {
+    ToolbarModule.prototype.updateImageSize = function (quality, tempCanvas, fileType) {
         var fileSize;
         var parent = this.parent;
         var id = parent.element.id;
@@ -1803,32 +1853,49 @@ var ToolbarModule = /** @class */ (function () {
         else {
             imageNameLabel = document.getElementById(id + '_imageNameLabel');
         }
-        /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
-        tempCanvas.toBlob((function (blob) {
-            fileSize = Math.floor(blob.size / 1024);
-            if (fileSize > 1000) {
-                var megabytes = fileSize / 1024;
-                imageNameLabel.innerHTML = 'Image size: ' + megabytes.toFixed(2) + ' MB';
-                fileSize = +megabytes.toFixed(2);
-            }
-            else {
-                imageNameLabel.innerHTML = 'Image size: ' + fileSize.toFixed(2) + ' KB';
-                fileSize = +fileSize.toFixed(2);
-            }
+        if (fileType.toLowerCase() === 'jpeg') {
+            /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
+            tempCanvas.toBlob((function (blob) {
+                fileSize = Math.floor(blob.size / 1024);
+                if (fileSize > 1000) {
+                    var megabytes = fileSize / 1024;
+                    imageNameLabel.innerHTML = 'Image size: ' + megabytes.toFixed(2) + ' MB';
+                    fileSize = +megabytes.toFixed(2);
+                }
+                else {
+                    imageNameLabel.innerHTML = 'Image size: ' + fileSize.toFixed(2) + ' KB';
+                    fileSize = +fileSize.toFixed(2);
+                }
+                if (Browser.isDevice) {
+                    canvas.style.display = 'none';
+                }
+                else {
+                    var compressedImage_1 = new Image();
+                    compressedImage_1.src = URL.createObjectURL(blob);
+                    // eslint-disable-next-line @typescript-eslint/tslint/config
+                    compressedImage_1.onload = function () {
+                        ctx.drawImage(compressedImage_1, 0, 0);
+                        URL.revokeObjectURL(compressedImage_1.src);
+                    };
+                }
+                this.fileSize = fileSize;
+            }).bind(this), 'image/jpeg', quality);
+        }
+        else {
             if (Browser.isDevice) {
                 canvas.style.display = 'none';
             }
             else {
-                var compressedImage_1 = new Image();
-                compressedImage_1.src = URL.createObjectURL(blob);
-                // eslint-disable-next-line @typescript-eslint/tslint/config
-                compressedImage_1.onload = function () {
-                    ctx.drawImage(compressedImage_1, 0, 0);
-                    URL.revokeObjectURL(compressedImage_1.src);
-                };
+                ctx.drawImage(tempCanvas, 0, 0);
+                if (this.initialSize > 1000) {
+                    var megabytes = this.initialSize / 1048576;
+                    imageNameLabel.innerHTML = this.l10n.getConstant('ImageSize') + ': ' + megabytes.toFixed(2) + ' MB';
+                }
+                else {
+                    imageNameLabel.innerHTML = this.l10n.getConstant('ImageSize') + ': ' + this.initialSize.toFixed(2) + ' KB';
+                }
             }
-            this.fileSize = fileSize;
-        }).bind(this), 'image/jpeg', quality);
+        }
     };
     ToolbarModule.prototype.download = function () {
         var parent = this.parent;
@@ -1908,15 +1975,19 @@ var ToolbarModule = /** @class */ (function () {
                 template: '<button id="' + id + '_borderColorBtn"></button>' });
         }
         if (items.indexOf('strokeWidth') > -1) {
-            toolbarItems.push({ id: id + '_strokeWidth', cssClass: 'top-icon e-size', tooltipText: 'Stroke Width', align: 'Center',
+            toolbarItems.push({ id: id + '_strokeWidth', cssClass: 'top-icon e-size', tooltipText: this.l10n.getConstant('StrokeWidth'), align: 'Center',
                 type: 'Input', template: '<button id="' + id + '_borderWidthBtn"></button>' });
         }
         if (items.indexOf('start') > -1) {
-            toolbarItems.push({ id: id + '_start', cssClass: 'top-icon e-size', tooltipText: 'Start', align: 'Center',
+            toolbarItems.push({ id: id + '_start', cssClass: 'top-icon e-size', tooltipText: this.l10n.getConstant('Start'), align: 'Center',
                 type: 'Input', template: '<button id="' + id + '_startBtn"></button>' });
         }
+        if (items.indexOf('borderRadius') > -1) {
+            toolbarItems.push({ id: id + '_rectangleRadius', cssClass: 'top-icon e-size', tooltipText: this.l10n.getConstant('BorderRadius'), align: 'Center',
+                type: 'Input', template: '<button id="' + id + '_rectangleRadiusBtn"></button>' });
+        }
         if (items.indexOf('end') > -1) {
-            toolbarItems.push({ id: id + '_end', cssClass: 'top-icon e-size', tooltipText: 'End', align: 'Center',
+            toolbarItems.push({ id: id + '_end', cssClass: 'top-icon e-size', tooltipText: this.l10n.getConstant('End'), align: 'Center',
                 type: 'Input', template: '<button id="' + id + '_endBtn"></button>' });
         }
         if (items.indexOf('flip') > -1) {
@@ -2104,6 +2175,7 @@ var ToolbarModule = /** @class */ (function () {
             clicked: this.defToolbarClicked.bind(this),
             created: function () {
                 _this.renderAnnotationBtn(true);
+                _this.createRectangleRadius(items);
                 _this.createShapeColor(items);
                 _this.createShapeBtn(items);
                 _this.createZOrderBtn(items);
@@ -2144,6 +2216,62 @@ var ToolbarModule = /** @class */ (function () {
         }
         this.enableDisableTbrBtn();
     };
+    ToolbarModule.prototype.createRectangleRadius = function (items) {
+        var _this = this;
+        var parent = this.parent;
+        var id = parent.element.id;
+        if (items.indexOf('borderRadius') > -1) {
+            var strokeWidthItems = [
+                { id: '1', text: this.l10n.getConstant('0') },
+                { id: '2', text: this.l10n.getConstant('20') },
+                { id: '3', text: this.l10n.getConstant('40') },
+                { id: '4', text: this.l10n.getConstant('60') },
+                { id: '5', text: this.l10n.getConstant('80') },
+                { id: '6', text: this.l10n.getConstant('100') }
+            ];
+            var strokeWidthBtn = document.getElementById(id + '_rectangleRadiusBtn');
+            var spanElem_2 = document.createElement('span');
+            spanElem_2.innerHTML = this.l10n.getConstant(parent.frameObj.radius.toString());
+            spanElem_2.className = 'e-shape-rectangle-radius';
+            strokeWidthBtn.appendChild(spanElem_2);
+            // Initialize the DropDownButton component.
+            var drpDownBtn_2 = new DropDownButton({ items: strokeWidthItems,
+                open: function (args) {
+                    if (Browser.isDevice) {
+                        var parentElem = args.element.parentElement;
+                        parentElem.style.top = drpDownBtn_2.element.getBoundingClientRect().top -
+                            parentElem.offsetHeight + 'px';
+                    }
+                    var activeBtn = drpDownBtn_2.element.childNodes[0].textContent;
+                    if (activeBtn !== '') {
+                        args.element.querySelector('[aria-label = ' + '"' + activeBtn + '"' + ']').classList.add('e-selected-btn');
+                    }
+                },
+                select: function (args) {
+                    _this.triggerTbarClickEvent(args);
+                    spanElem_2.textContent = args.item.text;
+                    parent.updateStrokeWidth(args.item.id, 'radius');
+                    if (Browser.isDevice) {
+                        if (document.getElementById(id + '_bottomToolbar')) {
+                            /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
+                            var toolbar_7 = getComponent(id + '_bottomToolbar', 'toolbar');
+                            toolbar_7.refreshOverflow();
+                        }
+                    }
+                    else {
+                        if (document.getElementById(id + '_toolbar')) {
+                            /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
+                            var toolbar_8 = getComponent(id + '_toolbar', 'toolbar');
+                            toolbar_8.refreshOverflow();
+                        }
+                    }
+                    parent.notify('undo-redo', { prop: 'updateUndoRedoStack', onPropertyChange: false });
+                }
+            });
+            // Render initialized DropDownButton.
+            drpDownBtn_2.appendTo('#' + id + '_rectangleRadiusBtn');
+        }
+    };
     ToolbarModule.prototype.beforeModeSwitch = function (args, inst) {
         this.popupLeft = args.element.offsetParent.style.left;
         if (args.mode === 'Picker') {
@@ -2217,7 +2345,9 @@ var ToolbarModule = /** @class */ (function () {
                     if (Browser.isDevice) {
                         parenElem.style.top = fillDDB_1.element.getBoundingClientRect().top -
                             parenElem.offsetHeight + 'px';
-                        parenElem.style.left = parent.element.offsetLeft + 'px';
+                        if (window.innerWidth <= 520) {
+                            parenElem.style.left = parent.element.offsetLeft + 'px';
+                        }
                     }
                 },
                 target: '.e-shape-fill-color',
@@ -2263,7 +2393,9 @@ var ToolbarModule = /** @class */ (function () {
                     if (Browser.isDevice) {
                         parenElem.style.top = strokeDDB_1.element.getBoundingClientRect().top -
                             parenElem.offsetHeight + 'px';
-                        parenElem.style.left = parent.element.offsetLeft + 'px';
+                        if (window.innerWidth <= 520) {
+                            parenElem.style.left = parent.element.offsetLeft + 'px';
+                        }
                     }
                 },
                 target: '.e-shape-stroke-color',
@@ -2298,45 +2430,45 @@ var ToolbarModule = /** @class */ (function () {
                 ];
             }
             var strokeWidthBtn = document.getElementById(id + '_borderWidthBtn');
-            var spanElem_2 = document.createElement('span');
-            spanElem_2.innerHTML = this.l10n.getConstant('XSmall');
-            spanElem_2.className = 'e-shape-stroke-width';
-            strokeWidthBtn.appendChild(spanElem_2);
+            var spanElem_3 = document.createElement('span');
+            spanElem_3.innerHTML = this.l10n.getConstant('XSmall');
+            spanElem_3.className = 'e-shape-stroke-width';
+            strokeWidthBtn.appendChild(spanElem_3);
             // Initialize the DropDownButton component.
-            var drpDownBtn_2 = new DropDownButton({ items: strokeWidthItems,
+            var drpDownBtn_3 = new DropDownButton({ items: strokeWidthItems,
                 open: function (args) {
                     if (Browser.isDevice) {
-                        args.element.parentElement.style.top = drpDownBtn_2.element.getBoundingClientRect().top -
+                        args.element.parentElement.style.top = drpDownBtn_3.element.getBoundingClientRect().top -
                             args.element.parentElement.offsetHeight + 'px';
                     }
-                    var activeBtn = spanElem_2.innerHTML;
+                    var activeBtn = spanElem_3.innerHTML;
                     if (activeBtn !== '') {
                         args.element.querySelector('[aria-label = ' + '"' + activeBtn + '"' + ']').classList.add('e-selected-btn');
                     }
                 },
                 select: function (args) {
                     _this.triggerTbarClickEvent(args);
-                    spanElem_2.textContent = args.item.text;
-                    parent.updateStrokeWidth(args.item.id);
+                    spanElem_3.textContent = args.item.text;
+                    parent.updateStrokeWidth(args.item.id, 'width', parent.activeObj.shape);
                     if (Browser.isDevice) {
                         if (document.getElementById(id + '_bottomToolbar')) {
                             /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
-                            var toolbar_7 = getComponent(id + '_bottomToolbar', 'toolbar');
-                            toolbar_7.refreshOverflow();
+                            var toolbar_9 = getComponent(id + '_bottomToolbar', 'toolbar');
+                            toolbar_9.refreshOverflow();
                         }
                     }
                     else {
                         if (document.getElementById(id + '_toolbar')) {
                             /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
-                            var toolbar_8 = getComponent(id + '_toolbar', 'toolbar');
-                            toolbar_8.refreshOverflow();
+                            var toolbar_10 = getComponent(id + '_toolbar', 'toolbar');
+                            toolbar_10.refreshOverflow();
                         }
                     }
                     parent.notify('undo-redo', { prop: 'updateUndoRedoStack', onPropertyChange: false });
                 }
             });
             // Render initialized DropDownButton.
-            drpDownBtn_2.appendTo('#' + id + '_borderWidthBtn');
+            drpDownBtn_3.appendTo('#' + id + '_borderWidthBtn');
         }
     };
     ToolbarModule.prototype.createZOrderBtn = function (items) {
@@ -2351,7 +2483,7 @@ var ToolbarModule = /** @class */ (function () {
                 { text: this.l10n.getConstant('SendToBack'), id: 'sendToBack', iconCss: 'e-icons e-send-to-back' }
             ];
             // Initialize the DropDownButton component.
-            var drpDownBtn_3 = new DropDownButton({ items: zOrderItems, iconCss: 'e-icons e-layers',
+            var drpDownBtn_4 = new DropDownButton({ items: zOrderItems, iconCss: 'e-icons e-layers',
                 beforeOpen: function (args) {
                     if (document.getElementById(parent.element.id + '_zOrderBtn').classList.contains('e-disabled')) {
                         args.cancel = true;
@@ -2386,7 +2518,7 @@ var ToolbarModule = /** @class */ (function () {
                 },
                 open: function (args) {
                     if (Browser.isDevice) {
-                        args.element.parentElement.style.top = drpDownBtn_3.element.getBoundingClientRect().top -
+                        args.element.parentElement.style.top = drpDownBtn_4.element.getBoundingClientRect().top -
                             args.element.parentElement.offsetHeight + 'px';
                     }
                 },
@@ -2399,15 +2531,15 @@ var ToolbarModule = /** @class */ (function () {
                     if (Browser.isDevice) {
                         if (document.getElementById(id + '_bottomToolbar')) {
                             /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
-                            var toolbar_9 = getComponent(id + '_bottomToolbar', 'toolbar');
-                            toolbar_9.refreshOverflow();
+                            var toolbar_11 = getComponent(id + '_bottomToolbar', 'toolbar');
+                            toolbar_11.refreshOverflow();
                         }
                     }
                     else {
                         if (document.getElementById(id + '_toolbar')) {
                             /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
-                            var toolbar_10 = getComponent(id + '_toolbar', 'toolbar');
-                            toolbar_10.refreshOverflow();
+                            var toolbar_12 = getComponent(id + '_toolbar', 'toolbar');
+                            toolbar_12.refreshOverflow();
                         }
                     }
                     if (shapeId.indexOf('shape') > -1) {
@@ -2419,7 +2551,7 @@ var ToolbarModule = /** @class */ (function () {
                 }
             });
             // Render initialized DropDownButton.
-            drpDownBtn_3.appendTo('#' + id + '_zOrderBtn');
+            drpDownBtn_4.appendTo('#' + id + '_zOrderBtn');
         }
     };
     ToolbarModule.prototype.createStartBtn = function () {
@@ -2539,6 +2671,17 @@ var ToolbarModule = /** @class */ (function () {
                 tooltipText: this.l10n.getConstant('FontColor'), align: 'Center',
                 type: 'Input', template: '<button id="' + id + '_fontColorBtn"></button>' });
         }
+        if (items.indexOf('strokeColor') > -1) {
+            toolbarItems.push({ cssClass: 'top-icon e-stroke-text-font-color', id: id + '_stroke_text_color',
+                tooltipText: this.l10n.getConstant('TextOutlineColor'), align: 'Center',
+                type: 'Input', template: '<button id="' + id + '_strokeTextColorBtn"></button>' });
+        }
+        if (items.indexOf('fillColor') > -1) {
+            toolbarItems.push({ cssClass: 'top-icon e-text-background-color', id: id + '_text_backgroundcolor',
+                tooltipText: this.l10n.getConstant('FillColor'), align: 'Center',
+                type: 'Input', template: '<button id="' + id + '_bgColorBtn"></button>'
+            });
+        }
         if (items.indexOf('bold') > -1) {
             toolbarItems.push({ id: id + '_bold', prefixIcon: 'e-icons e-bold', cssClass: 'top-icon e-bold',
                 tooltipText: this.l10n.getConstant('Bold'), align: 'Center' });
@@ -2547,6 +2690,10 @@ var ToolbarModule = /** @class */ (function () {
             toolbarItems.push({ id: id + '_italic', prefixIcon: 'e-icons e-italic', cssClass: 'top-icon e-italic',
                 tooltipText: this.l10n.getConstant('Italic'), align: 'Center' });
         }
+        if (items.indexOf('strokeWidth') > -1) {
+            toolbarItems.push({ id: id + '_strokeWidth', cssClass: 'top-icon e-size', tooltipText: this.l10n.getConstant('TextOutlineWidth'), align: 'Center',
+                type: 'Input', template: '<button id="' + id + '_borderWidthBtn"></button>' });
+        }
         if (items.indexOf('transparency') > -1) {
             toolbarItems.push({ id: id + '_transparency', prefixIcon: 'e-opacity',
                 tooltipText: this.l10n.getConstant('Opacity'), align: 'Center' });
@@ -2628,6 +2775,9 @@ var ToolbarModule = /** @class */ (function () {
             created: function () {
                 _this.renderAnnotationBtn(true);
                 _this.createTextColor(items);
+                _this.createStrokeTextColor(items);
+                _this.createShapeBtn(items);
+                _this.createBackgroundColor(items);
                 _this.createTextBtn(items);
                 _this.createZOrderBtn(items);
                 _this.wireZoomBtnEvents();
@@ -2675,7 +2825,7 @@ var ToolbarModule = /** @class */ (function () {
                 },
                 presetColors: this.presetColors,
                 change: function (args) {
-                    parent.updateFontColor(args.value);
+                    parent.updateFontColor(args.value, 'Text');
                     strokeDDB_2.element.children[0].style.backgroundColor = args.currentValue.rgba;
                     strokeDDB_2.toggle();
                     if (parent.activeObj.activePoint.width !== 0 || parent.activeObj.activePoint.height !== 0) {
@@ -2698,7 +2848,9 @@ var ToolbarModule = /** @class */ (function () {
                     if (Browser.isDevice) {
                         parenElem.style.top = strokeDDB_2.element.getBoundingClientRect().top -
                             parenElem.offsetHeight + 'px';
-                        parenElem.style.left = parent.element.offsetLeft + 'px';
+                        if (window.innerWidth <= 520) {
+                            parenElem.style.left = parent.element.offsetLeft + 'px';
+                        }
                     }
                 },
                 target: '.e-text-fontt-color',
@@ -2711,23 +2863,179 @@ var ToolbarModule = /** @class */ (function () {
                 = '#fff';
         }
     };
+    ToolbarModule.prototype.createBackgroundColor = function (items) {
+        var _this = this;
+        var parent = this.parent;
+        var id = parent.element.id;
+        if (items.indexOf('fillColor') > -1 && parent.element.querySelector('.e-template.e-text-background-color')) {
+            parent.element.querySelector('.e-template.e-text-background-color').appendChild(parent.createElement('input', {
+                id: id + '_text_bgColor'
+            }));
+            var backgroundColor_1 = new ColorPicker({
+                modeSwitcher: true, noColor: true, value: '', inline: true,
+                showButtons: false, mode: 'Palette', cssClass: 'e-text-fontt-color',
+                beforeModeSwitch: function (args) {
+                    _this.popupLeft = args.element.offsetParent.style.left;
+                    _this.beforeModeSwitch(args, backgroundColor_1);
+                },
+                presetColors: {
+                    'custom': ['', '#f44336', '#e91e63', '#9c27b0', '#673ab7', '#2196f3',
+                        '#03a9f4', '#00bcd4', '#009688', '#ffeb3b', '#ffffff', '#ffebee', '#fce4ec', '#f3e5f5', '#ede7f6', '#e3f2fd',
+                        '#e1f5fe', '#e0f7fa', '#e0f2f1', '#fffde7', '#f2f2f2', '#ffcdd2', '#f8bbd0', '#e1bee7', '#d1c4e9', '#bbdefb',
+                        '#b3e5fc', '#b2ebf2', '#b2dfdb', '#fff9c4', '#e6e6e6', '#ef9a9a', '#f48fb1', '#ce93d8', '#b39ddb', '#90caf9',
+                        '#81d4fa', '#80deea', '#80cbc4', '#fff59d', '#cccccc', '#e57373', '#f06292', '#ba68c8', '#9575cd', '#64b5f6',
+                        '#4fc3f7', '#4dd0e1', '#4db6ac', '#fff176', '#b3b3b3', '#ef5350', '#ec407a', '#ab47bc', '#7e57c2', '#42a5f5',
+                        '#29b6f6', '#26c6da', '#26a69a', '#ffee58', '#999999', '#e53935', '#d81b60', '#8e24aa', '#5e35b1', '#1e88e5',
+                        '#039be5', '#00acc1', '#00897b', '#fdd835', '#808080', '#d32f2f', '#c2185b', '#7b1fa2', '#512da8', '#1976d2',
+                        '#0288d1', '#0097a7', '#00796b', '#fbc02d', '#666666', '#c62828', '#ad1457', '#6a1b9a', '#4527a0', '#1565c0',
+                        '#0277bd', '#00838f', '#00695c', '#f9a825', '#4d4d4d', '#b71c1c', '#880e4f', '#4a148c', '#311b92', '#0d47a1',
+                        '#01579b', '#006064', '#004d40', '#f57f17']
+                },
+                beforeTileRender: function (args) {
+                    if (args.value === '') {
+                        args.element.classList.add('e-nocolor-item');
+                    }
+                },
+                change: function (args) {
+                    parent.updateFontColor(args.value, 'Background');
+                    if (args.currentValue.rgba === '') {
+                        strokeDDB_3.element.children[0].classList.add('e-nocolor-item');
+                    }
+                    else {
+                        strokeDDB_3.element.children[0].classList.remove('e-nocolor-item');
+                        strokeDDB_3.element.children[0].style.backgroundColor = args.currentValue.rgba;
+                    }
+                    strokeDDB_3.toggle();
+                    if (parent.activeObj.activePoint.width !== 0 || parent.activeObj.activePoint.height !== 0) {
+                        parent.notify('undo-redo', { prop: 'updateUndoRedoStack', onPropertyChange: false });
+                    }
+                },
+                onModeSwitch: function (args) {
+                    if (Browser.isDevice) {
+                        args.element.parentElement.parentElement.style.left = _this.popupLeft;
+                        args.element.parentElement.parentElement.style.top = (strokeDDB_3.element.getBoundingClientRect().top - args.element.parentElement.parentElement.offsetHeight) + 'px';
+                    }
+                },
+                beforeClose: function () {
+                    strokeDDB_3.toggle();
+                }
+            }, '#' + id + '_text_bgColor');
+            var strokeDDB_3 = new DropDownButton({
+                open: function (args) {
+                    var parenElem = args.element.parentElement;
+                    if (Browser.isDevice) {
+                        parenElem.style.top = strokeDDB_3.element.getBoundingClientRect().top -
+                            parenElem.offsetHeight + 'px';
+                        if (window.innerWidth <= 520) {
+                            parenElem.style.left = parent.element.offsetLeft + 'px';
+                        }
+                    }
+                },
+                target: '.e-text-fontt-color',
+                iconCss: 'e-dropdownbtn-preview',
+                cssClass: 'e-ie-ddb-popup'
+            }, '#' + id + '_bgColorBtn');
+            backgroundColor_1.inline = true;
+            backgroundColor_1.value = backgroundColor_1.getValue(backgroundColor_1.value, 'rgba');
+            parent.element.querySelector('.e-text-background-color.e-template .e-dropdownbtn-preview').style.background
+                = '#fff';
+        }
+    };
+    ToolbarModule.prototype.createStrokeTextColor = function (items) {
+        var _this = this;
+        var parent = this.parent;
+        var id = parent.element.id;
+        if (items.indexOf('strokeColor') > -1 && parent.element.querySelector('.e-template.e-stroke-text-font-color')) {
+            parent.element.querySelector('.e-template.e-stroke-text-font-color').appendChild(parent.createElement('input', {
+                id: id + '_stroke_text'
+            }));
+            var fontColor_2 = new ColorPicker({
+                modeSwitcher: true, noColor: true, value: '', inline: true,
+                showButtons: false, mode: 'Palette', cssClass: 'e-text-fontt-color',
+                beforeModeSwitch: function (args) {
+                    _this.popupLeft = args.element.offsetParent.style.left;
+                    _this.beforeModeSwitch(args, fontColor_2);
+                },
+                presetColors: {
+                    'custom': ['', '#f44336', '#e91e63', '#9c27b0', '#673ab7', '#2196f3',
+                        '#03a9f4', '#00bcd4', '#009688', '#ffeb3b', '#ffffff', '#ffebee', '#fce4ec', '#f3e5f5', '#ede7f6', '#e3f2fd',
+                        '#e1f5fe', '#e0f7fa', '#e0f2f1', '#fffde7', '#f2f2f2', '#ffcdd2', '#f8bbd0', '#e1bee7', '#d1c4e9', '#bbdefb',
+                        '#b3e5fc', '#b2ebf2', '#b2dfdb', '#fff9c4', '#e6e6e6', '#ef9a9a', '#f48fb1', '#ce93d8', '#b39ddb', '#90caf9',
+                        '#81d4fa', '#80deea', '#80cbc4', '#fff59d', '#cccccc', '#e57373', '#f06292', '#ba68c8', '#9575cd', '#64b5f6',
+                        '#4fc3f7', '#4dd0e1', '#4db6ac', '#fff176', '#b3b3b3', '#ef5350', '#ec407a', '#ab47bc', '#7e57c2', '#42a5f5',
+                        '#29b6f6', '#26c6da', '#26a69a', '#ffee58', '#999999', '#e53935', '#d81b60', '#8e24aa', '#5e35b1', '#1e88e5',
+                        '#039be5', '#00acc1', '#00897b', '#fdd835', '#808080', '#d32f2f', '#c2185b', '#7b1fa2', '#512da8', '#1976d2',
+                        '#0288d1', '#0097a7', '#00796b', '#fbc02d', '#666666', '#c62828', '#ad1457', '#6a1b9a', '#4527a0', '#1565c0',
+                        '#0277bd', '#00838f', '#00695c', '#f9a825', '#4d4d4d', '#b71c1c', '#880e4f', '#4a148c', '#311b92', '#0d47a1',
+                        '#01579b', '#006064', '#004d40', '#f57f17']
+                },
+                beforeTileRender: function (args) {
+                    if (args.value === '') {
+                        args.element.classList.add('e-nocolor-item');
+                    }
+                },
+                change: function (args) {
+                    parent.updateStrokeTextColor(args.value);
+                    if (args.currentValue.rgba === '') {
+                        strokeDDB_4.element.children[0].classList.add('e-nocolor-item');
+                    }
+                    else {
+                        strokeDDB_4.element.children[0].classList.remove('e-nocolor-item');
+                        strokeDDB_4.element.children[0].style.backgroundColor = args.currentValue.rgba;
+                    }
+                    strokeDDB_4.toggle();
+                    if (parent.activeObj.activePoint.width !== 0 || parent.activeObj.activePoint.height !== 0) {
+                        parent.notify('undo-redo', { prop: 'updateUndoRedoStack', onPropertyChange: false });
+                    }
+                },
+                onModeSwitch: function (args) {
+                    if (Browser.isDevice) {
+                        args.element.parentElement.parentElement.style.left = _this.popupLeft;
+                        args.element.parentElement.parentElement.style.top = (strokeDDB_4.element.getBoundingClientRect().top - args.element.parentElement.parentElement.offsetHeight) + 'px';
+                    }
+                },
+                beforeClose: function () {
+                    strokeDDB_4.toggle();
+                }
+            }, '#' + id + '_stroke_text');
+            var strokeDDB_4 = new DropDownButton({
+                open: function (args) {
+                    var parenElem = args.element.parentElement;
+                    if (Browser.isDevice) {
+                        parenElem.style.top = strokeDDB_4.element.getBoundingClientRect().top -
+                            parenElem.offsetHeight + 'px';
+                        if (window.innerWidth <= 520) {
+                            parenElem.style.left = parent.element.offsetLeft + 'px';
+                        }
+                    }
+                },
+                target: '.e-text-fontt-color',
+                iconCss: 'e-dropdownbtn-preview',
+                cssClass: 'e-ie-ddb-popup'
+            }, '#' + id + '_strokeTextColorBtn');
+            fontColor_2.inline = true;
+            fontColor_2.value = fontColor_2.getValue(fontColor_2.value, 'rgba');
+            parent.element.querySelector('.e-stroke-text-font-color.e-template .e-dropdownbtn-preview').style.background
+                = '#fff';
+        }
+    };
     ToolbarModule.prototype.createTextBtn = function (items) {
         var _this = this;
         var parent = this.parent;
         var id = parent.element.id;
         if (items.indexOf('fontFamily') > -1) {
             var fontNameBtn = document.getElementById(id + '_fontFamilyBtn');
-            var spanElem_3 = document.createElement('span');
+            var spanElem_4 = document.createElement('span');
             if (Browser.isDevice) {
-                spanElem_3.innerHTML = 'ABC';
-                spanElem_3.setAttribute('style', 'font-family: ' + parent.fontFamily.default.toLowerCase() + '\'');
+                spanElem_4.innerHTML = 'ABC';
+                spanElem_4.setAttribute('style', 'font-family: ' + parent.fontFamily.default.toLowerCase() + '\'');
             }
             else {
-                spanElem_3.innerHTML = parent.fontFamily.default;
+                spanElem_4.innerHTML = parent.fontFamily.default;
             }
-            spanElem_3.className = 'e-text-font-family';
+            spanElem_4.className = 'e-text-font-family';
             if (fontNameBtn) {
-                fontNameBtn.appendChild(spanElem_3);
+                fontNameBtn.appendChild(spanElem_4);
             }
             var fontFamilyBtn_1 = new DropDownButton({ items: this.getFontFamilyItems(),
                 cssClass: 'e-font-family',
@@ -2754,12 +3062,16 @@ var ToolbarModule = /** @class */ (function () {
                 },
                 select: function (args) {
                     _this.triggerTbarClickEvent(args);
-                    spanElem_3.textContent = args.item.text;
+                    spanElem_4.textContent = args.item.text;
                     if (Browser.isDevice) {
-                        spanElem_3.setAttribute('style', 'font-family:' + args.item.id);
+                        spanElem_4.setAttribute('style', 'font-family:' + args.item.id);
                     }
                     parent.updateFontFamily(args.item.id);
                     parent.notify('undo-redo', { prop: 'updateUndoRedoStack', onPropertyChange: false });
+                    var toolbar = document.getElementById(parent.element.id + '_toolbar');
+                    if (toolbar && toolbar.classList.contains('e-control')) {
+                        getComponent(toolbar, 'toolbar').refreshOverflow();
+                    }
                 }
             });
             fontFamilyBtn_1.appendTo('#' + id + '_fontFamilyBtn');
@@ -2814,9 +3126,9 @@ var ToolbarModule = /** @class */ (function () {
                 toolbarElement.innerHTML = '';
             }
             if (toolbarElement && (this.defToolbarItems.length > 0 || parent.toolbar && parent.toolbar.length > 0 && parent.toolbar.indexOf('Open') === -1)) {
-                var toolbar_11 = getComponent(toolbarElement, 'toolbar');
-                if (!isNullOrUndefined(toolbar_11)) {
-                    toolbar_11.destroy();
+                var toolbar_13 = getComponent(toolbarElement, 'toolbar');
+                if (!isNullOrUndefined(toolbar_13)) {
+                    toolbar_13.destroy();
                     document.getElementById(parent.element.id + '_toolbar').innerHTML = '';
                 }
             }
@@ -2868,6 +3180,9 @@ var ToolbarModule = /** @class */ (function () {
                 else if (parent.activeObj.shape === 'image') {
                     args.toolbarItems = ['flip', 'z-order', 'duplicate', 'remove', 'transparency'];
                 }
+                else if (parent.activeObj.shape === 'rectangle') {
+                    args.toolbarItems = ['fillColor', 'strokeColor', 'strokeWidth', 'borderRadius', 'z-order', 'duplicate', 'remove'];
+                }
                 else {
                     args.toolbarItems = ['fillColor', 'strokeColor', 'strokeWidth', 'z-order', 'duplicate', 'remove'];
                 }
@@ -2886,7 +3201,7 @@ var ToolbarModule = /** @class */ (function () {
                 if (Browser.isDevice) {
                     this.initMainToolbar(false, true, true);
                 }
-                args.toolbarItems = ['fontFamily', 'fontSize', 'fontColor', 'bold', 'italic', 'z-order', 'duplicate', 'remove', 'text'];
+                args.toolbarItems = ['fontFamily', 'fontSize', 'fontColor', 'fillColor', 'strokeColor', 'strokeWidth', 'bold', 'italic', 'z-order', 'duplicate', 'remove', 'text'];
                 this.initTextToolbarItem(args.toolbarItems);
                 break;
             case 'pen':
@@ -2943,6 +3258,9 @@ var ToolbarModule = /** @class */ (function () {
                 if (Browser.isDevice && this.isToolbar()) {
                     this.updateContextualToolbar('color', 'straighten', true);
                 }
+                if (parent.isMaskImage) {
+                    this.refreshToolbar('main');
+                }
                 break;
             case 'frame':
                 this.isFrameToolbar = true;
@@ -2963,11 +3281,59 @@ var ToolbarModule = /** @class */ (function () {
                 }
                 parent.notify('draw', { prop: 'render-image', value: { isMouseWheel: null, isPreventClearRect: null, isFrame: true } });
                 break;
+            case 'redact':
+                if (Browser.isDevice) {
+                    this.initMainToolbar(false, true, true);
+                    this.initMainToolbar(false, true, true, null, null, null, true);
+                }
+                else {
+                    this.initMainToolbar(isApplyBtn, Browser.isDevice, null, null, null, null, true);
+                }
+                this.enableDisableTbrBtn();
+                if (parent.activeObj.redactType === 'blur') {
+                    var redactBlurElement = parent.element.querySelector('#' + id + '_' + 'redactBlur');
+                    if (redactBlurElement) {
+                        redactBlurElement.classList.add('e-selected-btn');
+                    }
+                }
+                else {
+                    var pixelateElement = parent.element.querySelector('#' + id + '_' + 'pixelate');
+                    if (pixelateElement) {
+                        pixelateElement.classList.add('e-selected-btn');
+                    }
+                }
+                this.redactSlider(parent.activeObj.redactType);
+                break;
         }
         this.refreshDropDownBtn(isCropping);
         this.updateKBDNavigation(type);
         this.currToolbar = type;
     };
+    ToolbarModule.prototype.updateRedactObj = function () {
+        var parent = this.parent;
+        var objColl = extend([], parent.objColl, [], true);
+        parent.objColl = [];
+        var activeObj = extend({}, parent.activeObj, {}, true);
+        parent.notify('shape', { prop: 'refreshActiveObj', onPropertyChange: false });
+        parent.notify('draw', { prop: 'render-image', value: { isMouseWheel: null, isPreventClearRect: null, isFrame: true } });
+        parent.objColl = objColl;
+        for (var i = 0; i < parent.objColl.length; i++) {
+            var obj = parent.objColl[i];
+            if (obj.shape === 'redact') {
+                obj.redactImage = parent.createElement('canvas');
+                obj.redactImage.width = obj.activePoint.width;
+                obj.redactImage.height = obj.activePoint.height;
+                obj.redactImage.getContext('2d').drawImage(parent.lowerCanvas, obj.activePoint.startX, obj.activePoint.startY, obj.activePoint.width, obj.activePoint.height, 0, 0, obj.redactImage.width, obj.redactImage.height);
+            }
+        }
+        parent.isCropTab = false;
+        parent.notify('draw', { prop: 'render-image', value: { isMouseWheel: null, isPreventClearRect: null, isFrame: true } });
+        parent.isCropTab = true;
+        if (activeObj) {
+            parent.notify('draw', { prop: 'drawObject', onPropertyChange: false, value: { canvas: 'duplicate', obj: activeObj,
+                    isCropRatio: null, points: null, isPreventDrag: true } });
+        }
+    };
     ToolbarModule.prototype.updateKBDNavigation = function (type) {
         var parent = this.parent;
         var id = parent.element.id;
@@ -2994,6 +3360,12 @@ var ToolbarModule = /** @class */ (function () {
                 if (type === 'resize' && tempElem) {
                     tbarInitialBtn_1 = tempElem;
                 }
+                if (type === 'filter') {
+                    var defaultFilter_1 = document.querySelector('#' + id + '_defaultCanvas');
+                    if (defaultFilter_1) {
+                        setTimeout(function () { return defaultFilter_1.focus(); }, 50);
+                    }
+                }
                 if (tbarInitialBtn_1) {
                     if (type === 'main') {
                         setTimeout(function () { return tbarInitialBtn_1.focus(); }, 50);
@@ -3010,7 +3382,7 @@ var ToolbarModule = /** @class */ (function () {
         if (isNullOrUndefined(isTransform)) {
             parent.notify('draw', { prop: 'setTempStraightenZoomDeg' });
             parent.tempStraighten = parent.transform.straighten;
-            if (parent.currObjType.isFiltered) {
+            if (parent.currObjType.isFiltered || parent.currObjType.isRedact) {
                 parent.okBtn();
             }
             parent.isStraightening = true;
@@ -3274,18 +3646,20 @@ var ToolbarModule = /** @class */ (function () {
                 change: function (args) {
                     parent.updatePenStrokeColor(args.currentValue.hex);
                     _this.selFhdColor = args.currentValue.hex;
-                    strokeDDB_3.element.children[0].style.backgroundColor = args.currentValue.rgba;
-                    strokeDDB_3.toggle();
+                    strokeDDB_5.element.children[0].style.backgroundColor = args.currentValue.rgba;
+                    strokeDDB_5.toggle();
                     parent.notify('undo-redo', { prop: 'updateUndoRedoStack', value: { isPenDraw: true } });
                 }
             }, '#' + id + '_pen_stroke');
-            var strokeDDB_3 = new DropDownButton({
+            var strokeDDB_5 = new DropDownButton({
                 open: function (args) {
                     var parentElem = args.element.parentElement;
                     if (Browser.isDevice) {
-                        parentElem.style.top = strokeDDB_3.element.getBoundingClientRect().top -
+                        parentElem.style.top = strokeDDB_5.element.getBoundingClientRect().top -
                             parentElem.offsetHeight + 'px';
-                        parentElem.style.left = parent.element.offsetLeft + 'px';
+                        if (window.innerWidth <= 520) {
+                            parentElem.style.left = parent.element.offsetLeft + 'px';
+                        }
                     }
                 },
                 target: '.e-pen-color',
@@ -3325,56 +3699,59 @@ var ToolbarModule = /** @class */ (function () {
         ];
         if (items.indexOf('strokeWidth') > -1) {
             var strokeWidthBtn = document.getElementById(id + '_penStrokeWidth');
-            var spanElem_4 = document.createElement('span');
+            var spanElem_5 = document.createElement('span');
             var indexObj = { freehandSelectedIndex: null };
             parent.notify('freehand-draw', { prop: 'getFreehandSelectedIndex', onPropertyChange: false, value: { obj: indexObj } });
             if (!isNullOrUndefined(indexObj['freehandSelectedIndex']) && indexObj['freehandSelectedIndex'] > -1) {
-                spanElem_4.innerHTML = this.getPenStroke(parent.pointColl[indexObj['freehandSelectedIndex']].strokeWidth);
+                spanElem_5.innerHTML = this.getPenStroke(parent.pointColl[indexObj['freehandSelectedIndex']].strokeWidth);
             }
             else {
                 var obj = { penStrokeWidth: 2 };
                 parent.notify('freehand-draw', { prop: 'getPenStrokeWidth', onPropertyChange: false, value: { obj: obj } });
                 if (obj['penStrokeWidth']) {
-                    spanElem_4.innerHTML = this.getPenStroke(obj['penStrokeWidth']);
+                    spanElem_5.innerHTML = this.getPenStroke(obj['penStrokeWidth']);
                 }
                 else {
-                    spanElem_4.innerHTML = this.l10n.getConstant('Small');
+                    spanElem_5.innerHTML = this.l10n.getConstant('Small');
                 }
             }
-            spanElem_4.className = 'e-pen-stroke-width';
-            strokeWidthBtn.appendChild(spanElem_4);
-            var drpDownBtn_4 = new DropDownButton({ items: strokeWidthItems,
+            spanElem_5.className = 'e-pen-stroke-width';
+            strokeWidthBtn.appendChild(spanElem_5);
+            var drpDownBtn_5 = new DropDownButton({ items: strokeWidthItems,
                 open: function (args) {
                     if (Browser.isDevice) {
-                        args.element.parentElement.style.top = drpDownBtn_4.element.getBoundingClientRect().top -
+                        args.element.parentElement.style.top = drpDownBtn_5.element.getBoundingClientRect().top -
                             args.element.parentElement.offsetHeight + 'px';
                     }
-                    var activeBtn = spanElem_4.innerHTML;
+                    var activeBtn = spanElem_5.innerHTML;
                     args.element.querySelector('[aria-label = ' + '"' + activeBtn + '"' + ']').classList.add('e-selected-btn');
                 },
                 select: function (args) {
                     _this.triggerTbarClickEvent(args);
-                    spanElem_4.textContent = args.item.text;
+                    spanElem_5.textContent = args.item.text;
                     parent.updatePenStrokeWidth(args.item.id);
                     if (Browser.isDevice) {
                         if (document.getElementById(id + '_bottomToolbar')) {
                             /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
-                            var toolbar_12 = getComponent(id + '_bottomToolbar', 'toolbar');
-                            toolbar_12.refreshOverflow();
+                            var toolbar_14 = getComponent(id + '_bottomToolbar', 'toolbar');
+                            toolbar_14.refreshOverflow();
                         }
                     }
                     else {
                         if (document.getElementById(id + '_toolbar')) {
                             /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
-                            var toolbar_13 = getComponent(id + '_toolbar', 'toolbar');
-                            toolbar_13.refreshOverflow();
+                            var toolbar_15 = getComponent(id + '_toolbar', 'toolbar');
+                            toolbar_15.refreshOverflow();
                         }
                     }
+                    var widthObj = { penStrokeWidth: null };
+                    parent.notify('freehand-draw', { prop: 'getPenStrokeWidth', onPropertyChange: false, value: { obj: widthObj } });
                     parent.notify('undo-redo', { prop: 'updateUndoRedoStack', value: { isPenDraw: true } });
+                    parent.notify('freehand-draw', { prop: 'setPenStrokeWidth', onPropertyChange: false, value: { value: widthObj['penStrokeWidth'] } });
                 }
             });
             // Render initialized DropDownButton.
-            drpDownBtn_4.appendTo('#' + id + '_penStrokeWidth');
+            drpDownBtn_5.appendTo('#' + id + '_penStrokeWidth');
         }
     };
     ToolbarModule.prototype.getPenStroke = function (value) {
@@ -3554,7 +3931,9 @@ var ToolbarModule = /** @class */ (function () {
                     var parentElem = args.element.parentElement;
                     parentElem.style.top = fillDDB.element.getBoundingClientRect().top -
                         parentElem.offsetHeight + 'px';
-                    parentElem.style.left = parent.element.offsetLeft + 'px';
+                    if (window.innerWidth <= 520) {
+                        parentElem.style.left = parent.element.offsetLeft + 'px';
+                    }
                 }
             },
             target: '.e-frame-gradient-fill-color',
@@ -3623,7 +4002,9 @@ var ToolbarModule = /** @class */ (function () {
                     var parentElem = args.element.parentElement;
                     parentElem.style.top = fillDDB.element.getBoundingClientRect().top -
                         parentElem.offsetHeight + 'px';
-                    parentElem.style.left = parent.element.offsetLeft + 'px';
+                    if (window.innerWidth <= 520) {
+                        parentElem.style.left = parent.element.offsetLeft + 'px';
+                    }
                 }
             },
             target: '.e-frame-fill-color',
@@ -3695,15 +4076,15 @@ var ToolbarModule = /** @class */ (function () {
                 if (Browser.isDevice) {
                     if (document.getElementById(id + '_bottomToolbar')) {
                         /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
-                        var toolbar_14 = getComponent(id + '_bottomToolbar', 'toolbar');
-                        toolbar_14.refreshOverflow();
+                        var toolbar_16 = getComponent(id + '_bottomToolbar', 'toolbar');
+                        toolbar_16.refreshOverflow();
                     }
                 }
                 else {
                     if (document.getElementById(id + '_toolbar')) {
                         /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
-                        var toolbar_15 = getComponent(id + '_toolbar', 'toolbar');
-                        toolbar_15.refreshOverflow();
+                        var toolbar_17 = getComponent(id + '_toolbar', 'toolbar');
+                        toolbar_17.refreshOverflow();
                     }
                 }
             }
@@ -3773,15 +4154,15 @@ var ToolbarModule = /** @class */ (function () {
                 if (Browser.isDevice) {
                     if (document.getElementById(id + '_bottomToolbar')) {
                         /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
-                        var toolbar_16 = getComponent(id + '_bottomToolbar', 'toolbar');
-                        toolbar_16.refreshOverflow();
+                        var toolbar_18 = getComponent(id + '_bottomToolbar', 'toolbar');
+                        toolbar_18.refreshOverflow();
                     }
                 }
                 else {
                     if (document.getElementById(id + '_toolbar')) {
                         /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
-                        var toolbar_17 = getComponent(id + '_toolbar', 'toolbar');
-                        toolbar_17.refreshOverflow();
+                        var toolbar_19 = getComponent(id + '_toolbar', 'toolbar');
+                        toolbar_19.refreshOverflow();
                     }
                 }
             }
@@ -3851,15 +4232,15 @@ var ToolbarModule = /** @class */ (function () {
                 if (Browser.isDevice) {
                     if (document.getElementById(id + '_bottomToolbar')) {
                         /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
-                        var toolbar_18 = getComponent(id + '_bottomToolbar', 'toolbar');
-                        toolbar_18.refreshOverflow();
+                        var toolbar_20 = getComponent(id + '_bottomToolbar', 'toolbar');
+                        toolbar_20.refreshOverflow();
                     }
                 }
                 else {
                     if (document.getElementById(id + '_toolbar')) {
                         /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
-                        var toolbar_19 = getComponent(id + '_toolbar', 'toolbar');
-                        toolbar_19.refreshOverflow();
+                        var toolbar_21 = getComponent(id + '_toolbar', 'toolbar');
+                        toolbar_21.refreshOverflow();
                     }
                 }
             }
@@ -3931,15 +4312,15 @@ var ToolbarModule = /** @class */ (function () {
                 if (Browser.isDevice) {
                     if (document.getElementById(id + '_bottomToolbar')) {
                         /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
-                        var toolbar_20 = getComponent(id + '_bottomToolbar', 'toolbar');
-                        toolbar_20.refreshOverflow();
+                        var toolbar_22 = getComponent(id + '_bottomToolbar', 'toolbar');
+                        toolbar_22.refreshOverflow();
                     }
                 }
                 else {
                     if (document.getElementById(id + '_toolbar')) {
                         /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
-                        var toolbar_21 = getComponent(id + '_toolbar', 'toolbar');
-                        toolbar_21.refreshOverflow();
+                        var toolbar_23 = getComponent(id + '_toolbar', 'toolbar');
+                        toolbar_23.refreshOverflow();
                     }
                 }
             }
@@ -4008,15 +4389,15 @@ var ToolbarModule = /** @class */ (function () {
                 if (Browser.isDevice) {
                     if (document.getElementById(id + '_bottomToolbar')) {
                         /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
-                        var toolbar_22 = getComponent(id + '_bottomToolbar', 'toolbar');
-                        toolbar_22.refreshOverflow();
+                        var toolbar_24 = getComponent(id + '_bottomToolbar', 'toolbar');
+                        toolbar_24.refreshOverflow();
                     }
                 }
                 else {
                     if (document.getElementById(id + '_toolbar')) {
                         /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
-                        var toolbar_23 = getComponent(id + '_toolbar', 'toolbar');
-                        toolbar_23.refreshOverflow();
+                        var toolbar_25 = getComponent(id + '_toolbar', 'toolbar');
+                        toolbar_25.refreshOverflow();
                     }
                 }
             }
@@ -4083,15 +4464,15 @@ var ToolbarModule = /** @class */ (function () {
                 if (Browser.isDevice) {
                     if (document.getElementById(id + '_bottomToolbar')) {
                         /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
-                        var toolbar_24 = getComponent(id + '_bottomToolbar', 'toolbar');
-                        toolbar_24.refreshOverflow();
+                        var toolbar_26 = getComponent(id + '_bottomToolbar', 'toolbar');
+                        toolbar_26.refreshOverflow();
                     }
                 }
                 else {
                     if (document.getElementById(id + '_toolbar')) {
                         /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
-                        var toolbar_25 = getComponent(id + '_toolbar', 'toolbar');
-                        toolbar_25.refreshOverflow();
+                        var toolbar_27 = getComponent(id + '_toolbar', 'toolbar');
+                        toolbar_27.refreshOverflow();
                     }
                 }
             }
@@ -4170,6 +4551,9 @@ var ToolbarModule = /** @class */ (function () {
             filter.style.height = '100px';
             parent.notify('filter', { prop: 'updateAdj', value: { type: type, value: null, isPreview: true, ctx: ctx } });
             ctx.drawImage(this.inMemoryCanvas, 0, 0, 300, 150);
+            if (parent.isSafari) {
+                parent.notify('filter', { prop: 'apply-filter', onPropertyChange: false, value: { context: ctx } });
+            }
         }
     };
     ToolbarModule.prototype.getQuickAccessToolbarItem = function (isPenEdit) {
@@ -4181,7 +4565,9 @@ var ToolbarModule = /** @class */ (function () {
             if (parent.activeObj.shape === 'image') {
                 toolbarItems.push('Flip');
             }
-            toolbarItems.push('BringToFront');
+            if (parent.activeObj.shape !== 'redact') {
+                toolbarItems.push('BringToFront');
+            }
             toolbarItems.push('Clone');
             toolbarItems.push('Delete');
             if (parent.activeObj.shape === 'text') {
@@ -4254,16 +4640,19 @@ var ToolbarModule = /** @class */ (function () {
                 toolbarObj.appendTo('#' + id + '_quickAccessToolbar');
             }
             var height = this.toolbarHeight && this.toolbarHeight !== 0 ? this.toolbarHeight : qtArea.clientHeight;
+            var wrapperElement = parent.element.querySelector('#' + id + '_headWrapper');
             if (isNullOrUndefined(isPenEdit) && (parent.activeObj.activePoint.width !== 0 ||
                 parent.activeObj.activePoint.height !== 0 ||
                 (parent.activeObj.shape && parent.activeObj.shape === 'path' && parent.activeObj.pointColl.length > 0))) {
                 var orderObj = { order: null };
                 parent.notify('shape', { prop: 'getHighestOrder', onPropertyChange: false, value: { obj: orderObj } });
-                if (parent.activeObj.order > orderObj['order']) {
-                    document.getElementById(parent.element.id + '_bringToFront').classList.add('e-disabled');
+                if (parent.activeObj.order > orderObj['order'] && document.getElementById(parent.element.id + '_bringToFront')) {
+                    document.getElementById(parent.element.id + '_bringToFront').classList.add('e-overlay');
                 }
                 else {
-                    document.getElementById(parent.element.id + '_bringToFront').classList.remove('e-disabled');
+                    if (document.getElementById(parent.element.id + '_bringToFront')) {
+                        document.getElementById(parent.element.id + '_bringToFront').classList.remove('e-overlay');
+                    }
                 }
                 qtArea.style.width = 'auto';
                 parent.activeObj.activePoint.width = Math.abs(parent.activeObj.activePoint.width);
@@ -4293,10 +4682,19 @@ var ToolbarModule = /** @class */ (function () {
                     var diff = (x + (width / 2)) - (parseFloat(qtArea.style.left) + (qtArea.clientWidth / 2));
                     qtArea.style.left = parseFloat(qtArea.style.left) + diff + 'px';
                 }
+                if (wrapperElement) {
+                    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                    height = wrapperElement.offsetHeight + height;
+                }
                 if (y - (height + (height / 1.5)) < parent.img.destTop) {
                     qtArea.style.top = parent.img.destTop + 'px';
+                    if (wrapperElement) {
+                        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                        qtArea.style.top = (parent.img.destTop < 0 ? 0 : parent.img.destTop) + wrapperElement.offsetHeight + 'px';
+                    }
                 }
                 else {
+                    height = this.toolbarHeight;
                     qtArea.style.top = y - (height + (height / 1.5)) + 'px';
                 }
             }
@@ -4306,11 +4704,13 @@ var ToolbarModule = /** @class */ (function () {
                 var orderObj = { order: null };
                 parent.notify('shape', { prop: 'getHighestOrder', onPropertyChange: false, value: { obj: orderObj } });
                 // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                if (parent.getObjFromId(parent.pointColl[indexObj['freehandSelectedIndex']].id).order >= orderObj['order']) {
-                    document.getElementById(parent.element.id + '_bringToFront').classList.add('e-disabled');
+                if (parent.getObjFromId(parent.pointColl[indexObj['freehandSelectedIndex']].id).order >= orderObj['order'] && document.getElementById(parent.element.id + '_bringToFront')) {
+                    document.getElementById(parent.element.id + '_bringToFront').classList.add('e-overlay');
                 }
                 else {
-                    document.getElementById(parent.element.id + '_bringToFront').classList.remove('e-disabled');
+                    if (document.getElementById(parent.element.id + '_bringToFront')) {
+                        document.getElementById(parent.element.id + '_bringToFront').classList.remove('e-overlay');
+                    }
                 }
                 var obj = { activePoint: null };
                 parent.notify('freehand-draw', { prop: 'getSqPtFD',
@@ -4430,7 +4830,7 @@ var ToolbarModule = /** @class */ (function () {
             var orderObj = { order: null };
             switch (type) {
                 case 'duplicate':
-                    if (!parent.element.querySelector('#' + id + '_duplicate').classList.contains('e-disabled')) {
+                    if (!parent.element.querySelector('#' + id + '_duplicate').classList.contains('e-overlay')) {
                         this.refreshSlider();
                         if (!pathObject['isNewPath'] && JSON.stringify(object['tempObj']) === JSON.stringify(parent.activeObj)) {
                             isPreventUndoRedo = true;
@@ -4439,14 +4839,14 @@ var ToolbarModule = /** @class */ (function () {
                     }
                     break;
                 case 'remove':
-                    if (!parent.element.querySelector('#' + id + '_remove').classList.contains('e-disabled')) {
+                    if (!parent.element.querySelector('#' + id + '_remove').classList.contains('e-overlay')) {
                         parent.noPushUndo = false;
                         this.refreshSlider();
                         parent.notify('selection', { prop: 'deleteItem', onPropertyChange: false });
                     }
                     break;
                 case 'edittext':
-                    if (!parent.element.querySelector('#' + id + '_editText').classList.contains('e-disabled')) {
+                    if (!parent.element.querySelector('#' + id + '_editText').classList.contains('e-overlay')) {
                         this.editText();
                     }
                     break;
@@ -4475,7 +4875,7 @@ var ToolbarModule = /** @class */ (function () {
                     parent.notify('undo-redo', { prop: 'updateUndoRedoStack', onPropertyChange: false });
                     break;
                 case 'bringtofront':
-                    if (!parent.element.querySelector('#' + id + '_bringToFront').classList.contains('e-disabled')) {
+                    if (!parent.element.querySelector('#' + id + '_bringToFront').classList.contains('e-overlay')) {
                         parent.notify('freehand-draw', { prop: 'getFreehandSelectedIndex', onPropertyChange: false, value: { obj: indexObj } });
                         shapeId = indexObj['freehandSelectedIndex'] !== null ? parent.pointColl[indexObj['freehandSelectedIndex']].id :
                             parent.activeObj.currIndex;
@@ -4494,10 +4894,10 @@ var ToolbarModule = /** @class */ (function () {
                             isDisabled = order > orderObj['order'] ? true : false;
                         }
                         if (isDisabled) {
-                            document.getElementById(parent.element.id + '_bringToFront').classList.add('e-disabled');
+                            document.getElementById(parent.element.id + '_bringToFront').classList.add('e-overlay');
                         }
                         else {
-                            document.getElementById(parent.element.id + '_bringToFront').classList.remove('e-disabled');
+                            document.getElementById(parent.element.id + '_bringToFront').classList.remove('e-overlay');
                         }
                         parent.notify('undo-redo', { prop: 'updateUndoRedoStack', onPropertyChange: false });
                     }
@@ -4652,7 +5052,21 @@ var ToolbarModule = /** @class */ (function () {
         parent.notify('draw', { prop: 'drawObject', onPropertyChange: false, value: { canvas: 'duplicate', obj: parent.activeObj,
                 isCropRatio: null, points: null, isPreventDrag: true } });
         parent.notify('undo-redo', { prop: 'updateUrObj', onPropertyChange: false, value: { objColl: objColl } });
+        parent.notify('shape', { prop: 'applyActObj', onPropertyChange: false, value: { isMouseDown: true } });
+        parent.noPushUndo = false;
+        parent.notify('undo-redo', { prop: 'updateCurrUrc', value: { type: 'ok' } });
+        parent.noPushUndo = true;
+        parent.notify('selection', { prop: 'redrawShape', onPropertyChange: false,
+            value: { obj: parent.objColl[parent.objColl.length - 1] } });
+        var id = parent.element.id;
+        var toolbarId = Browser.isDevice ? '#' + id + '_bottomToolbar ' + '#' + id : '#' + id;
+        var object = { freehandDrawSelectedId: null };
+        parent.notify('freehand-draw', { prop: 'getFreehandDrawSelectedId', onPropertyChange: false, value: { obj: object } });
+        this.enableDisableCloneBtn(toolbarId, object);
         this.renderQAT();
+        if (parent.activeObj.shape && parent.activeObj.shape === 'redact') {
+            this.redactSlider(parent.activeObj.redactType);
+        }
     };
     ToolbarModule.prototype.defToolbarClicked = function (args) {
         var parent = this.parent;
@@ -4710,6 +5124,8 @@ var ToolbarModule = /** @class */ (function () {
         var isCropSelection = false;
         var panBtn;
         var splitWords;
+        var actionType;
+        var actionArgs;
         if (parent.activeObj.shape !== undefined) {
             splitWords = parent.activeObj.shape.split('-');
         }
@@ -4723,6 +5139,7 @@ var ToolbarModule = /** @class */ (function () {
             switch (type) {
                 case 'pan':
                     parent.currObjType.isCustomCrop = parent.currObjType.isFiltered = false;
+                    parent.currObjType.isRedact = false;
                     if (parent.currObjType.isUndoAction) {
                         parent.notify('undo-redo', { prop: 'refreshUrc', value: { bool: null } });
                     }
@@ -4758,9 +5175,18 @@ var ToolbarModule = /** @class */ (function () {
                     this.refreshToolbar('main');
                     break;
                 case 'cancel':
+                    if (parent.currObjType.isRedact) {
+                        parent.currObjType.isRedact = false;
+                    }
+                    if (this.isFrameToolbar && parent.element.querySelector('.e-contextual-toolbar-wrapper') && !parent.element.querySelector('.e-contextual-toolbar-wrapper').classList.contains('e-hide')) {
+                        parent.element.querySelector('.e-contextual-toolbar-wrapper').classList.add('e-hide');
+                    }
                     parent.notify('draw', { prop: 'performCancel', value: { isContextualToolbar: isContextualToolbar, isFinalCancel: true } });
                     break;
                 case 'ok':
+                    if (Browser.isDevice && this.isFrameToolbar && parent.element.querySelector('.e-contextual-toolbar-wrapper') && !parent.element.querySelector('.e-contextual-toolbar-wrapper').classList.contains('e-hide')) {
+                        parent.element.querySelector('.e-contextual-toolbar-wrapper').classList.add('e-hide');
+                    }
                     parent.okBtn(null, true);
                     parent.drawingShape = null;
                     this.refreshDropDownBtn(false);
@@ -4834,14 +5260,14 @@ var ToolbarModule = /** @class */ (function () {
                     this.refreshToolbar('resize');
                     break;
                 case 'resize':
-                    if (parent.currObjType.isFiltered) {
+                    if (parent.currObjType.isFiltered || parent.currObjType.isRedact) {
                         parent.okBtn();
                     }
                     this.resizeClick();
                     break;
                 case 'adjustment':
                     if (!isDisabledAdjustment) {
-                        if (parent.currObjType.isFiltered) {
+                        if (parent.currObjType.isFiltered || parent.currObjType.isRedact) {
                             parent.okBtn();
                         }
                         this.refreshToolbar('adjustment');
@@ -4949,6 +5375,7 @@ var ToolbarModule = /** @class */ (function () {
                 case 'horizontalflip':
                 case 'verticalflip':
                     parent.transformSelect(type);
+                    this.updateRedactObj();
                     if (type === 'rotateleft' || type === 'rotateright') {
                         parent.notify('draw', { prop: 'resetStraightenDestPoints' });
                         parent.notify('draw', { prop: 'setDestForStraighten' });
@@ -4957,6 +5384,10 @@ var ToolbarModule = /** @class */ (function () {
                     if (Browser.isDevice) {
                         this.updateContextualToolbar('color', 'straighten');
                     }
+                    actionType = type === 'rotateleft' || type === 'rotateright' ?
+                        'rotate' : 'flip';
+                    actionArgs = { action: actionType, actionEventArgs: parent.editCompleteArgs };
+                    parent.triggerEditCompleteEvent(actionArgs);
                     break;
                 case 'save':
                     parent.noPushUndo = false;
@@ -4995,10 +5426,100 @@ var ToolbarModule = /** @class */ (function () {
                     parent.notify('draw', { prop: 'render-image', value: { isMouseWheel: null, isPreventClearRect: null, isFrame: true } });
                     parent.isFrameBtnClick = true;
                     parent.curFrameObjEvent = { previousFrameSetting: parent.tempFrameObj, currentFrameSetting: parent.frameObj };
+                    parent.notify('draw', { prop: 'triggerFrameChange', value: { prevFrameSettings: parent.tempFrameObj, obj: { frameChangeEventArgs: null } } });
+                    break;
+                case 'redact':
+                    parent.currObjType.isRedact = true;
+                    parent.drawingShape = 'redact';
+                    if (isNullOrUndefined(parent.activeObj.redactBlur)) {
+                        parent.activeObj.redactBlur = 20;
+                    }
+                    if (isNullOrUndefined(parent.activeObj.redactPixelate)) {
+                        parent.activeObj.redactPixelate = 20;
+                    }
+                    parent.notify('selection', { prop: 'annotate', value: { shape: 'redact' } });
+                    this.refreshToolbar('redact');
+                    this.redactSlider(parent.activeObj.redactType);
+                    break;
+                case 'pixelate':
+                    parent.currObjType.isRedact = true;
+                    parent.drawingShape = 'redact';
+                    parent.notify('selection', { prop: 'annotate', value: { shape: 'redact' } });
+                    if (parent.activeObj.redactType === 'blur') {
+                        this.updateRedactType('pixelate');
+                    }
+                    parent.notify('shape', { prop: 'setRedactType', onPropertyChange: false,
+                        value: { redactType: 'pixelate' } });
+                    if (parent.activeObj.redactType === 'pixelate') {
+                        var pixelateBtn = parent.element.querySelector('#' + id + '_' + 'pixelate');
+                        var redactBlurBtn = parent.element.querySelector('#' + id + '_' + 'redactBlur');
+                        if (pixelateBtn) {
+                            pixelateBtn.classList.add('e-selected-btn');
+                        }
+                        if (redactBlurBtn && redactBlurBtn.classList.contains('e-selected-btn')) {
+                            redactBlurBtn.classList.remove('e-selected-btn');
+                        }
+                    }
+                    else {
+                        var redactBlurBtn = parent.element.querySelector('#' + id + '_' + 'redactBlur');
+                        if (redactBlurBtn) {
+                            redactBlurBtn.classList.add('e-selected-btn');
+                        }
+                    }
+                    this.redactSlider(parent.activeObj.redactType);
+                    if (parent.activeObj.activePoint.width !== 0 || parent.activeObj.activePoint.height !== 0) {
+                        parent.notify('undo-redo', { prop: 'updateUndoRedoColl', onPropertyChange: false,
+                            value: { operation: 'shapeTransform', previousObj: null, previousObjColl: null,
+                                previousPointColl: null, previousSelPointColl: null,
+                                previousCropObj: null, previousText: null,
+                                currentText: null, previousFilter: null, isCircleCrop: null } });
+                    }
+                    break;
+                case 'redactblur':
+                    parent.currObjType.isRedact = true;
+                    parent.drawingShape = 'redact';
+                    parent.notify('selection', { prop: 'annotate', value: { shape: 'redact' } });
+                    parent.notify('shape', { prop: 'setRedactType', onPropertyChange: false,
+                        value: { redactType: 'blur' } });
+                    if (parent.activeObj.redactType === 'pixelate') {
+                        this.updateRedactType('blur');
+                    }
+                    parent.notify('shape', { prop: 'setRedactType', onPropertyChange: false, value: { redactType: 'blur' } });
+                    if (parent.activeObj.redactType === 'blur') {
+                        var redactBlurBtn = parent.element.querySelector('#' + id + '_' + 'redactBlur');
+                        var pixelateBtn = parent.element.querySelector('#' + id + '_' + 'pixelate');
+                        if (redactBlurBtn) {
+                            redactBlurBtn.classList.add('e-selected-btn');
+                        }
+                        if (pixelateBtn && pixelateBtn.classList.contains('e-selected-btn')) {
+                            pixelateBtn.classList.remove('e-selected-btn');
+                        }
+                    }
+                    else {
+                        var pixelateBtn = parent.element.querySelector('#' + id + '_' + 'pixelate');
+                        if (pixelateBtn) {
+                            pixelateBtn.classList.add('e-selected-btn');
+                        }
+                    }
+                    this.redactSlider(parent.activeObj.redactType);
+                    if (parent.activeObj.activePoint.width !== 0 || parent.activeObj.activePoint.height !== 0) {
+                        parent.notify('undo-redo', { prop: 'updateUndoRedoColl', onPropertyChange: false,
+                            value: { operation: 'shapeTransform', previousObj: null, previousObjColl: null,
+                                previousPointColl: null, previousSelPointColl: null,
+                                previousCropObj: null, previousText: null,
+                                currentText: null, previousFilter: null, isCircleCrop: null } });
+                    }
                     break;
             }
         }
     };
+    ToolbarModule.prototype.updateRedactType = function (value) {
+        var parent = this.parent;
+        parent.activeObj.redactType = value;
+        parent.notify('shape', { prop: 'setRedactType', value: { type: value } });
+        this.parent.objColl.push(parent.activeObj);
+        parent.notify('selection', { prop: 'redrawShape', value: { obj: parent.objColl[parent.objColl.length - 1] } });
+    };
     ToolbarModule.prototype.frameToolbarClick = function () {
         var parent = this.parent;
         var id = parent.element.id;
@@ -5007,10 +5528,10 @@ var ToolbarModule = /** @class */ (function () {
         var frameObj;
         var tempFrameObj;
         parent.notify('draw', { prop: 'updateCropSelection', onPropertyChange: false });
-        if (parent.currObjType.isFiltered) {
+        if (parent.currObjType.isFiltered || parent.currObjType.isRedact) {
             parent.okBtn();
         }
-        if (frame && !frame.classList.contains('e-disabled')) {
+        if (frame && !frame.classList.contains('e-overlay')) {
             zoom = parent.transform.zoomFactor;
             parent.frameDestPoints = extend({}, parent.img, {}, true);
             if (isNullOrUndefined(parent.cxtTbarHeight)) {
@@ -5032,6 +5553,7 @@ var ToolbarModule = /** @class */ (function () {
                 parent.img.destTop += (parent.cxtTbarHeight / 2);
             }
             this.callFrameToolbar();
+            parent.notify('draw', { prop: 'triggerFrameChange', value: { prevFrameSettings: parent.frameObj, obj: { frameChangeEventArgs: null } } });
         }
     };
     ToolbarModule.prototype.zoomToFrameRange = function () {
@@ -5089,6 +5611,7 @@ var ToolbarModule = /** @class */ (function () {
         var type = args.item.id.replace(parent.element.id, '').split('_')[1];
         var imageFiltering = { filter: parent.toPascalCase(type), cancel: false };
         parent.trigger('imageFiltering', imageFiltering);
+        parent.editCompleteArgs = imageFiltering;
         if (imageFiltering.cancel) {
             return;
         }
@@ -5148,6 +5671,7 @@ var ToolbarModule = /** @class */ (function () {
                 parent_1.isZoomBtnClick = true;
                 this.applyPreviewFilter();
                 parent_1.currObjType.isFiltered = false;
+                parent_1.currObjType.isRedact = false;
                 if (parent_1.togglePen) {
                     parent_1.currObjType.isZoomed = true;
                     parent_1.freeHandDraw(false);
@@ -5166,6 +5690,12 @@ var ToolbarModule = /** @class */ (function () {
                     parent_1.notify('draw', { prop: 'resetStraightenDestPoints' });
                     parent_1.notify('draw', { prop: 'setDestForStraighten' });
                 }
+                var actionArgs = { action: 'zoom-in',
+                    actionEventArgs: parent_1.editCompleteArgs };
+                parent_1.triggerEditCompleteEvent(actionArgs);
+                if (Browser.isDevice) {
+                    zoomIn.focus();
+                }
             }
         }
     };
@@ -5206,6 +5736,7 @@ var ToolbarModule = /** @class */ (function () {
                 parent_2.isZoomBtnClick = true;
                 this.applyPreviewFilter();
                 parent_2.currObjType.isFiltered = false;
+                parent_2.currObjType.isRedact = false;
                 if (parent_2.togglePen) {
                     parent_2.currObjType.isZoomed = true;
                     parent_2.freeHandDraw(false);
@@ -5224,6 +5755,12 @@ var ToolbarModule = /** @class */ (function () {
                     parent_2.notify('draw', { prop: 'resetStraightenDestPoints' });
                     parent_2.notify('draw', { prop: 'setDestForStraighten' });
                 }
+                var actionArgs = { action: 'zoom-out',
+                    actionEventArgs: parent_2.editCompleteArgs };
+                parent_2.triggerEditCompleteEvent(actionArgs);
+                if (Browser.isDevice) {
+                    zoomOut.focus();
+                }
             }
         }
     };
@@ -5560,8 +6097,11 @@ var ToolbarModule = /** @class */ (function () {
             var selFillElem = parent.element.querySelector('.e-fill.e-template .e-dropdownbtn-preview');
             var selStrokeElem = parent.element.querySelector('.e-stroke.e-template .e-dropdownbtn-preview');
             var selTextStrokeElem = parent.element.querySelector('.e-text-font-color.e-template .e-dropdownbtn-preview');
+            var selStrokeTextColorElem = parent.element.querySelector('.e-stroke-text-font-color.e-template .e-dropdownbtn-preview');
+            var selTextBGElem = parent.element.querySelector('.e-text-background-color.e-template .e-dropdownbtn-preview');
             var selPenStrokeElem = parent.element.querySelector('.e-pen-stroke-color.e-template .e-dropdownbtn-preview');
             var strokeWidthElem = parent.element.querySelector('.e-shape-stroke-width');
+            var rectangleRadiusElem = parent.element.querySelector('.e-shape-rectangle-radius');
             var fontFamilyElem = parent.element.querySelector('.e-text-font-family');
             var fontSizeElem = parent.element.querySelector('.e-text-font-size');
             var boldBtn = parent.element.querySelector('#' + id + '_bold');
@@ -5570,6 +6110,9 @@ var ToolbarModule = /** @class */ (function () {
                 if (isNullOrUndefined(parent.activeObj.strokeSettings.strokeWidth)) {
                     parent.activeObj.strokeSettings.strokeWidth = 2;
                 }
+                if (isNullOrUndefined(parent.activeObj.strokeSettings.outlineWidth)) {
+                    parent.activeObj.strokeSettings.outlineWidth = 2;
+                }
                 if (selFillElem) {
                     var value = parent.activeObj.strokeSettings.fillColor;
                     if (parent.activeObj.strokeSettings.fillColor === '') {
@@ -5597,6 +6140,32 @@ var ToolbarModule = /** @class */ (function () {
                         getComponent(id + '_text_font', 'colorpicker').value = value;
                     }
                 }
+                if (selStrokeTextColorElem) {
+                    var value = parent.activeObj.strokeSettings.outlineColor;
+                    if (!/^#([0-9A-Fa-f]{3}|[0-9A-Fa-f]{6}|[0-9A-Fa-f]{8})$|^[a-zA-Z]+$/.test(parent.activeObj.strokeSettings.outlineColor)) {
+                        selStrokeTextColorElem.classList.add('e-nocolor-item');
+                    }
+                    else {
+                        selStrokeTextColorElem.classList.remove('e-nocolor-item');
+                        selStrokeTextColorElem.style.background = value;
+                    }
+                    if (document.querySelector('#' + id + '_stroke_text')) {
+                        getComponent(id + '_stroke_text', 'colorpicker').value = value;
+                    }
+                }
+                if (selTextBGElem) {
+                    var value = parent.activeObj.strokeSettings.fillColor;
+                    if (parent.activeObj.strokeSettings.fillColor === '' || parent.activeObj.strokeSettings.fillColor === 'transparent') {
+                        selTextBGElem.classList.add('e-nocolor-item');
+                    }
+                    else {
+                        selTextBGElem.classList.remove('e-nocolor-item');
+                        selTextBGElem.style.background = value;
+                    }
+                    if (document.querySelector('#' + id + '_text_bgColor')) {
+                        getComponent(id + '_text_bgColor', 'colorpicker').value = value;
+                    }
+                }
                 if (selPenStrokeElem) {
                     var value = parent.activeObj.strokeSettings.strokeColor;
                     selPenStrokeElem.style.background = value;
@@ -5639,9 +6208,14 @@ var ToolbarModule = /** @class */ (function () {
                     }
                 }
                 if (strokeWidthElem) {
-                    var strokeWidth = Math.round((parent.activeObj.strokeSettings.strokeWidth)).toString();
+                    var width = parent.activeObj.shape === 'text' ? parent.activeObj.strokeSettings.outlineWidth : parent.activeObj.strokeSettings.strokeWidth;
+                    var strokeWidth = Math.round(width).toString();
                     strokeWidthElem.textContent = this.getStrokeWidth(strokeWidth);
                 }
+                if (rectangleRadiusElem) {
+                    var rectRadius = Math.round((parent.activeObj.strokeSettings.radius)).toString();
+                    rectangleRadiusElem.textContent = this.getRectRadius(rectRadius);
+                }
             }
         }
     };
@@ -5670,6 +6244,31 @@ var ToolbarModule = /** @class */ (function () {
         }
         return strokeWidth;
     };
+    ToolbarModule.prototype.getRectRadius = function (text) {
+        var rectRadius;
+        var currentWidth = parseInt(text, 10) / 2;
+        switch (currentWidth) {
+            case 0:
+                rectRadius = this.l10n.getConstant('0');
+                break;
+            case 1:
+                rectRadius = this.l10n.getConstant('20');
+                break;
+            case 2:
+                rectRadius = this.l10n.getConstant('40');
+                break;
+            case 3:
+                rectRadius = this.l10n.getConstant('60');
+                break;
+            case 4:
+                rectRadius = this.l10n.getConstant('80');
+                break;
+            case 5:
+                rectRadius = this.l10n.getConstant('100');
+                break;
+        }
+        return rectRadius;
+    };
     ToolbarModule.prototype.cancelPan = function () {
         var parent = this.parent;
         parent.notify('shape', { prop: 'applyActObj', onPropertyChange: false, value: { isMouseDown: true } });
@@ -5796,6 +6395,90 @@ var ToolbarModule = /** @class */ (function () {
     ToolbarModule.prototype.getModuleName = function () {
         return 'toolbar-module';
     };
+    ToolbarModule.prototype.redactSlider = function (type) {
+        var parent = this.parent;
+        var id = parent.element.id;
+        var toolbarArea = parent.element.querySelector('#' + id + '_toolbarArea');
+        var contextualToolbarArea = parent.element.querySelector('#' + id + '_contextualToolbarArea');
+        if (!contextualToolbarArea) {
+            return;
+        }
+        contextualToolbarArea.classList.remove('e-hide');
+        contextualToolbarArea.style.left = toolbarArea.offsetLeft + 'px';
+        var canvasWrapper = document.querySelector('#' + id + '_contextualToolbarArea');
+        var hdrWrapper = document.querySelector('#' + id + '_headWrapper');
+        var labelWrapper = document.querySelector('#' + id + '_labelWrapper');
+        var ctxTbar = document.querySelector('#' + id + '_contextualToolbar');
+        if (hdrWrapper) {
+            hdrWrapper.remove();
+            labelWrapper.remove();
+        }
+        if (ctxTbar) {
+            ctxTbar.remove();
+            this.createContextualToolbar();
+        }
+        hdrWrapper = canvasWrapper.appendChild(parent.createElement('div', {
+            id: id + '_headWrapper',
+            styles: 'position: relative'
+        }));
+        labelWrapper = hdrWrapper.appendChild(parent.createElement('label', {
+            id: id + '_labelWrapper',
+            className: 'e-ie-finetune-slider-label',
+            styles: Browser.isDevice ? ('position: absolute; top: 31%; left: calc(50% - 160px); font-size: 15px; text-transform: capitalize; font-weight: 400;')
+                : 'position: absolute; top: 25%; left: calc(50% - 226px); font-size: 15px; text-transform: capitalize; font-weight: 400;'
+        }));
+        var text = type === 'blur' ? this.l10n.getConstant('Blur') : this.l10n.getConstant('PixelSize');
+        labelWrapper.textContent = text;
+        var sliderWrapper = hdrWrapper.appendChild(parent.createElement('div', {
+            id: id + '_sliderWrapper',
+            className: 'e-ie-finetune-slider-wrap',
+            styles: 'position: absolute'
+        }));
+        hdrWrapper.appendChild(parent.createElement('label', {
+            id: id + '_redactSpan',
+            className: 'e-ie-redact-value-span',
+            styles: Browser.isDevice ? ('position: absolute; top: 30%; margin-left: 20px; font-size: 15px; text-transform: capitalize; font-weight: 400;') :
+                'position: absolute; top: 30%; left: calc(50% + 190px); font-size: 15px; text-transform: capitalize; font-weight: 400;'
+        }));
+        sliderWrapper.parentElement.classList.add('e-finetune-slider');
+        var value = parent.activeObj.redactType === 'blur' ? parent.activeObj.redactBlur :
+            parent.activeObj.redactPixelate;
+        var redactSlider = new Slider({
+            tooltip: { placement: 'Before', isVisible: true, showOn: 'Focus' },
+            min: 10, max: 100, step: 1, value: value,
+            type: 'MinRange',
+            width: Browser.isDevice ? '130px' : '300px',
+            created: function () {
+                parent.element.querySelector('.e-ie-redact-value-span').innerText = value.toString();
+            },
+            change: function (args) {
+                parent.element.querySelector('.e-ie-redact-value-span').innerText = args.value.toString();
+                if (parent.activeObj.redactType === 'blur') {
+                    parent.activeObj.redactBlur = parent.tempRedactBlur = args.value;
+                }
+                else if (parent.activeObj.redactType === 'pixelate') {
+                    parent.activeObj.redactPixelate = parent.tempRedactPixel = args.value;
+                }
+                parent.notify('draw', { prop: 'drawObject', onPropertyChange: false, value: { canvas: 'duplicate', obj: parent.activeObj, isCropRatio: null,
+                        points: null, isPreventDrag: true, saveContext: null, isPreventSelection: true } });
+            },
+            changed: function () {
+                setTimeout(function () {
+                    parent.notify('undo-redo', { prop: 'updateUndoRedoStack', onPropertyChange: false });
+                }, 50);
+            }
+        });
+        redactSlider.appendTo('#' + id + '_sliderWrapper');
+        if (Browser.isDevice) {
+            var cHt = contextualToolbarArea.offsetHeight + 1;
+            var cusWrapper = parent.element.querySelector('#' + id + '_customizeWrapper');
+            if (this.isFrameToolbar && cusWrapper) {
+                cHt = cusWrapper.offsetHeight + 2;
+            }
+            var ht = parent.element.querySelector('#' + id + '_canvasWrapper').offsetHeight;
+            contextualToolbarArea.style.top = this.toolbarHeight + 1 + ht - cHt + 'px';
+        }
+    };
     return ToolbarModule;
 }());
 export { ToolbarModule };