2020-04-22 16:15:27 +00:00
|
|
|
use crate::{layout::Direction, *};
|
|
|
|
|
2020-05-07 08:47:03 +00:00
|
|
|
#[derive(Clone, Copy, Debug, serde_derive::Deserialize, serde_derive::Serialize)]
|
2020-05-02 09:37:12 +00:00
|
|
|
#[serde(default)]
|
2020-04-22 16:15:27 +00:00
|
|
|
pub(crate) struct State {
|
2020-05-02 09:37:12 +00:00
|
|
|
open: bool,
|
2020-05-05 01:05:36 +00:00
|
|
|
|
2020-05-02 09:37:12 +00:00
|
|
|
#[serde(skip)] // Times are relative, and we don't want to continue animations anyway
|
|
|
|
toggle_time: f64,
|
2020-05-05 17:41:49 +00:00
|
|
|
|
|
|
|
/// Height open the region when open. Used for animations
|
|
|
|
open_height: Option<f32>,
|
2020-04-22 16:15:27 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
impl Default for State {
|
|
|
|
fn default() -> Self {
|
|
|
|
Self {
|
|
|
|
open: false,
|
2020-05-02 09:37:12 +00:00
|
|
|
toggle_time: -f64::INFINITY,
|
2020-05-05 17:41:49 +00:00
|
|
|
open_height: None,
|
2020-04-22 16:15:27 +00:00
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
pub struct CollapsingHeader {
|
|
|
|
title: String,
|
|
|
|
default_open: bool,
|
|
|
|
}
|
|
|
|
|
|
|
|
impl CollapsingHeader {
|
|
|
|
pub fn new(title: impl Into<String>) -> Self {
|
|
|
|
Self {
|
|
|
|
title: title.into(),
|
|
|
|
default_open: false,
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
pub fn default_open(mut self) -> Self {
|
|
|
|
self.default_open = true;
|
|
|
|
self
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
impl CollapsingHeader {
|
|
|
|
pub fn show(self, region: &mut Region, add_contents: impl FnOnce(&mut Region)) -> GuiResponse {
|
|
|
|
assert!(
|
2020-05-04 19:59:28 +00:00
|
|
|
region.direction() == Direction::Vertical,
|
2020-04-22 16:15:27 +00:00
|
|
|
"Horizontal collapsing is unimplemented"
|
|
|
|
);
|
|
|
|
let Self {
|
|
|
|
title,
|
|
|
|
default_open,
|
|
|
|
} = self;
|
|
|
|
|
|
|
|
let id = region.make_unique_id(&title);
|
|
|
|
let text_style = TextStyle::Button;
|
|
|
|
let font = ®ion.fonts()[text_style];
|
|
|
|
let (title, text_size) = font.layout_multiline(&title, region.available_width());
|
2020-04-22 22:17:37 +00:00
|
|
|
|
2020-04-22 16:15:27 +00:00
|
|
|
let interact = region.reserve_space(
|
|
|
|
vec2(
|
|
|
|
region.available_width(),
|
2020-05-04 19:59:28 +00:00
|
|
|
text_size.y + 2.0 * region.style().button_padding.y,
|
2020-04-22 16:15:27 +00:00
|
|
|
),
|
|
|
|
Some(id),
|
|
|
|
);
|
|
|
|
|
2020-05-05 17:41:49 +00:00
|
|
|
let mut state = {
|
2020-05-04 19:59:28 +00:00
|
|
|
let mut memory = region.memory();
|
2020-04-22 16:15:27 +00:00
|
|
|
let mut state = memory.collapsing_headers.entry(id).or_insert(State {
|
|
|
|
open: default_open,
|
|
|
|
..Default::default()
|
|
|
|
});
|
|
|
|
if interact.clicked {
|
|
|
|
state.open = !state.open;
|
2020-05-04 19:59:28 +00:00
|
|
|
state.toggle_time = region.input().time;
|
2020-04-22 16:15:27 +00:00
|
|
|
}
|
|
|
|
*state
|
|
|
|
};
|
|
|
|
|
|
|
|
region.add_paint_cmd(PaintCmd::Rect {
|
2020-05-04 19:59:28 +00:00
|
|
|
corner_radius: region.style().interact_corner_radius(&interact),
|
|
|
|
fill_color: region.style().interact_fill_color(&interact),
|
2020-04-22 16:15:27 +00:00
|
|
|
outline: region.style().interact_outline(&interact),
|
|
|
|
rect: interact.rect,
|
|
|
|
});
|
|
|
|
|
|
|
|
paint_icon(region, &state, &interact);
|
|
|
|
|
|
|
|
region.add_text(
|
2020-04-22 22:17:37 +00:00
|
|
|
pos2(
|
2020-05-04 19:59:28 +00:00
|
|
|
interact.rect.left() + region.style().indent,
|
2020-04-22 22:17:37 +00:00
|
|
|
interact.rect.center().y - text_size.y / 2.0,
|
|
|
|
),
|
2020-04-22 16:15:27 +00:00
|
|
|
text_style,
|
|
|
|
title,
|
2020-05-04 19:59:28 +00:00
|
|
|
Some(region.style().interact_stroke_color(&interact)),
|
2020-04-22 16:15:27 +00:00
|
|
|
);
|
|
|
|
|
|
|
|
let animation_time = region.style().animation_time;
|
2020-05-04 19:59:28 +00:00
|
|
|
let time_since_toggle = (region.input().time - state.toggle_time) as f32;
|
2020-05-05 17:41:49 +00:00
|
|
|
let time_since_toggle = time_since_toggle + region.input().dt; // Instant feedback
|
2020-04-26 20:30:24 +00:00
|
|
|
let animate = time_since_toggle < animation_time;
|
|
|
|
if animate {
|
2020-05-05 01:05:36 +00:00
|
|
|
region.indent(id, |child_region| {
|
2020-04-22 16:15:27 +00:00
|
|
|
let max_height = if state.open {
|
2020-05-05 17:41:49 +00:00
|
|
|
let full_height = state.open_height.unwrap_or(1000.0);
|
|
|
|
remap(time_since_toggle, 0.0..=animation_time, 0.0..=full_height)
|
2020-04-22 16:15:27 +00:00
|
|
|
} else {
|
2020-05-05 17:41:49 +00:00
|
|
|
let full_height = state.open_height.unwrap_or_default();
|
|
|
|
remap_clamp(time_since_toggle, 0.0..=animation_time, full_height..=0.0)
|
2020-04-22 16:15:27 +00:00
|
|
|
};
|
|
|
|
|
2020-05-05 01:05:36 +00:00
|
|
|
let mut clip_rect = child_region.clip_rect();
|
|
|
|
clip_rect.max.y = clip_rect.max.y.min(child_region.cursor().y + max_height);
|
|
|
|
child_region.set_clip_rect(clip_rect);
|
2020-04-22 16:15:27 +00:00
|
|
|
|
2020-05-05 01:05:36 +00:00
|
|
|
let top_left = child_region.top_left();
|
|
|
|
add_contents(child_region);
|
2020-05-05 06:15:20 +00:00
|
|
|
|
2020-05-05 17:41:49 +00:00
|
|
|
state.open_height = Some(child_region.bounding_size().y);
|
|
|
|
|
2020-05-05 06:15:20 +00:00
|
|
|
// Pretend children took up less space:
|
|
|
|
let mut child_bounds = child_region.child_bounds();
|
|
|
|
child_bounds.max.y = child_bounds.max.y.min(top_left.y + max_height);
|
|
|
|
child_region.force_set_child_bounds(child_bounds);
|
2020-04-22 16:15:27 +00:00
|
|
|
});
|
|
|
|
} else if state.open {
|
2020-05-05 17:41:49 +00:00
|
|
|
let full_size = region.indent(id, add_contents).rect.size();
|
|
|
|
state.open_height = Some(full_size.y);
|
2020-04-22 16:15:27 +00:00
|
|
|
}
|
|
|
|
|
2020-05-05 17:41:49 +00:00
|
|
|
region.memory().collapsing_headers.insert(id, state);
|
2020-04-22 16:15:27 +00:00
|
|
|
region.response(interact)
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
fn paint_icon(region: &mut Region, state: &State, interact: &InteractInfo) {
|
2020-05-07 08:47:03 +00:00
|
|
|
let stroke_color = region.style().interact_stroke_color(interact);
|
|
|
|
let stroke_width = region.style().interact_stroke_width(interact);
|
2020-04-22 16:15:27 +00:00
|
|
|
|
2020-05-05 17:12:00 +00:00
|
|
|
let (mut small_icon_rect, _) = region.style().icon_rectangles(interact.rect);
|
2020-04-22 22:17:37 +00:00
|
|
|
small_icon_rect.set_center(pos2(
|
2020-05-04 19:59:28 +00:00
|
|
|
interact.rect.left() + region.style().indent / 2.0,
|
2020-04-22 22:17:37 +00:00
|
|
|
interact.rect.center().y,
|
|
|
|
));
|
|
|
|
|
2020-04-22 16:15:27 +00:00
|
|
|
// Draw a minus:
|
|
|
|
region.add_paint_cmd(PaintCmd::Line {
|
|
|
|
points: vec![
|
2020-04-22 17:38:38 +00:00
|
|
|
pos2(small_icon_rect.left(), small_icon_rect.center().y),
|
|
|
|
pos2(small_icon_rect.right(), small_icon_rect.center().y),
|
2020-04-22 16:15:27 +00:00
|
|
|
],
|
|
|
|
color: stroke_color,
|
|
|
|
width: stroke_width,
|
|
|
|
});
|
|
|
|
|
|
|
|
if !state.open {
|
|
|
|
// Draw it as a plus:
|
|
|
|
region.add_paint_cmd(PaintCmd::Line {
|
|
|
|
points: vec![
|
2020-04-22 17:38:38 +00:00
|
|
|
pos2(small_icon_rect.center().x, small_icon_rect.top()),
|
|
|
|
pos2(small_icon_rect.center().x, small_icon_rect.bottom()),
|
2020-04-22 16:15:27 +00:00
|
|
|
],
|
|
|
|
color: stroke_color,
|
|
|
|
width: stroke_width,
|
|
|
|
});
|
|
|
|
}
|
|
|
|
}
|