@syncfusion/ej2-image-editor 31.1.17 → 31.1.22

package/dist/global/index.d.ts

@@ -1,7 +1,7 @@
 /*!
 *  filename: index.d.ts
-*  version : 31.1.17
-*  Copyright Syncfusion Inc. 2001 - 2024. All rights reserved.
+*  version : 31.1.22
+*  Copyright Syncfusion Inc. 2001 - 2025. 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,49 +1,22 @@
 {
-  "_from": "@syncfusion/ej2-image-editor@*",
-  "_id": "@syncfusion/ej2-image-editor@28.2.0",
-  "_inBundle": false,
-  "_integrity": "sha512-ZRXJy4ABn0/rhrAz6BSWecD3KqFtdXN6HpMbzT1Nwd+EpL4R8sKC7vJF4xo/km1ZTWgDjgFdImviKKV0Ze/GOQ==",
-  "_location": "/@syncfusion/ej2-image-editor",
-  "_phantomChildren": {},
-  "_requested": {
-    "type": "range",
-    "registry": true,
-    "raw": "@syncfusion/ej2-image-editor@*",
-    "name": "@syncfusion/ej2-image-editor",
-    "escapedName": "@syncfusion%2fej2-image-editor",
-    "scope": "@syncfusion",
-    "rawSpec": "*",
-    "saveSpec": null,
-    "fetchSpec": "*"
-  },
-  "_requiredBy": [
-    "/",
-    "/@syncfusion/ej2",
-    "/@syncfusion/ej2-angular-image-editor",
-    "/@syncfusion/ej2-react-image-editor",
-    "/@syncfusion/ej2-vue-image-editor"
-  ],
-  "_resolved": "https://nexus.syncfusioninternal.com/repository/ej2-development/@syncfusion/ej2-image-editor/-/ej2-image-editor-28.2.0.tgz",
-  "_shasum": "db58ce2ba449bdc03efaac0d29a3129ed74204ec",
-  "_spec": "@syncfusion/ej2-image-editor@*",
-  "_where": "D:\\SF3992\\WFH\\Nexus\\release",
-  "author": {
-    "name": "Syncfusion Inc."
-  },
-  "bundleDependencies": false,
+  "name": "@syncfusion/ej2-image-editor",
+  "version": "31.1.22",
+  "description": "Essential JS 2 ImageEditor",
+  "author": "Syncfusion Inc.",
+  "license": "SEE LICENSE IN license",
+  "main": "./dist/ej2-image-editor.umd.min.js",
+  "module": "./index.js",
+  "es2015": "./dist/es6/ej2-image-editor.es5.js",
   "dependencies": {
-    "@syncfusion/ej2-base": "~31.1.17",
-    "@syncfusion/ej2-buttons": "~31.1.17",
-    "@syncfusion/ej2-dropdowns": "~31.1.17",
-    "@syncfusion/ej2-inputs": "~31.1.17",
-    "@syncfusion/ej2-navigations": "~31.1.17",
-    "@syncfusion/ej2-popups": "~31.1.17",
+    "@syncfusion/ej2-base": "~31.1.22",
+    "@syncfusion/ej2-buttons": "~31.1.21",
+    "@syncfusion/ej2-dropdowns": "~31.1.22",
+    "@syncfusion/ej2-inputs": "~31.1.22",
+    "@syncfusion/ej2-navigations": "~31.1.20",
+    "@syncfusion/ej2-popups": "~31.1.20",
     "@syncfusion/ej2-splitbuttons": "~31.1.17"
   },
-  "deprecated": false,
-  "description": "Essential JS 2 ImageEditor",
   "devDependencies": {},
-  "es2015": "./dist/es6/ej2-image-editor.es5.js",
   "keywords": [
     "ej2",
     "syncfusion",
@@ -59,16 +32,11 @@
     "web image editor",
     "image editing software"
   ],
-  "license": "SEE LICENSE IN license",
-  "main": "./dist/ej2-image-editor.umd.min.js",
-  "module": "./index.js",
-  "name": "@syncfusion/ej2-image-editor",
   "repository": {
     "type": "git",
     "url": "https://github.com/syncfusion/ej2-javascript-ui-controls/tree/master/controls/imageeditor"
   },
   "typings": "index.d.ts",
-  "version": "31.1.17",
   "sideEffects": false,
   "homepage": "https://www.syncfusion.com/javascript-ui-controls"
 }

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

@@ -65,8 +65,12 @@ var Export = /** @class */ (function () {
             type = type ? type : 'Png';
             parent.notify('shape', { prop: 'redrawActObj', onPropertyChange: false,
                 value: { x: null, y: null, isMouseDown: null } });
+            var imageQualityObj = { currentImageQuality: 1 };
+            if (type.toLowerCase() === 'jpeg') {
+                parent.notify('toolbar', { prop: 'getcurrentImageQuality', onPropertyChange: false, value: { obj: imageQualityObj } });
+            }
             var beforeSave = { cancel: false, fileName: fileName ? fileName : imageName,
-                fileType: type, imageQuality: imgQuality };
+                fileType: type, imageQuality: imgQuality || imageQualityObj['currentImageQuality'] };
             parent.trigger('beforeSave', beforeSave);
             this.beforeSaveEvent(beforeSave, type, fileName, imageName, imgQuality);
         }
