Example comments/Varius fixes

main.lua

@@ -1,12 +1,9 @@
 UI2D = require "ui2d..ui2d"
 
 lovr.graphics.setBackgroundColor( 0.2, 0.2, 0.7 )
-local win1_pos_x = 300
-local win1_pos_y = 300
 local sl1 = 20
 local sl2 = 10
 local sl3 = 10.3
-local txt = "sample text"
 local icon = lovr.graphics.newTexture( "lovrlogo.png" )
 local tab_bar_idx = 1
 local check1 = true
@@ -27,6 +24,7 @@ local some_list = { "fade", "wrong", "milky", "zinc", "doubt", "proud", "well-to
 	"industrious", "credit", "rice", "harm", "nifty", "boiling", "get", "volleyball",
 	"jobless", "honey", "piquant", "desire", "glossy", "spark", "hulking", "leg", "hurry" }
 
+-- Helper function to draw a CustomWidget
 local function DrawMyCustomWidget( ps, held, hovered, mx, my )
 	if held then
 		amplitude = (75 * my) / 150
@@ -53,21 +51,22 @@ local function DrawMyCustomWidget( ps, held, hovered, mx, my )
 end
 
 function lovr.load()
+	-- Initialize the library. You can optionally pass a font size. Default is 14.
 	UI2D.Init()
 end
 
 function lovr.update( dt )
+	-- This gets input information for the library.
 	UI2D.InputInfo()
-
-	progress.adder = progress.adder + (10 * dt)
-	if progress.adder > 100 then progress.adder = 0 end
-	progress.value = math.floor( progress.adder )
 end
 
 function lovr.draw( pass )
 	pass:setProjection( 1, mat4():orthographic( pass:getDimensions() ) )
+
+	-- This call marks the start of the GUI
 	UI2D.NewFrame( pass )
 
+	-- Every window should be contained in a Begin/End block. This is the start of the first window.
 	UI2D.Begin( "First Window", 50, 200 )
 	if UI2D.Button( "first button" ) then
 		print( "from 1st button" )
@@ -91,10 +90,14 @@ function lovr.draw( pass )
 			UI2D.SetColorTheme( "light" )
 		end
 	end
-	UI2D.End( pass )
+	UI2D.End( pass ) -- And this is the end of the first window.
 
+	-- More windows...
 	UI2D.Begin( "Second Window", 250, 50 )
 	UI2D.Label( "We're doing progress...", true )
+	progress.adder = progress.adder + (10 * lovr.timer.getDelta())
+	if progress.adder > 100 then progress.adder = 0 end
+	progress.value = math.floor( progress.adder )
 	UI2D.ProgressBar( progress.value )
 	UI2D.Separator()
 	if UI2D.Button( "Font size +" ) then
@@ -132,9 +135,9 @@ function lovr.draw( pass )
 
 	UI2D.OverrideColor( "window_bg", { 0.1, 0.2, 0.6 } )
 	UI2D.Begin( "Colored window", 600, 300 )
-	UI2D.Button( txt )
+	UI2D.Button( "sample text" )
 	UI2D.SameLine()
-	txt1, finished_editing = UI2D.TextBox( "numeric textbox", 11, txt1 )
+	txt1, finished_editing = UI2D.TextBox( "textbox1", 11, txt1 )
 	if finished_editing then
 		if type( tonumber( txt1 ) ) ~= "number" then
 			txt1 = "0"
@@ -178,7 +181,9 @@ function lovr.draw( pass )
 	DrawMyCustomWidget( ps, held, hovered, mx, my )
 	UI2D.End( pass )
 
-	-- Modal window
+	-- A modal window is like all other windows, except there can only be one open at a time.
+	-- This is set by passing 'true' as the last parameter of Begin().
+	-- When it's time to close a modal window ALWAYS call EndModalWindow()
 	if modal_window_open then
 		UI2D.Begin( "Modal window", 400, 200, true )
 		UI2D.Label( "Close this window\nto interact with other windows" )
@@ -189,6 +194,9 @@ function lovr.draw( pass )
 		UI2D.End( pass )
 	end
 
+	-- This marks the end of the GUI.
+	-- RenderFrame returns a table of passes generated by UI2D.
+	-- Insert the main pass into that table and call lovr.graphics.submit.
 	local ui_passes = UI2D.RenderFrame( pass )
 	table.insert( ui_passes, pass )
 	return lovr.graphics.submit( ui_passes )

ui2d/ui2d.lua

@@ -705,8 +705,8 @@ end
 function UI2D.Button( name, width, height )
 	local text = GetLabelPart( name )
 	local cur_window = windows[ begin_idx ]
-	local text_w = utf8.len( name ) * font.w
-	local num_lines = GetLineCount( name )
+	local text_w = utf8.len( text ) * font.w
+	local num_lines = GetLineCount( text )
 
 	local bbox = {}
 	if layout.same_line then
