Geometric primitives for UI

What problem does this solve or what need does it fill?

There are many cases where it would be useful to draw geometric primitives within a UI context:

Lines or curves connecting nodes in a node graph.
A "rubber-band selection rect" drawn with dashed lines.
geometric shapes in a drawing app.

While Bevy has a rich set of geometric primitives, both 2d and 3d, they can't be used in a bevy_ui context but instead must be rendered on a separate layer. This means that you can't:

Have primitives which are clipped to their parent.
Have primitives which scroll when their parent scrolls.
Have primitives that appear in front of some UI elements and behind others, other than by assigning a unique Z-index to every UI element.

The reason this doesn't work is because bevy_ui nodes require certain components, such as Node and Style which are not present on 2d primitives. Simply inserting these components doesn't work either, for example adding Node will cause the entity to be rendered as a box, even if it also has a Mesh component.

What solution would you like?

Ideally, what I would like is a bundle (or whatever concept is going to replace bundles in the future). Just as we have various bevy_ui bundles for Node, ImageNode and so on, we'd have a UiGeometryBundle or something that would operate much like the current 2d primitives (with a Mesh, Material and so on), but would play nicely with bevy_ui.

What alternative(s) have you considered?

I've tried a number of workarounds to this, but none are satisfactory. The best approach so far is an SDF-based UiMaterial that renders geometric primitives, but it has a bunch of drawbacks:

It means having to render the entire bounding-box of the geometry, where most of the pixels are transparent.
It means I can't re-use the existing Bevy 2d primitives, but instead have to come up with SDF equations for each type of geometry - that's a lot of tricky math.

bevyengine / bevy