Need some help with understanding <Scroll> control

[merlight]

I have a plain <Scroll> control (XML source). No inherits="ZO_Scroll", since it only supports vertical scrolling and I want horizontal. No scrollbar.

Here's a picture of two Torchbug windows inspecting tbugTabWindow1Tabs:

tbugTabWindow1Tabs is the scroll control in the yellow box. It has 14 children: ActiveBg provides the dark background for the active tab "6", and children 2..14 are tab labels that were added dynamically -- intentionally too many to fit, you can see "_mouseSomething" is clipped on the right.

What I don't understand is that both extents.horizontal and extents.vertical are 0 (these are values returned by GetScrollExtents). And when I do /script tbugTabWindow1Tabs:SetHorizontalScroll(10), nothing happens. Offsets remain at 0.

I tried playing with SetScrollBounding, and when I set it to SCROLL_BOUNDING_UNBOUND and then SetHorizontalScroll(10), what happens is this: ActiveBg (the first child) is reanchored to the parent with offsetX=-10 and offsetY=-0 (not kidding, negative zero). All other children stay where they are.

Looking at how ZO_ScrollContainer is implemented, I'm beginning to think that the scroll control determines its inner extents solely from its first child, and that scrolling is actually implemented by shifting that child's anchor in the opposite direction.

Also does anyone know what different ScrollBounding values do? So far I've figured that UNBOUND allows you to SetVertical/HorizontalScroll beyond what GetScrollExtents returns. All other values (BOUND, CONTAINED, DEFAULT) seem to prevent that.

not sure if I understand one word of what you said, but i couldn't find this in your post / file :

ZO_HorizontalScrollList

thats what is used at the crafting station. could be helpful.

[circonian]

Originally Posted by merlight I What I don't understand is that both extents.horizontal and extents.vertical are 0 (these are values returned by GetScrollExtents). And when I do /script tbugTabWindow1Tabs:SetHorizontalScroll(10), nothing happens. Offsets remain at 0.

I'm guessing I must be missing something, but since your not inheriting, there is a lot of stuff missing isn't there? I see no scrollbar, nothing gets initialized (ZO_Scroll_Initialize) (even your tbugTabWindow1 has no .scroll or .scrollbar) I see no handlers to: handle extents changing, OnValueChanged, OnMouseWheel, no btns to move the scroll, exc... I understand you want it horizontal but I see no code to handle anything or maybe your just in the process of building it yourself? What did you expect it to do? Or better yet what are you trying to get it to do?


This probably isn't to helpful, I've never used this, but heres what I noticed using SetHorizontalScroll with:
SCROLL_BOUNDING_CONTAINED -- seems to change the extents & offset
SCROLL_BOUNDING_UNBOUND -- changes the offset only
SCROLL_BOUNDING_BOUND -- changes neither
SCROLL_BOUNDING_DEFAULT -- changes offset only

Changing the bounding allows changing the extent & offsets, but even then nothing happens. You said your 1st control reanchored & moved when you called SetHorizontalScroll() after changing the bounds? It didn't for me. Since I see no code for SetHorizontalScroll, I'm assuming it just sets a value but doesn't actually do anything else and I see no handlers to do anything even if those values change.

As Wandamey said, I would look at zo_horizontalscrolllist.lua & the clothier crafting station code: smithingcreation_shared.xml & smithing_common.xml.

[merlight]

Originally Posted by circonian I'm guessing I must be missing something, but since your not inheriting, there is a lot of stuff missing isn't there?

Yes, it's only purpose so far has been clipping the tab labels so they don't overflow out of the window if you open too many. Scrolling behaviour is what I've been struggling with this weekend. It appears that making a container with resizeToFitDescendents="true" the only child of the scroll, and putting everything in the container is the way to go. E.g. ANIMATION_SCROLL then works on the scroll control.

SetScrollBounding is still a mystery to me, but luckily scrolling works without touching that

Originally Posted by circonian As Wandamey said, I would look at zo_horizontalscrolllist.lua & the clothier crafting station code: smithingcreation_shared.xml & smithing_common.xml.

ZO_HorizontalScrollList is of no use here. It's written for a fixed number of items of equal width.

Originally Posted by merlight ZO_HorizontalScrollList is of no use here. It's written for a fixed number of items of equal width.

and you can't resize your controls depending on the longer one and reinitialize your scrolllist depending on the situation?

Edit : actually that's what the smithing station does already, the table of listed items changes at each station/filter change for the corresponding table.
for the size of the elements idk though. I can't deny that they were all square.

I remember having emptied my crafting lists by accident while I was testing the smithing stations... shouldn't be too hard to reinit.

[circonian]

Originally Posted by merlight ZO_HorizontalScrollList is of no use here. It's written for a fixed number of items of equal width.

Nah, you can do it:




XML:

Warning: Spoiler

