@syncfusion/ej2-image-editor 29.1.35 → 29.1.37

package/dist/global/index.d.ts

@@ -1,6 +1,6 @@
 /*!
 *  filename: index.d.ts
-*  version : 29.1.35
+*  version : 29.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,8 +1,8 @@
 {
   "_from": "@syncfusion/ej2-image-editor@*",
-  "_id": "@syncfusion/ej2-image-editor@29.1.33",
+  "_id": "@syncfusion/ej2-image-editor@29.1.35",
   "_inBundle": false,
-  "_integrity": "sha512-5WvUCaKFmkEfRIVvCkgz8VqxAxwpRZiB7k1V7T9URi/vc/OFELFipce/qPJy4hW3ca5HZRKpuRFA0wRhQGuN8g==",
+  "_integrity": "sha512-EAHNeEm8RdgqXmTAGTl6J6NpK4EA/Bg/54sWRy5XKP74Wm/XLDjwWfobxNbqMKPTCgXvgzVVUIIdWfNFIv0iUg==",
   "_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-29.1.33.tgz",
-  "_shasum": "91ad5ad1e062038a5c7cbbb01b2007c420eeb516",
+  "_resolved": "https://nexus.syncfusioninternal.com/repository/ej2-hotfix-new/@syncfusion/ej2-image-editor/-/ej2-image-editor-29.1.35.tgz",
+  "_shasum": "0cbd5f1d03e7ad4011048a4c3132991432347ec9",
   "_spec": "@syncfusion/ej2-image-editor@*",
   "_where": "/jenkins/workspace/elease-automation_release_29.1.1/packages/included",
   "author": {
@@ -32,12 +32,12 @@
   },
   "bundleDependencies": false,
   "dependencies": {
-    "@syncfusion/ej2-base": "~29.1.35",
+    "@syncfusion/ej2-base": "~29.1.36",
     "@syncfusion/ej2-buttons": "~29.1.34",
-    "@syncfusion/ej2-dropdowns": "~29.1.33",
+    "@syncfusion/ej2-dropdowns": "~29.1.37",
     "@syncfusion/ej2-inputs": "~29.1.34",
-    "@syncfusion/ej2-navigations": "~29.1.34",
-    "@syncfusion/ej2-popups": "~29.1.35",
+    "@syncfusion/ej2-navigations": "~29.1.37",
+    "@syncfusion/ej2-popups": "~29.1.37",
     "@syncfusion/ej2-splitbuttons": "~29.1.33"
   },
   "deprecated": false,
@@ -68,7 +68,7 @@
     "url": "https://github.com/syncfusion/ej2-javascript-ui-controls/tree/master/controls/imageeditor"
   },
   "typings": "index.d.ts",
-  "version": "29.1.35",
+  "version": "29.1.37",
   "sideEffects": false,
   "homepage": "https://www.syncfusion.com/javascript-ui-controls"
 }

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

@@ -56,6 +56,7 @@ export declare class Draw {
     private tempStrokeWidth;
     private allowRedactStraighten;
     private isNullExtension;
+    private isRedactStraighten;
     constructor(parent: ImageEditor);
     destroy(): void;
     private addEventListener;

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

@@ -74,6 +74,7 @@ var Draw = /** @class */ (function () {
         this.imageBackgroundColor = '';
         this.allowRedactStraighten = true;
         this.isNullExtension = true;
+        this.isRedactStraighten = false;
         this.parent = parent;
         this.addEventListener();
     }
@@ -354,6 +355,9 @@ var Draw = /** @class */ (function () {
             case 'setNullExtension':
                 this.isNullExtension = args.value['extension'];
                 break;
+            case 'setRedactStraighten':
+                this.isRedactStraighten = args.value['bool'];
+                break;
         }
     };
     Draw.prototype.getModuleName = function () {
@@ -407,6 +411,7 @@ var Draw = /** @class */ (function () {
         this.tempStrokeWidth = null;
         this.straightenDestPoints = null;
         this.isCropSelect = this.isDownScale = this.preventStraightening = false;
+        this.isRedactStraighten = false;
     };
     Draw.prototype.redrawDownScale = function () {
         var parent = this.parent;
@@ -5194,8 +5199,7 @@ var Draw = /** @class */ (function () {
             var imageWidth = canvas.width;
             var imageHeight = canvas.height;
             var tempRatio = Math.min(imageWidth, imageHeight) / 1000;
-            var straighten = this.parent.transform.straighten !== 0 ? this.parent.transform.straighten :
-                this.parent.cropObj.straighten;
+            var straighten = Math.round(this.parent.activeObj.rotatedAngle * (180 / Math.PI));
             if (this.allowRedactStraighten && straighten !== 0) {
                 var tempCanvas = document.createElement('canvas');
                 var tempCtx = tempCanvas.getContext('2d');
@@ -5205,9 +5209,9 @@ var Draw = /** @class */ (function () {
                     tempCtx.drawImage(canvas, 0, 0);
                 }
                 else {
-                    tempCanvas.width = img.destWidth;
-                    tempCanvas.height = img.destHeight;
-                    tempCtx.drawImage(this.lowerContext.canvas, img.destLeft, img.destTop, img.destWidth, img.destHeight, 0, 0, img.destWidth, img.destHeight);
+                    tempCanvas.width = img.destWidth > canvas.width ? canvas.width : img.destWidth;
+                    tempCanvas.height = img.destHeight > canvas.height ? canvas.height : img.destHeight;
+                    tempCtx.drawImage(this.lowerContext.canvas, img.destLeft > 0 ? img.destLeft : 0, img.destTop > 0 ? img.destTop : 0, tempCanvas.width, tempCanvas.height, 0, 0, tempCanvas.width, tempCanvas.height);
                 }
                 var radians = -straighten * Math.PI / 180;
                 var straightenCanvas = document.createElement('canvas');
@@ -5262,10 +5266,14 @@ 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 tempWidth = isSaveCtx ? canvasDraw.canvas.width :
+                    (img.destWidth > canvas.width ? canvas.width : img.destWidth);
+                var tempHeight = isSaveCtx ? canvasDraw.canvas.height :
+                    (img.destHeight > canvas.height ? 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));
+                var prevWidth = straightenCanvas.width;
+                var prevHeight = straightenCanvas.height;
                 straightenCanvas.width = rotatedWidth;
                 straightenCanvas.height = rotatedHeight;
                 straightenCtx.save();
@@ -5276,7 +5284,13 @@ var Draw = /** @class */ (function () {
                 if (this.parent.activeObj.redactType === 'blur') {
                     offscreenCanvas.width = width;
                     offscreenCanvas.height = 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);
+                    var x = newP1.x + ((rotatedWidth - prevWidth) / 2);
+                    var y = newP1.y + ((rotatedHeight - prevHeight) / 2);
+                    if (this.isRedactStraighten) {
+                        x = startX + ((rotatedWidth - prevWidth) / 2);
+                        y = startY + ((rotatedHeight - prevHeight) / 2);
+                    }
+                    offscreenCtx.drawImage(straightenCanvas, x, y, newP2.x - newP1.x, newP3.y - newP2.y, 0, 0, width, height);
                 }
                 else {
                     var pixelSize = (obj.redactPixelate / 100) * 20;
@@ -5285,7 +5299,13 @@ var Draw = /** @class */ (function () {
                     }
                     offscreenCanvas.width = Math.ceil(width / pixelSize);
                     offscreenCanvas.height = Math.ceil(height / pixelSize);
-                    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);
+                    var x = newP1.x + ((rotatedWidth - prevWidth) / 2);
+                    var y = newP1.y + ((rotatedHeight - prevHeight) / 2);
+                    if (this.isRedactStraighten) {
+                        x = startX + ((rotatedWidth - prevWidth) / 2);
+                        y = startY + ((rotatedHeight - prevHeight) / 2);
+                    }
+                    offscreenCtx.drawImage(straightenCanvas, x, y, 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/selection.js

@@ -3486,7 +3486,11 @@ var Selection = /** @class */ (function () {
                     parent.editCompleteArgs = shapeChangedArgs;
                 }
                 var isPenDraw = parent.togglePen;
+                var tempCursor_1 = parent.cursor;
                 parent.notify('toolbar', { prop: 'close-contextual-toolbar', onPropertyChange: false });
+                if (activeObj.shape === 'redact' && tempCursor_1 !== 'default') {
+                    parent.cursor = tempCursor_1;
+                }
                 if (isPenDraw) {
                     parent.freeHandDraw(true);
                 }
@@ -3523,7 +3527,7 @@ var Selection = /** @class */ (function () {
                     this.dragElement = '';
                     this.dragPoint.startX = this.dragPoint.startY = this.dragPoint.endX = this.dragPoint.endY = 0;
                 }
-                if (((this.isTouch && tempCursor !== 'crosshair' || parent.cursor !== 'crosshair') &&
+                if (((this.isTouch && tempCursor_1 !== 'crosshair' || parent.cursor !== 'crosshair') &&
                     e.type.toLowerCase() === 'touchstart') ||
                     (parent.currObjType.isActiveObj && parent.cursor !== 'default' && !parent.togglePen)) {
                     parent.notify('draw', { prop: 'updateTempObjColl' });

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

@@ -836,7 +836,9 @@ var Shape = /** @class */ (function () {
             parent.pointColl[shapeId].strokeColor = shapeSettings.strokeColor;
             parent.pointColl[shapeId].strokeWidth = shapeSettings.strokeWidth;
             parent.pointColl[shapeId].opacity = shapeSettings.opacity;
-            parent.pointColl[shapeId].order = shapeSettings.index;
+            if (shapeSettings.index) {
+                parent.pointColl[shapeId].order = shapeSettings.index;
+            }
         }
         else {
             parent.activeObj.activePoint.startX = shapeSettings.startX;
@@ -853,7 +855,9 @@ var Shape = /** @class */ (function () {
             }
             parent.activeObj.strokeSettings.fillColor = shapeSettings.fillColor;
             parent.activeObj.opacity = shapeSettings.opacity;
-            parent.activeObj.order = shapeSettings.index;
+            if (shapeSettings.index) {
+                parent.activeObj.order = shapeSettings.index;
+            }
             parent.activeObj.preventShapeDragOut = !allowShapeOverflow;
             if (isNullOrUndefined(shapeSettings.degree)) {
                 shapeSettings.degree = 0;
@@ -2673,16 +2677,16 @@ var Shape = /** @class */ (function () {
         var parent = this.parent;
         var style = parent.textArea.style;
         if (style.display === 'block' || style.display === 'inline-block') {
-            if (style.fontWeight === 'normal' && fontWeight === 'bold') {
+            if (fontWeight === 'bold') {
                 style.fontWeight = 'bold';
             }
-            else if (style.fontWeight === 'bold' && fontWeight === 'bold') {
+            else {
                 style.fontWeight = 'normal';
             }
-            if (style.fontStyle === 'normal' && fontStyle === 'italic') {
+            if (fontStyle === 'italic') {
                 style.fontStyle = 'italic';
             }
-            else if (style.fontStyle === 'italic' && fontStyle === 'italic') {
+            else {
                 style.fontStyle = 'normal';
             }
             var value = (style.fontWeight === 'normal' && style.fontStyle === 'normal' ? 'default' :

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

@@ -5249,6 +5249,9 @@ var ToolbarModule = /** @class */ (function () {
         var actionType;
         var actionArgs;
         var isRedactClick = false;
+        var zoomLevel = 0;
+        var actObj;
+        var isRedact = false;
         if (parent.activeObj.shape !== undefined) {
             splitWords = parent.activeObj.shape.split('-');
         }
@@ -5498,7 +5501,36 @@ var ToolbarModule = /** @class */ (function () {
                 case 'horizontalflip':
                 case 'verticalflip':
                     parent.transformSelect(type);
+                    for (var i = 0; i < parent.objColl.length; i++) {
+                        if (parent.objColl[i].shape === 'redact') {
+                            isRedact = true;
+                            break;
+                        }
+                    }
+                    if (isRedact) {
+                        parent.notify('draw', { prop: 'setRedactStraighten', value: { bool: true } });
+                        actObj = extend({}, parent.activeObj, {}, true);
+                        while (parent.img.destLeft < 0 || parent.img.destTop < 0) {
+                            parent.notify('shape', { prop: 'refreshActiveObj', onPropertyChange: false });
+                            parent.notify('transform', { prop: 'zoomAction', onPropertyChange: false,
+                                value: { zoomFactor: -.125, zoomPoint: null, isResize: false } });
+                            zoomLevel += 1;
+                        }
+                    }
                     this.updateRedactObj();
+                    if (isRedact) {
+                        if (zoomLevel > 0) {
+                            parent.isCropTab = true;
+                            for (var i = 0; i < zoomLevel; i++) {
+                                parent.notify('shape', { prop: 'refreshActiveObj', onPropertyChange: false });
+                                parent.notify('transform', { prop: 'zoomAction', onPropertyChange: false,
+                                    value: { zoomFactor: .125, zoomPoint: null, isResize: false } });
+                            }
+                            parent.activeObj = actObj;
+                            parent.notify('draw', { prop: 'drawObject', onPropertyChange: false, value: { canvas: 'duplicate' } });
+                        }
+                        parent.notify('draw', { prop: 'setRedactStraighten', value: { bool: false } });
+                    }
                     if (type === 'rotateleft' || type === 'rotateright') {
                         parent.notify('draw', { prop: 'resetStraightenDestPoints' });
                         parent.notify('draw', { prop: 'setDestForStraighten' });