@liquid-js/qr-code-styling 1.9.1 → 1.10.1

package/lib/core/QROptions.d.ts

@@ -4,6 +4,7 @@ export interface RequiredOptions extends Options {
     shape: ShapeType;
     width: number;
     height: number;
+    margin: number;
     data: string;
     qrOptions: {
         typeNumber: TypeNumber;
@@ -20,6 +21,7 @@ export interface RequiredOptions extends Options {
         type: DotType;
         color: string;
         gradient?: Gradient;
+        size: number;
     };
 }
 export declare const defaultOptions: RequiredOptions;

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

@@ -168,6 +168,7 @@ const defaultOptions = {
     shape: exports.ShapeType.square,
     width: undefined,
     height: undefined,
+    margin: 0,
     data: "",
     qrOptions: {
         typeNumber: TypeNumber[0],
@@ -182,7 +183,8 @@ const defaultOptions = {
     },
     dotsOptions: {
         type: exports.DotType.square,
-        color: "#000"
+        color: "#000",
+        size: 10
     }
 };
 
@@ -772,9 +774,7 @@ class QRSVG {
     }
     async drawQR(qr) {
         const count = qr.getModuleCount();
-        const minSize = Math.min(this._options.width, this._options.height);
-        const realQRSize = this._options.shape === exports.ShapeType.circle ? minSize / Math.sqrt(2) : minSize;
-        const dotSize = Math.floor(realQRSize / count);
+        const dotSize = this._options.dotsOptions.size;
         let drawImageSize = {
             hideXDots: 0,
             hideYDots: 0,
@@ -859,8 +859,7 @@ class QRSVG {
             throw "The canvas is too small.";
         }
         const minSize = Math.min(options.width, options.height);
-        const realQRSize = options.shape === exports.ShapeType.circle ? minSize / Math.sqrt(2) : minSize;
-        const dotSize = Math.floor(realQRSize / count);
+        const dotSize = this._options.dotsOptions.size;
         const xBeginning = Math.floor((options.width - count * dotSize) / 2);
         const yBeginning = Math.floor((options.height - count * dotSize) / 2);
         const dot = new QRDot({ svg: this._element, type: options.dotsOptions.type, document: this._document });
@@ -898,7 +897,7 @@ class QRSVG {
             }
         }
         if (options.shape === exports.ShapeType.circle) {
-            const additionalDots = Math.floor((minSize / dotSize - count) / 2);
+            const additionalDots = Math.floor((minSize / dotSize - count - 2 * this._options.margin) / 2);
             const fakeCount = count + additionalDots * 2;
             const xFakeBeginning = xBeginning - additionalDots * dotSize;
             const yFakeBeginning = yBeginning - additionalDots * dotSize;
@@ -948,9 +947,7 @@ class QRSVG {
             throw "Element code is not defined";
         }
         const count = this._qr.getModuleCount();
-        const minSize = Math.min(options.width, options.height);
-        const realQRSize = options.shape === exports.ShapeType.circle ? minSize / Math.sqrt(2) : minSize;
-        const dotSize = Math.floor(realQRSize / count);
+        const dotSize = this._options.dotsOptions.size;
         const cornersSquareSize = dotSize * 7;
         const cornersDotSize = dotSize * 3;
         const xBeginning = Math.floor((options.width - count * dotSize) / 2);
@@ -1176,8 +1173,13 @@ let QRCodeStyling$1 = class QRCodeStyling {
         if (!this._qr) {
             return;
         }
-        this._options.width = this._options.height = 10 * this._qr.getModuleCount();
-        const qrSVG = new QRSVG(this._options);
+        const count = Math.ceil((this._options.shape == exports.ShapeType.circle ? Math.sqrt(2) : 1) * this._qr.getModuleCount());
+        const size = this._options.dotsOptions.size * (count + 2 * this._options.margin);
+        const qrSVG = new QRSVG({
+            ...this._options,
+            width: size,
+            height: size
+        });
         this._svg = qrSVG.getElement();
         this._svgDrawingPromise = qrSVG.drawQR(this._qr).then(() => {
             if (!this._svg)