mirror of
https://github.com/encounter/egui_dock.git
synced 2026-07-10 03:18:37 -07:00
Refactor the 'hello' example
This commit is contained in:
Adanos020
+150
-151
@@ -1,13 +1,13 @@
|
||||
#![cfg_attr(not(debug_assertions), windows_subsystem = "windows")] // hide console window on Windows in release
|
||||
|
||||
use std::cell::RefCell;
|
||||
use std::rc::Rc;
|
||||
|
||||
use eframe::{egui, NativeOptions};
|
||||
use egui::color_picker::{color_picker_color32, Alpha};
|
||||
use egui::{Color32, RichText, Slider};
|
||||
use egui::{
|
||||
color_picker::{color_picker_color32, Alpha},
|
||||
style::Margin,
|
||||
Frame, Id, LayerId, ScrollArea, Slider, Ui, WidgetText,
|
||||
};
|
||||
|
||||
use egui_dock::{DockArea, DynamicTree, NodeIndex, Style, TabBuilder};
|
||||
use egui_dock::{DockArea, NodeIndex, Style, TabViewer, Tree};
|
||||
|
||||
fn main() {
|
||||
let options = NativeOptions::default();
|
||||
@@ -18,171 +18,170 @@ fn main() {
|
||||
);
|
||||
}
|
||||
|
||||
#[derive(Clone)]
|
||||
struct MyContext {
|
||||
pub title: String,
|
||||
pub age: u32,
|
||||
pub style: Option<Style>,
|
||||
}
|
||||
|
||||
struct MyApp {
|
||||
_context: Rc<RefCell<MyContext>>,
|
||||
style: Rc<RefCell<Style>>,
|
||||
tree: DynamicTree,
|
||||
context: MyContext,
|
||||
tree: Tree<String>,
|
||||
}
|
||||
|
||||
impl TabViewer for MyContext {
|
||||
type Tab = String;
|
||||
|
||||
fn ui(&mut self, ui: &mut Ui, tab: &mut Self::Tab) {
|
||||
ScrollArea::both()
|
||||
.id_source(tab.to_owned() + " - egui_dock::Tab")
|
||||
.show(ui, |ui| {
|
||||
Frame::none()
|
||||
.inner_margin(Margin::same(4.0))
|
||||
.show(ui, |ui| match tab.as_str() {
|
||||
"Simple Demo" => self.simple_demo(ui),
|
||||
"Style Editor" => self.style_editor(ui),
|
||||
_ => {
|
||||
ui.label(tab.as_str());
|
||||
}
|
||||
})
|
||||
});
|
||||
}
|
||||
|
||||
fn title(&mut self, tab: &mut Self::Tab) -> WidgetText {
|
||||
tab.as_str().into()
|
||||
}
|
||||
}
|
||||
|
||||
impl MyContext {
|
||||
fn simple_demo(&mut self, ui: &mut Ui) {
|
||||
ui.heading("My egui Application");
|
||||
|
||||
ui.horizontal(|ui| {
|
||||
ui.label("Your name: ");
|
||||
ui.text_edit_singleline(&mut self.title);
|
||||
});
|
||||
ui.add(Slider::new(&mut self.age, 0..=120).text("age"));
|
||||
if ui.button("Click each year").clicked() {
|
||||
self.age += 1;
|
||||
}
|
||||
ui.label(format!("Hello '{}', age {}", &self.title, &self.age));
|
||||
}
|
||||
|
||||
fn style_editor(&mut self, ui: &mut Ui) {
|
||||
ui.heading("Style Editor");
|
||||
|
||||
let style = self.style.as_mut().unwrap();
|
||||
|
||||
ui.collapsing("Border", |ui| {
|
||||
ui.separator();
|
||||
|
||||
ui.label("Width");
|
||||
ui.add(Slider::new(&mut style.border_width, 1.0..=50.0));
|
||||
|
||||
ui.separator();
|
||||
|
||||
ui.label("Color");
|
||||
color_picker_color32(ui, &mut style.border_color, Alpha::OnlyBlend);
|
||||
});
|
||||
|
||||
ui.collapsing("Selection", |ui| {
|
||||
ui.separator();
|
||||
|
||||
ui.label("Color");
|
||||
color_picker_color32(ui, &mut style.selection_color, Alpha::OnlyBlend);
|
||||
});
|
||||
|
||||
ui.collapsing("Separator", |ui| {
|
||||
ui.separator();
|
||||
|
||||
ui.label("Width");
|
||||
ui.add(Slider::new(&mut style.separator_width, 1.0..=50.0));
|
||||
|
||||
ui.label("Offset limit");
|
||||
ui.add(Slider::new(&mut style.separator_extra, 1.0..=300.0));
|
||||
|
||||
ui.separator();
|
||||
|
||||
ui.label("Color");
|
||||
color_picker_color32(ui, &mut style.separator_color, Alpha::OnlyBlend);
|
||||
});
|
||||
|
||||
ui.collapsing("Tab", |ui| {
|
||||
ui.separator();
|
||||
|
||||
ui.label("Rounding");
|
||||
ui.horizontal(|ui| {
|
||||
ui.add(Slider::new(&mut style.tab_rounding.nw, 0.0..=15.0));
|
||||
ui.label("North-West");
|
||||
});
|
||||
ui.horizontal(|ui| {
|
||||
ui.add(Slider::new(&mut style.tab_rounding.ne, 0.0..=15.0));
|
||||
ui.label("North-East");
|
||||
});
|
||||
ui.horizontal(|ui| {
|
||||
ui.add(Slider::new(&mut style.tab_rounding.sw, 0.0..=15.0));
|
||||
ui.label("South-West");
|
||||
});
|
||||
ui.horizontal(|ui| {
|
||||
ui.add(Slider::new(&mut style.tab_rounding.se, 0.0..=15.0));
|
||||
ui.label("South-East");
|
||||
});
|
||||
|
||||
ui.separator();
|
||||
|
||||
ui.label("Bar background color");
|
||||
color_picker_color32(ui, &mut style.tab_bar_background_color, Alpha::OnlyBlend);
|
||||
|
||||
ui.separator();
|
||||
|
||||
ui.label("Outline color");
|
||||
color_picker_color32(ui, &mut style.tab_outline_color, Alpha::OnlyBlend);
|
||||
|
||||
ui.separator();
|
||||
|
||||
ui.label("Background color");
|
||||
color_picker_color32(ui, &mut style.tab_background_color, Alpha::OnlyBlend);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
impl Default for MyApp {
|
||||
fn default() -> Self {
|
||||
let context = Rc::new(RefCell::new(MyContext {
|
||||
let context = MyContext {
|
||||
title: "Hello".to_string(),
|
||||
age: 24,
|
||||
}));
|
||||
let style = Rc::new(RefCell::new(Style::default()));
|
||||
style: None,
|
||||
};
|
||||
|
||||
let mt_ctx = context.clone();
|
||||
let node_tree = TabBuilder::default()
|
||||
.title(RichText::new("Simple Demo").color(Color32::BLUE))
|
||||
.content(move |ui| {
|
||||
let mut ctx = mt_ctx.borrow_mut();
|
||||
ui.heading("My egui Application");
|
||||
ui.horizontal(|ui| {
|
||||
ui.label("Your name: ");
|
||||
ui.text_edit_singleline(&mut ctx.title);
|
||||
});
|
||||
ui.add(Slider::new(&mut ctx.age, 0..=120).text("age"));
|
||||
if ui.button("Click each year").clicked() {
|
||||
ctx.age += 1;
|
||||
}
|
||||
ui.label(format!("Hello '{}', age {}", &ctx.title, &ctx.age));
|
||||
})
|
||||
.build();
|
||||
let mut tree = Tree::new(vec!["Simple Demo".to_owned(), "Style Editor".to_owned()]);
|
||||
let [a, b] = tree.split_left(NodeIndex::root(), 0.3, vec!["Inspector".to_owned()]);
|
||||
let [_, _] = tree.split_below(
|
||||
a,
|
||||
0.7,
|
||||
vec!["File Browser".to_owned(), "Asset Manager".to_owned()],
|
||||
);
|
||||
let [_, _] = tree.split_below(b, 0.5, vec!["Hierarchy".to_owned()]);
|
||||
|
||||
let style_clone = style.clone();
|
||||
let style_editor = TabBuilder::default()
|
||||
.title("Style Editor")
|
||||
.content(move |ui| {
|
||||
let mut style = style_clone.borrow_mut();
|
||||
ui.heading("Style Editor");
|
||||
|
||||
ui.collapsing("Border", |ui| {
|
||||
ui.separator();
|
||||
|
||||
ui.label("Width");
|
||||
ui.add(Slider::new(&mut style.border_width, 1.0..=50.0));
|
||||
|
||||
ui.separator();
|
||||
|
||||
ui.label("Color");
|
||||
color_picker_color32(ui, &mut style.border_color, Alpha::OnlyBlend);
|
||||
});
|
||||
|
||||
ui.collapsing("Selection", |ui| {
|
||||
ui.separator();
|
||||
|
||||
ui.label("Color");
|
||||
color_picker_color32(ui, &mut style.selection_color, Alpha::OnlyBlend);
|
||||
});
|
||||
|
||||
ui.collapsing("Separator", |ui| {
|
||||
ui.separator();
|
||||
|
||||
ui.label("Width");
|
||||
ui.add(Slider::new(&mut style.separator_width, 1.0..=50.0));
|
||||
|
||||
ui.label("Offset limit");
|
||||
ui.add(Slider::new(&mut style.separator_extra, 1.0..=300.0));
|
||||
|
||||
ui.separator();
|
||||
|
||||
ui.label("Color");
|
||||
color_picker_color32(ui, &mut style.separator_color, Alpha::OnlyBlend);
|
||||
});
|
||||
|
||||
ui.collapsing("Tab", |ui| {
|
||||
ui.separator();
|
||||
|
||||
ui.label("Rounding");
|
||||
ui.horizontal(|ui| {
|
||||
ui.add(Slider::new(&mut style.tab_rounding.nw, 0.0..=15.0));
|
||||
ui.label("North-West");
|
||||
});
|
||||
ui.horizontal(|ui| {
|
||||
ui.add(Slider::new(&mut style.tab_rounding.ne, 0.0..=15.0));
|
||||
ui.label("North-East");
|
||||
});
|
||||
ui.horizontal(|ui| {
|
||||
ui.add(Slider::new(&mut style.tab_rounding.sw, 0.0..=15.0));
|
||||
ui.label("South-West");
|
||||
});
|
||||
ui.horizontal(|ui| {
|
||||
ui.add(Slider::new(&mut style.tab_rounding.se, 0.0..=15.0));
|
||||
ui.label("South-East");
|
||||
});
|
||||
|
||||
ui.separator();
|
||||
|
||||
ui.label("Bar background color");
|
||||
color_picker_color32(ui, &mut style.tab_bar_background_color, Alpha::OnlyBlend);
|
||||
|
||||
ui.separator();
|
||||
|
||||
ui.label("Outline color");
|
||||
color_picker_color32(ui, &mut style.tab_outline_color, Alpha::OnlyBlend);
|
||||
|
||||
ui.separator();
|
||||
|
||||
ui.label("Background color");
|
||||
color_picker_color32(ui, &mut style.tab_background_color, Alpha::OnlyBlend);
|
||||
});
|
||||
})
|
||||
.build();
|
||||
|
||||
let hierarchy = TabBuilder::default()
|
||||
.title("Hierarchy")
|
||||
.content(|ui| {
|
||||
ui.label("Hierarchy");
|
||||
})
|
||||
.build();
|
||||
|
||||
let inspector = TabBuilder::default()
|
||||
.title("Inspector")
|
||||
.content(|ui| {
|
||||
ui.label("Inspector");
|
||||
})
|
||||
.build();
|
||||
|
||||
let files = TabBuilder::default()
|
||||
.title("File Browser")
|
||||
.content(|ui| {
|
||||
ui.label("File Browser");
|
||||
})
|
||||
.build();
|
||||
|
||||
let assets = TabBuilder::default()
|
||||
.title("Asset Manager")
|
||||
.content(|ui| {
|
||||
ui.label("Asset Manager");
|
||||
})
|
||||
.build();
|
||||
|
||||
let mut tree = DynamicTree::new(vec![node_tree, style_editor]);
|
||||
|
||||
let [a, b] = tree.split_left(NodeIndex::root(), 0.3, vec![inspector]);
|
||||
let [_, _] = tree.split_below(a, 0.7, vec![files, assets]);
|
||||
let [_, _] = tree.split_below(b, 0.5, vec![hierarchy]);
|
||||
|
||||
Self {
|
||||
style,
|
||||
_context: context,
|
||||
tree,
|
||||
}
|
||||
Self { context, tree }
|
||||
}
|
||||
}
|
||||
|
||||
impl eframe::App for MyApp {
|
||||
fn update(&mut self, ctx: &egui::Context, _frame: &mut eframe::Frame) {
|
||||
let style = self.style.borrow().clone();
|
||||
let layer_id = LayerId::background();
|
||||
let max_rect = ctx.available_rect();
|
||||
let clip_rect = ctx.available_rect();
|
||||
let id = Id::new("egui_dock::DockArea");
|
||||
let mut ui = Ui::new(ctx.clone(), layer_id, id, max_rect, clip_rect);
|
||||
|
||||
let style = self
|
||||
.context
|
||||
.style
|
||||
.get_or_insert(Style::from_egui(&ui.ctx().style()))
|
||||
.clone();
|
||||
DockArea::new(&mut self.tree)
|
||||
.style(style)
|
||||
.show(ctx, &mut egui_dock::DynamicTabViewer {});
|
||||
.show_inside(&mut ui, &mut self.context);
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user