Merge pull request #52 from hecrj/custom-layout-engine

Custom layout engine

24 files changed, 961 insertions, 435 deletions

diff --git a/native/src/element.rs b/native/src/element.rs
index be64a981..23f069f1 100644
--- a/native/src/element.rs
+++ b/native/src/element.rs
@@ -1,6 +1,6 @@
-use stretch::{geometry, result};
-
-use crate::{renderer, Color, Event, Hasher, Layout, Node, Point, Widget};
+use crate::{
+    layout, renderer, Color, Event, Hasher, Layout, Length, Point, Widget,
+};
 
 /// A generic [`Widget`].
 ///
@@ -41,8 +41,20 @@ where
         }
     }
 
-    pub fn node(&self, renderer: &Renderer) -> Node {
-        self.widget.node(renderer)
+    pub fn width(&self) -> Length {
+        self.widget.width()
+    }
+
+    pub fn height(&self) -> Length {
+        self.widget.height()
+    }
+
+    pub fn layout(
+        &self,
+        renderer: &Renderer,
+        limits: &layout::Limits,
+    ) -> layout::Node {
+        self.widget.layout(renderer, limits)
     }
 
     pub fn draw(
@@ -116,7 +128,7 @@ where
     /// #
     /// # mod iced_wgpu {
     /// #     use iced_native::{
-    /// #         text, row, Text, Node, Point, Rectangle, Style, Layout, Row
+    /// #         text, row, layout, Text, Size, Point, Rectangle, Layout, Row
     /// #     };
     /// #     pub struct Renderer;
     /// #
@@ -132,8 +144,12 @@ where
     /// #     }
     /// #
     /// #     impl text::Renderer for Renderer {
-    /// #         fn node(&self, _text: &Text) -> Node {
-    /// #             Node::new(Style::default())
+    /// #         fn layout(
+    /// #             &self,
+    /// #             _text: &Text,
+    /// #             _limits: &layout::Limits,
+    /// #         ) -> layout::Node {
+    /// #             layout::Node::new(Size::ZERO)
     /// #         }
     /// #
     /// #         fn draw(
@@ -247,12 +263,6 @@ where
         }
     }
 
-    pub(crate) fn compute_layout(&self, renderer: &Renderer) -> result::Layout {
-        let node = self.widget.node(renderer);
-
-        node.0.compute_layout(geometry::Size::undefined()).unwrap()
-    }
-
     pub(crate) fn hash_layout(&self, state: &mut Hasher) {
         self.widget.hash_layout(state);
     }
