all: [API] split operation stack into per-state stacks

The op.Save and Load methods exist to support the need for
transformation, clip, pointer area state to behave as stacks. For
example, layout needs to apply an offset to its children but not
subsequent operations.

Before this change, op.Save and Load were used to save and restore the
state:

    ops := new(op.Ops)
    // Save state.
    state := op.Save(ops)
    // Apply offset.
    op.Offset(...).Add(ops)
    // Draw with offset applied.
    draw(ops)
    // Restore state.
    state.Load()

A drawback with the op.Save mechanism is that there is no direct
connection between the state change and the saving and loading of state.
This causes confusion as to when a Save/Load is needed and who is
responsible for performing them, which leads to subtle bugs and over-use
of Save/Loads.

This change gets rid of the general state stack and replaces it with
per-state stacks. There is now a stack for transformation, clip, pointer
areas, and they can only be restored by the code pushing state to them.
The example above now becomes:

    ops := new(op.Ops)
    // Push offset to the transformation stack.
    stack := op.Offset(...).Push(ops)
    // Draw with offset applied.
    draw(ops)
    // Restore state.
    stack.Pop()

For convenience, transformation also be Add'ed if the stack operation is
not required.

Simple state such as the current material no longer has a way to be
restored; it is assumed the client of a PaintOp adds their desired
material operation before it.

API change: replace op.Save/Load with explicit Push/Pop scopes for
op.TransformOps, pointer.AreaOps, clip.Ops.

To ease porting, this change retains a version of op.Save/Load that
saves and restores the transformation and clip stacks. It also retains
an Add method for clip.Op.

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

widget/material/button.go

@@ -90,7 +90,7 @@ func Clickable(gtx layout.Context, button *widget.Clickable, w layout.Widget) la
 	return layout.Stack{}.Layout(gtx,
 		layout.Expanded(button.Layout),
 		layout.Expanded(func(gtx layout.Context) layout.Dimensions {
-			clip.Rect{Max: gtx.Constraints.Min}.Add(gtx.Ops)
+			defer clip.Rect{Max: gtx.Constraints.Min}.Push(gtx.Ops).Pop()
 			for _, c := range button.History() {
 				drawInk(gtx, c)
 			}
@@ -118,10 +118,10 @@ func (b ButtonLayoutStyle) Layout(gtx layout.Context, w layout.Widget) layout.Di
 	return layout.Stack{Alignment: layout.Center}.Layout(gtx,
 		layout.Expanded(func(gtx layout.Context) layout.Dimensions {
 			rr := float32(gtx.Px(b.CornerRadius))
-			clip.UniformRRect(f32.Rectangle{Max: f32.Point{
+			defer clip.UniformRRect(f32.Rectangle{Max: f32.Point{
 				X: float32(gtx.Constraints.Min.X),
 				Y: float32(gtx.Constraints.Min.Y),
-			}}, rr).Add(gtx.Ops)
+			}}, rr).Push(gtx.Ops).Pop()
 			background := b.Background
 			switch {
 			case gtx.Queue == nil:
@@ -149,9 +149,9 @@ func (b IconButtonStyle) Layout(gtx layout.Context) layout.Dimensions {
 			sizex, sizey := gtx.Constraints.Min.X, gtx.Constraints.Min.Y
 			sizexf, sizeyf := float32(sizex), float32(sizey)
 			rr := (sizexf + sizeyf) * .25
-			clip.UniformRRect(f32.Rectangle{
+			defer clip.UniformRRect(f32.Rectangle{
 				Max: f32.Point{X: sizexf, Y: sizeyf},
-			}, rr).Add(gtx.Ops)
+			}, rr).Push(gtx.Ops).Pop()
 			background := b.Background
 			switch {
 			case gtx.Queue == nil:
@@ -178,7 +178,7 @@ func (b IconButtonStyle) Layout(gtx layout.Context) layout.Dimensions {
 			})
 		}),
 		layout.Expanded(func(gtx layout.Context) layout.Dimensions {
-			pointer.Ellipse(image.Rectangle{Max: gtx.Constraints.Min}).Add(gtx.Ops)
+			defer pointer.Ellipse(image.Rectangle{Max: gtx.Constraints.Min}).Push(gtx.Ops).Pop()
 			return b.Button.Layout(gtx)
 		}),
 	)
@@ -272,15 +272,14 @@ func drawInk(gtx layout.Context, c widget.Press) {
 	alpha := 0.7 * alphaBezier
 	const col = 0.8
 	ba, bc := byte(alpha*0xff), byte(col*0xff)
-	defer op.Save(gtx.Ops).Load()
 	rgba := f32color.MulAlpha(color.NRGBA{A: 0xff, R: bc, G: bc, B: bc}, ba)
 	ink := paint.ColorOp{Color: rgba}
 	ink.Add(gtx.Ops)
 	rr := size * .5
-	op.Offset(c.Position.Add(f32.Point{
+	defer op.Offset(c.Position.Add(f32.Point{
 		X: -rr,
 		Y: -rr,
-	})).Add(gtx.Ops)
-	clip.UniformRRect(f32.Rectangle{Max: f32.Pt(size, size)}, rr).Add(gtx.Ops)
+	})).Push(gtx.Ops).Pop()
+	defer clip.UniformRRect(f32.Rectangle{Max: f32.Pt(size, size)}, rr).Push(gtx.Ops).Pop()
 	paint.PaintOp{}.Add(gtx.Ops)
 }

widget/material/checkable.go

@@ -8,7 +8,6 @@ import (
 
 	"gioui.org/f32"
 	"gioui.org/internal/f32color"
-	"gioui.org/io/pointer"
 	"gioui.org/layout"
 	"gioui.org/op/clip"
 	"gioui.org/op/paint"
@@ -84,6 +83,5 @@ func (c *checkable) layout(gtx layout.Context, checked, hovered bool) layout.Dim
 			})
 		}),
 	)
-	pointer.Rect(image.Rectangle{Max: dims.Size}).Add(gtx.Ops)
 	return dims
 }

