Almost there! Just need to figure out how to do word wrapping (again?)

examples/ui.rs

@@ -2,10 +2,7 @@
 
 //! This example illustrates scrolling in Bevy UI.
 
-use bevy::picking::{
-    hover::HoverMap,
-    pointer::{PointerId, PointerMap},
-};
+use bevy::picking::hover::HoverMap;
 use games::*;
 use lipsum::*;
 use rand::*;

src/bin/trees/main.rs

@@ -1,6 +1,7 @@
 #![allow(dead_code)]
 #![allow(clippy::type_complexity)]
 #![allow(clippy::too_many_arguments)]
+#![feature(trim_prefix_suffix)]
 
 mod mono;
 
@@ -49,13 +50,13 @@ fn main() {
                     .run_if(on_event::<Pointer<Over>>.or(on_event::<Pointer<Out>>)),
                 scale_window.run_if(on_event::<WindowResized>),
                 hide_menu.run_if(any_component_changed::<NavState>),
+                clear_monologue.run_if(any_component_changed::<NavState>),
                 control_menu.run_if(on_event::<Pointer<Over>>.or(on_event::<Pointer<Out>>)),
             ),
         )
         .add_observer(add_dialog_option)
         .add_observer(add_tree_monologue)
         .add_observer(remove_tree_monologue)
-        .add_observer(hide_monologue_preview)
         .add_observer(populate_tree)
         .add_observer(show_monologue_list)
         .add_observer(hide_monologue_list)
@@ -162,12 +163,17 @@ fn init_debug_ui(mut commands: Commands) {
 
             parent.spawn((
                 Name::new("Preview"),
-                Text::new("This is placeholder text"),
+                MonologuePreview,
+                NavParent(button),
+                NavState::default(),
                 Node {
+                    flex_direction: FlexDirection::Column,
+                    padding: UiRect::all(Val::Px(10.0)),
+                    overflow: Overflow::scroll_y(),
+                    max_width: Val::Percent(50.0),
                     ..default()
                 },
-                BackgroundColor(YELLOW.into()),
-                MonologuePreview,
+                BackgroundColor(ORANGE_RED.into()),
             ));
     });
 }
@@ -561,7 +567,7 @@ fn spawn_debug_buttons(
                 parent
                     .spawn((
                         Button,
-                        Text::new(handle.path().unwrap().to_string()),
+                        Text::new(handle.path().unwrap().to_string().trim_prefix("trees/").trim_suffix(".mono")),
                         TextLayout::new(JustifyText::Left, LineBreak::WordBoundary),
                         TreeMonologue(handle.clone()),
                         MonologuesList,
@@ -572,9 +578,6 @@ fn spawn_debug_buttons(
                     .observe(toggle_debug_button_color_over)
                     .observe(toggle_debug_button_color_out);
             });
-
-            // Spawn a tree too to make the game feel like it's doing something at startup
-            commands.spawn((Tree, TreeMonologue(handle.clone())));
         }
     });
 }
@@ -606,22 +609,29 @@ fn preview_monologue(
 ) {
     // Get the handle for this button's monologuie
     if let Ok(TreeMonologue(handle)) = tree_monologue.get(trigger.target()) {
+
         // Get the monologue data
         if let Some(monologue) = monologues.get(handle) {
             commands.entity(*container).despawn_related::<Children>();
 
             // Spawn the monologue
-            let mut i = 0;
             commands.entity(*container).with_children(|parent| {
+                let mut i = 0;
                 while let Some(batch) = monologue.get(i) {
                     parent.spawn((Text::new("---"), MonologuePreview));
+                    debug!("---");
+
                     for (n, item) in batch.lines.iter().enumerate() {
                         parent.spawn((Text::new(format!("{i}.{n}: {item}")), MonologuePreview));
+                        debug!("{i}.{n}: {item}");
                     }
+
                     // TODO: Just implement iter_batches or something
                     i += 1;
                 }
+
                 parent.spawn((Text::new("---"), MonologuePreview));
+                debug!("---");
             });
         }
     }
@@ -713,26 +723,6 @@ fn populate_tree(
         .observe(drag_tree);
 }
 
-fn hide_monologue_preview(
-    trigger: Trigger<Pointer<Over>>,
-    preview: Single<Entity, (With<MonologuePreview>, Without<Button>, Without<Text>)>,
-    query: Query<
-        Entity,
-        Or<(
-            With<MonologuePreview>,
-            With<MonologuesList>,
-            With<MonologuesContainer>,
-            With<Window>,
-        )>,
-    >,
-    mut commands: Commands,
-) {
-    if !query.contains(trigger.target()) {
-        info!("Processing over: {:?}", trigger.target());
-        commands.entity(*preview).despawn_related::<Children>();
-    }
-}
-
 fn drag_tree(
     trigger: Trigger<Pointer<Drag>>,
     state: Res<State<DebuggingState>>,
@@ -758,13 +748,25 @@ fn drag_tree(
 }
 
 // When you pointer over the '+' make the entire menu visible
-fn hide_menu(mut nodes: Query<(Entity, &mut Visibility, &NavState), Changed<NavState>>) {
+fn hide_menu(
+    mut nodes: Query<(Entity, &mut Visibility, &NavState), Changed<NavState>>
+) {
     nodes.iter_mut().for_each(|(e, mut v, n)| {
         *v = match n {
             NavState::Open => Visibility::Inherited,
             NavState::Closed => Visibility::Hidden,
         };
-        info!("Visiblity for {:?}: {:?}", e, v);
+    });
+}
+
+fn clear_monologue(
+    mut nodes: Query<(Entity, &NavState), (Changed<NavState>, With<MonologuePreview>, Without<Text>)>,
+    mut commands: Commands,
+) {
+    nodes.iter_mut().for_each(|(e, n)| {
+        if matches!(n, NavState::Closed) {
+            commands.entity(e).despawn_related::<Children>();
+        }
     });
 }
 
@@ -784,7 +786,6 @@ fn control_menu(
 
         nav_parents.iter_descendants(root).for_each(|child| {
             if let Ok(mut n) = nav.get_mut(child) {
-                info!("Opening {:?} for {:?}", child, root);
                 *n = NavState::Open;
             }
         });

src/debug.rs

@@ -132,6 +132,7 @@ fn init_debug_ui(mut commands: Commands) {
     commands.spawn((
         DebuggingState::On,
         Text("Tooltip Placeholder".into()),
+        Pickable::IGNORE,
         TextColor(WHITE.into()),
         SyncResource::<ToolTip>::default(),
         BackgroundColor(BLACK.with_alpha(0.9).into()),

src/ui.rs

@@ -25,7 +25,7 @@ pub fn sync_resource_to_ui<R: Resource + Default + Display>(
 }
 
 /// Updates the scroll position of scrollable nodes in response to mouse input
-pub fn scroll(trigger: Trigger<Pointer<Scroll>>, mut scrollers: Query<(Entity, &mut ScrollPosition)>) {
+pub fn scroll(trigger: Trigger<Pointer<Scroll>>, mut scrollers: Query<&mut ScrollPosition>) {
     let Pointer {
         event: Scroll { unit, x, y, .. },
         ..
@@ -36,7 +36,7 @@ pub fn scroll(trigger: Trigger<Pointer<Scroll>>, mut scrollers: Query<(Entity, &
         MouseScrollUnit::Pixel => (x * 1., y * 1.),
     };
 
-    if let Ok((e, mut pos)) = scrollers.get_mut(trigger.target()) {
+    if let Ok(mut pos) = scrollers.get_mut(trigger.target()) {
         pos.offset_x -= dx;
         pos.offset_y -= dy;
     }