Custom scroll bar implementation

[stavrosfa]

This PR aims to solve some issues with the built-in Godot scroll bar.

Issues with the native scrollbar and screenshots with the corresponding affected need:

1. We can't position the scroll wherever we want to. If it's vretical it always is on the right hand side, if horizontal is on the bottom. (img 1, img 2).
2. We can't have the scroll be smaller or larger, or any custom size other than that of its container ( img 2).
3. We can't have custom textures for the grabber, as the native one is a fixed size and is calculated based on its scroll container's contents. If we assign a 10x10 texture to the grabber (or any other texture that doesn't exactly fit the grabber size at the time) it will strech horribly.

img 1

img 2

I had tried to tackle this problem again some time in the past, with some minor success, but the grabber issue streching had remained unsolved. Now, this is partly a new a solution that I will try to explain as clearly as possible.

We want to have a scroll container that contains many items.
We create a regular scroll container, we give it a VBoxContainer or a HBoxContainer, and spawn items inside it.
This will automatically create the scrollbar controls we need.
We hide these controls (not hide in the sense of nodes, more like using a style to make them "invisible") and we create our custom scroll bar controls.
These are just visual controls, nothing more. When we move our custom scrollbar grabber or press the increment/decrement buttons, we actually control the "hidden" native scroll bar controls. So we just translate the custom controls movement and position to the the scroll bar that's actually scrolling.

The godot node hierarchy looks something like this

Control
│
├── ScrollContainer
│ └── VBoxContainer
│ ├── Item (HBoxContainer or whatever)
│ ├── Item
│ ├── Item
│ └── Item
│
├──Civ3ScrollBarControl
│ ├── ScrollBar (Civ3VScrollBar or Civ3HScrollBar)
│ └── Civ3ScrollHandle

I tried to export the Civ3ScrollBarControl as a scene to make it easier to add to other scenes, but we are losing some customization control like size, etc. I am no Godot expert, so for now or untill some improvement suggestions come in, I 'll leave it like this.

In this commimt I have intentionally left a horizontal scroll container with a few color rect items in the domestic advisor scene so it's easier to verify that it's working for both directions and sizes and also see that we can have stepped but also free scrolling. This container will be removed after testing.

To test this, open a game that has more than 10 cities or so, open the domestic advisor and the scroll bar will be available.

I have also opened a PR for the standalone art here C7-Game/Assets#13

Once again, I have to disclose I used a lot of chat gpt on this one, especially for debugging, and I had to also fight it a lot to get it to implement some things the way I wanted it to and not some stupid way it was suggesting to me.

[ajhalme]

Looks good. The UIElements folder might benefit from an extra folder for our custom Civ3 UI elements, but this reorg need not be in this PR.

Scrollers themselves work fine. It's vey smooth from the handles, but at least on my Mac touchpad, the scrolling events on the list itself are a bit jumpy.

[WildWeazel]

@stavrosfa good to merge?

[stavrosfa]

The UIElements folder might benefit from an extra folder for our custom Civ3 UI elements

Agreed, let's do this in a future PR.

It's vey smooth from the handles, but at least on my Mac touchpad, the scrolling events on the list itself are a bit jumpy.

The vertical is supposed to be "jumpy", if that's what you mean. It's a scrollbar with the Step attribute enabled, so it goes from px 100 to px 140 at once, if that makes sense. The horizontal scrollbar looks a bit a weird on the gif, so I can't really tell what's going on, but I have noticed myself that the handle "jumps" a bit when first grabbed, if it happens to be in a weird interval. Other than that it's supposed to be a smooth scrollbar (non-Step).

The PR is not ready to merge, since the horizontal bar is just an example, so I need to remove it, and while I was away I thought of something else I want to test, so I 'll let you know when it's ready.

Let me know if you have any other feedback on this.