@syncfusion/ej2-image-editor 27.2.2 → 27.2.3

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

@@ -8805,6 +8805,7 @@ class Selection {
         this.isMouseDown = false;
         this.isMouseUp = false;
         this.mouseWheel = 0;
+        this.isTransformedShape = false;
         this.parent = parent;
         this.addEventListener();
     }
@@ -9085,6 +9086,15 @@ class Selection {
             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;
         }
     }
     getModuleName() {
@@ -9136,7 +9146,7 @@ class Selection {
         this.mouseDown = '';
         this.isSliderActive = false;
         this.arrowShape = [ArrowheadType.None, ArrowheadType.SolidArrow];
-        this.isMouseDown = this.isMouseUp = false;
+        this.isMouseDown = this.isMouseUp = this.isTransformedShape = false;
     }
     performTabAction() {
         const parent = this.parent;
@@ -11754,6 +11764,16 @@ class Selection {
         else {
             degree = parent.transform.degree - parent.activeObj.shapeDegree;
         }
+        /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
+        const coll = parent.activeObj.rotateFlipColl;
+        if (this.isTransformedShape && coll) {
+            degree = 0;
+            for (let i = 0; i < coll.length; i++) {
+                if (typeof (coll[i]) === 'number') {
+                    degree += (coll[i]);
+                }
+            }
+        }
         if (degree < 0) {
             degree = 360 + degree;
         }
@@ -14165,8 +14185,8 @@ class Selection {
             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,
@@ -14185,13 +14205,34 @@ class Selection {
             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;
     }
+    updateTransColl(object) {
+        const parent = this.parent;
+        let coll;
+        /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
+        const tempColl = object.rotateFlipColl;
+        if (tempColl && tempColl.length > 0) {
+            let value;
+            coll = [];
+            for (let 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;
+    }
     getArrowType(type) {
         const typeToArrowType = { 'none': 'None', 'arrow': 'Arrow', 'arrowSolid': 'SolidArrow',
             'circle': 'Circle', 'circleSolid': 'SolidCircle', 'square': 'Square', 'squareSolid': 'SolidSquare', 'bar': 'Bar' };
@@ -14367,7 +14408,7 @@ class Shape {
                 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']);
@@ -14666,8 +14707,8 @@ class Shape {
         const 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);
     }
-    drawText(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);
+    drawText(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);
     }
     initializeShape(type) {
         const parent = this.parent;
@@ -14853,7 +14894,7 @@ class Shape {
             value: { obj: selPointCollObj } });
         this.prevObj.selPointColl = extend([], selPointCollObj['selPointColl'], [], true);
     }
-    drawShapeText(text, fontFamily, fontSize, bold, italic, strokeColor, x, y, isSelected, degree, fillColor, outlineColor, outlineWidth) {
+    drawShapeText(text, fontFamily, fontSize, bold, italic, strokeColor, x, y, isSelected, degree, fillColor, outlineColor, outlineWidth, transformCollection) {
         const parent = this.parent;
         if (!parent.disabled && parent.isImageLoaded) {
             if (parent.currObjType.shape === 'freehanddraw') {
@@ -14885,9 +14926,20 @@ class Shape {
             parent.activeObj.flipObjColl = [];
             this.updateFontStyles();
             parent.activeObj.order = this.getNewOrder();
-            const width = this.upperContext.measureText(parent.activeObj.textSettings.text).width +
+            let width = this.upperContext.measureText(parent.activeObj.textSettings.text).width +
                 parent.activeObj.textSettings.fontSize * 0.5;
-            const height = parent.activeObj.textSettings.fontSize;
+            let height = parent.activeObj.textSettings.fontSize;
+            if (text) {
+                parent.activeObj.keyHistory = text;
+                let maxText = this.getMaxText();
+                maxText = maxText ? maxText : parent.activeObj.textSettings.text;
+                width = this.upperContext.measureText(maxText).width + parent.activeObj.textSettings.fontSize * 0.5;
+                const 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;
@@ -14897,6 +14949,27 @@ class Shape {
             else {
                 this.setCenterPoints(true, width, height);
             }
+            if (transformCollection) {
+                parent.notify('selection', { prop: 'setTransformedShape', onPropertyChange: false, value: { bool: true } });
+                this.setTransformColl(transformCollection);
+                const actObj = parent.activeObj;
+                actObj.shapeDegree = 0;
+                actObj.shapeFlip = '';
+                let tempDegree = 0;
+                // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                const coll = actObj.rotateFlipColl;
+                for (let 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;
+                }
+            }
             const obj = { shapeSettingsObj: {} };
             parent.notify('selection', { prop: 'updatePrevShapeSettings', onPropertyChange: false, value: { obj: obj } });
             const shapeSettings = obj['shapeSettingsObj'];
@@ -14930,6 +15003,20 @@ class Shape {
             parent.isPublicMethod = false;
         }
     }
+    setTransformColl(transformCollection) {
+        const parent = this.parent;
+        parent.activeObj.rotateFlipColl = [];
+        if (transformCollection) {
+            for (let 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());
+                }
+            }
+        }
+    }
     drawShapeImageEvent(shapeChangingArgs, isSelect) {
         const parent = this.parent;
         this.updateShapeChangeEventArgs(shapeChangingArgs.currentShapeSettings, shapeChangingArgs.allowShapeOverflow);
@@ -15122,9 +15209,11 @@ class Shape {
                 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;
@@ -15157,7 +15246,11 @@ class Shape {
                     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);
                     }
@@ -15932,7 +16025,8 @@ class Shape {
             obj.shapeFlip = parent.transform.currFlipState;
         }
     }
-    getRotDegOfShape(obj) {
+    getRotDegOfShape(obj, value) {
+        const parent = this.parent;
         let degree;
         if (obj.shapeDegree === 0) {
             degree = this.parent.transform.degree;
@@ -15943,6 +16037,16 @@ class Shape {
         if (degree < 0) {
             degree = 360 + degree;
         }
+        const transformObj = { bool: false };
+        parent.notify('selection', { prop: 'getTransformedShape', onPropertyChange: false, value: { obj: transformObj } });
+        if (transformObj['bool'] && !value && parent.activeObj.rotateFlipColl) {
+            degree = 0;
+            for (let i = 0; i < parent.activeObj.rotateFlipColl.length; i++) {
+                if (typeof (parent.activeObj.rotateFlipColl[i]) === 'number') {
+                    degree += (parent.activeObj.rotateFlipColl[i]);
+                }
+            }
+        }
         return degree;
     }
     renderTextArea(x, y, actObj) {
@@ -17007,11 +17111,18 @@ class Shape {
             }
         }
         else if (isTextArea) {
-            obj.textSettings.fontRatio = width / parseFloat(parent.textArea.style.fontSize);
+            const 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);
+            }
         }
     }
     updateFontSize(obj) {
-        const degree = this.getRotDegOfShape(obj);
+        const degree = this.getRotDegOfShape(obj, true);
         if (degree === 0 || Math.abs(degree) === 180) {
             obj.textSettings.fontSize = (obj.activePoint.width / obj.textSettings.fontRatio);
         }
@@ -17315,6 +17426,7 @@ class Shape {
         shapeDetails.startX = obj.activePoint.startX;
         shapeDetails.startY = obj.activePoint.startY;
         shapeDetails.index = obj.order;
+        const transformObj = { coll: null };
         switch (obj.shape) {
             case 'rectangle':
                 shapeDetails.width = obj.activePoint.width;
@@ -17353,6 +17465,9 @@ class Shape {
                 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');
@@ -17361,6 +17476,8 @@ class Shape {
                     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;
@@ -17662,6 +17779,9 @@ class Shape {
     getMaxText(isTextBox, text, obj) {
         if (isNullOrUndefined(text)) {
             text = isTextBox ? this.parent.textArea.value : this.parent.activeObj.keyHistory;
+            if (!text) {
+                return text;
+            }
         }
         let maxi;
         const rows = text.split('\n');
@@ -22988,17 +23108,18 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends Component {
      * @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, y, text, fontFamily, fontSize, bold, italic, color, isSelected, degree, fillColor, strokeColor, strokeWidth) {
+    drawText(x, y, text, fontFamily, fontSize, bold, italic, color, isSelected, degree, fillColor, strokeColor, strokeWidth, transformCollection) {
         let isText = false;
         const 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;
@@ -29681,6 +29802,13 @@ class ToolbarModule {
             parent.notify('draw', { prop: 'drawObject', onPropertyChange: false, value: { canvas: 'duplicate', obj: activeObj,
                     isCropRatio: null, points: null, isPreventDrag: true } });
         }
+        const 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 } });
+        }
     }
     updateKBDNavigation(type) {
         const parent = this.parent;
@@ -32522,6 +32650,17 @@ class ToolbarModule {
                             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) {