@syncfusion/ej2-image-editor 29.2.5 → 30.1.37

package/dist/es6/ej2-image-editor.es5.js

@@ -171,7 +171,7 @@ var Crop = /** @__PURE__ @class */ (function () {
                 srcTop: (actPoint.startY * ratio.height) - (img.destTop * ratio.height),
                 srcWidth: (actPoint.width * ratio.width), srcHeight: (actPoint.height * ratio.height),
                 destLeft: (parent.lowerCanvas.clientWidth - maxDimension.width) / 2,
-                destTop: (parent.lowerCanvas.clientHeight - maxDimension.height + 1) / 2,
+                destTop: (parent.lowerCanvas.clientHeight - maxDimension.height) / 2,
                 destWidth: maxDimension.width, destHeight: maxDimension.height };
             var temp = this.lowerContext.filter;
             parent.notify('draw', { prop: 'drawImage', onPropertyChange: false });
@@ -972,7 +972,7 @@ var Draw = /** @__PURE__ @class */ (function () {
         this.isShapeTextInserted = false;
         this.isRotateZoom = false; // To restore zoomed image on selection crop selection
         this.tempStrokeSettings = { strokeColor: '#fff', fillColor: '', strokeWidth: null, outlineColor: '', radius: null, outlineWidth: null }; // restore stroke settings on cancel
-        this.tempTextSettings = { text: 'Enter Text', fontFamily: '', fontSize: null, fontRatio: null, bold: false, italic: false, underline: false }; // restore text settings on cancel
+        this.tempTextSettings = { text: 'Enter Text', fontFamily: '', fontSize: null, fontRatio: null, bold: false, italic: false, underline: false, strikethrough: false }; // restore text settings on cancel
         this.tempAdjValue = ''; // for temp internal slider value
         this.tempFilter = ''; // restore filter style on cancel
         this.tempUndoRedoStep = 0;
@@ -1318,7 +1318,7 @@ var Draw = /** @__PURE__ @class */ (function () {
         this.tempAdjValue = '';
         this.tempStrokeSettings = { strokeColor: '#fff', fillColor: '', strokeWidth: null, radius: null, outlineColor: '', outlineWidth: null };
         this.tempTextSettings =
-            { text: 'Enter Text', fontFamily: this.parent.fontFamily.default, fontSize: null, fontRatio: null, bold: false, italic: false, underline: false };
+            { text: 'Enter Text', fontFamily: this.parent.fontFamily.default, fontSize: null, fontRatio: null, bold: false, italic: false, underline: false, strikethrough: false };
         this.tempUndoRedoStep = this.tempFreehandCounter = this.tempCurrFhdIndex = 0;
         this.tempZoomFactor = null;
         this.isCancelAction = false;
@@ -2915,7 +2915,7 @@ var Draw = /** @__PURE__ @class */ (function () {
         var actObj = parent.activeObj;
         var _a = actObj.activePoint, startX = _a.startX, startY = _a.startY, width = _a.width, height = _a.height;
         var rows = actObj.keyHistory.split('\n');
-        var _b = actObj.textSettings, fontFamily = _b.fontFamily, bold = _b.bold, italic = _b.italic;
+        var _b = actObj.textSettings, fontFamily = _b.fontFamily, bold = _b.bold, italic = _b.italic, underline = _b.underline, strikethrough = _b.strikethrough;
         var fontSize = actObj.textSettings.fontSize;
         var lHeight = fontSize + fontSize * 0.25;
         var lineHeight = ((lHeight * rows.length) - (fontSize * rows.length)) / rows.length;
@@ -2929,18 +2929,18 @@ var Draw = /** @__PURE__ @class */ (function () {
         canvasDraw.fillStyle = tempFill;
         for (var i = 0; i < rows.length; i++) {
             var text = rows[i];
-            var yPoint = ((i + 1) * fontSize * 0.85) + (i * lineHeight);
+            var yPoint = ((i + 1) * fontSize * 0.9) + (i * lineHeight);
             if (parent.transform.degree === -360) {
                 parent.transform.degree = 0;
             }
             if (parent.transform.degree === 0 || parent.transform.degree === 180) {
                 if (fontSize > height) {
-                    fontSize = actObj.textSettings.fontSize = height - (height * 0.1);
+                    fontSize = actObj.textSettings.fontSize = height / 1.18;
                 }
             }
             else {
                 if (fontSize > width) {
-                    fontSize = actObj.textSettings.fontSize = width - (width * 0.1);
+                    fontSize = actObj.textSettings.fontSize = width / 1.18;
                 }
             }
             canvasDraw.strokeStyle = actObj.strokeSettings.outlineColor;
@@ -2987,6 +2987,14 @@ var Draw = /** @__PURE__ @class */ (function () {
             else {
                 canvasDraw.strokeText(text, startX + fontSize * 0.1, startY + yPoint);
                 canvasDraw.fillText(text, startX + fontSize * 0.1, startY + yPoint);
+                if (underline) {
+                    var yOffset = yPoint + fontSize * 0.1;
+                    this.drawTextDecoration(canvasDraw, text, startX, startY, yOffset, fontSize, 0.1);
+                }
+                if (strikethrough) {
+                    var yOffset = yPoint - lineHeight - fontSize * 0.025;
+                    this.drawTextDecoration(canvasDraw, text, startX, startY, yOffset, fontSize, 0.1);
+                }
             }
             canvasDraw.lineWidth = tempWidth;
         }
@@ -2996,6 +3004,19 @@ var Draw = /** @__PURE__ @class */ (function () {
             this.drawOuterSelection(canvasDraw);
         }
     };
+    Draw.prototype.drawTextDecoration = function (canvasDraw, text, startX, startY, yOffset, fontSize, horizontalPadding) {
+        if (horizontalPadding === void 0) { horizontalPadding = 0.1; }
+        var tempWidth = canvasDraw.lineWidth;
+        var textWidth = canvasDraw.measureText(text).width;
+        canvasDraw.lineWidth = fontSize * 0.1;
+        canvasDraw.beginPath();
+        canvasDraw.moveTo(startX + fontSize * horizontalPadding, startY + yOffset);
+        canvasDraw.lineTo(startX + textWidth + fontSize * horizontalPadding, startY + yOffset);
+        canvasDraw.strokeStyle = canvasDraw.fillStyle;
+        canvasDraw.stroke();
+        canvasDraw.lineWidth = tempWidth;
+        canvasDraw.strokeStyle = this.parent.activeObj.strokeSettings.outlineColor;
+    };
     Draw.prototype.updateActPoint = function (degree, canvasDraw) {
         var parent = this.parent;
         var actObj = parent.activeObj;
@@ -3242,6 +3263,14 @@ var Draw = /** @__PURE__ @class */ (function () {
                 yPoint + (i > 0 ? fontSize * 0.25 : -fontSize * 0.35));
             canvasDraw.fillText(text, startX + fontSize * 0.15, startY +
                 yPoint + (i > 0 ? fontSize * 0.25 : -fontSize * 0.35));
+            if (actObj.textSettings.underline) {
+                var yOffset = yPoint + (i > 0 ? fontSize * 0.35 : -fontSize * 0.25);
+                this.drawTextDecoration(canvasDraw, text, startX, startY, yOffset, fontSize, 0.15);
+            }
+            if (actObj.textSettings.strikethrough) {
+                var yOffset = yPoint - lineHeight + (i > 0 ? -fontSize * 0.04 : -fontSize * 0.64);
+                this.drawTextDecoration(canvasDraw, text, startX, startY, yOffset, fontSize, 0.1);
+            }
         }
     };
     Draw.prototype.clearOuterCanvas = function (context) {
@@ -3291,7 +3320,7 @@ var Draw = /** @__PURE__ @class */ (function () {
             }
             parent.img.destLeft = (parent.lowerCanvas.clientWidth - maxDimension.width) / 2;
             if (degree === 0) {
-                parent.img.destTop = (parent.lowerCanvas.clientHeight - maxDimension.height + 1) / 2;
+                parent.img.destTop = (parent.lowerCanvas.clientHeight - maxDimension.height) / 2;
             }
             else {
                 parent.img.destTop = (parent.lowerCanvas.clientHeight - maxDimension.height) / 2;
@@ -3477,6 +3506,7 @@ var Draw = /** @__PURE__ @class */ (function () {
         var parent = this.parent;
         // eslint-disable-next-line @typescript-eslint/no-this-alias
         var proxy = this;
+        parent.imageLoaded = false;
         parent.baseImg.src = src;
         parent.baseImg.onload = function () {
             parent.imgSrc = src;
@@ -3521,6 +3551,10 @@ var Draw = /** @__PURE__ @class */ (function () {
                 var action = { action: 'file-open', actionEventArgs: fileOpened };
                 parent.triggerEditCompleteEvent(action);
             }
+            if (_this.fileType === 'Bmp') {
+                _this.fileType = FileType.Png;
+            }
+            parent.imageLoaded = true;
         };
         parent.baseImg.onerror = function () {
             hideSpinner(parent.element);
@@ -3535,9 +3569,20 @@ var Draw = /** @__PURE__ @class */ (function () {
     };
     Draw.prototype.updateBaseImgCanvas = function () {
         var parent = this.parent;
-        parent.baseImgCanvas.width = parent.baseImg.width;
-        parent.baseImgCanvas.height = parent.baseImg.height;
-        parent.baseImgCanvas.getContext('2d').drawImage(parent.baseImg, 0, 0);
+        if (!parent.aspectRatioBaseDimension && parent.imageSettings.width && parent.imageSettings.height) {
+            var widthRatio = parent.baseImg.width / parent.imageSettings.width;
+            var heightRatio = parent.baseImg.height / parent.imageSettings.height;
+            var ratio = (widthRatio + heightRatio) / 2;
+            ratio = ratio < 1 ? 1 : ratio;
+            parent.baseImgCanvas.width = parent.imageSettings.width * ratio;
+            parent.baseImgCanvas.height = parent.imageSettings.height * ratio;
+            parent.baseImgCanvas.getContext('2d').drawImage(parent.baseImg, 0, 0, parent.baseImgCanvas.width, parent.baseImgCanvas.height);
+        }
+        else {
+            parent.baseImgCanvas.width = parent.baseImg.width;
+            parent.baseImgCanvas.height = parent.baseImg.height;
+            parent.baseImgCanvas.getContext('2d').drawImage(parent.baseImg, 0, 0);
+        }
     };
     Draw.prototype.updateCanvas = function (isCropped, isSameDimension) {
         var parent = this.parent;
@@ -3564,7 +3609,7 @@ var Draw = /** @__PURE__ @class */ (function () {
             value: { width: parent.img.srcWidth, height: parent.img.srcHeight, obj: obj, isImgShape: null } });
         var maxDimension = obj;
         parent.img.destLeft = (parent.lowerCanvas.clientWidth - maxDimension.width) / 2;
-        parent.img.destTop = (parent.lowerCanvas.clientHeight - maxDimension.height + 1) / 2;
+        parent.img.destTop = (parent.lowerCanvas.clientHeight - maxDimension.height) / 2;
         this.drawImgToCanvas(maxDimension);
         this.origDim.width = parent.img.destWidth;
         this.origDim.height = parent.img.destHeight;
@@ -3901,7 +3946,7 @@ var Draw = /** @__PURE__ @class */ (function () {
         }
         parent.notify('toolbar', { prop: 'destroy-qa-toolbar', onPropertyChange: false });
         this.tempTextSettings = { text: 'Enter Text', fontFamily: parent.fontFamily.default, fontSize: null, fontRatio: null, bold: false,
-            italic: false, underline: false };
+            italic: false, underline: false, strikethrough: false };
         parent.objColl = extend([], this.tempObjColl, [], true);
         parent.pointColl = extend([], this.tempPointColl, [], true);
         this.renderImage();
@@ -4387,7 +4432,7 @@ var Draw = /** @__PURE__ @class */ (function () {
         var parent = this.parent;
         if (parent.transform.degree % 90 === 0 && parent.transform.degree % 180 !== 0) {
             parent.img.destLeft = (parent.lowerCanvas.clientWidth - parent.img.destHeight) / 2;
-            parent.img.destTop = (parent.lowerCanvas.clientHeight - parent.img.destWidth + 1) / 2;
+            parent.img.destTop = (parent.lowerCanvas.clientHeight - parent.img.destWidth) / 2;
             var temp = parent.img.destWidth;
             parent.img.destWidth = parent.img.destHeight;
             parent.img.destHeight = temp;
@@ -4395,7 +4440,7 @@ var Draw = /** @__PURE__ @class */ (function () {
         else {
             if (isNullOrUndefined(isPreventDimension)) {
                 parent.img.destLeft = (parent.lowerCanvas.clientWidth - parent.img.destWidth) / 2;
-                parent.img.destTop = (parent.lowerCanvas.clientHeight - parent.img.destHeight + 1) / 2;
+                parent.img.destTop = (parent.lowerCanvas.clientHeight - parent.img.destHeight) / 2;
             }
         }
     };
@@ -4854,7 +4899,7 @@ var Draw = /** @__PURE__ @class */ (function () {
                     this.fileType = 'Jpeg';
                     fileType = 'jpeg';
                 }
-                if (fileType !== 'jpeg' && fileType !== 'png' && fileType !== 'svg' && fileType !== 'webp') {
+                if (fileType !== 'jpeg' && fileType !== 'png' && fileType !== 'svg' && fileType !== 'webp' && fileType !== 'bmp') {
                     this.fileType = null;
                 }
             }
@@ -4885,24 +4930,33 @@ var Draw = /** @__PURE__ @class */ (function () {
     };
     Draw.prototype.getImageSizeFromURL = function (imageUrl, callback) {
         return __awaiter(this, void 0, void 0, function () {
-            var response, contentLength, imageSizeMB, ex_1;
-            return __generator(this, function (_a) {
-                switch (_a.label) {
+            var response, isBlob, imageSizeMB, _a, ex_1;
+            return __generator(this, function (_b) {
+                switch (_b.label) {
                     case 0:
-                        _a.trys.push([0, 2, , 3]);
-                        return [4 /*yield*/, fetch(imageUrl, { method: 'HEAD' })];
+                        _b.trys.push([0, 5, , 6]);
+                        isBlob = imageUrl.indexOf('blob:') === 0;
+                        return [4 /*yield*/, fetch(imageUrl, { method: isBlob ? 'GET' : 'HEAD' })];
                     case 1:
-                        response = _a.sent();
-                        contentLength = parseInt(response.headers.get('content-length') || '0', 10);
-                        imageSizeMB = contentLength;
-                        callback(imageSizeMB);
-                        return [3 /*break*/, 3];
+                        response = _b.sent();
+                        if (!isBlob) return [3 /*break*/, 3];
+                        return [4 /*yield*/, response.blob()];
                     case 2:
-                        ex_1 = _a.sent();
+                        _a = (_b.sent()).size;
+                        return [3 /*break*/, 4];
+                    case 3:
+                        _a = parseInt(response.headers.get('content-length') || '0', 10);
+                        _b.label = 4;
+                    case 4:
+                        imageSizeMB = _a;
+                        callback(imageSizeMB);
+                        return [3 /*break*/, 6];
+                    case 5:
+                        ex_1 = _b.sent();
                         // eslint-disable-next-line no-console
                         console.log(ex_1.message);
-                        return [3 /*break*/, 3];
-                    case 3: return [2 /*return*/];
+                        return [3 /*break*/, 6];
+                    case 6: return [2 /*return*/];
                 }
             });
         });
@@ -5101,6 +5155,8 @@ var Draw = /** @__PURE__ @class */ (function () {
                 this.errorLoading();
                 return;
             }
+            parent.imageSettings = { width: null, height: null };
+            parent.aspectRatioBaseDimension = null;
             showSpinner(parent.element);
             parent.element.style.opacity = '0.5';
             this.inputElem = inputElement;
@@ -5233,7 +5289,7 @@ var Draw = /** @__PURE__ @class */ (function () {
                 }
                 var panX = (parent.lowerCanvas.clientWidth / 2) - (currObj.activePoint.startX +
                     (currObj.activePoint.width / 2));
-                var panY = ((parent.lowerCanvas.clientHeight + 1) / 2) - (currObj.activePoint.startY +
+                var panY = ((parent.lowerCanvas.clientHeight) / 2) - (currObj.activePoint.startY +
                     (currObj.activePoint.height / 2));
                 if (isNullOrUndefined(parent.activeObj.shape)) {
                     parent.activeObj = extend({}, activeObj, {}, true);
@@ -6013,8 +6069,20 @@ var Draw = /** @__PURE__ @class */ (function () {
         var point = [];
         var parent = this.parent;
         var degree = parent.transform.degree;
-        var width = parent.baseImg.width;
-        var height = parent.baseImg.height;
+        var width;
+        var height;
+        if (!parent.aspectRatioBaseDimension && parent.imageSettings.width && parent.imageSettings.height) {
+            var widthRatio = parent.baseImg.width / parent.imageSettings.width;
+            var heightRatio = parent.baseImg.height / parent.imageSettings.height;
+            var ratio = (widthRatio + heightRatio) / 2;
+            ratio = ratio < 1 ? 1 : ratio;
+            width = parent.imageSettings.width * ratio;
+            height = parent.imageSettings.height * ratio;
+        }
+        else {
+            width = parent.baseImg.width;
+            height = parent.baseImg.height;
+        }
         var obj = { dim: null, width: height, height: width, angle: parent.transform.straighten };
         obj['dim'] = parent.getRotatedCanvasDim(obj['width'], obj['height'], obj['angle']);
         var baseImgCanvasWidth = degree % 90 === 0 && degree % 180 !== 0 ? obj['dim']['width'] : parent.baseImgCanvas.width;
@@ -6286,6 +6354,9 @@ var Draw = /** @__PURE__ @class */ (function () {
                 }
                 canvasDraw.imageSmoothingEnabled = false;
                 canvasDraw.drawImage(offscreenCanvas, 0, 0, offscreenCanvas.width, offscreenCanvas.height, startX, startY, width, height);
+                if (this.parent.imageSmoothingEnabled) {
+                    canvasDraw.imageSmoothingEnabled = true;
+                }
             }
             obj.redactImage = this.parent.createElement('canvas');
             obj.redactImage.width = offscreenCanvas.width;
@@ -6340,6 +6411,9 @@ var Export = /** @__PURE__ @class */ (function () {
             case 'drawAnnotation':
                 this.drawAnnotation(args.value['context'], args.value['ratio']);
                 break;
+            case 'downScaleImgCanvas':
+                this.downScaleImgCanvas(args.value['canvas'], args.value['width'], args.value['height']);
+                break;
         }
     };
     Export.prototype.getModuleName = function () {
@@ -8960,6 +9034,7 @@ var Selection = /** @__PURE__ @class */ (function () {
         this.isMouseUp = false;
         this.mouseWheel = 0;
         this.isTransformedShape = false;
+        this.mouseClickPoint = { x: 0, y: 0 };
         this.parent = parent;
         this.addEventListener();
     }
@@ -9130,7 +9205,8 @@ var Selection = /** @__PURE__ @class */ (function () {
                     parent.activeObj.textSettings.fontSize = 11;
                     parent.activeObj.keyHistory = 'Enter Text';
                     parent.notify('shape', { prop: 'initializeTextShape', onPropertyChange: false,
-                        value: { text: null, fontFamily: null, fontSize: null, bold: null, italic: null, strokeColor: null } });
+                        value: { text: null, fontFamily: null, fontSize: null, bold: null, italic: null,
+                            underline: null, strikethrough: null, strokeColor: null } });
                 }
                 else if (args.value['shape'] === 'path') {
                     parent.activeObj.pointColl = [];
@@ -9343,6 +9419,7 @@ var Selection = /** @__PURE__ @class */ (function () {
         this.isSliderActive = false;
         this.arrowShape = [ArrowheadType.None, ArrowheadType.SolidArrow];
         this.isMouseDown = this.isMouseUp = this.isTransformedShape = false;
+        this.mouseClickPoint = { x: 0, y: 0 };
     };
     Selection.prototype.performTabAction = function () {
         var parent = this.parent;
@@ -11377,7 +11454,7 @@ var Selection = /** @__PURE__ @class */ (function () {
                     var width_2 = this.upperContext.measureText(parent.activeObj.textSettings.text).width +
                         parent.activeObj.textSettings.fontSize * 0.5;
                     actPoint.endX = actPoint.startX + width_2;
-                    actPoint.endY = actPoint.startY + parent.activeObj.textSettings.fontSize;
+                    actPoint.endY = actPoint.startY + (parent.activeObj.textSettings.fontSize * 1.18);
                     actPoint.width = actPoint.endX - actPoint.startX;
                     actPoint.height = actPoint.endY - actPoint.startY;
                     tempActiveObj = extend({}, parent.activeObj, null, true);
@@ -12181,6 +12258,7 @@ var Selection = /** @__PURE__ @class */ (function () {
         var activePoint = parent.activeObj.activePoint;
         var x = imageEditorClickEventArgs.point.x;
         var y = imageEditorClickEventArgs.point.y;
+        this.mouseClickPoint = { x: x, y: y };
         var cursor = parent.activeObj.shape && parent.activeObj.shape === 'text' ?
             parent.cursor : 'default';
         var tempCursor = parent.upperCanvas.style.cursor;
@@ -12231,7 +12309,7 @@ var Selection = /** @__PURE__ @class */ (function () {
                     value: { isTextBox: null } });
                 var width = this.upperContext.measureText(parent.activeObj.textSettings.text).width + parent.activeObj.textSettings.fontSize * 0.5;
                 activePoint.endX = activePoint.startX + width;
-                activePoint.endY = activePoint.startY + parent.activeObj.textSettings.fontSize;
+                activePoint.endY = activePoint.startY + (parent.activeObj.textSettings.fontSize * 1.18);
                 activePoint.width = activePoint.endX - activePoint.startX;
                 activePoint.height = activePoint.endY - activePoint.startY;
             }
@@ -12660,6 +12738,12 @@ var Selection = /** @__PURE__ @class */ (function () {
             var bbox = parent.lowerCanvas.getBoundingClientRect();
             x -= bbox.left;
             y -= bbox.top;
+            if (parent.drawingShape === 'text' && this.mouseDownPoint && this.mouseDownPoint.x === x && this.mouseDownPoint.y === y) {
+                parent.notify('shape', { prop: 'refreshActiveObj', onPropertyChange: false });
+                if (!parent.activeObj.keyHistory) {
+                    parent.activeObj.keyHistory = 'Enter Text';
+                }
+            }
             var activeObjShape = void 0;
             var currentDrawingShape = this.currentDrawingShape;
             var dummyClick = false;
@@ -12837,6 +12921,12 @@ var Selection = /** @__PURE__ @class */ (function () {
                             }
                         }
                         if (!isCropSelection_1) {
+                            var isDummyClick = false;
+                            if (Math.round(x) === Math.round(this.mouseClickPoint.x) && Math.round(y) ===
+                                Math.round(this.mouseClickPoint.y)) {
+                                isDummyClick = true;
+                                parent.notify('undo-redo', { prop: 'preventApplyEditComplete', value: { bool: true } });
+                            }
                             this.adjustActObjForLineArrow();
                             if (parent.isShapeDrawing) {
                                 var temp = this.currentDrawingShape;
@@ -12846,6 +12936,9 @@ var Selection = /** @__PURE__ @class */ (function () {
                             else {
                                 parent.notify('undo-redo', { prop: 'updateUndoRedoStack', onPropertyChange: false });
                             }
+                            if (isDummyClick) {
+                                parent.notify('undo-redo', { prop: 'preventApplyEditComplete', value: { bool: false } });
+                            }
                         }
                     }
                 }
@@ -12909,6 +13002,7 @@ var Selection = /** @__PURE__ @class */ (function () {
             parent.notify('freehand-draw', { prop: 'resetSelPoints', onPropertyChange: false });
         }
         this.isMouseUp = false;
+        this.mouseClickPoint = { x: 0, y: 0 };
     };
     Selection.prototype.adjustActObjForLineArrow = function (obj) {
         var isAdjusted = false;
@@ -13190,7 +13284,8 @@ var Selection = /** @__PURE__ @class */ (function () {
                 (obj.textSettings && Math.round(obj.textSettings.fontRatio) !== Math.round(this.tempActiveObj.textSettings.fontRatio)) ||
                 (obj.textSettings && obj.textSettings.bold !== this.tempActiveObj.textSettings.bold) ||
                 (obj.textSettings && obj.textSettings.italic !== this.tempActiveObj.textSettings.italic) ||
-                (obj.textSettings && obj.textSettings.underline !== this.tempActiveObj.textSettings.underline)) {
+                (obj.textSettings && obj.textSettings.underline !== this.tempActiveObj.textSettings.underline) ||
+                (obj.textSettings && obj.textSettings.strikethrough !== this.tempActiveObj.textSettings.strikethrough)) {
                 isApply = true;
             }
             if (this.isInitialTextEdited && !isApply) {
@@ -14234,6 +14329,17 @@ var Selection = /** @__PURE__ @class */ (function () {
         else {
             parent.activeObj.textSettings.italic = false;
         }
+        parent.activeObj.textSettings.underline = parent.activeObj.textSettings.strikethrough = false;
+        if (parent.textArea.style.textDecoration === 'underline line-through') {
+            parent.activeObj.textSettings.underline = true;
+            parent.activeObj.textSettings.strikethrough = true;
+        }
+        else if (parent.textArea.style.textDecoration === 'underline') {
+            parent.activeObj.textSettings.underline = true;
+        }
+        else if (parent.textArea.style.textDecoration === 'line-through') {
+            parent.activeObj.textSettings.strikethrough = true;
+        }
         parent.activeObj.textSettings.fontSize = (parseFloat(parent.textArea.style.fontSize));
     };
     Selection.prototype.rgbToHex = function (r, g, b, a) {
@@ -14385,6 +14491,9 @@ var Selection = /** @__PURE__ @class */ (function () {
             if (parent.activeObj.textSettings.underline) {
                 fontStyle.push('underline');
             }
+            if (parent.activeObj.textSettings.strikethrough) {
+                fontStyle.push('strikethrough');
+            }
         }
         var _a = parent.activeObj.activePoint, startX = _a.startX, startY = _a.startY, endX = _a.endX, endY = _a.endY, width = _a.width, height = _a.height;
         var _b = parent.activeObj, keyHistory = _b.keyHistory, currIndex = _b.currIndex, shape = _b.shape, textSettings = _b.textSettings, strokeSettings = _b.strokeSettings, rotatedAngle = _b.rotatedAngle, imageElement = _b.imageElement, opacity = _b.opacity;
@@ -14573,7 +14682,7 @@ var Selection = /** @__PURE__ @class */ (function () {
 /* eslint-disable no-constant-condition */
 var Shape = /** @__PURE__ @class */ (function () {
     function Shape(parent) {
-        this.textSettings = { text: 'Enter Text', fontFamily: '', fontSize: null, fontRatio: null, bold: false, italic: false, underline: false };
+        this.textSettings = { text: 'Enter Text', fontFamily: '', fontSize: null, fontRatio: null, bold: false, italic: false, underline: false, strikethrough: false };
         this.strokeSettings = { strokeColor: '#fff', fillColor: '', strokeWidth: null, radius: null, outlineColor: '', outlineWidth: null };
         this.keyHistory = ''; // text history
         this.preventFrameAnnotation = false;
@@ -14616,7 +14725,7 @@ var Shape = /** @__PURE__ @class */ (function () {
                 this.drawRectangle(args.value['x'], args.value['y'], args.value['width'], args.value['height'], args.value['strokeWidth'], args.value['strokeColor'], args.value['fillColor'], args.value['degree'], args.value['isSelected'], args.value['radius']);
                 break;
             case 'drawText':
-                this.drawText(args.value['x'], args.value['y'], args.value['text'], args.value['fontFamily'], args.value['fontSize'], args.value['bold'], args.value['italic'], args.value['color'], args.value['isSelected'], args.value['degree'], args.value['fillColor'], args.value['outlineColor'], args.value['outlineWidth'], args.value['transformCollection']);
+                this.drawText(args.value['x'], args.value['y'], args.value['text'], args.value['fontFamily'], args.value['fontSize'], args.value['bold'], args.value['italic'], args.value['color'], args.value['isSelected'], args.value['degree'], args.value['fillColor'], args.value['outlineColor'], args.value['outlineWidth'], args.value['transformCollection'], args.value['underline'], args.value['strikethrough']);
                 break;
             case 'redrawActObj':
                 this.redrawActObj(args.value['x'], args.value['y'], args.value['isMouseDown']);
@@ -14780,7 +14889,7 @@ var Shape = /** @__PURE__ @class */ (function () {
                 this.alignTextAreaIntoCanvas();
                 break;
             case 'initializeTextShape':
-                this.initializeTextShape(args.value['text'], args.value['fontFamily'], args.value['fontSize'], args.value['bold'], args.value['italic'], args.value['strokeColor'], args.value['fillColor'], args.value['outlineColor'], args.value['outlineWidth']);
+                this.initializeTextShape(args.value['text'], args.value['fontFamily'], args.value['fontSize'], args.value['bold'], args.value['italic'], args.value['underline'], args.value['strikethrough'], args.value['strokeColor'], args.value['fillColor'], args.value['outlineColor'], args.value['outlineWidth']);
                 break;
             case 'stopPathDrawing':
                 this.stopPathDrawing(args.value['e'], args.value['isApply']);
@@ -14875,7 +14984,7 @@ var Shape = /** @__PURE__ @class */ (function () {
     };
     Shape.prototype.reset = function () {
         this.textSettings =
-            { text: 'Enter Text', fontFamily: this.parent.fontFamily.default, fontSize: null, fontRatio: null, bold: false, italic: false, underline: false };
+            { text: 'Enter Text', fontFamily: this.parent.fontFamily.default, fontSize: null, fontRatio: null, bold: false, italic: false, underline: false, strikethrough: false };
         this.strokeSettings = { strokeColor: '#fff', fillColor: '', strokeWidth: null, radius: null, outlineColor: '', outlineWidth: null };
         this.preventFrameAnnotation = false;
     };
@@ -14915,8 +15024,8 @@ var Shape = /** @__PURE__ @class */ (function () {
         var start = x && y ? { x: x, y: y } : null;
         this.drawShape('redact', null, null, null, start, width, height, null, null, null, null, null, null, null, type, value);
     };
-    Shape.prototype.drawText = function (x, y, text, fontFamily, fontSize, bold, italic, color, isSelected, degree, fillColor, outlineColor, outlineWidth, transformCollection) {
-        this.drawShapeText(text, fontFamily, fontSize, bold, italic, color, x, y, isSelected, degree, fillColor, outlineColor, outlineWidth, transformCollection);
+    Shape.prototype.drawText = function (x, y, text, fontFamily, fontSize, bold, italic, color, isSelected, degree, fillColor, outlineColor, outlineWidth, transformCollection, underline, strikethrough) {
+        this.drawShapeText(text, fontFamily, fontSize, bold, italic, color, x, y, isSelected, degree, fillColor, outlineColor, outlineWidth, transformCollection, underline, strikethrough);
     };
     Shape.prototype.initializeShape = function (type) {
         var parent = this.parent;
@@ -15102,7 +15211,7 @@ var Shape = /** @__PURE__ @class */ (function () {
             value: { obj: selPointCollObj } });
         this.prevObj.selPointColl = extend([], selPointCollObj['selPointColl'], [], true);
     };
-    Shape.prototype.drawShapeText = function (text, fontFamily, fontSize, bold, italic, strokeColor, x, y, isSelected, degree, fillColor, outlineColor, outlineWidth, transformCollection) {
+    Shape.prototype.drawShapeText = function (text, fontFamily, fontSize, bold, italic, strokeColor, x, y, isSelected, degree, fillColor, outlineColor, outlineWidth, transformCollection, underline, strikethrough) {
         var parent = this.parent;
         if (!parent.disabled && parent.isImageLoaded) {
             if (parent.currObjType.shape === 'freehanddraw') {
@@ -15117,7 +15226,7 @@ var Shape = /** @__PURE__ @class */ (function () {
             this.refreshActiveObj();
             parent.activeObj.shape = parent.currObjType.shape = 'text';
             parent.currObjType.isCustomCrop = false;
-            this.initializeTextShape(text, fontFamily, fontSize, bold, italic, strokeColor, fillColor, outlineColor, outlineWidth);
+            this.initializeTextShape(text, fontFamily, fontSize, bold, italic, underline, strikethrough, strokeColor, fillColor, outlineColor, outlineWidth);
             parent.currObjType.isText = parent.currObjType.isInitialText = true;
             if (isNullOrUndefined(parent.activeObj.textSettings.fontSize)) {
                 parent.getFontSizes();
@@ -15268,7 +15377,7 @@ var Shape = /** @__PURE__ @class */ (function () {
                 isApplyBtn: null, isCropping: null, isZooming: null, cType: null } });
         parent.notify('toolbar', { prop: 'update-toolbar-items', onPropertyChange: false });
     };
-    Shape.prototype.initializeTextShape = function (text, fontFamily, fontSize, bold, italic, strokeColor, fillColor, outlineColor, outlineWidth) {
+    Shape.prototype.initializeTextShape = function (text, fontFamily, fontSize, bold, italic, underline, strikethrough, strokeColor, fillColor, outlineColor, outlineWidth) {
         var parent = this.parent;
         this.keyHistory = '';
         parent.upperCanvas.style.display = 'block';
@@ -15279,6 +15388,8 @@ var Shape = /** @__PURE__ @class */ (function () {
         parent.activeObj.textSettings.fontSize = fontSize || parent.activeObj.textSettings.fontSize;
         parent.activeObj.textSettings.bold = bold || parent.activeObj.textSettings.bold;
         parent.activeObj.textSettings.italic = italic || parent.activeObj.textSettings.italic;
+        parent.activeObj.textSettings.underline = underline || parent.activeObj.textSettings.underline;
+        parent.activeObj.textSettings.strikethrough = strikethrough || parent.activeObj.textSettings.strikethrough;
         parent.activeObj.strokeSettings.outlineColor = outlineColor || parent.activeObj.strokeSettings.outlineColor;
         parent.activeObj.strokeSettings.outlineWidth = outlineWidth || parent.activeObj.strokeSettings.outlineWidth;
     };
@@ -15483,6 +15594,7 @@ var Shape = /** @__PURE__ @class */ (function () {
                 parent.activeObj.textSettings.bold = false;
                 parent.activeObj.textSettings.italic = false;
                 parent.activeObj.textSettings.underline = false;
+                parent.activeObj.textSettings.strikethrough = false;
                 for (var i = 0; i < shapeSettings.fontStyle.length; i++) {
                     switch (shapeSettings.fontStyle[i]) {
                         case 'bold':
@@ -15491,6 +15603,12 @@ var Shape = /** @__PURE__ @class */ (function () {
                         case 'italic':
                             parent.activeObj.textSettings.italic = true;
                             break;
+                        case 'underline':
+                            parent.activeObj.textSettings.underline = true;
+                            break;
+                        case 'strikethrough':
+                            parent.activeObj.textSettings.strikethrough = true;
+                            break;
                     }
                 }
             }
@@ -15509,7 +15627,7 @@ var Shape = /** @__PURE__ @class */ (function () {
             this.upperContext.clearRect(0, 0, parent.upperCanvas.width, parent.upperCanvas.height);
             this.updateFontStyles();
             var width = this.upperContext.measureText(this.keyHistory).width + fontSize * 0.5;
-            var height = fontSize;
+            var height = fontSize * 1.18;
             this.upperContext.fillText(this.keyHistory, parent.activeObj.activePoint.startX, parent.activeObj.activePoint.startY + fontSize);
             this.upperContext.clearRect(0, 0, parent.upperCanvas.width, parent.upperCanvas.height);
             parent.currObjType.isText = true;
@@ -15532,7 +15650,7 @@ var Shape = /** @__PURE__ @class */ (function () {
         var text = (parent.textArea.style.display === 'block' || parent.textArea.style.display === 'inline-block') ?
             this.getMaxText(true) : this.getMaxText();
         var width = this.upperContext.measureText(text).width + fontSize * 0.5;
-        var height = rows.length * fontSize;
+        var height = rows.length * fontSize * 1.18;
         if (rows.length > 1) {
             height += (fontSize * 0.50);
         }
@@ -15567,7 +15685,7 @@ var Shape = /** @__PURE__ @class */ (function () {
         parent.textArea.value = '';
         this.updateFontStyles();
         var width = this.upperContext.measureText(parent.activeObj.keyHistory).width + fontSize * 0.5;
-        var height = fontSize;
+        var height = fontSize * 1.18;
         var rows = parent.activeObj.keyHistory.split('\n');
         if (rows.length > 1) {
             height *= rows.length;
@@ -16322,6 +16440,9 @@ var Shape = /** @__PURE__ @class */ (function () {
         }
         parent.textArea.style.fontWeight = actObj.textSettings.bold ? 'bold' : 'normal';
         parent.textArea.style.fontStyle = actObj.textSettings.italic ? 'italic' : 'normal';
+        parent.textArea.style.textDecoration = (actObj.textSettings.underline && actObj.textSettings.strikethrough) ? 'underline line-through' :
+            (actObj.textSettings.underline) ? 'underline' :
+                (actObj.textSettings.strikethrough) ? 'line-through' : 'none';
         parent.textArea.style.border = '2px solid ' + parent.themeColl[parent.theme]['primaryColor'];
         parent.textArea.value = actObj.keyHistory;
         parent.textArea.style.overflow = 'hidden';
@@ -16868,7 +16989,7 @@ var Shape = /** @__PURE__ @class */ (function () {
         /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
         var fileData = filesData;
         var fileExtension = fileData.name && fileData.name.split('.').pop().toLowerCase();
-        if (fileExtension && ['jpg', 'jpeg', 'png', 'svg', 'webp'].indexOf(fileExtension) === -1) {
+        if (fileExtension && ['jpg', 'jpeg', 'png', 'svg', 'webp', 'bmp'].indexOf(fileExtension) === -1) {
             this.refreshActiveObj();
             return;
         }
@@ -17215,9 +17336,16 @@ var Shape = /** @__PURE__ @class */ (function () {
         var obj = { shapeSettingsObj: {} };
         parent.notify('selection', { prop: 'updatePrevShapeSettings', onPropertyChange: false, value: { obj: obj } });
         var shapeSettings = obj['shapeSettingsObj'];
+        var isObjPushed = false;
+        var collLength = parent.objColl.length;
         this.pushActItemIntoObj();
+        if (collLength !== parent.objColl.length) {
+            isObjPushed = true;
+        }
         var objColl = extend([], parent.objColl, [], true);
-        parent.objColl.pop();
+        if (isObjPushed) {
+            parent.objColl.pop();
+        }
         if (parent.textArea.style.display === 'none') {
             this.updateFontRatio(parent.activeObj);
         }
@@ -17226,24 +17354,77 @@ var Shape = /** @__PURE__ @class */ (function () {
         }
         switch (item) {
             case 'default':
-                this.updateFontStyle(item, objColl, 'normal', 'normal');
+                this.updateFontStyle(item, objColl, 'normal', 'normal', false, false);
                 break;
             case 'bold':
-                this.updateFontStyle(item, objColl, 'bold', 'normal');
+                this.updateFontStyle(item, objColl, 'bold', 'normal', false, false);
                 break;
             case 'italic':
-                this.updateFontStyle(item, objColl, 'normal', 'italic');
+                this.updateFontStyle(item, objColl, 'normal', 'italic', false, false);
                 break;
             case 'bolditalic':
-                this.updateFontStyle(item, objColl, 'bold', 'italic');
+                this.updateFontStyle(item, objColl, 'bold', 'italic', false, false);
+                break;
+            case 'underline':
+                this.updateFontStyle(item, objColl, 'normal', 'normal', true, false);
+                break;
+            case 'boldunderline':
+                this.updateFontStyle(item, objColl, 'bold', 'normal', true, false);
+                break;
+            case 'italicunderline':
+                this.updateFontStyle(item, objColl, 'normal', 'italic', true, false);
+                break;
+            case 'bolditalicunderline':
+                this.updateFontStyle(item, objColl, 'bold', 'italic', true, false);
+                break;
+            case 'strikethrough':
+                this.updateFontStyle(item, objColl, 'normal', 'normal', false, true);
+                break;
+            case 'boldstrikethrough':
+                this.updateFontStyle(item, objColl, 'bold', 'normal', false, true);
+                break;
+            case 'italicstrikethrough':
+                this.updateFontStyle(item, objColl, 'normal', 'italic', false, true);
+                break;
+            case 'underlinestrikethrough':
+                this.updateFontStyle(item, objColl, 'normal', 'normal', true, true);
+                break;
+            case 'bolditalicstrikethrough':
+                this.updateFontStyle(item, objColl, 'bold', 'italic', false, true);
+                break;
+            case 'boldunderlinestrikethrough':
+                this.updateFontStyle(item, objColl, 'bold', 'normal', true, true);
+                break;
+            case 'italicunderlinestrikethrough':
+                this.updateFontStyle(item, objColl, 'normal', 'italic', true, true);
+                break;
+            case 'bolditalicunderlinestrikethrough':
+                this.updateFontStyle(item, objColl, 'bold', 'italic', true, true);
                 break;
         }
         var shapeChangedArgs = { action: 'font-style', currentShapeSettings: extend({}, shapeSettings, {}, true) };
-        shapeChangedArgs.currentShapeSettings.fontStyle = [item];
+        shapeChangedArgs.currentShapeSettings.fontStyle = this.getFontStyleArray(item);
         parent.trigger('shapeChange', shapeChangedArgs);
         parent.editCompleteArgs = shapeChangedArgs;
     };
-    Shape.prototype.updateFontStyle = function (item, objColl, fontWeight, fontStyle) {
+    Shape.prototype.getFontStyleArray = function (item) {
+        var styleArray = [];
+        var lowerItem = item.toLowerCase();
+        if (lowerItem.indexOf('bold') > -1) {
+            styleArray.push('bold');
+        }
+        if (lowerItem.indexOf('italic') > -1) {
+            styleArray.push('italic');
+        }
+        if (lowerItem.indexOf('underline') > -1) {
+            styleArray.push('underline');
+        }
+        if (lowerItem.indexOf('strikethrough') > -1) {
+            styleArray.push('strikethrough');
+        }
+        return styleArray;
+    };
+    Shape.prototype.updateFontStyle = function (item, objColl, fontWeight, fontStyle, underline, strikethrough) {
         var parent = this.parent;
         var style = parent.textArea.style;
         if (style.display === 'block' || style.display === 'inline-block') {
@@ -17259,9 +17440,43 @@ var Shape = /** @__PURE__ @class */ (function () {
             else {
                 style.fontStyle = 'normal';
             }
-            var value = (style.fontWeight === 'normal' && style.fontStyle === 'normal' ? 'default' :
-                (style.fontWeight === 'bold' && style.fontStyle === 'normal' ? 'bold' :
-                    (style.fontWeight === 'normal' && style.fontStyle === 'italic' ? 'italic' : 'bolditalic')));
+            if (underline && strikethrough) {
+                style.textDecoration = 'underline line-through';
+            }
+            else if (strikethrough) {
+                style.textDecoration = 'line-through';
+            }
+            else if (underline) {
+                style.textDecoration = 'underline';
+            }
+            else {
+                style.textDecoration = 'none';
+            }
+            var key = [
+                style.fontWeight === 'bold' ? 'bold' : '',
+                style.fontStyle === 'italic' ? 'italic' : '',
+                typeof style.textDecoration === 'string' && style.textDecoration.indexOf('underline') > -1 ? 'underline' : '',
+                typeof style.textDecoration === 'string' && style.textDecoration.indexOf('line-through') > -1 ? 'strikethrough' : ''
+            ].filter(Boolean).join('');
+            var valueMap = {
+                '': 'default',
+                bold: 'bold',
+                italic: 'italic',
+                underline: 'underline',
+                strikethrough: 'strikethrough',
+                bolditalic: 'bolditalic',
+                boldunderline: 'boldunderline',
+                boldstrikethrough: 'boldstrikethrough',
+                italicunderline: 'italicunderline',
+                italicstrikethrough: 'italicstrikethrough',
+                underlinestrikethrough: 'underlinestrikethrough',
+                bolditalicunderline: 'bolditalicunderline',
+                bolditalicstrikethrough: 'bolditalicstrikethrough',
+                boldunderlinestrikethrough: 'boldunderlinestrikethrough',
+                italicunderlinestrikethrough: 'italicunderlinestrikethrough',
+                bolditalicunderlinestrikethrough: 'bolditalicunderlinestrikethrough'
+            };
+            var value = key in valueMap ? valueMap[key] : 'default';
             var width = this.getTextAreaWidth(value);
             style.width = width + 'px';
             this.updateObjColl(item, objColl);
@@ -17269,6 +17484,8 @@ var Shape = /** @__PURE__ @class */ (function () {
         else {
             this.textSettings.bold = parent.activeObj.textSettings.bold = fontWeight === 'normal' ? false : true;
             this.textSettings.italic = parent.activeObj.textSettings.italic = fontStyle === 'normal' ? false : true;
+            this.textSettings.underline = parent.activeObj.textSettings.underline = underline ? true : false;
+            this.textSettings.strikethrough = parent.activeObj.textSettings.strikethrough = strikethrough ? true : false;
             if (parent.activeObj.activePoint.width !== 0 || parent.activeObj.activePoint.height !== 0) {
                 this.redrawText();
             }
@@ -17364,24 +17581,107 @@ var Shape = /** @__PURE__ @class */ (function () {
         parent.notify('freehand-draw', { prop: 'getSelPointColl', onPropertyChange: false,
             value: { obj: selPointCollObj } });
         prevObj.selPointColl = extend([], selPointCollObj['selPointColl'], [], true);
-        var tempBold = parent.activeObj.textSettings.bold;
-        var tempItalic = parent.activeObj.textSettings.italic;
+        var textSettings = parent.activeObj.textSettings;
+        var tempBold = textSettings.bold;
+        var tempItalic = textSettings.italic;
+        var tempUnderline = textSettings.underline;
+        var tempStrikethrough = textSettings.strikethrough;
         switch (item) {
             case 'default':
-                parent.activeObj.textSettings.bold = false;
-                parent.activeObj.textSettings.italic = false;
+                textSettings.bold = false;
+                textSettings.italic = false;
+                textSettings.underline = false;
+                textSettings.strikethrough = false;
                 break;
             case 'bold':
-                parent.activeObj.textSettings.bold = true;
-                parent.activeObj.textSettings.italic = false;
+                textSettings.bold = true;
+                textSettings.italic = false;
+                textSettings.underline = false;
+                textSettings.strikethrough = false;
                 break;
             case 'italic':
-                parent.activeObj.textSettings.bold = false;
-                parent.activeObj.textSettings.italic = true;
+                textSettings.bold = false;
+                textSettings.italic = true;
+                textSettings.underline = false;
+                textSettings.strikethrough = false;
                 break;
             case 'bolditalic':
-                parent.activeObj.textSettings.bold = true;
-                parent.activeObj.textSettings.italic = true;
+                textSettings.bold = true;
+                textSettings.italic = true;
+                textSettings.underline = false;
+                textSettings.strikethrough = false;
+                break;
+            case 'underline':
+                textSettings.bold = false;
+                textSettings.italic = false;
+                textSettings.underline = true;
+                textSettings.strikethrough = false;
+                break;
+            case 'boldunderline':
+                textSettings.bold = true;
+                textSettings.italic = false;
+                textSettings.underline = true;
+                textSettings.strikethrough = false;
+                break;
+            case 'italicunderline':
+                textSettings.bold = false;
+                textSettings.italic = true;
+                textSettings.underline = true;
+                textSettings.strikethrough = false;
+                break;
+            case 'bolditalicunderline':
+                textSettings.bold = true;
+                textSettings.italic = true;
+                textSettings.underline = true;
+                textSettings.strikethrough = false;
+                break;
+            case 'strikethrough':
+                textSettings.bold = false;
+                textSettings.italic = false;
+                textSettings.underline = false;
+                textSettings.strikethrough = true;
+                break;
+            case 'boldstrikethrough':
+                textSettings.bold = true;
+                textSettings.italic = false;
+                textSettings.underline = false;
+                textSettings.strikethrough = true;
+                break;
+            case 'italicstrikethrough':
+                textSettings.bold = false;
+                textSettings.italic = true;
+                textSettings.underline = false;
+                textSettings.strikethrough = true;
+                break;
+            case 'underlinestrikethrough':
+                textSettings.bold = false;
+                textSettings.italic = false;
+                textSettings.underline = true;
+                textSettings.strikethrough = true;
+                break;
+            case 'bolditalicstrikethrough':
+                textSettings.bold = true;
+                textSettings.italic = true;
+                textSettings.underline = false;
+                textSettings.strikethrough = true;
+                break;
+            case 'boldunderlinestrikethrough':
+                textSettings.bold = true;
+                textSettings.italic = false;
+                textSettings.underline = true;
+                textSettings.strikethrough = true;
+                break;
+            case 'italicunderlinestrikethrough':
+                textSettings.bold = false;
+                textSettings.italic = true;
+                textSettings.underline = true;
+                textSettings.strikethrough = true;
+                break;
+            case 'bolditalicunderlinestrikethrough':
+                textSettings.bold = true;
+                textSettings.italic = true;
+                textSettings.underline = true;
+                textSettings.strikethrough = true;
                 break;
         }
         parent.objColl.push(parent.activeObj);
@@ -17391,8 +17691,10 @@ var Shape = /** @__PURE__ @class */ (function () {
                 previousCropObj: prevCropObj, previousText: null,
                 currentText: null, previousFilter: null, isCircleCrop: null } });
         parent.objColl.pop();
-        parent.activeObj.textSettings.bold = tempBold;
-        parent.activeObj.textSettings.italic = tempItalic;
+        textSettings.bold = tempBold;
+        textSettings.italic = tempItalic;
+        textSettings.underline = tempUnderline;
+        textSettings.strikethrough = tempStrikethrough;
     };
     Shape.prototype.pushActItemIntoObj = function () {
         var parent = this.parent;
@@ -17585,24 +17887,107 @@ var Shape = /** @__PURE__ @class */ (function () {
     };
     Shape.prototype.getTextAreaWidth = function (item) {
         var parent = this.parent;
-        var tempBold = parent.activeObj.textSettings.bold;
-        var tempItalic = parent.activeObj.textSettings.italic;
+        var textSettings = parent.activeObj.textSettings;
+        var tempBold = textSettings.bold;
+        var tempItalic = textSettings.italic;
+        var tempUnderline = textSettings.underline;
+        var tempStrikethrough = textSettings.strikethrough;
         switch (item) {
             case 'default':
-                parent.activeObj.textSettings.bold = false;
-                parent.activeObj.textSettings.italic = false;
+                textSettings.bold = false;
+                textSettings.italic = false;
+                textSettings.underline = false;
+                textSettings.strikethrough = false;
                 break;
             case 'bold':
-                parent.activeObj.textSettings.bold = true;
-                parent.activeObj.textSettings.italic = false;
+                textSettings.bold = true;
+                textSettings.italic = false;
+                textSettings.underline = false;
+                textSettings.strikethrough = false;
                 break;
             case 'italic':
-                parent.activeObj.textSettings.bold = false;
-                parent.activeObj.textSettings.italic = true;
+                textSettings.bold = false;
+                textSettings.italic = true;
+                textSettings.underline = false;
+                textSettings.strikethrough = false;
                 break;
             case 'bolditalic':
-                parent.activeObj.textSettings.bold = true;
-                parent.activeObj.textSettings.italic = true;
+                textSettings.bold = true;
+                textSettings.italic = true;
+                textSettings.underline = false;
+                textSettings.strikethrough = false;
+                break;
+            case 'underline':
+                textSettings.bold = false;
+                textSettings.italic = false;
+                textSettings.underline = true;
+                textSettings.strikethrough = false;
+                break;
+            case 'boldunderline':
+                textSettings.bold = true;
+                textSettings.italic = false;
+                textSettings.underline = true;
+                textSettings.strikethrough = false;
+                break;
+            case 'italicunderline':
+                textSettings.bold = false;
+                textSettings.italic = true;
+                textSettings.underline = true;
+                textSettings.strikethrough = false;
+                break;
+            case 'bolditalicunderline':
+                textSettings.bold = true;
+                textSettings.italic = true;
+                textSettings.underline = true;
+                textSettings.strikethrough = false;
+                break;
+            case 'strikethrough':
+                textSettings.bold = false;
+                textSettings.italic = false;
+                textSettings.underline = false;
+                textSettings.strikethrough = true;
+                break;
+            case 'boldstrikethrough':
+                textSettings.bold = true;
+                textSettings.italic = false;
+                textSettings.underline = false;
+                textSettings.strikethrough = true;
+                break;
+            case 'italicstrikethrough':
+                textSettings.bold = false;
+                textSettings.italic = true;
+                textSettings.underline = false;
+                textSettings.strikethrough = true;
+                break;
+            case 'underlinestrikethrough':
+                textSettings.bold = false;
+                textSettings.italic = false;
+                textSettings.underline = true;
+                textSettings.strikethrough = true;
+                break;
+            case 'bolditalicstrikethrough':
+                textSettings.bold = true;
+                textSettings.italic = true;
+                textSettings.underline = false;
+                textSettings.strikethrough = true;
+                break;
+            case 'boldunderlinestrikethrough':
+                textSettings.bold = true;
+                textSettings.italic = false;
+                textSettings.underline = true;
+                textSettings.strikethrough = true;
+                break;
+            case 'italicunderlinestrikethrough':
+                textSettings.bold = false;
+                textSettings.italic = true;
+                textSettings.underline = true;
+                textSettings.strikethrough = true;
+                break;
+            case 'bolditalicunderlinestrikethrough':
+                textSettings.bold = true;
+                textSettings.italic = true;
+                textSettings.underline = true;
+                textSettings.strikethrough = true;
                 break;
         }
         var isTextArea = parent.textArea.style.display === 'none' ? false : true;
@@ -17610,14 +17995,16 @@ var Shape = /** @__PURE__ @class */ (function () {
         var width;
         if (!isTextArea) {
             width = this.upperContext.measureText(parent.activeObj.keyHistory).width +
-                parent.activeObj.textSettings.fontSize * 0.5;
+                textSettings.fontSize * 0.5;
         }
         else {
             width = this.upperContext.measureText(parent.textArea.value).width +
-                parent.activeObj.textSettings.fontSize * 0.5;
+                textSettings.fontSize * 0.5;
         }
-        parent.activeObj.textSettings.bold = tempBold;
-        parent.activeObj.textSettings.italic = tempItalic;
+        textSettings.bold = tempBold;
+        textSettings.italic = tempItalic;
+        textSettings.underline = tempUnderline;
+        textSettings.strikethrough = tempStrikethrough;
         return width;
     };
     Shape.prototype.getRedactObjDetails = function (obj) {
@@ -17696,6 +18083,12 @@ var Shape = /** @__PURE__ @class */ (function () {
                 if (obj.textSettings.italic) {
                     shapeDetails.fontStyle.push('italic');
                 }
+                if (obj.textSettings.underline) {
+                    shapeDetails.fontStyle.push('underline');
+                }
+                if (obj.textSettings.strikethrough) {
+                    shapeDetails.fontStyle.push('strikethrough');
+                }
                 shapeDetails.degree = obj.rotatedAngle * (180 / Math.PI);
                 parent.notify('selection', { prop: 'updateTransColl', onPropertyChange: false, value: { obj: transformObj, object: obj } });
                 shapeDetails.transformCollection = transformObj['coll'];
@@ -17995,6 +18388,7 @@ var Shape = /** @__PURE__ @class */ (function () {
             this.lowerContext.clearRect(0, 0, parent.lowerCanvas.width, parent.lowerCanvas.height);
             parent.notify('draw', { prop: 'redrawImgWithObj', onPropertyChange: false });
             parent.notify('toolbar', { prop: 'refresh-main-toolbar', onPropertyChange: false });
+            parent.notify('undo-redo', { prop: 'updateCurrUrc', value: { type: 'ok' } });
         }
     };
     Shape.prototype.getMaxText = function (isTextBox, text, obj) {
@@ -19411,40 +19805,40 @@ var Transform = /** @__PURE__ @class */ (function () {
             destWidth: parent.img.destWidth, destHeight: parent.img.destHeight };
         if (parent.activeObj.shape) {
             var maxDimension = this.setZoomDimension(-0.1, parent.activeObj);
-            if (!isNullOrUndefined(zoomOut)) {
-                var actPoint = parent.activeObj.activePoint;
-                if (parent.transform.straighten === 0) {
-                    if (parent.img.destLeft > actPoint.startX || parent.img.destTop >
-                        actPoint.startY || parent.img.destLeft + parent.img.destWidth <
-                        actPoint.endX || parent.img.destTop + parent.img.destHeight < actPoint.endY
-                        || zoomFactor === minZoomFactor) {
-                        zoomOut.classList.add('e-disabled');
-                        zoomOut.parentElement.classList.add('e-overlay');
-                        isDisabled = true;
-                    }
-                    else {
-                        zoomOut.classList.remove('e-disabled');
-                        zoomOut.parentElement.classList.remove('e-overlay');
-                        isDisabled = false;
-                    }
+            var actPoint = parent.activeObj.activePoint;
+            if (parent.transform.straighten === 0) {
+                if (parent.img.destLeft > actPoint.startX || parent.img.destTop >
+                    actPoint.startY || parent.img.destLeft + parent.img.destWidth <
+                    actPoint.endX || parent.img.destTop + parent.img.destHeight < actPoint.endY
+                    || zoomFactor === minZoomFactor) {
+                    isDisabled = true;
                 }
                 else {
-                    parent.img.destWidth = maxDimension.width;
-                    parent.img.destHeight = maxDimension.height;
-                    var obj = { isIntersect: null };
-                    parent.notify('draw', { prop: 'updateImgCanvasPoints', onPropertyChange: false });
-                    parent.notify('draw', { prop: 'isLinesIntersect', onPropertyChange: false, value: { obj: obj } });
-                    if (obj['isIntersect'] ||
-                        zoomFactor === minZoomFactor) {
-                        zoomOut.classList.add('e-disabled');
-                        zoomOut.parentElement.classList.add('e-overlay');
-                        isDisabled = true;
-                    }
-                    else {
-                        zoomOut.classList.remove('e-disabled');
-                        zoomOut.parentElement.classList.remove('e-overlay');
-                        isDisabled = false;
-                    }
+                    isDisabled = false;
+                }
+            }
+            else {
+                parent.img.destWidth = maxDimension.width;
+                parent.img.destHeight = maxDimension.height;
+                var obj = { isIntersect: null };
+                parent.notify('draw', { prop: 'updateImgCanvasPoints', onPropertyChange: false });
+                parent.notify('draw', { prop: 'isLinesIntersect', onPropertyChange: false, value: { obj: obj } });
+                if (obj['isIntersect'] ||
+                    zoomFactor === minZoomFactor) {
+                    isDisabled = true;
+                }
+                else {
+                    isDisabled = false;
+                }
+            }
+            if (zoomOut) {
+                if (isDisabled) {
+                    zoomOut.classList.add('e-disabled');
+                    zoomOut.parentElement.classList.add('e-overlay');
+                }
+                else {
+                    zoomOut.classList.remove('e-disabled');
+                    zoomOut.parentElement.classList.remove('e-overlay');
                 }
             }
         }
@@ -19480,7 +19874,7 @@ var Transform = /** @__PURE__ @class */ (function () {
             maxDimension.width += (maxDimension.width * parent.transform.zoomFactor);
             maxDimension.height += (maxDimension.height * parent.transform.zoomFactor);
             parent.img.destLeft = (parent.lowerCanvas.clientWidth - maxDimension.width) / 2;
-            parent.img.destTop = (parent.lowerCanvas.clientHeight - maxDimension.height + 1) / 2;
+            parent.img.destTop = (parent.lowerCanvas.clientHeight - maxDimension.height) / 2;
         }
         parent.notify('draw', { prop: 'draw-image-to-canvas', value: { dimension: maxDimension } });
         maxDimension.width = this.cropDimension.width;
@@ -20204,7 +20598,7 @@ var Transform = /** @__PURE__ @class */ (function () {
                 maxDimension.height += (maxDimension.height * parent.transform.defaultZoomFactor);
             }
             parent.img.destLeft = (parent.lowerCanvas.clientWidth - maxDimension.width) / 2;
-            parent.img.destTop = (parent.lowerCanvas.clientHeight - maxDimension.height + 1) / 2;
+            parent.img.destTop = (parent.lowerCanvas.clientHeight - maxDimension.height) / 2;
             if (parent.transform.degree === 0 && parent.transform.currFlipState === '') {
                 if (parent.transform.defaultZoomFactor > 0) {
                     parent.img.destLeft += parent.panPoint.totalPannedPoint.x;
@@ -20313,11 +20707,11 @@ var Transform = /** @__PURE__ @class */ (function () {
         var object = { toolbarHeight: 0 };
         var parent = this.parent;
         parent.notify('toolbar', { prop: 'getToolbarHeight', value: { obj: object } });
-        var canvasMaxWidth = isImgShape ? parent.element.clientWidth / 3 :
-            parent.element.clientWidth;
-        var canvasMaxHeight = isImgShape ? (parent.element.clientHeight - object['toolbarHeight']) / 3 :
-            parent.element.clientHeight - (object['toolbarHeight']); // 1px border
-        canvasMaxHeight = Browser.isDevice ? canvasMaxHeight - (object['toolbarHeight']) : canvasMaxHeight; // 1px border
+        var newWidth = parent.imageSettings.width ? parent.imageSettings.width : parent.element.clientWidth;
+        var newHeight = parent.imageSettings.height ? parent.imageSettings.height : parent.element.clientHeight - (object['toolbarHeight']);
+        var canvasMaxWidth = isImgShape ? parent.element.clientWidth / 3 : newWidth;
+        var canvasMaxHeight = isImgShape ? (parent.element.clientHeight - object['toolbarHeight']) / 3 : newHeight;
+        canvasMaxHeight = Browser.isDevice ? canvasMaxHeight - (object['toolbarHeight']) : canvasMaxHeight;
         if (Browser.isDevice && parent.isStraightening) {
             var cxtTbar = parent.element.querySelector('#' + parent.element.id + '_contextualToolbarArea');
             canvasMaxHeight -= cxtTbar ? cxtTbar.clientHeight : 0;
@@ -20325,7 +20719,8 @@ var Transform = /** @__PURE__ @class */ (function () {
         if (!isImgShape && parent.element.clientHeight === 0) {
             canvasMaxHeight = 0;
         }
-        if (isNullOrUndefined(isImgShape)) {
+        var isImageSettings = parent.imageSettings.width && parent.imageSettings.height ? true : false;
+        if (isNullOrUndefined(isImgShape) && !(isImageSettings)) {
             if (canvasMaxWidth > 30) {
                 canvasMaxWidth -= 30;
             }
@@ -20551,6 +20946,9 @@ var Transform = /** @__PURE__ @class */ (function () {
                 this.zoomAction(.0125, null, true, true);
             }
         }
+        if (parent.isPublicMethod && parent.aspectWidth === width && parent.aspectHeight === height) {
+            return;
+        }
         this.resizeImg(activeObj, width, height);
         width = tempwidth;
         height = tempheight;
@@ -20596,9 +20994,12 @@ var Transform = /** @__PURE__ @class */ (function () {
                 value: { type: 'custom', startX: null, startY: null, width: null, height: null } });
         }
         if (isNullOrUndefined(parent.currSelectionPoint)) {
-            parent.notify('draw', { prop: 'select', onPropertyChange: false,
-                value: { type: 'custom', startX: parent.img.destLeft, startY: parent.img.destTop,
-                    width: parent.img.destWidth, height: parent.img.destHeight } });
+            /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
+            if (!parent.shapeColl.some(function (item) { return item.rotatedAngle && item.rotatedAngle !== 0; })) {
+                parent.notify('draw', { prop: 'select', onPropertyChange: false,
+                    value: { type: 'custom', startX: parent.img.destLeft, startY: parent.img.destTop,
+                        width: parent.img.destWidth, height: parent.img.destHeight } });
+            }
         }
         else {
             parent.notify('draw', { prop: 'select', onPropertyChange: false,
@@ -20780,6 +21181,8 @@ var UndoRedo = /** @__PURE__ @class */ (function () {
         this.tempUndoRedoColl = [];
         this.tempUndoRedoStep = 0;
         this.isPreventing = false;
+        this.preventEditComplete = false;
+        this.preventApplyEditComplete = false;
         this.parent = parent;
         this.addEventListener();
     }
@@ -20861,6 +21264,12 @@ var UndoRedo = /** @__PURE__ @class */ (function () {
             case 'reset':
                 this.reset();
                 break;
+            case 'preventEditComplete':
+                args.value['obj']['bool'] = this.preventEditComplete;
+                break;
+            case 'preventApplyEditComplete':
+                this.preventApplyEditComplete = args.value['bool'];
+                break;
         }
     };
     UndoRedo.prototype.getModuleName = function () {
@@ -20875,6 +21284,7 @@ var UndoRedo = /** @__PURE__ @class */ (function () {
         this.tempUndoRedoColl = [];
         this.tempUndoRedoStep = 0;
         this.isPreventing = false;
+        this.preventEditComplete = this.preventApplyEditComplete = false;
     };
     UndoRedo.prototype.refreshUrc = function (refreshToolbar) {
         var parent = this.parent;
@@ -21586,6 +21996,10 @@ var UndoRedo = /** @__PURE__ @class */ (function () {
         textArea.style.color = obj.strokeSettings.strokeColor;
         textArea.style.fontWeight = obj.textSettings.bold ? 'bold' : 'normal';
         textArea.style.fontStyle = obj.textSettings.italic ? 'italic' : 'normal';
+        textArea.style.textDecoration = (obj.textSettings.underline && obj.textSettings.strikethrough) ? 'underline line-through' :
+            (obj.textSettings.underline) ? 'underline' :
+                (obj.textSettings.strikethrough) ? 'line-through' :
+                    'none';
         textArea.style.border = '2px solid ' + parent.themeColl[parent.theme]['primaryColor'];
         textArea.value = obj.keyHistory;
         parent.activeObj = extend({}, obj, {}, true);
@@ -21919,6 +22333,7 @@ var UndoRedo = /** @__PURE__ @class */ (function () {
             var temp = parent.noPushUndo;
             parent.noPushUndo = false;
             parent.isUndoRedoStack = true;
+            this.preventEditComplete = true;
             if (isPenDraw) {
                 var tempTogglePen = parent.togglePen;
                 var obj = { freehandDrawSelectedId: null };
@@ -21947,7 +22362,14 @@ var UndoRedo = /** @__PURE__ @class */ (function () {
                     parent.enableTextEditing();
                 }
             }
-            parent.isUndoRedoStack = false;
+            if (this.preventEditComplete) {
+                parent.isUndoRedoStack = this.preventEditComplete = false;
+                if (!this.preventApplyEditComplete) {
+                    this.triggerActionCompletedEvent('shape-customize');
+                }
+                this.triggerActionCompletedEvent('shape-select');
+            }
+            parent.isUndoRedoStack = this.preventEditComplete = false;
         }
     };
     return UndoRedo;
@@ -22243,6 +22665,12 @@ var ImageEditor = /** @__PURE__ @class */ (function (_super) {
         _this.tempRedactBlur = 50;
         /** @hidden */
         _this.tempRedactPixel = 40;
+        /** @hidden */
+        _this.imageSettings = { width: null, height: null };
+        /** @hidden */
+        _this.aspectRatioBaseDimension = false;
+        /** @hidden */
+        _this.imageLoaded = false;
         _this.tempToolbarHeight = 0;
         _this.tempToolbar = [];
         ImageEditor_1.Inject(Crop, Draw, Selection, Transform, Export, ToolbarModule);
@@ -22347,11 +22775,13 @@ var ImageEditor = /** @__PURE__ @class */ (function (_super) {
                     break;
                 case 'disabled':
                     if (newProperties.disabled) {
-                        this.element.classList.add('e-disabled');
+                        this.element.classList.add('e-disabled', 'e-overlay');
+                        this.element.style.opacity = '0.5';
                         this.unwireEvent();
                     }
                     else {
-                        this.element.classList.remove('e-disabled');
+                        this.element.classList.remove('e-disabled', 'e-overlay');
+                        this.element.style.opacity = '1';
                         this.wireEvent();
                     }
                     break;
@@ -22469,7 +22899,7 @@ var ImageEditor = /** @__PURE__ @class */ (function (_super) {
                     if (newProperties.uploadSettings) {
                         this.uploadSettings = newProperties.uploadSettings;
                         if (!this.uploadSettings.allowedExtensions) {
-                            this.uploadSettings.allowedExtensions = '.jpg, .jpeg, .png, .svg, .webp';
+                            this.uploadSettings.allowedExtensions = '.jpg, .jpeg, .png, .svg, .webp, .bmp';
                             this.notify('draw', { prop: 'setNullExtension', value: { extension: true } });
                         }
                         else {
@@ -22518,6 +22948,10 @@ var ImageEditor = /** @__PURE__ @class */ (function (_super) {
         this.element.innerHTML = '';
     };
     ImageEditor.prototype.initialize = function () {
+        if (this.disabled) {
+            this.element.classList.add('e-disabled', 'e-overlay');
+            this.element.style.opacity = '0.5';
+        }
         if (this.toolbarTemplate) {
             this.element.appendChild(this.createElement('div', {
                 id: this.element.id + '_toolbarArea', className: 'e-toolbar-area'
@@ -22529,7 +22963,7 @@ var ImageEditor = /** @__PURE__ @class */ (function (_super) {
             this.notify('toolbar', { prop: 'create-contextual-toolbar', onPropertyChange: false });
         }
         if (!this.uploadSettings.allowedExtensions) {
-            this.setProperties({ uploadSettings: { allowedExtensions: '.jpg, .jpeg, .png, .svg, .webp' } }, true);
+            this.setProperties({ uploadSettings: { allowedExtensions: '.jpg, .jpeg, .png, .svg, .webp, .bmp' } }, true);
         }
         else {
             this.notify('draw', { prop: 'setNullExtension', value: { extension: false } });
@@ -22730,7 +23164,7 @@ var ImageEditor = /** @__PURE__ @class */ (function (_super) {
      * @returns {string[]}.
      */
     ImageEditor.prototype.getExtensionArray = function () {
-        var validExtensions = ['jpeg', 'jpg', 'png', 'svg', 'webp'];
+        var validExtensions = ['jpeg', 'jpg', 'png', 'svg', 'webp', 'bmp'];
         var split = this.uploadSettings.allowedExtensions.split(',');
         var extension = [];
         for (var _i = 0, split_1 = split; _i < split_1.length; _i++) {
@@ -22782,6 +23216,9 @@ var ImageEditor = /** @__PURE__ @class */ (function (_super) {
                 case 'webp':
                     words += ' WebP,';
                     break;
+                case 'bmp':
+                    words += ' BMP,';
+                    break;
             }
             if (i === extension.length - 1) {
                 words = words.slice(0, -1);
@@ -23070,10 +23507,16 @@ var ImageEditor = /** @__PURE__ @class */ (function (_super) {
      */
     ImageEditor.prototype.flip = function (direction) {
         this.applyShapes();
-        this.updateImageTransformColl(direction.toLowerCase() + 'flip');
-        this.notify('transform', { prop: 'flip', value: { direction: direction } });
-        this.notify('draw', { prop: 'redrawDownScale' });
-        this.notify('undo-redo', { prop: 'updateCurrUrc', value: { type: 'ok' } });
+        if (this.activeObj.shape && this.activeObj.shape.indexOf('crop') > -1) {
+            this.transformSelect(direction.toLowerCase() + 'flip');
+        }
+        else {
+            this.updateImageTransformColl(direction.toLowerCase() + 'flip');
+            this.setRotateZoom();
+            this.notify('transform', { prop: 'flip', value: { direction: direction } });
+            this.notify('draw', { prop: 'redrawDownScale' });
+            this.notify('undo-redo', { prop: 'updateCurrUrc', value: { type: 'ok' } });
+        }
         var actionArgs = { action: 'flip', actionEventArgs: this.editCompleteArgs };
         this.triggerEditCompleteEvent(actionArgs);
     };
@@ -23112,7 +23555,7 @@ var ImageEditor = /** @__PURE__ @class */ (function (_super) {
      *
      * @param {string | ImageData } data - Specifies url of the image or image data.
      * @param {boolean} [resetChanges=true] - Optional. Determines whether to reset existing changes when opening the image. The default value is true, which resets all existing changes.
-     * @param {ImageSettings} imageSettings - Optional. Specifies the image setting that contains background color to apply when opening a transparent image. The default value of background color is an empty string (''), meaning no background color is applied by default when a transparent image is opened.
+     * @param {ImageSettings} imageSettings - Optional. Specifies image settings to apply when loading an image.
      *
      * @remarks
      * The supported file types are JPG, JPEG, PNG, and SVG.
@@ -23120,16 +23563,88 @@ var ImageEditor = /** @__PURE__ @class */ (function (_super) {
      * @returns {void}.
      */
     ImageEditor.prototype.open = function (data, resetChanges, imageSettings) {
+        var _this = this;
         resetChanges = isNullOrUndefined(resetChanges) ? true : resetChanges;
         if (resetChanges) {
-            if (isNullOrUndefined(data)) {
+            if (isNullOrUndefined(data) || this.disabled) {
                 return;
             }
             var dropArea = document.getElementById(this.element.id + '_dropArea');
             if (dropArea) {
                 dropArea.style.display = 'none';
             }
-            this.notify('draw', { prop: 'open', value: { data: data } });
+            this.imageSettings = { width: null, height: null };
+            this.aspectRatioBaseDimension = null;
+            if (imageSettings && (imageSettings.width || imageSettings.height)) {
+                var tempImageSettings_1 = extend({}, imageSettings, {}, true);
+                imageSettings = this.scaleToFit(imageSettings);
+                this.aspectRatioBaseDimension = imageSettings.isAspectRatio;
+                if (!imageSettings.isAspectRatio && imageSettings.width && imageSettings.height) {
+                    this.imageSettings.width = imageSettings.width;
+                    this.imageSettings.height = imageSettings.height;
+                    this.notify('draw', { prop: 'open', value: { data: data } });
+                    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                    var intervalId_1 = setInterval(function () {
+                        if (_this.imageLoaded && _this.baseImg.width && _this.baseImg.height) {
+                            _this.setInitialZoomLevel(tempImageSettings_1);
+                            clearInterval(intervalId_1);
+                        }
+                    }, 1);
+                }
+                else if (imageSettings.width || imageSettings.height) {
+                    this.notify('draw', { prop: 'open', value: { data: data } });
+                    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                    var intervalId_2 = setInterval(function () {
+                        if (_this.imageLoaded && _this.baseImg.width && _this.baseImg.height) {
+                            _this.imageSettings.width = imageSettings.width;
+                            _this.imageSettings.height = imageSettings.height;
+                            var originalWidth = _this.baseImg.width;
+                            var originalHeight = _this.baseImg.height;
+                            var maxValue = '';
+                            var aspectRatioValue = void 0;
+                            var value = void 0;
+                            var newValue = void 0;
+                            if (imageSettings.width && imageSettings.height) {
+                                maxValue = imageSettings.width > imageSettings.height ? 'width' : 'height';
+                            }
+                            if (maxValue === 'width' || (imageSettings.width && maxValue !== 'height')) {
+                                aspectRatioValue = imageSettings.width;
+                                value = aspectRatioValue / (originalWidth / originalHeight);
+                                newValue = value % 1 >= 0.5 || value % 1 <= -0.5 ? Math.round(value) : (value < 0) ? Math.ceil(value) : Math.floor(value);
+                                if (!imageSettings.height || newValue > imageSettings.height) {
+                                    _this.imageSettings.height = imageSettings.height = newValue;
+                                }
+                                else {
+                                    aspectRatioValue = imageSettings.height;
+                                    value = aspectRatioValue / (originalHeight / originalWidth);
+                                    newValue = value % 1 >= 0.5 || value % 1 <= -0.5 ? Math.round(value) : (value < 0) ? Math.ceil(value) : Math.floor(value);
+                                    _this.imageSettings.width = imageSettings.width = newValue;
+                                }
+                            }
+                            else if (maxValue === 'height' || (imageSettings.height && maxValue !== 'width')) {
+                                aspectRatioValue = imageSettings.height;
+                                value = aspectRatioValue / (originalHeight / originalWidth);
+                                newValue = value % 1 >= 0.5 || value % 1 <= -0.5 ? Math.round(value) : (value < 0) ? Math.ceil(value) : Math.floor(value);
+                                if (!imageSettings.width || newValue > imageSettings.width) {
+                                    _this.imageSettings.width = imageSettings.width = newValue;
+                                }
+                                else {
+                                    aspectRatioValue = imageSettings.width;
+                                    value = aspectRatioValue / (originalWidth / originalHeight);
+                                    newValue = value % 1 >= 0.5 || value % 1 <= -0.5 ? Math.round(value) : (value < 0) ? Math.ceil(value) : Math.floor(value);
+                                    _this.imageSettings.height = imageSettings.height = newValue;
+                                }
+                            }
+                            _this.notify('draw', { prop: 'open', value: { data: data } });
+                            _this.setInitialZoomLevel(tempImageSettings_1);
+                            clearInterval(intervalId_2);
+                        }
+                    }, 1);
+                }
+            }
+            else {
+                this.notify('draw', { prop: 'open', value: { data: data } });
+            }
         }
         else {
             this.updateImage(data, imageSettings ? imageSettings.backgroundColor : null);
@@ -23283,11 +23798,18 @@ var ImageEditor = /** @__PURE__ @class */ (function (_super) {
     ImageEditor.prototype.rotate = function (degree) {
         var obj = { isRotate: false };
         this.applyShapes();
-        if (degree === 90 || degree === -90) {
-            this.updateImageTransformColl(degree === 90 ? 'rotateright' : 'rotateleft');
+        if (this.activeObj.shape && this.activeObj.shape.indexOf('crop') > -1) {
+            this.transformSelect(degree === 90 ? 'rotateright' : 'rotateleft');
+            obj['isRotate'] = true;
+        }
+        else {
+            if (degree === 90 || degree === -90) {
+                this.updateImageTransformColl(degree === 90 ? 'rotateright' : 'rotateleft');
+            }
+            this.setRotateZoom();
+            this.notify('transform', { prop: 'rotate', value: { degree: degree, obj: obj } });
+            this.notify('draw', { prop: 'redrawDownScale' });
         }
-        this.notify('transform', { prop: 'rotate', value: { degree: degree, obj: obj } });
-        this.notify('draw', { prop: 'redrawDownScale' });
         var actionArgs = { action: 'rotate', actionEventArgs: this.editCompleteArgs };
         this.triggerEditCompleteEvent(actionArgs);
         return obj['isRotate'];
@@ -23305,7 +23827,7 @@ var ImageEditor = /** @__PURE__ @class */ (function (_super) {
      * @returns {void}.
      */
     ImageEditor.prototype.export = function (type, fileName, imageQuality) {
-        this.applyShapes();
+        this.manageActiveAction();
         this.notify('export', { prop: 'export', onPropertyChange: false, value: { type: type, fileName: fileName, imgQuality: imageQuality } });
     };
     /**
@@ -23413,6 +23935,17 @@ var ImageEditor = /** @__PURE__ @class */ (function (_super) {
      */
     ImageEditor.prototype.zoom = function (zoomFactor, zoomPoint) {
         this.isZoomBtnClick = true;
+        var prevZoom = this.transform.zoomFactor;
+        if (prevZoom !== 0) {
+            var zoomObj = { previousZoomValue: null };
+            this.notify('transform', { prop: 'getPreviousZoomValue', value: { obj: zoomObj } });
+            prevZoom = zoomObj.previousZoomValue;
+        }
+        if (zoomFactor !== 1 && prevZoom !== 0 && ((prevZoom < 1 && zoomFactor > 1) || (prevZoom > 1 && zoomFactor < 1))) {
+            this.notify('transform', { prop: 'zoom', onPropertyChange: false,
+                value: { zoomFactor: 1, zoomPoint: zoomPoint }
+            });
+        }
         this.notify('transform', { prop: 'zoom', onPropertyChange: false,
             value: { zoomFactor: zoomFactor, zoomPoint: zoomPoint } });
         this.notify('draw', { prop: 'redrawDownScale' });
@@ -23575,10 +24108,12 @@ var ImageEditor = /** @__PURE__ @class */ (function (_super) {
      * @param {string} strokeColor - Specifies the outline color of the text annotation.
      * @param {number} strokeWidth - Specifies the outline stroke width of the text annotation.
      * @param {TransformationCollection[]} transformCollection - Specifies the transform collection of the text annotation.
+     * @param {boolean} underline - Specifies whether the text should be underlined.
+     * @param {boolean} strikethrough - Specifies whether the text should have a strikethrough.
      * @returns {boolean}.
      *
      */
-    ImageEditor.prototype.drawText = function (x, y, text, fontFamily, fontSize, bold, italic, color, isSelected, degree, fillColor, strokeColor, strokeWidth, transformCollection) {
+    ImageEditor.prototype.drawText = function (x, y, text, fontFamily, fontSize, bold, italic, color, isSelected, degree, fillColor, strokeColor, strokeWidth, transformCollection, underline, strikethrough) {
         var isText = false;
         var isPointsInRange = this.allowShape(x, y);
         if (!this.disabled && this.isImageLoaded && (isPointsInRange || (isNullOrUndefined(x) && isNullOrUndefined(y)))) {
@@ -23586,7 +24121,7 @@ var ImageEditor = /** @__PURE__ @class */ (function (_super) {
             this.manageActiveAction();
             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, degree: degree, fillColor: fillColor,
-                    outlineColor: strokeColor, outlineWidth: strokeWidth, transformCollection: transformCollection } });
+                    outlineColor: strokeColor, outlineWidth: strokeWidth, transformCollection: transformCollection, underline: underline, strikethrough: strikethrough } });
             this.editCompleted();
         }
         return isText;
@@ -23611,14 +24146,27 @@ var ImageEditor = /** @__PURE__ @class */ (function (_super) {
         var isImage = false;
         var isPointsInRange = this.allowShape(x, y);
         if (!this.disabled && this.isImageLoaded && (isPointsInRange || (isNullOrUndefined(x) && isNullOrUndefined(y)))) {
+            if (typeof data === 'string') {
+                try {
+                    var request = new XMLHttpRequest();
+                    var isBlob = data.indexOf('blob:') === 0;
+                    request.open(isBlob ? 'GET' : 'HEAD', data, false);
+                    request.send();
+                    isImage = request.status >= 200 && request.status < 300;
+                }
+                catch (error) {
+                    isImage = false;
+                }
+            }
+            else if (data instanceof ImageData) {
+                if (data.data instanceof Uint8ClampedArray && data.width > 0 && data.height > 0) {
+                    isImage = true;
+                }
+            }
             this.manageActiveAction();
-            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, opacity: opacity, isSelected: isSelected } });
             this.editCompleted();
-            if (this.objColl.length > length_1) {
-                isImage = true;
-            }
         }
         return isImage;
     };
@@ -23743,6 +24291,8 @@ var ImageEditor = /** @__PURE__ @class */ (function (_super) {
         this.applyShapes();
         this.notify('shape', { prop: 'deleteShape', onPropertyChange: false, value: { id: id, isShape: true } });
         this.editCompleted('shape-delete');
+        this.notify('draw', { prop: 'clearOuterCanvas', onPropertyChange: false, value: { context: this.lowerContext } });
+        this.notify('draw', { prop: 'clearOuterCanvas', onPropertyChange: false, value: { context: this.upperContext } });
     };
     /**
      * Get particular shapes details based on id of the shape which is drawn on an image editor.
@@ -23954,6 +24504,7 @@ var ImageEditor = /** @__PURE__ @class */ (function (_super) {
         var isResized = false;
         if (((width.toString()).length <= 4 && (height.toString()).length <= 4) && (!this.isCircleCrop || isAspectRatio)) {
             this.manageActiveAction();
+            this.isPublicMethod = true;
             this.notify('toolbar', { prop: 'resizeClick', value: { bool: false } });
             var destPoints = { startX: this.img.destLeft, startY: this.img.destTop, width: this.img.destWidth,
                 height: this.img.destHeight };
@@ -23989,6 +24540,7 @@ var ImageEditor = /** @__PURE__ @class */ (function (_super) {
             else {
                 this.notify('draw', { prop: 'performCancel', value: { isContextualToolbar: null } });
             }
+            this.isPublicMethod = false;
             this.notify('draw', { prop: 'redrawDownScale' });
         }
         return isResized;
@@ -24493,6 +25045,70 @@ var ImageEditor = /** @__PURE__ @class */ (function (_super) {
         }
     };
     // Toolbar related codes
+    ImageEditor.prototype.scaleToFit = function (imageSettings) {
+        var tempImageSettings = extend({}, imageSettings, {}, true);
+        var viewPortWidth = this.lowerCanvas.clientWidth;
+        var viewPortHeight = this.lowerCanvas.clientHeight;
+        if (imageSettings.width && imageSettings.height && (imageSettings.width > viewPortWidth ||
+            imageSettings.height > viewPortHeight)) {
+            var widthScale = viewPortWidth / imageSettings.width;
+            var heightScale = viewPortHeight / imageSettings.height;
+            var scale = Math.min(widthScale, heightScale);
+            tempImageSettings.width = Math.round(imageSettings.width * scale);
+            tempImageSettings.height = Math.round(imageSettings.height * scale);
+        }
+        else if (imageSettings.width && imageSettings.width > viewPortWidth) {
+            var scale = viewPortWidth / imageSettings.width;
+            tempImageSettings.width = Math.round(imageSettings.width * scale);
+        }
+        else if (imageSettings.height && imageSettings.height > viewPortHeight) {
+            var scale = viewPortHeight / imageSettings.height;
+            tempImageSettings.height = Math.round(imageSettings.height * scale);
+        }
+        return tempImageSettings;
+    };
+    ImageEditor.prototype.setInitialZoomLevel = function (oldImageSettings) {
+        var _this = this;
+        var zoomLevel = 1;
+        var newWidth = this.img.destWidth;
+        var newHeight = this.img.destHeight;
+        var oldWidth = oldImageSettings.width;
+        var oldHeight = oldImageSettings.height;
+        var dimObj = { width: 0, height: 0 };
+        this.notify('transform', { prop: 'calcMaxDimension', onPropertyChange: false,
+            value: { width: this.img.srcWidth, height: this.img.srcHeight, obj: dimObj, isImgShape: null } });
+        while ((newWidth && oldWidth && oldWidth > newWidth) || (newHeight && oldHeight && oldHeight > newHeight)) {
+            newWidth = dimObj['width'] + (dimObj['width'] * 0.025 * zoomLevel);
+            newHeight = dimObj['height'] + (dimObj['height'] * 0.025 * zoomLevel);
+            if (Math.abs(newWidth) >= Math.abs(oldWidth) && Math.abs(newHeight) >= Math.abs(oldHeight)) {
+                break;
+            }
+            zoomLevel++;
+        }
+        if (zoomLevel > 1) {
+            this.isImageLoaded = true;
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            var intervalId_3 = setInterval(function () {
+                if (_this.imageLoaded) {
+                    for (var i = 1; i < zoomLevel; i++) {
+                        if (Math.round(i / 4) < _this.zoomSettings.maxZoomFactor) {
+                            _this.notify('transform', { prop: 'zoomAction', onPropertyChange: false,
+                                value: { zoomFactor: 0.025, zoomPoint: null, isResize: true } });
+                        }
+                        else {
+                            zoomLevel = i;
+                            break;
+                        }
+                    }
+                    _this.setProperties({ zoomSettings: { zoomFactor: Math.round(zoomLevel / 4) } }, true);
+                    _this.notify('transform', { prop: 'setPreviousZoomValue', onPropertyChange: false,
+                        value: { previousZoomValue: _this.zoomSettings.zoomFactor } });
+                    _this.notify('toolbar', { prop: 'enable-disable-btns' });
+                    clearInterval(intervalId_3);
+                }
+            }, 1);
+        }
+    };
     ImageEditor.prototype.resetToolbar = function () {
         if (this.toolbarHeight !== this.tempToolbarHeight && !((isNullOrUndefined(this.toolbar) ||
             (this.toolbar && this.toolbar.length > 0)
@@ -24507,6 +25123,14 @@ var ImageEditor = /** @__PURE__ @class */ (function (_super) {
             this.update();
         }
     };
+    ImageEditor.prototype.setRotateZoom = function () {
+        if (this.transform.zoomFactor > 0) {
+            this.notify('draw', { prop: 'setRotateZoom', onPropertyChange: false, value: { isRotateZoom: true } });
+        }
+        else {
+            this.notify('draw', { prop: 'setRotateZoom', onPropertyChange: false, value: { isRotateZoom: false } });
+        }
+    };
     ImageEditor.prototype.getData = function (isMaskImage) {
         if (isMaskImage) {
             this.resetToolbar();
@@ -25143,6 +25767,11 @@ var ImageEditor = /** @__PURE__ @class */ (function (_super) {
         }
     };
     ImageEditor.prototype.triggerEditCompleteEvent = function (args) {
+        var obj = { bool: false };
+        this.notify('undo-redo', { prop: 'preventEditComplete', value: { obj: obj } });
+        if (obj['bool']) {
+            return;
+        }
         if (args.action === 'shape-insert' && args.actionEventArgs &&
             args.actionEventArgs.currentShapeSettings &&
             args.actionEventArgs.currentShapeSettings.type.toString() === 'Redact') {
@@ -26431,9 +27060,17 @@ var ImageEditor = /** @__PURE__ @class */ (function (_super) {
                 this.notify('crop', { prop: 'calcRatio', onPropertyChange: false,
                     value: { obj: obj_7, 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);
+            var width = this.baseImg.width;
+            var height = this.baseImg.height;
+            if (!this.aspectRatioBaseDimension && this.imageSettings.width && this.imageSettings.height) {
+                var widthRatio = this.baseImg.width / this.imageSettings.width;
+                var heightRatio = this.baseImg.height / this.imageSettings.height;
+                var ratio = (widthRatio + heightRatio) / 2;
+                ratio = ratio < 1 ? 1 : ratio;
+                width = this.imageSettings.width * ratio;
+                height = this.imageSettings.height * ratio;
+            }
+            var dimension = this.getRotatedCanvasDim(width, height, this.transform.straighten);
             this.img.srcWidth = ctx.canvas.width = dimension.width;
             this.img.srcHeight = ctx.canvas.height = dimension.height;
             var x = ctx.canvas.width / 2;
@@ -26441,7 +27078,7 @@ var ImageEditor = /** @__PURE__ @class */ (function (_super) {
             ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
             ctx.translate(x, y);
             ctx.rotate(straighten * Math.PI / 180);
-            ctx.drawImage(this.baseImg, -this.baseImg.width / 2, -this.baseImg.height / 2, this.baseImg.width, this.baseImg.height);
+            ctx.drawImage(this.baseImg, -width / 2, -height / 2, width, height);
             ctx.setTransform(1, 0, 0, 1, 0, 0);
             var obj = { width: 0, height: 0 };
             this.notify('crop', { prop: 'calcRatio', onPropertyChange: false, value: { obj: obj, dimension: { width: ctx.canvas.width, height: ctx.canvas.height } } });
@@ -26759,6 +27396,8 @@ var FileType;
     FileType["Svg"] = "Svg";
     /** The WebP file type. */
     FileType["WebP"] = "WebP";
+    /** The BMP file type. */
+    FileType["Bmp"] = "Bmp";
 })(FileType || (FileType = {}));
 /**
  * An enumeration representing the direction of an image editor operation.
@@ -27135,7 +27774,9 @@ var ToolbarModule = /** @__PURE__ @class */ (function () {
             Path: 'Path',
             Bold: 'Bold',
             Italic: 'Italic',
+            Underline: 'Underline',
             BoldItalic: 'Bold Italic',
+            Strikethrough: 'Strikethrough',
             XSmall: 'X-Small',
             Small: 'Small',
             Medium: 'Medium',
@@ -29209,12 +29850,16 @@ var ToolbarModule = /** @__PURE__ @class */ (function () {
         if (!Browser.isDevice) {
             var obj = { shape: null };
             parent.notify('selection', { prop: 'getCurrentDrawingShape', value: { obj: obj } });
-            if (obj['shape'] !== 'path') {
+            if (obj['shape'] === 'path') {
+                toolbarItems.push({ id: id + '_ok', prefixIcon: 'e-icons e-check', cssClass: 'top-icon e-tick',
+                    tooltipText: this.l10n.getConstant('OK'), align: 'Right', tabIndex: 0, disabled: true });
+            }
+            else {
                 toolbarItems.push({ id: id + '_ok', prefixIcon: 'e-icons e-check', cssClass: 'top-icon e-tick',
                     tooltipText: this.l10n.getConstant('OK'), align: 'Right', tabIndex: 0 });
-                toolbarItems.push({ id: id + '_cancel', prefixIcon: 'e-icons e-close', cssClass: 'top-icon e-save',
-                    tooltipText: this.l10n.getConstant('Cancel'), align: 'Right' });
             }
+            toolbarItems.push({ id: id + '_cancel', prefixIcon: 'e-icons e-close', cssClass: 'top-icon e-save',
+                tooltipText: this.l10n.getConstant('Cancel'), align: 'Right' });
         }
         return toolbarItems;
     };
@@ -29870,6 +30515,14 @@ var ToolbarModule = /** @__PURE__ @class */ (function () {
             toolbarItems.push({ id: id + '_italic', prefixIcon: 'e-icons e-italic', cssClass: 'top-icon e-italic',
                 tooltipText: this.l10n.getConstant('Italic'), align: 'Center' });
         }
+        if (items.indexOf('underline') > -1) {
+            toolbarItems.push({ id: id + '_underline', prefixIcon: 'e-icons e-underline', cssClass: 'top-icon e-underline',
+                tooltipText: this.l10n.getConstant('Underline'), align: 'Center' });
+        }
+        if (items.indexOf('strikethrough') > -1) {
+            toolbarItems.push({ id: id + '_strikethrough', prefixIcon: 'e-icons e-strikethrough', cssClass: 'top-icon e-strikethrough',
+                tooltipText: this.l10n.getConstant('Strikethrough'), align: 'Center' });
+        }
         if (items.indexOf('strokeWidth') > -1) {
             toolbarItems.push({ id: id + '_strokeWidth', cssClass: 'top-icon e-size', tooltipText: this.l10n.getConstant('TextOutlineWidth'), align: 'Center',
                 type: 'Input', template: '<button id="' + id + '_borderWidthBtn"></button>' });
@@ -30352,6 +31005,12 @@ var ToolbarModule = /** @__PURE__ @class */ (function () {
                 }
                 if (Browser.isDevice) {
                     this.initMainToolbar(false, true, true);
+                    var okBtn = document.getElementById(parent.element.id + '_ok');
+                    var drawingObject = { shape: '' };
+                    parent.notify('selection', { prop: 'getCurrentDrawingShape', onPropertyChange: false, value: { obj: drawingObject } });
+                    if (drawingObject['shape'] === 'path' && okBtn) {
+                        okBtn.classList.add('e-overlay');
+                    }
                 }
                 if (parent.activeObj.shape === 'line' || parent.activeObj.shape === 'path') {
                     args.toolbarItems = ['strokeColor', 'strokeWidth', 'z-order', 'duplicate', 'remove'];
@@ -30383,7 +31042,7 @@ var ToolbarModule = /** @__PURE__ @class */ (function () {
                 if (Browser.isDevice) {
                     this.initMainToolbar(false, true, true);
                 }
-                args.toolbarItems = ['fontFamily', 'fontSize', 'fontColor', 'fillColor', 'strokeColor', 'strokeWidth', 'bold', 'italic', 'z-order', 'duplicate', 'remove', 'text'];
+                args.toolbarItems = ['fontFamily', 'fontSize', 'fontColor', 'fillColor', 'strokeColor', 'strokeWidth', 'bold', 'italic', 'underline', 'strikethrough', 'z-order', 'duplicate', 'remove', 'text'];
                 this.initTextToolbarItem(args.toolbarItems);
                 break;
             case 'pen':
@@ -30519,8 +31178,13 @@ var ToolbarModule = /** @__PURE__ @class */ (function () {
         parent.notify('transform', { prop: 'getPanMove', onPropertyChange: false,
             value: { obj: panMoveObj } });
         if (panMoveObj['panMove']) {
+            var currentPannedPoint = extend({}, parent.panPoint.currentPannedPoint, {}, true);
+            parent.panPoint.currentPannedPoint = { x: parent.panPoint.totalPannedClientPoint.x, y: parent.panPoint.totalPannedClientPoint.y };
+            parent.panPoint.totalPannedClientPoint = { x: 0, y: 0 };
+            parent.panPoint.totalPannedInternalPoint = { x: 0, y: 0 };
             parent.notify('transform', { prop: 'drawPannedImage', onPropertyChange: false,
-                value: { xDiff: null, yDiff: null } });
+                value: { xDiff: parent.panPoint.currentPannedPoint.x, yDiff: parent.panPoint.currentPannedPoint.y } });
+            parent.panPoint.currentPannedPoint = currentPannedPoint;
         }
     };
     ToolbarModule.prototype.updateKBDNavigation = function (type) {
@@ -32506,60 +33170,10 @@ var ToolbarModule = /** @__PURE__ @class */ (function () {
                     }
                     break;
                 case 'bold':
-                    parent.notify('selection', { prop: 'setInitialTextEdit', value: { bool: false } });
-                    if (parent.activeObj.textSettings.bold && parent.activeObj.textSettings.italic) {
-                        parent.notify('shape', { prop: 'applyFontStyle', onPropertyChange: false,
-                            value: { item: 'italic' } });
-                    }
-                    else if (parent.activeObj.textSettings.bold && !parent.activeObj.textSettings.italic) {
-                        parent.notify('shape', { prop: 'applyFontStyle', onPropertyChange: false,
-                            value: { item: 'default' } });
-                    }
-                    else if (!parent.activeObj.textSettings.bold && parent.activeObj.textSettings.italic) {
-                        parent.notify('shape', { prop: 'applyFontStyle', onPropertyChange: false,
-                            value: { item: 'bolditalic' } });
-                    }
-                    else if (!parent.activeObj.textSettings.bold && !parent.activeObj.textSettings.italic) {
-                        parent.notify('shape', { prop: 'applyFontStyle', onPropertyChange: false,
-                            value: { item: 'bold' } });
-                    }
-                    if (parent.element.querySelector('#' + id + '_bold').classList.contains('e-selected-btn')) {
-                        parent.element.querySelector('#' + id + '_bold').classList.remove('e-selected-btn');
-                    }
-                    else {
-                        parent.element.querySelector('#' + id + '_bold').classList.add('e-selected-btn');
-                    }
-                    if (parent.activeObj.activePoint.width !== 0 || parent.activeObj.activePoint.height !== 0) {
-                        parent.notify('undo-redo', { prop: 'updateUndoRedoStack', onPropertyChange: false });
-                    }
-                    break;
                 case 'italic':
-                    parent.notify('selection', { prop: 'setInitialTextEdit', value: { bool: false } });
-                    if (parent.activeObj.textSettings.bold && parent.activeObj.textSettings.italic) {
-                        parent.notify('shape', { prop: 'applyFontStyle', onPropertyChange: false,
-                            value: { item: 'bold' } });
-                    }
-                    else if (parent.activeObj.textSettings.bold && !parent.activeObj.textSettings.italic) {
-                        parent.notify('shape', { prop: 'applyFontStyle', onPropertyChange: false,
-                            value: { item: 'bolditalic' } });
-                    }
-                    else if (!parent.activeObj.textSettings.bold && parent.activeObj.textSettings.italic) {
-                        parent.notify('shape', { prop: 'applyFontStyle', onPropertyChange: false,
-                            value: { item: 'default' } });
-                    }
-                    else if (!parent.activeObj.textSettings.bold && !parent.activeObj.textSettings.italic) {
-                        parent.notify('shape', { prop: 'applyFontStyle', onPropertyChange: false,
-                            value: { item: 'italic' } });
-                    }
-                    if (parent.element.querySelector('#' + id + '_italic').classList.contains('e-selected-btn')) {
-                        parent.element.querySelector('#' + id + '_italic').classList.remove('e-selected-btn');
-                    }
-                    else {
-                        parent.element.querySelector('#' + id + '_italic').classList.add('e-selected-btn');
-                    }
-                    if (parent.activeObj.activePoint.width !== 0 || parent.activeObj.activePoint.height !== 0) {
-                        parent.notify('undo-redo', { prop: 'updateUndoRedoStack', onPropertyChange: false });
-                    }
+                case 'underline':
+                case 'strikethrough':
+                    this.toggleStyle(id, type);
                     break;
                 case 'croptransform':
                     this.performCropTransformClick();
@@ -32740,6 +33354,43 @@ var ToolbarModule = /** @__PURE__ @class */ (function () {
             }
         }
     };
+    ToolbarModule.prototype.getFontStyle = function (settings) {
+        var parts = [];
+        if (settings.bold) {
+            parts.push('bold');
+        }
+        if (settings.italic) {
+            parts.push('italic');
+        }
+        if (settings.underline) {
+            parts.push('underline');
+        }
+        if (settings.strikethrough) {
+            parts.push('strikethrough');
+        }
+        return parts.length === 0 ? 'default' : parts.join('');
+    };
+    ToolbarModule.prototype.toggleStyle = function (id, style) {
+        var parent = this.parent;
+        parent.notify('selection', { prop: 'setInitialTextEdit', value: { bool: false } });
+        var settings = parent.activeObj.textSettings;
+        settings[style] = !settings[style];
+        var fontStyle = this.getFontStyle(settings);
+        parent.notify('shape', { prop: 'applyFontStyle', onPropertyChange: false, value: { item: fontStyle } });
+        var button = parent.element.querySelector("#" + id + "_" + style);
+        if (button) {
+            if (button.classList.contains('e-selected-btn')) {
+                button.classList.remove('e-selected-btn');
+            }
+            else {
+                button.classList.add('e-selected-btn');
+            }
+        }
+        if (parent.activeObj.activePoint.width !== 0 ||
+            parent.activeObj.activePoint.height !== 0) {
+            parent.notify('undo-redo', { prop: 'updateUndoRedoStack', onPropertyChange: false });
+        }
+    };
     ToolbarModule.prototype.updateRedactType = function (value) {
         var parent = this.parent;
         parent.activeObj.redactType = value;
@@ -32758,7 +33409,7 @@ var ToolbarModule = /** @__PURE__ @class */ (function () {
         if (parent.currObjType.isFiltered || parent.currObjType.isRedact) {
             parent.okBtn();
         }
-        if (frame && !frame.classList.contains('e-overlay')) {
+        if (!frame || !frame.classList.contains('e-overlay')) {
             zoom = parent.transform.zoomFactor;
             parent.frameDestPoints = extend({}, parent.img, {}, true);
             if (isNullOrUndefined(parent.cxtTbarHeight)) {
@@ -32767,7 +33418,10 @@ var ToolbarModule = /** @__PURE__ @class */ (function () {
                 this.callFrameToolbar();
                 parent.frameObj.type = 'mat';
                 this.callFrameToolbar();
-                parent.cxtTbarHeight = parent.element.querySelector('#' + id + '_customizeWrapper').scrollHeight;
+                var elem = parent.element.querySelector('#' + id + '_customizeWrapper');
+                if (elem) {
+                    parent.cxtTbarHeight = elem.scrollHeight;
+                }
                 parent.frameObj = frameObj;
                 parent.tempFrameObj = tempFrameObj;
             }
@@ -33333,6 +33987,8 @@ var ToolbarModule = /** @__PURE__ @class */ (function () {
             var fontSizeElem = parent.element.querySelector('.e-text-font-size');
             var boldBtn = parent.element.querySelector('#' + id + '_bold');
             var italicBtn = parent.element.querySelector('#' + id + '_italic');
+            var underlineBtn = parent.element.querySelector('#' + id + '_underline');
+            var strikethroughBtn = parent.element.querySelector('#' + id + '_strikethrough');
             if (parent.activeObj.strokeSettings && parent.activeObj.textSettings) {
                 if (isNullOrUndefined(parent.activeObj.strokeSettings.strokeWidth)) {
                     parent.activeObj.strokeSettings.strokeWidth = 2;
@@ -33445,6 +34101,22 @@ var ToolbarModule = /** @__PURE__ @class */ (function () {
                         italicBtn.classList.remove('e-selected-btn');
                     }
                 }
+                if (underlineBtn) {
+                    if (parent.activeObj.textSettings.underline) {
+                        underlineBtn.classList.add('e-selected-btn');
+                    }
+                    else {
+                        underlineBtn.classList.remove('e-selected-btn');
+                    }
+                }
+                if (strikethroughBtn) {
+                    if (parent.activeObj.textSettings.strikethrough) {
+                        strikethroughBtn.classList.add('e-selected-btn');
+                    }
+                    else {
+                        strikethroughBtn.classList.remove('e-selected-btn');
+                    }
+                }
                 if (strokeWidthElem) {
                     var width = parent.activeObj.shape === 'text' ? parent.activeObj.strokeSettings.outlineWidth : parent.activeObj.strokeSettings.strokeWidth;
                     var strokeWidth = Math.round(width).toString();
@@ -33460,25 +34132,23 @@ var ToolbarModule = /** @__PURE__ @class */ (function () {
     ToolbarModule.prototype.getStrokeWidth = function (text) {
         var strokeWidth;
         var currentWidth = parseInt(text, 10) / 2;
-        switch (currentWidth) {
-            case 0:
-                strokeWidth = this.l10n.getConstant('NoOutline');
-                break;
-            case 1:
-                strokeWidth = this.l10n.getConstant('XSmall');
-                break;
-            case 2:
-                strokeWidth = this.l10n.getConstant('Small');
-                break;
-            case 3:
-                strokeWidth = this.l10n.getConstant('Medium');
-                break;
-            case 4:
-                strokeWidth = this.l10n.getConstant('Large');
-                break;
-            case 5:
-                strokeWidth = this.l10n.getConstant('XLarge');
-                break;
+        if (currentWidth === 0) {
+            strokeWidth = this.l10n.getConstant('NoOutline');
+        }
+        else if (currentWidth > 0 && currentWidth <= 1) {
+            strokeWidth = this.l10n.getConstant('XSmall');
+        }
+        else if (currentWidth > 1 && currentWidth <= 2) {
+            strokeWidth = this.l10n.getConstant('Small');
+        }
+        else if (currentWidth > 2 && currentWidth <= 3) {
+            strokeWidth = this.l10n.getConstant('Medium');
+        }
+        else if (currentWidth > 3 && currentWidth <= 4) {
+            strokeWidth = this.l10n.getConstant('Large');
+        }
+        else {
+            strokeWidth = this.l10n.getConstant('XLarge');
         }
         return strokeWidth;
     };