@syncfusion/ej2-image-editor 29.2.5 → 30.1.38

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

@@ -301,6 +301,12 @@ var ImageEditor = /** @class */ (function (_super) {
         _this.tempRedactBlur = 50;
         /** @hidden */
         _this.tempRedactPixel = 40;
+        /** @hidden */
+        _this.imageSettings = { width: null, height: null };
+        /** @hidden */
+        _this.aspectRatioBaseDimension = false;
+        /** @hidden */
+        _this.imageLoaded = false;
         _this.tempToolbarHeight = 0;
         _this.tempToolbar = [];
         ImageEditor_1.Inject(Crop, Draw, Selection, Transform, Export, ToolbarModule);
@@ -405,11 +411,13 @@ var ImageEditor = /** @class */ (function (_super) {
                     break;
                 case 'disabled':
                     if (newProperties.disabled) {
-                        this.element.classList.add('e-disabled');
+                        this.element.classList.add('e-disabled', 'e-overlay');
+                        this.element.style.opacity = '0.5';
                         this.unwireEvent();
                     }
                     else {
-                        this.element.classList.remove('e-disabled');
+                        this.element.classList.remove('e-disabled', 'e-overlay');
+                        this.element.style.opacity = '1';
                         this.wireEvent();
                     }
                     break;
@@ -527,7 +535,7 @@ var ImageEditor = /** @class */ (function (_super) {
                     if (newProperties.uploadSettings) {
                         this.uploadSettings = newProperties.uploadSettings;
                         if (!this.uploadSettings.allowedExtensions) {
-                            this.uploadSettings.allowedExtensions = '.jpg, .jpeg, .png, .svg, .webp';
+                            this.uploadSettings.allowedExtensions = '.jpg, .jpeg, .png, .svg, .webp, .bmp';
                             this.notify('draw', { prop: 'setNullExtension', value: { extension: true } });
                         }
                         else {
@@ -576,6 +584,10 @@ var ImageEditor = /** @class */ (function (_super) {
         this.element.innerHTML = '';
     };
     ImageEditor.prototype.initialize = function () {
+        if (this.disabled) {
+            this.element.classList.add('e-disabled', 'e-overlay');
+            this.element.style.opacity = '0.5';
+        }
         if (this.toolbarTemplate) {
             this.element.appendChild(this.createElement('div', {
                 id: this.element.id + '_toolbarArea', className: 'e-toolbar-area'
@@ -587,7 +599,7 @@ var ImageEditor = /** @class */ (function (_super) {
             this.notify('toolbar', { prop: 'create-contextual-toolbar', onPropertyChange: false });
         }
         if (!this.uploadSettings.allowedExtensions) {
-            this.setProperties({ uploadSettings: { allowedExtensions: '.jpg, .jpeg, .png, .svg, .webp' } }, true);
+            this.setProperties({ uploadSettings: { allowedExtensions: '.jpg, .jpeg, .png, .svg, .webp, .bmp' } }, true);
         }
         else {
             this.notify('draw', { prop: 'setNullExtension', value: { extension: false } });
@@ -788,7 +800,7 @@ var ImageEditor = /** @class */ (function (_super) {
      * @returns {string[]}.
      */
     ImageEditor.prototype.getExtensionArray = function () {
-        var validExtensions = ['jpeg', 'jpg', 'png', 'svg', 'webp'];
+        var validExtensions = ['jpeg', 'jpg', 'png', 'svg', 'webp', 'bmp'];
         var split = this.uploadSettings.allowedExtensions.split(',');
         var extension = [];
         for (var _i = 0, split_1 = split; _i < split_1.length; _i++) {
@@ -840,6 +852,9 @@ var ImageEditor = /** @class */ (function (_super) {
                 case 'webp':
                     words += ' WebP,';
                     break;
+                case 'bmp':
+                    words += ' BMP,';
+                    break;
             }
             if (i === extension.length - 1) {
                 words = words.slice(0, -1);
@@ -1128,10 +1143,16 @@ var ImageEditor = /** @class */ (function (_super) {
      */
     ImageEditor.prototype.flip = function (direction) {
         this.applyShapes();
-        this.updateImageTransformColl(direction.toLowerCase() + 'flip');
-        this.notify('transform', { prop: 'flip', value: { direction: direction } });
-        this.notify('draw', { prop: 'redrawDownScale' });
-        this.notify('undo-redo', { prop: 'updateCurrUrc', value: { type: 'ok' } });
+        if (this.activeObj.shape && this.activeObj.shape.indexOf('crop') > -1) {
+            this.transformSelect(direction.toLowerCase() + 'flip');
+        }
+        else {
+            this.updateImageTransformColl(direction.toLowerCase() + 'flip');
+            this.setRotateZoom();
+            this.notify('transform', { prop: 'flip', value: { direction: direction } });
+            this.notify('draw', { prop: 'redrawDownScale' });
+            this.notify('undo-redo', { prop: 'updateCurrUrc', value: { type: 'ok' } });
+        }
         var actionArgs = { action: 'flip', actionEventArgs: this.editCompleteArgs };
         this.triggerEditCompleteEvent(actionArgs);
     };
@@ -1170,7 +1191,7 @@ var ImageEditor = /** @class */ (function (_super) {
      *
      * @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.
@@ -1178,16 +1199,88 @@ var ImageEditor = /** @class */ (function (_super) {
      * @returns {void}.
      */
     ImageEditor.prototype.open = function (data, resetChanges, imageSettings) {
+        var _this = this;
         resetChanges = isNullOrUndefined(resetChanges) ? true : resetChanges;
         if (resetChanges) {
-            if (isNullOrUndefined(data)) {
+            if (isNullOrUndefined(data) || this.disabled) {
                 return;
             }
             var dropArea = document.getElementById(this.element.id + '_dropArea');
             if (dropArea) {
                 dropArea.style.display = 'none';
             }
-            this.notify('draw', { prop: 'open', value: { data: data } });
+            this.imageSettings = { width: null, height: null };
+            this.aspectRatioBaseDimension = null;
+            if (imageSettings && (imageSettings.width || imageSettings.height)) {
+                var tempImageSettings_1 = extend({}, imageSettings, {}, true);
+                imageSettings = this.scaleToFit(imageSettings);
+                this.aspectRatioBaseDimension = imageSettings.isAspectRatio;
+                if (!imageSettings.isAspectRatio && imageSettings.width && imageSettings.height) {
+                    this.imageSettings.width = imageSettings.width;
+                    this.imageSettings.height = imageSettings.height;
+                    this.notify('draw', { prop: 'open', value: { data: data } });
+                    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                    var intervalId_1 = setInterval(function () {
+                        if (_this.imageLoaded && _this.baseImg.width && _this.baseImg.height) {
+                            _this.setInitialZoomLevel(tempImageSettings_1);
+                            clearInterval(intervalId_1);
+                        }
+                    }, 1);
+                }
+                else if (imageSettings.width || imageSettings.height) {
+                    this.notify('draw', { prop: 'open', value: { data: data } });
+                    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                    var intervalId_2 = setInterval(function () {
+                        if (_this.imageLoaded && _this.baseImg.width && _this.baseImg.height) {
+                            _this.imageSettings.width = imageSettings.width;
+                            _this.imageSettings.height = imageSettings.height;
+                            var originalWidth = _this.baseImg.width;
+                            var originalHeight = _this.baseImg.height;
+                            var maxValue = '';
+                            var aspectRatioValue = void 0;
+                            var value = void 0;
+                            var newValue = void 0;
+                            if (imageSettings.width && imageSettings.height) {
+                                maxValue = imageSettings.width > imageSettings.height ? 'width' : 'height';
+                            }
+                            if (maxValue === 'width' || (imageSettings.width && maxValue !== 'height')) {
+                                aspectRatioValue = imageSettings.width;
+                                value = aspectRatioValue / (originalWidth / originalHeight);
+                                newValue = value % 1 >= 0.5 || value % 1 <= -0.5 ? Math.round(value) : (value < 0) ? Math.ceil(value) : Math.floor(value);
+                                if (!imageSettings.height || newValue > imageSettings.height) {
+                                    _this.imageSettings.height = imageSettings.height = newValue;
+                                }
+                                else {
+                                    aspectRatioValue = imageSettings.height;
+                                    value = aspectRatioValue / (originalHeight / originalWidth);
+                                    newValue = value % 1 >= 0.5 || value % 1 <= -0.5 ? Math.round(value) : (value < 0) ? Math.ceil(value) : Math.floor(value);
+                                    _this.imageSettings.width = imageSettings.width = newValue;
+                                }
+                            }
+                            else if (maxValue === 'height' || (imageSettings.height && maxValue !== 'width')) {
+                                aspectRatioValue = imageSettings.height;
+                                value = aspectRatioValue / (originalHeight / originalWidth);
+                                newValue = value % 1 >= 0.5 || value % 1 <= -0.5 ? Math.round(value) : (value < 0) ? Math.ceil(value) : Math.floor(value);
+                                if (!imageSettings.width || newValue > imageSettings.width) {
+                                    _this.imageSettings.width = imageSettings.width = newValue;
+                                }
+                                else {
+                                    aspectRatioValue = imageSettings.width;
+                                    value = aspectRatioValue / (originalWidth / originalHeight);
+                                    newValue = value % 1 >= 0.5 || value % 1 <= -0.5 ? Math.round(value) : (value < 0) ? Math.ceil(value) : Math.floor(value);
+                                    _this.imageSettings.height = imageSettings.height = newValue;
+                                }
+                            }
+                            _this.notify('draw', { prop: 'open', value: { data: data } });
+                            _this.setInitialZoomLevel(tempImageSettings_1);
+                            clearInterval(intervalId_2);
+                        }
+                    }, 1);
+                }
+            }
+            else {
+                this.notify('draw', { prop: 'open', value: { data: data } });
+            }
         }
         else {
             this.updateImage(data, imageSettings ? imageSettings.backgroundColor : null);
@@ -1341,11 +1434,18 @@ var ImageEditor = /** @class */ (function (_super) {
     ImageEditor.prototype.rotate = function (degree) {
         var obj = { isRotate: false };
         this.applyShapes();
-        if (degree === 90 || degree === -90) {
-            this.updateImageTransformColl(degree === 90 ? 'rotateright' : 'rotateleft');
+        if (this.activeObj.shape && this.activeObj.shape.indexOf('crop') > -1) {
+            this.transformSelect(degree === 90 ? 'rotateright' : 'rotateleft');
+            obj['isRotate'] = true;
+        }
+        else {
+            if (degree === 90 || degree === -90) {
+                this.updateImageTransformColl(degree === 90 ? 'rotateright' : 'rotateleft');
+            }
+            this.setRotateZoom();
+            this.notify('transform', { prop: 'rotate', value: { degree: degree, obj: obj } });
+            this.notify('draw', { prop: 'redrawDownScale' });
         }
-        this.notify('transform', { prop: 'rotate', value: { degree: degree, obj: obj } });
-        this.notify('draw', { prop: 'redrawDownScale' });
         var actionArgs = { action: 'rotate', actionEventArgs: this.editCompleteArgs };
         this.triggerEditCompleteEvent(actionArgs);
         return obj['isRotate'];
@@ -1363,7 +1463,7 @@ var ImageEditor = /** @class */ (function (_super) {
      * @returns {void}.
      */
     ImageEditor.prototype.export = function (type, fileName, imageQuality) {
-        this.applyShapes();
+        this.manageActiveAction();
         this.notify('export', { prop: 'export', onPropertyChange: false, value: { type: type, fileName: fileName, imgQuality: imageQuality } });
     };
     /**
@@ -1471,6 +1571,17 @@ var ImageEditor = /** @class */ (function (_super) {
      */
     ImageEditor.prototype.zoom = function (zoomFactor, zoomPoint) {
         this.isZoomBtnClick = true;
+        var prevZoom = this.transform.zoomFactor;
+        if (prevZoom !== 0) {
+            var zoomObj = { previousZoomValue: null };
+            this.notify('transform', { prop: 'getPreviousZoomValue', value: { obj: zoomObj } });
+            prevZoom = zoomObj.previousZoomValue;
+        }
+        if (zoomFactor !== 1 && prevZoom !== 0 && ((prevZoom < 1 && zoomFactor > 1) || (prevZoom > 1 && zoomFactor < 1))) {
+            this.notify('transform', { prop: 'zoom', onPropertyChange: false,
+                value: { zoomFactor: 1, zoomPoint: zoomPoint }
+            });
+        }
         this.notify('transform', { prop: 'zoom', onPropertyChange: false,
             value: { zoomFactor: zoomFactor, zoomPoint: zoomPoint } });
         this.notify('draw', { prop: 'redrawDownScale' });
@@ -1633,10 +1744,12 @@ var ImageEditor = /** @class */ (function (_super) {
      * @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}.
      *
      */
-    ImageEditor.prototype.drawText = function (x, y, text, fontFamily, fontSize, bold, italic, color, isSelected, degree, fillColor, strokeColor, strokeWidth, transformCollection) {
+    ImageEditor.prototype.drawText = function (x, y, text, fontFamily, fontSize, bold, italic, color, isSelected, degree, fillColor, strokeColor, strokeWidth, transformCollection, underline, strikethrough) {
         var isText = false;
         var isPointsInRange = this.allowShape(x, y);
         if (!this.disabled && this.isImageLoaded && (isPointsInRange || (isNullOrUndefined(x) && isNullOrUndefined(y)))) {
@@ -1644,7 +1757,7 @@ var ImageEditor = /** @class */ (function (_super) {
             this.manageActiveAction();
             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, transformCollection: transformCollection } });
+                    outlineColor: strokeColor, outlineWidth: strokeWidth, transformCollection: transformCollection, underline: underline, strikethrough: strikethrough } });
             this.editCompleted();
         }
         return isText;
@@ -1669,14 +1782,27 @@ var ImageEditor = /** @class */ (function (_super) {
         var isImage = false;
         var isPointsInRange = this.allowShape(x, y);
         if (!this.disabled && this.isImageLoaded && (isPointsInRange || (isNullOrUndefined(x) && isNullOrUndefined(y)))) {
+            if (typeof data === 'string') {
+                try {
+                    var request = new XMLHttpRequest();
+                    var isBlob = data.indexOf('blob:') === 0;
+                    request.open(isBlob ? 'GET' : 'HEAD', data, false);
+                    request.send();
+                    isImage = request.status >= 200 && request.status < 300;
+                }
+                catch (error) {
+                    isImage = false;
+                }
+            }
+            else if (data instanceof ImageData) {
+                if (data.data instanceof Uint8ClampedArray && data.width > 0 && data.height > 0) {
+                    isImage = true;
+                }
+            }
             this.manageActiveAction();
-            var length_1 = this.objColl.length;
             this.notify('shape', { prop: 'drawImage', onPropertyChange: false, value: { x: x, y: y, width: width, height: height,
                     src: data, degree: degree, isAspectRatio: isAspectRatio, opacity: opacity, isSelected: isSelected } });
             this.editCompleted();
-            if (this.objColl.length > length_1) {
-                isImage = true;
-            }
         }
         return isImage;
     };
@@ -1801,6 +1927,8 @@ var ImageEditor = /** @class */ (function (_super) {
         this.applyShapes();
         this.notify('shape', { prop: 'deleteShape', onPropertyChange: false, value: { id: id, isShape: true } });
         this.editCompleted('shape-delete');
+        this.notify('draw', { prop: 'clearOuterCanvas', onPropertyChange: false, value: { context: this.lowerContext } });
+        this.notify('draw', { prop: 'clearOuterCanvas', onPropertyChange: false, value: { context: this.upperContext } });
     };
     /**
      * Get particular shapes details based on id of the shape which is drawn on an image editor.
@@ -2012,6 +2140,7 @@ var ImageEditor = /** @class */ (function (_super) {
         var isResized = false;
         if (((width.toString()).length <= 4 && (height.toString()).length <= 4) && (!this.isCircleCrop || isAspectRatio)) {
             this.manageActiveAction();
+            this.isPublicMethod = true;
             this.notify('toolbar', { prop: 'resizeClick', value: { bool: false } });
             var destPoints = { startX: this.img.destLeft, startY: this.img.destTop, width: this.img.destWidth,
                 height: this.img.destHeight };
@@ -2047,6 +2176,7 @@ var ImageEditor = /** @class */ (function (_super) {
             else {
                 this.notify('draw', { prop: 'performCancel', value: { isContextualToolbar: null } });
             }
+            this.isPublicMethod = false;
             this.notify('draw', { prop: 'redrawDownScale' });
         }
         return isResized;
@@ -2551,6 +2681,70 @@ var ImageEditor = /** @class */ (function (_super) {
         }
     };
     // Toolbar related codes
+    ImageEditor.prototype.scaleToFit = function (imageSettings) {
+        var tempImageSettings = extend({}, imageSettings, {}, true);
+        var viewPortWidth = this.lowerCanvas.clientWidth;
+        var viewPortHeight = this.lowerCanvas.clientHeight;
+        if (imageSettings.width && imageSettings.height && (imageSettings.width > viewPortWidth ||
+            imageSettings.height > viewPortHeight)) {
+            var widthScale = viewPortWidth / imageSettings.width;
+            var heightScale = viewPortHeight / imageSettings.height;
+            var scale = Math.min(widthScale, heightScale);
+            tempImageSettings.width = Math.round(imageSettings.width * scale);
+            tempImageSettings.height = Math.round(imageSettings.height * scale);
+        }
+        else if (imageSettings.width && imageSettings.width > viewPortWidth) {
+            var scale = viewPortWidth / imageSettings.width;
+            tempImageSettings.width = Math.round(imageSettings.width * scale);
+        }
+        else if (imageSettings.height && imageSettings.height > viewPortHeight) {
+            var scale = viewPortHeight / imageSettings.height;
+            tempImageSettings.height = Math.round(imageSettings.height * scale);
+        }
+        return tempImageSettings;
+    };
+    ImageEditor.prototype.setInitialZoomLevel = function (oldImageSettings) {
+        var _this = this;
+        var zoomLevel = 1;
+        var newWidth = this.img.destWidth;
+        var newHeight = this.img.destHeight;
+        var oldWidth = oldImageSettings.width;
+        var oldHeight = oldImageSettings.height;
+        var dimObj = { width: 0, height: 0 };
+        this.notify('transform', { prop: 'calcMaxDimension', onPropertyChange: false,
+            value: { width: this.img.srcWidth, height: this.img.srcHeight, obj: dimObj, isImgShape: null } });
+        while ((newWidth && oldWidth && oldWidth > newWidth) || (newHeight && oldHeight && oldHeight > newHeight)) {
+            newWidth = dimObj['width'] + (dimObj['width'] * 0.025 * zoomLevel);
+            newHeight = dimObj['height'] + (dimObj['height'] * 0.025 * zoomLevel);
+            if (Math.abs(newWidth) >= Math.abs(oldWidth) && Math.abs(newHeight) >= Math.abs(oldHeight)) {
+                break;
+            }
+            zoomLevel++;
+        }
+        if (zoomLevel > 1) {
+            this.isImageLoaded = true;
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            var intervalId_3 = setInterval(function () {
+                if (_this.imageLoaded) {
+                    for (var i = 1; i < zoomLevel; i++) {
+                        if (Math.round(i / 4) < _this.zoomSettings.maxZoomFactor) {
+                            _this.notify('transform', { prop: 'zoomAction', onPropertyChange: false,
+                                value: { zoomFactor: 0.025, zoomPoint: null, isResize: true } });
+                        }
+                        else {
+                            zoomLevel = i;
+                            break;
+                        }
+                    }
+                    _this.setProperties({ zoomSettings: { zoomFactor: Math.round(zoomLevel / 4) } }, true);
+                    _this.notify('transform', { prop: 'setPreviousZoomValue', onPropertyChange: false,
+                        value: { previousZoomValue: _this.zoomSettings.zoomFactor } });
+                    _this.notify('toolbar', { prop: 'enable-disable-btns' });
+                    clearInterval(intervalId_3);
+                }
+            }, 1);
+        }
+    };
     ImageEditor.prototype.resetToolbar = function () {
         if (this.toolbarHeight !== this.tempToolbarHeight && !((isNullOrUndefined(this.toolbar) ||
             (this.toolbar && this.toolbar.length > 0)
@@ -2565,6 +2759,14 @@ var ImageEditor = /** @class */ (function (_super) {
             this.update();
         }
     };
+    ImageEditor.prototype.setRotateZoom = function () {
+        if (this.transform.zoomFactor > 0) {
+            this.notify('draw', { prop: 'setRotateZoom', onPropertyChange: false, value: { isRotateZoom: true } });
+        }
+        else {
+            this.notify('draw', { prop: 'setRotateZoom', onPropertyChange: false, value: { isRotateZoom: false } });
+        }
+    };
     ImageEditor.prototype.getData = function (isMaskImage) {
         if (isMaskImage) {
             this.resetToolbar();
@@ -3201,6 +3403,11 @@ var ImageEditor = /** @class */ (function (_super) {
         }
     };
     ImageEditor.prototype.triggerEditCompleteEvent = function (args) {
+        var obj = { bool: false };
+        this.notify('undo-redo', { prop: 'preventEditComplete', value: { obj: obj } });
+        if (obj['bool']) {
+            return;
+        }
         if (args.action === 'shape-insert' && args.actionEventArgs &&
             args.actionEventArgs.currentShapeSettings &&
             args.actionEventArgs.currentShapeSettings.type.toString() === 'Redact') {
@@ -4489,9 +4696,17 @@ var ImageEditor = /** @class */ (function (_super) {
                 this.notify('crop', { prop: 'calcRatio', onPropertyChange: false,
                     value: { obj: obj_7, dimension: { width: ctx.canvas.width, height: ctx.canvas.height } } });
             }
-            var dimension = void 0;
-            // eslint-disable-next-line prefer-const
-            dimension = this.getRotatedCanvasDim(this.baseImg.width, this.baseImg.height, this.transform.straighten);
+            var width = this.baseImg.width;
+            var height = this.baseImg.height;
+            if (!this.aspectRatioBaseDimension && this.imageSettings.width && this.imageSettings.height) {
+                var widthRatio = this.baseImg.width / this.imageSettings.width;
+                var heightRatio = this.baseImg.height / this.imageSettings.height;
+                var ratio = (widthRatio + heightRatio) / 2;
+                ratio = ratio < 1 ? 1 : ratio;
+                width = this.imageSettings.width * ratio;
+                height = this.imageSettings.height * ratio;
+            }
+            var dimension = this.getRotatedCanvasDim(width, height, this.transform.straighten);
             this.img.srcWidth = ctx.canvas.width = dimension.width;
             this.img.srcHeight = ctx.canvas.height = dimension.height;
             var x = ctx.canvas.width / 2;
@@ -4499,7 +4714,7 @@ var ImageEditor = /** @class */ (function (_super) {
             ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
             ctx.translate(x, y);
             ctx.rotate(straighten * Math.PI / 180);
-            ctx.drawImage(this.baseImg, -this.baseImg.width / 2, -this.baseImg.height / 2, this.baseImg.width, this.baseImg.height);
+            ctx.drawImage(this.baseImg, -width / 2, -height / 2, width, height);
             ctx.setTransform(1, 0, 0, 1, 0, 0);
             var obj = { width: 0, height: 0 };
             this.notify('crop', { prop: 'calcRatio', onPropertyChange: false, value: { obj: obj, dimension: { width: ctx.canvas.width, height: ctx.canvas.height } } });

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

@@ -709,9 +709,21 @@ export interface FrameSettings {
  */
 export interface ImageSettings {
     /**
-     * Returns the background color of an image.
+     * Specifies the background color of an 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.
      */
     backgroundColor: string;
+    /**
+     * Specifies the target width at which the image should be rendered on the canvas.
+     */
+    width?: number;
+    /**
+     * Specifies the target height at which the image should be rendered on the canvas.
+     */
+    height?: number;
+    /**
+     * Indicates whether to maintain the original aspect ratio when scaling the image.
+     */
+    isAspectRatio?: boolean;
 }
 /**
  * The Interface which contains the tranformation collection of annotation in Image Editor.
@@ -1054,6 +1066,10 @@ export interface TextSettings {
      * Specifies the underline styles for the text content.
      */
     underline: boolean;
+    /**
+     * Specifies the strikethrough styles for the text content.
+     */
+    strikethrough: boolean;
 }
 /**
  * Interface for Transition occur in the Image Editor.

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

@@ -131,6 +131,8 @@ export declare class ToolbarModule {
     private duplicateShape;
     private defToolbarClicked;
     private performDefTbrClick;
+    private getFontStyle;
+    private toggleStyle;
     private updateRedactType;
     private frameToolbarClick;
     private zoomToFrameRange;