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

package/README.md

@@ -20,8 +20,14 @@ If you have issues / suggestions / notes / questions, please open an issue or co
 
     npm install @liquid-js/qr-code-styling
 
+### API Documentation
+
+<https://liquid-js.github.io/qr-code-styling/>
+
 ### Usage
 
+#### Browser
+
 ```HTML
 <!doctype html>
 <html lang="en">
@@ -33,28 +39,29 @@ If you have issues / suggestions / notes / questions, please open an issue or co
     <div id="canvas"></div>
     <button type="button" id="dl">Download</button>
     <script type="module">
-      import { QRCodeStyling, browserUtils } from "./index.ts";
+      import { QRCodeStyling, browserUtils } from "https://unpkg.com/@liquid-js/qr-code-styling/lib/qr-code-styling.js";
 
       const qrCode = new QRCodeStyling({
-        width: 300,
-        height: 300,
-        type: "svg",
         data: "https://www.facebook.com/",
         image: "https://upload.wikimedia.org/wikipedia/commons/5/51/Facebook_f_logo_%282019%29.svg",
         dotsOptions: {
           color: "#4267b2",
-          type: "rounded"
+          type: "rounded",
+          size: 10
         },
         backgroundOptions: {
-          color: "#e9ebee"
+          color: "#e9ebee",
+          margin: 1
         },
         imageOptions: {
           crossOrigin: "anonymous",
-          margin: 20
+          margin: 1,
+          imageSize: 0.9
         }
       });
 
       qrCode.append(document.getElementById("canvas"));
+
       document.getElementById("dl").addEventListener("click", () => {
         browserUtils.download(qrCode, { extension: "png" }, { width: 1200, height: 1200 });
       });
@@ -63,170 +70,52 @@ If you have issues / suggestions / notes / questions, please open an issue or co
 </html>
 ```
 
