draftingff

This commit is contained in:
5684185+vsariola@users.noreply.github.com 2025-05-05 13:35:25 +03:00
parent db48c9e523
commit b1e9e0c974
8 changed files with 59 additions and 56 deletions

View File

@ -16,7 +16,6 @@ import (
"gioui.org/op/clip" "gioui.org/op/clip"
"gioui.org/op/paint" "gioui.org/op/paint"
"gioui.org/unit" "gioui.org/unit"
"gioui.org/widget/material"
"github.com/vsariola/sointu/tracker" "github.com/vsariola/sointu/tracker"
) )
@ -34,10 +33,16 @@ type DragList struct {
} }
type FilledDragListStyle struct { type FilledDragListStyle struct {
dragList *DragList dragList *DragList
HoverColor color.NRGBA HoverColor color.NRGBA
SelectedColor color.NRGBA Cursor struct {
CursorColor color.NRGBA Active color.NRGBA
Inactive color.NRGBA
}
Selection struct {
Active color.NRGBA
Inactive color.NRGBA
}
ScrollBarWidth unit.Dp ScrollBarWidth unit.Dp
element, bg func(gtx C, i int) D element, bg func(gtx C, i int) D
} }
@ -46,14 +51,14 @@ func NewDragList(model tracker.List, axis layout.Axis) *DragList {
return &DragList{TrackerList: model, List: &layout.List{Axis: axis}, HoverItem: -1, ScrollBar: &ScrollBar{Axis: axis}} return &DragList{TrackerList: model, List: &layout.List{Axis: axis}, HoverItem: -1, ScrollBar: &ScrollBar{Axis: axis}}
} }
func FilledDragList(th *material.Theme, dragList *DragList, element, bg func(gtx C, i int) D) FilledDragListStyle { func FilledDragList(th *Theme, dragList *DragList, element, bg func(gtx C, i int) D) FilledDragListStyle {
return FilledDragListStyle{ return FilledDragListStyle{
dragList: dragList, dragList: dragList,
element: element, element: element,
bg: bg, bg: bg,
HoverColor: dragListHoverColor, HoverColor: hoveredColor(th.Selection.Active),
SelectedColor: dragListSelectedColor, Cursor: th.Cursor,
CursorColor: cursorColor, Selection: th.Selection,
ScrollBarWidth: unit.Dp(10), ScrollBarWidth: unit.Dp(10),
} }
} }
@ -147,12 +152,16 @@ func (s FilledDragListStyle) Layout(gtx C) D {
var color color.NRGBA var color color.NRGBA
if s.dragList.TrackerList.Selected() == index { if s.dragList.TrackerList.Selected() == index {
if s.dragList.focused { if s.dragList.focused {
color = s.CursorColor color = s.Cursor.Active
} else { } else {
color = s.SelectedColor color = s.Cursor.Inactive
} }
} else if between(s.dragList.TrackerList.Selected(), index, s.dragList.TrackerList.Selected2()) { } else if between(s.dragList.TrackerList.Selected(), index, s.dragList.TrackerList.Selected2()) {
color = s.SelectedColor if s.dragList.focused {
color = s.Selection.Active
} else {
color = s.Selection.Inactive
}
} else if s.dragList.HoverItem == index { } else if s.dragList.HoverItem == index {
color = s.HoverColor color = s.HoverColor
} }

View File

@ -314,13 +314,7 @@ func (ie *InstrumentEditor) layoutInstrumentList(gtx C, t *Tracker) D {
}) })
} }
color := inactiveLightSurfaceColor instrumentList := FilledDragList(t.Theme, ie.instrumentDragList, element, nil)
if ie.wasFocused {
color = activeLightSurfaceColor
}
instrumentList := FilledDragList(&t.Theme.Material, ie.instrumentDragList, element, nil)
instrumentList.SelectedColor = color
instrumentList.HoverColor = instrumentHoverColor
instrumentList.ScrollBarWidth = unit.Dp(6) instrumentList.ScrollBarWidth = unit.Dp(6)
defer op.Offset(image.Point{}).Push(gtx.Ops).Pop() defer op.Offset(image.Point{}).Push(gtx.Ops).Pop()
@ -454,7 +448,7 @@ func (ie *InstrumentEditor) layoutUnitList(gtx C, t *Tracker) D {
} }
defer op.Offset(image.Point{}).Push(gtx.Ops).Pop() defer op.Offset(image.Point{}).Push(gtx.Ops).Pop()
unitList := FilledDragList(&t.Theme.Material, ie.unitDragList, element, nil) unitList := FilledDragList(t.Theme, ie.unitDragList, element, nil)
for { for {
event, ok := gtx.Event( event, ok := gtx.Event(
key.Filter{Focus: ie.unitDragList, Name: key.NameRightArrow}, key.Filter{Focus: ie.unitDragList, Name: key.NameRightArrow},

View File

@ -240,9 +240,9 @@ func (te *NoteEditor) layoutTracks(gtx C, t *Tracker) D {
return D{} return D{}
} }
rowMarkerPatternTextColorOp := colorOp(gtx, rowMarkerPatternTextColor) orderRowOp := colorOp(gtx, t.Theme.NoteEditor.OrderRow.Color)
loopMarkerColorOp := colorOp(gtx, t.Theme.OrderEditor.Loop) loopColorOp := colorOp(gtx, t.Theme.OrderEditor.Loop)
rowMarkerRowTextColorOp := colorOp(gtx, rowMarkerRowTextColor) patternRowOp := colorOp(gtx, t.Theme.NoteEditor.PatternRow.Color)
rowTitle := func(gtx C, j int) D { rowTitle := func(gtx C, j int) D {
rpp := max(t.RowsPerPattern().Value(), 1) rpp := max(t.RowsPerPattern().Value(), 1)
@ -251,14 +251,14 @@ func (te *NoteEditor) layoutTracks(gtx C, t *Tracker) D {
w := pxPatMarkWidth + pxRowMarkWidth w := pxPatMarkWidth + pxRowMarkWidth
defer op.Offset(image.Pt(0, -2)).Push(gtx.Ops).Pop() defer op.Offset(image.Pt(0, -2)).Push(gtx.Ops).Pop()
if row == 0 { if row == 0 {
op := rowMarkerPatternTextColorOp op := orderRowOp
if l := t.Loop(); pat >= l.Start && pat < l.Start+l.Length { if l := t.Loop(); pat >= l.Start && pat < l.Start+l.Length {
op = loopMarkerColorOp op = loopColorOp
} }
widget.Label{}.Layout(gtx, t.Theme.Material.Shaper, t.Theme.NoteEditor.OrderRow.Font, t.Theme.NoteEditor.OrderRow.TextSize, strings.ToUpper(fmt.Sprintf("%02x", pat)), op) widget.Label{}.Layout(gtx, t.Theme.Material.Shaper, t.Theme.NoteEditor.OrderRow.Font, t.Theme.NoteEditor.OrderRow.TextSize, strings.ToUpper(fmt.Sprintf("%02x", pat)), op)
} }
defer op.Offset(image.Pt(pxPatMarkWidth, 0)).Push(gtx.Ops).Pop() defer op.Offset(image.Pt(pxPatMarkWidth, 0)).Push(gtx.Ops).Pop()
widget.Label{}.Layout(gtx, t.Theme.Material.Shaper, t.Theme.NoteEditor.PatternRow.Font, t.Theme.NoteEditor.PatternRow.TextSize, strings.ToUpper(fmt.Sprintf("%02x", row)), rowMarkerRowTextColorOp) widget.Label{}.Layout(gtx, t.Theme.Material.Shaper, t.Theme.NoteEditor.PatternRow.Font, t.Theme.NoteEditor.PatternRow.TextSize, strings.ToUpper(fmt.Sprintf("%02x", row)), patternRowOp)
return D{Size: image.Pt(w, pxHeight)} return D{Size: image.Pt(w, pxHeight)}
} }
@ -277,17 +277,17 @@ func (te *NoteEditor) layoutTracks(gtx C, t *Tracker) D {
color := transparent color := transparent
point := tracker.Point{X: x, Y: y} point := tracker.Point{X: x, Y: y}
if drawSelection && selection.Contains(point) { if drawSelection && selection.Contains(point) {
color = inactiveSelectionColor color = t.Theme.Selection.Inactive
if te.scrollTable.Focused() { if te.scrollTable.Focused() {
color = selectionColor color = t.Theme.Selection.Active
} }
} }
paint.FillShape(gtx.Ops, color, clip.Rect{Min: image.Pt(0, 0), Max: image.Pt(gtx.Constraints.Min.X, gtx.Constraints.Min.Y)}.Op()) paint.FillShape(gtx.Ops, color, clip.Rect{Min: image.Pt(0, 0), Max: image.Pt(gtx.Constraints.Min.X, gtx.Constraints.Min.Y)}.Op())
// draw the cursor // draw the cursor
if point == cursor { if point == cursor {
c := inactiveSelectionColor c := t.Theme.Cursor.Inactive
if te.scrollTable.Focused() { if te.scrollTable.Focused() {
c = cursorColor c = t.Theme.Cursor.Active
} }
if hasTrackMidiIn { if hasTrackMidiIn {
c = cursorForTrackMidiInColor c = cursorForTrackMidiInColor
@ -326,7 +326,7 @@ func (te *NoteEditor) layoutTracks(gtx C, t *Tracker) D {
widget.Label{Alignment: text.Middle}.Layout(gtx, t.Theme.Material.Shaper, trackerFont, trackerFontSize, val, op) widget.Label{Alignment: text.Middle}.Layout(gtx, t.Theme.Material.Shaper, trackerFont, trackerFontSize, val, op)
return D{Size: image.Pt(pxWidth, pxHeight)} return D{Size: image.Pt(pxWidth, pxHeight)}
} }
table := FilledScrollTable(&t.Theme.Material, te.scrollTable, cell, colTitle, rowTitle, nil, rowTitleBg) table := FilledScrollTable(t.Theme, te.scrollTable, cell, colTitle, rowTitle, nil, rowTitleBg)
table.RowTitleWidth = trackPatMarkWidth + trackRowMarkWidth table.RowTitleWidth = trackPatMarkWidth + trackRowMarkWidth
table.ColumnTitleHeight = trackColTitleHeight table.ColumnTitleHeight = trackColTitleHeight
table.CellWidth = trackColWidth table.CellWidth = trackColWidth

View File

@ -101,11 +101,14 @@ func (oe *OrderEditor) Layout(gtx C, t *Tracker) D {
color := patternCellColor color := patternCellColor
point := tracker.Point{X: x, Y: y} point := tracker.Point{X: x, Y: y}
if selection.Contains(point) { if selection.Contains(point) {
color = inactiveSelectionColor color = t.Theme.Selection.Inactive
if oe.scrollTable.Focused() { if oe.scrollTable.Focused() {
color = selectionColor color = t.Theme.Selection.Active
if point == oe.scrollTable.Table.Cursor() { }
color = cursorColor if point == oe.scrollTable.Table.Cursor() {
color = t.Theme.Cursor.Inactive
if oe.scrollTable.Focused() {
color = t.Theme.Cursor.Active
} }
} }
} }
@ -115,7 +118,7 @@ func (oe *OrderEditor) Layout(gtx C, t *Tracker) D {
return D{Size: image.Pt(gtx.Dp(patternCellWidth), gtx.Dp(patternCellHeight))} return D{Size: image.Pt(gtx.Dp(patternCellWidth), gtx.Dp(patternCellHeight))}
} }
table := FilledScrollTable(&t.Theme.Material, oe.scrollTable, cell, colTitle, rowTitle, nil, rowTitleBg) table := FilledScrollTable(t.Theme, oe.scrollTable, cell, colTitle, rowTitle, nil, rowTitleBg)
table.ColumnTitleHeight = orderTitleHeight table.ColumnTitleHeight = orderTitleHeight
return table.Layout(gtx) return table.Layout(gtx)

View File

@ -14,7 +14,6 @@ import (
"gioui.org/op" "gioui.org/op"
"gioui.org/op/clip" "gioui.org/op/clip"
"gioui.org/unit" "gioui.org/unit"
"gioui.org/widget/material"
"github.com/vsariola/sointu/tracker" "github.com/vsariola/sointu/tracker"
) )
@ -72,7 +71,7 @@ func NewScrollTable(table tracker.Table, vertList, horizList tracker.List) *Scro
return ret return ret
} }
func FilledScrollTable(th *material.Theme, scrollTable *ScrollTable, element func(gtx C, x, y int) D, colTitle, rowTitle, colTitleBg, rowTitleBg func(gtx C, i int) D) ScrollTableStyle { func FilledScrollTable(th *Theme, scrollTable *ScrollTable, element func(gtx C, x, y int) D, colTitle, rowTitle, colTitleBg, rowTitleBg func(gtx C, i int) D) ScrollTableStyle {
return ScrollTableStyle{ return ScrollTableStyle{
RowTitleStyle: FilledDragList(th, scrollTable.RowTitleList, rowTitle, rowTitleBg), RowTitleStyle: FilledDragList(th, scrollTable.RowTitleList, rowTitle, rowTitleBg),
ColTitleStyle: FilledDragList(th, scrollTable.ColTitleList, colTitle, colTitleBg), ColTitleStyle: FilledDragList(th, scrollTable.ColTitleList, colTitle, colTitleBg),

View File

@ -80,6 +80,14 @@ type Theme struct {
Chooser LabelStyle Chooser LabelStyle
ParameterName LabelStyle ParameterName LabelStyle
} }
Cursor struct {
Active color.NRGBA
Inactive color.NRGBA
}
Selection struct {
Active color.NRGBA
Inactive color.NRGBA
}
} }
//go:embed theme.yml //go:embed theme.yml
@ -116,7 +124,6 @@ var black = color.NRGBA{R: 0, G: 0, B: 0, A: 255}
var transparent = color.NRGBA{A: 0} var transparent = color.NRGBA{A: 0}
var primaryColor = color.NRGBA{R: 206, G: 147, B: 216, A: 255} var primaryColor = color.NRGBA{R: 206, G: 147, B: 216, A: 255}
var secondaryColor = color.NRGBA{R: 128, G: 222, B: 234, A: 255}
var highEmphasisTextColor = color.NRGBA{R: 222, G: 222, B: 222, A: 222} var highEmphasisTextColor = color.NRGBA{R: 222, G: 222, B: 222, A: 222}
var mediumEmphasisTextColor = color.NRGBA{R: 153, G: 153, B: 153, A: 153} var mediumEmphasisTextColor = color.NRGBA{R: 153, G: 153, B: 153, A: 153}
@ -126,9 +133,6 @@ var backgroundColor = color.NRGBA{R: 18, G: 18, B: 18, A: 255}
var labelDefaultFont = fontCollection[6].Font var labelDefaultFont = fontCollection[6].Font
var rowMarkerPatternTextColor = secondaryColor
var rowMarkerRowTextColor = mediumEmphasisTextColor
var trackerFont = fontCollection[6].Font var trackerFont = fontCollection[6].Font
var trackerFontSize = unit.Sp(16) var trackerFontSize = unit.Sp(16)
var trackerInactiveTextColor = highEmphasisTextColor var trackerInactiveTextColor = highEmphasisTextColor
@ -140,24 +144,12 @@ var twoBeatHighlight = color.NRGBA{R: 31, G: 51, B: 53, A: 255}
var patternPlayColor = color.NRGBA{R: 55, G: 55, B: 61, A: 255} var patternPlayColor = color.NRGBA{R: 55, G: 55, B: 61, A: 255}
var patternCellColor = color.NRGBA{R: 255, G: 255, B: 255, A: 3} var patternCellColor = color.NRGBA{R: 255, G: 255, B: 255, A: 3}
var loopMarkerColor = color.NRGBA{R: 252, G: 186, B: 3, A: 255}
var instrumentHoverColor = color.NRGBA{R: 30, G: 31, B: 38, A: 255}
var songSurfaceColor = color.NRGBA{R: 24, G: 24, B: 24, A: 255} var songSurfaceColor = color.NRGBA{R: 24, G: 24, B: 24, A: 255}
var popupSurfaceColor = color.NRGBA{R: 50, G: 50, B: 51, A: 255} var popupSurfaceColor = color.NRGBA{R: 50, G: 50, B: 51, A: 255}
var popupShadowColor = color.NRGBA{R: 0, G: 0, B: 0, A: 192} var popupShadowColor = color.NRGBA{R: 0, G: 0, B: 0, A: 192}
var dragListSelectedColor = color.NRGBA{R: 55, G: 55, B: 61, A: 255}
var dragListHoverColor = color.NRGBA{R: 42, G: 45, B: 61, A: 255}
var inactiveLightSurfaceColor = color.NRGBA{R: 37, G: 37, B: 38, A: 255}
var activeLightSurfaceColor = color.NRGBA{R: 45, G: 45, B: 45, A: 255}
var cursorColor = color.NRGBA{R: 100, G: 140, B: 255, A: 48}
var selectionColor = color.NRGBA{R: 100, G: 140, B: 255, A: 12}
var inactiveSelectionColor = color.NRGBA{R: 140, G: 140, B: 140, A: 16}
var cursorForTrackMidiInColor = color.NRGBA{R: 255, G: 100, B: 140, A: 48} var cursorForTrackMidiInColor = color.NRGBA{R: 255, G: 100, B: 140, A: 48}
var cursorNeighborForTrackMidiInColor = color.NRGBA{R: 255, G: 100, B: 140, A: 24} var cursorNeighborForTrackMidiInColor = color.NRGBA{R: 255, G: 100, B: 140, A: 24}

View File

@ -126,3 +126,9 @@ uniteditor:
hint: { textsize: 16, color: *highemphasis, shadowcolor: *black } hint: { textsize: 16, color: *highemphasis, shadowcolor: *black }
chooser: { textsize: 12, color: *white, shadowcolor: *black } chooser: { textsize: 12, color: *white, shadowcolor: *black }
parametername: { textsize: 16, color: *white, shadowcolor: *black } parametername: { textsize: 16, color: *white, shadowcolor: *black }
cursor:
active: { r: 100, g: 140, b: 255, a: 48 }
inactive: { r: 140, g: 140, b: 140, a: 48 }
selection:
active: { r: 100, g: 140, b: 255, a: 16 }
inactive: { r: 140, g: 140, b: 140, a: 16 }

View File

@ -118,7 +118,7 @@ func (pe *UnitEditor) layoutSliders(gtx C, t *Tracker) D {
return D{Size: image.Pt(gtx.Constraints.Max.X, dims.Size.Y)} return D{Size: image.Pt(gtx.Constraints.Max.X, dims.Size.Y)}
} }
fdl := FilledDragList(&t.Theme.Material, pe.sliderList, element, nil) fdl := FilledDragList(t.Theme, pe.sliderList, element, nil)
dims := fdl.Layout(gtx) dims := fdl.Layout(gtx)
gtx.Constraints = layout.Exact(dims.Size) gtx.Constraints = layout.Exact(dims.Size)
fdl.LayoutScrollBar(gtx) fdl.LayoutScrollBar(gtx)
@ -191,7 +191,7 @@ func (pe *UnitEditor) layoutUnitTypeChooser(gtx C, t *Tracker) D {
} }
return w.Layout(gtx) return w.Layout(gtx)
} }
fdl := FilledDragList(&t.Theme.Material, pe.searchList, element, nil) fdl := FilledDragList(t.Theme, pe.searchList, element, nil)
dims := fdl.Layout(gtx) dims := fdl.Layout(gtx)
gtx.Constraints = layout.Exact(dims.Size) gtx.Constraints = layout.Exact(dims.Size)
fdl.LayoutScrollBar(gtx) fdl.LayoutScrollBar(gtx)