@syncfusion/ej2-image-editor 22.2.11 → 23.1.38

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

@@ -1,5 +1,6 @@
 import { extend, Browser, detach, select } 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';
 import { DropDownButton } from '@syncfusion/ej2-splitbuttons';
 import { ColorPicker, Uploader, Slider } from '@syncfusion/ej2-inputs';
@@ -14,6 +15,8 @@ var ToolbarModule = /** @class */ (function () {
         this.currentToolbar = 'main';
         this.selFhdColor = '#42a5f5';
         this.preventEnableDisableUr = false;
+        this.isAspectRatio = true;
+        this.isFrameToolbar = false;
         this.parent = parent;
         this.addEventListener();
         this.initLocale();
@@ -109,7 +112,51 @@ var ToolbarModule = /** @class */ (function () {
             SquareSolid: 'Square Solid',
             None: 'None',
             CropAndTransform: 'Crop and Transform',
-            CropSelection: 'Crop Selection'
+            CropSelection: 'Crop Selection',
+            Image: 'Add Image',
+            Transparency: 'Transparency',
+            Height: 'Height',
+            Width: 'Width',
+            AspectRatio: 'Maintain aspect ratio',
+            W: 'W',
+            H: 'H',
+            DragText: 'Drag and drop your image here or',
+            DropText: 'Drop your image here or',
+            BrowseText: 'Browse here...',
+            SupportText: 'Supports:',
+            Frame: 'Frame',
+            Mat: 'Mat',
+            Bevel: 'Bevel',
+            Inset: 'Inset',
+            Hook: 'Hook',
+            Color: 'Color',
+            Size: 'Size',
+            Offset: 'Offset',
+            Radius: 'Radius',
+            Amount: 'Amount',
+            Resize: 'Resize',
+            0: '0%',
+            20: '20%',
+            40: '40%',
+            60: '60%',
+            80: '80%',
+            100: '100%',
+            1: '1',
+            2: '2',
+            3: '3',
+            4: '4',
+            5: '5',
+            Border: 'Border',
+            Solid: 'Solid',
+            Dashed: 'Dashed',
+            Dotted: 'Dotted',
+            GradientColor: 'Gradient Color',
+            ConfirmDialogHeader: 'Confirm Save Changes',
+            ConfirmDialogContent: 'Do you want to save the changes you made to the image?',
+            AlertDialogHeader: 'Unsupported file',
+            AlertDialogContent: 'The dropped file is unsupported.',
+            Yes: 'Yes',
+            No: 'No'
         };
         this.l10n = new L10n('image-editor', this.defaultLocale, this.parent.locale);
     };
@@ -136,7 +183,7 @@ var ToolbarModule = /** @class */ (function () {
                 this.enableDisableTbrBtn();
                 break;
             case 'init-main-toolbar':
-                this.initMainToolbar(args.value['isApplyBtn'], args.value['isDevice'], args.value['isOkBtn']);
+                this.initMainToolbar(args.value['isApplyBtn'], args.value['isDevice'], args.value['isOkBtn'], args.value['isResize']);
                 break;
             case 'create-bottom-toolbar':
                 this.createBottomToolbar();
@@ -243,6 +290,24 @@ var ToolbarModule = /** @class */ (function () {
             case 'reset':
                 this.reset();
                 break;
+            case 'getLocaleText':
+                args.value['obj']['value'] = this.l10n.getConstant(args.value['obj']['key']);
+                break;
+            case 'initResizeToolbar':
+                this.initResizeToolbar();
+                break;
+            case 'getFrameToolbar':
+                args.value['obj']['bool'] = this.isFrameToolbar;
+                break;
+            case 'callFrameToolbar':
+                this.callFrameToolbar();
+                break;
+            case 'resizeClick':
+                this.resizeClick();
+                break;
+            case 'frameToolbarClick':
+                this.frameToolbarClick();
+                break;
         }
     };
     ToolbarModule.prototype.updatePrivateVariables = function () {
@@ -265,10 +330,11 @@ var ToolbarModule = /** @class */ (function () {
         parent.prevCurrSelectionPoint = null;
         this.zoomBtnHold = null;
         this.currToolbar = '';
+        parent.cxtTbarHeight = null;
         this.currentToolbar = 'main';
         this.selFhdColor = '#42a5f5';
         parent.currentFilter = '';
-        this.preventZoomBtn = parent.isCropToolbar = this.preventEnableDisableUr = false;
+        this.preventZoomBtn = parent.isCropToolbar = this.preventEnableDisableUr = this.isFrameToolbar = false;
         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%)';
@@ -404,16 +470,21 @@ var ToolbarModule = /** @class */ (function () {
             toolbarObj.appendTo('#' + parent.element.id + '_quickAccessToolbar');
         }
     };
-    ToolbarModule.prototype.initMainToolbar = function (isApplyOption, isDevice, isOkBtn) {
+    ToolbarModule.prototype.initMainToolbar = function (isApplyOption, isDevice, isOkBtn, isResize, isFrame) {
         var _this = this;
         var parent = this.parent;
         if (this.isToolbar()) {
-            var leftItem = this.getLeftToolbarItem(isOkBtn);
+            var leftItem = this.getLeftToolbarItem(isOkBtn, isResize);
             var rightItem = this.getRightToolbarItem(isOkBtn);
-            var mainItem = this.getMainToolbarItem(isApplyOption);
+            var mainItem = this.getMainToolbarItem(isApplyOption, isFrame);
             var zoomItem = this.getZoomToolbarItem();
             if (isDevice) {
-                this.defToolbarItems = leftItem.concat(rightItem);
+                if (isFrame) {
+                    this.defToolbarItems = mainItem;
+                }
+                else {
+                    this.defToolbarItems = leftItem.concat(rightItem);
+                }
             }
             else {
                 this.defToolbarItems = leftItem.concat(mainItem, rightItem, zoomItem);
@@ -431,7 +502,12 @@ var ToolbarModule = /** @class */ (function () {
                     parent.trigger('toolbarCreated', { toolbarType: 'main' });
                 }
             });
-            toolbarObj.appendTo('#' + parent.element.id + '_toolbar');
+            if (isDevice && isFrame) {
+                toolbarObj.appendTo('#' + parent.element.id + '_bottomToolbar');
+            }
+            else {
+                toolbarObj.appendTo('#' + parent.element.id + '_toolbar');
+            }
             this.createLeftToolbarControls();
             this.enableDisableTbrBtn();
             if (this.isToolbar() && document.getElementById(parent.element.id + '_toolbar')) {
@@ -463,14 +539,14 @@ var ToolbarModule = /** @class */ (function () {
             }
         }
     };
-    ToolbarModule.prototype.getLeftToolbarItem = function (isOkBtn) {
+    ToolbarModule.prototype.getLeftToolbarItem = function (isOkBtn, isResize) {
         var parent = this.parent;
         var toolbarItems = [];
-        if (!isOkBtn) {
+        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' }) });
             toolbarItems.push({ visible: false, cssClass: 'e-image-position e-btn e-flat', tooltipText: this.l10n.getConstant('Browse'), align: 'Left' });
         }
-        if (parent.allowUndoRedo) {
+        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',
                     tooltipText: this.l10n.getConstant('Undo'), align: 'Left' });
@@ -480,7 +556,7 @@ var ToolbarModule = /** @class */ (function () {
                     tooltipText: this.l10n.getConstant('Redo'), align: 'Left' });
             }
         }
-        if (!this.preventZoomBtn && (parent.zoomSettings.zoomTrigger & ZoomTrigger.Toolbar) === ZoomTrigger.Toolbar) {
+        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',
                     tooltipText: this.l10n.getConstant('ZoomOut'), align: 'Left' });
@@ -521,24 +597,60 @@ var ToolbarModule = /** @class */ (function () {
         }
         return toolbarItems;
     };
-    ToolbarModule.prototype.getMainToolbarItem = function (isApplyOption) {
+    ToolbarModule.prototype.getMainToolbarItem = function (isApplyOption, isFrame) {
         var parent = this.parent;
         var toolbarItems = [];
-        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',
-                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>' });
-        }
-        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',
-                tooltipText: this.l10n.getConstant('Finetune'), align: 'Center' });
+        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',
+                    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',
+                    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',
+                    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',
+                    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',
+                    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',
+                    tooltipText: this.l10n.getConstant('Hook'), 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',
-                tooltipText: this.l10n.getConstant('Filter'), 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',
+                    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>' });
+            }
+            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',
+                    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',
+                    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',
+                    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',
+                    tooltipText: this.l10n.getConstant('Resize'), align: 'Center' });
+            }
         }
         var tempToolbarItems = this.processToolbar('center');
         for (var i = 0, len = tempToolbarItems.length; i < len; i++) {
@@ -580,10 +692,18 @@ var ToolbarModule = /** @class */ (function () {
                 getComponent(document.getElementById(parent.element.id + '_contextualToolbar'), 'toolbar').destroy();
             }
             this.refreshSlider();
-            this.renderSlider(cType);
+            if (type === 'frame') {
+                this.initFrameToolbarItem();
+            }
+            else {
+                this.renderSlider(cType);
+            }
         }
         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 ht = parent.element.querySelector('#' + parent.element.id + '_canvasWrapper').offsetHeight;
             contextualToolbarArea.style.top = this.toolbarHeight + ht - cHt + 'px';
         }
@@ -638,6 +758,142 @@ var ToolbarModule = /** @class */ (function () {
             zoomIn.addEventListener('touchstart', this.zoomInBtnClickHandler.bind(this));
         }
     };
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    ToolbarModule.prototype.widthAspectRatio = function (e) {
+        var parent = this.parent;
+        var aspectRatioHeight = parent.element.querySelector('#' + parent.element.id + '_resizeHeight');
+        var aspectRatioWidth = parent.element.querySelector('#' + parent.element.id + '_resizeWidth');
+        var aspectRatioIcon = parent.element.querySelector('#' + parent.element.id + '_aspectratio');
+        var originalWidth = parent.img.destWidth;
+        var originalHeight = parent.img.destHeight;
+        var aspectRatioHeightValue = parseFloat(aspectRatioHeight.value);
+        var width = Math.floor((aspectRatioHeightValue / (originalHeight / originalWidth)));
+        if (aspectRatioIcon) {
+            if (width != null && !isNaN(width)) {
+                getComponent(aspectRatioWidth, 'numerictextbox').value = width;
+                aspectRatioWidth.value = width.toString() + ' px';
+            }
+            else {
+                getComponent(aspectRatioWidth, 'numerictextbox').value = 0;
+                aspectRatioWidth.value = '0 px';
+            }
+        }
+    };
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    ToolbarModule.prototype.heightAspectRatio = function (e) {
+        var parent = this.parent;
+        var aspectRatioHeight = parent.element.querySelector('#' + parent.element.id + '_resizeHeight');
+        var aspectRatioWidth = parent.element.querySelector('#' + parent.element.id + '_resizeWidth');
+        var aspectRatioIcon = parent.element.querySelector('#' + parent.element.id + '_aspectratio');
+        var originalWidth = parent.img.destWidth;
+        var originalHeight = parent.img.destHeight;
+        var aspectRatioWidthValue = parseFloat(aspectRatioWidth.value);
+        var height = Math.floor((aspectRatioWidthValue / (originalWidth / originalHeight)));
+        if (aspectRatioIcon && !isNaN(height)) {
+            getComponent(aspectRatioHeight, 'numerictextbox').value = height;
+            aspectRatioHeight.value = height.toString() + ' px';
+        }
+        else {
+            getComponent(aspectRatioHeight, 'numerictextbox').value = 0;
+            aspectRatioHeight.value = '0 px';
+        }
+    };
+    ToolbarModule.prototype.getResizeToolbarItem = function () {
+        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',
+            tooltipText: this.l10n.getConstant('Width'), align: 'Center', type: 'Input', template: new NumericTextBox({ width: 75, htmlAttributes: { maxLength: "4" },
+                showSpinButton: false, value: (this.parent.aspectWidth && this.parent.aspectHeight) ? this.parent.aspectWidth : Math.ceil(this.parent.img.destWidth),
+                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',
+            tooltipText: this.l10n.getConstant('Height'), align: 'Center', type: 'Input', template: new NumericTextBox({ width: 75, htmlAttributes: { maxLength: "4" },
+                showSpinButton: false, value: (this.parent.aspectWidth && this.parent.aspectHeight) ? this.parent.aspectHeight : Math.ceil(this.parent.img.destHeight),
+                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' });
+            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' });
+            this.isAspectRatio = false;
+        }
+        if (!Browser.isDevice) {
+            toolbarItems.push({ id: this.parent.element.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',
+                tooltipText: this.l10n.getConstant('Cancel'), align: 'Right' });
+        }
+        return toolbarItems;
+    };
+    ToolbarModule.prototype.initResizeToolbar = function () {
+        var _this = this;
+        var leftItem = this.getLeftToolbarItem(false, true);
+        var rightItem = this.getRightToolbarItem();
+        var mainItem = this.getResizeToolbarItem();
+        var zoomItem = this.getZoomToolbarItem();
+        if (Browser.isDevice) {
+            this.defToolbarItems = mainItem;
+        }
+        else {
+            this.defToolbarItems = leftItem.concat(zoomItem, mainItem, rightItem);
+        }
+        var toolbar = new Toolbar({
+            width: '100%',
+            items: this.defToolbarItems,
+            clicked: this.defToolbarClicked.bind(this),
+            created: function () {
+                _this.wireResizeBtnEvents();
+                if (!Browser.isDevice) {
+                    _this.renderSaveBtn();
+                }
+                _this.parent.trigger('toolbarCreated', { toolbarType: 'shapes' });
+                if (Browser.isDevice) {
+                    if (_this.defToolbarItems.length > 0 && (!isNullOrUndefined(document.getElementById(_this.parent.element.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')))) {
+                        /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
+                        toolbar.refreshOverflow();
+                    }
+                }
+            }
+        });
+        if (Browser.isDevice) {
+            toolbar.appendTo('#' + this.parent.element.id + '_bottomToolbar');
+        }
+        else {
+            toolbar.appendTo('#' + this.parent.element.id + '_toolbar');
+        }
+        this.parent.isResize = false;
+        this.enableDisableTbrBtn();
+        this.parent.isResize = true;
+        this.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 aspectRatio = parent.element.querySelector('#' + parent.element.id + '_aspectratio');
+        if (aspectRatio) {
+            if (!isNullOrUndefined(aspectRatioHeight)) {
+                aspectRatioWidth.addEventListener('keyup', this.heightAspectRatio.bind(this));
+            }
+            if (!isNullOrUndefined(aspectRatioWidth)) {
+                aspectRatioHeight.addEventListener('keyup', this.widthAspectRatio.bind(this));
+            }
+        }
+    };
     ToolbarModule.prototype.enableDisableTbrBtn = function () {
         var parent = this.parent;
         if (!this.preventEnableDisableUr) {
@@ -645,7 +901,7 @@ var ToolbarModule = /** @class */ (function () {
             parent.notify('undo-redo', { prop: 'getAppliedUndoRedoColl', value: { obj: object } });
             var undoRedoObj = { undoRedoStep: null };
             parent.notify('undo-redo', { prop: 'getUndoRedoStep', value: { obj: undoRedoObj } });
-            var undo = document.querySelector('#' + parent.element.id + '_undo');
+            var undo = parent.element.querySelector('#' + parent.element.id + '_undo');
             if (undo && undoRedoObj['undoRedoStep'] === 0) {
                 undo.classList.add('e-disabled');
                 undo.parentElement.classList.add('e-overlay');
@@ -654,7 +910,7 @@ var ToolbarModule = /** @class */ (function () {
                 undo.classList.remove('e-disabled');
                 undo.parentElement.classList.remove('e-overlay');
             }
-            var redo = document.querySelector('#' + parent.element.id + '_redo');
+            var redo = parent.element.querySelector('#' + parent.element.id + '_redo');
             if (redo && (undoRedoObj['undoRedoStep'] === object['appliedUndoRedoColl'].length)) {
                 redo.classList.add('e-disabled');
                 redo.parentElement.classList.add('e-overlay');
@@ -686,12 +942,12 @@ var ToolbarModule = /** @class */ (function () {
             zoomOut.classList.remove('e-disabled');
             zoomOut.parentElement.classList.remove('e-overlay');
         }
-        var pan = document.querySelector('#' + parent.element.id + '_pan');
-        if (pan && parent.zoomSettings.zoomFactor <= parent.zoomSettings.minZoomFactor) {
-            pan.style.display = 'none';
+        var frame = document.querySelector('#' + parent.element.id + '_frame');
+        if (frame && ((parent.currSelectionPoint && parent.currSelectionPoint.shape === 'crop-circle') || parent.isCircleCrop)) {
+            frame.classList.add('e-disabled');
         }
-        else if (pan) {
-            pan.style.display = 'block';
+        else if (frame) {
+            frame.classList.remove('e-disabled');
         }
     };
     ToolbarModule.prototype.createLeftToolbarControls = function () {
@@ -750,6 +1006,9 @@ var ToolbarModule = /** @class */ (function () {
         if (isNullOrUndefined(parent.toolbar) || !isCustomized || (parent.toolbar && parent.toolbar.indexOf('Text') > -1)) {
             items.push({ text: this.l10n.getConstant('Text'), id: 'text', iconCss: 'e-icons e-add-text' });
         }
+        if (isNullOrUndefined(parent.toolbar) || (!isNullOrUndefined(parent.toolbar) && parent.toolbar.indexOf('Image') > -1)) {
+            items.push({ text: this.l10n.getConstant('Image'), id: 'image', iconCss: 'e-icons e-image' });
+        }
         var obj = { freehandDrawSelectedId: null };
         parent.notify('freehand-draw', { prop: 'getFreehandDrawSelectedId', onPropertyChange: false, value: { obj: obj } });
         var duplicateElement = document.querySelector('#' + parent.element.id + '_duplicate');
@@ -784,6 +1043,10 @@ var ToolbarModule = /** @class */ (function () {
         var drpDownBtn = new DropDownButton({ items: items, iconCss: 'e-icons ' + iconCss,
             cssClass: 'e-image-popup',
             open: function (args) {
+                if (parent.currObjType.isFiltered) {
+                    parent.okBtn();
+                    parent.element.querySelector('#' + _this.parent.element.id + '_annotationBtn').click();
+                }
                 if (Browser.isDevice) {
                     args.element.parentElement.style.top = drpDownBtn.element.getBoundingClientRect().top -
                         args.element.parentElement.offsetHeight + 'px';
@@ -833,6 +1096,10 @@ var ToolbarModule = /** @class */ (function () {
                         // 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();
+                        break;
                     default:
                         _this.currentToolbar = 'shapes';
                         /// parent.notify('shape', { prop: 'draw-shape', value: {obj: (args.item.id).toLowerCase()}});
@@ -972,28 +1239,20 @@ var ToolbarModule = /** @class */ (function () {
             template: '<button id="' + parent.element.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' });
+        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' });
         }
-        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' });
+        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' });
         }
         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' });
+        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' });
         }
-        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' });
+        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' });
         }
         if (!Browser.isDevice) {
             toolbarItems.push({ id: parent.element.id + '_ok', prefixIcon: 'e-icons e-check', cssClass: 'top-icon e-tick',
@@ -1032,6 +1291,21 @@ var ToolbarModule = /** @class */ (function () {
             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>' });
         }
+        if (items.indexOf('flip') > -1) {
+            toolbarItems.push({ id: parent.element.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',
+                tooltipText: this.l10n.getConstant('RotateRight'), align: 'Center' });
+            toolbarItems.push({ id: parent.element.id + '_hFlip', prefixIcon: 'e-horizontal-flip',
+                tooltipText: this.l10n.getConstant('HorizontalFlip'), align: 'Center' });
+            toolbarItems.push({ id: parent.element.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' });
         if (items.indexOf('duplicate') > -1) {
             toolbarItems.push({ id: parent.element.id + '_duplicate', prefixIcon: 'e-icons e-order', cssClass: 'top-icon e-order',
@@ -1135,6 +1409,9 @@ var ToolbarModule = /** @class */ (function () {
             case 'text':
                 icon = 'e-add-text';
                 break;
+            case 'image':
+                icon = 'e-image';
+                break;
             case 'pen':
                 icon = 'e-free-pen';
                 break;
@@ -1449,15 +1726,15 @@ var ToolbarModule = /** @class */ (function () {
         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' });
+                tooltipText: this.l10n.getConstant('Duplicate'), align: 'Center', disabled: parent.textArea.style.display === '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' });
+                tooltipText: this.l10n.getConstant('Remove'), align: 'Center', disabled: parent.textArea.style.display === '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' });
+                tooltipText: this.l10n.getConstant('EditText'), align: 'Center', disabled: parent.textArea.style.display === 'block' ? true : false });
         }
         var tempToolbarItems = this.processSubToolbar(items);
         for (var i = 0, len = tempToolbarItems.length; i < len; i++) {
@@ -1641,7 +1918,14 @@ var ToolbarModule = /** @class */ (function () {
         }
         var item = type === 'shapes' && parent.activeObj.shape ? parent.activeObj.shape : type;
         var args = { toolbarType: item };
+        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 = '';
+            }
             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 = '';
@@ -1654,6 +1938,7 @@ var ToolbarModule = /** @class */ (function () {
             }
         }
         this.refreshSlider();
+        this.isFrameToolbar = false;
         parent.isCropTab = false;
         switch (type) {
             case 'main':
@@ -1687,6 +1972,9 @@ var ToolbarModule = /** @class */ (function () {
                 else if (parent.activeObj.shape === 'arrow') {
                     args.toolbarItems = ['strokeColor', 'strokeWidth', 'start', 'end', 'duplicate', 'remove'];
                 }
+                else if (parent.activeObj.shape === 'image') {
+                    args.toolbarItems = ['flip', 'duplicate', 'remove', 'transparency'];
+                }
                 else {
                     args.toolbarItems = ['fillColor', 'strokeColor', 'strokeWidth', 'duplicate', 'remove'];
                 }
@@ -1718,10 +2006,27 @@ var ToolbarModule = /** @class */ (function () {
             case 'filter':
                 this.updateContextualToolbar(type);
                 break;
+            case 'resize':
+                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) {
+                    if (nonAspectIcon) {
+                        parent.notify('transform', { prop: 'resize', value: { width: parent.aspectWidth, height: parent.aspectHeight, isAspectRatio: false } });
+                    }
+                    else if (aspectIcon) {
+                        parent.notify('transform', { prop: 'resize', value: { width: parent.aspectWidth, height: null, isAspectRatio: true } });
+                    }
+                }
+                break;
             case 'color':
                 this.updateContextualToolbar(type, cType);
                 break;
             case 'croptransform':
+                parent.allowDownScale = false;
                 parent.isCropTab = true;
                 if (Browser.isDevice) {
                     this.initMainToolbar(false, true, true);
@@ -1729,6 +2034,23 @@ var ToolbarModule = /** @class */ (function () {
                 parent.updateCropTransformItems();
                 this.initCropTransformToolbar();
                 break;
+            case 'frame':
+                this.isFrameToolbar = true;
+                if (Browser.isDevice) {
+                    this.initMainToolbar(false, true, true);
+                    this.initMainToolbar(false, true, true, false, true);
+                }
+                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');
+                }
+                if (parent.frameObj.type !== 'none') {
+                    this.updateContextualToolbar(type, cType);
+                }
+                parent.notify('draw', { prop: 'render-image', value: { isMouseWheel: null, isPreventClearRect: null, isFrame: true } });
+                break;
         }
         this.currToolbar = type;
         this.refreshDropDownBtn(isCropping);
@@ -1786,6 +2108,35 @@ var ToolbarModule = /** @class */ (function () {
         }
         return toolbarItems;
     };
+    ToolbarModule.prototype.getFrameToolbarItem = function () {
+        var parent = this.parent;
+        var toolbarItems = [];
+        toolbarItems.push({ prefixIcon: 'e-icons e-copy', id: parent.element.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',
+            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>' });
+        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>' });
+        }
+        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>' });
+        }
+        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>' });
+        }
+        return toolbarItems;
+    };
     ToolbarModule.prototype.getFilterToolbarItem = function () {
         var toolbarItems = [];
         var parent = this.parent;
@@ -2082,6 +2433,603 @@ var ToolbarModule = /** @class */ (function () {
         }
         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'
+            }));
+        }
+        else {
+            frameWrapper.style.display = 'block';
+        }
+        frameWrapper.appendChild(parent.createElement('div', {
+            id: parent.element.id + '_customizeWrapper',
+            styles: 'position: absolute'
+        }));
+        var mainItem = this.getFrameToolbarItem();
+        var toolbar = new Toolbar({
+            width: '100%',
+            items: mainItem,
+            clicked: this.defToolbarClicked.bind(this),
+            created: function () {
+                _this.createFrameColor();
+                _this.createFrameSize();
+                if (parent.frameObj.type === 'line') {
+                    _this.createFrameRadius();
+                }
+                if (parent.frameObj.type === 'line' || parent.frameObj.type === 'inset' || parent.frameObj.type === 'hook') {
+                    _this.createFrameInset();
+                }
+                if (parent.frameObj.type === 'line' || parent.frameObj.type === 'inset') {
+                    _this.createFrameOffset();
+                }
+                if (parent.frameObj.type === 'line') {
+                    _this.createFrameAmount();
+                    _this.createFrameBorder();
+                }
+                _this.createFrameGradientColor();
+                if (Browser.isDevice) {
+                    if (_this.defToolbarItems.length > 0 && document.getElementById(parent.element.id + '_bottomToolbar')) {
+                        /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
+                        toolbar.refreshOverflow();
+                        toolbar.refreshOverflow();
+                        toolbar.refreshOverflow();
+                    }
+                }
+                else {
+                    _this.createLeftToolbarControls();
+                    if (_this.defToolbarItems.length > 0 && document.getElementById(parent.element.id + '_toolbar')) {
+                        /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
+                        toolbar.refreshOverflow();
+                    }
+                }
+                parent.element.querySelector('#' + parent.element.id + '_' + parent.frameObj.type).focus();
+            }
+        });
+        toolbar.appendTo('#' + this.parent.element.id + '_customizeWrapper');
+    };
+    ToolbarModule.prototype.createFrameGradientColor = function () {
+        var parent = this.parent;
+        var prevFrameSettings;
+        var obj = { frameChangeEventArgs: null };
+        parent.element.querySelector('.e-template.e-frame-stroke').appendChild(parent.createElement('input', {
+            id: parent.element.id + '_frame_gradient_fill'
+        }));
+        var fillColor = new ColorPicker({
+            modeSwitcher: false, noColor: true, value: parent.frameObj.gradientColor,
+            showButtons: false, mode: 'Palette', cssClass: 'e-frame-gradient-fill-color',
+            change: function (args) {
+                prevFrameSettings = { type: parent.toPascalCase(parent.frameObj.type), color: parent.frameObj.color,
+                    gradientColor: parent.frameObj.gradientColor, size: parent.frameObj.size, inset: parent.frameObj.inset,
+                    offset: parent.frameObj.offset, borderRadius: parent.frameObj.radius, frameLineStyle: parent.toPascalCase(parent.frameObj.border),
+                    lineCount: parent.frameObj.amount };
+                var temp = parent.frameObj.gradientColor;
+                var object = { currObj: {} };
+                parent.notify('filter', { prop: 'getCurrentObj', onPropertyChange: false, value: { object: object } });
+                parent.frameObj.gradientColor = args.currentValue.hex;
+                parent.notify('draw', { prop: 'triggerFrameChange', value: { prevFrameSettings: prevFrameSettings, obj: obj } });
+                if (obj['frameChangeEventArgs'] && !obj['frameChangeEventArgs'].cancel) {
+                    parent.notify('undo-redo', { prop: 'updateUndoRedoColl', onPropertyChange: false, value: {
+                            operation: 'frame', previousObj: object['currObj'], previousObjColl: object['currObj']['objColl'],
+                            previousPointColl: object['currObj']['pointColl'], previousSelPointColl: object['currObj']['selPointColl'],
+                            previousCropObj: extend({}, parent.cropObj, {}, true), previousText: null, currentText: null,
+                            previousFilter: null, isCircleCrop: null
+                        } });
+                    parent.notify('draw', { prop: 'render-image', value: { isMouseWheel: null, isPreventClearRect: null, isFrame: true } });
+                    if (args.currentValue.rgba === '') {
+                        fillDDB.element.children[0].classList.add('e-nocolor-item');
+                    }
+                    else {
+                        fillDDB.element.children[0].classList.remove('e-nocolor-item');
+                        fillDDB.element.children[0].style.backgroundColor = args.currentValue.rgba;
+                    }
+                }
+                else {
+                    parent.frameObj.gradientColor = temp;
+                }
+                fillDDB.toggle();
+            }
+        }, '#' + parent.element.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';
+                }
+            },
+            target: '.e-frame-gradient-fill-color',
+            iconCss: 'e-dropdownbtn-preview'
+        }, '#' + parent.element.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');
+        }
+        else {
+            parent.element.querySelector('.e-frame-stroke.e-template .e-dropdownbtn-preview').style.background = parent.frameObj.gradientColor;
+        }
+    };
+    ToolbarModule.prototype.createFrameColor = function () {
+        var parent = this.parent;
+        var prevFrameSettings;
+        var obj = { frameChangeEventArgs: null };
+        parent.element.querySelector('.e-template.e-stroke').appendChild(parent.createElement('input', {
+            id: parent.element.id + '_frame_fill'
+        }));
+        var fillColor = new ColorPicker({
+            modeSwitcher: false, value: parent.frameObj.color,
+            showButtons: false, mode: 'Palette', cssClass: 'e-frame-fill-color',
+            change: function (args) {
+                prevFrameSettings = { type: parent.toPascalCase(parent.frameObj.type), color: parent.frameObj.color,
+                    gradientColor: parent.frameObj.gradientColor, size: parent.frameObj.size, inset: parent.frameObj.inset,
+                    offset: parent.frameObj.offset, borderRadius: parent.frameObj.radius, frameLineStyle: parent.toPascalCase(parent.frameObj.border),
+                    lineCount: parent.frameObj.amount };
+                var temp = parent.frameObj.color;
+                var object = { currObj: {} };
+                parent.notify('filter', { prop: 'getCurrentObj', onPropertyChange: false, value: { object: object } });
+                parent.frameObj.color = args.currentValue.hex;
+                parent.notify('draw', { prop: 'triggerFrameChange', value: { prevFrameSettings: prevFrameSettings, obj: obj } });
+                if (obj['frameChangeEventArgs'] && !obj['frameChangeEventArgs'].cancel) {
+                    parent.notify('undo-redo', { prop: 'updateUndoRedoColl', onPropertyChange: false, value: {
+                            operation: 'frame', previousObj: object['currObj'], previousObjColl: object['currObj']['objColl'],
+                            previousPointColl: object['currObj']['pointColl'], previousSelPointColl: object['currObj']['selPointColl'],
+                            previousCropObj: extend({}, parent.cropObj, {}, true), previousText: null, currentText: null,
+                            previousFilter: null, isCircleCrop: null
+                        } });
+                    parent.notify('draw', { prop: 'render-image', value: { isMouseWheel: null, isPreventClearRect: null, isFrame: true } });
+                    if (args.currentValue.rgba === '') {
+                        fillDDB.element.children[0].classList.add('e-nocolor-item');
+                    }
+                    else {
+                        fillDDB.element.children[0].classList.remove('e-nocolor-item');
+                        fillDDB.element.children[0].style.backgroundColor = args.currentValue.rgba;
+                    }
+                }
+                else {
+                    parent.frameObj.color = temp;
+                }
+                fillDDB.toggle();
+            }
+        }, '#' + parent.element.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';
+                }
+            },
+            target: '.e-frame-fill-color',
+            iconCss: 'e-dropdownbtn-preview'
+        }, '#' + parent.element.id + '_frameColorBtn');
+        fillColor.inline = true;
+        parent.element.querySelector('.e-stroke.e-template .e-dropdownbtn-preview').style.background = parent.frameObj.color;
+    };
+    ToolbarModule.prototype.createFrameSize = function () {
+        var parent = this.parent;
+        var prevFrameSettings;
+        var obj = { frameChangeEventArgs: null };
+        var strokeWidthItems = [
+            { id: '1', text: this.l10n.getConstant('20') },
+            { id: '2', text: this.l10n.getConstant('40') },
+            { id: '3', text: this.l10n.getConstant('60') },
+            { id: '4', text: this.l10n.getConstant('80') },
+            { id: '5', text: this.l10n.getConstant('100') }
+        ];
+        var strokeWidthBtn = document.getElementById(parent.element.id + '_frameSizeBtn');
+        var spanElem = document.createElement('span');
+        spanElem.innerHTML = this.l10n.getConstant(parent.frameObj.size.toString());
+        spanElem.className = 'e-frame-stroke-width';
+        strokeWidthBtn.appendChild(spanElem);
+        // Initialize the DropDownButton component.
+        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 activeBtn = drpDownBtn.element.childNodes[0].textContent;
+                if (activeBtn !== '') {
+                    args.element.querySelector('[aria-label = ' + '"' + activeBtn + '"' + ']').classList.add('e-selected-btn');
+                }
+            },
+            select: function (args) {
+                prevFrameSettings = { type: parent.toPascalCase(parent.frameObj.type), color: parent.frameObj.color,
+                    gradientColor: parent.frameObj.gradientColor, size: parent.frameObj.size, inset: parent.frameObj.inset,
+                    offset: parent.frameObj.offset, borderRadius: parent.frameObj.radius, frameLineStyle: parent.toPascalCase(parent.frameObj.border),
+                    lineCount: parent.frameObj.amount };
+                var temp = parent.frameObj.size;
+                var object = { currObj: {} };
+                parent.notify('filter', { prop: 'getCurrentObj', onPropertyChange: false, value: { object: object } });
+                parent.frameObj.size = parseInt(args.item.text, 10);
+                parent.notify('draw', { prop: 'triggerFrameChange', value: { prevFrameSettings: prevFrameSettings, obj: obj } });
+                if (obj['frameChangeEventArgs'] && !obj['frameChangeEventArgs'].cancel) {
+                    parent.notify('undo-redo', { prop: 'updateUndoRedoColl', onPropertyChange: false, value: {
+                            operation: 'frame', previousObj: object['currObj'], previousObjColl: object['currObj']['objColl'],
+                            previousPointColl: object['currObj']['pointColl'], previousSelPointColl: object['currObj']['selPointColl'],
+                            previousCropObj: extend({}, parent.cropObj, {}, true), previousText: null, currentText: null,
+                            previousFilter: null, isCircleCrop: null
+                        } });
+                    parent.notify('draw', { prop: 'render-image', value: { isMouseWheel: null, isPreventClearRect: null, isFrame: true } });
+                    drpDownBtn.content = args.item.text;
+                }
+                else {
+                    parent.frameObj.size = temp;
+                }
+                if (Browser.isDevice) {
+                    if (document.getElementById(parent.element.id + '_bottomToolbar')) {
+                        /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
+                        var toolbar_10 = getComponent(parent.element.id + '_bottomToolbar', 'toolbar');
+                        toolbar_10.refreshOverflow();
+                    }
+                }
+                else {
+                    if (document.getElementById(parent.element.id + '_toolbar')) {
+                        /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
+                        var toolbar_11 = getComponent(parent.element.id + '_toolbar', 'toolbar');
+                        toolbar_11.refreshOverflow();
+                    }
+                }
+            }
+        });
+        // Render initialized DropDownButton.
+        drpDownBtn.appendTo('#' + parent.element.id + '_frameSizeBtn');
+    };
+    ToolbarModule.prototype.createFrameInset = function () {
+        var parent = this.parent;
+        var prevFrameSettings;
+        var obj = { frameChangeEventArgs: null };
+        var strokeWidthItems = [
+            { id: '1', text: this.l10n.getConstant('20') },
+            { id: '2', text: this.l10n.getConstant('40') },
+            { id: '3', text: this.l10n.getConstant('60') },
+            { id: '4', text: this.l10n.getConstant('80') },
+            { id: '5', text: this.l10n.getConstant('100') }
+        ];
+        var strokeWidthBtn = document.getElementById(parent.element.id + '_frameInsetBtn');
+        var spanElem = document.createElement('span');
+        spanElem.innerHTML = this.l10n.getConstant(parent.frameObj.inset.toString());
+        spanElem.className = 'e-frame-inset';
+        strokeWidthBtn.appendChild(spanElem);
+        // Initialize the DropDownButton component.
+        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 activeBtn = drpDownBtn.element.childNodes[0].textContent;
+                if (activeBtn !== '') {
+                    args.element.querySelector('[aria-label = ' + '"' + activeBtn + '"' + ']').classList.add('e-selected-btn');
+                }
+            },
+            select: function (args) {
+                prevFrameSettings = { type: parent.toPascalCase(parent.frameObj.type), color: parent.frameObj.color,
+                    gradientColor: parent.frameObj.gradientColor, size: parent.frameObj.size, inset: parent.frameObj.inset,
+                    offset: parent.frameObj.offset, borderRadius: parent.frameObj.radius, frameLineStyle: parent.toPascalCase(parent.frameObj.border),
+                    lineCount: parent.frameObj.amount };
+                var temp = parent.frameObj.inset;
+                var object = { currObj: {} };
+                parent.notify('filter', { prop: 'getCurrentObj', onPropertyChange: false, value: { object: object } });
+                parent.frameObj.inset = parseInt(args.item.text, 10);
+                parent.notify('draw', { prop: 'triggerFrameChange', value: { prevFrameSettings: prevFrameSettings, obj: obj } });
+                if (obj['frameChangeEventArgs'] && !obj['frameChangeEventArgs'].cancel) {
+                    parent.notify('undo-redo', { prop: 'updateUndoRedoColl', onPropertyChange: false, value: {
+                            operation: 'frame', previousObj: object['currObj'], previousObjColl: object['currObj']['objColl'],
+                            previousPointColl: object['currObj']['pointColl'], previousSelPointColl: object['currObj']['selPointColl'],
+                            previousCropObj: extend({}, parent.cropObj, {}, true), previousText: null, currentText: null,
+                            previousFilter: null, isCircleCrop: null
+                        } });
+                    parent.notify('draw', { prop: 'render-image', value: { isMouseWheel: null, isPreventClearRect: null, isFrame: true } });
+                    drpDownBtn.content = args.item.text;
+                }
+                else {
+                    parent.frameObj.inset = temp;
+                }
+                if (Browser.isDevice) {
+                    if (document.getElementById(parent.element.id + '_bottomToolbar')) {
+                        /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
+                        var toolbar_12 = getComponent(parent.element.id + '_bottomToolbar', 'toolbar');
+                        toolbar_12.refreshOverflow();
+                    }
+                }
+                else {
+                    if (document.getElementById(parent.element.id + '_toolbar')) {
+                        /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
+                        var toolbar_13 = getComponent(parent.element.id + '_toolbar', 'toolbar');
+                        toolbar_13.refreshOverflow();
+                    }
+                }
+            }
+        });
+        // Render initialized DropDownButton.
+        drpDownBtn.appendTo('#' + parent.element.id + '_frameInsetBtn');
+    };
+    ToolbarModule.prototype.createFrameOffset = function () {
+        var parent = this.parent;
+        var prevFrameSettings;
+        var obj = { frameChangeEventArgs: null };
+        var strokeWidthItems = [
+            { id: '1', text: this.l10n.getConstant('20') },
+            { id: '2', text: this.l10n.getConstant('40') },
+            { id: '3', text: this.l10n.getConstant('60') },
+            { id: '4', text: this.l10n.getConstant('80') },
+            { id: '5', text: this.l10n.getConstant('100') }
+        ];
+        var strokeWidthBtn = document.getElementById(parent.element.id + '_frameOffsetBtn');
+        var spanElem = document.createElement('span');
+        spanElem.innerHTML = this.l10n.getConstant(parent.frameObj.offset.toString());
+        spanElem.className = 'e-frame-offset';
+        strokeWidthBtn.appendChild(spanElem);
+        // Initialize the DropDownButton component.
+        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 activeBtn = drpDownBtn.element.childNodes[0].textContent;
+                if (activeBtn !== '') {
+                    args.element.querySelector('[aria-label = ' + '"' + activeBtn + '"' + ']').classList.add('e-selected-btn');
+                }
+            },
+            select: function (args) {
+                prevFrameSettings = { type: parent.toPascalCase(parent.frameObj.type), color: parent.frameObj.color,
+                    gradientColor: parent.frameObj.gradientColor, size: parent.frameObj.size, inset: parent.frameObj.inset,
+                    offset: parent.frameObj.offset, borderRadius: parent.frameObj.radius, frameLineStyle: parent.toPascalCase(parent.frameObj.border),
+                    lineCount: parent.frameObj.amount };
+                var temp = parent.frameObj.offset;
+                var object = { currObj: {} };
+                parent.notify('filter', { prop: 'getCurrentObj', onPropertyChange: false, value: { object: object } });
+                parent.frameObj.offset = parseInt(args.item.text, 10);
+                parent.notify('draw', { prop: 'triggerFrameChange', value: { prevFrameSettings: prevFrameSettings, obj: obj } });
+                if (obj['frameChangeEventArgs'] && !obj['frameChangeEventArgs'].cancel) {
+                    parent.notify('undo-redo', { prop: 'updateUndoRedoColl', onPropertyChange: false, value: {
+                            operation: 'frame', previousObj: object['currObj'], previousObjColl: object['currObj']['objColl'],
+                            previousPointColl: object['currObj']['pointColl'], previousSelPointColl: object['currObj']['selPointColl'],
+                            previousCropObj: extend({}, parent.cropObj, {}, true), previousText: null, currentText: null,
+                            previousFilter: null, isCircleCrop: null
+                        } });
+                    parent.notify('draw', { prop: 'render-image', value: { isMouseWheel: null, isPreventClearRect: null, isFrame: true } });
+                    drpDownBtn.content = args.item.text;
+                }
+                else {
+                    parent.frameObj.offset = temp;
+                }
+                if (Browser.isDevice) {
+                    if (document.getElementById(parent.element.id + '_bottomToolbar')) {
+                        /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
+                        var toolbar_14 = getComponent(parent.element.id + '_bottomToolbar', 'toolbar');
+                        toolbar_14.refreshOverflow();
+                    }
+                }
+                else {
+                    if (document.getElementById(parent.element.id + '_toolbar')) {
+                        /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
+                        var toolbar_15 = getComponent(parent.element.id + '_toolbar', 'toolbar');
+                        toolbar_15.refreshOverflow();
+                    }
+                }
+            }
+        });
+        // Render initialized DropDownButton.
+        drpDownBtn.appendTo('#' + parent.element.id + '_frameOffsetBtn');
+    };
+    ToolbarModule.prototype.createFrameRadius = function () {
+        var parent = this.parent;
+        var prevFrameSettings;
+        var obj = { frameChangeEventArgs: null };
+        var strokeWidthItems = [
+            { id: '1', text: this.l10n.getConstant('0') },
+            { id: '2', text: this.l10n.getConstant('20') },
+            { id: '3', text: this.l10n.getConstant('40') },
+            { id: '4', text: this.l10n.getConstant('60') },
+            { id: '5', text: this.l10n.getConstant('80') },
+            { id: '6', text: this.l10n.getConstant('100') }
+        ];
+        var strokeWidthBtn = document.getElementById(parent.element.id + '_frameRadiusBtn');
+        var spanElem = document.createElement('span');
+        spanElem.innerHTML = this.l10n.getConstant(parent.frameObj.radius.toString());
+        spanElem.className = 'e-frame-radius';
+        strokeWidthBtn.appendChild(spanElem);
+        // Initialize the DropDownButton component.
+        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 activeBtn = drpDownBtn.element.childNodes[0].textContent;
+                if (activeBtn !== '') {
+                    args.element.querySelector('[aria-label = ' + '"' + activeBtn + '"' + ']').classList.add('e-selected-btn');
+                }
+            },
+            select: function (args) {
+                prevFrameSettings = { type: parent.toPascalCase(parent.frameObj.type), color: parent.frameObj.color,
+                    gradientColor: parent.frameObj.gradientColor, size: parent.frameObj.size, inset: parent.frameObj.inset,
+                    offset: parent.frameObj.offset, borderRadius: parent.frameObj.radius, frameLineStyle: parent.toPascalCase(parent.frameObj.border),
+                    lineCount: parent.frameObj.amount };
+                var temp = parent.frameObj.radius;
+                var object = { currObj: {} };
+                parent.notify('filter', { prop: 'getCurrentObj', onPropertyChange: false, value: { object: object } });
+                parent.frameObj.radius = parseInt(args.item.text, 10);
+                parent.notify('draw', { prop: 'triggerFrameChange', value: { prevFrameSettings: prevFrameSettings, obj: obj } });
+                if (obj['frameChangeEventArgs'] && !obj['frameChangeEventArgs'].cancel) {
+                    parent.notify('undo-redo', { prop: 'updateUndoRedoColl', onPropertyChange: false, value: {
+                            operation: 'frame', previousObj: object['currObj'], previousObjColl: object['currObj']['objColl'],
+                            previousPointColl: object['currObj']['pointColl'], previousSelPointColl: object['currObj']['selPointColl'],
+                            previousCropObj: extend({}, parent.cropObj, {}, true), previousText: null, currentText: null,
+                            previousFilter: null, isCircleCrop: null
+                        } });
+                    parent.notify('draw', { prop: 'render-image', value: { isMouseWheel: null, isPreventClearRect: null, isFrame: true } });
+                    drpDownBtn.content = args.item.text;
+                }
+                else {
+                    parent.frameObj.radius = temp;
+                }
+                if (Browser.isDevice) {
+                    if (document.getElementById(parent.element.id + '_bottomToolbar')) {
+                        /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
+                        var toolbar_16 = getComponent(parent.element.id + '_bottomToolbar', 'toolbar');
+                        toolbar_16.refreshOverflow();
+                    }
+                }
+                else {
+                    if (document.getElementById(parent.element.id + '_toolbar')) {
+                        /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
+                        var toolbar_17 = getComponent(parent.element.id + '_toolbar', 'toolbar');
+                        toolbar_17.refreshOverflow();
+                    }
+                }
+            }
+        });
+        // Render initialized DropDownButton.
+        drpDownBtn.appendTo('#' + parent.element.id + '_frameRadiusBtn');
+    };
+    ToolbarModule.prototype.createFrameAmount = function () {
+        var parent = this.parent;
+        var prevFrameSettings;
+        var obj = { frameChangeEventArgs: null };
+        var strokeWidthItems = [
+            { id: '1', text: this.l10n.getConstant('1') },
+            { id: '2', text: this.l10n.getConstant('2') },
+            { id: '3', text: this.l10n.getConstant('3') },
+            { id: '4', text: this.l10n.getConstant('4') },
+            { id: '5', text: this.l10n.getConstant('5') }
+        ];
+        var strokeWidthBtn = document.getElementById(parent.element.id + '_frameAmountBtn');
+        var spanElem = document.createElement('span');
+        spanElem.innerHTML = this.l10n.getConstant(parent.frameObj.amount.toString());
+        spanElem.className = 'e-frame-amount';
+        strokeWidthBtn.appendChild(spanElem);
+        // Initialize the DropDownButton component.
+        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 activeBtn = drpDownBtn.element.childNodes[0].textContent;
+                if (activeBtn !== '') {
+                    args.element.querySelector('[aria-label = ' + '"' + activeBtn + '"' + ']').classList.add('e-selected-btn');
+                }
+            },
+            select: function (args) {
+                prevFrameSettings = { type: parent.toPascalCase(parent.frameObj.type), color: parent.frameObj.color,
+                    gradientColor: parent.frameObj.gradientColor, size: parent.frameObj.size, inset: parent.frameObj.inset,
+                    offset: parent.frameObj.offset, borderRadius: parent.frameObj.radius, frameLineStyle: parent.toPascalCase(parent.frameObj.border),
+                    lineCount: parent.frameObj.amount };
+                var temp = parent.frameObj.amount;
+                var object = { currObj: {} };
+                parent.notify('filter', { prop: 'getCurrentObj', onPropertyChange: false, value: { object: object } });
+                parent.frameObj.amount = parseInt(args.item.text, 10);
+                parent.notify('draw', { prop: 'triggerFrameChange', value: { prevFrameSettings: prevFrameSettings, obj: obj } });
+                if (obj['frameChangeEventArgs'] && !obj['frameChangeEventArgs'].cancel) {
+                    parent.notify('undo-redo', { prop: 'updateUndoRedoColl', onPropertyChange: false, value: {
+                            operation: 'frame', previousObj: object['currObj'], previousObjColl: object['currObj']['objColl'],
+                            previousPointColl: object['currObj']['pointColl'], previousSelPointColl: object['currObj']['selPointColl'],
+                            previousCropObj: extend({}, parent.cropObj, {}, true), previousText: null, currentText: null,
+                            previousFilter: null, isCircleCrop: null
+                        } });
+                    parent.notify('draw', { prop: 'render-image', value: { isMouseWheel: null, isPreventClearRect: null, isFrame: true } });
+                    drpDownBtn.content = args.item.text;
+                }
+                else {
+                    parent.frameObj.amount = temp;
+                }
+                if (Browser.isDevice) {
+                    if (document.getElementById(parent.element.id + '_bottomToolbar')) {
+                        /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
+                        var toolbar_18 = getComponent(parent.element.id + '_bottomToolbar', 'toolbar');
+                        toolbar_18.refreshOverflow();
+                    }
+                }
+                else {
+                    if (document.getElementById(parent.element.id + '_toolbar')) {
+                        /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
+                        var toolbar_19 = getComponent(parent.element.id + '_toolbar', 'toolbar');
+                        toolbar_19.refreshOverflow();
+                    }
+                }
+            }
+        });
+        // Render initialized DropDownButton.
+        drpDownBtn.appendTo('#' + parent.element.id + '_frameAmountBtn');
+    };
+    ToolbarModule.prototype.createFrameBorder = function () {
+        var parent = this.parent;
+        var prevFrameSettings;
+        var obj = { frameChangeEventArgs: null };
+        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 spanElem = document.createElement('span');
+        spanElem.innerHTML = this.l10n.getConstant(parent.toPascalCase(parent.frameObj.border));
+        spanElem.className = 'e-frame-border';
+        strokeWidthBtn.appendChild(spanElem);
+        // Initialize the DropDownButton component.
+        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 activeBtn = drpDownBtn.element.childNodes[0].textContent;
+                if (activeBtn !== '') {
+                    args.element.querySelector('[aria-label = ' + '"' + activeBtn + '"' + ']').classList.add('e-selected-btn');
+                }
+            },
+            select: function (args) {
+                prevFrameSettings = { type: parent.toPascalCase(parent.frameObj.type), color: parent.frameObj.color,
+                    gradientColor: parent.frameObj.gradientColor, size: parent.frameObj.size, inset: parent.frameObj.inset,
+                    offset: parent.frameObj.offset, borderRadius: parent.frameObj.radius, frameLineStyle: parent.toPascalCase(parent.frameObj.border),
+                    lineCount: parent.frameObj.amount };
+                var temp = parent.frameObj.border;
+                var object = { currObj: {} };
+                parent.notify('filter', { prop: 'getCurrentObj', onPropertyChange: false, value: { object: object } });
+                parent.frameObj.border = args.item.text.toLowerCase();
+                parent.notify('draw', { prop: 'triggerFrameChange', value: { prevFrameSettings: prevFrameSettings, obj: obj } });
+                if (obj['frameChangeEventArgs'] && !obj['frameChangeEventArgs'].cancel) {
+                    parent.notify('undo-redo', { prop: 'updateUndoRedoColl', onPropertyChange: false, value: {
+                            operation: 'frame', previousObj: object['currObj'], previousObjColl: object['currObj']['objColl'],
+                            previousPointColl: object['currObj']['pointColl'], previousSelPointColl: object['currObj']['selPointColl'],
+                            previousCropObj: extend({}, parent.cropObj, {}, true), previousText: null, currentText: null,
+                            previousFilter: null, isCircleCrop: null
+                        } });
+                    parent.notify('draw', { prop: 'render-image', value: { isMouseWheel: null, isPreventClearRect: null, isFrame: true } });
+                    drpDownBtn.content = args.item.text;
+                }
+                else {
+                    parent.frameObj.border = temp;
+                }
+                if (Browser.isDevice) {
+                    if (document.getElementById(parent.element.id + '_bottomToolbar')) {
+                        /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
+                        var toolbar_20 = getComponent(parent.element.id + '_bottomToolbar', 'toolbar');
+                        toolbar_20.refreshOverflow();
+                    }
+                }
+                else {
+                    if (document.getElementById(parent.element.id + '_toolbar')) {
+                        /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
+                        var toolbar_21 = getComponent(parent.element.id + '_toolbar', 'toolbar');
+                        toolbar_21.refreshOverflow();
+                    }
+                }
+            }
+        });
+        // Render initialized DropDownButton.
+        drpDownBtn.appendTo('#' + parent.element.id + '_frameBorderBtn');
+    };
     ToolbarModule.prototype.initFilterToolbarItem = function () {
         var _this = this;
         var parent = this.parent;
@@ -2112,6 +3060,13 @@ var ToolbarModule = /** @class */ (function () {
         });
         toolbar.appendTo('#' + parent.element.id + '_contextualToolbar');
     };
+    ToolbarModule.prototype.drawDashedLine = function (ctx) {
+        ctx.beginPath();
+        ctx.setLineDash([5]);
+        ctx.rect(10, 10, 280, 130);
+        ctx.stroke();
+        ctx.closePath();
+    };
     ToolbarModule.prototype.createCanvasFilter = function () {
         var parent = this.parent;
         showSpinner(parent.element);
@@ -2148,6 +3103,9 @@ var ToolbarModule = /** @class */ (function () {
         var args = { cancel: false, toolbarItems: [] };
         var toolbarItems = [];
         if (isNullOrUndefined(isPenEdit)) {
+            if (parent.activeObj.shape === 'image') {
+                toolbarItems.push('Flip');
+            }
             toolbarItems.push('Clone');
             toolbarItems.push('Delete');
             if (parent.activeObj.shape === 'text') {
@@ -2180,6 +3138,12 @@ var ToolbarModule = /** @class */ (function () {
                         orgToolbarItems.push({ id: parent.element.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',
+                            tooltipText: this.l10n.getConstant('HorizontalFlip'), align: 'Left' });
+                        orgToolbarItems.push({ id: parent.element.id + '_vFlip', prefixIcon: 'e-icons e-vertical-flip',
+                            tooltipText: this.l10n.getConstant('VerticalFlip'), align: 'Left' });
+                        break;
                     default:
                         orgToolbarItems.push(args.toolbarItems[i]);
                         break;
@@ -2207,6 +3171,7 @@ var ToolbarModule = /** @class */ (function () {
                 });
                 toolbarObj.appendTo('#' + parent.element.id + '_quickAccessToolbar');
             }
+            var height = this.toolbarHeight && this.toolbarHeight !== 0 ? this.toolbarHeight : qtArea.clientHeight;
             if (isNullOrUndefined(isPenEdit)) {
                 qtArea.style.width = 'auto';
                 parent.activeObj.activePoint.width = Math.abs(parent.activeObj.activePoint.width);
@@ -2232,11 +3197,15 @@ var ToolbarModule = /** @class */ (function () {
                     width = path.width;
                 }
                 qtArea.style.left = (x + (width / 2)) - (items.length * 25) + 'px';
-                if (y - 60 < parent.img.destTop) {
+                if (parseFloat(qtArea.style.left) + (qtArea.clientWidth / 2) !== x + (width / 2)) {
+                    var diff = (x + (width / 2)) - (parseFloat(qtArea.style.left) + (qtArea.clientWidth / 2));
+                    qtArea.style.left = parseFloat(qtArea.style.left) + diff + 'px';
+                }
+                if (y - (height + (height / 1.5)) < parent.img.destTop) {
                     qtArea.style.top = parent.img.destTop + 'px';
                 }
                 else {
-                    qtArea.style.top = y - 60 + 'px';
+                    qtArea.style.top = y - (height + (height / 1.5)) + 'px';
                 }
             }
             else if (isPenEdit) {
@@ -2248,11 +3217,11 @@ var ToolbarModule = /** @class */ (function () {
                 var point = obj['activePoint'];
                 qtArea.style.width = 'auto';
                 qtArea.style.left = (point.startX + (point.width / 2)) - (items.length * 27) + 'px';
-                if (point.startY - 60 < parent.img.destTop) {
+                if (point.startY - (height + (height / 1.5)) < parent.img.destTop) {
                     qtArea.style.top = parent.img.destTop + 'px';
                 }
                 else {
-                    qtArea.style.top = point.startY - 60 + 'px';
+                    qtArea.style.top = point.startY - (height + (height / 1.5)) + 'px';
                 }
             }
         }
@@ -2339,14 +3308,20 @@ var ToolbarModule = /** @class */ (function () {
             parent.notify('selection', { prop: 'getTempActObj', onPropertyChange: false, value: { obj: object } });
             object['tempObj']['activePoint']['height'] = Math.abs(object['tempObj']['activePoint']['height']);
             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()) {
                 case 'duplicate':
                     if (!parent.element.querySelector('#' + parent.element.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 } });
                         }
@@ -2372,19 +3347,47 @@ var ToolbarModule = /** @class */ (function () {
                                 duplicateObj.pointColl[i].y -= 10;
                             }
                         }
-                        parent.activeObj = duplicateObj;
+                        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.updateTrianglePoints(parent.activeObj); Invoke
-                        parent.notify('draw', { prop: 'drawObject', onPropertyChange: false, value: { canvas: 'duplicate', 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();
                     }
                     break;
                 case 'remove':
                     if (!parent.element.querySelector('#' + parent.element.id + '_remove').classList.contains('e-disabled')) {
+                        this.refreshSlider();
                         parent.notify('selection', { prop: 'deleteItem', onPropertyChange: false });
                     }
                     break;
@@ -2414,6 +3417,25 @@ var ToolbarModule = /** @class */ (function () {
                         }
                     }
                     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());
+                    }
+                    break;
+                case 'hflip':
+                    if (!parent.element.querySelector('#' + parent.element.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')) {
+                        ctx = parent.activeObj.imageCanvas.getContext('2d');
+                        parent.verticalFlip(ctx);
+                    }
+                    break;
             }
         }
         if (isNullOrUndefined(isContextualToolbar)) {
@@ -2424,7 +3446,7 @@ var ToolbarModule = /** @class */ (function () {
         var parent = this.parent;
         var isContextualToolbar = false;
         var isFilterFinetune = false;
-        if (parent.element.querySelector('.e-contextual-toolbar-wrapper')) {
+        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;
             }
@@ -2432,7 +3454,8 @@ var ToolbarModule = /** @class */ (function () {
         }
         if (args.item) {
             var type = args.item.id.replace(parent.element.id + '_', '').toLowerCase();
-            if (type === 'duplicate' || type === 'remove' || type === 'edittext') {
+            if (type === 'duplicate' || type === 'remove' || type === 'edittext' ||
+                type === 'hflip' || type === 'vflip' || type === 'rotleft' || type === 'rotright') {
                 this.quickAccessToolbarClicked(args, true);
                 parent.trigger('toolbarItemClicked', args);
             }
@@ -2519,6 +3542,11 @@ var ToolbarModule = /** @class */ (function () {
                     break;
                 case 'reset':
                     parent.reset();
+                    this.imageHeight = null;
+                    this.imageWidth = null;
+                    this.parent.aspectHeight = null;
+                    this.parent.aspectWidth = null;
+                    this.isAspectRatio = true;
                     this.currentToolbar = 'main';
                     break;
                 case 'undo':
@@ -2527,6 +3555,25 @@ var ToolbarModule = /** @class */ (function () {
                 case 'redo':
                     parent.notify('undo-redo', { prop: 'call-redo' });
                     break;
+                case 'aspectratio':
+                    if (!parent.isCircleCrop && (isNullOrUndefined(parent.currSelectionPoint)) ||
+                        (parent.currSelectionPoint && parent.currSelectionPoint.shape !== 'crop-circle')) {
+                        parent.resizeSrc = { startX: parent.img.srcLeft, startY: parent.img.srcTop, width: parent.img.srcWidth,
+                            height: parent.img.srcHeight };
+                        this.refreshToolbar('resize');
+                    }
+                    break;
+                case 'nonaspectratio':
+                    parent.resizeSrc = { startX: parent.img.srcLeft, startY: parent.img.srcTop, width: parent.img.srcWidth,
+                        height: parent.img.srcHeight };
+                    this.refreshToolbar('resize');
+                    break;
+                case 'resize':
+                    if (parent.currObjType.isFiltered) {
+                        parent.okBtn();
+                    }
+                    this.resizeClick();
+                    break;
                 case 'adjustment':
                     if (!isDisabledAdjustment) {
                         if (parent.currObjType.isFiltered) {
@@ -2622,6 +3669,9 @@ var ToolbarModule = /** @class */ (function () {
                     }
                     break;
                 case 'croptransform':
+                    if (parent.currObjType.isFiltered) {
+                        parent.okBtn();
+                    }
                     this.refreshToolbar('croptransform');
                     break;
                 case 'rotateleft':
@@ -2642,8 +3692,114 @@ var ToolbarModule = /** @class */ (function () {
                     parent.element.querySelector('#' + parent.element.id + '_saveBtn').classList.add('e-hide');
                     parent.element.querySelector('#' + parent.element.id + '_saveBtn').click();
                     break;
+                case 'transparency':
+                    this.updateContextualToolbar('transparency', 'transparency');
+                    break;
+                case 'frame':
+                    this.frameToolbarClick();
+                    break;
+                case 'none':
+                case 'mat':
+                case 'bevel':
+                case 'line':
+                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');
+                    }
+                    parent.frameObj.type = type;
+                    parent.frameObj.size = 20;
+                    parent.frameObj.inset = 20;
+                    parent.frameObj.radius = 0;
+                    parent.frameObj.amount = 1;
+                    if (type === 'inset') {
+                        parent.frameObj.offset = 60;
+                    }
+                    else {
+                        parent.frameObj.offset = 20;
+                    }
+                    this.refreshToolbar('frame');
+                    parent.notify('draw', { prop: 'render-image', value: { isMouseWheel: null, isPreventClearRect: null, isFrame: true } });
+                    break;
+            }
+        }
+    };
+    ToolbarModule.prototype.frameToolbarClick = function () {
+        var parent = this.parent;
+        var frame = document.querySelector('#' + parent.element.id + '_frame');
+        var zoom;
+        var frameObj;
+        var tempFrameObj;
+        if (parent.currObjType.isFiltered) {
+            parent.okBtn();
+        }
+        if (frame && !frame.classList.contains('e-disabled')) {
+            zoom = parent.transform.zoomFactor;
+            parent.frameDestPoints = extend({}, parent.img, {}, true);
+            if (isNullOrUndefined(parent.cxtTbarHeight)) {
+                frameObj = extend({}, parent.frameObj, {}, true);
+                tempFrameObj = extend({}, parent.tempFrameObj, {}, true);
+                this.callFrameToolbar();
+                parent.frameObj.type = 'mat';
+                this.callFrameToolbar();
+                parent.cxtTbarHeight = parent.element.querySelector('#' + parent.element.id + '_customizeWrapper').clientHeight;
+                parent.frameObj = frameObj;
+                parent.tempFrameObj = tempFrameObj;
+            }
+            this.zoomToFrameRange();
+            parent.tempFrameZoomLevel = zoom;
+            if (Browser.isDevice) {
+                parent.img.destTop -= (parent.cxtTbarHeight / 2);
+            }
+            else {
+                parent.img.destTop += (parent.cxtTbarHeight / 2);
             }
+            this.callFrameToolbar();
+        }
+    };
+    ToolbarModule.prototype.zoomToFrameRange = function () {
+        var parent = this.parent;
+        this.isFrameToolbar = false;
+        parent.notify('transform', { prop: 'resetZoom', onPropertyChange: false });
+        while (true) {
+            if (this.toolbarHeight + parent.img.destTop >= (this.toolbarHeight + parent.cxtTbarHeight)) {
+                break;
+            }
+            parent.notify('transform', { prop: 'zoomAction', onPropertyChange: false,
+                value: { zoomFactor: -.1, zoomPoint: null, isResize: true } });
+        }
+        this.isFrameToolbar = true;
+    };
+    ToolbarModule.prototype.resizeClick = function () {
+        this.parent.upperCanvas.style.cursor = 'default';
+        this.parent.notify('transform', { prop: 'updateResize', value: { bool: false } });
+        if (this.isAspectRatio) {
+            this.isAspectRatio = false;
         }
+        else {
+            this.isAspectRatio = true;
+        }
+        this.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 } });
+        if (undoRedoObj['appliedUndoRedoColl']['length'] === 0) {
+            var object = { currObj: {} };
+            parent.notify('filter', { prop: 'getCurrentObj', onPropertyChange: false, value: { object: object } });
+            parent.notify('undo-redo', { prop: 'updateUndoRedoColl', onPropertyChange: false, value: {
+                    operation: 'frame', previousObj: object['currObj'], previousObjColl: object['currObj']['objColl'],
+                    previousPointColl: object['currObj']['pointColl'], previousSelPointColl: object['currObj']['selPointColl'],
+                    previousCropObj: extend({}, parent.cropObj, {}, true), previousText: null, currentText: null,
+                    previousFilter: null, isCircleCrop: null
+                } });
+        }
+        this.refreshToolbar('frame');
     };
     ToolbarModule.prototype.contextualToolbarClicked = function (args) {
         var parent = this.parent;
@@ -2676,6 +3832,9 @@ 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) {
@@ -2700,12 +3859,15 @@ var ToolbarModule = /** @class */ (function () {
             }
             parent.notify('draw', { prop: 'resetCurrentSelectionPoint' });
             parent.notify('transform', { prop: 'zoomAction', onPropertyChange: false,
-                value: { zoomFactor: .1, zoomPoint: null } });
+                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) {
@@ -2730,7 +3892,7 @@ var ToolbarModule = /** @class */ (function () {
             }
             parent.notify('draw', { prop: 'resetCurrentSelectionPoint' });
             parent.notify('transform', { prop: 'zoomAction', onPropertyChange: false,
-                value: { zoomFactor: -.1, zoomPoint: null } });
+                value: { zoomFactor: -.1, zoomPoint: null, isResize: null } });
         }
     };
     ToolbarModule.prototype.zoomInBtnMouseDownHandler = function (e) {
@@ -2780,11 +3942,20 @@ var ToolbarModule = /** @class */ (function () {
                 id: parent.element.id + '_headWrapper',
                 styles: 'position: relative'
             }));
-            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;'
-            }));
+            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';
@@ -2852,6 +4023,11 @@ var ToolbarModule = /** @class */ (function () {
             }
             slider = this.createSlider(min, max, value, type);
         }
+        else if (type === 'transparency') {
+            min = 0;
+            max = 100;
+            slider = this.createSlider(min, max, value, type);
+        }
         slider.appendTo('#' + parent.element.id + '_sliderWrapper');
         sliderWrapper.style.left = (parseFloat(canvasWrapper.style.width) - parseFloat(slider.width)) / 2 + 'px';
     };
@@ -2868,8 +4044,15 @@ var ToolbarModule = /** @class */ (function () {
             width: Browser.isDevice ? '200px' : '300px',
             cssClass: 'e-slider',
             change: function (args) {
-                parent.setCurrAdjustmentValue(type, args.value);
-                _this.enableDisableTbrBtn();
+                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' } });
+                }
+                else {
+                    parent.setCurrAdjustmentValue(type, args.value);
+                    _this.enableDisableTbrBtn();
+                }
             }
         });
     };
@@ -2921,6 +4104,25 @@ var ToolbarModule = /** @class */ (function () {
             sliderWrapper.remove();
         }
     };
+    ToolbarModule.prototype.unselectFrameBtn = function () {
+        var parent = this.parent;
+        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'
+        ];
+        for (var _i = 0, selectors_2 = selectors; _i < selectors_2.length; _i++) {
+            var selector = selectors_2[_i];
+            var element = document.querySelector(selector);
+            if (element.classList.contains('e-selected-btn')) {
+                element.classList.remove('e-selected-btn');
+                break;
+            }
+        }
+    };
     ToolbarModule.prototype.updateToolbarItems = function () {
         var parent = this.parent;
         if (!parent.isImageLoaded) {