Check widget: Only respond to hover and tap over the checkbox or label

widget/check.go

@@ -12,103 +12,6 @@ import (
 	"fyne.io/fyne/v2/theme"
 )
 
-type checkRenderer struct {
-	widget.BaseRenderer
-	bg, icon       *canvas.Image
-	label          *canvas.Text
-	focusIndicator *canvas.Circle
-	check          *Check
-}
-
-// MinSize calculates the minimum size of a check.
-// This is based on the contained text, the check icon and a standard amount of padding added.
-func (c *checkRenderer) MinSize() fyne.Size {
-	pad4 := theme.InnerPadding() * 2
-	min := c.label.MinSize().Add(fyne.NewSize(theme.IconInlineSize()+pad4, pad4))
-	if c.check.Text != "" {
-		min.Add(fyne.NewSize(theme.Padding(), 0))
-	}
-
-	return min
-}
-
-// Layout the components of the check widget
-func (c *checkRenderer) Layout(size fyne.Size) {
-	focusIndicatorSize := fyne.NewSquareSize(theme.IconInlineSize() + theme.InnerPadding())
-	c.focusIndicator.Resize(focusIndicatorSize)
-	c.focusIndicator.Move(fyne.NewPos(theme.InputBorderSize(), (size.Height-focusIndicatorSize.Height)/2))
-
-	xOff := focusIndicatorSize.Width + theme.InputBorderSize()*2
-	labelSize := size.SubtractWidthHeight(xOff, 0)
-	c.label.Resize(labelSize)
-	c.label.Move(fyne.NewPos(xOff, 0))
-
-	iconPos := fyne.NewPos(theme.InnerPadding()/2+theme.InputBorderSize(), (size.Height-theme.IconInlineSize())/2)
-	iconSize := fyne.NewSquareSize(theme.IconInlineSize())
-	c.bg.Move(iconPos)
-	c.bg.Resize(iconSize)
-	c.icon.Resize(iconSize)
-	c.icon.Move(iconPos)
-}
-
-// applyTheme updates this Check to the current theme
-func (c *checkRenderer) applyTheme() {
-	c.label.Color = theme.ForegroundColor()
-	c.label.TextSize = theme.TextSize()
-	if c.check.disabled {
-		c.label.Color = theme.DisabledColor()
-	}
-}
-
-func (c *checkRenderer) Refresh() {
-	c.check.propertyLock.RLock()
-	c.applyTheme()
-	c.updateLabel()
-	c.updateResource()
-	c.updateFocusIndicator()
-	c.check.propertyLock.RUnlock()
-	canvas.Refresh(c.check.super())
-}
-
-func (c *checkRenderer) updateLabel() {
-	c.label.Text = c.check.Text
-}
-
-func (c *checkRenderer) updateResource() {
-	res := theme.NewThemedResource(theme.CheckButtonIcon())
-	res.ColorName = theme.ColorNameInputBorder
-	// TODO move to `theme.CheckButtonFillIcon()` when we add it in 2.4
-	bgRes := theme.NewThemedResource(fyne.CurrentApp().Settings().Theme().Icon("iconNameCheckButtonFill"))
-	bgRes.ColorName = theme.ColorNameInputBackground
-
-	if c.check.Checked {
-		res = theme.NewThemedResource(theme.CheckButtonCheckedIcon())
-		res.ColorName = theme.ColorNamePrimary
-		bgRes.ColorName = theme.ColorNameBackground
-	}
-	if c.check.disabled {
-		if c.check.Checked {
-			res = theme.NewThemedResource(theme.CheckButtonCheckedIcon())
-		}
-		res.ColorName = theme.ColorNameDisabled
-		bgRes.ColorName = theme.ColorNameBackground
-	}
-	c.icon.Resource = res
-	c.bg.Resource = bgRes
-}
-
-func (c *checkRenderer) updateFocusIndicator() {
-	if c.check.disabled {
-		c.focusIndicator.FillColor = color.Transparent
-	} else if c.check.focused {
-		c.focusIndicator.FillColor = theme.FocusColor()
-	} else if c.check.hovered {
-		c.focusIndicator.FillColor = theme.HoverColor()
-	} else {
-		c.focusIndicator.FillColor = color.Transparent
-	}
-}
-
 // Check widget has a text label and a checked (or unchecked) icon and triggers an event func when toggled
 type Check struct {
 	DisableableWidget
@@ -121,6 +24,29 @@ type Check struct {
 	hovered bool
 
 	binder basicBinder
+
+	minSize fyne.Size // cached for hover/tap position calculations
+}
+
+// NewCheck creates a new check widget with the set label and change handler
+func NewCheck(label string, changed func(bool)) *Check {
+	c := &Check{
+		Text:      label,
+		OnChanged: changed,
+	}
+
+	c.ExtendBaseWidget(c)
+	return c
+}
+
+// NewCheckWithData returns a check widget connected with the specified data source.
+//
+// Since: 2.0
+func NewCheckWithData(label string, data binding.Bool) *Check {
+	check := NewCheck(label, nil)
+	check.Bind(data)
+
+	return check
 }
 
 // Bind connects the specified data source to this Check.
@@ -167,42 +93,65 @@ func (c *Check) Hide() {
 }
 
 // MouseIn is called when a desktop pointer enters the widget
-func (c *Check) MouseIn(*desktop.MouseEvent) {
-	if c.Disabled() {
-		return
-	}
-	c.hovered = true
-	c.Refresh()
+func (c *Check) MouseIn(me *desktop.MouseEvent) {
+	c.MouseMoved(me)
 }
 
 // MouseOut is called when a desktop pointer exits the widget
 func (c *Check) MouseOut() {
-	c.hovered = false
-	c.Refresh()
+	if c.hovered {
+		c.hovered = false
+		c.Refresh()
+	}
 }
 
 // MouseMoved is called when a desktop pointer hovers over the widget
-func (c *Check) MouseMoved(*desktop.MouseEvent) {
+func (c *Check) MouseMoved(me *desktop.MouseEvent) {
+	if c.Disabled() {
+		return
+	}
+
+	oldHovered := c.hovered
+	if c.minSize.Width == 0 && c.minSize.Height == 0 {
+		c.hovered = true
+	} else if me.Position.X <= c.minSize.Width && me.Position.Y <= c.minSize.Height {
+		c.hovered = true
+	} else {
+		// mouse outside the active area of the widget
+		c.hovered = false
+	}
+
+	if oldHovered != c.hovered {
+		c.Refresh()
+	}
 }
 
 // Tapped is called when a pointer tapped event is captured and triggers any change handler
-func (c *Check) Tapped(*fyne.PointEvent) {
+func (c *Check) Tapped(pe *fyne.PointEvent) {
+	if c.Disabled() {
+		return
+	}
+	if c.minSize.Height > 0 && c.minSize.Width > 0 &&
+		(pe.Position.X > c.minSize.Width || pe.Position.Y > c.minSize.Height) {
+		// tapped outside the active area of the widget
+		return
+	}
+
 	if !c.focused && !fyne.CurrentDevice().IsMobile() {
 		impl := c.super()
 
 		if c := fyne.CurrentApp().Driver().CanvasForObject(impl); c != nil {
 			c.Focus(impl.(fyne.Focusable))
 		}
 	}
-	if !c.Disabled() {
-		c.SetChecked(!c.Checked)
-	}
+	c.SetChecked(!c.Checked)
 }
 
 // MinSize returns the size that this widget should not shrink below
 func (c *Check) MinSize() fyne.Size {
 	c.ExtendBaseWidget(c)
-	return c.BaseWidget.MinSize()
+	c.minSize = c.BaseWidget.MinSize()
+	return c.minSize
 }
 
 // CreateRenderer is a private method to Fyne which links this widget to its renderer
@@ -233,27 +182,6 @@ func (c *Check) CreateRenderer() fyne.WidgetRenderer {
 	return r
 }
 
-// NewCheck creates a new check widget with the set label and change handler
-func NewCheck(label string, changed func(bool)) *Check {
-	c := &Check{
-		Text:      label,
-		OnChanged: changed,
-	}
-
-	c.ExtendBaseWidget(c)
-	return c
-}
-
-// NewCheckWithData returns a check widget connected with the specified data source.
-//
-// Since: 2.0
-func NewCheckWithData(label string, data binding.Bool) *Check {
-	check := NewCheck(label, nil)
-	check.Bind(data)
-
-	return check
-}
-
 // FocusGained is called when the Check has been given focus.
 func (c *Check) FocusGained() {
 	if c.Disabled() {
@@ -336,3 +264,100 @@ func (c *Check) writeData(data binding.DataItem) {
 		}
 	}
 }
+
+type checkRenderer struct {
+	widget.BaseRenderer
+	bg, icon       *canvas.Image
+	label          *canvas.Text
+	focusIndicator *canvas.Circle
+	check          *Check
+}
+
+// MinSize calculates the minimum size of a check.
+// This is based on the contained text, the check icon and a standard amount of padding added.
+func (c *checkRenderer) MinSize() fyne.Size {
+	pad4 := theme.InnerPadding() * 2
+	min := c.label.MinSize().Add(fyne.NewSize(theme.IconInlineSize()+pad4, pad4))
+	if c.check.Text != "" {
+		min.Add(fyne.NewSize(theme.Padding(), 0))
+	}
+
+	return min
+}
+
+// Layout the components of the check widget
+func (c *checkRenderer) Layout(size fyne.Size) {
+	focusIndicatorSize := fyne.NewSquareSize(theme.IconInlineSize() + theme.InnerPadding())
+	c.focusIndicator.Resize(focusIndicatorSize)
+	c.focusIndicator.Move(fyne.NewPos(theme.InputBorderSize(), (size.Height-focusIndicatorSize.Height)/2))
+
+	xOff := focusIndicatorSize.Width + theme.InputBorderSize()*2
+	labelSize := size.SubtractWidthHeight(xOff, 0)
+	c.label.Resize(labelSize)
+	c.label.Move(fyne.NewPos(xOff, 0))
+
+	iconPos := fyne.NewPos(theme.InnerPadding()/2+theme.InputBorderSize(), (size.Height-theme.IconInlineSize())/2)
+	iconSize := fyne.NewSquareSize(theme.IconInlineSize())
+	c.bg.Move(iconPos)
+	c.bg.Resize(iconSize)
+	c.icon.Resize(iconSize)
+	c.icon.Move(iconPos)
+}
+
+// applyTheme updates this Check to the current theme
+func (c *checkRenderer) applyTheme() {
+	c.label.Color = theme.ForegroundColor()
+	c.label.TextSize = theme.TextSize()
+	if c.check.disabled {
+		c.label.Color = theme.DisabledColor()
+	}
+}
+
+func (c *checkRenderer) Refresh() {
+	c.check.propertyLock.RLock()
+	c.applyTheme()
+	c.updateLabel()
+	c.updateResource()
+	c.updateFocusIndicator()
+	c.check.propertyLock.RUnlock()
+	canvas.Refresh(c.check.super())
+}
+
+func (c *checkRenderer) updateLabel() {
+	c.label.Text = c.check.Text
+}
+
+func (c *checkRenderer) updateResource() {
+	res := theme.NewThemedResource(theme.CheckButtonIcon())
+	res.ColorName = theme.ColorNameInputBorder
+	// TODO move to `theme.CheckButtonFillIcon()` when we add it in 2.4
+	bgRes := theme.NewThemedResource(fyne.CurrentApp().Settings().Theme().Icon("iconNameCheckButtonFill"))
+	bgRes.ColorName = theme.ColorNameInputBackground
+
+	if c.check.Checked {
+		res = theme.NewThemedResource(theme.CheckButtonCheckedIcon())
+		res.ColorName = theme.ColorNamePrimary
+		bgRes.ColorName = theme.ColorNameBackground
+	}
+	if c.check.disabled {
+		if c.check.Checked {
+			res = theme.NewThemedResource(theme.CheckButtonCheckedIcon())
+		}
+		res.ColorName = theme.ColorNameDisabled
+		bgRes.ColorName = theme.ColorNameBackground
+	}
+	c.icon.Resource = res
+	c.bg.Resource = bgRes
+}
+
+func (c *checkRenderer) updateFocusIndicator() {
+	if c.check.disabled {
+		c.focusIndicator.FillColor = color.Transparent
+	} else if c.check.focused {
+		c.focusIndicator.FillColor = theme.FocusColor()
+	} else if c.check.hovered {
+		c.focusIndicator.FillColor = theme.HoverColor()
+	} else {
+		c.focusIndicator.FillColor = color.Transparent
+	}
+}

widget/check_internal_test.go

@@ -210,6 +210,38 @@ func TestCheck_Hovered(t *testing.T) {
 	assert.Equal(t, color.Transparent, render.focusIndicator.FillColor)
 }
 
+func TestCheck_HoveredOutsideActiveArea(t *testing.T) {
+	check := NewCheck("Test", func(on bool) {})
+	w := test.NewWindow(check)
+	defer w.Close()
+	render := test.WidgetRenderer(check).(*checkRenderer)
+
+	check.SetChecked(true)
+	assert.False(t, check.hovered)
+	assert.Equal(t, color.Transparent, render.focusIndicator.FillColor)
+
+	ms := check.MinSize()
+	check.MouseIn(&desktop.MouseEvent{PointEvent: fyne.PointEvent{
+		Position: fyne.NewPos(ms.Width+2, 1),
+	}})
+	assert.False(t, check.hovered)
+	assert.Equal(t, color.Transparent, render.focusIndicator.FillColor)
+}
+
+func TestCheck_TappedOutsideActiveArea(t *testing.T) {
+	check := NewCheck("Test", func(on bool) {})
+	w := test.NewWindow(check)
+	defer w.Close()
+
+	check.SetChecked(true)
+
+	ms := check.MinSize()
+	check.Tapped(&fyne.PointEvent{
+		Position: fyne.NewPos(ms.Width+2, 1),
+	})
+	assert.True(t, check.Checked)
+}
+
 func TestCheck_TypedRune(t *testing.T) {
 	check := NewCheck("Test", func(on bool) {})
 	w := test.NewWindow(check)