-### API Documentation
-
-#### QRCodeStyling instance
-
-```js
-new QRCodeStyling(options) => QRCodeStyling
-```
-
-| Param   | Type   | Description |
-| ------- | ------ | ----------- |
-| options | object | Init object |
-
-`options` structure
-
-| Property             | Type              | Default Value | Description                                                |
-| -------------------- | ----------------- | ------------- | ---------------------------------------------------------- |
-| data                 | string            |               | The date will be encoded to the QR code                    |
-| image                | string \| Blob    |               | The image will be copied to the center of the QR code      |
-| shape                | string            | `'square'`    | QR code shape                                              |
-| qrOptions            | object            |               | Options will be passed to `qrcode-generator` lib           |
-| imageOptions         | object            |               | Specific image options, details see below                  |
-| dotsOptions          | object            |               | Dots styling options                                       |
-| 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 |
-
-`options.qrOptions` structure
-
-| Property             | Type                                               | Default Value |
-| -------------------- | -------------------------------------------------- | ------------- |
-| typeNumber           | number (`0 - 40`)                                  | `0`           |
-| mode                 | string (`'Numeric' 'Alphanumeric' 'Byte' 'Kanji'`) |               |
-| errorCorrectionLevel | string (`'L' 'M' 'Q' 'H'`)                         | `'Q'`         |
-
-`options.imageOptions` structure
-
-| Property           | Type                                     | Default Value | Description                                                                    |
-| ------------------ | ---------------------------------------- | ------------- | ------------------------------------------------------------------------------ |
-| hideBackgroundDots | boolean                                  | `true`        | Hide all dots covered by the image                                             |
-| imageSize          | number                                   | `0.4`         | Coefficient of the image size. Not recommended to use ove 0.5. Lower is better |
-| margin             | number                                   | `0`           | Margin of the image (in blocks)                                                |
-| crossOrigin        | string (`'anonymous' 'use-credentials'`) |               | Set "anonymous" if you want to download QR code from other origins.            |
-
-`options.dotsOptions` structure
-
-| Property | Type                                                                           | Default Value | Description             |
-| -------- | ------------------------------------------------------------------------------ | ------------- | ----------------------- |
-| size     | number                                                                         | `10`          | QR dot size (in pixels) |
-| color    | string                                                                         | `'#000'`      | Color of QR dots        |
-| gradient | object                                                                         |               | Gradient of QR dots     |
-| type     | string (`'rounded' 'dots' 'classy' 'classy-rounded' 'square' 'extra-rounded'`) | `'square'`    | Style of QR dots        |
-
-`options.cornersSquareOptions` structure
-
-| Property | Type                                      | Default Value | Description                |
-| -------- | ----------------------------------------- | ------------- | -------------------------- |
-| color    | string                                    |               | Color of Corners Square    |
-| gradient | object                                    |               | Gradient of Corners Square |
-| type     | string (`'dot' 'square' 'extra-rounded'`) |               | Style of Corners Square    |
-
-`options.cornersDotOptions` structure
-
-| Property | Type                      | Default Value | Description             |
-| -------- | ------------------------- | ------------- | ----------------------- |
-| color    | string                    |               | Color of Corners Dot    |
-| gradient | object                    |               | Gradient of Corners Dot |
-| type     | string (`'dot' 'square'`) |               | Style of Corners Dot    |
-
-`options.backgroundOptions` structure
-
-| 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
-
-`options.dotsOptions.gradient`
-
-`options.backgroundOptions.gradient`
-
-`options.cornersSquareOptions.gradient`
-
-`options.cornersDotOptions.gradient`
-
-| Property   | Type                         | Default Value | Description                                                                             |
-| ---------- | ---------------------------- | ------------- | --------------------------------------------------------------------------------------- |
-| type       | string (`'linear' 'radial'`) | `'linear'`    | Type of gradient spread                                                                 |
-| rotation   | number                       | 0             | Rotation of gradient in radians (Math.PI === 180 degrees)                               |
-| colorStops | array of objects             |               | Gradient colors. Example `[{ offset: 0, color: 'blue' }, {  offset: 1, color: 'red' }]` |
-
-Gradient colorStops structure
-
-`options.dotsOptions.gradient.colorStops[]`
-
-`options.backgroundOptions.gradient.colorStops[]`
-
-`options.cornersSquareOptions.gradient.colorStops[]`
-
-`options.cornersDotOptions.gradient.colorStops[]`
-
-| Property | Type             | Default Value | Description                         |
-| -------- | ---------------- | ------------- | ----------------------------------- |
-| offset   | number (`0 - 1`) |               | Position of color in gradient range |
-| color    | string           |               | Color of stop in gradient range     |
-
-#### QRCodeStyling methods
-
-```js
-QRCodeStyling.append(container) => void
-```
-
-| Param     | Type        | Description                                              |
-| --------- | ----------- | -------------------------------------------------------- |
-| container | DOM element | This container will be used for appending of the QR code |
+#### Node
 
 ```js
-QRCodeStyling.serialize() => Promise<string>
-```
-
-```js
-QRCodeStyling.update(options) => void
-```
-
-| Param   | Type   | Description                            |
-| ------- | ------ | -------------------------------------- |
-| options | object | The same options as for initialization |
-
-```js
-QRCodeStyling.applyExtension(extension) => void
-```
-
-| Param     | Type                   | Description                                                                               |
-| --------- | ---------------------- | ----------------------------------------------------------------------------------------- |
-| extension | (svg, options) => void | Extension is a function that takes svg and previously applied options and modifies an svg |
-
-`applyExtension` example
-
-```js
-const extension = (svg, options) => {
-  const { width, height } = 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",
-    "stroke-width": 40,
-    rx: 100
-  };
-  Object.keys(borderAttributes).forEach((attribute) => {
-    border.setAttribute(attribute, borderAttributes[attribute]);
+import { QRCodeStyling } from "@liquid-js/qr-code-styling";
+import { writeFile } from "fs/promises";
+import PDFDocument from "pdfkit";
+import SVGtoPDF from "svg-to-pdfkit";
+
+const qrCode = new QRCodeStyling({
+  data: "https://www.facebook.com/",
+  image: "https://upload.wikimedia.org/wikipedia/commons/5/51/Facebook_f_logo_%282019%29.svg",
+  dotsOptions: {
+    color: "#4267b2",
+    type: "rounded",
+    size: 10
+  },
+  backgroundOptions: {
+    color: "#e9ebee",
+    margin: 1
+  },
+  imageOptions: {
+    crossOrigin: "anonymous",
+    margin: 1,
+    imageSize: 0.9
+  }
+});
+
+const svgCode = await qrCode.serialize();
+
+const width = parseFloat(qrCode._svg.getAttribute("width"));
+const height = parseFloat(qrCode._svg.getAttribute("height"));
+const buffers = [];
+const doc = new PDFDocument({ size: [width, height] });
+doc.on("data", (v) => buffers.push(v));
+const buffer = await new Promise((resolve) => {
+  doc.on("end", () => {
+    resolve(Buffer.concat(buffers));
   });
-  svg.appendChild(border);
-};
-```
-
-```js
-QRCodeStyling.deleteExtension() => void
+  SVGtoPDF(doc, svgCode, 0, 0, {
+    width,
+    height,
+    assumePt: true
+  });
+  doc.end();
+});
+await writeFile("qr.pdf", buffer);
 ```
 
 ### License

