add scroll-spy stuff

Author: mike-ward

examples/arrows.v

@@ -24,11 +24,11 @@ struct ArrowSymbol {
 
 fn main() {
 	mut window := gui.window(
-		title:   'Arrow Symbols'
-		state:   &ArrowsApp{}
-		width:   1000
-		height:  800
-		on_init: fn (mut w gui.Window) {
+		title:    'Arrow Symbols'
+		state:    &ArrowsApp{}
+		width:    1000
+		height:   800
+		on_init:  fn (mut w gui.Window) {
 			mut app := w.state[ArrowsApp]()
 			app.arrows = get_arrows()
 			// Prepare table data and groups
@@ -202,6 +202,9 @@ fn grid_view(mut w gui.Window) gui.View {
 
 	return gui.column(
 		id:        'grid-scroll'
+		on_scroll: fn (_ &gui.Layout, mut w gui.Window) {
+			update_active_scroll_group(mut w)
+		}
 		id_scroll: 1
 		sizing:    gui.fill_fill
 		padding:   gui.padding_large
@@ -267,6 +270,9 @@ fn list_view(mut w gui.Window) gui.View {
 
 	return gui.column(
 		id:        'list-scroll'
+		on_scroll: fn (_ &gui.Layout, mut w gui.Window) {
+			update_active_scroll_group(mut w)
+		}
 		id_scroll: 1
 		sizing:    gui.fill_fill
 		padding:   gui.padding(0, 0, 15, 15)
@@ -1030,3 +1036,38 @@ fn get_arrows() []ArrowSymbol {
 
 	return arrows
 }
+
+fn update_active_scroll_group(mut w gui.Window) {
+	mut app := w.state[ArrowsApp]()
+	// ID of the main content scrollview
+	scroll_id := if app.view_mode == 'list' { 'list-scroll' } else { 'grid-scroll' }
+
+	// We need to find the scroll container to get its Y position
+	container := w.find_layout_by_id(scroll_id) or { return }
+	container_y := container.shape.y + container.shape.padding.top
+
+	mut active_group := ''
+	// Iterate through groups in reverse order to find the first one that is above the fold?
+	// No, we want the one that is closest to the top but not too far down.
+	// Actually, standard spy logic: last header that has (y <= container_y)
+
+	for group in app.all_groups {
+		if group_layout := w.find_layout_by_id('group-${group}') {
+			// Check if the group header is at or above the top of the container
+			// We give it a little threshold (e.g. 10px) so it selects as soon as it's near top
+			if group_layout.shape.y <= container_y + 10 {
+				active_group = group
+			} else {
+				// Since groups are ordered, once we find one below the fold, we can stop
+				// The previous one (stored in active_group) is the correct one.
+				break
+			}
+		}
+	}
+
+	if active_group != '' && active_group != app.selected_group {
+		app.selected_group = active_group
+		// State changed, ensure window updates next frame
+		w.update_window()
+	}
+}

shape.v

@@ -46,6 +46,7 @@ pub mut:
 	on_mouse_move       fn (&Layout, mut Event, mut Window)    = unsafe { nil }
 	on_mouse_up         fn (&Layout, mut Event, mut Window)    = unsafe { nil }
 	on_mouse_scroll     fn (&Layout, mut Event, mut Window)    = unsafe { nil }
+	on_scroll           fn (&Layout, mut Window)               = unsafe { nil }
 	amend_layout        fn (mut Layout, mut Window)            = unsafe { nil }
 	on_hover            fn (mut Layout, mut Event, mut Window) = unsafe { nil }
 	h_align             HorizontalAlign

view_container.v

@@ -95,6 +95,7 @@ fn (mut cv ContainerView) generate_layout(mut _ Window) Layout {
 			}
 			on_mouse_up:    cv.on_mouse_up
 			on_hover:       cv.on_hover
+			on_scroll:      cv.on_scroll
 			amend_layout:   cv.amend_layout
 		}
 	}
@@ -170,6 +171,7 @@ pub:
 	on_keydown      fn (&Layout, mut Event, mut Window)    = unsafe { nil }
 	on_mouse_move   fn (&Layout, mut Event, mut Window)    = unsafe { nil }
 	on_mouse_up     fn (&Layout, mut Event, mut Window)    = unsafe { nil }
+	on_scroll       fn (&Layout, mut Window)               = unsafe { nil }
 	amend_layout    fn (mut Layout, mut Window)            = unsafe { nil }
 	on_hover        fn (mut Layout, mut Event, mut Window) = unsafe { nil }
 	width           f32
@@ -302,6 +304,7 @@ fn container(cfg ContainerCfg) View {
 		on_mouse_move:  cfg.on_mouse_move
 		on_mouse_up:    cfg.on_mouse_up
 		on_hover:       cfg.on_hover
+		on_scroll:      cfg.on_scroll
 		amend_layout:   cfg.amend_layout
 		content:        content
 	}

view_scrollbar.v

@@ -159,13 +159,19 @@ fn (cfg &ScrollbarCfg) mouse_move_locked(layout &Layout, mut e Event, mut w Wind
 					&& e.mouse_x <= (ly.shape.x + ly.shape.width + extend) {
 					offset := offset_mouse_change_x(ly, e.mouse_dx, cfg.id_track, w)
 					w.view_state.scroll_x[cfg.id_track] = offset
+					if ly.shape.on_scroll != unsafe { nil } {
+						ly.shape.on_scroll(ly, mut w)
+					}
 				}
 			}
 			else {
 				if e.mouse_y >= (ly.shape.y - extend)
 					&& e.mouse_y <= (ly.shape.y + ly.shape.height + extend) {
 					offset := offset_mouse_change_y(ly, e.mouse_dy, cfg.id_track, w)
 					w.view_state.scroll_y[cfg.id_track] = offset
+					if ly.shape.on_scroll != unsafe { nil } {
+						ly.shape.on_scroll(ly, mut w)
+					}
 				}
 			}
 		}
@@ -323,6 +329,9 @@ fn offset_from_mouse_x(layout &Layout, mouse_x f32, id_scroll u32, mut w Window)
 			percent = 1
 		}
 		w.view_state.scroll_x[id_scroll] = -percent * (total_width - sb.shape.width)
+		if sb.shape.on_scroll != unsafe { nil } {
+			sb.shape.on_scroll(sb, mut w)
+		}
 	}
 }
 
@@ -346,6 +355,9 @@ fn offset_from_mouse_y(layout &Layout, mouse_y f32, id_scroll u32, mut w Window)
 			percent = 1
 		}
 		w.view_state.scroll_y[id_scroll] = -percent * (total_height - sb.shape.height)
+		if sb.shape.on_scroll != unsafe { nil } {
+			sb.shape.on_scroll(sb, mut w)
+		}
 	}
 }
 
