@syncfusion/ej2-image-editor 22.2.10 → 23.1.36

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

@@ -10,6 +10,8 @@ var Transform = /** @class */ (function () {
         this.prevZoomValue = 1;
         this.cropDimension = { width: 0, height: 0 };
         this.isPreventSelect = false;
+        this.preventDownScale = false;
+        this.resizedImgAngle = null;
         this.parent = parent;
         this.addEventListener();
     }
@@ -40,7 +42,7 @@ var Transform = /** @class */ (function () {
                 this.setDestPointsForFlipState();
                 break;
             case 'zoomAction':
-                this.zoomAction(args.value['zoomFactor'], args.value['zoomPoint']);
+                this.zoomAction(args.value['zoomFactor'], args.value['zoomPoint'], args.value['isResize']);
                 break;
             case 'disableZoomOutBtn':
                 this.disableZoomOutBtn(args.value['isZoomOut']);
@@ -94,7 +96,7 @@ var Transform = /** @class */ (function () {
                 this.update();
                 break;
             case 'calcMaxDimension':
-                this.calcMaxDimension(args.value['width'], args.value['height'], args.value['obj']);
+                this.calcMaxDimension(args.value['width'], args.value['height'], args.value['obj'], args.value['isImgShape']);
                 break;
             case 'updatePanPoints':
                 this.updatePanPoints(args.value['panRegion'], args.value['obj']);
@@ -150,6 +152,21 @@ var Transform = /** @class */ (function () {
             case 'setPreventSelect':
                 this.isPreventSelect = args.value['bool'];
                 break;
+            case 'resizeImage':
+                this.resizeImage(args.value['width'], args.value['height']);
+                break;
+            case 'resizeCrop':
+                this.resizeCrop(args.value['width'], args.value['height']);
+                break;
+            case 'setPreventDownScale':
+                this.preventDownScale = args.value['bool'];
+                break;
+            case 'updateResize':
+                this.updateResize();
+                break;
+            case 'resize':
+                this.resize(args.value['width'], args.value['height'], args.value['isAspectRatio']);
+                break;
             case 'reset':
                 this.reset();
                 break;
@@ -174,9 +191,10 @@ var Transform = /** @class */ (function () {
         this.currDestPoint = null;
         this.isReverseRotate = false;
         this.flipColl = [];
+        this.resizedImgAngle = null;
         this.transCurrObj = null;
         this.prevZoomValue = 1;
-        this.isPreventSelect = false;
+        this.isPreventSelect = this.preventDownScale = false;
     };
     Transform.prototype.rotateImage = function (degree) {
         var _this = this;
@@ -311,8 +329,7 @@ var Transform = /** @class */ (function () {
         this.lowerContext.rotate(Math.PI / 180 * degree);
         this.lowerContext.translate(-parent.lowerCanvas.width / 2, -parent.lowerCanvas.height / 2);
         var temp = this.lowerContext.filter;
-        this.parent.notify('filter', { prop: 'updateBrightFilter', onPropertyChange: false });
-        this.lowerContext.drawImage(this.parent.baseImg, this.parent.img.srcLeft, this.parent.img.srcTop, this.parent.img.srcWidth, this.parent.img.srcHeight, this.parent.img.destLeft, this.parent.img.destTop, this.parent.img.destWidth, this.parent.img.destHeight);
+        parent.notify('draw', { prop: 'drawImage', onPropertyChange: false });
         this.lowerContext.filter = temp;
         this.lowerContext.translate(parent.lowerCanvas.width / 2, parent.lowerCanvas.height / 2);
         this.lowerContext.rotate(Math.PI / 180 * -degree);
@@ -337,8 +354,8 @@ var Transform = /** @class */ (function () {
             }
             parent.img.srcLeft = 0;
             parent.img.srcTop = 0;
-            parent.img.srcWidth = parent.baseImg.width;
-            parent.img.srcHeight = parent.baseImg.height;
+            parent.img.srcWidth = parent.baseImgCanvas.width;
+            parent.img.srcHeight = parent.baseImgCanvas.height;
             parent.img.destLeft = this.currDestPoint.startX;
             parent.img.destTop = this.currDestPoint.startY;
             parent.img.destWidth = this.currDestPoint.width;
@@ -368,7 +385,7 @@ var Transform = /** @class */ (function () {
         var _this = this;
         var parent = this.parent;
         var transitionArgs = { direction: direction, cancel: false,
-            previousDirection: parent.toPascalCase(parent.transform.currFlipState) };
+            previousDirection: parent.toPascalCase(parent.transform.currFlipState || direction) };
         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) {
@@ -441,8 +458,7 @@ var Transform = /** @class */ (function () {
             parent.img.destTop += parent.panPoint.totalPannedInternalPoint.y;
         }
         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);
+        parent.notify('draw', { prop: 'drawImage', onPropertyChange: false });
         this.lowerContext.filter = temp;
         parent.notify('draw', { prop: 'setImageEdited', onPropertyChange: false });
         this.updateFlipState(direction.toLowerCase());
@@ -594,13 +610,13 @@ var Transform = /** @class */ (function () {
             }
         }
     };
-    Transform.prototype.zoomAction = function (zoomFactor, zoomPoint) {
+    Transform.prototype.zoomAction = function (zoomFactor, zoomPoint, isResize) {
         var _this = this;
         var parent = this.parent;
         if (!parent.disabled && parent.isImageLoaded) {
-            if (parent.zoomSettings.zoomFactor >= parent.zoomSettings.maxZoomFactor && zoomFactor > 0 ||
+            if (isNullOrUndefined(isResize) && (parent.zoomSettings.zoomFactor >= parent.zoomSettings.maxZoomFactor && zoomFactor > 0 ||
                 (parent.zoomSettings.zoomFactor > parent.zoomSettings.minZoomFactor && zoomFactor < 0 && this.disableZoomOutBtn(true)) ||
-                (parent.zoomSettings.zoomFactor <= parent.zoomSettings.minZoomFactor && zoomFactor < 0)) {
+                (parent.zoomSettings.zoomFactor <= parent.zoomSettings.minZoomFactor && zoomFactor < 0))) {
                 if (!isBlazor()) {
                     parent.notify('toolbar', { prop: 'zoom-up-handler', onPropertyChange: false });
                 }
@@ -609,7 +625,7 @@ var Transform = /** @class */ (function () {
             parent.notify('draw', { prop: 'setImageEdited', onPropertyChange: false });
             var tempZoomFactor = zoomFactor;
             zoomFactor = tempZoomFactor > 0 ? 0.1 : -0.1;
-            for (var i = 0; i < Math.abs(tempZoomFactor / 0.1); i++) {
+            for (var i = 0; i < Math.round(Math.abs(tempZoomFactor / 0.1)); i++) {
                 if (this.prevZoomValue === 1) {
                     this.prevZoomValue += zoomFactor > 0 ? zoomFactor * 10 : (zoomFactor * 10) / 10;
                 }
@@ -681,7 +697,7 @@ var Transform = /** @class */ (function () {
         if (!isBlazor()) {
             parent.notify('toolbar', { prop: 'close-contextual-toolbar', onPropertyChange: false });
         }
-        else if (parent.element.querySelector('.e-contextual-toolbar-wrapper') && !parent.element.querySelector('.e-contextual-toolbar-wrapper').classList.contains('e-hidden')) {
+        else if (parent.currentToolbar !== 'resize-toolbar' && parent.element.querySelector('.e-contextual-toolbar-wrapper') && !parent.element.querySelector('.e-contextual-toolbar-wrapper').classList.contains('e-hidden')) {
             parent.updateToolbar(parent.element, 'closeContextualToolbar');
         }
         parent.notify('shape', { prop: 'redrawActObj', onPropertyChange: false,
@@ -697,7 +713,10 @@ var Transform = /** @class */ (function () {
                 parent.notify('shape', { prop: 'redrawActObj', onPropertyChange: false,
                     value: { x: null, y: null, isMouseDown: null } });
                 parent.panPoint.currentPannedPoint = { x: 0, y: 0 };
+                var temp = parent.allowDownScale;
+                parent.allowDownScale = false;
                 this.rotatePan(true, true);
+                parent.allowDownScale = temp;
             }
             else if (parent.transform.currFlipState !== '') {
                 parent.panPoint.totalPannedPoint = { x: 0, y: 0 };
@@ -925,8 +944,7 @@ var Transform = /** @class */ (function () {
         parent.notify('draw', { prop: 'currTransState', onPropertyChange: false,
             value: { type: 'initial', isPreventDestination: null, context: null, isPreventCircleCrop: 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);
+        parent.notify('draw', { prop: 'drawImage', onPropertyChange: false });
         this.lowerContext.filter = temp;
         parent.notify('draw', { prop: 'currTransState', onPropertyChange: false,
             value: { type: 'reverse', isPreventDestination: true, context: null, isPreventCircleCrop: null } });
@@ -968,8 +986,7 @@ var Transform = /** @class */ (function () {
         parent.notify('draw', { prop: 'setRotateZoom', onPropertyChange: false, value: { isRotateZoom: true } });
         parent.notify('draw', { prop: 'setDestPoints', onPropertyChange: false });
         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);
+        parent.notify('draw', { prop: 'drawImage', onPropertyChange: false });
         this.lowerContext.filter = temp;
         parent.notify('draw', { prop: 'setRotateZoom', onPropertyChange: false, value: { isRotateZoom: false } });
         parent.notify('draw', { prop: 'updateCurrTransState', onPropertyChange: false,
@@ -1212,8 +1229,7 @@ var Transform = /** @class */ (function () {
         parent.img.destWidth = destPoints.width;
         parent.img.destHeight = destPoints.height;
         this.setDestPointsForFlipState();
-        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);
+        parent.notify('draw', { prop: 'drawImage', onPropertyChange: false });
         if ((parent.currSelectionPoint && parent.currSelectionPoint.shape === 'crop-circle') || parent.isCircleCrop) {
             parent.notify('crop', { prop: 'cropCircle', onPropertyChange: false,
                 value: { context: this.lowerContext, isSave: null, isFlip: true } });
@@ -1351,8 +1367,7 @@ var Transform = /** @class */ (function () {
             parent.panPoint.totalPannedInternalPoint.y = parent.img.destTop - initialDestTop;
         }
         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);
+        parent.notify('draw', { prop: 'drawImage', onPropertyChange: false });
         parent.notify('draw', { prop: 'setRotateZoom', onPropertyChange: false, value: { isRotateZoom: false } });
         parent.notify('draw', { prop: 'updateCurrTransState', onPropertyChange: false,
             value: { type: 'reverse', isPreventDestination: true, isRotatePan: true } });
@@ -1561,9 +1576,15 @@ var Transform = /** @class */ (function () {
     Transform.prototype.update = function () {
         var parent = this.parent;
         var toolbarHeight = 0;
+        var isFrameToolbar = false;
         var isActiveObj = false;
         var freehandObj = { bool: false };
         if (parent.isImageLoaded) {
+            var frameObj = { bool: null };
+            parent.notify('toolbar', { prop: 'getFrameToolbar', onPropertyChange: false, value: { obj: frameObj } });
+            if (frameObj['bool'] || (isBlazor() && parent.currentToolbar == 'frame-toolbar')) {
+                isFrameToolbar = true;
+            }
             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')
@@ -1666,8 +1687,7 @@ var Transform = /** @class */ (function () {
                 }
             }
             var obj = { width: 0, height: 0 };
-            parent.notify('transform', { prop: 'calcMaxDimension', onPropertyChange: false,
-                value: { width: parent.img.srcWidth, height: parent.img.srcHeight, obj: obj } });
+            this.calcMaxDimension(parent.img.srcWidth, parent.img.srcHeight, obj);
             var maxDimension = obj;
             if (parent.transform.defaultZoomFactor > 0) {
                 maxDimension.width += (maxDimension.width * parent.transform.defaultZoomFactor);
@@ -1687,8 +1707,7 @@ var Transform = /** @class */ (function () {
                 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);
+                parent.notify('draw', { prop: 'drawImage', onPropertyChange: false });
                 this.lowerContext.filter = temp;
                 parent.notify('draw', { prop: 'updateCurrTransState', onPropertyChange: false,
                     value: { type: 'reverse', isPreventDestination: null, isRotatePan: null } });
@@ -1716,12 +1735,15 @@ var Transform = /** @class */ (function () {
             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);
+                var 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 (activeObj.activePoint.width !== 0 && activeObj.activePoint.height !== 0) {
+                    this.lowerContext.clearRect(0, 0, parent.lowerCanvas.width, parent.lowerCanvas.height);
+                    parent.notify('draw', { prop: 'render-image', value: { isMouseWheel: true } });
+                    parent.notify('draw', { prop: 'drawObject', onPropertyChange: false, value: { canvas: 'duplicate', obj: 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') {
+                        parent.activeObj.shape === 'line' || parent.activeObj.shape === 'arrow' || parent.activeObj.shape === 'path' ||
+                        parent.activeObj.shape === 'image') {
                         if (!isBlazor()) {
                             parent.notify('toolbar', { prop: 'renderQAT', onPropertyChange: false, value: { isPenEdit: null } });
                         }
@@ -1739,14 +1761,33 @@ var Transform = /** @class */ (function () {
                     parent.updateToolbar(parent.element, 'quickAccessToolbar', 'pen');
                 }
             }
+            if (isFrameToolbar) {
+                if (isBlazor()) {
+                    parent.updateToolbar(parent.element, 'frame');
+                }
+                else {
+                    parent.notify('toolbar', { prop: 'callFrameToolbar', onPropertyChange: false });
+                }
+            }
+            else if (parent.isResize) {
+                parent.aspectWidth = Math.ceil(parent.img.destWidth);
+                parent.aspectHeight = Math.ceil(parent.img.destHeight);
+                if (isBlazor()) {
+                    parent.updateToolbar(parent.element, 'resize');
+                }
+                else {
+                    parent.notify('toolbar', { prop: 'refresh-toolbar', onPropertyChange: false, value: { type: 'resize',
+                            isApplyBtn: false, isCropping: false } });
+                    parent.notify('toolbar', { prop: 'refresh-toolbar', onPropertyChange: false, value: { type: 'resize',
+                            isApplyBtn: false, isCropping: false } });
+                }
+            }
             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 } });
+                this.zoomAction(.1);
+                this.zoomAction(-.1);
                 if (parent.transform.degree === 0) {
                     parent.img.destLeft += totalPannedPoint.x;
                     parent.img.destTop += totalPannedPoint.y;
@@ -1758,8 +1799,7 @@ var Transform = /** @class */ (function () {
                     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 } });
+                    this.rotatePan();
                     parent.isCropTab = false;
                 }
             }
@@ -1775,7 +1815,7 @@ var Transform = /** @class */ (function () {
             }
         }
     };
-    Transform.prototype.calcMaxDimension = function (width, height, obj) {
+    Transform.prototype.calcMaxDimension = function (width, height, obj, isImgShape) {
         var object = { toolbarHeight: 0 };
         if (!isBlazor()) {
             this.parent.notify('toolbar', { prop: 'getToolbarHeight', value: { obj: object } });
@@ -1783,14 +1823,18 @@ var Transform = /** @class */ (function () {
         else {
             object['toolbarHeight'] = this.parent.toolbarHeight;
         }
-        var canvasMaxWidth = this.parent.element.clientWidth;
-        var canvasMaxHeight = this.parent.element.clientHeight - object['toolbarHeight'];
+        var canvasMaxWidth = isImgShape ? this.parent.element.clientWidth / 3 :
+            this.parent.element.clientWidth;
+        var canvasMaxHeight = isImgShape ? (this.parent.element.clientHeight - object['toolbarHeight']) / 3 :
+            this.parent.element.clientHeight - object['toolbarHeight'];
         canvasMaxHeight = Browser.isDevice ? canvasMaxHeight - object['toolbarHeight'] : canvasMaxHeight;
-        if (canvasMaxWidth > 30) {
-            canvasMaxWidth -= 30;
-        }
-        if (canvasMaxHeight > 30) {
-            canvasMaxHeight -= 30;
+        if (isNullOrUndefined(isImgShape)) {
+            if (canvasMaxWidth > 30) {
+                canvasMaxWidth -= 30;
+            }
+            if (canvasMaxHeight > 30) {
+                canvasMaxHeight -= 30;
+            }
         }
         var widthScale = canvasMaxWidth / width;
         var heightScale = canvasMaxHeight / height;
@@ -1804,13 +1848,15 @@ var Transform = /** @class */ (function () {
             cssMaxWidth = width * heightScale;
             cssMaxHeight = height * heightScale;
         }
-        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 (isNullOrUndefined(isImgShape)) {
+            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;
@@ -1866,6 +1912,310 @@ var Transform = /** @class */ (function () {
         }
         return { x: parent.img.destLeft - tempDestLeft, y: parent.img.destTop - tempDestTop };
     };
+    Transform.prototype.resizeImage = function (width, height) {
+        var parent = this.parent;
+        var temp = true;
+        var temp1 = true;
+        parent.allowDownScale = false;
+        parent.img.srcLeft = 0;
+        parent.img.srcTop = 0;
+        parent.isAspectRatio = true;
+        var minimum = [];
+        parent.img.srcWidth = parent.baseImg.width;
+        parent.img.srcHeight = parent.baseImg.height;
+        if (parent.resizeSrc && parent.resizeSrc.width != 0 && parent.resizeSrc.height != 0) {
+            parent.img.srcLeft = parent.resizeSrc.startX;
+            parent.img.srcTop = parent.resizeSrc.startY;
+            parent.img.srcWidth = parent.resizeSrc.width;
+            parent.img.srcHeight = parent.resizeSrc.height;
+        }
+        while ((width < parent.img.destWidth || height < parent.img.destHeight) && temp1) {
+            this.zoomAction(-.1, null, true);
+            if (width > parent.img.destWidth || height > parent.img.destHeight) {
+                while (width > parent.img.destWidth || height > parent.img.destHeight) {
+                    this.zoomAction(0.0125, null, true);
+                    temp1 = false;
+                    minimum.push(parent.img.destWidth);
+                }
+            }
+        }
+        while ((width > parent.img.destWidth || height > parent.img.destHeight) && temp1 && temp) {
+            this.zoomAction(.1, null, true);
+            if (width < parent.img.destWidth || height < parent.img.destHeight) {
+                while (width < parent.img.destWidth) {
+                    this.zoomAction(-.0125, null, true);
+                    temp = false;
+                    minimum.push(parent.img.destWidth);
+                }
+            }
+        }
+        var nearestNumber = minimum[0];
+        var smallestDifference = Math.abs(parent.img.destWidth - nearestNumber);
+        for (var _i = 0, minimum_1 = minimum; _i < minimum_1.length; _i++) {
+            var num = minimum_1[_i];
+            var difference = Math.abs(width - num);
+            if (difference < smallestDifference) {
+                nearestNumber = num;
+                smallestDifference = difference;
+            }
+        }
+        if (nearestNumber < width && temp) {
+            this.zoomAction(-.0125, null, true);
+            temp = false;
+        }
+        if (nearestNumber > width && !temp) {
+            this.zoomAction(.0125, null, true);
+            temp = false;
+        }
+        this.zoomAction(.0125, null, true);
+        parent.allowDownScale = true;
+        this.zoomAction(-.0125, null, true);
+        var prevCropObj = extend({}, parent.cropObj, {}, true);
+        var prevObj = extend({}, this.prevResizeCurrObj, {}, true);
+        parent.notify('undo-redo', { prop: 'updateUndoRedoColl', onPropertyChange: false, value: { operation: 'resize',
+                previousObj: prevObj, previousObjColl: prevObj.objColl, previousPointColl: prevObj.pointColl,
+                previousSelPointColl: prevObj.selPointColl, previousCropObj: prevCropObj, previousText: null, currentText: null,
+                previousFilter: null, isCircleCrop: parent.isCircleCrop } });
+        parent.notify('undo-redo', { prop: 'updateCurrUrc', value: { type: 'ok' } });
+    };
+    Transform.prototype.resizeCrop = function (width, height) {
+        var parent = this.parent;
+        var temp = true;
+        var obj1 = { prevObj: parent.prevObj };
+        parent.cropObj = extend({}, parent.prevCropObj, {}, true);
+        parent.allowDownScale = false;
+        parent.notify('toolbar', { prop: 'getPrevObj', onPropertyChange: false, value: { obj: obj1 } });
+        var activeObj = extend({}, obj1['prevObj']['activeObj'], {}, true);
+        obj1['prevObj']['activeObj'] = extend({}, parent.activeObj, {}, true);
+        parent.notify('draw', { prop: 'setCurrentObj', onPropertyChange: false, value: { obj: obj1['prevObj'] } });
+        parent.objColl = extend([], obj1['prevObj']['objColl'], [], true);
+        parent.pointColl = extend([], obj1['prevObj']['pointColl'], [], true);
+        parent.notify('shape', { prop: 'zoomObjColl', onPropertyChange: false, value: { isPreventApply: null } });
+        parent.notify('freehand-draw', { prop: 'zoomFHDColl', onPropertyChange: false, value: { isPreventApply: null } });
+        parent.notify('freehand-draw', { prop: 'updateFHDColl', onPropertyChange: false });
+        var tempwidth = width;
+        var tempheight = height;
+        var tempZoom = false;
+        if (height >= width && height <= Math.ceil(parent.img.destHeight)) {
+            while ((height <= Math.ceil(parent.img.destHeight)) && temp) {
+                this.zoomAction(-.1, null, true);
+                if (width > parent.img.destWidth || height > parent.img.destHeight) {
+                    while (width > parent.img.destWidth || height > parent.img.destHeight) {
+                        this.zoomAction(.0125, null, true);
+                        temp = false;
+                    }
+                }
+            }
+        }
+        else if (height <= width && width < parent.img.destWidth) {
+            while ((width < parent.img.destWidth) && temp) {
+                this.zoomAction(-.1, null, true);
+                if (width > parent.img.destWidth || height > parent.img.destHeight) {
+                    while (width > parent.img.destWidth || height > parent.img.destHeight) {
+                        this.zoomAction(.0125, null, true);
+                        temp = false;
+                    }
+                }
+            }
+        }
+        else if (height >= width && height >= parent.img.destHeight) {
+            while ((height >= parent.img.destHeight) && temp) {
+                this.zoomAction(.1, null, true);
+            }
+        }
+        else if (width >= height && width >= parent.img.destWidth) {
+            while ((width >= parent.img.destWidth) && temp) {
+                this.zoomAction(.1, null, true);
+            }
+            if (width < parent.img.destWidth && height < parent.img.destHeight) {
+                while (width < parent.img.destWidth && height < parent.img.destHeight) {
+                    this.zoomAction(-.0125, null, true);
+                    temp = false;
+                }
+                this.zoomAction(.0125, null, true);
+            }
+        }
+        else if (height > parent.img.destHeight && width > parent.img.destWidth) {
+            while ((height > parent.img.destHeight) && (width > parent.img.destWidth) && temp) {
+                this.zoomAction(.1, null, true);
+            }
+            if (width < parent.img.destWidth && height < parent.img.destHeight) {
+                while (width < parent.img.destWidth && height < parent.img.destHeight) {
+                    this.zoomAction(-.0125, null, true);
+                    temp = false;
+                }
+                this.zoomAction(.0125, null, true);
+            }
+        }
+        this.resizeImg(activeObj, width, height);
+        width = tempwidth;
+        height = tempheight;
+        if ((height !== parent.img.destHeight || width !== parent.img.destWidth)) {
+            while ((height > parent.img.destHeight || width > parent.img.destWidth)) {
+                this.zoomAction(.0125, null, true);
+                tempZoom = true;
+            }
+            if (tempZoom) {
+                this.zoomAction(-.0125, null, true);
+                tempZoom = false;
+            }
+        }
+        if ((height !== parent.img.destHeight || width !== parent.img.destWidth)) {
+            while ((height < parent.img.destHeight || width < parent.img.destWidth)) {
+                this.zoomAction(-.0125, null, true);
+                tempZoom = true;
+            }
+            if (tempZoom) {
+                this.zoomAction(-.0125, null, true);
+                tempZoom = false;
+            }
+        }
+        obj1['prevObj']['activeObj'] = extend({}, activeObj, {}, true);
+        this.zoomAction(.0125, null, true);
+        parent.allowDownScale = this.preventDownScale ? false : true;
+        parent.isCropTab = false;
+        this.zoomAction(-.0125, null, true);
+        parent.aspectWidth = width;
+        parent.aspectHeight = height;
+    };
+    Transform.prototype.resizeImg = function (activeObj, width, height) {
+        var parent = this.parent;
+        var widthRatio = width / parent.img.destWidth;
+        var heightRatio = height / parent.img.destHeight;
+        if (activeObj.shape) {
+            parent.currSelectionPoint = activeObj;
+        }
+        else if (parent.img.srcWidth === parent.baseImgCanvas.width && parent.img.srcHeight === parent.baseImgCanvas.height) {
+            parent.currSelectionPoint = null;
+            parent.select('custom');
+        }
+        if (isNullOrUndefined(parent.currSelectionPoint)) {
+            parent.select('custom', parent.img.destLeft, parent.img.destTop, parent.img.destWidth, parent.img.destHeight);
+        }
+        else {
+            parent.select('custom');
+        }
+        width = parent.activeObj.activePoint.width * widthRatio;
+        height = parent.activeObj.activePoint.height * heightRatio;
+        var sx = (parent.activeObj.activePoint.startX + (parent.activeObj.activePoint.width / 2)) - (width / 2);
+        var sy = (parent.activeObj.activePoint.startY + (parent.activeObj.activePoint.height / 2)) - (height / 2);
+        parent.transform.defaultZoomFactor = 0;
+        parent.notify('draw', { prop: 'setResizeSelect', value: { bool: true } });
+        parent.select('custom', sx, sy, width, height);
+        parent.notify('draw', { prop: 'setResizeSelect', value: { bool: false } });
+        parent.isCropToolbar = true;
+        parent.crop();
+        parent.isCropToolbar = false;
+    };
+    Transform.prototype.updateResize = function () {
+        var parent = this.parent;
+        parent.prevCropObj = extend({}, parent.cropObj, {}, true);
+        var currObject = { currObj: {} };
+        parent.notify('filter', { prop: 'getCurrentObj', onPropertyChange: false, value: { object: currObject } });
+        parent.prevObj = currObject['currObj'];
+        if (parent.currSelectionPoint && parent.prevCropObj.activeObj.shape) {
+            parent.prevObj.activeObj = extend({}, parent.prevCropObj.activeObj, {}, true);
+        }
+        parent.prevObj.objColl = extend([], parent.objColl, [], true);
+        parent.prevObj.pointColl = extend([], parent.pointColl, [], true);
+        parent.prevObj.afterCropActions = extend([], parent.afterCropActions, [], true);
+        var selPointCollObj = { selPointColl: null };
+        parent.notify('freehand-draw', { prop: 'getSelPointColl', onPropertyChange: false,
+            value: { obj: selPointCollObj } });
+        parent.prevObj.selPointColl = extend([], selPointCollObj['selPointColl'], [], true);
+        parent.resizeSrc = { startX: parent.img.srcLeft, startY: parent.img.srcTop, width: parent.img.srcWidth,
+            height: parent.img.srcHeight };
+    };
+    Transform.prototype.resize = function (width, height, isAspectRatio) {
+        var _this = this;
+        var parent = this.parent;
+        parent.isResize = true;
+        if (isNullOrUndefined(parent.prevCropObj) && isNullOrUndefined(parent.prevObj)) {
+            parent.notify('transform', { prop: 'updateResize', value: { bool: false } });
+        }
+        var aspectIcon = parent.element.querySelector('#' + parent.element.id + '_aspectratio');
+        var nonAspectIcon = parent.element.querySelector('#' + parent.element.id + '_nonaspectratio');
+        if (!isNullOrUndefined(aspectIcon) && !isNullOrUndefined(nonAspectIcon)) {
+            parent.notify('toolbar', { prop: 'initResizeToolbar' });
+            if (Browser.isDevice) {
+                parent.notify('toolbar', { prop: 'init-main-toolbar', value: { isApplyBtn: false, isDevice: true, isOkBtn: true, isResize: true } });
+            }
+        }
+        var resizeEventArgs = { cancel: false, previousWidth: Math.ceil(parent.img.destWidth), previousHeight: Math.ceil(parent.img.destHeight),
+            width: Math.ceil(width), height: height && height !== 0 ? Math.ceil(height) : (parent.aspectHeight ? parent.aspectHeight : Math.ceil(parent.img.destHeight)),
+            isAspectRatio: isAspectRatio ? isAspectRatio : false };
+        if (!isBlazor()) {
+            parent.trigger('resizing', resizeEventArgs);
+            if (!resizeEventArgs.cancel) {
+                this.resizeEventHandler(resizeEventArgs);
+            }
+        }
+        else if (isBlazor() && parent.events && parent.events.imageResizing.hasDelegate === true) {
+            /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
+            parent.dotNetRef.invokeMethodAsync('OnImageResizingAsync', resizeEventArgs).then(function (args) {
+                if (!args.cancel) {
+                    _this.resizeEventHandler(args);
+                }
+            });
+        }
+        else {
+            this.resizeEventHandler(resizeEventArgs);
+        }
+    };
+    Transform.prototype.resizeEventHandler = function (args) {
+        var parent = this.parent;
+        var isRotate;
+        var aspectRatioHeight = parent.element.querySelector('#' + parent.element.id + '_resizeHeight');
+        var heightElem = parent.element.querySelector(".e-ie-toolbar-e-resize-height-input .e-numerictextbox");
+        if (args.isAspectRatio) {
+            if (this.resizedImgAngle == null || this.resizedImgAngle !== parent.transform.degree) {
+                this.resizedImgAngle = parent.transform.degree;
+                isRotate = true;
+            }
+            if (isRotate) {
+                parent.notify('transform', { prop: 'resizeImage', value: { width: args.width, height: 0 } });
+                if (aspectRatioHeight) {
+                    getComponent(aspectRatioHeight, 'numerictextbox').value = Math.floor(parent.img.destHeight);
+                    aspectRatioHeight.value = Math.floor(parent.img.destHeight).toString() + ' px';
+                    parent.aspectHeight = Math.floor(parent.img.destHeight);
+                }
+                else if (heightElem) {
+                    heightElem.value = Math.floor(parent.img.destHeight).toString();
+                    parent.aspectHeight = Math.floor(parent.img.destHeight);
+                }
+            }
+            else {
+                parent.notify('transform', { prop: 'resizeImage', value: { width: args.width, height: null } });
+            }
+        }
+        else {
+            if (this.resizedImgAngle !== null && this.resizedImgAngle !== parent.transform.degree) {
+                this.resizedImgAngle = parent.transform.degree;
+                isRotate = true;
+            }
+            if (isRotate) {
+                parent.notify('transform', { prop: 'setPreventDownScale', value: { bool: true } });
+                parent.notify('transform', { prop: 'resizeCrop', value: { width: args.width, height: args.height } });
+                parent.okBtn();
+                parent.resizeSrc = { startX: parent.img.srcLeft, startY: parent.img.srcTop, width: parent.img.srcWidth,
+                    height: parent.img.srcHeight };
+                if (isBlazor()) {
+                    parent.updateToolbar(parent.element, 'resize');
+                }
+                else {
+                    parent.notify('toolbar', { prop: 'refresh-toolbar', onPropertyChange: false, value: { type: 'resize',
+                            isApplyBtn: null, isCropping: null, isZooming: null, cType: null } });
+                    parent.notify('transform', { prop: 'setPreventDownScale', value: { bool: false } });
+                    parent.notify('toolbar', { prop: 'refresh-toolbar', onPropertyChange: false, value: { type: 'resize',
+                            isApplyBtn: null, isCropping: null, isZooming: null, cType: null } });
+                }
+            }
+            else {
+                parent.notify('transform', { prop: 'resizeCrop', value: { width: args.width, height: args.height } });
+            }
+        }
+        this.resizedImgAngle = parent.transform.degree;
+    };
     return Transform;
 }());
 export { Transform };