@syncfusion/ej2-inputs - npm Package Compare versions

Comparing version 23.1.36 to 23.1.38

CHANGELOG.md

@@ -5,2 +5,11 @@ # Changelog
 
+### Signature
+
+#### Bug Fixes
+
+- `#I497270` - Provided the support to "GetSignature" public method returns base64 string with background.
+- `#F184324` - Provided the "refresh" public method to signature component.
+
+## 23.1.36 (2023-09-15)
+
 ### ColorPicker
@@ -7,0 +16,0 @@

dist/global/index.d.ts

 /*!
 *  filename: index.d.ts
-*  version : 23.1.36
-*  Copyright Syncfusion Inc. 2001 - 2020. All rights reserved.
+*  version : 23.1.38
+*  Copyright Syncfusion Inc. 2001 - 2023. All rights reserved.
 *  Use of this code is subject to the terms of our license.
@@ -6,0 +6,0 @@ *  A copy of the current license can be obtained at any time by e-mailing

package.json

 {
   "_from": "@syncfusion/ej2-inputs@*",
-  "_id": "@syncfusion/ej2-inputs@18.78.3",
+  "_id": "@syncfusion/ej2-inputs@23.1.36",
   "_inBundle": false,
-  "_integrity": "sha512-NiJqjeQrct8TL4pr9tzbaRtGslss9anV9SOE/wroStN7DpkumSvV6Dm4PkSBAoDDruSR8zWuz4Y2JbqNeibDAw==",
+  "_integrity": "sha512-mfmW28CjudkKZtFp6LdVzq4O9EjFaTNWAFLQpfxlswginy3b/mkepd9petZl9BbWRQXvL2+4Aosxp1LPVP9k6w==",
   "_location": "/@syncfusion/ej2-inputs",
@@ -42,4 +42,4 @@ "_phantomChildren": {},
   ],
-  "_resolved": "https://nexus.syncfusion.com/repository/ej2-release/@syncfusion/ej2-inputs/-/ej2-inputs-18.78.3.tgz",
-  "_shasum": "d8087ab30bd22ee3335d37a4025a319dc08ab373",
+  "_resolved": "https://nexus.syncfusion.com/repository/ej2-hotfix-new/@syncfusion/ej2-inputs/-/ej2-inputs-23.1.36.tgz",
+  "_shasum": "16d99e65e26f114b27d7425cb3eb8b40912521b6",
   "_spec": "@syncfusion/ej2-inputs@*",
@@ -52,5 +52,5 @@ "_where": "/jenkins/workspace/elease-automation_release_23.1.1/packages/included",
   "dependencies": {
-    "@syncfusion/ej2-base": "~23.1.36",
+    "@syncfusion/ej2-base": "~23.1.38",
     "@syncfusion/ej2-buttons": "~23.1.36",
-    "@syncfusion/ej2-popups": "~23.1.36",
+    "@syncfusion/ej2-popups": "~23.1.38",
     "@syncfusion/ej2-splitbuttons": "~23.1.36"
@@ -124,5 +124,5 @@ },
   "typings": "index.d.ts",
-  "version": "23.1.36",
+  "version": "23.1.38",
   "sideEffects": false,
   "homepage": "https://www.syncfusion.com/javascript-ui-controls"
 }

src/common/signature-base.d.ts

@@ -31,2 +31,4 @@ import { BlazorDotnetObject, Component } from '@syncfusion/ej2-base';
     private signRatioPointsColl;
+    private tempCanvas;
+    private tempContext;
     /**
@@ -130,6 +132,6 @@ * Gets or sets the background color of the component.
     private download;
+    private internalRefresh;
     /**
      * To refresh the signature.
      *
-     * @private
      * @returns {void}.
@@ -136,0 +138,0 @@ */

src/common/signature-base.js

