
# Objective Add specialized UI transform `Component`s and fix some related problems: * Animating UI elements by modifying the `Transform` component of UI nodes doesn't work very well because `ui_layout_system` overwrites the translations each frame. The `overflow_debug` example uses a horrible hack where it copies the transform into the position that'll likely cause a panic if any users naively copy it. * Picking ignores rotation and scaling and assumes UI nodes are always axis aligned. * The clipping geometry stored in `CalculatedClip` is wrong for rotated and scaled elements. * Transform propagation is unnecessary for the UI, the transforms can be updated during layout updates. * The UI internals use both object-centered and top-left-corner-based coordinates systems for UI nodes. Depending on the context you have to add or subtract the half-size sometimes before transforming between coordinate spaces. We should just use one system consistantly so that the transform can always be directly applied. * `Transform` doesn't support responsive coordinates. ## Solution * Unrequire `Transform` from `Node`. * New components `UiTransform`, `UiGlobalTransform`: - `Node` requires `UiTransform`, `UiTransform` requires `UiGlobalTransform` - `UiTransform` is a 2d-only equivalent of `Transform` with a translation in `Val`s. - `UiGlobalTransform` newtypes `Affine2` and is updated in `ui_layout_system`. * New helper functions on `ComputedNode` for mapping between viewport and local node space. * The cursor position is transformed to local node space during picking so that it respects rotations and scalings. * To check if the cursor hovers a node recursively walk up the tree to the root checking if any of the ancestor nodes clip the point at the cursor. If the point is clipped the interaction is ignored. * Use object-centered coordinates for UI nodes. * `RelativeCursorPosition`'s coordinates are now object-centered with (0,0) at the the center of the node and the corners at (±0.5, ±0.5). * Replaced the `normalized_visible_node_rect: Rect` field of `RelativeCursorPosition` with `cursor_over: bool`, which is set to true when the cursor is over an unclipped point on the node. The visible area of the node is not necessarily a rectangle, so the previous implementation didn't work. This should fix all the logical bugs with non-axis aligned interactions and clipping. Rendering still needs changes but they are far outside the scope of this PR. Tried and abandoned two other approaches: * New `transform` field on `Node`, require `GlobalTransform` on `Node`, and unrequire `Transform` on `Node`. Unrequiring `Transform` opts out of transform propagation so there is then no conflict with updating the `GlobalTransform` in `ui_layout_system`. This was a nice change in its simplicity but potentially confusing for users I think, all the `GlobalTransform` docs mention `Transform` and having special rules for how it's updated just for the UI is unpleasently surprising. * New `transform` field on `Node`. Unrequire `Transform` on `Node`. New `transform: Affine2` field on `ComputedNode`. This was okay but I think most users want a separate specialized UI transform components. The fat `ComputedNode` doesn't work well with change detection. Fixes #18929, #18930 ## Testing There is an example you can look at: ``` cargo run --example ui_transform ``` Sometimes in the example if you press the rotate button couple of times the first glyph from the top label disappears , I'm not sure what's causing it yet but I don't think it's related to this PR. ## Migration Guide New specialized 2D UI transform components `UiTransform` and `UiGlobalTransform`. `UiTransform` is a 2d-only equivalent of `Transform` with a translation in `Val`s. `UiGlobalTransform` newtypes `Affine2` and is updated in `ui_layout_system`. `Node` now requires `UiTransform` instead of `Transform`. `UiTransform` requires `UiGlobalTransform`. In previous versions of Bevy `ui_layout_system` would overwrite UI node's `Transform::translation` each frame. `UiTransform`s aren't overwritten and there is no longer any need for systems that cache and rewrite the transform for translated UI elements. `RelativeCursorPosition`'s coordinates are now object-centered with (0,0) at the the center of the node and the corners at (±0.5, ±0.5). Its `normalized_visible_node_rect` field has been removed and replaced with a new `cursor_over: bool` field which is set to true when the cursor is hovering an unclipped area of the UI node. --------- Co-authored-by: Alice Cecile <alice.i.cecile@gmail.com>
192 lines
5.3 KiB
Rust
192 lines
5.3 KiB
Rust
use crate::Val;
|
|
use bevy_derive::Deref;
|
|
use bevy_ecs::component::Component;
|
|
use bevy_ecs::prelude::ReflectComponent;
|
|
use bevy_math::Affine2;
|
|
use bevy_math::Rot2;
|
|
use bevy_math::Vec2;
|
|
use bevy_reflect::prelude::*;
|
|
|
|
/// A pair of [`Val`]s used to represent a 2-dimensional size or offset.
|
|
#[derive(Debug, PartialEq, Clone, Copy, Reflect)]
|
|
#[reflect(Default, PartialEq, Debug, Clone)]
|
|
#[cfg_attr(
|
|
feature = "serialize",
|
|
derive(serde::Serialize, serde::Deserialize),
|
|
reflect(Serialize, Deserialize)
|
|
)]
|
|
pub struct Val2 {
|
|
/// Translate the node along the x-axis.
|
|
/// `Val::Percent` values are resolved based on the computed width of the Ui Node.
|
|
/// `Val::Auto` is resolved to `0.`.
|
|
pub x: Val,
|
|
/// Translate the node along the y-axis.
|
|
/// `Val::Percent` values are resolved based on the computed height of the UI Node.
|
|
/// `Val::Auto` is resolved to `0.`.
|
|
pub y: Val,
|
|
}
|
|
|
|
impl Val2 {
|
|
pub const ZERO: Self = Self {
|
|
x: Val::ZERO,
|
|
y: Val::ZERO,
|
|
};
|
|
|
|
/// Creates a new [`Val2`] where both components are in logical pixels
|
|
pub const fn px(x: f32, y: f32) -> Self {
|
|
Self {
|
|
x: Val::Px(x),
|
|
y: Val::Px(y),
|
|
}
|
|
}
|
|
|
|
/// Creates a new [`Val2`] where both components are percentage values
|
|
pub const fn percent(x: f32, y: f32) -> Self {
|
|
Self {
|
|
x: Val::Percent(x),
|
|
y: Val::Percent(y),
|
|
}
|
|
}
|
|
|
|
/// Creates a new [`Val2`]
|
|
pub const fn new(x: Val, y: Val) -> Self {
|
|
Self { x, y }
|
|
}
|
|
|
|
/// Resolves this [`Val2`] from the given `scale_factor`, `parent_size`,
|
|
/// and `viewport_size`.
|
|
///
|
|
/// Component values of [`Val::Auto`] are resolved to 0.
|
|
pub fn resolve(&self, scale_factor: f32, base_size: Vec2, viewport_size: Vec2) -> Vec2 {
|
|
Vec2::new(
|
|
self.x
|
|
.resolve(scale_factor, base_size.x, viewport_size)
|
|
.unwrap_or(0.),
|
|
self.y
|
|
.resolve(scale_factor, base_size.y, viewport_size)
|
|
.unwrap_or(0.),
|
|
)
|
|
}
|
|
}
|
|
|
|
impl Default for Val2 {
|
|
fn default() -> Self {
|
|
Self::ZERO
|
|
}
|
|
}
|
|
|
|
/// Relative 2D transform for UI nodes
|
|
///
|
|
/// [`UiGlobalTransform`] is automatically inserted whenever [`UiTransform`] is inserted.
|
|
#[derive(Component, Debug, PartialEq, Clone, Copy, Reflect)]
|
|
#[reflect(Component, Default, PartialEq, Debug, Clone)]
|
|
#[cfg_attr(
|
|
feature = "serialize",
|
|
derive(serde::Serialize, serde::Deserialize),
|
|
reflect(Serialize, Deserialize)
|
|
)]
|
|
#[require(UiGlobalTransform)]
|
|
pub struct UiTransform {
|
|
/// Translate the node.
|
|
pub translation: Val2,
|
|
/// Scale the node. A negative value reflects the node in that axis.
|
|
pub scale: Vec2,
|
|
/// Rotate the node clockwise.
|
|
pub rotation: Rot2,
|
|
}
|
|
|
|
impl UiTransform {
|
|
pub const IDENTITY: Self = Self {
|
|
translation: Val2::ZERO,
|
|
scale: Vec2::ONE,
|
|
rotation: Rot2::IDENTITY,
|
|
};
|
|
|
|
/// Creates a UI transform representing a rotation.
|
|
pub fn from_rotation(rotation: Rot2) -> Self {
|
|
Self {
|
|
rotation,
|
|
..Self::IDENTITY
|
|
}
|
|
}
|
|
|
|
/// Creates a UI transform representing a responsive translation.
|
|
pub fn from_translation(translation: Val2) -> Self {
|
|
Self {
|
|
translation,
|
|
..Self::IDENTITY
|
|
}
|
|
}
|
|
|
|
/// Creates a UI transform representing a scaling.
|
|
pub fn from_scale(scale: Vec2) -> Self {
|
|
Self {
|
|
scale,
|
|
..Self::IDENTITY
|
|
}
|
|
}
|
|
|
|
/// Resolves the translation from the given `scale_factor`, `base_value`, and `target_size`
|
|
/// and returns a 2d affine transform from the resolved translation, and the `UiTransform`'s rotation, and scale.
|
|
pub fn compute_affine(&self, scale_factor: f32, base_size: Vec2, target_size: Vec2) -> Affine2 {
|
|
Affine2::from_scale_angle_translation(
|
|
self.scale,
|
|
self.rotation.as_radians(),
|
|
self.translation
|
|
.resolve(scale_factor, base_size, target_size),
|
|
)
|
|
}
|
|
}
|
|
|
|
impl Default for UiTransform {
|
|
fn default() -> Self {
|
|
Self::IDENTITY
|
|
}
|
|
}
|
|
|
|
/// Absolute 2D transform for UI nodes
|
|
///
|
|
/// [`UiGlobalTransform`]s are updated from [`UiTransform`] and [`Node`](crate::ui_node::Node)
|
|
/// in [`ui_layout_system`](crate::layout::ui_layout_system)
|
|
#[derive(Component, Debug, PartialEq, Clone, Copy, Reflect, Deref)]
|
|
#[reflect(Component, Default, PartialEq, Debug, Clone)]
|
|
#[cfg_attr(
|
|
feature = "serialize",
|
|
derive(serde::Serialize, serde::Deserialize),
|
|
reflect(Serialize, Deserialize)
|
|
)]
|
|
pub struct UiGlobalTransform(Affine2);
|
|
|
|
impl Default for UiGlobalTransform {
|
|
fn default() -> Self {
|
|
Self(Affine2::IDENTITY)
|
|
}
|
|
}
|
|
|
|
impl UiGlobalTransform {
|
|
/// If the transform is invertible returns its inverse.
|
|
/// Otherwise returns `None`.
|
|
#[inline]
|
|
pub fn try_inverse(&self) -> Option<Affine2> {
|
|
(self.matrix2.determinant() != 0.).then_some(self.inverse())
|
|
}
|
|
}
|
|
|
|
impl From<Affine2> for UiGlobalTransform {
|
|
fn from(value: Affine2) -> Self {
|
|
Self(value)
|
|
}
|
|
}
|
|
|
|
impl From<UiGlobalTransform> for Affine2 {
|
|
fn from(value: UiGlobalTransform) -> Self {
|
|
value.0
|
|
}
|
|
}
|
|
|
|
impl From<&UiGlobalTransform> for Affine2 {
|
|
fn from(value: &UiGlobalTransform) -> Self {
|
|
value.0
|
|
}
|
|
}
|