@syncfusion/ej2-image-editor 29.2.4 → 30.1.37

package/dist/global/index.d.ts

@@ -1,6 +1,6 @@
 /*!
 *  filename: index.d.ts
-*  version : 29.2.4
+*  version : 30.1.37
 *  Copyright Syncfusion Inc. 2001 - 2024. All rights reserved.
 *  Use of this code is subject to the terms of our license.
 *  A copy of the current license can be obtained at any time by e-mailing

package/package.json

@@ -1,49 +1,22 @@
 {
-  "_from": "@syncfusion/ej2-image-editor@*",
-  "_id": "@syncfusion/ej2-image-editor@29.1.38",
-  "_inBundle": false,
-  "_integrity": "sha512-f6lymCLrcFDJ3lvUoEp+l8EPQlCF3qeIfqbENVxkd7hqZ7hA6BXe5ehfn83QKZ4klccXIge26HGcc3kYQT9qng==",
-  "_location": "/@syncfusion/ej2-image-editor",
-  "_phantomChildren": {},
-  "_requested": {
-    "type": "range",
-    "registry": true,
-    "raw": "@syncfusion/ej2-image-editor@*",
-    "name": "@syncfusion/ej2-image-editor",
-    "escapedName": "@syncfusion%2fej2-image-editor",
-    "scope": "@syncfusion",
-    "rawSpec": "*",
-    "saveSpec": null,
-    "fetchSpec": "*"
-  },
-  "_requiredBy": [
-    "/",
-    "/@syncfusion/ej2",
-    "/@syncfusion/ej2-angular-image-editor",
-    "/@syncfusion/ej2-react-image-editor",
-    "/@syncfusion/ej2-vue-image-editor"
-  ],
-  "_resolved": "https://nexus.syncfusioninternal.com/repository/ej2-hotfix-new/@syncfusion/ej2-image-editor/-/ej2-image-editor-29.1.38.tgz",
-  "_shasum": "9621a0d2572d12d45fd2571637400702426145b6",
-  "_spec": "@syncfusion/ej2-image-editor@*",
-  "_where": "/jenkins/workspace/elease-automation_release_29.1.1/packages/included",
-  "author": {
-    "name": "Syncfusion Inc."
-  },
-  "bundleDependencies": false,
+  "name": "@syncfusion/ej2-image-editor",
+  "version": "30.1.37",
+  "description": "Essential JS 2 ImageEditor",
+  "author": "Syncfusion Inc.",
+  "license": "SEE LICENSE IN license",
+  "main": "./dist/ej2-image-editor.umd.min.js",
+  "module": "./index.js",
+  "es2015": "./dist/es6/ej2-image-editor.es5.js",
   "dependencies": {
-    "@syncfusion/ej2-base": "~29.2.4",
-    "@syncfusion/ej2-buttons": "~29.2.4",
-    "@syncfusion/ej2-dropdowns": "~29.2.4",
-    "@syncfusion/ej2-inputs": "~29.2.4",
-    "@syncfusion/ej2-navigations": "~29.2.4",
-    "@syncfusion/ej2-popups": "~29.2.4",
-    "@syncfusion/ej2-splitbuttons": "~29.2.4"
+    "@syncfusion/ej2-base": "~30.1.37",
+    "@syncfusion/ej2-buttons": "~30.1.37",
+    "@syncfusion/ej2-dropdowns": "~30.1.37",
+    "@syncfusion/ej2-inputs": "~30.1.37",
+    "@syncfusion/ej2-navigations": "~30.1.37",
+    "@syncfusion/ej2-popups": "~30.1.37",
+    "@syncfusion/ej2-splitbuttons": "~30.1.37"
   },
-  "deprecated": false,
-  "description": "Essential JS 2 ImageEditor",
   "devDependencies": {},
-  "es2015": "./dist/es6/ej2-image-editor.es5.js",
   "keywords": [
     "ej2",
     "syncfusion",
@@ -59,16 +32,11 @@
     "web image editor",
     "image editing software"
   ],
-  "license": "SEE LICENSE IN license",
-  "main": "./dist/ej2-image-editor.umd.min.js",
-  "module": "./index.js",
-  "name": "@syncfusion/ej2-image-editor",
   "repository": {
     "type": "git",
     "url": "https://github.com/syncfusion/ej2-javascript-ui-controls/tree/master/controls/imageeditor"
   },
   "typings": "index.d.ts",
-  "version": "29.2.4",
   "sideEffects": false,
   "homepage": "https://www.syncfusion.com/javascript-ui-controls"
 }

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

@@ -165,7 +165,7 @@ var Crop = /** @class */ (function () {
                 srcTop: (actPoint.startY * ratio.height) - (img.destTop * ratio.height),
                 srcWidth: (actPoint.width * ratio.width), srcHeight: (actPoint.height * ratio.height),
                 destLeft: (parent.lowerCanvas.clientWidth - maxDimension.width) / 2,
-                destTop: (parent.lowerCanvas.clientHeight - maxDimension.height + 1) / 2,
+                destTop: (parent.lowerCanvas.clientHeight - maxDimension.height) / 2,
                 destWidth: maxDimension.width, destHeight: maxDimension.height };
             var temp = this.lowerContext.filter;
             parent.notify('draw', { prop: 'drawImage', onPropertyChange: false });

package/src/image-editor/action/draw.d.ts

@@ -98,6 +98,7 @@ export declare class Draw {
     private arrowBar;
     private shapeImage;
     private shapeText;
+    private drawTextDecoration;
     private updateActPoint;
     private rotateImage;
     private rotateText;

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

@@ -36,6 +36,7 @@ var __generator = (this && this.__generator) || function (thisArg, body) {
 /* eslint-disable no-constant-condition */
 /* eslint-disable radix */
 import { extend, isNullOrUndefined, Browser, getComponent } from '@syncfusion/ej2-base';
+import { FileType } from '../index';
 import { Dialog, hideSpinner, showSpinner } from '@syncfusion/ej2-popups';
 var Draw = /** @class */ (function () {
     function Draw(parent) {
@@ -45,7 +46,7 @@ var Draw = /** @class */ (function () {
         this.isShapeTextInserted = false;
         this.isRotateZoom = false; // To restore zoomed image on selection crop selection
         this.tempStrokeSettings = { strokeColor: '#fff', fillColor: '', strokeWidth: null, outlineColor: '', radius: null, outlineWidth: null }; // restore stroke settings on cancel
-        this.tempTextSettings = { text: 'Enter Text', fontFamily: '', fontSize: null, fontRatio: null, bold: false, italic: false, underline: false }; // restore text settings on cancel
+        this.tempTextSettings = { text: 'Enter Text', fontFamily: '', fontSize: null, fontRatio: null, bold: false, italic: false, underline: false, strikethrough: false }; // restore text settings on cancel
         this.tempAdjValue = ''; // for temp internal slider value
         this.tempFilter = ''; // restore filter style on cancel
         this.tempUndoRedoStep = 0;
@@ -391,7 +392,7 @@ var Draw = /** @class */ (function () {
         this.tempAdjValue = '';
         this.tempStrokeSettings = { strokeColor: '#fff', fillColor: '', strokeWidth: null, radius: null, outlineColor: '', outlineWidth: null };
         this.tempTextSettings =
-            { text: 'Enter Text', fontFamily: this.parent.fontFamily.default, fontSize: null, fontRatio: null, bold: false, italic: false, underline: false };
+            { text: 'Enter Text', fontFamily: this.parent.fontFamily.default, fontSize: null, fontRatio: null, bold: false, italic: false, underline: false, strikethrough: false };
         this.tempUndoRedoStep = this.tempFreehandCounter = this.tempCurrFhdIndex = 0;
         this.tempZoomFactor = null;
         this.isCancelAction = false;
@@ -1988,7 +1989,7 @@ var Draw = /** @class */ (function () {
         var actObj = parent.activeObj;
         var _a = actObj.activePoint, startX = _a.startX, startY = _a.startY, width = _a.width, height = _a.height;
         var rows = actObj.keyHistory.split('\n');
-        var _b = actObj.textSettings, fontFamily = _b.fontFamily, bold = _b.bold, italic = _b.italic;
+        var _b = actObj.textSettings, fontFamily = _b.fontFamily, bold = _b.bold, italic = _b.italic, underline = _b.underline, strikethrough = _b.strikethrough;
         var fontSize = actObj.textSettings.fontSize;
         var lHeight = fontSize + fontSize * 0.25;
         var lineHeight = ((lHeight * rows.length) - (fontSize * rows.length)) / rows.length;
@@ -2002,18 +2003,18 @@ var Draw = /** @class */ (function () {
         canvasDraw.fillStyle = tempFill;
         for (var i = 0; i < rows.length; i++) {
             var text = rows[i];
-            var yPoint = ((i + 1) * fontSize * 0.85) + (i * lineHeight);
+            var yPoint = ((i + 1) * fontSize * 0.9) + (i * lineHeight);
             if (parent.transform.degree === -360) {
                 parent.transform.degree = 0;
             }
             if (parent.transform.degree === 0 || parent.transform.degree === 180) {
                 if (fontSize > height) {
-                    fontSize = actObj.textSettings.fontSize = height - (height * 0.1);
+                    fontSize = actObj.textSettings.fontSize = height / 1.18;
                 }
             }
             else {
                 if (fontSize > width) {
-                    fontSize = actObj.textSettings.fontSize = width - (width * 0.1);
+                    fontSize = actObj.textSettings.fontSize = width / 1.18;
                 }
             }
             canvasDraw.strokeStyle = actObj.strokeSettings.outlineColor;
@@ -2060,6 +2061,14 @@ var Draw = /** @class */ (function () {
             else {
                 canvasDraw.strokeText(text, startX + fontSize * 0.1, startY + yPoint);
                 canvasDraw.fillText(text, startX + fontSize * 0.1, startY + yPoint);
+                if (underline) {
+                    var yOffset = yPoint + fontSize * 0.1;
+                    this.drawTextDecoration(canvasDraw, text, startX, startY, yOffset, fontSize, 0.1);
+                }
+                if (strikethrough) {
+                    var yOffset = yPoint - lineHeight - fontSize * 0.025;
+                    this.drawTextDecoration(canvasDraw, text, startX, startY, yOffset, fontSize, 0.1);
+                }
             }
             canvasDraw.lineWidth = tempWidth;
         }
@@ -2069,6 +2078,19 @@ var Draw = /** @class */ (function () {
             this.drawOuterSelection(canvasDraw);
         }
     };
+    Draw.prototype.drawTextDecoration = function (canvasDraw, text, startX, startY, yOffset, fontSize, horizontalPadding) {
+        if (horizontalPadding === void 0) { horizontalPadding = 0.1; }
+        var tempWidth = canvasDraw.lineWidth;
+        var textWidth = canvasDraw.measureText(text).width;
+        canvasDraw.lineWidth = fontSize * 0.1;
+        canvasDraw.beginPath();
+        canvasDraw.moveTo(startX + fontSize * horizontalPadding, startY + yOffset);
+        canvasDraw.lineTo(startX + textWidth + fontSize * horizontalPadding, startY + yOffset);
+        canvasDraw.strokeStyle = canvasDraw.fillStyle;
+        canvasDraw.stroke();
+        canvasDraw.lineWidth = tempWidth;
+        canvasDraw.strokeStyle = this.parent.activeObj.strokeSettings.outlineColor;
+    };
     Draw.prototype.updateActPoint = function (degree, canvasDraw) {
         var parent = this.parent;
         var actObj = parent.activeObj;
@@ -2319,6 +2341,14 @@ var Draw = /** @class */ (function () {
                 yPoint + (i > 0 ? fontSize * 0.25 : -fontSize * 0.35));
             canvasDraw.fillText(text, startX + fontSize * 0.15, startY +
                 yPoint + (i > 0 ? fontSize * 0.25 : -fontSize * 0.35));
+            if (actObj.textSettings.underline) {
+                var yOffset = yPoint + (i > 0 ? fontSize * 0.35 : -fontSize * 0.25);
+                this.drawTextDecoration(canvasDraw, text, startX, startY, yOffset, fontSize, 0.15);
+            }
+            if (actObj.textSettings.strikethrough) {
+                var yOffset = yPoint - lineHeight + (i > 0 ? -fontSize * 0.04 : -fontSize * 0.64);
+                this.drawTextDecoration(canvasDraw, text, startX, startY, yOffset, fontSize, 0.1);
+            }
         }
     };
     Draw.prototype.clearOuterCanvas = function (context) {
@@ -2368,7 +2398,7 @@ var Draw = /** @class */ (function () {
             }
             parent.img.destLeft = (parent.lowerCanvas.clientWidth - maxDimension.width) / 2;
             if (degree === 0) {
-                parent.img.destTop = (parent.lowerCanvas.clientHeight - maxDimension.height + 1) / 2;
+                parent.img.destTop = (parent.lowerCanvas.clientHeight - maxDimension.height) / 2;
             }
             else {
                 parent.img.destTop = (parent.lowerCanvas.clientHeight - maxDimension.height) / 2;
@@ -2554,6 +2584,7 @@ var Draw = /** @class */ (function () {
         var parent = this.parent;
         // eslint-disable-next-line @typescript-eslint/no-this-alias
         var proxy = this;
+        parent.imageLoaded = false;
         parent.baseImg.src = src;
         parent.baseImg.onload = function () {
             parent.imgSrc = src;
@@ -2598,6 +2629,10 @@ var Draw = /** @class */ (function () {
                 var action = { action: 'file-open', actionEventArgs: fileOpened };
                 parent.triggerEditCompleteEvent(action);
             }
+            if (_this.fileType === 'Bmp') {
+                _this.fileType = FileType.Png;
+            }
+            parent.imageLoaded = true;
         };
         parent.baseImg.onerror = function () {
             hideSpinner(parent.element);
@@ -2612,9 +2647,20 @@ var Draw = /** @class */ (function () {
     };
     Draw.prototype.updateBaseImgCanvas = function () {
         var parent = this.parent;
-        parent.baseImgCanvas.width = parent.baseImg.width;
-        parent.baseImgCanvas.height = parent.baseImg.height;
-        parent.baseImgCanvas.getContext('2d').drawImage(parent.baseImg, 0, 0);
+        if (!parent.aspectRatioBaseDimension && parent.imageSettings.width && parent.imageSettings.height) {
+            var widthRatio = parent.baseImg.width / parent.imageSettings.width;
+            var heightRatio = parent.baseImg.height / parent.imageSettings.height;
+            var ratio = (widthRatio + heightRatio) / 2;
+            ratio = ratio < 1 ? 1 : ratio;
+            parent.baseImgCanvas.width = parent.imageSettings.width * ratio;
+            parent.baseImgCanvas.height = parent.imageSettings.height * ratio;
+            parent.baseImgCanvas.getContext('2d').drawImage(parent.baseImg, 0, 0, parent.baseImgCanvas.width, parent.baseImgCanvas.height);
+        }
+        else {
+            parent.baseImgCanvas.width = parent.baseImg.width;
+            parent.baseImgCanvas.height = parent.baseImg.height;
+            parent.baseImgCanvas.getContext('2d').drawImage(parent.baseImg, 0, 0);
+        }
     };
     Draw.prototype.updateCanvas = function (isCropped, isSameDimension) {
         var parent = this.parent;
@@ -2641,7 +2687,7 @@ var Draw = /** @class */ (function () {
             value: { width: parent.img.srcWidth, height: parent.img.srcHeight, obj: obj, isImgShape: null } });
         var maxDimension = obj;
         parent.img.destLeft = (parent.lowerCanvas.clientWidth - maxDimension.width) / 2;
-        parent.img.destTop = (parent.lowerCanvas.clientHeight - maxDimension.height + 1) / 2;
+        parent.img.destTop = (parent.lowerCanvas.clientHeight - maxDimension.height) / 2;
         this.drawImgToCanvas(maxDimension);
         this.origDim.width = parent.img.destWidth;
         this.origDim.height = parent.img.destHeight;
@@ -2978,7 +3024,7 @@ var Draw = /** @class */ (function () {
         }
         parent.notify('toolbar', { prop: 'destroy-qa-toolbar', onPropertyChange: false });
         this.tempTextSettings = { text: 'Enter Text', fontFamily: parent.fontFamily.default, fontSize: null, fontRatio: null, bold: false,
-            italic: false, underline: false };
+            italic: false, underline: false, strikethrough: false };
         parent.objColl = extend([], this.tempObjColl, [], true);
         parent.pointColl = extend([], this.tempPointColl, [], true);
         this.renderImage();
@@ -3464,7 +3510,7 @@ var Draw = /** @class */ (function () {
         var parent = this.parent;
         if (parent.transform.degree % 90 === 0 && parent.transform.degree % 180 !== 0) {
             parent.img.destLeft = (parent.lowerCanvas.clientWidth - parent.img.destHeight) / 2;
-            parent.img.destTop = (parent.lowerCanvas.clientHeight - parent.img.destWidth + 1) / 2;
+            parent.img.destTop = (parent.lowerCanvas.clientHeight - parent.img.destWidth) / 2;
             var temp = parent.img.destWidth;
             parent.img.destWidth = parent.img.destHeight;
             parent.img.destHeight = temp;
@@ -3472,7 +3518,7 @@ var Draw = /** @class */ (function () {
         else {
             if (isNullOrUndefined(isPreventDimension)) {
                 parent.img.destLeft = (parent.lowerCanvas.clientWidth - parent.img.destWidth) / 2;
-                parent.img.destTop = (parent.lowerCanvas.clientHeight - parent.img.destHeight + 1) / 2;
+                parent.img.destTop = (parent.lowerCanvas.clientHeight - parent.img.destHeight) / 2;
             }
         }
     };
@@ -3931,7 +3977,7 @@ var Draw = /** @class */ (function () {
                     this.fileType = 'Jpeg';
                     fileType = 'jpeg';
                 }
-                if (fileType !== 'jpeg' && fileType !== 'png' && fileType !== 'svg' && fileType !== 'webp') {
+                if (fileType !== 'jpeg' && fileType !== 'png' && fileType !== 'svg' && fileType !== 'webp' && fileType !== 'bmp') {
                     this.fileType = null;
                 }
             }
@@ -3962,24 +4008,33 @@ var Draw = /** @class */ (function () {
     };
     Draw.prototype.getImageSizeFromURL = function (imageUrl, callback) {
         return __awaiter(this, void 0, void 0, function () {
-            var response, contentLength, imageSizeMB, ex_1;
-            return __generator(this, function (_a) {
-                switch (_a.label) {
+            var response, isBlob, imageSizeMB, _a, ex_1;
+            return __generator(this, function (_b) {
+                switch (_b.label) {
                     case 0:
-                        _a.trys.push([0, 2, , 3]);
-                        return [4 /*yield*/, fetch(imageUrl, { method: 'HEAD' })];
+                        _b.trys.push([0, 5, , 6]);
+                        isBlob = imageUrl.indexOf('blob:') === 0;
+                        return [4 /*yield*/, fetch(imageUrl, { method: isBlob ? 'GET' : 'HEAD' })];
                     case 1:
-                        response = _a.sent();
-                        contentLength = parseInt(response.headers.get('content-length') || '0', 10);
-                        imageSizeMB = contentLength;
-                        callback(imageSizeMB);
-                        return [3 /*break*/, 3];
+                        response = _b.sent();
+                        if (!isBlob) return [3 /*break*/, 3];
+                        return [4 /*yield*/, response.blob()];
                     case 2:
-                        ex_1 = _a.sent();
+                        _a = (_b.sent()).size;
+                        return [3 /*break*/, 4];
+                    case 3:
+                        _a = parseInt(response.headers.get('content-length') || '0', 10);
+                        _b.label = 4;
+                    case 4:
+                        imageSizeMB = _a;
+                        callback(imageSizeMB);
+                        return [3 /*break*/, 6];
+                    case 5:
+                        ex_1 = _b.sent();
                         // eslint-disable-next-line no-console
                         console.log(ex_1.message);
-                        return [3 /*break*/, 3];
-                    case 3: return [2 /*return*/];
+                        return [3 /*break*/, 6];
+                    case 6: return [2 /*return*/];
                 }
             });
         });
@@ -4178,6 +4233,8 @@ var Draw = /** @class */ (function () {
                 this.errorLoading();
                 return;
             }
+            parent.imageSettings = { width: null, height: null };
+            parent.aspectRatioBaseDimension = null;
             showSpinner(parent.element);
             parent.element.style.opacity = '0.5';
             this.inputElem = inputElement;
@@ -4310,7 +4367,7 @@ var Draw = /** @class */ (function () {
                 }
                 var panX = (parent.lowerCanvas.clientWidth / 2) - (currObj.activePoint.startX +
                     (currObj.activePoint.width / 2));
-                var panY = ((parent.lowerCanvas.clientHeight + 1) / 2) - (currObj.activePoint.startY +
+                var panY = ((parent.lowerCanvas.clientHeight) / 2) - (currObj.activePoint.startY +
                     (currObj.activePoint.height / 2));
                 if (isNullOrUndefined(parent.activeObj.shape)) {
                     parent.activeObj = extend({}, activeObj, {}, true);
@@ -5090,8 +5147,20 @@ var Draw = /** @class */ (function () {
         var point = [];
         var parent = this.parent;
         var degree = parent.transform.degree;
-        var width = parent.baseImg.width;
-        var height = parent.baseImg.height;
+        var width;
+        var height;
+        if (!parent.aspectRatioBaseDimension && parent.imageSettings.width && parent.imageSettings.height) {
+            var widthRatio = parent.baseImg.width / parent.imageSettings.width;
+            var heightRatio = parent.baseImg.height / parent.imageSettings.height;
+            var ratio = (widthRatio + heightRatio) / 2;
+            ratio = ratio < 1 ? 1 : ratio;
+            width = parent.imageSettings.width * ratio;
+            height = parent.imageSettings.height * ratio;
+        }
+        else {
+            width = parent.baseImg.width;
+            height = parent.baseImg.height;
+        }
         var obj = { dim: null, width: height, height: width, angle: parent.transform.straighten };
         obj['dim'] = parent.getRotatedCanvasDim(obj['width'], obj['height'], obj['angle']);
         var baseImgCanvasWidth = degree % 90 === 0 && degree % 180 !== 0 ? obj['dim']['width'] : parent.baseImgCanvas.width;
@@ -5363,6 +5432,9 @@ var Draw = /** @class */ (function () {
                 }
                 canvasDraw.imageSmoothingEnabled = false;
                 canvasDraw.drawImage(offscreenCanvas, 0, 0, offscreenCanvas.width, offscreenCanvas.height, startX, startY, width, height);
+                if (this.parent.imageSmoothingEnabled) {
+                    canvasDraw.imageSmoothingEnabled = true;
+                }
             }
             obj.redactImage = this.parent.createElement('canvas');
             obj.redactImage.width = offscreenCanvas.width;

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

@@ -39,6 +39,9 @@ var Export = /** @class */ (function () {
             case 'drawAnnotation':
                 this.drawAnnotation(args.value['context'], args.value['ratio']);
                 break;
+            case 'downScaleImgCanvas':
+                this.downScaleImgCanvas(args.value['canvas'], args.value['width'], args.value['height']);
+                break;
         }
     };
     Export.prototype.getModuleName = function () {

package/src/image-editor/action/selection.d.ts

@@ -53,6 +53,7 @@ export declare class Selection {
     private isMouseUp;
     private mouseWheel;
     private isTransformedShape;
+    private mouseClickPoint;
     constructor(parent: ImageEditor);
     destroy(): void;
     private addEventListener;

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

@@ -43,6 +43,7 @@ var Selection = /** @class */ (function () {
         this.isMouseUp = false;
         this.mouseWheel = 0;
         this.isTransformedShape = false;
+        this.mouseClickPoint = { x: 0, y: 0 };
         this.parent = parent;
         this.addEventListener();
     }
@@ -213,7 +214,8 @@ var Selection = /** @class */ (function () {
                     parent.activeObj.textSettings.fontSize = 11;
                     parent.activeObj.keyHistory = 'Enter Text';
                     parent.notify('shape', { prop: 'initializeTextShape', onPropertyChange: false,
-                        value: { text: null, fontFamily: null, fontSize: null, bold: null, italic: null, strokeColor: null } });
+                        value: { text: null, fontFamily: null, fontSize: null, bold: null, italic: null,
+                            underline: null, strikethrough: null, strokeColor: null } });
                 }
                 else if (args.value['shape'] === 'path') {
                     parent.activeObj.pointColl = [];
@@ -426,6 +428,7 @@ var Selection = /** @class */ (function () {
         this.isSliderActive = false;
         this.arrowShape = [ArrowheadType.None, ArrowheadType.SolidArrow];
         this.isMouseDown = this.isMouseUp = this.isTransformedShape = false;
+        this.mouseClickPoint = { x: 0, y: 0 };
     };
     Selection.prototype.performTabAction = function () {
         var parent = this.parent;
@@ -2460,7 +2463,7 @@ var Selection = /** @class */ (function () {
                     var width_2 = this.upperContext.measureText(parent.activeObj.textSettings.text).width +
                         parent.activeObj.textSettings.fontSize * 0.5;
                     actPoint.endX = actPoint.startX + width_2;
-                    actPoint.endY = actPoint.startY + parent.activeObj.textSettings.fontSize;
+                    actPoint.endY = actPoint.startY + (parent.activeObj.textSettings.fontSize * 1.18);
                     actPoint.width = actPoint.endX - actPoint.startX;
                     actPoint.height = actPoint.endY - actPoint.startY;
                     tempActiveObj = extend({}, parent.activeObj, null, true);
@@ -3264,6 +3267,7 @@ var Selection = /** @class */ (function () {
         var activePoint = parent.activeObj.activePoint;
         var x = imageEditorClickEventArgs.point.x;
         var y = imageEditorClickEventArgs.point.y;
+        this.mouseClickPoint = { x: x, y: y };
         var cursor = parent.activeObj.shape && parent.activeObj.shape === 'text' ?
             parent.cursor : 'default';
         var tempCursor = parent.upperCanvas.style.cursor;
@@ -3314,7 +3318,7 @@ var Selection = /** @class */ (function () {
                     value: { isTextBox: null } });
                 var width = this.upperContext.measureText(parent.activeObj.textSettings.text).width + parent.activeObj.textSettings.fontSize * 0.5;
                 activePoint.endX = activePoint.startX + width;
-                activePoint.endY = activePoint.startY + parent.activeObj.textSettings.fontSize;
+                activePoint.endY = activePoint.startY + (parent.activeObj.textSettings.fontSize * 1.18);
                 activePoint.width = activePoint.endX - activePoint.startX;
                 activePoint.height = activePoint.endY - activePoint.startY;
             }
@@ -3743,6 +3747,12 @@ var Selection = /** @class */ (function () {
             var bbox = parent.lowerCanvas.getBoundingClientRect();
             x -= bbox.left;
             y -= bbox.top;
+            if (parent.drawingShape === 'text' && this.mouseDownPoint && this.mouseDownPoint.x === x && this.mouseDownPoint.y === y) {
+                parent.notify('shape', { prop: 'refreshActiveObj', onPropertyChange: false });
+                if (!parent.activeObj.keyHistory) {
+                    parent.activeObj.keyHistory = 'Enter Text';
+                }
+            }
             var activeObjShape = void 0;
             var currentDrawingShape = this.currentDrawingShape;
             var dummyClick = false;
@@ -3920,6 +3930,12 @@ var Selection = /** @class */ (function () {
                             }
                         }
                         if (!isCropSelection_1) {
+                            var isDummyClick = false;
+                            if (Math.round(x) === Math.round(this.mouseClickPoint.x) && Math.round(y) ===
+                                Math.round(this.mouseClickPoint.y)) {
+                                isDummyClick = true;
+                                parent.notify('undo-redo', { prop: 'preventApplyEditComplete', value: { bool: true } });
+                            }
                             this.adjustActObjForLineArrow();
                             if (parent.isShapeDrawing) {
                                 var temp = this.currentDrawingShape;
@@ -3929,6 +3945,9 @@ var Selection = /** @class */ (function () {
                             else {
                                 parent.notify('undo-redo', { prop: 'updateUndoRedoStack', onPropertyChange: false });
                             }
+                            if (isDummyClick) {
+                                parent.notify('undo-redo', { prop: 'preventApplyEditComplete', value: { bool: false } });
+                            }
                         }
                     }
                 }
@@ -3992,6 +4011,7 @@ var Selection = /** @class */ (function () {
             parent.notify('freehand-draw', { prop: 'resetSelPoints', onPropertyChange: false });
         }
         this.isMouseUp = false;
+        this.mouseClickPoint = { x: 0, y: 0 };
     };
     Selection.prototype.adjustActObjForLineArrow = function (obj) {
         var isAdjusted = false;
@@ -4273,7 +4293,8 @@ var Selection = /** @class */ (function () {
                 (obj.textSettings && Math.round(obj.textSettings.fontRatio) !== Math.round(this.tempActiveObj.textSettings.fontRatio)) ||
                 (obj.textSettings && obj.textSettings.bold !== this.tempActiveObj.textSettings.bold) ||
                 (obj.textSettings && obj.textSettings.italic !== this.tempActiveObj.textSettings.italic) ||
-                (obj.textSettings && obj.textSettings.underline !== this.tempActiveObj.textSettings.underline)) {
+                (obj.textSettings && obj.textSettings.underline !== this.tempActiveObj.textSettings.underline) ||
+                (obj.textSettings && obj.textSettings.strikethrough !== this.tempActiveObj.textSettings.strikethrough)) {
                 isApply = true;
             }
             if (this.isInitialTextEdited && !isApply) {
@@ -5317,6 +5338,17 @@ var Selection = /** @class */ (function () {
         else {
             parent.activeObj.textSettings.italic = false;
         }
+        parent.activeObj.textSettings.underline = parent.activeObj.textSettings.strikethrough = false;
+        if (parent.textArea.style.textDecoration === 'underline line-through') {
+            parent.activeObj.textSettings.underline = true;
+            parent.activeObj.textSettings.strikethrough = true;
+        }
+        else if (parent.textArea.style.textDecoration === 'underline') {
+            parent.activeObj.textSettings.underline = true;
+        }
+        else if (parent.textArea.style.textDecoration === 'line-through') {
+            parent.activeObj.textSettings.strikethrough = true;
+        }
         parent.activeObj.textSettings.fontSize = (parseFloat(parent.textArea.style.fontSize));
     };
     Selection.prototype.rgbToHex = function (r, g, b, a) {
@@ -5468,6 +5500,9 @@ var Selection = /** @class */ (function () {
             if (parent.activeObj.textSettings.underline) {
                 fontStyle.push('underline');
             }
+            if (parent.activeObj.textSettings.strikethrough) {
+                fontStyle.push('strikethrough');
+            }
         }
         var _a = parent.activeObj.activePoint, startX = _a.startX, startY = _a.startY, endX = _a.endX, endY = _a.endY, width = _a.width, height = _a.height;
         var _b = parent.activeObj, keyHistory = _b.keyHistory, currIndex = _b.currIndex, shape = _b.shape, textSettings = _b.textSettings, strokeSettings = _b.strokeSettings, rotatedAngle = _b.rotatedAngle, imageElement = _b.imageElement, opacity = _b.opacity;

package/src/image-editor/action/shape.d.ts

@@ -84,6 +84,7 @@ export declare class Shape {
     private panObjColl;
     private updateFontStyles;
     private applyFontStyle;
+    private getFontStyleArray;
     private updateFontStyle;
     private updateArrowRatio;
     private updateArrowSize;