Merge pull request #224 from hecrj/feature/panes-widget

Pane grid widget

Cargo.toml

@@ -45,6 +45,7 @@ members = [
     "examples/geometry",
     "examples/integration",
     "examples/pokedex",
+    "examples/pane_grid",
     "examples/progress_bar",
     "examples/solar_system",
     "examples/stopwatch",

core/src/keyboard.rs

@@ -0,0 +1,6 @@
+//! Reuse basic keyboard types.
+mod key_code;
+mod modifiers_state;
+
+pub use key_code::KeyCode;
+pub use modifiers_state::ModifiersState;

core/src/keyboard/modifiers_state.rs

@@ -0,0 +1,30 @@
+/// The current state of the keyboard modifiers.
+#[derive(Debug, Clone, Copy, PartialEq, Eq, Default)]
+pub struct ModifiersState {
+    /// Whether a shift key is pressed
+    pub shift: bool,
+
+    /// Whether a control key is pressed
+    pub control: bool,
+
+    /// Whether an alt key is pressed
+    pub alt: bool,
+
+    /// Whether a logo key is pressed (e.g. windows key, command key...)
+    pub logo: bool,
+}
+
+impl ModifiersState {
+    /// Returns true if the current [`ModifiersState`] has at least the same
+    /// modifiers enabled as the given value, and false otherwise.
+    ///
+    /// [`ModifiersState`]: struct.ModifiersState.html
+    pub fn matches(&self, modifiers: ModifiersState) -> bool {
+        let shift = !modifiers.shift || self.shift;
+        let control = !modifiers.control || self.control;
+        let alt = !modifiers.alt || self.alt;
+        let logo = !modifiers.logo || self.logo;
+
+        shift && control && alt && logo
+    }
+}

core/src/lib.rs

@@ -14,6 +14,7 @@
 #![deny(unused_results)]
 #![forbid(unsafe_code)]
 #![forbid(rust_2018_idioms)]
+pub mod keyboard;
 
 mod align;
 mod background;

core/src/point.rs

@@ -22,6 +22,16 @@ impl Point {
     pub const fn new(x: f32, y: f32) -> Self {
         Self { x, y }
     }
+
+    /// Computes the distance to another [`Point`].
+    ///
+    /// [`Point`]: struct.Point.html
+    pub fn distance(&self, to: Point) -> f32 {
+        let a = self.x - to.x;
+        let b = self.y - to.y;
+
+        a.hypot(b)
+    }
 }
 
 impl From<[f32; 2]> for Point {

examples/README.md

@@ -76,6 +76,7 @@ A bunch of simpler examples exist:
 - [`events`](events), a log of native events displayed using a conditional `Subscription`.
 - [`geometry`](geometry), a custom widget showcasing how to draw geometry with the `Mesh2D` primitive in [`iced_wgpu`](../wgpu).
 - [`integration`](integration), a demonstration of how to integrate Iced in an existing graphical application.
+- [`pane_grid`](pane_grid), a grid of panes that can be split, resized, and reorganized.
 - [`pokedex`](pokedex), an application that displays a random Pokédex entry (sprite included!) by using the [PokéAPI].
 - [`progress_bar`](progress_bar), a simple progress bar that can be filled by using a slider.
 - [`solar_system`](solar_system), an animated solar system drawn using the `Canvas` widget and showcasing how to compose different transforms.

examples/pane_grid/Cargo.toml

@@ -0,0 +1,9 @@
+[package]
+name = "pane_grid"
+version = "0.1.0"
+authors = ["Héctor Ramón Jiménez <hector0193@gmail.com>"]
+edition = "2018"
+publish = false
+
+[dependencies]
+iced = { path = "../.." }

examples/pane_grid/README.md

@@ -0,0 +1,28 @@
+## Pane grid
+
+A grid of panes that can be split, resized, and reorganized.
+
+This example showcases the `PaneGrid` widget, which features:
+
+* Vertical and horizontal splits
+* Tracking of the last active pane
+* Mouse-based resizing
+* Drag and drop to reorganize panes
+* Hotkey support
+* Configurable modifier keys
+* API to perform actions programmatically (`split`, `swap`, `resize`, etc.)
+
+The __[`main`]__ file contains all the code of the example.
+
+<div align="center">
+  <a href="https://gfycat.com/mixedflatjellyfish">
+    <img src="https://thumbs.gfycat.com/MixedFlatJellyfish-small.gif">
+  </a>
+</div>
+
+You can run it with `cargo run`:
+```
+cargo run --package pane_grid
+```
+
+[`main`]: src/main.rs

examples/pane_grid/src/main.rs

@@ -0,0 +1,306 @@
+use iced::{
+    button, keyboard, pane_grid, scrollable, Align, Button, Column, Container,
+    Element, HorizontalAlignment, Length, PaneGrid, Sandbox, Scrollable,
+    Settings, Text,
+};
+
+pub fn main() {
+    Example::run(Settings::default())
+}
+
+struct Example {
+    panes: pane_grid::State<Content>,
+    panes_created: usize,
+}
+
+#[derive(Debug, Clone, Copy)]
+enum Message {
+    Split(pane_grid::Axis, pane_grid::Pane),
+    SplitFocused(pane_grid::Axis),
+    FocusAdjacent(pane_grid::Direction),
+    Dragged(pane_grid::DragEvent),
+    Resized(pane_grid::ResizeEvent),
+    Close(pane_grid::Pane),
+    CloseFocused,
+}
+
+impl Sandbox for Example {
+    type Message = Message;
+
+    fn new() -> Self {
+        let (panes, _) = pane_grid::State::new(Content::new(0));
+
+        Example {
+            panes,
+            panes_created: 1,
+        }
+    }
+
+    fn title(&self) -> String {
+        String::from("Pane grid - Iced")
+    }
+
+    fn update(&mut self, message: Message) {
+        match message {
+            Message::Split(axis, pane) => {
+                let _ = self.panes.split(
+                    axis,
+                    &pane,
+                    Content::new(self.panes_created),
+                );
+
+                self.panes_created += 1;
+            }
+            Message::SplitFocused(axis) => {
+                if let Some(pane) = self.panes.active() {
+                    let _ = self.panes.split(
+                        axis,
+                        &pane,
+                        Content::new(self.panes_created),
+                    );
+
+                    self.panes_created += 1;
+                }
+            }
+            Message::FocusAdjacent(direction) => {
+                if let Some(pane) = self.panes.active() {
+                    if let Some(adjacent) =
+                        self.panes.adjacent(&pane, direction)
+                    {
+                        self.panes.focus(&adjacent);
+                    }
+                }
+            }
+            Message::Resized(pane_grid::ResizeEvent { split, ratio }) => {
+                self.panes.resize(&split, ratio);
+            }
+            Message::Dragged(pane_grid::DragEvent::Dropped {
+                pane,
+                target,
+            }) => {
+                self.panes.swap(&pane, &target);
+            }
+            Message::Dragged(_) => {}
+            Message::Close(pane) => {
+                let _ = self.panes.close(&pane);
+            }
+            Message::CloseFocused => {
+                if let Some(pane) = self.panes.active() {
+                    let _ = self.panes.close(&pane);
+                }
+            }
+        }
+    }
+
+    fn view(&mut self) -> Element<Message> {
+        let total_panes = self.panes.len();
+
+        let pane_grid =
+            PaneGrid::new(&mut self.panes, |pane, content, focus| {
+                content.view(pane, focus, total_panes)
+            })
+            .width(Length::Fill)
+            .height(Length::Fill)
+            .spacing(10)
+            .on_drag(Message::Dragged)
+            .on_resize(Message::Resized)
+            .on_key_press(handle_hotkey);
+
+        Column::new()
+            .width(Length::Fill)
+            .height(Length::Fill)
+            .padding(10)
+            .push(pane_grid)
+            .into()
+    }
+}
+
+fn handle_hotkey(event: pane_grid::KeyPressEvent) -> Option<Message> {
+    use keyboard::KeyCode;
+    use pane_grid::{Axis, Direction};
+
+    let direction = match event.key_code {
+        KeyCode::Up => Some(Direction::Up),
+        KeyCode::Down => Some(Direction::Down),
+        KeyCode::Left => Some(Direction::Left),
+        KeyCode::Right => Some(Direction::Right),
+        _ => None,
+    };
+
+    match event.key_code {
+        KeyCode::V => Some(Message::SplitFocused(Axis::Vertical)),
+        KeyCode::H => Some(Message::SplitFocused(Axis::Horizontal)),
+        KeyCode::W => Some(Message::CloseFocused),
+        _ => direction.map(Message::FocusAdjacent),
+    }
+}
+
+struct Content {
+    id: usize,
+    scroll: scrollable::State,
+    split_horizontally: button::State,
+    split_vertically: button::State,
+    close: button::State,
+}
+
+impl Content {
+    fn new(id: usize) -> Self {
+        Content {
+            id,
+            scroll: scrollable::State::new(),
+            split_horizontally: button::State::new(),
+            split_vertically: button::State::new(),
+            close: button::State::new(),
+        }
+    }
+    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| {
+            Button::new(
+                state,
+                Text::new(label)
+                    .width(Length::Fill)
+                    .horizontal_alignment(HorizontalAlignment::Center)
+                    .size(16),
+            )
+            .width(Length::Fill)
+            .padding(8)
+            .on_press(message)
+            .style(style)
+        };
+
+        let mut controls = Column::new()
+            .spacing(5)
+            .max_width(150)
+            .push(button(
+                split_horizontally,
+                "Split horizontally",
+                Message::Split(pane_grid::Axis::Horizontal, pane),
+                style::Button::Primary,
+            ))
+            .push(button(
+                split_vertically,
+                "Split vertically",
+                Message::Split(pane_grid::Axis::Vertical, pane),
+                style::Button::Primary,
+            ));
+
+        if total_panes > 1 {
+            controls = controls.push(button(
+                close,
+                "Close",
+                Message::Close(pane),
+                style::Button::Destructive,
+            ));
+        }
+
+        let content = Scrollable::new(scroll)
+            .width(Length::Fill)
+            .spacing(10)
+            .align_items(Align::Center)
+            .push(Text::new(format!("Pane {}", id)).size(30))
+            .push(controls);
+
+        Container::new(Column::new().padding(5).push(content))
+            .width(Length::Fill)
+            .height(Length::Fill)
+            .center_y()
+            .style(style::Pane {
+                is_focused: focus.is_some(),
+            })
+            .into()
+    }
+}
+
+mod style {
+    use iced::{button, container, Background, Color, Vector};
+
+    const SURFACE: Color = Color::from_rgb(
+        0xF2 as f32 / 255.0,
+        0xF3 as f32 / 255.0,
+        0xF5 as f32 / 255.0,
+    );
+
+    const ACTIVE: Color = Color::from_rgb(
+        0x72 as f32 / 255.0,
+        0x89 as f32 / 255.0,
+        0xDA as f32 / 255.0,
+    );
+
+    const HOVERED: Color = Color::from_rgb(
+        0x67 as f32 / 255.0,
+        0x7B as f32 / 255.0,
+        0xC4 as f32 / 255.0,
+    );
+
+    pub struct Pane {
+        pub is_focused: bool,
+    }
+
+    impl container::StyleSheet for Pane {
+        fn style(&self) -> container::Style {
+            container::Style {
+                background: Some(Background::Color(SURFACE)),
+                border_width: 2,
+                border_color: Color {
+                    a: if self.is_focused { 1.0 } else { 0.3 },
+                    ..Color::BLACK
+                },
+                ..Default::default()
+            }
+        }
+    }
+
+    pub enum Button {
+        Primary,
+        Destructive,
+    }
+
+    impl button::StyleSheet for Button {
+        fn active(&self) -> button::Style {
+            let (background, text_color) = match self {
+                Button::Primary => (Some(ACTIVE), Color::WHITE),
+                Button::Destructive => {
+                    (None, Color::from_rgb8(0xFF, 0x47, 0x47))
+                }
+            };
+
+            button::Style {
+                text_color,
+                background: background.map(Background::Color),
+                border_radius: 5,
+                shadow_offset: Vector::new(0.0, 0.0),
+                ..button::Style::default()
+            }
+        }
+
+        fn hovered(&self) -> button::Style {
+            let active = self.active();
+
+            let background = match self {
+                Button::Primary => Some(HOVERED),
+                Button::Destructive => Some(Color {
+                    a: 0.2,
+                    ..active.text_color
+                }),
+            };
+
+            button::Style {
+                background: background.map(Background::Color),
+                ..active
+            }
+        }
+    }
+}

futures/src/subscription.rs

@@ -72,6 +72,34 @@ where
         self.recipes
     }
 
