Thread Tools Display Modes
06/20/17, 02:09 AM   #1
Lum1on
AddOn Author - Click to view addons
Join Date: Aug 2016
Posts: 18
ZO_ScrollList's individual rowHeight

Hey,

Is it possible to change the rowHeight individually for every data you push into it?

For example:

Code:
local LibScroll = LibStub:GetLibrary ( "LibScroll" )

Test = { }
Test.name = "Test"

local function _setupCallback ( _control, _data, _list )
	_control:SetText ( _data.text )
	_control:SetFont ( "ZoFontWinH4" )
	
	_control:SetHandler ( "OnMouseDown", function ( _control, _mouseButton )
		if _mouseButton == MOUSE_BUTTON_INDEX_LEFT then
			_list.controlHeight = _control:GetHeight ( )
			
			d ( "DEBUG / _list.controlHeight has been changed" )
		elseif _mouseButton == MOUSE_BUTTON_INDEX_RIGHT then
			d (
				zo_strformat ( "DEBUG / _list.controlHeight: <<1>>, _control:GetHeight ( ): <<2>>",
				_list.controlHeight, _control:GetHeight ( ))
			)
		elseif _mouseButton == MOUSE_BUTTON_INDEX_MIDDLE then
			local _table = {
				{ text = "Short text" },
				{ text = "A little bit longer text" },
				{ text = "Long text to push it to the second row" },
				{ text = "Short text again" }
			}

			ScrollList:Update ( _table )
		end
	end )
end

local function _createWindow ( )
	local _window = WINDOW_MANAGER:CreateTopLevelWindow ( "ScrollListExampleWindow" )

	_window:SetAnchor ( CENTER, GuiRoot, CENTER )
	_window:SetDimensions ( 250, 250 )

	_window.Background = WINDOW_MANAGER:CreateControlFromVirtual ( "ScrollListExampleBackground", _window, "ZO_DefaultBackdrop" )
	_window.Background:SetAnchorFill ( )

	return _window
end

local function _createScrollList ( )
	local _window = _createWindow ( )
	
	local _scrollData = {
		name = "ScrollListExample",
		parent = _window,
		
		width = 230,
		height = 230,
		rowHeight = 24,
		
		setupCallback = _setupCallback
	}
	
	local _scrollList = LibScroll:CreateScrollList ( _scrollData )

	_scrollList:SetAnchor ( TOPLEFT, _window, TOPLEFT, 10, 10 )
	
	return _scrollList
end

local function _initializeScrollList ( )
	local _table = {
		{ text = "Short text" },
		{ text = "A little bit longer text" },
		{ text = "Long text to push it to the second row" },
		{ text = "Short text again" }
	}

	ScrollList = _createScrollList ( )
	ScrollList:Update ( _table )
end

local function AddOnLoaded ( event, addonName )
	if addonName == Test.name then
		_initializeScrollList ( )
		
		EVENT_MANAGER:UnregisterForEvent ( Test.name, EVENT_ADD_ON_LOADED )
	end
end

EVENT_MANAGER:RegisterForEvent ( Test.name, EVENT_ADD_ON_LOADED, AddOnLoaded )
If you right click one of the controls you can see the _list.controlHeight should be 24 (rowHeight) and _control:GetHeight ( ) should be 24 or 48 depending on how many rows it holds.

Now, if you left click the one control that expands to a second row and you right click it you can see that the value of _list.controlHeight changed to be the same than _control:GetHeight ( ) but nothing happens. And the reason why nothing happens is it changes the rowHeight but only for the next items you're going to place in the ZO_ScrollList.

So if you click the middle mouse now it pushes three new texts replacing the previous ones. And those have the new rowHeight you set by left clicking one of the contents.

So how I'm able to change the rowHeight as I'm placing new data in the ZO_ScrollList?

Last edited by Lum1on : 06/20/17 at 02:29 AM.
  Reply With Quote
06/20/17, 02:57 AM   #2
sirinsidiator
 
sirinsidiator's Avatar
AddOn Author - Click to view addons
Join Date: Apr 2014
Posts: 1,566
You can register different data types for different heights, but in the end you need to stick to predefined row heights. Otherwise the scroll list can't calculate the overall height of the content and won't be able to render correctly.
  Reply With Quote
06/20/17, 03:16 AM   #3
Lum1on
AddOn Author - Click to view addons
Join Date: Aug 2016
Posts: 18
Originally Posted by sirinsidiator View Post
You can register different data types for different heights, but in the end you need to stick to predefined row heights. Otherwise the scroll list can't calculate the overall height of the content and won't be able to render correctly.
Thanks for the answer.

But I don't really understand... So I can only have one height for all the data items I have in my ZO_ScrollList? That simply doesn't make any sense.