package/lib/core/QRCodeStyling.d.ts

@@ -1,19 +1,60 @@
 import { ExtensionFunction, Options, QRCode } from "../types";
 import { RequiredOptions } from "./QROptions";
 export declare class QRCodeStyling {
+    /** @ignore */
     _options: RequiredOptions;
+    /** @ignore */
     _container?: HTMLElement;
+    /** @ignore */
     _svg?: SVGElement;
+    /** @ignore */
     _qr?: QRCode;
+    /** @ignore */
     _extension?: ExtensionFunction;
+    /** @ignore */
     _svgDrawingPromise?: Promise<void>;
     constructor(options?: Partial<Options>);
+    /** @ignore */
     static _clearContainer(container?: HTMLElement): void;
+    /** @ignore */
     _setupSvg(): void;
+    /** @ignore */
     _getElement(): Promise<SVGElement | undefined>;
-    update(options?: Partial<Options>): void;
-    append(container?: HTMLElement): void;
-    applyExtension(extension: ExtensionFunction): void;
+    update(
+    /** The same options as for initialization */
+    options?: Partial<Options>): void;
+    append(
+    /** This container will be used for appending of the QR code */
+    container?: HTMLElement): void;
+    /**
+     *
+     * @example
+     *
+     * ```js
+     * const extension = (svg, options) => {
+     *   const { width, height } = 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",
+     *     "stroke-width": 40,
+     *     rx: 100
+     *   };
+     *   Object.keys(borderAttributes).forEach((attribute) => {
+     *     border.setAttribute(attribute, borderAttributes[attribute]);
+     *   });
+     *   svg.appendChild(border);
+     * };
+     * ```
+     */
+    applyExtension(
+    /** Extension is a function that takes svg and previously applied options and modifies an svg */
+    extension: ExtensionFunction): void;
     deleteExtension(): void;
     serialize(): Promise<string | undefined>;
 }

package/lib/core/QRSVG.d.ts

@@ -1,15 +1,25 @@
 import { FilterFunction, Gradient, QRCode } from "../types";
 import { RequiredOptions } from "./QROptions";
 export declare class QRSVG {
+    /** @ignore */
     _element: SVGElement;
+    /** @ignore */
     _defs: SVGElement;
+    /** @ignore */
     _backgroundClipPath?: SVGElement;
+    /** @ignore */
     _dotsClipPath?: SVGElement;
+    /** @ignore */
     _cornersSquareClipPath?: SVGElement;
+    /** @ignore */
     _cornersDotClipPath?: SVGElement;
+    /** @ignore */
     _options: RequiredOptions;
+    /** @ignore */
     _qr?: QRCode;
+    /** @ignore */
     _document: Document;
+    /** @ignore */
     private _imageTools;
     constructor(options: RequiredOptions);
     get width(): number;
@@ -25,6 +35,7 @@ export declare class QRSVG {
         count: number;
         dotSize: number;
     }): Promise<void>;
