finish dynamic border sizing and sort files

Author: drinking-code

package-lock.json

@@ -45,10 +45,8 @@ export default function generateSvgSquircle(height, width, radius) {
             mapRange(maxRadius, (x / 2) * .90, x / 2, 0, 1),
             1
         )) * 200 / maxRadius,
-        hyOffset = yOffsetF(height),
-        wyOffset = yOffsetF(width)
-
-    console.log(hyOffset, wyOffset)
+        hyOffset = yOffsetF(height) || 0,
+        wyOffset = yOffsetF(width) || 0
 
     const startPoint = `${a0xw},${wyOffset}`
 
@@ -91,5 +89,5 @@ export default function generateSvgSquircle(height, width, radius) {
     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, '');
+    Z`.replace(/\n */g, '').replace(/NaN/g, '0');
 }

src/react-shadow-dom.js src/external/apearce:eact-shadow-dom.jssrc/react-shadow-dom.js renamed to src/external/apearce:eact-shadow-dom.js

@@ -45,26 +45,23 @@ export default function RoundDiv({style, children, ...props}) {
     }, [updateStatesWithArgs])
 
     const path = generateSvgSquircle(height, width, radius)
-    const maxBorderWidth = Math.max(...borderWidth)
-    const diffBorderMaxWidthLeftWidth = maxBorderWidth - borderWidth[3]
-    const diffBorderMaxWidthTopWidth = maxBorderWidth - borderWidth[0]
-    // const verticalBorderWidthDelta = maxWidth - borderWidth[2];
-    // const horizontalBorderWidthDelta = maxWidth - borderWidth[1];
-    const borderPath = generateSvgSquircle(
-        height + diffBorderMaxWidthTopWidth + (maxBorderWidth - borderWidth[2]),
-        width + diffBorderMaxWidthLeftWidth + (maxBorderWidth - borderWidth[1]),
-        [
-            radius[0] + maxBorderWidth - Math.min(borderWidth[3], borderWidth[0]),
-            radius[1] + maxBorderWidth - Math.min(borderWidth[0], borderWidth[1]),
-            radius[2] + maxBorderWidth - Math.min(borderWidth[1], borderWidth[2]),
-            radius[3] + maxBorderWidth - Math.min(borderWidth[2], borderWidth[3])
-        ])
+    const innerPath = generateSvgSquircle(
+        height - (borderWidth[0] + borderWidth[2]),
+        width - (borderWidth[1] + borderWidth[3]),
+        radius.map((val, i) =>
+            Math.max(0,
+                val - Math.max(borderWidth[i], borderWidth[i === 0 ? 3 : i - 1])
+            )
+        )
+    ).replace(
+        /(\d+(\.\d+)?),(\d+(\.\d+)?)/g,
+        match => match.split(',').map((number, i) =>
+            Number(number) + (i === 0 ? borderWidth[3] : borderWidth[0])
+        ).join(',')
+    )
 
     const maskPaths = getMaskPaths(borderWidth, height, width)
 
-    // console.log(borderWidth, borderColor, borderOpacity)
-    // console.log(isFlex)
-
     const svgTransform = isFlex
         ? `translate(${(borderWidth[1] - borderWidth[3]) / 2}px,${(borderWidth[2] - borderWidth[0]) / 2}px)`
         : `translate(${(borderWidth[1] - borderWidth[3]) / 2}px,-${borderWidth[0]}px)`
@@ -86,19 +83,22 @@ export default function RoundDiv({style, children, ...props}) {
                 transform: svgTransform
             }} xmlnsXlink="http://www.w3.org/1999/xlink" preserveAspectRatio={'xMidYMid slice'}>
                 <defs>
-                    {Object.keys(maskPaths).map(key => (
-                        <clipPath id={key + '-mask'} key={key}>
-                            <path d={maskPaths[key]}
-                                  transform={`translate(${diffBorderMaxWidthLeftWidth},${diffBorderMaxWidthTopWidth})`}/>
-                        </clipPath>
-                    ))}
-                    <path d={borderPath} fill="none" id="border"/>
+                    <clipPath id="inner">
+                        <path d={`M0,0V${height}H${width}V0Z` + innerPath} fillRule={'evenodd'}/>
+                    </clipPath>
                 </defs>
-                {Object.keys(maskPaths).map((key, i) => (
-                    <use href="#border" clipPath={`url(#${key}-mask)`} key={key}
-                         strokeWidth={maxBorderWidth * 2} stroke={borderColor[i]} opacity={borderOpacity[i]}
-                         transform={`translate(${-diffBorderMaxWidthLeftWidth},${-diffBorderMaxWidthTopWidth})`}/>
-                ))}
+                {Object.keys(maskPaths).map((key, i) => {
+                    if (borderColor[i] === borderColor[i - 1]) return ''
+
+                    let path = maskPaths[key]
+                    while (borderColor[i] === borderColor[i + 1]) {
+                        path += maskPaths[Object.keys(maskPaths)[i + 1]]
+                        i++
+                    }
+
+                    return <path d={path} clipPath={'url(#inner)'} key={key}
+                                 fill={borderColor[i]} opacity={borderOpacity[i]}/>
+                })}
             </svg>
             <slot/>
         </ShadowRoot>

