@syncfusion/ej2-image-editor 25.2.4 → 26.1.38

package/dist/global/index.d.ts

@@ -1,6 +1,6 @@
 /*!
 *  filename: index.d.ts
-*  version : 25.2.4
+*  version : 26.1.38
 *  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@25.2.3",
+  "_id": "@syncfusion/ej2-image-editor@26.1.35",
   "_inBundle": false,
-  "_integrity": "sha512-f6CztZG4/zvCCgr6Y2my2p1cm/WFVbagIfbAceQ/h1SuX+etkcG7QIHtWfoRW1klFXMsd8FqcanusXdle53UZQ==",
+  "_integrity": "sha512-ZrvlSqlzKEEK3dXjmDd8+2ysoTgvz6nkD37nza3lk71r9ALdvzahT1dr9Dsw4n2TPqUAxotVpLUAFRA1PTi4lA==",
   "_location": "/@syncfusion/ej2-image-editor",
   "_phantomChildren": {},
   "_requested": {
@@ -23,21 +23,22 @@
     "/@syncfusion/ej2-react-image-editor",
     "/@syncfusion/ej2-vue-image-editor"
   ],
-  "_resolved": "https://nexus.syncfusioninternal.com/repository/ej2-hotfix-new/@syncfusion/ej2-image-editor/-/ej2-image-editor-25.2.3.tgz",
-  "_shasum": "f736e418255c725487fb29aabd36c2dfccd05ea7",
+  "_resolved": "https://nexus.syncfusioninternal.com/repository/ej2-hotfix-new/@syncfusion/ej2-image-editor/-/ej2-image-editor-26.1.35.tgz",
+  "_shasum": "7b9d27aee5bea4b6cb963cc26a61d0a97baf62ac",
   "_spec": "@syncfusion/ej2-image-editor@*",
-  "_where": "/jenkins/workspace/elease-automation_release_25.1.1/packages/included",
+  "_where": "/jenkins/workspace/elease-automation_release_26.1.1/packages/included",
   "author": {
     "name": "Syncfusion Inc."
   },
   "bundleDependencies": false,
   "dependencies": {
-    "@syncfusion/ej2-base": "~25.2.3",
-    "@syncfusion/ej2-buttons": "~25.2.4",
-    "@syncfusion/ej2-inputs": "~25.2.3",
-    "@syncfusion/ej2-navigations": "~25.2.4",
-    "@syncfusion/ej2-popups": "~25.2.4",
-    "@syncfusion/ej2-splitbuttons": "~25.2.4"
+    "@syncfusion/ej2-base": "~26.1.37",
+    "@syncfusion/ej2-buttons": "~26.1.35",
+    "@syncfusion/ej2-dropdowns": "~26.1.38",
+    "@syncfusion/ej2-inputs": "~26.1.38",
+    "@syncfusion/ej2-navigations": "~26.1.38",
+    "@syncfusion/ej2-popups": "~26.1.38",
+    "@syncfusion/ej2-splitbuttons": "~26.1.35"
   },
   "deprecated": false,
   "description": "Essential JS 2 ImageEditor",
@@ -67,7 +68,7 @@
     "url": "https://github.com/syncfusion/ej2-javascript-ui-controls/tree/master/controls/imageeditor"
   },
   "typings": "index.d.ts",
-  "version": "25.2.4",
+  "version": "26.1.38",
   "sideEffects": false,
   "homepage": "https://www.syncfusion.com/javascript-ui-controls"
 }

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

@@ -34,7 +34,6 @@ export declare class Crop {
     private panToSelRangle;
     private cropCircle;
     private getCurrCropState;
-    private isInitialRotate;
     private updateRotatePan;
     private crop;
     private cropEvent;

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

@@ -27,9 +27,6 @@ var Crop = /** @class */ (function () {
     Crop.prototype.cropping = function (args) {
         this.updateCropPvtVar();
         switch (args.prop) {
-            case 'cropImg':
-                this.cropImg(args.value['isRotateCrop']);
-                break;
             case 'cropCircle':
                 this.cropCircle(args.value['context'], args.value['isSave'], args.value['isFlip']);
                 break;
@@ -173,18 +170,12 @@ var Crop = /** @class */ (function () {
             var activeObj = extend({}, parent.activeObj, {}, true);
             this.cropObjColl();
             parent.transform.straighten = 0;
-            parent.notify('shape', { prop: 'zoomObjColl', onPropertyChange: false, value: { isPreventApply: null } });
-            var objColl = extend([], parent.objColl, [], true);
-            for (var i = 0, len = objColl.length; i < len; i++) {
-                if (this.isObjInImage(objColl[i])) {
-                    parent.notify('shape', { prop: 'apply', onPropertyChange: false,
-                        value: { shape: objColl[i].shape, obj: objColl[i], canvas: null } });
-                    parent.notify('shape', { prop: 'refreshActiveObj', onPropertyChange: false });
-                }
-            }
             parent.activeObj = activeObj;
             this.cropFreehandDrawColl();
-            parent.notify('freehand-draw', { prop: 'zoomFHDColl', onPropertyChange: false, value: { isPreventApply: null } });
+            parent.shapeColl = [];
+            parent.notify('shape', { prop: 'updateShapeColl', onPropertyChange: false });
+            parent.notify('shape', { prop: 'drawAnnotations', onPropertyChange: false,
+                value: { ctx: this.lowerContext, shape: 'zoom', pen: 'zoom', isPreventApply: null } });
             parent.notify('draw', { prop: 'clearOuterCanvas', onPropertyChange: false, value: { context: this.lowerContext } });
             parent.notify('draw', { prop: 'clearOuterCanvas', onPropertyChange: false, value: { context: this.upperContext } });
             if (parent.currSelectionPoint && parent.currSelectionPoint.shape === 'crop-circle') {
@@ -262,8 +253,9 @@ var Crop = /** @class */ (function () {
         if (straighten !== 0) {
             parent.transform.straighten = 0;
             parent.straightenBaseImageCanvas();
-            parent.notify('shape', { prop: 'zoomObjColl', onPropertyChange: false, value: { isPreventApply: null } });
-            parent.notify('freehand-draw', { prop: 'zoomFHDColl', onPropertyChange: false, value: { isPreventApply: null } });
+            parent.notify('shape', { prop: 'drawAnnotations', onPropertyChange: false,
+                value: { ctx: this.lowerContext, shape: 'zoom', pen: 'zoom', isPreventApply: null } });
+            parent.notify('shape', { prop: 'refreshActiveObj', onPropertyChange: false });
             parent.notify('draw', { prop: 'render-image', value: { isMouseWheel: false } });
         }
         this.resetZoom();
@@ -273,11 +265,11 @@ var Crop = /** @class */ (function () {
         if (straighten !== 0) {
             parent.transform.straighten = (flipState === 'horizontal' || flipState === 'vertical') ? -straighten : straighten;
             parent.straightenBaseImageCanvas();
-            parent.notify('shape', { prop: 'zoomObjColl', onPropertyChange: false, value: { isPreventApply: null } });
-            parent.notify('freehand-draw', { prop: 'zoomFHDColl', onPropertyChange: false, value: { isPreventApply: null } });
+            parent.notify('shape', { prop: 'drawAnnotations', onPropertyChange: false,
+                value: { ctx: this.lowerContext, shape: 'zoom', pen: 'zoom', isPreventApply: null } });
             parent.notify('draw', { prop: 'render-image', value: { isMouseWheel: false } });
-            parent.notify('shape', { prop: 'zoomObjColl', onPropertyChange: false, value: { isPreventApply: null } });
-            parent.notify('freehand-draw', { prop: 'zoomFHDColl', onPropertyChange: false, value: { isPreventApply: null } });
+            parent.notify('shape', { prop: 'drawAnnotations', onPropertyChange: false,
+                value: { ctx: this.lowerContext, shape: 'zoom', pen: 'zoom', isPreventApply: null } });
         }
         activeObj = extend({}, parent.objColl[parent.objColl.length - 1], {}, true);
         this.upperContext.clearRect(0, 0, parent.upperCanvas.width, parent.upperCanvas.height);
@@ -435,8 +427,8 @@ var Crop = /** @class */ (function () {
         parent.notify('shape', { prop: 'redrawObj', onPropertyChange: false, value: { degree: this.getCurrFlipState() } });
         parent.notify('freehand-draw', { prop: 'flipFHDColl', onPropertyChange: false,
             value: { value: this.getCurrFlipState() } });
-        parent.notify('shape', { prop: 'zoomObjColl', onPropertyChange: false, value: { isPreventApply: null } });
-        parent.notify('freehand-draw', { prop: 'zoomFHDColl', onPropertyChange: false, value: { isPreventApply: null } });
+        parent.notify('shape', { prop: 'drawAnnotations', onPropertyChange: false,
+            value: { ctx: this.lowerContext, shape: 'zoom', pen: 'zoom', isPreventApply: null } });
         this.lowerContext.filter = temp;
         if ((parent.currSelectionPoint && parent.currSelectionPoint.shape === 'crop-circle') || parent.isCircleCrop) {
             this.cropCircle(this.lowerContext);
@@ -507,6 +499,7 @@ var Crop = /** @class */ (function () {
             width = destWidth;
             height = destHeight;
         }
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
         var pointColl = parent.objColl[i].pointColl;
         for (var n = 0, len = pointColl.length; n < len; n++) {
             pointColl[n].ratioX = (pointColl[n].x - x) / width;
@@ -593,8 +586,8 @@ var Crop = /** @class */ (function () {
                 img.destWidth = width;
                 img.destHeight = height;
             }
-            parent.notify('shape', { prop: 'zoomObjColl', onPropertyChange: false, value: { isPreventApply: null } });
-            parent.notify('freehand-draw', { prop: 'zoomFHDColl', onPropertyChange: false, value: { isPreventApply: null } });
+            parent.notify('shape', { prop: 'drawAnnotations', onPropertyChange: false,
+                value: { ctx: this.lowerContext, shape: 'zoom', pen: 'zoom', isPreventApply: null } });
             img.destLeft = destPoints.startX;
             img.destTop = destPoints.startY;
             img.destWidth = destPoints.width;
@@ -633,13 +626,12 @@ var Crop = /** @class */ (function () {
             }
             parent.notify('freehand-draw', { prop: 'setSelPointColl', onPropertyChange: false,
                 value: { obj: { selPointColl: cropSelPointColl } } });
-            parent.notify('shape', { prop: 'iterateObjColl', onPropertyChange: false });
-            parent.notify('freehand-draw', { prop: 'freehandRedraw', onPropertyChange: false,
-                value: { context: this.lowerContext, points: null } });
+            parent.notify('shape', { prop: 'drawAnnotations', onPropertyChange: false,
+                value: { ctx: this.lowerContext, shape: 'iterate', pen: 'iterate', isPreventApply: null } });
             this.adjustStraightenForShapes('reverse', false);
             parent.notify('freehand-draw', { prop: 'updateFHDColl', onPropertyChange: false, value: { isPreventApply: true } });
-            parent.notify('shape', { prop: 'zoomObjColl', onPropertyChange: false, value: { isPreventApply: null } });
-            parent.notify('freehand-draw', { prop: 'zoomFHDColl', onPropertyChange: false, value: { isPreventApply: null } });
+            parent.notify('shape', { prop: 'drawAnnotations', onPropertyChange: false,
+                value: { ctx: this.lowerContext, shape: 'zoom', pen: 'zoom', isPreventApply: null } });
             if (parent.transform.degree === 0) {
                 parent.notify('transform', { prop: 'drawPannImage', onPropertyChange: false,
                     value: { point: { x: 0, y: 0 } } });
@@ -674,9 +666,8 @@ var Crop = /** @class */ (function () {
             parent.notify('freehand-draw', { prop: 'updateFHDColl', onPropertyChange: false, value: { isPreventApply: true } });
             var temp = this.lowerContext.filter;
             this.lowerContext.filter = 'none';
-            parent.notify('shape', { prop: 'iterateObjColl', onPropertyChange: false });
-            parent.notify('freehand-draw', { prop: 'freehandRedraw', onPropertyChange: false,
-                value: { context: this.lowerContext, points: null } });
+            parent.notify('shape', { prop: 'drawAnnotations', onPropertyChange: false,
+                value: { ctx: this.lowerContext, shape: 'iterate', pen: 'iterate', isPreventApply: null } });
             this.lowerContext.filter = temp;
             parent.currSelectionPoint = null;
         }
@@ -721,49 +712,18 @@ var Crop = /** @class */ (function () {
                 value: { context: context, value: parent.transform.currFlipState, isReverse: null } });
         }
     };
-    Crop.prototype.getCurrCropState = function (type, isAllowInvert) {
+    Crop.prototype.getCurrCropState = function () {
         var parent = this.parent;
         var flipState = '';
-        var state = [];
         var obj = { flipColl: null };
         parent.notify('transform', { prop: 'getFlipColl', onPropertyChange: false, value: { obj: obj } });
-        if (type === 'initial') {
-            if (Math.abs(parent.transform.degree) === 180) {
-                flipState = obj['flipColl'].length > 1 ? this.getCurrFlipState() : parent.transform.currFlipState;
-            }
-            else {
-                for (var i = 0, len = parent.rotateFlipColl.length; i < len; i++) {
-                    if (typeof (parent.rotateFlipColl[i]) === 'number') {
-                        state.push('number');
-                    }
-                    else if (typeof (parent.rotateFlipColl[i]) === 'string') {
-                        state.push('string');
-                    }
-                }
-                if (state.length > 1 && state[state.length - 1] === 'string' && state[state.length - 2] === 'number') {
-                    if (parent.transform.currFlipState === 'horizontal') {
-                        flipState = 'vertical';
-                    }
-                    else if (parent.transform.currFlipState === 'vertical') {
-                        flipState = 'horizontal';
-                    }
-                }
-                else if (state.length > 1 && state[state.length - 1] === 'number' && state[state.length - 2] === 'string') {
-                    flipState = obj['flipColl'].length > 1 ? this.getCurrFlipState() : parent.transform.currFlipState;
-                }
+        flipState = this.getCurrFlipState();
+        if (parent.transform.degree === -90 || parent.transform.degree === -270) {
+            if (flipState === 'horizontal') {
+                flipState = 'vertical';
             }
-        }
-        else {
-            flipState = this.getCurrFlipState();
-            if (isAllowInvert || !this.isInitialRotate()) {
-                if (parent.transform.degree === -90 || parent.transform.degree === -270) {
-                    if (flipState === 'horizontal') {
-                        flipState = 'vertical';
-                    }
-                    else if (flipState === 'vertical') {
-                        flipState = 'horizontal';
-                    }
-                }
+            else if (flipState === 'vertical') {
+                flipState = 'horizontal';
             }
         }
         if (flipState === '') {
@@ -771,13 +731,6 @@ var Crop = /** @class */ (function () {
         }
         return flipState;
     };
-    Crop.prototype.isInitialRotate = function () {
-        var isRotate = false;
-        if (this.parent.rotateFlipColl.length > 0 && typeof (this.parent.rotateFlipColl[0]) === 'number') {
-            isRotate = true;
-        }
-        return isRotate;
-    };
     Crop.prototype.updateRotatePan = function () {
         var parent = this.parent;
         if (isNullOrUndefined(parent.panPoint.currentPannedPoint)) {
@@ -788,7 +741,7 @@ var Crop = /** @class */ (function () {
         var _a = parent.panPoint.currentPannedPoint, x = _a.x, y = _a.y;
         if (parent.rotateFlipColl.length > 0 && typeof (parent.rotateFlipColl[0]) === 'number'
             && degree < 0) {
-            panRegion = this.getCurrCropState('reverse', true);
+            panRegion = this.getCurrCropState();
         }
         else {
             panRegion = this.getCurrFlipState();
@@ -878,6 +831,10 @@ var Crop = /** @class */ (function () {
                     this.isPreventScaling = false;
                 }
                 this.cropImg();
+                if (this.isPreventScaling) {
+                    parent.aspectWidth = parent.img.destWidth;
+                    parent.aspectHeight = parent.img.destHeight;
+                }
                 parent.notify('freehand-draw', { prop: 'resetStraightenPoint' });
                 parent.isCropTab = false;
                 parent.transform.zoomFactor = 0;
@@ -919,6 +876,7 @@ var Crop = /** @class */ (function () {
     Crop.prototype.resizeWrapper = function () {
         var parent = this.parent;
         if (Browser.isDevice) {
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
             var elem = parent.element;
             var ctxToolbar = elem.querySelector('#' + elem.id + '_contextualToolbarArea');
             if (ctxToolbar && ctxToolbar.style.position === '' && !this.isTransformCrop) {

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

@@ -50,6 +50,8 @@ export declare class Draw {
     private isDownScale;
     private tempStraightenDestPoints;
     private preventStraightening;
+    private tempObjColl;
+    private tempPointColl;
     constructor(parent: ImageEditor);
     destroy(): void;
     private addEventListener;
@@ -134,6 +136,7 @@ export declare class Draw {
     private panToSel;
     private drawZoomPanImage;
     private openNewImage;
+    private getImageSizeFromURL;
     private dlgBtnClick;
     private dlgCloseBtnClick;
     private applyDialogOption;