Draft draggable and graphics logic for TitleBar

graphics/src/widget/container.rs

@@ -39,20 +39,10 @@ where
         let (content, mouse_interaction) =
             content.draw(self, &defaults, content_layout, cursor_position);
 
-        if style.background.is_some() || style.border_width > 0 {
+        if let Some(background) = background(bounds, &style) {
-            let quad = Primitive::Quad {
-                bounds,
-                background: style
-                    .background
-                    .unwrap_or(Background::Color(Color::TRANSPARENT)),
-                border_radius: style.border_radius,
-                border_width: style.border_width,
-                border_color: style.border_color,
-            };
-
             (
                 Primitive::Group {
-                    primitives: vec![quad, content],
+                    primitives: vec![background, content],
                 },
                 mouse_interaction,
             )
@@ -61,3 +51,22 @@ where
         }
     }
 }
+
+pub(crate) fn background(
+    bounds: Rectangle,
+    style: &container::Style,
+) -> Option<Primitive> {
+    if style.background.is_none() && style.border_width > 0 {
+        return None;
+    }
+
+    Some(Primitive::Quad {
+        bounds,
+        background: style
+            .background
+            .unwrap_or(Background::Color(Color::TRANSPARENT)),
+        border_radius: style.border_radius,
+        border_width: style.border_width,
+        border_color: style.border_color,
+    })
+}

graphics/src/widget/pane_grid.rs

@@ -35,7 +35,7 @@ where
         &mut self,
         defaults: &Self::Defaults,
         content: &[(Pane, Content<'_, Message, Self>)],
-        dragging: Option<Pane>,
+        dragging: Option<(Pane, Point)>,
         resizing: Option<Axis>,
         layout: Layout<'_>,
         cursor_position: Point,
@@ -63,32 +63,40 @@ where
                     mouse_interaction = new_mouse_interaction;
                 }
 
-                if Some(*id) == dragging {
+                if let Some((dragging, origin)) = dragging {
-                    dragged_pane = Some((i, layout));
+                    if *id == dragging {
+                        dragged_pane = Some((i, layout, origin));
+                    }
                 }
 
                 primitive
             })
             .collect();
 
