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

package/LICENSE

@@ -2,6 +2,8 @@ MIT License
 
 Copyright (c) 2019 Denys Kozak
 
+Copyright (c) 2023 Liquid-JS
+
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal
 in the Software without restriction, including without limitation the rights

package/README.md

@@ -2,11 +2,9 @@
 
 [![Version](https://img.shields.io/npm/v/@liquid-js/qr-code-styling.svg)](https://www.npmjs.org/package/@liquid-js/qr-code-styling)
 
-JavaScript library for generating QR codes with a logo and styling.
+JavaScript library for generating QR codes with customizable styling.
 
-Try it here <https://qr-code-styling.com>
-
-If you have issues / suggestions / notes / questions, please open an issue or contact me. Let's create a cool library together.
+Try it here <https://styled-qr.liquidjs.io/>
 
 ## Examples
 

package/lib/core/QRSVG.d.ts

@@ -6,13 +6,21 @@ export declare class QRSVG {
     /** @ignore */
     _defs: SVGElement;
     /** @ignore */
-    _backgroundClipPath?: SVGElement;
+    _backgroundMask?: SVGElement;
     /** @ignore */
-    _dotsClipPath?: SVGElement;
+    _backgroundMaskGroup?: SVGElement;
     /** @ignore */
-    _cornersSquareClipPath?: SVGElement;
+    _dotsMask?: SVGElement;
     /** @ignore */
-    _cornersDotClipPath?: SVGElement;
+    _dotsMaskGroup?: SVGElement;
+    /** @ignore */
+    _cornersSquareMask?: SVGElement;
+    /** @ignore */
+    _cornersSquareMaskGroup?: SVGElement;
+    /** @ignore */
+    _cornersDotMask?: SVGElement;
+    /** @ignore */
+    _cornersDotMaskGroup?: SVGElement;
     /** @ignore */
     _options: RequiredOptions;
     /** @ignore */
@@ -46,4 +54,5 @@ export declare class QRSVG {
         width: number;
         name: string;
     }): void;
+    _createMask(id: string): (SVGGElement | SVGMaskElement)[];
 }

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

@@ -1240,15 +1240,14 @@ class QRSVG {
             });
             const size = Math.min(options.width, options.height);
             const element = this._document.createElementNS("http://www.w3.org/2000/svg", "rect");
-            this._backgroundClipPath = this._document.createElementNS("http://www.w3.org/2000/svg", "clipPath");
-            this._backgroundClipPath.setAttribute("id", "clip-path-background-color");
-            this._defs.appendChild(this._backgroundClipPath);
+            [this._backgroundMask, this._backgroundMaskGroup] = this._createMask("mask-background-color");
+            this._defs.appendChild(this._backgroundMask);
             element.setAttribute("x", String((options.width - size) / 2));
             element.setAttribute("y", String((options.height - size) / 2));
             element.setAttribute("width", String(size));
             element.setAttribute("height", String(size));
             element.setAttribute("rx", String((size / 2) * (options.backgroundOptions.round || 0)));
-            this._backgroundClipPath.appendChild(element);
+            this._backgroundMaskGroup.appendChild(element);
         }
     }
     drawDots(filter) {
@@ -1265,9 +1264,8 @@ class QRSVG {
         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 });
-        this._dotsClipPath = this._document.createElementNS("http://www.w3.org/2000/svg", "clipPath");
-        this._dotsClipPath.setAttribute("id", "clip-path-dot-color");
-        this._defs.appendChild(this._dotsClipPath);
+        [this._dotsMask, this._dotsMaskGroup] = this._createMask("mask-dot-color");
+        this._defs.appendChild(this._dotsMask);
         this._createColor({
             options: options.dotsOptions?.gradient,
             color: options.dotsOptions.color,
@@ -1293,8 +1291,8 @@ class QRSVG {
                         return false;
                     return !!this._qr && this._qr.isDark(j + yOffset, i + xOffset);
                 });
-                if (dot._element && this._dotsClipPath) {
-                    this._dotsClipPath.appendChild(dot._element);
+                if (dot._element && this._dotsMask) {
+                    this._dotsMaskGroup.appendChild(dot._element);
                 }
             }
         }
@@ -1333,8 +1331,8 @@ class QRSVG {
                     dot.draw(xFakeBeginning + i * dotSize, yFakeBeginning + j * dotSize, dotSize, (xOffset, yOffset) => {
                         return !!fakeMatrix[i + xOffset]?.[j + yOffset];
                     });
-                    if (dot._element && this._dotsClipPath) {
-                        this._dotsClipPath.appendChild(dot._element);
+                    if (dot._element && this._dotsMask) {
+                        this._dotsMaskGroup.appendChild(dot._element);
                     }
                 }
             }
