Add scrollbar "track" and resize on hover

This commit is contained in:
Guldoman 2022-04-12 02:49:11 +02:00
parent 052c140787
commit 48c371a638
No known key found for this signature in database
GPG Key ID: C08A498EC7F1AFDD
2 changed files with 92 additions and 8 deletions

View File

@ -4,6 +4,7 @@ local style = {}
style.padding = { x = common.round(14 * SCALE), y = common.round(7 * SCALE) } style.padding = { x = common.round(14 * SCALE), y = common.round(7 * SCALE) }
style.divider_size = common.round(1 * SCALE) style.divider_size = common.round(1 * SCALE)
style.scrollbar_size = common.round(4 * SCALE) style.scrollbar_size = common.round(4 * SCALE)
style.expanded_scrollbar_size = common.round(12 * SCALE)
style.caret_width = common.round(2 * SCALE) style.caret_width = common.round(2 * SCALE)
style.tab_width = common.round(170 * SCALE) style.tab_width = common.round(170 * SCALE)
@ -43,6 +44,7 @@ style.line_number2 = { common.color "#83838f" } -- With cursor
style.line_highlight = { common.color "#343438" } style.line_highlight = { common.color "#343438" }
style.scrollbar = { common.color "#414146" } style.scrollbar = { common.color "#414146" }
style.scrollbar2 = { common.color "#4b4b52" } -- Hovered style.scrollbar2 = { common.color "#4b4b52" } -- Hovered
style.scrollbar_track = { common.color "#252529" }
style.nagbar = { common.color "#FF0000" } style.nagbar = { common.color "#FF0000" }
style.nagbar_text = { common.color "#FFFFFF" } style.nagbar_text = { common.color "#FFFFFF" }
style.nagbar_dim = { common.color "rgba(0, 0, 0, 0.45)" } style.nagbar_dim = { common.color "rgba(0, 0, 0, 0.45)" }

View File

