@syncfusion/ej2-image-editor 23.1.36 → 23.1.39

package/dist/global/index.d.ts

@@ -1,7 +1,7 @@
 /*!
 *  filename: index.d.ts
-*  version : 23.1.36
-*  Copyright Syncfusion Inc. 2001 - 2020. All rights reserved.
+*  version : 23.1.39
+*  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
 *  licensing@syncfusion.com. Any infringement will be prosecuted under

package/package.json

@@ -1,8 +1,8 @@
 {
   "_from": "@syncfusion/ej2-image-editor@*",
-  "_id": "@syncfusion/ej2-image-editor@20.18.0",
+  "_id": "@syncfusion/ej2-image-editor@23.1.38",
   "_inBundle": false,
-  "_integrity": "sha512-y/5mhKXiQuPoGSnd0cKEjsAtldx4Im5PvldVEM96ccVUBeTfC/wOOmCMl1cOkWzwzNEgpkQoES9xFqC1Xht6EA==",
+  "_integrity": "sha512-uuXxNE5Haq0i5Nm7+59rT9+cSlFOZVkbVfRZaWoO8d3ZmCowMTc9JKJys+M7QS2VOfAl01wmwFkl0baHvKUoOA==",
   "_location": "/@syncfusion/ej2-image-editor",
   "_phantomChildren": {},
   "_requested": {
@@ -23,8 +23,8 @@
     "/@syncfusion/ej2-react-image-editor",
     "/@syncfusion/ej2-vue-image-editor"
   ],
-  "_resolved": "https://nexus.syncfusion.com/repository/ej2-release/@syncfusion/ej2-image-editor/-/ej2-image-editor-20.18.0.tgz",
-  "_shasum": "7f64d41fb7f16402d12e35a546644dd7e73d160f",
+  "_resolved": "https://nexus.syncfusion.com/repository/ej2-hotfix-new/@syncfusion/ej2-image-editor/-/ej2-image-editor-23.1.38.tgz",
+  "_shasum": "9797d280c96410779d9338fe418f75e4ca993819",
   "_spec": "@syncfusion/ej2-image-editor@*",
   "_where": "/jenkins/workspace/elease-automation_release_23.1.1/packages/included",
   "author": {
@@ -32,11 +32,11 @@
   },
   "bundleDependencies": false,
   "dependencies": {
-    "@syncfusion/ej2-base": "~23.1.36",
-    "@syncfusion/ej2-buttons": "~23.1.36",
-    "@syncfusion/ej2-inputs": "~23.1.36",
-    "@syncfusion/ej2-navigations": "~23.1.36",
-    "@syncfusion/ej2-popups": "~23.1.36",
+    "@syncfusion/ej2-base": "~23.1.38",
+    "@syncfusion/ej2-buttons": "~23.1.39",
+    "@syncfusion/ej2-inputs": "~23.1.38",
+    "@syncfusion/ej2-navigations": "~23.1.39",
+    "@syncfusion/ej2-popups": "~23.1.38",
     "@syncfusion/ej2-splitbuttons": "~23.1.36"
   },
   "deprecated": false,
@@ -67,7 +67,7 @@
     "url": "https://github.com/syncfusion/ej2-javascript-ui-controls/tree/master/controls/imageeditor"
   },
   "typings": "index.d.ts",
-  "version": "23.1.36",
+  "version": "23.1.39",
   "sideEffects": false,
   "homepage": "https://www.syncfusion.com/javascript-ui-controls"
 }

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

@@ -3434,7 +3434,11 @@ var Draw = /** @class */ (function () {
                 /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
                 filesData = fileData = args.filesData[0].rawFile;
             }
-            var fileExtension = fileData.name && fileData.name.split('.')[1].toLowerCase();
+            var fileExtension = void 0;
+            if (fileData.name) {
+                var fileExtensionArray = fileData.name.split('.');
+                fileExtension = fileExtensionArray[fileExtensionArray.length - 1].toLowerCase();
+            }
             if (fileExtension && ['jpg', 'jpeg', 'png', 'svg'].indexOf(fileExtension) === -1) {
                 this.errorLoading();
                 return;

package/src/image-editor/action/freehand-draw.d.ts

@@ -59,4 +59,5 @@ export declare class FreehandDrawing {
     private freeHandDraw;
     private isFHDIdx;
     private updateCropPtsForSel;
+    private triggerShapeChanging;
 }

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

@@ -251,6 +251,13 @@ var FreehandDrawing = /** @class */ (function () {
         }
         this.isFreehandPointMoved = false;
         EventHandler.add(canvas, 'mousemove touchmove', this.freehandMoveHandler, this);
+        var shapeSettings = { id: 'pen_' + (this.currFHDIdx + 1), type: ShapeType.FreehandDraw,
+            startX: this.freehandDownPoint.x, startY: this.freehandDownPoint.y,
+            strokeColor: this.parent.activeObj.strokeSettings.strokeColor, strokeWidth: this.penStrokeWidth,
+            points: null };
+        var shapeChangingArgs = { action: 'draw-start', previousShapeSettings: shapeSettings,
+            currentShapeSettings: shapeSettings };
+        this.triggerShapeChanging(shapeChangingArgs);
     };
     FreehandDrawing.prototype.freehandUpHandler = function (e, canvas, context) {
         var rect = canvas.getBoundingClientRect();
@@ -295,13 +302,20 @@ var FreehandDrawing = /** @class */ (function () {
         this.selPoints = [];
         this.pointCounter = 0;
         parent.freehandCounter++;
-        this.currFHDIdx++;
         this.isFreehandDrawing = false;
         parent.notify('undo-redo', { prop: 'updateUndoRedoColl', onPropertyChange: false,
             value: { operation: 'freehand-draw', previousObj: prevObj, previousObjColl: prevObj.objColl,
                 previousPointColl: prevObj.pointColl, previousSelPointColl: prevObj.selPointColl,
                 previousCropObj: prevCropObj, previousText: null,
                 currentText: null, previousFilter: null, isCircleCrop: null } });
+        var shapeSettings = { id: 'pen_' + (this.currFHDIdx + 1), type: ShapeType.FreehandDraw,
+            startX: this.freehandDownPoint.x, startY: this.freehandDownPoint.y,
+            strokeColor: this.parent.activeObj.strokeSettings.strokeColor, strokeWidth: this.penStrokeWidth,
+            points: this.parent.pointColl[this.currFHDIdx].points };
+        var shapeChangingArgs = { action: 'draw-end', previousShapeSettings: shapeSettings,
+            currentShapeSettings: shapeSettings };
+        this.triggerShapeChanging(shapeChangingArgs);
+        this.currFHDIdx++;
     };
     FreehandDrawing.prototype.freehandMoveHandler = function (e) {
         this.isFreehandPointMoved = true;
@@ -317,6 +331,7 @@ var FreehandDrawing = /** @class */ (function () {
             y = e.touches[0].clientY - rect.top;
         }
         if (this.isFreehandDrawing) {
+            this.upperContext.fillStyle = this.parent.activeObj.strokeSettings.strokeColor;
             this.processPoint(x, y, false, this.upperContext);
         }
     };
@@ -637,7 +652,6 @@ var FreehandDrawing = /** @class */ (function () {
         }
     };
     FreehandDrawing.prototype.selectFhd = function (index) {
-        var _this = this;
         var parent = this.parent;
         parent.notify('selection', { prop: 'setFreehandDrawEditing', onPropertyChange: false, value: { bool: true } });
         if (index || index === 0) {
@@ -668,30 +682,7 @@ var FreehandDrawing = /** @class */ (function () {
                 points: parent.pointColl[this.fhdSelIdx].points };
             var shapeChangingArgs = { action: 'select', previousShapeSettings: shapeSettings,
                 currentShapeSettings: shapeSettings };
-            if (isBlazor() && parent.events && parent.events.shapeChanging.hasDelegate === true) {
-                /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
-                parent.dotNetRef.invokeMethodAsync('ShapeEventAsync', 'OnShape', shapeChangingArgs).then(function (shapeChangingArgs) {
-                    parent.activeObj.strokeSettings.strokeColor = parent.pointColl[_this.fhdSelIdx].strokeColor =
-                        shapeChangingArgs.currentShapeSettings.strokeColor;
-                    parent.activeObj.strokeSettings.strokeWidth = parent.pointColl[_this.fhdSelIdx].strokeWidth =
-                        shapeChangingArgs.currentShapeSettings.strokeWidth;
-                    parent.pointColl[_this.fhdSelIdx].points = shapeChangingArgs.currentShapeSettings.points;
-                    _this.freehandRedraw(_this.upperContext);
-                    parent.updateToolbar(parent.element, 'imageLoaded');
-                    parent.updateToolbar(parent.element, 'pen');
-                });
-            }
-            else {
-                parent.trigger('shapeChanging', shapeChangingArgs);
-                parent.activeObj.strokeSettings.strokeColor = parent.pointColl[this.fhdSelIdx].strokeColor =
-                    shapeChangingArgs.currentShapeSettings.strokeColor;
-                parent.activeObj.strokeSettings.strokeWidth = parent.pointColl[this.fhdSelIdx].strokeWidth =
-                    shapeChangingArgs.currentShapeSettings.strokeWidth;
-                parent.pointColl[this.fhdSelIdx].points = shapeChangingArgs.currentShapeSettings.points;
-                this.freehandRedraw(this.upperContext);
-                parent.notify('toolbar', { prop: 'refresh-toolbar', onPropertyChange: false, value: { type: 'pen',
-                        isApplyBtn: null, isCropping: null, isZooming: null, cType: null } });
-            }
+            this.triggerShapeChanging(shapeChangingArgs);
         }
         else {
             parent.okBtn();
@@ -1071,6 +1062,42 @@ var FreehandDrawing = /** @class */ (function () {
             }
         }
     };
+    FreehandDrawing.prototype.triggerShapeChanging = function (shapeChangingArgs) {
+        var _this = this;
+        var parent = this.parent;
+        if (isBlazor() && parent.events && parent.events.shapeChanging.hasDelegate === true) {
+            /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
+            parent.dotNetRef.invokeMethodAsync('ShapeEventAsync', 'OnShape', shapeChangingArgs).then(function (shapeChangingArgs) {
+                parent.activeObj.strokeSettings.strokeColor = shapeChangingArgs.currentShapeSettings.strokeColor;
+                _this.penStrokeWidth = shapeChangingArgs.currentShapeSettings.strokeWidth;
+                if (_this.fhdSelID) {
+                    parent.pointColl[_this.fhdSelIdx].strokeColor = shapeChangingArgs.currentShapeSettings.strokeColor;
+                    parent.pointColl[_this.fhdSelIdx].strokeWidth = shapeChangingArgs.currentShapeSettings.strokeWidth;
+                    parent.pointColl[_this.fhdSelIdx].points = shapeChangingArgs.currentShapeSettings.points;
+                }
+                if (shapeChangingArgs.action === 'select') {
+                    _this.freehandRedraw(_this.upperContext);
+                    parent.updateToolbar(parent.element, 'imageLoaded');
+                    parent.updateToolbar(parent.element, 'pen');
+                }
+            });
+        }
+        else {
+            parent.trigger('shapeChanging', shapeChangingArgs);
+            parent.activeObj.strokeSettings.strokeColor = shapeChangingArgs.currentShapeSettings.strokeColor;
+            this.penStrokeWidth = shapeChangingArgs.currentShapeSettings.strokeWidth;
+            if (this.fhdSelID) {
+                parent.pointColl[this.fhdSelIdx].strokeColor = shapeChangingArgs.currentShapeSettings.strokeColor;
+                parent.pointColl[this.fhdSelIdx].strokeWidth = shapeChangingArgs.currentShapeSettings.strokeWidth;
+                parent.pointColl[this.fhdSelIdx].points = shapeChangingArgs.currentShapeSettings.points;
+            }
+            if (shapeChangingArgs.action === 'select') {
+                this.freehandRedraw(this.upperContext);
+                parent.notify('toolbar', { prop: 'refresh-toolbar', onPropertyChange: false, value: { type: 'pen',
+                        isApplyBtn: null, isCropping: null, isZooming: null, cType: null } });
+            }
+        }
+    };
     return FreehandDrawing;
 }());
 export { FreehandDrawing };

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

@@ -256,6 +256,9 @@ var Selection = /** @class */ (function () {
             case 'upgradeImageQuality':
                 this.upgradeImageQuality();
                 break;
+            case 'triggerShapeChange':
+                this.triggerShapeChange(args.value['shapeResizingArgs'], args.value['shapeMovingArgs'], args.value['type']);
+                break;
         }
     };
     Selection.prototype.getModuleName = function () {
@@ -1078,8 +1081,14 @@ var Selection = /** @class */ (function () {
         parent.activeObj.activePoint.width = parent.activeObj.activePoint.endX - parent.activeObj.activePoint.startX;
         parent.activeObj.activePoint.height = parent.activeObj.activePoint.endY - parent.activeObj.activePoint.startY;
         var currentShapeSettings = this.updatePrevShapeSettings();
-        shapeResizingArgs.currentShapeSettings = this.shapeResizingArgs.currentShapeSettings = currentShapeSettings;
-        shapeMovingArgs.currentShapeSettings = this.shapeMovingArgs.currentShapeSettings = currentShapeSettings;
+        if (!isNullOrUndefined(this.shapeResizingArgs) && !isNullOrUndefined(this.shapeMovingArgs)) {
+            shapeResizingArgs.currentShapeSettings = this.shapeResizingArgs.currentShapeSettings = currentShapeSettings;
+            shapeMovingArgs.currentShapeSettings = this.shapeMovingArgs.currentShapeSettings = currentShapeSettings;
+        }
+        else {
+            shapeResizingArgs.currentShapeSettings = currentShapeSettings;
+            shapeMovingArgs.currentShapeSettings = currentShapeSettings;
+        }
         if (type === 'resize') {
             this.isCropSelection = false;
             var splitWords = void 0;
@@ -1134,6 +1143,20 @@ var Selection = /** @class */ (function () {
                 }
             }
         }
+        else if (type === 'mouse-down' || type === 'mouse-up') {
+            if (isBlazor() && parent.events && parent.events.shapeChanging.hasDelegate === true) {
+                /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
+                parent.dotNetRef.invokeMethodAsync('ShapeEventAsync', 'OnShape', shapeResizingArgs).then(function (shapeResizingArgs) {
+                    parent.notify('shape', { prop: 'updateShapeChangeEventArgs', onPropertyChange: false,
+                        value: { shapeSettings: shapeResizingArgs.currentShapeSettings } });
+                });
+            }
+            else {
+                parent.trigger('shapeChanging', shapeResizingArgs);
+                parent.notify('shape', { prop: 'updateShapeChangeEventArgs', onPropertyChange: false,
+                    value: { shapeSettings: shapeResizingArgs.currentShapeSettings } });
+            }
+        }
         else {
             if (isBlazor() && isNullOrUndefined(this.parent.eventType) && parent.events &&
                 parent.events.onShapeDragStart.hasDelegate === true) {
@@ -2845,6 +2868,12 @@ var Selection = /** @class */ (function () {
             parent.activeObj.activePoint.endX = parent.activeObj.activePoint.startX;
             parent.activeObj.activePoint.endY = parent.activeObj.activePoint.startY;
             parent.currObjType.isDragging = true;
+            var previousShapeSettings = this.updatePrevShapeSettings();
+            var shapeResizingArgs = { action: 'draw-start', previousShapeSettings: previousShapeSettings };
+            var shapeMovingArgs = { action: 'move', previousShapeSettings: previousShapeSettings };
+            this.shapeResizingArgs = shapeResizingArgs;
+            this.shapeMovingArgs = shapeMovingArgs;
+            this.triggerShapeChange(shapeResizingArgs, shapeMovingArgs, 'mouse-down');
             return;
         }
         parent.notify('draw', { prop: 'resetFrameZoom', onPropertyChange: false });
@@ -3249,7 +3278,7 @@ var Selection = /** @class */ (function () {
         }
         if (this.currentDrawingShape === 'path') {
             var elem = e.srcElement;
-            if (e.currentTarget !== parent.upperCanvas && e.currentTarget !== parent.lowerCanvas &&
+            if (e.currentTarget !== parent.upperCanvas && e.currentTarget !== parent.lowerCanvas && parent.activeObj.pointColl.length > 0 &&
                 (elem.classList.contains('e-upload-icon') || elem.parentElement.id === parent.element.id + '_zoomIn' ||
                     elem.parentElement.id === parent.element.id + '_zoomOut' || elem.parentElement.id === parent.element.id + '_annotationBtn' ||
                     elem.parentElement.id === parent.element.id + '_borderColorBtn' || elem.parentElement.id === parent.element.id + '_borderWidthBtn' ||
@@ -3280,6 +3309,12 @@ var Selection = /** @class */ (function () {
                 if (parent.activeObj.activePoint.width === 0 && parent.activeObj.activePoint.height === 0) {
                     parent.notify('draw', { prop: 'performCancel', value: { isContextualToolbar: null } });
                 }
+                var previousShapeSettings = this.updatePrevShapeSettings();
+                var shapeResizingArgs = { action: 'draw-end', previousShapeSettings: previousShapeSettings };
+                var shapeMovingArgs = { action: 'move', previousShapeSettings: previousShapeSettings };
+                this.shapeResizingArgs = shapeResizingArgs;
+                this.shapeMovingArgs = shapeMovingArgs;
+                this.triggerShapeChange(shapeResizingArgs, shapeMovingArgs, 'mouse-up');
             }
             this.adjustActObjForLineArrow();
             this.updPtCollForShpRot();

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

@@ -752,6 +752,9 @@ var Shape = /** @class */ (function () {
         parent.activeObj.activePoint.endY = parent.activeObj.activePoint.startY + parent.activeObj.activePoint.height;
         parent.activeObj.strokeSettings.strokeColor = shapeSettings.strokeColor;
         parent.activeObj.strokeSettings.fillColor = shapeSettings.fillColor;
+        if (isNullOrUndefined(shapeSettings.degree)) {
+            shapeSettings.degree = 0;
+        }
         switch (parent.activeObj.shape) {
             case 'ellipse':
                 parent.activeObj.activePoint.width = shapeSettings.radius * 2;
@@ -1582,6 +1585,13 @@ var Shape = /** @class */ (function () {
                 else {
                     parent.updateToolbar(parent.element, 'quickAccessToolbar', parent.activeObj.shape);
                 }
+                var obj_1 = { shapeSettingsObj: {} };
+                parent.notify('selection', { prop: 'updatePrevShapeSettings', onPropertyChange: false, value: { obj: obj_1 } });
+                var shapeSettings = obj_1['shapeSettingsObj'];
+                var shapeResizingArgs = { action: 'draw-end', previousShapeSettings: shapeSettings };
+                var shapeMovingArgs = { action: 'move', previousShapeSettings: shapeSettings };
+                parent.notify('selection', { prop: 'triggerShapeChange', onPropertyChange: false,
+                    value: { shapeResizingArgs: shapeResizingArgs, shapeMovingArgs: shapeMovingArgs, type: 'mouse-up' } });
             }
         }
     };
@@ -1751,10 +1761,10 @@ var Shape = /** @class */ (function () {
             value: { width: this.shapeImg.width, height: this.shapeImg.height, obj: dimObj, isImgShape: null } });
         if (width && height) {
             if (isAspectRatio) {
-                var obj_1 = { ratio: null };
+                var obj_2 = { ratio: null };
                 parent.notify('selection', { prop: 'findImageRatio', onPropertyChange: false,
-                    value: { width: this.shapeImg.width, height: this.shapeImg.height, obj: obj_1 } });
-                dimObj = this.resizeImage(width, obj_1['ratio']);
+                    value: { width: this.shapeImg.width, height: this.shapeImg.height, obj: obj_2 } });
+                dimObj = this.resizeImage(width, obj_2['ratio']);
             }
             else {
                 dimObj = { width: width, height: height };
@@ -1767,10 +1777,10 @@ var Shape = /** @class */ (function () {
             value: { width: this.shapeImg.width, height: this.shapeImg.height, obj: dimObj, isImgShape: true } });
         if (width && height) {
             if (isAspectRatio) {
-                var obj_2 = { ratio: null };
+                var obj_3 = { ratio: null };
                 parent.notify('selection', { prop: 'findImageRatio', onPropertyChange: false,
-                    value: { width: this.shapeImg.width, height: this.shapeImg.height, obj: obj_2 } });
-                dimObj = this.resizeImage(width, obj_2['ratio']);
+                    value: { width: this.shapeImg.width, height: this.shapeImg.height, obj: obj_3 } });
+                dimObj = this.resizeImage(width, obj_3['ratio']);
             }
             else {
                 dimObj = { width: width, height: height };
@@ -2078,6 +2088,9 @@ var Shape = /** @class */ (function () {
     };
     Shape.prototype.applyFontStyle = function (item) {
         var parent = this.parent;
+        var obj = { shapeSettingsObj: {} };
+        parent.notify('selection', { prop: 'updatePrevShapeSettings', onPropertyChange: false, value: { obj: obj } });
+        var shapeSettings = obj['shapeSettingsObj'];
         this.pushActItemIntoObj();
         var objColl = extend([], parent.objColl, [], true);
         parent.objColl.pop();
@@ -2101,6 +2114,10 @@ var Shape = /** @class */ (function () {
                 this.updateFontStyle(item, objColl, 'bold', 'italic');
                 break;
         }
+        var shapeChangedArgs = { action: 'font-style', previousShapeSettings: extend({}, shapeSettings, {}, true),
+            currentShapeSettings: extend({}, shapeSettings, {}, true) };
+        shapeChangedArgs.currentShapeSettings.fontStyle = [item];
+        parent.triggerShapeChanged(shapeChangedArgs);
     };
     Shape.prototype.updateFontStyle = function (item, objColl, fontWeight, fontStyle) {
         var parent = this.parent;
@@ -2464,14 +2481,14 @@ var Shape = /** @class */ (function () {
         if (!parent.disabled && parent.isImageLoaded) {
             this.applyActObj();
             if (id.split('_')[0] === 'shape') {
-                var obj_3;
+                var obj_4;
                 for (var i = 0, len = parent.objColl.length; i < len; i++) {
                     if (parent.objColl[i].currIndex === id) {
-                        obj_3 = extend({}, parent.objColl[i], {}, true);
+                        obj_4 = extend({}, parent.objColl[i], {}, true);
                         break;
                     }
                 }
-                shapeDetails = this.getObjDetails(obj_3);
+                shapeDetails = this.getObjDetails(obj_4);
             }
             else if (id.split('_')[0] === 'pen') {
                 shapeDetails = this.getFreehandDrawDetails(parseInt(id.split('_')[1], 10) - 1);
@@ -2623,19 +2640,19 @@ var Shape = /** @class */ (function () {
         if (!parent.disabled && parent.isImageLoaded) {
             this.applyActObj();
             if (id.split('_')[0] === 'shape') {
-                var obj_4;
+                var obj_5;
                 for (var i = 0, len = parent.objColl.length; i < len; i++) {
                     if (parent.objColl[i].currIndex === id) {
-                        obj_4 = extend({}, parent.objColl[i], {}, true);
+                        obj_5 = extend({}, parent.objColl[i], {}, true);
                         break;
                     }
                 }
-                if (isNullOrUndefined(obj_4)) {
+                if (isNullOrUndefined(obj_5)) {
                     isSelected = false;
                 }
                 else {
                     isSelected = true;
-                    parent.activeObj = obj_4;
+                    parent.activeObj = obj_5;
                     var object = { canvasFilter: null };
                     parent.notify('toolbar', { prop: 'getCanvasFilter', onPropertyChange: false, value: { obj: object } });
                     this.lowerContext.filter = object['canvasFilter'];
@@ -2674,9 +2691,9 @@ var Shape = /** @class */ (function () {
                 if (object['bool']) {
                     parent.okBtn();
                 }
-                var obj_5 = { isIndex: false };
-                parent.notify('freehand-draw', { prop: 'isFHDIdx', value: { index: parseInt(id.split('_')[1], 10) - 1, obj: obj_5 } });
-                if (obj_5['isIndex']) {
+                var obj_6 = { isIndex: false };
+                parent.notify('freehand-draw', { prop: 'isFHDIdx', value: { index: parseInt(id.split('_')[1], 10) - 1, obj: obj_6 } });
+                if (obj_6['isIndex']) {
                     isSelected = true;
                     parent.notify('freehand-draw', { prop: 'selectFhd', value: { id: id } });
                     if (!isBlazor()) {

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

@@ -122,7 +122,34 @@ export declare enum ImageEditorCommand {
     RotateLeft = "RotateLeft",
     RotateRight = "RotateRight",
     FlipHorizontal = "FlipHorizontal",
-    FlipVertical = "FlipVertical"
+    FlipVertical = "FlipVertical",
+    Undo = "Undo",
+    Redo = "Redo",
+    None = "None",
+    Mat = "Mat",
+    Bevel = "Bevel",
+    Inset = "Inset",
+    Hook = "Hook",
+    Finetune = "Finetune",
+    Filter = "Filter",
+    Frame = "Frame",
+    Resize = "Resize",
+    HorizontalFlip = "HorizontalFlip",
+    VerticalFlip = "VerticalFlip",
+    Brightness = "Brightness",
+    Contrast = "Contrast",
+    Hue = "Hue",
+    Saturation = "Saturation",
+    Opacity = "Opacity",
+    Blur = "Blur",
+    Exposure = "Exposure",
+    Default = "Default",
+    Chrome = "Chrome",
+    Cold = "Cold",
+    Warm = "Warm",
+    Grayscale = "Grayscale",
+    Sepia = "Sepia",
+    Invert = "Invert"
 }
 /**
  * An enumeration of available image filter options.

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

@@ -129,6 +129,33 @@ export var ImageEditorCommand;
     ImageEditorCommand["RotateRight"] = "RotateRight";
     ImageEditorCommand["FlipHorizontal"] = "FlipHorizontal";
     ImageEditorCommand["FlipVertical"] = "FlipVertical";
+    ImageEditorCommand["Undo"] = "Undo";
+    ImageEditorCommand["Redo"] = "Redo";
+    ImageEditorCommand["None"] = "None";
+    ImageEditorCommand["Mat"] = "Mat";
+    ImageEditorCommand["Bevel"] = "Bevel";
+    ImageEditorCommand["Inset"] = "Inset";
+    ImageEditorCommand["Hook"] = "Hook";
+    ImageEditorCommand["Finetune"] = "Finetune";
+    ImageEditorCommand["Filter"] = "Filter";
+    ImageEditorCommand["Frame"] = "Frame";
+    ImageEditorCommand["Resize"] = "Resize";
+    ImageEditorCommand["HorizontalFlip"] = "HorizontalFlip";
+    ImageEditorCommand["VerticalFlip"] = "VerticalFlip";
+    ImageEditorCommand["Brightness"] = "Brightness";
+    ImageEditorCommand["Contrast"] = "Contrast";
+    ImageEditorCommand["Hue"] = "Hue";
+    ImageEditorCommand["Saturation"] = "Saturation";
+    ImageEditorCommand["Opacity"] = "Opacity";
+    ImageEditorCommand["Blur"] = "Blur";
+    ImageEditorCommand["Exposure"] = "Exposure";
+    ImageEditorCommand["Default"] = "Default";
+    ImageEditorCommand["Chrome"] = "Chrome";
+    ImageEditorCommand["Cold"] = "Cold";
+    ImageEditorCommand["Warm"] = "Warm";
+    ImageEditorCommand["Grayscale"] = "Grayscale";
+    ImageEditorCommand["Sepia"] = "Sepia";
+    ImageEditorCommand["Invert"] = "Invert";
 })(ImageEditorCommand || (ImageEditorCommand = {}));
 /**
  * An enumeration of available image filter options.

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

@@ -1,4 +1,4 @@
-import { Component, NotifyPropertyChanges, INotifyPropertyChanged, Property, addClass, removeClass, ModuleDeclaration, extend, isBlazor, BlazorDotnetObject } from '@syncfusion/ej2-base';
+import { Component, NotifyPropertyChanges, INotifyPropertyChanged, Property, addClass, removeClass, ModuleDeclaration, extend, isBlazor, BlazorDotnetObject } from '@syncfusion/ej2-base';
 import {ComponentModel} from '@syncfusion/ej2-base';
 
 /**

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

@@ -1424,4 +1424,12 @@ export declare class ImageEditor extends Component<HTMLDivElement> implements IN
      * @returns {void}.
      */
     updateToolbar(element: HTMLDivElement, type: string, value?: string): void;
+    /**
+     * Trigger the shapeChanging event for after the shape applied.
+     *
+     * @param { ShapeChangeEventArgs } shapeChangedArgs - Specifies the shapeChaning event args.
+     * @hidden
+     * @returns {void}.
+     */
+    triggerShapeChanged(shapeChangedArgs: ShapeChangeEventArgs): void;
 }