Implement SMODS.GUI.scrollbar and SMODS.GUI.dropdown_select (#1253)

* add scrollbar

* add dropdown

* errors for proper usage

* polish

* docs pt 1

* comment patches

* scroll progress now saves

on a per-instance basis

* docs (final)

* Update ui.lua

* Update ui.lua

* add stuff

* fix scrolling and convert stuff to absolute positioning

* reimplement scroll mult

* pass args into dropdown_element_def

Author: ThunderEdge73

assets/1x/dropdown_arrow.png

@@ -22,6 +22,60 @@ position = 'before'
 payload = '''love.graphics.setColor(self.config.colour)'''
 match_indent = true
 
+# Game:draw()
+# Draw dropdowns right before G.OVERLAY_MENU if the dropdown was created while G.OVERLAY_MENU didn't exist
+[[patches]]
+[patches.pattern]
+target = 'game.lua'
+pattern = '''
+if (self.OVERLAY_MENU) or (not self.F_HIDE_BG) then
+'''
+position = 'before'
+payload = '''
+for k, v in pairs(self.I.DROPDOWN) do
+    if v.parent == G.ROOM_ATTACH then
+        love.graphics.push()
+        v:translate_container()
+        v:draw()
+        love.graphics.pop()
+    end
+end
+'''
+match_indent = true
+
+# Draw dropdowns right before the drag target if the dropdown was created while G.OVERLAY_MENU exists
+[[patches]]
+[patches.pattern]
+target = 'game.lua'
+pattern = '''
+if self.CONTROLLER.dragging.target and self.CONTROLLER.dragging.target ~= self.CONTROLLER.focused.target then
+'''
+position = 'before'
+payload = '''
+for k, v in pairs(self.I.DROPDOWN) do
+    if v.parent == G.OVERLAY_MENU then
+        love.graphics.push()
+        v:translate_container()
+        v:draw()
+        love.graphics.pop()
+    end
+end
+'''
+match_indent = true
+
+# Game:set_globals()
+# Add G.I.DROPDOWN
+[[patches]]
+[patches.pattern]
+target = 'globals.lua'
+pattern = '''
+UIBOX = {},
+'''
+position = 'after'
+payload = '''
+DROPDOWN = {},
+'''
+match_indent = true
 
 ## multiple text input fix
 # create_text_input()

assets/2x/dropdown_arrow.png

@@ -328,4 +328,64 @@ function create_UIBox_your_collection_stickers() end
 
 ---@return UINode
 ---@param args ScoreContainerArgs
-function SMODS.GUI.score_container(args) end
+function SMODS.GUI.score_container(args) end
+
+---@class ScrollbarArgs
+---@field w number? The width of the scrollbar. Is optional if scrollbar is horizontal or knob_w is specified.
+---@field h number? The height of the scrollbar. Is optional if scrollbar is vertical or knob_h is specified.
+---@field bg_colour? table The background colour of the scrollbar.
+---@field colour? table The colour of the scrollbar's progress.
+---@field knob_colour? table The colour of the scrollbar's knob.
+---@field knob_h? number The height of the scrollbar's knob. Takes precedence over `h` if scrollbar is horizontal.
+---@field knob_w? number The width of the scrollbar's knob. Takes precedence over `w` if scrollbar is vertical.
+---@field ref_table? table The table whose `ref_value` should be updated based on this scrollbar's progress.
+---@field ref_value? string `ref_table[ref_value]` is set to a value between `min` and `max`.
+---@field scroll_collision_obj? SMODS.UIScrollBox The object to scroll based on this scrollbar's progress. This scrollbox will only update automatically if `ref_table` or `ref_value` are omitted.
+---@field ui_type? G.UIT Which type of UI node this should be.
+---@field horizontal? boolean Whether or not this scrollbar is horizontal. Default orientation is vertical.
+---@field min? number Minimum value of `ref_value`. Defaults to 0.
+---@field max? number Maximum value of `ref_value` Defaults to 1.
+---@field scroll_mult? number Multiplies the scrolling speed of this scrollbar when scrolled with mouse wheel or something similar.
+
+---Returns an UI node that has the functionality of a scrollbar.
+---@param args ScrollbarArgs
+---@return table
+function SMODS.GUI.scrollbar(args) end
+
+--- Handles SMODS.GUI.scrollbar functionality
+---@param e table
+function G.FUNCS.scrollbar(e) end
+
+---@class DropdownSelectArgs
+---@field options string[] A list of all possible options that this dropdown button can have.
+---@field ref_table table The table whose `ref_value` should be updated to this dropdown's current value.
+---@field ref_value string `ref_table[ref_value]` is set to this dropdown's current value.
+---@field default? string The default value of this dropdown selection if no value is selected. If not specified, defaults to the first item of `options`.
+---@field scale? number The scale of the dropdown button's text. Defaults to 0.4.
+---@field dropdown_scale? number The scale of the text of the dropdown options. Defaults to 0.4.
+---@field minw? number Specifies the minimum width of the box that contains the text displayed as the current option.
+---@field dropdown_bg_colour? table The colour of the background of the dropdown menu. Defaults to lighten(G.C.BLACK, 0.2)
+---@field border_colour? table The colour of the border of the dropdown menu. Defaults to lighten(G.C.JOKER_GREY, 0.5).
+---@field dropdown_text_colour? table The colour of the text of the dropdown options. Defaults to G.C.UI.TEXT_LIGHT.
+---@field selected_colour? table The colour of the background of the currently selected option. Defaults to G.C.BLACK.
+---@field colour? table The colour of the dropdown button. Defaults to G.C.RED.
+---@field text_colour? table The colour of the dropdown button's text. Defaults to G.C.UI.TEXT_LIGHT.
+---@field dropdown_element_def? fun(option: string, args: DropdownSelectArgs): table If defined, each option will be displayed according to the UI nodes returned by this function. Note that the result of this function is passed into a row node.
+---@field max_menu_h? number The maximum height that the dropdown options should take up. If set, the dropdown's contents will be scrollable and a scrollbar will automatically appear.
+---@field disabled_colour? table The colour of the background disabled options. Defaults to G.C.CLEAR.
+---@field callback? string If set, dropdown options when clicked will call G.FUNCS[callback](e), with `e` being the specific option button pressed. `e.config.value` gets the value of the clicked option. Will not be called if the option is clicked on while disabled.
+---@field is_option_disabled? fun(option: string): boolean? If defined, an option will be disabled if this function returns a truthy value. This is called for every option.
+---@field no_unselect? boolean If set to `true`, prevents an option from being unselected.
+---@field align? string Aligns the text of the dropdown button. Works just like aligning regular UI nodes. Default is "cm".
+---@field id? string Assigns the given id to the config table of the root of the button UIBox if set.
+---@field option_align? string Aligns the text of the dropdown options. Works just like aligning regular UI nodes. Default is "cl".
+---@field close_on_select? boolean If true, the dropdown menu will automatically close when an option is selected or unselected.
+
+---Returns a button that creates a dropdown selection menu when clicked on.
+---@param args DropdownSelectArgs
+function SMODS.GUI.dropdown_select(args) end
+
+---Handles creating the dropdown menu. Don't call this manually.
+---@param args DropdownSelectArgs
+---@param parent_width number
+function SMODS.GUI.create_UIBox_dropdown_menu(args, parent_width) end

lovely/ui_elements.toml

@@ -480,6 +480,12 @@ Set `prefix_config.key = false` on your object instead.]]):format(obj.key), obj.
         px = 66,
         py = 66,
     }
+    SMODS.Atlas {
+        key = 'dropdown_arrow',
+        path = 'dropdown_arrow.png',
+        px = 66,
+        py = 66,
+    }
 
     -------------------------------------------------------------------------------------------------
     ----- API CODE GameObject.Sound