[orx-panel] Add borderWidth, borderColor, flexShrink

orx-panel/src/main/kotlin/org/openrndr/panel/elements/Button.kt

@@ -3,6 +3,7 @@ package org.openrndr.panel.elements
 import org.openrndr.color.ColorRGBa
 import org.openrndr.draw.Drawer
 import org.openrndr.draw.FontImageMap
+import org.openrndr.draw.isolated
 import org.openrndr.events.Event
 import org.openrndr.panel.style.*
 import org.openrndr.shape.Rectangle
@@ -73,10 +74,12 @@ class Button : Element(ElementType("button")) {
             drawer.pushTransforms()
             drawer.pushStyle()
             drawer.fill = ((it.background as? Color.RGBa)?.color ?: ColorRGBa.PINK)
-            drawer.stroke = null
-            drawer.strokeWeight = 0.0
 
+            drawer.isolated {
+                drawer.stroke = computedStyle.effectiveBorderColor
+                drawer.strokeWeight = computedStyle.effectiveBorderWidth
                 drawer.rectangle(0.0, 0.0, layout.screenWidth, layout.screenHeight)
+            }
 
             (root() as? Body)?.controlManager?.fontManager?.let {
                 val font = it.font(computedStyle)

orx-panel/src/main/kotlin/org/openrndr/panel/layout/Layouter.kt

@@ -29,19 +29,23 @@ class Layouter {
                             val totalWidth = element.children.filter { it.computedStyle.display in blockLike && it.computedStyle.position !in manualPosition }.map { width(it) }.sum()
                             val remainder = (knownWidth?: element.layout.screenWidth) - totalWidth
                             val totalGrow = element.children.filter { it.computedStyle.display in blockLike && it.computedStyle.position !in manualPosition }.map { (it.computedStyle.flexGrow as FlexGrow.Ratio).value }.sum()
+                            val totalShrink = element.children.filter { it.computedStyle.display in blockLike && it.computedStyle.position !in manualPosition }.map { (it.computedStyle.flexShrink as FlexGrow.Ratio).value }.sum()
+
 
                             element.children.filter { it.computedStyle.display in blockLike && it.computedStyle.position !in manualPosition }.forEach { child ->
                                 val elementGrow = (child.computedStyle.flexGrow as FlexGrow.Ratio).value
+                                val elementShrink = (child.computedStyle.flexShrink as FlexGrow.Ratio).value
                                 val growWidth = if (totalGrow > 0) (elementGrow / totalGrow) * remainder else 0.0
+                                val shrinkWidth = if (totalShrink > 0) (elementShrink / totalShrink) * remainder else 0.0
 
                                 child.layout.screenY = y + ((child.computedStyle.marginTop as? LinearDimension.PX)?.value
                                         ?: 0.0)
                                 child.layout.screenX = x + ((child.computedStyle.marginLeft as? LinearDimension.PX)?.value
                                         ?: 0.0)
 
-                                child.layout.growWidth = growWidth
+                                child.layout.growWidth = if (remainder > 0) growWidth else shrinkWidth
 
-                                val effectiveWidth = width(child) + growWidth
+                                val effectiveWidth = width(child) + (if (remainder > 0) growWidth else shrinkWidth)
                                 x += effectiveWidth
                                 maxHeight = max(height(child, effectiveWidth), maxHeight)
                             }

orx-panel/src/main/kotlin/org/openrndr/panel/style/StyleSheet.kt

@@ -22,10 +22,11 @@ sealed class Color(inherit: Boolean = false) : PropertyValue(inherit) {
             return "RGBa(color=$color)"
         }
     }
+
     object Inherit : Color(inherit = true)
 }
 
-class CalculateContext(val elementWidth:Double?, val elementHeight:Double?)
+class CalculateContext(val elementWidth: Double?, val elementHeight: Double?)
 
 sealed class LinearDimension(inherit: Boolean = false) : PropertyValue(inherit) {
     class PX(val value: Double) : LinearDimension() {
@@ -33,6 +34,7 @@ sealed class LinearDimension(inherit: Boolean = false) : PropertyValue(inherit)
             return "PX(value=$value)"
         }
     }
+
     class Percent(val value: Double) : LinearDimension()
     class Calculate(val function: (CalculateContext) -> Double) : LinearDimension()
     object Auto : LinearDimension()
@@ -40,7 +42,6 @@ sealed class LinearDimension(inherit: Boolean = false) : PropertyValue(inherit)
 }
 
 
-
 data class PropertyBehaviour(val inheritance: PropertyInheritance, val intitial: Any)
 
 object PropertyBehaviours {
@@ -160,7 +161,10 @@ var StyleSheet.display by PropertyHandler("display", RESET, Display.BLOCK) // cs
 
 var StyleSheet.flexDirection by PropertyHandler<FlexDirection>("flex-direction", RESET, FlexDirection.Row)
 var StyleSheet.flexGrow by PropertyHandler<FlexGrow>("flex-grow", RESET, FlexGrow.Ratio(0.0))
+var StyleSheet.flexShrink by PropertyHandler<FlexGrow>("flex-shrink", RESET, FlexGrow.Ratio(1.0))
 
+var StyleSheet.borderWidth by PropertyHandler<LinearDimension>("border-width", RESET, 0.px)
+var StyleSheet.borderColor by PropertyHandler<Color>("border-color", INHERIT, Color.RGBa(ColorRGBa.TRANSPARENT))
 
 var StyleSheet.background by PropertyHandler<Color>("background-color", RESET, Color.RGBa(ColorRGBa.BLACK.opacify(0.0)))
 val StyleSheet.effectiveBackground: ColorRGBa?
@@ -190,6 +194,14 @@ val StyleSheet.effectivePaddingHeight: Double
 val StyleSheet.effectivePaddingWidth: Double
     get() = effectivePaddingLeft + effectivePaddingRight
 
+
+val StyleSheet.effectiveBorderWidth: Double
+    get() = (borderWidth as? LinearDimension.PX)?.value ?: 0.0
+
+val StyleSheet.effectiveBorderColor: ColorRGBa?
+    get() = (borderColor as? Color.RGBa)?.color
+
+
 var StyleSheet.fontSize by PropertyHandler<LinearDimension>("font-size", INHERIT, 14.px)
 var StyleSheet.fontFamily by PropertyHandler("font-family", INHERIT, "default")
 var StyleSheet.overflow by PropertyHandler<Overflow>("overflow", RESET, Overflow.Visible)