z order

main.lua

@@ -14,6 +14,7 @@ local check2 = false
 local rb_idx = 1
 local progress = { value = 0, adder = 0 }
 local txt1 = "Αυτό είναι utf8 κείμενο"
+local txt2 = "Another textbox"
 local amplitude = 50
 local frequency = 0.1
 
@@ -31,8 +32,8 @@ end
 
 function lovr.draw( pass )
 	pass:setProjection( 1, mat4():orthographic( pass:getDimensions() ) )
-	pass:setColor( 1, 0, 0 )
-	pass:plane( 100, 100, 0, 100, 100 )
+	-- pass:setColor( 1, 0, 0 )
+	-- pass:plane( 100, 100, 0, 100, 100 )
 	UI2D.NewFrame( pass )
 
 	UI2D.Begin( "first", 300, 300 )
@@ -92,6 +93,7 @@ function lovr.draw( pass )
 	UI2D.Button( txt )
 	UI2D.SameLine()
 	txt1 = UI2D.TextBox( "textbox1", 11, txt1 )
+	txt2 = UI2D.TextBox( "textbox2", 20, txt2 )
 	if UI2D.CheckBox( "Really?", check1 ) then
 		check1 = not check1
 	end
@@ -99,27 +101,6 @@ function lovr.draw( pass )
 		check2 = not check2
 	end
 
-	UI2D.Label( "Custom widget", true )
-	local clicked, held, released, hovered, x, y, mx, my, win_x, win_y = UI2D.CustomWidget( "custom", 300, 200 )
-	pass:setColor( 1, 1, 1 )
-
-	if held then
-		pass:setColor( 1, 0.5, 0 )
-		amplitude = (50 * my) / 200
-		frequency = (0.2 * mx) / 300
-	elseif hovered then
-		pass:setColor( 0.8, 0.8, 0.8 )
-	end
-
-	local xx = x
-	local yy = y
-
-	for i = 1, 300 do
-		yy = 100 + y + (amplitude * math.sin( frequency * (xx - win_x) ))
-		pass:points( xx, yy, 0 )
-		xx = xx + 1
-	end
-
 	released, sl3 = UI2D.SliderFloat( "hello", sl3, 0, 100, 300 )
 	UI2D.End( pass )
 	UI2D.ResetColor( "window_bg" )
@@ -145,9 +126,6 @@ function lovr.draw( pass )
 	UI2D.End( pass )
 
 	local ui_passes = UI2D.RenderFrame( pass )
-
-	-- pass:setColor( 1, 0, 0 )
-	-- pass:plane( 100, 100, 0, 100, 100 )
 	table.insert( ui_passes, pass )
 	return lovr.graphics.submit( ui_passes )
 end

ui2d/ui2d.lua

@@ -16,13 +16,14 @@ local separator_thickness = 2
 local windows = {}
 local color_themes = {}
 local overriden_colors = {}
+local custom_widgets = {}
 local font = { handle = nil, w = nil, h = nil }
 local dragged_window_offset = { x = 0, y = 0 }
 local mouse = { x = 0, y = 0, state = e_mouse_state.idle, prev_frame = 0, this_frame = 0 }
 local texture_flags = { mipmaps = true, usage = { 'sample', 'render', 'transfer' } }
 local layout = { x = 0, y = 0, w = 0, h = 0, row_h = 0, total_w = 0, total_h = 0, same_line = false, same_column = false }
 local clamp_sampler = lovr.graphics.newSampler( { wrap = 'clamp' } )
