diff options
Diffstat (limited to 'examples')
31 files changed, 825 insertions, 342 deletions
diff --git a/examples/custom_quad/src/main.rs b/examples/custom_quad/src/main.rs index 13b08250..cc9ad528 100644 --- a/examples/custom_quad/src/main.rs +++ b/examples/custom_quad/src/main.rs @@ -26,12 +26,11 @@ mod quad { where Renderer: renderer::Renderer, { - fn width(&self) -> Length { - Length::Shrink - } - - fn height(&self) -> Length { - Length::Shrink + fn size(&self) -> Size<Length> { + Size { + width: Length::Shrink, + height: Length::Shrink, + } } fn layout( diff --git a/examples/custom_widget/src/main.rs b/examples/custom_widget/src/main.rs index 32a14cbe..7ffb4cd0 100644 --- a/examples/custom_widget/src/main.rs +++ b/examples/custom_widget/src/main.rs @@ -33,12 +33,11 @@ mod circle { where Renderer: renderer::Renderer, { - fn width(&self) -> Length { - Length::Shrink - } - - fn height(&self) -> Length { - Length::Shrink + fn size(&self) -> Size<Length> { + Size { + width: Length::Shrink, + height: Length::Shrink, + } } fn layout( diff --git a/examples/download_progress/src/main.rs b/examples/download_progress/src/main.rs index a2fcb275..675e9e26 100644 --- a/examples/download_progress/src/main.rs +++ b/examples/download_progress/src/main.rs @@ -73,16 +73,15 @@ impl Application for Example { } fn view(&self) -> Element<Message> { - let downloads = Column::with_children( - self.downloads.iter().map(Download::view).collect(), - ) - .push( - button("Add another download") - .on_press(Message::Add) - .padding(10), - ) - .spacing(20) - .align_items(Alignment::End); + let downloads = + Column::with_children(self.downloads.iter().map(Download::view)) + .push( + button("Add another download") + .on_press(Message::Add) + .padding(10), + ) + .spacing(20) + .align_items(Alignment::End); container(downloads) .width(Length::Fill) diff --git a/examples/editor/Cargo.toml b/examples/editor/Cargo.toml index a3f6ea3b..dc885728 100644 --- a/examples/editor/Cargo.toml +++ b/examples/editor/Cargo.toml @@ -12,4 +12,4 @@ iced.features = ["highlighter", "tokio", "debug"] tokio.workspace = true tokio.features = ["fs"] -rfd = "0.12" +rfd = "0.13" diff --git a/examples/editor/src/main.rs b/examples/editor/src/main.rs index 03d1e283..bf2aaaa3 100644 --- a/examples/editor/src/main.rs +++ b/examples/editor/src/main.rs @@ -134,8 +134,8 @@ impl Application for Editor { } fn subscription(&self) -> Subscription<Message> { - keyboard::on_key_press(|key_code, modifiers| match key_code { - keyboard::KeyCode::S if modifiers.command() => { + keyboard::on_key_press(|key, modifiers| match key.as_ref() { + keyboard::Key::Character("s") if modifiers.command() => { Some(Message::SaveFile) } _ => None, diff --git a/examples/events/src/main.rs b/examples/events/src/main.rs index 334b012d..fc51ac4a 100644 --- a/examples/events/src/main.rs +++ b/examples/events/src/main.rs @@ -82,8 +82,7 @@ impl Application for Events { self.last .iter() .map(|event| text(format!("{event:?}")).size(40)) - .map(Element::from) - .collect(), + .map(Element::from), ); let toggle = checkbox( diff --git a/examples/game_of_life/src/main.rs b/examples/game_of_life/src/main.rs index 96840143..56f7afd5 100644 --- a/examples/game_of_life/src/main.rs +++ b/examples/game_of_life/src/main.rs @@ -146,7 +146,8 @@ impl Application for GameOfLife { .view() .map(move |message| Message::Grid(message, version)), controls, - ]; + ] + .height(Length::Fill); container(content) .width(Length::Fill) @@ -178,7 +179,6 @@ fn view_controls<'a>( slider(1.0..=1000.0, speed as f32, Message::SpeedChanged), text(format!("x{speed}")).size(16), ] - .width(Length::Fill) .align_items(Alignment::Center) .spacing(10); diff --git a/examples/geometry/src/main.rs b/examples/geometry/src/main.rs index 8ab3b493..5cf9963d 100644 --- a/examples/geometry/src/main.rs +++ b/examples/geometry/src/main.rs @@ -16,12 +16,11 @@ mod rainbow { } impl<Message> Widget<Message, Renderer> for Rainbow { - fn width(&self) -> Length { - Length::Fill - } - - fn height(&self) -> Length { - Length::Shrink + fn size(&self) -> Size<Length> { + Size { + width: Length::Fill, + height: Length::Shrink, + } } fn layout( @@ -30,9 +29,9 @@ mod rainbow { _renderer: &Renderer, limits: &layout::Limits, ) -> layout::Node { - let size = limits.width(Length::Fill).resolve(Size::ZERO); + let width = limits.max().width; - layout::Node::new(Size::new(size.width, size.width)) + layout::Node::new(Size::new(width, width)) } fn draw( diff --git a/examples/integration/src/controls.rs b/examples/integration/src/controls.rs index 4714c397..89a595c1 100644 --- a/examples/integration/src/controls.rs +++ b/examples/integration/src/controls.rs @@ -81,32 +81,25 @@ impl Program for Controls { ); Row::new() - .width(Length::Fill) .height(Length::Fill) .align_items(Alignment::End) .push( - Column::new() - .width(Length::Fill) - .align_items(Alignment::End) - .push( - Column::new() - .padding(10) - .spacing(10) - .push( - Text::new("Background color") - .style(Color::WHITE), - ) - .push(sliders) - .push( - Text::new(format!("{background_color:?}")) - .size(14) - .style(Color::WHITE), - ) - .push( - text_input("Placeholder", text) - .on_input(Message::TextChanged), - ), - ), + Column::new().align_items(Alignment::End).push( + Column::new() + .padding(10) + .spacing(10) + .push(Text::new("Background color").style(Color::WHITE)) + .push(sliders) + .push( + Text::new(format!("{background_color:?}")) + .size(14) + .style(Color::WHITE), + ) + .push( + text_input("Placeholder", text) + .on_input(Message::TextChanged), + ), + ), ) .into() } diff --git a/examples/integration/src/main.rs b/examples/integration/src/main.rs index 276794c8..b0939d68 100644 --- a/examples/integration/src/main.rs +++ b/examples/integration/src/main.rs @@ -19,8 +19,9 @@ use iced_winit::winit; use iced_winit::Clipboard; use winit::{ - event::{Event, ModifiersState, WindowEvent}, + event::{Event, WindowEvent}, event_loop::{ControlFlow, EventLoop}, + keyboard::ModifiersState, }; #[cfg(target_arch = "wasm32")] @@ -48,7 +49,7 @@ pub fn main() -> Result<(), Box<dyn std::error::Error>> { tracing_subscriber::fmt::init(); // Initialize winit - let event_loop = EventLoop::new(); + let event_loop = EventLoop::new()?; #[cfg(target_arch = "wasm32")] let window = winit::window::WindowBuilder::new() @@ -160,67 +161,15 @@ pub fn main() -> Result<(), Box<dyn std::error::Error>> { ); // Run event loop - event_loop.run(move |event, _, control_flow| { + event_loop.run(move |event, window_target| { // You should change this if you want to render continuosly - *control_flow = ControlFlow::Wait; + window_target.set_control_flow(ControlFlow::Wait); match event { - Event::WindowEvent { event, .. } => { - match event { - WindowEvent::CursorMoved { position, .. } => { - cursor_position = Some(position); - } - WindowEvent::ModifiersChanged(new_modifiers) => { - modifiers = new_modifiers; - } - WindowEvent::Resized(_) => { - resized = true; - } - WindowEvent::CloseRequested => { - *control_flow = ControlFlow::Exit; - } - _ => {} - } - - // Map window event to iced event - if let Some(event) = iced_winit::conversion::window_event( - window::Id::MAIN, - &event, - window.scale_factor(), - modifiers, - ) { - state.queue_event(event); - } - } - Event::MainEventsCleared => { - // If there are events pending - if !state.is_queue_empty() { - // We update iced - let _ = state.update( - viewport.logical_size(), - cursor_position - .map(|p| { - conversion::cursor_position( - p, - viewport.scale_factor(), - ) - }) - .map(mouse::Cursor::Available) - .unwrap_or(mouse::Cursor::Unavailable), - &mut renderer, - &Theme::Dark, - &renderer::Style { - text_color: Color::WHITE, - }, - &mut clipboard, - &mut debug, - ); - - // and request a redraw - window.request_redraw(); - } - } - Event::RedrawRequested(_) => { + Event::WindowEvent { + event: WindowEvent::RedrawRequested, + .. + } => { if resized { let size = window.inner_size(); @@ -309,7 +258,60 @@ pub fn main() -> Result<(), Box<dyn std::error::Error>> { }, } } + Event::WindowEvent { event, .. } => { + match event { + WindowEvent::CursorMoved { position, .. } => { + cursor_position = Some(position); + } + WindowEvent::ModifiersChanged(new_modifiers) => { + modifiers = new_modifiers.state(); + } + WindowEvent::Resized(_) => { + resized = true; + } + WindowEvent::CloseRequested => { + window_target.exit(); + } + _ => {} + } + + // Map window event to iced event + if let Some(event) = iced_winit::conversion::window_event( + window::Id::MAIN, + event, + window.scale_factor(), + modifiers, + ) { + state.queue_event(event); + } + } _ => {} } - }) + + // If there are events pending + if !state.is_queue_empty() { + // We update iced + let _ = state.update( + viewport.logical_size(), + cursor_position + .map(|p| { + conversion::cursor_position(p, viewport.scale_factor()) + }) + .map(mouse::Cursor::Available) + .unwrap_or(mouse::Cursor::Unavailable), + &mut renderer, + &Theme::Dark, + &renderer::Style { + text_color: Color::WHITE, + }, + &mut clipboard, + &mut debug, + ); + + // and request a redraw + window.request_redraw(); + } + })?; + + Ok(()) } diff --git a/examples/layout/Cargo.toml b/examples/layout/Cargo.toml new file mode 100644 index 00000000..855f98d0 --- /dev/null +++ b/examples/layout/Cargo.toml @@ -0,0 +1,9 @@ +[package] +name = "layout" +version = "0.1.0" +authors = ["Héctor Ramón Jiménez <hector0193@gmail.com>"] +edition = "2021" +publish = false + +[dependencies] +iced = { path = "../..", features = ["canvas"] } diff --git a/examples/layout/src/main.rs b/examples/layout/src/main.rs new file mode 100644 index 00000000..6cf0e570 --- /dev/null +++ b/examples/layout/src/main.rs @@ -0,0 +1,371 @@ +use iced::executor; +use iced::keyboard; +use iced::mouse; +use iced::theme; +use iced::widget::{ + button, canvas, checkbox, column, container, horizontal_space, pick_list, + row, scrollable, text, vertical_rule, +}; +use iced::{ + color, Alignment, Application, Color, Command, Element, Font, Length, + Point, Rectangle, Renderer, Settings, Subscription, Theme, +}; + +pub fn main() -> iced::Result { + Layout::run(Settings::default()) +} + +#[derive(Debug)] +struct Layout { + example: Example, + explain: bool, + theme: Theme, +} + +#[derive(Debug, Clone)] +enum Message { + Next, + Previous, + ExplainToggled(bool), + ThemeSelected(Theme), +} + +impl Application for Layout { + type Message = Message; + type Theme = Theme; + type Executor = executor::Default; + type Flags = (); + + fn new(_flags: Self::Flags) -> (Self, Command<Message>) { + ( + Self { + example: Example::default(), + explain: false, + theme: Theme::Light, + }, + Command::none(), + ) + } + + fn title(&self) -> String { + format!("{} - Layout - Iced", self.example.title) + } + + fn update(&mut self, message: Self::Message) -> Command<Message> { + match message { + Message::Next => { + self.example = self.example.next(); + } + Message::Previous => { + self.example = self.example.previous(); + } + Message::ExplainToggled(explain) => { + self.explain = explain; + } + Message::ThemeSelected(theme) => { + self.theme = theme; + } + } + + Command::none() + } + + fn subscription(&self) -> Subscription<Message> { + use keyboard::key; + + keyboard::on_key_release(|key, _modifiers| match key { + keyboard::Key::Named(key::Named::ArrowLeft) => { + Some(Message::Previous) + } + keyboard::Key::Named(key::Named::ArrowRight) => Some(Message::Next), + _ => None, + }) + } + + fn view(&self) -> Element<Message> { + let header = row![ + text(self.example.title).size(20).font(Font::MONOSPACE), + horizontal_space(Length::Fill), + checkbox("Explain", self.explain, Message::ExplainToggled), + pick_list( + Theme::ALL, + Some(self.theme.clone()), + Message::ThemeSelected + ), + ] + .spacing(20) + .align_items(Alignment::Center); + + let example = container(if self.explain { + self.example.view().explain(color!(0x0000ff)) + } else { + self.example.view() + }) + .style(|theme: &Theme| { + let palette = theme.extended_palette(); + + container::Appearance::default() + .with_border(palette.background.strong.color, 4.0) + }) + .padding(4) + .width(Length::Fill) + .height(Length::Fill) + .center_x() + .center_y(); + + let controls = row([ + (!self.example.is_first()).then_some( + button("← Previous") + .padding([5, 10]) + .on_press(Message::Previous) + .into(), + ), + Some(horizontal_space(Length::Fill).into()), + (!self.example.is_last()).then_some( + button("Next →") + .padding([5, 10]) + .on_press(Message::Next) + .into(), + ), + ] + .into_iter() + .flatten()); + + column![header, example, controls] + .spacing(10) + .padding(20) + .into() + } + + fn theme(&self) -> Theme { + self.theme.clone() + } +} + +#[derive(Debug, Clone, Copy, PartialEq, Eq)] +struct Example { + title: &'static str, + view: fn() -> Element<'static, Message>, +} + +impl Example { + const LIST: &'static [Self] = &[ + Self { + title: "Centered", + view: centered, + }, + Self { + title: "Column", + view: column_, + }, + Self { + title: "Row", + view: row_, + }, + Self { + title: "Space", + view: space, + }, + Self { + title: "Application", + view: application, + }, + Self { + title: "Nested Quotes", + view: nested_quotes, + }, + ]; + + fn is_first(self) -> bool { + Self::LIST.first() == Some(&self) + } + + fn is_last(self) -> bool { + Self::LIST.last() == Some(&self) + } + + fn previous(self) -> Self { + let Some(index) = + Self::LIST.iter().position(|&example| example == self) + else { + return self; + }; + + Self::LIST + .get(index.saturating_sub(1)) + .copied() + .unwrap_or(self) + } + + fn next(self) -> Self { + let Some(index) = + Self::LIST.iter().position(|&example| example == self) + else { + return self; + }; + + Self::LIST.get(index + 1).copied().unwrap_or(self) + } + + fn view(&self) -> Element<Message> { + (self.view)() + } +} + +impl Default for Example { + fn default() -> Self { + Self::LIST[0] + } +} + +fn centered<'a>() -> Element<'a, Message> { + container(text("I am centered!").size(50)) + .width(Length::Fill) + .height(Length::Fill) + .center_x() + .center_y() + .into() +} + +fn column_<'a>() -> Element<'a, Message> { + column![ + "A column can be used to", + "lay out widgets vertically.", + square(50), + square(50), + square(50), + "The amount of space between", + "elements can be configured!", + ] + .spacing(40) + .into() +} + +fn row_<'a>() -> Element<'a, Message> { + row![ + "A row works like a column...", + square(50), + square(50), + square(50), + "but lays out widgets horizontally!", + ] + .spacing(40) + .into() +} + +fn space<'a>() -> Element<'a, Message> { + row!["Left!", horizontal_space(Length::Fill), "Right!"].into() +} + +fn application<'a>() -> Element<'a, Message> { + let header = container( + row![ + square(40), + horizontal_space(Length::Fill), + "Header!", + horizontal_space(Length::Fill), + square(40), + ] + .padding(10) + .align_items(Alignment::Center), + ) + .style(|theme: &Theme| { + let palette = theme.extended_palette(); + + container::Appearance::default() + .with_border(palette.background.strong.color, 1) + }); + + let sidebar = container( + column!["Sidebar!", square(50), square(50)] + .spacing(40) + .padding(10) + .width(200) + .align_items(Alignment::Center), + ) + .style(theme::Container::Box) + .height(Length::Fill) + .center_y(); + + let content = container( + scrollable( + column![ + "Content!", + square(400), + square(200), + square(400), + "The end" + ] + .spacing(40) + .align_items(Alignment::Center) + .width(Length::Fill), + ) + .height(Length::Fill), + ) + .padding(10); + + column![header, row![sidebar, content]].into() +} + +fn nested_quotes<'a>() -> Element<'a, Message> { + (1..5) + .fold(column![text("Original text")].padding(10), |quotes, i| { + column![ + container( + row![vertical_rule(2), quotes].height(Length::Shrink) + ) + .style(|theme: &Theme| { + let palette = theme.extended_palette(); + + container::Appearance::default().with_background( + if palette.is_dark { + Color { + a: 0.01, + ..Color::WHITE + } + } else { + Color { + a: 0.08, + ..Color::BLACK + } + }, + ) + }), + text(format!("Reply {i}")) + ] + .spacing(10) + .padding(10) + }) + .into() +} + +fn square<'a>(size: impl Into<Length> + Copy) -> Element<'a, Message> { + struct Square; + + impl canvas::Program<Message> for Square { + type State = (); + + fn draw( + &self, + _state: &Self::State, + renderer: &Renderer, + theme: &Theme, + bounds: Rectangle, + _cursor: mouse::Cursor, + ) -> Vec<canvas::Geometry> { + let mut frame = canvas::Frame::new(renderer, bounds.size()); + + let palette = theme.extended_palette(); + + frame.fill_rectangle( + Point::ORIGIN, + bounds.size(), + palette.background.strong.color, + ); + + vec![frame.into_geometry()] + } + } + + canvas(Square).width(size).height(size).into() +} diff --git a/examples/lazy/src/main.rs b/examples/lazy/src/main.rs index 01560598..04df0744 100644 --- a/examples/lazy/src/main.rs +++ b/examples/lazy/src/main.rs @@ -178,35 +178,23 @@ impl Sandbox for App { } }); - column( - items - .into_iter() - .map(|item| { - let button = button("Delete") - .on_press(Message::DeleteItem(item.clone())) - .style(theme::Button::Destructive); - - row![ - text(&item.name) - .style(theme::Text::Color(item.color.into())), - horizontal_space(Length::Fill), - pick_list( - Color::ALL, - Some(item.color), - move |color| { - Message::ItemColorChanged( - item.clone(), - color, - ) - } - ), - button - ] - .spacing(20) - .into() - }) - .collect(), - ) + column(items.into_iter().map(|item| { + let button = button("Delete") + .on_press(Message::DeleteItem(item.clone())) + .style(theme::Button::Destructive); + + row![ + text(&item.name) + .style(theme::Text::Color(item.color.into())), + horizontal_space(Length::Fill), + pick_list(Color::ALL, Some(item.color), move |color| { + Message::ItemColorChanged(item.clone(), color) + }), + button + ] + .spacing(20) + .into() + })) .spacing(10) }); diff --git a/examples/loading_spinners/src/circular.rs b/examples/loading_spinners/src/circular.rs index dca8046a..2e119979 100644 --- a/examples/loading_spinners/src/circular.rs +++ b/examples/loading_spinners/src/circular.rs @@ -244,12 +244,11 @@ where tree::State::new(State::default()) } - fn width(&self) -> Length { - Length::Fixed(self.size) - } - - fn height(&self) -> Length { - Length::Fixed(self.size) + fn size(&self) -> Size<Length> { + Size { + width: Length::Fixed(self.size), + height: Length::Fixed(self.size), + } } fn layout( @@ -258,10 +257,7 @@ where _renderer: &iced::Renderer<Theme>, limits: &layout::Limits, ) -> layout::Node { - let limits = limits.width(self.size).height(self.size); - let size = limits.resolve(Size::ZERO); - - layout::Node::new(size) + layout::atomic(limits, self.size, self.size) } fn on_event( @@ -275,8 +271,6 @@ where shell: &mut Shell<'_, Message>, _viewport: &Rectangle, ) -> event::Status { - const FRAME_RATE: u64 = 60; - let state = tree.state.downcast_mut::<State>(); if let Event::Window(_, window::Event::RedrawRequested(now)) = event { @@ -287,9 +281,7 @@ where ); state.cache.clear(); - shell.request_redraw(RedrawRequest::At( - now + Duration::from_millis(1000 / FRAME_RATE), - )); + shell.request_redraw(RedrawRequest::NextFrame); } event::Status::Ignored diff --git a/examples/loading_spinners/src/linear.rs b/examples/loading_spinners/src/linear.rs index db10bfba..497e0834 100644 --- a/examples/loading_spinners/src/linear.rs +++ b/examples/loading_spinners/src/linear.rs @@ -165,12 +165,11 @@ where tree::State::new(State::default()) } - fn width(&self) -> Length { - self.width - } - - fn height(&self) -> Length { - self.height + fn size(&self) -> Size<Length> { + Size { + width: self.width, + height: self.height, + } } fn layout( @@ -179,10 +178,7 @@ where _renderer: &Renderer, limits: &layout::Limits, ) -> layout::Node { - let limits = limits.width(self.width).height(self.height); - let size = limits.resolve(Size::ZERO); - - layout::Node::new(size) + layout::atomic(limits, self.width, self.height) } fn on_event( @@ -196,16 +192,12 @@ where shell: &mut Shell<'_, Message>, _viewport: &Rectangle, ) -> event::Status { - const FRAME_RATE: u64 = 60; - let state = tree.state.downcast_mut::<State>(); if let Event::Window(_, window::Event::RedrawRequested(now)) = event { *state = state.timed_transition(self.cycle_duration, now); - shell.request_redraw(RedrawRequest::At( - now + Duration::from_millis(1000 / FRAME_RATE), - )); + shell.request_redraw(RedrawRequest::NextFrame); } event::Status::Ignored diff --git a/examples/loading_spinners/src/main.rs b/examples/loading_spinners/src/main.rs index a78e9590..93a4605e 100644 --- a/examples/loading_spinners/src/main.rs +++ b/examples/loading_spinners/src/main.rs @@ -96,15 +96,14 @@ impl Application for LoadingSpinners { container( column.push( - row(vec![ - text("Cycle duration:").into(), + row![ + text("Cycle duration:"), slider(1.0..=1000.0, self.cycle_duration * 100.0, |x| { Message::CycleDurationChanged(x / 100.0) }) - .width(200.0) - .into(), - text(format!("{:.2}s", self.cycle_duration)).into(), - ]) + .width(200.0), + text(format!("{:.2}s", self.cycle_duration)), + ] .align_items(iced::Alignment::Center) .spacing(20.0), ), diff --git a/examples/modal/src/main.rs b/examples/modal/src/main.rs index acb14372..963c839e 100644 --- a/examples/modal/src/main.rs +++ b/examples/modal/src/main.rs @@ -1,6 +1,7 @@ use iced::event::{self, Event}; use iced::executor; use iced::keyboard; +use iced::keyboard::key; use iced::theme; use iced::widget::{ self, button, column, container, horizontal_space, pick_list, row, text, @@ -85,8 +86,9 @@ impl Application for App { } Message::Event(event) => match event { Event::Keyboard(keyboard::Event::KeyPressed { - key_code: keyboard::KeyCode::Tab, + key: keyboard::Key::Named(key::Named::Tab), modifiers, + .. }) => { if modifiers.shift() { widget::focus_previous() @@ -95,7 +97,7 @@ impl Application for App { } } Event::Keyboard(keyboard::Event::KeyPressed { - key_code: keyboard::KeyCode::Escape, + key: keyboard::Key::Named(key::Named::Escape), .. }) => { self.hide_modal(); @@ -281,12 +283,8 @@ mod modal { tree.diff_children(&[&self.base, &self.modal]); } - fn width(&self) -> Length { - self.base.as_widget().width() - } - - fn height(&self) -> Length { - self.base.as_widget().height() + fn size(&self) -> Size<Length> { + self.base.as_widget().size() } fn layout( @@ -420,17 +418,14 @@ mod modal { .width(Length::Fill) .height(Length::Fill); - let mut child = self + let child = self .content .as_widget() - .layout(self.tree, renderer, &limits); - - child.align(Alignment::Center, Alignment::Center, limits.max()); - - let mut node = layout::Node::with_children(self.size, vec![child]); - node.move_to(position); + .layout(self.tree, renderer, &limits) + .align(Alignment::Center, Alignment::Center, limits.max()); - node + layout::Node::with_children(self.size, vec![child]) + .move_to(position) } fn on_event( diff --git a/examples/pane_grid/src/main.rs b/examples/pane_grid/src/main.rs index aa3149bb..d5e5bcbe 100644 --- a/examples/pane_grid/src/main.rs +++ b/examples/pane_grid/src/main.rs @@ -220,23 +220,26 @@ const PANE_ID_COLOR_FOCUSED: Color = Color::from_rgb( 0x47 as f32 / 255.0, ); -fn handle_hotkey(key_code: keyboard::KeyCode) -> Option<Message> { - use keyboard::KeyCode; +fn handle_hotkey(key: keyboard::Key) -> Option<Message> { + use keyboard::key::{self, Key}; use pane_grid::{Axis, Direction}; - let direction = match key_code { - KeyCode::Up => Some(Direction::Up), - KeyCode::Down => Some(Direction::Down), - KeyCode::Left => Some(Direction::Left), - KeyCode::Right => Some(Direction::Right), - _ => None, - }; + match key.as_ref() { + Key::Character("v") => Some(Message::SplitFocused(Axis::Vertical)), + Key::Character("h") => Some(Message::SplitFocused(Axis::Horizontal)), + Key::Character("w") => Some(Message::CloseFocused), + Key::Named(key) => { + let direction = match key { + key::Named::ArrowUp => Some(Direction::Up), + key::Named::ArrowDown => Some(Direction::Down), + key::Named::ArrowLeft => Some(Direction::Left), + key::Named::ArrowRight => Some(Direction::Right), + _ => None, + }; - match 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), + direction.map(Message::FocusAdjacent) + } + _ => None, } } @@ -297,7 +300,6 @@ fn view_content<'a>( text(format!("{}x{}", size.width, size.height)).size(24), controls, ] - .width(Length::Fill) .spacing(10) .align_items(Alignment::Center); diff --git a/examples/pick_list/src/main.rs b/examples/pick_list/src/main.rs index 21200621..e4d96dc8 100644 --- a/examples/pick_list/src/main.rs +++ b/examples/pick_list/src/main.rs @@ -1,4 +1,4 @@ -use iced::widget::{column, container, pick_list, scrollable, vertical_space}; +use iced::widget::{column, pick_list, scrollable, vertical_space}; use iced::{Alignment, Element, Length, Sandbox, Settings}; pub fn main() -> iced::Result { @@ -52,12 +52,7 @@ impl Sandbox for Example { .align_items(Alignment::Center) .spacing(10); - container(scrollable(content)) - .width(Length::Fill) - .height(Length::Fill) - .center_x() - .center_y() - .into() + scrollable(content).into() } } diff --git a/examples/screenshot/src/main.rs b/examples/screenshot/src/main.rs index 20d34be6..6955551e 100644 --- a/examples/screenshot/src/main.rs +++ b/examples/screenshot/src/main.rs @@ -1,11 +1,13 @@ -use iced::keyboard::KeyCode; -use iced::theme::{Button, Container}; +use iced::alignment; +use iced::executor; +use iced::keyboard; +use iced::theme; use iced::widget::{button, column, container, image, row, text, text_input}; +use iced::window; use iced::window::screenshot::{self, Screenshot}; -use iced::{alignment, window}; use iced::{ - event, executor, keyboard, Alignment, Application, Command, ContentFit, - Element, Event, Length, Rectangle, Renderer, Subscription, Theme, + Alignment, Application, Command, ContentFit, Element, Length, Rectangle, + Renderer, Subscription, Theme, }; use ::image as img; @@ -147,7 +149,7 @@ impl Application for Example { let image = container(image) .padding(10) - .style(Container::Box) + .style(theme::Container::Box) .width(Length::FillPortion(2)) .height(Length::Fill) .center_x() @@ -202,9 +204,10 @@ impl Application for Example { self.screenshot.is_some().then(|| Message::Png), ) } else { - button(centered_text("Saving...")).style(Button::Secondary) + button(centered_text("Saving...")) + .style(theme::Button::Secondary) } - .style(Button::Secondary) + .style(theme::Button::Secondary) .padding([10, 20, 10, 20]) .width(Length::Fill) ] @@ -213,7 +216,7 @@ impl Application for Example { crop_controls, button(centered_text("Crop")) .on_press(Message::Crop) - .style(Button::Destructive) + .style(theme::Button::Destructive) .padding([10, 20, 10, 20]) .width(Length::Fill), ] @@ -256,16 +259,10 @@ impl Application for Example { } fn subscription(&self) -> Subscription<Self::Message> { - event::listen_with(|event, status| { - if let event::Status::Captured = status { - return None; - } + use keyboard::key; - if let Event::Keyboard(keyboard::Event::KeyPressed { - key_code: KeyCode::F5, - .. - }) = event - { + keyboard::on_key_press(|key, _modifiers| { + if let keyboard::Key::Named(key::Named::F5) = key { Some(Message::Screenshot) } else { None diff --git a/examples/scrollable/src/main.rs b/examples/scrollable/src/main.rs index d82ea841..4b57a5a4 100644 --- a/examples/scrollable/src/main.rs +++ b/examples/scrollable/src/main.rs @@ -147,63 +147,54 @@ impl Application for ScrollableDemo { text("Scroller width:"), scroller_width_slider, ] - .spacing(10) - .width(Length::Fill); + .spacing(10); - let scroll_orientation_controls = column(vec![ - text("Scrollbar direction:").into(), + let scroll_orientation_controls = column![ + text("Scrollbar direction:"), radio( "Vertical", Direction::Vertical, Some(self.scrollable_direction), Message::SwitchDirection, - ) - .into(), + ), radio( "Horizontal", Direction::Horizontal, Some(self.scrollable_direction), Message::SwitchDirection, - ) - .into(), + ), radio( "Both!", Direction::Multi, Some(self.scrollable_direction), Message::SwitchDirection, - ) - .into(), - ]) - .spacing(10) - .width(Length::Fill); + ), + ] + .spacing(10); - let scroll_alignment_controls = column(vec![ - text("Scrollable alignment:").into(), + let scroll_alignment_controls = column![ + text("Scrollable alignment:"), radio( "Start", scrollable::Alignment::Start, Some(self.alignment), Message::AlignmentChanged, - ) - .into(), + ), radio( "End", scrollable::Alignment::End, Some(self.alignment), Message::AlignmentChanged, ) - .into(), - ]) - .spacing(10) - .width(Length::Fill); + ] + .spacing(10); let scroll_controls = row![ scroll_slider_controls, scroll_orientation_controls, scroll_alignment_controls ] - .spacing(20) - .width(Length::Fill); + .spacing(20); let scroll_to_end_button = || { button("Scroll to end") @@ -229,11 +220,11 @@ impl Application for ScrollableDemo { text("End!"), scroll_to_beginning_button(), ] - .width(Length::Fill) .align_items(Alignment::Center) .padding([40, 0, 40, 0]) .spacing(40), ) + .width(Length::Fill) .height(Length::Fill) .direction(scrollable::Direction::Vertical( Properties::new() @@ -259,6 +250,7 @@ impl Application for ScrollableDemo { .padding([0, 40, 0, 40]) .spacing(40), ) + .width(Length::Fill) .height(Length::Fill) .direction(scrollable::Direction::Horizontal( Properties::new() @@ -301,6 +293,7 @@ impl Application for ScrollableDemo { .padding([0, 40, 0, 40]) .spacing(40), ) + .width(Length::Fill) .height(Length::Fill) .direction({ let properties = Properties::new() @@ -341,20 +334,11 @@ impl Application for ScrollableDemo { let content: Element<Message> = column![scroll_controls, scrollable_content, progress_bars] - .width(Length::Fill) - .height(Length::Fill) .align_items(Alignment::Center) .spacing(10) .into(); - Element::from( - container(content) - .width(Length::Fill) - .height(Length::Fill) - .padding(40) - .center_x() - .center_y(), - ) + container(content).padding(20).center_x().center_y().into() } fn theme(&self) -> Self::Theme { diff --git a/examples/sierpinski_triangle/src/main.rs b/examples/sierpinski_triangle/src/main.rs index ef935c33..01a114bb 100644 --- a/examples/sierpinski_triangle/src/main.rs +++ b/examples/sierpinski_triangle/src/main.rs @@ -79,12 +79,10 @@ impl Application for SierpinskiEmulator { row![ text(format!("Iteration: {:?}", self.graph.iteration)), slider(0..=10000, self.graph.iteration, Message::IterationSet) - .width(Length::Fill) ] .padding(10) .spacing(20), ] - .width(Length::Fill) .align_items(iced::Alignment::Center) .into() } diff --git a/examples/stopwatch/src/main.rs b/examples/stopwatch/src/main.rs index 0b0f0607..8a0674c1 100644 --- a/examples/stopwatch/src/main.rs +++ b/examples/stopwatch/src/main.rs @@ -86,12 +86,16 @@ impl Application for Stopwatch { }; fn handle_hotkey( - key_code: keyboard::KeyCode, + key: keyboard::Key, _modifiers: keyboard::Modifiers, ) -> Option<Message> { - match key_code { - keyboard::KeyCode::Space => Some(Message::Toggle), - keyboard::KeyCode::R => Some(Message::Reset), + use keyboard::key; + + match key.as_ref() { + keyboard::Key::Named(key::Named::Space) => { + Some(Message::Toggle) + } + keyboard::Key::Character("r") => Some(Message::Reset), _ => None, } } diff --git a/examples/styling/src/main.rs b/examples/styling/src/main.rs index 51538ec2..10f3c79d 100644 --- a/examples/styling/src/main.rs +++ b/examples/styling/src/main.rs @@ -53,13 +53,16 @@ impl Sandbox for Styling { self.theme = match theme { ThemeType::Light => Theme::Light, ThemeType::Dark => Theme::Dark, - ThemeType::Custom => Theme::custom(theme::Palette { - background: Color::from_rgb(1.0, 0.9, 1.0), - text: Color::BLACK, - primary: Color::from_rgb(0.5, 0.5, 0.0), - success: Color::from_rgb(0.0, 1.0, 0.0), - danger: Color::from_rgb(1.0, 0.0, 0.0), - }), + ThemeType::Custom => Theme::custom( + String::from("Custom"), + theme::Palette { + background: Color::from_rgb(1.0, 0.9, 1.0), + text: Color::BLACK, + primary: Color::from_rgb(0.5, 0.5, 0.0), + success: Color::from_rgb(0.0, 1.0, 0.0), + danger: Color::from_rgb(1.0, 0.0, 0.0), + }, + ), } } Message::InputChanged(value) => self.input_value = value, @@ -104,10 +107,11 @@ impl Sandbox for Styling { let progress_bar = progress_bar(0.0..=100.0, self.slider_value); - let scrollable = scrollable( - column!["Scroll me!", vertical_space(800), "You did it!"] - .width(Length::Fill), - ) + let scrollable = scrollable(column![ + "Scroll me!", + vertical_space(800), + "You did it!" + ]) .width(Length::Fill) .height(100); diff --git a/examples/svg/src/main.rs b/examples/svg/src/main.rs index 4dc92416..3bf4960f 100644 --- a/examples/svg/src/main.rs +++ b/examples/svg/src/main.rs @@ -63,7 +63,6 @@ impl Sandbox for Tiger { container(apply_color_filter).width(Length::Fill).center_x() ] .spacing(20) - .width(Length::Fill) .height(Length::Fill), ) .width(Length::Fill) diff --git a/examples/toast/src/main.rs b/examples/toast/src/main.rs index 31b6f191..2e837fa3 100644 --- a/examples/toast/src/main.rs +++ b/examples/toast/src/main.rs @@ -1,6 +1,7 @@ use iced::event::{self, Event}; use iced::executor; use iced::keyboard; +use iced::keyboard::key; use iced::widget::{ self, button, column, container, pick_list, row, slider, text, text_input, }; @@ -93,11 +94,12 @@ impl Application for App { Command::none() } Message::Event(Event::Keyboard(keyboard::Event::KeyPressed { - key_code: keyboard::KeyCode::Tab, + key: keyboard::Key::Named(key::Named::Tab), modifiers, + .. })) if modifiers.shift() => widget::focus_previous(), Message::Event(Event::Keyboard(keyboard::Event::KeyPressed { - key_code: keyboard::KeyCode::Tab, + key: keyboard::Key::Named(key::Named::Tab), .. })) => widget::focus_next(), Message::Event(_) => Command::none(), @@ -106,9 +108,7 @@ impl Application for App { fn view<'a>(&'a self) -> Element<'a, Message> { let subtitle = |title, content: Element<'a, Message>| { - column![text(title).size(14), content] - .width(Length::Fill) - .spacing(5) + column![text(title).size(14), content].spacing(5) }; let mut add_toast = button("Add Toast"); @@ -153,14 +153,11 @@ impl Application for App { Message::Timeout ) .step(1.0) - .width(Length::Fill) ] .spacing(5) .into() ), - column![add_toast] - .width(Length::Fill) - .align_items(Alignment::End) + column![add_toast].align_items(Alignment::End) ] .spacing(10) .max_width(200), @@ -318,12 +315,8 @@ mod toast { } impl<'a, Message> Widget<Message, Renderer> for Manager<'a, Message> { - fn width(&self) -> Length { - self.content.as_widget().width() - } - - fn height(&self) -> Length { - self.content.as_widget().height() + fn size(&self) -> Size<Length> { + self.content.as_widget().size() } fn layout( @@ -513,14 +506,14 @@ mod toast { position: Point, _translation: Vector, ) -> layout::Node { - let limits = layout::Limits::new(Size::ZERO, bounds) - .width(Length::Fill) - .height(Length::Fill); + let limits = layout::Limits::new(Size::ZERO, bounds); layout::flex::resolve( layout::flex::Axis::Vertical, renderer, &limits, + Length::Fill, + Length::Fill, 10.into(), 10.0, Alignment::End, diff --git a/examples/todos/src/main.rs b/examples/todos/src/main.rs index 4dac032c..3d79f087 100644 --- a/examples/todos/src/main.rs +++ b/examples/todos/src/main.rs @@ -254,27 +254,27 @@ impl Application for Todos { .spacing(20) .max_width(800); - scrollable( - container(content) - .width(Length::Fill) - .padding(40) - .center_x(), - ) - .into() + scrollable(container(content).padding(40).center_x()).into() } } } fn subscription(&self) -> Subscription<Message> { - keyboard::on_key_press(|key_code, modifiers| { - match (key_code, modifiers) { - (keyboard::KeyCode::Tab, _) => Some(Message::TabPressed { + use keyboard::key; + + keyboard::on_key_press(|key, modifiers| { + let keyboard::Key::Named(key) = key else { + return None; + }; + + match (key, modifiers) { + (key::Named::Tab, _) => Some(Message::TabPressed { shift: modifiers.shift(), }), - (keyboard::KeyCode::Up, keyboard::Modifiers::SHIFT) => { + (key::Named::ArrowUp, keyboard::Modifiers::SHIFT) => { Some(Message::ToggleFullscreen(window::Mode::Fullscreen)) } - (keyboard::KeyCode::Down, keyboard::Modifiers::SHIFT) => { + (key::Named::ArrowDown, keyboard::Modifiers::SHIFT) => { Some(Message::ToggleFullscreen(window::Mode::Windowed)) } _ => None, @@ -472,7 +472,6 @@ fn empty_message(message: &str) -> Element<'_, Message> { .horizontal_alignment(alignment::Horizontal::Center) .style(Color::from([0.7, 0.7, 0.7])), ) - .width(Length::Fill) .height(200) .center_y() .into() diff --git a/examples/tour/src/main.rs b/examples/tour/src/main.rs index 7003d8ae..8633bc0a 100644 --- a/examples/tour/src/main.rs +++ b/examples/tour/src/main.rs @@ -509,7 +509,6 @@ impl<'a> Step { ) }) .map(Element::from) - .collect() ) .spacing(10) ] @@ -692,11 +691,7 @@ fn ferris<'a>( } fn button<'a, Message: Clone>(label: &str) -> Button<'a, Message> { - iced::widget::button( - text(label).horizontal_alignment(alignment::Horizontal::Center), - ) - .padding(12) - .width(100) + iced::widget::button(text(label)).padding([12, 24]) } fn color_slider<'a>( diff --git a/examples/vectorial_text/Cargo.toml b/examples/vectorial_text/Cargo.toml new file mode 100644 index 00000000..76c1af7c --- /dev/null +++ b/examples/vectorial_text/Cargo.toml @@ -0,0 +1,9 @@ +[package] +name = "vectorial_text" +version = "0.1.0" +authors = ["Héctor Ramón Jiménez <hector0193@gmail.com>"] +edition = "2021" +publish = false + +[dependencies] +iced = { path = "../..", features = ["canvas", "debug"] } diff --git a/examples/vectorial_text/src/main.rs b/examples/vectorial_text/src/main.rs new file mode 100644 index 00000000..d366b907 --- /dev/null +++ b/examples/vectorial_text/src/main.rs @@ -0,0 +1,175 @@ +use iced::alignment::{self, Alignment}; +use iced::mouse; +use iced::widget::{ + canvas, checkbox, column, horizontal_space, row, slider, text, +}; +use iced::{ + Element, Length, Point, Rectangle, Renderer, Sandbox, Settings, Theme, + Vector, +}; + +pub fn main() -> iced::Result { + VectorialText::run(Settings { + antialiasing: true, + ..Settings::default() + }) +} + +struct VectorialText { + state: State, +} + +#[derive(Debug, Clone, Copy)] +enum Message { + SizeChanged(f32), + AngleChanged(f32), + ScaleChanged(f32), + ToggleJapanese(bool), +} + +impl Sandbox for VectorialText { + type Message = Message; + + fn new() -> Self { + Self { + state: State::new(), + } + } + + fn title(&self) -> String { + String::from("Vectorial Text - Iced") + } + + fn update(&mut self, message: Message) { + match message { + Message::SizeChanged(size) => { + self.state.size = size; + } + Message::AngleChanged(angle) => { + self.state.angle = angle; + } + Message::ScaleChanged(scale) => { + self.state.scale = scale; + } + Message::ToggleJapanese(use_japanese) => { + self.state.use_japanese = use_japanese; + } + } + + self.state.cache.clear(); + } + + fn view(&self) -> Element<Message> { + let slider_with_label = |label, range, value, message: fn(f32) -> _| { + column![ + row![ + text(label), + horizontal_space(Length::Fill), + text(format!("{:.2}", value)) + ], + slider(range, value, message).step(0.01) + ] + .spacing(2) + }; + + column![ + canvas(&self.state).width(Length::Fill).height(Length::Fill), + column![ + checkbox( + "Use Japanese", + self.state.use_japanese, + Message::ToggleJapanese + ), + row![ + slider_with_label( + "Size", + 2.0..=80.0, + self.state.size, + Message::SizeChanged, + ), + slider_with_label( + "Angle", + 0.0..=360.0, + self.state.angle, + Message::AngleChanged, + ), + slider_with_label( + "Scale", + 1.0..=20.0, + self.state.scale, + Message::ScaleChanged, + ), + ] + .spacing(20), + ] + .align_items(Alignment::Center) + .spacing(10) + ] + .spacing(10) + .padding(20) + .into() + } + + fn theme(&self) -> Theme { + Theme::Dark + } +} + +struct State { + size: f32, + angle: f32, + scale: f32, + use_japanese: bool, + cache: canvas::Cache, +} + +impl State { + pub fn new() -> Self { + Self { + size: 40.0, + angle: 0.0, + scale: 1.0, + use_japanese: false, + cache: canvas::Cache::new(), + } + } +} + +impl<Message> canvas::Program<Message> for State { + type State = (); + + fn draw( + &self, + _state: &Self::State, + renderer: &Renderer, + theme: &Theme, + bounds: Rectangle, + _cursor: mouse::Cursor, + ) -> Vec<canvas::Geometry> { + let geometry = self.cache.draw(renderer, bounds.size(), |frame| { + let palette = theme.palette(); + let center = bounds.center(); + + frame.translate(Vector::new(center.x, center.y)); + frame.scale(self.scale); + frame.rotate(self.angle * std::f32::consts::PI / 180.0); + + frame.fill_text(canvas::Text { + position: Point::new(0.0, 0.0), + color: palette.text, + size: self.size.into(), + content: String::from(if self.use_japanese { + "ベクトルテキスト🎉" + } else { + "Vectorial Text! 🎉" + }), + horizontal_alignment: alignment::Horizontal::Center, + vertical_alignment: alignment::Vertical::Center, + shaping: text::Shaping::Advanced, + ..canvas::Text::default() + }); + }); + + vec![geometry] + } +} diff --git a/examples/websocket/src/main.rs b/examples/websocket/src/main.rs index 920189f5..38a6db1e 100644 --- a/examples/websocket/src/main.rs +++ b/examples/websocket/src/main.rs @@ -3,7 +3,7 @@ mod echo; use iced::alignment::{self, Alignment}; use iced::executor; use iced::widget::{ - button, column, container, row, scrollable, text, text_input, Column, + button, column, container, row, scrollable, text, text_input, }; use iced::{ Application, Color, Command, Element, Length, Settings, Subscription, Theme, @@ -108,15 +108,9 @@ impl Application for WebSocket { .into() } else { scrollable( - Column::with_children( - self.messages - .iter() - .cloned() - .map(text) - .map(Element::from) - .collect(), + column( + self.messages.iter().cloned().map(text).map(Element::from), ) - .width(Length::Fill) .spacing(10), ) .id(MESSAGE_LOG.clone()) @@ -131,7 +125,7 @@ impl Application for WebSocket { let mut button = button( text("Send") - .height(Length::Fill) + .height(40) .vertical_alignment(alignment::Vertical::Center), ) .padding([0, 20]); @@ -149,7 +143,6 @@ impl Application for WebSocket { }; column![message_log, new_message_input] - .width(Length::Fill) .height(Length::Fill) .padding(20) .spacing(10) |