@liquid-js/qr-code-styling 1.7.1 → 1.9.0

package/README.md

@@ -1,4 +1,5 @@
 # QR Code Styling
+
 [![Version](https://img.shields.io/npm/v/qr-code-styling.svg)](https://www.npmjs.org/package/qr-code-styling)
 
 JavaScript library for generating QR codes with a logo and styling.
@@ -6,7 +7,9 @@ JavaScript library for generating QR codes with a logo and 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.
+
 ### Examples
+
 <p float="left">
 <img style="display:inline-block" src="https://raw.githubusercontent.com/kozakdenys/qr-code-styling/master/src/assets/facebook_example_new.png" width="240" />
 <img style="display:inline-block" src="https://raw.githubusercontent.com/kozakdenys/qr-code-styling/master/src/assets/qr_code_example.png" width="240" />
@@ -55,6 +58,7 @@ npm install qr-code-styling
 </body>
 </html>
 ```
+
 ---
 
 [**React example (Codesandbox)**](https://codesandbox.io/s/qr-code-styling-react-example-l8rwl?file=/src/App.js)
@@ -74,72 +78,73 @@ npm install qr-code-styling
 ### API Documentation
 
 #### QRCodeStyling instance
+
 `new QRCodeStyling(options) => QRCodeStyling`
 
-Param  |Type  |Description
--------|------|------------
-options|object|Init object
+| 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                   |             |The image will be copied to the center of the QR code
-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
-cornersDotOptionsHelper|object                   |             |Dots in the corners styling options
-backgroundOptions      |object                   |             |QR background styling options
+| Property                | Type   | Default Value | Description                                           |
+| ----------------------- | ------ | ------------- | ----------------------------------------------------- |
+| data                    | string |               | The date will be encoded to the QR code               |
+| image                   | string |               | The image will be copied to the center of the QR code |
+| 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                 |
+| cornersDotOptionsHelper | object |               | Dots in the corners styling options                   |
+| backgroundOptions       | object |               | QR background styling options                         |
 
 `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'`
+| 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.
+| 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
---------|------------------------------------------------------------------------------|-------------|-------------------
-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
+| Property | Type                                                                           | Default Value | Description         |
+| -------- | ------------------------------------------------------------------------------ | ------------- | ------------------- |
+| 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.backgroundOptions` structure
 
-Property|Type  |Default Value
---------|------|-------------
-color   |string|`'#fff'`
-gradient|object|
+| Property | Type   | Default Value |
+| -------- | ------ | ------------- |
+| color    | string | `'#fff'`      |
+| gradient | object |
 
 `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
+| 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
+| 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    |
 
 Gradient structure
 
@@ -151,11 +156,11 @@ Gradient structure
 
 `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' }]`
+| 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
 
@@ -167,31 +172,32 @@ Gradient colorStops structure
 
 `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
+| 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
+
 `QRCodeStyling.append(container) => void`
 
-Param    |Type       |Description
----------|-----------|-----------
-container|DOM element|This container will be used for appending of the QR code
+| Param     | Type        | Description                                              |
+| --------- | ----------- | -------------------------------------------------------- |
+| container | DOM element | This container will be used for appending of the QR code |
 
 `QRCodeStyling.serialize() => Promise<string>`
 
 `QRCodeStyling.update(options) => void`
 
-Param  |Type  |Description
--------|------|--------------------------------------
-options|object|The same options as for initialization
+| Param   | Type   | Description                            |
+| ------- | ------ | -------------------------------------- |
+| options | object | The same options as for initialization |
 
 `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
+| Param     | Type                   | Description                                                                               |
+| --------- | ---------------------- | ----------------------------------------------------------------------------------------- |
+| extension | (svg, options) => void | Extension is a function that takes svg and previously applied options and modifies an svg |
 
 `applyExtension` example
 
@@ -219,8 +225,6 @@ const extension = (svg, options) => {
 
 `QRCodeStyling.deleteExtension() => void`
 
-
 ### License
 
 [MIT License](https://raw.githubusercontent.com/kozakdenys/qr-code-styling/master/LICENSE). Copyright (c) 2021 Denys Kozak
-

package/lib/index.d.ts

@@ -1,13 +1,5 @@
 import { ErrorCorrectionPercents } from "./constants/errorCorrectionPercents";
 import { QRCodeStyling } from "./core/QRCodeStyling";
 import * as browserUtils from "./tools/browserUtils";
-import * as types from "./types";
-export * from "./tools/browserUtils";
 export * from "./types";
-export { ErrorCorrectionPercents, QRCodeStyling };
-declare const _default: {
-    QRCodeStyling: typeof QRCodeStyling;
-    browserUtils: typeof browserUtils;
-    types: typeof types;
-};
-export default _default;
+export { ErrorCorrectionPercents, QRCodeStyling, browserUtils };

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

@@ -610,7 +610,7 @@ class QRDot {
     }
 }
 
-function calculateImageSize({ originalHeight, originalWidth, maxHiddenDots, maxHiddenAxisDots, dotSize }) {
+function calculateImageSize({ originalHeight, originalWidth, maxHiddenDots, maxHiddenAxisDots, dotSize, margin }) {
     const hideDots = { x: 0, y: 0 };
     const imageSize = { x: 0, y: 0 };
     if (originalHeight <= 0 || originalWidth <= 0 || maxHiddenDots <= 0 || dotSize <= 0) {
@@ -621,41 +621,65 @@ function calculateImageSize({ originalHeight, originalWidth, maxHiddenDots, maxH
             hideXDots: 0
         };
     }
-    const k = originalHeight / originalWidth;
-    //Getting the maximum possible axis hidden dots
-    hideDots.x = Math.floor(Math.sqrt(maxHiddenDots / k));
-    //The count of hidden dot's can't be less than 1
-    if (hideDots.x <= 0)
-        hideDots.x = 1;
-    //Check the limit of the maximum allowed axis hidden dots
-    if (maxHiddenAxisDots && maxHiddenAxisDots < hideDots.x)
-        hideDots.x = maxHiddenAxisDots;
-    //The count of dots should be odd
-    if (hideDots.x % 2 === 0)
-        hideDots.x--;
-    imageSize.x = hideDots.x * dotSize;
-    //Calculate opposite axis hidden dots based on axis value.
-    //The value will be odd.
-    //We use ceil to prevent dots covering by the image.
-    hideDots.y = 1 + 2 * Math.ceil((hideDots.x * k - 1) / 2);
-    imageSize.y = Math.round(imageSize.x * k);
-    //If the result dots count is bigger than max - then decrease size and calculate again
-    if (hideDots.y * hideDots.x > maxHiddenDots || (maxHiddenAxisDots && maxHiddenAxisDots < hideDots.y)) {
-        if (maxHiddenAxisDots && maxHiddenAxisDots < hideDots.y) {
-            hideDots.y = maxHiddenAxisDots;
-            if (hideDots.y % 2 === 0)
-                hideDots.x--;
+    if (maxHiddenAxisDots) {
+        // Adjust max size based on image aspect ratio and margin
+        const maxD = maxHiddenAxisDots - 2 * margin;
+        if (originalWidth > originalHeight) {
+            const newH = (maxD * originalHeight) / originalWidth + 2 * margin;
+            maxHiddenDots = Math.min(maxHiddenDots, maxHiddenAxisDots * newH);
         }
         else {
-            hideDots.y -= 2;
+            const newW = (maxD * originalWidth) / originalHeight + 2 * margin;
+            maxHiddenDots = Math.min(maxHiddenDots, maxHiddenAxisDots * newW);
         }
-        imageSize.y = hideDots.y * dotSize;
-        hideDots.x = 1 + 2 * Math.ceil((hideDots.y / k - 1) / 2);
-        imageSize.x = Math.round(imageSize.y / k);
+    }
+    const m2 = margin ** 2;
+    const w2 = originalWidth ** 2;
+    const h2 = originalHeight ** 2;
+    //Margin-adjuseted scale
+    const scale = (Math.sqrt(w2 * m2 + h2 * m2 + originalWidth * originalHeight * (maxHiddenDots - 2 * m2)) -
+        originalHeight * margin -
+        originalWidth * margin) /
+        (originalHeight * originalWidth);
+    hideDots.x = Math.max(1, Math.floor(originalWidth * scale + 2 * margin));
+    hideDots.y = Math.max(1, Math.floor(originalHeight * scale + 2 * margin));
+    if (hideDots.x > hideDots.y) {
+        //The count of dots should be odd
+        if (hideDots.x % 2 === 0)
+            hideDots.x--;
+        hideDots.y = Math.max(1, Math.ceil(((hideDots.x - 2 * margin) * originalHeight) / originalWidth + 2 * margin));
+        //The count of dots should be odd
+        if (hideDots.y % 2 === 0)
+            hideDots.y--;
+    }
+    else if (hideDots.x < hideDots.y) {
+        //The count of dots should be odd
+        if (hideDots.y % 2 === 0)
+            hideDots.y--;
+        hideDots.x = Math.max(1, Math.ceil(((hideDots.y - 2 * margin) * originalWidth) / originalHeight + 2 * margin));
+        //The count of dots should be odd
+        if (hideDots.x % 2 === 0)
+            hideDots.x--;
+    }
+    const maxW = (hideDots.x - 2 * margin) * dotSize;
+    const maxH = (hideDots.y - 2 * margin) * dotSize;
+    if (maxW <= 0 || maxH <= 0) {
+        return {
+            height: 0,
+            width: 0,
+            hideYDots: hideDots.y,
+            hideXDots: hideDots.x
+        };
+    }
+    imageSize.x = maxW;
+    imageSize.y = (maxW * originalHeight) / originalWidth;
+    if (imageSize.y > maxH) {
+        imageSize.y = maxH;
+        imageSize.x = (maxH * originalWidth) / originalHeight;
     }
     return {
-        height: imageSize.y,
-        width: imageSize.x,
+        height: Math.round(imageSize.y + 2 * margin * dotSize),
+        width: Math.round(imageSize.x + 2 * margin * dotSize),
         hideYDots: hideDots.y,
         hideXDots: hideDots.x
     };
@@ -774,7 +798,8 @@ class QRSVG {
                 originalHeight: size.height,
                 maxHiddenDots,
                 maxHiddenAxisDots: count - 14,
-                dotSize
+                dotSize,
+                margin: imageOptions.margin
             });
         }
         this.drawBackground();
@@ -796,7 +821,7 @@ class QRSVG {
             return true;
         });
         this.drawCorners();
-        if (this._options.image) {
+        if (this._options.image && drawImageSize.width > 0 && drawImageSize.height > 0) {
             await this.drawImage({ width: drawImageSize.width, height: drawImageSize.height, count, dotSize });
         }
     }