@syncfusion/ej2-image-editor 20.3.48 → 20.3.50

package/dist/global/index.d.ts

@@ -1,6 +1,6 @@
 /*!
 *  filename: index.d.ts
-*  version : 20.3.48
+*  version : 20.3.50
 *  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.3.47",
+  "_id": "@syncfusion/ej2-image-editor@20.3.48",
   "_inBundle": false,
-  "_integrity": "sha512-Q62yo/sQO5+omyPnSjFaUTf9jOEPjzBURoZEtIr2TZKIgSumJhofZcN80i/Lq8cJOGAQixaIANZIcZV2tn2Wng==",
+  "_integrity": "sha512-wiorIhe8Z3pnWog2Pj0FgkCtduL1PYYRBCGoMOlpMKfFObs06BZvKHOuoW84LvK84Z6DluTEExS6iEGap4ByiQ==",
   "_location": "/@syncfusion/ej2-image-editor",
   "_phantomChildren": {},
   "_requested": {
@@ -23,8 +23,8 @@
     "/@syncfusion/ej2-react-image-editor",
     "/@syncfusion/ej2-vue-image-editor"
   ],
-  "_resolved": "http://nexus.syncfusion.com/repository/ej2-hotfix-new/@syncfusion/ej2-image-editor/-/ej2-image-editor-20.3.47.tgz",
-  "_shasum": "92f90ea59cb20e1aa045767d9da0ff40b10f584f",
+  "_resolved": "http://nexus.syncfusion.com/repository/ej2-hotfix-new/@syncfusion/ej2-image-editor/-/ej2-image-editor-20.3.48.tgz",
+  "_shasum": "00e57bec580b475a0afdee744e70de4dfd3c8053",
   "_spec": "@syncfusion/ej2-image-editor@*",
   "_where": "/jenkins/workspace/automation_release_19.1.0.1-ZPMUBNQ6AUYH6YGEFBPVYMEQLRRW2SLD4XCZ6GATNZJFYJ3RIAOA/packages/included",
   "author": {
@@ -32,11 +32,11 @@
   },
   "bundleDependencies": false,
   "dependencies": {
-    "@syncfusion/ej2-base": "~20.3.48",
-    "@syncfusion/ej2-buttons": "~20.3.48",
-    "@syncfusion/ej2-inputs": "~20.3.47",
-    "@syncfusion/ej2-navigations": "~20.3.48",
-    "@syncfusion/ej2-popups": "~20.3.48",
+    "@syncfusion/ej2-base": "~20.3.50",
+    "@syncfusion/ej2-buttons": "~20.3.50",
+    "@syncfusion/ej2-inputs": "~20.3.50",
+    "@syncfusion/ej2-navigations": "~20.3.50",
+    "@syncfusion/ej2-popups": "~20.3.50",
     "@syncfusion/ej2-splitbuttons": "~20.3.47"
   },
   "deprecated": false,
@@ -69,6 +69,6 @@
     "url": "https://github.com/syncfusion/ej2-javascript-ui-controls/tree/master/controls/imageeditor"
   },
   "typings": "index.d.ts",
-  "version": "20.3.48",
+  "version": "20.3.50",
   "sideEffects": false
 }

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

@@ -105,6 +105,99 @@ export interface ImageEditorModel {
      */
     width?: string;
 
