@syncfusion/ej2-image-editor 27.2.2 → 27.2.3

package/dist/global/index.d.ts

@@ -1,6 +1,6 @@
 /*!
 *  filename: index.d.ts
-*  version : 27.2.2
+*  version : 27.2.3
 *  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@27.1.57",
+  "_id": "@syncfusion/ej2-image-editor@27.2.2",
   "_inBundle": false,
-  "_integrity": "sha512-WzSJDFg8fD2CBvt7/D/aVhqIsDv1ZWa37++ruPZXM+zLM8CEFyq9QnkhUg5UZO7M69vGy5e17jDjaBmDqX2yEg==",
+  "_integrity": "sha512-svk4OZyCgp/xHFbkBu0fXYsrpn0ue9zyrLcIFVPjb4nSSPkLKav3Y/oHE/qc6Il3s185zodLCcBRjpLvvqMkLg==",
   "_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-hotfix-new/@syncfusion/ej2-image-editor/-/ej2-image-editor-27.1.57.tgz",
-  "_shasum": "7752944d8e6078004d132dfdeee981c1951d5fb4",
+  "_resolved": "https://nexus.syncfusioninternal.com/repository/ej2-hotfix-new/@syncfusion/ej2-image-editor/-/ej2-image-editor-27.2.2.tgz",
+  "_shasum": "79e043b05861d07d511811248332ec0b7e18ff41",
   "_spec": "@syncfusion/ej2-image-editor@*",
   "_where": "/jenkins/workspace/elease-automation_release_27.1.1/packages/included",
   "author": {
@@ -34,9 +34,9 @@
   "dependencies": {
     "@syncfusion/ej2-base": "~27.2.2",
     "@syncfusion/ej2-buttons": "~27.2.2",
-    "@syncfusion/ej2-dropdowns": "~27.2.2",
+    "@syncfusion/ej2-dropdowns": "~27.2.3",
     "@syncfusion/ej2-inputs": "~27.2.2",
-    "@syncfusion/ej2-navigations": "~27.2.2",
+    "@syncfusion/ej2-navigations": "~27.2.3",
     "@syncfusion/ej2-popups": "~27.2.2",
     "@syncfusion/ej2-splitbuttons": "~27.2.2"
   },
@@ -68,7 +68,7 @@
     "url": "https://github.com/syncfusion/ej2-javascript-ui-controls/tree/master/controls/imageeditor"
   },
   "typings": "index.d.ts",
-  "version": "27.2.2",
+  "version": "27.2.3",
   "sideEffects": false,
   "homepage": "https://www.syncfusion.com/javascript-ui-controls"
 }

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

@@ -52,6 +52,7 @@ export declare class Selection {
     private isMouseDown;
     private isMouseUp;
     private mouseWheel;
+    private isTransformedShape;
     constructor(parent: ImageEditor);
     destroy(): void;
     private addEventListener;
@@ -166,6 +167,7 @@ export declare class Selection {
     private deleteItem;
     private updateFreehandDrawColorChange;
     private updatePrevShapeSettings;
+    private updateTransColl;
     private getArrowType;
     private getRectanglePoints;
     private getTransRotationPoint;

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

@@ -42,6 +42,7 @@ var Selection = /** @class */ (function () {
         this.isMouseDown = false;
         this.isMouseUp = false;
         this.mouseWheel = 0;
+        this.isTransformedShape = false;
         this.parent = parent;
         this.addEventListener();
     }
@@ -322,6 +323,15 @@ var Selection = /** @class */ (function () {
             case 'redact':
                 this.currentDrawingShape = args.value['shape'];
                 break;
+            case 'updateTransColl':
+                args.value['obj']['coll'] = this.updateTransColl(args.value['object']);
+                break;
+            case 'getTransformedShape':
+                args.value['obj']['bool'] = this.isTransformedShape;
+                break;
+            case 'setTransformedShape':
+                this.isTransformedShape = args.value['bool'];
+                break;
         }
     };
     Selection.prototype.getModuleName = function () {
@@ -373,7 +383,7 @@ var Selection = /** @class */ (function () {
         this.mouseDown = '';
         this.isSliderActive = false;
         this.arrowShape = [ArrowheadType.None, ArrowheadType.SolidArrow];
-        this.isMouseDown = this.isMouseUp = false;
+        this.isMouseDown = this.isMouseUp = this.isTransformedShape = false;
     };
     Selection.prototype.performTabAction = function () {
         var parent = this.parent;
@@ -2993,6 +3003,16 @@ var Selection = /** @class */ (function () {
         else {
             degree = parent.transform.degree - parent.activeObj.shapeDegree;
         }
+        /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
+        var coll = parent.activeObj.rotateFlipColl;
+        if (this.isTransformedShape && coll) {
+            degree = 0;
+            for (var i = 0; i < coll.length; i++) {
+                if (typeof (coll[i]) === 'number') {
+                    degree += (coll[i]);
+                }
+            }
+        }
         if (degree < 0) {
             degree = 360 + degree;
         }
@@ -5404,8 +5424,8 @@ var Selection = /** @class */ (function () {
             id: !isNullOrUndefined(currIndex) ? currIndex : null,
             type: parent.toPascalCase(shape),
             startX: startX, startY: startY, width: width, height: height,
-            strokeColor: strokeSettings ? strokeSettings.strokeColor : null,
-            strokeWidth: strokeSettings ? strokeSettings.strokeWidth : null,
+            strokeColor: strokeSettings ? (shape === 'text' ? strokeSettings.outlineColor : strokeSettings.strokeColor) : null,
+            strokeWidth: strokeSettings ? (shape === 'text' ? strokeSettings.outlineWidth : strokeSettings.strokeWidth) : null,
             fillColor: strokeSettings ? strokeSettings.fillColor : null,
             radius: shape === 'ellipse' ? width / 2 : null,
             length: shape === 'line' || shape === 'arrow' ? width : null,
@@ -5424,13 +5444,34 @@ var Selection = /** @class */ (function () {
             arrowHead: shape === 'arrow' ? this.getArrowType(parent.activeObj.start) : null,
             arrowTail: shape === 'arrow' ? this.getArrowType(parent.activeObj.end) : null,
             points: shape === 'path' ? parent.activeObj.pointColl : null,
-            index: parent.activeObj.order
+            index: parent.activeObj.order,
+            transformCollection: shape === 'text' ? this.updateTransColl(parent.activeObj) : null
         };
         if (obj) {
             obj['shapeSettingsObj'] = shapeSettingsObj;
         }
         return shapeSettingsObj;
     };
+    Selection.prototype.updateTransColl = function (object) {
+        var parent = this.parent;
+        var coll;
+        /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
+        var tempColl = object.rotateFlipColl;
+        if (tempColl && tempColl.length > 0) {
+            var value = void 0;
+            coll = [];
+            for (var i = 0; i < tempColl.length; i++) {
+                value = tempColl[i];
+                if (typeof (value) === 'number') {
+                    coll.push({ degree: value });
+                }
+                else {
+                    coll.push({ flip: parent.toPascalCase(value) });
+                }
+            }
+        }
+        return coll;
+    };
     Selection.prototype.getArrowType = function (type) {
         var typeToArrowType = { 'none': 'None', 'arrow': 'Arrow', 'arrowSolid': 'SolidArrow',
             'circle': 'Circle', 'circleSolid': 'SolidCircle', 'square': 'Square', 'squareSolid': 'SolidSquare', 'bar': 'Bar' };

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

@@ -34,6 +34,7 @@ export declare class Shape {
     private setPointCollForLineAndArrow;
     private prevObjColl;
     private drawShapeText;
+    private setTransformColl;
     private drawShapeImageEvent;
     private drawShapeTextEvent;
     private initializeTextShape;

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

@@ -46,7 +46,7 @@ var Shape = /** @class */ (function () {
                 this.drawRectangle(args.value['x'], args.value['y'], args.value['width'], args.value['height'], args.value['strokeWidth'], args.value['strokeColor'], args.value['fillColor'], args.value['degree'], args.value['isSelected'], args.value['radius']);
                 break;
             case 'drawText':
-                this.drawText(args.value['x'], args.value['y'], args.value['text'], args.value['fontFamily'], args.value['fontSize'], args.value['bold'], args.value['italic'], args.value['color'], args.value['isSelected'], args.value['degree'], args.value['fillColor'], args.value['outlineColor'], args.value['outlineWidth']);
+                this.drawText(args.value['x'], args.value['y'], args.value['text'], args.value['fontFamily'], args.value['fontSize'], args.value['bold'], args.value['italic'], args.value['color'], args.value['isSelected'], args.value['degree'], args.value['fillColor'], args.value['outlineColor'], args.value['outlineWidth'], args.value['transformCollection']);
                 break;
             case 'redrawActObj':
                 this.redrawActObj(args.value['x'], args.value['y'], args.value['isMouseDown']);
@@ -345,8 +345,8 @@ var Shape = /** @class */ (function () {
         var start = x && y ? { x: x, y: y } : null;
         this.drawShape('redact', null, null, null, start, width, height, null, null, null, null, null, null, null, type, value);
     };
-    Shape.prototype.drawText = function (x, y, text, fontFamily, fontSize, bold, italic, color, isSelected, degree, fillColor, outlineColor, outlineWidth) {
-        this.drawShapeText(text, fontFamily, fontSize, bold, italic, color, x, y, isSelected, degree, fillColor, outlineColor, outlineWidth);
+    Shape.prototype.drawText = function (x, y, text, fontFamily, fontSize, bold, italic, color, isSelected, degree, fillColor, outlineColor, outlineWidth, transformCollection) {
+        this.drawShapeText(text, fontFamily, fontSize, bold, italic, color, x, y, isSelected, degree, fillColor, outlineColor, outlineWidth, transformCollection);
     };
     Shape.prototype.initializeShape = function (type) {
         var parent = this.parent;
@@ -532,7 +532,7 @@ var Shape = /** @class */ (function () {
             value: { obj: selPointCollObj } });
         this.prevObj.selPointColl = extend([], selPointCollObj['selPointColl'], [], true);
     };
-    Shape.prototype.drawShapeText = function (text, fontFamily, fontSize, bold, italic, strokeColor, x, y, isSelected, degree, fillColor, outlineColor, outlineWidth) {
+    Shape.prototype.drawShapeText = function (text, fontFamily, fontSize, bold, italic, strokeColor, x, y, isSelected, degree, fillColor, outlineColor, outlineWidth, transformCollection) {
         var parent = this.parent;
         if (!parent.disabled && parent.isImageLoaded) {
             if (parent.currObjType.shape === 'freehanddraw') {
@@ -567,6 +567,17 @@ var Shape = /** @class */ (function () {
             var width = this.upperContext.measureText(parent.activeObj.textSettings.text).width +
                 parent.activeObj.textSettings.fontSize * 0.5;
             var height = parent.activeObj.textSettings.fontSize;
+            if (text) {
+                parent.activeObj.keyHistory = text;
+                var maxText = this.getMaxText();
+                maxText = maxText ? maxText : parent.activeObj.textSettings.text;
+                width = this.upperContext.measureText(maxText).width + parent.activeObj.textSettings.fontSize * 0.5;
+                var rows = text.split('\n');
+                if (rows.length > 1) {
+                    height = rows.length * parent.activeObj.textSettings.fontSize;
+                    height += (fontSize * 0.25);
+                }
+            }
             if (!isNullOrUndefined(x) && !isNullOrUndefined(y)) {
                 parent.activeObj.activePoint.startX = x;
                 parent.activeObj.activePoint.startY = y;
@@ -576,6 +587,27 @@ var Shape = /** @class */ (function () {
             else {
                 this.setCenterPoints(true, width, height);
             }
+            if (transformCollection) {
+                parent.notify('selection', { prop: 'setTransformedShape', onPropertyChange: false, value: { bool: true } });
+                this.setTransformColl(transformCollection);
+                var actObj = parent.activeObj;
+                actObj.shapeDegree = 0;
+                actObj.shapeFlip = '';
+                var tempDegree = 0;
+                // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                var coll = actObj.rotateFlipColl;
+                for (var i = 0; i < coll.length; i++) {
+                    if (typeof (coll[i]) === 'number') {
+                        tempDegree += coll[i];
+                    }
+                }
+                if (tempDegree % 90 === 0 && Math.abs(tempDegree) % 180 === 90) {
+                    actObj.activePoint.endX = actObj.activePoint.startX + height;
+                    actObj.activePoint.endY = actObj.activePoint.startY + width;
+                    actObj.activePoint.width = actObj.activePoint.endX - actObj.activePoint.startX;
+                    actObj.activePoint.height = actObj.activePoint.endY - actObj.activePoint.startY;
+                }
+            }
             var obj = { shapeSettingsObj: {} };
             parent.notify('selection', { prop: 'updatePrevShapeSettings', onPropertyChange: false, value: { obj: obj } });
             var shapeSettings = obj['shapeSettingsObj'];
@@ -609,6 +641,20 @@ var Shape = /** @class */ (function () {
             parent.isPublicMethod = false;
         }
     };
+    Shape.prototype.setTransformColl = function (transformCollection) {
+        var parent = this.parent;
+        parent.activeObj.rotateFlipColl = [];
+        if (transformCollection) {
+            for (var i = 0; i < transformCollection.length; i++) {
+                if (transformCollection[i].degree) {
+                    parent.activeObj.rotateFlipColl.push(transformCollection[i].degree);
+                }
+                else {
+                    parent.activeObj.rotateFlipColl.push(transformCollection[i].flip.toLowerCase());
+                }
+            }
+        }
+    };
     Shape.prototype.drawShapeImageEvent = function (shapeChangingArgs, isSelect) {
         var parent = this.parent;
         this.updateShapeChangeEventArgs(shapeChangingArgs.currentShapeSettings, shapeChangingArgs.allowShapeOverflow);
@@ -801,9 +847,11 @@ var Shape = /** @class */ (function () {
                 parent.activeObj.activePoint.endX = parent.activeObj.activePoint.startX + parent.activeObj.activePoint.width;
                 parent.activeObj.activePoint.endY = parent.activeObj.activePoint.startY + parent.activeObj.activePoint.height;
             }
-            parent.activeObj.strokeSettings.strokeColor = shapeSettings.strokeColor;
+            if (parent.activeObj.shape !== 'text') {
+                parent.activeObj.strokeSettings.strokeColor = shapeSettings.strokeColor;
+                parent.activeObj.strokeSettings.strokeWidth = shapeSettings.strokeWidth;
+            }
             parent.activeObj.strokeSettings.fillColor = shapeSettings.fillColor;
-            parent.activeObj.strokeSettings.strokeWidth = shapeSettings.strokeWidth;
             parent.activeObj.opacity = shapeSettings.opacity;
             parent.activeObj.order = shapeSettings.index;
             parent.activeObj.preventShapeDragOut = !allowShapeOverflow;
@@ -836,7 +884,11 @@ var Shape = /** @class */ (function () {
                     parent.activeObj.keyHistory = parent.activeObj.textSettings.text = shapeSettings.text;
                     parent.activeObj.textSettings.fontSize = shapeSettings.fontSize;
                     parent.activeObj.strokeSettings.strokeColor = shapeSettings.color;
+                    parent.activeObj.strokeSettings.outlineColor = shapeSettings.strokeColor;
+                    parent.activeObj.strokeSettings.outlineWidth = shapeSettings.strokeWidth;
+                    parent.activeObj.strokeSettings.fillColor = shapeSettings.fillColor;
                     parent.activeObj.textSettings.fontFamily = shapeSettings.fontFamily;
+                    this.setTransformColl(shapeSettings.transformCollection);
                     if (shapeSettings.degree) {
                         parent.activeObj.rotatedAngle = shapeSettings.degree * (Math.PI / 180);
                     }
@@ -1611,7 +1663,8 @@ var Shape = /** @class */ (function () {
             obj.shapeFlip = parent.transform.currFlipState;
         }
     };
-    Shape.prototype.getRotDegOfShape = function (obj) {
+    Shape.prototype.getRotDegOfShape = function (obj, value) {
+        var parent = this.parent;
         var degree;
         if (obj.shapeDegree === 0) {
             degree = this.parent.transform.degree;
@@ -1622,6 +1675,16 @@ var Shape = /** @class */ (function () {
         if (degree < 0) {
             degree = 360 + degree;
         }
+        var transformObj = { bool: false };
+        parent.notify('selection', { prop: 'getTransformedShape', onPropertyChange: false, value: { obj: transformObj } });
+        if (transformObj['bool'] && !value && parent.activeObj.rotateFlipColl) {
+            degree = 0;
+            for (var i = 0; i < parent.activeObj.rotateFlipColl.length; i++) {
+                if (typeof (parent.activeObj.rotateFlipColl[i]) === 'number') {
+                    degree += (parent.activeObj.rotateFlipColl[i]);
+                }
+            }
+        }
         return degree;
     };
     Shape.prototype.renderTextArea = function (x, y, actObj) {
@@ -2688,11 +2751,18 @@ var Shape = /** @class */ (function () {
             }
         }
         else if (isTextArea) {
-            obj.textSettings.fontRatio = width / parseFloat(parent.textArea.style.fontSize);
+            var transformObj = { bool: false };
+            parent.notify('selection', { prop: 'getTransformedShape', onPropertyChange: false, value: { obj: transformObj } });
+            if (!transformObj['bool'] || degree === 0 || Math.abs(degree) === 180) {
+                obj.textSettings.fontRatio = width / parseFloat(parent.textArea.style.fontSize);
+            }
+            else {
+                obj.textSettings.fontRatio = height / parseFloat(parent.textArea.style.fontSize);
+            }
         }
     };
     Shape.prototype.updateFontSize = function (obj) {
-        var degree = this.getRotDegOfShape(obj);
+        var degree = this.getRotDegOfShape(obj, true);
         if (degree === 0 || Math.abs(degree) === 180) {
             obj.textSettings.fontSize = (obj.activePoint.width / obj.textSettings.fontRatio);
         }
@@ -2996,6 +3066,7 @@ var Shape = /** @class */ (function () {
         shapeDetails.startX = obj.activePoint.startX;
         shapeDetails.startY = obj.activePoint.startY;
         shapeDetails.index = obj.order;
+        var transformObj = { coll: null };
         switch (obj.shape) {
             case 'rectangle':
                 shapeDetails.width = obj.activePoint.width;
@@ -3034,6 +3105,9 @@ var Shape = /** @class */ (function () {
                 shapeDetails.fontSize = obj.textSettings.fontSize;
                 shapeDetails.fontFamily = obj.textSettings.fontFamily;
                 shapeDetails.color = obj.strokeSettings.strokeColor;
+                shapeDetails.strokeColor = obj.strokeSettings.outlineColor;
+                shapeDetails.fillColor = obj.strokeSettings.fillColor;
+                shapeDetails.strokeWidth = obj.strokeSettings.outlineWidth;
                 shapeDetails.fontStyle = [];
                 if (obj.textSettings.bold) {
                     shapeDetails.fontStyle.push('bold');
@@ -3042,6 +3116,8 @@ var Shape = /** @class */ (function () {
                     shapeDetails.fontStyle.push('italic');
                 }
                 shapeDetails.degree = obj.rotatedAngle * (180 / Math.PI);
+                parent.notify('selection', { prop: 'updateTransColl', onPropertyChange: false, value: { obj: transformObj, object: obj } });
+                shapeDetails.transformCollection = transformObj['coll'];
                 break;
             case 'path':
                 shapeDetails.strokeColor = obj.strokeSettings.strokeColor;
@@ -3343,6 +3419,9 @@ var Shape = /** @class */ (function () {
     Shape.prototype.getMaxText = function (isTextBox, text, obj) {
         if (isNullOrUndefined(text)) {
             text = isTextBox ? this.parent.textArea.value : this.parent.activeObj.keyHistory;
+            if (!text) {
+                return text;
+            }
         }
         var maxi;
         var rows = text.split('\n');

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

@@ -1,4 +1,4 @@
-import { Component, NotifyPropertyChanges, INotifyPropertyChanged, Property, addClass, removeClass, ModuleDeclaration, extend } from '@syncfusion/ej2-base';
+import { Component, NotifyPropertyChanges, INotifyPropertyChanged, Property, addClass, removeClass, ModuleDeclaration, extend } from '@syncfusion/ej2-base';
 import {ComponentModel} from '@syncfusion/ej2-base';
 
 /**

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

@@ -3,7 +3,7 @@ import { EmitType } from '@syncfusion/ej2-base';
 import { ItemModel, ClickEventArgs } from '@syncfusion/ej2-navigations';
 import { ChildProperty } from '@syncfusion/ej2-base';
 import { ImageEditorModel, FinetuneSettingsModel, ZoomSettingsModel, SelectionSettingsModel, FontFamilyModel } from './image-editor-model';
-import { SelectionChangeEventArgs, Transition, ArrowheadType, ResizeEventArgs, FrameType, FrameLineStyle, FrameChangeEventArgs, ShapeType, ImageSettings, RedactType } from './../index';
+import { SelectionChangeEventArgs, Transition, ArrowheadType, ResizeEventArgs, FrameType, FrameLineStyle, FrameChangeEventArgs, ShapeType, ImageSettings, RedactType, TransformationCollection } from './../index';
 import { ZoomEventArgs, PanEventArgs, CropEventArgs, RotateEventArgs, FlipEventArgs, ShapeChangeEventArgs } from './../index';
 import { ToolbarEventArgs, OpenEventArgs, SaveEventArgs, BeforeSaveEventArgs, Point, ShapeSettings, ImageFilterEventArgs, RedactSettings } from './../index';
 import { FinetuneEventArgs, QuickAccessToolbarEventArgs, CurrentObject, ImageDimension, TransformValue, PanPoint } from './../index';
@@ -1180,10 +1180,11 @@ export declare class ImageEditor extends Component<HTMLDivElement> implements IN
      * @param {fillColor} fillColor - Specifies the background Color of the text.
      * @param {string} strokeColor - Specifies the outline color of the text annotation.
      * @param {number} strokeWidth - Specifies the outline stroke width of the text annotation.
+     * @param {TransformationCollection[]} transformCollection - Specifies the transform collection of the text annotation.
      * @returns {boolean}.
      *
      */
-    drawText(x?: number, y?: number, text?: string, fontFamily?: string, fontSize?: number, bold?: boolean, italic?: boolean, color?: string, isSelected?: boolean, degree?: number, fillColor?: string, strokeColor?: string, strokeWidth?: number): boolean;
+    drawText(x?: number, y?: number, text?: string, fontFamily?: string, fontSize?: number, bold?: boolean, italic?: boolean, color?: string, isSelected?: boolean, degree?: number, fillColor?: string, strokeColor?: string, strokeWidth?: number, transformCollection?: TransformationCollection[]): boolean;
     /**
      * Draw an image as annotation on an image.
      *

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

@@ -1432,17 +1432,18 @@ var ImageEditor = /** @class */ (function (_super) {
      * @param {fillColor} fillColor - Specifies the background Color of the text.
      * @param {string} strokeColor - Specifies the outline color of the text annotation.
      * @param {number} strokeWidth - Specifies the outline stroke width of the text annotation.
+     * @param {TransformationCollection[]} transformCollection - Specifies the transform collection of the text annotation.
      * @returns {boolean}.
      *
      */
-    ImageEditor.prototype.drawText = function (x, y, text, fontFamily, fontSize, bold, italic, color, isSelected, degree, fillColor, strokeColor, strokeWidth) {
+    ImageEditor.prototype.drawText = function (x, y, text, fontFamily, fontSize, bold, italic, color, isSelected, degree, fillColor, strokeColor, strokeWidth, transformCollection) {
         var isText = false;
         var isPointsInRange = this.allowShape(x, y);
         if (!this.disabled && this.isImageLoaded && (isPointsInRange || (isNullOrUndefined(x) && isNullOrUndefined(y)))) {
             isText = true;
             this.notify('shape', { prop: 'drawText', onPropertyChange: false, value: { x: x, y: y, text: text, fontFamily: fontFamily,
                     fontSize: fontSize, bold: bold, italic: italic, color: color, isSelected: isSelected, degree: degree, fillColor: fillColor,
-                    outlineColor: strokeColor, outlineWidth: strokeWidth } });
+                    outlineColor: strokeColor, outlineWidth: strokeWidth, transformCollection: transformCollection } });
             this.editCompleted();
         }
         return isText;

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

@@ -1,4 +1,4 @@
-import { FileType, ShapeType, ImageFinetuneOption, ImageFilterOption, FrameType, FrameLineStyle, ArrowheadType, RedactType } from '../index';
+import { FileType, ShapeType, ImageFinetuneOption, ImageFilterOption, FrameType, FrameLineStyle, ArrowheadType, RedactType, Direction } from '../index';
 import { ItemModel } from '@syncfusion/ej2-navigations';
 /**
  * This interface is used to specify settings for image finetuning operations, including minimum and maximum values, as well as default values.
@@ -460,6 +460,10 @@ export interface ShapeSettings {
      * Returns the border radius of the rectangle annotation.
      */
     borderRadius?: number;
+    /**
+     * Returns the transform collection of the annotations.
+     */
+    transformCollection?: TransformationCollection[];
 }
 /**
  * The interface which contains the properties for filter option for the image.
@@ -709,6 +713,19 @@ export interface ImageSettings {
      */
     backgroundColor: string;
 }
+/**
+ * The Interface which contains the tranformation collection of annotation in Image Editor.
+ */
+export interface TransformationCollection {
+    /**
+     * Returns the transformed degree of annotation.
+     */
+    degree?: number;
+    /**
+     * Returns the transformed flip state of annotation.
+     */
+    flip?: Direction;
+}
 /**
  * Interface for active object in the imageEditor.
  *

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

@@ -3376,6 +3376,13 @@ var ToolbarModule = /** @class */ (function () {
             parent.notify('draw', { prop: 'drawObject', onPropertyChange: false, value: { canvas: 'duplicate', obj: activeObj,
                     isCropRatio: null, points: null, isPreventDrag: true } });
         }
+        var panMoveObj = { panMove: null };
+        parent.notify('transform', { prop: 'getPanMove', onPropertyChange: false,
+            value: { obj: panMoveObj } });
+        if (panMoveObj['panMove']) {
+            parent.notify('transform', { prop: 'drawPannedImage', onPropertyChange: false,
+                value: { xDiff: null, yDiff: null } });
+        }
     };
     ToolbarModule.prototype.updateKBDNavigation = function (type) {
         var parent = this.parent;
@@ -6232,6 +6239,17 @@ var ToolbarModule = /** @class */ (function () {
                             fontSizeElem.textContent = (i + 1).toString();
                             break;
                         }
+                        else {
+                            if (Math.round(parent.activeObj.textSettings.fontSize) < parseInt(parent.fontSizeColl[0].text, 10)) {
+                                fontSizeElem.textContent = '1';
+                                break;
+                            }
+                            else if (Math.round(parent.activeObj.textSettings.fontSize) >
+                                parseInt(parent.fontSizeColl[parent.fontSizeColl.length - 1].text, 10)) {
+                                fontSizeElem.textContent = ((parent.fontSizeColl.length - 1) + 1).toString();
+                                break;
+                            }
+                        }
                     }
                 }
                 if (boldBtn) {