@syncfusion/ej2-image-editor 29.2.5 → 30.1.38

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

@@ -171,7 +171,7 @@ class Crop {
                 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 };
             const temp = this.lowerContext.filter;
             parent.notify('draw', { prop: 'drawImage', onPropertyChange: false });
@@ -943,7 +943,7 @@ class Draw {
         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;
@@ -1289,7 +1289,7 @@ class Draw {
         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;
@@ -2886,7 +2886,7 @@ class Draw {
         const actObj = parent.activeObj;
         const { startX, startY, width, height } = actObj.activePoint;
         const rows = actObj.keyHistory.split('\n');
-        const { fontFamily, bold, italic } = actObj.textSettings;
+        const { fontFamily, bold, italic, underline, strikethrough } = actObj.textSettings;
         let { fontSize } = actObj.textSettings;
         const lHeight = fontSize + fontSize * 0.25;
         const lineHeight = ((lHeight * rows.length) - (fontSize * rows.length)) / rows.length;
@@ -2900,18 +2900,18 @@ class Draw {
         canvasDraw.fillStyle = tempFill;
         for (let i = 0; i < rows.length; i++) {
             const text = rows[i];
-            const yPoint = ((i + 1) * fontSize * 0.85) + (i * lineHeight);
+            const 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;
@@ -2958,6 +2958,14 @@ class Draw {
             else {
                 canvasDraw.strokeText(text, startX + fontSize * 0.1, startY + yPoint);
                 canvasDraw.fillText(text, startX + fontSize * 0.1, startY + yPoint);
+                if (underline) {
+                    const yOffset = yPoint + fontSize * 0.1;
+                    this.drawTextDecoration(canvasDraw, text, startX, startY, yOffset, fontSize, 0.1);
+                }
+                if (strikethrough) {
+                    const yOffset = yPoint - lineHeight - fontSize * 0.025;
+                    this.drawTextDecoration(canvasDraw, text, startX, startY, yOffset, fontSize, 0.1);
+                }
             }
             canvasDraw.lineWidth = tempWidth;
         }
@@ -2967,6 +2975,18 @@ class Draw {
             this.drawOuterSelection(canvasDraw);
         }
     }
+    drawTextDecoration(canvasDraw, text, startX, startY, yOffset, fontSize, horizontalPadding = 0.1) {
+        const tempWidth = canvasDraw.lineWidth;
+        const 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;
+    }
     updateActPoint(degree, canvasDraw) {
         const parent = this.parent;
         const actObj = parent.activeObj;
@@ -3213,6 +3233,14 @@ class Draw {
                 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) {
+                const yOffset = yPoint + (i > 0 ? fontSize * 0.35 : -fontSize * 0.25);
+                this.drawTextDecoration(canvasDraw, text, startX, startY, yOffset, fontSize, 0.15);
+            }
+            if (actObj.textSettings.strikethrough) {
+                const yOffset = yPoint - lineHeight + (i > 0 ? -fontSize * 0.04 : -fontSize * 0.64);
+                this.drawTextDecoration(canvasDraw, text, startX, startY, yOffset, fontSize, 0.1);
+            }
         }
     }
     clearOuterCanvas(context) {
@@ -3262,7 +3290,7 @@ class Draw {
             }
             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;
@@ -3447,6 +3475,7 @@ class Draw {
         const parent = this.parent;
         // eslint-disable-next-line @typescript-eslint/no-this-alias
         const proxy = this;
+        parent.imageLoaded = false;
         parent.baseImg.src = src;
         parent.baseImg.onload = () => {
             parent.imgSrc = src;
@@ -3491,6 +3520,10 @@ class Draw {
                 const action = { action: 'file-open', actionEventArgs: fileOpened };
                 parent.triggerEditCompleteEvent(action);
             }
+            if (this.fileType === 'Bmp') {
+                this.fileType = FileType.Png;
+            }
+            parent.imageLoaded = true;
         };
         parent.baseImg.onerror = () => {
             hideSpinner(parent.element);
@@ -3505,9 +3538,20 @@ class Draw {
     }
     updateBaseImgCanvas() {
         const 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) {
+            const widthRatio = parent.baseImg.width / parent.imageSettings.width;
+            const heightRatio = parent.baseImg.height / parent.imageSettings.height;
+            let 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);
+        }
     }
     updateCanvas(isCropped, isSameDimension) {
         const parent = this.parent;
@@ -3534,7 +3578,7 @@ class Draw {
             value: { width: parent.img.srcWidth, height: parent.img.srcHeight, obj: obj, isImgShape: null } });
         const 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;
@@ -3871,7 +3915,7 @@ class Draw {
         }
         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();
@@ -4357,7 +4401,7 @@ class Draw {
         const 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;
             const temp = parent.img.destWidth;
             parent.img.destWidth = parent.img.destHeight;
             parent.img.destHeight = temp;
@@ -4365,7 +4409,7 @@ class Draw {
         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;
             }
         }
     }
@@ -4823,7 +4867,7 @@ class Draw {
                     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;
                 }
             }
@@ -4856,9 +4900,9 @@ class Draw {
         return __awaiter(this, void 0, void 0, function* () {
             let response;
             try {
-                response = yield fetch(imageUrl, { method: 'HEAD' });
-                const contentLength = parseInt(response.headers.get('content-length') || '0', 10);
-                const imageSizeMB = contentLength;
+                const isBlob = imageUrl.indexOf('blob:') === 0;
+                response = yield fetch(imageUrl, { method: isBlob ? 'GET' : 'HEAD' });
+                const imageSizeMB = isBlob ? (yield response.blob()).size : parseInt(response.headers.get('content-length') || '0', 10);
                 callback(imageSizeMB);
             }
             catch (ex) {
@@ -5060,6 +5104,8 @@ class Draw {
                 this.errorLoading();
                 return;
             }
+            parent.imageSettings = { width: null, height: null };
+            parent.aspectRatioBaseDimension = null;
             showSpinner(parent.element);
             parent.element.style.opacity = '0.5';
             this.inputElem = inputElement;
@@ -5192,7 +5238,7 @@ class Draw {
                 }
                 const panX = (parent.lowerCanvas.clientWidth / 2) - (currObj.activePoint.startX +
                     (currObj.activePoint.width / 2));
-                const panY = ((parent.lowerCanvas.clientHeight + 1) / 2) - (currObj.activePoint.startY +
+                const panY = ((parent.lowerCanvas.clientHeight) / 2) - (currObj.activePoint.startY +
                     (currObj.activePoint.height / 2));
                 if (isNullOrUndefined(parent.activeObj.shape)) {
                     parent.activeObj = extend({}, activeObj, {}, true);
@@ -5966,8 +6012,20 @@ class Draw {
         const point = [];
         const parent = this.parent;
         const degree = parent.transform.degree;
-        const width = parent.baseImg.width;
-        const height = parent.baseImg.height;
+        let width;
+        let height;
+        if (!parent.aspectRatioBaseDimension && parent.imageSettings.width && parent.imageSettings.height) {
+            const widthRatio = parent.baseImg.width / parent.imageSettings.width;
+            const heightRatio = parent.baseImg.height / parent.imageSettings.height;
+            let 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;
+        }
         const obj = { dim: null, width: height, height: width, angle: parent.transform.straighten };
         obj['dim'] = parent.getRotatedCanvasDim(obj['width'], obj['height'], obj['angle']);
         const baseImgCanvasWidth = degree % 90 === 0 && degree % 180 !== 0 ? obj['dim']['width'] : parent.baseImgCanvas.width;
@@ -6239,6 +6297,9 @@ class Draw {
                 }
                 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;
@@ -6292,6 +6353,9 @@ class Export {
             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;
         }
     }
     getModuleName() {
@@ -8899,6 +8963,7 @@ class Selection {
         this.isMouseUp = false;
         this.mouseWheel = 0;
         this.isTransformedShape = false;
+        this.mouseClickPoint = { x: 0, y: 0 };
         this.parent = parent;
         this.addEventListener();
     }
@@ -9069,7 +9134,8 @@ class Selection {
                     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 = [];
@@ -9282,6 +9348,7 @@ class Selection {
         this.isSliderActive = false;
         this.arrowShape = [ArrowheadType.None, ArrowheadType.SolidArrow];
         this.isMouseDown = this.isMouseUp = this.isTransformedShape = false;
+        this.mouseClickPoint = { x: 0, y: 0 };
     }
     performTabAction() {
         const parent = this.parent;
@@ -10457,6 +10524,9 @@ class Selection {
                 endY = destTop + destHeight;
             }
         }
+        if (actPoint.width < 0 && actPoint.height < 0 && this.isCropSelection) {
+            isLimiting = true;
+        }
         if (parent.transform.straighten !== 0) {
             const obj = { isIntersect: null, arr: null };
             parent.notify('draw', { prop: 'updateImgCanvasPoints', onPropertyChange: false });
@@ -11200,7 +11270,7 @@ class Selection {
                     scale = Math.max(width, height);
                     const newScale = this.getScaleRatio(scale);
                     actPoint.endX += newScale.x;
-                    actPoint.endY += newScale.x;
+                    actPoint.endY += newScale.y;
                     if (actPoint.endX > (destLeft + destWidth) ||
                         actPoint.endY > (destTop + destHeight)) {
                         actPoint.endX -= newScale.x;
@@ -11315,7 +11385,7 @@ class Selection {
                     const width = this.upperContext.measureText(parent.activeObj.textSettings.text).width +
                         parent.activeObj.textSettings.fontSize * 0.5;
                     actPoint.endX = actPoint.startX + width;
-                    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);
@@ -12118,6 +12188,7 @@ class Selection {
         let activePoint = parent.activeObj.activePoint;
         const x = imageEditorClickEventArgs.point.x;
         const y = imageEditorClickEventArgs.point.y;
+        this.mouseClickPoint = { x: x, y: y };
         const cursor = parent.activeObj.shape && parent.activeObj.shape === 'text' ?
             parent.cursor : 'default';
         const tempCursor = parent.upperCanvas.style.cursor;
@@ -12168,7 +12239,7 @@ class Selection {
                     value: { isTextBox: null } });
                 const 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;
             }
@@ -12597,6 +12668,12 @@ class Selection {
             const 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';
+                }
+            }
             let activeObjShape;
             const currentDrawingShape = this.currentDrawingShape;
             let dummyClick = false;
@@ -12774,6 +12851,12 @@ class Selection {
                             }
                         }
                         if (!isCropSelection) {
+                            let 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) {
                                 const temp = this.currentDrawingShape;
@@ -12783,6 +12866,9 @@ class Selection {
                             else {
                                 parent.notify('undo-redo', { prop: 'updateUndoRedoStack', onPropertyChange: false });
                             }
+                            if (isDummyClick) {
+                                parent.notify('undo-redo', { prop: 'preventApplyEditComplete', value: { bool: false } });
+                            }
                         }
                     }
                 }
@@ -12846,6 +12932,7 @@ class Selection {
             parent.notify('freehand-draw', { prop: 'resetSelPoints', onPropertyChange: false });
         }
         this.isMouseUp = false;
+        this.mouseClickPoint = { x: 0, y: 0 };
     }
     adjustActObjForLineArrow(obj) {
         let isAdjusted = false;
@@ -13127,7 +13214,8 @@ class Selection {
                 (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) {
@@ -14171,6 +14259,17 @@ class Selection {
         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));
     }
     rgbToHex(r, g, b, a) {
@@ -14322,6 +14421,9 @@ class Selection {
             if (parent.activeObj.textSettings.underline) {
                 fontStyle.push('underline');
             }
+            if (parent.activeObj.textSettings.strikethrough) {
+                fontStyle.push('strikethrough');
+            }
         }
         const { startX, startY, endX, endY, width, height } = parent.activeObj.activePoint;
         const { keyHistory, currIndex, shape, textSettings, strokeSettings, rotatedAngle, imageElement, opacity } = parent.activeObj;
@@ -14509,7 +14611,7 @@ class Selection {
 /* eslint-disable no-constant-condition */
 class Shape {
     constructor(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;
@@ -14552,7 +14654,7 @@ class Shape {
                 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']);
@@ -14716,7 +14818,7 @@ class Shape {
                 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']);
@@ -14811,7 +14913,7 @@ class Shape {
     }
     reset() {
         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;
     }
@@ -14851,8 +14953,8 @@ class Shape {
         const 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);
     }
-    drawText(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);
+    drawText(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);
     }
     initializeShape(type) {
         const parent = this.parent;
@@ -15038,7 +15140,7 @@ class Shape {
             value: { obj: selPointCollObj } });
         this.prevObj.selPointColl = extend([], selPointCollObj['selPointColl'], [], true);
     }
-    drawShapeText(text, fontFamily, fontSize, bold, italic, strokeColor, x, y, isSelected, degree, fillColor, outlineColor, outlineWidth, transformCollection) {
+    drawShapeText(text, fontFamily, fontSize, bold, italic, strokeColor, x, y, isSelected, degree, fillColor, outlineColor, outlineWidth, transformCollection, underline, strikethrough) {
         const parent = this.parent;
         if (!parent.disabled && parent.isImageLoaded) {
             if (parent.currObjType.shape === 'freehanddraw') {
@@ -15053,7 +15155,7 @@ class Shape {
             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();
@@ -15204,7 +15306,7 @@ class Shape {
                 isApplyBtn: null, isCropping: null, isZooming: null, cType: null } });
         parent.notify('toolbar', { prop: 'update-toolbar-items', onPropertyChange: false });
     }
-    initializeTextShape(text, fontFamily, fontSize, bold, italic, strokeColor, fillColor, outlineColor, outlineWidth) {
+    initializeTextShape(text, fontFamily, fontSize, bold, italic, underline, strikethrough, strokeColor, fillColor, outlineColor, outlineWidth) {
         const parent = this.parent;
         this.keyHistory = '';
         parent.upperCanvas.style.display = 'block';
@@ -15215,6 +15317,8 @@ class Shape {
         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;
     }
@@ -15419,6 +15523,7 @@ class Shape {
                 parent.activeObj.textSettings.bold = false;
                 parent.activeObj.textSettings.italic = false;
                 parent.activeObj.textSettings.underline = false;
+                parent.activeObj.textSettings.strikethrough = false;
                 for (let i = 0; i < shapeSettings.fontStyle.length; i++) {
                     switch (shapeSettings.fontStyle[i]) {
                         case 'bold':
@@ -15427,6 +15532,12 @@ class Shape {
                         case 'italic':
                             parent.activeObj.textSettings.italic = true;
                             break;
+                        case 'underline':
+                            parent.activeObj.textSettings.underline = true;
+                            break;
+                        case 'strikethrough':
+                            parent.activeObj.textSettings.strikethrough = true;
+                            break;
                     }
                 }
             }
@@ -15445,7 +15556,7 @@ class Shape {
             this.upperContext.clearRect(0, 0, parent.upperCanvas.width, parent.upperCanvas.height);
             this.updateFontStyles();
             const width = this.upperContext.measureText(this.keyHistory).width + fontSize * 0.5;
-            const height = fontSize;
+            const 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;
@@ -15468,7 +15579,7 @@ class Shape {
         const text = (parent.textArea.style.display === 'block' || parent.textArea.style.display === 'inline-block') ?
             this.getMaxText(true) : this.getMaxText();
         const width = this.upperContext.measureText(text).width + fontSize * 0.5;
-        let height = rows.length * fontSize;
+        let height = rows.length * fontSize * 1.18;
         if (rows.length > 1) {
             height += (fontSize * 0.50);
         }
@@ -15503,7 +15614,7 @@ class Shape {
         parent.textArea.value = '';
         this.updateFontStyles();
         let width = this.upperContext.measureText(parent.activeObj.keyHistory).width + fontSize * 0.5;
-        let height = fontSize;
+        let height = fontSize * 1.18;
         const rows = parent.activeObj.keyHistory.split('\n');
         if (rows.length > 1) {
             height *= rows.length;
@@ -16258,6 +16369,9 @@ class Shape {
         }
         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';
@@ -16804,7 +16918,7 @@ class Shape {
         /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
         const fileData = filesData;
         const 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;
         }
@@ -17151,9 +17265,16 @@ class Shape {
         const obj = { shapeSettingsObj: {} };
         parent.notify('selection', { prop: 'updatePrevShapeSettings', onPropertyChange: false, value: { obj: obj } });
         const shapeSettings = obj['shapeSettingsObj'];
+        let isObjPushed = false;
+        const collLength = parent.objColl.length;
         this.pushActItemIntoObj();
+        if (collLength !== parent.objColl.length) {
+            isObjPushed = true;
+        }
         const objColl = extend([], parent.objColl, [], true);
-        parent.objColl.pop();
+        if (isObjPushed) {
+            parent.objColl.pop();
+        }
         if (parent.textArea.style.display === 'none') {
             this.updateFontRatio(parent.activeObj);
         }
@@ -17162,24 +17283,77 @@ class Shape {
         }
         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;
         }
         const 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;
     }
-    updateFontStyle(item, objColl, fontWeight, fontStyle) {
+    getFontStyleArray(item) {
+        const styleArray = [];
+        const 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;
+    }
+    updateFontStyle(item, objColl, fontWeight, fontStyle, underline, strikethrough) {
         const parent = this.parent;
         const style = parent.textArea.style;
         if (style.display === 'block' || style.display === 'inline-block') {
@@ -17195,9 +17369,43 @@ class Shape {
             else {
                 style.fontStyle = 'normal';
             }
-            const 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';
+            }
+            const 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('');
+            const 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'
+            };
+            const value = key in valueMap ? valueMap[key] : 'default';
             const width = this.getTextAreaWidth(value);
             style.width = width + 'px';
             this.updateObjColl(item, objColl);
@@ -17205,6 +17413,8 @@ class Shape {
         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();
             }
@@ -17298,24 +17508,107 @@ class Shape {
         parent.notify('freehand-draw', { prop: 'getSelPointColl', onPropertyChange: false,
             value: { obj: selPointCollObj } });
         prevObj.selPointColl = extend([], selPointCollObj['selPointColl'], [], true);
-        const tempBold = parent.activeObj.textSettings.bold;
-        const tempItalic = parent.activeObj.textSettings.italic;
+        const textSettings = parent.activeObj.textSettings;
+        const tempBold = textSettings.bold;
+        const tempItalic = textSettings.italic;
+        const tempUnderline = textSettings.underline;
+        const 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);
@@ -17325,8 +17618,10 @@ class Shape {
                 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;
     }
     pushActItemIntoObj() {
         const parent = this.parent;
@@ -17519,24 +17814,107 @@ class Shape {
     }
     getTextAreaWidth(item) {
         const parent = this.parent;
-        const tempBold = parent.activeObj.textSettings.bold;
-        const tempItalic = parent.activeObj.textSettings.italic;
+        const textSettings = parent.activeObj.textSettings;
+        const tempBold = textSettings.bold;
+        const tempItalic = textSettings.italic;
+        const tempUnderline = textSettings.underline;
+        const 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;
         }
         const isTextArea = parent.textArea.style.display === 'none' ? false : true;
@@ -17544,14 +17922,16 @@ class Shape {
         let 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;
     }
     getRedactObjDetails(obj) {
@@ -17630,6 +18010,12 @@ class Shape {
                 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'];
@@ -17929,6 +18315,7 @@ class Shape {
             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' } });
         }
     }
     getMaxText(isTextBox, text, obj) {
@@ -19344,40 +19731,40 @@ class Transform {
             destWidth: parent.img.destWidth, destHeight: parent.img.destHeight };
         if (parent.activeObj.shape) {
             const maxDimension = this.setZoomDimension(-0.1, parent.activeObj);
-            if (!isNullOrUndefined(zoomOut)) {
-                const 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;
-                    }
+            const 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;
-                    const 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;
+                const 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');
                 }
             }
         }
@@ -19413,7 +19800,7 @@ class Transform {
             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;
@@ -20137,7 +20524,7 @@ class Transform {
                 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;
@@ -20246,11 +20633,11 @@ class Transform {
         const object = { toolbarHeight: 0 };
         const parent = this.parent;
         parent.notify('toolbar', { prop: 'getToolbarHeight', value: { obj: object } });
-        let canvasMaxWidth = isImgShape ? parent.element.clientWidth / 3 :
-            parent.element.clientWidth;
-        let canvasMaxHeight = isImgShape ? (parent.element.clientHeight - object['toolbarHeight']) / 3 :
-            parent.element.clientHeight - (object['toolbarHeight']); // 1px border
-        canvasMaxHeight = Browser.isDevice ? canvasMaxHeight - (object['toolbarHeight']) : canvasMaxHeight; // 1px border
+        const newWidth = parent.imageSettings.width ? parent.imageSettings.width : parent.element.clientWidth;
+        const newHeight = parent.imageSettings.height ? parent.imageSettings.height : parent.element.clientHeight - (object['toolbarHeight']);
+        let canvasMaxWidth = isImgShape ? parent.element.clientWidth / 3 : newWidth;
+        let canvasMaxHeight = isImgShape ? (parent.element.clientHeight - object['toolbarHeight']) / 3 : newHeight;
+        canvasMaxHeight = Browser.isDevice ? canvasMaxHeight - (object['toolbarHeight']) : canvasMaxHeight;
         if (Browser.isDevice && parent.isStraightening) {
             const cxtTbar = parent.element.querySelector('#' + parent.element.id + '_contextualToolbarArea');
             canvasMaxHeight -= cxtTbar ? cxtTbar.clientHeight : 0;
@@ -20258,7 +20645,8 @@ class Transform {
         if (!isImgShape && parent.element.clientHeight === 0) {
             canvasMaxHeight = 0;
         }
-        if (isNullOrUndefined(isImgShape)) {
+        const isImageSettings = parent.imageSettings.width && parent.imageSettings.height ? true : false;
+        if (isNullOrUndefined(isImgShape) && !(isImageSettings)) {
             if (canvasMaxWidth > 30) {
                 canvasMaxWidth -= 30;
             }
@@ -20483,6 +20871,9 @@ class Transform {
                 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;
@@ -20528,9 +20919,12 @@ class Transform {
                 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((item) => 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,
@@ -20711,6 +21105,8 @@ class UndoRedo {
         this.tempUndoRedoColl = [];
         this.tempUndoRedoStep = 0;
         this.isPreventing = false;
+        this.preventEditComplete = false;
+        this.preventApplyEditComplete = false;
         this.parent = parent;
         this.addEventListener();
     }
@@ -20792,6 +21188,12 @@ class UndoRedo {
             case 'reset':
                 this.reset();
                 break;
+            case 'preventEditComplete':
+                args.value['obj']['bool'] = this.preventEditComplete;
+                break;
+            case 'preventApplyEditComplete':
+                this.preventApplyEditComplete = args.value['bool'];
+                break;
         }
     }
     getModuleName() {
@@ -20806,6 +21208,7 @@ class UndoRedo {
         this.tempUndoRedoColl = [];
         this.tempUndoRedoStep = 0;
         this.isPreventing = false;
+        this.preventEditComplete = this.preventApplyEditComplete = false;
     }
     refreshUrc(refreshToolbar) {
         const parent = this.parent;
@@ -21517,6 +21920,10 @@ class UndoRedo {
         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);
@@ -21850,6 +22257,7 @@ class UndoRedo {
             const temp = parent.noPushUndo;
             parent.noPushUndo = false;
             parent.isUndoRedoStack = true;
+            this.preventEditComplete = true;
             if (isPenDraw) {
                 const tempTogglePen = parent.togglePen;
                 const obj = { freehandDrawSelectedId: null };
@@ -21878,7 +22286,14 @@ class UndoRedo {
                     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;
         }
     }
 }
@@ -22135,6 +22550,12 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends Component {
         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);
@@ -22236,11 +22657,13 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends Component {
                     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;
@@ -22358,7 +22781,7 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends Component {
                     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 {
@@ -22407,6 +22830,10 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends Component {
         this.element.innerHTML = '';
     }
     initialize() {
+        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'
@@ -22418,7 +22845,7 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends Component {
             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 } });
@@ -22618,7 +23045,7 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends Component {
      * @returns {string[]}.
      */
     getExtensionArray() {
-        const validExtensions = ['jpeg', 'jpg', 'png', 'svg', 'webp'];
+        const validExtensions = ['jpeg', 'jpg', 'png', 'svg', 'webp', 'bmp'];
         const split = this.uploadSettings.allowedExtensions.split(',');
         const extension = [];
         for (const ext of split) {
@@ -22668,6 +23095,9 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends Component {
                 case 'webp':
                     words += ' WebP,';
                     break;
+                case 'bmp':
+                    words += ' BMP,';
+                    break;
             }
             if (i === extension.length - 1) {
                 words = words.slice(0, -1);
@@ -22956,10 +23386,16 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends Component {
      */
     flip(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' } });
+        }
         const actionArgs = { action: 'flip', actionEventArgs: this.editCompleteArgs };
         this.triggerEditCompleteEvent(actionArgs);
     }
@@ -22998,7 +23434,7 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends Component {
      *
      * @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.
@@ -23008,14 +23444,85 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends Component {
     open(data, resetChanges, imageSettings) {
         resetChanges = isNullOrUndefined(resetChanges) ? true : resetChanges;
         if (resetChanges) {
-            if (isNullOrUndefined(data)) {
+            if (isNullOrUndefined(data) || this.disabled) {
                 return;
             }
             const 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)) {
+                const tempImageSettings = 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
+                    const intervalId = setInterval(() => {
+                        if (this.imageLoaded && this.baseImg.width && this.baseImg.height) {
+                            this.setInitialZoomLevel(tempImageSettings);
+                            clearInterval(intervalId);
+                        }
+                    }, 1);
+                }
+                else if (imageSettings.width || imageSettings.height) {
+                    this.notify('draw', { prop: 'open', value: { data: data } });
+                    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                    const intervalId = setInterval(() => {
+                        if (this.imageLoaded && this.baseImg.width && this.baseImg.height) {
+                            this.imageSettings.width = imageSettings.width;
+                            this.imageSettings.height = imageSettings.height;
+                            const originalWidth = this.baseImg.width;
+                            const originalHeight = this.baseImg.height;
+                            let maxValue = '';
+                            let aspectRatioValue;
+                            let value;
+                            let newValue;
+                            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);
+                            clearInterval(intervalId);
+                        }
+                    }, 1);
+                }
+            }
+            else {
+                this.notify('draw', { prop: 'open', value: { data: data } });
+            }
         }
         else {
             this.updateImage(data, imageSettings ? imageSettings.backgroundColor : null);
@@ -23169,11 +23676,18 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends Component {
     rotate(degree) {
         const 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' });
         const actionArgs = { action: 'rotate', actionEventArgs: this.editCompleteArgs };
         this.triggerEditCompleteEvent(actionArgs);
         return obj['isRotate'];
@@ -23191,7 +23705,7 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends Component {
      * @returns {void}.
      */
     export(type, fileName, imageQuality) {
-        this.applyShapes();
+        this.manageActiveAction();
         this.notify('export', { prop: 'export', onPropertyChange: false, value: { type: type, fileName: fileName, imgQuality: imageQuality } });
     }
     /**
@@ -23299,6 +23813,17 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends Component {
      */
     zoom(zoomFactor, zoomPoint) {
         this.isZoomBtnClick = true;
+        let prevZoom = this.transform.zoomFactor;
+        if (prevZoom !== 0) {
+            const 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 }
+            });
+        }
         this.notify('transform', { prop: 'zoom', onPropertyChange: false,
             value: { zoomFactor: zoomFactor, zoomPoint: zoomPoint } });
         this.notify('draw', { prop: 'redrawDownScale' });
@@ -23461,10 +23986,12 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends Component {
      * @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}.
      *
      */
-    drawText(x, y, text, fontFamily, fontSize, bold, italic, color, isSelected, degree, fillColor, strokeColor, strokeWidth, transformCollection) {
+    drawText(x, y, text, fontFamily, fontSize, bold, italic, color, isSelected, degree, fillColor, strokeColor, strokeWidth, transformCollection, underline, strikethrough) {
         let isText = false;
         const isPointsInRange = this.allowShape(x, y);
         if (!this.disabled && this.isImageLoaded && (isPointsInRange || (isNullOrUndefined(x) && isNullOrUndefined(y)))) {
@@ -23472,7 +23999,7 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends Component {
             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;
@@ -23497,14 +24024,27 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends Component {
         let isImage = false;
         const isPointsInRange = this.allowShape(x, y);
         if (!this.disabled && this.isImageLoaded && (isPointsInRange || (isNullOrUndefined(x) && isNullOrUndefined(y)))) {
+            if (typeof data === 'string') {
+                try {
+                    const request = new XMLHttpRequest();
+                    const 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();
-            const length = 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) {
-                isImage = true;
-            }
         }
         return isImage;
     }
@@ -23629,6 +24169,8 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends Component {
         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.
@@ -23840,6 +24382,7 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends Component {
         let 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 } });
             const destPoints = { startX: this.img.destLeft, startY: this.img.destTop, width: this.img.destWidth,
                 height: this.img.destHeight };
@@ -23875,6 +24418,7 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends Component {
             else {
                 this.notify('draw', { prop: 'performCancel', value: { isContextualToolbar: null } });
             }
+            this.isPublicMethod = false;
             this.notify('draw', { prop: 'redrawDownScale' });
         }
         return isResized;
@@ -24378,6 +24922,69 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends Component {
         }
     }
     // Toolbar related codes
+    scaleToFit(imageSettings) {
+        const tempImageSettings = extend({}, imageSettings, {}, true);
+        const viewPortWidth = this.lowerCanvas.clientWidth;
+        const viewPortHeight = this.lowerCanvas.clientHeight;
+        if (imageSettings.width && imageSettings.height && (imageSettings.width > viewPortWidth ||
+            imageSettings.height > viewPortHeight)) {
+            const widthScale = viewPortWidth / imageSettings.width;
+            const heightScale = viewPortHeight / imageSettings.height;
+            const 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) {
+            const scale = viewPortWidth / imageSettings.width;
+            tempImageSettings.width = Math.round(imageSettings.width * scale);
+        }
+        else if (imageSettings.height && imageSettings.height > viewPortHeight) {
+            const scale = viewPortHeight / imageSettings.height;
+            tempImageSettings.height = Math.round(imageSettings.height * scale);
+        }
+        return tempImageSettings;
+    }
+    setInitialZoomLevel(oldImageSettings) {
+        let zoomLevel = 1;
+        let newWidth = this.img.destWidth;
+        let newHeight = this.img.destHeight;
+        const oldWidth = oldImageSettings.width;
+        const oldHeight = oldImageSettings.height;
+        const 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
+            const intervalId = setInterval(() => {
+                if (this.imageLoaded) {
+                    for (let 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);
+                }
+            }, 1);
+        }
+    }
     resetToolbar() {
         if (this.toolbarHeight !== this.tempToolbarHeight && !((isNullOrUndefined(this.toolbar) ||
             (this.toolbar && this.toolbar.length > 0)
@@ -24392,6 +24999,14 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends Component {
             this.update();
         }
     }
+    setRotateZoom() {
+        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 } });
+        }
+    }
     getData(isMaskImage) {
         if (isMaskImage) {
             this.resetToolbar();
@@ -25028,6 +25643,11 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends Component {
         }
     }
     triggerEditCompleteEvent(args) {
+        const 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') {
@@ -26316,9 +26936,17 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends Component {
                 this.notify('crop', { prop: 'calcRatio', onPropertyChange: false,
                     value: { obj: obj, dimension: { width: ctx.canvas.width, height: ctx.canvas.height } } });
             }
-            let dimension;
-            // eslint-disable-next-line prefer-const
-            dimension = this.getRotatedCanvasDim(this.baseImg.width, this.baseImg.height, this.transform.straighten);
+            let width = this.baseImg.width;
+            let height = this.baseImg.height;
+            if (!this.aspectRatioBaseDimension && this.imageSettings.width && this.imageSettings.height) {
+                const widthRatio = this.baseImg.width / this.imageSettings.width;
+                const heightRatio = this.baseImg.height / this.imageSettings.height;
+                let ratio = (widthRatio + heightRatio) / 2;
+                ratio = ratio < 1 ? 1 : ratio;
+                width = this.imageSettings.width * ratio;
+                height = this.imageSettings.height * ratio;
+            }
+            const dimension = this.getRotatedCanvasDim(width, height, this.transform.straighten);
             this.img.srcWidth = ctx.canvas.width = dimension.width;
             this.img.srcHeight = ctx.canvas.height = dimension.height;
             const x = ctx.canvas.width / 2;
@@ -26326,7 +26954,7 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends Component {
             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);
             const obj = { width: 0, height: 0 };
             this.notify('crop', { prop: 'calcRatio', onPropertyChange: false, value: { obj: obj, dimension: { width: ctx.canvas.width, height: ctx.canvas.height } } });
@@ -26642,6 +27270,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.
@@ -27018,7 +27648,9 @@ class ToolbarModule {
             Path: 'Path',
             Bold: 'Bold',
             Italic: 'Italic',
+            Underline: 'Underline',
             BoldItalic: 'Bold Italic',
+            Strikethrough: 'Strikethrough',
             XSmall: 'X-Small',
             Small: 'Small',
             Medium: 'Medium',
@@ -27330,7 +27962,17 @@ class ToolbarModule {
     }
     reset() {
         const parent = this.parent;
-        this.toolbarHeight = 46;
+        if (isNullOrUndefined(parent.toolbar) || (parent.toolbar && parent.toolbar.length > 0) || parent.toolbarTemplate) {
+            if (parent.toolbarTemplate) {
+                this.toolbarHeight = parent.element.querySelector('#' + parent.element.id + '_toolbarArea').clientHeight;
+            }
+            else {
+                this.toolbarHeight = 46;
+            }
+        }
+        else {
+            this.toolbarHeight = 0;
+        }
         parent.prevCurrSelectionPoint = null;
         this.zoomBtnHold = null;
         this.currToolbar = '';
@@ -29082,12 +29724,16 @@ class ToolbarModule {
         if (!Browser.isDevice) {
             const 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;
     }
@@ -29735,6 +30381,14 @@ class ToolbarModule {
             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>' });
@@ -30212,6 +30866,12 @@ class ToolbarModule {
                 }
                 if (Browser.isDevice) {
                     this.initMainToolbar(false, true, true);
+                    const okBtn = document.getElementById(parent.element.id + '_ok');
+                    const 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'];
@@ -30243,7 +30903,7 @@ class ToolbarModule {
                 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':
@@ -30379,8 +31039,13 @@ class ToolbarModule {
         parent.notify('transform', { prop: 'getPanMove', onPropertyChange: false,
             value: { obj: panMoveObj } });
         if (panMoveObj['panMove']) {
+            const 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;
         }
     }
     updateKBDNavigation(type) {
@@ -32354,60 +33019,10 @@ class ToolbarModule {
                     }
                     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();
@@ -32588,6 +33203,43 @@ class ToolbarModule {
             }
         }
     }
+    getFontStyle(settings) {
+        const 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('');
+    }
+    toggleStyle(id, style) {
+        const parent = this.parent;
+        parent.notify('selection', { prop: 'setInitialTextEdit', value: { bool: false } });
+        const settings = parent.activeObj.textSettings;
+        settings[style] = !settings[style];
+        const fontStyle = this.getFontStyle(settings);
+        parent.notify('shape', { prop: 'applyFontStyle', onPropertyChange: false, value: { item: fontStyle } });
+        const 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 });
+        }
+    }
     updateRedactType(value) {
         const parent = this.parent;
         parent.activeObj.redactType = value;
@@ -32606,7 +33258,7 @@ class ToolbarModule {
         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)) {
@@ -32615,7 +33267,10 @@ class ToolbarModule {
                 this.callFrameToolbar();
                 parent.frameObj.type = 'mat';
                 this.callFrameToolbar();
-                parent.cxtTbarHeight = parent.element.querySelector('#' + id + '_customizeWrapper').scrollHeight;
+                const elem = parent.element.querySelector('#' + id + '_customizeWrapper');
+                if (elem) {
+                    parent.cxtTbarHeight = elem.scrollHeight;
+                }
                 parent.frameObj = frameObj;
                 parent.tempFrameObj = tempFrameObj;
             }
@@ -33178,6 +33833,8 @@ class ToolbarModule {
             const fontSizeElem = parent.element.querySelector('.e-text-font-size');
             const boldBtn = parent.element.querySelector('#' + id + '_bold');
             const italicBtn = parent.element.querySelector('#' + id + '_italic');
+            const underlineBtn = parent.element.querySelector('#' + id + '_underline');
+            const strikethroughBtn = parent.element.querySelector('#' + id + '_strikethrough');
             if (parent.activeObj.strokeSettings && parent.activeObj.textSettings) {
                 if (isNullOrUndefined(parent.activeObj.strokeSettings.strokeWidth)) {
                     parent.activeObj.strokeSettings.strokeWidth = 2;
@@ -33290,6 +33947,22 @@ class ToolbarModule {
                         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) {
                     const width = parent.activeObj.shape === 'text' ? parent.activeObj.strokeSettings.outlineWidth : parent.activeObj.strokeSettings.strokeWidth;
                     const strokeWidth = Math.round(width).toString();
@@ -33305,25 +33978,23 @@ class ToolbarModule {
     getStrokeWidth(text) {
         let strokeWidth;
         const 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;
     }