From 591cc093062df888f3803211be058289a050689b Mon Sep 17 00:00:00 2001 From: segemun Date: Fri, 7 Feb 2025 19:01:35 +0100 Subject: [PATCH 1/4] feat: add partially-rounded type for the corner square --- README.md | 2 +- src/constants/cornerSquareTypes.ts | 3 +- src/figures/cornerSquare/QRCornerSquare.ts | 44 ++++++++++++++++++++++ src/types/index.ts | 2 +- 4 files changed, 48 insertions(+), 3 deletions(-) diff --git a/README.md b/README.md index 04cedad6..92efc9fe 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' 'partially-rounded' 'rounded' 'dots' 'classy' 'classy-rounded'`) | |Style of Corners Square `options.cornersDotOptions` structure diff --git a/src/constants/cornerSquareTypes.ts b/src/constants/cornerSquareTypes.ts index ac67ec28..fa397e90 100644 --- a/src/constants/cornerSquareTypes.ts +++ b/src/constants/cornerSquareTypes.ts @@ -3,5 +3,6 @@ import { CornerSquareTypes } from "../types"; export default { dot: "dot", square: "square", - extraRounded: "extra-rounded" + extraRounded: "extra-rounded", + partiallyRounded: "partially-rounded" } as CornerSquareTypes; diff --git a/src/figures/cornerSquare/QRCornerSquare.ts b/src/figures/cornerSquare/QRCornerSquare.ts index d755bb14..e8042ec7 100644 --- a/src/figures/cornerSquare/QRCornerSquare.ts +++ b/src/figures/cornerSquare/QRCornerSquare.ts @@ -26,6 +26,9 @@ export default class QRCornerSquare { case cornerSquareTypes.extraRounded: drawFunction = this._drawExtraRounded; break; + case cornerSquareTypes.partiallyRounded: + drawFunction = this._drawPartiallyRounded; + break; case cornerSquareTypes.dot: default: drawFunction = this._drawDot; @@ -124,6 +127,43 @@ export default class QRCornerSquare { }); } + _basicPartiallyRounded(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 +175,8 @@ export default class QRCornerSquare { _drawExtraRounded({ x, y, size, rotation }: DrawArgs): void { this._basicExtraRounded({ x, y, size, rotation }); } + + _drawPartiallyRounded({ x, y, size, rotation }: DrawArgs): void { + this._basicPartiallyRounded({ x, y, size, rotation }); + } } diff --git a/src/types/index.ts b/src/types/index.ts index 9f9153d4..2f527396 100644 --- a/src/types/index.ts +++ b/src/types/index.ts @@ -8,7 +8,7 @@ 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 CornerSquareType = "dot" | "square" | "extra-rounded" | "partially-rounded" | DotType; export type FileExtension = "svg" | "png" | "jpeg" | "webp"; export type GradientType = "radial" | "linear"; export type DrawType = "canvas" | "svg"; From 2f7db605e6dc130a7134f7b0c56dfc44f0461944 Mon Sep 17 00:00:00 2001 From: segemun Date: Fri, 7 Feb 2025 19:38:27 +0100 Subject: [PATCH 2/4] feat: add partially-rounded type for the corner dot --- README.md | 2 +- src/constants/cornerDotTypes.ts | 3 ++- src/figures/cornerDot/QRCornerDot.ts | 33 ++++++++++++++++++++++++++++ src/types/index.ts | 2 +- 4 files changed, 37 insertions(+), 3 deletions(-) diff --git a/README.md b/README.md index 92efc9fe..89073923 100644 --- a/README.md +++ b/README.md @@ -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' 'partially-rounded' '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..2a63dc1e 100644 --- a/src/constants/cornerDotTypes.ts +++ b/src/constants/cornerDotTypes.ts @@ -2,5 +2,6 @@ import { CornerDotTypes } from "../types"; export default { dot: "dot", - square: "square" + square: "square", + partiallyRounded: "partially-rounded", } as CornerDotTypes; \ No newline at end of file diff --git a/src/figures/cornerDot/QRCornerDot.ts b/src/figures/cornerDot/QRCornerDot.ts index ce0511bd..4d81915b 100644 --- a/src/figures/cornerDot/QRCornerDot.ts +++ b/src/figures/cornerDot/QRCornerDot.ts @@ -23,6 +23,9 @@ export default class QRCornerDot { case cornerDotTypes.square: drawFunction = this._drawSquare; break; + case cornerDotTypes.partiallyRounded: + drawFunction = this._drawPartiallyRounded; + break; case cornerDotTypes.dot: default: drawFunction = this._drawDot; @@ -68,6 +71,32 @@ export default class QRCornerDot { }); } + _basicPartiallyRounded(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 +104,8 @@ export default class QRCornerDot { _drawSquare({ x, y, size, rotation }: DrawArgs): void { this._basicSquare({ x, y, size, rotation }); } + + _drawPartiallyRounded({ x, y, size, rotation }: DrawArgs): void { + this._basicPartiallyRounded({ x, y, size, rotation }); + } } diff --git a/src/types/index.ts b/src/types/index.ts index 2f527396..109f3e98 100644 --- a/src/types/index.ts +++ b/src/types/index.ts @@ -7,7 +7,7 @@ export interface UnknownObject { } export type DotType = "dots" | "rounded" | "classy" | "classy-rounded" | "square" | "extra-rounded"; -export type CornerDotType = "dot" | "square" | DotType; +export type CornerDotType = "dot" | "square" | "partially-rounded" | DotType; export type CornerSquareType = "dot" | "square" | "extra-rounded" | "partially-rounded" | DotType; export type FileExtension = "svg" | "png" | "jpeg" | "webp"; export type GradientType = "radial" | "linear"; From 7d93ca0ca37dad0001211dacc6d3022fb64e510f Mon Sep 17 00:00:00 2001 From: segemun Date: Tue, 11 Feb 2025 09:43:44 +0100 Subject: [PATCH 3/4] feat: rename partially-rounded to inpoint --- README.md | 4 ++-- src/constants/cornerDotTypes.ts | 2 +- src/constants/cornerSquareTypes.ts | 2 +- src/figures/cornerDot/QRCornerDot.ts | 10 +++++----- src/figures/cornerSquare/QRCornerSquare.ts | 10 +++++----- src/types/index.ts | 4 ++-- 6 files changed, 16 insertions(+), 16 deletions(-) diff --git a/README.md b/README.md index 89073923..83596daa 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' 'partially-rounded' 'rounded' 'dots' 'classy' 'classy-rounded'`) | |Style of Corners Square +type | string (`'dot' 'square' 'extra-rounded' 'inpoint' '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' 'partially-rounded' 'rounded' 'dots' 'classy' 'classy-rounded' 'extra-rounded'`) | |Style of Corners Dot +type | string (`'dot' 'square' 'inpoint' '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 2a63dc1e..e03d247d 100644 --- a/src/constants/cornerDotTypes.ts +++ b/src/constants/cornerDotTypes.ts @@ -3,5 +3,5 @@ import { CornerDotTypes } from "../types"; export default { dot: "dot", square: "square", - partiallyRounded: "partially-rounded", + inpoint: "inpoint", } as CornerDotTypes; \ No newline at end of file diff --git a/src/constants/cornerSquareTypes.ts b/src/constants/cornerSquareTypes.ts index fa397e90..66476fb5 100644 --- a/src/constants/cornerSquareTypes.ts +++ b/src/constants/cornerSquareTypes.ts @@ -4,5 +4,5 @@ export default { dot: "dot", square: "square", extraRounded: "extra-rounded", - partiallyRounded: "partially-rounded" + inpoint: "inpoint" } as CornerSquareTypes; diff --git a/src/figures/cornerDot/QRCornerDot.ts b/src/figures/cornerDot/QRCornerDot.ts index 4d81915b..833aeca6 100644 --- a/src/figures/cornerDot/QRCornerDot.ts +++ b/src/figures/cornerDot/QRCornerDot.ts @@ -23,8 +23,8 @@ export default class QRCornerDot { case cornerDotTypes.square: drawFunction = this._drawSquare; break; - case cornerDotTypes.partiallyRounded: - drawFunction = this._drawPartiallyRounded; + case cornerDotTypes.inpoint: + drawFunction = this._drawInpoint; break; case cornerDotTypes.dot: default: @@ -71,7 +71,7 @@ export default class QRCornerDot { }); } - _basicPartiallyRounded(args: BasicFigureDrawArgs): void { + _basicInpoint(args: BasicFigureDrawArgs): void { const { size, x, y } = args; const dotSize = size / 7; @@ -105,7 +105,7 @@ export default class QRCornerDot { this._basicSquare({ x, y, size, rotation }); } - _drawPartiallyRounded({ x, y, size, rotation }: DrawArgs): void { - this._basicPartiallyRounded({ x, y, size, rotation }); + _drawInpoint({ x, y, size, rotation }: DrawArgs): void { + this._basicInpoint({ x, y, size, rotation }); } } diff --git a/src/figures/cornerSquare/QRCornerSquare.ts b/src/figures/cornerSquare/QRCornerSquare.ts index e8042ec7..f767d506 100644 --- a/src/figures/cornerSquare/QRCornerSquare.ts +++ b/src/figures/cornerSquare/QRCornerSquare.ts @@ -26,8 +26,8 @@ export default class QRCornerSquare { case cornerSquareTypes.extraRounded: drawFunction = this._drawExtraRounded; break; - case cornerSquareTypes.partiallyRounded: - drawFunction = this._drawPartiallyRounded; + case cornerSquareTypes.inpoint: + drawFunction = this._drawInpoint; break; case cornerSquareTypes.dot: default: @@ -127,7 +127,7 @@ export default class QRCornerSquare { }); } - _basicPartiallyRounded(args: BasicFigureDrawArgs): void { + _basicInpoint(args: BasicFigureDrawArgs): void { const { size, x, y } = args; const dotSize = size / 7; @@ -176,7 +176,7 @@ export default class QRCornerSquare { this._basicExtraRounded({ x, y, size, rotation }); } - _drawPartiallyRounded({ x, y, size, rotation }: DrawArgs): void { - this._basicPartiallyRounded({ x, y, size, rotation }); + _drawInpoint({ x, y, size, rotation }: DrawArgs): void { + this._basicInpoint({ x, y, size, rotation }); } } diff --git a/src/types/index.ts b/src/types/index.ts index 109f3e98..221fcb37 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" | "partially-rounded" | DotType; -export type CornerSquareType = "dot" | "square" | "extra-rounded" | "partially-rounded" | DotType; +export type CornerDotType = "dot" | "square" | "inpoint" | DotType; +export type CornerSquareType = "dot" | "square" | "extra-rounded" | "inpoint" | DotType; export type FileExtension = "svg" | "png" | "jpeg" | "webp"; export type GradientType = "radial" | "linear"; export type DrawType = "canvas" | "svg"; From 022b5d9bca8f04b5c9cd417bd060876119b3e0e0 Mon Sep 17 00:00:00 2001 From: segemun Date: Wed, 12 Feb 2025 09:19:30 +0100 Subject: [PATCH 4/4] feat: add outpoint type for the corner square and dot --- README.md | 4 ++-- src/constants/cornerDotTypes.ts | 1 + src/constants/cornerSquareTypes.ts | 3 ++- src/figures/cornerDot/QRCornerDot.ts | 7 +++++++ src/figures/cornerSquare/QRCornerSquare.ts | 7 +++++++ src/types/index.ts | 4 ++-- 6 files changed, 21 insertions(+), 5 deletions(-) diff --git a/README.md b/README.md index 83596daa..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' 'inpoint' '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' 'inpoint' '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 e03d247d..cf6a4fb8 100644 --- a/src/constants/cornerDotTypes.ts +++ b/src/constants/cornerDotTypes.ts @@ -4,4 +4,5 @@ export default { dot: "dot", 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 66476fb5..192d1673 100644 --- a/src/constants/cornerSquareTypes.ts +++ b/src/constants/cornerSquareTypes.ts @@ -4,5 +4,6 @@ export default { dot: "dot", square: "square", extraRounded: "extra-rounded", - inpoint: "inpoint" + inpoint: "inpoint", + outpoint: "outpoint", } as CornerSquareTypes; diff --git a/src/figures/cornerDot/QRCornerDot.ts b/src/figures/cornerDot/QRCornerDot.ts index 833aeca6..803f13c3 100644 --- a/src/figures/cornerDot/QRCornerDot.ts +++ b/src/figures/cornerDot/QRCornerDot.ts @@ -26,6 +26,9 @@ export default class QRCornerDot { case cornerDotTypes.inpoint: drawFunction = this._drawInpoint; break; + case cornerDotTypes.outpoint: + drawFunction = this._drawOutpoint; + break; case cornerDotTypes.dot: default: drawFunction = this._drawDot; @@ -108,4 +111,8 @@ export default class QRCornerDot { _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 f767d506..ef054e7d 100644 --- a/src/figures/cornerSquare/QRCornerSquare.ts +++ b/src/figures/cornerSquare/QRCornerSquare.ts @@ -29,6 +29,9 @@ export default class QRCornerSquare { case cornerSquareTypes.inpoint: drawFunction = this._drawInpoint; break; + case cornerSquareTypes.outpoint: + drawFunction = this._drawOutpoint; + break; case cornerSquareTypes.dot: default: drawFunction = this._drawDot; @@ -179,4 +182,8 @@ export default class QRCornerSquare { _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 221fcb37..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" | "inpoint" | DotType; -export type CornerSquareType = "dot" | "square" | "extra-rounded" | "inpoint" | 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";