@syncfusion/ej2-image-editor 29.2.4 → 30.1.37

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

@@ -852,40 +852,40 @@ var Transform = /** @class */ (function () {
             destWidth: parent.img.destWidth, destHeight: parent.img.destHeight };
         if (parent.activeObj.shape) {
             var maxDimension = this.setZoomDimension(-0.1, parent.activeObj);
-            if (!isNullOrUndefined(zoomOut)) {
-                var actPoint = parent.activeObj.activePoint;
-                if (parent.transform.straighten === 0) {
-                    if (parent.img.destLeft > actPoint.startX || parent.img.destTop >
-                        actPoint.startY || parent.img.destLeft + parent.img.destWidth <
-                        actPoint.endX || parent.img.destTop + parent.img.destHeight < actPoint.endY
-                        || zoomFactor === minZoomFactor) {
-                        zoomOut.classList.add('e-disabled');
-                        zoomOut.parentElement.classList.add('e-overlay');
-                        isDisabled = true;
-                    }
-                    else {
-                        zoomOut.classList.remove('e-disabled');
-                        zoomOut.parentElement.classList.remove('e-overlay');
-                        isDisabled = false;
-                    }
+            var actPoint = parent.activeObj.activePoint;
+            if (parent.transform.straighten === 0) {
+                if (parent.img.destLeft > actPoint.startX || parent.img.destTop >
+                    actPoint.startY || parent.img.destLeft + parent.img.destWidth <
+                    actPoint.endX || parent.img.destTop + parent.img.destHeight < actPoint.endY
+                    || zoomFactor === minZoomFactor) {
+                    isDisabled = true;
                 }
                 else {
-                    parent.img.destWidth = maxDimension.width;
-                    parent.img.destHeight = maxDimension.height;
-                    var obj = { isIntersect: null };
-                    parent.notify('draw', { prop: 'updateImgCanvasPoints', onPropertyChange: false });
-                    parent.notify('draw', { prop: 'isLinesIntersect', onPropertyChange: false, value: { obj: obj } });
-                    if (obj['isIntersect'] ||
-                        zoomFactor === minZoomFactor) {
-                        zoomOut.classList.add('e-disabled');
-                        zoomOut.parentElement.classList.add('e-overlay');
-                        isDisabled = true;
-                    }
-                    else {
-                        zoomOut.classList.remove('e-disabled');
-                        zoomOut.parentElement.classList.remove('e-overlay');
-                        isDisabled = false;
-                    }
+                    isDisabled = false;
+                }
+            }
+            else {
+                parent.img.destWidth = maxDimension.width;
+                parent.img.destHeight = maxDimension.height;
+                var obj = { isIntersect: null };
+                parent.notify('draw', { prop: 'updateImgCanvasPoints', onPropertyChange: false });
+                parent.notify('draw', { prop: 'isLinesIntersect', onPropertyChange: false, value: { obj: obj } });
+                if (obj['isIntersect'] ||
+                    zoomFactor === minZoomFactor) {
+                    isDisabled = true;
+                }
+                else {
+                    isDisabled = false;
+                }
+            }
+            if (zoomOut) {
+                if (isDisabled) {
+                    zoomOut.classList.add('e-disabled');
+                    zoomOut.parentElement.classList.add('e-overlay');
+                }
+                else {
+                    zoomOut.classList.remove('e-disabled');
+                    zoomOut.parentElement.classList.remove('e-overlay');
                 }
             }
         }
@@ -921,7 +921,7 @@ var Transform = /** @class */ (function () {
             maxDimension.width += (maxDimension.width * parent.transform.zoomFactor);
             maxDimension.height += (maxDimension.height * parent.transform.zoomFactor);
             parent.img.destLeft = (parent.lowerCanvas.clientWidth - maxDimension.width) / 2;
-            parent.img.destTop = (parent.lowerCanvas.clientHeight - maxDimension.height + 1) / 2;
+            parent.img.destTop = (parent.lowerCanvas.clientHeight - maxDimension.height) / 2;
         }
         parent.notify('draw', { prop: 'draw-image-to-canvas', value: { dimension: maxDimension } });
         maxDimension.width = this.cropDimension.width;
@@ -1632,6 +1632,7 @@ var Transform = /** @class */ (function () {
             parent.lowerCanvas.height = parent.upperCanvas.height = parent.maskCanvas.height =
                 parseFloat(canvasWrapper.style.height);
             this.lowerContext.filter = tempFilter;
+            this.lowerContext.imageSmoothingQuality = parent.imageSmoothingEnabled ? 'high' : 'low';
             var obj = { width: 0, height: 0 };
             this.calcMaxDimension(parent.img.srcWidth, parent.img.srcHeight, obj);
             var maxDimension = obj;
@@ -1644,7 +1645,7 @@ var Transform = /** @class */ (function () {
                 maxDimension.height += (maxDimension.height * parent.transform.defaultZoomFactor);
             }
             parent.img.destLeft = (parent.lowerCanvas.clientWidth - maxDimension.width) / 2;
-            parent.img.destTop = (parent.lowerCanvas.clientHeight - maxDimension.height + 1) / 2;
+            parent.img.destTop = (parent.lowerCanvas.clientHeight - maxDimension.height) / 2;
             if (parent.transform.degree === 0 && parent.transform.currFlipState === '') {
                 if (parent.transform.defaultZoomFactor > 0) {
                     parent.img.destLeft += parent.panPoint.totalPannedPoint.x;
@@ -1753,11 +1754,11 @@ var Transform = /** @class */ (function () {
         var object = { toolbarHeight: 0 };
         var parent = this.parent;
         parent.notify('toolbar', { prop: 'getToolbarHeight', value: { obj: object } });
-        var canvasMaxWidth = isImgShape ? parent.element.clientWidth / 3 :
-            parent.element.clientWidth;
-        var canvasMaxHeight = isImgShape ? (parent.element.clientHeight - object['toolbarHeight']) / 3 :
-            parent.element.clientHeight - (object['toolbarHeight']); // 1px border
-        canvasMaxHeight = Browser.isDevice ? canvasMaxHeight - (object['toolbarHeight']) : canvasMaxHeight; // 1px border
+        var newWidth = parent.imageSettings.width ? parent.imageSettings.width : parent.element.clientWidth;
+        var newHeight = parent.imageSettings.height ? parent.imageSettings.height : parent.element.clientHeight - (object['toolbarHeight']);
+        var canvasMaxWidth = isImgShape ? parent.element.clientWidth / 3 : newWidth;
+        var canvasMaxHeight = isImgShape ? (parent.element.clientHeight - object['toolbarHeight']) / 3 : newHeight;
+        canvasMaxHeight = Browser.isDevice ? canvasMaxHeight - (object['toolbarHeight']) : canvasMaxHeight;
         if (Browser.isDevice && parent.isStraightening) {
             var cxtTbar = parent.element.querySelector('#' + parent.element.id + '_contextualToolbarArea');
             canvasMaxHeight -= cxtTbar ? cxtTbar.clientHeight : 0;
@@ -1765,7 +1766,8 @@ var Transform = /** @class */ (function () {
         if (!isImgShape && parent.element.clientHeight === 0) {
             canvasMaxHeight = 0;
         }
-        if (isNullOrUndefined(isImgShape)) {
+        var isImageSettings = parent.imageSettings.width && parent.imageSettings.height ? true : false;
+        if (isNullOrUndefined(isImgShape) && !(isImageSettings)) {
             if (canvasMaxWidth > 30) {
                 canvasMaxWidth -= 30;
             }
@@ -1991,6 +1993,9 @@ var Transform = /** @class */ (function () {
                 this.zoomAction(.0125, null, true, true);
             }
         }
+        if (parent.isPublicMethod && parent.aspectWidth === width && parent.aspectHeight === height) {
+            return;
+        }
         this.resizeImg(activeObj, width, height);
         width = tempwidth;
         height = tempheight;
@@ -2036,9 +2041,12 @@ var Transform = /** @class */ (function () {
                 value: { type: 'custom', startX: null, startY: null, width: null, height: null } });
         }
         if (isNullOrUndefined(parent.currSelectionPoint)) {
-            parent.notify('draw', { prop: 'select', onPropertyChange: false,
-                value: { type: 'custom', startX: parent.img.destLeft, startY: parent.img.destTop,
-                    width: parent.img.destWidth, height: parent.img.destHeight } });
+            /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
+            if (!parent.shapeColl.some(function (item) { return item.rotatedAngle && item.rotatedAngle !== 0; })) {
+                parent.notify('draw', { prop: 'select', onPropertyChange: false,
+                    value: { type: 'custom', startX: parent.img.destLeft, startY: parent.img.destTop,
+                        width: parent.img.destWidth, height: parent.img.destHeight } });
+            }
         }
         else {
             parent.notify('draw', { prop: 'select', onPropertyChange: false,

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

@@ -11,6 +11,8 @@ export declare class UndoRedo {
     private tempUndoRedoStep;
     private tempActObj;
     private isPreventing;
+    private preventEditComplete;
+    private preventApplyEditComplete;
     constructor(parent: ImageEditor);
     destroy(): void;
     private addEventListener;

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

@@ -7,6 +7,8 @@ var UndoRedo = /** @class */ (function () {
         this.tempUndoRedoColl = [];
         this.tempUndoRedoStep = 0;
         this.isPreventing = false;
+        this.preventEditComplete = false;
+        this.preventApplyEditComplete = false;
         this.parent = parent;
         this.addEventListener();
     }
@@ -88,6 +90,12 @@ var UndoRedo = /** @class */ (function () {
             case 'reset':
                 this.reset();
                 break;
+            case 'preventEditComplete':
+                args.value['obj']['bool'] = this.preventEditComplete;
+                break;
+            case 'preventApplyEditComplete':
+                this.preventApplyEditComplete = args.value['bool'];
+                break;
         }
     };
     UndoRedo.prototype.getModuleName = function () {
@@ -102,6 +110,7 @@ var UndoRedo = /** @class */ (function () {
         this.tempUndoRedoColl = [];
         this.tempUndoRedoStep = 0;
         this.isPreventing = false;
+        this.preventEditComplete = this.preventApplyEditComplete = false;
     };
     UndoRedo.prototype.refreshUrc = function (refreshToolbar) {
         var parent = this.parent;
@@ -813,6 +822,10 @@ var UndoRedo = /** @class */ (function () {
         textArea.style.color = obj.strokeSettings.strokeColor;
         textArea.style.fontWeight = obj.textSettings.bold ? 'bold' : 'normal';
         textArea.style.fontStyle = obj.textSettings.italic ? 'italic' : 'normal';
+        textArea.style.textDecoration = (obj.textSettings.underline && obj.textSettings.strikethrough) ? 'underline line-through' :
+            (obj.textSettings.underline) ? 'underline' :
+                (obj.textSettings.strikethrough) ? 'line-through' :
+                    'none';
         textArea.style.border = '2px solid ' + parent.themeColl[parent.theme]['primaryColor'];
         textArea.value = obj.keyHistory;
         parent.activeObj = extend({}, obj, {}, true);
@@ -1146,6 +1159,7 @@ var UndoRedo = /** @class */ (function () {
             var temp = parent.noPushUndo;
             parent.noPushUndo = false;
             parent.isUndoRedoStack = true;
+            this.preventEditComplete = true;
             if (isPenDraw) {
                 var tempTogglePen = parent.togglePen;
                 var obj = { freehandDrawSelectedId: null };
@@ -1174,7 +1188,14 @@ var UndoRedo = /** @class */ (function () {
                     parent.enableTextEditing();
                 }
             }
-            parent.isUndoRedoStack = false;
+            if (this.preventEditComplete) {
+                parent.isUndoRedoStack = this.preventEditComplete = false;
+                if (!this.preventApplyEditComplete) {
+                    this.triggerActionCompletedEvent('shape-customize');
+                }
+                this.triggerActionCompletedEvent('shape-select');
+            }
+            parent.isUndoRedoStack = this.preventEditComplete = false;
         }
     };
     return UndoRedo;

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

@@ -11,7 +11,9 @@ export declare enum FileType {
     /** The SVG file type. */
     Svg = "Svg",
     /** The WebP file type. */
-    WebP = "WebP"
+    WebP = "WebP",
+    /** The BMP file type. */
+    Bmp = "Bmp"
 }
 /**
  * An enumeration representing the direction of an image editor operation.

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

@@ -13,6 +13,8 @@ export var FileType;
     FileType["Svg"] = "Svg";
     /** The WebP file type. */
     FileType["WebP"] = "WebP";
+    /** The BMP file type. */
+    FileType["Bmp"] = "Bmp";
 })(FileType || (FileType = {}));
 /**
  * An enumeration representing the direction of an image editor operation.

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

@@ -431,6 +431,12 @@ export declare class ImageEditor extends Component<HTMLDivElement> implements IN
     isSafari: boolean;
     /** @hidden */
     editCompleteArgs: object | RotateEventArgs | FlipEventArgs | CropEventArgs | FinetuneEventArgs | FrameChangeEventArgs | ImageFilterEventArgs | PanEventArgs | ResizeEventArgs | ShapeChangeEventArgs | ZoomEventArgs;
+    /** @hidden */
+    imageSettings: Dimension;
+    /** @hidden */
+    aspectRatioBaseDimension: boolean;
+    /** @hidden */
+    imageLoaded: boolean;
     private lowerContext;
     private upperContext;
     private inMemoryContext;
@@ -1075,7 +1081,7 @@ export declare class ImageEditor extends Component<HTMLDivElement> implements IN
      *
      * @param {string | ImageData } data - Specifies url of the image or image data.
      * @param {boolean} [resetChanges=true] - Optional. Determines whether to reset existing changes when opening the image. The default value is true, which resets all existing changes.
-     * @param {ImageSettings} imageSettings - Optional. Specifies the image setting that contains background color to apply when opening a transparent image. The default value of background color is an empty string (''), meaning no background color is applied by default when a transparent image is opened.
+     * @param {ImageSettings} imageSettings - Optional. Specifies image settings to apply when loading an image.
      *
      * @remarks
      * The supported file types are JPG, JPEG, PNG, and SVG.
@@ -1275,10 +1281,12 @@ export declare class ImageEditor extends Component<HTMLDivElement> implements IN
      * @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.
+     * @param {boolean} underline - Specifies whether the text should be underlined.
+     * @param {boolean} strikethrough - Specifies whether the text should have a strikethrough.
      * @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, transformCollection?: TransformationCollection[]): 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[], underline?: boolean, strikethrough?: boolean): boolean;
     /**
      * Draw an image as annotation on an image.
      *
@@ -1600,7 +1608,10 @@ export declare class ImageEditor extends Component<HTMLDivElement> implements IN
     private updateImage;
     private editCompleted;
     private updateColl;
+    private scaleToFit;
+    private setInitialZoomLevel;
     private resetToolbar;
+    private setRotateZoom;
     private getData;
     private applyShapes;
     private closeOverlayTbar;