@syncfusion/ej2-image-editor 22.1.39 → 22.2.5

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

@@ -11,6 +11,7 @@ var FreehandDrawing = /** @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();
@@ -164,6 +165,7 @@ var FreehandDrawing = /** @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;
@@ -212,7 +214,12 @@ var FreehandDrawing = /** @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);
             }
@@ -279,6 +286,7 @@ var FreehandDrawing = /** @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 = [];
@@ -326,15 +334,21 @@ var FreehandDrawing = /** @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)) {
@@ -342,6 +356,7 @@ var FreehandDrawing = /** @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() };
@@ -512,7 +527,12 @@ var FreehandDrawing = /** @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);
                 }
@@ -639,8 +659,10 @@ var FreehandDrawing = /** @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.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');
@@ -648,8 +670,10 @@ var FreehandDrawing = /** @class */ (function () {
             }
             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',
@@ -968,6 +992,7 @@ var FreehandDrawing = /** @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';

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

@@ -858,12 +858,8 @@ var Selection = /** @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 } });
@@ -1062,8 +1058,8 @@ var Selection = /** @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;
@@ -1074,7 +1070,7 @@ var Selection = /** @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,
@@ -1082,6 +1078,9 @@ var Selection = /** @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 } });
@@ -1098,9 +1097,7 @@ var Selection = /** @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';
@@ -3012,7 +3009,7 @@ var Selection = /** @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,
@@ -3431,7 +3428,8 @@ var Selection = /** @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 {
@@ -4178,9 +4176,20 @@ var Selection = /** @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;
@@ -4270,7 +4279,9 @@ var Selection = /** @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') {

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

@@ -599,14 +599,10 @@ var Shape = /** @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 });
                 }
@@ -709,7 +705,7 @@ var Shape = /** @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':
@@ -785,23 +781,20 @@ var Shape = /** @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';
@@ -825,6 +818,19 @@ var Shape = /** @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;
@@ -1493,11 +1499,13 @@ var Shape = /** @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]) {
@@ -1919,8 +1927,7 @@ var Shape = /** @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 {
@@ -1940,8 +1947,7 @@ var Shape = /** @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 {

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

@@ -1201,6 +1201,7 @@ var Transform = /** @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);
@@ -1217,6 +1218,7 @@ var Transform = /** @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;

package/src/image-editor/base/image-editor-model.d.ts

@@ -406,7 +406,7 @@ export interface ImageEditorModel extends ComponentModel{
      * Specifies the finetune settings option which can be used to perform color adjustments in the image editor control.
      *
      * {% codeBlock src='image-editor/finetuneSettings/index.md' %}{% endcodeBlock %}
-     * 
+     *
      * @remarks
      * A 'FinetuneSettingsModel' value that specifies the the finetune options which are enabled in image editor control.
      * If the property is not specified, then the default values will be applied for minimum, maximum, and value properties for all finetune options.
@@ -428,7 +428,7 @@ export interface ImageEditorModel extends ComponentModel{
      * A 'ZoomSettingsModel' value that specifies the the zoom related options which are enabled in image editor control. The default value is null.
      *
      * {% codeBlock src='image-editor/zoomSettings/index.md' %}{% endcodeBlock %}
-     * 
+     *
      * @remarks
      * If the property is not specified, then the default settings will be applied for all the properties available in zoom settings.
      *
@@ -445,7 +445,7 @@ export interface ImageEditorModel extends ComponentModel{
     /**
      * Specifies the selection settings to customize selection.
      * A 'SelectionSettingsModel' value that specifies the the customization related options which are enabled in image editor control. The default value is null.
-     * 
+     *
      * @remarks
      * If the property is not specified, then the default settings will be applied for all the properties available in selection settings.
      *
@@ -550,7 +550,7 @@ export interface ImageEditorModel extends ComponentModel{
 
     /**
      * Event callback that is raised while updating/refreshing the toolbar
-     * 
+     *
      * {% codeBlock src='image-editor/toolbarUpdating/index.md' %}{% endcodeBlock %}
      *
      * @event toolbarUpdating

package/src/image-editor/base/image-editor.js

@@ -157,7 +157,8 @@ var ImageEditor = /** @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 = [];
@@ -736,7 +737,7 @@ var ImageEditor = /** @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 };

package/src/image-editor/base/interface.d.ts

@@ -454,7 +454,6 @@ export interface ImageEditorClickEventArgs {
 /**
  * Interface for quick access toolbar for the image.
  *
- * @private
  */
 export interface QuickAccessToolbarEventArgs {
     /**
@@ -583,6 +582,10 @@ export interface CurrentObject {
      * Specifies the filter for the image in Image Editor.
      */
     filter: string;
+    /**
+     * Specifies the brightness finetune is adjusted or not for the image in Image Editor.
+     */
+    isBrightAdjust: boolean;
     /**
      * Specifies the object collection in Image Editor.
      */

package/src/image-editor/renderer/toolbar.js

@@ -1935,7 +1935,6 @@ var ToolbarModule = /** @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) {
@@ -2866,6 +2865,9 @@ var ToolbarModule = /** @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');