@syncfusion/ej2-image-editor 29.1.35 → 29.1.38

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

@@ -1001,6 +1001,7 @@ var Draw = /** @__PURE__ @class */ (function () {
         this.imageBackgroundColor = '';
         this.allowRedactStraighten = true;
         this.isNullExtension = true;
+        this.isRedactStraighten = false;
         this.parent = parent;
         this.addEventListener();
     }
@@ -1281,6 +1282,9 @@ var Draw = /** @__PURE__ @class */ (function () {
             case 'setNullExtension':
                 this.isNullExtension = args.value['extension'];
                 break;
+            case 'setRedactStraighten':
+                this.isRedactStraighten = args.value['bool'];
+                break;
         }
     };
     Draw.prototype.getModuleName = function () {
@@ -1334,6 +1338,7 @@ var Draw = /** @__PURE__ @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;
@@ -6117,8 +6122,7 @@ var Draw = /** @__PURE__ @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');
@@ -6128,9 +6132,9 @@ var Draw = /** @__PURE__ @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');
@@ -6185,10 +6189,14 @@ 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 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();
@@ -6199,7 +6207,13 @@ var Draw = /** @__PURE__ @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;
@@ -6208,7 +6222,13 @@ var Draw = /** @__PURE__ @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') {
@@ -10466,18 +10486,22 @@ var Selection = /** @__PURE__ @class */ (function () {
         var endY = isStart ? actPoint.endY : actPoint.startY;
         var wrapperWidth = parent.upperCanvas.width;
         var wrapperHeight = parent.upperCanvas.height;
+        var minX = destLeft < 0 ? 0 : destLeft;
+        var minY = destTop < 0 ? 0 : destTop;
+        var maxX = destLeft + destWidth > wrapperWidth ? wrapperWidth : destLeft + destWidth;
+        var maxY = destTop + destHeight > wrapperHeight ? wrapperHeight : destTop + destHeight;
         if (Browser.isDevice) {
-            if (startX < 0 && destLeft < 0) {
-                startX = 0;
+            if (startX < minX) {
+                startX = minX;
             }
-            if (startY < 0 && destTop < 0) {
-                startY = 0;
+            if (startY < minY) {
+                startY = minY;
             }
-            if (endX > wrapperWidth && destLeft + destWidth > wrapperWidth) {
-                endX = wrapperWidth;
+            if (endX > maxX) {
+                endX = maxX;
             }
-            if (endY > wrapperHeight && destTop + destHeight > wrapperHeight) {
-                endY = wrapperHeight;
+            if (endY > maxY) {
+                endY = maxY;
             }
         }
         else {
@@ -12382,7 +12406,11 @@ var Selection = /** @__PURE__ @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);
                 }
@@ -12419,7 +12447,7 @@ var Selection = /** @__PURE__ @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' });
@@ -15377,7 +15405,9 @@ var Shape = /** @__PURE__ @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;
@@ -15394,7 +15424,9 @@ var Shape = /** @__PURE__ @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;
@@ -17214,16 +17246,16 @@ var Shape = /** @__PURE__ @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' :
@@ -32225,6 +32257,9 @@ var ToolbarModule = /** @__PURE__ @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('-');
         }
@@ -32474,7 +32509,36 @@ var ToolbarModule = /** @__PURE__ @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' });