Choices: components 031-040 (wip)
This commit is contained in:
54 files changed
+4253
-1
No files matched your search
@@ -0,0 +1,200 @@
|
||||
package mujica
|
||||
|
||||
import (
|
||||
"log/slog"
|
||||
"math"
|
||||
"strconv"
|
||||
|
||||
"github.com/egoist/mygo/ui"
|
||||
|
||||
"mujicaui/internal"
|
||||
"mujicaui/theme"
|
||||
)
|
||||
|
||||
// SliderMark is a tick on a slider's track, with an optional caption.
|
||||
type SliderMark struct {
|
||||
Value float64
|
||||
Label string
|
||||
}
|
||||
|
||||
// SliderOptions configure a Slider. Min and Max both zero mean 0 to 100.
|
||||
type SliderOptions struct {
|
||||
Min, Max float64
|
||||
// Step snaps the value to Min plus multiples of it; zero is continuous.
|
||||
Step float64
|
||||
Marks []SliderMark
|
||||
// ShowValue shows the value above the thumb while hovered, dragged or focused.
|
||||
ShowValue bool
|
||||
// Format writes the value; nil prints it with the step's precision.
|
||||
Format func(float64) string
|
||||
Disabled bool
|
||||
// Label names the slider for assistive technology.
|
||||
Label string
|
||||
}
|
||||
|
||||
const (
|
||||
sliderThumb float32 = 16
|
||||
sliderTrack float32 = 4
|
||||
sliderBubble float32 = 26
|
||||
sliderMarkH float32 = 18
|
||||
)
|
||||
|
||||
// sliderGeom maps values to x positions across a slider's box.
|
||||
type sliderGeom struct {
|
||||
lo, hi, step float64
|
||||
trackY float32
|
||||
}
|
||||
|
||||
func (g sliderGeom) x(r ui.Rect, v float64) float32 {
|
||||
f := float32((v - g.lo) / (g.hi - g.lo))
|
||||
return r.X + sliderThumb/2 + (r.W-sliderThumb)*max(0, min(1, f))
|
||||
}
|
||||
|
||||
// snap rounds v to the nearest step inside the range.
|
||||
func (g sliderGeom) snap(v float64) float64 {
|
||||
v = max(g.lo, min(g.hi, v))
|
||||
if g.step <= 0 {
|
||||
return v
|
||||
}
|
||||
v = g.lo + math.Round((v-g.lo)/g.step)*g.step
|
||||
if v > g.hi {
|
||||
v -= g.step
|
||||
}
|
||||
return math.Round(v*1e9) / 1e9
|
||||
}
|
||||
|
||||
// keyed returns the value after a key moved old to raw, MyGo's 1% key step,
|
||||
// as one step of the slider: Home and End land on the ends.
|
||||
func (g sliderGeom) keyed(old, raw float64) float64 {
|
||||
switch {
|
||||
case g.step <= 0:
|
||||
return raw
|
||||
case raw == g.lo:
|
||||
return g.lo
|
||||
case raw == g.hi:
|
||||
return g.snap(g.hi)
|
||||
case raw > old:
|
||||
return g.snap(min(g.hi, old+g.step))
|
||||
}
|
||||
return g.snap(old - g.step)
|
||||
}
|
||||
|
||||
func sliderSetup(min, max, step float64, marks []SliderMark, showValue bool, c *ui.Context) (sliderGeom, float32) {
|
||||
if min == 0 && max == 0 {
|
||||
max = 100
|
||||
}
|
||||
if max <= min || step < 0 {
|
||||
panic("mujica: slider needs Min < Max and Step >= 0")
|
||||
}
|
||||
g := sliderGeom{lo: min, hi: max, step: step}
|
||||
h := Density(c).ControlHeight()
|
||||
g.trackY = h / 2
|
||||
if showValue {
|
||||
g.trackY += sliderBubble
|
||||
h += sliderBubble
|
||||
}
|
||||
for _, m := range marks {
|
||||
if m.Label != "" {
|
||||
return g, h + sliderMarkH
|
||||
}
|
||||
}
|
||||
return g, h
|
||||
}
|
||||
|
||||
func sliderFormat(format func(float64) string, step float64) func(float64) string {
|
||||
if format != nil {
|
||||
return format
|
||||
}
|
||||
prec := 0
|
||||
if step > 0 && step < 1 {
|
||||
prec = int(math.Ceil(-math.Log10(step) - 1e-9))
|
||||
} else if step == 0 {
|
||||
prec = 1
|
||||
}
|
||||
return func(v float64) string { return strconv.FormatFloat(v, 'f', prec, 64) }
|
||||
}
|
||||
|
||||
// Slider sets *value between Min and Max by dragging anywhere on its box,
|
||||
// the arrows (one Step), Home and End. The thumb is a diamond; the hit area
|
||||
// is the whole rectangle.
|
||||
func Slider(c *ui.Context, value *float64, opts SliderOptions) ChoiceResult {
|
||||
g, h := sliderSetup(opts.Min, opts.Max, opts.Step, opts.Marks, opts.ShowValue, c)
|
||||
format := sliderFormat(opts.Format, opts.Step)
|
||||
k := Tokens(c)
|
||||
old := g.snap(*value)
|
||||
*value = old
|
||||
target := value
|
||||
if opts.Disabled {
|
||||
// SliderBase takes the pointer as it is built: a disabled one moves a copy.
|
||||
scratch := old
|
||||
target = &scratch
|
||||
}
|
||||
s := ui.SliderBase(c, target, g.lo, g.hi).Height(h).MinWidth(120).PaddingX(sliderThumb / 2).
|
||||
FocusRing(false).Disabled(opts.Disabled).Cursor(ui.CursorPointer)
|
||||
if opts.Label != "" {
|
||||
s.Label(opts.Label)
|
||||
}
|
||||
if *value != old {
|
||||
if _, _, drag := s.Dragged(); drag {
|
||||
*value = g.snap(*value)
|
||||
} else {
|
||||
*value = g.keyed(old, *value)
|
||||
}
|
||||
}
|
||||
changed := *value != old
|
||||
if changed {
|
||||
slog.Debug("mujica: slider changed", "label", opts.Label, "value", *value)
|
||||
}
|
||||
_, _, held := s.Dragged()
|
||||
hover := s.Hovered()
|
||||
v := *value
|
||||
s.Draw(func(p *ui.Painter, r ui.Rect) {
|
||||
sliderTrackPaint(p, r, g, k, opts.Marks, format, g.x(r, g.lo), g.x(r, v))
|
||||
x := g.x(r, v)
|
||||
sliderThumbPaint(p, k, x, r.Y+g.trackY, hover || held, s.FocusVisible())
|
||||
if opts.ShowValue && (hover || held || s.Focused()) {
|
||||
sliderBubblePaint(p, k, x, r.Y+g.trackY, format(v))
|
||||
}
|
||||
})
|
||||
return ChoiceResult{s, changed}
|
||||
}
|
||||
|
||||
// sliderTrackPaint draws the rail, the filled part from x0 to x1, and the marks.
|
||||
func sliderTrackPaint(p *ui.Painter, r ui.Rect, g sliderGeom, k theme.Tokens, marks []SliderMark, format func(float64) string, x0, x1 float32) {
|
||||
y := r.Y + g.trackY
|
||||
left, right := g.x(r, g.lo), g.x(r, g.hi)
|
||||
p.Fill(ui.Rect{X: left, Y: y - sliderTrack/2, W: right - left, H: sliderTrack}, k.Border, 0)
|
||||
p.Stroke(ui.Rect{X: left, Y: y - sliderTrack/2, W: right - left, H: sliderTrack}, k.ControlBorder, 0, 1)
|
||||
p.Fill(ui.Rect{X: x0, Y: y - sliderTrack/2, W: x1 - x0, H: sliderTrack}, k.AccentText, 0)
|
||||
for _, m := range marks {
|
||||
x := g.x(r, m.Value)
|
||||
p.Fill(ui.Rect{X: x - 0.5, Y: y + sliderTrack/2 + 2, W: 1, H: 5}, k.TextMuted, 0)
|
||||
if m.Label != "" {
|
||||
w, _ := p.MeasureText(1000, ui.Span{Text: m.Label, Size: theme.CaptionSize})
|
||||
p.Text(x-w/2, y+sliderTrack/2+8, m.Label, theme.CaptionSize, k.TextMuted)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// sliderThumbPaint draws the diamond thumb at (x, y), with its focus ring.
|
||||
func sliderThumbPaint(p *ui.Painter, k theme.Tokens, x, y float32, hot, focus bool) {
|
||||
x, y = internal.Snap(p, x), internal.Snap(p, y)
|
||||
size := sliderThumb
|
||||
if hot {
|
||||
size += 2
|
||||
}
|
||||
p.FillPath(internal.Diamond(x, y, size+3), k.Surface)
|
||||
p.FillPath(internal.Diamond(x, y, size), k.AccentText)
|
||||
if focus {
|
||||
p.StrokePath(internal.Diamond(x, y, size+3+2*(theme.FocusGap+theme.FocusWidth)), theme.FocusWidth, k.Focus)
|
||||
}
|
||||
}
|
||||
|
||||
// sliderBubblePaint draws the value tip above the thumb at (x, y).
|
||||
func sliderBubblePaint(p *ui.Painter, k theme.Tokens, x, y float32, s string) {
|
||||
w, h := p.MeasureText(1000, ui.Span{Text: s, Size: theme.CaptionSize})
|
||||
b := ui.Rect{X: x - w/2 - 6, Y: y - sliderThumb/2 - h - 10, W: w + 12, H: h + 4}
|
||||
p.Fill(b, k.Surface, theme.ControlRadius)
|
||||
p.Stroke(b, k.ControlBorder, theme.ControlRadius, theme.BorderWidth)
|
||||
p.Text(b.X+6, b.Y+2, s, theme.CaptionSize, k.Text)
|
||||
}
|
||||
Reference in new issue
Block a user