@syncfusion/ej2-image-editor 22.2.11 → 23.1.38

package/dist/global/index.d.ts

@@ -1,7 +1,7 @@
 /*!
 *  filename: index.d.ts
-*  version : 22.2.11
-*  Copyright Syncfusion Inc. 2001 - 2020. All rights reserved.
+*  version : 23.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
 *  licensing@syncfusion.com. Any infringement will be prosecuted under

package/package.json

@@ -1,8 +1,8 @@
 {
   "_from": "@syncfusion/ej2-image-editor@*",
-  "_id": "@syncfusion/ej2-image-editor@22.2.10",
+  "_id": "@syncfusion/ej2-image-editor@23.1.36",
   "_inBundle": false,
-  "_integrity": "sha512-eBIoOxPFr9uETyfD1UX79OoCSsyIMz1KIWVz7PsIBJfzJCSO5J+pxGOm2FkWt0KJrUeGBVb0xwYW7xhvDA2wJQ==",
+  "_integrity": "sha512-A6bph2XTzzn8GAjli/kAtAz4JPSrDYTzAQF6UOa0I+RqOKB3/w2/7CBmLNKlQVFd3I5nyY45z1M26X0ua0+48w==",
   "_location": "/@syncfusion/ej2-image-editor",
   "_phantomChildren": {},
   "_requested": {
@@ -23,21 +23,21 @@
     "/@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-22.2.10.tgz",
-  "_shasum": "dc022c0050e96ec45295004156d94db2a63b0a1b",
+  "_resolved": "https://nexus.syncfusion.com/repository/ej2-hotfix-new/@syncfusion/ej2-image-editor/-/ej2-image-editor-23.1.36.tgz",
+  "_shasum": "b13260748329c7b0412240bdd9714f2bbeb97281",
   "_spec": "@syncfusion/ej2-image-editor@*",
-  "_where": "/jenkins/workspace/elease-automation_release_21.1.1/packages/included",
+  "_where": "/jenkins/workspace/elease-automation_release_23.1.1/packages/included",
   "author": {
     "name": "Syncfusion Inc."
   },
   "bundleDependencies": false,
   "dependencies": {
-    "@syncfusion/ej2-base": "~22.2.10",
-    "@syncfusion/ej2-buttons": "~22.2.9",
-    "@syncfusion/ej2-inputs": "~22.2.9",
-    "@syncfusion/ej2-navigations": "~22.2.11",
-    "@syncfusion/ej2-popups": "~22.2.11",
-    "@syncfusion/ej2-splitbuttons": "~22.2.8"
+    "@syncfusion/ej2-base": "~23.1.38",
+    "@syncfusion/ej2-buttons": "~23.1.36",
+    "@syncfusion/ej2-inputs": "~23.1.38",
+    "@syncfusion/ej2-navigations": "~23.1.36",
+    "@syncfusion/ej2-popups": "~23.1.38",
+    "@syncfusion/ej2-splitbuttons": "~23.1.36"
   },
   "deprecated": false,
   "description": "Essential JS 2 ImageEditor",
@@ -67,7 +67,7 @@
     "url": "https://github.com/syncfusion/ej2-javascript-ui-controls/tree/master/controls/imageeditor"
   },
   "typings": "index.d.ts",
-  "version": "22.2.11",
+  "version": "23.1.38",
   "sideEffects": false,
   "homepage": "https://www.syncfusion.com/javascript-ui-controls"
 }

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

@@ -99,12 +99,19 @@ var Crop = /** @class */ (function () {
     Crop.prototype.cropImg = function (isRotateCrop) {
         var parent = this.parent;
         var isNullCrop = isNullOrUndefined(isRotateCrop);
+        var resizeIcon = this.parent.element.querySelector('#' + this.parent.element.id + '_nonaspectratio');
         var actPoint = parent.activeObj.activePoint;
+        var isRotated = false;
+        for (var i = 0; i < parent.rotateFlipColl.length; i++) {
+            if (parent.rotateFlipColl[i] === 90 || parent.rotateFlipColl[i] === -90) {
+                isRotated = true;
+            }
+        }
         parent.notify('draw', { prop: 'setImageEdited', onPropertyChange: false });
-        if (isNullCrop) {
+        if (isNullCrop || resizeIcon) {
             this.croppedDegree = parent.transform.degree;
         }
-        if (isNullCrop && parent.transform.degree !== 0) {
+        if (isNullCrop && (parent.transform.degree !== 0) || isRotated) {
             this.updateCropObj();
             var point = { startX: parent.img.destLeft, startY: parent.img.destTop, width: parent.img.destWidth,
                 height: parent.img.destHeight };
@@ -135,7 +142,7 @@ var Crop = /** @class */ (function () {
             var obj = { width: 0, height: 0 };
             parent.notify('transform', { prop: 'calcMaxDimension', onPropertyChange: false,
                 value: { width: actPoint.width * ratio.width,
-                    height: actPoint.height * ratio.height, obj: obj } });
+                    height: actPoint.height * ratio.height, obj: obj, isImgShape: null } });
             var maxDimension = obj;
             this.upperContext.clearRect(0, 0, parent.upperCanvas.width, parent.upperCanvas.height);
             this.lowerContext.clearRect(0, 0, parent.lowerCanvas.width, parent.lowerCanvas.height);
@@ -148,8 +155,7 @@ var Crop = /** @class */ (function () {
             parent.img.destWidth = maxDimension.width;
             parent.img.destHeight = maxDimension.height;
             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 = 'none';
             var activeObj = extend({}, parent.activeObj, {}, true);
             this.cropObjColl();
@@ -166,7 +172,7 @@ var Crop = /** @class */ (function () {
             parent.notify('freehand-draw', { prop: 'zoomFHDColl', onPropertyChange: false, value: { 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.shape === 'crop-circle') {
+            if (parent.currSelectionPoint != null && parent.currSelectionPoint.shape === 'crop-circle') {
                 this.cropCircle(this.lowerContext);
             }
             else {
@@ -269,7 +275,7 @@ var Crop = /** @class */ (function () {
             for (var i = 0; i < (zoomFactor * 10); i++) {
                 parent.isUndoRedo = true;
                 parent.notify('transform', { prop: 'zoomAction', onPropertyChange: false,
-                    value: { zoomFactor: -0.1, zoomPoint: null } });
+                    value: { zoomFactor: -0.1, zoomPoint: null }, isResize: null });
             }
             parent.isUndoRedo = isUndoRedo;
             parent.notify('draw', { prop: 'resetPanPoints', onPropertyChange: false });
@@ -292,8 +298,7 @@ var Crop = /** @class */ (function () {
         this.lowerContext.clearRect(0, 0, parent.lowerCanvas.width, parent.lowerCanvas.height);
         this.upperContext.clearRect(0, 0, parent.upperCanvas.width, parent.upperCanvas.height);
         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 });
         for (var i = 0, len = parent.objColl.length; i < len; i++) {
             parent.objColl[i].shapeFlip = '';
         }
@@ -313,8 +318,7 @@ var Crop = /** @class */ (function () {
         parent.notify('draw', { prop: 'setDestPoints', onPropertyChange: false });
         parent.notify('draw', { prop: 'currTransState', onPropertyChange: false,
             value: { type: 'initial', isPreventDestination: null, context: null, isPreventCircleCrop: null } });
-        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: 'currTransState', onPropertyChange: false,
@@ -434,12 +438,13 @@ var Crop = /** @class */ (function () {
     };
     Crop.prototype.setCurrSelPoints = function (isSetDimension) {
         var parent = this.parent;
+        parent.allowDownScale = false;
         var destPoint = this.cropDestPoints;
         var filter = this.lowerContext.filter;
         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 = destPoint.startX;
         parent.img.destTop = destPoint.startY;
         parent.img.destWidth = destPoint.width;
@@ -461,8 +466,7 @@ var Crop = /** @class */ (function () {
             parent.img.destLeft += parent.panPoint.totalPannedInternalPoint.x;
             parent.img.destTop += parent.panPoint.totalPannedInternalPoint.y;
         }
-        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 = filter;
         parent.notify('draw', { prop: 'currTransState', onPropertyChange: false,
             value: { type: 'reverse', isPreventDestination: null, context: null, isPreventCircleCrop: true } });
@@ -508,7 +512,12 @@ var Crop = /** @class */ (function () {
             parent.activeObj = extend({}, actObj, null, true);
             var activeObj = extend({}, parent.activeObj, null, true);
             parent.notify('shape', { prop: 'refreshActiveObj', onPropertyChange: false });
-            this.panToSelRangle();
+            parent.currSelectionPoint = null;
+            parent.isCircleCrop = false;
+            if (parent.transform.degree !== 0) {
+                parent.notify('transform', { prop: 'drawPannedImage', value: { xDiff: 0, yDiff: 0 } });
+                parent.panPoint.currentPannedPoint = { x: 0, y: 0 };
+            }
             parent.objColl = cropObjColl;
             parent.pointColl = cropPointColl;
             parent.freehandCounter = parent.pointColl.length;
@@ -520,7 +529,6 @@ var Crop = /** @class */ (function () {
             parent.notify('freehand-draw', { prop: 'updateFHDColl', onPropertyChange: false });
             parent.notify('shape', { prop: 'zoomObjColl', onPropertyChange: false, value: { isPreventApply: null } });
             parent.notify('freehand-draw', { prop: 'zoomFHDColl', onPropertyChange: false, value: { isPreventApply: null } });
-            parent.currSelectionPoint = null;
             if (parent.transform.degree === 0) {
                 parent.notify('transform', { prop: 'drawPannImage', onPropertyChange: false,
                     value: { point: { x: 0, y: 0 } } });
@@ -552,8 +560,6 @@ var Crop = /** @class */ (function () {
     };
     Crop.prototype.panToSelRangle = function (isReverse) {
         var parent = this.parent;
-        var obj = extend({}, parent.currSelectionPoint, null, true);
-        parent.currSelectionPoint = null;
         var panX = parent.transform.degree !== 0 ?
             isReverse ? -parent.cropObj.totalPannedClientPoint.x : parent.cropObj.totalPannedClientPoint.x : 0;
         var panY = parent.transform.degree !== 0 ?
@@ -563,7 +569,6 @@ var Crop = /** @class */ (function () {
             parent.notify('transform', { prop: 'drawPannedImage', value: { xDiff: panX, yDiff: panY } });
             parent.panPoint.currentPannedPoint = { x: 0, y: 0 };
         }
-        parent.currSelectionPoint = obj;
     };
     Crop.prototype.cropCircle = function (context, isSave, isFlip) {
         var parent = this.parent;
@@ -571,6 +576,8 @@ var Crop = /** @class */ (function () {
             parent.notify('draw', { prop: 'setTransform', onPropertyChange: false,
                 value: { context: context, value: parent.transform.currFlipState, isReverse: null } });
         }
+        var temp = context.filter;
+        context.filter = 'none';
         context.globalCompositeOperation = 'destination-in';
         context.beginPath();
         var centerX = isNullOrUndefined(isSave) ? parent.img.destLeft + (parent.img.destWidth / 2) : context.canvas.width / 2;
@@ -582,6 +589,7 @@ var Crop = /** @class */ (function () {
         context.restore();
         context.globalCompositeOperation = 'source-over';
         parent.currObjType.isActiveObj = parent.isCircleCrop = true;
+        context.filter = temp;
         if (isFlip && parent.transform.currFlipState !== '') {
             parent.notify('draw', { prop: 'setTransform', onPropertyChange: false,
                 value: { context: context, value: parent.transform.currFlipState, isReverse: null } });
@@ -722,10 +730,16 @@ var Crop = /** @class */ (function () {
                     y: parent.activeObj.activePoint.startY }, endPoint: { x: parent.activeObj.activePoint.endX,
                     y: parent.activeObj.activePoint.endY }, preventScaling: false };
             if (!object_1['isCropToolbar'] && isBlazor() && parent.events && parent.events.cropping.hasDelegate === true) {
-                /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
-                parent.dotNetRef.invokeMethodAsync('CropEventAsync', 'OnCrop', transitionArgs).then(function (args) {
-                    _this.cropEvent(args, obj, object_1);
-                });
+                if (parent.currentToolbar == 'resize-toolbar') {
+                    parent.dotNetRef.invokeMethodAsync('CropEventAsync', 'OnCrop', transitionArgs);
+                    this.cropEvent(transitionArgs, obj, object_1);
+                }
+                else {
+                    /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
+                    parent.dotNetRef.invokeMethodAsync('CropEventAsync', 'OnCrop', transitionArgs).then(function (args) {
+                        _this.cropEvent(args, obj, object_1);
+                    });
+                }
             }
             else {
                 if (!object_1['isCropToolbar']) {
@@ -769,11 +783,14 @@ var Crop = /** @class */ (function () {
                 }
                 parent.notify('transform', { prop: 'setCropDimension', onPropertyChange: false,
                     value: { width: parent.cropObj.destPoints.width, height: parent.cropObj.destPoints.height } });
-                if (!isBlazor() && !object['isCropToolbar']) {
+                var aspectIcon = this.parent.element.querySelector('#' + this.parent.element.id + '_aspectratio');
+                var nonAspectIcon = this.parent.element.querySelector('#' + this.parent.element.id + '_nonaspectratio');
+                if (!isBlazor() && !object['isCropToolbar'] && (isNullOrUndefined(aspectIcon) && isNullOrUndefined(nonAspectIcon))) {
                     parent.notify('toolbar', { prop: 'refresh-toolbar', onPropertyChange: false, value: { type: 'main',
                             isApplyBtn: false, isCropping: false, isZooming: null, cType: null } });
+                    /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
                 }
-                else if (!object['isCropToolbar']) {
+                else if (!object['isCropToolbar'] && this.parent.currentToolbar !== 'resize-toolbar') {
                     this.parent.updateToolbar(this.parent.element, 'imageLoaded');
                 }
             }
@@ -784,12 +801,12 @@ var Crop = /** @class */ (function () {
         var widthRatio;
         var heightRatio;
         if (parent.transform.degree === 0 || parent.transform.degree % 180 === 0) {
-            widthRatio = (dimension ? dimension.width : parent.baseImg.width) / parent.img.destWidth;
-            heightRatio = (dimension ? dimension.height : parent.baseImg.height) / parent.img.destHeight;
+            widthRatio = (dimension ? dimension.width : parent.baseImgCanvas.width) / parent.img.destWidth;
+            heightRatio = (dimension ? dimension.height : parent.baseImgCanvas.height) / parent.img.destHeight;
         }
         else {
-            widthRatio = (dimension ? dimension.height : parent.baseImg.height) / parent.img.destWidth;
-            heightRatio = (dimension ? dimension.width : parent.baseImg.width) / parent.img.destHeight;
+            widthRatio = (dimension ? dimension.height : parent.baseImgCanvas.height) / parent.img.destWidth;
+            heightRatio = (dimension ? dimension.width : parent.baseImgCanvas.width) / parent.img.destHeight;
         }
         if (obj) {
             obj['width'] = widthRatio;

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

@@ -39,7 +39,11 @@ export declare class Draw {
     private inputElem;
     private isFileChanged;
     private isNewPath;
+    private isResizeSelect;
     private arrowDimension;
+    private tempFrame;
+    private origDim;
+    private isImageApply;
     constructor(parent: ImageEditor);
     destroy(): void;
     private addEventListener;
@@ -48,6 +52,7 @@ export declare class Draw {
     getModuleName(): string;
     private updatePrivateVariables;
     private reset;
+    private drawImage;
     private drawObject;
     private rotateContext;
     private setDragLimit;
@@ -73,8 +78,10 @@ export declare class Draw {
     private arrowCircle;
     private arrowCircleSolid;
     private arrowBar;
+    private shapeImage;
     private shapeText;
     private updateActPoint;
+    private rotateImage;
     private rotateText;
     private textFlipDegree;
     private clearOuterCanvas;
@@ -87,7 +94,9 @@ export declare class Draw {
     private renderImage;
     private imageOnLoad;
     private errorLoading;
+    private updateBaseImgCanvas;
     private updateCanvas;
+    private resetFrameZoom;
     private performCancel;
     private cancelItems;
     private cancelPen;
@@ -121,4 +130,11 @@ export declare class Draw {
     private moveToSelectionRange;
     private isSelectionBiggerThanCanvas;
     private isSelectionOutsideCanvas;
+    private downScaleImgCanvas;
+    private downScale;
+    private drawImgToCtx;
+    private getFrameColor;
+    private applyFrame;
+    private triggerFrameChange;
+    private setFrameObj;
 }