Add Inpoint type for corner square and dot

README.md

@@ -160,15 +160,15 @@ Property| Type                                       |Default Value|Description
 --------|--------------------------------------------|-------------|-----------------
 color   | string                                     |             |Color of Corners Square
 gradient| object                                     |             |Gradient of Corners Square
-type    | string (`'dot' 'square' 'extra-rounded' 'rounded' 'dots' 'classy' 'classy-rounded'`) |             |Style of Corners Square
+type    | string (`'dot' 'square' 'extra-rounded' 'inpoint' 'outpoint' 'rounded' 'dots' 'classy' 'classy-rounded'`) |             |Style of Corners Square
 
 `options.cornersDotOptions` structure
 
 Property| Type                       |Default Value|Description
 --------|----------------------------|-------------|-----------------
 color   | string                     |             |Color of Corners Dot
 gradient| object                     |             |Gradient of Corners Dot
-type    | string (`'dot' 'square' 'rounded' 'dots' 'classy' 'classy-rounded' 'extra-rounded'`) |             |Style of Corners Dot
+type    | string (`'dot' 'square' 'inpoint' 'outpoint' 'rounded' 'dots' 'classy' 'classy-rounded' 'extra-rounded'`) |             |Style of Corners Dot
 
 Gradient structure
 

src/constants/cornerDotTypes.ts

@@ -2,5 +2,7 @@ import { CornerDotTypes } from "../types";
 
 export default {
   dot: "dot",
-  square: "square"
+  square: "square",
+  inpoint: "inpoint",
+  outpoint: "outpoint",
 } as CornerDotTypes;

src/constants/cornerSquareTypes.ts

@@ -3,5 +3,7 @@ import { CornerSquareTypes } from "../types";
 export default {
   dot: "dot",
   square: "square",
-  extraRounded: "extra-rounded"
+  extraRounded: "extra-rounded",
+  inpoint: "inpoint",
+  outpoint: "outpoint",
 } as CornerSquareTypes;

src/figures/cornerDot/QRCornerDot.ts

@@ -23,6 +23,12 @@ export default class QRCornerDot {
       case cornerDotTypes.square:
         drawFunction = this._drawSquare;
         break;
+      case cornerDotTypes.inpoint:
+        drawFunction = this._drawInpoint;
+        break;
+      case cornerDotTypes.outpoint:
+        drawFunction = this._drawOutpoint;
+        break;
       case cornerDotTypes.dot:
       default:
         drawFunction = this._drawDot;
@@ -68,11 +74,45 @@ export default class QRCornerDot {
     });
   }
 
+  _basicInpoint(args: BasicFigureDrawArgs): void {
+    const { size, x, y } = args;
+    const dotSize = size / 7;
+
+    this._rotateFigure({
+      ...args,
+      draw: () => {
+        this._element = this._window.document.createElementNS("http://www.w3.org/2000/svg", "path");
+        this._element.setAttribute("clip-rule", "evenodd");
+
+        const outerPath = `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}` +
+          `v 0` +
+          `h ${dotSize * 2.5}` +
+          `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}`;
+
+        this._element.setAttribute("d", `${outerPath}`);
+      }
+    });
+  }
+
   _drawDot({ x, y, size, rotation }: DrawArgs): void {
     this._basicDot({ x, y, size, rotation });
   }
 
   _drawSquare({ x, y, size, rotation }: DrawArgs): void {
     this._basicSquare({ x, y, size, rotation });
   }
+
+  _drawInpoint({ x, y, size, rotation }: DrawArgs): void {
+    this._basicInpoint({ x, y, size, rotation });
+  }
+
+  _drawOutpoint({ x, y, size, rotation }: DrawArgs): void {
+    this._basicInpoint({ x, y, size, rotation: (rotation || 0) + Math.PI });
+  }
 }

src/figures/cornerSquare/QRCornerSquare.ts

@@ -26,6 +26,12 @@ export default class QRCornerSquare {
       case cornerSquareTypes.extraRounded:
         drawFunction = this._drawExtraRounded;
         break;
+      case cornerSquareTypes.inpoint:
+        drawFunction = this._drawInpoint;
+        break;
+      case cornerSquareTypes.outpoint:
+        drawFunction = this._drawOutpoint;
+        break;
       case cornerSquareTypes.dot:
       default:
         drawFunction = this._drawDot;
@@ -124,6 +130,43 @@ export default class QRCornerSquare {
     });
   }
 
+  _basicInpoint(args: BasicFigureDrawArgs): void {
+    const { size, x, y } = args;
+    const dotSize = size / 7;
+
+    this._rotateFigure({
+      ...args,
+      draw: () => {
+        this._element = this._window.document.createElementNS("http://www.w3.org/2000/svg", "path");
+        this._element.setAttribute("clip-rule", "evenodd");
+
+        const outerPath = `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}` +
+          `v 0` +
+          `h ${dotSize * 2.5}` +
+          `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}`;
+
+        const innerPath = `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 ${-dotSize * 1.5}` +
+          `v 0` +
+          `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}`;
+
+        this._element.setAttribute("d", `${outerPath} ${innerPath}`);
+      }
+    });
+  }
+
   _drawDot({ x, y, size, rotation }: DrawArgs): void {
     this._basicDot({ x, y, size, rotation });
   }
@@ -135,4 +178,12 @@ export default class QRCornerSquare {
   _drawExtraRounded({ x, y, size, rotation }: DrawArgs): void {
     this._basicExtraRounded({ x, y, size, rotation });
   }
+
+  _drawInpoint({ x, y, size, rotation }: DrawArgs): void {
+    this._basicInpoint({ x, y, size, rotation });
+  }
+
+  _drawOutpoint({ x, y, size, rotation }: DrawArgs): void {
+    this._basicInpoint({ x, y, size, rotation: (rotation || 0) + Math.PI });
+  }
 }

src/types/index.ts

@@ -7,8 +7,8 @@ export interface UnknownObject {
 }
 
 export type DotType = "dots" | "rounded" | "classy" | "classy-rounded" | "square" | "extra-rounded";
-export type CornerDotType = "dot" | "square" | DotType;
-export type CornerSquareType = "dot" | "square" | "extra-rounded" | DotType;
+export type CornerDotType = "dot" | "square" | "inpoint" | "outpoint" | DotType;
+export type CornerSquareType = "dot" | "square" | "extra-rounded" | "inpoint" | "outpoint" | DotType;
 export type FileExtension = "svg" | "png" | "jpeg" | "webp";
 export type GradientType = "radial" | "linear";
 export type DrawType = "canvas" | "svg";