@liquid-js/qr-code-styling 3.0.0-1 → 3.0.0-3

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

@@ -3,49 +3,6 @@ import { fileTypeFromBuffer } from 'file-type';
 import sharp from 'sharp';
 import qrcode from 'qrcode-generator';
 
-var DotType;
-(function (DotType) {
-    DotType["dots"] = "dots";
-    DotType["randomDots"] = "random-dots";
-    DotType["rounded"] = "rounded";
-    DotType["verticalLines"] = "vertical-lines";
-    DotType["horizontalLines"] = "horizontal-lines";
-    DotType["classy"] = "classy";
-    DotType["classyRounded"] = "classy-rounded";
-    DotType["square"] = "square";
-    DotType["smallSquare"] = "small-square";
-    DotType["extraRounded"] = "extra-rounded";
-    DotType["diamond"] = "diamond";
-})(DotType || (DotType = {}));
-var CornerDotType;
-(function (CornerDotType) {
-    CornerDotType["dot"] = "dot";
-    CornerDotType["square"] = "square";
-    CornerDotType["heart"] = "heart";
-    CornerDotType["extraRounded"] = "extra-rounded";
-    CornerDotType["classy"] = "classy";
-    CornerDotType["outpoint"] = "outpoint";
-    CornerDotType["inpoint"] = "inpoint";
-})(CornerDotType || (CornerDotType = {}));
-var CornerSquareType;
-(function (CornerSquareType) {
-    CornerSquareType["dot"] = "dot";
-    CornerSquareType["square"] = "square";
-    CornerSquareType["extraRounded"] = "extra-rounded";
-    CornerSquareType["classy"] = "classy";
-    CornerSquareType["outpoint"] = "outpoint";
-    CornerSquareType["inpoint"] = "inpoint";
-})(CornerSquareType || (CornerSquareType = {}));
-var GradientType;
-(function (GradientType) {
-    GradientType["radial"] = "radial";
-    GradientType["linear"] = "linear";
-})(GradientType || (GradientType = {}));
-var ShapeType;
-(function (ShapeType) {
-    ShapeType["square"] = "square";
-    ShapeType["circle"] = "circle";
-})(ShapeType || (ShapeType = {}));
 const TypeNumber = Array(41)
     .fill(0)
     .map((_, i) => i);
@@ -64,34 +21,6 @@ var Mode;
     Mode["kanji"] = "Kanji";
     Mode["unicode"] = "Unicode";
 })(Mode || (Mode = {}));
-var FileExtension;
-(function (FileExtension) {
-    FileExtension["svg"] = "svg";
-    FileExtension["png"] = "png";
-    FileExtension["jpeg"] = "jpeg";
-    FileExtension["webp"] = "webp";
-})(FileExtension || (FileExtension = {}));
-
-const ErrorCorrectionPercents = {
-    [ErrorCorrectionLevel.L]: 0.07,
-    [ErrorCorrectionLevel.M]: 0.15,
-    [ErrorCorrectionLevel.Q]: 0.25,
-    [ErrorCorrectionLevel.H]: 0.3
-};
-
-function getMode(data) {
-    switch (true) {
-        case /^[0-9]*$/.test(data):
-            return Mode.numeric;
-        case /^[0-9A-Z $%*+\-./:]*$/.test(data):
-            return Mode.alphanumeric;
-        // eslint-disable-next-line no-control-regex
-        case /[^\u0000-\u00ff]/.test(data):
-            return Mode.unicode;
-        default:
-            return Mode.byte;
-    }
-}
 
 const isObject = (obj) => !!obj && typeof obj === "object" && !Array.isArray(obj);
 function mergeDeep(target, ...sources) {
@@ -117,6 +46,11 @@ function mergeDeep(target, ...sources) {
     return mergeDeep(target, ...sources);
 }
 
+var GradientType;
+(function (GradientType) {
+    GradientType["radial"] = "radial";
+    GradientType["linear"] = "linear";
+})(GradientType || (GradientType = {}));
 function sanitizeGradient(gradient) {
     const newGradient = { ...gradient };
     if (!newGradient.colorStops || !newGradient.colorStops.length) {
@@ -134,6 +68,68 @@ function sanitizeGradient(gradient) {
     }));
     return newGradient;
 }
