Optimise layout performance

examples/modal/src/main.rs

@@ -276,7 +276,7 @@ mod modal {
             cursor_position: Point,
             viewport: &Rectangle,
         ) {
-            self.base.as_widget().draw(
+            self.base.as_widget_mut().draw(
                 &state.children[0],
                 renderer,
                 theme,
@@ -424,7 +424,7 @@ mod modal {
                 },
             );
 
-            self.content.as_widget().draw(
+            self.content.as_widget_mut().draw(
                 self.tree,
                 renderer,
                 theme,

examples/toast/src/main.rs

@@ -414,7 +414,7 @@ mod toast {
             cursor_position: Point,
             viewport: &Rectangle,
         ) {
-            self.content.as_widget().draw(
+            self.content.as_widget_mut().draw(
                 &state.children[0],
                 renderer,
                 theme,
@@ -597,7 +597,7 @@ mod toast {
                 .zip(self.state.iter())
                 .zip(layout.children())
             {
-                child.as_widget().draw(
+                child.as_widget_mut().draw(
                     state,
                     renderer,
                     theme,

graphics/src/renderer.rs

@@ -55,10 +55,10 @@ where
 
     fn layout<Message>(
         &mut self,
-        element: &Element<'_, Message, Self>,
+        element: &mut Element<'_, Message, Self>,
         limits: &layout::Limits,
     ) -> layout::Node {
-        let layout = element.as_widget().layout(self, limits);
+        let layout = element.as_widget_mut().layout(self, limits);
 
         self.backend.trim_measurements();
 

lazy/src/component.rs

@@ -333,7 +333,7 @@ where
         viewport: &Rectangle,
     ) {
         self.with_element(|element| {
-            element.as_widget().draw(
+            element.as_widget_mut().draw(
                 &tree.children[0],
                 renderer,
                 theme,

lazy/src/lazy.rs

@@ -213,7 +213,7 @@ where
         viewport: &Rectangle,
     ) {
         self.with_element(|element| {
-            element.as_widget().draw(
+            element.as_widget_mut().draw(
                 &tree.children[0],
                 renderer,
                 theme,

lazy/src/responsive.rs

@@ -216,7 +216,7 @@ where
             layout,
             &self.view,
             |tree, renderer, layout, element| {
-                element.as_widget().draw(
+                element.as_widget_mut().draw(
                     tree,
                     renderer,
                     theme,

native/src/element.rs

@@ -6,7 +6,7 @@ use crate::renderer;
 use crate::widget;
 use crate::widget::tree::{self, Tree};
 use crate::{
-    Clipboard, Color, Layout, Length, Point, Rectangle, Shell, Widget,
+    Clipboard, Color, Layout, Length, Point, Rectangle, Shell, Size, Widget,
 };
 
 use std::any::Any;
@@ -280,13 +280,21 @@ where
     }
 
     fn layout(
-        &self,
+        &mut self,
         renderer: &Renderer,
         limits: &layout::Limits,
     ) -> layout::Node {
         self.widget.layout(renderer, limits)
     }
 
+    fn measure(
+        &mut self,
+        renderer: &Renderer,
+        limits: &layout::Limits,
+    ) -> Size {
+        self.widget.measure(renderer, limits)
+    }
+
     fn operate(
         &self,
         tree: &mut Tree,
@@ -377,7 +385,7 @@ where
     }
 
     fn draw(
-        &self,
+        &mut self,
         tree: &Tree,
         renderer: &mut Renderer,
         theme: &Renderer::Theme,
@@ -472,7 +480,7 @@ where
     }
 
     fn layout(
-        &self,
+        &mut self,
         renderer: &Renderer,
         limits: &layout::Limits,
     ) -> layout::Node {
@@ -513,7 +521,7 @@ where
     }
 
     fn draw(
-        &self,
+        &mut self,
         state: &Tree,
         renderer: &mut Renderer,
         theme: &Renderer::Theme,

native/src/layout/flex.rs

@@ -54,6 +54,15 @@ impl Axis {
     }
 }
 
+#[derive(Debug, Clone, Copy, PartialEq, Eq)]
+/// Whether a full (recursive) layout should be performed or the size of the container measured
+pub enum LayoutMode {
+    /// Only the size of the container needs to be measured
+    MeasureSize,
+    /// A full recursive layout should be performed
+    PerformLayout,
+}
+
 /// Computes the flex layout with the given axis and limits, applying spacing,
 /// padding and alignment to the items as needed.
 ///
@@ -65,7 +74,8 @@ pub fn resolve<Message, Renderer>(
     padding: Padding,
     spacing: f32,
     align_items: Alignment,
-    items: &[Element<'_, Message, Renderer>],
+    items: &mut [Element<'_, Message, Renderer>],
+    mode: LayoutMode,
 ) -> Node
 where
     Renderer: crate::Renderer,
@@ -84,7 +94,7 @@ where
     if align_items == Alignment::Fill {
         let mut fill_cross = axis.cross(limits.min());
 
-        items.iter().for_each(|child| {
+        items.iter_mut().for_each(|child| {
             let cross_fill_factor = match axis {
                 Axis::Horizontal => child.as_widget().height(),
                 Axis::Vertical => child.as_widget().width(),
@@ -97,8 +107,8 @@ where
                 let child_limits =
                     Limits::new(Size::ZERO, Size::new(max_width, max_height));
 
-                let layout = child.as_widget().layout(renderer, &child_limits);
-                let size = layout.size();
+                let size =
+                    child.as_widget_mut().measure(renderer, &child_limits);
 
                 fill_cross = fill_cross.max(axis.cross(size));
             }
@@ -107,7 +117,7 @@ where
         cross = fill_cross;
     }
 
-    for (i, child) in items.iter().enumerate() {
+    for (i, child) in items.iter_mut().enumerate() {
         let fill_factor = match axis {
             Axis::Horizontal => child.as_widget().width(),
             Axis::Vertical => child.as_widget().height(),
@@ -132,24 +142,35 @@ where
                 Size::new(max_width, max_height),
             );
 
-            let layout = child.as_widget().layout(renderer, &child_limits);
-            let size = layout.size();
+            let size = match mode {
+                LayoutMode::MeasureSize => {
+                    let size =
+                        child.as_widget_mut().measure(renderer, &child_limits);
+                    nodes[i] = Node::new(size);
+                    size
+                }
+                LayoutMode::PerformLayout => {
+                    let layout =
+                        child.as_widget_mut().layout(renderer, &child_limits);
+                    let size = layout.size();
+                    nodes[i] = layout;
+                    size
+                }
+            };
 
             available -= axis.main(size);
 
             if align_items != Alignment::Fill {
                 cross = cross.max(axis.cross(size));
             }
-
-            nodes[i] = layout;
         } else {
             fill_sum += fill_factor;
         }
     }
 
     let remaining = available.max(0.0);
 
-    for (i, child) in items.iter().enumerate() {
+    for (i, child) in items.iter_mut().enumerate() {
         let fill_factor = match axis {
             Axis::Horizontal => child.as_widget().width(),
             Axis::Vertical => child.as_widget().height(),
@@ -181,13 +202,25 @@ where
                 Size::new(max_width, max_height),
             );
 
-            let layout = child.as_widget().layout(renderer, &child_limits);
+            let size = match mode {
+                LayoutMode::MeasureSize => {
+                    let size =
+                        child.as_widget_mut().measure(renderer, &child_limits);
+                    nodes[i] = Node::new(size);
+                    size
+                }
+                LayoutMode::PerformLayout => {
+                    let layout =
+                        child.as_widget_mut().layout(renderer, &child_limits);
+                    let size = layout.size();
+                    nodes[i] = layout;
+                    size
+                }
+            };
 
             if align_items != Alignment::Fill {
-                cross = cross.max(axis.cross(layout.size()));
+                cross = cross.max(axis.cross(size));
             }
-
-            nodes[i] = layout;
         }
     }
 

native/src/layout/node.rs

@@ -36,11 +36,16 @@ impl Node {
         self.bounds
     }
 
-    /// Returns the children of the [`Node`].
+    /// Returns a view into the children of the [`Node`].
     pub fn children(&self) -> &[Node] {
         &self.children
     }
 
+    /// Consumes the [`Node`] and returns the children of the [`Node`].
+    pub fn into_children(self) -> Vec<Node> {
+        self.children
+    }
+
     /// Aligns the [`Node`] in the given space.
     pub fn align(
         &mut self,
@@ -81,6 +86,12 @@ impl Node {
         self.bounds.y = position.y;
     }
 
+    /// Set the [`Node`] to the given size.
+    pub fn set_size(&mut self, size: Size) {
+        self.bounds.width = size.width;
+        self.bounds.height = size.height;
+    }
+
     /// Translates the [`Node`] by the given translation.
     pub fn translate(self, translation: Vector) -> Self {
         Self {

native/src/overlay.rs

@@ -28,15 +28,15 @@ where
     ///
     /// [`Node`]: layout::Node
     fn layout(
-        &self,
+        &mut self,
         renderer: &Renderer,
         bounds: Size,
         position: Point,
     ) -> layout::Node;
 
     /// Draws the [`Overlay`] using the associated `Renderer`.
     fn draw(
-        &self,
+        &mut self,
         renderer: &mut Renderer,
         theme: &Renderer::Theme,
         style: &renderer::Style,

native/src/overlay/element.rs

@@ -54,7 +54,7 @@ where
 
     /// Computes the layout of the [`Element`] in the given bounds.
     pub fn layout(
-        &self,
+        &mut self,
         renderer: &Renderer,
         bounds: Size,
         translation: Vector,
@@ -101,7 +101,7 @@ where
 
     /// Draws the [`Element`] and its children using the given [`Layout`].
     pub fn draw(
-        &self,
+        &mut self,
         renderer: &mut Renderer,
         theme: &Renderer::Theme,
         style: &renderer::Style,
@@ -147,7 +147,7 @@ where
     Renderer: crate::Renderer,
 {
     fn layout(
-        &self,
+        &mut self,
         renderer: &Renderer,
         bounds: Size,
         position: Point,
@@ -253,7 +253,7 @@ where
     }
 
     fn draw(
-        &self,
+        &mut self,
         renderer: &mut Renderer,
         theme: &Renderer::Theme,
         style: &renderer::Style,

native/src/overlay/group.rs

@@ -63,7 +63,7 @@ where
     Renderer: crate::Renderer,
 {
     fn layout(
-        &self,
+        &mut self,
         renderer: &Renderer,
         bounds: Size,
         position: Point,
@@ -73,7 +73,7 @@ where
         layout::Node::with_children(
             bounds,
             self.children
-                .iter()
+                .iter_mut()
                 .map(|child| child.layout(renderer, bounds, translation))
                 .collect(),
         )
@@ -105,14 +105,14 @@ where
     }
 
     fn draw(
-        &self,
+        &mut self,
         renderer: &mut Renderer,
         theme: &<Renderer as crate::Renderer>::Theme,
         style: &renderer::Style,
         layout: Layout<'_>,
         cursor_position: Point,
     ) {
-        for (child, layout) in self.children.iter().zip(layout.children()) {
+        for (child, layout) in self.children.iter_mut().zip(layout.children()) {
             child.draw(renderer, theme, style, layout, cursor_position);
         }
     }