@syncfusion/ej2-image-editor 22.2.11 → 23.1.38

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

@@ -14,6 +14,9 @@ export declare class Export {
     private toSVGImg;
     private toBlobFn;
     private exportToCanvas;
+    private drawAnnotation;
+    private downScaleImgCanvas;
+    private updateFrame;
     private downloadImg;
     private exportTransformedImage;
     private exportRotate;

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

@@ -39,6 +39,9 @@ var Export = /** @class */ (function () {
             case 'exportToCanvas':
                 this.exportToCanvas(args.value['object']);
                 break;
+            case 'drawAnnotation':
+                this.drawAnnotation(args.value['context'], args.value['ratio']);
+                break;
         }
     };
     Export.prototype.getModuleName = function () {
@@ -165,13 +168,31 @@ var Export = /** @class */ (function () {
         var parent = this.parent;
         var width;
         var height;
-        if (parent.currSelectionPoint) {
+        if (this.parent.aspectWidth) {
+            if (!isBlazor()) {
+                parent.notify('toolbar', { prop: 'resizeClick', value: { bool: false } });
+            }
+            else {
+                parent.performResizeClick();
+            }
+            parent.currentToolbar = 'resize-toolbar';
+            parent.okBtn();
+            if (parent.transform.degree % 90 === 0 && parent.transform.degree % 180 !== 0) {
+                width = this.parent.aspectHeight;
+                height = this.parent.aspectWidth;
+            }
+            else {
+                width = this.parent.aspectWidth;
+                height = this.parent.aspectHeight;
+            }
+        }
+        else if (parent.currSelectionPoint) {
             width = parent.img.srcWidth;
             height = parent.img.srcHeight;
         }
         else {
-            width = parent.baseImg.width;
-            height = parent.baseImg.height;
+            width = parent.baseImgCanvas.width;
+            height = parent.baseImgCanvas.height;
         }
         var obj = { width: 0, height: 0 };
         parent.notify('crop', { prop: 'calcRatio', onPropertyChange: false,
@@ -199,16 +220,31 @@ var Export = /** @class */ (function () {
         tempCanvas.style.maxWidth = maxDimension.width + 'px';
         tempCanvas.style.maxHeight = maxDimension.height + 'px';
         var temp = this.lowerContext.filter;
-        parent.notify('filter', { prop: 'updateBrightFilter', onPropertyChange: false });
         tempContext.filter = this.lowerContext.filter;
-        tempContext.drawImage(parent.baseImg, parent.img.srcLeft, parent.img.srcTop, parent.img.srcWidth, parent.img.srcHeight, 0, 0, width, height);
+        this.downScaleImgCanvas(tempContext, width, height);
+        this.updateFrame(tempContext);
         this.lowerContext.filter = temp;
         if (parent.transform.degree !== 0 || parent.transform.currFlipState !== '') {
             this.updateSaveContext(tempContext);
             this.exportTransformedImage(tempContext);
         }
+        this.drawAnnotation(tempContext, ratio);
+        if (parent.isCircleCrop) {
+            parent.notify('crop', { prop: 'cropCircle', onPropertyChange: false,
+                value: { context: tempContext, isSave: true, isFlip: null } });
+        }
+        this.updateFrame(tempContext, true);
+        this.lowerContext.filter = tempContextFilter;
+        parent.canvasFilter = tempContextFilter;
+        if (object) {
+            object['canvas'] = tempCanvas;
+        }
+        return tempCanvas;
+    };
+    Export.prototype.drawAnnotation = function (tempContext, ratio) {
+        var parent = this.parent;
         if (parent.objColl.length > 0) {
-            var temp_1 = tempContext.filter;
+            var temp = tempContext.filter;
             tempContext.filter = 'none';
             var tempObjColl = extend([], parent.objColl, [], true);
             for (var i = 0, len = parent.objColl.length; i < len; i++) {
@@ -239,10 +275,15 @@ var Export = /** @class */ (function () {
                             (parent.objColl[i].pointColl[l].y - parent.img.destTop) * ratio.height;
                     }
                 }
+                else if (parent.objColl[i].shape === 'image') {
+                    parent.activeObj = extend({}, parent.objColl[i], {}, true);
+                    parent.notify('selection', { prop: 'upgradeImageQuality', onPropertyChange: false });
+                    parent.objColl[i] = extend({}, parent.activeObj, {}, true);
+                }
                 parent.notify('draw', { prop: 'drawObject', onPropertyChange: false, value: { canvas: 'saveContext', obj: parent.objColl[i], isCropRatio: null,
                         points: null, isPreventDrag: true, saveContext: tempContext, isPreventSelection: null } });
             }
-            tempContext.filter = temp_1;
+            tempContext.filter = temp;
             parent.notify('shape', { prop: 'refreshActiveObj', onPropertyChange: false });
             parent.objColl = tempObjColl;
         }
@@ -263,16 +304,35 @@ var Export = /** @class */ (function () {
                 value: { context: tempContext, points: null } });
             parent.pointColl = tempPointColl;
         }
-        if (parent.isCircleCrop) {
-            parent.notify('crop', { prop: 'cropCircle', onPropertyChange: false,
-                value: { context: tempContext, isSave: true, isFlip: null } });
+    };
+    Export.prototype.downScaleImgCanvas = function (ctx, width, height) {
+        var parent = this.parent;
+        var canvas = parent.baseImgCanvas;
+        var img = parent.baseImg;
+        var obj = { width: 0, height: 0 };
+        parent.notify('transform', { prop: 'calcMaxDimension', onPropertyChange: false,
+            value: { width: img.width, height: img.height, obj: obj, isImgShape: null } });
+        if (obj['width'] > width && obj['height'] > height) {
+            var tempCanvas = parent.createElement('canvas', {
+                id: parent.element.id + '_downScaleCanvas', attrs: { name: 'canvasImage' }
+            });
+            tempCanvas.width = this.parent.img.srcWidth;
+            tempCanvas.height = this.parent.img.srcHeight;
+            tempCanvas.getContext('2d').drawImage(canvas, parent.img.srcLeft, parent.img.srcTop, parent.img.srcWidth, parent.img.srcHeight, 0, 0, tempCanvas.width, tempCanvas.height);
+            parent.notify('draw', { prop: 'downScale', value: { canvas: tempCanvas, width: width, height: height } });
+            ctx.drawImage(tempCanvas, 0, 0);
         }
-        this.lowerContext.filter = tempContextFilter;
-        parent.canvasFilter = tempContextFilter;
-        if (object) {
-            object['canvas'] = tempCanvas;
+        else {
+            ctx.drawImage(parent.baseImgCanvas, parent.img.srcLeft, parent.img.srcTop, parent.img.srcWidth, parent.img.srcHeight, 0, 0, width, height);
+        }
+    };
+    Export.prototype.updateFrame = function (tempContext, isAnnotation) {
+        if (this.parent.frameObj.type !== 'none') {
+            var temp = tempContext.filter;
+            tempContext.filter = 'none';
+            this.parent.notify('draw', { prop: 'applyFrame', value: { ctx: tempContext, frame: this.parent.frameObj.type, preventImg: isAnnotation } });
+            tempContext.filter = temp;
         }
-        return tempCanvas;
     };
     Export.prototype.downloadImg = function (blob, fileName) {
         var a = document.createElement('a');
@@ -333,18 +393,22 @@ var Export = /** @class */ (function () {
         var newWidth;
         var newHeight;
         if (degree % 90 === 0 && degree % 180 !== 0) {
-            newWidth = isNullOrUndefined(this.parent.currSelectionPoint) ? this.parent.baseImg.height : this.parent.img.srcHeight;
-            newHeight = isNullOrUndefined(this.parent.currSelectionPoint) ? this.parent.baseImg.width : this.parent.img.srcWidth;
+            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;
         }
         else if (degree % 180 === 0 || degree === 0) {
-            newWidth = isNullOrUndefined(this.parent.currSelectionPoint) ? this.parent.baseImg.width : this.parent.img.srcWidth;
-            newHeight = isNullOrUndefined(this.parent.currSelectionPoint) ? this.parent.baseImg.height : this.parent.img.srcHeight;
+            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.aspectWidth)) {
+            newWidth = this.parent.aspectWidth;
+            newHeight = this.parent.aspectHeight;
         }
         tempCanvas.width = newWidth;
         tempCanvas.height = newHeight;
         var obj = { width: 0, height: 0 };
         this.parent.notify('transform', { prop: 'calcMaxDimension', onPropertyChange: false,
-            value: { width: newWidth, height: newHeight, obj: obj } });
+            value: { width: newWidth, height: newHeight, obj: obj, isImgShape: null } });
         var maxDimension = obj;
         tempCanvas.style.maxWidth = maxDimension.width + 'px';
         tempCanvas.style.maxHeight = maxDimension.height + 'px';

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

@@ -14,7 +14,6 @@ export declare class Filter {
     private filter;
     private updatePrivateVariables;
     getModuleName(): string;
-    private updateBrightFilter;
     private reset;
     private updateFinetunes;
     private initFilter;

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

@@ -2,9 +2,9 @@ import { isNullOrUndefined, extend } from '@syncfusion/ej2-base';
 var Filter = /** @class */ (function () {
     function Filter(parent) {
         this.adjustmentLevel = { brightness: 0, contrast: 0, hue: 0, opacity: 100, saturation: 0, blur: 0,
-            exposure: 0, sharpen: false, bw: false }; // for toolbar slider value
+            exposure: 0, transparency: 100, sharpen: false, bw: false }; // for toolbar slider value
         this.tempAdjustmentLevel = { brightness: 0, contrast: 0, hue: 0, opacity: 100, saturation: 0, blur: 0,
-            exposure: 0, sharpen: false, bw: false }; // for temp toolbar slider value
+            exposure: 0, transparency: 100, sharpen: false, bw: false }; // for temp toolbar slider value
         this.adjustmentValue = ''; // for internal slider value
         this.isBrightnessAdjusted = false;
         this.appliedFilter = '';
@@ -37,9 +37,6 @@ var Filter = /** @class */ (function () {
             case 'update-finetunes':
                 this.updateFinetunes();
                 break;
-            case 'updateBrightFilter':
-                this.updateBrightFilter();
-                break;
             case 'set-adjustment':
                 this.setAdjustment(args.value['operation']);
                 break;
@@ -59,6 +56,12 @@ var Filter = /** @class */ (function () {
                 this.getCurrentObj(args.value['object']);
                 break;
             case 'getAdjustmentLevel':
+                if (isNullOrUndefined(this.parent.activeObj.imageTransparency)) {
+                    this.adjustmentLevel.transparency = 100;
+                }
+                else {
+                    this.adjustmentLevel.transparency = this.parent.activeObj.imageTransparency * 100;
+                }
                 args.value['obj']['adjustmentLevel'] = this.adjustmentLevel;
                 break;
             case 'setAdjustmentLevel':
@@ -96,19 +99,11 @@ var Filter = /** @class */ (function () {
     Filter.prototype.getModuleName = function () {
         return 'filter';
     };
-    Filter.prototype.updateBrightFilter = function () {
-        var splitWords = this.lowerContext.filter.split(' ');
-        if (this.isBrightnessAdjusted && splitWords.length > 0 && !isNullOrUndefined(splitWords[4])) {
-            var opacityValue = parseFloat(splitWords[4].split('(')[1]);
-            splitWords[4] = 'opacity(' + (opacityValue - 0.3) + ')';
-            this.lowerContext.filter = splitWords.join(' ');
-        }
-    };
     Filter.prototype.reset = function () {
         this.adjustmentLevel = { brightness: 0, contrast: 0, hue: 0, opacity: 100, saturation: 0,
-            blur: 0, exposure: 0, sharpen: false, bw: false };
+            blur: 0, exposure: 0, transparency: 100, sharpen: false, bw: false };
         this.tempAdjustmentLevel = { brightness: 0, contrast: 0, hue: 0, opacity: 100, saturation: 0,
-            blur: 0, exposure: 0, sharpen: false, bw: false };
+            blur: 0, exposure: 0, transparency: 100, sharpen: false, bw: false };
         this.adjustmentValue = this.parent.getDefaultFilter();
         this.isBrightnessAdjusted = false;
         this.appliedFilter = '';
@@ -171,7 +166,6 @@ var Filter = /** @class */ (function () {
             brightnessValue = parseFloat(splitWords[0].split('(')[1]);
         }
         var brightness = this.getFilterValue(this.adjustmentLevel.brightness);
-        var saturation = this.getFilterValue(this.adjustmentLevel.saturation);
         var excludedTypes = ['brightness', 'contrast', 'hue', 'saturation', 'exposure', 'opacity', 'blur'];
         if (excludedTypes.indexOf(type) === -1) {
             if (isNullOrUndefined(isPreview) && (this.adjustmentLevel.sharpen || this.adjustmentLevel.bw)) {
@@ -185,9 +179,6 @@ var Filter = /** @class */ (function () {
                 parent.isUndoRedo = false;
             }
         }
-        if (brightness !== 1) {
-            splitWords[4] = 'opacity(' + (opacityValue - 0.3) + ')';
-        }
         var saturate;
         var bright;
         var saturatePercent;
@@ -195,10 +186,16 @@ var Filter = /** @class */ (function () {
         var saturatePercentage;
         switch (type) {
             case 'brightness':
-                if (parseFloat(splitWords[3].split('(')[1]) !== 100) {
-                    value += 0.1;
-                }
+                value = this.getFilterValue(this.adjustmentLevel.exposure) + (value * 0.005);
                 splitWords[0] = 'brightness(' + value + ')';
+                if (this.adjustmentLevel.brightness !== 0) {
+                    value = (this.adjustmentLevel.opacity / 100) - (this.adjustmentLevel.opacity * 0.3) / 100;
+                    splitWords[4] = 'opacity(' + value + ')';
+                }
+                else {
+                    value = this.adjustmentLevel.opacity / 100;
+                    splitWords[4] = 'opacity(' + value + ')';
+                }
                 this.adjustmentValue = splitWords.join(' ');
                 break;
             case 'contrast':
@@ -211,9 +208,6 @@ var Filter = /** @class */ (function () {
                 break;
             case 'saturation':
                 splitWords[3] = 'saturate(' + value + '%)';
-                if (saturation !== 1) {
-                    splitWords[0] = 'brightness(' + (brightnessValue + 0.09) + ')';
-                }
                 this.adjustmentValue = splitWords.join(' ');
                 break;
             case 'opacity':
@@ -221,6 +215,7 @@ var Filter = /** @class */ (function () {
                     value -= 0.2;
                 }
                 splitWords[4] = 'opacity(' + value + ')';
+                opacityValue = value;
                 this.adjustmentValue = splitWords.join(' ');
                 break;
             case 'blur':
@@ -228,9 +223,6 @@ var Filter = /** @class */ (function () {
                 this.adjustmentValue = splitWords.join(' ');
                 break;
             case 'exposure':
-                if (brightness !== 1) {
-                    splitWords[4] = 'opacity(' + (opacityValue - 0.3) + ')';
-                }
                 if (value > 1) {
                     value -= 1;
                     value += brightness;
@@ -346,19 +338,10 @@ var Filter = /** @class */ (function () {
             parent.notify('draw', { prop: 'updateCurrTransState', onPropertyChange: false,
                 value: { type: 'initial', isPreventDestination: null, isRotatePan: null } });
             this.appliedFilter = this.lowerContext.filter;
-            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);
+            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 (brightness !== 1) {
-                splitWords[4] = 'opacity(' + opacityValue + ')';
-            }
-            else if (saturation !== 1) {
-                splitWords[0] = 'brightness(' + brightnessValue + ')';
-            }
-            if ((type === 'exposure' && brightness !== 1) || (type === 'saturation' && saturation !== 1)) {
-                splitWords[0] = 'brightness(' + brightnessValue + ')';
-            }
             splitWords = this.setTempFilterValue(brightness, isPreview, splitWords, type);
             if (isNullOrUndefined(isPreview)) {
                 this.lowerContext.filter = splitWords.join(' ');
@@ -422,7 +405,6 @@ var Filter = /** @class */ (function () {
         parent.notify('freehand-draw', { prop: 'apply-pen-draw', onPropertyChange: false });
         this.adjustmentLevel["" + type] = value;
         switch (type) {
-            case 'brightness':
             case 'contrast':
             case 'exposure':
                 value = this.getFilterValue(value);
@@ -663,8 +645,9 @@ var Filter = /** @class */ (function () {
         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,
-            destPoints: { startX: 0, startY: 0, width: 0, height: 0 },
-            srcPoints: { startX: 0, startY: 0, width: 0, height: 0 }, filter: '', isBrightAdjust: this.isBrightnessAdjusted };
+            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 };
         obj.cropZoom = parent.transform.cropZoomFactor;
         obj.defaultZoom = parent.transform.defaultZoomFactor;
         obj.zoomFactor = parent.zoomSettings.zoomFactor;
@@ -682,6 +665,10 @@ var Filter = /** @class */ (function () {
         obj.srcPoints = { startX: parent.img.srcLeft, startY: parent.img.srcTop, endX: 0, endY: 0,
             width: parent.img.srcWidth, height: parent.img.srcHeight };
         obj.filter = this.lowerContext.filter;
+        obj.aspectWidth = parent.aspectWidth;
+        obj.aspectHeight = parent.aspectHeight;
+        obj.frame = parent.frameObj.type;
+        obj.frameObj = extend({}, parent.frameObj);
         if (dummyObj) {
             dummyObj['currObj'] = obj;
         }

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

@@ -59,4 +59,5 @@ export declare class FreehandDrawing {
     private freeHandDraw;
     private isFHDIdx;
     private updateCropPtsForSel;
+    private triggerShapeChanging;
 }

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

@@ -251,6 +251,13 @@ var FreehandDrawing = /** @class */ (function () {
         }
         this.isFreehandPointMoved = false;
         EventHandler.add(canvas, 'mousemove touchmove', this.freehandMoveHandler, this);
+        var shapeSettings = { id: 'pen_' + (this.currFHDIdx + 1), type: ShapeType.FreehandDraw,
+            startX: this.freehandDownPoint.x, startY: this.freehandDownPoint.y,
+            strokeColor: this.parent.activeObj.strokeSettings.strokeColor, strokeWidth: this.parent.activeObj.strokeSettings.strokeWidth,
+            points: null };
+        var shapeChangingArgs = { action: 'draw-start', previousShapeSettings: shapeSettings,
+            currentShapeSettings: shapeSettings };
+        this.triggerShapeChanging(shapeChangingArgs);
     };
     FreehandDrawing.prototype.freehandUpHandler = function (e, canvas, context) {
         var rect = canvas.getBoundingClientRect();
@@ -295,13 +302,20 @@ var FreehandDrawing = /** @class */ (function () {
         this.selPoints = [];
         this.pointCounter = 0;
         parent.freehandCounter++;
-        this.currFHDIdx++;
         this.isFreehandDrawing = false;
         parent.notify('undo-redo', { prop: 'updateUndoRedoColl', onPropertyChange: false,
             value: { operation: 'freehand-draw', previousObj: prevObj, previousObjColl: prevObj.objColl,
                 previousPointColl: prevObj.pointColl, previousSelPointColl: prevObj.selPointColl,
                 previousCropObj: prevCropObj, previousText: null,
                 currentText: null, previousFilter: null, isCircleCrop: null } });
+        var shapeSettings = { id: 'pen_' + (this.currFHDIdx + 1), type: ShapeType.FreehandDraw,
+            startX: this.freehandDownPoint.x, startY: this.freehandDownPoint.y,
+            strokeColor: this.parent.activeObj.strokeSettings.strokeColor, strokeWidth: this.parent.activeObj.strokeSettings.strokeWidth,
+            points: this.parent.pointColl[this.currFHDIdx].points };
+        var shapeChangingArgs = { action: 'draw-end', previousShapeSettings: shapeSettings,
+            currentShapeSettings: shapeSettings };
+        this.triggerShapeChanging(shapeChangingArgs);
+        this.currFHDIdx++;
     };
     FreehandDrawing.prototype.freehandMoveHandler = function (e) {
         this.isFreehandPointMoved = true;
@@ -508,39 +522,45 @@ var FreehandDrawing = /** @class */ (function () {
             parent.pointColl[parent.freehandCounter].flipState = parent.transform.currFlipState;
             parent.freehandCounter++;
         }
-        for (var n = 0; n < parent.freehandCounter; n++) {
-            parent.points = extend([], parent.pointColl[n].points);
-            this.pointCounter = 0;
-            var len = parent.points.length;
-            var controlPoint1 = void 0;
-            var controlPoint2 = void 0;
-            var startPoint = void 0;
-            var endPoint = void 0;
-            var minStrokeWidth = void 0;
-            var maxStrokeWidth = void 0;
-            if (len > 0) {
-                context.fillStyle = parent.pointColl[n].strokeColor;
-                minStrokeWidth = maxStrokeWidth = this.penStrokeWidth = parent.pointColl[n].strokeWidth;
-            }
-            if (len === 1) {
-                controlPoint1 = controlPoint2 = startPoint = endPoint = parent.points[0];
-                this.startDraw(context, controlPoint1, controlPoint2, startPoint, endPoint, minStrokeWidth, maxStrokeWidth);
-            }
-            for (var l = 0; l < len - 3; l++) {
-                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;
-                    if (l === 0) {
-                        startPoint = parent.points[l];
-                    }
-                    else {
-                        startPoint = parent.points[l + 1];
-                    }
-                    endPoint = parent.points[l + 2];
+        if (parent.freehandCounter > 0) {
+            for (var n = 0; n < parent.freehandCounter; n++) {
+                parent.points = extend([], parent.pointColl[n].points);
+                this.pointCounter = 0;
+                var len = parent.points.length;
+                var controlPoint1 = void 0;
+                var controlPoint2 = void 0;
+                var startPoint = void 0;
+                var endPoint = void 0;
+                var minStrokeWidth = void 0;
+                var maxStrokeWidth = void 0;
+                if (len > 0) {
+                    context.fillStyle = parent.pointColl[n].strokeColor;
+                    minStrokeWidth = maxStrokeWidth = this.penStrokeWidth = parent.pointColl[n].strokeWidth;
+                }
+                if (len === 1) {
+                    controlPoint1 = controlPoint2 = startPoint = endPoint = parent.points[0];
                     this.startDraw(context, controlPoint1, controlPoint2, startPoint, endPoint, minStrokeWidth, maxStrokeWidth);
                 }
+                for (var l = 0; l < len - 3; l++) {
+                    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;
+                        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);
+                    }
+                }
+                context.closePath();
+            }
+            if (context !== this.upperContext) {
+                parent.notify('draw', { prop: 'applyFrame', value: { ctx: this.lowerContext, frame: parent.frameObj.type, preventImg: true } });
+                this.upperContext.clearRect(0, 0, parent.upperCanvas.width, parent.upperCanvas.height);
             }
-            context.closePath();
         }
         context.filter = temp;
     };
@@ -626,9 +646,11 @@ var FreehandDrawing = /** @class */ (function () {
         if (!isBlazor()) {
             parent.notify('toolbar', { prop: 'refresh-main-toolbar', onPropertyChange: false });
         }
+        else {
+            parent.updateToolbar(parent.element, 'imageLoaded');
+        }
     };
     FreehandDrawing.prototype.selectFhd = function (index) {
-        var _this = this;
         var parent = this.parent;
         parent.notify('selection', { prop: 'setFreehandDrawEditing', onPropertyChange: false, value: { bool: true } });
         if (index || index === 0) {
@@ -659,29 +681,7 @@ var FreehandDrawing = /** @class */ (function () {
                 points: parent.pointColl[this.fhdSelIdx].points };
             var shapeChangingArgs = { action: 'select', previousShapeSettings: shapeSettings,
                 currentShapeSettings: shapeSettings };
-            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.pointColl[_this.fhdSelIdx].points = shapeChangingArgs.currentShapeSettings.points;
-                    _this.freehandRedraw(_this.upperContext);
-                    parent.updateToolbar(parent.element, 'colorToolbar');
-                });
-            }
-            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.pointColl[this.fhdSelIdx].points = shapeChangingArgs.currentShapeSettings.points;
-                this.freehandRedraw(this.upperContext);
-                parent.notify('toolbar', { prop: 'refresh-toolbar', onPropertyChange: false, value: { type: 'pen',
-                        isApplyBtn: null, isCropping: null, isZooming: null, cType: null } });
-            }
+            this.triggerShapeChanging(shapeChangingArgs);
         }
         else {
             parent.okBtn();
@@ -719,7 +719,7 @@ var FreehandDrawing = /** @class */ (function () {
             parent.freehandCounter -= 1;
             this.fhdHovIdx = this.fhdSelIdx = null;
             parent.notify('selection', { prop: 'resetFreehandDrawVariables' });
-            parent.notify('draw', { prop: 'render-image', value: { isMouseWheel: true } });
+            parent.notify('draw', { prop: 'render-image', value: { isMouseWheel: null } });
             if (!isBlazor()) {
                 parent.notify('toolbar', { prop: 'refresh-main-toolbar', onPropertyChange: false });
             }
@@ -1061,6 +1061,42 @@ var FreehandDrawing = /** @class */ (function () {
             }
         }
     };
+    FreehandDrawing.prototype.triggerShapeChanging = function (shapeChangingArgs) {
+        var _this = this;
+        var parent = this.parent;
+        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 = shapeChangingArgs.currentShapeSettings.strokeColor;
+                parent.activeObj.strokeSettings.strokeWidth = shapeChangingArgs.currentShapeSettings.strokeWidth;
+                if (_this.fhdSelID) {
+                    parent.pointColl[_this.fhdSelIdx].strokeColor = shapeChangingArgs.currentShapeSettings.strokeColor;
+                    parent.pointColl[_this.fhdSelIdx].strokeWidth = shapeChangingArgs.currentShapeSettings.strokeWidth;
+                    parent.pointColl[_this.fhdSelIdx].points = shapeChangingArgs.currentShapeSettings.points;
+                }
+                if (shapeChangingArgs.action === 'select') {
+                    _this.freehandRedraw(_this.upperContext);
+                    parent.updateToolbar(parent.element, 'imageLoaded');
+                    parent.updateToolbar(parent.element, 'pen');
+                }
+            });
+        }
+        else {
+            parent.trigger('shapeChanging', shapeChangingArgs);
+            parent.activeObj.strokeSettings.strokeColor = shapeChangingArgs.currentShapeSettings.strokeColor;
+            parent.activeObj.strokeSettings.strokeWidth = shapeChangingArgs.currentShapeSettings.strokeWidth;
+            if (this.fhdSelID) {
+                parent.pointColl[this.fhdSelIdx].strokeColor = shapeChangingArgs.currentShapeSettings.strokeColor;
+                parent.pointColl[this.fhdSelIdx].strokeWidth = shapeChangingArgs.currentShapeSettings.strokeWidth;
+                parent.pointColl[this.fhdSelIdx].points = shapeChangingArgs.currentShapeSettings.points;
+            }
+            if (shapeChangingArgs.action === 'select') {
+                this.freehandRedraw(this.upperContext);
+                parent.notify('toolbar', { prop: 'refresh-toolbar', onPropertyChange: false, value: { type: 'pen',
+                        isApplyBtn: null, isCropping: null, isZooming: null, cType: null } });
+            }
+        }
+    };
     return FreehandDrawing;
 }());
 export { FreehandDrawing };

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

@@ -40,6 +40,7 @@ export declare class Selection {
     private shapeResizingArgs;
     private shapeMovingArgs;
     private selectionResizingArgs;
+    private isImageClarity;
     constructor(parent: ImageEditor);
     destroy(): void;
     private addEventListener;
@@ -69,6 +70,7 @@ export declare class Selection {
     private preventTextDraggingInvertly;
     private preventInverseResize;
     private getScaleRatio;
+    private findImageRatio;
     private updateNWPoints;
     private updateNPoints;
     private updateNEPoints;
@@ -77,6 +79,7 @@ export declare class Selection {
     private updateSWPoints;
     private updateSPoints;
     private updateSEPoints;
+    private resizeImg;
     private adjustNWPoints;
     private adjustNEPoints;
     private adjustSWPoints;
@@ -111,6 +114,7 @@ export declare class Selection {
     private touchStartHandler;
     private unwireEvent;
     private keyDownEventHandler;
+    private performEnterAction;
     private isKeyBoardCrop;
     private beforeSaveEvent;
     private handleScroll;
@@ -122,6 +126,7 @@ export declare class Selection {
     private findTarget;
     private findTargetObj;
     private shapeEvent;
+    private upgradeImageQuality;
     private targetTouches;
     private calculateScale;
     private getDistance;
@@ -137,4 +142,5 @@ export declare class Selection {
     private updatePrevShapeSettings;
     private getRectanglePoints;
     private getTransRotationPoint;
+    private getNumTextValue;
 }