DocumentContainer now supports inlining elements

elements/containers/document.go

@@ -33,8 +33,11 @@ func NewDocumentContainer () (element *DocumentContainer) {
 	return
 }
 
-// Adopt adds a new child element to the container.
-func (element *DocumentContainer) Adopt (child tomo.Element) {
+// Adopt adds a new child element to the container. If expand is true, then the
+// element will stretch to either side of the container (much like a css block
+// element). If expand is false, the element will share a line with other inline
+// elements.
+func (element *DocumentContainer) Adopt (child tomo.Element, expand bool) {
 	// set event handlers
 	if child0, ok := child.(tomo.Themeable); ok {
 		child0.SetTheme(element.theme.Theme)
@@ -46,6 +49,7 @@ func (element *DocumentContainer) Adopt (child tomo.Element) {
 	// add child
 	element.children = append (element.children, tomo.LayoutEntry {
 		Element: child,
+		Expand:  expand,
 	})
 
 	child.SetParent(element)
@@ -302,24 +306,45 @@ func (element *DocumentContainer) doLayout () {
 	element.contentBounds = image.Rectangle { }
 
 	dot := bounds.Min.Sub(element.scroll)
+	xStart := dot.X
+	rowHeight := 0
+
+	nextLine := func () {
+		dot.X = xStart
+		dot.Y += margin.Y
+		dot.Y += rowHeight
+		rowHeight = 0
+	}
+	
 	for index, entry := range element.children {
-		if index > 0 {
-			dot.Y += margin.Y
+		if dot.X > xStart && entry.Expand {
+			nextLine()
 		}
 	
 		width, height := entry.MinimumSize()
-		if width < bounds.Dx() {
+		if width + dot.X > bounds.Dx() && !entry.Expand {
+			nextLine()
+		}
+		if width < bounds.Dx() && entry.Expand {
 			width = bounds.Dx()
 		}
 		if typedChild, ok := entry.Element.(tomo.Flexible); ok {
 			height = typedChild.FlexibleHeightFor(width)
 		}
+		if rowHeight < height {
+			rowHeight = height
+		}
 		
 		entry.Bounds.Min = dot
 		entry.Bounds.Max = image.Pt(dot.X + width, dot.Y + height)
 		element.children[index] = entry
 		element.contentBounds = element.contentBounds.Union(entry.Bounds)
-		dot.Y += height
+		
+		if entry.Expand {
+			nextLine()
+		} else {
+			dot.X += width + margin.X
+		}
 	}
 	
 	element.contentBounds =

elements/containers/table.go

@@ -11,7 +11,9 @@ import "git.tebibyte.media/sashakoshka/tomo/default/config"
 
 // TODO: using the event propagator core might not be the best idea here. we
 // should have slightly different behavior to sync the focused element with the
-// selected cell.
+// selected cell. alternatively we could pass a callback to the propagator that
+// fires when the focused child changes. this would also allow things like
+// scrolling to the focused child (for this element and others).
 
 type tableCell struct {
 	tomo.Element

examples/documentContainer/main.go

@@ -4,7 +4,6 @@ import "os"
 import "image"
 import _ "image/png"
 import "git.tebibyte.media/sashakoshka/tomo"
-import "git.tebibyte.media/sashakoshka/tomo/layouts"
 import "git.tebibyte.media/sashakoshka/tomo/elements"
 import _ "git.tebibyte.media/sashakoshka/tomo/backends/all"
 import "git.tebibyte.media/sashakoshka/tomo/elements/containers"
@@ -30,32 +29,36 @@ func run () {
 		"A document container is a vertically stacked container " +
 		"capable of properly laying out flexible elements such as " +
 		"text-wrapped labels. You can also include normal elements " +
-		"like:", true))
+		"like:", true), true)
 	document.Adopt (elements.NewButton (
-		"Buttons,"))
+		"Buttons,"), true)
 	document.Adopt (elements.NewCheckbox (
-		"Checkboxes,", true))
-	document.Adopt(elements.NewTextBox("", "And text boxes."))
-	document.Adopt (elements.NewSpacer(true))
+		"Checkboxes,", true), true)
+	document.Adopt(elements.NewTextBox("", "And text boxes."), true)
+	document.Adopt (elements.NewSpacer(true), true)
 	document.Adopt (elements.NewLabel (
 		"Document containers are meant to be placed inside of a " +
-		"ScrollContainer, like this one.", true))
+		"ScrollContainer, like this one.", true), true)
 	document.Adopt (elements.NewLabel (
 		"You could use document containers to do things like display various " +
 		"forms of hypertext (like HTML, gemtext, markdown, etc.), " +
 		"lay out a settings menu with descriptive label text between " +
-		"control groups like in iOS, or list comment or chat histories.", true))
-	document.Adopt(elements.NewImage(logo))
+		"control groups like in iOS, or list comment or chat histories.",
+		true), true)
+	document.Adopt(elements.NewImage(logo), true)
 	document.Adopt (elements.NewLabel (
-		"Oh, you're a switch? Then name all of these switches:", true))
-	for i := 0; i < 3; i ++ {
-		switchContainer := containers.NewContainer (layouts.Horizontal {
-			Gap: true,
-		})
-		for i := 0; i < 10; i ++ {
-			switchContainer.Adopt(elements.NewSwitch("", false), true)
-		}
-		document.Adopt(switchContainer)
+		"You can also choose whether each element is on its own line " +
+		"(sort of like an HTML/CSS block element) or on a line with " +
+		"other adjacent elements (like an HTML/CSS inline element).",
+		true), true)
+	document.Adopt(elements.NewButton("Just"), false)
+	document.Adopt(elements.NewButton("like"), false)
+	document.Adopt(elements.NewButton("this."), false)
+	document.Adopt (elements.NewLabel (
+		"Oh, you're a switch? Then name all of these switches:",
+		true), true)
+	for i := 0; i < 30; i ++ {
+		document.Adopt(elements.NewSwitch("", false), false)
 	}
 
 	scrollContainer.Adopt(document)