Create `iced_core` and `iced_native`

12 files changed, 203 insertions, 137 deletions

diff --git a/examples/tour/Cargo.toml b/examples/tour/Cargo.toml
index 08d108d9..a0e3eee8 100644
--- a/examples/tour/Cargo.toml
+++ b/examples/tour/Cargo.toml
@@ -16,7 +16,7 @@ path = "src/iced_ggez/main.rs"
 futures-preview = "=0.3.0-alpha.18"
 
 [target.'cfg(not(target_arch = "wasm32"))'.dependencies]
-iced = { path = "../.." }
+iced_native = { version = "0.1.0-alpha", path = "../../native" }
 # A personal `ggez` fork that introduces a `FontCache` type to measure text
 # efficiently and fixes HiDPI issues.
 ggez = { version = "0.5", git = "https://github.com/hecrj/ggez.git" }
diff --git a/examples/tour/src/iced_ggez/main.rs b/examples/tour/src/iced_ggez/main.rs
index a8cf09e5..72774d38 100644
--- a/examples/tour/src/iced_ggez/main.rs
+++ b/examples/tour/src/iced_ggez/main.rs
@@ -35,8 +35,8 @@ struct Game {
     images: iced_ggez::ImageCache,
     tour: Tour,
 
-    events: Vec<iced::Event>,
-    cache: Option<iced::Cache>,
+    events: Vec<iced_native::Event>,
+    cache: Option<iced_native::Cache>,
 }
 
 impl Game {
@@ -52,7 +52,7 @@ impl Game {
             tour: Tour::new(),
 
             events: Vec::new(),
-            cache: Some(iced::Cache::default()),
+            cache: Some(iced_native::Cache::default()),
         })
     }
 }
