Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Add scrollbar.horizontal #74

Merged
merged 1 commit into from
Jul 21, 2022
Merged

Add scrollbar.horizontal #74

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
122 changes: 122 additions & 0 deletions example/horizontallist.gui
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -66,6 +66,7 @@ nodes {
alpha: 1.0
template_node_child: false
size_mode: SIZE_MODE_MANUAL
custom_type: 0
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

thought: I don't know what these are about, but the editor added it to all components.

Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ah, this is a new thing introduced with custom GUI nodes, such as Spine nodes from the Spine extension.

}
nodes {
position {
Expand Down Expand Up @@ -121,6 +122,7 @@ nodes {
alpha: 1.0
template_node_child: false
size_mode: SIZE_MODE_MANUAL
custom_type: 0
}
nodes {
position {
Expand Down Expand Up @@ -176,6 +178,7 @@ nodes {
alpha: 0.0
template_node_child: false
size_mode: SIZE_MODE_MANUAL
custom_type: 0
}
nodes {
position {
Expand Down Expand Up @@ -231,6 +234,7 @@ nodes {
alpha: 1.0
template_node_child: false
size_mode: SIZE_MODE_MANUAL
custom_type: 0
}
nodes {
position {
Expand Down Expand Up @@ -294,6 +298,7 @@ nodes {
template_node_child: false
text_leading: 1.0
text_tracking: 0.0
custom_type: 0
}
nodes {
position {
Expand Down Expand Up @@ -349,6 +354,118 @@ nodes {
alpha: 1.0
template_node_child: false
size_mode: SIZE_MODE_MANUAL
custom_type: 0
}
nodes {
position {
x: 112.0
y: 503.0
z: 0.0
w: 1.0
}
rotation {
x: 0.0
y: 0.0
z: 0.0
w: 1.0
}
scale {
x: 1.0
y: 1.0
z: 1.0
w: 1.0
}
size {
x: 420.0
y: 20.0
z: 0.0
w: 1.0
}
color {
x: 0.2
y: 0.2
z: 0.2
w: 1.0
}
type: TYPE_BOX
blend_mode: BLEND_MODE_ALPHA
texture: ""
id: "scrollbar_bg"
xanchor: XANCHOR_NONE
yanchor: YANCHOR_NONE
pivot: PIVOT_W
adjust_mode: ADJUST_MODE_FIT
layer: ""
inherit_alpha: true
slice9 {
x: 0.0
y: 0.0
z: 0.0
w: 0.0
}
clipping_mode: CLIPPING_MODE_NONE
clipping_visible: true
clipping_inverted: false
alpha: 1.0
template_node_child: false
size_mode: SIZE_MODE_MANUAL
custom_type: 0
}
nodes {
position {
x: 400.0
y: 0.0
z: 0.0
w: 1.0
}
rotation {
x: 0.0
y: 0.0
z: 0.0
w: 1.0
}
scale {
x: 1.0
y: 1.0
z: 1.0
w: 1.0
}
size {
x: 40.0
y: 18.0
z: 0.0
w: 1.0
}
color {
x: 0.3019608
y: 0.3019608
z: 0.3019608
w: 1.0
}
type: TYPE_BOX
blend_mode: BLEND_MODE_ALPHA
texture: ""
id: "scrollbar_handle"
xanchor: XANCHOR_NONE
yanchor: YANCHOR_NONE
pivot: PIVOT_CENTER
adjust_mode: ADJUST_MODE_FIT
parent: "scrollbar_bg"
layer: ""
inherit_alpha: true
slice9 {
x: 0.0
y: 0.0
z: 0.0
w: 0.0
}
clipping_mode: CLIPPING_MODE_NONE
clipping_visible: true
clipping_inverted: false
alpha: 1.0
template_node_child: false
size_mode: SIZE_MODE_MANUAL
custom_type: 0
}
nodes {
position {
Expand Down Expand Up @@ -403,6 +520,7 @@ nodes {
alpha: 1.0
template_node_child: false
size_mode: SIZE_MODE_MANUAL
custom_type: 0
}
nodes {
position {
Expand Down Expand Up @@ -466,6 +584,7 @@ nodes {
template_node_child: false
text_leading: 1.0
text_tracking: 0.0
custom_type: 0
}
nodes {
position {
Expand Down Expand Up @@ -520,6 +639,7 @@ nodes {
alpha: 1.0
template_node_child: false
size_mode: SIZE_MODE_MANUAL
custom_type: 0
}
nodes {
position {
Expand Down Expand Up @@ -575,6 +695,7 @@ nodes {
alpha: 1.0
template_node_child: false
size_mode: SIZE_MODE_MANUAL
custom_type: 0
}
nodes {
position {
Expand Down Expand Up @@ -630,6 +751,7 @@ nodes {
alpha: 1.0
template_node_child: false
size_mode: SIZE_MODE_AUTO
custom_type: 0
}
layers {
name: "below"
Expand Down
6 changes: 5 additions & 1 deletion example/horizontallist.gui_script
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -72,10 +72,14 @@ function on_input(self, action_id, action)
msg.post("controller:/go", "show_menu")
end)

gooey.horizontal_dynamic_list("dynamiclist_bg", "dynamiclist_stencil", "listitem_bg", self.list_data, action_id, action, nil, function(list)
local list = gooey.horizontal_dynamic_list("dynamiclist_bg", "dynamiclist_stencil", "listitem_bg", self.list_data, action_id, action, nil, function(list)
print("selected dynamic list item", list.selected_item.index, list.data[list.selected_item.index].text)
end, refresh_dynamiclist)

gooey.horizontal_scrollbar("scrollbar_handle", "scrollbar_bg", action_id, action, function(scrollbar)
list.scroll_to(scrollbar.scroll.x, 0)
end)

gooey.horizontal_dynamic_list("carusel_bg", "carousel_stencil", "carousel_listitem", self.carousel_data, action_id, action, { carousel = true }, function(list)
print("selected carousel list item", list.selected_item.index, list.data[list.selected_item.index])
end, refresh_carousel)
Expand Down
8 changes: 8 additions & 0 deletions gooey/gooey.lua
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -147,6 +147,14 @@ function M.vertical_scrollbar(handle_id, bounds_id, action_id, action, config, f
return sb
end

function M.horizontal_scrollbar(handle_id, bounds_id, action_id, action, config, fn, refresh_fn)
local sb = scrollbar.horizontal(handle_id, bounds_id, action_id, action, config, fn or nop, refresh_fn)
if current_group then
current_group.components[#current_group.components + 1] = sb
end
return sb
end


--- Input text
-- (from dirty larry with modifications)
Expand Down
51 changes: 47 additions & 4 deletions gooey/internal/scrollbar.lua
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,13 +22,15 @@ function SCROLLBAR.scroll_to(scrollbar, x, y)
local adjusted_height = (scrollbar.bounds_size.y - scrollbar.handle_size.y)
local offset_y = scrollbar.vertical and (scrollbar.handle_size.y / 2) or 0
handle_pos.y = offset_y + adjusted_height - y * adjusted_height
scrollbar.scroll.y = y
else
local adjusted_width = (scrollbar.bounds_size.x - scrollbar.handle_size.x)
local offset_x = scrollbar.vertical and 0 or (scrollbar.handle_size.x / 2)
handle_pos.x = offset_x + adjusted_width - x * adjusted_width
scrollbar.scroll.x = x
end
gui.set_position(scrollbar.node, handle_pos)
scrollbar.scroll.y = y
scrollbar.refresh()
britzl marked this conversation as resolved.
Show resolved Hide resolved
end
function SCROLLBAR.set_visible(scrollbar, visible)
gui.set_enabled(scrollbar.node, visible)
Expand All @@ -54,14 +56,13 @@ function M.vertical(handle_id, bounds_id, action_id, action, fn, refresh_fn)

scrollbar.enabled = core.is_enabled(handle)
scrollbar.node = handle
scrollbar.node_id = node_id
scrollbar.node_id = handle_id
scrollbar.refresh_fn = refresh_fn
scrollbar.bounds = bounds
scrollbar.bounds_size = bounds_size
scrollbar.handle_size = handle_size

if action then
scrollbar.refresh_fn = refresh_fn
britzl marked this conversation as resolved.
Show resolved Hide resolved

local action_pos = vmath.vector3(action.x, action.y, 0)

core.clickable(scrollbar, action_id, action)
Expand All @@ -81,6 +82,48 @@ function M.vertical(handle_id, bounds_id, action_id, action, fn, refresh_fn)
return scrollbar
end

function M.horizontal(handle_id, bounds_id, action_id, action, fn, refresh_fn)
handle_id = core.to_hash(handle_id)
bounds_id = core.to_hash(bounds_id)
local handle = gui.get_node(handle_id)
local bounds = gui.get_node(bounds_id)
assert(handle)
assert(bounds)
local scrollbar = core.instance(handle_id, scrollbars, SCROLLBAR)
scrollbar.scroll = scrollbar.scroll or vmath.vector3(0, 0, 0)
scrollbar.vertical = false

local handle_size = gui.get_size(handle)
local bounds_size = gui.get_size(bounds)

scrollbar.enabled = core.is_enabled(handle)
scrollbar.node = handle
scrollbar.node_id = handle_id
scrollbar.refresh_fn = refresh_fn
scrollbar.bounds = bounds
scrollbar.bounds_size = bounds_size
scrollbar.handle_size = handle_size

if action then
local action_pos = vmath.vector3(action.x, action.y, 0)

core.clickable(scrollbar, action_id, action)
if scrollbar.pressed_now or scrollbar.pressed then
local adjusted_x, adjusted_y = core.adjust(gui.get_adjust_mode(handle), action_pos.x, action_pos.y)
local bounds_pos = core.get_root_position(bounds)
local size = bounds_size.x - handle_size.x
local ratio = (size - (adjusted_x - bounds_pos.x - (scrollbar.handle_size.x / 2))) / size
SCROLLBAR.scroll_to(scrollbar, ratio, 0)
fn(scrollbar)
end
else
SCROLLBAR.scroll_to(scrollbar, scrollbar.scroll.x, 0)
end

scrollbar.refresh()
return scrollbar
end
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

thought: This part is mostly copy-pasted from vertical, which I'm not super happy about. However, I thought introducing abstractions to keep things DRY would make it less readable. I defer to you @britzl.

Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think this is perfectly fine to be honest. Sure, the first 20 lines or so could be moved to a shared function perhaps, but lets keep it as it is!


setmetatable(M, {
__call = function(_, ...)
return M.scrollbar(...)
Expand Down