+
+var DotType;
+(function (DotType) {
+    DotType["dot"] = "dot";
+    DotType["randomDot"] = "random-dot";
+    DotType["rounded"] = "rounded";
+    DotType["verticalLine"] = "vertical-line";
+    DotType["horizontalLine"] = "horizontal-line";
+    DotType["classy"] = "classy";
+    DotType["classyRounded"] = "classy-rounded";
+    DotType["square"] = "square";
+    DotType["smallSquare"] = "small-square";
+    DotType["extraRounded"] = "extra-rounded";
+    DotType["diamond"] = "diamond";
+})(DotType || (DotType = {}));
+var CornerDotType;
+(function (CornerDotType) {
+    CornerDotType["dot"] = "dot";
+    CornerDotType["square"] = "square";
+    CornerDotType["heart"] = "heart";
+    CornerDotType["extraRounded"] = "extra-rounded";
+    CornerDotType["classy"] = "classy";
+    CornerDotType["outpoint"] = "outpoint";
+    CornerDotType["inpoint"] = "inpoint";
+})(CornerDotType || (CornerDotType = {}));
+var CornerSquareType;
+(function (CornerSquareType) {
+    CornerSquareType["dot"] = "dot";
+    CornerSquareType["square"] = "square";
+    CornerSquareType["extraRounded"] = "extra-rounded";
+    CornerSquareType["classy"] = "classy";
+    CornerSquareType["outpoint"] = "outpoint";
+    CornerSquareType["inpoint"] = "inpoint";
+})(CornerSquareType || (CornerSquareType = {}));
+var ShapeType;
+(function (ShapeType) {
+    ShapeType["square"] = "square";
+    ShapeType["circle"] = "circle";
+})(ShapeType || (ShapeType = {}));
+const defaultOptions = {
+    document: undefined,
+    shape: ShapeType.square,
+    width: undefined,
+    height: undefined,
+    data: "",
+    qrOptions: {
+        typeNumber: TypeNumber[0],
+        mode: undefined,
+        errorCorrectionLevel: ErrorCorrectionLevel.Q
+    },
+    imageOptions: {
+        hideBackgroundDots: true,
+        imageSize: 0.4,
+        crossOrigin: undefined,
+        margin: 0
+    },
+    dotsOptions: {
+        type: DotType.square,
+        color: "#000",
+        size: 10
+    }
+};
 function sanitizeOptions(options) {
     const newOptions = { ...options };
     newOptions.imageOptions = {
@@ -179,88 +175,86 @@ function sanitizeOptions(options) {
     return newOptions;
 }
 
-const defaultOptions = {
-    document: undefined,
-    shape: ShapeType.square,
-    width: undefined,
-    height: undefined,
-    data: "",
-    qrOptions: {
-        typeNumber: TypeNumber[0],
-        mode: undefined,
-        errorCorrectionLevel: ErrorCorrectionLevel.Q
-    },
-    imageOptions: {
-        hideBackgroundDots: true,
-        imageSize: 0.4,
-        crossOrigin: undefined,
-        margin: 0
-    },
-    dotsOptions: {
-        type: DotType.square,
-        color: "#000",
-        size: 10
-    }
+const ErrorCorrectionPercents = {
+    [ErrorCorrectionLevel.L]: 0.07,
+    [ErrorCorrectionLevel.M]: 0.15,
+    [ErrorCorrectionLevel.Q]: 0.25,
+    [ErrorCorrectionLevel.H]: 0.3
 };
+function getMode(data) {
+    switch (true) {
+        case /^[0-9]*$/.test(data):
+            return Mode.numeric;
+        case /^[0-9A-Z $%*+\-./:]*$/.test(data):
+            return Mode.alphanumeric;
+        // eslint-disable-next-line no-control-regex
+        case /[^\u0000-\u00ff]/.test(data):
+            return Mode.unicode;
+        default:
+            return Mode.byte;
+    }
+}
 
 class QRCornerDot {
-    constructor({ svg, type, document }) {
-        this._svg = svg;
-        this._type = type;
-        this._document = document;
+    get element() {
+        return this._element;
+    }
+    constructor(type, document) {
+        this.type = type;
+        this.document = document;
     }
-    draw(x, y, size, rotation) {
-        const type = this._type;
+    draw(args) {
+        const type = this.type;
         let drawFunction;
         switch (type) {
             case CornerDotType.square:
-                drawFunction = this._drawSquare;
+                drawFunction = this.drawSquare;
                 break;
             case CornerDotType.heart:
-                drawFunction = this._drawHeart;
+                drawFunction = this.drawHeart;
                 break;
             case CornerDotType.extraRounded:
-                drawFunction = this._drawRounded;
+                drawFunction = this.drawRounded;
                 break;
             case CornerDotType.classy:
-                drawFunction = this._drawClassy;
+                drawFunction = this.drawClassy;
                 break;
             case CornerDotType.inpoint:
-                drawFunction = this._drawInpoint;
+                drawFunction = this.drawInpoint;
                 break;
             case CornerDotType.outpoint:
-                drawFunction = this._drawOutpoint;
+                drawFunction = this.drawOutpoint;
                 break;
             case CornerDotType.dot:
             default:
-                drawFunction = this._drawDot;
+                drawFunction = this.drawDot;
         }
-        drawFunction.call(this, { x, y, size, rotation });
+        drawFunction.call(this, args);
     }
-    _rotateFigure({ x, y, size, rotation = 0, draw }) {
+    rotateFigure({ x, y, size, rotation = 0, draw }) {
         const cx = x + size / 2;
         const cy = y + size / 2;
         draw();
         this._element?.setAttribute("transform", `rotate(${(180 * rotation) / Math.PI},${cx},${cy})`);
     }
-    _basicDot(args) {
+    basicDot(args) {
         const { size, x, y } = args;
-        this._rotateFigure({
+        this.rotateFigure({
             ...args,
             draw: () => {
-                this._element = this._document.createElementNS("http://www.w3.org/2000/svg", "circle");
+                this._element = this.document.createElementNS("http://www.w3.org/2000/svg", "circle");
                 this._element.setAttribute("cx", String(x + size / 2));
                 this._element.setAttribute("cy", String(y + size / 2));
                 this._element.setAttribute("r", String(size / 2));
             }
         });
     }
-    _basicSquare(args) {
+    basicSquare(args) {
         const { size, x, y } = args;
-        this._rotateFigure({
+        this.rotateFigure({
             ...args,
             draw: () => {
-                this._element = this._document.createElementNS("http://www.w3.org/2000/svg", "rect");
+                this._element = this.document.createElementNS("http://www.w3.org/2000/svg", "rect");
                 this._element.setAttribute("x", String(x));
                 this._element.setAttribute("y", String(y));
                 this._element.setAttribute("width", String(size));
@@ -268,9 +262,9 @@ class QRCornerDot {
             }
         });
     }
-    _basicHeart(args) {
+    basicHeart(args) {
         const { size, x, y } = args;
-        this._element = this._document.createElementNS("http://www.w3.org/2000/svg", "path");
+        this._element = this.document.createElementNS("http://www.w3.org/2000/svg", "path");
         const path = [
             "M",
             0.925,
@@ -397,12 +391,12 @@ class QRCornerDot {
         })
             .join(" "));
     }
-    _basicRounded(args) {
+    basicRounded(args) {
         const { size, x, y } = args;
-        this._rotateFigure({
+        this.rotateFigure({
             ...args,
             draw: () => {
-                this._element = this._document.createElementNS("http://www.w3.org/2000/svg", "rect");
+                this._element = this.document.createElementNS("http://www.w3.org/2000/svg", "rect");
                 this._element.setAttribute("x", String(x));
                 this._element.setAttribute("y", String(y));
                 this._element.setAttribute("width", String(size));
@@ -412,13 +406,13 @@ class QRCornerDot {
             }
         });
     }
-    _basicClassy(args) {
+    basicClassy(args) {
         const { size, x, y } = args;
         const dotSize = size / 7;
-        this._rotateFigure({
+        this.rotateFigure({
             ...args,
             draw: () => {
-                this._element = this._document.createElementNS("http://www.w3.org/2000/svg", "path");
+                this._element = this.document.createElementNS("http://www.w3.org/2000/svg", "path");
                 this._element.setAttribute("clip-rule", "evenodd");
                 this._element.setAttribute("d", `M ${x} ${y + 2.5 * dotSize}` +
                     `v ${2 * dotSize}` +
@@ -432,13 +426,13 @@ class QRCornerDot {
             }
         });
     }
-    _basicInpoint(args) {
+    basicInpoint(args) {
         const { size, x, y } = args;
         const dotSize = size;
-        this._rotateFigure({
+        this.rotateFigure({
             ...args,
             draw: () => {
-                this._element = this._document.createElementNS("http://www.w3.org/2000/svg", "path");
+                this._element = this.document.createElementNS("http://www.w3.org/2000/svg", "path");
                 this._element.setAttribute("clip-rule", "evenodd");
                 this._element.setAttribute("d", `M ${x} ${y + dotSize / 2}` +
                     `v ${dotSize / 4}` +
@@ -452,79 +446,81 @@ class QRCornerDot {
             }
         });
     }
-    _drawDot({ x, y, size, rotation }) {
-        this._basicDot({ x, y, size, rotation });
+    drawDot({ x, y, size, rotation }) {
+        this.basicDot({ x, y, size, rotation });
     }
-    _drawSquare({ x, y, size, rotation }) {
-        this._basicSquare({ x, y, size, rotation });
+    drawSquare({ x, y, size, rotation }) {
+        this.basicSquare({ x, y, size, rotation });
     }
-    _drawHeart({ x, y, size, rotation }) {
+    drawHeart({ x, y, size, rotation }) {
         const scaleFactor = 0.2;
-        this._basicHeart({
+        this.basicHeart({
             x: x - (scaleFactor * size) / 2,
             y: y - (scaleFactor * size) / 2,
             size: size * (1 + scaleFactor),
             rotation
         });
     }
-    _drawRounded({ x, y, size, rotation }) {
-        this._basicRounded({ x, y, size, rotation });
+    drawRounded({ x, y, size, rotation }) {
+        this.basicRounded({ x, y, size, rotation });
     }
-    _drawClassy({ x, y, size, rotation }) {
-        this._basicClassy({ x, y, size, rotation });
+    drawClassy({ x, y, size, rotation }) {
+        this.basicClassy({ x, y, size, rotation });
     }
-    _drawInpoint({ x, y, size, rotation }) {
-        this._basicInpoint({ x, y, size, rotation });
+    drawInpoint({ x, y, size, rotation }) {
+        this.basicInpoint({ x, y, size, rotation });
     }
-    _drawOutpoint({ x, y, size, rotation }) {
-        this._basicInpoint({ x, y, size, rotation: (rotation || 0) + Math.PI });
+    drawOutpoint({ x, y, size, rotation }) {
+        this.basicInpoint({ x, y, size, rotation: (rotation || 0) + Math.PI });
     }
 }
 
 class QRCornerSquare {
-    constructor({ svg, type, document }) {
-        this._svg = svg;
-        this._type = type;
-        this._document = document;
+    get element() {
+        return this._element;
+    }
+    constructor(type, document) {
+        this.type = type;
+        this.document = document;
     }
-    draw(x, y, size, rotation) {
-        const type = this._type;
+    draw(args) {
+        const type = this.type;
         let drawFunction;
         switch (type) {
             case CornerSquareType.square:
-                drawFunction = this._drawSquare;
+                drawFunction = this.drawSquare;
                 break;
             case CornerSquareType.extraRounded:
-                drawFunction = this._drawExtraRounded;
+                drawFunction = this.drawExtraRounded;
                 break;
             case CornerSquareType.classy:
-                drawFunction = this._drawClassy;
+                drawFunction = this.drawClassy;
                 break;
             case CornerSquareType.outpoint:
-                drawFunction = this._drawOutpoint;
+                drawFunction = this.drawOutpoint;
                 break;
             case CornerSquareType.inpoint:
-                drawFunction = this._drawInpoint;
+                drawFunction = this.drawInpoint;
                 break;
             case CornerSquareType.dot:
             default:
-                drawFunction = this._drawDot;
+                drawFunction = this.drawDot;
         }
-        drawFunction.call(this, { x, y, size, rotation });
+        drawFunction.call(this, args);
     }
-    _rotateFigure({ x, y, size, rotation = 0, draw }) {
+    rotateFigure({ x, y, size, rotation = 0, draw }) {
         const cx = x + size / 2;
         const cy = y + size / 2;
         draw();
         this._element?.setAttribute("transform", `rotate(${(180 * rotation) / Math.PI},${cx},${cy})`);
     }
-    _basicDot(args) {
+    basicDot(args) {
         const { size, x, y } = args;
         const dotSize = size / 7;
-        this._rotateFigure({
+        this.rotateFigure({
             ...args,
             draw: () => {
-                this._element = this._document.createElementNS("http://www.w3.org/2000/svg", "path");
+                this._element = this.document.createElementNS("http://www.w3.org/2000/svg", "path");
                 this._element.setAttribute("clip-rule", "evenodd");
                 this._element.setAttribute("d", `M ${x + size / 2} ${y}` + // M cx, y //  Move to top of ring
                     `a ${size / 2} ${size / 2} 0 1 0 0.1 0` + // a outerRadius, outerRadius, 0, 1, 0, 1, 0 // Draw outer arc, but don't close it
@@ -536,13 +532,13 @@ class QRCornerSquare {
             }
         });
     }
-    _basicSquare(args) {
+    basicSquare(args) {
         const { size, x, y } = args;
         const dotSize = size / 7;
-        this._rotateFigure({
+        this.rotateFigure({
             ...args,
             draw: () => {
-                this._element = this._document.createElementNS("http://www.w3.org/2000/svg", "path");
+                this._element = this.document.createElementNS("http://www.w3.org/2000/svg", "path");
                 this._element.setAttribute("clip-rule", "evenodd");
                 this._element.setAttribute("d", `M ${x} ${y}` +
                     `v ${size}` +
@@ -557,13 +553,13 @@ class QRCornerSquare {
             }
         });
     }
-    _basicExtraRounded(args) {
+    basicExtraRounded(args) {
         const { size, x, y } = args;
         const dotSize = size / 7;
-        this._rotateFigure({
+        this.rotateFigure({
             ...args,
             draw: () => {
-                this._element = this._document.createElementNS("http://www.w3.org/2000/svg", "path");
+                this._element = this.document.createElementNS("http://www.w3.org/2000/svg", "path");
                 this._element.setAttribute("clip-rule", "evenodd");
                 this._element.setAttribute("d", `M ${x} ${y + 2.5 * dotSize}` +
                     `v ${2 * dotSize}` +
@@ -574,6 +570,7 @@ class QRCornerSquare {
                     `a ${2.5 * dotSize} ${2.5 * dotSize}, 0, 0, 0, ${-dotSize * 2.5} ${-dotSize * 2.5}` +
                     `h ${-2 * dotSize}` +
                     `a ${2.5 * dotSize} ${2.5 * dotSize}, 0, 0, 0, ${-dotSize * 2.5} ${dotSize * 2.5}` +
+                    `z` +
                     `M ${x + 2.5 * dotSize} ${y + dotSize}` +
                     `h ${2 * dotSize}` +
                     `a ${1.5 * dotSize} ${1.5 * dotSize}, 0, 0, 1, ${dotSize * 1.5} ${dotSize * 1.5}` +
@@ -582,17 +579,18 @@ class QRCornerSquare {
                     `h ${-2 * dotSize}` +
                     `a ${1.5 * dotSize} ${1.5 * dotSize}, 0, 0, 1, ${-dotSize * 1.5} ${-dotSize * 1.5}` +
                     `v ${-2 * dotSize}` +
-                    `a ${1.5 * dotSize} ${1.5 * dotSize}, 0, 0, 1, ${dotSize * 1.5} ${-dotSize * 1.5}`);
+                    `a ${1.5 * dotSize} ${1.5 * dotSize}, 0, 0, 1, ${dotSize * 1.5} ${-dotSize * 1.5}` +
+                    `z`);
             }
         });
     }
-    _basicClassy(args) {
+    basicClassy(args) {
         const { size, x, y } = args;
         const dotSize = size / 7;
-        this._rotateFigure({
+        this.rotateFigure({
             ...args,
             draw: () => {
-                this._element = this._document.createElementNS("http://www.w3.org/2000/svg", "path");
+                this._element = this.document.createElementNS("http://www.w3.org/2000/svg", "path");
                 this._element.setAttribute("clip-rule", "evenodd");
                 this._element.setAttribute("d", `M ${x} ${y + 2.5 * dotSize}` +
                     `v ${2 * dotSize}` +
@@ -614,13 +612,13 @@ class QRCornerSquare {
             }
         });
     }
-    _basicInpoint(args) {
+    basicInpoint(args) {
         const { size, x, y } = args;
         const dotSize = size / 7;
-        this._rotateFigure({
+        this.rotateFigure({
             ...args,
             draw: () => {
-                this._element = this._document.createElementNS("http://www.w3.org/2000/svg", "path");
+                this._element = this.document.createElementNS("http://www.w3.org/2000/svg", "path");
                 this._element.setAttribute("clip-rule", "evenodd");
                 this._element.setAttribute("d", `M ${x} ${y + 2.5 * dotSize}` +
                     `v ${2 * dotSize}` +
@@ -630,6 +628,7 @@ class QRCornerSquare {
                     `a ${2.5 * dotSize} ${2.5 * dotSize}, 0, 0, 0, ${-dotSize * 2.5} ${-dotSize * 2.5}` +
                     `h ${-2 * dotSize}` +
                     `a ${2.5 * dotSize} ${2.5 * dotSize}, 0, 0, 0, ${-dotSize * 2.5} ${dotSize * 2.5}` +
+                    "z" +
                     `M ${x + 2.5 * dotSize} ${y + dotSize}` +
                     `h ${2 * dotSize}` +
                     `a ${1.5 * dotSize} ${1.5 * dotSize}, 0, 0, 1, ${dotSize * 1.5} ${dotSize * 1.5}` +
@@ -637,100 +636,103 @@ class QRCornerSquare {
                     `h ${-3.5 * dotSize}` +
                     `a ${1.5 * dotSize} ${1.5 * dotSize}, 0, 0, 1, ${-dotSize * 1.5} ${-dotSize * 1.5}` +
                     `v ${-2 * dotSize}` +
-                    `a ${1.5 * dotSize} ${1.5 * dotSize}, 0, 0, 1, ${dotSize * 1.5} ${-dotSize * 1.5}`);
+                    `a ${1.5 * dotSize} ${1.5 * dotSize}, 0, 0, 1, ${dotSize * 1.5} ${-dotSize * 1.5}` +
+                    `z`);
             }
         });
     }
-    _drawDot({ x, y, size, rotation }) {
-        this._basicDot({ x, y, size, rotation });
+    drawDot({ x, y, size, rotation }) {
+        this.basicDot({ x, y, size, rotation });
     }
-    _drawSquare({ x, y, size, rotation }) {
-        this._basicSquare({ x, y, size, rotation });
+    drawSquare({ x, y, size, rotation }) {
+        this.basicSquare({ x, y, size, rotation });
     }
-    _drawExtraRounded({ x, y, size, rotation }) {
-        this._basicExtraRounded({ x, y, size, rotation });
+    drawExtraRounded({ x, y, size, rotation }) {
+        this.basicExtraRounded({ x, y, size, rotation });
     }
-    _drawClassy({ x, y, size, rotation }) {
-        this._basicClassy({ x, y, size, rotation });
+    drawClassy({ x, y, size, rotation }) {
+        this.basicClassy({ x, y, size, rotation });
     }
-    _drawInpoint({ x, y, size, rotation }) {
-        this._basicInpoint({ x, y, size, rotation });
+    drawInpoint({ x, y, size, rotation }) {
+        this.basicInpoint({ x, y, size, rotation });
     }
-    _drawOutpoint({ x, y, size, rotation }) {
-        this._basicInpoint({ x, y, size, rotation: (rotation || 0) + Math.PI });
+    drawOutpoint({ x, y, size, rotation }) {
+        this.basicInpoint({ x, y, size, rotation: (rotation || 0) + Math.PI });
     }
 }
 
 class QRDot {
-    constructor({ svg, type, document }) {
-        this._svg = svg;
-        this._type = type;
-        this._document = document;
+    get element() {
+        return this._element;
+    }
+    constructor(type, document) {
+        this.type = type;
+        this.document = document;
     }
-    draw(x, y, size, getNeighbor) {
-        const type = this._type;
+    draw(args) {
+        const type = this.type;
         let drawFunction;
         switch (type) {
-            case DotType.dots:
-                drawFunction = this._drawDot;
+            case DotType.dot:
+                drawFunction = this.drawDot;
                 break;
-            case DotType.randomDots:
-                drawFunction = this._drawRandomDot;
+            case DotType.randomDot:
+                drawFunction = this.drawRandomDot;
                 break;
             case DotType.classy:
-                drawFunction = this._drawClassy;
+                drawFunction = this.drawClassy;
                 break;
             case DotType.classyRounded:
-                drawFunction = this._drawClassyRounded;
+                drawFunction = this.drawClassyRounded;
                 break;
             case DotType.rounded:
-                drawFunction = this._drawRounded;
+                drawFunction = this.drawRounded;
                 break;
-            case DotType.verticalLines:
-                drawFunction = this._drawVerticalLines;
+            case DotType.verticalLine:
+                drawFunction = this.drawVerticalLine;
                 break;
-            case DotType.horizontalLines:
-                drawFunction = this._drawHorizontalLines;
+            case DotType.horizontalLine:
+                drawFunction = this.drawHorizontalLine;
                 break;
             case DotType.extraRounded:
-                drawFunction = this._drawExtraRounded;
+                drawFunction = this.drawExtraRounded;
                 break;
             case DotType.diamond:
-                drawFunction = this._drawDiamond;
+                drawFunction = this.drawDiamond;
                 break;
             case DotType.smallSquare:
-                drawFunction = this._drawSmallSquare;
+                drawFunction = this.drawSmallSquare;
                 break;
             case DotType.square:
             default:
-                drawFunction = this._drawSquare;
+                drawFunction = this.drawSquare;
         }
-        drawFunction.call(this, { x, y, size, getNeighbor });
+        drawFunction.call(this, args);
     }
-    _rotateFigure({ x, y, size, rotation = 0, draw }) {
+    rotateFigure({ x, y, size, rotation = 0, draw }) {
         const cx = x + size / 2;
         const cy = y + size / 2;
         draw();
         this._element?.setAttribute("transform", `rotate(${(180 * rotation) / Math.PI},${cx},${cy})`);
     }
-    _basicDot(args) {
+    basicDot(args) {
         const { size, x, y } = args;
-        this._rotateFigure({
+        this.rotateFigure({
             ...args,
             draw: () => {
-                this._element = this._document.createElementNS("http://www.w3.org/2000/svg", "circle");
+                this._element = this.document.createElementNS("http://www.w3.org/2000/svg", "circle");
                 this._element.setAttribute("cx", String(x + size / 2));
                 this._element.setAttribute("cy", String(y + size / 2));
                 this._element.setAttribute("r", String(size / 2));
             }
         });
     }
-    _basicSquare(args) {
+    basicSquare(args) {
         const { size, x, y } = args;
-        this._rotateFigure({
+        this.rotateFigure({
             ...args,
             draw: () => {
-                this._element = this._document.createElementNS("http://www.w3.org/2000/svg", "rect");
+                this._element = this.document.createElementNS("http://www.w3.org/2000/svg", "rect");
                 this._element.setAttribute("x", String(x));
                 this._element.setAttribute("y", String(y));
                 this._element.setAttribute("width", String(size));
@@ -739,12 +741,12 @@ class QRDot {
         });
     }
     //if rotation === 0 - right side is rounded
-    _basicSideRounded(args) {
+    basicSideRounded(args) {
         const { size, x, y } = args;
-        this._rotateFigure({
+        this.rotateFigure({
             ...args,
             draw: () => {
-                this._element = this._document.createElementNS("http://www.w3.org/2000/svg", "path");
+                this._element = this.document.createElementNS("http://www.w3.org/2000/svg", "path");
                 this._element.setAttribute("d", `M ${x} ${y}` + //go to top left position
                     `v ${size}` + //draw line to left bottom corner
                     `h ${size / 2}` + //draw line to left bottom corner + half of size right
@@ -754,12 +756,12 @@ class QRDot {
         });
     }
     //if rotation === 0 - top right corner is rounded
-    _basicCornerRounded(args) {
+    basicCornerRounded(args) {
         const { size, x, y } = args;
-        this._rotateFigure({
+        this.rotateFigure({
             ...args,
             draw: () => {
-                this._element = this._document.createElementNS("http://www.w3.org/2000/svg", "path");
+                this._element = this.document.createElementNS("http://www.w3.org/2000/svg", "path");
                 this._element.setAttribute("d", `M ${x} ${y}` + //go to top left position
                     `v ${size}` + //draw line to left bottom corner
                     `h ${size}` + //draw line to right bottom corner
@@ -770,12 +772,12 @@ class QRDot {
         });
     }
     //if rotation === 0 - top right corner is rounded
-    _basicCornerExtraRounded(args) {
+    basicCornerExtraRounded(args) {
         const { size, x, y } = args;
-        this._rotateFigure({
+        this.rotateFigure({
             ...args,
             draw: () => {
-                this._element = this._document.createElementNS("http://www.w3.org/2000/svg", "path");
+                this._element = this.document.createElementNS("http://www.w3.org/2000/svg", "path");
                 this._element.setAttribute("d", `M ${x} ${y}` + //go to top left position
                     `v ${size}` + //draw line to left bottom corner
                     `h ${size}` + //draw line to right bottom corner
@@ -785,12 +787,12 @@ class QRDot {
         });
     }
     //if rotation === 0 - left bottom and right top corners are rounded
-    _basicCornersRounded(args) {
+    basicCornersRounded(args) {
         const { size, x, y } = args;
-        this._rotateFigure({
+        this.rotateFigure({
             ...args,
             draw: () => {
-                this._element = this._document.createElementNS("http://www.w3.org/2000/svg", "path");
+                this._element = this.document.createElementNS("http://www.w3.org/2000/svg", "path");
                 this._element.setAttribute("d", `M ${x} ${y}` + //go to left top position
                     `v ${size / 2}` + //draw line to left top corner + half of size bottom
                     `a ${size / 2} ${size / 2}, 0, 0, 0, ${size / 2} ${size / 2}` + // draw rounded left bottom corner
@@ -801,38 +803,38 @@ class QRDot {
             }
         });
     }
-    _drawDot({ x, y, size }) {
-        this._basicDot({ x, y, size, rotation: 0 });
+    drawDot({ x, y, size }) {
+        this.basicDot({ x, y, size, rotation: 0 });
     }
-    _drawRandomDot({ x, y, size }) {
+    drawRandomDot({ x, y, size }) {
         const randomFactor = Math.random() * (1 - 0.75) + 0.75;
-        this._basicDot({ x, y, size: size * randomFactor, rotation: 0 });
+        this.basicDot({ x, y, size: size * randomFactor, rotation: 0 });
     }
-    _drawSquare({ x, y, size }) {
-        this._basicSquare({ x, y, size, rotation: 0 });
+    drawSquare({ x, y, size }) {
+        this.basicSquare({ x, y, size, rotation: 0 });
     }
-    _drawSmallSquare({ x, y, size }) {
+    drawSmallSquare({ x, y, size }) {
         const originalSize = size;
         size = originalSize * 0.7;
         x = x + originalSize * 0.15;
         y = y + originalSize * 0.15;
-        this._basicSquare({ x, y, size, rotation: 0 });
+        this.basicSquare({ x, y, size, rotation: 0 });
     }
-    _drawDiamond({ x, y, size }) {
-        this._basicSquare({ x, y, size, rotation: Math.PI / 4 });
+    drawDiamond({ x, y, size }) {
+        this.basicSquare({ x, y, size, rotation: Math.PI / 4 });
     }
-    _drawRounded({ x, y, size, getNeighbor }) {
+    drawRounded({ x, y, size, getNeighbor }) {
         const leftNeighbor = getNeighbor ? +getNeighbor(-1, 0) : 0;
         const rightNeighbor = getNeighbor ? +getNeighbor(1, 0) : 0;
         const topNeighbor = getNeighbor ? +getNeighbor(0, -1) : 0;
         const bottomNeighbor = getNeighbor ? +getNeighbor(0, 1) : 0;
         const neighborsCount = leftNeighbor + rightNeighbor + topNeighbor + bottomNeighbor;
         if (neighborsCount === 0) {
-            this._basicDot({ x, y, size, rotation: 0 });
+            this.basicDot({ x, y, size, rotation: 0 });
             return;
         }
         if (neighborsCount > 2 || (leftNeighbor && rightNeighbor) || (topNeighbor && bottomNeighbor)) {
-            this._basicSquare({ x, y, size, rotation: 0 });
+            this.basicSquare({ x, y, size, rotation: 0 });
             return;
         }
         if (neighborsCount === 2) {
@@ -846,7 +848,7 @@ class QRDot {
             else if (rightNeighbor && bottomNeighbor) {
                 rotation = -Math.PI / 2;
             }
-            this._basicCornerRounded({ x, y, size, rotation });
+            this.basicCornerRounded({ x, y, size, rotation });
             return;
         }
         if (neighborsCount === 1) {
@@ -860,11 +862,11 @@ class QRDot {
             else if (bottomNeighbor) {
                 rotation = -Math.PI / 2;
             }
-            this._basicSideRounded({ x, y, size, rotation });
+            this.basicSideRounded({ x, y, size, rotation });
             return;
         }
     }
-    _drawVerticalLines({ x, y, size, getNeighbor }) {
+    drawVerticalLine({ x, y, size, getNeighbor }) {
         const leftNeighbor = getNeighbor ? +getNeighbor(-1, 0) : 0;
         const rightNeighbor = getNeighbor ? +getNeighbor(1, 0) : 0;
         const topNeighbor = getNeighbor ? +getNeighbor(0, -1) : 0;
@@ -873,25 +875,25 @@ class QRDot {
         if (neighborsCount === 0 ||
             (leftNeighbor && !(topNeighbor || bottomNeighbor)) ||
             (rightNeighbor && !(topNeighbor || bottomNeighbor))) {
-            this._basicDot({ x, y, size, rotation: 0 });
+            this.basicDot({ x, y, size, rotation: 0 });
             return;
         }
         if (topNeighbor && bottomNeighbor) {
-            this._basicSquare({ x, y, size, rotation: 0 });
+            this.basicSquare({ x, y, size, rotation: 0 });
             return;
         }
         if (topNeighbor && !bottomNeighbor) {
             const rotation = Math.PI / 2;
-            this._basicSideRounded({ x, y, size, rotation });
+            this.basicSideRounded({ x, y, size, rotation });
             return;
         }
         if (bottomNeighbor && !topNeighbor) {
             const rotation = -Math.PI / 2;
-            this._basicSideRounded({ x, y, size, rotation });
+            this.basicSideRounded({ x, y, size, rotation });
             return;
         }
     }
-    _drawHorizontalLines({ x, y, size, getNeighbor }) {
+    drawHorizontalLine({ x, y, size, getNeighbor }) {
         const leftNeighbor = getNeighbor ? +getNeighbor(-1, 0) : 0;
         const rightNeighbor = getNeighbor ? +getNeighbor(1, 0) : 0;
         const topNeighbor = getNeighbor ? +getNeighbor(0, -1) : 0;
@@ -900,36 +902,36 @@ class QRDot {
         if (neighborsCount === 0 ||
             (topNeighbor && !(leftNeighbor || rightNeighbor)) ||
             (bottomNeighbor && !(leftNeighbor || rightNeighbor))) {
-            this._basicDot({ x, y, size, rotation: 0 });
+            this.basicDot({ x, y, size, rotation: 0 });
             return;
         }
         if (leftNeighbor && rightNeighbor) {
-            this._basicSquare({ x, y, size, rotation: 0 });
+            this.basicSquare({ x, y, size, rotation: 0 });
             return;
         }
         if (leftNeighbor && !rightNeighbor) {
             const rotation = 0;
-            this._basicSideRounded({ x, y, size, rotation });
+            this.basicSideRounded({ x, y, size, rotation });
             return;
         }
         if (rightNeighbor && !leftNeighbor) {
             const rotation = Math.PI;
-            this._basicSideRounded({ x, y, size, rotation });
+            this.basicSideRounded({ x, y, size, rotation });
             return;
         }
     }
-    _drawExtraRounded({ x, y, size, getNeighbor }) {
+    drawExtraRounded({ x, y, size, getNeighbor }) {
         const leftNeighbor = getNeighbor ? +getNeighbor(-1, 0) : 0;
         const rightNeighbor = getNeighbor ? +getNeighbor(1, 0) : 0;
         const topNeighbor = getNeighbor ? +getNeighbor(0, -1) : 0;
         const bottomNeighbor = getNeighbor ? +getNeighbor(0, 1) : 0;
         const neighborsCount = leftNeighbor + rightNeighbor + topNeighbor + bottomNeighbor;
         if (neighborsCount === 0) {
-            this._basicDot({ x, y, size, rotation: 0 });
+            this.basicDot({ x, y, size, rotation: 0 });
             return;
         }
         if (neighborsCount > 2 || (leftNeighbor && rightNeighbor) || (topNeighbor && bottomNeighbor)) {
-            this._basicSquare({ x, y, size, rotation: 0 });
+            this.basicSquare({ x, y, size, rotation: 0 });
             return;
         }
         if (neighborsCount === 2) {
@@ -943,7 +945,7 @@ class QRDot {
             else if (rightNeighbor && bottomNeighbor) {
                 rotation = -Math.PI / 2;
             }
-            this._basicCornerExtraRounded({ x, y, size, rotation });
+            this.basicCornerExtraRounded({ x, y, size, rotation });
             return;
         }
         if (neighborsCount === 1) {
@@ -957,49 +959,49 @@ class QRDot {
             else if (bottomNeighbor) {
                 rotation = -Math.PI / 2;
             }
-            this._basicSideRounded({ x, y, size, rotation });
+            this.basicSideRounded({ x, y, size, rotation });
             return;
         }
     }
-    _drawClassy({ x, y, size, getNeighbor }) {
+    drawClassy({ x, y, size, getNeighbor }) {
         const leftNeighbor = getNeighbor ? +getNeighbor(-1, 0) : 0;
         const rightNeighbor = getNeighbor ? +getNeighbor(1, 0) : 0;
         const topNeighbor = getNeighbor ? +getNeighbor(0, -1) : 0;
         const bottomNeighbor = getNeighbor ? +getNeighbor(0, 1) : 0;
         const neighborsCount = leftNeighbor + rightNeighbor + topNeighbor + bottomNeighbor;
         if (neighborsCount === 0) {
-            this._basicCornersRounded({ x, y, size, rotation: Math.PI / 2 });
+            this.basicCornersRounded({ x, y, size, rotation: Math.PI / 2 });
             return;
         }
         if (!leftNeighbor && !topNeighbor) {
-            this._basicCornerRounded({ x, y, size, rotation: -Math.PI / 2 });
+            this.basicCornerRounded({ x, y, size, rotation: -Math.PI / 2 });
             return;
         }
         if (!rightNeighbor && !bottomNeighbor) {
-            this._basicCornerRounded({ x, y, size, rotation: Math.PI / 2 });
+            this.basicCornerRounded({ x, y, size, rotation: Math.PI / 2 });
             return;
         }
-        this._basicSquare({ x, y, size, rotation: 0 });
+        this.basicSquare({ x, y, size, rotation: 0 });
     }
-    _drawClassyRounded({ x, y, size, getNeighbor }) {
+    drawClassyRounded({ x, y, size, getNeighbor }) {
         const leftNeighbor = getNeighbor ? +getNeighbor(-1, 0) : 0;
         const rightNeighbor = getNeighbor ? +getNeighbor(1, 0) : 0;
         const topNeighbor = getNeighbor ? +getNeighbor(0, -1) : 0;
         const bottomNeighbor = getNeighbor ? +getNeighbor(0, 1) : 0;
         const neighborsCount = leftNeighbor + rightNeighbor + topNeighbor + bottomNeighbor;
         if (neighborsCount === 0) {
-            this._basicCornersRounded({ x, y, size, rotation: Math.PI / 2 });
+            this.basicCornersRounded({ x, y, size, rotation: Math.PI / 2 });
             return;
         }
         if (!leftNeighbor && !topNeighbor) {
-            this._basicCornerExtraRounded({ x, y, size, rotation: -Math.PI / 2 });
+            this.basicCornerExtraRounded({ x, y, size, rotation: -Math.PI / 2 });
             return;
         }
         if (!rightNeighbor && !bottomNeighbor) {
-            this._basicCornerExtraRounded({ x, y, size, rotation: Math.PI / 2 });
+            this.basicCornerExtraRounded({ x, y, size, rotation: Math.PI / 2 });
             return;
         }
-        this._basicSquare({ x, y, size, rotation: 0 });
+        this.basicSquare({ x, y, size, rotation: 0 });
     }
 }
 
@@ -1029,24 +1031,21 @@ const browserImageTools = {
             }
         });
     },
-    getSize(options) {
+    getSize(src, crossOrigin) {
         return new Promise((resolve, reject) => {
-            if (!options.image) {
-                return reject("Image is not defined");
-            }
             const image = new Image();
-            if (typeof options.imageOptions?.crossOrigin === "string") {
-                image.crossOrigin = options.imageOptions.crossOrigin;
+            if (crossOrigin === "string") {
+                image.crossOrigin = crossOrigin;
             }
             image.onload = () => {
                 resolve({ width: image.width, height: image.height });
             };
             image.onerror = image.onabort = reject;
-            if (typeof options.image == "string")
-                image.src = options.image;
+            if (typeof src == "string")
+                image.src = src;
             else
                 browserImageTools
-                    .toDataURL(options.image)
+                    .toDataURL(src)
                     .then((url) => (image.src = url))
                     .catch(reject);
         });
@@ -1151,43 +1150,42 @@ const alignmentCount = [
     [1, 1]
 ];
 class QRSVG {
-    //TODO don't pass all options to this class
+    get element() {
+        return this._element;
+    }
     constructor(options) {
-        this._document = options.document;
-        this._element = this._document.createElementNS("http://www.w3.org/2000/svg", "svg");
+        this.options = options;
+        this.document = options.document;
+        this._element = this.document.createElementNS("http://www.w3.org/2000/svg", "svg");
         this._element.setAttribute("width", String(options.width));
         this._element.setAttribute("height", String(options.height));
         this._element.setAttribute("viewBox", `0 0 ${options.width} ${options.height}`);
-        this._defs = this._document.createElementNS("http://www.w3.org/2000/svg", "defs");
-        this._element.appendChild(this._defs);
-        this._imageTools = options.imageTools || browserImageTools;
-        this._options = options;
+        this.defs = this.document.createElementNS("http://www.w3.org/2000/svg", "defs");
+        this._element.appendChild(this.defs);
+        this.imageTools = options.imageTools || browserImageTools;
     }
     get width() {
-        return this._options.width;
+        return this.options.width;
     }
     get height() {
-        return this._options.height;
-    }
-    getElement() {
-        return this._element;
+        return this.options.height;
     }
     async drawQR(qr) {
         const count = qr.getModuleCount();
         const typeNumber = parseInt(((count - 17) / 4).toFixed(0), 10);
-        const dotSize = this._options.dotsOptions.size;
+        const dotSize = this.options.dotsOptions.size;
         let drawImageSize = {
             hideXDots: 0,
             hideYDots: 0,
             width: 0,
             height: 0
         };
-        this._qr = qr;
-        if (this._options.image) {
+        this.qr = qr;
+        if (this.options.image) {
             //We need it to get image size
-            const size = await this._imageTools.getSize(this._options);
-            const { imageOptions, qrOptions } = this._options;
-            const coverLevel = imageOptions.imageSize * ErrorCorrectionPercents[qrOptions.errorCorrectionLevel];
+            const size = await this.imageTools.getSize(this.options.image, this.options.imageOptions.crossOrigin);
+            const { imageOptions, errorCorrectionPercent } = this.options;
+            const coverLevel = imageOptions.imageSize * errorCorrectionPercent;
             const alignment = alignmentCount.find((v) => v[0] <= typeNumber) || [0, 0];
             const maxHiddenDots = Math.floor(coverLevel * (count * count - 3 * 8 * 8 - 2 * (count - 16) - alignment[1] * 25));
             drawImageSize = calculateImageSize({
@@ -1201,7 +1199,7 @@ class QRSVG {
         }
         this.drawBackground();
         this.drawDots((i, j) => {
-            if (this._options.imageOptions.hideBackgroundDots) {
+            if (this.options.imageOptions.hideBackgroundDots) {
                 if (i >= (count - drawImageSize.hideXDots) / 2 &&
                     i < (count + drawImageSize.hideXDots) / 2 &&
                     j >= (count - drawImageSize.hideYDots) / 2 &&
@@ -1218,17 +1216,17 @@ class QRSVG {
             return true;
         });
         this.drawCorners();
-        if (this._options.image && drawImageSize.width > 0 && drawImageSize.height > 0) {
+        if (this.options.image && drawImageSize.width > 0 && drawImageSize.height > 0) {
             await this.drawImage({ width: drawImageSize.width, height: drawImageSize.height, count, dotSize });
         }
     }
     drawBackground() {
         const element = this._element;
-        const options = this._options;
+        const options = this.options;
         if (element && options.backgroundOptions) {
             const gradientOptions = options.backgroundOptions.gradient;
             const color = options.backgroundOptions.color;
-            this._createColor({
+            this.createColor({
                 options: gradientOptions,
                 color: color,
                 additionalRotation: 0,
@@ -1239,50 +1237,55 @@ class QRSVG {
                 name: "background-color"
             });
             const size = Math.min(options.width, options.height);
-            const element = this._document.createElementNS("http://www.w3.org/2000/svg", "rect");
-            [this._backgroundMask, this._backgroundMaskGroup] = this._createMask("mask-background-color");
-            this._defs.appendChild(this._backgroundMask);
+            const element = this.document.createElementNS("http://www.w3.org/2000/svg", "rect");
+            [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._backgroundMaskGroup.appendChild(element);
+            this.backgroundMaskGroup.appendChild(element);
         }
     }
     drawDots(filter) {
-        if (!this._qr) {
+        if (!this.qr) {
             throw "QR code is not defined";
         }
-        const options = this._options;
-        const count = this._qr.getModuleCount();
+        const options = this.options;
+        const count = this.qr.getModuleCount();
         if (count > options.width || count > options.height) {
             throw "The canvas is too small.";
         }
         const minSize = Math.min(options.width, options.height);
-        const dotSize = this._options.dotsOptions.size;
+        const dotSize = this.options.dotsOptions.size;
         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._dotsMask, this._dotsMaskGroup] = this._createMask("mask-dot-color");
-        this._defs.appendChild(this._dotsMask);
+        const dot = new QRDot(options.dotsOptions.type, this.document);
+        [this.dotsMask, this.dotsMaskGroup] = this.createMask("mask-dot-color");
+        this.defs.appendChild(this.dotsMask);
         for (let i = 0; i < count; i++) {
             for (let j = 0; j < count; j++) {
                 if (filter && !filter(i, j)) {
                     continue;
                 }
-                if (!this._qr?.isDark(j, i)) {
+                if (!this.qr?.isDark(j, i)) {
                     continue;
                 }
-                dot.draw(xBeginning + i * dotSize, yBeginning + j * dotSize, dotSize, (xOffset, yOffset) => {
-                    if (i + xOffset < 0 || j + yOffset < 0 || i + xOffset >= count || j + yOffset >= count)
-                        return false;
-                    if (filter && !filter(i + xOffset, j + yOffset))
-                        return false;
-                    return !!this._qr && this._qr.isDark(j + yOffset, i + xOffset);
+                dot.draw({
+                    x: xBeginning + i * dotSize,
+                    y: yBeginning + j * dotSize,
+                    size: dotSize,
+                    getNeighbor: (xOffset, yOffset) => {
+                        if (i + xOffset < 0 || j + yOffset < 0 || i + xOffset >= count || j + yOffset >= count)
+                            return false;
+                        if (filter && !filter(i + xOffset, j + yOffset))
+                            return false;
+                        return !!this.qr && this.qr.isDark(j + yOffset, i + xOffset);
+                    }
                 });
-                if (dot._element && this._dotsMask) {
-                    this._dotsMaskGroup.appendChild(dot._element);
+                if (dot.element && this.dotsMask) {
+                    this.dotsMaskGroup.appendChild(dot.element);
                 }
             }
         }
@@ -1290,7 +1293,7 @@ class QRSVG {
         let colorY = yBeginning;
         let colorCount = count;
         if (options.shape === ShapeType.circle) {
-            const margin = (this._options.backgroundOptions && this._options.backgroundOptions.margin) || 0;
+            const margin = (this.options.backgroundOptions && this.options.backgroundOptions.margin) || 0;
             const additionalDots = Math.floor((minSize / dotSize - count - 2 * margin) / 2);
             const fakeCount = count + additionalDots * 2;
             const xFakeBeginning = xBeginning - additionalDots * dotSize;
@@ -1315,7 +1318,7 @@ class QRSVG {
                         continue;
                     }
                     //Get random dots from QR code to show it outside of QR code
-                    fakeMatrix[i][j] = this._qr.isDark(j - 2 * additionalDots < 0 ? j : j >= count ? j - 2 * additionalDots : j - additionalDots, i - 2 * additionalDots < 0 ? i : i >= count ? i - 2 * additionalDots : i - additionalDots)
+                    fakeMatrix[i][j] = this.qr.isDark(j - 2 * additionalDots < 0 ? j : j >= count ? j - 2 * additionalDots : j - additionalDots, i - 2 * additionalDots < 0 ? i : i >= count ? i - 2 * additionalDots : i - additionalDots)
                         ? 1
                         : 0;
                 }
@@ -1324,16 +1327,21 @@ class QRSVG {
                 for (let j = 0; j < fakeCount; j++) {
                     if (!fakeMatrix[i][j])
                         continue;
-                    dot.draw(xFakeBeginning + i * dotSize, yFakeBeginning + j * dotSize, dotSize, (xOffset, yOffset) => {
-                        return !!fakeMatrix[i + xOffset]?.[j + yOffset];
+                    dot.draw({
+                        x: xFakeBeginning + i * dotSize,
+                        y: yFakeBeginning + j * dotSize,
+                        size: dotSize,
+                        getNeighbor: (xOffset, yOffset) => {
+                            return !!fakeMatrix[i + xOffset]?.[j + yOffset];
+                        }
                     });
-                    if (dot._element && this._dotsMask) {
-                        this._dotsMaskGroup.appendChild(dot._element);
+                    if (dot.element && this.dotsMask) {
+                        this.dotsMaskGroup.appendChild(dot.element);
                     }
                 }
             }
         }
-        this._createColor({
+        this.createColor({
             options: options.dotsOptions?.gradient,
             color: options.dotsOptions.color,
             additionalRotation: 0,
@@ -1345,16 +1353,16 @@ class QRSVG {
         });
     }
     drawCorners() {
-        if (!this._qr) {
+        if (!this.qr) {
             throw "QR code is not defined";
         }
         const element = this._element;
-        const options = this._options;
+        const options = this.options;
         if (!element) {
             throw "Element code is not defined";
         }
-        const count = this._qr.getModuleCount();
-        const dotSize = this._options.dotsOptions.size;
+        const count = this.qr.getModuleCount();
+        const dotSize = this.options.dotsOptions.size;
         const cornersSquareSize = dotSize * 7;
         const cornersDotSize = dotSize * 3;
         const xBeginning = Math.floor((options.width - count * dotSize) / 2);
@@ -1366,16 +1374,16 @@ class QRSVG {
         ].forEach(([column, row, rotation]) => {
             const x = xBeginning + column * dotSize * (count - 7);
             const y = yBeginning + row * dotSize * (count - 7);
-            let cornersSquareMask = this._dotsMask;
-            let cornersSquareMaskGroup = this._dotsMaskGroup;
-            let cornersDotMask = this._dotsMask;
-            let cornersDotMaskGroup = this._dotsMaskGroup;
+            let cornersSquareMask = this.dotsMask;
+            let cornersSquareMaskGroup = this.dotsMaskGroup;
+            let cornersDotMask = this.dotsMask;
+            let cornersDotMaskGroup = this.dotsMaskGroup;
             if (options.cornersSquareOptions?.gradient || options.cornersSquareOptions?.color) {
-                [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({
+                [cornersSquareMask, cornersSquareMaskGroup] = this.createMask(`mask-corners-square-color-${column}-${row}`);
+                this.defs.appendChild(cornersSquareMask);
+                cornersDotMask = cornersSquareMask;
+                cornersDotMaskGroup = cornersSquareMaskGroup;
+                this.createColor({
                     options: options.cornersSquareOptions?.gradient,
                     color: options.cornersSquareOptions?.color,
                     additionalRotation: rotation,
@@ -1387,36 +1395,40 @@ class QRSVG {
                 });
             }
             if (options.cornersSquareOptions?.type) {
-                const cornersSquare = new QRCornerSquare({
-                    svg: this._element,
-                    type: options.cornersSquareOptions.type,
-                    document: this._document
+                const cornersSquare = new QRCornerSquare(options.cornersSquareOptions.type, this.document);
+                cornersSquare.draw({
+                    x,
+                    y,
+                    size: cornersSquareSize,
+                    rotation
                 });
-                cornersSquare.draw(x, y, cornersSquareSize, rotation);
-                if (cornersSquare._element && cornersSquareMaskGroup) {
-                    cornersSquareMaskGroup.appendChild(cornersSquare._element);
+                if (cornersSquare.element && cornersSquareMaskGroup) {
+                    cornersSquareMaskGroup.appendChild(cornersSquare.element);
                 }
             }
             else {
-                const dot = new QRDot({ svg: this._element, type: options.dotsOptions.type, document: this._document });
+                const dot = new QRDot(options.dotsOptions.type, this.document);
                 for (let i = 0; i < squareMask.length; i++) {
                     for (let j = 0; j < squareMask[i].length; j++) {
                         if (!squareMask[i]?.[j]) {
                             continue;
                         }
-                        dot.draw(x + i * dotSize, y + j * dotSize, dotSize, (xOffset, yOffset) => !!squareMask[i + xOffset]?.[j + yOffset]);
-                        if (dot._element && cornersSquareMaskGroup) {
-                            cornersSquareMaskGroup.appendChild(dot._element);
+                        dot.draw({
+                            x: x + i * dotSize,
+                            y: y + j * dotSize,
+                            size: dotSize,
+                            getNeighbor: (xOffset, yOffset) => !!squareMask[i + xOffset]?.[j + yOffset]
+                        });
+                        if (dot.element && cornersSquareMaskGroup) {
+                            cornersSquareMaskGroup.appendChild(dot.element);
                         }
                     }
                 }
             }
             if (options.cornersDotOptions?.gradient || options.cornersDotOptions?.color) {
-                [cornersDotMask, cornersDotMaskGroup] = this._createMask(`mask-corners-dot-color-${column}-${row}`);
-                this._defs.appendChild(cornersDotMask);
-                this._cornersDotMask = cornersDotMask;
-                this._cornersDotMaskGroup = cornersDotMaskGroup;
-                this._createColor({
+                [cornersDotMask, cornersDotMaskGroup] = this.createMask(`mask-corners-dot-color-${column}-${row}`);
+                this.defs.appendChild(cornersDotMask);
+                this.createColor({
                     options: options.cornersDotOptions?.gradient,
                     color: options.cornersDotOptions?.color,
                     additionalRotation: rotation,
@@ -1428,26 +1440,32 @@ class QRSVG {
                 });
             }
             if (options.cornersDotOptions?.type) {
-                const cornersDot = new QRCornerDot({
-                    svg: this._element,
-                    type: options.cornersDotOptions.type,
-                    document: this._document
+                const cornersDot = new QRCornerDot(options.cornersDotOptions.type, this.document);
+                cornersDot.draw({
+                    x: x + dotSize * 2,
+                    y: y + dotSize * 2,
+                    size: cornersDotSize,
+                    rotation
                 });
-                cornersDot.draw(x + dotSize * 2, y + dotSize * 2, cornersDotSize, rotation);
-                if (cornersDot._element && cornersDotMaskGroup) {
-                    cornersDotMaskGroup.appendChild(cornersDot._element);
+                if (cornersDot.element && cornersDotMaskGroup) {
+                    cornersDotMaskGroup.appendChild(cornersDot.element);
                 }
             }
             else {
-                const dot = new QRDot({ svg: this._element, type: options.dotsOptions.type, document: this._document });
+                const dot = new QRDot(options.dotsOptions.type, this.document);
                 for (let i = 0; i < dotMask.length; i++) {
                     for (let j = 0; j < dotMask[i].length; j++) {
                         if (!dotMask[i]?.[j]) {
                             continue;
                         }
-                        dot.draw(x + i * dotSize, y + j * dotSize, dotSize, (xOffset, yOffset) => !!dotMask[i + xOffset]?.[j + yOffset]);
-                        if (dot._element && cornersDotMaskGroup) {
-                            cornersDotMaskGroup.appendChild(dot._element);
+                        dot.draw({
+                            x: x + i * dotSize,
+                            y: y + j * dotSize,
+                            size: dotSize,
+                            getNeighbor: (xOffset, yOffset) => !!dotMask[i + xOffset]?.[j + yOffset]
+                        });
+                        if (dot.element && cornersDotMaskGroup) {
+                            cornersDotMaskGroup.appendChild(dot.element);
                         }
                     }
                 }
@@ -1455,7 +1473,7 @@ class QRSVG {
         });
     }
     async drawImage({ width, height, count, dotSize }) {
-        const options = this._options;
+        const options = this.options;
         const xBeginning = Math.floor((options.width - count * dotSize) / 2);
         const yBeginning = Math.floor((options.height - count * dotSize) / 2);
         const margin = options.imageOptions.margin * dotSize;
@@ -1463,8 +1481,8 @@ class QRSVG {
         const dy = yBeginning + margin + (count * dotSize - height) / 2;
         const dw = width - margin * 2;
         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");
+        const imageUrl = await this.imageTools.toDataURL(options.image || "");
+        let image = this.document.createElementNS("http://www.w3.org/2000/svg", "image");
         image.setAttributeNS("http://www.w3.org/1999/xlink", "xlink:href", imageUrl || "");
         if (imageUrl.startsWith("data:image/svg+xml;")) {
             let data = imageUrl.substring(19);
@@ -1492,10 +1510,9 @@ class QRSVG {
         image.setAttribute("height", `${dh}px`);
         this._element.appendChild(image);
     }
-    /** @ignore */
-    _createColor({ options, color, additionalRotation, x, y, height, width, name }) {
+    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");
+        const rect = this.document.createElementNS("http://www.w3.org/2000/svg", "rect");
         rect.setAttribute("x", String(x));
         rect.setAttribute("y", String(y));
         rect.setAttribute("height", String(height));
@@ -1504,7 +1521,7 @@ class QRSVG {
         if (options) {
             let gradient;
             if (options.type === GradientType.radial) {
-                gradient = this._document.createElementNS("http://www.w3.org/2000/svg", "radialGradient");
+                gradient = this.document.createElementNS("http://www.w3.org/2000/svg", "radialGradient");
                 gradient.setAttribute("id", name);
                 gradient.setAttribute("gradientUnits", "userSpaceOnUse");
                 gradient.setAttribute("fx", String(x + width / 2));
@@ -1545,7 +1562,7 @@ class QRSVG {
                     y1 = y1 - height / 2;
                     x1 = x1 - width / 2 / Math.tan(rotation);
                 }
-                gradient = this._document.createElementNS("http://www.w3.org/2000/svg", "linearGradient");
+                gradient = this.document.createElementNS("http://www.w3.org/2000/svg", "linearGradient");
                 gradient.setAttribute("id", name);
                 gradient.setAttribute("gradientUnits", "userSpaceOnUse");
                 gradient.setAttribute("x1", String(Math.round(x0)));
@@ -1554,29 +1571,29 @@ class QRSVG {
                 gradient.setAttribute("y2", String(Math.round(y1)));
             }
             options.colorStops.forEach(({ offset, color }) => {
-                const stop = this._document.createElementNS("http://www.w3.org/2000/svg", "stop");
+                const stop = this.document.createElementNS("http://www.w3.org/2000/svg", "stop");
                 stop.setAttribute("offset", `${100 * offset}%`);
                 stop.setAttribute("stop-color", color);
                 gradient.appendChild(stop);
             });
             rect.setAttribute("fill", `url(#${name})`);
-            this._defs.appendChild(gradient);
+            this.defs.appendChild(gradient);
         }
         else if (color) {
             rect.setAttribute("fill", color);
         }
         this._element.appendChild(rect);
     }
-    _createMask(id) {
-        const options = this._options;
-        const mask = this._document.createElementNS("http://www.w3.org/2000/svg", "mask");
+    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");
+        const group = this.document.createElementNS("http://www.w3.org/2000/svg", "g");
         group.setAttribute("fill", "#fff");
         mask.appendChild(group);
         return [mask, group];
@@ -1584,60 +1601,33 @@ class QRSVG {
 }
 
 let QRCodeStyling$1 = class QRCodeStyling {
+    get size() {
+        if (this.qrSVG)
+            return {
+                width: this.qrSVG.width,
+                height: this.qrSVG.height
+            };
+        return undefined;
+    }
     constructor(options) {
-        this._options = options ? sanitizeOptions(mergeDeep(defaultOptions, options)) : defaultOptions;
+        this.options = options ? sanitizeOptions(mergeDeep(defaultOptions, options)) : defaultOptions;
         this.update();
     }
-    /** @ignore */
-    static _clearContainer(container) {
-        if (container) {
-            container.innerHTML = "";
-        }
-    }
-    /** @ignore */
-    _setupSvg() {
-        if (!this._qr) {
-            return;
-        }
-        const count = Math.ceil((this._options.shape == ShapeType.circle ? Math.sqrt(2) : 1) * this._qr.getModuleCount());
-        const margin = (this._options.backgroundOptions && this._options.backgroundOptions.margin) || 0;
-        const size = Math.ceil(this._options.dotsOptions.size * (count + 2 * margin));
-        const qrSVG = new QRSVG({
-            ...this._options,
-            width: size,
-            height: size
-        });
-        this._svg = qrSVG.getElement();
-        this._svgDrawingPromise = qrSVG.drawQR(this._qr).then(() => {
-            if (!this._svg)
-                return;
-            this._extension?.(qrSVG.getElement(), this._options);
-        });
-    }
-    /** @ignore */
-    async _getElement() {
-        if (!this._qr)
-            throw "QR code is empty";
-        if (!this._svg || !this._svgDrawingPromise) {
-            this._setupSvg();
-        }
-        await this._svgDrawingPromise;
-        return this._svg;
-    }
     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) {
+        if (this.container)
+            this.container.innerHTML = "";
+        this.options = options ? sanitizeOptions(mergeDeep(this.options, options)) : this.options;
+        if (!this.options.data) {
             return;
         }
-        if (this._options.stringToBytesFuncs) {
-            Object.assign(qrcode.stringToBytesFuncs, this._options.stringToBytesFuncs);
-            delete this._options.stringToBytesFuncs;
+        if (this.options.stringToBytesFuncs) {
+            Object.assign(qrcode.stringToBytesFuncs, this.options.stringToBytesFuncs);
+            delete this.options.stringToBytesFuncs;
         }
-        this._qr = qrcode(this._options.qrOptions.typeNumber, this._options.qrOptions.errorCorrectionLevel);
-        let mode = this._options.qrOptions.mode || getMode(this._options.data);
+        this.qr = qrcode(this.options.qrOptions.typeNumber, this.options.qrOptions.errorCorrectionLevel);
+        let mode = this.options.qrOptions.mode || getMode(this.options.data);
         if (mode == Mode.unicode) {
             qrcode.stringToBytes = qrcode.stringToBytesFuncs["UTF-8"];
             mode = Mode.byte;
@@ -1645,10 +1635,10 @@ let QRCodeStyling$1 = class QRCodeStyling {
         else {
             qrcode.stringToBytes = qrcode.stringToBytesFuncs["default"];
         }
-        this._qr.addData(this._options.data, mode);
-        this._qr.make();
-        this._setupSvg();
-        this.append(this._container);
+        this.qr.addData(this.options.data, mode);
+        this.qr.make();
+        this.setupSvg();
+        this.append(this.container);
     }
     append(
     /** This container will be used for appending of the QR code */
@@ -1656,13 +1646,10 @@ let QRCodeStyling$1 = class QRCodeStyling {
         if (!container) {
             return;
         }
-        if (typeof container.appendChild !== "function") {
-            throw "Container should be a single DOM node";
-        }
-        if (this._svg) {
-            container.appendChild(this._svg);
+        if (this.qrSVG?.element) {
+            container.appendChild(this.qrSVG.element);
         }
-        this._container = container;
+        this.container = container;
     }
     /**
      *
@@ -1696,27 +1683,57 @@ let QRCodeStyling$1 = class QRCodeStyling {
         if (!extension) {
             throw "Extension function should be defined.";
         }
-        this._extension = extension;
+        this.extension = extension;
         this.update();
     }
     deleteExtension() {
-        this._extension = undefined;
+        this.extension = undefined;
         this.update();
     }
     async serialize() {
-        if (!this._qr)
+        if (!this.qr)
             throw "QR code is empty";
-        const element = await this._getElement();
-        if (!element) {
+        if (!this.qrSVG?.element || !this.svgDrawingPromise) {
+            this.setupSvg();
+        }
+        await this.svgDrawingPromise;
+        if (!this.qrSVG?.element) {
             return;
         }
         const serializer = new XMLSerializer();
-        let source = serializer.serializeToString(element);
+        let source = serializer.serializeToString(this.qrSVG.element);
         source = '<?xml version="1.0" standalone="no"?>\r\n' + source;
         return source;
     }
+    setupSvg() {
+        if (!this.qr) {
+            return;
+        }
+        const count = Math.ceil((this.options.shape == ShapeType.circle ? Math.sqrt(2) : 1) * this.qr.getModuleCount());
+        const margin = (this.options.backgroundOptions && this.options.backgroundOptions.margin) || 0;
+        const size = Math.ceil(this.options.dotsOptions.size * (count + 2 * margin));
+        this.qrSVG = new QRSVG({
+            ...this.options,
+            width: size,
+            height: size,
+            errorCorrectionPercent: ErrorCorrectionPercents[this.options.qrOptions.errorCorrectionLevel]
+        });
+        this.svgDrawingPromise = this.qrSVG.drawQR(this.qr).then(() => {
+            if (!this.qrSVG?.element)
+                return;
+            this.extension?.(this.qrSVG.element, this.options);
+        });
+    }
 };
 
+var FileExtension;
+(function (FileExtension) {
+    FileExtension["svg"] = "svg";
+    FileExtension["png"] = "png";
+    FileExtension["jpeg"] = "jpeg";
+    FileExtension["webp"] = "webp";
+})(FileExtension || (FileExtension = {}));
+
 const browserUtils = undefined;
 class QRCodeStyling extends QRCodeStyling$1 {
     constructor(options) {
@@ -1753,11 +1770,8 @@ class QRCodeStyling extends QRCodeStyling$1 {
             document: options.document || dom,
             imageTools: options.imageTools || {
                 toDataURL: (url) => loadImage(url).then(({ contentType, data }) => `data:${contentType?.replace("application/xml", "image/svg+xml")};base64,${data.toString("base64")}`),
-                getSize: async function (options) {
-                    if (!options.image) {
-                        throw new Error("Image is not defined");
-                    }
-                    const { data } = Buffer.isBuffer(options.image) ? { data: options.image } : await loadImage(options.image);
+                getSize: async (src) => {
+                    const { data } = Buffer.isBuffer(options.image) ? { data: options.image } : await loadImage(src);
                     const meta = await sharp(data).metadata();
                     return {
                         // eslint-disable-next-line @typescript-eslint/no-non-null-assertion