@liquid-js/qr-code-styling 3.0.0-2 → 3.0.0-4

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

@@ -1,199 +1,73 @@
-import { DOMImplementation, XMLSerializer as XMLSerializer$1, DOMParser as DOMParser$1 } from '@xmldom/xmldom';
-import { fileTypeFromBuffer } from 'file-type';
-import sharp from 'sharp';
-import qrcode from 'qrcode-generator';
+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);
-var ErrorCorrectionLevel;
-(function (ErrorCorrectionLevel) {
-    ErrorCorrectionLevel["L"] = "L";
-    ErrorCorrectionLevel["M"] = "M";
-    ErrorCorrectionLevel["Q"] = "Q";
-    ErrorCorrectionLevel["H"] = "H";
-})(ErrorCorrectionLevel || (ErrorCorrectionLevel = {}));
-var Mode;
-(function (Mode) {
-    Mode["numeric"] = "Numeric";
-    Mode["alphanumeric"] = "Alphanumeric";
-    Mode["byte"] = "Byte";
-    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 = {}));
+import sharp from "sharp";
 
-const ErrorCorrectionPercents = {
-    [ErrorCorrectionLevel.L]: 0.07,
-    [ErrorCorrectionLevel.M]: 0.15,
-    [ErrorCorrectionLevel.Q]: 0.25,
-    [ErrorCorrectionLevel.H]: 0.3
-};
+import { fileTypeFromBuffer } from "file-type";
 
-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;
-    }
-}
+import { DOMImplementation, XMLSerializer as XMLSerializer$1, DOMParser as DOMParser$1 } from "@xmldom/xmldom";
+
+let TypeNumber = Array(41).fill(0).map(((_, i) => i));
+
+var ErrorCorrectionLevel, Mode;
+
+(ErrorCorrectionLevel = ErrorCorrectionLevel || (ErrorCorrectionLevel = {})).L = "L", 
+ErrorCorrectionLevel.M = "M", ErrorCorrectionLevel.Q = "Q", ErrorCorrectionLevel.H = "H", 
+(Mode = Mode || (Mode = {})).numeric = "Numeric", Mode.alphanumeric = "Alphanumeric", 
+Mode.byte = "Byte", Mode.kanji = "Kanji", Mode.unicode = "Unicode";
+
+let isObject = obj => !!obj && "object" == typeof obj && !Array.isArray(obj);
 
-const isObject = (obj) => !!obj && typeof obj === "object" && !Array.isArray(obj);
 function mergeDeep(target, ...sources) {
-    if (!sources.length)
-        return target;
-    const source = sources.shift();
-    if (source === undefined || !isObject(target) || !isObject(source))
-        return target;
-    target = { ...target };
-    Object.keys(source).forEach((key) => {
-        const targetValue = target[key];
-        const sourceValue = source[key];
-        if (Array.isArray(targetValue) && Array.isArray(sourceValue)) {
-            target[key] = sourceValue;
-        }
-        else if (isObject(targetValue) && isObject(sourceValue)) {
-            target[key] = mergeDeep(Object.assign({}, targetValue), sourceValue);
-        }
-        else {
-            target[key] = sourceValue;
-        }
-    });
-    return mergeDeep(target, ...sources);
+    if (!sources.length) return target;
+    let source = sources.shift();
+    return void 0 !== source && isObject(target) && isObject(source) ? (target = {
+        ...target
+    }, Object.keys(source).forEach((key => {
+        let targetValue = target[key], sourceValue = source[key];
+        Array.isArray(targetValue) && Array.isArray(sourceValue) ? target[key] = sourceValue : isObject(targetValue) && isObject(sourceValue) ? target[key] = mergeDeep(Object.assign({}, targetValue), sourceValue) : target[key] = sourceValue;
+    })), mergeDeep(target, ...sources)) : target;
 }
 
