Raygui lib extensions property list.

3 files changed, 307 insertions, 162 deletions

diff --git a/examples/raygui_extensions/main.lua b/examples/raygui_extensions/main.lua
index 6b87ce3..f6b9dee 100644
--- a/examples/raygui_extensions/main.lua
+++ b/examples/raygui_extensions/main.lua
@@ -15,22 +15,32 @@ Gui = Raygui:new()
 
 local buttonTexture = nil
 local winSize = Vec2:new( 1024, 720 )
+local cat = {
+	texture = nil,
+	source = Rect:new(),
+	dest = Rect:new(),
+	origin = Vec2:new(),
+	rotation = 0.0,
+	tint = Color:new( RL.WHITE ),
+	visible = true,
+	flipped = false
+}
 
 local function addButton( bounds, text, callback )
-	local button = Gui:SpriteButton(
+	Gui:SpriteButton(
 		bounds,
 		text,
 		buttonTexture,
 		{ source = { 0, 0, 48, 48 }, left = 16, top = 16, right = 16, bottom = 16, layout = RL.NPATCH_NINE_PATCH },
 		{ source = { 48, 0, 48, 48 }, left = 16, top = 16, right = 16, bottom = 16, layout = RL.NPATCH_NINE_PATCH },
-		callback
+		callback,
+		{
+			{ RL.LABEL, RL.TEXT_ALIGNMENT, RL.TEXT_ALIGN_CENTER },
+			{ RL.LABEL, RL.TEXT_COLOR_NORMAL, RL.ColorToInt( { 84, 59, 22 } ) },
+			{ RL.LABEL, RL.TEXT_COLOR_PRESSED, RL.ColorToInt( { 84/2, 59/2, 22/2 } ) },
+			{ RL.LABEL, RL.TEXT_COLOR_FOCUSED, RL.ColorToInt( RL.GREEN ) },
+		}
 	)
-	button.styles = {
-		{ RL.LABEL, RL.TEXT_ALIGNMENT, RL.TEXT_ALIGN_CENTER },
-		{ RL.LABEL, RL.TEXT_COLOR_NORMAL, RL.ColorToInt( { 84, 59, 22 } ) },
-		{ RL.LABEL, RL.TEXT_COLOR_PRESSED, RL.ColorToInt( { 84/2, 59/2, 22/2 } ) },
-		{ RL.LABEL, RL.TEXT_COLOR_FOCUSED, RL.ColorToInt( RL.GREEN ) },
-	}
 end
 
 local function addSpriteButtons()
@@ -48,156 +58,151 @@ local function addSpriteButtons()
 	addButton( bounds, "Quit", function() RL.CloseWindow() end )
 end
 
+local function getTextValue( text )
+	local value = tonumber( text )
+	if value == nil then value = 0 end
+	return value
+end
+
 local function addPropertyList()
-	local propertyList = Gui:PropertyList(
-		Rect:new( 20, 20, 214, 256 ),
+	PropertyList = Gui:PropertyList(
+		Rect:new( 20, 20, 256, 328 ),
 		"Property List",
-		Rect:new( 0, 0, 200, 400 ),
-		-- Rect:new( 0, 0, 400, 400 ),
-		Vec2:new( 0, 0 ),
 		-- Callback.
 		nil,
 		-- Grab callback.
-		function( self ) Gui:set2Top( self ) end
+		function( self ) Gui:set2Top( self ) end,
+		nil,
+		{
+			{ RL.SCROLLBAR, RL.ARROWS_VISIBLE, RL.ARROWS_VISIBLE },
+		}
 	)
-	local bounds = Rect:new( 2, 2, 200 - 4, 22 )
-	local gap = bounds.height + 2
+	RL.GuiSetStyle( RL.SPINNER, RL.TEXT_ALIGNMENT, RL.TEXT_ALIGN_LEFT )
 
-	propertyList.gui:Button(
-		bounds,
-		"Button",
-		function() print( "Button clicked" ) end
-	)
-	-----
-	bounds.y = bounds.y + gap
-	propertyList.gui:CheckBox(
-		Rect:new( bounds.x, bounds.y, 20, 20 ),
-		"Visible",
-		false,
-		function() print( "Checked!" ) end
-	)
-	-----
-	bounds.y = bounds.y + gap
-	propertyList.gui:Toggle(
-		bounds,
-		"Toggle",
-		false,
-		function( self ) print( "Toggled" ) end
-	)
-	-----
-	bounds.y = bounds.y + gap
-	local dropdown = propertyList.gui:DropdownBox(
-		bounds,
-		"Dog\nGiraffe\nLion\nHorse",
-		0,
+	PropertyList:addControl( PropertyList.gui:Line(
+		Rect:new(),
+		"Cat Texture"
+	) )
+
+	--Transform.
+
+	local transformGroup = PropertyList:addGroup( "Transform", false )
+
+	-- Position.
+	PropertyList:addControl( PropertyList.gui:Label(
+		Rect:new(),
+		"Position:"
+	), transformGroup )
+	PropertyList:addControl( PropertyList.gui:TextBox(
+		Rect:new( 0, 0, 64, 22 ),
+		cat.dest.x,
+		32,
 		false,
-		function( self ) print( self:getItem( self.active ) ) end
-	)
-	-----
-	bounds.y = bounds.y + gap
-	propertyList.gui:Spinner(
-		Rect:new( bounds.x, bounds.y, 96, 20 ),
-		"Health",
-		0,
-		0,
-		100,
+		function( self ) self.value = getTextValue( self.text ) self.text = tostring( self.value ) cat.dest.x = self.value end
+	), transformGroup, true )
+	PropertyList:addControl( PropertyList.gui:TextBox(
+		Rect:new( 74, 0, 64, 22 ),
+		cat.dest.y,
+		32,
 		false,
-		function( self ) print( "Spinner value changed to "..self.value ) end
-	)
-	-----
-	bounds.y = bounds.y + gap
-	propertyList.gui:TextBox(
-		bounds,
-		"Name",
+		function( self ) self.value = getTextValue( self.text ) self.text = tostring( self.value ) cat.dest.y = self.value end
+	), transformGroup )
+	-- Origin.
+	PropertyList:addControl( PropertyList.gui:Label(
+		Rect:new(),
+		"Origin:"
+	), transformGroup )
+	PropertyList:addControl( PropertyList.gui:TextBox(
+		Rect:new( 0, 0, 64, 22 ),
+		cat.dest.x,
 		32,
 		false,
-		function( self ) print( "Set text "..self.text ) end
-	)
-	-----
-	bounds.y = bounds.y + gap
-	propertyList.gui:ColorBarAlpha(
-		bounds,
-		"",
-		1.0
-	)
-	-----
-	bounds.y = bounds.y + gap
-	local valueBox = propertyList.gui:ValueBox(
-		Rect:new( bounds.x, bounds.y, 96, 20 ),
-		"Mana",
-		0,
-		0,
-		100,
+		function( self ) self.value = getTextValue( self.text ) self.text = tostring( self.value ) cat.origin.x = self.value end
+	), transformGroup, true )
+	PropertyList:addControl( PropertyList.gui:TextBox(
+		Rect:new( 74, 0, 64, 22 ),
+		cat.dest.y,
+		32,
 		false,
-		function( self ) print( "ValueBox value changed to "..self.value ) end
-	)
-	valueBox.styles = {
-		{ RL.VALUEBOX, RL.TEXT_PADDING, 2 },
-		{ RL.VALUEBOX, RL.TEXT_ALIGNMENT, RL.TEXT_ALIGN_RIGHT },
-	}
-	-----
-	bounds.y = bounds.y + gap
-	propertyList.gui:Label(
-		bounds,
-		"Label"
-	)
-	-----
-	bounds.y = bounds.y + gap
-	propertyList.gui:Line(
-		bounds,
-		"Divider"
-	)
-	-----
-	bounds.y = bounds.y + gap
-	propertyList.gui:Slider(
-		Rect:new( bounds.x + 38, bounds.y, bounds.width - 80, bounds.height ),
-		"min",
-		"max",
+		function( self ) self.value = getTextValue( self.text ) self.text = tostring( self.value ) cat.origin.y = self.value end
+	), transformGroup )
+	-- Rotation.
+	PropertyList:addControl( PropertyList.gui:Slider(
+		-- Rect:new( 112, 0, PropertyList.defaultControlSize.x - 150, 22 ),
+		Rect:new( 60, 0, PropertyList.defaultControlSize.x - 150, 22 ),
+		"Rotation",
+		"0",
 		0,
 		0,
-		100,
-		function( self ) print( "Changed value "..self.value ) end
-	)
-	-----
-	bounds.y = bounds.y + gap
-	propertyList.gui:SliderBar(
-		Rect:new( bounds.x + 38, bounds.y, bounds.width - 80, bounds.height ),
-		"min",
-		"max",
-		0,
-		0,
-		100,
-		function( self ) print( "Changed value "..self.value ) end
-	)
-	-----
-	bounds.y = bounds.y + gap
-	propertyList.gui:ProgressBar(
-		Rect:new( bounds.x + 38, bounds.y, bounds.width - 80, bounds.height ),
-		"min",
-		"max",
-		0,
-		0,
-		100,
-		function( self ) print( "Changed value "..self.value ) end
-	)
-	-----
-	bounds.y = bounds.y + gap
-	propertyList.gui:ToggleGroup(
-		Rect:new( bounds.x, bounds.y, 64, bounds.height ),
-		"Cat;Dog;Car",
+		360,
+		function( self )
+			self.value = Util.round( self.value )
+			cat.rotation = self.value
+			self.textRight = self.value
+		end
+	), transformGroup )
+	-- Flipped.
+	PropertyList:addControl( PropertyList.gui:CheckBox(
+		Rect:new( 0, 0, 20, 20 ),
+		"Flipped",
+		cat.flipped,
+		function( self ) cat.flipped = self.checked end
+		-- {
+		-- 	{ RL.CHECKBOX, RL.TEXT_ALIGNMENT, RL.TEXT_ALIGN_RIGHT }
+		-- }
+	), transformGroup )
+
+	-- Visibility.
+
+	local visibilityGroup = PropertyList:addGroup( "Visibility", false )
+
+	PropertyList:addControl( PropertyList.gui:CheckBox(
+		Rect:new( 0, 0, 20, 20 ),
+		"Visible",
+		cat.visible,
+		function( self ) cat.visible = self.checked end,
+		{
+			{ RL.CHECKBOX, RL.TEXT_ALIGNMENT, RL.TEXT_ALIGN_RIGHT }
+		}
+	), visibilityGroup )
+
+	local tintGroup = PropertyList:addGroup( "Tint", false, visibilityGroup )
+
+	PropertyList:addControl( PropertyList.gui:ColorPicker(
+		Rect:new( 0, 0, 128, 128 ),
+		"Color Picker",
+		Color:new(),
+		function( self ) cat.tint = self.color end
+	), tintGroup )
+
+	PropertyList:addControl( PropertyList.gui:Line(
+		Rect:new(),
+		"Testing"
+	) )
+
+	PropertyList:addControl( PropertyList.gui:DropdownBox(
+		Rect:new(),
+		"Dog\nGiraffe\nLion\nHorse",
 		0,
+		false,
 		function( self ) print( self:getItem( self.active ) ) end
-	)
-	-----
-	bounds.y = bounds.y + gap
-	propertyList.gui:ColorPicker(
-		Rect:new( bounds.x, bounds.y, 128, 128 ),
-		"",
-		Color:new()
-	)
+	) )
 
-	propertyList.content.height = bounds.y + 130
-	propertyList.gui:set2Top( dropdown )
+	local test = PropertyList:addGroup( "Test", false )
+
+	for i = 1, 5 do
+		PropertyList:addControl( PropertyList.gui:CheckBox(
+			-- Rect:new( 0, 0, 20, 20 ),
+			Rect:new( 128, 0, 20, 20 ),
+			i.."_Visible",
+			false,
+			function( self ) print( "Checked" ) end,
+			{
+				-- { RL.CHECKBOX, RL.TEXT_ALIGNMENT, RL.TEXT_ALIGN_LEFT },
+				{ RL.DEFAULT, RL.TEXT_SIZE, 32 }
+			}
+		), test )
+	end
 end
 
 function RL.init()
@@ -215,6 +220,13 @@ function RL.init()
 	RL.GuiSetStyle( RL.SPINNER, RL.TEXT_ALIGNMENT, RL.TEXT_ALIGN_RIGHT )
 	RL.GuiSetStyle( RL.SPINNER, RL.TEXT_PADDING, 2 )
 
+	cat.texture = RL.LoadTexture( RL.GetBasePath().."../resources/images/cat.png" )
+	local texSize = Vec2:new( RL.GetTextureSize( cat.texture ) )
+	cat.source:set( 0, 0, texSize.x, texSize.y )
+	cat.dest = cat.source:clone()
+
+	RL.GuiLoadStyle( RL.GetBasePath().."../resources/styles/style_dark.rgs" )
+
 	addSpriteButtons()
 	addPropertyList()
 end
@@ -224,6 +236,14 @@ function RL.process( delta )
 end
 
 function RL.draw()
-	RL.ClearBackground( { 50, 20, 75 } )
+	RL.ClearBackground( RL.DARKBLUE )
+
+	if cat.visible then
+		if cat.flipped then
+			RL.DrawTexturePro( cat.texture, { cat.source.x, cat.source.y, -cat.source.width, cat.source.height }, cat.dest, cat.origin, cat.rotation, cat.tint )
+		else
+			RL.DrawTexturePro( cat.texture, cat.source, cat.dest, cat.origin, cat.rotation, cat.tint )
+		end
+	end
 	Gui:draw()
 end
diff --git a/examples/raygui_extensions/property_list.lua b/examples/raygui_extensions/property_list.lua
index e05c84c..13446a9 100644
--- a/examples/raygui_extensions/property_list.lua
+++ b/examples/raygui_extensions/property_list.lua
@@ -1,39 +1,161 @@
 local PropertyList = {}
 PropertyList.__index = PropertyList
 
-function PropertyList:new( bounds, text, content, scroll, callback, grabCallback, dragCallback )
+local RAYGUI_WINDOWBOX_STATUSBAR_HEIGHT = 24
+
+function PropertyList:new( bounds, text, callback, grabCallback, dragCallback, styles )
     local object = setmetatable( {}, self )
 	object._parent = nil
 
+	local scrollBarWidth = RL.GuiGetStyle( RL.LISTVIEW, RL.SCROLLBAR_WIDTH )
+	local borderWidth = RL.GuiGetStyle( RL.DEFAULT, RL.BORDER_WIDTH )
+	object.padding = 4 -- Content edges.
+	object.spacing = 4 -- Between controls.
+
     object.bounds = bounds:clone()
     object.text = text
-    object.content = content:clone()
-    object.scroll = scroll:clone()
+    object.content = Rect:new( 
+		0,
+		RAYGUI_WINDOWBOX_STATUSBAR_HEIGHT,
+		bounds.width - scrollBarWidth - object.padding * 2 - borderWidth * 2,
+		bounds.height - scrollBarWidth - object.padding * 2 - borderWidth * 2
+	)
+    object.scroll = Vec2:new()
 	object.view = Rect:new()
     object.callback = callback
 	object.grabCallback = grabCallback
 	object.dragCallback = dragCallback
+	object.styles = styles
 
 	object.gui = Raygui:new() -- Contains full independent gui system.
+	object.controls = {}
 
-	-- Set initial view and scroll.
-	local _, scrollP, view = RL.GuiScrollPanel( object.bounds, object.text, object.content, object.scroll, object.view )
-	object.scroll = Vec2:new( scrollP )
+	-- Set initial view.
+	local _, _, view = RL.GuiScrollPanel( object.bounds, object.text, object.content, object.scroll, object.view )
 	object.view = Rect:new( view )
 
 	object.gui.view = Rect:new( 0, 0, object.view.width, object.view.height )
-	object.framebuffer = RL.LoadRenderTexture( { object.view.width, object.view.height } )
+	object.framebufferSize = Vec2:new( object.bounds.width, object.bounds.height - RAYGUI_WINDOWBOX_STATUSBAR_HEIGHT )
+	object.framebuffer = RL.LoadRenderTexture( object.framebufferSize )
 
 	object.visible = true
 	object.disabled = false
 	object.draggable = true
-	object.mouseScale = 1
+	object.mouseScale = 1 -- Set this if drawing in different size to render texture for example.
+	object.defaultControlSize = Vec2:new( object.content.width, 22 )
+
+	object._forceCheckScroll = false
+	object._posY = 0 -- In control list update.
 
 	object:updateMouseOffset()
 
 	return object
 end
 
+function PropertyList:getDefaultBounds()
+	return Rect:new( self.padding, self.padding, self.defaultControlSize.x, self.defaultControlSize.y )
+end
+
+local function getControlBounds( control )
+	return control.viewBounds or control.focusBounds or control.bounds
+end
+
+function PropertyList:updateControl( control )
+	if control.visible then
+		control:setPosition( Vec2:new( control.bounds.x, self._posY ) )
+		local bounds = getControlBounds( control )
+
+		if not control._noYAdvance then
+			self._posY = self._posY + bounds.height + self.spacing
+		end
+		self.content = self.content:fit( bounds )
+	end
+
+	if type( control._controls ) == "table" then
+		for _, groupControl in ipairs( control._controls ) do
+			groupControl.visible = control.active
+			-- Deactivate any subgroups.
+			if not control.active and type( groupControl._controls ) == "table" then
+				groupControl.active = false
+			end
+
+			self:updateControl( groupControl )
+		end
+	end
+	self.gui:set2Back( control )
+end
+
+function PropertyList:updateContent()
+	self._posY = self.padding
+
+	self.content.width = 0
+	self.content.height = 0
+
+	for _, control in ipairs( self.controls ) do
+		self:updateControl( control )
+	end
+	self.content.x = 0
+	self.content.y = 0
+	self.content.height = self.content.height + self.padding + self.view.height - self.defaultControlSize.y - self.spacing
+	self.content.width = self.content.width + self.padding
+	self._forceCheckScroll = true
+end
+
+-- Leave control bounds size to 0 to use default. Optional group for parameter 2
+function PropertyList:addControl( control, group, noYAdvance )
+	control._noYAdvance = noYAdvance
+
+	if control.bounds.width == 0 or control.bounds.height == 0 then
+		control.bounds = self:getDefaultBounds()
+	end
+	if control.bounds.x == 0 then
+		control.bounds.x = self.padding
+	end
+
+	if group ~= nil then
+		table.insert( group._controls, control )
+	else
+		table.insert( self.controls, control )
+	end
+
+	self:updateContent()
+	return control
+end
+
+local function setGroupText( text, active )
+	if active then
+		return RL.GuiIconText( 120, text )
+	else
+		return RL.GuiIconText( 119, text )
+	end
+end
+
+function PropertyList:addGroup( name, active, group )
+	if active == nil then
+		active = false
+	end
+
+	local control = self.gui:Toggle(
+		self:getDefaultBounds(),
+		setGroupText( name, active ),
+		active,
+		function( this ) this.text = setGroupText( name, this.active ) self:updateContent() end,
+		{
+			{ RL.TOGGLE, RL.TEXT_ALIGNMENT, RL.TEXT_ALIGN_LEFT }
+		}
+	)
+	control._controls = {} -- Prefix _ to try to prevent clashing with control definition.
+
+	if group ~= nil then
+		table.insert( group._controls, control )
+	else
+		table.insert( self.controls, control )
+	end
+
+	self:updateContent()
+	return control
+end
+
 function PropertyList:process()
 	if not RL.CheckCollisionRecs( self.view, RL.GetMousePosition() ) then
 		self.gui.locked = true
@@ -55,15 +177,17 @@ end
 function PropertyList:draw()
 	local oldScroll = self.scroll:clone()
 	local _, scroll, view = RL.GuiScrollPanel( self.bounds, self.text, self.content, self.scroll, self.view )
+	self.view:set( view )
+	self.scroll:set( scroll )
 
-	self.view = Rect:new( view )
-	self.scroll = Vec2:new( scroll )
-
-	if self.scroll ~= oldScroll then
-		self._parent:checkScrolling()
+	if self.scroll ~= oldScroll or self._forceCheckScroll then
+		if not self._forceCheckScroll then
+			self._parent:checkScrolling()
+		end
+		self._forceCheckScroll = false
 
-		self.gui.view:set( -self.scroll.x, -self.scroll.y, self.view.width, self.view.height )
 		self:updateMouseOffset()
+		self.gui.view:set( -self.scroll.x, -self.scroll.y, self.view.width, self.view.height )
 
 		if self.callback ~= nil then
 			self.callback( self )
@@ -72,7 +196,7 @@ function PropertyList:draw()
 
 	RL.DrawTexturePro(
 		RL.GetRenderTextureTexture( self.framebuffer ),
-		{ 0, 0, self.view.width, -self.view.height },
+		{ 0, self.framebufferSize.y - self.view.height, self.view.width, -self.view.height },
 		{ math.floor( self.view.x ), math.floor( self.view.y ), self.view.width, self.view.height },
 		{ 0, 0 },
 		0.0,
@@ -92,8 +216,8 @@ function PropertyList:setPosition( pos )
 end
 
 function PropertyList:register( gui )
-	function gui:PropertyList( bounds, text, texture, nPatchNormal, nPatchPressed, callback )
-		return self:addElement( PropertyList:new( bounds, text, texture, nPatchNormal, nPatchPressed, callback ) )
+	function gui:PropertyList( bounds, text, callback, grabCallback, dragCallback, styles )
+		return self:addControl( PropertyList:new( bounds, text, callback, grabCallback, dragCallback, styles ) )
 	end
 end
 
diff --git a/examples/raygui_extensions/sprite_button.lua b/examples/raygui_extensions/sprite_button.lua
index 57adc88..2b22344 100644
--- a/examples/raygui_extensions/sprite_button.lua
+++ b/examples/raygui_extensions/sprite_button.lua
@@ -1,7 +1,7 @@
 local SpriteButton = {}
 SpriteButton.__index = SpriteButton
 
-function SpriteButton:new( bounds, text, texture, nPatchNormal, nPatchPressed, callback )
+function SpriteButton:new( bounds, text, texture, nPatchNormal, nPatchPressed, callback, styles )
     local object = setmetatable( {}, self )
 	object._parent = nil
 
@@ -11,6 +11,7 @@ function SpriteButton:new( bounds, text, texture, nPatchNormal, nPatchPressed, c
 	object.nPatchNormal = nPatchNormal
 	object.nPatchPressed = nPatchPressed
     object.callback = callback
+	object.styles = styles
 
 	object.visible = true
 	object.disabled = false
@@ -42,8 +43,8 @@ function SpriteButton:setPosition( pos )
 end
 
 function SpriteButton:register( gui )
-	function gui:SpriteButton( bounds, text, texture, nPatchNormal, nPatchPressed, callback )
-		return self:addElement( SpriteButton:new( bounds, text, texture, nPatchNormal, nPatchPressed, callback ) )
+	function gui:SpriteButton( bounds, text, texture, nPatchNormal, nPatchPressed, callback, styles )
+		return self:addControl( SpriteButton:new( bounds, text, texture, nPatchNormal, nPatchPressed, callback, styles ) )
 	end
 end