@@ -1362,13 +1360,15 @@ class QRSVG {
         ].forEach(([column, row, rotation]) => {
             const x = xBeginning + column * dotSize * (count - 7);
             const y = yBeginning + row * dotSize * (count - 7);
-            let cornersSquareClipPath = this._dotsClipPath;
-            let cornersDotClipPath = this._dotsClipPath;
+            let cornersSquareMask = this._dotsMask;
+            let cornersSquareMaskGroup = this._dotsMaskGroup;
+            let cornersDotMask = this._dotsMask;
+            let cornersDotMaskGroup = this._dotsMaskGroup;
             if (options.cornersSquareOptions?.gradient || options.cornersSquareOptions?.color) {
-                cornersSquareClipPath = this._document.createElementNS("http://www.w3.org/2000/svg", "clipPath");
-                cornersSquareClipPath.setAttribute("id", `clip-path-corners-square-color-${column}-${row}`);
-                this._defs.appendChild(cornersSquareClipPath);
-                this._cornersSquareClipPath = this._cornersDotClipPath = cornersDotClipPath = cornersSquareClipPath;
+                [cornersSquareMask, cornersSquareMaskGroup] = this._createMask(`mask-corners-square-color-${column}-${row}`);
+                this._defs.appendChild(cornersSquareMask);
+                this._cornersSquareMask = this._cornersDotMask = cornersDotMask = cornersSquareMask;
+                this._cornersSquareMaskGroup = this._cornersDotMaskGroup = cornersDotMaskGroup = cornersSquareMaskGroup;
                 this._createColor({
                     options: options.cornersSquareOptions?.gradient,
                     color: options.cornersSquareOptions?.color,
@@ -1387,8 +1387,8 @@ class QRSVG {
                     document: this._document
                 });
                 cornersSquare.draw(x, y, cornersSquareSize, rotation);
-                if (cornersSquare._element && cornersSquareClipPath) {
-                    cornersSquareClipPath.appendChild(cornersSquare._element);
+                if (cornersSquare._element && cornersSquareMaskGroup) {
+                    cornersSquareMaskGroup.appendChild(cornersSquare._element);
                 }
             }
             else {
@@ -1399,17 +1399,17 @@ class QRSVG {
                             continue;
                         }
                         dot.draw(x + i * dotSize, y + j * dotSize, dotSize, (xOffset, yOffset) => !!squareMask[i + xOffset]?.[j + yOffset]);
-                        if (dot._element && cornersSquareClipPath) {
-                            cornersSquareClipPath.appendChild(dot._element);
+                        if (dot._element && cornersSquareMaskGroup) {
+                            cornersSquareMaskGroup.appendChild(dot._element);
                         }
                     }
                 }
             }
             if (options.cornersDotOptions?.gradient || options.cornersDotOptions?.color) {
-                cornersDotClipPath = this._document.createElementNS("http://www.w3.org/2000/svg", "clipPath");
-                cornersDotClipPath.setAttribute("id", `clip-path-corners-dot-color-${column}-${row}`);
-                this._defs.appendChild(cornersDotClipPath);
-                this._cornersDotClipPath = cornersDotClipPath;
+                [cornersDotMask, cornersDotMaskGroup] = this._createMask(`mask-corners-dot-color-${column}-${row}`);
+                this._defs.appendChild(cornersDotMask);
+                this._cornersDotMask = cornersDotMask;
+                this._cornersDotMaskGroup = cornersDotMaskGroup;
                 this._createColor({
                     options: options.cornersDotOptions?.gradient,
                     color: options.cornersDotOptions?.color,
@@ -1428,8 +1428,8 @@ class QRSVG {
                     document: this._document
                 });
                 cornersDot.draw(x + dotSize * 2, y + dotSize * 2, cornersDotSize, rotation);
-                if (cornersDot._element && cornersDotClipPath) {
-                    cornersDotClipPath.appendChild(cornersDot._element);
+                if (cornersDot._element && cornersDotMaskGroup) {
+                    cornersDotMaskGroup.appendChild(cornersDot._element);
                 }
             }
             else {
@@ -1440,8 +1440,8 @@ class QRSVG {
                             continue;
                         }
                         dot.draw(x + i * dotSize, y + j * dotSize, dotSize, (xOffset, yOffset) => !!dotMask[i + xOffset]?.[j + yOffset]);
-                        if (dot._element && cornersDotClipPath) {
-                            cornersDotClipPath.appendChild(dot._element);
+                        if (dot._element && cornersDotMaskGroup) {
+                            cornersDotMaskGroup.appendChild(dot._element);
                         }
                     }
                 }
@@ -1459,7 +1459,7 @@ class QRSVG {
         const dh = height - margin * 2;
         const imageUrl = await this._imageTools.toDataURL(options.image || "");
         let image = this._document.createElementNS("http://www.w3.org/2000/svg", "image");
-        image.setAttribute("href", imageUrl || "");
+        image.setAttributeNS("http://www.w3.org/1999/xlink", "xlink:href", imageUrl || "");
         if (imageUrl.startsWith("data:image/svg+xml;")) {
             let data = imageUrl.substring(19);
             const i = data.indexOf(",");
@@ -1494,7 +1494,7 @@ class QRSVG {
         rect.setAttribute("y", String(y));
         rect.setAttribute("height", String(height));
         rect.setAttribute("width", String(width));
-        rect.setAttribute("clip-path", `url('#clip-path-${name}')`);
+        rect.setAttribute("style", `mask:url(#mask-${name})`);
         if (options) {
             let gradient;
             if (options.type === GradientType.radial) {
@@ -1553,7 +1553,7 @@ class QRSVG {
                 stop.setAttribute("stop-color", color);
                 gradient.appendChild(stop);
             });
-            rect.setAttribute("fill", `url('#${name}')`);
+            rect.setAttribute("fill", `url(#${name})`);
             this._defs.appendChild(gradient);
         }
         else if (color) {
@@ -1561,6 +1561,20 @@ class QRSVG {
         }
         this._element.appendChild(rect);
     }
+    _createMask(id) {
+        const options = this._options;
+        const mask = this._document.createElementNS("http://www.w3.org/2000/svg", "mask");
+        mask.setAttribute("id", id);
+        mask.setAttribute("maskUnits", "userSpaceOnUse");
+        mask.setAttribute("x", "0");
+        mask.setAttribute("y", "0");
+        mask.setAttribute("width", String(options.width));
+        mask.setAttribute("height", String(options.height));
+        const group = this._document.createElementNS("http://www.w3.org/2000/svg", "g");
+        group.setAttribute("fill", "#fff");
+        mask.appendChild(group);
+        return [mask, group];
+    }
 }
 
 let QRCodeStyling$1 = class QRCodeStyling {