Two ways scroll box?

[Ivan de Souza]

I'm trying to create a talent tree like Path of Exile. However, i'm needing a two ways scroll to navitage through the talent BP.
The only way i imagined it was a two way scroll(vertical and horizontal), but the scroll box only accepts one of those.
Is there a way to create a 2 way scroll box or do it in another way?

In case you don't know how the PoE talent skill tree looks like, its like this :
https://www.pathofexile.com/passive-skill-tree

[BDC_Patrick]

Ideas would be:
1st:
Pack a second Scrollbox into an existing one. The first one vertical, the second one horizontal.

2nd:
Create a Panel and two Sliders.
One slider uses the vertical space and one the horizontal.
position stuff inside the Panel on sliderH value * content width and sliderV value * content height.

[Everynone]

Here's another idea (that worked for me):

For mouse dragging:

• nest two canvases and shift one in the other
• the top one is the size of the interactable area, the inner one is much larger than the screen - you'd be shifting this one about, it will house all the icons and whatnot
• OnMouseDown captures the attention of the top canvas
• OnMouseMove shifts the inner canvas by CursorDelta

For scrolling bars:

• from my experience, h/v scrollboxes will most likely give you a headache after a while - kind of depends of what you want to achieve, though
• use two slider widgets (placed on the top canvas) for this and map-range them to translate into the size of the inner canvas, overriding their OnValueChanged and setting the inner canvas' slot's position
• you'd want to synchronise the mouse drag and the the sliders so the sliders follow it

Let me know if you have any issues setting it up, I can try to dig it up from one of the old projects. I had the whole thing working without any snags.

For zooming in and out:

• wrap the inner canvas with a ScaleBox and adjust the UserSpecified stretch - this should work in theory, untested.

[Ivan de Souza]

Here's another idea (that worked for me):

For mouse dragging:

• nest two canvases and shift one in the other
• the top one is the size of the interactable area, the inner one is much larger than the screen - you'd be shifting this one about, it will house all the icons and whatnot
• OnMouseDown captures the attention of the top canvas
• OnMouseMove shifts the inner canvas by CursorDelta

For scrolling bars:

• from my experience, h/v scrollboxes will most likely give you a headache after a while - kind of depends of what you want to achieve, though
• use two slider widgets (placed on the top canvas) for this and map-range them to translate into the size of the inner canvas, overriding their OnValueChanged and setting the inner canvas' slot's position
• you'd want to synchronise the mouse drag and the the sliders so the sliders follow it

Let me know if you have any issues setting it up, I can try to dig it up from one of the old projects. I had the whole thing working without any snags.

For zooming in and out:

• wrap the inner canvas with a ScaleBox and adjust the UserSpecified stretch - this should work in theory, untested.

I did what you said and it's working 90% percent fine, however, how could i add a "limit" to the scrolling of the canvas, to not let a "blank" area appear on the viewport?

[Everynone]

You'd need to clamp the value before setting the canvas position: (movable canvas size - viewport size)/2:

[Galvanicus]

You'd need to clamp the value before setting the canvas position: (movable canvas size - viewport size)/2:

[ATTACH=CONFIG]137355[/ATTACH]

I have attempted this for the mouse dragging but couldn't make it work properly. I am not even sure how to debug this further.
I created 2 debugs to track if "is mouse button down" and the "get position".
My first issue is that the mouse button is only registered as down if i double click, not single click. I need to double click, hold and wait a second before it registers as true instead of "on left click and hold".
The second issue is that on second click, it checks for the position but nothing else happens and I cannot drag it around. Had to wait for input to register, this part works!

I have attached both the blueprint and the UI hierarchy.

Edit: I corrected the -1 to 0.5; the issue is no longer the dragging about but the mouse clicking registration.

[Galvanicus]

Well I tried something else for the heck of it and it seems to have worked!
I created 2 overrides for On Mouse Button Down and On Mouse Button Up and set up my own boolean. This seems to register on single clicking.

[the_tubby1]

Is there a way to make this account for the zoom in? Is this supposed to do that already? The limits should extend according to the zoom amount surely?

[Everynone]

Is this supposed to do that already?

Not at this point, no. I did say:

wrap the inner canvas with a ScaleBox and adjust the UserSpecified stretch - this should work in theory, untested.

But it's been 3 years since that so yeah, this ^^^ I hope Sounds like it could work. Still untested :|

[the_tubby1]

Not at this point, no. I did say:

But it's been 3 years since that so yeah, this ^^^ I hope Sounds like it could work. Still untested :|

I used this method and it worked fine so good stuff. But accounting for the zoom with the clamp is the issue. When I zoom I adjust the user specified stretch but then as the size changes the clamped moving limits stay the same so you cant move very far around the zoomed map. If that makes sense.

[Everynone]

If that makes sense.

I think it makes sense. Perhaps it's a matter of translating the stretch value into clamp size - a clamped MapRange node should help here. I cannot tell from the top of my head what values would work but that's how I'd approach it.