@syncfusion/ej2-image-editor 25.2.4 → 26.1.38

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

@@ -1,5 +1,6 @@
+/* eslint-disable prefer-const */
 import { Browser, EventHandler, extend, getComponent, isNullOrUndefined } from '@syncfusion/ej2-base';
-import { ShapeType, ZoomTrigger } from '../index';
+import { ArrowheadType, ShapeType, ZoomTrigger } from '../index';
 var Selection = /** @class */ (function () {
     function Selection(parent) {
         this.diffPoint = { x: 0, y: 0 }; // updates resize points
@@ -10,7 +11,7 @@ var Selection = /** @class */ (function () {
         this.dragPoint = { startX: 0, startY: 0, endX: 0, endY: 0 }; // updates drag start and end points in mousedown and mousemove
         this.isShapeInserted = false;
         this.tempActiveObj = { activePoint: { startX: 0, startY: 0, endX: 0, endY: 0, width: 0, height: 0 },
-            flipObjColl: [], triangle: [], triangleRatio: [] }; // for undo redo
+            flipObjColl: [], triangle: [], triangleRatio: [], order: null }; // for undo redo
         this.isFirstMove = false; // for pinch zoom
         this.startTouches = []; // for pinch zoom
         this.tempTouches = []; // for pinch zoom
@@ -36,6 +37,7 @@ var Selection = /** @class */ (function () {
         this.isSliding = false;
         this.mouseDown = '';
         this.isSliderActive = false;
+        this.arrowShape = [ArrowheadType.None, ArrowheadType.SolidArrow];
         this.parent = parent;
         this.addEventListener();
     }
@@ -57,9 +59,6 @@ var Selection = /** @class */ (function () {
         var parent = this.parent;
         this.updatePrivateVariables();
         switch (args.prop) {
-            case 'mouse-up':
-                this.selMouseUpEvent();
-                break;
             case 'setCursor':
                 this.setCursor(args.value['x'], args.value['y']);
                 break;
@@ -81,9 +80,6 @@ var Selection = /** @class */ (function () {
             case 'calcShapeRatio':
                 this.calcShapeRatio(args.value['x'], args.value['y'], args.value['imgWidth'], args.value['imgHeight']);
                 break;
-            case 'applyCurrShape':
-                this.applyCurrShape(args.value['isShapeClick']);
-                break;
             case 'tab':
                 this.performTabAction();
                 break;
@@ -209,7 +205,7 @@ var Selection = /** @class */ (function () {
             case 'annotate':
                 this.currentDrawingShape = args.value['shape'];
                 if (args.value['shape'] === 'text') {
-                    parent.activeObj.textSettings.fontSize = 100;
+                    parent.activeObj.textSettings.fontSize = 11;
                     parent.activeObj.keyHistory = 'Enter Text';
                     parent.notify('shape', { prop: 'initializeTextShape', onPropertyChange: false,
                         value: { text: null, fontFamily: null, fontSize: null, bold: null, italic: null, strokeColor: null } });
@@ -260,15 +256,9 @@ var Selection = /** @class */ (function () {
             case 'upgradeImageQuality':
                 this.upgradeImageQuality();
                 break;
-            case 'getScaleRatio':
-                args.value['obj']['newScale'] = this.getScaleRatio(args.value['scale']);
-                break;
             case 'triggerShapeChange':
                 this.triggerShapeChange(args.value['shapeResizingArgs'], args.value['shapeMovingArgs'], args.value['type']);
                 break;
-            case 'limitDrag':
-                args.value['bool'] = this.limitDrag(args.value['isStart']);
-                break;
             case 'applyTransformToImg':
                 this.applyTransformToImg(args.value['ctx']);
                 break;
@@ -284,6 +274,38 @@ var Selection = /** @class */ (function () {
             case 'getArrowType':
                 args.value['obj']['type'] = this.getArrowType(args.value['type']);
                 break;
+            case 'setArrowShape':
+                if (args.value['type'] === 'initial') {
+                    this.arrowShape[0] = args.value['shape'];
+                }
+                else {
+                    this.arrowShape[1] = args.value['shape'];
+                }
+                break;
+            case 'updateNWPoints':
+                this.updateNWPoints(args.value['x'], args.value['y']);
+                break;
+            case 'updateNPoints':
+                this.updateNPoints(args.value['x'], args.value['y']);
+                break;
+            case 'updateNEPoints':
+                this.updateNEPoints(args.value['x'], args.value['y']);
+                break;
+            case 'updateWPoints':
+                this.updateWPoints(args.value['x'], args.value['y']);
+                break;
+            case 'updateEPoints':
+                this.updateEPoints(args.value['x'], args.value['y']);
+                break;
+            case 'updateSWPoints':
+                this.updateSWPoints(args.value['x'], args.value['y']);
+                break;
+            case 'updateSPoints':
+                this.updateSPoints(args.value['x'], args.value['y']);
+                break;
+            case 'updateSEPoints':
+                this.updateSEPoints(args.value['x'], args.value['y']);
+                break;
         }
     };
     Selection.prototype.getModuleName = function () {
@@ -304,7 +326,7 @@ var Selection = /** @class */ (function () {
         this.isTouch = this.isObjSelected = this.isFhdPoint = this.isShapeInserted = false;
         this.dragPoint = { startX: 0, startY: 0, endX: 0, endY: 0 };
         this.tempActiveObj = { activePoint: { startX: 0, startY: 0, endX: 0, endY: 0, width: 0, height: 0 },
-            flipObjColl: [], triangle: [], triangleRatio: [] };
+            flipObjColl: [], triangle: [], triangleRatio: [], order: null };
         this.isFirstMove = false;
         this.cursorTargetId = this.dragElement = '';
         this.startTouches = [];
@@ -332,6 +354,7 @@ var Selection = /** @class */ (function () {
         this.resizedElement = '';
         this.mouseDown = '';
         this.isSliderActive = false;
+        this.arrowShape = [ArrowheadType.None, ArrowheadType.SolidArrow];
     };
     Selection.prototype.performTabAction = function () {
         var parent = this.parent;
@@ -425,6 +448,7 @@ var Selection = /** @class */ (function () {
     };
     Selection.prototype.setCursor = function (x, y) {
         var parent = this.parent;
+        parent.upperCanvas.style.cursor = parent.cursor = 'default';
         var frameObject = { bool: null };
         parent.notify('toolbar', { prop: 'getFrameToolbar', onPropertyChange: false, value: { obj: frameObject } });
         if (parent.isResize || this.isSliding || frameObject['bool']) {
@@ -433,10 +457,6 @@ var Selection = /** @class */ (function () {
         }
         var isCropSelection = false;
         var splitWords;
-        if (this.currentDrawingShape !== '') {
-            parent.upperCanvas.style.cursor = parent.cursor = 'crosshair';
-            return;
-        }
         if (parent.currObjType.isDragging) {
             if (this.dragElement === '') {
                 parent.upperCanvas.style.cursor = parent.cursor = 'move';
@@ -446,6 +466,91 @@ var Selection = /** @class */ (function () {
             }
             return;
         }
+        if (parent.togglePen) {
+            parent.upperCanvas.style.cursor = parent.cursor = 'crosshair';
+            return;
+        }
+        if (parent.activeObj.shape) {
+            this.setCursorForActObj(splitWords, isCropSelection, x, y);
+        }
+        if (parent.cursor === 'default' || parent.cursor === 'grab') {
+            var highestOrder = this.getHighestOrder();
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            var tempShapeColl = extend([], parent.shapeColl, [], true);
+            var objColl = extend([], parent.objColl, [], true);
+            var isShape = false;
+            while (highestOrder > 0) {
+                isShape = false;
+                for (var i = tempShapeColl.length - 1; i >= 0; i--) {
+                    if (tempShapeColl[i].order === highestOrder) {
+                        isShape = true;
+                        if (tempShapeColl[i].id && tempShapeColl[i].id.indexOf('pen') > -1) {
+                            if (parent.pointColl[0] && (parent.cursor !== 'grab' || !isCropSelection)
+                                && !parent.currObjType.isDragging && !parent.currObjType.isResize) {
+                                var points = extend([], parent.points, [], true);
+                                if (!isCropSelection) {
+                                    this.setCursorForFreehandDrawing(x, y, parent.upperCanvas, tempShapeColl[i].id);
+                                }
+                                parent.points = points;
+                            }
+                        }
+                        else {
+                            parent.objColl = [];
+                            parent.objColl.push(extend({}, tempShapeColl[i], null, true));
+                            var cursor = parent.upperCanvas.style.cursor;
+                            if (parent.objColl.length > 0 && (parent.cursor !== 'grab' || !isCropSelection)) {
+                                this.setCursorFromObj(x, y, parent.objColl, parent.upperCanvas, isCropSelection);
+                            }
+                            if (cursor === 'grab' && parent.cursor === 'default') {
+                                parent.upperCanvas.style.cursor = parent.cursor = 'grab';
+                            }
+                        }
+                    }
+                    else if (isNullOrUndefined(tempShapeColl[i].order)) {
+                        isShape = true;
+                    }
+                }
+                if (parent.cursor !== 'default' && parent.cursor !== 'grab') {
+                    break;
+                }
+                else if (isShape) {
+                    var isBreak = false;
+                    while (!isBreak && highestOrder > 0) {
+                        for (var a = 0; a < tempShapeColl.length; a++) {
+                            if (tempShapeColl[a].order === highestOrder - 1) {
+                                isBreak = true;
+                                break;
+                            }
+                        }
+                        highestOrder--;
+                        if (!isBreak) {
+                            highestOrder--;
+                        }
+                    }
+                }
+            }
+            parent.objColl = objColl;
+            if (parent.cursor === 'default' || parent.cursor === 'grab') {
+                if (parent.togglePan) {
+                    parent.lowerCanvas.style.cursor = parent.upperCanvas.style.cursor = parent.cursor = 'grab';
+                }
+            }
+        }
+        if (this.currentDrawingShape !== '' && (parent.cursor === 'default' || parent.cursor === 'grab')) {
+            parent.upperCanvas.style.cursor = parent.cursor = 'crosshair';
+        }
+    };
+    Selection.prototype.getHighestOrder = function () {
+        var highestOrder = 0;
+        for (var i = 0; i < this.parent.shapeColl.length; i++) {
+            if (this.parent.shapeColl[i].order > highestOrder) {
+                highestOrder = this.parent.shapeColl[i].order;
+            }
+        }
+        return highestOrder;
+    };
+    Selection.prototype.setCursorForActObj = function (splitWords, isCropSelection, x, y) {
+        var parent = this.parent;
         if (parent.activeObj.horTopLine !== undefined) {
             if (parent.activeObj.shape !== undefined) {
                 splitWords = parent.activeObj.shape.split('-');
@@ -506,20 +611,6 @@ var Selection = /** @class */ (function () {
                 parent.upperCanvas.style.cursor = parent.cursor = 'default';
             }
         }
-        if (parent.cursor === 'default' || parent.cursor === 'grab') {
-            var cursor = parent.upperCanvas.style.cursor;
-            if (parent.objColl.length > 0 && (parent.cursor !== 'grab' || !isCropSelection)) {
-                this.setCursorFromObj(x, y, parent.objColl, parent.upperCanvas, isCropSelection);
-            }
-            if (cursor === 'grab' && parent.cursor === 'default') {
-                parent.upperCanvas.style.cursor = parent.cursor = 'grab';
-            }
-        }
-        if ((parent.cursor === 'default' || parent.cursor === 'grab')
-            && parent.pointColl[0] && (parent.cursor !== 'grab' || !isCropSelection)
-            && !parent.currObjType.isDragging && !parent.currObjType.isResize) {
-            this.setCursorForFreehandDrawing(x, y, parent.upperCanvas);
-        }
     };
     Selection.prototype.setCursorForPath = function (actObj, x, y, upperCanvas) {
         this.setCursorForLineArrow(actObj, x, y, upperCanvas);
@@ -563,6 +654,9 @@ var Selection = /** @class */ (function () {
     Selection.prototype.setCursorForLineArrow = function (actObj, x, y, upperCanvas) {
         var index;
         var radius = actObj.topLeftCircle.radius;
+        if (isNullOrUndefined(actObj.pointColl)) {
+            return index;
+        }
         for (var i = 0, len = actObj.pointColl.length; i < len; i++) {
             var point = actObj.pointColl[i];
             if (x >= (point.x - (radius * 2)) && x <= (point.x + (radius * 2)) &&
@@ -755,7 +849,7 @@ var Selection = /** @class */ (function () {
         }
         return element;
     };
-    Selection.prototype.setCursorForFreehandDrawing = function (x, y, upperCanvas) {
+    Selection.prototype.setCursorForFreehandDrawing = function (x, y, upperCanvas, id) {
         var upperContext = upperCanvas.getContext('2d');
         var parent = this.parent;
         var textArea = document.querySelector('#' + parent.element.id + '_textArea');
@@ -764,6 +858,9 @@ var Selection = /** @class */ (function () {
             value: { index: -1 } });
         var sPoints;
         for (var n = 0; n < parent.freehandCounter; n++) {
+            if (id && id !== parent.pointColl[n].id) {
+                continue;
+            }
             var obj = { selPointColl: {} };
             parent.notify('freehand-draw', { prop: 'getSelPointColl', onPropertyChange: false, value: { obj: obj } });
             sPoints = extend([], obj['selPointColl'][n].points, []);
@@ -796,9 +893,12 @@ var Selection = /** @class */ (function () {
                             }
                         }
                         if (this.isFhdEditing) {
-                            var strokeColor = ptc.strokeColor;
+                            var indexObj = { freehandSelectedIndex: -1 };
+                            parent.notify('freehand-draw', { prop: 'getFreehandSelectedIndex', onPropertyChange: false, value: { obj: indexObj } });
+                            var strokeColor = parent.pointColl[indexObj['freehandSelectedIndex']].strokeColor;
+                            var strokeWidth = parent.pointColl[indexObj['freehandSelectedIndex']].strokeWidth;
                             parent.notify('freehand-draw', { prop: 'hoverFhd', onPropertyChange: false,
-                                value: { strokeColor: strokeColor, strokeWidth: ptc.strokeWidth } });
+                                value: { strokeColor: strokeColor, strokeWidth: strokeWidth } });
                         }
                         else {
                             parent.notify('freehand-draw', { prop: 'setFreehandDrawHoveredIndex', onPropertyChange: false,
@@ -826,9 +926,12 @@ var Selection = /** @class */ (function () {
                             }
                         }
                         if (this.isFhdEditing) {
-                            var strokeColor = ptc.strokeColor;
+                            var indexObj = { freehandSelectedIndex: -1 };
+                            parent.notify('freehand-draw', { prop: 'getFreehandSelectedIndex', onPropertyChange: false, value: { obj: indexObj } });
+                            var strokeColor = parent.pointColl[indexObj['freehandSelectedIndex']].strokeColor;
+                            var strokeWidth = parent.pointColl[indexObj['freehandSelectedIndex']].strokeWidth;
                             parent.notify('freehand-draw', { prop: 'hoverFhd', onPropertyChange: false,
-                                value: { strokeColor: strokeColor, strokeWidth: ptc.strokeWidth } });
+                                value: { strokeColor: strokeColor, strokeWidth: strokeWidth } });
                         }
                         this.isFhdPoint = false;
                     }
@@ -880,7 +983,6 @@ var Selection = /** @class */ (function () {
         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 maxDimension = obj;
         var previousShapeSettings = this.updatePrevShapeSettings();
         var shapeResizingArgs = { cancel: false, action: 'resize', previousShapeSettings: previousShapeSettings };
         var shapeMovingArgs = { cancel: false, action: 'move', previousShapeSettings: previousShapeSettings };
@@ -890,7 +992,7 @@ var Selection = /** @class */ (function () {
             parent.notify('shape', { prop: 'updateFontRatio', onPropertyChange: false,
                 value: { obj: parent.activeObj, isTextArea: null } });
         }
-        if (this.currentDrawingShape !== '' && (this.dragElement === '' || this.dragElement === 'move')) {
+        if (this.currentDrawingShape !== '' && (this.dragElement === '' || this.dragElement === 'move') && parent.isShapeDrawing) {
             var shapeColl = ['line', 'arrow', 'path'];
             if (shapeColl.indexOf(parent.activeObj.shape) > -1) {
                 this.dragElement = 'e-resize';
@@ -926,7 +1028,7 @@ var Selection = /** @class */ (function () {
         }
         switch (this.dragElement.toLowerCase()) {
             case 'nw-resize':
-                this.updateNWPoints(x, y, maxDimension);
+                this.updateNWPoints(x, y);
                 parent.notify('shape', { prop: 'updateArrowDirection', onPropertyChange: false,
                     value: { obj: parent.activeObj, flip: null, rotatedDegree: null } });
                 this.triggerShapeChange(shapeResizingArgs, shapeMovingArgs, 'resize');
@@ -938,7 +1040,7 @@ var Selection = /** @class */ (function () {
                 this.triggerShapeChange(shapeResizingArgs, shapeMovingArgs, 'resize');
                 break;
             case 'ne-resize':
-                this.updateNEPoints(x, y, maxDimension);
+                this.updateNEPoints(x, y);
                 parent.notify('shape', { prop: 'updateArrowDirection', onPropertyChange: false,
                     value: { obj: parent.activeObj, flip: null, rotatedDegree: null } });
                 this.triggerShapeChange(shapeResizingArgs, shapeMovingArgs, 'resize');
@@ -956,7 +1058,7 @@ var Selection = /** @class */ (function () {
                 this.triggerShapeChange(shapeResizingArgs, shapeMovingArgs, 'resize');
                 break;
             case 'sw-resize':
-                this.updateSWPoints(x, y, maxDimension);
+                this.updateSWPoints(x, y);
                 parent.notify('shape', { prop: 'updateArrowDirection', onPropertyChange: false,
                     value: { obj: parent.activeObj, flip: null, rotatedDegree: null } });
                 this.triggerShapeChange(shapeResizingArgs, shapeMovingArgs, 'resize');
@@ -968,7 +1070,7 @@ var Selection = /** @class */ (function () {
                 this.triggerShapeChange(shapeResizingArgs, shapeMovingArgs, 'resize');
                 break;
             case 'se-resize':
-                this.updateSEPoints(x, y, maxDimension);
+                this.updateSEPoints(x, y);
                 parent.notify('shape', { prop: 'updateArrowDirection', onPropertyChange: false,
                     value: { obj: parent.activeObj, flip: null, rotatedDegree: null } });
                 this.triggerShapeChange(shapeResizingArgs, shapeMovingArgs, 'resize');
@@ -1108,10 +1210,11 @@ var Selection = /** @class */ (function () {
                 this.isCropSelection = true;
             }
             if (!this.isCropSelection) {
-                if (this.currentDrawingShape !== '') {
+                if (this.currentDrawingShape !== '' && parent.upperCanvas.style.cursor === 'crosshair') {
                     shapeResizingArgs.action = 'drawing';
                 }
                 parent.trigger('shapeChanging', shapeResizingArgs);
+                this.isPreventShaping = shapeResizingArgs.cancel;
                 parent.notify('shape', { prop: 'updateShapeChangeEventArgs', onPropertyChange: false,
                     value: { shapeSettings: shapeResizingArgs.currentShapeSettings } });
             }
@@ -1135,11 +1238,13 @@ var Selection = /** @class */ (function () {
         }
         else if (type === 'mouse-down' || type === 'mouse-up') {
             parent.trigger('shapeChanging', shapeResizingArgs);
+            this.isPreventShaping = shapeResizingArgs.cancel;
             parent.notify('shape', { prop: 'updateShapeChangeEventArgs', onPropertyChange: false,
                 value: { shapeSettings: shapeResizingArgs.currentShapeSettings } });
         }
         else {
             parent.trigger('shapeChanging', shapeMovingArgs);
+            this.isPreventShaping = shapeResizingArgs.cancel;
             parent.notify('shape', { prop: 'updateShapeChangeEventArgs', onPropertyChange: false,
                 value: { shapeSettings: shapeMovingArgs.currentShapeSettings } });
         }
@@ -1352,7 +1457,78 @@ var Selection = /** @class */ (function () {
             actPoint.endY = tempActiveObj.activePoint.endY;
         }
     };
-    Selection.prototype.updateNWPoints = function (x, y, maxDimension) {
+    Selection.prototype.performSEResize = function (x, y, tempActiveObj, actPoint) {
+        var parent = this.parent;
+        this.resizeImg(x, y, 'se-resize', tempActiveObj);
+        if (actPoint.endX < actPoint.startX) {
+            var temp = actPoint.endX;
+            actPoint.endX = actPoint.startX;
+            actPoint.startX = temp;
+            this.dragElement = parent.upperCanvas.style.cursor = parent.cursor = 'sw-resize';
+        }
+        if (actPoint.endY < actPoint.startY) {
+            var temp = actPoint.endY;
+            actPoint.endY = actPoint.startY;
+            actPoint.startY = temp;
+            this.dragElement = parent.upperCanvas.style.cursor = parent.cursor = 'ne-resize';
+        }
+        this.revertCustomSelection(actPoint, tempActiveObj, 'se-resize');
+        this.revertResizing(tempActiveObj);
+    };
+    Selection.prototype.performNWResize = function (x, y, tempActiveObj, actPoint) {
+        var parent = this.parent;
+        this.resizeImg(x, y, 'nw-resize', tempActiveObj);
+        if (actPoint.startX > actPoint.endX) {
+            var temp = actPoint.startX;
+            actPoint.startX = actPoint.endX;
+            actPoint.endX = temp;
+            this.dragElement = parent.upperCanvas.style.cursor = parent.cursor = 'ne-resize';
+        }
+        if (actPoint.startY > actPoint.endY) {
+            var temp = actPoint.startY;
+            actPoint.startY = actPoint.endY;
+            actPoint.endY = temp;
+            this.dragElement = parent.upperCanvas.style.cursor = parent.cursor = 'sw-resize';
+        }
+        this.revertCustomSelection(actPoint, tempActiveObj, 'nw-resize');
+        this.revertResizing(tempActiveObj);
+    };
+    Selection.prototype.isCustomSelection = function () {
+        if (this.parent.activeObj.shape) {
+            var shapeColl = ['custom', 'circle', 'square', '2:3', '3:2', '3:4', '4:3', '4:5', '5:4', '5:7', '7:5', '9:16', '16:9'];
+            return this.parent.activeObj.shape.indexOf('crop-') > -1 && shapeColl.indexOf(this.parent.activeObj.shape.split('-')[1]) === -1;
+        }
+        return false;
+    };
+    Selection.prototype.revertCustomSelection = function (actPoint, tempActiveObj, type) {
+        var parent = this.parent;
+        if (this.isCustomSelection()) {
+            var _a = parent.img, destLeft = _a.destLeft, destTop = _a.destTop, destWidth = _a.destWidth, destHeight = _a.destHeight;
+            var endX = destLeft + destWidth < parent.lowerCanvas.width ?
+                destLeft + destWidth : parent.lowerCanvas.width;
+            var endY = destTop + destHeight < parent.lowerCanvas.height ?
+                destTop + destHeight : parent.lowerCanvas.height;
+            var left = destLeft > 0 ? destLeft : 0;
+            var top_1 = destTop > 0 ? destTop : 0;
+            var endY1 = destTop > 0 ? destTop : 0;
+            var endX1 = destLeft > 0 ? destLeft : 0;
+            if ((type === 'se-resize' && (actPoint.endX > endX || actPoint.endY > endY)) ||
+                (type === 'nw-resize' && (actPoint.startX < left || actPoint.startY < top_1)) ||
+                (type === 'ne-resize' && (actPoint.endX > endX || actPoint.startY < endY1)) ||
+                (type === 'sw-resize' && (actPoint.startX < endX1 || actPoint.endY > endY))) {
+                this.revertPoints(actPoint, tempActiveObj);
+            }
+        }
+    };
+    Selection.prototype.revertPoints = function (actPoint, tempActiveObj) {
+        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;
+    };
+    Selection.prototype.updateNWPoints = function (x, y) {
         var parent = this.parent;
         var actPoint = parent.activeObj.activePoint;
         var width;
@@ -1369,8 +1545,9 @@ var Selection = /** @class */ (function () {
             if (parent.activeObj.shape !== undefined) {
                 splitWords = parent.activeObj.shape.split('-');
             }
-            if (parent.activeObj.shape === 'crop-custom' || (parent.activeObj.shape !== undefined && splitWords[0] !== 'crop')) {
-                if (parent.activeObj.shape === 'image') {
+            if (parent.activeObj.shape === 'crop-custom' || (parent.activeObj.shape !== undefined && splitWords[0] !== 'crop')
+                || this.isCustomSelection()) {
+                if (parent.activeObj.shape === 'image' || this.isCustomSelection()) {
                     this.resizeImg(x, y, 'nw-resize', tempActiveObj);
                 }
                 else {
@@ -1388,10 +1565,11 @@ var Selection = /** @class */ (function () {
                     actPoint.endY = temp;
                     this.dragElement = parent.upperCanvas.style.cursor = parent.cursor = 'sw-resize';
                 }
+                this.revertCustomSelection(actPoint, tempActiveObj, 'nw-resize');
                 this.revertResizing(tempActiveObj);
             }
             else {
-                var _a = parent.img, destLeft = _a.destLeft, destTop = _a.destTop, destWidth = _a.destWidth, destHeight = _a.destHeight;
+                var _a = parent.img, destLeft = _a.destLeft, destTop = _a.destTop;
                 if (actPoint.startX < x && actPoint.startY < y) {
                     width = x - actPoint.startX;
                     height = y - actPoint.startY;
@@ -1400,8 +1578,8 @@ var Selection = /** @class */ (function () {
                     actPoint.startX += newScale.x;
                     actPoint.startY += newScale.y;
                     var left = destLeft > 0 ? destLeft : 0;
-                    var top_1 = destTop > 0 ? destTop : 0;
-                    if (actPoint.startX < left || actPoint.startY < top_1) {
+                    var top_2 = destTop > 0 ? destTop : 0;
+                    if (actPoint.startX < left || actPoint.startY < top_2) {
                         actPoint.startX -= newScale.x;
                         actPoint.startY -= newScale.y;
                     }
@@ -1414,8 +1592,8 @@ var Selection = /** @class */ (function () {
                     actPoint.startX -= newScale.x;
                     actPoint.startY -= newScale.y;
                     var left = destLeft > 0 ? destLeft : 0;
-                    var top_2 = destTop > 0 ? destTop : 0;
-                    if (actPoint.startX < left || actPoint.startY < top_2) {
+                    var top_3 = destTop > 0 ? destTop : 0;
+                    if (actPoint.startX < left || actPoint.startY < top_3) {
                         actPoint.startX += newScale.x;
                         actPoint.startY += newScale.y;
                     }
@@ -1467,8 +1645,11 @@ var Selection = /** @class */ (function () {
                 this.revertResizing(tempActiveObj);
             }
             else {
-                var _a = parent.img, destLeft = _a.destLeft, destTop = _a.destTop, destWidth = _a.destWidth, destHeight = _a.destHeight;
-                if (actPoint.endX > x && actPoint.startY < y) {
+                var _a = parent.img, destLeft = _a.destLeft, destTop = _a.destTop, destWidth = _a.destWidth;
+                if (this.isCustomSelection()) {
+                    this.performNWResize(x, y, tempActiveObj, actPoint);
+                }
+                else if (actPoint.endX > x && actPoint.startY < y) {
                     width = actPoint.endX - x;
                     height = y - actPoint.startY;
                     scale = Math.min(width, height);
@@ -1500,7 +1681,7 @@ var Selection = /** @class */ (function () {
             }
         }
     };
-    Selection.prototype.updateNEPoints = function (x, y, maxDimension) {
+    Selection.prototype.updateNEPoints = function (x, y) {
         var parent = this.parent;
         var actPoint = parent.activeObj.activePoint;
         var width;
@@ -1517,8 +1698,9 @@ var Selection = /** @class */ (function () {
             if (parent.activeObj.shape) {
                 splitWords = parent.activeObj.shape.split('-');
             }
-            if (parent.activeObj.shape === 'crop-custom' || (parent.activeObj.shape !== undefined && splitWords[0] !== 'crop')) {
-                if (parent.activeObj.shape === 'image') {
+            if (parent.activeObj.shape === 'crop-custom' || (parent.activeObj.shape !== undefined && splitWords[0] !== 'crop')
+                || this.isCustomSelection()) {
+                if (parent.activeObj.shape === 'image' || this.isCustomSelection()) {
                     this.resizeImg(x, y, 'ne-resize', tempActiveObj);
                 }
                 else {
@@ -1536,10 +1718,11 @@ var Selection = /** @class */ (function () {
                     actPoint.endY = temp;
                     this.dragElement = parent.upperCanvas.style.cursor = parent.cursor = 'se-resize';
                 }
+                this.revertCustomSelection(actPoint, tempActiveObj, 'ne-resize');
                 this.revertResizing(tempActiveObj);
             }
             else {
-                var _a = parent.img, destLeft = _a.destLeft, destTop = _a.destTop, destWidth = _a.destWidth, destHeight = _a.destHeight;
+                var _a = parent.img, destLeft = _a.destLeft, destTop = _a.destTop, destWidth = _a.destWidth;
                 if (actPoint.endX > x && actPoint.startY < y) {
                     width = actPoint.endX - x;
                     height = y - actPoint.startY;
@@ -1630,8 +1813,11 @@ var Selection = /** @class */ (function () {
                 this.revertResizing(tempActiveObj);
             }
             else {
-                var _a = parent.img, destLeft = _a.destLeft, destTop = _a.destTop, destWidth = _a.destWidth, destHeight = _a.destHeight;
-                if (actPoint.startX < x && actPoint.endY > y) {
+                var _a = parent.img, destLeft = _a.destLeft, destTop = _a.destTop, destHeight = _a.destHeight;
+                if (this.isCustomSelection()) {
+                    this.performNWResize(x, y, tempActiveObj, actPoint);
+                }
+                else if (actPoint.startX < x && actPoint.endY > y) {
                     width = x - actPoint.startX;
                     height = actPoint.endY - y;
                     scale = Math.min(width, height);
@@ -1715,7 +1901,10 @@ var Selection = /** @class */ (function () {
             }
             else {
                 var _a = parent.img, destLeft = _a.destLeft, destTop = _a.destTop, destWidth = _a.destWidth, destHeight = _a.destHeight;
-                if (actPoint.endX > x && actPoint.endY > y) {
+                if (this.isCustomSelection()) {
+                    this.performSEResize(x, y, tempActiveObj, actPoint);
+                }
+                else if (actPoint.endX > x && actPoint.endY > y) {
                     width = actPoint.endX - x;
                     height = actPoint.endY - y;
                     scale = Math.min(width, height);
@@ -1747,7 +1936,7 @@ var Selection = /** @class */ (function () {
             }
         }
     };
-    Selection.prototype.updateSWPoints = function (x, y, maxDimension) {
+    Selection.prototype.updateSWPoints = function (x, y) {
         var parent = this.parent;
         var actPoint = parent.activeObj.activePoint;
         var width;
@@ -1764,8 +1953,9 @@ var Selection = /** @class */ (function () {
             if (parent.activeObj.shape !== undefined) {
                 splitWords = parent.activeObj.shape.split('-');
             }
-            if (parent.activeObj.shape === 'crop-custom' || (parent.activeObj.shape !== undefined && splitWords[0] !== 'crop')) {
-                if (parent.activeObj.shape === 'image') {
+            if (parent.activeObj.shape === 'crop-custom' || (parent.activeObj.shape !== undefined && splitWords[0] !== 'crop')
+                || this.isCustomSelection()) {
+                if (parent.activeObj.shape === 'image' || this.isCustomSelection()) {
                     this.resizeImg(x, y, 'sw-resize', tempActiveObj);
                 }
                 else {
@@ -1783,10 +1973,11 @@ var Selection = /** @class */ (function () {
                     actPoint.startY = temp;
                     this.dragElement = parent.upperCanvas.style.cursor = parent.cursor = 'nw-resize';
                 }
+                this.revertCustomSelection(actPoint, tempActiveObj, 'sw-resize');
                 this.revertResizing(tempActiveObj);
             }
             else {
-                var _a = parent.img, destLeft = _a.destLeft, destTop = _a.destTop, destWidth = _a.destWidth, destHeight = _a.destHeight;
+                var _a = parent.img, destLeft = _a.destLeft, destTop = _a.destTop, destHeight = _a.destHeight;
                 if (actPoint.startX < x && actPoint.endY > y) {
                     width = x - actPoint.startX;
                     height = actPoint.endY - y;
@@ -1865,7 +2056,10 @@ var Selection = /** @class */ (function () {
             }
             else {
                 var _a = parent.img, destLeft = _a.destLeft, destTop = _a.destTop, destWidth = _a.destWidth, destHeight = _a.destHeight;
-                if (actPoint.endX > x && actPoint.endY > y) {
+                if (this.isCustomSelection()) {
+                    this.performSEResize(x, y, tempActiveObj, actPoint);
+                }
+                else if (actPoint.endX > x && actPoint.endY > y) {
                     width = actPoint.endX - x;
                     height = actPoint.endY - y;
                     scale = Math.min(width, height);
@@ -1897,7 +2091,7 @@ var Selection = /** @class */ (function () {
             }
         }
     };
-    Selection.prototype.updateSEPoints = function (x, y, maxDimension) {
+    Selection.prototype.updateSEPoints = function (x, y) {
         var parent = this.parent;
         var actPoint = parent.activeObj.activePoint;
         var width;
@@ -1915,8 +2109,9 @@ var Selection = /** @class */ (function () {
             if (parent.activeObj.shape !== undefined) {
                 splitWords = parent.activeObj.shape.split('-');
             }
-            if (parent.activeObj.shape === 'crop-custom' || (parent.activeObj.shape !== undefined && splitWords[0] !== 'crop')) {
-                if (parent.activeObj.shape === 'image') {
+            if (parent.activeObj.shape === 'crop-custom' || (parent.activeObj.shape !== undefined && splitWords[0] !== 'crop')
+                || this.isCustomSelection()) {
+                if (parent.activeObj.shape === 'image' || this.isCustomSelection()) {
                     this.resizeImg(x, y, 'se-resize', tempActiveObj);
                 }
                 else {
@@ -1934,6 +2129,7 @@ var Selection = /** @class */ (function () {
                     actPoint.startY = temp;
                     this.dragElement = parent.upperCanvas.style.cursor = parent.cursor = 'ne-resize';
                 }
+                this.revertCustomSelection(actPoint, tempActiveObj, 'se-resize');
                 this.revertResizing(tempActiveObj);
             }
             else {
@@ -1985,6 +2181,26 @@ var Selection = /** @class */ (function () {
         var scale;
         var newScale;
         if (this.previousPoint.x !== 0 && this.previousPoint.y !== 0) {
+            if (this.currentDrawingShape === 'text') {
+                this.setCursor(x, y);
+                if (parent.activeObj.textSettings.fontSize === 0) {
+                    parent.activeObj.textSettings.fontSize = 11;
+                    parent.notify('shape', { prop: 'updateFontRatio', onPropertyChange: false,
+                        value: { obj: parent.activeObj, isTextArea: null } });
+                    parent.activeObj.textSettings.text = parent.activeObj.keyHistory = 'Enter Text';
+                    parent.notify('shape', { prop: 'updateFontStyles', onPropertyChange: false,
+                        value: { isTextBox: null } });
+                    var width_2 = this.upperContext.measureText(parent.activeObj.textSettings.text).width +
+                        parent.activeObj.textSettings.fontSize * 0.5;
+                    actPoint.endX = actPoint.startX + width_2;
+                    actPoint.endY = actPoint.startY + parent.activeObj.textSettings.fontSize;
+                    actPoint.width = actPoint.endX - actPoint.startX;
+                    actPoint.height = actPoint.endY - actPoint.startY;
+                    tempActiveObj = extend({}, parent.activeObj, null, true);
+                    parent.notify('draw', { prop: 'updateActiveObject', onPropertyChange: false, value: { actPoint: parent.activeObj.activePoint, obj: parent.activeObj,
+                            isMouseMove: null, x: null, y: null } });
+                }
+            }
             switch (parent.upperCanvas.style.cursor) {
                 case 'se-resize':
                 case 's-resize':
@@ -2733,6 +2949,15 @@ var Selection = /** @class */ (function () {
         if (this.isCropSelection) {
             this.dragCanvas = parent.togglePan = true;
         }
+        if (parent.cursor === 'grabbing') {
+            var obj = { shapeSettingsObj: {} };
+            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 };
+            this.triggerShapeChange(shapeResizingArgs, shapeMovingArgs, 'mouse-down');
+        }
         var imageEditorClickEventArgs = { point: this.setXYPoints(e) };
         parent.trigger('click', imageEditorClickEventArgs);
         this.clickEvent(imageEditorClickEventArgs, e);
@@ -2769,7 +2994,13 @@ var Selection = /** @class */ (function () {
         else if (JSON.stringify(parent.frameObj) !== JSON.stringify(parent.tempFrameObj)) {
             parent.okBtn();
         }
-        else if (this.currentDrawingShape !== '') {
+        else if (this.currentDrawingShape !== '' && ((this.isTouch && !this.isShapeTouch(e, this.isCropSelection))
+            || parent.upperCanvas.style.cursor === 'crosshair' || parent.isShapeDrawing)) {
+            if (parent.drawingShape && !parent.isShapeDrawing) {
+                parent.okBtn();
+                parent.enableShapeDrawing(parent.toPascalCase(parent.drawingShape), true);
+            }
+            activePoint = parent.activeObj.activePoint;
             var object_1 = { currObj: {} };
             parent.notify('filter', { prop: 'getCurrentObj', onPropertyChange: false, value: { object: object_1 } });
             this.initialPrevObj = object_1['currObj'];
@@ -2781,6 +3012,7 @@ var Selection = /** @class */ (function () {
                 value: { obj: selPointCollObj } });
             this.initialPrevObj.selPointColl = extend([], selPointCollObj['selPointColl'], [], true);
             this.setActivePoint(x, y);
+            activePoint = parent.activeObj.activePoint;
             if (this.currentDrawingShape === 'path') {
                 var point = this.getImagePoints(x, y);
                 parent.activeObj.pointColl.push({ x: point.x, y: point.y });
@@ -2793,6 +3025,22 @@ var Selection = /** @class */ (function () {
             }
             activePoint.endX = activePoint.startX;
             activePoint.endY = activePoint.startY;
+            if (this.currentDrawingShape === 'text') {
+                parent.activeObj.textSettings.fontSize = 11;
+                this.previousPoint.x = activePoint.startX;
+                this.previousPoint.y = activePoint.startY;
+                parent.notify('shape', { prop: 'updateFontStyles', onPropertyChange: false,
+                    value: { isTextBox: null } });
+                var width = this.upperContext.measureText(parent.activeObj.textSettings.text).width + parent.activeObj.textSettings.fontSize * 0.5;
+                activePoint.endX = activePoint.startX + width;
+                activePoint.endY = activePoint.startY + parent.activeObj.textSettings.fontSize;
+                activePoint.width = activePoint.endX - activePoint.startX;
+                activePoint.height = activePoint.endY - activePoint.startY;
+            }
+            else if (this.currentDrawingShape === 'arrow') {
+                parent.activeObj.start = this.arrowShape[0];
+                parent.activeObj.end = this.arrowShape[1];
+            }
             parent.currObjType.isDragging = true;
             var previousShapeSettings = this.updatePrevShapeSettings();
             var shapeResizingArgs = { cancel: false, action: 'draw-start', previousShapeSettings: previousShapeSettings };
@@ -2800,6 +3048,8 @@ var Selection = /** @class */ (function () {
             this.shapeResizingArgs = shapeResizingArgs;
             this.shapeMovingArgs = shapeMovingArgs;
             this.triggerShapeChange(shapeResizingArgs, shapeMovingArgs, 'mouse-down');
+            parent.activeObj.activePoint = activePoint;
+            parent.isShapeDrawing = true;
             return;
         }
         parent.notify('draw', { prop: 'resetFrameZoom', onPropertyChange: false, value: { isOk: true } });
@@ -2932,7 +3182,7 @@ var Selection = /** @class */ (function () {
             }
             else {
                 if (this.isFhdEditing) {
-                    parent.notify('freehand-draw', { prop: 'cancelFhd', value: { type: 'ok' } });
+                    parent.apply();
                     var qbArea = document.getElementById(parent.element.id + '_quickAccessToolbarArea');
                     if (qbArea) {
                         qbArea.style.display = 'none';
@@ -2941,14 +3191,15 @@ var Selection = /** @class */ (function () {
                     var point = parent.pointColl[indexObj['freehandSelectedIndex']];
                     var shapeSettings = { id: 'pen_' + (indexObj['freehandSelectedIndex'] + 1), type: ShapeType.FreehandDraw,
                         startX: point.points[0].x, startY: point.points[0].y, strokeColor: point.strokeColor,
-                        strokeWidth: point.strokeWidth, points: point.points, opacity: point.opacity };
+                        strokeWidth: point.strokeWidth, points: point.points, opacity: point.opacity,
+                        index: point.order };
                     var shapeChangedArgs = { action: 'apply', currentShapeSettings: extend({}, shapeSettings, {}, true) };
                     parent.trigger('shapeChange', shapeChangedArgs);
                 }
                 var isPenDraw = parent.togglePen;
                 parent.notify('toolbar', { prop: 'close-contextual-toolbar', onPropertyChange: false });
                 if (isPenDraw) {
-                    parent.freehandDraw(true);
+                    parent.freeHandDraw(true);
                 }
                 this.isFhdEditing = false;
                 if (isLineArrow) {
@@ -2984,6 +3235,8 @@ var Selection = /** @class */ (function () {
                 }
                 if ((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' });
                     this.findTarget(x_1, y_1, e.type);
                     parent.notify('draw', { prop: 'redrawDownScale' });
                 }
@@ -3003,6 +3256,17 @@ var Selection = /** @class */ (function () {
         var cursor = parent.cursor;
         var canvasCursor = parent.upperCanvas.style.cursor;
         e.preventDefault();
+        if (this.isPreventShaping) {
+            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 };
+            this.triggerShapeChange(shapeResizingArgs, shapeMovingArgs, 'mouse-down');
+        }
         if (this.timer && this.timer > 0) {
             this.timer = 0;
         }
@@ -3128,6 +3392,18 @@ var Selection = /** @class */ (function () {
                 && !parent.element.querySelector('#' + id + '_headWrapper').parentElement.classList.contains('e-hide')))) {
             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 };
+            this.triggerShapeChange(shapeResizingArgs, shapeMovingArgs, 'mouse-up');
+        }
+        this.isGrabbing = false;
+        if (this.isPreventShaping) {
+            this.isPreventShaping = false;
+        }
         if (this.mouseDown === 'canvas' || this.isSliderActive ||
             /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
             e.target.closest('.e-image-editor') || e.target.closest('.e-ie-ddb-popup')) {
@@ -3154,6 +3430,9 @@ var Selection = /** @class */ (function () {
             var bbox = parent.lowerCanvas.getBoundingClientRect();
             x -= bbox.left;
             y -= bbox.top;
+            var activeObjShape = void 0;
+            var currentDrawingShape = this.currentDrawingShape;
+            var dummyClick = false;
             if (e.type === 'touchend') {
                 this.startTouches = this.tempTouches = [];
                 this.isFirstMove = false;
@@ -3182,15 +3461,16 @@ var Selection = /** @class */ (function () {
             if (splitWords !== undefined && splitWords[0] === 'crop') {
                 isCropSelection = true;
             }
-            if (this.currentDrawingShape === 'path') {
+            if (this.currentDrawingShape === 'path' && parent.isShapeDrawing) {
                 /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
                 var elem = e.srcElement;
                 var elemId = elem.parentElement.id;
                 var id_1 = parent.element.id;
+                // eslint-disable-next-line max-len
                 if (e.currentTarget !== parent.upperCanvas && e.currentTarget !== parent.lowerCanvas && parent.activeObj.pointColl.length > 0 &&
                     (elem.classList.contains('e-upload-icon') || elemId === id_1 + '_zoomIn' ||
                         elemId === id_1 + '_zoomOut' || elemId === id_1 + '_annotationBtn' ||
-                        elemId === id_1 + '_borderColorBtn' || elemId === id_1 + '_borderWidthBtn' || elemId === id_1 + '_saveBtn')) {
+                        elemId === id_1 + '_borderColorBtn' || elemId === id_1 + '_borderWidthBtn')) {
                     parent.notify('shape', { prop: 'stopPathDrawing', onPropertyChange: false, value: { e: e, isApply: true } });
                     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,
@@ -3214,8 +3494,12 @@ var Selection = /** @class */ (function () {
                     }
                     this.isShapeInserted = true;
                     this.currentDrawingShape = '';
-                    if (parent.activeObj.activePoint.width === 0 && parent.activeObj.activePoint.height === 0) {
-                        parent.notify('draw', { prop: 'performCancel', value: { isContextualToolbar: null } });
+                    if ((parent.activeObj.shape && parent.activeObj.shape === 'path' && parent.activeObj.pointColl.length === 0) ||
+                        ((!parent.activeObj.shape || parent.activeObj.shape !== 'path') && parent.activeObj.activePoint.width === 0 &&
+                            parent.activeObj.activePoint.height === 0)) {
+                        dummyClick = true;
+                        parent.notify('shape', { prop: 'refreshActiveObj', onPropertyChange: false });
+                        this.upperContext.clearRect(0, 0, parent.upperCanvas.width, parent.upperCanvas.height);
                     }
                     var previousShapeSettings = this.updatePrevShapeSettings();
                     var shapeResizingArgs = { cancel: false, action: 'draw-end', previousShapeSettings: previousShapeSettings };
@@ -3271,6 +3555,7 @@ var Selection = /** @class */ (function () {
                         isCropSelection_1 = true;
                     }
                     var shape = parent.activeObj.shape;
+                    activeObjShape = shape;
                     var shapeColl = ['rectangle', 'ellipse', 'line', 'arrow', 'path'];
                     if (shapeColl.indexOf(shape) > -1) {
                         parent.notify('toolbar', { prop: 'refresh-toolbar', onPropertyChange: false, value: { type: 'shapes',
@@ -3291,6 +3576,23 @@ var Selection = /** @class */ (function () {
                         parent.notify('toolbar', { prop: 'refresh-toolbar', onPropertyChange: false, value: eventargs });
                     }
                     parent.notify('toolbar', { prop: 'update-toolbar-items', onPropertyChange: false });
+                    if (!this.isFhdEditing) {
+                        if (parent.activeObj.shape && parent.activeObj.shape === 'text' &&
+                            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 (!isCropSelection_1) {
+                            if (parent.isShapeDrawing) {
+                                var temp = this.currentDrawingShape;
+                                parent.notify('undo-redo', { prop: 'updateUndoRedoStack', onPropertyChange: false });
+                                this.currentDrawingShape = temp;
+                            }
+                            else {
+                                parent.notify('undo-redo', { prop: 'updateUndoRedoStack', onPropertyChange: false });
+                            }
+                        }
+                    }
                 }
             }
             if (parent.activeObj.shape !== undefined) {
@@ -3312,9 +3614,16 @@ var Selection = /** @class */ (function () {
                 parent.notify('toolbar', { prop: 'update-toolbar-items', onPropertyChange: false });
                 parent.notify('toolbar', { prop: 'renderQAT', onPropertyChange: false, value: { isPenEdit: null } });
             }
-            if (parent.togglePen && e.currentTarget === parent.upperCanvas) {
+            var obj = { freehandDrawSelectedId: null };
+            parent.notify('freehand-draw', { prop: 'getFreehandDrawSelectedId', onPropertyChange: false, value: { obj: obj } });
+            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))) {
+                    parent.okBtn();
+                    parent.freeHandDraw(true);
+                }
             }
             else {
                 parent.currObjType.shape = '';
@@ -3324,6 +3633,17 @@ var Selection = /** @class */ (function () {
             this.isSliderActive = false;
             parent.currObjType.isInitialLine = parent.currObjType.isDragging = false;
             this.selMouseUpEvent();
+            if (isNullOrUndefined(parent.drawingShape) && activeObjShape && currentDrawingShape !== '') {
+                parent.drawingShape = activeObjShape;
+            }
+            if (parent.drawingShape) {
+                this.currentDrawingShape = parent.drawingShape.toLowerCase();
+                if (dummyClick) {
+                    parent.enableShapeDrawing(parent.toPascalCase(parent.drawingShape), true);
+                    parent.upperCanvas.style.cursor = 'crosshair';
+                }
+            }
+            parent.isShapeDrawing = false;
         }
     };
     Selection.prototype.adjustActObjForLineArrow = function (obj) {
@@ -3364,6 +3684,7 @@ var Selection = /** @class */ (function () {
             parent.notify('shape', { prop: 'setPointCollForShapeRotation', onPropertyChange: false, value: { obj: obj } });
             var _a = parent.img, destLeft_1 = _a.destLeft, destTop_1 = _a.destTop, destWidth_1 = _a.destWidth, destHeight_1 = _a.destHeight;
             var horTopLinePointColl = obj.horTopLinePointColl, horBottomLinePointColl = obj.horBottomLinePointColl, verLeftLinePointColl = obj.verLeftLinePointColl, verRightLinePointColl = obj.verRightLinePointColl;
+            // eslint-disable-next-line @typescript-eslint/tslint/config
             var setRatio = function (point) {
                 point.ratioX = (point.x - destLeft_1) / destWidth_1;
                 point.ratioY = (point.y - destTop_1) / destHeight_1;
@@ -3545,6 +3866,9 @@ var Selection = /** @class */ (function () {
     Selection.prototype.applyObj = function (x, y) {
         var parent = this.parent;
         var isApply = false;
+        if (parent.activeObj.activePoint.width === 0 && parent.activeObj.activePoint.height === 0) {
+            return false;
+        }
         var shapeColl = ['rectangle', 'ellipse', 'line', 'arrow', 'path', 'image', 'text'];
         var _a = parent.activeObj.activePoint, startX = _a.startX, startY = _a.startY, endX = _a.endX, endY = _a.endY;
         if (parent.activeObj.shape && shapeColl.indexOf(parent.activeObj.shape) > -1) {
@@ -3747,11 +4071,21 @@ var Selection = /** @class */ (function () {
                 break;
             case (e.ctrlKey && 'z'):
                 if (parent.allowUndoRedo) {
+                    parent.noPushUndo = false;
+                    if (parent.togglePen || parent.drawingShape) {
+                        parent.okBtn();
+                        parent.drawingShape = null;
+                    }
                     parent.notify('undo-redo', { prop: 'call-undo' });
                 }
                 break;
             case (e.ctrlKey && 'y'):
                 if (parent.allowUndoRedo) {
+                    parent.noPushUndo = false;
+                    if (parent.togglePen || parent.drawingShape) {
+                        parent.okBtn();
+                        parent.drawingShape = null;
+                    }
                     parent.notify('undo-redo', { prop: 'call-redo' });
                 }
                 break;
@@ -3791,7 +4125,7 @@ var Selection = /** @class */ (function () {
                 this.deleteItem();
                 break;
             case 'Escape':
-                parent.notify('draw', { prop: 'performCancel', value: { isContextualToolbar: null } });
+                parent.notify('draw', { prop: 'performCancel', value: { isContextualToolbar: null, isFinalCancel: true } });
                 break;
             case 'Enter':
                 this.performEnterAction(e);
@@ -3894,7 +4228,7 @@ var Selection = /** @class */ (function () {
         if (e.ctrlKey === true && isInsideCanvas) {
             e.preventDefault();
             if (!parent.isCropTab && (parent.activeObj.shape && parent.activeObj.shape.split('-')[0] !== 'crop')) {
-                parent.okBtn();
+                parent.okBtn(null, true);
                 parent.notify('toolbar', { prop: 'close-contextual-toolbar', onPropertyChange: false });
             }
             var type = '';
@@ -4098,7 +4432,7 @@ var Selection = /** @class */ (function () {
         var parent = this.parent;
         var isShape = false;
         if (parent.objColl.length !== 0 && !parent.currObjType.isCustomCrop && !isCrop) {
-            var diffX = 0;
+            var prevIndex = 0;
             var i = void 0;
             for (var index = 0; index < parent.objColl.length; index++) {
                 var cursor = parent.upperCanvas.style.cursor;
@@ -4119,8 +4453,8 @@ var Selection = /** @class */ (function () {
                             else {
                                 if (this.isTouch || parent.cursor === 'move' ||
                                     parent.cursor === 'grab' || this.isShapeInserted) {
-                                    if (diffX === 0 || diffX > x - actObj.activePoint.startX) {
-                                        diffX = x - parent.objColl[index].activePoint.startX;
+                                    if (prevIndex === 0 || prevIndex < actObj.order) {
+                                        prevIndex = actObj.order;
                                         i = index;
                                     }
                                 }
@@ -4142,8 +4476,8 @@ var Selection = /** @class */ (function () {
                         }
                         else {
                             if (this.isTouch || parent.cursor === 'move' || parent.cursor === 'grab' || this.isShapeInserted) {
-                                if (diffX === 0 || diffX > x - actObj.activePoint.startX) {
-                                    diffX = x - parent.objColl[index].activePoint.startX;
+                                if (prevIndex === 0 || prevIndex < actObj.order) {
+                                    prevIndex = actObj.order;
                                     i = index;
                                 }
                             }
@@ -4163,8 +4497,8 @@ var Selection = /** @class */ (function () {
                         }
                         else {
                             if (this.isTouch || parent.cursor === 'move' || parent.cursor === 'grab' || this.isShapeInserted) {
-                                if (diffX === 0 || diffX > x - actObj.activePoint.startX) {
-                                    diffX = x - parent.objColl[index].activePoint.startX;
+                                if (prevIndex === 0 || prevIndex < actObj.order) {
+                                    prevIndex = actObj.order;
                                     i = index;
                                 }
                             }
@@ -4193,8 +4527,8 @@ var Selection = /** @class */ (function () {
                         else {
                             if (this.isTouch || cursor === 'move' || cursor === 'grabbing' || this.isShapeInserted
                                 || parent.cursor === 'move' || parent.cursor === 'grabbing') {
-                                if (diffX === 0 || diffX > x - actObj.activePoint.startX) {
-                                    diffX = x - parent.objColl[index].activePoint.startX;
+                                if (prevIndex === 0 || prevIndex < actObj.order) {
+                                    prevIndex = actObj.order;
                                     i = index;
                                 }
                             }
@@ -4220,10 +4554,9 @@ var Selection = /** @class */ (function () {
                     this.lowerContext.clearRect(0, 0, parent.lowerCanvas.width, parent.lowerCanvas.height);
                     parent.notify('draw', { prop: 'drawImage', onPropertyChange: false });
                     this.lowerContext.filter = 'none';
-                    parent.notify('shape', { prop: 'iterateObjColl', onPropertyChange: false });
+                    parent.notify('shape', { prop: 'drawAnnotations', onPropertyChange: false,
+                        value: { ctx: this.lowerContext, shape: 'iterate', pen: 'iterate', isPreventApply: null } });
                     parent.activeObj = extend({}, temp_1, {}, true);
-                    parent.notify('freehand-draw', { prop: 'freehandRedraw', onPropertyChange: false,
-                        value: { context: this.lowerContext, points: null } });
                     this.lowerContext.filter = temp_1;
                     this.getCurrentFlipState();
                 }
@@ -4237,8 +4570,8 @@ var Selection = /** @class */ (function () {
                     parent.img.destTop = destPoints.startY;
                     parent.img.destWidth = destPoints.width;
                     parent.img.destHeight = destPoints.height;
-                    parent.notify('freehand-draw', { prop: 'freehandRedraw', onPropertyChange: false,
-                        value: { context: this.lowerContext, points: null } });
+                    parent.notify('shape', { prop: 'drawAnnotations', onPropertyChange: false,
+                        value: { ctx: this.lowerContext, shape: 'iterate', pen: 'iterate', isPreventApply: null } });
                 }
                 parent.notify('draw', { prop: 'clearOuterCanvas', onPropertyChange: false, value: { context: this.lowerContext } });
                 if ((parent.currSelectionPoint && parent.currSelectionPoint.shape === 'crop-circle') || parent.isCircleCrop) {
@@ -4388,6 +4721,10 @@ var Selection = /** @class */ (function () {
                 break;
             }
         }
+        if ((obj.shape === 'path' && obj.pointColl.length === 0) ||
+            (obj.shape !== 'path' && (obj.activePoint.width === 0 && obj.activePoint.height === 0))) {
+            return;
+        }
         this.upperContext.clearRect(0, 0, parent.upperCanvas.width, parent.upperCanvas.height);
         if (this.isPreventDragging) {
             if (parent.activeObj.activePoint.startX > parent.img.destLeft) {
@@ -4499,7 +4836,8 @@ var Selection = /** @class */ (function () {
                         parent.notify('shape', { prop: 'refreshActiveObj', onPropertyChange: false });
                     }
                 }
-                parent.notify('freehand-draw', { prop: 'zoomFHDColl', onPropertyChange: false, value: { isPreventApply: null } });
+                parent.notify('shape', { prop: 'drawAnnotations', onPropertyChange: false,
+                    value: { ctx: this.lowerContext, shape: 'zoom', pen: 'zoom', isPreventApply: null } });
                 this.lowerContext.filter = tempFilter;
                 if (parent.activeObj.shape) {
                     parent.notify('shape', { prop: 'apply', onPropertyChange: false,
@@ -4604,7 +4942,7 @@ var Selection = /** @class */ (function () {
             }
             if (obj['prevActObj'] && JSON.stringify(obj['prevActObj']) !== JSON.stringify(parent.activeObj)) {
                 var index = parent.activeObj.currIndex;
-                parent.notify('draw', { prop: 'performCancel', value: { isContextualToolbar: null } });
+                parent.notify('draw', { prop: 'performCancel', value: { isContextualToolbar: null, isFinalCancel: true } });
                 for (var i = 0, len = parent.objColl.length; i < len; i++) {
                     if (parent.objColl[i].currIndex === index) {
                         parent.objColl.splice(i, 1);
@@ -4641,6 +4979,7 @@ var Selection = /** @class */ (function () {
                 parent.clearSelection();
                 parent.trigger('shapeChanging', 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)) {
                     parent.notify('undo-redo', { prop: 'updateUndoRedoColl', onPropertyChange: false,
                         value: { operation: 'deleteObj', previousObj: prevObj, previousObjColl: this.tempObjColl,
@@ -4651,6 +4990,11 @@ var Selection = /** @class */ (function () {
                 }
             }
             parent.notify('draw', { prop: 'setPrevActObj', onPropertyChange: false, value: { prevActObj: null } });
+            if (parent.drawingShape) {
+                this.currentDrawingShape = parent.drawingShape.toLowerCase();
+                parent.enableShapeDrawing(parent.toPascalCase(parent.drawingShape), true);
+                parent.upperCanvas.style.cursor = 'crosshair';
+            }
         }
         if (document.getElementById(parent.element.id + '_quickAccessToolbarArea')) {
             document.getElementById(parent.element.id + '_quickAccessToolbarArea').style.display = 'none';
@@ -4711,7 +5055,8 @@ var Selection = /** @class */ (function () {
             endY: shape === 'line' || shape === 'arrow' ? endY : null,
             arrowHead: shape === 'arrow' ? this.getArrowType(parent.activeObj.start) : null,
             arrowTail: shape === 'arrow' ? this.getArrowType(parent.activeObj.end) : null,
-            points: shape === 'path' ? parent.activeObj.pointColl : null
+            points: shape === 'path' ? parent.activeObj.pointColl : null,
+            index: parent.activeObj.order
         };
         if (obj) {
             obj['shapeSettingsObj'] = shapeSettingsObj;