@syncfusion/ej2-image-editor 22.1.34 → 22.1.36

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

@@ -1,5 +1,4 @@
-import { Browser, EventHandler, extend, getComponent, isBlazor, isNullOrUndefined } from '@syncfusion/ej2-base';
-import { hideSpinner, showSpinner } from '@syncfusion/ej2-popups';
+import { Browser, EventHandler, extend, isBlazor, isNullOrUndefined } from '@syncfusion/ej2-base';
 import { ZoomTrigger } from '../index';
 var Selection = /** @class */ (function () {
     function Selection(parent) {
@@ -132,9 +131,6 @@ var Selection = /** @class */ (function () {
             case 'handleScroll':
                 this.handleScroll(args.value['e']);
                 break;
-            case 'adjustToScreen':
-                this.adjustToScreen();
-                break;
             case 'textKeyDown':
                 setTimeout(this.textKeyDown.bind(this), 1, args.value['e']);
                 break;
@@ -226,6 +222,18 @@ var Selection = /** @class */ (function () {
             case 'getTransRotationPoint':
                 this.getTransRotationPoint(args.value['obj'], args.value['object']);
                 break;
+            case 'adjustNEPoints':
+                this.adjustNEPoints(args.value['rectangle'], args.value['x'], args.value['y'], args.value['angle']);
+                break;
+            case 'adjustRotationPoints':
+                this.adjustRotationPoints(args.value['rectangle'], args.value['x'], args.value['y'], args.value['angle']);
+                break;
+            case 'getResizeDirection':
+                this.getResizeDirection(args.value['rectangle'], args.value['x'], args.value['y'], args.value['angle']);
+                break;
+            case 'setResizedElement':
+                this.resizedElement = args.value['value'];
+                break;
             case 'reset':
                 this.reset();
                 break;
@@ -236,10 +244,10 @@ var Selection = /** @class */ (function () {
     };
     Selection.prototype.updatePrivateVariables = function () {
         var parent = this.parent;
-        if (!isNullOrUndefined(parent.lowerCanvas)) {
+        if (parent.lowerCanvas) {
             this.lowerContext = parent.lowerCanvas.getContext('2d');
         }
-        if (!isNullOrUndefined(parent.upperCanvas)) {
+        if (parent.upperCanvas) {
             this.upperContext = parent.upperCanvas.getContext('2d');
         }
     };
@@ -350,7 +358,7 @@ var Selection = /** @class */ (function () {
                 cursor = 'move';
             }
         }
-        else if (!isNullOrUndefined(rotationCirclePoint) && !isApply &&
+        else if (rotationCirclePoint && !isApply &&
             x >= (rotationCirclePoint.x - (actObj.bottomCenterCircle.radius + 2)) &&
             x <= rotationCirclePoint.x + (actObj.bottomCenterCircle.radius + 2) &&
             y >= rotationCirclePoint.y - (actObj.bottomCenterCircle.radius + 2) &&
@@ -452,7 +460,7 @@ var Selection = /** @class */ (function () {
             }
         }
         if ((parent.cursor === 'default' || parent.cursor === 'grab')
-            && !isNullOrUndefined(parent.pointColl[0]) && (parent.cursor !== 'grab' || !isCropSelection)
+            && parent.pointColl[0] && (parent.cursor !== 'grab' || !isCropSelection)
             && !parent.currObjType.isDragging && !parent.currObjType.isResize) {
             this.setCursorForFreehandDrawing(x, y, upperCanvas);
         }
@@ -570,7 +578,7 @@ var Selection = /** @class */ (function () {
                 (actObj.bottomCenterCircle.radius + 2))) {
             upperCanvas.style.cursor = parent.cursor = 'se-resize';
         }
-        else if (!isNullOrUndefined(actObj.rotationCirclePointColl) &&
+        else if (actObj.rotationCirclePointColl &&
             x >= (actObj.rotationCirclePointColl.x - (actObj.bottomCenterCircle.radius + 2)) &&
             x <= actObj.rotationCirclePointColl.x + (actObj.bottomCenterCircle.radius + 2) &&
             y >= actObj.rotationCirclePointColl.y - (actObj.bottomCenterCircle.radius + 2) &&
@@ -638,7 +646,7 @@ var Selection = /** @class */ (function () {
         if ((length >= 92 && length <= 182) || (length >= -178 && length <= -88)) {
             var cursorMap = { 'nw-resize': 'ne-resize', 'n-resize': 's-resize',
                 'ne-resize': 'nw-resize', 'w-resize': 'e-resize', 'e-resize': 'w-resize',
-                'sw-resize': 'se-resize', 's-resize': 'n-resize', 'se-resize': 'sw-resize',
+                'sw-resize': 'se-resize', 's-resize': 'n-resize', 'se-resize': 'sw-resize'
             };
             if (parent.cursor in cursorMap) {
                 parent.cursor = cursorMap[parent.cursor];
@@ -783,7 +791,7 @@ var Selection = /** @class */ (function () {
                     else if (!this.isFhdEditing || parent.pointColl[n].isSelected) {
                         if (this.isFhdPoint || this.isFhdEditing) {
                             upperContext.clearRect(0, 0, upperCanvas.width, upperCanvas.height);
-                            if (!isNullOrUndefined(parent.activeObj.shape) && textArea.style.display === 'none') {
+                            if (parent.activeObj.shape && textArea.style.display === 'none') {
                                 parent.notify('draw', { prop: 'drawObject', onPropertyChange: false, value: { canvas: 'duplicate', obj: parent.activeObj } });
                             }
                         }
@@ -1059,7 +1067,7 @@ var Selection = /** @class */ (function () {
             if (splitWords !== undefined && splitWords[0] === 'crop') {
                 this.isCropSelection = true;
             }
-            if (!this.isCropSelection && this.parent.eventType !== 'resize' && isBlazor() && !isNullOrUndefined(parent.events) && this.parent.events.onShapeResizeStart.hasDelegate === true) {
+            if (!this.isCropSelection && this.parent.eventType !== 'resize' && isBlazor() && parent.events && this.parent.events.onShapeResizeStart.hasDelegate === true) {
                 shapeResizingArgs.action = 'resize-start';
                 /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
                 parent.dotNetRef.invokeMethodAsync('ShapeEventAsync', 'OnShapeResizeStart', shapeResizingArgs).then(function (shapeResizingArgs) {
@@ -2270,7 +2278,7 @@ var Selection = /** @class */ (function () {
                     isResize = true;
                     this.dragElement = parent.upperCanvas.style.cursor;
                 }
-                else if (!isNullOrUndefined(rotationCirclePoint) &&
+                else if (rotationCirclePoint &&
                     x >= rotationCirclePoint.x - (actObj.topLeftCircle.radius * 2) &&
                     x <= rotationCirclePoint.x + (actObj.topLeftCircle.radius * 2) &&
                     y >= rotationCirclePoint.y - (actObj.topLeftCircle.radius * 2) &&
@@ -2581,7 +2589,7 @@ var Selection = /** @class */ (function () {
             this.dragCanvas = parent.togglePan = true;
         }
         var imageEditorClickEventArgs = { point: this.setXYPoints(e) };
-        if (isBlazor() && !isNullOrUndefined(parent.events) && parent.events.clicked.hasDelegate === true) {
+        if (isBlazor() && parent.events && parent.events.clicked.hasDelegate === true) {
             /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
             parent.dotNetRef.invokeMethodAsync('ClickEventAsync', 'click', imageEditorClickEventArgs).then(function (imageEditorClickEventArgs) {
                 _this.clickEvent(imageEditorClickEventArgs, e);
@@ -2612,7 +2620,7 @@ var Selection = /** @class */ (function () {
         var parent = this.parent;
         var x = imageEditorClickEventArgs.point.x;
         var y = imageEditorClickEventArgs.point.y;
-        var cursor = !isNullOrUndefined(parent.activeObj.shape) && parent.activeObj.shape === 'text' ?
+        var cursor = parent.activeObj.shape && parent.activeObj.shape === 'text' ?
             parent.cursor : 'default';
         if (this.currentDrawingShape !== '') {
             var object_1 = { currObj: {} };
@@ -2648,7 +2656,7 @@ var Selection = /** @class */ (function () {
                 this.isPan = false;
             }
         }
-        if (!isNullOrUndefined(parent.activeObj.shape)) {
+        if (parent.activeObj.shape) {
             this.isObjSelected = true;
         }
         else {
@@ -2662,7 +2670,7 @@ var Selection = /** @class */ (function () {
         var isFreehandDraw = this.isFreehandDrawTouch(e, this.isCropSelection);
         var isShapeClick = isShape ? isShape : this.isShapeClick(e, this.isCropSelection);
         var allowUndoRedoPush = this.applyCurrShape(isShapeClick);
-        if (this.isTouch && !isShape && !isNullOrUndefined(activeObj.shape) && !this.isCropSelection) {
+        if (this.isTouch && !isShape && activeObj.shape && !this.isCropSelection) {
             if (this.applyObj(x, y)) {
                 parent.okBtn(true);
                 parent.notify('draw', { prop: 'setPrevActObj', onPropertyChange: false, value: { prevActObj: null } });
@@ -2697,11 +2705,12 @@ var Selection = /** @class */ (function () {
             }
             if (this.isFhdEditing) {
                 parent.notify('freehand-draw', { prop: 'applyFhd', onPropertyChange: false });
+                this.isFhdCustomized = false;
                 if (!isBlazor()) {
                     parent.notify('toolbar', { prop: 'destroy-qa-toolbar', onPropertyChange: false });
                 }
             }
-            if (!isNullOrUndefined(parent.activeObj.shape) && (parent.activeObj.shape === 'rectangle' ||
+            if (parent.activeObj.shape && (parent.activeObj.shape === 'rectangle' ||
                 parent.activeObj.shape === 'ellipse' || parent.activeObj.shape === 'line' ||
                 parent.activeObj.shape === 'arrow' || parent.activeObj.shape === 'path' || parent.activeObj.shape === 'text')) {
                 parent.notify('shape', { prop: 'redrawActObj', onPropertyChange: false,
@@ -2719,7 +2728,7 @@ var Selection = /** @class */ (function () {
         }
         else {
             var isLineArrow = false;
-            if (!isNullOrUndefined(parent.activeObj.shape) && (parent.activeObj.shape === 'line' ||
+            if (parent.activeObj.shape && (parent.activeObj.shape === 'line' ||
                 parent.activeObj.shape === 'arrow')) {
                 isLineArrow = true;
             }
@@ -2775,7 +2784,7 @@ var Selection = /** @class */ (function () {
             else {
                 if (this.isFhdEditing) {
                     parent.notify('freehand-draw', { prop: 'cancelFhd', value: { type: 'ok' } });
-                    if (!isNullOrUndefined(document.getElementById(parent.element.id + '_quickAccessToolbarArea'))) {
+                    if (document.getElementById(parent.element.id + '_quickAccessToolbarArea')) {
                         document.getElementById(parent.element.id + '_quickAccessToolbarArea').style.display = 'none';
                     }
                 }
@@ -2913,7 +2922,7 @@ var Selection = /** @class */ (function () {
             !this.dragCanvas || parent.activeObj.activePoint !== undefined) {
             if (this.dragElement === '') {
                 this.setCursor(x, y);
-                if ((!isNullOrUndefined(parent.activeObj.activePoint) &&
+                if ((parent.activeObj.activePoint &&
                     (parent.activeObj.activePoint.width === 0 || (!isNullOrUndefined(parent.activeObj.currIndex) &&
                         this.cursorTargetId !== parent.activeObj.currIndex)))
                     && parent.cursor !== 'default' &&
@@ -2988,15 +2997,14 @@ var Selection = /** @class */ (function () {
         if (splitWords !== undefined && splitWords[0] === 'crop') {
             isCropSelection = true;
         }
-        if (isBlazor() && !isNullOrUndefined(this.parent.eventType)) {
+        if (isBlazor() && this.parent.eventType) {
             if (this.parent.eventType === 'pan') {
-                if (!isNullOrUndefined(parent.events) && parent.events.onPanEnd.hasDelegate === true) {
-                    /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
+                if (parent.events && parent.events.onPanEnd.hasDelegate === true) {
                     parent.dotNetRef.invokeMethodAsync('PanEventAsync', 'OnPanEnd', this.parent.panEventArgs);
                 }
             }
             else if (this.parent.eventType === 'resize') {
-                if (!this.isCropSelection && !isNullOrUndefined(this.parent.events) && this.parent.events.onShapeResizeEnd.hasDelegate === true) {
+                if (!this.isCropSelection && this.parent.events && this.parent.events.onShapeResizeEnd.hasDelegate === true) {
                     this.shapeResizingArgs.currentShapeSettings = this.updatePrevShapeSettings();
                     this.shapeResizingArgs.action = 'resize-end';
                     /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
@@ -3005,7 +3013,8 @@ var Selection = /** @class */ (function () {
                             value: { shapeSettings: shapeResizingArgs.currentShapeSettings } });
                     });
                 }
-                else if (!isNullOrUndefined(this.shapeResizingArgs) && !isNullOrUndefined(this.selectionResizingArgs) && !isNullOrUndefined(this.parent.events) && this.parent.events.onSelectionResizeEnd.hasDelegate === true) {
+                else if (this.shapeResizingArgs && this.selectionResizingArgs && this.parent.events &&
+                    this.parent.events.onSelectionResizeEnd.hasDelegate === true) {
                     var currentSelectionSettings = { type: this.parent.activeObj.shape,
                         startX: this.shapeResizingArgs.currentShapeSettings.startX,
                         startY: this.shapeResizingArgs.currentShapeSettings.startY,
@@ -3021,7 +3030,7 @@ var Selection = /** @class */ (function () {
                 }
             }
             else {
-                if (!isNullOrUndefined(this.shapeMovingArgs) && !isNullOrUndefined(this.parent.events) && this.parent.events.onShapeDragEnd.hasDelegate === true) {
+                if (this.shapeMovingArgs && this.parent.events && this.parent.events.onShapeDragEnd.hasDelegate === true) {
                     this.shapeMovingArgs.currentShapeSettings = this.updatePrevShapeSettings();
                     this.shapeMovingArgs.action = 'drag-end';
                     /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
@@ -3074,7 +3083,7 @@ var Selection = /** @class */ (function () {
                 value: { obj: selPointCollObj } });
             prevObj.selPointColl = extend([], selPointCollObj['selPointColl'], [], true);
             if (!parent.togglePen && !isCropSelection) {
-                if (!isNullOrUndefined(this.tempObjColl) && parent.activeObj.activePoint.width !== 0) {
+                if (this.tempObjColl && parent.activeObj.activePoint.width !== 0) {
                     parent.objColl.push(parent.activeObj);
                     if (JSON.stringify(parent.activeObj.activePoint) !== JSON.stringify(this.tempActiveObj.activePoint)) {
                         parent.notify('undo-redo', { prop: 'updateUndoRedoColl', onPropertyChange: false,
@@ -3091,7 +3100,7 @@ var Selection = /** @class */ (function () {
                     parent.currObjType.isResize = false;
                 }
             }
-            if (!isNullOrUndefined(parent.activeObj)) {
+            if (parent.activeObj) {
                 var isCropSelection_1 = false;
                 var splitWords_1;
                 if (parent.activeObj.shape !== undefined) {
@@ -3140,7 +3149,7 @@ var Selection = /** @class */ (function () {
         if (splitWords !== undefined && splitWords[0] === 'crop') {
             isCropSelection = true;
         }
-        if (!isNullOrUndefined(parent.activeObj.shape) && !isCropSelection && e.currentTarget === parent.upperCanvas &&
+        if (parent.activeObj.shape && !isCropSelection && e.currentTarget === parent.upperCanvas &&
             parent.textArea.style.display === 'none') {
             if (parent.activeObj.shape === 'text') {
                 if (!isBlazor()) {
@@ -3177,7 +3186,7 @@ var Selection = /** @class */ (function () {
         var isAdjusted = false;
         var parent = this.parent;
         obj = obj ? obj : parent.activeObj;
-        if (!isNullOrUndefined(obj.shape) && (obj.shape === 'line' || parent.activeObj.shape === 'arrow')) {
+        if (obj.shape && (obj.shape === 'line' || parent.activeObj.shape === 'arrow')) {
             var temp = void 0;
             if ((this.dragElement === 'e-resize' && obj.activePoint.endX < obj.activePoint.startX) ||
                 (this.dragElement === 'w-resize' && obj.activePoint.startX > obj.activePoint.endX)) {
@@ -3208,7 +3217,7 @@ var Selection = /** @class */ (function () {
     Selection.prototype.updPtCollForShpRot = function (obj) {
         var parent = this.parent;
         obj = obj ? obj : parent.activeObj;
-        if (!isNullOrUndefined(obj.shape) && obj.rotatedAngle !== 0) {
+        if (obj.shape && obj.rotatedAngle !== 0) {
             parent.notify('shape', { prop: 'setPointCollForShapeRotation', onPropertyChange: false,
                 value: { obj: obj } });
             // Updating ratio for point collection
@@ -3272,7 +3281,7 @@ var Selection = /** @class */ (function () {
         if (parent.togglePen) {
             return isShape;
         }
-        if (!isNullOrUndefined(parent.activeObj.shape) && parent.activeObj.shape === 'text' && this.isShapeInserted) {
+        if (parent.activeObj.shape && parent.activeObj.shape === 'text' && this.isShapeInserted) {
             var isTextArea = parent.textArea.style.display === 'block' ? true : false;
             var activeObj = extend({}, parent.activeObj, null, true);
             parent.notify('shape', { prop: 'redrawActObj', onPropertyChange: false,
@@ -3296,7 +3305,7 @@ var Selection = /** @class */ (function () {
                     parent.objColl.splice(index, 1);
                 }
             }
-            else if (!isShape && !isNullOrUndefined(activeObj.shape)) {
+            else if (!isShape && activeObj.shape) {
                 parent.activeObj = activeObj;
                 var index = this.getCurrentIndex();
                 if ((!isNullOrUndefined(index) &&
@@ -3314,7 +3323,7 @@ var Selection = /** @class */ (function () {
         var parent = this.parent;
         var isShape = false;
         if (e.type === 'touchstart' && !parent.togglePen) {
-            if (!isNullOrUndefined(parent.activeObj) && parent.activeObj.shape === 'text') {
+            if (parent.activeObj && parent.activeObj.shape === 'text') {
                 this.timer = setTimeout(this.setTimer.bind(this), 1000, e);
             }
             var isTextArea = parent.textArea.style.display === 'block' ? true : false;
@@ -3384,7 +3393,7 @@ var Selection = /** @class */ (function () {
                     parent.objColl.splice(index, 1);
                 }
             }
-            else if (!isNullOrUndefined(activeObj.shape)) {
+            else if (activeObj.shape) {
                 parent.activeObj = activeObj;
                 var index = this.getCurrentIndex();
                 if (!isCropSelection) {
@@ -3403,7 +3412,7 @@ var Selection = /** @class */ (function () {
     Selection.prototype.applyObj = function (x, y) {
         var parent = this.parent;
         var isApply = false;
-        if (!isNullOrUndefined(parent.activeObj.shape) && (parent.activeObj.shape === 'rectangle' || parent.activeObj.shape === 'ellipse' ||
+        if (parent.activeObj.shape && (parent.activeObj.shape === 'rectangle' || parent.activeObj.shape === 'ellipse' ||
             parent.activeObj.shape === 'text' || parent.activeObj.shape === 'line' || parent.activeObj.shape === 'arrow' ||
             parent.activeObj.shape === 'path')) {
             if (x >= (parent.activeObj.activePoint.startX - (parent.activeObj.topLeftCircle.radius * 2)) &&
@@ -3583,7 +3592,7 @@ var Selection = /** @class */ (function () {
         var splitWords;
         switch (e.key) {
             case (e.ctrlKey && 's'):
-                if (isBlazor() && !isNullOrUndefined(parent.events) && parent.events.saving.hasDelegate === true) {
+                if (isBlazor() && parent.events && parent.events.saving.hasDelegate === true) {
                     /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
                     parent.dotNetRef.invokeMethodAsync('BeforeSaveEventAsync', 'BeforeSave', beforeSave).then(function (args) {
                         _this.beforeSaveEvent(args, e);
@@ -3681,7 +3690,7 @@ var Selection = /** @class */ (function () {
         e.stopPropagation();
         if (e.ctrlKey === true && isInsideCanvas) {
             e.preventDefault();
-            if (!parent.isCropTab && (!isNullOrUndefined(parent.activeObj.shape) && parent.activeObj.shape.split('-')[0] !== 'crop')) {
+            if (!parent.isCropTab && (parent.activeObj.shape && parent.activeObj.shape.split('-')[0] !== 'crop')) {
                 parent.okBtn();
                 if (!isBlazor()) {
                     parent.notify('toolbar', { prop: 'close-contextual-toolbar', onPropertyChange: false });
@@ -3704,186 +3713,6 @@ var Selection = /** @class */ (function () {
             }
         }
     };
-    Selection.prototype.adjustToScreen = function () {
-        var parent = this.parent;
-        if (!parent.isImageLoaded) {
-            return;
-        }
-        if ((!isNullOrUndefined(parent.element.querySelector('#' + parent.element.id + '_contextualToolbar')) &&
-            !parent.element.querySelector('#' + parent.element.id + '_contextualToolbar').parentElement.classList.contains('e-hide')) ||
-            (!isNullOrUndefined(parent.element.querySelector('#' + parent.element.id + '_headWrapper'))
-                && !parent.element.querySelector('#' + parent.element.id + '_headWrapper').parentElement.classList.contains('e-hide'))) {
-            parent.element.querySelector('.e-contextual-toolbar-wrapper').classList.add('e-hide');
-            parent.okBtn();
-            if (!isBlazor()) {
-                parent.notify('toolbar', { prop: 'refresh-main-toolbar', onPropertyChange: false });
-                parent.notify('toolbar', { prop: 'destroy-qa-toolbar', onPropertyChange: false });
-            }
-            else {
-                parent.updateToolbar(parent.element, 'imageLoaded');
-            }
-        }
-        if (this.isFhdEditing) {
-            if (!isBlazor()) {
-                parent.notify('toolbar', { prop: 'destroy-qa-toolbar', onPropertyChange: false });
-            }
-            else {
-                parent.updateToolbar(parent.element, 'destroyQuickAccessToolbar');
-            }
-        }
-        var isActiveObj = false;
-        if (parent.activeObj.shape !== undefined) {
-            isActiveObj = true;
-            if (parent.textArea.style.display === 'block') {
-                parent.notify('shape', { prop: 'redrawActObj', onPropertyChange: false,
-                    value: { x: null, y: null, isMouseDown: null } });
-                if (!isBlazor()) {
-                    parent.notify('toolbar', { prop: 'destroy-qa-toolbar', onPropertyChange: false });
-                }
-                else {
-                    parent.updateToolbar(parent.element, 'destroyQuickAccessToolbar');
-                }
-            }
-            else {
-                parent.notify('shape', { prop: 'updImgRatioForActObj', onPropertyChange: false });
-                parent.objColl.push(parent.activeObj);
-            }
-            parent.notify('shape', { prop: 'refreshActiveObj', onPropertyChange: false });
-        }
-        var tempFilter = this.lowerContext.filter;
-        parent.update();
-        parent.notify('shape', { prop: 'applyActObj', onPropertyChange: false, value: { isMouseDown: null } });
-        parent.notify('shape', { prop: 'refreshActiveObj', onPropertyChange: false });
-        this.lowerContext.filter = tempFilter;
-        parent.initialAdjustmentValue = tempFilter;
-        if (parent.isImageLoaded) {
-            showSpinner(parent.element);
-            parent.element.style.opacity = '0.5';
-        }
-        this.lowerContext.clearRect(0, 0, parent.lowerCanvas.width, parent.lowerCanvas.height);
-        this.upperContext.clearRect(0, 0, parent.upperCanvas.width, parent.upperCanvas.height);
-        var canvasWrapper = document.querySelector('#' + parent.element.id + '_canvasWrapper');
-        if (!isNullOrUndefined(canvasWrapper)) {
-            canvasWrapper.style.width = parent.element.offsetWidth - 2 + 'px';
-            canvasWrapper.style.height = parent.element.offsetHeight + 'px';
-            var obj_3 = { toolbarHeight: !isBlazor() ? 0 : parent.toolbarHeight };
-            if (!isBlazor()) {
-                parent.notify('toolbar', { prop: 'getToolbarHeight', value: { obj: obj_3 } });
-            }
-            if (Browser.isDevice) {
-                canvasWrapper.style.height = (parseFloat(canvasWrapper.style.height) - (2 * obj_3['toolbarHeight'])) - 3 + 'px';
-            }
-            else {
-                canvasWrapper.style.height = (parseFloat(canvasWrapper.style.height) - obj_3['toolbarHeight']) - 3 + 'px';
-            }
-        }
-        var obj = { width: 0, height: 0 };
-        parent.notify('transform', { prop: 'calcMaxDimension', onPropertyChange: false,
-            value: { width: parent.img.srcWidth, height: parent.img.srcHeight, obj: obj } });
-        var maxDimension = obj;
-        if (parent.transform.defaultZoomFactor > 0) {
-            maxDimension.width += (maxDimension.width * parent.transform.defaultZoomFactor);
-            maxDimension.height += (maxDimension.height * parent.transform.defaultZoomFactor);
-        }
-        parent.img.destLeft = (parent.lowerCanvas.clientWidth - maxDimension.width) / 2;
-        parent.img.destTop = (parent.lowerCanvas.clientHeight - maxDimension.height) / 2;
-        if (parent.transform.degree === 0 && parent.transform.currFlipState === '') {
-            if (parent.transform.defaultZoomFactor > 0) {
-                parent.img.destLeft += parent.panPoint.totalPannedPoint.x;
-                parent.img.destTop += parent.panPoint.totalPannedPoint.y;
-            }
-            parent.notify('draw', { prop: 'draw-image-to-canvas', value: { dimension: maxDimension } });
-        }
-        else {
-            parent.notify('draw', { prop: 'draw-image-to-canvas', value: { dimension: maxDimension } });
-            parent.notify('draw', { prop: 'updateCurrTransState', onPropertyChange: false,
-                value: { type: 'initial', isPreventDestination: null, isRotatePan: null } });
-            var temp = this.lowerContext.filter;
-            parent.notify('filter', { prop: 'updateBrightFilter', onPropertyChange: false });
-            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);
-            this.lowerContext.filter = temp;
-            parent.notify('draw', { prop: 'updateCurrTransState', onPropertyChange: false,
-                value: { type: 'reverse', isPreventDestination: null, isRotatePan: null } });
-        }
-        parent.notify('shape', { prop: 'zoomObjColl', onPropertyChange: false, value: { isPreventApply: null } });
-        parent.notify('freehand-draw', { prop: 'zoomFHDColl', onPropertyChange: false, value: { isPreventApply: null } });
-        if (parent.isCircleCrop) {
-            parent.notify('crop', { prop: 'cropCircle', onPropertyChange: false,
-                value: { context: this.lowerContext, isSave: null, isFlip: null } });
-        }
-        hideSpinner(parent.element);
-        parent.element.style.opacity = '1';
-        var obj1 = { defToolbarItems: null };
-        if (!isBlazor()) {
-            parent.notify('toolbar', { prop: 'getDefToolbarItems', value: { obj: obj1 } });
-            if (obj1['defToolbarItems'] && obj1['defToolbarItems'].length > 0 && (!isNullOrUndefined(document.getElementById(parent.element.id + '_toolbar')))) {
-                /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
-                var toolbar_1 = getComponent(parent.element.id + '_toolbar', 'toolbar');
-                toolbar_1.refreshOverflow();
-                if (!isNullOrUndefined(parent.element.querySelector('.e-contextual-toolbar-wrapper'))) {
-                    parent.element.querySelector('.e-contextual-toolbar-wrapper').classList.add('e-hide');
-                }
-            }
-        }
-        parent.notify('shape', { prop: 'refreshActiveObj', onPropertyChange: false });
-        this.upperContext.clearRect(0, 0, parent.upperCanvas.width, parent.upperCanvas.height);
-        if (isActiveObj) {
-            parent.activeObj = extend({}, parent.objColl[parent.objColl.length - 1], null, true);
-            parent.objColl.pop();
-            parent.notify('draw', { prop: 'drawObject', onPropertyChange: false, value: { canvas: 'duplicate', obj: parent.activeObj } });
-            if (parent.activeObj.shape === 'rectangle' || parent.activeObj.shape === 'ellipse' || parent.activeObj.shape === 'text' ||
-                parent.activeObj.shape === 'line' || parent.activeObj.shape === 'arrow' || parent.activeObj.shape === 'path') {
-                if (!isBlazor()) {
-                    parent.notify('toolbar', { prop: 'renderQAT', onPropertyChange: false, value: { isPenEdit: null } });
-                }
-                else {
-                    parent.updateToolbar(parent.element, 'quickAccessToolbar', parent.activeObj.shape);
-                }
-            }
-        }
-        if (this.isFhdEditing) {
-            if (!isBlazor()) {
-                parent.notify('toolbar', { prop: 'renderQAT', onPropertyChange: false, value: { isPenEdit: true } });
-            }
-            else {
-                parent.updateToolbar(parent.element, 'quickAccessToolbar', 'pen');
-            }
-        }
-        if ((parent.transform.degree !== 0 || parent.transform.currFlipState !== '') && parent.transform.defaultZoomFactor > 0) {
-            var totalPannedPoint = extend({}, parent.panPoint.totalPannedPoint, null, true);
-            var totalPannedInternalPoint = extend({}, parent.panPoint.totalPannedInternalPoint, null, true);
-            var totalPannedClientPoint = extend({}, parent.panPoint.totalPannedClientPoint, null, true);
-            parent.notify('transform', { prop: 'zoomAction', onPropertyChange: false,
-                value: { zoomFactor: .1, zoomPoint: null } });
-            parent.notify('transform', { prop: 'zoomAction', onPropertyChange: false,
-                value: { zoomFactor: -.1, zoomPoint: null } });
-            if (parent.transform.degree === 0) {
-                parent.img.destLeft += totalPannedPoint.x;
-                parent.img.destTop += totalPannedPoint.y;
-                parent.panPoint.totalPannedPoint = totalPannedPoint;
-                parent.notify('draw', { prop: 'updateFlipPan', value: { tempSelectionObj: null } });
-            }
-            else {
-                parent.panPoint.totalPannedInternalPoint = totalPannedInternalPoint;
-                parent.panPoint.totalPannedClientPoint = totalPannedClientPoint;
-                parent.panPoint.currentPannedPoint = { x: 0, y: 0 };
-                parent.isCropTab = true;
-                parent.notify('transform', { prop: 'rotatePan', onPropertyChange: false,
-                    value: { isCropSelection: null, isDefaultZoom: null } });
-                parent.isCropTab = false;
-            }
-        }
-        else if (parent.transform.degree !== 0 && parent.transform.cropZoomFactor > 0) {
-            parent.transform.zoomFactor = 0;
-            parent.transform.cropZoomFactor = null;
-            if (!isBlazor()) {
-                parent.notify('toolbar', { prop: 'enable-disable-btns', onPropertyChange: false });
-            }
-            else {
-                parent.updateToolbar(parent.element, 'enableDisableToolbarBtn');
-            }
-        }
-    };
     Selection.prototype.textKeyDown = function (e) {
         var parent = this.parent;
         if (String.fromCharCode(e.which) === '\r') {
@@ -4113,7 +3942,7 @@ var Selection = /** @class */ (function () {
                         x <= (actObj.activePoint.endX + (actObj.topLeftCircle.radius * 2)) &&
                         y >= (actObj.activePoint.startY - (actObj.topLeftCircle.radius * 2)) &&
                         y <= (actObj.activePoint.endY + (actObj.topLeftCircle.radius * 2))) ||
-                        (!isNullOrUndefined(rotationCirclePoint) &&
+                        (rotationCirclePoint &&
                             x >= (rotationCirclePoint.x - (actObj.topLeftCircle.radius * 2)) &&
                             x <= (rotationCirclePoint.x + (actObj.topLeftCircle.radius * 2)) &&
                             y >= (rotationCirclePoint.y - (actObj.topLeftCircle.radius * 2)) &&
@@ -4160,7 +3989,7 @@ var Selection = /** @class */ (function () {
                         value: { context: this.lowerContext, points: null } });
                 }
                 parent.notify('draw', { prop: 'clearOuterCanvas', onPropertyChange: false, value: { context: this.lowerContext } });
-                if ((!isNullOrUndefined(parent.currSelectionPoint) && parent.currSelectionPoint.shape === 'crop-circle') || parent.isCircleCrop) {
+                if ((parent.currSelectionPoint && parent.currSelectionPoint.shape === 'crop-circle') || parent.isCircleCrop) {
                     parent.notify('crop', { prop: 'cropCircle', onPropertyChange: false,
                         value: { context: this.lowerContext, isSave: null, isFlip: null } });
                 }
@@ -4187,7 +4016,7 @@ var Selection = /** @class */ (function () {
                     this.isCropSelection = true;
                 }
                 if (!this.isCropSelection && isBlazor() && isNullOrUndefined(this.parent.eventType) &&
-                    !isNullOrUndefined(parent.events) && parent.events.shapeChanging.hasDelegate === true) {
+                    parent.events && parent.events.shapeChanging.hasDelegate === true) {
                     /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
                     parent.dotNetRef.invokeMethodAsync('ShapeEventAsync', 'OnShape', shapeChangingArgs_1).then(function (shapeChangingArgs) {
                         _this.shapeEvent(shapeChangingArgs);
@@ -4209,7 +4038,7 @@ var Selection = /** @class */ (function () {
                             startY: shapeChangingArgs_1.currentShapeSettings.startY,
                             width: shapeChangingArgs_1.currentShapeSettings.width,
                             height: shapeChangingArgs_1.currentShapeSettings.height } };
-                    if (isBlazor() && !isNullOrUndefined(parent.events) && parent.events.onSelectionResizeStart.hasDelegate === true) {
+                    if (isBlazor() && parent.events && parent.events.onSelectionResizeStart.hasDelegate === true) {
                         /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
                         parent.dotNetRef.invokeMethodAsync('SelectionEventAsync', 'OnSelectionResizeStart', selectionChangingArgs).then(function (selectionChangingArgs) {
                             shapeChangingArgs_1.currentShapeSettings.startX = selectionChangingArgs.currentSelectionSettings.startX;
@@ -4278,7 +4107,7 @@ var Selection = /** @class */ (function () {
     Selection.prototype.getDistance = function (a, b) {
         var x = 0;
         var y = 0;
-        if (!isNullOrUndefined(a) && !isNullOrUndefined(b)) {
+        if (a && b) {
             x = a.x - b.x;
             y = a.y - b.y;
         }
@@ -4396,7 +4225,7 @@ var Selection = /** @class */ (function () {
                 }
                 parent.notify('freehand-draw', { prop: 'zoomFHDColl', onPropertyChange: false, value: { isPreventApply: null } });
                 this.lowerContext.filter = tempFilter;
-                if (!isNullOrUndefined(parent.activeObj.shape)) {
+                if (parent.activeObj.shape) {
                     parent.notify('shape', { prop: 'apply', onPropertyChange: false,
                         value: { shape: null, obj: null, canvas: null } });
                 }

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

@@ -90,4 +90,5 @@ export declare class Shape {
     private getSlope;
     private getIntercept;
     private setPointCollForShapeRotation;
+    private getSquarePointForRotatedShape;
 }