@@ -88,3 +88,3 @@ var __extends = (this && this.__extends) || (function () {
     SignatureBase.prototype.setHTMLProperties = function () {
-        if (this.element.height === 150 && this.element.width === 300) {
+        if (this.element.height === 150 && this.element.width === 300 && this.element.offsetHeight !== 0 && this.element.offsetWidth !== 0) {
             this.element.height = this.element.offsetHeight;
@@ -94,3 +94,4 @@ this.element.width = this.element.offsetWidth;
         }
-        else if (this.element.height !== this.element.offsetHeight - 1 || this.element.width !== this.element.offsetWidth - 1) {
+        else if ((this.element.height !== this.element.offsetHeight - 1 || this.element.width !== this.element.offsetWidth - 1)
+            && this.element.offsetHeight !== 0 && this.element.offsetWidth !== 0) {
             this.element.height = this.element.offsetHeight;
@@ -101,5 +102,12 @@ this.element.width = this.element.offsetWidth;
         this.canvasContext.fillStyle = this.strokeColor;
+        this.tempCanvas = this.createElement('canvas', { className: 'e-' + this.getModuleName() + '-temp' });
+        this.tempContext = this.tempCanvas.getContext('2d');
+        this.tempCanvas.width = this.element.width;
+        this.tempCanvas.height = this.element.height;
         if (this.backgroundImage) {
             this.canvasContext.canvas.style.backgroundImage = 'url(' + this.backgroundImage + ')';
             this.canvasContext.canvas.style.backgroundRepeat = 'no-repeat';
+            if (this.saveWithBackground) {
+                this.setBackgroundImage(this.backgroundImage, 'temp');
+            }
         }
@@ -211,3 +219,3 @@ else if (this.backgroundColor) {
     SignatureBase.prototype.beginStroke = function (e) {
-        this.refresh();
+        this.internalRefresh();
         this.updateStroke(e);
@@ -463,3 +471,3 @@ };
     };
-    SignatureBase.prototype.setBackgroundImage = function (imageSrc) {
+    SignatureBase.prototype.setBackgroundImage = function (imageSrc, type) {
         // eslint-disable-next-line @typescript-eslint/no-this-alias
@@ -470,9 +478,17 @@ var proxy = this;
         imageObj.src = imageSrc;
-        imageObj.onload = function () {
-            proxy.canvasContext.globalCompositeOperation = 'source-over';
-            proxy.canvasContext.drawImage(imageObj, 0, 0, proxy.element.width, proxy.element.height);
-            proxy.updateSnapCollection();
-            proxy.saveBackground(true);
-        };
-        this.canvasContext.clearRect(0, 0, this.canvasContext.canvas.width, this.canvasContext.canvas.height);
+        if (type == 'temp') {
+            imageObj.onload = function () {
+                proxy.tempContext.globalCompositeOperation = 'source-over';
+                proxy.tempContext.drawImage(imageObj, 0, 0, proxy.element.width, proxy.element.height);
+            };
+        }
+        else {
+            imageObj.onload = function () {
+                proxy.canvasContext.globalCompositeOperation = 'source-over';
+                proxy.canvasContext.drawImage(imageObj, 0, 0, proxy.element.width, proxy.element.height);
+                proxy.updateSnapCollection();
+                proxy.saveBackground(true);
+            };
+            this.canvasContext.clearRect(0, 0, this.canvasContext.canvas.width, this.canvasContext.canvas.height);
+        }
     };
@@ -533,12 +549,17 @@ SignatureBase.prototype.setBackgroundColor = function (color) {
     };
+    SignatureBase.prototype.internalRefresh = function () {
+        this.pointColl = [];
+        this.lastVelocity = 0;
+        this.lastWidth = (this.minStrokeWidth + this.maxStrokeWidth) / 2;
+    };
     /**
      * To refresh the signature.
      *
-     * @private
      * @returns {void}.
      */
     SignatureBase.prototype.refresh = function () {
-        this.pointColl = [];
-        this.lastVelocity = 0;
-        this.lastWidth = (this.minStrokeWidth + this.maxStrokeWidth) / 2;
+        this.isResponsive = false;
+        this.setHTMLProperties();
+        this.resizeHandler();
+        this.internalRefresh();
     };
@@ -553,3 +574,3 @@ /**
         this.canvasContext.clearRect(0, 0, this.canvasContext.canvas.width, this.canvasContext.canvas.height);
-        this.refresh();
+        this.internalRefresh();
         this.signRatioPointsColl = [];
@@ -829,4 +850,3 @@ this.updateSnapCollection(true);
     };
-    SignatureBase.prototype.toSVG = function (fileName) {
-        var dataUrl = this.canvasContext.canvas.toDataURL();
+    SignatureBase.prototype.toSVG = function (fileName, dataUrl) {
         var svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
@@ -872,23 +892,19 @@ svg.setAttribute('width', this.canvasContext.canvas.width.toString());
     SignatureBase.prototype.getSignature = function (type) {
+        if (this.saveWithBackground && this.backgroundColor && !this.backgroundImage) {
+            this.tempContext.fillStyle = this.backgroundColor;
+            this.tempContext.fillRect(0, 0, this.canvasContext.canvas.width, this.canvasContext.canvas.height);
+        }
+        else if (!this.backgroundColor && !this.backgroundImage && type === 'Jpeg') {
+            this.tempContext.fillStyle = "#fff";
+            this.tempContext.fillRect(0, 0, this.canvasContext.canvas.width, this.canvasContext.canvas.height);
+        }
+        this.tempContext.drawImage(this.element, 0, 0);
         if (type === 'Jpeg') {
-            var imgData = this.canvasContext.getImageData(0, 0, this.element.width, this.element.height);
-            var data = imgData.data;
-            for (var i = 0; i < data.length; i += 4) {
-                if (data[i + 3] < 255) {
-                    data[i] = 255 - data[i];
-                    data[i + 1] = 255 - data[i + 1];
-                    data[i + 2] = 255 - data[i + 2];
-                    data[i + 3] = 255 - data[i + 3];
-                }
-            }
-            this.canvasContext.putImageData(imgData, 0, 0);
-            var dataURL = this.canvasContext.canvas.toDataURL('image/jpeg');
-            this.resizeHandler();
-            return dataURL;
+            return this.tempCanvas.toDataURL('image/jpeg');
         }
         else if (type === 'Svg') {
-            return this.toSVG(null);
+            return this.toSVG(null, this.tempCanvas.toDataURL('image/png'));
         }
         else {
-            return this.canvasContext.canvas.toDataURL('image/png');
+            return this.tempCanvas.toDataURL('image/png');
         }
@@ -948,2 +964,5 @@ };
                 this.backgroundImage = value;
+                if (this.saveWithBackground) {
+                    this.setBackgroundImage(this.backgroundImage, 'temp');
+                }
                 break;
@@ -950,0 +969,0 @@ case 'strokeColor':

No alert changes

Improved metrics

Total package byte prevSize

26014362

increased by0.06%

Lines of code

350792

increased by0.02%

Dependency changes

• Updated@syncfusion/ej2-base@~23.1.38

• Updated@syncfusion/ej2-popups@~23.1.38