@syncfusion/ej2-image-editor 27.1.52 → 27.1.57

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

@@ -2313,8 +2313,13 @@ var Draw = /** @__PURE__ @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);
@@ -2324,8 +2329,13 @@ var Draw = /** @__PURE__ @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));
@@ -2334,6 +2344,15 @@ var Draw = /** @__PURE__ @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;
@@ -6078,10 +6097,21 @@ var Draw = /** @__PURE__ @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;
@@ -6090,7 +6120,7 @@ var Draw = /** @__PURE__ @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') {
@@ -13324,10 +13354,6 @@ var Selection = /** @__PURE__ @class */ (function () {
     };
     Selection.prototype.handleScroll = function (e) {
         this.mouseWheel++;
-        if (this.mouseWheel === 2) {
-            this.mouseWheel = 0;
-            return;
-        }
         var parent = this.parent;
         var x;
         var y;
@@ -13344,6 +13370,13 @@ var Selection = /** @__PURE__ @class */ (function () {
             y < parent.img.destTop + parent.img.destHeight) {
             isInsideCanvas = true;
         }
+        if (this.mouseWheel === 2) {
+            this.mouseWheel = 0;
+            if (e.ctrlKey === true && isInsideCanvas) {
+                e.preventDefault();
+            }
+            return;
+        }
         e.stopPropagation();
         if (e.ctrlKey === true && isInsideCanvas) {
             e.preventDefault();
@@ -14712,7 +14745,8 @@ var Shape = /** @__PURE__ @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') {
@@ -14760,7 +14794,7 @@ var Shape = /** @__PURE__ @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;
@@ -22263,7 +22297,9 @@ var ImageEditor = /** @__PURE__ @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'],