@syncfusion/ej2-image-editor 23.1.36 → 23.1.39

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

@@ -4288,7 +4288,11 @@ class Draw {
                 /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
                 filesData = fileData = args.filesData[0].rawFile;
             }
-            let fileExtension = fileData.name && fileData.name.split('.')[1].toLowerCase();
+            let fileExtension;
+            if (fileData.name) {
+                let fileExtensionArray = fileData.name.split('.');
+                fileExtension = fileExtensionArray[fileExtensionArray.length - 1].toLowerCase();
+            }
             if (fileExtension && ['jpg', 'jpeg', 'png', 'svg'].indexOf(fileExtension) === -1) {
                 this.errorLoading();
                 return;
@@ -6255,6 +6259,13 @@ class FreehandDrawing {
         }
         this.isFreehandPointMoved = false;
         EventHandler.add(canvas, 'mousemove touchmove', this.freehandMoveHandler, this);
+        const 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 };
+        const shapeChangingArgs = { action: 'draw-start', previousShapeSettings: shapeSettings,
+            currentShapeSettings: shapeSettings };
+        this.triggerShapeChanging(shapeChangingArgs);
     }
     freehandUpHandler(e, canvas, context) {
         const rect = canvas.getBoundingClientRect();
@@ -6299,13 +6310,20 @@ class FreehandDrawing {
         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 } });
+        const 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 };
+        const shapeChangingArgs = { action: 'draw-end', previousShapeSettings: shapeSettings,
+            currentShapeSettings: shapeSettings };
+        this.triggerShapeChanging(shapeChangingArgs);
+        this.currFHDIdx++;
     }
     freehandMoveHandler(e) {
         this.isFreehandPointMoved = true;
@@ -6321,6 +6339,7 @@ class FreehandDrawing {
             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);
         }
     }
@@ -6671,30 +6690,7 @@ class FreehandDrawing {
                 points: parent.pointColl[this.fhdSelIdx].points };
             const 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((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();
@@ -7074,6 +7070,41 @@ class FreehandDrawing {
             }
         }
     }
+    triggerShapeChanging(shapeChangingArgs) {
+        const 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((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 } });
+            }
+        }
+    }
 }
 
 class Selection {
@@ -7331,6 +7362,9 @@ class Selection {
             case 'upgradeImageQuality':
                 this.upgradeImageQuality();
                 break;
+            case 'triggerShapeChange':
+                this.triggerShapeChange(args.value['shapeResizingArgs'], args.value['shapeMovingArgs'], args.value['type']);
+                break;
         }
     }
     getModuleName() {
@@ -8152,8 +8186,14 @@ class Selection {
         parent.activeObj.activePoint.width = parent.activeObj.activePoint.endX - parent.activeObj.activePoint.startX;
         parent.activeObj.activePoint.height = parent.activeObj.activePoint.endY - parent.activeObj.activePoint.startY;
         const 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;
             let splitWords;
@@ -8208,6 +8248,20 @@ class Selection {
                 }
             }
         }
