react-qrcode-logo - npm Package Compare versions

Comparing version 2.9.0 to 2.10.0

CHANGELOG.md

 # Changelog
 
+## [v2.10.0]
+### Features
+- Added new `qrStyle`: `fluid`.
+
 ## [v2.9.0]
@@ -4,0 +8,0 @@ ### Features

dist/index.d.ts

@@ -30,3 +30,3 @@ import * as React from 'react';
     eyeColor?: EyeColor | [EyeColor, EyeColor, EyeColor];
-    qrStyle?: 'squares' | 'dots';
+    qrStyle?: 'squares' | 'dots' | 'fluid';
     style?: object;
@@ -33,0 +33,0 @@ id?: string;

dist/index.js

@@ -204,2 +204,35 @@ "use strict";
         }
+        else if (qrStyle === 'fluid') {
+            var radius = Math.ceil(cellSize / 2);
+            for (var row = 0; row < length; row++) {
+                for (var col = 0; col < length; col++) {
+                    if (qrCode.isDark(row, col) && !this.isInPositioninZone(row, col, positioningZones)) {
+                        var roundedCorners = [false, false, false, false]; // top-left, top-right, bottom-right, bottom-left
+                        if ((row > 0 && !qrCode.isDark(row - 1, col)) && (col > 0 && !qrCode.isDark(row, col - 1)))
+                            roundedCorners[0] = true;
+                        if ((row > 0 && !qrCode.isDark(row - 1, col)) && (col < length - 1 && !qrCode.isDark(row, col + 1)))
+                            roundedCorners[1] = true;
+                        if ((row < length - 1 && !qrCode.isDark(row + 1, col)) && (col < length - 1 && !qrCode.isDark(row, col + 1)))
+                            roundedCorners[2] = true;
+                        if ((row < length - 1 && !qrCode.isDark(row + 1, col)) && (col > 0 && !qrCode.isDark(row, col - 1)))
+                            roundedCorners[3] = true;
+                        var w = (Math.ceil((col + 1) * cellSize) - Math.floor(col * cellSize));
+                        var h = (Math.ceil((row + 1) * cellSize) - Math.floor(row * cellSize));
+                        ctx.fillStyle = fgColor;
+                        ctx.beginPath();
+                        ctx.arc(Math.round(col * cellSize) + radius + offset, Math.round(row * cellSize) + radius + offset, radius, 0, 2 * Math.PI, false);
+                        ctx.closePath();
+                        ctx.fill();
+                        if (!roundedCorners[0])
+                            ctx.fillRect(Math.round(col * cellSize) + offset, Math.round(row * cellSize) + offset, w / 2, h / 2);
+                        if (!roundedCorners[1])
+                            ctx.fillRect(Math.round(col * cellSize) + offset + Math.floor(w / 2), Math.round(row * cellSize) + offset, w / 2, h / 2);
+                        if (!roundedCorners[2])
+                            ctx.fillRect(Math.round(col * cellSize) + offset + Math.floor(w / 2), Math.round(row * cellSize) + offset + Math.floor(h / 2), w / 2, h / 2);
+                        if (!roundedCorners[3])
+                            ctx.fillRect(Math.round(col * cellSize) + offset, Math.round(row * cellSize) + offset + Math.floor(h / 2), w / 2, h / 2);
+                    }
+                }
+            }
+        }
         else {
@@ -206,0 +239,0 @@ for (var row = 0; row < length; row++) {

package.json

 {
   "name": "react-qrcode-logo",
-  "version": "2.9.0",
+  "version": "2.10.0",
   "description": "React component to generate a QR Code customizable with logo and more properties",
@@ -5,0 +5,0 @@ "main": "dist/index.js",

README.md

@@ -7,3 +7,3 @@ # react-qrcode-logo
 	<img src="res/qrcode-mikuv3.png" height="256" width="256">
-	<img src="res/qrcode-ts.png" height="256" width="256">
+	<img src="res/qrcode-ts-fluid.png" height="256" width="256">
 </div>
@@ -46,3 +46,3 @@
 | `logoPaddingStyle`            | `square` &#124; `circle`        | `square`     | Sets the shape of the padding area around the logo                                                     |
-| `qrStyle`                | `squares` &#124; `dots`             | `squares`  | Style of the QR Code modules                                                                                                       |
+| `qrStyle`                | `squares` &#124; `dots` &#124; `fluid`            | `squares`  | Style of the QR Code modules                                                                                                       |
 | `eyeRadius`              | `CornerRadii` &#124; `CornerRadii[]` |  | The corner radius for the positional patterns (the three "eyes" around the QR code). [See more details here](res/eyeRadius_doc.md) |
@@ -80,2 +80,10 @@ | `eyeColor`               | `EyeColor` &#124; `EyeColor[]`      |  | The color for the positional patterns (the three "eyes" around the QR code). [See more details here](res/eyeColor_doc.md)          |
 			</td><td align="center" valign="top">
+			<a href="https://github.com/joellord">
+			<img src="https://avatars.githubusercontent.com/u/1615433?v=4" width="60px;" alt="joellord" /><br />
+			<sup><b>joellord</b></sup></a><br />
+			</td><td align="center" valign="top">
+			<a href="https://github.com/Michael-AT-Corporation">
+			<img src="https://avatars.githubusercontent.com/u/77804353?v=4" width="60px;" alt="Michael-AT-Corporation" /><br />
+			<sup><b>Michael-AT-Corporation</b></sup></a><br />
+			</td><td align="center" valign="top">
 			<a href="https://github.com/qwei-1874">
@@ -82,0 +90,0 @@ <img src="https://avatars.githubusercontent.com/u/13930277?v=4" width="60px;" alt="qwei-1874" /><br />

No alert changes

Improved metrics

Total package byte prevSize

335775

increased by41.05%

Number of package files

15

increased by7.14%

Lines of code

790

increased by8.67%

Number of lines in readme file

106

increased by8.16%

Published versions last months

1

increased byInfinity%

No dependency changes