@syncfusion/ej2-image-editor 29.1.35 → 29.1.38

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

@@ -972,6 +972,7 @@ class Draw {
         this.imageBackgroundColor = '';
         this.allowRedactStraighten = true;
         this.isNullExtension = true;
+        this.isRedactStraighten = false;
         this.parent = parent;
         this.addEventListener();
     }
@@ -1252,6 +1253,9 @@ class Draw {
             case 'setNullExtension':
                 this.isNullExtension = args.value['extension'];
                 break;
+            case 'setRedactStraighten':
+                this.isRedactStraighten = args.value['bool'];
+                break;
         }
     }
     getModuleName() {
@@ -1305,6 +1309,7 @@ class Draw {
         this.tempStrokeWidth = null;
         this.straightenDestPoints = null;
         this.isCropSelect = this.isDownScale = this.preventStraightening = false;
+        this.isRedactStraighten = false;
     }
     redrawDownScale() {
         const parent = this.parent;
@@ -6070,8 +6075,7 @@ class Draw {
             const imageWidth = canvas.width;
             const imageHeight = canvas.height;
             const tempRatio = Math.min(imageWidth, imageHeight) / 1000;
-            const straighten = this.parent.transform.straighten !== 0 ? this.parent.transform.straighten :
-                this.parent.cropObj.straighten;
+            const straighten = Math.round(this.parent.activeObj.rotatedAngle * (180 / Math.PI));
             if (this.allowRedactStraighten && straighten !== 0) {
                 const tempCanvas = document.createElement('canvas');
                 const tempCtx = tempCanvas.getContext('2d');
@@ -6081,9 +6085,9 @@ class Draw {
                     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);
                 }
                 const radians = -straighten * Math.PI / 180;
                 const straightenCanvas = document.createElement('canvas');
@@ -6138,10 +6142,14 @@ class Draw {
                     y: sinAngle * (p2.x - center.x) + cosAngle * (p2.y - center.y) + center.y };
                 const 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 };
-                const tempWidth = isSaveCtx ? canvasDraw.canvas.width : img.destWidth;
-                const tempHeight = isSaveCtx ? canvasDraw.canvas.height : img.destHeight;
+                const tempWidth = isSaveCtx ? canvasDraw.canvas.width :
+                    (img.destWidth > canvas.width ? canvas.width : img.destWidth);
+                const tempHeight = isSaveCtx ? canvasDraw.canvas.height :
+                    (img.destHeight > canvas.height ? canvas.height : img.destHeight);
                 const rotatedWidth = Math.abs(tempWidth * Math.cos(radians)) + Math.abs(tempHeight * Math.sin(radians));
                 const rotatedHeight = Math.abs(tempWidth * Math.sin(radians)) + Math.abs(tempHeight * Math.cos(radians));
+                const prevWidth = straightenCanvas.width;
+                const prevHeight = straightenCanvas.height;
                 straightenCanvas.width = rotatedWidth;
                 straightenCanvas.height = rotatedHeight;
                 straightenCtx.save();
@@ -6152,7 +6160,13 @@ class Draw {
                 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);
+                    let x = newP1.x + ((rotatedWidth - prevWidth) / 2);
+                    let 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 {
                     let pixelSize = (obj.redactPixelate / 100) * 20;
@@ -6161,7 +6175,13 @@ class Draw {
                     }
                     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);
+                    let x = newP1.x + ((rotatedWidth - prevWidth) / 2);
+                    let 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') {
@@ -10404,18 +10424,22 @@ class Selection {
         let endY = isStart ? actPoint.endY : actPoint.startY;
         const wrapperWidth = parent.upperCanvas.width;
         const wrapperHeight = parent.upperCanvas.height;
+        const minX = destLeft < 0 ? 0 : destLeft;
+        const minY = destTop < 0 ? 0 : destTop;
+        const maxX = destLeft + destWidth > wrapperWidth ? wrapperWidth : destLeft + destWidth;
+        const 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 {
@@ -12319,7 +12343,11 @@ class Selection {
                     parent.editCompleteArgs = shapeChangedArgs;
                 }
                 const isPenDraw = parent.togglePen;
+                const tempCursor = parent.cursor;
                 parent.notify('toolbar', { prop: 'close-contextual-toolbar', onPropertyChange: false });
+                if (activeObj.shape === 'redact' && tempCursor !== 'default') {
+                    parent.cursor = tempCursor;
+                }
                 if (isPenDraw) {
                     parent.freeHandDraw(true);
                 }
@@ -15313,7 +15341,9 @@ class Shape {
             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;
@@ -15330,7 +15360,9 @@ class Shape {
             }
             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;
@@ -17150,16 +17182,16 @@ class Shape {
         const parent = this.parent;
         const 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';
             }
             const value = (style.fontWeight === 'normal' && style.fontStyle === 'normal' ? 'default' :
@@ -32073,6 +32105,9 @@ class ToolbarModule {
         let actionType;
         let actionArgs;
         let isRedactClick = false;
+        let zoomLevel = 0;
+        let actObj;
+        let isRedact = false;
         if (parent.activeObj.shape !== undefined) {
             splitWords = parent.activeObj.shape.split('-');
         }
@@ -32322,7 +32357,36 @@ class ToolbarModule {
                 case 'horizontalflip':
                 case 'verticalflip':
                     parent.transformSelect(type);
+                    for (let 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 (let 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' });