@syncfusion/ej2-image-editor 23.2.7 → 24.1.41

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

@@ -102,6 +102,23 @@ var SelectionSettings = /** @class */ (function (_super) {
     return SelectionSettings;
 }(ChildProperty));
 export { SelectionSettings };
+/**
+ * Predefine the font families that populate in font family dropdown list from the toolbar.
+ */
+var FontFamily = /** @class */ (function (_super) {
+    __extends(FontFamily, _super);
+    function FontFamily() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    __decorate([
+        Property('Arial')
+    ], FontFamily.prototype, "default", void 0);
+    __decorate([
+        Property(null)
+    ], FontFamily.prototype, "items", void 0);
+    return FontFamily;
+}(ChildProperty));
+export { FontFamily };
 /**
  * The Image Editor is a graphical user interface for editing images.
  *
@@ -130,7 +147,7 @@ var ImageEditor = /** @class */ (function (_super) {
         _this.isImageLoaded = false;
         /** @hidden */
         _this.activeObj = { activePoint: { startX: 0, startY: 0, endX: 0, endY: 0, width: 0, height: 0 },
-            flipObjColl: [], triangle: [], triangleRatio: [], rotatedAngle: 0 };
+            flipObjColl: [], triangle: [], triangleRatio: [], rotatedAngle: 0, opacity: 1 };
         // current object's ui interaction properties
         /** @hidden */
         _this.currObjType = { shape: '', isDragging: false, isActiveObj: false, isText: false, isInitialText: false, isLine: false, isInitialLine: false,
@@ -157,14 +174,16 @@ var ImageEditor = /** @class */ (function (_super) {
         /** @hidden */
         _this.cropObj = { cropZoom: 0, defaultZoom: 0, totalPannedPoint: { x: 0, y: 0 }, totalPannedClientPoint: { x: 0, y: 0 },
             totalPannedInternalPoint: { x: 0, y: 0 }, tempFlipPanPoint: { x: 0, y: 0 }, activeObj: {}, rotateFlipColl: [],
-            degree: 0, currFlipState: '', destPoints: { startX: 0, startY: 0, width: 0, height: 0 },
+            degree: 0, currFlipState: '', straighten: 0, destPoints: { startX: 0, startY: 0, width: 0, height: 0 },
             srcPoints: { startX: 0, startY: 0, width: 0, height: 0 }, filter: '', isBrightAdjust: false,
-            zoomFactor: 0, previousZoomValue: 0, aspectWidth: null, aspectHeight: null, frame: 'none' };
+            zoomFactor: 0, previousZoomValue: 0, aspectWidth: null, aspectHeight: null, frame: 'none', straightenZoom: 0,
+            adjustmentLevel: { brightness: 0, contrast: 0, hue: 0, opacity: 100, saturation: 0, blur: 0,
+                exposure: 0, transparency: 100, sharpen: false, bw: false }, currentFilter: '' };
         // Stored transformations performed after cropping
         /** @hidden */
         _this.afterCropActions = [];
         /** @hidden */
-        _this.transform = { degree: 0, currFlipState: '', zoomFactor: 0, cropZoomFactor: null, defaultZoomFactor: 0 };
+        _this.transform = { degree: 0, currFlipState: '', zoomFactor: 0, cropZoomFactor: null, defaultZoomFactor: 0, straighten: 0 };
         /** @hidden */
         _this.panPoint = { currentPannedPoint: { x: 0, y: 0 }, totalPannedPoint: { x: 0, y: 0 }, totalPannedInternalPoint: { x: 0, y: 0 },
             totalPannedClientPoint: { x: 0, y: 0 } };
@@ -215,17 +234,25 @@ var ImageEditor = /** @class */ (function (_super) {
         _this.borderRadius = 0;
         /** @hidden */
         _this.lineCount = 0;
-        if (!isBlazor()) {
-            ImageEditor_1.Inject(Crop, Draw, Selection, Transform, Export, ToolbarModule);
-            ImageEditor_1.Inject(UndoRedo);
-            ImageEditor_1.Inject(Filter);
-            ImageEditor_1.Inject(Shape);
-            ImageEditor_1.Inject(FreehandDrawing);
-            if (element) {
-                _this.appendTo(element);
-            }
-        }
-        else {
+        /** @hidden */
+        _this.prevStraightenedDegree = 0;
+        /** @hidden */
+        _this.tempStraighten = 0;
+        /** @hidden */
+        _this.isStraightening = false;
+        /** @hidden */
+        _this.isFinetuning = false;
+        /** @hidden */
+        _this.isZoomBtnClick = false;
+        /** @hidden */
+        _this.isFinetuneBtnClick = false;
+        /** @hidden */
+        _this.isFilterCanvasClick = false;
+        /** @hidden */
+        _this.isFrameBtnClick = false;
+        /** @hidden */
+        _this.isChangesSaved = false;
+        if (isBlazor()) {
             new Crop(_this);
             new Draw(_this);
             new Filter(_this);
@@ -236,6 +263,16 @@ var ImageEditor = /** @class */ (function (_super) {
             new UndoRedo(_this);
             new Export(_this);
         }
+        else {
+            ImageEditor_1.Inject(Crop, Draw, Selection, Transform, Export, ToolbarModule);
+            ImageEditor_1.Inject(UndoRedo);
+            ImageEditor_1.Inject(Filter);
+            ImageEditor_1.Inject(Shape);
+            ImageEditor_1.Inject(FreehandDrawing);
+            if (element) {
+                _this.appendTo(element);
+            }
+        }
         return _this;
     }
     ImageEditor_1 = ImageEditor;
@@ -502,14 +539,14 @@ var ImageEditor = /** @class */ (function (_super) {
         if (!this.element.getAttribute('class')) {
             this.element.removeAttribute('class');
         }
-        if (!isBlazor()) {
+        if (isBlazor()) {
+            this.element.classList.remove('e-image-editor');
+        }
+        else {
             this.notify('toolbar', { prop: 'destroySubComponents', onPropertyChange: false });
             this.notify('destroyed', null);
             _super.prototype.destroy.call(this);
         }
-        else {
-            this.element.classList.remove('e-image-editor');
-        }
         this.unwireEvent();
         this.element.innerHTML = '';
     };
@@ -812,7 +849,8 @@ var ImageEditor = /** @class */ (function (_super) {
     };
     ImageEditor.prototype.keyUpEventHandler = function (e) {
         // eslint-disable-next-line
-        if (this.textArea.style.display === 'block' && e.target.id === this.element.id + '_textArea') {
+        if ((this.textArea.style.display === 'block' || this.textArea.style.display === 'inline-block')
+            && e.target.id === this.element.id + '_textArea') {
             this.notify('selection', { prop: 'textKeyDown', value: { e: e } });
         }
     };
@@ -900,6 +938,7 @@ var ImageEditor = /** @class */ (function (_super) {
      */
     ImageEditor.prototype.flip = function (direction) {
         this.notify('transform', { prop: 'flip', value: { direction: direction } });
+        this.notify('draw', { prop: 'redrawDownScale' });
         this.notify('undo-redo', { prop: 'updateCurrUrc', value: { type: 'ok' } });
     };
     /**
@@ -927,6 +966,9 @@ var ImageEditor = /** @class */ (function (_super) {
      * @returns {void}.
      */
     ImageEditor.prototype.open = function (data) {
+        if (isNullOrUndefined(data)) {
+            return;
+        }
         document.getElementById(this.element.id + '_dropArea').style.display = 'none';
         this.notify('draw', { prop: 'open', value: { data: data } });
     };
@@ -955,7 +997,7 @@ var ImageEditor = /** @class */ (function (_super) {
                 }
             }
             var isImageLoaded = this.isImageLoaded;
-            this.currObjType.isUndoAction = this.isUndoRedo = this.togglePan = this.togglePen = this.isImageLoaded = false;
+            this.currObjType.isUndoAction = this.isUndoRedo = this.togglePan = this.togglePen = this.isImageLoaded = this.isFinetuning = false;
             this.isCircleCrop = this.isCropTab = false;
             this.objColl = [];
             this.transform.degree = 0;
@@ -991,34 +1033,62 @@ var ImageEditor = /** @class */ (function (_super) {
                 isUndoAction: false, isFiltered: false, isSave: false, isResize: false };
             this.cropObj = { cropZoom: 0, defaultZoom: 0, totalPannedPoint: { x: 0, y: 0 }, totalPannedClientPoint: { x: 0, y: 0 },
                 totalPannedInternalPoint: { x: 0, y: 0 }, tempFlipPanPoint: { x: 0, y: 0 }, activeObj: {},
-                rotateFlipColl: [], degree: 0, currFlipState: '', zoomFactor: 0, previousZoomValue: 0,
+                rotateFlipColl: [], degree: 0, currFlipState: '', straighten: 0, zoomFactor: 0, previousZoomValue: 0,
                 destPoints: { startX: 0, startY: 0, width: 0, height: 0 }, frame: 'none',
                 srcPoints: { startX: 0, startY: 0, width: 0, height: 0 }, filter: '', isBrightAdjust: false,
-                aspectWidth: null, aspectHeight: null };
+                aspectWidth: null, aspectHeight: null, straightenZoom: 0,
+                adjustmentLevel: { brightness: 0, contrast: 0, hue: 0, opacity: 100, saturation: 0, blur: 0,
+                    exposure: 0, transparency: 100, sharpen: false, bw: false }, currentFilter: '' };
             this.afterCropActions = [];
             this.currentFilter = '';
             this.tempFrameZoomLevel = null;
             this.cxtTbarHeight = null;
+            this.straightenPoint = null;
+            this.transform.straighten = 0;
+            this.cancelCropSelection = null;
             this.aspectWidth = this.aspectHeight = null;
+            this.isResize = false;
             var obj_1 = { initialZoomValue: false };
             this.notify('draw', { prop: 'getInitialZoomValue', onPropertyChange: false, value: { obj: obj_1 } });
             if (obj_1['initialZoomValue']) {
                 this.setProperties({ zoomSettings: { zoomFactor: obj_1['initialZoomValue'] } }, true);
             }
-            if (document.getElementById(this.element.id + '_quickAccessToolbarArea')) {
-                document.getElementById(this.element.id + '_quickAccessToolbarArea').style.display = 'none';
+            var qtArea = document.getElementById(this.element.id + '_quickAccessToolbarArea');
+            if (qtArea) {
+                qtArea.style.display = 'none';
             }
             this.notifyResetForAllModules();
             this.notify('filter', { prop: 'update-finetunes' });
+            if (!isBlazor()) {
+                if (this.toolbarTemplate) {
+                    this.toolbarHeight = this.element.querySelector('#' + this.element.id + '_toolbarArea').clientHeight;
+                }
+                else if (this.element.querySelector('#' + this.element.id + '_toolbar')) {
+                    this.toolbarHeight = this.element.querySelector('#' + this.element.id + '_toolbar').clientHeight;
+                }
+                this.notify('toolbar', { prop: 'setToolbarHeight', value: { height: this.toolbarHeight } });
+            }
+            this.isImageLoaded = isImageLoaded;
+            this.straightenBaseImageCanvas();
             this.isImageLoaded = false;
             this.notify('draw', { prop: 'update-canvas', onPropertyChange: false });
             this.isImageLoaded = isImageLoaded;
+            this.prevStraightenedDegree = 0;
             if (!isBlazor()) {
-                if (this.element.querySelector('.e-contextual-toolbar-wrapper')) {
-                    this.element.querySelector('.e-contextual-toolbar-wrapper').classList.add('e-hide');
+                var ctWrapper = this.element.querySelector('.e-contextual-toolbar-wrapper');
+                if (ctWrapper) {
+                    ctWrapper.classList.add('e-hide');
                 }
                 this.notify('toolbar', { prop: 'refresh-dropdown-btn', value: { isDisabled: false } });
                 this.notify('toolbar', { prop: 'enable-disable-btns' });
+                var straightenObj = { bool: this.isStraightening };
+                if (Browser.isDevice && straightenObj['bool']) {
+                    this.notify('crop', { prop: 'resizeWrapper' });
+                }
+            }
+            else {
+                /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
+                this.activeObj.textSettings.fontFamily = this.defaultFontFamily;
             }
         }
     };
@@ -1039,6 +1109,7 @@ var ImageEditor = /** @class */ (function (_super) {
     ImageEditor.prototype.rotate = function (degree) {
         var obj = { isRotate: false };
         this.notify('transform', { prop: 'rotate', value: { degree: degree, obj: obj } });
+        this.notify('draw', { prop: 'redrawDownScale' });
         this.notify('undo-redo', { prop: 'updateCurrUrc', value: { type: 'ok' } });
         return obj['isRotate'];
     };
@@ -1133,6 +1204,7 @@ var ImageEditor = /** @class */ (function (_super) {
     ImageEditor.prototype.zoom = function (zoomFactor, zoomPoint) {
         this.notify('transform', { prop: 'zoom', onPropertyChange: false,
             value: { zoomFactor: zoomFactor, zoomPoint: zoomPoint } });
+        this.notify('draw', { prop: 'redrawDownScale' });
     };
     /**
      * Draw ellipse on an image.
@@ -1157,6 +1229,7 @@ var ImageEditor = /** @class */ (function (_super) {
             isEllipse = true;
             this.notify('shape', { prop: 'drawEllipse', onPropertyChange: false, value: { x: x, y: y, radiusX: radiusX, radiusY: radiusY,
                     strokeWidth: strokeWidth, strokeColor: strokeColor, fillColor: fillColor, degree: degree } });
+            this.notify('draw', { prop: 'redrawDownScale' });
         }
         return isEllipse;
     };
@@ -1178,6 +1251,7 @@ var ImageEditor = /** @class */ (function (_super) {
             isLine = true;
             this.notify('shape', { prop: 'drawLine', onPropertyChange: false, value: { startX: startX, startY: startY, endX: endX,
                     endY: endY, strokeWidth: strokeWidth, strokeColor: strokeColor } });
+            this.notify('draw', { prop: 'redrawDownScale' });
         }
         return isLine;
     };
@@ -1201,6 +1275,7 @@ var ImageEditor = /** @class */ (function (_super) {
             isArrow = true;
             this.notify('shape', { prop: 'drawArrow', onPropertyChange: false, value: { startX: startX, startY: startY, endX: endX,
                     endY: endY, strokeWidth: strokeWidth, strokeColor: strokeColor, arrowStart: arrowStart, arrowEnd: arrowEnd } });
+            this.notify('draw', { prop: 'redrawDownScale' });
         }
         return isArrow;
     };
@@ -1212,7 +1287,7 @@ var ImageEditor = /** @class */ (function (_super) {
      * @param {string} strokeColor - Specifies the stroke color of path.
      * @returns {boolean}.
      */
-    ImageEditor.prototype.drawPath = function (pointColl, strokeWidth, strokeColor) {
+    ImageEditor.prototype.drawPath = function (pointColl, strokeWidth, strokeColor, opacity) {
         this.isPublicMethod = true;
         var obj = { inRange: false };
         var isPath = false;
@@ -1229,6 +1304,7 @@ var ImageEditor = /** @class */ (function (_super) {
             isPath = true;
             this.notify('shape', { prop: 'drawPath', onPropertyChange: false, value: { pointColl: pointColl,
                     strokeWidth: strokeWidth, strokeColor: strokeColor } });
+            this.notify('draw', { prop: 'redrawDownScale' });
         }
         return isPath;
     };
@@ -1252,6 +1328,7 @@ var ImageEditor = /** @class */ (function (_super) {
             isRectangle = true;
             this.notify('shape', { prop: 'drawRectangle', onPropertyChange: false, value: { x: x, y: y, width: width, height: height,
                     strokeWidth: strokeWidth, strokeColor: strokeColor, fillColor: fillColor, degree: degree } });
+            this.notify('draw', { prop: 'redrawDownScale' });
         }
         return isRectangle;
     };
@@ -1278,6 +1355,7 @@ var ImageEditor = /** @class */ (function (_super) {
             isText = true;
             this.notify('shape', { prop: 'drawText', onPropertyChange: false, value: { x: x, y: y, text: text, fontFamily: fontFamily,
                     fontSize: fontSize, bold: bold, italic: italic, color: color } });
+            this.notify('draw', { prop: 'redrawDownScale' });
         }
         return isText;
     };
@@ -1292,16 +1370,18 @@ var ImageEditor = /** @class */ (function (_super) {
      * @param {number} height - Specifies the height of the image.
      * @param {boolean} isAspectRatio - Specifies whether to maintain aspect ratio or not.
      * @param {number} degree - Specifies the degree to rotate the image.
+     * @param {number} opacity - Specifies the value for the image.
      * @returns {boolean}.
      *
      */
-    ImageEditor.prototype.drawImage = function (data, x, y, width, height, isAspectRatio, degree) {
+    ImageEditor.prototype.drawImage = function (data, x, y, width, height, isAspectRatio, degree, opacity) {
         var isImage = false;
         var isPointsInRange = this.allowShape(x, y);
         if (!this.disabled && this.isImageLoaded && (isPointsInRange || (isNullOrUndefined(x) && isNullOrUndefined(y)))) {
             var length_1 = this.objColl.length;
             this.notify('shape', { prop: 'drawImage', onPropertyChange: false, value: { x: x, y: y, width: width, height: height,
-                    src: data, degree: degree, isAspectRatio: isAspectRatio } });
+                    src: data, degree: degree, isAspectRatio: isAspectRatio, opacity: opacity } });
+            this.notify('draw', { prop: 'redrawDownScale' });
             if (this.objColl.length > length_1) {
                 isImage = true;
             }
@@ -1321,6 +1401,7 @@ var ImageEditor = /** @class */ (function (_super) {
     ImageEditor.prototype.selectShape = function (id) {
         var obj = { isSelected: false };
         this.notify('shape', { prop: 'selectShape', onPropertyChange: false, value: { id: id, obj: obj } });
+        this.notify('draw', { prop: 'redrawDownScale' });
         return obj['isSelected'];
     };
     /**
@@ -1335,6 +1416,7 @@ var ImageEditor = /** @class */ (function (_super) {
      */
     ImageEditor.prototype.deleteShape = function (id) {
         this.notify('shape', { prop: 'deleteShape', onPropertyChange: false, value: { id: id } });
+        this.notify('draw', { prop: 'redrawDownScale' });
     };
     /**
      * Get particular shapes details based on id of the shape which is drawn on an image editor.
@@ -1349,6 +1431,7 @@ var ImageEditor = /** @class */ (function (_super) {
         var shapeDetails = {};
         this.notify('shape', { prop: 'getShapeSetting', onPropertyChange: false,
             value: { id: id, obj: shapeDetails } });
+        this.notify('draw', { prop: 'redrawDownScale' });
         return shapeDetails;
     };
     /**
@@ -1359,6 +1442,7 @@ var ImageEditor = /** @class */ (function (_super) {
     ImageEditor.prototype.getShapeSettings = function () {
         var obj = { shapeDetailsColl: [] };
         this.notify('shape', { prop: 'getShapeSettings', onPropertyChange: false, value: { obj: obj } });
+        this.notify('draw', { prop: 'redrawDownScale' });
         return obj['shapeDetailsColl'];
     };
     /**
@@ -1384,6 +1468,7 @@ var ImageEditor = /** @class */ (function (_super) {
     ImageEditor.prototype.finetuneImage = function (finetuneOption, value) {
         if (!this.disabled && this.isImageLoaded) {
             this.notify('filter', { prop: 'finetuneImage', value: { value: value, option: finetuneOption } });
+            this.notify('draw', { prop: 'redrawDownScale' });
         }
     };
     /**
@@ -1398,6 +1483,7 @@ var ImageEditor = /** @class */ (function (_super) {
     ImageEditor.prototype.applyImageFilter = function (filterOption) {
         if (!this.disabled && this.isImageLoaded) {
             this.notify('filter', { prop: 'applyImageFilter', value: { option: filterOption.toString() } });
+            this.notify('draw', { prop: 'redrawDownScale' });
             this.canvasFilter = this.lowerContext.filter;
             this.notify('undo-redo', { prop: 'updateCurrUrc', value: { type: 'ok' } });
         }
@@ -1412,6 +1498,7 @@ var ImageEditor = /** @class */ (function (_super) {
      */
     ImageEditor.prototype.undo = function () {
         this.notify('undo-redo', { prop: 'undo', onPropertyChange: false });
+        this.notify('draw', { prop: 'redrawDownScale' });
     };
     /**
      * Redo the last user action that was undone by the user or `undo` method.
@@ -1422,6 +1509,7 @@ var ImageEditor = /** @class */ (function (_super) {
      */
     ImageEditor.prototype.redo = function () {
         this.notify('undo-redo', { prop: 'redo', onPropertyChange: false });
+        this.notify('draw', { prop: 'redrawDownScale' });
     };
     /**
      * Get the dimension of an image in the image editor such as x, y, width, and height.
@@ -1479,6 +1567,7 @@ var ImageEditor = /** @class */ (function (_super) {
             else {
                 this.notify('draw', { prop: 'performCancel', value: { isContextualToolbar: null } });
             }
+            this.notify('draw', { prop: 'redrawDownScale' });
         }
         return isResized;
     };
@@ -1547,8 +1636,80 @@ var ImageEditor = /** @class */ (function (_super) {
             extend(this.frameObj, this.tempFrameObj);
             this.tempFrameZoomLevel = null;
         }
+        this.notify('draw', { prop: 'redrawDownScale' });
         return isFrame;
     };
+    /**
+     * Straightens an image by rotating it clockwise or counterclockwise.
+     *
+     * @param {number} degree - The degree value specifying the amount of rotation for straightening the image.
+     * Positive values indicate clockwise rotation, while negative values indicate counterclockwise rotation.
+     *
+     * @remarks
+     * The degree value should be within the range of -45 to +45 degrees for accurate straightening.
+     *
+     * @returns {boolean} - A boolean value indicating the success of the straightening operation.
+     */
+    ImageEditor.prototype.straightenImage = function (degree) {
+        var isStraightened = false;
+        if (degree >= -45 && degree <= 45) {
+            isStraightened = true;
+            this.notify('transform', { prop: 'straightenImage', value: { degree: degree } });
+            this.notify('draw', { prop: 'redrawDownScale' });
+        }
+        return isStraightened;
+    };
+    /**
+     * This method is used to update the existing shapes by changing its height, width, color, and font styles in the component.
+     * Use 'getShapeSettings' method to get the shape which is then passed to change the options of a shape.
+     * {% codeBlock src='image-editor/updateShape/index.md' %}{% endcodeBlock %}
+     *
+     * @param {ShapeSettings} setting - Specifies the shape settings to be updated for the shape on an image.
+     * @returns {boolean}.
+     *
+     */
+    ImageEditor.prototype.updateShape = function (setting) {
+        var obj = { isSelected: false };
+        this.notify('shape', { prop: 'selectShape', onPropertyChange: false, value: { id: setting.id, obj: obj } });
+        if (obj['isSelected']) {
+            this.notify('shape', { prop: 'updateShapeChangeEventArgs', onPropertyChange: false,
+                value: { shapeSettings: setting } });
+            var activeObj = extend({}, this.activeObj, {}, true);
+            this.notify('draw', { prop: 'render-image', value: { isMouseWheel: null, isPreventClearRect: null, isFrame: null } });
+            this.upperContext.clearRect(0, 0, this.upperCanvas.width, this.upperCanvas.height);
+            this.notify('draw', { prop: 'drawObject', onPropertyChange: false, value: { canvas: 'duplicate', obj: activeObj } });
+            this.okBtn();
+            this.upperContext.clearRect(0, 0, this.upperCanvas.width, this.upperCanvas.height);
+            this.notify('draw', { prop: 'redrawDownScale' });
+        }
+        return obj['isSelected'];
+    };
+    /**
+     * Duplicates a shape based on the given shape ID in the ImageEditor.
+     * Use 'getShapeSettings' method to get the shape and then pass a shapeId from the returned shape to clone a shape.
+     *
+     * @param {string} shapeId - Specifies the shape id to clone a shape on an image.
+     * @returns {boolean}.
+     *
+     */
+    ImageEditor.prototype.cloneShape = function (shapeId) {
+        var obj = { isSelected: false };
+        if (shapeId.split('_')[0] === 'shape') {
+            this.notify('shape', { prop: 'selectShape', onPropertyChange: false, value: { id: shapeId, obj: obj } });
+            if (obj['isSelected']) {
+                if (isBlazor()) {
+                    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                    this.duplicateShape(false, true);
+                }
+                else {
+                    this.notify('toolbar', { prop: 'duplicateShape', onPropertyChange: false, value: { isPreventUndoRedo: false } });
+                }
+                this.okBtn();
+                this.notify('draw', { prop: 'redrawDownScale' });
+            }
+        }
+        return obj['isSelected'];
+    };
     // Toolbar related codes
     ImageEditor.prototype.toolbarTemplateFn = function () {
         var template;
@@ -1668,11 +1829,11 @@ var ImageEditor = /** @class */ (function (_super) {
         this.isUndoRedo = true;
         if (this.transform.cropZoomFactor && this.transform.cropZoomFactor > 0) {
             this.notify('transform', { prop: 'zoomAction', onPropertyChange: false,
-                value: { zoomFactor: -this.transform.cropZoomFactor, zoomPoint: null, isResize: null } });
+                value: { zoomFactor: -this.transform.cropZoomFactor, zoomPoint: null, isResize: true } });
         }
         else {
             this.notify('transform', { prop: 'zoomAction', onPropertyChange: false,
-                value: { zoomFactor: Math.abs(this.transform.cropZoomFactor), zoomPoint: null, isResize: null } });
+                value: { zoomFactor: Math.abs(this.transform.cropZoomFactor), zoomPoint: null, isResize: true } });
         }
         this.isUndoRedo = isUndoRedo;
         this.panPoint.totalPannedPoint = { x: 0, y: 0 };
@@ -1691,23 +1852,7 @@ var ImageEditor = /** @class */ (function (_super) {
      */
     ImageEditor.prototype.updateCropTransformItems = function () {
         this.prevCurrSelectionPoint = extend({}, this.currSelectionPoint, {}, true);
-        var object = { currObj: {} };
-        this.notify('filter', { prop: 'getCurrentObj', onPropertyChange: false, value: { object: object } });
-        var currentObj = object['currObj'];
-        currentObj.objColl = extend([], this.objColl, [], true);
-        currentObj.pointColl = extend([], this.pointColl, [], true);
-        currentObj.afterCropActions = extend([], this.afterCropActions, [], true);
-        var selPointCollObj = { selPointColl: null };
-        this.notify('freehand-draw', { prop: 'getSelPointColl', onPropertyChange: false,
-            value: { obj: selPointCollObj } });
-        currentObj.selPointColl = extend([], selPointCollObj['selPointColl'], [], true);
-        this.cancelCropSelection = { operation: 'cropTransform', previousObj: currentObj, currentObj: currentObj,
-            previousObjColl: currentObj.objColl, currentObjColl: currentObj.objColl,
-            previousPointColl: currentObj.pointColl, currentPointColl: currentObj.pointColl,
-            previousSelPointColl: currentObj.selPointColl, currentSelPointColl: currentObj.selPointColl,
-            previousCropObj: extend({}, this.cropObj, {}, true),
-            currentCropObj: extend({}, this.cropObj, {}, true),
-            previousText: null, currentText: null, filter: null, isCircleCrop: this.isCircleCrop };
+        this.notify('draw', { prop: 'updateCropSelection', onPropertyChange: false });
     };
     /**
      * Get the pascal case.
@@ -1762,11 +1907,13 @@ var ImageEditor = /** @class */ (function (_super) {
      * @returns {void}.
      */
     ImageEditor.prototype.okBtn = function (isMouseDown) {
-        if (this.element.querySelector('.e-contextual-toolbar-wrapper')) {
-            this.element.querySelector('.e-contextual-toolbar-wrapper').classList.remove('e-frame-wrapper');
+        var ctWrapper = this.element.querySelector('.e-contextual-toolbar-wrapper');
+        if (ctWrapper) {
+            ctWrapper.classList.remove('e-frame-wrapper');
         }
         var isCropSelection = false;
         var splitWords;
+        this.isResizeOkBtn = true;
         var aspectIcon = this.element.querySelector('#' + this.element.id + '_aspectratio');
         var nonAspectIcon = this.element.querySelector('#' + this.element.id + '_nonaspectratio');
         var blrAspRatElem = this.element.querySelector('.e-ie-toolbar-aspect-ratio-btn');
@@ -1788,8 +1935,7 @@ var ImageEditor = /** @class */ (function (_super) {
             if (this.togglePen) {
                 shapeSettings.type = ShapeType.FreehandDraw;
             }
-            var shapeChangedArgs = { action: 'apply', previousShapeSettings: extend({}, shapeSettings, {}, true),
-                currentShapeSettings: extend({}, shapeSettings, {}, true) };
+            var shapeChangedArgs = { action: 'apply', currentShapeSettings: extend({}, shapeSettings, {}, true) };
             this.triggerShapeChanged(shapeChangedArgs);
         }
         /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
@@ -1826,6 +1972,18 @@ var ImageEditor = /** @class */ (function (_super) {
                         previousCropObj: obj1['prevCropObj'], previousText: null, currentText: null, previousFilter: null,
                         isCircleCrop: null } });
                 this.notify('undo-redo', { prop: 'updateCurrUrc', value: { type: 'ok' } });
+                var obj_3 = this.cancelCropSelection;
+                if ((!isBlazor() && obj_3 && (isNullOrUndefined(nonAspectIcon) || !nonAspectIcon)) || (isBlazor() && obj_3 && blrNAspRatElem && blrNAspRatElem.classList.contains('e-hidden'))) {
+                    obj_3.previousObj.aspectWidth = obj_3.currentObj.aspectWidth = this.aspectWidth;
+                    obj_3.previousObj.aspectHeight = obj_3.currentObj.aspectHeight = this.aspectHeight;
+                    obj_3.previousCropObj = extend({}, this.cropObj, {}, true);
+                    obj_3.currentCropObj = extend({}, this.cropObj, {}, true);
+                    this.notify('draw', { prop: 'updateCropSelObj' });
+                }
+                this.cancelCropSelection = null;
+            }
+            else if (point && (point.x === 0 || point.y === 0)) {
+                this.notify('draw', { prop: 'performCancel', value: { isContextualToolbar: null } });
             }
             else {
                 this.notify('toolbar', { prop: 'refresh-toolbar', onPropertyChange: false, value: { type: 'main',
@@ -1842,27 +2000,41 @@ var ImageEditor = /** @class */ (function (_super) {
             this.currentFilter = selElem.children[0].children[0].id.replace('Canvas', '');
         }
         if (isCropSelection) {
-            this.crop();
+            if (this.transform.straighten !== 0 && (this.panPoint.totalPannedPoint.x !== 0 || this.panPoint.totalPannedPoint.y !== 0 ||
+                this.panPoint.totalPannedClientPoint.x !== 0 || this.panPoint.totalPannedClientPoint.y !== 0)) {
+                var temp = this.prevStraightenedDegree;
+                this.prevStraightenedDegree = this.transform.straighten;
+                this.setStraighten(this.transform.straighten - 3);
+                this.setStraighten(this.transform.straighten + 3);
+                this.prevStraightenedDegree = temp;
+            }
+            this.isCroppedEvent = this.crop();
         }
         else if (this.togglePen) {
             this.freeHandDraw(false);
             this.notify('undo-redo', { prop: 'updateCurrUrc', value: { type: 'ok' } });
+            this.notify('draw', { prop: 'clearOuterCanvas', onPropertyChange: false, value: { context: this.lowerContext } });
+            this.notify('draw', { prop: 'clearOuterCanvas', onPropertyChange: false, value: { context: this.upperContext } });
         }
-        else if (this.textArea.style.display === 'block') {
+        else if (this.textArea.style.display === 'block' || this.textArea.style.display === 'inline-block') {
             this.notify('shape', { prop: 'redrawActObj', onPropertyChange: false,
                 value: { x: null, y: null, isMouseDown: null } });
+            this.lowerContext.clearRect(0, 0, this.lowerCanvas.width, this.lowerCanvas.height);
+            this.notify('draw', { prop: 'redrawImgWithObj', onPropertyChange: false });
             if (isNullOrUndefined(isMouseDown)) {
                 this.notify('undo-redo', { prop: 'updateCurrUrc', value: { type: 'ok' } });
             }
+            this.notify('draw', { prop: 'clearOuterCanvas', onPropertyChange: false, value: { context: this.lowerContext } });
+            this.notify('draw', { prop: 'clearOuterCanvas', onPropertyChange: false, value: { context: this.upperContext } });
         }
         else if ((!isBlazor() && document.querySelector('#' + this.element.id + '_sliderWrapper')) ||
             (isBlazor() && !this.element.querySelector('.e-ie-contextual-slider').classList.contains('e-hidden')) ||
             this.currObjType.isFiltered) {
             this.initialAdjustmentValue = this.canvasFilter = this.lowerContext.filter;
             this.currObjType.isFiltered = false;
-            var obj_3 = { value: null };
-            this.notify('draw', { prop: 'getTempAdjustmentValue', value: { obj: obj_3 } });
-            if (obj_3['value'] !== this.lowerContext.filter) {
+            var obj_4 = { value: null };
+            this.notify('draw', { prop: 'getTempAdjustmentValue', value: { obj: obj_4 } });
+            if (obj_4['value'] !== this.lowerContext.filter) {
                 this.notify('undo-redo', { prop: 'updateCurrUrc', value: { type: 'ok' } });
             }
             if ((this.activeObj.activePoint.width !== 0 && this.activeObj.activePoint.height !== 0) ||
@@ -1873,11 +2045,11 @@ var ImageEditor = /** @class */ (function (_super) {
         else if (obj['bool']) {
             this.notify('freehand-draw', { prop: 'applyFhd', onPropertyChange: false });
             this.notify('selection', { prop: 'setFreehandDrawCustomized', value: { isFreehandDrawCustomized: false } });
-            if (!isBlazor()) {
-                this.notify('toolbar', { prop: 'destroy-qa-toolbar' });
+            if (isBlazor()) {
+                this.updateToolbar(this.element, 'destroyQuickAccessToolbar');
             }
             else {
-                this.updateToolbar(this.element, 'destroyQuickAccessToolbar');
+                this.notify('toolbar', { prop: 'destroy-qa-toolbar' });
             }
             this.notify('undo-redo', { prop: 'updateCurrUrc', value: { type: 'ok' } });
         }
@@ -1901,9 +2073,8 @@ var ImageEditor = /** @class */ (function (_super) {
                 this.notify('draw', { prop: 'render-image', value: { isMouseWheel: null, isPreventClearRect: null, isFrame: true } });
                 this.notify('undo-redo', { prop: 'updateCurrUrc', value: { type: 'ok' } });
                 this.tempFrameObj = extend({}, this.frameObj, {}, true);
-                this.notify('draw', { prop: 'setTempFrame', onPropertyChange: false, value: { frame: this.frameObj.type } });
             }
-            this.notify('draw', { prop: 'resetFrameZoom', onPropertyChange: false });
+            this.notify('draw', { prop: 'resetFrameZoom', onPropertyChange: false, value: { isOk: true } });
         }
         if (!isBlazor() && !obj['isCropToolbar']) {
             this.notify('toolbar', { prop: 'refresh-toolbar', onPropertyChange: false, value: { type: 'main',
@@ -1913,9 +2084,12 @@ var ImageEditor = /** @class */ (function (_super) {
             this.updateToolbar(this.element, 'imageLoaded');
         }
         this.notify('draw', { prop: 'setNewPath', value: { bool: false } });
-        this.isCropTab = false;
         this.transform.zoomFactor = this.transform.defaultZoomFactor;
         this.notify('selection', { prop: 'setCurrentDrawingShape', onPropertyChange: false, value: { value: '' } });
+        this.isResizeOkBtn = false;
+        this.notify('draw', { prop: 'redrawDownScale' });
+        this.isChangesSaved = false;
+        this.triggerActionComplete();
     };
     /**
      * Set the temporary filter properties.
@@ -1967,12 +2141,13 @@ var ImageEditor = /** @class */ (function (_super) {
         this.pointColl = [];
         this.freehandCounter = 0;
         this.notify('draw', { prop: 'render-image', value: { isMouseWheel: false } });
-        if (this.element.querySelector('.e-contextual-toolbar-wrapper')) {
-            this.element.querySelector('.e-contextual-toolbar-wrapper').classList.add('e-hide');
+        var ctWrapper = this.element.querySelector('.e-contextual-toolbar-wrapper');
+        if (ctWrapper) {
+            ctWrapper.classList.add('e-hide');
         }
         var data = this.getImageData();
-        if (this.element.querySelector('.e-contextual-toolbar-wrapper')) {
-            this.element.querySelector('.e-contextual-toolbar-wrapper').classList.remove('e-hide');
+        if (ctWrapper) {
+            ctWrapper.classList.remove('e-hide');
             if (isBlazor()) {
                 this.element.querySelector('.e-ie-toolbar-check-btn').classList.remove('e-hidden');
                 this.element.querySelector('.e-ie-toolbar-close-btn').classList.remove('e-hidden');
@@ -2006,8 +2181,9 @@ var ImageEditor = /** @class */ (function (_super) {
         var finetuneValueChanging = { finetune: this.getFinetuneOption(type),
             value: value, cancel: false };
         if (isBlazor() && this.events && this.events.finetuneValueChanging.hasDelegate === true) {
+            finetuneValueChanging.value = parseInt(finetuneValueChanging.value.toString());
             /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
-            this.dotNetRef.invokeMethodAsync('OnFinetuneValueChangeAsync', finetuneValueChanging).then(function (finetuneValueChanging) {
+            this.dotNetRef.invokeMethodAsync('OnFinetuneValueChangeAsync', 'FinetuneValueChanging', finetuneValueChanging, null).then(function (finetuneValueChanging) {
                 if (finetuneValueChanging.cancel) {
                     return;
                 }
@@ -2063,7 +2239,8 @@ var ImageEditor = /** @class */ (function (_super) {
      */
     ImageEditor.prototype.getSelectionType = function (type) {
         var typeToSelectionType = { 'CropCustom': 'Custom', 'CropSquare': 'Square', 'CropCircle': 'Circle',
-            'Crop3:2': '3:2', 'Crop4:3': '4:3', 'Crop5:4': '5:4', 'Crop7:5': '7:5', 'Crop16:9': '16:9' };
+            'Crop3:2': '3:2', 'Crop4:3': '4:3', 'Crop5:4': '5:4', 'Crop7:5': '7:5', 'Crop16:9': '16:9',
+            'Crop2:3': '2:3', 'Crop3:4': '3:4', 'Crop4:5': '4:5', 'Crop5:7': '5:7', 'Crop9:16': '9:16' };
         return typeToSelectionType["" + type];
     };
     /** Clears the context.
@@ -2106,10 +2283,12 @@ var ImageEditor = /** @class */ (function (_super) {
         this.notify('shape', { prop: 'setStrokeSettings', value: { strokeSettings: null, strokeColor: null, fillColor: null,
                 strokeWidth: this.activeObj.strokeSettings.strokeWidth } });
         this.objColl.push(this.activeObj);
-        this.notify('undo-redo', { prop: 'updateUndoRedoColl', onPropertyChange: false,
-            value: { operation: 'shapeTransform', previousObj: prevObj, previousObjColl: prevObj.objColl,
-                previousPointColl: prevObj.pointColl, previousCropObj: prevCropObj, previousText: null,
-                currentText: null, previousFilter: null, isCircleCrop: null } });
+        if (this.activeObj.activePoint.width !== 0 || this.activeObj.activePoint.height !== 0) {
+            this.notify('undo-redo', { prop: 'updateUndoRedoColl', onPropertyChange: false,
+                value: { operation: 'shapeTransform', previousObj: prevObj, previousObjColl: prevObj.objColl,
+                    previousPointColl: prevObj.pointColl, previousCropObj: prevCropObj, previousText: null,
+                    currentText: null, previousFilter: null, isCircleCrop: null } });
+        }
         this.notify('selection', { prop: 'redrawShape', value: { obj: this.objColl[this.objColl.length - 1] } });
         if (!isBlazor()) {
             if (Browser.isDevice) {
@@ -2127,8 +2306,7 @@ var ImageEditor = /** @class */ (function (_super) {
                 }
             }
         }
-        var shapeChangedArgs = { action: type, previousShapeSettings: extend({}, shapeSettings, {}, true),
-            currentShapeSettings: extend({}, shapeSettings, {}, true) };
+        var shapeChangedArgs = { action: type, currentShapeSettings: extend({}, shapeSettings, {}, true) };
         this.triggerShapeChanged(shapeChangedArgs);
     };
     /**
@@ -2157,18 +2335,20 @@ var ImageEditor = /** @class */ (function (_super) {
             value: { obj: selPointCollObj } });
         prevObj.selPointColl = extend([], selPointCollObj['selPointColl'], [], true);
         this.objColl.pop();
-        if (this.textArea.style.display === 'block') {
+        if (this.textArea.style.display === 'block' || this.textArea.style.display === 'inline-block') {
             this.notify('shape', { prop: 'updateFontRatio', onPropertyChange: false,
                 value: { obj: this.activeObj, isTextArea: true } });
             var temp = this.activeObj.textSettings.fontFamily;
             this.activeObj.textSettings.fontFamily = this.toPascalCase(id);
             this.notify('shape', { prop: 'redraw-text' });
             this.objColl.push(this.activeObj);
-            this.notify('undo-redo', { prop: 'updateUndoRedoColl', onPropertyChange: false,
-                value: { operation: 'textAreaCustomization', previousObj: prevObj, previousObjColl: prevObj.objColl,
-                    previousPointColl: prevObj.pointColl, previousSelPointColl: prevObj.selPointColl,
-                    previousCropObj: prevCropObj, previousText: null,
-                    currentText: null, previousFilter: null, isCircleCrop: null } });
+            if (this.activeObj.activePoint.width !== 0 || this.activeObj.activePoint.height !== 0) {
+                this.notify('undo-redo', { prop: 'updateUndoRedoColl', onPropertyChange: false,
+                    value: { operation: 'textAreaCustomization', previousObj: prevObj, previousObjColl: prevObj.objColl,
+                        previousPointColl: prevObj.pointColl, previousSelPointColl: prevObj.selPointColl,
+                        previousCropObj: prevCropObj, previousText: null,
+                        currentText: null, previousFilter: null, isCircleCrop: null } });
+            }
             this.objColl.pop();
             this.upperContext.clearRect(0, 0, this.upperCanvas.width, this.upperCanvas.height);
             var width = this.activeObj.activePoint.width +
@@ -2187,15 +2367,16 @@ var ImageEditor = /** @class */ (function (_super) {
                 value: { textSettings: null, fontFamily: fontFamily, fontSize: null } });
             this.notify('shape', { prop: 'redraw-text' });
             this.objColl.push(this.activeObj);
-            this.notify('undo-redo', { prop: 'updateUndoRedoColl', onPropertyChange: false,
-                value: { operation: 'shapeTransform', previousObj: prevObj, previousObjColl: objColl,
-                    previousPointColl: extend([], this.pointColl, [], true),
-                    previousSelPointColl: prevObj.selPointColl, previousCropObj: prevCropObj, previousText: null,
-                    currentText: null, previousFilter: null, isCircleCrop: null } });
+            if (this.activeObj.activePoint.width !== 0 || this.activeObj.activePoint.height !== 0) {
+                this.notify('undo-redo', { prop: 'updateUndoRedoColl', onPropertyChange: false,
+                    value: { operation: 'shapeTransform', previousObj: prevObj, previousObjColl: objColl,
+                        previousPointColl: extend([], this.pointColl, [], true),
+                        previousSelPointColl: prevObj.selPointColl, previousCropObj: prevCropObj, previousText: null,
+                        currentText: null, previousFilter: null, isCircleCrop: null } });
+            }
             this.notify('selection', { prop: 'redrawShape', value: { obj: this.objColl[this.objColl.length - 1] } });
         }
-        var shapeChangedArgs = { action: 'font-family', previousShapeSettings: extend({}, shapeSettings, {}, true),
-            currentShapeSettings: extend({}, shapeSettings, {}, true) };
+        var shapeChangedArgs = { action: 'font-family', currentShapeSettings: extend({}, shapeSettings, {}, true) };
         shapeChangedArgs.currentShapeSettings.fontFamily = this.textArea.style.fontFamily;
         this.triggerShapeChanged(shapeChangedArgs);
     };
@@ -2225,17 +2406,19 @@ var ImageEditor = /** @class */ (function (_super) {
             value: { obj: selPointCollObj } });
         prevObj.selPointColl = extend([], selPointCollObj['selPointColl'], [], true);
         this.objColl.pop();
-        if (this.textArea.style.display === 'block') {
+        if (this.textArea.style.display === 'block' || this.textArea.style.display === 'inline-block') {
             this.notify('shape', { prop: 'updateFontRatio', onPropertyChange: false,
                 value: { obj: this.activeObj, isTextArea: true } });
             var temp = this.activeObj.textSettings.fontSize;
             this.activeObj.textSettings.fontSize = parseInt(this.fontSizeColl[(parseInt(itemText, 10) - 1)].text, 10);
             this.objColl.push(this.activeObj);
-            this.notify('undo-redo', { prop: 'updateUndoRedoColl', onPropertyChange: false,
-                value: { operation: 'textAreaCustomization', previousObj: prevObj, previousObjColl: prevObj.objColl,
-                    previousPointColl: prevObj.pointColl, previousSelPointColl: prevObj.selPointColl,
-                    previousCropObj: prevCropObj, previousText: null,
-                    currentText: null, previousFilter: null, isCircleCrop: null } });
+            if (this.activeObj.activePoint.width !== 0 || this.activeObj.activePoint.height !== 0) {
+                this.notify('undo-redo', { prop: 'updateUndoRedoColl', onPropertyChange: false,
+                    value: { operation: 'textAreaCustomization', previousObj: prevObj, previousObjColl: prevObj.objColl,
+                        previousPointColl: prevObj.pointColl, previousSelPointColl: prevObj.selPointColl,
+                        previousCropObj: prevCropObj, previousText: null,
+                        currentText: null, previousFilter: null, isCircleCrop: null } });
+            }
             this.objColl.pop();
             var textStyle = '';
             if (this.textArea.style.fontWeight === 'bold') {
@@ -2286,15 +2469,16 @@ var ImageEditor = /** @class */ (function (_super) {
                     isMouseMove: null, x: null, y: null } });
             this.notify('shape', { prop: 'redraw-text' });
             this.objColl.push(this.activeObj);
-            this.notify('undo-redo', { prop: 'updateUndoRedoColl', onPropertyChange: false,
-                value: { operation: 'shapeTransform', previousObj: prevObj, previousObjColl: prevObj.objColl,
-                    previousPointColl: prevObj.pointColl, previousSelPointColl: prevObj.selPointColl,
-                    previousCropObj: prevCropObj, previousText: null,
-                    currentText: null, previousFilter: null, isCircleCrop: null } });
+            if (this.activeObj.activePoint.width !== 0 || this.activeObj.activePoint.height !== 0) {
+                this.notify('undo-redo', { prop: 'updateUndoRedoColl', onPropertyChange: false,
+                    value: { operation: 'shapeTransform', previousObj: prevObj, previousObjColl: prevObj.objColl,
+                        previousPointColl: prevObj.pointColl, previousSelPointColl: prevObj.selPointColl,
+                        previousCropObj: prevCropObj, previousText: null,
+                        currentText: null, previousFilter: null, isCircleCrop: null } });
+            }
             this.notify('selection', { prop: 'redrawShape', value: { obj: this.objColl[this.objColl.length - 1] } });
         }
-        var shapeChangedArgs = { action: 'font-size', previousShapeSettings: extend({}, shapeSettings, {}, true),
-            currentShapeSettings: extend({}, shapeSettings, {}, true) };
+        var shapeChangedArgs = { action: 'font-size', currentShapeSettings: extend({}, shapeSettings, {}, true) };
         shapeChangedArgs.currentShapeSettings.fontSize = this.activeObj.textSettings.fontSize;
         this.triggerShapeChanged(shapeChangedArgs);
     };
@@ -2329,38 +2513,43 @@ var ImageEditor = /** @class */ (function (_super) {
                     strokeColor: this.activeObj.strokeSettings.strokeColor, fillColor: null, strokeWidth: null } });
             if (!this.togglePen) {
                 this.objColl.push(this.activeObj);
-                this.notify('undo-redo', { prop: 'updateUndoRedoColl', onPropertyChange: false,
-                    value: { operation: 'shapeTransform', previousObj: prevObj, previousObjColl: prevObj.objColl,
-                        previousPointColl: prevObj.pointColl, previousSelPointColl: prevObj.selPointColl,
-                        previousCropObj: prevCropObj, previousText: null,
-                        currentText: null, previousFilter: null, isCircleCrop: null } });
+                if (this.activeObj.activePoint.width !== 0 || this.activeObj.activePoint.height !== 0) {
+                    this.notify('undo-redo', { prop: 'updateUndoRedoColl', onPropertyChange: false,
+                        value: { operation: 'shapeTransform', previousObj: prevObj, previousObjColl: prevObj.objColl,
+                            previousPointColl: prevObj.pointColl, previousSelPointColl: prevObj.selPointColl,
+                            previousCropObj: prevCropObj, previousText: null,
+                            currentText: null, previousFilter: null, isCircleCrop: null } });
+                }
                 this.notify('selection', { prop: 'redrawShape', value: { obj: this.objColl[this.objColl.length - 1] } });
             }
         }
-        else if (this.textArea.style.display === 'block') {
+        else if (this.textArea.style.display === 'block' || this.textArea.style.display === 'inline-block') {
             this.textArea.style.color = value;
             var temp = this.activeObj.strokeSettings.strokeColor;
             this.activeObj.strokeSettings.strokeColor = value;
             this.objColl.push(this.activeObj);
-            this.notify('undo-redo', { prop: 'updateUndoRedoColl', onPropertyChange: false,
-                value: { operation: 'textAreaCustomization', previousObj: prevObj, previousObjColl: prevObj.objColl,
-                    previousPointColl: prevObj.pointColl, previousSelPointColl: prevObj.selPointColl,
-                    previousCropObj: prevCropObj, previousText: null,
-                    currentText: null, previousFilter: null, isCircleCrop: null } });
+            if (this.activeObj.activePoint.width !== 0 || this.activeObj.activePoint.height !== 0) {
+                this.notify('undo-redo', { prop: 'updateUndoRedoColl', onPropertyChange: false,
+                    value: { operation: 'textAreaCustomization', previousObj: prevObj, previousObjColl: prevObj.objColl,
+                        previousPointColl: prevObj.pointColl, previousSelPointColl: prevObj.selPointColl,
+                        previousCropObj: prevCropObj, previousText: null,
+                        currentText: null, previousFilter: null, isCircleCrop: null } });
+            }
             this.objColl.pop();
             this.activeObj.strokeSettings.strokeColor = temp;
         }
         else if (!this.togglePen) {
             this.objColl.push(this.activeObj);
-            this.notify('undo-redo', { prop: 'updateUndoRedoColl', onPropertyChange: false,
-                value: { operation: 'shapeTransform', previousObj: prevObj, previousObjColl: prevObj.objColl,
-                    previousPointColl: prevObj.pointColl, previousSelPointColl: prevObj.selPointColl,
-                    previousCropObj: prevCropObj, previousText: null,
-                    currentText: null, previousFilter: null, isCircleCrop: null } });
+            if (this.activeObj.activePoint.width !== 0 || this.activeObj.activePoint.height !== 0) {
+                this.notify('undo-redo', { prop: 'updateUndoRedoColl', onPropertyChange: false,
+                    value: { operation: 'shapeTransform', previousObj: prevObj, previousObjColl: prevObj.objColl,
+                        previousPointColl: prevObj.pointColl, previousSelPointColl: prevObj.selPointColl,
+                        previousCropObj: prevCropObj, previousText: null,
+                        currentText: null, previousFilter: null, isCircleCrop: null } });
+            }
             this.notify('selection', { prop: 'redrawShape', value: { obj: this.objColl[this.objColl.length - 1] } });
         }
-        var shapeChangedArgs = { action: 'font-color', previousShapeSettings: extend({}, shapeSettings, {}, true),
-            currentShapeSettings: extend({}, shapeSettings, {}, true) };
+        var shapeChangedArgs = { action: 'font-color', currentShapeSettings: extend({}, shapeSettings, {}, true) };
         shapeChangedArgs.currentShapeSettings.fillColor = value;
         this.triggerShapeChanged(shapeChangedArgs);
     };
@@ -2395,14 +2584,19 @@ var ImageEditor = /** @class */ (function (_super) {
         var obj = { bool: false };
         this.notify('selection', { prop: 'getFreehandDrawEditing', onPropertyChange: false, value: { obj: obj } });
         if (obj['bool']) {
-            var obj_4 = { penStrokeWidth: null };
-            this.notify('freehand-draw', { prop: 'getPenStrokeWidth', onPropertyChange: false, value: { obj: obj_4 } });
+            var obj_5 = { penStrokeWidth: null };
+            this.notify('freehand-draw', { prop: 'getPenStrokeWidth', onPropertyChange: false, value: { obj: obj_5 } });
             this.upperContext.clearRect(0, 0, this.upperCanvas.width, this.upperCanvas.height);
+            this.lowerContext.clearRect(0, 0, this.lowerCanvas.width, this.lowerCanvas.height);
             this.notify('freehand-draw', { prop: 'hoverFhd', onPropertyChange: false,
-                value: { strokeColor: null, strokeWidth: obj_4['penStrokeWidth'] } });
+                value: { strokeColor: null, strokeWidth: obj_5['penStrokeWidth'] } });
             var indexObj = { freehandSelectedIndex: null };
             this.notify('freehand-draw', { prop: 'getFreehandSelectedIndex', onPropertyChange: false, value: { obj: indexObj } });
-            this.pointColl[indexObj['freehandSelectedIndex']].strokeWidth = obj_4['penStrokeWidth'];
+            this.pointColl[indexObj['freehandSelectedIndex']].strokeWidth = obj_5['penStrokeWidth'];
+            this.notify('draw', { prop: 'render-image', value: { isMouseWheel: null } });
+            this.notify('draw', { prop: 'redrawDownScale' });
+            this.notify('freehand-draw', { prop: 'hoverFhd', onPropertyChange: false,
+                value: { strokeColor: null, strokeWidth: obj_5['penStrokeWidth'] } });
             this.notify('undo-redo', { prop: 'updateUndoRedoColl', onPropertyChange: false,
                 value: { operation: 'freehanddrawCustomized', previousObj: prevObj, previousObjColl: prevObj.objColl,
                     previousPointColl: prevObj.pointColl, previousSelPointColl: prevObj.selPointColl,
@@ -2410,8 +2604,7 @@ var ImageEditor = /** @class */ (function (_super) {
                     currentText: null, previousFilter: null, isCircleCrop: null } });
         }
         shapeSettings.type = ShapeType.FreehandDraw;
-        var shapeChangedArgs = { action: 'stroke-width', previousShapeSettings: extend({}, shapeSettings, {}, true),
-            currentShapeSettings: extend({}, shapeSettings, {}, true) };
+        var shapeChangedArgs = { action: 'stroke-width', currentShapeSettings: extend({}, shapeSettings, {}, true) };
         shapeChangedArgs.currentShapeSettings.strokeWidth = this.activeObj.strokeSettings.strokeWidth;
         this.triggerShapeChanged(shapeChangedArgs);
     };
@@ -2443,13 +2636,32 @@ var ImageEditor = /** @class */ (function (_super) {
         this.pointColl = temp;
         this.notify('selection', { prop: 'setFreehandDrawCustomized', value: { isFreehandDrawCustomized: true } });
         this.activeObj.strokeSettings.strokeColor = value;
+        var indexObj = { freehandSelectedIndex: null };
+        this.notify('freehand-draw', { prop: 'getFreehandSelectedIndex', onPropertyChange: false, value: { obj: indexObj } });
+        if (indexObj['freehandSelectedIndex'] !== null && indexObj['freehandSelectedIndex'] !== undefined) {
+            this.upperContext.clearRect(0, 0, this.upperCanvas.width, this.upperCanvas.height);
+            // Temporary delete the selected freehand drawing from the collection
+            var count = 0;
+            var temp_1 = extend({}, this.pointColl, {}, true);
+            for (var i = 0; i < this.freehandCounter; i++) {
+                if (parseInt(temp_1[i].id.split('_')[1], 10) - 1 !== indexObj['freehandSelectedIndex']) {
+                    this.pointColl[count] = temp_1[i];
+                    count++;
+                }
+            }
+            this.notify('draw', { prop: 'render-image', value: { isMouseWheel: null } });
+            this.notify('draw', { prop: 'redrawDownScale' });
+            this.pointColl = temp_1;
+            this.notify('freehand-draw', { prop: 'hoverFhd', onPropertyChange: false,
+                value: { strokeColor: null, strokeWidth: null } });
+        }
         var obj = { bool: false };
         this.notify('selection', { prop: 'getFreehandDrawEditing', onPropertyChange: false, value: { obj: obj } });
         if (obj['bool']) {
-            var indexObj = { freehandSelectedIndex: null };
-            this.notify('freehand-draw', { prop: 'getFreehandSelectedIndex', onPropertyChange: false, value: { obj: indexObj } });
+            var indexObj_1 = { freehandSelectedIndex: null };
+            this.notify('freehand-draw', { prop: 'getFreehandSelectedIndex', onPropertyChange: false, value: { obj: indexObj_1 } });
             this.upperContext.clearRect(0, 0, this.upperCanvas.width, this.upperCanvas.height);
-            this.pointColl[indexObj['freehandSelectedIndex']].strokeColor = value;
+            this.pointColl[indexObj_1['freehandSelectedIndex']].strokeColor = value;
             this.notify('freehand-draw', { prop: 'hoverFhd', onPropertyChange: false,
                 value: { strokeColor: value } });
             this.notify('undo-redo', { prop: 'updateUndoRedoColl', onPropertyChange: false,
@@ -2462,8 +2674,7 @@ var ImageEditor = /** @class */ (function (_super) {
             this.notify('selection', { prop: 'redrawShape', value: { obj: this.activeObj } });
         }
         shapeSettings.type = ShapeType.FreehandDraw;
-        var shapeChangedArgs = { action: 'stroke-color', previousShapeSettings: extend({}, shapeSettings, {}, true),
-            currentShapeSettings: extend({}, shapeSettings, {}, true) };
+        var shapeChangedArgs = { action: 'stroke-color', currentShapeSettings: extend({}, shapeSettings, {}, true) };
         shapeChangedArgs.currentShapeSettings.strokeColor = value;
         this.triggerShapeChanged(shapeChangedArgs);
     };
@@ -2494,18 +2705,22 @@ var ImageEditor = /** @class */ (function (_super) {
             prevObj.selPointColl = extend([], selPointCollObj['selPointColl'], [], true);
             this.objColl.pop();
             this.activeObj.strokeSettings.strokeWidth = parseInt(id, 10);
+            if (this.activeObj.shape === 'rectangle' || this.activeObj.shape === 'ellipse') {
+                this.activeObj.strokeSettings.strokeWidth = parseInt(id, 10) - 1;
+            }
             this.activeObj.strokeSettings.strokeWidth *= 2;
             this.notify('shape', { prop: 'setStrokeSettings', value: { strokeSettings: null, strokeColor: null, fillColor: null,
                     strokeWidth: this.activeObj.strokeSettings.strokeWidth } });
             this.objColl.push(this.activeObj);
-            this.notify('undo-redo', { prop: 'updateUndoRedoColl', onPropertyChange: false,
-                value: { operation: 'shapeTransform', previousObj: prevObj, previousObjColl: prevObj.objColl,
-                    previousPointColl: prevObj.pointColl, previousSelPointColl: prevObj.selPointColl,
-                    previousCropObj: prevCropObj, previousText: null,
-                    currentText: null, previousFilter: null, isCircleCrop: null } });
+            if (this.activeObj.activePoint.width !== 0 || this.activeObj.activePoint.height !== 0) {
+                this.notify('undo-redo', { prop: 'updateUndoRedoColl', onPropertyChange: false,
+                    value: { operation: 'shapeTransform', previousObj: prevObj, previousObjColl: prevObj.objColl,
+                        previousPointColl: prevObj.pointColl, previousSelPointColl: prevObj.selPointColl,
+                        previousCropObj: prevCropObj, previousText: null,
+                        currentText: null, previousFilter: null, isCircleCrop: null } });
+            }
             this.notify('selection', { prop: 'redrawShape', value: { obj: this.objColl[this.objColl.length - 1] } });
-            var shapeChangedArgs = { action: 'stroke-width', previousShapeSettings: extend({}, shapeSettings, {}, true),
-                currentShapeSettings: extend({}, shapeSettings, {}, true) };
+            var shapeChangedArgs = { action: 'stroke-width', currentShapeSettings: extend({}, shapeSettings, {}, true) };
             shapeChangedArgs.currentShapeSettings.strokeWidth = this.activeObj.strokeSettings.strokeWidth;
             this.triggerShapeChanged(shapeChangedArgs);
         }
@@ -2547,11 +2762,13 @@ var ImageEditor = /** @class */ (function (_super) {
             this.notify('shape', { prop: 'setStrokeSettings', value: { strokeSettings: null, strokeColor: this.activeObj.strokeSettings.strokeColor, fillColor: null, strokeWidth: null } });
             if (!this.togglePen) {
                 this.objColl.push(this.activeObj);
-                this.notify('undo-redo', { prop: 'updateUndoRedoColl', onPropertyChange: false,
-                    value: { operation: 'shapeTransform', previousObj: prevObj, previousObjColl: prevObj.objColl,
-                        previousPointColl: prevObj.pointColl, previousSelPointColl: prevObj.selPointColl,
-                        previousCropObj: prevCropObj, previousText: null,
-                        currentText: null, previousFilter: null, isCircleCrop: null } });
+                if (this.activeObj.activePoint.width !== 0 || this.activeObj.activePoint.height !== 0) {
+                    this.notify('undo-redo', { prop: 'updateUndoRedoColl', onPropertyChange: false,
+                        value: { operation: 'shapeTransform', previousObj: prevObj, previousObjColl: prevObj.objColl,
+                            previousPointColl: prevObj.pointColl, previousSelPointColl: prevObj.selPointColl,
+                            previousCropObj: prevCropObj, previousText: null,
+                            currentText: null, previousFilter: null, isCircleCrop: null } });
+                }
                 this.notify('selection', { prop: 'redrawShape', value: { obj: this.objColl[this.objColl.length - 1] } });
             }
         }
@@ -2560,8 +2777,7 @@ var ImageEditor = /** @class */ (function (_super) {
             this.activeObj.strokeSettings.strokeColor = value;
             this.notify('shape', { prop: 'setStrokeSettings', value: { strokeSettings: null, strokeColor: this.activeObj.strokeSettings.strokeColor, fillColor: null, strokeWidth: null } });
         }
-        var shapeChangedArgs = { action: 'stroke-color', previousShapeSettings: extend({}, shapeSettings, {}, true),
-            currentShapeSettings: extend({}, shapeSettings, {}, true) };
+        var shapeChangedArgs = { action: 'stroke-color', currentShapeSettings: extend({}, shapeSettings, {}, true) };
         shapeChangedArgs.currentShapeSettings.strokeColor = value;
         this.triggerShapeChanged(shapeChangedArgs);
     };
@@ -2594,15 +2810,15 @@ var ImageEditor = /** @class */ (function (_super) {
             value: { strokeSettings: null, strokeColor: null, fillColor: this.activeObj.strokeSettings.fillColor,
                 strokeWidth: null } });
         this.objColl.push(this.activeObj);
-        this.notify('undo-redo', { prop: 'updateUndoRedoColl', onPropertyChange: false,
-            value: { operation: 'shapeTransform', previousObj: prevObj, previousObjColl: prevObj.objColl,
-                previousPointColl: prevObj.pointColl, previousSelPointColl: prevObj.selPointColl,
-                previousCropObj: prevCropObj, previousText: null,
-                currentText: null, previousFilter: null, isCircleCrop: null } });
+        if (this.activeObj.activePoint.width !== 0 || this.activeObj.activePoint.height !== 0) {
+            this.notify('undo-redo', { prop: 'updateUndoRedoColl', onPropertyChange: false,
+                value: { operation: 'shapeTransform', previousObj: prevObj, previousObjColl: prevObj.objColl,
+                    previousPointColl: prevObj.pointColl, previousSelPointColl: prevObj.selPointColl,
+                    previousCropObj: prevCropObj, previousText: null,
+                    currentText: null, previousFilter: null, isCircleCrop: null } });
+        }
         this.notify('selection', { prop: 'redrawShape', value: { obj: this.objColl[this.objColl.length - 1] } });
-        var shapeChangedArgs = { action: 'fill-color', previousShapeSettings: extend({}, shapeSettings, {}, true),
-            currentShapeSettings: extend({}, shapeSettings, {}, true) };
-        shapeChangedArgs.currentShapeSettings.fillColor = value;
+        var shapeChangedArgs = { action: 'fill-color', currentShapeSettings: extend({}, shapeSettings, {}, true) };
         this.triggerShapeChanged(shapeChangedArgs);
     };
     /**
@@ -2617,6 +2833,9 @@ var ImageEditor = /** @class */ (function (_super) {
         var prevCropObj;
         var prevObj;
         if (isNullOrUndefined(isPreventURC)) {
+            if (isNullOrUndefined(this.activeObj.imageRatio)) {
+                this.notify('shape', { prop: 'updImgRatioForActObj', onPropertyChange: false });
+            }
             this.notify('shape', { prop: 'pushActItemIntoObj' });
             prevCropObj = extend({}, this.cropObj, {}, true);
             var object = { currObj: {} };
@@ -2635,8 +2854,10 @@ var ImageEditor = /** @class */ (function (_super) {
             this.notify('toolbar', { prop: 'refreshSlider' });
         }
         ctx.clearRect(0, 0, this.activeObj.imageCanvas.width, this.activeObj.imageCanvas.height);
+        var activePoint = this.duplicateImage();
         this.notify('draw', { prop: 'downScaleImgCanvas', onPropertyChange: false,
             value: { ctx: this.activeObj.imageCanvas.getContext('2d'), isImgAnnotation: true, isHFlip: true, isVFlip: null } });
+        this.activeObj.activePoint = activePoint;
         this.notify('draw', { prop: 'drawObject', onPropertyChange: false, value: { canvas: 'duplicate' } });
         if (isNullOrUndefined(isPreventURC)) {
             this.objColl.push(this.activeObj);
@@ -2660,6 +2881,9 @@ var ImageEditor = /** @class */ (function (_super) {
         var prevCropObj;
         var prevObj;
         if (isNullOrUndefined(isPreventURC)) {
+            if (isNullOrUndefined(this.activeObj.imageRatio)) {
+                this.notify('shape', { prop: 'updImgRatioForActObj', onPropertyChange: false });
+            }
             this.notify('shape', { prop: 'pushActItemIntoObj' });
             prevCropObj = extend({}, this.cropObj, {}, true);
             var object = { currObj: {} };
@@ -2678,8 +2902,10 @@ var ImageEditor = /** @class */ (function (_super) {
             this.notify('toolbar', { prop: 'refreshSlider' });
         }
         ctx.clearRect(0, 0, this.activeObj.imageCanvas.width, this.activeObj.imageCanvas.height);
+        var activePoint = this.duplicateImage();
         this.notify('draw', { prop: 'downScaleImgCanvas', onPropertyChange: false,
             value: { ctx: this.activeObj.imageCanvas.getContext('2d'), isImgAnnotation: true, isHFlip: null, isVFlip: true } });
+        this.activeObj.activePoint = activePoint;
         this.notify('draw', { prop: 'drawObject', onPropertyChange: false, value: { canvas: 'duplicate' } });
         if (isNullOrUndefined(isPreventURC)) {
             this.objColl.push(this.activeObj);
@@ -2695,10 +2921,29 @@ var ImageEditor = /** @class */ (function (_super) {
      * Apply rotate image.
      *
      * @param { string } rotate - Specifies the direction of rotation.
+     * @param { boolean } isPreventURC - Specifies to update undo redo collection.
      * @hidden
      * @returns {void}.
      */
     ImageEditor.prototype.rotateImage = function (rotate) {
+        var prevCropObj;
+        var prevObj;
+        if (isNullOrUndefined(this.activeObj.imageRatio)) {
+            this.notify('shape', { prop: 'updImgRatioForActObj', onPropertyChange: false });
+        }
+        this.notify('shape', { prop: 'pushActItemIntoObj' });
+        prevCropObj = extend({}, this.cropObj, {}, true);
+        var object = { currObj: {} };
+        this.notify('filter', { prop: 'getCurrentObj', onPropertyChange: false, value: { object: object } });
+        prevObj = object['currObj'];
+        prevObj.objColl = extend([], this.objColl, [], true);
+        prevObj.pointColl = extend([], this.pointColl, [], true);
+        prevObj.afterCropActions = extend([], this.afterCropActions, [], true);
+        var selPointCollObj = { selPointColl: null };
+        this.notify('freehand-draw', { prop: 'getSelPointColl', onPropertyChange: false,
+            value: { obj: selPointCollObj } });
+        prevObj.selPointColl = extend([], selPointCollObj['selPointColl'], [], true);
+        this.objColl.pop();
         if (!isBlazor()) {
             this.notify('toolbar', { prop: 'refreshSlider' });
         }
@@ -2711,14 +2956,21 @@ var ImageEditor = /** @class */ (function (_super) {
         this.notify('selection', { prop: 'updPtCollForShpRot', onPropertyChange: false, value: { obj: this.activeObj } });
         this.upperContext.clearRect(0, 0, this.upperCanvas.width, this.upperCanvas.height);
         this.notify('draw', { prop: 'drawObject', onPropertyChange: false, value: { canvas: 'duplicate' } });
-        if (!isBlazor()) {
-            this.notify('toolbar', { prop: 'destroy-qa-toolbar' });
-            this.notify('toolbar', { prop: 'renderQAT', onPropertyChange: false, value: { isPenEdit: null } });
-        }
-        else {
+        this.objColl.push(this.activeObj);
+        this.notify('undo-redo', { prop: 'updateUndoRedoColl', onPropertyChange: false,
+            value: { operation: 'imageRotate', previousObj: prevObj, previousObjColl: prevObj.objColl,
+                previousPointColl: prevObj.pointColl, previousSelPointColl: prevObj.selPointColl,
+                previousCropObj: prevCropObj, previousText: null,
+                currentText: null, previousFilter: null, isCircleCrop: null } });
+        this.notify('selection', { prop: 'redrawShape', value: { obj: this.objColl[this.objColl.length - 1] } });
+        if (isBlazor()) {
             this.updateToolbar(this.element, 'destroyQuickAccessToolbar');
             this.updateToolbar(this.element, 'quickAccessToolbar', 'image');
         }
+        else {
+            this.notify('toolbar', { prop: 'destroy-qa-toolbar' });
+            this.notify('toolbar', { prop: 'renderQAT', onPropertyChange: false, value: { isPenEdit: null } });
+        }
     };
     /**
      * Get pascalToSplitWords from string.
@@ -2745,15 +2997,29 @@ var ImageEditor = /** @class */ (function (_super) {
      * @returns {number}.
      */
     ImageEditor.prototype.getCurrAdjustmentValue = function (type) {
-        var obj = { adjustmentLevel: null };
-        this.notify('filter', { prop: 'getAdjustmentLevel', onPropertyChange: false,
-            value: { obj: obj } });
-        var typeToAdjustmentLevel = { 'brightness': obj['adjustmentLevel'].brightness,
-            'contrast': obj['adjustmentLevel'].contrast, 'hue': obj['adjustmentLevel'].hue,
-            'saturation': obj['adjustmentLevel'].saturation, 'opacity': obj['adjustmentLevel'].opacity,
-            'blur': obj['adjustmentLevel'].blur, 'exposure': obj['adjustmentLevel'].exposure,
-            'transparency': obj['adjustmentLevel'].transparency };
-        return typeToAdjustmentLevel["" + type];
+        var value = 100;
+        var indexObj = { freehandSelectedIndex: null };
+        this.notify('freehand-draw', { prop: 'getFreehandSelectedIndex', onPropertyChange: false, value: { obj: indexObj } });
+        if (type === 'transparency' && this.togglePen) {
+            var obj = { penOpacity: 1 };
+            this.notify('freehand-draw', { prop: 'getPenOpacity', onPropertyChange: false, value: { obj: obj } });
+            value = obj['penOpacity'] * 100;
+        }
+        else if (type === 'transparency' && indexObj['freehandSelectedIndex'] !== null && indexObj['freehandSelectedIndex'] !== undefined) {
+            value = this.pointColl[indexObj['freehandSelectedIndex']].opacity * 100;
+        }
+        else {
+            var obj = { adjustmentLevel: null };
+            this.notify('filter', { prop: 'getAdjustmentLevel', onPropertyChange: false,
+                value: { obj: obj } });
+            var typeToAdjustmentLevel = { 'brightness': obj['adjustmentLevel'].brightness,
+                'contrast': obj['adjustmentLevel'].contrast, 'hue': obj['adjustmentLevel'].hue,
+                'saturation': obj['adjustmentLevel'].saturation, 'opacity': obj['adjustmentLevel'].opacity,
+                'blur': obj['adjustmentLevel'].blur, 'exposure': obj['adjustmentLevel'].exposure,
+                'transparency': obj['adjustmentLevel'].transparency, 'straighten': this.transform.straighten };
+            value = typeToAdjustmentLevel["" + type];
+        }
+        return value;
     };
     /**
      * Apply transformSelect.
@@ -2765,14 +3031,80 @@ var ImageEditor = /** @class */ (function (_super) {
     ImageEditor.prototype.transformSelect = function (type) {
         this.isCropToolbar = true;
         this.allowDownScale = false;
+        var straighten = this.transform.straighten;
+        var straightenObj = extend({}, this.activeObj, {}, true);
+        var zoomFactor = this.transform.zoomFactor;
+        this.prevEventSelectionPoint = extend({}, this.activeObj, {}, true);
+        var object = { currObj: {} };
+        this.notify('filter', { prop: 'getCurrentObj', onPropertyChange: false, value: { object: object } });
+        this.prevEventObjPoint = object['currObj'];
+        this.prevEventObjPoint.objColl = extend([], this.objColl, [], true);
+        this.prevEventObjPoint.pointColl = extend([], this.pointColl, [], true);
+        this.prevEventObjPoint.afterCropActions = extend([], this.afterCropActions, [], true);
+        var selPointCollObj = { selPointColl: null };
+        this.notify('freehand-draw', { prop: 'getSelPointColl', onPropertyChange: false,
+            value: { obj: selPointCollObj } });
+        this.prevEventObjPoint.selPointColl = extend([], selPointCollObj['selPointColl'], [], true);
+        if (this.transform.straighten !== 0) {
+            this.transform.straighten = 0;
+            this.straightenBaseImageCanvas();
+            for (var i = 0, len = this.objColl.length; i < len; i++) {
+                var shape = this.objColl[i].shape;
+                if (shape !== 'line' && shape !== 'arrow' && shape !== 'path') {
+                    this.objColl[i].rotatedAngle -= (straighten * (Math.PI / 180));
+                    this.notify('selection', { prop: 'updPtCollForShpRot', onPropertyChange: false, value: { obj: this.objColl[i] } });
+                }
+            }
+            this.notify('draw', { prop: 'render-image', value: { isMouseWheel: false } });
+            this.notify('shape', { prop: 'zoomObjColl', onPropertyChange: false, value: { isPreventApply: null } });
+            this.notify('freehand-draw', { prop: 'zoomFHDColl', onPropertyChange: false, value: { isPreventApply: null } });
+        }
         this.setInitialZoomState();
         var activeObj = extend({}, this.activeObj, {}, true);
+        this.notify('crop', { prop: 'setTransformCrop', onPropertyChange: false, value: { bool: true } });
         this.cropSelectedState();
+        this.notify('crop', { prop: 'setTransformCrop', onPropertyChange: false, value: { bool: false } });
         this.notify('draw', { prop: 'resetCurrentSelectionPoint' });
         this.updateImageTransformColl(type);
         this.notify('transform', { prop: 'performTransformation', value: { text: type } });
+        this.isCropTab = true;
         this.notify('draw', { prop: 'moveToSelectionRange', value: { type: type, activeObj: activeObj } });
+        if (this.isStraightening && (type === 'horizontalflip' || type === 'verticalflip')) {
+            this.notify('draw', { prop: 'resetStraightenDestPoints' });
+            this.notify('draw', { prop: 'setDestForStraighten' });
+        }
+        if (straighten !== 0) {
+            this.transform.straighten = straighten;
+            this.straightenBaseImageCanvas();
+            for (var i = 0, len = this.objColl.length; i < len; i++) {
+                var shape = this.objColl[i].shape;
+                if (shape !== 'line' && shape !== 'arrow' && shape !== 'path') {
+                    this.objColl[i].rotatedAngle += (straighten * (Math.PI / 180));
+                    this.notify('selection', { prop: 'updPtCollForShpRot', onPropertyChange: false, value: { obj: this.objColl[i] } });
+                }
+            }
+            this.notify('shape', { prop: 'zoomObjColl', onPropertyChange: false, value: { isPreventApply: null } });
+            this.notify('freehand-draw', { prop: 'zoomFHDColl', onPropertyChange: false, value: { isPreventApply: null } });
+            this.notify('draw', { prop: 'render-image', value: { isMouseWheel: false } });
+            this.notify('draw', { prop: 'drawObject', onPropertyChange: false, value: { canvas: 'duplicate', obj: straightenObj } });
+            this.notify('draw', { prop: 'setStraightenActObj', value: { activeObj: null } });
+            this.notify('draw', { prop: 'setStraightenInitZoom', value: { zoomFactor: zoomFactor } });
+            if ((this.isStraightening && (type === 'horizontalflip' || type === 'verticalflip')) &&
+                isNullOrUndefined(this.transform.zoomFactor) || this.transform.zoomFactor === 0) {
+                if (this.transform.degree === 0) {
+                    this.transform.zoomFactor += 0.025;
+                }
+                else if (this.transform.zoomFactor === 0) {
+                    this.transform.zoomFactor = null;
+                }
+            }
+            this.notify('draw', { prop: 'zoomToSel', value: { activeObj: straightenObj, isToolbar: false } });
+        }
         this.isCropToolbar = false;
+        var stValPan = this.element.querySelector('.e-ie-straighten-value-span');
+        if (stValPan) {
+            stValPan.innerHTML = this.transform.straighten.toString() + '&#176';
+        }
     };
     /**
      * Returns default filter.
@@ -2785,6 +3117,144 @@ var ImageEditor = /** @class */ (function (_super) {
             'saturate(' + 100 + '%) ' + 'opacity(' + 1 + ') ' + 'blur(' + 0 + 'px) ' + 'sepia(0%) ' +
             'grayscale(0%) ' + 'invert(0%)';
     };
+    /**
+     * Performs Straightening action.
+     *
+     * @hidden
+     * @returns {void}.
+     */
+    ImageEditor.prototype.setStraighten = function (value, isMethod) {
+        var straightenEventArgs = { cancel: false, previousDegree: this.transform.straighten, currentDegree: value };
+        if (isBlazor()) {
+            this.prevStraightenEvent = this.transform.straighten;
+        }
+        else {
+            this.trigger('rotating', straightenEventArgs);
+        }
+        if (!straightenEventArgs.cancel) {
+            this.performStraighten(straightenEventArgs);
+        }
+    };
+    ImageEditor.prototype.duplicateImage = function () {
+        var activePoint = extend({}, this.activeObj.activePoint, {}, true);
+        var dimObj = { width: 0, height: 0 };
+        this.notify('transform', { prop: 'calcMaxDimension', onPropertyChange: false,
+            value: { width: this.activeObj.imageElement.width, height: this.activeObj.imageElement.height, obj: dimObj, isImgShape: null } });
+        this.activeObj.activePoint.width = dimObj['width'];
+        this.activeObj.activePoint.height = dimObj['height'];
+        return activePoint;
+    };
+    ImageEditor.prototype.performStraighten = function (straightenEventArgs) {
+        var value = straightenEventArgs.currentDegree;
+        var stValPan = this.element.querySelector('.e-ie-straighten-value-span');
+        if (stValPan) {
+            stValPan.innerHTML = value.toString() + '&#176';
+        }
+        var prevValue = this.transform.straighten;
+        var obj = extend({}, this.activeObj, null, true);
+        this.notify('freehand-draw', { prop: 'setCenterSelPoints' });
+        this.transform.straighten = value;
+        this.straightenPoint = { x: this.activeObj.activePoint.startX + (this.activeObj.activePoint.width / 2),
+            y: this.activeObj.activePoint.startY + (this.activeObj.activePoint.height / 2) };
+        this.straightenBaseImageCanvas();
+        for (var i = 0, len = this.objColl.length; i < len; i++) {
+            var shape = this.objColl[i].shape;
+            if (shape !== 'line' && shape !== 'arrow' && shape !== 'path') {
+                this.objColl[i].rotatedAngle += ((this.transform.straighten - this.prevStraightenedDegree) * (Math.PI / 180));
+                this.notify('selection', { prop: 'updPtCollForShpRot', onPropertyChange: false, value: { obj: this.objColl[i] } });
+            }
+        }
+        if (this.transform.degree % 90 === 0 && this.transform.degree % 180 !== 0) {
+            if (this.transform.straighten === 0) {
+                this.transform.straighten = 360;
+            }
+            this.notify('draw', { prop: 'performPointZoom', onPropertyChange: false,
+                value: { x: this.activeObj.activePoint.startX + (this.activeObj.activePoint.width / 2),
+                    y: this.activeObj.activePoint.startY + (this.activeObj.activePoint.height / 2), type: 'zoomIn', isResize: true } });
+            this.notify('draw', { prop: 'performPointZoom', onPropertyChange: false,
+                value: { x: this.activeObj.activePoint.startX + (this.activeObj.activePoint.width / 2),
+                    y: this.activeObj.activePoint.startY + (this.activeObj.activePoint.height / 2), type: 'zoomOut', isResize: true } });
+            if (this.transform.straighten === 360) {
+                this.transform.straighten = 0;
+            }
+        }
+        else {
+            this.notify('draw', { prop: 'render-image', value: { isMouseWheel: true, isPreventClearRect: null, isFrame: null, isStraighten: true } });
+        }
+        this.notify('draw', { prop: 'drawObject', onPropertyChange: false,
+            value: { canvas: 'duplicate', obj: obj } });
+        this.notify('draw', { prop: 'zoomToSel', value: { activeObj: obj, isToolbar: true } });
+        this.notify('transform', { prop: 'disableZoomOutBtn', value: { isZoomOut: true } });
+        this.prevStraightenedDegree = this.transform.straighten;
+    };
+    /**
+     * Straightens base image.
+     *
+     * @hidden
+     * @returns {void}.
+     */
+    ImageEditor.prototype.straightenBaseImageCanvas = function () {
+        if (this.isImageLoaded) {
+            var flipState = this.getStraightenFlipState();
+            var straighten = flipState === 'horizontal' || flipState === 'vertical' ?
+                -this.transform.straighten : this.transform.straighten;
+            var ctx = this.baseImgCanvas.getContext('2d');
+            if (ctx.canvas.width !== this.lowerContext.canvas.width &&
+                ctx.canvas.height !== this.lowerContext.canvas.height) {
+                var obj_6 = { width: 0, height: 0 };
+                this.notify('crop', { prop: 'calcRatio', onPropertyChange: false,
+                    value: { obj: obj_6, dimension: { width: ctx.canvas.width, height: ctx.canvas.height } } });
+            }
+            var dimension = void 0;
+            dimension = this.getRotatedCanvasDim(this.baseImg.width, this.baseImg.height, this.transform.straighten);
+            this.img.srcWidth = ctx.canvas.width = dimension.width;
+            this.img.srcHeight = ctx.canvas.height = dimension.height;
+            var x = ctx.canvas.width / 2;
+            var y = ctx.canvas.height / 2;
+            ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
+            ctx.translate(x, y);
+            ctx.rotate(straighten * Math.PI / 180);
+            ctx.drawImage(this.baseImg, -this.baseImg.width / 2, -this.baseImg.height / 2, this.baseImg.width, this.baseImg.height);
+            ctx.setTransform(1, 0, 0, 1, 0, 0);
+            var obj = { width: 0, height: 0 };
+            this.notify('crop', { prop: 'calcRatio', onPropertyChange: false, value: { obj: obj, dimension: { width: ctx.canvas.width, height: ctx.canvas.height } } });
+        }
+    };
+    /**
+     * Returns rotated canvas dimension.
+     *
+     * @hidden
+     * @returns {void}.
+     */
+    ImageEditor.prototype.getRotatedCanvasDim = function (width, height, angle) {
+        var angleRad = angle * Math.PI / 180;
+        var cosAngle = Math.cos(angleRad);
+        var sinAngle = Math.sin(angleRad);
+        var minX = Math.min(0, width * cosAngle, height * Math.cos(Math.PI / 2 - angleRad), width * cosAngle + height * Math.cos(Math.PI / 2 - angleRad));
+        var maxX = Math.max(0, width * cosAngle, height * Math.cos(Math.PI / 2 - angleRad), width * cosAngle + height * Math.cos(Math.PI / 2 - angleRad));
+        var minY = Math.min(0, width * sinAngle, height * Math.sin(Math.PI / 2 - angleRad), width * sinAngle + height * Math.sin(Math.PI / 2 - angleRad));
+        var maxY = Math.max(0, width * sinAngle, height * Math.sin(Math.PI / 2 - angleRad), width * sinAngle + height * Math.sin(Math.PI / 2 - angleRad));
+        return { width: Math.ceil(maxX - minX), height: Math.ceil(maxY - minY) };
+    };
+    ;
+    ImageEditor.prototype.getStraightenFlipState = function () {
+        var flipState = '';
+        if (this.rotateFlipColl.length > 0) {
+            for (var i = 0, len = this.rotateFlipColl.length; i < len; i++) {
+                var curFlip = this.rotateFlipColl[i];
+                if (curFlip === 'horizontal') {
+                    flipState += 'horizontal';
+                }
+                else if (curFlip === 'vertical') {
+                    flipState += 'vertical';
+                }
+                if (flipState === 'horizontalvertical' || flipState === 'verticalhorizontal') {
+                    flipState = '';
+                }
+            }
+        }
+        return flipState;
+    };
     // Blazor codes
     /**
      * To Initialize the component rendering
@@ -2812,7 +3282,7 @@ var ImageEditor = /** @class */ (function (_super) {
         }
         var canvasWrapper = this.element.querySelector('.e-canvas-wrapper');
         if (this.element.querySelector('#' + this.element.id + '_toolbarArea')) {
-            this.toolbarHeight = this.element.querySelector('#' + this.element.id + '_toolbarArea').clientHeight;
+            this.toolbarHeight = this.element.querySelector('#' + this.element.id + '_toolbarArea').scrollHeight;
         }
         else {
             this.toolbarHeight = 0;
@@ -2823,7 +3293,7 @@ var ImageEditor = /** @class */ (function (_super) {
         this.upperCanvas = this.element.querySelector('.e-upper-canvas');
         this.lowerCanvas.id = this.element.id + '_lowerCanvas';
         this.upperCanvas.id = this.element.id + '_upperCanvas';
-        this.textArea = this.element.querySelector('.e-textbox');
+        this.textArea = this.element.querySelector('.e-textarea');
         this.inMemoryCanvas = this.createElement('canvas', {
             id: this.element.id + '_inMemoryCanvas', attrs: { name: 'canvasImage' }
         });
@@ -2917,10 +3387,35 @@ var ImageEditor = /** @class */ (function (_super) {
      */
     ImageEditor.prototype.triggerShapeChanged = function (shapeChangedArgs) {
         if (isBlazor() && this.events && this.events.shapeChanged.hasDelegate === true) {
-            /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
-            this.dotNetRef.invokeMethodAsync('ShapeEventAsync', 'ShapeChanged', shapeChangedArgs);
+            var args = { action: shapeChangedArgs.action, shapeSettings: shapeChangedArgs.currentShapeSettings };
+            this.dotNetRef.invokeMethodAsync('ShapeEventAsync', 'ShapeChanged', null, args);
+        }
+        else {
+            this.trigger('shapeChange', shapeChangedArgs);
         }
     };
+    ImageEditor.prototype.triggerActionComplete = function () {
+        var frameChangedArgs = this.curFrameObjEvent;
+        var finetuneValueChanged = this.curFinetuneObjEvent;
+        var imageFiltered = this.curFilterObjEvent;
+        if (isBlazor()) {
+            if (this.isFrameBtnClick && this.events && this.events.frameChanged.hasDelegate === true) {
+                var frameChangeArgs = { frameSettings: frameChangedArgs.currentFrameSetting };
+                this.dotNetRef.invokeMethodAsync('OnFrameChangingAsync', 'FrameChanged', null, frameChangeArgs);
+            }
+            if (this.isFinetuneBtnClick && this.events && this.events.finetuneValueChanged.hasDelegate === true) {
+                var finetuneValueChange = { finetune: this.toPascalCase(finetuneValueChanged.finetune),
+                    value: parseInt(finetuneValueChanged.value.toString()) };
+                this.dotNetRef.invokeMethodAsync('OnFinetuneValueChangeAsync', 'FinetuneValueChanged', null, finetuneValueChange);
+            }
+            if (this.isFilterCanvasClick && this.events && this.events.imageFiltered.hasDelegate === true) {
+                var imageFilter = { filter: this.toPascalCase(imageFiltered.filter) };
+                this.dotNetRef.invokeMethodAsync('OnImageFilterEventAsync', 'ImageFiltered', null, imageFilter);
+            }
+        }
+        else { }
+        this.isFilterCanvasClick = this.isFinetuneBtnClick = this.isFrameBtnClick = false;
+    };
     var ImageEditor_1;
     __decorate([
         Property('')
@@ -2970,6 +3465,9 @@ var ImageEditor = /** @class */ (function (_super) {
     __decorate([
         Complex({}, SelectionSettings)
     ], ImageEditor.prototype, "selectionSettings", void 0);
+    __decorate([
+        Complex({}, FontFamily)
+    ], ImageEditor.prototype, "fontFamily", void 0);
     __decorate([
         Event()
     ], ImageEditor.prototype, "beforeSave", void 0);
@@ -3024,6 +3522,9 @@ var ImageEditor = /** @class */ (function (_super) {
     __decorate([
         Event()
     ], ImageEditor.prototype, "click", void 0);
+    __decorate([
+        Event()
+    ], ImageEditor.prototype, "shapeChange", void 0);
     __decorate([
         Event()
     ], ImageEditor.prototype, "quickAccessToolbarOpen", void 0);