@syncfusion/ej2-image-editor 23.2.6 → 24.1.41

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

@@ -1,4 +1,4 @@
-import { extend, Browser, detach, select } from '@syncfusion/ej2-base';
+import { extend, Browser, detach, select, isBlazor } from '@syncfusion/ej2-base';
 import { EventHandler, getComponent, isNullOrUndefined, L10n } from '@syncfusion/ej2-base';
 import { NumericTextBox } from '@syncfusion/ej2-inputs';
 import { Toolbar } from '@syncfusion/ej2-navigations';
@@ -17,6 +17,19 @@ var ToolbarModule = /** @class */ (function () {
         this.preventEnableDisableUr = false;
         this.isAspectRatio = true;
         this.isFrameToolbar = false;
+        this.presetColors = {
+            'custom': ['#000000', '#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']
+        };
         this.parent = parent;
         this.addEventListener();
         this.initLocale();
@@ -71,8 +84,8 @@ var ToolbarModule = /** @class */ (function () {
             RotateRight: 'Rotate Right',
             HorizontalFlip: 'Horizontal Flip',
             VerticalFlip: 'Vertical Flip',
-            OK: 'OK',
-            Cancel: 'Cancel',
+            OK: 'Apply',
+            Cancel: 'Discard',
             FillColor: 'Fill Color',
             StrokeColor: 'Stroke Color',
             StrokeWidth: 'Stroke Width',
@@ -158,7 +171,9 @@ var ToolbarModule = /** @class */ (function () {
             Yes: 'Yes',
             No: 'No',
             ImageErrorDialogHeader: 'Image Selection Error',
-            ImageErrorDialogContent: 'Please select only one image to open.'
+            ImageErrorDialogContent: 'Please select only one image to open.',
+            Straighten: 'Straighten',
+            NoOutline: 'No outline',
         };
         this.l10n = new L10n('image-editor', this.defaultLocale, this.parent.locale);
     };
@@ -185,7 +200,7 @@ var ToolbarModule = /** @class */ (function () {
                 this.enableDisableTbrBtn();
                 break;
             case 'init-main-toolbar':
-                this.initMainToolbar(args.value['isApplyBtn'], args.value['isDevice'], args.value['isOkBtn'], args.value['isResize']);
+                this.initMainToolbar(args.value['isApplyBtn'], args.value['isDevice'], args.value['isOkBtn'], args.value['isResize'], args.value['isFrame'], args.value['isMainToolbar']);
                 break;
             case 'create-bottom-toolbar':
                 this.createBottomToolbar();
@@ -310,6 +325,12 @@ var ToolbarModule = /** @class */ (function () {
             case 'frameToolbarClick':
                 this.frameToolbarClick();
                 break;
+            case 'performCropTransformClick':
+                this.performCropTransformClick();
+                break;
+            case 'duplicateShape':
+                this.duplicateShape(args.value['isPreventUndoRedo'], true);
+                break;
         }
     };
     ToolbarModule.prototype.updatePrivateVariables = function () {
@@ -340,19 +361,21 @@ var ToolbarModule = /** @class */ (function () {
         parent.initialAdjustmentValue = parent.canvasFilter =
             'brightness(' + 1 + ') ' + 'contrast(' + 100 + '%) ' + 'hue-rotate(' + 0 + 'deg) ' +
                 'saturate(' + 100 + '%) ' + 'opacity(' + 1 + ') ' + 'blur(' + 0 + 'px) ' + 'sepia(0%) ' + 'grayscale(0%) ' + 'invert(0%)';
+        parent.tempStraighten = 0;
+        parent.isStraightening = false;
     };
     ToolbarModule.prototype.destroyTopToolbar = function () {
         var parent = this.parent;
         var toolbar = document.getElementById(parent.element.id + '_toolbar');
         if (this.isToolbar() && toolbar && toolbar.classList.contains('e-control')) {
-            getComponent(document.getElementById(parent.element.id + '_toolbar'), 'toolbar').destroy();
+            getComponent(toolbar, 'toolbar').destroy();
         }
     };
     ToolbarModule.prototype.destroyBottomToolbar = function () {
         var parent = this.parent;
         var toolbar = document.getElementById(parent.element.id + '_bottomToolbar');
         if (toolbar && toolbar.classList.contains('e-control')) {
-            getComponent(document.getElementById(parent.element.id + '_bottomToolbar'), 'toolbar').destroy();
+            getComponent(toolbar, 'toolbar').destroy();
         }
     };
     ToolbarModule.prototype.isToolbar = function () {
@@ -363,9 +386,10 @@ var ToolbarModule = /** @class */ (function () {
     ToolbarModule.prototype.createToolbar = function () {
         var _this = this;
         var parent = this.parent;
+        var id = parent.element.id;
         if (isNullOrUndefined(parent.toolbar) || (parent.toolbar && parent.toolbar.length > 0)) {
             parent.element.appendChild(parent.createElement('div', {
-                id: parent.element.id + '_toolbarArea', className: 'e-toolbar-area'
+                id: id + '_toolbarArea', className: 'e-toolbar-area'
             }));
             var toolbarItems = { cssClass: 'e-image-upload', align: 'Left', type: 'Input',
                 tooltipText: this.l10n.getConstant('Browse'), template: new Uploader({ allowedExtensions: '.jpg, .jpeg, .png,.svg', multiple: false }) };
@@ -373,10 +397,8 @@ var ToolbarModule = /** @class */ (function () {
                 this.defToolbarItems = [];
             }
             this.defToolbarItems.push(toolbarItems);
-            var toolbarArea = document.getElementById(parent.element.id + '_toolbarArea');
-            var toolbar_1 = parent.createElement('div', {
-                id: parent.element.id + '_toolbar'
-            });
+            var toolbarArea = document.getElementById(id + '_toolbarArea');
+            var toolbar_1 = parent.createElement('div', { id: id + '_toolbar' });
             toolbarArea.appendChild(toolbar_1);
             var uploadItems = [
                 {
@@ -387,22 +409,22 @@ var ToolbarModule = /** @class */ (function () {
                         allowedExtensions: '.jpg, .jpeg, .png,.svg',
                         multiple: false,
                         selected: function () {
+                            var toolbar = document.getElementById(id + '_toolbar');
+                            var bToolbar = document.getElementById(id + '_bottomToolbar');
                             if (!parent.disabled) {
                                 if (Browser.isDevice) {
-                                    if (_this.defToolbarItems.length > 0 &&
-                                        document.getElementById(parent.element.id + '_toolbar')) {
-                                        getComponent(document.getElementById(parent.element.id + '_toolbar'), 'toolbar').destroy();
+                                    if (_this.defToolbarItems.length > 0 && toolbar) {
+                                        getComponent(toolbar, 'toolbar').destroy();
                                     }
-                                    if (document.getElementById(parent.element.id + '_bottomToolbar')) {
-                                        getComponent(document.getElementById(parent.element.id + '_bottomToolbar'), 'toolbar').destroy();
+                                    if (bToolbar) {
+                                        getComponent(bToolbar, 'toolbar').destroy();
                                     }
                                     _this.initMainToolbar(false, Browser.isDevice, null);
                                     _this.createBottomToolbar();
                                 }
                                 else {
-                                    if (_this.defToolbarItems.length > 0 &&
-                                        document.getElementById(parent.element.id + '_toolbar')) {
-                                        getComponent(document.getElementById(parent.element.id + '_toolbar'), 'toolbar').destroy();
+                                    if (_this.defToolbarItems.length > 0 && toolbar) {
+                                        getComponent(toolbar, 'toolbar').destroy();
                                     }
                                     _this.initMainToolbar(false, false, null);
                                 }
@@ -416,10 +438,11 @@ var ToolbarModule = /** @class */ (function () {
                     parent.trigger('toolbarCreated', { toolbarType: 'main' });
                 },
                 clicked: this.defToolbarClicked.bind(this) });
-            toolbarObj.appendTo('#' + parent.element.id + '_toolbar');
+            toolbarObj.appendTo('#' + id + '_toolbar');
             this.createLeftToolbarControls();
-            if (document.getElementById(parent.element.id + '_toolbar')) {
-                this.toolbarHeight = document.getElementById(parent.element.id + '_toolbar').clientHeight;
+            var mToolbar = document.getElementById(id + '_toolbar');
+            if (toolbar_1) {
+                this.toolbarHeight = mToolbar.scrollHeight;
             }
         }
         else {
@@ -428,27 +451,30 @@ var ToolbarModule = /** @class */ (function () {
     };
     ToolbarModule.prototype.createContextualToolbar = function () {
         var parent = this.parent;
+        var id = parent.element.id;
         if (isNullOrUndefined(parent.toolbar) || (parent.toolbar && parent.toolbar.length > 0)) {
-            parent.element.appendChild(parent.createElement('div', { id: parent.element.id + '_contextualToolbarArea',
+            parent.element.appendChild(parent.createElement('div', { id: id + '_contextualToolbarArea',
                 className: 'e-contextual-toolbar-wrapper e-hide', attrs: { style: 'position: absolute;' }
             }));
-            var toolbarArea = document.getElementById(parent.element.id + '_contextualToolbarArea');
-            var toolbar_2 = parent.createElement('div', { id: parent.element.id + '_contextualToolbar' });
+            var toolbarArea = document.getElementById(id + '_contextualToolbarArea');
+            var toolbar_2 = parent.createElement('div', { id: id + '_contextualToolbar' });
             toolbarArea.appendChild(toolbar_2);
         }
     };
     ToolbarModule.prototype.createBottomToolbar = function () {
         var parent = this.parent;
+        var id = parent.element.id;
+        if (parent.element.querySelector('#' + id + '_bottomToolbarArea')) {
+            parent.element.querySelector('#' + id + '_bottomToolbarArea').remove();
+        }
         if (isNullOrUndefined(parent.toolbar) || (parent.toolbar && parent.toolbar.length > 0)) {
             parent.element.appendChild(parent.createElement('div', {
-                id: parent.element.id + '_bottomToolbarArea', className: 'e-bottom-toolbar'
+                id: id + '_bottomToolbarArea', className: 'e-bottom-toolbar'
             }));
             if (!parent.toolbarTemplate) {
-                document.getElementById(parent.element.id + '_canvasWrapper').style.height = (parent.element.offsetHeight
-                    - this.toolbarHeight * 2) - 3 + 'px';
-                var toolbarArea = document.getElementById(parent.element.id + '_bottomToolbarArea');
+                var toolbarArea = document.getElementById(id + '_bottomToolbarArea');
                 var toolbarElem = parent.createElement('div', {
-                    id: parent.element.id + '_bottomToolbar'
+                    id: id + '_bottomToolbar'
                 });
                 toolbarArea.appendChild(toolbarElem);
             }
@@ -457,6 +483,7 @@ var ToolbarModule = /** @class */ (function () {
     };
     ToolbarModule.prototype.createQuickAccessToolbar = function () {
         var parent = this.parent;
+        var id = parent.element.id;
         if (parent.showQuickAccessToolbar) {
             var toolbarItems = { cssClass: 'e-image-upload', align: 'Left', type: 'Input',
                 tooltipText: this.l10n.getConstant('Browse'), template: new Uploader({ allowedExtensions: '.jpg, .jpeg, .png,.svg', multiple: false }) };
@@ -464,21 +491,22 @@ var ToolbarModule = /** @class */ (function () {
                 this.defToolbarItems = [];
             }
             this.defToolbarItems.push(toolbarItems);
-            var toolbarArea = document.getElementById(parent.element.id + '_quickAccessToolbarArea');
+            var toolbarArea = document.getElementById(id + '_quickAccessToolbarArea');
             var toolbar_3 = parent.createElement('div', {
-                id: parent.element.id + '_quickAccessToolbar'
+                id: id + '_quickAccessToolbar'
             });
             toolbarArea.appendChild(toolbar_3);
             var toolbarObj = new Toolbar({ clicked: this.defToolbarClicked.bind(this) });
-            toolbarObj.appendTo('#' + parent.element.id + '_quickAccessToolbar');
+            toolbarObj.appendTo('#' + id + '_quickAccessToolbar');
         }
     };
-    ToolbarModule.prototype.initMainToolbar = function (isApplyOption, isDevice, isOkBtn, isResize, isFrame) {
+    ToolbarModule.prototype.initMainToolbar = function (isApplyOption, isDevice, isOkBtn, isResize, isFrame, isMainToolbar) {
         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);
+            var rightItem = this.getRightToolbarItem(isOkBtn, isMainToolbar);
             var mainItem = this.getMainToolbarItem(isApplyOption, isFrame);
             var zoomItem = this.getZoomToolbarItem();
             if (isDevice) {
@@ -506,16 +534,16 @@ var ToolbarModule = /** @class */ (function () {
                 }
             });
             if (isDevice && isFrame) {
-                toolbarObj.appendTo('#' + parent.element.id + '_bottomToolbar');
+                toolbarObj.appendTo('#' + id + '_bottomToolbar');
             }
             else {
-                toolbarObj.appendTo('#' + parent.element.id + '_toolbar');
+                toolbarObj.appendTo('#' + id + '_toolbar');
             }
             this.createLeftToolbarControls();
             this.enableDisableTbrBtn();
-            if (this.isToolbar() && document.getElementById(parent.element.id + '_toolbar')) {
+            if (this.isToolbar() && document.getElementById(id + '_toolbar')) {
                 /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
-                var toolbar_4 = getComponent(parent.element.id + '_toolbar', 'toolbar');
+                var toolbar_4 = getComponent(id + '_toolbar', 'toolbar');
                 toolbar_4.refreshOverflow();
             }
         }
@@ -523,6 +551,7 @@ var ToolbarModule = /** @class */ (function () {
     ToolbarModule.prototype.initBottomToolbar = function () {
         var _this = this;
         var parent = this.parent;
+        var id = parent.element.id;
         if (isNullOrUndefined(parent.toolbar) || (parent.toolbar && parent.toolbar.length > 0)) {
             var items = this.getMainToolbarItem();
             var toolbarObj = new Toolbar({ items: items, width: '100%',
@@ -534,38 +563,39 @@ var ToolbarModule = /** @class */ (function () {
                 },
                 clicked: this.defToolbarClicked.bind(this)
             });
-            toolbarObj.appendTo('#' + parent.element.id + '_bottomToolbar');
-            if (this.defToolbarItems.length > 0 && document.getElementById(parent.element.id + '_bottomToolbar')) {
+            toolbarObj.appendTo('#' + id + '_bottomToolbar');
+            if (this.defToolbarItems.length > 0 && document.getElementById(id + '_bottomToolbar')) {
                 /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
-                var toolbar_5 = getComponent(parent.element.id + '_bottomToolbar', 'toolbar');
+                var toolbar_5 = getComponent(id + '_bottomToolbar', 'toolbar');
                 toolbar_5.refreshOverflow();
             }
         }
     };
     ToolbarModule.prototype.getLeftToolbarItem = function (isOkBtn, isResize) {
         var parent = this.parent;
+        var id = parent.element.id;
         var toolbarItems = [];
         if (!isOkBtn || isResize) {
-            toolbarItems.push({ id: parent.element.id + '_upload', cssClass: 'e-image-upload', align: 'Left', type: 'Input', template: new Uploader({ allowedExtensions: '.jpg, .jpeg, .png,.svg', multiple: false }) });
+            toolbarItems.push({ id: id + '_upload', cssClass: 'e-image-upload', align: 'Left', type: 'Input', template: new Uploader({ allowedExtensions: '.jpg, .jpeg, .png,.svg', multiple: false }) });
             toolbarItems.push({ visible: false, cssClass: 'e-image-position e-btn e-flat', tooltipText: this.l10n.getConstant('Browse'), align: 'Left' });
         }
         if (parent.allowUndoRedo && !isResize) {
             if (isNullOrUndefined(parent.toolbar) || (parent.toolbar && parent.toolbar.indexOf('Undo') > -1)) {
-                toolbarItems.push({ id: parent.element.id + '_undo', prefixIcon: 'e-icons e-undo', cssClass: 'top-icon e-undo',
+                toolbarItems.push({ id: id + '_undo', prefixIcon: 'e-icons e-undo', cssClass: 'top-icon e-undo',
                     tooltipText: this.l10n.getConstant('Undo'), align: 'Left' });
             }
             if (isNullOrUndefined(parent.toolbar) || (parent.toolbar && parent.toolbar.indexOf('Redo') > -1)) {
-                toolbarItems.push({ id: parent.element.id + '_redo', prefixIcon: 'e-icons e-redo', cssClass: 'top-icon e-redo',
+                toolbarItems.push({ id: id + '_redo', prefixIcon: 'e-icons e-redo', cssClass: 'top-icon e-redo',
                     tooltipText: this.l10n.getConstant('Redo'), align: 'Left' });
             }
         }
         if (!this.preventZoomBtn && (parent.zoomSettings.zoomTrigger & ZoomTrigger.Toolbar) === ZoomTrigger.Toolbar && !isResize) {
             if (isNullOrUndefined(parent.toolbar) || (parent.toolbar && parent.toolbar.indexOf('ZoomOut') > -1)) {
-                toolbarItems.push({ id: parent.element.id + '_zoomOut', prefixIcon: 'e-icons e-zoom-out', cssClass: 'top-icon e-dec-zoom',
+                toolbarItems.push({ id: id + '_zoomOut', prefixIcon: 'e-icons e-zoom-out', cssClass: 'top-icon e-dec-zoom',
                     tooltipText: this.l10n.getConstant('ZoomOut'), align: 'Left' });
             }
             if (isNullOrUndefined(parent.toolbar) || (parent.toolbar && parent.toolbar.indexOf('ZoomIn') > -1)) {
-                toolbarItems.push({ id: parent.element.id + '_zoomIn', prefixIcon: 'e-icons e-zoom-in', cssClass: 'top-icon e-inc-zoom',
+                toolbarItems.push({ id: id + '_zoomIn', prefixIcon: 'e-icons e-zoom-in', cssClass: 'top-icon e-inc-zoom',
                     tooltipText: this.l10n.getConstant('ZoomIn'), align: 'Left' });
             }
         }
@@ -575,23 +605,24 @@ var ToolbarModule = /** @class */ (function () {
         }
         return toolbarItems;
     };
-    ToolbarModule.prototype.getRightToolbarItem = function (isOkBtn) {
+    ToolbarModule.prototype.getRightToolbarItem = function (isOkBtn, isMainToolbar) {
         var parent = this.parent;
+        var id = parent.element.id;
         var toolbarItems = [];
         if (isOkBtn) {
-            toolbarItems.push({ id: parent.element.id + '_ok', prefixIcon: 'e-icons e-check', cssClass: 'top-icon e-tick',
+            toolbarItems.push({ id: id + '_ok', prefixIcon: 'e-icons e-check', cssClass: 'top-icon e-tick',
                 tooltipText: this.l10n.getConstant('OK'), align: 'Right' });
-            toolbarItems.push({ id: parent.element.id + '_cancel', prefixIcon: 'e-icons e-close', cssClass: 'top-icon e-save',
+            toolbarItems.push({ id: id + '_cancel', prefixIcon: 'e-icons e-close', cssClass: 'top-icon e-save',
                 tooltipText: this.l10n.getConstant('Cancel'), align: 'Right' });
         }
-        if (isNullOrUndefined(parent.toolbar) || (parent.toolbar && parent.toolbar.indexOf('Reset') > -1)) {
-            toolbarItems.push({ id: parent.element.id + '_reset', prefixIcon: 'e-icons e-btn-reset', cssClass: 'top-icon e-img-reset',
+        if ((isMainToolbar || !Browser.isDevice) && (isNullOrUndefined(parent.toolbar) || (parent.toolbar && parent.toolbar.indexOf('Reset') > -1))) {
+            toolbarItems.push({ id: id + '_reset', prefixIcon: 'e-icons e-btn-reset', cssClass: 'top-icon e-img-reset',
                 tooltipText: this.l10n.getConstant('Reset'), align: 'Right' });
         }
         if (!isOkBtn) {
             if (isNullOrUndefined(parent.toolbar) || (parent.toolbar && parent.toolbar.indexOf('Save') > -1)) {
-                toolbarItems.push({ id: parent.element.id + '_save', prefixIcon: 'e-icons e-btn-save', cssClass: 'top-icon e-save',
-                    tooltipText: this.l10n.getConstant('Save'), align: 'Right', template: '<button id="' + parent.element.id + '_saveBtn"></button>' });
+                toolbarItems.push({ id: id + '_save', prefixIcon: 'e-icons e-btn-save', cssClass: 'top-icon e-save',
+                    tooltipText: this.l10n.getConstant('Save'), align: 'Right', template: '<button id="' + id + '_saveBtn"></button>' });
             }
         }
         var tempToolbarItems = this.processToolbar('right');
@@ -602,56 +633,57 @@ var ToolbarModule = /** @class */ (function () {
     };
     ToolbarModule.prototype.getMainToolbarItem = function (isApplyOption, isFrame) {
         var parent = this.parent;
+        var id = parent.element.id;
         var toolbarItems = [];
         if (isFrame) {
-            if (isNullOrUndefined(this.parent.toolbar) || (!isNullOrUndefined(this.parent.toolbar) && this.parent.toolbar.indexOf('None') > -1)) {
-                toolbarItems.push({ id: this.parent.element.id + '_none', prefixIcon: 'e-icons e-frame-none', cssClass: 'top-icon e-frame-none',
+            if (isNullOrUndefined(parent.toolbar) || (!isNullOrUndefined(parent.toolbar) && parent.toolbar.indexOf('None') > -1)) {
+                toolbarItems.push({ id: id + '_none', prefixIcon: 'e-icons e-frame-none', cssClass: 'top-icon e-frame-none',
                     tooltipText: this.l10n.getConstant('None'), align: 'Center' });
             }
-            if (isNullOrUndefined(this.parent.toolbar) || (!isNullOrUndefined(this.parent.toolbar) && this.parent.toolbar.indexOf('Mat') > -1)) {
-                toolbarItems.push({ id: this.parent.element.id + '_mat', prefixIcon: 'e-icons e-frame-mat', cssClass: 'top-icon e-frame-mat',
+            if (isNullOrUndefined(parent.toolbar) || (!isNullOrUndefined(parent.toolbar) && parent.toolbar.indexOf('Mat') > -1)) {
+                toolbarItems.push({ id: id + '_mat', prefixIcon: 'e-icons e-frame-mat', cssClass: 'top-icon e-frame-mat',
                     tooltipText: this.l10n.getConstant('Mat'), align: 'Center' });
             }
-            if (isNullOrUndefined(this.parent.toolbar) || (!isNullOrUndefined(this.parent.toolbar) && this.parent.toolbar.indexOf('Bevel') > -1)) {
-                toolbarItems.push({ id: this.parent.element.id + '_bevel', prefixIcon: 'e-icons e-frame-bevel', cssClass: 'top-icon e-frame-bevel',
+            if (isNullOrUndefined(parent.toolbar) || (!isNullOrUndefined(parent.toolbar) && parent.toolbar.indexOf('Bevel') > -1)) {
+                toolbarItems.push({ id: id + '_bevel', prefixIcon: 'e-icons e-frame-bevel', cssClass: 'top-icon e-frame-bevel',
                     tooltipText: this.l10n.getConstant('Bevel'), align: 'Center' });
             }
-            if (isNullOrUndefined(this.parent.toolbar) || (!isNullOrUndefined(this.parent.toolbar) && this.parent.toolbar.indexOf('Line') > -1)) {
-                toolbarItems.push({ id: this.parent.element.id + '_line', prefixIcon: 'e-icons e-frame-line', cssClass: 'top-icon e-frame-line',
+            if (isNullOrUndefined(parent.toolbar) || (!isNullOrUndefined(parent.toolbar) && parent.toolbar.indexOf('Line') > -1)) {
+                toolbarItems.push({ id: id + '_line', prefixIcon: 'e-icons e-frame-line', cssClass: 'top-icon e-frame-line',
                     tooltipText: this.l10n.getConstant('Line'), align: 'Center' });
             }
-            if (isNullOrUndefined(this.parent.toolbar) || (!isNullOrUndefined(this.parent.toolbar) && this.parent.toolbar.indexOf('Inset') > -1)) {
-                toolbarItems.push({ id: this.parent.element.id + '_inset', prefixIcon: 'e-icons e-frame-inset', cssClass: 'top-icon e-frame-inset',
+            if (isNullOrUndefined(parent.toolbar) || (!isNullOrUndefined(parent.toolbar) && parent.toolbar.indexOf('Inset') > -1)) {
+                toolbarItems.push({ id: id + '_inset', prefixIcon: 'e-icons e-frame-inset', cssClass: 'top-icon e-frame-inset',
                     tooltipText: this.l10n.getConstant('Inset'), align: 'Center' });
             }
-            if (isNullOrUndefined(this.parent.toolbar) || (!isNullOrUndefined(this.parent.toolbar) && this.parent.toolbar.indexOf('Hook') > -1)) {
-                toolbarItems.push({ id: this.parent.element.id + '_hook', prefixIcon: 'e-icons e-frame-hook', cssClass: 'top-icon e-frame-hook',
+            if (isNullOrUndefined(parent.toolbar) || (!isNullOrUndefined(parent.toolbar) && parent.toolbar.indexOf('Hook') > -1)) {
+                toolbarItems.push({ id: id + '_hook', prefixIcon: 'e-icons e-frame-hook', cssClass: 'top-icon e-frame-hook',
                     tooltipText: this.l10n.getConstant('Hook'), align: 'Center' });
             }
         }
         else {
             if (isNullOrUndefined(parent.toolbar) || (parent.toolbar && parent.toolbar.indexOf('Crop') > -1)) {
-                toolbarItems.push({ id: parent.element.id + '_cropTransform', prefixIcon: 'e-icons e-crop', cssClass: 'top-icon e-crop',
+                toolbarItems.push({ id: id + '_cropTransform', prefixIcon: 'e-icons e-crop', cssClass: 'top-icon e-crop',
                     tooltipText: this.l10n.getConstant('CropAndTransform'), align: 'Center' });
             }
             if (isNullOrUndefined(parent.toolbar) || (parent.toolbar && parent.toolbar.indexOf('Annotate') > -1)) {
-                toolbarItems.push({ id: parent.element.id + '_annotation', tooltipText: this.l10n.getConstant('Annotation'), align: 'Center',
-                    template: '<button id="' + parent.element.id + '_annotationBtn"></button>' });
+                toolbarItems.push({ id: id + '_annotation', tooltipText: this.l10n.getConstant('Annotation'), align: 'Center',
+                    template: '<button id="' + id + '_annotationBtn"></button>' });
             }
             if (isNullOrUndefined(parent.toolbar) || (parent.toolbar && parent.toolbar.indexOf('Finetune') > -1)) {
-                toolbarItems.push({ id: parent.element.id + '_adjustment', prefixIcon: 'e-icons e-adjustment', cssClass: 'top-icon e-adjustment',
+                toolbarItems.push({ id: id + '_adjustment', prefixIcon: 'e-icons e-adjustment', cssClass: 'top-icon e-adjustment',
                     tooltipText: this.l10n.getConstant('Finetune'), align: 'Center' });
             }
             if (isNullOrUndefined(parent.toolbar) || (parent.toolbar && parent.toolbar.indexOf('Filter') > -1)) {
-                toolbarItems.push({ id: parent.element.id + '_filter', prefixIcon: 'e-icons e-filters', cssClass: 'top-icon e-filters',
+                toolbarItems.push({ id: id + '_filter', prefixIcon: 'e-icons e-filters', cssClass: 'top-icon e-filters',
                     tooltipText: this.l10n.getConstant('Filter'), align: 'Center' });
             }
             if (isNullOrUndefined(parent.toolbar) || (!isNullOrUndefined(parent.toolbar) && parent.toolbar.indexOf('Frame') > -1)) {
-                toolbarItems.push({ id: parent.element.id + '_frame', prefixIcon: 'e-icons e-border-frame', cssClass: 'top-icon e-border-frame',
+                toolbarItems.push({ id: id + '_frame', prefixIcon: 'e-icons e-border-frame', cssClass: 'top-icon e-border-frame',
                     tooltipText: this.l10n.getConstant('Frame'), align: 'Center' });
             }
             if (isNullOrUndefined(parent.toolbar) || (!isNullOrUndefined(parent.toolbar) && parent.toolbar.indexOf('Resize') > -1)) {
-                toolbarItems.push({ id: parent.element.id + '_resize', prefixIcon: 'e-icons e-resize', cssClass: 'top-icon e-resize',
+                toolbarItems.push({ id: id + '_resize', prefixIcon: 'e-icons e-resize', cssClass: 'top-icon e-resize',
                     tooltipText: this.l10n.getConstant('Resize'), align: 'Center' });
             }
         }
@@ -660,9 +692,9 @@ var ToolbarModule = /** @class */ (function () {
             toolbarItems.push(tempToolbarItems[i]);
         }
         if (isApplyOption) {
-            toolbarItems.push({ id: parent.element.id + '_ok', prefixIcon: 'e-icons e-check', cssClass: 'top-icon e-tick',
+            toolbarItems.push({ id: id + '_ok', prefixIcon: 'e-icons e-check', cssClass: 'top-icon e-tick',
                 tooltipText: this.l10n.getConstant('OK'), align: 'Right' });
-            toolbarItems.push({ id: parent.element.id + '_cancel', prefixIcon: 'e-icons e-close', cssClass: 'top-icon e-save',
+            toolbarItems.push({ id: id + '_cancel', prefixIcon: 'e-icons e-close', cssClass: 'top-icon e-save',
                 tooltipText: this.l10n.getConstant('Cancel'), align: 'Right' });
         }
         return toolbarItems;
@@ -671,15 +703,17 @@ var ToolbarModule = /** @class */ (function () {
         var toolbarItems = [];
         return toolbarItems;
     };
-    ToolbarModule.prototype.updateContextualToolbar = function (type, cType) {
+    ToolbarModule.prototype.updateContextualToolbar = function (type, cType, isSelect) {
         var parent = this.parent;
-        var toolbarArea = parent.element.querySelector('#' + parent.element.id + '_toolbarArea');
-        var contextualToolbarArea = parent.element.querySelector('#' + parent.element.id + '_contextualToolbarArea');
+        var id = parent.element.id;
+        var toolbarArea = parent.element.querySelector('#' + id + '_toolbarArea');
+        var contextualToolbarArea = parent.element.querySelector('#' + id + '_contextualToolbarArea');
         contextualToolbarArea.classList.remove('e-hide');
         contextualToolbarArea.style.left = toolbarArea.offsetLeft + 'px';
         if (type === 'filter') {
-            if (document.getElementById(parent.element.id + '_toolbar') && this.defToolbarItems.length > 0) {
-                getComponent(document.getElementById(parent.element.id + '_toolbar'), 'toolbar').destroy();
+            var toolbar_6 = document.getElementById(id + '_toolbar');
+            if (toolbar_6 && this.defToolbarItems.length > 0) {
+                getComponent(toolbar_6, 'toolbar').destroy();
             }
             if (Browser.isDevice) {
                 this.initMainToolbar(false, true, true);
@@ -691,24 +725,49 @@ var ToolbarModule = /** @class */ (function () {
             this.initFilterToolbarItem();
         }
         else {
-            if (document.querySelector('#' + parent.element.id + '_contextualToolbar').classList.contains('e-control')) {
-                getComponent(document.getElementById(parent.element.id + '_contextualToolbar'), 'toolbar').destroy();
+            var ctxToolbar = document.querySelector('#' + id + '_contextualToolbar');
+            if (ctxToolbar.classList.contains('e-control')) {
+                getComponent(ctxToolbar, 'toolbar').destroy();
             }
             this.refreshSlider();
             if (type === 'frame') {
                 this.initFrameToolbarItem();
             }
             else {
-                this.renderSlider(cType);
+                this.renderSlider(cType, isSelect);
             }
         }
+        if (!isBlazor()) {
+            if (parent.toolbarTemplate) {
+                this.toolbarHeight = parent.element.querySelector('#' + parent.element.id + '_toolbarArea').offsetHeight;
+            }
+            else if (parent.element.querySelector('#' + parent.element.id + '_toolbar')) {
+                this.toolbarHeight = parent.element.querySelector('#' + parent.element.id + '_toolbar').offsetHeight;
+            }
+            parent.toolbarHeight = this.toolbarHeight;
+        }
         if (Browser.isDevice) {
-            var cHt = contextualToolbarArea.offsetHeight;
-            if (this.isFrameToolbar && parent.element.querySelector('#' + parent.element.id + '_customizeWrapper')) {
-                cHt = parent.element.querySelector('#' + parent.element.id + '_customizeWrapper').offsetHeight;
+            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('#' + parent.element.id + '_canvasWrapper').offsetHeight;
+            var ht = parent.element.querySelector('#' + id + '_canvasWrapper').offsetHeight;
             contextualToolbarArea.style.top = this.toolbarHeight + ht - cHt + 'px';
+            if (cType === 'straighten') {
+                parent.isStraightening = true;
+                var ctxToolbar = parent.element.querySelector('#' + id + '_contextualToolbarArea');
+                if (ctxToolbar.style.position === 'absolute') {
+                    ctxToolbar.style.position = '';
+                    parent.element.insertBefore(ctxToolbar, parent.element.querySelector('#' + id + '_bottomToolbarArea'));
+                    parent.update();
+                    if (isSelect) {
+                        parent.notify('draw', { prop: 'select', onPropertyChange: false,
+                            value: { type: this.getCropTextContent(document.getElementById(id + '_cropBtn')).toLowerCase(),
+                                startX: null, startY: null, width: null, height: null } });
+                    }
+                }
+            }
         }
         else {
             contextualToolbarArea.style.top = this.toolbarHeight + 'px';
@@ -761,8 +820,26 @@ var ToolbarModule = /** @class */ (function () {
             zoomIn.addEventListener('touchstart', this.zoomInBtnClickHandler.bind(this));
         }
     };
+    ToolbarModule.prototype.widthPress = function (e) {
+        /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
+        if (e.keyCode === 109) {
+            e.preventDefault();
+            return;
+        }
+    };
+    ToolbarModule.prototype.heightPress = function (e) {
+        /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
+        if (e.keyCode === 109) {
+            e.preventDefault();
+            return;
+        }
+    };
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
     ToolbarModule.prototype.widthAspectRatio = function (e) {
+        /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
+        if (e.keyCode === 109) {
+            return;
+        }
         var parent = this.parent;
         var aspectRatioHeight = parent.element.querySelector('#' + parent.element.id + '_resizeHeight');
         var aspectRatioWidth = parent.element.querySelector('#' + parent.element.id + '_resizeWidth');
@@ -770,26 +847,32 @@ var ToolbarModule = /** @class */ (function () {
         var originalWidth = parent.img.destWidth;
         var originalHeight = parent.img.destHeight;
         var aspectRatioHeightValue = parseFloat(aspectRatioHeight.value);
-        var width = Math.floor((aspectRatioHeightValue / (originalHeight / originalWidth)));
+        var value = aspectRatioHeightValue / (originalHeight / originalWidth);
+        var width = value % 1 >= 0.5 || value % 1 <= -0.5 ? Math.round(value) : (value < 0) ? Math.ceil(value) : Math.floor(value);
         var widthNumeric = getComponent(aspectRatioWidth, 'numerictextbox');
+        var heightNumeric = getComponent(aspectRatioWidth, 'numerictextbox');
         if (icon) {
             if (width != null && !isNaN(width)) {
-                if (isNullOrUndefined(widthNumeric.value)) {
-                    widthNumeric.placeholder = width + ' px';
+                if (isNullOrUndefined((widthNumeric).value)) {
+                    (widthNumeric).placeholder = width + ' px';
                     aspectRatioWidth.placeholder = width.toString() + ' px';
                 }
                 else {
-                    widthNumeric.value = width;
+                    (widthNumeric).value = width;
                     aspectRatioWidth.value = width.toString() + ' px';
                 }
             }
             else {
-                if (isNullOrUndefined(widthNumeric.value)) {
-                    widthNumeric.placeholder = '0 px';
+                if (isNullOrUndefined((widthNumeric).value)) {
+                    (widthNumeric).placeholder = '0 px';
                     aspectRatioWidth.placeholder = '0 px';
+                    if (isNullOrUndefined(heightNumeric.value) && !isNullOrUndefined(heightNumeric.placeholder)) {
+                        (widthNumeric).placeholder = "" + parent.img.srcWidth;
+                        aspectRatioWidth.placeholder = "" + parent.img.srcWidth;
+                    }
                 }
                 else {
-                    widthNumeric.value = 0;
+                    (widthNumeric).value = 0;
                     aspectRatioWidth.value = '0 px';
                 }
             }
@@ -797,79 +880,94 @@ var ToolbarModule = /** @class */ (function () {
     };
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
     ToolbarModule.prototype.heightAspectRatio = function (e) {
+        /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
+        if (e.keyCode === 109) {
+            return;
+        }
         var parent = this.parent;
-        var aspectRatioHeight = parent.element.querySelector('#' + parent.element.id + '_resizeHeight');
-        var aspectRatioWidth = parent.element.querySelector('#' + parent.element.id + '_resizeWidth');
-        var icon = parent.element.querySelector('#' + parent.element.id + '_aspectratio');
+        var id = parent.element.id;
+        var aspectRatioHeight = parent.element.querySelector('#' + id + '_resizeHeight');
+        var aspectRatioWidth = parent.element.querySelector('#' + id + '_resizeWidth');
+        var icon = parent.element.querySelector('#' + id + '_aspectratio');
         var originalWidth = parent.img.destWidth;
         var originalHeight = parent.img.destHeight;
         var aspectRatioWidthValue = parseFloat(aspectRatioWidth.value);
-        var height = Math.floor((aspectRatioWidthValue / (originalWidth / originalHeight)));
+        var value = aspectRatioWidthValue / (originalWidth / originalHeight);
+        var height = value % 1 >= 0.5 || value % 1 <= -0.5 ? Math.round(value) : (value < 0) ? Math.ceil(value) : Math.floor(value);
         var heightNumeric = getComponent(aspectRatioHeight, 'numerictextbox');
+        var widthNumeric = getComponent(aspectRatioWidth, 'numerictextbox');
         if (icon) {
             if (!isNaN(height)) {
-                if (isNullOrUndefined(heightNumeric.value)) {
-                    heightNumeric.placeholder = height + ' px';
+                if (isNullOrUndefined((heightNumeric).value)) {
+                    (heightNumeric).placeholder = height + ' px';
                     aspectRatioHeight.placeholder = height.toString() + ' px';
                 }
                 else {
-                    heightNumeric.value = height;
+                    (heightNumeric).value = height;
                     aspectRatioHeight.value = height.toString() + ' px';
                 }
             }
             else {
-                if (isNullOrUndefined(heightNumeric.value)) {
-                    heightNumeric.placeholder = '0 px';
+                if (isNullOrUndefined((heightNumeric).value)) {
+                    (heightNumeric).placeholder = '0 px';
                     aspectRatioHeight.placeholder = '0 px';
+                    if (isNullOrUndefined(widthNumeric.value) && !isNullOrUndefined(widthNumeric.placeholder)) {
+                        (heightNumeric).placeholder = "" + parent.img.srcHeight;
+                        aspectRatioHeight.placeholder = "" + parent.img.srcHeight;
+                    }
                 }
                 else {
-                    heightNumeric.value = 0;
+                    (heightNumeric).value = 0;
                     aspectRatioHeight.value = '0 px';
                 }
             }
         }
     };
     ToolbarModule.prototype.getResizeToolbarItem = function () {
-        var toolbarItems = [];
-        var isResize = this.parent.aspectWidth && this.parent.aspectHeight ? true : false;
+        var parent = this.parent;
+        var id = parent.element.id;
+        var isResize = parent.aspectWidth && parent.aspectHeight ? true : false;
         var width = this.parent.transform.degree % 90 === 0 && this.parent.transform.degree % 180 !== 0 ?
             Math.ceil(this.parent.img.srcHeight).toString() : Math.ceil(this.parent.img.srcWidth).toString();
         var height = this.parent.transform.degree % 90 === 0 && this.parent.transform.degree % 180 !== 0 ?
             Math.ceil(this.parent.img.srcWidth).toString() : Math.ceil(this.parent.img.srcHeight).toString();
+        var toolbarItems = [];
         var spanWidth = document.createElement('span');
         spanWidth.innerHTML = this.l10n.getConstant('W');
-        toolbarItems.push({ id: this.parent.element.id + '_width', cssClass: 'e-ie-resize-width', template: spanWidth, align: 'Center' });
-        toolbarItems.push({ id: this.parent.element.id + '_resizeWidth', prefixIcon: 'e-icons e-anti-clock-wise',
+        toolbarItems.push({ id: id + '_width', cssClass: 'e-ie-resize-width', template: spanWidth, align: 'Center' });
+        toolbarItems.push({ id: id + '_resizeWidth', prefixIcon: 'e-icons e-anti-clock-wise',
             tooltipText: this.l10n.getConstant('Width'), align: 'Center', type: 'Input', template: new NumericTextBox({ width: 75, htmlAttributes: { maxLength: "4" },
-                showSpinButton: false, value: isResize ? this.parent.aspectWidth : null,
+                showSpinButton: false, value: isResize ? parent.aspectWidth : null,
                 placeholder: isResize ? null : width, format: '###.## px' })
         });
         var spanHeight = document.createElement('span');
         spanHeight.innerHTML = this.l10n.getConstant('H');
-        toolbarItems.push({ id: this.parent.element.id + '_height', cssClass: 'e-ie-resize-height', template: spanHeight, align: 'Center' });
-        toolbarItems.push({ id: this.parent.element.id + '_resizeHeight', prefixIcon: 'e-icons e-clock-wise',
+        toolbarItems.push({ id: id + '_height', cssClass: 'e-ie-resize-height', template: spanHeight, align: 'Center' });
+        toolbarItems.push({ id: id + '_resizeHeight', prefixIcon: 'e-icons e-clock-wise',
             tooltipText: this.l10n.getConstant('Height'), align: 'Center', type: 'Input', template: new NumericTextBox({ width: 75, htmlAttributes: { maxLength: "4" },
-                showSpinButton: false, value: isResize ? this.parent.aspectHeight : null,
+                showSpinButton: false, value: isResize ? parent.aspectHeight : null,
                 placeholder: isResize ? null : height, format: '###.## px' })
         });
         if (!this.isAspectRatio) {
-            toolbarItems.push({ id: this.parent.element.id + '_aspectratio', prefixIcon: 'e-icons e-lock', align: 'Center', tooltipText: this.l10n.getConstant('AspectRatio'), type: 'Button' });
+            toolbarItems.push({ id: id + '_aspectratio', prefixIcon: 'e-icons e-lock', align: 'Center', tooltipText: this.l10n.getConstant('AspectRatio'), type: 'Button' });
             this.isAspectRatio = true;
         }
         else {
-            toolbarItems.push({ id: this.parent.element.id + '_nonaspectratio', prefixIcon: 'e-icons e-unlock', align: 'Center', tooltipText: this.l10n.getConstant('AspectRatio'), type: 'Button' });
+            toolbarItems.push({ id: id + '_nonaspectratio', prefixIcon: 'e-icons e-unlock', align: 'Center', tooltipText: this.l10n.getConstant('AspectRatio'), type: 'Button' });
             this.isAspectRatio = false;
         }
         if (!Browser.isDevice) {
-            toolbarItems.push({ id: this.parent.element.id + '_ok', prefixIcon: 'e-icons e-check', cssClass: 'top-icon e-tick',
+            toolbarItems.push({ id: id + '_ok', prefixIcon: 'e-icons e-check', cssClass: 'top-icon e-tick',
                 tooltipText: this.l10n.getConstant('OK'), align: 'Right' });
-            toolbarItems.push({ id: this.parent.element.id + '_cancel', prefixIcon: 'e-icons e-close', cssClass: 'top-icon e-save',
+            toolbarItems.push({ id: id + '_cancel', prefixIcon: 'e-icons e-close', cssClass: 'top-icon e-save',
                 tooltipText: this.l10n.getConstant('Cancel'), align: 'Right' });
         }
         return toolbarItems;
     };
     ToolbarModule.prototype.initResizeToolbar = function () {
         var _this = this;
+        var parent = this.parent;
+        var id = parent.element.id;
         var leftItem = this.getLeftToolbarItem(false, true);
         var rightItem = this.getRightToolbarItem();
         var mainItem = this.getResizeToolbarItem();
@@ -889,16 +987,16 @@ var ToolbarModule = /** @class */ (function () {
                 if (!Browser.isDevice) {
                     _this.renderSaveBtn();
                 }
-                _this.parent.trigger('toolbarCreated', { toolbarType: 'shapes' });
+                parent.trigger('toolbarCreated', { toolbarType: 'shapes' });
                 if (Browser.isDevice) {
-                    if (_this.defToolbarItems.length > 0 && (!isNullOrUndefined(document.getElementById(_this.parent.element.id + '_bottomToolbar')))) {
+                    if (_this.defToolbarItems.length > 0 && (!isNullOrUndefined(document.getElementById(id + '_bottomToolbar')))) {
                         /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
                         toolbar.refreshOverflow();
                     }
                 }
                 else {
                     _this.createLeftToolbarControls();
-                    if (_this.defToolbarItems.length > 0 && (!isNullOrUndefined(document.getElementById(_this.parent.element.id + '_toolbar')))) {
+                    if (_this.defToolbarItems.length > 0 && (!isNullOrUndefined(document.getElementById(id + '_toolbar')))) {
                         /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
                         toolbar.refreshOverflow();
                     }
@@ -906,35 +1004,39 @@ var ToolbarModule = /** @class */ (function () {
             }
         });
         if (Browser.isDevice) {
-            toolbar.appendTo('#' + this.parent.element.id + '_bottomToolbar');
+            toolbar.appendTo('#' + id + '_bottomToolbar');
         }
         else {
-            toolbar.appendTo('#' + this.parent.element.id + '_toolbar');
+            toolbar.appendTo('#' + id + '_toolbar');
         }
-        this.parent.isResize = false;
+        parent.isResize = false;
         this.enableDisableTbrBtn();
-        this.parent.isResize = true;
-        this.parent.notify('transform', { prop: 'disableZoomOutBtn', value: { isZoomOut: true } });
+        parent.isResize = true;
+        parent.notify('transform', { prop: 'disableZoomOutBtn', value: { isZoomOut: true } });
     };
     ToolbarModule.prototype.wireResizeBtnEvents = function () {
         var parent = this.parent;
-        var aspectRatioHeight = parent.element.querySelector('#' + parent.element.id + '_resizeHeight');
-        var aspectRatioWidth = parent.element.querySelector('#' + parent.element.id + '_resizeWidth');
+        var id = parent.element.id;
+        var aspectRatioHeight = parent.element.querySelector('#' + id + '_resizeHeight');
+        var aspectRatioWidth = parent.element.querySelector('#' + id + '_resizeWidth');
         if (!isNullOrUndefined(aspectRatioHeight)) {
+            aspectRatioHeight.addEventListener('keydown', this.widthPress.bind(this));
             aspectRatioWidth.addEventListener('keyup', this.heightAspectRatio.bind(this));
         }
         if (!isNullOrUndefined(aspectRatioWidth)) {
+            aspectRatioWidth.addEventListener('keydown', this.heightPress.bind(this));
             aspectRatioHeight.addEventListener('keyup', this.widthAspectRatio.bind(this));
         }
     };
     ToolbarModule.prototype.enableDisableTbrBtn = function () {
         var parent = this.parent;
+        var id = parent.element.id;
         if (!this.preventEnableDisableUr) {
             var object = { appliedUndoRedoColl: [] };
             parent.notify('undo-redo', { prop: 'getAppliedUndoRedoColl', value: { obj: object } });
             var undoRedoObj = { undoRedoStep: null };
             parent.notify('undo-redo', { prop: 'getUndoRedoStep', value: { obj: undoRedoObj } });
-            var undo = parent.element.querySelector('#' + parent.element.id + '_undo');
+            var undo = parent.element.querySelector('#' + id + '_undo');
             if (undo && undoRedoObj['undoRedoStep'] === 0) {
                 undo.classList.add('e-disabled');
                 undo.parentElement.classList.add('e-overlay');
@@ -943,7 +1045,7 @@ var ToolbarModule = /** @class */ (function () {
                 undo.classList.remove('e-disabled');
                 undo.parentElement.classList.remove('e-overlay');
             }
-            var redo = parent.element.querySelector('#' + parent.element.id + '_redo');
+            var redo = parent.element.querySelector('#' + id + '_redo');
             if (redo && (undoRedoObj['undoRedoStep'] === object['appliedUndoRedoColl'].length)) {
                 redo.classList.add('e-disabled');
                 redo.parentElement.classList.add('e-overlay');
@@ -957,7 +1059,7 @@ var ToolbarModule = /** @class */ (function () {
                 redo.parentElement.classList.remove('e-overlay');
             }
         }
-        var zoomIn = document.querySelector('#' + parent.element.id + '_zoomIn');
+        var zoomIn = document.querySelector('#' + id + '_zoomIn');
         if (zoomIn && parent.zoomSettings.zoomFactor >= parent.zoomSettings.maxZoomFactor) {
             zoomIn.classList.add('e-disabled');
             zoomIn.parentElement.classList.add('e-overlay');
@@ -966,7 +1068,7 @@ var ToolbarModule = /** @class */ (function () {
             zoomIn.classList.remove('e-disabled');
             zoomIn.parentElement.classList.remove('e-overlay');
         }
-        var zoomOut = document.querySelector('#' + parent.element.id + '_zoomOut');
+        var zoomOut = document.querySelector('#' + id + '_zoomOut');
         if (zoomOut && parent.zoomSettings.zoomFactor <= parent.zoomSettings.minZoomFactor) {
             zoomOut.classList.add('e-disabled');
             zoomOut.parentElement.classList.add('e-overlay');
@@ -975,7 +1077,7 @@ var ToolbarModule = /** @class */ (function () {
             zoomOut.classList.remove('e-disabled');
             zoomOut.parentElement.classList.remove('e-overlay');
         }
-        var frame = document.querySelector('#' + parent.element.id + '_frame');
+        var frame = document.querySelector('#' + id + '_frame');
         if (frame && ((parent.currSelectionPoint && parent.currSelectionPoint.shape === 'crop-circle') || parent.isCircleCrop)) {
             frame.classList.add('e-disabled');
         }
@@ -985,9 +1087,10 @@ var ToolbarModule = /** @class */ (function () {
     };
     ToolbarModule.prototype.createLeftToolbarControls = function () {
         var parent = this.parent;
+        var id = parent.element.id;
         if (this.defToolbarItems !== undefined && this.defToolbarItems.length > 0 &&
-            (document.getElementById(parent.element.id + '_toolbar'))) {
-            var uploadDiv = document.getElementById(parent.element.id + '_toolbar')
+            (document.getElementById(id + '_toolbar'))) {
+            var uploadDiv = document.getElementById(id + '_toolbar')
                 .querySelector('.e-image-upload');
             if (uploadDiv) {
                 var uploadElem = uploadDiv.getElementsByTagName('input')[0];
@@ -1003,7 +1106,8 @@ var ToolbarModule = /** @class */ (function () {
     };
     ToolbarModule.prototype.fileSelect = function (inputElement, args) {
         var type = inputElement.files[0].type.split('/')[1];
-        if (type === 'png' || type === 'jpg' || type === 'jpeg' || type === 'svg' || type === 'svg+xml') {
+        var filesTypes = ['png', 'jpg', 'jpeg', 'svg', 'svg+xml'];
+        if (filesTypes.indexOf(type) > -1) {
             this.parent.notify('draw', { prop: 'fileSelect', value: { inputElement: inputElement, args: args } });
         }
         else {
@@ -1015,6 +1119,7 @@ var ToolbarModule = /** @class */ (function () {
         var parent = this.parent;
         var isCustomized = false;
         var items = [];
+        var id = parent.element.id;
         var defItems = ['Ellipse', 'Arrow', 'Line', 'Rectangle', 'Pen', 'Path', 'Text'];
         if (parent.toolbar) {
             for (var i = 0; i < defItems.length; i++) {
@@ -1050,9 +1155,9 @@ var ToolbarModule = /** @class */ (function () {
         }
         var obj = { freehandDrawSelectedId: null };
         parent.notify('freehand-draw', { prop: 'getFreehandDrawSelectedId', onPropertyChange: false, value: { obj: obj } });
-        var duplicateElement = document.querySelector('#' + parent.element.id + '_duplicate');
-        var removeElement = document.querySelector('#' + parent.element.id + '_remove');
-        var editTextElement = document.querySelector('#' + parent.element.id + '_editText');
+        var duplicateElement = document.querySelector('#' + id + '_duplicate');
+        var removeElement = document.querySelector('#' + id + '_remove');
+        var editTextElement = document.querySelector('#' + id + '_editText');
         if ((parent.activeObj.activePoint.width === 0 && parent.activeObj.activePoint.height === 0) &&
             (isNullOrUndefined(parent.activeObj.pointColl) || (parent.activeObj.pointColl
                 && parent.activeObj.pointColl.length === 0)) &&
@@ -1084,7 +1189,7 @@ var ToolbarModule = /** @class */ (function () {
             open: function (args) {
                 if (parent.currObjType.isFiltered) {
                     parent.okBtn();
-                    parent.element.querySelector('#' + _this.parent.element.id + '_annotationBtn').click();
+                    parent.element.querySelector('#' + id + '_annotationBtn').click();
                 }
                 if (Browser.isDevice) {
                     args.element.parentElement.style.top = drpDownBtn.element.getBoundingClientRect().top -
@@ -1129,19 +1234,13 @@ var ToolbarModule = /** @class */ (function () {
                     case 'text':
                         _this.currentToolbar = 'text';
                         parent.notify('shape', { prop: 'draw-shape-text' });
-                        // this.setInitialShapeSettings(args);
-                        // parent.activeObj.textFlip = parent.transform.currFlipState;
-                        // parent.notify('selection', {prop: 'annotate', value: {shape: args.item.id }});
-                        // parent.notify('toolbar', { prop: 'refresh-toolbar', onPropertyChange: false, value: {type: 'text',
-                        //     isApplyBtn: null, isCropping: null, isZooming: null, cType: null}});
                         break;
                     case 'image':
                         _this.currentToolbar = 'shapes';
-                        parent.element.querySelector('#' + _this.parent.element.id + '_fileUpload').click();
+                        parent.element.querySelector('#' + id + '_fileUpload').click();
                         break;
                     default:
                         _this.currentToolbar = 'shapes';
-                        /// parent.notify('shape', { prop: 'draw-shape', value: {obj: (args.item.id).toLowerCase()}});
                         _this.setInitialShapeSettings(args);
                         parent.notify('selection', { prop: 'annotate', value: { shape: args.item.id } });
                         parent.notify('toolbar', { prop: 'refresh-toolbar', onPropertyChange: false, value: { type: 'shapes',
@@ -1149,10 +1248,36 @@ var ToolbarModule = /** @class */ (function () {
                         break;
                 }
                 _this.updateToolbarItems();
+                var tempTogglePen = parent.togglePen;
+                if (args.item.id === 'pen') {
+                    parent.togglePen = false;
+                }
+                parent.notify('draw', { prop: 'redrawDownScale' });
+                parent.togglePen = tempTogglePen;
             }
         });
         // Render initialized DropDownButton.
-        drpDownBtn.appendTo('#' + parent.element.id + '_annotationBtn');
+        drpDownBtn.appendTo('#' + id + '_annotationBtn');
+    };
+    ToolbarModule.prototype.renderStraightenSlider = function () {
+        var parent = this.parent;
+        var id = parent.element.id;
+        if ((isNullOrUndefined(parent.toolbar) || (parent.toolbar && parent.toolbar.indexOf('Straightening') > -1)) &&
+            parent.element.querySelector('#' + id + '_straightenSlider')) {
+            var slider = this.createSlider(-45, 45, parent.cropObj.straighten, 'straighten');
+            slider.appendTo('#' + id + '_straightenSlider');
+            var sliderHandle = slider.element.querySelector('.e-handle');
+            if (sliderHandle && !Browser.isDevice) {
+                sliderHandle.addEventListener('mousedown', function (e) {
+                    e.preventDefault();
+                    e.stopPropagation();
+                });
+                sliderHandle.addEventListener('touchstart', function (e) {
+                    e.preventDefault();
+                    e.stopPropagation();
+                });
+            }
+        }
     };
     ToolbarModule.prototype.renderCropBtn = function () {
         var _this = this;
@@ -1178,10 +1303,15 @@ var ToolbarModule = /** @class */ (function () {
             items.push({ text: this.l10n.getConstant('Square'), id: 'square', iconCss: 'e-icons e-square' });
         }
         if (isNullOrUndefined(parent.toolbar) || !isCustomized || (parent.toolbar && parent.toolbar.indexOf('RatioSelection') > -1)) {
+            items.push({ text: '2:3', id: '2:3', iconCss: 'e-icons e-custom-f' });
             items.push({ text: '3:2', id: '3:2', iconCss: 'e-icons e-custom-a' });
+            items.push({ text: '3:4', id: '3:4', iconCss: 'e-icons e-custom-g' });
             items.push({ text: '4:3', id: '4:3', iconCss: 'e-icons e-custom-b' });
+            items.push({ text: '4:5', id: '4:5', iconCss: 'e-icons e-custom-h' });
             items.push({ text: '5:4', id: '5:4', iconCss: 'e-icons e-custom-c' });
+            items.push({ text: '5:7', id: '5:7', iconCss: 'e-icons e-custom-i' });
             items.push({ text: '7:5', id: '7:5', iconCss: 'e-icons e-custom-d' });
+            items.push({ text: '9:16', id: '9:16', iconCss: 'e-icons e-custom-j' });
             items.push({ text: '16:9', id: '16:9', iconCss: 'e-icons e-custom-e' });
         }
         var iconCss;
@@ -1208,7 +1338,9 @@ var ToolbarModule = /** @class */ (function () {
                         args.element.parentElement.offsetHeight + 'px';
                 }
                 if (parent.activeObj.shape && parent.activeObj.shape.split('-').length > 1) {
-                    document.getElementById(parent.activeObj.shape.split('-')[1]).classList.add('e-selected');
+                    var elem = document.getElementById(parent.activeObj.shape.split('-')[1]);
+                    elem.classList.add('e-selected');
+                    elem.focus();
                 }
                 parent.notify('transform', { prop: 'disableZoomOutBtn', value: { isZoomOut: true } });
             },
@@ -1216,10 +1348,10 @@ var ToolbarModule = /** @class */ (function () {
             select: function (args) {
                 _this.cropSelect(args);
                 drpDownBtn.iconCss = 'e-icons ' + _this.getCurrentShapeIcon('crop-' + args.item.id);
-                drpDownBtn.content = parent.toPascalCase(args.item.id);
+                drpDownBtn.content = Browser.isDevice ? null : parent.toPascalCase(args.item.id);
             },
-            iconCss: 'e-icons ' + iconCss, cssClass: 'e-image-popup',
-            content: parent.toPascalCase(shape.replace('crop-', ''))
+            iconCss: 'e-icons ' + iconCss, cssClass: 'e-image-popup e-ie-crop-ddb-popup',
+            content: Browser.isDevice ? null : parent.toPascalCase(shape.replace('crop-', ''))
         });
         drpDownBtn.appendTo('#' + parent.element.id + '_cropBtn');
     };
@@ -1241,11 +1373,11 @@ var ToolbarModule = /** @class */ (function () {
         var drpDownBtn = new DropDownButton({
             open: function (args) {
                 if (Browser.isDevice) {
-                    var ht = args.element.parentElement.offsetHeight;
-                    args.element.parentElement.style.display = 'none';
-                    args.element.parentElement.style.top = drpDownBtn.element.getBoundingClientRect().top -
-                        ht + 'px';
-                    args.element.parentElement.style.display = 'block';
+                    var elem = args.element.parentElement;
+                    var ht = elem.offsetHeight;
+                    elem.style.display = 'none';
+                    elem.style.top = drpDownBtn.element.getBoundingClientRect().top - ht + 'px';
+                    elem.style.display = 'block';
                 }
             },
             items: items, select: parent.transformSelect.bind(this),
@@ -1255,107 +1387,127 @@ var ToolbarModule = /** @class */ (function () {
     };
     ToolbarModule.prototype.renderSaveBtn = function () {
         var parent = this.parent;
+        var id = parent.element.id;
         var saveItems = [
             { text: 'JPEG', id: 'jpeg' },
             { text: 'PNG', id: 'png' },
             { text: 'SVG', id: 'svg' }
         ];
-        var ddbElem = document.getElementById(parent.element.id + '_saveBtn');
+        var ddbElem = document.getElementById(id + '_saveBtn');
         if (ddbElem) {
             // Initialize the DropDownButton component.
             var saveDrpDownBtn = new DropDownButton({ items: saveItems, cssClass: 'e-caret-hide e-image-popup', iconCss: 'e-icons e-save',
                 select: function (args) {
                     parent.export(args.item.text);
+                    parent.isChangesSaved = true;
+                    parent.notify('draw', { prop: 'redrawDownScale' });
                 }
             });
-            saveDrpDownBtn.appendTo('#' + parent.element.id + '_saveBtn');
+            saveDrpDownBtn.appendTo('#' + id + '_saveBtn');
         }
     };
     ToolbarModule.prototype.getCropTransformToolbarItem = function () {
         var parent = this.parent;
+        var id = parent.element.id;
         var toolbarItems = [];
-        toolbarItems.push({ id: parent.element.id + '_crop', tooltipText: this.l10n.getConstant('CropSelection'), align: 'Center',
-            template: '<button id="' + parent.element.id + '_cropBtn"></button>'
+        toolbarItems.push({ id: id + '_crop', tooltipText: this.l10n.getConstant('CropSelection'), align: 'Center',
+            template: '<button id="' + id + '_cropBtn"></button>'
         });
         toolbarItems.push({ align: 'Center', type: 'Separator' });
         if (isNullOrUndefined(parent.toolbar) || (parent.toolbar && (parent.toolbar.indexOf('Transform') > -1 || parent.toolbar.indexOf('RotateLeft') > -1))) {
-            toolbarItems.push({ id: parent.element.id + '_rotateLeft', prefixIcon: 'e-icons e-anti-clock-wise', tooltipText: this.l10n.getConstant('RotateLeft'), align: 'Center' });
+            toolbarItems.push({ id: id + '_rotateLeft', prefixIcon: 'e-icons e-anti-clock-wise', tooltipText: this.l10n.getConstant('RotateLeft'), align: 'Center' });
         }
         if (isNullOrUndefined(parent.toolbar) || (parent.toolbar && (parent.toolbar.indexOf('Transform') > -1 || parent.toolbar.indexOf('RotateRight') > -1))) {
-            toolbarItems.push({ id: parent.element.id + '_rotateRight', prefixIcon: 'e-icons e-clock-wise', tooltipText: this.l10n.getConstant('RotateRight'), align: 'Center' });
+            toolbarItems.push({ id: id + '_rotateRight', prefixIcon: 'e-icons e-clock-wise', tooltipText: this.l10n.getConstant('RotateRight'), align: 'Center' });
         }
         if (toolbarItems.length > 2) {
             toolbarItems.push({ align: 'Center', type: 'Separator' });
         }
         if (isNullOrUndefined(parent.toolbar) || (parent.toolbar && (parent.toolbar.indexOf('Transform') > -1 || parent.toolbar.indexOf('HorizontalFlip') > -1))) {
-            toolbarItems.push({ id: parent.element.id + '_horizontalFlip', prefixIcon: 'e-icons e-horizontal-flip', tooltipText: this.l10n.getConstant('HorizontalFlip'), align: 'Center' });
+            toolbarItems.push({ id: id + '_horizontalFlip', prefixIcon: 'e-icons e-horizontal-flip', tooltipText: this.l10n.getConstant('HorizontalFlip'), align: 'Center' });
         }
         if (isNullOrUndefined(parent.toolbar) || (parent.toolbar && (parent.toolbar.indexOf('Transform') > -1 || parent.toolbar.indexOf('VerticalFlip') > -1))) {
-            toolbarItems.push({ id: parent.element.id + '_verticalFlip', prefixIcon: 'e-icons e-vertical-flip', tooltipText: this.l10n.getConstant('VerticalFlip'), align: 'Center' });
+            toolbarItems.push({ id: id + '_verticalFlip', prefixIcon: 'e-icons e-vertical-flip', tooltipText: this.l10n.getConstant('VerticalFlip'), align: 'Center' });
+        }
+        if ((isNullOrUndefined(parent.toolbar) || (parent.toolbar && parent.toolbar.indexOf('Straightening') > -1)) && !Browser.isDevice) {
+            toolbarItems.push({ align: 'Center', type: 'Separator' });
+            if (isNullOrUndefined(parent.toolbar) || (parent.toolbar && (parent.toolbar.indexOf('Straighten') > -1 || parent.toolbar.indexOf('Straighten') > -1))) {
+                var spanWidth = document.createElement('span');
+                spanWidth.innerHTML = this.l10n.getConstant('Straighten');
+                toolbarItems.push({ id: id + '_straightenSpan', cssClass: 'e-ie-straighten-span', template: spanWidth, align: 'Center' });
+                toolbarItems.push({ id: id + '_straighten',
+                    cssClass: 'top-icon e-straighten', tooltipText: this.l10n.getConstant('Straighten'), align: 'Center', type: 'Input',
+                    template: '<div id="' + id + '_straightenSlider"></div>' });
+                var straightenSpan = document.createElement('span');
+                straightenSpan.innerHTML = parent.transform.straighten.toString() + '&#176';
+                toolbarItems.push({ id: id + '_straightenSpan', cssClass: 'e-ie-straighten-value-span',
+                    template: straightenSpan, align: 'Center' });
+            }
         }
         if (!Browser.isDevice) {
-            toolbarItems.push({ id: parent.element.id + '_ok', prefixIcon: 'e-icons e-check', cssClass: 'top-icon e-tick',
+            toolbarItems.push({ id: id + '_ok', prefixIcon: 'e-icons e-check', cssClass: 'top-icon e-tick',
                 tooltipText: this.l10n.getConstant('OK'), align: 'Right' });
-            toolbarItems.push({ id: parent.element.id + '_cancel', prefixIcon: 'e-icons e-close', cssClass: 'top-icon e-save',
+            toolbarItems.push({ id: id + '_cancel', prefixIcon: 'e-icons e-close', cssClass: 'top-icon e-save',
                 tooltipText: this.l10n.getConstant('Cancel'), align: 'Right' });
         }
         return toolbarItems;
     };
     ToolbarModule.prototype.getShapesToolbarItem = function (items) {
         var parent = this.parent;
+        var id = parent.element.id;
         var toolbarItems = [];
         if (isNullOrUndefined(parent.toolbar) || (parent.toolbar)) {
-            toolbarItems.push({ id: parent.element.id + '_annotation', tooltipText: this.l10n.getConstant('Annotation'), align: 'Center',
-                template: '<button id="' + parent.element.id + '_annotationBtn"></button>' });
+            toolbarItems.push({ id: id + '_annotation', tooltipText: this.l10n.getConstant('Annotation'), align: 'Center',
+                template: '<button id="' + id + '_annotationBtn"></button>' });
         }
         if (items.indexOf('fillColor') > -1) {
-            toolbarItems.push({ prefixIcon: 'e-icons e-copy', id: parent.element.id + '_fillcolor',
+            toolbarItems.push({ prefixIcon: 'e-icons e-copy', id: id + '_fillcolor',
                 cssClass: 'top-icon e-fill', tooltipText: this.l10n.getConstant('FillColor'), align: 'Center', type: 'Input',
-                template: '<button id="' + parent.element.id + '_fillColorBtn"></button>' });
+                template: '<button id="' + id + '_fillColorBtn"></button>' });
         }
         if (items.indexOf('strokeColor') > -1) {
-            toolbarItems.push({ prefixIcon: 'e-icons e-copy', id: parent.element.id + '_strokecolor',
+            toolbarItems.push({ prefixIcon: 'e-icons e-copy', id: id + '_strokecolor',
                 cssClass: 'top-icon e-stroke', tooltipText: this.l10n.getConstant('StrokeColor'), align: 'Center', type: 'Input',
-                template: '<button id="' + parent.element.id + '_borderColorBtn"></button>' });
+                template: '<button id="' + id + '_borderColorBtn"></button>' });
         }
         if (items.indexOf('strokeWidth') > -1) {
-            toolbarItems.push({ id: parent.element.id + '_strokeWidth', cssClass: 'top-icon e-size', tooltipText: 'Stroke Width', align: 'Center',
-                type: 'Input', template: '<button id="' + parent.element.id + '_borderWidthBtn"></button>' });
+            toolbarItems.push({ id: id + '_strokeWidth', cssClass: 'top-icon e-size', tooltipText: 'Stroke Width', align: 'Center',
+                type: 'Input', template: '<button id="' + id + '_borderWidthBtn"></button>' });
         }
         if (items.indexOf('start') > -1) {
-            toolbarItems.push({ id: parent.element.id + '_start', cssClass: 'top-icon e-size', tooltipText: 'Start', align: 'Center',
-                type: 'Input', template: '<button id="' + parent.element.id + '_startBtn"></button>' });
+            toolbarItems.push({ id: id + '_start', cssClass: 'top-icon e-size', tooltipText: 'Start', align: 'Center',
+                type: 'Input', template: '<button id="' + id + '_startBtn"></button>' });
         }
         if (items.indexOf('end') > -1) {
-            toolbarItems.push({ id: parent.element.id + '_end', cssClass: 'top-icon e-size', tooltipText: 'End', align: 'Center',
-                type: 'Input', template: '<button id="' + parent.element.id + '_endBtn"></button>' });
+            toolbarItems.push({ id: id + '_end', cssClass: 'top-icon e-size', tooltipText: 'End', align: 'Center',
+                type: 'Input', template: '<button id="' + id + '_endBtn"></button>' });
         }
         if (items.indexOf('flip') > -1) {
-            toolbarItems.push({ id: parent.element.id + '_rotLeft', prefixIcon: 'e-anti-clock-wise',
+            toolbarItems.push({ id: id + '_rotLeft', prefixIcon: 'e-anti-clock-wise',
                 tooltipText: this.l10n.getConstant('RotateLeft'), align: 'Center' });
-            toolbarItems.push({ id: parent.element.id + '_rotRight', prefixIcon: 'e-clock-wise',
+            toolbarItems.push({ id: id + '_rotRight', prefixIcon: 'e-clock-wise',
                 tooltipText: this.l10n.getConstant('RotateRight'), align: 'Center' });
-            toolbarItems.push({ id: parent.element.id + '_hFlip', prefixIcon: 'e-horizontal-flip',
+            toolbarItems.push({ id: id + '_hFlip', prefixIcon: 'e-horizontal-flip',
                 tooltipText: this.l10n.getConstant('HorizontalFlip'), align: 'Center' });
-            toolbarItems.push({ id: parent.element.id + '_vFlip', prefixIcon: 'e-vertical-flip',
+            toolbarItems.push({ id: id + '_vFlip', prefixIcon: 'e-vertical-flip',
                 tooltipText: this.l10n.getConstant('VerticalFlip'), align: 'Center' });
         }
-        toolbarItems.push({ align: 'Center', type: 'Separator' });
         if (items.indexOf('transparency') > -1) {
-            toolbarItems.push({ id: parent.element.id + '_transparency', prefixIcon: 'e-opacity',
-                tooltipText: this.l10n.getConstant('Transparency'), align: 'Center' });
+            toolbarItems.push({ align: 'Center', type: 'Separator' });
+            toolbarItems.push({ id: id + '_transparency', prefixIcon: 'e-opacity',
+                tooltipText: this.l10n.getConstant('Opacity'), align: 'Center' });
         }
         toolbarItems.push({ align: 'Center', type: 'Separator' });
         if (items.indexOf('duplicate') > -1) {
-            toolbarItems.push({ id: parent.element.id + '_duplicate', prefixIcon: 'e-icons e-order', cssClass: 'top-icon e-order',
+            toolbarItems.push({ id: id + '_duplicate', prefixIcon: 'e-icons e-order', cssClass: 'top-icon e-order',
                 tooltipText: this.l10n.getConstant('Duplicate'), align: 'Center' });
         }
         if (items.indexOf('remove') > -1) {
-            toolbarItems.push({ id: parent.element.id + '_remove', prefixIcon: 'e-icons e-trash', cssClass: 'top-icon e-trash',
+            toolbarItems.push({ id: id + '_remove', prefixIcon: 'e-icons e-trash', cssClass: 'top-icon e-trash',
                 tooltipText: this.l10n.getConstant('Remove'), align: 'Center' });
         }
         if (items.indexOf('text') > -1) {
-            toolbarItems.push({ id: parent.element.id + '_editText', prefixIcon: 'e-icons e-annotation-edit', cssClass: 'top-icon e-annotation-edit',
+            toolbarItems.push({ id: id + '_editText', prefixIcon: 'e-icons e-annotation-edit', cssClass: 'top-icon e-annotation-edit',
                 tooltipText: this.l10n.getConstant('EditText'), align: 'Center' });
         }
         var tempToolbarItems = this.processSubToolbar(items);
@@ -1366,9 +1518,9 @@ var ToolbarModule = /** @class */ (function () {
             var obj = { shape: null };
             parent.notify('selection', { prop: 'getCurrentDrawingShape', value: { obj: obj } });
             if (obj['shape'] !== 'path') {
-                toolbarItems.push({ id: parent.element.id + '_ok', prefixIcon: 'e-icons e-check', cssClass: 'top-icon e-tick',
+                toolbarItems.push({ id: id + '_ok', prefixIcon: 'e-icons e-check', cssClass: 'top-icon e-tick',
                     tooltipText: this.l10n.getConstant('OK'), align: 'Right' });
-                toolbarItems.push({ id: parent.element.id + '_cancel', prefixIcon: 'e-icons e-close', cssClass: 'top-icon e-save',
+                toolbarItems.push({ id: id + '_cancel', prefixIcon: 'e-icons e-close', cssClass: 'top-icon e-save',
                     tooltipText: this.l10n.getConstant('Cancel'), align: 'Right' });
             }
         }
@@ -1377,6 +1529,7 @@ var ToolbarModule = /** @class */ (function () {
     ToolbarModule.prototype.initCropTransformToolbar = function () {
         var _this = this;
         var parent = this.parent;
+        var id = parent.element.id;
         var leftItem = this.getLeftToolbarItem();
         var rightItem = this.getRightToolbarItem();
         var mainItem = this.getCropTransformToolbarItem();
@@ -1393,13 +1546,14 @@ var ToolbarModule = /** @class */ (function () {
             clicked: this.defToolbarClicked.bind(this),
             created: function () {
                 _this.renderCropBtn();
+                _this.renderStraightenSlider();
                 _this.wireZoomBtnEvents();
                 if (!Browser.isDevice) {
                     _this.renderSaveBtn();
                 }
                 parent.trigger('toolbarCreated', { toolbarType: 'shapes' });
                 if (Browser.isDevice) {
-                    if (_this.defToolbarItems.length > 0 && document.getElementById(parent.element.id + '_bottomToolbar')) {
+                    if (_this.defToolbarItems.length > 0 && document.getElementById(id + '_bottomToolbar')) {
                         /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
                         toolbar.refreshOverflow();
                         toolbar.refreshOverflow();
@@ -1408,87 +1562,82 @@ var ToolbarModule = /** @class */ (function () {
                 }
                 else {
                     _this.createLeftToolbarControls();
-                    if (_this.defToolbarItems.length > 0 && document.getElementById(parent.element.id + '_toolbar')) {
+                    if (_this.defToolbarItems.length > 0 && document.getElementById(id + '_toolbar')) {
                         /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
                         toolbar.refreshOverflow();
                     }
                 }
-                if (document.getElementById(parent.element.id + '_cropBtn')) {
-                    parent.notify('draw', { prop: 'select', onPropertyChange: false,
-                        value: { type: document.getElementById(parent.element.id + '_cropBtn').textContent.toLowerCase(),
-                            startX: null, startY: null, width: null, height: null } });
+                if (document.getElementById(id + '_cropBtn')) {
+                    if (!Browser.isDevice) {
+                        parent.notify('draw', { prop: 'select', onPropertyChange: false,
+                            value: { type: _this.getCropTextContent(document.getElementById(id + '_cropBtn')).toLowerCase(),
+                                startX: null, startY: null, width: null, height: null } });
+                    }
                 }
             }
         });
         if (Browser.isDevice) {
-            toolbar.appendTo('#' + parent.element.id + '_bottomToolbar');
+            toolbar.appendTo('#' + id + '_bottomToolbar');
         }
         else {
-            toolbar.appendTo('#' + parent.element.id + '_toolbar');
+            toolbar.appendTo('#' + id + '_toolbar');
+        }
+        var slider = parent.element.querySelector('#' + id + '_straightenSlider');
+        if ((isNullOrUndefined(parent.toolbar) || (parent.toolbar && parent.toolbar.indexOf('Straightening') > -1))
+            && slider && slider.parentElement.scrollHeight > this.toolbarHeight) {
+            this.toolbarHeight = parent.toolbarHeight = slider.parentElement.scrollHeight;
         }
+        /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
+        toolbar.refreshOverflow();
         this.enableDisableTbrBtn();
         parent.notify('transform', { prop: 'disableZoomOutBtn', value: { isZoomOut: true } });
     };
-    ToolbarModule.prototype.getCurrentShapeIcon = function (shape) {
-        var icon = '';
-        switch (shape) {
-            case 'rectangle':
-                icon = 'e-rectangle';
-                break;
-            case 'ellipse':
-                icon = 'e-circle';
-                break;
-            case 'line':
-                icon = 'e-line';
-                break;
-            case 'arrow':
-                icon = 'e-arrow-right-up';
-                break;
-            case 'path':
-                icon = 'e-critical-path';
-                break;
-            case 'text':
-                icon = 'e-add-text';
-                break;
-            case 'image':
-                icon = 'e-image';
-                break;
-            case 'pen':
-                icon = 'e-free-pen';
-                break;
-            case 'crop-custom':
-                icon = 'e-custom';
-                break;
-            case 'crop-circle':
-                icon = 'e-circle';
-                break;
-            case 'crop-square':
-                icon = 'e-square';
-                break;
-            case 'crop-3:2':
-                icon = 'e-custom-a';
-                break;
-            case 'crop-4:3':
-                icon = 'e-custom-b';
-                break;
-            case 'crop-5:4':
-                icon = 'e-custom-c';
-                break;
-            case 'crop-7:5':
-                icon = 'e-custom-d';
-                break;
-            case 'crop-16:9':
-                icon = 'e-custom-e';
-                break;
-            default:
-                icon = 'e-free-pen';
-                break;
+    ToolbarModule.prototype.getCropTextContent = function (elem) {
+        if (elem) {
+            var classToContentMap = { 'e-custom': 'Custom', 'e-circle': 'Circle',
+                'e-square': 'Square', 'e-custom-a': '3:2', 'e-custom-b': '4:3', 'e-custom-c': '5:4', 'e-custom-d': '7:5',
+                'e-custom-e': '16:9', 'e-custom-f': '2:3', 'e-custom-g': '3:4', 'e-custom-h': '4:5', 'e-custom-i': '5:7',
+                'e-custom-j': '9:16',
+            };
+            var classList = elem.children[0].classList;
+            for (var className in classToContentMap) {
+                if (classList.contains(className)) {
+                    return classToContentMap[className];
+                }
+            }
         }
-        return icon;
+        return '';
+    };
+    ToolbarModule.prototype.getCurrentShapeIcon = function (shape) {
+        var shapeIcons = {
+            rectangle: 'e-rectangle',
+            ellipse: 'e-circle',
+            line: 'e-line',
+            arrow: 'e-arrow-right-up',
+            path: 'e-critical-path',
+            text: 'e-add-text',
+            image: 'e-image',
+            pen: 'e-free-pen',
+            'crop-custom': 'e-custom',
+            'crop-circle': 'e-circle',
+            'crop-square': 'e-square',
+            'crop-3:2': 'e-custom-a',
+            'crop-4:3': 'e-custom-b',
+            'crop-5:4': 'e-custom-c',
+            'crop-7:5': 'e-custom-d',
+            'crop-16:9': 'e-custom-e',
+            'crop-2:3': 'e-custom-f',
+            'crop-3:4': 'e-custom-g',
+            'crop-4:5': 'e-custom-h',
+            'crop-5:7': 'e-custom-i',
+            'crop-9:16': 'e-custom-j',
+        };
+        return shapeIcons[shape] || 'e-free-pen';
     };
     ToolbarModule.prototype.initShapesToolbarItem = function (items) {
         var _this = this;
         var parent = this.parent;
+        var id = parent.element.id;
         var leftItem = this.getLeftToolbarItem();
         var rightItem = this.getRightToolbarItem();
         var mainItem = this.getShapesToolbarItem(items);
@@ -1517,7 +1666,7 @@ var ToolbarModule = /** @class */ (function () {
                 }
                 parent.trigger('toolbarCreated', { toolbarType: 'shapes' });
                 if (Browser.isDevice) {
-                    if (_this.defToolbarItems.length > 0 && document.getElementById(parent.element.id + '_bottomToolbar')) {
+                    if (_this.defToolbarItems.length > 0 && document.getElementById(id + '_bottomToolbar')) {
                         /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
                         toolbar.refreshOverflow();
                         toolbar.refreshOverflow();
@@ -1526,7 +1675,7 @@ var ToolbarModule = /** @class */ (function () {
                 }
                 else {
                     _this.createLeftToolbarControls();
-                    if (_this.defToolbarItems.length > 0 && document.getElementById(parent.element.id + '_toolbar')) {
+                    if (_this.defToolbarItems.length > 0 && document.getElementById(id + '_toolbar')) {
                         /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
                         toolbar.refreshOverflow();
                     }
@@ -1534,24 +1683,60 @@ var ToolbarModule = /** @class */ (function () {
             }
         });
         if (Browser.isDevice) {
-            toolbar.appendTo('#' + parent.element.id + '_bottomToolbar');
+            toolbar.appendTo('#' + id + '_bottomToolbar');
         }
         else {
-            toolbar.appendTo('#' + parent.element.id + '_toolbar');
+            toolbar.appendTo('#' + id + '_toolbar');
         }
         this.enableDisableTbrBtn();
     };
+    ToolbarModule.prototype.beforeModeSwitch = function (args, inst) {
+        this.popupLeft = args.element.offsetParent.style.left;
+        if (args.mode === 'Picker') {
+            inst.showButtons = true;
+            inst.dataBind();
+            args.element.querySelector('.e-apply').title = this.l10n.getConstant('Apply');
+            args.element.querySelector('.e-cancel').title = this.l10n.getConstant('Cancel');
+            args.element.querySelector('.e-mode-switch-btn').title = this.l10n.getConstant('StandardColors');
+        }
+        else {
+            inst.showButtons = false;
+            inst.dataBind();
+            args.element.querySelector('.e-mode-switch-btn').title = this.l10n.getConstant('MoreColors');
+        }
+    };
     ToolbarModule.prototype.createShapeColor = 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-fill').appendChild(parent.createElement('input', {
-                id: parent.element.id + '_shape_fill'
+                id: id + '_shape_fill'
             }));
-            var fillColor = new ColorPicker({
-                modeSwitcher: false, noColor: true, value: '',
+            var fillColor_1 = new ColorPicker({
+                modeSwitcher: true, noColor: true, value: '', inline: true,
                 showButtons: false, mode: 'Palette', cssClass: 'e-shape-fill-color',
+                beforeModeSwitch: function (args) { return _this.beforeModeSwitch(args, fillColor_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.updateFillColor(args.currentValue.hex);
+                    parent.updateFillColor(args.value);
                     if (args.currentValue.rgba === '') {
                         fillDDB_1.element.children[0].classList.add('e-nocolor-item');
                     }
@@ -1560,52 +1745,83 @@ var ToolbarModule = /** @class */ (function () {
                         fillDDB_1.element.children[0].style.backgroundColor = args.currentValue.rgba;
                     }
                     fillDDB_1.toggle();
+                },
+                onModeSwitch: function (args) {
+                    if (Browser.isDevice) {
+                        args.element.parentElement.parentElement.style.left = _this.popupLeft;
+                        args.element.parentElement.parentElement.style.top = (fillDDB_1.element.getBoundingClientRect().top - args.element.parentElement.parentElement.offsetHeight) + 'px';
+                    }
+                },
+                beforeClose: function () {
+                    fillDDB_1.toggle();
                 }
-            }, '#' + parent.element.id + '_shape_fill');
+            }, '#' + id + '_shape_fill');
             var fillDDB_1 = new DropDownButton({
                 open: function (args) {
+                    var parenElem = args.element.parentElement;
                     if (Browser.isDevice) {
-                        args.element.parentElement.style.top = fillDDB_1.element.getBoundingClientRect().top -
-                            args.element.parentElement.offsetHeight + 'px';
-                        args.element.parentElement.style.left = parent.element.offsetLeft + 'px';
+                        parenElem.style.top = fillDDB_1.element.getBoundingClientRect().top -
+                            parenElem.offsetHeight + 'px';
+                        parenElem.style.left = parent.element.offsetLeft + 'px';
                     }
                 },
                 target: '.e-shape-fill-color',
-                iconCss: 'e-dropdownbtn-preview'
-            }, '#' + parent.element.id + '_fillColorBtn');
-            fillColor.inline = true;
+                iconCss: 'e-dropdownbtn-preview',
+                cssClass: 'e-ie-ddb-popup'
+            }, '#' + id + '_fillColorBtn');
+            fillColor_1.inline = true;
+            fillColor_1.value = fillColor_1.getValue(fillColor_1.value, 'rgba');
             parent.element.querySelector('.e-fill.e-template .e-dropdownbtn-preview').classList.add('e-nocolor-item');
         }
         if (items.indexOf('strokeColor') > -1) {
             parent.element.querySelector('.e-template.e-stroke').appendChild(parent.createElement('input', {
-                id: parent.element.id + '_shape_stroke'
+                id: id + '_shape_stroke'
             }));
-            var strokeColor = new ColorPicker({
-                modeSwitcher: false, noColor: false, value: '#fff',
+            var strokeColor_1 = new ColorPicker({
+                modeSwitcher: true, noColor: false, value: '#fff', inline: true,
                 showButtons: false, mode: 'Palette', cssClass: 'e-shape-stroke-color',
+                beforeModeSwitch: function (args) {
+                    _this.popupLeft = args.element.offsetParent.style.left;
+                    strokeColor_1.value = parent.activeObj.strokeSettings.strokeColor !== '#fff' ? parent.activeObj.strokeSettings.strokeColor : '#008000ff';
+                    _this.beforeModeSwitch(args, strokeColor_1);
+                },
+                presetColors: this.presetColors,
                 change: function (args) {
-                    parent.updateStrokeColor(args.currentValue.hex);
+                    parent.updateStrokeColor(args.value);
                     strokeDDB_1.element.children[0].style.backgroundColor = args.currentValue.rgba;
                     strokeDDB_1.toggle();
+                },
+                onModeSwitch: function (args) {
+                    if (Browser.isDevice) {
+                        args.element.parentElement.parentElement.style.left = _this.popupLeft;
+                        args.element.parentElement.parentElement.style.top = (strokeDDB_1.element.getBoundingClientRect().top - args.element.parentElement.parentElement.offsetHeight) + 'px';
+                    }
+                },
+                beforeClose: function () {
+                    strokeDDB_1.toggle();
                 }
-            }, '#' + parent.element.id + '_shape_stroke');
+            }, '#' + id + '_shape_stroke');
             var strokeDDB_1 = new DropDownButton({
                 open: function (args) {
+                    var parenElem = args.element.parentElement;
                     if (Browser.isDevice) {
-                        args.element.parentElement.style.top = strokeDDB_1.element.getBoundingClientRect().top -
-                            args.element.parentElement.offsetHeight + 'px';
-                        args.element.parentElement.style.left = parent.element.offsetLeft + 'px';
+                        parenElem.style.top = strokeDDB_1.element.getBoundingClientRect().top -
+                            parenElem.offsetHeight + 'px';
+                        parenElem.style.left = parent.element.offsetLeft + 'px';
                     }
                 },
                 target: '.e-shape-stroke-color',
-                iconCss: 'e-dropdownbtn-preview'
-            }, '#' + parent.element.id + '_borderColorBtn');
-            strokeColor.inline = true;
+                iconCss: 'e-dropdownbtn-preview',
+                cssClass: 'e-ie-ddb-popup'
+            }, '#' + id + '_borderColorBtn');
+            strokeColor_1.inline = true;
+            strokeColor_1.value = strokeColor_1.getValue(strokeColor_1.value, 'rgba');
             parent.element.querySelector('.e-stroke.e-template .e-dropdownbtn-preview').style.background = '#fff';
         }
     };
     ToolbarModule.prototype.createShapeBtn = function (items) {
         var parent = this.parent;
+        var id = parent.element.id;
         var strokeWidthItems = [
             { id: '1', text: this.l10n.getConstant('XSmall') },
             { id: '2', text: this.l10n.getConstant('Small') },
@@ -1613,8 +1829,18 @@ var ToolbarModule = /** @class */ (function () {
             { id: '4', text: this.l10n.getConstant('Large') },
             { id: '5', text: this.l10n.getConstant('XLarge') }
         ];
+        if (parent.activeObj.shape && (parent.activeObj.shape === 'rectangle' || parent.activeObj.shape === 'ellipse')) {
+            strokeWidthItems = [
+                { id: '1', text: this.l10n.getConstant('NoOutline') },
+                { id: '2', text: this.l10n.getConstant('XSmall') },
+                { id: '3', text: this.l10n.getConstant('Small') },
+                { id: '4', text: this.l10n.getConstant('Medium') },
+                { id: '5', text: this.l10n.getConstant('Large') },
+                { id: '6', text: this.l10n.getConstant('XLarge') }
+            ];
+        }
         if (items.indexOf('strokeWidth') > -1) {
-            var strokeWidthBtn = document.getElementById(parent.element.id + '_borderWidthBtn');
+            var strokeWidthBtn = document.getElementById(id + '_borderWidthBtn');
             var spanElem_1 = document.createElement('span');
             spanElem_1.innerHTML = this.l10n.getConstant('XSmall');
             spanElem_1.className = 'e-shape-stroke-width';
@@ -1635,27 +1861,28 @@ var ToolbarModule = /** @class */ (function () {
                     spanElem_1.textContent = args.item.text;
                     parent.updateStrokeWidth(args.item.id);
                     if (Browser.isDevice) {
-                        if (document.getElementById(parent.element.id + '_bottomToolbar')) {
+                        if (document.getElementById(id + '_bottomToolbar')) {
                             /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
-                            var toolbar_6 = getComponent(parent.element.id + '_bottomToolbar', 'toolbar');
-                            toolbar_6.refreshOverflow();
+                            var toolbar_7 = getComponent(id + '_bottomToolbar', 'toolbar');
+                            toolbar_7.refreshOverflow();
                         }
                     }
                     else {
-                        if (document.getElementById(parent.element.id + '_toolbar')) {
+                        if (document.getElementById(id + '_toolbar')) {
                             /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
-                            var toolbar_7 = getComponent(parent.element.id + '_toolbar', 'toolbar');
-                            toolbar_7.refreshOverflow();
+                            var toolbar_8 = getComponent(id + '_toolbar', 'toolbar');
+                            toolbar_8.refreshOverflow();
                         }
                     }
                 }
             });
             // Render initialized DropDownButton.
-            drpDownBtn_1.appendTo('#' + parent.element.id + '_borderWidthBtn');
+            drpDownBtn_1.appendTo('#' + id + '_borderWidthBtn');
         }
     };
     ToolbarModule.prototype.createStartBtn = function () {
         var parent = this.parent;
+        var id = parent.element.id;
         var strokeWidthItems = [
             { id: '1', text: this.l10n.getConstant('None') },
             { id: '2', text: this.l10n.getConstant('Bar') },
@@ -1666,7 +1893,7 @@ var ToolbarModule = /** @class */ (function () {
             { id: '7', text: this.l10n.getConstant('Square') },
             { id: '8', text: this.l10n.getConstant('SquareSolid') }
         ];
-        var strokeWidthBtn = document.getElementById(parent.element.id + '_startBtn');
+        var strokeWidthBtn = document.getElementById(id + '_startBtn');
         var spanElem = document.createElement('span');
         if (isNullOrUndefined(parent.activeObj.start)) {
             parent.activeObj.start = 'none';
@@ -1692,10 +1919,11 @@ var ToolbarModule = /** @class */ (function () {
             }
         });
         // Render initialized DropDownButton.
-        drpDownBtn.appendTo('#' + parent.element.id + '_startBtn');
+        drpDownBtn.appendTo('#' + id + '_startBtn');
     };
     ToolbarModule.prototype.createEndBtn = function () {
         var parent = this.parent;
+        var id = parent.element.id;
         var strokeWidthItems = [
             { id: '1', text: this.l10n.getConstant('None') },
             { id: '2', text: this.l10n.getConstant('Bar') },
@@ -1706,7 +1934,7 @@ var ToolbarModule = /** @class */ (function () {
             { id: '7', text: this.l10n.getConstant('Square') },
             { id: '8', text: this.l10n.getConstant('SquareSolid') }
         ];
-        var strokeEndBtn = document.getElementById(parent.element.id + '_endBtn');
+        var strokeEndBtn = document.getElementById(id + '_endBtn');
         var spanElem = document.createElement('span');
         if (isNullOrUndefined(parent.activeObj.end)) {
             parent.activeObj.end = 'arrowSolid';
@@ -1732,74 +1960,90 @@ var ToolbarModule = /** @class */ (function () {
             }
         });
         // Render initialized DropDownButton.
-        drpDownBtn.appendTo('#' + parent.element.id + '_endBtn');
+        drpDownBtn.appendTo('#' + id + '_endBtn');
     };
     ToolbarModule.prototype.getTextToolbarItem = function (items) {
         var parent = this.parent;
+        var id = parent.element.id;
         var toolbarItems = [];
         if (isNullOrUndefined(parent.toolbar) || (parent.toolbar)) {
-            toolbarItems.push({ id: parent.element.id + '_annotation', tooltipText: this.l10n.getConstant('Annotation'), align: 'Center',
-                template: '<button id="' + parent.element.id + '_annotationBtn"></button>' });
+            toolbarItems.push({ id: id + '_annotation', tooltipText: this.l10n.getConstant('Annotation'), align: 'Center',
+                template: '<button id="' + id + '_annotationBtn"></button>' });
         }
         if (items.indexOf('fontFamily') > -1) {
-            toolbarItems.push({ id: parent.element.id + '_fontFamily', cssClass: 'top-icon e-img-font-family',
+            toolbarItems.push({ id: id + '_fontFamily', cssClass: 'top-icon e-img-font-family',
                 tooltipText: this.l10n.getConstant('FontFamily'), align: 'Center',
-                template: '<button id="' + parent.element.id + '_fontFamilyBtn"></button>' });
+                template: '<button id="' + id + '_fontFamilyBtn"></button>' });
         }
         if (items.indexOf('fontSize') > -1) {
-            toolbarItems.push({ id: parent.element.id + '_fontSize', cssClass: 'top-icon e-img-font-size',
+            toolbarItems.push({ id: id + '_fontSize', cssClass: 'top-icon e-img-font-size',
                 tooltipText: this.l10n.getConstant('FontSize'), align: 'Center',
-                template: '<button id="' + parent.element.id + '_fontSizeBtn"></button>' });
+                template: '<button id="' + id + '_fontSizeBtn"></button>' });
         }
         if (items.indexOf('fontColor') > -1) {
-            toolbarItems.push({ cssClass: 'top-icon e-text-font-color', id: parent.element.id + '_text_strokecolor',
+            toolbarItems.push({ cssClass: 'top-icon e-text-font-color', id: id + '_text_strokecolor',
                 tooltipText: this.l10n.getConstant('FontColor'), align: 'Center',
-                type: 'Input', template: '<button id="' + parent.element.id + '_fontColorBtn"></button>' });
+                type: 'Input', template: '<button id="' + id + '_fontColorBtn"></button>' });
         }
         if (items.indexOf('bold') > -1) {
-            toolbarItems.push({ id: parent.element.id + '_bold', prefixIcon: 'e-icons e-bold', cssClass: 'top-icon e-bold',
+            toolbarItems.push({ id: id + '_bold', prefixIcon: 'e-icons e-bold', cssClass: 'top-icon e-bold',
                 tooltipText: this.l10n.getConstant('Bold'), align: 'Center' });
         }
         if (items.indexOf('italic') > -1) {
-            toolbarItems.push({ id: parent.element.id + '_italic', prefixIcon: 'e-icons e-italic', cssClass: 'top-icon e-italic',
+            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('transparency') > -1) {
+            toolbarItems.push({ id: id + '_transparency', prefixIcon: 'e-opacity',
+                tooltipText: this.l10n.getConstant('Opacity'), align: 'Center' });
+        }
         toolbarItems.push({ align: 'Center', type: 'Separator' });
         if (items.indexOf('duplicate') > -1) {
-            toolbarItems.push({ id: parent.element.id + '_duplicate', prefixIcon: 'e-icons e-order', cssClass: 'top-icon e-order',
-                tooltipText: this.l10n.getConstant('Duplicate'), align: 'Center', disabled: parent.textArea.style.display === 'block' ? true : false });
+            toolbarItems.push({ id: id + '_duplicate', prefixIcon: 'e-icons e-order', cssClass: 'top-icon e-order',
+                tooltipText: this.l10n.getConstant('Duplicate'), align: 'Center', disabled: (parent.textArea.style.display === 'block' || parent.textArea.style.display === 'inline-block') ? true : false });
         }
         if (items.indexOf('remove') > -1) {
-            toolbarItems.push({ id: parent.element.id + '_remove', prefixIcon: 'e-icons e-trash', cssClass: 'top-icon e-trash',
-                tooltipText: this.l10n.getConstant('Remove'), align: 'Center', disabled: parent.textArea.style.display === 'block' ? true : false });
+            toolbarItems.push({ id: id + '_remove', prefixIcon: 'e-icons e-trash', cssClass: 'top-icon e-trash',
+                tooltipText: this.l10n.getConstant('Remove'), align: 'Center', disabled: (parent.textArea.style.display === 'block' || parent.textArea.style.display === 'inline-block') ? true : false });
         }
         if (items.indexOf('text') > -1) {
-            toolbarItems.push({ id: parent.element.id + '_editText', prefixIcon: 'e-icons e-annotation-edit', cssClass: 'top-icon e-annotation-edit',
-                tooltipText: this.l10n.getConstant('EditText'), align: 'Center', disabled: parent.textArea.style.display === 'block' ? true : false });
+            toolbarItems.push({ id: id + '_editText', prefixIcon: 'e-icons e-annotation-edit', cssClass: 'top-icon e-annotation-edit',
+                tooltipText: this.l10n.getConstant('EditText'), align: 'Center', disabled: (parent.textArea.style.display === 'block' || parent.textArea.style.display === 'inline-block') ? true : false });
         }
         var tempToolbarItems = this.processSubToolbar(items);
         for (var i = 0, len = tempToolbarItems.length; i < len; i++) {
             toolbarItems.push(tempToolbarItems[i]);
         }
         if (!Browser.isDevice) {
-            toolbarItems.push({ id: parent.element.id + '_ok', prefixIcon: 'e-icons e-check', cssClass: 'top-icon e-tick',
+            toolbarItems.push({ id: id + '_ok', prefixIcon: 'e-icons e-check', cssClass: 'top-icon e-tick',
                 tooltipText: this.l10n.getConstant('OK'), align: 'Right' });
-            toolbarItems.push({ id: parent.element.id + '_cancel', prefixIcon: 'e-icons e-close', cssClass: 'top-icon e-save',
+            toolbarItems.push({ id: id + '_cancel', prefixIcon: 'e-icons e-close', cssClass: 'top-icon e-save',
                 tooltipText: this.l10n.getConstant('Cancel'), align: 'Right' });
         }
         return toolbarItems;
     };
     ToolbarModule.prototype.getFontFamilyItems = function () {
-        if (Browser.isDevice) {
-            return [{ id: 'arial', text: 'ABC' }, { id: 'calibri', text: 'ABC' }, { id: 'georgia', text: 'ABC' },
-                { id: 'roboto', text: 'ABC' }, { id: 'tahoma', text: 'ABC' }];
+        var parent = this.parent;
+        var items = [];
+        if (parent.fontFamily && parent.fontFamily.items && parent.fontFamily.items.length > 0) {
+            items = parent.fontFamily.items;
         }
-        return [{ id: 'arial', text: 'Arial' }, { id: 'calibri', text: 'Calibri' }, { id: 'georgia', text: 'Georgia' },
-            { id: 'roboto', text: 'Roboto' }, { id: 'tahoma', text: 'Tahoma' }];
+        else {
+            if (Browser.isDevice) {
+                items = [{ id: 'arial', text: 'ABC' }, { id: 'calibri', text: 'ABC' }, { id: 'georgia', text: 'ABC' },
+                    { id: 'roboto', text: 'ABC' }, { id: 'tahoma', text: 'ABC' }];
+            }
+            else {
+                items = [{ id: 'arial', text: 'Arial' }, { id: 'calibri', text: 'Calibri' }, { id: 'georgia', text: 'Georgia' },
+                    { id: 'roboto', text: 'Roboto' }, { id: 'tahoma', text: 'Tahoma' }];
+            }
+        }
+        return items;
     };
     ToolbarModule.prototype.initTextToolbarItem = function (items) {
         var _this = this;
         var parent = this.parent;
+        var id = parent.element.id;
         var leftItem = this.getLeftToolbarItem();
         var rightItem = this.getRightToolbarItem();
         var mainItem = this.getTextToolbarItem(items);
@@ -1824,7 +2068,7 @@ var ToolbarModule = /** @class */ (function () {
                 }
                 parent.trigger('toolbarCreated', { toolbarType: 'text' });
                 if (Browser.isDevice) {
-                    if (_this.defToolbarItems.length > 0 && document.getElementById(parent.element.id + '_bottomToolbar')) {
+                    if (_this.defToolbarItems.length > 0 && document.getElementById(id + '_bottomToolbar')) {
                         /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
                         toolbar.refreshOverflow();
                         toolbar.refreshOverflow();
@@ -1833,7 +2077,7 @@ var ToolbarModule = /** @class */ (function () {
                 }
                 else {
                     _this.createLeftToolbarControls();
-                    if (_this.defToolbarItems.length > 0 && document.getElementById(parent.element.id + '_toolbar')) {
+                    if (_this.defToolbarItems.length > 0 && document.getElementById(id + '_toolbar')) {
                         /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
                         toolbar.refreshOverflow();
                     }
@@ -1841,55 +2085,76 @@ var ToolbarModule = /** @class */ (function () {
             }
         });
         if (Browser.isDevice) {
-            toolbar.appendTo('#' + parent.element.id + '_bottomToolbar');
+            toolbar.appendTo('#' + id + '_bottomToolbar');
         }
         else {
-            toolbar.appendTo('#' + parent.element.id + '_toolbar');
+            toolbar.appendTo('#' + id + '_toolbar');
         }
         this.enableDisableTbrBtn();
     };
     ToolbarModule.prototype.createTextColor = function (items) {
+        var _this = this;
         var parent = this.parent;
+        var id = parent.element.id;
         if (items.indexOf('fontColor') > -1 && parent.element.querySelector('.e-template.e-text-font-color')) {
             parent.element.querySelector('.e-template.e-text-font-color').appendChild(parent.createElement('input', {
-                id: parent.element.id + '_text_font'
+                id: id + '_text_font'
             }));
-            var fontColor = new ColorPicker({
-                modeSwitcher: false, value: '#fff',
+            var fontColor_1 = new ColorPicker({
+                modeSwitcher: true, noColor: false, value: '#fff', inline: true,
                 showButtons: false, mode: 'Palette', cssClass: 'e-text-fontt-color',
+                beforeModeSwitch: function (args) {
+                    _this.popupLeft = args.element.offsetParent.style.left;
+                    fontColor_1.value = parent.activeObj.strokeSettings.strokeColor !== '#fff' ? parent.activeObj.strokeSettings.strokeColor : '#008000ff';
+                    _this.beforeModeSwitch(args, fontColor_1);
+                },
+                presetColors: this.presetColors,
                 change: function (args) {
-                    parent.updateFontColor(args.currentValue.hex);
+                    parent.updateFontColor(args.value);
                     strokeDDB_2.element.children[0].style.backgroundColor = args.currentValue.rgba;
                     strokeDDB_2.toggle();
+                },
+                onModeSwitch: function (args) {
+                    if (Browser.isDevice) {
+                        args.element.parentElement.parentElement.style.left = _this.popupLeft;
+                        args.element.parentElement.parentElement.style.top = (strokeDDB_2.element.getBoundingClientRect().top - args.element.parentElement.parentElement.offsetHeight) + 'px';
+                    }
+                },
+                beforeClose: function () {
+                    strokeDDB_2.toggle();
                 }
-            }, '#' + parent.element.id + '_text_font');
+            }, '#' + id + '_text_font');
             var strokeDDB_2 = new DropDownButton({
                 open: function (args) {
+                    var parenElem = args.element.parentElement;
                     if (Browser.isDevice) {
-                        args.element.parentElement.style.top = strokeDDB_2.element.getBoundingClientRect().top -
-                            args.element.parentElement.offsetHeight + 'px';
-                        args.element.parentElement.style.left = parent.element.offsetLeft + 'px';
+                        parenElem.style.top = strokeDDB_2.element.getBoundingClientRect().top -
+                            parenElem.offsetHeight + 'px';
+                        parenElem.style.left = parent.element.offsetLeft + 'px';
                     }
                 },
                 target: '.e-text-fontt-color',
-                iconCss: 'e-dropdownbtn-preview'
-            }, '#' + parent.element.id + '_fontColorBtn');
-            fontColor.inline = true;
+                iconCss: 'e-dropdownbtn-preview',
+                cssClass: 'e-ie-ddb-popup'
+            }, '#' + id + '_fontColorBtn');
+            fontColor_1.inline = true;
+            fontColor_1.value = fontColor_1.getValue(fontColor_1.value, 'rgba');
             parent.element.querySelector('.e-text-font-color.e-template .e-dropdownbtn-preview').style.background
                 = '#fff';
         }
     };
     ToolbarModule.prototype.createTextBtn = function (items) {
         var parent = this.parent;
+        var id = parent.element.id;
         if (items.indexOf('fontFamily') > -1) {
-            var fontNameBtn = document.getElementById(parent.element.id + '_fontFamilyBtn');
+            var fontNameBtn = document.getElementById(id + '_fontFamilyBtn');
             var spanElem_2 = document.createElement('span');
             if (Browser.isDevice) {
                 spanElem_2.innerHTML = 'ABC';
-                spanElem_2.setAttribute('style', 'font-family: arial');
+                spanElem_2.setAttribute('style', 'font-family: ' + parent.fontFamily.default.toLowerCase() + "'");
             }
             else {
-                spanElem_2.innerHTML = 'Arial';
+                spanElem_2.innerHTML = parent.fontFamily.default;
             }
             spanElem_2.className = 'e-text-font-family';
             if (fontNameBtn) {
@@ -1907,7 +2172,7 @@ var ToolbarModule = /** @class */ (function () {
                             args.element.parentElement.offsetHeight + 'px';
                     }
                     var fontFamily;
-                    if (parent.textArea.style.display === 'block') {
+                    if (parent.textArea.style.display === 'block' || parent.textArea.style.display === 'inline-block') {
                         fontFamily = parent.textArea.style.fontFamily;
                     }
                     else {
@@ -1924,10 +2189,10 @@ var ToolbarModule = /** @class */ (function () {
                     parent.updateFontFamily(args.item.id);
                 }
             });
-            fontFamilyBtn_1.appendTo('#' + parent.element.id + '_fontFamilyBtn');
+            fontFamilyBtn_1.appendTo('#' + id + '_fontFamilyBtn');
         }
         if (items.indexOf('fontSize') > -1) {
-            var fontSizeBtnElem = document.getElementById(parent.element.id + '_fontSizeBtn');
+            var fontSizeBtnElem = document.getElementById(id + '_fontSizeBtn');
             var fontSizeSpanElem_1 = document.createElement('span');
             var fontSizes = parent.getFontSizes();
             fontSizeSpanElem_1.innerHTML = fontSizes[0].text;
@@ -1949,11 +2214,12 @@ var ToolbarModule = /** @class */ (function () {
                     parent.updateFontSize(args.item.text);
                 }
             });
-            fontSizeBtn_1.appendTo('#' + parent.element.id + '_fontSizeBtn');
+            fontSizeBtn_1.appendTo('#' + id + '_fontSizeBtn');
         }
     };
     ToolbarModule.prototype.refreshToolbar = function (type, isApplyBtn, isCropping, isZooming, cType) {
         var parent = this.parent;
+        var id = parent.element.id;
         if (!parent.isImageLoaded || parent.isCropToolbar) {
             return;
         }
@@ -1962,33 +2228,38 @@ var ToolbarModule = /** @class */ (function () {
         var aspectIcon;
         var nonAspectIcon;
         if (type !== 'filter' && type !== 'color') {
-            if (document.getElementById(parent.element.id + '_customizeWrapper') &&
-                (getComponent(document.getElementById(parent.element.id + '_customizeWrapper'), 'toolbar')) && this.defToolbarItems.length > 0) {
-                getComponent(document.getElementById(parent.element.id + '_customizeWrapper'), 'toolbar').destroy();
-                document.getElementById(parent.element.id + '_customizeWrapper').innerHTML = '';
+            var toolbarElement = document.getElementById(id + '_toolbar');
+            var cusWrapper = document.getElementById(id + '_customizeWrapper');
+            var bottomToolbar = document.getElementById(id + '_bottomToolbar');
+            if (cusWrapper && (getComponent(cusWrapper, 'toolbar')) && this.defToolbarItems.length > 0) {
+                getComponent(cusWrapper, 'toolbar').destroy();
+                cusWrapper.innerHTML = '';
             }
-            if (document.getElementById(parent.element.id + '_toolbar') && this.defToolbarItems.length > 0) {
-                getComponent(document.getElementById(parent.element.id + '_toolbar'), 'toolbar').destroy();
-                document.getElementById(parent.element.id + '_toolbar').innerHTML = '';
+            if (toolbarElement && this.defToolbarItems.length > 0) {
+                getComponent(toolbarElement, 'toolbar').destroy();
+                toolbarElement.innerHTML = '';
             }
-            if (document.getElementById(parent.element.id + '_bottomToolbar') && this.defToolbarItems.length > 0) {
-                if (document.getElementById(parent.element.id + '_bottomToolbar').className.indexOf('e-control') > -1) {
-                    getComponent(document.getElementById(parent.element.id + '_bottomToolbar'), 'toolbar').destroy();
-                    document.getElementById(parent.element.id + '_bottomToolbar').innerHTML = '';
+            if (bottomToolbar && this.defToolbarItems.length > 0) {
+                if (bottomToolbar.className.indexOf('e-control') > -1) {
+                    getComponent(bottomToolbar, 'toolbar').destroy();
+                    bottomToolbar.innerHTML = '';
                 }
             }
         }
         this.refreshSlider();
+        if (document.querySelector('.e-slider-tooltip')) {
+            document.querySelector('.e-slider-tooltip').remove();
+        }
         this.isFrameToolbar = false;
         parent.isCropTab = false;
         switch (type) {
             case 'main':
                 if (Browser.isDevice) {
                     if (isCropping) {
-                        this.initMainToolbar(false, true, true);
+                        this.initMainToolbar(false, true, true, false, false, true);
                     }
                     else {
-                        this.initMainToolbar(false, true, null);
+                        this.initMainToolbar(false, true, null, false, false, true);
                     }
                 }
                 else if (!Browser.isDevice || isZooming) {
@@ -2034,7 +2305,7 @@ var ToolbarModule = /** @class */ (function () {
                 if (Browser.isDevice) {
                     this.initMainToolbar(false, true, true);
                 }
-                args.toolbarItems = ['strokeColor', 'strokeWidth', 'remove'];
+                args.toolbarItems = ['strokeColor', 'strokeWidth', 'remove', 'transparency'];
                 parent.trigger('toolbarUpdating', args);
                 this.initPenToolbarItem(args.toolbarItems);
                 break;
@@ -2048,13 +2319,17 @@ var ToolbarModule = /** @class */ (function () {
                 this.updateContextualToolbar(type);
                 break;
             case 'resize':
+                if (parent.isCircleCrop || (parent.currSelectionPoint && parent.currSelectionPoint.shape === 'crop-circle')) {
+                    parent.aspectHeight = parent.aspectWidth;
+                    this.isAspectRatio = false;
+                }
                 this.initResizeToolbar();
                 if (Browser.isDevice) {
                     this.initMainToolbar(false, true, true, true);
                 }
-                aspectIcon = parent.element.querySelector('#' + this.parent.element.id + '_aspectratio');
-                nonAspectIcon = parent.element.querySelector('#' + this.parent.element.id + '_nonaspectratio');
-                if (this.parent.aspectWidth && this.parent.aspectHeight) {
+                aspectIcon = parent.element.querySelector('#' + id + '_aspectratio');
+                nonAspectIcon = parent.element.querySelector('#' + id + '_nonaspectratio');
+                if (parent.aspectWidth && parent.aspectHeight) {
                     if (nonAspectIcon) {
                         parent.notify('transform', { prop: 'resize', value: { width: parent.aspectWidth, height: parent.aspectHeight, isAspectRatio: false } });
                     }
@@ -2074,6 +2349,9 @@ var ToolbarModule = /** @class */ (function () {
                 }
                 parent.updateCropTransformItems();
                 this.initCropTransformToolbar();
+                if (Browser.isDevice) {
+                    this.updateContextualToolbar('color', 'straighten', true);
+                }
                 break;
             case 'frame':
                 this.isFrameToolbar = true;
@@ -2084,8 +2362,9 @@ var ToolbarModule = /** @class */ (function () {
                 else {
                     this.initMainToolbar(true, null, null, false, true);
                 }
-                if (parent.element.querySelector('#' + parent.element.id + '_' + parent.frameObj.type)) {
-                    parent.element.querySelector('#' + parent.element.id + '_' + parent.frameObj.type).classList.add('e-selected-btn');
+                var frameElem = parent.element.querySelector('#' + id + '_' + parent.frameObj.type);
+                if (frameElem) {
+                    frameElem.classList.add('e-selected-btn');
                 }
                 if (parent.frameObj.type !== 'none') {
                     this.updateContextualToolbar(type, cType);
@@ -2096,10 +2375,23 @@ var ToolbarModule = /** @class */ (function () {
         this.currToolbar = type;
         this.refreshDropDownBtn(isCropping);
     };
+    ToolbarModule.prototype.performCropTransformClick = function () {
+        var parent = this.parent;
+        parent.notify('draw', { prop: 'setTempStraightenZoomDeg' });
+        parent.tempStraighten = parent.transform.straighten;
+        if (parent.currObjType.isFiltered) {
+            parent.okBtn();
+        }
+        parent.isStraightening = true;
+        this.refreshToolbar('croptransform');
+        parent.notify('draw', { prop: 'setDestForStraighten' });
+        parent.notify('draw', { prop: 'setTempDestForStraighten' });
+    };
     ToolbarModule.prototype.getAdjustmentToolbarItem = function () {
         var toolbarItems = [];
         var parent = this.parent;
         var isCustomized = false;
+        var id = parent.element.id;
         var defItems = ['Brightness', 'Contrast', 'Hue', 'Saturation', 'Exposure', 'Opacity', 'Blur'];
         if (parent.toolbar) {
             for (var i = 0; i < defItems.length; i++) {
@@ -2110,31 +2402,31 @@ var ToolbarModule = /** @class */ (function () {
             }
         }
         if (isNullOrUndefined(parent.toolbar) || !isCustomized || (parent.toolbar && parent.toolbar.indexOf('Brightness') > -1)) {
-            toolbarItems.push({ id: parent.element.id + '_brightness', prefixIcon: 'e-icons e-brightness', cssClass: 'top-icon e-brightness',
+            toolbarItems.push({ id: id + '_brightness', prefixIcon: 'e-icons e-brightness', cssClass: 'top-icon e-brightness',
                 tooltipText: this.l10n.getConstant('Brightness'), align: 'Center' });
         }
         if (isNullOrUndefined(parent.toolbar) || !isCustomized || (parent.toolbar && parent.toolbar.indexOf('Contrast') > -1)) {
-            toolbarItems.push({ id: parent.element.id + '_contrast', prefixIcon: 'e-icons e-contrast', cssClass: 'top-icon e-contrast',
+            toolbarItems.push({ id: id + '_contrast', prefixIcon: 'e-icons e-contrast', cssClass: 'top-icon e-contrast',
                 tooltipText: this.l10n.getConstant('Contrast'), align: 'Center' });
         }
         if (isNullOrUndefined(parent.toolbar) || !isCustomized || (parent.toolbar && parent.toolbar.indexOf('Hue') > -1)) {
-            toolbarItems.push({ id: parent.element.id + '_hue', prefixIcon: 'e-icons e-fade', cssClass: 'top-icon e-fade',
+            toolbarItems.push({ id: id + '_hue', prefixIcon: 'e-icons e-fade', cssClass: 'top-icon e-fade',
                 tooltipText: this.l10n.getConstant('Hue'), align: 'Center' });
         }
         if (isNullOrUndefined(parent.toolbar) || !isCustomized || (parent.toolbar && parent.toolbar.indexOf('Saturation') > -1)) {
-            toolbarItems.push({ id: parent.element.id + '_saturation', prefixIcon: 'e-icons e-saturation', cssClass: 'top-icon e-saturation',
+            toolbarItems.push({ id: id + '_saturation', prefixIcon: 'e-icons e-saturation', cssClass: 'top-icon e-saturation',
                 tooltipText: this.l10n.getConstant('Saturation'), align: 'Center' });
         }
         if (isNullOrUndefined(parent.toolbar) || !isCustomized || (parent.toolbar && parent.toolbar.indexOf('Exposure') > -1)) {
-            toolbarItems.push({ id: parent.element.id + '_exposure', prefixIcon: 'e-icons e-grain', cssClass: 'top-icon e-grain',
+            toolbarItems.push({ id: id + '_exposure', prefixIcon: 'e-icons e-grain', cssClass: 'top-icon e-grain',
                 tooltipText: this.l10n.getConstant('Exposure'), align: 'Center' });
         }
         if (isNullOrUndefined(parent.toolbar) || !isCustomized || (parent.toolbar && parent.toolbar.indexOf('Opacity') > -1)) {
-            toolbarItems.push({ id: parent.element.id + '_opacity', prefixIcon: 'e-icons e-opacity', cssClass: 'top-icon e-opacity',
+            toolbarItems.push({ id: id + '_opacity', prefixIcon: 'e-icons e-opacity', cssClass: 'top-icon e-opacity',
                 tooltipText: this.l10n.getConstant('Opacity'), align: 'Center' });
         }
         if (isNullOrUndefined(parent.toolbar) || !isCustomized || (parent.toolbar && parent.toolbar.indexOf('Blur') > -1)) {
-            toolbarItems.push({ id: parent.element.id + '_blur', prefixIcon: 'e-icons e-tint', cssClass: 'top-icon e-tint',
+            toolbarItems.push({ id: id + '_blur', prefixIcon: 'e-icons e-tint', cssClass: 'top-icon e-tint',
                 tooltipText: this.l10n.getConstant('Blur'), align: 'Center' });
         }
         var tempToolbarItems = this.processToolbar('center');
@@ -2142,39 +2434,40 @@ var ToolbarModule = /** @class */ (function () {
             toolbarItems.push(tempToolbarItems[i]);
         }
         if (!Browser.isDevice) {
-            toolbarItems.push({ id: parent.element.id + '_ok', prefixIcon: 'e-icons e-check', cssClass: 'top-icon e-tick',
+            toolbarItems.push({ id: id + '_ok', prefixIcon: 'e-icons e-check', cssClass: 'top-icon e-tick',
                 tooltipText: this.l10n.getConstant('OK'), align: 'Right' });
-            toolbarItems.push({ id: parent.element.id + '_cancel', prefixIcon: 'e-icons e-close', cssClass: 'top-icon e-save',
+            toolbarItems.push({ id: id + '_cancel', prefixIcon: 'e-icons e-close', cssClass: 'top-icon e-save',
                 tooltipText: this.l10n.getConstant('Cancel'), align: 'Right' });
         }
         return toolbarItems;
     };
     ToolbarModule.prototype.getFrameToolbarItem = function () {
         var parent = this.parent;
+        var id = parent.element.id;
         var toolbarItems = [];
-        toolbarItems.push({ prefixIcon: 'e-icons e-copy', id: parent.element.id + '_frameColor',
+        toolbarItems.push({ prefixIcon: 'e-icons e-copy', id: id + '_frameColor',
             cssClass: 'top-icon e-stroke', tooltipText: this.l10n.getConstant('Color'), align: 'Center', type: 'Input',
-            template: '<span>' + this.l10n.getConstant('Color') + '</span><button id="' + parent.element.id + '_frameColorBtn"></button>' });
-        toolbarItems.push({ prefixIcon: 'e-icons e-copy', id: parent.element.id + '_frameGradient',
+            template: '<span>' + this.l10n.getConstant('Color') + '</span><button id="' + id + '_frameColorBtn"></button>' });
+        toolbarItems.push({ prefixIcon: 'e-icons e-copy', id: id + '_frameGradient',
             cssClass: 'top-icon e-frame-stroke', tooltipText: this.l10n.getConstant('GradientColor'), align: 'Center', type: 'Input',
-            template: '<span>' + this.l10n.getConstant('GradientColor') + '</span><button id="' + parent.element.id + '_frameGradientColorBtn"></button>' });
-        toolbarItems.push({ id: parent.element.id + '_frameSize', cssClass: 'top-icon e-size', tooltipText: this.l10n.getConstant('Size'), align: 'Center',
-            type: 'Input', template: '<span>' + this.l10n.getConstant('Size') + '</span><button id="' + parent.element.id + '_frameSizeBtn"></button>' });
+            template: '<span>' + this.l10n.getConstant('GradientColor') + '</span><button id="' + id + '_frameGradientColorBtn"></button>' });
+        toolbarItems.push({ id: id + '_frameSize', cssClass: 'top-icon e-size', tooltipText: this.l10n.getConstant('Size'), align: 'Center',
+            type: 'Input', template: '<span>' + this.l10n.getConstant('Size') + '</span><button id="' + id + '_frameSizeBtn"></button>' });
         if (parent.frameObj.type === 'line' || parent.frameObj.type === 'inset' || parent.frameObj.type === 'hook') {
-            toolbarItems.push({ id: parent.element.id + '_frameInset', cssClass: 'top-icon e-size', tooltipText: this.l10n.getConstant('Inset'), align: 'Center',
-                type: 'Input', template: '<span>' + this.l10n.getConstant('Inset') + '</span><button id="' + parent.element.id + '_frameInsetBtn"></button>' });
+            toolbarItems.push({ id: id + '_frameInset', cssClass: 'top-icon e-size', tooltipText: this.l10n.getConstant('Inset'), align: 'Center',
+                type: 'Input', template: '<span>' + this.l10n.getConstant('Inset') + '</span><button id="' + id + '_frameInsetBtn"></button>' });
         }
         if (parent.frameObj.type === 'line' || parent.frameObj.type === 'inset') {
-            toolbarItems.push({ id: parent.element.id + '_frameOffset', cssClass: 'top-icon e-size', tooltipText: this.l10n.getConstant('Offset'), align: 'Center',
-                type: 'Input', template: '<span>' + this.l10n.getConstant('Offset') + '</span><button id="' + parent.element.id + '_frameOffsetBtn"></button>' });
+            toolbarItems.push({ id: id + '_frameOffset', cssClass: 'top-icon e-size', tooltipText: this.l10n.getConstant('Offset'), align: 'Center',
+                type: 'Input', template: '<span>' + this.l10n.getConstant('Offset') + '</span><button id="' + id + '_frameOffsetBtn"></button>' });
         }
         if (parent.frameObj.type === 'line') {
-            toolbarItems.push({ id: parent.element.id + '_frameRadius', cssClass: 'top-icon e-size', tooltipText: this.l10n.getConstant('Radius'), align: 'Center',
-                type: 'Input', template: '<span>' + this.l10n.getConstant('Radius') + '</span><button id="' + parent.element.id + '_frameRadiusBtn"></button>' });
-            toolbarItems.push({ id: parent.element.id + '_frameAmount', cssClass: 'top-icon e-size', tooltipText: this.l10n.getConstant('Amount'), align: 'Center',
-                type: 'Input', template: '<span>' + this.l10n.getConstant('Amount') + '</span><button id="' + parent.element.id + '_frameAmountBtn"></button>' });
-            toolbarItems.push({ id: parent.element.id + '_frameBorder', cssClass: 'top-icon e-size', tooltipText: this.l10n.getConstant('Border'), align: 'Center',
-                type: 'Input', template: '<span>' + this.l10n.getConstant('Border') + '</span><button id="' + parent.element.id + '_frameBorderBtn"></button>' });
+            toolbarItems.push({ id: id + '_frameRadius', cssClass: 'top-icon e-size', tooltipText: this.l10n.getConstant('Radius'), align: 'Center',
+                type: 'Input', template: '<span>' + this.l10n.getConstant('Radius') + '</span><button id="' + id + '_frameRadiusBtn"></button>' });
+            toolbarItems.push({ id: id + '_frameAmount', cssClass: 'top-icon e-size', tooltipText: this.l10n.getConstant('Amount'), align: 'Center',
+                type: 'Input', template: '<span>' + this.l10n.getConstant('Amount') + '</span><button id="' + id + '_frameAmountBtn"></button>' });
+            toolbarItems.push({ id: id + '_frameBorder', cssClass: 'top-icon e-size', tooltipText: this.l10n.getConstant('Border'), align: 'Center',
+                type: 'Input', template: '<span>' + this.l10n.getConstant('Border') + '</span><button id="' + id + '_frameBorderBtn"></button>' });
         }
         return toolbarItems;
     };
@@ -2182,6 +2475,7 @@ var ToolbarModule = /** @class */ (function () {
         var toolbarItems = [];
         var parent = this.parent;
         var isCustomized = false;
+        var id = parent.element.id;
         var defItems = ['Default', 'Chrome', 'Cold', 'Warm', 'Grayscale', 'Sepia', 'Invert'];
         if (parent.toolbar) {
             for (var i = 0; i < defItems.length; i++) {
@@ -2192,39 +2486,39 @@ var ToolbarModule = /** @class */ (function () {
             }
         }
         if (isNullOrUndefined(parent.toolbar) || !isCustomized || (parent.toolbar && parent.toolbar.indexOf('Default') > -1)) {
-            toolbarItems.push({ id: parent.element.id + '_default', prefixIcon: 'e-icons e-none', cssClass: 'top-icon e-none',
+            toolbarItems.push({ id: id + '_default', prefixIcon: 'e-icons e-none', cssClass: 'top-icon e-none',
                 tooltipText: this.l10n.getConstant('Default'), align: 'Center',
-                template: '<div class="filter-wrapper" style="box-sizing: content-box;"><canvas id=' + parent.element.id + '_defaultCanvas' + '></canvas><div style="text-align:center;"><span>' + this.l10n.getConstant('Default') + '</span></div></div>' });
+                template: '<div class="filter-wrapper" style="box-sizing: content-box;"><canvas id=' + id + '_defaultCanvas' + '></canvas><div style="text-align:center;"><span>' + this.l10n.getConstant('Default') + '</span></div></div>' });
         }
         if (isNullOrUndefined(parent.toolbar) || !isCustomized || (parent.toolbar && parent.toolbar.indexOf('Chrome') > -1)) {
-            toolbarItems.push({ id: parent.element.id + '_chrome', prefixIcon: 'e-icons e-none', cssClass: 'top-icon e-none',
+            toolbarItems.push({ id: id + '_chrome', prefixIcon: 'e-icons e-none', cssClass: 'top-icon e-none',
                 tooltipText: this.l10n.getConstant('Chrome'), align: 'Center',
-                template: '<div class="filter-wrapper" style="box-sizing: content-box;"><canvas id=' + parent.element.id + '_chromeCanvas' + '></canvas><div style="text-align:center;"><span>' + this.l10n.getConstant('Chrome') + '</span></div></div>' });
+                template: '<div class="filter-wrapper" style="box-sizing: content-box;"><canvas id=' + id + '_chromeCanvas' + '></canvas><div style="text-align:center;"><span>' + this.l10n.getConstant('Chrome') + '</span></div></div>' });
         }
         if (isNullOrUndefined(parent.toolbar) || !isCustomized || (parent.toolbar && parent.toolbar.indexOf('Cold') > -1)) {
-            toolbarItems.push({ id: parent.element.id + '_cold', prefixIcon: 'e-icons e-none', cssClass: 'top-icon e-none',
+            toolbarItems.push({ id: id + '_cold', prefixIcon: 'e-icons e-none', cssClass: 'top-icon e-none',
                 tooltipText: this.l10n.getConstant('Cold'), align: 'Center',
-                template: '<div class="filter-wrapper" style="box-sizing: content-box;"><canvas id=' + parent.element.id + '_coldCanvas' + '></canvas><div style="text-align:center;"><span>' + this.l10n.getConstant('Cold') + '</span></div></div>' });
+                template: '<div class="filter-wrapper" style="box-sizing: content-box;"><canvas id=' + id + '_coldCanvas' + '></canvas><div style="text-align:center;"><span>' + this.l10n.getConstant('Cold') + '</span></div></div>' });
         }
         if (isNullOrUndefined(parent.toolbar) || !isCustomized || (parent.toolbar && parent.toolbar.indexOf('Warm') > -1)) {
-            toolbarItems.push({ id: parent.element.id + '_warm', prefixIcon: 'e-icons e-none', cssClass: 'top-icon e-none',
+            toolbarItems.push({ id: id + '_warm', prefixIcon: 'e-icons e-none', cssClass: 'top-icon e-none',
                 tooltipText: this.l10n.getConstant('Warm'), align: 'Center',
-                template: '<div class="filter-wrapper" style="box-sizing: content-box;"><canvas id=' + parent.element.id + '_warmCanvas' + '></canvas><div style="text-align:center;"><span>' + this.l10n.getConstant('Warm') + '</span></div></div>' });
+                template: '<div class="filter-wrapper" style="box-sizing: content-box;"><canvas id=' + id + '_warmCanvas' + '></canvas><div style="text-align:center;"><span>' + this.l10n.getConstant('Warm') + '</span></div></div>' });
         }
         if (isNullOrUndefined(parent.toolbar) || !isCustomized || (parent.toolbar && parent.toolbar.indexOf('Grayscale') > -1)) {
-            toolbarItems.push({ id: parent.element.id + '_grayscale', prefixIcon: 'e-icons e-none', cssClass: 'top-icon e-none',
+            toolbarItems.push({ id: id + '_grayscale', prefixIcon: 'e-icons e-none', cssClass: 'top-icon e-none',
                 tooltipText: this.l10n.getConstant('Grayscale'), align: 'Center',
-                template: '<div class="filter-wrapper" style="box-sizing: content-box;"><canvas id=' + parent.element.id + '_grayscaleCanvas' + '></canvas><div style="text-align:center;"><span>' + this.l10n.getConstant('Grayscale') + '</span></div></div>' });
+                template: '<div class="filter-wrapper" style="box-sizing: content-box;"><canvas id=' + id + '_grayscaleCanvas' + '></canvas><div style="text-align:center;"><span>' + this.l10n.getConstant('Grayscale') + '</span></div></div>' });
         }
         if (isNullOrUndefined(parent.toolbar) || !isCustomized || (parent.toolbar && parent.toolbar.indexOf('Sepia') > -1)) {
-            toolbarItems.push({ id: parent.element.id + '_sepia', prefixIcon: 'e-icons e-none', cssClass: 'top-icon e-none',
+            toolbarItems.push({ id: id + '_sepia', prefixIcon: 'e-icons e-none', cssClass: 'top-icon e-none',
                 tooltipText: this.l10n.getConstant('Sepia'), align: 'Center',
-                template: '<div class="filter-wrapper" style="box-sizing: content-box;"><canvas id=' + parent.element.id + '_sepiaCanvas' + '></canvas><div style="text-align:center;"><span>' + this.l10n.getConstant('Sepia') + '</span></div></div>' });
+                template: '<div class="filter-wrapper" style="box-sizing: content-box;"><canvas id=' + id + '_sepiaCanvas' + '></canvas><div style="text-align:center;"><span>' + this.l10n.getConstant('Sepia') + '</span></div></div>' });
         }
         if (isNullOrUndefined(parent.toolbar) || !isCustomized || (parent.toolbar && parent.toolbar.indexOf('Invert') > -1)) {
-            toolbarItems.push({ id: parent.element.id + '_invert', prefixIcon: 'e-icons e-none', cssClass: 'top-icon e-none',
+            toolbarItems.push({ id: id + '_invert', prefixIcon: 'e-icons e-none', cssClass: 'top-icon e-none',
                 tooltipText: this.l10n.getConstant('Invert'), align: 'Center',
-                template: '<div class="filter-wrapper" style="box-sizing: content-box;"><canvas id=' + parent.element.id + '_invertCanvas' + '></canvas><div style="text-align:center;"><span>' + this.l10n.getConstant('Invert') + '</span></div></div>' });
+                template: '<div class="filter-wrapper" style="box-sizing: content-box;"><canvas id=' + id + '_invertCanvas' + '></canvas><div style="text-align:center;"><span>' + this.l10n.getConstant('Invert') + '</span></div></div>' });
         }
         var tempToolbarItems = this.processToolbar('center');
         for (var i = 0, len = tempToolbarItems.length; i < len; i++) {
@@ -2234,25 +2528,26 @@ var ToolbarModule = /** @class */ (function () {
     };
     ToolbarModule.prototype.getPenToolbarItem = function (items) {
         var parent = this.parent;
+        var id = parent.element.id;
         var toolbarItems = [];
         if (isNullOrUndefined(parent.toolbar) || parent.toolbar) {
-            toolbarItems.push({ id: parent.element.id + '_annotation', tooltipText: this.l10n.getConstant('Annotation'), align: 'Center',
-                template: '<button id="' + parent.element.id + '_annotationBtn"></button>' });
+            toolbarItems.push({ id: id + '_annotation', tooltipText: this.l10n.getConstant('Annotation'), align: 'Center',
+                template: '<button id="' + id + '_annotationBtn"></button>' });
         }
         if (items.indexOf('strokeColor') > -1) {
-            toolbarItems.push({ prefixIcon: 'e-icons e-copy', id: parent.element.id + '_pen_strokecolor',
+            toolbarItems.push({ prefixIcon: 'e-icons e-copy', id: id + '_pen_strokecolor',
                 cssClass: 'top-icon e-pen-stroke-color',
                 tooltipText: this.l10n.getConstant('StrokeColor'), align: 'Center', type: 'Input',
-                template: '<button id="' + parent.element.id + '_penColorBtn"></button>' });
+                template: '<button id="' + id + '_penColorBtn"></button>' });
         }
         if (items.indexOf('strokeWidth') > -1) {
             toolbarItems.push({ prefixIcon: 'e-icons e-copy', cssClass: 'top-icon e-size',
                 tooltipText: this.l10n.getConstant('StrokeWidth'),
-                align: 'Center', type: 'Input', template: '<button id="' + parent.element.id + '_penStrokeWidth"></button>' });
+                align: 'Center', type: 'Input', template: '<button id="' + id + '_penStrokeWidth"></button>' });
         }
         toolbarItems.push({ align: 'Center', type: 'Separator' });
         if (items.indexOf('remove') > -1) {
-            toolbarItems.push({ id: parent.element.id + '_remove', prefixIcon: 'e-icons e-trash', cssClass: 'top-icon e-trash',
+            toolbarItems.push({ id: id + '_remove', prefixIcon: 'e-icons e-trash', cssClass: 'top-icon e-trash',
                 tooltipText: this.l10n.getConstant('Remove'), align: 'Center' });
         }
         var tempToolbarItems = this.processSubToolbar(items);
@@ -2260,9 +2555,9 @@ var ToolbarModule = /** @class */ (function () {
             toolbarItems.push(tempToolbarItems[i]);
         }
         if (!Browser.isDevice) {
-            toolbarItems.push({ id: parent.element.id + '_ok', prefixIcon: 'e-icons e-check', cssClass: 'top-icon e-tick',
+            toolbarItems.push({ id: id + '_ok', prefixIcon: 'e-icons e-check', cssClass: 'top-icon e-tick',
                 tooltipText: this.l10n.getConstant('OK'), align: 'Right' });
-            toolbarItems.push({ id: parent.element.id + '_cancel', prefixIcon: 'e-icons e-close', cssClass: 'top-icon e-save',
+            toolbarItems.push({ id: id + '_cancel', prefixIcon: 'e-icons e-close', cssClass: 'top-icon e-save',
                 tooltipText: this.l10n.getConstant('Cancel'), align: 'Right' });
         }
         return toolbarItems;
@@ -2270,6 +2565,7 @@ var ToolbarModule = /** @class */ (function () {
     ToolbarModule.prototype.initPenToolbarItem = function (items) {
         var _this = this;
         var parent = this.parent;
+        var id = parent.element.id;
         var leftItem = this.getLeftToolbarItem();
         var rightItem = this.getRightToolbarItem();
         var mainItem = this.getPenToolbarItem(items);
@@ -2294,7 +2590,7 @@ var ToolbarModule = /** @class */ (function () {
                 }
                 parent.trigger('toolbarCreated', { toolbarType: 'pen' });
                 if (Browser.isDevice) {
-                    if (_this.defToolbarItems.length > 0 && document.getElementById(parent.element.id + '_toolbar')) {
+                    if (_this.defToolbarItems.length > 0 && document.getElementById(id + '_toolbar')) {
                         /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
                         toolbar.refreshOverflow();
                         toolbar.refreshOverflow();
@@ -2302,7 +2598,7 @@ var ToolbarModule = /** @class */ (function () {
                 }
                 else {
                     _this.createLeftToolbarControls();
-                    if (_this.defToolbarItems.length > 0 && document.getElementById(parent.element.id + '_toolbar')) {
+                    if (_this.defToolbarItems.length > 0 && document.getElementById(id + '_toolbar')) {
                         /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
                         toolbar.refreshOverflow();
                     }
@@ -2310,19 +2606,20 @@ var ToolbarModule = /** @class */ (function () {
             }
         });
         if (Browser.isDevice) {
-            toolbar.appendTo('#' + parent.element.id + '_bottomToolbar');
+            toolbar.appendTo('#' + id + '_bottomToolbar');
         }
         else {
-            toolbar.appendTo('#' + parent.element.id + '_toolbar');
+            toolbar.appendTo('#' + id + '_toolbar');
         }
         this.enableDisableTbrBtn();
     };
     ToolbarModule.prototype.createPenColor = 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-pen-stroke-color').appendChild(parent.createElement('input', {
-                id: parent.element.id + '_pen_stroke'
+                id: id + '_pen_stroke'
             }));
             var penColor = new ColorPicker({
                 modeSwitcher: false, value: '#fff',
@@ -2333,19 +2630,22 @@ var ToolbarModule = /** @class */ (function () {
                     strokeDDB_3.element.children[0].style.backgroundColor = args.currentValue.rgba;
                     strokeDDB_3.toggle();
                 }
-            }, '#' + parent.element.id + '_pen_stroke');
+            }, '#' + id + '_pen_stroke');
             var strokeDDB_3 = new DropDownButton({
                 open: function (args) {
+                    var parentElem = args.element.parentElement;
                     if (Browser.isDevice) {
-                        args.element.parentElement.style.top = strokeDDB_3.element.getBoundingClientRect().top -
-                            args.element.parentElement.offsetHeight + 'px';
-                        args.element.parentElement.style.left = parent.element.offsetLeft + 'px';
+                        parentElem.style.top = strokeDDB_3.element.getBoundingClientRect().top -
+                            parentElem.offsetHeight + 'px';
+                        parentElem.style.left = parent.element.offsetLeft + 'px';
                     }
                 },
                 target: '.e-pen-color',
-                iconCss: 'e-dropdownbtn-preview'
-            }, '#' + parent.element.id + '_penColorBtn');
+                iconCss: 'e-dropdownbtn-preview',
+                cssClass: 'e-ie-ddb-popup'
+            }, '#' + id + '_penColorBtn');
             penColor.inline = true;
+            penColor.value = penColor.getValue(parent.activeObj.strokeSettings.strokeColor, 'rgba');
             var obj = { tempFreeHandDrawEditingStyles: null };
             parent.notify('freehand-draw', { prop: 'getTempFreeHandDrawEditingStyles', value: { obj: obj } });
             var indexObj = { freehandSelectedIndex: null };
@@ -2357,12 +2657,13 @@ var ToolbarModule = /** @class */ (function () {
             }
             else {
                 parent.element.querySelector('.e-pen-stroke-color.e-template .e-dropdownbtn-preview').style.background
-                    = '#fff';
+                    = penColor.value;
             }
         }
     };
     ToolbarModule.prototype.createPenBtn = function (items) {
         var parent = this.parent;
+        var id = parent.element.id;
         var strokeWidthItems = [
             { id: '1', text: this.l10n.getConstant('XSmall') },
             { id: '2', text: this.l10n.getConstant('Small') },
@@ -2371,7 +2672,7 @@ var ToolbarModule = /** @class */ (function () {
             { id: '5', text: this.l10n.getConstant('XLarge') }
         ];
         if (items.indexOf('strokeWidth') > -1) {
-            var strokeWidthBtn = document.getElementById(parent.element.id + '_penStrokeWidth');
+            var strokeWidthBtn = document.getElementById(id + '_penStrokeWidth');
             var spanElem_3 = document.createElement('span');
             var indexObj = { freehandSelectedIndex: null };
             parent.notify('freehand-draw', { prop: 'getFreehandSelectedIndex', onPropertyChange: false, value: { obj: indexObj } });
@@ -2396,23 +2697,23 @@ var ToolbarModule = /** @class */ (function () {
                     spanElem_3.textContent = args.item.text;
                     parent.updatePenStrokeWidth(args.item.id);
                     if (Browser.isDevice) {
-                        if (document.getElementById(parent.element.id + '_bottomToolbar')) {
+                        if (document.getElementById(id + '_bottomToolbar')) {
                             /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
-                            var toolbar_8 = getComponent(parent.element.id + '_bottomToolbar', 'toolbar');
-                            toolbar_8.refreshOverflow();
+                            var toolbar_9 = getComponent(id + '_bottomToolbar', 'toolbar');
+                            toolbar_9.refreshOverflow();
                         }
                     }
                     else {
-                        if (document.getElementById(parent.element.id + '_toolbar')) {
+                        if (document.getElementById(id + '_toolbar')) {
                             /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
-                            var toolbar_9 = getComponent(parent.element.id + '_toolbar', 'toolbar');
-                            toolbar_9.refreshOverflow();
+                            var toolbar_10 = getComponent(id + '_toolbar', 'toolbar');
+                            toolbar_10.refreshOverflow();
                         }
                     }
                 }
             });
             // Render initialized DropDownButton.
-            drpDownBtn_2.appendTo('#' + parent.element.id + '_penStrokeWidth');
+            drpDownBtn_2.appendTo('#' + id + '_penStrokeWidth');
         }
     };
     ToolbarModule.prototype.getPenStroke = function (value) {
@@ -2432,6 +2733,7 @@ var ToolbarModule = /** @class */ (function () {
     ToolbarModule.prototype.initAdjustmentToolbarItem = function () {
         var _this = this;
         var parent = this.parent;
+        var id = parent.element.id;
         var leftItem = this.getLeftToolbarItem(null);
         var rightItem = this.getRightToolbarItem();
         var mainItem = this.getAdjustmentToolbarItem();
@@ -2452,14 +2754,14 @@ var ToolbarModule = /** @class */ (function () {
                     _this.renderSaveBtn();
                 }
                 if (Browser.isDevice) {
-                    if (_this.defToolbarItems.length > 0 && document.getElementById(parent.element.id + '_toolbar')) {
+                    if (_this.defToolbarItems.length > 0 && document.getElementById(id + '_toolbar')) {
                         /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
                         toolbar.refreshOverflow();
                     }
                 }
                 else {
                     _this.createLeftToolbarControls();
-                    if (_this.defToolbarItems.length > 0 && document.getElementById(parent.element.id + '_toolbar')) {
+                    if (_this.defToolbarItems.length > 0 && document.getElementById(id + '_toolbar')) {
                         /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
                         toolbar.refreshOverflow();
                     }
@@ -2467,30 +2769,29 @@ var ToolbarModule = /** @class */ (function () {
             }
         });
         if (Browser.isDevice) {
-            toolbar.appendTo('#' + parent.element.id + '_bottomToolbar');
+            toolbar.appendTo('#' + id + '_bottomToolbar');
         }
         else {
-            toolbar.appendTo('#' + parent.element.id + '_toolbar');
+            toolbar.appendTo('#' + id + '_toolbar');
         }
         this.enableDisableTbrBtn();
     };
     ToolbarModule.prototype.initFrameToolbarItem = function () {
         var _this = this;
         var parent = this.parent;
-        var canvasWrapper = document.querySelector('#' + parent.element.id + '_contextualToolbarArea');
-        var frameWrapper = document.querySelector('#' + parent.element.id + '_frameWrapper');
-        if (!frameWrapper) {
-            frameWrapper = canvasWrapper.appendChild(parent.createElement('div', {
-                id: parent.element.id + '_frameWrapper',
-                className: 'e-frame-wrapper',
-                styles: 'position: relative'
-            }));
+        var id = parent.element.id;
+        var canvasWrapper = document.querySelector('#' + id + '_contextualToolbarArea');
+        var frameWrapper = document.querySelector('#' + id + '_frameWrapper');
+        if (frameWrapper) {
+            frameWrapper.style.display = 'block';
         }
         else {
-            frameWrapper.style.display = 'block';
+            frameWrapper = canvasWrapper.appendChild(parent.createElement('div', {
+                id: id + '_frameWrapper', className: 'e-frame-wrapper', styles: 'position: relative'
+            }));
         }
         frameWrapper.appendChild(parent.createElement('div', {
-            id: parent.element.id + '_customizeWrapper',
+            id: id + '_customizeWrapper',
             styles: 'position: absolute'
         }));
         var mainItem = this.getFrameToolbarItem();
@@ -2501,22 +2802,23 @@ var ToolbarModule = /** @class */ (function () {
             created: function () {
                 _this.createFrameColor();
                 _this.createFrameSize();
-                if (parent.frameObj.type === 'line') {
+                var frameType = parent.frameObj.type;
+                if (frameType === 'line') {
                     _this.createFrameRadius();
                 }
-                if (parent.frameObj.type === 'line' || parent.frameObj.type === 'inset' || parent.frameObj.type === 'hook') {
+                if (frameType === 'line' || frameType === 'inset' || frameType === 'hook') {
                     _this.createFrameInset();
                 }
-                if (parent.frameObj.type === 'line' || parent.frameObj.type === 'inset') {
+                if (frameType === 'line' || frameType === 'inset') {
                     _this.createFrameOffset();
                 }
-                if (parent.frameObj.type === 'line') {
+                if (frameType === 'line') {
                     _this.createFrameAmount();
                     _this.createFrameBorder();
                 }
                 _this.createFrameGradientColor();
                 if (Browser.isDevice) {
-                    if (_this.defToolbarItems.length > 0 && document.getElementById(parent.element.id + '_bottomToolbar')) {
+                    if (_this.defToolbarItems.length > 0 && document.getElementById(id + '_bottomToolbar')) {
                         /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
                         toolbar.refreshOverflow();
                         toolbar.refreshOverflow();
@@ -2525,22 +2827,23 @@ var ToolbarModule = /** @class */ (function () {
                 }
                 else {
                     _this.createLeftToolbarControls();
-                    if (_this.defToolbarItems.length > 0 && document.getElementById(parent.element.id + '_toolbar')) {
+                    if (_this.defToolbarItems.length > 0 && document.getElementById(id + '_toolbar')) {
                         /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
                         toolbar.refreshOverflow();
                     }
                 }
-                parent.element.querySelector('#' + parent.element.id + '_' + parent.frameObj.type).focus();
+                parent.element.querySelector('#' + id + '_' + frameType).focus();
             }
         });
-        toolbar.appendTo('#' + this.parent.element.id + '_customizeWrapper');
+        toolbar.appendTo('#' + id + '_customizeWrapper');
     };
     ToolbarModule.prototype.createFrameGradientColor = function () {
         var parent = this.parent;
         var prevFrameSettings;
         var obj = { frameChangeEventArgs: null };
+        var id = parent.element.id;
         parent.element.querySelector('.e-template.e-frame-stroke').appendChild(parent.createElement('input', {
-            id: parent.element.id + '_frame_gradient_fill'
+            id: id + '_frame_gradient_fill'
         }));
         var fillColor = new ColorPicker({
             modeSwitcher: false, noColor: true, value: parent.frameObj.gradientColor,
@@ -2563,6 +2866,7 @@ var ToolbarModule = /** @class */ (function () {
                             previousFilter: null, isCircleCrop: null
                         } });
                     parent.notify('draw', { prop: 'render-image', value: { isMouseWheel: null, isPreventClearRect: null, isFrame: true } });
+                    parent.notify('draw', { prop: 'redrawDownScale' });
                     if (args.currentValue.rgba === '') {
                         fillDDB.element.children[0].classList.add('e-nocolor-item');
                     }
@@ -2570,24 +2874,28 @@ var ToolbarModule = /** @class */ (function () {
                         fillDDB.element.children[0].classList.remove('e-nocolor-item');
                         fillDDB.element.children[0].style.backgroundColor = args.currentValue.rgba;
                     }
+                    parent.curFrameObjEvent = { previousFrameSetting: obj['frameChangeEventArgs'].previousFrameSetting, currentFrameSetting: obj['frameChangeEventArgs'].currentFrameSetting };
+                    parent.isFrameBtnClick = true;
                 }
                 else {
                     parent.frameObj.gradientColor = temp;
                 }
                 fillDDB.toggle();
             }
-        }, '#' + parent.element.id + '_frame_gradient_fill');
+        }, '#' + id + '_frame_gradient_fill');
         var fillDDB = new DropDownButton({
             open: function (args) {
                 if (Browser.isDevice) {
-                    args.element.parentElement.style.top = fillDDB.element.getBoundingClientRect().top -
-                        args.element.parentElement.offsetHeight + 'px';
-                    args.element.parentElement.style.left = parent.element.offsetLeft + 'px';
+                    var parentElem = args.element.parentElement;
+                    parentElem.style.top = fillDDB.element.getBoundingClientRect().top -
+                        parentElem.offsetHeight + 'px';
+                    parentElem.style.left = parent.element.offsetLeft + 'px';
                 }
             },
             target: '.e-frame-gradient-fill-color',
-            iconCss: 'e-dropdownbtn-preview'
-        }, '#' + parent.element.id + '_frameGradientColorBtn');
+            iconCss: 'e-dropdownbtn-preview',
+            cssClass: 'e-ie-ddb-popup'
+        }, '#' + id + '_frameGradientColorBtn');
         fillColor.inline = true;
         if (parent.frameObj.gradientColor === '') {
             parent.element.querySelector('.e-frame-stroke.e-template .e-dropdownbtn-preview').classList.add('e-nocolor-item');
@@ -2600,8 +2908,9 @@ var ToolbarModule = /** @class */ (function () {
         var parent = this.parent;
         var prevFrameSettings;
         var obj = { frameChangeEventArgs: null };
+        var id = parent.element.id;
         parent.element.querySelector('.e-template.e-stroke').appendChild(parent.createElement('input', {
-            id: parent.element.id + '_frame_fill'
+            id: id + '_frame_fill'
         }));
         var fillColor = new ColorPicker({
             modeSwitcher: false, value: parent.frameObj.color,
@@ -2624,6 +2933,7 @@ var ToolbarModule = /** @class */ (function () {
                             previousFilter: null, isCircleCrop: null
                         } });
                     parent.notify('draw', { prop: 'render-image', value: { isMouseWheel: null, isPreventClearRect: null, isFrame: true } });
+                    parent.notify('draw', { prop: 'redrawDownScale' });
                     if (args.currentValue.rgba === '') {
                         fillDDB.element.children[0].classList.add('e-nocolor-item');
                     }
@@ -2631,24 +2941,28 @@ var ToolbarModule = /** @class */ (function () {
                         fillDDB.element.children[0].classList.remove('e-nocolor-item');
                         fillDDB.element.children[0].style.backgroundColor = args.currentValue.rgba;
                     }
+                    parent.curFrameObjEvent = { previousFrameSetting: obj['frameChangeEventArgs'].previousFrameSetting, currentFrameSetting: obj['frameChangeEventArgs'].currentFrameSetting };
+                    parent.isFrameBtnClick = true;
                 }
                 else {
                     parent.frameObj.color = temp;
                 }
                 fillDDB.toggle();
             }
-        }, '#' + parent.element.id + '_frame_fill');
+        }, '#' + id + '_frame_fill');
         var fillDDB = new DropDownButton({
             open: function (args) {
                 if (Browser.isDevice) {
-                    args.element.parentElement.style.top = fillDDB.element.getBoundingClientRect().top -
-                        args.element.parentElement.offsetHeight + 'px';
-                    args.element.parentElement.style.left = parent.element.offsetLeft + 'px';
+                    var parentElem = args.element.parentElement;
+                    parentElem.style.top = fillDDB.element.getBoundingClientRect().top -
+                        parentElem.offsetHeight + 'px';
+                    parentElem.style.left = parent.element.offsetLeft + 'px';
                 }
             },
             target: '.e-frame-fill-color',
-            iconCss: 'e-dropdownbtn-preview'
-        }, '#' + parent.element.id + '_frameColorBtn');
+            iconCss: 'e-dropdownbtn-preview',
+            cssClass: 'e-ie-ddb-popup'
+        }, '#' + id + '_frameColorBtn');
         fillColor.inline = true;
         parent.element.querySelector('.e-stroke.e-template .e-dropdownbtn-preview').style.background = parent.frameObj.color;
     };
@@ -2656,6 +2970,7 @@ var ToolbarModule = /** @class */ (function () {
         var parent = this.parent;
         var prevFrameSettings;
         var obj = { frameChangeEventArgs: null };
+        var id = parent.element.id;
         var strokeWidthItems = [
             { id: '1', text: this.l10n.getConstant('20') },
             { id: '2', text: this.l10n.getConstant('40') },
@@ -2663,7 +2978,7 @@ var ToolbarModule = /** @class */ (function () {
             { id: '4', text: this.l10n.getConstant('80') },
             { id: '5', text: this.l10n.getConstant('100') }
         ];
-        var strokeWidthBtn = document.getElementById(parent.element.id + '_frameSizeBtn');
+        var strokeWidthBtn = document.getElementById(id + '_frameSizeBtn');
         var spanElem = document.createElement('span');
         spanElem.innerHTML = this.l10n.getConstant(parent.frameObj.size.toString());
         spanElem.className = 'e-frame-stroke-width';
@@ -2672,8 +2987,9 @@ var ToolbarModule = /** @class */ (function () {
         var drpDownBtn = new DropDownButton({ items: strokeWidthItems,
             open: function (args) {
                 if (Browser.isDevice) {
-                    args.element.parentElement.style.top = drpDownBtn.element.getBoundingClientRect().top -
-                        args.element.parentElement.offsetHeight + 'px';
+                    var parentElem = args.element.parentElement;
+                    parentElem.style.top = drpDownBtn.element.getBoundingClientRect().top -
+                        parentElem.offsetHeight + 'px';
                 }
                 var activeBtn = drpDownBtn.element.childNodes[0].textContent;
                 if (activeBtn !== '') {
@@ -2698,34 +3014,38 @@ var ToolbarModule = /** @class */ (function () {
                             previousFilter: null, isCircleCrop: null
                         } });
                     parent.notify('draw', { prop: 'render-image', value: { isMouseWheel: null, isPreventClearRect: null, isFrame: true } });
+                    parent.notify('draw', { prop: 'redrawDownScale' });
                     drpDownBtn.content = args.item.text;
+                    parent.curFrameObjEvent = { previousFrameSetting: obj['frameChangeEventArgs'].previousFrameSetting, currentFrameSetting: obj['frameChangeEventArgs'].currentFrameSetting };
+                    parent.isFrameBtnClick = true;
                 }
                 else {
                     parent.frameObj.size = temp;
                 }
                 if (Browser.isDevice) {
-                    if (document.getElementById(parent.element.id + '_bottomToolbar')) {
+                    if (document.getElementById(id + '_bottomToolbar')) {
                         /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
-                        var toolbar_10 = getComponent(parent.element.id + '_bottomToolbar', 'toolbar');
-                        toolbar_10.refreshOverflow();
+                        var toolbar_11 = getComponent(id + '_bottomToolbar', 'toolbar');
+                        toolbar_11.refreshOverflow();
                     }
                 }
                 else {
-                    if (document.getElementById(parent.element.id + '_toolbar')) {
+                    if (document.getElementById(id + '_toolbar')) {
                         /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
-                        var toolbar_11 = getComponent(parent.element.id + '_toolbar', 'toolbar');
-                        toolbar_11.refreshOverflow();
+                        var toolbar_12 = getComponent(id + '_toolbar', 'toolbar');
+                        toolbar_12.refreshOverflow();
                     }
                 }
             }
         });
         // Render initialized DropDownButton.
-        drpDownBtn.appendTo('#' + parent.element.id + '_frameSizeBtn');
+        drpDownBtn.appendTo('#' + id + '_frameSizeBtn');
     };
     ToolbarModule.prototype.createFrameInset = function () {
         var parent = this.parent;
         var prevFrameSettings;
         var obj = { frameChangeEventArgs: null };
+        var id = parent.element.id;
         var strokeWidthItems = [
             { id: '1', text: this.l10n.getConstant('20') },
             { id: '2', text: this.l10n.getConstant('40') },
@@ -2733,7 +3053,7 @@ var ToolbarModule = /** @class */ (function () {
             { id: '4', text: this.l10n.getConstant('80') },
             { id: '5', text: this.l10n.getConstant('100') }
         ];
-        var strokeWidthBtn = document.getElementById(parent.element.id + '_frameInsetBtn');
+        var strokeWidthBtn = document.getElementById(id + '_frameInsetBtn');
         var spanElem = document.createElement('span');
         spanElem.innerHTML = this.l10n.getConstant(parent.frameObj.inset.toString());
         spanElem.className = 'e-frame-inset';
@@ -2742,8 +3062,9 @@ var ToolbarModule = /** @class */ (function () {
         var drpDownBtn = new DropDownButton({ items: strokeWidthItems,
             open: function (args) {
                 if (Browser.isDevice) {
-                    args.element.parentElement.style.top = drpDownBtn.element.getBoundingClientRect().top -
-                        args.element.parentElement.offsetHeight + 'px';
+                    var parentElem = args.element.parentElement;
+                    parentElem.style.top = drpDownBtn.element.getBoundingClientRect().top -
+                        parentElem.offsetHeight + 'px';
                 }
                 var activeBtn = drpDownBtn.element.childNodes[0].textContent;
                 if (activeBtn !== '') {
@@ -2768,34 +3089,38 @@ var ToolbarModule = /** @class */ (function () {
                             previousFilter: null, isCircleCrop: null
                         } });
                     parent.notify('draw', { prop: 'render-image', value: { isMouseWheel: null, isPreventClearRect: null, isFrame: true } });
+                    parent.notify('draw', { prop: 'redrawDownScale' });
                     drpDownBtn.content = args.item.text;
+                    parent.curFrameObjEvent = { previousFrameSetting: obj['frameChangeEventArgs'].previousFrameSetting, currentFrameSetting: obj['frameChangeEventArgs'].currentFrameSetting };
+                    parent.isFrameBtnClick = true;
                 }
                 else {
                     parent.frameObj.inset = temp;
                 }
                 if (Browser.isDevice) {
-                    if (document.getElementById(parent.element.id + '_bottomToolbar')) {
+                    if (document.getElementById(id + '_bottomToolbar')) {
                         /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
-                        var toolbar_12 = getComponent(parent.element.id + '_bottomToolbar', 'toolbar');
-                        toolbar_12.refreshOverflow();
+                        var toolbar_13 = getComponent(id + '_bottomToolbar', 'toolbar');
+                        toolbar_13.refreshOverflow();
                     }
                 }
                 else {
-                    if (document.getElementById(parent.element.id + '_toolbar')) {
+                    if (document.getElementById(id + '_toolbar')) {
                         /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
-                        var toolbar_13 = getComponent(parent.element.id + '_toolbar', 'toolbar');
-                        toolbar_13.refreshOverflow();
+                        var toolbar_14 = getComponent(id + '_toolbar', 'toolbar');
+                        toolbar_14.refreshOverflow();
                     }
                 }
             }
         });
         // Render initialized DropDownButton.
-        drpDownBtn.appendTo('#' + parent.element.id + '_frameInsetBtn');
+        drpDownBtn.appendTo('#' + id + '_frameInsetBtn');
     };
     ToolbarModule.prototype.createFrameOffset = function () {
         var parent = this.parent;
         var prevFrameSettings;
         var obj = { frameChangeEventArgs: null };
+        var id = parent.element.id;
         var strokeWidthItems = [
             { id: '1', text: this.l10n.getConstant('20') },
             { id: '2', text: this.l10n.getConstant('40') },
@@ -2803,7 +3128,7 @@ var ToolbarModule = /** @class */ (function () {
             { id: '4', text: this.l10n.getConstant('80') },
             { id: '5', text: this.l10n.getConstant('100') }
         ];
-        var strokeWidthBtn = document.getElementById(parent.element.id + '_frameOffsetBtn');
+        var strokeWidthBtn = document.getElementById(id + '_frameOffsetBtn');
         var spanElem = document.createElement('span');
         spanElem.innerHTML = this.l10n.getConstant(parent.frameObj.offset.toString());
         spanElem.className = 'e-frame-offset';
@@ -2812,8 +3137,9 @@ var ToolbarModule = /** @class */ (function () {
         var drpDownBtn = new DropDownButton({ items: strokeWidthItems,
             open: function (args) {
                 if (Browser.isDevice) {
-                    args.element.parentElement.style.top = drpDownBtn.element.getBoundingClientRect().top -
-                        args.element.parentElement.offsetHeight + 'px';
+                    var parentElem = args.element.parentElement;
+                    parentElem.style.top = drpDownBtn.element.getBoundingClientRect().top -
+                        parentElem.offsetHeight + 'px';
                 }
                 var activeBtn = drpDownBtn.element.childNodes[0].textContent;
                 if (activeBtn !== '') {
@@ -2838,34 +3164,38 @@ var ToolbarModule = /** @class */ (function () {
                             previousFilter: null, isCircleCrop: null
                         } });
                     parent.notify('draw', { prop: 'render-image', value: { isMouseWheel: null, isPreventClearRect: null, isFrame: true } });
+                    parent.notify('draw', { prop: 'redrawDownScale' });
                     drpDownBtn.content = args.item.text;
+                    parent.curFrameObjEvent = { previousFrameSetting: obj['frameChangeEventArgs'].previousFrameSetting, currentFrameSetting: obj['frameChangeEventArgs'].currentFrameSetting };
+                    parent.isFrameBtnClick = true;
                 }
                 else {
                     parent.frameObj.offset = temp;
                 }
                 if (Browser.isDevice) {
-                    if (document.getElementById(parent.element.id + '_bottomToolbar')) {
+                    if (document.getElementById(id + '_bottomToolbar')) {
                         /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
-                        var toolbar_14 = getComponent(parent.element.id + '_bottomToolbar', 'toolbar');
-                        toolbar_14.refreshOverflow();
+                        var toolbar_15 = getComponent(id + '_bottomToolbar', 'toolbar');
+                        toolbar_15.refreshOverflow();
                     }
                 }
                 else {
-                    if (document.getElementById(parent.element.id + '_toolbar')) {
+                    if (document.getElementById(id + '_toolbar')) {
                         /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
-                        var toolbar_15 = getComponent(parent.element.id + '_toolbar', 'toolbar');
-                        toolbar_15.refreshOverflow();
+                        var toolbar_16 = getComponent(id + '_toolbar', 'toolbar');
+                        toolbar_16.refreshOverflow();
                     }
                 }
             }
         });
         // Render initialized DropDownButton.
-        drpDownBtn.appendTo('#' + parent.element.id + '_frameOffsetBtn');
+        drpDownBtn.appendTo('#' + id + '_frameOffsetBtn');
     };
     ToolbarModule.prototype.createFrameRadius = function () {
         var parent = this.parent;
         var prevFrameSettings;
         var obj = { frameChangeEventArgs: null };
+        var id = parent.element.id;
         var strokeWidthItems = [
             { id: '1', text: this.l10n.getConstant('0') },
             { id: '2', text: this.l10n.getConstant('20') },
@@ -2874,7 +3204,7 @@ var ToolbarModule = /** @class */ (function () {
             { id: '5', text: this.l10n.getConstant('80') },
             { id: '6', text: this.l10n.getConstant('100') }
         ];
-        var strokeWidthBtn = document.getElementById(parent.element.id + '_frameRadiusBtn');
+        var strokeWidthBtn = document.getElementById(id + '_frameRadiusBtn');
         var spanElem = document.createElement('span');
         spanElem.innerHTML = this.l10n.getConstant(parent.frameObj.radius.toString());
         spanElem.className = 'e-frame-radius';
@@ -2883,8 +3213,9 @@ var ToolbarModule = /** @class */ (function () {
         var drpDownBtn = new DropDownButton({ items: strokeWidthItems,
             open: function (args) {
                 if (Browser.isDevice) {
-                    args.element.parentElement.style.top = drpDownBtn.element.getBoundingClientRect().top -
-                        args.element.parentElement.offsetHeight + 'px';
+                    var parentElem = args.element.parentElement;
+                    parentElem.style.top = drpDownBtn.element.getBoundingClientRect().top -
+                        parentElem.offsetHeight + 'px';
                 }
                 var activeBtn = drpDownBtn.element.childNodes[0].textContent;
                 if (activeBtn !== '') {
@@ -2909,34 +3240,38 @@ var ToolbarModule = /** @class */ (function () {
                             previousFilter: null, isCircleCrop: null
                         } });
                     parent.notify('draw', { prop: 'render-image', value: { isMouseWheel: null, isPreventClearRect: null, isFrame: true } });
+                    parent.notify('draw', { prop: 'redrawDownScale' });
                     drpDownBtn.content = args.item.text;
+                    parent.curFrameObjEvent = { previousFrameSetting: obj['frameChangeEventArgs'].previousFrameSetting, currentFrameSetting: obj['frameChangeEventArgs'].currentFrameSetting };
+                    parent.isFrameBtnClick = true;
                 }
                 else {
                     parent.frameObj.radius = temp;
                 }
                 if (Browser.isDevice) {
-                    if (document.getElementById(parent.element.id + '_bottomToolbar')) {
+                    if (document.getElementById(id + '_bottomToolbar')) {
                         /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
-                        var toolbar_16 = getComponent(parent.element.id + '_bottomToolbar', 'toolbar');
-                        toolbar_16.refreshOverflow();
+                        var toolbar_17 = getComponent(id + '_bottomToolbar', 'toolbar');
+                        toolbar_17.refreshOverflow();
                     }
                 }
                 else {
-                    if (document.getElementById(parent.element.id + '_toolbar')) {
+                    if (document.getElementById(id + '_toolbar')) {
                         /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
-                        var toolbar_17 = getComponent(parent.element.id + '_toolbar', 'toolbar');
-                        toolbar_17.refreshOverflow();
+                        var toolbar_18 = getComponent(id + '_toolbar', 'toolbar');
+                        toolbar_18.refreshOverflow();
                     }
                 }
             }
         });
         // Render initialized DropDownButton.
-        drpDownBtn.appendTo('#' + parent.element.id + '_frameRadiusBtn');
+        drpDownBtn.appendTo('#' + id + '_frameRadiusBtn');
     };
     ToolbarModule.prototype.createFrameAmount = function () {
         var parent = this.parent;
         var prevFrameSettings;
         var obj = { frameChangeEventArgs: null };
+        var id = parent.element.id;
         var strokeWidthItems = [
             { id: '1', text: this.l10n.getConstant('1') },
             { id: '2', text: this.l10n.getConstant('2') },
@@ -2944,7 +3279,7 @@ var ToolbarModule = /** @class */ (function () {
             { id: '4', text: this.l10n.getConstant('4') },
             { id: '5', text: this.l10n.getConstant('5') }
         ];
-        var strokeWidthBtn = document.getElementById(parent.element.id + '_frameAmountBtn');
+        var strokeWidthBtn = document.getElementById(id + '_frameAmountBtn');
         var spanElem = document.createElement('span');
         spanElem.innerHTML = this.l10n.getConstant(parent.frameObj.amount.toString());
         spanElem.className = 'e-frame-amount';
@@ -2953,8 +3288,9 @@ var ToolbarModule = /** @class */ (function () {
         var drpDownBtn = new DropDownButton({ items: strokeWidthItems,
             open: function (args) {
                 if (Browser.isDevice) {
-                    args.element.parentElement.style.top = drpDownBtn.element.getBoundingClientRect().top -
-                        args.element.parentElement.offsetHeight + 'px';
+                    var parentElem = args.element.parentElement;
+                    parentElem.style.top = drpDownBtn.element.getBoundingClientRect().top -
+                        parentElem.offsetHeight + 'px';
                 }
                 var activeBtn = drpDownBtn.element.childNodes[0].textContent;
                 if (activeBtn !== '') {
@@ -2979,40 +3315,44 @@ var ToolbarModule = /** @class */ (function () {
                             previousFilter: null, isCircleCrop: null
                         } });
                     parent.notify('draw', { prop: 'render-image', value: { isMouseWheel: null, isPreventClearRect: null, isFrame: true } });
+                    parent.notify('draw', { prop: 'redrawDownScale' });
                     drpDownBtn.content = args.item.text;
+                    parent.curFrameObjEvent = { previousFrameSetting: obj['frameChangeEventArgs'].previousFrameSetting, currentFrameSetting: obj['frameChangeEventArgs'].currentFrameSetting };
+                    parent.isFrameBtnClick = true;
                 }
                 else {
                     parent.frameObj.amount = temp;
                 }
                 if (Browser.isDevice) {
-                    if (document.getElementById(parent.element.id + '_bottomToolbar')) {
+                    if (document.getElementById(id + '_bottomToolbar')) {
                         /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
-                        var toolbar_18 = getComponent(parent.element.id + '_bottomToolbar', 'toolbar');
-                        toolbar_18.refreshOverflow();
+                        var toolbar_19 = getComponent(id + '_bottomToolbar', 'toolbar');
+                        toolbar_19.refreshOverflow();
                     }
                 }
                 else {
-                    if (document.getElementById(parent.element.id + '_toolbar')) {
+                    if (document.getElementById(id + '_toolbar')) {
                         /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
-                        var toolbar_19 = getComponent(parent.element.id + '_toolbar', 'toolbar');
-                        toolbar_19.refreshOverflow();
+                        var toolbar_20 = getComponent(id + '_toolbar', 'toolbar');
+                        toolbar_20.refreshOverflow();
                     }
                 }
             }
         });
         // Render initialized DropDownButton.
-        drpDownBtn.appendTo('#' + parent.element.id + '_frameAmountBtn');
+        drpDownBtn.appendTo('#' + id + '_frameAmountBtn');
     };
     ToolbarModule.prototype.createFrameBorder = function () {
         var parent = this.parent;
         var prevFrameSettings;
         var obj = { frameChangeEventArgs: null };
+        var id = parent.element.id;
         var strokeWidthItems = [
             { id: '1', text: this.l10n.getConstant('Solid') },
             { id: '2', text: this.l10n.getConstant('Dashed') },
             { id: '3', text: this.l10n.getConstant('Dotted') },
         ];
-        var strokeWidthBtn = document.getElementById(parent.element.id + '_frameBorderBtn');
+        var strokeWidthBtn = document.getElementById(id + '_frameBorderBtn');
         var spanElem = document.createElement('span');
         spanElem.innerHTML = this.l10n.getConstant(parent.toPascalCase(parent.frameObj.border));
         spanElem.className = 'e-frame-border';
@@ -3021,8 +3361,9 @@ var ToolbarModule = /** @class */ (function () {
         var drpDownBtn = new DropDownButton({ items: strokeWidthItems,
             open: function (args) {
                 if (Browser.isDevice) {
-                    args.element.parentElement.style.top = drpDownBtn.element.getBoundingClientRect().top -
-                        args.element.parentElement.offsetHeight + 'px';
+                    var parentElem = args.element.parentElement;
+                    parentElem.style.top = drpDownBtn.element.getBoundingClientRect().top -
+                        parentElem.offsetHeight + 'px';
                 }
                 var activeBtn = drpDownBtn.element.childNodes[0].textContent;
                 if (activeBtn !== '') {
@@ -3047,36 +3388,40 @@ var ToolbarModule = /** @class */ (function () {
                             previousFilter: null, isCircleCrop: null
                         } });
                     parent.notify('draw', { prop: 'render-image', value: { isMouseWheel: null, isPreventClearRect: null, isFrame: true } });
+                    parent.notify('draw', { prop: 'redrawDownScale' });
                     drpDownBtn.content = args.item.text;
+                    parent.curFrameObjEvent = { previousFrameSetting: obj['frameChangeEventArgs'].previousFrameSetting, currentFrameSetting: obj['frameChangeEventArgs'].currentFrameSetting };
+                    parent.isFrameBtnClick = true;
                 }
                 else {
                     parent.frameObj.border = temp;
                 }
                 if (Browser.isDevice) {
-                    if (document.getElementById(parent.element.id + '_bottomToolbar')) {
+                    if (document.getElementById(id + '_bottomToolbar')) {
                         /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
-                        var toolbar_20 = getComponent(parent.element.id + '_bottomToolbar', 'toolbar');
-                        toolbar_20.refreshOverflow();
+                        var toolbar_21 = getComponent(id + '_bottomToolbar', 'toolbar');
+                        toolbar_21.refreshOverflow();
                     }
                 }
                 else {
-                    if (document.getElementById(parent.element.id + '_toolbar')) {
+                    if (document.getElementById(id + '_toolbar')) {
                         /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
-                        var toolbar_21 = getComponent(parent.element.id + '_toolbar', 'toolbar');
-                        toolbar_21.refreshOverflow();
+                        var toolbar_22 = getComponent(id + '_toolbar', 'toolbar');
+                        toolbar_22.refreshOverflow();
                     }
                 }
             }
         });
         // Render initialized DropDownButton.
-        drpDownBtn.appendTo('#' + parent.element.id + '_frameBorderBtn');
+        drpDownBtn.appendTo('#' + id + '_frameBorderBtn');
     };
     ToolbarModule.prototype.initFilterToolbarItem = function () {
         var _this = this;
         var parent = this.parent;
+        var id = parent.element.id;
         var mainItem = this.getFilterToolbarItem();
-        if (document.querySelector('#' + parent.element.id + '_contextualToolbar').classList.contains('e-control')) {
-            getComponent(document.getElementById(parent.element.id + '_contextualToolbar'), 'toolbar').destroy();
+        if (document.querySelector('#' + id + '_contextualToolbar').classList.contains('e-control')) {
+            getComponent(document.getElementById(id + '_contextualToolbar'), 'toolbar').destroy();
         }
         var toolbar = new Toolbar({
             width: '100%',
@@ -3086,20 +3431,21 @@ var ToolbarModule = /** @class */ (function () {
                 _this.updatePrivateVariables();
                 _this.createCanvasFilter();
                 if (parent.currentFilter === '') {
-                    parent.currentFilter = parent.element.id + '_default';
+                    parent.currentFilter = id + '_default';
                 }
-                var hdrWrapper = document.querySelector('#' + parent.element.id + '_headWrapper');
+                var hdrWrapper = document.querySelector('#' + id + '_headWrapper');
                 if (hdrWrapper) {
                     hdrWrapper.style.display = 'none';
                 }
-                if (document.getElementById(parent.currentFilter + 'Canvas')) {
-                    document.getElementById(parent.currentFilter + 'Canvas').parentElement.parentElement.classList.add('e-selected');
+                var filterElem = document.getElementById(parent.currentFilter + 'Canvas');
+                if (filterElem) {
+                    filterElem.parentElement.parentElement.classList.add('e-selected');
                 }
                 _this.enableDisableTbrBtn();
                 toolbar.refreshOverflow();
             }
         });
-        toolbar.appendTo('#' + parent.element.id + '_contextualToolbar');
+        toolbar.appendTo('#' + id + '_contextualToolbar');
     };
     ToolbarModule.prototype.drawDashedLine = function (ctx) {
         ctx.beginPath();
@@ -3141,6 +3487,7 @@ var ToolbarModule = /** @class */ (function () {
     };
     ToolbarModule.prototype.getQuickAccessToolbarItem = function (isPenEdit) {
         var parent = this.parent;
+        var id = parent.element.id;
         var args = { cancel: false, toolbarItems: [] };
         var toolbarItems = [];
         if (isNullOrUndefined(isPenEdit)) {
@@ -3168,21 +3515,21 @@ var ToolbarModule = /** @class */ (function () {
             for (var i = 0; i < args.toolbarItems.length; i++) {
                 switch (args.toolbarItems[i]) {
                     case 'Clone':
-                        orgToolbarItems.push({ id: parent.element.id + '_duplicate', prefixIcon: 'e-icons e-order', cssClass: 'top-icon e-order',
+                        orgToolbarItems.push({ id: id + '_duplicate', prefixIcon: 'e-icons e-order', cssClass: 'top-icon e-order',
                             tooltipText: this.l10n.getConstant('Duplicate'), align: 'Left' });
                         break;
                     case 'Delete':
-                        orgToolbarItems.push({ id: parent.element.id + '_remove', prefixIcon: 'e-icons e-trash', cssClass: 'top-icon e-trash',
+                        orgToolbarItems.push({ id: id + '_remove', prefixIcon: 'e-icons e-trash', cssClass: 'top-icon e-trash',
                             tooltipText: this.l10n.getConstant('Remove'), align: 'Left' });
                         break;
                     case 'EditText':
-                        orgToolbarItems.push({ id: parent.element.id + '_editText', prefixIcon: 'e-icons e-annotation-edit', cssClass: 'top-icon e-annotation-edit',
+                        orgToolbarItems.push({ id: id + '_editText', prefixIcon: 'e-icons e-annotation-edit', cssClass: 'top-icon e-annotation-edit',
                             tooltipText: this.l10n.getConstant('EditText'), align: 'Left' });
                         break;
                     case 'Flip':
-                        orgToolbarItems.push({ id: parent.element.id + '_hFlip', prefixIcon: 'e-icons e-horizontal-flip',
+                        orgToolbarItems.push({ id: id + '_hFlip', prefixIcon: 'e-icons e-horizontal-flip',
                             tooltipText: this.l10n.getConstant('HorizontalFlip'), align: 'Left' });
-                        orgToolbarItems.push({ id: parent.element.id + '_vFlip', prefixIcon: 'e-icons e-vertical-flip',
+                        orgToolbarItems.push({ id: id + '_vFlip', prefixIcon: 'e-icons e-vertical-flip',
                             tooltipText: this.l10n.getConstant('VerticalFlip'), align: 'Left' });
                         break;
                     default:
@@ -3195,8 +3542,9 @@ var ToolbarModule = /** @class */ (function () {
     };
     ToolbarModule.prototype.renderQAT = function (isPenEdit) {
         var parent = this.parent;
+        var id = parent.element.id;
         if (parent.activeObj && parent.showQuickAccessToolbar) {
-            var qtArea = document.getElementById(parent.element.id + '_quickAccessToolbarArea');
+            var qtArea = document.getElementById(id + '_quickAccessToolbarArea');
             if (qtArea) {
                 this.destroyQuickAccessToolbar();
                 qtArea.style.display = 'block';
@@ -3210,7 +3558,7 @@ var ToolbarModule = /** @class */ (function () {
                     items: items,
                     clicked: this.quickAccessToolbarClicked.bind(this)
                 });
-                toolbarObj.appendTo('#' + parent.element.id + '_quickAccessToolbar');
+                toolbarObj.appendTo('#' + id + '_quickAccessToolbar');
             }
             var height = this.toolbarHeight && this.toolbarHeight !== 0 ? this.toolbarHeight : qtArea.clientHeight;
             if (isNullOrUndefined(isPenEdit)) {
@@ -3272,7 +3620,8 @@ var ToolbarModule = /** @class */ (function () {
             return;
         }
         var parent = this.parent;
-        var annotation = document.querySelector('#' + parent.element.id + '_annotationBtn');
+        var id = parent.element.id;
+        var annotation = document.querySelector('#' + id + '_annotationBtn');
         if (annotation) {
             if (isDisabled) {
                 annotation.classList.add('e-disabled');
@@ -3284,7 +3633,7 @@ var ToolbarModule = /** @class */ (function () {
             }
             getComponent(annotation, 'dropdown-btn').disabled = isDisabled;
         }
-        var transform = document.querySelector('#' + parent.element.id + '_transformBtn');
+        var transform = document.querySelector('#' + id + '_transformBtn');
         if (transform) {
             if (isDisabled) {
                 transform.classList.add('e-disabled');
@@ -3296,7 +3645,7 @@ var ToolbarModule = /** @class */ (function () {
             }
             getComponent(transform, 'dropdown-btn').disabled = isDisabled;
         }
-        var adjustment = document.querySelector('#' + parent.element.id + '_adjustment');
+        var adjustment = document.querySelector('#' + id + '_adjustment');
         if (adjustment) {
             if (isDisabled) {
                 adjustment.classList.add('e-disabled');
@@ -3308,7 +3657,7 @@ var ToolbarModule = /** @class */ (function () {
             }
             getComponent(adjustment, 'btn').disabled = isDisabled;
         }
-        var filter = document.querySelector('#' + parent.element.id + '_filter');
+        var filter = document.querySelector('#' + id + '_filter');
         if (filter) {
             if (isDisabled) {
                 filter.classList.add('e-disabled');
@@ -3332,17 +3681,20 @@ var ToolbarModule = /** @class */ (function () {
         var text = args.item.id;
         this.currentToolbar = 'crop';
         parent.currSelectionPoint = null;
+        parent.notify('draw', { prop: 'setIsCropSelect', value: { bool: true } });
+        var obj = { prevObj: null };
+        parent.notify('crop', { prop: 'getPreviousCropCurrentObj', value: { obj: obj } });
         parent.notify('draw', { prop: 'select', onPropertyChange: false,
             value: { type: text, startX: null, startY: null, width: null, height: null } });
+        parent.notify('crop', { prop: 'setPreviousCropCurrentObj', value: { obj: obj['prevObj'] } });
         this.enableDisableTbrBtn();
         parent.notify('transform', { prop: 'disableZoomOutBtn', value: { isZoomOut: true } });
     };
     ToolbarModule.prototype.quickAccessToolbarClicked = function (args, isContextualToolbar) {
         var parent = this.parent;
+        var id = parent.element.id;
         var points = { x: parent.activeObj.activePoint.startX, y: parent.activeObj.activePoint.startY };
         if (args.item) {
-            var duplicateObj = void 0;
-            var objColl = void 0;
             var isPreventUndoRedo = null;
             var obj = { prevActObj: null };
             var object = { tempObj: null };
@@ -3352,89 +3704,25 @@ var ToolbarModule = /** @class */ (function () {
             var pathObject = { isNewPath: null };
             var ctx = void 0;
             parent.notify('draw', { prop: 'getNewPath', value: { obj: pathObject } });
-            switch (args.item.id.replace(parent.element.id + '_', '').toLowerCase()) {
+            var type = args.item.id.replace(id + '_', '').toLowerCase();
+            switch (type) {
                 case 'duplicate':
-                    if (!parent.element.querySelector('#' + parent.element.id + '_duplicate').classList.contains('e-disabled')) {
+                    if (!parent.element.querySelector('#' + id + '_duplicate').classList.contains('e-disabled')) {
                         this.refreshSlider();
                         if (!pathObject['isNewPath'] && JSON.stringify(object['tempObj']) === JSON.stringify(parent.activeObj)) {
                             isPreventUndoRedo = true;
                         }
-                        duplicateObj = extend({}, parent.activeObj, {}, true);
-                        if (duplicateObj.shape === 'image') {
-                            objColl = extend([], parent.objColl, [], true);
-                            parent.notify('undo-redo', { prop: 'updateUrObj', onPropertyChange: false, value: { objColl: objColl } });
-                        }
-                        if (isNullOrUndefined(parent.activeObj.currIndex)) {
-                            parent.notify('shape', { prop: 'applyActObj', onPropertyChange: false, value: { isMouseDown: isPreventUndoRedo } });
-                        }
-                        else if (obj['prevActObj']) {
-                            parent.activeObj.currIndex = null;
-                            duplicateObj.currIndex = null;
-                            parent.notify('shape', { prop: 'applyActObj', onPropertyChange: false, value: { isMouseDown: isPreventUndoRedo } });
-                        }
-                        else {
-                            parent.notify('shape', { prop: 'applyActObj', onPropertyChange: false, value: { isMouseDown: true } });
-                        }
-                        if (pathObject['isNewPath']) {
-                            parent.notify('undo-redo', { prop: 'updateCurrUrc', value: { type: 'ok' } });
-                        }
-                        objColl = extend([], parent.objColl, [], true);
-                        duplicateObj.activePoint.startX += 10;
-                        duplicateObj.activePoint.startY -= 10;
-                        duplicateObj.activePoint.endX += 10;
-                        duplicateObj.activePoint.endY -= 10;
-                        if (duplicateObj.shape === 'path') {
-                            for (var i = 0; i < duplicateObj.pointColl.length; i++) {
-                                duplicateObj.pointColl[i].x += 10;
-                                duplicateObj.pointColl[i].y -= 10;
-                            }
-                        }
-                        else if (duplicateObj.shape === 'image') {
-                            duplicateObj.imageCanvas = parent.createElement('canvas');
-                        }
-                        parent.activeObj = extend({}, duplicateObj, {}, true);
-                        if (parent.activeObj.shape === 'image') {
-                            if (parent.activeObj.isHorImageFlip && parent.activeObj.isVerImageFlip) {
-                                parent.activeObj.isHorImageFlip = parent.activeObj.isVerImageFlip = false;
-                                parent.notify('draw', { prop: 'downScaleImgCanvas', onPropertyChange: false,
-                                    value: { ctx: duplicateObj.imageCanvas.getContext('2d'), isImgAnnotation: true, isHFlip: true, isVFlip: true } });
-                                parent.activeObj.isHorImageFlip = parent.activeObj.isVerImageFlip = true;
-                            }
-                            else if (parent.activeObj.isHorImageFlip) {
-                                parent.activeObj.isHorImageFlip = false;
-                                parent.notify('draw', { prop: 'downScaleImgCanvas', onPropertyChange: false,
-                                    value: { ctx: duplicateObj.imageCanvas.getContext('2d'), isImgAnnotation: true, isHFlip: true, isVFlip: null } });
-                                parent.activeObj.isHorImageFlip = true;
-                            }
-                            else if (parent.activeObj.isVerImageFlip) {
-                                parent.activeObj.isVerImageFlip = false;
-                                parent.notify('draw', { prop: 'downScaleImgCanvas', onPropertyChange: false,
-                                    value: { ctx: duplicateObj.imageCanvas.getContext('2d'), isImgAnnotation: true, isHFlip: null, isVFlip: true } });
-                                parent.activeObj.isVerImageFlip = true;
-                            }
-                            else {
-                                parent.notify('draw', { prop: 'downScaleImgCanvas', onPropertyChange: false,
-                                    value: { ctx: duplicateObj.imageCanvas.getContext('2d'), isImgAnnotation: true, isHFlip: null, isVFlip: null } });
-                            }
-                        }
-                        if (parent.activeObj.shape === 'line' || parent.activeObj.shape === 'arrow') {
-                            parent.notify('shape', { prop: 'setPointCollForLineArrow', onPropertyChange: false,
-                                value: { obj: parent.activeObj } });
-                        }
-                        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 } });
-                        this.renderQAT();
+                        this.duplicateShape(isPreventUndoRedo);
                     }
                     break;
                 case 'remove':
-                    if (!parent.element.querySelector('#' + parent.element.id + '_remove').classList.contains('e-disabled')) {
+                    if (!parent.element.querySelector('#' + id + '_remove').classList.contains('e-disabled')) {
                         this.refreshSlider();
                         parent.notify('selection', { prop: 'deleteItem', onPropertyChange: false });
                     }
                     break;
                 case 'edittext':
-                    if (!parent.element.querySelector('#' + parent.element.id + '_editText').classList.contains('e-disabled')) {
+                    if (!parent.element.querySelector('#' + id + '_editText').classList.contains('e-disabled')) {
                         this.upperContext.clearRect(0, 0, parent.upperCanvas.width, parent.upperCanvas.height);
                         parent.notify('selection', { prop: 'setTempActObj', onPropertyChange: false,
                             value: { obj: extend({}, parent.activeObj, {}, true) } });
@@ -3443,59 +3731,156 @@ var ToolbarModule = /** @class */ (function () {
                         parent.notify('draw', { prop: 'setPrevActObj', onPropertyChange: false,
                             value: { prevActObj: extend({}, parent.activeObj, {}, true) } });
                         if (parent.activeObj.rotatedAngle !== 0) {
-                            points.x = parent.activeObj.horTopLinePointColl[0].x;
-                            points.y = parent.activeObj.horTopLinePointColl[0].y;
+                            var object_1 = { x: points.x, y: points.y };
+                            parent.notify('shape', { prop: 'getTextBoxPosition', onPropertyChange: false,
+                                value: { obj: parent.activeObj, object: object_1 } });
+                            points.x = object_1['x'];
+                            points.y = object_1['y'];
+                            var object1 = { x: points.x, y: points.y };
+                            parent.notify('shape', { prop: 'setFlipState', onPropertyChange: false,
+                                value: { x: points.x, y: points.y, obj: parent.activeObj, object: object1 } });
+                            points.x = object1['x'];
+                            points.y = object1['y'];
                         }
                         parent.notify('shape', { prop: 'renderTextArea', onPropertyChange: false,
                             value: { x: points.x, y: points.y, actObj: parent.activeObj } });
                         if (isNullOrUndefined(parent.activeObj.currIndex)) {
                             parent.notify('draw', { prop: 'setShapeTextInsert', onPropertyChange: false, value: { bool: true } });
                         }
-                        else if (obj['prevActObj']) {
-                            parent.notify('draw', { prop: 'setShapeTextInsert', onPropertyChange: false, value: { bool: true } });
-                        }
-                        if (document.getElementById(parent.element.id + '_quickAccessToolbarArea')) {
-                            document.getElementById(parent.element.id + '_quickAccessToolbarArea').style.display = 'none';
+                        if (document.getElementById(id + '_quickAccessToolbarArea')) {
+                            document.getElementById(id + '_quickAccessToolbarArea').style.display = 'none';
                         }
                     }
                     break;
                 case 'rotleft':
                 case 'rotright':
-                    if (!parent.element.querySelector('#' + parent.element.id + '_rotLeft').classList.contains('e-disabled') ||
-                        !parent.element.querySelector('#' + parent.element.id + '_rotRight').classList.contains('e-disabled')) {
-                        parent.rotateImage(args.item.id.replace(parent.element.id + '_', '').toLowerCase());
+                    if (!parent.element.querySelector('#' + id + '_rotLeft').classList.contains('e-disabled') ||
+                        !parent.element.querySelector('#' + id + '_rotRight').classList.contains('e-disabled')) {
+                        parent.rotateImage(args.item.id.replace(id + '_', '').toLowerCase());
                     }
                     break;
                 case 'hflip':
-                    if (!parent.element.querySelector('#' + parent.element.id + '_hFlip').classList.contains('e-disabled')) {
+                    if (!parent.element.querySelector('#' + id + '_hFlip').classList.contains('e-disabled')) {
                         ctx = parent.activeObj.imageCanvas.getContext('2d');
                         parent.horizontalFlip(ctx);
                     }
                     break;
                 case 'vflip':
-                    if (!parent.element.querySelector('#' + parent.element.id + '_vFlip').classList.contains('e-disabled')) {
+                    if (!parent.element.querySelector('#' + id + '_vFlip').classList.contains('e-disabled')) {
                         ctx = parent.activeObj.imageCanvas.getContext('2d');
                         parent.verticalFlip(ctx);
                     }
                     break;
             }
+            if (type === 'duplicate' || type === 'remove') {
+                parent.notify('draw', { prop: 'redrawDownScale' });
+            }
         }
         if (isNullOrUndefined(isContextualToolbar)) {
             parent.trigger('quickAccessToolbarItemClick', args);
         }
     };
+    ToolbarModule.prototype.duplicateShape = function (isPreventUndoRedo, isPublicMethod) {
+        var parent = this.parent;
+        var tempObj = { activePoint: { startX: 0, startY: 0, endX: 0, endY: 0, width: 0, height: 0 },
+            flipObjColl: [], triangle: [], triangleRatio: [] };
+        parent.notify('selection', { prop: 'setTempActObj', onPropertyChange: false,
+            value: { obj: tempObj } });
+        var obj = { prevActObj: null };
+        parent.notify('draw', { prop: 'getPrevActObj', onPropertyChange: false, value: { obj: obj } });
+        var pathObject = { isNewPath: null };
+        parent.notify('draw', { prop: 'getNewPath', value: { obj: pathObject } });
+        var objColl;
+        var duplicateObj = extend({}, parent.activeObj, {}, true);
+        if (duplicateObj.shape === 'image') {
+            objColl = extend([], parent.objColl, [], true);
+            parent.notify('undo-redo', { prop: 'updateUrObj', onPropertyChange: false, value: { objColl: objColl } });
+        }
+        if (isNullOrUndefined(parent.activeObj.currIndex)) {
+            parent.notify('shape', { prop: 'applyActObj', onPropertyChange: false, value: { isMouseDown: isPreventUndoRedo } });
+        }
+        else if (obj['prevActObj'] || isPublicMethod) {
+            parent.activeObj.currIndex = null;
+            duplicateObj.currIndex = null;
+            parent.notify('shape', { prop: 'applyActObj', onPropertyChange: false, value: { isMouseDown: isPreventUndoRedo } });
+        }
+        else {
+            parent.notify('shape', { prop: 'applyActObj', onPropertyChange: false, value: { isMouseDown: true } });
+        }
+        if (pathObject['isNewPath']) {
+            parent.notify('undo-redo', { prop: 'updateCurrUrc', value: { type: 'ok' } });
+        }
+        objColl = extend([], parent.objColl, [], true);
+        duplicateObj.activePoint.startX += 10;
+        duplicateObj.activePoint.startY -= 10;
+        duplicateObj.activePoint.endX += 10;
+        duplicateObj.activePoint.endY -= 10;
+        if (duplicateObj.shape === 'path') {
+            for (var i = 0; i < duplicateObj.pointColl.length; i++) {
+                duplicateObj.pointColl[i].x += 10;
+                duplicateObj.pointColl[i].y -= 10;
+            }
+        }
+        else if (duplicateObj.shape === 'image') {
+            duplicateObj.imageCanvas = parent.createElement('canvas');
+        }
+        parent.activeObj = extend({}, duplicateObj, {}, true);
+        if (parent.activeObj.shape === 'image') {
+            var activePoint = extend({}, duplicateObj.activePoint, {}, true);
+            var dimObj = { width: 0, height: 0 };
+            parent.notify('transform', { prop: 'calcMaxDimension', onPropertyChange: false,
+                value: { width: parent.activeObj.imageElement.width, height: parent.activeObj.imageElement.height, obj: dimObj, isImgShape: null } });
+            parent.activeObj.activePoint.width = dimObj['width'];
+            parent.activeObj.activePoint.height = dimObj['height'];
+            if (parent.activeObj.isHorImageFlip && parent.activeObj.isVerImageFlip) {
+                parent.activeObj.isHorImageFlip = parent.activeObj.isVerImageFlip = false;
+                parent.notify('draw', { prop: 'downScaleImgCanvas', onPropertyChange: false,
+                    value: { ctx: duplicateObj.imageCanvas.getContext('2d'), isImgAnnotation: true, isHFlip: true, isVFlip: true } });
+                parent.activeObj.isHorImageFlip = parent.activeObj.isVerImageFlip = true;
+            }
+            else if (parent.activeObj.isHorImageFlip) {
+                parent.activeObj.isHorImageFlip = false;
+                parent.notify('draw', { prop: 'downScaleImgCanvas', onPropertyChange: false,
+                    value: { ctx: duplicateObj.imageCanvas.getContext('2d'), isImgAnnotation: true, isHFlip: true, isVFlip: null } });
+                parent.activeObj.isHorImageFlip = true;
+            }
+            else if (parent.activeObj.isVerImageFlip) {
+                parent.activeObj.isVerImageFlip = false;
+                parent.notify('draw', { prop: 'downScaleImgCanvas', onPropertyChange: false,
+                    value: { ctx: duplicateObj.imageCanvas.getContext('2d'), isImgAnnotation: true, isHFlip: null, isVFlip: true } });
+                parent.activeObj.isVerImageFlip = true;
+            }
+            else {
+                parent.notify('draw', { prop: 'downScaleImgCanvas', onPropertyChange: false,
+                    value: { ctx: duplicateObj.imageCanvas.getContext('2d'), isImgAnnotation: true, isHFlip: null, isVFlip: null } });
+            }
+            parent.activeObj.activePoint = activePoint;
+        }
+        if (parent.activeObj.shape === 'line' || parent.activeObj.shape === 'arrow') {
+            parent.notify('shape', { prop: 'setPointCollForLineArrow', onPropertyChange: false,
+                value: { obj: parent.activeObj } });
+        }
+        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 } });
+        this.renderQAT();
+    };
     ToolbarModule.prototype.defToolbarClicked = function (args) {
         var parent = this.parent;
+        var id = parent.element.id;
         var isContextualToolbar = false;
         var isFilterFinetune = false;
         if (!this.isFrameToolbar && parent.element.querySelector('.e-contextual-toolbar-wrapper')) {
             if (!parent.element.querySelector('.e-contextual-toolbar-wrapper').classList.contains('e-hide')) {
                 isContextualToolbar = isFilterFinetune = true;
             }
-            parent.element.querySelector('.e-contextual-toolbar-wrapper').classList.add('e-hide');
+            var straightenObj = { bool: parent.isStraightening };
+            if (!Browser.isDevice || (Browser.isDevice && !straightenObj['bool'])) {
+                parent.element.querySelector('.e-contextual-toolbar-wrapper').classList.add('e-hide');
+            }
         }
         if (args.item) {
-            var type = args.item.id.replace(parent.element.id + '_', '').toLowerCase();
+            var type = args.item.id.replace(id + '_', '').toLowerCase();
             if (type === 'duplicate' || type === 'remove' || type === 'edittext' ||
                 type === 'hflip' || type === 'vflip' || type === 'rotleft' || type === 'rotright') {
                 this.quickAccessToolbarClicked(args, true);
@@ -3504,23 +3889,33 @@ var ToolbarModule = /** @class */ (function () {
             else {
                 var isDisabledFilter = false;
                 var isDisabledAdjustment = false;
-                var adjustment = document.querySelector('#' + parent.element.id + '_adjustment');
+                var adjustment = document.querySelector('#' + id + '_adjustment');
                 if (adjustment && adjustment.classList.contains('e-disabled')) {
                     isDisabledAdjustment = true;
                 }
-                var filter = document.querySelector('#' + parent.element.id + '_filter');
+                var filter = document.querySelector('#' + id + '_filter');
                 if (filter && filter.classList.contains('e-disabled')) {
                     isDisabledFilter = true;
                 }
                 this.enableDisableTbrBtn();
                 this.performDefTbrClick(type, isContextualToolbar, isDisabledAdjustment, isDisabledFilter, isFilterFinetune);
                 parent.trigger('toolbarItemClicked', args);
+                if (parent.isStraightening) {
+                    parent.notify('transform', { prop: 'disableZoomOutBtn', value: { isZoomOut: true } });
+                }
+                var validTypes = ['undo', 'redo', 'cancel', 'aspectratio', 'nonaspectratio',
+                    'save', 'duplicate', 'filter', 'frame', 'none', 'mat', 'bevel', 'line', 'inset', 'hook', 'resize',
+                    'remove'];
+                if (validTypes.indexOf(type) !== -1) {
+                    parent.notify('draw', { prop: 'redrawDownScale' });
+                }
             }
         }
     };
     ToolbarModule.prototype.performDefTbrClick = function (type, isContextualToolbar, isDisabledAdjustment, isDisabledFilter, isFilterFinetune) {
         var parent = this.parent;
-        var zoomIn = parent.element.querySelector('#' + parent.element.id + '_zoomIn');
+        var id = parent.element.id;
+        var zoomIn = parent.element.querySelector('#' + id + '_zoomIn');
         var aspectRatioHeight = parent.element.querySelector('#' + parent.element.id + '_resizeHeight');
         var aspectRatioWidth = parent.element.querySelector('#' + parent.element.id + '_resizeWidth');
         var isCropSelection = false;
@@ -3580,23 +3975,33 @@ var ToolbarModule = /** @class */ (function () {
                     parent.okBtn();
                     this.refreshDropDownBtn(false);
                     this.currentToolbar = 'main';
+                    parent.isStraightening = false;
                     break;
                 case 'crop':
                     parent.notify('transform', { prop: 'disableZoomOutBtn', value: { isZoomOut: true } });
+                    if (Browser.isDevice) {
+                        this.updateContextualToolbar('color', 'straighten');
+                    }
                     break;
                 case 'reset':
                     parent.reset();
                     this.imageHeight = null;
                     this.imageWidth = null;
-                    this.parent.aspectHeight = null;
-                    this.parent.aspectWidth = null;
+                    parent.aspectHeight = null;
+                    parent.aspectWidth = null;
                     this.isAspectRatio = true;
                     this.currentToolbar = 'main';
                     break;
                 case 'undo':
+                    if (parent.togglePen) {
+                        parent.notify('draw', { prop: 'performCancel', value: { isContextualToolbar: isContextualToolbar } });
+                    }
                     parent.notify('undo-redo', { prop: 'call-undo' });
                     break;
                 case 'redo':
+                    if (parent.togglePen) {
+                        parent.notify('draw', { prop: 'performCancel', value: { isContextualToolbar: isContextualToolbar } });
+                    }
                     parent.notify('undo-redo', { prop: 'call-redo' });
                     break;
                 case 'aspectratio':
@@ -3607,6 +4012,11 @@ var ToolbarModule = /** @class */ (function () {
                             parent.aspectHeight = getComponent(aspectRatioHeight, 'numerictextbox').value;
                             parent.notify('transform', { prop: 'resize', value: { width: parent.aspectWidth, height: null, isAspectRatio: true } });
                         }
+                        else if (getComponent(aspectRatioHeight, 'numerictextbox').value) {
+                            parent.aspectWidth = parseFloat(getComponent(aspectRatioWidth, 'numerictextbox').placeholder);
+                            parent.aspectHeight = getComponent(aspectRatioHeight, 'numerictextbox').value;
+                            parent.notify('transform', { prop: 'resize', value: { width: parent.aspectWidth, height: parent.aspectHeight, isAspectRatio: true } });
+                        }
                         parent.resizeSrc = { startX: parent.img.srcLeft, startY: parent.img.srcTop, width: parent.img.srcWidth,
                             height: parent.img.srcHeight };
                         this.refreshToolbar('resize');
@@ -3623,6 +4033,7 @@ var ToolbarModule = /** @class */ (function () {
                             parseFloat(getComponent(aspectRatioHeight, 'numerictextbox').placeholder);
                         parent.notify('transform', { prop: 'resize', value: { width: parent.aspectWidth, height: parent.aspectHeight, isAspectRatio: false } });
                     }
+                    parent.cancelCropSelection = null;
                     parent.resizeSrc = { startX: parent.img.srcLeft, startY: parent.img.srcTop, width: parent.img.srcWidth,
                         height: parent.img.srcHeight };
                     this.refreshToolbar('resize');
@@ -3640,6 +4051,8 @@ var ToolbarModule = /** @class */ (function () {
                         }
                         this.refreshToolbar('adjustment');
                         parent.setTempFilterProperties();
+                        parent.notify('draw', { prop: 'updateFinetune' });
+                        parent.notify('filter', { prop: 'setTempAdjVal' });
                         this.openSlider('brightness');
                     }
                     break;
@@ -3695,11 +4108,11 @@ var ToolbarModule = /** @class */ (function () {
                         parent.notify('shape', { prop: 'applyFontStyle', onPropertyChange: false,
                             value: { item: 'bold' } });
                     }
-                    if (parent.element.querySelector('#' + parent.element.id + '_bold').classList.contains('e-selected-btn')) {
-                        parent.element.querySelector('#' + parent.element.id + '_bold').classList.remove('e-selected-btn');
+                    if (parent.element.querySelector('#' + id + '_bold').classList.contains('e-selected-btn')) {
+                        parent.element.querySelector('#' + id + '_bold').classList.remove('e-selected-btn');
                     }
                     else {
-                        parent.element.querySelector('#' + parent.element.id + '_bold').classList.add('e-selected-btn');
+                        parent.element.querySelector('#' + id + '_bold').classList.add('e-selected-btn');
                     }
                     break;
                 case 'italic':
@@ -3720,36 +4133,41 @@ var ToolbarModule = /** @class */ (function () {
                         parent.notify('shape', { prop: 'applyFontStyle', onPropertyChange: false,
                             value: { item: 'italic' } });
                     }
-                    if (parent.element.querySelector('#' + parent.element.id + '_italic').classList.contains('e-selected-btn')) {
-                        parent.element.querySelector('#' + parent.element.id + '_italic').classList.remove('e-selected-btn');
+                    if (parent.element.querySelector('#' + id + '_italic').classList.contains('e-selected-btn')) {
+                        parent.element.querySelector('#' + id + '_italic').classList.remove('e-selected-btn');
                     }
                     else {
-                        parent.element.querySelector('#' + parent.element.id + '_italic').classList.add('e-selected-btn');
+                        parent.element.querySelector('#' + id + '_italic').classList.add('e-selected-btn');
                     }
                     break;
                 case 'croptransform':
-                    if (parent.currObjType.isFiltered) {
-                        parent.okBtn();
-                    }
-                    this.refreshToolbar('croptransform');
+                    this.performCropTransformClick();
                     break;
                 case 'rotateleft':
                 case 'rotateright':
                 case 'horizontalflip':
                 case 'verticalflip':
                     parent.transformSelect(type);
+                    if (type === 'rotateleft' || type === 'rotateright') {
+                        parent.notify('draw', { prop: 'resetStraightenDestPoints' });
+                        parent.notify('draw', { prop: 'setDestForStraighten' });
+                    }
                     parent.notify('transform', { prop: 'disableZoomOutBtn', value: { isZoomOut: true } });
+                    if (Browser.isDevice) {
+                        this.updateContextualToolbar('color', 'straighten');
+                    }
                     break;
                 case 'save':
-                    if (parent.element.querySelector('#' + parent.element.id + '_saveBtn').classList.contains('e-hide')) {
-                        parent.element.querySelector('#' + parent.element.id + '_saveBtn').classList.remove('e-hide');
+                    if (parent.element.querySelector('#' + id + '_saveBtn').classList.contains('e-hide')) {
+                        parent.element.querySelector('#' + id + '_saveBtn').classList.remove('e-hide');
+                        parent.element.querySelector('#' + id + '_saveBtn').focus();
                         break;
                     }
                     else {
                         parent.okBtn();
                     }
-                    parent.element.querySelector('#' + parent.element.id + '_saveBtn').classList.add('e-hide');
-                    parent.element.querySelector('#' + parent.element.id + '_saveBtn').click();
+                    parent.element.querySelector('#' + id + '_saveBtn').classList.add('e-hide');
+                    parent.element.querySelector('#' + id + '_saveBtn').click();
                     break;
                 case 'transparency':
                     this.updateContextualToolbar('transparency', 'transparency');
@@ -3764,8 +4182,8 @@ var ToolbarModule = /** @class */ (function () {
                 case 'inset':
                 case 'hook':
                     this.unselectFrameBtn();
-                    if (parent.element.querySelector('#' + parent.element.id + '_' + type)) {
-                        parent.element.querySelector('#' + parent.element.id + '_' + type).classList.add('e-selected-btn');
+                    if (parent.element.querySelector('#' + id + '_' + type)) {
+                        parent.element.querySelector('#' + id + '_' + type).classList.add('e-selected-btn');
                     }
                     parent.frameObj.type = type;
                     parent.frameObj.size = 20;
@@ -3780,16 +4198,20 @@ var ToolbarModule = /** @class */ (function () {
                     }
                     this.refreshToolbar('frame');
                     parent.notify('draw', { prop: 'render-image', value: { isMouseWheel: null, isPreventClearRect: null, isFrame: true } });
+                    parent.isFrameBtnClick = true;
+                    parent.curFrameObjEvent = { previousFrameSetting: parent.tempFrameObj, currentFrameSetting: parent.frameObj };
                     break;
             }
         }
     };
     ToolbarModule.prototype.frameToolbarClick = function () {
         var parent = this.parent;
-        var frame = document.querySelector('#' + parent.element.id + '_frame');
+        var id = parent.element.id;
+        var frame = document.querySelector('#' + id + '_frame');
         var zoom;
         var frameObj;
         var tempFrameObj;
+        parent.notify('draw', { prop: 'updateCropSelection', onPropertyChange: false });
         if (parent.currObjType.isFiltered) {
             parent.okBtn();
         }
@@ -3802,7 +4224,7 @@ var ToolbarModule = /** @class */ (function () {
                 this.callFrameToolbar();
                 parent.frameObj.type = 'mat';
                 this.callFrameToolbar();
-                parent.cxtTbarHeight = parent.element.querySelector('#' + parent.element.id + '_customizeWrapper').clientHeight;
+                parent.cxtTbarHeight = parent.element.querySelector('#' + id + '_customizeWrapper').scrollHeight;
                 parent.frameObj = frameObj;
                 parent.tempFrameObj = tempFrameObj;
             }
@@ -3831,20 +4253,21 @@ var ToolbarModule = /** @class */ (function () {
         this.isFrameToolbar = true;
     };
     ToolbarModule.prototype.resizeClick = function () {
-        this.parent.upperCanvas.style.cursor = 'default';
-        this.parent.notify('transform', { prop: 'updateResize', value: { bool: false } });
+        var parent = this.parent;
+        parent.notify('draw', { prop: 'updateCropSelection', onPropertyChange: false });
+        parent.upperCanvas.style.cursor = 'default';
+        parent.notify('transform', { prop: 'updateResize', value: { bool: false } });
         if (this.isAspectRatio) {
             this.isAspectRatio = false;
         }
         else {
             this.isAspectRatio = true;
         }
-        this.parent.isResize = true;
+        parent.isResize = true;
         this.refreshToolbar('resize');
     };
     ToolbarModule.prototype.callFrameToolbar = function () {
         var parent = this.parent;
-        parent.notify('draw', { prop: 'setTempFrame', value: { frame: parent.frameObj.type } });
         extend(parent.tempFrameObj, parent.frameObj);
         var undoRedoObj = { appliedUndoRedoColl: [] };
         parent.notify('undo-redo', { prop: 'getAppliedUndoRedoColl', value: { obj: undoRedoObj } });
@@ -3875,8 +4298,11 @@ var ToolbarModule = /** @class */ (function () {
         document.getElementById(args.item.id + 'Canvas').parentElement.parentElement.classList.add('e-selected');
         parent.currObjType.isFiltered = true;
         parent.notify('filter', { prop: 'applyImageFilter', value: { option: type.toLowerCase() } });
+        parent.notify('draw', { prop: 'redrawDownScale' });
         parent.currentFilter = args.item.id;
         this.enableDisableTbrBtn();
+        parent.isFilterCanvasClick = true;
+        parent.curFilterObjEvent = imageFiltering;
     };
     ToolbarModule.prototype.refreshShapeDrawing = function () {
         var parent = this.parent;
@@ -3889,69 +4315,93 @@ var ToolbarModule = /** @class */ (function () {
         }
     };
     ToolbarModule.prototype.zoomInBtnClickHandler = function (e) {
-        var parent = this.parent;
-        if ((parent.zoomSettings.zoomTrigger & ZoomTrigger.Toolbar) === ZoomTrigger.Toolbar) {
-            if (parent.currObjType.isFiltered) {
-                parent.okBtn();
-            }
-            this.refreshShapeDrawing();
-            if (Browser.isDevice && e.type === 'touchstart') {
-                if (!e.returnValue) {
-                    return;
+        if (e) {
+            var parent_1 = this.parent;
+            if ((parent_1.zoomSettings.zoomTrigger & ZoomTrigger.Toolbar) === ZoomTrigger.Toolbar) {
+                if (parent_1.currObjType.isFiltered) {
+                    parent_1.okBtn();
+                }
+                this.refreshShapeDrawing();
+                if (Browser.isDevice && e.type === 'touchstart') {
+                    if (!e.returnValue) {
+                        return;
+                    }
+                    e.preventDefault();
+                }
+                var zoomIn = document.querySelector('#' + parent_1.element.id + '_zoomIn');
+                EventHandler.trigger(zoomIn, 'click');
+                var obj = { bool: false };
+                parent_1.notify('selection', { prop: 'getFreehandDrawEditing', onPropertyChange: false, value: { obj: obj } });
+                if (obj['bool']) {
+                    parent_1.notify('freehand-draw', { prop: 'applyFhd', onPropertyChange: false });
+                    this.destroyQuickAccessToolbar();
+                }
+                parent_1.isZoomBtnClick = true;
+                this.applyPreviewFilter();
+                parent_1.currObjType.isFiltered = false;
+                if (parent_1.togglePen) {
+                    parent_1.currObjType.isZoomed = true;
+                    parent_1.freeHandDraw(false);
+                    parent_1.notify('undo-redo', { prop: 'updateCurrUrc', value: { type: 'ok' } });
+                }
+                parent_1.notify('draw', { prop: 'resetCurrentSelectionPoint' });
+                parent_1.notify('transform', { prop: 'zoomAction', onPropertyChange: false,
+                    value: { zoomFactor: .1, zoomPoint: null, isResize: null } });
+                parent_1.notify('draw', { prop: 'redrawDownScale' });
+                if (parent_1.isCropTab || parent_1.activeObj.shape) {
+                    parent_1.notify('draw', { prop: 'setStraightenActObj', value: { activeObj: null } });
+                    parent_1.notify('freehand-draw', { prop: 'resetStraightenPoint' });
+                }
+                if (parent_1.isStraightening) {
+                    parent_1.notify('draw', { prop: 'resetStraightenDestPoints' });
+                    parent_1.notify('draw', { prop: 'setDestForStraighten' });
                 }
-                e.preventDefault();
-            }
-            var zoomIn = document.querySelector('#' + parent.element.id + '_zoomIn');
-            EventHandler.trigger(zoomIn, 'click');
-            var obj = { bool: false };
-            parent.notify('selection', { prop: 'getFreehandDrawEditing', onPropertyChange: false, value: { obj: obj } });
-            if (obj['bool']) {
-                parent.notify('freehand-draw', { prop: 'applyFhd', onPropertyChange: false });
-                this.destroyQuickAccessToolbar();
-            }
-            this.applyPreviewFilter();
-            parent.currObjType.isFiltered = false;
-            if (parent.togglePen) {
-                parent.currObjType.isZoomed = true;
-                parent.freeHandDraw(false);
-                parent.notify('undo-redo', { prop: 'updateCurrUrc', value: { type: 'ok' } });
             }
-            parent.notify('draw', { prop: 'resetCurrentSelectionPoint' });
-            parent.notify('transform', { prop: 'zoomAction', onPropertyChange: false,
-                value: { zoomFactor: .1, zoomPoint: null, isResize: null } });
         }
     };
     ToolbarModule.prototype.zoomOutBtnClickHandler = function (e) {
-        var parent = this.parent;
-        if ((parent.zoomSettings.zoomTrigger & ZoomTrigger.Toolbar) === ZoomTrigger.Toolbar) {
-            if (parent.currObjType.isFiltered) {
-                parent.okBtn();
-            }
-            this.refreshShapeDrawing();
-            if (Browser.isDevice && e.type === 'touchstart') {
-                if (!e.returnValue) {
-                    return;
+        if (e) {
+            var parent_2 = this.parent;
+            if ((parent_2.zoomSettings.zoomTrigger & ZoomTrigger.Toolbar) === ZoomTrigger.Toolbar) {
+                if (parent_2.currObjType.isFiltered) {
+                    parent_2.okBtn();
+                }
+                this.refreshShapeDrawing();
+                if (Browser.isDevice && e.type === 'touchstart') {
+                    if (!e.returnValue) {
+                        return;
+                    }
+                    e.preventDefault();
+                }
+                var zoomOut = document.querySelector('#' + parent_2.element.id + '_zoomOut');
+                EventHandler.trigger(zoomOut, 'click');
+                var obj = { bool: false };
+                parent_2.notify('selection', { prop: 'getFreehandDrawEditing', onPropertyChange: false, value: { obj: obj } });
+                if (obj['bool']) {
+                    parent_2.notify('freehand-draw', { prop: 'applyFhd', onPropertyChange: false });
+                    this.destroyQuickAccessToolbar();
+                }
+                parent_2.isZoomBtnClick = true;
+                this.applyPreviewFilter();
+                parent_2.currObjType.isFiltered = false;
+                if (parent_2.togglePen) {
+                    parent_2.currObjType.isZoomed = true;
+                    parent_2.freeHandDraw(false);
+                    parent_2.notify('undo-redo', { prop: 'updateCurrUrc', value: { type: 'ok' } });
+                }
+                parent_2.notify('draw', { prop: 'resetCurrentSelectionPoint' });
+                parent_2.notify('transform', { prop: 'zoomAction', onPropertyChange: false,
+                    value: { zoomFactor: -.1, zoomPoint: null, isResize: null } });
+                parent_2.notify('draw', { prop: 'redrawDownScale' });
+                if (parent_2.isCropTab || parent_2.activeObj.shape) {
+                    parent_2.notify('draw', { prop: 'setStraightenActObj', value: { activeObj: null } });
+                    parent_2.notify('freehand-draw', { prop: 'resetStraightenPoint' });
+                }
+                if (parent_2.isStraightening) {
+                    parent_2.notify('draw', { prop: 'resetStraightenDestPoints' });
+                    parent_2.notify('draw', { prop: 'setDestForStraighten' });
                 }
-                e.preventDefault();
-            }
-            var zoomOut = document.querySelector('#' + parent.element.id + '_zoomOut');
-            EventHandler.trigger(zoomOut, 'click');
-            var obj = { bool: false };
-            parent.notify('selection', { prop: 'getFreehandDrawEditing', onPropertyChange: false, value: { obj: obj } });
-            if (obj['bool']) {
-                parent.notify('freehand-draw', { prop: 'applyFhd', onPropertyChange: false });
-                this.destroyQuickAccessToolbar();
-            }
-            this.applyPreviewFilter();
-            parent.currObjType.isFiltered = false;
-            if (parent.togglePen) {
-                parent.currObjType.isZoomed = true;
-                parent.freeHandDraw(false);
-                parent.notify('undo-redo', { prop: 'updateCurrUrc', value: { type: 'ok' } });
             }
-            parent.notify('draw', { prop: 'resetCurrentSelectionPoint' });
-            parent.notify('transform', { prop: 'zoomAction', onPropertyChange: false,
-                value: { zoomFactor: -.1, zoomPoint: null, isResize: null } });
         }
     };
     ToolbarModule.prototype.zoomInBtnMouseDownHandler = function (e) {
@@ -3968,63 +4418,71 @@ var ToolbarModule = /** @class */ (function () {
     };
     ToolbarModule.prototype.closeContextualToolbar = function () {
         var parent = this.parent;
+        var id = parent.element.id;
         var isContextualToolbar = false;
-        if ((parent.element.querySelector('#' + parent.element.id + '_contextualToolbar') &&
-            !parent.element.querySelector('#' + parent.element.id + '_contextualToolbar').parentElement.classList.contains('e-hide')) ||
-            (parent.element.querySelector('#' + parent.element.id + '_headWrapper')
-                && !parent.element.querySelector('#' + parent.element.id + '_headWrapper').parentElement.classList.contains('e-hide'))) {
-            parent.element.querySelector('.e-contextual-toolbar-wrapper').classList.add('e-hide');
-            parent.okBtn();
-            this.refreshMainToolbar();
-            isContextualToolbar = true;
+        var straightenObj = { bool: parent.isStraightening };
+        if (!Browser.isDevice || (Browser.isDevice && !straightenObj['bool'])) {
+            if ((parent.element.querySelector('#' + id + '_contextualToolbar') &&
+                !parent.element.querySelector('#' + id + '_contextualToolbar').parentElement.classList.contains('e-hide')) ||
+                (parent.element.querySelector('#' + id + '_headWrapper')
+                    && !parent.element.querySelector('#' + id + '_headWrapper').parentElement.classList.contains('e-hide'))) {
+                parent.element.querySelector('.e-contextual-toolbar-wrapper').classList.add('e-hide');
+                parent.okBtn();
+                this.refreshMainToolbar();
+                isContextualToolbar = true;
+            }
         }
         return isContextualToolbar;
     };
     ToolbarModule.prototype.destroyQuickAccessToolbar = function () {
         var parent = this.parent;
-        var quickToolbar = document.getElementById(parent.element.id + '_quickAccessToolbar');
+        var id = parent.element.id;
+        var quickToolbar = document.getElementById(id + '_quickAccessToolbar');
         if (quickToolbar && quickToolbar.classList.contains('e-control')) {
             getComponent(quickToolbar, 'toolbar').destroy();
         }
-        var qatArea = document.getElementById(parent.element.id + '_quickAccessToolbarArea');
+        var qatArea = document.getElementById(id + '_quickAccessToolbarArea');
         if (qatArea) {
             qatArea.style.display = 'none';
         }
     };
-    ToolbarModule.prototype.renderSlider = function (type) {
+    ToolbarModule.prototype.renderSlider = function (type, isSelect) {
         var parent = this.parent;
-        var canvasWrapper = document.querySelector('#' + parent.element.id + '_contextualToolbarArea');
-        var hdrWrapper = document.querySelector('#' + parent.element.id + '_headWrapper');
-        var labelWrapper = document.querySelector('#' + parent.element.id + '_labelWrapper');
-        if (!hdrWrapper) {
-            hdrWrapper = canvasWrapper.appendChild(parent.createElement('div', {
-                id: parent.element.id + '_headWrapper',
-                styles: 'position: relative'
+        var id = parent.element.id;
+        var canvasWrapper = document.querySelector('#' + id + '_contextualToolbarArea');
+        var hdrWrapper = document.querySelector('#' + id + '_headWrapper');
+        var labelWrapper = document.querySelector('#' + id + '_labelWrapper');
+        if (hdrWrapper) {
+            hdrWrapper.remove();
+            labelWrapper.remove();
+        }
+        hdrWrapper = canvasWrapper.appendChild(parent.createElement('div', {
+            id: id + '_headWrapper',
+            styles: 'position: relative'
+        }));
+        if (type === 'transparency') {
+            labelWrapper = hdrWrapper.appendChild(parent.createElement('label', {
+                id: id + '_labelWrapper',
+                styles: Browser.isDevice ? 'position: absolute; top: 25%; left: calc(50% - 150px); font-size: 15px; text-transform: capitalize; font-weight: 400;'
+                    : 'position: absolute; top: 25%; left: calc(50% - 250px); font-size: 15px; text-transform: capitalize; font-weight: 400;'
             }));
-            if (type === 'transparency') {
-                labelWrapper = hdrWrapper.appendChild(parent.createElement('label', {
-                    id: parent.element.id + '_labelWrapper',
-                    styles: Browser.isDevice ? 'position: absolute; top: 25%; left: calc(50% - 175px); font-size: 15px; text-transform: capitalize; font-weight: 400;'
-                        : 'position: absolute; top: 25%; left: calc(50% - 250px); font-size: 15px; text-transform: capitalize; font-weight: 400;'
-                }));
-            }
-            else {
-                labelWrapper = hdrWrapper.appendChild(parent.createElement('label', {
-                    id: parent.element.id + '_labelWrapper',
-                    styles: Browser.isDevice ? 'position: absolute; top: 25%; left: calc(50% - 150px); 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;'
-                }));
-            }
         }
         else {
-            hdrWrapper.style.display = 'block';
+            labelWrapper = hdrWrapper.appendChild(parent.createElement('label', {
+                id: id + '_labelWrapper',
+                styles: Browser.isDevice ? ('position: absolute; top: 25%; left: calc(50% - 150px); 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;'
+            }));
         }
-        labelWrapper.textContent = this.l10n.getConstant(parent.toPascalCase(type));
+        labelWrapper.textContent = this.l10n.getConstant(parent.toPascalCase(type === 'transparency' ? 'opacity' : type));
         var sliderWrapper = hdrWrapper.appendChild(parent.createElement('div', {
-            id: parent.element.id + '_sliderWrapper',
+            id: id + '_sliderWrapper',
             styles: 'position: absolute'
         }));
         var value = parent.getCurrAdjustmentValue(type);
+        if (isSelect && type === 'straighten' && Browser.isDevice) {
+            value = parent.cropObj.straighten;
+        }
         var min;
         var max;
         var slider;
@@ -4087,34 +4545,106 @@ var ToolbarModule = /** @class */ (function () {
             max = 100;
             slider = this.createSlider(min, max, value, type);
         }
-        slider.appendTo('#' + parent.element.id + '_sliderWrapper');
+        else if (type === 'straighten') {
+            min = -45;
+            max = 45;
+            slider = this.createSlider(min, max, value, type);
+        }
+        slider.appendTo('#' + id + '_sliderWrapper');
         sliderWrapper.style.left = (parseFloat(canvasWrapper.style.width) - parseFloat(slider.width)) / 2 + 'px';
+        if (type === 'straighten' && Browser.isDevice) {
+            var sLabelWrapper = hdrWrapper.appendChild(parent.createElement('label', {
+                id: id + '_sLabelWrapper',
+                className: 'e-ie-straighten-value-span',
+                styles: 'position: absolute; top: 25%; margin-left: 20px; font-size: 15px; text-transform: capitalize; font-weight: 400;'
+            }));
+            sLabelWrapper.innerHTML = parent.transform.straighten.toString() + '&#176';
+            sliderWrapper.parentElement.classList.add('e-straighten-slider');
+        }
+        if (type !== 'straighten') {
+            hdrWrapper.appendChild(parent.createElement('label', {
+                id: id + '_finetuneSpan',
+                className: 'e-ie-finetune-value-span',
+                styles: Browser.isDevice ? ('position: absolute; top: 25%; margin-left: 20px; font-size: 15px; text-transform: capitalize; font-weight: 400;') :
+                    'position: absolute; top: 25%; left: calc(50% + 190px); font-size: 15px; text-transform: capitalize; font-weight: 400;'
+            }));
+            sliderWrapper.parentElement.classList.add('e-finetune-slider');
+            this.updateFinetuneSpan(type);
+        }
     };
     ToolbarModule.prototype.createSlider = function (min, max, value, type) {
         var _this = this;
         var parent = this.parent;
+        var step = type === 'straighten' ? 3 : 1;
         return new Slider({
-            value: value,
-            tooltip: { isVisible: true, placement: 'Before', showOn: 'Always' },
-            type: 'MinRange',
-            min: min,
-            max: max,
-            step: 10,
-            width: Browser.isDevice ? '200px' : '300px',
+            value: value, type: 'MinRange', min: min, max: max,
+            step: step, width: Browser.isDevice ? '180px' : (type === 'straighten' ? '200px' : '300px'),
             cssClass: 'e-slider',
             change: function (args) {
                 if (type === 'transparency') {
-                    parent.activeObj.imageTransparency = args.value / 100;
-                    _this.upperContext.clearRect(0, 0, parent.upperCanvas.width, parent.upperCanvas.height);
-                    parent.notify('draw', { prop: 'drawObject', onPropertyChange: false, value: { canvas: 'duplicate' } });
+                    if (parent.activeObj.shape) {
+                        var prevCropObj = void 0;
+                        var prevObj = void 0;
+                        if (isNullOrUndefined(parent.activeObj.imageRatio)) {
+                            parent.notify('shape', { prop: 'updImgRatioForActObj', onPropertyChange: false });
+                        }
+                        parent.notify('shape', { prop: 'pushActItemIntoObj' });
+                        prevCropObj = extend({}, parent.cropObj, {}, true);
+                        var object = { currObj: {} };
+                        parent.notify('filter', { prop: 'getCurrentObj', onPropertyChange: false, value: { object: object } });
+                        prevObj = object['currObj'];
+                        prevObj.objColl = extend([], parent.objColl, [], true);
+                        prevObj.pointColl = extend([], parent.pointColl, [], true);
+                        prevObj.afterCropActions = extend([], parent.afterCropActions, [], true);
+                        var selPointCollObj = { selPointColl: null };
+                        parent.notify('freehand-draw', { prop: 'getSelPointColl', onPropertyChange: false,
+                            value: { obj: selPointCollObj } });
+                        prevObj.selPointColl = extend([], selPointCollObj['selPointColl'], [], true);
+                        parent.objColl.pop();
+                        parent.activeObj.opacity = args.value / 100;
+                        _this.upperContext.clearRect(0, 0, parent.upperCanvas.width, parent.upperCanvas.height);
+                        parent.notify('draw', { prop: 'drawObject', onPropertyChange: false, value: { canvas: 'duplicate' } });
+                        parent.objColl.push(parent.activeObj);
+                        parent.notify('undo-redo', { prop: 'updateUndoRedoColl', onPropertyChange: false,
+                            value: { operation: 'shapeTransform', previousObj: prevObj, previousObjColl: prevObj.objColl,
+                                previousPointColl: prevObj.pointColl, previousSelPointColl: prevObj.selPointColl,
+                                previousCropObj: prevCropObj, previousText: null,
+                                currentText: null, previousFilter: null, isCircleCrop: null } });
+                        parent.notify('selection', { prop: 'redrawShape', value: { obj: parent.objColl[parent.objColl.length - 1] } });
+                        _this.updateFinetuneSpan(type);
+                    }
+                }
+                else if (type === 'straighten') {
+                    parent.setStraighten(args.value);
                 }
                 else {
+                    if (parent.transform.zoomFactor && parent.transform.zoomFactor < 0) {
+                        parent.isFinetuning = true;
+                    }
+                    parent.notify('selection', { prop: 'setSliding', value: { bool: true } });
                     parent.setCurrAdjustmentValue(type, args.value);
+                    _this.updateFinetuneSpan(type);
                     _this.enableDisableTbrBtn();
+                    parent.isFinetuning = false;
+                }
+            },
+            changed: function () {
+                if (type !== 'transparency' && type !== 'straighten') {
+                    parent.notify('selection', { prop: 'setSliding', value: { bool: false } });
+                    parent.notify('draw', { prop: 'redrawDownScale' });
                 }
             }
         });
     };
+    ToolbarModule.prototype.updateFinetuneSpan = function (type) {
+        var parent = this.parent;
+        var ftValPan = parent.element.querySelector('.e-ie-finetune-value-span');
+        if (ftValPan) {
+            var adjObj = { adjustmentLevel: null };
+            parent.notify('filter', { prop: 'getAdjustmentLevel', onPropertyChange: false, value: { obj: adjObj } });
+            ftValPan.innerHTML = Math.round(adjObj['adjustmentLevel'][type]).toString();
+        }
+    };
     ToolbarModule.prototype.applyPreviewFilter = function () {
         var parent = this.parent;
         if (document.querySelector('#' + parent.element.id + '_sliderWrapper') ||
@@ -4126,14 +4656,15 @@ var ToolbarModule = /** @class */ (function () {
     };
     ToolbarModule.prototype.unselectBtn = function () {
         var parent = this.parent;
+        var id = parent.element.id;
         var selectors = [
-            '#' + parent.element.id + '_brightness',
-            '#' + parent.element.id + '_contrast',
-            '#' + parent.element.id + '_hue',
-            '#' + parent.element.id + '_saturation',
-            '#' + parent.element.id + '_opacity',
-            '#' + parent.element.id + '_blur',
-            '#' + parent.element.id + '_exposure'
+            '#' + id + '_brightness',
+            '#' + id + '_contrast',
+            '#' + id + '_hue',
+            '#' + id + '_saturation',
+            '#' + id + '_opacity',
+            '#' + id + '_blur',
+            '#' + id + '_exposure'
         ];
         for (var _i = 0, selectors_1 = selectors; _i < selectors_1.length; _i++) {
             var selector = selectors_1[_i];
@@ -4151,10 +4682,11 @@ var ToolbarModule = /** @class */ (function () {
         document.getElementById(this.parent.element.id + '_' + type).classList.add('e-selected-btn');
     };
     ToolbarModule.prototype.refreshSlider = function () {
-        var sliderWrapper = document.querySelector('#' + this.parent.element.id + '_sliderWrapper');
+        var id = this.parent.element.id;
+        var sliderWrapper = document.querySelector('#' + id + '_sliderWrapper');
         // eslint-disable-next-line
         var slider = document.querySelector('.e-slider');
-        var hdrWrapper = document.querySelector('#' + this.parent.element.id + '_headWrapper');
+        var hdrWrapper = document.querySelector('#' + id + '_headWrapper');
         if (hdrWrapper) {
             hdrWrapper.style.display = 'none';
         }
@@ -4165,13 +4697,14 @@ var ToolbarModule = /** @class */ (function () {
     };
     ToolbarModule.prototype.unselectFrameBtn = function () {
         var parent = this.parent;
+        var id = parent.element.id;
         var selectors = [
-            '#' + parent.element.id + '_none',
-            '#' + parent.element.id + '_mat',
-            '#' + parent.element.id + '_line',
-            '#' + parent.element.id + '_inset',
-            '#' + parent.element.id + '_bevel',
-            '#' + parent.element.id + '_hook'
+            '#' + id + '_none',
+            '#' + id + '_mat',
+            '#' + id + '_line',
+            '#' + id + '_inset',
+            '#' + id + '_bevel',
+            '#' + id + '_hook'
         ];
         for (var _i = 0, selectors_2 = selectors; _i < selectors_2.length; _i++) {
             var selector = selectors_2[_i];
@@ -4184,6 +4717,7 @@ var ToolbarModule = /** @class */ (function () {
     };
     ToolbarModule.prototype.updateToolbarItems = function () {
         var parent = this.parent;
+        var id = parent.element.id;
         if (!parent.isImageLoaded) {
             return;
         }
@@ -4194,78 +4728,93 @@ var ToolbarModule = /** @class */ (function () {
         var strokeWidthElem = parent.element.querySelector('.e-shape-stroke-width');
         var fontFamilyElem = parent.element.querySelector('.e-text-font-family');
         var fontSizeElem = parent.element.querySelector('.e-text-font-size');
-        var boldBtn = parent.element.querySelector('#' + parent.element.id + '_bold');
-        var italicBtn = parent.element.querySelector('#' + parent.element.id + '_italic');
-        if (isNullOrUndefined(parent.activeObj.strokeSettings.strokeWidth)) {
-            parent.activeObj.strokeSettings.strokeWidth = 2;
-        }
-        if (selFillElem) {
-            if (parent.activeObj.strokeSettings.fillColor === '') {
-                selFillElem.classList.add('e-nocolor-item');
+        var boldBtn = parent.element.querySelector('#' + id + '_bold');
+        var italicBtn = parent.element.querySelector('#' + id + '_italic');
+        if (parent.activeObj.strokeSettings && parent.activeObj.textSettings) {
+            if (isNullOrUndefined(parent.activeObj.strokeSettings.strokeWidth)) {
+                parent.activeObj.strokeSettings.strokeWidth = 2;
             }
-            else {
-                selFillElem.classList.remove('e-nocolor-item');
-                selFillElem.style.background = parent.activeObj.strokeSettings.fillColor;
+            if (selFillElem) {
+                var value = parent.activeObj.strokeSettings.fillColor;
+                if (parent.activeObj.strokeSettings.fillColor === '') {
+                    selFillElem.classList.add('e-nocolor-item');
+                }
+                else {
+                    selFillElem.classList.remove('e-nocolor-item');
+                    selFillElem.style.background = value;
+                }
+                if (document.querySelector('#' + id + '_shape_fill')) {
+                    getComponent(id + '_shape_fill', 'colorpicker').value = value;
+                }
             }
-            getComponent(parent.element.id + '_shape_fill', 'colorpicker').value
-                = parent.activeObj.strokeSettings.fillColor + 'ff';
-        }
-        if (selStrokeElem) {
-            selStrokeElem.style.background = parent.activeObj.strokeSettings.strokeColor;
-            getComponent(parent.element.id + '_shape_stroke', 'colorpicker').value
-                = parent.activeObj.strokeSettings.strokeColor + 'ff';
-        }
-        if (selTextStrokeElem) {
-            selTextStrokeElem.style.background = parent.activeObj.strokeSettings.strokeColor;
-            getComponent(parent.element.id + '_text_font', 'colorpicker').value
-                = parent.activeObj.strokeSettings.strokeColor + 'ff';
-        }
-        if (selPenStrokeElem) {
-            selPenStrokeElem.style.background = parent.activeObj.strokeSettings.strokeColor;
-            getComponent(parent.element.id + '_pen_stroke', 'colorpicker').value
-                = parent.activeObj.strokeSettings.strokeColor + 'ff';
-        }
-        if (fontFamilyElem) {
-            if (Browser.isDevice) {
-                fontFamilyElem.setAttribute('style', 'font-family:' + parent.activeObj.textSettings.fontFamily.toLowerCase());
+            if (selStrokeElem) {
+                var value = parent.activeObj.strokeSettings.strokeColor;
+                selStrokeElem.style.background = value;
+                if (document.querySelector('#' + id + '_shape_stroke')) {
+                    getComponent(id + '_shape_stroke', 'colorpicker').value = value;
+                }
             }
-            else {
-                fontFamilyElem.textContent = parent.activeObj.textSettings.fontFamily;
+            if (selTextStrokeElem) {
+                var value = parent.activeObj.strokeSettings.strokeColor;
+                selTextStrokeElem.style.background = value;
+                if (document.querySelector('#' + id + '_text_font')) {
+                    getComponent(id + '_text_font', 'colorpicker').value = value;
+                }
             }
-        }
-        if (fontSizeElem) {
-            for (var i = 0; i < parent.fontSizeColl.length; i++) {
-                if (parseInt(parent.fontSizeColl[i].text, 10) >= Math.round(parent.activeObj.textSettings.fontSize)) {
-                    fontSizeElem.textContent = (i + 1).toString();
-                    break;
+            if (selPenStrokeElem) {
+                var value = parent.activeObj.strokeSettings.strokeColor;
+                selPenStrokeElem.style.background = value;
+                if (document.querySelector('#' + id + '_pen_stroke')) {
+                    getComponent(id + '_pen_stroke', 'colorpicker').value = value;
                 }
+                var obj = { penOpacity: 1 };
+                parent.notify('freehand-draw', { prop: 'getPenOpacity', onPropertyChange: false, value: { obj: obj } });
             }
-        }
-        if (boldBtn) {
-            if (parent.activeObj.textSettings.bold) {
-                boldBtn.classList.add('e-selected-btn');
+            if (fontFamilyElem) {
+                if (Browser.isDevice) {
+                    fontFamilyElem.setAttribute('style', 'font-family:' + parent.activeObj.textSettings.fontFamily.toLowerCase());
+                }
+                else {
+                    fontFamilyElem.textContent = parent.activeObj.textSettings.fontFamily;
+                }
             }
-            else {
-                boldBtn.classList.remove('e-selected-btn');
+            if (fontSizeElem) {
+                for (var i = 0; i < parent.fontSizeColl.length; i++) {
+                    if (parseInt(parent.fontSizeColl[i].text, 10) >= Math.round(parent.activeObj.textSettings.fontSize)) {
+                        fontSizeElem.textContent = (i + 1).toString();
+                        break;
+                    }
+                }
             }
-        }
-        if (italicBtn) {
-            if (parent.activeObj.textSettings.italic) {
-                italicBtn.classList.add('e-selected-btn');
+            if (boldBtn) {
+                if (parent.activeObj.textSettings.bold) {
+                    boldBtn.classList.add('e-selected-btn');
+                }
+                else {
+                    boldBtn.classList.remove('e-selected-btn');
+                }
             }
-            else {
-                italicBtn.classList.remove('e-selected-btn');
+            if (italicBtn) {
+                if (parent.activeObj.textSettings.italic) {
+                    italicBtn.classList.add('e-selected-btn');
+                }
+                else {
+                    italicBtn.classList.remove('e-selected-btn');
+                }
+            }
+            if (strokeWidthElem) {
+                var strokeWidth = Math.round((parent.activeObj.strokeSettings.strokeWidth)).toString();
+                strokeWidthElem.textContent = this.getStrokeWidth(strokeWidth);
             }
-        }
-        if (strokeWidthElem) {
-            var strokeWidth = Math.round((parent.activeObj.strokeSettings.strokeWidth)).toString();
-            strokeWidthElem.textContent = this.getStrokeWidth(strokeWidth);
         }
     };
     ToolbarModule.prototype.getStrokeWidth = function (text) {
         var strokeWidth;
         var currentWidth = parseInt(text, 10) / 2;
         switch (currentWidth) {
+            case 0:
+                strokeWidth = this.l10n.getConstant('NoOutline');
+                break;
             case 1:
                 strokeWidth = this.l10n.getConstant('XSmall');
                 break;