@syncfusion/ej2-image-editor 20.4.38 → 20.4.42

package/dist/global/index.d.ts

@@ -1,6 +1,6 @@
 /*!
 *  filename: index.d.ts
-*  version : 20.4.38
+*  version : 20.4.42
 *  Copyright Syncfusion Inc. 2001 - 2020. 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@20.5.2",
+  "_id": "@syncfusion/ej2-image-editor@20.4.40",
   "_inBundle": false,
-  "_integrity": "sha512-5ifN1vR2eDXYloC2I91m7z6BGK/5hOKQxX9FjA2AGnu/EMCEuRd46k/G6v97y9G2tFfK06NzJxTBftRzJoVjbQ==",
+  "_integrity": "sha512-8VN4D9ZIGSJSw4OWQWRwe4yoj2O5UNx/hjKRYAVAGTJlKyyEnEAktmpQ6E/FVVdi7GrCW7HYvLEpp5BfhcUITg==",
   "_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-release/@syncfusion/ej2-image-editor/-/ej2-image-editor-20.5.2.tgz",
-  "_shasum": "52c3e2411c696fa6b06398a8651f55b6eb18ef8c",
+  "_resolved": "https://nexus.syncfusion.com/repository/ej2-hotfix-new/@syncfusion/ej2-image-editor/-/ej2-image-editor-20.4.40.tgz",
+  "_shasum": "70dac911346a58ae94139bb69f71ea927f5151f4",
   "_spec": "@syncfusion/ej2-image-editor@*",
   "_where": "/jenkins/workspace/ease-automation_release_19.1.0.1/packages/included",
   "author": {
@@ -32,12 +32,12 @@
   },
   "bundleDependencies": false,
   "dependencies": {
-    "@syncfusion/ej2-base": "~20.4.38",
-    "@syncfusion/ej2-buttons": "~20.4.38",
-    "@syncfusion/ej2-inputs": "~20.4.38",
-    "@syncfusion/ej2-navigations": "~20.4.38",
-    "@syncfusion/ej2-popups": "~20.4.38",
-    "@syncfusion/ej2-splitbuttons": "~20.4.38"
+    "@syncfusion/ej2-base": "~20.4.42",
+    "@syncfusion/ej2-buttons": "~20.4.42",
+    "@syncfusion/ej2-inputs": "~20.4.42",
+    "@syncfusion/ej2-navigations": "~20.4.42",
+    "@syncfusion/ej2-popups": "~20.4.42",
+    "@syncfusion/ej2-splitbuttons": "~20.4.42"
   },
   "deprecated": false,
   "description": "Essential JS 2 ImageEditor",
@@ -67,6 +67,7 @@
     "url": "https://github.com/syncfusion/ej2-javascript-ui-controls/tree/master/controls/imageeditor"
   },
   "typings": "index.d.ts",
-  "version": "20.4.38",
-  "sideEffects": false
+  "version": "20.4.42",
+  "sideEffects": false,
+  "homepage": "https://www.syncfusion.com/javascript-ui-controls"
 }

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

@@ -1,5 +1,5 @@
-import { NotifyPropertyChanges, INotifyPropertyChanged, Property, addClass, removeClass, extend } from '@syncfusion/ej2-base';
-import {ImageFinetuneValue,Theme,ImageEditorCommands,SaveEventArgs,BeforeSaveEventArgs,ZoomEventArgs,PanEventArgs,CropEventArgs,RotateEventArgs,FlipEventArgs,ShapeChangeEventArgs,ToolbarEventArgs,ImageFilterEventArgs,FinetuneEventArgs} from "./image-editor";
+import { NotifyPropertyChanges, INotifyPropertyChanged, Property, addClass, removeClass, extend } from '@syncfusion/ej2-base';
+import {ImageFinetuneValue,Theme,ImageEditorCommands,SaveEventArgs,BeforeSaveEventArgs,ZoomEventArgs,PanEventArgs,CropEventArgs,RotateEventArgs,FlipEventArgs,ShapeChangeEventArgs,FileOpenEventArgs,ToolbarEventArgs,ImageFilterEventArgs,FinetuneEventArgs} from "./image-editor";
 
 /**
  * Interface for a class FinetuneSettings
@@ -8,42 +8,49 @@ export interface FinetuneSettingsModel {
 
     /**
      * Specifies the brightness level of image.
+     *
      * @default null
      */
     brightness?: ImageFinetuneValue;
 
     /**
      * Specifies the contrast level image.
+     *
      * @default null
      */
     contrast?: ImageFinetuneValue;
 
     /**
      * Specifies the hue level image.
+     *
      * @default null
      */
     hue?: ImageFinetuneValue;
 
     /**
      * Specifies the saturation level image.
+     *
      * @default null
      */
     saturation?: ImageFinetuneValue;
 
     /**
      * Specifies the exposure level image.
+     *
      * @default null
      */
     exposure?: ImageFinetuneValue;
 
     /**
      * Specifies the opacity level image.
+     *
      * @default null
      */
     opacity?: ImageFinetuneValue;
 
     /**
      * Specifies the blur level image.
+     *
      * @default null
      */
     blur?: ImageFinetuneValue;
