@liquid-js/qr-code-styling 2.0.3 → 2.0.5

package/README.md

@@ -31,52 +31,33 @@ If you have issues / suggestions / notes / questions, please open an issue or co
   </head>
   <body>
     <div id="canvas"></div>
+    <button type="button" id="dl">Download</button>
     <script type="module">
-      import { QRCodeStyling } from "https://unpkg.com/@liquid-js/qr-code-styling/lib/qr-code-styling.js";
+      import { QRCodeStyling, browserUtils } from "./index.ts";
 
-      const options = {
-        shape: "circle",
+      const qrCode = new QRCodeStyling({
+        width: 300,
+        height: 300,
         type: "svg",
-        data: "h",
+        data: "https://www.facebook.com/",
         image: "https://upload.wikimedia.org/wikipedia/commons/5/51/Facebook_f_logo_%282019%29.svg",
         dotsOptions: {
-          type: "extra-rounded",
-          gradient: {
-            type: "linear",
-            rotation: Math.PI / 2,
-            colorStops: [
-              { offset: 0, color: "blue" },
-              { offset: 0.5, color: "red" },
-              { offset: 1, color: "green" }
-            ]
-          }
+          color: "#4267b2",
+          type: "rounded"
         },
-        cornersSquareOptions: {
-          type: "rounded",
-          gradient: {
-            type: "linear",
-            rotation: Math.PI * 0.2,
-            colorStops: [
-              {
-                offset: 0,
-                color: "blue"
-              },
-              {
-                offset: 1,
-                color: "red"
-              }
-            ]
-          }
+        backgroundOptions: {
+          color: "#e9ebee"
         },
         imageOptions: {
           crossOrigin: "anonymous",
-          imageSize: 1,
-          margin: 1
+          margin: 20
         }
-      };
-      const qrCode = new QRCodeStyling(options);
+      });
 
       qrCode.append(document.getElementById("canvas"));
+      document.getElementById("dl").addEventListener("click", () => {
+        browserUtils.download(qrCode, { extension: "png" }, { width: 1200, height: 1200 });
+      });
     </script>
   </body>
 </html>
@@ -107,7 +88,6 @@ new QRCodeStyling(options) => QRCodeStyling
 | cornersSquareOptions | object            |               | Square in the corners styling options                      |
 | cornersDotOptions    | object            |               | Dots in the corners styling options                        |
 | backgroundOptions    | object \| boolean | `false`       | QR background styling options, false to disable background |
-| margin               | number            | `0`           | Margin (in blocks) to add to the code                      |
 
 `options.qrOptions` structure
 
@@ -153,11 +133,12 @@ new QRCodeStyling(options) => QRCodeStyling
 
 `options.backgroundOptions` structure
 
-| Property | Type             | Default Value | Description         |
-| -------- | ---------------- | ------------- | ------------------- |
-| round    | number (`0 - 1`) | `0`           | Background roundnes |
-| color    | string           |               |                     |
-| gradient | object           |               |                     |
+| Property | Type             | Default Value | Description                                           |
+| -------- | ---------------- | ------------- | ----------------------------------------------------- |
+| round    | number (`0 - 1`) | `0`           | Background roundnes                                   |
+| color    | string           |               |                                                       |
+| gradient | object           |               |                                                       |
+| margin   | number           | `0`           | Margin (in blocks) between background and the QR code |
 
 Gradient structure
 
@@ -228,16 +209,16 @@ const extension = (svg, options) => {
   const size = Math.min(width, height);
   const border = document.createElementNS("http://www.w3.org/2000/svg", "rect");
   const borderAttributes = {
-    "fill": "none",
-    "x": (width - size + 40) / 2,
-    "y": (height - size + 40) / 2,
-    "width": size - 40,
-    "height": size - 40,
-    "stroke": 'black',
+    fill: "none",
+    x: (width - size + 40) / 2,
+    y: (height - size + 40) / 2,
+    width: size - 40,
+    height: size - 40,
+    stroke: "black",
     "stroke-width": 40,
-    "rx": 100,
+    rx: 100
   };
-  Object.keys(borderAttributes).forEach(attribute => {
+  Object.keys(borderAttributes).forEach((attribute) => {
     border.setAttribute(attribute, borderAttributes[attribute]);
   });
   svg.appendChild(border);

package/lib/core/QROptions.d.ts

@@ -4,7 +4,6 @@ export interface RequiredOptions extends Options {
     shape: ShapeType;
     width: number;
     height: number;
-    margin: number;
     data: string;
     qrOptions: {
         typeNumber: TypeNumber;

package/lib/qr-code-styling-node.js

@@ -131,6 +131,8 @@ function sanitizeOptions(options) {
     if (newOptions.dotsOptions.gradient) {
         newOptions.dotsOptions.gradient = sanitizeGradient(newOptions.dotsOptions.gradient);
     }
+    // Ensure integer dot size
+    newOptions.dotsOptions.size = Math.round(Math.max(0, newOptions.dotsOptions.size) || 10);
     if (newOptions.cornersSquareOptions) {
         newOptions.cornersSquareOptions = {
             ...newOptions.cornersSquareOptions
@@ -165,7 +167,6 @@ const defaultOptions = {
     shape: ShapeType.square,
     width: undefined,
     height: undefined,
-    margin: 0,
     data: "",
     qrOptions: {
         typeNumber: TypeNumber[0],
@@ -905,7 +906,8 @@ class QRSVG {
             }
         }
         if (options.shape === ShapeType.circle) {
-            const additionalDots = Math.floor((minSize / dotSize - count - 2 * this._options.margin) / 2);
+            const margin = (this._options.backgroundOptions && this._options.backgroundOptions.margin) || 0;
+            const additionalDots = Math.floor((minSize / dotSize - count - 2 * margin) / 2);
             const fakeCount = count + additionalDots * 2;
             const xFakeBeginning = xBeginning - additionalDots * dotSize;
             const yFakeBeginning = yBeginning - additionalDots * dotSize;
@@ -1182,7 +1184,8 @@ let QRCodeStyling$1 = class QRCodeStyling {
             return;
         }
         const count = Math.ceil((this._options.shape == ShapeType.circle ? Math.sqrt(2) : 1) * this._qr.getModuleCount());
-        const size = this._options.dotsOptions.size * (count + 2 * this._options.margin);
+        const margin = (this._options.backgroundOptions && this._options.backgroundOptions.margin) || 0;
+        const size = Math.ceil(this._options.dotsOptions.size * (count + 2 * margin));
         const qrSVG = new QRSVG({
             ...this._options,
             width: size,