@syncfusion/ej2-image-editor 22.1.34 → 22.1.37

package/dist/global/index.d.ts

@@ -1,6 +1,6 @@
 /*!
 *  filename: index.d.ts
-*  version : 22.1.34
+*  version : 22.1.37
 *  Copyright Syncfusion Inc. 2001 - 2020. All rights reserved.
 *  Use of this code is subject to the terms of our license.
 *  A copy of the current license can be obtained at any time by e-mailing

package/package.json

@@ -1,8 +1,8 @@
 {
   "_from": "@syncfusion/ej2-image-editor@*",
-  "_id": "@syncfusion/ej2-image-editor@20.17.12",
+  "_id": "@syncfusion/ej2-image-editor@22.1.36",
   "_inBundle": false,
-  "_integrity": "sha512-pTsQwexLvdLUc5RNNUtVQ2zLOHw0k7YCNJaLkYmhZB0eKnwlOqw0oSFER1a+nptcv3yGY9LuHFG9unjS+ZE5Qg==",
+  "_integrity": "sha512-ckJ9WXGq8Evlr/L+ToszUEaW5o17UvtPdFBxX8U+ZNvAQHyWiJeH0hrSMUTBRnXzwXpqwhIuUQBEIvA61tjOPw==",
   "_location": "/@syncfusion/ej2-image-editor",
   "_phantomChildren": {},
   "_requested": {
@@ -23,8 +23,8 @@
     "/@syncfusion/ej2-react-image-editor",
     "/@syncfusion/ej2-vue-image-editor"
   ],
-  "_resolved": "https://nexus.syncfusion.com/repository/ej2-release/@syncfusion/ej2-image-editor/-/ej2-image-editor-20.17.12.tgz",
-  "_shasum": "7203ef40d830837351e7d6d70cde4cfb9105987e",
+  "_resolved": "https://nexus.syncfusion.com/repository/ej2-hotfix-new/@syncfusion/ej2-image-editor/-/ej2-image-editor-22.1.36.tgz",
+  "_shasum": "88ab5df13c6b37ffda89a70889cabfc031c1c454",
   "_spec": "@syncfusion/ej2-image-editor@*",
   "_where": "/jenkins/workspace/elease-automation_release_21.1.1/packages/included",
   "author": {
@@ -33,11 +33,11 @@
   "bundleDependencies": false,
   "dependencies": {
     "@syncfusion/ej2-base": "~22.1.34",
-    "@syncfusion/ej2-buttons": "~22.1.34",
+    "@syncfusion/ej2-buttons": "~22.1.36",
     "@syncfusion/ej2-inputs": "~22.1.34",
-    "@syncfusion/ej2-navigations": "~22.1.34",
-    "@syncfusion/ej2-popups": "~22.1.34",
-    "@syncfusion/ej2-splitbuttons": "~22.1.34"
+    "@syncfusion/ej2-navigations": "~22.1.36",
+    "@syncfusion/ej2-popups": "~22.1.37",
+    "@syncfusion/ej2-splitbuttons": "~22.1.37"
   },
   "deprecated": false,
   "description": "Essential JS 2 ImageEditor",
@@ -67,7 +67,7 @@
     "url": "https://github.com/syncfusion/ej2-javascript-ui-controls/tree/master/controls/imageeditor"
   },
   "typings": "index.d.ts",
-  "version": "22.1.34",
+  "version": "22.1.37",
   "sideEffects": false,
   "homepage": "https://www.syncfusion.com/javascript-ui-controls"
 }

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

@@ -7,6 +7,7 @@ export declare class Crop {
     private croppedDegree;
     private cropDestPoints;
     private tempFlipPanPoint;
+    private isPreventScaling;
     constructor(parent: ImageEditor);
     destroy(): void;
     private addEventListener;

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

@@ -4,6 +4,7 @@ var Crop = /** @class */ (function () {
         this.croppedDegree = 0; // Specifies the degree when crop is performed
         this.cropDestPoints = { startX: 0, startY: 0, width: 0, height: 0 }; // To redraw old image when navigate to crop tab
         this.tempFlipPanPoint = { x: 0, y: 0 };
+        this.isPreventScaling = false;
         this.parent = parent;
         this.addEventListener();
     }
@@ -66,6 +67,9 @@ var Crop = /** @class */ (function () {
                     this.tempFlipPanPoint.y += args.value['point'].y;
                 }
                 break;
+            case 'getPreventScaling':
+                args.value['obj']['bool'] = this.isPreventScaling;
+                break;
             case 'reset':
                 this.reset();
                 break;
@@ -88,6 +92,7 @@ var Crop = /** @class */ (function () {
         this.croppedDegree = 0;
         this.cropDestPoints = { startX: 0, startY: 0, width: 0, height: 0 };
         this.tempFlipPanPoint = { x: 0, y: 0 };
+        this.isPreventScaling = false;
     };
     Crop.prototype.cropImg = function (isRotateCrop) {
         var parent = this.parent;
@@ -705,7 +710,7 @@ var Crop = /** @class */ (function () {
             }
             var transitionArgs = { cancel: false, startPoint: { x: parent.activeObj.activePoint.startX,
                     y: parent.activeObj.activePoint.startY }, endPoint: { x: parent.activeObj.activePoint.endX,
-                    y: parent.activeObj.activePoint.endY } };
+                    y: parent.activeObj.activePoint.endY }, preventScaling: false };
             if (!object_1['isCropToolbar'] && isBlazor() && parent.events && parent.events.cropping.hasDelegate === true) {
                 /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
                 parent.dotNetRef.invokeMethodAsync('CropEventAsync', 'OnCrop', transitionArgs).then(function (args) {
@@ -731,6 +736,12 @@ var Crop = /** @class */ (function () {
                 obj.isCrop = true;
                 var prevCropObj = extend({}, parent.cropObj, {}, true);
                 var prevObj = extend({}, this.prevCropCurrObj, {}, true);
+                if (transitionArgs.preventScaling) {
+                    this.isPreventScaling = true;
+                }
+                else {
+                    this.isPreventScaling = false;
+                }
                 this.cropImg();
                 parent.transform.zoomFactor = 0;
                 parent.zoomSettings.zoomFactor = 1;

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

@@ -87,6 +87,7 @@ export declare class Draw {
     private drawImgToCanvas;
     private renderImage;
     private imageOnLoad;
+    private errorLoading;
     private updateCanvas;
     private performCancel;
     private cancelItems;
@@ -94,7 +95,6 @@ export declare class Draw {
     private cancelText;
     private cancelShape;
     private cancelSelection;
-    private cancelZoom;
     private updateFlipPan;
     private select;
     private drawNewSelection;
@@ -119,4 +119,7 @@ export declare class Draw {
     private getFileExtensionFromURL;
     private fileSelect;
     private checkToolbarTemplate;
+    private moveToSelectionRange;
+    private isSelectionBiggerThanCanvas;
+    private isSelectionOutsideCanvas;
 }

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

@@ -173,10 +173,6 @@ var Draw = /** @class */ (function () {
             case 'setPrevActObj':
                 this.prevActObj = args.value['prevActObj'];
                 break;
-            case 'getZoomCrop':
-                args.value['obj']['width'] = this.zoomCrop.width;
-                args.value['obj']['height'] = this.zoomCrop.height;
-                break;
             case 'setZoomCropWidth':
                 this.zoomCrop.width = args.value['width'];
                 this.zoomCrop.height = args.value['height'];
@@ -205,6 +201,9 @@ var Draw = /** @class */ (function () {
             case 'setArrowDimension':
                 this.arrowDimension = args.value['arrowDimension'];
                 break;
+            case 'moveToSelectionRange':
+                this.moveToSelectionRange(args.value['type'], args.value['activeObj']);
+                break;
         }
     };
     Draw.prototype.getModuleName = function () {
@@ -492,8 +491,10 @@ var Draw = /** @class */ (function () {
     };
     Draw.prototype.adjToCenter = function () {
         var parent = this.parent;
-        var diffX = ((parent.lowerCanvas.width) / 2) - (parent.activeObj.activePoint.endX - parent.activeObj.activePoint.width / 2);
-        var diffY = ((parent.lowerCanvas.height) / 2) - (parent.activeObj.activePoint.endY - parent.activeObj.activePoint.height / 2);
+        var diffX = ((parent.lowerCanvas.width) / 2) - (parent.activeObj.activePoint.endX -
+            parent.activeObj.activePoint.width / 2);
+        var diffY = ((parent.lowerCanvas.height) / 2) - (parent.activeObj.activePoint.endY -
+            parent.activeObj.activePoint.height / 2);
         parent.activeObj.activePoint.startX += diffX;
         parent.activeObj.activePoint.endX += diffX;
         parent.activeObj.activePoint.startY += diffY;
@@ -1940,11 +1941,22 @@ var Draw = /** @class */ (function () {
             // proxy.reset();
             // proxy.parent.baseImg.src = proxy.baseImgSrc;
             proxy.isErrorImage = true;
+            proxy.errorLoading();
         };
     };
+    Draw.prototype.errorLoading = function () {
+        var parent = this.parent;
+        var fileOpened = { fileName: null, fileType: null, isValidImage: false };
+        if (isBlazor() && parent.events && parent.events.fileOpened.hasDelegate === true) {
+            parent.dotNetRef.invokeMethodAsync('FileOpenEventAsync', 'FileOpened', fileOpened);
+        }
+        else {
+            parent.trigger('fileOpened', fileOpened);
+        }
+    };
     Draw.prototype.updateCanvas = function () {
         var parent = this.parent;
-        var fileOpened = { fileName: this.fileName, fileType: this.fileType };
+        var fileOpened = { fileName: this.fileName, fileType: this.fileType, isValidImage: true };
         parent.img.srcWidth = parent.baseImg.width;
         parent.img.srcHeight = parent.baseImg.height;
         var obj = { width: 0, height: 0 };
@@ -2123,10 +2135,6 @@ var Draw = /** @class */ (function () {
         else if (isCropSelection) {
             this.cancelSelection();
         }
-        else if ((parent.transform.zoomFactor !== this.tempZoomFactor) || isCropSelection &&
-            isNullOrUndefined(parent.currSelectionPoint)) {
-            this.cancelZoom();
-        }
         else {
             parent.notify('shape', { prop: 'refreshActiveObj', onPropertyChange: false });
             this.upperContext.clearRect(0, 0, parent.upperCanvas.width, parent.upperCanvas.height);
@@ -2146,7 +2154,6 @@ var Draw = /** @class */ (function () {
     };
     Draw.prototype.cancelPen = function () {
         var parent = this.parent;
-        var isCropSelection = false;
         this.upperContext.clearRect(0, 0, parent.upperCanvas.width, parent.upperCanvas.height);
         parent.togglePen = false;
         parent.upperCanvas.style.cursor = parent.cursor = 'default';
@@ -2269,114 +2276,6 @@ var Draw = /** @class */ (function () {
             }
         }
     };
-    Draw.prototype.cancelZoom = function () {
-        var parent = this.parent;
-        var length = parent.transform.cropZoomFactor - this.tempZoomFactor;
-        parent.transform.zoomFactor = parent.transform.cropZoomFactor;
-        if (isNullOrUndefined(parent.cropObj.activeObj.shape)) {
-            if ((parent.transform.degree === 0 && parent.panPoint.totalPannedPoint.x === 0 && parent.panPoint.totalPannedPoint.y === 0)
-                || (parent.transform.degree !== 0 && parent.panPoint.totalPannedInternalPoint.x === 0 &&
-                    parent.panPoint.totalPannedInternalPoint.y === 0 && parent.panPoint.totalPannedClientPoint.x === 0 &&
-                    parent.panPoint.totalPannedClientPoint.y === 0)) {
-                this.upperContext.clearRect(0, 0, parent.upperCanvas.width, parent.upperCanvas.height);
-                parent.notify('shape', { prop: 'refreshActiveObj', onPropertyChange: false });
-                if (length > 0) {
-                    parent.notify('transform', { prop: 'zoomAction', onPropertyChange: false,
-                        value: { zoomFactor: -length, zoomPoint: null } });
-                }
-                else {
-                    parent.notify('transform', { prop: 'zoomAction', onPropertyChange: false,
-                        value: { zoomFactor: Math.abs(length), zoomPoint: null } });
-                }
-                parent.transform.cropZoomFactor = this.tempZoomFactor;
-                parent.currObjType.isCustomCrop = false;
-                parent.upperCanvas.style.cursor = parent.cursor = 'default';
-                parent.currObjType.isCustomCrop = false;
-                this.tempStrokeSettings = { strokeColor: '#fff', fillColor: '', strokeWidth: null };
-                var eventargs = { type: 'main', isApplyBtn: null, isCropping: false, isZooming: null };
-                if (!isBlazor()) {
-                    parent.notify('toolbar', { prop: 'refresh-toolbar', onPropertyChange: false, value: eventargs });
-                }
-                else {
-                    parent.updateToolbar(parent.element, 'imageLoaded');
-                }
-                return;
-            }
-        }
-        if (isNullOrUndefined(parent.cropObj.activeObj.shape)) {
-            if (parent.transform.degree === 0) {
-                var activeObj = extend({}, parent.activeObj, {});
-                parent.img.destLeft += (-parent.panPoint.totalPannedPoint.x);
-                parent.img.destTop += (-parent.panPoint.totalPannedPoint.y);
-                parent.notify('transform', { prop: 'drawPannImage', onPropertyChange: false,
-                    value: { point: { x: -parent.panPoint.totalPannedPoint.x, y: -parent.panPoint.totalPannedPoint.y } } });
-                this.updateFlipPan(activeObj);
-                parent.panPoint.totalPannedPoint = { x: 0, y: 0 };
-            }
-            else {
-                parent.panPoint.totalPannedClientPoint = { x: -parent.panPoint.totalPannedClientPoint.x,
-                    y: -parent.panPoint.totalPannedClientPoint.y };
-                parent.panPoint.totalPannedInternalPoint = { x: -parent.panPoint.totalPannedInternalPoint.x,
-                    y: -parent.panPoint.totalPannedInternalPoint.y };
-                parent.notify('transform', { prop: 'rotatePan', onPropertyChange: false,
-                    value: { isCropSelection: true, isDefaultZoom: null } });
-                parent.panPoint.totalPannedClientPoint = { x: 0, y: 0 };
-                parent.panPoint.totalPannedInternalPoint = { x: 0, y: 0 };
-                parent.panPoint.currentPannedPoint = { x: 0, y: 0 };
-            }
-            parent.notify('shape', { prop: 'refreshActiveObj', onPropertyChange: false });
-            this.upperContext.clearRect(0, 0, parent.upperCanvas.width, parent.upperCanvas.height);
-            if (length > 0) {
-                parent.notify('transform', { prop: 'zoomAction', onPropertyChange: false,
-                    value: { zoomFactor: -length, zoomPoint: null } });
-            }
-            else {
-                parent.notify('transform', { prop: 'zoomAction', onPropertyChange: false,
-                    value: { zoomFactor: Math.abs(length), zoomPoint: null } });
-            }
-            parent.transform.cropZoomFactor = this.tempZoomFactor;
-        }
-        else {
-            this.isCancelAction = true;
-            parent.objColl = [];
-            parent.pointColl = [];
-            var freehandCounter = parent.freehandCounter;
-            parent.freehandCounter = 0;
-            var object = { selPointColl: null };
-            parent.notify('freehand-draw', { prop: 'getSelPointColl', onPropertyChange: false,
-                value: { obj: object } });
-            var cropSelPointColl = object['selPointColl'];
-            parent.notify('freehand-draw', { prop: 'setSelPointColl', onPropertyChange: false,
-                value: { obj: { selPointColl: [] } } });
-            var cropObj = extend({}, parent.cropObj, {});
-            var afterCropActions = extend([], parent.afterCropActions, {}, true);
-            this.setCurrentObj();
-            parent.notify('crop', { prop: 'cropImg', onPropertyChange: false, value: { isRotateCrop: null } });
-            parent.cropObj = cropObj;
-            parent.afterCropActions = afterCropActions;
-            parent.objColl = extend([], this.cancelObjColl, [], true);
-            parent.pointColl = extend([], this.cancelPointColl, [], true);
-            parent.freehandCounter = freehandCounter;
-            parent.notify('freehand-draw', { prop: 'setSelPointColl', onPropertyChange: false,
-                value: { obj: { selPointColl: cropSelPointColl } } });
-            parent.notify('shape', { prop: 'iterateObjColl', onPropertyChange: false });
-            parent.notify('freehand-draw', { prop: 'freehandRedraw', onPropertyChange: false,
-                value: { context: this.lowerContext, points: null } });
-            this.clearOuterCanvas(this.lowerContext);
-            if (parent.isCircleCrop) {
-                parent.notify('crop', { prop: 'cropCircle', onPropertyChange: false,
-                    value: { context: this.lowerContext, isSave: null, isFlip: null } });
-            }
-            this.isCancelAction = false;
-        }
-        parent.transform.zoomFactor = parent.transform.defaultZoomFactor;
-        if (!isBlazor()) {
-            parent.notify('toolbar', { prop: 'enable-disable-btns', onPropertyChange: false });
-        }
-        else {
-            parent.updateToolbar(parent.element, 'enableDisableToolbarBtn');
-        }
-    };
     Draw.prototype.updateFlipPan = function (tempSelectionObj) {
         var parent = this.parent;
         if (parent.transform.currFlipState !== '') {
@@ -3038,13 +2937,8 @@ var Draw = /** @class */ (function () {
             parent.notify('toolbar', { prop: 'getDefToolbarItems', value: { obj: obj } });
             if (obj['defToolbarItems'].length === 0 &&
                 (isNullOrUndefined(document.getElementById(parent.element.id + '_toolbar')))) {
-                if (isNullOrUndefined(parent.toolbarTemplate)) {
-                    parent.notify('toolbar', { prop: 'setToolbarHeight', value: { height: 0 } });
-                }
-                else if (parent.element.querySelector('#' + parent.element.id + '_toolbarArea')) {
-                    var height = parent.element.querySelector('#' + parent.element.id + '_toolbarArea').clientHeight;
-                    parent.notify('toolbar', { prop: 'setToolbarHeight', value: { height: height } });
-                }
+                var height = parent.element.querySelector('#' + parent.element.id + '_toolbarArea').clientHeight;
+                parent.notify('toolbar', { prop: 'setToolbarHeight', value: { height: height } });
             }
         }
         else {
@@ -3201,6 +3095,7 @@ var Draw = /** @class */ (function () {
             var fileData = filesData;
             var fileExtension = fileData.name && fileData.name.split('.')[1].toLowerCase();
             if (fileExtension && ['jpg', 'jpeg', 'png', 'svg'].indexOf(fileExtension) === -1) {
+                this.errorLoading();
                 return;
             }
             showSpinner(parent.element);
@@ -3248,6 +3143,121 @@ var Draw = /** @class */ (function () {
         this.imageOnLoad(url.toString());
         inputElement.value = '';
     };
+    Draw.prototype.moveToSelectionRange = function (type, activeObj) {
+        var parent = this.parent;
+        if (parent.activeObj.shape) {
+            if (type === 'rotateleft' || type === 'rotateright') {
+                var zoomFactor = parent.transform.zoomFactor;
+                parent.objColl.push(parent.activeObj);
+                parent.notify('shape', { prop: 'refreshActiveObj', onPropertyChange: false });
+                if (parent.transform.degree % 90 === 0 && parent.transform.degree % 180 !== 0) {
+                    if (parent.objColl[parent.objColl.length - 1].activePoint.width < activeObj.activePoint.height) {
+                        for (var i = 2; i < parent.zoomSettings.maxZoomFactor; i++) {
+                            if (parent.objColl[parent.objColl.length - 1].activePoint.width >= activeObj.activePoint.height ||
+                                this.isSelectionBiggerThanCanvas(parent.objColl[parent.objColl.length - 1]) ||
+                                this.isSelectionOutsideCanvas(parent.objColl[parent.objColl.length - 1])) {
+                                if (!isNullOrUndefined(zoomFactor)) {
+                                    parent.notify('transform', { prop: 'zoomAction', onPropertyChange: false,
+                                        value: { zoomFactor: -0.1, zoomPoint: null } });
+                                }
+                                break;
+                            }
+                            zoomFactor += 0.1;
+                            parent.notify('transform', { prop: 'zoomAction', onPropertyChange: false,
+                                value: { zoomFactor: zoomFactor, zoomPoint: null } });
+                        }
+                    }
+                    else {
+                        for (var i = 2; i < parent.zoomSettings.maxZoomFactor; i++) {
+                            if (parent.objColl[parent.objColl.length - 1].activePoint.width >= activeObj.activePoint.height ||
+                                this.isSelectionBiggerThanCanvas(parent.objColl[parent.objColl.length - 1]) ||
+                                this.isSelectionOutsideCanvas(parent.objColl[parent.objColl.length - 1])) {
+                                if (!isNullOrUndefined(zoomFactor)) {
+                                    parent.notify('transform', { prop: 'zoomAction', onPropertyChange: false,
+                                        value: { zoomFactor: 0.1, zoomPoint: null } });
+                                }
+                                break;
+                            }
+                            zoomFactor -= .1;
+                            parent.notify('transform', { prop: 'zoomAction', onPropertyChange: false,
+                                value: { zoomFactor: zoomFactor, zoomPoint: null } });
+                        }
+                    }
+                }
+                else {
+                    if (parent.objColl[parent.objColl.length - 1].activePoint.height < activeObj.activePoint.width) {
+                        for (var i = 2; i < parent.zoomSettings.maxZoomFactor; i++) {
+                            if (parent.objColl[parent.objColl.length - 1].activePoint.height >= activeObj.activePoint.width ||
+                                this.isSelectionBiggerThanCanvas(parent.objColl[parent.objColl.length - 1]) ||
+                                this.isSelectionOutsideCanvas(parent.objColl[parent.objColl.length - 1])) {
+                                if (!isNullOrUndefined(zoomFactor)) {
+                                    parent.notify('transform', { prop: 'zoomAction', onPropertyChange: false,
+                                        value: { zoomFactor: -0.1, zoomPoint: null } });
+                                }
+                                break;
+                            }
+                            zoomFactor += 0.1;
+                            parent.notify('transform', { prop: 'zoomAction', onPropertyChange: false,
+                                value: { zoomFactor: zoomFactor, zoomPoint: null } });
+                        }
+                    }
+                    else {
+                        for (var i = 2; i < parent.zoomSettings.maxZoomFactor; i++) {
+                            if (parent.objColl[parent.objColl.length - 1].activePoint.height >= activeObj.activePoint.width ||
+                                this.isSelectionBiggerThanCanvas(parent.objColl[parent.objColl.length - 1]) ||
+                                this.isSelectionOutsideCanvas(parent.objColl[parent.objColl.length - 1])) {
+                                if (!isNullOrUndefined(zoomFactor)) {
+                                    parent.notify('transform', { prop: 'zoomAction', onPropertyChange: false,
+                                        value: { zoomFactor: 0.1, zoomPoint: null } });
+                                }
+                                break;
+                            }
+                            zoomFactor -= .1;
+                            parent.notify('transform', { prop: 'zoomAction', onPropertyChange: false,
+                                value: { zoomFactor: zoomFactor, zoomPoint: null } });
+                        }
+                    }
+                }
+                var panX = (parent.lowerCanvas.clientWidth / 2) - (parent.objColl[parent.objColl.length - 1].activePoint.startX +
+                    (parent.objColl[parent.objColl.length - 1].activePoint.width / 2));
+                var panY = (parent.lowerCanvas.clientHeight / 2) - (parent.objColl[parent.objColl.length - 1].activePoint.startY +
+                    (parent.objColl[parent.objColl.length - 1].activePoint.height / 2));
+                if (parent.transform.degree === 0) {
+                    parent.img.destLeft += panX;
+                    parent.img.destTop += panY;
+                    parent.notify('transform', { prop: 'drawPannImage', value: { point: { x: panX, y: panY } } });
+                }
+                else {
+                    parent.panPoint.currentPannedPoint = { x: panX, y: panY };
+                    parent.notify('transform', { prop: 'drawPannedImage', value: { xDiff: panX, yDiff: panY } });
+                    parent.panPoint.currentPannedPoint = { x: 0, y: 0 };
+                }
+                parent.notify('transform', { prop: 'setTempPanMove', onPropertyChange: false,
+                    value: { point: null } });
+                parent.activeObj = extend({}, parent.objColl[parent.objColl.length - 1]);
+                parent.objColl.pop();
+                parent.notify('draw', { prop: 'drawObject', onPropertyChange: false, value: { canvas: 'duplicate', obj: parent.activeObj } });
+            }
+        }
+    };
+    Draw.prototype.isSelectionBiggerThanCanvas = function (obj) {
+        var isBigger = false;
+        if (obj.activePoint.startX <= this.parent.img.destLeft ||
+            obj.activePoint.startY <= this.parent.img.destTop ||
+            obj.activePoint.endX >= this.parent.img.destLeft + this.parent.img.destWidth ||
+            obj.activePoint.endY >= this.parent.img.destTop + this.parent.img.destHeight) {
+            isBigger = true;
+        }
+        return isBigger;
+    };
+    Draw.prototype.isSelectionOutsideCanvas = function (obj) {
+        var isOutside = false;
+        if ((obj.activePoint.height < this.parent.lowerCanvas.height - this.parent.toolbarHeight) ||
+            (obj.activePoint.width < this.parent.lowerCanvas.width)) {
+            isOutside = true;
+        }
+        return isOutside;
+    };
     return Draw;
 }());
 export { Draw };

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

@@ -89,7 +89,7 @@ var Filter = /** @class */ (function () {
     };
     Filter.prototype.updatePrivateVariables = function () {
         var parent = this.parent;
-        if (!isNullOrUndefined(parent.lowerCanvas)) {
+        if (parent.lowerCanvas) {
             this.lowerContext = parent.lowerCanvas.getContext('2d');
         }
     };

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

@@ -702,7 +702,7 @@ var FreehandDrawing = /** @class */ (function () {
     FreehandDrawing.prototype.updateFHDCurPts = function () {
         var parent = this.parent;
         for (var n = 0; n < parent.freehandCounter; n++) {
-            if (!isNullOrUndefined(this.selPointColl[n])) {
+            if (this.selPointColl[n]) {
                 this.selPoints = extend([], this.selPointColl[n].points, []);
                 this.pointCounter = 0;
                 var len = this.selPoints.length;
@@ -730,7 +730,7 @@ var FreehandDrawing = /** @class */ (function () {
         }
         // Update rotation points for each point for cursor styles
         for (var n = 0; n < parent.freehandCounter; n++) {
-            if (!isNullOrUndefined(this.selPointColl[n])) {
+            if (this.selPointColl[n]) {
                 this.selPoints = extend([], this.selPointColl[n].points, []);
                 this.pointCounter = 0;
                 var len = this.selPoints.length;
@@ -786,7 +786,7 @@ var FreehandDrawing = /** @class */ (function () {
         }
         // Update flip value for each points for cursor styles
         for (var n = 0; n < parent.freehandCounter; n++) {
-            if (!isNullOrUndefined(this.selPointColl[n])) {
+            if (this.selPointColl[n]) {
                 if (this.selPointColl[n].shapeFlip !== parent.transform.currFlipState) {
                     this.selPoints = extend([], this.selPointColl[n].points, []);
                     this.pointCounter = 0;
@@ -833,7 +833,7 @@ var FreehandDrawing = /** @class */ (function () {
         }
         // Update flip value for each points for cursor styles
         for (var n = 0; n < parent.freehandCounter; n++) {
-            if (!isNullOrUndefined(this.selPointColl[n])) {
+            if (this.selPointColl[n]) {
                 if (this.selPointColl[n].shapeFlip !== parent.transform.currFlipState) {
                     this.selPoints = extend([], this.selPointColl[n].points, []);
                     this.pointCounter = 0;
@@ -884,7 +884,7 @@ var FreehandDrawing = /** @class */ (function () {
             }
         }
         for (var n = 0; n < parent.freehandCounter; n++) {
-            if (!isNullOrUndefined(this.selPointColl[n])) {
+            if (this.selPointColl[n]) {
                 this.selPoints = extend([], this.selPointColl[n].points, []);
                 this.pointCounter = 0;
                 var len = this.selPoints.length;
@@ -919,7 +919,7 @@ var FreehandDrawing = /** @class */ (function () {
         }
         // Updating each points for cursor styles for panning
         for (var n = 0; n < parent.freehandCounter; n++) {
-            if (!isNullOrUndefined(this.selPointColl[n])) {
+            if (this.selPointColl[n]) {
                 this.selPoints = extend([], this.selPointColl[n].points, []);
                 this.pointCounter = 0;
                 var len = this.selPoints.length;
@@ -982,13 +982,13 @@ var FreehandDrawing = /** @class */ (function () {
     FreehandDrawing.prototype.isFHDIdx = function (index, obj) {
         var isIndex = false;
         for (var i = 0; i < this.parent.freehandCounter; i++) {
-            if (!isNullOrUndefined(this.parent.pointColl[i].id) &&
+            if (this.parent.pointColl[i].id &&
                 parseInt(this.parent.pointColl[i].id.split('_')[1], 10) - 1 === index) {
                 isIndex = true;
                 break;
             }
         }
-        if (!isNullOrUndefined(obj)) {
+        if (obj) {
             obj['isIndex'] = isIndex;
         }
         return isIndex;
@@ -997,7 +997,7 @@ var FreehandDrawing = /** @class */ (function () {
         var parent = this.parent;
         for (var n = 0; n < parent.freehandCounter; n++) {
             var obj = { selPointColl: extend([], this.selPointColl) };
-            if (!isNullOrUndefined(obj['selPointColl'][n])) {
+            if (obj['selPointColl'][n]) {
                 this.selPoints = extend([], obj['selPointColl'][n].points, []);
                 this.pointCounter = 0;
                 var len = this.selPoints.length;

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

@@ -109,11 +109,11 @@ export declare class Selection {
     private canvasMouseMoveHandler;
     private canvasMouseUpHandler;
     private touchStartHandler;
+    private unwireEvent;
     private keyDownEventHandler;
     private isKeyBoardCrop;
     private beforeSaveEvent;
     private handleScroll;
-    private adjustToScreen;
     private textKeyDown;
     private clearSelection;
     private setDragDirection;