@syncfusion/ej2-image-editor 26.1.40 → 26.2.4

package/dist/global/index.d.ts

@@ -1,6 +1,6 @@
 /*!
 *  filename: index.d.ts
-*  version : 26.1.40
+*  version : 26.2.4
 *  Copyright Syncfusion Inc. 2001 - 2023. All rights reserved.
 *  Use of this code is subject to the terms of our license.
 *  A copy of the current license can be obtained at any time by e-mailing

package/hotfix/26.1.35_Vol2.txt

@@ -0,0 +1 @@
+hotfix/26.1.35_Vol2

package/package.json

@@ -1,8 +1,8 @@
 {
   "_from": "@syncfusion/ej2-image-editor@*",
-  "_id": "@syncfusion/ej2-image-editor@26.1.38",
+  "_id": "@syncfusion/ej2-image-editor@26.1.41",
   "_inBundle": false,
-  "_integrity": "sha512-LBGZGIcFpc8FnUEl2kJHr+/ye2QZphVy7q9pekYj+wdy87Fu+zf9TIV1ltUxxojuRxYZHJRrPYAvZ8DtL40NNg==",
+  "_integrity": "sha512-zZXE7n9Ic961tD024D+IHoiqYTDcOMCUuZpX2OGtor7T/IE1dreqOsTWvAQwLE8KXjjLMw7L7xg2z7q8R+vYJw==",
   "_location": "/@syncfusion/ej2-image-editor",
   "_phantomChildren": {},
   "_requested": {
@@ -23,8 +23,8 @@
     "/@syncfusion/ej2-react-image-editor",
     "/@syncfusion/ej2-vue-image-editor"
   ],
-  "_resolved": "https://nexus.syncfusioninternal.com/repository/ej2-hotfix-new/@syncfusion/ej2-image-editor/-/ej2-image-editor-26.1.38.tgz",
-  "_shasum": "30a86889517ad9fffa74727f93f6f5c2d6c00ac8",
+  "_resolved": "https://nexus.syncfusioninternal.com/repository/ej2-hotfix-new/@syncfusion/ej2-image-editor/-/ej2-image-editor-26.1.41.tgz",
+  "_shasum": "6d79b44758b74b906e47f94e827eedd7def4b8b1",
   "_spec": "@syncfusion/ej2-image-editor@*",
   "_where": "/jenkins/workspace/elease-automation_release_26.1.1/packages/included",
   "author": {
@@ -32,13 +32,13 @@
   },
   "bundleDependencies": false,
   "dependencies": {
-    "@syncfusion/ej2-base": "~26.1.37",
-    "@syncfusion/ej2-buttons": "~26.1.40",
-    "@syncfusion/ej2-dropdowns": "~26.1.40",
-    "@syncfusion/ej2-inputs": "~26.1.40",
-    "@syncfusion/ej2-navigations": "~26.1.40",
-    "@syncfusion/ej2-popups": "~26.1.38",
-    "@syncfusion/ej2-splitbuttons": "~26.1.35"
+    "@syncfusion/ej2-base": "~26.2.4",
+    "@syncfusion/ej2-buttons": "~26.2.4",
+    "@syncfusion/ej2-dropdowns": "~26.2.4",
+    "@syncfusion/ej2-inputs": "~26.2.4",
+    "@syncfusion/ej2-navigations": "~26.2.4",
+    "@syncfusion/ej2-popups": "~26.2.4",
+    "@syncfusion/ej2-splitbuttons": "~26.2.4"
   },
   "deprecated": false,
   "description": "Essential JS 2 ImageEditor",
@@ -68,7 +68,7 @@
     "url": "https://github.com/syncfusion/ej2-javascript-ui-controls/tree/master/controls/imageeditor"
   },
   "typings": "index.d.ts",
-  "version": "26.1.40",
+  "version": "26.2.4",
   "sideEffects": false,
   "homepage": "https://www.syncfusion.com/javascript-ui-controls"
 }

package/src/image-editor/action/draw.js

@@ -235,7 +235,7 @@ var Draw = /** @class */ (function () {
                 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'];
@@ -3806,7 +3806,6 @@ var Draw = /** @class */ (function () {
                         return [3 /*break*/, 3];
                     case 2:
                         ex_1 = _a.sent();
-                        console.log(ex_1.message);
                         return [3 /*break*/, 3];
                     case 3: return [2 /*return*/];
                 }

package/src/image-editor/action/export.js

@@ -24,7 +24,7 @@ var Export = /** @class */ (function () {
         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']);
@@ -45,7 +45,7 @@ var Export = /** @class */ (function () {
             this.lowerContext = parent.lowerCanvas.getContext('2d');
         }
     };
-    Export.prototype.exportImg = function (type, fileName) {
+    Export.prototype.exportImg = function (type, fileName, imgQuality) {
         var parent = this.parent;
         var obj = { fileName: '' };
         parent.notify('draw', { prop: 'getFileName', onPropertyChange: false, value: { obj: obj } });
@@ -71,12 +71,12 @@ var Export = /** @class */ (function () {
             parent.notify('shape', { prop: 'redrawActObj', onPropertyChange: false,
                 value: { x: null, y: null, isMouseDown: null } });
             var 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);
         }
     };
-    Export.prototype.beforeSaveEvent = function (observableSaveArgs, type, fileName, imageName) {
+    Export.prototype.beforeSaveEvent = function (observableSaveArgs, type, fileName, imageName, imgQuality) {
         var parent = this.parent;
         if (!observableSaveArgs.cancel) {
             parent.currObjType.isSave = true;
@@ -87,7 +87,7 @@ var Export = /** @class */ (function () {
                 this.toSVGImg(fileName);
             }
             else {
-                this.toBlobFn(fileName, lowerCaseType);
+                this.toBlobFn(fileName, lowerCaseType, imgQuality);
             }
             var saved = { fileName: fileName ? fileName : imageName, fileType: type };
             parent.trigger('saved', saved);
@@ -130,12 +130,16 @@ var Export = /** @class */ (function () {
             return null;
         }
     };
-    Export.prototype.toBlobFn = function (fileName, type) {
+    Export.prototype.toBlobFn = function (fileName, type, imgQuality) {
         // eslint-disable-next-line @typescript-eslint/no-this-alias
         var proxy = this;
         var 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;
+        }
         var tempCanvas = this.exportToCanvas();
         var imagetype = type !== 'jpeg' ? 'image/png' : 'image/jpeg';
         // eslint-disable-next-line @typescript-eslint/tslint/config

package/src/image-editor/action/selection.d.ts

@@ -131,6 +131,7 @@ export declare class Selection {
     private unwireEvent;
     private keyDownEventHandler;
     private performEnterAction;
+    private focusRatioBtn;
     private isKeyBoardCrop;
     private beforeSaveEvent;
     private handleScroll;

package/src/image-editor/action/selection.js

@@ -366,6 +366,7 @@ var Selection = /** @class */ (function () {
                 parent.notify('undo-redo', { prop: 'updateCurrUrc', value: { type: 'ok' } });
             }
         }
+        parent.isKBDNavigation = true;
     };
     Selection.prototype.selMouseUpEvent = function () {
         this.oldPoint.x = undefined;
@@ -949,6 +950,10 @@ var Selection = /** @class */ (function () {
                 return;
             }
             var 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);
@@ -2926,6 +2931,7 @@ var Selection = /** @class */ (function () {
     };
     Selection.prototype.mouseDownEventHandler = function (e) {
         var parent = this.parent;
+        parent.isKBDNavigation = false;
         this.mouseDown = e.currentTarget === parent.lowerCanvas || e.currentTarget === parent.upperCanvas ?
             'canvas' : '';
         if (e.type === 'touchstart') {
@@ -3386,6 +3392,7 @@ var Selection = /** @class */ (function () {
     Selection.prototype.mouseUpEventHandler = function (e) {
         var parent = this.parent;
         var 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')
@@ -3533,7 +3540,9 @@ var Selection = /** @class */ (function () {
                                     previousCropObj: prevCropObj, previousText: null,
                                     currentText: null, previousFilter: null, isCircleCrop: null } });
                         }
-                        this.redrawShape(parent.objColl[parent.objColl.length - 1], true);
+                        var tempObj = extend({}, parent.objColl[parent.objColl.length - 1], {}, true);
+                        parent.objColl.pop();
+                        this.redrawShape(tempObj);
                         this.tempObjColl = undefined;
                     }
                     if (!this.isFhdEditing) {
@@ -3583,6 +3592,7 @@ var Selection = /** @class */ (function () {
                             parent.notify('shape', { prop: 'refreshActiveObj', onPropertyChange: false });
                         }
                         if (!isCropSelection_1) {
+                            this.adjustActObjForLineArrow();
                             if (parent.isShapeDrawing) {
                                 var temp = this.currentDrawingShape;
                                 parent.notify('undo-redo', { prop: 'updateUndoRedoStack', onPropertyChange: false });
@@ -3608,8 +3618,11 @@ var Selection = /** @class */ (function () {
                             isApplyBtn: null, isCropping: null, isZooming: null, cType: null } });
                 }
                 else {
+                    var 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 } });
@@ -4143,8 +4156,15 @@ var Selection = /** @class */ (function () {
     Selection.prototype.performEnterAction = function (e) {
         var parent = this.parent;
         if (parent.isResize) {
+            /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
+            var target = e.target;
+            var isIcon = target.id.indexOf('aspectratio') ||
+                target.id.indexOf('non-aspectratio') > -1 ? true : false;
             var isValue = this.isValueUpdated();
             if (!isValue) {
+                if (isIcon) {
+                    this.focusRatioBtn();
+                }
                 return;
             }
             var point = this.getNumTextValue();
@@ -4177,6 +4197,21 @@ var Selection = /** @class */ (function () {
                 }
             }
             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')) {
+            var 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 {
             var splitWords = void 0;
@@ -4189,6 +4224,19 @@ var Selection = /** @class */ (function () {
             }
         }
     };
+    Selection.prototype.focusRatioBtn = function () {
+        var id = this.parent.element.id;
+        if (this.parent.isKBDNavigation) {
+            setTimeout(function () {
+                if (document.getElementById(id + '_aspectratio')) {
+                    document.getElementById(id + '_aspectratio').focus();
+                }
+                else if (document.getElementById(id + '_nonaspectratio')) {
+                    document.getElementById(id + '_nonaspectratio').focus();
+                }
+            }, 50);
+        }
+    };
     Selection.prototype.isKeyBoardCrop = function (e) {
         var bool = false;
         /* eslint-disable-next-line @typescript-eslint/no-explicit-any */

package/src/image-editor/action/transform.js

@@ -1557,7 +1557,8 @@ var Transform = /** @class */ (function () {
             if (freehandObj['bool']) {
                 parent.notify('toolbar', { prop: 'destroy-qa-toolbar', onPropertyChange: false });
             }
-            if (parent.activeObj.shape !== undefined) {
+            var 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,

package/src/image-editor/action/undo-redo.js

@@ -327,7 +327,8 @@ var UndoRedo = /** @class */ (function () {
                     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);
@@ -458,7 +459,8 @@ var UndoRedo = /** @class */ (function () {
                     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);

package/src/image-editor/base/image-editor.d.ts

@@ -374,6 +374,8 @@ export declare class ImageEditor extends Component<HTMLDivElement> implements IN
     shapeColl: any;
     /** @hidden */
     imgSrc: string;
+    /** @hidden */
+    isKBDNavigation: boolean;
     private lowerContext;
     private upperContext;
     private inMemoryContext;
@@ -977,13 +979,14 @@ export declare class ImageEditor extends Component<HTMLDivElement> implements IN
      *
      * @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?: string, fileName?: string): void;
+    export(type?: string, fileName?: string, imageQuality?: number): void;
     /**
      * Perform selection in an image editor. The selection helps to crop an image.
      *

package/src/image-editor/base/image-editor.js

@@ -261,6 +261,8 @@ var ImageEditor = /** @class */ (function (_super) {
         /** @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);
@@ -1019,7 +1021,7 @@ var ImageEditor = /** @class */ (function (_super) {
             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 = [];
             var obj_1 = { initialZoomValue: false };
             this.notify('draw', { prop: 'getInitialZoomValue', onPropertyChange: false, value: { obj: obj_1 } });
@@ -1085,15 +1087,16 @@ var ImageEditor = /** @class */ (function (_super) {
      *
      * @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}.
      */
-    ImageEditor.prototype.export = function (type, fileName) {
+    ImageEditor.prototype.export = function (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.
@@ -2573,7 +2576,12 @@ var ImageEditor = /** @class */ (function (_super) {
      * @returns {void}.
      */
     ImageEditor.prototype.updateArrow = function (type, id) {
+        var isObjPushed = false;
+        var collLength = this.objColl.length;
         this.notify('shape', { prop: 'pushActItemIntoObj' });
+        if (collLength !== this.objColl.length) {
+            isObjPushed = true;
+        }
         var prevCropObj = extend({}, this.cropObj, {}, true);
         var object = { currObj: {} };
         var objt = { shapeSettingsObj: {} };
@@ -2584,7 +2592,9 @@ var ImageEditor = /** @class */ (function (_super) {
         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);
         }
@@ -2628,7 +2638,12 @@ var ImageEditor = /** @class */ (function (_super) {
      */
     ImageEditor.prototype.updateFontFamily = function (id) {
         this.notify('selection', { prop: 'setInitialTextEdit', value: { bool: false } });
+        var isObjPushed = false;
+        var collLength = this.objColl.length;
         this.notify('shape', { prop: 'pushActItemIntoObj' });
+        if (collLength !== this.objColl.length) {
+            isObjPushed = true;
+        }
         var objColl = extend([], this.objColl, [], true);
         var prevCropObj = extend({}, this.cropObj, {}, true);
         var objt = { shapeSettingsObj: {} };
@@ -2644,7 +2659,9 @@ var ImageEditor = /** @class */ (function (_super) {
         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 } });
@@ -2704,7 +2721,12 @@ var ImageEditor = /** @class */ (function (_super) {
     ImageEditor.prototype.updateFontSize = function (text) {
         var itemText = text;
         this.notify('selection', { prop: 'setInitialTextEdit', value: { bool: false } });
+        var isObjPushed = false;
+        var collLength = this.objColl.length;
         this.notify('shape', { prop: 'pushActItemIntoObj' });
+        if (collLength !== this.objColl.length) {
+            isObjPushed = true;
+        }
         var prevCropObj = extend({}, this.cropObj, {}, true);
         var objt = { shapeSettingsObj: {} };
         this.notify('selection', { prop: 'updatePrevShapeSettings', onPropertyChange: false, value: { obj: objt } });
@@ -2719,7 +2741,9 @@ var ImageEditor = /** @class */ (function (_super) {
         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 } });
@@ -2807,7 +2831,12 @@ var ImageEditor = /** @class */ (function (_super) {
      */
     ImageEditor.prototype.updateFontColor = function (value) {
         this.notify('selection', { prop: 'setInitialTextEdit', value: { bool: false } });
+        var isObjPushed = false;
+        var collLength = this.objColl.length;
         this.notify('shape', { prop: 'pushActItemIntoObj' });
+        if (collLength !== this.objColl.length) {
+            isObjPushed = true;
+        }
         var prevCropObj = extend({}, this.cropObj, {}, true);
         var objt = { shapeSettingsObj: {} };
         this.notify('selection', { prop: 'updatePrevShapeSettings', onPropertyChange: false, value: { obj: objt } });
@@ -2822,7 +2851,9 @@ var ImageEditor = /** @class */ (function (_super) {
         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,
@@ -2999,7 +3030,12 @@ var ImageEditor = /** @class */ (function (_super) {
             var obj = { shapeSettingsObj: {} };
             this.notify('selection', { prop: 'updatePrevShapeSettings', onPropertyChange: false, value: { obj: obj } });
             var shapeSettings = obj['shapeSettingsObj'];
+            var isObjPushed = false;
+            var collLength = this.objColl.length;
             this.notify('shape', { prop: 'pushActItemIntoObj' });
+            if (collLength !== this.objColl.length) {
+                isObjPushed = true;
+            }
             var prevCropObj = extend({}, this.cropObj, {}, true);
             var object = { currObj: {} };
             this.notify('filter', { prop: 'getCurrentObj', onPropertyChange: false, value: { object: object } });
@@ -3011,7 +3047,9 @@ var ImageEditor = /** @class */ (function (_super) {
             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;
@@ -3053,7 +3091,12 @@ var ImageEditor = /** @class */ (function (_super) {
         var shapeSettings = objt['shapeSettingsObj'];
         if (this.activeObj.shape && (this.activeObj.shape !== 'path' || (this.activeObj.shape === 'path' &&
             this.activeObj.pointColl.length > 0))) {
+            var isObjPushed = false;
+            var collLength = this.objColl.length;
             this.notify('shape', { prop: 'pushActItemIntoObj' });
+            if (collLength !== this.objColl.length) {
+                isObjPushed = true;
+            }
             var prevCropObj = extend({}, this.cropObj, {}, true);
             var object = { currObj: {} };
             this.notify('filter', { prop: 'getCurrentObj', onPropertyChange: false, value: { object: object } });
@@ -3065,7 +3108,9 @@ var ImageEditor = /** @class */ (function (_super) {
             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) {
@@ -3100,7 +3145,12 @@ var ImageEditor = /** @class */ (function (_super) {
         var obj = { shapeSettingsObj: {} };
         this.notify('selection', { prop: 'updatePrevShapeSettings', onPropertyChange: false, value: { obj: obj } });
         var shapeSettings = obj['shapeSettingsObj'];
+        var isObjPushed = false;
+        var collLength = this.objColl.length;
         this.notify('shape', { prop: 'pushActItemIntoObj' });
+        if (collLength !== this.objColl.length) {
+            isObjPushed = true;
+        }
         var prevCropObj = extend({}, this.cropObj, {}, true);
         var object = { currObj: {} };
         this.notify('filter', { prop: 'getCurrentObj', onPropertyChange: false, value: { object: object } });
@@ -3112,7 +3162,9 @@ var ImageEditor = /** @class */ (function (_super) {
         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,

package/src/image-editor/base/interface.d.ts

@@ -278,6 +278,10 @@ export interface BeforeSaveEventArgs {
      * Returns the file type for an image.
      */
     fileType: FileType;
+    /**
+     * Returns the Quality of an image.
+     */
+    imageQuality?: number;
 }
 /**
  * The Interface which contains the properties for Point Object in the image editor.

package/src/image-editor/renderer/toolbar.d.ts

@@ -92,6 +92,7 @@ export declare class ToolbarModule {
     private createTextColor;
     private createTextBtn;
     private refreshToolbar;
+    private updateKBDNavigation;
     private performCropTransformClick;
     private getAdjustmentToolbarItem;
     private getFrameToolbarItem;