@syncfusion/ej2-image-editor 24.2.8 → 25.1.37

package/dist/global/index.d.ts

@@ -1,6 +1,6 @@
 /*!
 *  filename: index.d.ts
-*  version : 24.2.8
+*  version : 25.1.37
 *  Copyright Syncfusion Inc. 2001 - 2023. All rights reserved.
 *  Use of this code is subject to the terms of our license.
 *  A copy of the current license can be obtained at any time by e-mailing

package/package.json

@@ -1,8 +1,8 @@
 {
   "_from": "@syncfusion/ej2-image-editor@*",
-  "_id": "@syncfusion/ej2-image-editor@24.2.5",
+  "_id": "@syncfusion/ej2-image-editor@25.1.35",
   "_inBundle": false,
-  "_integrity": "sha512-HL71/r90EJJh5CG9XlV11LJ6co+jnhvw1gvx+KaOA2CJuBdtjEoWdwY1yOyb8mTrutqV2/7i2Bg8hA0890GxFw==",
+  "_integrity": "sha512-5qgANXLk/5NEFF8XAN6BInARWPl05THFM9omABEmDd1S+LGIftOn17KlJVHymHA0wQM0sR3ySb1FGgunvOyfNA==",
   "_location": "/@syncfusion/ej2-image-editor",
   "_phantomChildren": {},
   "_requested": {
@@ -23,21 +23,21 @@
     "/@syncfusion/ej2-react-image-editor",
     "/@syncfusion/ej2-vue-image-editor"
   ],
-  "_resolved": "https://nexus.syncfusioninternal.com/repository/ej2-hotfix-new/@syncfusion/ej2-image-editor/-/ej2-image-editor-24.2.5.tgz",
-  "_shasum": "d0df1fb621600b316772fa681cbea96a24fcee5a",
+  "_resolved": "https://nexus.syncfusioninternal.com/repository/ej2-hotfix-new/@syncfusion/ej2-image-editor/-/ej2-image-editor-25.1.35.tgz",
+  "_shasum": "6f29e792a5be807112e90420e9d09ae40534ea77",
   "_spec": "@syncfusion/ej2-image-editor@*",
-  "_where": "/jenkins/workspace/elease-automation_release_24.1.1/packages/included",
+  "_where": "/jenkins/workspace/elease-automation_release_25.1.1/packages/included",
   "author": {
     "name": "Syncfusion Inc."
   },
   "bundleDependencies": false,
   "dependencies": {
-    "@syncfusion/ej2-base": "~24.2.7",
-    "@syncfusion/ej2-buttons": "~24.2.7",
-    "@syncfusion/ej2-inputs": "~24.2.7",
-    "@syncfusion/ej2-navigations": "~24.2.8",
-    "@syncfusion/ej2-popups": "~24.2.8",
-    "@syncfusion/ej2-splitbuttons": "~24.2.7"
+    "@syncfusion/ej2-base": "~25.1.35",
+    "@syncfusion/ej2-buttons": "~25.1.35",
+    "@syncfusion/ej2-inputs": "~25.1.37",
+    "@syncfusion/ej2-navigations": "~25.1.37",
+    "@syncfusion/ej2-popups": "~25.1.35",
+    "@syncfusion/ej2-splitbuttons": "~25.1.37"
   },
   "deprecated": false,
   "description": "Essential JS 2 ImageEditor",
@@ -67,7 +67,7 @@
     "url": "https://github.com/syncfusion/ej2-javascript-ui-controls/tree/master/controls/imageeditor"
   },
   "typings": "index.d.ts",
-  "version": "24.2.8",
+  "version": "25.1.37",
   "sideEffects": false,
   "homepage": "https://www.syncfusion.com/javascript-ui-controls"
 }

package/src/image-editor/action/crop.js

@@ -1,4 +1,4 @@
-import { Browser, extend, isBlazor, isNullOrUndefined } from '@syncfusion/ej2-base';
+import { Browser, extend, isNullOrUndefined } from '@syncfusion/ej2-base';
 var Crop = /** @class */ (function () {
     function Crop(parent) {
         this.croppedDegree = 0; // Specifies the degree when crop is performed
@@ -845,35 +845,19 @@ var Crop = /** @class */ (function () {
         }
     };
     Crop.prototype.crop = function (obj) {
-        var _this = this;
         var parent = this.parent;
         var _a = parent.activeObj.activePoint, startX = _a.startX, startY = _a.startY, endX = _a.endX, endY = _a.endY;
         if (!parent.disabled && parent.isImageLoaded) {
-            var object_1 = { isCropToolbar: parent.isCropToolbar };
-            if (parent.currObjType.isUndoAction && !object_1['isCropToolbar']) {
+            var object = { isCropToolbar: parent.isCropToolbar };
+            if (parent.currObjType.isUndoAction && !object['isCropToolbar']) {
                 parent.notify('undo-redo', { prop: 'refreshUrc', value: { bool: null } });
             }
             var transitionArgs = { cancel: false, startPoint: { x: startX, y: startY },
                 endPoint: { x: endX, y: endY }, preventScaling: false };
-            if (!object_1['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_1);
-                }
-                else {
-                    /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
-                    parent.dotNetRef.invokeMethodAsync('CropEventAsync', 'OnCrop', transitionArgs, null).then(function (args) {
-                        _this.cropEvent(args, obj, object_1);
-                    });
-                }
-            }
-            else {
-                if (!object_1['isCropToolbar']) {
-                    parent.trigger('cropping', transitionArgs);
-                }
-                this.cropEvent(transitionArgs, obj, object_1);
+            if (!object['isCropToolbar']) {
+                parent.trigger('cropping', transitionArgs);
             }
+            this.cropEvent(transitionArgs, obj, object);
         }
     };
     Crop.prototype.cropEvent = function (transitionArgs, obj, object) {
@@ -908,25 +892,14 @@ var Crop = /** @class */ (function () {
                 var aspectIcon = parent.element.querySelector('#' + parent.element.id + '_aspectratio');
                 var 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 { }
             }
         }
     };
@@ -945,25 +918,16 @@ var Crop = /** @class */ (function () {
     };
     Crop.prototype.resizeWrapper = function () {
         var parent = this.parent;
-        if (Browser.isDevice && !isBlazor()) {
+        if (Browser.isDevice) {
             var elem = parent.element;
             var 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();
-            var 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 } });
-        }
     };
     Crop.prototype.calcRatio = function (obj, dimension) {
         var parent = this.parent;

package/src/image-editor/action/draw.js

@@ -1,4 +1,4 @@
-import { extend, isNullOrUndefined, Browser, isBlazor, getComponent } from '@syncfusion/ej2-base';
+import { extend, isNullOrUndefined, Browser, getComponent } from '@syncfusion/ej2-base';
 import { Dialog, hideSpinner, showSpinner } from '@syncfusion/ej2-popups';
 var Draw = /** @class */ (function () {
     function Draw(parent) {
@@ -2419,36 +2419,21 @@ var Draw = /** @class */ (function () {
                 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 });
-                    var 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 });
-                    var 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 });
+                var 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 });
+                var 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 = function () {
@@ -2460,12 +2445,7 @@ var Draw = /** @class */ (function () {
     Draw.prototype.errorLoading = function () {
         var parent = this.parent;
         var 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);
     };
     Draw.prototype.updateBaseImgCanvas = function () {
         var parent = this.parent;
@@ -2550,12 +2530,7 @@ var Draw = /** @class */ (function () {
         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') {
@@ -2575,18 +2550,11 @@ var Draw = /** @class */ (function () {
                 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 } });
@@ -2614,18 +2582,10 @@ var Draw = /** @class */ (function () {
                     value: { context: this.lowerContext, isSave: null, isFlip: null } });
             }
             var 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 });
@@ -2634,12 +2594,7 @@ var Draw = /** @class */ (function () {
         else {
             if (isContextualToolbar && (!Browser.isDevice || (Browser.isDevice && !straightenObj['bool']))) {
                 var 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();
@@ -2655,10 +2610,8 @@ var Draw = /** @class */ (function () {
         }
         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' } });
     };
     Draw.prototype.cancelItems = function () {
         var parent = this.parent;
@@ -2734,6 +2687,7 @@ var Draw = /** @class */ (function () {
                 var temp = parent.isCropTab;
                 parent.isCropTab = false;
                 this.updateCropSelObj();
+                parent.cancelCropSelection = null;
                 parent.isCropTab = temp;
             }
         }
@@ -2761,12 +2715,7 @@ var Draw = /** @class */ (function () {
         parent.currObjType.isCustomCrop = false;
         this.tempStrokeSettings = { strokeColor: '#fff', fillColor: '', strokeWidth: null };
         var 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 });
     };
     Draw.prototype.cancelPen = function () {
         var parent = this.parent;
@@ -2827,12 +2776,7 @@ var Draw = /** @class */ (function () {
                 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 };
     };
@@ -2876,12 +2820,7 @@ var Draw = /** @class */ (function () {
             }
         }
         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 });
     };
     Draw.prototype.cancelSelection = function () {
         var parent = this.parent;
@@ -3070,7 +3009,6 @@ var Draw = /** @class */ (function () {
         }
     };
     Draw.prototype.updateSelectionInsert = function (points) {
-        var _this = this;
         var parent = this.parent;
         var actPoint = parent.activeObj.activePoint;
         var obj = { shapeSettingsObj: {} };
@@ -3079,41 +3017,20 @@ var Draw = /** @class */ (function () {
             startY: obj['shapeSettingsObj']['startY'], width: obj['shapeSettingsObj']['width'], height: obj['shapeSettingsObj']['height'] };
         var 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(function (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);
         }
     };
     Draw.prototype.drawCustomSelection = function (cropShape, startX, startY, width, height) {
@@ -3692,19 +3609,12 @@ var Draw = /** @class */ (function () {
             });
             this.imgCanvasPoints = points;
             var 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;
                 var 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;
             }
@@ -3741,19 +3651,12 @@ var Draw = /** @class */ (function () {
             toolbar.style.display = 'none';
         }
         var 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')) {
-                var 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')) {
+            var height = parent.element.querySelector('#' + id + '_toolbarArea').clientHeight;
+            parent.notify('toolbar', { prop: 'setToolbarHeight', value: { height: height } });
         }
         parent.reset();
         parent.update();
@@ -3819,9 +3722,7 @@ var Draw = /** @class */ (function () {
             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;
     };
     Draw.prototype.showDialogPopup = function () {
@@ -3930,12 +3831,7 @@ var Draw = /** @class */ (function () {
             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);
@@ -4508,7 +4404,6 @@ var Draw = /** @class */ (function () {
         }
     };
     Draw.prototype.triggerFrameChange = function (prevFrameSettings) {
-        var _this = this;
         var parent = this.parent;
         var currFrameSettings = { type: parent.toPascalCase(parent.frameObj.type),
             color: parent.frameObj.color, gradientColor: parent.frameObj.gradientColor, size: parent.frameObj.size,
@@ -4516,59 +4411,9 @@ var Draw = /** @class */ (function () {
             frameLineStyle: parent.toPascalCase(parent.frameObj.border), lineCount: parent.frameObj.amount };
         var 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(function (args) {
-                    if (!args.cancel) {
-                        _this.setFrameObj(args.currentFrameSetting);
-                        var 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
-                            } });
-                        var 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;
-                        }
-                        var graColorDiv = parent.element.querySelector('.e-ie-toolbar-e-frame-gradient');
-                        if (graColorDiv) {
-                            var 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;
     };