+    /**
+     * Gets or sets the background color of the component.
+     * The background color of the component that accepts hex value, rgb and text (like 'red'). The default value is ''.
+     *
+     * @default ''
+     * @private
+     */
+    backgroundColor?: string;
+
+    /**
+     * Gets or sets the background image for the component.
+     * An image that used to fill the background of the component. The default value is ''.
+     *
+     * @default ''
+     * @private
+     */
+    backgroundImage?: string;
+
+    /**
+     * Gets or sets whether to prevent the interaction in signature component.
+     * True, if the signature component is read only state where the user interaction is prevented. The default value is false.
+     *
+     * @default false
+     * @private
+     */
+    isReadOnly?: boolean;
+
+    /**
+     * Gets or sets whether to save the signature along with Background Color and background Image while saving.
+     * True, if signature component to save with background. The default value is true.
+     *
+     * @default true
+     * @private
+     */
+    saveWithBackground?: boolean;
+
+    /**
+     * Gets or sets the stroke color of the signature.
+     * The color of the signature stroke that accepts hex value, rgb and text (like 'red'). The default value is "#000000".
+     *
+     * @default '#000000'
+     * @private
+     */
+    strokeColor?: string;
+
+    /**
+     * Gets or sets the minimum stroke width for signature.
+     * The signature component calculates stroke width based on Velocity, MinStrokeWidth and MaxStrokeWidth.
+     * The minimum width of stroke. The default value is 0.5.
+     *
+     * @default 0.5
+     * @private
+     */
+    minStrokeWidth?: number;
+
+    /**
+     * Gets or sets the maximum stroke width for signature.
+     * The signature component calculates stroke width based on Velocity, MinStrokeWidth and MaxStrokeWidth.
+     * The maximum width of stroke. The default value is 2.0.
+     *
+     * @default 2
+     * @private
+     */
+    maxStrokeWidth?: number;
+
+    /**
+     * Gets or sets the velocity to calculate the stroke thickness based on the pressure of the contact on the digitizer surface.
+     * The Signature component calculates stroke thickness based on Velocity, MinStrokeWidth and MaxStrokeWidth.
+     * The default value is 0.7.
+     *
+     * @default 0.7
+     * @private
+     */
+    velocity?: number;
+
+    /**
+     * Specifies the Signature in RTL mode that displays the content in the right-to-left direction.
+     *
+     * @default false
+     * @private
+     */
+    enableRtl?: boolean;
+
+    /**
+     * Gets or sets whether to persist component's state between page reloads.
+     * True, if the component's state persistence is enabled. The default value is false.
+     * Component's property will be stored in browser local storage to persist component's state when page reloads.
+     *
+     * @default false
+     * @private
+     */
+    enablePersistence?: boolean;
+
     /**
      * Triggers before an image is saved.
      *

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

@@ -183,6 +183,95 @@ export declare class ImageEditor extends SignatureBase implements INotifyPropert
      * default 100%
      */
     width: string;
+    /**
+     * Gets or sets the background color of the component.
+     * The background color of the component that accepts hex value, rgb and text (like 'red'). The default value is ''.
+     *
+     * @default ''
+     * @private
+     */
+    backgroundColor: string;
+    /**
+     * Gets or sets the background image for the component.
+     * An image that used to fill the background of the component. The default value is ''.
+     *
+     * @default ''
+     * @private
+     */
+    backgroundImage: string;
+    /**
+     * Gets or sets whether to prevent the interaction in signature component.
+     * True, if the signature component is read only state where the user interaction is prevented. The default value is false.
+     *
+     * @default false
+     * @private
+     */
+    isReadOnly: boolean;
+    /**
+     * Gets or sets whether to save the signature along with Background Color and background Image while saving.
+     * True, if signature component to save with background. The default value is true.
+     *
+     * @default true
+     * @private
+     */
+    saveWithBackground: boolean;
+    /**
+     * Gets or sets the stroke color of the signature.
+     * The color of the signature stroke that accepts hex value, rgb and text (like 'red'). The default value is "#000000".
+     *
+     * @default '#000000'
+     * @private
+     */
+    strokeColor: string;
+    /**
+     * Gets or sets the minimum stroke width for signature.
+     * The signature component calculates stroke width based on Velocity, MinStrokeWidth and MaxStrokeWidth.
+     * The minimum width of stroke. The default value is 0.5.
+     *
+     * @default 0.5
+     * @private
+     */
+    minStrokeWidth: number;
+    /**
+     * Gets or sets the maximum stroke width for signature.
+     * The signature component calculates stroke width based on Velocity, MinStrokeWidth and MaxStrokeWidth.
+     * The maximum width of stroke. The default value is 2.0.
+     *
+     * @default 2
+     * @private
+     */
+    maxStrokeWidth: number;
+    /**
+     * Gets or sets the velocity to calculate the stroke thickness based on the pressure of the contact on the digitizer surface.
+     * The Signature component calculates stroke thickness based on Velocity, MinStrokeWidth and MaxStrokeWidth.
+     * The default value is 0.7.
+     *
+     * @default 0.7
+     * @private
+     */
+    velocity: number;
+    /**
+     * Specifies the Signature in RTL mode that displays the content in the right-to-left direction.
+     *
+     * @default false
+     * @private
+     */
+    enableRtl: boolean;
+    /**
+     * Gets or sets whether to persist component's state between page reloads.
+     * True, if the component's state persistence is enabled. The default value is false.
+     * Component's property will be stored in browser local storage to persist component's state when page reloads.
+     *
+     * @default false
+     * @private
+     */
+    enablePersistence: boolean;
+    /**
+     * Gets or sets the last signature url to maintain the persist state.
+     *
+     * @private
+     */
+    signatureValue: string;
     /**
      * Triggers before an image is saved.
      *
@@ -733,6 +822,101 @@ export declare class ImageEditor extends SignatureBase implements INotifyPropert
      * @returns {void}.
      */
     update(): void;
