From 570853890e2a6c0b42eb967d38358959f4873926 Mon Sep 17 00:00:00 2001 From: Sasha Koshka Date: Tue, 4 Apr 2023 16:39:12 -0400 Subject: [PATCH] DocumentContainer now supports inlining elements --- elements/containers/document.go | 37 +++++++++++++++++++++++----- elements/containers/table.go | 4 ++- examples/documentContainer/main.go | 39 ++++++++++++++++-------------- 3 files changed, 55 insertions(+), 25 deletions(-) diff --git a/elements/containers/document.go b/elements/containers/document.go index cf46b49..992f63d 100644 --- a/elements/containers/document.go +++ b/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 = diff --git a/elements/containers/table.go b/elements/containers/table.go index dd8db4c..4fe987f 100644 --- a/elements/containers/table.go +++ b/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 diff --git a/examples/documentContainer/main.go b/examples/documentContainer/main.go index 15a389e..d9cf402 100644 --- a/examples/documentContainer/main.go +++ b/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)