feat: add diamond dot type

src/constants/dotTypes.ts

@@ -6,5 +6,6 @@ export default {
   classy: "classy",
   classyRounded: "classy-rounded",
   square: "square",
-  extraRounded: "extra-rounded"
+  extraRounded: "extra-rounded",
+  diamond: "diamond"
 } as DotTypes;

src/core/QRSVG.ts

@@ -318,7 +318,9 @@ export default class QRSVG {
           cornersDotClipPath.appendChild(cornersDot._element);
         }
       } else {
-        const dot = new QRDot({ svg: this._element, type: options.dotsOptions.type });
+        // const dot = new QRDot({ svg: this._element, type: options.dotsOptions.type });
+        const dotType = options.dotsOptions.type === "diamond" ? "square" : options.dotsOptions.type;
+        const dot = new QRDot({ svg: this._element, type: dotType });
 
         for (let i = 0; i < dotMask.length; i++) {
           for (let j = 0; j < dotMask[i].length; j++) {

src/figures/dot/svg/QRDot.ts

@@ -31,6 +31,9 @@ export default class QRDot {
       case dotTypes.extraRounded:
         drawFunction = this._drawExtraRounded;
         break;
+      case dotTypes.diamond:
+        drawFunction = this._drawDiamond;
+        break;
       case dotTypes.square:
       default:
         drawFunction = this._drawSquare;
@@ -44,7 +47,14 @@ export default class QRDot {
     const cy = y + size / 2;
 
     draw();
-    this._element?.setAttribute("transform", `rotate(${(180 * rotation) / Math.PI},${cx},${cy})`);
+
+    let rotationAttr = `rotate(${(180 * rotation) / Math.PI},${cx},${cy})`;
+
+    if (this._type === "diamond") {
+      rotationAttr = `rotate(${rotation},${cx},${cy})`;
+    }
+
+    this._element?.setAttribute("transform", rotationAttr);
   }
 
   _basicDot(args: BasicFigureDrawArgs): void {
@@ -160,9 +170,18 @@ export default class QRDot {
   }
 
   _drawSquare({ x, y, size }: DrawArgs): void {
+    // console.log('draw sq')
     this._basicSquare({ x, y, size, rotation: 0 });
   }
 
+  _drawDiamond({ x, y, size }: DrawArgs): void {
+    x = x + 4;
+    y = y + 4;
+    size = size - 8;
+
+    this._basicSquare({ x, y, size, rotation: 45 });
+  }
+
   _drawRounded({ x, y, size, getNeighbor }: DrawArgs): void {
     const leftNeighbor = getNeighbor ? +getNeighbor(-1, 0) : 0;
     const rightNeighbor = getNeighbor ? +getNeighbor(1, 0) : 0;

src/index.html

@@ -14,7 +14,7 @@
               data: "h",
               image: "https://upload.wikimedia.org/wikipedia/commons/5/51/Facebook_f_logo_%282019%29.svg",
               dotsOptions: {
-                type: "extra-rounded",
+                type: "diamond",
                 gradient: {
                   type: "linear", //radial,
                   rotation: Math.PI/2,
@@ -46,7 +46,7 @@
             type: 'svg',
           });
 
-            qrCode.append(document.getElementById("canvas"));
+            // qrCode.append(document.getElementById("canvas"));
             qrCode2.append(document.getElementById("canvas2"));
 
             // qrCode2.download()

src/types/index.ts

@@ -3,7 +3,7 @@ export interface UnknownObject {
   [key: string]: any;
 }
 
-export type DotType = "dots" | "rounded" | "classy" | "classy-rounded" | "square" | "extra-rounded";
+export type DotType = "dots" | "rounded" | "classy" | "classy-rounded" | "square" | "extra-rounded" | "diamond";
 export type CornerDotType = "dot" | "square";
 export type CornerSquareType = "dot" | "square" | "extra-rounded";
 export type Extension = "svg" | "png" | "jpeg" | "webp";