src/external/bobspace:html-colors.js

@@ -1,33 +1,67 @@
 export default function getMaskPaths(borderWidth, height, width) {
-    const n = 10;
-    // todo: make adaptive
-
-    const maskPointsA = {
-        to: -borderWidth[0],
-        ti: borderWidth[0] * n,
-        ro: width + borderWidth[1],
-        ri: width - borderWidth[1] * n,
-        bo: height + borderWidth[2],
-        bi: height - borderWidth[2] * n,
-        lo: -borderWidth[3],
-        li: borderWidth[3] * n,
+    const allSides = ['top', 'right', 'bottom', 'left']
+    const max = allSides.length - 1
+    const next = i => i === max ? 0 : i + 1
+    const prev = i => i === 0 ? max : i - 1
+
+    /**
+     * @constant
+     * @type {Array<number>}
+     * */
+    const allRatios = allSides.map((side, i) =>
+        ((i % 2 === 0 ? height : width) - borderWidth[next(next(i))])
+        / borderWidth[i]
+    )
+
+    /**
+     * @param {string} posY
+     * @param {string} posX
+     * @param {boolean} [inside]
+     * @param {string} [borderPos] needed if inside=true
+     * */
+    const makePoint = (posY, posX, inside, borderPos) => {
+        return makeValue(posX, inside, borderPos) + ',' + makeValue(posY, inside, borderPos)
     }
 
-    const maskPoints = {
-        tlo: maskPointsA.lo + ',' + maskPointsA.to,
-        tli: maskPointsA.li + ',' + maskPointsA.ti,
-        tro: maskPointsA.ro + ',' + maskPointsA.to,
-        tri: maskPointsA.ri + ',' + maskPointsA.ti,
-        blo: maskPointsA.lo + ',' + maskPointsA.bo,
-        bli: maskPointsA.li + ',' + maskPointsA.bi,
-        bro: maskPointsA.ro + ',' + maskPointsA.bo,
-        bri: maskPointsA.ri + ',' + maskPointsA.bi,
+    /**
+     * @param {string} pos
+     * @param {boolean} [inside]
+     * @param {string} [borderPos] needed if inside=true
+     * */
+    const makeValue = (pos, inside, borderPos) => {
+        let v = -borderWidth[allSides.indexOf(pos)]
+
+        if (inside) {
+            const i = allSides.indexOf(borderPos)
+            v *= -Math.min(allRatios[prev(i)], allRatios[i], allRatios[next(i)])
+        }
+
+        if (pos === 'right')
+            v = -v + Number(width)
+        else if (pos === 'bottom')
+            v = -v + Number(height)
+
+        return v
     }
 
-    return {
-        top: `M${maskPoints.tli}H${maskPointsA.ri}L${maskPoints.tro}H${maskPointsA.lo}Z`,
-        right: `M${maskPoints.tri}V${maskPointsA.bi}L${maskPoints.bro}V${maskPointsA.to}Z`,
-        bottom: `M${maskPoints.bri}H${maskPointsA.li}L${maskPoints.blo}H${maskPointsA.ro}Z`,
-        left: `M${maskPoints.bli}V${maskPointsA.ti}L${maskPoints.tlo}V${maskPointsA.bo}Z`,
+    const makeMaskPath = (side) => {
+        const i = allSides.indexOf(side)
+        const isH = i % 2 === 0 // is "top" or "bottom"
+        const T = isH ? 'H' : 'V'
+        const nextSide = allSides[next(i)]
+        const prevSide = allSides[prev(i)]
+        const prevIfH = isH ? prevSide : side
+        const prevIfV = !isH ? prevSide : side
+        const nextIfH = isH ? nextSide : side
+        const nextIfV = !isH ? nextSide : side
+
+        return 'M' + makePoint(prevIfV, prevIfH, true, side) +
+            T + makeValue(nextSide, true, side) +
+            'L' + makePoint(nextIfV, nextIfH) +
+            T + makeValue(prevSide) + 'Z'
     }
+
+    return Object.fromEntries(
+        allSides.map(side => [side, makeMaskPath(side)])
+    )
 }