@syncfusion/ej2-image-editor 24.2.8 → 25.1.35

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

@@ -1,4 +1,4 @@
-import { Browser, ChildProperty, Complex, Component, Event, EventHandler, L10n, NotifyPropertyChanges, Property, addClass, compile, detach, extend, getComponent, getUniqueID, isBlazor, isNullOrUndefined, removeClass, select } from '@syncfusion/ej2-base';
+import { Browser, ChildProperty, Complex, Component, Event, EventHandler, L10n, NotifyPropertyChanges, Property, addClass, compile, detach, extend, getComponent, getUniqueID, isNullOrUndefined, removeClass, select } from '@syncfusion/ej2-base';
 import { Dialog, createSpinner, hideSpinner, showSpinner } from '@syncfusion/ej2-popups';
 import { ColorPicker, NumericTextBox, Slider, Uploader } from '@syncfusion/ej2-inputs';
 import { Toolbar } from '@syncfusion/ej2-navigations';
@@ -858,25 +858,10 @@ class Crop {
             }
             const transitionArgs = { cancel: false, startPoint: { x: startX, y: startY },
                 endPoint: { x: endX, y: endY }, preventScaling: false };
-            if (!object['isCropToolbar'] && isBlazor() && parent.events && parent.events.cropping.hasDelegate === true) {
-                /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
-                if (parent.currentToolbar === 'resize-toolbar') {
-                    parent.dotNetRef.invokeMethodAsync('CropEventAsync', 'OnCrop', transitionArgs, null);
-                    this.cropEvent(transitionArgs, obj, object);
-                }
-                else {
-                    /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
-                    parent.dotNetRef.invokeMethodAsync('CropEventAsync', 'OnCrop', transitionArgs, null).then((args) => {
-                        this.cropEvent(args, obj, object);
-                    });
-                }
-            }
-            else {
-                if (!object['isCropToolbar']) {
-                    parent.trigger('cropping', transitionArgs);
-                }
-                this.cropEvent(transitionArgs, obj, object);
+            if (!object['isCropToolbar']) {
+                parent.trigger('cropping', transitionArgs);
             }
+            this.cropEvent(transitionArgs, obj, object);
         }
     }
     cropEvent(transitionArgs, obj, object) {
@@ -911,25 +896,14 @@ class Crop {
                 const aspectIcon = parent.element.querySelector('#' + parent.element.id + '_aspectratio');
                 const nonAspectIcon = parent.element.querySelector('#' + parent.element.id + '_nonaspectratio');
                 parent.notify('draw', { prop: 'render-image', value: { isMouseWheel: false } });
-                if (!isBlazor() && !object['isCropToolbar'] && (isNullOrUndefined(aspectIcon) && isNullOrUndefined(nonAspectIcon))) {
+                if (!object['isCropToolbar'] && (isNullOrUndefined(aspectIcon) && isNullOrUndefined(nonAspectIcon))) {
                     parent.notify('toolbar', { prop: 'refresh-toolbar', onPropertyChange: false, value: { type: 'main',
                             isApplyBtn: false, isCropping: false, isZooming: null, cType: null } });
                 }
-                else if (!object['isCropToolbar']) {
-                    /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
-                    if (parent.currentToolbar !== 'resize-toolbar') {
-                        parent.updateToolbar(parent.element, 'imageLoaded');
-                    }
-                }
                 this.resizeWrapper();
                 if (Browser.isDevice) {
                     this.updateUndoRedoColl(prevObj, prevCropObj, object);
                 }
-                transitionArgs = { startPoint: transitionArgs.startPoint, endPoint: transitionArgs.endPoint };
-                if (!object['isCropToolbar'] && isBlazor() && parent.events && parent.events.cropped.hasDelegate === true) {
-                    parent.dotNetRef.invokeMethodAsync('CropEventAsync', 'Cropped', null, transitionArgs);
-                }
-                else { }
             }
         }
     }