@@ -868,11 +868,12 @@ end
 
 function UI2D.TabBar( name, tabs, idx )
 	local cur_window = windows[ begin_idx ]
-
 	local bbox = {}
 
 	if layout.same_line then
 		bbox = { x = layout.x + layout.w + margin, y = layout.y, w = 0, h = (2 * margin) + font.h }
+	elseif layout.same_column then
+		bbox = { x = layout.x, y = layout.y + layout.h + margin, w = 0, h = (2 * margin) + font.h }
 	else
 		bbox = { x = margin, y = layout.y + layout.row_h + margin, w = 0, h = (2 * margin) + font.h }
 	end
@@ -890,7 +891,7 @@ function UI2D.TabBar( name, tabs, idx )
 		if not modal_window or (modal_window and modal_window == cur_window) then
 			if PointInRect( mouse.x, mouse.y, x_off + cur_window.x, bbox.y + cur_window.y, tab_w, bbox.h ) and cur_window == active_window then
 				col = colors.tab_bar_hover
-				if mouse.state == e_mouse_state.clicked then
+				if mouse.state == e_mouse_state.clicked and cur_window.id .. name then
 					idx = i
 					result = true
 				end
@@ -905,8 +906,6 @@ function UI2D.TabBar( name, tabs, idx )
 		table.insert( windows[ begin_idx ].command_list, { type = "text", text = v, bbox = tab_rect, color = colors.text } )
 
 		if idx == i then
-			-- table.insert( windows[ begin_idx ].command_list,
-			-- 	{ type = "rect_fill", bbox = { x = tab_rect.x + 2, y = tab_rect.y + tab_rect.h - 6, w = tab_rect.w - 4, h = 5 }, color = colors.tab_bar_highlight } )
 			local highlight_thickness = math.floor( font.h / 4 )
 			table.insert( windows[ begin_idx ].command_list,
 				{
@@ -954,6 +953,8 @@ function UI2D.CheckBox( text, checked )
 	local bbox = {}
 	if layout.same_line then
 		bbox = { x = layout.x + layout.w + margin, y = layout.y, w = font.h + margin + text_w, h = (2 * margin) + font.h }
+	elseif layout.same_column then
+		bbox = { x = layout.x, y = layout.y + layout.h + margin, w = font.h + margin + text_w, h = (2 * margin) + font.h }
 	else
 		bbox = { x = margin, y = layout.y + layout.row_h + margin, w = font.h + margin + text_w, h = (2 * margin) + font.h }
 	end
@@ -991,6 +992,8 @@ function UI2D.RadioButton( text, checked )
 	local bbox = {}
 	if layout.same_line then
 		bbox = { x = layout.x + layout.w + margin, y = layout.y, w = font.h + margin + text_w, h = (2 * margin) + font.h }
+	elseif layout.same_column then
+		bbox = { x = layout.x, y = layout.y + layout.h + margin, w = font.h + margin + text_w, h = (2 * margin) + font.h }
 	else
 		bbox = { x = margin, y = layout.y + layout.row_h + margin, w = font.h + margin + text_w, h = (2 * margin) + font.h }
 	end
@@ -1024,11 +1027,14 @@ end
 
 function UI2D.TextBox( name, num_visible_chars, text )
 	local cur_window = windows[ begin_idx ]
-	local label_w = font.handle:getWidth( name )
+	local label = GetLabelPart( name )
+	local label_w = font.handle:getWidth( label )
 
 	local bbox = {}
 	if layout.same_line then
 		bbox = { x = layout.x + layout.w + margin, y = layout.y, w = (4 * margin) + (num_visible_chars * font.w) + label_w, h = (2 * margin) + font.h }
+	elseif layout.same_column then
+		bbox = { x = layout.x, y = layout.y + layout.h + margin, w = (4 * margin) + (num_visible_chars * font.w) + label_w, h = (2 * margin) + font.h  }
 	else
 		bbox = { x = margin, y = layout.y + layout.row_h + margin, w = (4 * margin) + (num_visible_chars * font.w) + label_w, h = (2 * margin) + font.h }
 	end
@@ -1164,7 +1170,7 @@ function UI2D.TextBox( name, num_visible_chars, text )
 	table.insert( windows[ begin_idx ].command_list, { type = "rect_fill", bbox = text_rect, color = col1 } )
 	table.insert( windows[ begin_idx ].command_list, { type = "rect_wire", bbox = text_rect, color = col2 } )
 	table.insert( windows[ begin_idx ].command_list, { type = "text", text = visible_text, bbox = char_rect, color = colors.text } )
-	table.insert( windows[ begin_idx ].command_list, { type = "text", text = name, bbox = label_rect, color = colors.text } )
+	table.insert( windows[ begin_idx ].command_list, { type = "text", text = label, bbox = label_rect, color = colors.text } )
 
 	if caret_rect and caret_blink.on then
 		table.insert( windows[ begin_idx ].command_list, { type = "rect_fill", bbox = caret_rect, color = colors.text } )