@syncfusion/ej2-image-editor 23.1.36 → 23.1.39

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

@@ -4292,7 +4292,11 @@ var Draw = /** @__PURE__ @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;
@@ -6264,6 +6268,13 @@ var FreehandDrawing = /** @__PURE__ @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();
@@ -6308,13 +6319,20 @@ var FreehandDrawing = /** @__PURE__ @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;
@@ -6330,6 +6348,7 @@ var FreehandDrawing = /** @__PURE__ @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);
         }
     };
@@ -6650,7 +6669,6 @@ var FreehandDrawing = /** @__PURE__ @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) {
@@ -6681,30 +6699,7 @@ var FreehandDrawing = /** @__PURE__ @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();
@@ -7084,6 +7079,42 @@ var FreehandDrawing = /** @__PURE__ @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;
 }());
 
@@ -7343,6 +7374,9 @@ var Selection = /** @__PURE__ @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 () {
@@ -8165,8 +8199,14 @@ var Selection = /** @__PURE__ @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;
@@ -8221,6 +8261,20 @@ var Selection = /** @__PURE__ @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) {
@@ -9932,6 +9986,12 @@ var Selection = /** @__PURE__ @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 });
@@ -10336,7 +10396,7 @@ var Selection = /** @__PURE__ @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' ||
@@ -10367,6 +10427,12 @@ var Selection = /** @__PURE__ @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();
@@ -12705,6 +12771,9 @@ var Shape = /** @__PURE__ @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;
@@ -13535,6 +13604,13 @@ var Shape = /** @__PURE__ @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' } });
             }
         }
     };
@@ -13704,10 +13780,10 @@ var Shape = /** @__PURE__ @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 };
@@ -13720,10 +13796,10 @@ var Shape = /** @__PURE__ @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 };
@@ -14031,6 +14107,9 @@ var Shape = /** @__PURE__ @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();
@@ -14054,6 +14133,10 @@ var Shape = /** @__PURE__ @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;
@@ -14417,14 +14500,14 @@ var Shape = /** @__PURE__ @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);
@@ -14576,19 +14659,19 @@ var Shape = /** @__PURE__ @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'];
@@ -14627,9 +14710,9 @@ var Shape = /** @__PURE__ @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()) {
@@ -18508,6 +18591,10 @@ var ImageEditor = /** @__PURE__ @class */ (function (_super) {
             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) {
             var canvasWrapper = document.querySelector('#' + this.element.id + '_canvasWrapper');
@@ -18667,18 +18754,26 @@ var ImageEditor = /** @__PURE__ @class */ (function (_super) {
         }));
         var dragObj = { key: 'DragText' };
         this.notify('toolbar', { prop: 'getLocaleText', onPropertyChange: false, value: { obj: dragObj } });
+        var dropObj = { key: 'DropText' };
+        this.notify('toolbar', { prop: 'getLocaleText', onPropertyChange: false, value: { obj: dropObj } });
         var browseObj = { key: 'BrowseText' };
         this.notify('toolbar', { prop: 'getLocaleText', onPropertyChange: false, value: { obj: browseObj } });
         var supportObj = { key: 'SupportText' };
         this.notify('toolbar', { prop: 'getLocaleText', onPropertyChange: false, value: { obj: supportObj } });
         var dropAreaElement = this.createElement('div', { id: this.element.id + '_dropArea', className: 'e-ie-drop-area', attrs: { style: 'position: relative;' } });
         var dropIconElement = this.createElement('span', { className: 'e-ie-drop-icon e-icons e-image', attrs: { style: 'position: absolute;' } });
-        var dropContentElement = this.createElement('span', { className: 'e-ie-drop-content', attrs: { style: 'position: absolute;' } });
+        var dropContentElement = this.createElement('span', { className: 'e-ie-drop-content', attrs: { style: 'position: absolute; display: none;' } });
         dropContentElement.textContent = dragObj['value'] + ' ';
+        var minDropContentElem = this.createElement('span', { className: 'e-ie-min-drop-content', attrs: { style: 'position: absolute;' } });
+        minDropContentElem.textContent = dropObj['value'] + ' ';
         var dropAnchorElement = this.createElement('a', { id: this.element.id + '_dropBrowse', className: 'e-ie-drop-browse' });
         dropAnchorElement.textContent = browseObj['value'];
+        var 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 = '';
         var dropInfoElement = this.createElement('span', { className: 'e-ie-drop-info', attrs: { position: 'absolute' } });
         dropInfoElement.textContent = supportObj['value'] + ' SVG, PNG, and JPG';
         var dropUploader = dropAreaElement.appendChild(this.createElement('input', {
@@ -18688,6 +18783,7 @@ var ImageEditor = /** @__PURE__ @class */ (function (_super) {
         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', {
@@ -19694,7 +19790,9 @@ var ImageEditor = /** @__PURE__ @class */ (function (_super) {
      * @returns {void}.
      */
     ImageEditor.prototype.okBtn = function (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');
+        }
         var isCropSelection = false;
         var splitWords;
         var aspectIcon = this.element.querySelector('#' + this.element.id + '_aspectratio');
@@ -19711,6 +19809,17 @@ var ImageEditor = /** @__PURE__ @class */ (function (_super) {
             isCropSelection = true;
         }
         this.allowDownScale = true;
+        if ((this.activeObj.shape && this.activeObj.shape !== 'image' || this.togglePen) && !isCropSelection) {
+            var objt = { shapeSettingsObj: {} };
+            this.notify('selection', { prop: 'updatePrevShapeSettings', onPropertyChange: false, value: { obj: objt } });
+            var shapeSettings = objt['shapeSettingsObj'];
+            if (this.togglePen) {
+                shapeSettings.type = ShapeType.FreehandDraw;
+            }
+            var 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')) {
             var obj_2 = { width: null, height: null };
@@ -20007,6 +20116,9 @@ var ImageEditor = /** @__PURE__ @class */ (function (_super) {
         this.notify('shape', { prop: 'pushActItemIntoObj' });
         var prevCropObj = extend({}, this.cropObj, {}, true);
         var object = { currObj: {} };
+        var objt = { shapeSettingsObj: {} };
+        this.notify('selection', { prop: 'updatePrevShapeSettings', onPropertyChange: false, value: { obj: objt } });
+        var shapeSettings = objt['shapeSettingsObj'];
         this.notify('filter', { prop: 'getCurrentObj', onPropertyChange: false, value: { object: object } });
         var prevObj = object['currObj'];
         prevObj.objColl = extend([], this.objColl, [], true);
@@ -20043,6 +20155,9 @@ var ImageEditor = /** @__PURE__ @class */ (function (_super) {
                 }
             }
         }
+        var shapeChangedArgs = { action: type, previousShapeSettings: extend({}, shapeSettings, {}, true),
+            currentShapeSettings: extend({}, shapeSettings, {}, true) };
+        this.triggerShapeChanged(shapeChangedArgs);
     };
     /**
      * Apply Font style for text.
@@ -20056,6 +20171,9 @@ var ImageEditor = /** @__PURE__ @class */ (function (_super) {
         this.notify('shape', { prop: 'pushActItemIntoObj' });
         var objColl = extend([], this.objColl, [], true);
         var prevCropObj = extend({}, this.cropObj, {}, true);
+        var objt = { shapeSettingsObj: {} };
+        this.notify('selection', { prop: 'updatePrevShapeSettings', onPropertyChange: false, value: { obj: objt } });
+        var shapeSettings = objt['shapeSettingsObj'];
         var object = { currObj: {} };
         this.notify('filter', { prop: 'getCurrentObj', onPropertyChange: false, value: { object: object } });
         var prevObj = object['currObj'];
@@ -20104,6 +20222,10 @@ var ImageEditor = /** @__PURE__ @class */ (function (_super) {
                     currentText: null, previousFilter: null, isCircleCrop: null } });
             this.notify('selection', { prop: 'redrawShape', value: { obj: this.objColl[this.objColl.length - 1] } });
         }
+        var 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.
@@ -20117,6 +20239,9 @@ var ImageEditor = /** @__PURE__ @class */ (function (_super) {
         this.notify('selection', { prop: 'setInitialTextEdit', value: { bool: false } });
         this.notify('shape', { prop: 'pushActItemIntoObj' });
         var prevCropObj = extend({}, this.cropObj, {}, true);
+        var objt = { shapeSettingsObj: {} };
+        this.notify('selection', { prop: 'updatePrevShapeSettings', onPropertyChange: false, value: { obj: objt } });
+        var shapeSettings = objt['shapeSettingsObj'];
         var object = { currObj: {} };
         this.notify('filter', { prop: 'getCurrentObj', onPropertyChange: false, value: { object: object } });
         var prevObj = object['currObj'];
@@ -20196,6 +20321,10 @@ var ImageEditor = /** @__PURE__ @class */ (function (_super) {
                     currentText: null, previousFilter: null, isCircleCrop: null } });
             this.notify('selection', { prop: 'redrawShape', value: { obj: this.objColl[this.objColl.length - 1] } });
         }
+        var 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.
@@ -20208,6 +20337,9 @@ var ImageEditor = /** @__PURE__ @class */ (function (_super) {
         this.notify('selection', { prop: 'setInitialTextEdit', value: { bool: false } });
         this.notify('shape', { prop: 'pushActItemIntoObj' });
         var prevCropObj = extend({}, this.cropObj, {}, true);
+        var objt = { shapeSettingsObj: {} };
+        this.notify('selection', { prop: 'updatePrevShapeSettings', onPropertyChange: false, value: { obj: objt } });
+        var shapeSettings = objt['shapeSettingsObj'];
         var object = { currObj: {} };
         this.notify('filter', { prop: 'getCurrentObj', onPropertyChange: false, value: { object: object } });
         var prevObj = object['currObj'];
@@ -20255,6 +20387,10 @@ var ImageEditor = /** @__PURE__ @class */ (function (_super) {
                     currentText: null, previousFilter: null, isCircleCrop: null } });
             this.notify('selection', { prop: 'redrawShape', value: { obj: this.objColl[this.objColl.length - 1] } });
         }
+        var shapeChangedArgs = { action: 'font-color', previousShapeSettings: extend({}, shapeSettings, {}, true),
+            currentShapeSettings: extend({}, shapeSettings, {}, true) };
+        shapeChangedArgs.currentShapeSettings.fillColor = value;
+        this.triggerShapeChanged(shapeChangedArgs);
     };
     /**
      * Apply Pen stroke width.
@@ -20268,6 +20404,9 @@ var ImageEditor = /** @__PURE__ @class */ (function (_super) {
         var temp = extend([], this.pointColl, [], true);
         this.updateFreehandDrawColorChange();
         var prevCropObj = extend({}, this.cropObj, {}, true);
+        var objt = { shapeSettingsObj: {} };
+        this.notify('selection', { prop: 'updatePrevShapeSettings', onPropertyChange: false, value: { obj: objt } });
+        var shapeSettings = objt['shapeSettingsObj'];
         var object = { currObj: {} };
         this.notify('filter', { prop: 'getCurrentObj', onPropertyChange: false, value: { object: object } });
         var prevObj = object['currObj'];
@@ -20298,6 +20437,11 @@ var ImageEditor = /** @__PURE__ @class */ (function (_super) {
                     previousCropObj: prevCropObj, previousText: null,
                     currentText: null, previousFilter: null, isCircleCrop: null } });
         }
+        shapeSettings.type = ShapeType.FreehandDraw;
+        var 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.
@@ -20311,6 +20455,9 @@ var ImageEditor = /** @__PURE__ @class */ (function (_super) {
         var temp = extend([], this.pointColl, [], true);
         this.updateFreehandDrawColorChange();
         var prevCropObj = extend({}, this.cropObj, {}, true);
+        var objt = { shapeSettingsObj: {} };
+        this.notify('selection', { prop: 'updatePrevShapeSettings', onPropertyChange: false, value: { obj: objt } });
+        var shapeSettings = objt['shapeSettingsObj'];
         var object = { currObj: {} };
         this.notify('filter', { prop: 'getCurrentObj', onPropertyChange: false, value: { object: object } });
         var prevObj = object['currObj'];
@@ -20342,6 +20489,11 @@ var ImageEditor = /** @__PURE__ @class */ (function (_super) {
         else if (!this.togglePen) {
             this.notify('selection', { prop: 'redrawShape', value: { obj: this.activeObj } });
         }
+        shapeSettings.type = ShapeType.FreehandDraw;
+        var shapeChangedArgs = { action: 'stroke-color', previousShapeSettings: extend({}, shapeSettings, {}, true),
+            currentShapeSettings: extend({}, shapeSettings, {}, true) };
+        shapeChangedArgs.currentShapeSettings.strokeColor = value;
+        this.triggerShapeChanged(shapeChangedArgs);
     };
     /**
      * Apply Shape stroke width.
@@ -20353,6 +20505,9 @@ var ImageEditor = /** @__PURE__ @class */ (function (_super) {
     ImageEditor.prototype.updateStrokeWidth = function (id) {
         if (this.activeObj.shape && (this.activeObj.shape !== 'path' || (this.activeObj.shape === 'path' &&
             this.activeObj.pointColl.length > 0))) {
+            var obj = { shapeSettingsObj: {} };
+            this.notify('selection', { prop: 'updatePrevShapeSettings', onPropertyChange: false, value: { obj: obj } });
+            var shapeSettings = obj['shapeSettingsObj'];
             this.notify('shape', { prop: 'pushActItemIntoObj' });
             var prevCropObj = extend({}, this.cropObj, {}, true);
             var object = { currObj: {} };
@@ -20377,6 +20532,10 @@ var ImageEditor = /** @__PURE__ @class */ (function (_super) {
                     previousCropObj: prevCropObj, previousText: null,
                     currentText: null, previousFilter: null, isCircleCrop: null } });
             this.notify('selection', { prop: 'redrawShape', value: { obj: this.objColl[this.objColl.length - 1] } });
+            var 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)) {
@@ -20394,6 +20553,9 @@ var ImageEditor = /** @__PURE__ @class */ (function (_super) {
      * @returns {void}.
      */
     ImageEditor.prototype.updateStrokeColor = function (value) {
+        var objt = { shapeSettingsObj: {} };
+        this.notify('selection', { prop: 'updatePrevShapeSettings', onPropertyChange: false, value: { obj: objt } });
+        var 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' });
@@ -20426,6 +20588,10 @@ var ImageEditor = /** @__PURE__ @class */ (function (_super) {
             this.activeObj.strokeSettings.strokeColor = value;
             this.notify('shape', { prop: 'setStrokeSettings', value: { strokeSettings: null, strokeColor: this.activeObj.strokeSettings.strokeColor, fillColor: null, strokeWidth: null } });
         }
+        var shapeChangedArgs = { action: 'stroke-color', previousShapeSettings: extend({}, shapeSettings, {}, true),
+            currentShapeSettings: extend({}, shapeSettings, {}, true) };
+        shapeChangedArgs.currentShapeSettings.strokeColor = value;
+        this.triggerShapeChanged(shapeChangedArgs);
     };
     /**
      * Apply Shape fill color.
@@ -20435,6 +20601,9 @@ var ImageEditor = /** @__PURE__ @class */ (function (_super) {
      * @returns {void}.
      */
     ImageEditor.prototype.updateFillColor = function (value) {
+        var obj = { shapeSettingsObj: {} };
+        this.notify('selection', { prop: 'updatePrevShapeSettings', onPropertyChange: false, value: { obj: obj } });
+        var shapeSettings = obj['shapeSettingsObj'];
         this.notify('shape', { prop: 'pushActItemIntoObj' });
         var prevCropObj = extend({}, this.cropObj, {}, true);
         var object = { currObj: {} };
@@ -20459,6 +20628,10 @@ var ImageEditor = /** @__PURE__ @class */ (function (_super) {
                 previousCropObj: prevCropObj, previousText: null,
                 currentText: null, previousFilter: null, isCircleCrop: null } });
         this.notify('selection', { prop: 'redrawShape', value: { obj: this.objColl[this.objColl.length - 1] } });
+        var shapeChangedArgs = { action: 'fill-color', previousShapeSettings: extend({}, shapeSettings, {}, true),
+            currentShapeSettings: extend({}, shapeSettings, {}, true) };
+        shapeChangedArgs.currentShapeSettings.fillColor = value;
+        this.triggerShapeChanged(shapeChangedArgs);
     };
     /**
      * Apply horizontal flip.
@@ -20655,6 +20828,10 @@ var ImageEditor = /** @__PURE__ @class */ (function (_super) {
         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';
         }
@@ -20759,6 +20936,19 @@ var ImageEditor = /** @__PURE__ @class */ (function (_super) {
     // eslint-disable-next-line @typescript-eslint/no-unused-vars, @typescript-eslint/no-empty-function
     ImageEditor.prototype.updateToolbar = function (element, type, value) {
     };
+    /**
+     * Trigger the shapeChanging event for after the shape applied.
+     *
+     * @param { ShapeChangeEventArgs } shapeChangedArgs - Specifies the shapeChaning event args.
+     * @hidden
+     * @returns {void}.
+     */
+    ImageEditor.prototype.triggerShapeChanged = function (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);
+        }
+    };
     var ImageEditor_1;
     __decorate([
         Property('')
@@ -21011,6 +21201,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.
@@ -21233,6 +21450,7 @@ var ToolbarModule = /** @__PURE__ @class */ (function () {
             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',