Got UI with scrolling!

next: dynamic loading (populate UI with each loaded scene)
then: click -> swtich scenes

Cargo.toml

@@ -11,5 +11,9 @@ path = "bin/gltf-inspect.rs"
 name = "camera-image-ui"
 path = "bin/camera-image-ui.rs"
 
+[[bin]]
+name = "ui-wtf"
+path = "bin/ui-wtf.rs"
+
 [dependencies]
 bevy = "0.10"

bin/gltf-inspect.rs

@@ -15,7 +15,6 @@ use bevy::{
         },
         view::RenderLayers,
     },
-    winit::WinitSettings,
 };
 
 fn main() {
@@ -37,6 +36,7 @@ fn main() {
         .add_system(control_camera)
         .add_system(rotate_model)
         .add_system(zoom_model)
+        .add_system(scroll)
         .run();
 }
 
@@ -58,6 +58,9 @@ struct SelectionUI;
 #[derive(Component)]
 struct PreviewCamera;
 
+#[derive(Component)]
+struct ScrollingList;
+
 ///
 /// Load all GLTF models on startup
 fn load_models(mut commands: Commands, ass: Res<AssetServer>) {
@@ -143,8 +146,8 @@ fn spawn_models(
                     info!("Creating preview");
 
                     let size = Extent3d {
-                        width: 512,
-                        height: 512,
+                        width: 256,
+                        height: 256,
                         ..default()
                     };
 
@@ -190,28 +193,60 @@ fn spawn_models(
                         PreviewCamera,
                     ));
 
-                    // Assign render target image to UI element
+                    // UI container
                     commands
                         .spawn(NodeBundle {
-                            style: Style {
-                                size: Size::all(Val::Percent(50.0)),
-                                justify_content: JustifyContent::SpaceBetween,
+                            style: Style t
+                                {
+                                justify_content: JustifyContent::Center,
+                                size: Size::all(Val::Percent(90.0)),
+                                overflow: Overflow::Hidden,
                                 ..default()
                             },
                             ..default()
                         })
                         .with_children(|parent| {
+                            parent
+                                .spawn((
+                                    NodeBundle {
+                                        style: Style {
+                                            flex_wrap: FlexWrap::Wrap,
+                                            flex_direction: FlexDirection::Row,
+                                            justify_content: JustifyContent::SpaceAround,
+                                            size: Size::AUTO,
+                                            max_size: Size::UNDEFINED,
+                                            ..default()
+                                        },
+                                        ..default()
+                                    },
+                                    ScrollingList,
+                                ))
+                                .with_children(|parent| {
+                                    // Preview Image
+                                    let colors = [
+                                        Color::RED,
+                                        Color::GREEN,
+                                        Color::BLUE,
+                                        Color::YELLOW,
+                                        Color::PURPLE,
+                                    ];
+                                    for i in 0..5 {
+                                        info!("Spawning image preview");
                                         parent.spawn(ImageBundle {
                                             style: Style {
-                                    size: Size::all(Val::Percent(100.0)),
+                                                size: Size::all(Val::Px(256.0)),
+                                                padding: UiRect::all(Val::Px(5.0)),
                                                 ..default()
                                             },
+                                            background_color: BackgroundColor(colors[i]),
                                             image: UiImage {
                                                 texture: image_handle.clone(),
                                                 ..default()
                                             },
                                             ..default()
                                         });
+                                    }
+                                });
                         });
                 }
 
@@ -306,13 +341,30 @@ fn rotate_model(
 ///
 /// Zoom in and out of the model
 fn zoom_model(
+    keys: Res<Input<KeyCode>>,
     mut wheel_evr: EventReader<MouseWheel>,
     mut transforms: Query<&mut Transform, With<Inspect>>,
 ) {
+    if keys.pressed(KeyCode::LShift) {
         for ev in wheel_evr.iter() {
             for mut transform in transforms.iter_mut() {
                 let scale = (Vec3::ONE * ev.y) / 100.0;
                 transform.scale += scale;
             }
         }
+    }
+}
+
+fn scroll(
+    mut scroll_evr: EventReader<MouseWheel>,
+    mut query: Query<&mut Style, With<ScrollingList>>,
+) {
+    for ev in scroll_evr.iter() {
+        for mut s in query.iter_mut() {
+            s.position.top = match s.position.top {
+                Val::Px(current) => Val::Px(current + (ev.y * 5.0)),
+                _ => Val::Px(0.0),
+            };
+        }
+    }
 }

bin/ui-wtf.rs

@@ -0,0 +1,99 @@
+use bevy::{input::mouse::MouseWheel, prelude::*};
+
+fn main() {
+    App::new()
+        .add_plugins(DefaultPlugins.set(WindowPlugin {
+            primary_window: Some(Window {
+                title: "UI WTF".into(),
+                resolution: (640., 480.).into(),
+                ..default()
+            }),
+            ..default()
+        }))
+        // Only run when window is active to reduce cpu cycles
+        // .insert_resource(WinitSettings::desktop_app())
+        .add_startup_system(init)
+        .add_system(scroll)
+        .run();
+}
+
+#[derive(Component)]
+struct ScrollingList;
+
+fn init(mut commands: Commands) {
+    info!("Spawning camera");
+    commands.spawn(Camera2dBundle { ..default() });
+
+    info!("Initializing UI");
+    commands
+        .spawn(NodeBundle {
+            background_color: BackgroundColor(Color::WHITE),
+            style: Style {
+                justify_content: JustifyContent::Center,
+                size: Size::all(Val::Percent(90.0)),
+                overflow: Overflow::Hidden,
+                ..default()
+            },
+            ..default()
+        })
+        .with_children(|parent| {
+            parent
+                .spawn((
+                    NodeBundle {
+                        background_color: BackgroundColor(Color::OLIVE),
+                        style: Style {
+                            flex_wrap: FlexWrap::Wrap,
+                            flex_direction: FlexDirection::Row,
+                            justify_content: JustifyContent::SpaceAround,
+                            size: Size::AUTO,
+                            max_size: Size::UNDEFINED,
+                            ..default()
+                        },
+                        ..default()
+                    },
+                    ScrollingList,
+                ))
+                .with_children(|parent| {
+                    info!("Initializing Child Element");
+                    let colors = [
+                        Color::ORANGE,
+                        Color::BLUE,
+                        Color::GREEN,
+                        Color::SALMON,
+                        Color::SEA_GREEN,
+                        Color::MAROON,
+                        Color::ORANGE,
+                        Color::BLUE,
+                        Color::GREEN,
+                        Color::SALMON,
+                        Color::SEA_GREEN,
+                        Color::MAROON,
+                    ];
+                    for i in 0..12 {
+                        parent.spawn(NodeBundle {
+                            background_color: BackgroundColor(colors[i]),
+                            style: Style {
+                                size: Size::all(Val::Px(256.0)),
+                                padding: UiRect::all(Val::Px(5.0)),
+                                ..default()
+                            },
+                            ..default()
+                        });
+                    }
+                });
+        });
+}
+
+fn scroll(
+    mut scroll_evr: EventReader<MouseWheel>,
+    mut query: Query<&mut Style, With<ScrollingList>>,
+) {
+    for ev in scroll_evr.iter() {
+        for mut s in query.iter_mut() {
+            s.position.top = match s.position.top {
+                Val::Px(current) => Val::Px(current + (ev.y * 5.0)),
+                _ => Val::Px(0.0),
+            };
+        }
+    }
+}