@syncfusion/ej2-image-editor 26.2.14 → 27.1.48

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

@@ -38,6 +38,7 @@ var Selection = /** @class */ (function () {
         this.mouseDown = '';
         this.isSliderActive = false;
         this.arrowShape = [ArrowheadType.None, ArrowheadType.SolidArrow];
+        this.isTouchDblClick = false;
         this.parent = parent;
         this.addEventListener();
     }
@@ -306,6 +307,18 @@ var Selection = /** @class */ (function () {
             case 'updateSEPoints':
                 this.updateSEPoints(args.value['x'], args.value['y']);
                 break;
+            case 'drawMaskCircle':
+                this.drawMaskCircle(args.value['x'], args.value['y']);
+                break;
+            case 'isValueUpdated':
+                this.isValueUpdated();
+                break;
+            case 'getDistance':
+                this.getDistance(args.value['x'], args.value['y']);
+                break;
+            case 'redact':
+                this.currentDrawingShape = args.value['shape'];
+                break;
         }
     };
     Selection.prototype.getModuleName = function () {
@@ -329,6 +342,7 @@ var Selection = /** @class */ (function () {
             flipObjColl: [], triangle: [], triangleRatio: [], order: null };
         this.isFirstMove = false;
         this.cursorTargetId = this.dragElement = '';
+        this.isTouchDblClick = false;
         this.startTouches = [];
         this.tempTouches = [];
         this.currMousePoint = { x: 0, y: 0 };
@@ -458,6 +472,12 @@ var Selection = /** @class */ (function () {
         }
         var isCropSelection = false;
         var splitWords;
+        if (parent.activeObj.shape) {
+            splitWords = parent.activeObj.shape.split('-');
+        }
+        if ((!splitWords && parent.currObjType.isCustomCrop) || (splitWords && splitWords[0] === 'crop')) {
+            isCropSelection = true;
+        }
         if (parent.currObjType.isDragging) {
             if (this.dragElement === '') {
                 parent.upperCanvas.style.cursor = parent.cursor = 'move';
@@ -469,6 +489,10 @@ var Selection = /** @class */ (function () {
         }
         if (parent.togglePen) {
             parent.upperCanvas.style.cursor = parent.cursor = 'crosshair';
+            if (parent.isMaskImage) {
+                this.drawMaskCircle(x, y);
+                parent.upperCanvas.style.cursor = 'none';
+            }
             return;
         }
         if (parent.activeObj.shape) {
@@ -550,6 +574,22 @@ var Selection = /** @class */ (function () {
         }
         return highestOrder;
     };
+    Selection.prototype.drawMaskCircle = function (x, y) {
+        var parent = this.parent;
+        if (parent.isMaskImage) {
+            var radius = parent.activeObj.strokeSettings.strokeWidth * 2;
+            var canvasDraw = parent.maskCanvas.getContext('2d');
+            canvasDraw.clearRect(0, 0, parent.maskCanvas.width, parent.maskCanvas.height);
+            canvasDraw.fillStyle = parent.activeObj.strokeSettings.strokeColor;
+            canvasDraw.strokeStyle = '#fff';
+            canvasDraw.beginPath();
+            canvasDraw.ellipse(x, y, radius / 2, radius / 2, 0, 0, 2 * Math.PI, false);
+            canvasDraw.fill();
+            canvasDraw.stroke();
+            canvasDraw.closePath();
+            parent.maskCanvas.style.cursor = 'none';
+        }
+    };
     Selection.prototype.setCursorForActObj = function (splitWords, isCropSelection, x, y) {
         var parent = this.parent;
         if (parent.activeObj.horTopLine !== undefined) {
@@ -981,16 +1021,31 @@ var Selection = /** @class */ (function () {
             return false;
         }
     };
+    Selection.prototype.preventResizing = function (tempActiveObj) {
+        var parent = this.parent;
+        if (parent.activeObj.preventShapeDragOut && this.isShapeDragOut()) {
+            var actPoint = parent.activeObj.activePoint;
+            actPoint.startX = tempActiveObj.activePoint.startX;
+            actPoint.startY = tempActiveObj.activePoint.startY;
+            actPoint.endX = tempActiveObj.activePoint.endX;
+            actPoint.endY = tempActiveObj.activePoint.endY;
+            actPoint.width = tempActiveObj.activePoint.width;
+            actPoint.height = tempActiveObj.activePoint.height;
+            parent.activeObj.rotatedAngle = tempActiveObj.rotatedAngle;
+            parent.notify('draw', { prop: 'updateActiveObject', onPropertyChange: false,
+                value: { actPoint: actPoint, obj: parent.activeObj, isMouseMove: null, x: null, y: null } });
+        }
+    };
     Selection.prototype.updateActivePoint = function (x, y, isCropSelection) {
         var parent = this.parent;
         var obj = { width: 0, height: 0 };
-        var _a = parent.activeObj.activePoint, startX = _a.startX, startY = _a.startY, endX = _a.endX, endY = _a.endY;
+        var _a = parent.activeObj.activePoint, startX = _a.startX, startY = _a.startY;
         var _b = parent.activeObj.activePoint, width = _b.width, height = _b.height;
         parent.notify('transform', { prop: 'calcMaxDimension', onPropertyChange: false,
             value: { width: width, height: height, obj: obj, isImgShape: null } });
         var previousShapeSettings = this.updatePrevShapeSettings();
-        var shapeResizingArgs = { cancel: false, action: 'resize', previousShapeSettings: previousShapeSettings };
-        var shapeMovingArgs = { cancel: false, action: 'move', previousShapeSettings: previousShapeSettings };
+        var shapeResizingArgs = { cancel: false, action: 'resize', previousShapeSettings: previousShapeSettings, allowShapeOverflow: this.allowOutofBound() };
+        var shapeMovingArgs = { cancel: false, action: 'move', previousShapeSettings: previousShapeSettings, allowShapeOverflow: this.allowOutofBound() };
         this.shapeResizingArgs = shapeResizingArgs;
         this.shapeMovingArgs = shapeMovingArgs;
         if (parent.activeObj.shape === 'text' && this.dragElement !== '') {
@@ -1031,51 +1086,68 @@ var Selection = /** @class */ (function () {
         if (isCropSelection && parent.transform.straighten !== 0 && this.isMouseOutsideImg(x, y)) {
             return;
         }
+        var tempActiveObj = extend({}, parent.activeObj, {}, true);
+        var splitWords;
+        var cropResize;
+        if (parent.activeObj.shape !== undefined) {
+            splitWords = parent.activeObj.shape.split('-');
+        }
+        if (splitWords !== undefined && splitWords[0] === 'crop') {
+            cropResize = true;
+        }
         switch (this.dragElement.toLowerCase()) {
             case 'nw-resize':
                 this.updateNWPoints(x, y);
+                this.preventResizing(tempActiveObj);
                 parent.notify('shape', { prop: 'updateArrowDirection', onPropertyChange: false,
                     value: { obj: parent.activeObj, flip: null, rotatedDegree: null } });
                 this.triggerShapeChange(shapeResizingArgs, shapeMovingArgs, 'resize');
                 break;
             case 'n-resize':
                 this.updateNPoints(x, y);
+                this.preventResizing(tempActiveObj);
                 parent.notify('shape', { prop: 'updateArrowDirection', onPropertyChange: false,
                     value: { obj: parent.activeObj, flip: null, rotatedDegree: null } });
                 this.triggerShapeChange(shapeResizingArgs, shapeMovingArgs, 'resize');
                 break;
             case 'ne-resize':
                 this.updateNEPoints(x, y);
+                this.preventResizing(tempActiveObj);
                 parent.notify('shape', { prop: 'updateArrowDirection', onPropertyChange: false,
                     value: { obj: parent.activeObj, flip: null, rotatedDegree: null } });
                 this.triggerShapeChange(shapeResizingArgs, shapeMovingArgs, 'resize');
                 break;
             case 'w-resize':
                 this.updateWPoints(x, y);
+                this.preventResizing(tempActiveObj);
                 parent.notify('shape', { prop: 'updateArrowDirection', onPropertyChange: false,
                     value: { obj: parent.activeObj, flip: null, rotatedDegree: null } });
                 this.triggerShapeChange(shapeResizingArgs, shapeMovingArgs, 'resize');
                 break;
             case 'e-resize':
                 this.updateEPoints(x, y);
+                this.preventResizing(tempActiveObj);
                 parent.notify('shape', { prop: 'updateArrowDirection', onPropertyChange: false,
                     value: { obj: parent.activeObj, flip: null, rotatedDegree: null } });
                 this.triggerShapeChange(shapeResizingArgs, shapeMovingArgs, 'resize');
                 break;
             case 'sw-resize':
                 this.updateSWPoints(x, y);
+                this.preventResizing(tempActiveObj);
                 parent.notify('shape', { prop: 'updateArrowDirection', onPropertyChange: false,
                     value: { obj: parent.activeObj, flip: null, rotatedDegree: null } });
                 this.triggerShapeChange(shapeResizingArgs, shapeMovingArgs, 'resize');
                 break;
             case 's-resize':
                 this.updateSPoints(x, y);
+                this.preventResizing(tempActiveObj);
                 parent.notify('shape', { prop: 'updateArrowDirection', onPropertyChange: false,
                     value: { obj: parent.activeObj, flip: null, rotatedDegree: null } });
                 this.triggerShapeChange(shapeResizingArgs, shapeMovingArgs, 'resize');
                 break;
             case 'se-resize':
                 this.updateSEPoints(x, y);
+                this.preventResizing(tempActiveObj);
                 parent.notify('shape', { prop: 'updateArrowDirection', onPropertyChange: false,
                     value: { obj: parent.activeObj, flip: null, rotatedDegree: null } });
                 this.triggerShapeChange(shapeResizingArgs, shapeMovingArgs, 'resize');
@@ -1125,6 +1197,7 @@ var Selection = /** @class */ (function () {
                         parent.activeObj.rotatedAngle -= (180 * (Math.PI / 180));
                     }
                 }
+                this.preventResizing(tempActiveObj);
                 break;
             case 'pathdrag':
                 if (!isNullOrUndefined(this.pathAdjustedIndex)) {
@@ -1144,8 +1217,6 @@ var Selection = /** @class */ (function () {
                         activePoint.endY += height_1;
                         startX = activePoint.startX;
                         startY = activePoint.startY;
-                        endX = activePoint.endX;
-                        endY = activePoint.endY;
                         if (parent.activeObj.shape !== 'line' && parent.activeObj.shape !== 'arrow' &&
                             parent.activeObj.rotationCirclePointColl) {
                             parent.activeObj.rotationCirclePointColl.x += width_1;
@@ -1159,10 +1230,7 @@ var Selection = /** @class */ (function () {
                                 parent.activeObj.pointColl[i].y += height_1;
                             }
                         }
-                        if (!this.isPreventDragging && parent.activeObj.shape !== 'line' && (parent.activeObj.rotatedAngle === 0 && (startX < parent.img.destLeft ||
-                            startY < parent.img.destTop || endX >
-                            parent.img.destLeft + parent.img.destWidth || endY > parent.img.destTop
-                            + parent.img.destHeight))) {
+                        if ((!this.isPreventDragging && this.isShapeDragOut()) && (parent.activeObj.preventShapeDragOut || parent.activeObj.shape === 'redact' || cropResize)) {
                             activePoint.startX -= width_1;
                             activePoint.endX -= width_1;
                             activePoint.startY -= height_1;
@@ -1174,8 +1242,33 @@ var Selection = /** @class */ (function () {
                                 parent.activeObj.rotationCirclePoint.x -= width_1;
                                 parent.activeObj.rotationCirclePoint.y -= height_1;
                             }
-                            this.setDragWidth(width_1);
-                            this.setDragHeight(height_1);
+                            else if (parent.activeObj.shape === 'path') {
+                                for (var l = 0, len = parent.activeObj.pointColl.length; l < len; l++) {
+                                    parent.activeObj.pointColl[l].x -= width_1;
+                                    parent.activeObj.pointColl[l].y -= height_1;
+                                }
+                            }
+                            if (parent.activeObj.rotatedAngle === 0) {
+                                var tempEndX = parent.activeObj.activePoint.endX;
+                                var tempEndY = parent.activeObj.activePoint.endY;
+                                if (parent.activeObj.shape === 'path') {
+                                    parent.activeObj.activePoint = parent.getSquarePointForPath(parent.activeObj);
+                                }
+                                this.setDragWidth(width_1);
+                                this.setDragHeight(height_1);
+                                var currObj = parent.activeObj;
+                                var xDiff = currObj.activePoint.endX - tempEndX;
+                                var yDiff = currObj.activePoint.endY - tempEndY;
+                                if (currObj.shape === 'path') {
+                                    for (var l = 0, len = currObj.pointColl.length; l < len; l++) {
+                                        currObj.pointColl[l].x += xDiff;
+                                        currObj.pointColl[l].y += yDiff;
+                                    }
+                                }
+                            }
+                            else {
+                                parent.notify('selection', { prop: 'updPtCollForShpRot', onPropertyChange: false, value: { obj: parent.activeObj } });
+                            }
                         }
                     }
                     else {
@@ -1191,6 +1284,55 @@ var Selection = /** @class */ (function () {
                 break;
         }
     };
+    Selection.prototype.isShapeDragOut = function () {
+        var parent = this.parent;
+        var isShapeDragOut = false;
+        var allowPreventing = false;
+        var shape = parent.activeObj.shape;
+        if (parent.activeObj.preventShapeDragOut) {
+            allowPreventing = true;
+        }
+        else if (parent.activeObj.rotatedAngle === 0 &&
+            (shape !== 'line' && shape !== 'arrow' && shape !== 'path')) {
+            allowPreventing = true;
+        }
+        if (allowPreventing) {
+            var _a = parent.activeObj.activePoint, startX = _a.startX, startY = _a.startY, endX = _a.endX, endY = _a.endY;
+            if (shape === 'path') {
+                var path = parent.getSquarePointForPath(parent.activeObj);
+                startX = path.startX;
+                startY = path.startY;
+                endX = path.endX;
+                endY = path.endY;
+            }
+            if (parent.activeObj.rotatedAngle === 0 || shape === 'arrow') {
+                isShapeDragOut = this.isObjOutsideImg(startX, startY, endX, endY, shape);
+            }
+            else {
+                var obj = { isIntersect: null, arr: null };
+                parent.notify('draw', { prop: 'updateImgCanvasPoints', onPropertyChange: false });
+                parent.notify('draw', { prop: 'isLinesIntersect', onPropertyChange: false, value: { obj: obj } });
+                if (obj['arr'][0] || obj['arr'][1] || obj['arr'][2] || obj['arr'][3]) {
+                    isShapeDragOut = true;
+                }
+                else {
+                    isShapeDragOut = this.isObjOutsideImg(startX, startY, endX, endY, shape);
+                }
+            }
+        }
+        return isShapeDragOut;
+    };
+    Selection.prototype.isObjOutsideImg = function (startX, startY, endX, endY, shape) {
+        var parent = this.parent;
+        var _a = parent.img, destLeft = _a.destLeft, destTop = _a.destTop, destWidth = _a.destWidth, destHeight = _a.destHeight;
+        if (startX < destLeft || startY < destTop || endX > destLeft + destWidth ||
+            endY > destTop + destHeight || ((shape === 'line' || shape === 'arrow') &&
+            (startX > destLeft + destWidth || startY > destTop + destHeight ||
+                endX < destLeft || endY < destTop))) {
+            return true;
+        }
+        return false;
+    };
     Selection.prototype.triggerShapeChange = function (shapeResizingArgs, shapeMovingArgs, type) {
         var parent = this.parent;
         var actPoint = parent.activeObj.activePoint;
@@ -1218,10 +1360,12 @@ var Selection = /** @class */ (function () {
                 if (this.currentDrawingShape !== '' && parent.upperCanvas.style.cursor === 'crosshair') {
                     shapeResizingArgs.action = 'drawing';
                 }
-                parent.trigger('shapeChanging', shapeResizingArgs);
+                if (!parent.currObjType.isRedact || parent.activeObj.shape !== 'redact') {
+                    parent.trigger('shapeChanging', shapeResizingArgs);
+                }
+                parent.editCompleteArgs = shapeResizingArgs;
                 this.isPreventShaping = shapeResizingArgs.cancel;
-                parent.notify('shape', { prop: 'updateShapeChangeEventArgs', onPropertyChange: false,
-                    value: { shapeSettings: shapeResizingArgs.currentShapeSettings } });
+                parent.notify('shape', { prop: 'updateShapeChangeEventArgs', onPropertyChange: false, value: { shapeSettings: shapeResizingArgs.currentShapeSettings, allowShapeOverflow: shapeResizingArgs.allowShapeOverflow } });
             }
             else {
                 var selectionResizingArgs = { action: shapeResizingArgs.action,
@@ -1237,21 +1381,28 @@ var Selection = /** @class */ (function () {
                         height: shapeResizingArgs.currentShapeSettings.height } };
                 this.selectionResizingArgs = selectionResizingArgs;
                 parent.trigger('selectionChanging', selectionResizingArgs);
+                parent.editCompleteArgs = selectionResizingArgs;
                 parent.notify('shape', { prop: 'updSelChangeEventArgs', onPropertyChange: false,
                     value: { selectionSettings: selectionResizingArgs.currentSelectionSettings } });
             }
         }
         else if (type === 'mouse-down' || type === 'mouse-up') {
-            parent.trigger('shapeChanging', shapeResizingArgs);
+            if (parent.activeObj.shape !== 'redact') {
+                parent.trigger('shapeChanging', shapeResizingArgs);
+            }
+            parent.editCompleteArgs = shapeResizingArgs;
             this.isPreventShaping = shapeResizingArgs.cancel;
             parent.notify('shape', { prop: 'updateShapeChangeEventArgs', onPropertyChange: false,
-                value: { shapeSettings: shapeResizingArgs.currentShapeSettings } });
+                value: { shapeSettings: shapeResizingArgs.currentShapeSettings, allowShapeOverflow: shapeResizingArgs.allowShapeOverflow } });
         }
         else {
-            parent.trigger('shapeChanging', shapeMovingArgs);
+            if (parent.activeObj.shape !== 'redact') {
+                parent.trigger('shapeChanging', shapeMovingArgs);
+            }
+            parent.editCompleteArgs = shapeMovingArgs;
             this.isPreventShaping = shapeMovingArgs.cancel;
             parent.notify('shape', { prop: 'updateShapeChangeEventArgs', onPropertyChange: false,
-                value: { shapeSettings: shapeMovingArgs.currentShapeSettings } });
+                value: { shapeSettings: shapeMovingArgs.currentShapeSettings, allowShapeOverflow: shapeMovingArgs.allowShapeOverflow } });
         }
         parent.eventType = type;
     };
@@ -1260,13 +1411,20 @@ var Selection = /** @class */ (function () {
         var actPoint = parent.activeObj.activePoint;
         var _a = parent.img, destLeft = _a.destLeft, destWidth = _a.destWidth;
         var tempWidth = width;
+        var shape = parent.activeObj.shape;
+        var preventDragOut = false;
+        if (parent.activeObj.preventShapeDragOut && (shape === 'line' || shape === 'arrow')) {
+            preventDragOut = true;
+        }
         if (tempWidth >= 0) {
             for (var i = 0; i < tempWidth; i++) {
                 width = tempWidth - i;
                 actPoint.startX += width;
                 actPoint.endX += width;
-                if (actPoint.startX >= destLeft &&
-                    actPoint.endX <= destLeft + destWidth) {
+                if ((actPoint.startX >= destLeft &&
+                    actPoint.endX <= destLeft + destWidth && !preventDragOut) ||
+                    (actPoint.startX >= destLeft && actPoint.endX <= destLeft + destWidth &&
+                        actPoint.endX >= destLeft && actPoint.startX <= destLeft + destWidth && preventDragOut)) {
                     break;
                 }
                 else {
@@ -1280,8 +1438,10 @@ var Selection = /** @class */ (function () {
                 width = tempWidth + i;
                 actPoint.startX += width;
                 actPoint.endX += width;
-                if (actPoint.startX >= destLeft &&
-                    actPoint.endX <= destLeft + destWidth) {
+                if ((actPoint.startX >= destLeft &&
+                    actPoint.endX <= destLeft + destWidth && !preventDragOut) ||
+                    (actPoint.startX >= destLeft && actPoint.endX <= destLeft + destWidth &&
+                        actPoint.endX >= destLeft && actPoint.startX <= destLeft + destWidth && preventDragOut)) {
                     break;
                 }
                 else {
@@ -1296,13 +1456,20 @@ var Selection = /** @class */ (function () {
         var actPoint = parent.activeObj.activePoint;
         var _a = parent.img, destTop = _a.destTop, destHeight = _a.destHeight;
         var tempHeight = height;
+        var shape = parent.activeObj.shape;
+        var preventDragOut = false;
+        if (parent.activeObj.preventShapeDragOut && (shape === 'line' || shape === 'arrow')) {
+            preventDragOut = true;
+        }
         if (tempHeight >= 0) {
             for (var i = 1; i < tempHeight; i++) {
                 height = tempHeight - i;
                 actPoint.startY += height;
                 actPoint.endY += height;
-                if (actPoint.startY >= destTop &&
-                    actPoint.endY <= destTop + destHeight) {
+                if ((actPoint.startY >= destTop &&
+                    actPoint.endY <= destTop + destHeight && !preventDragOut) ||
+                    (actPoint.startY >= destTop && actPoint.endY <= destTop + destHeight &&
+                        actPoint.endY >= destTop && actPoint.startY <= destTop + destHeight && preventDragOut)) {
                     break;
                 }
                 else {
@@ -1316,8 +1483,10 @@ var Selection = /** @class */ (function () {
                 height = tempHeight + i;
                 actPoint.startY += height;
                 actPoint.endY += height;
-                if (actPoint.startY >= destTop &&
-                    actPoint.endY <= destTop + destHeight) {
+                if ((actPoint.startY >= destTop &&
+                    actPoint.endY <= destTop + destHeight && !preventDragOut) ||
+                    (actPoint.startY >= destTop && actPoint.endY <= destTop + destHeight &&
+                        actPoint.endY >= destTop && actPoint.startY <= destTop + destHeight && preventDragOut)) {
                     break;
                 }
                 else {
@@ -1336,17 +1505,35 @@ var Selection = /** @class */ (function () {
         var startY = isStart ? actPoint.startY : actPoint.endY;
         var endX = isStart ? actPoint.endX : actPoint.startX;
         var endY = isStart ? actPoint.endY : actPoint.startY;
-        if (startX < destLeft) {
-            startX = destLeft;
-        }
-        if (startY < destTop) {
-            startY = destTop;
-        }
-        if (endX > destLeft + destWidth) {
-            endX = destLeft + destWidth;
+        var wrapperWidth = parent.upperCanvas.width;
+        var wrapperHeight = parent.upperCanvas.height;
+        if (Browser.isDevice) {
+            if (startX < 0 && destLeft < 0) {
+                startX = 0;
+            }
+            if (startY < 0 && destTop < 0) {
+                startY = 0;
+            }
+            if (endX > wrapperWidth && destLeft + destWidth > wrapperWidth) {
+                endX = wrapperWidth;
+            }
+            if (endY > wrapperHeight && destTop + destHeight > wrapperHeight) {
+                endY = wrapperHeight;
+            }
         }
-        if (endY > destTop + destHeight) {
-            endY = destTop + destHeight;
+        else {
+            if (startX < destLeft) {
+                startX = destLeft;
+            }
+            if (startY < destTop) {
+                startY = destTop;
+            }
+            if (endX > destLeft + destWidth) {
+                endX = destLeft + destWidth;
+            }
+            if (endY > destTop + destHeight) {
+                endY = destTop + destHeight;
+            }
         }
         if (parent.transform.straighten !== 0) {
             var obj = { isIntersect: null, arr: null };
@@ -1382,7 +1569,15 @@ var Selection = /** @class */ (function () {
         if (parent.activeObj.shape === 'image') {
             return isLimiting;
         }
-        if (!this.isPreventDragging && parent.activeObj.rotatedAngle === 0) {
+        var splitWords;
+        var cropResize;
+        if (parent.activeObj.shape !== undefined) {
+            splitWords = parent.activeObj.shape.split('-');
+        }
+        if (splitWords !== undefined && splitWords[0] === 'crop') {
+            cropResize = true;
+        }
+        if ((!this.isPreventDragging && parent.activeObj.rotatedAngle === 0) && (parent.activeObj.preventShapeDragOut || parent.activeObj.shape === 'redact' || cropResize)) {
             isLimiting = this.limitDrag(true);
             var shapeColl = ['line', 'arrow', 'path'];
             if (shapeColl.indexOf(parent.activeObj.shape) > -1) {
@@ -2591,7 +2786,15 @@ var Selection = /** @class */ (function () {
             else {
                 var rotationCirclePoint = this.getTransRotationPoint(actObj);
                 var radius = actObj.topLeftCircle.radius;
-                if (x >= (actObj.topLeftCircle.startX - (radius * 2)) &&
+                if (rotationCirclePoint &&
+                    x >= rotationCirclePoint.x - (radius * 2) &&
+                    x <= rotationCirclePoint.x + (radius * 2) &&
+                    y >= rotationCirclePoint.y - (radius * 2) &&
+                    y <= rotationCirclePoint.y + (radius * 2) && this.dragElement !== 'grabbing') {
+                    parent.upperCanvas.style.cursor = parent.cursor = 'grabbing';
+                    this.dragElement = parent.upperCanvas.style.cursor;
+                }
+                else if (x >= (actObj.topLeftCircle.startX - (radius * 2)) &&
                     x <= (actObj.topLeftCircle.startX + (radius * 2)) &&
                     y >= (actObj.topLeftCircle.startY - (radius * 2)) &&
                     y <= (actObj.topLeftCircle.startY + (radius * 2)) && this.dragElement !== 'nw-resize') {
@@ -2663,14 +2866,6 @@ var Selection = /** @class */ (function () {
                     isResize = true;
                     this.dragElement = parent.upperCanvas.style.cursor;
                 }
-                else if (rotationCirclePoint &&
-                    x >= rotationCirclePoint.x - (radius * 2) &&
-                    x <= rotationCirclePoint.x + (radius * 2) &&
-                    y >= rotationCirclePoint.y - (radius * 2) &&
-                    y <= rotationCirclePoint.y + (radius * 2) && this.dragElement !== 'grabbing') {
-                    parent.upperCanvas.style.cursor = parent.cursor = 'grabbing';
-                    this.dragElement = parent.upperCanvas.style.cursor;
-                }
                 else {
                     this.dragPoint.startX = this.previousPoint.x = this.dragPoint.endX = x;
                     this.dragPoint.startY = this.previousPoint.y = this.dragPoint.endY = y;
@@ -2960,8 +3155,8 @@ var Selection = /** @class */ (function () {
             this.isGrabbing = true;
             parent.notify('selection', { prop: 'updatePrevShapeSettings', onPropertyChange: false, value: { obj: obj } });
             var shapeSettings = obj['shapeSettingsObj'];
-            var shapeResizingArgs = { cancel: false, action: 'rotate-start', previousShapeSettings: shapeSettings };
-            var shapeMovingArgs = { cancel: false, action: 'rotate-start', previousShapeSettings: shapeSettings };
+            var shapeResizingArgs = { cancel: false, action: 'rotate-start', previousShapeSettings: shapeSettings, allowShapeOverflow: this.allowOutofBound() };
+            var shapeMovingArgs = { cancel: false, action: 'rotate-start', previousShapeSettings: shapeSettings, allowShapeOverflow: this.allowOutofBound() };
             this.triggerShapeChange(shapeResizingArgs, shapeMovingArgs, 'mouse-down');
         }
         var imageEditorClickEventArgs = { point: this.setXYPoints(e) };
@@ -2992,6 +3187,7 @@ var Selection = /** @class */ (function () {
         var y = imageEditorClickEventArgs.point.y;
         var cursor = parent.activeObj.shape && parent.activeObj.shape === 'text' ?
             parent.cursor : 'default';
+        var tempCursor = parent.upperCanvas.style.cursor;
         if (parent.isResize) {
             this.performEnterAction();
             parent.upperCanvas.style.cursor = 'default';
@@ -3000,8 +3196,8 @@ var Selection = /** @class */ (function () {
         else if (JSON.stringify(parent.frameObj) !== JSON.stringify(parent.tempFrameObj)) {
             parent.okBtn();
         }
-        else if (this.currentDrawingShape !== '' && ((this.isTouch && !this.isShapeTouch(e, this.isCropSelection))
-            || parent.upperCanvas.style.cursor === 'crosshair' || parent.isShapeDrawing)) {
+        else if (this.currentDrawingShape !== '' && (!this.isShapeTouch(e, this.isCropSelection) &&
+            ((this.isTouch) || tempCursor === 'crosshair' || parent.isShapeDrawing))) {
             if (parent.drawingShape && !parent.isShapeDrawing) {
                 parent.okBtn();
                 parent.enableShapeDrawing(parent.toPascalCase(parent.drawingShape), true);
@@ -3049,8 +3245,8 @@ var Selection = /** @class */ (function () {
             }
             parent.currObjType.isDragging = true;
             var previousShapeSettings = this.updatePrevShapeSettings();
-            var shapeResizingArgs = { cancel: false, action: 'draw-start', previousShapeSettings: previousShapeSettings };
-            var shapeMovingArgs = { cancel: false, action: 'move', previousShapeSettings: previousShapeSettings };
+            var shapeResizingArgs = { cancel: false, action: 'draw-start', previousShapeSettings: previousShapeSettings, allowShapeOverflow: this.allowOutofBound() };
+            var shapeMovingArgs = { cancel: false, action: 'move', previousShapeSettings: previousShapeSettings, allowShapeOverflow: this.allowOutofBound() };
             this.shapeResizingArgs = shapeResizingArgs;
             this.shapeMovingArgs = shapeMovingArgs;
             this.triggerShapeChange(shapeResizingArgs, shapeMovingArgs, 'mouse-down');
@@ -3096,7 +3292,7 @@ var Selection = /** @class */ (function () {
                 parent.notify('undo-redo', { prop: 'updateCurrUrc', value: { type: 'ok' } });
             }
         }
-        if (!isShape && !parent.togglePen && !this.isCropSelection) {
+        if (!isShape && !parent.togglePen && !this.isCropSelection && parent.activeObj.redactType !== 'blur' && parent.activeObj.redactType !== 'pixelate') {
             parent.notify('toolbar', { prop: 'refresh-main-toolbar', onPropertyChange: false });
             parent.notify('toolbar', { prop: 'close-contextual-toolbar', onPropertyChange: false });
         }
@@ -3117,7 +3313,7 @@ var Selection = /** @class */ (function () {
                 parent.notify('toolbar', { prop: 'destroy-qa-toolbar', onPropertyChange: false });
             }
             var shape = parent.activeObj.shape;
-            var shapeColl = ['rectangle', 'ellipse', 'line', 'arrow', 'path', 'text', 'image'];
+            var shapeColl = ['rectangle', 'ellipse', 'line', 'arrow', 'path', 'text', 'image', 'redact'];
             if (shape && shapeColl.indexOf(shape) > -1) {
                 parent.notify('shape', { prop: 'redrawActObj', onPropertyChange: false,
                     value: { x: null, y: null, isMouseDown: null } });
@@ -3125,6 +3321,16 @@ var Selection = /** @class */ (function () {
                 parent.notify('toolbar', { prop: 'setCurrentToolbar', value: { type: 'main' } });
                 parent.notify('toolbar', { prop: 'refresh-main-toolbar', onPropertyChange: false });
             }
+            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');
+                }
+            }
             this.canvasMouseDownHandler(e);
         }
         else {
@@ -3201,6 +3407,7 @@ var Selection = /** @class */ (function () {
                         index: point.order };
                     var shapeChangedArgs = { action: 'apply', currentShapeSettings: extend({}, shapeSettings, {}, true) };
                     parent.trigger('shapeChange', shapeChangedArgs);
+                    parent.editCompleteArgs = shapeChangedArgs;
                 }
                 var isPenDraw = parent.togglePen;
                 parent.notify('toolbar', { prop: 'close-contextual-toolbar', onPropertyChange: false });
@@ -3228,6 +3435,7 @@ var Selection = /** @class */ (function () {
                         }
                         this.upperContext.strokeStyle = parent.activeObj.strokeSettings.strokeColor;
                         this.upperContext.fillStyle = parent.activeObj.strokeSettings.strokeColor;
+                        parent.notify('freehand-draw', { prop: 'resetSelPoints', onPropertyChange: false });
                         parent.notify('freehand-draw', { prop: 'freehandDownHandler', onPropertyChange: false,
                             value: { e: e, canvas: parent.upperCanvas } });
                     }
@@ -3239,7 +3447,8 @@ var Selection = /** @class */ (function () {
                     this.dragElement = '';
                     this.dragPoint.startX = this.dragPoint.startY = this.dragPoint.endX = this.dragPoint.endY = 0;
                 }
-                if ((parent.cursor !== 'crosshair' && e.type.toLowerCase() === 'touchstart') ||
+                if (((this.isTouch && tempCursor !== 'crosshair' || parent.cursor !== 'crosshair') &&
+                    e.type.toLowerCase() === 'touchstart') ||
                     (parent.currObjType.isActiveObj && parent.cursor !== 'default' && !parent.togglePen)) {
                     parent.notify('draw', { prop: 'updateTempObjColl' });
                     parent.notify('draw', { prop: 'updateTempPointColl' });
@@ -3262,19 +3471,24 @@ var Selection = /** @class */ (function () {
         var cursor = parent.cursor;
         var canvasCursor = parent.upperCanvas.style.cursor;
         e.preventDefault();
-        if (this.isPreventShaping) {
+        if (this.isPreventShaping || (parent.isShapeDrawing && parent.currObjType.isDragging && this.isTouch &&
+            parent.activeObj.shape && parent.activeObj.shape === 'path')) {
             return;
         }
         if (parent.cursor === 'grabbing' && this.isGrabbing) {
             var obj = { shapeSettingsObj: {} };
             parent.notify('selection', { prop: 'updatePrevShapeSettings', onPropertyChange: false, value: { obj: obj } });
             var shapeSettings = obj['shapeSettingsObj'];
-            var shapeResizingArgs = { cancel: false, action: 'rotating', previousShapeSettings: shapeSettings };
-            var shapeMovingArgs = { cancel: false, action: 'rotating', previousShapeSettings: shapeSettings };
+            var shapeResizingArgs = { cancel: false, action: 'rotating', previousShapeSettings: shapeSettings, allowShapeOverflow: this.allowOutofBound() };
+            var shapeMovingArgs = { cancel: false, action: 'rotating', previousShapeSettings: shapeSettings, allowShapeOverflow: this.allowOutofBound() };
             this.triggerShapeChange(shapeResizingArgs, shapeMovingArgs, 'mouse-down');
         }
-        if (this.timer && this.timer > 0) {
-            this.timer = 0;
+        if (this.timer && this.timer > 0 && this.dragPoint.startX && this.dragPoint.startY) {
+            var width = Math.abs(this.dragPoint.startX - e.touches[0].clientX);
+            var height = Math.abs(this.dragPoint.startY - e.touches[0].clientY);
+            if (width > 10 || height > 10) {
+                this.timer = 0;
+            }
         }
         var bbox = parent.lowerCanvas.getBoundingClientRect();
         if (e.type === 'touchmove' && e.touches.length === 2) {
@@ -3367,14 +3581,16 @@ var Selection = /** @class */ (function () {
         }
         var _a = parent.img, destLeft = _a.destLeft, destTop = _a.destTop, destWidth = _a.destWidth, destHeight = _a.destHeight;
         if (parent.currObjType.isDragging) {
+            if (parent.activeObj.shape && parent.activeObj.preventShapeDragOut) {
+                if (x < destLeft || x > destLeft + destWidth || y < destTop || y > destTop + destHeight) {
+                    return;
+                }
+            }
             this.upperContext.clearRect(0, 0, parent.lowerCanvas.width, parent.lowerCanvas.height);
             this.updateActivePoint(x, y, isCropSelection);
             parent.notify('shape', { prop: 'updateTrianglePoints', onPropertyChange: false, value: { obj: parent.activeObj } });
             if (this.isPreventDragging) {
-                if ((parent.activeObj.activePoint.startX > destLeft) &&
-                    (parent.activeObj.activePoint.endX < destLeft + destWidth) &&
-                    (parent.activeObj.activePoint.startY > destTop)
-                    && (parent.activeObj.activePoint.endY < destTop + destHeight)) {
+                if (!this.isShapeDragOut()) {
                     this.isPreventDragging = false;
                 }
                 parent.notify('draw', { prop: 'drawObject', onPropertyChange: false, value: { canvas: 'duplicate', obj: null, isCropRatio: null,
@@ -3397,14 +3613,16 @@ var Selection = /** @class */ (function () {
             !parent.element.querySelector('#' + id + '_contextualToolbar').parentElement.classList.contains('e-hide')) ||
             (parent.element.querySelector('#' + id + '_headWrapper')
                 && !parent.element.querySelector('#' + id + '_headWrapper').parentElement.classList.contains('e-hide')))) {
-            return;
+            if (!(parent.activeObj.shape && parent.activeObj.shape === 'redact' && parent.isShapeDrawing)) {
+                return;
+            }
         }
         if (parent.cursor === 'grabbing' && this.isGrabbing) {
             var obj = { shapeSettingsObj: {} };
             parent.notify('selection', { prop: 'updatePrevShapeSettings', onPropertyChange: false, value: { obj: obj } });
             var shapeSettings = obj['shapeSettingsObj'];
-            var shapeResizingArgs = { cancel: false, action: 'rotate-end', previousShapeSettings: shapeSettings };
-            var shapeMovingArgs = { cancel: false, action: 'rotate-end', previousShapeSettings: shapeSettings };
+            var shapeResizingArgs = { cancel: false, action: 'rotate-end', previousShapeSettings: shapeSettings, allowShapeOverflow: this.allowOutofBound() };
+            var shapeMovingArgs = { cancel: false, action: 'rotate-end', previousShapeSettings: shapeSettings, allowShapeOverflow: this.allowOutofBound() };
             this.triggerShapeChange(shapeResizingArgs, shapeMovingArgs, 'mouse-up');
         }
         this.isGrabbing = false;
@@ -3430,7 +3648,7 @@ var Selection = /** @class */ (function () {
                 x = e.clientX;
                 y = e.clientY;
             }
-            else {
+            else if (!this.isTouchDblClick) {
                 x = this.touchEndPoint.x;
                 y = this.touchEndPoint.y;
             }
@@ -3483,6 +3701,12 @@ var Selection = /** @class */ (function () {
                     parent.notify('draw', { prop: 'drawObject', onPropertyChange: false, value: { canvas: 'duplicate', obj: parent.activeObj, isCropRatio: null,
                             points: null, isPreventDrag: true, saveContext: null, isPreventSelection: true } });
                 }
+                if (parent.currObjType.isDragging && this.isTouch &&
+                    parent.activeObj.shape && parent.activeObj.shape === 'path') {
+                    this.upperContext.clearRect(0, 0, parent.upperCanvas.width, parent.upperCanvas.height);
+                    parent.notify('draw', { prop: 'drawObject', onPropertyChange: false, value: { canvas: 'duplicate', obj: parent.activeObj, isCropRatio: null,
+                            points: null, isPreventDrag: true, saveContext: null, isPreventSelection: true } });
+                }
                 return;
             }
             if (e.currentTarget === parent.upperCanvas && !parent.isResize) {
@@ -3515,6 +3739,9 @@ var Selection = /** @class */ (function () {
                     this.shapeMovingArgs = shapeMovingArgs;
                     this.triggerShapeChange(shapeResizingArgs, shapeMovingArgs, 'mouse-up');
                 }
+                if (parent.activeObj.shape && parent.activeObj.shape === 'path' && parent.activeObj.pointColl.length > 0) {
+                    parent.activeObj.activePoint = parent.getSquarePointForPath(parent.activeObj);
+                }
                 this.adjustActObjForLineArrow();
                 this.updPtCollForShpRot();
                 parent.currObjType.shape = parent.currObjType.shape.toLowerCase();
@@ -3576,6 +3803,10 @@ var Selection = /** @class */ (function () {
                                     isApplyBtn: null, isCropping: null, isZooming: null, cType: null } });
                         }
                     }
+                    else if (shape === 'redact') {
+                        parent.notify('toolbar', { prop: 'refresh-toolbar', onPropertyChange: false, value: { type: 'redact',
+                                isApplyBtn: null, isCropping: null, isZooming: null, cType: null } });
+                    }
                     else if (this.isFhdEditing) {
                         parent.notify('toolbar', { prop: 'refresh-toolbar', onPropertyChange: false, value: { type: 'pen',
                                 isApplyBtn: null, isCropping: null, isZooming: null, cType: null } });
@@ -3590,6 +3821,9 @@ var Selection = /** @class */ (function () {
                             parent.activeObj.textSettings.fontSize === 11 && Math.floor(parent.activeObj.activePoint.width) === 55 &&
                             Math.floor(parent.activeObj.activePoint.height) === 11) {
                             parent.notify('shape', { prop: 'refreshActiveObj', onPropertyChange: false });
+                            if (parent.drawingShape === 'text' && !parent.activeObj.keyHistory) {
+                                parent.activeObj.keyHistory = 'Enter Text';
+                            }
                         }
                         if (!isCropSelection_1) {
                             this.adjustActObjForLineArrow();
@@ -3617,6 +3851,10 @@ var Selection = /** @class */ (function () {
                     parent.notify('toolbar', { prop: 'refresh-toolbar', onPropertyChange: false, value: { type: 'text',
                             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 {
                     var temp = this.currentDrawingShape;
                     this.currentDrawingShape = '';
@@ -3632,8 +3870,8 @@ var Selection = /** @class */ (function () {
             if (parent.togglePen && e.currentTarget === parent.upperCanvas && !obj['freehandDrawSelectedId']) {
                 parent.notify('freehand-draw', { prop: 'freehandUpHandler', onPropertyChange: false,
                     value: { e: e, canvas: parent.upperCanvas, context: this.upperContext } });
-                if (parent.togglePen && (isNullOrUndefined(parent.toolbar) || (parent.toolbar && parent.toolbar.length > 0)
-                    || !isNullOrUndefined(parent.toolbarTemplate))) {
+                if (parent.togglePen && !parent.isMaskImage && (isNullOrUndefined(parent.toolbar) ||
+                    (parent.toolbar && parent.toolbar.length > 0) || !isNullOrUndefined(parent.toolbarTemplate))) {
                     parent.okBtn();
                     parent.freeHandDraw(true);
                 }
@@ -3657,6 +3895,7 @@ var Selection = /** @class */ (function () {
                 }
             }
             parent.isShapeDrawing = false;
+            parent.notify('freehand-draw', { prop: 'resetSelPoints', onPropertyChange: false });
         }
     };
     Selection.prototype.adjustActObjForLineArrow = function (obj) {
@@ -3816,7 +4055,8 @@ var Selection = /** @class */ (function () {
                     parent.objColl.splice(index, 1);
                 }
             }
-            else if (!isShape && activeObj.shape && (activeObj.activePoint.width !== 0 || activeObj.activePoint.height !== 0)) {
+            else if (!isShape && activeObj.shape && (activeObj.activePoint.width !== 0 || activeObj.activePoint.height !== 0 ||
+                (activeObj.shape === 'path' && activeObj.pointColl.length > 0))) {
                 parent.activeObj = activeObj;
                 var index = this.getCurrentIndex();
                 if (!isCropSelection) {
@@ -4044,8 +4284,15 @@ var Selection = /** @class */ (function () {
         }
         else {
             if (((new Date().getTime()) - this.touchTime) < 400) {
+                this.isTouchDblClick = true;
+                var temp = parent.isShapeDrawing;
                 parent.notify('shape', { prop: 'stopPathDrawing', onPropertyChange: false, value: { e: e, isApply: null } });
+                this.isTouchDblClick = false;
                 this.touchTime = 0;
+                if (temp !== parent.isShapeDrawing && parent.activeObj.shape &&
+                    parent.activeObj.shape === 'path') {
+                    return;
+                }
             }
             else {
                 this.touchTime = new Date().getTime();
@@ -4227,6 +4474,7 @@ var Selection = /** @class */ (function () {
     Selection.prototype.focusRatioBtn = function () {
         var id = this.parent.element.id;
         if (this.parent.isKBDNavigation) {
+            // eslint-disable-next-line @typescript-eslint/tslint/config
             setTimeout(function () {
                 if (document.getElementById(id + '_aspectratio')) {
                     document.getElementById(id + '_aspectratio').focus();
@@ -4545,7 +4793,7 @@ var Selection = /** @class */ (function () {
                         }
                         else {
                             if (this.isTouch || parent.cursor === 'move' || parent.cursor === 'grab' || this.isShapeInserted) {
-                                if (prevIndex === 0 || prevIndex < actObj.order) {
+                                if (prevIndex === 0 || (prevIndex < actObj.order && (actObj.shape !== 'redact' || parent.drawingShape === 'redact'))) {
                                     prevIndex = actObj.order;
                                     i = index;
                                 }
@@ -4575,7 +4823,7 @@ var Selection = /** @class */ (function () {
                         else {
                             if (this.isTouch || cursor === 'move' || cursor === 'grabbing' || this.isShapeInserted
                                 || parent.cursor === 'move' || parent.cursor === 'grabbing') {
-                                if (prevIndex === 0 || prevIndex < actObj.order) {
+                                if (prevIndex === 0 || (prevIndex < actObj.order && (actObj.shape !== 'redact' || parent.drawingShape === 'redact'))) {
                                     prevIndex = actObj.order;
                                     i = index;
                                 }
@@ -4636,7 +4884,7 @@ var Selection = /** @class */ (function () {
                 parent.notify('draw', { prop: 'setTempTextSettings', onPropertyChange: false, value: { tempTextSettings: tempTextSettings } });
                 var shapeSettings = this.updatePrevShapeSettings();
                 var shapeChangingArgs = { cancel: false, action: 'select', previousShapeSettings: shapeSettings,
-                    currentShapeSettings: shapeSettings };
+                    currentShapeSettings: shapeSettings, allowShapeOverflow: this.allowOutofBound() };
                 if (parent.activeObj.shape === 'line' || parent.activeObj.shape === 'arrow') {
                     shapeChangingArgs.currentShapeSettings.width = parent.activeObj.activePoint.endX - parent.activeObj.activePoint.startX;
                     shapeChangingArgs.currentShapeSettings.height = parent.activeObj.activePoint.endY - parent.activeObj.activePoint.startY;
@@ -4649,9 +4897,10 @@ var Selection = /** @class */ (function () {
                 if (splitWords !== undefined && splitWords[0] === 'crop') {
                     this.isCropSelection = true;
                 }
-                if (!this.isCropSelection) {
+                if (!this.isCropSelection && parent.activeObj.shape !== 'redact') {
                     parent.trigger('shapeChanging', shapeChangingArgs);
                     this.shapeEvent(shapeChangingArgs);
+                    parent.editCompleteArgs = shapeChangingArgs;
                 }
                 else {
                     var selectionChangingArgs = { action: shapeChangingArgs.action,
@@ -4666,6 +4915,7 @@ var Selection = /** @class */ (function () {
                             width: shapeChangingArgs.currentShapeSettings.width,
                             height: shapeChangingArgs.currentShapeSettings.height } };
                     parent.trigger('selectionChanging', selectionChangingArgs);
+                    parent.editCompleteArgs = selectionChangingArgs;
                     shapeChangingArgs.currentShapeSettings.startX = selectionChangingArgs.currentSelectionSettings.startX;
                     shapeChangingArgs.currentShapeSettings.startY = selectionChangingArgs.currentSelectionSettings.startY;
                     shapeChangingArgs.currentShapeSettings.width = selectionChangingArgs.currentSelectionSettings.width;
@@ -4680,7 +4930,7 @@ var Selection = /** @class */ (function () {
     Selection.prototype.shapeEvent = function (shapeChangingArgs) {
         var parent = this.parent;
         parent.notify('shape', { prop: 'updateShapeChangeEventArgs', onPropertyChange: false,
-            value: { shapeSettings: shapeChangingArgs.currentShapeSettings } });
+            value: { shapeSettings: shapeChangingArgs.currentShapeSettings, allowShapeOverflow: shapeChangingArgs.allowShapeOverflow } });
         if (parent.activeObj.activePoint) {
             var obj = { prevActObj: null };
             parent.notify('draw', { prop: 'getPrevActObj', onPropertyChange: false, value: { obj: obj } });
@@ -4695,18 +4945,15 @@ var Selection = /** @class */ (function () {
             parent.notify('draw', { prop: 'drawObject', onPropertyChange: false, value: { canvas: 'duplicate', obj: parent.activeObj, isCropRatio: null,
                     points: null, isPreventDrag: true, saveContext: null, isPreventSelection: true } });
             if (!this.isShapeInserted) {
-                var activePoint = parent.activeObj.activePoint;
-                var _a = parent.img, destLeft = _a.destLeft, destWidth = _a.destWidth, destTop = _a.destTop, destHeight = _a.destHeight;
-                this.isPreventDragging =
-                    activePoint.startX < destLeft ||
-                        activePoint.endX > destLeft + destWidth ||
-                        activePoint.startY < destTop ||
-                        activePoint.endY > destTop + destHeight;
+                this.isPreventDragging = this.isShapeDragOut();
             }
         }
     };
     Selection.prototype.upgradeImageQuality = function () {
         var parent = this.parent;
+        if (!parent.activeObj.imageCanvas) {
+            return;
+        }
         var activeObj = extend({}, parent.activeObj, null, true);
         var ctx = parent.activeObj.imageCanvas.getContext('2d');
         var dimObj = { width: 0, height: 0 };
@@ -4766,6 +5013,17 @@ var Selection = /** @class */ (function () {
         for (var i = 0, len = parent.objColl.length; i < len; i++) {
             if (JSON.stringify(obj) === JSON.stringify(parent.objColl[i])) {
                 parent.objColl.splice(i, 1);
+                if (obj.shape && parent.textArea.style.display === 'none') {
+                    var actObj = extend({}, obj, {}, true);
+                    parent.notify('shape', { prop: 'refreshActiveObj', onPropertyChange: false });
+                    this.lowerContext.clearRect(0, 0, parent.lowerCanvas.width, parent.lowerCanvas.height);
+                    parent.notify('draw', { prop: 'render-image', value: { isMouseWheel: null } });
+                    if (parent.rotateFlipColl.length > 0 && (parent.panPoint.totalPannedClientPoint.x !== 0 ||
+                        parent.panPoint.totalPannedClientPoint.y !== 0)) {
+                        parent.notify('draw', { prop: 'redrawImgWithObj', onPropertyChange: false });
+                    }
+                    obj = parent.activeObj = actObj;
+                }
                 break;
             }
         }
@@ -4793,6 +5051,11 @@ var Selection = /** @class */ (function () {
                         points: null, isPreventDrag: true, saveContext: null, isPreventSelection: null } });
             }
             else {
+                if (parent.activeObj.shape === 'redact') {
+                    this.lowerContext.clearRect(0, 0, parent.lowerCanvas.width, parent.lowerCanvas.height);
+                    parent.notify('draw', { prop: 'redrawImgWithObj', onPropertyChange: false });
+                    parent.notify('draw', { prop: 'clearOuterCanvas', onPropertyChange: false, value: { context: this.lowerContext } });
+                }
                 parent.notify('draw', { prop: 'drawObject', onPropertyChange: false, value: { canvas: 'duplicate', obj: null, isCropRatio: null,
                         points: null, isPreventDrag: true, saveContext: null, isPreventSelection: null } });
             }
@@ -4833,8 +5096,9 @@ var Selection = /** @class */ (function () {
         else if (actObj.shape === 'line' || actObj.shape === 'arrow') {
             var smallPoint = { x: startX < endX ? startX : endX, y: startY < endY ? startY : endY };
             var largePoint = { x: startX > endX ? startX : endX, y: startY > endY ? startY : endY };
-            if (x >= (Math.floor(smallPoint.x) - 5) && x <= (Math.ceil(largePoint.x) + 5) &&
-                y >= (Math.floor(smallPoint.y) - 5) && y <= (Math.ceil(largePoint.y) + 5)) {
+            if ((x >= (Math.floor(smallPoint.x) - 5) && x <= (Math.ceil(largePoint.x) + 5) &&
+                y >= (Math.floor(smallPoint.y) - 5) && y <= (Math.ceil(largePoint.y) + 5)) ||
+                parent.activeObj.preventShapeDragOut) {
                 isInside = true;
             }
         }
@@ -4866,7 +5130,11 @@ var Selection = /** @class */ (function () {
             parent.notify('shape', { prop: 'updImgRatioForActObj', onPropertyChange: false });
             if (parent.activeObj.horTopLine !== undefined && parent.activeObj.horTopLine.startX !== 0 && parent.activeObj.horTopLine.endX
                 !== 0 && !parent.currObjType.isCustomCrop && parent.currObjType.shape !== '') {
-                parent.objColl.push(extend({}, parent.activeObj, {}, true));
+                if (parent.objColl.length > 0 &&
+                    JSON.stringify(parent.objColl[parent.objColl.length - 1].activePoint) !==
+                        JSON.stringify(parent.activeObj.activePoint)) {
+                    parent.objColl.push(extend({}, parent.activeObj, {}, true));
+                }
             }
             var shapeColl = ['rectangle', 'ellipse', 'line', 'arrow', 'path', 'text', 'image'];
             if (shapeColl.indexOf(parent.activeObj.shape) > -1) {
@@ -4874,16 +5142,6 @@ var Selection = /** @class */ (function () {
                 this.lowerContext.filter = 'brightness(' + 1 + ') ' + 'contrast(' + 100 + '%) ' + 'hue-rotate(' + 0 + 'deg) ' +
                     'saturate(' + 100 + '%) ' + 'opacity(' + 1 + ') ' + 'blur(' + 0 + 'px) ' + 'sepia(0%) ' + 'grayscale(0%) ' +
                     'invert(0%)';
-                for (var i = 0; i < parent.objColl.length; i++) {
-                    var obj = { isInside: false };
-                    parent.notify('crop', { prop: 'isObjInImage', onPropertyChange: false,
-                        value: { obj: parent.objColl[i], object: obj } });
-                    if (obj['isInside']) {
-                        parent.notify('shape', { prop: 'apply', onPropertyChange: false,
-                            value: { shape: parent.objColl[i].shape, obj: parent.objColl[i], canvas: null } });
-                        parent.notify('shape', { prop: 'refreshActiveObj', onPropertyChange: false });
-                    }
-                }
                 parent.notify('shape', { prop: 'drawAnnotations', onPropertyChange: false,
                     value: { ctx: this.lowerContext, shape: 'zoom', pen: 'zoom', isPreventApply: null } });
                 this.lowerContext.filter = tempFilter;
@@ -4921,6 +5179,20 @@ var Selection = /** @class */ (function () {
             && parent.textArea.style.color.split('(')[1].split(',')[3] ?
             this.rgbToHex(parseFloat(parent.textArea.style.color.split('(')[1].split(',')[0]), parseFloat(parent.textArea.style.color.split('(')[1].split(',')[1]), parseFloat(parent.textArea.style.color.split('(')[1].split(',')[2]), parseFloat(parent.textArea.style.color.split('(')[1].split(',')[3])) :
             parent.textArea.style.color;
+        parent.activeObj.strokeSettings.fillColor = parent.textArea.style.backgroundColor !== '' &&
+            parent.textArea.style.backgroundColor.split('(')[1] && parent.textArea.style.backgroundColor.split('(')[1].split(',')[0] &&
+            parent.textArea.style.backgroundColor.split('(')[1].split(',')[1] && parent.textArea.style.backgroundColor.split('(')[1].split(',')[2]
+            && parent.textArea.style.backgroundColor.split('(')[1].split(',')[3] ?
+            this.rgbToHex(parseFloat(parent.textArea.style.backgroundColor.split('(')[1].split(',')[0]), parseFloat(parent.textArea.style.backgroundColor.split('(')[1].split(',')[1]), parseFloat(parent.textArea.style.backgroundColor.split('(')[1].split(',')[2]), parseFloat(parent.textArea.style.backgroundColor.split('(')[1].split(',')[3])) :
+            parent.textArea.style.backgroundColor;
+        parent.activeObj.strokeSettings.outlineColor = parent.textArea.style.textShadow !== '' &&
+            parent.textArea.style.textShadow.split('(')[1] && parent.textArea.style.textShadow.split('(')[1].split(',')[0] &&
+            parent.textArea.style.textShadow.split('(')[1].split(',')[1] && parent.textArea.style.textShadow.split('(')[1].split(',')[2]
+            && parent.textArea.style.textShadow.split('(')[1].split(',')[3] ?
+            this.rgbToHex(parseFloat(parent.textArea.style.textShadow.split('(')[1].split(',')[0]), parseFloat(parent.textArea.style.textShadow.split('(')[1].split(',')[1]), parseFloat(parent.textArea.style.textShadow.split('(')[1].split(',')[2]), parseFloat(parent.textArea.style.textShadow.split('(')[1].split(',')[3])) :
+            (parent.textArea.style.textShadow.match(/^(\s*[\w#]+)\s/) ?
+                parent.textArea.style.textShadow.match(/^(\s*[\w#]+)\s/)[1].trim() :
+                parent.textArea.style.textShadow);
         if (parent.textArea.style.fontWeight === 'bold') {
             parent.activeObj.textSettings.bold = true;
         }
@@ -4944,7 +5216,13 @@ var Selection = /** @class */ (function () {
         var hexG = this.padLeft(g.toString(16), 2, '0');
         var hexB = this.padLeft(b.toString(16), 2, '0');
         var hexA = this.padLeft(Math.round(a * 255).toString(16), 2, '0');
-        var hex = "#" + hexR + hexG + hexB + hexA;
+        var hex;
+        if (isNaN(Number(hexA))) {
+            hex = "#" + hexR + hexG + hexB;
+        }
+        else {
+            hex = "#" + hexR + hexG + hexB + hexA;
+        }
         return hex;
     };
     Selection.prototype.padLeft = function (value, length, padChar) {
@@ -5026,6 +5304,7 @@ var Selection = /** @class */ (function () {
                 parent.notify('shape', { prop: 'setKeyHistory', onPropertyChange: false, value: { keyHistory: '' } });
                 parent.clearSelection();
                 parent.trigger('shapeChanging', shapeChangingArgs);
+                parent.editCompleteArgs = shapeChangingArgs;
                 parent.notify('toolbar', { prop: 'refresh-main-toolbar', onPropertyChange: false });
                 parent.notify('draw', { prop: 'render-image', value: { isMouseWheel: null } });
                 if (!isNullOrUndefined(prevObj.objColl[prevObj.objColl.length - 1].currIndex)) {
@@ -5232,6 +5511,12 @@ var Selection = /** @class */ (function () {
         }
         return isValue;
     };
+    Selection.prototype.allowOutofBound = function () {
+        var shapes = ['ellipse', 'rectangle', 'text', 'image', 'redact'];
+        // eslint-disable-next-line max-len
+        var allowOutofBound = (shapes.indexOf(this.parent.activeObj.shape) !== -1 && this.parent.activeObj.rotatedAngle === 0) ? false : true;
+        return allowOutofBound;
+    };
     return Selection;
 }());
 export { Selection };