-local next_z = 1
+local next_z = 0
 
 color_themes.dark =
 {
@@ -143,6 +144,15 @@ local function WindowExists( id )
 	return false, 0
 end
 
+local function WidgetExists( id )
+	for i, v in ipairs( custom_widgets ) do
+		if v.id == id then
+			return true, i
+		end
+	end
+	return false, 0
+end
+
 local function PointInRect( px, py, rx, ry, rw, rh )
 	if px >= rx and px <= rx + rw and py >= ry and py <= ry + rh then
 		return true
@@ -350,43 +360,24 @@ function UI2D.InputInfo()
 		end
 	end
 
+	local z = 0
+	local win = nil
 	if not hovers_active then
 		for i, v in ipairs( windows ) do
 			if PointInRect( mouse.x, mouse.y, v.x, v.y, v.w, v.h ) and mouse.state == e_mouse_state.clicked then
-				active_window = v
-				local z = v.z
-				local idx = nil
-				for j, k in ipairs( windows ) do
-					if k.z < z then
-						z = k.z
-						idx = j
-					end
-				end
-				if idx then
-					v.z = windows[ idx ].z - 0.01
+				if v.z > z then
+					win = v
+					z = v.z
 				end
 			end
 		end
-	end
 
-
-	-- 0.99
-	-- 0.98
-	-- 0.97
-	-- 0.96
-	-- 0.95
-	-- if was_set_to_front then
-	-- 	local z = 100
-	-- 	local old_idx = nil
-	-- 	for i, v in ipairs( windows ) do
-	-- 		if v.z < z then
-	-- 			old_idx = i
-	-- 			z = v.z
-	-- 		end
-	-- 	end
-	-- 	print( windows[ old_idx ].z, windows[ new_idx ].z )
-	-- 	windows[ old_idx ].z, windows[ new_idx ].z = windows[ new_idx ].z, windows[ old_idx ].z
-	-- end
+		if win then
+			next_z = next_z + 0.01
+			win.z = next_z
+			active_window = win
+		end
+	end
 
 	-- Set active to none
 	if not hovers_any and mouse.state == e_mouse_state.clicked then
@@ -404,8 +395,13 @@ function UI2D.InputInfo()
 
 		if dragged_window then
 			if mouse.state == e_mouse_state.held then
-				dragged_window.x = mouse.x - dragged_window_offset.x
-				dragged_window.y = mouse.y - dragged_window_offset.y
+				local mx         = mouse.x
+				local my         = mouse.y
+				local w, h       = lovr.system.getWindowDimensions()
+				mx               = Clamp( mx, 10, w - 10 )
+				my               = Clamp( my, 10, h - 10 )
+				dragged_window.x = mx - dragged_window_offset.x
+				dragged_window.y = my - dragged_window_offset.y
 			end
 		end
 	end
@@ -419,7 +415,7 @@ function UI2D.Begin( name, x, y, is_modal )
 	local exists, idx = WindowExists( name ) -- TODO: Can't currently change window title on runtime
 
 	if not exists then
-		next_z = next_z - 0.01
+		next_z = next_z + 0.01
 		local window = {
 			id = name,
 			title = GetLabelPart( name ),
@@ -1080,60 +1076,74 @@ function UI2D.TextBox( name, num_visible_chars, text )
 	return text
 end
 
-function UI2D.ListBox( name )
-end
-
-function UI2D.CustomWidget( name, width, height )
-	local cur_window = windows[ begin_idx ]
-
-	local bbox = {}
-	if layout.same_line then
-		bbox = { x = layout.x + layout.w + margin, y = layout.y, w = width, h = height }
-	elseif layout.same_column then
-		bbox = { x = layout.x, y = layout.y + layout.h + margin, w = width, h = height }
-	else
-		bbox = { x = margin, y = layout.y + layout.row_h + margin, w = width, h = height }
-	end
-
-	UpdateLayout( bbox )
-
-	local clicked = false
-	local held = false
-	local released = false
-	local hovered = false
-
-	if not modal_window or (modal_window and modal_window == cur_window.id) then
-		if PointInRect( mouse.x, mouse.y, bbox.x + cur_window.x, bbox.y + cur_window.y, bbox.w, bbox.h ) and cur_window == active_window then
-			hovered = true
-
-			if mouse.state == e_mouse_state.clicked then
-				clicked = true
-			end
-
-			if mouse.state == e_mouse_state.held then
-				held = true
-			end
-
-			if mouse.state == e_mouse_state.released then
-				released = true
-			end
-		end
-	end
-
-	table.insert( windows[ begin_idx ].command_list, { type = "rect_wire", bbox = bbox, color = colors.button_border } )
-
-	return clicked, held, released, hovered, cur_window.x + bbox.x, cur_window.y + bbox.y, mouse.x - cur_window.x, mouse.y - cur_window.y, cur_window.x, cur_window.y
-end
+-- NOTE Not implemented yet
+-- function UI2D.ListBox( name )
+-- end
+
+-- NOTE need to rethink this one
+-- function UI2D.CustomWidget( name, width, height )
+-- 	local cur_window = windows[ begin_idx ]
+-- 	local exists, idx = WidgetExists( cur_window.id .. name )
+
+-- 	if not exists then
+-- 		local new_widget = {}
+-- 		new_widget.id = cur_window.id .. name
+-- 		new_widget.texture = lovr.graphics.newTexture( width, height )
+-- 		new_widget.pass = lovr.graphics.newPass( new_widget.texture )
+-- 		new_widget.pass:setProjection( 1, mat4():orthographic( new_widget.pass:getDimensions() ) )
+-- 		table.insert( custom_widgets, new_widget )
+-- 		idx = #custom_widgets
+-- 	end
+
+-- 	local bbox = {}
+-- 	if layout.same_line then
+-- 		bbox = { x = layout.x + layout.w + margin, y = layout.y, w = width, h = height }
+-- 	elseif layout.same_column then
+-- 		bbox = { x = layout.x, y = layout.y + layout.h + margin, w = width, h = height }
+-- 	else
+-- 		bbox = { x = margin, y = layout.y + layout.row_h + margin, w = width, h = height }
+-- 	end
+
+-- 	UpdateLayout( bbox )
+
+-- 	local clicked = false
+-- 	local held = false
+-- 	local released = false
+-- 	local hovered = false
+
+-- 	if not modal_window or (modal_window and modal_window == cur_window.id) then
+-- 		if PointInRect( mouse.x, mouse.y, bbox.x + cur_window.x, bbox.y + cur_window.y, bbox.w, bbox.h ) and cur_window == active_window then
+-- 			hovered = true
+
+-- 			if mouse.state == e_mouse_state.clicked then
+-- 				clicked = true
+-- 			end
+
+-- 			if mouse.state == e_mouse_state.held then
+-- 				held = true
+-- 			end
+
+-- 			if mouse.state == e_mouse_state.released then
+-- 				released = true
+-- 			end
+-- 		end
+-- 	end
+
+-- 	table.insert( windows[ begin_idx ].command_list, { type = "rect_wire", bbox = bbox, color = colors.button_border } )
+-- 	return clicked, held, released, hovered, cur_window.x + bbox.x, cur_window.y + bbox.y, custom_widgets[ idx ].pass
+-- end
 
 function UI2D.NewFrame( main_pass )
 	font.handle:setPixelDensity( 1.0 )
 end
 
 function UI2D.RenderFrame( main_pass )
+	table.sort( windows, function( a, b ) return a.z < b.z end )
+
 	for i, v in ipairs( windows ) do
 		main_pass:setColor( 1, 1, 1 )
 		main_pass:setMaterial( v.texture )
-		main_pass:plane( v.x + (v.w / 2), v.y + (v.h / 2), v.z, v.w, -v.h ) --NOTE flip Y fix
+		main_pass:plane( v.x + (v.w / 2), v.y + (v.h / 2), 0, v.w, -v.h ) --NOTE flip Y fix
 		main_pass:setMaterial()
 	end