@qrcode-js/core - npm Package Compare versions

Comparing version 0.5.0 to 0.6.0

lib/awesome-qr.d.ts

@@ -24,3 +24,4 @@ /// <reference types="node" />
     static defaultOptions: Required<Omit<Options, ExcludedProperties>>;
-    constructor(canvas: Canvas, createCanvas: (width: number, height: number) => Canvas, loadImage: any, options: Options);
+    constructor(canvas: Canvas, createCanvas: (width: number, height: number) => Canvas, loadImage: any);
+    setOptions(options: Options): void;
     draw(): Promise<Buffer | undefined>;
@@ -27,0 +28,0 @@ private _clear;

lib/awesome-qr.js

 import { QRCodeModel, QRErrorCorrectLevel, QRUtil } from "./qrcode.js";
 const clamp = (val, min, max) => Math.min(Math.max(val, min), max);
 export class AwesomeQR {
-    constructor(canvas, createCanvas, loadImage, options) {
+    constructor(canvas, createCanvas, loadImage) {
+        this.qrCode = null;
+        this.options = null;
         // Save arguments
@@ -9,2 +11,7 @@ this.canvas = canvas;
         this.loadImage = loadImage;
+        this.canvasContext = this.canvas.getContext("2d");
+    }
+    setOptions(options) {
+        if (!options)
+            return;
         this.options = options;
@@ -14,3 +21,2 @@ const size = this.options.size ?? AwesomeQR.defaultOptions.size;
         this.canvas.height = size;
-        this.canvasContext = this.canvas.getContext("2d");
         const correctLevel = this.options.qr?.correctLevel ??
@@ -73,2 +79,4 @@ AwesomeQR.defaultOptions.qr.correctLevel ??
     _drawPoint(canvasContext, left, top, nSize, parameters, otherCells) {
+        if (!this.options)
+            return;
         let scale = this.options.dots?.scale ?? AwesomeQR.defaultOptions.dots.scale ?? 1;
@@ -90,2 +98,4 @@ scale = clamp(scale, 0, 1);
     _drawFinder(canvasContext, left, top, size) {
+        if (!this.options)
+            return;
         // range [0-1]
@@ -102,2 +112,4 @@ let round = this.options.finder?.round ?? AwesomeQR.defaultOptions.finder.round ?? 0;
     async _draw() {
+        if (!this.options || !this.qrCode)
+            throw new Error("Must call setOptions before draw");
         /**
@@ -165,5 +177,5 @@ * Count of the squares
             }
-            const logoSize = viewportSize * logoScale;
-            const logoX = 0.5 * (viewportSize - logoSize * displayRatioX);
-            const logoY = 0.5 * (viewportSize - logoSize * displayRatioY);
+            const logoSpace = viewportSize * logoScale;
+            const logoX = 0.5 * (viewportSize - logoSpace * displayRatioX);
+            const logoY = 0.5 * (viewportSize - logoSpace * displayRatioY);
             logoSideX = Math.floor((logoX - logoMargin) / nSize);
@@ -176,3 +188,2 @@ logoSideY = Math.floor((logoY - logoMargin) / nSize);
                 logoY,
-                margin: logoMargin,
             };
@@ -246,9 +257,7 @@ }
         this._drawFinder(mainCanvasContext, 0, nCount - 7, nSize);
+        let gradient;
         if (typeof this.options.gradient === "function") {
-            const gradient = this.options.gradient(mainCanvasContext, viewportSize);
-            if (gradient?.toString() == "[object CanvasGradient]") {
-                mainCanvasContext.fillStyle = gradient;
-                mainCanvasContext.globalCompositeOperation = "source-in";
-                mainCanvasContext.fillRect(0, 0, viewportSize, viewportSize);
-                mainCanvasContext.globalCompositeOperation = "source-over";
+            const grad = this.options.gradient(mainCanvasContext, viewportSize);
+            if (grad?.toString() == "[object CanvasGradient]") {
+                gradient = grad;
             }
@@ -259,2 +268,29 @@ else {
         }
+        else if (typeof this.options.gradient === "object") {
+            if (this.options.gradient.type === "linear") {
+                const direction = this.options.gradient.direction;
+                gradient = mainCanvasContext.createLinearGradient(0, 0, direction === "to-left" ? viewportSize : 0, direction === "to-bottom" ? viewportSize : 0);
+            }
+            else {
+                gradient = mainCanvasContext.createRadialGradient(viewportSize / 2, viewportSize / 2, 0, viewportSize / 2, viewportSize / 2, (viewportSize / 2) * Math.SQRT2);
+            }
+            for (const colorStop of this.options.gradient.colorStops) {
+                gradient.addColorStop(colorStop.stop, colorStop.color);
+            }
+        }
+        if (gradient) {
+            mainCanvasContext.fillStyle = gradient;
+            mainCanvasContext.globalCompositeOperation = "source-in";
+            mainCanvasContext.fillRect(0, 0, viewportSize, viewportSize);
+            mainCanvasContext.globalCompositeOperation = "source-over";
+        }
+        else {
+            if (this.options.onEvent) {
+                this.options.onEvent("gradient", mainCanvasContext, {
+                    nSize,
+                    nCount,
+                    size: viewportSize,
+                });
+            }
+        }
         // Fill the margin
@@ -261,0 +297,0 @@ if (this.options.margin?.color) {

lib/types.d.ts

 /// <reference types="node" />
+declare type ColorStop = {
+    color: string;
+    stop: number;
+};
+declare type LinearGradientDirections = "to-left" | "to-bottom";
+declare type RadialGradient = {
+    type: "round";
+    colorStops: ColorStop[];
+};
+declare type LinearGradient = {
+    type: "linear";
+    direction: LinearGradientDirections;
+    colorStops: ColorStop[];
+};
 export declare type Options = {
@@ -112,7 +126,10 @@ /**
      *
-     * Must return a CanvasGradient
+     * Can be of three types:
+     * - A function that return a CanvasGradient object
+     * - A LinearGradient object
+     * - A RadialGradient object
      *
      * Overrides colorDark option
      */
-    gradient?: (ctx: any, size: number) => any;
+    gradient?: ((ctx: any, size: number) => any) | LinearGradient | RadialGradient;
     /**
@@ -217,3 +234,3 @@ * Background options
 };
-declare type EventTypes = "start-foreground" | "end-foreground" | "start-background" | "end-background" | "final-canvas";
+declare type EventTypes = "start-foreground" | "gradient" | "end-foreground" | "start-background" | "end-background" | "final-canvas";
 export {};

package.json

@@ -33,4 +33,4 @@ {
   "types": "lib/index.d.ts",
-  "version": "0.5.0",
-  "gitHead": "f11438705d53415ef5ad65c302a68078f07f453a"
+  "version": "0.6.0",
+  "gitHead": "4ad0568e5ef2c90eb02845334ce383b946cb4e47"
 }

README.md

@@ -21,2 +21,17 @@ <!-- Auto-generated README. Do not edit directly -->
 ```typescript
+type ColorStop = {
+  color: string;
+  stop: number;
+};
+type LinearGradientDirections = "to-left" | "to-bottom";
+
+type RadialGradient = {
+  colorStops: ColorStop[];
+  type: "round";
+};
+type LinearGradient = {
+  colorStops: ColorStop[];
+  direction: LinearGradientDirections;
+  type: "linear";
+};
 type Options = {
@@ -38,3 +53,3 @@ text: string;
   };
-  gradient?: Function;
+  gradient?: Union;
   logo?: {
@@ -60,2 +75,3 @@ image: Union;
   | "start-foreground"
+  | "gradient"
   | "end-foreground"
@@ -210,8 +226,12 @@ | "start-background"
 
-**Type** `(ctx: any, size: number) => any`
+**Type** `((ctx: any, size: number) => any) | LinearGradient | RadialGradient`
 
 Function for creating a gradient as foreground color
 
-Must return a CanvasGradient
+Can be of three types:
 
+- A function that return a CanvasGradient object
+- A LinearGradient object
+- A RadialGradient object
+
 Overrides colorDark option
@@ -218,0 +238,0 @@

No alert changes

Improved metrics

Total package byte prevSize

73634

increased by3.34%

Lines of code

1762

increased by3.16%

Number of lines in readme file

399

increased by5.28%

No dependency changes