Skip to content

Commit 106c525

Browse files
drinking-codedrinking-code
committed
fix bugs with repainting
1 parent 03882bf commit 106c525

File tree

4 files changed

+81
-32
lines changed

4 files changed

+81
-32
lines changed

‎README.md‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,13 @@ Here is a very clear demonstration of these smooth corners:
99

1010
![Figure showing that these corners are very much hunky-dory](img/compare.svg)
1111

12+
- [Installation](#installation)
13+
- [Usage](#usage)
14+
- [Options](#options)
15+
- [`dontConvertShadow`](#dontconvertshadow)
16+
- [Things to note & caveats](#things-to-note--caveats)
17+
- [webpack](#webpack)
18+
1219
## Installation
1320

1421
```shell
@@ -34,6 +41,8 @@ const App = () => {
3441
export default App;
3542
```
3643

44+
Also, [turn off or polyfill `url`, `path`, and `fs`](#webpack)
45+
3746
### Options
3847

3948
#### `dontConvertShadow`
@@ -64,3 +73,24 @@ There are a couple of css properties, that you can't reliably set with `RoundDiv
6473
You shouldn't set these properties inline. Instead, set them in a stylesheet. This may change in future versions.
6574
The `filter` property in particular will not work at all, if you have set a `box-shadow` AND have not
6675
set [`dontConvertShadow`](#dontconvertshadow). This may also change in future versions.
76+
77+
### webpack
78+
79+
If you use a preprocessor like webpack (which you most likely are), you need to turn off or polyfill the node
80+
modules `url` and `path`, and turn off `fs`. This is due to the module [`css`](https://www.npmjs.com/package/css), which
81+
uses them. In webpack, you can do this with
82+
the [`resolve.fallback.<module_name>`](https://webpack.js.org/configuration/resolve/#resolvefallback) option:
83+
84+
```javascript
85+
module.exports = {
86+
resolve: {
87+
fallback: {
88+
path: false,
89+
url: false,
90+
fs: false,
91+
}
92+
}
93+
}
94+
```
95+
96+
If you use `create-react-app`, take a look at [`react-app-rewired`](https://www.npmjs.com/package/react-app-rewired).

‎src/generator.js‎

Lines changed: 17 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@
88
export default function generateSvgSquircle(height, width, radius) {
99
/* from right to left top left corner upper (right half) */
1010
const ratios = [1.528665037, 1.0884928889, 0.8684068148, 0.07491140741, 0.6314939259, 0.1690595556, 0.3728238519];
11-
const roundToNthPlace = 1;
11+
// const roundToNthPlace = 1;
1212

1313
if (typeof radius === 'number')
1414
radius = Array(4).fill(radius)
@@ -79,44 +79,44 @@ export default function generateSvgSquircle(height, width, radius) {
7979
const startPoint = `${a0xw},${topYOffset}`
8080

8181
const path = `M${startPoint}
82-
${width / 2 < a0x[2]
82+
${width / 2 < a0x[1]
8383
? ''
8484
: `L${width - a0xw},0`
8585
}
8686
87-
C${width - a1x[2]},0,${width - a2x[2]},0,${width - a3x[2]},${a3y[2]}
88-
C${width - b1x[2]},${b1y[2]},${width - b1y[2]},${b1x[2]},${width - b0y[2]},${b0x[2]}
89-
C${width},${a2x[2]},${width},${a1x[2]},
87+
C${width - a1x[1]},0,${width - a2x[1]},0,${width - a3x[1]},${a3y[1]}
88+
C${width - b1x[1]},${b1y[1]},${width - b1y[1]},${b1x[1]},${width - b0y[1]},${b0x[1]}
89+
C${width},${a2x[1]},${width},${a1x[1]},
9090
9191
${width - rightYOffset},${a0xh}
92-
${height / 2 < a0x[3]
92+
${height / 2 < a0x[2]
9393
? ''
9494
: `L${width},${height - a0xh}`
9595
}
9696
97-
C${width},${height - a1x[3]},${width},${height - a2x[3]},${width - a3y[3]},${height - a3x[3]}
98-
C${width - b1y[3]},${height - b1x[3]},${width - b1x[3]},${height - b1y[3]},${width - b0x[3]},${height - b0y[3]}
99-
C${width - a2x[3]},${height},${width - a1x[3]},${height},
97+
C${width},${height - a1x[2]},${width},${height - a2x[2]},${width - a3y[2]},${height - a3x[2]}
98+
C${width - b1y[2]},${height - b1x[2]},${width - b1x[2]},${height - b1y[2]},${width - b0x[2]},${height - b0y[2]}
99+
C${width - a2x[2]},${height},${width - a1x[2]},${height},
100100
101101
${width - a0xw},${height - bottomYOffset}
102-
${width / 2 < a0x[0]
102+
${width / 2 < a0x[3]
103103
? ''
104104
: `L${a0xw},${height}`
105105
}
106106
107-
C${a1x[0]},${height},${a2x[0]},${height},${a3x[0]},${height - a3y[0]}
108-
C${b1x[0]},${height - b1y[0]},${b1y[0]},${height - b1x[0]},${b0y[0]},${height - b0x[0]}
109-
C0,${height - a2x[0]},0,${height - a1x[0]},
107+
C${a1x[3]},${height},${a2x[3]},${height},${a3x[3]},${height - a3y[3]}
108+
C${b1x[3]},${height - b1y[3]},${b1y[3]},${height - b1x[3]},${b0y[3]},${height - b0x[3]}
109+
C0,${height - a2x[3]},0,${height - a1x[3]},
110110
111111
${leftYOffset},${height - a0xh}
112-
${height / 2 < a0x[1]
112+
${height / 2 < a0x[0]
113113
? ''
114114
: `L0,${a0xh}`
115115
}
116116
117-
C0,${a1x[1]},0,${a2x[1]},${a3y[1]},${a3x[1]}
118-
C${b1y[1]},${b1x[1]},${b1x[1]},${b1y[1]},${b0x[1]},${b0y[1]}
119-
C${a2x[1]},0,${a1x[1]},0,${startPoint}
117+
C0,${a1x[0]},0,${a2x[0]},${a3y[0]},${a3x[0]}
118+
C${b1y[0]},${b1x[0]},${b1x[0]},${b1y[0]},${b0x[0]},${b0y[0]}
119+
C${a2x[0]},0,${a1x[0]},0,${startPoint}
120120
Z`
121121
.replace(/[\n ]/g, '')
122122
.replace(/NaN/g, '0')

‎src/main.js‎

Lines changed: 19 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -80,14 +80,19 @@ export default function RoundDiv({style, children, dontConvertShadow, ...props})
8080
setPath(generateSvgSquircle(height, width, radius))
8181
}, [height, width, radius, borderWidth])
8282

83-
// patch for webkit's svg bug
84-
if (svgRef.current)
85-
setTimeout(() => {
86-
svgRef.current.style.position = ''
83+
useEffect(() => {
84+
// patch for webkit's svg bug
85+
if (svgRef.current)
8786
setTimeout(() => {
88-
svgRef.current.style.position = 'fixed'
87+
const oldPosition = svgRef.current.style.position || ''
88+
svgRef.current.style.display = 'none'
89+
svgRef.current.style.position = 'absolute'
90+
setTimeout(() => {
91+
svgRef.current.style.display = ''
92+
svgRef.current.style.position = oldPosition
93+
}, 10)
8994
}, 0)
90-
}, 0)
95+
}, [radius, borderWidth, borderColor, borderOpacity])
9196

9297
const pathIsEmpty = (path.startsWith('Z') || path === '')
9398
const divStyle = {
@@ -110,7 +115,7 @@ export default function RoundDiv({style, children, dontConvertShadow, ...props})
110115
position: 'fixed',
111116
left: 0,
112117
top: 0,
113-
transform: `translate(-${padding[3]}px, -${padding[0]}px)`,
118+
transform: `translate(-${padding[3] + borderWidth[3]}px, -${padding[0] + borderWidth[0]}px)`,
114119
zIndex: -1,
115120
}
116121

@@ -129,14 +134,16 @@ export default function RoundDiv({style, children, dontConvertShadow, ...props})
129134
return [camelise(key === 'null' ? 'background' : ('background-' + key)), background[key]]
130135
}))),
131136
}}/>
132-
<svg viewBox={`0 0 ${width} ${height}`} style={shapeComponentStyles}
133-
preserveAspectRatio={'xMidYMid slice'}
134-
ref={svgRef}>
137+
<svg viewBox={`0 0 ${width} ${height}`} style={{
138+
...shapeComponentStyles,
139+
overflow: 'visible',
140+
}}
141+
preserveAspectRatio={'xMidYMid slice'} ref={svgRef}>
135142
<defs>
136-
<clipPath id="inner" clipPathUnits="userSpaceOnUse">
143+
<clipPath id="inner">
137144
<path d={`M0,0V${height}H${width}V0Z` + innerPath} fillRule={'evenodd'}/>
138145
</clipPath>
139-
<clipPath id="outer" clipPathUnits="userSpaceOnUse">
146+
<clipPath id="outer">
140147
<path d={path} fillRule={'evenodd'}/>
141148
</clipPath>
142149
</defs>

‎src/updateStates.js‎

Lines changed: 15 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -26,10 +26,22 @@ export default function updateStates(args) {
2626
return styles[n]?.declaration?.value
2727
}
2828

29-
const getBorderStyles = (key, n) => ['top', 'right', 'bottom', 'left']
30-
.map(s => getNthStyle('border-' + s + '-' + key, n, 'border'))
29+
const getBorderStyles = (key, n) => {
30+
let value = ['top', 'right', 'bottom', 'left']
31+
.map(s => getNthStyle('border-' + s + '-' + key, n, 'border'))
32+
// didn't return any value
33+
if (value.filter(v => v).length !== 0) return value
34+
value = getNthStyle('border-' + key, n, 'border')
35+
// has multiple values for top, bottom, etc.
36+
if (!value?.match(' ')) return Array(4).fill(value)
37+
value = value.split(' ')
38+
// normalize to an array of length 4, for each side
39+
if (value.length === 4) return value
40+
value = value.concat(value)
41+
return value
42+
}
3143

32-
const getBorderRadii = (n) => ['top-right', 'top-left', 'bottom-right', 'bottom-left']
44+
const getBorderRadii = (n) => ['top-left', 'top-right', 'bottom-right', 'bottom-left']
3345
.map(s => getNthStyle('border-' + s + '-radius', n, 'border-radius'))
3446

3547
const states = args

0 commit comments

Comments
 (0)