-function sanitizeGradient(gradient) {
-    const newGradient = { ...gradient };
-    if (!newGradient.colorStops || !newGradient.colorStops.length) {
-        throw "Field 'colorStops' is required in gradient";
-    }
-    if (newGradient.rotation) {
-        newGradient.rotation = Number(newGradient.rotation);
-    }
-    else {
-        newGradient.rotation = 0;
-    }
-    newGradient.colorStops = newGradient.colorStops.map((colorStop) => ({
+var GradientType, DotType, CornerDotType, CornerSquareType, ShapeType;
+
+function sanitizeGradient(gradient_newGradient) {
+    if (!(gradient_newGradient = {
+        ...gradient_newGradient
+    }).colorStops || !gradient_newGradient.colorStops.length) throw "Field 'colorStops' is required in gradient";
+    return gradient_newGradient.rotation = gradient_newGradient.rotation ? Number(gradient_newGradient.rotation) : 0, 
+    gradient_newGradient.colorStops = gradient_newGradient.colorStops.map((colorStop => ({
         ...colorStop,
         offset: Number(colorStop.offset)
-    }));
-    return newGradient;
-}
-function sanitizeOptions(options) {
-    const newOptions = { ...options };
-    newOptions.imageOptions = {
-        ...newOptions.imageOptions,
-        hideBackgroundDots: Boolean(newOptions.imageOptions.hideBackgroundDots),
-        imageSize: Math.min(1, Number(newOptions.imageOptions.imageSize)) || 1,
-        margin: Number(newOptions.imageOptions.margin)
-    };
-    newOptions.dotsOptions = {
-        ...newOptions.dotsOptions
-    };
-    if (newOptions.dotsOptions.gradient) {
-        newOptions.dotsOptions.gradient = sanitizeGradient(newOptions.dotsOptions.gradient);
-    }
-    // Ensure integer dot size
-    newOptions.dotsOptions.size = Math.round(Math.max(0, newOptions.dotsOptions.size) || 10);
-    if (newOptions.cornersSquareOptions) {
-        newOptions.cornersSquareOptions = {
-            ...newOptions.cornersSquareOptions
-        };
-        if (newOptions.cornersSquareOptions.gradient) {
-            newOptions.cornersSquareOptions.gradient = sanitizeGradient(newOptions.cornersSquareOptions.gradient);
-        }
-    }
-    if (newOptions.cornersDotOptions) {
-        newOptions.cornersDotOptions = {
-            ...newOptions.cornersDotOptions
-        };
-        if (newOptions.cornersDotOptions.gradient) {
-            newOptions.cornersDotOptions.gradient = sanitizeGradient(newOptions.cornersDotOptions.gradient);
-        }
-    }
-    if (newOptions.backgroundOptions) {
-        newOptions.backgroundOptions = {
-            ...newOptions.backgroundOptions
-        };
-        if (newOptions.backgroundOptions.gradient) {
-            newOptions.backgroundOptions.gradient = sanitizeGradient(newOptions.backgroundOptions.gradient);
-        }
-    }
-    if (!newOptions.document)
-        newOptions.document = document;
-    return newOptions;
+    }))), gradient_newGradient;
 }
 
-const defaultOptions = {
-    document: undefined,
+(GradientType = GradientType || (GradientType = {})).radial = "radial", GradientType.linear = "linear", 
+(DotType = 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", 
+(CornerDotType = CornerDotType || (CornerDotType = {})).dot = "dot", CornerDotType.square = "square", 
+CornerDotType.heart = "heart", CornerDotType.extraRounded = "extra-rounded", CornerDotType.classy = "classy", 
+CornerDotType.outpoint = "outpoint", CornerDotType.inpoint = "inpoint", (CornerSquareType = CornerSquareType || (CornerSquareType = {})).dot = "dot", 
+CornerSquareType.square = "square", CornerSquareType.extraRounded = "extra-rounded", 
+CornerSquareType.classy = "classy", CornerSquareType.outpoint = "outpoint", CornerSquareType.inpoint = "inpoint", 
+(ShapeType = ShapeType || (ShapeType = {})).square = "square", ShapeType.circle = "circle";
+
+let defaultOptions = {
+    document: void 0,
     shape: ShapeType.square,
-    width: undefined,
-    height: undefined,
+    width: void 0,
+    height: void 0,
     data: "",
     qrOptions: {
         typeNumber: TypeNumber[0],
-        mode: undefined,
+        mode: void 0,
         errorCorrectionLevel: ErrorCorrectionLevel.Q
     },
     imageOptions: {
-        hideBackgroundDots: true,
-        imageSize: 0.4,
-        crossOrigin: undefined,
+        hideBackgroundDots: !0,
+        imageSize: .4,
+        crossOrigin: void 0,
         margin: 0
     },
     dotsOptions: {
@@ -203,1038 +77,774 @@ const defaultOptions = {
     }
 };
 
+function sanitizeOptions(newOptions_options) {
+    return (newOptions_options = {
+        ...newOptions_options
+    }).imageOptions = {
+        ...newOptions_options.imageOptions,
+        hideBackgroundDots: !!newOptions_options.imageOptions.hideBackgroundDots,
+        imageSize: Math.min(1, Number(newOptions_options.imageOptions.imageSize)) || 1,
+        margin: Number(newOptions_options.imageOptions.margin)
+    }, newOptions_options.dotsOptions = {
+        ...newOptions_options.dotsOptions
+    }, newOptions_options.dotsOptions.gradient && (newOptions_options.dotsOptions.gradient = sanitizeGradient(newOptions_options.dotsOptions.gradient)), 
+    newOptions_options.dotsOptions.size = Math.round(Math.max(0, newOptions_options.dotsOptions.size) || 10), 
+    newOptions_options.cornersSquareOptions && (newOptions_options.cornersSquareOptions = {
+        ...newOptions_options.cornersSquareOptions
+    }, newOptions_options.cornersSquareOptions.gradient && (newOptions_options.cornersSquareOptions.gradient = sanitizeGradient(newOptions_options.cornersSquareOptions.gradient))), 
+    newOptions_options.cornersDotOptions && (newOptions_options.cornersDotOptions = {
+        ...newOptions_options.cornersDotOptions
+    }, newOptions_options.cornersDotOptions.gradient && (newOptions_options.cornersDotOptions.gradient = sanitizeGradient(newOptions_options.cornersDotOptions.gradient))), 
+    newOptions_options.backgroundOptions && (newOptions_options.backgroundOptions = {
+        ...newOptions_options.backgroundOptions
+    }, newOptions_options.backgroundOptions.gradient && (newOptions_options.backgroundOptions.gradient = sanitizeGradient(newOptions_options.backgroundOptions.gradient))), 
+    newOptions_options.document || (newOptions_options.document = document), newOptions_options;
+}
+
+let ErrorCorrectionPercents = {
+    [ErrorCorrectionLevel.L]: .07,
+    [ErrorCorrectionLevel.M]: .15,
+    [ErrorCorrectionLevel.Q]: .25,
+    [ErrorCorrectionLevel.H]: .3
+};
+
+let rx = /\.?0+$/;
+
+function numToAttr(value) {
+    return value.toFixed(7).replace(rx, "");
+}
+
+function svgPath(strings, ...values) {
+    return strings.reduce(((t, v, i) => {
+        let p = "";
+        return i && (p = values[i - 1]), "number" == typeof p && (p = numToAttr(p)), `${t}${p}${v}`;
+    }), "").trim().replace(/[\s\n\r]+/gim, " ");
+}
+
 class QRCornerDot {
-    constructor({ svg, type, document }) {
-        this._svg = svg;
-        this._type = type;
-        this._document = document;
+    get element() {
+        return this._element;
     }
-    draw(x, y, size, rotation) {
-        const type = this._type;
+    constructor(type, document) {
+        this.type = type, this.document = document;
+    }
+    draw(args) {
         let drawFunction;
-        switch (type) {
-            case CornerDotType.square:
-                drawFunction = this._drawSquare;
-                break;
-            case CornerDotType.heart:
-                drawFunction = this._drawHeart;
-                break;
-            case CornerDotType.extraRounded:
-                drawFunction = this._drawRounded;
-                break;
-            case CornerDotType.classy:
-                drawFunction = this._drawClassy;
-                break;
-            case CornerDotType.inpoint:
-                drawFunction = this._drawInpoint;
-                break;
-            case CornerDotType.outpoint:
-                drawFunction = this._drawOutpoint;
-                break;
-            case CornerDotType.dot:
-            default:
-                drawFunction = this._drawDot;
+        switch (this.type) {
+          case CornerDotType.square:
+            drawFunction = this.drawSquare;
+            break;
+
+          case CornerDotType.heart:
+            drawFunction = this.drawHeart;
+            break;
+
+          case CornerDotType.extraRounded:
+            drawFunction = this.drawRounded;
+            break;
+
+          case CornerDotType.classy:
+            drawFunction = this.drawClassy;
+            break;
+
+          case CornerDotType.inpoint:
+            drawFunction = this.drawInpoint;
+            break;
+
+          case CornerDotType.outpoint:
+            drawFunction = this.drawOutpoint;
+            break;
+
+          default:
+            drawFunction = this.drawDot;
         }
-        drawFunction.call(this, { x, y, size, rotation });
+        drawFunction.call(this, args);
     }
-    _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})`);
+    rotateFigure({x: cx_x, y: cy_y, size, rotation = 0, draw}) {
+        cx_x += size / 2, cy_y += size / 2, draw(), this._element?.setAttribute("transform", `rotate(${numToAttr(180 * rotation / Math.PI)},${cx_x},${cy_y})`);
     }
-    _basicDot(args) {
-        const { size, x, y } = args;
-        this._rotateFigure({
+    basicDot(args) {
+        let {size, x, y} = args;
+        this.rotateFigure({
             ...args,
             draw: () => {
-                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));
+                this._element = this.document.createElementNS("http://www.w3.org/2000/svg", "circle"), 
+                this._element.setAttribute("cx", numToAttr(x + size / 2)), this._element.setAttribute("cy", numToAttr(y + size / 2)), 
+                this._element.setAttribute("r", numToAttr(size / 2));
             }
         });
     }
-    _basicSquare(args) {
-        const { size, x, y } = args;
-        this._rotateFigure({
+    basicSquare(args) {
+        let {size, x, y} = args;
+        this.rotateFigure({
             ...args,
             draw: () => {
-                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));
-                this._element.setAttribute("height", String(size));
+                this._element = this.document.createElementNS("http://www.w3.org/2000/svg", "rect"), 
+                this._element.setAttribute("x", numToAttr(x)), this._element.setAttribute("y", numToAttr(y)), 
+                this._element.setAttribute("width", numToAttr(size)), this._element.setAttribute("height", numToAttr(size));
             }
         });
     }
-    _basicHeart(args) {
-        const { size, x, y } = args;
-        this._element = this._document.createElementNS("http://www.w3.org/2000/svg", "path");
-        const path = [
-            "M",
-            0.925,
-            0.3538125,
-            "c",
-            0,
-            0.0325869,
-            -0.0054931,
-            0.0644619,
-            -0.0164688,
-            0.095625,
-            "S",
-            0.87825,
-            0.5147812,
-            0.850625,
-            0.5519688,
-            "C",
-            0.823,
-            0.5891563,
-            0.7858125,
-            0.631125,
-            0.7390625,
-            0.677875,
-            "S",
-            0.6331632,
-            0.7802256,
-            0.561625,
-            0.8446875,
-            "L",
-            0.5,
-            0.8999375,
-            "l",
-            -0.061625,
-            -0.05525,
-            "C",
-            0.3668368,
-            0.7802256,
-            0.3076875,
-            0.724625,
-            0.2609375,
-            0.677875,
-            "S",
-            0.177,
-            0.5891563,
-            0.149375,
-            0.5519688,
-            "S",
-            0.1024444,
-            0.4806007,
-            0.0914688,
-            0.4494375,
-            "S",
-            0.075,
-            0.3863994,
-            0.075,
-            0.3538125,
-            "C",
-            0.075,
-            0.2872256,
-            0.0973125,
-            0.231625,
-            0.1419375,
-            0.187,
-            "S",
-            0.2421631,
-            0.1200625,
-            0.30875,
-            0.1200625,
-            "c",
-            0.0368369,
-            0,
-            0.0718994,
-            0.0077881,
-            0.1051875,
-            0.023375,
-            "S",
-            0.4759131,
-            0.1809756,
-            0.5,
-            0.2093125,
-            "c",
-            0.0240868,
-            -0.0283369,
-            0.0527744,
-            -0.0502881,
-            0.0860625,
-            -0.065875,
-            "c",
-            0.0332882,
-            -0.0155869,
-            0.0683507,
-            -0.023375,
-            0.1051875,
-            -0.023375,
-            "c",
-            0.0665869,
-            0,
-            0.1221875,
-            0.0223125,
-            0.1668125,
-            0.0669375,
-            "S",
-            0.925,
-            0.2872256,
-            0.925,
-            0.3538125,
-            "z"
-        ];
-        let move = false;
-        let i = 0;
-        this._element.setAttribute("d", path
-            .map((v) => {
-            if (typeof v == "string") {
-                i = 0;
-                move = v.toUpperCase() == v;
-                return v;
-            }
-            i++;
-            v = v * size;
-            if (move) {
-                v += i % 2 == 1 ? x : y;
-            }
-            return v.toFixed(5);
-        })
-            .join(" "));
-    }
-    _basicRounded(args) {
-        const { size, x, y } = args;
-        this._rotateFigure({
+    basicHeart(args) {
+        let {size, x, y} = args;
+        this._element = this.document.createElementNS("http://www.w3.org/2000/svg", "path");
+        let move = !1, i = 0;
+        this._element.setAttribute("d", [ "M", .925, .3538125, "c", 0, .0325869, -.0054931, .0644619, -.0164688, .095625, "S", .87825, .5147812, .850625, .5519688, "C", .823, .5891563, .7858125, .631125, .7390625, .677875, "S", .6331632, .7802256, .561625, .8446875, "L", .5, .8999375, "l", -.061625, -.05525, "C", .3668368, .7802256, .3076875, .724625, .2609375, .677875, "S", .177, .5891563, .149375, .5519688, "S", .1024444, .4806007, .0914688, .4494375, "S", .075, .3863994, .075, .3538125, "C", .075, .2872256, .0973125, .231625, .1419375, .187, "S", .2421631, .1200625, .30875, .1200625, "c", .0368369, 0, .0718994, .0077881, .1051875, .023375, "S", .4759131, .1809756, .5, .2093125, "c", .0240868, -.0283369, .0527744, -.0502881, .0860625, -.065875, "c", .0332882, -.0155869, .0683507, -.023375, .1051875, -.023375, "c", .0665869, 0, .1221875, .0223125, .1668125, .0669375, "S", .925, .2872256, .925, .3538125, "z" ].map((v => "string" == typeof v ? (i = 0, 
+        move = v.toUpperCase() == v, v) : (i++, v *= size, move && (v += 1 == i % 2 ? x : y), 
+        numToAttr(v)))).join(" "));
+    }
+    basicRounded(args) {
+        let {size, x, y} = args;
+        this.rotateFigure({
             ...args,
             draw: () => {
-                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));
-                this._element.setAttribute("height", String(size));
-                this._element.setAttribute("rx", String(size / 4));
-                this._element.setAttribute("ry", String(size / 4));
+                this._element = this.document.createElementNS("http://www.w3.org/2000/svg", "rect"), 
+                this._element.setAttribute("x", numToAttr(x)), this._element.setAttribute("y", numToAttr(y)), 
+                this._element.setAttribute("width", numToAttr(size)), this._element.setAttribute("height", numToAttr(size)), 
+                this._element.setAttribute("rx", numToAttr(size / 4)), this._element.setAttribute("ry", numToAttr(size / 4));
             }
         });
     }
-    _basicClassy(args) {
-        const { size, x, y } = args;
-        const dotSize = size / 7;
-        this._rotateFigure({
+    basicClassy(args) {
+        let {size, x, y} = args, dotSize = size / 7;
+        this.rotateFigure({
             ...args,
             draw: () => {
-                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}` +
-                    `a ${2.5 * dotSize} ${2.5 * dotSize}, 0, 0, 0, ${dotSize * 2.5} ${dotSize * 2.5}` +
-                    `h ${4.5 * dotSize}` +
-                    `v ${-4.5 * dotSize}` +
-                    `a ${2.5 * dotSize} ${2.5 * dotSize}, 0, 0, 0, ${-dotSize * 2.5} ${-dotSize * 2.5}` +
-                    `h ${-2 * dotSize}` +
-                    `H ${x}` +
-                    `z`);
+                this._element = this.document.createElementNS("http://www.w3.org/2000/svg", "path"), 
+                this._element.setAttribute("clip-rule", "evenodd"), this._element.setAttribute("d", svgPath`M ${x} ${y + 2.5 * dotSize} v ${2 * dotSize} a ${2.5 * dotSize} ${2.5 * dotSize}, 0, 0, 0, ${2.5 * dotSize} ${2.5 * dotSize} h ${4.5 * dotSize} v ${-4.5 * dotSize} a ${2.5 * dotSize} ${2.5 * dotSize}, 0, 0, 0, ${2.5 * -dotSize} ${2.5 * -dotSize} h ${-2 * dotSize} H ${x} z`);
             }
         });
     }
-    _basicInpoint(args) {
-        const { size, x, y } = args;
-        const dotSize = size;
-        this._rotateFigure({
+    basicInpoint(args) {
+        let {size, x, y} = args;
+        this.rotateFigure({
             ...args,
             draw: () => {
-                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}` +
-                    `a ${dotSize / 4}, ${dotSize / 4} 0 0 0 ${dotSize / 4}, ${dotSize / 4}` +
-                    `h ${(dotSize / 4) * 3}` +
-                    `v ${(-dotSize / 4) * 3}` +
-                    `a ${dotSize / 4}, ${dotSize / 4} 0 0 0 ${-dotSize / 4}, ${-dotSize / 4}` +
-                    `h ${-dotSize / 2}` +
-                    `a ${dotSize / 4}, ${dotSize / 4} 0 0 0 ${-dotSize / 4}, ${dotSize / 4}` +
-                    `z`);
+                this._element = this.document.createElementNS("http://www.w3.org/2000/svg", "path"), 
+                this._element.setAttribute("clip-rule", "evenodd"), this._element.setAttribute("d", svgPath`M ${x} ${y + size / 2} v ${size / 4} a ${size / 4}, ${size / 4} 0 0 0 ${size / 4}, ${size / 4} h ${size / 4 * 3} v ${-size / 4 * 3} a ${size / 4}, ${size / 4} 0 0 0 ${-size / 4}, ${-size / 4} h ${-size / 2} a ${size / 4}, ${size / 4} 0 0 0 ${-size / 4}, ${size / 4} 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
+        });
     }
-    _drawHeart({ x, y, size, rotation }) {
-        const scaleFactor = 0.2;
-        this._basicHeart({
-            x: x - (scaleFactor * size) / 2,
-            y: y - (scaleFactor * size) / 2,
-            size: size * (1 + scaleFactor),
+    drawHeart({x, y, size, rotation}) {
+        this.basicHeart({
+            x: x - .2 * size / 2,
+            y: y - .2 * size / 2,
+            size: 1.2 * size,
             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;
     }
-    draw(x, y, size, rotation) {
-        const type = this._type;
+    constructor(type, document) {
+        this.type = type, this.document = document;
+    }
+    draw(args) {
         let drawFunction;
-        switch (type) {
-            case CornerSquareType.square:
-                drawFunction = this._drawSquare;
-                break;
-            case CornerSquareType.extraRounded:
-                drawFunction = this._drawExtraRounded;
-                break;
-            case CornerSquareType.classy:
-                drawFunction = this._drawClassy;
-                break;
-            case CornerSquareType.outpoint:
-                drawFunction = this._drawOutpoint;
-                break;
-            case CornerSquareType.inpoint:
-                drawFunction = this._drawInpoint;
-                break;
-            case CornerSquareType.dot:
-            default:
-                drawFunction = this._drawDot;
+        switch (this.type) {
+          case CornerSquareType.square:
+            drawFunction = this.drawSquare;
+            break;
+
+          case CornerSquareType.extraRounded:
+            drawFunction = this.drawExtraRounded;
+            break;
+
+          case CornerSquareType.classy:
+            drawFunction = this.drawClassy;
+            break;
+
+          case CornerSquareType.outpoint:
+            drawFunction = this.drawOutpoint;
+            break;
+
+          case CornerSquareType.inpoint:
+            drawFunction = this.drawInpoint;
+            break;
+
+          default:
+            drawFunction = this.drawDot;
         }
-        drawFunction.call(this, { x, y, size, rotation });
-    }
-    _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) {
-        const { size, x, y } = args;
-        const dotSize = size / 7;
-        this._rotateFigure({
+        drawFunction.call(this, args);
+    }
+    rotateFigure({x: cx, y: cy, size, rotation = 0, draw}) {
+        cx += size / 2, cy += size / 2, draw(), this._element?.setAttribute("transform", `rotate(${numToAttr(180 * rotation / Math.PI)},${cx},${cy})`);
+    }
+    basicDot(args) {
+        let {size, x, y} = args, dotSize = size / 7;
+        this.rotateFigure({
             ...args,
             draw: () => {
-                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
-                    `z` + // Z // Close the outer shape
-                    `m 0 ${dotSize}` + // m -1 outerRadius-innerRadius // Move to top point of inner radius
-                    `a ${size / 2 - dotSize} ${size / 2 - dotSize} 0 1 1 -0.1 0` + // a innerRadius, innerRadius, 0, 1, 1, -1, 0 // Draw inner arc, but don't close it
-                    `Z` // Z // Close the inner ring. Actually will still work without, but inner ring will have one unit missing in stroke
-                );
+                this._element = this.document.createElementNS("http://www.w3.org/2000/svg", "path"), 
+                this._element.setAttribute("clip-rule", "evenodd"), this._element.setAttribute("d", svgPath`M ${x + size / 2} ${y} a ${size / 2} ${size / 2} 0 1 0 0.1 0 z m 0 ${dotSize} a ${size / 2 - dotSize} ${size / 2 - dotSize} 0 1 1 -0.1 0 Z`);
             }
         });
     }
-    _basicSquare(args) {
-        const { size, x, y } = args;
-        const dotSize = size / 7;
-        this._rotateFigure({
+    basicSquare(args) {
+        let {size, x, y} = args, dotSize = size / 7;
+        this.rotateFigure({
             ...args,
             draw: () => {
-                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}` +
-                    `h ${size}` +
-                    `v ${-size}` +
-                    `z` +
-                    `M ${x + dotSize} ${y + dotSize}` +
-                    `h ${size - 2 * dotSize}` +
-                    `v ${size - 2 * dotSize}` +
-                    `h ${-size + 2 * dotSize}` +
-                    `z`);
+                this._element = this.document.createElementNS("http://www.w3.org/2000/svg", "path"), 
+                this._element.setAttribute("clip-rule", "evenodd"), this._element.setAttribute("d", svgPath`M ${x} ${y} v ${size} h ${size} v ${-size} z M ${x + dotSize} ${y + dotSize} h ${size - 2 * dotSize} v ${size - 2 * dotSize} h ${2 * dotSize - size} z`);
             }
         });
     }
-    _basicExtraRounded(args) {
-        const { size, x, y } = args;
-        const dotSize = size / 7;
-        this._rotateFigure({
+    basicExtraRounded(args) {
+        let {size, x, y} = args, dotSize = size / 7;
+        this.rotateFigure({
             ...args,
             draw: () => {
-                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}` +
-                    `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}` +
-                    `v ${-2 * dotSize}` +
-                    `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}` +
-                    `v ${2 * dotSize}` +
-                    `a ${1.5 * dotSize} ${1.5 * dotSize}, 0, 0, 1, ${-dotSize * 1.5} ${dotSize * 1.5}` +
-                    `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}` +
-                    `z`);
+                this._element = this.document.createElementNS("http://www.w3.org/2000/svg", "path"), 
+                this._element.setAttribute("clip-rule", "evenodd"), this._element.setAttribute("d", svgPath`M ${x} ${y + 2.5 * dotSize} v ${2 * dotSize} a ${2.5 * dotSize} ${2.5 * dotSize}, 0, 0, 0, ${2.5 * dotSize} ${2.5 * dotSize} h ${2 * dotSize} a ${2.5 * dotSize} ${2.5 * dotSize}, 0, 0, 0, ${2.5 * dotSize} ${2.5 * -dotSize} v ${-2 * dotSize} a ${2.5 * dotSize} ${2.5 * dotSize}, 0, 0, 0, ${2.5 * -dotSize} ${2.5 * -dotSize} h ${-2 * dotSize} a ${2.5 * dotSize} ${2.5 * dotSize}, 0, 0, 0, ${2.5 * -dotSize} ${2.5 * dotSize} z M ${x + 2.5 * dotSize} ${y + dotSize} h ${2 * dotSize} a ${1.5 * dotSize} ${1.5 * dotSize}, 0, 0, 1, ${1.5 * dotSize} ${1.5 * dotSize} v ${2 * dotSize} a ${1.5 * dotSize} ${1.5 * dotSize}, 0, 0, 1, ${1.5 * -dotSize} ${1.5 * dotSize} h ${-2 * dotSize} a ${1.5 * dotSize} ${1.5 * dotSize}, 0, 0, 1, ${1.5 * -dotSize} ${1.5 * -dotSize} v ${-2 * dotSize} a ${1.5 * dotSize} ${1.5 * dotSize}, 0, 0, 1, ${1.5 * dotSize} ${1.5 * -dotSize} z`);
             }
         });
     }
-    _basicClassy(args) {
-        const { size, x, y } = args;
-        const dotSize = size / 7;
-        this._rotateFigure({
+    basicClassy(args) {
+        let {size, x, y} = args, dotSize = size / 7;
+        this.rotateFigure({
             ...args,
             draw: () => {
-                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}` +
-                    `a ${2.5 * dotSize} ${2.5 * dotSize}, 0, 0, 0, ${dotSize * 2.5} ${dotSize * 2.5}` +
-                    `h ${4.5 * dotSize}` +
-                    `v ${-4.5 * dotSize}` +
-                    `a ${2.5 * dotSize} ${2.5 * dotSize}, 0, 0, 0, ${-dotSize * 2.5} ${-dotSize * 2.5}` +
-                    `h ${-2 * dotSize}` +
-                    `H ${x}` +
-                    `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}` +
-                    `v ${3.5 * dotSize}` +
-                    `h ${-3.5 * dotSize}` +
-                    `a ${1.5 * dotSize} ${1.5 * dotSize}, 0, 0, 1, ${-dotSize * 1.5} ${-dotSize * 1.5}` +
-                    `v ${-3.5 * dotSize}` +
-                    `z`);
+                this._element = this.document.createElementNS("http://www.w3.org/2000/svg", "path"), 
+                this._element.setAttribute("clip-rule", "evenodd"), this._element.setAttribute("d", svgPath`M ${x} ${y + 2.5 * dotSize} v ${2 * dotSize} a ${2.5 * dotSize} ${2.5 * dotSize}, 0, 0, 0, ${2.5 * dotSize} ${2.5 * dotSize} h ${4.5 * dotSize} v ${-4.5 * dotSize} a ${2.5 * dotSize} ${2.5 * dotSize}, 0, 0, 0, ${2.5 * -dotSize} ${2.5 * -dotSize} h ${-2 * dotSize} H ${x} z M ${x + 2.5 * dotSize} ${y + dotSize} h ${2 * dotSize} a ${1.5 * dotSize} ${1.5 * dotSize}, 0, 0, 1, ${1.5 * dotSize} ${1.5 * dotSize} v ${3.5 * dotSize} h ${-3.5 * dotSize} a ${1.5 * dotSize} ${1.5 * dotSize}, 0, 0, 1, ${1.5 * -dotSize} ${1.5 * -dotSize} v ${-3.5 * dotSize} z`);
             }
         });
     }
-    _basicInpoint(args) {
-        const { size, x, y } = args;
-        const dotSize = size / 7;
-        this._rotateFigure({
+    basicInpoint(args) {
+        let {size, x, y} = args, dotSize = size / 7;
+        this.rotateFigure({
             ...args,
             draw: () => {
-                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}` +
-                    `a ${2.5 * dotSize} ${2.5 * dotSize}, 0, 0, 0, ${dotSize * 2.5} ${dotSize * 2.5}` +
-                    `h ${4.5 * dotSize}` +
-                    `v ${-4.5 * dotSize}` +
-                    `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}` +
-                    `v ${3.5 * dotSize}` +
-                    `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}` +
-                    `z`);
+                this._element = this.document.createElementNS("http://www.w3.org/2000/svg", "path"), 
+                this._element.setAttribute("clip-rule", "evenodd"), this._element.setAttribute("d", svgPath`M ${x} ${y + 2.5 * dotSize} v ${2 * dotSize} a ${2.5 * dotSize} ${2.5 * dotSize}, 0, 0, 0, ${2.5 * dotSize} ${2.5 * dotSize} h ${4.5 * dotSize} v ${-4.5 * dotSize} a ${2.5 * dotSize} ${2.5 * dotSize}, 0, 0, 0, ${2.5 * -dotSize} ${2.5 * -dotSize} h ${-2 * dotSize} a ${2.5 * dotSize} ${2.5 * dotSize}, 0, 0, 0, ${2.5 * -dotSize} ${2.5 * dotSize} z M ${x + 2.5 * dotSize} ${y + dotSize} h ${2 * dotSize} a ${1.5 * dotSize} ${1.5 * dotSize}, 0, 0, 1, ${1.5 * dotSize} ${1.5 * dotSize} v ${3.5 * dotSize} h ${-3.5 * dotSize} a ${1.5 * dotSize} ${1.5 * dotSize}, 0, 0, 1, ${1.5 * -dotSize} ${1.5 * -dotSize} v ${-2 * dotSize} a ${1.5 * dotSize} ${1.5 * dotSize}, 0, 0, 1, ${1.5 * dotSize} ${1.5 * -dotSize} 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;
     }
-    draw(x, y, size, getNeighbor) {
-        const type = this._type;
+    constructor(type, document) {
+        this.type = type, this.document = document;
+    }
+    draw(args) {
         let drawFunction;
-        switch (type) {
-            case DotType.dots:
-                drawFunction = this._drawDot;
-                break;
-            case DotType.randomDots:
-                drawFunction = this._drawRandomDot;
-                break;
-            case DotType.classy:
-                drawFunction = this._drawClassy;
-                break;
-            case DotType.classyRounded:
-                drawFunction = this._drawClassyRounded;
-                break;
-            case DotType.rounded:
-                drawFunction = this._drawRounded;
-                break;
-            case DotType.verticalLines:
-                drawFunction = this._drawVerticalLines;
-                break;
-            case DotType.horizontalLines:
-                drawFunction = this._drawHorizontalLines;
-                break;
-            case DotType.extraRounded:
-                drawFunction = this._drawExtraRounded;
-                break;
-            case DotType.diamond:
-                drawFunction = this._drawDiamond;
-                break;
-            case DotType.smallSquare:
-                drawFunction = this._drawSmallSquare;
-                break;
-            case DotType.square:
-            default:
-                drawFunction = this._drawSquare;
+        switch (this.type) {
+          case DotType.dot:
+            drawFunction = this.drawDot;
+            break;
+
+          case DotType.randomDot:
+            drawFunction = this.drawRandomDot;
+            break;
+
+          case DotType.classy:
+            drawFunction = this.drawClassy;
+            break;
+
+          case DotType.classyRounded:
+            drawFunction = this.drawClassyRounded;
+            break;
+
+          case DotType.rounded:
+            drawFunction = this.drawRounded;
+            break;
+
+          case DotType.verticalLine:
+            drawFunction = this.drawVerticalLine;
+            break;
+
+          case DotType.horizontalLine:
+            drawFunction = this.drawHorizontalLine;
+            break;
+
+          case DotType.extraRounded:
+            drawFunction = this.drawExtraRounded;
+            break;
+
+          case DotType.diamond:
+            drawFunction = this.drawDiamond;
+            break;
+
+          case DotType.smallSquare:
+            drawFunction = this.drawSmallSquare;
+            break;
+
+          default:
+            drawFunction = this.drawSquare;
         }
-        drawFunction.call(this, { x, y, size, getNeighbor });
+        drawFunction.call(this, args);
     }
-    _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})`);
+    rotateFigure({x: cx, y: cy, size, rotation = 0, draw}) {
+        cx += size / 2, cy += size / 2, draw(), this._element?.setAttribute("transform", `rotate(${numToAttr(180 * rotation / Math.PI)},${cx},${cy})`);
     }
-    _basicDot(args) {
-        const { size, x, y } = args;
-        this._rotateFigure({
+    basicDot(args) {
+        let {size, x, y} = args;
+        this.rotateFigure({
             ...args,
             draw: () => {
-                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));
+                this._element = this.document.createElementNS("http://www.w3.org/2000/svg", "circle"), 
+                this._element.setAttribute("cx", numToAttr(x + size / 2)), this._element.setAttribute("cy", numToAttr(y + size / 2)), 
+                this._element.setAttribute("r", numToAttr(size / 2));
             }
         });
     }
-    _basicSquare(args) {
-        const { size, x, y } = args;
-        this._rotateFigure({
+    basicSquare(args) {
+        let {size, x, y} = args;
+        this.rotateFigure({
             ...args,
             draw: () => {
-                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));
-                this._element.setAttribute("height", String(size));
+                this._element = this.document.createElementNS("http://www.w3.org/2000/svg", "rect"), 
+                this._element.setAttribute("x", numToAttr(x)), this._element.setAttribute("y", numToAttr(y)), 
+                this._element.setAttribute("width", numToAttr(size)), this._element.setAttribute("height", numToAttr(size));
             }
         });
     }
-    //if rotation === 0 - right side is rounded
-    _basicSideRounded(args) {
-        const { size, x, y } = args;
-        this._rotateFigure({
+    basicSideRounded(args) {
+        let {size, x, y} = args;
+        this.rotateFigure({
             ...args,
             draw: () => {
-                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
-                    `a ${size / 2} ${size / 2}, 0, 0, 0, 0 ${-size}` // draw rounded corner
-                );
+                this._element = this.document.createElementNS("http://www.w3.org/2000/svg", "path"), 
+                this._element.setAttribute("d", svgPath`M ${x} ${y} v ${size} h ${size / 2} a ${size / 2} ${size / 2}, 0, 0, 0, 0 ${-size} z`);
             }
         });
     }
-    //if rotation === 0 - top right corner is rounded
-    _basicCornerRounded(args) {
-        const { size, x, y } = args;
-        this._rotateFigure({
+    basicCornerRounded(args) {
+        let {size, x, y} = args;
+        this.rotateFigure({
             ...args,
             draw: () => {
-                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
-                    `v ${-size / 2}` + //draw line to right bottom corner + half of size top
-                    `a ${size / 2} ${size / 2}, 0, 0, 0, ${-size / 2} ${-size / 2}` // draw rounded corner
-                );
+                this._element = this.document.createElementNS("http://www.w3.org/2000/svg", "path"), 
+                this._element.setAttribute("d", svgPath`M ${x} ${y} v ${size} h ${size} v ${-size / 2} a ${size / 2} ${size / 2}, 0, 0, 0, ${-size / 2} ${-size / 2} z`);
             }
         });
     }
-    //if rotation === 0 - top right corner is rounded
-    _basicCornerExtraRounded(args) {
-        const { size, x, y } = args;
-        this._rotateFigure({
+    basicCornerExtraRounded(args) {
+        let {size, x, y} = args;
+        this.rotateFigure({
             ...args,
             draw: () => {
-                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
-                    `a ${size} ${size}, 0, 0, 0, ${-size} ${-size}` // draw rounded top right corner
-                );
+                this._element = this.document.createElementNS("http://www.w3.org/2000/svg", "path"), 
+                this._element.setAttribute("d", svgPath`M ${x} ${y} v ${size} h ${size} a ${size} ${size}, 0, 0, 0, ${-size} ${-size} z`);
             }
         });
     }
-    //if rotation === 0 - left bottom and right top corners are rounded
-    _basicCornersRounded(args) {
-        const { size, x, y } = args;
-        this._rotateFigure({
+    basicCornersRounded(args) {
+        let {size, x, y} = args;
+        this.rotateFigure({
             ...args,
             draw: () => {
-                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
-                    `h ${size / 2}` + //draw line to right bottom corner
-                    `v ${-size / 2}` + //draw line to right bottom corner + half of size top
-                    `a ${size / 2} ${size / 2}, 0, 0, 0, ${-size / 2} ${-size / 2}` // draw rounded right top corner
-                );
+                this._element = this.document.createElementNS("http://www.w3.org/2000/svg", "path"), 
+                this._element.setAttribute("d", svgPath`M ${x} ${y} v ${size / 2} a ${size / 2} ${size / 2}, 0, 0, 0, ${size / 2} ${size / 2} h ${size / 2} v ${-size / 2} a ${size / 2} ${size / 2}, 0, 0, 0, ${-size / 2} ${-size / 2} z`);
             }
         });
     }
-    _drawDot({ x, y, size }) {
-        this._basicDot({ x, y, size, rotation: 0 });
-    }
-    _drawRandomDot({ x, y, size }) {
-        const randomFactor = Math.random() * (1 - 0.75) + 0.75;
-        this._basicDot({ x, y, size: size * randomFactor, rotation: 0 });
-    }
-    _drawSquare({ x, y, size }) {
-        this._basicSquare({ x, y, size, rotation: 0 });
-    }
-    _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 });
-    }
-    _drawDiamond({ x, y, size }) {
-        this._basicSquare({ x, y, size, rotation: Math.PI / 4 });
-    }
-    _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 });
-            return;
-        }
-        if (neighborsCount > 2 || (leftNeighbor && rightNeighbor) || (topNeighbor && bottomNeighbor)) {
-            this._basicSquare({ x, y, size, rotation: 0 });
-            return;
-        }
-        if (neighborsCount === 2) {
-            let rotation = 0;
-            if (leftNeighbor && topNeighbor) {
-                rotation = Math.PI / 2;
-            }
-            else if (topNeighbor && rightNeighbor) {
-                rotation = Math.PI;
-            }
-            else if (rightNeighbor && bottomNeighbor) {
-                rotation = -Math.PI / 2;
-            }
-            this._basicCornerRounded({ x, y, size, rotation });
-            return;
-        }
-        if (neighborsCount === 1) {
-            let rotation = 0;
-            if (topNeighbor) {
-                rotation = Math.PI / 2;
-            }
-            else if (rightNeighbor) {
-                rotation = Math.PI;
-            }
-            else if (bottomNeighbor) {
-                rotation = -Math.PI / 2;
-            }
-            this._basicSideRounded({ x, y, size, rotation });
-            return;
-        }
+    drawDot({x, y, size}) {
+        this.basicDot({
+            x,
+            y,
+            size,
+            rotation: 0
+        });
     }
-    _drawVerticalLines({ 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 ||
-            (leftNeighbor && !(topNeighbor || bottomNeighbor)) ||
-            (rightNeighbor && !(topNeighbor || bottomNeighbor))) {
-            this._basicDot({ x, y, size, rotation: 0 });
-            return;
-        }
-        if (topNeighbor && bottomNeighbor) {
-            this._basicSquare({ x, y, size, rotation: 0 });
-            return;
-        }
-        if (topNeighbor && !bottomNeighbor) {
-            const rotation = Math.PI / 2;
-            this._basicSideRounded({ x, y, size, rotation });
-            return;
-        }
-        if (bottomNeighbor && !topNeighbor) {
-            const rotation = -Math.PI / 2;
-            this._basicSideRounded({ x, y, size, rotation });
-            return;
-        }
+    drawRandomDot({x, y, size}) {
+        this.basicDot({
+            x,
+            y,
+            size: size * (.25 * Math.random() + .75),
+            rotation: 0
+        });
     }
-    _drawHorizontalLines({ 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 ||
-            (topNeighbor && !(leftNeighbor || rightNeighbor)) ||
-            (bottomNeighbor && !(leftNeighbor || rightNeighbor))) {
-            this._basicDot({ x, y, size, rotation: 0 });
-            return;
-        }
-        if (leftNeighbor && rightNeighbor) {
-            this._basicSquare({ x, y, size, rotation: 0 });
-            return;
-        }
-        if (leftNeighbor && !rightNeighbor) {
-            const rotation = 0;
-            this._basicSideRounded({ x, y, size, rotation });
-            return;
-        }
-        if (rightNeighbor && !leftNeighbor) {
-            const rotation = Math.PI;
-            this._basicSideRounded({ x, y, size, rotation });
-            return;
-        }
+    drawSquare({x, y, size}) {
+        this.basicSquare({
+            x,
+            y,
+            size,
+            rotation: 0
+        });
     }
-    _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 });
-            return;
-        }
-        if (neighborsCount > 2 || (leftNeighbor && rightNeighbor) || (topNeighbor && bottomNeighbor)) {
-            this._basicSquare({ x, y, size, rotation: 0 });
-            return;
-        }
-        if (neighborsCount === 2) {
-            let rotation = 0;
-            if (leftNeighbor && topNeighbor) {
-                rotation = Math.PI / 2;
-            }
-            else if (topNeighbor && rightNeighbor) {
-                rotation = Math.PI;
-            }
-            else if (rightNeighbor && bottomNeighbor) {
-                rotation = -Math.PI / 2;
-            }
-            this._basicCornerExtraRounded({ x, y, size, rotation });
-            return;
-        }
-        if (neighborsCount === 1) {
-            let rotation = 0;
-            if (topNeighbor) {
-                rotation = Math.PI / 2;
-            }
-            else if (rightNeighbor) {
-                rotation = Math.PI;
-            }
-            else if (bottomNeighbor) {
-                rotation = -Math.PI / 2;
-            }
-            this._basicSideRounded({ x, y, size, rotation });
-            return;
-        }
+    drawSmallSquare({x, y, size}) {
+        this.basicSquare({
+            x: x + .15 * size,
+            y: y + .15 * size,
+            size: .7 * size,
+            rotation: 0
+        });
     }
-    _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 });
-            return;
-        }
-        if (!leftNeighbor && !topNeighbor) {
-            this._basicCornerRounded({ x, y, size, rotation: -Math.PI / 2 });
-            return;
-        }
-        if (!rightNeighbor && !bottomNeighbor) {
-            this._basicCornerRounded({ x, y, size, rotation: Math.PI / 2 });
-            return;
-        }
-        this._basicSquare({ x, y, size, rotation: 0 });
-    }
-    _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 });
-            return;
-        }
-        if (!leftNeighbor && !topNeighbor) {
-            this._basicCornerExtraRounded({ x, y, size, rotation: -Math.PI / 2 });
-            return;
-        }
-        if (!rightNeighbor && !bottomNeighbor) {
-            this._basicCornerExtraRounded({ x, y, size, rotation: Math.PI / 2 });
-            return;
-        }
-        this._basicSquare({ x, y, size, rotation: 0 });
+    drawDiamond({x, y, size}) {
+        this.basicSquare({
+            x,
+            y,
+            size,
+            rotation: Math.PI / 4
+        });
     }
-}
-
-const browserImageTools = {
-    toDataURL(url) {
-        return new Promise((resolve, reject) => {
-            if (typeof url == "string") {
-                const xhr = new XMLHttpRequest();
-                xhr.onload = function () {
-                    const reader = new FileReader();
-                    reader.onloadend = function () {
-                        resolve(reader.result);
-                    };
-                    reader.readAsDataURL(xhr.response);
-                };
-                xhr.onerror = xhr.onabort = xhr.ontimeout = reject;
-                xhr.open("GET", url);
-                xhr.responseType = "blob";
-                xhr.send();
-            }
-            else {
-                const reader = new FileReader();
-                reader.onloadend = function () {
-                    resolve(reader.result);
-                };
-                reader.readAsDataURL(url);
-            }
+    drawRounded({x, y, size, getNeighbor: bottomNeighbor_getNeighbor}) {
+        var leftNeighbor_rotation = bottomNeighbor_getNeighbor ? +bottomNeighbor_getNeighbor(-1, 0) : 0;
+        let rightNeighbor = bottomNeighbor_getNeighbor ? +bottomNeighbor_getNeighbor(1, 0) : 0, topNeighbor = bottomNeighbor_getNeighbor ? +bottomNeighbor_getNeighbor(0, -1) : 0;
+        var neighborsCount_rotation = leftNeighbor_rotation + rightNeighbor + topNeighbor + (bottomNeighbor_getNeighbor = bottomNeighbor_getNeighbor ? +bottomNeighbor_getNeighbor(0, 1) : 0);
+        0 === neighborsCount_rotation ? this.basicDot({
+            x,
+            y,
+            size,
+            rotation: 0
+        }) : 2 < neighborsCount_rotation || leftNeighbor_rotation && rightNeighbor || topNeighbor && bottomNeighbor_getNeighbor ? this.basicSquare({
+            x,
+            y,
+            size,
+            rotation: 0
+        }) : 2 === neighborsCount_rotation ? (neighborsCount_rotation = 0, leftNeighbor_rotation && topNeighbor ? neighborsCount_rotation = Math.PI / 2 : topNeighbor && rightNeighbor ? neighborsCount_rotation = Math.PI : rightNeighbor && bottomNeighbor_getNeighbor && (neighborsCount_rotation = -Math.PI / 2), 
+        this.basicCornerRounded({
+            x,
+            y,
+            size,
+            rotation: neighborsCount_rotation
+        })) : 1 === neighborsCount_rotation && (leftNeighbor_rotation = 0, topNeighbor ? leftNeighbor_rotation = Math.PI / 2 : rightNeighbor ? leftNeighbor_rotation = Math.PI : bottomNeighbor_getNeighbor && (leftNeighbor_rotation = -Math.PI / 2), 
+        this.basicSideRounded({
+            x,
+            y,
+            size,
+            rotation: leftNeighbor_rotation
+        }));
+    }
+    drawVerticalLine({x, y, size, getNeighbor: bottomNeighbor}) {
+        let leftNeighbor = bottomNeighbor ? +bottomNeighbor(-1, 0) : 0, rightNeighbor = bottomNeighbor ? +bottomNeighbor(1, 0) : 0, topNeighbor = bottomNeighbor ? +bottomNeighbor(0, -1) : 0;
+        0 === leftNeighbor + rightNeighbor + topNeighbor + (bottomNeighbor = bottomNeighbor ? +bottomNeighbor(0, 1) : 0) || leftNeighbor && !topNeighbor && !bottomNeighbor || rightNeighbor && !topNeighbor && !bottomNeighbor ? this.basicDot({
+            x,
+            y,
+            size,
+            rotation: 0
+        }) : topNeighbor && bottomNeighbor ? this.basicSquare({
+            x,
+            y,
+            size,
+            rotation: 0
+        }) : topNeighbor && !bottomNeighbor ? this.basicSideRounded({
+            x,
+            y,
+            size,
+            rotation: Math.PI / 2
+        }) : bottomNeighbor && !topNeighbor && this.basicSideRounded({
+            x,
+            y,
+            size,
+            rotation: -Math.PI / 2
         });
-    },
-    getSize(options) {
-        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;
-            }
-            image.onload = () => {
-                resolve({ width: image.width, height: image.height });
-            };
-            image.onerror = image.onabort = reject;
-            if (typeof options.image == "string")
-                image.src = options.image;
-            else
-                browserImageTools
-                    .toDataURL(options.image)
-                    .then((url) => (image.src = url))
-                    .catch(reject);
+    }
+    drawHorizontalLine({x, y, size, getNeighbor: bottomNeighbor}) {
+        let leftNeighbor = bottomNeighbor ? +bottomNeighbor(-1, 0) : 0, rightNeighbor = bottomNeighbor ? +bottomNeighbor(1, 0) : 0, topNeighbor = bottomNeighbor ? +bottomNeighbor(0, -1) : 0;
+        0 === leftNeighbor + rightNeighbor + topNeighbor + (bottomNeighbor = bottomNeighbor ? +bottomNeighbor(0, 1) : 0) || topNeighbor && !leftNeighbor && !rightNeighbor || bottomNeighbor && !leftNeighbor && !rightNeighbor ? this.basicDot({
+            x,
+            y,
+            size,
+            rotation: 0
+        }) : leftNeighbor && rightNeighbor ? this.basicSquare({
+            x,
+            y,
+            size,
+            rotation: 0
+        }) : leftNeighbor && !rightNeighbor ? this.basicSideRounded({
+            x,
+            y,
+            size,
+            rotation: 0
+        }) : rightNeighbor && !leftNeighbor && this.basicSideRounded({
+            x,
+            y,
+            size,
+            rotation: Math.PI
         });
     }
-};
-
-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 ||
-        4 * margin ** 2 > maxHiddenDots) {
-        return {
-            height: 0,
-            width: 0,
-            hideYDots: 0,
-            hideXDots: 0
-        };
+    drawExtraRounded({x, y, size, getNeighbor: bottomNeighbor}) {
+        var leftNeighbor = bottomNeighbor ? +bottomNeighbor(-1, 0) : 0;
+        let rightNeighbor = bottomNeighbor ? +bottomNeighbor(1, 0) : 0, topNeighbor = bottomNeighbor ? +bottomNeighbor(0, -1) : 0;
+        var neighborsCount = leftNeighbor + rightNeighbor + topNeighbor + (bottomNeighbor = bottomNeighbor ? +bottomNeighbor(0, 1) : 0);
+        0 === neighborsCount ? this.basicDot({
+            x,
+            y,
+            size,
+            rotation: 0
+        }) : 2 < neighborsCount || leftNeighbor && rightNeighbor || topNeighbor && bottomNeighbor ? this.basicSquare({
+            x,
+            y,
+            size,
+            rotation: 0
+        }) : 2 === neighborsCount ? (neighborsCount = 0, leftNeighbor && topNeighbor ? neighborsCount = Math.PI / 2 : topNeighbor && rightNeighbor ? neighborsCount = Math.PI : rightNeighbor && bottomNeighbor && (neighborsCount = -Math.PI / 2), 
+        this.basicCornerExtraRounded({
+            x,
+            y,
+            size,
+            rotation: neighborsCount
+        })) : 1 === neighborsCount && (leftNeighbor = 0, topNeighbor ? leftNeighbor = Math.PI / 2 : rightNeighbor ? leftNeighbor = Math.PI : bottomNeighbor && (leftNeighbor = -Math.PI / 2), 
+        this.basicSideRounded({
+            x,
+            y,
+            size,
+            rotation: leftNeighbor
+        }));
+    }
+    drawClassy({x, y, size, getNeighbor: bottomNeighbor}) {
+        let leftNeighbor = bottomNeighbor ? +bottomNeighbor(-1, 0) : 0, rightNeighbor = bottomNeighbor ? +bottomNeighbor(1, 0) : 0, topNeighbor = bottomNeighbor ? +bottomNeighbor(0, -1) : 0;
+        0 === leftNeighbor + rightNeighbor + topNeighbor + (bottomNeighbor = bottomNeighbor ? +bottomNeighbor(0, 1) : 0) ? this.basicCornersRounded({
+            x,
+            y,
+            size,
+            rotation: Math.PI / 2
+        }) : leftNeighbor || topNeighbor ? rightNeighbor || bottomNeighbor ? this.basicSquare({
+            x,
+            y,
+            size,
+            rotation: 0
+        }) : this.basicCornerRounded({
+            x,
+            y,
+            size,
+            rotation: Math.PI / 2
+        }) : this.basicCornerRounded({
+            x,
+            y,
+            size,
+            rotation: -Math.PI / 2
+        });
+    }
+    drawClassyRounded({x, y, size, getNeighbor: bottomNeighbor}) {
+        let leftNeighbor = bottomNeighbor ? +bottomNeighbor(-1, 0) : 0, rightNeighbor = bottomNeighbor ? +bottomNeighbor(1, 0) : 0, topNeighbor = bottomNeighbor ? +bottomNeighbor(0, -1) : 0;
+        0 === leftNeighbor + rightNeighbor + topNeighbor + (bottomNeighbor = bottomNeighbor ? +bottomNeighbor(0, 1) : 0) ? this.basicCornersRounded({
+            x,
+            y,
+            size,
+            rotation: Math.PI / 2
+        }) : leftNeighbor || topNeighbor ? rightNeighbor || bottomNeighbor ? this.basicSquare({
+            x,
+            y,
+            size,
+            rotation: 0
+        }) : this.basicCornerExtraRounded({
+            x,
+            y,
+            size,
+            rotation: Math.PI / 2
+        }) : this.basicCornerExtraRounded({
+            x,
+            y,
+            size,
+            rotation: -Math.PI / 2
+        });
     }
-    //If set, ensure maxHiddenAxisDots is odd and at least 1
-    if (maxHiddenAxisDots && maxHiddenAxisDots % 2 == 0)
-        maxHiddenAxisDots = Math.max(1, maxHiddenAxisDots - 1);
-    //Determine the bigger and smaller image dimension
-    const dimMax = Math.max(originalWidth, originalHeight);
-    const dimMin = Math.min(originalWidth, originalHeight);
-    //Find max image size along the bigger dimension
-    let lower = 0, upper = (maxHiddenAxisDots || maxHiddenDots) - 2 * margin;
-    do {
-        const size = lower + (upper - lower) / 2;
-        let dotsMax = Math.max(1, Math.ceil(size + 2 * margin));
-        if (dotsMax % 2 == 0)
-            dotsMax++;
-        let dotsMin = Math.max(1, Math.ceil((size * dimMin) / dimMax + 2 * margin));
-        if (dotsMin % 2 == 0)
-            dotsMin++;
-        if (dotsMax * dotsMin > maxHiddenDots)
-            upper = size;
-        else
-            lower = size;
-    } while (Math.abs(lower - upper) > 0.001);
-    //Calculate how many dots the given size corresponds to
-    const size = lower;
-    let hideMax = Math.max(1, Math.ceil(size + 2 * margin));
-    if (hideMax % 2 == 0)
-        hideMax++;
-    let hideMin = Math.max(1, Math.ceil((size * dimMin) / dimMax + 2 * margin));
-    if (hideMin % 2 == 0)
-        hideMin++;
-    //Set hidden dots along bigger and smaller dimension to the right axis
-    if (originalWidth > originalHeight) {
-        hideDots.x = hideMax;
-        hideDots.y = hideMin;
-    }
-    else {
-        hideDots.x = hideMin;
-        hideDots.y = hideMax;
-    }
-    //Fit image to the hidden dots
-    const maxW = (hideDots.x - 2 * margin) * dotSize;
-    const maxH = (hideDots.y - 2 * margin) * dotSize;
-    imageSize.x = maxW;
-    imageSize.y = (maxW * originalHeight) / originalWidth;
-    if (imageSize.y > maxH) {
-        imageSize.y = maxH;
-        imageSize.x = (maxH * originalWidth) / originalHeight;
-    }
-    return {
-        height: Math.round(imageSize.y + 2 * margin * dotSize),
-        width: Math.round(imageSize.x + 2 * margin * dotSize),
-        hideYDots: hideDots.y,
-        hideXDots: hideDots.x
-    };
 }
 
-const squareMask = [
-    [1, 1, 1, 1, 1, 1, 1],
-    [1, 0, 0, 0, 0, 0, 1],
-    [1, 0, 0, 0, 0, 0, 1],
-    [1, 0, 0, 0, 0, 0, 1],
-    [1, 0, 0, 0, 0, 0, 1],
-    [1, 0, 0, 0, 0, 0, 1],
-    [1, 1, 1, 1, 1, 1, 1]
-];
-const dotMask = [
-    [0, 0, 0, 0, 0, 0, 0],
-    [0, 0, 0, 0, 0, 0, 0],
-    [0, 0, 1, 1, 1, 0, 0],
-    [0, 0, 1, 1, 1, 0, 0],
-    [0, 0, 1, 1, 1, 0, 0],
-    [0, 0, 0, 0, 0, 0, 0],
-    [0, 0, 0, 0, 0, 0, 0]
-];
-const alignmentCount = [
-    [35, 49],
-    [28, 36],
-    [21, 25],
-    [14, 16],
-    [7, 9],
-    [2, 4],
-    [1, 1]
-];
+let browserImageTools = {
+    toDataURL: url => new Promise(((resolve, reject) => {
+        if ("string" == typeof url) {
+            const xhr = new XMLHttpRequest;
+            xhr.onload = function() {
+                const reader = new FileReader;
+                reader.onloadend = function() {
+                    resolve(reader.result);
+                }, reader.readAsDataURL(xhr.response);
+            }, xhr.onerror = xhr.onabort = xhr.ontimeout = reject, xhr.open("GET", url), xhr.responseType = "blob", 
+            xhr.send();
+        } else {
+            const reader = new FileReader;
+            reader.onloadend = function() {
+                resolve(reader.result);
+            }, reader.readAsDataURL(url);
+        }
+    })),
+    getSize: (src, crossOrigin) => new Promise(((resolve, reject) => {
+        const image = new Image;
+        "string" === crossOrigin && (image.crossOrigin = crossOrigin), image.onload = () => {
+            resolve({
+                width: image.width,
+                height: image.height
+            });
+        }, image.onerror = image.onabort = reject, "string" == typeof src ? image.src = src : browserImageTools.toDataURL(src).then((url => image.src = url)).catch(reject);
+    }))
+};
+
+let squareMask = [ [ 1, 1, 1, 1, 1, 1, 1 ], [ 1, 0, 0, 0, 0, 0, 1 ], [ 1, 0, 0, 0, 0, 0, 1 ], [ 1, 0, 0, 0, 0, 0, 1 ], [ 1, 0, 0, 0, 0, 0, 1 ], [ 1, 0, 0, 0, 0, 0, 1 ], [ 1, 1, 1, 1, 1, 1, 1 ] ], dotMask = [ [ 0, 0, 0, 0, 0, 0, 0 ], [ 0, 0, 0, 0, 0, 0, 0 ], [ 0, 0, 1, 1, 1, 0, 0 ], [ 0, 0, 1, 1, 1, 0, 0 ], [ 0, 0, 1, 1, 1, 0, 0 ], [ 0, 0, 0, 0, 0, 0, 0 ], [ 0, 0, 0, 0, 0, 0, 0 ] ], alignmentCount = [ [ 35, 49 ], [ 28, 36 ], [ 21, 25 ], [ 14, 16 ], [ 7, 9 ], [ 2, 4 ], [ 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._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.options = options, this.document = options.document, this._element = this.document.createElementNS("http://www.w3.org/2000/svg", "svg");
+        let width = numToAttr(options.width), height = numToAttr(options.height);
+        this._element.setAttribute("width", width), this._element.setAttribute("height", height), 
+        this._element.setAttribute("viewBox", `0 0 ${width} ${height}`), 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;
-        let drawImageSize = {
+    async drawQR(qr_size) {
+        let count = qr_size.getModuleCount(), typeNumber = parseInt(((count - 17) / 4).toFixed(0), 10), dotSize = this.options.dotsOptions.size, drawImageSize = {
             hideXDots: 0,
             hideYDots: 0,
             width: 0,
             height: 0
         };
-        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 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({
-                originalWidth: size.width,
-                originalHeight: size.height,
-                maxHiddenDots,
+        if (this.qr = qr_size, this.options.image) {
+            qr_size = await this.imageTools.getSize(this.options.image, this.options.imageOptions.crossOrigin);
+            let {imageOptions, errorCorrectionPercent} = this.options, coverLevel = imageOptions.imageSize * errorCorrectionPercent, alignment = alignmentCount.find((v => v[0] <= typeNumber)) || [ 0, 0 ];
+            drawImageSize = function({originalHeight, originalWidth, maxHiddenDots: JSCompiler_object_inline_x_18_hideMax_maxHiddenDots, maxHiddenAxisDots: JSCompiler_object_inline_y_19_maxHiddenAxisDots_maxW_upper, dotSize, margin}) {
+                if (0 >= originalHeight || 0 >= originalWidth || 0 >= JSCompiler_object_inline_x_18_hideMax_maxHiddenDots || 0 >= dotSize || 4 * margin ** 2 > JSCompiler_object_inline_x_18_hideMax_maxHiddenDots) return {
+                    height: 0,
+                    width: 0,
+                    hideYDots: 0,
+                    hideXDots: 0
+                };
+                JSCompiler_object_inline_y_19_maxHiddenAxisDots_maxW_upper && 0 == JSCompiler_object_inline_y_19_maxHiddenAxisDots_maxW_upper % 2 && (JSCompiler_object_inline_y_19_maxHiddenAxisDots_maxW_upper = Math.max(1, JSCompiler_object_inline_y_19_maxHiddenAxisDots_maxW_upper - 1));
+                var JSCompiler_object_inline_x_16_dimMax = Math.max(originalWidth, originalHeight), JSCompiler_object_inline_y_17_dimMin_hideMin = Math.min(originalWidth, originalHeight), lower_maxH_size = 0;
+                JSCompiler_object_inline_y_19_maxHiddenAxisDots_maxW_upper = (JSCompiler_object_inline_y_19_maxHiddenAxisDots_maxW_upper || JSCompiler_object_inline_x_18_hideMax_maxHiddenDots) - 2 * margin;
+                do {
+                    let size = lower_maxH_size + (JSCompiler_object_inline_y_19_maxHiddenAxisDots_maxW_upper - lower_maxH_size) / 2, dotsMax = Math.max(1, Math.ceil(size + 2 * margin));
+                    0 == dotsMax % 2 && dotsMax++;
+                    let dotsMin = Math.max(1, Math.ceil(size * JSCompiler_object_inline_y_17_dimMin_hideMin / JSCompiler_object_inline_x_16_dimMax + 2 * margin));
+                    0 == dotsMin % 2 && dotsMin++, dotsMax * dotsMin > JSCompiler_object_inline_x_18_hideMax_maxHiddenDots ? JSCompiler_object_inline_y_19_maxHiddenAxisDots_maxW_upper = size : lower_maxH_size = size;
+                } while (.001 < Math.abs(lower_maxH_size - JSCompiler_object_inline_y_19_maxHiddenAxisDots_maxW_upper));
+                return 0 == (JSCompiler_object_inline_x_18_hideMax_maxHiddenDots = Math.max(1, Math.ceil(lower_maxH_size + 2 * margin))) % 2 && JSCompiler_object_inline_x_18_hideMax_maxHiddenDots++, 
+                0 == (JSCompiler_object_inline_y_17_dimMin_hideMin = Math.max(1, Math.ceil(lower_maxH_size * JSCompiler_object_inline_y_17_dimMin_hideMin / JSCompiler_object_inline_x_16_dimMax + 2 * margin))) % 2 && JSCompiler_object_inline_y_17_dimMin_hideMin++, 
+                originalWidth > originalHeight ? JSCompiler_object_inline_x_16_dimMax = JSCompiler_object_inline_x_18_hideMax_maxHiddenDots : (JSCompiler_object_inline_x_16_dimMax = JSCompiler_object_inline_y_17_dimMin_hideMin, 
+                JSCompiler_object_inline_y_17_dimMin_hideMin = JSCompiler_object_inline_x_18_hideMax_maxHiddenDots), 
+                JSCompiler_object_inline_x_18_hideMax_maxHiddenDots = JSCompiler_object_inline_y_19_maxHiddenAxisDots_maxW_upper = (JSCompiler_object_inline_x_16_dimMax - 2 * margin) * dotSize, 
+                (JSCompiler_object_inline_y_19_maxHiddenAxisDots_maxW_upper = JSCompiler_object_inline_y_19_maxHiddenAxisDots_maxW_upper * originalHeight / originalWidth) > (lower_maxH_size = (JSCompiler_object_inline_y_17_dimMin_hideMin - 2 * margin) * dotSize) && (JSCompiler_object_inline_y_19_maxHiddenAxisDots_maxW_upper = lower_maxH_size, 
+                JSCompiler_object_inline_x_18_hideMax_maxHiddenDots = lower_maxH_size * originalWidth / originalHeight), 
+                {
+                    height: Math.round(JSCompiler_object_inline_y_19_maxHiddenAxisDots_maxW_upper + 2 * margin * dotSize),
+                    width: Math.round(JSCompiler_object_inline_x_18_hideMax_maxHiddenDots + 2 * margin * dotSize),
+                    hideYDots: JSCompiler_object_inline_y_17_dimMin_hideMin,
+                    hideXDots: JSCompiler_object_inline_x_16_dimMax
+                };
+            }({
+                originalWidth: qr_size.width,
+                originalHeight: qr_size.height,
+                maxHiddenDots: Math.floor(coverLevel * (count * count - 192 - 2 * (count - 16) - 25 * alignment[1])),
                 maxHiddenAxisDots: count - 14,
                 dotSize,
                 margin: imageOptions.margin
             });
         }
-        this.drawBackground();
-        this.drawDots((i, j) => {
-            if (this._options.imageOptions.hideBackgroundDots) {
-                if (i >= (count - drawImageSize.hideXDots) / 2 &&
-                    i < (count + drawImageSize.hideXDots) / 2 &&
-                    j >= (count - drawImageSize.hideYDots) / 2 &&
-                    j < (count + drawImageSize.hideYDots) / 2) {
-                    return false;
-                }
-            }
-            if (squareMask[i]?.[j] || squareMask[i - count + 7]?.[j] || squareMask[i]?.[j - count + 7]) {
-                return false;
-            }
-            if (dotMask[i]?.[j] || dotMask[i - count + 7]?.[j] || dotMask[i]?.[j - count + 7]) {
-                return false;
-            }
-            return true;
+        this.drawBackground(), this.drawDots(((i, j) => !(this.options.imageOptions.hideBackgroundDots && i >= (count - drawImageSize.hideXDots) / 2 && i < (count + drawImageSize.hideXDots) / 2 && j >= (count - drawImageSize.hideYDots) / 2 && j < (count + drawImageSize.hideYDots) / 2 || squareMask[i]?.[j] || squareMask[i - count + 7]?.[j] || squareMask[i]?.[j - count + 7] || dotMask[i]?.[j] || dotMask[i - count + 7]?.[j] || dotMask[i]?.[j - count + 7]))), 
+        this.drawCorners(), this.options.image && 0 < drawImageSize.width && 0 < drawImageSize.height && await this.drawImage({
+            width: drawImageSize.width,
+            height: drawImageSize.height,
+            count,
+            dotSize
         });
-        this.drawCorners();
-        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;
-        if (element && options.backgroundOptions) {
-            const gradientOptions = options.backgroundOptions.gradient;
-            const color = options.backgroundOptions.color;
-            this._createColor({
-                options: gradientOptions,
-                color: color,
+        let options = this.options;
+        if (this._element && options.backgroundOptions) {
+            this.createColor({
+                options: options.backgroundOptions.gradient,
+                color: options.backgroundOptions.color,
                 additionalRotation: 0,
                 x: 0,
                 y: 0,
@@ -1242,102 +852,48 @@ class QRSVG {
                 width: options.width,
                 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);
-            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);
+            let size = Math.min(options.width, options.height), 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", numToAttr((options.width - size) / 2)), 
+            element.setAttribute("y", numToAttr((options.height - size) / 2)), element.setAttribute("width", numToAttr(size)), 
+            element.setAttribute("height", numToAttr(size)), element.setAttribute("rx", numToAttr(size / 2 * (options.backgroundOptions.round || 0))), 
+            this.backgroundMaskGroup.appendChild(element);
         }
     }
     drawDots(filter) {
-        if (!this._qr) {
-            throw "QR code is not defined";
-        }
-        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 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);
-        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)) {
-                    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);
-                });
-                if (dot._element && this._dotsMask) {
-                    this._dotsMaskGroup.appendChild(dot._element);
-                }
-            }
-        }
-        let colorX = xBeginning;
-        let colorY = yBeginning;
-        let colorCount = count;
+        if (!this.qr) throw "QR code is not defined";
+        let options = this.options, count = this.qr.getModuleCount();
+        if (count > options.width || count > options.height) throw "The canvas is too small.";
+        var additionalDots_minSize = Math.min(options.width, options.height);
+        let dotSize = this.options.dotsOptions.size;
+        var xBeginning_xFakeBeginning = Math.floor((options.width - count * dotSize) / 2), yBeginning_yFakeBeginning = Math.floor((options.height - count * dotSize) / 2);
+        let 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++) filter && !filter(i, j) || !this.qr?.isDark(j, i) || (dot.draw({
+            x: xBeginning_xFakeBeginning + i * dotSize,
+            y: yBeginning_yFakeBeginning + j * dotSize,
+            size: dotSize,
+            getNeighbor: (xOffset, yOffset) => !(0 > i + xOffset || 0 > j + yOffset || i + xOffset >= count || j + yOffset >= count || filter && !filter(i + xOffset, j + yOffset)) && (!!this.qr && this.qr.isDark(j + yOffset, i + xOffset))
+        }), dot.element && this.dotsMask && this.dotsMaskGroup.appendChild(dot.element));
+        let colorX = xBeginning_xFakeBeginning, colorY = yBeginning_yFakeBeginning, colorCount = count;
         if (options.shape === ShapeType.circle) {
-            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;
-            const yFakeBeginning = yBeginning - additionalDots * dotSize;
-            colorX = xFakeBeginning;
-            colorY = yFakeBeginning;
-            colorCount = count + additionalDots * 2;
-            const fakeMatrix = [];
-            const center = Math.floor(fakeCount / 2);
+            additionalDots_minSize = Math.floor((additionalDots_minSize / dotSize - count - 2 * (this.options.backgroundOptions && this.options.backgroundOptions.margin || 0)) / 2);
+            let fakeCount = count + 2 * additionalDots_minSize;
+            colorX = xBeginning_xFakeBeginning -= additionalDots_minSize * dotSize, colorY = yBeginning_yFakeBeginning -= additionalDots_minSize * dotSize, 
+            colorCount = count + 2 * additionalDots_minSize;
+            let fakeMatrix = [], center = Math.floor(fakeCount / 2);
             for (let i = 0; i < fakeCount; i++) {
                 fakeMatrix[i] = [];
-                for (let j = 0; j < fakeCount; j++) {
-                    if (i >= additionalDots - 1 &&
-                        i <= fakeCount - additionalDots &&
-                        j >= additionalDots - 1 &&
-                        j <= fakeCount - additionalDots) {
-                        fakeMatrix[i][j] = 0;
-                        continue;
-                    }
-                    if (Math.sqrt((i - center) * (i - center) + (j - center) * (j - center)) > center) {
-                        fakeMatrix[i][j] = 0;
-                        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)
-                        ? 1
-                        : 0;
-                }
-            }
-            for (let i = 0; i < fakeCount; i++) {
-                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];
-                    });
-                    if (dot._element && this._dotsMask) {
-                        this._dotsMaskGroup.appendChild(dot._element);
-                    }
-                }
+                for (let j = 0; j < fakeCount; j++) fakeMatrix[i][j] = i >= additionalDots_minSize - 1 && i <= fakeCount - additionalDots_minSize && j >= additionalDots_minSize - 1 && j <= fakeCount - additionalDots_minSize || Math.sqrt((i - center) * (i - center) + (j - center) * (j - center)) > center ? 0 : this.qr.isDark(0 > j - 2 * additionalDots_minSize ? j : j >= count ? j - 2 * additionalDots_minSize : j - additionalDots_minSize, 0 > i - 2 * additionalDots_minSize ? i : i >= count ? i - 2 * additionalDots_minSize : i - additionalDots_minSize) ? 1 : 0;
             }
+            for (let i = 0; i < fakeCount; i++) for (let j = 0; j < fakeCount; j++) fakeMatrix[i][j] && (dot.draw({
+                x: xBeginning_xFakeBeginning + i * dotSize,
+                y: yBeginning_yFakeBeginning + j * dotSize,
+                size: dotSize,
+                getNeighbor: (xOffset, yOffset) => !!fakeMatrix[i + xOffset]?.[j + yOffset]
+            }), dot.element && this.dotsMask && this.dotsMaskGroup.appendChild(dot.element));
         }
-        this._createColor({
+        this.createColor({
             options: options.dotsOptions?.gradient,
             color: options.dotsOptions.color,
             additionalRotation: 0,
@@ -1349,431 +905,227 @@ class QRSVG {
         });
     }
     drawCorners() {
-        if (!this._qr) {
-            throw "QR code is not defined";
-        }
-        const element = this._element;
-        const options = this._options;
-        if (!element) {
-            throw "Element code is not defined";
-        }
-        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);
-        const yBeginning = Math.floor((options.height - count * dotSize) / 2);
-        [
-            [0, 0, 0],
-            [1, 0, Math.PI / 2],
-            [0, 1, -Math.PI / 2]
-        ].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;
-            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({
-                    options: options.cornersSquareOptions?.gradient,
-                    color: options.cornersSquareOptions?.color,
-                    additionalRotation: rotation,
-                    x,
-                    y,
-                    height: cornersSquareSize,
-                    width: cornersSquareSize,
-                    name: `corners-square-color-${column}-${row}`
-                });
-            }
-            if (options.cornersSquareOptions?.type) {
-                const cornersSquare = new QRCornerSquare({
-                    svg: this._element,
-                    type: options.cornersSquareOptions.type,
-                    document: this._document
-                });
-                cornersSquare.draw(x, y, cornersSquareSize, rotation);
-                if (cornersSquare._element && cornersSquareMaskGroup) {
-                    cornersSquareMaskGroup.appendChild(cornersSquare._element);
-                }
-            }
-            else {
-                const dot = new QRDot({ svg: this._element, type: options.dotsOptions.type, document: 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);
-                        }
-                    }
-                }
-            }
-            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({
-                    options: options.cornersDotOptions?.gradient,
-                    color: options.cornersDotOptions?.color,
-                    additionalRotation: rotation,
-                    x: x + dotSize * 2,
-                    y: y + dotSize * 2,
-                    height: cornersDotSize,
-                    width: cornersDotSize,
-                    name: `corners-dot-color-${column}-${row}`
-                });
+        if (!this.qr) throw "QR code is not defined";
+        let options = this.options;
+        if (!this._element) throw "Element code is not defined";
+        let count = this.qr.getModuleCount(), dotSize = this.options.dotsOptions.size, cornersSquareSize = 7 * dotSize, cornersDotSize = 3 * dotSize, xBeginning = Math.floor((options.width - count * dotSize) / 2), yBeginning = Math.floor((options.height - count * dotSize) / 2);
+        [ [ 0, 0, 0 ], [ 1, 0, Math.PI / 2 ], [ 0, 1, -Math.PI / 2 ] ].forEach((([column_cornersDot, row, dot]) => {
+            let x = xBeginning + column_cornersDot * dotSize * (count - 7), y = yBeginning + row * dotSize * (count - 7);
+            var cornersDotMaskGroup_cornersSquareMask = this.dotsMask;
+            let cornersSquareMaskGroup = this.dotsMaskGroup;
+            var cornersDotMask_cornersSquare_dot = this.dotsMask;
+            if (cornersDotMaskGroup_cornersSquareMask = this.dotsMaskGroup, (options.cornersSquareOptions?.gradient || options.cornersSquareOptions?.color) && ([cornersDotMaskGroup_cornersSquareMask, cornersSquareMaskGroup] = this.createMask(`mask-corners-square-color-${column_cornersDot}-${row}`), 
+            this.defs.appendChild(cornersDotMaskGroup_cornersSquareMask), cornersDotMask_cornersSquare_dot = cornersDotMaskGroup_cornersSquareMask, 
+            cornersDotMaskGroup_cornersSquareMask = cornersSquareMaskGroup, this.createColor({
+                options: options.cornersSquareOptions?.gradient,
+                color: options.cornersSquareOptions?.color,
+                additionalRotation: dot,
+                x,
+                y,
+                height: cornersSquareSize,
+                width: cornersSquareSize,
+                name: `corners-square-color-${column_cornersDot}-${row}`
+            })), options.cornersSquareOptions?.type) (cornersDotMask_cornersSquare_dot = new QRCornerSquare(options.cornersSquareOptions.type, this.document)).draw({
+                x,
+                y,
+                size: cornersSquareSize,
+                rotation: dot
+            }), cornersDotMask_cornersSquare_dot.element && cornersSquareMaskGroup && cornersSquareMaskGroup.appendChild(cornersDotMask_cornersSquare_dot.element); else {
+                cornersDotMask_cornersSquare_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++) squareMask[i]?.[j] && (cornersDotMask_cornersSquare_dot.draw({
+                    x: x + i * dotSize,
+                    y: y + j * dotSize,
+                    size: dotSize,
+                    getNeighbor: (xOffset, yOffset) => !!squareMask[i + xOffset]?.[j + yOffset]
+                }), cornersDotMask_cornersSquare_dot.element && cornersSquareMaskGroup && cornersSquareMaskGroup.appendChild(cornersDotMask_cornersSquare_dot.element));
             }
-            if (options.cornersDotOptions?.type) {
-                const cornersDot = new QRCornerDot({
-                    svg: this._element,
-                    type: options.cornersDotOptions.type,
-                    document: this._document
-                });
-                cornersDot.draw(x + dotSize * 2, y + dotSize * 2, cornersDotSize, rotation);
-                if (cornersDot._element && cornersDotMaskGroup) {
-                    cornersDotMaskGroup.appendChild(cornersDot._element);
-                }
-            }
-            else {
-                const dot = new QRDot({ svg: this._element, type: options.dotsOptions.type, document: 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);
-                        }
-                    }
-                }
-            }
-        });
-    }
-    async drawImage({ width, height, count, dotSize }) {
-        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;
-        const dx = xBeginning + margin + (count * dotSize - width) / 2;
-        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");
-        image.setAttributeNS("http://www.w3.org/1999/xlink", "xlink:href", imageUrl || "");
-        if (imageUrl.startsWith("data:image/svg+xml;")) {
-            let data = imageUrl.substring(19);
-            const i = data.indexOf(",");
-            const encoding = data.substring(0, i);
-            data = data.substring(i + 1);
-            switch (encoding) {
-                case "base64":
-                    data = typeof atob == "function" ? atob(data) : Buffer.from(data, "base64").toString("utf8");
-                    break;
-                default:
-                    data = "";
-                    break;
-            }
-            if (data) {
-                const container = new DOMParser().parseFromString(data, "text/xml");
-                const rootEl = Array.from(container.getElementsByTagName("svg"));
-                if (rootEl.length)
-                    image = rootEl[0];
+            if ((options.cornersDotOptions?.gradient || options.cornersDotOptions?.color) && ([cornersDotMask_cornersSquare_dot, cornersDotMaskGroup_cornersSquareMask] = this.createMask(`mask-corners-dot-color-${column_cornersDot}-${row}`), 
+            this.defs.appendChild(cornersDotMask_cornersSquare_dot), this.createColor({
+                options: options.cornersDotOptions?.gradient,
+                color: options.cornersDotOptions?.color,
+                additionalRotation: dot,
+                x: x + 2 * dotSize,
+                y: y + 2 * dotSize,
+                height: cornersDotSize,
+                width: cornersDotSize,
+                name: `corners-dot-color-${column_cornersDot}-${row}`
+            })), options.cornersDotOptions?.type) (column_cornersDot = new QRCornerDot(options.cornersDotOptions.type, this.document)).draw({
+                x: x + 2 * dotSize,
+                y: y + 2 * dotSize,
+                size: cornersDotSize,
+                rotation: dot
+            }), column_cornersDot.element && cornersDotMaskGroup_cornersSquareMask && cornersDotMaskGroup_cornersSquareMask.appendChild(column_cornersDot.element); else {
+                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++) dotMask[i]?.[j] && (dot.draw({
+                    x: x + i * dotSize,
+                    y: y + j * dotSize,
+                    size: dotSize,
+                    getNeighbor: (xOffset, yOffset) => !!dotMask[i + xOffset]?.[j + yOffset]
+                }), dot.element && cornersDotMaskGroup_cornersSquareMask && cornersDotMaskGroup_cornersSquareMask.appendChild(dot.element));
             }
+        }));
+    }
+    async drawImage({width: dw_width, height: dh_height, count, dotSize}) {
+        var image = this.options, container_data = image.imageOptions.margin * dotSize;
+        let dx = Math.floor((image.width - count * dotSize) / 2) + container_data + (count * dotSize - dw_width) / 2;
+        if (count = Math.floor((image.height - count * dotSize) / 2) + container_data + (count * dotSize - dh_height) / 2, 
+        dw_width -= 2 * container_data, dh_height -= 2 * container_data, container_data = await this.imageTools.toDataURL(image.image || ""), 
+        (image = this.document.createElementNS("http://www.w3.org/2000/svg", "image")).setAttributeNS("http://www.w3.org/1999/xlink", "xlink:href", container_data || ""), 
+        container_data.startsWith("data:image/svg+xml;")) {
+            dotSize = (container_data = container_data.substring(19)).indexOf(",");
+            let encoding = container_data.substring(0, dotSize);
+            if (container_data = container_data.substring(dotSize + 1), "base64" === encoding) container_data = "function" == typeof atob ? atob(container_data) : Buffer.from(container_data, "base64").toString("utf8"); else container_data = "";
+            container_data && (container_data = (new DOMParser).parseFromString(container_data, "text/xml"), 
+            (container_data = Array.from(container_data.getElementsByTagName("svg"))).length && (image = container_data[0]));
         }
-        image.setAttribute("x", String(dx));
-        image.setAttribute("y", String(dy));
-        image.setAttribute("width", `${dw}px`);
-        image.setAttribute("height", `${dh}px`);
+        image.setAttribute("x", numToAttr(dx)), image.setAttribute("y", numToAttr(count)), 
+        image.setAttribute("width", `${numToAttr(dw_width)}px`), image.setAttribute("height", `${numToAttr(dh_height)}px`), 
         this._element.appendChild(image);
     }
-    /** @ignore */
-    _createColor({ options, color, additionalRotation, x, y, height, width, name }) {
-        const size = width > height ? width : height;
-        const rect = this._document.createElementNS("http://www.w3.org/2000/svg", "rect");
-        rect.setAttribute("x", String(x));
-        rect.setAttribute("y", String(y));
-        rect.setAttribute("height", String(height));
-        rect.setAttribute("width", String(width));
-        rect.setAttribute("style", `mask:url(#mask-${name})`);
-        if (options) {
+    createColor({options, color, additionalRotation: additionalRotation_positiveRotation, x, y, height, width, name}) {
+        var size = width > height ? width : height;
+        let rect = this.document.createElementNS("http://www.w3.org/2000/svg", "rect");
+        if (rect.setAttribute("x", numToAttr(x)), rect.setAttribute("y", numToAttr(y)), 
+        rect.setAttribute("height", numToAttr(height)), rect.setAttribute("width", numToAttr(width)), 
+        rect.setAttribute("style", `mask:url(#mask-${name})`), options) {
             let gradient;
-            if (options.type === GradientType.radial) {
-                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));
-                gradient.setAttribute("fy", String(y + height / 2));
-                gradient.setAttribute("cx", String(x + width / 2));
-                gradient.setAttribute("cy", String(y + height / 2));
-                gradient.setAttribute("r", String(size / 2));
-            }
-            else {
-                const rotation = ((options.rotation || 0) + additionalRotation) % (2 * Math.PI);
-                const positiveRotation = (rotation + 2 * Math.PI) % (2 * Math.PI);
-                let x0 = x + width / 2;
+            if (options.type === GradientType.radial) gradient = this.document.createElementNS("http://www.w3.org/2000/svg", "radialGradient"), 
+            gradient.setAttribute("id", name), gradient.setAttribute("gradientUnits", "userSpaceOnUse"), 
+            gradient.setAttribute("fx", numToAttr(x + width / 2)), gradient.setAttribute("fy", numToAttr(y + height / 2)), 
+            gradient.setAttribute("cx", numToAttr(x + width / 2)), gradient.setAttribute("cy", numToAttr(y + height / 2)), 
+            gradient.setAttribute("r", numToAttr(size / 2)); else {
+                size = x + width / 2;
                 let y0 = y + height / 2;
-                let x1 = x + width / 2;
-                let y1 = y + height / 2;
-                if ((positiveRotation >= 0 && positiveRotation <= 0.25 * Math.PI) ||
-                    (positiveRotation > 1.75 * Math.PI && positiveRotation <= 2 * Math.PI)) {
-                    x0 = x0 - width / 2;
-                    y0 = y0 - (height / 2) * Math.tan(rotation);
-                    x1 = x1 + width / 2;
-                    y1 = y1 + (height / 2) * Math.tan(rotation);
-                }
-                else if (positiveRotation > 0.25 * Math.PI && positiveRotation <= 0.75 * Math.PI) {
-                    y0 = y0 - height / 2;
-                    x0 = x0 - width / 2 / Math.tan(rotation);
-                    y1 = y1 + height / 2;
-                    x1 = x1 + width / 2 / Math.tan(rotation);
-                }
-                else if (positiveRotation > 0.75 * Math.PI && positiveRotation <= 1.25 * Math.PI) {
-                    x0 = x0 + width / 2;
-                    y0 = y0 + (height / 2) * Math.tan(rotation);
-                    x1 = x1 - width / 2;
-                    y1 = y1 - (height / 2) * Math.tan(rotation);
-                }
-                else if (positiveRotation > 1.25 * Math.PI && positiveRotation <= 1.75 * Math.PI) {
-                    y0 = y0 + height / 2;
-                    x0 = x0 + width / 2 / Math.tan(rotation);
-                    y1 = y1 - height / 2;
-                    x1 = x1 - width / 2 / Math.tan(rotation);
-                }
-                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)));
-                gradient.setAttribute("y1", String(Math.round(y0)));
-                gradient.setAttribute("x2", String(Math.round(x1)));
-                gradient.setAttribute("y2", String(Math.round(y1)));
+                x += width / 2, y += height / 2, 0 <= (additionalRotation_positiveRotation = ((color = ((options.rotation || 0) + additionalRotation_positiveRotation) % (2 * Math.PI)) + 2 * Math.PI) % (2 * Math.PI)) && additionalRotation_positiveRotation <= .25 * Math.PI || additionalRotation_positiveRotation > 1.75 * Math.PI && additionalRotation_positiveRotation <= 2 * Math.PI ? (size -= width / 2, 
+                y0 -= height / 2 * Math.tan(color), x += width / 2, y += height / 2 * Math.tan(color)) : additionalRotation_positiveRotation > .25 * Math.PI && additionalRotation_positiveRotation <= .75 * Math.PI ? (y0 -= height / 2, 
+                size -= width / 2 / Math.tan(color), y += height / 2, x += width / 2 / Math.tan(color)) : additionalRotation_positiveRotation > .75 * Math.PI && additionalRotation_positiveRotation <= 1.25 * Math.PI ? (size += width / 2, 
+                y0 += height / 2 * Math.tan(color), x -= width / 2, y -= height / 2 * Math.tan(color)) : additionalRotation_positiveRotation > 1.25 * Math.PI && additionalRotation_positiveRotation <= 1.75 * Math.PI && (y0 += height / 2, 
+                size += width / 2 / Math.tan(color), y -= height / 2, x -= width / 2 / Math.tan(color)), 
+                gradient = this.document.createElementNS("http://www.w3.org/2000/svg", "linearGradient"), 
+                gradient.setAttribute("id", name), gradient.setAttribute("gradientUnits", "userSpaceOnUse"), 
+                gradient.setAttribute("x1", numToAttr(size)), gradient.setAttribute("y1", numToAttr(y0)), 
+                gradient.setAttribute("x2", numToAttr(x)), gradient.setAttribute("y2", numToAttr(y));
             }
-            options.colorStops.forEach(({ offset, color }) => {
-                const stop = this._document.createElementNS("http://www.w3.org/2000/svg", "stop");
-                stop.setAttribute("offset", `${100 * offset}%`);
-                stop.setAttribute("stop-color", color);
+            options.colorStops.forEach((({offset, color}) => {
+                let stop = this.document.createElementNS("http://www.w3.org/2000/svg", "stop");
+                stop.setAttribute("offset", `${numToAttr(100 * offset)}%`), stop.setAttribute("stop-color", color), 
                 gradient.appendChild(stop);
-            });
-            rect.setAttribute("fill", `url(#${name})`);
-            this._defs.appendChild(gradient);
-        }
-        else if (color) {
-            rect.setAttribute("fill", color);
-        }
+            })), rect.setAttribute("fill", `url(#${name})`), this.defs.appendChild(gradient);
+        } else 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");
-        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");
-        group.setAttribute("fill", "#fff");
-        mask.appendChild(group);
-        return [mask, group];
+    createMask(group_id) {
+        let options = this.options, mask = this.document.createElementNS("http://www.w3.org/2000/svg", "mask");
+        return mask.setAttribute("id", group_id), mask.setAttribute("maskUnits", "userSpaceOnUse"), 
+        mask.setAttribute("x", "0"), mask.setAttribute("y", "0"), mask.setAttribute("width", numToAttr(options.width)), 
+        mask.setAttribute("height", numToAttr(options.height)), (group_id = this.document.createElementNS("http://www.w3.org/2000/svg", "g")).setAttribute("fill", "#fff"), 
+        mask.appendChild(group_id), [ mask, group_id ];
     }
 }
 
-let QRCodeStyling$1 = class QRCodeStyling {
+let QRCodeStyling$1 = class {
+    get size() {
+        if (this.qrSVG) return {
+            width: this.qrSVG.width,
+            height: this.qrSVG.height
+        };
+    }
     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 = "";
-        }
+    update(mode) {
+        this.container && (this.container.innerHTML = ""), this.options = mode ? sanitizeOptions(mergeDeep(this.options, mode)) : this.options, 
+        this.options.data && (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), 
+        (mode = this.options.qrOptions.mode || function(data) {
+            switch (!0) {
+              case /^[0-9]*$/.test(data):
+                return Mode.numeric;
+
+              case /^[0-9A-Z $%*+\-./:]*$/.test(data):
+                return Mode.alphanumeric;
+
+              case /[^\u0000-\u00ff]/.test(data):
+                return Mode.unicode;
+
+              default:
+                return Mode.byte;
+            }
+        }(this.options.data)) == Mode.unicode ? (qrcode.stringToBytes = qrcode.stringToBytesFuncs["UTF-8"], 
+        mode = Mode.byte) : qrcode.stringToBytes = qrcode.stringToBytesFuncs.default, this.qr.addData(this.options.data, mode), 
+        this.qr.make(), this.setupSvg(), this.append(this.container));
     }
-    /** @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);
-        });
+    append(container) {
+        container && (this.qrSVG?.element && container.appendChild(this.qrSVG.element), 
+        this.container = container);
     }
-    /** @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) {
-            return;
-        }
-        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);
-        if (mode == Mode.unicode) {
-            qrcode.stringToBytes = qrcode.stringToBytesFuncs["UTF-8"];
-            mode = Mode.byte;
-        }
-        else {
-            qrcode.stringToBytes = qrcode.stringToBytesFuncs["default"];
-        }
-        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 */
-    container) {
-        if (!container) {
-            return;
-        }
-        if (typeof container.appendChild !== "function") {
-            throw "Container should be a single DOM node";
-        }
-        if (this._svg) {
-            container.appendChild(this._svg);
-        }
-        this._container = container;
-    }
-    /**
-     *
-     * @example
-     *
-     * ```js
-     * const extension = (svg, options) => {
-     *   const { width, height } = options;
-     *   const size = Math.min(width, height);
-     *   const border = options.document.createElementNS("http://www.w3.org/2000/svg", "rect");
-     *   const borderAttributes = {
-     *     fill: "none",
-     *     x: (width - size + 40) / 2,
-     *     y: (height - size + 40) / 2,
-     *     width: size - 40,
-     *     height: size - 40,
-     *     stroke: "black",
-     *     "stroke-width": 40,
-     *     rx: 100
-     *   };
-     *   Object.keys(borderAttributes).forEach((attribute) => {
-     *     border.setAttribute(attribute, borderAttributes[attribute]);
-     *   });
-     *   svg.appendChild(border);
-     * };
-     * ```
-     */
-    applyExtension(
-    /** Extension is a function that takes svg and previously applied options and modifies an svg */
-    extension) {
-        if (!extension) {
-            throw "Extension function should be defined.";
-        }
-        this._extension = extension;
-        this.update();
+    applyExtension(extension) {
+        if (!extension) throw "Extension function should be defined.";
+        this.extension = extension, this.update();
     }
     deleteExtension() {
-        this._extension = undefined;
-        this.update();
+        this.extension = void 0, this.update();
     }
     async serialize() {
-        if (!this._qr)
-            throw "QR code is empty";
-        const element = await this._getElement();
-        if (!element) {
-            return;
+        if (!this.qr) throw "QR code is empty";
+        if (this.qrSVG?.element && this.svgDrawingPromise || this.setupSvg(), await this.svgDrawingPromise, 
+        this.qrSVG?.element) return '<?xml version="1.0" standalone="no"?>\r\n' + (new XMLSerializer).serializeToString(this.qrSVG.element);
+    }
+    setupSvg() {
+        if (this.qr) {
+            var count = Math.ceil((this.options.shape == ShapeType.circle ? Math.sqrt(2) : 1) * this.qr.getModuleCount());
+            count = Math.ceil(this.options.dotsOptions.size * (count + 2 * (this.options.backgroundOptions && this.options.backgroundOptions.margin || 0))), 
+            this.qrSVG = new QRSVG({
+                ...this.options,
+                width: count,
+                height: count,
+                errorCorrectionPercent: ErrorCorrectionPercents[this.options.qrOptions.errorCorrectionLevel]
+            }), this.svgDrawingPromise = this.qrSVG.drawQR(this.qr).then((() => {
+                this.qrSVG?.element && this.extension?.(this.qrSVG.element, this.options);
+            }));
         }
-        const serializer = new XMLSerializer();
-        let source = serializer.serializeToString(element);
-        source = '<?xml version="1.0" standalone="no"?>\r\n' + source;
-        return source;
     }
 };
 
-const browserUtils = undefined;
+var FileExtension;
+
+(FileExtension = FileExtension || (FileExtension = {})).svg = "svg", FileExtension.png = "png", 
+FileExtension.jpeg = "jpeg", FileExtension.webp = "webp";
+
 class QRCodeStyling extends QRCodeStyling$1 {
     constructor(options) {
-        const dom = new DOMImplementation().createDocument(null, null);
-        const imageCache = new Map();
-        const loadImage = async function (url) {
-            if (typeof url == "string") {
-                let pr = imageCache.get(url);
-                if (pr)
-                    return pr;
-                pr = fetch(url).then((res) => res
-                    .arrayBuffer()
-                    .then((buff) => Buffer.from(buff))
-                    .then(async (data) => ({
-                    contentType: res.headers.get("Content-Type") || (await fileTypeFromBuffer(data).then((r) => r?.mime)),
+        async function loadImage(buff) {
+            if ("string" == typeof buff) {
+                let pr = imageCache.get(buff);
+                return pr || (pr = fetch(buff).then((res => res.arrayBuffer().then((buff => Buffer.from(buff))).then((async data => ({
+                    contentType: res.headers.get("Content-Type") || await fileTypeFromBuffer(data).then((r => r?.mime)),
                     data
-                })));
-                imageCache.set(url, pr);
-                return pr;
+                }))))), imageCache.set(buff, pr), pr);
             }
-            else {
-                const buff = Buffer.from(url);
-                const mime = await fileTypeFromBuffer(buff).then((r) => r?.mime);
-                return {
-                    contentType: mime,
-                    data: buff
-                };
-            }
-        };
-        global.XMLSerializer = XMLSerializer$1;
-        global.DOMParser = DOMParser$1;
-        super({
+            return buff = Buffer.from(buff), {
+                contentType: await fileTypeFromBuffer(buff).then((r => r?.mime)),
+                data: buff
+            };
+        }
+        let dom = (new DOMImplementation).createDocument(null, null), imageCache = new Map;
+        global.XMLSerializer = XMLSerializer$1, global.DOMParser = DOMParser$1, super({
             ...options,
             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);
-                    const meta = await sharp(data).metadata();
-                    return {
-                        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-                        width: meta.width,
-                        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-                        height: meta.height
-                    };
-                }
+                toDataURL: url => loadImage(url).then((({contentType, data}) => `data:${contentType?.replace("application/xml", "image/svg+xml")};base64,${data.toString("base64")}`)),
+                getSize: async data => (({data} = Buffer.isBuffer(options.image) ? {
+                    data: options.image
+                } : await loadImage(data)), {
+                    width: (data = await sharp(data).metadata()).width,
+                    height: data.height
+                })
             }
         });
     }
 }
 
+var browserUtils = void 0;
+
 export { CornerDotType, CornerSquareType, DotType, ErrorCorrectionLevel, ErrorCorrectionPercents, FileExtension, GradientType, Mode, QRCodeStyling, ShapeType, TypeNumber, browserUtils };
 //# sourceMappingURL=qr-code-styling-node.js.map