@syncfusion/ej2-image-editor 26.2.10 → 27.1.48

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

@@ -44,7 +44,7 @@ var Draw = /** @class */ (function () {
         this.isErrorImage = false;
         this.isShapeTextInserted = false;
         this.isRotateZoom = false; // To restore zoomed image on selection crop selection
-        this.tempStrokeSettings = { strokeColor: '#fff', fillColor: '', strokeWidth: null }; // restore stroke settings on cancel
+        this.tempStrokeSettings = { strokeColor: '#fff', fillColor: '', strokeWidth: null, outlineColor: '', radius: null, outlineWidth: null }; // restore stroke settings on cancel
         this.tempTextSettings = { text: 'Enter Text', fontFamily: '', fontSize: null, fontRatio: null, bold: false, italic: false, underline: false }; // restore text settings on cancel
         this.tempAdjValue = ''; // for temp internal slider value
         this.tempFilter = ''; // restore filter style on cancel
@@ -71,6 +71,8 @@ var Draw = /** @class */ (function () {
         this.tempObjColl = [];
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
         this.tempPointColl = {};
+        this.imageBackgroundColor = '';
+        this.allowRedactStraighten = true;
         this.parent = parent;
         this.addEventListener();
     }
@@ -143,7 +145,7 @@ var Draw = /** @class */ (function () {
                 this.redrawImgWithObj();
                 break;
             case 'setCurrentObj':
-                this.setCurrentObj(args.value['obj'], args.value['isUndoRedo']);
+                this.setCurrentObj(args.value['obj'], args.value['isUndoRedo'], args.value['isCircleCrop']);
                 break;
             case 'performPointZoom':
                 this.performPointZoom(args.value['x'], args.value['y'], args.value['type'], args.value['isResize']);
@@ -336,6 +338,18 @@ var Draw = /** @class */ (function () {
             case 'resetTempPointColl':
                 this.tempPointColl = {};
                 break;
+            case 'showDialogPopup':
+                this.showDialogPopup();
+                break;
+            case 'imageBackgroundColor':
+                this.imageBackgroundColor = args.value['color'];
+                break;
+            case 'getImageBackgroundColor':
+                args.value['obj']['color'] = this.imageBackgroundColor;
+                break;
+            case 'setTempStrokeWidth':
+                this.tempStrokeWidth = args.value['strokeWidth'];
+                break;
         }
     };
     Draw.prototype.getModuleName = function () {
@@ -366,7 +380,7 @@ var Draw = /** @class */ (function () {
         this.currSelPoint = null;
         this.isRotateZoom = false;
         this.tempAdjValue = '';
-        this.tempStrokeSettings = { strokeColor: '#fff', fillColor: '', strokeWidth: null };
+        this.tempStrokeSettings = { strokeColor: '#fff', fillColor: '', strokeWidth: null, radius: null, outlineColor: '', outlineWidth: null };
         this.tempTextSettings =
             { text: 'Enter Text', fontFamily: this.parent.fontFamily.default, fontSize: null, fontRatio: null, bold: false, italic: false, underline: false };
         this.tempUndoRedoStep = this.tempFreehandCounter = this.tempCurrFhdIndex = 0;
@@ -381,8 +395,11 @@ var Draw = /** @class */ (function () {
         this.straightenActObj = null;
         this.imgCanvasPoints = [];
         this.straightenInitZoom = null;
+        this.allowRedactStraighten = true;
         this.tempObjColl = [];
         this.tempPointColl = {};
+        this.imageBackgroundColor = '';
+        this.tempStrokeWidth = null;
         this.straightenDestPoints = null;
         this.isCropSelect = this.isDownScale = this.preventStraightening = false;
     };
@@ -553,7 +570,7 @@ var Draw = /** @class */ (function () {
         var parent = this.parent;
         var actPoint = parent.activeObj.activePoint;
         var _a = parent.activeObj, shape = _a.shape, rotatedAngle = _a.rotatedAngle;
-        if (actPoint && shape !== 'image' && shape !== 'line' && rotatedAngle === 0) {
+        if (actPoint && shape !== 'image' && shape !== 'line' && rotatedAngle === 0 && parent.activeObj.preventShapeDragOut) {
             var _b = parent.img, destLeft = _b.destLeft, destTop = _b.destTop, destWidth = _b.destWidth, destHeight = _b.destHeight;
             if (actPoint.startX < destLeft) {
                 actPoint.startX = destLeft;
@@ -580,8 +597,6 @@ var Draw = /** @class */ (function () {
         var y;
         var width;
         var height;
-        var canvasWidth = parent.lowerCanvas.clientWidth;
-        var canvasHeight = parent.lowerCanvas.clientHeight + 1;
         var _a = parent.img, destLeft = _a.destLeft, destTop = _a.destTop, destWidth = _a.destWidth, destHeight = _a.destHeight;
         if (parent.transform.zoomFactor > 0 && this.currSelPoint) {
             var activeObj = extend({}, parent.activeObj, {}, true);
@@ -594,18 +609,8 @@ var Draw = /** @class */ (function () {
                 height = width;
             }
             else {
-                if (destLeft + destLeft + destWidth <= canvasWidth) {
-                    width = actPoint.width;
-                }
-                else {
-                    width = parent.transform.straighten === 0 ? canvasWidth - destLeft : actPoint.width;
-                }
-                if (destTop + destTop + destHeight <= canvasHeight) {
-                    height = actPoint.height;
-                }
-                else {
-                    height = parent.transform.straighten === 0 ? canvasHeight - destTop : actPoint.height;
-                }
+                width = actPoint.width;
+                height = actPoint.height;
             }
             parent.notify('shape', { prop: 'refreshActiveObj', onPropertyChange: false });
             parent.activeObj = activeObj;
@@ -950,7 +955,9 @@ var Draw = /** @class */ (function () {
                 canvasDraw.lineWidth /= 2;
             }
             else {
-                this.drawCenterCircles(canvasDraw);
+                if (parent.activeObj.shape !== 'redact') {
+                    this.drawCenterCircles(canvasDraw);
+                }
             }
             canvasDraw.strokeStyle = strokeColor;
             canvasDraw.fillStyle = fillColor;
@@ -1006,7 +1013,7 @@ var Draw = /** @class */ (function () {
             canvasDraw = saveContext;
         }
         var shapeType = parent.currObjType.shape.toLowerCase();
-        var shapeColl = ['rectangle', 'ellipse', 'line', 'arrow', 'path', 'image'];
+        var shapeColl = ['rectangle', 'ellipse', 'line', 'arrow', 'path', 'image', 'redact'];
         if (shapeColl.indexOf(shapeType) !== -1) {
             actObj.shape = parent.currObjType.shape;
         }
@@ -1032,6 +1039,13 @@ var Draw = /** @class */ (function () {
                     this.drawOuterSelection(canvasDraw);
                 }
                 break;
+            case 'redact':
+                this.drawRedact(canvasDraw, actObj);
+                if (isNullOrUndefined(isPreventSelection) && canvasDraw === this.upperContext) {
+                    this.drawOuterSelection(canvasDraw);
+                }
+                parent.currObjType.isRedact = true;
+                break;
             case 'ellipse':
                 selectionWidth = Math.abs(selectionWidth);
                 selectionHeight = Math.abs(selectionHeight);
@@ -1050,9 +1064,6 @@ var Draw = /** @class */ (function () {
                 }
                 break;
             case 'crop-circle':
-                if (canvasDraw === this.lowerContext) {
-                    canvasDraw = this.upperContext;
-                }
                 this.shapeCircle(canvasDraw, selectionWidth, selectionHeight);
                 break;
             case 'line':
@@ -1096,7 +1107,7 @@ var Draw = /** @class */ (function () {
                 if (activeObj.pointColl.length > 1) {
                     var obj = { shape: null };
                     parent.notify('selection', { prop: 'getCurrentDrawingShape', value: { obj: obj } });
-                    if (obj['shape'] === 'path') {
+                    if (obj['shape'] === 'path' && parent.isShapeDrawing) {
                         var nextPoint = { x: 0, y: 0 };
                         for (var i = 0, len = activeObj.pointColl.length; i < len; i++) {
                             if (isNullOrUndefined(activeObj.pointColl[i + 1])) {
@@ -1113,6 +1124,10 @@ var Draw = /** @class */ (function () {
                             actPoint.endY = nextPoint.y;
                             parent.activeObj = this.updateWidthHeight(parent.activeObj);
                             this.shapeLine(canvasDraw, actPoint.startX, actPoint.startY, actPoint.endX, actPoint.endY);
+                            if (Browser.isDevice) {
+                                activeObj.activePoint.endX = nextPoint.x;
+                                activeObj.activePoint.endY = nextPoint.y;
+                            }
                         }
                     }
                     else {
@@ -1350,7 +1365,7 @@ var Draw = /** @class */ (function () {
         var parent = this.parent;
         var actObj = parent.activeObj;
         var _a = actObj.activePoint, startX = _a.startX, startY = _a.startY, width = _a.width, height = _a.height;
-        var _b = actObj.strokeSettings, fillColor = _b.fillColor, strokeColor = _b.strokeColor, strokeWidth = _b.strokeWidth;
+        var _b = actObj.strokeSettings, fillColor = _b.fillColor, strokeColor = _b.strokeColor, strokeWidth = _b.strokeWidth, radius = _b.radius;
         if (actObj.shape) {
             splitWords = actObj.shape.split('-');
         }
@@ -1361,12 +1376,33 @@ var Draw = /** @class */ (function () {
             canvasDraw.strokeStyle = strokeColor;
         }
         canvasDraw.beginPath();
-        canvasDraw.rect(startX, startY, width, height);
+        var obj = { width: 0, height: 0 };
+        var ratio = { width: 1, height: 1 };
+        parent.notify('crop', { prop: 'calcRatio', onPropertyChange: false,
+            value: { obj: obj, dimension: { width: canvasDraw.canvas.width, height: canvasDraw.canvas.height } } });
+        ratio = obj;
+        var isTempCanvas = canvasDraw.canvas.id === parent.element.id + '_tempCanvas';
+        var zoomFactor = parent.transform.zoomFactor;
+        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);
+        }
+        else {
+            canvasDraw.rect(startX, startY, width, height);
+        }
         if (fillColor !== '') {
             canvasDraw.fillStyle = fillColor;
             canvasDraw.fill();
         }
-        canvasDraw.rect(startX + strokeWidth, startY + strokeWidth, width - (2 * strokeWidth), height - (2 * strokeWidth));
+        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);
+        }
+        else {
+            canvasDraw.rect(startX + strokeWidth, startY + strokeWidth, width - (2 * strokeWidth), height - (2 * strokeWidth));
+        }
         canvasDraw.fillStyle = strokeColor;
         canvasDraw.fill('evenodd');
         canvasDraw.closePath();
@@ -1662,6 +1698,9 @@ var Draw = /** @class */ (function () {
             else if (actObj.start === 'square' && actObj.end === 'square') {
                 this.shapeLine(canvasDraw, this.squareEndIntersectX1, this.squareEndIntersectY1, this.squareStartIntersectX1, this.squareStartIntersectY1);
             }
+            else if (actObj.end === 'squareSolid' && actObj.start === 'none') {
+                this.shapeLine(canvasDraw, startX, startY, endX, endY);
+            }
         }
     };
     Draw.prototype.arrowCircle = function (canvasDraw, start) {
@@ -1923,6 +1962,13 @@ var Draw = /** @class */ (function () {
         var lHeight = fontSize + fontSize * 0.25;
         var lineHeight = ((lHeight * rows.length) - (fontSize * rows.length)) / rows.length;
         canvasDraw.filter = 'none';
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        var tempFill = canvasDraw.fillStyle;
+        if (actObj.strokeSettings.fillColor !== '') {
+            canvasDraw.fillStyle = actObj.strokeSettings.fillColor;
+            canvasDraw.fillRect(actObj.activePoint.startX, actObj.activePoint.startY, actObj.activePoint.width, actObj.activePoint.height);
+        }
+        canvasDraw.fillStyle = tempFill;
         for (var i = 0; i < rows.length; i++) {
             var text = rows[i];
             var yPoint = ((i + 1) * fontSize * 0.85) + (i * lineHeight);
@@ -1939,8 +1985,29 @@ var Draw = /** @class */ (function () {
                     fontSize = actObj.textSettings.fontSize = width - (width * 0.1);
                 }
             }
-            canvasDraw.strokeStyle = actObj.strokeSettings.strokeColor;
+            canvasDraw.strokeStyle = actObj.strokeSettings.outlineColor;
             canvasDraw.fillStyle = actObj.strokeSettings.strokeColor;
+            var tempWidth = canvasDraw.lineWidth;
+            var obj = { width: 0, height: 0 };
+            var ratio = { width: 1, height: 1 };
+            parent.notify('crop', { prop: 'calcRatio', onPropertyChange: false,
+                value: { obj: obj, dimension: { width: canvasDraw.canvas.width, height: canvasDraw.canvas.height } } });
+            ratio = obj;
+            var isTempCanvas = canvasDraw.canvas.id === parent.element.id + '_tempCanvas';
+            var baseWidth = Math.max(1, actObj.strokeSettings.outlineWidth / 2);
+            if (/^#([0-9A-Fa-f]{3}|[0-9A-Fa-f]{6}|[0-9A-Fa-f]{8})$|^[a-zA-Z]+$/.test(actObj.strokeSettings.outlineColor)) {
+                canvasDraw.lineWidth = baseWidth * ((isTempCanvas ? Math.floor((fontSize - 1) / 60) :
+                    Math.floor((fontSize - 1) / 16)) * 0.5 + 0.5);
+                if (isTempCanvas) {
+                    canvasDraw.lineWidth *= ((ratio.width + ratio.height) / 2);
+                    if (parent.transform.degree !== 0) {
+                        canvasDraw.lineWidth /= 1.8;
+                    }
+                }
+            }
+            else {
+                canvasDraw.lineWidth = 0;
+            }
             var textStyle = '';
             if (bold) {
                 textStyle = 'bold ';
@@ -1960,11 +2027,16 @@ var Draw = /** @class */ (function () {
                 this.rotateText(canvasDraw);
             }
             else {
+                canvasDraw.strokeText(text, startX + fontSize * 0.1, startY + yPoint);
                 canvasDraw.fillText(text, startX + fontSize * 0.1, startY + yPoint);
             }
+            canvasDraw.lineWidth = tempWidth;
         }
         canvasDraw.filter = filter;
         parent.currObjType.isText = false;
+        if (this.upperContext === canvasDraw) {
+            this.drawOuterSelection(canvasDraw);
+        }
     };
     Draw.prototype.updateActPoint = function (degree, canvasDraw) {
         var parent = this.parent;
@@ -2222,6 +2294,8 @@ var Draw = /** @class */ (function () {
                 }
                 yPoint += fontSize + fontSize * 0.15;
             }
+            canvasDraw.strokeText(text, startX + fontSize * 0.15, startY +
+                yPoint + (i > 0 ? fontSize * 0.25 : -fontSize * 0.35));
             canvasDraw.fillText(text, startX + fontSize * 0.15, startY +
                 yPoint + (i > 0 ? fontSize * 0.25 : -fontSize * 0.35));
         }
@@ -2462,7 +2536,9 @@ var Draw = /** @class */ (function () {
         parent.baseImg.src = src;
         parent.baseImg.onload = function () {
             parent.imgSrc = src;
-            parent.notify('filter', { prop: 'update-finetunes', onPropertyChange: false });
+            if (!parent.isUndoRedo) {
+                parent.notify('filter', { prop: 'update-finetunes', onPropertyChange: false });
+            }
             proxy.lowerContext.drawImage(parent.baseImg, 0, 0, proxy.parent.lowerCanvas.width, proxy.parent.lowerCanvas.height);
             hideSpinner(parent.element);
             parent.element.style.opacity = '1';
@@ -2489,6 +2565,8 @@ var Draw = /** @class */ (function () {
             }
             if (parent.isImageLoaded && parent.element.style.opacity !== '0.5') {
                 parent.trigger('fileOpened', fileOpened);
+                var action = { action: 'file-open', actionEventArgs: fileOpened };
+                parent.triggerEditCompleteEvent(action);
             }
         };
         parent.baseImg.onerror = function () {
@@ -2510,8 +2588,10 @@ var Draw = /** @class */ (function () {
     };
     Draw.prototype.updateCanvas = function () {
         var parent = this.parent;
-        parent.img.srcWidth = parent.baseImgCanvas.width;
-        parent.img.srcHeight = parent.baseImgCanvas.height;
+        if (!parent.isImageUpdated) {
+            parent.img.srcWidth = parent.baseImgCanvas.width;
+            parent.img.srcHeight = parent.baseImgCanvas.height;
+        }
         var obj = { width: 0, height: 0 };
         parent.notify('transform', { prop: 'calcMaxDimension', onPropertyChange: false,
             value: { width: parent.img.srcWidth, height: parent.img.srcHeight, obj: obj, isImgShape: null } });
@@ -2586,12 +2666,15 @@ var Draw = /** @class */ (function () {
             this.renderImage(null, null, true);
         }
         this.resetFrameZoom(false);
+        var editCompleteArgs = { action: '' };
         if (obj['bool']) {
+            editCompleteArgs['action'] = 'freehand-draw';
             parent.notify('freehand-draw', { prop: 'cancelFhd', onPropertyChange: false });
             parent.notify('toolbar', { prop: 'destroy-qa-toolbar', onPropertyChange: false });
             parent.notify('undo-redo', { prop: 'updateCurrUrc', value: { type: 'ok' } });
         }
         else if (parent.textArea.style.display === 'block' || parent.textArea.style.display === 'inline-block') {
+            editCompleteArgs['action'] = 'text-editing';
             parent.textArea.style.display = 'none';
             parent.textArea.value = '';
             parent.textArea.style.transform = '';
@@ -2614,8 +2697,9 @@ var Draw = /** @class */ (function () {
                 parent.enableShapeDrawing(parent.toPascalCase(parent.drawingShape), true);
             }
         }
-        else if (((!Browser.isDevice || (Browser.isDevice && !straightenObj['bool'])) &&
-            document.querySelector('#' + parent.element.id + '_sliderWrapper')) || parent.currObjType.isFiltered) {
+        else if ((!parent.activeObj.shape || parent.activeObj.shape !== 'redact') && (((!Browser.isDevice || (Browser.isDevice && !straightenObj['bool'])) &&
+            document.querySelector('#' + parent.element.id + '_sliderWrapper')) || parent.currObjType.isFiltered)) {
+            editCompleteArgs['action'] = parent.isFinetuneBtnClick ? 'fine-tune' : 'filter';
             this.lowerContext.filter = this.tempAdjValue;
             parent.canvasFilter = this.tempAdjValue;
             parent.notify('filter', { prop: 'setAdjustmentValue', onPropertyChange: false, value: { adjustmentValue: this.tempAdjValue } });
@@ -2636,7 +2720,7 @@ var Draw = /** @class */ (function () {
             parent.notify('undo-redo', { prop: 'setUndoRedoStep', onPropertyChange: false, value: { step: this.tempUndoRedoStep } });
             parent.upperCanvas.style.cursor = parent.cursor = 'default';
             parent.currObjType.isCustomCrop = false;
-            this.tempStrokeSettings = { strokeColor: '#fff', fillColor: '', strokeWidth: null };
+            this.tempStrokeSettings = { strokeColor: '#fff', fillColor: '', strokeWidth: null, radius: null, outlineColor: '', outlineWidth: null };
             this.clearOuterCanvas(this.lowerContext);
             if ((parent.currSelectionPoint && parent.currSelectionPoint.shape === 'crop-circle') || parent.isCircleCrop) {
                 parent.notify('crop', { prop: 'cropCircle', onPropertyChange: false,
@@ -2651,14 +2735,18 @@ var Draw = /** @class */ (function () {
             parent.notify('undo-redo', { prop: 'updateCurrUrc', value: { type: 'cancel' } });
             parent.notify('shape', { prop: 'refreshActiveObj', onPropertyChange: false });
             this.upperContext.clearRect(0, 0, parent.upperCanvas.width, parent.upperCanvas.height);
+            if (parent.drawingShape) {
+                parent.drawingShape = null;
+                parent.notify('selection', { prop: 'setCurrentDrawingShape', onPropertyChange: false, value: { value: '' } });
+            }
         }
         else {
-            if (isContextualToolbar && (!Browser.isDevice || (Browser.isDevice && !straightenObj['bool']))) {
+            if ((!parent.activeObj.shape || parent.activeObj.shape !== 'redact') && isContextualToolbar && (!Browser.isDevice || (Browser.isDevice && !straightenObj['bool']))) {
                 var eventargs = { type: 'main', isApplyBtn: null, isCropping: null, isZooming: null };
                 parent.notify('toolbar', { prop: 'refresh-toolbar', onPropertyChange: false, value: eventargs });
             }
             else {
-                this.cancelItems();
+                this.cancelItems(editCompleteArgs);
                 if (parent.transform.zoomFactor > 0) {
                     parent.togglePan = true;
                     parent.notify('selection', { prop: 'setDragCanvas', value: { bool: true } });
@@ -2679,15 +2767,18 @@ var Draw = /** @class */ (function () {
         parent.drawingShape = null;
         parent.notify('draw', { prop: 'resetTempObjColl' });
         parent.notify('draw', { prop: 'resetTempPointColl' });
+        parent.isMaskImage = parent.isFinetuneBtnClick = false;
+        var actionArgs = { action: 'cancel', actionEventArgs: editCompleteArgs };
+        parent.triggerEditCompleteEvent(actionArgs);
     };
-    Draw.prototype.cancelItems = function () {
+    Draw.prototype.cancelItems = function (editCompleteArgs) {
         var parent = this.parent;
         var isCropSelection = false;
         var id = parent.element.id;
         var ascpectIcon = parent.element.querySelector('#' + id + '_aspectratio');
         var nonAspectIcon = parent.element.querySelector('#' + id + '_nonaspectratio');
         var splitWords;
-        var shapes = ['rectangle', 'ellipse', 'line', 'arrow', 'path', 'image'];
+        var shapes = ['rectangle', 'ellipse', 'line', 'arrow', 'path', 'image', 'redact'];
         if (parent.activeObj.shape !== undefined) {
             splitWords = parent.activeObj.shape.split('-');
         }
@@ -2704,6 +2795,7 @@ var Draw = /** @class */ (function () {
         if (parent.isResize) {
             /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
             if (ascpectIcon || nonAspectIcon || parent.currentToolbar === 'resize-toolbar') {
+                editCompleteArgs['action'] = 'resize';
                 var obj = { width: null, height: null };
                 parent.notify('selection', { prop: 'getNumTextValue', onPropertyChange: false, value: { obj: obj } });
                 var point = { x: obj['width'], y: obj['height'] };
@@ -2760,15 +2852,20 @@ var Draw = /** @class */ (function () {
         }
         switch (true) {
             case parent.togglePen:
+                editCompleteArgs['action'] = 'freehand-draw';
                 this.cancelPen();
                 break;
             case parent.activeObj.shape === 'text':
+                editCompleteArgs['action'] = 'text';
                 this.cancelText();
                 break;
             case shapes.indexOf(parent.activeObj.shape) !== -1:
+                editCompleteArgs['action'] = parent.activeObj.shape;
                 this.cancelShape();
+                parent.currObjType.isRedact = false;
                 break;
             case isCropSelection:
+                editCompleteArgs['action'] = 'crop-selection';
                 this.cancelSelection();
                 break;
             default:
@@ -2780,7 +2877,7 @@ var Draw = /** @class */ (function () {
         parent.notify('selection', { prop: 'setCurrentDrawingShape', onPropertyChange: false, value: { value: '' } });
         parent.upperCanvas.style.cursor = parent.cursor = 'default';
         parent.currObjType.isCustomCrop = false;
-        this.tempStrokeSettings = { strokeColor: '#fff', fillColor: '', strokeWidth: null };
+        this.tempStrokeSettings = { strokeColor: '#fff', fillColor: '', strokeWidth: null, radius: null, outlineColor: '', outlineWidth: null };
         var eventargs = { type: 'main', isApplyBtn: null, isCropping: false, isZooming: null };
         parent.notify('toolbar', { prop: 'refresh-toolbar', onPropertyChange: false, value: eventargs });
     };
@@ -2798,8 +2895,9 @@ var Draw = /** @class */ (function () {
         parent.freehandCounter = this.tempFreehandCounter;
         parent.notify('freehand-draw', { prop: 'setCurrentFreehandDrawIndex', value: { value: this.tempCurrFhdIndex } });
         parent.activeObj.strokeSettings = this.tempStrokeSettings;
-        parent.notify('shape', { prop: 'setStrokeSettings',
-            value: { strokeSettings: parent.activeObj.strokeSettings, strokeColor: null, fillColor: null, strokeWidth: null } });
+        parent.notify('shape', { prop: 'setStrokeSettings', value: { strokeSettings: parent.activeObj.strokeSettings, strokeColor: null,
+                fillColor: null, strokeWidth: null, radius: null } });
+        parent.notify('freehand-draw', { prop: 'setPenStrokeWidth', onPropertyChange: false, value: { value: this.tempStrokeWidth } });
         parent.notify('undo-redo', { prop: 'updateCurrUrc', value: { type: 'cancel' } });
         parent.notify('selection', { prop: 'setFreehandDrawCustomized', value: { isFreehandDrawCustomized: false } });
         parent.objColl = extend([], this.tempObjColl, [], true);
@@ -2814,7 +2912,7 @@ var Draw = /** @class */ (function () {
         parent.notify('shape', { prop: 'setTextSettings', onPropertyChange: false,
             value: { textSettings: this.tempTextSettings, fontFamily: null, fontSize: null } });
         parent.notify('shape', { prop: 'setStrokeSettings',
-            value: { strokeSettings: this.tempStrokeSettings, strokeColor: null, fillColor: null, strokeWidth: null } });
+            value: { strokeSettings: this.tempStrokeSettings, strokeColor: null, fillColor: null, strokeWidth: null, radius: null } });
         if (isNullOrUndefined(parent.activeObj.currIndex)) {
             parent.notify('shape', { prop: 'refreshActiveObj', onPropertyChange: false });
             this.upperContext.clearRect(0, 0, parent.upperCanvas.width, parent.upperCanvas.height);
@@ -2846,7 +2944,7 @@ var Draw = /** @class */ (function () {
     Draw.prototype.cancelShape = function () {
         var parent = this.parent;
         parent.notify('shape', { prop: 'setStrokeSettings',
-            value: { strokeSettings: this.tempStrokeSettings, strokeColor: null, fillColor: null, strokeWidth: null } });
+            value: { strokeSettings: this.tempStrokeSettings, strokeColor: null, fillColor: null, strokeWidth: null, radius: null } });
         if (isNullOrUndefined(parent.activeObj.currIndex)) {
             parent.notify('shape', { prop: 'refreshActiveObj', onPropertyChange: false });
             this.upperContext.clearRect(0, 0, parent.upperCanvas.width, parent.upperCanvas.height);
@@ -3097,6 +3195,7 @@ var Draw = /** @class */ (function () {
         var selectionChangingArgs = { action: 'insert', previousSelectionSettings: selectionSettings,
             currentSelectionSettings: selectionSettings };
         parent.trigger('selectionChanging', selectionChangingArgs);
+        parent.editCompleteArgs = selectionChangingArgs;
         parent.notify('shape', { prop: 'updSelChangeEventArgs', onPropertyChange: false,
             value: { selectionSettings: selectionChangingArgs.currentSelectionSettings } });
         if (selectionChangingArgs.currentSelectionSettings.type === 'Custom') {
@@ -3299,8 +3398,11 @@ var Draw = /** @class */ (function () {
         var tempTogglePen = parent.togglePen;
         parent.togglePen = false;
         this.lowerContext.filter = 'none';
+        var widthObj = { penStrokeWidth: null };
+        parent.notify('freehand-draw', { prop: 'getPenStrokeWidth', onPropertyChange: false, value: { obj: widthObj } });
         parent.notify('shape', { prop: 'drawAnnotations', onPropertyChange: false,
             value: { ctx: this.lowerContext, shape: 'iterate', pen: 'iterate', isPreventApply: null } });
+        parent.notify('freehand-draw', { prop: 'setPenStrokeWidth', onPropertyChange: false, value: { value: widthObj['penStrokeWidth'] } });
         parent.img.destLeft += parent.panPoint.totalPannedInternalPoint.x;
         parent.img.destTop += parent.panPoint.totalPannedInternalPoint.y;
         parent.img.destLeft -= parent.panPoint.totalPannedInternalPoint.x;
@@ -3353,7 +3455,7 @@ var Draw = /** @class */ (function () {
                 value: { context: this.lowerContext, isSave: null, isFlip: null } });
         }
     };
-    Draw.prototype.setCurrentObj = function (obj, isUndoRedo) {
+    Draw.prototype.setCurrentObj = function (obj, isUndoRedo, isCircleCropped) {
         var parent = this.parent;
         var isObj = obj ? true : false;
         if (!isObj) {
@@ -3405,6 +3507,7 @@ var Draw = /** @class */ (function () {
         }
         this.lowerContext.filter = obj.filter;
         parent.notify('filter', { prop: 'setBrightnessAdjusted', onPropertyChange: false, value: { isBrightnessAdjusted: obj.isBrightAdjust } });
+        parent.notify('draw', { prop: 'imageBackgroundColor', onPropertyChange: false, value: { color: obj.bgColor } });
         var isCircleCrop = parent.isCircleCrop;
         var currSelectionPoint;
         if (isNullOrUndefined(parent.currSelectionPoint)) {
@@ -3415,6 +3518,9 @@ var Draw = /** @class */ (function () {
             parent.currSelectionPoint = null;
         }
         parent.isCircleCrop = false;
+        if (isCircleCropped) {
+            parent.frameObj.type = 'none';
+        }
         this.drawCropSelectionImage(obj, false);
         if (parent.transform.degree !== 0) {
             if (parent.transform.currFlipState === '') {
@@ -3535,6 +3641,16 @@ var Draw = /** @class */ (function () {
     Draw.prototype.performPointZoom = function (x, y, type, isResize, value) {
         var parent = this.parent;
         var _a = parent.img, destLeft = _a.destLeft, destTop = _a.destTop, destWidth = _a.destWidth, destHeight = _a.destHeight;
+        var isCropSelection = false;
+        if (parent.activeObj.shape && parent.activeObj.shape.indexOf('crop-') > -1) {
+            isCropSelection = true;
+        }
+        if (parent.element.querySelector('.e-contextual-toolbar-wrapper') && !isCropSelection) {
+            if (!parent.element.querySelector('.e-contextual-toolbar-wrapper').classList.contains('e-hide')) {
+                parent.okBtn();
+                parent.element.querySelector('.e-contextual-toolbar-wrapper').classList.add('e-hide');
+            }
+        }
         var ratioX = (x - destLeft) / destWidth;
         var ratioY = (y - destTop) / destHeight;
         var isUndoRedo = parent.isUndoRedo;
@@ -3669,6 +3785,7 @@ var Draw = /** @class */ (function () {
         var parent = this.parent;
         var activeObj = extend({}, parent.activeObj, {}, true);
         var _a = activeObj.activePoint, startX = _a.startX, startY = _a.startY, width = _a.width, height = _a.height;
+        this.allowRedactStraighten = true;
         var straightenObj = { straightenPoint: null };
         parent.notify('freehand-draw', { prop: 'getStraightenPoint', onPropertyChange: false,
             value: { obj: straightenObj } });
@@ -3815,6 +3932,8 @@ var Draw = /** @class */ (function () {
                         return [3 /*break*/, 3];
                     case 2:
                         ex_1 = _a.sent();
+                        // eslint-disable-next-line no-console
+                        console.log(ex_1.message);
                         return [3 /*break*/, 3];
                     case 3: return [2 /*return*/];
                 }
@@ -4132,6 +4251,10 @@ var Draw = /** @class */ (function () {
                 tempCanvas.getContext('2d').drawImage(img, 0, 0, tempCanvas.width, tempCanvas.height);
             }
             else {
+                if (this.imageBackgroundColor !== '') {
+                    ctx.fillStyle = this.imageBackgroundColor;
+                    ctx.fillRect(parent.img.destLeft, parent.img.destTop, parent.img.destWidth, parent.img.destHeight);
+                }
                 tempCanvas.getContext('2d').drawImage(canvas, parent.img.srcLeft, parent.img.srcTop, parent.img.srcWidth, parent.img.srcHeight, 0, 0, tempCanvas.width, tempCanvas.height);
             }
             if (isImgAnnotation || this.isDownScale) {
@@ -4192,9 +4315,16 @@ var Draw = /** @class */ (function () {
         else {
             if ((isNullOrUndefined(isImgAnnotation) || !isImgAnnotation) && parent.baseImgCanvas.width !== 0 &&
                 parent.baseImgCanvas.height !== 0) {
+                if (this.imageBackgroundColor !== '') {
+                    ctx.fillStyle = this.imageBackgroundColor;
+                    ctx.fillRect(parent.img.destLeft, parent.img.destTop, parent.img.destWidth, parent.img.destHeight);
+                }
                 ctx.drawImage(parent.baseImgCanvas, parent.img.srcLeft, parent.img.srcTop, parent.img.srcWidth, parent.img.srcHeight, parent.img.destLeft, parent.img.destTop, parent.img.destWidth, parent.img.destHeight);
             }
         }
+        if (parent.isSafari) {
+            parent.notify('filter', { prop: 'apply-filter', onPropertyChange: false, value: { context: ctx } });
+        }
     };
     Draw.prototype.downScale = function (canvas, width, height, isImgAnnotation) {
         var parent = this.parent;
@@ -4535,6 +4665,7 @@ var Draw = /** @class */ (function () {
         var frameChange = { cancel: false, previousFrameSetting: prevFrameSettings,
             currentFrameSetting: currFrameSettings };
         parent.trigger('frameChange', frameChange);
+        parent.editCompleteArgs = frameChange;
         if (!frameChange.cancel) {
             this.setFrameObj(frameChange.currentFrameSetting);
         }
@@ -4556,6 +4687,7 @@ var Draw = /** @class */ (function () {
         var parent = this.parent;
         if (this.straightenActObj && JSON.stringify(this.straightenActObj.activePoint) === JSON.stringify(activeObj.activePoint)) {
             parent.activeObj = extend({}, this.straightenActObj, null, true);
+            this.allowRedactStraighten = false;
             if (parent.transform.straighten === 0) {
                 var destWidth = parent.img.destWidth;
                 var destHeight = parent.img.destHeight;
@@ -4727,12 +4859,18 @@ var Draw = /** @class */ (function () {
             p3 = { x: destLeft + destWidth - (points[0].x / width), y: destTop + destHeight };
             p4 = { x: destLeft, y: destTop + destHeight - (points[1].y / height) };
         }
-        else {
+        else if (parent.transform.straighten < 0) {
             p1 = { x: destLeft, y: destTop + (points[0].y / height) };
             p2 = { x: destLeft + (points[1].x / width), y: destTop };
             p3 = { x: destLeft + destWidth, y: destTop + destHeight - (points[0].y / height) };
             p4 = { x: destLeft + destWidth - (points[1].x / width), y: destTop + destHeight };
         }
+        else if (parent.transform.straighten === 0) {
+            p1 = { x: destLeft, y: destTop };
+            p2 = { x: destLeft + destWidth, y: destTop };
+            p3 = { x: destLeft + destWidth, y: destTop + destHeight };
+            p4 = { x: destLeft, y: destTop + destHeight };
+        }
         p1.ratioX = (p1.x - destLeft) / destWidth;
         p1.ratioY = (p1.y - destTop) / destHeight;
         p2.ratioX = (p2.x - destLeft) / destWidth;
@@ -4746,6 +4884,30 @@ var Draw = /** @class */ (function () {
     Draw.prototype.isLinesIntersect = function (obj) {
         var parent = this.parent;
         var point = parent.activeObj.activePoint;
+        if (parent.activeObj.rotatedAngle !== 0) {
+            var _a = parent.activeObj.activePoint, startX = _a.startX, startY = _a.startY, endX = _a.endX, endY = _a.endY, width = _a.width, height = _a.height;
+            var center = { x: startX + (width / 2), y: startY +
+                    (height / 2) };
+            var cosAngle = Math.cos(parent.activeObj.rotatedAngle);
+            var sinAngle = Math.sin(parent.activeObj.rotatedAngle);
+            var p1 = { x: cosAngle * (startX - center.x) - sinAngle * (startY - center.y) + center.x,
+                y: sinAngle * (startX - center.x) + cosAngle * (startY - center.y) + center.y };
+            var p2 = { x: cosAngle * (endX - center.x) - sinAngle * (startY - center.y) + center.x,
+                y: sinAngle * (endX - center.x) + cosAngle * (startY - center.y) + center.y };
+            var p3 = { x: cosAngle * (startX - center.x) - sinAngle * (endY - center.y) + center.x,
+                y: sinAngle * (startX - center.x) + cosAngle * (endY - center.y) + center.y };
+            var p4 = { x: cosAngle * (endX - center.x) - sinAngle * (endY - center.y) + center.x,
+                y: sinAngle * (endX - center.x) + cosAngle * (endY - center.y) + center.y };
+            var imgPoints_1 = this.imgCanvasPoints;
+            var isTopIntersect_1 = this.doIntersect(p1, p2, imgPoints_1[0], imgPoints_1[1]);
+            var isRightIntersect_1 = this.doIntersect(p2, p4, imgPoints_1[1], imgPoints_1[2]);
+            var isBottomIntersect_1 = this.doIntersect(p3, p4, imgPoints_1[2], imgPoints_1[3]);
+            var isLeftIntersect_1 = this.doIntersect(p1, p3, imgPoints_1[3], imgPoints_1[0]);
+            if (obj) {
+                obj['arr'] = [isTopIntersect_1, isRightIntersect_1, isBottomIntersect_1, isLeftIntersect_1];
+            }
+            return isTopIntersect_1 || isRightIntersect_1 || isBottomIntersect_1 || isLeftIntersect_1;
+        }
         var imgPoints = this.imgCanvasPoints;
         var isTopIntersect = this.doIntersect({ x: point.startX, y: point.startY }, { x: point.endX, y: point.startY }, imgPoints[0], imgPoints[1]);
         var isRightIntersect = this.doIntersect({ x: point.endX, y: point.startY }, { x: point.endX, y: point.endY }, imgPoints[1], imgPoints[2]);
@@ -4890,6 +5052,176 @@ var Draw = /** @class */ (function () {
             parent.img.destHeight = destHeight;
         }
     };
+    Draw.prototype.drawRedact = function (canvasDraw, obj) {
+        var _a = obj.activePoint, startX = _a.startX, startY = _a.startY, endX = _a.endX, endY = _a.endY;
+        var _b = obj.activePoint, width = _b.width, height = _b.height;
+        var isSaveCtx = false;
+        var canvas = canvasDraw.canvas;
+        if (canvas.id.indexOf('_tempCanvas') !== -1) {
+            isSaveCtx = true;
+        }
+        var img = this.parent.img;
+        if (width <= 0 || height <= 0) {
+            return;
+        }
+        else if (this.parent.isCropTab) {
+            canvasDraw.drawImage(obj.redactImage, 0, 0, obj.redactImage.width, obj.redactImage.height, startX, startY, width, height);
+        }
+        else {
+            var offscreenCanvas = document.createElement('canvas');
+            var offscreenCtx = offscreenCanvas.getContext('2d');
+            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;
+            if (this.allowRedactStraighten && straighten !== 0) {
+                var tempCanvas = document.createElement('canvas');
+                var tempCtx = tempCanvas.getContext('2d');
+                if (isSaveCtx) {
+                    tempCanvas.width = canvas.width;
+                    tempCanvas.height = canvas.height;
+                    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);
+                }
+                var radians = -straighten * Math.PI / 180;
+                var straightenCanvas = document.createElement('canvas');
+                var straightenCtx = straightenCanvas.getContext('2d');
+                straightenCanvas.width = tempCanvas.width;
+                straightenCanvas.height = tempCanvas.height;
+                if (img.destWidth > canvas.width && !isSaveCtx) {
+                    straightenCanvas.width = canvas.width;
+                }
+                if (img.destHeight > canvas.height && !isSaveCtx) {
+                    straightenCanvas.height = canvas.height;
+                }
+                straightenCtx.save();
+                straightenCtx.translate(tempCanvas.width / 2, tempCanvas.height / 2);
+                straightenCtx.rotate(radians);
+                straightenCtx.drawImage(tempCanvas, -tempCanvas.width / 2, -tempCanvas.height / 2);
+                straightenCtx.restore();
+                if (img.destLeft > 0 && !isSaveCtx) {
+                    startX -= img.destLeft;
+                    endX -= img.destLeft;
+                }
+                if (img.destTop > 0 && !isSaveCtx) {
+                    startY -= img.destTop;
+                    endY -= img.destTop;
+                }
+                var center = { x: startX + (width / 2), y: startY + (height / 2) };
+                var cosAngle = Math.cos(straighten * Math.PI / 180);
+                var sinAngle = Math.sin(straighten * Math.PI / 180);
+                var p1 = { x: cosAngle * (startX - center.x) - sinAngle * (startY - center.y) + center.x,
+                    y: sinAngle * (startX - center.x) + cosAngle * (startY - center.y) + center.y };
+                var p2 = { x: cosAngle * (endX - center.x) - sinAngle * (startY - center.y) + center.x,
+                    y: sinAngle * (endX - center.x) + cosAngle * (startY - center.y) + center.y };
+                var p3 = { x: cosAngle * (startX - center.x) - sinAngle * (endY - center.y) + center.x,
+                    y: sinAngle * (startX - center.x) + cosAngle * (endY - center.y) + center.y };
+                if (!isSaveCtx) {
+                    center = { x: img.destWidth / 2, y: img.destHeight / 2 };
+                    if (img.destWidth > canvas.width) {
+                        center.x = canvas.width / 2;
+                    }
+                    if (img.destHeight > canvas.height) {
+                        center.y = canvas.height / 2;
+                    }
+                }
+                else {
+                    center = { x: canvas.width / 2, y: canvas.height / 2 };
+                }
+                cosAngle = Math.cos(radians);
+                sinAngle = Math.sin(radians);
+                var newP1 = { x: cosAngle * (p1.x - center.x) - sinAngle * (p1.y - center.y) + center.x,
+                    y: sinAngle * (p1.x - center.x) + cosAngle * (p1.y - center.y) + center.y };
+                var newP2 = { x: cosAngle * (p2.x - center.x) - sinAngle * (p2.y - center.y) + center.x,
+                    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 };
+                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);
+                }
+                else {
+                    var pixelSize = (obj.redactPixelate / 100) * 20;
+                    if (isSaveCtx) {
+                        pixelSize = tempRatio * (obj.redactPixelate / 100) * 35;
+                    }
+                    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);
+                }
+            }
+            if (this.parent.activeObj.redactType === 'blur') {
+                if (straighten === 0) {
+                    offscreenCanvas.width = width;
+                    offscreenCanvas.height = height;
+                    offscreenCtx.drawImage((isSaveCtx) ? canvas : this.lowerContext.canvas, startX, startY, width, height, 0, 0, width, height);
+                }
+                if (isSaveCtx) {
+                    var blur_1 = tempRatio * ((obj.redactBlur / 100) * 34);
+                    offscreenCtx.filter = "blur(" + blur_1 + "px)";
+                }
+                else {
+                    offscreenCtx.filter = "blur(" + (obj.redactBlur / 100) * 17 + "px)";
+                }
+                offscreenCtx.drawImage(offscreenCanvas, 0, 0);
+                if (straighten === 0) {
+                    offscreenCtx.drawImage((isSaveCtx) ? canvas : this.lowerContext.canvas, startX, startY, width, height, 0, 0, width, height);
+                }
+                else {
+                    if (img.destLeft > 0 && !isSaveCtx) {
+                        startX += img.destLeft;
+                        endX += img.destLeft;
+                    }
+                    if (img.destTop > 0 && !isSaveCtx) {
+                        startY += img.destTop;
+                        endY += img.destTop;
+                    }
+                }
+                if (this.parent.isSafari) {
+                    this.parent.notify('filter', { prop: 'apply-filter', onPropertyChange: false, value: { context: offscreenCtx } });
+                }
+                canvasDraw.drawImage(offscreenCanvas, 0, 0, width, height, startX, startY, width, height);
+            }
+            else {
+                var pixelSize = (obj.redactPixelate / 100) * 20;
+                if (isSaveCtx) {
+                    pixelSize = tempRatio * (obj.redactPixelate / 100) * 35;
+                }
+                if (straighten === 0) {
+                    offscreenCanvas.width = Math.ceil(width / pixelSize);
+                    offscreenCanvas.height = Math.ceil(height / pixelSize);
+                    offscreenCtx.drawImage((isSaveCtx) ? canvas : this.lowerContext.canvas, startX, startY, width, height, 0, 0, offscreenCanvas.width, offscreenCanvas.height);
+                }
+                else {
+                    if (img.destLeft > 0 && !isSaveCtx) {
+                        startX += img.destLeft;
+                        endX += img.destLeft;
+                    }
+                    if (img.destTop > 0 && !isSaveCtx) {
+                        startY += img.destTop;
+                        endY += img.destTop;
+                    }
+                }
+                canvasDraw.imageSmoothingEnabled = false;
+                canvasDraw.drawImage(offscreenCanvas, 0, 0, offscreenCanvas.width, offscreenCanvas.height, startX, startY, width, height);
+            }
+            obj.redactImage = this.parent.createElement('canvas');
+            obj.redactImage.width = offscreenCanvas.width;
+            obj.redactImage.height = offscreenCanvas.height;
+            obj.redactImage.getContext('2d').drawImage(offscreenCanvas, 0, 0);
+            canvasDraw.beginPath();
+            canvasDraw.rect(startX, startY, width, height);
+            canvasDraw.rect(startX, startY, width, height);
+            canvasDraw.fill('evenodd');
+            canvasDraw.closePath();
+        }
+    };
     return Draw;
 }());
 export { Draw };