@ -18,6 +18,13 @@ function View:new()
self.scroll = { x = 0, y = 0, to = { x = 0, y = 0 } } self.scroll = { x = 0, y = 0, to = { x = 0, y = 0 } }
self.cursor = "arrow" self.cursor = "arrow"
self.scrollable = false self.scrollable = false
self.scrollbar = {
x = { thumb = 0, track = 0 },
y = { thumb = 0, track = 0 },
w = { thumb = 0, track = 0, to = { thumb = 0, track = 0 } },
h = { thumb = 0, track = 0 },
}
self.scrollbar_alpha = { value = 0, to = 0 }
end end
function View:move_towards(t, k, dest, rate) function View:move_towards(t, k, dest, rate)
@ -57,29 +64,62 @@ function View:get_scrollable_size()
end end
function View:get_scrollbar_track_rect()
local sz = self:get_scrollable_size()
if sz <= self.size.y or sz == math.huge then
return 0, 0, 0, 0
end
local width = style.scrollbar_size
if self.hovered_scrollbar_track or self.dragging_scrollbar then
width = style.expanded_scrollbar_size
end
return
self.position.x + self.size.x - width,
self.position.y,
width,
self.size.y
end
function View:get_scrollbar_rect() function View:get_scrollbar_rect()
local sz = self:get_scrollable_size() local sz = self:get_scrollable_size()
if sz <= self.size.y or sz == math.huge then if sz <= self.size.y or sz == math.huge then
return 0, 0, 0, 0 return 0, 0, 0, 0
end end
local h = math.max(20, self.size.y * self.size.y / sz) local h = math.max(20, self.size.y * self.size.y / sz)
local width = style.scrollbar_size
if self.hovered_scrollbar_track or self.dragging_scrollbar then
width = style.expanded_scrollbar_size
end
return return
self.position.x + self.size.x - style.scrollbar_size, self.position.x + self.size.x - width,
self.position.y + self.scroll.y * (self.size.y - h) / (sz - self.size.y), self.position.y + self.scroll.y * (self.size.y - h) / (sz - self.size.y),
style.scrollbar_size, width,
h h
end end
function View:scrollbar_overlaps_point(x, y) function View:scrollbar_overlaps_point(x, y)
local sx, sy, sw, sh = self:get_scrollbar_rect() local sx, sy, sw, sh = self:get_scrollbar_rect()
return x >= sx - sw * 3 and x < sx + sw and y >= sy and y < sy + sh return x >= sx - style.scrollbar_size * 3 and x < sx + sw and y >= sy and y < sy + sh
end
function View:scrollbar_track_overlaps_point(x, y)
local sx, sy, sw, sh = self:get_scrollbar_track_rect()
return x >= sx - style.scrollbar_size * 3 and x < sx + sw and y >= sy and y < sy + sh
end end
function View:on_mouse_pressed(button, x, y, clicks) function View:on_mouse_pressed(button, x, y, clicks)
if self:scrollbar_overlaps_point(x, y) then if self:scrollbar_track_overlaps_point(x, y) then
self.dragging_scrollbar = true if self:scrollbar_overlaps_point(x, y) then
self.dragging_scrollbar = true
else
local _, _, _, sh = self:get_scrollbar_rect()
local ly = (y - self.position.y) - sh / 2
local pct = common.clamp(ly / self.size.y, 0, 100)
self.scroll.to.y = self:get_scrollable_size() * pct
end
return true return true
end end
end end
@ -96,6 +136,7 @@ function View:on_mouse_moved(x, y, dx, dy)
self.scroll.to.y = self.scroll.to.y + delta self.scroll.to.y = self.scroll.to.y + delta
end end
self.hovered_scrollbar = self:scrollbar_overlaps_point(x, y) self.hovered_scrollbar = self:scrollbar_overlaps_point(x, y)
self.hovered_scrollbar_track = self.hovered_scrollbar or self:scrollbar_track_overlaps_point(x, y)
end end
@ -132,10 +173,33 @@ function View:clamp_scroll_position()
end end
function View:update_scrollbar()
local x, y, w, h = self:get_scrollbar_rect()
self.scrollbar.w.to.thumb = w
self:move_towards(self.scrollbar.w, "thumb", self.scrollbar.w.to.thumb, 0.3)
self.scrollbar.x.thumb = x + w - self.scrollbar.w.thumb
self.scrollbar.y.thumb = y
self.scrollbar.h.thumb = h
local x, y, w, h = self:get_scrollbar_track_rect()
self.scrollbar.w.to.track = w
self:move_towards(self.scrollbar.w, "track", self.scrollbar.w.to.track, 0.3)
self.scrollbar.x.track = x + w - self.scrollbar.w.track
self.scrollbar.y.track = y
self.scrollbar.h.track = h
-- we use 100 for a smoother transition
self.scrollbar_alpha.to = (self.hovered_scrollbar_track or self.dragging_scrollbar) and 100 or 0
self:move_towards(self.scrollbar_alpha, "value", self.scrollbar_alpha.to, 0.3)
end
function View:update() function View:update()
self:clamp_scroll_position() self:clamp_scroll_position()
self:move_towards(self.scroll, "x", self.scroll.to.x, 0.3) self:move_towards(self.scroll, "x", self.scroll.to.x, 0.3)
self:move_towards(self.scroll, "y", self.scroll.to.y, 0.3) self:move_towards(self.scroll, "y", self.scroll.to.y, 0.3)
self:update_scrollbar()
end end
@ -146,11 +210,29 @@ function View:draw_background(color)
end end
function View:draw_scrollbar() function View:draw_scrollbar_track()
local x, y, w, h = self:get_scrollbar_rect() if not (self.hovered_scrollbar_track or self.dragging_scrollbar)
and self.scrollbar_alpha.value == 0 then
return
end
local color = { table.unpack(style.scrollbar_track) }
color[4] = color[4] * self.scrollbar_alpha.value / 100
renderer.draw_rect(self.scrollbar.x.track, self.scrollbar.y.track,
self.scrollbar.w.track, self.scrollbar.h.track, color)
end
function View:draw_scrollbar_thumb()
local highlight = self.hovered_scrollbar or self.dragging_scrollbar local highlight = self.hovered_scrollbar or self.dragging_scrollbar
local color = highlight and style.scrollbar2 or style.scrollbar local color = highlight and style.scrollbar2 or style.scrollbar
renderer.draw_rect(x, y, w, h, color) renderer.draw_rect(self.scrollbar.x.thumb, self.scrollbar.y.thumb,
self.scrollbar.w.thumb, self.scrollbar.h.thumb, color)
end
function View:draw_scrollbar()
self:draw_scrollbar_track()
self:draw_scrollbar_thumb()
end end