diff --git a/src/main.js b/src/main.js index cba808f..5dade87 100644 --- a/src/main.js +++ b/src/main.js @@ -33,10 +33,12 @@ export default function RoundDiv({style, children, dontConvertShadow, ...props}) const [innerPath, setInnerPath] = useState('Z') const div = useRef() + const slotWrapper = useRef() const updateStatesWithArgs = () => { updateStates({ div, + slotWrapper, style, setBoxSizing, setOverflow, @@ -108,11 +110,10 @@ export default function RoundDiv({style, children, dontConvertShadow, ...props}) const pathIsEmpty = path.startsWith('Z') || path === '' const divStyle = { ...style, - ...(pathIsEmpty ? { - borderImage: 'none', - } : { + borderImage: 'none', + ...(pathIsEmpty ? {} : { ...invisibleBorderStyles, - borderImage: 'none', + padding: '0', background: 'transparent', boxShadow: dontConvertShadow // "box-shadow" must be overridden for the style extraction to work (with nth: 1, and not nth: 0) @@ -125,13 +126,12 @@ export default function RoundDiv({style, children, dontConvertShadow, ...props}) } const shapeComponentStyles = { - height: boxSizing === 'border-box' ? height : height - (border.width[0] + padding[0] + border.width[2] + padding[2]), - width: boxSizing === 'border-box' ? width : width - (border.width[1] + padding[1] + border.width[3] + padding[3]), - padding: padding.map(n => n + 'px').join(' '), + height: boxSizing === 'border-box' ? height : height - (border.width[0] + border.width[2]), + width: boxSizing === 'border-box' ? width : width - (border.width[1] + border.width[3]), position: 'fixed', left: 0, top: 0, - transform: `translate(-${padding[3] + border.width[3]}px, -${padding[0] + border.width[0]}px)`, + transform: `translate(-${border.width[3]}px, -${border.width[0]}px)`, zIndex: -1, } @@ -142,9 +142,7 @@ export default function RoundDiv({style, children, dontConvertShadow, ...props}) return
{pathIsEmpty ? null : -
+
(n * .95) + 'px').join(' '), borderColor: border.color, @@ -181,13 +179,14 @@ export default function RoundDiv({style, children, dontConvertShadow, ...props}) }}/>
n + 'px').join(' '), clipPath: overflow === 'hidden' ? `path("${innerPath}")` : null, - }}> - + transform: `translate(-${border.width[3]}px, -${border.width[0]}px)`, + boxSizing: 'border-box', + }} ref={slotWrapper}> +
} diff --git a/src/updateStates.js b/src/updateStates.js index a68a0a0..d32bb18 100644 --- a/src/updateStates.js +++ b/src/updateStates.js @@ -8,7 +8,7 @@ import ReactDOM from 'react-dom' import {lazySetArrayState, lazySetObjectsState} from './utils/react-utils' export default function updateStates(args) { - const {div} = args + const {div, slotWrapper} = args if (!div.current) return const getNthStyle = (key, n, shorthand) => { @@ -31,7 +31,7 @@ export default function updateStates(args) { ReactDOM.unstable_batchedUpdates(() => { states.setPadding( ['top', 'right', 'bottom', 'left'] - .map(s => getNthStyle('padding-' + s, 0, 'padding')) + .map(s => getNthStyle('padding-' + s, oneIfStylesAreOverridden, 'padding')) .map(n => toNumber(n, div.current) || 0) ) @@ -82,8 +82,8 @@ export default function updateStates(args) { border.width = border.width ?? Array(4).fill(0) lazySetBorder(border) - const height = div.current?.clientHeight + border.width[0] + border.width[2], - width = div.current?.clientWidth + border.width[1] + border.width[3] + const height = ((slotWrapper.current ?? div.current).clientHeight || 0) + border.width[0] + border.width[2], + width = ((slotWrapper.current ?? div.current).clientWidth || 0) + border.width[1] + border.width[3] states.setHeight(height) states.setWidth(width) @@ -104,7 +104,7 @@ export default function updateStates(args) { 'source', 'width', ].map(key => - [key, getNthStyle('border-image-' + key, oneIfStylesAreOverridden, 'border-image')] + [key, getNthStyle('border-image-' + key, 1, 'border-image')] )) )