@syncfusion/ej2-image-editor 24.2.8 → 25.1.37

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

@@ -1,4 +1,4 @@
-import { EventHandler, extend, isBlazor, isNullOrUndefined } from '@syncfusion/ej2-base';
+import { EventHandler, extend, isNullOrUndefined } from '@syncfusion/ej2-base';
 import { ShapeType } from '../index';
 var Shape = /** @class */ (function () {
     function Shape(parent) {
@@ -28,22 +28,22 @@ var Shape = /** @class */ (function () {
         var 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']);
@@ -217,7 +217,7 @@ var Shape = /** @class */ (function () {
                 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();
@@ -279,26 +279,26 @@ var Shape = /** @class */ (function () {
             { 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 };
     };
-    Shape.prototype.drawEllipse = function (x, y, radiusX, radiusY, strokeWidth, strokeColor, fillColor, degree) {
+    Shape.prototype.drawEllipse = function (x, y, radiusX, radiusY, strokeWidth, strokeColor, fillColor, degree, isSelected) {
         this.initializeShape('ellipse');
         var 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);
     };
-    Shape.prototype.drawLine = function (startX, startY, endX, endY, strokeWidth, strokeColor) {
+    Shape.prototype.drawLine = function (startX, startY, endX, endY, strokeWidth, strokeColor, isSelected) {
         this.initializeShape('line');
         var start = startX && startY ? { x: startX, y: startY } : null;
         var width = endX - startX;
         var 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);
     };
-    Shape.prototype.drawPath = function (pointColl, strokeWidth, strokeColor) {
+    Shape.prototype.drawPath = function (pointColl, strokeWidth, strokeColor, isSelected) {
         var 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);
             var obj = extend({}, parent.objColl[parent.objColl.length - 1], null, true);
             obj.shape = 'path';
             obj.lineDraw = null;
@@ -307,20 +307,20 @@ var Shape = /** @class */ (function () {
             parent.objColl[parent.objColl.length - 1] = obj;
         }
     };
-    Shape.prototype.drawArrow = function (startX, startY, endX, endY, strokeWidth, strokeColor, arrowStart, arrowEnd) {
+    Shape.prototype.drawArrow = function (startX, startY, endX, endY, strokeWidth, strokeColor, arrowStart, arrowEnd, isSelected) {
         this.initializeShape('arrow');
         var start = startX && startY ? { x: startX, y: startY } : null;
         var width = endX - startX;
         var 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);
     };
-    Shape.prototype.drawRectangle = function (x, y, width, height, strokeWidth, strokeColor, fillColor, degree) {
+    Shape.prototype.drawRectangle = function (x, y, width, height, strokeWidth, strokeColor, fillColor, degree, isSelected) {
         this.initializeShape('rectangle');
         var 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);
     };
-    Shape.prototype.drawText = function (x, y, text, fontFamily, fontSize, bold, italic, color) {
-        this.drawShapeText(text, fontFamily, fontSize, bold, italic, color, x, y);
+    Shape.prototype.drawText = function (x, y, text, fontFamily, fontSize, bold, italic, color, isSelected) {
+        this.drawShapeText(text, fontFamily, fontSize, bold, italic, color, x, y, isSelected);
     };
     Shape.prototype.initializeShape = function (type) {
         var parent = this.parent;
@@ -358,13 +358,12 @@ var Shape = /** @class */ (function () {
         }
         return arrowType;
     };
-    Shape.prototype.drawShape = function (type, strokeWidth, strokeColor, fillColor, start, width, height, pointColl, arrowStart, arrowEnd, degree, opacity) {
-        var _this = this;
+    Shape.prototype.drawShape = function (type, strokeWidth, strokeColor, fillColor, start, width, height, pointColl, arrowStart, arrowEnd, degree, opacity, isSelected) {
         var parent = this.parent;
         if (!parent.disabled && parent.isImageLoaded) {
             parent.notify('draw', { prop: 'setImageEdited', onPropertyChange: false });
             this.redrawActObj();
-            var objColl_1 = extend([], parent.objColl, [], true);
+            var objColl = extend([], parent.objColl, [], true);
             parent.togglePen = false;
             this.keyHistory = '';
             parent.upperCanvas.style.display = 'block';
@@ -375,11 +374,9 @@ var Shape = /** @class */ (function () {
                 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 !== '') {
@@ -437,50 +434,24 @@ var Shape = /** @class */ (function () {
                     var shapeSettings = obj['shapeSettingsObj'];
                     var 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(function (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_1 } });
-                            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_1 } });
-                        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;
                 }
             }
         }
@@ -521,8 +492,7 @@ var Shape = /** @class */ (function () {
             value: { obj: selPointCollObj } });
         this.prevObj.selPointColl = extend([], selPointCollObj['selPointColl'], [], true);
     };
-    Shape.prototype.drawShapeText = function (text, fontFamily, fontSize, bold, italic, strokeColor, x, y) {
-        var _this = this;
+    Shape.prototype.drawShapeText = function (text, fontFamily, fontSize, bold, italic, strokeColor, x, y, isSelected) {
         var parent = this.parent;
         if (!parent.disabled && parent.isImageLoaded) {
             if (parent.currObjType.shape === 'freehanddraw') {
@@ -570,24 +540,12 @@ var Shape = /** @class */ (function () {
             var shapeSettings = obj['shapeSettingsObj'];
             var 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(function (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;
         }
     };
     Shape.prototype.drawShapeImageEvent = function (shapeChangingArgs, isSelect) {
@@ -603,16 +561,10 @@ var Shape = /** @class */ (function () {
         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();
@@ -633,22 +585,11 @@ var Shape = /** @class */ (function () {
                 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 });
     };
     Shape.prototype.initializeTextShape = function (text, fontFamily, fontSize, bold, italic, strokeColor) {
         var parent = this.parent;
@@ -667,9 +608,9 @@ var Shape = /** @class */ (function () {
         parent.activeObj.textSettings.bold = bold || parent.activeObj.textSettings.bold;
         parent.activeObj.textSettings.italic = italic || parent.activeObj.textSettings.italic;
     };
-    Shape.prototype.drawImage = function (x, y, width, height, src, degree, isAspectRatio, opacity) {
+    Shape.prototype.drawImage = function (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);
     };
     Shape.prototype.redrawActObj = function (x, y, isMouseDown) {
         var splitWords;
@@ -770,6 +711,8 @@ var Shape = /** @class */ (function () {
             endX: parent.activeObj.activePoint.startX + parent.activeObj.activePoint.width,
             endY: parent.activeObj.activePoint.startY + parent.activeObj.activePoint.height,
             width: selectionSettings.width, height: selectionSettings.height };
+        parent.activeObj.activePoint.endX = parent.activeObj.activePoint.startX + parent.activeObj.activePoint.width;
+        parent.activeObj.activePoint.endY = parent.activeObj.activePoint.startY + parent.activeObj.activePoint.height;
     };
     Shape.prototype.updateShapeChangeEventArgs = function (shapeSettings) {
         var parent = this.parent;
@@ -800,15 +743,10 @@ var Shape = /** @class */ (function () {
             }
             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);
                     }
@@ -816,15 +754,13 @@ var Shape = /** @class */ (function () {
                 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':
@@ -835,6 +771,7 @@ var Shape = /** @class */ (function () {
                     if (shapeSettings.degree) {
                         parent.activeObj.rotatedAngle = shapeSettings.degree * (Math.PI / 180);
                     }
+                    this.updateFontRatio(parent.activeObj);
                     break;
                 case 'rectangle':
                 case 'image':
@@ -848,6 +785,9 @@ var Shape = /** @class */ (function () {
                     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 (var i = 0; i < shapeSettings.fontStyle.length; i++) {
                     switch (shapeSettings.fontStyle[i]) {
                         case 'bold':
@@ -1566,12 +1506,7 @@ var Shape = /** @class */ (function () {
         var parent = this.parent;
         var 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 });
         var dupElem = parent.element.querySelector('#' + parent.element.id + '_duplicate');
         var removeElem = parent.element.querySelector('#' + parent.element.id + '_remove');
         var editTextElem = parent.element.querySelector('#' + parent.element.id + '_editText');
@@ -1884,12 +1819,7 @@ var Shape = /** @class */ (function () {
                 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 } });
                 var obj_1 = { shapeSettingsObj: {} };
                 parent.notify('selection', { prop: 'updatePrevShapeSettings', onPropertyChange: false, value: { obj: obj_1 } });
                 var shapeSettings = obj_1['shapeSettingsObj'];
@@ -1935,16 +1865,11 @@ var Shape = /** @class */ (function () {
             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)) {
             var bbox = parent.lowerCanvas.getBoundingClientRect();
             x -= bbox.left;
@@ -2134,11 +2059,9 @@ var Shape = /** @class */ (function () {
         var URL = window.URL;
         var 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 = '';
     };
-    Shape.prototype.onLoadImgShape = function (x, y, width, height, url, isSelect, degree, isAspectRatio, opacity) {
+    Shape.prototype.onLoadImgShape = function (x, y, width, height, url, isSelect, degree, isAspectRatio, opacity, isSelected) {
         // eslint-disable-next-line @typescript-eslint/no-this-alias
         var proxy = this;
         var parent = this.parent;
@@ -2156,11 +2079,10 @@ var Shape = /** @class */ (function () {
         this.initShapeProps();
         this.shapeImg.onload = function () {
             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);
         };
     };
-    Shape.prototype.updateImgCanvas = function (isSelect, x, y, width, height, degree, isAspectRatio, opacity) {
-        var _this = this;
+    Shape.prototype.updateImgCanvas = function (isSelect, x, y, width, height, degree, isAspectRatio, opacity, isSelected) {
         var parent = this.parent;
         parent.activeObj.imageElement = this.shapeImg;
         parent.activeObj.imageCanvas = parent.createElement('canvas');
@@ -2209,24 +2131,12 @@ var Shape = /** @class */ (function () {
         var shapeSettings = obj['shapeSettingsObj'];
         var 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(function (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;
     };
     Shape.prototype.updateObj = function (dimObj, x, y) {
         var parent = this.parent;
@@ -2533,7 +2443,7 @@ var Shape = /** @class */ (function () {
         }
         var shapeChangedArgs = { action: 'font-style', currentShapeSettings: extend({}, shapeSettings, {}, true) };
         shapeChangedArgs.currentShapeSettings.fontStyle = [item];
-        parent.triggerShapeChanged(shapeChangedArgs);
+        parent.trigger('shapeChange', shapeChangedArgs);
     };
     Shape.prototype.updateFontStyle = function (item, objColl, fontWeight, fontStyle) {
         var parent = this.parent;
@@ -2760,12 +2670,7 @@ var Shape = /** @class */ (function () {
                         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 } });
@@ -2931,13 +2836,6 @@ var Shape = /** @class */ (function () {
                 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;
     };
@@ -2955,7 +2853,12 @@ var Shape = /** @class */ (function () {
         var parent = this.parent;
         var 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') {
                 var obj_4;
                 for (var i = 0, len = parent.objColl.length; i < len; i++) {
@@ -2976,7 +2879,12 @@ var Shape = /** @class */ (function () {
         var parent = this.parent;
         var shapeDetailsColl = [];
         if (!parent.disabled && parent.isImageLoaded) {
-            this.applyActObj();
+            if (parent.textArea.style.display !== 'none') {
+                parent.okBtn();
+            }
+            else {
+                this.applyActObj(true);
+            }
             for (var i = 0, len = parent.objColl.length; i < len; i++) {
                 var shapeDetails = this.getObjDetails(parent.objColl[i]);
                 shapeDetailsColl.push(shapeDetails);
@@ -3126,31 +3034,20 @@ var Shape = /** @class */ (function () {
                     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') {
@@ -3164,14 +3061,8 @@ var Shape = /** @class */ (function () {
                 if (obj_6['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;
@@ -3183,29 +3074,29 @@ var Shape = /** @class */ (function () {
     Shape.prototype.deleteShape = function (id) {
         var parent = this.parent;
         if (!parent.disabled && parent.isImageLoaded) {
-            this.applyActObj();
-            if (id.split('_')[0] === 'shape') {
-                for (var 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 (var 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 } });
+                }
             }
             var 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 });
         }
     };
     Shape.prototype.getMaxText = function (isTextBox, text, obj) {