@@ -82,7 +86,7 @@ var Export = /** @class */ (function () {
                 this.toSVGImg(fileName);
             }
             else {
-                this.toBlobFn(fileName, lowerCaseType, imgQuality);
+                this.toBlobFn(fileName, lowerCaseType, observableSaveArgs.imageQuality || imgQuality);
             }
             var saved = { fileName: fileName ? fileName : imageName, fileType: type };
             parent.trigger('saved', saved);

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

@@ -32,6 +32,7 @@ export declare class FreehandDrawing {
     private hoverFhd;
     private freehandDownHandler;
     private freehandUpHandler;
+    private getHighestOrder;
     private freehandMoveHandler;
     private processPoint;
     private calcCurveCP;

package/src/image-editor/action/freehand-draw.js

@@ -149,6 +149,15 @@ var FreehandDrawing = /** @class */ (function () {
             case 'resetFreehandDrawSelectedId':
                 this.fhdSelID = null;
                 break;
+            case 'getFHDSelected':
+                args.value['obj']['isSelected'] = (this.parent.pointColl[this.fhdSelIdx] && this.parent.pointColl[this.fhdSelIdx].isSelected) ? this.parent.pointColl[this.fhdSelIdx].isSelected : false;
+                break;
+            case 'resetFHDIdx':
+                this.fhdHovIdx = this.fhdSelID = this.fhdSelIdx = null;
+                break;
+            case 'getHighestOrder':
+                this.getHighestOrder();
+                break;
             case 'getTempFreeHandDrawEditingStyles':
                 args.value['obj']['tempFreeHandDrawEditingStyles'] = this.tempFHDStyles;
                 break;
@@ -331,10 +340,11 @@ var FreehandDrawing = /** @class */ (function () {
         parent.notify('freehand-draw', { prop: 'getSelPointColl', onPropertyChange: false, value: { obj: selPointCollObj } });
         prevObj.selPointColl = extend([], selPointCollObj['selPointColl'], [], true);
         var fhCnt = parent.freehandCounter;
-        var order = parent.objColl.length + parent.freehandCounter + 1;
+        var penIndex = this.getHighestOrder();
+        var order = parent.objColl.length + penIndex + 1;
         parent.pointColl[fhCnt] = { points: extend([], parent.points), strokeColor: parent.activeObj.strokeSettings.strokeColor,
             strokeWidth: this.penStrokeWidth, flipState: parent.transform.currFlipState,
-            id: 'pen_' + (this.currFHDIdx + 1), order: order };
+            id: 'pen_' + (penIndex + 1), order: order };
         parent.points = [];
         this.dummyPoints = [];
         this.selPointColl[fhCnt] = { points: extend([], this.selPoints) };
@@ -349,7 +359,7 @@ var FreehandDrawing = /** @class */ (function () {
                     previousCropObj: prevCropObj, previousText: null,
                     currentText: null, previousFilter: null, isCircleCrop: null } });
         }
-        var shapeSettings = { id: 'pen_' + (this.currFHDIdx + 1), type: ShapeType.FreehandDraw,
+        var shapeSettings = { id: 'pen_' + (penIndex + 1), type: ShapeType.FreehandDraw,
             startX: this.freehandDownPoint.x, startY: this.freehandDownPoint.y,
             strokeColor: parent.activeObj.strokeSettings.strokeColor, strokeWidth: this.penStrokeWidth,
             points: parent.pointColl[this.currFHDIdx].points, index: order };
@@ -358,6 +368,17 @@ var FreehandDrawing = /** @class */ (function () {
         this.triggerShapeChanging(shapeChangingArgs);
         this.currFHDIdx++;
     };
+    FreehandDrawing.prototype.getHighestOrder = function () {
+        var parent = this.parent;
+        var index = 0;
+        for (var i = 0; i < parent.pointColl.length; i++) {
+            var value = parseInt(parent.pointColl[i].id.split('_')[1], 10);
+            if (index < value) {
+                index = value;
+            }
+        }
+        return index;
+    };
     FreehandDrawing.prototype.freehandMoveHandler = function (e) {
         this.isFreehandPointMoved = true;
         var rect = this.parent.upperCanvas.getBoundingClientRect();
@@ -746,6 +767,7 @@ var FreehandDrawing = /** @class */ (function () {
             }
             parent.freehandCounter -= 1;
             this.fhdHovIdx = this.fhdSelIdx = null;
+            this.currFHDIdx--;
             parent.notify('selection', { prop: 'resetFreehandDrawVariables' });
             parent.notify('draw', { prop: 'render-image', value: { isMouseWheel: null } });
             parent.notify('toolbar', { prop: 'refresh-main-toolbar', onPropertyChange: false });
@@ -1142,6 +1164,11 @@ var FreehandDrawing = /** @class */ (function () {
         var parent = this.parent;
         var point = parent.pointColl[this.fhdSelIdx];
         parent.trigger('shapeChanging', shapeChangingArgs);
+        if (shapeChangingArgs.cancel) {
+            parent.editCompleteArgs = shapeChangingArgs;
+            this.cancelFhd();
+            return;
+        }
         if (parent.element.getAttribute('data-value') === 'mask-drawing' && !this.isMasking) {
             this.isMasking = true;
             parent.upperCanvas.style.cursor = 'crosshair';

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

@@ -3463,6 +3463,9 @@ var Selection = /** @class */ (function () {
                 var objColl = extend([], parent.objColl, [], true);
                 if (!isNullOrUndefined(obj['index']) && obj['index'] > -1) {
                     parent.notify('freehand-draw', { prop: 'selectFhd', value: { type: 'ok' } });
+                    if (!this.isFhdPoint) {
+                        return;
+                    }
                     parent.notify('freehand-draw', { prop: 'hoverFhd', onPropertyChange: false,
                         value: { strokeColor: null, strokeWidth: null } });
                     parent.notify('toolbar', { prop: 'renderQAT', onPropertyChange: false, value: { isPenEdit: true } });
@@ -4007,7 +4010,9 @@ var Selection = /** @class */ (function () {
                 this.currentDrawingShape = parent.drawingShape.toLowerCase();
                 if (dummyClick) {
                     parent.enableShapeDrawing(parent.toPascalCase(parent.drawingShape), true);
-                    parent.upperCanvas.style.cursor = 'crosshair';
+                    if (parent.cursor !== 'move') {
+                        parent.upperCanvas.style.cursor = 'crosshair';
+                    }
                 }
             }
             parent.isShapeDrawing = false;
@@ -5029,7 +5034,14 @@ var Selection = /** @class */ (function () {
                 }
                 if (!this.isCropSelection && parent.activeObj.shape !== 'redact') {
                     parent.trigger('shapeChanging', shapeChangingArgs);
-                    this.shapeEvent(shapeChangingArgs);
+                    if (shapeChangingArgs.cancel) {
+                        parent.objColl.splice(i, 0, temp);
+                        parent.notify('shape', { prop: 'refreshActiveObj', onPropertyChange: false });
+                        parent.notify('draw', { prop: 'render-image', value: { isMouseWheel: null } });
+                    }
+                    else {
+                        this.shapeEvent(shapeChangingArgs);
+                    }
                     parent.editCompleteArgs = shapeChangingArgs;
                 }
                 else {

package/src/image-editor/action/undo-redo.js

@@ -359,6 +359,12 @@ var UndoRedo = /** @class */ (function () {
                 parent.initialAdjustmentValue = this.lowerContext.filter;
                 parent.notify('filter', { prop: 'setBevelFilter', onPropertyChange: false, value: { bevelFilter: this.lowerContext.filter } });
                 var editCompleteArgs = { action: this.getUndoRedoAction(obj.operation) };
+                var isSelected = void 0;
+                if (obj.operation === 'freehanddraw' || obj.operation === 'freehand-draw') {
+                    var object = { isSelected: null };
+                    parent.notify('freehand-draw', { prop: 'getFHDSelected', onPropertyChange: false, value: { obj: object } });
+                    isSelected = object['isSelected'];
+                }
                 switch (obj.operation) {
                     case 'shapeTransform':
                     case 'brightness':
@@ -386,6 +392,10 @@ var UndoRedo = /** @class */ (function () {
                         this.updateFreehandDraw(obj.previousPointColl, obj.previousSelPointColl);
                         parent.notify('freehand-draw', { prop: 'setCurrentFreehandDrawIndex',
                             value: { value: parent.pointColl.length } });
+                        if (isSelected) {
+                            parent.notify('freehand-draw', { prop: 'resetFHDIdx' });
+                            parent.notify('selection', { prop: 'resetFreehandDrawVariables' });
+                        }
                         break;
                     case 'freehanddrawCustomized':
                         this.updateFreehandDrawCustomized(obj.previousObjColl, obj.previousPointColl);

package/src/image-editor/base/image-editor.d.ts

@@ -1925,4 +1925,5 @@ export declare class ImageEditor extends Component<HTMLDivElement> implements IN
      * @returns {boolean}.
      */
     drawRedact(type?: RedactType, x?: number, y?: number, width?: number, height?: number, value?: number): boolean;
+    private handlePenActiveState;
 }

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

@@ -2101,7 +2101,7 @@ var ImageEditor = /** @class */ (function (_super) {
      * @returns {void}.
      */
     ImageEditor.prototype.undo = function () {
-        this.manageActiveAction();
+        this.handlePenActiveState();
         this.notify('undo-redo', { prop: 'undo', onPropertyChange: false });
         this.notify('draw', { prop: 'redrawDownScale' });
     };
@@ -2113,7 +2113,7 @@ var ImageEditor = /** @class */ (function (_super) {
      * @returns {void}.
      */
     ImageEditor.prototype.redo = function () {
-        this.manageActiveAction();
+        this.handlePenActiveState();
         this.notify('undo-redo', { prop: 'redo', onPropertyChange: false });
         this.notify('draw', { prop: 'redrawDownScale' });
     };
@@ -4881,6 +4881,13 @@ var ImageEditor = /** @class */ (function (_super) {
         }
         return isRedact;
     };
+    ImageEditor.prototype.handlePenActiveState = function () {
+        var freehandDrawObj = { freehandDrawSelectedId: null };
+        this.notify('freehand-draw', { prop: 'getFreehandDrawSelectedId', onPropertyChange: false, value: { obj: freehandDrawObj } });
+        if (isNullOrUndefined(freehandDrawObj['freehandDrawSelectedId'])) {
+            this.manageActiveAction();
+        }
+    };
     var ImageEditor_1;
     __decorate([
         Property('')

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

@@ -280,6 +280,9 @@ var ToolbarModule = /** @class */ (function () {
             case 'getToolbarHeight':
                 args.value['obj']['toolbarHeight'] = this.toolbarHeight;
                 break;
+            case 'getcurrentImageQuality':
+                args.value['obj']['currentImageQuality'] = this.currentQuality;
+                break;
             case 'setToolbarHeight':
                 if (isNullOrUndefined(parent.toolbar) || (parent.toolbar && parent.toolbar.length > 0 && parent.toolbar.indexOf('Open') > -1)) {
                     this.toolbarHeight = args.value['height'];

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

@@ -1,44 +0,0 @@
-import { ImageEditor } from '../index';
-export declare class Crop {
-    private parent;
-    private lowerContext;
-    private upperContext;
-    private prevCropCurrObj;
-    private croppedDegree;
-    private cropDestPoints;
-    private tempFlipPanPoint;
-    private isPreventScaling;
-    private isInitCrop;
-    private isTransformCrop;
-    constructor(parent: ImageEditor);
-    destroy(): void;
-    private addEventListener;
-    private removeEventListener;
-    private cropping;
-    getModuleName(): string;
-    private updateCropPvtVar;
-    private reset;
-    private cropImg;
-    private adjustStraightenForShapes;
-    private updateCropObj;
-    private rotateCrop;
-    private revertTransform;
-    private updateFlipState;
-    private resetZoom;
-    private flipCrop;
-    private cropObjColl;
-    private cropPointCollection;
-    private cropFreehandDrawColl;
-    private resetAnnotations;
-    private setCurrSelPoints;
-    private panToSelRangle;
-    private cropCircle;
-    private getCurrCropState;
-    private updateRotatePan;
-    private crop;
-    private cropEvent;
-    private updateUndoRedoColl;
-    private resizeWrapper;
-    private calcRatio;
-    private getCurrFlipState;
-}