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

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,253 @@ 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.3569803,
+            "c",
+            0,
+            0.0339813,
+            -0.0085083,
+            0.0595062,
+            -0.0170166,
+            0.0934875,
+            "C",
+            0.8994751,
+            0.484501,
+            0.8740021,
+            0.5184824,
+            0.8484772,
+            0.5524637,
+            "C",
+            0.8230041,
+            0.5950052,
+            0.7890228,
+            0.6374948,
+            0.7380249,
+            0.6799845,
+            "C",
+            0.6954834,
+            0.7309824,
+            0.6359771,
+            0.7819803,
+            0.5595062,
+            0.8499948,
+            "L",
+            0.5,
+            0.9009928,
+            "L",
+            0.4404938,
+            0.8499948,
+            "C",
+            0.3640228,
+            0.7819803,
+            0.3045166,
+            0.7309824,
+            0.2619751,
+            0.6799845,
+            "C",
+            0.2109772,
+            0.6374948,
+            0.1769958,
+            0.5950052,
+            0.1515228,
+            0.5524637,
+            "C",
+            0.1174896,
+            0.5184824,
+            0.1005249,
+            0.484501,
+            0.0920166,
+            0.4504678,
+            "C",
+            0.0835083,
+            0.4164865,
+            0.075,
+            0.3909616,
+            0.075,
+            0.3569803,
+            "c",
+            0,
+            -0.0680145,
+            0.0255249,
+            -0.1190125,
+            0.0680145,
+            -0.1700104,
+            "c",
+            0.0424896,
+            -0.0424896,
+            0.1019959,
+            -0.0679626,
+            0.1700104,
+            -0.0679626,
+            "c",
+            0.0339813,
+            0,
+            0.0679626,
+            0.0084564,
+            0.1019959,
+            0.025473,
+            "C",
+            0.4490021,
+            0.1614969,
+            0.4744751,
+            0.1869699,
+            0.5,
+            0.2124948,
+            "c",
+            0.0255249,
+            -0.0255249,
+            0.0509979,
+            -0.0509979,
+            0.0849792,
+            -0.0680145,
+            "c",
+            0.0340332,
+            -0.0170166,
+            0.0680146,
+            -0.025473,
+            0.1105042,
+            -0.025473,
+            "c",
+            0.0595062,
+            0,
+            0.1190125,
+            0.025473,
+            0.1615021,
+            0.0679626,
+            "C",
+            0.8994751,
+            0.2379678,
+            0.925,
+            0.2889658,
+            0.925,
+            0.3569803,
+            "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 +529,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 +618,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 +711,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 +735,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 +747,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 +865,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 +925,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;