@syncfusion/ej2-image-editor 26.2.14 → 27.1.50

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

@@ -1,12 +1,13 @@
 /* eslint-disable no-constant-condition */
 import { EventHandler, extend, isNullOrUndefined } from '@syncfusion/ej2-base';
-import { ShapeType } from '../index';
+import { ShapeType, RedactType } from '../index';
 var Shape = /** @class */ (function () {
     function Shape(parent) {
         this.textSettings = { text: 'Enter Text', fontFamily: '', fontSize: null, fontRatio: null, bold: false, italic: false, underline: false };
-        this.strokeSettings = { strokeColor: '#fff', fillColor: '', strokeWidth: null };
+        this.strokeSettings = { strokeColor: '#fff', fillColor: '', strokeWidth: null, radius: null, outlineColor: '', outlineWidth: null };
         this.keyHistory = ''; // text history
         this.preventFrameAnnotation = false;
+        this.redactType = 'blur';
         this.parent = parent;
         this.addEventListener();
     }
@@ -42,10 +43,10 @@ var Shape = /** @class */ (function () {
                 this.drawPath(args.value['pointColl'], args.value['strokeWidth'], args.value['strokeColor'], args.value['isSelected']);
                 break;
             case 'drawRectangle':
-                this.drawRectangle(args.value['x'], args.value['y'], args.value['width'], args.value['height'], args.value['strokeWidth'], args.value['strokeColor'], args.value['fillColor'], args.value['degree'], args.value['isSelected']);
+                this.drawRectangle(args.value['x'], args.value['y'], args.value['width'], args.value['height'], args.value['strokeWidth'], args.value['strokeColor'], args.value['fillColor'], args.value['degree'], args.value['isSelected'], args.value['radius']);
                 break;
             case 'drawText':
-                this.drawText(args.value['x'], args.value['y'], args.value['text'], args.value['fontFamily'], args.value['fontSize'], args.value['bold'], args.value['italic'], args.value['color'], args.value['isSelected'], args.value['degree']);
+                this.drawText(args.value['x'], args.value['y'], args.value['text'], args.value['fontFamily'], args.value['fontSize'], args.value['bold'], args.value['italic'], args.value['color'], args.value['isSelected'], args.value['degree'], args.value['fillColor'], args.value['outlineColor'], args.value['outlineWidth']);
                 break;
             case 'redrawActObj':
                 this.redrawActObj(args.value['x'], args.value['y'], args.value['isMouseDown']);
@@ -54,7 +55,7 @@ var Shape = /** @class */ (function () {
                 this.apply(args.value['shape'], args.value['obj'], args.value['canvas']);
                 break;
             case 'updateShapeChangeEventArgs':
-                this.updateShapeChangeEventArgs(args.value['shapeSettings']);
+                this.updateShapeChangeEventArgs(args.value['shapeSettings'], args.value['allowShapeOverflow']);
                 break;
             case 'updSelChangeEventArgs':
                 this.updSelChangeEventArgs(args.value['selectionSettings']);
@@ -129,6 +130,9 @@ var Shape = /** @class */ (function () {
             case 'getShapeSettings':
                 this.getShapeSettings(args.value['obj']);
                 break;
+            case 'getRedactSettings':
+                this.getRedactSettings(args.value['obj']);
+                break;
             case 'isPointsInRange':
                 this.isPointsInRange(args.value['x'], args.value['y'], args.value['obj']);
                 break;
@@ -160,6 +164,9 @@ var Shape = /** @class */ (function () {
                 else if (args.value['fontSize']) {
                     this.textSettings.fontSize = args.value['fontSize'];
                 }
+                else if (args.value['radius']) {
+                    this.strokeSettings.radius = args.value['radius'];
+                }
                 break;
             case 'setStrokeSettings':
                 if (args.value['strokeSettings']) {
@@ -174,6 +181,15 @@ var Shape = /** @class */ (function () {
                 else if (args.value['strokeWidth']) {
                     this.strokeSettings.strokeWidth = args.value['strokeWidth'];
                 }
+                else if (args.value['outlineColor']) {
+                    this.strokeSettings.outlineColor = args.value['outlineColor'];
+                }
+                else if (args.value['radius']) {
+                    this.strokeSettings.radius = args.value['radius'];
+                }
+                else if (args.value['outlineWidth']) {
+                    this.strokeSettings.outlineWidth = args.value['outlineWidth'];
+                }
                 break;
             case 'getStrokeSettings':
                 args.value['obj']['strokeSettings'] = this.strokeSettings;
@@ -194,7 +210,7 @@ var Shape = /** @class */ (function () {
                 this.alignTextAreaIntoCanvas();
                 break;
             case 'initializeTextShape':
-                this.initializeTextShape(args.value['text'], args.value['fontFamily'], args.value['fontSize'], args.value['bold'], args.value['italic'], args.value['strokeColor']);
+                this.initializeTextShape(args.value['text'], args.value['fontFamily'], args.value['fontSize'], args.value['bold'], args.value['italic'], args.value['strokeColor'], args.value['fillColor'], args.value['outlineColor'], args.value['outlineWidth']);
                 break;
             case 'stopPathDrawing':
                 this.stopPathDrawing(args.value['e'], args.value['isApply']);
@@ -259,6 +275,12 @@ var Shape = /** @class */ (function () {
             case 'getLowestOrder':
                 args.value['obj']['order'] = this.getLowestOrder();
                 break;
+            case 'drawRedact':
+                this.drawRedact(args.value['x'], args.value['y'], args.value['width'], args.value['height'], args.value['type'], args.value['value']);
+                break;
+            case 'setRedactType':
+                this.redactType = args.value['redactType'];
+                break;
         }
     };
     Shape.prototype.getModuleName = function () {
@@ -284,7 +306,7 @@ var Shape = /** @class */ (function () {
     Shape.prototype.reset = function () {
         this.textSettings =
             { text: 'Enter Text', fontFamily: this.parent.fontFamily.default, fontSize: null, fontRatio: null, bold: false, italic: false, underline: false };
-        this.strokeSettings = { strokeColor: '#fff', fillColor: '', strokeWidth: null };
+        this.strokeSettings = { strokeColor: '#fff', fillColor: '', strokeWidth: null, radius: null, outlineColor: '', outlineWidth: null };
         this.preventFrameAnnotation = false;
     };
     Shape.prototype.drawEllipse = function (x, y, radiusX, radiusY, strokeWidth, strokeColor, fillColor, degree, isSelected) {
@@ -300,20 +322,10 @@ var Shape = /** @class */ (function () {
         this.drawShape('line', strokeWidth, strokeColor, null, start, width, height, null, null, null, null, null, isSelected);
     };
     Shape.prototype.drawPath = function (pointColl, strokeWidth, strokeColor, isSelected) {
-        var parent = this.parent;
         this.initializeShape('path');
         if (pointColl) {
             this.drawShape('path', strokeWidth, strokeColor, null, null, null, null, pointColl, null, null, null, null, isSelected);
         }
-        else {
-            this.drawShape('line', strokeWidth, strokeColor, null, null, null, null, null, null, null, null, null, isSelected);
-            var obj = extend({}, parent.objColl[parent.objColl.length - 1], null, true);
-            obj.shape = 'path';
-            obj.lineDraw = null;
-            obj.pointColl = [{ x: obj.activePoint.startX, y: obj.activePoint.startY },
-                { x: obj.activePoint.endX, y: obj.activePoint.endY }];
-            parent.objColl[parent.objColl.length - 1] = obj;
-        }
     };
     Shape.prototype.drawArrow = function (startX, startY, endX, endY, strokeWidth, strokeColor, arrowStart, arrowEnd, isSelected) {
         this.initializeShape('arrow');
@@ -322,23 +334,24 @@ var Shape = /** @class */ (function () {
         var height = endY - startY;
         this.drawShape('arrow', strokeWidth, strokeColor, null, start, width, height, null, arrowStart, arrowEnd, null, null, isSelected);
     };
-    Shape.prototype.drawRectangle = function (x, y, width, height, strokeWidth, strokeColor, fillColor, degree, isSelected) {
+    Shape.prototype.drawRectangle = function (x, y, width, height, strokeWidth, strokeColor, fillColor, degree, isSelected, radius) {
         this.initializeShape('rectangle');
         var start = x && y ? { x: x, y: y } : null;
-        this.drawShape('rectangle', strokeWidth, strokeColor, fillColor, start, width, height, null, null, null, degree, null, isSelected);
+        this.drawShape('rectangle', strokeWidth, strokeColor, fillColor, start, width, height, null, null, null, degree, null, isSelected, radius);
     };
-    Shape.prototype.drawText = function (x, y, text, fontFamily, fontSize, bold, italic, color, isSelected, degree) {
-        this.drawShapeText(text, fontFamily, fontSize, bold, italic, color, x, y, isSelected, degree);
+    // eslint-disable-next-line @typescript-eslint/tslint/config
+    Shape.prototype.drawRedact = function (x, y, width, height, type, value) {
+        this.initializeShape('redact');
+        var start = x && y ? { x: x, y: y } : null;
+        this.drawShape('redact', null, null, null, start, width, height, null, null, null, null, null, null, null, type, value);
+    };
+    Shape.prototype.drawText = function (x, y, text, fontFamily, fontSize, bold, italic, color, isSelected, degree, fillColor, outlineColor, outlineWidth) {
+        this.drawShapeText(text, fontFamily, fontSize, bold, italic, color, x, y, isSelected, degree, fillColor, outlineColor, outlineWidth);
     };
     Shape.prototype.initializeShape = function (type) {
         var parent = this.parent;
         this.redrawActObj();
         parent.activeObj.shape = type;
-        if (parent.currObjType.shape === 'freehanddraw') {
-            this.apply();
-            parent.upperCanvas.style.cursor = parent.cursor = 'default';
-            parent.currObjType.shape = '';
-        }
         parent.currObjType.isCustomCrop = false;
     };
     Shape.prototype.updateWidthHeight = function (obj) {
@@ -366,7 +379,7 @@ var Shape = /** @class */ (function () {
         }
         return arrowType;
     };
-    Shape.prototype.drawShape = function (type, strokeWidth, strokeColor, fillColor, start, width, height, pointColl, arrowStart, arrowEnd, degree, opacity, isSelected) {
+    Shape.prototype.drawShape = function (type, strokeWidth, strokeColor, fillColor, start, width, height, pointColl, arrowStart, arrowEnd, degree, opacity, isSelected, radius, redactType, value) {
         var parent = this.parent;
         if (!parent.disabled && parent.isImageLoaded) {
             parent.notify('draw', { prop: 'setImageEdited', onPropertyChange: false });
@@ -377,90 +390,107 @@ var Shape = /** @class */ (function () {
             parent.upperCanvas.style.display = 'block';
             this.refreshActiveObj();
             parent.currObjType.shape = type = type.toLowerCase();
-            if (type === 'path' && isNullOrUndefined(pointColl)) {
+            if (type !== 'freehanddraw' && type !== '') {
                 parent.activeObj.shape = type;
-                parent.activeObj.pointColl = [];
-                parent.upperCanvas.style.cursor = parent.cursor = 'crosshair';
-                parent.notify('selection', { prop: 'setCurrentDrawingShape', onPropertyChange: false, value: { value: 'path' } });
-                parent.notify('toolbar', { prop: 'refresh-toolbar', onPropertyChange: false, value: { type: 'shapes',
-                        isApplyBtn: null, isCropping: null, isZooming: null, cType: null } });
-                parent.notify('toolbar', { prop: 'update-toolbar-items', onPropertyChange: false });
-            }
-            else {
-                if (type !== 'freehanddraw' && type !== '') {
-                    parent.activeObj.shape = type;
-                    var strokeSettings = parent.activeObj.strokeSettings;
-                    this.upperContext.clearRect(0, 0, parent.upperCanvas.width, parent.upperCanvas.height);
-                    if (isNullOrUndefined(strokeSettings)) {
-                        strokeSettings = this.strokeSettings;
-                    }
-                    if (type === 'path' && pointColl) {
-                        parent.activeObj.pointColl = pointColl;
-                    }
-                    if (opacity !== null && opacity !== undefined) {
-                        parent.activeObj.opacity = opacity;
-                    }
-                    strokeSettings.strokeWidth = strokeWidth ? strokeWidth : strokeSettings.strokeWidth;
-                    strokeSettings.strokeColor = strokeColor ? strokeColor : strokeSettings.strokeColor;
-                    strokeSettings.fillColor = fillColor ? fillColor : strokeSettings.fillColor;
-                    var tempWidth = parent.img.destWidth > 100 ? 100 : parent.img.destWidth / 2;
-                    var tempHeight = parent.img.destHeight > 100 ? 100 : parent.img.destHeight / 2;
-                    parent.activeObj.activePoint.width = tempWidth;
-                    parent.activeObj.activePoint.height = tempHeight;
-                    if (type === 'line' || type === 'arrow') {
-                        parent.activeObj.lineDraw = 'horizontal';
-                        parent.activeObj.activePoint.height = 0;
-                        if (type === 'arrow') {
-                            parent.activeObj.activePoint.width += 50;
-                            parent.activeObj.start = this.getArrowType(arrowStart);
-                            parent.activeObj.end = this.getArrowType(arrowEnd);
-                        }
-                    }
-                    else if (type === 'rectangle') {
-                        parent.activeObj.activePoint.width += parent.activeObj.activePoint.width / 2;
-                    }
-                    this.setDimension(width, height);
-                    if (start) {
-                        parent.activeObj.activePoint.startX = start.x;
-                        parent.activeObj.activePoint.startY = start.y;
-                        parent.activeObj.activePoint.endX = parent.activeObj.activePoint.startX +
-                            parent.activeObj.activePoint.width;
-                        parent.activeObj.activePoint.endY = parent.activeObj.activePoint.startY +
-                            parent.activeObj.activePoint.height;
-                    }
-                    else {
-                        this.setCenterPoints();
-                    }
-                    this.setPointCollForLineAndArrow();
+                var strokeSettings = parent.activeObj.strokeSettings;
+                this.upperContext.clearRect(0, 0, parent.upperCanvas.width, parent.upperCanvas.height);
+                if (isNullOrUndefined(strokeSettings)) {
+                    strokeSettings = this.strokeSettings;
+                }
+                if (type === 'path' && pointColl) {
+                    parent.activeObj.pointColl = pointColl;
+                }
+                if (opacity !== null && opacity !== undefined) {
+                    parent.activeObj.opacity = opacity;
+                }
+                strokeSettings.strokeWidth = strokeWidth ? strokeWidth : strokeSettings.strokeWidth;
+                var shape = parent.activeObj.shape;
+                if ((shape === 'rectangle' || shape === 'ellipse') && strokeWidth === 0) {
+                    strokeSettings.strokeWidth = 0;
+                }
+                strokeSettings.strokeColor = strokeColor ? strokeColor : strokeSettings.strokeColor;
+                strokeSettings.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;
+                parent.activeObj.activePoint.width = tempWidth;
+                parent.activeObj.activePoint.height = tempHeight;
+                if (type === 'line' || type === 'arrow') {
+                    parent.activeObj.lineDraw = 'horizontal';
+                    parent.activeObj.activePoint.height = 0;
                     if (type === 'arrow') {
-                        parent.activeObj.triangleDirection = 'right';
-                    }
-                    parent.currObjType.isDragging = parent.currObjType.isCustomCrop = false;
-                    this.initShapeProps();
-                    var obj = { shapeSettingsObj: {} };
-                    parent.notify('selection', { prop: 'updatePrevShapeSettings', onPropertyChange: false, value: { obj: obj } });
-                    var shapeSettings = obj['shapeSettingsObj'];
-                    var shapeChangingArgs = { cancel: false, action: 'insert', previousShapeSettings: shapeSettings,
-                        currentShapeSettings: shapeSettings };
-                    parent.trigger('shapeChanging', shapeChangingArgs);
-                    this.updateShapeChangeEventArgs(shapeChangingArgs.currentShapeSettings);
-                    this.setDimension(width, height);
-                    parent.notify('draw', { prop: 'drawObject', onPropertyChange: false, value: { canvas: 'duplicate' } });
-                    if (degree) {
-                        parent.activeObj.rotatedAngle = degree * (Math.PI / 180);
-                        parent.notify('selection', { prop: 'updPtCollForShpRot', onPropertyChange: false, value: { obj: parent.activeObj } });
+                        parent.activeObj.activePoint.width += 50;
+                        parent.activeObj.start = this.getArrowType(arrowStart);
+                        parent.activeObj.end = this.getArrowType(arrowEnd);
                     }
-                    parent.notify('toolbar', { prop: 'renderQAT', onPropertyChange: false, value: { isPenEdit: null } });
-                    parent.notify('selection', { prop: 'isShapeInserted', onPropertyChange: false, value: { bool: true } });
-                    parent.notify('undo-redo', { prop: 'updateUrObj', onPropertyChange: false, value: { objColl: objColl } });
+                }
+                else if (type === 'rectangle') {
+                    parent.activeObj.activePoint.width += parent.activeObj.activePoint.width / 2;
+                }
+                else if (type === 'redact') {
+                    if (redactType) {
+                        parent.activeObj.redactType = redactType.toLowerCase();
+                        if (redactType === RedactType.Blur) {
+                            if (value) {
+                                parent.activeObj.redactBlur = value;
+                            }
+                        }
+                        else {
+                            if (value) {
+                                parent.activeObj.redactPixelate = value;
+                            }
+                        }
+                        parent.activeObj.redactImage = parent.createElement('canvas');
+                    }
+                }
+                this.setDimension(width, height);
+                if (start) {
+                    parent.activeObj.activePoint.startX = start.x;
+                    parent.activeObj.activePoint.startY = start.y;
+                    parent.activeObj.activePoint.endX = parent.activeObj.activePoint.startX +
+                        parent.activeObj.activePoint.width;
+                    parent.activeObj.activePoint.endY = parent.activeObj.activePoint.startY +
+                        parent.activeObj.activePoint.height;
+                }
+                else {
+                    this.setCenterPoints();
+                }
+                this.setPointCollForLineAndArrow();
+                if (type === 'arrow') {
+                    parent.activeObj.triangleDirection = 'right';
+                }
+                parent.currObjType.isDragging = parent.currObjType.isCustomCrop = false;
+                this.initShapeProps();
+                var obj = { shapeSettingsObj: {} };
+                parent.notify('selection', { prop: 'updatePrevShapeSettings', onPropertyChange: false, value: { obj: obj } });
+                var shapeSettings = obj['shapeSettingsObj'];
+                var shapeChangingArgs = { cancel: false, action: 'insert', previousShapeSettings: shapeSettings,
+                    currentShapeSettings: shapeSettings };
+                parent.trigger('shapeChanging', shapeChangingArgs);
+                parent.editCompleteArgs = shapeChangingArgs;
+                this.updateShapeChangeEventArgs(shapeChangingArgs.currentShapeSettings, shapeChangingArgs.allowShapeOverflow);
+                this.setDimension(width, height);
+                parent.notify('draw', { prop: 'drawObject', onPropertyChange: false, value: { canvas: 'duplicate' } });
+                if (degree) {
+                    parent.activeObj.rotatedAngle = degree * (Math.PI / 180);
+                    parent.notify('selection', { prop: 'updPtCollForShpRot', onPropertyChange: false, value: { obj: parent.activeObj } });
+                }
+                parent.notify('toolbar', { prop: 'renderQAT', onPropertyChange: false, value: { isPenEdit: null } });
+                parent.notify('selection', { prop: 'isShapeInserted', onPropertyChange: false, value: { bool: true } });
+                parent.notify('undo-redo', { prop: 'updateUrObj', onPropertyChange: false, value: { objColl: objColl } });
+                if (type === 'redact') {
+                    parent.notify('toolbar', { prop: 'refresh-toolbar', onPropertyChange: false, value: { type: 'redact',
+                            isApplyBtn: null, isCropping: null, isZooming: null, cType: null } });
+                }
+                else {
                     parent.notify('toolbar', { prop: 'refresh-toolbar', onPropertyChange: false, value: { type: 'shapes',
                             isApplyBtn: null, isCropping: null, isZooming: null, cType: null } });
-                    parent.notify('toolbar', { prop: 'update-toolbar-items', onPropertyChange: false });
-                    if (parent.isPublicMethod && !isSelected) {
-                        parent.notify('undo-redo', { prop: 'updateUndoRedo', value: { operation: 'shapeInsert' }, onPropertyChange: false });
-                    }
-                    parent.isPublicMethod = false;
                 }
+                parent.notify('toolbar', { prop: 'update-toolbar-items', onPropertyChange: false });
+                if (parent.isPublicMethod && !isSelected) {
+                    parent.notify('undo-redo', { prop: 'updateUndoRedo', value: { operation: 'shapeInsert' }, onPropertyChange: false });
+                }
+                parent.isPublicMethod = false;
             }
         }
     };
@@ -501,7 +531,7 @@ var Shape = /** @class */ (function () {
             value: { obj: selPointCollObj } });
         this.prevObj.selPointColl = extend([], selPointCollObj['selPointColl'], [], true);
     };
-    Shape.prototype.drawShapeText = function (text, fontFamily, fontSize, bold, italic, strokeColor, x, y, isSelected, degree) {
+    Shape.prototype.drawShapeText = function (text, fontFamily, fontSize, bold, italic, strokeColor, x, y, isSelected, degree, fillColor, outlineColor, outlineWidth) {
         var parent = this.parent;
         if (!parent.disabled && parent.isImageLoaded) {
             if (parent.currObjType.shape === 'freehanddraw') {
@@ -516,7 +546,7 @@ var Shape = /** @class */ (function () {
             this.refreshActiveObj();
             parent.activeObj.shape = parent.currObjType.shape = 'text';
             parent.currObjType.isCustomCrop = false;
-            this.initializeTextShape(text, fontFamily, fontSize, bold, italic, strokeColor);
+            this.initializeTextShape(text, fontFamily, fontSize, bold, italic, strokeColor, fillColor, outlineColor, outlineWidth);
             parent.currObjType.isText = parent.currObjType.isInitialText = true;
             if (isNullOrUndefined(parent.activeObj.textSettings.fontSize)) {
                 parent.getFontSizes();
@@ -535,7 +565,7 @@ var Shape = /** @class */ (function () {
             parent.activeObj.order = this.getNewOrder();
             var width = this.upperContext.measureText(parent.activeObj.textSettings.text).width +
                 parent.activeObj.textSettings.fontSize * 0.5;
-            var height = parent.activeObj.textSettings.fontSize + parent.activeObj.textSettings.fontSize * 0.25;
+            var height = parent.activeObj.textSettings.fontSize;
             if (!isNullOrUndefined(x) && !isNullOrUndefined(y)) {
                 parent.activeObj.activePoint.startX = x;
                 parent.activeObj.activePoint.startY = y;
@@ -551,6 +581,7 @@ var Shape = /** @class */ (function () {
             var shapeChangingArgs = { cancel: false, action: 'insert', previousShapeSettings: shapeSettings,
                 currentShapeSettings: shapeSettings };
             parent.trigger('shapeChanging', shapeChangingArgs);
+            parent.editCompleteArgs = shapeChangingArgs;
             this.drawShapeTextEvent(shapeChangingArgs);
             if (degree) {
                 parent.activeObj.rotatedAngle = degree * (Math.PI / 180);
@@ -579,7 +610,7 @@ var Shape = /** @class */ (function () {
     };
     Shape.prototype.drawShapeImageEvent = function (shapeChangingArgs, isSelect) {
         var parent = this.parent;
-        this.updateShapeChangeEventArgs(shapeChangingArgs.currentShapeSettings);
+        this.updateShapeChangeEventArgs(shapeChangingArgs.currentShapeSettings, shapeChangingArgs.allowShapeOverflow);
         parent.notify('draw', { prop: 'drawObject', onPropertyChange: false, value: { canvas: 'duplicate' } });
         parent.objColl.push(parent.activeObj);
         var prevCropObj = extend({}, parent.cropObj, {}, true);
@@ -602,7 +633,7 @@ var Shape = /** @class */ (function () {
     };
     Shape.prototype.drawShapeTextEvent = function (shapeChangingArgs) {
         var parent = this.parent;
-        this.updateShapeChangeEventArgs(shapeChangingArgs.currentShapeSettings);
+        this.updateShapeChangeEventArgs(shapeChangingArgs.currentShapeSettings, shapeChangingArgs.allowShapeOverflow);
         this.addLetter(parent.activeObj.textSettings.text);
         parent.activeObj.textFlip = parent.transform.currFlipState;
         this.updateFontRatio(parent.activeObj);
@@ -620,22 +651,19 @@ var Shape = /** @class */ (function () {
                 isApplyBtn: null, isCropping: null, isZooming: null, cType: null } });
         parent.notify('toolbar', { prop: 'update-toolbar-items', onPropertyChange: false });
     };
-    Shape.prototype.initializeTextShape = function (text, fontFamily, fontSize, bold, italic, strokeColor) {
+    Shape.prototype.initializeTextShape = function (text, fontFamily, fontSize, bold, italic, strokeColor, fillColor, outlineColor, outlineWidth) {
         var parent = this.parent;
         this.keyHistory = '';
         parent.upperCanvas.style.display = 'block';
-        if (isNullOrUndefined(parent.activeObj.textSettings)) {
-            parent.activeObj.textSettings = this.textSettings;
-        }
-        if (isNullOrUndefined(parent.activeObj.strokeSettings)) {
-            parent.activeObj.strokeSettings = this.strokeSettings;
-        }
         parent.activeObj.strokeSettings.strokeColor = strokeColor || parent.activeObj.strokeSettings.strokeColor;
+        parent.activeObj.strokeSettings.fillColor = fillColor || parent.activeObj.strokeSettings.fillColor;
         parent.activeObj.textSettings.text = text || parent.activeObj.textSettings.text;
         parent.activeObj.textSettings.fontFamily = fontFamily || parent.activeObj.textSettings.fontFamily;
         parent.activeObj.textSettings.fontSize = fontSize || parent.activeObj.textSettings.fontSize;
         parent.activeObj.textSettings.bold = bold || parent.activeObj.textSettings.bold;
         parent.activeObj.textSettings.italic = italic || parent.activeObj.textSettings.italic;
+        parent.activeObj.strokeSettings.outlineColor = outlineColor || parent.activeObj.strokeSettings.outlineColor;
+        parent.activeObj.strokeSettings.outlineWidth = outlineWidth || parent.activeObj.strokeSettings.outlineWidth;
     };
     Shape.prototype.drawImage = function (x, y, width, height, src, degree, isAspectRatio, opacity, isSelected) {
         this.initializeShape('image');
@@ -743,7 +771,7 @@ var Shape = /** @class */ (function () {
         parent.activeObj.activePoint.endX = parent.activeObj.activePoint.startX + parent.activeObj.activePoint.width;
         parent.activeObj.activePoint.endY = parent.activeObj.activePoint.startY + parent.activeObj.activePoint.height;
     };
-    Shape.prototype.updateShapeChangeEventArgs = function (shapeSettings) {
+    Shape.prototype.updateShapeChangeEventArgs = function (shapeSettings, allowShapeOverflow) {
         var parent = this.parent;
         var shapeId;
         if (shapeSettings.id && shapeSettings.id.indexOf('shape_') === -1 &&
@@ -777,6 +805,7 @@ var Shape = /** @class */ (function () {
             parent.activeObj.strokeSettings.strokeWidth = shapeSettings.strokeWidth;
             parent.activeObj.opacity = shapeSettings.opacity;
             parent.activeObj.order = shapeSettings.index;
+            parent.activeObj.preventShapeDragOut = !allowShapeOverflow;
             if (isNullOrUndefined(shapeSettings.degree)) {
                 shapeSettings.degree = 0;
             }
@@ -835,9 +864,6 @@ var Shape = /** @class */ (function () {
                         case 'italic':
                             parent.activeObj.textSettings.italic = true;
                             break;
-                        case 'underline':
-                            parent.activeObj.textSettings.underline = true;
-                            break;
                     }
                 }
             }
@@ -856,7 +882,7 @@ var Shape = /** @class */ (function () {
             this.upperContext.clearRect(0, 0, parent.upperCanvas.width, parent.upperCanvas.height);
             this.updateFontStyles();
             var width = this.upperContext.measureText(this.keyHistory).width + fontSize * 0.5;
-            var height = fontSize + fontSize * 0.25;
+            var height = fontSize;
             this.upperContext.fillText(this.keyHistory, parent.activeObj.activePoint.startX, parent.activeObj.activePoint.startY + fontSize);
             this.upperContext.clearRect(0, 0, parent.upperCanvas.width, parent.upperCanvas.height);
             parent.currObjType.isText = true;
@@ -879,7 +905,10 @@ var Shape = /** @class */ (function () {
         var text = (parent.textArea.style.display === 'block' || parent.textArea.style.display === 'inline-block') ?
             this.getMaxText(true) : this.getMaxText();
         var width = this.upperContext.measureText(text).width + fontSize * 0.5;
-        var height = rows.length * (fontSize + fontSize * 0.25);
+        var height = rows.length * fontSize;
+        if (rows.length > 1) {
+            height += (fontSize * 0.50);
+        }
         parent.notify('selection', { prop: 'setTextSelection', onPropertyChange: false,
             value: { width: width, height: height } });
         parent.notify('draw', { prop: 'updateActiveObject', onPropertyChange: false, value: { actPoint: parent.activeObj.activePoint, obj: parent.activeObj,
@@ -911,10 +940,11 @@ var Shape = /** @class */ (function () {
         parent.textArea.value = '';
         this.updateFontStyles();
         var width = this.upperContext.measureText(parent.activeObj.keyHistory).width + fontSize * 0.5;
-        var height = fontSize + fontSize * 0.25;
+        var height = fontSize;
         var rows = parent.activeObj.keyHistory.split('\n');
         if (rows.length > 1) {
             height *= rows.length;
+            height += (fontSize * 0.1 * rows.length);
             var widthColl = [];
             for (var i = 0, len = rows.length; i < len; i++) {
                 widthColl.push(this.upperContext.measureText(rows[i]).width + fontSize * 0.5);
@@ -978,6 +1008,14 @@ var Shape = /** @class */ (function () {
                     }
                     if (currentObj.order === index) {
                         this.apply(currentObj.shape, currentObj);
+                        if (currentObj.shape === 'redact' && JSON.stringify(currentObj.activePoint) === JSON.stringify(parent.activeObj.activePoint) &&
+                            currentObj.redactImage !== parent.activeObj.redactImage) {
+                            currentObj.redactImage = parent.activeObj.redactImage;
+                            if (parent.objColl[i] && JSON.stringify(parent.objColl[i].activePoint) ===
+                                JSON.stringify(currentObj.activePoint)) {
+                                parent.objColl[i].redactImage = parent.activeObj.redactImage;
+                            }
+                        }
                         this.refreshActiveObj();
                         index++;
                         if (!this.isIndexInObjColl(index)) {
@@ -1146,12 +1184,14 @@ var Shape = /** @class */ (function () {
         var selPointCollObj = { selPointColl: null };
         parent.notify('freehand-draw', { prop: 'getSelPointColl', onPropertyChange: false, value: { obj: selPointCollObj } });
         for (var i = 0, fLen = parent.freehandCounter; i < fLen; i++) {
-            var len = selPointCollObj['selPointColl'][i].points.length;
-            var point = void 0;
-            for (var l = 0; l < len; l++) {
-                point = this.straightenPoints(selPointCollObj['selPointColl'][i].points[l].x, selPointCollObj['selPointColl'][i].points[l].y);
-                selPointCollObj['selPointColl'][i].points[l].x = point.x;
-                selPointCollObj['selPointColl'][i].points[l].y = point.y;
+            if (selPointCollObj['selPointColl'][i] && selPointCollObj['selPointColl'][i].points) {
+                var len = selPointCollObj['selPointColl'][i].points.length;
+                var point = void 0;
+                for (var l = 0; l < len; l++) {
+                    point = this.straightenPoints(selPointCollObj['selPointColl'][i].points[l].x, selPointCollObj['selPointColl'][i].points[l].y);
+                    selPointCollObj['selPointColl'][i].points[l].x = point.x;
+                    selPointCollObj['selPointColl'][i].points[l].y = point.y;
+                }
             }
         }
         var straightenObj = { straightenPoint: null };
@@ -1592,17 +1632,26 @@ var Shape = /** @class */ (function () {
         var dupElem = parent.element.querySelector('#' + parent.element.id + '_duplicate');
         var removeElem = parent.element.querySelector('#' + parent.element.id + '_remove');
         var editTextElem = parent.element.querySelector('#' + parent.element.id + '_editText');
+        var shadowColor = actObj.strokeSettings.outlineColor;
+        var outlineWidth = actObj.strokeSettings.outlineWidth;
+        var shadows = [];
         if (zOrderElem) {
-            zOrderElem.classList.add('e-disabled');
+            zOrderElem.classList.add('e-overlay');
         }
         if (dupElem) {
-            dupElem.classList.add('e-disabled');
+            dupElem.classList.add('e-overlay');
         }
         if (removeElem) {
-            removeElem.classList.add('e-disabled');
+            removeElem.classList.add('e-overlay');
         }
         if (editTextElem) {
-            editTextElem.classList.add('e-disabled');
+            editTextElem.classList.add('e-overlay');
+        }
+        if (actObj.strokeSettings.fillColor !== '') {
+            parent.textArea.style.backgroundColor = actObj.strokeSettings.fillColor;
+        }
+        else {
+            parent.textArea.style.backgroundColor = 'transparent';
         }
         parent.textArea.style.display = 'block';
         parent.textArea.style.left = x + 'px';
@@ -1610,6 +1659,22 @@ var Shape = /** @class */ (function () {
         parent.textArea.style.fontFamily = actObj.textSettings.fontFamily;
         parent.textArea.style.fontSize = actObj.textSettings.fontSize + 'px';
         parent.textArea.style.color = actObj.strokeSettings.strokeColor;
+        var fontSize = actObj.textSettings.fontSize;
+        var baseWidth = Math.max(1, outlineWidth / 2);
+        var adjustedOutlineWidth = baseWidth * (Math.floor((fontSize - 1) / 16) * 0.5 + 0.5);
+        if (/^#([0-9A-Fa-f]{3}|[0-9A-Fa-f]{6}|[0-9A-Fa-f]{8})$|^[a-zA-Z]+$/.test(actObj.strokeSettings.outlineColor)) {
+            for (var x_1 = -adjustedOutlineWidth; x_1 <= adjustedOutlineWidth; x_1++) {
+                for (var y_1 = -adjustedOutlineWidth; y_1 <= adjustedOutlineWidth; y_1++) {
+                    if (x_1 !== 0 || y_1 !== 0) {
+                        shadows.push(x_1 / 2 + "px " + y_1 / 2 + "px 0 " + shadowColor);
+                    }
+                }
+            }
+            parent.textArea.style.textShadow = shadows.join(', ');
+        }
+        else {
+            parent.textArea.style.textShadow = null;
+        }
         parent.textArea.style.fontWeight = actObj.textSettings.bold ? 'bold' : 'normal';
         parent.textArea.style.fontStyle = actObj.textSettings.italic ? 'italic' : 'normal';
         parent.textArea.style.border = '2px solid ' + parent.themeColl[parent.theme]['primaryColor'];
@@ -1618,15 +1683,14 @@ var Shape = /** @class */ (function () {
         parent.textArea.style.width = 'auto';
         parent.textArea.style.height = 'auto';
         parent.textArea.focus();
-        var zoomFactor = parent.transform.zoomFactor;
         var _a = actObj.activePoint, width = _a.width, height = _a.height;
         if (degree % 90 === 0 && degree % 180 !== 0 && degree !== 0) {
-            parent.textArea.style.width = (zoomFactor === 0 ? height : height) + 'px';
-            parent.textArea.style.height = (zoomFactor === 0 ? width : width) + 'px';
+            parent.textArea.style.width = height + (height * 0.25) + 'px';
+            parent.textArea.style.height = width + (width * 0.25) + 'px';
         }
         else {
-            parent.textArea.style.width = (zoomFactor === 0 ? width : width) + 'px';
-            parent.textArea.style.height = (zoomFactor === 0 ? height : height) + 'px';
+            parent.textArea.style.width = width + (width * 0.25) + 'px';
+            parent.textArea.style.height = height + (height * 0.25) + 'px';
         }
         this.setTextBoxWidth();
         var obj = { flipColl: null };
@@ -1902,11 +1966,22 @@ var Shape = /** @class */ (function () {
                     parent.notify('selection', { prop: 'mouseUpEventHandler', value: { e: e } });
                     this.lowerContext.clearRect(0, 0, parent.lowerCanvas.width, parent.lowerCanvas.height);
                     parent.notify('draw', { prop: 'redrawImgWithObj', onPropertyChange: false });
+                    if (parent.objColl.length > 0) {
+                        var obj1 = parent.activeObj.activePoint;
+                        var obj2 = parent.objColl[parent.objColl.length - 1].activePoint;
+                        if (Math.floor(obj1.startX) === Math.floor(obj2.startX) &&
+                            Math.floor(obj1.startY) === Math.floor(obj2.startY) &&
+                            Math.floor(obj1.endX) === Math.floor(obj2.endX) &&
+                            Math.floor(obj1.endY) === Math.floor(obj2.endY)) {
+                            this.refreshActiveObj();
+                        }
+                    }
                 }
                 parent.notify('draw', { prop: 'setNewPath', value: { bool: true } });
                 if (parent.objColl[parent.objColl.length - 1]) {
                     var shape = parent.drawingShape;
                     parent.notify('selection', { prop: 'setCurrentDrawingShape', value: { value: '' } });
+                    parent.noRedact = true;
                     parent.selectShape(parent.objColl[parent.objColl.length - 1].currIndex);
                     parent.notify('selection', { prop: 'setCurrentDrawingShape', value: { value: 'path' } });
                     parent.drawingShape = shape;
@@ -1925,12 +2000,16 @@ var Shape = /** @class */ (function () {
     };
     Shape.prototype.findTextTarget = function (e) {
         var parent = this.parent;
+        if (!e) {
+            return;
+        }
         if (parent.activeObj.shape !== 'text') {
             if (parent.activeObj.shape === 'path') {
                 this.stopPathDrawing(e, null);
                 return;
             }
             else if (e.type === 'dblclick') {
+                parent.notify('selection', { prop: 'setPanDown', onPropertyChange: false, value: { panDown: null } });
                 var activeObj = extend({}, parent.activeObj, {}, true);
                 var objColl = extend([], parent.objColl, [], true);
                 var obj = { bool: null };
@@ -2143,7 +2222,7 @@ var Shape = /** @class */ (function () {
         var filesData = e.target.files[0];
         /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
         var fileData = filesData;
-        var fileExtension = fileData.name && fileData.name.split('.')[1].toLowerCase();
+        var fileExtension = fileData.name && fileData.name.split('.').pop().toLowerCase();
         if (fileExtension && ['jpg', 'jpeg', 'png', 'svg'].indexOf(fileExtension) === -1) {
             this.refreshActiveObj();
             return;
@@ -2225,6 +2304,7 @@ var Shape = /** @class */ (function () {
         var shapeChangingArgs = { cancel: false, action: 'insert', previousShapeSettings: shapeSettings,
             currentShapeSettings: shapeSettings };
         parent.trigger('shapeChanging', shapeChangingArgs);
+        parent.editCompleteArgs = shapeChangingArgs;
         isSelect = isSelect ? isSelect : isSelected;
         this.drawShapeImageEvent(shapeChangingArgs, isSelect);
         if (parent.isPublicMethod && !isSelected) {
@@ -2516,6 +2596,7 @@ var Shape = /** @class */ (function () {
         var shapeChangedArgs = { action: 'font-style', currentShapeSettings: extend({}, shapeSettings, {}, true) };
         shapeChangedArgs.currentShapeSettings.fontStyle = [item];
         parent.trigger('shapeChange', shapeChangedArgs);
+        parent.editCompleteArgs = shapeChangedArgs;
     };
     Shape.prototype.updateFontStyle = function (item, objColl, fontWeight, fontStyle) {
         var parent = this.parent;
@@ -2595,7 +2676,7 @@ var Shape = /** @class */ (function () {
         var text = this.getMaxText(isTextArea);
         var width = this.upperContext.measureText(text).width +
             parent.activeObj.textSettings.fontSize * 0.5;
-        var height = (parent.activeObj.textSettings.fontSize + parent.activeObj.textSettings.fontSize * 0.25);
+        var height = parent.activeObj.textSettings.fontSize;
         var degree = this.getRotDegOfShape(obj);
         if (isNullOrUndefined(isTextArea)) {
             if (degree === 0 || Math.abs(degree) === 180) {
@@ -2696,6 +2777,9 @@ var Shape = /** @class */ (function () {
         parent.activeObj.textSettings = this.textSettings;
         parent.activeObj.rotatedAngle = 0;
         parent.activeObj.opacity = 1;
+        parent.activeObj.redactType = this.redactType;
+        parent.activeObj.redactBlur = parent.tempRedactBlur;
+        parent.activeObj.redactPixelate = parent.tempRedactPixel;
     };
     Shape.prototype.applyActObj = function (isMouseDown) {
         var parent = this.parent;
@@ -2884,6 +2968,25 @@ var Shape = /** @class */ (function () {
         parent.activeObj.textSettings.italic = tempItalic;
         return width;
     };
+    Shape.prototype.getRedactObjDetails = function (obj) {
+        var parent = this.parent;
+        var redactDetails = {};
+        redactDetails.id = obj.currIndex;
+        redactDetails.type = parent.toPascalCase(obj.redactType);
+        redactDetails.startX = obj.activePoint.startX;
+        redactDetails.startY = obj.activePoint.startY;
+        redactDetails.width = obj.activePoint.width;
+        redactDetails.height = obj.activePoint.height;
+        switch (obj.redactType) {
+            case 'blur':
+                redactDetails.blurIntensity = obj.redactBlur;
+                break;
+            case 'pixelate':
+                redactDetails.pixelSize = obj.redactPixelate;
+                break;
+        }
+        return redactDetails;
+    };
     Shape.prototype.getObjDetails = function (obj) {
         var parent = this.parent;
         var shapeDetails = {};
@@ -3012,6 +3115,23 @@ var Shape = /** @class */ (function () {
         }
         obj['shapeDetailsColl'] = shapeDetailsColl;
     };
+    Shape.prototype.getRedactSettings = function (obj) {
+        var parent = this.parent;
+        var RedactDetailsColl = [];
+        if (!parent.disabled && parent.isImageLoaded) {
+            if (parent.textArea.style.display !== 'none') {
+                parent.okBtn(null, true);
+            }
+            else {
+                this.applyActObj(true);
+            }
+            for (var i = 0, len = parent.objColl.length; i < len; i++) {
+                var redactDetails = this.getRedactObjDetails(parent.objColl[i]);
+                RedactDetailsColl.push(redactDetails);
+            }
+        }
+        obj['shapeDetailsColl'] = RedactDetailsColl;
+    };
     Shape.prototype.isPointsInRange = function (x, y, obj) {
         var inRange = false;
         var parent = this.parent;
@@ -3158,6 +3278,10 @@ var Shape = /** @class */ (function () {
                         parent.notify('toolbar', { prop: 'refresh-toolbar', onPropertyChange: false, value: { type: 'pen',
                                 isApplyBtn: null, isCropping: null, isZooming: null, cType: null } });
                     }
+                    else if (parent.activeObj.shape === 'redact') {
+                        parent.notify('toolbar', { prop: 'refresh-toolbar', onPropertyChange: false, value: { type: 'redact',
+                                isApplyBtn: null, isCropping: null, isZooming: null, cType: null } });
+                    }
                     else {
                         parent.notify('toolbar', { prop: 'refresh-toolbar', onPropertyChange: false, value: { type: 'shapes',
                                 isApplyBtn: null, isCropping: null, isZooming: null, cType: null } });
@@ -3554,11 +3678,20 @@ var Shape = /** @class */ (function () {
                 break;
         }
     };
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    Shape.prototype.reorderRedact = function (tempObjColl) {
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        var nonRedact = tempObjColl.filter(function (item) { return item.shape !== 'redact'; });
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        var redact = tempObjColl.filter(function (item) { return item.shape === 'redact'; });
+        return redact.concat(nonRedact);
+    };
     Shape.prototype.updateShapeColl = function () {
         var parent = this.parent;
         var isOrdered = false;
         var tempOrder = 1;
         var tempObjColl = extend([], parent.objColl, [], true);
+        tempObjColl = this.reorderRedact(tempObjColl);
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
         var tempPointColl = extend([], parent.pointColl, [], true);
         if (parent.shapeColl.length > 0 &&
@@ -3660,9 +3793,16 @@ var Shape = /** @class */ (function () {
         var tempObjColl = extend([], parent.objColl, [], true);
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
         var tempPointColl = extend([], parent.pointColl, [], true);
+        var tempSelPointCollObj = { selPointColl: null };
+        parent.notify('freehand-draw', { prop: 'getSelPointColl', onPropertyChange: false,
+            value: { obj: tempSelPointCollObj } });
+        var selPointCollObj = { selPointColl: null };
+        parent.notify('freehand-draw', { prop: 'getSelPointColl', onPropertyChange: false,
+            value: { obj: selPointCollObj } });
         this.updateShapeColl();
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
         var tempShapeColl = extend([], parent.shapeColl, [], true);
+        tempShapeColl = this.reorderRedact(tempShapeColl);
         var isPrevented = false;
         if (!this.preventFrameAnnotation) {
             this.preventFrameAnnotation = isPrevented = true;
@@ -3703,7 +3843,10 @@ var Shape = /** @class */ (function () {
                 else if (tempShapeColl[i].id && tempShapeColl[i].id.indexOf('pen') > -1) {
                     parent.pointColl = [];
                     parent.freehandCounter = 0;
+                    parent.notify('freehand-draw', { prop: 'setSelPointColl', onPropertyChange: false, value: { obj: { selPointColl: [] } } });
                     parent.pointColl.push(extend({}, tempShapeColl[i], {}, true));
+                    parent.notify('freehand-draw', { prop: 'pushSelPointColl', onPropertyChange: false,
+                        value: { obj: { selPointColl: selPointCollObj['selPointColl'][i] } } });
                     parent.freehandCounter = parent.pointColl.length;
                     if (pen === 'iterate') {
                         parent.notify('freehand-draw', { prop: 'freehandRedraw', onPropertyChange: false,
@@ -3724,6 +3867,12 @@ var Shape = /** @class */ (function () {
                                 break;
                             }
                         }
+                        for (var i_5 = 0, len = tempSelPointCollObj['selPointColl'].length; i_5 < len; i_5++) {
+                            if (tempSelPointCollObj['selPointColl'][i_5].id === selPointCollObj['selPointColl'][i_5].id) {
+                                tempSelPointCollObj['selPointColl'][i_5] = extend({}, selPointCollObj['selPointColl'][i_5], {}, true);
+                                break;
+                            }
+                        }
                     }
                 }
             }
@@ -3740,6 +3889,7 @@ var Shape = /** @class */ (function () {
         parent.objColl = tempObjColl;
         parent.pointColl = tempPointColl;
         parent.freehandCounter = parent.pointColl.length;
+        parent.notify('freehand-draw', { prop: 'setSelPointColl', onPropertyChange: false, value: { obj: { selPointColl: tempSelPointCollObj['selPointColl'] } } });
         if (isPrevented && this.preventFrameAnnotation) {
             parent.notify('draw', { prop: 'applyFrame', value: { ctx: this.lowerContext, frame: parent.frameObj.type, preventImg: true } });
             this.preventFrameAnnotation = false;