@syncfusion/ej2-image-editor 26.1.40 → 26.2.4

package/dist/es6/ej2-image-editor.es2015.js

@@ -1144,7 +1144,7 @@ class Draw {
                 args.value['obj']['isNewPath'] = this.isNewPath;
                 break;
             case 'getArrowDimension':
-                args.value['obj']['arrowDimension'] = this.arrowDimension;
+                args.value['obj']['arrowDimension'] = extend({}, this.arrowDimension, {}, true);
                 break;
             case 'setArrowDimension':
                 this.arrowDimension = args.value['arrowDimension'];
@@ -4703,7 +4703,7 @@ class Draw {
                 callback(imageSizeMB);
             }
             catch (ex) {
-                console.log(ex.message);
+                /* action on catch */
             }
         });
     }
@@ -5796,7 +5796,7 @@ class Export {
         this.updatePvtVar();
         switch (args.prop) {
             case 'export':
-                this.exportImg(args.value['type'], args.value['fileName']);
+                this.exportImg(args.value['type'], args.value['fileName'], args.value['imgQuality']);
                 break;
             case 'exportToCanvas':
                 this.exportToCanvas(args.value['object']);
@@ -5817,7 +5817,7 @@ class Export {
             this.lowerContext = parent.lowerCanvas.getContext('2d');
         }
     }
-    exportImg(type, fileName) {
+    exportImg(type, fileName, imgQuality) {
         const parent = this.parent;
         const obj = { fileName: '' };
         parent.notify('draw', { prop: 'getFileName', onPropertyChange: false, value: { obj: obj } });
@@ -5843,12 +5843,12 @@ class Export {
             parent.notify('shape', { prop: 'redrawActObj', onPropertyChange: false,
                 value: { x: null, y: null, isMouseDown: null } });
             const beforeSave = { cancel: false, fileName: fileName ? fileName : imageName,
-                fileType: type };
+                fileType: type, imageQuality: imgQuality };
             parent.trigger('beforeSave', beforeSave);
-            this.beforeSaveEvent(beforeSave, type, fileName, imageName);
+            this.beforeSaveEvent(beforeSave, type, fileName, imageName, imgQuality);
         }
     }
-    beforeSaveEvent(observableSaveArgs, type, fileName, imageName) {
+    beforeSaveEvent(observableSaveArgs, type, fileName, imageName, imgQuality) {
         const parent = this.parent;
         if (!observableSaveArgs.cancel) {
             parent.currObjType.isSave = true;
@@ -5859,7 +5859,7 @@ class Export {
                 this.toSVGImg(fileName);
             }
             else {
-                this.toBlobFn(fileName, lowerCaseType);
+                this.toBlobFn(fileName, lowerCaseType, imgQuality);
             }
             const saved = { fileName: fileName ? fileName : imageName, fileType: type };
             parent.trigger('saved', saved);
@@ -5902,12 +5902,16 @@ class Export {
             return null;
         }
     }
-    toBlobFn(fileName, type) {
+    toBlobFn(fileName, type, imgQuality) {
         // eslint-disable-next-line @typescript-eslint/no-this-alias
         const proxy = this;
         const parent = this.parent;
         showSpinner(parent.element);
         parent.element.style.opacity = '0.5';
+        if (!isNullOrUndefined(imgQuality)) {
+            imgQuality = imgQuality > 1 ? 1 : (imgQuality <= 0 ? 0.01 : imgQuality);
+            this.imageQuality = imgQuality ? imgQuality : null;
+        }
         const tempCanvas = this.exportToCanvas();
         const imagetype = type !== 'jpeg' ? 'image/png' : 'image/jpeg';
         // eslint-disable-next-line @typescript-eslint/tslint/config
@@ -8461,6 +8465,7 @@ class Selection {
                 parent.notify('undo-redo', { prop: 'updateCurrUrc', value: { type: 'ok' } });
             }
         }
+        parent.isKBDNavigation = true;
     }
     selMouseUpEvent() {
         this.oldPoint.x = undefined;
@@ -9043,6 +9048,10 @@ class Selection {
                 return;
             }
             const actObj = extend({}, obj[i], {}, true);
+            if (actObj.activePoint.width === 0 && actObj.activePoint.height === 0) {
+                obj.splice(i, 1);
+                return;
+            }
             this.cursorTargetId = actObj.currIndex;
             if (actObj.shape === 'line' || actObj.shape === 'arrow') {
                 this.setCursorForLineArrow(actObj, x, y, upperCanvas);
@@ -11019,6 +11028,7 @@ class Selection {
     }
     mouseDownEventHandler(e) {
         const parent = this.parent;
+        parent.isKBDNavigation = false;
         this.mouseDown = e.currentTarget === parent.lowerCanvas || e.currentTarget === parent.upperCanvas ?
             'canvas' : '';
         if (e.type === 'touchstart') {
@@ -11479,6 +11489,7 @@ class Selection {
     mouseUpEventHandler(e) {
         const parent = this.parent;
         const id = parent.element.id;
+        parent.isKBDNavigation = false;
         if (!Browser.isDevice && ((parent.element.querySelector('#' + id + '_contextualToolbar') &&
             !parent.element.querySelector('#' + id + '_contextualToolbar').parentElement.classList.contains('e-hide')) ||
             (parent.element.querySelector('#' + id + '_headWrapper')
@@ -11626,7 +11637,9 @@ class Selection {
                                     previousCropObj: prevCropObj, previousText: null,
                                     currentText: null, previousFilter: null, isCircleCrop: null } });
                         }
-                        this.redrawShape(parent.objColl[parent.objColl.length - 1], true);
+                        const tempObj = extend({}, parent.objColl[parent.objColl.length - 1], {}, true);
+                        parent.objColl.pop();
+                        this.redrawShape(tempObj);
                         this.tempObjColl = undefined;
                     }
                     if (!this.isFhdEditing) {
@@ -11676,6 +11689,7 @@ class Selection {
                             parent.notify('shape', { prop: 'refreshActiveObj', onPropertyChange: false });
                         }
                         if (!isCropSelection) {
+                            this.adjustActObjForLineArrow();
                             if (parent.isShapeDrawing) {
                                 const temp = this.currentDrawingShape;
                                 parent.notify('undo-redo', { prop: 'updateUndoRedoStack', onPropertyChange: false });
@@ -11701,8 +11715,11 @@ class Selection {
                             isApplyBtn: null, isCropping: null, isZooming: null, cType: null } });
                 }
                 else {
+                    const temp = this.currentDrawingShape;
+                    this.currentDrawingShape = '';
                     parent.notify('toolbar', { prop: 'refresh-toolbar', onPropertyChange: false, value: { type: 'shapes',
                             isApplyBtn: null, isCropping: null, isZooming: null, cType: null } });
+                    this.currentDrawingShape = temp;
                 }
                 parent.notify('toolbar', { prop: 'update-toolbar-items', onPropertyChange: false });
                 parent.notify('toolbar', { prop: 'renderQAT', onPropertyChange: false, value: { isPenEdit: null } });
@@ -12236,8 +12253,15 @@ class Selection {
     performEnterAction(e) {
         const parent = this.parent;
         if (parent.isResize) {
+            /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
+            const target = e.target;
+            const isIcon = target.id.indexOf('aspectratio') ||
+                target.id.indexOf('non-aspectratio') > -1 ? true : false;
             const isValue = this.isValueUpdated();
             if (!isValue) {
+                if (isIcon) {
+                    this.focusRatioBtn();
+                }
                 return;
             }
             const point = this.getNumTextValue();
@@ -12270,6 +12294,21 @@ class Selection {
                 }
             }
             parent.notify('draw', { prop: 'redrawDownScale' });
+            if (isIcon) {
+                this.focusRatioBtn();
+            }
+            /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
+        }
+        else if (e.target.classList.contains('e-upload')) {
+            const upload = parent.element.querySelector('.e-image-upload');
+            if (upload && upload.querySelector('.e-tbar-btn')) {
+                upload.querySelector('.e-tbar-btn').click();
+            }
+            /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
+        }
+        else if (e.target.classList.contains('filter-wrapper')) {
+            /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
+            e.target.parentElement.click();
         }
         else {
             let splitWords;
@@ -12282,6 +12321,19 @@ class Selection {
             }
         }
     }
+    focusRatioBtn() {
+        const id = this.parent.element.id;
+        if (this.parent.isKBDNavigation) {
+            setTimeout(() => {
+                if (document.getElementById(id + '_aspectratio')) {
+                    document.getElementById(id + '_aspectratio').focus();
+                }
+                else if (document.getElementById(id + '_nonaspectratio')) {
+                    document.getElementById(id + '_nonaspectratio').focus();
+                }
+            }, 50);
+        }
+    }
     isKeyBoardCrop(e) {
         let bool = false;
         /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
@@ -18578,7 +18630,8 @@ class Transform {
             if (freehandObj['bool']) {
                 parent.notify('toolbar', { prop: 'destroy-qa-toolbar', onPropertyChange: false });
             }
-            if (parent.activeObj.shape !== undefined) {
+            const actPoint = extend({}, parent.activeObj.activePoint, {}, true);
+            if (parent.activeObj.shape && (actPoint.width !== 0 || actPoint.height !== 0)) {
                 isActiveObj = true;
                 if (parent.textArea.style.display === 'block' || parent.textArea.style.display === 'inline-block') {
                     parent.notify('shape', { prop: 'redrawActObj', onPropertyChange: false,
@@ -19571,7 +19624,8 @@ class UndoRedo {
                     case 'freehanddraw':
                     case 'freehand-draw':
                         this.updateFreehandDraw(obj.previousPointColl, obj.previousSelPointColl);
-                        parent.notify('freehand-draw', { prop: 'setCurrentFreehandDrawIndex', value: { value: parent.pointColl.length } });
+                        parent.notify('freehand-draw', { prop: 'setCurrentFreehandDrawIndex',
+                            value: { value: parent.pointColl.length } });
                         break;
                     case 'freehanddrawCustomized':
                         this.updateFreehandDrawCustomized(obj.previousObjColl, obj.previousPointColl);
@@ -19702,7 +19756,8 @@ class UndoRedo {
                     case 'freehanddraw':
                     case 'freehand-draw':
                         this.updateFreehandDraw(obj.currentPointColl, obj.currentSelPointColl);
-                        parent.notify('freehand-draw', { prop: 'setCurrentFreehandDrawIndex', value: { value: parent.pointColl.length } });
+                        parent.notify('freehand-draw', { prop: 'setCurrentFreehandDrawIndex',
+                            value: { value: parent.pointColl.length } });
                         break;
                     case 'freehanddrawCustomized':
                         this.updateFreehandDrawCustomized(obj.currentObjColl, obj.currentPointColl);
@@ -20531,6 +20586,8 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends Component {
         /** @hidden */
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
         this.shapeColl = [];
+        /** @hidden */
+        this.isKBDNavigation = false;
         ImageEditor_1.Inject(Crop, Draw, Selection, Transform, Export, ToolbarModule);
         ImageEditor_1.Inject(UndoRedo);
         ImageEditor_1.Inject(Filter);
@@ -21285,7 +21342,7 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends Component {
             this.aspectWidth = this.aspectHeight = null;
             this.isResize = false;
             this.drawingShape = null;
-            this.isShapeDrawing = this.noPushUndo = this.isUndoRedoStack = false;
+            this.isShapeDrawing = this.noPushUndo = this.isUndoRedoStack = this.isKBDNavigation = false;
             this.shapeColl = [];
             const obj = { initialZoomValue: false };
             this.notify('draw', { prop: 'getInitialZoomValue', onPropertyChange: false, value: { obj: obj } });
@@ -21351,15 +21408,16 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends Component {
      *
      * @param {string} type - Specifies a format of image to be saved.
      * @param {string} fileName – Specifies a file name to be saved
+     * @param {number} imageQuality – Specifies the quality of an image to be saved. The default value is “1” which represents the original size of the image if not specified.
      *
      * @remarks
      * The supported file types are JPG, JPEG, PNG, and SVG.
      *
      * @returns {void}.
      */
-    export(type, fileName) {
+    export(type, fileName, imageQuality) {
         this.applyShapes();
-        this.notify('export', { prop: 'export', onPropertyChange: false, value: { type: type, fileName: fileName } });
+        this.notify('export', { prop: 'export', onPropertyChange: false, value: { type: type, fileName: fileName, imgQuality: imageQuality } });
     }
     /**
      * Perform selection in an image editor. The selection helps to crop an image.
@@ -22839,7 +22897,12 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends Component {
      * @returns {void}.
      */
     updateArrow(type, id) {
+        let isObjPushed = false;
+        const collLength = this.objColl.length;
         this.notify('shape', { prop: 'pushActItemIntoObj' });
+        if (collLength !== this.objColl.length) {
+            isObjPushed = true;
+        }
         const prevCropObj = extend({}, this.cropObj, {}, true);
         const object = { currObj: {} };
         const objt = { shapeSettingsObj: {} };
@@ -22850,7 +22913,9 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends Component {
         prevObj.objColl = extend([], this.objColl, [], true);
         prevObj.pointColl = extend([], this.pointColl, [], true);
         prevObj.afterCropActions = extend([], this.afterCropActions, [], true);
-        this.objColl.pop();
+        if (isObjPushed) {
+            this.objColl.pop();
+        }
         if (type === 'startArrow') {
             this.activeObj.start = this.getTextFromId(id);
         }
@@ -22894,7 +22959,12 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends Component {
      */
     updateFontFamily(id) {
         this.notify('selection', { prop: 'setInitialTextEdit', value: { bool: false } });
+        let isObjPushed = false;
+        const collLength = this.objColl.length;
         this.notify('shape', { prop: 'pushActItemIntoObj' });
+        if (collLength !== this.objColl.length) {
+            isObjPushed = true;
+        }
         const objColl = extend([], this.objColl, [], true);
         const prevCropObj = extend({}, this.cropObj, {}, true);
         const objt = { shapeSettingsObj: {} };
@@ -22910,7 +22980,9 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends Component {
         this.notify('freehand-draw', { prop: 'getSelPointColl', onPropertyChange: false,
             value: { obj: selPointCollObj } });
         prevObj.selPointColl = extend([], selPointCollObj['selPointColl'], [], true);
-        this.objColl.pop();
+        if (isObjPushed) {
+            this.objColl.pop();
+        }
         if (this.textArea.style.display === 'block' || this.textArea.style.display === 'inline-block') {
             this.notify('shape', { prop: 'updateFontRatio', onPropertyChange: false,
                 value: { obj: this.activeObj, isTextArea: true } });
@@ -22970,7 +23042,12 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends Component {
     updateFontSize(text) {
         const itemText = text;
         this.notify('selection', { prop: 'setInitialTextEdit', value: { bool: false } });
+        let isObjPushed = false;
+        const collLength = this.objColl.length;
         this.notify('shape', { prop: 'pushActItemIntoObj' });
+        if (collLength !== this.objColl.length) {
+            isObjPushed = true;
+        }
         const prevCropObj = extend({}, this.cropObj, {}, true);
         const objt = { shapeSettingsObj: {} };
         this.notify('selection', { prop: 'updatePrevShapeSettings', onPropertyChange: false, value: { obj: objt } });
@@ -22985,7 +23062,9 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends Component {
         this.notify('freehand-draw', { prop: 'getSelPointColl', onPropertyChange: false,
             value: { obj: selPointCollObj } });
         prevObj.selPointColl = extend([], selPointCollObj['selPointColl'], [], true);
-        this.objColl.pop();
+        if (isObjPushed) {
+            this.objColl.pop();
+        }
         if (this.textArea.style.display === 'block' || this.textArea.style.display === 'inline-block') {
             this.notify('shape', { prop: 'updateFontRatio', onPropertyChange: false,
                 value: { obj: this.activeObj, isTextArea: true } });
@@ -23073,7 +23152,12 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends Component {
      */
     updateFontColor(value) {
         this.notify('selection', { prop: 'setInitialTextEdit', value: { bool: false } });
+        let isObjPushed = false;
+        const collLength = this.objColl.length;
         this.notify('shape', { prop: 'pushActItemIntoObj' });
+        if (collLength !== this.objColl.length) {
+            isObjPushed = true;
+        }
         const prevCropObj = extend({}, this.cropObj, {}, true);
         const objt = { shapeSettingsObj: {} };
         this.notify('selection', { prop: 'updatePrevShapeSettings', onPropertyChange: false, value: { obj: objt } });
@@ -23088,7 +23172,9 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends Component {
         this.notify('freehand-draw', { prop: 'getSelPointColl', onPropertyChange: false,
             value: { obj: selPointCollObj } });
         prevObj.selPointColl = extend([], selPointCollObj['selPointColl'], [], true);
-        this.objColl.pop();
+        if (isObjPushed) {
+            this.objColl.pop();
+        }
         if (this.textArea.style.display === 'none') {
             this.activeObj.strokeSettings.strokeColor = value;
             this.notify('shape', { prop: 'setStrokeSettings', value: { strokeSettings: null,
@@ -23265,7 +23351,12 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends Component {
             const obj = { shapeSettingsObj: {} };
             this.notify('selection', { prop: 'updatePrevShapeSettings', onPropertyChange: false, value: { obj: obj } });
             const shapeSettings = obj['shapeSettingsObj'];
+            let isObjPushed = false;
+            const collLength = this.objColl.length;
             this.notify('shape', { prop: 'pushActItemIntoObj' });
+            if (collLength !== this.objColl.length) {
+                isObjPushed = true;
+            }
             const prevCropObj = extend({}, this.cropObj, {}, true);
             const object = { currObj: {} };
             this.notify('filter', { prop: 'getCurrentObj', onPropertyChange: false, value: { object: object } });
@@ -23277,7 +23368,9 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends Component {
             this.notify('freehand-draw', { prop: 'getSelPointColl', onPropertyChange: false,
                 value: { obj: selPointCollObj } });
             prevObj.selPointColl = extend([], selPointCollObj['selPointColl'], [], true);
-            this.objColl.pop();
+            if (isObjPushed) {
+                this.objColl.pop();
+            }
             this.activeObj.strokeSettings.strokeWidth = parseInt(id, 10);
             if (this.activeObj.shape === 'rectangle' || this.activeObj.shape === 'ellipse') {
                 this.activeObj.strokeSettings.strokeWidth = parseInt(id, 10) - 1;
@@ -23319,7 +23412,12 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends Component {
         const shapeSettings = objt['shapeSettingsObj'];
         if (this.activeObj.shape && (this.activeObj.shape !== 'path' || (this.activeObj.shape === 'path' &&
             this.activeObj.pointColl.length > 0))) {
+            let isObjPushed = false;
+            const collLength = this.objColl.length;
             this.notify('shape', { prop: 'pushActItemIntoObj' });
+            if (collLength !== this.objColl.length) {
+                isObjPushed = true;
+            }
             const prevCropObj = extend({}, this.cropObj, {}, true);
             const object = { currObj: {} };
             this.notify('filter', { prop: 'getCurrentObj', onPropertyChange: false, value: { object: object } });
@@ -23331,7 +23429,9 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends Component {
             this.notify('freehand-draw', { prop: 'getSelPointColl', onPropertyChange: false,
                 value: { obj: selPointCollObj } });
             prevObj.selPointColl = extend([], selPointCollObj['selPointColl'], [], true);
-            this.objColl.pop();
+            if (isObjPushed) {
+                this.objColl.pop();
+            }
             this.activeObj.strokeSettings.strokeColor = value;
             this.notify('shape', { prop: 'setStrokeSettings', value: { strokeSettings: null, strokeColor: this.activeObj.strokeSettings.strokeColor, fillColor: null, strokeWidth: null } });
             if (!this.togglePen) {
@@ -23366,7 +23466,12 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends Component {
         const obj = { shapeSettingsObj: {} };
         this.notify('selection', { prop: 'updatePrevShapeSettings', onPropertyChange: false, value: { obj: obj } });
         const shapeSettings = obj['shapeSettingsObj'];
+        let isObjPushed = false;
+        const collLength = this.objColl.length;
         this.notify('shape', { prop: 'pushActItemIntoObj' });
+        if (collLength !== this.objColl.length) {
+            isObjPushed = true;
+        }
         const prevCropObj = extend({}, this.cropObj, {}, true);
         const object = { currObj: {} };
         this.notify('filter', { prop: 'getCurrentObj', onPropertyChange: false, value: { object: object } });
@@ -23378,7 +23483,9 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends Component {
         this.notify('freehand-draw', { prop: 'getSelPointColl', onPropertyChange: false,
             value: { obj: selPointCollObj } });
         prevObj.selPointColl = extend([], selPointCollObj['selPointColl'], [], true);
-        this.objColl.pop();
+        if (isObjPushed) {
+            this.objColl.pop();
+        }
         this.activeObj.strokeSettings.fillColor = value;
         this.notify('shape', { prop: 'setStrokeSettings',
             value: { strokeSettings: null, strokeColor: null, fillColor: this.activeObj.strokeSettings.fillColor,
@@ -24940,7 +25047,7 @@ class ToolbarModule {
         const toolbarItems = [];
         if (isOkBtn) {
             toolbarItems.push({ id: id + '_ok', prefixIcon: 'e-icons e-check', cssClass: 'top-icon e-tick',
-                tooltipText: this.l10n.getConstant('OK'), align: 'Right' });
+                tooltipText: this.l10n.getConstant('OK'), align: 'Right', tabIndex: 0 });
             toolbarItems.push({ id: id + '_cancel', prefixIcon: 'e-icons e-close', cssClass: 'top-icon e-save',
                 tooltipText: this.l10n.getConstant('Cancel'), align: 'Right' });
         }
@@ -25022,7 +25129,7 @@ class ToolbarModule {
         }
         if (isApplyOption) {
             toolbarItems.push({ id: id + '_ok', prefixIcon: 'e-icons e-check', cssClass: 'top-icon e-tick',
-                tooltipText: this.l10n.getConstant('OK'), align: 'Right' });
+                tooltipText: this.l10n.getConstant('OK'), align: 'Right', tabIndex: 0 });
             toolbarItems.push({ id: id + '_cancel', prefixIcon: 'e-icons e-close', cssClass: 'top-icon e-save',
                 tooltipText: this.l10n.getConstant('Cancel'), align: 'Right' });
         }
@@ -25166,7 +25273,7 @@ class ToolbarModule {
     }
     widthAspectRatio(e) {
         /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
-        if (e.keyCode === 109) {
+        if (e.keyCode === 109 || e.keyCode === 9) {
             return;
         }
         const parent = this.parent;
@@ -25210,7 +25317,7 @@ class ToolbarModule {
     }
     heightAspectRatio(e) {
         /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
-        if (e.keyCode === 109) {
+        if (e.keyCode === 109 || e.keyCode === 9) {
             return;
         }
         const parent = this.parent;
@@ -25278,7 +25385,8 @@ class ToolbarModule {
                 placeholder: isResize ? null : height, format: '###.## px' })
         });
         if (!this.isAspectRatio) {
-            toolbarItems.push({ id: id + '_aspectratio', prefixIcon: 'e-icons e-lock', align: 'Center', tooltipText: this.l10n.getConstant('AspectRatio'), type: 'Button' });
+            toolbarItems.push({ id: id + '_aspectratio', prefixIcon: 'e-icons e-lock', align: 'Center',
+                tooltipText: this.l10n.getConstant('AspectRatio'), type: 'Button', tabIndex: 0 });
             this.isAspectRatio = true;
         }
         else {
@@ -25287,7 +25395,7 @@ class ToolbarModule {
         }
         if (!Browser.isDevice) {
             toolbarItems.push({ id: id + '_ok', prefixIcon: 'e-icons e-check', cssClass: 'top-icon e-tick',
-                tooltipText: this.l10n.getConstant('OK'), align: 'Right' });
+                tooltipText: this.l10n.getConstant('OK'), align: 'Right', tabIndex: 0 });
             toolbarItems.push({ id: id + '_cancel', prefixIcon: 'e-icons e-close', cssClass: 'top-icon e-save',
                 tooltipText: this.l10n.getConstant('Cancel'), align: 'Right' });
         }
@@ -25926,7 +26034,7 @@ class ToolbarModule {
             { id: 'svg', text: 'SVG' }
         ];
         const inputObj = new TextBox({
-            placeholder: this.l10n.getConstant('ImageName'),
+            placeholder: this.l10n.getConstant('ImageName')
         });
         inputObj.appendTo('#' + id + '_imgNametext');
         const qualityContainer = document.getElementById(id + '_imgQualitydiv');
@@ -26096,7 +26204,7 @@ class ToolbarModule {
         else {
             imageNameLabel = document.getElementById(id + '_imageNameLabel');
         }
-        /* eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/tslint/config */
+        /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
         tempCanvas.toBlob((function (blob) {
             fileSize = Math.floor(blob.size / 1024);
             if (fileSize > 1000) {
@@ -26176,7 +26284,7 @@ class ToolbarModule {
         }
         if (!Browser.isDevice) {
             toolbarItems.push({ id: id + '_ok', prefixIcon: 'e-icons e-check', cssClass: 'top-icon e-tick',
-                tooltipText: this.l10n.getConstant('OK'), align: 'Right' });
+                tooltipText: this.l10n.getConstant('OK'), align: 'Right', tabIndex: 0 });
             toolbarItems.push({ id: id + '_cancel', prefixIcon: 'e-icons e-close', cssClass: 'top-icon e-save',
                 tooltipText: this.l10n.getConstant('Cancel'), align: 'Right' });
         }
@@ -26253,7 +26361,7 @@ class ToolbarModule {
             parent.notify('selection', { prop: 'getCurrentDrawingShape', value: { obj: obj } });
             if (obj['shape'] !== 'path') {
                 toolbarItems.push({ id: id + '_ok', prefixIcon: 'e-icons e-check', cssClass: 'top-icon e-tick',
-                    tooltipText: this.l10n.getConstant('OK'), align: 'Right' });
+                    tooltipText: this.l10n.getConstant('OK'), align: 'Right', tabIndex: 0 });
                 toolbarItems.push({ id: id + '_cancel', prefixIcon: 'e-icons e-close', cssClass: 'top-icon e-save',
                     tooltipText: this.l10n.getConstant('Cancel'), align: 'Right' });
             }
@@ -26860,7 +26968,7 @@ class ToolbarModule {
         }
         if (!Browser.isDevice) {
             toolbarItems.push({ id: id + '_ok', prefixIcon: 'e-icons e-check', cssClass: 'top-icon e-tick',
-                tooltipText: this.l10n.getConstant('OK'), align: 'Right' });
+                tooltipText: this.l10n.getConstant('OK'), align: 'Right', tabIndex: 0 });
             toolbarItems.push({ id: id + '_cancel', prefixIcon: 'e-icons e-close', cssClass: 'top-icon e-save',
                 tooltipText: this.l10n.getConstant('Cancel'), align: 'Right' });
         }
@@ -27155,6 +27263,15 @@ class ToolbarModule {
                     args.toolbarItems = ['fillColor', 'strokeColor', 'strokeWidth', 'z-order', 'duplicate', 'remove'];
                 }
                 this.initShapesToolbarItem(args.toolbarItems);
+                if (parent.activeObj.shape === 'image') {
+                    const actObj = extend({}, parent.activeObj, {}, true);
+                    parent.notify('shape', { prop: 'refreshActiveObj', onPropertyChange: false });
+                    parent.notify('draw', { prop: 'render-image', value: { isMouseWheel: null, isPreventClearRect: null, isFrame: true } });
+                    parent.activeObj = actObj;
+                    parent.notify('draw', { prop: 'drawObject', onPropertyChange: false, value: { canvas: 'duplicate', obj: parent.activeObj,
+                            isCropRatio: null, points: null, isPreventDrag: true } });
+                    this.renderQAT(false);
+                }
                 break;
             case 'text':
                 if (Browser.isDevice) {
@@ -27238,8 +27355,46 @@ class ToolbarModule {
                 parent.notify('draw', { prop: 'render-image', value: { isMouseWheel: null, isPreventClearRect: null, isFrame: true } });
                 break;
         }
-        this.currToolbar = type;
         this.refreshDropDownBtn(isCropping);
+        this.updateKBDNavigation(type);
+        this.currToolbar = type;
+    }
+    updateKBDNavigation(type) {
+        const parent = this.parent;
+        const id = parent.element.id;
+        if (!parent.isKBDNavigation || this.currToolbar === type) {
+            return;
+        }
+        if (this.isToolbar()) {
+            const tbar = parent.element.querySelectorAll('#' + id + '_toolbar')[0];
+            let tbarInitialChild;
+            let tbarInitialBtn;
+            if (tbar) {
+                tbarInitialChild = tbar.querySelector('.e-toolbar-center');
+                if (!tbarInitialChild || !tbarInitialChild.children[0]) {
+                    return;
+                }
+                tbarInitialBtn = tbarInitialChild.children[0].querySelector('.e-btn');
+                let tempElem = tbarInitialChild.children[1];
+                if (tempElem) {
+                    tempElem = tempElem.children[0];
+                }
+                if (tempElem) {
+                    tempElem = tempElem.children[0];
+                }
+                if (type === 'resize' && tempElem) {
+                    tbarInitialBtn = tempElem;
+                }
+                if (tbarInitialBtn) {
+                    if (type === 'main') {
+                        setTimeout(() => tbarInitialBtn.focus(), 50);
+                    }
+                    else {
+                        tbarInitialBtn.focus();
+                    }
+                }
+            }
+        }
     }
     performCropTransformClick(shape, isTransform) {
         const parent = this.parent;
@@ -27305,7 +27460,7 @@ class ToolbarModule {
         }
         if (!Browser.isDevice) {
             toolbarItems.push({ id: id + '_ok', prefixIcon: 'e-icons e-check', cssClass: 'top-icon e-tick',
-                tooltipText: this.l10n.getConstant('OK'), align: 'Right' });
+                tooltipText: this.l10n.getConstant('OK'), align: 'Right', tabIndex: 0 });
             toolbarItems.push({ id: id + '_cancel', prefixIcon: 'e-icons e-close', cssClass: 'top-icon e-save',
                 tooltipText: this.l10n.getConstant('Cancel'), align: 'Right' });
         }
@@ -27358,7 +27513,7 @@ class ToolbarModule {
         if (isNullOrUndefined(parent.toolbar) || !isCustomized || (parent.toolbar && parent.toolbar.indexOf('Default') > -1)) {
             toolbarItems.push({ id: id + '_default', prefixIcon: 'e-icons e-none', cssClass: 'top-icon e-none',
                 tooltipText: this.l10n.getConstant('Default'), align: 'Center',
-                template: '<div class="filter-wrapper" style="box-sizing: content-box;"><canvas id=' + id + '_defaultCanvas' + '></canvas><div style="text-align:center;"><span>' + this.l10n.getConstant('Default') + '</span></div></div>' });
+                template: '<div class="filter-wrapper" style="box-sizing: content-box;"><canvas id=' + id + '_defaultCanvas' + ' tabindex=0></canvas><div style="text-align:center;"><span>' + this.l10n.getConstant('Default') + '</span></div></div>' });
         }
         if (isNullOrUndefined(parent.toolbar) || !isCustomized || (parent.toolbar && parent.toolbar.indexOf('Chrome') > -1)) {
             toolbarItems.push({ id: id + '_chrome', prefixIcon: 'e-icons e-none', cssClass: 'top-icon e-none',
@@ -27431,7 +27586,7 @@ class ToolbarModule {
         }
         if (!Browser.isDevice) {
             toolbarItems.push({ id: id + '_ok', prefixIcon: 'e-icons e-check', cssClass: 'top-icon e-tick',
-                tooltipText: this.l10n.getConstant('OK'), align: 'Right' });
+                tooltipText: this.l10n.getConstant('OK'), align: 'Right', tabIndex: 0 });
             toolbarItems.push({ id: id + '_cancel', prefixIcon: 'e-icons e-close', cssClass: 'top-icon e-save',
                 tooltipText: this.l10n.getConstant('Cancel'), align: 'Right' });
         }
@@ -29686,8 +29841,10 @@ class ToolbarModule {
                 }
                 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();
+                    setTimeout(() => {
+                        parent.notify('undo-redo', { prop: 'updateUndoRedoStack', onPropertyChange: false });
+                        parent.element.querySelector('#' + parent.element.id + '_transparency').click();
+                    }, 50);
                 }
             }
         });