@syncfusion/ej2-image-editor 22.1.34 → 22.1.37

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

@@ -205,6 +205,9 @@ var Shape = /** @class */ (function () {
             case 'updateArrowRatio':
                 this.updateArrowRatio(args.value['obj']);
                 break;
+            case 'getSquarePointForRotatedShape':
+                this.getSquarePointForRotatedShape(args.value['obj'], args.value['object']);
+                break;
             case 'reset':
                 this.reset();
                 break;
@@ -228,30 +231,41 @@ var Shape = /** @class */ (function () {
     };
     Shape.prototype.drawEllipse = function (x, y, radiusX, radiusY, strokeWidth, strokeColor, fillColor) {
         this.initializeShape('ellipse');
-        var start = { x: x, y: y };
+        var start = x && y ? { x: x, y: y } : null;
         this.drawShape('ellipse', strokeWidth, strokeColor, fillColor, start, radiusX, radiusY);
     };
     Shape.prototype.drawLine = function (startX, startY, endX, endY, strokeWidth, strokeColor) {
         this.initializeShape('line');
-        var start = { x: startX, y: startY };
+        var start = startX && startY ? { x: startX, y: startY } : null;
         var width = endX - startX;
         var height = endY - startY;
         this.drawShape('line', strokeWidth, strokeColor, null, start, width, height);
     };
     Shape.prototype.drawPath = function (pointColl, strokeWidth, strokeColor) {
         this.initializeShape('path');
-        this.drawShape('path', strokeWidth, strokeColor, null, null, null, null, pointColl);
+        if (pointColl) {
+            this.drawShape('path', strokeWidth, strokeColor, null, null, null, null, pointColl);
+        }
+        else {
+            this.drawShape('line', strokeWidth, strokeColor, null, null, null, null);
+            var obj = extend({}, this.parent.objColl[this.parent.objColl.length - 1], null, true);
+            obj.shape = 'path';
+            obj.lineDraw = null;
+            obj.pointColl = [{ x: obj.activePoint.startX, y: obj.activePoint.startY },
+                { x: obj.activePoint.endX, y: obj.activePoint.endY }];
+            this.parent.objColl[this.parent.objColl.length - 1] = obj;
+        }
     };
     Shape.prototype.drawArrow = function (startX, startY, endX, endY, strokeWidth, strokeColor, arrowStart, arrowEnd) {
         this.initializeShape('arrow');
-        var start = { x: startX, y: startY };
+        var start = startX && startY ? { x: startX, y: startY } : null;
         var width = endX - startX;
         var height = endY - startY;
         this.drawShape('arrow', strokeWidth, strokeColor, null, start, width, height, null, arrowStart, arrowEnd);
     };
     Shape.prototype.drawRectangle = function (x, y, width, height, strokeWidth, strokeColor, fillColor) {
         this.initializeShape('rectangle');
-        var start = { x: x, y: y };
+        var start = x && y ? { x: x, y: y } : null;
         this.drawShape('rectangle', strokeWidth, strokeColor, fillColor, start, width, height);
     };
     Shape.prototype.drawText = function (x, y, text, fontFamily, fontSize, bold, italic, color) {
@@ -413,7 +427,7 @@ var Shape = /** @class */ (function () {
         var parent = this.parent;
         if (parent.activeObj.shape === 'line' || parent.activeObj.shape === 'arrow') {
             parent.activeObj.pointColl = this.getLinePoints(parent.activeObj.activePoint.startX, parent.activeObj.activePoint.startY, parent.activeObj.activePoint.endX, parent.activeObj.activePoint.endY);
-            if (!isNullOrUndefined(parent.activeObj.pointColl)) {
+            if (parent.activeObj.pointColl) {
                 for (var i = 0, len = parent.activeObj.pointColl.length; i < len; i++) {
                     parent.activeObj.pointColl[i].ratioX = (parent.activeObj.pointColl[i].x -
                         parent.img.destLeft) / parent.img.destWidth;
@@ -1536,7 +1550,7 @@ var Shape = /** @class */ (function () {
                 this.upperContext.clearRect(0, 0, this.parent.upperCanvas.width, this.parent.upperCanvas.height);
                 this.lowerContext.clearRect(0, 0, this.parent.upperCanvas.width, this.parent.upperCanvas.height);
                 parent.notify('draw', { prop: 'redrawImgWithObj', onPropertyChange: false });
-                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 } });
                 }
@@ -2254,8 +2268,8 @@ var Shape = /** @class */ (function () {
     };
     Shape.prototype.isPointsInRange = function (x, y, obj) {
         var inRange = false;
-        if (!isNullOrUndefined(x) && !isNullOrUndefined(y) && x >= 0 && y >= 0 &&
-            x <= this.parent.lowerCanvas.width && y <= this.parent.lowerCanvas.width) {
+        if (!isNullOrUndefined(x) && !isNullOrUndefined(y) && x >= this.parent.img.destLeft && y >= this.parent.img.destTop &&
+            x <= this.parent.img.destLeft + this.parent.img.destWidth && y <= this.parent.img.destTop + this.parent.img.destHeight) {
             inRange = true;
         }
         obj['inRange'] = inRange;
@@ -2412,8 +2426,10 @@ var Shape = /** @class */ (function () {
                                     isApplyBtn: null, isCropping: null, isZooming: null, cType: null } });
                         }
                         parent.notify('toolbar', { prop: 'update-toolbar-items', onPropertyChange: false });
+                        parent.notify('toolbar', { prop: 'renderQAT', onPropertyChange: false, value: { isPenEdit: null } });
                     }
                     else {
+                        parent.updateToolbar(parent.element, parent.activeObj.shape);
                         if (parent.activeObj.shape === 'path') {
                             parent.updateToolbar(this.parent.element, 'path', 'pathQuickAccessToolbar');
                         }
@@ -2435,8 +2451,13 @@ var Shape = /** @class */ (function () {
                     isSelected = true;
                     parent.notify('freehand-draw', { prop: 'selectFhd', value: { id: id } });
                     if (!isBlazor()) {
+                        parent.notify('toolbar', { prop: 'renderQAT', onPropertyChange: false, value: { isPenEdit: true } });
                         parent.notify('toolbar', { prop: 'update-toolbar-items', onPropertyChange: false });
                     }
+                    else {
+                        parent.updateToolbar(parent.element, 'pen');
+                        parent.updateToolbar(parent.element, 'quickAccessToolbar', 'pen');
+                    }
                 }
                 else {
                     isSelected = false;
@@ -2652,6 +2673,73 @@ var Shape = /** @class */ (function () {
             }
         }
     };
+    Shape.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 (object) {
+            object['activePoint'] = point;
+        }
+        return point;
+    };
     return Shape;
 }());
 export { Shape };

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

@@ -1,5 +1,6 @@
-import { Browser, extend, isBlazor, isNullOrUndefined } from '@syncfusion/ej2-base';
+import { Browser, extend, getComponent, isBlazor, isNullOrUndefined } from '@syncfusion/ej2-base';
 import { Direction } from '../index';
+import { hideSpinner, showSpinner } from '@syncfusion/ej2-popups';
 var Transform = /** @class */ (function () {
     function Transform(parent) {
         this.isReverseFlip = false; // True when rotate method is called from iteration
@@ -176,7 +177,7 @@ var Transform = /** @class */ (function () {
         var parent = this.parent;
         var transitionArgs = { cancel: false, previousDegree: parent.transform.degree,
             currentDegree: Math.abs(parent.transform.degree + degree) === 360 ? 0 : parent.transform.degree + degree };
-        if (!this.isPreventSelect && isBlazor() && !isNullOrUndefined(parent.events) && parent.events.rotating.hasDelegate === true) {
+        if (!this.isPreventSelect && isBlazor() && parent.events && parent.events.rotating.hasDelegate === true) {
             /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
             parent.dotNetRef.invokeMethodAsync('RotateEventAsync', 'OnRotate', transitionArgs).then(function (args) {
                 _this.rotateEvent(args, degree);
@@ -208,7 +209,7 @@ var Transform = /** @class */ (function () {
             parent.afterCropActions.push(degree === 90 ? 'rotateRight' : 'rotateLeft');
             var splitWords = [];
             var activeObjShape = void 0;
-            if (!isNullOrUndefined(parent.activeObj.activePoint) && !isNullOrUndefined(parent.activeObj.shape)) {
+            if (parent.activeObj.activePoint && parent.activeObj.shape) {
                 if (parent.activeObj.shape !== undefined) {
                     splitWords = parent.activeObj.shape.split('-');
                 }
@@ -362,7 +363,7 @@ var Transform = /** @class */ (function () {
         var parent = this.parent;
         var transitionArgs = { direction: direction, cancel: false,
             previousDirection: parent.toPascalCase(parent.transform.currFlipState) };
-        if (!this.isPreventSelect && isBlazor() && !isNullOrUndefined(parent.events) && parent.events.flipping.hasDelegate === true) {
+        if (!this.isPreventSelect && isBlazor() && parent.events && parent.events.flipping.hasDelegate === true) {
             /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
             parent.dotNetRef.invokeMethodAsync('FlipEventAsync', 'OnFlip', transitionArgs).then(function (args) {
                 _this.flipEvent(args, direction);
@@ -500,7 +501,7 @@ var Transform = /** @class */ (function () {
             parent.notify('crop', { prop: 'cropCircle', onPropertyChange: false,
                 value: { context: this.lowerContext, isSave: null, isFlip: null } });
         }
-        if (!isNullOrUndefined(activeObjShape)) {
+        if (activeObjShape) {
             this.upperContext.clearRect(0, 0, parent.upperCanvas.width, parent.upperCanvas.height);
             parent.activeObj = extend({}, parent.objColl[parent.objColl.length - 1], {}, true);
             parent.objColl.pop();
@@ -632,13 +633,13 @@ var Transform = /** @class */ (function () {
                 this.tempActiveObj = extend({}, parent.activeObj, {}, true);
                 parent.isCropTab = true;
             }
-            else if (!isNullOrUndefined(parent.activeObj.shape) && splitWords[0] !== 'crop') {
+            else if (parent.activeObj.shape && splitWords[0] !== 'crop') {
                 this.isShape = true;
             }
             var obj = { zoomType: null };
             parent.notify('selection', { prop: 'getZoomType', onPropertyChange: false, value: { obj: obj } });
             if (isNullOrUndefined(zoomPoint)) {
-                if (parent.isCropTab && !isNullOrUndefined(this.tempActiveObj)) {
+                if (parent.isCropTab && this.tempActiveObj) {
                     zoomPoint = { x: parent.activeObj.activePoint.startX + (parent.activeObj.activePoint.width / 2),
                         y: parent.activeObj.activePoint.startY + (parent.activeObj.activePoint.height / 2) };
                 }
@@ -652,7 +653,7 @@ var Transform = /** @class */ (function () {
             var previousZoomFactor = parent.zoomSettings.zoomFactor - (zoomFactor * 10);
             var zoomEventArgs = { zoomPoint: zoomPoint, cancel: false, previousZoomFactor: previousZoomFactor,
                 currentZoomFactor: parent.zoomSettings.zoomFactor, zoomTrigger: obj['zoomType'] };
-            if (!parent.isCropToolbar && isBlazor() && !isNullOrUndefined(parent.events) && parent.events.zooming.hasDelegate === true) {
+            if (!parent.isCropToolbar && isBlazor() && parent.events && parent.events.zooming.hasDelegate === true) {
                 /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
                 parent.dotNetRef.invokeMethodAsync('ZoomEventAsync', 'OnZoom', zoomEventArgs).then(function (args) {
                     _this.zoomEvent(args, zoomFactor);
@@ -789,7 +790,7 @@ var Transform = /** @class */ (function () {
             }
         }
         this.autoEnablePan();
-        if (!isNullOrUndefined(this.tempActiveObj)) {
+        if (this.tempActiveObj) {
             parent.activeObj = extend({}, this.tempActiveObj, {}, true);
         }
         if (parent.activeObj.shape === 'crop-custom') {
@@ -1096,7 +1097,7 @@ var Transform = /** @class */ (function () {
         var obj = { panDown: null };
         parent.notify('selection', { prop: 'getPanDown', onPropertyChange: false, value: { obj: obj } });
         var panEventArgs = { startPoint: obj['panDown'], endPoint: this.panMove, cancel: false };
-        if (isBlazor() && isNullOrUndefined(this.parent.eventType) && !isNullOrUndefined(parent.events) && parent.events.onPanStart.hasDelegate === true) {
+        if (isBlazor() && isNullOrUndefined(this.parent.eventType) && parent.events && parent.events.onPanStart.hasDelegate === true) {
             this.parent.eventType = 'pan';
             this.parent.panEventArgs = panEventArgs;
             /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
@@ -1310,7 +1311,7 @@ var Transform = /** @class */ (function () {
         var tempDegree = parent.transform.degree;
         var rotatePanActiveObj;
         var object = { selPointColl: null };
-        if (!isNullOrUndefined(parent.activeObj.activePoint) && !isNullOrUndefined(parent.activeObj.shape)) {
+        if (parent.activeObj.activePoint && parent.activeObj.shape) {
             rotatePanActiveObj = extend({}, parent.activeObj, {}, true);
         }
         var tempObjColl = extend([], parent.objColl, [], true);
@@ -1381,7 +1382,7 @@ var Transform = /** @class */ (function () {
         parent.notify('draw', { prop: 'clearOuterCanvas', onPropertyChange: false, value: { context: this.lowerContext } });
         this.upperContext.clearRect(0, 0, parent.upperCanvas.width, parent.upperCanvas.height);
         parent.activeObj = extend({}, rotatePanActiveObj, {}, true);
-        if (!isNullOrUndefined(parent.activeObj.activePoint)) {
+        if (parent.activeObj.activePoint) {
             parent.notify('draw', { prop: 'drawObject', onPropertyChange: false, value: { canvas: 'duplicate', obj: parent.activeObj, isCropRatio: null,
                     points: null, isPreventDrag: true, saveContext: null, isPreventSelection: null } });
         }
@@ -1549,26 +1550,72 @@ var Transform = /** @class */ (function () {
     Transform.prototype.update = function () {
         var parent = this.parent;
         var toolbarHeight = 0;
+        var isActiveObj = false;
+        var freehandObj = { bool: false };
+        if (parent.isImageLoaded) {
+            if ((parent.element.querySelector('#' + parent.element.id + '_contextualToolbar') &&
+                !parent.element.querySelector('#' + parent.element.id + '_contextualToolbar').parentElement.classList.contains('e-hide')) ||
+                (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');
+                }
+            }
+            parent.notify('selection', { prop: 'getFreehandDrawEditing', onPropertyChange: false, value: { obj: freehandObj } });
+            if (freehandObj['bool']) {
+                if (!isBlazor()) {
+                    parent.notify('toolbar', { prop: 'destroy-qa-toolbar', onPropertyChange: false });
+                }
+                else {
+                    parent.updateToolbar(parent.element, 'destroyQuickAccessToolbar');
+                }
+            }
+            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;
         var canvasWrapper = document.querySelector('#' + parent.element.id + '_canvasWrapper');
-        if (!isNullOrUndefined(canvasWrapper)) {
+        if (canvasWrapper) {
             canvasWrapper.style.width = parent.element.offsetWidth - 2 + 'px';
         }
         parent.lowerCanvas.width = parent.upperCanvas.width = parent.element.offsetWidth - 2;
-        if (!isNullOrUndefined(parent.toolbarTemplate)) {
-            parent.notify('toolbar', { prop: 'setToolbarHeight', value: { height: 0 } });
+        if (parent.toolbarTemplate) {
+            toolbarHeight = parent.element.querySelector('#' + parent.element.id + '_toolbarArea').clientHeight;
         }
         else if (parent.element.querySelector('#' + parent.element.id + '_toolbar')) {
             toolbarHeight = parent.element.querySelector('#' + parent.element.id + '_toolbar').clientHeight;
-            parent.notify('toolbar', { prop: 'setToolbarHeight', value: { height: toolbarHeight } });
         }
+        parent.notify('toolbar', { prop: 'setToolbarHeight', value: { height: toolbarHeight } });
         if (Browser.isDevice) {
-            if (!isNullOrUndefined(canvasWrapper)) {
+            if (canvasWrapper) {
                 canvasWrapper.style.height = parent.element.offsetHeight - (2 * toolbarHeight) - 5 + 'px';
             }
             parent.lowerCanvas.height = parent.upperCanvas.height = parent.element.offsetHeight - (2 * toolbarHeight) - 5;
         }
         else {
-            if (!isNullOrUndefined(canvasWrapper)) {
+            if (canvasWrapper) {
                 canvasWrapper.style.height = parent.element.offsetHeight - toolbarHeight - 3 + 'px';
             }
             parent.lowerCanvas.height = parent.upperCanvas.height = parent.element.offsetHeight - toolbarHeight - 3;
@@ -1577,10 +1624,144 @@ var Transform = /** @class */ (function () {
             'brightness(' + 1 + ') ' + 'contrast(' + 100 + '%) ' + 'hue-rotate(' + 0 + 'deg) ' +
                 'saturate(' + 100 + '%) ' + 'opacity(' + 1 + ') ' + 'blur(' + 0 + 'px) ' + 'sepia(0%) ' + 'grayscale(0%) ' + 'invert(0%)';
         parent.notify('filter', { prop: 'setAdjustmentValue', onPropertyChange: false, value: { adjustmentValue: this.lowerContext.filter } });
-        this.parent.canvasFilter = this.lowerContext.filter;
+        parent.canvasFilter = this.lowerContext.filter;
         this.parent.initialAdjustmentValue = this.lowerContext.filter;
-        this.parent.clearContext(this.lowerContext);
+        parent.clearContext(this.lowerContext);
         this.parent.clearContext(this.upperContext);
+        if (parent.isImageLoaded) {
+            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);
+            if (canvasWrapper) {
+                canvasWrapper.style.width = parent.element.offsetWidth - 2 + 'px';
+                canvasWrapper.style.height = parent.element.offsetHeight + 'px';
+                var obj_1 = { toolbarHeight: !isBlazor() ? 0 : parent.toolbarHeight };
+                if (!isBlazor()) {
+                    parent.notify('toolbar', { prop: 'getToolbarHeight', value: { obj: obj_1 } });
+                }
+                if (Browser.isDevice) {
+                    canvasWrapper.style.height = (parseFloat(canvasWrapper.style.height) - (2 * obj_1['toolbarHeight'])) - 3 + 'px';
+                }
+                else {
+                    canvasWrapper.style.height = (parseFloat(canvasWrapper.style.height) - obj_1['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 && 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 (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();
+                if (parent.activeObj.activePoint.width !== 0 && parent.activeObj.activePoint.height !== 0) {
+                    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 (freehandObj['bool']) {
+                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');
+                }
+            }
+        }
     };
     Transform.prototype.calcMaxDimension = function (width, height, obj) {
         var object = { toolbarHeight: 0 };
@@ -1611,7 +1792,15 @@ var Transform = /** @class */ (function () {
             cssMaxWidth = width * heightScale;
             cssMaxHeight = height * heightScale;
         }
-        if (!isNullOrUndefined(obj)) {
+        var cropObj = { bool: null };
+        this.parent.notify('crop', { prop: 'getPreventScaling', onPropertyChange: false,
+            value: { obj: cropObj } });
+        if (cropObj['bool'] && this.parent.cropObj.activeObj.activePoint &&
+            this.parent.cropObj.activeObj.activePoint.width !== 0 && this.parent.cropObj.activeObj.activePoint.height !== 0) {
+            cssMaxWidth = this.parent.cropObj.activeObj.activePoint.width;
+            cssMaxHeight = this.parent.cropObj.activeObj.activePoint.height;
+        }
+        if (obj) {
             obj['width'] = cssMaxWidth;
             obj['height'] = cssMaxHeight;
         }
@@ -1659,7 +1848,7 @@ var Transform = /** @class */ (function () {
         }
         this.limitPan();
         parent.activeObj = tempActObj;
-        if (!isNullOrUndefined(obj)) {
+        if (obj) {
             obj['x'] = parent.img.destLeft - tempDestLeft;
             obj['y'] = parent.img.destTop - tempDestTop;
         }

package/src/image-editor/action/undo-redo.js

@@ -24,10 +24,10 @@ var UndoRedo = /** @class */ (function () {
         this.parent.off('destroyed', this.destroy);
     };
     UndoRedo.prototype.initializeUrPvtProp = function () {
-        if (!isNullOrUndefined(this.parent.lowerCanvas)) {
+        if (this.parent.lowerCanvas) {
             this.lowerContext = this.parent.lowerCanvas.getContext('2d');
         }
-        if (!isNullOrUndefined(this.parent.upperCanvas)) {
+        if (this.parent.upperCanvas) {
             this.upperContext = this.parent.upperCanvas.getContext('2d');
         }
     };
@@ -247,14 +247,16 @@ var UndoRedo = /** @class */ (function () {
         if (!parent.disabled && parent.isImageLoaded) {
             if (this.undoRedoStep > 0) {
                 this.refreshToolbarActions();
-                if (!isNullOrUndefined(parent.activeObj.activePoint) && parent.activeObj.activePoint.width !== 0) {
+                if (parent.activeObj.activePoint && parent.activeObj.activePoint.width !== 0) {
                     this.tempActObj = parent.activeObj;
                 }
                 parent.notify('shape', { prop: 'refreshActiveObj', onPropertyChange: false });
                 this.undoRedoStep--;
                 if (!isBlazor()) {
                     parent.notify('toolbar', { prop: 'enable-disable-btns' });
-                    parent.element.querySelector('.e-contextual-toolbar-wrapper').classList.add('e-hide');
+                    if (parent.element.querySelector('.e-contextual-toolbar-wrapper')) {
+                        parent.element.querySelector('.e-contextual-toolbar-wrapper').classList.add('e-hide');
+                    }
                 }
                 else {
                     parent.updateToolbar(parent.element, 'enableDisableToolbarBtn');
@@ -357,7 +359,7 @@ var UndoRedo = /** @class */ (function () {
                 parent.cropObj = extend({}, obj.currentCropObj, {}, true);
                 parent.afterCropActions = obj.currentObj.afterCropActions;
                 this.lowerContext.filter = obj.currentObj.filter;
-                if (!isBlazor()) {
+                if (!isBlazor() && parent.element.querySelector('.e-contextual-toolbar-wrapper')) {
                     parent.element.querySelector('.e-contextual-toolbar-wrapper').classList.add('e-hide');
                 }
                 parent.canvasFilter = this.lowerContext.filter;
@@ -419,10 +421,10 @@ var UndoRedo = /** @class */ (function () {
                 if (obj.operation === 'crop' && !obj.isCircleCrop) {
                     parent.isCircleCrop = false;
                 }
-                if (obj.operation === 'crop' && !isNullOrUndefined(obj.currentObj.currSelectionPoint)) {
+                if (obj.operation === 'crop' && obj.currentObj.currSelectionPoint) {
                     parent.currSelectionPoint = extend({}, obj.currentObj.currSelectionPoint, {}, true);
                 }
-                if (!isNullOrUndefined(parent.currSelectionPoint) && isNullOrUndefined(parent.currSelectionPoint.shape)) {
+                if (parent.currSelectionPoint && isNullOrUndefined(parent.currSelectionPoint.shape)) {
                     parent.currSelectionPoint = null;
                 }
                 this.endUndoRedo(obj.operation, false);

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

@@ -270,7 +270,7 @@ export interface ImageEditorModel extends ComponentModel{
      * - Save: save the modified image.
      * - Open: open an image to perform editing.
      * - Reset: reset the modification and restore the original image.
-     * 
+     *
      * {% codeBlock src='image-editor/toolbar/index.md' %}{% endcodeBlock %}
      *
      * @remarks
@@ -285,7 +285,7 @@ export interface ImageEditorModel extends ComponentModel{
      * A string that specifies a custom template for the toolbar of the image editor. If this property is defined, the 'toolbar' property will not have any effect.
      *
      * {% codeBlock src='image-editor/toolbarTemplate/index.md' %}{% endcodeBlock %}
-     * 
+     *
      * @remarks
      * Use this property if you want to customize the entire toolbar in your own way. The template should be a string that contains the HTML markup for the custom toolbar.
      *

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

@@ -939,9 +939,7 @@ export declare class ImageEditor extends Component<HTMLDivElement> implements IN
      * @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
      */
     drawArrow(startX?: number, startY?: number, endX?: number, endY?: number, strokeWidth?: number, strokeColor?: string, arrowStart?: ArrowheadType, arrowEnd?: ArrowheadType): boolean;
     /**
@@ -1083,9 +1081,6 @@ export declare class ImageEditor extends Component<HTMLDivElement> implements IN
     private setPenStroke;
     private updateFreehandDrawColorChange;
     private setInitialZoomState;
-    private moveToSelectionRange;
-    private isSelectionBiggerThanCanvas;
-    private isSelectionOutsideCanvas;
     /**
      * Set the old item Transform item state.
      *
@@ -1150,16 +1145,6 @@ export declare class ImageEditor extends Component<HTMLDivElement> implements IN
      * @returns {void}.
      */
     setCurrAdjustmentValue(type: string, value: number): void;
-    /**
-     * 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.
-     */
-    getSquarePointForRotatedShape(obj: SelectionPoint, object?: Object): ActivePoint;
     /**
      * Get the square point for path.
      *