Skip to content

Add RowWrap layout #5612

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
wants to merge 3 commits into
base: develop
Choose a base branch
from
Draft
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
88 changes: 88 additions & 0 deletions layout/rowwrap.go
Original file line number Diff line number Diff line change
@@ -0,0 +1,88 @@
package layout

import (
"fyne.io/fyne/v2"
"fyne.io/fyne/v2/theme"
)

type rowWrapLayout struct {
rowCount int
horizontalPadding float32
verticalPadding float32
}

// NewRowWrapLayout returns a layout that dynamically arranges objects
// with the same height in rows and wraps them as necessary.
//
// Object visibility is supported.
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

"Object visibility is supported" probably isn't needed, since all first-party layouts support object visibility, and as such it can just be assumed.

//
// Since: 2.7
func NewRowWrapLayout() fyne.Layout {
return &rowWrapLayout{
horizontalPadding: theme.Padding(),
verticalPadding: theme.Padding(),
}
Comment on lines +21 to +24
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Fewer theme lookups is usually better:

Suggested change
return &rowWrapLayout{
horizontalPadding: theme.Padding(),
verticalPadding: theme.Padding(),
}
padding := theme.Padding()
return &rowWrapLayout{
horizontalPadding: padding,
verticalPadding: padding,
}

}

// NewRowWrapLayoutWithCustomPadding creates a new RowWrapLayout instance
// with the specified paddings.
//
// Since: 2.7
func NewRowWrapLayoutWithCustomPadding(horizontal, vertical float32) fyne.Layout {
return &rowWrapLayout{
horizontalPadding: horizontal,
verticalPadding: vertical,
}
}

var _ fyne.Layout = (*rowWrapLayout)(nil)

// MinSize finds the smallest size that satisfies all the child objects.
// For a RowWrapLayout this is the width of the widest child
// and the height of the first child multiplied by the number of children,
// with appropriate padding between them.
func (l *rowWrapLayout) MinSize(objects []fyne.CanvasObject) fyne.Size {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

For something with wrapping like this, (and Label/RichText etc with wrapping), the behavior needed IIRC is for the MinSize returned to depend on the current size of the object. If the object hasn't been Resized (IE its size is 0, 0), then it returns the MinSize as you currently calculate it. But if it has been resized to a width >= the min width, the MinSize height is based on how many rows it needs to lay things out at the current width. Otherwise, placing it as the child of another layout will always make it take up more height than needed.

Not sure how to do this with a layout though, given that they are stateless by design. I suppose in Layout you could remeber the size in the rowWrapLayout struct, and then reference it in MinSize

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Layouts don't have to be stateless (see Border), the thing they lack is any connection to the container they are laying out.

if len(objects) == 0 {
return fyne.NewSize(0, 0)
}
rows := l.rowCount
if rows == 0 {
rows = 1
}
rowHeight := objects[0].MinSize().Height
var width float32
for _, o := range objects {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This will add sizes of invisible objects as well. Is that expected?

size := o.MinSize()
if size.Width > width {
width = size.Width
}
Comment on lines +56 to +58
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think there is a fyne.Max() function you can use here instead.

}
s := fyne.NewSize(width, rowHeight*float32(rows)+l.verticalPadding*float32(rows-1))
return s
Comment on lines +60 to +61
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Cleaner to just return directly:

Suggested change
s := fyne.NewSize(width, rowHeight*float32(rows)+l.verticalPadding*float32(rows-1))
return s
return fyne.NewSize(width, rowHeight*float32(rows)+l.verticalPadding*float32(rows-1))

}

// Layout is called to pack all child objects into a specified size.
// For RowWrapLayout this will arrange all objects into rows of equal size.
func (l *rowWrapLayout) Layout(objects []fyne.CanvasObject, containerSize fyne.Size) {
if len(objects) == 0 {
return
}
rowHeight := objects[0].MinSize().Height
pos := fyne.NewPos(0, 0)
rows := 1
for _, o := range objects {
if !o.Visible() {
continue
}
size := o.MinSize()
o.Resize(size)
w := size.Width + l.horizontalPadding
if pos.X+w > containerSize.Width {
pos = fyne.NewPos(0, float32(rows)*(rowHeight+l.verticalPadding))
rows++
}
o.Move(pos)
pos = pos.Add(fyne.NewPos(w, 0))
}
l.rowCount = rows
}
133 changes: 133 additions & 0 deletions layout/rowwrap_test.go
Original file line number Diff line number Diff line change
@@ -0,0 +1,133 @@
package layout_test

