@syncfusion/ej2-image-editor 27.1.58 → 27.2.3

package/dist/es6/ej2-image-editor.es5.js

@@ -8865,6 +8865,7 @@ var Selection = /** @__PURE__ @class */ (function () {
         this.isMouseDown = false;
         this.isMouseUp = false;
         this.mouseWheel = 0;
+        this.isTransformedShape = false;
         this.parent = parent;
         this.addEventListener();
     }
@@ -9145,6 +9146,15 @@ var Selection = /** @__PURE__ @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 () {
@@ -9196,7 +9206,7 @@ var Selection = /** @__PURE__ @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;
@@ -11816,6 +11826,16 @@ var Selection = /** @__PURE__ @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;
         }
@@ -14227,8 +14247,8 @@ var Selection = /** @__PURE__ @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,
@@ -14247,13 +14267,34 @@ var Selection = /** @__PURE__ @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' };
@@ -14430,7 +14471,7 @@ var Shape = /** @__PURE__ @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']);
@@ -14729,8 +14770,8 @@ var Shape = /** @__PURE__ @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;
@@ -14916,7 +14957,7 @@ var Shape = /** @__PURE__ @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') {
@@ -14951,6 +14992,17 @@ var Shape = /** @__PURE__ @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;
@@ -14960,6 +15012,27 @@ var Shape = /** @__PURE__ @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'];
@@ -14993,6 +15066,20 @@ var Shape = /** @__PURE__ @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);
@@ -15185,9 +15272,11 @@ var Shape = /** @__PURE__ @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;
@@ -15220,7 +15309,11 @@ var Shape = /** @__PURE__ @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);
                     }
@@ -15995,7 +16088,8 @@ var Shape = /** @__PURE__ @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;
@@ -16006,6 +16100,16 @@ var Shape = /** @__PURE__ @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) {
@@ -17072,11 +17176,18 @@ var Shape = /** @__PURE__ @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);
         }
@@ -17380,6 +17491,7 @@ var Shape = /** @__PURE__ @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;
@@ -17418,6 +17530,9 @@ var Shape = /** @__PURE__ @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');
@@ -17426,6 +17541,8 @@ var Shape = /** @__PURE__ @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;
@@ -17727,6 +17844,9 @@ var Shape = /** @__PURE__ @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');
@@ -23094,17 +23214,18 @@ var ImageEditor = /** @__PURE__ @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;
@@ -29813,6 +29934,13 @@ var ToolbarModule = /** @__PURE__ @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;
@@ -32669,6 +32797,17 @@ var ToolbarModule = /** @__PURE__ @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) {