@syncfusion/ej2-image-editor 25.2.4 → 26.1.35

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

@@ -18,7 +18,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 import { Component, NotifyPropertyChanges, Property, addClass, removeClass, extend } from '@syncfusion/ej2-base';
-import { Event, EventHandler, getComponent, isNullOrUndefined, getUniqueID } from '@syncfusion/ej2-base';
+import { Event, EventHandler, getComponent, isNullOrUndefined, getUniqueID, setValue } from '@syncfusion/ej2-base';
 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, FrameLineStyle, ShapeType } from './../index';
@@ -147,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, opacity: 1 };
+            flipObjColl: [], triangle: [], triangleRatio: [], rotatedAngle: 0, opacity: 1, order: null };
         // current object's ui interaction properties
         /** @hidden */
         _this.currObjType = { shape: '', isDragging: false, isActiveObj: false, isText: false, isInitialText: false, isLine: false, isInitialLine: false,
@@ -252,6 +252,15 @@ var ImageEditor = /** @class */ (function (_super) {
         _this.isFrameBtnClick = false;
         /** @hidden */
         _this.isChangesSaved = false;
+        /** @hidden */
+        _this.isShapeDrawing = false;
+        /** @hidden */
+        _this.noPushUndo = false;
+        /** @hidden */
+        _this.isUndoRedoStack = false;
+        /** @hidden */
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        _this.shapeColl = [];
         ImageEditor_1.Inject(Crop, Draw, Selection, Transform, Export, ToolbarModule);
         ImageEditor_1.Inject(UndoRedo);
         ImageEditor_1.Inject(Filter);
@@ -299,6 +308,14 @@ var ImageEditor = /** @class */ (function (_super) {
      * @returns {void}
      */
     ImageEditor.prototype.render = function () {
+        if (this.isAngular) {
+            var originalElement = this.element;
+            var clonedElement = originalElement.cloneNode(true);
+            originalElement.parentNode.replaceChild(clonedElement, originalElement);
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            this.element = clonedElement;
+            setValue('ej2_instances', [this], this.element);
+        }
         this.initialize();
     };
     /**
@@ -468,6 +485,10 @@ var ImageEditor = /** @class */ (function (_super) {
     ImageEditor.prototype.destroy = function () {
         var classList = [];
         this.element.removeAttribute('tabindex');
+        var saveDialog = this.element.querySelector('#' + this.element.id + '_saveDialog');
+        if (saveDialog && saveDialog.style.display === 'block') {
+            getComponent(document.getElementById(this.element.id + '_saveDialog'), 'dialog').destroy();
+        }
         if (this.cssClass) {
             classList = classList.concat(this.cssClass.replace(/\s+/g, ' ').trim().split(' '));
         }
@@ -535,6 +556,9 @@ var ImageEditor = /** @class */ (function (_super) {
             });
         }
         this.initializeZoomSettings();
+        if (this.imgSrc) {
+            this.open(this.imgSrc);
+        }
     };
     ImageEditor.prototype.createDropUploader = function () {
         var _this = this;
@@ -547,10 +571,12 @@ var ImageEditor = /** @class */ (function (_super) {
                     /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
                     var type = args.filesData[0].type;
                     var errType = 'unsupported';
+                    // eslint-disable-next-line @typescript-eslint/no-explicit-any
                     if ((args.event.type === 'change' || (args.event.type === 'drop' && args.event.dataTransfer.files.length === 1)) && (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 {
+                        // eslint-disable-next-line @typescript-eslint/no-explicit-any
                         if (args.event.type === 'drop' && args.event.dataTransfer.files.length > 1) {
                             errType = 'multi-select-image';
                         }
@@ -785,8 +811,8 @@ var ImageEditor = /** @class */ (function (_super) {
         this.notify('selection', { prop: 'keyDownEventHandler', onPropertyChange: false, value: { e: e } });
     };
     ImageEditor.prototype.keyUpEventHandler = function (e) {
-        // eslint-disable-next-line
         if ((this.textArea.style.display === 'block' || this.textArea.style.display === 'inline-block')
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
             && e.target.id === this.element.id + '_textArea') {
             this.notify('selection', { prop: 'textKeyDown', value: { e: e } });
         }
@@ -831,6 +857,7 @@ var ImageEditor = /** @class */ (function (_super) {
     };
     ImageEditor.prototype.allowShape = function (x, y) {
         this.isPublicMethod = true;
+        this.applyShapes();
         var obj = { inRange: false };
         this.notify('shape', { prop: 'isPointsInRange', onPropertyChange: false,
             value: { x: x, y: y, obj: obj } });
@@ -892,11 +919,7 @@ var ImageEditor = /** @class */ (function (_super) {
      */
     ImageEditor.prototype.getImageData = function () {
         var obj = { canvas: null };
-        var dummyObj = { bool: false };
-        this.notify('selection', { prop: 'getFreehandDrawEditing', onPropertyChange: false, value: { obj: dummyObj } });
-        if (dummyObj['bool'] || this.togglePen || this.activeObj.shape) {
-            this.okBtn();
-        }
+        this.applyShapes();
         this.notify('export', { prop: 'exportToCanvas', value: { object: obj } });
         return obj['canvas'].getContext('2d').getImageData(0, 0, obj['canvas'].width, obj['canvas'].height);
     };
@@ -940,6 +963,7 @@ var ImageEditor = /** @class */ (function (_super) {
                 this.notify('toolbar', { prop: 'create-bottom-toolbar', onPropertyChange: false });
             }
             var isImageLoaded = this.isImageLoaded;
+            // eslint-disable-next-line max-len
             this.currObjType.isUndoAction = this.isUndoRedo = this.togglePan = this.togglePen = this.isImageLoaded = this.isFinetuning = false;
             this.isCircleCrop = this.isCropTab = false;
             this.objColl = [];
@@ -991,6 +1015,9 @@ var ImageEditor = /** @class */ (function (_super) {
             this.cancelCropSelection = null;
             this.aspectWidth = this.aspectHeight = null;
             this.isResize = false;
+            this.drawingShape = null;
+            this.isShapeDrawing = this.noPushUndo = this.isUndoRedoStack = false;
+            this.shapeColl = [];
             var obj_1 = { initialZoomValue: false };
             this.notify('draw', { prop: 'getInitialZoomValue', onPropertyChange: false, value: { obj: obj_1 } });
             if (obj_1['initialZoomValue']) {
@@ -1062,6 +1089,7 @@ var ImageEditor = /** @class */ (function (_super) {
      * @returns {void}.
      */
     ImageEditor.prototype.export = function (type, fileName) {
+        this.applyShapes();
         this.notify('export', { prop: 'export', onPropertyChange: false, value: { type: type, fileName: fileName } });
     };
     /**
@@ -1082,6 +1110,7 @@ var ImageEditor = /** @class */ (function (_super) {
      *
      */
     ImageEditor.prototype.select = function (type, startX, startY, width, height) {
+        this.applyShapes();
         this.notify('toolbar', { prop: 'performCropTransformClick', value: { shape: 'crop-' + type } });
         this.notify('draw', { prop: 'select', onPropertyChange: false,
             value: { type: type, startX: startX, startY: startY, width: width, height: height } });
@@ -1123,6 +1152,7 @@ var ImageEditor = /** @class */ (function (_super) {
      */
     ImageEditor.prototype.freehandDraw = function (value) {
         if (!this.disabled && this.isImageLoaded) {
+            this.applyShapes();
             this.freeHandDraw(value);
         }
     };
@@ -1139,6 +1169,7 @@ var ImageEditor = /** @class */ (function (_super) {
      * @returns {void}.
      */
     ImageEditor.prototype.pan = function (value, x, y) {
+        this.applyShapes();
         this.notify('transform', { prop: 'pan', onPropertyChange: false, value: { value: value, x: x, y: y } });
     };
     /**
@@ -1260,6 +1291,7 @@ var ImageEditor = /** @class */ (function (_super) {
         }
         if (!this.disabled && this.isImageLoaded && (obj['inRange'] || isNullOrUndefined(pointColl))) {
             isPath = true;
+            this.applyShapes();
             this.notify('shape', { prop: 'drawPath', onPropertyChange: false, value: { pointColl: pointColl,
                     strokeWidth: strokeWidth, strokeColor: strokeColor, isSelected: isSelected } });
             this.notify('draw', { prop: 'redrawDownScale' });
@@ -1305,16 +1337,17 @@ var ImageEditor = /** @class */ (function (_super) {
      * @param {boolean} italic - Specifies whether the text is italic or not.
      * @param {string} color - Specifies font color of the text.
      * @param {boolean} isSelected - Specifies to show the text in the selected state.
+     * @param {number} degree - Specifies the degree to rotate the text.
      * @returns {boolean}.
      *
      */
-    ImageEditor.prototype.drawText = function (x, y, text, fontFamily, fontSize, bold, italic, color, isSelected) {
+    ImageEditor.prototype.drawText = function (x, y, text, fontFamily, fontSize, bold, italic, color, isSelected, degree) {
         var isText = false;
         var isPointsInRange = this.allowShape(x, y);
         if (!this.disabled && this.isImageLoaded && (isPointsInRange || (isNullOrUndefined(x) && isNullOrUndefined(y)))) {
             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, isSelected: isSelected } });
+                    fontSize: fontSize, bold: bold, italic: italic, color: color, isSelected: isSelected, degree: degree } });
             this.notify('draw', { prop: 'redrawDownScale' });
         }
         return isText;
@@ -1360,6 +1393,7 @@ var ImageEditor = /** @class */ (function (_super) {
      *
      */
     ImageEditor.prototype.selectShape = function (id) {
+        this.applyShapes();
         var obj = { isSelected: false };
         this.notify('shape', { prop: 'selectShape', onPropertyChange: false, value: { id: id, obj: obj } });
         this.notify('draw', { prop: 'redrawDownScale' });
@@ -1376,6 +1410,7 @@ var ImageEditor = /** @class */ (function (_super) {
      *
      */
     ImageEditor.prototype.deleteShape = function (id) {
+        this.applyShapes();
         this.notify('shape', { prop: 'deleteShape', onPropertyChange: false, value: { id: id } });
         this.notify('draw', { prop: 'redrawDownScale' });
     };
@@ -1389,6 +1424,7 @@ var ImageEditor = /** @class */ (function (_super) {
      *
      */
     ImageEditor.prototype.getShapeSetting = function (id) {
+        this.applyShapes();
         var obj = { shapeDetails: null };
         this.notify('shape', { prop: 'getShapeSetting', onPropertyChange: false,
             value: { id: id, obj: obj } });
@@ -1402,6 +1438,7 @@ var ImageEditor = /** @class */ (function (_super) {
      * @returns {ShapeSettings[]}.
      */
     ImageEditor.prototype.getShapeSettings = function () {
+        this.applyShapes();
         var obj = { shapeDetailsColl: [] };
         this.notify('shape', { prop: 'getShapeSettings', onPropertyChange: false, value: { obj: obj } });
         this.notify('draw', { prop: 'redrawDownScale' });
@@ -1429,6 +1466,7 @@ var ImageEditor = /** @class */ (function (_super) {
      */
     ImageEditor.prototype.finetuneImage = function (finetuneOption, value) {
         if (!this.disabled && this.isImageLoaded) {
+            this.applyShapes();
             this.notify('filter', { prop: 'finetuneImage', value: { value: value, option: finetuneOption } });
             this.notify('draw', { prop: 'redrawDownScale' });
         }
@@ -1444,6 +1482,7 @@ var ImageEditor = /** @class */ (function (_super) {
      */
     ImageEditor.prototype.applyImageFilter = function (filterOption) {
         if (!this.disabled && this.isImageLoaded) {
+            this.applyShapes();
             this.notify('filter', { prop: 'applyImageFilter', value: { option: filterOption.toString() } });
             this.notify('draw', { prop: 'redrawDownScale' });
             this.canvasFilter = this.lowerContext.filter;
@@ -1459,6 +1498,7 @@ var ImageEditor = /** @class */ (function (_super) {
      * @returns {void}.
      */
     ImageEditor.prototype.undo = function () {
+        this.applyShapes();
         this.notify('undo-redo', { prop: 'undo', onPropertyChange: false });
         this.notify('draw', { prop: 'redrawDownScale' });
     };
@@ -1470,6 +1510,7 @@ var ImageEditor = /** @class */ (function (_super) {
      * @returns {void}.
      */
     ImageEditor.prototype.redo = function () {
+        this.applyShapes();
         this.notify('undo-redo', { prop: 'redo', onPropertyChange: false });
         this.notify('draw', { prop: 'redrawDownScale' });
     };
@@ -1495,6 +1536,7 @@ var ImageEditor = /** @class */ (function (_super) {
     ImageEditor.prototype.resize = function (width, height, isAspectRatio) {
         var isResized = false;
         if ((width.toString()).length <= 4 && (height.toString()).length <= 4) {
+            this.applyShapes();
             var destPoints = { startX: this.img.destLeft, startY: this.img.destTop, width: this.img.destWidth,
                 height: this.img.destHeight };
             if (isAspectRatio) {
@@ -1544,6 +1586,7 @@ var ImageEditor = /** @class */ (function (_super) {
      * @returns {boolean}.
      */
     ImageEditor.prototype.drawFrame = function (frameType, color, gradientColor, size, inset, offset, borderRadius, frameLineStyle, lineCount) {
+        this.applyShapes();
         var isFrame = false;
         var obj = { frameChangeEventArgs: null };
         color = color ? color : '#fff';
@@ -1604,6 +1647,7 @@ var ImageEditor = /** @class */ (function (_super) {
     ImageEditor.prototype.straightenImage = function (degree) {
         var isStraightened = false;
         if (degree >= -45 && degree <= 45) {
+            this.applyShapes();
             isStraightened = true;
             this.notify('transform', { prop: 'straightenImage', value: { degree: degree } });
             this.notify('draw', { prop: 'redrawDownScale' });
@@ -1634,6 +1678,9 @@ var ImageEditor = /** @class */ (function (_super) {
             if (setting.strokeWidth) {
                 this.activeObj.strokeSettings.strokeWidth = setting.strokeWidth;
             }
+            if (setting.index) {
+                this.activeObj.order = setting.index;
+            }
             if (setting.type === 'FreehandDraw' && setting.strokeWidth) {
                 this.notify('freehand-draw', { prop: 'setPenStrokeWidth', onPropertyChange: false, value: { value: setting.strokeWidth } });
             }
@@ -1641,7 +1688,7 @@ var ImageEditor = /** @class */ (function (_super) {
         else {
             if (setting.type.toLowerCase() === 'text' && (this.textArea.style.display === 'block' ||
                 this.textArea.style.display === 'inline-block')) {
-                this.okBtn();
+                this.okBtn(null, true);
                 isTextArea = true;
             }
             this.notify('shape', { prop: 'selectShape', onPropertyChange: false, value: { id: setting.id, obj: obj } });
@@ -1673,7 +1720,7 @@ var ImageEditor = /** @class */ (function (_super) {
                 if (freehandObj['bool']) {
                     this.notify('undo-redo', { prop: 'setPreventUR', value: { bool: true } });
                 }
-                this.okBtn(isSelected);
+                this.okBtn(isSelected, true);
                 if (freehandObj['bool']) {
                     this.notify('undo-redo', { prop: 'setPreventUR', value: { bool: false } });
                 }
@@ -1703,7 +1750,7 @@ var ImageEditor = /** @class */ (function (_super) {
             this.notify('shape', { prop: 'selectShape', onPropertyChange: false, value: { id: shapeId, obj: obj } });
             if (obj['isSelected']) {
                 this.notify('toolbar', { prop: 'duplicateShape', onPropertyChange: false, value: { isPreventUndoRedo: false } });
-                this.okBtn();
+                this.okBtn(null, true);
                 this.notify('draw', { prop: 'redrawDownScale' });
             }
         }
@@ -1731,6 +1778,13 @@ var ImageEditor = /** @class */ (function (_super) {
      */
     ImageEditor.prototype.enableTextEditing = function () {
         var activeObj = extend({}, this.activeObj, {}, true);
+        if (!activeObj.order) {
+            this.noPushUndo = true;
+            this.okBtn();
+            this.noPushUndo = false;
+            this.selectShape(activeObj.currIndex);
+            activeObj.order = this.activeObj.order;
+        }
         this.notify('shape', { prop: 'refreshActiveObj', onPropertyChange: false });
         this.notify('draw', { prop: 'render-image', value: { isMouseWheel: null, isPreventClearRect: null, isFrame: false } });
         this.activeObj = activeObj;
@@ -1776,7 +1830,173 @@ var ImageEditor = /** @class */ (function (_super) {
         }
         return canRedo;
     };
+    /**
+     * Applies the operations performed in the Image Editor, such as annotation drawings.
+     *
+     * @returns{void}
+     * @remarks
+     * This method applies the actions performed after enabling annotation drawings, ensuring that the drawn annotations are applied to the image.
+     */
+    ImageEditor.prototype.apply = function () {
+        this.closeOverlayTbar();
+        this.okBtn(null, true);
+    };
+    /**
+     * Discards the operations performed in the Image Editor, such as annotation drawings.
+     *
+     * @returns{void}
+     * @remarks
+     * This method discards the actions performed after enabling annotation drawings, ensuring that the drawn annotations are not applied to the image.
+     */
+    ImageEditor.prototype.discard = function () {
+        this.notify('draw', { prop: 'performCancel', value: { isContextualToolbar: this.closeOverlayTbar(), isFinalCancel: true } });
+    };
+    /**
+     * Enable or disable a shape drawing option in an Image Editor.
+     *
+     * @param {ShapeType} shapeType - Specifies the type of shape to be enabled or disabled for drawing.
+     * @param {boolean} isEnabled - Optional. Specifies a value to indicate whether to enable or disable shape drawing. The default value is true.
+     *
+     * @remarks This function allows the user to toggle the shape drawing feature in the Image Editor. When enabled, users can draw shapes on the image. When disabled, the shape drawing functionality is not available.
+     *
+     * @returns {void}.
+     */
+    ImageEditor.prototype.enableShapeDrawing = function (shapeType, isEnabled) {
+        if (isEnabled) {
+            this.drawingShape = shapeType.toLowerCase();
+            this.notify('shape', { prop: 'refreshActiveObj', onPropertyChange: false });
+        }
+        if (shapeType && isEnabled) {
+            this.currObjType.shape = shapeType.toLowerCase();
+            this.activeObj.shape = this.currObjType.shape;
+            this.currObjType.isDragging = this.currObjType.isCustomCrop = false;
+            this.activeObj.shapeDegree = this.transform.degree;
+            this.activeObj.shapeFlip = this.transform.currFlipState;
+            this.activeObj.textFlip = this.transform.currFlipState;
+            this.activeObj.flipObjColl = [];
+            var orderObj = { order: null };
+            this.notify('shape', { prop: 'getNewOrder', onPropertyChange: false, value: { obj: orderObj } });
+            this.activeObj.order = orderObj['order'];
+            this.notify('selection', { prop: 'annotate', value: { shape: this.currObjType.shape } });
+            if (this.currObjType.shape === 'text') {
+                this.notify('toolbar', { prop: 'refresh-toolbar', onPropertyChange: false, value: { type: 'text',
+                        isApplyBtn: null, isCropping: null, isZooming: null, cType: null } });
+            }
+            else {
+                this.notify('toolbar', { prop: 'refresh-toolbar', onPropertyChange: false, value: { type: 'shapes',
+                        isApplyBtn: null, isCropping: null, isZooming: null, cType: null } });
+            }
+            this.notify('toolbar', { prop: 'update-toolbar-items', onPropertyChange: false });
+        }
+        else if (!isEnabled) {
+            this.okBtn(null, true);
+        }
+    };
+    /**
+     * Moves a shape to the front of all other shapes based on the given shape id.
+     * Use 'getShapeSettings' method to get the shape id which is then passed to perform moving.
+     *
+     * @param {string} shapeId - Specifies the shape id to move the shape on an image.
+     * @returns {void}.
+     *
+     */
+    ImageEditor.prototype.bringToFront = function (shapeId) {
+        if (this.selectShape(shapeId)) {
+            this.updateShapeOrder(shapeId, 'bringToFront');
+            this.apply();
+        }
+    };
+    /**
+     * Moves a shape to ahead of one shape based on the given shape id.
+     * Use 'getShapeSettings' method to get the shape id which is then passed to perform moving.
+     *
+     * @param {string} shapeId - Specifies the shape id to move the shape on an image.
+     * @returns {void}.
+     *
+     */
+    ImageEditor.prototype.bringForward = function (shapeId) {
+        if (this.selectShape(shapeId)) {
+            this.updateShapeOrder(shapeId, 'bringForward');
+            this.apply();
+        }
+    };
+    /**
+     * Moves a shape to behind all other shapes based on the given shape id.
+     * Use 'getShapeSettings' method to get the shape id which is then passed to perform moving.
+     *
+     * @param {string} shapeId - Specifies the shape id to move the shape on an image.
+     * @returns {void}.
+     *
+     */
+    ImageEditor.prototype.sendToBack = function (shapeId) {
+        if (this.selectShape(shapeId)) {
+            this.updateShapeOrder(shapeId, 'sendToBack');
+            this.apply();
+        }
+    };
+    /**
+     * Moves a shape to behind one shape based on the given shape id.
+     * Use 'getShapeSettings' method to get the shape id which is then passed to perform moving.
+     *
+     * @param {string} shapeId - Specifies the shape id to move the shape on an image.
+     * @returns {void}.
+     *
+     */
+    ImageEditor.prototype.sendBackward = function (shapeId) {
+        if (this.selectShape(shapeId)) {
+            this.updateShapeOrder(shapeId, 'sendBackward');
+            this.apply();
+        }
+    };
+    /**
+     * Clears the loaded image in the Image Editor.
+     *
+     * @returns{void}
+     * @remarks
+     * This method clears the loaded image and updates the component's user interface to its initial state (the initial user interface without a loaded image).
+     */
+    ImageEditor.prototype.clearImage = function () {
+        this.reset();
+        this.isImageLoaded = false;
+        this.lowerContext.clearRect(0, 0, this.lowerCanvas.width, this.lowerCanvas.height);
+        this.upperContext.clearRect(0, 0, this.upperCanvas.width, this.upperCanvas.height);
+        var btoolbar = document.getElementById(this.element.id + '_bottomToolbar');
+        if (Browser.isDevice && btoolbar) {
+            document.getElementById(this.element.id + '_bottomToolbar').style.display = 'none';
+        }
+        this.notify('toolbar', { prop: 'destroy-top-toolbar', onPropertyChange: false });
+        this.notify('toolbar', { prop: 'create-toolbar', onPropertyChange: false });
+        this.notify('toolbar', { prop: 'create-contextual-toolbar', onPropertyChange: false });
+        document.getElementById(this.element.id + '_dropArea').style.display = 'block';
+    };
     // Toolbar related codes
+    ImageEditor.prototype.applyShapes = function () {
+        if (this.isUndoRedoStack) {
+            return;
+        }
+        var shapes = ['rectangle', 'ellipse', 'line', 'arrow', 'path', 'text', 'image'];
+        var dummyObj = { bool: false };
+        this.notify('selection', { prop: 'getFreehandDrawEditing', onPropertyChange: false, value: { obj: dummyObj } });
+        if (dummyObj['bool'] || this.togglePen || (this.activeObj.shape && shapes.indexOf(this.activeObj.shape) !== -1) ||
+            this.drawingShape) {
+            this.okBtn(null, true);
+        }
+    };
+    ImageEditor.prototype.closeOverlayTbar = function () {
+        var isContextualToolbar = false;
+        var frameObject = { bool: null };
+        this.notify('toolbar', { prop: 'getFrameToolbar', onPropertyChange: false, value: { obj: frameObject } });
+        if (!frameObject['bool'] && this.element.querySelector('.e-contextual-toolbar-wrapper')) {
+            if (!this.element.querySelector('.e-contextual-toolbar-wrapper').classList.contains('e-hide')) {
+                isContextualToolbar = true;
+            }
+            var straightenObj = { bool: this.isStraightening };
+            if (!Browser.isDevice || (Browser.isDevice && !straightenObj['bool'])) {
+                this.element.querySelector('.e-contextual-toolbar-wrapper').classList.add('e-hide');
+            }
+        }
+        return isContextualToolbar;
+    };
     ImageEditor.prototype.toolbarTemplateFn = function () {
         var template;
         var templateID = this.element.id + '_toolbar';
@@ -1979,10 +2199,17 @@ var ImageEditor = /** @class */ (function (_super) {
      * Handles the OK button operation
      *
      * @param { boolean } isMouseDown - Specifies whether it is a mouse down.
+     * @param { boolean } isFinalApply - Specifies whether it is a final apply.
      * @hidden
      * @returns {void}.
      */
-    ImageEditor.prototype.okBtn = function (isMouseDown) {
+    ImageEditor.prototype.okBtn = function (isMouseDown, isFinalApply) {
+        if (isFinalApply) {
+            this.noPushUndo = false;
+            var tempActiveObj = { activePoint: { startX: 0, startY: 0, endX: 0, endY: 0, width: 0, height: 0 },
+                flipObjColl: [], triangle: [], triangleRatio: [], order: null };
+            this.notify('selection', { prop: 'setTempActObj', onPropertyChange: false, value: { obj: tempActiveObj } });
+        }
         var ctWrapper = this.element.querySelector('.e-contextual-toolbar-wrapper');
         if (ctWrapper) {
             ctWrapper.classList.remove('e-frame-wrapper');
@@ -2071,6 +2298,7 @@ var ImageEditor = /** @class */ (function (_super) {
         this.notify('selection', { prop: 'getFreehandDrawEditing', onPropertyChange: false, value: { obj: obj } });
         var frameObject = { bool: null };
         this.notify('toolbar', { prop: 'getFrameToolbar', onPropertyChange: false, value: { obj: frameObject } });
+        var sliderWrap = document.querySelector('#' + this.element.id + '_sliderWrapper');
         if (selElem) {
             this.currentFilter = selElem.children[0].children[0].id.replace('Canvas', '');
         }
@@ -2102,17 +2330,18 @@ var ImageEditor = /** @class */ (function (_super) {
             this.notify('draw', { prop: 'clearOuterCanvas', onPropertyChange: false, value: { context: this.lowerContext } });
             this.notify('draw', { prop: 'clearOuterCanvas', onPropertyChange: false, value: { context: this.upperContext } });
         }
-        else if (document.querySelector('#' + this.element.id + '_sliderWrapper') || this.currObjType.isFiltered) {
+        else if (sliderWrap || this.currObjType.isFiltered) {
             this.initialAdjustmentValue = this.canvasFilter = this.lowerContext.filter;
             this.currObjType.isFiltered = false;
             var obj_4 = { value: null };
             this.notify('draw', { prop: 'getTempAdjustmentValue', value: { obj: obj_4 } });
-            if (obj_4['value'] !== this.lowerContext.filter) {
+            if (obj_4['value'] !== this.lowerContext.filter && (!sliderWrap ||
+                !sliderWrap.classList.contains('e-ie-finetune-slider-wrap'))) {
                 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 } });
+                this.notify('shape', { prop: 'applyActObj', onPropertyChange: false, value: { isMouseDown: null } });
             }
         }
         else if (obj['bool']) {
@@ -2120,13 +2349,14 @@ var ImageEditor = /** @class */ (function (_super) {
             this.notify('selection', { prop: 'setFreehandDrawCustomized', value: { isFreehandDrawCustomized: false } });
             this.notify('toolbar', { prop: 'destroy-qa-toolbar' });
             this.notify('undo-redo', { prop: 'updateCurrUrc', value: { type: 'ok' } });
+            this.notify('freehand-draw', { prop: 'resetFreehandDrawSelectedId', onPropertyChange: false });
         }
         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 } });
+            this.notify('shape', { prop: 'applyActObj', onPropertyChange: false, value: { isMouseDown: null } });
         }
         else {
             if (JSON.stringify(this.frameObj) !== JSON.stringify(this.tempFrameObj)) {
@@ -2154,6 +2384,35 @@ var ImageEditor = /** @class */ (function (_super) {
         this.isResizeOkBtn = false;
         this.notify('draw', { prop: 'redrawDownScale' });
         this.isChangesSaved = false;
+        if (isFinalApply) {
+            this.drawingShape = null;
+            this.notify('draw', { prop: 'resetTempObjColl' });
+            this.notify('draw', { prop: 'resetTempPointColl' });
+        }
+    };
+    /**
+     * Handles the OK button operation
+     *
+     * @param { string } id - Specifies shape id to return.
+     * @hidden
+     * @returns {SelectionPoint | Object}.
+     */
+    ImageEditor.prototype.getObjFromId = function (id) {
+        var obj;
+        if (this.activeObj.currIndex && this.activeObj.currIndex === id) {
+            obj = extend({}, this.activeObj, {}, true);
+        }
+        else {
+            for (var i = 0; i < this.shapeColl.length; i++) {
+                var shapeId = this.shapeColl[i].id ? this.shapeColl[i].id :
+                    this.shapeColl[i].currIndex;
+                if (shapeId === id) {
+                    obj = extend({}, this.shapeColl[i], {}, true);
+                    break;
+                }
+            }
+        }
+        return obj;
     };
     /**
      * Set the temporary filter properties.
@@ -2221,7 +2480,8 @@ var ImageEditor = /** @class */ (function (_super) {
         this.objColl = objColl;
         this.pointColl = pointColl;
         this.freehandCounter = pointColl.length;
-        this.notify('shape', { prop: 'iterateObjColl', onPropertyChange: false });
+        this.notify('shape', { prop: 'drawAnnotations', onPropertyChange: false,
+            value: { ctx: this.lowerContext, shape: 'iterate', pen: 'iterate', isPreventApply: null } });
         this.lowerContext.filter = this.canvasFilter = tempFilter;
         this.frameObj = tempFrame;
         return data;
@@ -2286,7 +2546,7 @@ var ImageEditor = /** @class */ (function (_super) {
         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',
             'Crop2:3': '2:3', 'Crop3:4': '3:4', 'Crop4:5': '4:5', 'Crop5:7': '5:7', 'Crop9:16': '9:16' };
-        return typeToSelectionType["" + type];
+        return typeToSelectionType["" + type] ? typeToSelectionType["" + type] : type.split('Crop')[1];
     };
     /** Clears the context.
      *
@@ -2349,6 +2609,7 @@ var ImageEditor = /** @class */ (function (_super) {
                 toolbar_2.refreshOverflow();
             }
         }
+        // eslint-disable-next-line max-len
         var shapeChangedArgs = { action: type, currentShapeSettings: extend({}, shapeSettings, {}, true) };
         this.trigger('shapeChange', shapeChangedArgs);
     };
@@ -2383,7 +2644,9 @@ var ImageEditor = /** @class */ (function (_super) {
                 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' });
+            if (this.activeObj.activePoint.width !== 0 || this.activeObj.activePoint.height !== 0) {
+                this.notify('shape', { prop: 'redraw-text' });
+            }
             this.objColl.push(this.activeObj);
             if (this.activeObj.activePoint.width !== 0 || this.activeObj.activePoint.height !== 0) {
                 this.notify('undo-redo', { prop: 'updateUndoRedoColl', onPropertyChange: false,
@@ -2408,7 +2671,9 @@ var ImageEditor = /** @class */ (function (_super) {
             var fontFamily = this.activeObj.textSettings.fontFamily = this.toPascalCase(id);
             this.notify('shape', { prop: 'setTextSettings', onPropertyChange: false,
                 value: { textSettings: null, fontFamily: fontFamily, fontSize: null } });
-            this.notify('shape', { prop: 'redraw-text' });
+            if (this.activeObj.activePoint.width !== 0 || this.activeObj.activePoint.height !== 0) {
+                this.notify('shape', { prop: 'redraw-text' });
+            }
             this.objColl.push(this.activeObj);
             if (this.activeObj.activePoint.width !== 0 || this.activeObj.activePoint.height !== 0) {
                 this.notify('undo-redo', { prop: 'updateUndoRedoColl', onPropertyChange: false,
@@ -2506,11 +2771,13 @@ var ImageEditor = /** @class */ (function (_super) {
                 this.activeObj.textSettings.fontSize * 0.5;
             var height = rows.length * (this.activeObj.textSettings.fontSize +
                 this.activeObj.textSettings.fontSize * 0.25);
-            this.notify('selection', { prop: 'setTextSelection', onPropertyChange: false,
-                value: { width: width, height: height } });
-            this.notify('draw', { prop: 'updateActiveObject', onPropertyChange: false, value: { actPoint: this.activeObj.activePoint, obj: this.activeObj,
-                    isMouseMove: null, x: null, y: null } });
-            this.notify('shape', { prop: 'redraw-text' });
+            if (this.activeObj.activePoint.width !== 0 || this.activeObj.activePoint.height !== 0) {
+                this.notify('selection', { prop: 'setTextSelection', onPropertyChange: false,
+                    value: { width: width, height: height } });
+                this.notify('draw', { prop: 'updateActiveObject', onPropertyChange: false, value: { actPoint: this.activeObj.activePoint, obj: this.activeObj,
+                        isMouseMove: null, x: null, y: null } });
+                this.notify('shape', { prop: 'redraw-text' });
+            }
             this.objColl.push(this.activeObj);
             if (this.activeObj.activePoint.width !== 0 || this.activeObj.activePoint.height !== 0) {
                 this.notify('undo-redo', { prop: 'updateUndoRedoColl', onPropertyChange: false,
@@ -2562,8 +2829,8 @@ var ImageEditor = /** @class */ (function (_super) {
                             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] } });
                 }
-                this.notify('selection', { prop: 'redrawShape', value: { obj: this.objColl[this.objColl.length - 1] } });
             }
         }
         else if (this.textArea.style.display === 'block' || this.textArea.style.display === 'inline-block') {
@@ -2590,7 +2857,9 @@ var ImageEditor = /** @class */ (function (_super) {
                         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.activePoint.width !== 0 || this.activeObj.activePoint.height !== 0) {
+                this.notify('selection', { prop: 'redrawShape', value: { obj: this.objColl[this.objColl.length - 1] } });
+            }
         }
         var shapeChangedArgs = { action: 'font-color', currentShapeSettings: extend({}, shapeSettings, {}, true) };
         shapeChangedArgs.currentShapeSettings.fillColor = value;
@@ -2683,18 +2952,8 @@ var ImageEditor = /** @class */ (function (_super) {
         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 } });
         }
@@ -2960,7 +3219,6 @@ 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}.
      */
@@ -2971,9 +3229,11 @@ var ImageEditor = /** @class */ (function (_super) {
             this.notify('shape', { prop: 'updImgRatioForActObj', onPropertyChange: false });
         }
         this.notify('shape', { prop: 'pushActItemIntoObj' });
+        // eslint-disable-next-line prefer-const
         prevCropObj = extend({}, this.cropObj, {}, true);
         var object = { currObj: {} };
         this.notify('filter', { prop: 'getCurrentObj', onPropertyChange: false, value: { object: object } });
+        // eslint-disable-next-line prefer-const
         prevObj = object['currObj'];
         prevObj.objColl = extend([], this.objColl, [], true);
         prevObj.pointColl = extend([], this.pointColl, [], true);
@@ -3061,8 +3321,9 @@ var ImageEditor = /** @class */ (function (_super) {
      */
     ImageEditor.prototype.transformSelect = function (type) {
         if (this.transform.straighten === 0 && (type === 'rotateleft' || type === 'rotateright') &&
-            this.activeObj.shape && ['crop-2:3', 'crop-3:2', 'crop-3:4', 'crop-4:3', 'crop-4:5', 'crop-5:4', 'crop-5:7', 'crop-7:5',
-            'crop-9:16', 'crop-16:9'].indexOf(this.activeObj.shape) !== -1) {
+            this.activeObj.shape && (['crop-2:3', 'crop-3:2', 'crop-3:4', 'crop-4:3', 'crop-4:5', 'crop-5:4', 'crop-5:7', 'crop-7:5',
+            'crop-9:16', 'crop-16:9'].indexOf(this.activeObj.shape) !== -1 || (this.activeObj.shape.indexOf('crop-') !== -1 &&
+            this.activeObj.shape !== 'crop-custom' && this.activeObj.shape !== 'crop-square' && this.activeObj.shape !== 'crop-circle'))) {
             this.activeObj.shape = 'crop-' + this.activeObj.shape.split('-')[1].split(':')[1] + ':' + this.activeObj.shape.split('-')[1].split(':')[0];
             this.notify('toolbar', { prop: 'performCropTransformClick', value: { shape: this.activeObj.shape, isTransform: true } });
         }
@@ -3093,8 +3354,8 @@ var ImageEditor = /** @class */ (function (_super) {
                 }
             }
             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.notify('shape', { prop: 'drawAnnotations', onPropertyChange: false,
+                value: { ctx: this.lowerContext, shape: 'zoom', pen: 'zoom', isPreventApply: null } });
         }
         this.setInitialZoomState();
         var activeObj = extend({}, this.activeObj, {}, true);
@@ -3120,8 +3381,8 @@ var ImageEditor = /** @class */ (function (_super) {
                     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('shape', { prop: 'drawAnnotations', onPropertyChange: false,
+                value: { ctx: this.lowerContext, shape: 'zoom', pen: 'zoom', 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 } });
@@ -3157,10 +3418,11 @@ var ImageEditor = /** @class */ (function (_super) {
     /**
      * Performs Straightening action.
      *
+     * @param { number } value - Specifies the degree of straightening.
      * @hidden
-     * @returns {void}.
+     * @returns {void} .
      */
-    ImageEditor.prototype.setStraighten = function (value, isMethod) {
+    ImageEditor.prototype.setStraighten = function (value) {
         var straightenEventArgs = { cancel: false, previousDegree: this.transform.straighten, currentDegree: value };
         this.trigger('rotating', straightenEventArgs);
         if (!straightenEventArgs.cancel) {
@@ -3182,7 +3444,6 @@ var ImageEditor = /** @class */ (function (_super) {
         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;
@@ -3238,6 +3499,7 @@ var ImageEditor = /** @class */ (function (_super) {
                     value: { obj: obj_6, dimension: { width: ctx.canvas.width, height: ctx.canvas.height } } });
             }
             var dimension = void 0;
+            // eslint-disable-next-line prefer-const
             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;
@@ -3255,8 +3517,11 @@ var ImageEditor = /** @class */ (function (_super) {
     /**
      * Returns rotated canvas dimension.
      *
+     * @param { number } width - Specifies the width of the canvas.
+     * @param { number } height - Specifies the height of the canvas.
+     * @param { number } angle - Specifies the angle of rotation in degrees.
      * @hidden
-     * @returns {void}.
+     * @returns {void} .
      */
     ImageEditor.prototype.getRotatedCanvasDim = function (width, height, angle) {
         var angleRad = angle * Math.PI / 180;
@@ -3268,7 +3533,64 @@ var ImageEditor = /** @class */ (function (_super) {
         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) };
     };
-    ;
+    /**
+     * Apply Shape order.
+     *
+     * @param { string } id - Specifies the id of the shape to change the order.
+     * @param { string } value - Specifies the order of the shapes.
+     * @hidden
+     * @returns {void}.
+     */
+    ImageEditor.prototype.updateShapeOrder = function (id, value) {
+        var shapeObj = this.getObjFromId(id);
+        if ((shapeObj.shape && (shapeObj.shape !== 'path' ||
+            (shapeObj.shape === 'path' && shapeObj.pointColl.length > 0))) ||
+            (shapeObj && shapeObj['id'] && shapeObj['id'].indexOf('pen') > -1)) {
+            var obj = { shapeSettingsObj: {} };
+            this.notify('selection', { prop: 'updatePrevShapeSettings', onPropertyChange: false, value: { obj: obj } });
+            var shapeSettings = obj['shapeSettingsObj'];
+            if (shapeObj.shape) {
+                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);
+            if (shapeObj.shape) {
+                this.objColl.pop();
+            }
+            this.notify('shape', { prop: 'z-order', onPropertyChange: false, value: { obj: shapeObj, value: value } });
+            if (shapeObj.shape) {
+                this.notify('shape', { prop: 'setStrokeSettings', value: { strokeSettings: null, strokeColor: null, fillColor: null,
+                        strokeWidth: shapeObj.strokeSettings.strokeWidth } });
+                this.objColl.push(shapeObj);
+            }
+            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 (shapeObj.shape) {
+                this.notify('selection', { prop: 'redrawShape', value: { obj: this.objColl[this.objColl.length - 1] } });
+                this.activeObj.order = shapeObj.order;
+            }
+            var shapeChangedArgs = { action: 'stroke-width', previousShapeSettings: extend({}, shapeSettings, {}, true),
+                currentShapeSettings: extend({}, shapeSettings, {}, true) };
+            shapeChangedArgs.currentShapeSettings.strokeWidth = this.activeObj.strokeSettings.strokeWidth;
+        }
+        else if (this.activeObj.shape && (this.activeObj.shape === 'path' &&
+            this.activeObj.pointColl.length === 0)) {
+            this.notify('shape', { prop: 'setStrokeSettings', value: { strokeSettings: null, strokeColor: null, fillColor: null,
+                    strokeWidth: this.activeObj.strokeSettings.strokeWidth } });
+        }
+    };
     ImageEditor.prototype.getStraightenFlipState = function () {
         var flipState = '';
         if (this.rotateFlipColl.length > 0) {
@@ -3288,6 +3610,7 @@ var ImageEditor = /** @class */ (function (_super) {
         return flipState;
     };
     ImageEditor.prototype.initializeZoomSettings = function () {
+        this.theme = isNullOrUndefined(this.theme) ? 'Bootstrap5' : this.theme;
         /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
         if (isNullOrUndefined(this.zoomSettings.zoomTrigger) || this.zoomSettings.zoomTrigger === 0) {
             this.zoomSettings.zoomTrigger = (ZoomTrigger.MouseWheel | ZoomTrigger.Pinch | ZoomTrigger.Toolbar | ZoomTrigger.Commands);
@@ -3316,7 +3639,10 @@ var ImageEditor = /** @class */ (function (_super) {
             FabricDark: { primaryColor: '#0074cc', secondaryColor: '#fff' },
             Highcontrast: { primaryColor: '#000000', secondaryColor: '#fff' },
             Material3: { primaryColor: '#6750a4', secondaryColor: '#fff' },
-            Material3Dark: { primaryColor: '#d0bcff', secondaryColor: '#fff' }
+            Material3Dark: { primaryColor: '#d0bcff', secondaryColor: '#fff' },
+            Fluent2: { primaryColor: '#0f6cbd', secondaryColor: '#fff' },
+            Fluent2Dark: { primaryColor: '#115ea3', secondaryColor: '#fff' },
+            Fluent2Highcontrast: { primaryColor: '#1aebff', secondaryColor: '#fff' }
         };
     };
     var ImageEditor_1;