Completed documentation for Scrollbar

README.md

@@ -1,4 +1,6 @@
 # objects
 
+[![Go Reference](https://pkg.go.dev/badge/git.tebibyte.media/tomo/objects.svg)](https://pkg.go.dev/git.tebibyte.media/tomo/objects)
+
 Objects contains a standard collection of re-usable objects. All objects in this
 module visually conform to whatever the theme is set to.

button.go

@@ -4,10 +4,16 @@ import "git.tebibyte.media/tomo/tomo"
 import "git.tebibyte.media/tomo/tomo/theme"
 import "git.tebibyte.media/tomo/tomo/input"
 import "git.tebibyte.media/tomo/tomo/event"
+import "git.tebibyte.media/tomo/objects/layouts"
+
+var buttonLayout     = layouts.NewGrid([]bool { true        }, []bool { true })
+var iconButtonLayout = layouts.NewGrid([]bool { false, true }, []bool { true })
 
 // Button is a clickable button.
 type Button struct {
-	tomo.TextBox
+	tomo.ContainerBox
+	label *Label
+	icon  *Icon
 	on struct {
 		click event.FuncBroadcaster
 	}
@@ -15,16 +21,45 @@ type Button struct {
 
 // NewButton creates a new button with the specified text.
 func NewButton (text string) *Button {
-	box := &Button { TextBox: tomo.NewTextBox() }
+	box := &Button {
+		ContainerBox: tomo.NewContainerBox(),
+		label:        NewLabel(text),
+	}
 	theme.Apply(box, theme.R("objects", "Button", ""))
-	box.SetText(text)
-	box.SetAlign(tomo.AlignMiddle, tomo.AlignMiddle)
+	box.label.SetAlign(tomo.AlignMiddle, tomo.AlignMiddle)
+	box.Add(box.label)
+	box.SetLayout(buttonLayout)
+	
+	box.CaptureDND(true)
+	box.CaptureMouse(true)
+	box.CaptureScroll(true)
+	box.CaptureKeyboard(true)
+	
 	box.OnMouseUp(box.handleMouseUp)
 	box.OnKeyUp(box.handleKeyUp)
 	box.SetFocusable(true)
 	return box
 }
 
+// SetText sets the text of the button's label.
+func (this *Button) SetText (text string) {
+	this.label.SetText(text)
+}
+
+// SetIcon sets an icon for this button.
+// TODO: use tomo.Icon instead, use small size icons
+func (this *Button) SetIcon (icon *Icon) {
+	if this.icon != nil { this.Delete(this.icon) }
+	this.icon = icon
+
+	if this.icon == nil {
+		this.SetLayout(buttonLayout)
+	} else {
+		this.SetLayout(iconButtonLayout)
+		this.Insert(this.icon, this.label)
+	}
+}
+
 // OnClick specifies a function to be called when the button is clicked.
 func (this *Button) OnClick (callback func ()) event.Cookie {
 	return this.on.click.Connect(callback)

go.mod

@@ -2,6 +2,6 @@ module git.tebibyte.media/tomo/objects
 
 go 1.20
 
-require git.tebibyte.media/tomo/tomo v0.26.1
+require git.tebibyte.media/tomo/tomo v0.29.0
 
 require golang.org/x/image v0.11.0 // indirect

go.sum

@@ -1,5 +1,5 @@
-git.tebibyte.media/tomo/tomo v0.26.1 h1:V5ciRuixMYb79aAawgquFEfJ1icyEmMKBKFPWwi94NE=
-git.tebibyte.media/tomo/tomo v0.26.1/go.mod h1:C9EzepS9wjkTJjnZaPBh22YvVPyA4hbBAJVU20Rdmps=
+git.tebibyte.media/tomo/tomo v0.29.0 h1:uvdPaEQYcWH965y85SjIKwhLklnTbs+x6MRwLfdRvfo=
+git.tebibyte.media/tomo/tomo v0.29.0/go.mod h1:C9EzepS9wjkTJjnZaPBh22YvVPyA4hbBAJVU20Rdmps=
 github.com/yuin/goldmark v1.4.13/go.mod h1:6yULJ656Px+3vBD8DxQVa3kxgyrAnzto9xy5taEt/CY=
 golang.org/x/crypto v0.0.0-20190308221718-c2843e01d9a2/go.mod h1:djNgcEr1/C05ACkg1iLfiJU5Ep61QUkGW8qpdssI0+w=
 golang.org/x/crypto v0.0.0-20210921155107-089bfa567519/go.mod h1:GvvjBRRGRdwPK5ydBHafDWAxML/pGHZbMvKqRZ5+Abc=

icon.go

@@ -0,0 +1,52 @@
+package objects
+
+import "image"
+import "git.tebibyte.media/tomo/tomo"
+import "git.tebibyte.media/tomo/tomo/data"
+import "git.tebibyte.media/tomo/tomo/theme"
+import "git.tebibyte.media/tomo/tomo/canvas"
+
+// Icon displays a single icon.
+type Icon struct {
+	tomo.Box
+}
+
+// NewIcon creates a new icon from an icon ID.
+func NewIcon (id theme.Icon, size theme.IconSize) *Icon {
+	this := &Icon {
+		Box: tomo.NewBox(),
+	}
+	theme.Apply(this, theme.R("objects", "Icon", size.String()))
+	this.SetTexture(id.Texture(size))
+	return this
+}
+
+// NewMimeIcon creates a new icon from a MIME type.
+func NewMimeIcon (mime data.Mime, size theme.IconSize) *Icon {
+	this := &Icon {
+		Box: tomo.NewBox(),
+	}
+	theme.Apply(this, theme.R("objects", "Icon", size.String()))
+	this.SetTexture(theme.MimeIcon(mime, size))
+	return this
+}
+
+// NewApplicationIcon creates a new icon from an application description.
+func NewApplicationIcon (id theme.ApplicationIcon, size theme.IconSize) *Icon {
+	this := &Icon {
+		Box: tomo.NewBox(),
+	}
+	theme.Apply(this, theme.R("objects", "Icon", size.String()))
+	this.SetTexture(id.Texture(size))
+	return this
+}
+
+func (this *Icon) SetTexture (texture canvas.Texture) {
+	this.Box.SetTexture(texture)
+	if texture == nil {
+		this.SetMinimumSize(image.Pt(0, 0))
+	} else {
+		bounds := texture.Bounds()
+		this.SetMinimumSize(bounds.Max.Sub(bounds.Min))
+	}
+}

input.go

@@ -1,5 +1,6 @@
 package objects
 
+import "image"
 import "git.tebibyte.media/tomo/tomo"
 import "git.tebibyte.media/tomo/tomo/text"
 import "git.tebibyte.media/tomo/tomo/theme"
@@ -22,7 +23,9 @@ func NewTextInput (text string) *TextInput {
 	this.SetText(text)
 	this.SetFocusable(true)
 	this.SetSelectable(true)
+	this.SetOverflow(true, false)
 	this.OnKeyDown(this.handleKeyDown)
+	this.OnScroll(this.handleScroll)
 	return this
 }
 
@@ -49,7 +52,7 @@ func (this *TextInput) handleKeyDown (key input.Key, numpad bool) {
 	word      := modifiers.Control
 	sel       := modifiers.Shift
 	changed   := false
-	
+
 	switch {
 	case key == input.KeyEnter:
 		this.on.enter.Broadcast()
@@ -84,7 +87,11 @@ func (this *TextInput) handleKeyDown (key input.Key, numpad bool) {
 		this.text, dot = text.Type(this.text, dot, rune(key))
 		changed = true
 	}
-	
+
 	this.Select(dot)
 	if changed { this.SetText(string(this.text)) }
 }
+
+func (this *TextInput) handleScroll (x, y float64) {
+	this.ScrollTo(this.ContentBounds().Min.Add(image.Pt(int(x), int(y))))
+}

scrollbar.go

@@ -0,0 +1,330 @@
+package objects
+
+import "image"
+import "git.tebibyte.media/tomo/tomo"
+import "git.tebibyte.media/tomo/tomo/theme"
+import "git.tebibyte.media/tomo/tomo/input"
+import "git.tebibyte.media/tomo/tomo/event"
+
+// Scrollbar is a special type of slider that can control the scroll of any
+// overflowing ContainerBox.
+type Scrollbar struct {
+	tomo.ContainerBox
+	handle     *SliderHandle
+	layout     scrollbarLayout
+	dragging   bool
+	dragOffset image.Point
+
+	linkCookie event.Cookie
+
+	on struct {
+		valueChange event.FuncBroadcaster
+	}
+}
+
+func newScrollbar (orient string) *Scrollbar {
+	this := &Scrollbar {
+		ContainerBox: tomo.NewContainerBox(),
+		handle: &SliderHandle {
+			Box: tomo.NewBox(),
+		},
+		layout: scrollbarLayout {
+			vertical: orient == "vertical",
+		},
+	}
+
+	this.Add(this.handle)
+	this.SetFocusable(true)
+
+	this.CaptureDND(true)
+	this.CaptureMouse(true)
+	this.CaptureScroll(true)
+	this.CaptureKeyboard(true)
+
+	this.OnKeyDown(this.handleKeyDown)
+	this.OnMouseDown(this.handleMouseDown)
+	this.OnMouseUp(this.handleMouseUp)
+	this.OnMouseMove(this.handleMouseMove)
+	this.OnScroll(this.handleScroll)
+	theme.Apply(this.handle, theme.R("objects", "SliderHandle", orient))
+	theme.Apply(this,        theme.R("objects", "Slider", orient))
+	return this
+}
+
+// NewVerticalScrollbar creates a new vertical scrollbar.
+func NewVerticalScrollbar () *Scrollbar {
+	return newScrollbar("vertical")
+}
+
+// NewHorizontalScrollbar creates a new horizontal scrollbar.
+func NewHorizontalScrollbar () *Scrollbar {
+	return newScrollbar("horizontal")
+}
+
+// Link assigns this scrollbar to a ContentBox. Closing the returned cookie will
+// unlink it.
+func (this *Scrollbar) Link (box tomo.ContentBox) event.Cookie {
+	this.layout.linked = box
+	this.linkCookie = this.newLinkCookie (
+		box.OnContentBoundsChange(this.handleLinkedContentBoundsChange))
+	this.SetLayout(this.layout)
+	return this.linkCookie
+}
+
+func (this *Scrollbar) handleLinkedContentBoundsChange () {
+	if this.layout.linked == nil { return }
+	previousValue := this.layout.value
+	trackLength := this.layout.contentLength() - this.layout.viewportLength()
+	if trackLength == 0 {
+		this.layout.value = 0
+	} else {
+		this.layout.value = this.layout.contentPos() / trackLength
+	}
+	this.SetLayout(this.layout)
+	if this.layout.value != previousValue {
+		this.on.valueChange.Broadcast()
+	}
+}
+
+// SetValue sets the value of the scrollbar between 0 and 1, where 0 is scrolled
+// all the way to the left/top, and 1 is scrolled all the way to the
+// right/bottom.
+func (this *Scrollbar) SetValue (value float64) {
+	if this.layout.linked == nil { return }
+	if value > 1 { value = 1 }
+	if value < 0 { value = 0 }
+	
+	trackLength := this.layout.contentLength() - this.layout.viewportLength()
+	position    := trackLength * value
+	point       := this.layout.linked.ContentBounds().Min
+	if this.layout.vertical {
+		point.Y = int(position)
+	} else {
+		point.X = int(position)
+	}
+	this.layout.linked.ScrollTo(point)
+	
+}
+
+// Value returns the value of the scrollbar between 0 and 1 where 0 is scrolled
+// all the way to the left/top, and 1 is scrolled all the way to the
+// right/bottom.
+func (this *Scrollbar) Value () float64 {
+	if this.layout.linked == nil { return 0 }
+	return this.layout.value
+}
+
+// OnValueChange specifies a function to be called when the position of the
+// scrollbar changes.
+func (this *Scrollbar) OnValueChange (callback func ()) event.Cookie {
+	return this.on.valueChange.Connect(callback)
+}
+
+func (this *Scrollbar) handleKeyDown (key input.Key, numpad bool) {
+	var increment float64; if this.layout.vertical {
+		increment = -0.05
+	} else {
+		increment = 0.05
+	}
+
+	switch key {
+	case input.KeyUp, input.KeyLeft:
+		if this.Modifiers().Alt {
+			this.SetValue(0)
+		} else {
+			this.SetValue(this.Value() - increment)
+		}
+	case input.KeyDown, input.KeyRight:
+		if this.Modifiers().Alt {
+			this.SetValue(1)
+		} else {
+			this.SetValue(this.Value() + increment)
+		}
+	case input.KeyHome:
+		this.SetValue(0)
+	case input.KeyEnd:
+		this.SetValue(1)
+	}
+}
+
+func (this *Scrollbar) handleMouseDown (button input.Button) {
+	pointer := this.MousePosition()
+	handle  := this.handle.Bounds()
+
+	within := pointer.In(handle)
+	var above bool; if this.layout.vertical {
+		above = pointer.Y < handle.Min.Y + handle.Dy() / 2
+	} else {
+		above = pointer.X < handle.Min.X + handle.Dx() / 2
+	}
+
+	switch button {
+	case input.ButtonLeft:
+		if within {
+			this.dragging   = true
+			this.dragOffset =
+				pointer.Sub(this.handle.Bounds().Min).
+				Add(this.InnerBounds().Min)
+			this.drag()
+		} else {
+			this.dragOffset = this.fallbackDragOffset()
+			this.dragging   = true
+			this.drag()
+		}
+	case input.ButtonMiddle:
+		if above {
+			this.SetValue(0)
+		} else {
+			this.SetValue(1)
+		}
+	case input.ButtonRight:
+		if above {
+			this.SetValue(this.Value() - 0.05)
+		} else {
+			this.SetValue(this.Value() + 0.05)
+		}
+	}
+}
+
+func (this *Scrollbar) handleMouseUp (button input.Button) {
+	if button != input.ButtonLeft || !this.dragging { return }
+	this.dragging = false
+}
+
+func (this *Scrollbar) handleMouseMove () {
+	if !this.dragging { return }
+	this.drag()
+}
+
+func (this *Scrollbar) handleScroll (x, y float64) {
+	if this.layout.linked == nil { return }
+	this.layout.linked.ScrollTo (
+		this.layout.linked.ContentBounds().Min.
+		Add(image.Pt(int(x), int(y))))
+}
+
+func (this *Scrollbar) drag () {
+	pointer := this.MousePosition().Sub(this.dragOffset)
+	gutter  := this.InnerBounds()
+	handle  := this.handle.Bounds()
+
+	if this.layout.vertical {
+		this.SetValue (
+			float64(pointer.Y) /
+			float64(gutter.Dy() - handle.Dy()))
+	} else {
+		this.SetValue (
+			float64(pointer.X) /
+			float64(gutter.Dx() - handle.Dx()))
+	}
+}
+
+func (this *Scrollbar) fallbackDragOffset () image.Point {
+	if this.layout.vertical {
+		return this.InnerBounds().Min.
+			Add(image.Pt(0, this.handle.Bounds().Dy() / 2))
+	} else {
+		return this.InnerBounds().Min.
+			Add(image.Pt(this.handle.Bounds().Dx() / 2, 0))
+	}
+}
+
+type scrollbarCookie struct {
+	owner *Scrollbar
+	subCookies []event.Cookie
+}
+
+func (this *Scrollbar) newLinkCookie (subCookies ...event.Cookie) *scrollbarCookie {
+	return &scrollbarCookie {
+		owner:      this,
+		subCookies: subCookies,
+	}
+}
+
+func (this *scrollbarCookie) Close () {
+	for _, cookie := range this.subCookies {
+		cookie.Close()
+	}
+	this.owner.layout.linked = nil
+	this.owner.SetLayout(this.owner.layout)
+}
+
+type scrollbarLayout struct {
+	vertical bool
+	value    float64
+	linked   tomo.ContentBox
+}
+
+func (scrollbarLayout) MinimumSize (hints tomo.LayoutHints, boxes []tomo.Box) image.Point {
+	if len(boxes) != 1 { return image.Pt(0, 0) }
+	return boxes[0].MinimumSize()
+}
+
+func (this scrollbarLayout) Arrange (hints tomo.LayoutHints, boxes []tomo.Box) {
+	if len(boxes) != 1 { return }
+	handle := image.Rectangle { Max: boxes[0].MinimumSize() }
+	gutter := hints.Bounds
+
+	var gutterLength float64;
+	var handleMin    float64;
+	if this.vertical {
+		gutterLength = float64(gutter.Dy())
+		handleMin    = float64(handle.Dy())
+	} else {
+		gutterLength = float64(gutter.Dx())
+		handleMin    = float64(handle.Dx())
+	}
+
+	// calculate handle length
+	handleLength := gutterLength * this.viewportContentRatio()
+	if handleLength < handleMin { handleLength = handleMin }
+	if handleLength > gutterLength { handleLength = gutterLength }
+	if this.vertical {
+		handle.Max.Y = int(handleLength)
+	} else {
+		handle.Max.X = int(handleLength)
+	}
+
+	// calculate handle position
+	handlePosition := (gutterLength - handleLength) * this.value
+	var handleOffset image.Point
+	if this.vertical {
+		handleOffset = image.Pt(0, int(handlePosition))
+	} else {
+		handleOffset = image.Pt(int(handlePosition), 0)
+	}
+	handle = handle.Add(handleOffset).Add(gutter.Min)
+	
+	// place handle
+	boxes[0].SetBounds(handle)
+	
+}
+
+func (this scrollbarLayout) viewportContentRatio () float64 {
+	if this.linked == nil { return 0 }
+	return this.viewportLength() / this.contentLength()
+}
+
+func (this scrollbarLayout) viewportLength () float64 {
+	if this.vertical {
+		return float64(this.linked.InnerBounds().Dy())
+	} else {
+		return float64(this.linked.InnerBounds().Dx())
+	}
+}
+
+func (this scrollbarLayout) contentLength () float64 {
+	if this.vertical {
+		return float64(this.linked.ContentBounds().Dy())
+	} else {
+		return float64(this.linked.ContentBounds().Dx())
+	}
+}
+
+func (this scrollbarLayout) contentPos () float64 {
+	if this.vertical {
+		return float64(this.linked.ContentBounds().Min.Y)
+	} else {
+		return float64(this.linked.ContentBounds().Min.X)
+	}
+}

separator.go

@@ -16,4 +16,3 @@ func NewSeparator () *Separator {
 	theme.Apply(this, theme.R("objects", "Separator", ""))
 	return this
 }
-

slider.go

@@ -6,20 +6,21 @@ import "git.tebibyte.media/tomo/tomo/theme"
 import "git.tebibyte.media/tomo/tomo/input"
 import "git.tebibyte.media/tomo/tomo/event"
 
-// UNDER CONSTRUCTION!
-
+// Slider is a control that selects a numeric value between 0 and 1.
 type Slider struct {
 	tomo.ContainerBox
 	handle     *SliderHandle
 	layout     sliderLayout
 	dragging   bool
 	dragOffset image.Point
-	
+
 	on struct {
 		valueChange event.FuncBroadcaster
 	}
 }
 
+// SliderHandle is a simple object that serves as a handle for sliders and
+// scrollbars. It is completely inert.
 type SliderHandle struct {
 	tomo.Box
 }
@@ -34,10 +35,15 @@ func newSlider (orient string, value float64) *Slider {
 			vertical: orient == "vertical",
 		},
 	}
-	
+
 	this.Add(this.handle)
 	this.SetFocusable(true)
-	this.SetPropagateEvents(false)
+
+	this.CaptureDND(true)
+	this.CaptureMouse(true)
+	this.CaptureScroll(true)
+	this.CaptureKeyboard(true)
+
 	this.SetValue(value)
 	this.OnKeyDown(this.handleKeyDown)
 	this.OnMouseDown(this.handleMouseDown)
@@ -48,14 +54,17 @@ func newSlider (orient string, value float64) *Slider {
 	return this
 }
 
+// NewVerticalSlider creates a new vertical slider with the specified value.
 func NewVerticalSlider (value float64) *Slider {
 	return newSlider("vertical", value)
 }
 
+// NewHorizontalSlider creates a new horizontal slider with the specified value.
 func NewHorizontalSlider (value float64) *Slider {
 	return newSlider("horizontal", value)
 }
 
+// SetValue sets the value of the slider between 0 and 1.
 func (this *Slider) SetValue (value float64) {
 	if value < 0 { value = 0 }
 	if value > 1 { value = 1 }
@@ -65,27 +74,36 @@ func (this *Slider) SetValue (value float64) {
 	this.on.valueChange.Broadcast()
 }
 
+// Value returns the value of the slider between 0 and 1.
 func (this *Slider) Value () float64 {
 	return this.layout.value
 }
 
+// OnValueChange specifies a function to be called when the slider's value
+// changes.
 func (this *Slider) OnValueChange (callback func ()) event.Cookie {
 	return this.on.valueChange.Connect(callback)
 }
 
 func (this *Slider) handleKeyDown (key input.Key, numpad bool) {
+	var increment float64; if this.layout.vertical {
+		increment = -0.05
+	} else {
+		increment = 0.05
+	}
+
 	switch key {
 	case input.KeyUp, input.KeyLeft:
 		if this.Modifiers().Alt {
 			this.SetValue(0)
 		} else {
-			this.SetValue(this.Value() - 0.05)		
+			this.SetValue(this.Value() - increment)
 		}
 	case input.KeyDown, input.KeyRight:
 		if this.Modifiers().Alt {
 			this.SetValue(1)
 		} else {
-			this.SetValue(this.Value() + 0.05)		
+			this.SetValue(this.Value() + increment)
 		}
 	case input.KeyHome:
 		this.SetValue(0)
@@ -97,16 +115,14 @@ func (this *Slider) handleKeyDown (key input.Key, numpad bool) {
 func (this *Slider) handleMouseDown (button input.Button) {
 	pointer := this.MousePosition()
 	handle  := this.handle.Bounds()
-	var above, within bool
 	
-	if pointer.In(handle) {
-		within = true
-	} else if this.layout.vertical {
-		above = pointer.Y < handle.Min.Y
+	within := pointer.In(handle)
+	var above bool; if this.layout.vertical {
+		above = pointer.Y < handle.Min.Y + handle.Dy() / 2
 	} else {
-		above = pointer.X < handle.Min.X
+		above = pointer.X < handle.Min.X + handle.Dx() / 2
 	}
-	
+
 	switch button {
 	case input.ButtonLeft:
 		if within {
@@ -152,6 +168,7 @@ func (this *Slider) drag () {
 
 	if this.layout.vertical {
 		this.SetValue (
+			1 -
 			float64(pointer.Y) /
 			float64(gutter.Dy() - handle.Dy()))
 	} else {
@@ -185,10 +202,10 @@ func (this sliderLayout) Arrange (hints tomo.LayoutHints, boxes []tomo.Box) {
 	if len(boxes) != 1 { return }
 	handle := image.Rectangle { Max: boxes[0].MinimumSize() }
 	gutter := hints.Bounds
-	
+
 	if this.vertical {
 		height := gutter.Dy() - handle.Dy()
-		offset := int(float64(height) * this.value)
+		offset := int(float64(height) * (1 - this.value))
 		handle.Max.X = gutter.Dx()
 		boxes[0].SetBounds (
 			handle.