@syncfusion/ej2-image-editor 22.1.36 → 22.1.38

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

@@ -163,8 +163,19 @@ var Export = /** @class */ (function () {
     };
     Export.prototype.exportToCanvas = function (object) {
         var parent = this.parent;
+        var width;
+        var height;
+        if (parent.currSelectionPoint) {
+            width = parent.img.srcWidth;
+            height = parent.img.srcHeight;
+        }
+        else {
+            width = parent.baseImg.width;
+            height = parent.baseImg.height;
+        }
         var obj = { width: 0, height: 0 };
-        parent.notify('crop', { prop: 'calcRatio', onPropertyChange: false, value: { obj: obj } });
+        parent.notify('crop', { prop: 'calcRatio', onPropertyChange: false,
+            value: { obj: obj, dimension: { width: width, height: height } } });
         var ratio = obj;
         var tempContextFilter = this.lowerContext.filter;
         // Manipulating blur value
@@ -175,42 +186,30 @@ var Export = /** @class */ (function () {
             splitWords[5] = 'blur(' + value + 'px)';
             this.lowerContext.filter = splitWords.join(' ');
         }
-        var maxDimension;
         var tempCanvas = parent.createElement('canvas', {
             id: parent.element.id + '_tempCanvas', attrs: { name: 'canvasImage' }
         });
         var tempContext = tempCanvas.getContext('2d');
         tempContext.filter = this.lowerContext.filter;
-        if (parent.currSelectionPoint) {
-            tempCanvas.width = parent.img.destWidth;
-            tempCanvas.height = parent.img.destHeight;
-            tempContext.filter = this.lowerContext.filter;
-            var temp = this.lowerContext.filter;
-            parent.notify('filter', { prop: 'updateBrightFilter', onPropertyChange: false });
-            tempContext.drawImage(parent.baseImg, parent.img.srcLeft, parent.img.srcTop, parent.img.srcWidth, parent.img.srcHeight, 0, 0, parent.img.destWidth, parent.img.destHeight);
-            this.lowerContext.filter = temp;
-        }
-        else {
-            tempCanvas.width = parent.baseImg.width;
-            tempCanvas.height = parent.baseImg.height;
-            var obj_2 = { width: 0, height: 0 };
-            parent.notify('transform', { prop: 'calcMaxDimension', onPropertyChange: false,
-                value: { width: parent.baseImg.width, height: parent.baseImg.height, obj: obj_2 } });
-            maxDimension = obj_2;
-            tempCanvas.style.maxWidth = maxDimension.width + 'px';
-            tempCanvas.style.maxHeight = maxDimension.height + 'px';
-            tempContext.filter = this.lowerContext.filter;
-            var temp = this.lowerContext.filter;
-            parent.notify('filter', { prop: 'updateBrightFilter', onPropertyChange: false });
-            tempContext.drawImage(parent.baseImg, parent.img.srcLeft, parent.img.srcTop, parent.img.srcWidth, parent.img.srcHeight, 0, 0, parent.baseImg.width, parent.baseImg.height);
-            this.lowerContext.filter = temp;
-        }
+        tempCanvas.width = width;
+        tempCanvas.height = height;
+        var dimObj = { width: 0, height: 0 };
+        parent.notify('transform', { prop: 'calcMaxDimension', onPropertyChange: false,
+            value: { width: width, height: height, obj: dimObj } });
+        var maxDimension = dimObj;
+        tempCanvas.style.maxWidth = maxDimension.width + 'px';
+        tempCanvas.style.maxHeight = maxDimension.height + 'px';
+        tempContext.filter = this.lowerContext.filter;
+        var temp = this.lowerContext.filter;
+        parent.notify('filter', { prop: 'updateBrightFilter', onPropertyChange: false });
+        tempContext.drawImage(parent.baseImg, parent.img.srcLeft, parent.img.srcTop, parent.img.srcWidth, parent.img.srcHeight, 0, 0, width, height);
+        this.lowerContext.filter = temp;
         if (parent.transform.degree !== 0 || parent.transform.currFlipState !== '') {
             this.updateSaveContext(tempContext);
             this.exportTransformedImage(tempContext);
         }
         if (parent.objColl.length > 0) {
-            var temp = tempContext.filter;
+            var temp_1 = tempContext.filter;
             tempContext.filter = 'none';
             var tempObjColl = extend([], parent.objColl, [], true);
             for (var i = 0, len = parent.objColl.length; i < len; i++) {
@@ -223,22 +222,20 @@ var Export = /** @class */ (function () {
                 activePoint.width = activePoint.endX - activePoint.startX;
                 activePoint.height = activePoint.endY - activePoint.startY;
                 // Manipulating points
-                if (isNullOrUndefined(parent.currSelectionPoint)) {
-                    activePoint.startX *= ratio.width;
-                    activePoint.startY *= ratio.height;
-                    activePoint.endX *= ratio.width;
-                    activePoint.endY *= ratio.height;
-                    activePoint.width = activePoint.endX - activePoint.startX;
-                    activePoint.height = activePoint.endY - activePoint.startY;
-                    parent.objColl[i].strokeSettings.strokeWidth *= ((ratio.width + ratio.height) / 2);
-                    if (parent.objColl[i].shape === 'text') {
-                        parent.objColl[i].textSettings.fontSize *= ((ratio.width + ratio.height) / 2);
-                    }
+                activePoint.startX *= ratio.width;
+                activePoint.startY *= ratio.height;
+                activePoint.endX *= ratio.width;
+                activePoint.endY *= ratio.height;
+                activePoint.width = activePoint.endX - activePoint.startX;
+                activePoint.height = activePoint.endY - activePoint.startY;
+                parent.objColl[i].strokeSettings.strokeWidth *= ((ratio.width + ratio.height) / 2);
+                if (parent.objColl[i].shape === 'text') {
+                    parent.objColl[i].textSettings.fontSize *= ((ratio.width + ratio.height) / 2);
                 }
                 parent.notify('draw', { prop: 'drawObject', onPropertyChange: false, value: { canvas: 'saveContext', obj: parent.objColl[i], isCropRatio: null,
                         points: null, isPreventDrag: true, saveContext: tempContext, isPreventSelection: null } });
             }
-            tempContext.filter = temp;
+            tempContext.filter = temp_1;
             parent.notify('shape', { prop: 'refreshActiveObj', onPropertyChange: false });
             parent.objColl = tempObjColl;
         }
@@ -249,18 +246,10 @@ var Export = /** @class */ (function () {
                 parent.points = extend([], parent.pointColl[n].points, []);
                 parent.notify('freehand-draw', { prop: 'setPointCounter', onPropertyChange: false, value: { value: 0 } });
                 var len = parent.points.length;
-                if (parent.currSelectionPoint) {
-                    for (var l = 0; l < len; l++) {
-                        parent.points[l].x -= parent.img.destLeft;
-                        parent.points[l].y -= parent.img.destTop;
-                    }
-                }
-                else {
-                    parent.pointColl[n].strokeWidth *= ((ratio.width + ratio.height) / 2);
-                    for (var l = 0; l < len; l++) {
-                        parent.points[l].x = (parent.points[l].x - parent.img.destLeft) * ratio.width;
-                        parent.points[l].y = (parent.points[l].y - parent.img.destTop) * ratio.height;
-                    }
+                parent.pointColl[n].strokeWidth *= ((ratio.width + ratio.height) / 2);
+                for (var l = 0; l < len; l++) {
+                    parent.points[l].x = (parent.points[l].x - parent.img.destLeft) * ratio.width;
+                    parent.points[l].y = (parent.points[l].y - parent.img.destTop) * ratio.height;
                 }
             }
             parent.notify('freehand-draw', { prop: 'freehandRedraw', onPropertyChange: false,
@@ -272,6 +261,7 @@ var Export = /** @class */ (function () {
                 value: { context: tempContext, isSave: true, isFlip: null } });
         }
         this.lowerContext.filter = tempContextFilter;
+        parent.canvasFilter = tempContextFilter;
         if (object) {
             object['canvas'] = tempCanvas;
         }
@@ -306,17 +296,10 @@ var Export = /** @class */ (function () {
     };
     Export.prototype.exportRotate = function (tempContext, degree) {
         var parent = this.parent;
-        if (isNullOrUndefined(parent.currSelectionPoint)) {
-            this.setMaxDim(parent.transform.degree, tempContext.canvas);
-            tempContext.translate(tempContext.canvas.width / 2, tempContext.canvas.height / 2);
-            tempContext.rotate(Math.PI / 180 * degree);
-            tempContext.drawImage(parent.inMemoryCanvas, parent.img.srcLeft, parent.img.srcTop, parent.img.srcWidth, parent.img.srcHeight, -tempContext.canvas.height / 2, -tempContext.canvas.width / 2, tempContext.canvas.height, tempContext.canvas.width);
-        }
-        else {
-            tempContext.translate(tempContext.canvas.width / 2, tempContext.canvas.height / 2);
-            tempContext.rotate(Math.PI / 180 * degree);
-            tempContext.drawImage(parent.inMemoryCanvas, -tempContext.canvas.height / 2, -tempContext.canvas.width / 2, tempContext.canvas.height, tempContext.canvas.width);
-        }
+        this.setMaxDim(parent.transform.degree, tempContext.canvas);
+        tempContext.translate(tempContext.canvas.width / 2, tempContext.canvas.height / 2);
+        tempContext.rotate(Math.PI / 180 * degree);
+        tempContext.drawImage(parent.inMemoryCanvas, -tempContext.canvas.height / 2, -tempContext.canvas.width / 2, tempContext.canvas.height, tempContext.canvas.width);
         this.updateSaveContext(tempContext);
     };
     Export.prototype.exportFlip = function (tempContext, flipHorizontal, flipVertical) {
@@ -343,12 +326,12 @@ var Export = /** @class */ (function () {
         var newWidth;
         var newHeight;
         if (degree % 90 === 0 && degree % 180 !== 0) {
-            newWidth = this.parent.baseImg.height;
-            newHeight = this.parent.baseImg.width;
+            newWidth = isNullOrUndefined(this.parent.currSelectionPoint) ? this.parent.baseImg.height : this.parent.img.srcHeight;
+            newHeight = isNullOrUndefined(this.parent.currSelectionPoint) ? this.parent.baseImg.width : this.parent.img.srcWidth;
         }
         else if (degree % 180 === 0 || degree === 0) {
-            newWidth = this.parent.baseImg.width;
-            newHeight = this.parent.baseImg.height;
+            newWidth = isNullOrUndefined(this.parent.currSelectionPoint) ? this.parent.baseImg.width : this.parent.img.srcWidth;
+            newHeight = isNullOrUndefined(this.parent.currSelectionPoint) ? this.parent.baseImg.height : this.parent.img.srcHeight;
         }
         tempCanvas.width = newWidth;
         tempCanvas.height = newHeight;

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

@@ -1,4 +1,5 @@
 import { EventHandler, extend, isBlazor, isNullOrUndefined } from '@syncfusion/ej2-base';
+import { ShapeType } from '../index';
 var FreehandDrawing = /** @class */ (function () {
     function FreehandDrawing(parent) {
         this.fhdObj = { lastWidth: 0, lastVelocity: 0, time: 0, pointX: 0, pointY: 0 };
@@ -604,6 +605,7 @@ var FreehandDrawing = /** @class */ (function () {
         }
     };
     FreehandDrawing.prototype.selectFhd = function (index) {
+        var _this = this;
         var parent = this.parent;
         parent.notify('selection', { prop: 'setFreehandDrawEditing', onPropertyChange: false, value: { bool: true } });
         if (index || index === 0) {
@@ -628,7 +630,29 @@ var FreehandDrawing = /** @class */ (function () {
         var obj = { bool: false };
         parent.notify('selection', { prop: 'getFreehandDrawEditing', onPropertyChange: false, value: { obj: obj } });
         if (obj['bool']) {
-            if (!isBlazor()) {
+            var shapeSettings = { id: 'pen_' + (this.fhdSelIdx + 1), type: ShapeType.FreehandDraw,
+                startX: parent.pointColl[this.fhdSelIdx].points[0].x, startY: parent.pointColl[this.fhdSelIdx].points[0].y,
+                strokeColor: parent.pointColl[this.fhdSelIdx].strokeColor, strokeWidth: parent.pointColl[this.fhdSelIdx].strokeWidth,
+                points: parent.pointColl[this.fhdSelIdx].points };
+            var shapeChangingArgs = { action: 'select', 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).then(function (shapeChangingArgs) {
+                    parent.pointColl[_this.fhdSelIdx].strokeColor = shapeChangingArgs.currentShapeSettings.strokeColor;
+                    parent.pointColl[_this.fhdSelIdx].strokeWidth = shapeChangingArgs.currentShapeSettings.strokeWidth;
+                    parent.pointColl[_this.fhdSelIdx].points = shapeChangingArgs.currentShapeSettings.points;
+                    _this.freehandRedraw(_this.upperContext);
+                    parent.updateToolbar(parent.element, 'imageLoaded');
+                    parent.updateToolbar(parent.element, 'pen');
+                });
+            }
+            else {
+                parent.trigger('shapeChanging', shapeChangingArgs);
+                parent.pointColl[this.fhdSelIdx].strokeColor = shapeChangingArgs.currentShapeSettings.strokeColor;
+                parent.pointColl[this.fhdSelIdx].strokeWidth = shapeChangingArgs.currentShapeSettings.strokeWidth;
+                parent.pointColl[this.fhdSelIdx].points = shapeChangingArgs.currentShapeSettings.points;
+                this.freehandRedraw(this.upperContext);
                 parent.notify('toolbar', { prop: 'refresh-toolbar', onPropertyChange: false, value: { type: 'pen',
                         isApplyBtn: null, isCropping: null, isZooming: null, cType: null } });
             }

package/src/image-editor/action/selection.d.ts

@@ -109,6 +109,7 @@ export declare class Selection {
     private canvasMouseMoveHandler;
     private canvasMouseUpHandler;
     private touchStartHandler;
+    private unwireEvent;
     private keyDownEventHandler;
     private isKeyBoardCrop;
     private beforeSaveEvent;

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

@@ -237,6 +237,12 @@ var Selection = /** @class */ (function () {
             case 'reset':
                 this.reset();
                 break;
+            case 'unWireEvent':
+                this.unwireEvent();
+                break;
+            case 'updPtCollForShpRot':
+                this.updPtCollForShpRot(args.value['obj']);
+                break;
         }
     };
     Selection.prototype.getModuleName = function () {
@@ -3098,6 +3104,9 @@ 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 });
+                    }
                 }
             }
             if (parent.activeObj) {
@@ -3580,6 +3589,12 @@ var Selection = /** @class */ (function () {
         EventHandler.add(this.parent.upperCanvas, 'touchend', this.mouseUpEventHandler, this);
         EventHandler.add(this.parent.upperCanvas, 'touchmove', this.mouseMoveEventHandler, this);
     };
+    Selection.prototype.unwireEvent = function () {
+        EventHandler.remove(this.parent.lowerCanvas, 'touchend', this.mouseUpEventHandler);
+        EventHandler.remove(this.parent.lowerCanvas, 'touchmove', this.mouseMoveEventHandler);
+        EventHandler.remove(this.parent.upperCanvas, 'touchend', this.mouseUpEventHandler);
+        EventHandler.remove(this.parent.upperCanvas, 'touchmove', this.mouseMoveEventHandler);
+    };
     Selection.prototype.keyDownEventHandler = function (e) {
         var _this = this;
         var parent = this.parent;
@@ -4415,8 +4430,10 @@ var Selection = /** @class */ (function () {
             fillColor: parent.activeObj.strokeSettings ? parent.activeObj.strokeSettings.fillColor : null,
             radius: parent.activeObj.shape === 'ellipse' ? parent.activeObj.activePoint.width / 2 : null,
             length: parent.activeObj.shape === 'line' || parent.activeObj.shape === 'arrow' ? parent.activeObj.activePoint.width : null,
-            text: parent.activeObj.shape === 'text' ? (parent.activeObj.keyHistory ? parent.activeObj.keyHistory : null) : null,
+            text: parent.activeObj.shape === 'text' ? (parent.activeObj.keyHistory ? parent.activeObj.keyHistory :
+                (parent.activeObj.textSettings.text ? parent.activeObj.textSettings.text : null)) : null,
             fontSize: parent.activeObj.shape === 'text' ? (parent.activeObj.textSettings ? parent.activeObj.textSettings.fontSize : null) : null,
+            fontFamily: parent.activeObj.shape === 'text' ? (parent.activeObj.textSettings ? parent.activeObj.textSettings.fontFamily : null) : null,
             fontStyle: parent.activeObj.shape === 'text' ? fontStyle : null,
             color: parent.activeObj.shape === 'text' ? (parent.activeObj.strokeSettings ? parent.activeObj.strokeSettings.strokeColor : null) : null
         };
@@ -4460,12 +4477,14 @@ var Selection = /** @class */ (function () {
         if (degree < 0) {
             degree = 360 + degree;
         }
-        for (var i = 0; i < obj.flipObjColl.length; i++) {
-            if (obj.flipObjColl[i].toLowerCase() === 'horizontal') {
-                isHorizontalflip = true;
-            }
-            else if (obj.flipObjColl[i].toLowerCase() === 'vertical') {
-                isVerticalflip = true;
+        if (obj.flipObjColl) {
+            for (var i = 0; i < obj.flipObjColl.length; i++) {
+                if (obj.flipObjColl[i].toLowerCase() === 'horizontal') {
+                    isHorizontalflip = true;
+                }
+                else if (obj.flipObjColl[i].toLowerCase() === 'vertical') {
+                    isVerticalflip = true;
+                }
             }
         }
         if (degree === 0 || degree === 360) {

package/src/image-editor/action/shape.d.ts

@@ -26,7 +26,9 @@ export declare class Shape {
     private setDimension;
     private getArrowType;
     private drawShape;
+    private initShapeProps;
     private setPointCollForLineAndArrow;
+    private prevObjColl;
     private drawShapeText;
     private drawShapeTextEvent;
     private initializeTextShape;

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

@@ -38,7 +38,7 @@ var Shape = /** @class */ (function () {
                 this.drawPath(args.value['pointColl'], args.value['strokeWidth'], args.value['strokeColor']);
                 break;
             case 'drawRectangle':
-                this.drawRectangle(args.value['x'], args.value['y'], args.value['width'], args.value['height'], args.value['strokeWidt'], args.value['strokeColor'], args.value['fillColor']);
+                this.drawRectangle(args.value['x'], args.value['y'], args.value['width'], args.value['height'], args.value['strokeWidth'], args.value['strokeColor'], args.value['fillColor']);
                 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']);
@@ -229,10 +229,10 @@ var Shape = /** @class */ (function () {
             { text: 'Enter Text', fontFamily: 'Arial', 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) {
+    Shape.prototype.drawEllipse = function (x, y, radiusX, radiusY, strokeWidth, strokeColor, fillColor, degree) {
         this.initializeShape('ellipse');
         var start = x && y ? { x: x, y: y } : null;
-        this.drawShape('ellipse', strokeWidth, strokeColor, fillColor, start, radiusX, radiusY);
+        this.drawShape('ellipse', strokeWidth, strokeColor, fillColor, start, radiusX, radiusY, null, null, null, degree);
     };
     Shape.prototype.drawLine = function (startX, startY, endX, endY, strokeWidth, strokeColor) {
         this.initializeShape('line');
@@ -263,10 +263,10 @@ var Shape = /** @class */ (function () {
         var height = endY - startY;
         this.drawShape('arrow', strokeWidth, strokeColor, null, start, width, height, null, arrowStart, arrowEnd);
     };
-    Shape.prototype.drawRectangle = function (x, y, width, height, strokeWidth, strokeColor, fillColor) {
+    Shape.prototype.drawRectangle = function (x, y, width, height, strokeWidth, strokeColor, fillColor, degree) {
         this.initializeShape('rectangle');
         var start = x && y ? { x: x, y: y } : null;
-        this.drawShape('rectangle', strokeWidth, strokeColor, fillColor, start, width, height);
+        this.drawShape('rectangle', strokeWidth, strokeColor, fillColor, start, width, height, null, null, null, degree);
     };
     Shape.prototype.drawText = function (x, y, text, fontFamily, fontSize, bold, italic, color) {
         this.drawShapeText(text, fontFamily, fontSize, bold, italic, color, x, y);
@@ -305,7 +305,7 @@ var Shape = /** @class */ (function () {
         }
         return arrowType;
     };
-    Shape.prototype.drawShape = function (type, strokeWidth, strokeColor, fillColor, start, width, height, pointColl, arrowStart, arrowEnd) {
+    Shape.prototype.drawShape = function (type, strokeWidth, strokeColor, fillColor, start, width, height, pointColl, arrowStart, arrowEnd, degree) {
         var _this = this;
         var parent = this.parent;
         if (!parent.disabled && parent.isImageLoaded) {
@@ -374,10 +374,7 @@ var Shape = /** @class */ (function () {
                         parent.activeObj.triangleDirection = 'right';
                     }
                     parent.currObjType.isDragging = parent.currObjType.isCustomCrop = false;
-                    parent.activeObj.shapeDegree = parent.transform.degree;
-                    parent.activeObj.shapeFlip = parent.transform.currFlipState;
-                    parent.activeObj.textFlip = parent.transform.currFlipState;
-                    parent.activeObj.flipObjColl = [];
+                    this.initShapeProps();
                     var obj = { shapeSettingsObj: {} };
                     parent.notify('selection', { prop: 'updatePrevShapeSettings', onPropertyChange: false, value: { obj: obj } });
                     var shapeSettings = obj['shapeSettingsObj'];
@@ -389,6 +386,10 @@ var Shape = /** @class */ (function () {
                             _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 } });
@@ -403,6 +404,10 @@ var Shape = /** @class */ (function () {
                         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 } });
                         }
@@ -423,6 +428,13 @@ var Shape = /** @class */ (function () {
             }
         }
     };
+    Shape.prototype.initShapeProps = function () {
+        var parent = this.parent;
+        parent.activeObj.shapeDegree = parent.transform.degree;
+        parent.activeObj.shapeFlip = parent.transform.currFlipState;
+        parent.activeObj.textFlip = parent.transform.currFlipState;
+        parent.activeObj.flipObjColl = [];
+    };
     Shape.prototype.setPointCollForLineAndArrow = function () {
         var parent = this.parent;
         if (parent.activeObj.shape === 'line' || parent.activeObj.shape === 'arrow') {
@@ -437,6 +449,19 @@ var Shape = /** @class */ (function () {
             }
         }
     };
+    Shape.prototype.prevObjColl = function () {
+        var parent = this.parent;
+        var object = { currObj: {} };
+        parent.notify('filter', { prop: 'getCurrentObj', onPropertyChange: false, value: { object: object } });
+        this.prevObj = object['currObj'];
+        this.prevObj.objColl = extend([], parent.objColl, [], true);
+        this.prevObj.pointColl = extend([], parent.pointColl, [], true);
+        this.prevObj.afterCropActions = extend([], parent.afterCropActions, [], true);
+        var selPointCollObj = { selPointColl: null };
+        parent.notify('freehand-draw', { prop: 'getSelPointColl', onPropertyChange: false,
+            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;
         var parent = this.parent;
@@ -449,16 +474,7 @@ var Shape = /** @class */ (function () {
             parent.notify('draw', { prop: 'setImageEdited', onPropertyChange: false });
             parent.togglePen = false;
             this.redrawActObj();
-            var object = { currObj: {} };
-            parent.notify('filter', { prop: 'getCurrentObj', onPropertyChange: false, value: { object: object } });
-            this.prevObj = object['currObj'];
-            this.prevObj.objColl = extend([], parent.objColl, [], true);
-            this.prevObj.pointColl = extend([], parent.pointColl, [], true);
-            this.prevObj.afterCropActions = extend([], parent.afterCropActions, [], true);
-            var selPointCollObj = { selPointColl: null };
-            parent.notify('freehand-draw', { prop: 'getSelPointColl', onPropertyChange: false,
-                value: { obj: selPointCollObj } });
-            this.prevObj.selPointColl = extend([], selPointCollObj['selPointColl'], [], true);
+            this.prevObjColl();
             this.refreshActiveObj();
             parent.activeObj.shape = parent.currObjType.shape = 'text';
             parent.currObjType.isCustomCrop = false;
@@ -697,9 +713,12 @@ var Shape = /** @class */ (function () {
                 parent.activeObj.activePoint.width = shapeSettings.length;
                 break;
             case 'text':
-                parent.activeObj.keyHistory = shapeSettings.text;
+                parent.activeObj.keyHistory = parent.activeObj.textSettings.text = shapeSettings.text;
                 parent.activeObj.textSettings.fontSize = shapeSettings.fontSize;
                 parent.activeObj.strokeSettings.strokeColor = shapeSettings.color;
+                parent.activeObj.textSettings.fontFamily = shapeSettings.fontFamily;
+                break;
+            case 'rectangle':
                 break;
         }
         if (parent.activeObj.shape === 'text' && parent.activeObj.textSettings) {
@@ -1565,6 +1584,7 @@ var Shape = /** @class */ (function () {
                     if (actObj.flipObjColl.length === 4) {
                         actObj.flipObjColl = [];
                         flip = '';
+                        actObj.shapeFlip = '';
                     }
                     if (flip === '' && actObj.flipObjColl.length > 1) {
                         flip = actObj.flipObjColl[actObj.flipObjColl.length - 1];
@@ -2216,6 +2236,10 @@ var Shape = /** @class */ (function () {
                     shapeDetails.fontStyle.push('italic');
                 }
                 break;
+            case 'path':
+                shapeDetails.strokeColor = obj.strokeSettings.strokeColor;
+                shapeDetails.strokeWidth = obj.strokeSettings.strokeWidth;
+                break;
         }
         return shapeDetails;
     };
@@ -2486,7 +2510,12 @@ var Shape = /** @class */ (function () {
             this.lowerContext.filter = object['canvasFilter'];
             this.lowerContext.clearRect(0, 0, parent.lowerCanvas.width, parent.lowerCanvas.height);
             parent.notify('draw', { prop: 'redrawImgWithObj', onPropertyChange: false });
-            parent.notify('toolbar', { prop: 'refresh-main-toolbar', onPropertyChange: false });
+            if (!isBlazor()) {
+                parent.notify('toolbar', { prop: 'refresh-main-toolbar', onPropertyChange: false });
+            }
+            else {
+                parent.updateToolbar(parent.element, 'imageLoaded');
+            }
         }
     };
     Shape.prototype.getMaxText = function (isTextBox, text, obj) {

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

@@ -144,6 +144,12 @@ var Transform = /** @class */ (function () {
                 this.cropDimension.width = args.value['width'];
                 this.cropDimension.height = args.value['height'];
                 break;
+            case 'getPreventSelect':
+                args.value['obj']['bool'] = this.isPreventSelect;
+                break;
+            case 'setPreventSelect':
+                this.isPreventSelect = args.value['bool'];
+                break;
             case 'reset':
                 this.reset();
                 break;
@@ -1268,6 +1274,9 @@ var Transform = /** @class */ (function () {
                 parent.notify('shape', { prop: 'alignRotateFlipColl', onPropertyChange: false,
                     value: { collection: parent.objColl[i].flipObjColl, isRotateFlipCollection: null, obj: flipObjColl } });
                 parent.objColl[i].flipObjColl = flipObjColl['collection'];
+                if (parent.objColl[i].flipObjColl.length === 0) {
+                    parent.objColl[i].shapeFlip = '';
+                }
             }
         }
         if (tempZoomFactor !== 0) {
@@ -1633,6 +1642,7 @@ var Transform = /** @class */ (function () {
             parent.notify('shape', { prop: 'refreshActiveObj', onPropertyChange: false });
             this.lowerContext.filter = tempFilter;
             parent.initialAdjustmentValue = tempFilter;
+            parent.canvasFilter = this.lowerContext.filter;
             if (parent.isImageLoaded) {
                 showSpinner(parent.element);
                 parent.element.style.opacity = '0.5';

package/src/image-editor/action/undo-redo.js

@@ -254,7 +254,9 @@ var UndoRedo = /** @class */ (function () {
                 this.undoRedoStep--;
                 if (!isBlazor()) {
                     parent.notify('toolbar', { prop: 'enable-disable-btns' });
-                    parent.element.querySelector('.e-contextual-toolbar-wrapper').classList.add('e-hide');
+                    if (parent.element.querySelector('.e-contextual-toolbar-wrapper')) {
+                        parent.element.querySelector('.e-contextual-toolbar-wrapper').classList.add('e-hide');
+                    }
                 }
                 else {
                     parent.updateToolbar(parent.element, 'enableDisableToolbarBtn');
@@ -357,7 +359,7 @@ var UndoRedo = /** @class */ (function () {
                 parent.cropObj = extend({}, obj.currentCropObj, {}, true);
                 parent.afterCropActions = obj.currentObj.afterCropActions;
                 this.lowerContext.filter = obj.currentObj.filter;
-                if (!isBlazor()) {
+                if (!isBlazor() && parent.element.querySelector('.e-contextual-toolbar-wrapper')) {
                     parent.element.querySelector('.e-contextual-toolbar-wrapper').classList.add('e-hide');
                 }
                 parent.canvasFilter = this.lowerContext.filter;

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

@@ -439,7 +439,7 @@ var ImageEditor = /** @class */ (function (_super) {
         this.inMemoryContext = this.inMemoryCanvas.getContext('2d');
         this.lowerContext.filter = this.getDefaultFilter();
         this.notify('filter', { prop: 'setAdjustmentValue', onPropertyChange: false, value: { adjustmentValue: this.lowerContext.filter } });
-        this.notify('toolbar', { prop: 'setCanvasFilter', onPropertyChange: false, value: { filter: this.lowerContext.filter } });
+        this.canvasFilter = this.lowerContext.filter;
         this.notify('toolbar', { prop: 'setInitialAdjustmentValue', onPropertyChange: false, value: { value: this.lowerContext.filter } });
         if (this.cssClass) {
             addClass([this.element], this.cssClass.replace(/\s+/g, ' ').trim().split(' '));
@@ -504,6 +504,7 @@ var ImageEditor = /** @class */ (function (_super) {
             screen.orientation.removeEventListener('change', this.screenOrientation.bind(this));
         }
         this.notify('shape', { prop: 'unWireEvent', onPropertyChange: false });
+        this.notify('selection', { prop: 'unWireEvent', onPropertyChange: false });
     };
     ImageEditor.prototype.createCanvas = function () {
         this.element.style.boxSizing = 'border-box';
@@ -1440,8 +1441,10 @@ var ImageEditor = /** @class */ (function (_super) {
         this.notify('draw', { prop: 'render-image', value: { isMouseWheel: false } });
         var data = this.getImageData();
         if (!isBlazor()) {
-            this.notify('toolbar', { prop: 'refresh-toolbar', onPropertyChange: false, value: { type: 'main',
-                    isApplyBtn: true, isCropping: false } });
+            if (!Browser.isDevice) {
+                this.notify('toolbar', { prop: 'refresh-toolbar', onPropertyChange: false, value: { type: 'main',
+                        isApplyBtn: true, isCropping: false } });
+            }
             this.element.querySelector('#' + this.element.id + '_contextualToolbarArea').classList.remove('e-hide');
         }
         this.objColl = objColl;
@@ -2056,8 +2059,8 @@ var ImageEditor = /** @class */ (function (_super) {
         /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
         this.element = element;
         var canvasWrapper = this.element.querySelector('.e-canvas-wrapper');
-        if (this.element.querySelector('#' + this.element.id + '_toolbar')) {
-            this.toolbarHeight = this.element.querySelector('#' + this.element.id + '_toolbar').clientHeight;
+        if (this.element.querySelector('#' + this.element.id + '_toolbarArea')) {
+            this.toolbarHeight = this.element.querySelector('#' + this.element.id + '_toolbarArea').clientHeight;
         }
         else {
             this.toolbarHeight = 0;
@@ -2074,9 +2077,6 @@ var ImageEditor = /** @class */ (function (_super) {
         });
         this.upperCanvas.width = this.lowerCanvas.width = this.inMemoryCanvas.width = this.element.offsetWidth;
         this.upperCanvas.height = this.lowerCanvas.height = this.inMemoryCanvas.height = (this.element.offsetHeight - this.toolbarHeight);
-        this.baseImg = this.createElement('img', {
-            id: this.element.id + '_orgImg', attrs: { name: 'Image', crossorigin: 'anonymous' }
-        });
         this.lowerContext = this.lowerCanvas.getContext('2d');
         this.baseImg = this.createElement('img', {
             id: this.element.id + '_orgImg', attrs: { name: 'Image', crossorigin: 'anonymous' }

package/src/image-editor/base/interface.d.ts

@@ -110,8 +110,8 @@ export interface CropEventArgs {
      */
     endPoint: Point;
     /**
-    * Specifies whether to prevent scale-based cropping in the image editor.
-    */
+     * Specifies whether to prevent scale-based cropping in the image editor.
+     */
     preventScaling: boolean;
     /**
      * Defines whether to cancel the cropping action of image editor.
@@ -373,6 +373,10 @@ export interface ShapeSettings {
      * Returns the font size of the text.
      */
     fontSize?: number;
+    /**
+     * Returns the font family of the text.
+     */
+    fontFamily?: string;
     /**
      * Returns the font style of the text.
      */