Overlaping widgets

[AlphaSteam]

Hello,

I'm using egui for a game engine project for card roguelikes and I wanted to use egui for the cards as ui elements.
The problem is that no matter what I do, I can't put text inside an image. As I read on another issue, widgets are expected not to overlap inside a window.

Could it be possible to allow widgets to overlap each other if explicitly told to do so?
This could help do composed widgets like you do on HTML.

I've tried using Areas, Windows, and Layouts. I tried putting the widget with put and using rects. I tried changing the order of the Widgets.

I also tried creating two areas at the same place, but they don't move at the same time. Perhaps there's a way to link two areas so they move at the same time, but I couldn't figure it out.

I would like to put the text above and below, in front of the card.

If this is already possible, any help to achieve it will be appreciated.

Thanks for everyone's work on this project, it's an awesome library.

[BctfN0HUK7Yg]

I think the better way is to create custom widget for card.
https://github.com/emilk/egui/blob/master/egui_demo_lib/src/apps/demo/toggle_switch.rs

[parasyte]

For a little more context and a theoretical basis, thinking of a "widget" as its individual components (image, text, shapes, etc.) is probably not the right level of abstraction. A widget is a rectangular area that is allocated from the layout, but what exists inside that rectangle is up to the widget itself; it can render any shapes it wants inside that space.

This is how, e.g., the plot widget works. The paths and labels inside the plot are children of the parent rectangle. In short, widgets are a hierarchy, and "overlapping" can be naturally defined by the parent-child relationship.

[emilk]

Overlapping widgets is something I also miss from time to time, e.g. to put controls on top of a canvas that can also be interacted with.

Right now the only way to have overlapping widgets is to use Area:s (e.g. Windows). egui remember the position and sizes of each Area and can therefor on each frame know which one is on top for any single position, and therefore which one should receive a click. The problem is: if you have multiple overlapping widgets in the same Area, which should receive the click?

Some idea for solutions:

• The first widget you add gets the interaction. Requires rendering the widgets front-to-back, which requires adding some better layering (sub-layers per Area) or z-order on the Shapes. This would be a nice feature in any case.
• Having one Area be the child of another, so that it follows the parent:s clip area, and ordering, etc. Seems a bit complicated, but perhaps doable.

How does other immediate mode API:s handle this?

[emilk]

Related: #1516