-        let primitives = if let Some((index, layout)) = dragged_pane {
+        let primitives = if let Some((index, layout, origin)) = dragged_pane {
             let pane = panes.remove(index);
             let bounds = layout.bounds();
 
+            if let Primitive::Group { primitives } = &pane {
+                panes.push(
+                    primitives.first().cloned().unwrap_or(Primitive::None),
+                );
+            }
+
             // TODO: Fix once proper layering is implemented.
             // This is a pretty hacky way to achieve layering.
             let clip = Primitive::Clip {
                 bounds: Rectangle {
-                    x: cursor_position.x - bounds.width / 2.0,
+                    x: cursor_position.x - origin.x,
-                    y: cursor_position.y - bounds.height / 2.0,
+                    y: cursor_position.y - origin.y,
                     width: bounds.width + 0.5,
                     height: bounds.height + 0.5,
                 },
                 offset: Vector::new(0, 0),
                 content: Box::new(Primitive::Translate {
                     translation: Vector::new(
-                        cursor_position.x - bounds.x - bounds.width / 2.0,
+                        cursor_position.x - bounds.x - origin.x,
-                        cursor_position.y - bounds.y - bounds.height / 2.0,
+                        cursor_position.y - bounds.y - origin.y,
                     ),
                     content: Box::new(pane),
                 }),
@@ -119,48 +127,77 @@ where
     fn draw_pane<Message>(
         &mut self,
         defaults: &Self::Defaults,
+        bounds: Rectangle,
+        style_sheet: &Self::Style,
         title_bar: Option<(&TitleBar<'_, Message, Self>, Layout<'_>)>,
         body: (&Element<'_, Message, Self>, Layout<'_>),
         cursor_position: Point,
     ) -> Self::Output {
+        let style = style_sheet.style();
         let (body, body_layout) = body;
 
         let (body_primitive, body_interaction) =
             body.draw(self, defaults, body_layout, cursor_position);
 
+        let background = crate::widget::container::background(bounds, &style);
+
         if let Some((title_bar, title_bar_layout)) = title_bar {
+            let show_controls = bounds.contains(cursor_position);
+            let is_over_draggable =
+                title_bar.is_over_draggable(title_bar_layout, cursor_position);
+
             let (title_bar_primitive, title_bar_interaction) = title_bar.draw(
                 self,
                 defaults,
                 title_bar_layout,
                 cursor_position,
+                show_controls,
             );
 
             (
                 Primitive::Group {
-                    primitives: vec![title_bar_primitive, body_primitive],
+                    primitives: vec![
+                        background.unwrap_or(Primitive::None),
+                        title_bar_primitive,
+                        body_primitive,
+                    ],
                 },
-                if title_bar_interaction > body_interaction {
+                if is_over_draggable {
+                    mouse::Interaction::Grab
+                } else if title_bar_interaction > body_interaction {
                     title_bar_interaction
                 } else {
                     body_interaction
                 },
             )
         } else {
-            (body_primitive, body_interaction)
+            (
+                if let Some(background) = background {
+                    Primitive::Group {
+                        primitives: vec![background, body_primitive],
+                    }
+                } else {
+                    body_primitive
+                },
+                body_interaction,
+            )
         }
     }
 
     fn draw_title_bar<Message>(
         &mut self,
         defaults: &Self::Defaults,
-        style: &<Self as iced_native::container::Renderer>::Style,
+        bounds: Rectangle,
+        style_sheet: &Self::Style,
         title: (&Element<'_, Message, Self>, Layout<'_>),
         controls: Option<(&Element<'_, Message, Self>, Layout<'_>)>,
         cursor_position: Point,
     ) -> Self::Output {
+        let style = style_sheet.style();
         let (title, title_layout) = title;
 
+        let background = crate::widget::container::background(bounds, &style);
+
         let (title_primitive, _) =
             title.draw(self, defaults, title_layout, cursor_position);
 
@@ -170,12 +207,25 @@ where
 
             (
                 Primitive::Group {
-                    primitives: vec![title_primitive, controls_primitive],
+                    primitives: vec![
+                        background.unwrap_or(Primitive::None),
+                        title_primitive,
+                        controls_primitive,
+                    ],
                 },
                 controls_interaction,
             )
         } else {
-            (title_primitive, mouse::Interaction::default())
+            (
+                if let Some(background) = background {
+                    Primitive::Group {
+                        primitives: vec![background, title_primitive],
+                    }
+                } else {
+                    title_primitive
+                },
+                mouse::Interaction::default(),
+            )
         }
     }
 }

native/src/renderer/null.rs

@@ -1,7 +1,7 @@
 use crate::{
-    button, checkbox, column, progress_bar, radio, row, scrollable, slider,
+    button, checkbox, column, container, progress_bar, radio, row, scrollable,
-    text, text_input, Color, Element, Font, HorizontalAlignment, Layout, Point,
+    slider, text, text_input, Color, Element, Font, HorizontalAlignment,
-    Rectangle, Renderer, Size, VerticalAlignment,
+    Layout, Point, Rectangle, Renderer, Size, VerticalAlignment,
 };
 
 /// A renderer that does nothing.
@@ -226,3 +226,18 @@ impl progress_bar::Renderer for Null {
     ) {
     }
 }
+
+impl container::Renderer for Null {
+    type Style = ();
+
+    fn draw<Message>(
+        &mut self,
+        _defaults: &Self::Defaults,
+        _bounds: Rectangle,
+        _cursor_position: Point,
+        _style: &Self::Style,
+        _content: &Element<'_, Message, Self>,
+        _content_layout: Layout<'_>,
+    ) {
+    }
+}

native/src/widget/pane_grid.rs

@@ -30,7 +30,7 @@ pub use title_bar::TitleBar;
 
 use crate::{
     container, keyboard, layout, mouse, row, Clipboard, Element, Event, Hasher,
-    Layout, Length, Point, Size, Widget,
+    Layout, Length, Point, Rectangle, Size, Widget,
 };
 
 /// A collection of panes distributed using either vertical or horizontal splits
@@ -427,17 +427,18 @@ where
                         clicked_region.next()
                     {
                         match &self.on_drag {
-                            Some(on_drag)
+                            Some(on_drag) => {
-                                if content.is_over_drag_target(
+                                if let Some(origin) =
-                                    layout,
+                                    content.drag_origin(layout, cursor_position)
-                                    cursor_position,
+                                {
-                                ) =>
+                                    self.state.pick_pane(pane, origin);
-                            {
-                                self.state.pick_pane(pane);
 
-                                messages.push(on_drag(DragEvent::Picked {
+                                    messages.push(on_drag(DragEvent::Picked {
-                                    pane: *pane,
+                                        pane: *pane,
-                                }));
+                                    }));
+                                } else {
+                                    self.state.focus(pane);
+                                }
                             }
                             _ => {
                                 self.state.focus(pane);
@@ -448,7 +449,7 @@ where
                     }
                 }
                 mouse::Event::ButtonReleased(mouse::Button::Left) => {
-                    if let Some(pane) = self.state.picked_pane() {
+                    if let Some((pane, _)) = self.state.picked_pane() {
                         self.state.focus(&pane);
 
                         if let Some(on_drag) = &self.on_drag {
@@ -657,7 +658,7 @@ pub trait Renderer: crate::Renderer + container::Renderer + Sized {
         &mut self,
         defaults: &Self::Defaults,
         content: &[(Pane, Content<'_, Message, Self>)],
-        dragging: Option<Pane>,
+        dragging: Option<(Pane, Point)>,
         resizing: Option<Axis>,
         layout: Layout<'_>,
         cursor_position: Point,
@@ -676,6 +677,8 @@ pub trait Renderer: crate::Renderer + container::Renderer + Sized {
     fn draw_pane<Message>(
         &mut self,
         defaults: &Self::Defaults,
+        bounds: Rectangle,
+        style: &Self::Style,
         title_bar: Option<(&TitleBar<'_, Message, Self>, Layout<'_>)>,
         body: (&Element<'_, Message, Self>, Layout<'_>),
         cursor_position: Point,
@@ -684,6 +687,7 @@ pub trait Renderer: crate::Renderer + container::Renderer + Sized {
     fn draw_title_bar<Message>(
         &mut self,
         defaults: &Self::Defaults,
+        bounds: Rectangle,
         style: &Self::Style,
         title: (&Element<'_, Message, Self>, Layout<'_>),
         controls: Option<(&Element<'_, Message, Self>, Layout<'_>)>,

native/src/widget/pane_grid/content.rs

@@ -1,7 +1,7 @@
 use crate::container;
 use crate::layout;
 use crate::pane_grid::{self, TitleBar};
-use crate::{Clipboard, Element, Event, Hasher, Layout, Point, Size};
+use crate::{Clipboard, Element, Event, Hasher, Layout, Point, Size, Vector};
 
 /// The content of a [`Pane`].
 ///
@@ -9,6 +9,7 @@ use crate::{Clipboard, Element, Event, Hasher, Layout, Point, Size};
 pub struct Content<'a, Message, Renderer: container::Renderer> {
     title_bar: Option<TitleBar<'a, Message, Renderer>>,
     body: Element<'a, Message, Renderer>,
+    style: Renderer::Style,
 }
 
 impl<'a, Message, Renderer> Content<'a, Message, Renderer>
@@ -19,6 +20,7 @@ where
         Self {
             title_bar: None,
             body: body.into(),
+            style: Renderer::Style::default(),
         }
     }
 
@@ -29,6 +31,14 @@ where
         self.title_bar = Some(title_bar);
         self
     }
+
+    /// Sets the style of the [`TitleBar`].
+    ///
+    /// [`TitleBar`]: struct.TitleBar.html
+    pub fn style(mut self, style: impl Into<Renderer::Style>) -> Self {
+        self.style = style.into();
+        self
+    }
 }
 
 impl<'a, Message, Renderer> Content<'a, Message, Renderer>
@@ -49,6 +59,8 @@ where
 
             renderer.draw_pane(
                 defaults,
+                layout.bounds(),
+                &self.style,
                 Some((title_bar, title_bar_layout)),
                 (&self.body, body_layout),
                 cursor_position,
@@ -56,6 +68,8 @@ where
         } else {
             renderer.draw_pane(
                 defaults,
+                layout.bounds(),
+                &self.style,
                 None,
                 (&self.body, layout),
                 cursor_position,
@@ -63,12 +77,25 @@ where
         }
     }
 
-    pub(crate) fn is_over_drag_target(
+    pub fn drag_origin(
         &self,
-        _layout: Layout<'_>,
+        layout: Layout<'_>,
-        _cursor_position: Point,
+        cursor_position: Point,
-    ) -> bool {
+    ) -> Option<Point> {
-        false
+        if let Some(title_bar) = &self.title_bar {
+            let mut children = layout.children();
+            let title_bar_layout = children.next().unwrap();
+
+            if title_bar.is_over_draggable(title_bar_layout, cursor_position) {
+                let position = layout.position();
+
+                Some(cursor_position - Vector::new(position.x, position.y))
+            } else {
+                None
+            }
+        } else {
+            None
+        }
     }
 
     pub(crate) fn layout(
@@ -115,14 +142,31 @@ where
         renderer: &Renderer,
         clipboard: Option<&dyn Clipboard>,
     ) {
+        let body_layout = if let Some(title_bar) = &mut self.title_bar {
+            let mut children = layout.children();
+
+            title_bar.on_event(
+                event.clone(),
+                children.next().unwrap(),
+                cursor_position,
+                messages,
+                renderer,
+                clipboard,
+            );
+
+            children.next().unwrap()
+        } else {
+            layout
+        };
+
         self.body.on_event(
             event,
-            layout,
+            body_layout,
             cursor_position,
             messages,
             renderer,
             clipboard,
-        )
+        );
     }
 
     pub(crate) fn hash_layout(&self, state: &mut Hasher) {

native/src/widget/pane_grid/state.rs

@@ -313,13 +313,14 @@ pub struct Internal {
     action: Action,
 }
 
-#[derive(Debug, Clone, Copy, PartialEq, Eq)]
+#[derive(Debug, Clone, Copy, PartialEq)]
 pub enum Action {
     Idle {
         focus: Option<Pane>,
     },
     Dragging {
         pane: Pane,
+        origin: Point,
     },
     Resizing {
         split: Split,
@@ -334,7 +335,7 @@ impl Action {
             Action::Idle { focus } | Action::Resizing { focus, .. } => {
                 focus.map(|pane| (pane, Focus::Idle))
             }
-            Action::Dragging { pane } => Some((*pane, Focus::Dragging)),
+            Action::Dragging { pane, .. } => Some((*pane, Focus::Dragging)),
         }
     }
 }
@@ -351,9 +352,9 @@ impl Internal {
         }
     }
 
-    pub fn picked_pane(&self) -> Option<Pane> {
+    pub fn picked_pane(&self) -> Option<(Pane, Point)> {
         match self.action {
-            Action::Dragging { pane } => Some(pane),
+            Action::Dragging { pane, origin } => Some((pane, origin)),
             _ => None,
         }
     }
@@ -385,8 +386,11 @@ impl Internal {
         self.action = Action::Idle { focus: Some(*pane) };
     }
 
-    pub fn pick_pane(&mut self, pane: &Pane) {
+    pub fn pick_pane(&mut self, pane: &Pane, origin: Point) {
-        self.action = Action::Dragging { pane: *pane };
+        self.action = Action::Dragging {
+            pane: *pane,
+            origin,
+        };
     }
 
     pub fn pick_split(&mut self, split: &Split, axis: Axis) {

native/src/widget/pane_grid/title_bar.rs

@@ -1,7 +1,7 @@
 use crate::container;
 use crate::layout;
 use crate::pane_grid;
-use crate::{Element, Layout, Point, Size};
+use crate::{Clipboard, Element, Event, Layout, Point, Size};
 
 pub struct TitleBar<'a, Message, Renderer: container::Renderer> {
     title: Element<'a, Message, Renderer>,
@@ -38,6 +38,14 @@ where
         self.padding = units;
         self
     }
+
+    /// Sets the style of the [`TitleBar`].
+    ///
+    /// [`TitleBar`]: struct.TitleBar.html
+    pub fn style(mut self, style: impl Into<Renderer::Style>) -> Self {
+        self.style = style.into();
+        self
+    }
 }
 
 impl<'a, Message, Renderer> TitleBar<'a, Message, Renderer>
@@ -50,30 +58,63 @@ where
         defaults: &Renderer::Defaults,
         layout: Layout<'_>,
         cursor_position: Point,
+        show_controls: bool,
     ) -> Renderer::Output {
+        let mut children = layout.children();
+        let padded = children.next().unwrap();
+
         if let Some(controls) = &self.controls {
-            let mut children = layout.children();
+            let mut children = padded.children();
             let title_layout = children.next().unwrap();
             let controls_layout = children.next().unwrap();
 
             renderer.draw_title_bar(
                 defaults,
+                layout.bounds(),
                 &self.style,
                 (&self.title, title_layout),
-                Some((controls, controls_layout)),
+                if show_controls {
+                    Some((controls, controls_layout))
+                } else {
+                    None
+                },
                 cursor_position,
             )
         } else {
             renderer.draw_title_bar(
                 defaults,
+                layout.bounds(),
                 &self.style,
-                (&self.title, layout),
+                (&self.title, padded),
                 None,
                 cursor_position,
             )
         }
     }
 
+    pub fn is_over_draggable(
+        &self,
+        layout: Layout<'_>,
+        cursor_position: Point,
+    ) -> bool {
+        if layout.bounds().contains(cursor_position) {
+            let mut children = layout.children();
+            let padded = children.next().unwrap();
+
+            if self.controls.is_some() {
+                let mut children = padded.children();
+                let _ = children.next().unwrap();
+                let controls_layout = children.next().unwrap();
+
+                !controls_layout.bounds().contains(cursor_position)
+            } else {
+                true
+            }
+        } else {
+            false
+        }
+    }
+
     pub(crate) fn layout(
         &self,
         renderer: &Renderer,
@@ -82,38 +123,66 @@ where
         let padding = f32::from(self.padding);
         let limits = limits.pad(padding);
 
-        let mut node = if let Some(controls) = &self.controls {
+        let node = if let Some(controls) = &self.controls {
             let max_size = limits.max();
 
-            let title_layout = self
+            let mut controls_layout = controls
-                .title
                 .layout(renderer, &layout::Limits::new(Size::ZERO, max_size));
 
-            let title_size = title_layout.size();
+            let controls_size = controls_layout.size();
+            let space_before_controls = max_size.width - controls_size.width;
 
-            let mut controls_layout = controls.layout(
+            let mut title_layout = self.title.layout(
                 renderer,
                 &layout::Limits::new(
                     Size::ZERO,
-                    Size::new(
+                    Size::new(space_before_controls, max_size.height),
-                        max_size.width - title_size.width,
-                        max_size.height,
-                    ),
                 ),
             );
 
-            controls_layout.move_to(Point::new(title_size.width, 0.0));
+            title_layout.move_to(Point::new(padding, padding));
+            controls_layout
+                .move_to(Point::new(space_before_controls + padding, padding));
+
+            let title_size = title_layout.size();
+            let height = title_size.height.max(controls_size.height);
 
             layout::Node::with_children(
-                max_size,
+                Size::new(max_size.width, height),
                 vec![title_layout, controls_layout],
             )
         } else {
             self.title.layout(renderer, &limits)
         };
 
-        node.move_to(Point::new(padding, padding));
+        layout::Node::with_children(node.size().pad(padding), vec![node])
+    }
 
-        node
+    pub(crate) fn on_event(
+        &mut self,
+        event: Event,
+        layout: Layout<'_>,
+        cursor_position: Point,
+        messages: &mut Vec<Message>,
+        renderer: &Renderer,
+        clipboard: Option<&dyn Clipboard>,
+    ) {
+        if let Some(controls) = &mut self.controls {
+            let mut children = layout.children();
+            let padded = children.next().unwrap();
+
+            let mut children = padded.children();
+            let _ = children.next();
+            let controls_layout = children.next().unwrap();
+
+            controls.on_event(
+                event,
+                controls_layout,
+                cursor_position,
+                messages,
+                renderer,
+                clipboard,
+            );
+        }
     }
 }