@syncfusion/ej2-image-editor 22.2.11 → 23.1.36

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

@@ -19,10 +19,11 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 import { Component, NotifyPropertyChanges, Property, addClass, removeClass, extend, isBlazor } from '@syncfusion/ej2-base';
 import { Event, EventHandler, getComponent, isNullOrUndefined, getUniqueID } from '@syncfusion/ej2-base';
-import { createSpinner } from '@syncfusion/ej2-popups';
+import { Dialog, createSpinner } from '@syncfusion/ej2-popups';
 import { Complex, Browser, ChildProperty, compile as templateCompiler, compile } from '@syncfusion/ej2-base';
 import { ToolbarModule, Crop, Draw, Filter, FreehandDrawing, Selection, Shape, Transform, UndoRedo, Export } from './../index';
 import { ZoomTrigger, ImageFinetuneOption } from './../index';
+import { Uploader } from '@syncfusion/ej2-inputs';
 /**
  * This interface is used to specify settings for finetuning operations on images, including brightness, contrast, hue, saturation, exposure, opacity, and blur. It includes properties for setting minimum and maximum values for each of these options, as well as a default value.
  */
@@ -158,7 +159,7 @@ var ImageEditor = /** @class */ (function (_super) {
             totalPannedInternalPoint: { x: 0, y: 0 }, tempFlipPanPoint: { x: 0, y: 0 }, activeObj: {}, rotateFlipColl: [],
             degree: 0, currFlipState: '', 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 };
+            zoomFactor: 0, previousZoomValue: 0, aspectWidth: null, aspectHeight: null, frame: 'none' };
         // Stored transformations performed after cropping
         /** @hidden */
         _this.afterCropActions = [];
