@liquid-js/qr-code-styling 2.1.2 → 2.2.1

package/README.md

@@ -56,7 +56,7 @@ If you have issues / suggestions / notes / questions, please open an issue or co
         imageOptions: {
           crossOrigin: "anonymous",
           margin: 1,
-          imageSize: 0.9
+          imageSize: 0.5
         }
       });
 
@@ -93,7 +93,7 @@ const qrCode = new QRCodeStyling({
   imageOptions: {
     crossOrigin: "anonymous",
     margin: 1,
-    imageSize: 0.9
+    imageSize: 0.5
   }
 });
 

package/lib/figures/cornerDot/QRCornerDot.d.ts

@@ -1,4 +1,4 @@
-import { CornerDotType, RotateFigureArgs, BasicFigureDrawArgs, DrawArgs } from "../../types";
+import { BasicFigureDrawArgs, CornerDotType, DrawArgs, RotateFigureArgs } from "../../types";
 export declare class QRCornerDot {
     _element?: SVGElement;
     _svg: SVGElement;
@@ -13,6 +13,16 @@ export declare class QRCornerDot {
     _rotateFigure({ x, y, size, rotation, draw }: RotateFigureArgs): void;
     _basicDot(args: BasicFigureDrawArgs): void;
     _basicSquare(args: BasicFigureDrawArgs): void;
+    _basicHeart(args: BasicFigureDrawArgs): void;
+    _basicRounded(args: BasicFigureDrawArgs): void;
+    _basicClassy(args: BasicFigureDrawArgs): void;
+    _basicOutpoint(args: BasicFigureDrawArgs): void;
+    _basicInpoint(args: BasicFigureDrawArgs): void;
     _drawDot({ x, y, size, rotation }: DrawArgs): void;
     _drawSquare({ x, y, size, rotation }: DrawArgs): void;
+    _drawHeart({ x, y, size, rotation }: DrawArgs): void;
+    _drawRounded({ x, y, size, rotation }: DrawArgs): void;
+    _drawClassy({ x, y, size, rotation }: DrawArgs): void;
+    _drawInpoint({ x, y, size, rotation }: DrawArgs): void;
+    _drawOutpoint({ x, y, size, rotation }: DrawArgs): void;
 }

package/lib/figures/cornerSquare/QRCornerSquare.d.ts

@@ -14,7 +14,13 @@ export declare class QRCornerSquare {
     _basicDot(args: BasicFigureDrawArgs): void;
     _basicSquare(args: BasicFigureDrawArgs): void;
     _basicExtraRounded(args: BasicFigureDrawArgs): void;
+    _basicClassy(args: BasicFigureDrawArgs): void;
+    _basicOutpoint(args: BasicFigureDrawArgs): void;
+    _basicInpoint(args: BasicFigureDrawArgs): void;
     _drawDot({ x, y, size, rotation }: DrawArgs): void;
     _drawSquare({ x, y, size, rotation }: DrawArgs): void;
     _drawExtraRounded({ x, y, size, rotation }: DrawArgs): void;
+    _drawClassy({ x, y, size, rotation }: DrawArgs): void;
+    _drawOutpoint({ x, y, size, rotation }: DrawArgs): void;
+    _drawInpoint({ x, y, size, rotation }: DrawArgs): void;
 }

package/lib/figures/dot/QRDot.d.ts

@@ -18,8 +18,13 @@ export declare class QRDot {
     _basicCornerExtraRounded(args: BasicFigureDrawArgs): void;
     _basicCornersRounded(args: BasicFigureDrawArgs): void;
     _drawDot({ x, y, size }: DrawArgs): void;
+    _drawRandomDot({ x, y, size }: DrawArgs): void;
     _drawSquare({ x, y, size }: DrawArgs): void;
+    _drawSmallSquare({ x, y, size }: DrawArgs): void;
+    _drawDiamond({ x, y, size }: DrawArgs): void;
     _drawRounded({ x, y, size, getNeighbor }: DrawArgs): void;
+    _drawVerticalLines({ x, y, size, getNeighbor }: DrawArgs): void;
+    _drawHorizontalLines({ x, y, size, getNeighbor }: DrawArgs): void;
     _drawExtraRounded({ x, y, size, getNeighbor }: DrawArgs): void;
     _drawClassy({ x, y, size, getNeighbor }: DrawArgs): void;
     _drawClassyRounded({ x, y, size, getNeighbor }: DrawArgs): void;

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

@@ -6,22 +6,35 @@ 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) {
@@ -199,6 +212,21 @@ class QRCornerDot {
             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;
@@ -236,12 +264,237 @@ class QRCornerDot {
             }
         });
     }
