@syncfusion/ej2-image-editor 27.1.50 → 27.1.51

package/dist/global/index.d.ts

@@ -1,6 +1,6 @@
 /*!
 *  filename: index.d.ts
-*  version : 27.1.50
+*  version : 27.1.51
 *  Copyright Syncfusion Inc. 2001 - 2023. 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,8 +1,8 @@
 {
   "_from": "@syncfusion/ej2-image-editor@*",
-  "_id": "@syncfusion/ej2-image-editor@27.1.48",
+  "_id": "@syncfusion/ej2-image-editor@27.1.50",
   "_inBundle": false,
-  "_integrity": "sha512-hQ/OaazltLroOclcaVb3qFLJxr0+WHINAZ/gJWrvlOQn56aFv72Gmkp9Rp8SEnxxoYLVzMH1M7IwXI2HRQxXRw==",
+  "_integrity": "sha512-jbOqBMJzNwFx5r4c2P3xYh1n3aW2br4yKOwC8alxYLnRfDY6d5OTbWY62XEAdW30IqaQHH635RpdhZUkHVtGhg==",
   "_location": "/@syncfusion/ej2-image-editor",
   "_phantomChildren": {},
   "_requested": {
@@ -23,8 +23,8 @@
     "/@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-27.1.48.tgz",
-  "_shasum": "e9c055d422f49914b4b0fbcb79ebe1bd8529fdea",
+  "_resolved": "https://nexus.syncfusioninternal.com/repository/ej2-hotfix-new/@syncfusion/ej2-image-editor/-/ej2-image-editor-27.1.50.tgz",
+  "_shasum": "f84391b62e7a8c4e10937b6603abaeb16e3a66d1",
   "_spec": "@syncfusion/ej2-image-editor@*",
   "_where": "/jenkins/workspace/elease-automation_release_27.1.1/packages/included",
   "author": {
@@ -33,10 +33,10 @@
   "bundleDependencies": false,
   "dependencies": {
     "@syncfusion/ej2-base": "~27.1.50",
-    "@syncfusion/ej2-buttons": "~27.1.50",
-    "@syncfusion/ej2-dropdowns": "~27.1.50",
+    "@syncfusion/ej2-buttons": "~27.1.51",
+    "@syncfusion/ej2-dropdowns": "~27.1.51",
     "@syncfusion/ej2-inputs": "~27.1.50",
-    "@syncfusion/ej2-navigations": "~27.1.50",
+    "@syncfusion/ej2-navigations": "~27.1.51",
     "@syncfusion/ej2-popups": "~27.1.50",
     "@syncfusion/ej2-splitbuttons": "~27.1.50"
   },
@@ -68,7 +68,7 @@
     "url": "https://github.com/syncfusion/ej2-javascript-ui-controls/tree/master/controls/imageeditor"
   },
   "typings": "index.d.ts",
-  "version": "27.1.50",
+  "version": "27.1.51",
   "sideEffects": false,
   "homepage": "https://www.syncfusion.com/javascript-ui-controls"
 }

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

@@ -1094,7 +1094,7 @@ var Draw = /** @class */ (function () {
                 }
                 this.drawArrowHead(canvasDraw, true);
                 this.drawArrowHead(canvasDraw, false);
-                if (actObj.end === 'none') {
+                if (actObj.end === 'none' && actObj.start !== 'circle' && actObj.start !== 'square') {
                     this.shapeLine(canvasDraw, actPoint.startX, actPoint.startY, actPoint.endX, actPoint.endY);
                 }
                 canvasDraw.fillStyle = tempFillStyle;
@@ -1498,9 +1498,10 @@ var Draw = /** @class */ (function () {
         var isStartArrow = actObj.start === 'arrow';
         var isEndArrow = actObj.end === 'arrow';
         var isEndCircleOrSquare = actObj.end === 'circle' || actObj.end === 'square';
+        var isStartCircleOrSquare = actObj.start === 'circle' || actObj.start === 'square';
         if ((start && actObj.triangleDirection === 'left' || actObj.triangleDirection === 'right') &&
-            ((isStartArrow && actObj.end === 'none') || (isStartArrow && !isEndCircleOrSquare)) ||
-            (!start && (isEndArrow && actObj.start === 'none' || !isStartArrow && !isEndCircleOrSquare))) {
+            ((isStartArrow && actObj.end === 'none') || (isStartArrow && !isEndCircleOrSquare && !isStartCircleOrSquare)) ||
+            (!start && (isEndArrow && actObj.start === 'none' || !isStartArrow && !isEndCircleOrSquare && !isStartCircleOrSquare))) {
             this.shapeLine(canvasDraw, startX, startY, endX, endY);
         }
         if ((start && actObj.triangleDirection === 'left') || (!start && actObj.triangleDirection === 'right')) {
@@ -1535,9 +1536,10 @@ var Draw = /** @class */ (function () {
         var angle = Math.atan2(this.dy, this.dx);
         var isStartArrowSolid = actObj.start === 'arrowSolid';
         var isEndArrowSolid = actObj.end === 'arrowSolid';
+        var isStartCircleOrSquare = actObj.start === 'circle' || actObj.start === 'square';
         var isEndCircleOrSquare = actObj.end === 'circle' || actObj.end === 'square';
-        if ((start && (isStartArrowSolid && actObj.end === 'none') || (isStartArrowSolid && !isEndCircleOrSquare)) ||
-            (!start && (isEndArrowSolid && actObj.start === 'none' || !isStartArrowSolid && !isEndCircleOrSquare))) {
+        if ((start && (isStartArrowSolid && actObj.end === 'none') || (isStartArrowSolid && !isEndCircleOrSquare && !isStartCircleOrSquare)) ||
+            (!start && (isEndArrowSolid && actObj.start === 'none' || !isStartArrowSolid && !isEndCircleOrSquare && !isStartCircleOrSquare))) {
             this.shapeLine(canvasDraw, startX, startY, endX, endY);
         }
         if ((start && actObj.triangleDirection === 'left') || (!start && actObj.triangleDirection === 'right')) {

package/src/image-editor/action/undo-redo.js

@@ -1103,12 +1103,22 @@ var UndoRedo = /** @class */ (function () {
         var parent = this.parent;
         for (var i = 0; i < parent.objColl.length; i++) {
             var obj = parent.objColl[i];
+            var isUpdated = false;
             if (obj.shape === 'line' || obj.shape === 'arrow') {
                 if (obj.activePoint.width < 0) {
                     obj.activePoint.width = Math.abs(obj.activePoint.width);
+                    isUpdated = true;
                 }
                 if (obj.activePoint.height < 0) {
                     obj.activePoint.height = Math.abs(obj.activePoint.height);
+                    isUpdated = true;
+                }
+                if (isUpdated) {
+                    var activeObj = extend({}, parent.activeObj, {}, true);
+                    parent.activeObj = obj;
+                    parent.notify('shape', { prop: 'updImgRatioForActObj', onPropertyChange: false });
+                    obj = parent.activeObj;
+                    parent.activeObj = activeObj;
                 }
             }
         }

package/src/image-editor/renderer/toolbar.js

@@ -1390,6 +1390,9 @@ var ToolbarModule = /** @class */ (function () {
                 zOrderElement.classList.remove('e-overlay');
             }
         }
+        if (zOrderElement && (parent.shapeColl.length === 0 || (obj['freehandDrawSelectedId'] && parent.shapeColl.length === 1))) {
+            zOrderElement.classList.add('e-overlay');
+        }
     };
     ToolbarModule.prototype.renderStraightenSlider = function () {
         var parent = this.parent;
@@ -1859,11 +1862,11 @@ var ToolbarModule = /** @class */ (function () {
                 fileSize = Math.floor(blob.size / 1024);
                 if (fileSize > 1000) {
                     var megabytes = fileSize / 1024;
-                    imageNameLabel.innerHTML = 'Image size: ' + megabytes.toFixed(2) + ' MB';
+                    imageNameLabel.innerHTML = this.l10n.getConstant('ImageSize') + ': ' + megabytes.toFixed(2) + ' MB';
                     fileSize = +megabytes.toFixed(2);
                 }
                 else {
-                    imageNameLabel.innerHTML = 'Image size: ' + fileSize.toFixed(2) + ' KB';
+                    imageNameLabel.innerHTML = this.l10n.getConstant('ImageSize') + ': ' + fileSize.toFixed(2) + ' KB';
                     fileSize = +fileSize.toFixed(2);
                 }
                 if (Browser.isDevice) {
@@ -1881,6 +1884,50 @@ var ToolbarModule = /** @class */ (function () {
                 this.fileSize = fileSize;
             }).bind(this), 'image/jpeg', quality);
         }
+        else if (!isNullOrUndefined(fileType) && fileType.toLowerCase() === 'png') {
+            if (Browser.isDevice) {
+                canvas.style.display = 'none';
+            }
+            else {
+                ctx.drawImage(tempCanvas, 0, 0);
+                tempCanvas.toBlob((function (blob) {
+                    fileSize = Math.floor(blob.size / 1024);
+                    if (fileSize > 1000) {
+                        var megabytes = fileSize / 1024;
+                        imageNameLabel.innerHTML = this.l10n.getConstant('ImageSize') + ': ' + megabytes.toFixed(2) + ' MB';
+                        fileSize = +megabytes.toFixed(2);
+                    }
+                    else {
+                        imageNameLabel.innerHTML = this.l10n.getConstant('ImageSize') + ': ' + fileSize.toFixed(2) + ' KB';
+                        fileSize = +fileSize.toFixed(2);
+                    }
+                    this.fileSize = fileSize;
+                }).bind(this), 'image/png', 1);
+            }
+        }
+        else if (!isNullOrUndefined(fileType) && fileType.toLowerCase() === 'svg') {
+            if (Browser.isDevice) {
+                canvas.style.display = 'none';
+            }
+            else {
+                ctx.drawImage(tempCanvas, 0, 0);
+                var svgDataUrl = tempCanvas.toDataURL('image/svg+xml');
+                var base64Data = svgDataUrl.split(',')[1];
+                var binaryStringLength = base64Data.length;
+                var rawByteSize = binaryStringLength;
+                var fileSize_1 = Math.floor(rawByteSize / 1024); // KB
+                if (fileSize_1 > 1000) {
+                    var megabytes = fileSize_1 / 1024; // Convert to MB
+                    imageNameLabel.innerHTML = this.l10n.getConstant('ImageSize') + ': ' + megabytes.toFixed(2) + ' MB';
+                    fileSize_1 = +megabytes.toFixed(2);
+                }
+                else {
+                    imageNameLabel.innerHTML = this.l10n.getConstant('ImageSize') + ': ' + fileSize_1.toFixed(2) + ' KB';
+                    fileSize_1 = +fileSize_1.toFixed(2);
+                }
+            }
+            this.fileSize = fileSize;
+        }
         else {
             if (Browser.isDevice) {
                 canvas.style.display = 'none';