@@ -365,6 +377,9 @@ fn scroll_horizontal(layout &Layout, delta f32, mut w Window) bool {
 		max_offset := f32_min(0, layout.shape.width - layout.shape.padding.width() - content_width(layout))
 		offset_x := w.view_state.scroll_x[v_id] + delta * gui_theme.scroll_multiplier
 		w.view_state.scroll_x[v_id] = f32_clamp(offset_x, max_offset, 0)
+		if layout.shape.on_scroll != unsafe { nil } {
+			layout.shape.on_scroll(layout, mut w)
+		}
 		return true
 	}
 	return false
@@ -386,6 +401,9 @@ fn scroll_vertical(layout &Layout, delta f32, mut w Window) bool {
 		max_offset := f32_min(0, layout.shape.height - layout.shape.padding.height() - content_height(layout))
 		offset_y := w.view_state.scroll_y[v_id] + delta * gui_theme.scroll_multiplier
 		w.view_state.scroll_y[v_id] = f32_clamp(offset_y, max_offset, 0)
+		if layout.shape.on_scroll != unsafe { nil } {
+			layout.shape.on_scroll(layout, mut w)
+		}
 		return true
 	}
 	return false

xtra_window.v

@@ -179,6 +179,11 @@ fn (mut window Window) update_window_size() {
 	window.window_size = window.ui.window_size()
 }
 
+// find_layout_by_id searches the layout tree for a layout with the given ID.
+pub fn (window &Window) find_layout_by_id(id string) ?Layout {
+	return window.layout.find_by_id(id)
+}
+
 // scroll_to_view scrolls the parent scroll container to make the view with the given id visible.
 pub fn (mut w Window) scroll_to_view(id string) {
 	target := w.layout.find_by_id(id) or { return }