And I don't really need any different data types for different heights. I want to display a text and if it's too long and it's pushed to a second (or third, fourth, ...) row, the item's height (contentHeight) would change so that it doesn't overlap with other texts inside the ZO_ScrollData.
  Reply With Quote
06/20/17, 04:57 AM   #4
sirinsidiator
 
sirinsidiator's Avatar
AddOn Author - Click to view addons
Join Date: Apr 2014
Posts: 1,566
A scroll list only renders rows that are actually visible on the screen. The other rows do not actually exist while out of view. In order to correctly show the scroll bar and position the elements, the scroll list somehow needs to know how much height all rows will take, but for the non-existing rows it can't call GetHeight, so it uses a predefined height based on the datatype instead.

There are a few possibilities to get dynamic heights to work, but they are rather complicated. Your easiest option is to make sure the text doesn't break into a new row. Either you make your list wide enough, or you cut the text off when it is too long (TextWrapMode) and show a tooltip on mouseover.
  Reply With Quote
06/20/17, 06:11 AM   #5
Lum1on
AddOn Author - Click to view addons
Join Date: Aug 2016
Posts: 18
Originally Posted by sirinsidiator View Post
A scroll list only renders rows that are actually visible on the screen. The other rows do not actually exist while out of view. In order to correctly show the scroll bar and position the elements, the scroll list somehow needs to know how much height all rows will take, but for the non-existing rows it can't call GetHeight, so it uses a predefined height based on the datatype instead.

There are a few possibilities to get dynamic heights to work, but they are rather complicated. Your easiest option is to make sure the text doesn't break into a new row. Either you make your list wide enough, or you cut the text off when it is too long (TextWrapMode) and show a tooltip on mouseover.
Well, that unfortunately is not an option. The window itself is resizable by the user which determines the width and height of the ZO_ScrollList. And the data that the addon pushes into it is based on the player's actions and Events.

Of course I could simple make the rowHeight three times as large as it is now but when most of the data is 1-2 rows it would look kinda silly because of the uneven padding in between.

I've worked with Javascript, C++, XML and QML before so it's not all new. I just don't really understand why LUA doesn't automatically determine the height of the ZO_ScrollList element and it uses a specific height in all of them.

EDIT
I've also tried to research if I could be able to place an empty XML object which has a height defined by the text and it could potentially expand the height, but that's probably just other scenario of the same problem I'm having now; I'm not able to manually define the rowHeight when pushing or updating items in ZO_ScrollList.

Last edited by Lum1on : 06/20/17 at 06:14 AM.
  Reply With Quote
06/20/17, 08:20 AM   #6
Dolgubon
 
Dolgubon's Avatar
AddOn Author - Click to view addons
Join Date: Jan 2016
Posts: 408
Originally Posted by Lum1on View Post
I've worked with Javascript, C++, XML and QML before so it's not all new. I just don't really understand why LUA doesn't automatically determine the height of the ZO_ScrollList element and it uses a specific height in all of them.
ZO_ScrollList isn't something made by Lua, it's made by ZOS, hence the ZO prefix. They just didn't add in that functionality. If you feel it's so important, you might just need to make a version of the scrollList yourself, or maybe you can find one online. I don't know for sure, but I believe generally a scroll list is generally a library written by someone else, not some innate feature of a language.
  Reply With Quote
06/20/17, 08:20 AM   #7
sirinsidiator
 
sirinsidiator's Avatar
AddOn Author - Click to view addons
Join Date: Apr 2014
Posts: 1,566
Originally Posted by Lum1on View Post
I just don't really understand why LUA doesn't automatically determine the height of the ZO_ScrollList element and it uses a specific height in all of them.
That's what I am trying to explain for the third time already. The ZO_ScrollList implementation has no way to know the height, because the elements do not exist while out of view, so it cannot calculate the overall height.
You would need to implement your own function to calculate the overall height in order to do what you want.

EDIT: And as Dolgubon mentions, the ZO_ScrollList is not part of Lua itself. It's a component provided by ZOS.
  Reply With Quote
06/20/17, 08:55 AM   #8
Lum1on
AddOn Author - Click to view addons
Join Date: Aug 2016
Posts: 18
I do know what you said there, it was like more of a general wondering than a question. And yes, ZO_ScrollList is made by ZOS which is quite clear but LUA is still the code language and it doesn't understand (which should've been covered by ZOS itself, in my opinion).

But anyways, thanks for the replies. Will need to take a closer look at it when I have some more time.

I have another question related to the behavior of ZO_ScrollList; I couldn't find any kind of information of it so that's why I'm asking. Are you able to change the direction of scrolling from up-down to down-up?

Thanks!

(Didn't feel like starting a new topic because it's sort of related to this problem...)
  Reply With Quote
