@syncfusion/ej2-image-editor 26.2.14 → 27.1.48

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

@@ -1,3 +1,4 @@
+/* eslint-disable max-len */
 import { extend, isNullOrUndefined } from '@syncfusion/ej2-base';
 import { hideSpinner, showSpinner } from '@syncfusion/ej2-popups';
 var Export = /** @class */ (function () {
@@ -34,6 +35,10 @@ var Export = /** @class */ (function () {
                 break;
             case 'setImageQuality':
                 this.imageQuality = args.value['value'];
+                break;
+            case 'drawAnnotation':
+                this.drawAnnotation(args.value['context'], args.value['ratio']);
+                break;
         }
     };
     Export.prototype.getModuleName = function () {
@@ -51,19 +56,6 @@ var Export = /** @class */ (function () {
         parent.notify('draw', { prop: 'getFileName', onPropertyChange: false, value: { obj: obj } });
         var imageName = obj['fileName'];
         if (!parent.disabled && parent.isImageLoaded) {
-            var dummyObj = { bool: false };
-            parent.notify('selection', { prop: 'getFreehandDrawEditing', onPropertyChange: false, value: { obj: dummyObj } });
-            if (dummyObj['bool']) {
-                parent.notify('freehand-draw', { prop: 'applyFhd', onPropertyChange: false });
-            }
-            if (parent.togglePen) {
-                parent.currObjType.isZoomed = true;
-                parent.notify('shape', { prop: 'apply', onPropertyChange: false, value: { shape: null, obj: null, canvas: null } });
-            }
-            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 } });
-            }
             parent.notify('shape', { prop: 'applyActObj', onPropertyChange: false, value: { isMouseDown: null } });
             var obj_1 = { canvasFilter: this.parent.canvasFilter };
             this.lowerContext.filter = obj_1['canvasFilter'];
@@ -91,6 +83,8 @@ var Export = /** @class */ (function () {
             }
             var saved = { fileName: fileName ? fileName : imageName, fileType: type };
             parent.trigger('saved', saved);
+            var actionArgs = { action: 'save', actionEventArgs: saved };
+            parent.triggerEditCompleteEvent(actionArgs);
             parent.notify('toolbar', { prop: 'refresh-main-toolbar', onPropertyChange: false });
             parent.lowerCanvas.style.left = parent.upperCanvas.style.left = '';
             parent.lowerCanvas.style.top = parent.upperCanvas.style.top = '';
@@ -219,6 +213,9 @@ var Export = /** @class */ (function () {
             this.updateSaveContext(tempContext);
             this.exportTransformedImage(tempContext);
         }
+        if (parent.isSafari) {
+            parent.notify('filter', { prop: 'apply-filter', onPropertyChange: false, value: { context: tempContext } });
+        }
         this.drawAnnotation(tempContext, ratio);
         if (parent.isCircleCrop) {
             parent.notify('crop', { prop: 'cropCircle', onPropertyChange: false,
@@ -262,6 +259,11 @@ var Export = /** @class */ (function () {
         var tempObjColl = extend([], parent.objColl, [], true);
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
         var tempPointColl = extend([], parent.pointColl, [], true);
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        var nonRedact = parent.shapeColl.filter(function (item) { return item.shape !== 'redact'; });
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        var redact = parent.shapeColl.filter(function (item) { return item.shape === 'redact'; });
+        parent.shapeColl = redact.concat(nonRedact);
         for (var i = 0; i < parent.shapeColl.length; i++) {
             if (parent.shapeColl[i].order) {
                 if (parent.shapeColl[i].currIndex && parent.shapeColl[i].currIndex.indexOf('shape') > -1) {
@@ -391,6 +393,12 @@ var Export = /** @class */ (function () {
         var obj = { width: 0, height: 0 };
         parent.notify('transform', { prop: 'calcMaxDimension', onPropertyChange: false,
             value: { width: img.width, height: img.height, obj: obj, isImgShape: null } });
+        var bgObj = { color: null };
+        parent.notify('draw', { prop: 'getImageBackgroundColor', value: { obj: bgObj } });
+        if (bgObj['color'] !== '') {
+            ctx.fillStyle = bgObj['color'];
+            ctx.fillRect(0, 0, ctx.canvas.width, ctx.canvas.height);
+        }
         if (obj['width'] > width && obj['height'] > height) {
             var tempCanvas = parent.createElement('canvas', {
                 id: parent.element.id + '_downScaleCanvas', attrs: { name: 'canvasImage' }

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

@@ -32,4 +32,17 @@ export declare class Filter {
     private finetuneImage;
     private setCurrAdjValue;
     private getCurrentObj;
+    private getValFromPercentage;
+    private getValFromLength;
+    private parseFilterString;
+    private applyFilter;
+    private blur;
+    private brightness;
+    private contrast;
+    private grayscale;
+    private hueRotate;
+    private invert;
+    private opacity;
+    private saturate;
+    private sepia;
 }

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

@@ -100,6 +100,9 @@ var Filter = /** @class */ (function () {
             case 'reset':
                 this.reset();
                 break;
+            case 'apply-filter':
+                this.applyFilter(args.value['context']);
+                break;
         }
     };
     Filter.prototype.updatePrivateVariables = function () {
@@ -599,13 +602,15 @@ var Filter = /** @class */ (function () {
         parent.notify('transform', { prop: 'getPreviousZoomValue', value: { obj: zoomObj } });
         var straightenObj = { zoomFactor: null };
         parent.notify('draw', { prop: 'getStraightenInitZoom', value: { obj: straightenObj } });
+        var bgObj = { color: null };
+        parent.notify('draw', { prop: 'getImageBackgroundColor', value: { obj: bgObj } });
         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, 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, straightenZoom: 0, adjustmentLevel: extend({}, this.tempAdjVal, {}, true),
-            currentFilter: this.tempFilVal };
+            currentFilter: this.tempFilVal, imageSource: '', bgColor: '' };
         obj.cropZoom = parent.transform.cropZoomFactor;
         obj.defaultZoom = parent.transform.defaultZoomFactor;
         obj.zoomFactor = parent.zoomSettings.zoomFactor;
@@ -629,11 +634,277 @@ var Filter = /** @class */ (function () {
         obj.aspectHeight = parent.aspectHeight;
         obj.frame = parent.frameObj.type;
         obj.frameObj = extend({}, parent.frameObj);
+        obj.imageSource = parent.baseImg.src;
+        obj.bgColor = bgObj['color'];
         if (dummyObj) {
             dummyObj['currObj'] = obj;
         }
         return obj;
     };
+    /* Filter safari related codes */
+    Filter.prototype.getValFromPercentage = function (percentage) {
+        var val = parseFloat(percentage);
+        // check for percentages and divide by a hundred
+        if (/%\s*?$/i.test(percentage)) {
+            val /= 100;
+        }
+        return val;
+    };
+    Filter.prototype.getValFromLength = function (length) {
+        return parseFloat(length);
+    };
+    /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
+    Filter.prototype.parseFilterString = function (filterString) {
+        /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
+        var filterArray = [];
+        if (filterString !== 'none') {
+            filterArray = filterString.split(' ').map(function (filter) {
+                var _a = filter.match(/([a-z-]+)\(([^)]+)\)/).slice(1, 3), name = _a[0], value = _a[1];
+                return { filter: name, value: value };
+            });
+        }
+        return filterArray;
+    };
+    Filter.prototype.applyFilter = function (context) {
+        var _a = context.canvas, height = _a.height, width = _a.width;
+        var imageData = context.getImageData(0, 0, width, height);
+        /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
+        var filterArray = this.parseFilterString(context.filter);
+        for (var i = 0, len = filterArray.length; i < len; i++) {
+            switch (filterArray[i].filter) {
+                case 'blur':
+                    imageData = this.blur(context, imageData, filterArray[i].value);
+                    break;
+                case 'brightness':
+                    imageData = this.brightness(imageData, filterArray[i].value);
+                    break;
+                case 'contrast':
+                    imageData = this.contrast(imageData, filterArray[i].value);
+                    break;
+                case 'grayscale':
+                    imageData = this.grayscale(imageData, filterArray[i].value);
+                    break;
+                case 'hue-rotate':
+                    imageData = this.hueRotate(imageData, filterArray[i].value);
+                    break;
+                case 'invert':
+                    imageData = this.invert(imageData, filterArray[i].value);
+                    break;
+                case 'opacity':
+                    imageData = this.opacity(imageData, filterArray[i].value);
+                    break;
+                case 'saturate':
+                    imageData = this.saturate(context, imageData, filterArray[i].value);
+                    break;
+                case 'sepia':
+                    imageData = this.sepia(imageData, filterArray[i].value);
+                    break;
+            }
+        }
+        context.putImageData(imageData, 0, 0);
+    };
+    /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
+    Filter.prototype.blur = function (context, imageData, radius) {
+        if (radius === void 0) { radius = '0'; }
+        var blurRadius = this.getValFromLength(radius);
+        blurRadius = Math.floor(blurRadius);
+        if (blurRadius <= 0) {
+            return imageData;
+        }
+        var _a = context.canvas, height = _a.height, width = _a.width;
+        var data = imageData.data;
+        /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
+        var blurredData = new Uint8ClampedArray(data.length);
+        for (var y = 0; y < height; y++) {
+            for (var x = 0; x < width; x++) {
+                var r = 0;
+                var g = 0;
+                var b = 0;
+                var a = 0;
+                var count = 0;
+                for (var dy = -blurRadius; dy <= blurRadius; dy++) {
+                    for (var dx = -blurRadius; dx <= blurRadius; dx++) {
+                        var nx = x + dx;
+                        var ny = y + dy;
+                        if (nx >= 0 && nx < width && ny >= 0 && ny < height) {
+                            var offset = (ny * width + nx) * 4;
+                            r += data[offset];
+                            g += data[offset + 1];
+                            b += data[offset + 2];
+                            a += data[offset + 3];
+                            count++;
+                        }
+                    }
+                }
+                var i = (y * width + x) * 4;
+                blurredData[i] = r / count;
+                blurredData[i + 1] = g / count;
+                blurredData[i + 2] = b / count;
+                blurredData[i + 3] = a / count;
+            }
+        }
+        for (var i = 0; i < data.length; i++) {
+            data[i] = blurredData[i];
+        }
+        return imageData;
+    };
+    /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
+    Filter.prototype.brightness = function (imageData, percentage) {
+        if (percentage === void 0) { percentage = '1'; }
+        var factor = this.getValFromPercentage(percentage);
+        if (factor !== 1) {
+            var data = imageData.data;
+            var length_1 = data.length;
+            for (var i = 0; i < length_1; i += 4) {
+                data[i + 0] *= factor;
+                data[i + 1] *= factor;
+                data[i + 2] *= factor;
+            }
+        }
+        return imageData;
+    };
+    /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
+    Filter.prototype.contrast = function (imageData, percentage) {
+        if (percentage === void 0) { percentage = '1'; }
+        var factor = this.getValFromPercentage(percentage);
+        if (factor !== 1) {
+            var data = imageData.data;
+            var length_2 = data.length;
+            for (var i = 0; i < length_2; i += 4) {
+                data[i + 0] = ((data[i + 0] / 255 - 0.5) * factor + 0.5) * 255;
+                data[i + 1] = ((data[i + 1] / 255 - 0.5) * factor + 0.5) * 255;
+                data[i + 2] = ((data[i + 2] / 255 - 0.5) * factor + 0.5) * 255;
+            }
+        }
+        return imageData;
+    };
+    /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
+    Filter.prototype.grayscale = function (imageData, percentage) {
+        if (percentage === void 0) { percentage = '0'; }
+        var factor = this.getValFromPercentage(percentage);
+        if (factor > 0) {
+            var data = imageData.data;
+            var length_3 = data.length;
+            for (var i = 0; i < length_3; i += 4) {
+                var r = data[i];
+                var g = data[i + 1];
+                var b = data[i + 2];
+                // Calculate the grayscale value using the luminosity method
+                var gray = 0.299 * r + 0.587 * g + 0.114 * b;
+                // Blend the original color with the grayscale value based on the percentage
+                data[i] = r * (1 - factor) + gray * factor;
+                data[i + 1] = g * (1 - factor) + gray * factor;
+                data[i + 2] = b * (1 - factor) + gray * factor;
+            }
+        }
+        return imageData;
+    };
+    /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
+    Filter.prototype.hueRotate = function (imageData, rotation) {
+        if (rotation === void 0) { rotation = '0deg'; }
+        var data = imageData.data;
+        var angle = parseFloat(rotation) * (Math.PI / 180);
+        if (angle > 0) {
+            var cosA = Math.cos(angle);
+            var sinA = Math.sin(angle);
+            /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
+            var matrix = [
+                0.213 + cosA * 0.787 - sinA * 0.213, 0.715 - cosA * 0.715 - sinA * 0.715, 0.072 - cosA * 0.072 + sinA * 0.928,
+                0.213 - cosA * 0.213 + sinA * 0.143, 0.715 + cosA * 0.285 + sinA * 0.140, 0.072 - cosA * 0.072 - sinA * 0.283,
+                0.213 - cosA * 0.213 - sinA * 0.787, 0.715 - cosA * 0.715 + sinA * 0.715, 0.072 + cosA * 0.928 + sinA * 0.072
+            ];
+            for (var i = 0; i < data.length; i += 4) {
+                var r = data[i];
+                var g = data[i + 1];
+                var b = data[i + 2];
+                // Apply the hue rotation matrix
+                data[i] = matrix[0] * r + matrix[1] * g + matrix[2] * b;
+                data[i + 1] = matrix[3] * r + matrix[4] * g + matrix[5] * b;
+                data[i + 2] = matrix[6] * r + matrix[7] * g + matrix[8] * b;
+            }
+        }
+        return imageData;
+    };
+    /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
+    Filter.prototype.invert = function (imageData, percentage) {
+        if (percentage === void 0) { percentage = '0'; }
+        var factor = this.getValFromPercentage(percentage);
+        if (factor > 0) {
+            var data = imageData.data;
+            var length_4 = data.length;
+            for (var i = 0; i < length_4; i += 4) {
+                data[i + 0] = Math.abs(data[i + 0] - 255 * factor);
+                data[i + 1] = Math.abs(data[i + 1] - 255 * factor);
+                data[i + 2] = Math.abs(data[i + 2] - 255 * factor);
+            }
+        }
+        return imageData;
+    };
+    /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
+    Filter.prototype.opacity = function (imageData, percentage) {
+        if (percentage === void 0) { percentage = '0'; }
+        var factor = this.getValFromPercentage(percentage);
+        if (factor >= 0) {
+            var data = imageData.data;
+            var length_5 = data.length;
+            for (var i = 3; i < length_5; i += 4) {
+                data[i] *= factor;
+            }
+        }
+        return imageData;
+    };
+    /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
+    Filter.prototype.saturate = function (context, imageData, percentage) {
+        if (percentage === void 0) { percentage = '0'; }
+        var factor = this.getValFromPercentage(percentage);
+        if (factor !== 1) {
+            var _a = context.canvas, width = _a.width, height = _a.height;
+            var data = imageData.data;
+            var lumR = (1 - factor) * 0.3086;
+            var lumG = (1 - factor) * 0.6094;
+            var lumB = (1 - factor) * 0.082;
+            // tslint:disable-next-line no-bitwise
+            var shiftW = width << 2;
+            for (var j = 0; j < height; j++) {
+                var offset = j * shiftW;
+                for (var i = 0; i < width; i++) {
+                    // tslint:disable-next-line no-bitwise
+                    var pos = offset + (i << 2);
+                    var r = data[pos + 0];
+                    var g = data[pos + 1];
+                    var b = data[pos + 2];
+                    data[pos + 0] = (lumR + factor) * r + lumG * g + lumB * b;
+                    data[pos + 1] = lumR * r + (lumG + factor) * g + lumB * b;
+                    data[pos + 2] = lumR * r + lumG * g + (lumB + factor) * b;
+                }
+            }
+        }
+        return imageData;
+    };
+    /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
+    Filter.prototype.sepia = function (imageData, percentage) {
+        if (percentage === void 0) { percentage = '0'; }
+        var factor = this.getValFromPercentage(percentage);
+        if (factor > 1) {
+            factor = 1;
+        }
+        if (factor > 0) {
+            var data = imageData.data;
+            var length_6 = data.length;
+            for (var i = 0; i < length_6; i += 4) {
+                var r = data[i + 0];
+                var g = data[i + 1];
+                var b = data[i + 2];
+                data[i + 0] =
+                    (0.393 * r + 0.769 * g + 0.189 * b) * factor + r * (1 - factor);
+                data[i + 1] =
+                    (0.349 * r + 0.686 * g + 0.168 * b) * factor + g * (1 - factor);
+                data[i + 2] =
+                    (0.272 * r + 0.534 * g + 0.131 * b) * factor + b * (1 - factor);
+            }
+        }
+        return imageData;
+    };
     return Filter;
 }());
 export { Filter };

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

@@ -20,6 +20,7 @@ export declare class FreehandDrawing {
     private straightenPoint;
     private prevStraightenObj;
     private straightenPointAngle;
+    private isMasking;
     constructor(parent: ImageEditor);
     destroy(): void;
     private addEventListener;

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

@@ -15,6 +15,7 @@ var FreehandDrawing = /** @class */ (function () {
         this.tempFHDStyles = { strokeColor: null, fillColor: null, strokeWidth: null };
         this.straightenPoint = { x: null, y: null, ratioX: null, ratioY: null };
         this.straightenPointAngle = 0;
+        this.isMasking = false;
         this.parent = parent;
         this.addEventListener();
     }
@@ -115,6 +116,9 @@ var FreehandDrawing = /** @class */ (function () {
             case 'setSelPointColl':
                 this.selPointColl = extend([], args.value['obj']['selPointColl']);
                 break;
+            case 'pushSelPointColl':
+                this.selPointColl.push(extend([], args.value['obj']['selPointColl']));
+                break;
             case 'setFreehandDrawHoveredIndex':
                 this.fhdHovIdx = args.value['index'];
                 break;
@@ -182,6 +186,12 @@ var FreehandDrawing = /** @class */ (function () {
             case 'triggerShapeChanging':
                 this.triggerShapeChanging(args.value['shapeChangingArgs']);
                 break;
+            case 'setMasking':
+                this.isMasking = args.value['value'];
+                break;
+            case 'resetSelPoints':
+                this.selPoints = [];
+                break;
         }
     };
     FreehandDrawing.prototype.updateFhdPvtVar = function () {
@@ -204,6 +214,7 @@ var FreehandDrawing = /** @class */ (function () {
         this.fhdHovIdx = null;
         this.pointCounter = 0;
         this.fhdSelID = null;
+        this.isMasking = false;
         this.penStrokeWidth = undefined;
         this.currFHDIdx = 0;
         this.fhdSelIdx = null;
@@ -331,11 +342,13 @@ var FreehandDrawing = /** @class */ (function () {
         this.pointCounter = 0;
         parent.freehandCounter++;
         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 } });
+        if (!parent.isMaskImage) {
+            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: parent.activeObj.strokeSettings.strokeColor, strokeWidth: this.penStrokeWidth,
@@ -360,6 +373,9 @@ var FreehandDrawing = /** @class */ (function () {
         }
         if (this.isFreehandDrawing) {
             this.upperContext.fillStyle = this.parent.activeObj.strokeSettings.strokeColor;
+            if (this.parent.isMaskImage) {
+                this.upperContext.globalCompositeOperation = 'xor';
+            }
             this.processPoint(x, y, false, this.upperContext);
         }
     };
@@ -709,6 +725,7 @@ var FreehandDrawing = /** @class */ (function () {
             this.tempFHDStyles = tempFHDStyles;
         }
     };
+    // eslint-disable-next-line  @typescript-eslint/no-unused-vars
     FreehandDrawing.prototype.deleteFhd = function (index, isId) {
         var parent = this.parent;
         if (this.isFHDIdx(index)) {
@@ -720,22 +737,11 @@ var FreehandDrawing = /** @class */ (function () {
             parent.pointColl = {};
             this.selPointColl = {};
             var count = 0;
-            if (isNullOrUndefined(isId)) {
-                for (var i = 0; i < parent.freehandCounter; i++) {
-                    if (i !== index) {
-                        parent.pointColl[count] = tempPointColl[i];
-                        this.selPointColl[count] = tempSelPointColl[i];
-                        count++;
-                    }
-                }
-            }
-            else {
-                for (var i = 0; i < parent.freehandCounter; i++) {
-                    if (parseInt(tempPointColl[i].id.split('_')[1], 10) - 1 !== index) {
-                        parent.pointColl[count] = tempPointColl[i];
-                        this.selPointColl[count] = tempSelPointColl[i];
-                        count++;
-                    }
+            for (var i = 0; i < parent.freehandCounter; i++) {
+                if (parseInt(tempPointColl[i].id.split('_')[1], 10) - 1 !== index) {
+                    parent.pointColl[count] = tempPointColl[i];
+                    this.selPointColl[count] = tempSelPointColl[i];
+                    count++;
                 }
             }
             parent.freehandCounter -= 1;
@@ -1082,8 +1088,13 @@ var FreehandDrawing = /** @class */ (function () {
             if (isNullOrUndefined(parent.activeObj.strokeSettings.strokeWidth)) {
                 parent.activeObj.strokeSettings.strokeWidth = 2;
             }
-            parent.notify('toolbar', { prop: 'refresh-toolbar', onPropertyChange: false, value: { type: 'pen',
-                    isApplyBtn: null, isCropping: null, isZooming: null, cType: null } });
+            if (parent.isMaskImage) {
+                parent.notify('toolbar', { prop: 'refresh-main-toolbar', onPropertyChange: false });
+            }
+            else {
+                parent.notify('toolbar', { prop: 'refresh-toolbar', onPropertyChange: false, value: { type: 'pen',
+                        isApplyBtn: null, isCropping: null, isZooming: null, cType: null } });
+            }
         }
         else {
             parent.upperCanvas.style.cursor = parent.cursor = 'default';
@@ -1131,6 +1142,16 @@ var FreehandDrawing = /** @class */ (function () {
         var parent = this.parent;
         var point = parent.pointColl[this.fhdSelIdx];
         parent.trigger('shapeChanging', shapeChangingArgs);
+        if (parent.element.getAttribute('data-value') === 'mask-drawing' && !this.isMasking) {
+            this.isMasking = true;
+            parent.upperCanvas.style.cursor = 'crosshair';
+            parent.notify('draw', { prop: 'updateTempObjColl' });
+            parent.notify('draw', { prop: 'updateTempPointColl' });
+            parent.discard();
+            parent.selectMaskImage();
+            return;
+        }
+        parent.editCompleteArgs = shapeChangingArgs;
         if (shapeChangingArgs.currentShapeSettings.id.indexOf('pen_') === -1 &&
             (shapeChangingArgs.action === 'draw-end' || shapeChangingArgs.action === 'select')) {
             var id = 'pen_' + shapeChangingArgs.currentShapeSettings.id;

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

@@ -48,6 +48,7 @@ export declare class Selection {
     private arrowShape;
     private isPreventShaping;
     private isGrabbing;
+    private isTouchDblClick;
     constructor(parent: ImageEditor);
     destroy(): void;
     private addEventListener;
@@ -61,6 +62,7 @@ export declare class Selection {
     private getMouseCursor;
     private setCursor;
     private getHighestOrder;
+    drawMaskCircle(x: number, y: number): void;
     private setCursorForActObj;
     private setCursorForPath;
     private setCursorForLineArrow;
@@ -70,7 +72,10 @@ export declare class Selection {
     private setCursorForFreehandDrawing;
     private setCursorFromObj;
     private isInside;
+    private preventResizing;
     private updateActivePoint;
+    private isShapeDragOut;
+    private isObjOutsideImg;
     private triggerShapeChange;
     private setDragWidth;
     private setDragHeight;
@@ -163,4 +168,5 @@ export declare class Selection {
     private getTransRotationPoint;
     private getNumTextValue;
     private isValueUpdated;
+    private allowOutofBound;
 }