Render button on the screen (#67)

* Simplify UI lib APIs

* Add Text element for UI lib

* Add button element

* Remove margin

* Fix button width bug

Author: magicoder10

ui/background.go

@@ -0,0 +1,15 @@
+package ui
+
+import (
+	"image/draw"
+)
+
+type Background struct {
+	Color *Color
+}
+
+func (b Background) Paint(painter *Painter, destLayer draw.Image) {
+	if b.Color != nil {
+		painter.fillColor(destLayer, *b.Color)
+	}
+}

ui/box.go

@@ -4,16 +4,18 @@ import (
 	"image"
 	"image/draw"
 	"sort"
-)
 
-type BoxProps struct {
-}
+	"candy/ui/ptr"
+)
 
 var _ Component = (*Box)(nil)
 
 type Box struct {
 	SharedComponent
-	props BoxProps
+}
+
+func (b Box) GetName() string {
+	return "Box"
 }
 
 func (b Box) Paint(painter *Painter, destLayer draw.Image, offset Offset) {
@@ -23,6 +25,9 @@ func (b Box) Paint(painter *Painter, destLayer draw.Image, offset Offset) {
 			Y: b.size.height,
 		},
 	})
+	if b.style.Background != nil {
+		b.style.Background.Paint(painter, contentLayer)
+	}
 
 	sortedChildren := Children{
 		children:       b.children,
@@ -45,33 +50,36 @@ func (b Box) Paint(painter *Painter, destLayer draw.Image, offset Offset) {
 }
 
 func (b Box) ComputeLeafSize(_ Constraints) Size {
+	padding := b.style.GetPadding()
+
 	width := 0
 	if b.style.Width != nil {
 		width = *b.style.Width
 	}
+	width += padding.GetLeft() + padding.GetRight()
 	height := 0
 	if b.style.Height != nil {
 		height = *b.style.Height
 	}
+	height += padding.GetTop() + padding.GetBottom()
 	return Size{width: width, height: height}
 }
 
-func NewBox(props *BoxProps, children []Component, style *Style) *Box {
-	if props == nil {
-		props = &BoxProps{}
-	}
+func NewBox(children []Component, style *Style) *Box {
 	if style == nil {
 		style = &Style{
-			LayoutType: BoxLayoutType,
+			LayoutType: (*LayoutType)(ptr.Int(int(BoxLayoutType))),
 		}
 	}
+	if style.LayoutType == nil {
+		style.LayoutType = (*LayoutType)(ptr.Int(int(BoxLayoutType)))
+	}
 	if children == nil {
 		children = make([]Component, 0)
 	}
 	return &Box{
-		props: *props,
 		SharedComponent: SharedComponent{
-			layout:         newLayout(style.LayoutType),
+			layout:         newLayout(*style.LayoutType),
 			style:          *style,
 			children:       children,
 			childrenOffset: []Offset{},

ui/box_layout.go

@@ -11,15 +11,18 @@ type BoxLayout struct {
 
 func (b BoxLayout) applyConstraintsToChildren(parent Component, parentConstraints Constraints) {
 	parentConstraints.maxHeight = math.MaxInt64
+	parentConstraints.minWidth = parentConstraints.maxWidth
 
 	for _, child := range parent.getChildren() {
 		applyConstraints(child, parentConstraints)
 	}
 }
 
 func (b BoxLayout) computeChildrenOffset(parent Component) []Offset {
-	nextX := 0
-	nextY := 0
+	padding := parent.getStyle().GetPadding()
+
+	nextX := padding.GetLeft()
+	nextY := padding.GetTop()
 
 	offsets := make([]Offset, 0)
 	for _, child := range parent.getChildren() {

ui/button.go

@@ -0,0 +1,74 @@
+package ui
+
+import (
+	"image/draw"
+
+	"candy/ui/ptr"
+)
+
+type ButtonProps struct {
+	Text *string
+}
+
+func (b ButtonProps) getText() string {
+	if b.Text == nil {
+		return ""
+	} else {
+		return *b.Text
+	}
+}
+
+var _ Component = (*Button)(nil)
+
+type Button struct {
+	SharedComponent
+}
+
+func (b Button) GetName() string {
+	return "Button"
+}
+
+func (b Button) Paint(painter *Painter, destLayer draw.Image, offset Offset) {
+	b.children[0].Paint(painter, destLayer, offset)
+}
+
+func NewButton(props *ButtonProps, style *Style) *Button {
+	if props == nil {
+		props = &ButtonProps{}
+	}
+	if style == nil {
+		style = &Style{
+			LayoutType: (*LayoutType)(ptr.Int(int(InlineLayoutType))),
+		}
+	}
+	if style.LayoutType == nil {
+		style.LayoutType = (*LayoutType)(ptr.Int(int(InlineLayoutType)))
+	}
+	if style.Background == nil {
+		style.Background = &Background{Color: &Color{
+			Red:   87,
+			Green: 37,
+			Blue:  229,
+			Alpha: 255,
+		}}
+	}
+	if style.Padding == nil {
+		style.Padding = &EdgeSpacing{
+			Top:    ptr.Int(6),
+			Bottom: ptr.Int(6),
+			Left:   ptr.Int(20),
+			Right:  ptr.Int(20),
+		}
+	}
+	return &Button{
+		SharedComponent: SharedComponent{
+			layout: newLayout(InlineLayoutType),
+			children: []Component{
+				NewBox([]Component{
+					NewText(&TextProps{Text: props.getText()}, style),
+				}, style),
+			},
+			childrenOffset: make([]Offset, 0),
+		},
+	}
+}

ui/component.go

@@ -8,13 +8,15 @@ import (
 )
 
 type Component interface {
+	GetName() string
 	HandleInput(in input.Input)
 	Update(timeElapsed time.Duration)
 	getLayout() layout
 	getChildren() []Component
 	ComputeLeafSize(constraints Constraints) Size
 	getSize() Size
 	setSize(size Size)
+	getStyle() Style
 	getChildrenOffset() []Offset
 	setChildrenOffset(childrenOffsets []Offset)
 	Paint(painter *Painter, destLayer draw.Image, offset Offset)
@@ -39,7 +41,7 @@ type SharedComponent struct {
 	children       []Component
 }
 
-func (s SharedComponent) HandleInput(in input.Input) {
+func (s SharedComponent) HandleInput(_ input.Input) {
 	return
 }
 
@@ -69,6 +71,10 @@ func (s *SharedComponent) setSize(size Size) {
 	s.size = size
 }
 
+func (s SharedComponent) getStyle() Style {
+	return s.style
+}
+
 func (s *SharedComponent) setChildrenOffset(childrenOffsets []Offset) {
 	s.childrenOffset = childrenOffsets
 }

ui/constraint.go

@@ -21,7 +21,6 @@ func applyConstraints(component Component, constraints Constraints) {
 		component.setSize(component.ComputeLeafSize(constraints))
 		return
 	}
-
 	layout := component.getLayout()
 	layout.applyConstraintsToChildren(component, constraints)
 	component.setChildrenOffset(layout.computeChildrenOffset(component))

ui/edgespacing.go

@@ -0,0 +1,49 @@
+package ui
+
+type EdgeSpacing struct {
+	All    *int
+	Top    *int
+	Bottom *int
+	Left   *int
+	Right  *int
+}
+
+func (e EdgeSpacing) GetTop() int {
+	if e.Top != nil {
+		return *e.Top
+	} else if e.All != nil {
+		return *e.All
+	} else {
+		return 0
+	}
+}
+
+func (e EdgeSpacing) GetBottom() int {
+	if e.Bottom != nil {
+		return *e.Bottom
+	} else if e.All != nil {
+		return *e.All
+	} else {
+		return 0
+	}
+}
+
+func (e EdgeSpacing) GetLeft() int {
+	if e.Left != nil {
+		return *e.Left
+	} else if e.All != nil {
+		return *e.All
+	} else {
+		return 0
+	}
+}
+
+func (e EdgeSpacing) GetRight() int {
+	if e.Right != nil {
+		return *e.Right
+	} else if e.All != nil {
+		return *e.All
+	} else {
+		return 0
+	}
+}

ui/example/app.go

@@ -3,6 +3,7 @@ package main
 import (
 	"candy/assets"
 	"candy/ui"
+	"candy/ui/ptr"
 )
 
 var _ ui.Component = (*app)(nil)
@@ -12,7 +13,11 @@ type app struct {
 }
 
 func newApp(assets *assets.Assets) *app {
-	return &app{ui.NewBox(nil, []ui.Component{
+	return &app{ui.NewBox([]ui.Component{
+		ui.NewButton(
+			&ui.ButtonProps{Text: ptr.String("Click")},
+			nil,
+		),
 		ui.NewText(&ui.TextProps{Text: `
 I guess we could discuss the implications of the phrase "meant to be."
 That is if we wanted to drown ourselves in a sea of backwardly referential 
@@ -22,12 +27,12 @@ seems to be, and that none of us is actually meant to be doing anything at all.
 But that's my existential underpants underpinnings showing. It's the way the 
 cookie crumbles. And now I want a cookie.
 `}, &ui.Style{FontStyle: ui.FontStyle{
-			Family:     "Source Code Pro",
-			Weight:     "ExtraLight",
-			Italic:     false,
-			Size:       20,
-			LineHeight: 24,
-			Color: ui.Color{
+			Family:     ptr.String("Source Code Pro"),
+			Weight:     ptr.String("ExtraLight"),
+			Italic:     ptr.Bool(false),
+			Size:       ptr.Int(20),
+			LineHeight: ptr.Int(24),
+			Color: &ui.Color{
 				Red:   255,
 				Green: 255,
 				Blue:  255,

ui/image.go

@@ -20,6 +20,10 @@ type Image struct {
 	image  image.Image
 }
 
+func (i *Image) GetName() string {
+	return "Image"
+}
+
 func (i *Image) Paint(painter *Painter, destLayer draw.Image, offset Offset) {
 	if i.image == nil {
 		return

ui/inline_layout.go

@@ -0,0 +1,50 @@
+package ui
+
+import (
+	"math"
+)
+
+var _ layout = (*InlineLayout)(nil)
+
+type InlineLayout struct {
+	BoxLayout
+}
+
+func (b InlineLayout) applyConstraintsToChildren(parent Component, parentConstraints Constraints) {
+	parentConstraints.maxHeight = math.MaxInt64
+
+	style := parent.getStyle()
+
+	if style.Width != nil {
+		parentConstraints.maxWidth = *style.Width
+	}
+
+	for _, child := range parent.getChildren() {
+		applyConstraints(child, parentConstraints)
+	}
+}
+
+func (b InlineLayout) computeParentSize(parent Component, parentConstraints Constraints) Size {
+	height := 0
+	children := parent.getChildren()
+	length := len(children)
+
+	if length > 0 {
+		childrenOffset := parent.getChildrenOffset()
+		height = childrenOffset[length-1].y + children[length-1].getSize().height
+	}
+	style := parent.getStyle()
+
+	width := 0.0
+	if style.Width != nil {
+		width = float64(*style.Width)
+	} else {
+		for _, child := range children {
+			width = math.Max(width, float64(child.getSize().width))
+		}
+	}
+	padding := parent.getStyle().GetPadding()
+	fullWidth := int(width) + padding.GetLeft() + padding.GetRight()
+	fullHeight := height + padding.GetBottom()
+	return Size{width: fullWidth, height: fullHeight}
+}