@syncfusion/ej2-image-editor 25.2.4 → 26.1.38

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

@@ -2,10 +2,12 @@ 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 { Button } from '@syncfusion/ej2-buttons';
 import { DropDownButton } from '@syncfusion/ej2-splitbuttons';
-import { ColorPicker, Uploader, Slider } from '@syncfusion/ej2-inputs';
+import { ColorPicker, Uploader, Slider, TextBox } from '@syncfusion/ej2-inputs';
 import { ZoomTrigger, ShapeType } from '../index';
-import { hideSpinner, showSpinner } from '@syncfusion/ej2-popups';
+import { Dialog, hideSpinner, showSpinner } from '@syncfusion/ej2-popups';
+import { addClass, removeClass } from '@syncfusion/ej2-base';
 var ToolbarModule = /** @class */ (function () {
     function ToolbarModule(parent) {
         this.defToolbarItems = [];
@@ -30,6 +32,9 @@ var ToolbarModule = /** @class */ (function () {
                 '#0277bd', '#00838f', '#00695c', '#f9a825', '#4d4d4d', '#b71c1c', '#880e4f', '#4a148c', '#311b92', '#0d47a1',
                 '#01579b', '#006064', '#004d40', '#f57f17']
         };
+        this.isSlider = false;
+        this.currentQuality = 1;
+        this.imageQuality = 'highest';
         this.parent = parent;
         this.addEventListener();
         this.initLocale();
@@ -174,7 +179,23 @@ var ToolbarModule = /** @class */ (function () {
             ImageErrorDialogContent: 'Please select only one image to open.',
             Straighten: 'Straighten',
             NoOutline: 'No outline',
-            DlgOK: 'OK'
+            DlgOK: 'OK',
+            SaveAs: 'Save As',
+            ImageName: 'Image name',
+            Format: 'Format',
+            Quality: 'Quality',
+            Download: 'Download',
+            Close: 'Close',
+            ImageSize: 'Image Size',
+            QualityInfo: 'The image quality option is only available for JPEG format',
+            Good: 'Good',
+            Great: 'Great',
+            Highest: 'Highest',
+            BringForward: 'Bring Forward',
+            SendBackward: 'Send Backward',
+            SendToBack: 'Send to Back',
+            BringToFront: 'Bring to Front',
+            ZOrder: 'Z-Order'
         };
         this.l10n = new L10n('image-editor', this.defaultLocale, this.parent.locale);
     };
@@ -316,6 +337,9 @@ var ToolbarModule = /** @class */ (function () {
             case 'editText':
                 this.editText();
                 break;
+            case 'setInitialSize':
+                this.initialSize = Number(args.value['value']);
+                break;
         }
     };
     ToolbarModule.prototype.updatePrivateVariables = function () {
@@ -524,7 +548,6 @@ var ToolbarModule = /** @class */ (function () {
                             _this.renderAnnotationBtn();
                         }
                         _this.wireZoomBtnEvents();
-                        _this.renderSaveBtn();
                         parent.trigger('toolbarCreated', { toolbarType: 'main' });
                     }
                 });
@@ -576,11 +599,11 @@ var ToolbarModule = /** @class */ (function () {
         var toolbarItems = [];
         if (!isOkBtn || isResize) {
             if (isNullOrUndefined(parent.toolbar) || (parent.toolbar && parent.toolbar.indexOf('Open') > -1)) {
-                toolbarItems.push({ id: parent.element.id + '_upload', cssClass: 'e-image-upload', align: 'Left', type: 'Input', template: new Uploader({ allowedExtensions: '.jpg, .jpeg, .png,.svg', multiple: false }) });
+                toolbarItems.push({ id: id + '_upload', cssClass: 'e-image-upload', align: 'Left', type: 'Input', template: new Uploader({ allowedExtensions: '.jpg, .jpeg, .png,.svg', multiple: false }) });
                 toolbarItems.push({ visible: false, cssClass: 'e-image-position e-btn e-flat', tooltipText: this.l10n.getConstant('Browse'), align: 'Left' });
             }
             else if (Browser.isDevice && (parent.toolbar && parent.toolbar.indexOf('Open') === -1)) {
-                toolbarItems.push({ visible: false, id: parent.element.id + '_upload', cssClass: 'e-image-upload', align: 'Left', type: 'Input', template: new Uploader({ allowedExtensions: '.jpg, .jpeg, .png,.svg', multiple: false }) });
+                toolbarItems.push({ visible: false, id: id + '_upload', cssClass: 'e-image-upload', align: 'Left', type: 'Input', template: new Uploader({ allowedExtensions: '.jpg, .jpeg, .png,.svg', multiple: false }) });
                 toolbarItems.push({ visible: false, cssClass: 'e-image-position e-btn e-flat', tooltipText: this.l10n.getConstant('Browse'), align: 'Left' });
             }
         }
@@ -626,8 +649,8 @@ var ToolbarModule = /** @class */ (function () {
         }
         if (!isOkBtn) {
             if (isNullOrUndefined(parent.toolbar) || (parent.toolbar && parent.toolbar.indexOf('Save') > -1)) {
-                toolbarItems.push({ id: id + '_save', prefixIcon: 'e-icons e-btn-save', cssClass: 'top-icon e-save',
-                    tooltipText: this.l10n.getConstant('Save'), align: 'Right', template: '<button id="' + id + '_saveBtn"></button>' });
+                toolbarItems.push({ id: id + '_save', prefixIcon: 'e-icons e-btn-save', cssClass: 'e-caret-hide top-icon e-save',
+                    tooltipText: this.l10n.getConstant('Save'), align: 'Right' });
             }
         }
         var tempToolbarItems = this.processToolbar('right');
@@ -746,10 +769,10 @@ var ToolbarModule = /** @class */ (function () {
             }
         }
         if (parent.toolbarTemplate) {
-            this.toolbarHeight = parent.element.querySelector('#' + parent.element.id + '_toolbarArea').clientHeight;
+            this.toolbarHeight = parent.element.querySelector('#' + id + '_toolbarArea').clientHeight;
         }
-        else if (parent.element.querySelector('#' + parent.element.id + '_toolbar')) {
-            this.toolbarHeight = parent.element.querySelector('#' + parent.element.id + '_toolbar').clientHeight;
+        else if (parent.element.querySelector('#' + id + '_toolbar')) {
+            this.toolbarHeight = parent.element.querySelector('#' + id + '_toolbar').clientHeight;
         }
         parent.toolbarHeight = this.toolbarHeight;
         if (Browser.isDevice) {
@@ -840,21 +863,21 @@ var ToolbarModule = /** @class */ (function () {
             return;
         }
     };
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
     ToolbarModule.prototype.widthAspectRatio = function (e) {
         /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
         if (e.keyCode === 109) {
             return;
         }
         var parent = this.parent;
-        var aspectRatioHeight = parent.element.querySelector('#' + parent.element.id + '_resizeHeight');
-        var aspectRatioWidth = parent.element.querySelector('#' + parent.element.id + '_resizeWidth');
-        var icon = parent.element.querySelector('#' + parent.element.id + '_aspectratio');
+        var id = parent.element.id;
+        var aspectRatioHeight = parent.element.querySelector('#' + id + '_resizeHeight');
+        var aspectRatioWidth = parent.element.querySelector('#' + id + '_resizeWidth');
+        var icon = parent.element.querySelector('#' + id + '_aspectratio');
         var originalWidth = parent.img.destWidth;
         var originalHeight = parent.img.destHeight;
         var aspectRatioHeightValue = parseFloat(aspectRatioHeight.value);
-        var value = aspectRatioHeightValue / (originalHeight / originalWidth);
-        var width = value % 1 >= 0.5 || value % 1 <= -0.5 ? Math.round(value) : (value < 0) ? Math.ceil(value) : Math.floor(value);
+        var val = aspectRatioHeightValue / (originalHeight / originalWidth);
+        var width = val % 1 >= 0.5 || val % 1 <= -0.5 ? Math.round(val) : (val < 0) ? Math.ceil(val) : Math.floor(val);
         var widthNumeric = getComponent(aspectRatioWidth, 'numerictextbox');
         var heightNumeric = getComponent(aspectRatioWidth, 'numerictextbox');
         if (icon) {
@@ -884,7 +907,6 @@ var ToolbarModule = /** @class */ (function () {
             }
         }
     };
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
     ToolbarModule.prototype.heightAspectRatio = function (e) {
         /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
         if (e.keyCode === 109) {
@@ -899,18 +921,18 @@ var ToolbarModule = /** @class */ (function () {
         var originalHeight = parent.img.destHeight;
         var aspectRatioWidthValue = parseFloat(aspectRatioWidth.value);
         var value = aspectRatioWidthValue / (originalWidth / originalHeight);
-        var height = value % 1 >= 0.5 || value % 1 <= -0.5 ? Math.round(value) : (value < 0) ? Math.ceil(value) : Math.floor(value);
+        var ht = value % 1 >= 0.5 || value % 1 <= -0.5 ? Math.round(value) : (value < 0) ? Math.ceil(value) : Math.floor(value);
         var heightNumeric = getComponent(aspectRatioHeight, 'numerictextbox');
         var widthNumeric = getComponent(aspectRatioWidth, 'numerictextbox');
         if (icon) {
-            if (!isNaN(height)) {
+            if (!isNaN(ht)) {
                 if (isNullOrUndefined((heightNumeric).value)) {
-                    (heightNumeric).placeholder = height + ' px';
-                    aspectRatioHeight.placeholder = height.toString() + ' px';
+                    (heightNumeric).placeholder = ht + ' px';
+                    aspectRatioHeight.placeholder = ht.toString() + ' px';
                 }
                 else {
-                    (heightNumeric).value = height;
-                    aspectRatioHeight.value = height.toString() + ' px';
+                    (heightNumeric).value = ht;
+                    aspectRatioHeight.value = ht.toString() + ' px';
                 }
             }
             else {
@@ -942,7 +964,7 @@ var ToolbarModule = /** @class */ (function () {
         spanWidth.innerHTML = this.l10n.getConstant('W');
         toolbarItems.push({ id: id + '_width', cssClass: 'e-ie-resize-width', template: spanWidth, align: 'Center' });
         toolbarItems.push({ id: id + '_resizeWidth', prefixIcon: 'e-icons e-anti-clock-wise',
-            tooltipText: this.l10n.getConstant('Width'), align: 'Center', type: 'Input', template: new NumericTextBox({ width: 75, htmlAttributes: { maxLength: "4" },
+            tooltipText: this.l10n.getConstant('Width'), align: 'Center', type: 'Input', template: new NumericTextBox({ width: 75, htmlAttributes: { maxLength: '4' },
                 showSpinButton: false, value: isResize ? parent.aspectWidth : null,
                 placeholder: isResize ? null : width, format: '###.## px' })
         });
@@ -950,7 +972,7 @@ var ToolbarModule = /** @class */ (function () {
         spanHeight.innerHTML = this.l10n.getConstant('H');
         toolbarItems.push({ id: id + '_height', cssClass: 'e-ie-resize-height', template: spanHeight, align: 'Center' });
         toolbarItems.push({ id: id + '_resizeHeight', prefixIcon: 'e-icons e-clock-wise',
-            tooltipText: this.l10n.getConstant('Height'), align: 'Center', type: 'Input', template: new NumericTextBox({ width: 75, htmlAttributes: { maxLength: "4" },
+            tooltipText: this.l10n.getConstant('Height'), align: 'Center', type: 'Input', template: new NumericTextBox({ width: 75, htmlAttributes: { maxLength: '4' },
                 showSpinButton: false, value: isResize ? parent.aspectHeight : null,
                 placeholder: isResize ? null : height, format: '###.## px' })
         });
@@ -993,9 +1015,6 @@ var ToolbarModule = /** @class */ (function () {
             clicked: this.defToolbarClicked.bind(this),
             created: function () {
                 _this.wireResizeBtnEvents();
-                if (!Browser.isDevice) {
-                    _this.renderSaveBtn();
-                }
                 parent.trigger('toolbarCreated', { toolbarType: 'shapes' });
                 if (Browser.isDevice) {
                     if (_this.defToolbarItems.length > 0 && (!isNullOrUndefined(document.getElementById(id + '_bottomToolbar')))) {
@@ -1114,8 +1133,13 @@ var ToolbarModule = /** @class */ (function () {
         }
     };
     ToolbarModule.prototype.fileSelect = function (inputElement, args) {
+        /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
         var type = inputElement.files[0].type.split('/')[1];
         var filesTypes = ['png', 'jpg', 'jpeg', 'svg', 'svg+xml'];
+        /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
+        this.fileName = inputElement.files[0].name.split('.')[0];
+        /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
+        this.parent.notify('toolbar', { prop: 'setInitialSize', value: { value: inputElement.files[0].size } });
         if (filesTypes.indexOf(type) > -1) {
             this.parent.notify('draw', { prop: 'fileSelect', value: { inputElement: inputElement, args: args } });
         }
@@ -1171,6 +1195,7 @@ var ToolbarModule = /** @class */ (function () {
         var duplicateElement = document.querySelector('#' + id + '_duplicate');
         var removeElement = document.querySelector('#' + id + '_remove');
         var editTextElement = document.querySelector('#' + id + '_editText');
+        var zOrderElement = document.querySelector('#' + id + '_zOrderBtn');
         if ((parent.activeObj.activePoint.width === 0 && parent.activeObj.activePoint.height === 0) &&
             (isNullOrUndefined(parent.activeObj.pointColl) || (parent.activeObj.pointColl
                 && parent.activeObj.pointColl.length === 0)) &&
@@ -1184,6 +1209,9 @@ var ToolbarModule = /** @class */ (function () {
             if (editTextElement) {
                 editTextElement.classList.add('e-disabled');
             }
+            if (zOrderElement) {
+                zOrderElement.classList.add('e-disabled');
+            }
         }
         else {
             if (duplicateElement) {
@@ -1195,6 +1223,9 @@ var ToolbarModule = /** @class */ (function () {
             if (editTextElement) {
                 editTextElement.classList.remove('e-disabled');
             }
+            if (zOrderElement) {
+                zOrderElement.classList.remove('e-disabled');
+            }
         }
         var iconCss = isContextualToolbar ? this.getCurrentShapeIcon(parent.activeObj.shape) : 'e-annotation';
         var drpDownBtn = new DropDownButton({ items: items, iconCss: 'e-icons ' + iconCss,
@@ -1216,6 +1247,7 @@ var ToolbarModule = /** @class */ (function () {
                 }
             },
             select: function (args) {
+                parent.noPushUndo = false;
                 _this.triggerTbarClickEvent(args);
                 parent.okBtn();
                 var isCropSelection = false;
@@ -1241,8 +1273,11 @@ var ToolbarModule = /** @class */ (function () {
                 var shapeSettings;
                 var shapeChangingArgs;
                 drpDownBtn.iconCss = 'e-icons ' + _this.getCurrentShapeIcon(args.item.id);
+                parent.notify('draw', { prop: 'updateTempObjColl' });
+                parent.notify('draw', { prop: 'updateTempPointColl' });
                 switch (args.item.id) {
                     case 'pen':
+                        parent.drawingShape = null;
                         parent.notify('draw', { prop: 'setTempFreehandCounter', value: { tempFreehandCounter: parent.freehandCounter } });
                         parent.notify('draw', { prop: 'setTempCurrentFreehandDrawIndex', value: { tempCurrentFreehandDrawIndex: obj['currentFreehandDrawIndex'] } });
                         _this.currentToolbar = 'pen';
@@ -1256,9 +1291,15 @@ var ToolbarModule = /** @class */ (function () {
                         break;
                     case 'text':
                         _this.currentToolbar = 'text';
-                        parent.notify('shape', { prop: 'draw-shape-text' });
+                        parent.drawingShape = args.item.id;
+                        _this.currentToolbar = 'text';
+                        _this.setInitialShapeSettings(args);
+                        parent.notify('selection', { prop: 'annotate', value: { shape: args.item.id } });
+                        parent.notify('toolbar', { prop: 'refresh-toolbar', onPropertyChange: false, value: { type: 'text',
+                                isApplyBtn: null, isCropping: null, isZooming: null, cType: null } });
                         break;
                     case 'image':
+                        parent.drawingShape = null;
                         _this.currentToolbar = 'shapes';
                         parent.element.querySelector('#' + id + '_fileUpload').click();
                         break;
@@ -1267,6 +1308,7 @@ var ToolbarModule = /** @class */ (function () {
                     case 'line':
                     case 'rectangle':
                     case 'path':
+                        parent.drawingShape = args.item.id;
                         _this.currentToolbar = 'shapes';
                         _this.setInitialShapeSettings(args);
                         parent.notify('selection', { prop: 'annotate', value: { shape: args.item.id } });
@@ -1353,7 +1395,9 @@ var ToolbarModule = /** @class */ (function () {
             iconCss = this.getCurrentShapeIcon(shapeString);
             shape = shapeString;
         }
-        else if (parent.activeObj.shape) {
+        else if (parent.activeObj.shape &&
+            (parent.activeObj.activePoint.width !== 0 || parent.activeObj.activePoint.height !== 0) ||
+            (parent.activeObj.shape === 'path' && parent.activeObj.pointColl.length > 0)) {
             iconCss = this.getCurrentShapeIcon(parent.activeObj.shape);
             shape = parent.activeObj.shape;
         }
@@ -1376,8 +1420,10 @@ var ToolbarModule = /** @class */ (function () {
                 }
                 if (parent.activeObj.shape && parent.activeObj.shape.split('-').length > 1) {
                     var elem = document.getElementById(parent.activeObj.shape.split('-')[1]);
-                    elem.classList.add('e-selected');
-                    elem.focus();
+                    if (elem) {
+                        elem.classList.add('e-selected');
+                        elem.focus();
+                    }
                 }
                 parent.notify('transform', { prop: 'disableZoomOutBtn', value: { isZoomOut: true } });
             },
@@ -1428,28 +1474,373 @@ var ToolbarModule = /** @class */ (function () {
         });
         drpDownBtn.appendTo('#' + parent.element.id + '_transformBtn');
     };
-    ToolbarModule.prototype.renderSaveBtn = function () {
+    ToolbarModule.prototype.saveDialogPopup = function () {
         var _this = this;
         var parent = this.parent;
         var id = parent.element.id;
-        var saveItems = [
-            { text: 'JPEG', id: 'jpeg' },
-            { text: 'PNG', id: 'png' },
-            { text: 'SVG', id: 'svg' }
+        var quality = ['Good', 'Great', 'Highest'];
+        parent.element.appendChild(parent.createElement('div', { id: id + '_saveDialog' }));
+        var dialogContent = parent.createElement('div', {
+            id: id + '_dialogContent', attrs: { style: 'display: flex;' }
+        });
+        var dialogImgContent = dialogContent.appendChild(parent.createElement('div', {
+            id: id + '_dialogImgContent', className: 'e-ie-dlg-img-content'
+        }));
+        dialogImgContent.appendChild(parent.createElement('canvas', {
+            id: id + '_imgPic', className: 'e-ie-img-dlg-canvas'
+        }));
+        var imageNameContainer = dialogImgContent.appendChild(parent.createElement('div', {
+            id: id + '_imageNameContainer', className: 'e-ie-img-size'
+        }));
+        imageNameContainer.appendChild(parent.createElement('span', {
+            id: id + '_imageNameLabel', className: 'e-ie-quality-info'
+        }));
+        var dialogRightContent = dialogContent.appendChild(parent.createElement('div', {
+            id: id + '_dialogRightContent', className: 'e-ie-dlg-right-content'
+        }));
+        var imageNameDiv = dialogRightContent.appendChild(parent.createElement('div', {
+            id: id + '_namediv', className: 'e-ie-img-save-name'
+        }));
+        imageNameDiv.appendChild(parent.createElement('span', {
+            id: id + '_labelImgname', className: 'e-ie-img-label-name', innerHTML: this.l10n.getConstant('ImageName')
+        }));
+        imageNameDiv.appendChild(parent.createElement('input', {
+            id: id + '_imgNametext', className: 'e-ie-img-input', attrs: { type: 'text' }
+        }));
+        var formatNameDiv = dialogRightContent.appendChild(parent.createElement('div', {
+            id: id + '_imgNamediv', className: 'e-ie-img-save-dlg'
+        }));
+        formatNameDiv.appendChild(parent.createElement('span', {
+            id: id + '_labelname', className: 'e-ie-img-label-name', innerHTML: this.l10n.getConstant('Format')
+        }));
+        formatNameDiv.appendChild(parent.createElement('button', {
+            id: id + '_saveDropdownbtn', attrs: { tabindex: '1' }
+        }));
+        var qualityNameDiv = dialogRightContent.appendChild(parent.createElement('div', {
+            id: id + '_imgQualitydiv', className: 'e-ie-img-quality-name'
+        }));
+        var qualityDiv = parent.createElement('div', {
+            id: id + '_qualityContainer'
+        });
+        qualityDiv.appendChild(parent.createElement('span', {
+            id: id + '_qualityLabel', className: 'e-ie-img-quality-label',
+            innerHTML: this.l10n.getConstant('Quality')
+        }));
+        qualityDiv.appendChild(parent.createElement('span', {
+            id: id + '_qualityInfo', className: 'e-circle-info e-icons e-ie-quality-span',
+            attrs: { title: this.l10n.getConstant('QualityInfo') }
+        }));
+        var qualityValueElem = qualityDiv.appendChild(parent.createElement('div', {
+            id: id + '_imgsizeSpan',
+            className: 'e-ie-img-size-value-span'
+        }));
+        qualityValueElem.appendChild(parent.createElement('span', {
+            id: id + '_imgsizeValueSpan', className: ''
+        }));
+        qualityNameDiv.appendChild(qualityDiv);
+        var qualityOptionDiv = parent.createElement('div', {
+            id: id + '_qualityOptionContainer', className: 'e-ie-quality-option-container'
+        });
+        var buttonGroup = qualityNameDiv.appendChild(parent.createElement('div', {
+            id: id + '_qualityButtonGroup', className: 'e-btn-group'
+        }));
+        // eslint-disable-next-line @typescript-eslint/tslint/config
+        quality.forEach(function (option) {
+            var input = document.createElement('input');
+            input.type = 'radio';
+            input.id = id + '_' + option.toLowerCase();
+            input.name = 'quality';
+            input.value = option.toLowerCase();
+            var label = document.createElement('label');
+            label.className = 'e-btn';
+            label.htmlFor = option.toLowerCase();
+            label.textContent = _this.l10n.getConstant(option);
+            buttonGroup.appendChild(input);
+            buttonGroup.appendChild(label);
+        });
+        qualityOptionDiv.appendChild(buttonGroup);
+        qualityOptionDiv.appendChild(parent.createElement('div', {
+            id: id + '_qualitySlider', className: 'e-ie-img-quality-slider'
+        }));
+        qualityOptionDiv.appendChild(parent.createElement('button', { id: id + '_qualitybuttonIcon', className: 'e-ie-img-icon-button', attrs: { type: 'button' } }));
+        qualityNameDiv.appendChild(qualityOptionDiv);
+        if (Browser.isDevice) {
+            qualityNameDiv.appendChild(parent.createElement('span', {
+                id: id + '_qualitySize', className: 'e-ie-img-quality-size'
+            }));
+        }
+        parent.element.querySelector('#' + id + '_saveDialog').style.display = 'block';
+        parent.element.appendChild(dialogContent);
+        var dialog = new Dialog({
+            target: parent.element,
+            header: this.l10n.getConstant('SaveAs'),
+            closeOnEscape: true, content: document.getElementById(id + '_dialogContent'),
+            width: Browser.isDevice ? '345px' : '570px', isModal: true, animationSettings: { effect: 'Zoom' }, beforeOpen: this.onBeforeopen(),
+            close: this.saveDialogClosed.bind(this, id),
+            cssClass: 'e-ie-save-dialog',
+            buttons: [
+                {
+                    'click': function () {
+                        dialog.hide();
+                    },
+                    buttonModel: {
+                        content: this.l10n.getConstant('Close'), cssClass: 'e-save-cancel-btn'
+                    }
+                },
+                {
+                    'click': function () {
+                        _this.download();
+                        dialog.hide();
+                        _this.isSlider = false;
+                    },
+                    buttonModel: {
+                        isPrimary: true, content: this.l10n.getConstant('Download'), cssClass: 'e-flat e-save-download-btn'
+                    }
+                }
+            ]
+        });
+        dialog.appendTo('#' + id + '_saveDialog');
+    };
+    /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
+    ToolbarModule.prototype.saveDialogClosed = function (id) {
+        if (getComponent(document.getElementById(id + '_saveDropdownbtn'), 'dropdownbutton')) {
+            getComponent(document.getElementById(id + '_saveDropdownbtn'), 'dropdownbutton').destroy();
+        }
+        this.isSlider = false;
+        if (document.querySelector('#' + id + '_qualityButtonGroup') &&
+            document.querySelector('#' + id + '_qualitySlider')) {
+            document.querySelector('#' + id + '_qualityButtonGroup').remove();
+            document.querySelector('#' + id + '_qualitySlider').remove();
+            document.querySelector('#' + id + '_imgsizeValueSpan').remove();
+            document.querySelector('#' + id + '_imageNameLabel').remove();
+            document.querySelector('#' + id + '_imgsizeSpan').remove();
+        }
+        document.getElementById(id + '_dialogContent').remove();
+        getComponent(document.getElementById(id + '_saveDialog'), 'dialog').destroy();
+        document.getElementById(id + '_saveDialog').remove();
+    };
+    /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
+    ToolbarModule.prototype.onBeforeopen = function () {
+        var _this = this;
+        var parent = this.parent;
+        var id = parent.element.id;
+        var obj = { canvas: null };
+        var items = [
+            { id: 'jpeg', text: 'JPEG' },
+            { id: 'png', text: 'PNG' },
+            { id: 'svg', text: 'SVG' }
         ];
-        var ddbElem = document.getElementById(id + '_saveBtn');
+        var inputObj = new TextBox({
+            placeholder: this.l10n.getConstant('ImageName'),
+        });
+        inputObj.appendTo('#' + id + '_imgNametext');
+        var qualityContainer = document.getElementById(id + '_imgQualitydiv');
+        var slider = document.getElementById(id + '_qualitySlider');
+        var qualityBtnGrp = document.querySelector('#' + id + '_qualityButtonGroup');
+        var qualityBtnIcon = document.querySelector('#' + id + '_qualitybuttonIcon');
+        var qualitySliderValue = document.querySelector('#' + id + '_imgsizeSpan');
+        var imageNameLabel;
+        if (Browser.isDevice) {
+            imageNameLabel = document.getElementById(id + '_qualitySize');
+        }
+        else {
+            imageNameLabel = document.getElementById(id + '_imageNameLabel');
+        }
+        var fileObj = { fileName: '', fileType: '' };
+        parent.notify('draw', { prop: 'getFileName', onPropertyChange: false, value: { obj: fileObj } });
+        this.fileType = fileObj['fileType'];
+        parent.notify('export', { prop: 'exportToCanvas', value: { object: obj } });
+        var tempCanvas = obj['canvas'];
+        /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
+        var canvas = document.getElementById(id + '_imgPic');
+        canvas.width = tempCanvas.width;
+        canvas.height = tempCanvas.height;
+        var buttonIcon = new Button({ iconCss: 'e-icons e-settings' });
+        buttonIcon.appendTo('#' + id + '_qualitybuttonIcon');
+        var ddbElem = document.getElementById(id + '_saveDropdownbtn');
         if (ddbElem) {
-            // Initialize the DropDownButton component.
-            var saveDrpDownBtn = new DropDownButton({ items: saveItems, cssClass: 'e-caret-hide e-image-popup', iconCss: 'e-icons e-save',
+            var spanElem_1 = document.createElement('span');
+            spanElem_1.innerHTML = fileObj['fileType'].toUpperCase();
+            if (ddbElem) {
+                ddbElem.appendChild(spanElem_1);
+            }
+            var drpDownBtn_1 = new DropDownButton({
+                items: items,
+                open: function (args) {
+                    if (Browser.isDevice) {
+                        args.element.parentElement.style.top = drpDownBtn_1.element.getBoundingClientRect().top -
+                            args.element.parentElement.offsetHeight + 'px';
+                    }
+                    var activeBtn = spanElem_1.innerHTML;
+                    if (activeBtn !== '') {
+                        args.element.querySelector('[aria-label = ' + '"' + activeBtn + '"' + ']').classList.add('e-selected-btn');
+                    }
+                },
                 select: function (args) {
-                    _this.triggerTbarClickEvent(args);
-                    parent.export(args.item.text);
-                    parent.isChangesSaved = true;
-                    parent.notify('draw', { prop: 'redrawDownScale' });
+                    qualitySliderValue.style.display = 'none';
+                    _this.fileType = spanElem_1.innerHTML = args.item.text;
+                    if (args.item.id !== 'jpeg') {
+                        qualityContainer.style.display = 'none';
+                        imageNameLabel.style.display = 'block';
+                        if (_this.initialSize > 1000) {
+                            var megabytes = _this.initialSize / 1048576;
+                            imageNameLabel.innerHTML = _this.l10n.getConstant('ImageSize') + ': ' + megabytes.toFixed(2) + ' MB';
+                        }
+                        else {
+                            imageNameLabel.innerHTML = _this.l10n.getConstant('ImageSize') + ': ' + _this.initialSize.toFixed(2) + ' KB';
+                        }
+                        if (slider) {
+                            if (_this.isSlider) {
+                                getComponent(slider, 'slider').destroy();
+                            }
+                            slider.style.display = 'none';
+                        }
+                        _this.isSlider = false;
+                    }
+                    else {
+                        qualityContainer.style.display = 'block';
+                        removeClass([qualityBtnGrp], 'e-hide');
+                        slider.style.display = 'none';
+                        imageNameLabel.style.display = 'block';
+                        _this.updateImageSize(isNullOrUndefined(_this.currentQuality) ? 1 : _this.currentQuality, obj['canvas']);
+                        document.getElementById(id + '_' + _this.imageQuality).checked = true;
+                    }
                 }
             });
-            saveDrpDownBtn.appendTo('#' + id + '_saveBtn');
+            drpDownBtn_1.appendTo('#' + id + '_saveDropdownbtn');
+            /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
+            var imgName = document.getElementById(id + '_imgNametext');
+            imgName.value = this.fileName ? this.fileName : fileObj['fileName'];
+            if (fileObj['fileType'].toUpperCase() !== 'JPEG') {
+                qualityContainer.style.display = 'none';
+                qualitySliderValue.style.display = 'none';
+            }
+            if (Browser.isDevice) {
+                document.getElementById(id + '_dialogImgContent').style.display = 'none';
+                document.getElementById(id + '_dialogRightContent').style.width = '100%';
+                this.updateImageSize(1, obj['canvas']);
+            }
+            else {
+                this.updateImageSize(1, obj['canvas']);
+            }
         }
+        document.getElementById(id + '_' + this.imageQuality).checked = true;
+        qualityBtnGrp.addEventListener('click', this.qualityBtnClickHandler.bind(this));
+        qualityBtnIcon.addEventListener('click', this.qualityBtnClickHandler.bind(this));
+    };
+    ToolbarModule.prototype.qualityBtnClickHandler = function (event) {
+        var _this = this;
+        var parent = this.parent;
+        var id = parent.element.id;
+        var target = event.target;
+        var fileObj = { fileName: '' };
+        var obj = { canvas: null };
+        var compressionValues = {
+            'Good': 0.8,
+            'Great': 0.9,
+            'Highest': 1
+        };
+        var qualityBtnGrp = document.querySelector('#' + id + '_qualityButtonGroup');
+        var qualitySlider = document.querySelector('#' + id + '_qualitySlider');
+        var qualityOption = document.querySelector('#' + id + '_qualityOptionContainer');
+        var qualitySliderValueDiv = document.querySelector('#' + id + '_imgsizeSpan');
+        var qualitySliderValueSpan = document.querySelector('#' + id + '_imgsizeValueSpan');
+        parent.notify('draw', { prop: 'getFileName', onPropertyChange: false, value: { obj: fileObj } });
+        parent.notify('export', { prop: 'exportToCanvas', value: { object: obj } });
+        if (event.currentTarget.id === id + '_qualitybuttonIcon' && !this.isSlider) {
+            addClass([qualityBtnGrp], 'e-hide');
+            qualitySlider.style.display = 'block';
+            qualitySliderValueDiv.style.display = 'inline-block';
+            qualityOption.style.display = 'flex';
+            var sliderObj = new Slider({
+                tooltip: { placement: 'Before', isVisible: true, format: 'P0', showOn: 'Focus' },
+                min: 0.01, max: 1, step: 0.01, value: this.currentQuality,
+                type: 'MinRange',
+                width: Browser.isDevice ? '80%' : '190px',
+                created: function () {
+                    _this.updateImageSize(_this.currentQuality, obj['canvas']);
+                    qualitySliderValueSpan.innerHTML = (Math.round(_this.currentQuality * 100)).toString();
+                },
+                changed: function (args) {
+                    _this.currentQuality = args.value;
+                    qualitySliderValueSpan.innerHTML = (Math.round(_this.currentQuality * 100)).toString();
+                    parent.notify('export', { prop: 'setImageQuality', value: { value: args.value } });
+                    _this.updateImageSize(args.value, obj['canvas']);
+                }
+            });
+            sliderObj.appendTo('#' + id + '_qualitySlider');
+            sliderObj.element.parentElement.classList.add('e-ie-quality-slider');
+            this.isSlider = true;
+        }
+        else if (event.currentTarget.id === id + '_qualitybuttonIcon' && this.isSlider) {
+            getComponent(qualitySlider, 'slider').destroy();
+            qualitySlider.style.display = 'none';
+            qualitySliderValueDiv.style.display = 'none';
+            removeClass([qualityBtnGrp], 'e-hide');
+            qualityOption.style.display = 'block';
+            this.isSlider = false;
+            // eslint-disable-next-line no-prototype-builtins
+        }
+        else if (compressionValues.hasOwnProperty(target.textContent) && !this.isSlider) {
+            event.target.previousElementSibling.checked = true;
+            this.currentQuality = compressionValues[target.textContent];
+            this.imageQuality = target.textContent.toLowerCase();
+            this.updateImageSize(compressionValues[target.textContent], obj['canvas']);
+        }
+    };
+    ToolbarModule.prototype.updateImageSize = function (quality, tempCanvas) {
+        var fileSize;
+        var parent = this.parent;
+        var id = parent.element.id;
+        /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
+        var canvas = document.getElementById(id + '_imgPic');
+        var ctx = canvas.getContext('2d');
+        var imageNameLabel;
+        if (Browser.isDevice) {
+            imageNameLabel = document.getElementById(id + '_qualitySize');
+        }
+        else {
+            imageNameLabel = document.getElementById(id + '_imageNameLabel');
+        }
+        /* eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/tslint/config */
+        tempCanvas.toBlob((function (blob) {
+            fileSize = Math.floor(blob.size / 1024);
+            if (fileSize > 1000) {
+                var megabytes = fileSize / 1024;
+                imageNameLabel.innerHTML = 'Image size: ' + megabytes.toFixed(2) + ' MB';
+                fileSize = +megabytes.toFixed(2);
+            }
+            else {
+                imageNameLabel.innerHTML = 'Image size: ' + fileSize.toFixed(2) + ' KB';
+                fileSize = +fileSize.toFixed(2);
+            }
+            if (Browser.isDevice) {
+                canvas.style.display = 'none';
+            }
+            else {
+                var compressedImage_1 = new Image();
+                compressedImage_1.src = URL.createObjectURL(blob);
+                // eslint-disable-next-line @typescript-eslint/tslint/config
+                compressedImage_1.onload = function () {
+                    ctx.drawImage(compressedImage_1, 0, 0);
+                    URL.revokeObjectURL(compressedImage_1.src);
+                };
+            }
+            this.fileSize = fileSize;
+        }).bind(this), 'image/jpeg', quality);
+    };
+    ToolbarModule.prototype.download = function () {
+        var parent = this.parent;
+        var id = parent.element.id;
+        if (this.fileType === 'JPEG' && this.isSlider) {
+            var value = getComponent(document.getElementById(id + '_qualitySlider'), 'slider').value;
+            parent.notify('export', { prop: 'setImageQuality', value: { value: value } });
+        }
+        else {
+            parent.notify('export', { prop: 'setImageQuality', value: { value: this.currentQuality } });
+        }
+        var fileName = document.getElementById(id + '_imgNametext').value;
+        parent.export(this.fileType, fileName);
     };
     ToolbarModule.prototype.getCropTransformToolbarItem = function () {
         var parent = this.parent;
@@ -1543,6 +1934,10 @@ var ToolbarModule = /** @class */ (function () {
                 tooltipText: this.l10n.getConstant('Opacity'), align: 'Center' });
         }
         toolbarItems.push({ align: 'Center', type: 'Separator' });
+        if (items.indexOf('z-order') > -1) {
+            toolbarItems.push({ id: id + '_zOrder', cssClass: 'top-icon e-list-unordered-3', tooltipText: this.l10n.getConstant('ZOrder'), align: 'Center',
+                type: 'Input', template: '<button id="' + id + '_zOrderBtn"></button>' });
+        }
         if (items.indexOf('duplicate') > -1) {
             toolbarItems.push({ id: id + '_duplicate', prefixIcon: 'e-icons e-order', cssClass: 'top-icon e-order',
                 tooltipText: this.l10n.getConstant('Duplicate'), align: 'Center' });
@@ -1596,9 +1991,6 @@ var ToolbarModule = /** @class */ (function () {
                 _this.renderCropBtn(shape);
                 _this.renderStraightenSlider();
                 _this.wireZoomBtnEvents();
-                if (!Browser.isDevice) {
-                    _this.renderSaveBtn();
-                }
                 parent.trigger('toolbarCreated', { toolbarType: 'shapes' });
                 if (Browser.isDevice) {
                     if (_this.defToolbarItems.length > 0 && document.getElementById(id + '_bottomToolbar')) {
@@ -1643,7 +2035,7 @@ var ToolbarModule = /** @class */ (function () {
             var classToContentMap = { 'e-custom': 'Custom', 'e-circle': 'Circle',
                 'e-square': 'Square', 'e-custom-a': '3:2', 'e-custom-b': '4:3', 'e-custom-c': '5:4', 'e-custom-d': '7:5',
                 'e-custom-e': '16:9', 'e-custom-f': '2:3', 'e-custom-g': '3:4', 'e-custom-h': '4:5', 'e-custom-i': '5:7',
-                'e-custom-j': '9:16',
+                'e-custom-j': '9:16'
             };
             var classList = elem.children[0].classList;
             for (var className in classToContentMap) {
@@ -1655,6 +2047,7 @@ var ToolbarModule = /** @class */ (function () {
         return '';
     };
     ToolbarModule.prototype.getCurrentShapeIcon = function (shape) {
+        // eslint-disable-next-line @typescript-eslint/tslint/config
         var shapeIcons = {
             rectangle: 'e-rectangle',
             ellipse: 'e-circle',
@@ -1676,9 +2069,9 @@ var ToolbarModule = /** @class */ (function () {
             'crop-3:4': 'e-custom-g',
             'crop-4:5': 'e-custom-h',
             'crop-5:7': 'e-custom-i',
-            'crop-9:16': 'e-custom-j',
+            'crop-9:16': 'e-custom-j'
         };
-        return shapeIcons[shape] || 'e-free-pen';
+        return shapeIcons[shape] ? shapeIcons[shape] : (shape && shape.indexOf('crop-') !== -1) ? 'e-custom' : 'e-free-pen';
     };
     ToolbarModule.prototype.initShapesToolbarItem = function (items) {
         var _this = this;
@@ -1712,18 +2105,18 @@ var ToolbarModule = /** @class */ (function () {
                 _this.renderAnnotationBtn(true);
                 _this.createShapeColor(items);
                 _this.createShapeBtn(items);
+                _this.createZOrderBtn(items);
                 if (parent.activeObj.shape === 'arrow') {
+                    // eslint-disable-next-line @typescript-eslint/tslint/config
                     if (items.some(function (item) { return item.toLowerCase().indexOf('start') > -1; })) {
                         _this.createStartBtn();
                     }
+                    // eslint-disable-next-line @typescript-eslint/tslint/config
                     if (items.some(function (item) { return item.toLowerCase().indexOf('end') > -1; })) {
                         _this.createEndBtn();
                     }
                 }
                 _this.wireZoomBtnEvents();
-                if (!Browser.isDevice) {
-                    _this.renderSaveBtn();
-                }
                 parent.trigger('toolbarCreated', { toolbarType: 'shapes' });
                 if (Browser.isDevice) {
                     if (_this.defToolbarItems.length > 0 && document.getElementById(id + '_bottomToolbar')) {
@@ -1805,6 +2198,7 @@ var ToolbarModule = /** @class */ (function () {
                         fillDDB_1.element.children[0].style.backgroundColor = args.currentValue.rgba;
                     }
                     fillDDB_1.toggle();
+                    parent.notify('undo-redo', { prop: 'updateUndoRedoStack', onPropertyChange: false });
                 },
                 onModeSwitch: function (args) {
                     if (Browser.isDevice) {
@@ -1814,7 +2208,7 @@ var ToolbarModule = /** @class */ (function () {
                 },
                 beforeClose: function () {
                     fillDDB_1.toggle();
-                },
+                }
             }, '#' + id + '_shape_fill');
             var fillDDB_1 = new DropDownButton({
                 open: function (args) {
@@ -1850,6 +2244,7 @@ var ToolbarModule = /** @class */ (function () {
                     parent.updateStrokeColor(args.value);
                     strokeDDB_1.element.children[0].style.backgroundColor = args.currentValue.rgba;
                     strokeDDB_1.toggle();
+                    parent.notify('undo-redo', { prop: 'updateUndoRedoStack', onPropertyChange: false });
                 },
                 onModeSwitch: function (args) {
                     if (Browser.isDevice) {
@@ -1902,25 +2297,25 @@ var ToolbarModule = /** @class */ (function () {
                 ];
             }
             var strokeWidthBtn = document.getElementById(id + '_borderWidthBtn');
-            var spanElem_1 = document.createElement('span');
-            spanElem_1.innerHTML = this.l10n.getConstant('XSmall');
-            spanElem_1.className = 'e-shape-stroke-width';
-            strokeWidthBtn.appendChild(spanElem_1);
+            var spanElem_2 = document.createElement('span');
+            spanElem_2.innerHTML = this.l10n.getConstant('XSmall');
+            spanElem_2.className = 'e-shape-stroke-width';
+            strokeWidthBtn.appendChild(spanElem_2);
             // Initialize the DropDownButton component.
-            var drpDownBtn_1 = new DropDownButton({ items: strokeWidthItems,
+            var drpDownBtn_2 = new DropDownButton({ items: strokeWidthItems,
                 open: function (args) {
                     if (Browser.isDevice) {
-                        args.element.parentElement.style.top = drpDownBtn_1.element.getBoundingClientRect().top -
+                        args.element.parentElement.style.top = drpDownBtn_2.element.getBoundingClientRect().top -
                             args.element.parentElement.offsetHeight + 'px';
                     }
-                    var activeBtn = spanElem_1.innerHTML;
+                    var activeBtn = spanElem_2.innerHTML;
                     if (activeBtn !== '') {
                         args.element.querySelector('[aria-label = ' + '"' + activeBtn + '"' + ']').classList.add('e-selected-btn');
                     }
                 },
                 select: function (args) {
                     _this.triggerTbarClickEvent(args);
-                    spanElem_1.textContent = args.item.text;
+                    spanElem_2.textContent = args.item.text;
                     parent.updateStrokeWidth(args.item.id);
                     if (Browser.isDevice) {
                         if (document.getElementById(id + '_bottomToolbar')) {
@@ -1936,10 +2331,94 @@ var ToolbarModule = /** @class */ (function () {
                             toolbar_8.refreshOverflow();
                         }
                     }
+                    parent.notify('undo-redo', { prop: 'updateUndoRedoStack', onPropertyChange: false });
                 }
             });
             // Render initialized DropDownButton.
-            drpDownBtn_1.appendTo('#' + id + '_borderWidthBtn');
+            drpDownBtn_2.appendTo('#' + id + '_borderWidthBtn');
+        }
+    };
+    ToolbarModule.prototype.createZOrderBtn = function (items) {
+        var _this = this;
+        var parent = this.parent;
+        var id = parent.element.id;
+        if (items.indexOf('z-order') > -1) {
+            var zOrderItems = [
+                { text: this.l10n.getConstant('BringForward'), id: 'bringForward', iconCss: 'e-icons e-bring-forward' },
+                { text: this.l10n.getConstant('SendBackward'), id: 'sendBackward', iconCss: 'e-icons e-send-backward' },
+                { text: this.l10n.getConstant('BringToFront'), id: 'bringToFront', iconCss: 'e-icons e-bring-to-front' },
+                { text: this.l10n.getConstant('SendToBack'), id: 'sendToBack', iconCss: 'e-icons e-send-to-back' }
+            ];
+            // Initialize the DropDownButton component.
+            var drpDownBtn_3 = new DropDownButton({ items: zOrderItems, iconCss: 'e-icons e-layers',
+                beforeOpen: function (args) {
+                    if (document.getElementById(parent.element.id + '_zOrderBtn').classList.contains('e-disabled')) {
+                        args.cancel = true;
+                    }
+                    var indexObj = { freehandSelectedIndex: -1 };
+                    parent.notify('freehand-draw', { prop: 'getFreehandSelectedIndex', onPropertyChange: false, value: { obj: indexObj } });
+                    var orderObj = { order: null };
+                    parent.notify('shape', { prop: 'getHighestOrder', onPropertyChange: false, value: { obj: orderObj } });
+                    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                    var order = parent.activeObj.order ? parent.activeObj.order : parent.getObjFromId(parent.pointColl[indexObj['freehandSelectedIndex']].id).order;
+                    if (order && order >= orderObj['order']) {
+                        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                        args.items[0].disabled = true;
+                        args.items[2].disabled = true;
+                    }
+                    else {
+                        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                        args.items[0].disabled = false;
+                        args.items[2].disabled = false;
+                    }
+                    parent.notify('shape', { prop: 'getLowestOrder', onPropertyChange: false, value: { obj: orderObj } });
+                    if (order && order <= orderObj['order']) {
+                        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                        args.items[1].disabled = true;
+                        args.items[3].disabled = true;
+                    }
+                    else {
+                        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                        args.items[1].disabled = false;
+                        args.items[3].disabled = false;
+                    }
+                },
+                open: function (args) {
+                    if (Browser.isDevice) {
+                        args.element.parentElement.style.top = drpDownBtn_3.element.getBoundingClientRect().top -
+                            args.element.parentElement.offsetHeight + 'px';
+                    }
+                },
+                select: function (args) {
+                    _this.triggerTbarClickEvent(args);
+                    var obj = { freehandDrawSelectedId: null };
+                    parent.notify('freehand-draw', { prop: 'getFreehandDrawSelectedId', onPropertyChange: false, value: { obj: obj } });
+                    var shapeId = obj['freehandDrawSelectedId'] ? obj['freehandDrawSelectedId'] : parent.activeObj.currIndex;
+                    parent.updateShapeOrder(shapeId, args.item.id);
+                    if (Browser.isDevice) {
+                        if (document.getElementById(id + '_bottomToolbar')) {
+                            /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
+                            var toolbar_9 = getComponent(id + '_bottomToolbar', 'toolbar');
+                            toolbar_9.refreshOverflow();
+                        }
+                    }
+                    else {
+                        if (document.getElementById(id + '_toolbar')) {
+                            /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
+                            var toolbar_10 = getComponent(id + '_toolbar', 'toolbar');
+                            toolbar_10.refreshOverflow();
+                        }
+                    }
+                    if (shapeId.indexOf('shape') > -1) {
+                        parent.notify('undo-redo', { prop: 'updateUndoRedoStack', onPropertyChange: false });
+                    }
+                    else if (shapeId.indexOf('pen') > -1) {
+                        parent.notify('undo-redo', { prop: 'updateUndoRedoStack', value: { isPenDraw: true } });
+                    }
+                }
+            });
+            // Render initialized DropDownButton.
+            drpDownBtn_3.appendTo('#' + id + '_zOrderBtn');
         }
     };
     ToolbarModule.prototype.createStartBtn = function () {
@@ -1977,9 +2456,13 @@ var ToolbarModule = /** @class */ (function () {
                 }
             },
             select: function (args) {
+                var idToValue = { '1': 'none', '2': 'bar', '3': 'arrow', '4': 'arrowSolid',
+                    '5': 'circle', '6': 'circleSolid', '7': 'square', '8': 'squareSolid' };
+                parent.notify('selection', { prop: 'setArrowShape', value: { type: 'initial', shape: idToValue["" + args.item.id] } });
                 _this.triggerTbarClickEvent(args);
                 spanElem.textContent = args.item.text;
                 parent.updateArrow('startArrow', args.item.id);
+                parent.notify('undo-redo', { prop: 'updateUndoRedoStack', onPropertyChange: false });
             }
         });
         // Render initialized DropDownButton.
@@ -2020,9 +2503,13 @@ var ToolbarModule = /** @class */ (function () {
                 }
             },
             select: function (args) {
+                var idToValue = { '1': 'none', '2': 'bar', '3': 'arrow', '4': 'arrowSolid',
+                    '5': 'circle', '6': 'circleSolid', '7': 'square', '8': 'squareSolid' };
+                parent.notify('selection', { prop: 'setArrowShape', value: { type: 'final', shape: idToValue["" + args.item.id] } });
                 _this.triggerTbarClickEvent(args);
                 spanElem.textContent = args.item.text;
                 parent.updateArrow('endArrow', args.item.id);
+                parent.notify('undo-redo', { prop: 'updateUndoRedoStack', onPropertyChange: false });
             }
         });
         // Render initialized DropDownButton.
@@ -2064,6 +2551,10 @@ var ToolbarModule = /** @class */ (function () {
                 tooltipText: this.l10n.getConstant('Opacity'), align: 'Center' });
         }
         toolbarItems.push({ align: 'Center', type: 'Separator' });
+        if (items.indexOf('z-order') > -1) {
+            toolbarItems.push({ id: id + '_zOrder', cssClass: 'top-icon e-list-unordered-3', tooltipText: this.l10n.getConstant('ZOrder'), align: 'Center',
+                type: 'Input', template: '<button id="' + id + '_zOrderBtn"></button>' });
+        }
         if (items.indexOf('duplicate') > -1) {
             toolbarItems.push({ id: id + '_duplicate', prefixIcon: 'e-icons e-order', cssClass: 'top-icon e-order',
                 tooltipText: this.l10n.getConstant('Duplicate'), align: 'Center', disabled: (parent.textArea.style.display === 'block' || parent.textArea.style.display === 'inline-block') ? true : false });
@@ -2137,10 +2628,8 @@ var ToolbarModule = /** @class */ (function () {
                 _this.renderAnnotationBtn(true);
                 _this.createTextColor(items);
                 _this.createTextBtn(items);
+                _this.createZOrderBtn(items);
                 _this.wireZoomBtnEvents();
-                if (!Browser.isDevice) {
-                    _this.renderSaveBtn();
-                }
                 parent.trigger('toolbarCreated', { toolbarType: 'text' });
                 if (Browser.isDevice) {
                     if (_this.defToolbarItems.length > 0 && document.getElementById(id + '_bottomToolbar')) {
@@ -2188,6 +2677,9 @@ var ToolbarModule = /** @class */ (function () {
                     parent.updateFontColor(args.value);
                     strokeDDB_2.element.children[0].style.backgroundColor = args.currentValue.rgba;
                     strokeDDB_2.toggle();
+                    if (parent.activeObj.activePoint.width !== 0 || parent.activeObj.activePoint.height !== 0) {
+                        parent.notify('undo-redo', { prop: 'updateUndoRedoStack', onPropertyChange: false });
+                    }
                 },
                 onModeSwitch: function (args) {
                     if (Browser.isDevice) {
@@ -2224,17 +2716,17 @@ var ToolbarModule = /** @class */ (function () {
         var id = parent.element.id;
         if (items.indexOf('fontFamily') > -1) {
             var fontNameBtn = document.getElementById(id + '_fontFamilyBtn');
-            var spanElem_2 = document.createElement('span');
+            var spanElem_3 = document.createElement('span');
             if (Browser.isDevice) {
-                spanElem_2.innerHTML = 'ABC';
-                spanElem_2.setAttribute('style', 'font-family: ' + parent.fontFamily.default.toLowerCase() + "'");
+                spanElem_3.innerHTML = 'ABC';
+                spanElem_3.setAttribute('style', 'font-family: ' + parent.fontFamily.default.toLowerCase() + '\'');
             }
             else {
-                spanElem_2.innerHTML = parent.fontFamily.default;
+                spanElem_3.innerHTML = parent.fontFamily.default;
             }
-            spanElem_2.className = 'e-text-font-family';
+            spanElem_3.className = 'e-text-font-family';
             if (fontNameBtn) {
-                fontNameBtn.appendChild(spanElem_2);
+                fontNameBtn.appendChild(spanElem_3);
             }
             var fontFamilyBtn_1 = new DropDownButton({ items: this.getFontFamilyItems(),
                 cssClass: 'e-font-family',
@@ -2261,11 +2753,12 @@ var ToolbarModule = /** @class */ (function () {
                 },
                 select: function (args) {
                     _this.triggerTbarClickEvent(args);
-                    spanElem_2.textContent = args.item.text;
+                    spanElem_3.textContent = args.item.text;
                     if (Browser.isDevice) {
-                        spanElem_2.setAttribute('style', 'font-family:' + args.item.id);
+                        spanElem_3.setAttribute('style', 'font-family:' + args.item.id);
                     }
                     parent.updateFontFamily(args.item.id);
+                    parent.notify('undo-redo', { prop: 'updateUndoRedoStack', onPropertyChange: false });
                 }
             });
             fontFamilyBtn_1.appendTo('#' + id + '_fontFamilyBtn');
@@ -2292,6 +2785,7 @@ var ToolbarModule = /** @class */ (function () {
                     _this.triggerTbarClickEvent(args);
                     fontSizeSpanElem_1.textContent = args.item.text;
                     parent.updateFontSize(args.item.text);
+                    parent.notify('undo-redo', { prop: 'updateUndoRedoStack', onPropertyChange: false });
                 }
             });
             fontSizeBtn_1.appendTo('#' + id + '_fontSizeBtn');
@@ -2318,11 +2812,10 @@ var ToolbarModule = /** @class */ (function () {
                 getComponent(toolbarElement, 'toolbar').destroy();
                 toolbarElement.innerHTML = '';
             }
-            if (toolbarElement && (this.defToolbarItems.length > 0 ||
-                parent.toolbar && parent.toolbar.length > 0 && parent.toolbar.indexOf('Open') === -1)) {
-                var toolbar_9 = getComponent(toolbarElement, 'toolbar');
-                if (!isNullOrUndefined(toolbar_9)) {
-                    toolbar_9.destroy();
+            if (toolbarElement && (this.defToolbarItems.length > 0 || parent.toolbar && parent.toolbar.length > 0 && parent.toolbar.indexOf('Open') === -1)) {
+                var toolbar_11 = getComponent(toolbarElement, 'toolbar');
+                if (!isNullOrUndefined(toolbar_11)) {
+                    toolbar_11.destroy();
                     document.getElementById(parent.element.id + '_toolbar').innerHTML = '';
                 }
             }
@@ -2337,8 +2830,7 @@ var ToolbarModule = /** @class */ (function () {
         if (document.querySelector('.e-slider-tooltip')) {
             document.querySelector('.e-slider-tooltip').remove();
         }
-        this.isFrameToolbar = false;
-        parent.isCropTab = false;
+        this.isFrameToolbar = parent.isCropTab = false;
         switch (type) {
             case 'main':
                 if (Browser.isDevice) {
@@ -2362,20 +2854,21 @@ var ToolbarModule = /** @class */ (function () {
                 }
                 break;
             case 'shapes':
+                parent.noPushUndo = true;
                 if (Browser.isDevice) {
                     this.initMainToolbar(false, true, true);
                 }
                 if (parent.activeObj.shape === 'line' || parent.activeObj.shape === 'path') {
-                    args.toolbarItems = ['strokeColor', 'strokeWidth', 'duplicate', 'remove'];
+                    args.toolbarItems = ['strokeColor', 'strokeWidth', 'z-order', 'duplicate', 'remove'];
                 }
                 else if (parent.activeObj.shape === 'arrow') {
-                    args.toolbarItems = ['strokeColor', 'strokeWidth', 'start', 'end', 'duplicate', 'remove'];
+                    args.toolbarItems = ['strokeColor', 'strokeWidth', 'start', 'end', 'z-order', 'duplicate', 'remove'];
                 }
                 else if (parent.activeObj.shape === 'image') {
-                    args.toolbarItems = ['flip', 'duplicate', 'remove', 'transparency'];
+                    args.toolbarItems = ['flip', 'z-order', 'duplicate', 'remove', 'transparency'];
                 }
                 else {
-                    args.toolbarItems = ['fillColor', 'strokeColor', 'strokeWidth', 'duplicate', 'remove'];
+                    args.toolbarItems = ['fillColor', 'strokeColor', 'strokeWidth', 'z-order', 'duplicate', 'remove'];
                 }
                 this.initShapesToolbarItem(args.toolbarItems);
                 break;
@@ -2383,14 +2876,14 @@ var ToolbarModule = /** @class */ (function () {
                 if (Browser.isDevice) {
                     this.initMainToolbar(false, true, true);
                 }
-                args.toolbarItems = ['fontFamily', 'fontSize', 'fontColor', 'bold', 'italic', 'duplicate', 'remove', 'text'];
+                args.toolbarItems = ['fontFamily', 'fontSize', 'fontColor', 'bold', 'italic', 'z-order', 'duplicate', 'remove', 'text'];
                 this.initTextToolbarItem(args.toolbarItems);
                 break;
             case 'pen':
                 if (Browser.isDevice) {
                     this.initMainToolbar(false, true, true);
                 }
-                args.toolbarItems = ['strokeColor', 'strokeWidth', 'remove', 'transparency'];
+                args.toolbarItems = ['strokeColor', 'strokeWidth', 'z-order', 'remove', 'transparency'];
                 this.initPenToolbarItem(args.toolbarItems);
                 break;
             case 'adjustment':
@@ -2450,6 +2943,7 @@ var ToolbarModule = /** @class */ (function () {
                 else {
                     this.initMainToolbar(true, null, null, false, true);
                 }
+                // eslint-disable-next-line no-case-declarations
                 var frameElem = parent.element.querySelector('#' + id + '_' + parent.frameObj.type);
                 if (frameElem) {
                     frameElem.classList.add('e-selected-btn');
@@ -2639,6 +3133,10 @@ var ToolbarModule = /** @class */ (function () {
                 align: 'Center', type: 'Input', template: '<button id="' + id + '_penStrokeWidth"></button>' });
         }
         toolbarItems.push({ align: 'Center', type: 'Separator' });
+        if (items.indexOf('z-order') > -1) {
+            toolbarItems.push({ id: id + '_zOrder', cssClass: 'top-icon e-list-unordered-3', tooltipText: this.l10n.getConstant('ZOrder'), align: 'Center',
+                type: 'Input', template: '<button id="' + id + '_zOrderBtn"></button>' });
+        }
         if (items.indexOf('remove') > -1) {
             toolbarItems.push({ id: id + '_remove', prefixIcon: 'e-icons e-trash', cssClass: 'top-icon e-trash',
                 tooltipText: this.l10n.getConstant('Remove'), align: 'Center' });
@@ -2686,10 +3184,8 @@ var ToolbarModule = /** @class */ (function () {
                 _this.renderAnnotationBtn(true);
                 _this.createPenColor(items);
                 _this.createPenBtn(items);
+                _this.createZOrderBtn(items);
                 _this.wireZoomBtnEvents();
-                if (!Browser.isDevice) {
-                    _this.renderSaveBtn();
-                }
                 parent.trigger('toolbarCreated', { toolbarType: 'pen' });
                 if (Browser.isDevice) {
                     if (_this.defToolbarItems.length > 0 && document.getElementById(id + '_toolbar')) {
@@ -2732,6 +3228,7 @@ var ToolbarModule = /** @class */ (function () {
                     _this.selFhdColor = args.currentValue.hex;
                     strokeDDB_3.element.children[0].style.backgroundColor = args.currentValue.rgba;
                     strokeDDB_3.toggle();
+                    parent.notify('undo-redo', { prop: 'updateUndoRedoStack', value: { isPenDraw: true } });
                 }
             }, '#' + id + '_pen_stroke');
             var strokeDDB_3 = new DropDownButton({
@@ -2780,48 +3277,56 @@ var ToolbarModule = /** @class */ (function () {
         ];
         if (items.indexOf('strokeWidth') > -1) {
             var strokeWidthBtn = document.getElementById(id + '_penStrokeWidth');
-            var spanElem_3 = document.createElement('span');
+            var spanElem_4 = document.createElement('span');
             var indexObj = { freehandSelectedIndex: null };
             parent.notify('freehand-draw', { prop: 'getFreehandSelectedIndex', onPropertyChange: false, value: { obj: indexObj } });
             if (!isNullOrUndefined(indexObj['freehandSelectedIndex']) && indexObj['freehandSelectedIndex'] > -1) {
-                spanElem_3.innerHTML = this.getPenStroke(parent.pointColl[indexObj['freehandSelectedIndex']].strokeWidth);
+                spanElem_4.innerHTML = this.getPenStroke(parent.pointColl[indexObj['freehandSelectedIndex']].strokeWidth);
             }
             else {
-                spanElem_3.innerHTML = this.l10n.getConstant('Small');
+                var obj = { penStrokeWidth: 2 };
+                parent.notify('freehand-draw', { prop: 'getPenStrokeWidth', onPropertyChange: false, value: { obj: obj } });
+                if (obj['penStrokeWidth']) {
+                    spanElem_4.innerHTML = this.getPenStroke(obj['penStrokeWidth']);
+                }
+                else {
+                    spanElem_4.innerHTML = this.l10n.getConstant('Small');
+                }
             }
-            spanElem_3.className = 'e-pen-stroke-width';
-            strokeWidthBtn.appendChild(spanElem_3);
-            var drpDownBtn_2 = new DropDownButton({ items: strokeWidthItems,
+            spanElem_4.className = 'e-pen-stroke-width';
+            strokeWidthBtn.appendChild(spanElem_4);
+            var drpDownBtn_4 = new DropDownButton({ items: strokeWidthItems,
                 open: function (args) {
                     if (Browser.isDevice) {
-                        args.element.parentElement.style.top = drpDownBtn_2.element.getBoundingClientRect().top -
+                        args.element.parentElement.style.top = drpDownBtn_4.element.getBoundingClientRect().top -
                             args.element.parentElement.offsetHeight + 'px';
                     }
-                    var activeBtn = spanElem_3.innerHTML;
+                    var activeBtn = spanElem_4.innerHTML;
                     args.element.querySelector('[aria-label = ' + '"' + activeBtn + '"' + ']').classList.add('e-selected-btn');
                 },
                 select: function (args) {
                     _this.triggerTbarClickEvent(args);
-                    spanElem_3.textContent = args.item.text;
+                    spanElem_4.textContent = args.item.text;
                     parent.updatePenStrokeWidth(args.item.id);
                     if (Browser.isDevice) {
                         if (document.getElementById(id + '_bottomToolbar')) {
                             /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
-                            var toolbar_10 = getComponent(id + '_bottomToolbar', 'toolbar');
-                            toolbar_10.refreshOverflow();
+                            var toolbar_12 = getComponent(id + '_bottomToolbar', 'toolbar');
+                            toolbar_12.refreshOverflow();
                         }
                     }
                     else {
                         if (document.getElementById(id + '_toolbar')) {
                             /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
-                            var toolbar_11 = getComponent(id + '_toolbar', 'toolbar');
-                            toolbar_11.refreshOverflow();
+                            var toolbar_13 = getComponent(id + '_toolbar', 'toolbar');
+                            toolbar_13.refreshOverflow();
                         }
                     }
+                    parent.notify('undo-redo', { prop: 'updateUndoRedoStack', value: { isPenDraw: true } });
                 }
             });
             // Render initialized DropDownButton.
-            drpDownBtn_2.appendTo('#' + id + '_penStrokeWidth');
+            drpDownBtn_4.appendTo('#' + id + '_penStrokeWidth');
         }
     };
     ToolbarModule.prototype.getPenStroke = function (value) {
@@ -2861,9 +3366,6 @@ var ToolbarModule = /** @class */ (function () {
             clicked: this.defToolbarClicked.bind(this),
             created: function () {
                 _this.wireZoomBtnEvents();
-                if (!Browser.isDevice) {
-                    _this.renderSaveBtn();
-                }
                 if (Browser.isDevice) {
                     if (_this.defToolbarItems.length > 0 && document.getElementById(id + '_toolbar')) {
                         /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
@@ -2965,8 +3467,8 @@ var ToolbarModule = /** @class */ (function () {
             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 };
+                    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 } });
@@ -2988,7 +3490,8 @@ var ToolbarModule = /** @class */ (function () {
                         fillDDB.element.children[0].classList.remove('e-nocolor-item');
                         fillDDB.element.children[0].style.backgroundColor = args.currentValue.rgba;
                     }
-                    parent.curFrameObjEvent = { previousFrameSetting: obj['frameChangeEventArgs'].previousFrameSetting, currentFrameSetting: obj['frameChangeEventArgs'].currentFrameSetting };
+                    parent.curFrameObjEvent = { previousFrameSetting: obj['frameChangeEventArgs'].previousFrameSetting,
+                        currentFrameSetting: obj['frameChangeEventArgs'].currentFrameSetting };
                     parent.isFrameBtnClick = true;
                 }
                 else {
@@ -3015,7 +3518,8 @@ var ToolbarModule = /** @class */ (function () {
             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;
+            parent.element.querySelector('.e-frame-stroke.e-template .e-dropdownbtn-preview').style.background
+                = parent.frameObj.gradientColor;
         }
     };
     ToolbarModule.prototype.createFrameColor = function () {
@@ -3032,8 +3536,8 @@ var ToolbarModule = /** @class */ (function () {
             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 };
+                    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 } });
@@ -3055,7 +3559,8 @@ var ToolbarModule = /** @class */ (function () {
                         fillDDB.element.children[0].classList.remove('e-nocolor-item');
                         fillDDB.element.children[0].style.backgroundColor = args.currentValue.rgba;
                     }
-                    parent.curFrameObjEvent = { previousFrameSetting: obj['frameChangeEventArgs'].previousFrameSetting, currentFrameSetting: obj['frameChangeEventArgs'].currentFrameSetting };
+                    parent.curFrameObjEvent = { previousFrameSetting: obj['frameChangeEventArgs'].previousFrameSetting,
+                        currentFrameSetting: obj['frameChangeEventArgs'].currentFrameSetting };
                     parent.isFrameBtnClick = true;
                 }
                 else {
@@ -3115,8 +3620,8 @@ var ToolbarModule = /** @class */ (function () {
                 _this.triggerTbarClickEvent(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 };
+                    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 } });
@@ -3132,7 +3637,8 @@ var ToolbarModule = /** @class */ (function () {
                     parent.notify('draw', { prop: 'render-image', value: { isMouseWheel: null, isPreventClearRect: null, isFrame: true } });
                     parent.notify('draw', { prop: 'redrawDownScale' });
                     drpDownBtn.content = args.item.text;
-                    parent.curFrameObjEvent = { previousFrameSetting: obj['frameChangeEventArgs'].previousFrameSetting, currentFrameSetting: obj['frameChangeEventArgs'].currentFrameSetting };
+                    parent.curFrameObjEvent = { previousFrameSetting: obj['frameChangeEventArgs'].previousFrameSetting,
+                        currentFrameSetting: obj['frameChangeEventArgs'].currentFrameSetting };
                     parent.isFrameBtnClick = true;
                 }
                 else {
@@ -3141,15 +3647,15 @@ var ToolbarModule = /** @class */ (function () {
                 if (Browser.isDevice) {
                     if (document.getElementById(id + '_bottomToolbar')) {
                         /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
-                        var toolbar_12 = getComponent(id + '_bottomToolbar', 'toolbar');
-                        toolbar_12.refreshOverflow();
+                        var toolbar_14 = getComponent(id + '_bottomToolbar', 'toolbar');
+                        toolbar_14.refreshOverflow();
                     }
                 }
                 else {
                     if (document.getElementById(id + '_toolbar')) {
                         /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
-                        var toolbar_13 = getComponent(id + '_toolbar', 'toolbar');
-                        toolbar_13.refreshOverflow();
+                        var toolbar_15 = getComponent(id + '_toolbar', 'toolbar');
+                        toolbar_15.refreshOverflow();
                     }
                 }
             }
@@ -3192,8 +3698,8 @@ var ToolbarModule = /** @class */ (function () {
                 _this.triggerTbarClickEvent(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 };
+                    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 } });
@@ -3209,7 +3715,8 @@ var ToolbarModule = /** @class */ (function () {
                     parent.notify('draw', { prop: 'render-image', value: { isMouseWheel: null, isPreventClearRect: null, isFrame: true } });
                     parent.notify('draw', { prop: 'redrawDownScale' });
                     drpDownBtn.content = args.item.text;
-                    parent.curFrameObjEvent = { previousFrameSetting: obj['frameChangeEventArgs'].previousFrameSetting, currentFrameSetting: obj['frameChangeEventArgs'].currentFrameSetting };
+                    parent.curFrameObjEvent = { previousFrameSetting: obj['frameChangeEventArgs'].previousFrameSetting,
+                        currentFrameSetting: obj['frameChangeEventArgs'].currentFrameSetting };
                     parent.isFrameBtnClick = true;
                 }
                 else {
@@ -3218,15 +3725,15 @@ var ToolbarModule = /** @class */ (function () {
                 if (Browser.isDevice) {
                     if (document.getElementById(id + '_bottomToolbar')) {
                         /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
-                        var toolbar_14 = getComponent(id + '_bottomToolbar', 'toolbar');
-                        toolbar_14.refreshOverflow();
+                        var toolbar_16 = getComponent(id + '_bottomToolbar', 'toolbar');
+                        toolbar_16.refreshOverflow();
                     }
                 }
                 else {
                     if (document.getElementById(id + '_toolbar')) {
                         /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
-                        var toolbar_15 = getComponent(id + '_toolbar', 'toolbar');
-                        toolbar_15.refreshOverflow();
+                        var toolbar_17 = getComponent(id + '_toolbar', 'toolbar');
+                        toolbar_17.refreshOverflow();
                     }
                 }
             }
@@ -3269,8 +3776,8 @@ var ToolbarModule = /** @class */ (function () {
                 _this.triggerTbarClickEvent(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 };
+                    offset: parent.frameObj.offset, borderRadius: parent.frameObj.radius,
+                    lineCount: parent.frameObj.amount, frameLineStyle: parent.toPascalCase(parent.frameObj.border) };
                 var temp = parent.frameObj.offset;
                 var object = { currObj: {} };
                 parent.notify('filter', { prop: 'getCurrentObj', onPropertyChange: false, value: { object: object } });
@@ -3286,7 +3793,8 @@ var ToolbarModule = /** @class */ (function () {
                     parent.notify('draw', { prop: 'render-image', value: { isMouseWheel: null, isPreventClearRect: null, isFrame: true } });
                     parent.notify('draw', { prop: 'redrawDownScale' });
                     drpDownBtn.content = args.item.text;
-                    parent.curFrameObjEvent = { previousFrameSetting: obj['frameChangeEventArgs'].previousFrameSetting, currentFrameSetting: obj['frameChangeEventArgs'].currentFrameSetting };
+                    parent.curFrameObjEvent = { previousFrameSetting: obj['frameChangeEventArgs'].previousFrameSetting,
+                        currentFrameSetting: obj['frameChangeEventArgs'].currentFrameSetting };
                     parent.isFrameBtnClick = true;
                 }
                 else {
@@ -3295,15 +3803,15 @@ var ToolbarModule = /** @class */ (function () {
                 if (Browser.isDevice) {
                     if (document.getElementById(id + '_bottomToolbar')) {
                         /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
-                        var toolbar_16 = getComponent(id + '_bottomToolbar', 'toolbar');
-                        toolbar_16.refreshOverflow();
+                        var toolbar_18 = getComponent(id + '_bottomToolbar', 'toolbar');
+                        toolbar_18.refreshOverflow();
                     }
                 }
                 else {
                     if (document.getElementById(id + '_toolbar')) {
                         /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
-                        var toolbar_17 = getComponent(id + '_toolbar', 'toolbar');
-                        toolbar_17.refreshOverflow();
+                        var toolbar_19 = getComponent(id + '_toolbar', 'toolbar');
+                        toolbar_19.refreshOverflow();
                     }
                 }
             }
@@ -3347,7 +3855,8 @@ var ToolbarModule = /** @class */ (function () {
                 _this.triggerTbarClickEvent(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),
+                    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: {} };
@@ -3364,7 +3873,8 @@ var ToolbarModule = /** @class */ (function () {
                     parent.notify('draw', { prop: 'render-image', value: { isMouseWheel: null, isPreventClearRect: null, isFrame: true } });
                     parent.notify('draw', { prop: 'redrawDownScale' });
                     drpDownBtn.content = args.item.text;
-                    parent.curFrameObjEvent = { previousFrameSetting: obj['frameChangeEventArgs'].previousFrameSetting, currentFrameSetting: obj['frameChangeEventArgs'].currentFrameSetting };
+                    parent.curFrameObjEvent = { previousFrameSetting: obj['frameChangeEventArgs'].previousFrameSetting,
+                        currentFrameSetting: obj['frameChangeEventArgs'].currentFrameSetting };
                     parent.isFrameBtnClick = true;
                 }
                 else {
@@ -3373,15 +3883,15 @@ var ToolbarModule = /** @class */ (function () {
                 if (Browser.isDevice) {
                     if (document.getElementById(id + '_bottomToolbar')) {
                         /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
-                        var toolbar_18 = getComponent(id + '_bottomToolbar', 'toolbar');
-                        toolbar_18.refreshOverflow();
+                        var toolbar_20 = getComponent(id + '_bottomToolbar', 'toolbar');
+                        toolbar_20.refreshOverflow();
                     }
                 }
                 else {
                     if (document.getElementById(id + '_toolbar')) {
                         /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
-                        var toolbar_19 = getComponent(id + '_toolbar', 'toolbar');
-                        toolbar_19.refreshOverflow();
+                        var toolbar_21 = getComponent(id + '_toolbar', 'toolbar');
+                        toolbar_21.refreshOverflow();
                     }
                 }
             }
@@ -3424,8 +3934,8 @@ var ToolbarModule = /** @class */ (function () {
                 _this.triggerTbarClickEvent(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 };
+                    offset: parent.frameObj.offset, borderRadius: parent.frameObj.radius,
+                    lineCount: parent.frameObj.amount, frameLineStyle: parent.toPascalCase(parent.frameObj.border) };
                 var temp = parent.frameObj.amount;
                 var object = { currObj: {} };
                 parent.notify('filter', { prop: 'getCurrentObj', onPropertyChange: false, value: { object: object } });
@@ -3450,15 +3960,15 @@ var ToolbarModule = /** @class */ (function () {
                 if (Browser.isDevice) {
                     if (document.getElementById(id + '_bottomToolbar')) {
                         /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
-                        var toolbar_20 = getComponent(id + '_bottomToolbar', 'toolbar');
-                        toolbar_20.refreshOverflow();
+                        var toolbar_22 = getComponent(id + '_bottomToolbar', 'toolbar');
+                        toolbar_22.refreshOverflow();
                     }
                 }
                 else {
                     if (document.getElementById(id + '_toolbar')) {
                         /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
-                        var toolbar_21 = getComponent(id + '_toolbar', 'toolbar');
-                        toolbar_21.refreshOverflow();
+                        var toolbar_23 = getComponent(id + '_toolbar', 'toolbar');
+                        toolbar_23.refreshOverflow();
                     }
                 }
             }
@@ -3475,7 +3985,7 @@ var ToolbarModule = /** @class */ (function () {
         var strokeWidthItems = [
             { id: '1', text: this.l10n.getConstant('Solid') },
             { id: '2', text: this.l10n.getConstant('Dashed') },
-            { id: '3', text: this.l10n.getConstant('Dotted') },
+            { id: '3', text: this.l10n.getConstant('Dotted') }
         ];
         var strokeWidthBtn = document.getElementById(id + '_frameBorderBtn');
         var spanElem = document.createElement('span');
@@ -3497,10 +4007,10 @@ var ToolbarModule = /** @class */ (function () {
             },
             select: function (args) {
                 _this.triggerTbarClickEvent(args);
-                prevFrameSettings = { type: parent.toPascalCase(parent.frameObj.type), color: parent.frameObj.color,
+                prevFrameSettings = { lineCount: parent.frameObj.amount, color: parent.frameObj.color, borderRadius: parent.frameObj.radius,
                     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 };
+                    offset: parent.frameObj.offset, frameLineStyle: parent.toPascalCase(parent.frameObj.border),
+                    type: parent.toPascalCase(parent.frameObj.type) };
                 var temp = parent.frameObj.border;
                 var object = { currObj: {} };
                 parent.notify('filter', { prop: 'getCurrentObj', onPropertyChange: false, value: { object: object } });
@@ -3525,15 +4035,15 @@ var ToolbarModule = /** @class */ (function () {
                 if (Browser.isDevice) {
                     if (document.getElementById(id + '_bottomToolbar')) {
                         /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
-                        var toolbar_22 = getComponent(id + '_bottomToolbar', 'toolbar');
-                        toolbar_22.refreshOverflow();
+                        var toolbar_24 = getComponent(id + '_bottomToolbar', 'toolbar');
+                        toolbar_24.refreshOverflow();
                     }
                 }
                 else {
                     if (document.getElementById(id + '_toolbar')) {
                         /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
-                        var toolbar_23 = getComponent(id + '_toolbar', 'toolbar');
-                        toolbar_23.refreshOverflow();
+                        var toolbar_25 = getComponent(id + '_toolbar', 'toolbar');
+                        toolbar_25.refreshOverflow();
                     }
                 }
             }
@@ -3623,6 +4133,7 @@ var ToolbarModule = /** @class */ (function () {
             if (parent.activeObj.shape === 'image') {
                 toolbarItems.push('Flip');
             }
+            toolbarItems.push('BringToFront');
             toolbarItems.push('Clone');
             toolbarItems.push('Delete');
             if (parent.activeObj.shape === 'text') {
@@ -3631,6 +4142,7 @@ var ToolbarModule = /** @class */ (function () {
             args.shape = parent.toPascalCase(parent.activeObj.shape);
         }
         else if (isPenEdit) {
+            toolbarItems.push('BringToFront');
             toolbarItems.push('Delete');
             args.shape = 'Freehand draw';
         }
@@ -3643,6 +4155,10 @@ var ToolbarModule = /** @class */ (function () {
         else {
             for (var i = 0; i < args.toolbarItems.length; i++) {
                 switch (args.toolbarItems[i]) {
+                    case 'BringToFront':
+                        orgToolbarItems.push({ id: id + '_bringToFront', prefixIcon: 'e-icons e-bring-to-front',
+                            tooltipText: this.l10n.getConstant('BringToFront'), align: 'Left' });
+                        break;
                     case 'Clone':
                         orgToolbarItems.push({ id: id + '_duplicate', prefixIcon: 'e-icons e-order', cssClass: 'top-icon e-order',
                             tooltipText: this.l10n.getConstant('Duplicate'), align: 'Left' });
@@ -3690,7 +4206,17 @@ var ToolbarModule = /** @class */ (function () {
                 toolbarObj.appendTo('#' + id + '_quickAccessToolbar');
             }
             var height = this.toolbarHeight && this.toolbarHeight !== 0 ? this.toolbarHeight : qtArea.clientHeight;
-            if (isNullOrUndefined(isPenEdit)) {
+            if (isNullOrUndefined(isPenEdit) && (parent.activeObj.activePoint.width !== 0 ||
+                parent.activeObj.activePoint.height !== 0 ||
+                (parent.activeObj.shape && parent.activeObj.shape === 'path' && parent.activeObj.pointColl.length > 0))) {
+                var orderObj = { order: null };
+                parent.notify('shape', { prop: 'getHighestOrder', onPropertyChange: false, value: { obj: orderObj } });
+                if (parent.activeObj.order > orderObj['order']) {
+                    document.getElementById(parent.element.id + '_bringToFront').classList.add('e-disabled');
+                }
+                else {
+                    document.getElementById(parent.element.id + '_bringToFront').classList.remove('e-disabled');
+                }
                 qtArea.style.width = 'auto';
                 parent.activeObj.activePoint.width = Math.abs(parent.activeObj.activePoint.width);
                 parent.activeObj.activePoint.height = Math.abs(parent.activeObj.activePoint.height);
@@ -3727,14 +4253,23 @@ var ToolbarModule = /** @class */ (function () {
                 }
             }
             else if (isPenEdit) {
-                var obj = { activePoint: null };
-                var indexObj = { freehandSelectedIndex: null };
+                var indexObj = { freehandSelectedIndex: -1 };
                 parent.notify('freehand-draw', { prop: 'getFreehandSelectedIndex', onPropertyChange: false, value: { obj: indexObj } });
+                var orderObj = { order: null };
+                parent.notify('shape', { prop: 'getHighestOrder', onPropertyChange: false, value: { obj: orderObj } });
+                // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                if (parent.getObjFromId(parent.pointColl[indexObj['freehandSelectedIndex']].id).order >= orderObj['order']) {
+                    document.getElementById(parent.element.id + '_bringToFront').classList.add('e-disabled');
+                }
+                else {
+                    document.getElementById(parent.element.id + '_bringToFront').classList.remove('e-disabled');
+                }
+                var obj = { activePoint: null };
                 parent.notify('freehand-draw', { prop: 'getSqPtFD',
                     value: { idx: indexObj['freehandSelectedIndex'], obj: obj } });
                 var point = obj['activePoint'];
                 qtArea.style.width = 'auto';
-                qtArea.style.left = (point.startX + (point.width / 2)) - (items.length * 27) + 'px';
+                qtArea.style.left = (point.startX + (point.width / 2)) - (items.length * 24) + 'px';
                 if (point.startY - (height + (height / 1.5)) < parent.img.destTop) {
                     qtArea.style.top = parent.img.destTop + 'px';
                 }
@@ -3742,6 +4277,9 @@ var ToolbarModule = /** @class */ (function () {
                     qtArea.style.top = point.startY - (height + (height / 1.5)) + 'px';
                 }
             }
+            else {
+                qtArea.style.display = 'none';
+            }
             if (parseFloat(qtArea.style.top) < 0) {
                 qtArea.style.top = '0px';
             }
@@ -3825,7 +4363,6 @@ var ToolbarModule = /** @class */ (function () {
     ToolbarModule.prototype.quickAccessToolbarClicked = function (args, isContextualToolbar) {
         var parent = this.parent;
         var id = parent.element.id;
-        var points = { x: parent.activeObj.activePoint.startX, y: parent.activeObj.activePoint.startY };
         if (args.item) {
             var isPreventUndoRedo = null;
             var obj = { prevActObj: null };
@@ -3839,6 +4376,10 @@ var ToolbarModule = /** @class */ (function () {
             var type = args.item.id.replace(id + '_', '').toLowerCase();
             var left = void 0;
             var right = void 0;
+            var indexObj = { freehandSelectedIndex: null };
+            var shapeId = void 0;
+            var isDisabled = void 0;
+            var orderObj = { order: null };
             switch (type) {
                 case 'duplicate':
                     if (!parent.element.querySelector('#' + id + '_duplicate').classList.contains('e-disabled')) {
@@ -3851,6 +4392,7 @@ var ToolbarModule = /** @class */ (function () {
                     break;
                 case 'remove':
                     if (!parent.element.querySelector('#' + id + '_remove').classList.contains('e-disabled')) {
+                        parent.noPushUndo = false;
                         this.refreshSlider();
                         parent.notify('selection', { prop: 'deleteItem', onPropertyChange: false });
                     }
@@ -3868,18 +4410,49 @@ var ToolbarModule = /** @class */ (function () {
                         (right && !right.classList.contains('e-disabled'))) {
                         parent.rotateImage(args.item.id.replace(id + '_', '').toLowerCase());
                     }
+                    parent.notify('undo-redo', { prop: 'updateUndoRedoStack', onPropertyChange: false });
                     break;
                 case 'hflip':
                     if (!parent.element.querySelector('#' + id + '_hFlip').classList.contains('e-disabled')) {
                         ctx = parent.activeObj.imageCanvas.getContext('2d');
                         parent.horizontalFlip(ctx);
                     }
+                    parent.notify('undo-redo', { prop: 'updateUndoRedoStack', onPropertyChange: false });
                     break;
                 case 'vflip':
                     if (!parent.element.querySelector('#' + id + '_vFlip').classList.contains('e-disabled')) {
                         ctx = parent.activeObj.imageCanvas.getContext('2d');
                         parent.verticalFlip(ctx);
                     }
+                    parent.notify('undo-redo', { prop: 'updateUndoRedoStack', onPropertyChange: false });
+                    break;
+                case 'bringtofront':
+                    if (!parent.element.querySelector('#' + id + '_bringToFront').classList.contains('e-disabled')) {
+                        parent.notify('freehand-draw', { prop: 'getFreehandSelectedIndex', onPropertyChange: false, value: { obj: indexObj } });
+                        shapeId = indexObj['freehandSelectedIndex'] !== null ? parent.pointColl[indexObj['freehandSelectedIndex']].id :
+                            parent.activeObj.currIndex;
+                        parent.updateShapeOrder(shapeId, type);
+                        isDisabled = false;
+                        parent.notify('shape', { prop: 'getHighestOrder', onPropertyChange: false, value: { obj: orderObj } });
+                        if (shapeId.indexOf('pen') > -1) {
+                            parent.notify('shape', { prop: 'updateShapeColl', onPropertyChange: false });
+                            /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
+                            var order = parent.getObjFromId(shapeId).order;
+                            isDisabled = order >= orderObj['order'] ? true : false;
+                        }
+                        else {
+                            /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
+                            var order = parent.getObjFromId(shapeId).order;
+                            isDisabled = order > orderObj['order'] ? true : false;
+                        }
+                        if (isDisabled) {
+                            document.getElementById(parent.element.id + '_bringToFront').classList.add('e-disabled');
+                        }
+                        else {
+                            document.getElementById(parent.element.id + '_bringToFront').classList.remove('e-disabled');
+                        }
+                        parent.notify('undo-redo', { prop: 'updateUndoRedoStack', onPropertyChange: false });
+                    }
                     break;
             }
             if (type === 'duplicate' || type === 'remove') {
@@ -3912,6 +4485,15 @@ var ToolbarModule = /** @class */ (function () {
             points.x = object1['x'];
             points.y = object1['y'];
         }
+        var tempActiveObj = extend({}, parent.activeObj, {}, true);
+        parent.notify('shape', { prop: 'refreshActiveObj', onPropertyChange: false });
+        this.upperContext.clearRect(0, 0, parent.upperCanvas.width, parent.upperCanvas.height);
+        this.lowerContext.clearRect(0, 0, parent.upperCanvas.width, parent.upperCanvas.height);
+        parent.notify('draw', { prop: 'redrawImgWithObj', onPropertyChange: false });
+        parent.notify('draw', { prop: 'redrawDownScale' });
+        parent.notify('draw', { prop: 'clearOuterCanvas', onPropertyChange: false, value: { context: this.lowerContext } });
+        parent.notify('draw', { prop: 'clearOuterCanvas', onPropertyChange: false, value: { context: this.upperContext } });
+        parent.activeObj = tempActiveObj;
         parent.notify('shape', { prop: 'renderTextArea', onPropertyChange: false,
             value: { x: points.x, y: points.y, actObj: parent.activeObj } });
         if (isNullOrUndefined(parent.activeObj.currIndex)) {
@@ -3933,6 +4515,19 @@ var ToolbarModule = /** @class */ (function () {
         parent.notify('draw', { prop: 'getNewPath', value: { obj: pathObject } });
         var objColl;
         var duplicateObj = extend({}, parent.activeObj, {}, true);
+        var orderObj = { order: null };
+        parent.notify('shape', { prop: 'getHighestOrder', onPropertyChange: false, value: { obj: orderObj } });
+        if (duplicateObj.order) {
+            parent.notify('shape', { prop: 'updateShapeColl', onPropertyChange: false });
+            duplicateObj.order = orderObj['order'] > duplicateObj.order ? orderObj['order'] + 1 : duplicateObj.order + 1;
+        }
+        else {
+            parent.noPushUndo = true;
+            parent.okBtn();
+            parent.noPushUndo = false;
+            parent.selectShape(duplicateObj.currIndex);
+            duplicateObj.order = orderObj['order'] > duplicateObj.order ? orderObj['order'] + 1 : duplicateObj.order + 1;
+        }
         if (duplicateObj.shape === 'image') {
             objColl = extend([], parent.objColl, [], true);
             parent.notify('undo-redo', { prop: 'updateUrObj', onPropertyChange: false, value: { objColl: objColl } });
@@ -3948,9 +4543,10 @@ var ToolbarModule = /** @class */ (function () {
         else {
             parent.notify('shape', { prop: 'applyActObj', onPropertyChange: false, value: { isMouseDown: true } });
         }
-        if (pathObject['isNewPath']) {
-            parent.notify('undo-redo', { prop: 'updateCurrUrc', value: { type: 'ok' } });
-        }
+        var noPushUndo = parent.noPushUndo;
+        parent.noPushUndo = false;
+        parent.notify('undo-redo', { prop: 'updateCurrUrc', value: { type: 'ok' } });
+        parent.noPushUndo = noPushUndo;
         objColl = extend([], parent.objColl, [], true);
         duplicateObj.activePoint.startX += 10;
         duplicateObj.activePoint.startY -= 10;
@@ -3965,12 +4561,16 @@ var ToolbarModule = /** @class */ (function () {
         else if (duplicateObj.shape === 'image') {
             duplicateObj.imageCanvas = parent.createElement('canvas');
         }
+        var shapeIDObj = { id: 'shape_' + (parent.objColl.length + 1) };
+        parent.notify('shape', { prop: 'getNewShapeId', onPropertyChange: false, value: { obj: shapeIDObj } });
+        duplicateObj.currIndex = shapeIDObj['id'];
         parent.activeObj = extend({}, duplicateObj, {}, true);
         if (parent.activeObj.shape === 'image') {
             var activePoint = extend({}, duplicateObj.activePoint, {}, true);
             var dimObj = { width: 0, height: 0 };
             parent.notify('transform', { prop: 'calcMaxDimension', onPropertyChange: false,
-                value: { width: parent.activeObj.imageElement.width, height: parent.activeObj.imageElement.height, obj: dimObj, isImgShape: null } });
+                value: { width: parent.activeObj.imageElement.width, height: parent.activeObj.imageElement.height,
+                    obj: dimObj, isImgShape: null } });
             parent.activeObj.activePoint.width = dimObj['width'];
             parent.activeObj.activePoint.height = dimObj['height'];
             if (parent.activeObj.isHorImageFlip && parent.activeObj.isVerImageFlip) {
@@ -4057,8 +4657,8 @@ var ToolbarModule = /** @class */ (function () {
         var parent = this.parent;
         var id = parent.element.id;
         var zoomIn = parent.element.querySelector('#' + id + '_zoomIn');
-        var aspectRatioHeight = parent.element.querySelector('#' + parent.element.id + '_resizeHeight');
-        var aspectRatioWidth = parent.element.querySelector('#' + parent.element.id + '_resizeWidth');
+        var aspectRatioHeight = parent.element.querySelector('#' + id + '_resizeHeight');
+        var aspectRatioWidth = parent.element.querySelector('#' + id + '_resizeWidth');
         var isCropSelection = false;
         var panBtn;
         var splitWords;
@@ -4088,7 +4688,7 @@ var ToolbarModule = /** @class */ (function () {
                         this.cancelPan();
                         parent.notify('transform', { prop: 'setDisablePan', onPropertyChange: false, value: { bool: true } });
                         if (this.currentToolbar === 'pen') {
-                            parent.freehandDraw(true);
+                            parent.freeHandDraw(true);
                         }
                     }
                     else {
@@ -4110,13 +4710,16 @@ var ToolbarModule = /** @class */ (function () {
                     this.refreshToolbar('main');
                     break;
                 case 'cancel':
-                    parent.notify('draw', { prop: 'performCancel', value: { isContextualToolbar: isContextualToolbar } });
+                    parent.notify('draw', { prop: 'performCancel', value: { isContextualToolbar: isContextualToolbar, isFinalCancel: true } });
                     break;
                 case 'ok':
-                    parent.okBtn();
+                    parent.okBtn(null, true);
+                    parent.drawingShape = null;
                     this.refreshDropDownBtn(false);
                     this.currentToolbar = 'main';
                     parent.isStraightening = false;
+                    parent.notify('draw', { prop: 'resetTempObjColl' });
+                    parent.notify('draw', { prop: 'resetTempPointColl' });
                     break;
                 case 'crop':
                     parent.notify('transform', { prop: 'disableZoomOutBtn', value: { isZoomOut: true } });
@@ -4134,14 +4737,18 @@ var ToolbarModule = /** @class */ (function () {
                     this.currentToolbar = 'main';
                     break;
                 case 'undo':
-                    if (parent.togglePen) {
-                        parent.notify('draw', { prop: 'performCancel', value: { isContextualToolbar: isContextualToolbar } });
+                    parent.noPushUndo = false;
+                    if (parent.togglePen || parent.drawingShape) {
+                        parent.okBtn();
+                        parent.drawingShape = null;
                     }
                     parent.notify('undo-redo', { prop: 'call-undo' });
                     break;
                 case 'redo':
-                    if (parent.togglePen) {
-                        parent.notify('draw', { prop: 'performCancel', value: { isContextualToolbar: isContextualToolbar } });
+                    parent.noPushUndo = false;
+                    if (parent.togglePen || parent.drawingShape) {
+                        parent.okBtn();
+                        parent.drawingShape = null;
                     }
                     parent.notify('undo-redo', { prop: 'call-redo' });
                     break;
@@ -4254,6 +4861,9 @@ var ToolbarModule = /** @class */ (function () {
                     else {
                         parent.element.querySelector('#' + id + '_bold').classList.add('e-selected-btn');
                     }
+                    if (parent.activeObj.activePoint.width !== 0 || parent.activeObj.activePoint.height !== 0) {
+                        parent.notify('undo-redo', { prop: 'updateUndoRedoStack', onPropertyChange: false });
+                    }
                     break;
                 case 'italic':
                     parent.notify('selection', { prop: 'setInitialTextEdit', value: { bool: false } });
@@ -4279,6 +4889,9 @@ var ToolbarModule = /** @class */ (function () {
                     else {
                         parent.element.querySelector('#' + id + '_italic').classList.add('e-selected-btn');
                     }
+                    if (parent.activeObj.activePoint.width !== 0 || parent.activeObj.activePoint.height !== 0) {
+                        parent.notify('undo-redo', { prop: 'updateUndoRedoStack', onPropertyChange: false });
+                    }
                     break;
                 case 'croptransform':
                     this.performCropTransformClick();
@@ -4298,16 +4911,10 @@ var ToolbarModule = /** @class */ (function () {
                     }
                     break;
                 case 'save':
-                    if (parent.element.querySelector('#' + id + '_saveBtn').classList.contains('e-hide')) {
-                        parent.element.querySelector('#' + id + '_saveBtn').classList.remove('e-hide');
-                        parent.element.querySelector('#' + id + '_saveBtn').focus();
-                        break;
-                    }
-                    else {
-                        parent.okBtn();
-                    }
-                    parent.element.querySelector('#' + id + '_saveBtn').classList.add('e-hide');
-                    parent.element.querySelector('#' + id + '_saveBtn').click();
+                    parent.noPushUndo = false;
+                    parent.okBtn();
+                    parent.drawingShape = null;
+                    this.saveDialogPopup();
                     break;
                 case 'transparency':
                     this.updateContextualToolbar('transparency', 'transparency');
@@ -4383,8 +4990,10 @@ var ToolbarModule = /** @class */ (function () {
         var parent = this.parent;
         this.isFrameToolbar = false;
         parent.notify('transform', { prop: 'resetZoom', onPropertyChange: false });
-        while (true) {
+        var isSmaller = true;
+        while (isSmaller) {
             if (this.toolbarHeight + parent.img.destTop >= (this.toolbarHeight + parent.cxtTbarHeight)) {
+                isSmaller = false;
                 break;
             }
             parent.notify('transform', { prop: 'zoomAction', onPropertyChange: false,
@@ -4458,9 +5067,21 @@ var ToolbarModule = /** @class */ (function () {
         if (e) {
             var parent_1 = this.parent;
             if ((parent_1.zoomSettings.zoomTrigger & ZoomTrigger.Toolbar) === ZoomTrigger.Toolbar) {
+                parent_1.noPushUndo = false;
                 if (parent_1.currObjType.isFiltered) {
                     parent_1.okBtn();
                 }
+                var drawingShape = parent_1.drawingShape;
+                if (parent_1.drawingShape) {
+                    var id = parent_1.activeObj.currIndex;
+                    parent_1.noPushUndo = true;
+                    parent_1.okBtn();
+                    parent_1.noPushUndo = false;
+                    parent_1.drawingShape = null;
+                    if (id) {
+                        parent_1.selectShape(id);
+                    }
+                }
                 this.refreshShapeDrawing();
                 if (Browser.isDevice && e.type === 'touchstart') {
                     if (!e.returnValue) {
@@ -4485,6 +5106,7 @@ var ToolbarModule = /** @class */ (function () {
                     parent_1.notify('undo-redo', { prop: 'updateCurrUrc', value: { type: 'ok' } });
                 }
                 parent_1.notify('draw', { prop: 'resetCurrentSelectionPoint' });
+                parent_1.drawingShape = drawingShape;
                 parent_1.notify('transform', { prop: 'zoomAction', onPropertyChange: false,
                     value: { zoomFactor: .1, zoomPoint: null, isResize: null } });
                 parent_1.notify('draw', { prop: 'redrawDownScale' });
@@ -4503,9 +5125,21 @@ var ToolbarModule = /** @class */ (function () {
         if (e) {
             var parent_2 = this.parent;
             if ((parent_2.zoomSettings.zoomTrigger & ZoomTrigger.Toolbar) === ZoomTrigger.Toolbar) {
+                parent_2.noPushUndo = false;
                 if (parent_2.currObjType.isFiltered) {
                     parent_2.okBtn();
                 }
+                var drawingShape = parent_2.drawingShape;
+                if (parent_2.drawingShape) {
+                    var id = parent_2.activeObj.currIndex;
+                    parent_2.noPushUndo = true;
+                    parent_2.okBtn();
+                    parent_2.noPushUndo = false;
+                    parent_2.drawingShape = null;
+                    if (id) {
+                        parent_2.selectShape(id);
+                    }
+                }
                 this.refreshShapeDrawing();
                 if (Browser.isDevice && e.type === 'touchstart') {
                     if (!e.returnValue) {
@@ -4530,6 +5164,7 @@ var ToolbarModule = /** @class */ (function () {
                     parent_2.notify('undo-redo', { prop: 'updateCurrUrc', value: { type: 'ok' } });
                 }
                 parent_2.notify('draw', { prop: 'resetCurrentSelectionPoint' });
+                parent_2.drawingShape = drawingShape;
                 parent_2.notify('transform', { prop: 'zoomAction', onPropertyChange: false,
                     value: { zoomFactor: -.1, zoomPoint: null, isResize: null } });
                 parent_2.notify('draw', { prop: 'redrawDownScale' });
@@ -4730,16 +5365,14 @@ var ToolbarModule = /** @class */ (function () {
                 parent.notify('selection', { prop: 'setSliderActive', onPropertyChange: false, value: { bool: true } });
                 if (type === 'transparency') {
                     if (parent.activeObj.shape) {
-                        var prevCropObj = void 0;
-                        var prevObj = void 0;
                         if (isNullOrUndefined(parent.activeObj.imageRatio)) {
                             parent.notify('shape', { prop: 'updImgRatioForActObj', onPropertyChange: false });
                         }
                         parent.notify('shape', { prop: 'pushActItemIntoObj' });
-                        prevCropObj = extend({}, parent.cropObj, {}, true);
+                        var prevCropObj = extend({}, parent.cropObj, {}, true);
                         var object = { currObj: {} };
                         parent.notify('filter', { prop: 'getCurrentObj', onPropertyChange: false, value: { object: object } });
-                        prevObj = object['currObj'];
+                        var prevObj = object['currObj'];
                         prevObj.objColl = extend([], parent.objColl, [], true);
                         prevObj.pointColl = extend([], parent.pointColl, [], true);
                         prevObj.afterCropActions = extend([], parent.afterCropActions, [], true);
@@ -4781,6 +5414,10 @@ var ToolbarModule = /** @class */ (function () {
                     parent.notify('draw', { prop: 'redrawDownScale' });
                 }
                 parent.notify('selection', { prop: 'setSliderActive', onPropertyChange: false, value: { bool: false } });
+                if (type === 'transparency') {
+                    parent.notify('undo-redo', { prop: 'updateUndoRedoStack', onPropertyChange: false });
+                    parent.element.querySelector('#' + parent.element.id + '_transparency').click();
+                }
             }
         });
     };
@@ -4832,7 +5469,7 @@ var ToolbarModule = /** @class */ (function () {
     ToolbarModule.prototype.refreshSlider = function () {
         var id = this.parent.element.id;
         var sliderWrapper = document.querySelector('#' + id + '_sliderWrapper');
-        // eslint-disable-next-line
+        /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
         var slider = document.querySelector('.e-slider');
         var hdrWrapper = document.querySelector('#' + id + '_headWrapper');
         if (hdrWrapper) {
@@ -5028,6 +5665,9 @@ var ToolbarModule = /** @class */ (function () {
         parent.activeObj.shapeFlip = parent.transform.currFlipState;
         parent.activeObj.textFlip = parent.transform.currFlipState;
         parent.activeObj.flipObjColl = [];
+        var orderObj = { order: null };
+        parent.notify('shape', { prop: 'getNewOrder', onPropertyChange: false, value: { obj: orderObj } });
+        parent.activeObj.order = orderObj['order'];
     };
     ToolbarModule.prototype.isToolbarString = function (items) {
         var isString = false;