@@ -69,10 +69,10 @@ impl event::EventHandler for Game {
         _x: f32,
         _y: f32,
     ) {
-        self.events.push(iced::Event::Mouse(
-            iced::input::mouse::Event::Input {
-                state: iced::input::ButtonState::Pressed,
-                button: iced::input::mouse::Button::Left, // TODO: Map `button`
+        self.events.push(iced_native::Event::Mouse(
+            iced_native::input::mouse::Event::Input {
+                state: iced_native::input::ButtonState::Pressed,
+                button: iced_native::input::mouse::Button::Left, // TODO: Map `button`
             },
         ));
     }
@@ -84,10 +84,10 @@ impl event::EventHandler for Game {
         _x: f32,
         _y: f32,
     ) {
-        self.events.push(iced::Event::Mouse(
-            iced::input::mouse::Event::Input {
-                state: iced::input::ButtonState::Released,
-                button: iced::input::mouse::Button::Left, // TODO: Map `button`
+        self.events.push(iced_native::Event::Mouse(
+            iced_native::input::mouse::Event::Input {
+                state: iced_native::input::ButtonState::Released,
+                button: iced_native::input::mouse::Button::Left, // TODO: Map `button`
             },
         ));
     }
@@ -100,8 +100,8 @@ impl event::EventHandler for Game {
         _dx: f32,
         _dy: f32,
     ) {
-        self.events.push(iced::Event::Mouse(
-            iced::input::mouse::Event::CursorMoved { x, y },
+        self.events.push(iced_native::Event::Mouse(
+            iced_native::input::mouse::Event::CursorMoved { x, y },
         ));
     }
 
@@ -132,11 +132,11 @@ impl event::EventHandler for Game {
             let view = self.tour.view();
 
             let content = iced_ggez::Column::new()
-                .width(screen.w as u16)
-                .height(screen.h as u16)
+                .width(iced_native::Length::Units(screen.w as u16))
+                .height(iced_native::Length::Units(screen.h as u16))
                 .padding(20)
-                .align_items(iced::Align::Center)
-                .justify_content(iced::Justify::Center)
+                .align_items(iced_native::Align::Center)
+                .justify_content(iced_native::Justify::Center)
                 .push(view);
 
             let renderer = &mut iced_ggez::Renderer::new(
@@ -146,7 +146,7 @@ impl event::EventHandler for Game {
                 self.font,
             );
 
-            let mut ui = iced::UserInterface::build(
+            let mut ui = iced_native::UserInterface::build(
                 content,
                 self.cache.take().unwrap(),
                 renderer,
@@ -177,13 +177,13 @@ impl event::EventHandler for Game {
     }
 }
 
-fn into_cursor_type(cursor: iced::MouseCursor) -> mouse::MouseCursor {
+fn into_cursor_type(cursor: iced_native::MouseCursor) -> mouse::MouseCursor {
     match cursor {
-        iced::MouseCursor::OutOfBounds => mouse::MouseCursor::Default,
-        iced::MouseCursor::Idle => mouse::MouseCursor::Default,
-        iced::MouseCursor::Pointer => mouse::MouseCursor::Hand,
-        iced::MouseCursor::Working => mouse::MouseCursor::Progress,
-        iced::MouseCursor::Grab => mouse::MouseCursor::Grab,
-        iced::MouseCursor::Grabbing => mouse::MouseCursor::Grabbing,
+        iced_native::MouseCursor::OutOfBounds => mouse::MouseCursor::Default,
+        iced_native::MouseCursor::Idle => mouse::MouseCursor::Default,
+        iced_native::MouseCursor::Pointer => mouse::MouseCursor::Hand,
+        iced_native::MouseCursor::Working => mouse::MouseCursor::Progress,
+        iced_native::MouseCursor::Grab => mouse::MouseCursor::Grab,
+        iced_native::MouseCursor::Grabbing => mouse::MouseCursor::Grabbing,
     }
 }
diff --git a/examples/tour/src/iced_ggez/renderer.rs b/examples/tour/src/iced_ggez/renderer.rs
index e3181eaa..c0e6d559 100644
--- a/examples/tour/src/iced_ggez/renderer.rs
+++ b/examples/tour/src/iced_ggez/renderer.rs
@@ -67,7 +67,7 @@ impl<'a> Renderer<'a> {
     }
 }
 
-pub fn into_color(color: iced::Color) -> graphics::Color {
+pub fn into_color(color: iced_native::Color) -> graphics::Color {
     graphics::Color {
         r: color.r,
         g: color.g,
diff --git a/examples/tour/src/iced_ggez/renderer/button.rs b/examples/tour/src/iced_ggez/renderer/button.rs
index 486e07ed..78a5de07 100644
--- a/examples/tour/src/iced_ggez/renderer/button.rs
+++ b/examples/tour/src/iced_ggez/renderer/button.rs
@@ -2,7 +2,7 @@ use super::Renderer;
 use ggez::graphics::{
     self, Align, Color, DrawParam, Rect, Scale, Text, TextFragment, WHITE,
 };
-use iced::{button, MouseCursor};
+use iced_native::{button, Button, Layout, Length, MouseCursor, Node, Style};
 
 const LEFT: Rect = Rect {
     x: 0.0,
@@ -26,20 +26,29 @@ const RIGHT: Rect = Rect {
 };
 
 impl button::Renderer for Renderer<'_> {
-    fn draw(
+    fn node<Message>(&self, button: &Button<'_, Message>) -> Node {
+        let style = Style::default()
+            .width(button.width)
+            .height(Length::Units(LEFT.h as u16))
+            .min_width(Length::Units(100))
+            .align_self(button.align_self);
+
+        Node::new(style)
+    }
+
+    fn draw<Message>(
         &mut self,
-        cursor_position: iced::Point,
-        mut bounds: iced::Rectangle,
-        state: &button::State,
-        label: &str,
-        class: button::Class,
+        button: &Button<'_, Message>,
+        layout: Layout<'_>,
+        cursor_position: iced_native::Point,
     ) -> MouseCursor {
+        let mut bounds = layout.bounds();
         let mouse_over = bounds.contains(cursor_position);
 
         let mut state_offset = 0.0;
 
         if mouse_over {
-            if state.is_pressed() {
+            if button.state.is_pressed() {
                 bounds.y += 4.0;
                 state_offset = RIGHT.x + RIGHT.w;
             } else {
@@ -47,7 +56,7 @@ impl button::Renderer for Renderer<'_> {
             }
         }
 
-        let class_index = match class {
+        let class_index = match button.class {
             button::Class::Primary => 0,
             button::Class::Secondary => 1,
             button::Class::Positive => 2,
@@ -103,7 +112,7 @@ impl button::Renderer for Renderer<'_> {
         });
 
         let mut text = Text::new(TextFragment {
-            text: String::from(label),
+            text: button.label.clone(),
             font: Some(self.font),
             scale: Some(Scale { x: 20.0, y: 20.0 }),
             ..Default::default()
diff --git a/examples/tour/src/iced_ggez/renderer/checkbox.rs b/examples/tour/src/iced_ggez/renderer/checkbox.rs
index 20a91be5..807185d9 100644
--- a/examples/tour/src/iced_ggez/renderer/checkbox.rs
+++ b/examples/tour/src/iced_ggez/renderer/checkbox.rs
@@ -1,7 +1,10 @@
 use super::Renderer;
 
 use ggez::graphics::{DrawParam, Rect};
-use iced::{checkbox, MouseCursor};
+use iced_native::{
+    checkbox, text, Align, Checkbox, Column, Layout, Length, MouseCursor, Node,
+    Row, Text, Widget,
+};
 
 const SPRITE: Rect = Rect {
     x: 98.0,
@@ -10,14 +13,41 @@ const SPRITE: Rect = Rect {
     h: 28.0,
 };
 
-impl checkbox::Renderer for Renderer<'_> {
-    fn draw(
+impl checkbox::Renderer for Renderer<'_>
+where
+    Self: text::Renderer,
+{
+    fn node<Message>(&mut self, checkbox: &Checkbox<Message>) -> Node {
+        Row::<(), Self>::new()
+            .spacing(15)
+            .align_items(Align::Center)
+            .push(
+                Column::new()
+                    .width(Length::Units(SPRITE.w as u16))
+                    .height(Length::Units(SPRITE.h as u16)),
+            )
+            .push(Text::new(&checkbox.label))
+            .node(self)
+    }
+
+    fn draw<Message>(
         &mut self,
-        cursor_position: iced::Point,
-        bounds: iced::Rectangle,
-        text_bounds: iced::Rectangle,
-        is_checked: bool,
+        checkbox: &Checkbox<Message>,
+        layout: Layout<'_>,
+        cursor_position: iced_native::Point,
     ) -> MouseCursor {
+        let bounds = layout.bounds();
+        let children: Vec<_> = layout.children().collect();
+        let text_bounds = children[1].bounds();
+
+        let mut text = Text::new(&checkbox.label);
+
+        if let Some(label_color) = checkbox.label_color {
+            text = text.color(label_color);
+        }
+
+        text::Renderer::draw(self, &text, children[1]);
+
         let mouse_over = bounds.contains(cursor_position)
             || text_bounds.contains(cursor_position);
 
@@ -39,7 +69,7 @@ impl checkbox::Renderer for Renderer<'_> {
             ..DrawParam::default()
         });
 
-        if is_checked {
+        if checkbox.is_checked {
             self.sprites.add(DrawParam {
                 src: Rect {
                     x: (SPRITE.x + SPRITE.w * 2.0) / width,
diff --git a/examples/tour/src/iced_ggez/renderer/debugger.rs b/examples/tour/src/iced_ggez/renderer/debugger.rs
index eba03ebf..ffb658af 100644
--- a/examples/tour/src/iced_ggez/renderer/debugger.rs
+++ b/examples/tour/src/iced_ggez/renderer/debugger.rs
@@ -1,8 +1,12 @@
 use super::{into_color, Renderer};
 use ggez::graphics::{DrawMode, MeshBuilder, Rect};
 
-impl iced::renderer::Debugger for Renderer<'_> {
-    fn explain(&mut self, layout: &iced::Layout<'_>, color: iced::Color) {
+impl iced_native::renderer::Debugger for Renderer<'_> {
+    fn explain(
+        &mut self,
+        layout: &iced_native::Layout<'_>,
+        color: iced_native::Color,
+    ) {
         let bounds = layout.bounds();
 
         let mut debug_mesh =
diff --git a/examples/tour/src/iced_ggez/renderer/image.rs b/examples/tour/src/iced_ggez/renderer/image.rs
index 17c6a56e..b12b65c3 100644
--- a/examples/tour/src/iced_ggez/renderer/image.rs
+++ b/examples/tour/src/iced_ggez/renderer/image.rs
@@ -1,7 +1,7 @@
 use super::Renderer;
 
 use ggez::{graphics, nalgebra};
-use iced::image;
+use iced_native::{image, Image, Layout, Length, Style};
 
 pub struct Cache {
     images: std::collections::HashMap<String, graphics::Image>,
@@ -35,39 +35,29 @@ impl Cache {
 }
 
 impl<'a> image::Renderer<&'a str> for Renderer<'_> {
-    fn node(
-        &mut self,
-        style: iced::Style,
-        name: &&'a str,
-        width: Option<u16>,
-        height: Option<u16>,
-        _source: Option<iced::Rectangle<u16>>,
-    ) -> iced::Node {
-        let image = self.images.get(name, self.context);
+    fn node(&mut self, image: &Image<&'a str>) -> iced_native::Node {
+        let ggez_image = self.images.get(image.handle, self.context);
+
+        let aspect_ratio =
+            ggez_image.width() as f32 / ggez_image.height() as f32;
 
-        let aspect_ratio = image.width() as f32 / image.height() as f32;
+        let mut style = Style::default().align_self(image.align_self);
 
-        let style = match (width, height) {
-            (Some(width), Some(height)) => style.width(width).height(height),
-            (Some(width), None) => style
-                .width(width)
-                .height((width as f32 / aspect_ratio).round() as u16),
-            (None, Some(height)) => style
-                .height(height)
-                .width((height as f32 * aspect_ratio).round() as u16),
-            (None, None) => style.width(image.width()).height(image.height()),
+        style = match (image.width, image.height) {
+            (Length::Units(width), _) => style.width(image.width).height(
+                Length::Units((width as f32 / aspect_ratio).round() as u16),
+            ),
+            (_, _) => style
+                .width(Length::Units(ggez_image.width()))
+                .height(Length::Units(ggez_image.height())),
         };
 
-        iced::Node::new(style)
+        iced_native::Node::new(style)
     }
 
-    fn draw(
-        &mut self,
-        name: &&'a str,
-        bounds: iced::Rectangle,
-        _source: Option<iced::Rectangle<u16>>,
-    ) {
-        let image = self.images.get(name, self.context);
+    fn draw(&mut self, image: &Image<&'a str>, layout: Layout<'_>) {
+        let image = self.images.get(image.handle, self.context);
+        let bounds = layout.bounds();
 
         // We should probably use batches to draw images efficiently and keep
         // draw side-effect free, but this is good enough for the example.
diff --git a/examples/tour/src/iced_ggez/renderer/radio.rs b/examples/tour/src/iced_ggez/renderer/radio.rs
index 0f7815d6..dbd29ecd 100644
--- a/examples/tour/src/iced_ggez/renderer/radio.rs
+++ b/examples/tour/src/iced_ggez/renderer/radio.rs
@@ -1,7 +1,10 @@
 use super::Renderer;
 
 use ggez::graphics::{DrawParam, Rect};
-use iced::{radio, MouseCursor, Point, Rectangle};
+use iced_native::{
+    radio, text, Align, Column, Layout, Length, MouseCursor, Node, Point,
+    Radio, Row, Text, Widget,
+};
 
 const SPRITE: Rect = Rect {
     x: 98.0,
@@ -10,15 +13,41 @@ const SPRITE: Rect = Rect {
     h: 28.0,
 };
 
-impl radio::Renderer for Renderer<'_> {
-    fn draw(
+impl radio::Renderer for Renderer<'_>
+where
+    Self: text::Renderer,
+{
+    fn node<Message>(&mut self, radio: &Radio<Message>) -> Node {
+        Row::<(), Self>::new()
+            .spacing(15)
+            .align_items(Align::Center)
+            .push(
+                Column::new()
+                    .width(Length::Units(SPRITE.w as u16))
+                    .height(Length::Units(SPRITE.h as u16)),
+            )
+            .push(Text::new(&radio.label))
+            .node(self)
+    }
+
+    fn draw<Message>(
         &mut self,
+        radio: &Radio<Message>,
+        layout: Layout<'_>,
         cursor_position: Point,
-        bounds: Rectangle,
-        bounds_with_label: Rectangle,
-        is_selected: bool,
     ) -> MouseCursor {
-        let mouse_over = bounds_with_label.contains(cursor_position);
+        let children: Vec<_> = layout.children().collect();
+
+        let mut text = Text::new(&radio.label);
+
+        if let Some(label_color) = radio.label_color {
+            text = text.color(label_color);
+        }
+
+        text::Renderer::draw(self, &text, children[1]);
+
+        let bounds = layout.bounds();
+        let mouse_over = bounds.contains(cursor_position);
 
         let width = self.spritesheet.width() as f32;
         let height = self.spritesheet.height() as f32;
@@ -38,7 +67,7 @@ impl radio::Renderer for Renderer<'_> {
             ..DrawParam::default()
         });
 
-        if is_selected {
+        if radio.is_selected {
             self.sprites.add(DrawParam {
                 src: Rect {
                     x: (SPRITE.x + SPRITE.w * 2.0) / width,
diff --git a/examples/tour/src/iced_ggez/renderer/slider.rs b/examples/tour/src/iced_ggez/renderer/slider.rs
index 146cee18..60c40c55 100644
--- a/examples/tour/src/iced_ggez/renderer/slider.rs
+++ b/examples/tour/src/iced_ggez/renderer/slider.rs
@@ -1,8 +1,9 @@
 use super::Renderer;
 
 use ggez::graphics::{DrawParam, Rect};
-use iced::{slider, MouseCursor, Point, Rectangle};
-use std::ops::RangeInclusive;
+use iced_native::{
+    slider, Layout, Length, MouseCursor, Node, Point, Slider, Style,
+};
 
 const RAIL: Rect = Rect {
     x: 98.0,
@@ -19,14 +20,22 @@ const MARKER: Rect = Rect {
 };
 
 impl slider::Renderer for Renderer<'_> {
-    fn draw(
+    fn node<Message>(&self, slider: &Slider<'_, Message>) -> Node {
+        let style = Style::default()
+            .width(slider.width)
+            .height(Length::Units(25))
+            .min_width(Length::Units(100));
+
+        Node::new(style)
+    }
+
+    fn draw<Message>(
         &mut self,
+        slider: &Slider<'_, Message>,
+        layout: Layout<'_>,
         cursor_position: Point,
-        bounds: Rectangle,
-        state: &slider::State,
-        range: RangeInclusive<f32>,
-        value: f32,
     ) -> MouseCursor {
+        let bounds = layout.bounds();
         let width = self.spritesheet.width() as f32;
         let height = self.spritesheet.height() as f32;
 
@@ -48,13 +57,14 @@ impl slider::Renderer for Renderer<'_> {
             ..DrawParam::default()
         });
 
-        let (range_start, range_end) = range.into_inner();
+        let (range_start, range_end) = slider.range.clone().into_inner();
 
         let marker_offset = (bounds.width - MARKER.w as f32)
-            * ((value - range_start) / (range_end - range_start).max(1.0));
+            * ((slider.value - range_start)
+                / (range_end - range_start).max(1.0));
 
         let mouse_over = bounds.contains(cursor_position);
-        let is_active = state.is_dragging() || mouse_over;
+        let is_active = slider.state.is_dragging() || mouse_over;
 
         self.sprites.add(DrawParam {
             src: Rect {
@@ -66,12 +76,13 @@ impl slider::Renderer for Renderer<'_> {
             },
             dest: ggez::mint::Point2 {
                 x: bounds.x + marker_offset.round(),
-                y: bounds.y + (if state.is_dragging() { 2.0 } else { 0.0 }),
+                y: bounds.y
+                    + (if slider.state.is_dragging() { 2.0 } else { 0.0 }),
             },
             ..DrawParam::default()
         });
 
-        if state.is_dragging() {
+        if slider.state.is_dragging() {
             MouseCursor::Grabbing
         } else if mouse_over {
             MouseCursor::Grab
diff --git a/examples/tour/src/iced_ggez/renderer/text.rs b/examples/tour/src/iced_ggez/renderer/text.rs
index 450ca2cd..b51cc220 100644
--- a/examples/tour/src/iced_ggez/renderer/text.rs
+++ b/examples/tour/src/iced_ggez/renderer/text.rs
@@ -1,20 +1,15 @@
 use super::{into_color, Renderer};
 use ggez::graphics::{self, mint, Align, Scale, Text, TextFragment};
 
-use iced::text;
+use iced_native::{text, Layout, Node, Style};
 use std::cell::RefCell;
 use std::f32;
 
 impl text::Renderer for Renderer<'_> {
-    fn node(
-        &self,
-        style: iced::Style,
-        content: &str,
-        size: Option<u16>,
-    ) -> iced::Node {
+    fn node(&self, text: &iced_native::Text) -> Node {
         let font = self.font;
         let font_cache = graphics::font_cache(self.context);
-        let content = String::from(content);
+        let content = String::from(&text.content);
 
         // TODO: Investigate why stretch tries to measure this MANY times
         // with every ancestor's bounds.
@@ -23,20 +18,22 @@ impl text::Renderer for Renderer<'_> {
         // I noticed that the first measure is the one that matters in
         // practice. Here, we use a RefCell to store the cached measurement.
         let measure = RefCell::new(None);
-        let size = size.map(f32::from).unwrap_or(self.font_size);
+        let size = text.size.map(f32::from).unwrap_or(self.font_size);
 
-        iced::Node::with_measure(style, move |bounds| {
+        let style = Style::default().width(text.width);
+
+        iced_native::Node::with_measure(style, move |bounds| {
             let mut measure = measure.borrow_mut();
 
             if measure.is_none() {
                 let bounds = (
                     match bounds.width {
-                        iced::Number::Undefined => f32::INFINITY,
-                        iced::Number::Defined(w) => w,
+                        iced_native::Number::Undefined => f32::INFINITY,
+                        iced_native::Number::Defined(w) => w,
                     },
                     match bounds.height {
-                        iced::Number::Undefined => f32::INFINITY,
-                        iced::Number::Defined(h) => h,
+                        iced_native::Number::Undefined => f32::INFINITY,
+                        iced_native::Number::Defined(h) => h,
                     },
                 );
 
@@ -57,7 +54,7 @@ impl text::Renderer for Renderer<'_> {
 
                 let (width, height) = font_cache.dimensions(&text);
 
-                let size = iced::Size {
+                let size = iced_native::Size {
                     width: width as f32,
                     height: height as f32,
                 };
@@ -75,30 +72,23 @@ impl text::Renderer for Renderer<'_> {
         })
     }
 
-    fn draw(
-        &mut self,
-        bounds: iced::Rectangle,
-        content: &str,
-        size: Option<u16>,
-        color: Option<iced::Color>,
-        horizontal_alignment: text::HorizontalAlignment,
-        _vertical_alignment: text::VerticalAlignment,
-    ) {
-        let size = size.map(f32::from).unwrap_or(self.font_size);
-
-        let mut text = Text::new(TextFragment {
-            text: String::from(content),
+    fn draw(&mut self, text: &iced_native::Text, layout: Layout<'_>) {
+        let size = text.size.map(f32::from).unwrap_or(self.font_size);
+        let bounds = layout.bounds();
+
+        let mut ggez_text = Text::new(TextFragment {
+            text: text.content.clone(),
             font: Some(self.font),
             scale: Some(Scale { x: size, y: size }),
             ..Default::default()
         });
 
-        text.set_bounds(
+        ggez_text.set_bounds(
             mint::Point2 {
                 x: bounds.width,
                 y: bounds.height,
             },
-            match horizontal_alignment {
+            match text.horizontal_alignment {
                 text::HorizontalAlignment::Left => graphics::Align::Left,
                 text::HorizontalAlignment::Center => graphics::Align::Center,
                 text::HorizontalAlignment::Right => graphics::Align::Right,
@@ -107,12 +97,14 @@ impl text::Renderer for Renderer<'_> {
 
         graphics::queue_text(
             self.context,
-            &text,
+            &ggez_text,
             mint::Point2 {
                 x: bounds.x,
                 y: bounds.y,
             },
-            color.or(Some(iced::Color::BLACK)).map(into_color),
+            text.color
+                .or(Some(iced_native::Color::BLACK))
+                .map(into_color),
         );
     }
 }
diff --git a/examples/tour/src/iced_ggez/widget.rs b/examples/tour/src/iced_ggez/widget.rs
index c9f857f6..948f9fc6 100644
--- a/examples/tour/src/iced_ggez/widget.rs
+++ b/examples/tour/src/iced_ggez/widget.rs
@@ -1,11 +1,12 @@
 use super::Renderer;
 
-pub use iced::{
-    button, slider, text, Align, Button, Checkbox, Color, Radio, Slider, Text,
+pub use iced_native::{
+    button, slider, text, Align, Button, Checkbox, Color, Length, Radio,
+    Slider, Text,
 };
 
-pub type Image<'a> = iced::Image<&'a str>;
+pub type Image<'a> = iced_native::Image<&'a str>;
 
-pub type Column<'a, Message> = iced::Column<'a, Message, Renderer<'a>>;
-pub type Row<'a, Message> = iced::Row<'a, Message, Renderer<'a>>;
-pub type Element<'a, Message> = iced::Element<'a, Message, Renderer<'a>>;
+pub type Column<'a, Message> = iced_native::Column<'a, Message, Renderer<'a>>;
+pub type Row<'a, Message> = iced_native::Row<'a, Message, Renderer<'a>>;
+pub type Element<'a, Message> = iced_native::Element<'a, Message, Renderer<'a>>;
diff --git a/examples/tour/src/tour.rs b/examples/tour/src/tour.rs
index 4bd7c8a3..fd9c2dde 100644
--- a/examples/tour/src/tour.rs
+++ b/examples/tour/src/tour.rs
@@ -1,6 +1,6 @@
 use crate::widget::{
     button, slider, text::HorizontalAlignment, Align, Button, Checkbox, Color,
-    Column, Element, Image, Radio, Row, Slider, Text,
+    Column, Element, Image, Length, Radio, Row, Slider, Text,
 };
 
 pub struct Tour {
@@ -16,7 +16,7 @@ impl Tour {
             steps: Steps::new(),
             back_button: button::State::new(),
             next_button: button::State::new(),
-            debug: false,
+            debug: true,
         }
     }
 
@@ -61,7 +61,7 @@ impl Tour {
         }
 
         let element: Element<_> = Column::new()
-            .max_width(500)
+            .max_width(Length::Units(500))
             .spacing(20)
             .push(steps.view(self.debug).map(Message::StepMessage))
             .push(controls)
@@ -478,7 +478,7 @@ impl<'a> Step {
             .push(Text::new("An image that tries to keep its aspect ratio."))
             .push(
                 Image::new("resources/ferris.png")
-                    .width(width)
+                    .width(Length::Units(width))
                     .align_self(Align::Center),
             )
             .push(Slider::new(