@syncfusion/ej2-image-editor 22.1.39 → 22.2.5

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

@@ -10,6 +10,7 @@ class Crop {
         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 @@ class Crop {
         this.parent.on('destroyed', this.destroy, this);
     }
     removeEventListener() {
-        this.parent.off('crop', this.crop);
+        this.parent.off('crop', this.cropping);
         this.parent.off('destroyed', this.destroy);
     }
     cropping(args) {
@@ -98,6 +99,7 @@ class Crop {
         this.cropDestPoints = { startX: 0, startY: 0, width: 0, height: 0 };
         this.tempFlipPanPoint = { x: 0, y: 0 };
         this.isPreventScaling = false;
+        this.isInitCrop = false;
     }
     cropImg(isRotateCrop) {
         const parent = this.parent;
@@ -151,7 +153,7 @@ class Crop {
             parent.img.destWidth = maxDimension.width;
             parent.img.destHeight = maxDimension.height;
             const 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';
             const activeObj = extend({}, parent.activeObj, {}, true);
@@ -203,6 +205,8 @@ class Crop {
         parent.notify('transform', { prop: 'setPreventSelect', onPropertyChange: false, value: { bool: true } });
         const coll = extend([], parent.rotateFlipColl, [], true);
         this.panToSelRangle(true);
+        this.resetZoom();
+        const 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 @@ class Crop {
         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 @@ class Crop {
             }
         }
     }
-    flipCrop() {
+    resetZoom() {
         const 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;
-        const tempCurrFlipState = parent.transform.currFlipState;
-        const obj = { flipColl: null };
-        parent.notify('transform', { prop: 'getFlipColl', onPropertyChange: false, value: { obj: obj } });
-        const 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) {
             const zoomFactor = parent.transform.zoomFactor;
             const isUndoRedo = parent.isUndoRedo;
@@ -284,11 +279,25 @@ class Crop {
             parent.isUndoRedo = isUndoRedo;
             parent.notify('draw', { prop: 'resetPanPoints', onPropertyChange: false });
         }
+    }
+    flipCrop() {
+        const 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;
+        const tempCurrFlipState = parent.transform.currFlipState;
+        const obj = { flipColl: null };
+        parent.notify('transform', { prop: 'getFlipColl', onPropertyChange: false, value: { obj: obj } });
+        const 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);
         const 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 (let i = 0, len = parent.objColl.length; i < len; i++) {
             parent.objColl[i].shapeFlip = '';
@@ -309,7 +318,7 @@ class Crop {
         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 @@ class Crop {
     setCurrSelPoints(isSetDimension) {
         const parent = this.parent;
         const destPoint = this.cropDestPoints;
+        const filter = this.lowerContext.filter;
         parent.img.srcLeft = 0;
         parent.img.srcTop = 0;
         parent.img.srcWidth = parent.baseImg.width;
@@ -458,6 +468,7 @@ class Crop {
         }
         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 } });
         let cropObjColl = extend([], parent.objColl, null, true);
@@ -523,6 +534,16 @@ class Crop {
             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 {
             const temp = this.lowerContext.filter;
@@ -538,18 +559,11 @@ class Crop {
         const parent = this.parent;
         const obj = extend({}, parent.currSelectionPoint, null, true);
         parent.currSelectionPoint = null;
-        const panX = parent.transform.degree === 0 ?
-            isReverse ? -parent.cropObj.totalPannedPoint.x : parent.cropObj.totalPannedPoint.x :
-            isReverse ? -parent.cropObj.totalPannedClientPoint.x : parent.cropObj.totalPannedClientPoint.x;
-        const 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 {
+        const panX = parent.transform.degree !== 0 ?
+            isReverse ? -parent.cropObj.totalPannedClientPoint.x : parent.cropObj.totalPannedClientPoint.x : 0;
+        const 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 };
@@ -827,8 +841,6 @@ class Crop {
 
 class Draw {
     constructor(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;
@@ -1048,7 +1060,6 @@ class Draw {
     }
     reset() {
         this.isInitialLoading = this.isErrorImage = this.isNewPath = false;
-        this.cancelObjColl = this.cancelPointColl = [];
         this.isShapeTextInserted = false;
         this.initZoomValue = null;
         this.tempFilter = '';
@@ -1933,12 +1944,30 @@ class Draw {
         canvasDraw.stroke();
         canvasDraw.lineWidth = tempLineWidth;
     }
+    manipulateSaveCtx(canvasDraw, x, y) {
+        if (canvasDraw !== this.lowerContext && canvasDraw !== this.upperContext) {
+            const 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 } } });
+            const ratio = obj;
+            if (x) {
+                x *= (ratio.width);
+            }
+            if (y) {
+                y *= (ratio.height);
+            }
+        }
+        return { x: x, y: y };
+    }
     arrow(canvasDraw, start) {
         const parent = this.parent;
         const actPoint = parent.activeObj.activePoint;
         canvasDraw.lineWidth = (parent.activeObj.strokeSettings.strokeWidth);
-        const x = this.arrowDimension['arrow']['width'] + parent.activeObj.strokeSettings.strokeWidth;
-        const y = this.arrowDimension['arrow']['height'] + parent.activeObj.strokeSettings.strokeWidth;
+        let x = this.arrowDimension['arrow']['width'];
+        let y = this.arrowDimension['arrow']['height'];
+        const 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;
@@ -1973,8 +2002,11 @@ class Draw {
     arrowSolid(canvasDraw, start) {
         const parent = this.parent;
         const actPoint = parent.activeObj.activePoint;
-        const x = this.arrowDimension['arrowSolid']['width'] + parent.activeObj.strokeSettings.strokeWidth;
-        const y = this.arrowDimension['arrowSolid']['height'] + parent.activeObj.strokeSettings.strokeWidth;
+        let x = this.arrowDimension['arrowSolid']['width'];
+        let y = this.arrowDimension['arrowSolid']['height'];
+        const 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;
         const angle = Math.atan2(this.dy, this.dx);
@@ -2024,8 +2056,11 @@ class Draw {
         canvasDraw.lineWidth = (parent.activeObj.strokeSettings.strokeWidth);
         canvasDraw.beginPath();
         canvasDraw.fillStyle = parent.activeObj.strokeSettings.strokeColor;
-        const x = this.arrowDimension['square']['width'] + parent.activeObj.strokeSettings.strokeWidth;
-        const y = this.arrowDimension['square']['height'] + parent.activeObj.strokeSettings.strokeWidth;
+        let x = this.arrowDimension['square']['width'];
+        let y = this.arrowDimension['square']['height'];
+        const 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;
         const angle = Math.atan2(this.dy, this.dx);
@@ -2080,8 +2115,11 @@ class Draw {
     arrowSquareEnd(canvasDraw) {
         const parent = this.parent;
         const actPoint = parent.activeObj.activePoint;
-        const x = this.arrowDimension['square']['width'] + parent.activeObj.strokeSettings.strokeWidth;
-        const y = this.arrowDimension['square']['height'] + parent.activeObj.strokeSettings.strokeWidth;
+        let x = this.arrowDimension['square']['width'];
+        let y = this.arrowDimension['square']['height'];
+        const 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;
         const angle = Math.atan2(this.dy, this.dx);
@@ -2143,7 +2181,9 @@ class Draw {
         if ((start && parent.activeObj.triangleDirection === 'left') ||
             (!start && parent.activeObj.triangleDirection === 'right')) {
             canvasDraw.lineWidth = (parent.activeObj.strokeSettings.strokeWidth);
-            const circleRadius = this.arrowDimension['circle']['width'] + parent.activeObj.strokeSettings.strokeWidth;
+            let circleRadius = this.arrowDimension['circle']['width'];
+            const 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();
@@ -2191,7 +2231,9 @@ class Draw {
         else if ((start && parent.activeObj.triangleDirection === 'right') ||
             (!start && parent.activeObj.triangleDirection === 'left')) {
             canvasDraw.lineWidth = (parent.activeObj.strokeSettings.strokeWidth);
-            const circleRadius = this.arrowDimension['circle']['width'] + parent.activeObj.strokeSettings.strokeWidth;
+            let circleRadius = this.arrowDimension['circle']['width'];
+            const 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();
@@ -2249,7 +2291,9 @@ class Draw {
                 (!start && (parent.activeObj.end === 'circleSolid' && parent.activeObj.start === 'none'))) {
                 this.shapeLine(canvasDraw, actPoint.startX, actPoint.startY, actPoint.endX, actPoint.endY);
             }
-            const circleRadius = this.arrowDimension['circle']['width'] + parent.activeObj.strokeSettings.strokeWidth;
+            let circleRadius = this.arrowDimension['circle']['width'];
+            const 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();
@@ -2270,7 +2314,9 @@ class Draw {
                 !start && (parent.activeObj.end === 'circleSolid' && parent.activeObj.start === 'none')) {
                 this.shapeLine(canvasDraw, actPoint.startX, actPoint.startY, actPoint.endX, actPoint.endY);
             }
-            const circleRadius = this.arrowDimension['circle']['width'] + parent.activeObj.strokeSettings.strokeWidth;
+            let circleRadius = this.arrowDimension['circle']['width'];
+            const 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();
@@ -2296,8 +2342,11 @@ class Draw {
                     (parent.activeObj.end === 'bar' && (parent.activeObj.start !== 'circle' && parent.activeObj.start !== 'square'))))) {
                 this.shapeLine(canvasDraw, actPoint.startX, actPoint.startY, actPoint.endX, actPoint.endY);
             }
-            const x = this.arrowDimension['bar']['width'] + parent.activeObj.strokeSettings.strokeWidth;
-            const y = this.arrowDimension['bar']['height'] + parent.activeObj.strokeSettings.strokeWidth;
+            let x = this.arrowDimension['bar']['width'];
+            let y = this.arrowDimension['bar']['height'];
+            const 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;
             const angle = Math.atan2(this.dy, this.dx);
@@ -2318,8 +2367,11 @@ class Draw {
                 (!start && (parent.activeObj.end === 'bar' && parent.activeObj.start === 'none'))) {
                 this.shapeLine(canvasDraw, actPoint.startX, actPoint.startY, actPoint.endX, actPoint.endY);
             }
-            const x = this.arrowDimension['bar']['width'] + parent.activeObj.strokeSettings.strokeWidth;
-            const y = this.arrowDimension['bar']['height'] + parent.activeObj.strokeSettings.strokeWidth;
+            let x = this.arrowDimension['bar']['width'];
+            let y = this.arrowDimension['bar']['height'];
+            const 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;
             const angle = Math.atan2(this.dy, this.dx);
@@ -3178,8 +3230,6 @@ class Draw {
                     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;
@@ -3488,7 +3538,7 @@ class Draw {
             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 } });
         const isCircleCrop = parent.isCircleCrop;
         let currSelectionPoint;
         if (isNullOrUndefined(parent.currSelectionPoint)) {
@@ -3584,6 +3634,7 @@ class Draw {
             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');
@@ -3911,7 +3962,7 @@ class Draw {
         object['isInitialLoaded'] = this.isInitialLoading;
     }
     getFileExtensionFromURL(url) {
-        const lastDotIndex = url.lastIndexOf(".");
+        const lastDotIndex = url.lastIndexOf('.');
         if (lastDotIndex !== -1) {
             return url.slice(lastDotIndex + 1).toLowerCase();
         }
@@ -4289,7 +4340,6 @@ class Export {
             id: parent.element.id + '_tempCanvas', attrs: { name: 'canvasImage' }
         });
         const tempContext = tempCanvas.getContext('2d');
-        tempContext.filter = this.lowerContext.filter;
         tempCanvas.width = width;
         tempCanvas.height = height;
         const dimObj = { width: 0, height: 0 };
@@ -4298,9 +4348,9 @@ class Export {
         const maxDimension = dimObj;
         tempCanvas.style.maxWidth = maxDimension.width + 'px';
         tempCanvas.style.maxHeight = maxDimension.height + 'px';
-        tempContext.filter = this.lowerContext.filter;
         const 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 !== '') {
@@ -4331,6 +4381,14 @@ class Export {
                 if (parent.objColl[i].shape === 'text') {
                     parent.objColl[i].textSettings.fontSize *= ((ratio.width + ratio.height) / 2);
                 }
+                else if (parent.objColl[i].shape === 'path') {
+                    for (let 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 } });
             }
@@ -4917,8 +4975,6 @@ class Filter {
         parent.notify('freehand-draw', { prop: 'getSelPointColl', onPropertyChange: false, value: { obj: selPointCollObj } });
         prevObj.selPointColl = extend([], selPointCollObj['selPointColl'], [], true);
         this.updateAdj(type, value);
-        const filter = this.lowerContext.filter;
-        this.lowerContext.filter = this.appliedFilter;
         parent.notify('undo-redo', {
             prop: 'updateUndoRedoColl',
             onPropertyChange: false,
@@ -4935,7 +4991,6 @@ class Filter {
                 isCircleCrop: null
             }
         });
-        this.lowerContext.filter = filter;
     }
     setFilter(type) {
         const parent = this.parent;
@@ -4953,15 +5008,12 @@ class Filter {
             value: { obj: selPointCollObj } });
         prevObj.selPointColl = extend([], selPointCollObj['selPointColl'], [], true);
         this.updateAdj(type, null);
-        const 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;
     }
     setAdjustment(type) {
         const splitWords = this.lowerContext.filter.split(' ');
@@ -5114,7 +5166,7 @@ class Filter {
             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;
@@ -5150,6 +5202,7 @@ class FreehandDrawing {
         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();
@@ -5303,6 +5356,7 @@ class FreehandDrawing {
         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;
@@ -5351,7 +5405,12 @@ class FreehandDrawing {
             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);
             }
@@ -5418,6 +5477,7 @@ class FreehandDrawing {
         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 = [];
@@ -5465,15 +5525,21 @@ class FreehandDrawing {
             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) {
-                const p0 = parent.points[this.pointCounter];
-                const p1 = parent.points[this.pointCounter + 1];
-                const p2 = parent.points[this.pointCounter + 2];
-                const 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]);
+                }
+                const p0 = this.dummyPoints[0];
+                const p1 = this.dummyPoints[1];
+                const p2 = this.dummyPoints[2];
+                const 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];
                 let minStrokeWidth = 0.5;
                 let maxStrokeWidth = 5;
                 if (!isNullOrUndefined(this.penStrokeWidth)) {
@@ -5481,6 +5547,7 @@ class FreehandDrawing {
                 }
                 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() };
@@ -5651,7 +5718,12 @@ class FreehandDrawing {
                 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);
                 }
@@ -5777,8 +5849,10 @@ class FreehandDrawing {
             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((shapeChangingArgs) => {
-                    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.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, 'colorToolbar');
@@ -5786,8 +5860,10 @@ class FreehandDrawing {
             }
             else {
                 parent.trigger('shapeChanging', shapeChangingArgs);
-                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.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',
@@ -6106,6 +6182,7 @@ class FreehandDrawing {
         const 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';
@@ -7029,12 +7106,8 @@ class Selection {
         const previousShapeSettings = this.updatePrevShapeSettings();
         const shapeResizingArgs = { action: 'resize', previousShapeSettings: previousShapeSettings };
         const 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 } });
@@ -7233,8 +7306,8 @@ class Selection {
         parent.activeObj.activePoint.width = parent.activeObj.activePoint.endX - parent.activeObj.activePoint.startX;
         parent.activeObj.activePoint.height = parent.activeObj.activePoint.endY - parent.activeObj.activePoint.startY;
         const 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;
             let splitWords;
@@ -7245,7 +7318,7 @@ class Selection {
                 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((shapeResizingArgs) => {
                     parent.notify('shape', { prop: 'updateShapeChangeEventArgs', onPropertyChange: false,
@@ -7253,6 +7326,9 @@ class Selection {
                 });
             }
             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 } });
@@ -7269,9 +7345,7 @@ class Selection {
                         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';
@@ -9180,7 +9254,7 @@ class Selection {
             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((shapeResizingArgs) => {
                         this.parent.notify('shape', { prop: 'updateShapeChangeEventArgs', onPropertyChange: false,
@@ -9599,7 +9673,8 @@ class Selection {
                 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 {
@@ -10344,9 +10419,20 @@ class Selection {
         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))) {
+        const 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;
@@ -10436,7 +10522,9 @@ class Selection {
     setTextBoxStylesToActObj() {
         const 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') {
@@ -11297,14 +11385,10 @@ class Shape {
                 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 });
                 }
@@ -11407,7 +11491,7 @@ class Shape {
         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':
@@ -11483,23 +11567,20 @@ class Shape {
     }
     updateTextFromTextArea() {
         const parent = this.parent;
+        let allowUndoRedo = false;
+        const prevCropObj = extend({}, parent.cropObj, {}, true);
+        const object = { currObj: {} };
+        parent.notify('filter', { prop: 'getCurrentObj', onPropertyChange: false, value: { object: object } });
+        const prevObj = object['currObj'];
+        prevObj.objColl = extend([], parent.objColl, [], true);
+        prevObj.pointColl = extend([], parent.pointColl, [], true);
+        prevObj.afterCropActions = extend([], this.parent.afterCropActions, [], true);
+        const 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) {
-            const prevCropObj = extend({}, parent.cropObj, {}, true);
-            const object = { currObj: {} };
-            parent.notify('filter', { prop: 'getCurrentObj', onPropertyChange: false, value: { object: object } });
-            const prevObj = object['currObj'];
-            prevObj.objColl = extend([], parent.objColl, [], true);
-            prevObj.pointColl = extend([], parent.pointColl, [], true);
-            prevObj.afterCropActions = extend([], this.parent.afterCropActions, [], true);
-            const 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';
@@ -11523,6 +11604,19 @@ class Shape {
         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));
+        }
     }
     iterateObjColl() {
         const parent = this.parent;
@@ -12191,11 +12285,13 @@ class Shape {
                     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]) {
@@ -12617,8 +12713,7 @@ class Shape {
         const object = { arrowDimension: null };
         parent.notify('draw', { prop: 'getArrowDimension', onPropertyChange: false, value: { obj: object } });
         let length;
-        const 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 {
@@ -12637,8 +12732,7 @@ class Shape {
         const object = { arrowDimension: null };
         this.parent.notify('draw', { prop: 'getArrowDimension', onPropertyChange: false, value: { obj: object } });
         let length;
-        const 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 {
@@ -14666,6 +14760,7 @@ class Transform {
     }
     drawPannImage(point) {
         const parent = this.parent;
+        const filter = this.lowerContext.filter;
         const 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);
@@ -14682,6 +14777,7 @@ class Transform {
             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;
@@ -16253,7 +16349,8 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends Component {
         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 = [];
@@ -16829,7 +16926,7 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends Component {
                 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 = '';
             const obj = { initialZoomValue: false };
@@ -20477,7 +20574,6 @@ class ToolbarModule {
             }
             spanElem.className = 'e-pen-stroke-width';
             strokeWidthBtn.appendChild(spanElem);
-            // eslint-disable-next-line @typescript-eslint/no-this-alias
             const drpDownBtn = new DropDownButton({ items: strokeWidthItems,
                 open: (args) => {
                     if (Browser.isDevice) {
@@ -21404,6 +21500,9 @@ class ToolbarModule {
     }
     updateToolbarItems() {
         const parent = this.parent;
+        if (!parent.isImageLoaded) {
+            return;
+        }
         const selFillElem = parent.element.querySelector('.e-fill.e-template .e-dropdownbtn-preview');
         const selStrokeElem = parent.element.querySelector('.e-stroke.e-template .e-dropdownbtn-preview');
         const selTextStrokeElem = parent.element.querySelector('.e-text-font-color.e-template .e-dropdownbtn-preview');