<GuiXml>
  <Controls>
        <Control name="TestAddon_HList_Template" virtual="true">
            <Dimensions x="700" y="135" />
 
            <OnInitialized>
                self.label = self:GetNamedChild("Label")
                self.listControl = self:GetNamedChild("List")
            </OnInitialized>
 
            <Controls>
                <Control name="$(parent)List" inherits="ZO_HorizontalScrollListTemplate">
                    <Dimensions x="700" y="64" />
                    <Anchor point="CENTER" />
                </Control>
 
                <Label name="$(parent)Label" font="ZoFontWinH3" color="INTERFACE_COLOR_TYPE_TEXT_COLORS:INTERFACE_TEXT_COLOR_SELECTED" modifyTextType="UPPERCASE" text="title">
                    <Anchor point="TOPLEFT" offsetY="8"/>
                </Label>
            </Controls>
        </Control>
        
        <Control name="TestAddon_HList_SlotTemplate" virtual="true">
            <Dimensions x="200" y="40" />
 
            <OnInitialized>
                self.label = self:GetNamedChild("Label")
            </OnInitialized>
 
            <Controls>
                <Label name="$(parent)Label" font="ZoFontWinH3" color="INTERFACE_COLOR_TYPE_TEXT_COLORS:INTERFACE_TEXT_COLOR_SELECTED" modifyTextType="UPPERCASE" text="titlexx">
                    <AnchorFill />
                </Label>
            </Controls>
        </Control>
  </Controls>
</GuiXml>

LUA:

Warning: Spoiler

local function Create()
    local tlw = CreateTopLevelWindow("TestAddonHListTLW")
    TestAddon.tlw = tlw
    tlw:SetDimensions(700, 200)
    tlw:SetAnchor(CENTER, GuiRoot, CENTER)
    
    local backdrop = CreateControlFromVirtual("TestAddonHListbackdrop", TestAddon.tlw, "ZO_DefaultBackdrop")
    backdrop:SetAnchorFill()
    
    local hList = CreateControlFromVirtual("TestAddonHList", TestAddon.tlw, "TestAddon_HList_Template")
    TestAddon.hList = hList
    hList:SetAnchorFill()
    
    local function OnHorizonalScrollListShown(list)
        --local listContainer = list:GetControl():GetParent() 
        --listContainer.selectedLabel:SetHidden(false)
    end
 
 
    local function EqualityFunction(leftData, rightData)
        return leftData.name == rightData.name
    end
 
    local function OnHorizonalScrollListCleared(...)
       -- self:OnHorizonalScrollListCleared(...)
    end
    
    local function SetupFunction(control, data, selected, selectedDuringRebuild, enabled)
        control.label:SetText(data.name)
        
        local width = control.label:GetStringWidth(control.label:GetText()) + 20
        control:SetWidth(width)
    end
    
    local function OnSelectedPatternChanged(selectedData, selectedDuringRebuild)
    end
    
    local patternList = ZO_HorizontalScrollList:New(hList.listControl, "TestAddon_HList_SlotTemplate", 3, SetupFunction, EqualityFunction, OnHorizonalScrollListShown, OnHorizonalScrollListCleared)
    patternList:SetOnSelectedDataChangedCallback(function(selectedData, oldData, selectedDuringRebuild)
        OnSelectedPatternChanged(selectedData, selectedDuringRebuild)
    end)
    TestAddon.hPatternList = patternList
    
    --patternList.displayEntryType = ZO_HORIZONTAL_SCROLL_LIST_DISPLAY_FIXED_NUMBER_OF_ENTRIES
    patternList.displayEntryType = ZO_HORIZONTAL_SCROLL_LIST_ANCHOR_ENTRIES_AT_FIXED_DISTANCE
    
    patternList.offsetBetweenEntries = 10
    
    patternList:Clear()
    
    patternList:AddEntry({name = "OneOneOneOne"})
    patternList:AddEntry({name = "Two"})
    patternList:AddEntry({name = "ThreeThreeThreeThreeThreeThree"})
    patternList:AddEntry({name = "FourFourFourFourFour"})
    patternList:AddEntry({name = "FiveFive"})
    patternList:AddEntry({name = "SixSixSixSix"})
    patternList:AddEntry({name = "Seven"})
    patternList:AddEntry({name = "EightEightEightEight"})
    
    patternList:Commit()
end

I didn't do this in the screenshots, didn't think of it until afterwords, but if you wanted (you probably would) you can change the DefaultEntryAnchor so that the "selected" control gets aligned left instead of center.

-- add:
local LEFT_PADDING = 50
 
function patternList:SetDefaultEntryAnchor(control, offsetX)
    --control:SetAnchor(CENTER, self.control, CENTER, offsetX)
    control:SetAnchor(LEFT, self.control, LEFT, offsetX + LEFT_PADDING)
end

[merlight]

Interesting, I didn't know ZO_HorizontalScrollList can handle variable width items. And I didn't even think about item-wise scrolling (select next/previous). I only did area scrolling and you have to click to select another item. But I'm starting to like the idea of scrolling selection.

[circonian]

Originally Posted by merlight Interesting, I didn't know ZO_HorizontalScrollList can handle variable width items. And I didn't even think about item-wise scrolling (select next/previous). I only did area scrolling and you have to click to select another item. But I'm starting to like the idea of scrolling selection.

You could still select items by clicking them this way too. You don't even have to handle the clicks, just make the slotTemplate mouseEnabled & the rest is handled for you.

<Control name="HorizontalScroll_HList_SlotTemplate" virtual="true" mouseEnabled="true">

You can also scroll with the mouse wheel or click/drag the bar to scroll through it, its all handled for you. If you wanted you could even hide the big Left/Right buttons.