+    _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({
+            ...args,
+            draw: () => {
+                this._element = 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));
+            }
+        });
+    }
+    _basicClassy(args) {
+        const { size, x, y } = args;
+        const dotSize = size / 7;
+        this._rotateFigure({
+            ...args,
+            draw: () => {
+                this._element = 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`);
+            }
+        });
+    }
+    _basicOutpoint(args) {
+        const { size, x, y } = args;
+        const dotSize = size;
+        this._rotateFigure({
+            ...args,
+            draw: () => {
+                this._element = 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 / 2}` +
+                    `a ${dotSize / 4}, ${dotSize / 4} 0 0 0 ${dotSize / 4}, ${-dotSize / 4}` +
+                    `v ${-dotSize / 2}` +
+                    `a ${dotSize / 4}, ${dotSize / 4} 0 0 0 ${-dotSize / 4}, ${-dotSize / 4}` +
+                    `h ${(-dotSize / 4) * 3}` +
+                    `z`);
+            }
+        });
+    }
+    _basicInpoint(args) {
+        const { size, x, y } = args;
+        const dotSize = size;
+        this._rotateFigure({
+            ...args,
+            draw: () => {
+                this._element = 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`);
+            }
+        });
+    }
     _drawDot({ x, y, size, rotation }) {
         this._basicDot({ 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),
+            rotation
+        });
+    }
+    _drawRounded({ x, y, size, rotation }) {
+        this._basicRounded({ 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 });
+    }
+    _drawOutpoint({ x, y, size, rotation }) {
+        this._basicOutpoint({ x, y, size, rotation });
+    }
 }
 
 class QRCornerSquare {
@@ -260,6 +513,15 @@ class QRCornerSquare {
             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;
@@ -340,6 +602,90 @@ class QRCornerSquare {
             }
         });
     }
+    _basicClassy(args) {
+        const { size, x, y } = args;
+        const dotSize = size / 7;
+        this._rotateFigure({
+            ...args,
+            draw: () => {
+                this._element = 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`);
+            }
+        });
+    }
+    _basicOutpoint(args) {
+        const { size, x, y } = args;
+        const dotSize = size / 7;
+        this._rotateFigure({
+            ...args,
+            draw: () => {
+                this._element = 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 ${dotSize} ${2.5 * dotSize}, 0, 0, 0, ${-dotSize * 2.5} ${dotSize * 2.5}` +
+                    `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}` +
+                    `l 0 ${-dotSize * 1.5}`);
+            }
+        });
+    }
+    _basicInpoint(args) {
+        const { size, x, y } = args;
+        const dotSize = size / 7;
+        this._rotateFigure({
+            ...args,
+            draw: () => {
+                this._element = 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}` +
+                    `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}`);
+            }
+        });
+    }
     _drawDot({ x, y, size, rotation }) {
         this._basicDot({ x, y, size, rotation });
     }
@@ -349,6 +695,15 @@ class QRCornerSquare {
     _drawExtraRounded({ x, y, size, rotation }) {
         this._basicExtraRounded({ x, y, size, rotation });
     }
+    _drawClassy({ x, y, size, rotation }) {
+        this._basicClassy({ x, y, size, rotation });
+    }
+    _drawOutpoint({ x, y, size, rotation }) {
+        this._basicOutpoint({ x, y, size, rotation });
+    }
+    _drawInpoint({ x, y, size, rotation }) {
+        this._basicInpoint({ x, y, size, rotation });
+    }
 }
 
 class QRDot {
@@ -364,6 +719,9 @@ class QRDot {
             case DotType.dots:
                 drawFunction = this._drawDot;
                 break;
+            case DotType.randomDots:
+                drawFunction = this._drawRandomDot;
+                break;
             case DotType.classy:
                 drawFunction = this._drawClassy;
                 break;
@@ -373,9 +731,21 @@ class QRDot {
             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;
@@ -479,9 +849,23 @@ class QRDot {
     _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;
@@ -525,6 +909,60 @@ class QRDot {
             return;
         }
     }
+    _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;
+        }
+    }
+    _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;
+        }
+    }
     _drawExtraRounded({ x, y, size, getNeighbor }) {
         const leftNeighbor = getNeighbor ? +getNeighbor(-1, 0) : 0;
         const rightNeighbor = getNeighbor ? +getNeighbor(1, 0) : 0;