@syncfusion/ej2-image-editor 23.1.43 → 23.2.5

package/dist/es6/ej2-image-editor.es2015.js

@@ -2448,6 +2448,7 @@ class Draw {
     }
     shapeImage(canvasDraw) {
         const parent = this.parent;
+        const actObj = extend({}, parent.activeObj);
         const ctx = parent.activeObj.imageCanvas.getContext('2d');
         if (canvasDraw === this.lowerContext && this.isImageApply) {
             let dimObj = { width: 0, height: 0 };
@@ -2470,41 +2471,17 @@ class Draw {
             parent.activeObj.flipObjColl = [];
             parent.activeObj.shapeFlip = '';
         }
-        for (let j = 0, len = parent.activeObj.flipObjColl.length; j < len; j++) {
-            if (parent.activeObj.flipObjColl[j].toLowerCase() === 'horizontal') {
-                canvasDraw.translate(canvasDraw.canvas.width, 0);
-                canvasDraw.scale(-1, 1);
-                parent.activeObj.activePoint = this.updateActPoint('horizontal', canvasDraw);
-            }
-            else if (parent.activeObj.flipObjColl[j].toLowerCase() === 'vertical') {
-                canvasDraw.translate(0, canvasDraw.canvas.height);
-                canvasDraw.scale(1, -1);
-                parent.activeObj.activePoint = this.updateActPoint('vertical', canvasDraw);
-            }
-        }
         imgPoint.startX = ((parent.activeObj.activePoint.width - imgPoint.width) / 2) + parent.activeObj.activePoint.startX;
         imgPoint.startY = ((parent.activeObj.activePoint.height - imgPoint.height) / 2) + parent.activeObj.activePoint.startY;
         const temp = canvasDraw.globalAlpha;
         canvasDraw.globalAlpha = parent.activeObj.imageTransparency;
-        if (parent.activeObj.shapeDegree !== parent.transform.degree) {
+        if (actObj.rotateFlipColl && actObj.rotateFlipColl.length > 0) {
             this.rotateImage(canvasDraw);
         }
         else {
             canvasDraw.drawImage(parent.activeObj.imageCanvas, imgPoint.startX, imgPoint.startY, imgPoint.width, imgPoint.height);
         }
         canvasDraw.globalAlpha = temp;
-        for (let k = 0, len = parent.activeObj.flipObjColl.length; k < len; k++) {
-            if (parent.activeObj.flipObjColl[k].toLowerCase() === 'horizontal') {
-                canvasDraw.translate(canvasDraw.canvas.width, 0);
-                canvasDraw.scale(-1, 1);
-                parent.activeObj.activePoint = this.updateActPoint('horizontal', canvasDraw);
-            }
-            else if (parent.activeObj.flipObjColl[k].toLowerCase() === 'vertical') {
-                canvasDraw.translate(0, canvasDraw.canvas.height);
-                canvasDraw.scale(1, -1);
-                parent.activeObj.activePoint = this.updateActPoint('vertical', canvasDraw);
-            }
-        }
         parent.currObjType.isText = false;
     }
     shapeText(canvasDraw) {
@@ -2512,6 +2489,7 @@ class Draw {
         canvasDraw.filter = 'none';
         const parent = this.parent;
         let actPoint = parent.activeObj.activePoint;
+        const actObj = extend({}, parent.activeObj);
         const rows = parent.activeObj.keyHistory.split('\n');
         const height = parent.activeObj.textSettings.fontSize + parent.activeObj.textSettings.fontSize * 0.25;
         const lineHeight = ((height * rows.length) - (parent.activeObj.textSettings.fontSize * rows.length)) / rows.length;
@@ -2551,36 +2529,12 @@ class Draw {
                 parent.activeObj.flipObjColl = [];
                 parent.activeObj.shapeFlip = '';
             }
-            for (let j = 0, len = parent.activeObj.flipObjColl.length; j < len; j++) {
-                if (parent.activeObj.flipObjColl[j].toLowerCase() === 'horizontal') {
-                    canvasDraw.translate(canvasDraw.canvas.width, 0);
-                    canvasDraw.scale(-1, 1);
-                    actPoint = this.updateActPoint('horizontal', canvasDraw);
-                }
-                else if (parent.activeObj.flipObjColl[j].toLowerCase() === 'vertical') {
-                    canvasDraw.translate(0, canvasDraw.canvas.height);
-                    canvasDraw.scale(1, -1);
-                    actPoint = this.updateActPoint('vertical', canvasDraw);
-                }
-            }
-            if (parent.activeObj.shapeDegree !== parent.transform.degree) {
+            if (actObj.rotateFlipColl && actObj.rotateFlipColl.length > 0) {
                 this.rotateText(canvasDraw);
             }
             else {
                 canvasDraw.fillText(text, actPoint.startX + parent.activeObj.textSettings.fontSize * 0.1, actPoint.startY + yPoint);
             }
-            for (let k = 0, len = parent.activeObj.flipObjColl.length; k < len; k++) {
-                if (parent.activeObj.flipObjColl[k].toLowerCase() === 'horizontal') {
-                    canvasDraw.translate(canvasDraw.canvas.width, 0);
-                    canvasDraw.scale(-1, 1);
-                    actPoint = this.updateActPoint('horizontal', canvasDraw);
-                }
-                else if (parent.activeObj.flipObjColl[k].toLowerCase() === 'vertical') {
-                    canvasDraw.translate(0, canvasDraw.canvas.height);
-                    canvasDraw.scale(1, -1);
-                    actPoint = this.updateActPoint('vertical', canvasDraw);
-                }
-            }
         }
         canvasDraw.filter = filter;
         parent.currObjType.isText = false;
@@ -2620,6 +2574,8 @@ class Draw {
     rotateImage(canvasDraw) {
         const parent = this.parent;
         let degree;
+        let actObj = parent.activeObj;
+        const tempActiveObj = extend({}, parent.activeObj, null, true);
         if (parent.activeObj.shapeDegree === 0) {
             degree = parent.transform.degree;
         }
@@ -2640,49 +2596,91 @@ class Draw {
         imgPoint.startY = parent.activeObj.activePoint.startY;
         let startX = imgPoint.startX;
         let startY = imgPoint.startY;
-        if (degree % 360 === 0 && (parent.transform.degree !== -360 || parent.transform.currFlipState === '')) {
-            canvasDraw.drawImage(parent.activeObj.imageCanvas, imgPoint.startX, imgPoint.startY, imgPoint.width, imgPoint.height);
-        }
-        else if (degree % 90 === 0 && degree % 180 !== 0) {
-            canvasDraw.translate(parent.lowerCanvas.width / 2, parent.lowerCanvas.height / 2);
-            canvasDraw.rotate(Math.PI / 180 * degree);
-            canvasDraw.translate(-parent.lowerCanvas.height / 2, -parent.lowerCanvas.width / 2);
-            if (degree % 90 === 0 && degree % 270 !== 0) {
-                startY = parent.lowerCanvas.width - (parent.activeObj.activePoint.startX + parent.activeObj.activePoint.width);
-                startY += ((parent.activeObj.activePoint.width - imgPoint.height) / 2);
-                startX = imgPoint.startY;
-            }
-            else if (degree % 270 === 0) {
-                startX = parent.lowerCanvas.height - (parent.activeObj.activePoint.startY + parent.activeObj.activePoint.height);
-                startX += ((parent.activeObj.activePoint.height - imgPoint.width) / 2);
-                startY = imgPoint.startX;
-            }
-            canvasDraw.drawImage(parent.activeObj.imageCanvas, startX, startY, imgPoint.width, imgPoint.height);
-            canvasDraw.translate(parent.lowerCanvas.height / 2, parent.lowerCanvas.width / 2);
-            canvasDraw.rotate(Math.PI / 180 * -degree);
-            canvasDraw.translate(-parent.lowerCanvas.width / 2, -parent.lowerCanvas.height / 2);
+        /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
+        let tempDegree;
+        const tempColl = [];
+        canvasDraw.save();
+        for (let i = 0, len = actObj.rotateFlipColl.length; i < len; i++) {
+            /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
+            let coll = actObj.rotateFlipColl[i];
+            tempColl.push(coll);
+            if (typeof (coll) === 'number') {
+                if (actObj.shapeDegree === 0) {
+                    tempDegree = coll;
+                }
+                else {
+                    tempDegree = coll - actObj.shapeDegree;
+                }
+                if (tempDegree === -450) {
+                    tempDegree = -90;
+                }
+                if (tempDegree < 0) {
+                    tempDegree = 360 + tempDegree;
+                }
+                imgPoint.width = tempDegree % 90 === 0 && tempDegree % 180 !== 0 ? actObj.activePoint.height : actObj.activePoint.width;
+                imgPoint.height = tempDegree % 90 === 0 && tempDegree % 180 !== 0 ? actObj.activePoint.width :
+                    actObj.activePoint.height;
+                canvasDraw.translate(canvasDraw.canvas.width / 2, canvasDraw.canvas.height / 2);
+                canvasDraw.rotate(Math.PI / 180 * coll);
+                canvasDraw.translate(-canvasDraw.canvas.height / 2, -canvasDraw.canvas.width / 2);
+                if (tempDegree % 90 === 0 && tempDegree % 270 !== 0) {
+                    startY = canvasDraw.canvas.width - (actObj.activePoint.startX + actObj.activePoint.width);
+                    startY += ((actObj.activePoint.width - imgPoint.height) / 2);
+                    startX = imgPoint.startY;
+                }
+                else if (tempDegree % 270 === 0) {
+                    startX = canvasDraw.canvas.height - (actObj.activePoint.startY + actObj.activePoint.height);
+                    startX += ((actObj.activePoint.height - imgPoint.width) / 2);
+                    startY = imgPoint.startX;
+                }
+                imgPoint.startX = startX;
+                imgPoint.startY = startY;
+                actObj.activePoint.startX = startX;
+                actObj.activePoint.startY = startY;
+                actObj.activePoint.endX = actObj.activePoint.startX + imgPoint.width;
+                actObj.activePoint.endY = actObj.activePoint.startY + imgPoint.height;
+                actObj = this.updateWidthHeight(actObj);
+            }
+            else {
+                if (coll === 'horizontal' && degree % 90 === 0 && degree % 180 !== 0) {
+                    coll = 'vertical';
+                }
+                else if (coll === 'vertical' && degree % 90 === 0 && degree % 180 !== 0) {
+                    coll = 'horizontal';
+                }
+                if (coll === 'horizontal') {
+                    canvasDraw.translate(canvasDraw.canvas.width, 0);
+                    canvasDraw.scale(-1, 1);
+                    actObj.activePoint = this.updateActPoint('horizontal', canvasDraw);
+                }
+                else if (coll === 'vertical') {
+                    canvasDraw.translate(0, canvasDraw.canvas.height);
+                    canvasDraw.scale(1, -1);
+                    actObj.activePoint = this.updateActPoint('vertical', canvasDraw);
+                }
+                imgPoint.startX = actObj.activePoint.startX;
+                imgPoint.startY = actObj.activePoint.startY;
+            }
+            imgPoint.startX = actObj.activePoint.startX;
+            imgPoint.startY = actObj.activePoint.startY;
+            startX = imgPoint.startX;
+            startY = imgPoint.startY;
         }
-        else {
-            canvasDraw.translate(parent.lowerCanvas.width / 2, parent.lowerCanvas.height / 2);
-            canvasDraw.rotate(Math.PI / 180 * degree);
-            startX = parent.lowerCanvas.width - (imgPoint.startX + imgPoint.width);
-            startY = parent.lowerCanvas.height - (imgPoint.startY + imgPoint.height);
-            canvasDraw.translate(-parent.lowerCanvas.width / 2, -parent.lowerCanvas.height / 2);
-            canvasDraw.drawImage(parent.activeObj.imageCanvas, startX, startY, imgPoint.width, imgPoint.height);
-            canvasDraw.translate(parent.lowerCanvas.width / 2, parent.lowerCanvas.height / 2);
-            canvasDraw.rotate(Math.PI / 180 * -degree);
-            canvasDraw.translate(-parent.lowerCanvas.width / 2, -parent.lowerCanvas.height / 2);
+        if (actObj.rotatedAngle !== 0) {
+            parent.notify('shape', { prop: 'setPointCollForShapeRotation', onPropertyChange: false, value: { obj: actObj } });
         }
+        canvasDraw.drawImage(actObj.imageCanvas, imgPoint.startX, imgPoint.startY, imgPoint.width, imgPoint.height);
+        canvasDraw.restore();
+        parent.activeObj = tempActiveObj;
         if (parent.transform.degree === 360 || parent.transform.degree === -360) {
             parent.transform.degree = 0;
         }
     }
     rotateText(canvasDraw) {
         const parent = this.parent;
-        let startX = parent.activeObj.activePoint.startX;
-        let startY = parent.activeObj.activePoint.startY;
         let degree;
-        const actPoint = parent.activeObj.activePoint;
+        let actObj = parent.activeObj;
+        const tempActiveObj = extend({}, parent.activeObj, null, true);
         if (parent.activeObj.shapeDegree === 0) {
             degree = parent.transform.degree;
         }
@@ -2695,45 +2693,89 @@ class Draw {
         if (degree < 0) {
             degree = 360 + degree;
         }
-        if (degree % 360 === 0 && (parent.transform.degree !== -360 || parent.transform.currFlipState === '')) {
-            startX = actPoint.startX + parent.activeObj.textSettings.fontSize * 0.15;
-            startY = actPoint.startY + (actPoint.endY - actPoint.startY);
-            const rows = parent.activeObj.keyHistory.split('\n');
-            for (let i = 0; i < rows.length; i++) {
-                startY = actPoint.startY + (i * parent.activeObj.textSettings.fontSize + parent.activeObj.textSettings.fontSize * 0.25);
-                canvasDraw.fillText(rows[i], startX, startY);
-            }
-        }
-        else if (degree % 90 === 0 && degree % 180 !== 0) {
-            canvasDraw.translate(parent.lowerCanvas.width / 2, parent.lowerCanvas.height / 2);
-            canvasDraw.rotate(Math.PI / 180 * degree);
-            canvasDraw.translate(-parent.lowerCanvas.height / 2, -parent.lowerCanvas.width / 2);
-            if (degree % 90 === 0 && degree % 270 !== 0) {
-                startY = (parent.lowerCanvas.width - actPoint.endX) +
-                    parent.activeObj.textSettings.fontSize * 0.4;
-                startX = actPoint.startY;
-            }
-            else if (degree % 270 === 0) {
-                startX = parent.lowerCanvas.height - actPoint.endY;
-                startY = actPoint.startX + parent.activeObj.textSettings.fontSize * 0.4;
-            }
-            this.textFlipDegree(canvasDraw, startX, startY);
-            canvasDraw.translate(parent.lowerCanvas.height / 2, parent.lowerCanvas.width / 2);
-            canvasDraw.rotate(Math.PI / 180 * -degree);
-            canvasDraw.translate(-parent.lowerCanvas.width / 2, -parent.lowerCanvas.height / 2);
+        const imgPoint = { startX: 0, startY: 0, width: 0, height: 0 };
+        imgPoint.width = degree % 90 === 0 && degree % 180 !== 0 ? actObj.activePoint.height : actObj.activePoint.width;
+        imgPoint.height = degree % 90 === 0 && degree % 180 !== 0 ? actObj.activePoint.width :
+            actObj.activePoint.height;
+        imgPoint.startX = actObj.activePoint.startX;
+        imgPoint.startY = actObj.activePoint.startY;
+        let startX = imgPoint.startX;
+        let startY = imgPoint.startY;
+        /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
+        let tempDegree;
+        const tempColl = [];
+        canvasDraw.save();
+        for (let i = 0, len = actObj.rotateFlipColl.length; i < len; i++) {
+            /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
+            let coll = actObj.rotateFlipColl[i];
+            tempColl.push(coll);
+            if (typeof (coll) === 'number') {
+                if (actObj.shapeDegree === 0) {
+                    tempDegree = coll;
+                }
+                else {
+                    tempDegree = coll - actObj.shapeDegree;
+                }
+                if (tempDegree === -450) {
+                    tempDegree = -90;
+                }
+                if (tempDegree < 0) {
+                    tempDegree = 360 + tempDegree;
+                }
+                imgPoint.width = tempDegree % 90 === 0 && tempDegree % 180 !== 0 ? actObj.activePoint.height : actObj.activePoint.width;
+                imgPoint.height = tempDegree % 90 === 0 && tempDegree % 180 !== 0 ? actObj.activePoint.width :
+                    actObj.activePoint.height;
+                canvasDraw.translate(canvasDraw.canvas.width / 2, canvasDraw.canvas.height / 2);
+                canvasDraw.rotate(Math.PI / 180 * coll);
+                canvasDraw.translate(-canvasDraw.canvas.height / 2, -canvasDraw.canvas.width / 2);
+                if (tempDegree % 90 === 0 && tempDegree % 270 !== 0) {
+                    startY = (parent.lowerCanvas.width - actObj.activePoint.endX);
+                    startX = actObj.activePoint.startY;
+                }
+                else if (tempDegree % 270 === 0) {
+                    startX = parent.lowerCanvas.height - actObj.activePoint.endY;
+                    startY = actObj.activePoint.startX;
+                }
+                imgPoint.startX = startX;
+                imgPoint.startY = startY;
+                actObj.activePoint.startX = startX;
+                actObj.activePoint.startY = startY;
+                actObj.activePoint.endX = actObj.activePoint.startX + imgPoint.width;
+                actObj.activePoint.endY = actObj.activePoint.startY + imgPoint.height;
+                actObj = this.updateWidthHeight(actObj);
+            }
+            else {
+                if (coll === 'horizontal' && degree % 90 === 0 && degree % 180 !== 0) {
+                    coll = 'vertical';
+                }
+                else if (coll === 'vertical' && degree % 90 === 0 && degree % 180 !== 0) {
+                    coll = 'horizontal';
+                }
+                if (coll === 'horizontal') {
+                    canvasDraw.translate(canvasDraw.canvas.width, 0);
+                    canvasDraw.scale(-1, 1);
+                    actObj.activePoint = this.updateActPoint('horizontal', canvasDraw);
+                }
+                else if (coll === 'vertical') {
+                    canvasDraw.translate(0, canvasDraw.canvas.height);
+                    canvasDraw.scale(1, -1);
+                    actObj.activePoint = this.updateActPoint('vertical', canvasDraw);
+                }
+                imgPoint.startX = actObj.activePoint.startX;
+                imgPoint.startY = actObj.activePoint.startY;
+            }
+            imgPoint.startX = actObj.activePoint.startX;
+            imgPoint.startY = actObj.activePoint.startY;
+            startX = imgPoint.startX;
+            startY = imgPoint.startY;
         }
-        else {
-            canvasDraw.translate(parent.lowerCanvas.width / 2, parent.lowerCanvas.height / 2);
-            canvasDraw.rotate(Math.PI / 180 * degree);
-            startX = parent.lowerCanvas.width - actPoint.endX;
-            startY = (parent.lowerCanvas.height - actPoint.endY) +
-                parent.activeObj.textSettings.fontSize * 0.4;
-            canvasDraw.translate(-parent.lowerCanvas.width / 2, -parent.lowerCanvas.height / 2);
-            this.textFlipDegree(canvasDraw, startX, startY);
-            canvasDraw.translate(parent.lowerCanvas.width / 2, parent.lowerCanvas.height / 2);
-            canvasDraw.rotate(Math.PI / 180 * -degree);
-            canvasDraw.translate(-parent.lowerCanvas.width / 2, -parent.lowerCanvas.height / 2);
+        if (actObj.rotatedAngle !== 0) {
+            parent.notify('shape', { prop: 'setPointCollForShapeRotation', onPropertyChange: false, value: { obj: actObj } });
         }
+        startY += actObj.textSettings.fontSize * 0.4;
+        this.textFlipDegree(canvasDraw, startX, startY);
+        canvasDraw.restore();
+        parent.activeObj = tempActiveObj;
         if (parent.transform.degree === 360 || parent.transform.degree === -360) {
             parent.transform.degree = 0;
         }
@@ -3267,22 +3309,23 @@ class Draw {
                 this.parent.notify('toolbar', { prop: 'getPrevCropObj', onPropertyChange: false, value: { obj: obj1 } });
                 this.parent.notify('toolbar', { prop: 'getPrevObj', onPropertyChange: false, value: { obj: obj2 } });
                 if (obj1['prevCropObj'] && obj2['prevObj']) {
-                    if (!aspectRatioElement) {
-                        parent.objColl = [];
-                        parent.pointColl = [];
-                        parent.freehandCounter = 0;
-                        parent.cropObj = extend({}, obj1['prevCropObj'], {}, true);
-                        this.setCurrentObj(obj2['prevObj']);
-                        parent.objColl = obj2['prevObj']['objColl'];
-                        parent.pointColl = obj2['prevObj']['pointColl'];
-                        parent.freehandCounter = parent.pointColl.length;
-                        parent.notify('shape', { prop: 'zoomObjColl', onPropertyChange: false, value: { isPreventApply: null } });
-                        parent.notify('freehand-draw', { prop: 'zoomFHDColl', onPropertyChange: false, value: { isPreventApply: null } });
-                    }
+                    parent.objColl = [];
+                    parent.pointColl = [];
+                    parent.freehandCounter = 0;
+                    parent.cropObj = extend({}, obj1['prevCropObj'], {}, true);
+                    this.setCurrentObj(obj2['prevObj']);
+                    parent.objColl = obj2['prevObj']['objColl'];
+                    parent.pointColl = obj2['prevObj']['pointColl'];
+                    parent.freehandCounter = parent.pointColl.length;
+                    parent.notify('shape', { prop: 'zoomObjColl', onPropertyChange: false, value: { isPreventApply: null } });
+                    parent.notify('freehand-draw', { prop: 'zoomFHDColl', onPropertyChange: false, value: { isPreventApply: null } });
+                    const currObj = parent.currSelectionPoint ?
+                        extend({}, parent.currSelectionPoint, {}, true) : null;
                     this.parent.notify('transform', { prop: 'zoomAction', onPropertyChange: false,
                         value: { zoomFactor: -this.parent.transform.zoomFactor, zoomPoint: null, isResize: true } });
                     this.parent.notify('transform', { prop: 'zoomAction', onPropertyChange: false,
                         value: { zoomFactor: obj2['prevObj']['defaultZoom'], zoomPoint: null, isResize: true } });
+                    parent.currSelectionPoint = currObj;
                     if (obj2['prevObj'].zoomFactor) {
                         parent.setProperties({ zoomSettings: { zoomFactor: obj2['prevObj'].zoomFactor } }, true);
                     }
@@ -3290,6 +3333,7 @@ class Draw {
                         value: { previousZoomValue: parent.zoomSettings.zoomFactor } });
                 }
                 parent.isResize = false;
+                parent.notify('transform', { prop: 'setResizedImgAngle', onPropertyChange: false, value: { angle: null } });
             }
         }
         if (parent.togglePen) {
@@ -11032,6 +11076,36 @@ class Selection {
                     parent.notify('transform', { prop: 'resize', value: { width: point.x, height: point.y, isAspectRatio: false } });
                 }
             }
+            if (isBlazor()) {
+                const aspectRatioHeight = this.parent.element.querySelector('.e-ie-toolbar-e-resize-height-input .e-numerictextbox');
+                const aspectRatioWidth = this.parent.element.querySelector('.e-ie-toolbar-e-resize-width-input .e-numerictextbox');
+                if ((blrAspRatElem && blrAspRatElem.classList.contains('e-hidden'))) {
+                    if (aspectRatioHeight && aspectRatioHeight.value === "") {
+                        aspectRatioHeight.value = aspectRatioHeight.placeholder;
+                        aspectRatioHeight.value = Math.floor(parent.img.destHeight).toString();
+                    }
+                    if (aspectRatioWidth && aspectRatioWidth.value === "") {
+                        aspectRatioWidth.value = aspectRatioWidth.placeholder;
+                        aspectRatioWidth.value = Math.floor(parent.img.destWidth).toString();
+                    }
+                }
+            }
+            else {
+                const aspectRatioHeight = parent.element.querySelector('#' + parent.element.id + '_resizeHeight');
+                const aspectRatioWidth = parent.element.querySelector('#' + parent.element.id + '_resizeWidth');
+                if (isNullOrUndefined(aspectRatioElement)) {
+                    let elem = getComponent(aspectRatioHeight, 'numerictextbox');
+                    if (aspectRatioHeight && isNullOrUndefined(elem.value)) {
+                        elem.value = parseFloat(elem.placeholder);
+                        aspectRatioHeight.value = Math.floor(parent.img.destHeight).toString() + ' px';
+                    }
+                    elem = getComponent(aspectRatioWidth, 'numerictextbox');
+                    if (aspectRatioWidth && isNullOrUndefined(elem.value)) {
+                        elem.value = parseFloat(elem.placeholder);
+                        aspectRatioWidth.value = Math.floor(parent.img.destWidth).toString() + ' px';
+                    }
+                }
+            }
         }
         else {
             let splitWords;
@@ -11987,8 +12061,14 @@ class Selection {
             heightElement = this.parent.element.querySelector('.e-ie-toolbar-e-resize-height-input .e-numerictextbox');
         }
         if (widthElement && heightElement) {
-            const heightString = heightElement.value.replace(/,/g, '');
-            const widthString = widthElement.value.replace(/,/g, '');
+            let heightString = heightElement.value.replace(/,/g, '');
+            let widthString = widthElement.value.replace(/,/g, '');
+            if (heightString === '') {
+                heightString = heightElement.placeholder.replace(/,/g, '');
+            }
+            if (widthString === '') {
+                widthString = widthElement.placeholder.replace(/,/g, '');
+            }
             height = parseFloat(heightString);
             width = parseFloat(widthString);
         }
@@ -12227,6 +12307,9 @@ class Shape {
             case 'updateObj':
                 this.updateObj(args.value['dimObj'], args.value['x'], args.value['y']);
                 break;
+            case 'updateSelectionChangeEventArgs':
+                this.updateSelectionChangeEventArgs(args.value['selectionSettings']);
+                break;
         }
     }
     getModuleName() {
@@ -12791,6 +12874,17 @@ class Shape {
             }
         }
     }
+    updateSelectionChangeEventArgs(selectionSettings) {
+        const parent = this.parent;
+        parent.activeObj.activePoint.startX = selectionSettings.startX;
+        parent.activeObj.activePoint.startY = selectionSettings.startY;
+        if (selectionSettings.width && selectionSettings.height) {
+            parent.activeObj.activePoint.width = selectionSettings.width;
+            parent.activeObj.activePoint.height = selectionSettings.height;
+            parent.activeObj.activePoint.endX = parent.activeObj.activePoint.startX + parent.activeObj.activePoint.width;
+            parent.activeObj.activePoint.endY = parent.activeObj.activePoint.startY + parent.activeObj.activePoint.height;
+        }
+    }
     addLetter(letter) {
         const parent = this.parent;
         if (parent.textArea.style.display === 'none' && (parent.currObjType.isText || parent.activeObj.shape === 'text')) {
@@ -15154,6 +15248,9 @@ class Transform {
             case 'resize':
                 this.resize(args.value['width'], args.value['height'], args.value['isAspectRatio']);
                 break;
+            case 'setResizedImgAngle':
+                this.resizedImgAngle = args.value['angle'];
+                break;
             case 'reset':
                 this.reset();
                 break;
@@ -15661,7 +15758,9 @@ class Transform {
             const previousZoomFactor = parent.zoomSettings.zoomFactor - (zoomFactor * 10);
             const zoomEventArgs = { zoomPoint: zoomPoint, cancel: false, previousZoomFactor: previousZoomFactor,
                 currentZoomFactor: parent.zoomSettings.zoomFactor, zoomTrigger: obj['zoomType'] };
-            if (!parent.isCropToolbar && isBlazor() && parent.events && parent.events.zooming.hasDelegate === true) {
+            if (isBlazor() && !parent.isCropToolbar && parent.currentToolbar !== 'resize-toolbar' && parent.currentToolbar !== 'frame-toolbar'
+                && parent.events && parent.events.zooming.hasDelegate === true) {
+                zoomEventArgs.zoomTrigger = parseInt(this.getZoomTriggerType(zoomEventArgs.zoomTrigger));
                 /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
                 parent.dotNetRef.invokeMethodAsync('ZoomEventAsync', 'OnZoom', zoomEventArgs).then((args) => {
                     this.zoomEvent(args, zoomFactor);
@@ -15675,6 +15774,18 @@ class Transform {
             }
         }
     }
+    getZoomTriggerType(type) {
+        switch (type) {
+            case 'MouseWheel':
+                return '1';
+            case 'Pinch':
+                return '2';
+            case 'Commands':
+                return '4';
+            default:
+                return '8';
+        }
+    }
     zoomEvent(zoomEventArgs, zoomFactor) {
         const parent = this.parent;
         if (zoomEventArgs.cancel) {
@@ -17153,7 +17264,9 @@ class Transform {
     resizeEventHandler(args) {
         const parent = this.parent;
         let isRotate;
+        const aspectRatioWidth = parent.element.querySelector('#' + parent.element.id + '_resizeWidth');
         const aspectRatioHeight = parent.element.querySelector('#' + parent.element.id + '_resizeHeight');
+        const widthElem = parent.element.querySelector(".e-ie-toolbar-e-resize-width-input .e-numerictextbox");
         const 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) {
@@ -17166,10 +17279,19 @@ class Transform {
                     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);
+                    if (aspectRatioWidth && aspectRatioWidth.value === '') {
+                        getComponent(aspectRatioWidth, 'numerictextbox').value = Math.floor(parent.img.destWidth);
+                        aspectRatioWidth.value = Math.floor(parent.img.destWidth).toString() + ' px';
+                        parent.aspectWidth = Math.floor(parent.img.destWidth);
+                    }
                 }
                 else if (heightElem) {
                     heightElem.value = Math.floor(parent.img.destHeight).toString();
                     parent.aspectHeight = Math.floor(parent.img.destHeight);
+                    if (widthElem && widthElem.value === '') {
+                        widthElem.value = Math.floor(parent.img.destWidth).toString();
+                        parent.aspectWidth = Math.floor(parent.img.destWidth);
+                    }
                 }
             }
             else {
@@ -19092,6 +19214,7 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends Component {
             this.afterCropActions = [];
             this.currentFilter = '';
             this.tempFrameZoomLevel = null;
+            this.cxtTbarHeight = null;
             const obj = { initialZoomValue: false };
             this.notify('draw', { prop: 'getInitialZoomValue', onPropertyChange: false, value: { obj: obj } });
             if (obj['initialZoomValue']) {
@@ -19739,7 +19862,8 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends Component {
             value = 'vertical';
         }
         for (let i = 0; i < this.objColl.length; i++) {
-            if (this.objColl[i].shape === 'image') {
+            const shape = this.objColl[i].shape;
+            if (shape === 'image' || shape === 'text') {
                 if (isNullOrUndefined(this.objColl[i].rotateFlipColl)) {
                     this.objColl[i].rotateFlipColl = [];
                 }
@@ -22152,19 +22276,32 @@ class ToolbarModule {
         const parent = this.parent;
         const aspectRatioHeight = parent.element.querySelector('#' + parent.element.id + '_resizeHeight');
         const aspectRatioWidth = parent.element.querySelector('#' + parent.element.id + '_resizeWidth');
-        const aspectRatioIcon = parent.element.querySelector('#' + parent.element.id + '_aspectratio');
+        const icon = parent.element.querySelector('#' + parent.element.id + '_aspectratio');
         const originalWidth = parent.img.destWidth;
         const originalHeight = parent.img.destHeight;
         const aspectRatioHeightValue = parseFloat(aspectRatioHeight.value);
         const width = Math.floor((aspectRatioHeightValue / (originalHeight / originalWidth)));
-        if (aspectRatioIcon) {
+        const widthNumeric = getComponent(aspectRatioWidth, 'numerictextbox');
+        if (icon) {
             if (width != null && !isNaN(width)) {
-                getComponent(aspectRatioWidth, 'numerictextbox').value = width;
-                aspectRatioWidth.value = width.toString() + ' px';
+                if (isNullOrUndefined(widthNumeric.value)) {
+                    widthNumeric.placeholder = width + ' px';
+                    aspectRatioWidth.placeholder = width.toString() + ' px';
+                }
+                else {
+                    widthNumeric.value = width;
+                    aspectRatioWidth.value = width.toString() + ' px';
+                }
             }
             else {
-                getComponent(aspectRatioWidth, 'numerictextbox').value = 0;
-                aspectRatioWidth.value = '0 px';
+                if (isNullOrUndefined(widthNumeric.value)) {
+                    widthNumeric.placeholder = '0 px';
+                    aspectRatioWidth.placeholder = '0 px';
+                }
+                else {
+                    widthNumeric.value = 0;
+                    aspectRatioWidth.value = '0 px';
+                }
             }
         }
     }
@@ -22173,37 +22310,53 @@ class ToolbarModule {
         const parent = this.parent;
         const aspectRatioHeight = parent.element.querySelector('#' + parent.element.id + '_resizeHeight');
         const aspectRatioWidth = parent.element.querySelector('#' + parent.element.id + '_resizeWidth');
-        const aspectRatioIcon = parent.element.querySelector('#' + parent.element.id + '_aspectratio');
+        const icon = parent.element.querySelector('#' + parent.element.id + '_aspectratio');
         const originalWidth = parent.img.destWidth;
         const originalHeight = parent.img.destHeight;
         const aspectRatioWidthValue = parseFloat(aspectRatioWidth.value);
         const height = Math.floor((aspectRatioWidthValue / (originalWidth / originalHeight)));
-        if (aspectRatioIcon && !isNaN(height)) {
-            getComponent(aspectRatioHeight, 'numerictextbox').value = height;
-            aspectRatioHeight.value = height.toString() + ' px';
-        }
-        else {
-            getComponent(aspectRatioHeight, 'numerictextbox').value = 0;
-            aspectRatioHeight.value = '0 px';
+        const heightNumeric = getComponent(aspectRatioHeight, 'numerictextbox');
+        if (icon) {
+            if (!isNaN(height)) {
+                if (isNullOrUndefined(heightNumeric.value)) {
+                    heightNumeric.placeholder = height + ' px';
+                    aspectRatioHeight.placeholder = height.toString() + ' px';
+                }
+                else {
+                    heightNumeric.value = height;
+                    aspectRatioHeight.value = height.toString() + ' px';
+                }
+            }
+            else {
+                if (isNullOrUndefined(heightNumeric.value)) {
+                    heightNumeric.placeholder = '0 px';
+                    aspectRatioHeight.placeholder = '0 px';
+                }
+                else {
+                    heightNumeric.value = 0;
+                    aspectRatioHeight.value = '0 px';
+                }
+            }
         }
     }
     getResizeToolbarItem() {
         const toolbarItems = [];
+        const isResize = this.parent.aspectWidth && this.parent.aspectHeight ? true : false;
         const spanWidth = document.createElement('span');
         spanWidth.innerHTML = this.l10n.getConstant('W');
         toolbarItems.push({ id: this.parent.element.id + '_width', cssClass: 'e-ie-resize-width', template: spanWidth, align: 'Center' });
         toolbarItems.push({ id: this.parent.element.id + '_resizeWidth', prefixIcon: 'e-icons e-anti-clock-wise',
             tooltipText: this.l10n.getConstant('Width'), align: 'Center', type: 'Input', template: new NumericTextBox({ width: 75, htmlAttributes: { maxLength: "4" },
-                showSpinButton: false, value: (this.parent.aspectWidth && this.parent.aspectHeight) ? this.parent.aspectWidth : Math.ceil(this.parent.img.destWidth),
-                format: '###.## px' })
+                showSpinButton: false, value: isResize ? this.parent.aspectWidth : null,
+                placeholder: isResize ? null : Math.ceil(this.parent.img.srcWidth).toString(), format: '###.## px' })
         });
         const spanHeight = document.createElement('span');
         spanHeight.innerHTML = this.l10n.getConstant('H');
         toolbarItems.push({ id: this.parent.element.id + '_height', cssClass: 'e-ie-resize-height', template: spanHeight, align: 'Center' });
         toolbarItems.push({ id: this.parent.element.id + '_resizeHeight', prefixIcon: 'e-icons e-clock-wise',
             tooltipText: this.l10n.getConstant('Height'), align: 'Center', type: 'Input', template: new NumericTextBox({ width: 75, htmlAttributes: { maxLength: "4" },
-                showSpinButton: false, value: (this.parent.aspectWidth && this.parent.aspectHeight) ? this.parent.aspectHeight : Math.ceil(this.parent.img.destHeight),
-                format: '###.## px' })
+                showSpinButton: false, value: isResize ? this.parent.aspectHeight : null,
+                placeholder: isResize ? null : Math.ceil(this.parent.img.srcHeight).toString(), format: '###.## px' })
         });
         if (!this.isAspectRatio) {
             toolbarItems.push({ id: this.parent.element.id + '_aspectratio', prefixIcon: 'e-icons e-lock', align: 'Center', tooltipText: this.l10n.getConstant('AspectRatio'), type: 'Button' });
@@ -22272,14 +22425,11 @@ class ToolbarModule {
         const parent = this.parent;
         const aspectRatioHeight = parent.element.querySelector('#' + parent.element.id + '_resizeHeight');
         const aspectRatioWidth = parent.element.querySelector('#' + parent.element.id + '_resizeWidth');
-        const aspectRatio = parent.element.querySelector('#' + parent.element.id + '_aspectratio');
-        if (aspectRatio) {
-            if (!isNullOrUndefined(aspectRatioHeight)) {
-                aspectRatioWidth.addEventListener('keyup', this.heightAspectRatio.bind(this));
-            }
-            if (!isNullOrUndefined(aspectRatioWidth)) {
-                aspectRatioHeight.addEventListener('keyup', this.widthAspectRatio.bind(this));
-            }
+        if (!isNullOrUndefined(aspectRatioHeight)) {
+            aspectRatioWidth.addEventListener('keyup', this.heightAspectRatio.bind(this));
+        }
+        if (!isNullOrUndefined(aspectRatioWidth)) {
+            aspectRatioHeight.addEventListener('keyup', this.widthAspectRatio.bind(this));
         }
     }
     enableDisableTbrBtn() {
@@ -24866,6 +25016,8 @@ class ToolbarModule {
     performDefTbrClick(type, isContextualToolbar, isDisabledAdjustment, isDisabledFilter, isFilterFinetune) {
         const parent = this.parent;
         const zoomIn = parent.element.querySelector('#' + parent.element.id + '_zoomIn');
+        const aspectRatioHeight = parent.element.querySelector('#' + parent.element.id + '_resizeHeight');
+        const aspectRatioWidth = parent.element.querySelector('#' + parent.element.id + '_resizeWidth');
         let isCropSelection = false;
         let panBtn;
         let splitWords;
@@ -24945,12 +25097,27 @@ class ToolbarModule {
                 case 'aspectratio':
                     if (!parent.isCircleCrop && (isNullOrUndefined(parent.currSelectionPoint)) ||
                         (parent.currSelectionPoint && parent.currSelectionPoint.shape !== 'crop-circle')) {
+                        if (getComponent(aspectRatioWidth, 'numerictextbox').value) {
+                            parent.aspectWidth = getComponent(aspectRatioWidth, 'numerictextbox').value;
+                            parent.aspectHeight = getComponent(aspectRatioHeight, 'numerictextbox').value;
+                            parent.notify('transform', { prop: 'resize', value: { width: parent.aspectWidth, height: null, isAspectRatio: true } });
+                        }
                         parent.resizeSrc = { startX: parent.img.srcLeft, startY: parent.img.srcTop, width: parent.img.srcWidth,
                             height: parent.img.srcHeight };
                         this.refreshToolbar('resize');
                     }
                     break;
                 case 'nonaspectratio':
+                    if (getComponent(aspectRatioWidth, 'numerictextbox').value ||
+                        getComponent(aspectRatioHeight, 'numerictextbox').value) {
+                        parent.aspectWidth = getComponent(aspectRatioWidth, 'numerictextbox').value ?
+                            getComponent(aspectRatioWidth, 'numerictextbox').value :
+                            parseFloat(getComponent(aspectRatioWidth, 'numerictextbox').placeholder);
+                        parent.aspectHeight = getComponent(aspectRatioHeight, 'numerictextbox').value ?
+                            getComponent(aspectRatioHeight, 'numerictextbox').value :
+                            parseFloat(getComponent(aspectRatioHeight, 'numerictextbox').placeholder);
+                        parent.notify('transform', { prop: 'resize', value: { width: parent.aspectWidth, height: parent.aspectHeight, isAspectRatio: false } });
+                    }
                     parent.resizeSrc = { startX: parent.img.srcLeft, startY: parent.img.srcTop, width: parent.img.srcWidth,
                         height: parent.img.srcHeight };
                     this.refreshToolbar('resize');