Add rudimentary support for gui windows that you can move around

emigui/src/emigui.rs

@@ -6,7 +6,7 @@ use crate::{
     mesher::Mesher,
     types::{GuiInput, PaintCmd},
     widgets::*,
-    FontDefinitions, Fonts, Mesh, RawInput, Texture,
+    FontDefinitions, Fonts, Layer, Mesh, RawInput, Texture,
 };
 
 #[derive(Clone, Copy, Default)]
@@ -47,17 +47,17 @@ impl Emigui {
         self.data = Arc::new(new_data);
     }
 
-    pub fn whole_screen_region(&mut self) -> layout::Region {
+    pub fn whole_screen_region(&mut self) -> Region {
-        let size = self.data.input.screen_size;
+        Region {
-        layout::Region {
             data: self.data.clone(),
+            layer: Layer::Background,
             style: self.data.style(),
             id: Default::default(),
             dir: layout::Direction::Vertical,
             align: layout::Align::Center,
             cursor: Default::default(),
             bounding_size: Default::default(),
-            available_space: size,
+            available_space: self.data.input.screen_size,
         }
     }
 

emigui/src/layers.rs

@@ -0,0 +1,43 @@
+use std::collections::HashMap;
+
+use crate::{Id, PaintCmd};
+
+// TODO: support multiple windows
+#[derive(Clone, Copy, Eq, PartialEq, Hash)]
+pub enum Layer {
+    Background,
+    Window(Id),
+    Popup,
+}
+
+type PaintList = Vec<PaintCmd>;
+
+/// TODO: improve this
+#[derive(Clone, Default)]
+pub struct GraphicLayers {
+    bg: PaintList,
+    windows: HashMap<Id, PaintList>,
+    popup: PaintList,
+}
+
+impl GraphicLayers {
+    pub fn layer(&mut self, layer: Layer) -> &mut PaintList {
+        match layer {
+            Layer::Background => &mut self.bg,
+            Layer::Window(id) => self.windows.entry(id).or_default(),
+            Layer::Popup => &mut self.popup,
+        }
+    }
+
+    pub fn drain(&mut self) -> impl ExactSizeIterator<Item = PaintCmd> {
+        let mut all_commands: Vec<_> = self.bg.drain(..).collect();
+
+        // TODO: order
+        for window in self.windows.values_mut() {
+            all_commands.extend(window.drain(..));
+        }
+
+        all_commands.extend(self.popup.drain(..));
+        all_commands.into_iter()
+    }
+}

emigui/src/layout.rs

@@ -1,5 +1,5 @@
 use std::{
-    collections::HashSet,
+    collections::{HashMap, HashSet},
     hash::Hash,
     sync::{Arc, Mutex},
 };
@@ -12,6 +12,8 @@ use crate::{
     style::Style,
     types::*,
     widgets::{Label, Widget},
+    window::WindowState,
+    GraphicLayers, Layer,
 };
 
 // ----------------------------------------------------------------------------
@@ -66,6 +68,44 @@ pub struct Memory {
 
     /// Which foldable regions are open.
     open_foldables: HashSet<Id>,
+
+    windows: HashMap<Id, WindowState>,
+
+    /// Top is last
+    window_order: Vec<Id>,
+}
+
+impl Memory {
+    /// default_rect: where to put it if it does NOT exist
+    pub fn get_or_create_window(&mut self, id: Id, default_rect: Rect) -> WindowState {
+        if let Some(state) = self.windows.get(&id) {
+            *state
+        } else {
+            let state = WindowState { rect: default_rect };
+            self.windows.insert(id, state);
+            self.window_order.push(id);
+            state
+        }
+    }
+
+    pub fn set_window_state(&mut self, id: Id, state: WindowState) {
+        self.windows.insert(id, state);
+    }
+
+    pub fn layer_at(&self, pos: Vec2) -> Layer {
+        for window_id in self.window_order.iter().rev() {
+            if let Some(state) = self.windows.get(window_id) {
+                if state.rect.contains(pos) {
+                    return Layer::Window(*window_id);
+                }
+            }
+        }
+        Layer::Background
+    }
+
+    pub fn move_window_to_top(&mut self, _id: Id) {
+        // TODO
+    }
 }
 
 // ----------------------------------------------------------------------------
@@ -103,6 +143,7 @@ impl Default for Align {
 
 // ----------------------------------------------------------------------------
 
+// TODO: newtype
 pub type Id = u64;
 
 pub fn make_id<H: Hash>(source: &H) -> Id {
@@ -114,25 +155,7 @@ pub fn make_id<H: Hash>(source: &H) -> Id {
 
 // ----------------------------------------------------------------------------
 
-/// TODO: improve this
+// TODO: give a better name. Context?
-#[derive(Clone, Default)]
-pub struct GraphicLayers {
-    pub(crate) graphics: Vec<PaintCmd>,
-    pub(crate) hovering_graphics: Vec<PaintCmd>,
-}
-
-impl GraphicLayers {
-    pub fn drain(&mut self) -> impl ExactSizeIterator<Item = PaintCmd> {
-        // TODO: there must be a nicer way to do this?
-        let mut all_commands: Vec<_> = self.graphics.drain(..).collect();
-        all_commands.extend(self.hovering_graphics.drain(..));
-        all_commands.into_iter()
-    }
-}
-
-// ----------------------------------------------------------------------------
-
-// TODO: give a better name.
 /// Contains the input, style and output of all GUI commands.
 pub struct Data {
     /// The default style for new regions
@@ -190,6 +213,42 @@ impl Data {
     pub fn any_active(&self) -> bool {
         self.memory.lock().unwrap().active_id.is_some()
     }
+
+    pub fn interact(&self, layer: Layer, rect: Rect, interaction_id: Option<Id>) -> InteractInfo {
+        let mut memory = self.memory.lock().unwrap();
+
+        // TODO: check for windows on top of the current rect!
+
+        let hovered = if let Some(mouse_pos) = self.input.mouse_pos {
+            if rect.contains(mouse_pos) {
+                let is_something_else_active =
+                    memory.active_id.is_some() && memory.active_id != interaction_id;
+
+                !is_something_else_active && layer == memory.layer_at(mouse_pos)
+            } else {
+                false
+            }
+        } else {
+            false
+        };
+        let active = if interaction_id.is_some() {
+            if hovered && self.input.mouse_clicked {
+                memory.active_id = interaction_id;
+            }
+            memory.active_id == interaction_id
+        } else {
+            false
+        };
+
+        let clicked = hovered && self.input.mouse_released;
+
+        InteractInfo {
+            rect,
+            hovered,
+            clicked,
+            active,
+        }
+    }
 }
 
 impl Data {
@@ -205,14 +264,15 @@ pub fn show_popup<F>(data: &Arc<Data>, window_pos: Vec2, add_contents: F)
 where
     F: FnOnce(&mut Region),
 {
-    // TODO: nicer way to do layering!
+    let layer = Layer::Popup;
-    let num_graphics_before = data.graphics.lock().unwrap().graphics.len();
+    let where_to_put_background = data.graphics.lock().unwrap().layer(layer).len();
 
     let style = data.style();
     let window_padding = style.window_padding;
 
-    let mut popup_region = Region {
+    let mut contents_region = Region {
         data: data.clone(),
+        layer: Layer::Popup,
         style,
         id: Default::default(),
         dir: Direction::Vertical,
@@ -222,26 +282,30 @@ where
         available_space: vec2(data.input.screen_size.x.min(350.0), std::f32::INFINITY), // TODO: popup/tooltip width
     };
 
-    add_contents(&mut popup_region);
+    add_contents(&mut contents_region);
+
+    // Now insert popup background:
 
     // TODO: handle the last item_spacing in a nicer way
-    let inner_size = popup_region.bounding_size - style.item_spacing;
+    let inner_size = contents_region.bounding_size - style.item_spacing;
     let outer_size = inner_size + 2.0 * window_padding;
 
     let rect = Rect::from_min_size(window_pos, outer_size);
 
     let mut graphics = data.graphics.lock().unwrap();
-    let popup_graphics = graphics.graphics.split_off(num_graphics_before);
+    let graphics = graphics.layer(layer);
-    graphics.hovering_graphics.push(PaintCmd::Rect {
+    graphics.insert(
-        corner_radius: 5.0,
+        where_to_put_background,
-        fill_color: Some(style.background_fill_color()),
+        PaintCmd::Rect {
-        outline: Some(Outline {
+            corner_radius: 5.0,
-            color: color::gray(255, 255), // TODO
+            fill_color: Some(style.background_fill_color()),
-            width: 1.0,
+            outline: Some(Outline {
-        }),
+                color: color::WHITE,
-        rect,
+                width: 1.0,
-    });
+            }),
-    graphics.hovering_graphics.extend(popup_graphics);
+            rect,
+        },
+    );
 }
 
 // ----------------------------------------------------------------------------
@@ -252,6 +316,9 @@ where
 pub struct Region {
     pub(crate) data: Arc<Data>,
 
+    /// Where to put the graphics output of this Region
+    pub(crate) layer: Layer,
+
     pub(crate) style: Style,
 
     /// Unique ID of this region.
@@ -262,14 +329,15 @@ pub struct Region {
 
     pub(crate) align: Align,
 
-    /// Changes only along self.dir
+    /// Where the next widget will be put.
+    /// Progresses along self.dir
     pub(crate) cursor: Vec2,
 
-    /// Bounding box children.
+    /// Bounding box of children.
     /// We keep track of our max-size along the orthogonal to self.dir
     pub(crate) bounding_size: Vec2,
 
-    /// This how much space we can take up without overflowing our parent.
+    /// This how much more space we can take up without overflowing our parent.
     /// Shrinks as cursor increments.
     pub(crate) available_space: Vec2,
 }
@@ -279,7 +347,12 @@ impl Region {
     /// Can be used for free painting.
     /// NOTE: all coordinates are screen coordinates!
     pub fn add_paint_cmd(&mut self, paint_cmd: PaintCmd) {
-        self.data.graphics.lock().unwrap().graphics.push(paint_cmd)
+        self.data
+            .graphics
+            .lock()
+            .unwrap()
+            .layer(self.layer)
+            .push(paint_cmd)
     }
 
     pub fn add_paint_cmds(&mut self, mut cmds: Vec<PaintCmd>) {
@@ -287,7 +360,7 @@ impl Region {
             .graphics
             .lock()
             .unwrap()
-            .graphics
+            .layer(self.layer)
             .append(&mut cmds)
     }
 
@@ -374,9 +447,12 @@ impl Region {
         let stroke_color = self.style.interact_stroke_color(&interact);
 
         self.add_paint_cmd(PaintCmd::Rect {
-            corner_radius: 3.0,
+            corner_radius: 5.0,
             fill_color: Some(fill_color),
-            outline: None,
+            outline: Some(Outline {
+                width: 1.0,
+                color: color::WHITE,
+            }),
             rect: interact.rect,
         });
 
@@ -427,6 +503,7 @@ impl Region {
         let indent = vec2(self.style.indent, 0.0);
         let mut child_region = Region {
             data: self.data.clone(),
+            layer: self.layer,
             style: self.style,
             id: self.id,
             dir: self.dir,
@@ -444,6 +521,7 @@ impl Region {
     pub fn relative_region(&mut self, rect: Rect) -> Region {
         Region {
             data: self.data.clone(),
+            layer: self.layer,
             style: self.style,
             id: self.id,
             dir: self.dir,
@@ -485,6 +563,7 @@ impl Region {
     {
         let mut child_region = Region {
             data: self.data.clone(),
+            layer: self.layer,
             style: self.style,
             id: self.id,
             dir,
@@ -532,6 +611,7 @@ impl Region {
         let mut columns: Vec<Region> = (0..num_columns)
             .map(|col_idx| Region {
                 data: self.data.clone(),
+                layer: self.layer,
                 style: self.style,
                 id: self.make_child_id(&("column", col_idx)),
                 dir: Direction::Vertical,
@@ -565,35 +645,11 @@ impl Region {
     pub fn reserve_space(&mut self, size: Vec2, interaction_id: Option<Id>) -> InteractInfo {
         let pos = self.reserve_space_without_padding(size + self.style.item_spacing);
         let rect = Rect::from_min_size(pos, size);
-        let mut memory = self.data.memory.lock().unwrap();
+        self.data.interact(self.layer, rect, interaction_id)
-
-        let is_something_else_active =
-            memory.active_id.is_some() && memory.active_id != interaction_id;
-
-        let hovered = if let Some(mouse_pos) = self.input().mouse_pos {
-            !is_something_else_active && rect.contains(mouse_pos)
-        } else {
-            false
-        };
-        let active = if interaction_id.is_some() {
-            if hovered && self.input().mouse_clicked {
-                memory.active_id = interaction_id;
-            }
-            memory.active_id == interaction_id
-        } else {
-            false
-        };
-
-        let clicked = hovered && self.input().mouse_released;
-        InteractInfo {
-            rect,
-            hovered,
-            clicked,
-            active,
-        }
     }
 
     /// Reserve this much space and move the cursor.
+    /// Returns where to put the widget.
     pub fn reserve_space_without_padding(&mut self, size: Vec2) -> Vec2 {
         let mut pos = self.cursor;
         if self.dir == Direction::Horizontal {

emigui/src/lib.rs

@@ -11,6 +11,7 @@ mod emigui;
 pub mod example_app;
 mod font;
 mod fonts;
+mod layers;
 mod layout;
 pub mod math;
 pub mod mesher;
@@ -18,15 +19,18 @@ mod style;
 mod texture_atlas;
 mod types;
 pub mod widgets;
+mod window;
 
 pub use {
     crate::emigui::Emigui,
     color::Color,
     fonts::{FontDefinitions, Fonts, TextStyle},
-    layout::{Align, Region},
+    layers::*,
+    layout::{Align, Id, Region},
     math::*,
     mesher::{Mesh, Vertex},
     style::Style,
     texture_atlas::Texture,
     types::*,
+    window::Window,
 };

emigui/src/math.rs

@@ -149,6 +149,9 @@ impl Rect {
     pub fn expand(self, amnt: f32) -> Self {
         Rect::from_center_size(self.center(), self.size() + 2.0 * vec2(amnt, amnt))
     }
+    pub fn translate(self, amnt: Vec2) -> Self {
+        Rect::from_min_size(self.min() + amnt, self.size())
+    }
 
     pub fn contains(&self, p: Vec2) -> bool {
         self.min.x <= p.x

emigui/src/mesher.rs

@@ -389,8 +389,8 @@ impl Mesher {
                         add_arc(vec2(max.x - cr, min.y + cr), 3);
                     }
 
-                    if let Some(color) = fill_color {
+                    if let Some(fill_color) = fill_color {
-                        self.fill_closed_path(&path_points, &path_normals, *color);
+                        self.fill_closed_path(&path_points, &path_normals, *fill_color);
                     }
                     if let Some(outline) = outline {
                         self.paint_path(

emigui/src/style.rs

@@ -44,7 +44,7 @@ impl Default for Style {
 impl Style {
     /// e.g. the background of the slider
     pub fn background_fill_color(&self) -> Color {
-        gray(34, 200)
+        gray(34, 230)
     }
 
     pub fn text_color(&self) -> Color {

emigui/src/types.rs

@@ -38,6 +38,9 @@ pub struct GuiInput {
     /// Current position of the mouse in points.
     pub mouse_pos: Option<Vec2>,
 
+    /// How much the mouse moved compared to last frame, in points.
+    pub mouse_move: Vec2,
+
     /// Size of the screen in points.
     pub screen_size: Vec2,
 
@@ -47,11 +50,16 @@ pub struct GuiInput {
 
 impl GuiInput {
     pub fn from_last_and_new(last: &RawInput, new: &RawInput) -> GuiInput {
+        let mouse_move = new
+            .mouse_pos
+            .and_then(|new| last.mouse_pos.map(|last| new - last))
+            .unwrap_or_default();
         GuiInput {
             mouse_down: new.mouse_down,
             mouse_clicked: !last.mouse_down && new.mouse_down,
             mouse_released: last.mouse_down && !new.mouse_down,
             mouse_pos: new.mouse_pos,
+            mouse_move,
             screen_size: new.screen_size,
             pixels_per_point: new.pixels_per_point,
         }

emigui/src/window.rs

@@ -0,0 +1,98 @@
+use std::sync::Arc;
+
+use crate::{
+    layout::{make_id, Data, Direction},
+    widgets::Label,
+    *,
+};
+
+#[derive(Clone, Copy, Debug)]
+pub struct WindowState {
+    /// Last known pos/size
+    pub rect: Rect,
+}
+
+pub struct Window {
+    /// The title of the window and by default the source of its identity.
+    title: String,
+}
+
+impl Window {
+    pub fn new<S: Into<String>>(title: S) -> Self {
+        Self {
+            title: title.into(),
+        }
+    }
+
+    pub fn show<F>(self, data: Arc<Data>, add_contents: F)
+    where
+        F: FnOnce(&mut Region),
+    {
+        let id = make_id(&self.title);
+
+        let mut state = data.memory.lock().unwrap().get_or_create_window(
+            id,
+            Rect::from_min_size(
+                vec2(400.0, 200.0), // TODO
+                vec2(200.0, 200.0), // TODO
+            ),
+        );
+
+        let layer = Layer::Window(id);
+        let where_to_put_background = data.graphics.lock().unwrap().layer(layer).len();
+
+        let style = data.style();
+        let window_padding = style.window_padding;
+
+        let mut contents_region = Region {
+            data: data.clone(),
+            layer: Layer::Popup,
+            style,
+            id: Default::default(),
+            dir: Direction::Vertical,
+            align: Align::Min,
+            cursor: state.rect.min() + window_padding,
+            bounding_size: vec2(0.0, 0.0),
+            available_space: vec2(data.input.screen_size.x.min(350.0), std::f32::INFINITY), // TODO: window.width
+        };
+
+        // Show top bar:
+        contents_region.add(Label::new(self.title).text_style(TextStyle::Heading));
+
+        add_contents(&mut contents_region);
+
+        // Now insert window background:
+
+        // TODO: handle the last item_spacing in a nicer way
+        let inner_size = contents_region.bounding_size - style.item_spacing;
+        let outer_size = inner_size + 2.0 * window_padding;
+
+        state.rect = Rect::from_min_size(state.rect.min(), outer_size);
+
+        let mut graphics = data.graphics.lock().unwrap();
+        let graphics = graphics.layer(layer);
+        graphics.insert(
+            where_to_put_background,
+            PaintCmd::Rect {
+                corner_radius: 5.0,
+                fill_color: Some(style.background_fill_color()),
+                outline: Some(Outline {
+                    color: color::WHITE,
+                    width: 1.0,
+                }),
+                rect: state.rect,
+            },
+        );
+
+        let interact = data.interact(layer, state.rect, Some(id));
+        if interact.active {
+            state.rect = state.rect.translate(data.input().mouse_move);
+        }
+
+        let mut memory = data.memory.lock().unwrap();
+        if interact.active || interact.clicked {
+            memory.move_window_to_top(id);
+        }
+        memory.set_window_state(id, state);
+    }
+}

example_glium/src/main.rs

@@ -8,7 +8,7 @@ use {
         label,
         math::vec2,
         widgets::{Button, Label},
-        Align, Emigui,
+        Align, Emigui, Window,
     },
     emigui_glium::Painter,
     glium::glutin,
@@ -90,6 +90,12 @@ fn main() {
         }
         example_app.ui(&mut region);
         emigui.ui(&mut region);
+
+        // TODO: Make it simpler to show a window
+        Window::new("Test window").show(region.data().clone(), |region| {
+            region.add(label!("Grab the window and move it around!"));
+        });
+
         let mesh = emigui.paint();
         painter.paint(&display, mesh, emigui.texture());
     }