From 051ec14b9889d1e6376b8b3fbee1819e0a87ffe2 Mon Sep 17 00:00:00 2001 From: Emil Ernerfeldt Date: Thu, 4 May 2023 15:42:40 +0200 Subject: [PATCH] Users can add button to the tab bar --- crates/egui_extras/src/dock/behavior.rs | 22 ++++++--- crates/egui_extras/src/dock/branch/tabs.rs | 57 ++++++++++++++-------- examples/dock/src/main.rs | 18 +++++++ 3 files changed, 70 insertions(+), 27 deletions(-) diff --git a/crates/egui_extras/src/dock/behavior.rs b/crates/egui_extras/src/dock/behavior.rs index a0638e942..3f9bc5475 100644 --- a/crates/egui_extras/src/dock/behavior.rs +++ b/crates/egui_extras/src/dock/behavior.rs @@ -69,7 +69,15 @@ pub trait Behavior { true } - // --- + /// Adds some UI to the top right of the tab bar. + /// You can use this to, for instance, add a button for adding new tabs. + fn top_bar_rtl_ui(&mut self, _ui: &mut Ui, _node_id: NodeId) { + // if ui.button("➕").clicked() { + // // TODO: add a new thing + // } + } + + // -------- // Settings: /// The height of the bar holding tab names. @@ -102,16 +110,18 @@ pub trait Behavior { /// The background color of the tab bar fn tab_bar_color(&self, visuals: &Visuals) -> Color32 { - (Rgba::from(visuals.window_fill()) * Rgba::from_gray(0.7)).into() + if visuals.dark_mode { + Color32::BLACK + } else { + (Rgba::from(visuals.window_fill()) * Rgba::from_gray(0.8)).into() + } } fn tab_bg_color(&self, visuals: &Visuals, active: bool) -> Color32 { if active { - // blend it with the tab contents: - visuals.window_fill() + visuals.window_fill() // same as the tab contents } else { - // fade into background: - self.tab_bar_color(visuals) + Color32::TRANSPARENT // fade into background } } diff --git a/crates/egui_extras/src/dock/branch/tabs.rs b/crates/egui_extras/src/dock/branch/tabs.rs index 8c1725eae..f1de70fc8 100644 --- a/crates/egui_extras/src/dock/branch/tabs.rs +++ b/crates/egui_extras/src/dock/branch/tabs.rs @@ -19,6 +19,14 @@ impl Tabs { Self { children, active } } + pub fn add_child(&mut self, child: NodeId) { + self.children.push(child); + } + + pub fn set_active(&mut self, child: NodeId) { + self.active = child; + } + pub fn layout( &self, nodes: &mut Nodes, @@ -73,39 +81,46 @@ impl Tabs { let tab_bar_height = behavior.tab_bar_height(ui.style()); let tab_bar_rect = rect.split_top_bottom_at_y(rect.top() + tab_bar_height).0; - let mut tab_bar_ui = ui.child_ui(tab_bar_rect, *ui.layout()); + let mut ui = ui.child_ui(tab_bar_rect, *ui.layout()); let mut button_rects = HashMap::new(); let mut dragged_index = None; - tab_bar_ui.horizontal(|ui| { - ui.painter() - .rect_filled(ui.max_rect(), 0.0, behavior.tab_bar_color(ui.visuals())); + ui.painter() + .rect_filled(ui.max_rect(), 0.0, behavior.tab_bar_color(ui.visuals())); - for (i, &child_id) in self.children.iter().enumerate() { - let is_being_dragged = is_being_dragged(ui.ctx(), child_id); + ui.with_layout(egui::Layout::right_to_left(egui::Align::Center), |ui| { + behavior.top_bar_rtl_ui(ui, node_id); - let selected = child_id == self.active; - let id = child_id.id(); + ui.with_layout(egui::Layout::left_to_right(egui::Align::Center), |ui| { + for (i, &child_id) in self.children.iter().enumerate() { + let is_being_dragged = is_being_dragged(ui.ctx(), child_id); - let response = behavior.tab_ui(nodes, ui, id, child_id, selected, is_being_dragged); - let response = response.on_hover_cursor(egui::CursorIcon::Grab); - if response.clicked() { - next_active = child_id; - } + let selected = child_id == self.active; + let id = child_id.id(); - if let Some(mouse_pos) = drop_context.mouse_pos { - if drop_context.dragged_node_id.is_some() && response.rect.contains(mouse_pos) { - // Expand this tab - maybe the user wants to drop something into it! + let response = + behavior.tab_ui(nodes, ui, id, child_id, selected, is_being_dragged); + let response = response.on_hover_cursor(egui::CursorIcon::Grab); + if response.clicked() { next_active = child_id; } - } - button_rects.insert(child_id, response.rect); - if is_being_dragged { - dragged_index = Some(i); + if let Some(mouse_pos) = drop_context.mouse_pos { + if drop_context.dragged_node_id.is_some() + && response.rect.contains(mouse_pos) + { + // Expand this tab - maybe the user wants to drop something into it! + next_active = child_id; + } + } + + button_rects.insert(child_id, response.rect); + if is_being_dragged { + dragged_index = Some(i); + } } - } + }); }); // ----------- diff --git a/examples/dock/src/main.rs b/examples/dock/src/main.rs index ee5af31b0..0c1f74f39 100644 --- a/examples/dock/src/main.rs +++ b/examples/dock/src/main.rs @@ -58,6 +58,7 @@ struct DockBehavior { simplification_options: dock::SimplificationOptions, tab_bar_height: f32, gap_width: f32, + add_child_to: Option, } impl Default for DockBehavior { @@ -66,6 +67,7 @@ impl Default for DockBehavior { simplification_options: Default::default(), tab_bar_height: 20.0, gap_width: 2.0, + add_child_to: None, } } } @@ -76,6 +78,7 @@ impl DockBehavior { simplification_options, tab_bar_height, gap_width, + add_child_to: _, } = self; egui::Grid::new("behavior_ui") @@ -118,6 +121,12 @@ impl dock::Behavior for DockBehavior { view.title.clone().into() } + fn top_bar_rtl_ui(&mut self, ui: &mut egui::Ui, node_id: dock::NodeId) { + if ui.button("➕").clicked() { + self.add_child_to = Some(node_id); + } + } + // --- // Settings: @@ -208,6 +217,15 @@ impl eframe::App for MyApp { ui.separator(); tree_ui(ui, &mut self.behavior, &mut self.dock.nodes, self.dock.root); + if let Some(parent) = self.behavior.add_child_to.take() { + let new_child = self.dock.nodes.insert_leaf(View::with_nr(666)); + if let Some(dock::Node::Branch(dock::Branch::Tabs(tabs))) = + self.dock.nodes.get_mut(parent) + { + tabs.add_child(new_child); + tabs.set_active(new_child); + } + } }); egui::CentralPanel::default().show(ctx, |ui| {