Users can add button to the tab bar

crates/egui_extras/src/dock/behavior.rs

@@ -69,7 +69,15 @@ pub trait Behavior<Leaf> {
         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<Leaf> {
 
     /// 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() // same as the tab contents
-            visuals.window_fill()
         } else {
-            // fade into background:
+            Color32::TRANSPARENT // fade into background
-            self.tab_bar_color(visuals)
         }
     }
 

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<Leaf>(
         &self,
         nodes: &mut Nodes<Leaf>,
@@ -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()
-            ui.painter()
+            .rect_filled(ui.max_rect(), 0.0, behavior.tab_bar_color(ui.visuals()));
-                .rect_filled(ui.max_rect(), 0.0, behavior.tab_bar_color(ui.visuals()));
 
-            for (i, &child_id) in self.children.iter().enumerate() {
+        ui.with_layout(egui::Layout::right_to_left(egui::Align::Center), |ui| {
-                let is_being_dragged = is_being_dragged(ui.ctx(), child_id);
+            behavior.top_bar_rtl_ui(ui, node_id);
 
-                let selected = child_id == self.active;
+            ui.with_layout(egui::Layout::left_to_right(egui::Align::Center), |ui| {
-                let id = child_id.id();
+                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 selected = child_id == self.active;
-                let response = response.on_hover_cursor(egui::CursorIcon::Grab);
+                    let id = child_id.id();
-                if response.clicked() {
-                    next_active = child_id;
-                }
 
-                if let Some(mouse_pos) = drop_context.mouse_pos {
+                    let response =
-                    if drop_context.dragged_node_id.is_some() && response.rect.contains(mouse_pos) {
+                        behavior.tab_ui(nodes, ui, id, child_id, selected, is_being_dragged);
-                        // Expand this tab - maybe the user wants to drop something into it!
+                    let response = response.on_hover_cursor(egui::CursorIcon::Grab);
+                    if response.clicked() {
                         next_active = child_id;
                     }
-                }
 
-                button_rects.insert(child_id, response.rect);
+                    if let Some(mouse_pos) = drop_context.mouse_pos {
-                if is_being_dragged {
+                        if drop_context.dragged_node_id.is_some()
-                    dragged_index = Some(i);
+                            && 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);
+                    }
                 }
-            }
+            });
         });
 
         // -----------

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<dock::NodeId>,
 }
 
 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<View> 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| {