Panels - nodes that are not movable, holding only one tab at a time

CHANGELOG.md

@@ -1,5 +1,45 @@
 # egui_dock changelog
 
+## 0.7.0 - (to be determined)
+
+### Changed
+
+- Adjusted the styling of tabs to closer follow the egui default styling. ([#139](https://github.com/Adanos020/egui_dock/pull/139))
+- Double-clicking on a separator resets the size of both adjacent nodes. ([#146](https://github.com/Adanos020/egui_dock/pull/146))
+
+### Fixed
+
+- Correctly draw a border around a dock area using the `Style::border` property. ([#139](https://github.com/Adanos020/egui_dock/pull/139))
+
+### Added
+
+- From [#139](https://github.com/Adanos020/egui_dock/pull/139):
+  - `Style::rounding` for the rounding of the dock area border.
+  - `TabStyle::active` for the active style of a tab.
+  - `TabStyle::inactive` for the inactive style of a tab.
+  - `TabStyle::focused` for the focused style of a tab.
+  - `TabStyle::hovered` for the hovered style of a tab.
+  - `TabStyle::tab_body` for styling the body of the tab including background color, stroke color, rounding and inner margin.
+  - `TabStyle::minimum_width` to set the minimum width of the tab.
+  - `TabInteractionStyle` to style the active/inactive/focused/hovered states of a tab.
+- `AllowedSplits` enum which lets you choose in which directions a `DockArea` can be split. ([#145](https://github.com/Adanos020/egui_dock/pull/145))
+- `TabViewer::closable` lets individual tabs be closable or not. ([#150](https://github.com/Adanos020/egui_dock/pull/150))
+
+
+### Breaking changes
+
+- From [#139](https://github.com/Adanos020/egui_dock/pull/139):
+  - Moved `TabStyle::inner_margin` to `TabBodyStyle::inner_margin`.
+  - Moved `TabStyle::fill_tab_bar` to `TabBarStyle::fill_tab_bar`.
+  - Moved `TabStyle::outline_color` to `TabInteractionStyle::outline_color`.
+  - Moved `TabStyle::rounding` to `TabInteractionStyle::rounding`.
+  - Moved `TabStyle::bg_fill` to `TabInteractionStyle::bg_fill`.
+  - Moved `TabStyle::text_color_unfocused` to `TabStyle::inactive.text_color`.
+  - Moved `TabStyle::text_color_active_focused` to `TabStyle::focused.text_color`.
+  - Moved `TabStyle::text_color_active_unfocused` to `TabStyle::active.text_color`.
+  - Renamed `Style::tabs` to `Style::tab`.
+  - Removed `TabStyle::text_color_focused`. This style was practically never reachable.
+
 ## 0.6.3 - 2023-06-16
 
 ### Fixed

Cargo.toml

@@ -2,7 +2,7 @@
 name = "egui_dock"
 description = "Docking support for `egui` - an immediate-mode GUI library for Rust"
 authors = ["lain-dono", "Adam Gąsior (Adanos020)"]
-version = "0.6.3"
+version = "0.7.0"
 edition = "2021"
 rust-version = "1.65"
 license = "MIT"

README.md

@@ -20,7 +20,7 @@ Add `egui` and `egui_dock` to your project's dependencies.
 ```toml
 [dependencies]
 egui = "0.22"
-egui_dock = "0.6"
+egui_dock = "0.7"
 ```
 
 Then proceed by setting up `egui`, following its [quick start guide](https://github.com/emilk/egui#quick-start).

examples/hello.rs

@@ -8,7 +8,9 @@ use egui::{
     CentralPanel, ComboBox, Frame, Slider, TopBottomPanel, Ui, WidgetText,
 };
 
-use egui_dock::{DockArea, Node, NodeIndex, Style, TabViewer, Tree};
+use egui_dock::{
+    AllowedSplits, DockArea, Node, NodeIndex, Style, TabInteractionStyle, TabViewer, Tree,
+};
 
 fn main() -> eframe::Result<()> {
     let options = NativeOptions {
@@ -32,6 +34,7 @@ struct MyContext {
     show_add_buttons: bool,
     draggable_tabs: bool,
     show_tab_name_on_hover: bool,
+    allowed_splits: AllowedSplits,
 }
 
 struct MyApp {
@@ -52,7 +55,7 @@ impl TabViewer for MyContext {
         }
     }
 
-    fn context_menu(&mut self, ui: &mut Ui, tab: &mut Self::Tab) {
+    fn context_menu(&mut self, ui: &mut Ui, tab: &mut Self::Tab, _node: NodeIndex) {
         match tab.as_str() {
             "Simple Demo" => self.simple_demo_menu(ui),
             _ => {
@@ -66,6 +69,10 @@ impl TabViewer for MyContext {
         tab.as_str().into()
     }
 
+    fn closeable(&mut self, tab: &mut Self::Tab) -> bool {
+        ["Inspector", "Style Editor"].contains(&tab.as_str())
+    }
+
     fn on_close(&mut self, tab: &mut Self::Tab) -> bool {
         self.open_tabs.remove(tab);
         true
@@ -102,6 +109,22 @@ impl MyContext {
             ui.checkbox(&mut self.show_add_buttons, "Show add buttons");
             ui.checkbox(&mut self.draggable_tabs, "Draggable tabs");
             ui.checkbox(&mut self.show_tab_name_on_hover, "Show tab name on hover");
+            ComboBox::new("cbox:allowed_splits", "Split direction(s)")
+                .selected_text(format!("{:?}", self.allowed_splits))
+                .show_ui(ui, |ui| {
+                    ui.selectable_value(&mut self.allowed_splits, AllowedSplits::All, "All");
+                    ui.selectable_value(
+                        &mut self.allowed_splits,
+                        AllowedSplits::LeftRightOnly,
+                        "LeftRightOnly",
+                    );
+                    ui.selectable_value(
+                        &mut self.allowed_splits,
+                        AllowedSplits::TopBottomOnly,
+                        "TopBottomOnly",
+                    );
+                    ui.selectable_value(&mut self.allowed_splits, AllowedSplits::None, "None");
+                });
         });
 
         let style = self.style.as_mut().unwrap();
@@ -160,18 +183,15 @@ impl MyContext {
         ui.collapsing("Tabs", |ui| {
             ui.separator();
 
-            ui.checkbox(&mut style.tabs.fill_tab_bar, "Expand tabs");
-            ui.checkbox(
-                &mut style.tabs.hline_below_active_tab_name,
-                "Show a line below the active tab name",
-            );
-
-            ui.separator();
-
+            ui.checkbox(&mut style.tab_bar.fill_tab_bar, "Expand tabs");
             ui.checkbox(
                 &mut style.tab_bar.show_scroll_bar_on_overflow,
                 "Show scroll bar on tab overflow",
             );
+            ui.checkbox(
+                &mut style.tab.hline_below_active_tab_name,
+                "Show a line below the active tab name",
+            );
             ui.horizontal(|ui| {
                 ui.add(Slider::new(&mut style.tab_bar.height, 20.0..=50.0));
                 ui.label("Tab bar height");
@@ -191,51 +211,64 @@ impl MyContext {
 
             ui.separator();
 
-            ui.label("Rounding");
-            ui.horizontal(|ui| {
-                ui.add(Slider::new(&mut style.tabs.rounding.nw, 0.0..=15.0));
-                ui.label("North-West");
+            fn tab_style_editor_ui(ui: &mut Ui, tab_style: &mut TabInteractionStyle) {
+                ui.separator();
+
+                ui.label("Rounding");
+                ui.horizontal(|ui| {
+                    ui.add(Slider::new(&mut tab_style.rounding.nw, 0.0..=15.0));
+                    ui.label("North-West");
+                });
+                ui.horizontal(|ui| {
+                    ui.add(Slider::new(&mut tab_style.rounding.ne, 0.0..=15.0));
+                    ui.label("North-East");
+                });
+                ui.horizontal(|ui| {
+                    ui.add(Slider::new(&mut tab_style.rounding.sw, 0.0..=15.0));
+                    ui.label("South-West");
+                });
+                ui.horizontal(|ui| {
+                    ui.add(Slider::new(&mut tab_style.rounding.se, 0.0..=15.0));
+                    ui.label("South-East");
+                });
+
+                ui.separator();
+
+                egui::Grid::new("tabs_colors").show(ui, |ui| {
+                    ui.label("Title text color:");
+                    color_edit_button_srgba(ui, &mut tab_style.text_color, Alpha::OnlyBlend);
+                    ui.end_row();
+
+                    ui.label("Outline color:")
+                        .on_hover_text("The outline around the active tab name.");
+                    color_edit_button_srgba(ui, &mut tab_style.outline_color, Alpha::OnlyBlend);
+                    ui.end_row();
+
+                    ui.label("Background color:");
+                    color_edit_button_srgba(ui, &mut tab_style.bg_fill, Alpha::OnlyBlend);
+                    ui.end_row();
+                });
+            }
+
+            ui.collapsing("Active", |ui| {
+                tab_style_editor_ui(ui, &mut style.tab.active);
             });
-            ui.horizontal(|ui| {
-                ui.add(Slider::new(&mut style.tabs.rounding.ne, 0.0..=15.0));
-                ui.label("North-East");
+
+            ui.collapsing("Inactive", |ui| {
+                tab_style_editor_ui(ui, &mut style.tab.inactive);
             });
-            ui.horizontal(|ui| {
-                ui.add(Slider::new(&mut style.tabs.rounding.sw, 0.0..=15.0));
-                ui.label("South-West");
+
+            ui.collapsing("Focused", |ui| {
+                tab_style_editor_ui(ui, &mut style.tab.focused);
             });
-            ui.horizontal(|ui| {
-                ui.add(Slider::new(&mut style.tabs.rounding.se, 0.0..=15.0));
-                ui.label("South-East");
+
+            ui.collapsing("Hovered", |ui| {
+                tab_style_editor_ui(ui, &mut style.tab.hovered);
             });
 
             ui.separator();
 
             egui::Grid::new("tabs_colors").show(ui, |ui| {
-                ui.label("Title text color, inactive and unfocused:");
-                color_edit_button_srgba(ui, &mut style.tabs.text_color_unfocused, Alpha::OnlyBlend);
-                ui.end_row();
-
-                ui.label("Title text color, inactive and focused:");
-                color_edit_button_srgba(ui, &mut style.tabs.text_color_focused, Alpha::OnlyBlend);
-                ui.end_row();
-
-                ui.label("Title text color, active and unfocused:");
-                color_edit_button_srgba(
-                    ui,
-                    &mut style.tabs.text_color_active_unfocused,
-                    Alpha::OnlyBlend,
-                );
-                ui.end_row();
-
-                ui.label("Title text color, active and focused:");
-                color_edit_button_srgba(
-                    ui,
-                    &mut style.tabs.text_color_active_focused,
-                    Alpha::OnlyBlend,
-                );
-                ui.end_row();
-
                 ui.label("Close button color unfocused:");
                 color_edit_button_srgba(ui, &mut style.buttons.close_tab_color, Alpha::OnlyBlend);
                 ui.end_row();
@@ -256,19 +289,49 @@ impl MyContext {
                 color_edit_button_srgba(ui, &mut style.tab_bar.bg_fill, Alpha::OnlyBlend);
                 ui.end_row();
 
-                ui.label("Outline color:")
-                    .on_hover_text("The outline around the active tab name.");
-                color_edit_button_srgba(ui, &mut style.tabs.outline_color, Alpha::OnlyBlend);
-                ui.end_row();
-
                 ui.label("Horizontal line color:").on_hover_text(
                     "The line separating the tab name area from the tab content area",
                 );
                 color_edit_button_srgba(ui, &mut style.tab_bar.hline_color, Alpha::OnlyBlend);
                 ui.end_row();
+            });
+        });
+
+        ui.collapsing("Tab body", |ui| {
+            ui.separator();
+
+            ui.label("Rounding");
+            ui.horizontal(|ui| {
+                ui.add(Slider::new(&mut style.tab.tab_body.rounding.nw, 0.0..=15.0));
+                ui.label("North-West");
+            });
+            ui.horizontal(|ui| {
+                ui.add(Slider::new(&mut style.tab.tab_body.rounding.ne, 0.0..=15.0));
+                ui.label("North-East");
+            });
+            ui.horizontal(|ui| {
+                ui.add(Slider::new(&mut style.tab.tab_body.rounding.sw, 0.0..=15.0));
+                ui.label("South-West");
+            });
+            ui.horizontal(|ui| {
+                ui.add(Slider::new(&mut style.tab.tab_body.rounding.se, 0.0..=15.0));
+                ui.label("South-East");
+            });
+
+            ui.label("Stroke width:");
+            ui.add(Slider::new(
+                &mut style.tab.tab_body.stroke.width,
+                0.0..=10.0,
+            ));
+            ui.end_row();
+
+            egui::Grid::new("tab_body_colors").show(ui, |ui| {
+                ui.label("Stroke color:");
+                color_edit_button_srgba(ui, &mut style.tab.tab_body.stroke.color, Alpha::OnlyBlend);
+                ui.end_row();
 
                 ui.label("Background color:");
-                color_edit_button_srgba(ui, &mut style.tabs.bg_fill, Alpha::OnlyBlend);
+                color_edit_button_srgba(ui, &mut style.tab.tab_body.bg_fill, Alpha::OnlyBlend);
                 ui.end_row();
             });
         });
@@ -305,6 +368,7 @@ impl Default for MyApp {
             show_add_buttons: false,
             draggable_tabs: true,
             show_tab_name_on_hover: false,
+            allowed_splits: AllowedSplits::default(),
         };
 
         Self { context, tree }
@@ -353,6 +417,7 @@ impl eframe::App for MyApp {
                     .show_add_buttons(self.context.show_add_buttons)
                     .draggable_tabs(self.context.draggable_tabs)
                     .show_tab_name_on_hover(self.context.show_tab_name_on_hover)
+                    .allowed_splits(self.context.allowed_splits)
                     .show_inside(ui, &mut self.context);
             });
     }

examples/tab_add.rs

@@ -58,7 +58,7 @@ impl eframe::App for MyApp {
             .show_add_buttons(true)
             .style({
                 let mut style = Style::from_egui(ctx.style().as_ref());
-                style.tabs.fill_tab_bar = true;
+                style.tab_bar.fill_tab_bar = true;
                 style
             })
             .show(