fix positioning issues, add css watcher

Author: drinking-code

img/compare.svg

@@ -29,13 +29,13 @@ export default function generateSvgSquircle(height, width, radius, clip) {
             mapRange(radius, (x / 2) * .90, x / 2, 0, 1),
             1
         )) * 1.7,
-        hyOffset = yOffsetF(height),
-        wyOffset = yOffsetF(width)
+        hyOffset = clip !== false ? yOffsetF(height) : 0,
+        wyOffset = clip !== false ? yOffsetF(width) : 0
 
     const startPoint = `${a0xw},${wyOffset}`
 
     return `M${startPoint}
-    ${width / 2 < a0x
+    ${width / 2 < a0x && clip !== false
         ? ''
         : `L${width - a0xw},0`
     }
@@ -45,7 +45,7 @@ export default function generateSvgSquircle(height, width, radius, clip) {
     C${width},${a2x},${width},${a1x},
     
     ${width - hyOffset},${a0xh}
-    ${height / 2 < a0x
+    ${height / 2 < a0x && clip !== false
         ? ''
         : `L${width},${height - a0xh}`
     }
@@ -55,7 +55,7 @@ export default function generateSvgSquircle(height, width, radius, clip) {
     C${width - a2x},${height},${width - a1x},${height},
     
     ${width - a0xw},${height - wyOffset}
-    ${width / 2 < a0x
+    ${width / 2 < a0x && clip !== false
         ? ''
         : `L${a0xw},${height}`
     }
@@ -65,7 +65,7 @@ export default function generateSvgSquircle(height, width, radius, clip) {
     C0,${height - a2x},0,${height - a1x},
     
     ${hyOffset},${height - a0xh}
-    ${height / 2 < a0x
+    ${height / 2 < a0x && clip !== false
         ? ''
         : `L0,${a0xh}`
     }

src/generator.js

@@ -1,8 +1,9 @@
-import React, {useRef, useEffect, useState} from 'react'
+import React, {useRef, useEffect, useState, useCallback} from 'react'
 import generateSvgSquircle from './generator'
 import './getMatchedCSSRules-polyfill'
 import updateStates from "./updateStates"
 import ShadowRoot from "./react-shadow-dom"
+import attachCSSWatcher from './style-sheet-watcher'
 
 export default function RoundDiv({clip, style, children, ...props}) {
     const [height, setHeight] = useState(0)
@@ -22,7 +23,7 @@ export default function RoundDiv({clip, style, children, ...props}) {
             div.current?.attachShadow({mode: 'open'})
     }, [])
 
-    useEffect(() => updateStates({
+    const updateStatesWithArgs = useCallback(() => updateStates({
         div,
         style,
         setHeight,
@@ -33,7 +34,13 @@ export default function RoundDiv({clip, style, children, ...props}) {
         setBorderColor,
         setBorderWidth,
         setBorderOpacity
-    }), [div, clip, style])
+    }), [style])
+
+    useEffect(updateStatesWithArgs, [div, clip, style, updateStatesWithArgs])
+
+    useEffect(() => {
+        attachCSSWatcher(() => updateStatesWithArgs())
+    }, [updateStatesWithArgs])
 
     const divStyle = {
         ...style
@@ -45,13 +52,14 @@ export default function RoundDiv({clip, style, children, ...props}) {
 
     return <div {...props} style={divStyle} ref={div}>
         <ShadowRoot>
+            <style>{':host{position:relative}'}</style>
             <svg viewBox={`0 0 ${width} ${height}`} style={{
-                position: 'fixed',
+                position: 'absolute',
                 height,
-                width,
+                width: 1,
                 overflow: 'visible',
                 zIndex: -1
-            }} xmlnsXlink="http://www.w3.org/1999/xlink">
+            }} xmlnsXlink="http://www.w3.org/1999/xlink" preserveAspectRatio={'xMidYMid slice'}>
                 <defs>
                     <path d={
                         generateSvgSquircle(height + borderWidth * 2, width + borderWidth * 2, radius, clip)

src/main.js

@@ -0,0 +1,31 @@
+let watchers = 0
+const CSSChangeEvent = new CustomEvent('css-change');
+
+export default function attachCSSWatcher(callback) {
+    watchers++
+    console.log(watchers)
+    CSSWatcher.addEventListener('css-change', () => callback())
+}
+
+const CSSWatcher = new EventTarget()
+
+;(function watchCSS() {
+    let CSS = getCSSText()
+    setInterval(() => {
+        const newCSS = getCSSText()
+        if (CSS === newCSS) return
+        CSS = newCSS
+        CSSWatcher.dispatchEvent(CSSChangeEvent)
+    }, 1000)
+})()
+
+function getCSSText() {
+    let CSS = ''
+    for (let i = 0; i < document.styleSheets.length; i++) {
+        const sheet = document.styleSheets[i]
+        for (let j = 0; j < sheet.rules.length; j++) {
+            CSS += sheet.rules[j].cssText
+        }
+    }
+    return CSS
+}