Merge branch 'master' into feature/overlay

examples/pane_grid/README.md

@@ -15,8 +15,8 @@ This example showcases the `PaneGrid` widget, which features:
 The __[`main`]__ file contains all the code of the example.
 
 <div align="center">
-  <a href="https://gfycat.com/mixedflatjellyfish">
+  <a href="https://gfycat.com/frailfreshairedaleterrier">
-    <img src="https://thumbs.gfycat.com/MixedFlatJellyfish-small.gif">
+    <img src="https://thumbs.gfycat.com/FrailFreshAiredaleterrier-small.gif">
   </a>
 </div>
 

examples/pane_grid/src/main.rs

@@ -97,7 +97,15 @@ impl Sandbox for Example {
 
         let pane_grid =
             PaneGrid::new(&mut self.panes, |pane, content, focus| {
-                content.view(pane, focus, total_panes)
+                let is_focused = focus.is_some();
+                let title_bar =
+                    pane_grid::TitleBar::new(format!("Pane {}", content.id))
+                        .padding(10)
+                        .style(style::TitleBar { is_focused });
+
+                pane_grid::Content::new(content.view(pane, total_panes))
+                    .title_bar(title_bar)
+                    .style(style::Pane { is_focused })
             })
             .width(Length::Fill)
             .height(Length::Fill)
@@ -155,15 +163,14 @@ impl Content {
     fn view(
         &mut self,
         pane: pane_grid::Pane,
-        focus: Option<pane_grid::Focus>,
         total_panes: usize,
     ) -> Element<Message> {
         let Content {
-            id,
             scroll,
             split_horizontally,
             split_vertically,
             close,
+            ..
         } = self;
 
         let button = |state, label, message, style| {
@@ -209,7 +216,6 @@ impl Content {
             .width(Length::Fill)
             .spacing(10)
             .align_items(Align::Center)
-            .push(Text::new(format!("Pane {}", id)).size(30))
             .push(controls);
 
         Container::new(content)
@@ -217,9 +223,6 @@ impl Content {
             .height(Length::Fill)
             .padding(5)
             .center_y()
-            .style(style::Pane {
-                is_focused: focus.is_some(),
-            })
             .into()
     }
 }
@@ -245,6 +248,25 @@ mod style {
         0xC4 as f32 / 255.0,
     );
 
+    pub struct TitleBar {
+        pub is_focused: bool,
+    }
+
+    impl container::StyleSheet for TitleBar {
+        fn style(&self) -> container::Style {
+            let pane = Pane {
+                is_focused: self.is_focused,
+            }
+            .style();
+
+            container::Style {
+                text_color: Some(Color::WHITE),
+                background: Some(pane.border_color.into()),
+                ..Default::default()
+            }
+        }
+    }
+
     pub struct Pane {
         pub is_focused: bool,
     }
@@ -254,9 +276,10 @@ mod style {
             container::Style {
                 background: Some(Background::Color(SURFACE)),
                 border_width: 2,
-                border_color: Color {
+                border_color: if self.is_focused {
-                    a: if self.is_focused { 1.0 } else { 0.3 },
+                    Color::BLACK
-                    ..Color::BLACK
+                } else {
+                    Color::from_rgb(0.7, 0.7, 0.7)
                 },
                 ..Default::default()
             }

glow/src/widget/pane_grid.rs

@@ -11,8 +11,8 @@
 use crate::Renderer;
 
 pub use iced_native::pane_grid::{
-    Axis, Content, Direction, DragEvent, Focus, KeyPressEvent, Node, Pane,
+    Axis, Configuration, Direction, DragEvent, Focus, KeyPressEvent, Node,
-    ResizeEvent, Split, State,
+    Pane, ResizeEvent, Split, State,
 };
 
 /// A collection of panes distributed using either vertical or horizontal splits
@@ -22,3 +22,15 @@ pub use iced_native::pane_grid::{
 ///
 /// This is an alias of an `iced_native` pane grid with an `iced_wgpu::Renderer`.
 pub type PaneGrid<'a, Message> = iced_native::PaneGrid<'a, Message, Renderer>;
+
+/// The content of a [`Pane`].
+///
+/// [`Pane`]: struct.Pane.html
+pub type Content<'a, Message> =
+    iced_native::pane_grid::Content<'a, Message, Renderer>;
+
+/// The title bar of a [`Pane`].
+///
+/// [`Pane`]: struct.Pane.html
+pub type TitleBar<'a, Message> =
+    iced_native::pane_grid::TitleBar<'a, Message, Renderer>;

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

@@ -8,14 +8,20 @@
 //!
 //! [`pane_grid` example]: https://github.com/hecrj/iced/tree/0.1/examples/pane_grid
 //! [`PaneGrid`]: type.PaneGrid.html
-use crate::{Backend, Primitive, Renderer};
+use crate::backend::{self, Backend};
+use crate::defaults;
+use crate::{Primitive, Renderer};
 use iced_native::mouse;
 use iced_native::pane_grid;
-use iced_native::{Element, Layout, Point, Rectangle, Vector};
+use iced_native::text;
+use iced_native::{
+    Element, HorizontalAlignment, Layout, Point, Rectangle, Vector,
+    VerticalAlignment,
+};
 
 pub use iced_native::pane_grid::{
-    Axis, Direction, DragEvent, Focus, KeyPressEvent, Pane, ResizeEvent, Split,
+    Axis, Configuration, Content, Direction, DragEvent, Focus, KeyPressEvent,
-    State,
+    Pane, ResizeEvent, Split, State, TitleBar,
 };
 
 /// A collection of panes distributed using either vertical or horizontal splits
@@ -29,13 +35,13 @@ pub type PaneGrid<'a, Message, Backend> =
 
 impl<B> pane_grid::Renderer for Renderer<B>
 where
-    B: Backend,
+    B: Backend + backend::Text,
 {
     fn draw<Message>(
         &mut self,
         defaults: &Self::Defaults,
-        content: &[(Pane, Element<'_, Message, Self>)],
+        content: &[(Pane, Content<'_, Message, Self>)],
-        dragging: Option<Pane>,
+        dragging: Option<(Pane, Point)>,
         resizing: Option<Axis>,
         layout: Layout<'_>,
         cursor_position: Point,
@@ -63,15 +69,17 @@ 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();
 
@@ -79,16 +87,16 @@ where
             // 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),
                 }),
@@ -115,4 +123,130 @@ 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_pick_area =
+                title_bar.is_over_pick_area(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![
+                        background.unwrap_or(Primitive::None),
+                        title_bar_primitive,
+                        body_primitive,
+                    ],
+                },
+                if is_over_pick_area {
+                    mouse::Interaction::Grab
+                } else if title_bar_interaction > body_interaction {
+                    title_bar_interaction
+                } else {
+                    body_interaction
+                },
+            )
+        } else {
+            (
+                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,
+        bounds: Rectangle,
+        style_sheet: &Self::Style,
+        title: &str,
+        title_size: u16,
+        title_font: Self::Font,
+        title_bounds: Rectangle,
+        controls: Option<(&Element<'_, Message, Self>, Layout<'_>)>,
+        cursor_position: Point,
+    ) -> Self::Output {
+        let style = style_sheet.style();
+
+        let defaults = Self::Defaults {
+            text: defaults::Text {
+                color: style.text_color.unwrap_or(defaults.text.color),
+            },
+        };
+
+        let background = crate::widget::container::background(bounds, &style);
+
+        let (title_primitive, _) = text::Renderer::draw(
+            self,
+            &defaults,
+            title_bounds,
+            title,
+            title_size,
+            title_font,
+            None,
+            HorizontalAlignment::Left,
+            VerticalAlignment::Top,
+        );
+
+        if let Some((controls, controls_layout)) = controls {
+            let (controls_primitive, controls_interaction) = controls.draw(
+                self,
+                &defaults,
+                controls_layout,
+                cursor_position,
+            );
+
+            (
+                Primitive::Group {
+                    primitives: vec![
+                        background.unwrap_or(Primitive::None),
+                        title_primitive,
+                        controls_primitive,
+                    ],
+                },
+                controls_interaction,
+            )
+        } else {
+            (
+                if let Some(background) = background {
+                    Primitive::Group {
+                        primitives: vec![background, title_primitive],
+                    }
+                } else {
+                    title_primitive
+                },
+                mouse::Interaction::default(),
+            )
+        }
+    }
 }

native/src/layout.rs

@@ -34,14 +34,14 @@ impl<'a> Layout<'a> {
         }
     }
 
-    /// Gets the position of the [`Layout`].
+    /// Returns the position of the [`Layout`].
     ///
     /// [`Layout`]: struct.Layout.html
     pub fn position(&self) -> Point {
         self.position
     }
 
-    /// Gets the bounds of the [`Layout`].
+    /// Returns the bounds of the [`Layout`].
     ///
     /// The returned [`Rectangle`] describes the position and size of a
     /// [`Node`].

native/src/renderer/null.rs

@@ -1,7 +1,8 @@
 use crate::{
-    button, checkbox, column, progress_bar, radio, row, scrollable, slider,
+    button, checkbox, column, container, pane_grid, progress_bar, radio, row,
-    text, text_input, Color, Element, Font, HorizontalAlignment, Layout, Point,
+    scrollable, slider, text, text_input, Color, Element, Font,
-    Rectangle, Renderer, Size, VerticalAlignment,
+    HorizontalAlignment, Layout, Point, Rectangle, Renderer, Size,
+    VerticalAlignment,
 };
 
 /// A renderer that does nothing.
@@ -226,3 +227,59 @@ 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<'_>,
+    ) {
+    }
+}
+
+impl pane_grid::Renderer for Null {
+    fn draw<Message>(
+        &mut self,
+        _defaults: &Self::Defaults,
+        _content: &[(pane_grid::Pane, pane_grid::Content<'_, Message, Self>)],
+        _dragging: Option<(pane_grid::Pane, Point)>,
+        _resizing: Option<pane_grid::Axis>,
+        _layout: Layout<'_>,
+        _cursor_position: Point,
+    ) {
+    }
+
+    fn draw_pane<Message>(
+        &mut self,
+        _defaults: &Self::Defaults,
+        _bounds: Rectangle,
+        _style: &Self::Style,
+        _title_bar: Option<(
+            &pane_grid::TitleBar<'_, Message, Self>,
+            Layout<'_>,
+        )>,
+        _body: (&Element<'_, Message, Self>, Layout<'_>),
+        _cursor_position: Point,
+    ) {
+    }
+
+    fn draw_title_bar<Message>(
+        &mut self,
+        _defaults: &Self::Defaults,
+        _bounds: Rectangle,
+        _style: &Self::Style,
+        _title: &str,
+        _title_size: u16,
+        _title_font: Self::Font,
+        _title_bounds: Rectangle,
+        _controls: Option<(&Element<'_, Message, Self>, Layout<'_>)>,
+        _cursor_position: Point,
+    ) {
+    }
+}

native/src/widget/pane_grid.rs

@@ -9,30 +9,34 @@
 //! [`pane_grid` example]: https://github.com/hecrj/iced/tree/0.1/examples/pane_grid
 //! [`PaneGrid`]: struct.PaneGrid.html
 mod axis;
+mod configuration;
 mod content;
 mod direction;
 mod node;
 mod pane;
 mod split;
 mod state;
+mod title_bar;
 
 pub use axis::Axis;
+pub use configuration::Configuration;
 pub use content::Content;
 pub use direction::Direction;
 pub use node::Node;
 pub use pane::Pane;
 pub use split::Split;
 pub use state::{Focus, State};
+pub use title_bar::TitleBar;
 
 use crate::{
-    keyboard, layout, mouse, Clipboard, Element, Event, Hasher, Layout, Length,
+    container, keyboard, layout, mouse, row, text, Clipboard, Element, Event,
-    Point, Rectangle, Size, Widget,
+    Hasher, Layout, Length, Point, Rectangle, Size, Vector, Widget,
 };
 
 /// A collection of panes distributed using either vertical or horizontal splits
 /// to completely fill the space available.
 ///
-/// [![Pane grid - Iced](https://thumbs.gfycat.com/MixedFlatJellyfish-small.gif)](https://gfycat.com/mixedflatjellyfish)
+/// [![Pane grid - Iced](https://thumbs.gfycat.com/FrailFreshAiredaleterrier-small.gif)](https://gfycat.com/frailfreshairedaleterrier)
 ///
 /// This distribution of space is common in tiling window managers (like
 /// [`awesome`](https://awesomewm.org/), [`i3`](https://i3wm.org/), or even
@@ -70,10 +74,10 @@ use crate::{
 ///
 /// let pane_grid =
 ///     PaneGrid::new(&mut state, |pane, state, focus| {
-///         match state {
+///         pane_grid::Content::new(match state {
 ///             PaneState::SomePane => Text::new("This is some pane"),
 ///             PaneState::AnotherKindOfPane => Text::new("This is another kind of pane"),
-///         }.into()
+///         })
 ///     })
 ///     .on_drag(Message::PaneDragged)
 ///     .on_resize(10, Message::PaneResized);
@@ -82,10 +86,9 @@ use crate::{
 /// [`PaneGrid`]: struct.PaneGrid.html
 /// [`State`]: struct.State.html
 #[allow(missing_debug_implementations)]
-pub struct PaneGrid<'a, Message, Renderer> {
+pub struct PaneGrid<'a, Message, Renderer: self::Renderer> {
     state: &'a mut state::Internal,
-    pressed_modifiers: &'a mut keyboard::ModifiersState,
+    elements: Vec<(Pane, Content<'a, Message, Renderer>)>,
-    elements: Vec<(Pane, Element<'a, Message, Renderer>)>,
     width: Length,
     height: Length,
     spacing: u16,
@@ -95,7 +98,10 @@ pub struct PaneGrid<'a, Message, Renderer> {
     on_key_press: Option<Box<dyn Fn(KeyPressEvent) -> Option<Message> + 'a>>,
 }
 
-impl<'a, Message, Renderer> PaneGrid<'a, Message, Renderer> {
+impl<'a, Message, Renderer> PaneGrid<'a, Message, Renderer>
+where
+    Renderer: self::Renderer,
+{
     /// Creates a [`PaneGrid`] with the given [`State`] and view function.
     ///
     /// The view function will be called to display each [`Pane`] present in the
@@ -110,7 +116,7 @@ impl<'a, Message, Renderer> PaneGrid<'a, Message, Renderer> {
             Pane,
             &'a mut T,
             Option<Focus>,
-        ) -> Element<'a, Message, Renderer>,
+        ) -> Content<'a, Message, Renderer>,
     ) -> Self {
         let elements = {
             let action = state.internal.action();
@@ -136,7 +142,6 @@ impl<'a, Message, Renderer> PaneGrid<'a, Message, Renderer> {
 
         Self {
             state: &mut state.internal,
-            pressed_modifiers: &mut state.modifiers,
             elements,
             width: Length::Fill,
             height: Length::Fill,
@@ -177,8 +182,7 @@ impl<'a, Message, Renderer> PaneGrid<'a, Message, Renderer> {
 
     /// Sets the modifier keys of the [`PaneGrid`].
     ///
-    /// The modifier keys will need to be pressed to trigger dragging, and key
+    /// The modifier keys will need to be pressed to trigger key events.
-    /// events.
     ///
     /// The default modifier key is `Ctrl`.
     ///
@@ -194,8 +198,6 @@ impl<'a, Message, Renderer> PaneGrid<'a, Message, Renderer> {
     /// Enables the drag and drop interactions of the [`PaneGrid`], which will
     /// use the provided function to produce messages.
     ///
-    /// Panes can be dragged using `Modifier keys + Left click`.
-    ///
     /// [`PaneGrid`]: struct.PaneGrid.html
     pub fn on_drag<F>(mut self, f: F) -> Self
     where
@@ -248,7 +250,12 @@ impl<'a, Message, Renderer> PaneGrid<'a, Message, Renderer> {
         self.on_key_press = Some(Box::new(f));
         self
     }
+}
 
+impl<'a, Message, Renderer> PaneGrid<'a, Message, Renderer>
+where
+    Renderer: self::Renderer,
+{
     fn click_pane(
         &mut self,
         layout: Layout<'_>,
@@ -260,16 +267,24 @@ impl<'a, Message, Renderer> PaneGrid<'a, Message, Renderer> {
                 |(_, layout)| layout.bounds().contains(cursor_position),
             );
 
-        if let Some(((pane, _), _)) = clicked_region.next() {
+        if let Some(((pane, content), layout)) = clicked_region.next() {
             match &self.on_drag {
-                Some(on_drag)
+                Some(on_drag) => {
-                    if self.pressed_modifiers.matches(self.modifier_keys) =>
+                    if content.can_be_picked_at(layout, cursor_position) {
-                {
+                        let pane_position = layout.position();
-                    self.state.pick_pane(pane);
 
-                    messages.push(on_drag(DragEvent::Picked { pane: *pane }));
+                        let origin = cursor_position
+                            - Vector::new(pane_position.x, pane_position.y);
+
+                        self.state.pick_pane(pane, origin);
+
+                        messages
+                            .push(on_drag(DragEvent::Picked { pane: *pane }));
+                    } else {
+                        self.state.focus(pane);
+                    }
                 }
-                _ => {
+                None => {
                     self.state.focus(pane);
                 }
             }
@@ -390,7 +405,7 @@ pub struct KeyPressEvent {
 impl<'a, Message, Renderer> Widget<'a, Message, Renderer>
     for PaneGrid<'a, Message, Renderer>
 where
-    Renderer: self::Renderer,
+    Renderer: self::Renderer + container::Renderer,
 {
     fn width(&self) -> Length {
         self.width
@@ -485,7 +500,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 {
@@ -540,9 +555,6 @@ where
                             }
                         }
                     }
-                    keyboard::Event::ModifiersChanged(modifiers) => {
-                        *self.pressed_modifiers = modifiers;
-                    }
                     _ => {}
                 }
             }
@@ -553,7 +565,7 @@ where
             {
                 self.elements.iter_mut().zip(layout.children()).for_each(
                     |((_, pane), layout)| {
-                        pane.widget.on_event(
+                        pane.on_event(
                             event.clone(),
                             layout,
                             cursor_position,
@@ -600,7 +612,8 @@ where
             })
             .map(|(_, axis)| axis);
 
-        renderer.draw(
+        self::Renderer::draw(
+            renderer,
             defaults,
             &self.elements,
             self.state.picked_pane(),
@@ -632,7 +645,9 @@ where
 ///
 /// [`PaneGrid`]: struct.PaneGrid.html
 /// [renderer]: ../../renderer/index.html
-pub trait Renderer: crate::Renderer + Sized {
+pub trait Renderer:
+    crate::Renderer + container::Renderer + text::Renderer + Sized
+{
     /// Draws a [`PaneGrid`].
     ///
     /// It receives:
@@ -648,18 +663,62 @@ pub trait Renderer: crate::Renderer + Sized {
     fn draw<Message>(
         &mut self,
         defaults: &Self::Defaults,
-        content: &[(Pane, Element<'_, Message, Self>)],
+        content: &[(Pane, Content<'_, Message, Self>)],
-        dragging: Option<Pane>,
+        dragging: Option<(Pane, Point)>,
         resizing: Option<Axis>,
         layout: Layout<'_>,
         cursor_position: Point,
     ) -> Self::Output;
+
+    /// Draws a [`Pane`].
+    ///
+    /// It receives:
+    /// - the [`TitleBar`] of the [`Pane`], if any
+    /// - the [`Content`] of the [`Pane`]
+    /// - the [`Layout`] of the [`Pane`] and its elements
+    /// - the cursor position
+    ///
+    /// [`Pane`]: struct.Pane.html
+    /// [`Layout`]: ../layout/struct.Layout.html
+    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,
+    ) -> Self::Output;
+
+    /// Draws a [`TitleBar`].
+    ///
+    /// It receives:
+    /// - the bounds, style of the [`TitleBar`]
+    /// - the style of the [`TitleBar`]
+    /// - the title of the [`TitleBar`] with its size, font, and bounds
+    /// - the controls of the [`TitleBar`] with their [`Layout`+, if any
+    /// - the cursor position
+    ///
+    /// [`TitleBar`]: struct.TitleBar.html
+    /// [`Layout`]: ../layout/struct.Layout.html
+    fn draw_title_bar<Message>(
+        &mut self,
+        defaults: &Self::Defaults,
+        bounds: Rectangle,
+        style: &Self::Style,
+        title: &str,
+        title_size: u16,
+        title_font: Self::Font,
+        title_bounds: Rectangle,
+        controls: Option<(&Element<'_, Message, Self>, Layout<'_>)>,
+        cursor_position: Point,
+    ) -> Self::Output;
 }
 
 impl<'a, Message, Renderer> From<PaneGrid<'a, Message, Renderer>>
     for Element<'a, Message, Renderer>
 where
-    Renderer: 'a + self::Renderer,
+    Renderer: 'a + self::Renderer + row::Renderer,
     Message: 'a,
 {
     fn from(

native/src/widget/pane_grid/configuration.rs

@@ -0,0 +1,30 @@
+use crate::pane_grid::Axis;
+
+/// The arrangement of a [`PaneGrid`].
+///
+/// [`PaneGrid`]: struct.PaneGrid.html
+#[derive(Debug, Clone)]
+pub enum Configuration<T> {
+    /// A split of the available space.
+    Split {
+        /// The direction of the split.
+        axis: Axis,
+
+        /// The ratio of the split in [0.0, 1.0].
+        ratio: f32,
+
+        /// The left/top [`Content`] of the split.
+        ///
+        /// [`Configuration`]: enum.Node.html
+        a: Box<Configuration<T>>,
+
+        /// The right/bottom [`Content`] of the split.
+        ///
+        /// [`Configuration`]: enum.Node.html
+        b: Box<Configuration<T>>,
+    },
+    /// A [`Pane`].
+    ///
+    /// [`Pane`]: struct.Pane.html
+    Pane(T),
+}

native/src/widget/pane_grid/content.rs

@@ -1,30 +1,197 @@
-use crate::pane_grid::Axis;
+use crate::container;
+use crate::layout;
+use crate::pane_grid::{self, TitleBar};
+use crate::{Clipboard, Element, Event, Hasher, Layout, Point, Size};
 
-/// The content of a [`PaneGrid`].
+/// The content of a [`Pane`].
 ///
-/// [`PaneGrid`]: struct.PaneGrid.html
+/// [`Pane`]: struct.Pane.html
-#[derive(Debug, Clone)]
+#[allow(missing_debug_implementations)]
-pub enum Content<T> {
+pub struct Content<'a, Message, Renderer: pane_grid::Renderer> {
-    /// A split of the available space.
+    title_bar: Option<TitleBar<'a, Message, Renderer>>,
-    Split {
+    body: Element<'a, Message, Renderer>,
-        /// The direction of the split.
+    style: Renderer::Style,
-        axis: Axis,
+}
-
+
-        /// The ratio of the split in [0.0, 1.0].
+impl<'a, Message, Renderer> Content<'a, Message, Renderer>
-        ratio: f32,
+where
-
+    Renderer: pane_grid::Renderer,
-        /// The left/top [`Content`] of the split.
+{
-        ///
+    /// Creates a new [`Content`] with the provided body.
-        /// [`Content`]: enum.Node.html
+    ///
-        a: Box<Content<T>>,
+    /// [`Content`]: struct.Content.html
-
+    pub fn new(body: impl Into<Element<'a, Message, Renderer>>) -> Self {
-        /// The right/bottom [`Content`] of the split.
+        Self {
-        ///
+            title_bar: None,
-        /// [`Content`]: enum.Node.html
+            body: body.into(),
-        b: Box<Content<T>>,
+            style: Renderer::Style::default(),
-    },
+        }
-    /// A [`Pane`].
+    }
-    ///
+
-    /// [`Pane`]: struct.Pane.html
+    /// Sets the [`TitleBar`] of this [`Content`].
-    Pane(T),
+    ///
+    /// [`TitleBar`]: struct.TitleBar.html
+    /// [`Content`]: struct.Content.html
+    pub fn title_bar(
+        mut self,
+        title_bar: TitleBar<'a, Message, Renderer>,
+    ) -> Self {
+        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>
+where
+    Renderer: pane_grid::Renderer,
+{
+    /// Draws the [`Content`] with the provided [`Renderer`] and [`Layout`].
+    ///
+    /// [`Content`]: struct.Content.html
+    /// [`Renderer`]: trait.Renderer.html
+    /// [`Layout`]: ../layout/struct.Layout.html
+    pub fn draw(
+        &self,
+        renderer: &mut Renderer,
+        defaults: &Renderer::Defaults,
+        layout: Layout<'_>,
+        cursor_position: Point,
+    ) -> Renderer::Output {
+        if let Some(title_bar) = &self.title_bar {
+            let mut children = layout.children();
+            let title_bar_layout = children.next().unwrap();
+            let body_layout = children.next().unwrap();
+
+            renderer.draw_pane(
+                defaults,
+                layout.bounds(),
+                &self.style,
+                Some((title_bar, title_bar_layout)),
+                (&self.body, body_layout),
+                cursor_position,
+            )
+        } else {
+            renderer.draw_pane(
+                defaults,
+                layout.bounds(),
+                &self.style,
+                None,
+                (&self.body, layout),
+                cursor_position,
+            )
+        }
+    }
+
+    /// Returns whether the [`Content`] with the given [`Layout`] can be picked
+    /// at the provided cursor position.
+    ///
+    /// [`Content`]: struct.Content.html
+    /// [`Layout`]: ../layout/struct.Layout.html
+    pub fn can_be_picked_at(
+        &self,
+        layout: Layout<'_>,
+        cursor_position: Point,
+    ) -> bool {
+        if let Some(title_bar) = &self.title_bar {
+            let mut children = layout.children();
+            let title_bar_layout = children.next().unwrap();
+
+            title_bar.is_over_pick_area(title_bar_layout, cursor_position)
+        } else {
+            false
+        }
+    }
+
+    pub(crate) fn layout(
+        &self,
+        renderer: &Renderer,
+        limits: &layout::Limits,
+    ) -> layout::Node {
+        if let Some(title_bar) = &self.title_bar {
+            let max_size = limits.max();
+
+            let title_bar_layout = title_bar
+                .layout(renderer, &layout::Limits::new(Size::ZERO, max_size));
+
+            let title_bar_size = title_bar_layout.size();
+
+            let mut body_layout = self.body.layout(
+                renderer,
+                &layout::Limits::new(
+                    Size::ZERO,
+                    Size::new(
+                        max_size.width,
+                        max_size.height - title_bar_size.height,
+                    ),
+                ),
+            );
+
+            body_layout.move_to(Point::new(0.0, title_bar_size.height));
+
+            layout::Node::with_children(
+                max_size,
+                vec![title_bar_layout, body_layout],
+            )
+        } else {
+            self.body.layout(renderer, limits)
+        }
+    }
+
+    pub(crate) fn on_event(
+        &mut self,
+        event: Event,
+        layout: Layout<'_>,
+        cursor_position: Point,
+        messages: &mut Vec<Message>,
+        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,
+            body_layout,
+            cursor_position,
+            messages,
+            renderer,
+            clipboard,
+        );
+    }
+
+    pub(crate) fn hash_layout(&self, state: &mut Hasher) {
+        self.body.hash_layout(state);
+    }
+}
+
+impl<'a, T, Message, Renderer> From<T> for Content<'a, Message, Renderer>
+where
+    T: Into<Element<'a, Message, Renderer>>,
+    Renderer: pane_grid::Renderer + container::Renderer,
+{
+    fn from(element: T) -> Self {
+        Self::new(element)
+    }
 }

native/src/widget/pane_grid/state.rs

@@ -1,6 +1,5 @@
 use crate::{
-    keyboard,
+    pane_grid::{Axis, Configuration, Direction, Node, Pane, Split},
-    pane_grid::{Axis, Content, Direction, Node, Pane, Split},
     Hasher, Point, Rectangle, Size,
 };
 
@@ -25,7 +24,6 @@ use std::collections::HashMap;
 pub struct State<T> {
     pub(super) panes: HashMap<Pane, T>,
     pub(super) internal: Internal,
-    pub(super) modifiers: keyboard::ModifiersState,
 }
 
 /// The current focus of a [`Pane`].
@@ -53,18 +51,21 @@ impl<T> State<T> {
     /// [`State`]: struct.State.html
     /// [`Pane`]: struct.Pane.html
     pub fn new(first_pane_state: T) -> (Self, Pane) {
-        (Self::with_content(Content::Pane(first_pane_state)), Pane(0))
+        (
+            Self::with_configuration(Configuration::Pane(first_pane_state)),
+            Pane(0),
+        )
     }
 
-    /// Creates a new [`State`] with the given [`Content`].
+    /// Creates a new [`State`] with the given [`Configuration`].
     ///
     /// [`State`]: struct.State.html
-    /// [`Content`]: enum.Content.html
+    /// [`Configuration`]: enum.Configuration.html
-    pub fn with_content(content: impl Into<Content<T>>) -> Self {
+    pub fn with_configuration(config: impl Into<Configuration<T>>) -> Self {
         let mut panes = HashMap::new();
 
         let (layout, last_id) =
-            Self::distribute_content(&mut panes, content.into(), 0);
+            Self::distribute_content(&mut panes, config.into(), 0);
 
         State {
             panes,
@@ -73,7 +74,6 @@ impl<T> State<T> {
                 last_id,
                 action: Action::Idle { focus: None },
             },
-            modifiers: keyboard::ModifiersState::default(),
         }
     }
 
@@ -283,11 +283,11 @@ impl<T> State<T> {
 
     fn distribute_content(
         panes: &mut HashMap<Pane, T>,
-        content: Content<T>,
+        content: Configuration<T>,
         next_id: usize,
     ) -> (Node, usize) {
         match content {
-            Content::Split { axis, ratio, a, b } => {
+            Configuration::Split { axis, ratio, a, b } => {
                 let (a, next_id) = Self::distribute_content(panes, *a, next_id);
                 let (b, next_id) = Self::distribute_content(panes, *b, next_id);
 
@@ -302,7 +302,7 @@ impl<T> State<T> {
                     next_id + 1,
                 )
             }
-            Content::Pane(state) => {
+            Configuration::Pane(state) => {
                 let id = Pane(next_id);
                 let _ = panes.insert(id, state);
 
@@ -319,13 +319,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,
@@ -340,7 +341,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)),
         }
     }
 }
@@ -357,9 +358,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,
         }
     }
@@ -391,8 +392,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

@@ -0,0 +1,240 @@
+use crate::layout;
+use crate::pane_grid;
+use crate::{Clipboard, Element, Event, Layout, Point, Rectangle, Size};
+
+/// The title bar of a [`Pane`].
+///
+/// [`Pane`]: struct.Pane.html
+#[allow(missing_debug_implementations)]
+pub struct TitleBar<'a, Message, Renderer: pane_grid::Renderer> {
+    title: String,
+    title_size: Option<u16>,
+    controls: Option<Element<'a, Message, Renderer>>,
+    padding: u16,
+    style: Renderer::Style,
+}
+
+impl<'a, Message, Renderer> TitleBar<'a, Message, Renderer>
+where
+    Renderer: pane_grid::Renderer,
+{
+    /// Cretes a new [`TitleBar`] with the given title.
+    ///
+    /// [`TitleBar`]: struct.TitleBar.html
+    pub fn new(title: impl Into<String>) -> Self {
+        Self {
+            title: title.into(),
+            title_size: None,
+            controls: None,
+            padding: 0,
+            style: Renderer::Style::default(),
+        }
+    }
+
+    /// Sets the size of the title of the [`TitleBar`].
+    ///
+    /// [`TitleBar`]: struct.TitleBar.html
+    pub fn title_size(mut self, size: u16) -> Self {
+        self.title_size = Some(size);
+        self
+    }
+
+    /// Sets the controls of the [`TitleBar`].
+    ///
+    /// [`TitleBar`]: struct.TitleBar.html
+    pub fn controls(
+        mut self,
+        controls: impl Into<Element<'a, Message, Renderer>>,
+    ) -> Self {
+        self.controls = Some(controls.into());
+        self
+    }
+
+    /// Sets the padding of the [`TitleBar`].
+    ///
+    /// [`TitleBar`]: struct.TitleBar.html
+    pub fn padding(mut self, units: u16) -> Self {
+        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>
+where
+    Renderer: pane_grid::Renderer,
+{
+    /// Draws the [`TitleBar`] with the provided [`Renderer`] and [`Layout`].
+    ///
+    /// [`TitleBar`]: struct.TitleBar.html
+    /// [`Renderer`]: trait.Renderer.html
+    /// [`Layout`]: ../layout/struct.Layout.html
+    pub fn draw(
+        &self,
+        renderer: &mut Renderer,
+        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 = padded.children();
+            let title_layout = children.next().unwrap();
+            let controls_layout = children.next().unwrap();
+
+            let (title_bounds, controls) = if show_controls {
+                (title_layout.bounds(), Some((controls, controls_layout)))
+            } else {
+                (
+                    Rectangle {
+                        width: padded.bounds().width,
+                        ..title_layout.bounds()
+                    },
+                    None,
+                )
+            };
+
+            renderer.draw_title_bar(
+                defaults,
+                layout.bounds(),
+                &self.style,
+                &self.title,
+                self.title_size.unwrap_or(renderer.default_size()),
+                Renderer::Font::default(),
+                title_bounds,
+                controls,
+                cursor_position,
+            )
+        } else {
+            renderer.draw_title_bar::<()>(
+                defaults,
+                layout.bounds(),
+                &self.style,
+                &self.title,
+                self.title_size.unwrap_or(renderer.default_size()),
+                Renderer::Font::default(),
+                padded.bounds(),
+                None,
+                cursor_position,
+            )
+        }
+    }
+
+    /// Returns whether the mouse cursor is over the pick area of the
+    /// [`TitleBar`] or not.
+    ///
+    /// The whole [`TitleBar`] is a pick area, except its controls.
+    ///
+    /// [`TitleBar`]: struct.TitleBar.html
+    pub fn is_over_pick_area(
+        &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,
+        limits: &layout::Limits,
+    ) -> layout::Node {
+        let padding = f32::from(self.padding);
+        let limits = limits.pad(padding);
+        let max_size = limits.max();
+
+        let title_size = self.title_size.unwrap_or(renderer.default_size());
+        let title_font = Renderer::Font::default();
+
+        let (title_width, title_height) = renderer.measure(
+            &self.title,
+            title_size,
+            title_font,
+            Size::new(f32::INFINITY, max_size.height),
+        );
+
+        let mut node = if let Some(controls) = &self.controls {
+            let mut controls_layout = controls
+                .layout(renderer, &layout::Limits::new(Size::ZERO, max_size));
+
+            let controls_size = controls_layout.size();
+            let space_before_controls = max_size.width - controls_size.width;
+
+            let mut title_layout = layout::Node::new(Size::new(
+                title_width.min(space_before_controls),
+                title_height,
+            ));
+
+            let title_size = title_layout.size();
+            let height = title_size.height.max(controls_size.height);
+
+            title_layout
+                .move_to(Point::new(0.0, (height - title_size.height) / 2.0));
+            controls_layout.move_to(Point::new(space_before_controls, 0.0));
+
+            layout::Node::with_children(
+                Size::new(max_size.width, height),
+                vec![title_layout, controls_layout],
+            )
+        } else {
+            layout::Node::new(Size::new(max_size.width, title_height))
+        };
+
+        node.move_to(Point::new(padding, padding));
+
+        layout::Node::with_children(node.size().pad(padding), vec![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,
+            );
+        }
+    }
+}

wgpu/src/widget/pane_grid.rs

@@ -11,8 +11,8 @@
 use crate::Renderer;
 
 pub use iced_native::pane_grid::{
-    Axis, Content, Direction, DragEvent, Focus, KeyPressEvent, Node, Pane,
+    Axis, Configuration, Direction, DragEvent, Focus, KeyPressEvent, Node,
-    ResizeEvent, Split, State,
+    Pane, ResizeEvent, Split, State,
 };
 
 /// A collection of panes distributed using either vertical or horizontal splits
@@ -22,3 +22,15 @@ pub use iced_native::pane_grid::{
 ///
 /// This is an alias of an `iced_native` pane grid with an `iced_wgpu::Renderer`.
 pub type PaneGrid<'a, Message> = iced_native::PaneGrid<'a, Message, Renderer>;
+
+/// The content of a [`Pane`].
+///
+/// [`Pane`]: struct.Pane.html
+pub type Content<'a, Message> =
+    iced_native::pane_grid::Content<'a, Message, Renderer>;
+
+/// The title bar of a [`Pane`].
+///
+/// [`Pane`]: struct.Pane.html
+pub type TitleBar<'a, Message> =
+    iced_native::pane_grid::TitleBar<'a, Message, Renderer>;