Merge pull request #263 from kozakdenys/add-dots-types-as-corners-types

Make possible to use dots types ('rounded' 'dots' 'classy' 'classy-rounded' 'square' 'extra-rounded') as types for corner dots and corner squares

README.md

@@ -100,22 +100,23 @@ options|object|Init object
 
 `options` structure
 
-Property               |Type                     |Default Value|Description
------------------------|-------------------------|-------------|-----------------------------------------------------
-width                  |number                   |`300`        |Size of canvas
-height                 |number                   |`300`        |Size of canvas
-type                   |string (`'canvas' 'svg'`)|`canvas`     |The type of the element that will be rendered
-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
-margin                 |number                   |`0`          |Margin around canvas
-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                   |             |QR background styling options
-nodeCanvas             |node-canvas              |             |Only specify when running on a node server for canvas type, please refer to node section below
-jsDom                  |jsdom                    |             |Only specify when running on a node server for svg type, please refer to node section below
+Property               | Type                       |Default Value|Description
+-----------------------|----------------------------|---------|-----------------------------------------------------
+width                  | number                     |`300`    |Size of canvas
+height                 | number                     |`300`    |Size of canvas
+type                   | string (`'canvas' 'svg'`)  |`canvas` |The type of the element that will be rendered
+shape                  | string (`'square' 'circle')|`square` |The shape of the qr-code, circle shape adds rundom extra dots arround
+data                   | string                     |         |The data will be encoded to the QR code
+image                  | string                     |         |The image will be copied to the center of the QR code
+margin                 | number                     |`0`      |Margin around canvas
+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                     |         |QR background styling options
+nodeCanvas             | node-canvas                |         |Only specify when running on a node server for canvas type, please refer to node section below
+jsDom                  | jsdom                      |         |Only specify when running on a node server for svg type, please refer to node section below
 
 `options.qrOptions` structure
 
@@ -155,19 +156,19 @@ 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' 'rounded' 'dots' 'classy' 'classy-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' 'rounded' 'dots' 'classy' 'classy-rounded' 'extra-rounded'`) |             |Style of Corners Dot
 
 Gradient structure
 

src/constants/cornerDotTypes.ts

@@ -3,4 +3,4 @@ import { CornerDotTypes } from "../types";
 export default {
   dot: "dot",
   square: "square"
-} as CornerDotTypes;
+} as CornerDotTypes;

src/core/QRSVG.ts

@@ -2,12 +2,12 @@ import calculateImageSize from "../tools/calculateImageSize";
 import toDataUrl from "../tools/toDataUrl";
 import errorCorrectionPercents from "../constants/errorCorrectionPercents";
 import QRDot from "../figures/dot/QRDot";
-import QRCornerSquare from "../figures/cornerSquare/QRCornerSquare";
-import QRCornerDot from "../figures/cornerDot/QRCornerDot";
+import QRCornerSquare, { availableCornerSquareTypes } from "../figures/cornerSquare/QRCornerSquare";
+import QRCornerDot, { availableCornerDotTypes } from "../figures/cornerDot/QRCornerDot";
 import { RequiredOptions } from "./QROptions";
 import gradientTypes from "../constants/gradientTypes";
 import shapeTypes from "../constants/shapeTypes";
-import { QRCode, FilterFunction, Gradient, Window } from "../types";
+import { DotType, QRCode, FilterFunction, Gradient, Window } from "../types";
 import { Image } from "canvas";
 
 const squareMask = [
@@ -348,7 +348,7 @@ export default class QRSVG {
         });
       }
 
-      if (options.cornersSquareOptions?.type) {
+      if (options.cornersSquareOptions?.type && availableCornerSquareTypes.includes(options.cornersSquareOptions.type)) {
         const cornersSquare = new QRCornerSquare({
           svg: this._element,
           type: options.cornersSquareOptions.type,
@@ -363,7 +363,7 @@ export default class QRSVG {
       } else {
         const dot = new QRDot({
           svg: this._element,
-          type: options.dotsOptions.type,
+          type: (options.cornersSquareOptions?.type as DotType) || options.dotsOptions.type,
           window: this._window
         });
 
@@ -405,7 +405,7 @@ export default class QRSVG {
         });
       }
 
-      if (options.cornersDotOptions?.type) {
+      if (options.cornersDotOptions?.type && availableCornerDotTypes.includes(options.cornersDotOptions.type)) {
         const cornersDot = new QRCornerDot({
           svg: this._element,
           type: options.cornersDotOptions.type,
@@ -420,7 +420,7 @@ export default class QRSVG {
       } else {
         const dot = new QRDot({
           svg: this._element,
-          type: options.dotsOptions.type,
+          type: (options.cornersDotOptions?.type as DotType) || options.dotsOptions.type,
           window: this._window
         });
 

src/figures/cornerDot/QRCornerDot.ts

@@ -1,6 +1,8 @@
 import cornerDotTypes from "../../constants/cornerDotTypes";
 import { CornerDotType, RotateFigureArgs, BasicFigureDrawArgs, DrawArgs, Window } from "../../types";
 
+export const availableCornerDotTypes = Object.keys(cornerDotTypes);
+
 export default class QRCornerDot {
   _element?: SVGElement;
   _svg: SVGElement;

src/figures/cornerSquare/QRCornerSquare.ts

@@ -1,6 +1,8 @@
 import cornerSquareTypes from "../../constants/cornerSquareTypes";
 import { CornerSquareType, DrawArgs, BasicFigureDrawArgs, RotateFigureArgs, Window } from "../../types";
 
+export const availableCornerSquareTypes = Object.keys(cornerSquareTypes);
+
 export default class QRCornerSquare {
   _element?: SVGElement;
   _svg: SVGElement;

src/types/index.ts

@@ -7,8 +7,8 @@ export interface UnknownObject {
 }
 
 export type DotType = "dots" | "rounded" | "classy" | "classy-rounded" | "square" | "extra-rounded";
-export type CornerDotType = "dot" | "square";
-export type CornerSquareType = "dot" | "square" | "extra-rounded";
+export type CornerDotType = "dot" | "square" | DotType;
+export type CornerSquareType = "dot" | "square" | "extra-rounded" | DotType;
 export type FileExtension = "svg" | "png" | "jpeg" | "webp";
 export type GradientType = "radial" | "linear";
 export type DrawType = "canvas" | "svg";