@syncfusion/ej2-image-editor 23.2.4 → 23.2.6

package/dist/global/index.d.ts

@@ -1,6 +1,6 @@
 /*!
 *  filename: index.d.ts
-*  version : 23.2.4
+*  version : 23.2.6
 *  Copyright Syncfusion Inc. 2001 - 2023. All rights reserved.
 *  Use of this code is subject to the terms of our license.
 *  A copy of the current license can be obtained at any time by e-mailing

package/package.json

@@ -1,8 +1,8 @@
 {
   "_from": "@syncfusion/ej2-image-editor@*",
-  "_id": "@syncfusion/ej2-image-editor@23.1.43",
+  "_id": "@syncfusion/ej2-image-editor@23.2.5",
   "_inBundle": false,
-  "_integrity": "sha512-5GOJdoi+vGksohDCzagLur1GQpWE6ZDNsm62D4TdX6aAltWilC1Z3BgWgOt4ZnJQka37BV8iZxb0krr05wPv0Q==",
+  "_integrity": "sha512-4nutRixVgh8ge2ig6lyUTE0c1Ig5S6ydk2gnBNOARqpPUx12BWmYf5GU27Nr4haAh+Tv3t+1xKjwxwb9AUxxmw==",
   "_location": "/@syncfusion/ej2-image-editor",
   "_phantomChildren": {},
   "_requested": {
@@ -23,8 +23,8 @@
     "/@syncfusion/ej2-react-image-editor",
     "/@syncfusion/ej2-vue-image-editor"
   ],
-  "_resolved": "https://nexus.syncfusion.com/repository/ej2-hotfix-new/@syncfusion/ej2-image-editor/-/ej2-image-editor-23.1.43.tgz",
-  "_shasum": "6bbaed2aa3e4311d0b039d348c6b4c4f40d011a6",
+  "_resolved": "https://nexus.syncfusion.com/repository/ej2-hotfix-new/@syncfusion/ej2-image-editor/-/ej2-image-editor-23.2.5.tgz",
+  "_shasum": "ea1a556cf7a98fbb21ced1ea332a49c6cb2766d8",
   "_spec": "@syncfusion/ej2-image-editor@*",
   "_where": "/jenkins/workspace/elease-automation_release_23.1.1/packages/included",
   "author": {
@@ -32,10 +32,10 @@
   },
   "bundleDependencies": false,
   "dependencies": {
-    "@syncfusion/ej2-base": "~23.2.4",
+    "@syncfusion/ej2-base": "~23.2.6",
     "@syncfusion/ej2-buttons": "~23.2.4",
     "@syncfusion/ej2-inputs": "~23.2.4",
-    "@syncfusion/ej2-navigations": "~23.2.4",
+    "@syncfusion/ej2-navigations": "~23.2.5",
     "@syncfusion/ej2-popups": "~23.2.4",
     "@syncfusion/ej2-splitbuttons": "~23.2.4"
   },
@@ -67,7 +67,7 @@
     "url": "https://github.com/syncfusion/ej2-javascript-ui-controls/tree/master/controls/imageeditor"
   },
   "typings": "index.d.ts",
-  "version": "23.2.4",
+  "version": "23.2.6",
   "sideEffects": false,
   "homepage": "https://www.syncfusion.com/javascript-ui-controls"
 }

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

@@ -143,4 +143,5 @@ export declare class Selection {
     private getRectanglePoints;
     private getTransRotationPoint;
     private getNumTextValue;
+    private isValueUpdated;
 }

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

@@ -3920,6 +3920,10 @@ var Selection = /** @class */ (function () {
     Selection.prototype.performEnterAction = function (e) {
         var parent = this.parent;
         if (parent.isResize) {
+            var isValue = this.isValueUpdated();
+            if (!isValue) {
+                return;
+            }
             var point = this.getNumTextValue();
             var aspectRatioElement = this.parent.element.querySelector('#' + this.parent.element.id + '_aspectratio');
             var blrAspRatElem = this.parent.element.querySelector('.e-ie-toolbar-aspect-ratio-btn');
@@ -3949,15 +3953,19 @@ var Selection = /** @class */ (function () {
                 var aspectRatioHeight = parent.element.querySelector('#' + parent.element.id + '_resizeHeight');
                 var aspectRatioWidth = parent.element.querySelector('#' + parent.element.id + '_resizeWidth');
                 if (isNullOrUndefined(aspectRatioElement)) {
-                    var elem = getComponent(aspectRatioHeight, 'numerictextbox');
-                    if (aspectRatioHeight && isNullOrUndefined(elem.value)) {
-                        elem.value = parseFloat(elem.placeholder);
-                        aspectRatioHeight.value = Math.floor(parent.img.destHeight).toString() + ' px';
+                    if (aspectRatioHeight) {
+                        var 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';
+                    if (aspectRatioWidth) {
+                        var elem = getComponent(aspectRatioWidth, 'numerictextbox');
+                        if (aspectRatioWidth && isNullOrUndefined(elem.value)) {
+                            elem.value = parseFloat(elem.placeholder);
+                            aspectRatioWidth.value = Math.floor(parent.img.destWidth).toString() + ' px';
+                        }
                     }
                 }
             }
@@ -4934,6 +4942,25 @@ var Selection = /** @class */ (function () {
         }
         return { x: width, y: height };
     };
+    Selection.prototype.isValueUpdated = function () {
+        var isValue = true;
+        var widthElement;
+        var heightElement;
+        if (!isBlazor()) {
+            widthElement = this.parent.element.querySelector('#' + this.parent.element.id + '_resizeWidth');
+            heightElement = this.parent.element.querySelector('#' + this.parent.element.id + '_resizeHeight');
+        }
+        else {
+            widthElement = this.parent.element.querySelector('.e-ie-toolbar-e-resize-width-input .e-numerictextbox');
+            heightElement = this.parent.element.querySelector('.e-ie-toolbar-e-resize-height-input .e-numerictextbox');
+        }
+        if (widthElement && heightElement) {
+            if (heightElement.value.replace(/,/g, '') === '' && widthElement.value.replace(/,/g, '') === '') {
+                isValue = false;
+            }
+        }
+        return isValue;
+    };
     return Selection;
 }());
 export { Selection };

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

@@ -41,6 +41,7 @@ export declare class Transform {
     private updateFlipColl;
     private setDestPointsForFlipState;
     private zoomAction;
+    private getZoomTriggerType;
     private zoomEvent;
     private disableZoomOutBtn;
     private drawZoomImgToCanvas;

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

@@ -680,7 +680,9 @@ 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() && 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(function (args) {
                     _this.zoomEvent(args, zoomFactor);
@@ -694,6 +696,18 @@ var Transform = /** @class */ (function () {
             }
         }
     };
+    Transform.prototype.getZoomTriggerType = function (type) {
+        switch (type) {
+            case 'MouseWheel':
+                return '1';
+            case 'Pinch':
+                return '2';
+            case 'Commands':
+                return '4';
+            default:
+                return '8';
+        }
+    };
     Transform.prototype.zoomEvent = function (zoomEventArgs, zoomFactor) {
         var parent = this.parent;
         if (zoomEventArgs.cancel) {
@@ -1514,7 +1528,8 @@ var Transform = /** @class */ (function () {
         }
     };
     Transform.prototype.getCurrentZoomFactor = function (zoomFactor) {
-        return (zoomFactor - this.prevZoomValue) * 0.1;
+        return zoomFactor >= 1 ? (this.prevZoomValue < 1 ? (zoomFactor - this.prevZoomValue) : (zoomFactor - this.prevZoomValue) * 0.1) :
+            (zoomFactor - this.prevZoomValue);
     };
     Transform.prototype.setCurrPanRegion = function (region, type, obj) {
         var panRegion = region;
@@ -2175,7 +2190,9 @@ var Transform = /** @class */ (function () {
     Transform.prototype.resizeEventHandler = function (args) {
         var parent = this.parent;
         var isRotate;
+        var aspectRatioWidth = parent.element.querySelector('#' + parent.element.id + '_resizeWidth');
         var aspectRatioHeight = parent.element.querySelector('#' + parent.element.id + '_resizeHeight');
+        var widthElem = parent.element.querySelector(".e-ie-toolbar-e-resize-width-input .e-numerictextbox");
         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) {
@@ -2188,10 +2205,19 @@ var Transform = /** @class */ (function () {
                     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 {

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

@@ -999,6 +999,7 @@ var ImageEditor = /** @class */ (function (_super) {
             this.currentFilter = '';
             this.tempFrameZoomLevel = null;
             this.cxtTbarHeight = null;
+            this.aspectWidth = this.aspectHeight = null;
             var obj_1 = { initialZoomValue: false };
             this.notify('draw', { prop: 'getInitialZoomValue', onPropertyChange: false, value: { obj: obj_1 } });
             if (obj_1['initialZoomValue']) {

package/src/image-editor/renderer/toolbar.js

@@ -832,13 +832,17 @@ var ToolbarModule = /** @class */ (function () {
     ToolbarModule.prototype.getResizeToolbarItem = function () {
         var toolbarItems = [];
         var isResize = this.parent.aspectWidth && this.parent.aspectHeight ? true : false;
+        var width = this.parent.transform.degree % 90 === 0 && this.parent.transform.degree % 180 !== 0 ?
+            Math.ceil(this.parent.img.srcHeight).toString() : Math.ceil(this.parent.img.srcWidth).toString();
+        var height = this.parent.transform.degree % 90 === 0 && this.parent.transform.degree % 180 !== 0 ?
+            Math.ceil(this.parent.img.srcWidth).toString() : Math.ceil(this.parent.img.srcHeight).toString();
         var 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: isResize ? this.parent.aspectWidth : null,
-                placeholder: isResize ? null : Math.ceil(this.parent.img.srcWidth).toString(), format: '###.## px' })
+                placeholder: isResize ? null : width, format: '###.## px' })
         });
         var spanHeight = document.createElement('span');
         spanHeight.innerHTML = this.l10n.getConstant('H');
@@ -846,7 +850,7 @@ var ToolbarModule = /** @class */ (function () {
         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: isResize ? this.parent.aspectHeight : null,
-                placeholder: isResize ? null : Math.ceil(this.parent.img.srcHeight).toString(), format: '###.## px' })
+                placeholder: isResize ? null : height, 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' });