@syncfusion/ej2-image-editor 29.2.4 → 30.1.37

package/src/image-editor/action/shape.js

@@ -3,7 +3,7 @@ import { EventHandler, extend, isNullOrUndefined } from '@syncfusion/ej2-base';
 import { ShapeType, RedactType } from '../index';
 var Shape = /** @class */ (function () {
     function Shape(parent) {
-        this.textSettings = { text: 'Enter Text', fontFamily: '', fontSize: null, fontRatio: null, bold: false, italic: false, underline: false };
+        this.textSettings = { text: 'Enter Text', fontFamily: '', fontSize: null, fontRatio: null, bold: false, italic: false, underline: false, strikethrough: false };
         this.strokeSettings = { strokeColor: '#fff', fillColor: '', strokeWidth: null, radius: null, outlineColor: '', outlineWidth: null };
         this.keyHistory = ''; // text history
         this.preventFrameAnnotation = false;
@@ -46,7 +46,7 @@ var Shape = /** @class */ (function () {
                 this.drawRectangle(args.value['x'], args.value['y'], args.value['width'], args.value['height'], args.value['strokeWidth'], args.value['strokeColor'], args.value['fillColor'], args.value['degree'], args.value['isSelected'], args.value['radius']);
                 break;
             case 'drawText':
-                this.drawText(args.value['x'], args.value['y'], args.value['text'], args.value['fontFamily'], args.value['fontSize'], args.value['bold'], args.value['italic'], args.value['color'], args.value['isSelected'], args.value['degree'], args.value['fillColor'], args.value['outlineColor'], args.value['outlineWidth'], args.value['transformCollection']);
+                this.drawText(args.value['x'], args.value['y'], args.value['text'], args.value['fontFamily'], args.value['fontSize'], args.value['bold'], args.value['italic'], args.value['color'], args.value['isSelected'], args.value['degree'], args.value['fillColor'], args.value['outlineColor'], args.value['outlineWidth'], args.value['transformCollection'], args.value['underline'], args.value['strikethrough']);
                 break;
             case 'redrawActObj':
                 this.redrawActObj(args.value['x'], args.value['y'], args.value['isMouseDown']);
@@ -210,7 +210,7 @@ var Shape = /** @class */ (function () {
                 this.alignTextAreaIntoCanvas();
                 break;
             case 'initializeTextShape':
-                this.initializeTextShape(args.value['text'], args.value['fontFamily'], args.value['fontSize'], args.value['bold'], args.value['italic'], args.value['strokeColor'], args.value['fillColor'], args.value['outlineColor'], args.value['outlineWidth']);
+                this.initializeTextShape(args.value['text'], args.value['fontFamily'], args.value['fontSize'], args.value['bold'], args.value['italic'], args.value['underline'], args.value['strikethrough'], args.value['strokeColor'], args.value['fillColor'], args.value['outlineColor'], args.value['outlineWidth']);
                 break;
             case 'stopPathDrawing':
                 this.stopPathDrawing(args.value['e'], args.value['isApply']);
@@ -305,7 +305,7 @@ var Shape = /** @class */ (function () {
     };
     Shape.prototype.reset = function () {
         this.textSettings =
-            { text: 'Enter Text', fontFamily: this.parent.fontFamily.default, fontSize: null, fontRatio: null, bold: false, italic: false, underline: false };
+            { text: 'Enter Text', fontFamily: this.parent.fontFamily.default, fontSize: null, fontRatio: null, bold: false, italic: false, underline: false, strikethrough: false };
         this.strokeSettings = { strokeColor: '#fff', fillColor: '', strokeWidth: null, radius: null, outlineColor: '', outlineWidth: null };
         this.preventFrameAnnotation = false;
     };
@@ -345,8 +345,8 @@ var Shape = /** @class */ (function () {
         var start = x && y ? { x: x, y: y } : null;
         this.drawShape('redact', null, null, null, start, width, height, null, null, null, null, null, null, null, type, value);
     };
-    Shape.prototype.drawText = function (x, y, text, fontFamily, fontSize, bold, italic, color, isSelected, degree, fillColor, outlineColor, outlineWidth, transformCollection) {
-        this.drawShapeText(text, fontFamily, fontSize, bold, italic, color, x, y, isSelected, degree, fillColor, outlineColor, outlineWidth, transformCollection);
+    Shape.prototype.drawText = function (x, y, text, fontFamily, fontSize, bold, italic, color, isSelected, degree, fillColor, outlineColor, outlineWidth, transformCollection, underline, strikethrough) {
+        this.drawShapeText(text, fontFamily, fontSize, bold, italic, color, x, y, isSelected, degree, fillColor, outlineColor, outlineWidth, transformCollection, underline, strikethrough);
     };
     Shape.prototype.initializeShape = function (type) {
         var parent = this.parent;
@@ -532,7 +532,7 @@ var Shape = /** @class */ (function () {
             value: { obj: selPointCollObj } });
         this.prevObj.selPointColl = extend([], selPointCollObj['selPointColl'], [], true);
     };
-    Shape.prototype.drawShapeText = function (text, fontFamily, fontSize, bold, italic, strokeColor, x, y, isSelected, degree, fillColor, outlineColor, outlineWidth, transformCollection) {
+    Shape.prototype.drawShapeText = function (text, fontFamily, fontSize, bold, italic, strokeColor, x, y, isSelected, degree, fillColor, outlineColor, outlineWidth, transformCollection, underline, strikethrough) {
         var parent = this.parent;
         if (!parent.disabled && parent.isImageLoaded) {
             if (parent.currObjType.shape === 'freehanddraw') {
@@ -547,7 +547,7 @@ var Shape = /** @class */ (function () {
             this.refreshActiveObj();
             parent.activeObj.shape = parent.currObjType.shape = 'text';
             parent.currObjType.isCustomCrop = false;
-            this.initializeTextShape(text, fontFamily, fontSize, bold, italic, strokeColor, fillColor, outlineColor, outlineWidth);
+            this.initializeTextShape(text, fontFamily, fontSize, bold, italic, underline, strikethrough, strokeColor, fillColor, outlineColor, outlineWidth);
             parent.currObjType.isText = parent.currObjType.isInitialText = true;
             if (isNullOrUndefined(parent.activeObj.textSettings.fontSize)) {
                 parent.getFontSizes();
@@ -698,7 +698,7 @@ var Shape = /** @class */ (function () {
                 isApplyBtn: null, isCropping: null, isZooming: null, cType: null } });
         parent.notify('toolbar', { prop: 'update-toolbar-items', onPropertyChange: false });
     };
-    Shape.prototype.initializeTextShape = function (text, fontFamily, fontSize, bold, italic, strokeColor, fillColor, outlineColor, outlineWidth) {
+    Shape.prototype.initializeTextShape = function (text, fontFamily, fontSize, bold, italic, underline, strikethrough, strokeColor, fillColor, outlineColor, outlineWidth) {
         var parent = this.parent;
         this.keyHistory = '';
         parent.upperCanvas.style.display = 'block';
@@ -709,6 +709,8 @@ var Shape = /** @class */ (function () {
         parent.activeObj.textSettings.fontSize = fontSize || parent.activeObj.textSettings.fontSize;
         parent.activeObj.textSettings.bold = bold || parent.activeObj.textSettings.bold;
         parent.activeObj.textSettings.italic = italic || parent.activeObj.textSettings.italic;
+        parent.activeObj.textSettings.underline = underline || parent.activeObj.textSettings.underline;
+        parent.activeObj.textSettings.strikethrough = strikethrough || parent.activeObj.textSettings.strikethrough;
         parent.activeObj.strokeSettings.outlineColor = outlineColor || parent.activeObj.strokeSettings.outlineColor;
         parent.activeObj.strokeSettings.outlineWidth = outlineWidth || parent.activeObj.strokeSettings.outlineWidth;
     };
@@ -913,6 +915,7 @@ var Shape = /** @class */ (function () {
                 parent.activeObj.textSettings.bold = false;
                 parent.activeObj.textSettings.italic = false;
                 parent.activeObj.textSettings.underline = false;
+                parent.activeObj.textSettings.strikethrough = false;
                 for (var i = 0; i < shapeSettings.fontStyle.length; i++) {
                     switch (shapeSettings.fontStyle[i]) {
                         case 'bold':
@@ -921,6 +924,12 @@ var Shape = /** @class */ (function () {
                         case 'italic':
                             parent.activeObj.textSettings.italic = true;
                             break;
+                        case 'underline':
+                            parent.activeObj.textSettings.underline = true;
+                            break;
+                        case 'strikethrough':
+                            parent.activeObj.textSettings.strikethrough = true;
+                            break;
                     }
                 }
             }
@@ -939,7 +948,7 @@ var Shape = /** @class */ (function () {
             this.upperContext.clearRect(0, 0, parent.upperCanvas.width, parent.upperCanvas.height);
             this.updateFontStyles();
             var width = this.upperContext.measureText(this.keyHistory).width + fontSize * 0.5;
-            var height = fontSize;
+            var height = fontSize * 1.18;
             this.upperContext.fillText(this.keyHistory, parent.activeObj.activePoint.startX, parent.activeObj.activePoint.startY + fontSize);
             this.upperContext.clearRect(0, 0, parent.upperCanvas.width, parent.upperCanvas.height);
             parent.currObjType.isText = true;
@@ -962,7 +971,7 @@ var Shape = /** @class */ (function () {
         var text = (parent.textArea.style.display === 'block' || parent.textArea.style.display === 'inline-block') ?
             this.getMaxText(true) : this.getMaxText();
         var width = this.upperContext.measureText(text).width + fontSize * 0.5;
-        var height = rows.length * fontSize;
+        var height = rows.length * fontSize * 1.18;
         if (rows.length > 1) {
             height += (fontSize * 0.50);
         }
@@ -997,7 +1006,7 @@ var Shape = /** @class */ (function () {
         parent.textArea.value = '';
         this.updateFontStyles();
         var width = this.upperContext.measureText(parent.activeObj.keyHistory).width + fontSize * 0.5;
-        var height = fontSize;
+        var height = fontSize * 1.18;
         var rows = parent.activeObj.keyHistory.split('\n');
         if (rows.length > 1) {
             height *= rows.length;
@@ -1752,6 +1761,9 @@ var Shape = /** @class */ (function () {
         }
         parent.textArea.style.fontWeight = actObj.textSettings.bold ? 'bold' : 'normal';
         parent.textArea.style.fontStyle = actObj.textSettings.italic ? 'italic' : 'normal';
+        parent.textArea.style.textDecoration = (actObj.textSettings.underline && actObj.textSettings.strikethrough) ? 'underline line-through' :
+            (actObj.textSettings.underline) ? 'underline' :
+                (actObj.textSettings.strikethrough) ? 'line-through' : 'none';
         parent.textArea.style.border = '2px solid ' + parent.themeColl[parent.theme]['primaryColor'];
         parent.textArea.value = actObj.keyHistory;
         parent.textArea.style.overflow = 'hidden';
@@ -2298,7 +2310,7 @@ var Shape = /** @class */ (function () {
         /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
         var fileData = filesData;
         var fileExtension = fileData.name && fileData.name.split('.').pop().toLowerCase();
-        if (fileExtension && ['jpg', 'jpeg', 'png', 'svg', 'webp'].indexOf(fileExtension) === -1) {
+        if (fileExtension && ['jpg', 'jpeg', 'png', 'svg', 'webp', 'bmp'].indexOf(fileExtension) === -1) {
             this.refreshActiveObj();
             return;
         }
@@ -2645,9 +2657,16 @@ var Shape = /** @class */ (function () {
         var obj = { shapeSettingsObj: {} };
         parent.notify('selection', { prop: 'updatePrevShapeSettings', onPropertyChange: false, value: { obj: obj } });
         var shapeSettings = obj['shapeSettingsObj'];
+        var isObjPushed = false;
+        var collLength = parent.objColl.length;
         this.pushActItemIntoObj();
+        if (collLength !== parent.objColl.length) {
+            isObjPushed = true;
+        }
         var objColl = extend([], parent.objColl, [], true);
-        parent.objColl.pop();
+        if (isObjPushed) {
+            parent.objColl.pop();
+        }
         if (parent.textArea.style.display === 'none') {
             this.updateFontRatio(parent.activeObj);
         }
@@ -2656,24 +2675,77 @@ var Shape = /** @class */ (function () {
         }
         switch (item) {
             case 'default':
-                this.updateFontStyle(item, objColl, 'normal', 'normal');
+                this.updateFontStyle(item, objColl, 'normal', 'normal', false, false);
                 break;
             case 'bold':
-                this.updateFontStyle(item, objColl, 'bold', 'normal');
+                this.updateFontStyle(item, objColl, 'bold', 'normal', false, false);
                 break;
             case 'italic':
-                this.updateFontStyle(item, objColl, 'normal', 'italic');
+                this.updateFontStyle(item, objColl, 'normal', 'italic', false, false);
                 break;
             case 'bolditalic':
-                this.updateFontStyle(item, objColl, 'bold', 'italic');
+                this.updateFontStyle(item, objColl, 'bold', 'italic', false, false);
+                break;
+            case 'underline':
+                this.updateFontStyle(item, objColl, 'normal', 'normal', true, false);
+                break;
+            case 'boldunderline':
+                this.updateFontStyle(item, objColl, 'bold', 'normal', true, false);
+                break;
+            case 'italicunderline':
+                this.updateFontStyle(item, objColl, 'normal', 'italic', true, false);
+                break;
+            case 'bolditalicunderline':
+                this.updateFontStyle(item, objColl, 'bold', 'italic', true, false);
+                break;
+            case 'strikethrough':
+                this.updateFontStyle(item, objColl, 'normal', 'normal', false, true);
+                break;
+            case 'boldstrikethrough':
+                this.updateFontStyle(item, objColl, 'bold', 'normal', false, true);
+                break;
+            case 'italicstrikethrough':
+                this.updateFontStyle(item, objColl, 'normal', 'italic', false, true);
+                break;
+            case 'underlinestrikethrough':
+                this.updateFontStyle(item, objColl, 'normal', 'normal', true, true);
+                break;
+            case 'bolditalicstrikethrough':
+                this.updateFontStyle(item, objColl, 'bold', 'italic', false, true);
+                break;
+            case 'boldunderlinestrikethrough':
+                this.updateFontStyle(item, objColl, 'bold', 'normal', true, true);
+                break;
+            case 'italicunderlinestrikethrough':
+                this.updateFontStyle(item, objColl, 'normal', 'italic', true, true);
+                break;
+            case 'bolditalicunderlinestrikethrough':
+                this.updateFontStyle(item, objColl, 'bold', 'italic', true, true);
                 break;
         }
         var shapeChangedArgs = { action: 'font-style', currentShapeSettings: extend({}, shapeSettings, {}, true) };
-        shapeChangedArgs.currentShapeSettings.fontStyle = [item];
+        shapeChangedArgs.currentShapeSettings.fontStyle = this.getFontStyleArray(item);
         parent.trigger('shapeChange', shapeChangedArgs);
         parent.editCompleteArgs = shapeChangedArgs;
     };
-    Shape.prototype.updateFontStyle = function (item, objColl, fontWeight, fontStyle) {
+    Shape.prototype.getFontStyleArray = function (item) {
+        var styleArray = [];
+        var lowerItem = item.toLowerCase();
+        if (lowerItem.indexOf('bold') > -1) {
+            styleArray.push('bold');
+        }
+        if (lowerItem.indexOf('italic') > -1) {
+            styleArray.push('italic');
+        }
+        if (lowerItem.indexOf('underline') > -1) {
+            styleArray.push('underline');
+        }
+        if (lowerItem.indexOf('strikethrough') > -1) {
+            styleArray.push('strikethrough');
+        }
+        return styleArray;
+    };
+    Shape.prototype.updateFontStyle = function (item, objColl, fontWeight, fontStyle, underline, strikethrough) {
         var parent = this.parent;
         var style = parent.textArea.style;
         if (style.display === 'block' || style.display === 'inline-block') {
@@ -2689,9 +2761,43 @@ var Shape = /** @class */ (function () {
             else {
                 style.fontStyle = 'normal';
             }
-            var value = (style.fontWeight === 'normal' && style.fontStyle === 'normal' ? 'default' :
-                (style.fontWeight === 'bold' && style.fontStyle === 'normal' ? 'bold' :
-                    (style.fontWeight === 'normal' && style.fontStyle === 'italic' ? 'italic' : 'bolditalic')));
+            if (underline && strikethrough) {
+                style.textDecoration = 'underline line-through';
+            }
+            else if (strikethrough) {
+                style.textDecoration = 'line-through';
+            }
+            else if (underline) {
+                style.textDecoration = 'underline';
+            }
+            else {
+                style.textDecoration = 'none';
+            }
+            var key = [
+                style.fontWeight === 'bold' ? 'bold' : '',
+                style.fontStyle === 'italic' ? 'italic' : '',
+                typeof style.textDecoration === 'string' && style.textDecoration.indexOf('underline') > -1 ? 'underline' : '',
+                typeof style.textDecoration === 'string' && style.textDecoration.indexOf('line-through') > -1 ? 'strikethrough' : ''
+            ].filter(Boolean).join('');
+            var valueMap = {
+                '': 'default',
+                bold: 'bold',
+                italic: 'italic',
+                underline: 'underline',
+                strikethrough: 'strikethrough',
+                bolditalic: 'bolditalic',
+                boldunderline: 'boldunderline',
+                boldstrikethrough: 'boldstrikethrough',
+                italicunderline: 'italicunderline',
+                italicstrikethrough: 'italicstrikethrough',
+                underlinestrikethrough: 'underlinestrikethrough',
+                bolditalicunderline: 'bolditalicunderline',
+                bolditalicstrikethrough: 'bolditalicstrikethrough',
+                boldunderlinestrikethrough: 'boldunderlinestrikethrough',
+                italicunderlinestrikethrough: 'italicunderlinestrikethrough',
+                bolditalicunderlinestrikethrough: 'bolditalicunderlinestrikethrough'
+            };
+            var value = key in valueMap ? valueMap[key] : 'default';
             var width = this.getTextAreaWidth(value);
             style.width = width + 'px';
             this.updateObjColl(item, objColl);
@@ -2699,6 +2805,8 @@ var Shape = /** @class */ (function () {
         else {
             this.textSettings.bold = parent.activeObj.textSettings.bold = fontWeight === 'normal' ? false : true;
             this.textSettings.italic = parent.activeObj.textSettings.italic = fontStyle === 'normal' ? false : true;
+            this.textSettings.underline = parent.activeObj.textSettings.underline = underline ? true : false;
+            this.textSettings.strikethrough = parent.activeObj.textSettings.strikethrough = strikethrough ? true : false;
             if (parent.activeObj.activePoint.width !== 0 || parent.activeObj.activePoint.height !== 0) {
                 this.redrawText();
             }
@@ -2794,24 +2902,107 @@ var Shape = /** @class */ (function () {
         parent.notify('freehand-draw', { prop: 'getSelPointColl', onPropertyChange: false,
             value: { obj: selPointCollObj } });
         prevObj.selPointColl = extend([], selPointCollObj['selPointColl'], [], true);
-        var tempBold = parent.activeObj.textSettings.bold;
-        var tempItalic = parent.activeObj.textSettings.italic;
+        var textSettings = parent.activeObj.textSettings;
+        var tempBold = textSettings.bold;
+        var tempItalic = textSettings.italic;
+        var tempUnderline = textSettings.underline;
+        var tempStrikethrough = textSettings.strikethrough;
         switch (item) {
             case 'default':
-                parent.activeObj.textSettings.bold = false;
-                parent.activeObj.textSettings.italic = false;
+                textSettings.bold = false;
+                textSettings.italic = false;
+                textSettings.underline = false;
+                textSettings.strikethrough = false;
                 break;
             case 'bold':
-                parent.activeObj.textSettings.bold = true;
-                parent.activeObj.textSettings.italic = false;
+                textSettings.bold = true;
+                textSettings.italic = false;
+                textSettings.underline = false;
+                textSettings.strikethrough = false;
                 break;
             case 'italic':
-                parent.activeObj.textSettings.bold = false;
-                parent.activeObj.textSettings.italic = true;
+                textSettings.bold = false;
+                textSettings.italic = true;
+                textSettings.underline = false;
+                textSettings.strikethrough = false;
                 break;
             case 'bolditalic':
-                parent.activeObj.textSettings.bold = true;
-                parent.activeObj.textSettings.italic = true;
+                textSettings.bold = true;
+                textSettings.italic = true;
+                textSettings.underline = false;
+                textSettings.strikethrough = false;
+                break;
+            case 'underline':
+                textSettings.bold = false;
+                textSettings.italic = false;
+                textSettings.underline = true;
+                textSettings.strikethrough = false;
+                break;
+            case 'boldunderline':
+                textSettings.bold = true;
+                textSettings.italic = false;
+                textSettings.underline = true;
+                textSettings.strikethrough = false;
+                break;
+            case 'italicunderline':
+                textSettings.bold = false;
+                textSettings.italic = true;
+                textSettings.underline = true;
+                textSettings.strikethrough = false;
+                break;
+            case 'bolditalicunderline':
+                textSettings.bold = true;
+                textSettings.italic = true;
+                textSettings.underline = true;
+                textSettings.strikethrough = false;
+                break;
+            case 'strikethrough':
+                textSettings.bold = false;
+                textSettings.italic = false;
+                textSettings.underline = false;
+                textSettings.strikethrough = true;
+                break;
+            case 'boldstrikethrough':
+                textSettings.bold = true;
+                textSettings.italic = false;
+                textSettings.underline = false;
+                textSettings.strikethrough = true;
+                break;
+            case 'italicstrikethrough':
+                textSettings.bold = false;
+                textSettings.italic = true;
+                textSettings.underline = false;
+                textSettings.strikethrough = true;
+                break;
+            case 'underlinestrikethrough':
+                textSettings.bold = false;
+                textSettings.italic = false;
+                textSettings.underline = true;
+                textSettings.strikethrough = true;
+                break;
+            case 'bolditalicstrikethrough':
+                textSettings.bold = true;
+                textSettings.italic = true;
+                textSettings.underline = false;
+                textSettings.strikethrough = true;
+                break;
+            case 'boldunderlinestrikethrough':
+                textSettings.bold = true;
+                textSettings.italic = false;
+                textSettings.underline = true;
+                textSettings.strikethrough = true;
+                break;
+            case 'italicunderlinestrikethrough':
+                textSettings.bold = false;
+                textSettings.italic = true;
+                textSettings.underline = true;
+                textSettings.strikethrough = true;
+                break;
+            case 'bolditalicunderlinestrikethrough':
+                textSettings.bold = true;
+                textSettings.italic = true;
+                textSettings.underline = true;
+                textSettings.strikethrough = true;
                 break;
         }
         parent.objColl.push(parent.activeObj);
@@ -2821,8 +3012,10 @@ var Shape = /** @class */ (function () {
                 previousCropObj: prevCropObj, previousText: null,
                 currentText: null, previousFilter: null, isCircleCrop: null } });
         parent.objColl.pop();
-        parent.activeObj.textSettings.bold = tempBold;
-        parent.activeObj.textSettings.italic = tempItalic;
+        textSettings.bold = tempBold;
+        textSettings.italic = tempItalic;
+        textSettings.underline = tempUnderline;
+        textSettings.strikethrough = tempStrikethrough;
     };
     Shape.prototype.pushActItemIntoObj = function () {
         var parent = this.parent;
@@ -3015,24 +3208,107 @@ var Shape = /** @class */ (function () {
     };
     Shape.prototype.getTextAreaWidth = function (item) {
         var parent = this.parent;
-        var tempBold = parent.activeObj.textSettings.bold;
-        var tempItalic = parent.activeObj.textSettings.italic;
+        var textSettings = parent.activeObj.textSettings;
+        var tempBold = textSettings.bold;
+        var tempItalic = textSettings.italic;
+        var tempUnderline = textSettings.underline;
+        var tempStrikethrough = textSettings.strikethrough;
         switch (item) {
             case 'default':
-                parent.activeObj.textSettings.bold = false;
-                parent.activeObj.textSettings.italic = false;
+                textSettings.bold = false;
+                textSettings.italic = false;
+                textSettings.underline = false;
+                textSettings.strikethrough = false;
                 break;
             case 'bold':
-                parent.activeObj.textSettings.bold = true;
-                parent.activeObj.textSettings.italic = false;
+                textSettings.bold = true;
+                textSettings.italic = false;
+                textSettings.underline = false;
+                textSettings.strikethrough = false;
                 break;
             case 'italic':
-                parent.activeObj.textSettings.bold = false;
-                parent.activeObj.textSettings.italic = true;
+                textSettings.bold = false;
+                textSettings.italic = true;
+                textSettings.underline = false;
+                textSettings.strikethrough = false;
                 break;
             case 'bolditalic':
-                parent.activeObj.textSettings.bold = true;
-                parent.activeObj.textSettings.italic = true;
+                textSettings.bold = true;
+                textSettings.italic = true;
+                textSettings.underline = false;
+                textSettings.strikethrough = false;
+                break;
+            case 'underline':
+                textSettings.bold = false;
+                textSettings.italic = false;
+                textSettings.underline = true;
+                textSettings.strikethrough = false;
+                break;
+            case 'boldunderline':
+                textSettings.bold = true;
+                textSettings.italic = false;
+                textSettings.underline = true;
+                textSettings.strikethrough = false;
+                break;
+            case 'italicunderline':
+                textSettings.bold = false;
+                textSettings.italic = true;
+                textSettings.underline = true;
+                textSettings.strikethrough = false;
+                break;
+            case 'bolditalicunderline':
+                textSettings.bold = true;
+                textSettings.italic = true;
+                textSettings.underline = true;
+                textSettings.strikethrough = false;
+                break;
+            case 'strikethrough':
+                textSettings.bold = false;
+                textSettings.italic = false;
+                textSettings.underline = false;
+                textSettings.strikethrough = true;
+                break;
+            case 'boldstrikethrough':
+                textSettings.bold = true;
+                textSettings.italic = false;
+                textSettings.underline = false;
+                textSettings.strikethrough = true;
+                break;
+            case 'italicstrikethrough':
+                textSettings.bold = false;
+                textSettings.italic = true;
+                textSettings.underline = false;
+                textSettings.strikethrough = true;
+                break;
+            case 'underlinestrikethrough':
+                textSettings.bold = false;
+                textSettings.italic = false;
+                textSettings.underline = true;
+                textSettings.strikethrough = true;
+                break;
+            case 'bolditalicstrikethrough':
+                textSettings.bold = true;
+                textSettings.italic = true;
+                textSettings.underline = false;
+                textSettings.strikethrough = true;
+                break;
+            case 'boldunderlinestrikethrough':
+                textSettings.bold = true;
+                textSettings.italic = false;
+                textSettings.underline = true;
+                textSettings.strikethrough = true;
+                break;
+            case 'italicunderlinestrikethrough':
+                textSettings.bold = false;
+                textSettings.italic = true;
+                textSettings.underline = true;
+                textSettings.strikethrough = true;
+                break;
+            case 'bolditalicunderlinestrikethrough':
+                textSettings.bold = true;
+                textSettings.italic = true;
+                textSettings.underline = true;
+                textSettings.strikethrough = true;
                 break;
         }
         var isTextArea = parent.textArea.style.display === 'none' ? false : true;
@@ -3040,14 +3316,16 @@ var Shape = /** @class */ (function () {
         var width;
         if (!isTextArea) {
             width = this.upperContext.measureText(parent.activeObj.keyHistory).width +
-                parent.activeObj.textSettings.fontSize * 0.5;
+                textSettings.fontSize * 0.5;
         }
         else {
             width = this.upperContext.measureText(parent.textArea.value).width +
-                parent.activeObj.textSettings.fontSize * 0.5;
+                textSettings.fontSize * 0.5;
         }
-        parent.activeObj.textSettings.bold = tempBold;
-        parent.activeObj.textSettings.italic = tempItalic;
+        textSettings.bold = tempBold;
+        textSettings.italic = tempItalic;
+        textSettings.underline = tempUnderline;
+        textSettings.strikethrough = tempStrikethrough;
         return width;
     };
     Shape.prototype.getRedactObjDetails = function (obj) {
@@ -3126,6 +3404,12 @@ var Shape = /** @class */ (function () {
                 if (obj.textSettings.italic) {
                     shapeDetails.fontStyle.push('italic');
                 }
+                if (obj.textSettings.underline) {
+                    shapeDetails.fontStyle.push('underline');
+                }
+                if (obj.textSettings.strikethrough) {
+                    shapeDetails.fontStyle.push('strikethrough');
+                }
                 shapeDetails.degree = obj.rotatedAngle * (180 / Math.PI);
                 parent.notify('selection', { prop: 'updateTransColl', onPropertyChange: false, value: { obj: transformObj, object: obj } });
                 shapeDetails.transformCollection = transformObj['coll'];
@@ -3425,6 +3709,7 @@ var Shape = /** @class */ (function () {
             this.lowerContext.clearRect(0, 0, parent.lowerCanvas.width, parent.lowerCanvas.height);
             parent.notify('draw', { prop: 'redrawImgWithObj', onPropertyChange: false });
             parent.notify('toolbar', { prop: 'refresh-main-toolbar', onPropertyChange: false });
+            parent.notify('undo-redo', { prop: 'updateCurrUrc', value: { type: 'ok' } });
         }
     };
     Shape.prototype.getMaxText = function (isTextBox, text, obj) {