diff --git a/README.md b/README.md index 04cedad6..66b24289 100644 --- a/README.md +++ b/README.md @@ -160,7 +160,7 @@ 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 @@ -168,7 +168,7 @@ 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 diff --git a/src/constants/cornerDotTypes.ts b/src/constants/cornerDotTypes.ts index 57b0e61e..cf6a4fb8 100644 --- a/src/constants/cornerDotTypes.ts +++ b/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; \ No newline at end of file diff --git a/src/constants/cornerSquareTypes.ts b/src/constants/cornerSquareTypes.ts index ac67ec28..192d1673 100644 --- a/src/constants/cornerSquareTypes.ts +++ b/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; diff --git a/src/figures/cornerDot/QRCornerDot.ts b/src/figures/cornerDot/QRCornerDot.ts index ce0511bd..803f13c3 100644 --- a/src/figures/cornerDot/QRCornerDot.ts +++ b/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,6 +74,32 @@ 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 }); } @@ -75,4 +107,12 @@ export default class QRCornerDot { _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 }); + } } diff --git a/src/figures/cornerSquare/QRCornerSquare.ts b/src/figures/cornerSquare/QRCornerSquare.ts index d755bb14..ef054e7d 100644 --- a/src/figures/cornerSquare/QRCornerSquare.ts +++ b/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 }); + } } diff --git a/src/types/index.ts b/src/types/index.ts index 9f9153d4..dd7a0af2 100644 --- a/src/types/index.ts +++ b/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";