@syncfusion/ej2-image-editor 24.2.5 → 25.1.35

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

@@ -1,5 +1,5 @@
-import { Browser, EventHandler, extend, getComponent, isBlazor, isNullOrUndefined } from '@syncfusion/ej2-base';
-import { ZoomTrigger } from '../index';
+import { Browser, EventHandler, extend, getComponent, isNullOrUndefined } from '@syncfusion/ej2-base';
+import { ShapeType, ZoomTrigger } from '../index';
 var Selection = /** @class */ (function () {
     function Selection(parent) {
         this.diffPoint = { x: 0, y: 0 }; // updates resize points
@@ -76,7 +76,7 @@ var Selection = /** @class */ (function () {
                 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']);
@@ -1107,15 +1107,7 @@ var Selection = /** @class */ (function () {
             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(function (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';
                 }
@@ -1136,51 +1128,20 @@ var Selection = /** @class */ (function () {
                         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(function (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(function (shapeResizingArgs) {
-                    parent.notify('shape', { prop: 'updateShapeChangeEventArgs', onPropertyChange: false,
-                        value: { shapeSettings: shapeResizingArgs.currentShapeSettings } });
-                });
-            }
-            else {
-                parent.trigger('shapeChanging', shapeResizingArgs);
-                parent.notify('shape', { prop: 'updateShapeChangeEventArgs', onPropertyChange: false,
-                    value: { shapeSettings: shapeResizingArgs.currentShapeSettings } });
-            }
+            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(function (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;
     };
@@ -2748,7 +2709,6 @@ var Selection = /** @class */ (function () {
         }
     };
     Selection.prototype.mouseDownEventHandler = function (e) {
-        var _this = this;
         var parent = this.parent;
         this.mouseDown = e.currentTarget === parent.lowerCanvas || e.currentTarget === parent.upperCanvas ?
             'canvas' : '';
@@ -2774,16 +2734,8 @@ var Selection = /** @class */ (function () {
             this.dragCanvas = parent.togglePan = true;
         }
         var 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(function (imageEditorClickEventArgs) {
-                _this.clickEvent(imageEditorClickEventArgs, e);
-            });
-        }
-        else {
-            parent.trigger('click', imageEditorClickEventArgs);
-            this.clickEvent(imageEditorClickEventArgs, e);
-        }
+        parent.trigger('click', imageEditorClickEventArgs);
+        this.clickEvent(imageEditorClickEventArgs, e);
     };
     Selection.prototype.getImagePoints = function (x, y) {
         var parent = this.parent;
@@ -2889,13 +2841,8 @@ var Selection = /** @class */ (function () {
             }
         }
         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) {
@@ -2911,9 +2858,7 @@ var Selection = /** @class */ (function () {
             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 });
             }
             var shape = parent.activeObj.shape;
             var shapeColl = ['rectangle', 'ellipse', 'line', 'arrow', 'path', 'text', 'image'];
@@ -2921,13 +2866,8 @@ var Selection = /** @class */ (function () {
                 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);
         }
@@ -2976,13 +2916,7 @@ var Selection = /** @class */ (function () {
                     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();
@@ -3003,13 +2937,18 @@ var Selection = /** @class */ (function () {
                     if (qbArea) {
                         qbArea.style.display = 'none';
                     }
-                }
-                if (!isBlazor()) {
-                    var 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
+                    var point = parent.pointColl[indexObj['freehandSelectedIndex']];
+                    var 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 };
+                    var shapeChangedArgs = { action: 'apply', currentShapeSettings: extend({}, shapeSettings, {}, true) };
+                    parent.trigger('shapeChange', shapeChangedArgs);
+                }
+                var isPenDraw = parent.togglePen;
+                parent.notify('toolbar', { prop: 'close-contextual-toolbar', onPropertyChange: false });
+                if (isPenDraw) {
+                    parent.freehandDraw(true);
                 }
                 this.isFhdEditing = false;
                 if (isLineArrow) {
@@ -3243,54 +3182,6 @@ var Selection = /** @class */ (function () {
             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(function (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) {
-                        var 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(function (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(function (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 */
                 var elem = e.srcElement;
@@ -3364,9 +3255,7 @@ var Selection = /** @class */ (function () {
                     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) {
@@ -3382,37 +3271,26 @@ var Selection = /** @class */ (function () {
                         isCropSelection_1 = true;
                     }
                     var shape = parent.activeObj.shape;
-                    if (!isBlazor()) {
-                        var 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',
+                    var 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_1) {
-                            var 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 {
-                        var 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_1) {
+                        var 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) {
@@ -3424,24 +3302,15 @@ var Selection = /** @class */ (function () {
             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,
@@ -3864,7 +3733,6 @@ var Selection = /** @class */ (function () {
         EventHandler.remove(parent.upperCanvas, 'touchmove', this.mouseMoveEventHandler);
     };
     Selection.prototype.keyDownEventHandler = function (e) {
-        var _this = this;
         var parent = this.parent;
         if (e.ctrlKey && (e.key === '+' || e.key === '-')) {
             e.preventDefault();
@@ -3874,16 +3742,8 @@ var Selection = /** @class */ (function () {
         var 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(function (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) {
@@ -3964,37 +3824,21 @@ var Selection = /** @class */ (function () {
                     parent.notify('transform', { prop: 'resize', value: { width: point.x, height: point.y, isAspectRatio: false } });
                 }
             }
-            if (isBlazor()) {
-                var aspectRatioHeight = this.parent.element.querySelector('.e-ie-toolbar-e-resize-height-input .e-textbox');
-                var 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;
+            var aspectRatioHeight = parent.element.querySelector('#' + parent.element.id + '_resizeHeight');
+            var aspectRatioWidth = parent.element.querySelector('#' + parent.element.id + '_resizeWidth');
+            if (isNullOrUndefined(aspectRatioElement)) {
+                if (aspectRatioHeight) {
+                    var elem = getComponent(aspectRatioHeight, 'numerictextbox');
+                    if (aspectRatioHeight && aspectRatioHeight.value === '') {
+                        elem.value = parseFloat(elem.placeholder);
+                        aspectRatioHeight.value = elem.placeholder + 'px';
                     }
                 }
-            }
-            else {
-                var aspectRatioHeight = parent.element.querySelector('#' + parent.element.id + '_resizeHeight');
-                var aspectRatioWidth = parent.element.querySelector('#' + parent.element.id + '_resizeWidth');
-                if (isNullOrUndefined(aspectRatioElement)) {
-                    if (aspectRatioHeight) {
-                        var elem = getComponent(aspectRatioHeight, 'numerictextbox');
-                        if (aspectRatioHeight && aspectRatioHeight.value === '') {
-                            elem.value = parseFloat(elem.placeholder);
-                            aspectRatioHeight.value = elem.placeholder + 'px';
-                        }
-                    }
-                    if (aspectRatioWidth) {
-                        var elem = getComponent(aspectRatioWidth, 'numerictextbox');
-                        if (aspectRatioWidth && aspectRatioWidth.value === '') {
-                            elem.value = parseFloat(elem.placeholder);
-                            aspectRatioWidth.value = elem.placeholder + 'px';
-                        }
+                if (aspectRatioWidth) {
+                    var elem = getComponent(aspectRatioWidth, 'numerictextbox');
+                    if (aspectRatioWidth && aspectRatioWidth.value === '') {
+                        elem.value = parseFloat(elem.placeholder);
+                        aspectRatioWidth.value = elem.placeholder + 'px';
                     }
                 }
             }
@@ -4015,7 +3859,7 @@ var Selection = /** @class */ (function () {
         var bool = false;
         /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
         var 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;
@@ -4051,9 +3895,7 @@ var Selection = /** @class */ (function () {
             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 });
             }
             var type = '';
             if (e.type === 'mousewheel' && (parent.zoomSettings.zoomTrigger & ZoomTrigger.MouseWheel) === ZoomTrigger.MouseWheel) {
@@ -4101,18 +3943,23 @@ var Selection = /** @class */ (function () {
         parent.textArea.setAttribute('rows', this.textRow.toString());
         this.isInitialTextEdited = false;
     };
-    Selection.prototype.clearSelection = function () {
+    Selection.prototype.clearSelection = function (resetCrop) {
         var 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';
+            }
         }
     };
     Selection.prototype.setDragDirection = function (width, height) {
@@ -4248,7 +4095,6 @@ var Selection = /** @class */ (function () {
         }
     };
     Selection.prototype.findTargetObj = function (x, y, isCrop) {
-        var _this = this;
         var parent = this.parent;
         var isShape = false;
         if (parent.objColl.length !== 0 && !parent.currObjType.isCustomCrop && !isCrop) {
@@ -4408,11 +4254,11 @@ var Selection = /** @class */ (function () {
                 var tempTextSettings = extend({}, parent.activeObj.textSettings, {}, true);
                 parent.notify('draw', { prop: 'setTempTextSettings', onPropertyChange: false, value: { tempTextSettings: tempTextSettings } });
                 var shapeSettings = this.updatePrevShapeSettings();
-                var shapeChangingArgs_1 = { cancel: false, action: 'select', previousShapeSettings: shapeSettings,
+                var shapeChangingArgs = { cancel: false, action: 'select', previousShapeSettings: shapeSettings,
                     currentShapeSettings: shapeSettings };
                 if (parent.activeObj.shape === 'line' || parent.activeObj.shape === 'arrow') {
-                    shapeChangingArgs_1.currentShapeSettings.width = parent.activeObj.activePoint.endX - parent.activeObj.activePoint.startX;
-                    shapeChangingArgs_1.currentShapeSettings.height = parent.activeObj.activePoint.endY - parent.activeObj.activePoint.startY;
+                    shapeChangingArgs.currentShapeSettings.width = parent.activeObj.activePoint.endX - parent.activeObj.activePoint.startX;
+                    shapeChangingArgs.currentShapeSettings.height = parent.activeObj.activePoint.endY - parent.activeObj.activePoint.startY;
                 }
                 this.isCropSelection = false;
                 var splitWords = void 0;
@@ -4422,59 +4268,30 @@ var Selection = /** @class */ (function () {
                 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_1, null).then(function (shapeChangingArgs) {
-                        _this.shapeEvent(shapeChangingArgs);
-                    });
-                }
-                else if (!this.isCropSelection) {
-                    parent.trigger('shapeChanging', shapeChangingArgs_1);
-                    this.shapeEvent(shapeChangingArgs_1);
+                if (!this.isCropSelection) {
+                    parent.trigger('shapeChanging', shapeChangingArgs);
+                    this.shapeEvent(shapeChangingArgs);
                 }
                 else {
-                    var selectionChangingArgs = { action: shapeChangingArgs_1.action,
+                    var selectionChangingArgs = { action: shapeChangingArgs.action,
                         previousSelectionSettings: { type: parent.getSelectionType(parent.activeObj.shape),
-                            startX: shapeChangingArgs_1.previousShapeSettings.startX,
-                            startY: shapeChangingArgs_1.previousShapeSettings.startY,
-                            width: shapeChangingArgs_1.previousShapeSettings.width,
-                            height: shapeChangingArgs_1.previousShapeSettings.height },
+                            startX: shapeChangingArgs.previousShapeSettings.startX,
+                            startY: shapeChangingArgs.previousShapeSettings.startY,
+                            width: shapeChangingArgs.previousShapeSettings.width,
+                            height: shapeChangingArgs.previousShapeSettings.height },
                         currentSelectionSettings: { type: parent.getSelectionType(parent.activeObj.shape),
-                            startX: shapeChangingArgs_1.currentShapeSettings.startX,
-                            startY: shapeChangingArgs_1.currentShapeSettings.startY,
-                            width: shapeChangingArgs_1.currentShapeSettings.width,
-                            height: shapeChangingArgs_1.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(function (selectionChangingArgs) {
-                            shapeChangingArgs_1.currentShapeSettings.startX = selectionChangingArgs.currentSelectionSettings.startX;
-                            shapeChangingArgs_1.currentShapeSettings.startY = selectionChangingArgs.currentSelectionSettings.startY;
-                            shapeChangingArgs_1.currentShapeSettings.width = selectionChangingArgs.currentSelectionSettings.width;
-                            shapeChangingArgs_1.currentShapeSettings.height = selectionChangingArgs.currentSelectionSettings.height;
-                            _this.shapeEvent(shapeChangingArgs_1);
-                        });
-                    }
-                    else {
-                        parent.trigger('selectionChanging', selectionChangingArgs);
-                        shapeChangingArgs_1.currentShapeSettings.startX = selectionChangingArgs.currentSelectionSettings.startX;
-                        shapeChangingArgs_1.currentShapeSettings.startY = selectionChangingArgs.currentSelectionSettings.startY;
-                        shapeChangingArgs_1.currentShapeSettings.width = selectionChangingArgs.currentSelectionSettings.width;
-                        shapeChangingArgs_1.currentShapeSettings.height = selectionChangingArgs.currentSelectionSettings.height;
-                        this.shapeEvent(shapeChangingArgs_1);
-                    }
+                            startX: shapeChangingArgs.currentShapeSettings.startX,
+                            startY: shapeChangingArgs.currentShapeSettings.startY,
+                            width: shapeChangingArgs.currentShapeSettings.width,
+                            height: shapeChangingArgs.currentShapeSettings.height } };
+                    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 */
-                    var tempCursor = parent.upperCanvas.style.cursor;
-                    this.setCursor(x, y);
-                    if (shapeChangingArgs_1.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;
@@ -4695,9 +4512,7 @@ var Selection = /** @class */ (function () {
                         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 });
         }
     };
     Selection.prototype.getCurrentFlipState = function () {
@@ -4804,12 +4619,7 @@ var Selection = /** @class */ (function () {
                 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);
@@ -4829,15 +4639,8 @@ var Selection = /** @class */ (function () {
                 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,
@@ -4867,6 +4670,11 @@ var Selection = /** @class */ (function () {
     Selection.prototype.updatePrevShapeSettings = function (obj) {
         var parent = this.parent;
         var fontStyle = [];
+        if (isNullOrUndefined(parent.activeObj.currIndex)) {
+            var 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');
@@ -4998,14 +4806,8 @@ var Selection = /** @class */ (function () {
         var width;
         var widthElement;
         var 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) {
             var heightString = heightElement.value.replace(/,/g, '');
             var widthString = widthElement.value.replace(/,/g, '');
@@ -5028,14 +4830,8 @@ var Selection = /** @class */ (function () {
         var isValue = true;
         var widthElement;
         var 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;