Skip to content

Commit f16bd89

Browse files
phamfoophamfoo
committed
Use more descriptive param names
1 parent c8a94ca commit f16bd89

File tree

2 files changed

+39
-38
lines changed

2 files changed

+39
-38
lines changed

‎example/pages/index.tsx‎

Lines changed: 20 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -15,8 +15,8 @@ import GithubCorner from 'react-github-corner'
1515

1616
export default function Home() {
1717
const [size, setSize] = useState(300)
18-
const [radius, setRadius] = useState(48)
19-
const [smoothing, setSmoothing] = useState(0.8)
18+
const [cornerRadius, setCornerRadius] = useState(48)
19+
const [cornerSmoothing, setCornerSmoothing] = useState(0.8)
2020

2121
return (
2222
<div className="flex flex-col min-h-screen bg-gray-900 md:flex-row">
@@ -37,8 +37,8 @@ export default function Home() {
3737
clipPath: `path('${getSvgPath({
3838
width: size,
3939
height: size,
40-
smoothing,
41-
radius,
40+
cornerSmoothing,
41+
cornerRadius,
4242
})}')`,
4343
}}
4444
className="bg-indigo-600"
@@ -77,9 +77,9 @@ export default function Home() {
7777
<div className="pt-8 md:pt-12" />
7878

7979
<Slider
80-
label="Radius"
81-
value={radius}
82-
onChange={setRadius}
80+
label="Corner radius"
81+
value={cornerRadius}
82+
onChange={setCornerRadius}
8383
min={10}
8484
max={100}
8585
step={1}
@@ -88,9 +88,9 @@ export default function Home() {
8888
<div className="pt-8 md:pt-12" />
8989

9090
<Slider
91-
label="Smoothing"
92-
value={smoothing}
93-
onChange={setSmoothing}
91+
label="Corner smoothing"
92+
value={cornerSmoothing}
93+
onChange={setCornerSmoothing}
9494
min={0}
9595
max={1}
9696
step={0.01}
@@ -105,8 +105,8 @@ export default function Home() {
105105
const svg = createSVG({
106106
width: size,
107107
height: size,
108-
radius,
109-
smoothing,
108+
cornerRadius,
109+
cornerSmoothing,
110110
})
111111

112112
const blob = new Blob([svg], {
@@ -126,8 +126,8 @@ export default function Home() {
126126
const svg = createSVG({
127127
width: size,
128128
height: size,
129-
radius,
130-
smoothing,
129+
cornerRadius,
130+
cornerSmoothing,
131131
})
132132

133133
copy(svg)
@@ -168,8 +168,8 @@ const OutlineButton = forwardRef<
168168
? getSvgPath({
169169
width: rect.width,
170170
height: rect.height,
171-
radius: 0.25 * rect.height,
172-
smoothing: 1,
171+
cornerRadius: 0.25 * rect.height,
172+
cornerSmoothing: 1,
173173
})
174174
: null
175175

@@ -185,8 +185,8 @@ const OutlineButton = forwardRef<
185185
? getSvgPath({
186186
width: rect.width,
187187
height: rect.height,
188-
radius: 0.25 * rect.height,
189-
smoothing: 1,
188+
cornerRadius: 0.25 * rect.height,
189+
cornerSmoothing: 1,
190190
})
191191
: null
192192

@@ -219,8 +219,8 @@ const SolidButton = forwardRef<HTMLButtonElement, HTMLProps<HTMLButtonElement>>(
219219
? getSvgPath({
220220
width: rect.width,
221221
height: rect.height,
222-
radius: 0.25 * rect.height,
223-
smoothing: 1,
222+
cornerRadius: 0.25 * rect.height,
223+
cornerSmoothing: 1,
224224
})
225225
: null
226226

‎src/index.ts‎

Lines changed: 19 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,40 +1,41 @@
11
export interface FigmaSquircleParams {
2-
radius: number
3-
smoothing: number
2+
cornerRadius: number
3+
cornerSmoothing: number
44
width: number
55
height: number
66
}
77

88
export function getSvgPath({
9-
radius,
10-
smoothing,
9+
cornerRadius,
10+
cornerSmoothing,
1111
width,
1212
height,
1313
}: FigmaSquircleParams) {
14-
radius = Math.min(radius, width / 2, height / 2)
14+
cornerRadius = Math.min(cornerRadius, width / 2, height / 2)
1515

1616
// Keeping these variable names the same as the original code for now
1717
// https://github.com/MartinRGB/Figma_Squircles_Approximation/blob/bf29714aab58c54329f3ca130ffa16d39a2ff08c/js/rounded-corners.js#L64
1818
const shortest_l = Math.min(width, height)
1919

20-
const p = Math.min(shortest_l / 2, (1 + smoothing) * radius)
20+
const p = Math.min(shortest_l / 2, (1 + cornerSmoothing) * cornerRadius)
2121

2222
let angle_alpha: number, angle_beta: number
23-
if (radius > shortest_l / 4) {
24-
const change_percentage = (radius - shortest_l / 4) / (shortest_l / 4)
25-
angle_beta = 90 * (1 - smoothing * (1 - change_percentage))
26-
angle_alpha = 45 * smoothing * (1 - change_percentage)
23+
if (cornerRadius > shortest_l / 4) {
24+
const change_percentage = (cornerRadius - shortest_l / 4) / (shortest_l / 4)
25+
angle_beta = 90 * (1 - cornerSmoothing * (1 - change_percentage))
26+
angle_alpha = 45 * cornerSmoothing * (1 - change_percentage)
2727
} else {
28-
angle_beta = 90 * (1 - smoothing)
29-
angle_alpha = 45 * smoothing
28+
angle_beta = 90 * (1 - cornerSmoothing)
29+
angle_alpha = 45 * cornerSmoothing
3030
}
3131

3232
const angle_theta = (90 - angle_beta) / 2
3333

3434
const d_div_c = Math.tan(toRadians(angle_alpha))
35-
const h_longest = radius * Math.tan(toRadians(angle_theta / 2))
35+
const h_longest = cornerRadius * Math.tan(toRadians(angle_theta / 2))
3636

37-
const l = Math.sin(toRadians(angle_beta / 2)) * radius * Math.pow(2, 1 / 2)
37+
const l =
38+
Math.sin(toRadians(angle_beta / 2)) * cornerRadius * Math.pow(2, 1 / 2)
3839
const c = h_longest * Math.cos(toRadians(angle_alpha))
3940
const d = c * d_div_c
4041
const b = (p - l - (1 + d_div_c) * c) / 3
@@ -45,31 +46,31 @@ export function getSvgPath({
4546
L ${Math.max(width / 2, width - p)} 0
4647
C ${width - (p - a)} 0 ${width - (p - a - b)} 0 ${width -
4748
(p - a - b - c)} ${d}
48-
a ${radius} ${radius} 0 0 1 ${l} ${l}
49+
a ${cornerRadius} ${cornerRadius} 0 0 1 ${l} ${l}
4950
C ${width} ${p - a - b}
5051
${width} ${p - a}
5152
${width} ${Math.min(height / 2, p)}
5253
L ${width} ${Math.max(height / 2, height - p)}
5354
C ${width} ${height - (p - a)}
5455
${width} ${height - (p - a - b)}
5556
${width - d} ${height - (p - a - b - c)}
56-
a ${radius} ${radius} 0 0 1 -${l} ${l}
57+
a ${cornerRadius} ${cornerRadius} 0 0 1 -${l} ${l}
5758
C ${width - (p - a - b)} ${height}
5859
${width - (p - a)} ${height}
5960
${Math.max(width / 2, width - p)} ${height}
6061
L ${Math.min(width / 2, p)} ${height}
6162
C ${p - a} ${height}
6263
${p - a - b} ${height}
6364
${p - a - b - c} ${height - d}
64-
a ${radius} ${radius} 0 0 1 -${l} -${l}
65+
a ${cornerRadius} ${cornerRadius} 0 0 1 -${l} -${l}
6566
C 0 ${height - (p - a - b)}
6667
0 ${height - (p - a)}
6768
0 ${Math.max(height / 2, height - p)}
6869
L 0 ${Math.min(height / 2, p)}
6970
C 0 ${p - a}
7071
0 ${p - a - b}
7172
${d} ${p - a - b - c}
72-
a ${radius} ${radius} 0 0 1 ${l} -${l}
73+
a ${cornerRadius} ${cornerRadius} 0 0 1 ${l} -${l}
7374
C ${p - a - b} 0
7475
${p - a} 0
7576
${+Math.min(width / 2, p)} 0

0 commit comments

Comments
 (0)