@@ -948,25 +922,16 @@ class Crop {
     }
     resizeWrapper() {
         const parent = this.parent;
-        if (Browser.isDevice && !isBlazor()) {
+        if (Browser.isDevice) {
             const elem = parent.element;
             const ctxToolbar = elem.querySelector('#' + elem.id + '_contextualToolbarArea');
-            if (ctxToolbar.style.position === '' && !this.isTransformCrop) {
+            if (ctxToolbar && ctxToolbar.style.position === '' && !this.isTransformCrop) {
                 ctxToolbar.style.position = 'absolute';
                 parent.isStraightening = false;
                 parent.update();
                 parent.notify('filter', { prop: 'setAdjustmentValue', value: { adjustmentValue: parent.canvasFilter } });
             }
         }
-        else if (Browser.isDevice && isBlazor() && !this.isTransformCrop) {
-            parent.isStraightening = false;
-            parent.update();
-            const canvasWrapper = parent.element.querySelector('#' + parent.element.id + '_canvasWrapper');
-            if (canvasWrapper) {
-                canvasWrapper.style.height = (parseInt(canvasWrapper.style.height) + 2) + 'px';
-            }
-            parent.notify('filter', { prop: 'setAdjustmentValue', value: { adjustmentValue: parent.canvasFilter } });
-        }
     }
     calcRatio(obj, dimension) {
         const parent = this.parent;
@@ -3432,36 +3397,21 @@ class Draw {
                 proxy.parent.lowerCanvas.style.display = 'block';
             }
             parent.isUndoRedo = this.isErrorImage = false;
-            if (!isBlazor()) {
-                if (Browser.isDevice) {
-                    parent.notify('toolbar', { prop: 'destroy-top-toolbar', onPropertyChange: false });
-                    parent.notify('toolbar', { prop: 'destroy-bottom-toolbar', onPropertyChange: false });
-                    const eventargs = { isApplyBtn: false, isDevice: Browser.isDevice, isOkBtn: null,
-                        isResize: null, isFrame: null, isMainToolbar: true };
-                    parent.notify('toolbar', { prop: 'init-main-toolbar', onPropertyChange: false, value: eventargs });
-                    parent.notify('toolbar', { prop: 'create-bottom-toolbar', onPropertyChange: false });
-                }
-                else {
-                    parent.notify('toolbar', { prop: 'destroy-top-toolbar', onPropertyChange: false });
-                    const eventargs = { isApplyBtn: false, isDevice: false, isOkBtn: null };
-                    parent.notify('toolbar', { prop: 'init-main-toolbar', onPropertyChange: false, value: eventargs });
-                }
+            if (Browser.isDevice) {
+                parent.notify('toolbar', { prop: 'destroy-top-toolbar', onPropertyChange: false });
+                parent.notify('toolbar', { prop: 'destroy-bottom-toolbar', onPropertyChange: false });
+                const eventargs = { isApplyBtn: false, isDevice: Browser.isDevice, isOkBtn: null,
+                    isResize: null, isFrame: null, isMainToolbar: true };
+                parent.notify('toolbar', { prop: 'init-main-toolbar', onPropertyChange: false, value: eventargs });
+                parent.notify('toolbar', { prop: 'create-bottom-toolbar', onPropertyChange: false });
             }
             else {
-                parent.updateToolbar(parent.element, 'imageLoaded', 'initial');
-                if (Browser.isDevice) {
-                    parent.element.querySelector('.e-bottom-toolbar-area').style.display = 'block';
-                    parent.element.querySelector('.e-canvas-wrapper').style.height = (parent.element.offsetHeight
-                        - parent.toolbarHeight * 2) - 1 + 'px';
-                }
+                parent.notify('toolbar', { prop: 'destroy-top-toolbar', onPropertyChange: false });
+                const eventargs = { isApplyBtn: false, isDevice: false, isOkBtn: null };
+                parent.notify('toolbar', { prop: 'init-main-toolbar', onPropertyChange: false, value: eventargs });
             }
             if (parent.isImageLoaded && parent.element.style.opacity !== '0.5') {
-                if (isBlazor() && parent.events && parent.events.fileOpened.hasDelegate === true) {
-                    parent.dotNetRef.invokeMethodAsync('FileOpenEventAsync', 'FileOpened', fileOpened);
-                }
-                else {
-                    parent.trigger('fileOpened', fileOpened);
-                }
+                parent.trigger('fileOpened', fileOpened);
             }
         };
         parent.baseImg.onerror = () => {
@@ -3473,12 +3423,7 @@ class Draw {
     errorLoading() {
         const parent = this.parent;
         const fileOpened = { fileName: null, fileType: null, isValidImage: false };
-        if (isBlazor() && parent.events && parent.events.fileOpened.hasDelegate === true) {
-            parent.dotNetRef.invokeMethodAsync('FileOpenEventAsync', 'FileOpened', fileOpened);
-        }
-        else {
-            parent.trigger('fileOpened', fileOpened);
-        }
+        parent.trigger('fileOpened', fileOpened);
     }
     updateBaseImgCanvas() {
         const parent = this.parent;
@@ -3563,12 +3508,7 @@ class Draw {
         this.resetFrameZoom(false);
         if (obj['bool']) {
             parent.notify('freehand-draw', { prop: 'cancelFhd', onPropertyChange: false });
-            if (!isBlazor()) {
-                parent.notify('toolbar', { prop: 'destroy-qa-toolbar', onPropertyChange: false });
-            }
-            else {
-                parent.updateToolbar(parent.element, 'destroyQuickAccessToolbar');
-            }
+            parent.notify('toolbar', { prop: 'destroy-qa-toolbar', onPropertyChange: false });
             parent.notify('undo-redo', { prop: 'updateCurrUrc', value: { type: 'cancel' } });
         }
         else if (parent.textArea.style.display === 'block' || parent.textArea.style.display === 'inline-block') {
@@ -3588,18 +3528,11 @@ class Draw {
                 parent.notify('shape', { prop: 'refreshActiveObj', onPropertyChange: false });
             }
             parent.notify('shape', { prop: 'applyActObj', onPropertyChange: false, value: { isMouseDown: true } });
-            if (!isBlazor()) {
-                parent.notify('toolbar', { prop: 'refresh-main-toolbar', onPropertyChange: false });
-            }
-            else {
-                parent.updateToolbar(parent.element, 'imageLoaded');
-            }
+            parent.notify('toolbar', { prop: 'refresh-main-toolbar', onPropertyChange: false });
             parent.notify('selection', { prop: 'setTempActObj', onPropertyChange: false, value: { obj: parent.activeObj } });
         }
-        else if ((!isBlazor() && (!Browser.isDevice || (Browser.isDevice && !straightenObj['bool'])) &&
-            document.querySelector('#' + parent.element.id + '_sliderWrapper')) ||
-            (isBlazor() && !parent.element.querySelector('.e-ie-contextual-slider').classList.contains('e-hidden')) ||
-            parent.currObjType.isFiltered) {
+        else if (((!Browser.isDevice || (Browser.isDevice && !straightenObj['bool'])) &&
+            document.querySelector('#' + parent.element.id + '_sliderWrapper')) || parent.currObjType.isFiltered) {
             this.lowerContext.filter = this.tempAdjValue;
             parent.canvasFilter = this.tempAdjValue;
             parent.notify('filter', { prop: 'setAdjustmentValue', onPropertyChange: false, value: { adjustmentValue: this.tempAdjValue } });
@@ -3627,18 +3560,10 @@ class Draw {
                     value: { context: this.lowerContext, isSave: null, isFlip: null } });
             }
             const eventargs = { type: 'main', isApplyBtn: null, isCropping: null, isZooming: null };
-            if (!isBlazor()) {
-                parent.element.querySelector('.e-contextual-toolbar-wrapper').classList.add('e-hide');
-                parent.notify('toolbar', { prop: 'refresh-toolbar', onPropertyChange: false, value: eventargs });
-                if (parent.activeObj.shape && parent.activeObj.shape === 'image') {
-                    parent.notify('toolbar', { prop: 'destroy-qa-toolbar', onPropertyChange: false });
-                }
-            }
-            else {
-                parent.updateToolbar(parent.element, 'imageLoaded');
-                if (parent.activeObj.shape && parent.activeObj.shape === 'image') {
-                    parent.updateToolbar(parent.element, 'destroyQuickAccessToolbar');
-                }
+            parent.element.querySelector('.e-contextual-toolbar-wrapper').classList.add('e-hide');
+            parent.notify('toolbar', { prop: 'refresh-toolbar', onPropertyChange: false, value: eventargs });
+            if (parent.activeObj.shape && parent.activeObj.shape === 'image') {
+                parent.notify('toolbar', { prop: 'destroy-qa-toolbar', onPropertyChange: false });
             }
             parent.notify('undo-redo', { prop: 'updateCurrUrc', value: { type: 'cancel' } });
             parent.notify('shape', { prop: 'refreshActiveObj', onPropertyChange: false });
@@ -3647,12 +3572,7 @@ class Draw {
         else {
             if (isContextualToolbar && (!Browser.isDevice || (Browser.isDevice && !straightenObj['bool']))) {
                 const eventargs = { type: 'main', isApplyBtn: null, isCropping: null, isZooming: null };
-                if (!isBlazor()) {
-                    parent.notify('toolbar', { prop: 'refresh-toolbar', onPropertyChange: false, value: eventargs });
-                }
-                else {
-                    parent.updateToolbar(parent.element, 'imageLoaded');
-                }
+                parent.notify('toolbar', { prop: 'refresh-toolbar', onPropertyChange: false, value: eventargs });
             }
             else {
                 this.cancelItems();
@@ -3668,10 +3588,8 @@ class Draw {
         }
         this.isShapeTextInserted = false;
         this.isNewPath = false;
-        if (!isBlazor()) {
-            parent.notify('toolbar', { prop: 'refresh-dropdown-btn', value: { isDisabled: false } });
-            parent.notify('toolbar', { prop: 'setCurrentToolbar', value: { type: 'main' } });
-        }
+        parent.notify('toolbar', { prop: 'refresh-dropdown-btn', value: { isDisabled: false } });
+        parent.notify('toolbar', { prop: 'setCurrentToolbar', value: { type: 'main' } });
     }
     cancelItems() {
         const parent = this.parent;
@@ -3747,6 +3665,7 @@ class Draw {
                 const temp = parent.isCropTab;
                 parent.isCropTab = false;
                 this.updateCropSelObj();
+                parent.cancelCropSelection = null;
                 parent.isCropTab = temp;
             }
         }
@@ -3774,12 +3693,7 @@ class Draw {
         parent.currObjType.isCustomCrop = false;
         this.tempStrokeSettings = { strokeColor: '#fff', fillColor: '', strokeWidth: null };
         const eventargs = { type: 'main', isApplyBtn: null, isCropping: false, isZooming: null };
-        if (!isBlazor()) {
-            parent.notify('toolbar', { prop: 'refresh-toolbar', onPropertyChange: false, value: eventargs });
-        }
-        else {
-            parent.updateToolbar(parent.element, 'imageLoaded');
-        }
+        parent.notify('toolbar', { prop: 'refresh-toolbar', onPropertyChange: false, value: eventargs });
     }
     cancelPen() {
         const parent = this.parent;
@@ -3840,12 +3754,7 @@ class Draw {
                 parent.clearSelection();
             }
         }
-        if (!isBlazor()) {
-            parent.notify('toolbar', { prop: 'destroy-qa-toolbar', onPropertyChange: false });
-        }
-        else {
-            parent.updateToolbar(parent.element, 'destroyQuickAccessToolbar');
-        }
+        parent.notify('toolbar', { prop: 'destroy-qa-toolbar', onPropertyChange: false });
         this.tempTextSettings = { text: 'Enter Text', fontFamily: parent.fontFamily.default, fontSize: null, fontRatio: null, bold: false,
             italic: false, underline: false };
     }
@@ -3889,12 +3798,7 @@ class Draw {
             }
         }
         parent.currObjType.isDragging = false;
-        if (!isBlazor()) {
-            parent.notify('toolbar', { prop: 'destroy-qa-toolbar', onPropertyChange: false });
-        }
-        else {
-            parent.updateToolbar(parent.element, 'destroyQuickAccessToolbar');
-        }
+        parent.notify('toolbar', { prop: 'destroy-qa-toolbar', onPropertyChange: false });
     }
     cancelSelection() {
         const parent = this.parent;
@@ -4091,41 +3995,20 @@ class Draw {
             startY: obj['shapeSettingsObj']['startY'], width: obj['shapeSettingsObj']['width'], height: obj['shapeSettingsObj']['height'] };
         const selectionChangingArgs = { action: 'insert', previousSelectionSettings: selectionSettings,
             currentSelectionSettings: selectionSettings };
-        if (isBlazor() && parent.events && parent.events.onSelectionResizeStart.hasDelegate === true) {
-            /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
-            parent.dotNetRef.invokeMethodAsync('SelectionEventAsync', 'OnSelectionResizeStart', selectionChangingArgs).then((selectionChangingArgs) => {
-                parent.notify('shape', { prop: 'updSelChangeEventArgs', onPropertyChange: false,
-                    value: { selectionSettings: selectionChangingArgs.currentSelectionSettings } });
-                if (selectionChangingArgs.currentSelectionSettings.type === 'Custom') {
-                    this.drawObject('duplicate', parent.activeObj, null, null, true);
-                }
-                else {
-                    if (actPoint.startX !== 0 || actPoint.startY !== 0 ||
-                        actPoint.width !== 0 || actPoint.height !== 0) {
-                        points = { startX: actPoint.startX, startY: actPoint.startY,
-                            endX: actPoint.endX, endY: actPoint.endY,
-                            width: actPoint.width, height: actPoint.height };
-                    }
-                    this.drawObject('duplicate', null, true, points);
-                }
-            });
+        parent.trigger('selectionChanging', selectionChangingArgs);
+        parent.notify('shape', { prop: 'updSelChangeEventArgs', onPropertyChange: false,
+            value: { selectionSettings: selectionChangingArgs.currentSelectionSettings } });
+        if (selectionChangingArgs.currentSelectionSettings.type === 'Custom') {
+            this.drawObject('duplicate', parent.activeObj, null, null, true);
         }
         else {
-            parent.trigger('selectionChanging', selectionChangingArgs);
-            parent.notify('shape', { prop: 'updSelChangeEventArgs', onPropertyChange: false,
-                value: { selectionSettings: selectionChangingArgs.currentSelectionSettings } });
-            if (selectionChangingArgs.currentSelectionSettings.type === 'Custom') {
-                this.drawObject('duplicate', parent.activeObj, null, null, true);
-            }
-            else {
-                if (actPoint.startX !== 0 || actPoint.startY !== 0 ||
-                    actPoint.width !== 0 || actPoint.height !== 0) {
-                    points = { startX: actPoint.startX, startY: actPoint.startY,
-                        endX: actPoint.endX, endY: actPoint.endY,
-                        width: actPoint.width, height: actPoint.height };
-                }
-                this.drawObject('duplicate', null, true, points);
+            if (actPoint.startX !== 0 || actPoint.startY !== 0 ||
+                actPoint.width !== 0 || actPoint.height !== 0) {
+                points = { startX: actPoint.startX, startY: actPoint.startY,
+                    endX: actPoint.endX, endY: actPoint.endY,
+                    width: actPoint.width, height: actPoint.height };
             }
+            this.drawObject('duplicate', null, true, points);
         }
     }
     drawCustomSelection(cropShape, startX, startY, width, height) {
@@ -4704,19 +4587,12 @@ class Draw {
             });
             this.imgCanvasPoints = points;
             let count = 0;
-            if ((!isBlazor() && parent.transform.straighten === 3 && !this.preventStraightening) ||
-                (isBlazor() && parent.transform.straighten === 5 && !this.preventStraightening)) {
+            if (parent.transform.straighten === 3 && !this.preventStraightening) {
                 this.preventStraightening = true;
                 const temp = parent.prevStraightenedDegree;
                 parent.prevStraightenedDegree = parent.transform.straighten;
                 parent.setStraighten(0);
-                if (isBlazor()) {
-                    parent.setStraighten(5);
-                }
-                else {
-                    parent.setStraighten(3);
-                }
-                
+                parent.setStraighten(3);
                 parent.prevStraightenedDegree = temp;
                 this.preventStraightening = false;
             }
@@ -4753,19 +4629,12 @@ class Draw {
             toolbar.style.display = 'none';
         }
         const obj = { defToolbarItems: null };
-        if (!isBlazor()) {
-            parent.notify('toolbar', { prop: 'getDefToolbarItems', value: { obj: obj } });
-            if (obj['defToolbarItems'].length === 0 &&
-                (isNullOrUndefined(document.getElementById(id + '_toolbar'))) &&
-                parent.element.querySelector('#' + id + '_toolbarArea')) {
-                const height = parent.element.querySelector('#' + id + '_toolbarArea').clientHeight;
-                parent.notify('toolbar', { prop: 'setToolbarHeight', value: { height: height } });
-            }
-        }
-        else {
-            if (parent.element.querySelector('#' + id + '_toolbarArea')) {
-                parent.toolbarHeight = parent.element.querySelector('#' + id + '_toolbarArea').clientHeight;
-            }
+        parent.notify('toolbar', { prop: 'getDefToolbarItems', value: { obj: obj } });
+        if (obj['defToolbarItems'].length === 0 &&
+            (isNullOrUndefined(document.getElementById(id + '_toolbar'))) &&
+            parent.element.querySelector('#' + id + '_toolbarArea')) {
+            const height = parent.element.querySelector('#' + id + '_toolbarArea').clientHeight;
+            parent.notify('toolbar', { prop: 'setToolbarHeight', value: { height: height } });
         }
         parent.reset();
         parent.update();
@@ -4831,9 +4700,7 @@ class Draw {
             this.reset();
             this.openNewImage();
         }
-        if (!isBlazor()) {
-            getComponent(document.getElementById(parent.element.id + '_dialog'), 'dialog').destroy();
-        }
+        getComponent(document.getElementById(parent.element.id + '_dialog'), 'dialog').destroy();
         this.isImageEdited = false;
     }
     showDialogPopup() {
@@ -4942,12 +4809,7 @@ class Draw {
             this.openURL = url;
             if (parent.isImageLoaded && !parent.isChangesSaved && (this.isImageEdited || parent.pointColl.length > 0 || parent.objColl.length > 0)) {
                 this.isFileChanged = true;
-                if (!isBlazor()) {
-                    this.showDialogPopup();
-                }
-                else {
-                    parent.dotNetRef.invokeMethodAsync('UpdateDialog', true);
-                }
+                this.showDialogPopup();
             }
             else {
                 this.checkToolbarTemplate(inputElement, url);
@@ -5527,59 +5389,9 @@ class Draw {
             frameLineStyle: parent.toPascalCase(parent.frameObj.border), lineCount: parent.frameObj.amount };
         const frameChange = { cancel: false, previousFrameSetting: prevFrameSettings,
             currentFrameSetting: currFrameSettings };
-        if (isBlazor()) {
-            if (parent.events && parent.events.frameChanging.hasDelegate === true) {
-                /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
-                parent.dotNetRef.invokeMethodAsync('OnFrameChangingAsync', 'FrameChanging', frameChange, null).then((args) => {
-                    if (!args.cancel) {
-                        this.setFrameObj(args.currentFrameSetting);
-                        const obj = { currObj: {} };
-                        parent.notify('filter', { prop: 'getCurrentObj', onPropertyChange: false, value: { object: obj } });
-                        parent.notify('undo-redo', { prop: 'updateUndoRedoColl', onPropertyChange: false, value: {
-                                operation: 'frame', previousObj: obj['currObj'], previousObjColl: obj['currObj']['objColl'],
-                                previousPointColl: obj['currObj']['pointColl'], previousSelPointColl: obj['currObj']['selPointColl'],
-                                previousCropObj: extend({}, parent.cropObj, {}, true), previousText: null, currentText: null,
-                                previousFilter: null, isCircleCrop: null
-                            } });
-                        const fillColorDiv = parent.element.querySelector('.e-ie-toolbar-e-frame-color');
-                        if (fillColorDiv) {
-                            /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
-                            parent.element.querySelector('.e-ie-toolbar-e-frame-color' + parent.DDBPREVIEW).style.background = parent.frameObj.color;
-                        }
-                        const graColorDiv = parent.element.querySelector('.e-ie-toolbar-e-frame-gradient');
-                        if (graColorDiv) {
-                            const noColorDiv = document.querySelector('.e-dropdown-popup.e-frame-gradient-dd-btn');
-                            if (noColorDiv) {
-                                noColorDiv.querySelector('.e-nocolor-item').classList.remove('e-selected');
-                            }
-                            /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
-                            parent.element.querySelector('.e-ie-toolbar-e-frame-gradient' + parent.DDBPREVIEW).classList.remove('e-nocolor-item');
-                            if (parent.frameObj.gradientColor === '') {
-                                /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
-                                parent.element.querySelector('.e-ie-toolbar-e-frame-gradient' + parent.DDBPREVIEW).classList.add('e-nocolor-item');
-                            }
-                            else {
-                                /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
-                                parent.element.querySelector('.e-ie-toolbar-e-frame-gradient' + parent.DDBPREVIEW).style.background = parent.frameObj.gradientColor;
-                            }
-                        }
-                        parent.notify('draw', { prop: 'render-image', value: { isMouseWheel: null } });
-                        parent.curFrameObjEvent = { currentFrameSetting: args.currentFrameSetting };
-                        parent.isFrameBtnClick = true;
-                    }
-                });
-            }
-            else {
-                if (!frameChange.cancel) {
-                    this.setFrameObj(frameChange.currentFrameSetting);
-                }
-            }
-        }
-        else {
-            parent.trigger('frameChange', frameChange);
-            if (!frameChange.cancel) {
-                this.setFrameObj(frameChange.currentFrameSetting);
-            }
+        parent.trigger('frameChange', frameChange);
+        if (!frameChange.cancel) {
+            this.setFrameObj(frameChange.currentFrameSetting);
         }
         return frameChange;
     }
@@ -5949,17 +5761,7 @@ class Export {
         this.parent.off('destroyed', this.destroy);
     }
     export(args) {
-        if (isBlazor()) {
-            const obj = { shape: '' };
-            this.parent.notify('selection', { prop: 'getCurrentDrawingShape', onPropertyChange: false, value: { obj: obj } });
-            if (obj['shape'] !== '') {
-                this.parent.notify('selection', { prop: 'setCurrentDrawingShape', onPropertyChange: false, value: { value: '' } });
-                this.parent.notify('shape', { prop: 'refreshActiveObj', onPropertyChange: false });
-            }
-        }
-        else {
-            this.parent.notify('toolbar', { prop: 'refreshShapeDrawing', onPropertyChange: false });
-        }
+        this.parent.notify('toolbar', { prop: 'refreshShapeDrawing', onPropertyChange: false });
         this.updatePvtVar();
         switch (args.prop) {
             case 'export':
@@ -6012,16 +5814,8 @@ class Export {
                 value: { x: null, y: null, isMouseDown: null } });
             const beforeSave = { cancel: false, fileName: fileName ? fileName : imageName,
                 fileType: type };
-            if (isBlazor() && parent.events && parent.events.saving.hasDelegate === true) {
-                /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
-                parent.dotNetRef.invokeMethodAsync('BeforeSaveEventAsync', 'BeforeSave', beforeSave).then((beforeSave) => {
-                    this.beforeSaveEvent(beforeSave, type, fileName, imageName);
-                });
-            }
-            else {
-                parent.trigger('beforeSave', beforeSave);
-                this.beforeSaveEvent(beforeSave, type, fileName, imageName);
-            }
+            parent.trigger('beforeSave', beforeSave);
+            this.beforeSaveEvent(beforeSave, type, fileName, imageName);
         }
     }
     beforeSaveEvent(observableSaveArgs, type, fileName, imageName) {
@@ -6039,9 +5833,7 @@ class Export {
             }
             const saved = { fileName: fileName ? fileName : imageName, fileType: type };
             parent.trigger('saved', saved);
-            if (!isBlazor()) {
-                parent.notify('toolbar', { prop: 'refresh-main-toolbar', onPropertyChange: false });
-            }
+            parent.notify('toolbar', { prop: 'refresh-main-toolbar', onPropertyChange: false });
             parent.lowerCanvas.style.left = parent.upperCanvas.style.left = '';
             parent.lowerCanvas.style.top = parent.upperCanvas.style.top = '';
             parent.lowerCanvas.style.maxWidth = parent.upperCanvas.style.maxWidth = '';
@@ -6111,15 +5903,7 @@ class Export {
             value: { obj: selPointCollObj } });
         if (this.parent.aspectWidth) {
             parent.notify('undo-redo', { prop: 'setPreventUR', value: { bool: true } });
-            if (!isBlazor()) {
-                parent.notify('toolbar', { prop: 'resizeClick', value: { bool: false } });
-            }
-            else {
-                /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
-                parent.performResizeClick();
-            }
-            /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
-            parent.currentToolbar = 'resize-toolbar';
+            parent.notify('toolbar', { prop: 'resizeClick', value: { bool: false } });
             parent.okBtn();
             if (parent.transform.degree % 90 === 0 && parent.transform.degree % 180 !== 0) {
                 width = this.parent.aspectHeight;
@@ -7687,15 +7471,11 @@ class FreehandDrawing {
         if (selectedPoint.strokeColor === '#42a5f5') {
             selectedPoint.strokeColor = this.tempFHDStyles.strokeColor;
         }
-        if (!isBlazor()) {
-            parent.notify('toolbar', { prop: 'setSelectedFreehandColor', value: { color: '#42a5f5' } });
-        }
+        parent.notify('toolbar', { prop: 'setSelectedFreehandColor', value: { color: '#42a5f5' } });
         this.upperContext.clearRect(0, 0, parent.upperCanvas.width, parent.upperCanvas.height);
         this.lowerContext.clearRect(0, 0, parent.lowerCanvas.width, parent.lowerCanvas.height);
         parent.notify('draw', { prop: 'render-image', value: { isMouseWheel: null } });
-        if (!isBlazor()) {
-            parent.notify('toolbar', { prop: 'refresh-main-toolbar', onPropertyChange: false });
-        }
+        parent.notify('toolbar', { prop: 'refresh-main-toolbar', onPropertyChange: false });
         if (selectedPoint) {
             selectedPoint.isSelected = false;
         }
@@ -7706,9 +7486,7 @@ class FreehandDrawing {
         const parent = this.parent;
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
         const selectedPoint = parent.pointColl[this.fhdSelIdx];
-        if (!isBlazor()) {
-            parent.notify('toolbar', { prop: 'setSelectedFreehandColor', value: { color: '#42a5f5' } });
-        }
+        parent.notify('toolbar', { prop: 'setSelectedFreehandColor', value: { color: '#42a5f5' } });
         this.upperContext.clearRect(0, 0, parent.upperCanvas.width, parent.upperCanvas.height);
         this.lowerContext.clearRect(0, 0, parent.upperCanvas.width, parent.upperCanvas.height);
         this.pointCounter = 0;
@@ -7723,12 +7501,7 @@ class FreehandDrawing {
         parent.activeObj.strokeSettings.strokeWidth = this.penStrokeWidth = this.tempFHDStyles.strokeWidth;
         this.tempFHDStyles = { strokeColor: null, strokeWidth: null, fillColor: null };
         parent.notify('draw', { prop: 'render-image', value: { isMouseWheel: null } });
-        if (!isBlazor()) {
-            parent.notify('toolbar', { prop: 'refresh-main-toolbar', onPropertyChange: false });
-        }
-        else {
-            parent.updateToolbar(parent.element, 'imageLoaded');
-        }
+        parent.notify('toolbar', { prop: 'refresh-main-toolbar', onPropertyChange: false });
     }
     selectFhd(index) {
         const parent = this.parent;
@@ -7766,10 +7539,6 @@ class FreehandDrawing {
         else {
             parent.okBtn();
         }
-        if (isBlazor()) {
-            // eslint-disable-next-line @typescript-eslint/no-explicit-any
-            parent.getShapeValue('pen');
-        }
     }
     deleteFhd(index, isId) {
         const parent = this.parent;
@@ -7804,9 +7573,7 @@ class FreehandDrawing {
             this.fhdHovIdx = this.fhdSelIdx = null;
             parent.notify('selection', { prop: 'resetFreehandDrawVariables' });
             parent.notify('draw', { prop: 'render-image', value: { isMouseWheel: null } });
-            if (!isBlazor()) {
-                parent.notify('toolbar', { prop: 'refresh-main-toolbar', onPropertyChange: false });
-            }
+            parent.notify('toolbar', { prop: 'refresh-main-toolbar', onPropertyChange: false });
         }
     }
     zoomX(x) {
@@ -8146,24 +7913,14 @@ class FreehandDrawing {
             if (isNullOrUndefined(parent.activeObj.strokeSettings.strokeWidth)) {
                 parent.activeObj.strokeSettings.strokeWidth = 2;
             }
-            if (!isBlazor()) {
-                parent.notify('toolbar', { prop: 'refresh-toolbar', onPropertyChange: false, value: { type: 'pen',
-                        isApplyBtn: null, isCropping: null, isZooming: null, cType: null } });
-            }
-            else {
-                parent.updateToolbar(parent.element, 'pen');
-            }
+            parent.notify('toolbar', { prop: 'refresh-toolbar', onPropertyChange: false, value: { type: 'pen',
+                    isApplyBtn: null, isCropping: null, isZooming: null, cType: null } });
         }
         else {
             parent.upperCanvas.style.cursor = parent.cursor = 'default';
             parent.notify('shape', { prop: 'apply', onPropertyChange: false, value: { shape: null, obj: null, canvas: null } });
-            if (!isBlazor()) {
-                parent.notify('toolbar', { prop: 'refresh-main-toolbar', onPropertyChange: false });
-                parent.notify('toolbar', { prop: 'setCurrentToolbar', value: { type: 'main' } });
-            }
-            else {
-                parent.updateToolbar(parent.element, 'imageLoaded');
-            }
+            parent.notify('toolbar', { prop: 'refresh-main-toolbar', onPropertyChange: false });
+            parent.notify('toolbar', { prop: 'setCurrentToolbar', value: { type: 'main' } });
             parent.notify('selection', { prop: 'setFreehandDrawCustomized', value: { isFreehandDrawCustomized: false } });
         }
     }
@@ -8202,48 +7959,22 @@ class FreehandDrawing {
         /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
         const parent = this.parent;
         const point = parent.pointColl[this.fhdSelIdx];
-        if (isBlazor() && parent.events && parent.events.shapeChanging.hasDelegate === true) {
-            /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
-            parent.dotNetRef.invokeMethodAsync('ShapeEventAsync', 'OnShape', shapeChangingArgs, null).then((shapeChangingArgs) => {
-                this.penStrokeWidth = shapeChangingArgs.currentShapeSettings.strokeWidth;
-                if (parent.activeObj.strokeSettings.strokeColor !== shapeChangingArgs.currentShapeSettings.strokeColor) {
-                    parent.activeObj.strokeSettings.strokeColor = shapeChangingArgs.currentShapeSettings.strokeColor;
-                    const penColorElement = parent.element.querySelector('.e-ie-toolbar-e-pen-color .e-dropdownbtn-preview');
-                    if (penColorElement) {
-                        penColorElement.style.background = shapeChangingArgs.currentShapeSettings.strokeColor;
-                    }
-                }
-                if (this.fhdSelID) {
-                    point.strokeColor = shapeChangingArgs.currentShapeSettings.strokeColor;
-                    point.strokeWidth = shapeChangingArgs.currentShapeSettings.strokeWidth;
-                    point.points = shapeChangingArgs.currentShapeSettings.points;
-                    point.opacity = shapeChangingArgs.currentShapeSettings.opacity;
-                }
-                if (shapeChangingArgs.action === 'select') {
-                    this.freehandRedraw(this.upperContext);
-                    parent.updateToolbar(parent.element, 'imageLoaded');
-                    parent.updateToolbar(parent.element, 'pen');
-                }
-            });
+        parent.trigger('shapeChanging', shapeChangingArgs);
+        this.penStrokeWidth = shapeChangingArgs.currentShapeSettings.strokeWidth;
+        if (parent.activeObj.strokeSettings.strokeColor !== shapeChangingArgs.currentShapeSettings.strokeColor) {
+            parent.activeObj.strokeSettings.strokeColor = shapeChangingArgs.currentShapeSettings.strokeColor;
+            parent.notify('toolbar', { prop: 'update-toolbar-items', onPropertyChange: false });
         }
-        else {
-            parent.trigger('shapeChanging', shapeChangingArgs);
-            this.penStrokeWidth = shapeChangingArgs.currentShapeSettings.strokeWidth;
-            if (parent.activeObj.strokeSettings.strokeColor !== shapeChangingArgs.currentShapeSettings.strokeColor) {
-                parent.activeObj.strokeSettings.strokeColor = shapeChangingArgs.currentShapeSettings.strokeColor;
-                parent.notify('toolbar', { prop: 'update-toolbar-items', onPropertyChange: false });
-            }
-            if (this.fhdSelID) {
-                point.strokeColor = shapeChangingArgs.currentShapeSettings.strokeColor;
-                point.strokeWidth = shapeChangingArgs.currentShapeSettings.strokeWidth;
-                point.points = shapeChangingArgs.currentShapeSettings.points;
-                point.opacity = shapeChangingArgs.currentShapeSettings.opacity;
-            }
-            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 } });
-            }
+        if (this.fhdSelID && point && shapeChangingArgs.currentShapeSettings) {
+            point.strokeColor = shapeChangingArgs.currentShapeSettings.strokeColor;
+            point.strokeWidth = shapeChangingArgs.currentShapeSettings.strokeWidth;
+            point.points = shapeChangingArgs.currentShapeSettings.points;
+            point.opacity = shapeChangingArgs.currentShapeSettings.opacity;
+        }
+        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 } });
         }
     }
     setCenterSelPoints() {
@@ -8345,7 +8076,7 @@ class Selection {
                 this.setActivePoint(args.value['startX'], args.value['startY']);
                 break;
             case 'clearSelection':
-                this.clearSelection();
+                this.clearSelection(args.value['resetCrop']);
                 break;
             case 'calcShapeRatio':
                 this.calcShapeRatio(args.value['x'], args.value['y'], args.value['imgWidth'], args.value['imgHeight']);
@@ -9375,15 +9106,7 @@ class Selection {
             if (splitWords !== undefined && splitWords[0] === 'crop') {
                 this.isCropSelection = true;
             }
-            if (!this.isCropSelection && parent.eventType !== 'resize' && isBlazor() && parent.events && parent.events.onShapeResizeStart.hasDelegate === true) {
-                shapeResizingArgs.action = this.currentDrawingShape !== '' ? 'drawing' : 'resize-start';
-                /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
-                parent.dotNetRef.invokeMethodAsync('ShapeEventAsync', 'OnShapeResizeStart', shapeResizingArgs, null).then((shapeResizingArgs) => {
-                    parent.notify('shape', { prop: 'updateShapeChangeEventArgs', onPropertyChange: false,
-                        value: { shapeSettings: shapeResizingArgs.currentShapeSettings } });
-                });
-            }
-            else if (!this.isCropSelection) {
+            if (!this.isCropSelection) {
                 if (this.currentDrawingShape !== '') {
                     shapeResizingArgs.action = 'drawing';
                 }
@@ -9404,51 +9127,20 @@ class Selection {
                         width: shapeResizingArgs.currentShapeSettings.width,
                         height: shapeResizingArgs.currentShapeSettings.height } };
                 this.selectionResizingArgs = selectionResizingArgs;
-                if (isBlazor() && isNullOrUndefined(parent.eventType) && parent.events &&
-                    parent.events.onSelectionResizeStart.hasDelegate === true) {
-                    selectionResizingArgs.action = 'resize-start';
-                    /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
-                    parent.dotNetRef.invokeMethodAsync('SelectionEventAsync', 'OnSelectionResizeStart', selectionResizingArgs).then((selectionResizingArgs) => {
-                        parent.notify('shape', { prop: 'updSelChangeEventArgs', onPropertyChange: false,
-                            value: { selectionSettings: selectionResizingArgs.currentSelectionSettings } });
-                    });
-                }
-                else {
-                    parent.trigger('selectionChanging', selectionResizingArgs);
-                    parent.notify('shape', { prop: 'updSelChangeEventArgs', onPropertyChange: false,
-                        value: { selectionSettings: selectionResizingArgs.currentSelectionSettings } });
-                }
+                parent.trigger('selectionChanging', selectionResizingArgs);
+                parent.notify('shape', { prop: 'updSelChangeEventArgs', onPropertyChange: false,
+                    value: { selectionSettings: selectionResizingArgs.currentSelectionSettings } });
             }
         }
         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, null).then((shapeResizingArgs) => {
-                    parent.notify('shape', { prop: 'updateShapeChangeEventArgs', onPropertyChange: false,
-                        value: { shapeSettings: shapeResizingArgs.currentShapeSettings } });
-                });
-            }
-            else {
-                parent.trigger('shapeChanging', shapeResizingArgs);
-                parent.notify('shape', { prop: 'updateShapeChangeEventArgs', onPropertyChange: false,
-                    value: { shapeSettings: shapeResizingArgs.currentShapeSettings } });
-            }
+            parent.trigger('shapeChanging', shapeResizingArgs);
+            parent.notify('shape', { prop: 'updateShapeChangeEventArgs', onPropertyChange: false,
+                value: { shapeSettings: shapeResizingArgs.currentShapeSettings } });
         }
         else {
-            if (isBlazor() && isNullOrUndefined(parent.eventType) && parent.events &&
-                parent.events.onShapeDragStart.hasDelegate === true) {
-                shapeMovingArgs.action = 'drag-start';
-                /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
-                parent.dotNetRef.invokeMethodAsync('ShapeEventAsync', 'OnShapeDragStart', shapeMovingArgs, null).then((shapeMovingArgs) => {
-                    parent.notify('shape', { prop: 'updateShapeChangeEventArgs', onPropertyChange: false,
-                        value: { shapeSettings: shapeMovingArgs.currentShapeSettings } });
-                });
-            }
-            else {
-                parent.trigger('shapeChanging', shapeMovingArgs);
-                parent.notify('shape', { prop: 'updateShapeChangeEventArgs', onPropertyChange: false,
-                    value: { shapeSettings: shapeMovingArgs.currentShapeSettings } });
-            }
+            parent.trigger('shapeChanging', shapeMovingArgs);
+            parent.notify('shape', { prop: 'updateShapeChangeEventArgs', onPropertyChange: false,
+                value: { shapeSettings: shapeMovingArgs.currentShapeSettings } });
         }
         parent.eventType = type;
     }
@@ -11040,16 +10732,8 @@ class Selection {
             this.dragCanvas = parent.togglePan = true;
         }
         const imageEditorClickEventArgs = { point: this.setXYPoints(e) };
-        if (isBlazor() && parent.events && parent.events.clicked.hasDelegate === true) {
-            /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
-            parent.dotNetRef.invokeMethodAsync('ClickEventAsync', 'click', imageEditorClickEventArgs).then((imageEditorClickEventArgs) => {
-                this.clickEvent(imageEditorClickEventArgs, e);
-            });
-        }
-        else {
-            parent.trigger('click', imageEditorClickEventArgs);
-            this.clickEvent(imageEditorClickEventArgs, e);
-        }
+        parent.trigger('click', imageEditorClickEventArgs);
+        this.clickEvent(imageEditorClickEventArgs, e);
     }
     getImagePoints(x, y) {
         const parent = this.parent;
@@ -11155,13 +10839,8 @@ class Selection {
             }
         }
         if (!isShape && !parent.togglePen && !this.isCropSelection) {
-            if (!isBlazor()) {
-                parent.notify('toolbar', { prop: 'refresh-main-toolbar', onPropertyChange: false });
-                parent.notify('toolbar', { prop: 'close-contextual-toolbar', onPropertyChange: false });
-            }
-            else if (parent.isImageLoaded) {
-                parent.updateToolbar(parent.element, 'imageLoaded', 'okBtnClick');
-            }
+            parent.notify('toolbar', { prop: 'refresh-main-toolbar', onPropertyChange: false });
+            parent.notify('toolbar', { prop: 'close-contextual-toolbar', onPropertyChange: false });
         }
         if (this.dragCanvas && this.isPan && (parent.cursor === 'grab' || this.isTouch)
             && !isShape && !isFreehandDraw && !parent.togglePen) {
@@ -11177,9 +10856,7 @@ class Selection {
             if (this.isFhdEditing) {
                 parent.notify('freehand-draw', { prop: 'applyFhd', onPropertyChange: false });
                 this.isFhdCustomized = false;
-                if (!isBlazor()) {
-                    parent.notify('toolbar', { prop: 'destroy-qa-toolbar', onPropertyChange: false });
-                }
+                parent.notify('toolbar', { prop: 'destroy-qa-toolbar', onPropertyChange: false });
             }
             const shape = parent.activeObj.shape;
             const shapeColl = ['rectangle', 'ellipse', 'line', 'arrow', 'path', 'text', 'image'];
@@ -11187,13 +10864,8 @@ class Selection {
                 parent.notify('shape', { prop: 'redrawActObj', onPropertyChange: false,
                     value: { x: null, y: null, isMouseDown: null } });
                 parent.notify('shape', { prop: 'refreshActiveObj', onPropertyChange: false });
-                if (!isBlazor()) {
-                    parent.notify('toolbar', { prop: 'setCurrentToolbar', value: { type: 'main' } });
-                    parent.notify('toolbar', { prop: 'refresh-main-toolbar', onPropertyChange: false });
-                }
-                else {
-                    parent.updateToolbar(parent.element, 'imageLoaded');
-                }
+                parent.notify('toolbar', { prop: 'setCurrentToolbar', value: { type: 'main' } });
+                parent.notify('toolbar', { prop: 'refresh-main-toolbar', onPropertyChange: false });
             }
             this.canvasMouseDownHandler(e);
         }
@@ -11242,13 +10914,7 @@ class Selection {
                     parent.notify('freehand-draw', { prop: 'selectFhd', value: { type: 'ok' } });
                     parent.notify('freehand-draw', { prop: 'hoverFhd', onPropertyChange: false,
                         value: { strokeColor: null, strokeWidth: null } });
-                    if (!isBlazor()) {
-                        parent.notify('toolbar', { prop: 'renderQAT', onPropertyChange: false, value: { isPenEdit: true } });
-                    }
-                    else {
-                        parent.updateToolbar(parent.element, 'pen');
-                        parent.updateToolbar(parent.element, 'quickAccessToolbar', 'pen');
-                    }
+                    parent.notify('toolbar', { prop: 'renderQAT', onPropertyChange: false, value: { isPenEdit: true } });
                 }
                 else if (indexObj['freehandSelectedIndex']) {
                     parent.okBtn();
@@ -11269,13 +10935,18 @@ class Selection {
                     if (qbArea) {
                         qbArea.style.display = 'none';
                     }
-                }
-                if (!isBlazor()) {
-                    const isPenDraw = parent.togglePen;
-                    parent.notify('toolbar', { prop: 'close-contextual-toolbar', onPropertyChange: false });
-                    if (isPenDraw) {
-                        parent.freehandDraw(true);
-                    }
+                    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                    const point = parent.pointColl[indexObj['freehandSelectedIndex']];
+                    const shapeSettings = { id: 'pen_' + (indexObj['freehandSelectedIndex'] + 1), type: ShapeType.FreehandDraw,
+                        startX: point.points[0].x, startY: point.points[0].y, strokeColor: point.strokeColor,
+                        strokeWidth: point.strokeWidth, points: point.points, opacity: point.opacity };
+                    const shapeChangedArgs = { action: 'apply', currentShapeSettings: extend({}, shapeSettings, {}, true) };
+                    parent.trigger('shapeChange', shapeChangedArgs);
+                }
+                const isPenDraw = parent.togglePen;
+                parent.notify('toolbar', { prop: 'close-contextual-toolbar', onPropertyChange: false });
+                if (isPenDraw) {
+                    parent.freehandDraw(true);
                 }
                 this.isFhdEditing = false;
                 if (isLineArrow) {
@@ -11509,54 +11180,6 @@ class Selection {
             if (splitWords !== undefined && splitWords[0] === 'crop') {
                 isCropSelection = true;
             }
-            if (isBlazor() && parent.eventType) {
-                if (parent.eventType === 'pan') {
-                    if (parent.events && parent.events.onPanEnd.hasDelegate === true) {
-                        parent.dotNetRef.invokeMethodAsync('PanEventAsync', 'OnPanEnd', parent.panEventArgs);
-                    }
-                }
-                else if (parent.eventType === 'resize') {
-                    if (!this.isCropSelection && parent.events && parent.events.onShapeResizeEnd.hasDelegate === true) {
-                        this.shapeResizingArgs.currentShapeSettings = this.updatePrevShapeSettings();
-                        this.shapeResizingArgs.action = this.currentDrawingShape !== '' ? 'drawing' : 'resize-end';
-                        /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
-                        parent.dotNetRef.invokeMethodAsync('ShapeEventAsync', 'OnShapeResizeEnd', this.shapeResizingArgs, null).then((shapeResizingArgs) => {
-                            parent.notify('shape', { prop: 'updateShapeChangeEventArgs', onPropertyChange: false,
-                                value: { shapeSettings: shapeResizingArgs.currentShapeSettings } });
-                        });
-                    }
-                    else if (this.shapeResizingArgs && this.selectionResizingArgs && parent.events &&
-                        parent.events.onSelectionResizeEnd.hasDelegate === true) {
-                        const currentSelectionSettings = { type: parent.activeObj.shape,
-                            startX: this.shapeResizingArgs.currentShapeSettings.startX,
-                            startY: this.shapeResizingArgs.currentShapeSettings.startY,
-                            width: this.shapeResizingArgs.currentShapeSettings.width,
-                            height: this.shapeResizingArgs.currentShapeSettings.height };
-                        this.selectionResizingArgs.currentSelectionSettings = currentSelectionSettings;
-                        this.selectionResizingArgs.action = 'resize-end';
-                        /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
-                        parent.dotNetRef.invokeMethodAsync('SelectionEventAsync', 'OnSelectionResizeEnd', this.selectionResizingArgs).then((selectionResizingArgs) => {
-                            parent.notify('shape', { prop: 'updateSelectionChangeEventArgs', onPropertyChange: false,
-                                value: { selectionSettings: selectionResizingArgs.currentSelectionSettings } });
-                        });
-                    }
-                }
-                else {
-                    if (this.shapeMovingArgs && parent.events && parent.events.onShapeDragEnd.hasDelegate === true) {
-                        this.shapeMovingArgs.currentShapeSettings = this.updatePrevShapeSettings();
-                        this.shapeMovingArgs.action = 'drag-end';
-                        /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
-                        parent.dotNetRef.invokeMethodAsync('ShapeEventAsync', 'OnShapeDragEnd', this.shapeMovingArgs, null).then((shapeMovingArgs) => {
-                            parent.notify('shape', { prop: 'updateShapeChangeEventArgs', onPropertyChange: false,
-                                value: { shapeSettings: shapeMovingArgs.currentShapeSettings } });
-                        });
-                    }
-                }
-                this.shapeResizingArgs = null;
-                this.shapeMovingArgs = null;
-                parent.panEventArgs = null;
-                parent.eventType = null;
-            }
             if (this.currentDrawingShape === 'path') {
                 /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
                 const elem = e.srcElement;
@@ -11630,9 +11253,7 @@ class Selection {
                     if (!this.isFhdEditing) {
                         this.applyCurrActObj(x, y);
                         parent.currObjType.isResize = false;
-                        if (!isBlazor()) {
-                            parent.notify('toolbar', { prop: 'destroy-qa-toolbar', onPropertyChange: false });
-                        }
+                        parent.notify('toolbar', { prop: 'destroy-qa-toolbar', onPropertyChange: false });
                     }
                 }
                 if (parent.activeObj) {
@@ -11648,37 +11269,26 @@ class Selection {
                         isCropSelection = true;
                     }
                     const shape = parent.activeObj.shape;
-                    if (!isBlazor()) {
-                        const shapeColl = ['rectangle', 'ellipse', 'line', 'arrow', 'path'];
-                        if (shapeColl.indexOf(shape) > -1) {
-                            parent.notify('toolbar', { prop: 'refresh-toolbar', onPropertyChange: false, value: { type: 'shapes',
-                                    isApplyBtn: null, isCropping: null, isZooming: null, cType: null } });
-                        }
-                        else if (shape === 'text') {
-                            if (parent.textArea.style.display === 'none') {
-                                parent.notify('toolbar', { prop: 'refresh-toolbar', onPropertyChange: false, value: { type: 'text',
-                                        isApplyBtn: null, isCropping: null, isZooming: null, cType: null } });
-                            }
-                        }
-                        else if (this.isFhdEditing) {
-                            parent.notify('toolbar', { prop: 'refresh-toolbar', onPropertyChange: false, value: { type: 'pen',
+                    const shapeColl = ['rectangle', 'ellipse', 'line', 'arrow', 'path'];
+                    if (shapeColl.indexOf(shape) > -1) {
+                        parent.notify('toolbar', { prop: 'refresh-toolbar', onPropertyChange: false, value: { type: 'shapes',
+                                isApplyBtn: null, isCropping: null, isZooming: null, cType: null } });
+                    }
+                    else if (shape === 'text') {
+                        if (parent.textArea.style.display === 'none') {
+                            parent.notify('toolbar', { prop: 'refresh-toolbar', onPropertyChange: false, value: { type: 'text',
                                     isApplyBtn: null, isCropping: null, isZooming: null, cType: null } });
                         }
-                        else if (!isCropSelection) {
-                            const eventargs = { type: 'main', isApplyBtn: null, isCropping: false, isZooming: null };
-                            parent.notify('toolbar', { prop: 'refresh-toolbar', onPropertyChange: false, value: eventargs });
-                        }
-                        parent.notify('toolbar', { prop: 'update-toolbar-items', onPropertyChange: false });
                     }
-                    else {
-                        const shapeColl = ['rectangle', 'ellipse', 'line', 'arrow', 'path', 'image'];
-                        if (shapeColl.indexOf(shape) > -1) {
-                            parent.updateToolbar(parent.element, parent.activeObj.shape);
-                        }
-                        else if (parent.activeObj.shape === 'text' && parent.textArea.style.display === 'none') {
-                            parent.updateToolbar(parent.element, 'text');
-                        }
+                    else if (this.isFhdEditing) {
+                        parent.notify('toolbar', { prop: 'refresh-toolbar', onPropertyChange: false, value: { type: 'pen',
+                                isApplyBtn: null, isCropping: null, isZooming: null, cType: null } });
+                    }
+                    else if (!isCropSelection) {
+                        const eventargs = { type: 'main', isApplyBtn: null, isCropping: false, isZooming: null };
+                        parent.notify('toolbar', { prop: 'refresh-toolbar', onPropertyChange: false, value: eventargs });
                     }
+                    parent.notify('toolbar', { prop: 'update-toolbar-items', onPropertyChange: false });
                 }
             }
             if (parent.activeObj.shape !== undefined) {
@@ -11690,24 +11300,15 @@ class Selection {
             if (parent.activeObj.shape && !isCropSelection && e.currentTarget === parent.upperCanvas &&
                 parent.textArea.style.display === 'none') {
                 if (parent.activeObj.shape === 'text') {
-                    if (!isBlazor()) {
-                        parent.notify('toolbar', { prop: 'refresh-toolbar', onPropertyChange: false, value: { type: 'text',
-                                isApplyBtn: null, isCropping: null, isZooming: null, cType: null } });
-                    }
+                    parent.notify('toolbar', { prop: 'refresh-toolbar', onPropertyChange: false, value: { type: 'text',
+                            isApplyBtn: null, isCropping: null, isZooming: null, cType: null } });
                 }
                 else {
-                    if (!isBlazor()) {
-                        parent.notify('toolbar', { prop: 'refresh-toolbar', onPropertyChange: false, value: { type: 'shapes',
-                                isApplyBtn: null, isCropping: null, isZooming: null, cType: null } });
-                    }
-                }
-                if (!isBlazor()) {
-                    parent.notify('toolbar', { prop: 'update-toolbar-items', onPropertyChange: false });
-                    parent.notify('toolbar', { prop: 'renderQAT', onPropertyChange: false, value: { isPenEdit: null } });
-                }
-                else {
-                    parent.updateToolbar(parent.element, 'quickAccessToolbar', parent.activeObj.shape);
+                    parent.notify('toolbar', { prop: 'refresh-toolbar', onPropertyChange: false, value: { type: 'shapes',
+                            isApplyBtn: null, isCropping: null, isZooming: null, cType: null } });
                 }
+                parent.notify('toolbar', { prop: 'update-toolbar-items', onPropertyChange: false });
+                parent.notify('toolbar', { prop: 'renderQAT', onPropertyChange: false, value: { isPenEdit: null } });
             }
             if (parent.togglePen && e.currentTarget === parent.upperCanvas) {
                 parent.notify('freehand-draw', { prop: 'freehandUpHandler', onPropertyChange: false,
@@ -12139,16 +11740,8 @@ class Selection {
         const beforeSave = { fileName: obj['fileName'], fileType: obj['fileType'], cancel: false };
         switch (e.key) {
             case (e.ctrlKey && 's'):
-                if (isBlazor() && parent.events && parent.events.saving.hasDelegate === true) {
-                    /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
-                    parent.dotNetRef.invokeMethodAsync('BeforeSaveEventAsync', 'BeforeSave', beforeSave).then((args) => {
-                        this.beforeSaveEvent(args, e);
-                    });
-                }
-                else {
-                    parent.trigger('beforeSave', beforeSave);
-                    this.beforeSaveEvent(beforeSave, e);
-                }
+                parent.trigger('beforeSave', beforeSave);
+                this.beforeSaveEvent(beforeSave, e);
                 break;
             case (e.ctrlKey && 'z'):
                 if (parent.allowUndoRedo) {
@@ -12229,37 +11822,21 @@ class Selection {
                     parent.notify('transform', { prop: 'resize', value: { width: point.x, height: point.y, isAspectRatio: false } });
                 }
             }
-            if (isBlazor()) {
-                const aspectRatioHeight = this.parent.element.querySelector('.e-ie-toolbar-e-resize-height-input .e-textbox');
-                const aspectRatioWidth = this.parent.element.querySelector('.e-ie-toolbar-e-resize-width-input .e-textbox');
-                if ((blrAspRatElem && blrAspRatElem.classList.contains('e-hidden'))) {
-                    if (aspectRatioHeight && aspectRatioHeight.value === "") {
-                        aspectRatioHeight.value = aspectRatioHeight.placeholder;
-                        aspectRatioHeight.value = aspectRatioHeight.placeholder;
-                    }
-                    if (aspectRatioWidth && aspectRatioWidth.value === "") {
-                        aspectRatioWidth.value = aspectRatioWidth.placeholder;
-                        aspectRatioWidth.value = aspectRatioWidth.placeholder;
+            const aspectRatioHeight = parent.element.querySelector('#' + parent.element.id + '_resizeHeight');
+            const aspectRatioWidth = parent.element.querySelector('#' + parent.element.id + '_resizeWidth');
+            if (isNullOrUndefined(aspectRatioElement)) {
+                if (aspectRatioHeight) {
+                    const elem = getComponent(aspectRatioHeight, 'numerictextbox');
+                    if (aspectRatioHeight && aspectRatioHeight.value === '') {
+                        elem.value = parseFloat(elem.placeholder);
+                        aspectRatioHeight.value = elem.placeholder + 'px';
                     }
                 }
-            }
-            else {
-                const aspectRatioHeight = parent.element.querySelector('#' + parent.element.id + '_resizeHeight');
-                const aspectRatioWidth = parent.element.querySelector('#' + parent.element.id + '_resizeWidth');
-                if (isNullOrUndefined(aspectRatioElement)) {
-                    if (aspectRatioHeight) {
-                        const elem = getComponent(aspectRatioHeight, 'numerictextbox');
-                        if (aspectRatioHeight && aspectRatioHeight.value === '') {
-                            elem.value = parseFloat(elem.placeholder);
-                            aspectRatioHeight.value = elem.placeholder + 'px';
-                        }
-                    }
-                    if (aspectRatioWidth) {
-                        const elem = getComponent(aspectRatioWidth, 'numerictextbox');
-                        if (aspectRatioWidth && aspectRatioWidth.value === '') {
-                            elem.value = parseFloat(elem.placeholder);
-                            aspectRatioWidth.value = elem.placeholder + 'px';
-                        }
+                if (aspectRatioWidth) {
+                    const elem = getComponent(aspectRatioWidth, 'numerictextbox');
+                    if (aspectRatioWidth && aspectRatioWidth.value === '') {
+                        elem.value = parseFloat(elem.placeholder);
+                        aspectRatioWidth.value = elem.placeholder + 'px';
                     }
                 }
             }
@@ -12280,7 +11857,7 @@ class Selection {
         let bool = false;
         /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
         const target = e.target;
-        if ((target.id === this.parent.element.id + '_ok' || target.id === '') && !isBlazor()) {
+        if (target.id === this.parent.element.id + '_ok' || target.id === '') {
             bool = true;
         }
         return bool;
@@ -12316,9 +11893,7 @@ class Selection {
             e.preventDefault();
             if (!parent.isCropTab && (parent.activeObj.shape && parent.activeObj.shape.split('-')[0] !== 'crop')) {
                 parent.okBtn();
-                if (!isBlazor()) {
-                    parent.notify('toolbar', { prop: 'close-contextual-toolbar', onPropertyChange: false });
-                }
+                parent.notify('toolbar', { prop: 'close-contextual-toolbar', onPropertyChange: false });
             }
             let type = '';
             if (e.type === 'mousewheel' && (parent.zoomSettings.zoomTrigger & ZoomTrigger.MouseWheel) === ZoomTrigger.MouseWheel) {
@@ -12366,18 +11941,23 @@ class Selection {
         parent.textArea.setAttribute('rows', this.textRow.toString());
         this.isInitialTextEdited = false;
     }
-    clearSelection() {
+    clearSelection(resetCrop) {
         const parent = this.parent;
         if (!parent.disabled && parent.isImageLoaded) {
-            parent.togglePen = false;
-            parent.notify('shape', { prop: 'refreshActiveObj', onPropertyChange: false });
-            this.dragElement = '';
-            this.dragPoint.startX = this.dragPoint.startY = this.dragPoint.endX = this.dragPoint.endY = 0;
-            parent.currObjType.shape = '';
-            this.upperContext.clearRect(0, 0, parent.upperCanvas.width, parent.upperCanvas.height);
-            parent.currObjType.isActiveObj = true;
-            parent.currObjType.isCustomCrop = false;
-            parent.upperCanvas.style.cursor = parent.cursor = 'default';
+            if (resetCrop) {
+                parent.notify('draw', { prop: 'performCancel', value: { isContextualToolbar: null } });
+            }
+            else {
+                parent.togglePen = false;
+                parent.notify('shape', { prop: 'refreshActiveObj', onPropertyChange: false });
+                this.dragElement = '';
+                this.dragPoint.startX = this.dragPoint.startY = this.dragPoint.endX = this.dragPoint.endY = 0;
+                parent.currObjType.shape = '';
+                this.upperContext.clearRect(0, 0, parent.upperCanvas.width, parent.upperCanvas.height);
+                parent.currObjType.isActiveObj = true;
+                parent.currObjType.isCustomCrop = false;
+                parent.upperCanvas.style.cursor = parent.cursor = 'default';
+            }
         }
     }
     setDragDirection(width, height) {
@@ -12686,14 +12266,7 @@ class Selection {
                 if (splitWords !== undefined && splitWords[0] === 'crop') {
                     this.isCropSelection = true;
                 }
-                if (!this.isCropSelection && isBlazor() && isNullOrUndefined(parent.eventType) &&
-                    parent.events && parent.events.shapeChanging.hasDelegate === true) {
-                    /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
-                    parent.dotNetRef.invokeMethodAsync('ShapeEventAsync', 'OnShape', shapeChangingArgs, null).then((shapeChangingArgs) => {
-                        this.shapeEvent(shapeChangingArgs);
-                    });
-                }
-                else if (!this.isCropSelection) {
+                if (!this.isCropSelection) {
                     parent.trigger('shapeChanging', shapeChangingArgs);
                     this.shapeEvent(shapeChangingArgs);
                 }
@@ -12709,36 +12282,14 @@ class Selection {
                             startY: shapeChangingArgs.currentShapeSettings.startY,
                             width: shapeChangingArgs.currentShapeSettings.width,
                             height: shapeChangingArgs.currentShapeSettings.height } };
-                    if (isBlazor() && parent.events && parent.events.onSelectionResizeStart.hasDelegate === true) {
-                        /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
-                        parent.dotNetRef.invokeMethodAsync('SelectionEventAsync', 'OnSelectionResizeStart', selectionChangingArgs).then((selectionChangingArgs) => {
-                            shapeChangingArgs.currentShapeSettings.startX = selectionChangingArgs.currentSelectionSettings.startX;
-                            shapeChangingArgs.currentShapeSettings.startY = selectionChangingArgs.currentSelectionSettings.startY;
-                            shapeChangingArgs.currentShapeSettings.width = selectionChangingArgs.currentSelectionSettings.width;
-                            shapeChangingArgs.currentShapeSettings.height = selectionChangingArgs.currentSelectionSettings.height;
-                            this.shapeEvent(shapeChangingArgs);
-                        });
-                    }
-                    else {
-                        parent.trigger('selectionChanging', selectionChangingArgs);
-                        shapeChangingArgs.currentShapeSettings.startX = selectionChangingArgs.currentSelectionSettings.startX;
-                        shapeChangingArgs.currentShapeSettings.startY = selectionChangingArgs.currentSelectionSettings.startY;
-                        shapeChangingArgs.currentShapeSettings.width = selectionChangingArgs.currentSelectionSettings.width;
-                        shapeChangingArgs.currentShapeSettings.height = selectionChangingArgs.currentSelectionSettings.height;
-                        this.shapeEvent(shapeChangingArgs);
-                    }
+                    parent.trigger('selectionChanging', selectionChangingArgs);
+                    shapeChangingArgs.currentShapeSettings.startX = selectionChangingArgs.currentSelectionSettings.startX;
+                    shapeChangingArgs.currentShapeSettings.startY = selectionChangingArgs.currentSelectionSettings.startY;
+                    shapeChangingArgs.currentShapeSettings.width = selectionChangingArgs.currentSelectionSettings.width;
+                    shapeChangingArgs.currentShapeSettings.height = selectionChangingArgs.currentSelectionSettings.height;
+                    this.shapeEvent(shapeChangingArgs);
                 }
                 isShape = true;
-                if (isBlazor()) {
-                    /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
-                    const tempCursor = parent.upperCanvas.style.cursor;
-                    this.setCursor(x, y);
-                    if (shapeChangingArgs.action === 'select' && parent.upperCanvas.style.cursor === 'move') {
-                        /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
-                        parent.getShapeValue(parent.activeObj.shape);
-                    }
-                    parent.upperCanvas.style.cursor = tempCursor;
-                }
             }
         }
         return isShape;
@@ -12959,9 +12510,7 @@ class Selection {
                         value: { context: this.lowerContext, isSave: null, isFlip: null } });
                 }
             }
-            if (!isBlazor()) {
-                parent.notify('toolbar', { prop: 'refresh-main-toolbar', onPropertyChange: false });
-            }
+            parent.notify('toolbar', { prop: 'refresh-main-toolbar', onPropertyChange: false });
         }
     }
     getCurrentFlipState() {
@@ -13068,12 +12617,7 @@ class Selection {
                 parent.notify('shape', { prop: 'refreshActiveObj', onPropertyChange: false });
                 this.upperContext.clearRect(0, 0, parent.upperCanvas.width, parent.upperCanvas.height);
                 parent.notify('draw', { prop: 'render-image', value: { isMouseWheel: null } });
-                if (!isBlazor()) {
-                    parent.notify('toolbar', { prop: 'refresh-main-toolbar', onPropertyChange: false });
-                }
-                else {
-                    parent.updateToolbar(parent.element, 'imageLoaded');
-                }
+                parent.notify('toolbar', { prop: 'refresh-main-toolbar', onPropertyChange: false });
             }
             else if (parent.activeObj.shape) {
                 parent.objColl.push(parent.activeObj);
@@ -13093,15 +12637,8 @@ class Selection {
                 shapeChangingArgs = { cancel: false, action: 'delete', previousShapeSettings: previousShapeSettings, currentShapeSettings: null };
                 parent.notify('shape', { prop: 'setKeyHistory', onPropertyChange: false, value: { keyHistory: '' } });
                 parent.clearSelection();
-                if (isBlazor() && parent.events && parent.events.shapeChanging.hasDelegate === true) {
-                    parent.dotNetRef.invokeMethodAsync('ShapeEventAsync', 'OnShape', shapeChangingArgs, null);
-                }
-                else {
-                    parent.trigger('shapeChanging', shapeChangingArgs);
-                    if (!isBlazor()) {
-                        parent.notify('toolbar', { prop: 'refresh-main-toolbar', onPropertyChange: false });
-                    }
-                }
+                parent.trigger('shapeChanging', shapeChangingArgs);
+                parent.notify('toolbar', { prop: 'refresh-main-toolbar', onPropertyChange: false });
                 if (!isNullOrUndefined(prevObj.objColl[prevObj.objColl.length - 1].currIndex)) {
                     parent.notify('undo-redo', { prop: 'updateUndoRedoColl', onPropertyChange: false,
                         value: { operation: 'deleteObj', previousObj: prevObj, previousObjColl: this.tempObjColl,
@@ -13131,6 +12668,11 @@ class Selection {
     updatePrevShapeSettings(obj) {
         const parent = this.parent;
         const fontStyle = [];
+        if (isNullOrUndefined(parent.activeObj.currIndex)) {
+            const shapeIDObj = { id: 'shape_' + (parent.objColl.length + 1) };
+            parent.notify('shape', { prop: 'getNewShapeId', onPropertyChange: false, value: { obj: shapeIDObj } });
+            parent.activeObj.currIndex = shapeIDObj['id'];
+        }
         if (parent.activeObj.shape === 'text' && parent.activeObj.textSettings) {
             if (parent.activeObj.textSettings.bold) {
                 fontStyle.push('bold');
@@ -13262,14 +12804,8 @@ class Selection {
         let width;
         let widthElement;
         let heightElement;
-        if (isBlazor()) {
-            widthElement = elem.querySelector('.e-ie-toolbar-e-resize-width-input .e-textbox');
-            heightElement = elem.querySelector('.e-ie-toolbar-e-resize-height-input .e-textbox');
-        }
-        else {
-            widthElement = elem.querySelector('#' + elem.id + '_resizeWidth');
-            heightElement = elem.querySelector('#' + elem.id + '_resizeHeight');
-        }
+        widthElement = elem.querySelector('#' + elem.id + '_resizeWidth');
+        heightElement = elem.querySelector('#' + elem.id + '_resizeHeight');
         if (widthElement && heightElement) {
             let heightString = heightElement.value.replace(/,/g, '');
             let widthString = widthElement.value.replace(/,/g, '');
@@ -13292,14 +12828,8 @@ class Selection {
         let isValue = true;
         let widthElement;
         let heightElement;
-        if (!isBlazor()) {
-            widthElement = this.parent.element.querySelector('#' + this.parent.element.id + '_resizeWidth');
-            heightElement = this.parent.element.querySelector('#' + this.parent.element.id + '_resizeHeight');
-        }
-        else {
-            widthElement = this.parent.element.querySelector('.e-ie-toolbar-e-resize-width-input .e-textbox');
-            heightElement = this.parent.element.querySelector('.e-ie-toolbar-e-resize-height-input .e-textbox');
-        }
+        widthElement = this.parent.element.querySelector('#' + this.parent.element.id + '_resizeWidth');
+        heightElement = this.parent.element.querySelector('#' + this.parent.element.id + '_resizeHeight');
         if (widthElement && heightElement) {
             if (heightElement.value.replace(/,/g, '') === '' && widthElement.value.replace(/,/g, '') === '') {
                 isValue = false;
@@ -13337,22 +12867,22 @@ class Shape {
         let uploader;
         switch (args.prop) {
             case 'drawEllipse':
-                this.drawEllipse(args.value['x'], args.value['y'], args.value['radiusX'], args.value['radiusY'], args.value['strokeWidth'], args.value['strokeColor'], args.value['fillColor'], args.value['degree']);
+                this.drawEllipse(args.value['x'], args.value['y'], args.value['radiusX'], args.value['radiusY'], args.value['strokeWidth'], args.value['strokeColor'], args.value['fillColor'], args.value['degree'], args.value['isSelected']);
                 break;
             case 'drawLine':
-                this.drawLine(args.value['startX'], args.value['startY'], args.value['endX'], args.value['endY'], args.value['strokeWidth'], args.value['strokeColor']);
+                this.drawLine(args.value['startX'], args.value['startY'], args.value['endX'], args.value['endY'], args.value['strokeWidth'], args.value['strokeColor'], args.value['isSelected']);
                 break;
             case 'drawArrow':
-                this.drawArrow(args.value['startX'], args.value['startY'], args.value['endX'], args.value['endY'], args.value['strokeWidth'], args.value['strokeColor'], args.value['arrowStart'], args.value['arrowEnd']);
+                this.drawArrow(args.value['startX'], args.value['startY'], args.value['endX'], args.value['endY'], args.value['strokeWidth'], args.value['strokeColor'], args.value['arrowStart'], args.value['arrowEnd'], args.value['isSelected']);
                 break;
             case 'drawPath':
-                this.drawPath(args.value['pointColl'], args.value['strokeWidth'], args.value['strokeColor']);
+                this.drawPath(args.value['pointColl'], args.value['strokeWidth'], args.value['strokeColor'], args.value['isSelected']);
                 break;
             case 'drawRectangle':
-                this.drawRectangle(args.value['x'], args.value['y'], args.value['width'], args.value['height'], args.value['strokeWidth'], args.value['strokeColor'], args.value['fillColor'], args.value['degree']);
+                this.drawRectangle(args.value['x'], args.value['y'], args.value['width'], args.value['height'], args.value['strokeWidth'], args.value['strokeColor'], args.value['fillColor'], args.value['degree'], args.value['isSelected']);
                 break;
             case 'drawText':
-                this.drawText(args.value['x'], args.value['y'], args.value['text'], args.value['fontFamily'], args.value['fontSize'], args.value['bold'], args.value['italic'], args.value['color']);
+                this.drawText(args.value['x'], args.value['y'], args.value['text'], args.value['fontFamily'], args.value['fontSize'], args.value['bold'], args.value['italic'], args.value['color'], args.value['isSelected']);
                 break;
             case 'redrawActObj':
                 this.redrawActObj(args.value['x'], args.value['y'], args.value['isMouseDown']);
@@ -13526,7 +13056,7 @@ class Shape {
                 this.getSquarePointForRotatedShape(args.value['obj'], args.value['object']);
                 break;
             case 'drawImage':
-                this.drawImage(args.value['x'], args.value['y'], args.value['width'], args.value['height'], args.value['src'], args.value['degree'], args.value['isAspectRatio'], args.value['opacity']);
+                this.drawImage(args.value['x'], args.value['y'], args.value['width'], args.value['height'], args.value['src'], args.value['degree'], args.value['isAspectRatio'], args.value['opacity'], args.value['isSelected']);
                 break;
             case 'reset':
                 this.reset();
@@ -13588,26 +13118,26 @@ class Shape {
             { text: 'Enter Text', fontFamily: this.parent.fontFamily.default, fontSize: null, fontRatio: null, bold: false, italic: false, underline: false };
         this.strokeSettings = { strokeColor: '#fff', fillColor: '', strokeWidth: null };
     }
-    drawEllipse(x, y, radiusX, radiusY, strokeWidth, strokeColor, fillColor, degree) {
+    drawEllipse(x, y, radiusX, radiusY, strokeWidth, strokeColor, fillColor, degree, isSelected) {
         this.initializeShape('ellipse');
         const start = x && y ? { x: x, y: y } : null;
-        this.drawShape('ellipse', strokeWidth, strokeColor, fillColor, start, radiusX, radiusY, null, null, null, degree);
+        this.drawShape('ellipse', strokeWidth, strokeColor, fillColor, start, radiusX, radiusY, null, null, null, degree, null, isSelected);
     }
-    drawLine(startX, startY, endX, endY, strokeWidth, strokeColor) {
+    drawLine(startX, startY, endX, endY, strokeWidth, strokeColor, isSelected) {
         this.initializeShape('line');
         const start = startX && startY ? { x: startX, y: startY } : null;
         const width = endX - startX;
         const height = endY - startY;
-        this.drawShape('line', strokeWidth, strokeColor, null, start, width, height);
+        this.drawShape('line', strokeWidth, strokeColor, null, start, width, height, null, null, null, null, null, isSelected);
     }
-    drawPath(pointColl, strokeWidth, strokeColor) {
+    drawPath(pointColl, strokeWidth, strokeColor, isSelected) {
         const parent = this.parent;
         this.initializeShape('path');
         if (pointColl) {
-            this.drawShape('path', strokeWidth, strokeColor, null, null, null, null, pointColl);
+            this.drawShape('path', strokeWidth, strokeColor, null, null, null, null, pointColl, null, null, null, null, isSelected);
         }
         else {
-            this.drawShape('line', strokeWidth, strokeColor);
+            this.drawShape('line', strokeWidth, strokeColor, null, null, null, null, null, null, null, null, null, isSelected);
             const obj = extend({}, parent.objColl[parent.objColl.length - 1], null, true);
             obj.shape = 'path';
             obj.lineDraw = null;
@@ -13616,20 +13146,20 @@ class Shape {
             parent.objColl[parent.objColl.length - 1] = obj;
         }
     }
-    drawArrow(startX, startY, endX, endY, strokeWidth, strokeColor, arrowStart, arrowEnd) {
+    drawArrow(startX, startY, endX, endY, strokeWidth, strokeColor, arrowStart, arrowEnd, isSelected) {
         this.initializeShape('arrow');
         const start = startX && startY ? { x: startX, y: startY } : null;
         const width = endX - startX;
         const height = endY - startY;
-        this.drawShape('arrow', strokeWidth, strokeColor, null, start, width, height, null, arrowStart, arrowEnd);
+        this.drawShape('arrow', strokeWidth, strokeColor, null, start, width, height, null, arrowStart, arrowEnd, null, null, isSelected);
     }
-    drawRectangle(x, y, width, height, strokeWidth, strokeColor, fillColor, degree) {
+    drawRectangle(x, y, width, height, strokeWidth, strokeColor, fillColor, degree, isSelected) {
         this.initializeShape('rectangle');
         const start = x && y ? { x: x, y: y } : null;
-        this.drawShape('rectangle', strokeWidth, strokeColor, fillColor, start, width, height, null, null, null, degree);
+        this.drawShape('rectangle', strokeWidth, strokeColor, fillColor, start, width, height, null, null, null, degree, null, isSelected);
     }
-    drawText(x, y, text, fontFamily, fontSize, bold, italic, color) {
-        this.drawShapeText(text, fontFamily, fontSize, bold, italic, color, x, y);
+    drawText(x, y, text, fontFamily, fontSize, bold, italic, color, isSelected) {
+        this.drawShapeText(text, fontFamily, fontSize, bold, italic, color, x, y, isSelected);
     }
     initializeShape(type) {
         const parent = this.parent;
@@ -13667,7 +13197,7 @@ class Shape {
         }
         return arrowType;
     }
-    drawShape(type, strokeWidth, strokeColor, fillColor, start, width, height, pointColl, arrowStart, arrowEnd, degree, opacity) {
+    drawShape(type, strokeWidth, strokeColor, fillColor, start, width, height, pointColl, arrowStart, arrowEnd, degree, opacity, isSelected) {
         const parent = this.parent;
         if (!parent.disabled && parent.isImageLoaded) {
             parent.notify('draw', { prop: 'setImageEdited', onPropertyChange: false });
@@ -13683,11 +13213,9 @@ class Shape {
                 parent.activeObj.pointColl = [];
                 parent.upperCanvas.style.cursor = parent.cursor = 'crosshair';
                 parent.notify('selection', { prop: 'setCurrentDrawingShape', onPropertyChange: false, value: { value: 'path' } });
-                if (!isBlazor()) {
-                    parent.notify('toolbar', { prop: 'refresh-toolbar', onPropertyChange: false, value: { type: 'shapes',
-                            isApplyBtn: null, isCropping: null, isZooming: null, cType: null } });
-                    parent.notify('toolbar', { prop: 'update-toolbar-items', onPropertyChange: false });
-                }
+                parent.notify('toolbar', { prop: 'refresh-toolbar', onPropertyChange: false, value: { type: 'shapes',
+                        isApplyBtn: null, isCropping: null, isZooming: null, cType: null } });
+                parent.notify('toolbar', { prop: 'update-toolbar-items', onPropertyChange: false });
             }
             else {
                 if (type !== 'freehanddraw' && type !== '') {
@@ -13745,50 +13273,24 @@ class Shape {
                     const shapeSettings = obj['shapeSettingsObj'];
                     const shapeChangingArgs = { cancel: false, action: 'insert', 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, null).then((shapeChangingArgs) => {
-                            this.updateShapeChangeEventArgs(shapeChangingArgs.currentShapeSettings);
-                            this.setDimension(width, height);
-                            parent.notify('draw', { prop: 'drawObject', onPropertyChange: false, value: { canvas: 'duplicate' } });
-                            if (degree) {
-                                parent.activeObj.rotatedAngle = degree * (Math.PI / 180);
-                                parent.notify('selection', { prop: 'updPtCollForShpRot', onPropertyChange: false, value: { obj: parent.activeObj } });
-                            }
-                            parent.updateToolbar(parent.element, 'quickAccessToolbar', 'shape');
-                            parent.notify('selection', { prop: 'isShapeInserted', onPropertyChange: false, value: { bool: true } });
-                            parent.notify('undo-redo', { prop: 'updateUrObj', onPropertyChange: false, value: { objColl: objColl } });
-                            if (parent.isPublicMethod) {
-                                parent.notify('undo-redo', { prop: 'updateUndoRedo', value: { operation: 'shapeInsert' }, onPropertyChange: false });
-                            }
-                            parent.isPublicMethod = false;
-                        });
+                    parent.trigger('shapeChanging', shapeChangingArgs);
+                    this.updateShapeChangeEventArgs(shapeChangingArgs.currentShapeSettings);
+                    this.setDimension(width, height);
+                    parent.notify('draw', { prop: 'drawObject', onPropertyChange: false, value: { canvas: 'duplicate' } });
+                    if (degree) {
+                        parent.activeObj.rotatedAngle = degree * (Math.PI / 180);
+                        parent.notify('selection', { prop: 'updPtCollForShpRot', onPropertyChange: false, value: { obj: parent.activeObj } });
                     }
-                    else {
-                        parent.trigger('shapeChanging', shapeChangingArgs);
-                        this.updateShapeChangeEventArgs(shapeChangingArgs.currentShapeSettings);
-                        this.setDimension(width, height);
-                        parent.notify('draw', { prop: 'drawObject', onPropertyChange: false, value: { canvas: 'duplicate' } });
-                        if (degree) {
-                            parent.activeObj.rotatedAngle = degree * (Math.PI / 180);
-                            parent.notify('selection', { prop: 'updPtCollForShpRot', onPropertyChange: false, value: { obj: parent.activeObj } });
-                        }
-                        if (!isBlazor()) {
-                            parent.notify('toolbar', { prop: 'renderQAT', onPropertyChange: false, value: { isPenEdit: null } });
-                        }
-                        else {
-                            parent.updateToolbar(parent.element, 'quickAccessToolbar', 'shape');
-                        }
-                        parent.notify('selection', { prop: 'isShapeInserted', onPropertyChange: false, value: { bool: true } });
-                        parent.notify('undo-redo', { prop: 'updateUrObj', onPropertyChange: false, value: { objColl: objColl } });
-                        parent.notify('toolbar', { prop: 'refresh-toolbar', onPropertyChange: false, value: { type: 'shapes',
-                                isApplyBtn: null, isCropping: null, isZooming: null, cType: null } });
-                        parent.notify('toolbar', { prop: 'update-toolbar-items', onPropertyChange: false });
-                        if (parent.isPublicMethod) {
-                            parent.notify('undo-redo', { prop: 'updateUndoRedo', value: { operation: 'shapeInsert' }, onPropertyChange: false });
-                        }
-                        parent.isPublicMethod = false;
+                    parent.notify('toolbar', { prop: 'renderQAT', onPropertyChange: false, value: { isPenEdit: null } });
+                    parent.notify('selection', { prop: 'isShapeInserted', onPropertyChange: false, value: { bool: true } });
+                    parent.notify('undo-redo', { prop: 'updateUrObj', onPropertyChange: false, value: { objColl: objColl } });
+                    parent.notify('toolbar', { prop: 'refresh-toolbar', onPropertyChange: false, value: { type: 'shapes',
+                            isApplyBtn: null, isCropping: null, isZooming: null, cType: null } });
+                    parent.notify('toolbar', { prop: 'update-toolbar-items', onPropertyChange: false });
+                    if (parent.isPublicMethod && !isSelected) {
+                        parent.notify('undo-redo', { prop: 'updateUndoRedo', value: { operation: 'shapeInsert' }, onPropertyChange: false });
                     }
+                    parent.isPublicMethod = false;
                 }
             }
         }
@@ -13829,7 +13331,7 @@ class Shape {
             value: { obj: selPointCollObj } });
         this.prevObj.selPointColl = extend([], selPointCollObj['selPointColl'], [], true);
     }
-    drawShapeText(text, fontFamily, fontSize, bold, italic, strokeColor, x, y) {
+    drawShapeText(text, fontFamily, fontSize, bold, italic, strokeColor, x, y, isSelected) {
         const parent = this.parent;
         if (!parent.disabled && parent.isImageLoaded) {
             if (parent.currObjType.shape === 'freehanddraw') {
@@ -13877,24 +13379,12 @@ class Shape {
             const shapeSettings = obj['shapeSettingsObj'];
             const shapeChangingArgs = { cancel: false, action: 'insert', 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, null).then((shapeChangingArgs) => {
-                    this.drawShapeTextEvent(shapeChangingArgs);
-                    if (parent.isPublicMethod) {
-                        parent.notify('undo-redo', { prop: 'updateUndoRedo', value: { operation: 'shapeInsert' }, onPropertyChange: false });
-                    }
-                    parent.isPublicMethod = false;
-                });
-            }
-            else {
-                parent.trigger('shapeChanging', shapeChangingArgs);
-                this.drawShapeTextEvent(shapeChangingArgs);
-                if (parent.isPublicMethod) {
-                    parent.notify('undo-redo', { prop: 'updateUndoRedo', value: { operation: 'shapeInsert' }, onPropertyChange: false });
-                }
-                parent.isPublicMethod = false;
+            parent.trigger('shapeChanging', shapeChangingArgs);
+            this.drawShapeTextEvent(shapeChangingArgs);
+            if (parent.isPublicMethod && !isSelected) {
+                parent.notify('undo-redo', { prop: 'updateUndoRedo', value: { operation: 'shapeInsert' }, onPropertyChange: false });
             }
+            parent.isPublicMethod = false;
         }
     }
     drawShapeImageEvent(shapeChangingArgs, isSelect) {
@@ -13910,16 +13400,10 @@ class Shape {
         parent.notify('selection', { prop: 'redrawShape', onPropertyChange: false,
             value: { obj: parent.objColl[parent.objColl.length - 1] } });
         if (isSelect) {
-            if (!isBlazor()) {
-                parent.notify('toolbar', { prop: 'refresh-toolbar', onPropertyChange: false, value: { type: 'shapes',
-                        isApplyBtn: null, isCropping: null, isZooming: null, cType: null } });
-                parent.notify('toolbar', { prop: 'update-toolbar-items', onPropertyChange: false });
-                parent.notify('toolbar', { prop: 'renderQAT', onPropertyChange: false, value: { isPenEdit: null } });
-            }
-            else {
-                parent.updateToolbar(parent.element, parent.activeObj.shape);
-                parent.updateToolbar(parent.element, 'quickAccessToolbar', parent.activeObj.shape);
-            }
+            parent.notify('toolbar', { prop: 'refresh-toolbar', onPropertyChange: false, value: { type: 'shapes',
+                    isApplyBtn: null, isCropping: null, isZooming: null, cType: null } });
+            parent.notify('toolbar', { prop: 'update-toolbar-items', onPropertyChange: false });
+            parent.notify('toolbar', { prop: 'renderQAT', onPropertyChange: false, value: { isPenEdit: null } });
         }
         else {
             parent.okBtn();
@@ -13940,22 +13424,11 @@ class Shape {
                 previousCropObj: prevCropObj, previousText: null, currentText: null, previousFilter: null, isCircleCrop: null } });
         parent.notify('selection', { prop: 'redrawShape', onPropertyChange: false,
             value: { obj: parent.objColl[parent.objColl.length - 1] } });
-        if (isBlazor()) {
-            parent.updateToolbar(parent.element, 'quickAccessToolbar', 'text');
-        }
-        else {
-            parent.notify('toolbar', { prop: 'renderQAT', onPropertyChange: false, value: { isPenEdit: null } });
-        }
+        parent.notify('toolbar', { prop: 'renderQAT', onPropertyChange: false, value: { isPenEdit: null } });
         parent.notify('selection', { prop: 'isShapeInserted', onPropertyChange: false, value: { bool: true } });
-        if (isBlazor()) {
-            parent.updateToolbar(parent.element, 'text');
-            parent.getFontSizes();
-        }
-        else {
-            parent.notify('toolbar', { prop: 'refresh-toolbar', onPropertyChange: false, value: { type: 'text',
-                    isApplyBtn: null, isCropping: null, isZooming: null, cType: null } });
-            parent.notify('toolbar', { prop: 'update-toolbar-items', onPropertyChange: false });
-        }
+        parent.notify('toolbar', { prop: 'refresh-toolbar', onPropertyChange: false, value: { type: 'text',
+                isApplyBtn: null, isCropping: null, isZooming: null, cType: null } });
+        parent.notify('toolbar', { prop: 'update-toolbar-items', onPropertyChange: false });
     }
     initializeTextShape(text, fontFamily, fontSize, bold, italic, strokeColor) {
         const parent = this.parent;
@@ -13974,9 +13447,9 @@ class Shape {
         parent.activeObj.textSettings.bold = bold || parent.activeObj.textSettings.bold;
         parent.activeObj.textSettings.italic = italic || parent.activeObj.textSettings.italic;
     }
-    drawImage(x, y, width, height, src, degree, isAspectRatio, opacity) {
+    drawImage(x, y, width, height, src, degree, isAspectRatio, opacity, isSelected) {
         this.initializeShape('image');
-        this.onLoadImgShape(x, y, width, height, src, null, degree, isAspectRatio, opacity);
+        this.onLoadImgShape(x, y, width, height, src, null, degree, isAspectRatio, opacity, isSelected);
     }
     redrawActObj(x, y, isMouseDown) {
         let splitWords;
@@ -14107,15 +13580,10 @@ class Shape {
             }
             switch (parent.activeObj.shape) {
                 case 'ellipse':
-                    if (isBlazor()) {
-                        parent.activeObj.activePoint.width = shapeSettings.radius;
-                    }
-                    else {
-                        parent.activeObj.activePoint.width = shapeSettings.radiusX * 2;
-                        parent.activeObj.activePoint.height = shapeSettings.radiusY * 2;
-                        parent.activeObj.activePoint.endX = parent.activeObj.activePoint.startX + parent.activeObj.activePoint.width;
-                        parent.activeObj.activePoint.endY = parent.activeObj.activePoint.startY + parent.activeObj.activePoint.height;
-                    }
+                    parent.activeObj.activePoint.width = shapeSettings.radiusX * 2;
+                    parent.activeObj.activePoint.height = shapeSettings.radiusY * 2;
+                    parent.activeObj.activePoint.endX = parent.activeObj.activePoint.startX + parent.activeObj.activePoint.width;
+                    parent.activeObj.activePoint.endY = parent.activeObj.activePoint.startY + parent.activeObj.activePoint.height;
                     if (shapeSettings.degree) {
                         parent.activeObj.rotatedAngle = shapeSettings.degree * (Math.PI / 180);
                     }
@@ -14123,15 +13591,13 @@ class Shape {
                 case 'line':
                 case 'arrow':
                     parent.activeObj.activePoint.width = shapeSettings.length;
-                    if (!isBlazor()) {
-                        parent.activeObj.activePoint.endX = shapeSettings.endX;
-                        parent.activeObj.activePoint.endY = shapeSettings.endY;
-                        parent.activeObj.activePoint.width = parent.activeObj.activePoint.startX + parent.activeObj.activePoint.width;
-                        parent.activeObj.activePoint.height = parent.activeObj.activePoint.startY + parent.activeObj.activePoint.height;
-                        if (parent.activeObj.shape === 'arrow') {
-                            parent.activeObj.start = this.getArrowType(shapeSettings.arrowHead);
-                            parent.activeObj.end = this.getArrowType(shapeSettings.arrowTail);
-                        }
+                    parent.activeObj.activePoint.endX = shapeSettings.endX;
+                    parent.activeObj.activePoint.endY = shapeSettings.endY;
+                    parent.activeObj.activePoint.width = parent.activeObj.activePoint.startX + parent.activeObj.activePoint.width;
+                    parent.activeObj.activePoint.height = parent.activeObj.activePoint.startY + parent.activeObj.activePoint.height;
+                    if (parent.activeObj.shape === 'arrow') {
+                        parent.activeObj.start = this.getArrowType(shapeSettings.arrowHead);
+                        parent.activeObj.end = this.getArrowType(shapeSettings.arrowTail);
                     }
                     break;
                 case 'text':
@@ -14155,6 +13621,9 @@ class Shape {
                     break;
             }
             if (parent.activeObj.shape === 'text' && parent.activeObj.textSettings) {
+                parent.activeObj.textSettings.bold = false;
+                parent.activeObj.textSettings.italic = false;
+                parent.activeObj.textSettings.underline = false;
                 for (let i = 0; i < shapeSettings.fontStyle.length; i++) {
                     switch (shapeSettings.fontStyle[i]) {
                         case 'bold':
@@ -14873,12 +14342,7 @@ class Shape {
         const parent = this.parent;
         const degree = this.getRotDegOfShape(parent.activeObj);
         this.transformTextArea();
-        if (isBlazor()) {
-            parent.updateToolbar(parent.element, 'destroyQuickAccessToolbar');
-        }
-        else {
-            parent.notify('toolbar', { prop: 'destroy-qa-toolbar', onPropertyChange: false });
-        }
+        parent.notify('toolbar', { prop: 'destroy-qa-toolbar', onPropertyChange: false });
         const dupElem = parent.element.querySelector('#' + parent.element.id + '_duplicate');
         const removeElem = parent.element.querySelector('#' + parent.element.id + '_remove');
         const editTextElem = parent.element.querySelector('#' + parent.element.id + '_editText');
@@ -15191,12 +14655,7 @@ class Shape {
                 if (parent.objColl[parent.objColl.length - 1]) {
                     parent.selectShape(parent.objColl[parent.objColl.length - 1].currIndex);
                 }
-                if (!isBlazor()) {
-                    parent.notify('toolbar', { prop: 'renderQAT', onPropertyChange: false, value: { isPenEdit: null } });
-                }
-                else {
-                    parent.updateToolbar(parent.element, 'quickAccessToolbar', parent.activeObj.shape);
-                }
+                parent.notify('toolbar', { prop: 'renderQAT', onPropertyChange: false, value: { isPenEdit: null } });
                 const obj = { shapeSettingsObj: {} };
                 parent.notify('selection', { prop: 'updatePrevShapeSettings', onPropertyChange: false, value: { obj: obj } });
                 const shapeSettings = obj['shapeSettingsObj'];
@@ -15242,16 +14701,11 @@ class Shape {
             parent.notify('selection', { prop: 'setTouchEndPoint', onPropertyChange: false,
                 value: { x: e.touches[0].clientX, y: e.touches[0].clientY } });
         }
-        if (!isBlazor()) {
-            parent.notify('toolbar', { prop: 'setPreventZoomBtn', onPropertyChange: false, value: { isPrevent: true } });
-            parent.notify('toolbar', { prop: 'refresh-toolbar', onPropertyChange: false, value: { type: 'text',
-                    isApplyBtn: null, isCropping: null, isZooming: null, cType: null } });
-            parent.notify('toolbar', { prop: 'setPreventZoomBtn', onPropertyChange: false, value: { isPrevent: false } });
-            parent.notify('toolbar', { prop: 'update-toolbar-items', onPropertyChange: false });
-        }
-        else {
-            parent.updateToolbar(parent.element, 'enableDisableToolbarBtn', 'textAreaClicked');
-        }
+        parent.notify('toolbar', { prop: 'setPreventZoomBtn', onPropertyChange: false, value: { isPrevent: true } });
+        parent.notify('toolbar', { prop: 'refresh-toolbar', onPropertyChange: false, value: { type: 'text',
+                isApplyBtn: null, isCropping: null, isZooming: null, cType: null } });
+        parent.notify('toolbar', { prop: 'setPreventZoomBtn', onPropertyChange: false, value: { isPrevent: false } });
+        parent.notify('toolbar', { prop: 'update-toolbar-items', onPropertyChange: false });
         if (!isNullOrUndefined(x) && !isNullOrUndefined(y)) {
             const bbox = parent.lowerCanvas.getBoundingClientRect();
             x -= bbox.left;
@@ -15441,11 +14895,9 @@ class Shape {
         const URL = window.URL;
         const url = URL.createObjectURL(e.target.files[0]);
         this.onLoadImgShape(null, null, null, null, url.toString(), true);
-        if (!isBlazor()) {
-            document.getElementById(this.parent.element.id + '_fileUpload').value = '';
-        }
+        document.getElementById(this.parent.element.id + '_fileUpload').value = '';
     }
-    onLoadImgShape(x, y, width, height, url, isSelect, degree, isAspectRatio, opacity) {
+    onLoadImgShape(x, y, width, height, url, isSelect, degree, isAspectRatio, opacity, isSelected) {
         // eslint-disable-next-line @typescript-eslint/no-this-alias
         const proxy = this;
         const parent = this.parent;
@@ -15463,10 +14915,10 @@ class Shape {
         this.initShapeProps();
         this.shapeImg.onload = () => {
             proxy.upperContext.drawImage(proxy.shapeImg, 0, 0, proxy.shapeImg.width, proxy.shapeImg.height);
-            proxy.updateImgCanvas(isSelect, x, y, width, height, degree, isAspectRatio, opacity);
+            proxy.updateImgCanvas(isSelect, x, y, width, height, degree, isAspectRatio, opacity, isSelected);
         };
     }
-    updateImgCanvas(isSelect, x, y, width, height, degree, isAspectRatio, opacity) {
+    updateImgCanvas(isSelect, x, y, width, height, degree, isAspectRatio, opacity, isSelected) {
         const parent = this.parent;
         parent.activeObj.imageElement = this.shapeImg;
         parent.activeObj.imageCanvas = parent.createElement('canvas');
@@ -15515,24 +14967,12 @@ class Shape {
         const shapeSettings = obj['shapeSettingsObj'];
         const shapeChangingArgs = { cancel: false, action: 'insert', 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, null).then((shapeChangingArgs) => {
-                this.drawShapeImageEvent(shapeChangingArgs, isSelect);
-                if (parent.isPublicMethod) {
-                    parent.notify('undo-redo', { prop: 'updateUndoRedo', onPropertyChange: false });
-                }
-                parent.isPublicMethod = false;
-            });
-        }
-        else {
-            parent.trigger('shapeChanging', shapeChangingArgs);
-            this.drawShapeImageEvent(shapeChangingArgs, isSelect);
-            if (parent.isPublicMethod) {
-                parent.notify('undo-redo', { prop: 'updateUndoRedo', onPropertyChange: false });
-            }
-            parent.isPublicMethod = false;
+        parent.trigger('shapeChanging', shapeChangingArgs);
+        this.drawShapeImageEvent(shapeChangingArgs, isSelect);
+        if (parent.isPublicMethod && !isSelected) {
+            parent.notify('undo-redo', { prop: 'updateUndoRedo', onPropertyChange: false });
         }
+        parent.isPublicMethod = false;
     }
     updateObj(dimObj, x, y) {
         const parent = this.parent;
@@ -15839,7 +15279,7 @@ class Shape {
         }
         const shapeChangedArgs = { action: 'font-style', currentShapeSettings: extend({}, shapeSettings, {}, true) };
         shapeChangedArgs.currentShapeSettings.fontStyle = [item];
-        parent.triggerShapeChanged(shapeChangedArgs);
+        parent.trigger('shapeChange', shapeChangedArgs);
     }
     updateFontStyle(item, objColl, fontWeight, fontStyle) {
         const parent = this.parent;
@@ -16064,12 +15504,7 @@ class Shape {
                         parent.notify('crop', { prop: 'cropCircle', onPropertyChange: false,
                             value: { context: this.lowerContext, isSave: null, isFlip: null } });
                     }
-                    if (!isBlazor()) {
-                        parent.notify('toolbar', { prop: 'destroy-qa-toolbar', onPropertyChange: false });
-                    }
-                    else {
-                        parent.updateToolbar(parent.element, 'destroyQuickAccessToolbar');
-                    }
+                    parent.notify('toolbar', { prop: 'destroy-qa-toolbar', onPropertyChange: false });
                     if (isNullOrUndefined(isMouseDown)) {
                         parent.notify('undo-redo', { prop: 'updateCurrUrc', value: { type: 'ok' } });
                         parent.notify('draw', { prop: 'setPrevActObj', onPropertyChange: false, value: { prevActObj: null } });
@@ -16235,13 +15670,6 @@ class Shape {
                 shapeDetails.height = obj.activePoint.height;
                 shapeDetails.opacity = obj.opacity;
                 break;
-            case 'image':
-                shapeDetails.imageData = obj.imageCanvas.toDataURL();
-                shapeDetails.degree = obj.rotatedAngle * (180 / Math.PI);
-                shapeDetails.width = obj.activePoint.width;
-                shapeDetails.height = obj.activePoint.height;
-                shapeDetails.opacity = obj.opacity;
-                break;
         }
         return shapeDetails;
     }
@@ -16259,7 +15687,12 @@ class Shape {
         const parent = this.parent;
         let shapeDetails;
         if (!parent.disabled && parent.isImageLoaded) {
-            this.applyActObj();
+            if (parent.textArea.style.display !== 'none') {
+                parent.okBtn();
+            }
+            else {
+                this.applyActObj(true);
+            }
             if (id.split('_')[0] === 'shape') {
                 let obj;
                 for (let i = 0, len = parent.objColl.length; i < len; i++) {
@@ -16280,7 +15713,12 @@ class Shape {
         const parent = this.parent;
         const shapeDetailsColl = [];
         if (!parent.disabled && parent.isImageLoaded) {
-            this.applyActObj();
+            if (parent.textArea.style.display !== 'none') {
+                parent.okBtn();
+            }
+            else {
+                this.applyActObj(true);
+            }
             for (let i = 0, len = parent.objColl.length; i < len; i++) {
                 const shapeDetails = this.getObjDetails(parent.objColl[i]);
                 shapeDetailsColl.push(shapeDetails);
@@ -16430,31 +15868,20 @@ class Shape {
                     this.lowerContext.filter = object['canvasFilter'];
                     parent.notify('selection', { prop: 'redrawShape', onPropertyChange: false,
                         value: { obj: parent.activeObj } });
-                    if (!isBlazor()) {
-                        if (parent.activeObj.shape === 'text') {
-                            parent.notify('toolbar', { prop: 'refresh-toolbar', onPropertyChange: false, value: { type: 'text',
-                                    isApplyBtn: null, isCropping: null, isZooming: null, cType: null } });
-                        }
-                        else if (parent.activeObj.shape === 'pen') {
-                            parent.notify('toolbar', { prop: 'refresh-toolbar', onPropertyChange: false, value: { type: 'pen',
-                                    isApplyBtn: null, isCropping: null, isZooming: null, cType: null } });
-                        }
-                        else {
-                            parent.notify('toolbar', { prop: 'refresh-toolbar', onPropertyChange: false, value: { type: 'shapes',
-                                    isApplyBtn: null, isCropping: null, isZooming: null, cType: null } });
-                        }
-                        parent.notify('toolbar', { prop: 'update-toolbar-items', onPropertyChange: false });
-                        parent.notify('toolbar', { prop: 'renderQAT', onPropertyChange: false, value: { isPenEdit: null } });
+                    if (parent.activeObj.shape === 'text') {
+                        parent.notify('toolbar', { prop: 'refresh-toolbar', onPropertyChange: false, value: { type: 'text',
+                                isApplyBtn: null, isCropping: null, isZooming: null, cType: null } });
+                    }
+                    else if (parent.activeObj.shape === 'pen') {
+                        parent.notify('toolbar', { prop: 'refresh-toolbar', onPropertyChange: false, value: { type: 'pen',
+                                isApplyBtn: null, isCropping: null, isZooming: null, cType: null } });
                     }
                     else {
-                        parent.updateToolbar(parent.element, parent.activeObj.shape);
-                        if (parent.activeObj.shape === 'path') {
-                            parent.updateToolbar(parent.element, 'path', 'pathQuickAccessToolbar');
-                        }
-                        else {
-                            parent.updateToolbar(parent.element, 'quickAccessToolbar', parent.activeObj.shape);
-                        }
+                        parent.notify('toolbar', { prop: 'refresh-toolbar', onPropertyChange: false, value: { type: 'shapes',
+                                isApplyBtn: null, isCropping: null, isZooming: null, cType: null } });
                     }
+                    parent.notify('toolbar', { prop: 'update-toolbar-items', onPropertyChange: false });
+                    parent.notify('toolbar', { prop: 'renderQAT', onPropertyChange: false, value: { isPenEdit: null } });
                 }
             }
             else if (id.split('_')[0] === 'pen') {
@@ -16468,14 +15895,8 @@ class Shape {
                 if (obj['isIndex']) {
                     isSelected = true;
                     parent.notify('freehand-draw', { prop: 'selectFhd', value: { id: id } });
-                    if (isBlazor()) {
-                        parent.updateToolbar(parent.element, 'pen');
-                        parent.updateToolbar(parent.element, 'quickAccessToolbar', 'pen');
-                    }
-                    else {
-                        parent.notify('toolbar', { prop: 'renderQAT', onPropertyChange: false, value: { isPenEdit: true } });
-                        parent.notify('toolbar', { prop: 'update-toolbar-items', onPropertyChange: false });
-                    }
+                    parent.notify('toolbar', { prop: 'renderQAT', onPropertyChange: false, value: { isPenEdit: true } });
+                    parent.notify('toolbar', { prop: 'update-toolbar-items', onPropertyChange: false });
                 }
                 else {
                     isSelected = false;
@@ -16487,29 +15908,29 @@ class Shape {
     deleteShape(id) {
         const parent = this.parent;
         if (!parent.disabled && parent.isImageLoaded) {
-            this.applyActObj();
-            if (id.split('_')[0] === 'shape') {
-                for (let i = 0, len = parent.objColl.length; i < len; i++) {
-                    if (parent.objColl[i].currIndex === id) {
-                        parent.objColl.splice(i, 1);
-                        break;
+            if (parent.activeObj.currIndex && parent.activeObj.currIndex === id) {
+                parent.notify('selection', { prop: 'deleteItem', onPropertyChange: false });
+            }
+            else {
+                this.applyActObj();
+                if (id.split('_')[0] === 'shape') {
+                    for (let i = 0, len = parent.objColl.length; i < len; i++) {
+                        if (parent.objColl[i].currIndex === id) {
+                            parent.objColl.splice(i, 1);
+                            break;
+                        }
                     }
                 }
-            }
-            else if (id.split('_')[0] === 'pen') {
-                parent.notify('freehand-draw', { prop: 'handle-freehand-draw', value: { id: id } });
+                else if (id.split('_')[0] === 'pen') {
+                    parent.notify('freehand-draw', { prop: 'handle-freehand-draw', value: { id: id } });
+                }
             }
             const object = { canvasFilter: null };
             parent.notify('toolbar', { prop: 'getCanvasFilter', onPropertyChange: false, value: { obj: object } });
             this.lowerContext.filter = object['canvasFilter'];
             this.lowerContext.clearRect(0, 0, parent.lowerCanvas.width, parent.lowerCanvas.height);
             parent.notify('draw', { prop: 'redrawImgWithObj', onPropertyChange: false });
-            if (!isBlazor()) {
-                parent.notify('toolbar', { prop: 'refresh-main-toolbar', onPropertyChange: false });
-            }
-            else {
-                parent.updateToolbar(parent.element, 'imageLoaded');
-            }
+            parent.notify('toolbar', { prop: 'refresh-main-toolbar', onPropertyChange: false });
         }
     }
     getMaxText(isTextBox, text, obj) {
@@ -16960,18 +16381,10 @@ class Transform {
         const parent = this.parent;
         const transitionArgs = { cancel: false, previousDegree: parent.transform.degree,
             currentDegree: Math.abs(parent.transform.degree + degree) === 360 ? 0 : parent.transform.degree + degree };
-        if (!this.isPreventSelect && isBlazor() && parent.events && parent.events.rotating.hasDelegate === true) {
-            /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
-            parent.dotNetRef.invokeMethodAsync('RotateEventAsync', 'OnRotate', transitionArgs, null).then((args) => {
-                this.rotateEvent(args, degree);
-            });
-        }
-        else {
-            if (!this.isPreventSelect) {
-                parent.trigger('rotating', transitionArgs);
-            }
-            this.rotateEvent(transitionArgs, degree);
+        if (!this.isPreventSelect) {
+            parent.trigger('rotating', transitionArgs);
         }
+        this.rotateEvent(transitionArgs, degree);
     }
     rotateEvent(transitionArgs, degree) {
         const parent = this.parent;
@@ -17033,16 +16446,6 @@ class Transform {
                 parent.setProperties({ zoomSettings: { zoomFactor: 1 } }, true);
                 this.prevZoomValue = parent.zoomSettings.zoomFactor;
             }
-            transitionArgs = { previousDegree: transitionArgs.previousDegree, currentDegree: transitionArgs.currentDegree };
-            if (!this.isPreventSelect && isBlazor() && parent.events && parent.events.rotated.hasDelegate === true) {
-                const rotatedArgs = { degree: transitionArgs.currentDegree };
-                parent.dotNetRef.invokeMethodAsync('RotateEventAsync', 'Rotated', null, rotatedArgs);
-            }
-            else if (!this.isPreventSelect) { }
-            if (isBlazor() && parent.events && parent.events.rotating.hasDelegate === true) {
-                parent.notify('draw', { prop: 'resetStraightenDestPoints' });
-                parent.notify('draw', { prop: 'setDestForStraighten' });
-            }
         }
         else {
             parent.notify('draw', { prop: 'setCurrentObj', onPropertyChange: false, value: { obj: parent.prevEventObjPoint } });
@@ -17149,18 +16552,10 @@ class Transform {
         const parent = this.parent;
         const transitionArgs = { direction: direction, cancel: false,
             previousDirection: parent.toPascalCase(parent.transform.currFlipState || direction) };
-        if (!this.isPreventSelect && isBlazor() && parent.events && parent.events.flipping.hasDelegate === true) {
-            /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
-            parent.dotNetRef.invokeMethodAsync('FlipEventAsync', 'OnFlip', transitionArgs, null).then((args) => {
-                this.flipEvent(args, direction);
-            });
-        }
-        else {
-            if (!this.isPreventSelect) {
-                parent.trigger('flipping', transitionArgs);
-            }
-            this.flipEvent(transitionArgs, direction);
+        if (!this.isPreventSelect) {
+            parent.trigger('flipping', transitionArgs);
         }
+        this.flipEvent(transitionArgs, direction);
     }
     flipEvent(transitionArgs, direction) {
         const parent = this.parent;
@@ -17306,12 +16701,6 @@ class Transform {
             parent.setProperties({ zoomSettings: { zoomFactor: 1 } }, true);
             this.prevZoomValue = parent.zoomSettings.zoomFactor;
         }
-        transitionArgs = { previousDirection: transitionArgs.previousDirection, direction: transitionArgs.direction };
-        if (!this.isPreventSelect && isBlazor() && parent.events && parent.events.flipped.hasDelegate === true) {
-            const flipped = { direction: transitionArgs.direction };
-            parent.dotNetRef.invokeMethodAsync('FlipEventAsync', 'Flipped', null, flipped);
-        }
-        else { }
     }
     updateFlipState(direction) {
         const degree = this.parent.transform.degree;
@@ -17390,9 +16779,7 @@ class Transform {
             if (isNullOrUndefined(isResize) && (parent.zoomSettings.zoomFactor >= parent.zoomSettings.maxZoomFactor && zoomFactor > 0 ||
                 (parent.zoomSettings.zoomFactor > parent.zoomSettings.minZoomFactor && zoomFactor < 0 && this.disableZoomOutBtn(true)) ||
                 (parent.zoomSettings.zoomFactor <= parent.zoomSettings.minZoomFactor && zoomFactor < 0))) {
-                if (!isBlazor()) {
-                    parent.notify('toolbar', { prop: 'zoom-up-handler', onPropertyChange: false });
-                }
+                parent.notify('toolbar', { prop: 'zoom-up-handler', onPropertyChange: false });
                 return;
             }
             parent.notify('draw', { prop: 'setImageEdited', onPropertyChange: false });
@@ -17448,31 +16835,10 @@ class Transform {
             const previousZoomFactor = parent.zoomSettings.zoomFactor - (zoomFactor * 10);
             const zoomEventArgs = { zoomPoint: zoomPoint, cancel: false, previousZoomFactor: previousZoomFactor,
                 currentZoomFactor: parent.zoomSettings.zoomFactor, zoomTrigger: obj['zoomType'] };
-            if (!parent.isCropToolbar && isBlazor() && parent.isZoomBtnClick && parent.events && parent.events.zooming.hasDelegate === true) {
-                zoomEventArgs.zoomTrigger = parseInt(this.getZoomTriggerType(zoomEventArgs.zoomTrigger));
-                /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
-                parent.dotNetRef.invokeMethodAsync('ZoomEventAsync', 'OnZoom', zoomEventArgs, null).then((args) => {
-                    this.zoomEvent(args, zoomFactor, isPreventApply);
-                });
-            }
-            else {
-                if (!parent.isCropToolbar && parent.isZoomBtnClick) {
-                    parent.trigger('zooming', zoomEventArgs);
-                }
-                this.zoomEvent(zoomEventArgs, zoomFactor, isPreventApply);
+            if (!parent.isCropToolbar && parent.isZoomBtnClick) {
+                parent.trigger('zooming', zoomEventArgs);
             }
-        }
-    }
-    getZoomTriggerType(type) {
-        switch (type) {
-            case 'MouseWheel':
-                return '1';
-            case 'Pinch':
-                return '2';
-            case 'Commands':
-                return '4';
-            default:
-                return '8';
+            this.zoomEvent(zoomEventArgs, zoomFactor, isPreventApply);
         }
     }
     zoomEvent(zoomEventArgs, zoomFact, isPreventApply) {
@@ -17482,13 +16848,7 @@ class Transform {
             parent.isZoomBtnClick = false;
             return;
         }
-        if (!isBlazor()) {
-            parent.notify('toolbar', { prop: 'close-contextual-toolbar', onPropertyChange: false });
-            /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
-        }
-        else if ((parent.currentToolbar !== 'resize-toolbar' && parent.currentToolbar !== 'crop-toolbar') && parent.element.querySelector('.e-contextual-toolbar-wrapper') && !parent.element.querySelector('.e-contextual-toolbar-wrapper').classList.contains('e-hidden')) {
-            parent.updateToolbar(parent.element, 'closeContextualToolbar');
-        }
+        parent.notify('toolbar', { prop: 'close-contextual-toolbar', onPropertyChange: false });
         parent.notify('shape', { prop: 'redrawActObj', onPropertyChange: false,
             value: { x: null, y: null, isMouseDown: true } });
         parent.notify('shape', { prop: 'refreshActiveObj', onPropertyChange: false });
@@ -17585,25 +16945,14 @@ class Transform {
         }
         parent.isUndoRedo = false;
         let zoomOut;
-        if (!isBlazor()) {
-            zoomOut = document.querySelector('#' + parent.element.id + '_zoomOut');
-            if (zoomOut && zoomFactor <= minZoomFactor) {
-                zoomOut.classList.add('e-disabled');
-                zoomOut.parentElement.classList.add('e-overlay');
-            }
-            else if (zoomOut) {
-                zoomOut.classList.remove('e-disabled');
-                zoomOut.parentElement.classList.remove('e-overlay');
-            }
+        zoomOut = document.querySelector('#' + parent.element.id + '_zoomOut');
+        if (zoomOut && zoomFactor <= minZoomFactor) {
+            zoomOut.classList.add('e-disabled');
+            zoomOut.parentElement.classList.add('e-overlay');
         }
-        else {
-            zoomOut = parent.element.querySelector('#zoomout');
-            if (zoomOut && zoomFactor <= minZoomFactor) {
-                zoomOut.classList.add('e-overlay');
-            }
-            else if (zoomOut) {
-                zoomOut.classList.remove('e-overlay');
-            }
+        else if (zoomOut) {
+            zoomOut.classList.remove('e-disabled');
+            zoomOut.parentElement.classList.remove('e-overlay');
         }
         this.autoEnablePan();
         if (this.tempActiveObj) {
@@ -17624,26 +16973,13 @@ class Transform {
             parent.objColl.pop();
             parent.notify('draw', { prop: 'drawObject', onPropertyChange: false, value: { canvas: 'duplicate', obj: parent.activeObj, isCropRatio: null,
                     points: null, isPreventDrag: true, saveContext: null, isPreventSelection: null } });
-            if (!isBlazor()) {
-                parent.notify('toolbar', { prop: 'update-toolbar-items', onPropertyChange: false });
-                parent.notify('toolbar', { prop: 'renderQAT', onPropertyChange: false, value: { isPenEdit: null } });
-            }
-        }
-        if (!isBlazor()) {
-            parent.notify('toolbar', { prop: 'enable-disable-btns', onPropertyChange: false });
-        }
-        else {
-            parent.updateToolbar(parent.element, 'enableDisableToolbarBtn');
+            parent.notify('toolbar', { prop: 'update-toolbar-items', onPropertyChange: false });
+            parent.notify('toolbar', { prop: 'renderQAT', onPropertyChange: false, value: { isPenEdit: null } });
         }
+        parent.notify('toolbar', { prop: 'enable-disable-btns', onPropertyChange: false });
         parent.notify('selection', { prop: 'setZoomType', onPropertyChange: false, value: { zoomType: 'Toolbar' } });
         zoomEventArgs = { zoomPoint: zoomEventArgs.zoomPoint, previousZoomFactor: zoomEventArgs.previousZoomFactor, currentZoomFactor: zoomEventArgs.currentZoomFactor, zoomTrigger: zoomEventArgs.zoomTrigger };
-        if (isBlazor() && !parent.isCropToolbar && parent.isZoomBtnClick && parent.events && parent.events.zoomed.hasDelegate === true) {
-            zoomEventArgs.zoomTrigger = typeof zoomEventArgs.zoomTrigger !== 'number' ? parseInt(this.getZoomTriggerType(zoomEventArgs.zoomTrigger)) : zoomEventArgs.zoomTrigger;
-            const zoomedArgs = { zoomPoint: zoomEventArgs.zoomPoint, zoomFactor: zoomEventArgs.currentZoomFactor, zoomTrigger: zoomEventArgs.zoomTrigger };
-            parent.dotNetRef.invokeMethodAsync('ZoomEventAsync', 'Zoomed', null, zoomedArgs);
-            parent.isZoomBtnClick = false;
-        }
-        else if (!parent.isCropToolbar && parent.isZoomBtnClick) {
+        if (!parent.isCropToolbar && parent.isZoomBtnClick) {
             parent.isZoomBtnClick = false;
         }
     }
@@ -17655,12 +16991,7 @@ class Transform {
         if (!isNullOrUndefined(isZoomOut)) {
             parent.transform.zoomFactor -= 0.1;
         }
-        if (isBlazor()) {
-            zoomOut = parent.element.querySelector('#zoomout');
-        }
-        else {
-            zoomOut = parent.element.querySelector('#' + parent.element.id + '_zoomOut');
-        }
+        zoomOut = parent.element.querySelector('#' + parent.element.id + '_zoomOut');
         const destPoints = { destLeft: parent.img.destLeft, destTop: parent.img.destTop,
             destWidth: parent.img.destWidth, destHeight: parent.img.destHeight };
         if (parent.activeObj.shape) {
@@ -17672,23 +17003,13 @@ class Transform {
                         actPoint.startY || parent.img.destLeft + parent.img.destWidth <
                         actPoint.endX || parent.img.destTop + parent.img.destHeight < actPoint.endY
                         || zoomFactor === minZoomFactor) {
-                        if (!isBlazor()) {
-                            zoomOut.classList.add('e-disabled');
-                            zoomOut.parentElement.classList.add('e-overlay');
-                        }
-                        else {
-                            zoomOut.classList.add('e-overlay');
-                        }
+                        zoomOut.classList.add('e-disabled');
+                        zoomOut.parentElement.classList.add('e-overlay');
                         isDisabled = true;
                     }
                     else {
-                        if (!isBlazor()) {
-                            zoomOut.classList.remove('e-disabled');
-                            zoomOut.parentElement.classList.remove('e-overlay');
-                        }
-                        else {
-                            zoomOut.classList.remove('e-overlay');
-                        }
+                        zoomOut.classList.remove('e-disabled');
+                        zoomOut.parentElement.classList.remove('e-overlay');
                         isDisabled = false;
                     }
                 }
@@ -17700,23 +17021,13 @@ class Transform {
                     parent.notify('draw', { prop: 'isLinesIntersect', onPropertyChange: false, value: { obj: obj } });
                     if (obj['isIntersect'] ||
                         zoomFactor === minZoomFactor) {
-                        if (!isBlazor()) {
-                            zoomOut.classList.add('e-disabled');
-                            zoomOut.parentElement.classList.add('e-overlay');
-                        }
-                        else {
-                            zoomOut.classList.add('e-overlay');
-                        }
+                        zoomOut.classList.add('e-disabled');
+                        zoomOut.parentElement.classList.add('e-overlay');
                         isDisabled = true;
                     }
                     else {
-                        if (!isBlazor()) {
-                            zoomOut.classList.remove('e-disabled');
-                            zoomOut.parentElement.classList.remove('e-overlay');
-                        }
-                        else {
-                            zoomOut.classList.remove('e-overlay');
-                        }
+                        zoomOut.classList.remove('e-disabled');
+                        zoomOut.parentElement.classList.remove('e-overlay');
                         isDisabled = false;
                     }
                 }
@@ -17954,18 +17265,8 @@ class Transform {
         const obj = { panDown: null };
         parent.notify('selection', { prop: 'getPanDown', onPropertyChange: false, value: { obj: obj } });
         const panEventArgs = { startPoint: obj['panDown'], endPoint: this.panMove, cancel: false };
-        if (isBlazor() && isNullOrUndefined(parent.eventType) && parent.events && parent.events.onPanStart.hasDelegate === true) {
-            parent.eventType = 'pan';
-            parent.panEventArgs = panEventArgs;
-            /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
-            parent.dotNetRef.invokeMethodAsync('PanEventAsync', 'OnPanStart', panEventArgs).then((args) => {
-                this.panEvent(args, xDiff, yDiff);
-            });
-        }
-        else {
-            parent.trigger('panning', panEventArgs);
-            this.panEvent(panEventArgs, xDiff, yDiff);
-        }
+        parent.trigger('panning', panEventArgs);
+        this.panEvent(panEventArgs, xDiff, yDiff);
     }
     panEvent(panEventArgs, xDiff, yDiff) {
         if (panEventArgs.cancel) {
@@ -18416,44 +17717,25 @@ class Transform {
             }
             const frameObj = { bool: null };
             parent.notify('toolbar', { prop: 'getFrameToolbar', onPropertyChange: false, value: { obj: frameObj } });
-            /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
-            if (frameObj['bool'] || (isBlazor() && parent.currentToolbar === 'frame-toolbar')) {
-                isFrameToolbar = true;
-            }
             if (!straightenObj['bool'] && ((ctToolbar && !ctToolbar.parentElement.classList.contains('e-hide')) ||
                 (hdWrapper && !hdWrapper.parentElement.classList.contains('e-hide')))) {
                 ctWrapper.classList.add('e-hide');
                 if (!isCropSelection) {
                     parent.okBtn();
                 }
-                if (!isBlazor()) {
-                    parent.notify('toolbar', { prop: 'refresh-main-toolbar', onPropertyChange: false });
-                    parent.notify('toolbar', { prop: 'destroy-qa-toolbar', onPropertyChange: false });
-                }
-                else {
-                    parent.updateToolbar(parent.element, 'imageLoaded');
-                }
+                parent.notify('toolbar', { prop: 'refresh-main-toolbar', onPropertyChange: false });
+                parent.notify('toolbar', { prop: 'destroy-qa-toolbar', onPropertyChange: false });
             }
             parent.notify('selection', { prop: 'getFreehandDrawEditing', onPropertyChange: false, value: { obj: freehandObj } });
             if (freehandObj['bool']) {
-                if (!isBlazor()) {
-                    parent.notify('toolbar', { prop: 'destroy-qa-toolbar', onPropertyChange: false });
-                }
-                else {
-                    parent.updateToolbar(parent.element, 'destroyQuickAccessToolbar');
-                }
+                parent.notify('toolbar', { prop: 'destroy-qa-toolbar', onPropertyChange: false });
             }
             if (parent.activeObj.shape !== undefined) {
                 isActiveObj = true;
                 if (parent.textArea.style.display === 'block' || parent.textArea.style.display === 'inline-block') {
                     parent.notify('shape', { prop: 'redrawActObj', onPropertyChange: false,
                         value: { x: null, y: null, isMouseDown: null } });
-                    if (isBlazor()) {
-                        parent.updateToolbar(parent.element, 'destroyQuickAccessToolbar');
-                    }
-                    else {
-                        parent.notify('toolbar', { prop: 'destroy-qa-toolbar', onPropertyChange: false });
-                    }
+                    parent.notify('toolbar', { prop: 'destroy-qa-toolbar', onPropertyChange: false });
                 }
                 else {
                     parent.notify('shape', { prop: 'updImgRatioForActObj', onPropertyChange: false });
@@ -18473,6 +17755,11 @@ class Transform {
         }
         else if (parent.element.querySelector('#' + parent.element.id + '_toolbar')) {
             toolbarHeight = parent.element.querySelector('#' + parent.element.id + '_toolbar').clientHeight;
+            if (toolbarHeight === 0 && parent.toolbar && parent.toolbar.length > 0 && parent.toolbar.indexOf('Open') === -1) {
+                const obj = { toolbarHeight: 0 };
+                parent.notify('toolbar', { prop: 'getToolbarHeight', value: { obj: obj } });
+                toolbarHeight = obj['toolbarHeight'];
+            }
         }
         if (Browser.isDevice && straightenObj['bool']) {
             cxtTbarHeight = parent.element.querySelector('#' + parent.element.id + '_contextualToolbarArea').clientHeight;
@@ -18512,10 +17799,8 @@ class Transform {
             if (canvasWrapper) {
                 canvasWrapper.style.width = parent.element.offsetWidth - 2 + 'px';
                 canvasWrapper.style.height = parent.element.offsetHeight + 'px';
-                const obj = { toolbarHeight: !isBlazor() ? 0 : parent.toolbarHeight };
-                if (!isBlazor()) {
-                    parent.notify('toolbar', { prop: 'getToolbarHeight', value: { obj: obj } });
-                }
+                const obj = { toolbarHeight: 0 };
+                parent.notify('toolbar', { prop: 'getToolbarHeight', value: { obj: obj } });
                 if (Browser.isDevice) {
                     canvasWrapper.style.height = (parseFloat(canvasWrapper.style.height) - (2 * obj['toolbarHeight']) - cxtTbarHeight) - 4 + 'px';
                 }
@@ -18567,15 +17852,13 @@ class Transform {
             hideSpinner(parent.element);
             parent.element.style.opacity = '1';
             const obj1 = { defToolbarItems: null };
-            if (!isBlazor()) {
-                parent.notify('toolbar', { prop: 'getDefToolbarItems', value: { obj: obj1 } });
-                if (obj1['defToolbarItems'] && obj1['defToolbarItems'].length > 0 && document.getElementById(parent.element.id + '_toolbar')) {
-                    /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
-                    const toolbar = getComponent(parent.element.id + '_toolbar', 'toolbar');
-                    toolbar.refreshOverflow();
-                    if (ctWrapper && !straightenObj['bool']) {
-                        ctWrapper.classList.add('e-hide');
-                    }
+            parent.notify('toolbar', { prop: 'getDefToolbarItems', value: { obj: obj1 } });
+            if (obj1['defToolbarItems'] && obj1['defToolbarItems'].length > 0 && document.getElementById(parent.element.id + '_toolbar')) {
+                /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
+                const toolbar = getComponent(parent.element.id + '_toolbar', 'toolbar');
+                toolbar.refreshOverflow();
+                if (ctWrapper && !straightenObj['bool']) {
+                    ctWrapper.classList.add('e-hide');
                 }
             }
             parent.notify('shape', { prop: 'refreshActiveObj', onPropertyChange: false });
@@ -18600,43 +17883,23 @@ class Transform {
                     if (parent.activeObj.shape === 'rectangle' || parent.activeObj.shape === 'ellipse' || parent.activeObj.shape === 'text' ||
                         parent.activeObj.shape === 'line' || parent.activeObj.shape === 'arrow' || parent.activeObj.shape === 'path' ||
                         parent.activeObj.shape === 'image') {
-                        if (!isBlazor()) {
-                            parent.notify('toolbar', { prop: 'renderQAT', onPropertyChange: false, value: { isPenEdit: null } });
-                        }
-                        else {
-                            parent.updateToolbar(parent.element, 'quickAccessToolbar', parent.activeObj.shape);
-                        }
+                        parent.notify('toolbar', { prop: 'renderQAT', onPropertyChange: false, value: { isPenEdit: null } });
                     }
                 }
             }
             if (freehandObj['bool']) {
-                if (isBlazor()) {
-                    parent.updateToolbar(parent.element, 'quickAccessToolbar', 'pen');
-                }
-                else {
-                    parent.notify('toolbar', { prop: 'renderQAT', onPropertyChange: false, value: { isPenEdit: true } });
-                }
+                parent.notify('toolbar', { prop: 'renderQAT', onPropertyChange: false, value: { isPenEdit: true } });
             }
             if (isFrameToolbar) {
-                if (isBlazor()) {
-                    parent.updateToolbar(parent.element, 'frame');
-                }
-                else {
-                    parent.notify('toolbar', { prop: 'callFrameToolbar', onPropertyChange: false });
-                }
+                parent.notify('toolbar', { prop: 'callFrameToolbar', onPropertyChange: false });
             }
             else if (parent.isResize) {
                 parent.aspectWidth = Math.ceil(parent.img.destWidth);
                 parent.aspectHeight = Math.ceil(parent.img.destHeight);
-                if (isBlazor()) {
-                    parent.updateToolbar(parent.element, 'resize');
-                }
-                else {
-                    parent.notify('toolbar', { prop: 'refresh-toolbar', onPropertyChange: false, value: { type: 'resize',
-                            isApplyBtn: false, isCropping: false } });
-                    parent.notify('toolbar', { prop: 'refresh-toolbar', onPropertyChange: false, value: { type: 'resize',
-                            isApplyBtn: false, isCropping: false } });
-                }
+                parent.notify('toolbar', { prop: 'refresh-toolbar', onPropertyChange: false, value: { type: 'resize',
+                        isApplyBtn: false, isCropping: false } });
+                parent.notify('toolbar', { prop: 'refresh-toolbar', onPropertyChange: false, value: { type: 'resize',
+                        isApplyBtn: false, isCropping: false } });
             }
             if ((parent.transform.degree !== 0 || parent.transform.currFlipState !== '') && parent.transform.defaultZoomFactor > 0) {
                 const totalPannedPoint = extend({}, parent.panPoint.totalPannedPoint, null, true);
@@ -18662,24 +17925,14 @@ class Transform {
             else if (parent.transform.degree !== 0 && parent.transform.cropZoomFactor > 0) {
                 parent.transform.zoomFactor = 0;
                 parent.transform.cropZoomFactor = null;
-                if (isBlazor()) {
-                    parent.updateToolbar(parent.element, 'enableDisableToolbarBtn');
-                }
-                else {
-                    parent.notify('toolbar', { prop: 'enable-disable-btns', onPropertyChange: false });
-                }
+                parent.notify('toolbar', { prop: 'enable-disable-btns', onPropertyChange: false });
             }
         }
     }
     calcMaxDimension(width, height, obj, isImgShape) {
         const object = { toolbarHeight: 0 };
         const parent = this.parent;
-        if (!isBlazor()) {
-            parent.notify('toolbar', { prop: 'getToolbarHeight', value: { obj: object } });
-        }
-        else {
-            object['toolbarHeight'] = parent.toolbarHeight;
-        }
+        parent.notify('toolbar', { prop: 'getToolbarHeight', value: { obj: object } });
         let canvasMaxWidth = isImgShape ? parent.element.clientWidth / 3 :
             parent.element.clientWidth;
         let canvasMaxHeight = isImgShape ? (parent.element.clientHeight - object['toolbarHeight']) / 3 :
@@ -19029,36 +18282,20 @@ class Transform {
                 parent.notify('toolbar', { prop: 'init-main-toolbar', value: { isApplyBtn: false, isDevice: true, isOkBtn: true, isResize: true } });
             }
         }
+        const aspectRatioHeight = parent.element.querySelector('#' + parent.element.id + '_resizeHeight');
+        const aspectHeight = aspectRatioHeight.value === '' ? aspectRatioHeight.placeholder : aspectRatioHeight.value;
         const resizeEventArgs = { cancel: false, previousWidth: Math.ceil(parent.img.destWidth),
             previousHeight: Math.ceil(parent.img.destHeight), width: Math.ceil(width), height: height && height !== 0 ? Math.ceil(height) :
-                (parent.aspectHeight ? parent.aspectHeight : Math.ceil(parent.img.destHeight)),
+                (isAspectRatio ? Math.ceil(parseFloat(aspectHeight)) : Math.ceil(parent.img.destHeight)),
             isAspectRatio: isAspectRatio ? isAspectRatio : false };
-        if (!isBlazor()) {
-            parent.trigger('resizing', resizeEventArgs);
-            if (!resizeEventArgs.cancel) {
-                this.resizeEventHandler(resizeEventArgs);
-            }
-            else if (parent.aspectHeight && parent.aspectWidth) {
-                parent.aspectHeight = resizeEventArgs.previousHeight;
-                parent.aspectWidth = resizeEventArgs.previousWidth;
-            }
-        }
-        else if (isBlazor() && parent.events && parent.events.imageResizing.hasDelegate === true && !parent.isResizeOkBtn) {
-            /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
-            parent.dotNetRef.invokeMethodAsync('OnImageResizingAsync', 'ImageResizing', resizeEventArgs, null).then((args) => {
-                this.resizeEventCancel = args.cancel;
-                if (!args.cancel) {
-                    this.resizeEventHandler(args);
-                }
-                else if (parent.aspectHeight && parent.aspectWidth) {
-                    parent.aspectHeight = resizeEventArgs.previousHeight;
-                    parent.aspectWidth = resizeEventArgs.previousWidth;
-                }
-            });
-        }
-        else if (!this.resizeEventCancel) {
+        parent.trigger('resizing', resizeEventArgs);
+        if (!resizeEventArgs.cancel) {
             this.resizeEventHandler(resizeEventArgs);
         }
+        else if (parent.aspectHeight && parent.aspectWidth) {
+            parent.aspectHeight = resizeEventArgs.previousHeight;
+            parent.aspectWidth = resizeEventArgs.previousWidth;
+        }
     }
     resizeEventHandler(args) {
         const parent = this.parent;
@@ -19077,13 +18314,7 @@ class Transform {
                 const originalWidth = parent.img.destWidth;
                 const originalHeight = parent.img.destHeight;
                 let aspectRatioWidthValue;
-                if (!isBlazor()) {
-                    aspectRatioWidthValue = parseFloat(aspectRatioWidth.value === '' ? aspectRatioWidth.placeholder :
-                        aspectRatioWidth.value);
-                }
-                else {
-                    aspectRatioWidthValue = parseFloat(widthElem.value === '' ? widthElem.placeholder : widthElem.value);
-                }
+                aspectRatioWidthValue = parseFloat(aspectRatioWidth.value === '' ? aspectRatioWidth.placeholder : aspectRatioWidth.value);
                 if (aspectRatioHeight) {
                     let value = aspectRatioWidthValue / (originalWidth / originalHeight);
                     const height = value % 1 >= 0.5 || value % 1 <= -0.5 ? Math.round(value) : (value < 0) ? Math.ceil(value) : Math.floor(value);
@@ -19131,28 +18362,17 @@ class Transform {
                 parent.notify('undo-redo', { prop: 'setPreventUR', value: { bool: false } });
                 parent.resizeSrc = { startX: parent.img.srcLeft, startY: parent.img.srcTop, width: parent.img.srcWidth,
                     height: parent.img.srcHeight };
-                if (isBlazor()) {
-                    parent.updateToolbar(parent.element, 'resize');
-                }
-                else {
-                    parent.notify('toolbar', { prop: 'refresh-toolbar', onPropertyChange: false, value: { type: 'resize',
-                            isApplyBtn: null, isCropping: null, isZooming: null, cType: null } });
-                    parent.notify('transform', { prop: 'setPreventDownScale', value: { bool: false } });
-                    parent.notify('toolbar', { prop: 'refresh-toolbar', onPropertyChange: false, value: { type: 'resize',
-                            isApplyBtn: null, isCropping: null, isZooming: null, cType: null } });
-                }
+                parent.notify('toolbar', { prop: 'refresh-toolbar', onPropertyChange: false, value: { type: 'resize',
+                        isApplyBtn: null, isCropping: null, isZooming: null, cType: null } });
+                parent.notify('transform', { prop: 'setPreventDownScale', value: { bool: false } });
+                parent.notify('toolbar', { prop: 'refresh-toolbar', onPropertyChange: false, value: { type: 'resize',
+                        isApplyBtn: null, isCropping: null, isZooming: null, cType: null } });
             }
             else {
                 parent.notify('transform', { prop: 'resizeCrop', value: { width: args.width, height: args.height } });
             }
         }
         this.resizedImgAngle = parent.transform.degree;
-        args = { previousHeight: args.previousHeight, previousWidth: args.previousWidth, width: args.width, height: args.height, isAspectRatio: args.isAspectRatio };
-        if (isBlazor() && parent.isResizeOkBtn && parent.events && parent.events.imageResized.hasDelegate === true) {
-            const resizeArgs = { width: args.width, height: args.height, isAspectRatio: args.isAspectRatio };
-            parent.dotNetRef.invokeMethodAsync('OnImageResizingAsync', 'ImageResized', null, resizeArgs);
-        }
-        else { }
     }
     straightenImage(degree) {
         const parent = this.parent;
@@ -19160,13 +18380,7 @@ class Transform {
             parent.notify('draw', { prop: 'select', onPropertyChange: false,
                 value: { type: 'custom', startX: null, startY: null, width: null, height: null } });
         }
-        if (isBlazor()) {
-            /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
-            parent.performCropClick();
-        }
-        else {
-            parent.notify('toolbar', { prop: 'performCropTransformClick', value: { shape: null } });
-        }
+        parent.notify('toolbar', { prop: 'performCropTransformClick', value: { shape: null } });
         parent.setStraighten(degree, true);
         parent.okBtn();
     }
@@ -19272,33 +18486,22 @@ class UndoRedo {
         const parent = this.parent;
         refreshToolbar = refreshToolbar ? refreshToolbar : false;
         if (refreshToolbar) {
-            if (!isBlazor()) {
-                parent.notify('toolbar', { prop: 'setEnableDisableUndoRedo', value: { isPrevent: true } });
-            }
+            parent.notify('toolbar', { prop: 'setEnableDisableUndoRedo', value: { isPrevent: true } });
             this.tempUndoRedoColl = extend([], this.appliedUndoRedoColl, [], true);
             this.tempUndoRedoStep = this.undoRedoStep;
         }
-        else if (!isBlazor()) {
-            parent.notify('toolbar', { prop: 'setEnableDisableUndoRedo', value: { isPrevent: false } });
-        }
+        parent.notify('toolbar', { prop: 'setEnableDisableUndoRedo', value: { isPrevent: false } });
         this.undoRedoColl = this.undoRedoColl.slice(0, this.undoRedoStep);
         this.appliedUndoRedoColl = this.appliedUndoRedoColl.slice(0, this.undoRedoStep);
         parent.isUndoRedo = parent.currObjType.isUndoAction = false;
-        if (!isBlazor()) {
-            parent.notify('toolbar', { prop: 'enable-disable-btns' });
-        }
-        else {
-            parent.updateToolbar(parent.element, 'enableDisableToolbarBtn');
-        }
+        parent.notify('toolbar', { prop: 'enable-disable-btns' });
     }
     updateCurrUrc(type) {
         const parent = this.parent;
         if (parent.isResize || this.isPreventing) {
             return;
         }
-        if (!isBlazor()) {
-            parent.notify('toolbar', { prop: 'setEnableDisableUndoRedo', value: { isPrevent: false } });
-        }
+        parent.notify('toolbar', { prop: 'setEnableDisableUndoRedo', value: { isPrevent: false } });
         if (type === 'ok') {
             parent.notify('draw', { prop: 'setShapeTextInsert', onPropertyChange: false, value: { bool: false } });
             const collection = this.tempUndoRedoColl.length > 0 ?
@@ -19358,12 +18561,7 @@ class UndoRedo {
         this.undoRedoColl = extend([], this.appliedUndoRedoColl, [], true);
         if (type === 'ok') {
             this.undoRedoStep = this.undoRedoColl.length;
-            if (!isBlazor()) {
-                parent.notify('toolbar', { prop: 'enable-disable-btns' });
-            }
-            else {
-                parent.updateToolbar(parent.element, 'enableDisableToolbarBtn');
-            }
+            parent.notify('toolbar', { prop: 'enable-disable-btns' });
         }
         if (parent.transform.zoomFactor > 0) {
             parent.togglePan = true;
@@ -19389,25 +18587,18 @@ class UndoRedo {
             this.undoRedoStep = this.tempUndoRedoStep;
             this.tempUndoRedoColl = [];
             this.tempUndoRedoStep = 0;
-            if (!isBlazor()) {
-                parent.notify('toolbar', { prop: 'setEnableDisableUndoRedo', value: { isPrevent: false } });
-            }
+            parent.notify('toolbar', { prop: 'setEnableDisableUndoRedo', value: { isPrevent: false } });
         }
     }
     refreshToolbarActions() {
         const parent = this.parent;
-        if (!isBlazor()) {
-            if (parent.activeObj.shape) {
-                parent.notify('toolbar', { prop: 'refresh-toolbar', onPropertyChange: false, value: { type: 'shapes',
-                        isApplyBtn: null, isCropping: null, isZooming: null, cType: null } });
-                parent.notify('toolbar', { prop: 'update-toolbar-items', onPropertyChange: false });
-            }
-            else {
-                parent.notify('toolbar', { prop: 'refresh-main-toolbar', onPropertyChange: false });
-            }
+        if (parent.activeObj.shape) {
+            parent.notify('toolbar', { prop: 'refresh-toolbar', onPropertyChange: false, value: { type: 'shapes',
+                    isApplyBtn: null, isCropping: null, isZooming: null, cType: null } });
+            parent.notify('toolbar', { prop: 'update-toolbar-items', onPropertyChange: false });
         }
-        else if (isNullOrUndefined(parent.activeObj.shape)) {
-            parent.updateToolbar(parent.element, 'imageLoaded');
+        else {
+            parent.notify('toolbar', { prop: 'refresh-main-toolbar', onPropertyChange: false });
         }
     }
     applyCurrentChanges() {
@@ -19417,7 +18608,7 @@ class UndoRedo {
             parent.togglePan = false;
             parent.notify('selection', { prop: 'setDragCanvas', value: { bool: false } });
         }
-        if (parent.element.querySelector('.e-contextual-toolbar-wrapper') && !isBlazor()) {
+        if (parent.element.querySelector('.e-contextual-toolbar-wrapper')) {
             parent.element.querySelector('.e-contextual-toolbar-wrapper').classList.add('e-hide');
         }
         if (parent.togglePen) {
@@ -19449,14 +18640,9 @@ class UndoRedo {
                 }
                 parent.notify('shape', { prop: 'refreshActiveObj', onPropertyChange: false });
                 this.undoRedoStep--;
-                if (!isBlazor()) {
-                    parent.notify('toolbar', { prop: 'enable-disable-btns' });
-                    if (parent.element.querySelector('.e-contextual-toolbar-wrapper')) {
-                        parent.element.querySelector('.e-contextual-toolbar-wrapper').classList.add('e-hide');
-                    }
-                }
-                else {
-                    parent.updateToolbar(parent.element, 'enableDisableToolbarBtn');
+                parent.notify('toolbar', { prop: 'enable-disable-btns' });
+                if (parent.element.querySelector('.e-contextual-toolbar-wrapper')) {
+                    parent.element.querySelector('.e-contextual-toolbar-wrapper').classList.add('e-hide');
                 }
                 parent.isUndoRedo = true;
                 const obj = this.undoRedoColl[this.undoRedoStep];
@@ -19584,12 +18770,7 @@ class UndoRedo {
             if (this.undoRedoStep < this.appliedUndoRedoColl.length) {
                 this.refreshToolbarActions();
                 this.undoRedoStep++;
-                if (!isBlazor()) {
-                    parent.notify('toolbar', { prop: 'enable-disable-btns' });
-                }
-                else {
-                    parent.updateToolbar(parent.element, 'enableDisableToolbarBtn');
-                }
+                parent.notify('toolbar', { prop: 'enable-disable-btns' });
                 parent.isUndoRedo = true;
                 const obj = this.undoRedoColl[this.undoRedoStep - 1];
                 if (this.undoRedoColl.length === this.undoRedoStep) {
@@ -19606,7 +18787,7 @@ class UndoRedo {
                 parent.cropObj = extend({}, obj.currentCropObj, {}, true);
                 parent.afterCropActions = obj.currentObj.afterCropActions;
                 this.lowerContext.filter = obj.currentObj.filter;
-                if (!isBlazor() && parent.element.querySelector('.e-contextual-toolbar-wrapper')) {
+                if (parent.element.querySelector('.e-contextual-toolbar-wrapper')) {
                     parent.element.querySelector('.e-contextual-toolbar-wrapper').classList.add('e-hide');
                 }
                 parent.notify('filter', { prop: 'setAdjustmentLevel', onPropertyChange: false, value: { adjustmentLevel: obj.currentObj.adjustmentLevel } });
@@ -19878,12 +19059,7 @@ class UndoRedo {
         this.upperContext.clearRect(0, 0, parent.lowerCanvas.width, parent.lowerCanvas.height);
         this.lowerContext.clearRect(0, 0, parent.lowerCanvas.width, parent.lowerCanvas.height);
         parent.notify('draw', { prop: 'redrawImgWithObj', onPropertyChange: false });
-        if (!isBlazor()) {
-            parent.notify('toolbar', { prop: 'destroy-qa-toolbar', onPropertyChange: false });
-        }
-        else {
-            parent.updateToolbar(parent.element, 'destroyQuickAccessToolbar');
-        }
+        parent.notify('toolbar', { prop: 'destroy-qa-toolbar', onPropertyChange: false });
         const textArea = parent.textArea;
         textArea.style.display = 'block';
         textArea.style.fontFamily = obj.textSettings.fontFamily;
@@ -19945,40 +19121,24 @@ class UndoRedo {
             parent.notify('selection', { prop: 'setDragCanvas', value: { bool: true } });
         }
         parent.notify('draw', { prop: 'setCancelAction', onPropertyChange: false, value: { bool: false } });
-        if (!isBlazor()) {
-            if (parent.activeObj.shape && parent.activeObj.shape.split('-')[0] === 'crop') {
-                parent.notify('toolbar', { prop: 'refresh-toolbar', onPropertyChange: false, value: { type: 'main',
-                        isApplyBtn: true, isCropping: true, isZooming: null, cType: null } });
-            }
-            else {
-                parent.notify('toolbar', { prop: 'refresh-main-toolbar', onPropertyChange: false });
-            }
-            parent.notify('toolbar', { prop: 'enable-disable-btns' });
+        if (parent.activeObj.shape && parent.activeObj.shape.split('-')[0] === 'crop') {
+            parent.notify('toolbar', { prop: 'refresh-toolbar', onPropertyChange: false, value: { type: 'main',
+                    isApplyBtn: true, isCropping: true, isZooming: null, cType: null } });
         }
-        else if (isNullOrUndefined(parent.activeObj.shape) || parent.activeObj.shape.split('-')[0] !== 'crop') {
-            parent.updateToolbar(parent.element, 'imageLoaded');
-            parent.updateToolbar(parent.element, 'enableDisableToolbarBtn');
+        else {
+            parent.notify('toolbar', { prop: 'refresh-main-toolbar', onPropertyChange: false });
         }
+        parent.notify('toolbar', { prop: 'enable-disable-btns' });
         if (document.getElementById(parent.element.id + '_quickAccessToolbarArea')) {
             document.getElementById(parent.element.id + '_quickAccessToolbarArea').style.display = 'none';
         }
-        if (!isBlazor()) {
-            parent.notify('toolbar', { prop: 'enable-disable-btns' });
-        }
-        else {
-            parent.updateToolbar(parent.element, 'enableDisableToolbarBtn');
-        }
+        parent.notify('toolbar', { prop: 'enable-disable-btns' });
         if (parent.transform.degree !== 0) {
             parent.notify('transform', { prop: 'drawPannedImage', onPropertyChange: false,
                 value: { xDiff: 0, yDiff: 0 } });
         }
         parent.notify('filter', { prop: 'setAdjustmentValue', onPropertyChange: false, value: { adjustmentValue: this.lowerContext.filter } });
         parent.currObjType.isCustomCrop = false;
-        if (isBlazor() && parent.events && parent.events.historyChanged.hasDelegate === true) {
-            let imageAction = this.getImageAction(operation);
-            const args = { length: this.undoRedoColl.length, index: this.undoRedoStep, actionTrigger: isUndo ? 'Undo' : 'Redo', imageAction: imageAction };
-            parent.dotNetRef.invokeMethodAsync('OnHistoryChangedAsync', args);
-        }
     }
     getImageAction(operation) {
         if (['brightness', 'contrast', 'saturation', 'opacity', 'blur', 'hue'].indexOf(operation) !== -1) {
@@ -20059,17 +19219,7 @@ class UndoRedo {
                 previousSelPointColl: previousSelPointColl, currentSelPointColl: currentObj.selPointColl,
                 previousCropObj: previousCropObj, currentCropObj: extend({}, parent.cropObj, {}, true),
                 previousText: previousText, currentText: currentText, filter: previousFilter, isCircleCrop: isCircleCrop });
-            if (!isBlazor()) {
-                parent.notify('toolbar', { prop: 'enable-disable-btns', onPropertyChange: false });
-                /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
-            }
-            else if (parent.currentToolbar !== 'pen-toolbar') {
-                let toolbarValue = null;
-                if (parent.currentToolbar === 'text-toolbar' && operation === 'textAreaCustomization') {
-                    toolbarValue = 'textAreaClicked';
-                }
-                parent.updateToolbar(parent.element, 'enableDisableToolbarBtn', toolbarValue);
-            }
+            parent.notify('toolbar', { prop: 'enable-disable-btns', onPropertyChange: false });
         }
     }
     updateUrObj(objColl, operation) {
@@ -20125,15 +19275,10 @@ class UndoRedo {
         parent.objColl.pop();
         parent.notify('shape', { prop: 'applyActObj', onPropertyChange: false, value: { isMouseDown: null } });
         parent.notify('shape', { prop: 'refreshActiveObj', onPropertyChange: false });
-        if (!isBlazor()) {
-            parent.notify('toolbar', { prop: 'refresh-toolbar', onPropertyChange: false, value: { type: 'shapes',
-                    isApplyBtn: null, isCropping: null, isZooming: null, cType: null } });
-            parent.notify('toolbar', { prop: 'refresh-toolbar', onPropertyChange: false, value: { type: 'main',
-                    isApplyBtn: null, isCropping: null, isZooming: null, cType: null } });
-        }
-        else {
-            parent.updateToolbar(parent.element, 'imageLoaded');
-        }
+        parent.notify('toolbar', { prop: 'refresh-toolbar', onPropertyChange: false, value: { type: 'shapes',
+                isApplyBtn: null, isCropping: null, isZooming: null, cType: null } });
+        parent.notify('toolbar', { prop: 'refresh-toolbar', onPropertyChange: false, value: { type: 'main',
+                isApplyBtn: null, isCropping: null, isZooming: null, cType: null } });
     }
     getZeroZoomObjPointValue(obj, point) {
         const parent = this.parent;
@@ -20459,26 +19604,13 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends Component {
         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);
         }
     }
     /**
@@ -20587,13 +19719,8 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends Component {
                         }
                         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':
@@ -20605,13 +19732,8 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends Component {
                 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':
@@ -20621,47 +19743,25 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends Component {
                     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':
@@ -20671,22 +19771,12 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends Component {
                     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':
@@ -20701,33 +19791,24 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends Component {
                 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;
             }
@@ -20743,14 +19824,9 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends Component {
         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.destroy();
-        }
+        this.notify('toolbar', { prop: 'destroySubComponents', onPropertyChange: false });
+        this.notify('destroyed', null);
+        super.destroy();
         this.unwireEvent();
         this.element.innerHTML = '';
     }
@@ -20939,7 +20015,10 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends Component {
         this.element.style.boxSizing = 'border-box';
         const obj = { toolbarHeight: 0 };
         this.notify('toolbar', { prop: 'getToolbarHeight', value: { obj: obj } });
-        const height = obj['toolbarHeight'];
+        let 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;
         const canvasWrapper = this.element.appendChild(this.createElement('div', { id: this.element.id + '_canvasWrapper',
@@ -21107,10 +20186,12 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends Component {
     /**
      * Clears the current selection performed in the image editor.
      *
+     * @param { boolean } resetCrop - Specifies to reset last cropped image.
+     *
      * @returns {void}.
      */
-    clearSelection() {
-        this.notify('selection', { prop: 'clearSelection', onPropertyChange: false });
+    clearSelection(resetCrop) {
+        this.notify('selection', { prop: 'clearSelection', onPropertyChange: false, value: { resetCrop: resetCrop } });
     }
     /**
      * Crops an image based on the selection done in the image editor.
@@ -21158,7 +20239,9 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends Component {
      */
     getImageData() {
         const obj = { canvas: null };
-        if (this.textArea.style.display === 'block' || this.textArea.style.display === 'inline-block') {
+        const 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 } });
@@ -21197,13 +20280,11 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends Component {
             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 });
             }
             const isImageLoaded = this.isImageLoaded;
             this.currObjType.isUndoAction = this.isUndoRedo = this.togglePan = this.togglePen = this.isImageLoaded = this.isFinetuning = false;
@@ -21268,36 +20349,28 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends Component {
             }
             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()) {
-                const 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' });
-                const straightenObj = { bool: this.isStraightening };
-                if (Browser.isDevice && straightenObj['bool']) {
-                    this.notify('crop', { prop: 'resizeWrapper' });
-                }
+            const 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' });
+            const straightenObj = { bool: this.isStraightening };
+            if (Browser.isDevice && straightenObj['bool']) {
+                this.notify('crop', { prop: 'resizeWrapper' });
             }
         }
     }
@@ -21317,9 +20390,11 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends Component {
      */
     rotate(degree) {
         const 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'];
     }
     /**
@@ -21357,8 +20432,20 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends Component {
         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.
@@ -21430,16 +20517,17 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends Component {
      * @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}.
      *
      */
-    drawEllipse(x, y, radiusX, radiusY, strokeWidth, strokeColor, fillColor, degree) {
+    drawEllipse(x, y, radiusX, radiusY, strokeWidth, strokeColor, fillColor, degree, isSelected) {
         let isEllipse = false;
         const 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;
@@ -21453,15 +20541,16 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends Component {
      * @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}.
      */
-    drawLine(startX, startY, endX, endY, strokeWidth, strokeColor) {
+    drawLine(startX, startY, endX, endY, strokeWidth, strokeColor, isSelected) {
         let isLine = false;
         const 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;
@@ -21477,15 +20566,17 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends Component {
      * @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}.
      */
-    drawArrow(startX, startY, endX, endY, strokeWidth, strokeColor, arrowStart, arrowEnd) {
+    drawArrow(startX, startY, endX, endY, strokeWidth, strokeColor, arrowStart, arrowEnd, isSelected) {
         let isArrow = false;
         const 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;
@@ -21496,9 +20587,10 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends Component {
      * @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}.
      */
-    drawPath(pointColl, strokeWidth, strokeColor, opacity) {
+    drawPath(pointColl, strokeWidth, strokeColor, isSelected) {
         this.isPublicMethod = true;
         const obj = { inRange: false };
         let isPath = false;
@@ -21514,7 +20606,7 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends Component {
         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;
@@ -21530,15 +20622,16 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends Component {
      * @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}.
      */
-    drawRectangle(x, y, width, height, strokeWidth, strokeColor, fillColor, degree) {
+    drawRectangle(x, y, width, height, strokeWidth, strokeColor, fillColor, degree, isSelected) {
         let isRectangle = false;
         const 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;
@@ -21556,16 +20649,17 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends Component {
      * @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}.
      *
      */
-    drawText(x, y, text, fontFamily, fontSize, bold, italic, color) {
+    drawText(x, y, text, fontFamily, fontSize, bold, italic, color, isSelected) {
         let isText = false;
         const 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;
@@ -21582,16 +20676,17 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends Component {
      * @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}.
      *
      */
-    drawImage(data, x, y, width, height, isAspectRatio, degree, opacity) {
+    drawImage(data, x, y, width, height, isAspectRatio, degree, opacity, isSelected) {
         let isImage = false;
         const isPointsInRange = this.allowShape(x, y);
         if (!this.disabled && this.isImageLoaded && (isPointsInRange || (isNullOrUndefined(x) && isNullOrUndefined(y)))) {
             const length = 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) {
                 isImage = true;
@@ -21639,10 +20734,11 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends Component {
      *
      */
     getShapeSetting(id) {
-        const shapeDetails = {};
+        const 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' });
+        const shapeDetails = obj['shapeDetails'] ? obj['shapeDetails'] : {};
         return shapeDetails;
     }
     /**
@@ -21746,28 +20842,23 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends Component {
         if ((width.toString()).length <= 4 && (height.toString()).length <= 4) {
             const 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 } });
-                }
-                const aspectRatioWidth = this.element.querySelector('#' + this.element.id + '_resizeWidth');
-                const 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 } });
+            }
+            const aspectRatioWidth = this.element.querySelector('#' + this.element.id + '_resizeWidth');
+            const 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 ||
@@ -21815,13 +20906,7 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends Component {
         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;
@@ -21876,50 +20961,154 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends Component {
      * {% 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}.
      *
      */
-    updateShape(setting) {
+    updateShape(setting, isSelected) {
         const 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 } });
-            const 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' });
+        let isTextArea = false;
+        const 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']) {
+                this.notify('shape', { prop: 'updateShapeChangeEventArgs', onPropertyChange: false,
+                    value: { shapeSettings: setting } });
+                const 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'];
+    }
+    /**
+     * Duplicates a shape based on the given shape ID in the ImageEditor.
+     * Use 'getShapeSettings' method to get the shape and then pass a shapeId from the returned shape to clone a shape.
+     *
+     * @param {string} shapeId - Specifies the shape id to clone a shape on an image.
+     * @returns {boolean}.
+     *
+     */
+    cloneShape(shapeId) {
+        const obj = { isSelected: false };
+        if (shapeId.split('_')[0] === 'shape') {
+            this.notify('shape', { prop: 'selectShape', onPropertyChange: false, value: { id: shapeId, obj: obj } });
+            if (obj['isSelected']) {
+                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}.
+     *
+     */
+    getImageFilter(filterOption) {
+        const canvas = this.createElement('canvas');
+        const 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}.
+     *
+     */
+    enableTextEditing() {
+        const 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}.
+     *
+     */
+    canUndo() {
+        let canUndo = false;
+        const object = this.getUndoRedoColl();
+        const undoRedoIndex = object['index'];
+        if (undoRedoIndex > 0) {
+            canUndo = true;
         }
-        return obj['isSelected'];
+        return canUndo;
     }
     /**
-     * Duplicates a shape based on the given shape ID in the ImageEditor.
-     * Use 'getShapeSettings' method to get the shape and then pass a shapeId from the returned shape to clone a shape.
+     * Specifies if it's possible to redo the last recent action made in an Image Editor.
      *
-     * @param {string} shapeId - Specifies the shape id to clone a shape on an image.
      * @returns {boolean}.
      *
      */
-    cloneShape(shapeId) {
-        const obj = { isSelected: false };
-        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.okBtn();
-                this.notify('draw', { prop: 'redrawDownScale' });
-            }
+    canRedo() {
+        let canRedo = false;
+        const object = this.getUndoRedoColl();
+        const undoRedoColl = object['undoRedoColl'];
+        const undoRedoIndex = object['index'];
+        if (undoRedoColl && undoRedoColl.length > 0 && undoRedoIndex < undoRedoColl.length - 1) {
+            canRedo = true;
         }
-        return obj['isSelected'];
+        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
     toolbarTemplateFn() {
@@ -22004,6 +21193,16 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends Component {
         this.notify('freehand-draw', { prop: 'getTempFreeHandDrawEditingStyles', value: { obj: obj } });
         this.notify('freehand-draw', { prop: 'color-change', value: { color: obj['tempFreeHandDrawEditingStyles'].strokeColor } });
     }
+    getUndoRedoColl() {
+        const obj = { undoRedoColl: null, index: null };
+        const undoRedoObj = { undoRedoStep: null };
+        const 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;
+    }
     updateImageTransformColl(type) {
         let value;
         if (type === 'rotateleft') {
@@ -22147,10 +21346,9 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends Component {
                 shapeSettings.type = ShapeType.FreehandDraw;
             }
             const 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) {
             const obj = { width: null, height: null };
             this.notify('selection', { prop: 'getNumTextValue', onPropertyChange: false, value: { obj: obj } });
             const point = { x: obj['width'], y: obj['height'] };
@@ -22184,7 +21382,7 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends Component {
                         isCircleCrop: null } });
                 this.notify('undo-redo', { prop: 'updateCurrUrc', value: { type: 'ok' } });
                 const obj = this.cancelCropSelection;
-                if ((!isBlazor() && obj && (isNullOrUndefined(nonAspectIcon) || !nonAspectIcon)) || (isBlazor() && obj && blrNAspRatElem && blrNAspRatElem.classList.contains('e-hidden'))) {
+                if ((obj && (isNullOrUndefined(nonAspectIcon) || !nonAspectIcon))) {
                     obj.previousObj.aspectWidth = obj.currentObj.aspectWidth = this.aspectWidth;
                     obj.previousObj.aspectHeight = obj.currentObj.aspectHeight = this.aspectHeight;
                     obj.previousCropObj = extend({}, this.cropObj, {}, true);
@@ -22238,9 +21436,7 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends Component {
             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;
             const obj = { value: null };
@@ -22256,12 +21452,7 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends Component {
         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) ||
@@ -22287,20 +21478,16 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends Component {
             }
             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.
@@ -22359,18 +21546,12 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends Component {
         const 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;
@@ -22388,25 +21569,12 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends Component {
      * @returns {void}.
      */
     setCurrAdjustmentValue(type, value) {
-        const 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((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 } });
+        const 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.
@@ -22500,24 +21668,22 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends Component {
                     currentText: null, previousFilter: null, isCircleCrop: null } });
         }
         this.notify('selection', { prop: 'redrawShape', value: { obj: this.objColl[this.objColl.length - 1] } });
-        if (!isBlazor()) {
-            if (Browser.isDevice) {
-                if (document.getElementById(this.element.id + '_bottomToolbar')) {
-                    /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
-                    const toolbar = getComponent(this.element.id + '_bottomToolbar', 'toolbar');
-                    toolbar.refreshOverflow();
-                }
+        if (Browser.isDevice) {
+            if (document.getElementById(this.element.id + '_bottomToolbar')) {
+                /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
+                const toolbar = getComponent(this.element.id + '_bottomToolbar', 'toolbar');
+                toolbar.refreshOverflow();
             }
-            else {
-                if (document.getElementById(this.element.id + '_toolbar')) {
-                    /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
-                    const toolbar = getComponent(this.element.id + '_toolbar', 'toolbar');
-                    toolbar.refreshOverflow();
-                }
+        }
+        else {
+            if (document.getElementById(this.element.id + '_toolbar')) {
+                /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
+                const toolbar = getComponent(this.element.id + '_toolbar', 'toolbar');
+                toolbar.refreshOverflow();
             }
         }
         const shapeChangedArgs = { action: type, currentShapeSettings: extend({}, shapeSettings, {}, true) };
-        this.triggerShapeChanged(shapeChangedArgs);
+        this.trigger('shapeChange', shapeChangedArgs);
     }
     /**
      * Apply Font style for text.
@@ -22588,7 +21754,7 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends Component {
         }
         const 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.
@@ -22690,7 +21856,7 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends Component {
         }
         const 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.
@@ -22761,7 +21927,7 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends Component {
         }
         const shapeChangedArgs = { action: 'font-color', currentShapeSettings: extend({}, shapeSettings, {}, true) };
         shapeChangedArgs.currentShapeSettings.fillColor = value;
-        this.triggerShapeChanged(shapeChangedArgs);
+        this.trigger('shapeChange', shapeChangedArgs);
     }
     /**
      * Apply Pen stroke width.
@@ -22816,7 +21982,7 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends Component {
         shapeSettings.type = ShapeType.FreehandDraw;
         const 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.
@@ -22886,7 +22052,7 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends Component {
         shapeSettings.type = ShapeType.FreehandDraw;
         const shapeChangedArgs = { action: 'stroke-color', currentShapeSettings: extend({}, shapeSettings, {}, true) };
         shapeChangedArgs.currentShapeSettings.strokeColor = value;
-        this.triggerShapeChanged(shapeChangedArgs);
+        this.trigger('shapeChange', shapeChangedArgs);
     }
     /**
      * Apply Shape stroke width.
@@ -22932,7 +22098,7 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends Component {
             this.notify('selection', { prop: 'redrawShape', value: { obj: this.objColl[this.objColl.length - 1] } });
             const 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)) {
@@ -22989,7 +22155,7 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends Component {
         }
         const shapeChangedArgs = { action: 'stroke-color', currentShapeSettings: extend({}, shapeSettings, {}, true) };
         shapeChangedArgs.currentShapeSettings.strokeColor = value;
-        this.triggerShapeChanged(shapeChangedArgs);
+        this.trigger('shapeChange', shapeChangedArgs);
     }
     /**
      * Apply Shape fill color.
@@ -23029,7 +22195,7 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends Component {
         }
         this.notify('selection', { prop: 'redrawShape', value: { obj: this.objColl[this.objColl.length - 1] } });
         const shapeChangedArgs = { action: 'fill-color', currentShapeSettings: extend({}, shapeSettings, {}, true) };
-        this.triggerShapeChanged(shapeChangedArgs);
+        this.trigger('shapeChange', shapeChangedArgs);
     }
     /**
      * Apply horizontal flip.
@@ -23060,9 +22226,7 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends Component {
             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);
         const activePoint = this.duplicateImage();
         this.notify('draw', { prop: 'downScaleImgCanvas', onPropertyChange: false,
@@ -23108,9 +22272,7 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends Component {
             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);
         const activePoint = this.duplicateImage();
         this.notify('draw', { prop: 'downScaleImgCanvas', onPropertyChange: false,
@@ -23154,9 +22316,7 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends Component {
             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));
         }
@@ -23173,14 +22333,8 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends Component {
                 previousCropObj: prevCropObj, previousText: null,
                 currentText: null, previousFilter: null, isCircleCrop: null } });
         this.notify('selection', { prop: 'redrawShape', value: { obj: this.objColl[this.objColl.length - 1] } });
-        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.
@@ -23239,6 +22393,12 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends Component {
      * @returns {void}.
      */
     transformSelect(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;
         const straighten = this.transform.straighten;
@@ -23335,12 +22495,7 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends Component {
      */
     setStraighten(value, isMethod) {
         const 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);
         }
@@ -23465,85 +22620,6 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends Component {
         }
         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}
-     */
-    initializeImageEditor(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';
-        }
-        const 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();
-    }
-    prerender() {
-        // 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();
-    }
     initializeZoomSettings() {
         /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
         if (isNullOrUndefined(this.zoomSettings.zoomTrigger) || this.zoomSettings.zoomTrigger === 0) {
@@ -23576,57 +22652,6 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends Component {
             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
-    updateToolbar(element, type, value) {
-    }
-    /**
-     * Trigger the shapeChanging event for after the shape applied.
-     *
-     * @param { ShapeChangeEventArgs } shapeChangedArgs - Specifies the shapeChaning event args.
-     * @hidden
-     * @returns {void}.
-     */
-    triggerShapeChanged(shapeChangedArgs) {
-        if (isBlazor() && this.events && this.events.shapeChanged.hasDelegate === true) {
-            const args = { action: shapeChangedArgs.action, shapeSettings: shapeChangedArgs.currentShapeSettings };
-            this.dotNetRef.invokeMethodAsync('ShapeEventAsync', 'ShapeChanged', null, args);
-        }
-        else {
-            this.trigger('shapeChange', shapeChangedArgs);
-        }
-    }
-    triggerActionComplete() {
-        const frameChangedArgs = this.curFrameObjEvent;
-        const finetuneValueChanged = this.curFinetuneObjEvent;
-        const imageFiltered = this.curFilterObjEvent;
-        if (isBlazor()) {
-            if (this.isFrameBtnClick && this.events && this.events.frameChanged.hasDelegate === true) {
-                const frameChangeArgs = { frameSettings: frameChangedArgs.currentFrameSetting };
-                this.dotNetRef.invokeMethodAsync('OnFrameChangingAsync', 'FrameChanged', null, frameChangeArgs);
-            }
-            if (this.isFinetuneBtnClick && this.events && this.events.finetuneValueChanged.hasDelegate === true) {
-                const 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) {
-                const imageFilter = { filter: this.toPascalCase(imageFiltered.filter) };
-                this.dotNetRef.invokeMethodAsync('OnImageFilterEventAsync', 'ImageFiltered', null, imageFilter);
-            }
-        }
-        else { }
-        this.isFilterCanvasClick = this.isFinetuneBtnClick = this.isFrameBtnClick = false;
-    }
 };
 __decorate([
     Property('')
@@ -24254,7 +23279,9 @@ class ToolbarModule {
                 args.value['obj']['toolbarHeight'] = this.toolbarHeight;
                 break;
             case 'setToolbarHeight':
-                this.toolbarHeight = args.value['height'];
+                if (isNullOrUndefined(parent.toolbar) || (parent.toolbar && parent.toolbar.length > 0 && parent.toolbar.indexOf('Open') > -1)) {
+                    this.toolbarHeight = args.value['height'];
+                }
                 break;
             case 'setCurrentToolbar':
                 this.currentToolbar = args.value['type'];
@@ -24338,11 +23365,14 @@ class ToolbarModule {
                 this.frameToolbarClick();
                 break;
             case 'performCropTransformClick':
-                this.performCropTransformClick(args.value['shape']);
+                this.performCropTransformClick(args.value['shape'], args.value['isTransform']);
                 break;
             case 'duplicateShape':
                 this.duplicateShape(args.value['isPreventUndoRedo'], true);
                 break;
+            case 'editText':
+                this.editText();
+                break;
         }
     }
     updatePrivateVariables() {
@@ -24454,6 +23484,13 @@ class ToolbarModule {
             const mToolbar = document.getElementById(id + '_toolbar');
             if (toolbar) {
                 this.toolbarHeight = mToolbar.clientHeight;
+                if (parent.toolbar && parent.toolbar.length > 0 && parent.toolbar.indexOf('Open') === -1) {
+                    let toolabr = getComponent(document.getElementById(parent.element.id + '_toolbar'), 'toolbar');
+                    if (toolabr) {
+                        toolabr.destroy();
+                        document.getElementById(parent.element.id + '_toolbar').innerHTML = '';
+                    }
+                }
             }
         }
         else {
@@ -24533,31 +23570,33 @@ class ToolbarModule {
             const args = { toolbarType: 'main', toolbarItems: this.defToolbarItems };
             parent.trigger('toolbarUpdating', args);
             this.defToolbarItems = args.toolbarItems;
-            const toolbarObj = new Toolbar({
-                width: '100%',
-                items: this.defToolbarItems,
-                clicked: this.defToolbarClicked.bind(this),
-                created: () => {
-                    if (!isDevice) {
-                        this.renderAnnotationBtn();
+            if (this.defToolbarItems.length > 0) {
+                const toolbarObj = new Toolbar({
+                    width: '100%',
+                    items: this.defToolbarItems,
+                    clicked: this.defToolbarClicked.bind(this),
+                    created: () => {
+                        if (!isDevice) {
+                            this.renderAnnotationBtn();
+                        }
+                        this.wireZoomBtnEvents();
+                        this.renderSaveBtn();
+                        parent.trigger('toolbarCreated', { toolbarType: 'main' });
                     }
-                    this.wireZoomBtnEvents();
-                    this.renderSaveBtn();
-                    parent.trigger('toolbarCreated', { toolbarType: 'main' });
+                });
+                if (isDevice && isFrame) {
+                    toolbarObj.appendTo('#' + id + '_bottomToolbar');
+                }
+                else {
+                    toolbarObj.appendTo('#' + id + '_toolbar');
+                }
+                this.createLeftToolbarControls();
+                this.enableDisableTbrBtn();
+                if (this.isToolbar() && document.getElementById(id + '_toolbar')) {
+                    /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
+                    const toolbar = getComponent(id + '_toolbar', 'toolbar');
+                    toolbar.refreshOverflow();
                 }
-            });
-            if (isDevice && isFrame) {
-                toolbarObj.appendTo('#' + id + '_bottomToolbar');
-            }
-            else {
-                toolbarObj.appendTo('#' + id + '_toolbar');
-            }
-            this.createLeftToolbarControls();
-            this.enableDisableTbrBtn();
-            if (this.isToolbar() && document.getElementById(id + '_toolbar')) {
-                /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
-                const toolbar = getComponent(id + '_toolbar', 'toolbar');
-                toolbar.refreshOverflow();
             }
         }
     }
@@ -24591,8 +23630,14 @@ class ToolbarModule {
         const id = parent.element.id;
         const toolbarItems = [];
         if (!isOkBtn || isResize) {
-            toolbarItems.push({ id: id + '_upload', cssClass: 'e-image-upload', align: 'Left', type: 'Input', template: new Uploader({ allowedExtensions: '.jpg, .jpeg, .png,.svg', multiple: false }) });
-            toolbarItems.push({ visible: false, cssClass: 'e-image-position e-btn e-flat', tooltipText: this.l10n.getConstant('Browse'), align: 'Left' });
+            if (isNullOrUndefined(parent.toolbar) || (parent.toolbar && parent.toolbar.indexOf('Open') > -1)) {
+                toolbarItems.push({ id: parent.element.id + '_upload', cssClass: 'e-image-upload', align: 'Left', type: 'Input', template: new Uploader({ allowedExtensions: '.jpg, .jpeg, .png,.svg', multiple: false }) });
+                toolbarItems.push({ visible: false, cssClass: 'e-image-position e-btn e-flat', tooltipText: this.l10n.getConstant('Browse'), align: 'Left' });
+            }
+            else if (Browser.isDevice && (parent.toolbar && parent.toolbar.indexOf('Open') === -1)) {
+                toolbarItems.push({ visible: false, id: parent.element.id + '_upload', cssClass: 'e-image-upload', align: 'Left', type: 'Input', template: new Uploader({ allowedExtensions: '.jpg, .jpeg, .png,.svg', multiple: false }) });
+                toolbarItems.push({ visible: false, cssClass: 'e-image-position e-btn e-flat', tooltipText: this.l10n.getConstant('Browse'), align: 'Left' });
+            }
         }
         if (parent.allowUndoRedo && !isResize) {
             if (isNullOrUndefined(parent.toolbar) || (parent.toolbar && parent.toolbar.indexOf('Undo') > -1)) {
@@ -24723,6 +23768,9 @@ class ToolbarModule {
         const id = parent.element.id;
         const toolbarArea = parent.element.querySelector('#' + id + '_toolbarArea');
         const contextualToolbarArea = parent.element.querySelector('#' + id + '_contextualToolbarArea');
+        if (!contextualToolbarArea) {
+            return;
+        }
         contextualToolbarArea.classList.remove('e-hide');
         contextualToolbarArea.style.left = toolbarArea.offsetLeft + 'px';
         if (type === 'filter') {
@@ -24752,15 +23800,13 @@ class ToolbarModule {
                 this.renderSlider(cType, isSelect);
             }
         }
-        if (!isBlazor()) {
-            if (parent.toolbarTemplate) {
-                this.toolbarHeight = parent.element.querySelector('#' + parent.element.id + '_toolbarArea').clientHeight;
-            }
-            else if (parent.element.querySelector('#' + parent.element.id + '_toolbar')) {
-                this.toolbarHeight = parent.element.querySelector('#' + parent.element.id + '_toolbar').clientHeight;
-            }
-            parent.toolbarHeight = this.toolbarHeight;
+        if (parent.toolbarTemplate) {
+            this.toolbarHeight = parent.element.querySelector('#' + parent.element.id + '_toolbarArea').clientHeight;
+        }
+        else if (parent.element.querySelector('#' + parent.element.id + '_toolbar')) {
+            this.toolbarHeight = parent.element.querySelector('#' + parent.element.id + '_toolbar').clientHeight;
         }
+        parent.toolbarHeight = this.toolbarHeight;
         if (Browser.isDevice) {
             let cHt = contextualToolbarArea.offsetHeight + 1;
             const cusWrapper = parent.element.querySelector('#' + id + '_customizeWrapper');
@@ -25545,7 +24591,7 @@ class ToolbarModule {
         }
         return toolbarItems;
     }
-    initCropTransformToolbar(shape) {
+    initCropTransformToolbar(shape, isTransform) {
         const parent = this.parent;
         const id = parent.element.id;
         const leftItem = this.getLeftToolbarItem();
@@ -25588,7 +24634,7 @@ class ToolbarModule {
                         toolbar.refreshOverflow();
                     }
                 }
-                if (document.getElementById(id + '_cropBtn')) {
+                if (document.getElementById(id + '_cropBtn') && isNullOrUndefined(isTransform)) {
                     if (!Browser.isDevice) {
                         parent.notify('draw', { prop: 'select', onPropertyChange: false,
                             value: { type: this.getCropTextContent(document.getElementById(id + '_cropBtn')).toLowerCase(),
@@ -25785,7 +24831,7 @@ class ToolbarModule {
                 },
                 beforeClose: () => {
                     fillDDB.toggle();
-                }
+                },
             }, '#' + id + '_shape_fill');
             const fillDDB = new DropDownButton({
                 open: (args) => {
@@ -26257,7 +25303,7 @@ class ToolbarModule {
             fontSizeBtn.appendTo('#' + id + '_fontSizeBtn');
         }
     }
-    refreshToolbar(type, isApplyBtn, isCropping, isZooming, cType, shape) {
+    refreshToolbar(type, isApplyBtn, isCropping, isZooming, cType, shape, isTransform) {
         const parent = this.parent;
         const id = parent.element.id;
         if (!parent.isImageLoaded || parent.isCropToolbar) {
@@ -26274,10 +25320,18 @@ class ToolbarModule {
                 getComponent(cusWrapper, 'toolbar').destroy();
                 cusWrapper.innerHTML = '';
             }
-            if (toolbarElement && this.defToolbarItems.length > 0) {
+            if (toolbarElement && toolbarElement.classList.contains('e-control') && this.defToolbarItems.length > 0) {
                 getComponent(toolbarElement, 'toolbar').destroy();
                 toolbarElement.innerHTML = '';
             }
+            if (toolbarElement && (this.defToolbarItems.length > 0 ||
+                parent.toolbar && parent.toolbar.length > 0 && parent.toolbar.indexOf('Open') === -1)) {
+                let toolbar = getComponent(toolbarElement, 'toolbar');
+                if (!isNullOrUndefined(toolbar)) {
+                    toolbar.destroy();
+                    document.getElementById(parent.element.id + '_toolbar').innerHTML = '';
+                }
+            }
             if (bottomToolbar && this.defToolbarItems.length > 0) {
                 if (bottomToolbar.className.indexOf('e-control') > -1) {
                     getComponent(bottomToolbar, 'toolbar').destroy();
@@ -26378,14 +25432,18 @@ class ToolbarModule {
                 this.updateContextualToolbar(type, cType);
                 break;
             case 'croptransform':
-                parent.allowDownScale = false;
-                parent.isCropTab = true;
+                if (isNullOrUndefined(isTransform)) {
+                    parent.allowDownScale = false;
+                    parent.isCropTab = true;
+                }
                 if (Browser.isDevice) {
                     this.initMainToolbar(false, true, true);
                 }
-                parent.updateCropTransformItems();
-                this.initCropTransformToolbar(shape);
-                if (Browser.isDevice) {
+                if (isNullOrUndefined(isTransform)) {
+                    parent.updateCropTransformItems();
+                }
+                this.initCropTransformToolbar(shape, isTransform);
+                if (Browser.isDevice && this.isToolbar()) {
                     this.updateContextualToolbar('color', 'straighten', true);
                 }
                 break;
@@ -26411,17 +25469,21 @@ class ToolbarModule {
         this.currToolbar = type;
         this.refreshDropDownBtn(isCropping);
     }
-    performCropTransformClick(shape) {
+    performCropTransformClick(shape, isTransform) {
         const parent = this.parent;
-        parent.notify('draw', { prop: 'setTempStraightenZoomDeg' });
-        parent.tempStraighten = parent.transform.straighten;
-        if (parent.currObjType.isFiltered) {
-            parent.okBtn();
+        if (isNullOrUndefined(isTransform)) {
+            parent.notify('draw', { prop: 'setTempStraightenZoomDeg' });
+            parent.tempStraighten = parent.transform.straighten;
+            if (parent.currObjType.isFiltered) {
+                parent.okBtn();
+            }
+            parent.isStraightening = true;
+        }
+        this.refreshToolbar('croptransform', null, null, null, null, shape, isTransform);
+        if (isNullOrUndefined(isTransform)) {
+            parent.notify('draw', { prop: 'setDestForStraighten' });
+            parent.notify('draw', { prop: 'setTempDestForStraighten' });
         }
-        parent.isStraightening = true;
-        this.refreshToolbar('croptransform', null, null, null, null, shape);
-        parent.notify('draw', { prop: 'setDestForStraighten' });
-        parent.notify('draw', { prop: 'setTempDestForStraighten' });
     }
     getAdjustmentToolbarItem() {
         const toolbarItems = [];
@@ -27778,33 +26840,7 @@ class ToolbarModule {
                     break;
                 case 'edittext':
                     if (!parent.element.querySelector('#' + id + '_editText').classList.contains('e-disabled')) {
-                        this.upperContext.clearRect(0, 0, parent.upperCanvas.width, parent.upperCanvas.height);
-                        parent.notify('selection', { prop: 'setTempActObj', onPropertyChange: false,
-                            value: { obj: extend({}, parent.activeObj, {}, true) } });
-                        parent.notify('selection', { prop: 'setInitialTextEdit', onPropertyChange: false,
-                            value: { bool: true } });
-                        parent.notify('draw', { prop: 'setPrevActObj', onPropertyChange: false,
-                            value: { prevActObj: extend({}, parent.activeObj, {}, true) } });
-                        if (parent.activeObj.rotatedAngle !== 0) {
-                            const object = { x: points.x, y: points.y };
-                            parent.notify('shape', { prop: 'getTextBoxPosition', onPropertyChange: false,
-                                value: { obj: parent.activeObj, object: object } });
-                            points.x = object['x'];
-                            points.y = object['y'];
-                            const object1 = { x: points.x, y: points.y };
-                            parent.notify('shape', { prop: 'setFlipState', onPropertyChange: false,
-                                value: { x: points.x, y: points.y, obj: parent.activeObj, object: object1 } });
-                            points.x = object1['x'];
-                            points.y = object1['y'];
-                        }
-                        parent.notify('shape', { prop: 'renderTextArea', onPropertyChange: false,
-                            value: { x: points.x, y: points.y, actObj: parent.activeObj } });
-                        if (isNullOrUndefined(parent.activeObj.currIndex)) {
-                            parent.notify('draw', { prop: 'setShapeTextInsert', onPropertyChange: false, value: { bool: true } });
-                        }
-                        if (document.getElementById(id + '_quickAccessToolbarArea')) {
-                            document.getElementById(id + '_quickAccessToolbarArea').style.display = 'none';
-                        }
+                        this.editText();
                     }
                     break;
                 case 'rotleft':
@@ -27837,6 +26873,37 @@ class ToolbarModule {
             parent.trigger('quickAccessToolbarItemClick', args);
         }
     }
+    editText() {
+        const parent = this.parent;
+        const points = { x: parent.activeObj.activePoint.startX, y: parent.activeObj.activePoint.startY };
+        this.upperContext.clearRect(0, 0, parent.upperCanvas.width, parent.upperCanvas.height);
+        parent.notify('selection', { prop: 'setTempActObj', onPropertyChange: false,
+            value: { obj: extend({}, parent.activeObj, {}, true) } });
+        parent.notify('selection', { prop: 'setInitialTextEdit', onPropertyChange: false,
+            value: { bool: true } });
+        parent.notify('draw', { prop: 'setPrevActObj', onPropertyChange: false,
+            value: { prevActObj: extend({}, parent.activeObj, {}, true) } });
+        if (parent.activeObj.rotatedAngle !== 0) {
+            const object = { x: points.x, y: points.y };
+            parent.notify('shape', { prop: 'getTextBoxPosition', onPropertyChange: false,
+                value: { obj: parent.activeObj, object: object } });
+            points.x = object['x'];
+            points.y = object['y'];
+            const object1 = { x: points.x, y: points.y };
+            parent.notify('shape', { prop: 'setFlipState', onPropertyChange: false,
+                value: { x: points.x, y: points.y, obj: parent.activeObj, object: object1 } });
+            points.x = object1['x'];
+            points.y = object1['y'];
+        }
+        parent.notify('shape', { prop: 'renderTextArea', onPropertyChange: false,
+            value: { x: points.x, y: points.y, actObj: parent.activeObj } });
+        if (isNullOrUndefined(parent.activeObj.currIndex)) {
+            parent.notify('draw', { prop: 'setShapeTextInsert', onPropertyChange: false, value: { bool: true } });
+        }
+        if (document.getElementById(parent.element.id + '_quickAccessToolbarArea')) {
+            document.getElementById(parent.element.id + '_quickAccessToolbarArea').style.display = 'none';
+        }
+    }
     duplicateShape(isPreventUndoRedo, isPublicMethod) {
         const parent = this.parent;
         const tempObj = { activePoint: { startX: 0, startY: 0, endX: 0, endY: 0, width: 0, height: 0 },
@@ -28090,7 +27157,6 @@ class ToolbarModule {
                             parseFloat(getComponent(aspectRatioHeight, 'numerictextbox').placeholder);
                         parent.notify('transform', { prop: 'resize', value: { width: parent.aspectWidth, height: parent.aspectHeight, isAspectRatio: false } });
                     }
-                    parent.cancelCropSelection = null;
                     parent.resizeSrc = { startX: parent.img.srcLeft, startY: parent.img.srcTop, width: parent.img.srcWidth,
                         height: parent.img.srcHeight };
                     this.refreshToolbar('resize');
@@ -28783,91 +27849,93 @@ class ToolbarModule {
         if (!parent.isImageLoaded) {
             return;
         }
-        const selFillElem = parent.element.querySelector('.e-fill.e-template .e-dropdownbtn-preview');
-        const selStrokeElem = parent.element.querySelector('.e-stroke.e-template .e-dropdownbtn-preview');
-        const selTextStrokeElem = parent.element.querySelector('.e-text-font-color.e-template .e-dropdownbtn-preview');
-        const selPenStrokeElem = parent.element.querySelector('.e-pen-stroke-color.e-template .e-dropdownbtn-preview');
-        const strokeWidthElem = parent.element.querySelector('.e-shape-stroke-width');
-        const fontFamilyElem = parent.element.querySelector('.e-text-font-family');
-        const fontSizeElem = parent.element.querySelector('.e-text-font-size');
-        const boldBtn = parent.element.querySelector('#' + id + '_bold');
-        const italicBtn = parent.element.querySelector('#' + id + '_italic');
-        if (parent.activeObj.strokeSettings && parent.activeObj.textSettings) {
-            if (isNullOrUndefined(parent.activeObj.strokeSettings.strokeWidth)) {
-                parent.activeObj.strokeSettings.strokeWidth = 2;
-            }
-            if (selFillElem) {
-                const value = parent.activeObj.strokeSettings.fillColor;
-                if (parent.activeObj.strokeSettings.fillColor === '') {
-                    selFillElem.classList.add('e-nocolor-item');
-                }
-                else {
-                    selFillElem.classList.remove('e-nocolor-item');
-                    selFillElem.style.background = value;
-                }
-                if (document.querySelector('#' + id + '_shape_fill')) {
-                    getComponent(id + '_shape_fill', 'colorpicker').value = value;
-                }
-            }
-            if (selStrokeElem) {
-                const value = parent.activeObj.strokeSettings.strokeColor;
-                selStrokeElem.style.background = value;
-                if (document.querySelector('#' + id + '_shape_stroke')) {
-                    getComponent(id + '_shape_stroke', 'colorpicker').value = value;
-                }
-            }
-            if (selTextStrokeElem) {
-                const value = parent.activeObj.strokeSettings.strokeColor;
-                selTextStrokeElem.style.background = value;
-                if (document.querySelector('#' + id + '_text_font')) {
-                    getComponent(id + '_text_font', 'colorpicker').value = value;
+        if (this.isToolbar()) {
+            const selFillElem = parent.element.querySelector('.e-fill.e-template .e-dropdownbtn-preview');
+            const selStrokeElem = parent.element.querySelector('.e-stroke.e-template .e-dropdownbtn-preview');
+            const selTextStrokeElem = parent.element.querySelector('.e-text-font-color.e-template .e-dropdownbtn-preview');
+            const selPenStrokeElem = parent.element.querySelector('.e-pen-stroke-color.e-template .e-dropdownbtn-preview');
+            const strokeWidthElem = parent.element.querySelector('.e-shape-stroke-width');
+            const fontFamilyElem = parent.element.querySelector('.e-text-font-family');
+            const fontSizeElem = parent.element.querySelector('.e-text-font-size');
+            const boldBtn = parent.element.querySelector('#' + id + '_bold');
+            const italicBtn = parent.element.querySelector('#' + id + '_italic');
+            if (parent.activeObj.strokeSettings && parent.activeObj.textSettings) {
+                if (isNullOrUndefined(parent.activeObj.strokeSettings.strokeWidth)) {
+                    parent.activeObj.strokeSettings.strokeWidth = 2;
+                }
+                if (selFillElem) {
+                    const value = parent.activeObj.strokeSettings.fillColor;
+                    if (parent.activeObj.strokeSettings.fillColor === '') {
+                        selFillElem.classList.add('e-nocolor-item');
+                    }
+                    else {
+                        selFillElem.classList.remove('e-nocolor-item');
+                        selFillElem.style.background = value;
+                    }
+                    if (document.querySelector('#' + id + '_shape_fill')) {
+                        getComponent(id + '_shape_fill', 'colorpicker').value = value;
+                    }
                 }
-            }
-            if (selPenStrokeElem) {
-                const value = parent.activeObj.strokeSettings.strokeColor;
-                selPenStrokeElem.style.background = value;
-                if (document.querySelector('#' + id + '_pen_stroke')) {
-                    getComponent(id + '_pen_stroke', 'colorpicker').value = value;
+                if (selStrokeElem) {
+                    const value = parent.activeObj.strokeSettings.strokeColor;
+                    selStrokeElem.style.background = value;
+                    if (document.querySelector('#' + id + '_shape_stroke')) {
+                        getComponent(id + '_shape_stroke', 'colorpicker').value = value;
+                    }
                 }
-                const obj = { penOpacity: 1 };
-                parent.notify('freehand-draw', { prop: 'getPenOpacity', onPropertyChange: false, value: { obj: obj } });
-            }
-            if (fontFamilyElem) {
-                if (Browser.isDevice) {
-                    fontFamilyElem.setAttribute('style', 'font-family:' + parent.activeObj.textSettings.fontFamily.toLowerCase());
+                if (selTextStrokeElem) {
+                    const value = parent.activeObj.strokeSettings.strokeColor;
+                    selTextStrokeElem.style.background = value;
+                    if (document.querySelector('#' + id + '_text_font')) {
+                        getComponent(id + '_text_font', 'colorpicker').value = value;
+                    }
                 }
-                else {
-                    fontFamilyElem.textContent = parent.activeObj.textSettings.fontFamily;
+                if (selPenStrokeElem) {
+                    const value = parent.activeObj.strokeSettings.strokeColor;
+                    selPenStrokeElem.style.background = value;
+                    if (document.querySelector('#' + id + '_pen_stroke')) {
+                        getComponent(id + '_pen_stroke', 'colorpicker').value = value;
+                    }
+                    const obj = { penOpacity: 1 };
+                    parent.notify('freehand-draw', { prop: 'getPenOpacity', onPropertyChange: false, value: { obj: obj } });
                 }
-            }
-            if (fontSizeElem) {
-                for (let i = 0; i < parent.fontSizeColl.length; i++) {
-                    if (parseInt(parent.fontSizeColl[i].text, 10) >= Math.round(parent.activeObj.textSettings.fontSize)) {
-                        fontSizeElem.textContent = (i + 1).toString();
-                        break;
+                if (fontFamilyElem) {
+                    if (Browser.isDevice) {
+                        fontFamilyElem.setAttribute('style', 'font-family:' + parent.activeObj.textSettings.fontFamily.toLowerCase());
+                    }
+                    else {
+                        fontFamilyElem.textContent = parent.activeObj.textSettings.fontFamily;
                     }
                 }
-            }
-            if (boldBtn) {
-                if (parent.activeObj.textSettings.bold) {
-                    boldBtn.classList.add('e-selected-btn');
+                if (fontSizeElem) {
+                    for (let i = 0; i < parent.fontSizeColl.length; i++) {
+                        if (parseInt(parent.fontSizeColl[i].text, 10) >= Math.round(parent.activeObj.textSettings.fontSize)) {
+                            fontSizeElem.textContent = (i + 1).toString();
+                            break;
+                        }
+                    }
                 }
-                else {
-                    boldBtn.classList.remove('e-selected-btn');
+                if (boldBtn) {
+                    if (parent.activeObj.textSettings.bold) {
+                        boldBtn.classList.add('e-selected-btn');
+                    }
+                    else {
+                        boldBtn.classList.remove('e-selected-btn');
+                    }
                 }
-            }
-            if (italicBtn) {
-                if (parent.activeObj.textSettings.italic) {
-                    italicBtn.classList.add('e-selected-btn');
+                if (italicBtn) {
+                    if (parent.activeObj.textSettings.italic) {
+                        italicBtn.classList.add('e-selected-btn');
+                    }
+                    else {
+                        italicBtn.classList.remove('e-selected-btn');
+                    }
                 }
-                else {
-                    italicBtn.classList.remove('e-selected-btn');
+                if (strokeWidthElem) {
+                    const strokeWidth = Math.round((parent.activeObj.strokeSettings.strokeWidth)).toString();
+                    strokeWidthElem.textContent = this.getStrokeWidth(strokeWidth);
                 }
             }
-            if (strokeWidthElem) {
-                const strokeWidth = Math.round((parent.activeObj.strokeSettings.strokeWidth)).toString();
-                strokeWidthElem.textContent = this.getStrokeWidth(strokeWidth);
-            }
         }
     }
     getStrokeWidth(text) {