@syncfusion/ej2-image-editor 23.2.7 → 24.1.43

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

@@ -13,6 +13,8 @@ var FreehandDrawing = /** @class */ (function () {
         this.selPoints = [];
         this.dummyPoints = [];
         this.tempFHDStyles = { strokeColor: null, fillColor: null, strokeWidth: null };
+        this.straightenPoint = { x: null, y: null, ratioX: null, ratioY: null };
+        this.straightenPointAngle = 0;
         this.parent = parent;
         this.addEventListener();
     }
@@ -85,7 +87,12 @@ var FreehandDrawing = /** @class */ (function () {
                 this.panFHDColl(args.value['xDiff'], args.value['yDiff'], args.value['panRegion']);
                 break;
             case 'updateFHDColl':
-                this.updateFHDColl();
+                if (args.value && args.value['isPreventApply']) {
+                    this.updateFHDColl(args.value['isPreventApply']);
+                }
+                else {
+                    this.updateFHDColl();
+                }
                 break;
             case 'zoomFHDColl':
                 this.zoomFHDColl(args.value['isPreventApply']);
@@ -147,6 +154,28 @@ var FreehandDrawing = /** @class */ (function () {
             case 'getFreehandSelectedIndex':
                 args.value['obj']['freehandSelectedIndex'] = this.fhdSelIdx;
                 break;
+            case 'setCenterSelPoints':
+                this.setCenterSelPoints();
+                break;
+            case 'getStraightenPoint':
+                args.value['obj']['straightenPoint'] = extend({}, this.straightenPoint, {}, true);
+                break;
+            case 'setStraightenPoint':
+                this.straightenPoint.x = args.value['x'];
+                this.straightenPoint.y = args.value['y'];
+                if (args.value['ratioX'] && args.value['ratioY']) {
+                    this.straightenPoint.ratioX = args.value['ratioX'];
+                    this.straightenPoint.ratioY = args.value['ratioY'];
+                }
+                break;
+            case 'resetStraightenPoint':
+                this.straightenPoint = { x: null, y: null, ratioX: null, ratioY: null };
+                this.prevStraightenObj = null;
+                this.straightenPointAngle = 0;
+                break;
+            case 'getStraightenPointAngle':
+                args.value['obj']['angle'] = this.straightenPointAngle;
+                break;
             case 'reset':
                 this.reset();
                 break;
@@ -168,6 +197,7 @@ var FreehandDrawing = /** @class */ (function () {
         this.dummyPoints = [];
         this.freehandDownPoint = { x: 0, y: 0 };
         this.selPointColl = {};
+        this.straightenPointAngle = 0;
         this.fhdHovIdx = null;
         this.pointCounter = 0;
         this.fhdSelID = null;
@@ -175,16 +205,14 @@ var FreehandDrawing = /** @class */ (function () {
         this.currFHDIdx = 0;
         this.fhdSelIdx = null;
         this.tempFHDStyles = { strokeColor: null, fillColor: null, strokeWidth: null };
+        this.straightenPoint = { x: null, y: null, ratioX: null, ratioY: null };
+        this.prevStraightenObj = null;
     };
     FreehandDrawing.prototype.getModuleName = function () {
         return 'freehand-draw';
     };
     FreehandDrawing.prototype.hoverFhd = function (fillStyle, strokeWidth) {
         var parent = this.parent;
-        parent.lowerCanvas = document.querySelector('#' + parent.element.id + '_lowerCanvas');
-        this.lowerContext = parent.lowerCanvas.getContext('2d');
-        parent.upperCanvas = document.querySelector('#' + parent.element.id + '_upperCanvas');
-        this.upperContext = parent.upperCanvas.getContext('2d');
         var context = this.upperContext;
         var idx = -1;
         if (this.fhdHovIdx > -1) {
@@ -237,10 +265,11 @@ var FreehandDrawing = /** @class */ (function () {
         context.lineWidth = tempLineWidth;
     };
     FreehandDrawing.prototype.freehandDownHandler = function (e, canvas) {
-        this.parent.lowerCanvas = document.querySelector('#' + this.parent.element.id + '_lowerCanvas');
-        this.lowerContext = this.parent.lowerCanvas.getContext('2d');
-        this.parent.upperCanvas = document.querySelector('#' + this.parent.element.id + '_upperCanvas');
-        this.upperContext = this.parent.upperCanvas.getContext('2d');
+        var parent = this.parent;
+        parent.lowerCanvas = document.querySelector('#' + parent.element.id + '_lowerCanvas');
+        this.lowerContext = parent.lowerCanvas.getContext('2d');
+        parent.upperCanvas = document.querySelector('#' + parent.element.id + '_upperCanvas');
+        this.upperContext = parent.upperCanvas.getContext('2d');
         this.fhdObj.time = new Date().getTime();
         this.isFreehandDrawing = true;
         if (e.type === 'mousedown') {
@@ -253,9 +282,8 @@ var FreehandDrawing = /** @class */ (function () {
         EventHandler.add(canvas, 'mousemove touchmove', this.freehandMoveHandler, this);
         var shapeSettings = { id: 'pen_' + (this.currFHDIdx + 1), type: ShapeType.FreehandDraw,
             startX: this.freehandDownPoint.x, startY: this.freehandDownPoint.y,
-            strokeColor: this.parent.activeObj.strokeSettings.strokeColor, strokeWidth: this.penStrokeWidth,
-            points: null };
-        var shapeChangingArgs = { action: 'draw-start', previousShapeSettings: shapeSettings,
+            strokeColor: parent.activeObj.strokeSettings.strokeColor, strokeWidth: this.penStrokeWidth, points: null };
+        var shapeChangingArgs = { cancel: false, action: 'draw-start', previousShapeSettings: shapeSettings,
             currentShapeSettings: shapeSettings };
         this.triggerShapeChanging(shapeChangingArgs);
     };
@@ -285,20 +313,14 @@ var FreehandDrawing = /** @class */ (function () {
         prevObj.pointColl = extend([], parent.pointColl, [], true);
         prevObj.afterCropActions = extend([], parent.afterCropActions, [], true);
         var selPointCollObj = { selPointColl: null };
-        parent.notify('freehand-draw', { prop: 'getSelPointColl', onPropertyChange: false,
-            value: { obj: selPointCollObj } });
+        parent.notify('freehand-draw', { prop: 'getSelPointColl', onPropertyChange: false, value: { obj: selPointCollObj } });
         prevObj.selPointColl = extend([], selPointCollObj['selPointColl'], [], true);
         var fhCnt = parent.freehandCounter;
-        parent.pointColl[fhCnt] = {};
-        parent.pointColl[fhCnt].points = extend([], parent.points);
-        parent.pointColl[fhCnt].strokeColor = parent.activeObj.strokeSettings.strokeColor;
-        parent.pointColl[fhCnt].strokeWidth = this.penStrokeWidth;
-        parent.pointColl[fhCnt].flipState = parent.transform.currFlipState;
-        parent.pointColl[fhCnt].id = 'pen_' + (this.currFHDIdx + 1);
+        parent.pointColl[fhCnt] = { points: extend([], parent.points), strokeColor: parent.activeObj.strokeSettings.strokeColor,
+            strokeWidth: this.penStrokeWidth, flipState: parent.transform.currFlipState, id: 'pen_' + (this.currFHDIdx + 1) };
         parent.points = [];
         this.dummyPoints = [];
-        this.selPointColl[fhCnt] = {};
-        this.selPointColl[fhCnt].points = extend([], this.selPoints);
+        this.selPointColl[fhCnt] = { points: extend([], this.selPoints) };
         this.selPoints = [];
         this.pointCounter = 0;
         parent.freehandCounter++;
@@ -310,9 +332,9 @@ var FreehandDrawing = /** @class */ (function () {
                 currentText: null, previousFilter: null, isCircleCrop: null } });
         var shapeSettings = { id: 'pen_' + (this.currFHDIdx + 1), type: ShapeType.FreehandDraw,
             startX: this.freehandDownPoint.x, startY: this.freehandDownPoint.y,
-            strokeColor: this.parent.activeObj.strokeSettings.strokeColor, strokeWidth: this.penStrokeWidth,
-            points: this.parent.pointColl[this.currFHDIdx].points };
-        var shapeChangingArgs = { action: 'draw-end', previousShapeSettings: shapeSettings,
+            strokeColor: parent.activeObj.strokeSettings.strokeColor, strokeWidth: this.penStrokeWidth,
+            points: parent.pointColl[this.currFHDIdx].points };
+        var shapeChangingArgs = { cancel: false, action: 'draw-end', previousShapeSettings: shapeSettings,
             currentShapeSettings: shapeSettings };
         this.triggerShapeChanging(shapeChangingArgs);
         this.currFHDIdx++;
@@ -345,8 +367,7 @@ var FreehandDrawing = /** @class */ (function () {
         var startPoint;
         var endPoint;
         this.selPoints.push({ x: x, y: y, ratioX: (x - parent.img.destLeft) / parent.img.destWidth,
-            ratioY: (y - parent.img.destTop) / parent.img.destHeight,
-            time: this.fhdObj.time });
+            ratioY: (y - parent.img.destTop) / parent.img.destHeight, time: this.fhdObj.time });
         if (!lastPoint || !(lastPoint && isLastPointTooClose) || mouseDown) {
             this.fhdObj.time = new Date().getTime();
             parent.points.push({ x: x, y: y, ratioX: (x - parent.img.destLeft) / parent.img.destWidth,
@@ -500,8 +521,9 @@ var FreehandDrawing = /** @class */ (function () {
             cp2 * (1.0 - t) * t * t + endPoint * t * t * t;
     };
     FreehandDrawing.prototype.drawArc = function (x, y, size, context) {
-        if ((x > this.parent.img.destLeft && y > this.parent.img.destTop && x < (this.parent.img.destLeft + this.parent.img.destWidth) &&
-            y < (this.parent.img.destTop + this.parent.img.destHeight) ||
+        var img = this.parent.img;
+        if ((x > img.destLeft && y > img.destTop && x < (img.destLeft + img.destWidth) &&
+            y < (img.destTop + img.destHeight) ||
             (context !== this.lowerContext && context !== this.upperContext))) {
             context.moveTo(x, y);
             context.arc(x, y, size, 0, 2 * Math.PI, false);
@@ -509,18 +531,11 @@ var FreehandDrawing = /** @class */ (function () {
     };
     FreehandDrawing.prototype.freehandRedraw = function (context, points) {
         var parent = this.parent;
-        parent.lowerCanvas = document.querySelector('#' + parent.element.id + '_lowerCanvas');
-        this.lowerContext = parent.lowerCanvas.getContext('2d');
-        parent.upperCanvas = document.querySelector('#' + parent.element.id + '_upperCanvas');
-        this.upperContext = parent.upperCanvas.getContext('2d');
         var temp = context.filter;
         context.filter = 'none';
         if (points) {
-            parent.pointColl[parent.freehandCounter] = {};
-            parent.pointColl[parent.freehandCounter].points = points;
-            parent.pointColl[parent.freehandCounter].strokeColor = parent.activeObj.strokeSettings.strokeColor;
-            parent.pointColl[parent.freehandCounter].strokeWidth = this.penStrokeWidth;
-            parent.pointColl[parent.freehandCounter].flipState = parent.transform.currFlipState;
+            parent.pointColl[parent.freehandCounter] = { points: points, strokeColor: parent.activeObj.strokeSettings.strokeColor,
+                strokeWidth: this.penStrokeWidth, flipState: parent.transform.currFlipState };
             parent.freehandCounter++;
         }
         if (parent.freehandCounter > 0) {
@@ -558,7 +573,7 @@ var FreehandDrawing = /** @class */ (function () {
                 }
                 context.closePath();
             }
-            if (context !== this.upperContext) {
+            if (context === this.lowerContext) {
                 parent.notify('draw', { prop: 'applyFrame', value: { ctx: this.lowerContext, frame: parent.frameObj.type, preventImg: true } });
                 this.upperContext.clearRect(0, 0, parent.upperCanvas.width, parent.upperCanvas.height);
             }
@@ -629,21 +644,25 @@ var FreehandDrawing = /** @class */ (function () {
     };
     FreehandDrawing.prototype.cancelFhd = function () {
         var parent = this.parent;
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        var selectedPoint = parent.pointColl[this.fhdSelIdx];
         if (!isBlazor()) {
             parent.notify('toolbar', { prop: 'setSelectedFreehandColor', value: { color: '#42a5f5' } });
         }
         this.upperContext.clearRect(0, 0, parent.upperCanvas.width, parent.upperCanvas.height);
+        this.lowerContext.clearRect(0, 0, parent.upperCanvas.width, parent.upperCanvas.height);
         this.pointCounter = 0;
-        if (parent.pointColl[this.fhdSelIdx]) {
-            parent.pointColl[this.fhdSelIdx].strokeColor = this.tempFHDStyles.strokeColor;
-            parent.pointColl[this.fhdSelIdx].strokeWidth = this.tempFHDStyles.strokeWidth;
-            parent.pointColl[this.fhdSelIdx].isSelected = false;
+        if (selectedPoint) {
+            selectedPoint.strokeColor = this.tempFHDStyles.strokeColor;
+            selectedPoint.strokeWidth = this.tempFHDStyles.strokeWidth;
+            selectedPoint.isSelected = false;
         }
         this.fhdHovIdx = this.fhdSelIdx = this.fhdSelID = null;
         parent.notify('selection', { prop: 'resetFreehandDrawVariables' });
         parent.activeObj.strokeSettings.strokeColor = this.tempFHDStyles.strokeColor;
         parent.activeObj.strokeSettings.strokeWidth = this.penStrokeWidth = this.tempFHDStyles.strokeWidth;
         this.tempFHDStyles = { strokeColor: null, strokeWidth: null, fillColor: null };
+        parent.notify('draw', { prop: 'render-image', value: { isMouseWheel: null } });
         if (!isBlazor()) {
             parent.notify('toolbar', { prop: 'refresh-main-toolbar', onPropertyChange: false });
         }
@@ -665,11 +684,12 @@ var FreehandDrawing = /** @class */ (function () {
             }
         }
         this.fhdSelIdx = this.fhdHovIdx;
-        parent.pointColl[this.fhdSelIdx].isSelected = true;
-        this.fhdSelID = parent.pointColl[this.fhdSelIdx].id;
-        if (parent.pointColl[this.fhdHovIdx].strokeColor !== '#42a5f5') {
-            parent.activeObj.strokeSettings.strokeColor = this.tempFHDStyles.strokeColor =
-                parent.pointColl[this.fhdHovIdx].strokeColor;
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        var point = parent.pointColl[this.fhdSelIdx];
+        point.isSelected = true;
+        this.fhdSelID = point.id;
+        if (point.strokeColor !== '#42a5f5') {
+            parent.activeObj.strokeSettings.strokeColor = this.tempFHDStyles.strokeColor = point.strokeColor;
         }
         parent.activeObj.strokeSettings.strokeWidth = this.tempFHDStyles.strokeWidth =
             parent.pointColl[this.fhdHovIdx].strokeWidth;
@@ -677,22 +697,25 @@ var FreehandDrawing = /** @class */ (function () {
         parent.notify('selection', { prop: 'getFreehandDrawEditing', onPropertyChange: false, value: { obj: obj } });
         if (obj['bool']) {
             var shapeSettings = { id: 'pen_' + (this.fhdSelIdx + 1), type: ShapeType.FreehandDraw,
-                startX: parent.pointColl[this.fhdSelIdx].points[0].x, startY: parent.pointColl[this.fhdSelIdx].points[0].y,
-                strokeColor: parent.pointColl[this.fhdSelIdx].strokeColor, strokeWidth: parent.pointColl[this.fhdSelIdx].strokeWidth,
-                points: parent.pointColl[this.fhdSelIdx].points };
-            var shapeChangingArgs = { action: 'select', previousShapeSettings: shapeSettings,
+                startX: point.points[0].x, startY: point.points[0].y, strokeColor: point.strokeColor,
+                strokeWidth: point.strokeWidth, points: point.points, opacity: point.opacity };
+            var shapeChangingArgs = { cancel: false, action: 'select', previousShapeSettings: shapeSettings,
                 currentShapeSettings: shapeSettings };
             this.triggerShapeChanging(shapeChangingArgs);
         }
         else {
             parent.okBtn();
         }
+        if (isBlazor()) {
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            parent.getShapeValue('pen');
+        }
     };
     FreehandDrawing.prototype.deleteFhd = function (index, isId) {
         var parent = this.parent;
         if (this.isFHDIdx(index)) {
             this.upperContext.clearRect(0, 0, parent.upperCanvas.width, parent.upperCanvas.height);
-            // eslint-disable-next-line
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
             var tempPointColl = extend({}, parent.pointColl, {}, true);
             // eslint-disable-next-line @typescript-eslint/no-explicit-any
             var tempSelPointColl = extend({}, this.selPointColl, {}, true);
@@ -734,18 +757,31 @@ var FreehandDrawing = /** @class */ (function () {
     };
     FreehandDrawing.prototype.zoomFHDColl = function (isPreventApply) {
         var parent = this.parent;
-        // Updating point collection for zoom
+        var destPoints = { startX: parent.img.destLeft, startY: parent.img.destTop,
+            width: parent.img.destWidth, height: parent.img.destHeight };
+        parent.notify('shape', { prop: 'straightenShapes', onPropertyChange: false });
         for (var n = 0; n < parent.freehandCounter; n++) {
             parent.points = extend([], parent.pointColl[n].points, []);
             this.pointCounter = 0;
             var len = parent.points.length;
             for (var l = 0; l < len; l++) {
-                parent.points[l].x = this.zoomX(parent.points[l].ratioX);
-                parent.points[l].y = this.zoomY(parent.points[l].ratioY);
+                var point = parent.points[l];
+                point.x = this.zoomX(point.ratioX);
+                point.y = this.zoomY(point.ratioY);
             }
         }
-        // Updating each points for cursor styles for zoom
         this.updateFHDCurPts();
+        if (this.straightenPoint.x && this.straightenPoint.y) {
+            this.straightenPoint.x = this.zoomX(this.straightenPoint.ratioX);
+            this.straightenPoint.y = this.zoomY(this.straightenPoint.ratioY);
+        }
+        if (parent.transform.straighten !== 0) {
+            parent.notify('shape', { prop: 'straightenFHD', onPropertyChange: false });
+        }
+        parent.img.destLeft = destPoints.startX;
+        parent.img.destTop = destPoints.startY;
+        parent.img.destWidth = destPoints.width;
+        parent.img.destHeight = destPoints.height;
         if (isNullOrUndefined(isPreventApply)) {
             this.freehandRedraw(this.lowerContext, null);
         }
@@ -758,39 +794,39 @@ var FreehandDrawing = /** @class */ (function () {
                 this.pointCounter = 0;
                 var len = this.selPoints.length;
                 for (var l = 0; l < len; l++) {
-                    this.selPoints[l].x = this.zoomX(this.selPoints[l].ratioX);
-                    this.selPoints[l].y = this.zoomY(this.selPoints[l].ratioY);
+                    var point = this.selPoints[l];
+                    point.x = this.zoomX(point.ratioX);
+                    point.y = this.zoomY(point.ratioY);
                 }
             }
         }
     };
     FreehandDrawing.prototype.rotateFhdColl = function () {
         var parent = this.parent;
-        // Update rotation points for point collection
+        var _a = parent.img, destLeft = _a.destLeft, destTop = _a.destTop, destWidth = _a.destWidth, destHeight = _a.destHeight;
         for (var n = 0; n < parent.freehandCounter; n++) {
             parent.points = extend([], parent.pointColl[n].points, []);
             this.pointCounter = 0;
             var len = parent.points.length;
             for (var l = 0; l < len; l++) {
-                parent.points[l].y = parent.img.destTop + (parent.img.destHeight * parent.points[l].ratioX);
-                parent.points[l].x = (parent.img.destLeft + parent.img.destWidth) - (parent.img.destWidth *
-                    parent.points[l].ratioY);
-                parent.points[l].ratioX = (parent.points[l].x - parent.img.destLeft) / parent.img.destWidth;
-                parent.points[l].ratioY = (parent.points[l].y - parent.img.destTop) / parent.img.destHeight;
+                var point = parent.points[l];
+                point.y = destTop + (destHeight * point.ratioX);
+                point.x = (destLeft + destWidth) - (destWidth * point.ratioY);
+                point.ratioX = (point.x - destLeft) / destWidth;
+                point.ratioY = (point.y - destTop) / destHeight;
             }
         }
-        // Update rotation points for each point for cursor styles
         for (var n = 0; n < parent.freehandCounter; n++) {
             if (this.selPointColl[n]) {
                 this.selPoints = extend([], this.selPointColl[n].points, []);
                 this.pointCounter = 0;
                 var len = this.selPoints.length;
                 for (var l = 0; l < len; l++) {
-                    this.selPoints[l].y = parent.img.destTop + (parent.img.destHeight * this.selPoints[l].ratioX);
-                    this.selPoints[l].x = (parent.img.destLeft + parent.img.destWidth) - (parent.img.destWidth *
-                        this.selPoints[l].ratioY);
-                    this.selPoints[l].ratioX = (this.selPoints[l].x - parent.img.destLeft) / parent.img.destWidth;
-                    this.selPoints[l].ratioY = (this.selPoints[l].y - parent.img.destTop) / parent.img.destHeight;
+                    var point = this.selPoints[l];
+                    point.y = destTop + (destHeight * point.ratioX);
+                    point.x = (destLeft + destWidth) - (destWidth * point.ratioY);
+                    point.ratioX = (point.x - destLeft) / destWidth;
+                    point.ratioY = (point.y - destTop) / destHeight;
                 }
             }
         }
@@ -814,28 +850,26 @@ var FreehandDrawing = /** @class */ (function () {
     };
     FreehandDrawing.prototype.pointsHorizontalFlip = function () {
         var parent = this.parent;
-        // Update flip value for point collection
+        var _a = parent.img, destLeft = _a.destLeft, destTop = _a.destTop, destWidth = _a.destWidth, destHeight = _a.destHeight;
         for (var n = 0; n < parent.freehandCounter; n++) {
             if (parent.pointColl[n].shapeFlip !== parent.transform.currFlipState) {
                 parent.points = extend([], parent.pointColl[n].points, []);
                 this.pointCounter = 0;
                 var len = parent.points.length;
                 for (var l = 0; l < len; l++) {
-                    if (parent.points[l].x <= parent.img.destLeft + (parent.img.destWidth / 2)) {
-                        parent.points[l].x = (parent.img.destLeft + parent.img.destWidth) - (parent.points[l].x
-                            - parent.img.destLeft);
+                    var point = parent.points[l];
+                    if (point.x <= destLeft + (destWidth / 2)) {
+                        point.x = (destLeft + destWidth) - (point.x - destLeft);
                     }
-                    else if (parent.points[l].x >= parent.img.destLeft + (parent.img.destWidth / 2)) {
-                        parent.points[l].x = parent.img.destLeft + (parent.img.destLeft + parent.img.destWidth -
-                            parent.points[l].x);
+                    else if (point.x >= destLeft + (destWidth / 2)) {
+                        point.x = destLeft + (destLeft + destWidth - point.x);
                     }
-                    parent.points[l].ratioX = (parent.points[l].x - parent.img.destLeft) / parent.img.destWidth;
-                    parent.points[l].ratioY = (parent.points[l].y - parent.img.destTop) / parent.img.destHeight;
+                    point.ratioX = (point.x - destLeft) / destWidth;
+                    point.ratioY = (point.y - destTop) / destHeight;
                 }
                 parent.pointColl[n].shapeFlip = parent.transform.currFlipState;
             }
         }
-        // Update flip value for each points for cursor styles
         for (var n = 0; n < parent.freehandCounter; n++) {
             if (this.selPointColl[n]) {
                 if (this.selPointColl[n].shapeFlip !== parent.transform.currFlipState) {
@@ -843,16 +877,15 @@ var FreehandDrawing = /** @class */ (function () {
                     this.pointCounter = 0;
                     var len = this.selPoints.length;
                     for (var l = 0; l < len; l++) {
-                        if (this.selPoints[l].x <= parent.img.destLeft + (parent.img.destWidth / 2)) {
-                            this.selPoints[l].x = (parent.img.destLeft + parent.img.destWidth) - (this.selPoints[l].x -
-                                parent.img.destLeft);
+                        var point = this.selPoints[l];
+                        if (point.x <= destLeft + (destWidth / 2)) {
+                            point.x = (destLeft + destWidth) - (point.x - destLeft);
                         }
-                        else if (this.selPoints[l].x >= parent.img.destLeft + (parent.img.destWidth / 2)) {
-                            this.selPoints[l].x = parent.img.destLeft + (parent.img.destLeft + parent.img.destWidth -
-                                this.selPoints[l].x);
+                        else if (point.x >= destLeft + (destWidth / 2)) {
+                            point.x = destLeft + (destLeft + destWidth - point.x);
                         }
-                        this.selPoints[l].ratioX = (this.selPoints[l].x - parent.img.destLeft) / parent.img.destWidth;
-                        this.selPoints[l].ratioY = (this.selPoints[l].y - parent.img.destTop) / parent.img.destHeight;
+                        point.ratioX = (point.x - destLeft) / destWidth;
+                        point.ratioY = (point.y - destTop) / destHeight;
                     }
                 }
             }
@@ -861,28 +894,26 @@ var FreehandDrawing = /** @class */ (function () {
     };
     FreehandDrawing.prototype.pointsVerticalFlip = function () {
         var parent = this.parent;
-        // Update flip value for point collection
+        var _a = parent.img, destLeft = _a.destLeft, destTop = _a.destTop, destWidth = _a.destWidth, destHeight = _a.destHeight;
         for (var n = 0; n < parent.freehandCounter; n++) {
             if (parent.pointColl[n].shapeFlip !== parent.transform.currFlipState) {
                 parent.points = extend([], parent.pointColl[n].points, []);
                 this.pointCounter = 0;
                 var len = parent.points.length;
                 for (var l = 0; l < len; l++) {
-                    if (parent.points[l].y <= parent.img.destTop + (parent.img.destHeight / 2)) {
-                        parent.points[l].y = (parent.img.destTop + parent.img.destHeight) -
-                            (parent.points[l].y - parent.img.destTop);
+                    var point = parent.points[l];
+                    if (point.y <= destTop + (destHeight / 2)) {
+                        point.y = (destTop + destHeight) - (point.y - destTop);
                     }
-                    else if (parent.points[l].y >= parent.img.destTop + (parent.img.destHeight / 2)) {
-                        parent.points[l].y = parent.img.destTop + (parent.img.destTop + parent.img.destHeight -
-                            parent.points[l].y);
+                    else if (point.y >= destTop + (destHeight / 2)) {
+                        point.y = destTop + (destTop + destHeight - point.y);
                     }
-                    parent.points[l].ratioX = (parent.points[l].x - parent.img.destLeft) / parent.img.destWidth;
-                    parent.points[l].ratioY = (parent.points[l].y - parent.img.destTop) / parent.img.destHeight;
+                    point.ratioX = (point.x - destLeft) / destWidth;
+                    point.ratioY = (point.y - destTop) / destHeight;
                 }
                 parent.pointColl[n].shapeFlip = parent.transform.currFlipState;
             }
         }
-        // Update flip value for each points for cursor styles
         for (var n = 0; n < parent.freehandCounter; n++) {
             if (this.selPointColl[n]) {
                 if (this.selPointColl[n].shapeFlip !== parent.transform.currFlipState) {
@@ -890,48 +921,68 @@ var FreehandDrawing = /** @class */ (function () {
                     this.pointCounter = 0;
                     var len = this.selPoints.length;
                     for (var l = 0; l < len; l++) {
-                        if (this.selPoints[l].y <= parent.img.destTop + (parent.img.destHeight / 2)) {
-                            this.selPoints[l].y = (parent.img.destTop + parent.img.destHeight) - (this.selPoints[l].y -
-                                parent.img.destTop);
+                        var point = this.selPoints[l];
+                        if (point.y <= destTop + (destHeight / 2)) {
+                            point.y = (destTop + destHeight) - (point.y - destTop);
                         }
-                        else if (this.selPoints[l].y >= parent.img.destTop + (parent.img.destHeight / 2)) {
-                            this.selPoints[l].y = parent.img.destTop + (parent.img.destTop + parent.img.destHeight -
-                                this.selPoints[l].y);
+                        else if (point.y >= destTop + (destHeight / 2)) {
+                            point.y = destTop + (destTop + destHeight - point.y);
                         }
-                        this.selPoints[l].ratioX = (this.selPoints[l].x - parent.img.destLeft) / parent.img.destWidth;
-                        this.selPoints[l].ratioY = (this.selPoints[l].y - parent.img.destTop) / parent.img.destHeight;
+                        point.ratioX = (point.x - destLeft) / destWidth;
+                        point.ratioY = (point.y - destTop) / destHeight;
                     }
                 }
             }
         }
         this.updateFHDCurPts();
     };
-    FreehandDrawing.prototype.updateFHDColl = function () {
+    FreehandDrawing.prototype.updateFHDColl = function (isPreventApply) {
         var parent = this.parent;
-        for (var i = 0; i < parent.objColl.length; i++) {
-            parent.objColl[i].imageRatio = { startX: ((parent.objColl[i].activePoint.startX - parent.img.destLeft) /
-                    parent.img.destWidth), startY: ((parent.objColl[i].activePoint.startY - parent.img.destTop) / parent.img.destHeight),
-                endX: ((parent.objColl[i].activePoint.endX - parent.img.destLeft) / parent.img.destWidth),
-                endY: ((parent.objColl[i].activePoint.endY - parent.img.destTop) / parent.img.destHeight),
-                width: parent.img.destWidth / parent.objColl[i].activePoint.width, height: parent.img.destHeight /
-                    parent.objColl[i].activePoint.height };
-            if (parent.objColl[i].shape === 'path') {
-                for (var j = 0; j < parent.objColl[i].pointColl.length; j++) {
-                    parent.objColl[i].pointColl[j].ratioX =
-                        (parent.objColl[i].pointColl[j].x - parent.img.destLeft) / parent.img.destWidth;
-                    parent.objColl[i].pointColl[j].ratioY =
-                        (parent.objColl[i].pointColl[j].y - parent.img.destTop) / parent.img.destHeight;
+        var destPoints = { startX: parent.img.destLeft, startY: parent.img.destTop,
+            width: parent.img.destWidth, height: parent.img.destHeight };
+        parent.notify('shape', { prop: 'straightenShapes', onPropertyChange: false });
+        var _a = parent.img, destLeft = _a.destLeft, destTop = _a.destTop, destWidth = _a.destWidth, destHeight = _a.destHeight;
+        for (var i = 0, iLen = parent.objColl.length; i < iLen; i++) {
+            var currObj = parent.objColl[i];
+            if (currObj.shape === 'line' || currObj.shape === 'arrow') {
+                parent.notify('shape', { prop: 'straightenShapePoints', value: { obj: currObj, isReverse: true } });
+            }
+            else if (currObj.shape === 'path') {
+                var temp = parent.transform.straighten;
+                parent.transform.straighten = -parent.transform.straighten;
+                parent.notify('shape', { prop: 'straightenPath', onPropertyChange: false, value: { obj: currObj } });
+                parent.transform.straighten = temp;
+            }
+            currObj.imageRatio = { startX: ((currObj.activePoint.startX - destLeft) /
+                    destWidth), startY: ((currObj.activePoint.startY - destTop) / destHeight),
+                endX: ((currObj.activePoint.endX - destLeft) / destWidth),
+                endY: ((currObj.activePoint.endY - destTop) / destHeight),
+                width: destWidth / currObj.activePoint.width, height: destHeight /
+                    currObj.activePoint.height };
+            if (currObj.shape === 'path') {
+                for (var j = 0, jLen = currObj.pointColl.length; j < jLen; j++) {
+                    currObj.pointColl[j].ratioX =
+                        (currObj.pointColl[j].x - destLeft) / destWidth;
+                    currObj.pointColl[j].ratioY =
+                        (currObj.pointColl[j].y - destTop) / destHeight;
                 }
             }
             parent.notify('shape', { prop: 'refreshActiveObj', onPropertyChange: false });
         }
+        if (parent.freehandCounter > 0 && parent.transform.straighten !== 0) {
+            var temp = parent.transform.straighten;
+            parent.transform.straighten = -parent.transform.straighten;
+            parent.notify('shape', { prop: 'straightenFHD', onPropertyChange: false });
+            parent.transform.straighten = temp;
+        }
         for (var n = 0; n < parent.freehandCounter; n++) {
             parent.points = extend([], parent.pointColl[n].points, []);
             this.pointCounter = 0;
             var len = parent.points.length;
             for (var l = 0; l < len; l++) {
-                parent.points[l].ratioX = (parent.points[l].x - parent.img.destLeft) / parent.img.destWidth;
-                parent.points[l].ratioY = (parent.points[l].y - parent.img.destTop) / parent.img.destHeight;
+                var point = parent.points[l];
+                point.ratioX = (point.x - destLeft) / destWidth;
+                point.ratioY = (point.y - destTop) / destHeight;
             }
         }
         for (var n = 0; n < parent.freehandCounter; n++) {
@@ -940,56 +991,81 @@ var FreehandDrawing = /** @class */ (function () {
                 this.pointCounter = 0;
                 var len = this.selPoints.length;
                 for (var l = 0; l < len; l++) {
-                    this.selPoints[l].ratioX = (this.selPoints[l].x - parent.img.destLeft) / parent.img.destWidth;
-                    this.selPoints[l].ratioY = (this.selPoints[l].y - parent.img.destTop) / parent.img.destHeight;
+                    var point = this.selPoints[l];
+                    point.ratioX = (point.x - destLeft) / destWidth;
+                    point.ratioY = (point.y - destTop) / destHeight;
                 }
             }
         }
+        if (this.straightenPoint.x && this.straightenPoint.y) {
+            this.straightenPoint.ratioX = (this.straightenPoint.x - destLeft) / destWidth;
+            this.straightenPoint.ratioY = (this.straightenPoint.y - destTop) / destHeight;
+        }
+        parent.img.destLeft = destPoints.startX;
+        parent.img.destTop = destPoints.startY;
+        parent.img.destWidth = destPoints.width;
+        parent.img.destHeight = destPoints.height;
+        parent.notify('shape', { prop: 'zoomObjColl', onPropertyChange: false, value: { isPreventApply: isPreventApply } });
+        parent.notify('freehand-draw', { prop: 'zoomFHDColl', onPropertyChange: false, value: { isPreventApply: isPreventApply } });
     };
     FreehandDrawing.prototype.panFHDColl = function (xDiff, yDiff, panRegion) {
         var parent = this.parent;
-        // Updating point collection for panning
         for (var n = 0; n < parent.freehandCounter; n++) {
             parent.points = extend([], parent.pointColl[n].points, []);
             this.pointCounter = 0;
             var len = parent.points.length;
             for (var l = 0; l < len; l++) {
+                var point = parent.points[l];
                 if (panRegion === '' || panRegion === 'vertical') {
-                    parent.points[l].x += xDiff;
+                    point.x += xDiff;
                 }
                 else {
-                    parent.points[l].x -= xDiff;
+                    point.x -= xDiff;
                 }
                 if (panRegion === '' || panRegion === 'horizontal') {
-                    parent.points[l].y += yDiff;
+                    point.y += yDiff;
                 }
                 else {
-                    parent.points[l].y -= yDiff;
+                    point.y -= yDiff;
                 }
             }
         }
-        // Updating each points for cursor styles for panning
         for (var n = 0; n < parent.freehandCounter; n++) {
             if (this.selPointColl[n]) {
                 this.selPoints = extend([], this.selPointColl[n].points, []);
                 this.pointCounter = 0;
                 var len = this.selPoints.length;
                 for (var l = 0; l < len; l++) {
+                    var point = this.selPoints[l];
                     if (panRegion === '' || panRegion === 'vertical') {
-                        this.selPoints[l].x += xDiff;
+                        point.x += xDiff;
                     }
                     else {
-                        this.selPoints[l].x -= xDiff;
+                        point.x -= xDiff;
                     }
                     if (panRegion === '' || panRegion === 'horizontal') {
-                        this.selPoints[l].y += yDiff;
+                        point.y += yDiff;
                     }
                     else {
-                        this.selPoints[l].y -= yDiff;
+                        point.y -= yDiff;
                     }
                 }
             }
         }
+        if (this.straightenPoint.x && this.straightenPoint.y) {
+            if (panRegion === '' || panRegion === 'vertical') {
+                this.straightenPoint.x += xDiff;
+            }
+            else {
+                this.straightenPoint.x -= xDiff;
+            }
+            if (panRegion === '' || panRegion === 'horizontal') {
+                this.straightenPoint.y += yDiff;
+            }
+            else {
+                this.straightenPoint.y -= yDiff;
+            }
+        }
         this.freehandRedraw(this.lowerContext, null);
     };
     FreehandDrawing.prototype.freeHandDraw = function (value) {
@@ -1008,7 +1084,7 @@ var FreehandDrawing = /** @class */ (function () {
                 parent.activeObj.strokeSettings = obj['strokeSettings'];
             }
             if (isNullOrUndefined(parent.activeObj.strokeSettings.strokeWidth)) {
-                parent.activeObj.strokeSettings.strokeWidth = 4;
+                parent.activeObj.strokeSettings.strokeWidth = 2;
             }
             if (!isBlazor()) {
                 parent.notify('toolbar', { prop: 'refresh-toolbar', onPropertyChange: false, value: { type: 'pen',
@@ -1047,6 +1123,7 @@ var FreehandDrawing = /** @class */ (function () {
     };
     FreehandDrawing.prototype.updateCropPtsForSel = function () {
         var parent = this.parent;
+        var actPoint = parent.activeObj.activePoint;
         for (var n = 0; n < parent.freehandCounter; n++) {
             var obj = { selPointColl: extend([], this.selPointColl) };
             if (obj['selPointColl'][n]) {
@@ -1054,20 +1131,21 @@ var FreehandDrawing = /** @class */ (function () {
                 this.pointCounter = 0;
                 var len = this.selPoints.length;
                 for (var l = 0; l < len; l++) {
-                    this.selPoints[l].ratioX = (this.selPoints[l].x -
-                        parent.activeObj.activePoint.startX) / parent.activeObj.activePoint.width;
-                    this.selPoints[l].ratioY = (this.selPoints[l].y -
-                        parent.activeObj.activePoint.startY) / parent.activeObj.activePoint.height;
+                    var point = this.selPoints[l];
+                    point.ratioX = (point.x - actPoint.startX) / actPoint.width;
+                    point.ratioY = (point.y - actPoint.startY) / actPoint.height;
                 }
             }
         }
     };
     FreehandDrawing.prototype.triggerShapeChanging = function (shapeChangingArgs) {
         var _this = this;
+        /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
         var parent = this.parent;
+        var point = parent.pointColl[this.fhdSelIdx];
         if (isBlazor() && parent.events && parent.events.shapeChanging.hasDelegate === true) {
             /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
-            parent.dotNetRef.invokeMethodAsync('ShapeEventAsync', 'OnShape', shapeChangingArgs).then(function (shapeChangingArgs) {
+            parent.dotNetRef.invokeMethodAsync('ShapeEventAsync', 'OnShape', shapeChangingArgs, null).then(function (shapeChangingArgs) {
                 _this.penStrokeWidth = shapeChangingArgs.currentShapeSettings.strokeWidth;
                 if (parent.activeObj.strokeSettings.strokeColor !== shapeChangingArgs.currentShapeSettings.strokeColor) {
                     parent.activeObj.strokeSettings.strokeColor = shapeChangingArgs.currentShapeSettings.strokeColor;
@@ -1077,9 +1155,10 @@ var FreehandDrawing = /** @class */ (function () {
                     }
                 }
                 if (_this.fhdSelID) {
-                    parent.pointColl[_this.fhdSelIdx].strokeColor = shapeChangingArgs.currentShapeSettings.strokeColor;
-                    parent.pointColl[_this.fhdSelIdx].strokeWidth = shapeChangingArgs.currentShapeSettings.strokeWidth;
-                    parent.pointColl[_this.fhdSelIdx].points = shapeChangingArgs.currentShapeSettings.points;
+                    point.strokeColor = shapeChangingArgs.currentShapeSettings.strokeColor;
+                    point.strokeWidth = shapeChangingArgs.currentShapeSettings.strokeWidth;
+                    point.points = shapeChangingArgs.currentShapeSettings.points;
+                    point.opacity = shapeChangingArgs.currentShapeSettings.opacity;
                 }
                 if (shapeChangingArgs.action === 'select') {
                     _this.freehandRedraw(_this.upperContext);
@@ -1096,9 +1175,10 @@ var FreehandDrawing = /** @class */ (function () {
                 parent.notify('toolbar', { prop: 'update-toolbar-items', onPropertyChange: false });
             }
             if (this.fhdSelID) {
-                parent.pointColl[this.fhdSelIdx].strokeColor = shapeChangingArgs.currentShapeSettings.strokeColor;
-                parent.pointColl[this.fhdSelIdx].strokeWidth = shapeChangingArgs.currentShapeSettings.strokeWidth;
-                parent.pointColl[this.fhdSelIdx].points = shapeChangingArgs.currentShapeSettings.points;
+                point.strokeColor = shapeChangingArgs.currentShapeSettings.strokeColor;
+                point.strokeWidth = shapeChangingArgs.currentShapeSettings.strokeWidth;
+                point.points = shapeChangingArgs.currentShapeSettings.points;
+                point.opacity = shapeChangingArgs.currentShapeSettings.opacity;
             }
             if (shapeChangingArgs.action === 'select') {
                 this.freehandRedraw(this.upperContext);
@@ -1107,6 +1187,27 @@ var FreehandDrawing = /** @class */ (function () {
             }
         }
     };
+    FreehandDrawing.prototype.setCenterSelPoints = function () {
+        var parent = this.parent;
+        var destPoints = { startX: parent.img.destLeft, startY: parent.img.destTop,
+            width: parent.img.destWidth, height: parent.img.destHeight };
+        parent.notify('shape', { prop: 'straightenShapes', onPropertyChange: false });
+        var _a = parent.img, destLeft = _a.destLeft, destTop = _a.destTop, destWidth = _a.destWidth, destHeight = _a.destHeight;
+        var actPoint = parent.activeObj.activePoint;
+        if (isNullOrUndefined(this.prevStraightenObj) ||
+            (JSON.stringify(this.prevStraightenObj.activePoint) !== JSON.stringify(actPoint))) {
+            this.straightenPoint = { x: actPoint.startX + (actPoint.width / 2),
+                y: actPoint.startY + (actPoint.height / 2),
+                ratioX: (actPoint.startX + (actPoint.width / 2) - destLeft) / destWidth,
+                ratioY: (actPoint.startY + (actPoint.height / 2) - destTop) / destHeight };
+            this.prevStraightenObj = extend({}, parent.activeObj, {}, true);
+            this.straightenPointAngle = parent.transform.straighten;
+        }
+        parent.img.destLeft = destPoints.startX;
+        parent.img.destTop = destPoints.startY;
+        parent.img.destWidth = destPoints.width;
+        parent.img.destHeight = destPoints.height;
+    };
     return FreehandDrawing;
 }());
 export { FreehandDrawing };