+    /// Adds a value to the [`Subscription`] context.
+    ///
+    /// The value will be part of the identity of a [`Subscription`].
+    ///
+    /// This is necessary if you want to use multiple instances of the same
+    /// [`Subscription`] to produce different kinds of messages based on some
+    /// external data.
+    ///
+    /// [`Subscription`]: struct.Subscription.html
+    pub fn with<T>(mut self, value: T) -> Subscription<H, E, (T, O)>
+    where
+        H: 'static,
+        E: 'static,
+        O: 'static,
+        T: std::hash::Hash + Clone + Send + Sync + 'static,
+    {
+        Subscription {
+            recipes: self
+                .recipes
+                .drain(..)
+                .map(|recipe| {
+                    Box::new(With::new(recipe, value.clone()))
+                        as Box<dyn Recipe<H, E, Output = (T, O)>>
+                })
+                .collect(),
+        }
+    }
+
     /// Transforms the [`Subscription`] output with the given function.
     ///
     /// [`Subscription`]: struct.Subscription.html
@@ -187,3 +215,45 @@ where
             .boxed()
     }
 }
+
+struct With<Hasher, Event, A, B> {
+    recipe: Box<dyn Recipe<Hasher, Event, Output = A>>,
+    value: B,
+}
+
+impl<H, E, A, B> With<H, E, A, B> {
+    fn new(recipe: Box<dyn Recipe<H, E, Output = A>>, value: B) -> Self {
+        With { recipe, value }
+    }
+}
+
+impl<H, E, A, B> Recipe<H, E> for With<H, E, A, B>
+where
+    A: 'static,
+    B: 'static + std::hash::Hash + Clone + Send + Sync,
+    H: std::hash::Hasher,
+{
+    type Output = (B, A);
+
+    fn hash(&self, state: &mut H) {
+        use std::hash::Hash;
+
+        std::any::TypeId::of::<B>().hash(state);
+        self.value.hash(state);
+        self.recipe.hash(state);
+    }
+
+    fn stream(
+        self: Box<Self>,
+        input: BoxStream<'static, E>,
+    ) -> futures::stream::BoxStream<'static, Self::Output> {
+        use futures::StreamExt;
+
+        let value = self.value;
+
+        self.recipe
+            .stream(input)
+            .map(move |element| (value.clone(), element))
+            .boxed()
+    }
+}

native/src/input/keyboard.rs

@@ -1,8 +1,5 @@
 //! Build keyboard events.
 mod event;
-mod key_code;
-mod modifiers_state;
 
 pub use event::Event;
-pub use key_code::KeyCode;
-pub use modifiers_state::ModifiersState;
+pub use iced_core::keyboard::{KeyCode, ModifiersState};

native/src/input/keyboard/modifiers_state.rs

@@ -1,15 +0,0 @@
-/// The current state of the keyboard modifiers.
-#[derive(Debug, Clone, Copy, PartialEq)]
-pub struct ModifiersState {
-    /// Whether a shift key is pressed
-    pub shift: bool,
-
-    /// Whether a control key is pressed
-    pub control: bool,
-
-    /// Whether an alt key is pressed
-    pub alt: bool,
-
-    /// Whether a logo key is pressed (e.g. windows key, command key...)
-    pub logo: bool,
-}

native/src/lib.rs

@@ -21,8 +21,8 @@
 //! # Usage
 //! The strategy to use this crate depends on your particular use case. If you
 //! want to:
-//! - Implement a custom shell or integrate it in your own system, you should
-//!   check out the [`UserInterface`] type.
+//! - Implement a custom shell or integrate it in your own system, check out the
+//! [`UserInterface`] type.
 //! - Build a new renderer, see the [renderer] module.
 //! - Build a custom widget, start at the [`Widget`] trait.
 //!

