Merge pull request #2 from drinking-code/v1.1.0

Merge v1.1.0

.babelrc

@@ -1,8 +1,7 @@
 {
     "presets": [
         "@babel/react",
-        "@babel/env",
-        "minify"
+        "@babel/env"
     ],
     "plugins": [
         "@babel/plugin-proposal-class-properties"

README.md

@@ -28,9 +28,9 @@ const App = () => {
 
 export default App;
 ```
-`react-round-div` will clip the `border-radius` of it is too large to prevent artifacts from appearing. You can turn this off by passing `clip={false}`.
 
 
 ## Caveats
-This package is still in the starting blocks, so for now only single colored backgrounds and solid, uniform borders are supported.  
-There is support to come for gradients and image backgrounds, gradient borders, and perhaps proper `backdrop-filter` support.
+This package is still in the starting blocks, so for now borders are only supported in the `solid` style and some transitions on the div may not work properly.
+
+Moreover, children inside `RoundDiv` get cut off when are placed (partly) outside the div due to `clip-path` being used to make the smooth corners. There will probably an option in later versions to use a pseudo-element for the shape, so that children can be rendered outside.

package.json

@@ -1,6 +1,6 @@
 {
     "name": "react-round-div",
-    "version": "1.0.0",
+    "version": "1.1.0",
     "description": "Make your rounded corners look phenomenal with g2 continuity.",
     "main": "dist/main.js",
     "scripts": {

src/css-utils.js

@@ -1,75 +1,63 @@
-import CSS_COLOR_NAMES from "./html-colors";
-import toPx from "./css-length-converter";
+import CSS_COLOR_NAMES from "./external/bobspace:html-colors";
+import toPx from "./external/heygrady:units:length";
 
-function _getAttributeFromString(string, method, ...data) {
-    if (!string) return false
-    string = string.split(' ')
-    for (let i in string) {
-        const res = method(string, Number(i), ...data)
-        if (res) return res
-    }
-}
-
-function _getColor(border, i) {
-    const val = border[i]
+/** @returns {string} */
+function convertPlainColor(val) {
+    if (!val) return '#000'
+    val = val?.toLowerCase()
     // color is a hex code
-    if (val.toLowerCase().match(/#([0-9a-f]{3}){1,2}/)) return val
+    if (val?.match(/#([0-9a-f]{3}){1,2}/)) return val
     // color is a function (rgb, rgba, hsl, hsla)
-    if (val.startsWith('rgb') || val.startsWith('hsl')) {
-        let color = val;
-        if (!val.endsWith(')'))
-            for (let j = 1; !border[i + j - 1].endsWith(')'); j++) {
-                color += border[i + j]
-            }
-        if (color[3] === 'a')
-            color = color.replace('a', '').replace(/,[^),]+\)/, ')')
-        return color
-    }
+    else if (val?.match(/^(rgb|hsl)a?\(([^,]{1,3},? *){3}(\d*\.?\d+)?\)/))
+        return val
+            .replace('a', '')
+            .replace(/\((([\d%]{1,3}, *){2}([\d%]{1,3}))(, *\d*\.?\d+)?\)/, '($1)')
     // color is a html color name
-    if (
-        CSS_COLOR_NAMES.map(color => color.toLowerCase())
-            .includes(val.toLowerCase())
-    ) return val
-    return false
+    else if (CSS_COLOR_NAMES.map(color => color.toLowerCase())
+        .includes(val.toLowerCase()))
+        return val
+    else if (val === 'currentcolor') {
+        return 'currentcolor'
+    } else return '#000'
 }
 
-function _getOpacity(border, i) {
-    let val = border[i]
-    if (val.startsWith('rgba') || val.startsWith('hsla')) {
-        if (!val.endsWith(')'))
-            for (let j = 1; !border[i + j - 1].endsWith(')'); j++) {
-                val += border[i + j]
-            }
-        return val.replace(/(rgb|hsl)a?\(([^,)]+,){3}/, '').replace(/\)$/, '')
-    }
-    if (border.length - 1 === i)
-        return 1
+/** @returns {number} */
+function convertColorOpacity(val) {
+    if (val?.startsWith('rgba') || val?.startsWith('hsla')) {
+        return Number(val.match(/(\d*\.?\d+)?\)$/)[1])
+    } else 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.')
-
-function unitCheck(length) {
-    if (length?.match(/(cap|ic|lh|rlh|vi|vm|vb|Q|mozmm)/g)) throw htmlLengthNotSvgError
-    return length
+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 htmlBorderRadiusNotSvgError =
+    new Error(htmlLengthNotSvgErrorTemplate('border radii'))
+
+function toNumber(length, element, err) {
+    if (!length) return false
+    if (typeof length === 'number' || !length.match(/\D+/))
+        return Number(length);
+    else if (length?.match(/(cap|ic|lh|rlh|vi|vm|vb|Q|mozmm)/g))
+        if (err) throw err
+        else return false
+    else if (length?.match(/(\d+(\.\d+)?(ch|cm|em|ex|in|mm|pc|pt|px|rem|vh|vmax|vmin|vw)|0)/))
+        return toPx(element, length)
 }
 
-function _getWidth(border, i, element) {
-    const val = border[i]
-    // width is 0
-    if (val === '0') return 0
+/** @returns {number} */
+function convertBorderWidth(val, element) {
+    if (!val) return 0
     // width is a word
-    if (val.toLowerCase() === 'thin') return 1
-    if (val.toLowerCase() === 'medium') return 3
-    if (val.toLowerCase() === 'thick') return 5
-    unitCheck(val)
+    if (val?.toLowerCase() === 'thin')
+        return 1
+    else if (val?.toLowerCase() === 'medium')
+        return 3
+    else if (val?.toLowerCase() === 'thick')
+        return 5
     // 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
+    else
+        return toNumber(val, element, htmlBorderLengthNotSvgError) || 0
 }
 
-const getWidth = s => _getAttributeFromString(s, _getWidth),
-    getColor = s => _getAttributeFromString(s, _getColor),
-    getOpacity = s => _getAttributeFromString(s, _getOpacity)
-
-export {getWidth, getColor, unitCheck, getOpacity}
+export {convertPlainColor, convertColorOpacity, convertBorderWidth, toNumber, htmlBorderRadiusNotSvgError}

src/generator.js

@@ -0,0 +1,111 @@
+/**
+ * @param {number} height
+ * @param {number} width
+ * @param {number | Array<number>} radius
+ *
+ * @returns {string} SVG path data
+ * */
+export default function generateSvgSquircle(height, width, radius) {
+    /* from right to left top left corner upper (right half) */
+    const ratios = [1.528665037, 1.0884928889, 0.8684068148, 0.07491140741, 0.6314939259, 0.1690595556, 0.3728238519];
+    const roundToNthPlace = 1;
+
+    if (typeof radius === 'number')
+        radius = Array(4).fill(radius)
+    else if (radius.length === 2)
+        radius.push(radius[0])
+    if (radius.length === 3)
+        radius.push(radius[1])
+
+    height = Number(height);
+    width = Number(width);
+
+    const _rawRadius = [...radius].map(n => Number(n))
+    const max = radius.length - 1
+    const next = i => i === max ? 0 : i + 1
+    const prev = i => i === 0 ? max : i - 1
+    radius = _rawRadius.map((radius, i) =>
+        Math.min(
+            radius,
+            Math.min(
+                height - _rawRadius[i % 2 === 0 ? prev(i) : next(i)],
+                height / 2
+            ),
+            Math.min(
+                width - _rawRadius[i % 2 === 0 ? next(i) : prev(i)],
+                width / 2
+            )
+        )
+    )
+
+    const [a0x, a1x, a2x, a3y, a3x, b1y, b1x] = Array(7)
+            .fill(Array(4).fill(0))
+            .map((a, i) => a.map((b, j) => radius[j] * ratios[i])),
+        [b0y, b0x] = [a3y, a3x]
+
+    if (isNaN(height)) throw new Error(`'height' must be a number`);
+    if (isNaN(width)) throw new Error(`'width' must be a number`);
+    if (radius.includes(NaN)) throw new Error(`'radius' must be a number or an array containing 2 to 4 numbers`);
+
+    const a0xF = x => Math.min(x / 2, a0x[0]),
+        a0xw = a0xF(width),
+        a0xh = a0xF(height)
+
+    /*function mapRange(number, in_min, in_max, out_min, out_max) {
+        return (number - in_min) * (out_max - out_min) / (in_max - in_min) + out_min;
+    }*/
+
+    // const maxRadius = Math.max(...radius);
+
+    const  yOffsetF = (x) => 0,
+        hyOffset = yOffsetF(height) || 0,
+        wyOffset = yOffsetF(width) || 0
+
+    const startPoint = `${a0xw},${wyOffset}`
+
+    return `M${startPoint}
+    ${width / 2 < a0x[1]
+        ? ''
+        : `L${width - a0xw},0`
+    }
+    
+    C${width - a1x[1]},0,${width - a2x[1]},0,${width - a3x[1]},${a3y[1]}
+    C${width - b1x[1]},${b1y[1]},${width - b1y[1]},${b1x[1]},${width - b0y[1]},${b0x[1]}
+    C${width},${a2x[1]},${width},${a1x[1]},
+    
+    ${width - hyOffset},${a0xh}
+    ${height / 2 < a0x[2]
+        ? ''
+        : `L${width},${height - a0xh}`
+    }
+    
+    C${width},${height - a1x[2]},${width},${height - a2x[2]},${width - a3y[2]},${height - a3x[2]}
+    C${width - b1y[2]},${height - b1x[2]},${width - b1x[2]},${height - b1y[2]},${width - b0x[2]},${height - b0y[2]}
+    C${width - a2x[2]},${height},${width - a1x[2]},${height},
+    
+    ${width - a0xw},${height - wyOffset}
+    ${width / 2 < a0x[3]
+        ? ''
+        : `L${a0xw},${height}`
+    }
+    
+    C${a1x[3]},${height},${a2x[3]},${height},${a3x[3]},${height - a3y[3]}
+    C${b1x[3]},${height - b1y[3]},${b1y[3]},${height - b1x[3]},${b0y[3]},${height - b0x[3]}
+    C0,${height - a2x[3]},0,${height - a1x[3]},
+    
+    ${hyOffset},${height - a0xh}
+    ${height / 2 < a0x[0]
+        ? ''
+        : `L0,${a0xh}`
+    }
+    
+    C0,${a1x[0]},0,${a2x[0]},${a3y[0]},${a3x[0]}
+    C${b1y[0]},${b1x[0]},${b1x[0]},${b1y[0]},${b0x[0]},${b0y[0]}
+    C${a2x[0]},0,${a1x[0]},0,${startPoint}
+    Z`
+        .replace(/[\n ]/g, '')
+        .replace(/NaN/g, '0')
+        .replace(/\d+\.\d+/g, match =>
+            Math.round(Number(match) * (10 ** roundToNthPlace)) / (10 ** roundToNthPlace)
+        )
+}