[orx-panel] Add borderWidth, borderColor, flexShrink

This commit is contained in:
edwin
2020-06-18 17:10:55 +02:00
parent 84be6d6ac5
commit 0ccd9a82b2
3 changed files with 26 additions and 7 deletions

View File

@@ -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)

View File

@@ -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)
}

View File

@@ -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)