So this is going to be an elaborate post. As I tried to implement a drag & drop system, I could add widgets to a scroll box in the order they were dropped. Then I implemented the functionality to drop the widget at the index it was dropped at, as such:
Adding space, moving the widgets down as you hover a dragable widget (the green area), is done through simply increasing the padding of a widget component. But now I notice some strange behavior. The widget that is dropped on stops updating its visual layout. So as the most recently (dropped ON, not dropped) widget receives the “on drag enter” event, I can using print string see that the padding is set to the exploded state, 60, but it does not update visually.
This is the function to update the scroll box’s widgets order:
And to visualize the problem, when they are updated they receive the exploded state, (padding top 60), resulting in:
Here index 1 (starting at 0) widget was dropped on, thus inserting the dropped item at that index, pushing the dropped on widget to the index 2, which is not exploded.
Notice the timer node in the function. If this exact node setup is executed but on the next frame then the dropped on widget works like every other. I would be content with that solution if it wasn’t for the fact that now the below widgets jitter a bit because it’s not updated until the next frame.
It should be easy to reproduce but I can provide the project with the current setup and a much more simple setup that shows the problem.
Reproduction:
A1. Create the dropable scroll box user widget, add a border and a scroll box to its design. Override On Drop with the following:
A2. New function called “Delayed” with Add child node, target: scrollbox, content: tempwidgetref.
B1. create the dragable user widget. Delete canvas, add border, text block. Border is variable.
B2. override On Drag Detected, “create drag drop operation”, self as payload & drag visual.
B3. override On mouse button down - detect drag if pressed.
C: Add the following setup:
D: Add the things to viewport. Maybe create a second scroll box that holds the dragable widgets.
If done correctly, you will be able to drag the widgets and as they hover over other dragable widgets in the initial scroll box, they will change color. But if add them to the dropable scroll box, they will no longer switch color visually as you drag things over them, but the print string shows that their color values change.
Now the delay, instead of On Drop - add child, On Drop - set timer by function name. The widgets will now change their color visually.
Even though the problems are a bit different, they share the fact that adding the widget as a child on the same frame makes it not work, so I feel they are at the core the same issue.