native/src/mouse_cursor.rs

@@ -21,6 +21,12 @@ pub enum MouseCursor {
 
     /// The cursor is over a text widget.
     Text,
+
+    /// The cursor is resizing a widget horizontally.
+    ResizingHorizontally,
+
+    /// The cursor is resizing a widget vertically.
+    ResizingVertically,
 }
 
 impl Default for MouseCursor {

native/src/widget.rs

@@ -25,6 +25,7 @@ pub mod checkbox;
 pub mod column;
 pub mod container;
 pub mod image;
+pub mod pane_grid;
 pub mod progress_bar;
 pub mod radio;
 pub mod row;
@@ -46,6 +47,8 @@ pub use container::Container;
 #[doc(no_inline)]
 pub use image::Image;
 #[doc(no_inline)]
+pub use pane_grid::PaneGrid;
+#[doc(no_inline)]
 pub use progress_bar::ProgressBar;
 #[doc(no_inline)]
 pub use radio::Radio;

native/src/widget/column.rs

@@ -219,7 +219,7 @@ pub trait Renderer: crate::Renderer + Sized {
     /// - the [`Layout`] of the [`Column`] and its children
     /// - the cursor position
     ///
-    /// [`Column`]: struct.Row.html
+    /// [`Column`]: struct.Column.html
     /// [`Layout`]: ../layout/struct.Layout.html
     fn draw<Message>(
         &mut self,

native/src/widget/pane_grid.rs

@@ -0,0 +1,647 @@
+//! Let your users split regions of your application and organize layout dynamically.
+//!
+//! [![Pane grid - Iced](https://thumbs.gfycat.com/MixedFlatJellyfish-small.gif)](https://gfycat.com/mixedflatjellyfish)
+mod axis;
+mod direction;
+mod node;
+mod pane;
+mod split;
+mod state;
+
+pub use axis::Axis;
+pub use direction::Direction;
+pub use pane::Pane;
+pub use split::Split;
+pub use state::{Focus, State};
+
+use crate::{
+    input::{keyboard, mouse, ButtonState},
+    layout, Clipboard, Element, Event, Hasher, Layout, Length, Point, Size,
+    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)
+///
+/// This distribution of space is common in tiling window managers (like
+/// [`awesome`](https://awesomewm.org/), [`i3`](https://i3wm.org/), or even
+/// [`tmux`](https://github.com/tmux/tmux)).
+///
+/// A [`PaneGrid`] supports:
+///
+/// * Vertical and horizontal splits
+/// * Tracking of the last active pane
+/// * Mouse-based resizing
+/// * Drag and drop to reorganize panes
+/// * Hotkey support
+/// * Configurable modifier keys
+/// * [`State`] API to perform actions programmatically (`split`, `swap`, `resize`, etc.)
+///
+/// ## Example
+///
+/// ```
+/// # use iced_native::{pane_grid, Text};
+/// #
+/// # type PaneGrid<'a, Message> =
+/// #     iced_native::PaneGrid<'a, Message, iced_native::renderer::Null>;
+/// #
+/// enum PaneState {
+///     SomePane,
+///     AnotherKindOfPane,
+/// }
+///
+/// enum Message {
+///     PaneDragged(pane_grid::DragEvent),
+///     PaneResized(pane_grid::ResizeEvent),
+/// }
+///
+/// let (mut state, _) = pane_grid::State::new(PaneState::SomePane);
+///
+/// let pane_grid = PaneGrid::new(&mut state, |pane, state, focus| {
+///     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(Message::PaneResized);
+/// ```
+///
+/// [`PaneGrid`]: struct.PaneGrid.html
+/// [`State`]: struct.State.html
+#[allow(missing_debug_implementations)]
+pub struct PaneGrid<'a, Message, Renderer> {
+    state: &'a mut state::Internal,
+    pressed_modifiers: &'a mut keyboard::ModifiersState,
+    elements: Vec<(Pane, Element<'a, Message, Renderer>)>,
+    width: Length,
+    height: Length,
+    spacing: u16,
+    modifier_keys: keyboard::ModifiersState,
+    on_drag: Option<Box<dyn Fn(DragEvent) -> Message>>,
+    on_resize: Option<Box<dyn Fn(ResizeEvent) -> Message>>,
+    on_key_press: Option<Box<dyn Fn(KeyPressEvent) -> Option<Message>>>,
+}
+
+impl<'a, Message, Renderer> PaneGrid<'a, Message, Renderer> {
+    /// Creates a [`PaneGrid`] with the given [`State`] and view function.
+    ///
+    /// The view function will be called to display each [`Pane`] present in the
+    /// [`State`].
+    ///
+    /// [`PaneGrid`]: struct.PaneGrid.html
+    /// [`State`]: struct.State.html
+    /// [`Pane`]: struct.Pane.html
+    pub fn new<T>(
+        state: &'a mut State<T>,
+        view: impl Fn(
+            Pane,
+            &'a mut T,
+            Option<Focus>,
+        ) -> Element<'a, Message, Renderer>,
+    ) -> Self {
+        let elements = {
+            let action = state.internal.action();
+            let current_focus = action.focus();
+
+            state
+                .panes
+                .iter_mut()
+                .map(move |(pane, pane_state)| {
+                    let focus = match current_focus {
+                        Some((focused_pane, focus))
+                            if *pane == focused_pane =>
+                        {
+                            Some(focus)
+                        }
+                        _ => None,
+                    };
+
+                    (*pane, view(*pane, pane_state, focus))
+                })
+                .collect()
+        };
+
+        Self {
+            state: &mut state.internal,
+            pressed_modifiers: &mut state.modifiers,
+            elements,
+            width: Length::Fill,
+            height: Length::Fill,
+            spacing: 0,
+            modifier_keys: keyboard::ModifiersState {
+                control: true,
+                ..Default::default()
+            },
+            on_drag: None,
+            on_resize: None,
+            on_key_press: None,
+        }
+    }
+
+    /// Sets the width of the [`PaneGrid`].
+    ///
+    /// [`PaneGrid`]: struct.PaneGrid.html
+    pub fn width(mut self, width: Length) -> Self {
+        self.width = width;
+        self
+    }
+
+    /// Sets the height of the [`PaneGrid`].
+    ///
+    /// [`PaneGrid`]: struct.PaneGrid.html
+    pub fn height(mut self, height: Length) -> Self {
+        self.height = height;
+        self
+    }
+
+    /// Sets the spacing _between_ the panes of the [`PaneGrid`].
+    ///
+    /// [`PaneGrid`]: struct.PaneGrid.html
+    pub fn spacing(mut self, units: u16) -> Self {
+        self.spacing = units;
+        self
+    }
+
+    /// Sets the modifier keys of the [`PaneGrid`].
+    ///
+    /// The modifier keys will need to be pressed to trigger dragging, resizing,
+    /// and key events.
+    ///
+    /// The default modifier key is `Ctrl`.
+    ///
+    /// [`PaneGrid`]: struct.PaneGrid.html
+    pub fn modifier_keys(
+        mut self,
+        modifier_keys: keyboard::ModifiersState,
+    ) -> Self {
+        self.modifier_keys = modifier_keys;
+        self
+    }
+
+    /// 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(
+        mut self,
+        f: impl Fn(DragEvent) -> Message + 'static,
+    ) -> Self {
+        self.on_drag = Some(Box::new(f));
+        self
+    }
+
+    /// Enables the resize interactions of the [`PaneGrid`], which will
+    /// use the provided function to produce messages.
+    ///
+    /// Panes can be resized using `Modifier keys + Right click`.
+    ///
+    /// [`PaneGrid`]: struct.PaneGrid.html
+    pub fn on_resize(
+        mut self,
+        f: impl Fn(ResizeEvent) -> Message + 'static,
+    ) -> Self {
+        self.on_resize = Some(Box::new(f));
+        self
+    }
+
+    /// Captures hotkey interactions with the [`PaneGrid`], using the provided
+    /// function to produce messages.
+    ///
+    /// The function will be called when:
+    ///   - a [`Pane`] is focused
+    ///   - a key is pressed
+    ///   - all the modifier keys are pressed
+    ///
+    /// If the function returns `None`, the key press event will be discarded
+    /// without producing any message.
+    ///
+    /// This method is particularly useful to implement hotkey interactions.
+    /// For instance, you can use it to enable splitting, swapping, or resizing
+    /// panes by pressing combinations of keys.
+    ///
+    /// [`PaneGrid`]: struct.PaneGrid.html
+    /// [`Pane`]: struct.Pane.html
+    pub fn on_key_press(
+        mut self,
+        f: impl Fn(KeyPressEvent) -> Option<Message> + 'static,
+    ) -> Self {
+        self.on_key_press = Some(Box::new(f));
+        self
+    }
+
+    fn trigger_resize(
+        &mut self,
+        layout: Layout<'_>,
+        cursor_position: Point,
+        messages: &mut Vec<Message>,
+    ) {
+        if let Some(on_resize) = &self.on_resize {
+            if let Some((split, _)) = self.state.picked_split() {
+                let bounds = layout.bounds();
+
+                let splits = self.state.splits(
+                    f32::from(self.spacing),
+                    Size::new(bounds.width, bounds.height),
+                );
+
+                if let Some((axis, rectangle, _)) = splits.get(&split) {
+                    let ratio = match axis {
+                        Axis::Horizontal => {
+                            let position =
+                                cursor_position.y - bounds.y - rectangle.y;
+
+                            (position / rectangle.height).max(0.1).min(0.9)
+                        }
+                        Axis::Vertical => {
+                            let position =
+                                cursor_position.x - bounds.x - rectangle.x;
+
+                            (position / rectangle.width).max(0.1).min(0.9)
+                        }
+                    };
+
+                    messages.push(on_resize(ResizeEvent { split, ratio }));
+                }
+            }
+        }
+    }
+}
+
+/// An event produced during a drag and drop interaction of a [`PaneGrid`].
+///
+/// [`PaneGrid`]: struct.PaneGrid.html
+#[derive(Debug, Clone, Copy)]
+pub enum DragEvent {
+    /// A [`Pane`] was picked for dragging.
+    ///
+    /// [`Pane`]: struct.Pane.html
+    Picked {
+        /// The picked [`Pane`].
+        ///
+        /// [`Pane`]: struct.Pane.html
+        pane: Pane,
+    },
+
+    /// A [`Pane`] was dropped on top of another [`Pane`].
+    ///
+    /// [`Pane`]: struct.Pane.html
+    Dropped {
+        /// The picked [`Pane`].
+        ///
+        /// [`Pane`]: struct.Pane.html
+        pane: Pane,
+
+        /// The [`Pane`] where the picked one was dropped on.
+        ///
+        /// [`Pane`]: struct.Pane.html
+        target: Pane,
+    },
+
+    /// A [`Pane`] was picked and then dropped outside of other [`Pane`]
+    /// boundaries.
+    ///
+    /// [`Pane`]: struct.Pane.html
+    Canceled {
+        /// The picked [`Pane`].
+        ///
+        /// [`Pane`]: struct.Pane.html
+        pane: Pane,
+    },
+}
+
+/// An event produced during a resize interaction of a [`PaneGrid`].
+///
+/// [`PaneGrid`]: struct.PaneGrid.html
+#[derive(Debug, Clone, Copy)]
+pub struct ResizeEvent {
+    /// The [`Split`] that is being dragged for resizing.
+    ///
+    /// [`Split`]: struct.Split.html
+    pub split: Split,
+
+    /// The new ratio of the [`Split`].
+    ///
+    /// The ratio is a value in [0, 1], representing the exact position of a
+    /// [`Split`] between two panes.
+    ///
+    /// [`Split`]: struct.Split.html
+    pub ratio: f32,
+}
+
+/// An event produced during a key press interaction of a [`PaneGrid`].
+///
+/// [`PaneGrid`]: struct.PaneGrid.html
+#[derive(Debug, Clone, Copy)]
+pub struct KeyPressEvent {
+    /// The key that was pressed.
+    pub key_code: keyboard::KeyCode,
+
+    /// The state of the modifier keys when the key was pressed.
+    pub modifiers: keyboard::ModifiersState,
+}
+
+impl<'a, Message, Renderer> Widget<Message, Renderer>
+    for PaneGrid<'a, Message, Renderer>
+where
+    Renderer: self::Renderer + 'static,
+    Message: 'static,
+{
+    fn width(&self) -> Length {
+        self.width
+    }
+
+    fn height(&self) -> Length {
+        self.height
+    }
+
+    fn layout(
+        &self,
+        renderer: &Renderer,
+        limits: &layout::Limits,
+    ) -> layout::Node {
+        let limits = limits.width(self.width).height(self.height);
+        let size = limits.resolve(Size::ZERO);
+
+        let regions = self.state.regions(f32::from(self.spacing), size);
+
+        let children = self
+            .elements
+            .iter()
+            .filter_map(|(pane, element)| {
+                let region = regions.get(pane)?;
+                let size = Size::new(region.width, region.height);
+
+                let mut node =
+                    element.layout(renderer, &layout::Limits::new(size, size));
+
+                node.move_to(Point::new(region.x, region.y));
+
+                Some(node)
+            })
+            .collect();
+
+        layout::Node::with_children(size, children)
+    }
+
+    fn on_event(
+        &mut self,
+        event: Event,
+        layout: Layout<'_>,
+        cursor_position: Point,
+        messages: &mut Vec<Message>,
+        renderer: &Renderer,
+        clipboard: Option<&dyn Clipboard>,
+    ) {
+        match event {
+            Event::Mouse(mouse::Event::Input {
+                button: mouse::Button::Left,
+                state,
+            }) => match state {
+                ButtonState::Pressed => {
+                    let mut clicked_region =
+                        self.elements.iter().zip(layout.children()).filter(
+                            |(_, layout)| {
+                                layout.bounds().contains(cursor_position)
+                            },
+                        );
+
+                    if let Some(((pane, _), _)) = clicked_region.next() {
+                        match &self.on_drag {
+                            Some(on_drag)
+                                if self
+                                    .pressed_modifiers
+                                    .matches(self.modifier_keys) =>
+                            {
+                                self.state.pick_pane(pane);
+
+                                messages.push(on_drag(DragEvent::Picked {
+                                    pane: *pane,
+                                }));
+                            }
+                            _ => {
+                                self.state.focus(pane);
+                            }
+                        }
+                    } else {
+                        self.state.unfocus();
+                    }
+                }
+                ButtonState::Released => {
+                    if let Some(pane) = self.state.picked_pane() {
+                        self.state.focus(&pane);
+
+                        if let Some(on_drag) = &self.on_drag {
+                            let mut dropped_region = self
+                                .elements
+                                .iter()
+                                .zip(layout.children())
+                                .filter(|(_, layout)| {
+                                    layout.bounds().contains(cursor_position)
+                                });
+
+                            let event = match dropped_region.next() {
+                                Some(((target, _), _)) if pane != *target => {
+                                    DragEvent::Dropped {
+                                        pane,
+                                        target: *target,
+                                    }
+                                }
+                                _ => DragEvent::Canceled { pane },
+                            };
+
+                            messages.push(on_drag(event));
+                        }
+                    }
+                }
+            },
+            Event::Mouse(mouse::Event::Input {
+                button: mouse::Button::Right,
+                state: ButtonState::Pressed,
+            }) if self.on_resize.is_some()
+                && self.state.picked_pane().is_none()
+                && self.pressed_modifiers.matches(self.modifier_keys) =>
+            {
+                let bounds = layout.bounds();
+
+                if bounds.contains(cursor_position) {
+                    let relative_cursor = Point::new(
+                        cursor_position.x - bounds.x,
+                        cursor_position.y - bounds.y,
+                    );
+
+                    let splits = self.state.splits(
+                        f32::from(self.spacing),
+                        Size::new(bounds.width, bounds.height),
+                    );
+
+                    let mut sorted_splits: Vec<_> = splits
+                        .iter()
+                        .filter(|(_, (axis, rectangle, _))| match axis {
+                            Axis::Horizontal => {
+                                relative_cursor.x > rectangle.x
+                                    && relative_cursor.x
+                                        < rectangle.x + rectangle.width
+                            }
+                            Axis::Vertical => {
+                                relative_cursor.y > rectangle.y
+                                    && relative_cursor.y
+                                        < rectangle.y + rectangle.height
+                            }
+                        })
+                        .collect();
+
+                    sorted_splits.sort_by_key(
+                        |(_, (axis, rectangle, ratio))| {
+                            let distance = match axis {
+                                Axis::Horizontal => (relative_cursor.y
+                                    - (rectangle.y + rectangle.height * ratio))
+                                    .abs(),
+                                Axis::Vertical => (relative_cursor.x
+                                    - (rectangle.x + rectangle.width * ratio))
+                                    .abs(),
+                            };
+
+                            distance.round() as u32
+                        },
+                    );
+
+                    if let Some((split, (axis, _, _))) = sorted_splits.first() {
+                        self.state.pick_split(split, *axis);
+                        self.trigger_resize(layout, cursor_position, messages);
+                    }
+                }
+            }
+            Event::Mouse(mouse::Event::Input {
+                button: mouse::Button::Right,
+                state: ButtonState::Released,
+            }) if self.state.picked_split().is_some() => {
+                self.state.drop_split();
+            }
+            Event::Mouse(mouse::Event::CursorMoved { .. }) => {
+                self.trigger_resize(layout, cursor_position, messages);
+            }
+            Event::Keyboard(keyboard::Event::Input {
+                modifiers,
+                key_code,
+                state,
+            }) => {
+                if let Some(on_key_press) = &self.on_key_press {
+                    // TODO: Discard when event is captured
+                    if state == ButtonState::Pressed {
+                        if let Some(_) = self.state.active_pane() {
+                            if modifiers.matches(self.modifier_keys) {
+                                if let Some(message) =
+                                    on_key_press(KeyPressEvent {
+                                        key_code,
+                                        modifiers,
+                                    })
+                                {
+                                    messages.push(message);
+                                }
+                            }
+                        }
+                    }
+                }
+
+                *self.pressed_modifiers = modifiers;
+            }
+            _ => {}
+        }
+
+        if self.state.picked_pane().is_none() {
+            {
+                self.elements.iter_mut().zip(layout.children()).for_each(
+                    |((_, pane), layout)| {
+                        pane.widget.on_event(
+                            event.clone(),
+                            layout,
+                            cursor_position,
+                            messages,
+                            renderer,
+                            clipboard,
+                        )
+                    },
+                );
+            }
+        }
+    }
+
+    fn draw(
+        &self,
+        renderer: &mut Renderer,
+        defaults: &Renderer::Defaults,
+        layout: Layout<'_>,
+        cursor_position: Point,
+    ) -> Renderer::Output {
+        renderer.draw(
+            defaults,
+            &self.elements,
+            self.state.picked_pane(),
+            self.state.picked_split().map(|(_, axis)| axis),
+            layout,
+            cursor_position,
+        )
+    }
+
+    fn hash_layout(&self, state: &mut Hasher) {
+        use std::hash::Hash;
+
+        std::any::TypeId::of::<PaneGrid<'_, Message, Renderer>>().hash(state);
+        self.width.hash(state);
+        self.height.hash(state);
+        self.state.hash_layout(state);
+
+        for (_, element) in &self.elements {
+            element.hash_layout(state);
+        }
+    }
+}
+
+/// The renderer of a [`PaneGrid`].
+///
+/// Your [renderer] will need to implement this trait before being
+/// able to use a [`PaneGrid`] in your user interface.
+///
+/// [`PaneGrid`]: struct.PaneGrid.html
+/// [renderer]: ../../renderer/index.html
+pub trait Renderer: crate::Renderer + Sized {
+    /// Draws a [`PaneGrid`].
+    ///
+    /// It receives:
+    /// - the elements of the [`PaneGrid`]
+    /// - the [`Pane`] that is currently being dragged
+    /// - the [`Axis`] that is currently being resized
+    /// - the [`Layout`] of the [`PaneGrid`] and its elements
+    /// - the cursor position
+    ///
+    /// [`PaneGrid`]: struct.PaneGrid.html
+    /// [`Pane`]: struct.Pane.html
+    /// [`Layout`]: ../layout/struct.Layout.html
+    fn draw<Message>(
+        &mut self,
+        defaults: &Self::Defaults,
+        content: &[(Pane, Element<'_, Message, Self>)],
+        dragging: Option<Pane>,
+        resizing: Option<Axis>,
+        layout: Layout<'_>,
+        cursor_position: Point,
+    ) -> Self::Output;
+}
+
+impl<'a, Message, Renderer> From<PaneGrid<'a, Message, Renderer>>
+    for Element<'a, Message, Renderer>
+where
+    Renderer: self::Renderer + 'static,
+    Message: 'static,
+{
+    fn from(
+        pane_grid: PaneGrid<'a, Message, Renderer>,
+    ) -> Element<'a, Message, Renderer> {
+        Element::new(pane_grid)
+    }
+}

native/src/widget/pane_grid/axis.rs

@@ -0,0 +1,54 @@
+use crate::Rectangle;
+
+/// A fixed reference line for the measurement of coordinates.
+#[derive(Debug, Clone, Copy, Hash, PartialEq, Eq)]
+pub enum Axis {
+    /// The horizontal axis: —
+    Horizontal,
+    /// The vertical axis: |
+    Vertical,
+}
+
+impl Axis {
+    pub(super) fn split(
+        &self,
+        rectangle: &Rectangle,
+        ratio: f32,
+        halved_spacing: f32,
+    ) -> (Rectangle, Rectangle) {
+        match self {
+            Axis::Horizontal => {
+                let height_top = (rectangle.height * ratio).round();
+                let height_bottom = rectangle.height - height_top;
+
+                (
+                    Rectangle {
+                        height: height_top - halved_spacing,
+                        ..*rectangle
+                    },
+                    Rectangle {
+                        y: rectangle.y + height_top + halved_spacing,
+                        height: height_bottom - halved_spacing,
+                        ..*rectangle
+                    },
+                )
+            }
+            Axis::Vertical => {
+                let width_left = (rectangle.width * ratio).round();
+                let width_right = rectangle.width - width_left;
+
+                (
+                    Rectangle {
+                        width: width_left - halved_spacing,
+                        ..*rectangle
+                    },
+                    Rectangle {
+                        x: rectangle.x + width_left + halved_spacing,
+                        width: width_right - halved_spacing,
+                        ..*rectangle
+                    },
+                )
+            }
+        }
+    }
+}

native/src/widget/pane_grid/direction.rs

@@ -0,0 +1,12 @@
+/// A four cardinal direction.
+#[derive(Debug, Clone, Copy, PartialEq, Eq)]
+pub enum Direction {
+    /// ↑
+    Up,
+    /// ↓
+    Down,
+    /// ←
+    Left,
+    /// →
+    Right,
+}

native/src/widget/pane_grid/node.rs

@@ -0,0 +1,199 @@
+use crate::{
+    pane_grid::{Axis, Pane, Split},
+    Rectangle, Size,
+};
+
+use std::collections::HashMap;
+
+#[derive(Debug, Clone, Hash)]
+pub enum Node {
+    Split {
+        id: Split,
+        axis: Axis,
+        ratio: u32,
+        a: Box<Node>,
+        b: Box<Node>,
+    },
+    Pane(Pane),
+}
+
+impl Node {
+    pub fn find(&mut self, pane: &Pane) -> Option<&mut Node> {
+        match self {
+            Node::Split { a, b, .. } => {
+                a.find(pane).or_else(move || b.find(pane))
+            }
+            Node::Pane(p) => {
+                if p == pane {
+                    Some(self)
+                } else {
+                    None
+                }
+            }
+        }
+    }
+
+    pub fn split(&mut self, id: Split, axis: Axis, new_pane: Pane) {
+        *self = Node::Split {
+            id,
+            axis,
+            ratio: 500_000,
+            a: Box::new(self.clone()),
+            b: Box::new(Node::Pane(new_pane)),
+        };
+    }
+
+    pub fn update(&mut self, f: &impl Fn(&mut Node)) {
+        match self {
+            Node::Split { a, b, .. } => {
+                a.update(f);
+                b.update(f);
+            }
+            _ => {}
+        }
+
+        f(self);
+    }
+
+    pub fn resize(&mut self, split: &Split, percentage: f32) -> bool {
+        match self {
+            Node::Split {
+                id, ratio, a, b, ..
+            } => {
+                if id == split {
+                    *ratio = (percentage * 1_000_000.0).round() as u32;
+
+                    true
+                } else if a.resize(split, percentage) {
+                    true
+                } else {
+                    b.resize(split, percentage)
+                }
+            }
+            Node::Pane(_) => false,
+        }
+    }
+
+    pub fn remove(&mut self, pane: &Pane) -> Option<Pane> {
+        match self {
+            Node::Split { a, b, .. } => {
+                if a.pane() == Some(*pane) {
+                    *self = *b.clone();
+                    Some(self.first_pane())
+                } else if b.pane() == Some(*pane) {
+                    *self = *a.clone();
+                    Some(self.first_pane())
+                } else {
+                    a.remove(pane).or_else(|| b.remove(pane))
+                }
+            }
+            Node::Pane(_) => None,
+        }
+    }
+
+    pub fn regions(
+        &self,
+        spacing: f32,
+        size: Size,
+    ) -> HashMap<Pane, Rectangle> {
+        let mut regions = HashMap::new();
+
+        self.compute_regions(
+            spacing / 2.0,
+            &Rectangle {
+                x: 0.0,
+                y: 0.0,
+                width: size.width,
+                height: size.height,
+            },
+            &mut regions,
+        );
+
+        regions
+    }
+
+    pub fn splits(
+        &self,
+        spacing: f32,
+        size: Size,
+    ) -> HashMap<Split, (Axis, Rectangle, f32)> {
+        let mut splits = HashMap::new();
+
+        self.compute_splits(
+            spacing / 2.0,
+            &Rectangle {
+                x: 0.0,
+                y: 0.0,
+                width: size.width,
+                height: size.height,
+            },
+            &mut splits,
+        );
+
+        splits
+    }
+
+    pub fn pane(&self) -> Option<Pane> {
+        match self {
+            Node::Split { .. } => None,
+            Node::Pane(pane) => Some(*pane),
+        }
+    }
+
+    pub fn first_pane(&self) -> Pane {
+        match self {
+            Node::Split { a, .. } => a.first_pane(),
+            Node::Pane(pane) => *pane,
+        }
+    }
+
+    fn compute_regions(
+        &self,
+        halved_spacing: f32,
+        current: &Rectangle,
+        regions: &mut HashMap<Pane, Rectangle>,
+    ) {
+        match self {
+            Node::Split {
+                axis, ratio, a, b, ..
+            } => {
+                let ratio = *ratio as f32 / 1_000_000.0;
+                let (region_a, region_b) =
+                    axis.split(current, ratio, halved_spacing);
+
+                a.compute_regions(halved_spacing, &region_a, regions);
+                b.compute_regions(halved_spacing, &region_b, regions);
+            }
+            Node::Pane(pane) => {
+                let _ = regions.insert(*pane, *current);
+            }
+        }
+    }
+
+    fn compute_splits(
+        &self,
+        halved_spacing: f32,
+        current: &Rectangle,
+        splits: &mut HashMap<Split, (Axis, Rectangle, f32)>,
+    ) {
+        match self {
+            Node::Split {
+                axis,
+                ratio,
+                a,
+                b,
+                id,
+            } => {
+                let ratio = *ratio as f32 / 1_000_000.0;
+                let (region_a, region_b) =
+                    axis.split(current, ratio, halved_spacing);
+
+                let _ = splits.insert(*id, (*axis, *current, ratio));
+
+                a.compute_splits(halved_spacing, &region_a, splits);
+                b.compute_splits(halved_spacing, &region_b, splits);
+            }
+            Node::Pane(_) => {}
+        }
+    }
+}

native/src/widget/pane_grid/pane.rs

@@ -0,0 +1,5 @@
+/// A rectangular region in a [`PaneGrid`] used to display widgets.
+///
+/// [`PaneGrid`]: struct.PaneGrid.html
+#[derive(Debug, Clone, Copy, PartialEq, Eq, Hash)]
+pub struct Pane(pub(super) usize);

native/src/widget/pane_grid/split.rs

@@ -0,0 +1,5 @@
+/// A divider that splits a region in a [`PaneGrid`] into two different panes.
+///
+/// [`PaneGrid`]: struct.PaneGrid.html
+#[derive(Debug, Clone, Copy, PartialEq, Eq, Hash)]
+pub struct Split(pub(super) usize);

native/src/widget/pane_grid/state.rs

@@ -0,0 +1,368 @@
+use crate::{
+    input::keyboard,
+    pane_grid::{node::Node, Axis, Direction, Pane, Split},
+    Hasher, Point, Rectangle, Size,
+};
+
+use std::collections::HashMap;
+
+/// The state of a [`PaneGrid`].
+///
+/// It keeps track of the state of each [`Pane`] and the position of each
+/// [`Split`].
+///
+/// The [`State`] needs to own any mutable contents a [`Pane`] may need. This is
+/// why this struct is generic over the type `T`. Values of this type are
+/// provided to the view function of [`PaneGrid::new`] for displaying each
+/// [`Pane`].
+///
+/// [`PaneGrid`]: struct.PaneGrid.html
+/// [`PaneGrid::new`]: struct.PaneGrid.html#method.new
+/// [`Pane`]: struct.Pane.html
+/// [`Split`]: struct.Split.html
+/// [`State`]: struct.State.html
+#[derive(Debug)]
+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`].
+///
+/// [`Pane`]: struct.Pane.html
+#[derive(Debug, Clone, Copy, PartialEq, Eq)]
+pub enum Focus {
+    /// The [`Pane`] is just focused.
+    ///
+    /// [`Pane`]: struct.Pane.html
+    Idle,
+
+    /// The [`Pane`] is being dragged.
+    ///
+    /// [`Pane`]: struct.Pane.html
+    Dragging,
+}
+
+impl<T> State<T> {
+    /// Creates a new [`State`], initializing the first pane with the provided
+    /// state.
+    ///
+    /// Alongside the [`State`], it returns the first [`Pane`] identifier.
+    ///
+    /// [`State`]: struct.State.html
+    /// [`Pane`]: struct.Pane.html
+    pub fn new(first_pane_state: T) -> (Self, Pane) {
+        let first_pane = Pane(0);
+
+        let mut panes = HashMap::new();
+        let _ = panes.insert(first_pane, first_pane_state);
+
+        (
+            State {
+                panes,
+                internal: Internal {
+                    layout: Node::Pane(first_pane),
+                    last_id: 0,
+                    action: Action::Idle { focus: None },
+                },
+                modifiers: keyboard::ModifiersState::default(),
+            },
+            first_pane,
+        )
+    }
+
+    /// Returns the total amount of panes in the [`State`].
+    ///
+    /// [`State`]: struct.State.html
+    pub fn len(&self) -> usize {
+        self.panes.len()
+    }
+
+    /// Returns the internal state of the given [`Pane`], if it exists.
+    ///
+    /// [`Pane`]: struct.Pane.html
+    pub fn get_mut(&mut self, pane: &Pane) -> Option<&mut T> {
+        self.panes.get_mut(pane)
+    }
+
+    /// Returns an iterator over all the panes of the [`State`], alongside its
+    /// internal state.
+    ///
+    /// [`State`]: struct.State.html
+    pub fn iter(&self) -> impl Iterator<Item = (&Pane, &T)> {
+        self.panes.iter()
+    }
+
+    /// Returns a mutable iterator over all the panes of the [`State`],
+    /// alongside its internal state.
+    ///
+    /// [`State`]: struct.State.html
+    pub fn iter_mut(&mut self) -> impl Iterator<Item = (&Pane, &mut T)> {
+        self.panes.iter_mut()
+    }
+
+    /// Returns the active [`Pane`] of the [`State`], if there is one.
+    ///
+    /// A [`Pane`] is active if it is focused and is __not__ being dragged.
+    ///
+    /// [`Pane`]: struct.Pane.html
+    /// [`State`]: struct.State.html
+    pub fn active(&self) -> Option<Pane> {
+        self.internal.active_pane()
+    }
+
+    /// Returns the adjacent [`Pane`] of another [`Pane`] in the given
+    /// direction, if there is one.
+    ///
+    /// ## Example
+    /// You can combine this with [`State::active`] to find the pane that is
+    /// adjacent to the current active one, and then swap them. For instance:
+    ///
+    /// ```
+    /// # use iced_native::pane_grid;
+    /// #
+    /// # let (mut state, _) = pane_grid::State::new(());
+    /// #
+    /// if let Some(active) = state.active() {
+    ///     if let Some(adjacent) = state.adjacent(&active, pane_grid::Direction::Right) {
+    ///         state.swap(&active, &adjacent);
+    ///     }
+    /// }
+    /// ```
+    ///
+    /// [`Pane`]: struct.Pane.html
+    /// [`State::active`]: struct.State.html#method.active
+    pub fn adjacent(&self, pane: &Pane, direction: Direction) -> Option<Pane> {
+        let regions =
+            self.internal.layout.regions(0.0, Size::new(4096.0, 4096.0));
+
+        let current_region = regions.get(pane)?;
+
+        let target = match direction {
+            Direction::Left => {
+                Point::new(current_region.x - 1.0, current_region.y + 1.0)
+            }
+            Direction::Right => Point::new(
+                current_region.x + current_region.width + 1.0,
+                current_region.y + 1.0,
+            ),
+            Direction::Up => {
+                Point::new(current_region.x + 1.0, current_region.y - 1.0)
+            }
+            Direction::Down => Point::new(
+                current_region.x + 1.0,
+                current_region.y + current_region.height + 1.0,
+            ),
+        };
+
+        let mut colliding_regions =
+            regions.iter().filter(|(_, region)| region.contains(target));
+
+        let (pane, _) = colliding_regions.next()?;
+
+        Some(*pane)
+    }
+
+    /// Focuses the given [`Pane`].
+    ///
+    /// [`Pane`]: struct.Pane.html
+    pub fn focus(&mut self, pane: &Pane) {
+        self.internal.focus(pane);
+    }
+
+    /// Splits the given [`Pane`] into two in the given [`Axis`] and
+    /// initializing the new [`Pane`] with the provided internal state.
+    ///
+    /// [`Pane`]: struct.Pane.html
+    /// [`Axis`]: enum.Axis.html
+    pub fn split(&mut self, axis: Axis, pane: &Pane, state: T) -> Option<Pane> {
+        let node = self.internal.layout.find(pane)?;
+
+        let new_pane = {
+            self.internal.last_id = self.internal.last_id.checked_add(1)?;
+
+            Pane(self.internal.last_id)
+        };
+
+        let new_split = {
+            self.internal.last_id = self.internal.last_id.checked_add(1)?;
+
+            Split(self.internal.last_id)
+        };
+
+        node.split(new_split, axis, new_pane);
+
+        let _ = self.panes.insert(new_pane, state);
+        self.focus(&new_pane);
+
+        Some(new_pane)
+    }
+
+    /// Swaps the position of the provided panes in the [`State`].
+    ///
+    /// If you want to swap panes on drag and drop in your [`PaneGrid`], you
+    /// will need to call this method when handling a [`DragEvent`].
+    ///
+    /// [`State`]: struct.State.html
+    /// [`PaneGrid`]: struct.PaneGrid.html
+    /// [`DragEvent`]: struct.DragEvent.html
+    pub fn swap(&mut self, a: &Pane, b: &Pane) {
+        self.internal.layout.update(&|node| match node {
+            Node::Split { .. } => {}
+            Node::Pane(pane) => {
+                if pane == a {
+                    *node = Node::Pane(*b);
+                } else if pane == b {
+                    *node = Node::Pane(*a);
+                }
+            }
+        });
+    }
+
+    /// Resizes two panes by setting the position of the provided [`Split`].
+    ///
+    /// The ratio is a value in [0, 1], representing the exact position of a
+    /// [`Split`] between two panes.
+    ///
+    /// If you want to enable resize interactions in your [`PaneGrid`], you will
+    /// need to call this method when handling a [`ResizeEvent`].
+    ///
+    /// [`Split`]: struct.Split.html
+    /// [`PaneGrid`]: struct.PaneGrid.html
+    /// [`ResizeEvent`]: struct.ResizeEvent.html
+    pub fn resize(&mut self, split: &Split, ratio: f32) {
+        let _ = self.internal.layout.resize(split, ratio);
+    }
+
+    /// Closes the given [`Pane`] and returns its internal state, if it exists.
+    ///
+    /// [`Pane`]: struct.Pane.html
+    pub fn close(&mut self, pane: &Pane) -> Option<T> {
+        if let Some(sibling) = self.internal.layout.remove(pane) {
+            self.focus(&sibling);
+            self.panes.remove(pane)
+        } else {
+            None
+        }
+    }
+}
+
+#[derive(Debug)]
+pub struct Internal {
+    layout: Node,
+    last_id: usize,
+    action: Action,
+}
+
+#[derive(Debug, Clone, Copy, PartialEq, Eq)]
+pub enum Action {
+    Idle {
+        focus: Option<Pane>,
+    },
+    Dragging {
+        pane: Pane,
+    },
+    Resizing {
+        split: Split,
+        axis: Axis,
+        focus: Option<Pane>,
+    },
+}
+
+impl Action {
+    pub fn focus(&self) -> Option<(Pane, Focus)> {
+        match self {
+            Action::Idle { focus } | Action::Resizing { focus, .. } => {
+                focus.map(|pane| (pane, Focus::Idle))
+            }
+            Action::Dragging { pane } => Some((*pane, Focus::Dragging)),
+        }
+    }
+}
+
+impl Internal {
+    pub fn action(&self) -> Action {
+        self.action
+    }
+
+    pub fn active_pane(&self) -> Option<Pane> {
+        match self.action {
+            Action::Idle { focus } => focus,
+            _ => None,
+        }
+    }
+
+    pub fn picked_pane(&self) -> Option<Pane> {
+        match self.action {
+            Action::Dragging { pane } => Some(pane),
+            _ => None,
+        }
+    }
+
+    pub fn picked_split(&self) -> Option<(Split, Axis)> {
+        match self.action {
+            Action::Resizing { split, axis, .. } => Some((split, axis)),
+            _ => None,
+        }
+    }
+
+    pub fn regions(
+        &self,
+        spacing: f32,
+        size: Size,
+    ) -> HashMap<Pane, Rectangle> {
+        self.layout.regions(spacing, size)
+    }
+
+    pub fn splits(
+        &self,
+        spacing: f32,
+        size: Size,
+    ) -> HashMap<Split, (Axis, Rectangle, f32)> {
+        self.layout.splits(spacing, size)
+    }
+
+    pub fn focus(&mut self, pane: &Pane) {
+        self.action = Action::Idle { focus: Some(*pane) };
+    }
+
+    pub fn pick_pane(&mut self, pane: &Pane) {
+        self.action = Action::Dragging { pane: *pane };
+    }
+
+    pub fn pick_split(&mut self, split: &Split, axis: Axis) {
+        // TODO: Obtain `axis` from layout itself. Maybe we should implement
+        // `Node::find_split`
+        if self.picked_pane().is_some() {
+            return;
+        }
+
+        let focus = self.action.focus().map(|(pane, _)| pane);
+
+        self.action = Action::Resizing {
+            split: *split,
+            axis,
+            focus,
+        };
+    }
+
+    pub fn drop_split(&mut self) {
+        match self.action {
+            Action::Resizing { focus, .. } => {
+                self.action = Action::Idle { focus };
+            }
+            _ => {}
+        }
+    }
+
+    pub fn unfocus(&mut self) {
+        self.action = Action::Idle { focus: None };
+    }
+
+    pub fn hash_layout(&self, hasher: &mut Hasher) {
+        use std::hash::Hash;
+
+        self.layout.hash(hasher);
+    }
+}

src/keyboard.rs

@@ -0,0 +1,6 @@
+//! Listen and react to keyboard events.
+#[cfg(not(target_arch = "wasm32"))]
+pub use iced_winit::input::keyboard::{KeyCode, ModifiersState};
+
+#[cfg(target_arch = "wasm32")]
+pub use iced_web::keyboard::{KeyCode, ModifiersState};

src/lib.rs

@@ -183,6 +183,7 @@ mod element;
 mod sandbox;
 
 pub mod executor;
+pub mod keyboard;
 pub mod settings;
 pub mod widget;
 pub mod window;

src/widget.rs

@@ -35,8 +35,9 @@ mod platform {
     #[doc(no_inline)]
     pub use {
         button::Button, checkbox::Checkbox, container::Container, image::Image,
-        progress_bar::ProgressBar, radio::Radio, scrollable::Scrollable,
-        slider::Slider, svg::Svg, text_input::TextInput,
+        pane_grid::PaneGrid, progress_bar::ProgressBar, radio::Radio,
+        scrollable::Scrollable, slider::Slider, svg::Svg,
+        text_input::TextInput,
     };
 
     /// A container that distributes its contents vertically.

web/src/lib.rs

@@ -73,8 +73,8 @@ pub use dodrio;
 pub use element::Element;
 pub use hasher::Hasher;
 pub use iced_core::{
-    Align, Background, Color, Font, HorizontalAlignment, Length, Point, Size,
-    Vector, VerticalAlignment,
+    keyboard, Align, Background, Color, Font, HorizontalAlignment, Length,
+    Point, Size, Vector, VerticalAlignment,
 };
 pub use iced_futures::{executor, futures, Command};
 pub use subscription::Subscription;

wgpu/src/renderer/widget.rs

@@ -2,6 +2,7 @@ mod button;
 mod checkbox;
 mod column;
 mod container;
+mod pane_grid;
 mod progress_bar;
 mod radio;
 mod row;

wgpu/src/renderer/widget/pane_grid.rs

@@ -0,0 +1,92 @@
+use crate::{Primitive, Renderer};
+use iced_native::{
+    pane_grid::{self, Axis, Pane},
+    Element, Layout, MouseCursor, Point, Rectangle, Vector,
+};
+
+impl pane_grid::Renderer for Renderer {
+    fn draw<Message>(
+        &mut self,
+        defaults: &Self::Defaults,
+        content: &[(Pane, Element<'_, Message, Self>)],
+        dragging: Option<Pane>,
+        resizing: Option<Axis>,
+        layout: Layout<'_>,
+        cursor_position: Point,
+    ) -> Self::Output {
+        let pane_cursor_position = if dragging.is_some() {
+            // TODO: Remove once cursor availability is encoded in the type
+            // system
+            Point::new(-1.0, -1.0)
+        } else {
+            cursor_position
+        };
+
+        let mut mouse_cursor = MouseCursor::OutOfBounds;
+        let mut dragged_pane = None;
+
+        let mut panes: Vec<_> = content
+            .iter()
+            .zip(layout.children())
+            .enumerate()
+            .map(|(i, ((id, pane), layout))| {
+                let (primitive, new_mouse_cursor) =
+                    pane.draw(self, defaults, layout, pane_cursor_position);
+
+                if new_mouse_cursor > mouse_cursor {
+                    mouse_cursor = new_mouse_cursor;
+                }
+
+                if Some(*id) == dragging {
+                    dragged_pane = Some((i, layout));
+                }
+
+                primitive
+            })
+            .collect();
+
+        let primitives = if let Some((index, layout)) = dragged_pane {
+            let pane = panes.remove(index);
+            let bounds = layout.bounds();
+
+            // 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,
+                    y: cursor_position.y - bounds.height / 2.0,
+                    width: bounds.width + 0.5,
+                    height: bounds.height + 0.5,
+                },
+                offset: Vector::new(0, 0),
+                content: Box::new(Primitive::Cached {
+                    origin: Point::new(
+                        cursor_position.x - bounds.x - bounds.width / 2.0,
+                        cursor_position.y - bounds.y - bounds.height / 2.0,
+                    ),
+                    cache: std::sync::Arc::new(pane),
+                }),
+            };
+
+            panes.push(clip);
+
+            panes
+        } else {
+            panes
+        };
+
+        (
+            Primitive::Group { primitives },
+            if dragging.is_some() {
+                MouseCursor::Grabbing
+            } else if let Some(axis) = resizing {
+                match axis {
+                    Axis::Horizontal => MouseCursor::ResizingVertically,
+                    Axis::Vertical => MouseCursor::ResizingHorizontally,
+                }
+            } else {
+                mouse_cursor
+            },
+        )
+    }
+}

wgpu/src/renderer/widget/scrollable.rs

@@ -58,14 +58,14 @@ impl scrollable::Renderer for Renderer {
         style_sheet: &Self::Style,
         (content, mouse_cursor): Self::Output,
     ) -> Self::Output {
+        (
+            if let Some(scrollbar) = scrollbar {
                 let clip = Primitive::Clip {
                     bounds,
                     offset: Vector::new(0, offset),
                     content: Box::new(content),
                 };
 
-        (
-            if let Some(scrollbar) = scrollbar {
                 let style = if state.is_scroller_grabbed() {
                     style_sheet.dragging()
                 } else if is_mouse_over_scrollbar {
@@ -115,7 +115,7 @@ impl scrollable::Renderer for Renderer {
                     primitives: vec![clip, scrollbar, scroller],
                 }
             } else {
-                clip
+                content
             },
             if is_mouse_over_scrollbar || state.is_scroller_grabbed() {
                 MouseCursor::Idle

wgpu/src/widget.rs

@@ -10,6 +10,7 @@
 pub mod button;
 pub mod checkbox;
 pub mod container;
+pub mod pane_grid;
 pub mod progress_bar;
 pub mod radio;
 pub mod scrollable;
@@ -23,6 +24,8 @@ pub use checkbox::Checkbox;
 #[doc(no_inline)]
 pub use container::Container;
 #[doc(no_inline)]
+pub use pane_grid::PaneGrid;
+#[doc(no_inline)]
 pub use progress_bar::ProgressBar;
 #[doc(no_inline)]
 pub use radio::Radio;

wgpu/src/widget/canvas/layer/cache.rs

@@ -19,7 +19,6 @@ pub struct Cache<T: Drawable> {
     state: RefCell<State>,
 }
 
-#[derive(Debug)]
 enum State {
     Empty,
     Filled {
@@ -97,3 +96,16 @@ where
         primitive
     }
 }
+
+impl std::fmt::Debug for State {
+    fn fmt(&self, f: &mut std::fmt::Formatter<'_>) -> std::fmt::Result {
+        match self {
+            State::Empty => write!(f, "Empty"),
+            State::Filled { primitive, bounds } => f
+                .debug_struct("Filled")
+                .field("primitive", primitive)
+                .field("bounds", bounds)
+                .finish(),
+        }
+    }
+}

wgpu/src/widget/pane_grid.rs

@@ -0,0 +1,17 @@
+//! Let your users split regions of your application and organize layout dynamically.
+//!
+//! [![Pane grid - Iced](https://thumbs.gfycat.com/MixedFlatJellyfish-small.gif)](https://gfycat.com/mixedflatjellyfish)
+use crate::Renderer;
+
+pub use iced_native::pane_grid::{
+    Axis, Direction, DragEvent, Focus, KeyPressEvent, Pane, ResizeEvent, Split,
+    State,
+};
+
+/// 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)
+///
+/// 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>;

winit/src/conversion.rs

@@ -116,6 +116,10 @@ pub fn mouse_cursor(mouse_cursor: MouseCursor) -> winit::window::CursorIcon {
         MouseCursor::Grab => winit::window::CursorIcon::Grab,
         MouseCursor::Grabbing => winit::window::CursorIcon::Grabbing,
         MouseCursor::Text => winit::window::CursorIcon::Text,
+        MouseCursor::ResizingHorizontally => {
+            winit::window::CursorIcon::EwResize
+        }
+        MouseCursor::ResizingVertically => winit::window::CursorIcon::NsResize,
     }
 }