Single-selection drag-and-drop demos

[abey79]

What

This PR implements a couple of single-selection drag-and-drop demo with ListItems in re_ui_example. One is flat, the other is hierarchical. Most of it happens in re_ui_example, with some minimal support for draggability in ListItem. The goal is to identify proper patterns (and egui TODOs) for drag-and-drop support in the blueprint tree UI.

TODO:

•  iron out some bug where items disappear
• highlight destination container
• ascii art documentation for the drag areas
• apply any change from:
  • Add Response::contains_pointer emilk/egui#3859
  • Always set response.hovered to false when dragging another widget emilk/egui#3860

drag_and_drop_3.mp4

Contributes towards:

• Interactive layout items in blueprint tree view #2652

Checklist

• I have read and agree to Contributor Guide and the Code of Conduct
• I've included a screenshot or gif (if applicable)
• I have tested the web demo (if applicable):
  • Using newly built examples: app.rerun.io
  • Using examples from latest main build: app.rerun.io
  • Using full set of examples from nightly build: app.rerun.io
• The PR title and labels are set such as to maximize their usefulness for the next release's CHANGELOG

• PR Build Summary
• Docs preview
• Examples preview
• Recent benchmark results
• Wasm size tracking

[emilk]

We can now rebase on main with new egui behavior and features, including response.contains_pointer

[emilk]

So this effectively forms a horizontal line - why not use a Rect here?

[abey79]

Because a rect is one more parameter than I need, and is thus ambiguous?

[github-actions]

Size changes

Name	main	4879/merge	Change
plots.rrd	194.56 kiB	204.80 kiB	+5.26%

[abey79]

We can now rebase on main with new egui behavior and features, including response.contains_pointer

Well funnily I finally don't need it in this case. I'm never testing for an "entire" response rect, but rather up to 4 sub-rects.

[emilk]

I suggest moving the drag-and-drop demo to its own tab, or its own panel. I constantly tried to drag items to "Another section"

[emilk]

I miss the "I'm golding onto this item" effect that the egui.rs demo has:

[emilk]

Heroic work this! ⭐

For extra style points, I suggest storing the DropTarget and interpolating it when it changes, just like drop-targets in egui_tiles. This makes for a much smoother experience for the user. But it can wait for a later PR :)

[abey79]

I miss the "I'm [h]olding onto this item" effect that the egui.rs demo has.

and

For extra style points, I suggest storing the DropTarget and interpolating it when it changes, just like drop-targets in egui_tiles. This makes for a much smoother experience for the user. But it can wait for a later PR :)

I omitted those two things on purpose for two reasons:

1. They become non-trivial as soon as multi-selection is involved.
2. I'm sticking pretty closely to Figma as the "gold standard" of how to do these things.

If at all, I'm considering dragging a small "GH-label-like" blue bubble with the text "N items", as some added indication of what's being dragged, but that's for another PR (at least not until I do multi-selection dragging).

[abey79]

I suggest moving the drag-and-drop demo to its own tab, or its own panel. I constantly tried to drag items to "Another section"

I've moved the demo to the top of the right panel and separated it more clearly from the rest.