@syncfusion/ej2-image-editor 25.1.35 → 25.1.38

package/dist/global/index.d.ts

@@ -1,6 +1,6 @@
 /*!
 *  filename: index.d.ts
-*  version : 25.1.35
+*  version : 25.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@23.1.39",
+  "_id": "@syncfusion/ej2-image-editor@25.1.37",
   "_inBundle": false,
-  "_integrity": "sha512-Bdm3mWoAozafsWzcwq/tVWXF5iazfTB4cNKx2CpLf8lgCwTIBF99Dhb44pQWnbmLi3n3iJQh1XO2cr19ZeAjEA==",
+  "_integrity": "sha512-k5viiMPSSZkFq+Ur5QJcKly3iE73p7Jew5PXHnHJR3B0lB6GBEev/A7TNwPF8+65AKjpK4NiMrdhliQptSyctg==",
   "_location": "/@syncfusion/ej2-image-editor",
   "_phantomChildren": {},
   "_requested": {
@@ -23,8 +23,8 @@
     "/@syncfusion/ej2-react-image-editor",
     "/@syncfusion/ej2-vue-image-editor"
   ],
-  "_resolved": "https://nexus.syncfusioninternal.com/repository/ej2-release/@syncfusion/ej2-image-editor/-/ej2-image-editor-23.1.39.tgz",
-  "_shasum": "5bb6d65f3282fb4af0523a82d81f9c0d54121e8f",
+  "_resolved": "https://nexus.syncfusioninternal.com/repository/ej2-hotfix-new/@syncfusion/ej2-image-editor/-/ej2-image-editor-25.1.37.tgz",
+  "_shasum": "25d63005eaf646b526c90f9b4edfb8213a0fe7eb",
   "_spec": "@syncfusion/ej2-image-editor@*",
   "_where": "/jenkins/workspace/elease-automation_release_25.1.1/packages/included",
   "author": {
@@ -34,10 +34,10 @@
   "dependencies": {
     "@syncfusion/ej2-base": "~25.1.35",
     "@syncfusion/ej2-buttons": "~25.1.35",
-    "@syncfusion/ej2-inputs": "~25.1.35",
-    "@syncfusion/ej2-navigations": "~25.1.35",
-    "@syncfusion/ej2-popups": "~25.1.35",
-    "@syncfusion/ej2-splitbuttons": "~25.1.35"
+    "@syncfusion/ej2-inputs": "~25.1.38",
+    "@syncfusion/ej2-navigations": "~25.1.38",
+    "@syncfusion/ej2-popups": "~25.1.38",
+    "@syncfusion/ej2-splitbuttons": "~25.1.38"
   },
   "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": "25.1.35",
+  "version": "25.1.38",
   "sideEffects": false,
   "homepage": "https://www.syncfusion.com/javascript-ui-controls"
 }

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

@@ -179,6 +179,9 @@ var FreehandDrawing = /** @class */ (function () {
             case 'reset':
                 this.reset();
                 break;
+            case 'triggerShapeChanging':
+                this.triggerShapeChanging(args.value['shapeChangingArgs']);
+                break;
         }
     };
     FreehandDrawing.prototype.updateFhdPvtVar = function () {

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

@@ -711,6 +711,8 @@ var Shape = /** @class */ (function () {
             endX: parent.activeObj.activePoint.startX + parent.activeObj.activePoint.width,
             endY: parent.activeObj.activePoint.startY + parent.activeObj.activePoint.height,
             width: selectionSettings.width, 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;
     };
     Shape.prototype.updateShapeChangeEventArgs = function (shapeSettings) {
         var parent = this.parent;
@@ -769,6 +771,7 @@ var Shape = /** @class */ (function () {
                     if (shapeSettings.degree) {
                         parent.activeObj.rotatedAngle = shapeSettings.degree * (Math.PI / 180);
                     }
+                    this.updateFontRatio(parent.activeObj);
                     break;
                 case 'rectangle':
                 case 'image':

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

@@ -78,7 +78,7 @@ var Transform = /** @class */ (function () {
                 this.resetZoom();
                 break;
             case 'pan':
-                this.pan(args.value['value']);
+                this.pan(args.value['value'], args.value['x'], args.value['y']);
                 break;
             case 'zoom':
                 this.zoom(args.value['zoomFactor'], args.value['zoomPoint']);
@@ -1091,12 +1091,12 @@ var Transform = /** @class */ (function () {
         parent.notify('selection', { prop: 'getPanDown', onPropertyChange: false, value: { obj: obj } });
         var panEventArgs = { startPoint: obj['panDown'], endPoint: this.panMove, cancel: false };
         parent.trigger('panning', panEventArgs);
-        this.panEvent(panEventArgs, xDiff, yDiff);
-    };
-    Transform.prototype.panEvent = function (panEventArgs, xDiff, yDiff) {
         if (panEventArgs.cancel) {
             return;
         }
+        this.panEvent(xDiff, yDiff);
+    };
+    Transform.prototype.panEvent = function (xDiff, yDiff, isPanMethod) {
         var parent = this.parent;
         var isObjCreated = false;
         if (parent.activeObj.shape && parent.activeObj.shape === 'shape') {
@@ -1134,8 +1134,13 @@ var Transform = /** @class */ (function () {
         }
         if (parent.transform.degree === 0) {
             var point = void 0;
-            if (isNullOrUndefined(xDiff) && isNullOrUndefined(yDiff)) {
-                point = this.updatePanPoints();
+            if ((isNullOrUndefined(xDiff) && isNullOrUndefined(yDiff)) || isPanMethod) {
+                if (isPanMethod) {
+                    point = this.updatePanPoints(xDiff, yDiff);
+                }
+                else {
+                    point = this.updatePanPoints();
+                }
             }
             else {
                 point = { x: xDiff, y: yDiff };
@@ -1156,8 +1161,13 @@ var Transform = /** @class */ (function () {
         else {
             var tempFlipState = parent.transform.currFlipState;
             parent.isCropTab = true;
-            if (isNullOrUndefined(xDiff) && isNullOrUndefined(yDiff)) {
-                parent.panPoint.currentPannedPoint = this.updatePanPoints();
+            if ((isNullOrUndefined(xDiff) && isNullOrUndefined(yDiff)) || isPanMethod) {
+                if (isPanMethod) {
+                    parent.panPoint.currentPannedPoint = this.updatePanPoints(xDiff, yDiff);
+                }
+                else {
+                    parent.panPoint.currentPannedPoint = this.updatePanPoints();
+                }
             }
             else {
                 parent.panPoint.currentPannedPoint = { x: xDiff, y: yDiff };
@@ -1444,7 +1454,7 @@ var Transform = /** @class */ (function () {
         parent.notify('draw', { prop: 'updateActiveObject', onPropertyChange: false, value: { actPoint: actPoint,
                 obj: parent.activeObj, isMouseMove: null, x: null, y: null } });
     };
-    Transform.prototype.pan = function (value) {
+    Transform.prototype.pan = function (value, x, y) {
         var parent = this.parent;
         if (!parent.disabled && parent.isImageLoaded) {
             if (value) {
@@ -1454,6 +1464,15 @@ var Transform = /** @class */ (function () {
                 parent.notify('selection', { prop: 'setDragCanvas', value: { bool: true } });
                 parent.lowerCanvas.style.cursor = parent.upperCanvas.style.cursor = parent.cursor = 'grab';
                 parent.notify('selection', { prop: 'setPanDown', onPropertyChange: false, value: { panDown: null } });
+                if (x || y) {
+                    x = x ? x : 0;
+                    y = y ? y : 0;
+                    if (isNullOrUndefined(this.tempPanMove)) {
+                        this.tempPanMove = { x: this.panMove.x, y: this.panMove.y };
+                    }
+                    this.panEvent(x, y, true);
+                    this.tempPanMove = null;
+                }
             }
             else {
                 parent.togglePan = parent.currObjType.isCustomCrop = false;
@@ -1586,8 +1605,9 @@ var Transform = /** @class */ (function () {
                 toolbarHeight = obj['toolbarHeight'];
             }
         }
-        if (Browser.isDevice && straightenObj['bool']) {
-            cxtTbarHeight = parent.element.querySelector('#' + parent.element.id + '_contextualToolbarArea').clientHeight;
+        var ctxTbarArea = parent.element.querySelector('#' + parent.element.id + '_contextualToolbarArea');
+        if (Browser.isDevice && straightenObj['bool'] && ctxTbarArea) {
+            cxtTbarHeight = ctxTbarArea.clientHeight;
         }
         parent.notify('toolbar', { prop: 'setToolbarHeight', value: { height: toolbarHeight } });
         if (Browser.isDevice) {
@@ -1767,6 +1787,9 @@ var Transform = /** @class */ (function () {
             var cxtTbar = parent.element.querySelector('#' + parent.element.id + '_contextualToolbarArea');
             canvasMaxHeight -= cxtTbar ? cxtTbar.clientHeight : 0;
         }
+        if (!isImgShape && parent.element.clientHeight === 0) {
+            canvasMaxHeight = 0;
+        }
         if (isNullOrUndefined(isImgShape)) {
             if (canvasMaxWidth > 30) {
                 canvasMaxWidth -= 30;
@@ -1803,7 +1826,7 @@ var Transform = /** @class */ (function () {
         }
         return { width: cssMaxWidth, height: cssMaxHeight };
     };
-    Transform.prototype.updatePanPoints = function () {
+    Transform.prototype.updatePanPoints = function (x, y) {
         var parent = this.parent;
         var tempActObj = extend({}, parent.activeObj, {}, true);
         var tempDestLeft = parent.img.destLeft;
@@ -1813,6 +1836,10 @@ var Transform = /** @class */ (function () {
         }
         var xDiff = this.panMove.x - this.tempPanMove.x;
         var yDiff = this.panMove.y - this.tempPanMove.y;
+        if (x || y) {
+            xDiff = x;
+            yDiff = y;
+        }
         parent.img.destLeft += xDiff;
         parent.img.destTop += yDiff;
         this.limitPan();

package/src/image-editor/action/undo-redo.d.ts

@@ -38,7 +38,6 @@ export declare class UndoRedo {
     private updateTextBox;
     private undoDefault;
     private endUndoRedo;
-    private getImageAction;
     private updateUrc;
     private updateUrObj;
     private updateUndoRedo;

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

@@ -753,32 +753,6 @@ var UndoRedo = /** @class */ (function () {
         parent.notify('filter', { prop: 'setAdjustmentValue', onPropertyChange: false, value: { adjustmentValue: this.lowerContext.filter } });
         parent.currObjType.isCustomCrop = false;
     };
-    UndoRedo.prototype.getImageAction = function (operation) {
-        if (['brightness', 'contrast', 'saturation', 'opacity', 'blur', 'hue'].indexOf(operation) !== -1) {
-            return 'FinetuneApplied';
-        }
-        else if (['chrome', 'cold', 'warm', 'grayscale', 'blackandwhite', 'sepia', 'invert'].indexOf(operation) !== -1) {
-            return 'FilterApplied';
-        }
-        else if (operation === 'frame') {
-            return 'FrameApplied';
-        }
-        else if (operation === 'resize') {
-            return 'ImageResized';
-        }
-        else if (['deleteFreehandDrawing', 'deleteObj'].indexOf(operation) !== -1) {
-            return 'ShapeDeleted';
-        }
-        else if (operation === 'crop') {
-            return 'Cropped';
-        }
-        else if (['shapeInsert', 'freehanddraw', 'freehand-draw'].indexOf(operation) !== -1) {
-            return 'ShapeInserted';
-        }
-        else {
-            return 'ShapeCustomized';
-        }
-    };
     UndoRedo.prototype.updateUrc = function (operation, previousObj, previousObjColl, previousPointColl, previousSelPointColl, previousCropObj, previousText, currentText, previousFilter, isCircleCrop) {
         var parent = this.parent;
         if (parent.isResize || this.isPreventing) {

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

@@ -282,14 +282,19 @@ export interface ImageEditorModel extends ComponentModel{
      * If the property is defined as empty collection, the toolbar will not be rendered.
      * The preconfigured toolbar commands are
      * - Crop: helps to crop an image as ellipse, square, various ratio aspects, custom selection with resize, drag and drop.
+     * - Straightening: helps to rotate an image by a specified angle.
      * - Annotate: help to insert a shape on image that supports rectangle, ellipse, line, arrow, path, text, image and freehand drawing with resize, drag and drop, and customize its appearance.
      * - Transform: helps to rotate and flip an image.
      * - Finetunes: helps to perform adjustments on an image.
      * - Filters: helps to perform predefined color filters.
+     * - Frame: helps to add decorative borders or frames around images.
+     * - Resize: helps to modify the dimensions of an image.
      * - ZoomIn: performs zoom-in an image.
      * - ZoomOut: performs zoom-out an image.
      * - Save: save the modified image.
      * - Open: open an image to perform editing.
+     * - Undo: helps to revert the last action.
+     * - Redo: helps to redo the last action.
      * - Reset: reset the modification and restore the original image.
      *
      * {% codeBlock src='image-editor/toolbar/index.md' %}{% endcodeBlock %}

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

@@ -428,14 +428,19 @@ export declare class ImageEditor extends Component<HTMLDivElement> implements IN
      * If the property is defined as empty collection, the toolbar will not be rendered.
      * The preconfigured toolbar commands are
      * - Crop: helps to crop an image as ellipse, square, various ratio aspects, custom selection with resize, drag and drop.
+     * - Straightening: helps to rotate an image by a specified angle.
      * - Annotate: help to insert a shape on image that supports rectangle, ellipse, line, arrow, path, text, image and freehand drawing with resize, drag and drop, and customize its appearance.
      * - Transform: helps to rotate and flip an image.
      * - Finetunes: helps to perform adjustments on an image.
      * - Filters: helps to perform predefined color filters.
+     * - Frame: helps to add decorative borders or frames around images.
+     * - Resize: helps to modify the dimensions of an image.
      * - ZoomIn: performs zoom-in an image.
      * - ZoomOut: performs zoom-out an image.
      * - Save: save the modified image.
      * - Open: open an image to perform editing.
+     * - Undo: helps to revert the last action.
+     * - Redo: helps to redo the last action.
      * - Reset: reset the modification and restore the original image.
      *
      * {% codeBlock src='image-editor/toolbar/index.md' %}{% endcodeBlock %}
@@ -1007,13 +1012,15 @@ export declare class ImageEditor extends Component<HTMLDivElement> implements IN
      * Enable or disable a panning on the Image Editor.
      *
      * @param {boolean} value - Specifies a value whether enable or disable panning.
+     * @param {number} x - Optional, Specifies a value to pan the image horizontally.
+     * @param {number} y - Optional, Specifies a value to pan the image vertically.
      *
      * @remarks
      * This option will take into effect once the image's visibility is hidden when zooming an image or selection has been performed.
      *
      * @returns {void}.
      */
-    pan(value: boolean): void;
+    pan(value: boolean, x?: number, y?: number): void;
     /**
      * Zoom in or out on a point in the image editor.
      *

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

@@ -539,7 +539,7 @@ var ImageEditor = /** @class */ (function (_super) {
     ImageEditor.prototype.createDropUploader = function () {
         var _this = this;
         var uploadObj = new Uploader({
-            dropArea: document.getElementsByClassName('e-canvas-wrapper')[0],
+            dropArea: this.element.getElementsByClassName('e-canvas-wrapper')[0],
             allowedExtensions: '.jpg, .jpeg, .png,.svg',
             multiple: false,
             selected: function (args) {
@@ -825,7 +825,8 @@ var ImageEditor = /** @class */ (function (_super) {
     ImageEditor.prototype.notifyResetForAllModules = function () {
         var modules = this.requiredModules();
         for (var i = 0; i < modules.length; i++) {
-            this.notify(modules[i].member, { prop: 'reset', onPropertyChange: false });
+            var module = modules[i].member;
+            this.notify(module === 'toolbar-module' ? 'toolbar' : module, { prop: 'reset', onPropertyChange: false });
         }
     };
     ImageEditor.prototype.allowShape = function (x, y) {
@@ -1129,14 +1130,16 @@ var ImageEditor = /** @class */ (function (_super) {
      * Enable or disable a panning on the Image Editor.
      *
      * @param {boolean} value - Specifies a value whether enable or disable panning.
+     * @param {number} x - Optional, Specifies a value to pan the image horizontally.
+     * @param {number} y - Optional, Specifies a value to pan the image vertically.
      *
      * @remarks
      * This option will take into effect once the image's visibility is hidden when zooming an image or selection has been performed.
      *
      * @returns {void}.
      */
-    ImageEditor.prototype.pan = function (value) {
-        this.notify('transform', { prop: 'pan', onPropertyChange: false, value: { value: value } });
+    ImageEditor.prototype.pan = function (value, x, y) {
+        this.notify('transform', { prop: 'pan', onPropertyChange: false, value: { value: value, x: x, y: y } });
     };
     /**
      * Zoom in or out on a point in the image editor.
@@ -1644,8 +1647,19 @@ var ImageEditor = /** @class */ (function (_super) {
             this.notify('shape', { prop: 'selectShape', onPropertyChange: false, value: { id: setting.id, obj: obj } });
             this.notify('selection', { prop: 'getFreehandDrawEditing', onPropertyChange: false, value: { obj: freehandObj } });
             if (obj['isSelected']) {
+                var tempFontSize = this.activeObj.textSettings.fontSize;
                 this.notify('shape', { prop: 'updateShapeChangeEventArgs', onPropertyChange: false,
                     value: { shapeSettings: setting } });
+                if (this.activeObj.shape === 'text' && tempFontSize) {
+                    var diff = this.activeObj.textSettings.fontSize - tempFontSize;
+                    if (diff !== 0) {
+                        this.activeObj.activePoint.height += diff;
+                        this.activeObj.activePoint.startY -= (diff / 2);
+                        this.activeObj.activePoint.endY += (diff / 2);
+                        this.notify('draw', { prop: 'updateActiveObject', onPropertyChange: false, value: { actPoint: this.activeObj.activePoint, obj: this.activeObj,
+                                isMouseMove: null, x: null, y: null } });
+                    }
+                }
                 var activeObj = extend({}, this.activeObj, {}, true);
                 this.notify('shape', { prop: 'refreshActiveObj', onPropertyChange: false });
                 this.notify('draw', { prop: 'render-image', value: { isMouseWheel: null, isPreventClearRect: null, isFrame: null } });

package/src/image-editor/renderer/toolbar.d.ts

@@ -56,6 +56,7 @@ export declare class ToolbarModule {
     private enableDisableTbrBtn;
     private createLeftToolbarControls;
     private fileSelect;
+    private triggerTbarClickEvent;
     private renderAnnotationBtn;
     private renderStraightenSlider;
     private renderCropBtn;