@syncfusion/ej2-image-editor 22.1.38 → 22.2.5

package/dist/es6/ej2-image-editor.es5.js

@@ -10,6 +10,7 @@ var Crop = /** @__PURE__ @class */ (function () {
         this.cropDestPoints = { startX: 0, startY: 0, width: 0, height: 0 }; // To redraw old image when navigate to crop tab
         this.tempFlipPanPoint = { x: 0, y: 0 };
         this.isPreventScaling = false;
+        this.isInitCrop = false;
         this.parent = parent;
         this.addEventListener();
     }
@@ -24,7 +25,7 @@ var Crop = /** @__PURE__ @class */ (function () {
         this.parent.on('destroyed', this.destroy, this);
     };
     Crop.prototype.removeEventListener = function () {
-        this.parent.off('crop', this.crop);
+        this.parent.off('crop', this.cropping);
         this.parent.off('destroyed', this.destroy);
     };
     Crop.prototype.cropping = function (args) {
@@ -98,6 +99,7 @@ var Crop = /** @__PURE__ @class */ (function () {
         this.cropDestPoints = { startX: 0, startY: 0, width: 0, height: 0 };
         this.tempFlipPanPoint = { x: 0, y: 0 };
         this.isPreventScaling = false;
+        this.isInitCrop = false;
     };
     Crop.prototype.cropImg = function (isRotateCrop) {
         var parent = this.parent;
@@ -151,7 +153,7 @@ var Crop = /** @__PURE__ @class */ (function () {
             parent.img.destWidth = maxDimension.width;
             parent.img.destHeight = maxDimension.height;
             var temp = this.lowerContext.filter;
-            parent.notify('finetune', { prop: 'updateBrightFilter', onPropertyChange: false });
+            parent.notify('filter', { prop: 'updateBrightFilter', onPropertyChange: false });
             this.lowerContext.drawImage(parent.baseImg, parent.img.srcLeft, parent.img.srcTop, parent.img.srcWidth, parent.img.srcHeight, parent.img.destLeft, parent.img.destTop, parent.img.destWidth, parent.img.destHeight);
             this.lowerContext.filter = 'none';
             var activeObj = extend({}, parent.activeObj, {}, true);
@@ -203,6 +205,8 @@ var Crop = /** @__PURE__ @class */ (function () {
         parent.notify('transform', { prop: 'setPreventSelect', onPropertyChange: false, value: { bool: true } });
         var coll = extend([], parent.rotateFlipColl, [], true);
         this.panToSelRangle(true);
+        this.resetZoom();
+        var afterCropActions = extend([], parent.afterCropActions, [], true);
         this.revertTransform('initial', coll);
         activeObj = extend({}, parent.objColl[parent.objColl.length - 1], {}, true);
         this.upperContext.clearRect(0, 0, parent.upperCanvas.width, parent.upperCanvas.height);
@@ -211,6 +215,7 @@ var Crop = /** @__PURE__ @class */ (function () {
         parent.transform.degree = 0;
         this.cropImg(true);
         this.revertTransform('reverse', coll);
+        parent.afterCropActions = afterCropActions;
         parent.currSelectionPoint = tempCurrSelObj;
         parent.notify('transform', { prop: 'setPreventSelect', onPropertyChange: false, value: { bool: preventSelObj['bool'] } });
         parent.notify('draw', { prop: 'clearOuterCanvas', onPropertyChange: false, value: { context: this.lowerContext } });
@@ -261,18 +266,8 @@ var Crop = /** @__PURE__ @class */ (function () {
             }
         }
     };
-    Crop.prototype.flipCrop = function () {
+    Crop.prototype.resetZoom = function () {
         var parent = this.parent;
-        parent.notify('transform', { prop: 'setReverseFlip', onPropertyChange: false, value: { isReverseFlip: true } });
-        parent.panPoint.totalPannedPoint.x += this.tempFlipPanPoint.x;
-        parent.panPoint.totalPannedPoint.y += this.tempFlipPanPoint.y;
-        var tempCurrFlipState = parent.transform.currFlipState;
-        var obj = { flipColl: null };
-        parent.notify('transform', { prop: 'getFlipColl', onPropertyChange: false, value: { obj: obj } });
-        var tempFlipColl = obj['flipColl'];
-        parent.notify('transform', { prop: 'setFlipColl', onPropertyChange: false, value: { flipColl: [] } });
-        parent.notify('shape', { prop: 'updImgRatioForActObj', onPropertyChange: false });
-        parent.objColl.push(parent.activeObj);
         if (parent.transform.zoomFactor > 0) {
             var zoomFactor = parent.transform.zoomFactor;
             var isUndoRedo = parent.isUndoRedo;
@@ -284,11 +279,25 @@ var Crop = /** @__PURE__ @class */ (function () {
             parent.isUndoRedo = isUndoRedo;
             parent.notify('draw', { prop: 'resetPanPoints', onPropertyChange: false });
         }
+    };
+    Crop.prototype.flipCrop = function () {
+        var parent = this.parent;
+        parent.notify('transform', { prop: 'setReverseFlip', onPropertyChange: false, value: { isReverseFlip: true } });
+        parent.panPoint.totalPannedPoint.x += this.tempFlipPanPoint.x;
+        parent.panPoint.totalPannedPoint.y += this.tempFlipPanPoint.y;
+        var tempCurrFlipState = parent.transform.currFlipState;
+        var obj = { flipColl: null };
+        parent.notify('transform', { prop: 'getFlipColl', onPropertyChange: false, value: { obj: obj } });
+        var tempFlipColl = obj['flipColl'];
+        parent.notify('transform', { prop: 'setFlipColl', onPropertyChange: false, value: { flipColl: [] } });
+        parent.notify('shape', { prop: 'updImgRatioForActObj', onPropertyChange: false });
+        parent.objColl.push(parent.activeObj);
+        this.resetZoom();
         parent.currSelectionPoint = extend({}, parent.objColl[parent.objColl.length - 1], {}, true);
         this.lowerContext.clearRect(0, 0, parent.lowerCanvas.width, parent.lowerCanvas.height);
         this.upperContext.clearRect(0, 0, parent.upperCanvas.width, parent.upperCanvas.height);
         var temp = this.lowerContext.filter;
-        parent.notify('finetune', { prop: 'updateBrightFilter', onPropertyChange: false });
+        parent.notify('filter', { prop: 'updateBrightFilter', onPropertyChange: false });
         this.lowerContext.drawImage(parent.baseImg, parent.img.srcLeft, parent.img.srcTop, parent.img.srcWidth, parent.img.srcHeight, parent.img.destLeft, parent.img.destTop, parent.img.destWidth, parent.img.destHeight);
         for (var i = 0, len = parent.objColl.length; i < len; i++) {
             parent.objColl[i].shapeFlip = '';
@@ -309,7 +318,7 @@ var Crop = /** @__PURE__ @class */ (function () {
         parent.notify('draw', { prop: 'setDestPoints', onPropertyChange: false });
         parent.notify('draw', { prop: 'currTransState', onPropertyChange: false,
             value: { type: 'initial', isPreventDestination: null, context: null, isPreventCircleCrop: null } });
-        parent.notify('finetune', { prop: 'updateBrightFilter', onPropertyChange: false });
+        parent.notify('filter', { prop: 'updateBrightFilter', onPropertyChange: false });
         this.lowerContext.drawImage(parent.baseImg, parent.img.srcLeft, parent.img.srcTop, parent.img.srcWidth, parent.img.srcHeight, parent.img.destLeft, parent.img.destTop, parent.img.destWidth, parent.img.destHeight);
         this.lowerContext.filter = temp;
         parent.notify('draw', { prop: 'setRotateZoom', onPropertyChange: false, value: { isRotateZoom: false } });
@@ -431,6 +440,7 @@ var Crop = /** @__PURE__ @class */ (function () {
     Crop.prototype.setCurrSelPoints = function (isSetDimension) {
         var parent = this.parent;
         var destPoint = this.cropDestPoints;
+        var filter = this.lowerContext.filter;
         parent.img.srcLeft = 0;
         parent.img.srcTop = 0;
         parent.img.srcWidth = parent.baseImg.width;
@@ -458,6 +468,7 @@ var Crop = /** @__PURE__ @class */ (function () {
         }
         parent.notify('filter', { prop: 'updateBrightFilter', onPropertyChange: false });
         this.lowerContext.drawImage(parent.baseImg, parent.img.srcLeft, parent.img.srcTop, parent.img.srcWidth, parent.img.srcHeight, parent.img.destLeft, parent.img.destTop, parent.img.destWidth, parent.img.destHeight);
+        this.lowerContext.filter = filter;
         parent.notify('draw', { prop: 'currTransState', onPropertyChange: false,
             value: { type: 'reverse', isPreventDestination: null, context: null, isPreventCircleCrop: true } });
         var cropObjColl = extend([], parent.objColl, null, true);
@@ -523,6 +534,16 @@ var Crop = /** @__PURE__ @class */ (function () {
             parent.notify('draw', { prop: 'drawObject', onPropertyChange: false, value: { canvas: 'duplicate' } });
             parent.notify('transform', { prop: 'setTempPanMove', onPropertyChange: false,
                 value: { point: null } });
+            if (!this.isInitCrop && parent.transform.degree === 0 && parent.cropObj.currFlipState !== '' &&
+                parent.cropObj.cropZoom !== 0) {
+                this.isInitCrop = true;
+                parent.notify('draw', { prop: 'performCancel', value: { isContextualToolbar: null } });
+                parent.notify('toolbar', { prop: 'refresh-toolbar', onPropertyChange: false, value: { type: 'croptransform',
+                        isApplyBtn: false, isCropping: null, isZooming: null, cType: null } });
+            }
+            else {
+                this.isInitCrop = false;
+            }
         }
         else {
             var temp = this.lowerContext.filter;
@@ -536,22 +557,18 @@ var Crop = /** @__PURE__ @class */ (function () {
     };
     Crop.prototype.panToSelRangle = function (isReverse) {
         var parent = this.parent;
-        var panX = parent.transform.degree === 0 ?
-            isReverse ? -parent.cropObj.totalPannedPoint.x : parent.cropObj.totalPannedPoint.x :
-            isReverse ? -parent.cropObj.totalPannedClientPoint.x : parent.cropObj.totalPannedClientPoint.x;
-        var panY = parent.transform.degree === 0 ?
-            isReverse ? -parent.cropObj.totalPannedPoint.y : parent.cropObj.totalPannedPoint.y :
-            isReverse ? -parent.cropObj.totalPannedClientPoint.y : parent.cropObj.totalPannedClientPoint.y;
-        if (parent.transform.degree === 0) {
-            parent.img.destLeft += panX;
-            parent.img.destTop += panY;
-            parent.notify('transform', { prop: 'drawPannImage', value: { point: { x: panX, y: panY } } });
-        }
-        else {
+        var obj = extend({}, parent.currSelectionPoint, null, true);
+        parent.currSelectionPoint = null;
+        var panX = parent.transform.degree !== 0 ?
+            isReverse ? -parent.cropObj.totalPannedClientPoint.x : parent.cropObj.totalPannedClientPoint.x : 0;
+        var panY = parent.transform.degree !== 0 ?
+            isReverse ? -parent.cropObj.totalPannedClientPoint.y : parent.cropObj.totalPannedClientPoint.y : 0;
+        if (parent.transform.degree !== 0) {
             parent.panPoint.currentPannedPoint = { x: panX, y: panY };
             parent.notify('transform', { prop: 'drawPannedImage', value: { xDiff: panX, yDiff: panY } });
             parent.panPoint.currentPannedPoint = { x: 0, y: 0 };
         }
+        parent.currSelectionPoint = obj;
     };
     Crop.prototype.cropCircle = function (context, isSave, isFlip) {
         var parent = this.parent;
@@ -826,8 +843,6 @@ var Crop = /** @__PURE__ @class */ (function () {
 
 var Draw = /** @__PURE__ @class */ (function () {
     function Draw(parent) {
-        this.cancelObjColl = [];
-        this.cancelPointColl = [];
         this.isInitialLoading = false; // Specifies whether image is loaded for the first time or not (for applying initial filter)
         this.fileName = '';
         this.isErrorImage = false;
@@ -1047,7 +1062,6 @@ var Draw = /** @__PURE__ @class */ (function () {
     };
     Draw.prototype.reset = function () {
         this.isInitialLoading = this.isErrorImage = this.isNewPath = false;
-        this.cancelObjColl = this.cancelPointColl = [];
         this.isShapeTextInserted = false;
         this.initZoomValue = null;
         this.tempFilter = '';
@@ -1932,12 +1946,30 @@ var Draw = /** @__PURE__ @class */ (function () {
         canvasDraw.stroke();
         canvasDraw.lineWidth = tempLineWidth;
     };
+    Draw.prototype.manipulateSaveCtx = function (canvasDraw, x, y) {
+        if (canvasDraw !== this.lowerContext && canvasDraw !== this.upperContext) {
+            var obj = { width: 0, height: 0 };
+            this.parent.notify('crop', { prop: 'calcRatio', onPropertyChange: false,
+                value: { obj: obj, dimension: { width: canvasDraw.canvas.width, height: canvasDraw.canvas.height } } });
+            var ratio = obj;
+            if (x) {
+                x *= (ratio.width);
+            }
+            if (y) {
+                y *= (ratio.height);
+            }
+        }
+        return { x: x, y: y };
+    };
     Draw.prototype.arrow = function (canvasDraw, start) {
         var parent = this.parent;
         var actPoint = parent.activeObj.activePoint;
         canvasDraw.lineWidth = (parent.activeObj.strokeSettings.strokeWidth);
-        var x = this.arrowDimension['arrow']['width'] + parent.activeObj.strokeSettings.strokeWidth;
-        var y = this.arrowDimension['arrow']['height'] + parent.activeObj.strokeSettings.strokeWidth;
+        var x = this.arrowDimension['arrow']['width'];
+        var y = this.arrowDimension['arrow']['height'];
+        var point = this.manipulateSaveCtx(canvasDraw, x, y);
+        x = point.x + parent.activeObj.strokeSettings.strokeWidth;
+        y = point.y + parent.activeObj.strokeSettings.strokeWidth;
         this.dx = actPoint.endX - actPoint.startX;
         this.dy = actPoint.endY - actPoint.startY;
         canvasDraw.fillStyle = parent.activeObj.strokeSettings.strokeColor;
@@ -1972,8 +2004,11 @@ var Draw = /** @__PURE__ @class */ (function () {
     Draw.prototype.arrowSolid = function (canvasDraw, start) {
         var parent = this.parent;
         var actPoint = parent.activeObj.activePoint;
-        var x = this.arrowDimension['arrowSolid']['width'] + parent.activeObj.strokeSettings.strokeWidth;
-        var y = this.arrowDimension['arrowSolid']['height'] + parent.activeObj.strokeSettings.strokeWidth;
+        var x = this.arrowDimension['arrowSolid']['width'];
+        var y = this.arrowDimension['arrowSolid']['height'];
+        var point = this.manipulateSaveCtx(canvasDraw, x, y);
+        x = point.x + parent.activeObj.strokeSettings.strokeWidth;
+        y = point.y + parent.activeObj.strokeSettings.strokeWidth;
         this.dx = actPoint.endX - actPoint.startX;
         this.dy = actPoint.endY - actPoint.startY;
         var angle = Math.atan2(this.dy, this.dx);
@@ -2023,8 +2058,11 @@ var Draw = /** @__PURE__ @class */ (function () {
         canvasDraw.lineWidth = (parent.activeObj.strokeSettings.strokeWidth);
         canvasDraw.beginPath();
         canvasDraw.fillStyle = parent.activeObj.strokeSettings.strokeColor;
-        var x = this.arrowDimension['square']['width'] + parent.activeObj.strokeSettings.strokeWidth;
-        var y = this.arrowDimension['square']['height'] + parent.activeObj.strokeSettings.strokeWidth;
+        var x = this.arrowDimension['square']['width'];
+        var y = this.arrowDimension['square']['height'];
+        var point = this.manipulateSaveCtx(canvasDraw, x, y);
+        x = point.x + parent.activeObj.strokeSettings.strokeWidth;
+        y = point.y + parent.activeObj.strokeSettings.strokeWidth;
         this.dx = actPoint.endX - actPoint.startX;
         this.dy = actPoint.endY - actPoint.startY;
         var angle = Math.atan2(this.dy, this.dx);
@@ -2079,8 +2117,11 @@ var Draw = /** @__PURE__ @class */ (function () {
     Draw.prototype.arrowSquareEnd = function (canvasDraw) {
         var parent = this.parent;
         var actPoint = parent.activeObj.activePoint;
-        var x = this.arrowDimension['square']['width'] + parent.activeObj.strokeSettings.strokeWidth;
-        var y = this.arrowDimension['square']['height'] + parent.activeObj.strokeSettings.strokeWidth;
+        var x = this.arrowDimension['square']['width'];
+        var y = this.arrowDimension['square']['height'];
+        var point = this.manipulateSaveCtx(canvasDraw, x, y);
+        x = point.x + parent.activeObj.strokeSettings.strokeWidth;
+        y = point.y + parent.activeObj.strokeSettings.strokeWidth;
         this.dx = actPoint.endX - actPoint.startX;
         this.dy = actPoint.endY - actPoint.startY;
         var angle = Math.atan2(this.dy, this.dx);
@@ -2142,7 +2183,9 @@ var Draw = /** @__PURE__ @class */ (function () {
         if ((start && parent.activeObj.triangleDirection === 'left') ||
             (!start && parent.activeObj.triangleDirection === 'right')) {
             canvasDraw.lineWidth = (parent.activeObj.strokeSettings.strokeWidth);
-            var circleRadius = this.arrowDimension['circle']['width'] + parent.activeObj.strokeSettings.strokeWidth;
+            var circleRadius = this.arrowDimension['circle']['width'];
+            var point = this.manipulateSaveCtx(canvasDraw, circleRadius, null);
+            circleRadius = point.x + parent.activeObj.strokeSettings.strokeWidth;
             canvasDraw.beginPath();
             canvasDraw.arc(actPoint.endX, actPoint.endY, circleRadius, 0, 2 * Math.PI);
             canvasDraw.stroke();
@@ -2190,7 +2233,9 @@ var Draw = /** @__PURE__ @class */ (function () {
         else if ((start && parent.activeObj.triangleDirection === 'right') ||
             (!start && parent.activeObj.triangleDirection === 'left')) {
             canvasDraw.lineWidth = (parent.activeObj.strokeSettings.strokeWidth);
-            var circleRadius = this.arrowDimension['circle']['width'] + parent.activeObj.strokeSettings.strokeWidth;
+            var circleRadius = this.arrowDimension['circle']['width'];
+            var point = this.manipulateSaveCtx(canvasDraw, circleRadius, null);
+            circleRadius = point.x + parent.activeObj.strokeSettings.strokeWidth;
             canvasDraw.beginPath();
             canvasDraw.arc(actPoint.startX, actPoint.startY, circleRadius, 0, 2 * Math.PI);
             canvasDraw.stroke();
@@ -2248,7 +2293,9 @@ var Draw = /** @__PURE__ @class */ (function () {
                 (!start && (parent.activeObj.end === 'circleSolid' && parent.activeObj.start === 'none'))) {
                 this.shapeLine(canvasDraw, actPoint.startX, actPoint.startY, actPoint.endX, actPoint.endY);
             }
-            var circleRadius = this.arrowDimension['circle']['width'] + parent.activeObj.strokeSettings.strokeWidth;
+            var circleRadius = this.arrowDimension['circle']['width'];
+            var point = this.manipulateSaveCtx(canvasDraw, circleRadius, null);
+            circleRadius = point.x + parent.activeObj.strokeSettings.strokeWidth;
             this.dx = actPoint.endX - actPoint.startX;
             this.dy = actPoint.endY - actPoint.startY;
             canvasDraw.save();
@@ -2269,7 +2316,9 @@ var Draw = /** @__PURE__ @class */ (function () {
                 !start && (parent.activeObj.end === 'circleSolid' && parent.activeObj.start === 'none')) {
                 this.shapeLine(canvasDraw, actPoint.startX, actPoint.startY, actPoint.endX, actPoint.endY);
             }
-            var circleRadius = this.arrowDimension['circle']['width'] + parent.activeObj.strokeSettings.strokeWidth;
+            var circleRadius = this.arrowDimension['circle']['width'];
+            var point = this.manipulateSaveCtx(canvasDraw, circleRadius, null);
+            circleRadius = point.x + parent.activeObj.strokeSettings.strokeWidth;
             this.dx = actPoint.endX - actPoint.startX;
             this.dy = actPoint.endY - actPoint.startY;
             canvasDraw.save();
@@ -2295,8 +2344,11 @@ var Draw = /** @__PURE__ @class */ (function () {
                     (parent.activeObj.end === 'bar' && (parent.activeObj.start !== 'circle' && parent.activeObj.start !== 'square'))))) {
                 this.shapeLine(canvasDraw, actPoint.startX, actPoint.startY, actPoint.endX, actPoint.endY);
             }
-            var x = this.arrowDimension['bar']['width'] + parent.activeObj.strokeSettings.strokeWidth;
-            var y = this.arrowDimension['bar']['height'] + parent.activeObj.strokeSettings.strokeWidth;
+            var x = this.arrowDimension['bar']['width'];
+            var y = this.arrowDimension['bar']['height'];
+            var point = this.manipulateSaveCtx(canvasDraw, x, y);
+            x = point.x + parent.activeObj.strokeSettings.strokeWidth;
+            y = point.y + parent.activeObj.strokeSettings.strokeWidth;
             this.dx = actPoint.endX - actPoint.startX;
             this.dy = actPoint.endY - actPoint.startY;
             var angle = Math.atan2(this.dy, this.dx);
@@ -2317,8 +2369,11 @@ var Draw = /** @__PURE__ @class */ (function () {
                 (!start && (parent.activeObj.end === 'bar' && parent.activeObj.start === 'none'))) {
                 this.shapeLine(canvasDraw, actPoint.startX, actPoint.startY, actPoint.endX, actPoint.endY);
             }
-            var x = this.arrowDimension['bar']['width'] + parent.activeObj.strokeSettings.strokeWidth;
-            var y = this.arrowDimension['bar']['height'] + parent.activeObj.strokeSettings.strokeWidth;
+            var x = this.arrowDimension['bar']['width'];
+            var y = this.arrowDimension['bar']['height'];
+            var point = this.manipulateSaveCtx(canvasDraw, x, y);
+            x = point.x + parent.activeObj.strokeSettings.strokeWidth;
+            y = point.y + parent.activeObj.strokeSettings.strokeWidth;
             this.dx = actPoint.endX - actPoint.startX;
             this.dy = actPoint.endY - actPoint.startY;
             var angle = Math.atan2(this.dy, this.dx);
@@ -3178,8 +3233,6 @@ var Draw = /** @__PURE__ @class */ (function () {
                     parent.isCropTab = isCropTab;
                     this.resetPanPoints();
                 }
-                this.cancelObjColl = extend([], parent.objColl, [], true);
-                this.cancelPointColl = extend([], parent.pointColl, [], true);
                 parent.notify('freehand-draw', { prop: 'updateFHDColl', onPropertyChange: false });
                 parent.isCropTab = true;
                 parent.isCircleCrop = false;
@@ -3489,7 +3542,7 @@ var Draw = /** @__PURE__ @class */ (function () {
             parent.afterCropActions = obj.afterCropActions;
         }
         this.lowerContext.filter = obj.filter;
-        parent.notify('filter', { prop: 'setBrightnessAdjusted', onPropertyChange: false, value: { isBrightnessAdjusted: false } });
+        parent.notify('filter', { prop: 'setBrightnessAdjusted', onPropertyChange: false, value: { isBrightnessAdjusted: obj.isBrightAdjust } });
         var isCircleCrop = parent.isCircleCrop;
         var currSelectionPoint;
         if (isNullOrUndefined(parent.currSelectionPoint)) {
@@ -3585,6 +3638,7 @@ var Draw = /** @__PURE__ @class */ (function () {
             this.setTransformColl(this.lowerContext, 'initial');
         }
         parent.notify('transform', { prop: 'setDestPointsForFlipState', onPropertyChange: false });
+        parent.notify('filter', { prop: 'updateBrightFilter', onPropertyChange: false });
         this.lowerContext.drawImage(parent.baseImg, parent.img.srcLeft, parent.img.srcTop, parent.img.srcWidth, parent.img.srcHeight, parent.img.destLeft, parent.img.destTop, parent.img.destWidth, parent.img.destHeight);
         if (isObj) {
             this.updateCurrTransState('reverse');
@@ -3912,7 +3966,7 @@ var Draw = /** @__PURE__ @class */ (function () {
         object['isInitialLoaded'] = this.isInitialLoading;
     };
     Draw.prototype.getFileExtensionFromURL = function (url) {
-        var lastDotIndex = url.lastIndexOf(".");
+        var lastDotIndex = url.lastIndexOf('.');
         if (lastDotIndex !== -1) {
             return url.slice(lastDotIndex + 1).toLowerCase();
         }
@@ -4292,7 +4346,6 @@ var Export = /** @__PURE__ @class */ (function () {
             id: parent.element.id + '_tempCanvas', attrs: { name: 'canvasImage' }
         });
         var tempContext = tempCanvas.getContext('2d');
-        tempContext.filter = this.lowerContext.filter;
         tempCanvas.width = width;
         tempCanvas.height = height;
         var dimObj = { width: 0, height: 0 };
@@ -4301,9 +4354,9 @@ var Export = /** @__PURE__ @class */ (function () {
         var maxDimension = dimObj;
         tempCanvas.style.maxWidth = maxDimension.width + 'px';
         tempCanvas.style.maxHeight = maxDimension.height + 'px';
-        tempContext.filter = this.lowerContext.filter;
         var temp = this.lowerContext.filter;
         parent.notify('filter', { prop: 'updateBrightFilter', onPropertyChange: false });
+        tempContext.filter = this.lowerContext.filter;
         tempContext.drawImage(parent.baseImg, parent.img.srcLeft, parent.img.srcTop, parent.img.srcWidth, parent.img.srcHeight, 0, 0, width, height);
         this.lowerContext.filter = temp;
         if (parent.transform.degree !== 0 || parent.transform.currFlipState !== '') {
@@ -4334,6 +4387,14 @@ var Export = /** @__PURE__ @class */ (function () {
                 if (parent.objColl[i].shape === 'text') {
                     parent.objColl[i].textSettings.fontSize *= ((ratio.width + ratio.height) / 2);
                 }
+                else if (parent.objColl[i].shape === 'path') {
+                    for (var l = 0; l < parent.objColl[i].pointColl.length; l++) {
+                        parent.objColl[i].pointColl[l].x =
+                            (parent.objColl[i].pointColl[l].x - parent.img.destLeft) * ratio.width;
+                        parent.objColl[i].pointColl[l].y =
+                            (parent.objColl[i].pointColl[l].y - parent.img.destTop) * ratio.height;
+                    }
+                }
                 parent.notify('draw', { prop: 'drawObject', onPropertyChange: false, value: { canvas: 'saveContext', obj: parent.objColl[i], isCropRatio: null,
                         points: null, isPreventDrag: true, saveContext: tempContext, isPreventSelection: null } });
             }
@@ -4921,8 +4982,6 @@ var Filter = /** @__PURE__ @class */ (function () {
         parent.notify('freehand-draw', { prop: 'getSelPointColl', onPropertyChange: false, value: { obj: selPointCollObj } });
         prevObj.selPointColl = extend([], selPointCollObj['selPointColl'], [], true);
         this.updateAdj(type, value);
-        var filter = this.lowerContext.filter;
-        this.lowerContext.filter = this.appliedFilter;
         parent.notify('undo-redo', {
             prop: 'updateUndoRedoColl',
             onPropertyChange: false,
@@ -4939,7 +4998,6 @@ var Filter = /** @__PURE__ @class */ (function () {
                 isCircleCrop: null
             }
         });
-        this.lowerContext.filter = filter;
     };
     Filter.prototype.setFilter = function (type) {
         var parent = this.parent;
@@ -4957,15 +5015,12 @@ var Filter = /** @__PURE__ @class */ (function () {
             value: { obj: selPointCollObj } });
         prevObj.selPointColl = extend([], selPointCollObj['selPointColl'], [], true);
         this.updateAdj(type, null);
-        var filter = this.lowerContext.filter;
-        this.lowerContext.filter = this.appliedFilter;
         parent.notify('draw', { prop: 'setImageEdited', onPropertyChange: false });
         parent.notify('undo-redo', { prop: 'updateUndoRedoColl', onPropertyChange: false,
             value: { operation: type, previousObj: prevObj, previousObjColl: prevObj.objColl,
                 previousPointColl: prevObj.pointColl, previousSelPointColl: prevObj.selPointColl,
                 previousCropObj: prevCropObj, previousText: null,
                 currentText: null, previousFilter: prevFilter, isCircleCrop: null } });
-        this.lowerContext.filter = filter;
     };
     Filter.prototype.setAdjustment = function (type) {
         var splitWords = this.lowerContext.filter.split(' ');
@@ -5118,7 +5173,7 @@ var Filter = /** @__PURE__ @class */ (function () {
             totalPannedInternalPoint: { x: 0, y: 0 }, tempFlipPanPoint: { x: 0, y: 0 }, activeObj: {},
             rotateFlipColl: [], degree: 0, currFlipState: '', zoomFactor: 0, previousZoomValue: 0,
             destPoints: { startX: 0, startY: 0, width: 0, height: 0 },
-            srcPoints: { startX: 0, startY: 0, width: 0, height: 0 }, filter: '' };
+            srcPoints: { startX: 0, startY: 0, width: 0, height: 0 }, filter: '', isBrightAdjust: this.isBrightnessAdjusted };
         obj.cropZoom = parent.transform.cropZoomFactor;
         obj.defaultZoom = parent.transform.defaultZoomFactor;
         obj.zoomFactor = parent.zoomSettings.zoomFactor;
@@ -5155,6 +5210,7 @@ var FreehandDrawing = /** @__PURE__ @class */ (function () {
         this.selPointColl = {};
         this.currFHDIdx = 0; // Specifies id for every freehand drawing - uses while deleting
         this.selPoints = [];
+        this.dummyPoints = [];
         this.tempFHDStyles = { strokeColor: null, fillColor: null, strokeWidth: null };
         this.parent = parent;
         this.addEventListener();
@@ -5308,6 +5364,7 @@ var FreehandDrawing = /** @__PURE__ @class */ (function () {
         this.fhdObj = { lastWidth: 0, lastVelocity: 0, time: 0, pointX: 0, pointY: 0 };
         this.isFreehandDrawing = this.isFreehandPointMoved = false;
         this.selPoints = [];
+        this.dummyPoints = [];
         this.freehandDownPoint = { x: 0, y: 0 };
         this.selPointColl = {};
         this.fhdHovIdx = null;
@@ -5356,7 +5413,12 @@ var FreehandDrawing = /** @__PURE__ @class */ (function () {
             if (parent.points[l + 1] && parent.points[l + 2] && parent.points[l + 2]) {
                 controlPoint1 = (this.calcCurveCP(parent.points[l + 0], parent.points[l + 1], parent.points[l + 2])).controlPoint2;
                 controlPoint2 = (this.calcCurveCP(parent.points[l + 1], parent.points[l + 2], parent.points[l + 3])).controlPoint1;
-                startPoint = parent.points[l + 1];
+                if (l === 0) {
+                    startPoint = parent.points[l];
+                }
+                else {
+                    startPoint = parent.points[l + 1];
+                }
                 endPoint = parent.points[l + 2];
                 this.startDraw(context, controlPoint1, controlPoint2, startPoint, endPoint, minStrokeWidth, maxStrokeWidth);
             }
@@ -5423,6 +5485,7 @@ var FreehandDrawing = /** @__PURE__ @class */ (function () {
         parent.pointColl[fhCnt].flipState = parent.transform.currFlipState;
         parent.pointColl[fhCnt].id = 'pen_' + (this.currFHDIdx + 1);
         parent.points = [];
+        this.dummyPoints = [];
         this.selPointColl[fhCnt] = {};
         this.selPointColl[fhCnt].points = extend([], this.selPoints);
         this.selPoints = [];
@@ -5470,15 +5533,21 @@ var FreehandDrawing = /** @__PURE__ @class */ (function () {
             parent.points.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 });
-            if (parent.points.length > 3) {
-                var p0 = parent.points[this.pointCounter];
-                var p1 = parent.points[this.pointCounter + 1];
-                var p2 = parent.points[this.pointCounter + 2];
-                var p3 = parent.points[this.pointCounter + 3];
+            this.dummyPoints.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 });
+            if (this.dummyPoints.length > 2) {
+                if (this.dummyPoints.length === 3) {
+                    this.dummyPoints.unshift(this.dummyPoints[0]);
+                }
+                var p0 = this.dummyPoints[0];
+                var p1 = this.dummyPoints[1];
+                var p2 = this.dummyPoints[2];
+                var p3 = this.dummyPoints[3];
                 controlPoint1 = this.calcCurveCP(p0, p1, p2).controlPoint2;
                 controlPoint2 = this.calcCurveCP(p1, p2, p3).controlPoint1;
-                startPoint = parent.points[this.pointCounter + 1];
-                endPoint = parent.points[this.pointCounter + 2];
+                startPoint = this.dummyPoints[1];
+                endPoint = this.dummyPoints[2];
                 var minStrokeWidth = 0.5;
                 var maxStrokeWidth = 5;
                 if (!isNullOrUndefined(this.penStrokeWidth)) {
@@ -5486,6 +5555,7 @@ var FreehandDrawing = /** @__PURE__ @class */ (function () {
                 }
                 this.startDraw(context, controlPoint1, controlPoint2, startPoint, endPoint, minStrokeWidth, maxStrokeWidth);
                 this.pointCounter++;
+                this.dummyPoints.shift();
             }
             if (mouseDown) {
                 controlPoint1 = controlPoint2 = startPoint = endPoint = { x: x, y: y, time: new Date().getTime() };
@@ -5656,7 +5726,12 @@ var FreehandDrawing = /** @__PURE__ @class */ (function () {
                 if (parent.points[l + 1] && parent.points[l + 2] && parent.points[l + 2]) {
                     controlPoint1 = (this.calcCurveCP(parent.points[l + 0], parent.points[l + 1], parent.points[l + 2])).controlPoint2;
                     controlPoint2 = (this.calcCurveCP(parent.points[l + 1], parent.points[l + 2], parent.points[l + 3])).controlPoint1;
-                    startPoint = parent.points[l + 1];
+                    if (l === 0) {
+                        startPoint = parent.points[l];
+                    }
+                    else {
+                        startPoint = parent.points[l + 1];
+                    }
                     endPoint = parent.points[l + 2];
                     this.startDraw(context, controlPoint1, controlPoint2, startPoint, endPoint, minStrokeWidth, maxStrokeWidth);
                 }
@@ -5783,18 +5858,21 @@ var FreehandDrawing = /** @__PURE__ @class */ (function () {
             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.pointColl[_this.fhdSelIdx].strokeColor = shapeChangingArgs.currentShapeSettings.strokeColor;
-                    parent.pointColl[_this.fhdSelIdx].strokeWidth = shapeChangingArgs.currentShapeSettings.strokeWidth;
+                    parent.activeObj.strokeSettings.strokeColor = parent.pointColl[_this.fhdSelIdx].strokeColor =
+                        shapeChangingArgs.currentShapeSettings.strokeColor;
+                    parent.activeObj.strokeSettings.strokeWidth = parent.pointColl[_this.fhdSelIdx].strokeWidth =
+                        shapeChangingArgs.currentShapeSettings.strokeWidth;
                     parent.pointColl[_this.fhdSelIdx].points = shapeChangingArgs.currentShapeSettings.points;
                     _this.freehandRedraw(_this.upperContext);
-                    parent.updateToolbar(parent.element, 'imageLoaded');
-                    parent.updateToolbar(parent.element, 'pen');
+                    parent.updateToolbar(parent.element, 'colorToolbar');
                 });
             }
             else {
                 parent.trigger('shapeChanging', shapeChangingArgs);
-                parent.pointColl[this.fhdSelIdx].strokeColor = shapeChangingArgs.currentShapeSettings.strokeColor;
-                parent.pointColl[this.fhdSelIdx].strokeWidth = shapeChangingArgs.currentShapeSettings.strokeWidth;
+                parent.activeObj.strokeSettings.strokeColor = parent.pointColl[this.fhdSelIdx].strokeColor =
+                    shapeChangingArgs.currentShapeSettings.strokeColor;
+                parent.activeObj.strokeSettings.strokeWidth = parent.pointColl[this.fhdSelIdx].strokeWidth =
+                    shapeChangingArgs.currentShapeSettings.strokeWidth;
                 parent.pointColl[this.fhdSelIdx].points = shapeChangingArgs.currentShapeSettings.points;
                 this.freehandRedraw(this.upperContext);
                 parent.notify('toolbar', { prop: 'refresh-toolbar', onPropertyChange: false, value: { type: 'pen',
@@ -6113,6 +6191,7 @@ var FreehandDrawing = /** @__PURE__ @class */ (function () {
         var parent = this.parent;
         if (value) {
             parent.points = [];
+            this.dummyPoints = [];
             parent.notify('shape', { prop: 'refreshActiveObj', onPropertyChange: false });
             parent.togglePen = true;
             parent.upperCanvas.style.cursor = parent.cursor = 'crosshair';
@@ -7039,12 +7118,8 @@ var Selection = /** @__PURE__ @class */ (function () {
         var previousShapeSettings = this.updatePrevShapeSettings();
         var shapeResizingArgs = { action: 'resize', previousShapeSettings: previousShapeSettings };
         var shapeMovingArgs = { action: 'move', previousShapeSettings: previousShapeSettings };
-        if (isNullOrUndefined(this.shapeResizingArgs)) {
-            this.shapeResizingArgs = shapeResizingArgs;
-        }
-        if (isNullOrUndefined(this.shapeMovingArgs)) {
-            this.shapeMovingArgs = shapeMovingArgs;
-        }
+        this.shapeResizingArgs = shapeResizingArgs;
+        this.shapeMovingArgs = shapeMovingArgs;
         if (parent.activeObj.shape === 'text' && this.dragElement !== '') {
             parent.notify('shape', { prop: 'updateFontRatio', onPropertyChange: false,
                 value: { obj: parent.activeObj, isTextArea: null } });
@@ -7243,8 +7318,8 @@ var Selection = /** @__PURE__ @class */ (function () {
         parent.activeObj.activePoint.width = parent.activeObj.activePoint.endX - parent.activeObj.activePoint.startX;
         parent.activeObj.activePoint.height = parent.activeObj.activePoint.endY - parent.activeObj.activePoint.startY;
         var currentShapeSettings = this.updatePrevShapeSettings();
-        shapeResizingArgs.currentShapeSettings = currentShapeSettings;
-        shapeMovingArgs.currentShapeSettings = currentShapeSettings;
+        shapeResizingArgs.currentShapeSettings = this.shapeResizingArgs.currentShapeSettings = currentShapeSettings;
+        shapeMovingArgs.currentShapeSettings = this.shapeMovingArgs.currentShapeSettings = currentShapeSettings;
         if (type === 'resize') {
             this.isCropSelection = false;
             var splitWords = void 0;
@@ -7255,7 +7330,7 @@ var Selection = /** @__PURE__ @class */ (function () {
                 this.isCropSelection = true;
             }
             if (!this.isCropSelection && this.parent.eventType !== 'resize' && isBlazor() && parent.events && this.parent.events.onShapeResizeStart.hasDelegate === true) {
-                shapeResizingArgs.action = 'resize-start';
+                shapeResizingArgs.action = this.currentDrawingShape !== '' ? 'drawing' : 'resize-start';
                 /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
                 parent.dotNetRef.invokeMethodAsync('ShapeEventAsync', 'OnShapeResizeStart', shapeResizingArgs).then(function (shapeResizingArgs) {
                     parent.notify('shape', { prop: 'updateShapeChangeEventArgs', onPropertyChange: false,
@@ -7263,6 +7338,9 @@ var Selection = /** @__PURE__ @class */ (function () {
                 });
             }
             else if (!this.isCropSelection) {
+                if (this.currentDrawingShape !== '') {
+                    shapeResizingArgs.action = 'drawing';
+                }
                 parent.trigger('shapeChanging', shapeResizingArgs);
                 parent.notify('shape', { prop: 'updateShapeChangeEventArgs', onPropertyChange: false,
                     value: { shapeSettings: shapeResizingArgs.currentShapeSettings } });
@@ -7279,9 +7357,7 @@ var Selection = /** @__PURE__ @class */ (function () {
                         startY: shapeResizingArgs.currentShapeSettings.startY,
                         width: shapeResizingArgs.currentShapeSettings.width,
                         height: shapeResizingArgs.currentShapeSettings.height } };
-                if (isNullOrUndefined(this.selectionResizingArgs)) {
-                    this.selectionResizingArgs = selectionResizingArgs;
-                }
+                this.selectionResizingArgs = selectionResizingArgs;
                 if (isBlazor() && isNullOrUndefined(this.parent.eventType) && parent.events &&
                     parent.events.onSelectionResizeStart.hasDelegate === true) {
                     selectionResizingArgs.action = 'resize-start';
@@ -9193,7 +9269,7 @@ var Selection = /** @__PURE__ @class */ (function () {
             else if (this.parent.eventType === 'resize') {
                 if (!this.isCropSelection && this.parent.events && this.parent.events.onShapeResizeEnd.hasDelegate === true) {
                     this.shapeResizingArgs.currentShapeSettings = this.updatePrevShapeSettings();
-                    this.shapeResizingArgs.action = 'resize-end';
+                    this.shapeResizingArgs.action = this.currentDrawingShape !== '' ? 'drawing' : 'resize-end';
                     /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
                     this.parent.dotNetRef.invokeMethodAsync('ShapeEventAsync', 'OnShapeResizeEnd', this.shapeResizingArgs).then(function (shapeResizingArgs) {
                         _this.parent.notify('shape', { prop: 'updateShapeChangeEventArgs', onPropertyChange: false,
@@ -9612,7 +9688,8 @@ var Selection = /** @__PURE__ @class */ (function () {
                 isApply = false;
             }
             else if (parent.upperCanvas.style.cursor !== 'default' && parent.upperCanvas.style.cursor !== 'grab' &&
-                parent.upperCanvas.style.cursor !== 'crosshair' && parent.upperCanvas.style.cursor !== 'pointer') {
+                parent.upperCanvas.style.cursor !== 'crosshair' && parent.upperCanvas.style.cursor !== 'pointer' &&
+                parent.upperCanvas.style.cursor !== 'move') {
                 isApply = false;
             }
             else {
@@ -10359,10 +10436,21 @@ var Selection = /** @__PURE__ @class */ (function () {
         if (isNullOrUndefined(actObj.activePoint)) {
             return;
         }
-        if ((x >= Math.floor(actObj.activePoint.startX) && x <= Math.ceil(actObj.activePoint.endX) &&
-            y >= Math.floor(actObj.activePoint.startY) && y <= Math.ceil(actObj.activePoint.endY))) {
+        var radius = actObj.topLeftCircle ? actObj.topLeftCircle.radius : 0;
+        if ((x >= Math.floor(actObj.activePoint.startX) &&
+            x <= Math.ceil(actObj.activePoint.endX) &&
+            y >= Math.floor(actObj.activePoint.startY) &&
+            y <= Math.ceil(actObj.activePoint.endY))) {
             isInside = true;
         }
+        else if (radius !== 0 && (x >= Math.floor(actObj.activePoint.startX) - radius &&
+            x <= Math.ceil(actObj.activePoint.endX) + radius &&
+            y >= Math.floor(actObj.activePoint.startY) - radius &&
+            y <= Math.ceil(actObj.activePoint.endY) + radius)) {
+            isInside = true;
+            this.tempActiveObj = { activePoint: { startX: 0, startY: 0, endX: 0, endY: 0, width: 0, height: 0 },
+                flipObjColl: [], triangle: [], triangleRatio: [] };
+        }
         else if (actObj.shape === 'text' && this.dragElement !== '') {
             isInside = true;
         }
@@ -10451,7 +10539,9 @@ var Selection = /** @__PURE__ @class */ (function () {
     Selection.prototype.setTextBoxStylesToActObj = function () {
         var parent = this.parent;
         parent.activeObj.textSettings.fontFamily = parent.textArea.style.fontFamily;
-        parent.activeObj.strokeSettings.strokeColor = parent.textArea.style.color !== '' ?
+        parent.activeObj.strokeSettings.strokeColor = parent.textArea.style.color !== '' &&
+            parent.textArea.style.color.split('(')[1] && parent.textArea.style.color.split('(')[1].split(',')[0] &&
+            parent.textArea.style.color.split('(')[1].split(',')[1] && parent.textArea.style.color.split('(')[1].split(',')[2] ?
             this.rgbToHex(parseFloat(parent.textArea.style.color.split('(')[1].split(',')[0]), parseFloat(parent.textArea.style.color.split('(')[1].split(',')[1]), parseFloat(parent.textArea.style.color.split('(')[1].split(',')[2])) :
             parent.textArea.style.color;
         if (parent.textArea.style.fontWeight === 'bold') {
@@ -11281,6 +11371,9 @@ var Shape = /** @__PURE__ @class */ (function () {
                     isApplyBtn: null, isCropping: null, isZooming: null, cType: null } });
             parent.notify('toolbar', { prop: 'update-toolbar-items', onPropertyChange: false });
         }
+        else {
+            parent.updateToolbar(parent.element, 'text');
+        }
     };
     Shape.prototype.initializeTextShape = function (text, fontFamily, fontSize, bold, italic, strokeColor) {
         var parent = this.parent;
@@ -11312,14 +11405,10 @@ var Shape = /** @__PURE__ @class */ (function () {
                 if (x && y) {
                     if ((x !== parent.activeObj.activePoint.startX) && (y !== parent.activeObj.activePoint.startY)) {
                         this.updateTextFromTextArea();
-                        this.applyActObj();
                     }
                 }
                 else {
                     this.updateTextFromTextArea();
-                    this.apply(parent.activeObj.shape, parent.activeObj);
-                    parent.objColl.push(parent.activeObj);
-                    this.refreshActiveObj();
                     parent.textArea.style.transform = '';
                     parent.notify('toolbar', { prop: 'refresh-main-toolbar', onPropertyChange: false });
                 }
@@ -11422,7 +11511,7 @@ var Shape = /** @__PURE__ @class */ (function () {
         parent.activeObj.strokeSettings.fillColor = shapeSettings.fillColor;
         switch (parent.activeObj.shape) {
             case 'ellipse':
-                parent.activeObj.activePoint.width = shapeSettings.radius / 2;
+                parent.activeObj.activePoint.width = shapeSettings.radius * 2;
                 break;
             case 'line':
             case 'arrow':
@@ -11498,23 +11587,20 @@ var Shape = /** @__PURE__ @class */ (function () {
     };
     Shape.prototype.updateTextFromTextArea = function () {
         var parent = this.parent;
+        var allowUndoRedo = false;
+        var prevCropObj = extend({}, parent.cropObj, {}, true);
+        var object = { currObj: {} };
+        parent.notify('filter', { prop: 'getCurrentObj', onPropertyChange: false, value: { object: object } });
+        var prevObj = object['currObj'];
+        prevObj.objColl = extend([], parent.objColl, [], true);
+        prevObj.pointColl = extend([], parent.pointColl, [], true);
+        prevObj.afterCropActions = extend([], this.parent.afterCropActions, [], true);
+        var selPointCollObj = { selPointColl: null };
+        parent.notify('freehand-draw', { prop: 'getSelPointColl', onPropertyChange: false,
+            value: { obj: selPointCollObj } });
+        prevObj.selPointColl = extend([], selPointCollObj['selPointColl'], [], true);
         if (parent.activeObj.keyHistory !== parent.textArea.value) {
-            var prevCropObj = extend({}, parent.cropObj, {}, true);
-            var object = { currObj: {} };
-            parent.notify('filter', { prop: 'getCurrentObj', onPropertyChange: false, value: { object: object } });
-            var prevObj = object['currObj'];
-            prevObj.objColl = extend([], parent.objColl, [], true);
-            prevObj.pointColl = extend([], parent.pointColl, [], true);
-            prevObj.afterCropActions = extend([], this.parent.afterCropActions, [], true);
-            var selPointCollObj = { selPointColl: null };
-            parent.notify('freehand-draw', { prop: 'getSelPointColl', onPropertyChange: false,
-                value: { obj: selPointCollObj } });
-            prevObj.selPointColl = extend([], selPointCollObj['selPointColl'], [], true);
-            parent.notify('undo-redo', { prop: 'updateUndoRedoColl', onPropertyChange: false,
-                value: { operation: 'text', previousObj: prevObj, previousObjColl: prevObj.objColl,
-                    previousPointColl: prevObj.pointColl, previousSelPointColl: prevObj.selPointColl,
-                    previousCropObj: prevCropObj, previousText: parent.activeObj.keyHistory,
-                    currentText: parent.textArea.value, previousFilter: null, isCircleCrop: null } });
+            allowUndoRedo = true;
         }
         parent.activeObj.keyHistory = parent.textArea.value;
         parent.textArea.style.display = 'none';
@@ -11538,6 +11624,19 @@ var Shape = /** @__PURE__ @class */ (function () {
         parent.notify('draw', { prop: 'updateActiveObject', onPropertyChange: false, value: { actPoint: parent.activeObj.activePoint, obj: parent.activeObj,
                 isMouseMove: null, x: null, y: null } });
         this.updImgRatioForActObj();
+        if (allowUndoRedo) {
+            this.apply(parent.activeObj.shape, parent.activeObj);
+            parent.objColl.push(extend({}, parent.activeObj, {}, true));
+            parent.notify('undo-redo', { prop: 'updateUndoRedoColl', onPropertyChange: false,
+                value: { operation: 'text', previousObj: prevObj, previousObjColl: prevObj.objColl,
+                    previousPointColl: prevObj.pointColl, previousSelPointColl: prevObj.selPointColl,
+                    previousCropObj: prevCropObj, previousText: parent.activeObj.keyHistory,
+                    currentText: parent.textArea.value, previousFilter: null, isCircleCrop: null } });
+        }
+        else {
+            this.apply(parent.activeObj.shape, parent.activeObj);
+            parent.objColl.push(extend({}, parent.activeObj, {}, true));
+        }
     };
     Shape.prototype.iterateObjColl = function () {
         var parent = this.parent;
@@ -12206,11 +12305,13 @@ var Shape = /** @__PURE__ @class */ (function () {
                     parent.activeObj.pointColl.pop();
                 }
                 this.updatePathRatio(parent.activeObj);
+                parent.objColl.push(parent.activeObj);
                 parent.notify('undo-redo', { prop: 'updateUndoRedoColl', onPropertyChange: false,
                     value: { operation: 'shapeTransform', previousObj: prevObj, previousObjColl: prevObj.objColl,
                         previousPointColl: prevObj.pointColl, previousSelPointColl: prevObj.selPointColl,
                         previousCropObj: prevCropObj, previousText: null,
                         currentText: null, previousFilter: null, isCircleCrop: null } });
+                parent.objColl.pop();
                 parent.notify('selection', { prop: 'mouseUpEventHandler', value: { e: e } });
                 parent.notify('draw', { prop: 'setNewPath', value: { bool: true } });
                 if (parent.objColl[parent.objColl.length - 1]) {
@@ -12632,8 +12733,7 @@ var Shape = /** @__PURE__ @class */ (function () {
         var object = { arrowDimension: null };
         parent.notify('draw', { prop: 'getArrowDimension', onPropertyChange: false, value: { obj: object } });
         var length;
-        var degree = this.getRotDegOfShape(obj);
-        if (degree === 0 || degree === 180 || degree === -180) {
+        if (Math.abs(obj.activePoint.width) > Math.abs(obj.activePoint.height)) {
             length = Math.abs(obj.activePoint.width);
         }
         else {
@@ -12653,8 +12753,7 @@ var Shape = /** @__PURE__ @class */ (function () {
         var object = { arrowDimension: null };
         this.parent.notify('draw', { prop: 'getArrowDimension', onPropertyChange: false, value: { obj: object } });
         var length;
-        var degree = this.getRotDegOfShape(obj);
-        if (degree === 0 || degree === 180 || degree === -180) {
+        if (Math.abs(obj.activePoint.width) > Math.abs(obj.activePoint.height)) {
             length = Math.abs(obj.activePoint.width);
         }
         else {
@@ -14688,6 +14787,7 @@ var Transform = /** @__PURE__ @class */ (function () {
     };
     Transform.prototype.drawPannImage = function (point) {
         var parent = this.parent;
+        var filter = this.lowerContext.filter;
         var destPoints = { startX: parent.img.destLeft, startY: parent.img.destTop, width: parent.img.destWidth,
             height: parent.img.destHeight };
         this.lowerContext.clearRect(0, 0, parent.lowerCanvas.width, parent.lowerCanvas.height);
@@ -14704,6 +14804,7 @@ var Transform = /** @__PURE__ @class */ (function () {
             parent.notify('crop', { prop: 'cropCircle', onPropertyChange: false,
                 value: { context: this.lowerContext, isSave: null, isFlip: true } });
         }
+        this.lowerContext.filter = filter;
         parent.notify('draw', { prop: 'updateCurrTransState', onPropertyChange: false,
             value: { type: 'reverse', isPreventDestination: null, isRotatePan: null } });
         parent.img.destLeft = destPoints.startX;
@@ -16305,7 +16406,8 @@ var ImageEditor = /** @__PURE__ @class */ (function (_super) {
         _this.cropObj = { cropZoom: 0, defaultZoom: 0, totalPannedPoint: { x: 0, y: 0 }, totalPannedClientPoint: { x: 0, y: 0 },
             totalPannedInternalPoint: { x: 0, y: 0 }, tempFlipPanPoint: { x: 0, y: 0 }, activeObj: {}, rotateFlipColl: [],
             degree: 0, currFlipState: '', destPoints: { startX: 0, startY: 0, width: 0, height: 0 },
-            srcPoints: { startX: 0, startY: 0, width: 0, height: 0 }, filter: '', zoomFactor: 0, previousZoomValue: 0 };
+            srcPoints: { startX: 0, startY: 0, width: 0, height: 0 }, filter: '', isBrightAdjust: false,
+            zoomFactor: 0, previousZoomValue: 0 };
         // Stored transformations performed after cropping
         /** @hidden */
         _this.afterCropActions = [];
@@ -16884,7 +16986,7 @@ var ImageEditor = /** @__PURE__ @class */ (function (_super) {
                 totalPannedInternalPoint: { x: 0, y: 0 }, tempFlipPanPoint: { x: 0, y: 0 }, activeObj: {},
                 rotateFlipColl: [], degree: 0, currFlipState: '', zoomFactor: 0, previousZoomValue: 0,
                 destPoints: { startX: 0, startY: 0, width: 0, height: 0 },
-                srcPoints: { startX: 0, startY: 0, width: 0, height: 0 }, filter: '' };
+                srcPoints: { startX: 0, startY: 0, width: 0, height: 0 }, filter: '', isBrightAdjust: false };
             this.afterCropActions = [];
             this.currentFilter = '';
             var obj_1 = { initialZoomValue: false };
@@ -20545,7 +20647,6 @@ var ToolbarModule = /** @__PURE__ @class */ (function () {
             }
             spanElem_3.className = 'e-pen-stroke-width';
             strokeWidthBtn.appendChild(spanElem_3);
-            // eslint-disable-next-line @typescript-eslint/no-this-alias
             var drpDownBtn_2 = new DropDownButton({ items: strokeWidthItems,
                 open: function (args) {
                     if (Browser.isDevice) {
@@ -21476,6 +21577,9 @@ var ToolbarModule = /** @__PURE__ @class */ (function () {
     };
     ToolbarModule.prototype.updateToolbarItems = function () {
         var parent = this.parent;
+        if (!parent.isImageLoaded) {
+            return;
+        }
         var selFillElem = parent.element.querySelector('.e-fill.e-template .e-dropdownbtn-preview');
         var selStrokeElem = parent.element.querySelector('.e-stroke.e-template .e-dropdownbtn-preview');
         var selTextStrokeElem = parent.element.querySelector('.e-text-font-color.e-template .e-dropdownbtn-preview');