@syncfusion/ej2-image-editor 23.1.36 → 23.1.38

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

@@ -6264,6 +6264,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.parent.activeObj.strokeSettings.strokeWidth,
+            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 +6315,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.parent.activeObj.strokeSettings.strokeWidth,
+            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;
@@ -6650,7 +6664,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 +6694,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 +7074,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;
+                parent.activeObj.strokeSettings.strokeWidth = 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;
+            parent.activeObj.strokeSettings.strokeWidth = 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 +7369,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 +8194,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 +8256,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 +9981,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 +10391,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 +10422,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 +12766,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 +13599,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 +13775,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 +13791,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 +14102,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 +14128,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 +14495,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 +14654,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 +14705,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 +18586,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 +18749,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 +18778,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 +19785,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 +19804,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 +20111,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 +20150,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 +20166,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 +20217,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 +20234,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 +20316,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 +20332,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 +20382,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 +20399,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 +20432,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 +20450,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 +20484,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 +20500,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 +20527,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 +20548,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 +20583,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 +20596,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 +20623,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 +20823,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 +20931,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('')
@@ -21233,6 +21418,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',