@syncfusion/ej2-image-editor 27.1.51 → 27.1.53

package/dist/global/index.d.ts

@@ -1,6 +1,6 @@
 /*!
 *  filename: index.d.ts
-*  version : 27.1.51
+*  version : 27.1.53
 *  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.50",
+  "_id": "@syncfusion/ej2-image-editor@27.1.52",
   "_inBundle": false,
-  "_integrity": "sha512-jbOqBMJzNwFx5r4c2P3xYh1n3aW2br4yKOwC8alxYLnRfDY6d5OTbWY62XEAdW30IqaQHH635RpdhZUkHVtGhg==",
+  "_integrity": "sha512-4y4FiADe4A4Y5hu5mauYQwkHPa+rNYrtX5DFVwWITwzAvinOMwQe9sMg1rMjx3qnpwFDH06C9qR7Qm/kdDgd3Q==",
   "_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.50.tgz",
-  "_shasum": "f84391b62e7a8c4e10937b6603abaeb16e3a66d1",
+  "_resolved": "https://nexus.syncfusioninternal.com/repository/ej2-hotfix-new/@syncfusion/ej2-image-editor/-/ej2-image-editor-27.1.52.tgz",
+  "_shasum": "7cd217a052e3fb179ad0f19d492d7df369c8b183",
   "_spec": "@syncfusion/ej2-image-editor@*",
   "_where": "/jenkins/workspace/elease-automation_release_27.1.1/packages/included",
   "author": {
@@ -32,12 +32,12 @@
   },
   "bundleDependencies": false,
   "dependencies": {
-    "@syncfusion/ej2-base": "~27.1.50",
-    "@syncfusion/ej2-buttons": "~27.1.51",
-    "@syncfusion/ej2-dropdowns": "~27.1.51",
+    "@syncfusion/ej2-base": "~27.1.53",
+    "@syncfusion/ej2-buttons": "~27.1.53",
+    "@syncfusion/ej2-dropdowns": "~27.1.53",
     "@syncfusion/ej2-inputs": "~27.1.50",
-    "@syncfusion/ej2-navigations": "~27.1.51",
-    "@syncfusion/ej2-popups": "~27.1.50",
+    "@syncfusion/ej2-navigations": "~27.1.53",
+    "@syncfusion/ej2-popups": "~27.1.53",
     "@syncfusion/ej2-splitbuttons": "~27.1.50"
   },
   "deprecated": false,
@@ -68,7 +68,7 @@
     "url": "https://github.com/syncfusion/ej2-javascript-ui-controls/tree/master/controls/imageeditor"
   },
   "typings": "index.d.ts",
-  "version": "27.1.51",
+  "version": "27.1.53",
   "sideEffects": false,
   "homepage": "https://www.syncfusion.com/javascript-ui-controls"
 }

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

@@ -82,6 +82,7 @@ export declare class Draw {
     private drawCenterCircles;
     private drawRotationArcLine;
     private drawSquareLines;
+    private drawRoundedRect;
     private drawSelection;
     private shapeCircle;
     private shapeLine;

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

@@ -1386,8 +1386,13 @@ var Draw = /** @class */ (function () {
         var baseRadius = isTempCanvas ? radius * 10 * ((ratio.width + ratio.height) / 2) : radius * 10;
         var adjustedRadius = baseRadius + (baseRadius * zoomFactor);
         if (radius !== null) {
-            // eslint-disable-next-line @typescript-eslint/no-explicit-any
-            canvasDraw.roundRect(startX, startY, width, height, adjustedRadius);
+            if (parent.isSafari) {
+                this.drawRoundedRect(canvasDraw, startX, startY, width, height, adjustedRadius);
+            }
+            else {
+                // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                canvasDraw.roundRect(startX, startY, width, height, adjustedRadius);
+            }
         }
         else {
             canvasDraw.rect(startX, startY, width, height);
@@ -1397,8 +1402,13 @@ var Draw = /** @class */ (function () {
             canvasDraw.fill();
         }
         if (radius !== null) {
-            // eslint-disable-next-line @typescript-eslint/no-explicit-any
-            canvasDraw.roundRect(startX + strokeWidth, startY + strokeWidth, width - (2 * strokeWidth), height - (2 * strokeWidth), adjustedRadius);
+            if (parent.isSafari) {
+                this.drawRoundedRect(canvasDraw, startX + strokeWidth, startY + strokeWidth, width - (2 * strokeWidth), height - (2 * strokeWidth), adjustedRadius);
+            }
+            else {
+                // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                canvasDraw.roundRect(startX + strokeWidth, startY + strokeWidth, width - (2 * strokeWidth), height - (2 * strokeWidth), adjustedRadius);
+            }
         }
         else {
             canvasDraw.rect(startX + strokeWidth, startY + strokeWidth, width - (2 * strokeWidth), height - (2 * strokeWidth));
@@ -1407,6 +1417,15 @@ var Draw = /** @class */ (function () {
         canvasDraw.fill('evenodd');
         canvasDraw.closePath();
     };
+    Draw.prototype.drawRoundedRect = function (canvasDraw, startX, startY, width, height, radius) {
+        var rectRadius = Math.max(0, Math.min(radius, width / 2, height / 2));
+        canvasDraw.moveTo(startX + rectRadius, startY);
+        canvasDraw.arcTo(startX + width, startY, startX + width, startY + height, rectRadius);
+        canvasDraw.arcTo(startX + width, startY + height, startY, startY + height, rectRadius);
+        canvasDraw.arcTo(startX, startY + height, startX, startY, rectRadius);
+        canvasDraw.arcTo(startX, startY, startX + width, startY, rectRadius);
+        canvasDraw.closePath();
+    };
     Draw.prototype.drawSelection = function (horLineWidth, verLineHeight) {
         var parent = this.parent;
         var actObj = parent.activeObj;
@@ -2108,12 +2127,7 @@ var Draw = /** @class */ (function () {
             var coll = actObj.rotateFlipColl[i];
             tempColl.push(coll);
             if (typeof (coll) === 'number') {
-                if (actObj.shapeDegree === 0) {
-                    tempDegree = coll;
-                }
-                else {
-                    tempDegree = coll - actObj.shapeDegree;
-                }
+                tempDegree = coll;
                 if (tempDegree === -450) {
                     tempDegree = -90;
                 }
@@ -2213,12 +2227,7 @@ var Draw = /** @class */ (function () {
             var coll = actObj.rotateFlipColl[i];
             tempColl.push(coll);
             if (typeof (coll) === 'number') {
-                if (actObj.shapeDegree === 0) {
-                    tempDegree = coll;
-                }
-                else {
-                    tempDegree = coll - actObj.shapeDegree;
-                }
+                tempDegree = coll;
                 if (tempDegree === -450) {
                     tempDegree = -90;
                 }
@@ -5165,10 +5174,21 @@ var Draw = /** @class */ (function () {
                     y: sinAngle * (p2.x - center.x) + cosAngle * (p2.y - center.y) + center.y };
                 var newP3 = { x: cosAngle * (p3.x - center.x) - sinAngle * (p3.y - center.y) + center.x,
                     y: sinAngle * (p3.x - center.x) + cosAngle * (p3.y - center.y) + center.y };
+                var tempWidth = isSaveCtx ? canvasDraw.canvas.width : img.destWidth;
+                var tempHeight = isSaveCtx ? canvasDraw.canvas.height : img.destHeight;
+                var rotatedWidth = Math.abs(tempWidth * Math.cos(radians)) + Math.abs(tempHeight * Math.sin(radians));
+                var rotatedHeight = Math.abs(tempWidth * Math.sin(radians)) + Math.abs(tempHeight * Math.cos(radians));
+                straightenCanvas.width = rotatedWidth;
+                straightenCanvas.height = rotatedHeight;
+                straightenCtx.save();
+                straightenCtx.translate(rotatedWidth / 2, rotatedHeight / 2);
+                straightenCtx.rotate(radians);
+                straightenCtx.drawImage(tempCanvas, -tempCanvas.width / 2, -tempCanvas.height / 2);
+                straightenCtx.restore();
                 if (this.parent.activeObj.redactType === 'blur') {
                     offscreenCanvas.width = width;
                     offscreenCanvas.height = height;
-                    offscreenCtx.drawImage(straightenCanvas, newP1.x, newP1.y, newP2.x - newP1.x, newP3.y - newP2.y, 0, 0, width, height);
+                    offscreenCtx.drawImage(straightenCanvas, newP1.x + ((rotatedWidth - tempCanvas.width) / 2), newP1.y + ((rotatedHeight - tempCanvas.height) / 2), newP2.x - newP1.x, newP3.y - newP2.y, 0, 0, width, height);
                 }
                 else {
                     var pixelSize = (obj.redactPixelate / 100) * 20;
@@ -5177,7 +5197,7 @@ var Draw = /** @class */ (function () {
                     }
                     offscreenCanvas.width = Math.ceil(width / pixelSize);
                     offscreenCanvas.height = Math.ceil(height / pixelSize);
-                    offscreenCtx.drawImage(straightenCanvas, newP1.x, newP1.y, newP2.x - newP1.x, newP3.y - newP2.y, 0, 0, offscreenCanvas.width, offscreenCanvas.height);
+                    offscreenCtx.drawImage(straightenCanvas, newP1.x + ((rotatedWidth - tempCanvas.width) / 2), newP1.y + ((rotatedHeight - tempCanvas.height) / 2), newP2.x - newP1.x, newP3.y - newP2.y, 0, 0, offscreenCanvas.width, offscreenCanvas.height);
                 }
             }
             if (this.parent.activeObj.redactType === 'blur') {

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

@@ -657,7 +657,7 @@ var Filter = /** @class */ (function () {
     Filter.prototype.parseFilterString = function (filterString) {
         /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
         var filterArray = [];
-        if (filterString !== 'none') {
+        if (filterString && filterString !== 'none') {
             filterArray = filterString.split(' ').map(function (filter) {
                 var _a = filter.match(/([a-z-]+)\(([^)]+)\)/).slice(1, 3), name = _a[0], value = _a[1];
                 return { filter: name, value: value };

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

@@ -3265,6 +3265,7 @@ var Selection = /** @class */ (function () {
             this.triggerShapeChange(shapeResizingArgs, shapeMovingArgs, 'mouse-down');
             parent.activeObj.activePoint = activePoint;
             parent.isShapeDrawing = true;
+            this.tempActiveObj = extend({}, parent.activeObj, {}, true);
             return;
         }
         parent.notify('draw', { prop: 'resetFrameZoom', onPropertyChange: false, value: { isOk: true } });

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

@@ -361,7 +361,8 @@ var Shape = /** @class */ (function () {
     };
     Shape.prototype.setDimension = function (width, height) {
         var parent = this.parent;
-        if (width && height) {
+        var shape = parent.activeObj.shape;
+        if ((width && height) || ((shape === 'line' || shape === 'arrow') && (width || height))) {
             parent.activeObj.activePoint.width = width;
             parent.activeObj.activePoint.height = height;
             if (parent.currObjType.shape.toLowerCase() === 'ellipse') {
@@ -409,7 +410,7 @@ var Shape = /** @class */ (function () {
                     strokeSettings.strokeWidth = 0;
                 }
                 strokeSettings.strokeColor = strokeColor ? strokeColor : strokeSettings.strokeColor;
-                strokeSettings.fillColor = fillColor ? fillColor : strokeSettings.fillColor;
+                strokeSettings.fillColor = fillColor || fillColor === '' ? fillColor : strokeSettings.fillColor;
                 strokeSettings.radius = radius ? radius : strokeSettings.radius;
                 var tempWidth = parent.img.destWidth > 100 ? 100 : parent.img.destWidth / 2;
                 var tempHeight = parent.img.destHeight > 100 ? 100 : parent.img.destHeight / 2;

package/src/image-editor/base/image-editor.js

@@ -641,7 +641,9 @@ var ImageEditor = /** @class */ (function (_super) {
             this.notify('toolbar', { prop: 'getLocaleText', onPropertyChange: false, value: { obj: contentObj } });
             var supportObj = { key: 'SupportText' };
             this.notify('toolbar', { prop: 'getLocaleText', onPropertyChange: false, value: { obj: supportObj } });
-            content = '<span>' + contentObj['value'] + ' ' + supportObj['value'] + '<b> JPG, PNG, and SVG</b></span>';
+            var andObj = { key: 'And' };
+            this.notify('toolbar', { prop: 'getLocaleText', onPropertyChange: false, value: { obj: andObj } });
+            content = '<span>' + contentObj['value'] + ' ' + supportObj['value'] + '<b> JPG, PNG, ' + andObj['value'] + ' SVG</b></span>';
         }
         var dialog = new Dialog({
             header: headerObj['value'],

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

@@ -1625,7 +1625,7 @@ var ToolbarModule = /** @class */ (function () {
         qualityOptionDiv.appendChild(parent.createElement('button', { id: id + '_qualitybuttonIcon', className: 'e-ie-img-icon-button', attrs: { type: 'button' } }));
         qualityNameDiv.appendChild(qualityOptionDiv);
         if (Browser.isDevice) {
-            qualityNameDiv.appendChild(parent.createElement('span', {
+            dialogRightContent.appendChild(parent.createElement('span', {
                 id: id + '_qualitySize', className: 'e-ie-img-quality-size'
             }));
         }
@@ -1885,48 +1885,44 @@ var ToolbarModule = /** @class */ (function () {
             }).bind(this), 'image/jpeg', quality);
         }
         else if (!isNullOrUndefined(fileType) && fileType.toLowerCase() === 'png') {
-            if (Browser.isDevice) {
-                canvas.style.display = 'none';
+            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);
+                }
+                if (Browser.isDevice) {
+                    canvas.style.display = 'none';
+                }
+                this.fileSize = fileSize;
+            }).bind(this), 'image/png', 1);
+        }
+        else if (!isNullOrUndefined(fileType) && fileType.toLowerCase() === 'svg') {
+            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 {
-                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);
+                imageNameLabel.innerHTML = this.l10n.getConstant('ImageSize') + ': ' + fileSize_1.toFixed(2) + ' KB';
+                fileSize_1 = +fileSize_1.toFixed(2);
             }
-        }
-        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;
+            this.fileSize = fileSize_1;
         }
         else {
             if (Browser.isDevice) {