Explain relationship between UiGlobalTransform, entity-local coordinates, and window coordinates

## How can Bevy's documentation be improved?

In previous versions of Bevy, there was a method that allowed you to get the logical rectangle for a UI node. This has been replaced by various properties on `ComputedNode` which interact in complex ways.

There are a several different variables in play here:

* The `translation` field on UiGlobalTransform.
* The `inverse_scale_factor` in ComputedNode.
* The `UiScale` resource.
* The coordinates in picking events.
* The distance value in picking events.

It's not always clear, in the documentation, how to combine these:

* Is the transform field on `UiGlobalTransform` in physical or logical coordinates?
* Are window coordinates logical or physical? By "window coordinates" I mean whatever numbers are used for absolute positioning.
* How can I compute the rectangle of a node in window coordinates?
* How can I compute the rectangle of the window in the same coordinates?
* What's the coordinate origin of a UI node? (Turns out it's the center, but the docs don't say this.)
* A picking coordinates logical or physical?
* Do I need to ever care about camera / world space when working with UI?

So far I have managed to get the right calculations, but this is mostly by accident or by using recipes supplied to me by other people on Discord.

What I would like to see is an overview or reference guide that explains all these different coordinates and how they relate to each other.

@alice-i-cecile @ickshonpe