+    /**
+     * To check whether the undo collection is empty or not.
+     *
+     * @returns {boolean}.
+     * @private
+     */
+    canUndo(): boolean;
+    /**
+     * To check whether the redo collection is empty or not.
+     *
+     * @returns {boolean}.
+     * @private
+     */
+    canRedo(): boolean;
+    /**
+     * Erases all the signature strokes signed by user.
+     *
+     * @returns {void}.
+     * @private
+     */
+    clear(): void;
+    /**
+     * To draw the signature based on the given text, with the font family and font size.
+     *
+     * @param {string} text - specify text to be drawn as signature.
+     * @param {string} fontFamily - specify font family of a signature.
+     * @param {number} fontSize - specify font size of a signature.
+     *
+     * @returns {void}.
+     * @private
+     */
+    draw(text: string, fontFamily?: string, fontSize?: number): void;
+    /**
+     * To get the signature as Blob.
+     *
+     * @param {string} url - specify the url/base 64 string to get blob of the signature.
+     * @returns {Blob}.
+     * @private
+     */
+    getBlob(url: string): Blob;
+    /**
+     * To check whether the signature is empty or not.
+     *
+     * @returns {boolean}.
+     * @private
+     */
+    isEmpty(): boolean;
+    /**
+     * To load the signature with the given base 64 string, height and width.
+     *
+     * @param {string} signature - specify the url/base 64 string to be drawn as signature.
+     * @param {number} width - specify the width of the loaded signature image.
+     * @param {number} height - specify the height of the loaded signature image.
+     * @returns {void}.
+     * @private
+     */
+    load(signature: string, width?: number, height?: number): void;
+    /**
+     * Undo the last user action.
+     *
+     * @returns {void}.
+     * @private
+     */
+    undo(): void;
+    /**
+     * Redo the last user action.
+     *
+     * @returns {void}.
+     * @private
+     */
+    redo(): void;
+    /**
+     * To save the signature with the given file type and file name.
+     *
+     * @param {SignatureFileType} type - specify type of the file to be saved a signature.
+     * @param {string} fileName - specify name of the file to be saved a signature.
+     *
+     * @returns {void}.
+     * @private
+     */
+    save(type?: FileType, fileName?: string): void;
+    /**
+     * To save the signature as Blob.
+     *
+     * @returns {Blob}.
+     * @private
+     */
+    saveAsBlob(): Blob;
+    /**
+     * Returns the persistence data for component.
+     *
+     * @returns any.
+     * @private
+     */
+    getLocalData(): any;
 }
 /**
  * Defines the Image Editor file type.

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

@@ -2141,12 +2141,21 @@ var ImageEditor = /** @class */ (function (_super) {
             wrapperWidth = this.element.clientWidth;
         }
         var maxDimension = this.calcMaxDimension(this.baseImg.width, this.baseImg.height);
+        var toolbarHeight = 0;
+        if (!isNullOrUndefined(this.toolbarTemplate) && !isNullOrUndefined(document.querySelector('.e-toolbar'))) {
+            toolbarHeight = document.querySelector('.e-toolbar').clientHeight;
+            maxDimension.width -= toolbarHeight;
+            maxDimension.height -= toolbarHeight;
+        }
         this.lowerContext.clearRect(0, 0, this.lowerCanvas.width, this.lowerCanvas.height);
         this.lowerCanvas.width = this.upperCanvas.width = this.inMemoryCanvas.width = this.baseImg.width;
         this.lowerCanvas.height = this.upperCanvas.height = this.inMemoryCanvas.height = this.baseImg.height;
         this.lowerCanvas.style.maxWidth = this.upperCanvas.style.maxWidth = maxDimension.width + 'px';
         this.lowerCanvas.style.maxHeight = this.upperCanvas.style.maxHeight = maxDimension.height + 'px';
         this.lowerCanvas.style.left = this.upperCanvas.style.left = (wrapperWidth - maxDimension.width) / 2 + 1 + 'px';
+        if (!isNullOrUndefined(this.toolbarTemplate)) {
+            this.lowerCanvas.style.left = parseFloat(this.lowerCanvas.style.left) + (toolbarHeight / 2) + 'px';
+        }
         if (canvasWrapper) {
             this.lowerCanvas.style.top = this.upperCanvas.style.top = (parseFloat(canvasWrapper.style.height) - maxDimension.height - 1) / 2 + 'px';
         }
@@ -6776,7 +6785,9 @@ var ImageEditor = /** @class */ (function (_super) {
                 (isNullOrUndefined(document.getElementById(this.element.id + '_toolbar')))) {
                 this.toolbarHeight = 0;
             }
-            this.update();
+            if (isNullOrUndefined(this.toolbarTemplate)) {
+                this.update();
+            }
             var type = typeof (data);
             if (type === 'string') {
                 this.imageOnLoad(data);
@@ -7244,7 +7255,7 @@ var ImageEditor = /** @class */ (function (_super) {
             }
             this.currObjType.isCustomCrop = false;
             var start = { x: x, y: y };
-            this.drawShape('circle', strokeWidth, strokeColor, fillColor, start, radiusX, radiusY);
+            this.drawShape('ellipse', strokeWidth, strokeColor, fillColor, start, radiusX, radiusY);
         }
         return isEllipse;
     };
@@ -7488,6 +7499,125 @@ var ImageEditor = /** @class */ (function (_super) {
         this.lowerContext.clearRect(0, 0, this.lowerCanvas.width, this.lowerCanvas.height);
         this.upperContext.clearRect(0, 0, this.upperCanvas.width, this.upperCanvas.height);
     };
+    /**
+     * To check whether the undo collection is empty or not.
+     *
+     * @returns {boolean}.
+     * @private
+     */
+    ImageEditor.prototype.canUndo = function () {
+        return _super.prototype.canUndo.call(this);
+    };
+    /**
+     * To check whether the redo collection is empty or not.
+     *
+     * @returns {boolean}.
+     * @private
+     */
+    ImageEditor.prototype.canRedo = function () {
+        return _super.prototype.canRedo.call(this);
+    };
+    /**
+     * Erases all the signature strokes signed by user.
+     *
+     * @returns {void}.
+     * @private
+     */
+    ImageEditor.prototype.clear = function () {
+        _super.prototype.clear.call(this);
+    };
+    /**
+     * To draw the signature based on the given text, with the font family and font size.
+     *
+     * @param {string} text - specify text to be drawn as signature.
+     * @param {string} fontFamily - specify font family of a signature.
+     * @param {number} fontSize - specify font size of a signature.
+     *
+     * @returns {void}.
+     * @private
+     */
+    ImageEditor.prototype.draw = function (text, fontFamily, fontSize) {
+        _super.prototype.draw.call(this, text, fontFamily, fontSize);
+    };
+    /**
+     * To get the signature as Blob.
+     *
+     * @param {string} url - specify the url/base 64 string to get blob of the signature.
+     * @returns {Blob}.
+     * @private
+     */
+    ImageEditor.prototype.getBlob = function (url) {
+        return _super.prototype.getBlob.call(this, url);
+    };
+    /**
+     * To check whether the signature is empty or not.
+     *
+     * @returns {boolean}.
+     * @private
+     */
+    ImageEditor.prototype.isEmpty = function () {
+        return _super.prototype.isEmpty.call(this);
+    };
+    /**
+     * To load the signature with the given base 64 string, height and width.
+     *
+     * @param {string} signature - specify the url/base 64 string to be drawn as signature.
+     * @param {number} width - specify the width of the loaded signature image.
+     * @param {number} height - specify the height of the loaded signature image.
+     * @returns {void}.
+     * @private
+     */
+    ImageEditor.prototype.load = function (signature, width, height) {
+        _super.prototype.load.call(this, signature, width, height);
+    };
+    /**
+     * Undo the last user action.
+     *
+     * @returns {void}.
+     * @private
+     */
+    ImageEditor.prototype.undo = function () {
+        _super.prototype.undo.call(this);
+    };
+    /**
+     * Redo the last user action.
+     *
+     * @returns {void}.
+     * @private
+     */
+    ImageEditor.prototype.redo = function () {
+        _super.prototype.redo.call(this);
+    };
+    /**
+     * To save the signature with the given file type and file name.
+     *
+     * @param {SignatureFileType} type - specify type of the file to be saved a signature.
+     * @param {string} fileName - specify name of the file to be saved a signature.
+     *
+     * @returns {void}.
+     * @private
+     */
+    ImageEditor.prototype.save = function (type, fileName) {
+        _super.prototype.save.call(this, type, fileName);
+    };
+    /**
+     * To save the signature as Blob.
+     *
+     * @returns {Blob}.
+     * @private
+     */
+    ImageEditor.prototype.saveAsBlob = function () {
+        return _super.prototype.saveAsBlob.call(this);
+    };
+    /**
+     * Returns the persistence data for component.
+     *
+     * @returns any.
+     * @private
+     */
+    ImageEditor.prototype.getLocalData = function () {
+        return _super.prototype.getLocalData.call(this);
+    };
     var ImageEditor_1;
     __decorate([
         Property('')
@@ -7510,6 +7640,36 @@ var ImageEditor = /** @class */ (function (_super) {
     __decorate([
         Property('100%')
     ], ImageEditor.prototype, "width", void 0);
+    __decorate([
+        Property('')
+    ], ImageEditor.prototype, "backgroundColor", void 0);
+    __decorate([
+        Property('')
+    ], ImageEditor.prototype, "backgroundImage", void 0);
+    __decorate([
+        Property(false)
+    ], ImageEditor.prototype, "isReadOnly", void 0);
+    __decorate([
+        Property(true)
+    ], ImageEditor.prototype, "saveWithBackground", void 0);
+    __decorate([
+        Property('#000000')
+    ], ImageEditor.prototype, "strokeColor", void 0);
+    __decorate([
+        Property(0.5)
+    ], ImageEditor.prototype, "minStrokeWidth", void 0);
+    __decorate([
+        Property(2)
+    ], ImageEditor.prototype, "maxStrokeWidth", void 0);
+    __decorate([
+        Property(0.7)
+    ], ImageEditor.prototype, "velocity", void 0);
+    __decorate([
+        Property(false)
+    ], ImageEditor.prototype, "enableRtl", void 0);
+    __decorate([
+        Property(false)
+    ], ImageEditor.prototype, "enablePersistence", void 0);
     __decorate([
         Event()
     ], ImageEditor.prototype, "beforeSave", void 0);