@syncfusion/ej2-image-editor 24.2.8 → 25.1.37

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

@@ -17,7 +17,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-import { Component, NotifyPropertyChanges, Property, addClass, removeClass, extend, isBlazor } from '@syncfusion/ej2-base';
+import { Component, NotifyPropertyChanges, Property, addClass, removeClass, extend } from '@syncfusion/ej2-base';
 import { Event, EventHandler, getComponent, isNullOrUndefined, getUniqueID } from '@syncfusion/ej2-base';
 import { Dialog, createSpinner } from '@syncfusion/ej2-popups';
 import { Complex, Browser, ChildProperty, compile as templateCompiler, compile } from '@syncfusion/ej2-base';
@@ -252,26 +252,13 @@ var ImageEditor = /** @class */ (function (_super) {
         _this.isFrameBtnClick = false;
         /** @hidden */
         _this.isChangesSaved = false;
-        if (isBlazor()) {
-            new Crop(_this);
-            new Draw(_this);
-            new Filter(_this);
-            new FreehandDrawing(_this);
-            new Selection(_this);
-            new Shape(_this);
-            new Transform(_this);
-            new UndoRedo(_this);
-            new Export(_this);
-        }
-        else {
-            ImageEditor_1.Inject(Crop, Draw, Selection, Transform, Export, ToolbarModule);
-            ImageEditor_1.Inject(UndoRedo);
-            ImageEditor_1.Inject(Filter);
-            ImageEditor_1.Inject(Shape);
-            ImageEditor_1.Inject(FreehandDrawing);
-            if (element) {
-                _this.appendTo(element);
-            }
+        ImageEditor_1.Inject(Crop, Draw, Selection, Transform, Export, ToolbarModule);
+        ImageEditor_1.Inject(UndoRedo);
+        ImageEditor_1.Inject(Filter);
+        ImageEditor_1.Inject(Shape);
+        ImageEditor_1.Inject(FreehandDrawing);
+        if (element) {
+            _this.appendTo(element);
         }
         return _this;
     }
@@ -383,13 +370,8 @@ var ImageEditor = /** @class */ (function (_super) {
                         }
                         this.upperContext.strokeStyle = this.themeColl[this.theme]['primaryColor'];
                         this.upperContext.fillStyle = this.themeColl[this.theme]['secondaryColor'];
-                        if (isBlazor()) {
-                            this.updateToolbar(this.element, 'imageLoaded');
-                        }
-                        else {
-                            this.notify('toolbar', { prop: 'refresh-toolbar', onPropertyChange: false, value: { type: 'main',
-                                    isApplyBtn: null, isCropping: null, isZooming: null, cType: null } });
-                        }
+                        this.notify('toolbar', { prop: 'refresh-toolbar', onPropertyChange: false, value: { type: 'main',
+                                isApplyBtn: null, isCropping: null, isZooming: null, cType: null } });
                     }
                     break;
                 case 'finetuneSettings':
@@ -401,13 +383,8 @@ var ImageEditor = /** @class */ (function (_super) {
                 case 'locale':
                     if (newProperties.locale) {
                         this.notify('toolbar', { prop: 'setLocale', onPropertyChange: false, value: { locale: newProperties.locale } });
-                        if (isBlazor()) {
-                            this.updateToolbar(this.element, 'imageLoaded');
-                        }
-                        else {
-                            this.notify('toolbar', { prop: 'refresh-toolbar', onPropertyChange: false, value: { type: 'main',
-                                    isApplyBtn: null, isCropping: null, isZooming: null, cType: null } });
-                        }
+                        this.notify('toolbar', { prop: 'refresh-toolbar', onPropertyChange: false, value: { type: 'main',
+                                isApplyBtn: null, isCropping: null, isZooming: null, cType: null } });
                     }
                     break;
                 case 'allowUndoRedo':
@@ -417,47 +394,25 @@ var ImageEditor = /** @class */ (function (_super) {
                     else {
                         this.allowUndoRedo = false;
                     }
-                    if (isBlazor()) {
-                        this.updateToolbar(this.element, 'imageLoaded');
-                    }
-                    else {
-                        this.notify('toolbar', { prop: 'refresh-toolbar', onPropertyChange: false, value: { type: 'main',
-                                isApplyBtn: null, isCropping: null, isZooming: null, cType: null } });
-                    }
+                    this.notify('toolbar', { prop: 'refresh-toolbar', onPropertyChange: false, value: { type: 'main',
+                            isApplyBtn: null, isCropping: null, isZooming: null, cType: null } });
                     break;
                 case 'showQuickAccessToolbar':
                     if (newProperties.showQuickAccessToolbar) {
                         this.showQuickAccessToolbar = true;
-                        if (!isBlazor()) {
-                            this.notify('toolbar', { prop: 'create-qa-toolbar', onPropertyChange: false });
-                        }
+                        this.notify('toolbar', { prop: 'create-qa-toolbar', onPropertyChange: false });
                         indexObj = { freehandSelectedIndex: null };
                         this.notify('freehand-draw', { prop: 'getFreehandSelectedIndex', onPropertyChange: false, value: { obj: indexObj } });
                         if (this.activeObj.shape) {
-                            if (isBlazor()) {
-                                this.updateToolbar(this.element, 'quickAccessToolbar', this.activeObj.shape);
-                            }
-                            else {
-                                this.notify('toolbar', { prop: 'renderQAT', onPropertyChange: false, value: { isPenEdit: null } });
-                            }
+                            this.notify('toolbar', { prop: 'renderQAT', onPropertyChange: false, value: { isPenEdit: null } });
                         }
                         else if (indexObj['freehandSelectedIndex']) {
-                            if (isBlazor()) {
-                                this.updateToolbar(this.element, 'quickAccessToolbar', 'pen');
-                            }
-                            else {
-                                this.notify('toolbar', { prop: 'renderQAT', onPropertyChange: false, value: { isPenEdit: true } });
-                            }
+                            this.notify('toolbar', { prop: 'renderQAT', onPropertyChange: false, value: { isPenEdit: true } });
                         }
                     }
                     else {
                         this.showQuickAccessToolbar = false;
-                        if (isBlazor()) {
-                            this.updateToolbar(this.element, 'destroyQuickAccessToolbar');
-                        }
-                        else {
-                            this.notify('toolbar', { prop: 'destroy-qa-toolbar', onPropertyChange: false });
-                        }
+                        this.notify('toolbar', { prop: 'destroy-qa-toolbar', onPropertyChange: false });
                     }
                     break;
                 case 'zoomSettings':
@@ -467,22 +422,12 @@ var ImageEditor = /** @class */ (function (_super) {
                     if (isNullOrUndefined(this.zoomSettings.zoomTrigger)) {
                         this.zoomSettings.zoomTrigger = (ZoomTrigger.MouseWheel | ZoomTrigger.Pinch | ZoomTrigger.Toolbar |
                             ZoomTrigger.Commands);
-                        if (isBlazor()) {
-                            this.updateToolbar(this.element, 'imageLoaded');
-                        }
-                        else {
-                            this.notify('toolbar', { prop: 'refresh-toolbar', onPropertyChange: false, value: { type: 'main',
-                                    isApplyBtn: null, isCropping: null, isZooming: null, cType: null } });
-                        }
+                        this.notify('toolbar', { prop: 'refresh-toolbar', onPropertyChange: false, value: { type: 'main',
+                                isApplyBtn: null, isCropping: null, isZooming: null, cType: null } });
                     }
                     else if ((newProperties.zoomSettings.zoomTrigger & ZoomTrigger.Toolbar) === ZoomTrigger.Toolbar) {
-                        if (isBlazor()) {
-                            this.updateToolbar(this.element, 'imageLoaded');
-                        }
-                        else {
-                            this.notify('toolbar', { prop: 'refresh-toolbar', onPropertyChange: false, value: { type: 'main',
-                                    isApplyBtn: null, isCropping: null, isZooming: null, cType: null } });
-                        }
+                        this.notify('toolbar', { prop: 'refresh-toolbar', onPropertyChange: false, value: { type: 'main',
+                                isApplyBtn: null, isCropping: null, isZooming: null, cType: null } });
                     }
                     break;
                 case 'selectionSettings':
@@ -497,33 +442,24 @@ var ImageEditor = /** @class */ (function (_super) {
                 case 'toolbar':
                     if (newProperties.toolbar) {
                         this.toolbar = newProperties.toolbar;
-                        if (isBlazor()) {
-                            this.updateToolbar(this.element, 'imageLoaded');
-                        }
-                        else {
-                            this.notify('toolbar', { prop: 'refresh-toolbar', onPropertyChange: false, value: { type: 'main',
-                                    isApplyBtn: null, isCropping: null, isZooming: null, cType: null } });
-                        }
+                        this.notify('toolbar', { prop: 'refresh-toolbar', onPropertyChange: false, value: { type: 'main',
+                                isApplyBtn: null, isCropping: null, isZooming: null, cType: null } });
                     }
                     break;
                 case 'toolbarTemplate':
                     if (newProperties.toolbarTemplate) {
-                        if (!isBlazor()) {
-                            this.notify('toolbar', { prop: 'destroy-bottom-toolbar', onPropertyChange: false });
-                            this.notify('toolbar', { prop: 'destroy-top-toolbar', onPropertyChange: false });
-                            this.element.appendChild(this.createElement('div', {
-                                id: this.element.id + '_toolbarArea', className: 'e-toolbar-area'
-                            }));
-                            this.toolbarTemplateFn();
-                        }
+                        this.notify('toolbar', { prop: 'destroy-bottom-toolbar', onPropertyChange: false });
+                        this.notify('toolbar', { prop: 'destroy-top-toolbar', onPropertyChange: false });
+                        this.element.appendChild(this.createElement('div', {
+                            id: this.element.id + '_toolbarArea', className: 'e-toolbar-area'
+                        }));
+                        this.toolbarTemplateFn();
                     }
                     break;
                 case 'quickAccessToolbarTemplate':
                     if (newProperties.quickAccessToolbarTemplate) {
-                        if (!isBlazor()) {
-                            this.notify('toolbar', { prop: 'destroy-qa-toolbar', onPropertyChange: false });
-                            this.quickAccessToolbarTemplateFn();
-                        }
+                        this.notify('toolbar', { prop: 'destroy-qa-toolbar', onPropertyChange: false });
+                        this.quickAccessToolbarTemplateFn();
                     }
                     break;
             }
@@ -539,14 +475,9 @@ var ImageEditor = /** @class */ (function (_super) {
         if (!this.element.getAttribute('class')) {
             this.element.removeAttribute('class');
         }
-        if (isBlazor()) {
-            this.element.classList.remove('e-image-editor');
-        }
-        else {
-            this.notify('toolbar', { prop: 'destroySubComponents', onPropertyChange: false });
-            this.notify('destroyed', null);
-            _super.prototype.destroy.call(this);
-        }
+        this.notify('toolbar', { prop: 'destroySubComponents', onPropertyChange: false });
+        this.notify('destroyed', null);
+        _super.prototype.destroy.call(this);
         this.unwireEvent();
         this.element.innerHTML = '';
     };
@@ -608,7 +539,7 @@ var ImageEditor = /** @class */ (function (_super) {
     ImageEditor.prototype.createDropUploader = function () {
         var _this = this;
         var uploadObj = new Uploader({
-            dropArea: document.getElementsByClassName('e-canvas-wrapper')[0],
+            dropArea: this.element.getElementsByClassName('e-canvas-wrapper')[0],
             allowedExtensions: '.jpg, .jpeg, .png,.svg',
             multiple: false,
             selected: function (args) {
@@ -737,6 +668,9 @@ var ImageEditor = /** @class */ (function (_super) {
         var obj = { toolbarHeight: 0 };
         this.notify('toolbar', { prop: 'getToolbarHeight', value: { obj: obj } });
         var height = obj['toolbarHeight'];
+        if (this.toolbar && this.toolbar.length > 0 && this.toolbar.indexOf('Open') === -1) {
+            height = 0;
+        }
         this.element.style.width = this.width;
         this.element.style.height = this.height;
         var canvasWrapper = this.element.appendChild(this.createElement('div', { id: this.element.id + '_canvasWrapper',
@@ -891,7 +825,8 @@ var ImageEditor = /** @class */ (function (_super) {
     ImageEditor.prototype.notifyResetForAllModules = function () {
         var modules = this.requiredModules();
         for (var i = 0; i < modules.length; i++) {
-            this.notify(modules[i].member, { prop: 'reset', onPropertyChange: false });
+            var module = modules[i].member;
+            this.notify(module === 'toolbar-module' ? 'toolbar' : module, { prop: 'reset', onPropertyChange: false });
         }
     };
     ImageEditor.prototype.allowShape = function (x, y) {
@@ -904,10 +839,12 @@ var ImageEditor = /** @class */ (function (_super) {
     /**
      * Clears the current selection performed in the image editor.
      *
+     * @param { boolean } resetCrop - Specifies to reset last cropped image.
+     *
      * @returns {void}.
      */
-    ImageEditor.prototype.clearSelection = function () {
-        this.notify('selection', { prop: 'clearSelection', onPropertyChange: false });
+    ImageEditor.prototype.clearSelection = function (resetCrop) {
+        this.notify('selection', { prop: 'clearSelection', onPropertyChange: false, value: { resetCrop: resetCrop } });
     };
     /**
      * Crops an image based on the selection done in the image editor.
@@ -955,7 +892,9 @@ var ImageEditor = /** @class */ (function (_super) {
      */
     ImageEditor.prototype.getImageData = function () {
         var obj = { canvas: null };
-        if (this.textArea.style.display === 'block' || this.textArea.style.display === 'inline-block') {
+        var dummyObj = { bool: false };
+        this.notify('selection', { prop: 'getFreehandDrawEditing', onPropertyChange: false, value: { obj: dummyObj } });
+        if (dummyObj['bool'] || this.togglePen || this.activeObj.shape) {
             this.okBtn();
         }
         this.notify('export', { prop: 'exportToCanvas', value: { object: obj } });
@@ -994,13 +933,11 @@ var ImageEditor = /** @class */ (function (_super) {
             this.clearContext(this.lowerContext);
             this.clearContext(this.upperContext);
             this.notify('shape', { prop: 'refreshActiveObj', onPropertyChange: false });
-            if (!isBlazor()) {
-                this.notify('toolbar', { prop: 'refresh-toolbar', onPropertyChange: false, value: { type: 'main',
-                        isApplyBtn: false, isCropping: false, isZooming: null, cType: null } });
-                if (Browser.isDevice && document.getElementById(this.element.id + '_bottomToolbar')) {
-                    getComponent(document.getElementById(this.element.id + '_bottomToolbar'), 'toolbar').destroy();
-                    this.notify('toolbar', { prop: 'create-bottom-toolbar', onPropertyChange: false });
-                }
+            this.notify('toolbar', { prop: 'refresh-toolbar', onPropertyChange: false, value: { type: 'main',
+                    isApplyBtn: false, isCropping: false, isZooming: null, cType: null } });
+            if (Browser.isDevice && document.getElementById(this.element.id + '_bottomToolbar')) {
+                getComponent(document.getElementById(this.element.id + '_bottomToolbar'), 'toolbar').destroy();
+                this.notify('toolbar', { prop: 'create-bottom-toolbar', onPropertyChange: false });
             }
             var isImageLoaded = this.isImageLoaded;
             this.currObjType.isUndoAction = this.isUndoRedo = this.togglePan = this.togglePen = this.isImageLoaded = this.isFinetuning = false;
@@ -1065,36 +1002,28 @@ var ImageEditor = /** @class */ (function (_super) {
             }
             this.notifyResetForAllModules();
             this.notify('filter', { prop: 'update-finetunes' });
-            if (!isBlazor()) {
-                if (this.toolbarTemplate) {
-                    this.toolbarHeight = this.element.querySelector('#' + this.element.id + '_toolbarArea').clientHeight;
-                }
-                else if (this.element.querySelector('#' + this.element.id + '_toolbar')) {
-                    this.toolbarHeight = this.element.querySelector('#' + this.element.id + '_toolbar').clientHeight;
-                }
-                this.notify('toolbar', { prop: 'setToolbarHeight', value: { height: this.toolbarHeight } });
+            if (this.toolbarTemplate) {
+                this.toolbarHeight = this.element.querySelector('#' + this.element.id + '_toolbarArea').clientHeight;
+            }
+            else if (this.element.querySelector('#' + this.element.id + '_toolbar')) {
+                this.toolbarHeight = this.element.querySelector('#' + this.element.id + '_toolbar').clientHeight;
             }
+            this.notify('toolbar', { prop: 'setToolbarHeight', value: { height: this.toolbarHeight } });
             this.isImageLoaded = isImageLoaded;
             this.straightenBaseImageCanvas();
             this.isImageLoaded = false;
             this.notify('draw', { prop: 'update-canvas', onPropertyChange: false });
             this.isImageLoaded = isImageLoaded;
             this.prevStraightenedDegree = 0;
-            if (!isBlazor()) {
-                var ctWrapper = this.element.querySelector('.e-contextual-toolbar-wrapper');
-                if (ctWrapper) {
-                    ctWrapper.classList.add('e-hide');
-                }
-                this.notify('toolbar', { prop: 'refresh-dropdown-btn', value: { isDisabled: false } });
-                this.notify('toolbar', { prop: 'enable-disable-btns' });
-                var straightenObj = { bool: this.isStraightening };
-                if (Browser.isDevice && straightenObj['bool']) {
-                    this.notify('crop', { prop: 'resizeWrapper' });
-                }
+            var ctWrapper = this.element.querySelector('.e-contextual-toolbar-wrapper');
+            if (ctWrapper) {
+                ctWrapper.classList.add('e-hide');
             }
-            else {
-                /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
-                this.activeObj.textSettings.fontFamily = this.defaultFontFamily;
+            this.notify('toolbar', { prop: 'refresh-dropdown-btn', value: { isDisabled: false } });
+            this.notify('toolbar', { prop: 'enable-disable-btns' });
+            var straightenObj = { bool: this.isStraightening };
+            if (Browser.isDevice && straightenObj['bool']) {
+                this.notify('crop', { prop: 'resizeWrapper' });
             }
         }
     };
@@ -1114,9 +1043,11 @@ var ImageEditor = /** @class */ (function (_super) {
      */
     ImageEditor.prototype.rotate = function (degree) {
         var obj = { isRotate: false };
+        if (degree === 90 || degree === -90) {
+            this.updateImageTransformColl(degree === 90 ? 'rotateright' : 'rotateleft');
+        }
         this.notify('transform', { prop: 'rotate', value: { degree: degree, obj: obj } });
         this.notify('draw', { prop: 'redrawDownScale' });
-        this.notify('undo-redo', { prop: 'updateCurrUrc', value: { type: 'ok' } });
         return obj['isRotate'];
     };
     /**
@@ -1154,8 +1085,20 @@ var ImageEditor = /** @class */ (function (_super) {
         this.notify('toolbar', { prop: 'performCropTransformClick', value: { shape: 'crop-' + type } });
         this.notify('draw', { prop: 'select', onPropertyChange: false,
             value: { type: type, startX: startX, startY: startY, width: width, height: height } });
-        this.notify('draw', { prop: 'select', onPropertyChange: false,
-            value: { type: type, startX: startX, startY: startY, width: width, height: height } });
+        if ((startX && startY) || (width && height)) {
+            this.notify('draw', { prop: 'select', onPropertyChange: false,
+                value: { type: type, startX: startX, startY: startY, width: width, height: height } });
+        }
+        else {
+            this.cropObj = { cropZoom: 0, defaultZoom: 0, totalPannedPoint: { x: 0, y: 0 }, totalPannedClientPoint: { x: 0, y: 0 },
+                totalPannedInternalPoint: { x: 0, y: 0 }, tempFlipPanPoint: { x: 0, y: 0 }, activeObj: {},
+                rotateFlipColl: [], degree: 0, currFlipState: '', straighten: 0, zoomFactor: 0, previousZoomValue: 0,
+                destPoints: { startX: 0, startY: 0, width: 0, height: 0 }, frame: 'none',
+                srcPoints: { startX: 0, startY: 0, width: 0, height: 0 }, filter: '', isBrightAdjust: false,
+                aspectWidth: null, aspectHeight: null, straightenZoom: 0,
+                adjustmentLevel: { brightness: 0, contrast: 0, hue: 0, opacity: 100, saturation: 0, blur: 0,
+                    exposure: 0, transparency: 100, sharpen: false, bw: false }, currentFilter: '' };
+        }
     };
     /**
      * Enable or disable a freehand drawing option in an Image Editor.
@@ -1227,16 +1170,17 @@ var ImageEditor = /** @class */ (function (_super) {
      * @param {string} strokeColor - Specifies the stroke color of ellipse.
      * @param {string} fillColor - Specifies the fill color of the ellipse.
      * @param {number} degree - Specifies the degree to rotate the ellipse.
+     * @param {boolean} isSelected - Specifies to show the ellipse in the selected state.
      * @returns {boolean}.
      *
      */
-    ImageEditor.prototype.drawEllipse = function (x, y, radiusX, radiusY, strokeWidth, strokeColor, fillColor, degree) {
+    ImageEditor.prototype.drawEllipse = function (x, y, radiusX, radiusY, strokeWidth, strokeColor, fillColor, degree, isSelected) {
         var isEllipse = false;
         var isPointsInRange = this.allowShape(x, y);
         if (!this.disabled && this.isImageLoaded && (isPointsInRange || (isNullOrUndefined(x) && isNullOrUndefined(y)))) {
             isEllipse = true;
             this.notify('shape', { prop: 'drawEllipse', onPropertyChange: false, value: { x: x, y: y, radiusX: radiusX, radiusY: radiusY,
-                    strokeWidth: strokeWidth, strokeColor: strokeColor, fillColor: fillColor, degree: degree } });
+                    strokeWidth: strokeWidth, strokeColor: strokeColor, fillColor: fillColor, degree: degree, isSelected: isSelected } });
             this.notify('draw', { prop: 'redrawDownScale' });
         }
         return isEllipse;
@@ -1250,15 +1194,16 @@ var ImageEditor = /** @class */ (function (_super) {
      * @param {number} endY - Specifies end point y-coordinates of the line.
      * @param {number} strokeWidth - Specifies the stroke width of line.
      * @param {string} strokeColor - Specifies the stroke color of line.
+     * @param {boolean} isSelected - Specifies to show the line in the selected state.
      * @returns {boolean}.
      */
-    ImageEditor.prototype.drawLine = function (startX, startY, endX, endY, strokeWidth, strokeColor) {
+    ImageEditor.prototype.drawLine = function (startX, startY, endX, endY, strokeWidth, strokeColor, isSelected) {
         var isLine = false;
         var isPointsInRange = this.allowShape(startX, startY);
         if (!this.disabled && this.isImageLoaded && (isPointsInRange || (isNullOrUndefined(startX) && isNullOrUndefined(startY)))) {
             isLine = true;
             this.notify('shape', { prop: 'drawLine', onPropertyChange: false, value: { startX: startX, startY: startY, endX: endX,
-                    endY: endY, strokeWidth: strokeWidth, strokeColor: strokeColor } });
+                    endY: endY, strokeWidth: strokeWidth, strokeColor: strokeColor, isSelected: isSelected } });
             this.notify('draw', { prop: 'redrawDownScale' });
         }
         return isLine;
@@ -1274,15 +1219,17 @@ var ImageEditor = /** @class */ (function (_super) {
      * @param {string} strokeColor - Specifies the stroke color of arrow.
      * @param {ArrowheadType} arrowStart – Specifies the type of arrowhead for start position. The default value is ‘None’.
      * @param {ArrowheadType} arrowEnd – Specifies the type of arrowhead for end position. The default value is ‘SolidArrow’.
+     * @param {boolean} isSelected - Specifies to show the arrow in the selected state.
      * @returns {boolean}.
      */
-    ImageEditor.prototype.drawArrow = function (startX, startY, endX, endY, strokeWidth, strokeColor, arrowStart, arrowEnd) {
+    ImageEditor.prototype.drawArrow = function (startX, startY, endX, endY, strokeWidth, strokeColor, arrowStart, arrowEnd, isSelected) {
         var isArrow = false;
         var isPointsInRange = this.allowShape(startX, startY);
         if (!this.disabled && this.isImageLoaded && (isPointsInRange || (isNullOrUndefined(startX) && isNullOrUndefined(startY)))) {
             isArrow = true;
             this.notify('shape', { prop: 'drawArrow', onPropertyChange: false, value: { startX: startX, startY: startY, endX: endX,
-                    endY: endY, strokeWidth: strokeWidth, strokeColor: strokeColor, arrowStart: arrowStart, arrowEnd: arrowEnd } });
+                    endY: endY, strokeWidth: strokeWidth, strokeColor: strokeColor, arrowStart: arrowStart, arrowEnd: arrowEnd,
+                    isSelected: isSelected } });
             this.notify('draw', { prop: 'redrawDownScale' });
         }
         return isArrow;
@@ -1293,9 +1240,10 @@ var ImageEditor = /** @class */ (function (_super) {
      * @param {Point[]} pointColl – Specifies collection of start and end x, y-coordinates of path.
      * @param {number} strokeWidth - Specifies the stroke width of path.
      * @param {string} strokeColor - Specifies the stroke color of path.
+     * @param {boolean} isSelected - Specifies to show the path in the selected state.
      * @returns {boolean}.
      */
-    ImageEditor.prototype.drawPath = function (pointColl, strokeWidth, strokeColor, opacity) {
+    ImageEditor.prototype.drawPath = function (pointColl, strokeWidth, strokeColor, isSelected) {
         this.isPublicMethod = true;
         var obj = { inRange: false };
         var isPath = false;
@@ -1311,7 +1259,7 @@ var ImageEditor = /** @class */ (function (_super) {
         if (!this.disabled && this.isImageLoaded && (obj['inRange'] || isNullOrUndefined(pointColl))) {
             isPath = true;
             this.notify('shape', { prop: 'drawPath', onPropertyChange: false, value: { pointColl: pointColl,
-                    strokeWidth: strokeWidth, strokeColor: strokeColor } });
+                    strokeWidth: strokeWidth, strokeColor: strokeColor, isSelected: isSelected } });
             this.notify('draw', { prop: 'redrawDownScale' });
         }
         return isPath;
@@ -1327,15 +1275,16 @@ var ImageEditor = /** @class */ (function (_super) {
      * @param {string} strokeColor - Specifies the stroke color of rectangle.
      * @param {string} fillColor - Specifies the fill color of the rectangle.
      * @param {number} degree - Specifies the degree to rotate the rectangle.
+     * @param {boolean} isSelected - Specifies to show the rectangle in the selected state.
      * @returns {boolean}.
      */
-    ImageEditor.prototype.drawRectangle = function (x, y, width, height, strokeWidth, strokeColor, fillColor, degree) {
+    ImageEditor.prototype.drawRectangle = function (x, y, width, height, strokeWidth, strokeColor, fillColor, degree, isSelected) {
         var isRectangle = false;
         var isPointsInRange = this.allowShape(x, y);
         if (!this.disabled && this.isImageLoaded && (isPointsInRange || (isNullOrUndefined(x) && isNullOrUndefined(y)))) {
             isRectangle = true;
             this.notify('shape', { prop: 'drawRectangle', onPropertyChange: false, value: { x: x, y: y, width: width, height: height,
-                    strokeWidth: strokeWidth, strokeColor: strokeColor, fillColor: fillColor, degree: degree } });
+                    strokeWidth: strokeWidth, strokeColor: strokeColor, fillColor: fillColor, degree: degree, isSelected: isSelected } });
             this.notify('draw', { prop: 'redrawDownScale' });
         }
         return isRectangle;
@@ -1353,16 +1302,17 @@ var ImageEditor = /** @class */ (function (_super) {
      * @param {boolean} bold - Specifies whether the text is bold or not.
      * @param {boolean} italic - Specifies whether the text is italic or not.
      * @param {string} color - Specifies font color of the text.
+     * @param {boolean} isSelected - Specifies to show the text in the selected state.
      * @returns {boolean}.
      *
      */
-    ImageEditor.prototype.drawText = function (x, y, text, fontFamily, fontSize, bold, italic, color) {
+    ImageEditor.prototype.drawText = function (x, y, text, fontFamily, fontSize, bold, italic, color, isSelected) {
         var isText = false;
         var isPointsInRange = this.allowShape(x, y);
         if (!this.disabled && this.isImageLoaded && (isPointsInRange || (isNullOrUndefined(x) && isNullOrUndefined(y)))) {
             isText = true;
             this.notify('shape', { prop: 'drawText', onPropertyChange: false, value: { x: x, y: y, text: text, fontFamily: fontFamily,
-                    fontSize: fontSize, bold: bold, italic: italic, color: color } });
+                    fontSize: fontSize, bold: bold, italic: italic, color: color, isSelected: isSelected } });
             this.notify('draw', { prop: 'redrawDownScale' });
         }
         return isText;
@@ -1379,16 +1329,17 @@ var ImageEditor = /** @class */ (function (_super) {
      * @param {boolean} isAspectRatio - Specifies whether to maintain aspect ratio or not.
      * @param {number} degree - Specifies the degree to rotate the image.
      * @param {number} opacity - Specifies the value for the image.
+     * @param {boolean} isSelected - Specifies to show the image in the selected state.
      * @returns {boolean}.
      *
      */
-    ImageEditor.prototype.drawImage = function (data, x, y, width, height, isAspectRatio, degree, opacity) {
+    ImageEditor.prototype.drawImage = function (data, x, y, width, height, isAspectRatio, degree, opacity, isSelected) {
         var isImage = false;
         var isPointsInRange = this.allowShape(x, y);
         if (!this.disabled && this.isImageLoaded && (isPointsInRange || (isNullOrUndefined(x) && isNullOrUndefined(y)))) {
             var length_1 = this.objColl.length;
             this.notify('shape', { prop: 'drawImage', onPropertyChange: false, value: { x: x, y: y, width: width, height: height,
-                    src: data, degree: degree, isAspectRatio: isAspectRatio, opacity: opacity } });
+                    src: data, degree: degree, isAspectRatio: isAspectRatio, opacity: opacity, isSelected: isSelected } });
             this.notify('draw', { prop: 'redrawDownScale' });
             if (this.objColl.length > length_1) {
                 isImage = true;
@@ -1436,10 +1387,11 @@ var ImageEditor = /** @class */ (function (_super) {
      *
      */
     ImageEditor.prototype.getShapeSetting = function (id) {
-        var shapeDetails = {};
+        var obj = { shapeDetails: null };
         this.notify('shape', { prop: 'getShapeSetting', onPropertyChange: false,
-            value: { id: id, obj: shapeDetails } });
+            value: { id: id, obj: obj } });
         this.notify('draw', { prop: 'redrawDownScale' });
+        var shapeDetails = obj['shapeDetails'] ? obj['shapeDetails'] : {};
         return shapeDetails;
     };
     /**
@@ -1543,28 +1495,23 @@ var ImageEditor = /** @class */ (function (_super) {
         if ((width.toString()).length <= 4 && (height.toString()).length <= 4) {
             var destPoints = { startX: this.img.destLeft, startY: this.img.destTop, width: this.img.destWidth,
                 height: this.img.destHeight };
-            if (isBlazor()) {
-                this.updateToolbar(this.element, 'resize');
+            if (isAspectRatio) {
+                this.notify('toolbar', { prop: 'refresh-toolbar', onPropertyChange: false, value: { type: 'resize',
+                        isApplyBtn: false, isCropping: false } });
+                this.notify('toolbar', { prop: 'refresh-toolbar', onPropertyChange: false, value: { type: 'resize',
+                        isApplyBtn: false, isCropping: false } });
             }
             else {
-                if (isAspectRatio) {
-                    this.notify('toolbar', { prop: 'refresh-toolbar', onPropertyChange: false, value: { type: 'resize',
-                            isApplyBtn: false, isCropping: false } });
-                    this.notify('toolbar', { prop: 'refresh-toolbar', onPropertyChange: false, value: { type: 'resize',
-                            isApplyBtn: false, isCropping: false } });
-                }
-                else {
-                    this.notify('toolbar', { prop: 'refresh-toolbar', onPropertyChange: false, value: { type: 'resize',
-                            isApplyBtn: false, isCropping: false } });
-                }
-                var aspectRatioWidth = this.element.querySelector('#' + this.element.id + '_resizeWidth');
-                var aspectRatioHeight = this.element.querySelector('#' + this.element.id + '_resizeHeight');
-                if (aspectRatioWidth && aspectRatioHeight) {
-                    getComponent(aspectRatioWidth, 'numerictextbox').value = Math.floor(width);
-                    aspectRatioWidth.value = Math.floor(width).toString() + ' px';
-                    getComponent(aspectRatioHeight, 'numerictextbox').value = Math.floor(height);
-                    aspectRatioHeight.value = Math.floor(height).toString() + ' px';
-                }
+                this.notify('toolbar', { prop: 'refresh-toolbar', onPropertyChange: false, value: { type: 'resize',
+                        isApplyBtn: false, isCropping: false } });
+            }
+            var aspectRatioWidth = this.element.querySelector('#' + this.element.id + '_resizeWidth');
+            var aspectRatioHeight = this.element.querySelector('#' + this.element.id + '_resizeHeight');
+            if (aspectRatioWidth && aspectRatioHeight) {
+                getComponent(aspectRatioWidth, 'numerictextbox').value = Math.floor(width);
+                aspectRatioWidth.value = Math.floor(width).toString() + ' px';
+                getComponent(aspectRatioHeight, 'numerictextbox').value = Math.floor(height);
+                aspectRatioHeight.value = Math.floor(height).toString() + ' px';
             }
             this.notify('transform', { prop: 'resize', value: { width: width, height: height, isAspectRatio: isAspectRatio } });
             if (destPoints.startX !== this.img.destLeft || destPoints.startY !== this.img.destTop ||
@@ -1612,13 +1559,7 @@ var ImageEditor = /** @class */ (function (_super) {
         extend(this.tempFrameObj, this.frameObj);
         this.tempFrameZoomLevel = this.transform.zoomFactor;
         this.frameDestPoints = extend({}, this.img, {}, true);
-        if (!isBlazor()) {
-            this.notify('toolbar', { prop: 'frameToolbarClick' });
-        }
-        else {
-            // eslint-disable-next-line @typescript-eslint/no-explicit-any
-            this.performFrameClick();
-        }
+        this.notify('toolbar', { prop: 'frameToolbarClick' });
         this.frameObj.type = frameType.toLowerCase();
         this.frameObj.color = color;
         this.frameObj.gradientColor = gradientColor;
@@ -1673,22 +1614,76 @@ var ImageEditor = /** @class */ (function (_super) {
      * {% codeBlock src='image-editor/updateShape/index.md' %}{% endcodeBlock %}
      *
      * @param {ShapeSettings} setting - Specifies the shape settings to be updated for the shape on an image.
+     * @param {boolean} isSelected - Specifies to show the shape in the selected state.
      * @returns {boolean}.
      *
      */
-    ImageEditor.prototype.updateShape = function (setting) {
+    ImageEditor.prototype.updateShape = function (setting, isSelected) {
         var obj = { isSelected: false };
-        this.notify('shape', { prop: 'selectShape', onPropertyChange: false, value: { id: setting.id, obj: obj } });
-        if (obj['isSelected']) {
-            this.notify('shape', { prop: 'updateShapeChangeEventArgs', onPropertyChange: false,
-                value: { shapeSettings: setting } });
-            var activeObj = extend({}, this.activeObj, {}, true);
-            this.notify('draw', { prop: 'render-image', value: { isMouseWheel: null, isPreventClearRect: null, isFrame: null } });
-            this.upperContext.clearRect(0, 0, this.upperCanvas.width, this.upperCanvas.height);
-            this.notify('draw', { prop: 'drawObject', onPropertyChange: false, value: { canvas: 'duplicate', obj: activeObj } });
-            this.okBtn();
-            this.upperContext.clearRect(0, 0, this.upperCanvas.width, this.upperCanvas.height);
-            this.notify('draw', { prop: 'redrawDownScale' });
+        var isTextArea = false;
+        var freehandObj = { bool: false };
+        if (isNullOrUndefined(setting.id)) {
+            if (setting.strokeColor) {
+                this.activeObj.strokeSettings.strokeColor = setting.strokeColor;
+            }
+            if (setting.fillColor) {
+                this.activeObj.strokeSettings.fillColor = setting.fillColor;
+            }
+            if (setting.strokeWidth) {
+                this.activeObj.strokeSettings.strokeWidth = setting.strokeWidth;
+            }
+            if (setting.type === 'FreehandDraw' && setting.strokeWidth) {
+                this.notify('freehand-draw', { prop: 'setPenStrokeWidth', onPropertyChange: false, value: { value: setting.strokeWidth } });
+            }
+        }
+        else {
+            if (setting.type.toLowerCase() === 'text' && (this.textArea.style.display === 'block' ||
+                this.textArea.style.display === 'inline-block')) {
+                this.okBtn();
+                isTextArea = true;
+            }
+            this.notify('shape', { prop: 'selectShape', onPropertyChange: false, value: { id: setting.id, obj: obj } });
+            this.notify('selection', { prop: 'getFreehandDrawEditing', onPropertyChange: false, value: { obj: freehandObj } });
+            if (obj['isSelected']) {
+                var tempFontSize = this.activeObj.textSettings.fontSize;
+                this.notify('shape', { prop: 'updateShapeChangeEventArgs', onPropertyChange: false,
+                    value: { shapeSettings: setting } });
+                if (this.activeObj.shape === 'text' && tempFontSize) {
+                    var diff = this.activeObj.textSettings.fontSize - tempFontSize;
+                    if (diff !== 0) {
+                        this.activeObj.activePoint.height += diff;
+                        this.activeObj.activePoint.startY -= (diff / 2);
+                        this.activeObj.activePoint.endY += (diff / 2);
+                        this.notify('draw', { prop: 'updateActiveObject', onPropertyChange: false, value: { actPoint: this.activeObj.activePoint, obj: this.activeObj,
+                                isMouseMove: null, x: null, y: null } });
+                    }
+                }
+                var activeObj = extend({}, this.activeObj, {}, true);
+                this.notify('shape', { prop: 'refreshActiveObj', onPropertyChange: false });
+                this.notify('draw', { prop: 'render-image', value: { isMouseWheel: null, isPreventClearRect: null, isFrame: null } });
+                this.upperContext.clearRect(0, 0, this.upperCanvas.width, this.upperCanvas.height);
+                if (activeObj.shape) {
+                    this.notify('draw', { prop: 'drawObject', onPropertyChange: false, value: { canvas: 'duplicate', obj: activeObj } });
+                }
+                if (this.activeObj.shape === 'text') {
+                    this.notify('toolbar', { prop: 'editText', onPropertyChange: false });
+                }
+                if (freehandObj['bool']) {
+                    this.notify('undo-redo', { prop: 'setPreventUR', value: { bool: true } });
+                }
+                this.okBtn(isSelected);
+                if (freehandObj['bool']) {
+                    this.notify('undo-redo', { prop: 'setPreventUR', value: { bool: false } });
+                }
+                this.upperContext.clearRect(0, 0, this.upperCanvas.width, this.upperCanvas.height);
+                this.notify('draw', { prop: 'redrawDownScale' });
+                if (isTextArea) {
+                    this.enableTextEditing();
+                }
+                if (isSelected) {
+                    this.selectShape(setting.id);
+                }
+            }
         }
         return obj['isSelected'];
     };
@@ -1705,19 +1700,80 @@ var ImageEditor = /** @class */ (function (_super) {
         if (shapeId.split('_')[0] === 'shape') {
             this.notify('shape', { prop: 'selectShape', onPropertyChange: false, value: { id: shapeId, obj: obj } });
             if (obj['isSelected']) {
-                if (isBlazor()) {
-                    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                    this.duplicateShape(false, true);
-                }
-                else {
-                    this.notify('toolbar', { prop: 'duplicateShape', onPropertyChange: false, value: { isPreventUndoRedo: false } });
-                }
+                this.notify('toolbar', { prop: 'duplicateShape', onPropertyChange: false, value: { isPreventUndoRedo: false } });
                 this.okBtn();
                 this.notify('draw', { prop: 'redrawDownScale' });
             }
         }
         return obj['isSelected'];
     };
+    /**
+     * Update filter to the canvas in the ImageEditor.
+     *
+     * @param {ImageFilterOption } filterOption - Specifies the filter options to the image.
+     *
+     * @returns {string}.
+     *
+     */
+    ImageEditor.prototype.getImageFilter = function (filterOption) {
+        var canvas = this.createElement('canvas');
+        var ctx = canvas.getContext('2d');
+        this.notify('filter', { prop: 'updateAdj', value: { type: filterOption.toLowerCase(), value: null, isPreview: true, ctx: ctx } });
+        return ctx.filter;
+    };
+    /**
+     * Enable text area editing in the ImageEditor.
+     *
+     * @returns {void}.
+     *
+     */
+    ImageEditor.prototype.enableTextEditing = function () {
+        var activeObj = extend({}, this.activeObj, {}, true);
+        this.notify('shape', { prop: 'refreshActiveObj', onPropertyChange: false });
+        this.notify('draw', { prop: 'render-image', value: { isMouseWheel: null, isPreventClearRect: null, isFrame: false } });
+        this.activeObj = activeObj;
+        this.notify('toolbar', { prop: 'editText', onPropertyChange: false });
+    };
+    /**
+     * Specifies if it's possible to undo the last recent action made in an Image Editor.
+     *
+     * @returns {boolean}.
+     *
+     */
+    ImageEditor.prototype.canUndo = function () {
+        var canUndo = false;
+        var object = this.getUndoRedoColl();
+        var undoRedoIndex = object['index'];
+        if (undoRedoIndex > 0) {
+            canUndo = true;
+        }
+        return canUndo;
+    };
+    /**
+     * Specifies if it's possible to redo the last recent action made in an Image Editor.
+     *
+     * @returns {boolean}.
+     *
+     */
+    ImageEditor.prototype.canRedo = function () {
+        var canRedo = false;
+        var object = this.getUndoRedoColl();
+        var undoRedoColl = object['undoRedoColl'];
+        var undoRedoIndex = object['index'];
+        if (undoRedoColl && undoRedoColl.length > 0 && undoRedoIndex < undoRedoColl.length - 1) {
+            canRedo = true;
+        }
+        if (undoRedoIndex === undoRedoColl.length) {
+            canRedo = false;
+        }
+        else if (undoRedoIndex === 0 && undoRedoColl.length > 0) {
+            canRedo = true;
+        }
+        else if (undoRedoIndex > 0) {
+            canRedo = true;
+        }
+        return canRedo;
+    };
     // Toolbar related codes
     ImageEditor.prototype.toolbarTemplateFn = function () {
         var template;
@@ -1801,6 +1857,16 @@ var ImageEditor = /** @class */ (function (_super) {
         this.notify('freehand-draw', { prop: 'getTempFreeHandDrawEditingStyles', value: { obj: obj } });
         this.notify('freehand-draw', { prop: 'color-change', value: { color: obj['tempFreeHandDrawEditingStyles'].strokeColor } });
     };
+    ImageEditor.prototype.getUndoRedoColl = function () {
+        var obj = { undoRedoColl: null, index: null };
+        var undoRedoObj = { undoRedoStep: null };
+        var object = { appliedUndoRedoColl: [] };
+        this.notify('undo-redo', { prop: 'getAppliedUndoRedoColl', value: { obj: object } });
+        this.notify('undo-redo', { prop: 'getUndoRedoStep', value: { obj: undoRedoObj } });
+        obj['undoRedoColl'] = object['appliedUndoRedoColl'];
+        obj['index'] = undoRedoObj['undoRedoStep'];
+        return obj;
+    };
     ImageEditor.prototype.updateImageTransformColl = function (type) {
         var value;
         if (type === 'rotateleft') {
@@ -1944,10 +2010,9 @@ var ImageEditor = /** @class */ (function (_super) {
                 shapeSettings.type = ShapeType.FreehandDraw;
             }
             var shapeChangedArgs = { action: 'apply', currentShapeSettings: extend({}, shapeSettings, {}, true) };
-            this.triggerShapeChanged(shapeChangedArgs);
+            this.trigger('shapeChange', shapeChangedArgs);
         }
-        /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
-        if (aspectIcon || nonAspectIcon || (isBlazor() && this.currentToolbar === 'resize-toolbar')) {
+        if (aspectIcon || nonAspectIcon) {
             var obj_2 = { width: null, height: null };
             this.notify('selection', { prop: 'getNumTextValue', onPropertyChange: false, value: { obj: obj_2 } });
             var point = { x: obj_2['width'], y: obj_2['height'] };
@@ -1981,7 +2046,7 @@ var ImageEditor = /** @class */ (function (_super) {
                         isCircleCrop: null } });
                 this.notify('undo-redo', { prop: 'updateCurrUrc', value: { type: 'ok' } });
                 var obj_3 = this.cancelCropSelection;
-                if ((!isBlazor() && obj_3 && (isNullOrUndefined(nonAspectIcon) || !nonAspectIcon)) || (isBlazor() && obj_3 && blrNAspRatElem && blrNAspRatElem.classList.contains('e-hidden'))) {
+                if ((obj_3 && (isNullOrUndefined(nonAspectIcon) || !nonAspectIcon))) {
                     obj_3.previousObj.aspectWidth = obj_3.currentObj.aspectWidth = this.aspectWidth;
                     obj_3.previousObj.aspectHeight = obj_3.currentObj.aspectHeight = this.aspectHeight;
                     obj_3.previousCropObj = extend({}, this.cropObj, {}, true);
@@ -2035,9 +2100,7 @@ var ImageEditor = /** @class */ (function (_super) {
             this.notify('draw', { prop: 'clearOuterCanvas', onPropertyChange: false, value: { context: this.lowerContext } });
             this.notify('draw', { prop: 'clearOuterCanvas', onPropertyChange: false, value: { context: this.upperContext } });
         }
-        else if ((!isBlazor() && document.querySelector('#' + this.element.id + '_sliderWrapper')) ||
-            (isBlazor() && !this.element.querySelector('.e-ie-contextual-slider').classList.contains('e-hidden')) ||
-            this.currObjType.isFiltered) {
+        else if (document.querySelector('#' + this.element.id + '_sliderWrapper') || this.currObjType.isFiltered) {
             this.initialAdjustmentValue = this.canvasFilter = this.lowerContext.filter;
             this.currObjType.isFiltered = false;
             var obj_4 = { value: null };
@@ -2053,12 +2116,7 @@ var ImageEditor = /** @class */ (function (_super) {
         else if (obj['bool']) {
             this.notify('freehand-draw', { prop: 'applyFhd', onPropertyChange: false });
             this.notify('selection', { prop: 'setFreehandDrawCustomized', value: { isFreehandDrawCustomized: false } });
-            if (isBlazor()) {
-                this.updateToolbar(this.element, 'destroyQuickAccessToolbar');
-            }
-            else {
-                this.notify('toolbar', { prop: 'destroy-qa-toolbar' });
-            }
+            this.notify('toolbar', { prop: 'destroy-qa-toolbar' });
             this.notify('undo-redo', { prop: 'updateCurrUrc', value: { type: 'ok' } });
         }
         else if ((this.activeObj.activePoint.width !== 0 && this.activeObj.activePoint.height !== 0) ||
@@ -2084,20 +2142,16 @@ var ImageEditor = /** @class */ (function (_super) {
             }
             this.notify('draw', { prop: 'resetFrameZoom', onPropertyChange: false, value: { isOk: true } });
         }
-        if (!isBlazor() && !obj['isCropToolbar']) {
+        if (!obj['isCropToolbar']) {
             this.notify('toolbar', { prop: 'refresh-toolbar', onPropertyChange: false, value: { type: 'main',
                     isApplyBtn: false, isCropping: null, isZooming: null, cType: null } });
         }
-        else if (isBlazor() && !obj['isCropToolbar'] && (this.currentToolbar == 'resize-toolbar' || this.currentToolbar == 'frame-toolbar')) {
-            this.updateToolbar(this.element, 'imageLoaded');
-        }
         this.notify('draw', { prop: 'setNewPath', value: { bool: false } });
         this.transform.zoomFactor = this.transform.defaultZoomFactor;
         this.notify('selection', { prop: 'setCurrentDrawingShape', onPropertyChange: false, value: { value: '' } });
         this.isResizeOkBtn = false;
         this.notify('draw', { prop: 'redrawDownScale' });
         this.isChangesSaved = false;
-        this.triggerActionComplete();
     };
     /**
      * Set the temporary filter properties.
@@ -2156,18 +2210,12 @@ var ImageEditor = /** @class */ (function (_super) {
         var data = this.getImageData();
         if (ctWrapper) {
             ctWrapper.classList.remove('e-hide');
-            if (isBlazor()) {
-                this.element.querySelector('.e-ie-toolbar-check-btn').classList.remove('e-hidden');
-                this.element.querySelector('.e-ie-toolbar-close-btn').classList.remove('e-hidden');
-            }
         }
-        if (!isBlazor()) {
-            if (!Browser.isDevice) {
-                this.notify('toolbar', { prop: 'refresh-toolbar', onPropertyChange: false, value: { type: 'main',
-                        isApplyBtn: true, isCropping: false } });
-            }
-            this.element.querySelector('#' + this.element.id + '_contextualToolbarArea').classList.remove('e-hide');
+        if (!Browser.isDevice) {
+            this.notify('toolbar', { prop: 'refresh-toolbar', onPropertyChange: false, value: { type: 'main',
+                    isApplyBtn: true, isCropping: false } });
         }
+        this.element.querySelector('#' + this.element.id + '_contextualToolbarArea').classList.remove('e-hide');
         this.objColl = objColl;
         this.pointColl = pointColl;
         this.freehandCounter = pointColl.length;
@@ -2185,26 +2233,12 @@ var ImageEditor = /** @class */ (function (_super) {
      * @returns {void}.
      */
     ImageEditor.prototype.setCurrAdjustmentValue = function (type, value) {
-        var _this = this;
-        var finetuneValueChanging = { finetune: this.getFinetuneOption(type),
-            value: value, cancel: false };
-        if (isBlazor() && this.events && this.events.finetuneValueChanging.hasDelegate === true) {
-            finetuneValueChanging.value = parseInt(finetuneValueChanging.value.toString());
-            /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
-            this.dotNetRef.invokeMethodAsync('OnFinetuneValueChangeAsync', 'FinetuneValueChanging', finetuneValueChanging, null).then(function (finetuneValueChanging) {
-                if (finetuneValueChanging.cancel) {
-                    return;
-                }
-                _this.notify('filter', { prop: 'setCurrAdjValue', value: { type: type.toLowerCase(), value: value } });
-            });
-        }
-        else {
-            this.trigger('finetuneValueChanging', finetuneValueChanging);
-            if (finetuneValueChanging.cancel) {
-                return;
-            }
-            this.notify('filter', { prop: 'setCurrAdjValue', value: { type: type.toLowerCase(), value: value } });
+        var finetuneValueChanging = { finetune: this.getFinetuneOption(type), value: value, cancel: false };
+        this.trigger('finetuneValueChanging', finetuneValueChanging);
+        if (finetuneValueChanging.cancel) {
+            return;
         }
+        this.notify('filter', { prop: 'setCurrAdjValue', value: { type: type.toLowerCase(), value: value } });
     };
     /**
      * Get the square point for path.
@@ -2298,24 +2332,22 @@ var ImageEditor = /** @class */ (function (_super) {
                     currentText: null, previousFilter: null, isCircleCrop: null } });
         }
         this.notify('selection', { prop: 'redrawShape', value: { obj: this.objColl[this.objColl.length - 1] } });
-        if (!isBlazor()) {
-            if (Browser.isDevice) {
-                if (document.getElementById(this.element.id + '_bottomToolbar')) {
-                    /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
-                    var toolbar_1 = getComponent(this.element.id + '_bottomToolbar', 'toolbar');
-                    toolbar_1.refreshOverflow();
-                }
+        if (Browser.isDevice) {
+            if (document.getElementById(this.element.id + '_bottomToolbar')) {
+                /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
+                var toolbar_1 = getComponent(this.element.id + '_bottomToolbar', 'toolbar');
+                toolbar_1.refreshOverflow();
             }
-            else {
-                if (document.getElementById(this.element.id + '_toolbar')) {
-                    /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
-                    var toolbar_2 = getComponent(this.element.id + '_toolbar', 'toolbar');
-                    toolbar_2.refreshOverflow();
-                }
+        }
+        else {
+            if (document.getElementById(this.element.id + '_toolbar')) {
+                /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
+                var toolbar_2 = getComponent(this.element.id + '_toolbar', 'toolbar');
+                toolbar_2.refreshOverflow();
             }
         }
         var shapeChangedArgs = { action: type, currentShapeSettings: extend({}, shapeSettings, {}, true) };
-        this.triggerShapeChanged(shapeChangedArgs);
+        this.trigger('shapeChange', shapeChangedArgs);
     };
     /**
      * Apply Font style for text.
@@ -2386,7 +2418,7 @@ var ImageEditor = /** @class */ (function (_super) {
         }
         var shapeChangedArgs = { action: 'font-family', currentShapeSettings: extend({}, shapeSettings, {}, true) };
         shapeChangedArgs.currentShapeSettings.fontFamily = this.textArea.style.fontFamily;
-        this.triggerShapeChanged(shapeChangedArgs);
+        this.trigger('shapeChange', shapeChangedArgs);
     };
     /**
      * Apply Font size for text.
@@ -2488,7 +2520,7 @@ var ImageEditor = /** @class */ (function (_super) {
         }
         var shapeChangedArgs = { action: 'font-size', currentShapeSettings: extend({}, shapeSettings, {}, true) };
         shapeChangedArgs.currentShapeSettings.fontSize = this.activeObj.textSettings.fontSize;
-        this.triggerShapeChanged(shapeChangedArgs);
+        this.trigger('shapeChange', shapeChangedArgs);
     };
     /**
      * Apply Font color for text.
@@ -2559,7 +2591,7 @@ var ImageEditor = /** @class */ (function (_super) {
         }
         var shapeChangedArgs = { action: 'font-color', currentShapeSettings: extend({}, shapeSettings, {}, true) };
         shapeChangedArgs.currentShapeSettings.fillColor = value;
-        this.triggerShapeChanged(shapeChangedArgs);
+        this.trigger('shapeChange', shapeChangedArgs);
     };
     /**
      * Apply Pen stroke width.
@@ -2614,7 +2646,7 @@ var ImageEditor = /** @class */ (function (_super) {
         shapeSettings.type = ShapeType.FreehandDraw;
         var shapeChangedArgs = { action: 'stroke-width', currentShapeSettings: extend({}, shapeSettings, {}, true) };
         shapeChangedArgs.currentShapeSettings.strokeWidth = this.activeObj.strokeSettings.strokeWidth;
-        this.triggerShapeChanged(shapeChangedArgs);
+        this.trigger('shapeChange', shapeChangedArgs);
     };
     /**
      * Apply Pen stroke color.
@@ -2684,7 +2716,7 @@ var ImageEditor = /** @class */ (function (_super) {
         shapeSettings.type = ShapeType.FreehandDraw;
         var shapeChangedArgs = { action: 'stroke-color', currentShapeSettings: extend({}, shapeSettings, {}, true) };
         shapeChangedArgs.currentShapeSettings.strokeColor = value;
-        this.triggerShapeChanged(shapeChangedArgs);
+        this.trigger('shapeChange', shapeChangedArgs);
     };
     /**
      * Apply Shape stroke width.
@@ -2730,7 +2762,7 @@ var ImageEditor = /** @class */ (function (_super) {
             this.notify('selection', { prop: 'redrawShape', value: { obj: this.objColl[this.objColl.length - 1] } });
             var shapeChangedArgs = { action: 'stroke-width', currentShapeSettings: extend({}, shapeSettings, {}, true) };
             shapeChangedArgs.currentShapeSettings.strokeWidth = this.activeObj.strokeSettings.strokeWidth;
-            this.triggerShapeChanged(shapeChangedArgs);
+            this.trigger('shapeChange', shapeChangedArgs);
         }
         else if (this.activeObj.shape && (this.activeObj.shape === 'path' &&
             this.activeObj.pointColl.length === 0)) {
@@ -2787,7 +2819,7 @@ var ImageEditor = /** @class */ (function (_super) {
         }
         var shapeChangedArgs = { action: 'stroke-color', currentShapeSettings: extend({}, shapeSettings, {}, true) };
         shapeChangedArgs.currentShapeSettings.strokeColor = value;
-        this.triggerShapeChanged(shapeChangedArgs);
+        this.trigger('shapeChange', shapeChangedArgs);
     };
     /**
      * Apply Shape fill color.
@@ -2827,7 +2859,7 @@ var ImageEditor = /** @class */ (function (_super) {
         }
         this.notify('selection', { prop: 'redrawShape', value: { obj: this.objColl[this.objColl.length - 1] } });
         var shapeChangedArgs = { action: 'fill-color', currentShapeSettings: extend({}, shapeSettings, {}, true) };
-        this.triggerShapeChanged(shapeChangedArgs);
+        this.trigger('shapeChange', shapeChangedArgs);
     };
     /**
      * Apply horizontal flip.
@@ -2858,9 +2890,7 @@ var ImageEditor = /** @class */ (function (_super) {
             prevObj.selPointColl = extend([], selPointCollObj['selPointColl'], [], true);
             this.objColl.pop();
         }
-        if (!isBlazor()) {
-            this.notify('toolbar', { prop: 'refreshSlider' });
-        }
+        this.notify('toolbar', { prop: 'refreshSlider' });
         ctx.clearRect(0, 0, this.activeObj.imageCanvas.width, this.activeObj.imageCanvas.height);
         var activePoint = this.duplicateImage();
         this.notify('draw', { prop: 'downScaleImgCanvas', onPropertyChange: false,
@@ -2906,9 +2936,7 @@ var ImageEditor = /** @class */ (function (_super) {
             prevObj.selPointColl = extend([], selPointCollObj['selPointColl'], [], true);
             this.objColl.pop();
         }
-        if (!isBlazor()) {
-            this.notify('toolbar', { prop: 'refreshSlider' });
-        }
+        this.notify('toolbar', { prop: 'refreshSlider' });
         ctx.clearRect(0, 0, this.activeObj.imageCanvas.width, this.activeObj.imageCanvas.height);
         var activePoint = this.duplicateImage();
         this.notify('draw', { prop: 'downScaleImgCanvas', onPropertyChange: false,
@@ -2952,9 +2980,7 @@ var ImageEditor = /** @class */ (function (_super) {
             value: { obj: selPointCollObj } });
         prevObj.selPointColl = extend([], selPointCollObj['selPointColl'], [], true);
         this.objColl.pop();
-        if (!isBlazor()) {
-            this.notify('toolbar', { prop: 'refreshSlider' });
-        }
+        this.notify('toolbar', { prop: 'refreshSlider' });
         if (rotate === 'rotleft') {
             this.activeObj.rotatedAngle -= (90 * (Math.PI / 180));
         }
@@ -2971,14 +2997,8 @@ var ImageEditor = /** @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] } });
-        if (isBlazor()) {
-            this.updateToolbar(this.element, 'destroyQuickAccessToolbar');
-            this.updateToolbar(this.element, 'quickAccessToolbar', 'image');
-        }
-        else {
-            this.notify('toolbar', { prop: 'destroy-qa-toolbar' });
-            this.notify('toolbar', { prop: 'renderQAT', onPropertyChange: false, value: { isPenEdit: null } });
-        }
+        this.notify('toolbar', { prop: 'destroy-qa-toolbar' });
+        this.notify('toolbar', { prop: 'renderQAT', onPropertyChange: false, value: { isPenEdit: null } });
     };
     /**
      * Get pascalToSplitWords from string.
@@ -3037,6 +3057,12 @@ var ImageEditor = /** @class */ (function (_super) {
      * @returns {void}.
      */
     ImageEditor.prototype.transformSelect = function (type) {
+        if (this.transform.straighten === 0 && (type === 'rotateleft' || type === 'rotateright') &&
+            this.activeObj.shape && ['crop-2:3', 'crop-3:2', 'crop-3:4', 'crop-4:3', 'crop-4:5', 'crop-5:4', 'crop-5:7', 'crop-7:5',
+            'crop-9:16', 'crop-16:9'].indexOf(this.activeObj.shape) !== -1) {
+            this.activeObj.shape = 'crop-' + this.activeObj.shape.split('-')[1].split(':')[1] + ':' + this.activeObj.shape.split('-')[1].split(':')[0];
+            this.notify('toolbar', { prop: 'performCropTransformClick', value: { shape: this.activeObj.shape, isTransform: true } });
+        }
         this.isCropToolbar = true;
         this.allowDownScale = false;
         var straighten = this.transform.straighten;
@@ -3133,12 +3159,7 @@ var ImageEditor = /** @class */ (function (_super) {
      */
     ImageEditor.prototype.setStraighten = function (value, isMethod) {
         var straightenEventArgs = { cancel: false, previousDegree: this.transform.straighten, currentDegree: value };
-        if (isBlazor()) {
-            this.prevStraightenEvent = this.transform.straighten;
-        }
-        else {
-            this.trigger('rotating', straightenEventArgs);
-        }
+        this.trigger('rotating', straightenEventArgs);
         if (!straightenEventArgs.cancel) {
             this.performStraighten(straightenEventArgs);
         }
@@ -3263,85 +3284,6 @@ var ImageEditor = /** @class */ (function (_super) {
         }
         return flipState;
     };
-    // Blazor codes
-    /**
-     * To Initialize the component rendering
-     *
-     * @private
-     * @param {HTMLCanvasElement} element - Specifies the canvas element.
-     * @param {BlazorDotnetObject} dotnetRef - Specifies for blazor client to server communication.
-     * @returns {void}
-     */
-    ImageEditor.prototype.initializeImageEditor = function (element, dotnetRef) {
-        /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
-        this.element = element;
-        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';
-        }
-        if (isBlazor() && this.element.querySelector('.e-toolbar-area')) {
-            this.element.querySelector('.e-toolbar-area').style.display = 'block';
-        }
-        var canvasWrapper = this.element.querySelector('.e-canvas-wrapper');
-        if (this.element.querySelector('#' + this.element.id + '_toolbarArea')) {
-            this.toolbarHeight = this.element.querySelector('#' + this.element.id + '_toolbarArea').scrollHeight;
-        }
-        else {
-            this.toolbarHeight = 0;
-        }
-        canvasWrapper.style.height = (this.element.offsetHeight - this.toolbarHeight - 2) + 'px';
-        canvasWrapper.style.width = (this.element.offsetWidth - 2) + 'px';
-        this.lowerCanvas = this.element.querySelector('.e-lower-canvas');
-        this.upperCanvas = this.element.querySelector('.e-upper-canvas');
-        this.lowerCanvas.id = this.element.id + '_lowerCanvas';
-        this.upperCanvas.id = this.element.id + '_upperCanvas';
-        this.textArea = this.element.querySelector('.e-textarea');
-        this.inMemoryCanvas = this.createElement('canvas', {
-            id: this.element.id + '_inMemoryCanvas', attrs: { name: 'canvasImage' }
-        });
-        this.baseImgCanvas = this.createElement('canvas', {
-            id: this.element.id + '_baseImgCanvas', attrs: { name: 'canvasImage' }
-        });
-        this.upperCanvas.width = this.lowerCanvas.width = this.inMemoryCanvas.width = this.element.offsetWidth;
-        this.upperCanvas.height = this.lowerCanvas.height = this.inMemoryCanvas.height = (this.element.offsetHeight - this.toolbarHeight);
-        this.lowerContext = this.lowerCanvas.getContext('2d');
-        this.baseImg = this.createElement('img', {
-            id: this.element.id + '_orgImg', attrs: { name: 'Image', crossorigin: 'anonymous' }
-        });
-        this.upperContext = this.upperCanvas.getContext('2d');
-        this.inMemoryContext = this.inMemoryCanvas.getContext('2d');
-        if (dotnetRef) {
-            this.dotNetRef = dotnetRef;
-        }
-        this.prerender();
-        this.wireEvent();
-        this.lowerContext.filter = this.getDefaultFilter();
-        this.notify('filter', { prop: 'setAdjustmentValue', onPropertyChange: false, value: { adjustmentValue: this.lowerContext.filter } });
-        this.canvasFilter = this.initialAdjustmentValue = this.lowerContext.filter;
-        if (this.cssClass) {
-            addClass([this.element], this.cssClass.replace(/\s+/g, ' ').trim().split(' '));
-        }
-        if (this.element) {
-            createSpinner({
-                target: this.element
-            });
-        }
-        this.initializeZoomSettings();
-    };
-    ImageEditor.prototype.prerender = function () {
-        // pre render code snippets
-        this.element.id = this.element.id || getUniqueID('ej2-image-editor');
-        if (Browser.isDevice) {
-            this.element.classList.add('e-device');
-        }
-        this.initializeThemeColl();
-    };
     ImageEditor.prototype.initializeZoomSettings = function () {
         /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
         if (isNullOrUndefined(this.zoomSettings.zoomTrigger) || this.zoomSettings.zoomTrigger === 0) {
@@ -3374,57 +3316,6 @@ var ImageEditor = /** @class */ (function (_super) {
             Material3Dark: { primaryColor: '#d0bcff', secondaryColor: '#fff' }
         };
     };
-    /**
-     * Get the square point for path.
-     *
-     * @param { HTMLDivElement } element - Specifies element.
-     * @param { string } type - Specifies the type.
-     * @param { string } value - Specifies the value.
-     * @hidden
-     * @private
-     * @returns {void}.
-     */
-    // 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) {
-            var args = { action: shapeChangedArgs.action, shapeSettings: shapeChangedArgs.currentShapeSettings };
-            this.dotNetRef.invokeMethodAsync('ShapeEventAsync', 'ShapeChanged', null, args);
-        }
-        else {
-            this.trigger('shapeChange', shapeChangedArgs);
-        }
-    };
-    ImageEditor.prototype.triggerActionComplete = function () {
-        var frameChangedArgs = this.curFrameObjEvent;
-        var finetuneValueChanged = this.curFinetuneObjEvent;
-        var imageFiltered = this.curFilterObjEvent;
-        if (isBlazor()) {
-            if (this.isFrameBtnClick && this.events && this.events.frameChanged.hasDelegate === true) {
-                var frameChangeArgs = { frameSettings: frameChangedArgs.currentFrameSetting };
-                this.dotNetRef.invokeMethodAsync('OnFrameChangingAsync', 'FrameChanged', null, frameChangeArgs);
-            }
-            if (this.isFinetuneBtnClick && this.events && this.events.finetuneValueChanged.hasDelegate === true) {
-                var finetuneValueChange = { finetune: this.toPascalCase(finetuneValueChanged.finetune),
-                    value: parseInt(finetuneValueChanged.value.toString()) };
-                this.dotNetRef.invokeMethodAsync('OnFinetuneValueChangeAsync', 'FinetuneValueChanged', null, finetuneValueChange);
-            }
-            if (this.isFilterCanvasClick && this.events && this.events.imageFiltered.hasDelegate === true) {
-                var imageFilter = { filter: this.toPascalCase(imageFiltered.filter) };
-                this.dotNetRef.invokeMethodAsync('OnImageFilterEventAsync', 'ImageFiltered', null, imageFilter);
-            }
-        }
-        else { }
-        this.isFilterCanvasClick = this.isFinetuneBtnClick = this.isFrameBtnClick = false;
-    };
     var ImageEditor_1;
     __decorate([
         Property('')