@syncfusion/ej2-image-editor 23.2.6 → 24.1.41

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

@@ -42,6 +42,9 @@ var Export = /** @class */ (function () {
             case 'drawAnnotation':
                 this.drawAnnotation(args.value['context'], args.value['ratio']);
                 break;
+            case 'updateSaveContext':
+                this.updateSaveContext(args.value['context']);
+                break;
         }
     };
     Export.prototype.getModuleName = function () {
@@ -69,7 +72,7 @@ var Export = /** @class */ (function () {
                 parent.currObjType.isZoomed = true;
                 parent.notify('shape', { prop: 'apply', onPropertyChange: false, value: { shape: null, obj: null, canvas: null } });
             }
-            if (parent.textArea.style.display === 'block') {
+            if (parent.textArea.style.display === 'block' || parent.textArea.style.display === 'inline-block') {
                 parent.notify('shape', { prop: 'redrawActObj', onPropertyChange: false,
                     value: { x: null, y: null, isMouseDown: null } });
             }
@@ -168,13 +171,26 @@ var Export = /** @class */ (function () {
         var parent = this.parent;
         var width;
         var height;
+        var tempCropObj = extend({}, parent.cropObj, {}, true);
+        var tempObj = { currObj: {} };
+        parent.notify('filter', { prop: 'getCurrentObj', onPropertyChange: false, value: { object: tempObj } });
+        var prevObj = tempObj['currObj'];
+        prevObj.objColl = extend([], parent.objColl, [], true);
+        prevObj.pointColl = extend([], parent.pointColl, [], true);
+        prevObj.afterCropActions = extend([], parent.afterCropActions, [], true);
+        var selPointCollObj = { selPointColl: null };
+        parent.notify('freehand-draw', { prop: 'getSelPointColl', onPropertyChange: false,
+            value: { obj: selPointCollObj } });
         if (this.parent.aspectWidth) {
+            parent.notify('undo-redo', { prop: 'setPreventUR', value: { bool: true } });
             if (!isBlazor()) {
                 parent.notify('toolbar', { prop: 'resizeClick', value: { bool: false } });
             }
             else {
+                /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
                 parent.performResizeClick();
             }
+            /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
             parent.currentToolbar = 'resize-toolbar';
             parent.okBtn();
             if (parent.transform.degree % 90 === 0 && parent.transform.degree % 180 !== 0) {
@@ -185,6 +201,7 @@ var Export = /** @class */ (function () {
                 width = this.parent.aspectWidth;
                 height = this.parent.aspectHeight;
             }
+            parent.notify('undo-redo', { prop: 'setPreventUR', value: { bool: false } });
         }
         else if (parent.currSelectionPoint) {
             width = parent.img.srcWidth;
@@ -222,9 +239,8 @@ var Export = /** @class */ (function () {
         var temp = this.lowerContext.filter;
         tempContext.filter = this.lowerContext.filter;
         this.downScaleImgCanvas(tempContext, width, height);
-        this.updateFrame(tempContext);
         this.lowerContext.filter = temp;
-        if (parent.transform.degree !== 0 || parent.transform.currFlipState !== '') {
+        if (parent.transform.degree !== 0 || parent.transform.currFlipState !== '' || parent.transform.straighten !== 0) {
             this.updateSaveContext(tempContext);
             this.exportTransformedImage(tempContext);
         }
@@ -239,6 +255,31 @@ var Export = /** @class */ (function () {
         if (object) {
             object['canvas'] = tempCanvas;
         }
+        if (parent.aspectWidth) {
+            parent.objColl = [];
+            parent.pointColl = [];
+            parent.freehandCounter = 0;
+            parent.notify('freehand-draw', { prop: 'setSelPointColl', onPropertyChange: false,
+                value: { obj: { selPointColl: [] } } });
+            parent.notify('draw', { prop: 'setCurrentObj', onPropertyChange: false, value: { obj: prevObj } });
+            prevObj.selPointColl = extend([], selPointCollObj['selPointColl'], [], true);
+            parent.notify('freehand-draw', { prop: 'setSelPointColl', onPropertyChange: false,
+                value: { obj: { selPointColl: prevObj.selPointColl } } });
+            parent.cropObj = tempCropObj;
+            parent.objColl = extend([], prevObj.objColl, [], true);
+            parent.pointColl = extend([], prevObj.pointColl, [], true);
+            parent.freehandCounter = parent.pointColl.length;
+            parent.transform.straighten = 0;
+            this.lowerContext.filter = 'none';
+            parent.notify('shape', { prop: 'zoomObjColl', onPropertyChange: false, value: { isPreventApply: null } });
+            parent.notify('freehand-draw', { prop: 'zoomFHDColl', onPropertyChange: false, value: { isPreventApply: null } });
+            this.lowerContext.filter = prevObj.filter;
+            parent.notify('draw', { prop: 'clearOuterCanvas', onPropertyChange: false, value: { context: this.lowerContext } });
+            if (parent.isCircleCrop || (parent.currSelectionPoint && parent.currSelectionPoint.shape === 'crop-circle')) {
+                parent.notify('crop', { prop: 'cropCircle', onPropertyChange: false,
+                    value: { context: this.lowerContext, isSave: null, isFlip: null } });
+            }
+        }
         return tempCanvas;
     };
     Export.prototype.drawAnnotation = function (tempContext, ratio) {
@@ -248,7 +289,8 @@ var Export = /** @class */ (function () {
             tempContext.filter = 'none';
             var tempObjColl = extend([], parent.objColl, [], true);
             for (var i = 0, len = parent.objColl.length; i < len; i++) {
-                var activePoint = parent.objColl[i].activePoint;
+                var currObj = parent.objColl[i];
+                var activePoint = currObj.activePoint;
                 // Subtracting destination left and top points
                 activePoint.startX -= parent.img.destLeft;
                 activePoint.startY -= parent.img.destTop;
@@ -263,19 +305,19 @@ var Export = /** @class */ (function () {
                 activePoint.endY *= ratio.height;
                 activePoint.width = activePoint.endX - activePoint.startX;
                 activePoint.height = activePoint.endY - activePoint.startY;
-                parent.objColl[i].strokeSettings.strokeWidth *= ((ratio.width + ratio.height) / 2);
-                if (parent.objColl[i].shape === 'text') {
-                    parent.objColl[i].textSettings.fontSize *= ((ratio.width + ratio.height) / 2);
+                currObj.strokeSettings.strokeWidth *= ((ratio.width + ratio.height) / 2);
+                if (currObj.shape === 'text') {
+                    currObj.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;
+                else if (currObj.shape === 'path') {
+                    for (var l = 0; l < currObj.pointColl.length; l++) {
+                        currObj.pointColl[l].x =
+                            (currObj.pointColl[l].x - parent.img.destLeft) * ratio.width;
+                        currObj.pointColl[l].y =
+                            (currObj.pointColl[l].y - parent.img.destTop) * ratio.height;
                     }
                 }
-                else if (parent.objColl[i].shape === 'image') {
+                else if (currObj.shape === 'image') {
                     parent.activeObj = extend({}, parent.objColl[i], {}, true);
                     parent.notify('selection', { prop: 'upgradeImageQuality', onPropertyChange: false });
                     parent.objColl[i] = extend({}, parent.activeObj, {}, true);
@@ -288,6 +330,8 @@ var Export = /** @class */ (function () {
             parent.objColl = tempObjColl;
         }
         if (parent.freehandCounter > 0) {
+            var widthObj = { penStrokeWidth: null };
+            parent.notify('freehand-draw', { prop: 'getPenStrokeWidth', onPropertyChange: false, value: { obj: widthObj } });
             // eslint-disable-next-line
             var tempPointColl = extend({}, parent.pointColl, {}, true);
             for (var n = 0; n < parent.freehandCounter; n++) {
@@ -303,6 +347,7 @@ var Export = /** @class */ (function () {
             parent.notify('freehand-draw', { prop: 'freehandRedraw', onPropertyChange: false,
                 value: { context: tempContext, points: null } });
             parent.pointColl = tempPointColl;
+            parent.notify('freehand-draw', { prop: 'setPenStrokeWidth', onPropertyChange: false, value: { value: widthObj['penStrokeWidth'] } });
         }
     };
     Export.prototype.downScaleImgCanvas = function (ctx, width, height) {
@@ -346,23 +391,26 @@ var Export = /** @class */ (function () {
     Export.prototype.exportTransformedImage = function (tempContext) {
         var parent = this.parent;
         var degree = parent.transform.degree;
-        for (var i = 0, len = parent.rotateFlipColl.length; i < len; i++) {
-            // eslint-disable-next-line @typescript-eslint/no-explicit-any
-            var flip = parent.rotateFlipColl[i];
-            if (typeof flip === 'number') {
-                this.exportRotate(tempContext, flip);
-            }
-            else if (flip === 'horizontal') {
-                this.exportFlip(tempContext, true, false);
-            }
-            else if (flip === 'vertical') {
-                this.exportFlip(tempContext, false, true);
+        if (parent.rotateFlipColl.length > 0) {
+            for (var i = 0, len = parent.rotateFlipColl.length; i < len; i++) {
+                // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                var flip = parent.rotateFlipColl[i];
+                if (typeof flip === 'number') {
+                    this.exportRotate(tempContext, flip);
+                }
+                else if (flip === 'horizontal') {
+                    this.exportFlip(tempContext, true, false);
+                }
+                else if (flip === 'vertical') {
+                    this.exportFlip(tempContext, false, true);
+                }
             }
         }
         parent.transform.degree = degree;
     };
     Export.prototype.exportRotate = function (tempContext, degree) {
         var parent = this.parent;
+        tempContext.clearRect(0, 0, tempContext.canvas.width, tempContext.canvas.height);
         this.setMaxDim(parent.transform.degree, tempContext.canvas);
         tempContext.translate(tempContext.canvas.width / 2, tempContext.canvas.height / 2);
         tempContext.rotate(Math.PI / 180 * degree);
@@ -370,6 +418,7 @@ var Export = /** @class */ (function () {
         this.updateSaveContext(tempContext);
     };
     Export.prototype.exportFlip = function (tempContext, flipHorizontal, flipVertical) {
+        tempContext.clearRect(0, 0, tempContext.canvas.width, tempContext.canvas.height);
         if (flipHorizontal) {
             tempContext.translate(tempContext.canvas.width, 0);
             tempContext.scale(-1, 1);
@@ -393,12 +442,24 @@ var Export = /** @class */ (function () {
         var newWidth;
         var newHeight;
         if (degree % 90 === 0 && degree % 180 !== 0) {
-            newWidth = isNullOrUndefined(this.parent.currSelectionPoint) ? this.parent.baseImgCanvas.height : this.parent.img.srcHeight;
-            newHeight = isNullOrUndefined(this.parent.currSelectionPoint) ? this.parent.baseImgCanvas.width : this.parent.img.srcWidth;
+            if (isNullOrUndefined(this.parent.currSelectionPoint)) {
+                newWidth = this.parent.baseImgCanvas.height;
+                newHeight = this.parent.baseImgCanvas.width;
+            }
+            else {
+                newWidth = this.parent.img.srcHeight;
+                newHeight = this.parent.img.srcWidth;
+            }
         }
         else if (degree % 180 === 0 || degree === 0) {
-            newWidth = isNullOrUndefined(this.parent.currSelectionPoint) ? this.parent.baseImgCanvas.width : this.parent.img.srcWidth;
-            newHeight = isNullOrUndefined(this.parent.currSelectionPoint) ? this.parent.baseImgCanvas.height : this.parent.img.srcHeight;
+            if (isNullOrUndefined(this.parent.currSelectionPoint)) {
+                newWidth = this.parent.baseImgCanvas.width;
+                newHeight = this.parent.baseImgCanvas.height;
+            }
+            else {
+                newWidth = this.parent.img.srcWidth;
+                newHeight = this.parent.img.srcHeight;
+            }
         }
         if (!isNullOrUndefined(this.parent.aspectWidth)) {
             newWidth = this.parent.aspectWidth;

package/src/image-editor/action/filter.d.ts

@@ -6,7 +6,9 @@ export declare class Filter {
     private tempAdjustmentLevel;
     private adjustmentValue;
     private isBrightnessAdjusted;
-    private appliedFilter;
+    private bevelFilter;
+    private tempAdjVal;
+    private tempFilVal;
     constructor(parent: ImageEditor);
     destroy(): void;
     private addEventListener;

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

@@ -7,7 +7,10 @@ var Filter = /** @class */ (function () {
             exposure: 0, transparency: 100, sharpen: false, bw: false }; // for temp toolbar slider value
         this.adjustmentValue = ''; // for internal slider value
         this.isBrightnessAdjusted = false;
-        this.appliedFilter = '';
+        this.bevelFilter = 'none';
+        this.tempAdjVal = { brightness: 0, contrast: 0, hue: 0, opacity: 100, saturation: 0, blur: 0,
+            exposure: 0, transparency: 100, sharpen: false, bw: false };
+        this.tempFilVal = '';
         this.parent = parent;
         this.addEventListener();
     }
@@ -56,11 +59,11 @@ var Filter = /** @class */ (function () {
                 this.getCurrentObj(args.value['object']);
                 break;
             case 'getAdjustmentLevel':
-                if (isNullOrUndefined(this.parent.activeObj.imageTransparency)) {
+                if (isNullOrUndefined(this.parent.activeObj.opacity)) {
                     this.adjustmentLevel.transparency = 100;
                 }
                 else {
-                    this.adjustmentLevel.transparency = this.parent.activeObj.imageTransparency * 100;
+                    this.adjustmentLevel.transparency = this.parent.activeObj.opacity * 100;
                 }
                 args.value['obj']['adjustmentLevel'] = this.adjustmentLevel;
                 break;
@@ -85,6 +88,18 @@ var Filter = /** @class */ (function () {
                     this.isBrightnessAdjusted = false;
                 }
                 break;
+            case 'getBevelFilter':
+                args.value['obj']['bevelFilter'] = this.bevelFilter;
+                break;
+            case 'setBevelFilter':
+                this.bevelFilter = args.value['bevelFilter'];
+                break;
+            case 'setTempAdjVal':
+                this.tempAdjVal = extend({}, this.adjustmentLevel, {}, true);
+                break;
+            case 'setTempFilVal':
+                this.tempFilVal = this.parent.currentFilter;
+                break;
             case 'reset':
                 this.reset();
                 break;
@@ -106,40 +121,23 @@ var Filter = /** @class */ (function () {
             blur: 0, exposure: 0, transparency: 100, sharpen: false, bw: false };
         this.adjustmentValue = this.parent.getDefaultFilter();
         this.isBrightnessAdjusted = false;
-        this.appliedFilter = '';
+        this.bevelFilter = 'none';
+        this.tempFilVal = '';
+        this.tempAdjVal = { brightness: 0, contrast: 0, hue: 0, opacity: 100, saturation: 0,
+            blur: 0, exposure: 0, transparency: 100, sharpen: false, bw: false };
     };
     Filter.prototype.updateFinetunes = function () {
+        var _this = this;
         var parent = this.parent;
         var fs = parent.finetuneSettings;
         if (fs) {
-            if (fs.brightness) {
-                this.adjustmentLevel.brightness = fs.brightness.defaultValue;
-                this.tempAdjustmentLevel.brightness = fs.brightness.defaultValue;
-            }
-            if (fs.contrast) {
-                this.adjustmentLevel.contrast = fs.contrast.defaultValue;
-                this.tempAdjustmentLevel.contrast = fs.contrast.defaultValue;
-            }
-            if (fs.hue) {
-                this.adjustmentLevel.hue = fs.hue.defaultValue;
-                this.tempAdjustmentLevel.hue = fs.hue.defaultValue;
-            }
-            if (fs.saturation) {
-                this.adjustmentLevel.saturation = fs.saturation.defaultValue;
-                this.tempAdjustmentLevel.saturation = fs.saturation.defaultValue;
-            }
-            if (fs.exposure) {
-                this.adjustmentLevel.exposure = fs.exposure.defaultValue;
-                this.tempAdjustmentLevel.exposure = fs.exposure.defaultValue;
-            }
-            if (fs.opacity) {
-                this.adjustmentLevel.opacity = fs.opacity.defaultValue;
-                this.tempAdjustmentLevel.opacity = fs.opacity.defaultValue;
-            }
-            if (fs.blur) {
-                this.adjustmentLevel.blur = fs.blur.defaultValue;
-                this.tempAdjustmentLevel.blur = fs.blur.defaultValue;
-            }
+            var propertiesToSet = ['brightness', 'contrast', 'hue', 'saturation', 'exposure', 'opacity', 'blur'];
+            propertiesToSet.forEach(function (property) {
+                if (fs[property]) {
+                    _this.adjustmentLevel[property] = fs[property].defaultValue;
+                    _this.tempAdjustmentLevel[property] = fs[property].defaultValue;
+                }
+            });
             parent.notify('draw', { prop: 'isInitialLoading', onPropertyChange: false, value: { isInitialLoading: true } });
         }
     };
@@ -157,14 +155,6 @@ var Filter = /** @class */ (function () {
         this.lowerContext.clearRect(0, 0, parent.lowerCanvas.width, parent.lowerCanvas.height);
         var splitWords = this.lowerContext.filter.split(' ');
         var values = [];
-        var opacityValue;
-        var brightnessValue;
-        if (splitWords[4]) {
-            opacityValue = parseFloat(splitWords[4].split('(')[1]);
-        }
-        if (splitWords[0]) {
-            brightnessValue = parseFloat(splitWords[0].split('(')[1]);
-        }
         var brightness = this.getFilterValue(this.adjustmentLevel.brightness);
         var excludedTypes = ['brightness', 'contrast', 'hue', 'saturation', 'exposure', 'opacity', 'blur'];
         if (excludedTypes.indexOf(type) === -1) {
@@ -214,8 +204,10 @@ var Filter = /** @class */ (function () {
                 if (parseFloat(splitWords[0].split('(')[1]) !== 1) {
                     value -= 0.2;
                 }
+                if (value < 0) {
+                    value = 0;
+                }
                 splitWords[4] = 'opacity(' + value + ')';
-                opacityValue = value;
                 this.adjustmentValue = splitWords.join(' ');
                 break;
             case 'blur':
@@ -337,19 +329,37 @@ var Filter = /** @class */ (function () {
             parent.notify('draw', { prop: 'setRotateZoom', onPropertyChange: false, value: { isRotateZoom: true } });
             parent.notify('draw', { prop: 'updateCurrTransState', onPropertyChange: false,
                 value: { type: 'initial', isPreventDestination: null, isRotatePan: null } });
-            this.appliedFilter = this.lowerContext.filter;
+            var tempFilter = void 0;
+            if (parent.frameObj.type === 'bevel') {
+                tempFilter = this.lowerContext.filter;
+                this.bevelFilter = tempFilter;
+            }
+            if (parent.transform.degree === 0 && parent.rotateFlipColl.length > 0) {
+                parent.img.destLeft += parent.panPoint.totalPannedPoint.x;
+                parent.img.destTop += parent.panPoint.totalPannedPoint.y;
+            }
+            parent.img.destLeft += parent.panPoint.totalPannedInternalPoint.x;
+            parent.img.destTop += parent.panPoint.totalPannedInternalPoint.y;
+            if (parent.transform.degree === 0) {
+                parent.notify('transform', { prop: 'setDestPointsForFlipState', onPropertyChange: false });
+            }
             parent.notify('draw', { prop: 'drawImage', onPropertyChange: false });
             parent.notify('draw', { prop: 'updateCurrTransState', onPropertyChange: false,
                 value: { type: 'reverse', isPreventDestination: null, isRotatePan: null } });
             parent.notify('draw', { prop: 'setRotateZoom', onPropertyChange: false, value: { isRotateZoom: false } });
+            if (parent.transform.degree === 0 && parent.rotateFlipColl.length > 0) {
+                parent.img.destLeft += parent.panPoint.totalPannedPoint.x;
+                parent.img.destTop += parent.panPoint.totalPannedPoint.y;
+            }
             splitWords = this.setTempFilterValue(brightness, isPreview, splitWords, type);
             if (isNullOrUndefined(isPreview)) {
                 this.lowerContext.filter = splitWords.join(' ');
             }
             parent.initialAdjustmentValue = splitWords.join(' ');
-            var tempFilter = this.lowerContext.filter;
+            tempFilter = this.lowerContext.filter;
             this.lowerContext.filter = 'brightness(' + 1 + ') ' + 'contrast(' + 100 + '%) ' + 'hue-rotate(' + 0 + 'deg) ' +
                 'saturate(' + 100 + '%) ' + 'opacity(' + 1 + ') ' + 'blur(' + 0 + 'px) ' + 'sepia(0%) ' + 'grayscale(0%) ' + 'invert(0%)';
+            this.bevelFilter = tempFilter;
             parent.notify('shape', { prop: 'iterateObjColl', onPropertyChange: false });
             parent.notify('freehand-draw', { prop: 'freehandRedraw', onPropertyChange: false,
                 value: { context: this.lowerContext, points: null } });
@@ -381,17 +391,7 @@ var Filter = /** @class */ (function () {
     };
     Filter.prototype.getDefaultCurrentFilter = function (splitWords) {
         var values = this.adjustmentValue.split(' ');
-        splitWords = [
-            values[0],
-            values[1],
-            values[2],
-            values[3],
-            values[4],
-            values[5],
-            'sepia(0%)',
-            'grayscale(0%)',
-            'invert(0%)'
-        ];
+        splitWords = [values[0], values[1], values[2], values[3], values[4], values[5], 'sepia(0%)', 'grayscale(0%)', 'invert(0%)'];
         return splitWords;
     };
     Filter.prototype.getFilterValue = function (value) {
@@ -419,24 +419,10 @@ var Filter = /** @class */ (function () {
                 value = this.getSaturationFilterValue(value) * 100;
                 break;
             case 'opacity':
-                if (value >= 50) {
-                    value /= 100;
-                }
-                else if (value === 40) {
-                    value = 0.45;
-                }
-                else if (value === 30) {
-                    value = 0.40;
-                }
-                else if (value === 20) {
-                    value = 0.35;
-                }
-                else if (value === 10) {
-                    value = 0.30;
-                }
-                else if (value === 0) {
-                    value = 0.25;
+                if (value < 10) {
+                    value += 1;
                 }
+                value /= 100;
                 break;
             case 'blur':
                 if (value !== 0) {
@@ -455,22 +441,10 @@ var Filter = /** @class */ (function () {
         parent.notify('freehand-draw', { prop: 'getSelPointColl', onPropertyChange: false, value: { obj: selPointCollObj } });
         prevObj.selPointColl = extend([], selPointCollObj['selPointColl'], [], true);
         this.updateAdj(type, value);
-        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: null,
-                isCircleCrop: null
-            }
-        });
+        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: null, isCircleCrop: null
+            } });
     };
     Filter.prototype.setFilter = function (type) {
         var parent = this.parent;
@@ -484,15 +458,13 @@ var Filter = /** @class */ (function () {
         prevObj.pointColl = extend([], parent.pointColl, [], true);
         prevObj.afterCropActions = extend([], parent.afterCropActions, [], true);
         var selPointCollObj = { selPointColl: null };
-        parent.notify('freehand-draw', { prop: 'getSelPointColl', onPropertyChange: false,
-            value: { obj: selPointCollObj } });
+        parent.notify('freehand-draw', { prop: 'getSelPointColl', onPropertyChange: false, value: { obj: selPointCollObj } });
         prevObj.selPointColl = extend([], selPointCollObj['selPointColl'], [], true);
         this.updateAdj(type, null);
         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,
+            value: { operation: type, previousObj: prevObj, previousObjColl: prevObj.objColl, previousPointColl: prevObj.pointColl,
+                previousSelPointColl: prevObj.selPointColl, previousCropObj: prevCropObj, previousText: null,
                 currentText: null, previousFilter: prevFilter, isCircleCrop: null } });
     };
     Filter.prototype.setAdjustment = function (type) {
@@ -611,6 +583,7 @@ var Filter = /** @class */ (function () {
         }
     };
     Filter.prototype.setCurrAdjValue = function (type, value) {
+        var parent = this.parent;
         this.parent.notify('draw', { prop: 'setImageEdited', onPropertyChange: false });
         switch (type) {
             case 'brightness':
@@ -635,6 +608,8 @@ var Filter = /** @class */ (function () {
                 this.setFilterAdj('exposure', value);
                 break;
         }
+        parent.isFinetuneBtnClick = true;
+        parent.curFinetuneObjEvent = { finetune: parent.toPascalCase(type), value: value };
     };
     Filter.prototype.getCurrentObj = function (dummyObj) {
         var parent = this.parent;
@@ -642,16 +617,20 @@ var Filter = /** @class */ (function () {
         parent.notify('crop', { prop: 'getTempFlipPanPoint', value: { obj: tempFlipPanPointObj } });
         var zoomObj = { previousZoomValue: null };
         parent.notify('transform', { prop: 'getPreviousZoomValue', value: { obj: zoomObj } });
+        var straightenObj = { zoomFactor: null };
+        parent.notify('draw', { prop: 'getStraightenInitZoom', value: { obj: straightenObj } });
         var obj = { 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: '', zoomFactor: 0, previousZoomValue: 0,
+            rotateFlipColl: [], degree: 0, currFlipState: '', zoomFactor: 0, previousZoomValue: 0, straighten: 0,
             destPoints: { startX: 0, startY: 0, width: 0, height: 0 }, frame: 'none',
             srcPoints: { startX: 0, startY: 0, width: 0, height: 0 }, filter: '', isBrightAdjust: this.isBrightnessAdjusted,
-            aspectWidth: null, aspectHeight: null };
+            aspectWidth: null, aspectHeight: null, straightenZoom: 0, adjustmentLevel: extend({}, this.tempAdjVal, {}, true),
+            currentFilter: this.tempFilVal };
         obj.cropZoom = parent.transform.cropZoomFactor;
         obj.defaultZoom = parent.transform.defaultZoomFactor;
         obj.zoomFactor = parent.zoomSettings.zoomFactor;
         obj.previousZoomValue = zoomObj['previousZoomValue'];
+        obj.straightenZoom = straightenObj['zoomFactor'];
         obj.totalPannedPoint = extend({}, parent.panPoint.totalPannedPoint, {}, true);
         obj.totalPannedClientPoint = extend({}, parent.panPoint.totalPannedClientPoint, {}, true);
         obj.totalPannedInternalPoint = extend({}, parent.panPoint.totalPannedInternalPoint, {}, true);
@@ -659,6 +638,7 @@ var Filter = /** @class */ (function () {
         obj.activeObj = extend({}, parent.activeObj, {}, true);
         obj.rotateFlipColl = extend([], parent.rotateFlipColl, [], true);
         obj.degree = parent.transform.degree;
+        obj.straighten = parent.cropObj.straighten;
         obj.currFlipState = parent.transform.currFlipState;
         obj.destPoints = { startX: parent.img.destLeft, startY: parent.img.destTop, endX: 0, endY: 0,
             width: parent.img.destWidth, height: parent.img.destHeight };

package/src/image-editor/action/freehand-draw.d.ts

@@ -17,6 +17,9 @@ export declare class FreehandDrawing {
     private fhdSelID;
     private tempFHDStyles;
     private fhdSelIdx;
+    private straightenPoint;
+    private prevStraightenObj;
+    private straightenPointAngle;
     constructor(parent: ImageEditor);
     destroy(): void;
     private addEventListener;
@@ -60,4 +63,5 @@ export declare class FreehandDrawing {
     private isFHDIdx;
     private updateCropPtsForSel;
     private triggerShapeChanging;
+    private setCenterSelPoints;
 }