apps/gophers: switch to explicit layout methods

Signed-off-by: Elias Naur <mail@eliasnaur.com>

apps/go.mod

@@ -3,7 +3,7 @@ module gioui.org/apps
 go 1.12
 
 require (
-	gioui.org/ui v0.0.0-20190516173247-00cb158247fe
+	gioui.org/ui v0.0.0-20190530193900-9b3429d6da91
 	github.com/google/go-github/v24 v24.0.1
 	golang.org/x/exp v0.0.0-20190321205749-f0864edee7f3
 	golang.org/x/image v0.0.0-20190321063152-3fc05d484e9f

apps/gophers/main.go

@@ -215,15 +215,15 @@ func (a *App) run() error {
 				a.cfg = e.Config
 				a.faces.Cfg = a.cfg
 				cs := layout.ExactConstraints(a.w.Size())
-				a.W(ops, cs)
+				a.Layout(ops, cs)
 				if a.w.Profiling {
-					layout.Align{
+					al := layout.Align{Alignment: layout.NE}
-						Alignment: layout.NE,
+					cs := al.Begin(ops, cs)
-						C: layout.Insets{
+					in := layout.Insets{Top: a.cfg.Dp(16)}
-							Top: a.cfg.Dp(16),
+					cs = in.Begin(ops, cs)
-							C:   text.Label{Src: textColor, Face: a.face(fonts.mono, 8), Text: a.w.Timings()}.W,
+					dims := text.Label{Src: textColor, Face: a.face(fonts.mono, 8), Text: a.w.Timings()}.Layout(ops, cs)
-						}.W,
+					dims = in.End(ops, dims)
-					}.W(ops, cs)
+					al.End(ops, dims)
 				}
 				a.w.Draw(ops)
 				a.w.SetTextInput(a.kqueue.Frame(ops))
@@ -376,12 +376,12 @@ func (a *App) face(f *sfnt.Font, size float32) text.Face {
 	return a.faces.For(f, ui.Sp(size))
 }
 
-func (a *App) W(ops *ui.Ops, cs layout.Constraints) layout.Dimens {
+func (a *App) Layout(ops *ui.Ops, cs layout.Constraints) layout.Dimens {
 	if a.selectedUser == nil {
 		return a.layoutUsers(ops, cs)
 	} else {
 		a.selectedUser.Update(a.cfg, a.pqueue)
-		return a.selectedUser.W(ops, cs)
+		return a.selectedUser.Layout(ops, cs)
 	}
 }
 
@@ -402,7 +402,7 @@ func (up *userPage) Update(cfg *ui.Config, pqueue pointer.Events) {
 	up.commitsList.Scroll(up.cfg, pqueue)
 }
 
-func (up *userPage) W(ops *ui.Ops, cs layout.Constraints) layout.Dimens {
+func (up *userPage) Layout(ops *ui.Ops, cs layout.Constraints) layout.Dimens {
 	l := up.commitsList
 	if l.Dragging() {
 		key.OpHideInput{}.Add(ops)
@@ -412,13 +412,15 @@ func (up *userPage) W(ops *ui.Ops, cs layout.Constraints) layout.Dimens {
 		up.commits = commits
 	default:
 	}
-	for i, ok := l.Init(ops, cs, len(up.commits)); ok; i, ok = l.Index() {
+	l.Init(cs, len(up.commits))
-		l.Elem(func(ops *ui.Ops, cs layout.Constraints) layout.Dimens {
+	for {
-			return up.commit(ops, cs, i)
+		i, cs, ok := l.Next(ops)
-		})
+		if !ok {
+			break
+		}
+		l.End(ops, up.commit(ops, cs, i))
 	}
-	dims := l.Layout()
+	return l.Layout(ops)
-	return dims
 }
 
 func (up *userPage) commit(ops *ui.Ops, cs layout.Constraints, index int) layout.Dimens {
@@ -426,19 +428,25 @@ func (up *userPage) commit(ops *ui.Ops, cs layout.Constraints, index int) layout
 	c := up.cfg
 	msg := up.commits[index].GetMessage()
 	label := text.Label{Src: textColor, Face: up.faces.For(fonts.regular, ui.Sp(12)), Text: msg}
-	return layout.Insets{
+	in := layout.Insets{Top: c.Dp(16), Right: c.Dp(8), Left: c.Dp(8)}
-		Top: c.Dp(16), Right: c.Dp(8), Left: c.Dp(8),
+	cs = in.Begin(ops, cs)
-		C: func(ops *ui.Ops, cs layout.Constraints) layout.Dimens {
+	f := layout.Flex{Axis: layout.Horizontal, MainAxisAlignment: layout.Start, CrossAxisAlignment: layout.Start}
-			f := layout.Flex{Constraints: cs, Axis: layout.Horizontal, MainAxisAlignment: layout.Start, CrossAxisAlignment: layout.Start}
+	f.Init(cs)
-			return f.Layout(ops,
+	cs = f.Rigid(ops)
-				f.Rigid(ops, func(ops *ui.Ops, cs layout.Constraints) layout.Dimens {
+	sz := c.Dp(48)
-					sz := c.Dp(48)
+	cc := clipCircle{}
-					return clipCircle(ops, cs, layout.Sized{Width: sz, Height: sz, C: widget.Image{Src: u.avatar, Rect: u.avatar.Bounds()}.W}.W)
+	cs = cc.Begin(ops, cs)
-				}),
+	dims := widget.Image{Src: u.avatar, Rect: u.avatar.Bounds()}.Layout(ops, layout.Sized{Width: sz, Height: sz}.Constrain(cs))
-				f.Flexible(ops, 1, layout.Fit, layout.Insets{Left: c.Dp(8), C: label.W}.W),
+	dims = cc.End(ops, dims)
-			)
+	c1 := f.End(ops, dims)
-		},
+	cs = f.Flexible(ops, 1, layout.Fit)
-	}.W(ops, cs)
+	in = layout.Insets{Left: c.Dp(8)}
+	cs = in.Begin(ops, cs)
+	dims = label.Layout(ops, cs)
+	dims = in.End(ops, dims)
+	c2 := f.End(ops, dims)
+	dims = f.Layout(ops, c1, c2)
+	return in.End(ops, dims)
 }
 
 func (up *userPage) fetchCommits(ctx context.Context) {
@@ -465,44 +473,60 @@ func (up *userPage) fetchCommits(ctx context.Context) {
 func (a *App) layoutUsers(ops *ui.Ops, cs layout.Constraints) layout.Dimens {
 	c := a.cfg
 	a.fab.Update(c, a.pqueue)
-	st := layout.Stack{Constraints: cs, Alignment: layout.Center}
-	c2 := st.Rigid(ops, layout.Align{
-		Alignment: layout.SE,
-		C: layout.EqualInsets(
-			c.Dp(16),
-			a.fab.W,
-		).W,
-	}.W)
 	a.edit.Update(c, a.pqueue, a.kqueue)
 	a.edit2.Update(c, a.pqueue, a.kqueue)
-	return st.Layout(ops,
+	st := layout.Stack{Alignment: layout.Center}
-		st.Expand(ops, func(ops *ui.Ops, cs layout.Constraints) layout.Dimens {
+	st.Init(cs)
-			f := layout.Flex{Constraints: cs, Axis: layout.Vertical, MainAxisAlignment: layout.Start, CrossAxisAlignment: layout.Stretch}
+	cs = st.Rigid(ops)
-			return f.Layout(ops,
+	al := layout.Align{Alignment: layout.SE}
-				f.Rigid(ops, layout.EqualInsets(
+	in := layout.EqualInsets(c.Dp(16))
-					c.Dp(16),
+	cs = in.Begin(ops, al.Begin(ops, cs))
-					layout.Sized{Width: 0, Height: c.Dp(200), C: a.edit.W}.W,
+	dims := a.fab.Layout(ops, cs)
-				).W),
+	dims = al.End(ops, in.End(ops, dims))
-				f.Rigid(ops, layout.Insets{
+	c2 := st.End(ops, dims)
-					Bottom: c.Dp(16), Left: c.Dp(16), Right: c.Dp(16),
+
-					C: a.edit2.W,
+	cs = st.Expand(ops)
-				}.W),
+	{
-				f.Rigid(ops, func(ops *ui.Ops, cs layout.Constraints) layout.Dimens {
+		f := layout.Flex{Axis: layout.Vertical, MainAxisAlignment: layout.Start, CrossAxisAlignment: layout.Stretch}
-					s := layout.Stack{Constraints: cs, Alignment: layout.Center}
+		f.Init(cs)
-					c := s.Rigid(ops, layout.Insets{
+
-						Top: c.Dp(16), Right: c.Dp(8), Bottom: c.Dp(8), Left: c.Dp(8),
+		cs = f.Rigid(ops)
-						C: text.Label{Src: rgb(0x888888), Face: a.face(fonts.regular, 9), Text: "GOPHERS"}.W,
+		{
-					}.W)
+			in := layout.EqualInsets(c.Dp(16))
-					return s.Layout(ops,
+			cs = layout.Sized{Height: c.Dp(200)}.Constrain(cs)
-						s.Expand(ops, fill(rgb(0xf2f2f2)).W),
+			dims = a.edit.Layout(ops, in.Begin(ops, cs))
-						c,
+			dims = in.End(ops, dims)
-					)
+		}
-				}),
+		c1 := f.End(ops, dims)
-				f.Flexible(ops, 1, layout.Fit, a.layoutContributors),
+
-			)
+		cs = f.Rigid(ops)
-		}),
+		{
-		c2,
+			in := layout.Insets{Bottom: c.Dp(16), Left: c.Dp(16), Right: c.Dp(16)}
-	)
+			dims = a.edit2.Layout(ops, in.Begin(ops, cs))
+			dims = in.End(ops, dims)
+		}
+		c2 := f.End(ops, dims)
+
+		cs = f.Rigid(ops)
+		{
+			s := layout.Stack{Alignment: layout.Center}
+			s.Init(cs)
+			cs = s.Rigid(ops)
+			in := layout.Insets{Top: c.Dp(16), Right: c.Dp(8), Bottom: c.Dp(8), Left: c.Dp(8)}
+			lbl := text.Label{Src: rgb(0x888888), Face: a.face(fonts.regular, 9), Text: "GOPHERS"}
+			dims = in.End(ops, lbl.Layout(ops, in.Begin(ops, cs)))
+			c2 := s.End(ops, dims)
+			c1 := s.End(ops, fill(rgb(0xf2f2f2)).Layout(ops, s.Expand(ops)))
+			dims = s.Layout(ops, c1, c2)
+		}
+		c3 := f.End(ops, dims)
+
+		dims = a.layoutContributors(ops, f.Flexible(ops, 1, layout.Fit))
+		c4 := f.End(ops, dims)
+		dims = f.Layout(ops, c1, c2, c3, c4)
+	}
+	c1 := st.End(ops, dims)
+	return st.Layout(ops, c1, c2)
 }
 
 func (a *ActionButton) Update(c *ui.Config, q pointer.Events) {
@@ -511,20 +535,18 @@ func (a *ActionButton) Update(c *ui.Config, q pointer.Events) {
 	a.btnClicker.Update(q)
 }
 
-func (a *ActionButton) W(ops *ui.Ops, cs layout.Constraints) layout.Dimens {
+func (a *ActionButton) Layout(ops *ui.Ops, cs layout.Constraints) layout.Dimens {
 	c := a.cfg
-	f := layout.Flex{Constraints: cs, Axis: layout.Vertical, MainAxisAlignment: layout.Start, CrossAxisAlignment: layout.End, MainAxisSize: layout.Min}
 	fabCol := brandColor
-	return f.Layout(ops,
+	f := layout.Flex{Axis: layout.Vertical, MainAxisAlignment: layout.Start, CrossAxisAlignment: layout.End, MainAxisSize: layout.Min}
-		f.Rigid(ops, layout.Insets{
+	f.Init(cs)
-			Top: c.Dp(4),
+	cs = f.Rigid(ops)
-			C: func(ops *ui.Ops, cs layout.Constraints) layout.Dimens {
+	in := layout.Insets{Top: c.Dp(4)}
-				dims := fab(ops, cs, a.sendIco.image(c), fabCol, c.Dp(56))
+	cs = in.Begin(ops, cs)
-				a.btnClicker.Op(ops, &gesture.Ellipse{dims.Size})
+	dims := fab(ops, cs, a.sendIco.image(c), fabCol, c.Dp(56))
-				return dims
+	a.btnClicker.Op(ops, &gesture.Ellipse{dims.Size})
-			},
+	dims = in.End(ops, dims)
-		}.W),
+	return f.Layout(ops, f.End(ops, dims))
-	)
 }
 
 func (a *App) layoutContributors(ops *ui.Ops, cs layout.Constraints) layout.Dimens {
@@ -534,12 +556,15 @@ func (a *App) layoutContributors(ops *ui.Ops, cs layout.Constraints) layout.Dime
 	if l.Dragging() {
 		key.OpHideInput{}.Add(ops)
 	}
-	for i, ok := l.Init(ops, cs, len(a.users)); ok; i, ok = l.Index() {
+	l.Init(cs, len(a.users))
-		l.Elem(func(ops *ui.Ops, cs layout.Constraints) layout.Dimens {
+	for {
-			return a.user(ops, cs, c, i)
+		i, cs, ok := l.Next(ops)
-		})
+		if !ok {
+			break
+		}
+		l.End(ops, a.user(ops, cs, c, i))
 	}
-	dims := l.Layout()
+	dims := l.Layout(ops)
 	return dims
 }
 
@@ -551,69 +576,86 @@ func (a *App) user(ops *ui.Ops, cs layout.Constraints, c *ui.Config, index int)
 			a.selectedUser = newUserPage(a.ctx, u, a.w.Redraw, a.faces)
 		}
 	}
-	elem := layout.Flex{Constraints: cs, Axis: layout.Vertical, MainAxisAlignment: layout.Start, CrossAxisAlignment: layout.Start}
+	elem := layout.Flex{Axis: layout.Vertical, MainAxisAlignment: layout.Start, CrossAxisAlignment: layout.Start}
-	return elem.Layout(ops,
+	elem.Init(cs)
-		elem.Rigid(ops, func(ops *ui.Ops, cs layout.Constraints) layout.Dimens {
+	cs = elem.Rigid(ops)
-			dims := layout.EqualInsets(
+	var dims layout.Dimens
-				c.Dp(8),
+	{
-				func(ops *ui.Ops, cs layout.Constraints) layout.Dimens {
+		in := layout.EqualInsets(c.Dp(8))
-					f := centerRowOpts(cs)
+		cs = in.Begin(ops, cs)
-					return f.Layout(ops,
+		f := centerRowOpts()
-						f.Rigid(ops, layout.Insets{Right: c.Dp(8), C: func(ops *ui.Ops, cs layout.Constraints) layout.Dimens {
+		f.Init(cs)
-							sz := c.Dp(48)
+		cs = f.Rigid(ops)
-							return clipCircle(ops, cs, layout.Sized{Width: sz, Height: sz, C: widget.Image{Src: u.avatar, Rect: u.avatar.Bounds()}.W}.W)
+		{
-						}}.W),
+			in := layout.Insets{Right: c.Dp(8)}
-						f.Rigid(ops, func(ops *ui.Ops, cs layout.Constraints) layout.Dimens {
+			cc := clipCircle{}
-							f := column(cs)
+			cs = cc.Begin(ops, in.Begin(ops, cs))
-							return f.Layout(ops,
+			dims = widget.Image{Src: u.avatar, Rect: u.avatar.Bounds()}.Layout(ops, layout.Sized{Width: c.Dp(48), Height: c.Dp(48)}.Constrain(cs))
-								f.Rigid(ops, func(ops *ui.Ops, cs layout.Constraints) layout.Dimens {
+			dims = in.End(ops, cc.End(ops, dims))
-									f := baseline(cs)
+		}
-									return f.Layout(ops,
+		c1 := f.End(ops, dims)
-										f.Rigid(ops, text.Label{Src: textColor, Face: a.face(fonts.regular, 11), Text: u.name}.W),
+		cs = f.Rigid(ops)
-										f.Rigid(ops,
+		{
-											layout.Align{
+			f := column()
-												Alignment: layout.E,
+			f.Init(cs)
-												C: layout.Insets{
+			cs = f.Rigid(ops)
-													Left: c.Dp(2),
+			{
-													C:    text.Label{Src: textColor, Face: a.face(fonts.regular, 8), Text: "3 hours ago"}.W,
+				f := baseline()
-												}.W,
+				f.Init(cs)
-											}.W,
+				cs = f.Rigid(ops)
-										),
+				dims = text.Label{Src: textColor, Face: a.face(fonts.regular, 11), Text: u.name}.Layout(ops, cs)
-									)
+				c1 := f.End(ops, dims)
-								}),
+				cs = f.Rigid(ops)
-								f.Rigid(ops, layout.Insets{
+				al := layout.Align{Alignment: layout.E}
-									Top: c.Dp(4),
+				in := layout.Insets{Left: c.Dp(2)}
-									C:   text.Label{Src: tertTextColor, Face: a.face(fonts.regular, 10), Text: u.company}.W,
+				cs = in.Begin(ops, al.Begin(ops, cs))
-								}.W),
+				dims = text.Label{Src: textColor, Face: a.face(fonts.regular, 8), Text: "3 hours ago"}.Layout(ops, cs)
-							)
+				dims = al.End(ops, in.End(ops, dims))
-						}),
+				c2 := f.End(ops, dims)
-					)
+				dims = f.Layout(ops, c1, c2)
-				},
+			}
-			).W(ops, cs)
+			c1 := f.End(ops, dims)
-			click.Op(ops, &gesture.Rect{dims.Size})
+			cs = f.Rigid(ops)
-			return dims
+			in := layout.Insets{Top: c.Dp(4)}
-		}))
+			cs = in.Begin(ops, cs)
+			dims = text.Label{Src: tertTextColor, Face: a.face(fonts.regular, 10), Text: u.company}.Layout(ops, cs)
+			dims = in.End(ops, dims)
+			c2 := f.End(ops, dims)
+			dims = f.Layout(ops, c1, c2)
+		}
+		c2 := f.End(ops, dims)
+		dims = f.Layout(ops, c1, c2)
+		dims = in.End(ops, dims)
+		click.Op(ops, &gesture.Rect{dims.Size})
+	}
+	c1 := elem.End(ops, dims)
+	return elem.Layout(ops, c1)
 }
 
 func fill(img image.Image) widget.Image {
 	return widget.Image{Src: img, Rect: image.Rectangle{Max: image.Point{X: 1, Y: 1}}}
 }
 
-func column(cs layout.Constraints) layout.Flex {
+func column() layout.Flex {
-	return layout.Flex{Constraints: cs, Axis: layout.Vertical, MainAxisAlignment: layout.Start, CrossAxisAlignment: layout.Start}
+	return layout.Flex{Axis: layout.Vertical, MainAxisAlignment: layout.Start, CrossAxisAlignment: layout.Start}
 }
 
-func centerRowOpts(cs layout.Constraints) layout.Flex {
+func centerRowOpts() layout.Flex {
-	return layout.Flex{Constraints: cs, Axis: layout.Horizontal, MainAxisAlignment: layout.Start, CrossAxisAlignment: layout.Center, MainAxisSize: layout.Min}
+	return layout.Flex{Axis: layout.Horizontal, MainAxisAlignment: layout.Start, CrossAxisAlignment: layout.Center, MainAxisSize: layout.Min}
 }
 
-func baseline(cs layout.Constraints) layout.Flex {
+func baseline() layout.Flex {
-	return layout.Flex{Constraints: cs, Axis: layout.Horizontal, CrossAxisAlignment: layout.Baseline, MainAxisSize: layout.Min}
+	return layout.Flex{Axis: layout.Horizontal, CrossAxisAlignment: layout.Baseline, MainAxisSize: layout.Min}
 }
 
-func clipCircle(ops *ui.Ops, cs layout.Constraints, w layout.Widget) layout.Dimens {
+type clipCircle struct{}
+
+func (c *clipCircle) Begin(ops *ui.Ops, cs layout.Constraints) layout.Constraints {
 	ops.Begin()
-	dims := w(ops, cs)
+	return cs
+}
+
+func (c *clipCircle) End(ops *ui.Ops, dims layout.Dimens) layout.Dimens {
 	block := ops.End()
 	max := dims.Size.X
 	if dy := dims.Size.Y; dy > max {