@syncfusion/ej2-image-editor 23.1.38 → 23.1.41

package/dist/global/index.d.ts

@@ -1,6 +1,6 @@
 /*!
 *  filename: index.d.ts
-*  version : 23.1.38
+*  version : 23.1.41
 *  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@23.1.36",
+  "_id": "@syncfusion/ej2-image-editor@23.1.39",
   "_inBundle": false,
-  "_integrity": "sha512-A6bph2XTzzn8GAjli/kAtAz4JPSrDYTzAQF6UOa0I+RqOKB3/w2/7CBmLNKlQVFd3I5nyY45z1M26X0ua0+48w==",
+  "_integrity": "sha512-yXE6senui8QfJwD5w3m9xCNYfdR2mauymav0ICQwvlSfxaBxpCmLpLFCKmC9IfYmpHNL/UTgAImhwbH9Wv1J4w==",
   "_location": "/@syncfusion/ej2-image-editor",
   "_phantomChildren": {},
   "_requested": {
@@ -23,8 +23,8 @@
     "/@syncfusion/ej2-react-image-editor",
     "/@syncfusion/ej2-vue-image-editor"
   ],
-  "_resolved": "https://nexus.syncfusion.com/repository/ej2-hotfix-new/@syncfusion/ej2-image-editor/-/ej2-image-editor-23.1.36.tgz",
-  "_shasum": "b13260748329c7b0412240bdd9714f2bbeb97281",
+  "_resolved": "https://nexus.syncfusion.com/repository/ej2-hotfix-new/@syncfusion/ej2-image-editor/-/ej2-image-editor-23.1.39.tgz",
+  "_shasum": "0054fb7af397eb92d72f5984b54deb791519fb03",
   "_spec": "@syncfusion/ej2-image-editor@*",
   "_where": "/jenkins/workspace/elease-automation_release_23.1.1/packages/included",
   "author": {
@@ -32,12 +32,12 @@
   },
   "bundleDependencies": false,
   "dependencies": {
-    "@syncfusion/ej2-base": "~23.1.38",
-    "@syncfusion/ej2-buttons": "~23.1.36",
-    "@syncfusion/ej2-inputs": "~23.1.38",
-    "@syncfusion/ej2-navigations": "~23.1.36",
+    "@syncfusion/ej2-base": "~23.1.41",
+    "@syncfusion/ej2-buttons": "~23.1.41",
+    "@syncfusion/ej2-inputs": "~23.1.40",
+    "@syncfusion/ej2-navigations": "~23.1.41",
     "@syncfusion/ej2-popups": "~23.1.38",
-    "@syncfusion/ej2-splitbuttons": "~23.1.36"
+    "@syncfusion/ej2-splitbuttons": "~23.1.41"
   },
   "deprecated": false,
   "description": "Essential JS 2 ImageEditor",
@@ -67,7 +67,7 @@
     "url": "https://github.com/syncfusion/ej2-javascript-ui-controls/tree/master/controls/imageeditor"
   },
   "typings": "index.d.ts",
-  "version": "23.1.38",
+  "version": "23.1.41",
   "sideEffects": false,
   "homepage": "https://www.syncfusion.com/javascript-ui-controls"
 }

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

@@ -3434,7 +3434,11 @@ var Draw = /** @class */ (function () {
                 /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
                 filesData = fileData = args.filesData[0].rawFile;
             }
-            var fileExtension = fileData.name && fileData.name.split('.')[1].toLowerCase();
+            var fileExtension = void 0;
+            if (fileData.name) {
+                var fileExtensionArray = fileData.name.split('.');
+                fileExtension = fileExtensionArray[fileExtensionArray.length - 1].toLowerCase();
+            }
             if (fileExtension && ['jpg', 'jpeg', 'png', 'svg'].indexOf(fileExtension) === -1) {
                 this.errorLoading();
                 return;

package/src/image-editor/action/freehand-draw.js

@@ -253,7 +253,7 @@ var FreehandDrawing = /** @class */ (function () {
         EventHandler.add(canvas, 'mousemove touchmove', this.freehandMoveHandler, this);
         var shapeSettings = { id: 'pen_' + (this.currFHDIdx + 1), type: ShapeType.FreehandDraw,
             startX: this.freehandDownPoint.x, startY: this.freehandDownPoint.y,
-            strokeColor: this.parent.activeObj.strokeSettings.strokeColor, strokeWidth: this.parent.activeObj.strokeSettings.strokeWidth,
+            strokeColor: this.parent.activeObj.strokeSettings.strokeColor, strokeWidth: this.penStrokeWidth,
             points: null };
         var shapeChangingArgs = { action: 'draw-start', previousShapeSettings: shapeSettings,
             currentShapeSettings: shapeSettings };
@@ -310,7 +310,7 @@ var FreehandDrawing = /** @class */ (function () {
                 currentText: null, previousFilter: null, isCircleCrop: null } });
         var shapeSettings = { id: 'pen_' + (this.currFHDIdx + 1), type: ShapeType.FreehandDraw,
             startX: this.freehandDownPoint.x, startY: this.freehandDownPoint.y,
-            strokeColor: this.parent.activeObj.strokeSettings.strokeColor, strokeWidth: this.parent.activeObj.strokeSettings.strokeWidth,
+            strokeColor: this.parent.activeObj.strokeSettings.strokeColor, strokeWidth: this.penStrokeWidth,
             points: this.parent.pointColl[this.currFHDIdx].points };
         var shapeChangingArgs = { action: 'draw-end', previousShapeSettings: shapeSettings,
             currentShapeSettings: shapeSettings };
@@ -331,6 +331,7 @@ var FreehandDrawing = /** @class */ (function () {
             y = e.touches[0].clientY - rect.top;
         }
         if (this.isFreehandDrawing) {
+            this.upperContext.fillStyle = this.parent.activeObj.strokeSettings.strokeColor;
             this.processPoint(x, y, false, this.upperContext);
         }
     };
@@ -1068,7 +1069,7 @@ var FreehandDrawing = /** @class */ (function () {
             /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
             parent.dotNetRef.invokeMethodAsync('ShapeEventAsync', 'OnShape', shapeChangingArgs).then(function (shapeChangingArgs) {
                 parent.activeObj.strokeSettings.strokeColor = shapeChangingArgs.currentShapeSettings.strokeColor;
-                parent.activeObj.strokeSettings.strokeWidth = shapeChangingArgs.currentShapeSettings.strokeWidth;
+                _this.penStrokeWidth = shapeChangingArgs.currentShapeSettings.strokeWidth;
                 if (_this.fhdSelID) {
                     parent.pointColl[_this.fhdSelIdx].strokeColor = shapeChangingArgs.currentShapeSettings.strokeColor;
                     parent.pointColl[_this.fhdSelIdx].strokeWidth = shapeChangingArgs.currentShapeSettings.strokeWidth;
@@ -1084,7 +1085,7 @@ var FreehandDrawing = /** @class */ (function () {
         else {
             parent.trigger('shapeChanging', shapeChangingArgs);
             parent.activeObj.strokeSettings.strokeColor = shapeChangingArgs.currentShapeSettings.strokeColor;
-            parent.activeObj.strokeSettings.strokeWidth = shapeChangingArgs.currentShapeSettings.strokeWidth;
+            this.penStrokeWidth = shapeChangingArgs.currentShapeSettings.strokeWidth;
             if (this.fhdSelID) {
                 parent.pointColl[this.fhdSelIdx].strokeColor = shapeChangingArgs.currentShapeSettings.strokeColor;
                 parent.pointColl[this.fhdSelIdx].strokeWidth = shapeChangingArgs.currentShapeSettings.strokeWidth;

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

@@ -268,7 +268,8 @@ var Transform = /** @class */ (function () {
             parent.rotateFlipColl = obj['collection'];
             if (parent.cropObj.activeObj.shape && !this.isPreventSelect) {
                 this.isPreventSelect = true;
-                parent.select('custom');
+                parent.notify('draw', { prop: 'select', onPropertyChange: false,
+                    value: { type: 'custom', startX: null, startY: null, width: null, height: null } });
                 this.isPreventSelect = false;
                 parent.setProperties({ zoomSettings: { zoomFactor: 1 } }, true);
                 this.prevZoomValue = parent.zoomSettings.zoomFactor;
@@ -535,7 +536,8 @@ var Transform = /** @class */ (function () {
         parent.rotateFlipColl = obj['collection'];
         if (parent.cropObj.activeObj.shape && !this.isPreventSelect) {
             this.isPreventSelect = true;
-            parent.select('custom');
+            parent.notify('draw', { prop: 'select', onPropertyChange: false,
+                value: { type: 'custom', startX: null, startY: null, width: null, height: null } });
             this.isPreventSelect = false;
             parent.setProperties({ zoomSettings: { zoomFactor: 1 } }, true);
             this.prevZoomValue = parent.zoomSettings.zoomFactor;
@@ -2087,13 +2089,17 @@ var Transform = /** @class */ (function () {
         }
         else if (parent.img.srcWidth === parent.baseImgCanvas.width && parent.img.srcHeight === parent.baseImgCanvas.height) {
             parent.currSelectionPoint = null;
-            parent.select('custom');
+            parent.notify('draw', { prop: 'select', onPropertyChange: false,
+                value: { type: 'custom', startX: null, startY: null, width: null, height: null } });
         }
         if (isNullOrUndefined(parent.currSelectionPoint)) {
-            parent.select('custom', parent.img.destLeft, parent.img.destTop, parent.img.destWidth, parent.img.destHeight);
+            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.select('custom');
+            parent.notify('draw', { prop: 'select', onPropertyChange: false,
+                value: { type: 'custom', startX: null, startY: null, width: null, height: null } });
         }
         width = parent.activeObj.activePoint.width * widthRatio;
         height = parent.activeObj.activePoint.height * heightRatio;
@@ -2101,7 +2107,8 @@ var Transform = /** @class */ (function () {
         var sy = (parent.activeObj.activePoint.startY + (parent.activeObj.activePoint.height / 2)) - (height / 2);
         parent.transform.defaultZoomFactor = 0;
         parent.notify('draw', { prop: 'setResizeSelect', value: { bool: true } });
-        parent.select('custom', sx, sy, width, height);
+        parent.notify('draw', { prop: 'select', onPropertyChange: false,
+            value: { type: 'custom', startX: sx, startY: sy, width: width, height: height } });
         parent.notify('draw', { prop: 'setResizeSelect', value: { bool: false } });
         parent.isCropToolbar = true;
         parent.crop();

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

@@ -348,7 +348,8 @@ var UndoRedo = /** @class */ (function () {
                         }
                     }
                     parent.updateCropTransformItems();
-                    parent.select('custom');
+                    parent.notify('draw', { prop: 'select', onPropertyChange: false,
+                        value: { type: 'custom', startX: null, startY: null, width: null, height: null } });
                     if (parent.isCircleCrop) {
                         parent.isCircleCrop = false;
                         this.tempCurrSelPoint = extend({}, parent.currSelectionPoint, {}, true);

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

@@ -122,7 +122,34 @@ export declare enum ImageEditorCommand {
     RotateLeft = "RotateLeft",
     RotateRight = "RotateRight",
     FlipHorizontal = "FlipHorizontal",
-    FlipVertical = "FlipVertical"
+    FlipVertical = "FlipVertical",
+    Undo = "Undo",
+    Redo = "Redo",
+    None = "None",
+    Mat = "Mat",
+    Bevel = "Bevel",
+    Inset = "Inset",
+    Hook = "Hook",
+    Finetune = "Finetune",
+    Filter = "Filter",
+    Frame = "Frame",
+    Resize = "Resize",
+    HorizontalFlip = "HorizontalFlip",
+    VerticalFlip = "VerticalFlip",
+    Brightness = "Brightness",
+    Contrast = "Contrast",
+    Hue = "Hue",
+    Saturation = "Saturation",
+    Opacity = "Opacity",
+    Blur = "Blur",
+    Exposure = "Exposure",
+    Default = "Default",
+    Chrome = "Chrome",
+    Cold = "Cold",
+    Warm = "Warm",
+    Grayscale = "Grayscale",
+    Sepia = "Sepia",
+    Invert = "Invert"
 }
 /**
  * An enumeration of available image filter options.

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

@@ -129,6 +129,33 @@ export var ImageEditorCommand;
     ImageEditorCommand["RotateRight"] = "RotateRight";
     ImageEditorCommand["FlipHorizontal"] = "FlipHorizontal";
     ImageEditorCommand["FlipVertical"] = "FlipVertical";
+    ImageEditorCommand["Undo"] = "Undo";
+    ImageEditorCommand["Redo"] = "Redo";
+    ImageEditorCommand["None"] = "None";
+    ImageEditorCommand["Mat"] = "Mat";
+    ImageEditorCommand["Bevel"] = "Bevel";
+    ImageEditorCommand["Inset"] = "Inset";
+    ImageEditorCommand["Hook"] = "Hook";
+    ImageEditorCommand["Finetune"] = "Finetune";
+    ImageEditorCommand["Filter"] = "Filter";
+    ImageEditorCommand["Frame"] = "Frame";
+    ImageEditorCommand["Resize"] = "Resize";
+    ImageEditorCommand["HorizontalFlip"] = "HorizontalFlip";
+    ImageEditorCommand["VerticalFlip"] = "VerticalFlip";
+    ImageEditorCommand["Brightness"] = "Brightness";
+    ImageEditorCommand["Contrast"] = "Contrast";
+    ImageEditorCommand["Hue"] = "Hue";
+    ImageEditorCommand["Saturation"] = "Saturation";
+    ImageEditorCommand["Opacity"] = "Opacity";
+    ImageEditorCommand["Blur"] = "Blur";
+    ImageEditorCommand["Exposure"] = "Exposure";
+    ImageEditorCommand["Default"] = "Default";
+    ImageEditorCommand["Chrome"] = "Chrome";
+    ImageEditorCommand["Cold"] = "Cold";
+    ImageEditorCommand["Warm"] = "Warm";
+    ImageEditorCommand["Grayscale"] = "Grayscale";
+    ImageEditorCommand["Sepia"] = "Sepia";
+    ImageEditorCommand["Invert"] = "Invert";
 })(ImageEditorCommand || (ImageEditorCommand = {}));
 /**
  * An enumeration of available image filter options.

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

@@ -774,7 +774,14 @@ export declare class ImageEditor extends Component<HTMLDivElement> implements IN
     initialize(): void;
     private createDropUploader;
     private dlgCloseBtnClick;
-    private showDialogPopup;
+    /**
+     * Show dialog popup for unsupported files.
+     *
+     * @param { string } type - Specifies the type of error.
+     * @hidden
+     * @returns {void}.
+     */
+    showDialogPopup(type?: string): void;
     /**
      *
      * This Method will add events to component (element, event, method, current reference)
@@ -1172,7 +1179,7 @@ export declare class ImageEditor extends Component<HTMLDivElement> implements IN
      *
      * @returns {boolean}.
      */
-    drawFrame(frameType: FrameType, color: string, gradientColor: string, size: number, inset: number, offset: number, borderRadius: number, frameLineStyle: FrameLineStyle, lineCount: number): boolean;
+    drawFrame(frameType: FrameType, color?: string, gradientColor?: string, size?: number, inset?: number, offset?: number, borderRadius?: number, frameLineStyle?: FrameLineStyle, lineCount?: number): boolean;
     private toolbarTemplateFn;
     private quickAccessToolbarTemplateFn;
     private templateParser;

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

@@ -21,7 +21,7 @@ import { Component, NotifyPropertyChanges, Property, addClass, removeClass, exte
 import { Event, EventHandler, getComponent, isNullOrUndefined, getUniqueID } from '@syncfusion/ej2-base';
 import { Dialog, createSpinner } from '@syncfusion/ej2-popups';
 import { Complex, Browser, ChildProperty, compile as templateCompiler, compile } from '@syncfusion/ej2-base';
-import { ToolbarModule, Crop, Draw, Filter, FreehandDrawing, Selection, Shape, Transform, UndoRedo, Export, ShapeType } from './../index';
+import { ToolbarModule, Crop, Draw, Filter, FreehandDrawing, Selection, Shape, Transform, UndoRedo, Export, FrameLineStyle, ShapeType } from './../index';
 import { ZoomTrigger, ImageFinetuneOption } from './../index';
 import { Uploader } from '@syncfusion/ej2-inputs';
 /**
@@ -306,6 +306,7 @@ var ImageEditor = /** @class */ (function (_super) {
      * @private
      */
     ImageEditor.prototype.onPropertyChanged = function (newProperties, oldProperties) {
+        var indexObj;
         for (var _i = 0, _a = Object.keys(newProperties); _i < _a.length; _i++) {
             var prop = _a[_i];
             switch (prop) {
@@ -329,9 +330,11 @@ var ImageEditor = /** @class */ (function (_super) {
                     break;
                 case 'height':
                     this.element.style.height = newProperties.height;
+                    this.update();
                     break;
                 case 'width':
                     this.element.style.width = newProperties.width;
+                    this.update();
                     break;
                 case 'theme':
                     if (newProperties.theme) {
@@ -343,6 +346,13 @@ var ImageEditor = /** @class */ (function (_super) {
                         }
                         this.upperContext.strokeStyle = this.themeColl[this.theme]['primaryColor'];
                         this.upperContext.fillStyle = this.themeColl[this.theme]['secondaryColor'];
+                        if (isBlazor()) {
+                            this.updateToolbar(this.element, 'imageLoaded');
+                        }
+                        else {
+                            this.notify('toolbar', { prop: 'refresh-toolbar', onPropertyChange: false, value: { type: 'main',
+                                    isApplyBtn: null, isCropping: null, isZooming: null, cType: null } });
+                        }
                     }
                     break;
                 case 'finetuneSettings':
@@ -354,8 +364,13 @@ var ImageEditor = /** @class */ (function (_super) {
                 case 'locale':
                     if (newProperties.locale) {
                         this.notify('toolbar', { prop: 'setLocale', onPropertyChange: false, value: { locale: newProperties.locale } });
-                        this.notify('toolbar', { prop: 'refresh-toolbar', onPropertyChange: false, value: { type: 'main',
-                                isApplyBtn: null, isCropping: null, isZooming: null, cType: null } });
+                        if (isBlazor()) {
+                            this.updateToolbar(this.element, 'imageLoaded');
+                        }
+                        else {
+                            this.notify('toolbar', { prop: 'refresh-toolbar', onPropertyChange: false, value: { type: 'main',
+                                    isApplyBtn: null, isCropping: null, isZooming: null, cType: null } });
+                        }
                     }
                     break;
                 case 'allowUndoRedo':
@@ -365,18 +380,47 @@ var ImageEditor = /** @class */ (function (_super) {
                     else {
                         this.allowUndoRedo = false;
                     }
-                    this.notify('toolbar', { prop: 'refresh-toolbar', onPropertyChange: false, value: { type: 'main',
-                            isApplyBtn: null, isCropping: null, isZooming: null, cType: null } });
+                    if (isBlazor()) {
+                        this.updateToolbar(this.element, 'imageLoaded');
+                    }
+                    else {
+                        this.notify('toolbar', { prop: 'refresh-toolbar', onPropertyChange: false, value: { type: 'main',
+                                isApplyBtn: null, isCropping: null, isZooming: null, cType: null } });
+                    }
                     break;
                 case 'showQuickAccessToolbar':
                     if (newProperties.showQuickAccessToolbar) {
                         this.showQuickAccessToolbar = true;
-                        this.notify('toolbar', { prop: 'create-qa-toolbar', onPropertyChange: false });
-                        this.notify('toolbar', { prop: 'renderQAT', onPropertyChange: false, value: { isPenEdit: null } });
+                        if (!isBlazor()) {
+                            this.notify('toolbar', { prop: 'create-qa-toolbar', onPropertyChange: false });
+                        }
+                        indexObj = { freehandSelectedIndex: null };
+                        this.notify('freehand-draw', { prop: 'getFreehandSelectedIndex', onPropertyChange: false, value: { obj: indexObj } });
+                        if (this.activeObj.shape) {
+                            if (isBlazor()) {
+                                this.updateToolbar(this.element, 'quickAccessToolbar', this.activeObj.shape);
+                            }
+                            else {
+                                this.notify('toolbar', { prop: 'renderQAT', onPropertyChange: false, value: { isPenEdit: null } });
+                            }
+                        }
+                        else if (indexObj['freehandSelectedIndex']) {
+                            if (isBlazor()) {
+                                this.updateToolbar(this.element, 'quickAccessToolbar', 'pen');
+                            }
+                            else {
+                                this.notify('toolbar', { prop: 'renderQAT', onPropertyChange: false, value: { isPenEdit: true } });
+                            }
+                        }
                     }
                     else {
                         this.showQuickAccessToolbar = false;
-                        this.notify('toolbar', { prop: 'destroy-qa-toolbar', onPropertyChange: false });
+                        if (isBlazor()) {
+                            this.updateToolbar(this.element, 'destroyQuickAccessToolbar');
+                        }
+                        else {
+                            this.notify('toolbar', { prop: 'destroy-qa-toolbar', onPropertyChange: false });
+                        }
                     }
                     break;
                 case 'zoomSettings':
@@ -386,12 +430,22 @@ var ImageEditor = /** @class */ (function (_super) {
                     if (isNullOrUndefined(this.zoomSettings.zoomTrigger)) {
                         this.zoomSettings.zoomTrigger = (ZoomTrigger.MouseWheel | ZoomTrigger.Pinch | ZoomTrigger.Toolbar |
                             ZoomTrigger.Commands);
-                        this.notify('toolbar', { prop: 'refresh-toolbar', onPropertyChange: false, value: { type: 'main',
-                                isApplyBtn: null, isCropping: null, isZooming: null, cType: null } });
+                        if (isBlazor()) {
+                            this.updateToolbar(this.element, 'imageLoaded');
+                        }
+                        else {
+                            this.notify('toolbar', { prop: 'refresh-toolbar', onPropertyChange: false, value: { type: 'main',
+                                    isApplyBtn: null, isCropping: null, isZooming: null, cType: null } });
+                        }
                     }
                     else if ((newProperties.zoomSettings.zoomTrigger & ZoomTrigger.Toolbar) === ZoomTrigger.Toolbar) {
-                        this.notify('toolbar', { prop: 'refresh-toolbar', onPropertyChange: false, value: { type: 'main',
-                                isApplyBtn: null, isCropping: null, isZooming: null, cType: null } });
+                        if (isBlazor()) {
+                            this.updateToolbar(this.element, 'imageLoaded');
+                        }
+                        else {
+                            this.notify('toolbar', { prop: 'refresh-toolbar', onPropertyChange: false, value: { type: 'main',
+                                    isApplyBtn: null, isCropping: null, isZooming: null, cType: null } });
+                        }
                     }
                     break;
                 case 'selectionSettings':
@@ -403,6 +457,38 @@ var ImageEditor = /** @class */ (function (_super) {
                         }
                     }
                     break;
+                case 'toolbar':
+                    if (newProperties.toolbar) {
+                        this.toolbar = newProperties.toolbar;
+                        if (isBlazor()) {
+                            this.updateToolbar(this.element, 'imageLoaded');
+                        }
+                        else {
+                            this.notify('toolbar', { prop: 'refresh-toolbar', onPropertyChange: false, value: { type: 'main',
+                                    isApplyBtn: null, isCropping: null, isZooming: null, cType: null } });
+                        }
+                    }
+                    break;
+                case 'toolbarTemplate':
+                    if (newProperties.toolbarTemplate) {
+                        if (!isBlazor()) {
+                            this.notify('toolbar', { prop: 'destroy-bottom-toolbar', onPropertyChange: false });
+                            this.notify('toolbar', { prop: 'destroy-top-toolbar', onPropertyChange: false });
+                            this.element.appendChild(this.createElement('div', {
+                                id: this.element.id + '_toolbarArea', className: 'e-toolbar-area'
+                            }));
+                            this.toolbarTemplateFn();
+                        }
+                    }
+                    break;
+                case 'quickAccessToolbarTemplate':
+                    if (newProperties.quickAccessToolbarTemplate) {
+                        if (!isBlazor()) {
+                            this.notify('toolbar', { prop: 'destroy-qa-toolbar', onPropertyChange: false });
+                            this.quickAccessToolbarTemplateFn();
+                        }
+                    }
+                    break;
             }
         }
     };
@@ -487,15 +573,20 @@ var ImageEditor = /** @class */ (function (_super) {
         var uploadObj = new Uploader({
             dropArea: document.getElementsByClassName('e-canvas-wrapper')[0],
             allowedExtensions: '.jpg, .jpeg, .png,.svg',
+            multiple: false,
             selected: function (args) {
                 if (args.event.type === 'change' || args.event.type === 'drop') {
                     /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
                     var type = args.filesData[0].type;
-                    if (type === 'png' || type === 'jpg' || type === 'jpeg' || type === 'svg') {
+                    var errType = 'unsupported';
+                    if ((args.event.type === 'change' || (args.event.type === 'drop' && args.event.dataTransfer.files.length === 1)) && (type === 'png' || type === 'jpg' || type === 'jpeg' || type === 'svg')) {
                         _this.notify('draw', { prop: 'fileSelect', value: { inputElement: _this.element.querySelector('#' + _this.element.id + '_dropfileUpload'), args: args } });
                     }
                     else {
-                        _this.showDialogPopup();
+                        if (args.event.type === 'drop' && args.event.dataTransfer.files.length > 1) {
+                            errType = 'multi-select-image';
+                        }
+                        _this.showDialogPopup(errType);
                     }
                 }
             }
@@ -505,20 +596,39 @@ var ImageEditor = /** @class */ (function (_super) {
     ImageEditor.prototype.dlgCloseBtnClick = function () {
         getComponent(document.getElementById(this.element.id + '_dialog'), 'dialog').destroy();
     };
-    ImageEditor.prototype.showDialogPopup = function () {
+    /**
+     * Show dialog popup for unsupported files.
+     *
+     * @param { string } type - Specifies the type of error.
+     * @hidden
+     * @returns {void}.
+     */
+    ImageEditor.prototype.showDialogPopup = function (type) {
+        var content = '';
         this.element.querySelector('#' + this.element.id + '_dialog').style.display = 'block';
-        var headerObj = { key: 'AlertDialogHeader' };
-        this.notify('toolbar', { prop: 'getLocaleText', onPropertyChange: false, value: { obj: headerObj } });
-        var contentObj = { key: 'AlertDialogContent' };
-        this.notify('toolbar', { prop: 'getLocaleText', onPropertyChange: false, value: { obj: contentObj } });
-        var supportObj = { key: 'SupportText' };
-        this.notify('toolbar', { prop: 'getLocaleText', onPropertyChange: false, value: { obj: supportObj } });
+        var headerObj;
         var okObj = { key: 'OK' };
         this.notify('toolbar', { prop: 'getLocaleText', onPropertyChange: false, value: { obj: okObj } });
+        if (type === 'multi-select-image') {
+            headerObj = { key: 'ImageErrorDialogHeader' };
+            this.notify('toolbar', { prop: 'getLocaleText', onPropertyChange: false, value: { obj: headerObj } });
+            var contentObj = { key: 'ImageErrorDialogContent' };
+            this.notify('toolbar', { prop: 'getLocaleText', onPropertyChange: false, value: { obj: contentObj } });
+            content = '<span>' + contentObj['value'] + '</span>';
+        }
+        else {
+            headerObj = { key: 'AlertDialogHeader' };
+            this.notify('toolbar', { prop: 'getLocaleText', onPropertyChange: false, value: { obj: headerObj } });
+            var contentObj = { key: 'AlertDialogContent' };
+            this.notify('toolbar', { prop: 'getLocaleText', onPropertyChange: false, value: { obj: contentObj } });
+            var supportObj = { key: 'SupportText' };
+            this.notify('toolbar', { prop: 'getLocaleText', onPropertyChange: false, value: { obj: supportObj } });
+            content = '<span>' + contentObj['value'] + ' ' + supportObj['value'] + '<b> JPG, PNG, and SVG</b></span>';
+        }
         var dialog = new Dialog({
             header: headerObj['value'],
             closeOnEscape: true,
-            content: '<span>' + contentObj['value'] + ' ' + supportObj['value'] + '<b> JPG, PNG, and SVG</b></span>',
+            content: content,
             target: document.getElementById('target'),
             width: '285px',
             isModal: true,
@@ -964,6 +1074,8 @@ var ImageEditor = /** @class */ (function (_super) {
     ImageEditor.prototype.select = function (type, startX, startY, width, height) {
         this.notify('draw', { prop: 'select', onPropertyChange: false,
             value: { type: type, startX: startX, startY: startY, width: width, height: height } });
+        this.notify('draw', { prop: 'select', onPropertyChange: false,
+            value: { type: type, startX: startX, startY: startY, width: width, height: height } });
     };
     /**
      * Enable or disable a freehand drawing option in an Image Editor.
@@ -1386,10 +1498,18 @@ var ImageEditor = /** @class */ (function (_super) {
     ImageEditor.prototype.drawFrame = function (frameType, color, gradientColor, size, inset, offset, borderRadius, frameLineStyle, lineCount) {
         var isFrame = false;
         var obj = { frameChangeEventArgs: null };
+        color = color ? color : '#fff';
+        gradientColor = gradientColor ? gradientColor : '';
+        size = size ? size : 20;
+        inset = inset ? inset : 0;
+        offset = offset ? offset : 0;
+        borderRadius = borderRadius ? borderRadius : 0;
+        frameLineStyle = frameLineStyle ? frameLineStyle : FrameLineStyle.Solid;
+        lineCount = lineCount ? lineCount : 0;
         var prevFrameSettings = { type: this.toPascalCase(this.frameObj.type), color: this.frameObj.color,
             gradientColor: this.frameObj.gradientColor, size: this.frameObj.size, inset: this.frameObj.inset,
-            offset: this.frameObj.offset, borderRadius: this.frameObj.radius, frameLineStyle: this.toPascalCase(this.frameObj.border),
-            lineCount: this.frameObj.amount };
+            offset: this.frameObj.offset, borderRadius: this.frameObj.radius,
+            frameLineStyle: this.toPascalCase(this.frameObj.border), lineCount: this.frameObj.amount };
         extend(this.tempFrameObj, this.frameObj);
         this.tempFrameZoomLevel = this.transform.zoomFactor;
         this.frameDestPoints = extend({}, this.img, {}, true);
@@ -1397,6 +1517,7 @@ var ImageEditor = /** @class */ (function (_super) {
             this.notify('toolbar', { prop: 'frameToolbarClick' });
         }
         else {
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
             this.performFrameClick();
         }
         this.frameObj.type = frameType.toLowerCase();

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

@@ -156,7 +156,9 @@ var ToolbarModule = /** @class */ (function () {
             AlertDialogHeader: 'Unsupported file',
             AlertDialogContent: 'The dropped file is unsupported.',
             Yes: 'Yes',
-            No: 'No'
+            No: 'No',
+            ImageErrorDialogHeader: 'Image Selection Error',
+            ImageErrorDialogContent: 'Please select only one image to open.'
         };
         this.l10n = new L10n('image-editor', this.defaultLocale, this.parent.locale);
     };
@@ -366,7 +368,7 @@ var ToolbarModule = /** @class */ (function () {
                 id: parent.element.id + '_toolbarArea', className: 'e-toolbar-area'
             }));
             var toolbarItems = { cssClass: 'e-image-upload', align: 'Left', type: 'Input',
-                tooltipText: this.l10n.getConstant('Browse'), template: new Uploader({ allowedExtensions: '.jpg, .jpeg, .png,.svg' }) };
+                tooltipText: this.l10n.getConstant('Browse'), template: new Uploader({ allowedExtensions: '.jpg, .jpeg, .png,.svg', multiple: false }) };
             if (isNullOrUndefined(this.defToolbarItems)) {
                 this.defToolbarItems = [];
             }
@@ -383,6 +385,7 @@ var ToolbarModule = /** @class */ (function () {
                     tooltipText: this.l10n.getConstant('Browse'),
                     template: new Uploader({
                         allowedExtensions: '.jpg, .jpeg, .png,.svg',
+                        multiple: false,
                         selected: function () {
                             if (!parent.disabled) {
                                 if (Browser.isDevice) {
@@ -456,7 +459,7 @@ var ToolbarModule = /** @class */ (function () {
         var parent = this.parent;
         if (parent.showQuickAccessToolbar) {
             var toolbarItems = { cssClass: 'e-image-upload', align: 'Left', type: 'Input',
-                tooltipText: this.l10n.getConstant('Browse'), template: new Uploader({ allowedExtensions: '.jpg, .jpeg, .png,.svg' }) };
+                tooltipText: this.l10n.getConstant('Browse'), template: new Uploader({ allowedExtensions: '.jpg, .jpeg, .png,.svg', multiple: false }) };
             if (isNullOrUndefined(this.defToolbarItems)) {
                 this.defToolbarItems = [];
             }
@@ -543,7 +546,7 @@ var ToolbarModule = /** @class */ (function () {
         var parent = this.parent;
         var toolbarItems = [];
         if (!isOkBtn || isResize) {
-            toolbarItems.push({ id: parent.element.id + '_upload', cssClass: 'e-image-upload', align: 'Left', type: 'Input', template: new Uploader({ allowedExtensions: '.jpg, .jpeg, .png,.svg' }) });
+            toolbarItems.push({ id: parent.element.id + '_upload', cssClass: 'e-image-upload', align: 'Left', type: 'Input', template: new Uploader({ allowedExtensions: '.jpg, .jpeg, .png,.svg', multiple: false }) });
             toolbarItems.push({ visible: false, cssClass: 'e-image-position e-btn e-flat', tooltipText: this.l10n.getConstant('Browse'), align: 'Left' });
         }
         if (parent.allowUndoRedo && !isResize) {
@@ -969,7 +972,13 @@ var ToolbarModule = /** @class */ (function () {
         }
     };
     ToolbarModule.prototype.fileSelect = function (inputElement, args) {
-        this.parent.notify('draw', { prop: 'fileSelect', value: { inputElement: inputElement, args: args } });
+        var type = inputElement.files[0].type.split('/')[1];
+        if (type === 'png' || type === 'jpg' || type === 'jpeg' || type === 'svg') {
+            this.parent.notify('draw', { prop: 'fileSelect', value: { inputElement: inputElement, args: args } });
+        }
+        else {
+            this.parent.showDialogPopup();
+        }
     };
     ToolbarModule.prototype.renderAnnotationBtn = function (isContextualToolbar) {
         var _this = this;
@@ -1375,7 +1384,9 @@ var ToolbarModule = /** @class */ (function () {
                     }
                 }
                 if (document.getElementById(parent.element.id + '_cropBtn')) {
-                    parent.select(document.getElementById(parent.element.id + '_cropBtn').textContent.toLowerCase());
+                    parent.notify('draw', { prop: 'select', onPropertyChange: false,
+                        value: { type: document.getElementById(parent.element.id + '_cropBtn').textContent.toLowerCase(),
+                            startX: null, startY: null, width: null, height: null } });
                 }
             }
         });
@@ -3291,7 +3302,8 @@ var ToolbarModule = /** @class */ (function () {
         var text = args.item.id;
         this.currentToolbar = 'crop';
         parent.currSelectionPoint = null;
-        parent.select(text);
+        parent.notify('draw', { prop: 'select', onPropertyChange: false,
+            value: { type: text, startX: null, startY: null, width: null, height: null } });
         this.enableDisableTbrBtn();
         parent.notify('transform', { prop: 'disableZoomOutBtn', value: { isZoomOut: true } });
     };