widget/material/checkbox.go

@@ -3,6 +3,9 @@
 package material
 
 import (
+	"image"
+
+	"gioui.org/io/pointer"
 	"gioui.org/layout"
 	"gioui.org/unit"
 	"gioui.org/widget"
@@ -32,6 +35,7 @@ func CheckBox(th *Theme, checkBox *widget.Bool, label string) CheckBoxStyle {
 // Layout updates the checkBox and displays it.
 func (c CheckBoxStyle) Layout(gtx layout.Context) layout.Dimensions {
 	dims := c.layout(gtx, c.CheckBox.Value, c.CheckBox.Hovered())
+	defer pointer.Rect(image.Rectangle{Max: dims.Size}).Push(gtx.Ops).Pop()
 	gtx.Constraints.Min = dims.Size
 	c.CheckBox.Layout(gtx)
 	return dims

widget/material/editor.go

@@ -43,7 +43,6 @@ func Editor(th *Theme, editor *widget.Editor, hint string) EditorStyle {
 }
 
 func (e EditorStyle) Layout(gtx layout.Context) layout.Dimensions {
-	defer op.Save(gtx.Ops).Load()
 	macro := op.Record(gtx.Ops)
 	paint.ColorOp{Color: e.HintColor}.Add(gtx.Ops)
 	var maxlines int

widget/material/list.go

@@ -156,16 +156,14 @@ func (s ScrollbarStyle) layout(gtx layout.Context, axis layout.Axis, viewportSta
 				Max: gtx.Constraints.Min,
 			}
 			pointerArea := pointer.Rect(area)
-			pointerArea.Add(gtx.Ops)
+			defer pointerArea.Push(gtx.Ops).Pop()
 			s.Scrollbar.AddDrag(gtx.Ops)
 
 			// Stack a normal clickable area on top of the draggable area
 			// to capture non-dragging clicks.
-			saved := op.Save(gtx.Ops)
 			pointerArea.PassThrough = true
-			pointerArea.Add(gtx.Ops)
+			defer pointerArea.Push(gtx.Ops).Pop()
 			s.Scrollbar.AddTrack(gtx.Ops)
-			saved.Load()
 
 			paint.FillShape(gtx.Ops, s.Track.Color, clip.Rect(area).Op())
 			return layout.Dimensions{}
@@ -194,9 +192,8 @@ func (s ScrollbarStyle) layout(gtx layout.Context, axis layout.Axis, viewportSta
 				radius := float32(gtx.Px(s.Indicator.CornerRadius))
 
 				// Lay out the indicator.
-				defer op.Save(gtx.Ops).Load()
 				offset := axis.Convert(image.Pt(viewStart, 0))
-				op.Offset(layout.FPt(offset)).Add(gtx.Ops)
+				defer op.Offset(layout.FPt(offset)).Push(gtx.Ops).Pop()
 				paint.FillShape(gtx.Ops, s.Indicator.Color, clip.RRect{
 					Rect: f32.Rectangle{
 						Max: indicatorDimsF,
@@ -210,7 +207,7 @@ func (s ScrollbarStyle) layout(gtx layout.Context, axis layout.Axis, viewportSta
 				// Add the indicator pointer hit area.
 				area := pointer.Rect(image.Rectangle{Max: indicatorDims})
 				area.PassThrough = true
-				area.Add(gtx.Ops)
+				defer area.Push(gtx.Ops).Pop()
 				s.Scrollbar.AddIndicator(gtx.Ops)
 
 				return layout.Dimensions{Size: axis.Convert(gtx.Constraints.Min)}

widget/material/loader.go

@@ -36,18 +36,17 @@ func (l LoaderStyle) Layout(gtx layout.Context) layout.Dimensions {
 	}
 	sz := gtx.Constraints.Constrain(image.Pt(diam, diam))
 	radius := float32(sz.X) * .5
-	defer op.Save(gtx.Ops).Load()
-	op.Offset(f32.Pt(radius, radius)).Add(gtx.Ops)
+	defer op.Offset(f32.Pt(radius, radius)).Push(gtx.Ops).Pop()
 
 	dt := float32((time.Duration(gtx.Now.UnixNano()) % (time.Second)).Seconds())
 	startAngle := dt * math.Pi * 2
 	endAngle := startAngle + math.Pi*1.5
 
-	clipLoader(gtx.Ops, startAngle, endAngle, radius)
+	defer clipLoader(gtx.Ops, startAngle, endAngle, radius).Push(gtx.Ops).Pop()
 	paint.ColorOp{
 		Color: l.Color,
 	}.Add(gtx.Ops)
-	op.Offset(f32.Pt(-radius, -radius)).Add(gtx.Ops)
+	defer op.Offset(f32.Pt(-radius, -radius)).Push(gtx.Ops).Pop()
 	paint.PaintOp{}.Add(gtx.Ops)
 	op.InvalidateOp{}.Add(gtx.Ops)
 	return layout.Dimensions{
@@ -55,7 +54,7 @@ func (l LoaderStyle) Layout(gtx layout.Context) layout.Dimensions {
 	}
 }
 
-func clipLoader(ops *op.Ops, startAngle, endAngle, radius float32) {
+func clipLoader(ops *op.Ops, startAngle, endAngle, radius float32) clip.Op {
 	const thickness = .25
 
 	var (
@@ -74,11 +73,11 @@ func clipLoader(ops *op.Ops, startAngle, endAngle, radius float32) {
 	p.Begin(ops)
 	p.Move(pen)
 	p.Arc(center, center, delta)
-	clip.Stroke{
+	return clip.Stroke{
 		Path: p.End(),
 		Style: clip.StrokeStyle{
 			Width: width,
 			Cap:   clip.FlatCap,
 		},
-	}.Op().Add(ops)
+	}.Op()
 }

widget/material/progressbar.go

@@ -36,7 +36,7 @@ func (p ProgressBarStyle) Layout(gtx layout.Context) layout.Dimensions {
 		d := image.Point{X: int(width), Y: gtx.Px(maxHeight)}
 
 		height := float32(gtx.Px(maxHeight))
-		clip.UniformRRect(f32.Rectangle{Max: f32.Pt(width, height)}, rr).Add(gtx.Ops)
+		defer clip.UniformRRect(f32.Rectangle{Max: f32.Pt(width, height)}, rr).Push(gtx.Ops).Pop()
 		paint.ColorOp{Color: color}.Add(gtx.Ops)
 		paint.PaintOp{}.Add(gtx.Ops)
 

widget/material/progresscircle.go

@@ -36,14 +36,13 @@ func (p ProgressCircleStyle) Layout(gtx layout.Context) layout.Dimensions {
 	}
 	sz := gtx.Constraints.Constrain(image.Pt(diam, diam))
 	radius := float32(sz.X) * .5
-	defer op.Save(gtx.Ops).Load()
-	op.Offset(f32.Pt(radius, radius)).Add(gtx.Ops)
+	defer op.Offset(f32.Pt(radius, radius)).Push(gtx.Ops).Pop()
 
-	clipLoader(gtx.Ops, -math.Pi/2, -math.Pi/2+math.Pi*2*p.Progress, radius)
+	defer clipLoader(gtx.Ops, -math.Pi/2, -math.Pi/2+math.Pi*2*p.Progress, radius).Push(gtx.Ops).Pop()
 	paint.ColorOp{
 		Color: p.Color,
 	}.Add(gtx.Ops)
-	op.Offset(f32.Pt(-radius, -radius)).Add(gtx.Ops)
+	defer op.Offset(f32.Pt(-radius, -radius)).Push(gtx.Ops).Pop()
 	paint.PaintOp{}.Add(gtx.Ops)
 	return layout.Dimensions{
 		Size: sz,

widget/material/radiobutton.go

@@ -3,6 +3,9 @@
 package material
 
 import (
+	"image"
+
+	"gioui.org/io/pointer"
 	"gioui.org/layout"
 	"gioui.org/unit"
 	"gioui.org/widget"
@@ -38,6 +41,7 @@ func RadioButton(th *Theme, group *widget.Enum, key, label string) RadioButtonSt
 func (r RadioButtonStyle) Layout(gtx layout.Context) layout.Dimensions {
 	hovered, hovering := r.Group.Hovered()
 	dims := r.layout(gtx, r.Group.Value == r.Key, hovering && hovered == r.Key)
+	defer pointer.Rect(image.Rectangle{Max: dims.Size}).Push(gtx.Ops).Pop()
 	gtx.Constraints.Min = dims.Size
 	r.Group.Layout(gtx, r.Key)
 	return dims

widget/material/slider.go

@@ -49,14 +49,12 @@ func (s SliderStyle) Layout(gtx layout.Context) layout.Dimensions {
 	sizeCross := max(2*thumbRadius, touchSizePx)
 	size := axis.Convert(image.Pt(sizeMain, sizeCross))
 
-	st := op.Save(gtx.Ops)
 	o := axis.Convert(image.Pt(thumbRadius, 0))
-	op.Offset(layout.FPt(o)).Add(gtx.Ops)
+	defer op.Offset(layout.FPt(o)).Push(gtx.Ops).Pop()
 	gtx.Constraints.Min = axis.Convert(image.Pt(sizeMain-2*thumbRadius, sizeCross))
 	s.Float.Layout(gtx, thumbRadius, s.Min, s.Max)
 	gtx.Constraints.Min = gtx.Constraints.Min.Add(axis.Convert(image.Pt(0, sizeCross)))
 	thumbPos := thumbRadius + int(s.Float.Pos())
-	st.Load()
 
 	color := s.Color
 	if gtx.Queue == nil {
@@ -64,24 +62,18 @@ func (s SliderStyle) Layout(gtx layout.Context) layout.Dimensions {
 	}
 
 	// Draw track before thumb.
-	st = op.Save(gtx.Ops)
 	track := image.Rectangle{
 		Min: axis.Convert(image.Pt(thumbRadius, sizeCross/2-trackWidth/2)),
 		Max: axis.Convert(image.Pt(thumbPos, sizeCross/2+trackWidth/2)),
 	}
-	clip.Rect(track).Add(gtx.Ops)
-	paint.Fill(gtx.Ops, color)
-	st.Load()
+	paint.FillShape(gtx.Ops, color, clip.Rect(track).Op())
 
 	// Draw track after thumb.
-	st = op.Save(gtx.Ops)
 	track = image.Rectangle{
 		Min: axis.Convert(image.Pt(thumbPos, axis.Convert(track.Min).Y)),
 		Max: axis.Convert(image.Pt(sizeMain-thumbRadius, axis.Convert(track.Max).Y)),
 	}
-	clip.Rect(track).Add(gtx.Ops)
-	paint.Fill(gtx.Ops, f32color.MulAlpha(color, 96))
-	st.Load()
+	paint.FillShape(gtx.Ops, f32color.MulAlpha(color, 96), clip.Rect(track).Op())
 
 	// Draw thumb.
 	pt := axis.Convert(image.Pt(thumbPos, sizeCross/2))

widget/material/switch.go

@@ -45,7 +45,6 @@ func (s SwitchStyle) Layout(gtx layout.Context) layout.Dimensions {
 	trackOff := float32(thumbSize-trackHeight) * .5
 
 	// Draw track.
-	stack := op.Save(gtx.Ops)
 	trackCorner := float32(trackHeight) / 2
 	trackRect := f32.Rectangle{Max: f32.Point{
 		X: float32(trackWidth),
@@ -59,33 +58,33 @@ func (s SwitchStyle) Layout(gtx layout.Context) layout.Dimensions {
 		col = f32color.Disabled(col)
 	}
 	trackColor := s.Color.Track
-	op.Offset(f32.Point{Y: trackOff}).Add(gtx.Ops)
-	clip.UniformRRect(trackRect, trackCorner).Add(gtx.Ops)
+	t := op.Offset(f32.Point{Y: trackOff}).Push(gtx.Ops)
+	cl := clip.UniformRRect(trackRect, trackCorner).Push(gtx.Ops)
 	paint.ColorOp{Color: trackColor}.Add(gtx.Ops)
 	paint.PaintOp{}.Add(gtx.Ops)
-	stack.Load()
+	cl.Pop()
+	t.Pop()
 
 	// Draw thumb ink.
-	stack = op.Save(gtx.Ops)
 	inkSize := gtx.Px(unit.Dp(44))
 	rr := float32(inkSize) * .5
 	inkOff := f32.Point{
 		X: float32(trackWidth)*.5 - rr,
 		Y: -rr + float32(trackHeight)*.5 + trackOff,
 	}
-	op.Offset(inkOff).Add(gtx.Ops)
+	t = op.Offset(inkOff).Push(gtx.Ops)
 	gtx.Constraints.Min = image.Pt(inkSize, inkSize)
-	clip.UniformRRect(f32.Rectangle{Max: layout.FPt(gtx.Constraints.Min)}, rr).Add(gtx.Ops)
+	cl = clip.UniformRRect(f32.Rectangle{Max: layout.FPt(gtx.Constraints.Min)}, rr).Push(gtx.Ops)
 	for _, p := range s.Switch.History() {
 		drawInk(gtx, p)
 	}
-	stack.Load()
+	cl.Pop()
+	t.Pop()
 
-	// Compute thumb offset and color.
-	stack = op.Save(gtx.Ops)
+	// Compute thumb offset.
 	if s.Switch.Value {
-		off := trackWidth - thumbSize
-		op.Offset(f32.Point{X: float32(off)}).Add(gtx.Ops)
+		xoff := float32(trackWidth - thumbSize)
+		defer op.Offset(f32.Point{X: xoff}).Push(gtx.Ops).Pop()
 	}
 
 	thumbRadius := float32(thumbSize) / 2
@@ -118,18 +117,16 @@ func (s SwitchStyle) Layout(gtx layout.Context) layout.Dimensions {
 		}.Op(gtx.Ops))
 
 	// Set up click area.
-	stack = op.Save(gtx.Ops)
 	clickSize := gtx.Px(unit.Dp(40))
 	clickOff := f32.Point{
 		X: (float32(trackWidth) - float32(clickSize)) * .5,
 		Y: (float32(trackHeight)-float32(clickSize))*.5 + trackOff,
 	}
-	op.Offset(clickOff).Add(gtx.Ops)
+	defer op.Offset(clickOff).Push(gtx.Ops).Pop()
 	sz := image.Pt(clickSize, clickSize)
-	pointer.Ellipse(image.Rectangle{Max: sz}).Add(gtx.Ops)
+	defer pointer.Ellipse(image.Rectangle{Max: sz}).Push(gtx.Ops).Pop()
 	gtx.Constraints.Min = sz
 	s.Switch.Layout(gtx)
-	stack.Load()
 
 	dims := image.Point{X: trackWidth, Y: thumbSize}
 	return layout.Dimensions{Size: dims}