@@ -57,6 +64,7 @@ export interface ImageEditorModel {
 
     /**
      * Defines class/multiple classes separated by a space for customizing Image Editor UI.
+     *
      * @default ''
      ```html
      * <div id='imageeditor'></div>
@@ -72,12 +80,14 @@ export interface ImageEditorModel {
 
     /**
      * Specifies whether the Image Editor is disabled.
+     *
      * @default false
      */
     disabled?: boolean;
 
     /**
      * Specifies the height of the Image Editor.
+     *
      * @default '100%'
      */
     height?: string;
@@ -150,6 +160,7 @@ export interface ImageEditorModel {
 
     /**
      * Specifies the width of the Image Editor.
+     *
      * @default '100%'
      */
     width?: string;
@@ -335,7 +346,7 @@ export interface ImageEditorModel {
      *
      * @event fileOpened
      */
-    fileOpened?: EmitType<OpenEventArgs>
+    fileOpened?: EmitType<FileOpenEventArgs>
 
     /**
      * Triggers once an image is saved.

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

@@ -2,7 +2,6 @@ import { INotifyPropertyChanged } from '@syncfusion/ej2-base';
 import { EmitType } from '@syncfusion/ej2-base';
 import { SignatureBase } from '@syncfusion/ej2-inputs';
 import { ItemModel, ClickEventArgs } from '@syncfusion/ej2-navigations';
-import { OpenEventArgs } from '@syncfusion/ej2-popups';
 import { ChildProperty } from '@syncfusion/ej2-base';
 import { ImageEditorModel, FinetuneSettingsModel } from './image-editor-model';
 /**
@@ -10,17 +9,20 @@ import { ImageEditorModel, FinetuneSettingsModel } from './image-editor-model';
  */
 export interface ImageFinetuneValue {
     /**
-    * Specifies the minimum value of finetune option.
-    * @default null
-    */
+     * Specifies the minimum value of finetune option.
+     *
+     * @default null
+     */
     min: number;
     /**
      * Specifies the maximum value of finetune option.
+     *
      * @default null
      */
     max: number;
     /**
      * Specifies the default value of finetune option.
+     *
      * @default null
      */
     defaultValue: number;
@@ -31,36 +33,43 @@ export interface ImageFinetuneValue {
 export declare class FinetuneSettings extends ChildProperty<FinetuneSettings> {
     /**
      * Specifies the brightness level of image.
+     *
      * @default null
      */
     brightness: ImageFinetuneValue;
     /**
      * Specifies the contrast level image.
+     *
      * @default null
      */
     contrast: ImageFinetuneValue;
     /**
      * Specifies the hue level image.
+     *
      * @default null
      */
     hue: ImageFinetuneValue;
     /**
      * Specifies the saturation level image.
+     *
      * @default null
      */
     saturation: ImageFinetuneValue;
     /**
-      * Specifies the exposure level image.
-      * @default null
-      */
+     * Specifies the exposure level image.
+     *
+     * @default null
+     */
     exposure: ImageFinetuneValue;
     /**
      * Specifies the opacity level image.
+     *
      * @default null
      */
     opacity: ImageFinetuneValue;
     /**
      * Specifies the blur level image.
+     *
      * @default null
      */
     blur: ImageFinetuneValue;
@@ -163,8 +172,11 @@ export declare class ImageEditor extends SignatureBase implements INotifyPropert
     private tempBWFilter;
     private isBrightnessAdjusted;
     private isInitialLoading;
+    private imageFileName;
+    private imageFileType;
     /**
      * Defines class/multiple classes separated by a space for customizing Image Editor UI.
+     *
      * @default ''
      ```html
      * <div id='imageeditor'></div>
@@ -179,11 +191,13 @@ export declare class ImageEditor extends SignatureBase implements INotifyPropert
     cssClass: string;
     /**
      * Specifies whether the Image Editor is disabled.
+     *
      * @default false
      */
     disabled: boolean;
     /**
      * Specifies the height of the Image Editor.
+     *
      * @default '100%'
      */
     height: string;
@@ -251,6 +265,7 @@ export declare class ImageEditor extends SignatureBase implements INotifyPropert
     toolbarTemplate: string;
     /**
      * Specifies the width of the Image Editor.
+     *
      * @default '100%'
      */
     width: string;
@@ -414,7 +429,7 @@ export declare class ImageEditor extends SignatureBase implements INotifyPropert
      *
      * @event fileOpened
      */
-    fileOpened: EmitType<OpenEventArgs>;
+    fileOpened: EmitType<FileOpenEventArgs>;
     /**
      * Triggers once an image is saved.
      *
@@ -1212,6 +1227,19 @@ export interface ToolbarEventArgs {
      */
     toolbarItems?: (string | ItemModel)[];
 }
+/**
+ * Interface for saving the canvas as image.
+ */
+export interface FileOpenEventArgs {
+    /**
+     * Specifies the file name for an image.
+     */
+    fileName: string;
+    /**
+     * Returns the file type for an image.
+     */
+    fileType: FileType;
+}
 /**
  * Interface for saving the canvas as image.
  */

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

@@ -148,6 +148,7 @@ var ImageEditor = /** @class */ (function (_super) {
         _this.tempBWFilter = false;
         _this.isBrightnessAdjusted = false;
         _this.isInitialLoading = false;
+        _this.imageFileName = '';
         return _this;
     }
     ImageEditor_1 = ImageEditor;
@@ -3347,6 +3348,7 @@ var ImageEditor = /** @class */ (function (_super) {
         ctx.drawImage(this.inMemoryCanvas, 0, 0, 300, 150);
     };
     ImageEditor.prototype.updateCanvas = function () {
+        var fileOpened = { fileName: this.imageFileName, fileType: this.imageFileType };
         this.lastX = this.baseImg.width / 2;
         this.lastY = this.baseImg.height / 2;
         var wrapperWidth;
@@ -3411,7 +3413,7 @@ var ImageEditor = /** @class */ (function (_super) {
         if (this.disabled) {
             this.element.setAttribute('class', 'e-disabled');
         }
-        this.trigger('fileOpened');
+        this.trigger('fileOpened', fileOpened);
     };
     ImageEditor.prototype.imageOnLoad = function (src) {
         var _this = this;
@@ -3615,6 +3617,18 @@ var ImageEditor = /** @class */ (function (_super) {
         }
     };
     ImageEditor.prototype.fileSelect = function (inputElement, args) {
+        this.imageFileName = inputElement.value.split('\\')[inputElement.value.split('\\').length - 1];
+        this.imageFileName = this.imageFileName.split('.')[0];
+        var fileType = inputElement.value.split('.');
+        if (fileType[fileType.length - 1].toLowerCase() === 'jpg' || fileType[fileType.length - 1].toLowerCase() === 'jpeg') {
+            this.imageFileType = 'Jpeg';
+        }
+        else if (fileType[fileType.length - 1].toLowerCase() === 'png') {
+            this.imageFileType = 'Png';
+        }
+        else if (fileType[fileType.length - 1].toLowerCase() === 'svg') {
+            this.imageFileType = 'Svg';
+        }
         showSpinner(this.element);
         this.element.style.opacity = '0.5';
         /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
@@ -8379,7 +8393,6 @@ var ImageEditor = /** @class */ (function (_super) {
             var heightRatio = void 0;
             var imgData = void 0;
             var zoomedRotate = false;
-            var factor = this.factor;
             if (this.factor === 1) {
                 imgData = this.lowerContext.getImageData(0, 0, this.lowerCanvas.width, this.lowerCanvas.height);
                 widthRatio = this.lowerCanvas.width / parseInt(this.lowerCanvas.style.maxWidth, 10);
@@ -8681,9 +8694,23 @@ var ImageEditor = /** @class */ (function (_super) {
             this.imgDataColl = [];
             var type = typeof (data);
             if (type === 'string') {
+                var fileName = data.split('.');
+                if (fileName[fileName.length - 1].toLowerCase() === 'jpg' || fileName[fileName.length - 1].toLowerCase() === 'jpeg') {
+                    this.imageFileType = 'Jpeg';
+                }
+                else if (fileName[fileName.length - 1].toLowerCase() === 'png') {
+                    this.imageFileType = 'Png';
+                }
+                else if (fileName[fileName.length - 1].toLowerCase() === 'svg') {
+                    this.imageFileType = 'Svg';
+                }
+                fileName = fileName[fileName.length - 2].split('/');
+                this.imageFileName = fileName[fileName.length - 1];
                 this.imageOnLoad(data);
             }
             else {
+                this.imageFileName = 'ImageEditor';
+                this.imageFileType = 'Jpeg';
                 var tempFilter = this.lowerContext.filter;
                 this.lowerCanvas = document.querySelector('#' + this.element.id + '_lowerCanvas');
                 this.upperCanvas = document.querySelector('#' + this.element.id + '_upperCanvas');
@@ -8787,6 +8814,8 @@ var ImageEditor = /** @class */ (function (_super) {
             this.tempObjColl = undefined;
             this.adjustmentLevel = { brightness: 0, contrast: 0, hue: 0, opacity: 100, saturation: 0, blur: 0, exposure: 0, sharpen: false, bw: false };
             this.tempAdjustmentLevel = { brightness: 0, contrast: 0, hue: 0, opacity: 100, saturation: 0, blur: 0, exposure: 0, sharpen: false, bw: false };
+            this.imageFileName = '';
+            this.imageFileType = undefined;
             this.canvasFilter = this.currentFilter = this.tempAdjustmentValue = '';
             this.lowerContext.filter = this.initialAdjustmentValue = this.adjustmentValue = 'brightness(' + 1 + ') ' + 'contrast(' + 100
                 + '%) ' + 'hue-rotate(' + 0 + 'deg) ' +
@@ -8908,22 +8937,23 @@ var ImageEditor = /** @class */ (function (_super) {
             }
             type = type ? type : 'Png';
             this.redrawActObj();
-            var beforeSave = { cancel: false, fileName: fileName ? fileName : 'ImageEditor', fileType: type };
-            var saved_1 = { fileName: fileName ? fileName : 'ImageEditor', fileType: type };
+            fileName = fileName ? fileName : this.imageFileName;
+            var beforeSave = { cancel: false, fileName: fileName, fileType: type };
+            var saved_1 = { fileName: fileName ? fileName : this.imageFileName, fileType: type };
             this.trigger('beforeSave', beforeSave, function (observableSaveArgs) {
                 if (!observableSaveArgs.cancel) {
                     _this.currObjType.isSave = true;
                     fileName = observableSaveArgs.fileName ? observableSaveArgs.fileName : fileName;
                     if (type.toLowerCase() === 'svg') {
-                        fileName = fileName || 'ImageEditor';
+                        fileName = fileName || _this.imageFileName;
                         _this.toSVGImg(fileName);
                     }
                     else if (type.toLowerCase() === 'jpeg') {
-                        fileName = fileName || 'ImageEditor';
+                        fileName = fileName || _this.imageFileName;
                         _this.toBlobFn(fileName, type.toLowerCase());
                     }
                     else {
-                        fileName = fileName || 'ImageEditor';
+                        fileName = fileName || _this.imageFileName;
                         _this.toBlobFn(fileName, type.toLowerCase());
                     }
                     _this.trigger('saved', saved_1);
@@ -9459,7 +9489,8 @@ var ImageEditor = /** @class */ (function (_super) {
             this.initialAdjustmentValue = 'brightness(1) contrast(100%) hue-rotate(0deg) saturate(100%) opacity(1) blur(0px) sepia(0%) grayscale(0%) invert(0%)';
         }
         this.lowerContext.filter = this.initialAdjustmentValue;
-        this.setFilter(filterOption.toString());
+        var filterValue = filterOption.split(' ');
+        this.setFilter(filterValue.join('').toLowerCase());
     };
     /**
      * To apply the filters to an image