diff --git a/Cargo.toml b/Cargo.toml index 01231b70af..12b75aed82 100644 --- a/Cargo.toml +++ b/Cargo.toml @@ -45,6 +45,7 @@ members = [ "examples/geometry", "examples/integration", "examples/pokedex", + "examples/pane_grid", "examples/progress_bar", "examples/solar_system", "examples/stopwatch", diff --git a/core/src/keyboard.rs b/core/src/keyboard.rs new file mode 100644 index 0000000000..d98b2989f8 --- /dev/null +++ b/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; diff --git a/native/src/input/keyboard/key_code.rs b/core/src/keyboard/key_code.rs similarity index 100% rename from native/src/input/keyboard/key_code.rs rename to core/src/keyboard/key_code.rs diff --git a/core/src/keyboard/modifiers_state.rs b/core/src/keyboard/modifiers_state.rs new file mode 100644 index 0000000000..4d24266fab --- /dev/null +++ b/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 + } +} diff --git a/core/src/lib.rs b/core/src/lib.rs index ea5e8b4365..c2887a0be2 100644 --- a/core/src/lib.rs +++ b/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; diff --git a/core/src/point.rs b/core/src/point.rs index b55f5099c2..43ee21432d 100644 --- a/core/src/point.rs +++ b/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 { diff --git a/examples/README.md b/examples/README.md index 04399b932f..a76737053f 100644 --- a/examples/README.md +++ b/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. diff --git a/examples/pane_grid/Cargo.toml b/examples/pane_grid/Cargo.toml new file mode 100644 index 0000000000..3ed912ac43 --- /dev/null +++ b/examples/pane_grid/Cargo.toml @@ -0,0 +1,9 @@ +[package] +name = "pane_grid" +version = "0.1.0" +authors = ["Héctor Ramón Jiménez "] +edition = "2018" +publish = false + +[dependencies] +iced = { path = "../.." } diff --git a/examples/pane_grid/README.md b/examples/pane_grid/README.md new file mode 100644 index 0000000000..3653fc5b71 --- /dev/null +++ b/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. + +
+ + + +
+ +You can run it with `cargo run`: +``` +cargo run --package pane_grid +``` + +[`main`]: src/main.rs diff --git a/examples/pane_grid/src/main.rs b/examples/pane_grid/src/main.rs new file mode 100644 index 0000000000..dafc396c97 --- /dev/null +++ b/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, + 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 { + 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 { + 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, + total_panes: usize, + ) -> Element { + 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 + } + } + } +} diff --git a/futures/src/subscription.rs b/futures/src/subscription.rs index b68444cd34..8eccb7be0d 100644 --- a/futures/src/subscription.rs +++ b/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(mut self, value: T) -> Subscription + 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> + }) + .collect(), + } + } + /// Transforms the [`Subscription`] output with the given function. /// /// [`Subscription`]: struct.Subscription.html @@ -187,3 +215,45 @@ where .boxed() } } + +struct With { + recipe: Box>, + value: B, +} + +impl With { + fn new(recipe: Box>, value: B) -> Self { + With { recipe, value } + } +} + +impl Recipe for With +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::().hash(state); + self.value.hash(state); + self.recipe.hash(state); + } + + fn stream( + self: Box, + 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() + } +} diff --git a/native/src/element.rs b/native/src/element.rs index 276f761460..4e7c7fc60e 100644 --- a/native/src/element.rs +++ b/native/src/element.rs @@ -243,7 +243,7 @@ where } /// Computes the _layout_ hash of the [`Element`]. - /// + /// /// [`Element`]: struct.Element.html pub fn hash_layout(&self, state: &mut Hasher) { self.widget.hash_layout(state); diff --git a/native/src/input/keyboard.rs b/native/src/input/keyboard.rs index 432e75ba68..928bf49279 100644 --- a/native/src/input/keyboard.rs +++ b/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}; diff --git a/native/src/input/keyboard/modifiers_state.rs b/native/src/input/keyboard/modifiers_state.rs deleted file mode 100644 index 4e3794b358..0000000000 --- a/native/src/input/keyboard/modifiers_state.rs +++ /dev/null @@ -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, -} diff --git a/native/src/lib.rs b/native/src/lib.rs index e4e7baee38..d17dd918a4 100644 --- a/native/src/lib.rs +++ b/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. //! diff --git a/native/src/mouse_cursor.rs b/native/src/mouse_cursor.rs index c7297e0e08..0dad3edc72 100644 --- a/native/src/mouse_cursor.rs +++ b/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 { diff --git a/native/src/widget.rs b/native/src/widget.rs index f9424b0251..88f819c99e 100644 --- a/native/src/widget.rs +++ b/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; diff --git a/native/src/widget/column.rs b/native/src/widget/column.rs index a7a6f242d5..b1adc6e39a 100644 --- a/native/src/widget/column.rs +++ b/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( &mut self, diff --git a/native/src/widget/pane_grid.rs b/native/src/widget/pane_grid.rs new file mode 100644 index 0000000000..a88f591acd --- /dev/null +++ b/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 Message>>, + on_resize: Option Message>>, + on_key_press: Option Option>>, +} + +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( + state: &'a mut State, + view: impl Fn( + Pane, + &'a mut T, + Option, + ) -> 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 + 'static, + ) -> Self { + self.on_key_press = Some(Box::new(f)); + self + } + + fn trigger_resize( + &mut self, + layout: Layout<'_>, + cursor_position: Point, + messages: &mut Vec, + ) { + 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 + 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, + 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::>().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( + &mut self, + defaults: &Self::Defaults, + content: &[(Pane, Element<'_, Message, Self>)], + dragging: Option, + resizing: Option, + layout: Layout<'_>, + cursor_position: Point, + ) -> Self::Output; +} + +impl<'a, Message, Renderer> From> + 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) + } +} diff --git a/native/src/widget/pane_grid/axis.rs b/native/src/widget/pane_grid/axis.rs new file mode 100644 index 0000000000..f0e3f362f8 --- /dev/null +++ b/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 + }, + ) + } + } + } +} diff --git a/native/src/widget/pane_grid/direction.rs b/native/src/widget/pane_grid/direction.rs new file mode 100644 index 0000000000..b31a87370b --- /dev/null +++ b/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, +} diff --git a/native/src/widget/pane_grid/node.rs b/native/src/widget/pane_grid/node.rs new file mode 100644 index 0000000000..4d5970b87a --- /dev/null +++ b/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, + b: Box, + }, + 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 { + 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 { + 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 { + 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 { + 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, + ) { + 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, ®ion_a, regions); + b.compute_regions(halved_spacing, ®ion_b, regions); + } + Node::Pane(pane) => { + let _ = regions.insert(*pane, *current); + } + } + } + + fn compute_splits( + &self, + halved_spacing: f32, + current: &Rectangle, + splits: &mut HashMap, + ) { + 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, ®ion_a, splits); + b.compute_splits(halved_spacing, ®ion_b, splits); + } + Node::Pane(_) => {} + } + } +} diff --git a/native/src/widget/pane_grid/pane.rs b/native/src/widget/pane_grid/pane.rs new file mode 100644 index 0000000000..f9866407e8 --- /dev/null +++ b/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); diff --git a/native/src/widget/pane_grid/split.rs b/native/src/widget/pane_grid/split.rs new file mode 100644 index 0000000000..d020c51087 --- /dev/null +++ b/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); diff --git a/native/src/widget/pane_grid/state.rs b/native/src/widget/pane_grid/state.rs new file mode 100644 index 0000000000..0a8b8419d8 --- /dev/null +++ b/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 { + pub(super) panes: HashMap, + 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 State { + /// 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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, + }, + Dragging { + pane: Pane, + }, + Resizing { + split: Split, + axis: Axis, + focus: Option, + }, +} + +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 { + match self.action { + Action::Idle { focus } => focus, + _ => None, + } + } + + pub fn picked_pane(&self) -> Option { + 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 { + self.layout.regions(spacing, size) + } + + pub fn splits( + &self, + spacing: f32, + size: Size, + ) -> HashMap { + 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); + } +} diff --git a/src/keyboard.rs b/src/keyboard.rs new file mode 100644 index 0000000000..181dd97486 --- /dev/null +++ b/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}; diff --git a/src/lib.rs b/src/lib.rs index d492db029f..aeec24c2c0 100644 --- a/src/lib.rs +++ b/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; diff --git a/src/widget.rs b/src/widget.rs index 7d3a1cefe6..91ea1ed427 100644 --- a/src/widget.rs +++ b/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. diff --git a/web/src/lib.rs b/web/src/lib.rs index 258ad9e7b4..1de00545d4 100644 --- a/web/src/lib.rs +++ b/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; diff --git a/wgpu/src/renderer/widget.rs b/wgpu/src/renderer/widget.rs index 84f908e7dc..37421fbef9 100644 --- a/wgpu/src/renderer/widget.rs +++ b/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; diff --git a/wgpu/src/renderer/widget/pane_grid.rs b/wgpu/src/renderer/widget/pane_grid.rs new file mode 100644 index 0000000000..2d201fec6b --- /dev/null +++ b/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( + &mut self, + defaults: &Self::Defaults, + content: &[(Pane, Element<'_, Message, Self>)], + dragging: Option, + resizing: Option, + 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 + }, + ) + } +} diff --git a/wgpu/src/renderer/widget/scrollable.rs b/wgpu/src/renderer/widget/scrollable.rs index bfee7411b0..732523e3f5 100644 --- a/wgpu/src/renderer/widget/scrollable.rs +++ b/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 { - let clip = Primitive::Clip { - bounds, - offset: Vector::new(0, offset), - content: Box::new(content), - }; - ( if let Some(scrollbar) = scrollbar { + let clip = Primitive::Clip { + bounds, + offset: Vector::new(0, offset), + content: Box::new(content), + }; + 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 diff --git a/wgpu/src/widget.rs b/wgpu/src/widget.rs index 73cce7e269..b39f2d9184 100644 --- a/wgpu/src/widget.rs +++ b/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; diff --git a/wgpu/src/widget/canvas/layer/cache.rs b/wgpu/src/widget/canvas/layer/cache.rs index 6b69f01ec6..f700245912 100644 --- a/wgpu/src/widget/canvas/layer/cache.rs +++ b/wgpu/src/widget/canvas/layer/cache.rs @@ -19,7 +19,6 @@ pub struct Cache { state: RefCell, } -#[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(), + } + } +} diff --git a/wgpu/src/widget/pane_grid.rs b/wgpu/src/widget/pane_grid.rs new file mode 100644 index 0000000000..7bc2f7c52a --- /dev/null +++ b/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>; diff --git a/winit/src/conversion.rs b/winit/src/conversion.rs index b6a0b64b4d..74852876da 100644 --- a/winit/src/conversion.rs +++ b/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, } }