import (
"image/color"
"testing"

"fyne.io/fyne/v2"
"fyne.io/fyne/v2/canvas"
"fyne.io/fyne/v2/container"
"fyne.io/fyne/v2/layout"
"fyne.io/fyne/v2/theme"
"github.com/stretchr/testify/assert"
)

func TestRowWrapLayout_Layout(t *testing.T) {
t.Run("should arrange objects in a row and wrap overflow objects into next row", func(t *testing.T) {
// given
h := float32(10)
o1 := canvas.NewRectangle(color.Opaque)
o1.SetMinSize(fyne.NewSize(30, h))
o2 := canvas.NewRectangle(color.Opaque)
o2.SetMinSize(fyne.NewSize(80, h))
o3 := canvas.NewRectangle(color.Opaque)
o3.SetMinSize(fyne.NewSize(50, h))

containerSize := fyne.NewSize(125, 125)
container := &fyne.Container{
Objects: []fyne.CanvasObject{o1, o2, o3},
}
container.Resize(containerSize)

// when
layout.NewRowWrapLayout().Layout(container.Objects, containerSize)

// then
p := theme.Padding()
assert.Equal(t, fyne.NewPos(0, 0), o1.Position())
assert.Equal(t, fyne.NewPos(o1.Size().Width+p, 0), o2.Position())
assert.Equal(t, fyne.NewPos(0, o1.Size().Height+p), o3.Position())
})
t.Run("should do nothing when container is empty", func(t *testing.T) {
containerSize := fyne.NewSize(125, 125)
container := &fyne.Container{}
container.Resize(containerSize)

// when
layout.NewRowWrapLayout().Layout(container.Objects, containerSize)
})
t.Run("should ignore hidden objects", func(t *testing.T) {
// given
h := float32(10)
o1 := canvas.NewRectangle(color.Opaque)
o1.SetMinSize(fyne.NewSize(30, h))
o2 := canvas.NewRectangle(color.Opaque)
o2.SetMinSize(fyne.NewSize(80, h))
o2.Hide()
o3 := canvas.NewRectangle(color.Opaque)
o3.SetMinSize(fyne.NewSize(50, h))

containerSize := fyne.NewSize(125, 125)
container := &fyne.Container{
Objects: []fyne.CanvasObject{o1, o2, o3},
}
container.Resize(containerSize)

// when
layout.NewRowWrapLayout().Layout(container.Objects, containerSize)

// then
p := theme.Padding()
assert.Equal(t, fyne.NewPos(0, 0), o1.Position())
assert.Equal(t, fyne.NewPos(o1.Size().Width+p, 0), o3.Position())
})
}

func TestRowWrapLayout_MinSize(t *testing.T) {
t.Run("should return min size of single object when container has only one", func(t *testing.T) {
// given
o := canvas.NewRectangle(color.Opaque)
o.SetMinSize(fyne.NewSize(10, 10))
container := container.NewWithoutLayout(o)
layout := layout.NewRowWrapLayout()

// when/then
minSize := layout.MinSize(container.Objects)

// then
assert.Equal(t, o.MinSize(), minSize)
})
t.Run("should return size 0 when container is empty", func(t *testing.T) {
// given
container := container.NewWithoutLayout()
layout := layout.NewRowWrapLayout()

// when/then
minSize := layout.MinSize(container.Objects)

// then
assert.Equal(t, fyne.NewSize(0, 0), minSize)
})
t.Run("should initially return height of first object and width of widest object", func(t *testing.T) {
// given
h := float32(10)
o1 := canvas.NewRectangle(color.Opaque)
o1.SetMinSize(fyne.NewSize(10, h))
o2 := canvas.NewRectangle(color.Opaque)
o2.SetMinSize(fyne.NewSize(20, h))
container := container.NewWithoutLayout(o1, o2)
layout := layout.NewRowWrapLayout()

// when/then
minSize := layout.MinSize(container.Objects)

// then
assert.Equal(t, fyne.NewSize(20, h), minSize)
})
t.Run("should return height of arranged objects after layout was calculated", func(t *testing.T) {
// given
h := float32(10)
o1 := canvas.NewRectangle(color.Opaque)
o1.SetMinSize(fyne.NewSize(10, h))
o2 := canvas.NewRectangle(color.Opaque)
o2.SetMinSize(fyne.NewSize(20, h))
container := container.New(layout.NewRowWrapLayout(), o1, o2)
container.Resize(fyne.NewSize(15, 50))

// when/then
minSize := container.MinSize()

// then
assert.Equal(t, fyne.NewSize(o2.Size().Width, (o1.Size().Height*2)+theme.Padding()), minSize)
})
}
Loading