06/20/17, 09:11 AM   #9
sirinsidiator
 
sirinsidiator's Avatar
AddOn Author - Click to view addons
Join Date: Apr 2014
Posts: 1,566
ZO_ScrollList is not a wholesome library and ZOS is not a charity. It is merely a tool made for a specific usecase by a company trying to make the most out of their time. It doesn't do anything besides that. If you need extra features, you will need to implement them yourself. That's how it is with almost anything related to ESO addons.

Do you mean the starting position of the scroll list?
If so, you could use
Lua Code:
  1. ZO_Scroll_ScrollAbsoluteInstantly(myScrollList, 100)
to set it to the very bottom.

Last edited by sirinsidiator : 06/20/17 at 09:15 AM. Reason: wrong method name
  Reply With Quote
06/20/17, 10:43 AM   #10
Lum1on
AddOn Author - Click to view addons
Join Date: Aug 2016
Posts: 18
Originally Posted by sirinsidiator View Post
ZO_ScrollList is not a wholesome library and ZOS is not a charity. It is merely a tool made for a specific usecase by a company trying to make the most out of their time. It doesn't do anything besides that. If you need extra features, you will need to implement them yourself. That's how it is with almost anything related to ESO addons.

Do you mean the starting position of the scroll list?
If so, you could use
Lua Code:
  1. ZO_Scroll_ScrollAbsoluteInstantly(myScrollList, 100)
to set it to the very bottom.
Yeah I know it's not a charity. And I do appreciate the work they have and will do.

That ZO_Scroll_ScrollAbsoluteInstantly function, though. I mean that usually ZO_ScrollList works the way that new elements are pushed above the older ones. Like this:
  • New element
  • Excisting element 01
  • Excisting element 02
  • Excisting element 03
  • .
  • (Empty space)
  • .

But how I would like to make it is like this:
  • .
  • (Empty space)
  • .
  • Excisting element 03
  • Excisting element 02
  • Excisting element 01
  • New element
  Reply With Quote
06/20/17, 11:12 AM   #11
Dolgubon
 
Dolgubon's Avatar
AddOn Author - Click to view addons
Join Date: Jan 2016
Posts: 408
Are you looking to change the sort order of the scroll list? That's determined by the functions some fields on the scroll list that you can change.

While you are scrolling, the UI elements go like this:
____
control1
control2
control3
------
and then if you scroll down:
------
control2
control3
control1
------
and control1 has different 'stuff' in it, taking the value next in the (sorted or unsorted) list.
  Reply With Quote
06/20/17, 01:09 PM   #12
sirinsidiator
 
sirinsidiator's Avatar
AddOn Author - Click to view addons
Join Date: Apr 2014
Posts: 1,566
You could do that with a ZO_SortFilterList which is a wrapper around the ZO_ScrollList which allows to filter and sort elements.
  Reply With Quote
06/20/17, 02:36 PM   #13
Lum1on
AddOn Author - Click to view addons
Join Date: Aug 2016
Posts: 18
No, I don't mean sorting the results. I'm not sure how to explain it so I did an example with HTML and javascript:



The left one represents what ZO_ScrollList (and any other list) usually looks like, right? But I want the list to be attached to the bottom of the list and growing upwards like on the image on the right.
  Reply With Quote
06/20/17, 02:47 PM   #14
Rhyono
AddOn Author - Click to view addons
Join Date: Sep 2016
Posts: 659
So you just mean make the list grow up rather than down.
  Reply With Quote
06/20/17, 02:49 PM   #15
sirinsidiator
 
sirinsidiator's Avatar
AddOn Author - Click to view addons
Join Date: Apr 2014
Posts: 1,566
Don't think that is possible. You would need to change how elements are anchored, which is not easily done.
  Reply With Quote
06/20/17, 04:20 PM   #16
Dolgubon
 
Dolgubon's Avatar
AddOn Author - Click to view addons
Join Date: Jan 2016
Posts: 408
You could try hooking the SetAnchor function for each scrollListRow. e.g.

local original = row.SetAnchor
row.setAnchor = function(self, ... AnchorPositionTop, ....) original(self, ... AnchorPositionBottom,...) end

Not sure of names, and this might not actually do what you want, you'd likely need to play around with it a bit.
  Reply With Quote
06/20/17, 10:44 PM   #17
Lum1on
AddOn Author - Click to view addons
Join Date: Aug 2016
Posts: 18
Okay, thanks for the replies. Will try what Dolgubon said and if I can't find a way around it I'll just leave it as it is. But thank you very much for the help.
  Reply With Quote

ESOUI » Developer Discussions » Lua/XML Help » ZO_ScrollList's individual rowHeight

Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

vB code is On
Smilies are On
[IMG] code is On
HTML code is Off