@@ -289,8 +299,12 @@ where
     A: Clone,
     Renderer: crate::Renderer,
 {
-    fn node(&self, renderer: &Renderer) -> Node {
-        self.widget.node(renderer)
+    fn layout(
+        &self,
+        renderer: &Renderer,
+        limits: &layout::Limits,
+    ) -> layout::Node {
+        self.widget.layout(renderer, limits)
     }
 
     fn on_event(
@@ -361,8 +375,12 @@ impl<'a, Message, Renderer> Widget<Message, Renderer>
 where
     Renderer: crate::Renderer + renderer::Debugger,
 {
-    fn node(&self, renderer: &Renderer) -> Node {
-        self.element.widget.node(renderer)
+    fn layout(
+        &self,
+        renderer: &Renderer,
+        limits: &layout::Limits,
+    ) -> layout::Node {
+        self.element.widget.layout(renderer, limits)
     }
 
     fn on_event(
diff --git a/native/src/layout.rs b/native/src/layout.rs
index 32630f35..0a744346 100644
--- a/native/src/layout.rs
+++ b/native/src/layout.rs
@@ -1,62 +1,50 @@
-use stretch::result;
+mod limits;
+mod node;
+
+pub mod flex;
+
+pub use limits::Limits;
+pub use node::Node;
 
 use crate::{Point, Rectangle, Vector};
 
-/// The computed bounds of a [`Node`] and its children.
-///
-/// This type is provided by the GUI runtime to [`Widget::on_event`] and
-/// [`Widget::draw`], describing the layout of the [`Node`] produced by
-/// [`Widget::node`].
-///
-/// [`Node`]: struct.Node.html
-/// [`Widget::on_event`]: widget/trait.Widget.html#method.on_event
-/// [`Widget::draw`]: widget/trait.Widget.html#tymethod.draw
-/// [`Widget::node`]: widget/trait.Widget.html#tymethod.node
 #[derive(Debug, Clone, Copy)]
 pub struct Layout<'a> {
-    layout: &'a result::Layout,
     position: Point,
+    node: &'a Node,
 }
 
 impl<'a> Layout<'a> {
-    pub(crate) fn new(layout: &'a result::Layout) -> Self {
-        Self::with_parent_position(layout, Point::new(0.0, 0.0))
+    pub(crate) fn new(node: &'a Node) -> Self {
+        Self::with_offset(Vector::new(0.0, 0.0), node)
     }
 
-    fn with_parent_position(
-        layout: &'a result::Layout,
-        parent_position: Point,
-    ) -> Self {
-        let position =
-            parent_position + Vector::new(layout.location.x, layout.location.y);
+    pub(crate) fn with_offset(offset: Vector, node: &'a Node) -> Self {
+        let bounds = node.bounds();
 
-        Layout { layout, position }
+        Self {
+            position: Point::new(bounds.x, bounds.y) + offset,
+            node,
+        }
     }
 
-    /// Gets the bounds of the [`Layout`].
-    ///
-    /// The returned [`Rectangle`] describes the position and size of a
-    /// [`Node`].
-    ///
-    /// [`Layout`]: struct.Layout.html
-    /// [`Rectangle`]: struct.Rectangle.html
-    /// [`Node`]: struct.Node.html
     pub fn bounds(&self) -> Rectangle {
+        let bounds = self.node.bounds();
+
         Rectangle {
             x: self.position.x,
             y: self.position.y,
-            width: self.layout.size.width,
-            height: self.layout.size.height,
+            width: bounds.width,
+            height: bounds.height,
         }
     }
 
-    /// Returns an iterator over the [`Layout`] of the children of a [`Node`].
-    ///
-    /// [`Layout`]: struct.Layout.html
-    /// [`Node`]: struct.Node.html
     pub fn children(&'a self) -> impl Iterator<Item = Layout<'a>> {
-        self.layout.children.iter().map(move |layout| {
-            Layout::with_parent_position(layout, self.position)
+        self.node.children().iter().map(move |node| {
+            Layout::with_offset(
+                Vector::new(self.position.x, self.position.y),
+                node,
+            )
         })
     }
 }
diff --git a/native/src/layout/DRUID_LICENSE b/native/src/layout/DRUID_LICENSE
new file mode 100644
index 00000000..d6456956
--- /dev/null
+++ b/native/src/layout/DRUID_LICENSE
@@ -0,0 +1,202 @@
+
+                                 Apache License
+                           Version 2.0, January 2004
+                        http://www.apache.org/licenses/
+
+   TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
+
+   1. Definitions.
+
+      "License" shall mean the terms and conditions for use, reproduction,
+      and distribution as defined by Sections 1 through 9 of this document.
+
+      "Licensor" shall mean the copyright owner or entity authorized by
+      the copyright owner that is granting the License.
+
+      "Legal Entity" shall mean the union of the acting entity and all
+      other entities that control, are controlled by, or are under common
+      control with that entity. For the purposes of this definition,
+      "control" means (i) the power, direct or indirect, to cause the
+      direction or management of such entity, whether by contract or
+      otherwise, or (ii) ownership of fifty percent (50%) or more of the
+      outstanding shares, or (iii) beneficial ownership of such entity.
+
+      "You" (or "Your") shall mean an individual or Legal Entity
+      exercising permissions granted by this License.
+
+      "Source" form shall mean the preferred form for making modifications,
+      including but not limited to software source code, documentation
+      source, and configuration files.
+
+      "Object" form shall mean any form resulting from mechanical
+      transformation or translation of a Source form, including but
+      not limited to compiled object code, generated documentation,
+      and conversions to other media types.
+
+      "Work" shall mean the work of authorship, whether in Source or
+      Object form, made available under the License, as indicated by a
+      copyright notice that is included in or attached to the work
+      (an example is provided in the Appendix below).
+
+      "Derivative Works" shall mean any work, whether in Source or Object
+      form, that is based on (or derived from) the Work and for which the
+      editorial revisions, annotations, elaborations, or other modifications
+      represent, as a whole, an original work of authorship. For the purposes
+      of this License, Derivative Works shall not include works that remain
+      separable from, or merely link (or bind by name) to the interfaces of,
+      the Work and Derivative Works thereof.
+
+      "Contribution" shall mean any work of authorship, including
+      the original version of the Work and any modifications or additions
+      to that Work or Derivative Works thereof, that is intentionally
+      submitted to Licensor for inclusion in the Work by the copyright owner
+      or by an individual or Legal Entity authorized to submit on behalf of
+      the copyright owner. For the purposes of this definition, "submitted"
+      means any form of electronic, verbal, or written communication sent
+      to the Licensor or its representatives, including but not limited to
+      communication on electronic mailing lists, source code control systems,
+      and issue tracking systems that are managed by, or on behalf of, the
+      Licensor for the purpose of discussing and improving the Work, but
+      excluding communication that is conspicuously marked or otherwise
+      designated in writing by the copyright owner as "Not a Contribution."
+
+      "Contributor" shall mean Licensor and any individual or Legal Entity
+      on behalf of whom a Contribution has been received by Licensor and
+      subsequently incorporated within the Work.
+
+   2. Grant of Copyright License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      copyright license to reproduce, prepare Derivative Works of,
+      publicly display, publicly perform, sublicense, and distribute the
+      Work and such Derivative Works in Source or Object form.
+
+   3. Grant of Patent License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      (except as stated in this section) patent license to make, have made,
+      use, offer to sell, sell, import, and otherwise transfer the Work,
+      where such license applies only to those patent claims licensable
+      by such Contributor that are necessarily infringed by their
+      Contribution(s) alone or by combination of their Contribution(s)
+      with the Work to which such Contribution(s) was submitted. If You
+      institute patent litigation against any entity (including a
+      cross-claim or counterclaim in a lawsuit) alleging that the Work
+      or a Contribution incorporated within the Work constitutes direct
+      or contributory patent infringement, then any patent licenses
+      granted to You under this License for that Work shall terminate
+      as of the date such litigation is filed.
+
+   4. Redistribution. You may reproduce and distribute copies of the
+      Work or Derivative Works thereof in any medium, with or without
+      modifications, and in Source or Object form, provided that You
+      meet the following conditions:
+
+      (a) You must give any other recipients of the Work or
+          Derivative Works a copy of this License; and
+
+      (b) You must cause any modified files to carry prominent notices
+          stating that You changed the files; and
+
+      (c) You must retain, in the Source form of any Derivative Works
+          that You distribute, all copyright, patent, trademark, and
+          attribution notices from the Source form of the Work,
+          excluding those notices that do not pertain to any part of
+          the Derivative Works; and
+
+      (d) If the Work includes a "NOTICE" text file as part of its
+          distribution, then any Derivative Works that You distribute must
+          include a readable copy of the attribution notices contained
+          within such NOTICE file, excluding those notices that do not
+          pertain to any part of the Derivative Works, in at least one
+          of the following places: within a NOTICE text file distributed
+          as part of the Derivative Works; within the Source form or
+          documentation, if provided along with the Derivative Works; or,
+          within a display generated by the Derivative Works, if and
+          wherever such third-party notices normally appear. The contents
+          of the NOTICE file are for informational purposes only and
+          do not modify the License. You may add Your own attribution
+          notices within Derivative Works that You distribute, alongside
+          or as an addendum to the NOTICE text from the Work, provided
+          that such additional attribution notices cannot be construed
+          as modifying the License.
+
+      You may add Your own copyright statement to Your modifications and
+      may provide additional or different license terms and conditions
+      for use, reproduction, or distribution of Your modifications, or
+      for any such Derivative Works as a whole, provided Your use,
+      reproduction, and distribution of the Work otherwise complies with
+      the conditions stated in this License.
+
+   5. Submission of Contributions. Unless You explicitly state otherwise,
+      any Contribution intentionally submitted for inclusion in the Work
+      by You to the Licensor shall be under the terms and conditions of
+      this License, without any additional terms or conditions.
+      Notwithstanding the above, nothing herein shall supersede or modify
+      the terms of any separate license agreement you may have executed
+      with Licensor regarding such Contributions.
+
+   6. Trademarks. This License does not grant permission to use the trade
+      names, trademarks, service marks, or product names of the Licensor,
+      except as required for reasonable and customary use in describing the
+      origin of the Work and reproducing the content of the NOTICE file.
+
+   7. Disclaimer of Warranty. Unless required by applicable law or
+      agreed to in writing, Licensor provides the Work (and each
+      Contributor provides its Contributions) on an "AS IS" BASIS,
+      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
+      implied, including, without limitation, any warranties or conditions
+      of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
+      PARTICULAR PURPOSE. You are solely responsible for determining the
+      appropriateness of using or redistributing the Work and assume any
+      risks associated with Your exercise of permissions under this License.
+
+   8. Limitation of Liability. In no event and under no legal theory,
+      whether in tort (including negligence), contract, or otherwise,
+      unless required by applicable law (such as deliberate and grossly
+      negligent acts) or agreed to in writing, shall any Contributor be
+      liable to You for damages, including any direct, indirect, special,
+      incidental, or consequential damages of any character arising as a
+      result of this License or out of the use or inability to use the
+      Work (including but not limited to damages for loss of goodwill,
+      work stoppage, computer failure or malfunction, or any and all
+      other commercial damages or losses), even if such Contributor
+      has been advised of the possibility of such damages.
+
+   9. Accepting Warranty or Additional Liability. While redistributing
+      the Work or Derivative Works thereof, You may choose to offer,
+      and charge a fee for, acceptance of support, warranty, indemnity,
+      or other liability obligations and/or rights consistent with this
+      License. However, in accepting such obligations, You may act only
+      on Your own behalf and on Your sole responsibility, not on behalf
+      of any other Contributor, and only if You agree to indemnify,
+      defend, and hold each Contributor harmless for any liability
+      incurred by, or claims asserted against, such Contributor by reason
+      of your accepting any such warranty or additional liability.
+
+   END OF TERMS AND CONDITIONS
+
+   APPENDIX: How to apply the Apache License to your work.
+
+      To apply the Apache License to your work, attach the following
+      boilerplate notice, with the fields enclosed by brackets "[]"
+      replaced with your own identifying information. (Don't include
+      the brackets!)  The text should be enclosed in the appropriate
+      comment syntax for the file format. We also recommend that a
+      file or class name and description of purpose be included on the
+      same "printed page" as the copyright notice for easier
+      identification within third-party archives.
+
+   Copyright [yyyy] [name of copyright owner]
+
+   Licensed under the Apache License, Version 2.0 (the "License");
+   you may not use this file except in compliance with the License.
+   You may obtain a copy of the License at
+
+       http://www.apache.org/licenses/LICENSE-2.0
+
+   Unless required by applicable law or agreed to in writing, software
+   distributed under the License is distributed on an "AS IS" BASIS,
+   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+   See the License for the specific language governing permissions and
+   limitations under the License.
diff --git a/native/src/layout/flex.rs b/native/src/layout/flex.rs
new file mode 100644
index 00000000..7a2b0d70
--- /dev/null
+++ b/native/src/layout/flex.rs
@@ -0,0 +1,168 @@
+// This code is heavily inspired by the [`druid`] codebase.
+//
+// [`druid`]: https://github.com/xi-editor/druid
+//
+// Copyright 2018 The xi-editor Authors, Héctor Ramón
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+//     http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+use crate::{
+    layout::{Limits, Node},
+    Align, Element, Size,
+};
+
+#[derive(Debug)]
+pub enum Axis {
+    Horizontal,
+    Vertical,
+}
+
+impl Axis {
+    fn main(&self, size: Size) -> f32 {
+        match self {
+            Axis::Horizontal => size.width,
+            Axis::Vertical => size.height,
+        }
+    }
+
+    fn cross(&self, size: Size) -> f32 {
+        match self {
+            Axis::Horizontal => size.height,
+            Axis::Vertical => size.width,
+        }
+    }
+
+    fn pack(&self, main: f32, cross: f32) -> (f32, f32) {
+        match self {
+            Axis::Horizontal => (main, cross),
+            Axis::Vertical => (cross, main),
+        }
+    }
+}
+
+// TODO: Remove `Message` type parameter
+pub fn resolve<Message, Renderer>(
+    axis: Axis,
+    renderer: &Renderer,
+    limits: &Limits,
+    padding: f32,
+    spacing: f32,
+    align_items: Align,
+    children: &[Element<'_, Message, Renderer>],
+) -> Node
+where
+    Renderer: crate::Renderer,
+{
+    let limits = limits.pad(padding);
+
+    let mut total_non_fill =
+        spacing as f32 * (children.len() as i32 - 1).max(0) as f32;
+    let mut fill_sum = 0;
+    let mut cross = axis.cross(limits.min());
+
+    let mut nodes: Vec<Node> = Vec::with_capacity(children.len());
+    nodes.resize(children.len(), Node::default());
+
+    for (i, child) in children.iter().enumerate() {
+        let fill_factor = match axis {
+            Axis::Horizontal => child.width(),
+            Axis::Vertical => child.height(),
+        }
+        .fill_factor();
+
+        if fill_factor == 0 {
+            let child_limits = Limits::new(Size::ZERO, limits.max());
+
+            let layout = child.layout(renderer, &child_limits);
+            let size = layout.size();
+
+            total_non_fill += axis.main(size);
+            cross = cross.max(axis.cross(size));
+
+            nodes[i] = layout;
+        } else {
+            fill_sum += fill_factor;
+        }
+    }
+
+    let available = axis.main(limits.max());
+    let remaining = (available - total_non_fill).max(0.0);
+
+    for (i, child) in children.iter().enumerate() {
+        let fill_factor = match axis {
+            Axis::Horizontal => child.width(),
+            Axis::Vertical => child.height(),
+        }
+        .fill_factor();
+
+        if fill_factor != 0 {
+            let max_main = remaining * fill_factor as f32 / fill_sum as f32;
+            let min_main = if max_main.is_infinite() {
+                0.0
+            } else {
+                max_main
+            };
+
+            let (min_main, min_cross) =
+                axis.pack(min_main, axis.cross(limits.min()));
+
+            let (max_main, max_cross) =
+                axis.pack(max_main, axis.cross(limits.max()));
+
+            let child_limits = Limits::new(
+                Size::new(min_main, min_cross),
+                Size::new(max_main, max_cross),
+            );
+
+            let layout = child.layout(renderer, &child_limits);
+            cross = cross.max(axis.cross(layout.size()));
+
+            nodes[i] = layout;
+        }
+    }
+
+    let mut main = padding;
+
+    for (i, node) in nodes.iter_mut().enumerate() {
+        if i > 0 {
+            main += spacing;
+        }
+
+        let (x, y) = axis.pack(main, padding);
+
+        node.bounds.x = x;
+        node.bounds.y = y;
+
+        match axis {
+            Axis::Horizontal => {
+                node.align(Align::Start, align_items, Size::new(0.0, cross));
+            }
+            Axis::Vertical => {
+                node.align(align_items, Align::Start, Size::new(cross, 0.0));
+            }
+        }
+
+        let size = node.size();
+
+        main += axis.main(size);
+    }
+
+    let (width, height) = axis.pack(main, cross);
+    let size = limits.resolve(Size::new(width, height));
+
+    let (padding_x, padding_y) = axis.pack(padding, padding * 2.0);
+
+    Node::with_children(
+        Size::new(size.width + padding_x, size.height + padding_y),
+        nodes,
+    )
+}
diff --git a/native/src/layout/limits.rs b/native/src/layout/limits.rs
new file mode 100644
index 00000000..af269acd
--- /dev/null
+++ b/native/src/layout/limits.rs
@@ -0,0 +1,139 @@
+use crate::{Length, Size};
+
+#[derive(Debug, Clone, Copy)]
+pub struct Limits {
+    min: Size,
+    max: Size,
+    fill: Size,
+}
+
+impl Limits {
+    pub const NONE: Limits = Limits {
+        min: Size::ZERO,
+        max: Size::INFINITY,
+        fill: Size::INFINITY,
+    };
+
+    pub fn new(min: Size, max: Size) -> Limits {
+        Limits {
+            min,
+            max,
+            fill: Size::INFINITY,
+        }
+    }
+
+    pub fn min(&self) -> Size {
+        self.min
+    }
+
+    pub fn max(&self) -> Size {
+        self.max
+    }
+
+    pub fn width(mut self, width: Length) -> Limits {
+        match width {
+            Length::Shrink => {
+                self.fill.width = self.min.width;
+            }
+            Length::Fill => {
+                self.fill.width = self.fill.width.min(self.max.width);
+            }
+            Length::Units(units) => {
+                let new_width =
+                    (units as f32).min(self.max.width).max(self.min.width);
+
+                self.min.width = new_width;
+                self.max.width = new_width;
+                self.fill.width = new_width;
+            }
+        }
+
+        self
+    }
+
+    pub fn height(mut self, height: Length) -> Limits {
+        match height {
+            Length::Shrink => {
+                self.fill.height = self.min.height;
+            }
+            Length::Fill => {
+                self.fill.height = self.fill.height.min(self.max.height);
+            }
+            Length::Units(units) => {
+                let new_height =
+                    (units as f32).min(self.max.height).max(self.min.height);
+
+                self.min.height = new_height;
+                self.max.height = new_height;
+                self.fill.height = new_height;
+            }
+        }
+
+        self
+    }
+
+    pub fn min_width(mut self, min_width: u32) -> Limits {
+        self.min.width =
+            self.min.width.max(min_width as f32).min(self.max.width);
+
+        self
+    }
+
+    pub fn max_width(mut self, max_width: u32) -> Limits {
+        self.max.width =
+            self.max.width.min(max_width as f32).max(self.min.width);
+
+        self
+    }
+
+    pub fn max_height(mut self, max_height: u32) -> Limits {
+        self.max.height =
+            self.max.height.min(max_height as f32).max(self.min.height);
+
+        self
+    }
+
+    pub fn pad(&self, padding: f32) -> Limits {
+        self.shrink(Size::new(padding * 2.0, padding * 2.0))
+    }
+
+    pub fn shrink(&self, size: Size) -> Limits {
+        let min = Size::new(
+            (self.min().width - size.width).max(0.0),
+            (self.min().height - size.height).max(0.0),
+        );
+
+        let max = Size::new(
+            (self.max().width - size.width).max(0.0),
+            (self.max().height - size.height).max(0.0),
+        );
+
+        let fill = Size::new(
+            (self.fill.width - size.width).max(0.0),
+            (self.fill.height - size.height).max(0.0),
+        );
+
+        Limits { min, max, fill }
+    }
+
+    pub fn loose(&self) -> Limits {
+        Limits {
+            min: Size::ZERO,
+            max: self.max,
+            fill: self.fill,
+        }
+    }
+
+    pub fn resolve(&self, intrinsic_size: Size) -> Size {
+        Size::new(
+            intrinsic_size
+                .width
+                .min(self.max.width)
+                .max(self.fill.width),
+            intrinsic_size
+                .height
+                .min(self.max.height)
+                .max(self.fill.height),
+        )
+    }
+}
diff --git a/native/src/layout/node.rs b/native/src/layout/node.rs
new file mode 100644
index 00000000..64ebf2d0
--- /dev/null
+++ b/native/src/layout/node.rs
@@ -0,0 +1,64 @@
+use crate::{Align, Rectangle, Size};
+
+#[derive(Debug, Clone, Default)]
+pub struct Node {
+    pub bounds: Rectangle,
+    children: Vec<Node>,
+}
+
+impl Node {
+    pub fn new(size: Size) -> Self {
+        Self::with_children(size, Vec::new())
+    }
+
+    pub fn with_children(size: Size, children: Vec<Node>) -> Self {
+        Node {
+            bounds: Rectangle {
+                x: 0.0,
+                y: 0.0,
+                width: size.width,
+                height: size.height,
+            },
+            children,
+        }
+    }
+
+    pub fn size(&self) -> Size {
+        Size::new(self.bounds.width, self.bounds.height)
+    }
+
+    pub fn bounds(&self) -> Rectangle {
+        self.bounds
+    }
+
+    pub fn children(&self) -> &[Node] {
+        &self.children
+    }
+
+    pub fn align(
+        &mut self,
+        horizontal_alignment: Align,
+        vertical_alignment: Align,
+        space: Size,
+    ) {
+        match horizontal_alignment {
+            Align::Start => {}
+            Align::Center => {
+                self.bounds.x += (space.width - self.bounds.width) / 2.0;
+            }
+            Align::End => {
+                self.bounds.x += space.width - self.bounds.width;
+            }
+        }
+
+        match vertical_alignment {
+            Align::Start => {}
+            Align::Center => {
+                self.bounds.y += (space.height - self.bounds.height) / 2.0;
+            }
+            Align::End => {
+                self.bounds.y += space.height - self.bounds.height;
+            }
+        }
+    }
+}
diff --git a/native/src/lib.rs b/native/src/lib.rs
index 56399e57..a091059e 100644
--- a/native/src/lib.rs
+++ b/native/src/lib.rs
@@ -77,7 +77,7 @@
 //! #
 //! # mod iced_wgpu {
 //! #     use iced_native::{
-//! #         button, text, Button, Text, Node, Point, Rectangle, Style, Color, Layout
+//! #         button, text, layout, Button, Text, Point, Rectangle, Color, Layout, Size
 //! #     };
 //! #
 //! #     pub struct Renderer {}
@@ -87,11 +87,12 @@
 //! #     }
 //! #
 //! #     impl button::Renderer for Renderer {
-//! #         fn node<Message>(
+//! #         fn layout<Message>(
 //! #             &self,
-//! #             _button: &Button<'_, Message, Self>
-//! #         ) -> Node {
-//! #             Node::new(Style::default())
+//! #             _button: &Button<'_, Message, Self>,
+//! #             _limits: &layout::Limits,
+//! #         ) -> layout::Node {
+//! #             layout::Node::new(Size::ZERO)
 //! #         }
 //! #
 //! #         fn draw<Message>(
@@ -103,8 +104,12 @@
 //! #     }
 //! #
 //! #     impl text::Renderer for Renderer {
-//! #         fn node(&self, _text: &Text) -> Node {
-//! #             Node::new(Style::default())
+//! #         fn layout(
+//! #             &self,
+//! #             _text: &Text,
+//! #             _limits: &layout::Limits,
+//! #         ) -> layout::Node {
+//! #             layout::Node::new(Size::ZERO)
 //! #         }
 //! #
 //! #         fn draw(
@@ -199,32 +204,27 @@
 #![deny(unsafe_code)]
 #![deny(rust_2018_idioms)]
 pub mod input;
+pub mod layout;
 pub mod renderer;
 pub mod widget;
 
 mod element;
 mod event;
 mod hasher;
-mod layout;
 mod mouse_cursor;
-mod node;
-mod style;
+mod size;
 mod user_interface;
 
 pub use iced_core::{
-    Align, Background, Color, Justify, Length, Point, Rectangle, Vector,
+    Align, Background, Color, Length, Point, Rectangle, Vector,
 };
 
-#[doc(no_inline)]
-pub use stretch::{geometry::Size, number::Number};
-
 pub use element::Element;
 pub use event::Event;
 pub use hasher::Hasher;
 pub use layout::Layout;
 pub use mouse_cursor::MouseCursor;
-pub use node::Node;
 pub use renderer::Renderer;
-pub use style::Style;
+pub use size::Size;
 pub use user_interface::{Cache, UserInterface};
 pub use widget::*;
diff --git a/native/src/node.rs b/native/src/node.rs
deleted file mode 100644
index 1db10d7f..00000000
--- a/native/src/node.rs
+++ /dev/null
@@ -1,60 +0,0 @@
-use stretch::node;
-
-use crate::{Number, Size, Style};
-
-/// The visual requirements of a [`Widget`] and its children.
-///
-/// When there have been changes and the [`Layout`] needs to be recomputed, the
-/// runtime obtains a [`Node`] by calling [`Widget::node`].
-///
-/// [`Style`]: struct.Style.html
-/// [`Widget`]: widget/trait.Widget.html
-/// [`Node`]: struct.Node.html
-/// [`Widget::node`]: widget/trait.Widget.html#tymethod.node
-/// [`Layout`]: struct.Layout.html
-#[derive(Debug)]
-pub struct Node(pub(crate) node::Node);
-
-impl Node {
-    /// Creates a new [`Node`] with the given [`Style`].
-    ///
-    /// [`Node`]: struct.Node.html
-    /// [`Style`]: struct.Style.html
-    pub fn new(style: Style) -> Node {
-        Self::with_children(style, Vec::new())
-    }
-
-    /// Creates a new [`Node`] with the given [`Style`] and a measure function.
-    ///
-    /// This type of node cannot have any children.
-    ///
-    /// You should use this when your [`Widget`] can adapt its contents to the
-    /// size of its container. The measure function will receive the container
-    /// size as a parameter and must compute the size of the [`Node`] inside
-    /// the given bounds (if the `Number` for a dimension is `Undefined` it
-    /// means that it has no boundary).
-    ///
-    /// [`Node`]: struct.Node.html
-    /// [`Style`]: struct.Style.html
-    /// [`Widget`]: widget/trait.Widget.html
-    pub fn with_measure<F>(style: Style, measure: F) -> Node
-    where
-        F: 'static + Fn(Size<Number>) -> Size<f32>,
-    {
-        Node(node::Node::new_leaf(
-            style.0,
-            Box::new(move |size| Ok(measure(size))),
-        ))
-    }
-
-    /// Creates a new [`Node`] with the given [`Style`] and children.
-    ///
-    /// [`Node`]: struct.Node.html
-    /// [`Style`]: struct.Style.html
-    pub fn with_children(style: Style, children: Vec<Node>) -> Node {
-        Node(node::Node::new(
-            style.0,
-            children.iter().map(|c| &c.0).collect(),
-        ))
-    }
-}
diff --git a/native/src/renderer.rs b/native/src/renderer.rs
index 5963d577..833de571 100644
--- a/native/src/renderer.rs
+++ b/native/src/renderer.rs
@@ -26,6 +26,15 @@ mod windowed;
 pub use debugger::Debugger;
 pub use windowed::{Target, Windowed};
 
-pub trait Renderer {
+use crate::{layout, Element};
+
+pub trait Renderer: Sized {
     type Output;
+
+    fn layout<'a, Message>(
+        &mut self,
+        element: &Element<'a, Message, Self>,
+    ) -> layout::Node {
+        element.layout(self, &layout::Limits::NONE)
+    }
 }
diff --git a/native/src/size.rs b/native/src/size.rs
new file mode 100644
index 00000000..bd909292
--- /dev/null
+++ b/native/src/size.rs
@@ -0,0 +1,25 @@
+use std::f32;
+
+#[derive(Debug, Clone, Copy, PartialEq)]
+pub struct Size {
+    /// The width.
+    pub width: f32,
+    /// The height.
+    pub height: f32,
+}
+
+impl Size {
+    pub const ZERO: Size = Size::new(0., 0.);
+    pub const INFINITY: Size = Size::new(f32::INFINITY, f32::INFINITY);
+
+    pub const fn new(width: f32, height: f32) -> Self {
+        Size { width, height }
+    }
+
+    pub fn pad(&self, padding: f32) -> Self {
+        Size {
+            width: self.width + padding * 2.0,
+            height: self.height + padding * 2.0,
+        }
+    }
+}
diff --git a/native/src/style.rs b/native/src/style.rs
deleted file mode 100644
index 70a7ff74..00000000
--- a/native/src/style.rs
+++ /dev/null
@@ -1,156 +0,0 @@
-use crate::{Align, Justify, Length};
-
-use stretch::style;
-
-/// The appearance of a [`Node`].
-///
-/// [`Node`]: struct.Node.html
-#[derive(Debug, Clone, Copy)]
-pub struct Style(pub(crate) style::Style);
-
-impl Default for Style {
-    fn default() -> Style {
-        Style::new()
-    }
-}
-
-impl Style {
-    /// Creates a new [`Style`].
-    ///
-    /// [`Style`]: struct.Style.html
-    pub fn new() -> Self {
-        Style(style::Style {
-            align_items: style::AlignItems::FlexStart,
-            justify_content: style::JustifyContent::FlexStart,
-            ..style::Style::default()
-        })
-    }
-
-    /// Defines the width of a [`Node`].
-    ///
-    /// [`Node`]: struct.Node.html
-    pub fn width(mut self, width: Length) -> Self {
-        self.0.size.width = into_dimension(width);
-        self
-    }
-
-    /// Defines the height of a [`Node`].
-    ///
-    /// [`Node`]: struct.Node.html
-    pub fn height(mut self, height: Length) -> Self {
-        self.0.size.height = into_dimension(height);
-        self
-    }
-
-    /// Defines the minimum width of a [`Node`].
-    ///
-    /// [`Node`]: struct.Node.html
-    pub fn min_width(mut self, min_width: Length) -> Self {
-        self.0.min_size.width = into_dimension(min_width);
-        self
-    }
-
-    /// Defines the maximum width of a [`Node`].
-    ///
-    /// [`Node`]: struct.Node.html
-    pub fn max_width(mut self, max_width: Length) -> Self {
-        self.0.max_size.width = into_dimension(max_width);
-        self
-    }
-
-    /// Defines the minimum height of a [`Node`].
-    ///
-    /// [`Node`]: struct.Node.html
-    pub fn min_height(mut self, min_height: Length) -> Self {
-        self.0.min_size.height = into_dimension(min_height);
-        self
-    }
-
-    /// Defines the maximum height of a [`Node`].
-    ///
-    /// [`Node`]: struct.Node.html
-    pub fn max_height(mut self, max_height: Length) -> Self {
-        self.0.max_size.height = into_dimension(max_height);
-        self
-    }
-
-    pub fn align_items(mut self, align: Align) -> Self {
-        self.0.align_items = into_align_items(align);
-        self
-    }
-
-    pub fn justify_content(mut self, justify: Justify) -> Self {
-        self.0.justify_content = into_justify_content(justify);
-        self
-    }
-
-    /// Sets the alignment of a [`Node`].
-    ///
-    /// If the [`Node`] is inside a...
-    ///
-    ///   * [`Column`], this setting will affect its __horizontal__ alignment.
-    ///   * [`Row`], this setting will affect its __vertical__ alignment.
-    ///
-    /// [`Node`]: struct.Node.html
-    /// [`Column`]: widget/struct.Column.html
-    /// [`Row`]: widget/struct.Row.html
-    pub fn align_self(mut self, align: Option<Align>) -> Self {
-        self.0.align_self = match align {
-            Some(align) => into_align_self(align),
-            None => stretch::style::AlignSelf::Auto,
-        };
-
-        self
-    }
-
-    /// Sets the padding of a [`Node`].
-    ///
-    /// [`Node`]: struct.Node.html
-    pub fn padding(mut self, units: u16) -> Self {
-        self.0.padding = stretch::geometry::Rect {
-            start: style::Dimension::Points(units as f32),
-            end: style::Dimension::Points(units as f32),
-            top: style::Dimension::Points(units as f32),
-            bottom: style::Dimension::Points(units as f32),
-        };
-
-        self
-    }
-}
-
-fn into_dimension(length: Length) -> style::Dimension {
-    match length {
-        Length::Shrink => style::Dimension::Undefined,
-        Length::Fill => style::Dimension::Percent(1.0),
-        Length::Units(units) => style::Dimension::Points(units as f32),
-    }
-}
-
-fn into_align_items(align: Align) -> style::AlignItems {
-    match align {
-        Align::Start => style::AlignItems::FlexStart,
-        Align::Center => style::AlignItems::Center,
-        Align::End => style::AlignItems::FlexEnd,
-        Align::Stretch => style::AlignItems::Stretch,
-    }
-}
-
-fn into_align_self(align: Align) -> style::AlignSelf {
-    match align {
-        Align::Start => style::AlignSelf::FlexStart,
-        Align::Center => style::AlignSelf::Center,
-        Align::End => style::AlignSelf::FlexEnd,
-        Align::Stretch => style::AlignSelf::Stretch,
-    }
-}
-
-fn into_justify_content(justify: Justify) -> style::JustifyContent {
-    match justify {
-        Justify::Start => style::JustifyContent::FlexStart,
-        Justify::Center => style::JustifyContent::Center,
-        Justify::End => style::JustifyContent::FlexEnd,
-        Justify::SpaceBetween => style::JustifyContent::SpaceBetween,
-        Justify::SpaceAround => style::JustifyContent::SpaceAround,
-        Justify::SpaceEvenly => style::JustifyContent::SpaceEvenly,
-    }
-}
diff --git a/native/src/user_interface.rs b/native/src/user_interface.rs
index 0760dd7e..f031b090 100644
--- a/native/src/user_interface.rs
+++ b/native/src/user_interface.rs
@@ -1,7 +1,6 @@
-use crate::{input::mouse, Element, Event, Layout, Point};
+use crate::{input::mouse, layout, Element, Event, Layout, Point, Size};
 
 use std::hash::Hasher;
-use stretch::{geometry, result};
 
 /// A set of interactive graphical elements with a specific [`Layout`].
 ///
@@ -15,7 +14,7 @@ use stretch::{geometry, result};
 pub struct UserInterface<'a, Message, Renderer> {
     hash: u64,
     root: Element<'a, Message, Renderer>,
-    layout: result::Layout,
+    layout: layout::Node,
     cursor_position: Point,
 }
 
@@ -98,7 +97,7 @@ where
     pub fn build<E: Into<Element<'a, Message, Renderer>>>(
         root: E,
         cache: Cache,
-        renderer: &Renderer,
+        renderer: &mut Renderer,
     ) -> Self {
         let root = root.into();
 
@@ -110,7 +109,11 @@ where
         let layout = if hash == cache.hash {
             cache.layout
         } else {
-            root.compute_layout(renderer)
+            let layout_start = std::time::Instant::now();
+            let layout = renderer.layout(&root);
+            dbg!(std::time::Instant::now() - layout_start);
+
+            layout
         };
 
         UserInterface {
@@ -326,7 +329,7 @@ where
 #[derive(Debug, Clone)]
 pub struct Cache {
     hash: u64,
-    layout: result::Layout,
+    layout: layout::Node,
     cursor_position: Point,
 }
 
@@ -339,16 +342,9 @@ impl Cache {
     /// [`Cache`]: struct.Cache.html
     /// [`UserInterface`]: struct.UserInterface.html
     pub fn new() -> Cache {
-        use crate::{Node, Style};
-
-        let empty_node = Node::new(Style::default());
-
         Cache {
             hash: 0,
-            layout: empty_node
-                .0
-                .compute_layout(geometry::Size::undefined())
-                .unwrap(),
+            layout: layout::Node::new(Size::new(0.0, 0.0)),
             cursor_position: Point::new(-1.0, -1.0),
         }
     }
diff --git a/native/src/widget.rs b/native/src/widget.rs
index 01f5c92e..9010b06f 100644
--- a/native/src/widget.rs
+++ b/native/src/widget.rs
@@ -31,6 +31,8 @@ pub mod slider;
 pub mod text;
 pub mod text_input;
 
+mod container;
+
 #[doc(no_inline)]
 pub use button::Button;
 #[doc(no_inline)]
@@ -38,6 +40,8 @@ pub use checkbox::Checkbox;
 #[doc(no_inline)]
 pub use column::Column;
 #[doc(no_inline)]
+pub use container::Container;
+#[doc(no_inline)]
 pub use image::Image;
 #[doc(no_inline)]
 pub use radio::Radio;
@@ -52,7 +56,7 @@ pub use text::Text;
 #[doc(no_inline)]
 pub use text_input::TextInput;
 
-use crate::{Event, Hasher, Layout, Node, Point};
+use crate::{layout, Event, Hasher, Layout, Length, Point};
 
 /// A component that displays information and allows interaction.
 ///
@@ -73,7 +77,19 @@ where
     /// [`Node`]: ../struct.Node.html
     /// [`Widget`]: trait.Widget.html
     /// [`Layout`]: ../struct.Layout.html
-    fn node(&self, renderer: &Renderer) -> Node;
+    fn layout(
+        &self,
+        renderer: &Renderer,
+        limits: &layout::Limits,
+    ) -> layout::Node;
+
+    fn width(&self) -> Length {
+        Length::Shrink
+    }
+
+    fn height(&self) -> Length {
+        Length::Shrink
+    }
 
     /// Draws the [`Widget`] using the associated `Renderer`.
     ///
diff --git a/native/src/widget/button.rs b/native/src/widget/button.rs
index 31dd6fcc..15beaeba 100644
--- a/native/src/widget/button.rs
+++ b/native/src/widget/button.rs
@@ -7,7 +7,7 @@
 //! [`Class`]: enum.Class.html
 
 use crate::input::{mouse, ButtonState};
-use crate::{Element, Event, Hasher, Layout, Node, Point, Widget};
+use crate::{layout, Element, Event, Hasher, Layout, Point, Widget};
 use std::hash::Hash;
 
 pub use iced_core::button::State;
@@ -21,8 +21,12 @@ where
     Renderer: self::Renderer,
     Message: Clone + std::fmt::Debug,
 {
-    fn node(&self, renderer: &Renderer) -> Node {
-        renderer.node(&self)
+    fn layout(
+        &self,
+        renderer: &Renderer,
+        limits: &layout::Limits,
+    ) -> layout::Node {
+        renderer.layout(&self, limits)
     }
 
     fn on_event(
@@ -74,7 +78,6 @@ where
 
     fn hash_layout(&self, state: &mut Hasher) {
         self.width.hash(state);
-        self.align_self.hash(state);
         self.content.hash_layout(state);
     }
 }
@@ -91,7 +94,11 @@ pub trait Renderer: crate::Renderer + Sized {
     ///
     /// [`Node`]: ../../struct.Node.html
     /// [`Button`]: struct.Button.html
-    fn node<Message>(&self, button: &Button<'_, Message, Self>) -> Node;
+    fn layout<Message>(
+        &self,
+        button: &Button<'_, Message, Self>,
+        limits: &layout::Limits,
+    ) -> layout::Node;
 
     /// Draws a [`Button`].
     ///
diff --git a/native/src/widget/checkbox.rs b/native/src/widget/checkbox.rs
index b8053238..a7040e02 100644
--- a/native/src/widget/checkbox.rs
+++ b/native/src/widget/checkbox.rs
@@ -2,7 +2,7 @@
 use std::hash::Hash;
 
 use crate::input::{mouse, ButtonState};
-use crate::{Element, Event, Hasher, Layout, Node, Point, Widget};
+use crate::{layout, Element, Event, Hasher, Layout, Point, Widget};
 
 pub use iced_core::Checkbox;
 
@@ -10,8 +10,12 @@ impl<Message, Renderer> Widget<Message, Renderer> for Checkbox<Message>
 where
     Renderer: self::Renderer,
 {
-    fn node(&self, renderer: &Renderer) -> Node {
-        renderer.node(&self)
+    fn layout(
+        &self,
+        renderer: &Renderer,
+        limits: &layout::Limits,
+    ) -> layout::Node {
+        renderer.layout(&self, limits)
     }
 
     fn on_event(
@@ -63,7 +67,11 @@ pub trait Renderer: crate::Renderer {
     ///
     /// [`Node`]: ../../struct.Node.html
     /// [`Checkbox`]: struct.Checkbox.html
-    fn node<Message>(&self, checkbox: &Checkbox<Message>) -> Node;
+    fn layout<Message>(
+        &self,
+        checkbox: &Checkbox<Message>,
+        limits: &layout::Limits,
+    ) -> layout::Node;
 
     /// Draws a [`Checkbox`].
     ///
diff --git a/native/src/widget/column.rs b/native/src/widget/column.rs
index 086d05ef..7e7156a0 100644
--- a/native/src/widget/column.rs
+++ b/native/src/widget/column.rs
@@ -1,6 +1,6 @@
 use std::hash::Hash;
 
-use crate::{Element, Event, Hasher, Layout, Node, Point, Style, Widget};
+use crate::{layout, Element, Event, Hasher, Layout, Length, Point, Widget};
 
 /// A container that distributes its contents vertically.
 pub type Column<'a, Message, Renderer> =
@@ -11,42 +11,30 @@ impl<'a, Message, Renderer> Widget<Message, Renderer>
 where
     Renderer: self::Renderer,
 {
-    fn node(&self, renderer: &Renderer) -> Node {
-        let mut children: Vec<Node> = self
-            .children
-            .iter()
-            .map(|child| {
-                let mut node = child.widget.node(renderer);
-
-                let mut style = node.0.style();
-                style.margin.bottom =
-                    stretch::style::Dimension::Points(f32::from(self.spacing));
-
-                node.0.set_style(style);
-                node
-            })
-            .collect();
-
-        if let Some(node) = children.last_mut() {
-            let mut style = node.0.style();
-            style.margin.bottom = stretch::style::Dimension::Undefined;
-
-            node.0.set_style(style);
-        }
+    fn width(&self) -> Length {
+        self.width
+    }
 
-        let mut style = Style::default()
-            .width(self.width)
-            .height(self.height)
+    fn layout(
+        &self,
+        renderer: &Renderer,
+        limits: &layout::Limits,
+    ) -> layout::Node {
+        let limits = limits
             .max_width(self.max_width)
             .max_height(self.max_height)
-            .padding(self.padding)
-            .align_self(self.align_self)
-            .align_items(self.align_items)
-            .justify_content(self.justify_content);
-
-        style.0.flex_direction = stretch::style::FlexDirection::Column;
-
-        Node::with_children(style, children)
+            .width(self.width)
+            .height(self.height);
+
+        layout::flex::resolve(
+            layout::flex::Axis::Vertical,
+            renderer,
+            &limits,
+            self.padding as f32,
+            self.spacing as f32,
+            self.align_items,
+            &self.children,
+        )
     }
 
     fn on_event(
@@ -85,9 +73,7 @@ where
         self.height.hash(state);
         self.max_width.hash(state);
         self.max_height.hash(state);
-        self.align_self.hash(state);
         self.align_items.hash(state);
-        self.justify_content.hash(state);
         self.spacing.hash(state);
 
         for child in &self.children {
diff --git a/native/src/widget/container.rs b/native/src/widget/container.rs
new file mode 100644
index 00000000..c616db2a
--- /dev/null
+++ b/native/src/widget/container.rs
@@ -0,0 +1,90 @@
+use std::hash::Hash;
+
+use crate::{layout, Element, Event, Hasher, Layout, Length, Point, Widget};
+
+/// A container that distributes its contents vertically.
+pub type Container<'a, Message, Renderer> =
+    iced_core::Container<Element<'a, Message, Renderer>>;
+
+impl<'a, Message, Renderer> Widget<Message, Renderer>
+    for Container<'a, Message, Renderer>
+where
+    Renderer: crate::Renderer,
+{
+    fn width(&self) -> Length {
+        self.width
+    }
+
+    fn layout(
+        &self,
+        renderer: &Renderer,
+        limits: &layout::Limits,
+    ) -> layout::Node {
+        let limits = limits
+            .loose()
+            .max_width(self.max_width)
+            .max_height(self.max_height)
+            .width(self.width)
+            .height(self.height);
+
+        let mut content = self.content.layout(renderer, &limits);
+        let size = limits.resolve(content.size());
+
+        content.align(self.horizontal_alignment, self.vertical_alignment, size);
+
+        layout::Node::with_children(size, vec![content])
+    }
+
+    fn on_event(
+        &mut self,
+        event: Event,
+        layout: Layout<'_>,
+        cursor_position: Point,
+        messages: &mut Vec<Message>,
+        renderer: &Renderer,
+    ) {
+        self.content.widget.on_event(
+            event,
+            layout.children().next().unwrap(),
+            cursor_position,
+            messages,
+            renderer,
+        )
+    }
+
+    fn draw(
+        &self,
+        renderer: &mut Renderer,
+        layout: Layout<'_>,
+        cursor_position: Point,
+    ) -> Renderer::Output {
+        self.content.draw(
+            renderer,
+            layout.children().next().unwrap(),
+            cursor_position,
+        )
+    }
+
+    fn hash_layout(&self, state: &mut Hasher) {
+        0.hash(state);
+        self.width.hash(state);
+        self.height.hash(state);
+        self.max_width.hash(state);
+        self.max_height.hash(state);
+
+        self.content.hash_layout(state);
+    }
+}
+
+impl<'a, Message, Renderer> From<Container<'a, Message, Renderer>>
+    for Element<'a, Message, Renderer>
+where
+    Renderer: 'a + crate::Renderer,
+    Message: 'static,
+{
+    fn from(
+        column: Container<'a, Message, Renderer>,
+    ) -> Element<'a, Message, Renderer> {
+        Element::new(column)
+    }
+}
diff --git a/native/src/widget/image.rs b/native/src/widget/image.rs
index 6255a7b5..b2541b87 100644
--- a/native/src/widget/image.rs
+++ b/native/src/widget/image.rs
@@ -1,6 +1,6 @@
 //! Display images in your user interface.
 
-use crate::{Element, Hasher, Layout, Node, Point, Widget};
+use crate::{layout, Element, Hasher, Layout, Point, Widget};
 
 use std::hash::Hash;
 
@@ -10,8 +10,12 @@ impl<Message, Renderer> Widget<Message, Renderer> for Image
 where
     Renderer: self::Renderer,
 {
-    fn node(&self, renderer: &Renderer) -> Node {
-        renderer.node(&self)
+    fn layout(
+        &self,
+        renderer: &Renderer,
+        limits: &layout::Limits,
+    ) -> layout::Node {
+        renderer.layout(&self, limits)
     }
 
     fn draw(
@@ -26,7 +30,6 @@ where
     fn hash_layout(&self, state: &mut Hasher) {
         self.width.hash(state);
         self.height.hash(state);
-        self.align_self.hash(state);
     }
 }
 
@@ -44,7 +47,7 @@ pub trait Renderer: crate::Renderer {
     ///
     /// [`Node`]: ../../struct.Node.html
     /// [`Image`]: struct.Image.html
-    fn node(&self, image: &Image) -> Node;
+    fn layout(&self, image: &Image, limits: &layout::Limits) -> layout::Node;
 
     /// Draws an [`Image`].
     ///
diff --git a/native/src/widget/radio.rs b/native/src/widget/radio.rs
index 626e6ffc..b68919e5 100644
--- a/native/src/widget/radio.rs
+++ b/native/src/widget/radio.rs
@@ -1,6 +1,6 @@
 //! Create choices using radio buttons.
 use crate::input::{mouse, ButtonState};
-use crate::{Element, Event, Hasher, Layout, Node, Point, Widget};
+use crate::{layout, Element, Event, Hasher, Layout, Length, Point, Widget};
 
 use std::hash::Hash;
 
@@ -11,8 +11,16 @@ where
     Renderer: self::Renderer,
     Message: Clone + std::fmt::Debug,
 {
-    fn node(&self, renderer: &Renderer) -> Node {
-        renderer.node(&self)
+    fn width(&self) -> Length {
+        Length::Fill
+    }
+
+    fn layout(
+        &self,
+        renderer: &Renderer,
+        limits: &layout::Limits,
+    ) -> layout::Node {
+        renderer.layout(&self, limits)
     }
 
     fn on_event(
@@ -62,7 +70,11 @@ pub trait Renderer: crate::Renderer {
     ///
     /// [`Node`]: ../../struct.Node.html
     /// [`Radio`]: struct.Radio.html
-    fn node<Message>(&self, radio: &Radio<Message>) -> Node;
+    fn layout<Message>(
+        &self,
+        radio: &Radio<Message>,
+        limits: &layout::Limits,
+    ) -> layout::Node;
 
     /// Draws a [`Radio`] button.
     ///
diff --git a/native/src/widget/row.rs b/native/src/widget/row.rs
index 7dbfb92a..132479fd 100644
--- a/native/src/widget/row.rs
+++ b/native/src/widget/row.rs
@@ -1,6 +1,6 @@
 use std::hash::Hash;
 
-use crate::{Element, Event, Hasher, Layout, Node, Point, Style, Widget};
+use crate::{layout, Element, Event, Hasher, Layout, Length, Point, Widget};
 
 /// A container that distributes its contents horizontally.
 pub type Row<'a, Message, Renderer> =
@@ -11,42 +11,30 @@ impl<'a, Message, Renderer> Widget<Message, Renderer>
 where
     Renderer: self::Renderer,
 {
-    fn node(&self, renderer: &Renderer) -> Node {
-        let mut children: Vec<Node> = self
-            .children
-            .iter()
-            .map(|child| {
-                let mut node = child.widget.node(renderer);
-
-                let mut style = node.0.style();
-                style.margin.end =
-                    stretch::style::Dimension::Points(f32::from(self.spacing));
-
-                node.0.set_style(style);
-                node
-            })
-            .collect();
-
-        if let Some(node) = children.last_mut() {
-            let mut style = node.0.style();
-            style.margin.end = stretch::style::Dimension::Undefined;
-
-            node.0.set_style(style);
-        }
+    fn width(&self) -> Length {
+        self.width
+    }
 
-        let mut style = Style::default()
-            .width(self.width)
-            .height(self.height)
+    fn layout(
+        &self,
+        renderer: &Renderer,
+        limits: &layout::Limits,
+    ) -> layout::Node {
+        let limits = limits
             .max_width(self.max_width)
             .max_height(self.max_height)
-            .padding(self.padding)
-            .align_self(self.align_self)
-            .align_items(self.align_items)
-            .justify_content(self.justify_content);
-
-        style.0.flex_direction = stretch::style::FlexDirection::Row;
-
-        Node::with_children(style, children)
+            .width(self.width)
+            .height(self.height);
+
+        layout::flex::resolve(
+            layout::flex::Axis::Horizontal,
+            renderer,
+            &limits,
+            self.padding as f32,
+            self.spacing as f32,
+            self.align_items,
+            &self.children,
+        )
     }
 
     fn on_event(
@@ -85,9 +73,7 @@ where
         self.height.hash(state);
         self.max_width.hash(state);
         self.max_height.hash(state);
-        self.align_self.hash(state);
         self.align_items.hash(state);
-        self.justify_content.hash(state);
         self.spacing.hash(state);
         self.spacing.hash(state);
 
diff --git a/native/src/widget/scrollable.rs b/native/src/widget/scrollable.rs
index de4c749c..091dac47 100644
--- a/native/src/widget/scrollable.rs
+++ b/native/src/widget/scrollable.rs
@@ -1,11 +1,13 @@
 use crate::{
     column,
     input::{mouse, ButtonState},
-    Element, Event, Hasher, Layout, Node, Point, Rectangle, Style, Widget,
+    layout, Element, Event, Hasher, Layout, Length, Point, Rectangle, Size,
+    Widget,
 };
 
 pub use iced_core::scrollable::State;
 
+use std::f32;
 use std::hash::Hash;
 
 /// A scrollable [`Column`].
@@ -19,26 +21,25 @@ impl<'a, Message, Renderer> Widget<Message, Renderer>
 where
     Renderer: self::Renderer + column::Renderer,
 {
-    fn node(&self, renderer: &Renderer) -> Node {
-        let mut content = self.content.node(renderer);
-
-        {
-            let mut style = content.0.style();
-            style.flex_shrink = 0.0;
-
-            content.0.set_style(style);
-        }
-
-        let mut style = Style::default()
-            .width(self.content.width)
-            .max_width(self.content.max_width)
-            .height(self.height)
+    fn layout(
+        &self,
+        renderer: &Renderer,
+        limits: &layout::Limits,
+    ) -> layout::Node {
+        let limits = limits
             .max_height(self.max_height)
-            .align_self(self.align_self);
+            .width(Length::Fill)
+            .height(self.height);
+
+        let child_limits = layout::Limits::new(
+            Size::new(limits.min().width, 0.0),
+            Size::new(limits.max().width, f32::INFINITY),
+        );
 
-        style.0.flex_direction = stretch::style::FlexDirection::Column;
+        let content = self.content.layout(renderer, &child_limits);
+        let size = limits.resolve(content.size());
 
-        Node::with_children(style, vec![content])
+        layout::Node::with_children(size, vec![content])
     }
 
     fn on_event(
@@ -167,7 +168,6 @@ where
 
         self.height.hash(state);
         self.max_height.hash(state);
-        self.align_self.hash(state);
 
         self.content.hash_layout(state)
     }
diff --git a/native/src/widget/slider.rs b/native/src/widget/slider.rs
index be2b9b22..3a998c40 100644
--- a/native/src/widget/slider.rs
+++ b/native/src/widget/slider.rs
@@ -7,7 +7,7 @@
 use std::hash::Hash;
 
 use crate::input::{mouse, ButtonState};
-use crate::{Element, Event, Hasher, Layout, Node, Point, Widget};
+use crate::{layout, Element, Event, Hasher, Layout, Length, Point, Widget};
 
 pub use iced_core::slider::*;
 
@@ -15,8 +15,16 @@ impl<'a, Message, Renderer> Widget<Message, Renderer> for Slider<'a, Message>
 where
     Renderer: self::Renderer,
 {
-    fn node(&self, renderer: &Renderer) -> Node {
-        renderer.node(&self)
+    fn width(&self) -> Length {
+        self.width
+    }
+
+    fn layout(
+        &self,
+        renderer: &Renderer,
+        limits: &layout::Limits,
+    ) -> layout::Node {
+        renderer.layout(&self, limits)
     }
 
     fn on_event(
@@ -93,7 +101,11 @@ pub trait Renderer: crate::Renderer {
     ///
     /// [`Node`]: ../../struct.Node.html
     /// [`Radio`]: struct.Radio.html
-    fn node<Message>(&self, slider: &Slider<'_, Message>) -> Node;
+    fn layout<Message>(
+        &self,
+        slider: &Slider<'_, Message>,
+        limits: &layout::Limits,
+    ) -> layout::Node;
 
     /// Draws a [`Slider`].
     ///
diff --git a/native/src/widget/text.rs b/native/src/widget/text.rs
index e389e1d9..10d892a3 100644
--- a/native/src/widget/text.rs
+++ b/native/src/widget/text.rs
@@ -1,5 +1,5 @@
 //! Write some text for your users to read.
-use crate::{Element, Hasher, Layout, Node, Point, Widget};
+use crate::{layout, Element, Hasher, Layout, Length, Point, Widget};
 
 use std::hash::Hash;
 
@@ -9,8 +9,16 @@ impl<Message, Renderer> Widget<Message, Renderer> for Text
 where
     Renderer: self::Renderer,
 {
-    fn node(&self, renderer: &Renderer) -> Node {
-        renderer.node(&self)
+    fn width(&self) -> Length {
+        self.width
+    }
+
+    fn layout(
+        &self,
+        renderer: &Renderer,
+        limits: &layout::Limits,
+    ) -> layout::Node {
+        renderer.layout(&self, limits)
     }
 
     fn draw(
@@ -49,7 +57,7 @@ pub trait Renderer: crate::Renderer {
     /// [`Style`]: ../../struct.Style.html
     /// [`Text`]: struct.Text.html
     /// [`Node::with_measure`]: ../../struct.Node.html#method.with_measure
-    fn node(&self, text: &Text) -> Node;
+    fn layout(&self, text: &Text, limits: &layout::Limits) -> layout::Node;
 
     /// Draws a [`Text`] fragment.
     ///
diff --git a/native/src/widget/text_input.rs b/native/src/widget/text_input.rs
index d9837b61..7e81e257 100644
--- a/native/src/widget/text_input.rs
+++ b/native/src/widget/text_input.rs
@@ -1,6 +1,6 @@
 use crate::{
     input::{keyboard, mouse, ButtonState},
-    Element, Event, Hasher, Layout, Length, Node, Point, Rectangle, Style,
+    layout, Element, Event, Hasher, Layout, Length, Point, Rectangle, Size,
     Widget,
 };
 
@@ -11,19 +11,24 @@ where
     Renderer: self::Renderer,
     Message: Clone + std::fmt::Debug,
 {
-    fn node(&self, renderer: &Renderer) -> Node {
-        let text_bounds =
-            Node::new(Style::default().width(Length::Fill).height(
-                Length::Units(self.size.unwrap_or(renderer.default_size())),
-            ));
-
-        Node::with_children(
-            Style::default()
-                .width(self.width)
-                .max_width(self.width)
-                .padding(self.padding),
-            vec![text_bounds],
-        )
+    fn layout(
+        &self,
+        renderer: &Renderer,
+        limits: &layout::Limits,
+    ) -> layout::Node {
+        let padding = self.padding as f32;
+        let text_size = self.size.unwrap_or(renderer.default_size());
+
+        let limits = limits
+            .pad(padding)
+            .width(self.width)
+            .height(Length::Units(text_size));
+
+        let mut text = layout::Node::new(limits.resolve(Size::ZERO));
+        text.bounds.x = padding;
+        text.bounds.y = padding;
+
+        layout::Node::with_children(text.size().pad(padding), vec![text])
     }
 
     fn on_event(