+    /** @ignore */
     _createColor({ options, color, additionalRotation, x, y, height, width, name }: {
         options?: Gradient;
         color?: string;

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

@@ -642,7 +642,7 @@ const browserImageTools = {
                 return reject("Image is not defined");
             }
             const image = new Image();
-            if (typeof options.imageOptions.crossOrigin === "string") {
+            if (typeof options.imageOptions?.crossOrigin === "string") {
                 image.crossOrigin = options.imageOptions.crossOrigin;
             }
             image.onload = () => {
@@ -890,7 +890,7 @@ class QRSVG {
                 if (filter && !filter(i, j)) {
                     continue;
                 }
-                if (!this._qr?.isDark(i, j)) {
+                if (!this._qr?.isDark(j, i)) {
                     continue;
                 }
                 dot.draw(xBeginning + i * dotSize, yBeginning + j * dotSize, dotSize, (xOffset, yOffset) => {
@@ -898,7 +898,7 @@ class QRSVG {
                         return false;
                     if (filter && !filter(i + xOffset, j + yOffset))
                         return false;
-                    return !!this._qr && this._qr.isDark(i + xOffset, j + yOffset);
+                    return !!this._qr && this._qr.isDark(j + yOffset, i + xOffset);
                 });
                 if (dot._element && this._dotsClipPath) {
                     this._dotsClipPath.appendChild(dot._element);
@@ -1093,6 +1093,7 @@ class QRSVG {
         image.setAttribute("height", `${dh}px`);
         this._element.appendChild(image);
     }
+    /** @ignore */
     _createColor({ options, color, additionalRotation, x, y, height, width, name }) {
         const size = width > height ? width : height;
         const rect = this._document.createElementNS("http://www.w3.org/2000/svg", "rect");
@@ -1174,11 +1175,13 @@ let QRCodeStyling$1 = class QRCodeStyling {
         this._options = options ? sanitizeOptions(mergeDeep(defaultOptions, options)) : defaultOptions;
         this.update();
     }
+    /** @ignore */
     static _clearContainer(container) {
         if (container) {
             container.innerHTML = "";
         }
     }
+    /** @ignore */
     _setupSvg() {
         if (!this._qr) {
             return;
@@ -1198,6 +1201,7 @@ let QRCodeStyling$1 = class QRCodeStyling {
             this._extension?.(qrSVG.getElement(), this._options);
         });
     }
+    /** @ignore */
     async _getElement() {
         if (!this._qr)
             throw "QR code is empty";
@@ -1207,7 +1211,9 @@ let QRCodeStyling$1 = class QRCodeStyling {
         await this._svgDrawingPromise;
         return this._svg;
     }
-    update(options) {
+    update(
+    /** The same options as for initialization */
+    options) {
         QRCodeStyling._clearContainer(this._container);
         this._options = options ? sanitizeOptions(mergeDeep(this._options, options)) : this._options;
         if (!this._options.data) {
@@ -1219,7 +1225,9 @@ let QRCodeStyling$1 = class QRCodeStyling {
         this._setupSvg();
         this.append(this._container);
     }
-    append(container) {
+    append(
+    /** This container will be used for appending of the QR code */
+    container) {
         if (!container) {
             return;
         }
@@ -1231,7 +1239,35 @@ let QRCodeStyling$1 = class QRCodeStyling {
         }
         this._container = container;
     }
-    applyExtension(extension) {
+    /**
+     *
+     * @example
+     *
+     * ```js
+     * const extension = (svg, options) => {
+     *   const { width, height } = 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",
+     *     "stroke-width": 40,
+     *     rx: 100
+     *   };
+     *   Object.keys(borderAttributes).forEach((attribute) => {
+     *     border.setAttribute(attribute, borderAttributes[attribute]);
+     *   });
+     *   svg.appendChild(border);
+     * };
+     * ```
+     */
+    applyExtension(
+    /** Extension is a function that takes svg and previously applied options and modifies an svg */
+    extension) {
         if (!extension) {
             throw "Extension function should be defined.";
         }