@liquid-js/qr-code-styling 3.0.0-0 → 3.0.0-2

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

@@ -574,6 +574,7 @@ class QRCornerSquare {
                     `a ${2.5 * dotSize} ${2.5 * dotSize}, 0, 0, 0, ${-dotSize * 2.5} ${-dotSize * 2.5}` +
                     `h ${-2 * dotSize}` +
                     `a ${2.5 * dotSize} ${2.5 * dotSize}, 0, 0, 0, ${-dotSize * 2.5} ${dotSize * 2.5}` +
+                    `z` +
                     `M ${x + 2.5 * dotSize} ${y + dotSize}` +
                     `h ${2 * dotSize}` +
                     `a ${1.5 * dotSize} ${1.5 * dotSize}, 0, 0, 1, ${dotSize * 1.5} ${dotSize * 1.5}` +
@@ -582,7 +583,8 @@ class QRCornerSquare {
                     `h ${-2 * dotSize}` +
                     `a ${1.5 * dotSize} ${1.5 * dotSize}, 0, 0, 1, ${-dotSize * 1.5} ${-dotSize * 1.5}` +
                     `v ${-2 * dotSize}` +
-                    `a ${1.5 * dotSize} ${1.5 * dotSize}, 0, 0, 1, ${dotSize * 1.5} ${-dotSize * 1.5}`);
+                    `a ${1.5 * dotSize} ${1.5 * dotSize}, 0, 0, 1, ${dotSize * 1.5} ${-dotSize * 1.5}` +
+                    `z`);
             }
         });
     }
@@ -630,6 +632,7 @@ class QRCornerSquare {
                     `a ${2.5 * dotSize} ${2.5 * dotSize}, 0, 0, 0, ${-dotSize * 2.5} ${-dotSize * 2.5}` +
                     `h ${-2 * dotSize}` +
                     `a ${2.5 * dotSize} ${2.5 * dotSize}, 0, 0, 0, ${-dotSize * 2.5} ${dotSize * 2.5}` +
+                    "z" +
                     `M ${x + 2.5 * dotSize} ${y + dotSize}` +
                     `h ${2 * dotSize}` +
                     `a ${1.5 * dotSize} ${1.5 * dotSize}, 0, 0, 1, ${dotSize * 1.5} ${dotSize * 1.5}` +
@@ -637,7 +640,8 @@ class QRCornerSquare {
                     `h ${-3.5 * dotSize}` +
                     `a ${1.5 * dotSize} ${1.5 * dotSize}, 0, 0, 1, ${-dotSize * 1.5} ${-dotSize * 1.5}` +
                     `v ${-2 * dotSize}` +
-                    `a ${1.5 * dotSize} ${1.5 * dotSize}, 0, 0, 1, ${dotSize * 1.5} ${-dotSize * 1.5}`);
+                    `a ${1.5 * dotSize} ${1.5 * dotSize}, 0, 0, 1, ${dotSize * 1.5} ${-dotSize * 1.5}` +
+                    `z`);
             }
         });
     }
@@ -1266,16 +1270,6 @@ class QRSVG {
         const dot = new QRDot({ svg: this._element, type: options.dotsOptions.type, document: this._document });
         [this._dotsMask, this._dotsMaskGroup] = this._createMask("mask-dot-color");
         this._defs.appendChild(this._dotsMask);
-        this._createColor({
-            options: options.dotsOptions?.gradient,
-            color: options.dotsOptions.color,
-            additionalRotation: 0,
-            x: 0,
-            y: 0,
-            height: options.height,
-            width: options.width,
-            name: "dot-color"
-        });
         for (let i = 0; i < count; i++) {
             for (let j = 0; j < count; j++) {
                 if (filter && !filter(i, j)) {
@@ -1296,12 +1290,18 @@ class QRSVG {
                 }
             }
         }
+        let colorX = xBeginning;
+        let colorY = yBeginning;
+        let colorCount = count;
         if (options.shape === ShapeType.circle) {
             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;
+            colorX = xFakeBeginning;
+            colorY = yFakeBeginning;
+            colorCount = count + additionalDots * 2;
             const fakeMatrix = [];
             const center = Math.floor(fakeCount / 2);
             for (let i = 0; i < fakeCount; i++) {
@@ -1337,6 +1337,16 @@ class QRSVG {
                 }
             }
         }
+        this._createColor({
+            options: options.dotsOptions?.gradient,
+            color: options.dotsOptions.color,
+            additionalRotation: 0,
+            x: colorX,
+            y: colorY,
+            height: colorCount * dotSize,
+            width: colorCount * dotSize,
+            name: "dot-color"
+        });
     }
     drawCorners() {
         if (!this._qr) {