basic support for background images

drinking-code · drinking-code · commit 4c8c0744fe1f · 2021-06-19T21:18:04.000+02:00
diff --git a/src/css-utils.js b/src/css-utils.js
@@ -1,10 +1,12 @@
 import CSS_COLOR_NAMES from "./html-colors";
 import toPx from "./css-length-converter";
+import {element} from 'prop-types'
 
 function _getAttributeFromString(string, method, ...data) {
     if (!string) return false
     string = string.split(' ')
     for (let i in string) {
+        if (!string.hasOwnProperty(i)) continue
         const res = method(string, Number(i), ...data)
         if (res) return res
     }
@@ -26,13 +28,43 @@ function _getColor(border, i) {
         return color
     }
     // color is a html color name
-    if (
-        CSS_COLOR_NAMES.map(color => color.toLowerCase())
-            .includes(val.toLowerCase())
-    ) return val
+    if (CSS_COLOR_NAMES.map(color => color.toLowerCase())
+        .includes(val.toLowerCase()))
+        return val
+    if (val === 'currentcolor') {
+        return 'currentcolor'
+    }
     return false
 }
 
+function _getImage(border, i) {
+    const val = border[i]
+
+    if (val.startsWith('url')) {
+        let url = val;
+        for (let j = 1; border[i + j]; j++) {
+            url += border[i + j]
+        }
+        url = /url\(("[^"]+"|'[^']+'|[^)]+)\)/g.exec(url)
+        url = url ? url[1] : false
+        url = url?.startsWith('"') || url?.startsWith("'")
+            ? url.substr(1, url.length - 2)
+            : url
+        return url
+    }
+}
+
+function _getImageSize(border, i, element) {
+    const val = border[i]
+
+    if (['cover', 'contain'].includes(val) || val.endsWith('%')) {
+        return val
+    }
+    unitCheck(val, htmlBackgroundSizeNotSvgError)
+    if (val.match(/(\d+(\.\d+)?(ch|cm|em|ex|in|mm|pc|pt|px|rem|vh|vmax|vmin|vw)|0)/))
+        return toPx(element, val)
+}
+
 function _getOpacity(border, i) {
     let val = border[i]
     if (val.startsWith('rgba') || val.startsWith('hsla')) {
@@ -46,10 +78,14 @@ function _getOpacity(border, i) {
         return 1
 }
 
-const htmlLengthNotSvgError = new Error('<RoundDiv> Border lengths must be either "thin", "medium", "thick", or in one of the following units: ch, cm, em, ex, in, mm, pc, pt, px, rem, vh, vmax, vmin, vw.')
+const htmlLengthNotSvgErrorTemplate = (a, b) => `<RoundDiv> ${a} must be ${b ? `either ${b}, or` : ''} in one of the following units: ch, cm, em, ex, in, mm, pc, pt, px, rem, vh, vmax, vmin, vw.`
+const htmlBorderLengthNotSvgError =
+    new Error(htmlLengthNotSvgErrorTemplate('border lengths', '"thin", "medium", "thick"'))
+const htmlBackgroundSizeNotSvgError =
+    new Error(htmlLengthNotSvgErrorTemplate('background size', '"cover", "contain"'))
 
-function unitCheck(length) {
-    if (length?.match(/(cap|ic|lh|rlh|vi|vm|vb|Q|mozmm)/g)) throw htmlLengthNotSvgError
+function unitCheck(length, err) {
+    if (length?.match(/(cap|ic|lh|rlh|vi|vm|vb|Q|mozmm)/g)) throw err
     return length
 }
 
@@ -61,15 +97,17 @@ function _getWidth(border, i, element) {
     if (val.toLowerCase() === 'thin') return 1
     if (val.toLowerCase() === 'medium') return 3
     if (val.toLowerCase() === 'thick') return 5
-    unitCheck(val)
+    unitCheck(val, htmlBorderLengthNotSvgError)
     // width is <length>
     if (val.match(/(\d+(\.\d+)?(ch|cm|em|ex|in|mm|pc|pt|px|rem|vh|vmax|vmin|vw)|0)/))
         return toPx(element, val)
     return false
 }
 
-const getWidth = s => _getAttributeFromString(s, _getWidth),
+const getWidth = (s, el) => _getAttributeFromString(s, _getWidth, el),
+    getImage = s => _getAttributeFromString(s, _getImage),
+    getImageSize = (s, el) => _getAttributeFromString(s, _getImageSize, el),
     getColor = s => _getAttributeFromString(s, _getColor),
     getOpacity = s => _getAttributeFromString(s, _getOpacity)
 
-export {getWidth, getColor, unitCheck, getOpacity}
+export {getWidth, getImage, getImageSize, getColor, getOpacity}
diff --git a/src/main.js b/src/main.js
@@ -10,6 +10,8 @@ export default function RoundDiv({clip, style, children, ...props}) {
     const [width, setWidth] = useState(0)
     const [radius, setRadius] = useState(0)
     const [background, setBackground] = useState('transparent')
+    const [backgroundImage, setBackgroundImage] = useState('none')
+    const [backgroundImageSize, setBackgroundImageSize] = useState(null)
     const [backgroundOpacity, setBackgroundOpacity] = useState(0)
     const [borderColor, setBorderColor] = useState('transparent')
     const [borderWidth, setBorderWidth] = useState(0)
@@ -30,6 +32,8 @@ export default function RoundDiv({clip, style, children, ...props}) {
         setWidth,
         setRadius,
         setBackground,
+        setBackgroundImage,
+        setBackgroundImageSize,
         setBackgroundOpacity,
         setBorderColor,
         setBorderWidth,
@@ -47,12 +51,46 @@ export default function RoundDiv({clip, style, children, ...props}) {
     }
 
     divStyle.background = 'transparent'
-    divStyle.borderWidth = divStyle.borderWidth || '0'
+    divStyle.borderWidth = '0'
     divStyle.borderColor = 'transparent'
 
+    const [backgroundImageAspectRatio, setBackgroundImageAspectRatio] = useState(1)
+    const [backgroundImageHeight, setBackgroundImageHeight] = useState(0)
+    const [backgroundImageWidth, setBackgroundImageWidth] = useState(0)
+    useEffect(() => {
+        const img = new Image()
+        img.onload = () => {
+            setBackgroundImageAspectRatio(img.naturalWidth / img.naturalHeight)
+            setBackgroundImageHeight(img.naturalHeight)
+            setBackgroundImageWidth(img.naturalWidth)
+        }
+        img.src = backgroundImage
+    }, [backgroundImage, setBackgroundImageAspectRatio])
+
+    const fullHeight = height + borderWidth * 2,
+        fullWidth = width + borderWidth * 2
+
+    console.log(backgroundImageSize)
+
+    const lengthCalculator = (isWidth) => {
+        if ((!isWidth && backgroundImageAspectRatio > 1)
+            || (isWidth && backgroundImageAspectRatio < 1)
+            || !backgroundImageSize
+        ) return undefined
+
+        if (typeof backgroundImageSize === 'number')
+            return backgroundImageSize
+
+        if (['cover', 'contain'].includes(backgroundImageSize))
+            return fullHeight
+
+        if (backgroundImageSize.endsWith('%'))
+            return (isWidth ? fullWidth : fullHeight)
+                * (Number(backgroundImageSize.replace('%', '')) / 100)
+    }
+
     return <div {...props} style={divStyle} ref={div}>
         <ShadowRoot>
-            <style>{':host{position:relative}'}</style>
             <svg viewBox={`0 0 ${width} ${height}`} style={{
                 position: 'absolute',
                 height,
@@ -62,15 +100,23 @@ export default function RoundDiv({clip, style, children, ...props}) {
             }} xmlnsXlink="http://www.w3.org/1999/xlink" preserveAspectRatio={'xMidYMid slice'}>
                 <defs>
                     <path d={
-                        generateSvgSquircle(height + borderWidth * 2, width + borderWidth * 2, radius, clip)
+                        generateSvgSquircle(fullHeight, fullWidth, radius, clip)
                     } id="shape"/>
 
+                    <pattern id="bg" patternUnits="userSpaceOnUse"
+                             width={fullWidth} height={fullHeight}>
+                        <image href={backgroundImage} x={borderWidth} y={borderWidth}
+                               preserveAspectRatio={'xMinYMin ' + (backgroundImageSize === 'contain' ? 'meet' : 'slice')}
+                               height={lengthCalculator(false)}
+                               width={lengthCalculator(true)}/>
+                    </pattern>
+
                     <clipPath id="insideOnly">
                         <use xlinkHref="#shape" fill="black"/>
                     </clipPath>
                 </defs>
-                <use xlinkHref="#shape" fill={background} opacity={backgroundOpacity}
-                     x={-borderWidth} y={-borderWidth}/>
+                <use xlinkHref="#shape" fill={backgroundImage !== 'none' ? 'url(#bg)' : background}
+                     opacity={backgroundOpacity} x={-borderWidth} y={-borderWidth}/>
                 <use xlinkHref="#shape" stroke={borderColor} fill="none" strokeWidth={borderWidth * 2}
                      opacity={borderOpacity} clipPath="url(#insideOnly)" x={-borderWidth} y={-borderWidth}/>
             </svg>
diff --git a/src/style-sheet-watcher.js b/src/style-sheet-watcher.js
@@ -1,9 +1,6 @@
-let watchers = 0
 const CSSChangeEvent = new CustomEvent('css-change');
 
 export default function attachCSSWatcher(callback) {
-    watchers++
-    console.log(watchers)
     CSSWatcher.addEventListener('css-change', () => callback())
 }
 
diff --git a/src/updateStates.js b/src/updateStates.js
@@ -1,4 +1,4 @@
-import {getColor, getOpacity, getWidth, unitCheck} from "./css-utils";
+import {getColor, getImage, getImageSize, getOpacity, getWidth} from "./css-utils";
 import getStyle from "./styles-extractor";
 
 export default function updateStates(args) {
@@ -9,6 +9,8 @@ export default function updateStates(args) {
         setWidth,
         setRadius,
         setBackground,
+        setBackgroundImage,
+        setBackgroundImageSize,
         setBackgroundOpacity,
         setBorderColor,
         setBorderWidth,
@@ -19,40 +21,66 @@ export default function updateStates(args) {
         setHeight(boundingClientRect.height)
         setWidth(boundingClientRect.width)
     }
-    const divStyle = boundingClientRect ? window?.getComputedStyle(div.current) : null
+
+    function camelise(str) {
+        return str?.replace(/^\w|[A-Z]|\b\w|\s+/g, function (match, index) {
+            if (+match === 0) return "";
+            return index === 0 ? match.toLowerCase() : match.toUpperCase();
+        }).replace(/-/g, '');
+    }
+
+    const getNthStyle = (key, n) =>
+            (getStyle(camelise(key), div.current)?.overwritten || [])[n]?.value,
+
+        getNthStyleAttrOrAlt = (...args) => {
+            args = Array.from(args)
+            let n = args.pop()
+            if (typeof n !== 'number') {
+                args.push(n)
+                n = 0
+            }
+
+            let a, b, c, d
+            if (args.length === 2)
+                [a, b, c, d] = [args[0], args[1], args[0], args[1]]
+            else if (args.length === 3)
+                [a, b, c, d] = [args[0], args[1], args[1], args[2]]
+
+            return style ? style[camelise(a)] || style[camelise(b)]
+                : getNthStyle(c, n) || getNthStyle(d, n)
+        },
+        getNthStyleAttr = (a, n) =>
+            style ? style[camelise(a)] : getNthStyle(a, n)
+
+    const divStyle = div.current ? window?.getComputedStyle(div.current) : null
     if (divStyle) {
         setRadius(Number(
             (divStyle.borderRadius || divStyle.borderTopLeftRadius)
-                .replace('px', '')))
+                .replace('px', ''))
+        )
         setBackground(getColor(
-            style?.background
-            || style?.backgroundColor
-            || (getStyle('background', div.current)?.overwritten || [])[1]?.value
-            || (getStyle('background-color', div.current)?.overwritten || [])[1]?.value
+            getNthStyleAttrOrAlt('background', 'background-color', 1)
         ) || 'transparent')
+        setBackgroundImage(getImage(
+            getNthStyleAttrOrAlt('background', 'background-image', 1)
+        ) || 'none')
+        setBackgroundImageSize(getImageSize(
+            getNthStyleAttr('background-size', 1)
+        ) || null)
         setBackgroundOpacity(getOpacity(
-            style?.background
-            || style?.backgroundColor
-            || (getStyle('background', div.current)?.overwritten || [])[1]?.value
-            || (getStyle('background-color', div.current)?.overwritten || [])[1]?.value
+            getNthStyleAttrOrAlt('background', 'background-color', 1)
         ) || 1)
+
         setBorderColor(getColor(
-            style?.border
-            || style?.borderColor
-            || (getStyle('borderColor', div.current)?.overwritten || [])[1]?.value
-            || (getStyle('borderTopColor', div.current)?.overwritten || [])[1]?.value
+            getNthStyleAttrOrAlt('border', 'border-color', 'border-top-color', 1)
         ) || 'transparent')
-        setBorderWidth(getWidth(
-            style?.border
-            || style?.borderWidth
-            || unitCheck((getStyle('borderWidth', div.current)?.overwritten || [])[0]?.value)
-            || unitCheck((getStyle('borderTopWidth', div.current)?.overwritten || [])[0]?.value),
-            div.current) || 0)
         setBorderOpacity(getOpacity(
-            style?.border
-            || style?.borderColor
-            || (getStyle('borderColor', div.current)?.overwritten || [])[1]?.value
-            || (getStyle('borderTopColor', div.current)?.overwritten || [])[1]?.value
+            getNthStyleAttrOrAlt('border', 'border-color', 'border-top-color', 1)
         ) || 1)
+
+        setBorderWidth(getWidth(
+            getNthStyleAttrOrAlt('border', 'border-width', 'border-top-width', 0),
+            div.current
+        ) || 0)
     }
 }

Original file line number	Diff line number	Diff line change
`@@ -1,9 +1,6 @@`
`1`		`-let watchers = 0`
`2`	`1`	`const CSSChangeEvent = new CustomEvent('css-change');`
`3`	`2`
`4`	`3`	`export default function attachCSSWatcher(callback) {`
`5`		`- watchers++`
`6`		`- console.log(watchers)`
`7`	`4`	`CSSWatcher.addEventListener('css-change', () => callback())`
`8`	`5`	`}`
`9`	`6`