+        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((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) {
@@ -9917,6 +9971,12 @@ class Selection {
             parent.activeObj.activePoint.endX = parent.activeObj.activePoint.startX;
             parent.activeObj.activePoint.endY = parent.activeObj.activePoint.startY;
             parent.currObjType.isDragging = true;
+            const previousShapeSettings = this.updatePrevShapeSettings();
+            const shapeResizingArgs = { action: 'draw-start', previousShapeSettings: previousShapeSettings };
+            const 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 });
@@ -10320,7 +10380,7 @@ class Selection {
         }
         if (this.currentDrawingShape === 'path') {
             const 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' ||
@@ -10351,6 +10411,12 @@ class Selection {
                 if (parent.activeObj.activePoint.width === 0 && parent.activeObj.activePoint.height === 0) {
                     parent.notify('draw', { prop: 'performCancel', value: { isContextualToolbar: null } });
                 }
+                const previousShapeSettings = this.updatePrevShapeSettings();
+                const shapeResizingArgs = { action: 'draw-end', previousShapeSettings: previousShapeSettings };
+                const shapeMovingArgs = { action: 'move', previousShapeSettings: previousShapeSettings };
+                this.shapeResizingArgs = shapeResizingArgs;
+                this.shapeMovingArgs = shapeMovingArgs;
+                this.triggerShapeChange(shapeResizingArgs, shapeMovingArgs, 'mouse-up');
             }
             this.adjustActObjForLineArrow();
             this.updPtCollForShpRot();
@@ -12684,6 +12750,9 @@ class Shape {
         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;
@@ -13514,6 +13583,13 @@ class Shape {
                 else {
                     parent.updateToolbar(parent.element, 'quickAccessToolbar', parent.activeObj.shape);
                 }
+                const obj = { shapeSettingsObj: {} };
+                parent.notify('selection', { prop: 'updatePrevShapeSettings', onPropertyChange: false, value: { obj: obj } });
+                const shapeSettings = obj['shapeSettingsObj'];
+                const shapeResizingArgs = { action: 'draw-end', previousShapeSettings: shapeSettings };
+                const shapeMovingArgs = { action: 'move', previousShapeSettings: shapeSettings };
+                parent.notify('selection', { prop: 'triggerShapeChange', onPropertyChange: false,
+                    value: { shapeResizingArgs: shapeResizingArgs, shapeMovingArgs: shapeMovingArgs, type: 'mouse-up' } });
             }
         }
     }
@@ -14009,6 +14085,9 @@ class Shape {
     }
     applyFontStyle(item) {
         const parent = this.parent;
+        const obj = { shapeSettingsObj: {} };
+        parent.notify('selection', { prop: 'updatePrevShapeSettings', onPropertyChange: false, value: { obj: obj } });
+        const shapeSettings = obj['shapeSettingsObj'];
         this.pushActItemIntoObj();
         const objColl = extend([], parent.objColl, [], true);
         parent.objColl.pop();
@@ -14032,6 +14111,10 @@ class Shape {
                 this.updateFontStyle(item, objColl, 'bold', 'italic');
                 break;
         }
+        const shapeChangedArgs = { action: 'font-style', previousShapeSettings: extend({}, shapeSettings, {}, true),
+            currentShapeSettings: extend({}, shapeSettings, {}, true) };
+        shapeChangedArgs.currentShapeSettings.fontStyle = [item];
+        parent.triggerShapeChanged(shapeChangedArgs);
     }
     updateFontStyle(item, objColl, fontWeight, fontStyle) {
         const parent = this.parent;
@@ -18444,6 +18527,10 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends Component {
             this.notify('toolbar', { prop: 'create-contextual-toolbar', onPropertyChange: false });
         }
         this.createCanvas();
+        if (this.element.offsetWidth > 359 && this.element.querySelector('.e-ie-min-drop-content') && this.element.querySelector('.e-ie-drop-content')) {
+            this.element.querySelector('.e-ie-min-drop-content').style.display = 'none';
+            this.element.querySelector('.e-ie-drop-content').style.display = 'block';
+        }
         this.createDropUploader();
         if (this.showQuickAccessToolbar) {
             const canvasWrapper = document.querySelector('#' + this.element.id + '_canvasWrapper');
@@ -18601,18 +18688,26 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends Component {
         }));
         const dragObj = { key: 'DragText' };
         this.notify('toolbar', { prop: 'getLocaleText', onPropertyChange: false, value: { obj: dragObj } });
+        const dropObj = { key: 'DropText' };
+        this.notify('toolbar', { prop: 'getLocaleText', onPropertyChange: false, value: { obj: dropObj } });
         const browseObj = { key: 'BrowseText' };
         this.notify('toolbar', { prop: 'getLocaleText', onPropertyChange: false, value: { obj: browseObj } });
         const supportObj = { key: 'SupportText' };
         this.notify('toolbar', { prop: 'getLocaleText', onPropertyChange: false, value: { obj: supportObj } });
         const dropAreaElement = this.createElement('div', { id: this.element.id + '_dropArea', className: 'e-ie-drop-area', attrs: { style: 'position: relative;' } });
         const dropIconElement = this.createElement('span', { className: 'e-ie-drop-icon e-icons e-image', attrs: { style: 'position: absolute;' } });
-        const dropContentElement = this.createElement('span', { className: 'e-ie-drop-content', attrs: { style: 'position: absolute;' } });
+        const dropContentElement = this.createElement('span', { className: 'e-ie-drop-content', attrs: { style: 'position: absolute; display: none;' } });
         dropContentElement.textContent = dragObj['value'] + ' ';
+        const minDropContentElem = this.createElement('span', { className: 'e-ie-min-drop-content', attrs: { style: 'position: absolute;' } });
+        minDropContentElem.textContent = dropObj['value'] + ' ';
         const dropAnchorElement = this.createElement('a', { id: this.element.id + '_dropBrowse', className: 'e-ie-drop-browse' });
         dropAnchorElement.textContent = browseObj['value'];
+        const minDropAnchorElem = this.createElement('a', { id: this.element.id + '_dropBrowse', className: 'e-ie-drop-browse' });
+        minDropAnchorElem.textContent = browseObj['value'];
         dropContentElement.appendChild(dropAnchorElement);
+        minDropContentElem.appendChild(minDropAnchorElem);
         dropAnchorElement.href = '';
+        minDropAnchorElem.href = '';
         const dropInfoElement = this.createElement('span', { className: 'e-ie-drop-info', attrs: { position: 'absolute' } });
         dropInfoElement.textContent = supportObj['value'] + ' SVG, PNG, and JPG';
         const dropUploader = dropAreaElement.appendChild(this.createElement('input', {
@@ -18622,6 +18717,7 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends Component {
         dropUploader.setAttribute('accept', 'image/*');
         dropAreaElement.appendChild(dropIconElement);
         dropAreaElement.appendChild(dropContentElement);
+        dropAreaElement.appendChild(minDropContentElem);
         dropAreaElement.appendChild(dropInfoElement);
         canvasWrapper.appendChild(dropAreaElement);
         this.lowerCanvas = canvasWrapper.appendChild(this.createElement('canvas', {
@@ -19628,7 +19724,9 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends Component {
      * @returns {void}.
      */
     okBtn(isMouseDown) {
-        this.element.querySelector('.e-contextual-toolbar-wrapper').classList.remove('e-frame-wrapper');
+        if (this.element.querySelector('.e-contextual-toolbar-wrapper')) {
+            this.element.querySelector('.e-contextual-toolbar-wrapper').classList.remove('e-frame-wrapper');
+        }
         let isCropSelection = false;
         let splitWords;
         const aspectIcon = this.element.querySelector('#' + this.element.id + '_aspectratio');
@@ -19645,6 +19743,17 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends Component {
             isCropSelection = true;
         }
         this.allowDownScale = true;
+        if ((this.activeObj.shape && this.activeObj.shape !== 'image' || this.togglePen) && !isCropSelection) {
+            const objt = { shapeSettingsObj: {} };
+            this.notify('selection', { prop: 'updatePrevShapeSettings', onPropertyChange: false, value: { obj: objt } });
+            const shapeSettings = objt['shapeSettingsObj'];
+            if (this.togglePen) {
+                shapeSettings.type = ShapeType.FreehandDraw;
+            }
+            const shapeChangedArgs = { action: 'apply', previousShapeSettings: extend({}, shapeSettings, {}, true),
+                currentShapeSettings: extend({}, shapeSettings, {}, true) };
+            this.triggerShapeChanged(shapeChangedArgs);
+        }
         /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
         if (aspectIcon || nonAspectIcon || (isBlazor() && this.currentToolbar === 'resize-toolbar')) {
             const obj = { width: null, height: null };
@@ -19940,6 +20049,9 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends Component {
         this.notify('shape', { prop: 'pushActItemIntoObj' });
         const prevCropObj = extend({}, this.cropObj, {}, true);
         const object = { currObj: {} };
+        const objt = { shapeSettingsObj: {} };
+        this.notify('selection', { prop: 'updatePrevShapeSettings', onPropertyChange: false, value: { obj: objt } });
+        const shapeSettings = objt['shapeSettingsObj'];
         this.notify('filter', { prop: 'getCurrentObj', onPropertyChange: false, value: { object: object } });
         const prevObj = object['currObj'];
         prevObj.objColl = extend([], this.objColl, [], true);
@@ -19976,6 +20088,9 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends Component {
                 }
             }
         }
+        const shapeChangedArgs = { action: type, previousShapeSettings: extend({}, shapeSettings, {}, true),
+            currentShapeSettings: extend({}, shapeSettings, {}, true) };
+        this.triggerShapeChanged(shapeChangedArgs);
     }
     /**
      * Apply Font style for text.
@@ -19989,6 +20104,9 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends Component {
         this.notify('shape', { prop: 'pushActItemIntoObj' });
         const objColl = extend([], this.objColl, [], true);
         const prevCropObj = extend({}, this.cropObj, {}, true);
+        const objt = { shapeSettingsObj: {} };
+        this.notify('selection', { prop: 'updatePrevShapeSettings', onPropertyChange: false, value: { obj: objt } });
+        const shapeSettings = objt['shapeSettingsObj'];
         const object = { currObj: {} };
         this.notify('filter', { prop: 'getCurrentObj', onPropertyChange: false, value: { object: object } });
         const prevObj = object['currObj'];
@@ -20037,6 +20155,10 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends Component {
                     currentText: null, previousFilter: null, isCircleCrop: null } });
             this.notify('selection', { prop: 'redrawShape', value: { obj: this.objColl[this.objColl.length - 1] } });
         }
+        const shapeChangedArgs = { action: 'font-family', previousShapeSettings: extend({}, shapeSettings, {}, true),
+            currentShapeSettings: extend({}, shapeSettings, {}, true) };
+        shapeChangedArgs.currentShapeSettings.fontFamily = this.textArea.style.fontFamily;
+        this.triggerShapeChanged(shapeChangedArgs);
     }
     /**
      * Apply Font size for text.
@@ -20050,6 +20172,9 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends Component {
         this.notify('selection', { prop: 'setInitialTextEdit', value: { bool: false } });
         this.notify('shape', { prop: 'pushActItemIntoObj' });
         const prevCropObj = extend({}, this.cropObj, {}, true);
+        const objt = { shapeSettingsObj: {} };
+        this.notify('selection', { prop: 'updatePrevShapeSettings', onPropertyChange: false, value: { obj: objt } });
+        const shapeSettings = objt['shapeSettingsObj'];
         const object = { currObj: {} };
         this.notify('filter', { prop: 'getCurrentObj', onPropertyChange: false, value: { object: object } });
         const prevObj = object['currObj'];
@@ -20129,6 +20254,10 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends Component {
                     currentText: null, previousFilter: null, isCircleCrop: null } });
             this.notify('selection', { prop: 'redrawShape', value: { obj: this.objColl[this.objColl.length - 1] } });
         }
+        const shapeChangedArgs = { action: 'font-size', previousShapeSettings: extend({}, shapeSettings, {}, true),
+            currentShapeSettings: extend({}, shapeSettings, {}, true) };
+        shapeChangedArgs.currentShapeSettings.fontSize = this.activeObj.textSettings.fontSize;
+        this.triggerShapeChanged(shapeChangedArgs);
     }
     /**
      * Apply Font color for text.
@@ -20141,6 +20270,9 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends Component {
         this.notify('selection', { prop: 'setInitialTextEdit', value: { bool: false } });
         this.notify('shape', { prop: 'pushActItemIntoObj' });
         const prevCropObj = extend({}, this.cropObj, {}, true);
+        const objt = { shapeSettingsObj: {} };
+        this.notify('selection', { prop: 'updatePrevShapeSettings', onPropertyChange: false, value: { obj: objt } });
+        const shapeSettings = objt['shapeSettingsObj'];
         const object = { currObj: {} };
         this.notify('filter', { prop: 'getCurrentObj', onPropertyChange: false, value: { object: object } });
         const prevObj = object['currObj'];
@@ -20188,6 +20320,10 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends Component {
                     currentText: null, previousFilter: null, isCircleCrop: null } });
             this.notify('selection', { prop: 'redrawShape', value: { obj: this.objColl[this.objColl.length - 1] } });
         }
+        const shapeChangedArgs = { action: 'font-color', previousShapeSettings: extend({}, shapeSettings, {}, true),
+            currentShapeSettings: extend({}, shapeSettings, {}, true) };
+        shapeChangedArgs.currentShapeSettings.fillColor = value;
+        this.triggerShapeChanged(shapeChangedArgs);
     }
     /**
      * Apply Pen stroke width.
@@ -20201,6 +20337,9 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends Component {
         const temp = extend([], this.pointColl, [], true);
         this.updateFreehandDrawColorChange();
         const prevCropObj = extend({}, this.cropObj, {}, true);
+        const objt = { shapeSettingsObj: {} };
+        this.notify('selection', { prop: 'updatePrevShapeSettings', onPropertyChange: false, value: { obj: objt } });
+        let shapeSettings = objt['shapeSettingsObj'];
         const object = { currObj: {} };
         this.notify('filter', { prop: 'getCurrentObj', onPropertyChange: false, value: { object: object } });
         const prevObj = object['currObj'];
@@ -20231,6 +20370,11 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends Component {
                     previousCropObj: prevCropObj, previousText: null,
                     currentText: null, previousFilter: null, isCircleCrop: null } });
         }
+        shapeSettings.type = ShapeType.FreehandDraw;
+        const shapeChangedArgs = { action: 'stroke-width', previousShapeSettings: extend({}, shapeSettings, {}, true),
+            currentShapeSettings: extend({}, shapeSettings, {}, true) };
+        shapeChangedArgs.currentShapeSettings.strokeWidth = this.activeObj.strokeSettings.strokeWidth;
+        this.triggerShapeChanged(shapeChangedArgs);
     }
     /**
      * Apply Pen stroke color.
@@ -20244,6 +20388,9 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends Component {
         const temp = extend([], this.pointColl, [], true);
         this.updateFreehandDrawColorChange();
         const prevCropObj = extend({}, this.cropObj, {}, true);
+        const objt = { shapeSettingsObj: {} };
+        this.notify('selection', { prop: 'updatePrevShapeSettings', onPropertyChange: false, value: { obj: objt } });
+        const shapeSettings = objt['shapeSettingsObj'];
         const object = { currObj: {} };
         this.notify('filter', { prop: 'getCurrentObj', onPropertyChange: false, value: { object: object } });
         const prevObj = object['currObj'];
@@ -20275,6 +20422,11 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends Component {
         else if (!this.togglePen) {
             this.notify('selection', { prop: 'redrawShape', value: { obj: this.activeObj } });
         }
+        shapeSettings.type = ShapeType.FreehandDraw;
+        const shapeChangedArgs = { action: 'stroke-color', previousShapeSettings: extend({}, shapeSettings, {}, true),
+            currentShapeSettings: extend({}, shapeSettings, {}, true) };
+        shapeChangedArgs.currentShapeSettings.strokeColor = value;
+        this.triggerShapeChanged(shapeChangedArgs);
     }
     /**
      * Apply Shape stroke width.
@@ -20286,6 +20438,9 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends Component {
     updateStrokeWidth(id) {
         if (this.activeObj.shape && (this.activeObj.shape !== 'path' || (this.activeObj.shape === 'path' &&
             this.activeObj.pointColl.length > 0))) {
+            const obj = { shapeSettingsObj: {} };
+            this.notify('selection', { prop: 'updatePrevShapeSettings', onPropertyChange: false, value: { obj: obj } });
+            const shapeSettings = obj['shapeSettingsObj'];
             this.notify('shape', { prop: 'pushActItemIntoObj' });
             const prevCropObj = extend({}, this.cropObj, {}, true);
             const object = { currObj: {} };
@@ -20310,6 +20465,10 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends Component {
                     previousCropObj: prevCropObj, previousText: null,
                     currentText: null, previousFilter: null, isCircleCrop: null } });
             this.notify('selection', { prop: 'redrawShape', value: { obj: this.objColl[this.objColl.length - 1] } });
+            const shapeChangedArgs = { action: 'stroke-width', previousShapeSettings: extend({}, shapeSettings, {}, true),
+                currentShapeSettings: extend({}, shapeSettings, {}, true) };
+            shapeChangedArgs.currentShapeSettings.strokeWidth = this.activeObj.strokeSettings.strokeWidth;
+            this.triggerShapeChanged(shapeChangedArgs);
         }
         else if (this.activeObj.shape && (this.activeObj.shape === 'path' &&
             this.activeObj.pointColl.length === 0)) {
@@ -20327,6 +20486,9 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends Component {
      * @returns {void}.
      */
     updateStrokeColor(value) {
+        const objt = { shapeSettingsObj: {} };
+        this.notify('selection', { prop: 'updatePrevShapeSettings', onPropertyChange: false, value: { obj: objt } });
+        const shapeSettings = objt['shapeSettingsObj'];
         if (this.activeObj.shape && (this.activeObj.shape !== 'path' || (this.activeObj.shape === 'path' &&
             this.activeObj.pointColl.length > 0))) {
             this.notify('shape', { prop: 'pushActItemIntoObj' });
@@ -20359,6 +20521,10 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends Component {
             this.activeObj.strokeSettings.strokeColor = value;
             this.notify('shape', { prop: 'setStrokeSettings', value: { strokeSettings: null, strokeColor: this.activeObj.strokeSettings.strokeColor, fillColor: null, strokeWidth: null } });
         }
+        const shapeChangedArgs = { action: 'stroke-color', previousShapeSettings: extend({}, shapeSettings, {}, true),
+            currentShapeSettings: extend({}, shapeSettings, {}, true) };
+        shapeChangedArgs.currentShapeSettings.strokeColor = value;
+        this.triggerShapeChanged(shapeChangedArgs);
     }
     /**
      * Apply Shape fill color.
@@ -20368,6 +20534,9 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends Component {
      * @returns {void}.
      */
     updateFillColor(value) {
+        const obj = { shapeSettingsObj: {} };
+        this.notify('selection', { prop: 'updatePrevShapeSettings', onPropertyChange: false, value: { obj: obj } });
+        const shapeSettings = obj['shapeSettingsObj'];
         this.notify('shape', { prop: 'pushActItemIntoObj' });
         const prevCropObj = extend({}, this.cropObj, {}, true);
         const object = { currObj: {} };
@@ -20392,6 +20561,10 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends Component {
                 previousCropObj: prevCropObj, previousText: null,
                 currentText: null, previousFilter: null, isCircleCrop: null } });
         this.notify('selection', { prop: 'redrawShape', value: { obj: this.objColl[this.objColl.length - 1] } });
+        const shapeChangedArgs = { action: 'fill-color', previousShapeSettings: extend({}, shapeSettings, {}, true),
+            currentShapeSettings: extend({}, shapeSettings, {}, true) };
+        shapeChangedArgs.currentShapeSettings.fillColor = value;
+        this.triggerShapeChanged(shapeChangedArgs);
     }
     /**
      * Apply horizontal flip.
@@ -20588,6 +20761,10 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends Component {
         if (isBlazor() && this.element.querySelector('.place-holder')) {
             this.element.querySelector('.place-holder').remove();
         }
+        if (this.element.offsetWidth > 359 && this.element.querySelector('.e-ie-min-drop-content') && this.element.querySelector('.e-ie-drop-content')) {
+            this.element.querySelector('.e-ie-min-drop-content').style.display = 'none';
+            this.element.querySelector('.e-ie-drop-content').style.display = 'block';
+        }
         if (isBlazor() && this.element.querySelector('.e-ie-drop-area')) {
             this.element.querySelector('.e-ie-drop-area').style.display = 'block';
         }
@@ -20692,6 +20869,19 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends Component {
     // eslint-disable-next-line @typescript-eslint/no-unused-vars, @typescript-eslint/no-empty-function
     updateToolbar(element, type, value) {
     }
+    /**
+     * Trigger the shapeChanging event for after the shape applied.
+     *
+     * @param { ShapeChangeEventArgs } shapeChangedArgs - Specifies the shapeChaning event args.
+     * @hidden
+     * @returns {void}.
+     */
+    triggerShapeChanged(shapeChangedArgs) {
+        if (isBlazor() && this.events && this.events.shapeChanged.hasDelegate === true) {
+            /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
+            this.dotNetRef.invokeMethodAsync('ShapeEventAsync', 'ShapeChanged', shapeChangedArgs);
+        }
+    }
 };
 __decorate([
     Property('')
@@ -20942,6 +21132,33 @@ 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.
@@ -21164,6 +21381,7 @@ class ToolbarModule {
             W: 'W',
             H: 'H',
             DragText: 'Drag and drop your image here or',
+            DropText: 'Drop your image here or',
             BrowseText: 'Browse here...',
             SupportText: 'Supports:',
             Frame: 'Frame',