@@ -190,6 +191,30 @@ var ImageEditor = /** @class */ (function (_super) {
         _this.isCropToolbar = false;
         /** @hidden */
         _this.cursor = 'default';
+        /** @hidden */
+        _this.resizeSrc = { startX: _this.img.srcLeft, startY: _this.img.srcTop, width: _this.img.srcWidth, height: _this.img.srcHeight };
+        /** @hidden */
+        _this.isResize = false;
+        /** @hidden */
+        _this.isAspectRatio = false;
+        /** @hidden */
+        _this.frameObj = { type: 'none', color: '#fff', size: 20, inset: 20, offset: 20, radius: 0, amount: 1, border: 'solid', gradientColor: '' };
+        /** @hidden */
+        _this.tempFrameObj = { type: 'none', color: '#fff', size: 20, inset: 20, offset: 20, radius: 0, amount: 1, border: 'solid', gradientColor: '' };
+        /** @hidden */
+        _this.allowDownScale = true;
+        /** @hidden */
+        _this.gradientColor = '';
+        /** @hidden */
+        _this.size = 20;
+        /** @hidden */
+        _this.inset = 0;
+        /** @hidden */
+        _this.offset = 0;
+        /** @hidden */
+        _this.borderRadius = 0;
+        /** @hidden */
+        _this.lineCount = 0;
         if (!isBlazor()) {
             ImageEditor_1.Inject(Crop, Draw, Selection, Transform, Export, ToolbarModule);
             ImageEditor_1.Inject(UndoRedo);
@@ -414,6 +439,7 @@ var ImageEditor = /** @class */ (function (_super) {
             this.notify('toolbar', { prop: 'create-contextual-toolbar', onPropertyChange: false });
         }
         this.createCanvas();
+        this.createDropUploader();
         if (this.showQuickAccessToolbar) {
             var canvasWrapper = document.querySelector('#' + this.element.id + '_canvasWrapper');
             canvasWrapper.appendChild(this.createElement('div', {
@@ -452,6 +478,56 @@ var ImageEditor = /** @class */ (function (_super) {
         }
         this.initializeZoomSettings();
     };
+    ImageEditor.prototype.createDropUploader = function () {
+        var _this = this;
+        var uploadObj = new Uploader({
+            dropArea: document.getElementsByClassName('e-canvas-wrapper')[0],
+            allowedExtensions: '.jpg, .jpeg, .png,.svg',
+            selected: function (args) {
+                if (args.event.type === 'change' || args.event.type === 'drop') {
+                    /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
+                    var type = args.filesData[0].type;
+                    if (type === 'png' || type === 'jpg' || type === 'jpeg' || type === 'svg') {
+                        _this.notify('draw', { prop: 'fileSelect', value: { inputElement: _this.element.querySelector('#' + _this.element.id + '_dropfileUpload'), args: args } });
+                    }
+                    else {
+                        _this.showDialogPopup();
+                    }
+                }
+            }
+        });
+        uploadObj.appendTo('#' + this.element.id + '_dropfileUpload');
+    };
+    ImageEditor.prototype.dlgCloseBtnClick = function () {
+        getComponent(document.getElementById(this.element.id + '_dialog'), 'dialog').destroy();
+    };
+    ImageEditor.prototype.showDialogPopup = function () {
+        this.element.querySelector('#' + this.element.id + '_dialog').style.display = 'block';
+        var headerObj = { key: 'AlertDialogHeader' };
+        this.notify('toolbar', { prop: 'getLocaleText', onPropertyChange: false, value: { obj: headerObj } });
+        var contentObj = { key: 'AlertDialogContent' };
+        this.notify('toolbar', { prop: 'getLocaleText', onPropertyChange: false, value: { obj: contentObj } });
+        var supportObj = { key: 'SupportText' };
+        this.notify('toolbar', { prop: 'getLocaleText', onPropertyChange: false, value: { obj: supportObj } });
+        var okObj = { key: 'OK' };
+        this.notify('toolbar', { prop: 'getLocaleText', onPropertyChange: false, value: { obj: okObj } });
+        var dialog = new Dialog({
+            header: headerObj['value'],
+            closeOnEscape: true,
+            content: '<span>' + contentObj['value'] + ' ' + supportObj['value'] + '<b> JPG, PNG, and SVG</b></span>',
+            target: document.getElementById('target'),
+            width: '285px',
+            isModal: true,
+            animationSettings: { effect: 'Zoom' },
+            close: this.dlgCloseBtnClick.bind(this),
+            buttons: [
+                { click: this.dlgCloseBtnClick.bind(this),
+                    buttonModel: { content: okObj['value'], iconCss: 'e-icons e-close' }
+                }
+            ]
+        });
+        dialog.appendTo('#' + this.element.id + '_dialog');
+    };
     /**
      *
      * This Method will add events to component (element, event, method, current reference)
@@ -508,6 +584,7 @@ var ImageEditor = /** @class */ (function (_super) {
         this.notify('selection', { prop: 'unWireEvent', onPropertyChange: false });
     };
     ImageEditor.prototype.createCanvas = function () {
+        var _this = this;
         this.element.style.boxSizing = 'border-box';
         var obj = { toolbarHeight: 0 };
         this.notify('toolbar', { prop: 'getToolbarHeight', value: { obj: obj } });
@@ -519,6 +596,31 @@ var ImageEditor = /** @class */ (function (_super) {
                     (this.element.offsetWidth - 2)
                     + 'px; position: relative; overflow: hidden; margin: 0 auto;' }
         }));
+        var dragObj = { key: 'DragText' };
+        this.notify('toolbar', { prop: 'getLocaleText', onPropertyChange: false, value: { obj: dragObj } });
+        var browseObj = { key: 'BrowseText' };
+        this.notify('toolbar', { prop: 'getLocaleText', onPropertyChange: false, value: { obj: browseObj } });
+        var supportObj = { key: 'SupportText' };
+        this.notify('toolbar', { prop: 'getLocaleText', onPropertyChange: false, value: { obj: supportObj } });
+        var dropAreaElement = this.createElement('div', { id: this.element.id + '_dropArea', className: 'e-ie-drop-area', attrs: { style: 'position: relative;' } });
+        var dropIconElement = this.createElement('span', { className: 'e-ie-drop-icon e-icons e-image', attrs: { style: 'position: absolute;' } });
+        var dropContentElement = this.createElement('span', { className: 'e-ie-drop-content', attrs: { style: 'position: absolute;' } });
+        dropContentElement.textContent = dragObj['value'] + ' ';
+        var dropAnchorElement = this.createElement('a', { id: this.element.id + '_dropBrowse', className: 'e-ie-drop-browse' });
+        dropAnchorElement.textContent = browseObj['value'];
+        dropContentElement.appendChild(dropAnchorElement);
+        dropAnchorElement.href = '';
+        var dropInfoElement = this.createElement('span', { className: 'e-ie-drop-info', attrs: { position: 'absolute' } });
+        dropInfoElement.textContent = supportObj['value'] + ' SVG, PNG, and JPG';
+        var dropUploader = dropAreaElement.appendChild(this.createElement('input', {
+            id: this.element.id + '_dropfileUpload', className: 'e-fileUpload e-image-upload'
+        }));
+        dropUploader.setAttribute('type', 'file');
+        dropUploader.setAttribute('accept', 'image/*');
+        dropAreaElement.appendChild(dropIconElement);
+        dropAreaElement.appendChild(dropContentElement);
+        dropAreaElement.appendChild(dropInfoElement);
+        canvasWrapper.appendChild(dropAreaElement);
         this.lowerCanvas = canvasWrapper.appendChild(this.createElement('canvas', {
             id: this.element.id + '_lowerCanvas', attrs: { name: 'canvasImage' }
         }));
@@ -528,6 +630,9 @@ var ImageEditor = /** @class */ (function (_super) {
         this.inMemoryCanvas = this.createElement('canvas', {
             id: this.element.id + '_inMemoryCanvas', attrs: { name: 'canvasImage' }
         });
+        this.baseImgCanvas = this.createElement('canvas', {
+            id: this.element.id + '_baseImgCanvas', attrs: { name: 'canvasImage' }
+        });
         this.textArea = canvasWrapper.appendChild(this.createElement('textarea', {
             id: this.element.id + '_textArea', className: 'e-textarea', attrs: { name: 'textArea' }
         }));
@@ -535,6 +640,12 @@ var ImageEditor = /** @class */ (function (_super) {
             id: this.element.id + '_dialog', className: 'e-dialog'
         }));
         dialog.style.display = 'none';
+        var uploader = this.element.appendChild(this.createElement('input', {
+            id: this.element.id + '_fileUpload', className: 'e-fileUpload'
+        }));
+        uploader.setAttribute('type', 'file');
+        uploader.setAttribute('accept', 'image/*');
+        uploader.style.display = 'none';
         this.textArea.setAttribute('spellcheck', 'false');
         this.textArea.style.lineHeight = 'normal';
         this.lowerCanvas.style.width = this.upperCanvas.style.width = this.inMemoryCanvas.style.width = '100%';
@@ -550,17 +661,27 @@ var ImageEditor = /** @class */ (function (_super) {
         this.upperCanvas.style.cursor = this.cursor = 'default';
         this.upperCanvas.style.display = 'block';
         this.upperContext = this.upperCanvas.getContext('2d');
+        document.getElementById(this.element.id + '_dropBrowse').onclick = function () {
+            _this.element.querySelector('#' + _this.element.id + '_dropfileUpload').click();
+            return false;
+        };
     };
     ImageEditor.prototype.touchStartHandler = function (e) {
         this.notify('selection', { prop: 'touchStartHandler', onPropertyChange: false, value: { e: e } });
     };
     ImageEditor.prototype.mouseDownEventHandler = function (e) {
+        if (e.target.className === 'e-ie-drop-browse') {
+            return;
+        }
         this.notify('selection', { prop: 'mouseDownEventHandler', onPropertyChange: false, value: { e: e } });
     };
     ImageEditor.prototype.mouseMoveEventHandler = function (e) {
         this.notify('selection', { prop: 'mouseMoveEventHandler', onPropertyChange: false, value: { e: e } });
     };
     ImageEditor.prototype.mouseUpEventHandler = function (e) {
+        if (e.target.className === 'e-ie-drop-browse') {
+            return;
+        }
         this.notify('selection', { prop: 'mouseUpEventHandler', onPropertyChange: false, value: { e: e } });
     };
     ImageEditor.prototype.keyDownEventHandler = function (e) {
@@ -573,12 +694,18 @@ var ImageEditor = /** @class */ (function (_super) {
         }
     };
     ImageEditor.prototype.canvasMouseDownHandler = function (e) {
+        if (e.target.className === 'e-ie-drop-browse') {
+            return;
+        }
         this.notify('selection', { prop: 'canvasMouseDownHandler', onPropertyChange: false, value: { e: e } });
     };
     ImageEditor.prototype.canvasMouseMoveHandler = function (e) {
         this.notify('selection', { prop: 'canvasMouseMoveHandler', onPropertyChange: false, value: { e: e } });
     };
     ImageEditor.prototype.canvasMouseUpHandler = function (e) {
+        if (e.target.className === 'e-ie-drop-browse') {
+            return;
+        }
         this.notify('selection', { prop: 'canvasMouseUpHandler', onPropertyChange: false, value: { e: e } });
     };
     ImageEditor.prototype.handleScroll = function (e) {
@@ -643,7 +770,7 @@ var ImageEditor = /** @class */ (function (_super) {
      * A horizontal direction for horizontal flipping and vertical direction for vertical flipping.
      *
      * @remarks
-     * It flips the shapes including rectangle, circle, line, text, and freehand drawings.
+     * It flips the shapes including rectangle, circle, line, text, image, and freehand drawings.
      *
      * @returns {void}.
      *
@@ -677,6 +804,7 @@ var ImageEditor = /** @class */ (function (_super) {
      * @returns {void}.
      */
     ImageEditor.prototype.open = function (data) {
+        document.getElementById(this.element.id + '_dropArea').style.display = 'none';
         this.notify('draw', { prop: 'open', value: { data: data } });
     };
     /**
@@ -703,14 +831,17 @@ var ImageEditor = /** @class */ (function (_super) {
                     this.notify('toolbar', { prop: 'create-bottom-toolbar', onPropertyChange: false });
                 }
             }
+            var isImageLoaded = this.isImageLoaded;
             this.currObjType.isUndoAction = this.isUndoRedo = this.togglePan = this.togglePen = this.isImageLoaded = false;
             this.isCircleCrop = this.isCropTab = false;
             this.objColl = [];
             this.transform.degree = 0;
             this.upperCanvas.style.display = 'block';
             this.transform.currFlipState = '';
+            this.allowDownScale = true;
             this.upperCanvas.style.cursor = this.cursor = this.lowerCanvas.style.cursor = 'default';
             this.lowerContext.lineWidth = this.upperContext.lineWidth = undefined;
+            this.frameDestPoints = null;
             this.textArea.value = this.textArea.textContent = '';
             this.textArea.style.display = 'none';
             this.lowerContext.filter = this.canvasFilter = this.getDefaultFilter();
@@ -730,16 +861,20 @@ var ImageEditor = /** @class */ (function (_super) {
             this.lowerCanvas.style.maxHeight = this.upperCanvas.style.maxHeight = '';
             this.transform.defaultZoomFactor = this.transform.zoomFactor = 0;
             this.transform.cropZoomFactor = null;
+            this.frameObj = { type: 'none', color: '#fff', size: 20, inset: 20, offset: 20, radius: 0, amount: 1, border: 'solid', gradientColor: '' };
+            this.tempFrameObj = { type: 'none', color: '#fff', size: 20, inset: 20, offset: 20, radius: 0, amount: 1, border: 'solid', gradientColor: '' };
             this.currObjType = { shape: '', isDragging: false, isActiveObj: false, isText: false, isInitialText: false, isLine: false,
                 isInitialLine: false, isCustomCrop: false, isZoomed: false, isUndoZoom: false,
                 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,
-                destPoints: { startX: 0, startY: 0, width: 0, height: 0 },
-                srcPoints: { startX: 0, startY: 0, width: 0, height: 0 }, filter: '', isBrightAdjust: false };
+                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 };
             this.afterCropActions = [];
             this.currentFilter = '';
+            this.tempFrameZoomLevel = null;
             var obj_1 = { initialZoomValue: false };
             this.notify('draw', { prop: 'getInitialZoomValue', onPropertyChange: false, value: { obj: obj_1 } });
             if (obj_1['initialZoomValue']) {
@@ -752,7 +887,7 @@ var ImageEditor = /** @class */ (function (_super) {
             this.notify('filter', { prop: 'update-finetunes' });
             this.isImageLoaded = false;
             this.notify('draw', { prop: 'update-canvas', onPropertyChange: false });
-            this.isImageLoaded = true;
+            this.isImageLoaded = isImageLoaded;
             if (!isBlazor()) {
                 if (this.element.querySelector('.e-contextual-toolbar-wrapper')) {
                     this.element.querySelector('.e-contextual-toolbar-wrapper').classList.add('e-hide');
@@ -771,7 +906,7 @@ var ImageEditor = /** @class */ (function (_super) {
      * A positive integer value for clockwise and negative integer value for anti-clockwise rotation.
      *
      * @remarks
-     * It rotated the shapes including rectangle, circle, line, text, and freehand drawings.
+     * It rotated the shapes including rectangle, circle, line, text, image, and freehand drawings.
      *
      * @returns {boolean}.
      *
@@ -884,16 +1019,17 @@ var ImageEditor = /** @class */ (function (_super) {
      * @param {number} strokeWidth - Specifies the stroke width of ellipse.
      * @param {string} strokeColor - Specifies the stroke color of ellipse.
      * @param {string} fillColor - Specifies the fill color of the ellipse.
+     * @param {number} degree - Specifies the degree to rotate the ellipse.
      * @returns {boolean}.
      *
      */
-    ImageEditor.prototype.drawEllipse = function (x, y, radiusX, radiusY, strokeWidth, strokeColor, fillColor) {
+    ImageEditor.prototype.drawEllipse = function (x, y, radiusX, radiusY, strokeWidth, strokeColor, fillColor, degree) {
         var isEllipse = false;
         var isPointsInRange = this.allowShape(x, y);
         if (!this.disabled && this.isImageLoaded && (isPointsInRange || (isNullOrUndefined(x) && isNullOrUndefined(y)))) {
             isEllipse = true;
             this.notify('shape', { prop: 'drawEllipse', onPropertyChange: false, value: { x: x, y: y, radiusX: radiusX, radiusY: radiusY,
-                    strokeWidth: strokeWidth, strokeColor: strokeColor, fillColor: fillColor } });
+                    strokeWidth: strokeWidth, strokeColor: strokeColor, fillColor: fillColor, degree: degree } });
         }
         return isEllipse;
     };
@@ -979,15 +1115,16 @@ var ImageEditor = /** @class */ (function (_super) {
      * @param {number} strokeWidth - Specifies the stroke width of rectangle.
      * @param {string} strokeColor - Specifies the stroke color of rectangle.
      * @param {string} fillColor - Specifies the fill color of the rectangle.
+     * @param {number} degree - Specifies the degree to rotate the rectangle.
      * @returns {boolean}.
      */
-    ImageEditor.prototype.drawRectangle = function (x, y, width, height, strokeWidth, strokeColor, fillColor) {
+    ImageEditor.prototype.drawRectangle = function (x, y, width, height, strokeWidth, strokeColor, fillColor, degree) {
         var isRectangle = false;
         var isPointsInRange = this.allowShape(x, y);
         if (!this.disabled && this.isImageLoaded && (isPointsInRange || (isNullOrUndefined(x) && isNullOrUndefined(y)))) {
             isRectangle = true;
             this.notify('shape', { prop: 'drawRectangle', onPropertyChange: false, value: { x: x, y: y, width: width, height: height,
-                    strokeWidth: strokeWidth, strokeColor: strokeColor, fillColor: fillColor } });
+                    strokeWidth: strokeWidth, strokeColor: strokeColor, fillColor: fillColor, degree: degree } });
         }
         return isRectangle;
     };
@@ -1017,6 +1154,33 @@ var ImageEditor = /** @class */ (function (_super) {
         }
         return isText;
     };
+    /**
+     * Draw an image as annotation on an image.
+     *
+     *
+     * @param {string | ImageData} data - Specifies url of the image or image data.
+     * @param {number} x - Specifies x-coordinate of a starting point for an image.
+     * @param {number} y - Specifies y-coordinate of a starting point for an image.
+     * @param {number} width - Specifies the width of the image.
+     * @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.
+     * @returns {boolean}.
+     *
+     */
+    ImageEditor.prototype.drawImage = function (data, x, y, width, height, isAspectRatio, degree) {
+        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 } });
+            if (this.objColl.length > length_1) {
+                isImage = true;
+            }
+        }
+        return isImage;
+    };
     /**
      * Select a shape based on the given shape id.
      * Use 'getShapeSettings' method to get the shape id which is then passed to perform selection.
@@ -1142,6 +1306,113 @@ var ImageEditor = /** @class */ (function (_super) {
     ImageEditor.prototype.getImageDimension = function () {
         return { x: this.img.destLeft, y: this.img.destTop, width: this.img.destWidth, height: this.img.destHeight };
     };
+    /**
+     * Resize an image by changing its width and height.
+     *
+     * @param {number} width - Specifies the width of an image.
+     * @param {number} height - Specifies the height of an image.
+     * @param {boolean} isAspectRatio - Specifies whether the scaling option is enabled or not.
+     *
+     * @returns {boolean} - A boolean value indicating the success of the resizing operation.
+     */
+    ImageEditor.prototype.resize = function (width, height, isAspectRatio) {
+        var isResized = false;
+        if ((width.toString()).length <= 4 && (height.toString()).length <= 4) {
+            var destPoints = { startX: this.img.destLeft, startY: this.img.destTop, width: this.img.destWidth,
+                height: this.img.destHeight };
+            if (isBlazor()) {
+                this.updateToolbar(this.element, 'resize');
+            }
+            else {
+                if (isAspectRatio) {
+                    this.notify('toolbar', { prop: 'refresh-toolbar', onPropertyChange: false, value: { type: 'resize',
+                            isApplyBtn: false, isCropping: false } });
+                    this.notify('toolbar', { prop: 'refresh-toolbar', onPropertyChange: false, value: { type: 'resize',
+                            isApplyBtn: false, isCropping: false } });
+                }
+                else {
+                    this.notify('toolbar', { prop: 'refresh-toolbar', onPropertyChange: false, value: { type: 'resize',
+                            isApplyBtn: false, isCropping: false } });
+                }
+                var aspectRatioWidth = this.element.querySelector('#' + this.element.id + '_resizeWidth');
+                var aspectRatioHeight = this.element.querySelector('#' + this.element.id + '_resizeHeight');
+                if (aspectRatioWidth && aspectRatioHeight) {
+                    getComponent(aspectRatioWidth, 'numerictextbox').value = Math.floor(width);
+                    aspectRatioWidth.value = Math.floor(width).toString() + ' px';
+                    getComponent(aspectRatioHeight, 'numerictextbox').value = Math.floor(height);
+                    aspectRatioHeight.value = Math.floor(height).toString() + ' px';
+                }
+            }
+            this.notify('transform', { prop: 'resize', value: { width: width, height: height, isAspectRatio: isAspectRatio } });
+            if (destPoints.startX !== this.img.destLeft || destPoints.startY !== this.img.destTop ||
+                destPoints.width !== this.img.destWidth || destPoints.height !== this.img.destHeight) {
+                isResized = true;
+                this.okBtn();
+            }
+            else {
+                this.notify('draw', { prop: 'performCancel', value: { isContextualToolbar: null } });
+            }
+        }
+        return isResized;
+    };
+    /**
+     * Draw a frame on an image.
+     *
+     * @param { FrameType} frameType - Specifies the frame option to be drawn on an image.
+     * @param {string} color - Specifies the color of a frame on an image. The default value is ‘#fff’.
+     * @param {string} gradientColor - Specifies the gradient color of a frame on an image. The default value is ‘’.
+     * @param {number} size - Specifies the size of the frame as a percentage. It can be provided as an integer percentage (e.g., 10). Defaults to 20 if not specified.
+     * @param {number} inset - Specifies the inset value for line, hook, and inset type frames, as a percentage. It can be provided as an integer percentage (e.g., 10). Defaults to 0 if not specified.
+     * @param {number} offset - Specifies the offset value for line and inset type frames, as a percentage. It can be provided as an integer percentage (e.g., 10). Defaults to 0 if not specified.
+     * @param {number} borderRadius - Specifies the border radius for line-type frames, as a percentage. It can be provided as an integer percentage (e.g., 10). Defaults to 0 if not specified.
+     * @param {FrameLineStyle} frameLineStyle - Specifies the type of line to be drawn for line-type frames. Default to Solid if not specified.
+     * @param {number} lineCount - Specifies the number of lines for line-type frames. Defaults to 0 if not specified.
+     *
+     * @returns {boolean}.
+     */
+    ImageEditor.prototype.drawFrame = function (frameType, color, gradientColor, size, inset, offset, borderRadius, frameLineStyle, lineCount) {
+        var isFrame = false;
+        var obj = { frameChangeEventArgs: null };
+        var prevFrameSettings = { type: this.toPascalCase(this.frameObj.type), color: this.frameObj.color,
+            gradientColor: this.frameObj.gradientColor, size: this.frameObj.size, inset: this.frameObj.inset,
+            offset: this.frameObj.offset, borderRadius: this.frameObj.radius, frameLineStyle: this.toPascalCase(this.frameObj.border),
+            lineCount: this.frameObj.amount };
+        extend(this.tempFrameObj, this.frameObj);
+        this.tempFrameZoomLevel = this.transform.zoomFactor;
+        this.frameDestPoints = extend({}, this.img, {}, true);
+        if (!isBlazor()) {
+            this.notify('toolbar', { prop: 'frameToolbarClick' });
+        }
+        else {
+            this.performFrameClick();
+        }
+        this.frameObj.type = frameType.toLowerCase();
+        this.frameObj.color = color;
+        this.frameObj.gradientColor = gradientColor;
+        this.frameObj.size = size;
+        this.frameObj.inset = inset;
+        this.frameObj.offset = offset;
+        this.frameObj.radius = borderRadius;
+        this.frameObj.border = frameLineStyle.toLowerCase();
+        this.frameObj.amount = lineCount;
+        this.notify('draw', { prop: 'triggerFrameChange', value: { prevFrameSettings: prevFrameSettings, obj: obj } });
+        if (obj['frameChangeEventArgs'] && !obj['frameChangeEventArgs'].cancel) {
+            this.notify('draw', { prop: 'render-image', value: { isMouseWheel: null } });
+            if (JSON.stringify(this.frameObj) !== JSON.stringify(this.tempFrameObj)) {
+                isFrame = true;
+                this.okBtn();
+            }
+            else {
+                this.tempFrameZoomLevel = null;
+            }
+        }
+        else {
+            this.notify('draw', { prop: 'performCancel', value: { isContextualToolbar: null } });
+            extend(this.frameObj, this.tempFrameObj);
+            this.tempFrameZoomLevel = null;
+        }
+        return isFrame;
+    };
     // Toolbar related codes
     ImageEditor.prototype.toolbarTemplateFn = function () {
         var template;
@@ -1225,6 +1496,33 @@ var ImageEditor = /** @class */ (function (_super) {
         this.notify('freehand-draw', { prop: 'getTempFreeHandDrawEditingStyles', value: { obj: obj } });
         this.notify('freehand-draw', { prop: 'color-change', value: { color: obj['tempFreeHandDrawEditingStyles'].strokeColor } });
     };
+    ImageEditor.prototype.updateImageTransformColl = function (type) {
+        var value;
+        if (type === 'rotateleft') {
+            value = -90;
+        }
+        else if (type === 'rotateright') {
+            value = 90;
+        }
+        else if (type === 'horizontalflip') {
+            value = 'horizontal';
+        }
+        else if (type === 'verticalflip') {
+            value = 'vertical';
+        }
+        for (var i = 0; i < this.objColl.length; i++) {
+            if (this.objColl[i].shape === 'image') {
+                if (isNullOrUndefined(this.objColl[i].rotateFlipColl)) {
+                    this.objColl[i].rotateFlipColl = [];
+                }
+                this.objColl[i].rotateFlipColl.push(value);
+                var obj = { collection: this.objColl[i].rotateFlipColl };
+                this.notify('shape', { prop: 'alignRotateFlipColl', onPropertyChange: false,
+                    value: { collection: this.objColl[i].rotateFlipColl, isRotateFlipCollection: false, obj: obj } });
+                this.objColl[i].rotateFlipColl = obj['collection'];
+            }
+        }
+    };
     ImageEditor.prototype.setInitialZoomState = function () {
         this.objColl.push(this.activeObj);
         this.notify('shape', { prop: 'refreshActiveObj', onPropertyChange: false });
@@ -1233,11 +1531,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 } });
+                value: { zoomFactor: -this.transform.cropZoomFactor, zoomPoint: null, isResize: null } });
         }
         else {
             this.notify('transform', { prop: 'zoomAction', onPropertyChange: false,
-                value: { zoomFactor: Math.abs(this.transform.cropZoomFactor), zoomPoint: null } });
+                value: { zoomFactor: Math.abs(this.transform.cropZoomFactor), zoomPoint: null, isResize: null } });
         }
         this.isUndoRedo = isUndoRedo;
         this.panPoint.totalPannedPoint = { x: 0, y: 0 };
@@ -1327,8 +1625,13 @@ var ImageEditor = /** @class */ (function (_super) {
      * @returns {void}.
      */
     ImageEditor.prototype.okBtn = function (isMouseDown) {
+        this.element.querySelector('.e-contextual-toolbar-wrapper').classList.remove('e-frame-wrapper');
         var isCropSelection = false;
         var splitWords;
+        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');
+        var blrNAspRatElem = this.element.querySelector('.e-ie-toolbar-nonaspect-ratio-btn');
         if (this.activeObj.shape !== undefined) {
             splitWords = this.activeObj.shape.split('-');
         }
@@ -1338,9 +1641,53 @@ var ImageEditor = /** @class */ (function (_super) {
         else if (splitWords !== undefined && splitWords[0] === 'crop') {
             isCropSelection = true;
         }
+        this.allowDownScale = true;
+        /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
+        if (aspectIcon || nonAspectIcon || (isBlazor() && this.currentToolbar === 'resize-toolbar')) {
+            var obj_2 = { width: null, height: null };
+            this.notify('selection', { prop: 'getNumTextValue', onPropertyChange: false, value: { obj: obj_2 } });
+            var point = { x: obj_2['width'], y: obj_2['height'] };
+            var obj1 = { prevCropObj: this.prevCropObj };
+            var obj2 = { prevObj: this.prevObj };
+            if (point && point.x && point.y && obj1['prevCropObj'] && obj2['prevObj']) {
+                if (nonAspectIcon || (blrNAspRatElem && !blrNAspRatElem.classList.contains('e-hidden'))) {
+                    this.notify('transform', { prop: 'resize', value: { width: point.x, height: point.y, isAspectRatio: false } });
+                }
+                else if (aspectIcon || (blrAspRatElem && !blrAspRatElem.classList.contains('e-hidden'))) {
+                    this.notify('transform', { prop: 'resize', value: { width: point.x, height: null, isAspectRatio: true } });
+                }
+                this.isResize = false;
+                this.aspectWidth = point.x;
+                this.aspectHeight = point.y;
+                this.notify('toolbar', { prop: 'refresh-toolbar', onPropertyChange: false, value: { type: 'main',
+                        isApplyBtn: false, isCropping: false, isZooming: null, cType: null } });
+                this.notify('transform', { prop: 'zoomAction', onPropertyChange: false,
+                    value: { zoomFactor: -this.transform.zoomFactor, zoomPoint: null, isResize: true } });
+                this.notify('transform', { prop: 'zoomAction', onPropertyChange: false,
+                    value: { zoomFactor: obj2['prevObj']['defaultZoom'], zoomPoint: null, isResize: true } });
+                if (obj2['prevObj'].zoomFactor) {
+                    this.setProperties({ zoomSettings: { zoomFactor: obj2['prevObj'].zoomFactor } }, true);
+                }
+                this.notify('transform', { prop: 'setPreviousZoomValue', onPropertyChange: false,
+                    value: { previousZoomValue: this.zoomSettings.zoomFactor } });
+                this.notify('undo-redo', { prop: 'updateUndoRedoColl', onPropertyChange: false, value: { operation: 'resize',
+                        previousObj: obj2['prevObj'], previousObjColl: obj2['prevObj']['objColl'],
+                        previousPointColl: obj2['prevObj']['pointColl'], previousSelPointColl: obj2['prevObj']['selPointColl'],
+                        previousCropObj: obj1['prevCropObj'], previousText: null, currentText: null, previousFilter: null,
+                        isCircleCrop: null } });
+                this.notify('undo-redo', { prop: 'updateCurrUrc', value: { type: 'ok' } });
+            }
+            else {
+                this.notify('toolbar', { prop: 'refresh-toolbar', onPropertyChange: false, value: { type: 'main',
+                        isApplyBtn: false, isCropping: false, isZooming: null, cType: null } });
+            }
+            this.isAspectRatio = false;
+        }
         var selElem = this.element.querySelector('.e-contextual-toolbar-wrapper .e-toolbar-item.e-selected');
         var obj = { bool: false };
         this.notify('selection', { prop: 'getFreehandDrawEditing', onPropertyChange: false, value: { obj: obj } });
+        var frameObject = { bool: null };
+        this.notify('toolbar', { prop: 'getFrameToolbar', onPropertyChange: false, value: { obj: frameObject } });
         if (selElem) {
             this.currentFilter = selElem.children[0].children[0].id.replace('Canvas', '');
         }
@@ -1358,15 +1705,20 @@ var ImageEditor = /** @class */ (function (_super) {
                 this.notify('undo-redo', { prop: 'updateCurrUrc', value: { type: 'ok' } });
             }
         }
-        else if ((!isBlazor() && document.querySelector('#' + this.element.id + '_sliderWrapper')) || (isBlazor() && !this.element.querySelector('.e-ie-contextual-slider').classList.contains('e-hidden')) ||
+        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_2 = { value: null };
-            this.notify('draw', { prop: 'getTempAdjustmentValue', value: { obj: obj_2 } });
-            if (obj_2['value'] !== this.lowerContext.filter) {
+            var obj_3 = { value: null };
+            this.notify('draw', { prop: 'getTempAdjustmentValue', value: { obj: obj_3 } });
+            if (obj_3['value'] !== this.lowerContext.filter) {
                 this.notify('undo-redo', { prop: 'updateCurrUrc', value: { type: 'ok' } });
             }
+            if ((this.activeObj.activePoint.width !== 0 && this.activeObj.activePoint.height !== 0) ||
+                (this.activeObj.shape === 'path' && this.activeObj.pointColl.length > 0)) {
+                this.notify('shape', { prop: 'applyActObj', onPropertyChange: false, value: { isMouseDown: isMouseDown } });
+            }
         }
         else if (obj['bool']) {
             this.notify('freehand-draw', { prop: 'applyFhd', onPropertyChange: false });
@@ -1381,12 +1733,35 @@ var ImageEditor = /** @class */ (function (_super) {
         }
         else if ((this.activeObj.activePoint.width !== 0 && this.activeObj.activePoint.height !== 0) ||
             (this.activeObj.shape === 'path' && this.activeObj.pointColl.length > 0)) {
+            if (this.activeObj.shape === 'image') {
+                this.notify('draw', { prop: 'setImageApply', onPropertyChange: false, value: { bool: true } });
+            }
             this.notify('shape', { prop: 'applyActObj', onPropertyChange: false, value: { isMouseDown: isMouseDown } });
         }
+        else {
+            if (JSON.stringify(this.frameObj) !== JSON.stringify(this.tempFrameObj)) {
+                var object = { currObj: {} };
+                this.notify('filter', { prop: 'getCurrentObj', onPropertyChange: false, value: { object: object } });
+                this.notify('undo-redo', { prop: 'updateUndoRedoColl', onPropertyChange: false, value: {
+                        operation: 'frame', previousObj: object['currObj'], previousObjColl: object['currObj']['objColl'],
+                        previousPointColl: object['currObj']['pointColl'], previousSelPointColl: object['currObj']['selPointColl'],
+                        previousCropObj: extend({}, this.cropObj, {}, true), previousText: null, currentText: null,
+                        previousFilter: null, isCircleCrop: null
+                    } });
+                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 });
+        }
         if (!isBlazor() && !obj['isCropToolbar']) {
             this.notify('toolbar', { prop: 'refresh-toolbar', onPropertyChange: false, value: { type: 'main',
                     isApplyBtn: false, isCropping: null, isZooming: null, cType: null } });
         }
+        else if (isBlazor() && !obj['isCropToolbar'] && (this.currentToolbar == 'resize-toolbar' || this.currentToolbar == 'frame-toolbar')) {
+            this.updateToolbar(this.element, 'imageLoaded');
+        }
         this.notify('draw', { prop: 'setNewPath', value: { bool: false } });
         this.isCropTab = false;
         this.transform.zoomFactor = this.transform.defaultZoomFactor;
@@ -1432,6 +1807,8 @@ var ImageEditor = /** @class */ (function (_super) {
      * An ImageData returns the current canvas image data object.
      */
     ImageEditor.prototype.getCurrentCanvasData = function () {
+        var tempFrame = extend({}, this.frameObj, {}, true);
+        this.frameObj = { type: 'none', color: '#fff', size: 20, inset: 20, offset: 20, radius: 0, amount: 1, border: 'solid', gradientColor: '' };
         var tempFilter = this.lowerContext.filter;
         this.lowerContext.filter = this.canvasFilter = 'none';
         var objColl = extend([], this.objColl, null, true);
@@ -1440,7 +1817,17 @@ 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 data = this.getImageData();
+        if (this.element.querySelector('.e-contextual-toolbar-wrapper')) {
+            this.element.querySelector('.e-contextual-toolbar-wrapper').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');
+            }
+        }
         if (!isBlazor()) {
             if (!Browser.isDevice) {
                 this.notify('toolbar', { prop: 'refresh-toolbar', onPropertyChange: false, value: { type: 'main',
@@ -1453,6 +1840,7 @@ var ImageEditor = /** @class */ (function (_super) {
         this.freehandCounter = pointColl.length;
         this.notify('shape', { prop: 'iterateObjColl', onPropertyChange: false });
         this.lowerContext.filter = this.canvasFilter = tempFilter;
+        this.frameObj = tempFrame;
         return data;
     };
     /**
@@ -1827,14 +2215,14 @@ var ImageEditor = /** @class */ (function (_super) {
         var obj = { bool: false };
         this.notify('selection', { prop: 'getFreehandDrawEditing', onPropertyChange: false, value: { obj: obj } });
         if (obj['bool']) {
-            var obj_3 = { penStrokeWidth: null };
-            this.notify('freehand-draw', { prop: 'getPenStrokeWidth', onPropertyChange: false, value: { obj: obj_3 } });
+            var obj_4 = { penStrokeWidth: null };
+            this.notify('freehand-draw', { prop: 'getPenStrokeWidth', onPropertyChange: false, value: { obj: obj_4 } });
             this.upperContext.clearRect(0, 0, this.upperCanvas.width, this.upperCanvas.height);
             this.notify('freehand-draw', { prop: 'hoverFhd', onPropertyChange: false,
-                value: { strokeColor: null, strokeWidth: obj_3['penStrokeWidth'] } });
+                value: { strokeColor: null, strokeWidth: obj_4['penStrokeWidth'] } });
             var indexObj = { freehandSelectedIndex: null };
             this.notify('freehand-draw', { prop: 'getFreehandSelectedIndex', onPropertyChange: false, value: { obj: indexObj } });
-            this.pointColl[indexObj['freehandSelectedIndex']].strokeWidth = obj_3['penStrokeWidth'];
+            this.pointColl[indexObj['freehandSelectedIndex']].strokeWidth = obj_4['penStrokeWidth'];
             this.notify('undo-redo', { prop: 'updateUndoRedoColl', onPropertyChange: false,
                 value: { operation: 'freehanddrawCustomized', previousObj: prevObj, previousObjColl: prevObj.objColl,
                     previousPointColl: prevObj.pointColl, previousSelPointColl: prevObj.selPointColl,
@@ -1894,30 +2282,40 @@ var ImageEditor = /** @class */ (function (_super) {
      * @returns {void}.
      */
     ImageEditor.prototype.updateStrokeWidth = function (id) {
-        this.notify('shape', { prop: 'pushActItemIntoObj' });
-        var prevCropObj = extend({}, this.cropObj, {}, true);
-        var object = { currObj: {} };
-        this.notify('filter', { prop: 'getCurrentObj', onPropertyChange: false, value: { object: object } });
-        var 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();
-        this.activeObj.strokeSettings.strokeWidth = parseInt(id, 10);
-        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 } });
-        this.notify('selection', { prop: 'redrawShape', value: { obj: this.objColl[this.objColl.length - 1] } });
+        if (this.activeObj.shape && (this.activeObj.shape !== 'path' || (this.activeObj.shape === 'path' &&
+            this.activeObj.pointColl.length > 0))) {
+            this.notify('shape', { prop: 'pushActItemIntoObj' });
+            var prevCropObj = extend({}, this.cropObj, {}, true);
+            var object = { currObj: {} };
+            this.notify('filter', { prop: 'getCurrentObj', onPropertyChange: false, value: { object: object } });
+            var 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();
+            this.activeObj.strokeSettings.strokeWidth = parseInt(id, 10);
+            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 } });
+            this.notify('selection', { prop: 'redrawShape', value: { obj: this.objColl[this.objColl.length - 1] } });
+        }
+        else if (this.activeObj.shape && (this.activeObj.shape === 'path' &&
+            this.activeObj.pointColl.length === 0)) {
+            this.activeObj.strokeSettings.strokeWidth = parseInt(id, 10);
+            this.activeObj.strokeSettings.strokeWidth *= 2;
+            this.notify('shape', { prop: 'setStrokeSettings', value: { strokeSettings: null, strokeColor: null, fillColor: null,
+                    strokeWidth: this.activeObj.strokeSettings.strokeWidth } });
+        }
     };
     /**
      * Apply Shape stroke color.
@@ -1927,29 +2325,37 @@ var ImageEditor = /** @class */ (function (_super) {
      * @returns {void}.
      */
     ImageEditor.prototype.updateStrokeColor = function (value) {
-        this.notify('shape', { prop: 'pushActItemIntoObj' });
-        var prevCropObj = extend({}, this.cropObj, {}, true);
-        var object = { currObj: {} };
-        this.notify('filter', { prop: 'getCurrentObj', onPropertyChange: false, value: { object: object } });
-        var 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();
-        this.activeObj.strokeSettings.strokeColor = value;
-        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 } });
-            this.notify('selection', { prop: 'redrawShape', value: { obj: this.objColl[this.objColl.length - 1] } });
+        if (this.activeObj.shape && (this.activeObj.shape !== 'path' || (this.activeObj.shape === 'path' &&
+            this.activeObj.pointColl.length > 0))) {
+            this.notify('shape', { prop: 'pushActItemIntoObj' });
+            var prevCropObj = extend({}, this.cropObj, {}, true);
+            var object = { currObj: {} };
+            this.notify('filter', { prop: 'getCurrentObj', onPropertyChange: false, value: { object: object } });
+            var 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();
+            this.activeObj.strokeSettings.strokeColor = value;
+            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 } });
+                this.notify('selection', { prop: 'redrawShape', value: { obj: this.objColl[this.objColl.length - 1] } });
+            }
+        }
+        else if (this.activeObj.shape && (this.activeObj.shape === 'path' &&
+            this.activeObj.pointColl.length === 0)) {
+            this.activeObj.strokeSettings.strokeColor = value;
+            this.notify('shape', { prop: 'setStrokeSettings', value: { strokeSettings: null, strokeColor: this.activeObj.strokeSettings.strokeColor, fillColor: null, strokeWidth: null } });
         }
     };
     /**
@@ -1985,6 +2391,121 @@ var ImageEditor = /** @class */ (function (_super) {
                 currentText: null, previousFilter: null, isCircleCrop: null } });
         this.notify('selection', { prop: 'redrawShape', value: { obj: this.objColl[this.objColl.length - 1] } });
     };
+    /**
+     * Apply horizontal flip.
+     *
+     * @param { CanvasRenderingContext2D } ctx - Specifies the canvas context 2D.
+     * @param { boolean } isPreventURC - Specifies to update undo redo collection.
+     * @hidden
+     * @returns {void}.
+     */
+    ImageEditor.prototype.horizontalFlip = function (ctx, isPreventURC) {
+        var prevCropObj;
+        var prevObj;
+        if (isNullOrUndefined(isPreventURC)) {
+            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' });
+        }
+        ctx.clearRect(0, 0, this.activeObj.imageCanvas.width, this.activeObj.imageCanvas.height);
+        this.notify('draw', { prop: 'downScaleImgCanvas', onPropertyChange: false,
+            value: { ctx: this.activeObj.imageCanvas.getContext('2d'), isImgAnnotation: true, isHFlip: true, isVFlip: null } });
+        this.notify('draw', { prop: 'drawObject', onPropertyChange: false, value: { canvas: 'duplicate' } });
+        if (isNullOrUndefined(isPreventURC)) {
+            this.objColl.push(this.activeObj);
+            this.notify('undo-redo', { prop: 'updateUndoRedoColl', onPropertyChange: false,
+                value: { operation: 'imageHFlip', 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] } });
+        }
+    };
+    /**
+     * Apply vertical flip.
+     *
+     * @param { CanvasRenderingContext2D } ctx - Specifies the canvas context 2D.
+     * @param { boolean } isPreventURC - Specifies to update undo redo collection.
+     * @hidden
+     * @returns {void}.
+     */
+    ImageEditor.prototype.verticalFlip = function (ctx, isPreventURC) {
+        var prevCropObj;
+        var prevObj;
+        if (isNullOrUndefined(isPreventURC)) {
+            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' });
+        }
+        ctx.clearRect(0, 0, this.activeObj.imageCanvas.width, this.activeObj.imageCanvas.height);
+        this.notify('draw', { prop: 'downScaleImgCanvas', onPropertyChange: false,
+            value: { ctx: this.activeObj.imageCanvas.getContext('2d'), isImgAnnotation: true, isHFlip: null, isVFlip: true } });
+        this.notify('draw', { prop: 'drawObject', onPropertyChange: false, value: { canvas: 'duplicate' } });
+        if (isNullOrUndefined(isPreventURC)) {
+            this.objColl.push(this.activeObj);
+            this.notify('undo-redo', { prop: 'updateUndoRedoColl', onPropertyChange: false,
+                value: { operation: 'imageVFlip', 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] } });
+        }
+    };
+    /**
+     * Apply rotate image.
+     *
+     * @param { string } rotate - Specifies the direction of rotation.
+     * @hidden
+     * @returns {void}.
+     */
+    ImageEditor.prototype.rotateImage = function (rotate) {
+        if (!isBlazor()) {
+            this.notify('toolbar', { prop: 'refreshSlider' });
+        }
+        if (rotate === 'rotleft') {
+            this.activeObj.rotatedAngle -= (90 * (Math.PI / 180));
+        }
+        else {
+            this.activeObj.rotatedAngle += (90 * (Math.PI / 180));
+        }
+        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.updateToolbar(this.element, 'destroyQuickAccessToolbar');
+            this.updateToolbar(this.element, 'quickAccessToolbar', 'image');
+        }
+    };
     /**
      * Get pascalToSplitWords from string.
      *
@@ -2016,7 +2537,8 @@ var ImageEditor = /** @class */ (function (_super) {
         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 };
+            'blur': obj['adjustmentLevel'].blur, 'exposure': obj['adjustmentLevel'].exposure,
+            'transparency': obj['adjustmentLevel'].transparency };
         return typeToAdjustmentLevel["" + type];
     };
     /**
@@ -2028,10 +2550,12 @@ var ImageEditor = /** @class */ (function (_super) {
      */
     ImageEditor.prototype.transformSelect = function (type) {
         this.isCropToolbar = true;
+        this.allowDownScale = false;
         this.setInitialZoomState();
         var activeObj = extend({}, this.activeObj, {}, true);
         this.cropSelectedState();
         this.notify('draw', { prop: 'resetCurrentSelectionPoint' });
+        this.updateImageTransformColl(type);
         this.notify('transform', { prop: 'performTransformation', value: { text: type } });
         this.notify('draw', { prop: 'moveToSelectionRange', value: { type: type, activeObj: activeObj } });
         this.isCropToolbar = false;
@@ -2059,6 +2583,15 @@ var ImageEditor = /** @class */ (function (_super) {
     ImageEditor.prototype.initializeImageEditor = function (element, dotnetRef) {
         /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
         this.element = element;
+        if (isBlazor() && this.element.querySelector('.place-holder')) {
+            this.element.querySelector('.place-holder').remove();
+        }
+        if (isBlazor() && this.element.querySelector('.e-ie-drop-area')) {
+            this.element.querySelector('.e-ie-drop-area').style.display = 'block';
+        }
+        if (isBlazor() && this.element.querySelector('.e-toolbar-area')) {
+            this.element.querySelector('.e-toolbar-area').style.display = 'block';
+        }
         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;
@@ -2076,6 +2609,9 @@ var ImageEditor = /** @class */ (function (_super) {
         this.inMemoryCanvas = this.createElement('canvas', {
             id: this.element.id + '_inMemoryCanvas', attrs: { name: 'canvasImage' }
         });
+        this.baseImgCanvas = this.createElement('canvas', {
+            id: this.element.id + '_baseImgCanvas', attrs: { name: 'canvasImage' }
+        });
         this.upperCanvas.width = this.lowerCanvas.width = this.inMemoryCanvas.width = this.element.offsetWidth;
         this.upperCanvas.height = this.lowerCanvas.height = this.inMemoryCanvas.height = (this.element.offsetHeight - this.toolbarHeight);
         this.lowerContext = this.lowerCanvas.getContext('2d');
@@ -2260,9 +2796,15 @@ var ImageEditor = /** @class */ (function (_super) {
     __decorate([
         Event()
     ], ImageEditor.prototype, "quickAccessToolbarOpen", void 0);
+    __decorate([
+        Event()
+    ], ImageEditor.prototype, "resizing", void 0);
     __decorate([
         Event()
     ], ImageEditor.prototype, "quickAccessToolbarItemClick", void 0);
+    __decorate([
+        Event()
+    ], ImageEditor.prototype, "frameChange", void 0);
     ImageEditor = ImageEditor_1 = __decorate([
         NotifyPropertyChanges
     ], ImageEditor);