From 2e6f96f441ebb8901581bbe0a595b2b93e707d4d Mon Sep 17 00:00:00 2001
From: Ickshonpe <david.curthoys@googlemail.com>
Date: Tue, 18 Oct 2022 12:23:51 +0100
Subject: [PATCH 1/7]     # Allow for flippable UI Images #3225

    Adds the ImageFlip component.
    Adds an ImageFlip field called flip to UiImageBundle.
    Adds flip_x and flip_y fields to ExtractedUiNode.
    Changes extract_uinodes to extract the ImageFlip component values.
    Changes prepare_uinodes to swap the UV coords depending on the values of the ExtractedUiNode's flip_x and flip_y fields.
---
 crates/bevy_ui/src/entity.rs     |  4 +++-
 crates/bevy_ui/src/render/mod.rs | 27 ++++++++++++++++++++++++---
 crates/bevy_ui/src/ui_node.rs    | 10 ++++++++++
 3 files changed, 37 insertions(+), 4 deletions(-)

diff --git a/crates/bevy_ui/src/entity.rs b/crates/bevy_ui/src/entity.rs
index abb73fae70ec2..9825e9d67bd26 100644
--- a/crates/bevy_ui/src/entity.rs
+++ b/crates/bevy_ui/src/entity.rs
@@ -2,7 +2,7 @@
 
 use crate::{
     widget::{Button, ImageMode},
-    BackgroundColor, CalculatedSize, FocusPolicy, Interaction, Node, Style, UiImage,
+    BackgroundColor, CalculatedSize, FocusPolicy, Interaction, Node, Style, UiImage, FlipImage,
 };
 use bevy_ecs::{
     bundle::Bundle,
@@ -81,6 +81,8 @@ pub struct ImageBundle {
     pub background_color: BackgroundColor,
     /// The image of the node
     pub image: UiImage,
+    /// Whether the image should be flipped along its x and y axes.
+    pub flip_image: FlipImage,
     /// Whether this node should block interaction with lower nodes
     pub focus_policy: FocusPolicy,
     /// The transform of the node
diff --git a/crates/bevy_ui/src/render/mod.rs b/crates/bevy_ui/src/render/mod.rs
index 835d0fbc97202..b0e12d8520ad3 100644
--- a/crates/bevy_ui/src/render/mod.rs
+++ b/crates/bevy_ui/src/render/mod.rs
@@ -5,7 +5,7 @@ use bevy_core_pipeline::{core_2d::Camera2d, core_3d::Camera3d};
 pub use pipeline::*;
 pub use render_pass::*;
 
-use crate::{prelude::UiCameraConfig, BackgroundColor, CalculatedClip, Node, UiImage};
+use crate::{prelude::UiCameraConfig, BackgroundColor, CalculatedClip, Node, UiImage, FlipImage};
 use bevy_app::prelude::*;
 use bevy_asset::{load_internal_asset, AssetEvent, Assets, Handle, HandleUntyped};
 use bevy_ecs::prelude::*;
@@ -166,6 +166,8 @@ pub struct ExtractedUiNode {
     pub image: Handle<Image>,
     pub atlas_size: Option<Vec2>,
     pub clip: Option<Rect>,
+    pub flip_x: bool,
+    pub flip_y: bool,
 }
 
 #[derive(Resource, Default)]
@@ -183,12 +185,13 @@ pub fn extract_uinodes(
             &BackgroundColor,
             &UiImage,
             &ComputedVisibility,
+            Option<&FlipImage>,
             Option<&CalculatedClip>,
         )>,
     >,
 ) {
     extracted_uinodes.uinodes.clear();
-    for (uinode, transform, color, image, visibility, clip) in uinode_query.iter() {
+    for (uinode, transform, color, image, visibility,  flip_image, clip) in uinode_query.iter() {
         if !visibility.is_visible() {
             continue;
         }
@@ -201,6 +204,12 @@ pub fn extract_uinodes(
         if color.0.a() == 0.0 {
             continue;
         }
+        let (flip_x, flip_y) = 
+            if let Some(flip) = flip_image {
+                (flip.x_axis, flip.y_axis)
+            } else {
+                (false, false)
+            };
         extracted_uinodes.uinodes.push(ExtractedUiNode {
             transform: transform.compute_matrix(),
             background_color: color.0,
@@ -211,6 +220,8 @@ pub fn extract_uinodes(
             image,
             atlas_size: None,
             clip: clip.map(|clip| clip.clip),
+            flip_x,
+            flip_y,
         });
     }
 }
@@ -330,6 +341,8 @@ pub fn extract_text_uinodes(
                 image: texture,
                 atlas_size,
                 clip: clip.map(|clip| clip.clip),
+                flip_x: false,
+                flip_y: false,
             });
         }
     }
@@ -462,7 +475,7 @@ pub fn prepare_uinodes(
         }
 
         let atlas_extent = extracted_uinode.atlas_size.unwrap_or(uinode_rect.max);
-        let uvs = [
+        let mut uvs = [
             Vec2::new(
                 uinode_rect.min.x + positions_diff[3].x,
                 uinode_rect.min.y - positions_diff[3].y,
@@ -482,6 +495,14 @@ pub fn prepare_uinodes(
         ]
         .map(|pos| pos / atlas_extent);
 
+        if extracted_uinode.flip_x {
+            uvs = [uvs[1], uvs[0], uvs[3], uvs[2]];
+        }
+        if extracted_uinode.flip_y {
+            uvs = [uvs[3], uvs[2], uvs[1], uvs[0]];
+        }
+
+
         for i in QUAD_INDICES {
             ui_meta.vertices.push(UiVertex {
                 position: positions_clipped[i].into(),
diff --git a/crates/bevy_ui/src/ui_node.rs b/crates/bevy_ui/src/ui_node.rs
index 332567274b8ce..9b3fb205d2bcc 100644
--- a/crates/bevy_ui/src/ui_node.rs
+++ b/crates/bevy_ui/src/ui_node.rs
@@ -409,6 +409,16 @@ impl Default for UiImage {
     }
 }
 
+/// Controls whether image is flipped along the x and y axes.
+#[derive(Component, Clone, Debug, Default, Reflect)]
+#[reflect(Component, Default)]
+pub struct FlipImage {
+    /// Flip the image along the x-axis
+    pub x_axis: bool,
+    /// Flip the image along the y-axis
+    pub y_axis: bool,
+}
+
 impl From<Handle<Image>> for UiImage {
     fn from(handle: Handle<Image>) -> Self {
         Self(handle)

From 572a47182b508257702d9004b0c33fdb668a75e3 Mon Sep 17 00:00:00 2001
From: Ickshonpe <david.curthoys@googlemail.com>
Date: Tue, 18 Oct 2022 13:39:13 +0100
Subject: [PATCH 2/7] corrected formatting with cargo fmt

---
 crates/bevy_ui/src/entity.rs     |  2 +-
 crates/bevy_ui/src/render/mod.rs | 16 +++++++---------
 2 files changed, 8 insertions(+), 10 deletions(-)

diff --git a/crates/bevy_ui/src/entity.rs b/crates/bevy_ui/src/entity.rs
index 9825e9d67bd26..8f9e605fb6736 100644
--- a/crates/bevy_ui/src/entity.rs
+++ b/crates/bevy_ui/src/entity.rs
@@ -2,7 +2,7 @@
 
 use crate::{
     widget::{Button, ImageMode},
-    BackgroundColor, CalculatedSize, FocusPolicy, Interaction, Node, Style, UiImage, FlipImage,
+    BackgroundColor, CalculatedSize, FlipImage, FocusPolicy, Interaction, Node, Style, UiImage,
 };
 use bevy_ecs::{
     bundle::Bundle,
diff --git a/crates/bevy_ui/src/render/mod.rs b/crates/bevy_ui/src/render/mod.rs
index b0e12d8520ad3..740f522780bb0 100644
--- a/crates/bevy_ui/src/render/mod.rs
+++ b/crates/bevy_ui/src/render/mod.rs
@@ -5,7 +5,7 @@ use bevy_core_pipeline::{core_2d::Camera2d, core_3d::Camera3d};
 pub use pipeline::*;
 pub use render_pass::*;
 
-use crate::{prelude::UiCameraConfig, BackgroundColor, CalculatedClip, Node, UiImage, FlipImage};
+use crate::{prelude::UiCameraConfig, BackgroundColor, CalculatedClip, FlipImage, Node, UiImage};
 use bevy_app::prelude::*;
 use bevy_asset::{load_internal_asset, AssetEvent, Assets, Handle, HandleUntyped};
 use bevy_ecs::prelude::*;
@@ -191,7 +191,7 @@ pub fn extract_uinodes(
     >,
 ) {
     extracted_uinodes.uinodes.clear();
-    for (uinode, transform, color, image, visibility,  flip_image, clip) in uinode_query.iter() {
+    for (uinode, transform, color, image, visibility, flip_image, clip) in uinode_query.iter() {
         if !visibility.is_visible() {
             continue;
         }
@@ -204,12 +204,11 @@ pub fn extract_uinodes(
         if color.0.a() == 0.0 {
             continue;
         }
-        let (flip_x, flip_y) = 
-            if let Some(flip) = flip_image {
-                (flip.x_axis, flip.y_axis)
-            } else {
-                (false, false)
-            };
+        let (flip_x, flip_y) = if let Some(flip) = flip_image {
+            (flip.x_axis, flip.y_axis)
+        } else {
+            (false, false)
+        };
         extracted_uinodes.uinodes.push(ExtractedUiNode {
             transform: transform.compute_matrix(),
             background_color: color.0,
@@ -502,7 +501,6 @@ pub fn prepare_uinodes(
             uvs = [uvs[3], uvs[2], uvs[1], uvs[0]];
         }
 
-
         for i in QUAD_INDICES {
             ui_meta.vertices.push(UiVertex {
                 position: positions_clipped[i].into(),

From 146a4813434a8dcbd3b14f0e75b8886b1e8d1a4e Mon Sep 17 00:00:00 2001
From: Ickshonpe <david.curthoys@googlemail.com>
Date: Tue, 18 Oct 2022 13:45:25 +0100
Subject: [PATCH 3/7] register_type FlipImage

---
 crates/bevy_ui/src/lib.rs | 1 +
 1 file changed, 1 insertion(+)

diff --git a/crates/bevy_ui/src/lib.rs b/crates/bevy_ui/src/lib.rs
index 6e47967359214..92876c363d21b 100644
--- a/crates/bevy_ui/src/lib.rs
+++ b/crates/bevy_ui/src/lib.rs
@@ -92,6 +92,7 @@ impl Plugin for UiPlugin {
             .register_type::<Style>()
             .register_type::<BackgroundColor>()
             .register_type::<UiImage>()
+            .register_type::<FlipImage>()
             .register_type::<Val>()
             .register_type::<widget::Button>()
             .register_type::<widget::ImageMode>()

From 599abce8f5d3a81c23c967b0e734d0d7c20139d1 Mon Sep 17 00:00:00 2001
From: Ickshonpe <david.curthoys@googlemail.com>
Date: Tue, 1 Nov 2022 16:48:26 +0000
Subject: [PATCH 4/7] Removed ImageFlip. Changed UiImage to a regular struct
 with texture, flip_x and flip_y fields

---
 crates/bevy_ui/src/entity.rs  |  2 --
 crates/bevy_ui/src/ui_node.rs | 35 ++++++++++++++++++++++-------------
 2 files changed, 22 insertions(+), 15 deletions(-)

diff --git a/crates/bevy_ui/src/entity.rs b/crates/bevy_ui/src/entity.rs
index 8f9e605fb6736..d5d7be0524f76 100644
--- a/crates/bevy_ui/src/entity.rs
+++ b/crates/bevy_ui/src/entity.rs
@@ -81,8 +81,6 @@ pub struct ImageBundle {
     pub background_color: BackgroundColor,
     /// The image of the node
     pub image: UiImage,
-    /// Whether the image should be flipped along its x and y axes.
-    pub flip_image: FlipImage,
     /// Whether this node should block interaction with lower nodes
     pub focus_policy: FocusPolicy,
     /// The transform of the node
diff --git a/crates/bevy_ui/src/ui_node.rs b/crates/bevy_ui/src/ui_node.rs
index c888b46a0d1b3..163e70fac5fc9 100644
--- a/crates/bevy_ui/src/ui_node.rs
+++ b/crates/bevy_ui/src/ui_node.rs
@@ -455,29 +455,38 @@ impl From<Color> for BackgroundColor {
 }
 
 /// The 2D texture displayed for this UI node
-#[derive(Component, Clone, Debug, Reflect, Deref, DerefMut)]
+#[derive(Component, Clone, Debug, Reflect)]
 #[reflect(Component, Default)]
-pub struct UiImage(pub Handle<Image>);
+pub struct UiImage {
+    /// Handle to the texture
+    pub texture: Handle<Image>,
+    /// Whether the image should be flipped along its x-axis
+    pub flip_x: bool,
+    /// Whether the image should be flipped along its y-axis
+    pub flip_y: bool,
+}
 
 impl Default for UiImage {
     fn default() -> Self {
-        Self(DEFAULT_IMAGE_HANDLE.typed())
+        Self {
+            texture: DEFAULT_IMAGE_HANDLE.typed(),
+            ..Default::default()
+        }
     }
 }
 
-/// Controls whether image is flipped along the x and y axes.
-#[derive(Component, Clone, Debug, Default, Reflect)]
-#[reflect(Component, Default)]
-pub struct FlipImage {
-    /// Flip the image along the x-axis
-    pub x_axis: bool,
-    /// Flip the image along the y-axis
-    pub y_axis: bool,
+impl UiImage {
+    pub fn new(texture: Handle<Image>) -> Self {
+        Self {
+            texture,
+            ..Default::default()
+        }
+    }
 }
 
 impl From<Handle<Image>> for UiImage {
-    fn from(handle: Handle<Image>) -> Self {
-        Self(handle)
+    fn from(texture: Handle<Image>) -> Self {
+        Self::new(texture)
     }
 }
 

From 3db513c3544cbe56b655361809c5ca3260b2c06f Mon Sep 17 00:00:00 2001
From: Ickshonpe <david.curthoys@googlemail.com>
Date: Tue, 1 Nov 2022 17:09:39 +0000
Subject: [PATCH 5/7] removed FlipImage parameter from extract_ui_nodes,
 changed UiImage derefs to use the texture field instead, fixed game_menu
 example to work with changed UiImage struct

---
 crates/bevy_ui/src/entity.rs       |  2 +-
 crates/bevy_ui/src/lib.rs          |  1 -
 crates/bevy_ui/src/render/mod.rs   | 16 +++++-----------
 crates/bevy_ui/src/ui_node.rs      |  8 ++++----
 crates/bevy_ui/src/widget/image.rs |  2 +-
 examples/games/game_menu.rs        |  8 ++++----
 6 files changed, 15 insertions(+), 22 deletions(-)

diff --git a/crates/bevy_ui/src/entity.rs b/crates/bevy_ui/src/entity.rs
index d5d7be0524f76..abb73fae70ec2 100644
--- a/crates/bevy_ui/src/entity.rs
+++ b/crates/bevy_ui/src/entity.rs
@@ -2,7 +2,7 @@
 
 use crate::{
     widget::{Button, ImageMode},
-    BackgroundColor, CalculatedSize, FlipImage, FocusPolicy, Interaction, Node, Style, UiImage,
+    BackgroundColor, CalculatedSize, FocusPolicy, Interaction, Node, Style, UiImage,
 };
 use bevy_ecs::{
     bundle::Bundle,
diff --git a/crates/bevy_ui/src/lib.rs b/crates/bevy_ui/src/lib.rs
index 4d824361222d1..e1c73540c3ac0 100644
--- a/crates/bevy_ui/src/lib.rs
+++ b/crates/bevy_ui/src/lib.rs
@@ -92,7 +92,6 @@ impl Plugin for UiPlugin {
             .register_type::<Style>()
             .register_type::<BackgroundColor>()
             .register_type::<UiImage>()
-            .register_type::<FlipImage>()
             .register_type::<Val>()
             .register_type::<widget::Button>()
             .register_type::<widget::ImageMode>()
diff --git a/crates/bevy_ui/src/render/mod.rs b/crates/bevy_ui/src/render/mod.rs
index ff10b8bb4dae7..635f32c95f50e 100644
--- a/crates/bevy_ui/src/render/mod.rs
+++ b/crates/bevy_ui/src/render/mod.rs
@@ -5,7 +5,7 @@ use bevy_core_pipeline::{core_2d::Camera2d, core_3d::Camera3d};
 pub use pipeline::*;
 pub use render_pass::*;
 
-use crate::{prelude::UiCameraConfig, BackgroundColor, CalculatedClip, FlipImage, Node, UiImage};
+use crate::{prelude::UiCameraConfig, BackgroundColor, CalculatedClip, Node, UiImage};
 use bevy_app::prelude::*;
 use bevy_asset::{load_internal_asset, AssetEvent, Assets, Handle, HandleUntyped};
 use bevy_ecs::prelude::*;
@@ -211,18 +211,17 @@ pub fn extract_uinodes(
             &BackgroundColor,
             &UiImage,
             &ComputedVisibility,
-            Option<&FlipImage>,
             Option<&CalculatedClip>,
         )>,
     >,
 ) {
     let scale_factor = windows.scale_factor(WindowId::primary()) as f32;
     extracted_uinodes.uinodes.clear();
-    for (uinode, transform, color, image, visibility, flip_image, clip) in uinode_query.iter() {
+    for (uinode, transform, color, ui_image, visibility, clip) in uinode_query.iter() {
         if !visibility.is_visible() {
             continue;
         }
-        let image = image.0.clone_weak();
+        let image = ui_image.texture.clone_weak();
         // Skip loading images
         if !images.contains(&image) {
             continue;
@@ -231,11 +230,6 @@ pub fn extract_uinodes(
         if color.0.a() == 0.0 {
             continue;
         }
-        let (flip_x, flip_y) = if let Some(flip) = flip_image {
-            (flip.x_axis, flip.y_axis)
-        } else {
-            (false, false)
-        };
         extracted_uinodes.uinodes.push(ExtractedUiNode {
             transform: transform.compute_matrix(),
             background_color: color.0,
@@ -246,8 +240,8 @@ pub fn extract_uinodes(
             image,
             atlas_size: None,
             clip: clip.map(|clip| clip.clip),
-            flip_x,
-            flip_y,
+            flip_x: ui_image.flip_x,
+            flip_y: ui_image.flip_y,
             scale_factor,
         });
     }
diff --git a/crates/bevy_ui/src/ui_node.rs b/crates/bevy_ui/src/ui_node.rs
index 163e70fac5fc9..f2279396b37a8 100644
--- a/crates/bevy_ui/src/ui_node.rs
+++ b/crates/bevy_ui/src/ui_node.rs
@@ -1,6 +1,5 @@
 use crate::{Size, UiRect};
 use bevy_asset::Handle;
-use bevy_derive::{Deref, DerefMut};
 use bevy_ecs::{prelude::Component, reflect::ReflectComponent};
 use bevy_math::{Rect, Vec2};
 use bevy_reflect::prelude::*;
@@ -467,10 +466,11 @@ pub struct UiImage {
 }
 
 impl Default for UiImage {
-    fn default() -> Self {
-        Self {
+    fn default() -> UiImage {
+        UiImage {
             texture: DEFAULT_IMAGE_HANDLE.typed(),
-            ..Default::default()
+            flip_x: false,
+            flip_y: false,
         }
     }
 }
diff --git a/crates/bevy_ui/src/widget/image.rs b/crates/bevy_ui/src/widget/image.rs
index 2a8d806e59b89..c6e0e5ad23ed1 100644
--- a/crates/bevy_ui/src/widget/image.rs
+++ b/crates/bevy_ui/src/widget/image.rs
@@ -26,7 +26,7 @@ pub fn image_node_system(
     mut query: Query<(&mut CalculatedSize, &UiImage), (With<ImageMode>, Without<Text>)>,
 ) {
     for (mut calculated_size, image) in &mut query {
-        if let Some(texture) = textures.get(image) {
+        if let Some(texture) = textures.get(&image.texture) {
             let size = Size {
                 width: Val::Px(texture.texture_descriptor.size.width as f32),
                 height: Val::Px(texture.texture_descriptor.size.height as f32),
diff --git a/examples/games/game_menu.rs b/examples/games/game_menu.rs
index 9f2b19ab2ffc1..0045ef2da41ff 100644
--- a/examples/games/game_menu.rs
+++ b/examples/games/game_menu.rs
@@ -90,7 +90,7 @@ mod splash {
                     size: Size::new(Val::Px(200.0), Val::Auto),
                     ..default()
                 },
-                image: UiImage(icon),
+                image: UiImage::new(icon),
                 ..default()
             },
             OnSplashScreen,
@@ -462,7 +462,7 @@ mod menu {
                         let icon = asset_server.load("textures/Game Icons/right.png");
                         parent.spawn(ImageBundle {
                             style: button_icon_style.clone(),
-                            image: UiImage(icon),
+                            image: UiImage::new(icon),
                             ..default()
                         });
                         parent.spawn(TextBundle::from_section(
@@ -483,7 +483,7 @@ mod menu {
                         let icon = asset_server.load("textures/Game Icons/wrench.png");
                         parent.spawn(ImageBundle {
                             style: button_icon_style.clone(),
-                            image: UiImage(icon),
+                            image: UiImage::new(icon),
                             ..default()
                         });
                         parent.spawn(TextBundle::from_section(
@@ -504,7 +504,7 @@ mod menu {
                         let icon = asset_server.load("textures/Game Icons/exitRight.png");
                         parent.spawn(ImageBundle {
                             style: button_icon_style,
-                            image: UiImage(icon),
+                            image: UiImage::new(icon),
                             ..default()
                         });
                         parent.spawn(TextBundle::from_section("Quit", button_text_style));

From 6b38dcd02bcd73766cf2ae5acafa4ae678dafc6c Mon Sep 17 00:00:00 2001
From: Ickshonpe <david.curthoys@googlemail.com>
Date: Thu, 3 Nov 2022 18:12:17 +0000
Subject: [PATCH 6/7] fix different variable names

---
 crates/bevy_ui/src/render/mod.rs | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/crates/bevy_ui/src/render/mod.rs b/crates/bevy_ui/src/render/mod.rs
index 75bc34a2a1198..c93fbc11e0190 100644
--- a/crates/bevy_ui/src/render/mod.rs
+++ b/crates/bevy_ui/src/render/mod.rs
@@ -220,7 +220,7 @@ pub fn extract_uinodes(
     let scale_factor = windows.scale_factor(WindowId::primary()) as f32;
     extracted_uinodes.uinodes.clear();
     for (stack_index, entity) in ui_stack.uinodes.iter().enumerate() {
-        if let Ok((uinode, transform, color, image, visibility, clip)) = uinode_query.get(*entity) {
+        if let Ok((uinode, transform, color, ui_image, visibility, clip)) = uinode_query.get(*entity) {
             if !visibility.is_visible() {
                 continue;
             }

From 010cb584c269a2cafc2de165a2b5bf0508361f79 Mon Sep 17 00:00:00 2001
From: Ickshonpe <david.curthoys@googlemail.com>
Date: Thu, 3 Nov 2022 18:30:45 +0000
Subject: [PATCH 7/7] cargo fmt

---
 crates/bevy_ui/src/render/mod.rs | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/crates/bevy_ui/src/render/mod.rs b/crates/bevy_ui/src/render/mod.rs
index c93fbc11e0190..f5beeebb9e960 100644
--- a/crates/bevy_ui/src/render/mod.rs
+++ b/crates/bevy_ui/src/render/mod.rs
@@ -220,7 +220,9 @@ pub fn extract_uinodes(
     let scale_factor = windows.scale_factor(WindowId::primary()) as f32;
     extracted_uinodes.uinodes.clear();
     for (stack_index, entity) in ui_stack.uinodes.iter().enumerate() {
-        if let Ok((uinode, transform, color, ui_image, visibility, clip)) = uinode_query.get(*entity) {
+        if let Ok((uinode, transform, color, ui_image, visibility, clip)) =
+            uinode_query.get(*entity)
+        {
             if !visibility.is_visible() {
                 continue;
             }