@syncfusion/ej2-image-editor 22.1.34 → 22.1.37

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

@@ -309,7 +309,7 @@ var ImageEditor = /** @class */ (function (_super) {
                     break;
                 case 'theme':
                     if (newProperties.theme) {
-                        if (!isNullOrUndefined(this.theme) && this.theme !== '') {
+                        if (this.theme && this.theme !== '') {
                             this.theme = this.toPascalCase(this.theme);
                         }
                         else {
@@ -371,7 +371,7 @@ var ImageEditor = /** @class */ (function (_super) {
                 case 'selectionSettings':
                     if (newProperties.selectionSettings) {
                         this.selectionSettings = newProperties.selectionSettings;
-                        if (!isNullOrUndefined(this.activeObj.shape)) {
+                        if (this.activeObj.shape) {
                             this.upperContext.clearRect(0, 0, this.upperCanvas.width, this.upperCanvas.height);
                             this.notify('draw', { prop: 'drawObject', onPropertyChange: false, value: { canvas: 'duplicate', obj: this.activeObj } });
                         }
@@ -391,9 +391,7 @@ var ImageEditor = /** @class */ (function (_super) {
             this.element.removeAttribute('class');
         }
         if (!isBlazor()) {
-            this.notify('toolbar', {
-                prop: 'destroySubComponents', onPropertyChange: false
-            });
+            this.notify('toolbar', { prop: 'destroySubComponents', onPropertyChange: false });
             this.notify('destroyed', null);
             _super.prototype.destroy.call(this);
         }
@@ -404,7 +402,7 @@ var ImageEditor = /** @class */ (function (_super) {
         this.element.innerHTML = '';
     };
     ImageEditor.prototype.initialize = function () {
-        if (!isNullOrUndefined(this.toolbarTemplate)) {
+        if (this.toolbarTemplate) {
             this.element.appendChild(this.createElement('div', {
                 id: this.element.id + '_toolbarArea', className: 'e-toolbar-area'
             }));
@@ -423,13 +421,13 @@ var ImageEditor = /** @class */ (function (_super) {
             var quickAccessToolbar = document.getElementById(this.element.id + '_quickAccessToolbarArea');
             quickAccessToolbar.style.position = 'absolute';
             quickAccessToolbar.style.display = 'none';
-            if (!isNullOrUndefined(this.activeObj)) {
+            if (this.activeObj) {
                 quickAccessToolbar.style.left = this.activeObj.activePoint.startX + 'px';
                 quickAccessToolbar.style.top = this.activeObj.activePoint.startY + 'px';
             }
             quickAccessToolbar.style.width = '100%';
         }
-        if (!isNullOrUndefined(this.quickAccessToolbarTemplate)) {
+        if (this.quickAccessToolbarTemplate) {
             this.quickAccessToolbarTemplateFn();
         }
         else {
@@ -506,6 +504,7 @@ var ImageEditor = /** @class */ (function (_super) {
             screen.orientation.removeEventListener('change', this.screenOrientation.bind(this));
         }
         this.notify('shape', { prop: 'unWireEvent', onPropertyChange: false });
+        this.notify('selection', { prop: 'unWireEvent', onPropertyChange: false });
     };
     ImageEditor.prototype.createCanvas = function () {
         this.element.style.boxSizing = 'border-box';
@@ -585,7 +584,7 @@ var ImageEditor = /** @class */ (function (_super) {
         this.notify('selection', { prop: 'handleScroll', onPropertyChange: false, value: { e: e } });
     };
     ImageEditor.prototype.adjustToScreen = function () {
-        this.notify('selection', { prop: 'adjustToScreen', onPropertyChange: false });
+        this.update();
     };
     ImageEditor.prototype.screenOrientation = function () {
         if (Browser.isDevice) {
@@ -742,10 +741,10 @@ var ImageEditor = /** @class */ (function (_super) {
             this.currentFilter = '';
             var obj_1 = { initialZoomValue: false };
             this.notify('draw', { prop: 'getInitialZoomValue', onPropertyChange: false, value: { obj: obj_1 } });
-            if (!isNullOrUndefined(obj_1['initialZoomValue'])) {
+            if (obj_1['initialZoomValue']) {
                 this.setProperties({ zoomSettings: { zoomFactor: obj_1['initialZoomValue'] } }, true);
             }
-            if (!isNullOrUndefined(document.getElementById(this.element.id + '_quickAccessToolbarArea'))) {
+            if (document.getElementById(this.element.id + '_quickAccessToolbarArea')) {
                 document.getElementById(this.element.id + '_quickAccessToolbarArea').style.display = 'none';
             }
             this.notifyResetForAllModules();
@@ -754,7 +753,7 @@ var ImageEditor = /** @class */ (function (_super) {
             this.notify('draw', { prop: 'update-canvas', onPropertyChange: false });
             this.isImageLoaded = true;
             if (!isBlazor()) {
-                if (!isNullOrUndefined(this.element.querySelector('.e-contextual-toolbar-wrapper'))) {
+                if (this.element.querySelector('.e-contextual-toolbar-wrapper')) {
                     this.element.querySelector('.e-contextual-toolbar-wrapper').classList.add('e-hide');
                 }
                 this.notify('toolbar', { prop: 'refresh-dropdown-btn', value: { isDisabled: false } });
@@ -890,7 +889,7 @@ var ImageEditor = /** @class */ (function (_super) {
     ImageEditor.prototype.drawEllipse = function (x, y, radiusX, radiusY, strokeWidth, strokeColor, fillColor) {
         var isEllipse = false;
         var isPointsInRange = this.allowShape(x, y);
-        if (!this.disabled && this.isImageLoaded && isPointsInRange) {
+        if (!this.disabled && this.isImageLoaded && (isPointsInRange || (isNullOrUndefined(x) && isNullOrUndefined(y)))) {
             isEllipse = true;
             this.notify('shape', { prop: 'drawEllipse', onPropertyChange: false, value: { x: x, y: y, radiusX: radiusX, radiusY: radiusY,
                     strokeWidth: strokeWidth, strokeColor: strokeColor, fillColor: fillColor } });
@@ -911,7 +910,7 @@ var ImageEditor = /** @class */ (function (_super) {
     ImageEditor.prototype.drawLine = function (startX, startY, endX, endY, strokeWidth, strokeColor) {
         var isLine = false;
         var isPointsInRange = this.allowShape(startX, startY);
-        if (!this.disabled && this.isImageLoaded && isPointsInRange) {
+        if (!this.disabled && this.isImageLoaded && (isPointsInRange || (isNullOrUndefined(startX) && isNullOrUndefined(startY)))) {
             isLine = true;
             this.notify('shape', { prop: 'drawLine', onPropertyChange: false, value: { startX: startX, startY: startY, endX: endX,
                     endY: endY, strokeWidth: strokeWidth, strokeColor: strokeColor } });
@@ -929,14 +928,12 @@ var ImageEditor = /** @class */ (function (_super) {
      * @param {string} strokeColor - Specifies the stroke color of arrow.
      * @param {ArrowheadType} arrowStart – Specifies the type of arrowhead for start position. The default value is ‘None’.
      * @param {ArrowheadType} arrowEnd – Specifies the type of arrowhead for end position. The default value is ‘SolidArrow’.
-
      * @returns {boolean}.
-     * @private
      */
     ImageEditor.prototype.drawArrow = function (startX, startY, endX, endY, strokeWidth, strokeColor, arrowStart, arrowEnd) {
         var isArrow = false;
         var isPointsInRange = this.allowShape(startX, startY);
-        if (!this.disabled && this.isImageLoaded && isPointsInRange) {
+        if (!this.disabled && this.isImageLoaded && (isPointsInRange || (isNullOrUndefined(startX) && isNullOrUndefined(startY)))) {
             isArrow = true;
             this.notify('shape', { prop: 'drawArrow', onPropertyChange: false, value: { startX: startX, startY: startY, endX: endX,
                     endY: endY, strokeWidth: strokeWidth, strokeColor: strokeColor, arrowStart: arrowStart, arrowEnd: arrowEnd } });
@@ -955,7 +952,7 @@ var ImageEditor = /** @class */ (function (_super) {
         this.isPublicMethod = true;
         var obj = { inRange: false };
         var isPath = false;
-        if (pointColl.length > 0) {
+        if (pointColl && pointColl.length > 0) {
             for (var i = 0; i < pointColl.length; i++) {
                 if (obj['inRange']) {
                     break;
@@ -964,7 +961,7 @@ var ImageEditor = /** @class */ (function (_super) {
                     value: { x: pointColl[i].x, y: pointColl[i].y, obj: obj } });
             }
         }
-        if (!this.disabled && this.isImageLoaded && obj['inRange']) {
+        if (!this.disabled && this.isImageLoaded && (obj['inRange'] || isNullOrUndefined(pointColl))) {
             isPath = true;
             this.notify('shape', { prop: 'drawPath', onPropertyChange: false, value: { pointColl: pointColl,
                     strokeWidth: strokeWidth, strokeColor: strokeColor } });
@@ -986,7 +983,7 @@ var ImageEditor = /** @class */ (function (_super) {
     ImageEditor.prototype.drawRectangle = function (x, y, width, height, strokeWidth, strokeColor, fillColor) {
         var isRectangle = false;
         var isPointsInRange = this.allowShape(x, y);
-        if (!this.disabled && this.isImageLoaded && isPointsInRange) {
+        if (!this.disabled && this.isImageLoaded && (isPointsInRange || (isNullOrUndefined(x) && isNullOrUndefined(y)))) {
             isRectangle = true;
             this.notify('shape', { prop: 'drawRectangle', onPropertyChange: false, value: { x: x, y: y, width: width, height: height,
                     strokeWidth: strokeWidth, strokeColor: strokeColor, fillColor: fillColor } });
@@ -1012,7 +1009,7 @@ var ImageEditor = /** @class */ (function (_super) {
     ImageEditor.prototype.drawText = function (x, y, text, fontFamily, fontSize, bold, italic, color) {
         var isText = false;
         var isPointsInRange = this.allowShape(x, y);
-        if (!this.disabled && this.isImageLoaded && isPointsInRange) {
+        if (!this.disabled && this.isImageLoaded && (isPointsInRange || (isNullOrUndefined(x) && isNullOrUndefined(y)))) {
             isText = true;
             this.notify('shape', { prop: 'drawText', onPropertyChange: false, value: { x: x, y: y, text: text, fontFamily: fontFamily,
                     fontSize: fontSize, bold: bold, italic: italic, color: color } });
@@ -1164,6 +1161,8 @@ var ImageEditor = /** @class */ (function (_super) {
                 template = this.toolbarFn({ type: 'toolbar' }, this, 'Template', templateID)[0];
             }
             toolbarArea.appendChild(template);
+            this.toolbarHeight = toolbarArea.clientHeight;
+            this.notify('toolbar', { prop: 'setToolbarHeight', value: { height: this.toolbarHeight } });
             this['renderReactTemplates']();
         }
     };
@@ -1231,7 +1230,7 @@ var ImageEditor = /** @class */ (function (_super) {
         var isUndoRedo = this.isUndoRedo;
         this.isCropTab = false;
         this.isUndoRedo = true;
-        if (!isNullOrUndefined(this.transform.cropZoomFactor) && this.transform.cropZoomFactor > 0) {
+        if (this.transform.cropZoomFactor && this.transform.cropZoomFactor > 0) {
             this.notify('transform', { prop: 'zoomAction', onPropertyChange: false,
                 value: { zoomFactor: -this.transform.cropZoomFactor, zoomPoint: null } });
         }
@@ -1248,120 +1247,6 @@ var ImageEditor = /** @class */ (function (_super) {
         this.isCropTab = true;
         this.notify('draw', { prop: 'drawObject', onPropertyChange: false, value: { canvas: 'duplicate', obj: this.activeObj } });
     };
-    ImageEditor.prototype.moveToSelectionRange = function (type, activeObj) {
-        if (!isNullOrUndefined(this.activeObj.shape)) {
-            if (type === 'rotateleft' || type === 'rotateright') {
-                var zoomFactor = this.transform.zoomFactor;
-                this.objColl.push(this.activeObj);
-                this.notify('shape', { prop: 'refreshActiveObj', onPropertyChange: false });
-                if (this.transform.degree % 90 === 0 && this.transform.degree % 180 !== 0) {
-                    if (this.objColl[this.objColl.length - 1].activePoint.width < activeObj.activePoint.height) {
-                        for (var i = 2; i < this.zoomSettings.maxZoomFactor; i++) {
-                            if (this.objColl[this.objColl.length - 1].activePoint.width >= activeObj.activePoint.height ||
-                                this.isSelectionBiggerThanCanvas(this.objColl[this.objColl.length - 1]) ||
-                                this.isSelectionOutsideCanvas(this.objColl[this.objColl.length - 1])) {
-                                if (!isNullOrUndefined(zoomFactor)) {
-                                    this.notify('transform', { prop: 'zoomAction', onPropertyChange: false,
-                                        value: { zoomFactor: -0.1, zoomPoint: null } });
-                                }
-                                break;
-                            }
-                            zoomFactor += .1;
-                            this.notify('transform', { prop: 'zoomAction', onPropertyChange: false,
-                                value: { zoomFactor: zoomFactor, zoomPoint: null } });
-                        }
-                    }
-                    else {
-                        for (var i = 2; i < this.zoomSettings.maxZoomFactor; i++) {
-                            if (this.objColl[this.objColl.length - 1].activePoint.width >= activeObj.activePoint.height ||
-                                this.isSelectionBiggerThanCanvas(this.objColl[this.objColl.length - 1]) ||
-                                this.isSelectionOutsideCanvas(this.objColl[this.objColl.length - 1])) {
-                                if (!isNullOrUndefined(zoomFactor)) {
-                                    this.notify('transform', { prop: 'zoomAction', onPropertyChange: false,
-                                        value: { zoomFactor: 0.1, zoomPoint: null } });
-                                }
-                                break;
-                            }
-                            zoomFactor -= .1;
-                            this.notify('transform', { prop: 'zoomAction', onPropertyChange: false,
-                                value: { zoomFactor: zoomFactor, zoomPoint: null } });
-                        }
-                    }
-                }
-                else {
-                    if (this.objColl[this.objColl.length - 1].activePoint.height < activeObj.activePoint.width) {
-                        for (var i = 2; i < this.zoomSettings.maxZoomFactor; i++) {
-                            if (this.objColl[this.objColl.length - 1].activePoint.height >= activeObj.activePoint.width ||
-                                this.isSelectionBiggerThanCanvas(this.objColl[this.objColl.length - 1]) ||
-                                this.isSelectionOutsideCanvas(this.objColl[this.objColl.length - 1])) {
-                                if (!isNullOrUndefined(zoomFactor)) {
-                                    this.notify('transform', { prop: 'zoomAction', onPropertyChange: false,
-                                        value: { zoomFactor: -0.1, zoomPoint: null } });
-                                }
-                                break;
-                            }
-                            zoomFactor += .1;
-                            this.notify('transform', { prop: 'zoomAction', onPropertyChange: false,
-                                value: { zoomFactor: zoomFactor, zoomPoint: null } });
-                        }
-                    }
-                    else {
-                        for (var i = 2; i < this.zoomSettings.maxZoomFactor; i++) {
-                            if (this.objColl[this.objColl.length - 1].activePoint.height >= activeObj.activePoint.width ||
-                                this.isSelectionBiggerThanCanvas(this.objColl[this.objColl.length - 1]) ||
-                                this.isSelectionOutsideCanvas(this.objColl[this.objColl.length - 1])) {
-                                if (!isNullOrUndefined(zoomFactor)) {
-                                    this.notify('transform', { prop: 'zoomAction', onPropertyChange: false,
-                                        value: { zoomFactor: 0.1, zoomPoint: null } });
-                                }
-                                break;
-                            }
-                            zoomFactor -= .1;
-                            this.notify('transform', { prop: 'zoomAction', onPropertyChange: false,
-                                value: { zoomFactor: zoomFactor, zoomPoint: null } });
-                        }
-                    }
-                }
-                var panX = (this.lowerCanvas.clientWidth / 2) - (this.objColl[this.objColl.length - 1].activePoint.startX +
-                    (this.objColl[this.objColl.length - 1].activePoint.width / 2));
-                var panY = (this.lowerCanvas.clientHeight / 2) - (this.objColl[this.objColl.length - 1].activePoint.startY +
-                    (this.objColl[this.objColl.length - 1].activePoint.height / 2));
-                if (this.transform.degree === 0) {
-                    this.img.destLeft += panX;
-                    this.img.destTop += panY;
-                    this.notify('transform', { prop: 'drawPannImage', value: { point: { x: panX, y: panY } } });
-                }
-                else {
-                    this.panPoint.currentPannedPoint = { x: panX, y: panY };
-                    this.notify('transform', { prop: 'drawPannedImage', value: { xDiff: panX, yDiff: panY } });
-                    this.panPoint.currentPannedPoint = { x: 0, y: 0 };
-                }
-                this.notify('transform', { prop: 'setTempPanMove', onPropertyChange: false,
-                    value: { point: null } });
-                this.activeObj = extend({}, this.objColl[this.objColl.length - 1]);
-                this.objColl.pop();
-                this.notify('draw', { prop: 'drawObject', onPropertyChange: false, value: { canvas: 'duplicate', obj: this.activeObj } });
-            }
-        }
-    };
-    ImageEditor.prototype.isSelectionBiggerThanCanvas = function (obj) {
-        var isBigger = false;
-        if (obj.activePoint.startX <= this.img.destLeft ||
-            obj.activePoint.startY <= this.img.destTop ||
-            obj.activePoint.endX >= this.img.destLeft + this.img.destWidth ||
-            obj.activePoint.endY >= this.img.destTop + this.img.destHeight) {
-            isBigger = true;
-        }
-        return isBigger;
-    };
-    ImageEditor.prototype.isSelectionOutsideCanvas = function (obj) {
-        var isOutside = false;
-        if ((obj.activePoint.height < this.lowerCanvas.height - this.toolbarHeight) ||
-            (obj.activePoint.width < this.lowerCanvas.width)) {
-            isOutside = true;
-        }
-        return isOutside;
-    };
     /**
      * Set the old item Transform item state.
      *
@@ -1405,7 +1290,7 @@ var ImageEditor = /** @class */ (function (_super) {
         for (var i = 0; i < strArr.length; i++) {
             strArr[i] = strArr[i].charAt(0).toUpperCase() + strArr[i].slice(1);
         }
-        if (!isNullOrUndefined(obj)) {
+        if (obj) {
             obj['maxText'] = strArr.join('');
         }
         return strArr.join('');
@@ -1472,7 +1357,7 @@ var ImageEditor = /** @class */ (function (_super) {
                 this.notify('undo-redo', { prop: 'updateCurrUrc', value: { type: 'ok' } });
             }
         }
-        else if ((!isBlazor() && !isNullOrUndefined(document.querySelector('#' + this.element.id + '_sliderWrapper'))) || (isBlazor() && !this.element.querySelector('.e-ie-contextual-slider').classList.contains('e-hidden')) ||
+        else if ((!isBlazor() && document.querySelector('#' + this.element.id + '_sliderWrapper')) || (isBlazor() && !this.element.querySelector('.e-ie-contextual-slider').classList.contains('e-hidden')) ||
             this.currObjType.isFiltered) {
             this.initialAdjustmentValue = this.canvasFilter = this.lowerContext.filter;
             this.currObjType.isFiltered = false;
@@ -1534,7 +1419,7 @@ var ImageEditor = /** @class */ (function (_super) {
      * @returns {void}.
      */
     ImageEditor.prototype.cropSelectedState = function () {
-        if (!isNullOrUndefined(this.activeObj.shape) && this.activeObj.shape.split('-')[0] === 'crop') {
+        if (this.activeObj.shape && this.activeObj.shape.split('-')[0] === 'crop') {
             this.okBtn();
         }
     };
@@ -1549,7 +1434,10 @@ var ImageEditor = /** @class */ (function (_super) {
         var tempFilter = this.lowerContext.filter;
         this.lowerContext.filter = this.canvasFilter = 'none';
         var objColl = extend([], this.objColl, null, true);
+        var pointColl = extend([], this.pointColl, null, true);
         this.objColl = [];
+        this.pointColl = [];
+        this.freehandCounter = 0;
         this.notify('draw', { prop: 'render-image', value: { isMouseWheel: false } });
         var data = this.getImageData();
         if (!isBlazor()) {
@@ -1558,6 +1446,8 @@ var ImageEditor = /** @class */ (function (_super) {
             this.element.querySelector('#' + this.element.id + '_contextualToolbarArea').classList.remove('e-hide');
         }
         this.objColl = objColl;
+        this.pointColl = pointColl;
+        this.freehandCounter = pointColl.length;
         this.notify('shape', { prop: 'iterateObjColl', onPropertyChange: false });
         this.lowerContext.filter = this.canvasFilter = tempFilter;
         return data;
@@ -1574,7 +1464,7 @@ var ImageEditor = /** @class */ (function (_super) {
         var _this = this;
         var finetuneValueChanging = { finetune: this.getFinetuneOption(type),
             value: value, cancel: false };
-        if (isBlazor() && !isNullOrUndefined(this.events) && this.events.finetuneValueChanging.hasDelegate === true) {
+        if (isBlazor() && this.events && this.events.finetuneValueChanging.hasDelegate === true) {
             /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
             this.dotNetRef.invokeMethodAsync('OnFinetuneValueChangeAsync', finetuneValueChanging).then(function (finetuneValueChanging) {
                 if (finetuneValueChanging.cancel) {
@@ -1591,82 +1481,6 @@ var ImageEditor = /** @class */ (function (_super) {
             this.notify('filter', { prop: 'setCurrAdjValue', value: { type: type.toLowerCase(), value: value } });
         }
     };
-    /**
-     * Get the square point for rotated shape.
-     *
-     * @param { SelectionPoint } obj - Specifies the selection point.
-     * @param { Object } object - Specifies the object.
-     * @hidden
-     * @returns {ActivePoint}.
-     * An ActivePoint object which returns the square point.
-     */
-    ImageEditor.prototype.getSquarePointForRotatedShape = function (obj, object) {
-        var point = { startX: 0, startY: 0, endX: 0, endY: 0, width: 0, height: 0 };
-        var center = { x: obj.activePoint.startX + (obj.activePoint.width / 2), y: obj.activePoint.startY +
-                (obj.activePoint.height / 2) };
-        var p1 = { x: Math.cos(obj.rotatedAngle) * (obj.activePoint.startX - center.x) - Math.sin(obj.rotatedAngle)
-                * (obj.activePoint.startY - center.y) + center.x,
-            y: Math.sin(obj.rotatedAngle) * (obj.activePoint.startX - center.x) + Math.cos(obj.rotatedAngle) * (obj.activePoint.startY
-                - center.y) + center.y };
-        var p2 = { x: Math.cos(obj.rotatedAngle) * (obj.activePoint.endX - center.x) - Math.sin(obj.rotatedAngle) *
-                (obj.activePoint.startY - center.y) + center.x,
-            y: Math.sin(obj.rotatedAngle) * (obj.activePoint.endX - center.x) + Math.cos(obj.rotatedAngle) * (obj.activePoint.startY
-                - center.y) + center.y };
-        var p3 = { x: Math.cos(obj.rotatedAngle) * (obj.activePoint.startX - center.x) - Math.sin(obj.rotatedAngle) *
-                (obj.activePoint.endY - center.y) + center.x,
-            y: Math.sin(obj.rotatedAngle) * (obj.activePoint.startX - center.x) + Math.cos(obj.rotatedAngle) * (obj.activePoint.endY
-                - center.y) + center.y };
-        var p4 = { x: Math.cos(obj.rotatedAngle) * (obj.activePoint.endX - center.x) - Math.sin(obj.rotatedAngle) *
-                (obj.activePoint.endY - center.y) + center.x,
-            y: Math.sin(obj.rotatedAngle) * (obj.activePoint.endX - center.x) + Math.cos(obj.rotatedAngle) *
-                (obj.activePoint.endY - center.y) + center.y };
-        point.startX = p1.x;
-        point.startY = p1.y;
-        point.endX = p1.x;
-        point.endY = p1.y;
-        if (point.startX > p2.x) {
-            point.startX = p2.x;
-        }
-        if (point.startX > p3.x) {
-            point.startX = p3.x;
-        }
-        if (point.startX > p4.x) {
-            point.startX = p4.x;
-        }
-        if (point.startY > p2.y) {
-            point.startY = p2.y;
-        }
-        if (point.startY > p3.y) {
-            point.startY = p3.y;
-        }
-        if (point.startY > p4.y) {
-            point.startY = p4.y;
-        }
-        if (point.endX < p2.x) {
-            point.endX = p2.x;
-        }
-        if (point.endX < p3.x) {
-            point.endX = p3.x;
-        }
-        if (point.endX < p4.x) {
-            point.endX = p4.x;
-        }
-        if (point.endY < p2.y) {
-            point.endY = p2.y;
-        }
-        if (point.endY < p3.y) {
-            point.endY = p3.y;
-        }
-        if (point.endY < p4.y) {
-            point.endY = p4.y;
-        }
-        point.width = point.endX - point.startX;
-        point.height = point.endY - point.startY;
-        if (!isNullOrUndefined(object)) {
-            object['activePoint'] = point;
-        }
-        return point;
-    };
     /**
      * Get the square point for path.
      *
@@ -1755,14 +1569,14 @@ var ImageEditor = /** @class */ (function (_super) {
         this.notify('selection', { prop: 'redrawShape', value: { obj: this.objColl[this.objColl.length - 1] } });
         if (!isBlazor()) {
             if (Browser.isDevice) {
-                if (!isNullOrUndefined(document.getElementById(this.element.id + '_bottomToolbar'))) {
+                if (document.getElementById(this.element.id + '_bottomToolbar')) {
                     /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
                     var toolbar_1 = getComponent(this.element.id + '_bottomToolbar', 'toolbar');
                     toolbar_1.refreshOverflow();
                 }
             }
             else {
-                if (!isNullOrUndefined(document.getElementById(this.element.id + '_toolbar'))) {
+                if (document.getElementById(this.element.id + '_toolbar')) {
                     /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
                     var toolbar_2 = getComponent(this.element.id + '_toolbar', 'toolbar');
                     toolbar_2.refreshOverflow();
@@ -2196,9 +2010,8 @@ var ImageEditor = /** @class */ (function (_super) {
         var obj = { adjustmentLevel: null };
         this.notify('filter', { prop: 'getAdjustmentLevel', onPropertyChange: false,
             value: { obj: obj } });
-        var value;
         var typeToAdjustmentLevel = { 'brightness': obj['adjustmentLevel'].brightness,
-            'contrast': value = obj['adjustmentLevel'].contrast, 'hue': obj['adjustmentLevel'].hue,
+            'contrast': obj['adjustmentLevel'].contrast, 'hue': obj['adjustmentLevel'].hue,
             'saturation': obj['adjustmentLevel'].saturation, 'opacity': obj['adjustmentLevel'].opacity,
             'blur': obj['adjustmentLevel'].blur, 'exposure': obj['adjustmentLevel'].exposure };
         return typeToAdjustmentLevel["" + type];
@@ -2217,7 +2030,7 @@ var ImageEditor = /** @class */ (function (_super) {
         this.cropSelectedState();
         this.notify('draw', { prop: 'resetCurrentSelectionPoint' });
         this.notify('transform', { prop: 'performTransformation', value: { text: type } });
-        this.moveToSelectionRange(type, activeObj);
+        this.notify('draw', { prop: 'moveToSelectionRange', value: { type: type, activeObj: activeObj } });
         this.isCropToolbar = false;
     };
     /**
@@ -2244,7 +2057,7 @@ var ImageEditor = /** @class */ (function (_super) {
         /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
         this.element = element;
         var canvasWrapper = this.element.querySelector('.e-canvas-wrapper');
-        if (!isNullOrUndefined(this.element.querySelector('#' + this.element.id + '_toolbar'))) {
+        if (this.element.querySelector('#' + this.element.id + '_toolbar')) {
             this.toolbarHeight = this.element.querySelector('#' + this.element.id + '_toolbar').clientHeight;
         }
         else {
@@ -2262,9 +2075,6 @@ var ImageEditor = /** @class */ (function (_super) {
         });
         this.upperCanvas.width = this.lowerCanvas.width = this.inMemoryCanvas.width = this.element.offsetWidth;
         this.upperCanvas.height = this.lowerCanvas.height = this.inMemoryCanvas.height = (this.element.offsetHeight - this.toolbarHeight);
-        this.baseImg = this.createElement('img', {
-            id: this.element.id + '_orgImg', attrs: { name: 'Image', crossorigin: 'anonymous' }
-        });
         this.lowerContext = this.lowerCanvas.getContext('2d');
         this.baseImg = this.createElement('img', {
             id: this.element.id + '_orgImg', attrs: { name: 'Image', crossorigin: 'anonymous' }

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

@@ -90,14 +90,14 @@ export interface PanEventArgs {
     cancel: boolean;
 }
 /**
- * The Interface which contains the properties for crop transition occur in the Image Editor.
+ * The Interface which contains the properties for crop transition occurs in the Image Editor.
  */
 export interface CropEventArgs {
     /**
      * Returns the start point of the crop region.
      *
      * @remarks
-     * The start and end point is used get the cropping region in a image editor.
+     * The start and end point is used get the cropping region in an image editor.
      *
      */
     startPoint: Point;
@@ -105,10 +105,14 @@ export interface CropEventArgs {
      * Returns the end point of the crop region.
      *
      * @remarks
-     * The start and end point is used get the cropping region in a image editor.
+     * The start and end point is used get the cropping region in an image editor.
      *
      */
     endPoint: Point;
+    /**
+    * Specifies whether to prevent scale-based cropping in the image editor.
+    */
+    preventScaling: boolean;
     /**
      * Defines whether to cancel the cropping action of image editor.
      */
@@ -221,6 +225,10 @@ export interface OpenEventArgs {
      * Returns the file type of an image.
      */
     fileType: FileType;
+    /**
+     * Returns whether the loaded file is valid in the image editor.
+     */
+    isValidImage: boolean;
 }
 /**
  * The Interface which contains the properties for saving the canvas as image.