Add culling of the painting for most widgets

This is a good early-out for widgets in `ScrollAreas`, but
also prepares for speeding up the first pass of a possible two-pass
version of egui: https://github.com/emilk/egui/issues/843

egui/src/containers/collapsing_header.rs

@@ -295,6 +295,7 @@ impl CollapsingHeader {
         header_response
             .widget_info(|| WidgetInfo::labeled(WidgetType::CollapsingHeader, text.text()));
 
+        if ui.is_rect_visible(rect) {
             let visuals = ui
                 .style()
                 .interact_selectable(&header_response, self.selected);
@@ -334,6 +335,7 @@ impl CollapsingHeader {
             }
 
             text.paint_with_visuals(ui.painter(), text_pos, &visuals);
+        }
 
         Prepared {
             id,

egui/src/containers/combo_box.rs

@@ -173,6 +173,7 @@ fn combo_box_dyn<'c, R>(
         let response = ui.interact(button_rect, button_id, Sense::click());
         // response.active |= is_popup_open;
 
+        if ui.is_rect_visible(rect) {
             let icon_rect = Align2::RIGHT_CENTER.align_size_within_rect(icon_size, rect);
             let visuals = if is_popup_open {
                 &ui.visuals().widgets.open
@@ -183,6 +184,7 @@ fn combo_box_dyn<'c, R>(
 
             let text_rect = Align2::LEFT_CENTER.align_size_within_rect(galley.size(), rect);
             galley.paint_with_visuals(ui.painter(), text_rect.min, visuals);
+        }
     });
 
     if button_response.clicked() {
@@ -223,6 +225,8 @@ fn button_frame(
     outer_rect.set_height(outer_rect.height().at_least(interact_size.y));
 
     let response = ui.interact(outer_rect, id, sense);
+
+    if ui.is_rect_visible(outer_rect) {
         let visuals = if is_popup_open {
             &ui.visuals().widgets.open
         } else {
@@ -238,6 +242,7 @@ fn button_frame(
                 stroke: visuals.bg_stroke,
             },
         );
+    }
 
     ui.advance_cursor_after_rect(outer_rect);
 

egui/src/containers/frame.rs

@@ -209,8 +209,11 @@ impl Prepared {
             ..
         } = self;
 
+        if ui.is_rect_visible(outer_rect) {
             let shape = frame.paint(outer_rect);
             ui.painter().set(where_to_put_background, shape);
+        }
+
         ui.allocate_rect(outer_rect, Sense::hover())
     }
 }

egui/src/containers/scroll_area.rs

@@ -671,6 +671,7 @@ impl Prepared {
                 state.vel[d] = 0.0;
             }
 
+            if ui.is_rect_visible(outer_scroll_rect) {
                 // Avoid frame-delay by calculating a new handle rect:
                 let mut handle_rect = if d == 0 {
                     Rect::from_min_max(
@@ -716,6 +717,7 @@ impl Prepared {
                     visuals.bg_fill,
                 ));
             }
+        }
 
         ui.advance_cursor_after_rect(outer_rect);
 

egui/src/menu.rs

@@ -426,7 +426,7 @@ impl SubMenuButton {
             crate::WidgetInfo::labeled(crate::WidgetType::Button, &text_galley.text())
         });
 
-        if ui.clip_rect().intersects(rect) {
+        if ui.is_rect_visible(rect) {
             let visuals = Self::visuals(ui, &response, menu_state, sub_id);
             let text_pos = Align2::LEFT_CENTER
                 .align_size_within_rect(text_galley.size(), rect.shrink2(button_padding))

egui/src/ui.rs

@@ -122,13 +122,13 @@ impl Ui {
     // -------------------------------------------------
 
     /// A unique identity of this `Ui`.
-    #[inline(always)]
+    #[inline]
     pub fn id(&self) -> Id {
         self.id
     }
 
     /// Style options for this `Ui` and its children.
-    #[inline(always)]
+    #[inline]
     pub fn style(&self) -> &std::sync::Arc<Style> {
         &self.style
     }
@@ -161,7 +161,7 @@ impl Ui {
 
     /// The current spacing options for this `Ui`.
     /// Short for `ui.style().spacing`.
-    #[inline(always)]
+    #[inline]
     pub fn spacing(&self) -> &crate::style::Spacing {
         &self.style.spacing
     }
@@ -180,7 +180,7 @@ impl Ui {
 
     /// The current visuals settings of this `Ui`.
     /// Short for `ui.style().visuals`.
-    #[inline(always)]
+    #[inline]
     pub fn visuals(&self) -> &crate::Visuals {
         &self.style.visuals
     }
@@ -200,20 +200,20 @@ impl Ui {
     }
 
     /// Get a reference to the parent [`CtxRef`].
-    #[inline(always)]
+    #[inline]
     pub fn ctx(&self) -> &CtxRef {
         self.painter.ctx()
     }
 
     /// Use this to paint stuff within this `Ui`.
-    #[inline(always)]
+    #[inline]
     pub fn painter(&self) -> &Painter {
         &self.painter
     }
 
     /// If `false`, the `Ui` does not allow any interaction and
     /// the widgets in it will draw with a gray look.
-    #[inline(always)]
+    #[inline]
     pub fn is_enabled(&self) -> bool {
         self.enabled
     }
@@ -246,7 +246,7 @@ impl Ui {
     }
 
     /// If `false`, any widgets added to the `Ui` will be invisible and non-interactive.
-    #[inline(always)]
+    #[inline]
     pub fn visible(&self) -> bool {
         self.painter.visible()
     }
@@ -277,7 +277,7 @@ impl Ui {
         }
     }
 
-    #[inline(always)]
+    #[inline]
     pub fn layout(&self) -> &Layout {
         self.placer.layout()
     }
@@ -305,37 +305,42 @@ impl Ui {
     }
 
     /// Use this to paint stuff within this `Ui`.
+    #[inline]
     pub fn layer_id(&self) -> LayerId {
         self.painter().layer_id()
     }
 
     /// The `Input` of the `Context` associated with the `Ui`.
     /// Equivalent to `.ctx().input()`.
-    #[inline(always)]
+    #[inline]
     pub fn input(&self) -> &InputState {
         self.ctx().input()
     }
 
     /// The `Memory` of the `Context` associated with the `Ui`.
     /// Equivalent to `.ctx().memory()`.
+    #[inline]
     pub fn memory(&self) -> MutexGuard<'_, Memory> {
         self.ctx().memory()
     }
 
     /// The `Output` of the `Context` associated with the `Ui`.
     /// Equivalent to `.ctx().output()`.
+    #[inline]
     pub fn output(&self) -> MutexGuard<'_, Output> {
         self.ctx().output()
     }
 
     /// The `Fonts` of the `Context` associated with the `Ui`.
     /// Equivalent to `.ctx().fonts()`.
+    #[inline]
     pub fn fonts(&self) -> &Fonts {
         self.ctx().fonts()
     }
 
     /// Screen-space rectangle for clipping what we paint in this ui.
     /// This is used, for instance, to avoid painting outside a window that is smaller than its contents.
+    #[inline]
     pub fn clip_rect(&self) -> Rect {
         self.painter.clip_rect()
     }
@@ -345,6 +350,11 @@ impl Ui {
     pub fn set_clip_rect(&mut self, clip_rect: Rect) {
         self.painter.set_clip_rect(clip_rect);
     }
+
+    /// Can be used for culling: if `false`, then no part of `rect` will be visible on screen.
+    pub fn is_rect_visible(&self, rect: Rect) -> bool {
+        self.visible() && rect.intersects(self.clip_rect())
+    }
 }
 
 // ------------------------------------------------------------------------
@@ -741,7 +751,7 @@ impl Ui {
     /// If the contents overflow, more space will be allocated.
     /// When finished, the amount of space actually used (`min_rect`) will be allocated.
     /// So you can request a lot of space and then use less.
-    #[inline(always)]
+    #[inline]
     pub fn allocate_ui<R>(
         &mut self,
         desired_size: Vec2,
@@ -754,7 +764,7 @@ impl Ui {
     /// If the contents overflow, more space will be allocated.
     /// When finished, the amount of space actually used (`min_rect`) will be allocated.
     /// So you can request a lot of space and then use less.
-    #[inline(always)]
+    #[inline]
     pub fn allocate_ui_with_layout<R>(
         &mut self,
         desired_size: Vec2,
@@ -883,7 +893,7 @@ impl Ui {
     /// let response = ui.add(egui::Slider::new(&mut my_value, 0..=100));
     /// response.on_hover_text("Drag me!");
     /// ```
-    #[inline(always)]
+    #[inline]
     pub fn add(&mut self, widget: impl Widget) -> Response {
         widget.ui(self)
     }
@@ -980,7 +990,7 @@ impl Ui {
     /// This will be in addition to the [`Spacing::item_spacing`}.
     ///
     /// [`Self::min_rect`] will expand to contain the space.
-    #[inline(always)]
+    #[inline]
     pub fn add_space(&mut self, amount: f32) {
         self.placer.advance_cursor(amount);
     }
@@ -990,7 +1000,7 @@ impl Ui {
     /// Shortcut for `add(Label::new(text))`
     ///
     /// See also [`Label`].
-    #[inline(always)]
+    #[inline]
     pub fn label(&mut self, text: impl Into<WidgetText>) -> Response {
         Label::new(text).ui(self)
     }
@@ -1197,7 +1207,7 @@ impl Ui {
     }
 
     /// Shortcut for `add(Separator::default())` (see [`Separator`]).
-    #[inline(always)]
+    #[inline]
     pub fn separator(&mut self) -> Response {
         Separator::default().ui(self)
     }
@@ -1243,7 +1253,7 @@ impl Ui {
     /// Show an image here with the given size.
     ///
     /// See also [`Image`].
-    #[inline(always)]
+    #[inline]
     pub fn image(&mut self, texture_id: TextureId, size: impl Into<Vec2>) -> Response {
         Image::new(texture_id, size).ui(self)
     }
@@ -1403,7 +1413,7 @@ impl Ui {
     ///
     /// The `id_source` here be anything at all.
     // TODO: remove `id_source` argument?
-    #[inline(always)]
+    #[inline]
     pub fn indent<R>(
         &mut self,
         id_source: impl Hash,
@@ -1555,7 +1565,7 @@ impl Ui {
     /// ```
     ///
     /// See also [`Self::with_layout`] for more options.
-    #[inline(always)]
+    #[inline]
     pub fn vertical<R>(&mut self, add_contents: impl FnOnce(&mut Ui) -> R) -> InnerResponse<R> {
         self.with_layout_dyn(Layout::top_down(Align::Min), Box::new(add_contents))
     }
@@ -1750,7 +1760,7 @@ impl Ui {
         self.menu_state = menu_state;
     }
 
-    #[inline(always)]
+    #[inline]
     /// Create a menu button. Creates a button for a sub-menu when the `Ui` is inside a menu.
     ///
     /// ```

egui/src/widgets/button.rs

@@ -144,7 +144,7 @@ impl Widget for Button {
         let (rect, response) = ui.allocate_at_least(desired_size, sense);
         response.widget_info(|| WidgetInfo::labeled(WidgetType::Button, text.text()));
 
-        if ui.clip_rect().intersects(rect) {
+        if ui.is_rect_visible(rect) {
             let visuals = ui.style().interact(&response);
             let text_pos = ui
                 .layout()
@@ -234,6 +234,7 @@ impl<'a> Widget for Checkbox<'a> {
         }
         response.widget_info(|| WidgetInfo::selected(WidgetType::Checkbox, *checked, text.text()));
 
+        if ui.is_rect_visible(rect) {
             // let visuals = ui.style().interact_selectable(&response, *checked); // too colorful
             let visuals = ui.style().interact(&response);
             let text_pos = pos2(
@@ -261,6 +262,8 @@ impl<'a> Widget for Checkbox<'a> {
             }
 
             text.paint_with_visuals(ui.painter(), text_pos, visuals);
+        }
+
         response
     }
 }
@@ -331,6 +334,7 @@ impl Widget for RadioButton {
         response
             .widget_info(|| WidgetInfo::selected(WidgetType::RadioButton, checked, text.text()));
 
+        if ui.is_rect_visible(rect) {
             let text_pos = pos2(
                 rect.min.x + button_padding.x + icon_width + icon_spacing,
                 rect.center().y - 0.5 * text.size().y,
@@ -361,6 +365,8 @@ impl Widget for RadioButton {
             }
 
             text.paint_with_visuals(ui.painter(), text_pos, visuals);
+        }
+
         response
     }
 }
@@ -438,7 +444,7 @@ impl Widget for ImageButton {
         let (rect, response) = ui.allocate_exact_size(padded_size, sense);
         response.widget_info(|| WidgetInfo::new(WidgetType::ImageButton));
 
-        if ui.clip_rect().intersects(rect) {
+        if ui.is_rect_visible(rect) {
             let (expansion, corner_radius, fill, stroke) = if selected {
                 let selection = ui.visuals().selection;
                 (-padding, 0.0, selection.bg_fill, selection.stroke)

egui/src/widgets/color_picker.rs

@@ -50,6 +50,7 @@ pub fn show_color(ui: &mut Ui, color: impl Into<Hsva>, desired_size: Vec2) -> Re
 
 fn show_hsva(ui: &mut Ui, color: Hsva, desired_size: Vec2) -> Response {
     let (rect, response) = ui.allocate_at_least(desired_size, Sense::hover());
+    if ui.is_rect_visible(rect) {
         background_checkers(ui.painter(), rect);
         if true {
             let left = Rect::from_min_max(rect.left_top(), rect.center_bottom());
@@ -64,6 +65,7 @@ fn show_hsva(ui: &mut Ui, color: Hsva, desired_size: Vec2) -> Response {
                 stroke: Stroke::new(3.0, color.to_opaque()),
             });
         }
+    }
     response
 }
 
@@ -71,6 +73,8 @@ fn color_button(ui: &mut Ui, color: Color32, open: bool) -> Response {
     let size = ui.spacing().interact_size;
     let (rect, response) = ui.allocate_exact_size(size, Sense::click());
     response.widget_info(|| WidgetInfo::new(WidgetType::ColorButton));
+
+    if ui.is_rect_visible(rect) {
         let visuals = if open {
             &ui.visuals().widgets.open
         } else {
@@ -88,6 +92,7 @@ fn color_button(ui: &mut Ui, color: Color32, open: bool) -> Response {
         let corner_radius = visuals.corner_radius.at_most(2.0);
         ui.painter()
             .rect_stroke(rect, corner_radius, (2.0, visuals.bg_fill)); // fill is intentional, because default style has no border
+    }
 
     response
 }
@@ -102,6 +107,7 @@ fn color_slider_1d(ui: &mut Ui, value: &mut f32, color_at: impl Fn(f32) -> Color
         *value = remap_clamp(mpos.x, rect.left()..=rect.right(), 0.0..=1.0);
     }
 
+    if ui.is_rect_visible(rect) {
         let visuals = ui.style().interact(&response);
 
         background_checkers(ui.painter(), rect); // for alpha:
@@ -140,6 +146,7 @@ fn color_slider_1d(ui: &mut Ui, value: &mut f32, color_at: impl Fn(f32) -> Color
                 Stroke::new(visuals.fg_stroke.width, contrast_color(picked_color)),
             ));
         }
+    }
 
     response
 }
@@ -158,6 +165,7 @@ fn color_slider_2d(
         *y_value = remap_clamp(mpos.y, rect.bottom()..=rect.top(), 0.0..=1.0);
     }
 
+    if ui.is_rect_visible(rect) {
         let visuals = ui.style().interact(&response);
         let mut mesh = Mesh::default();
 
@@ -193,6 +201,7 @@ fn color_slider_2d(
             fill: picked_color,
             stroke: Stroke::new(visuals.fg_stroke.width, contrast_color(picked_color)),
         });
+    }
 
     response
 }

egui/src/widgets/hyperlink.rs

@@ -78,6 +78,7 @@ impl Widget for Hyperlink {
             });
         }
 
+        if ui.is_rect_visible(response.rect) {
             let color = ui.visuals().hyperlink_color;
             let visuals = ui.style().interact(&response);
 
@@ -94,6 +95,7 @@ impl Widget for Hyperlink {
                 underline,
                 angle: 0.0,
             });
+        }
 
         response.on_hover_text(url)
     }

egui/src/widgets/image.rs

@@ -68,6 +68,7 @@ impl Image {
     }
 
     pub fn paint_at(&self, ui: &mut Ui, rect: Rect) {
+        if ui.is_rect_visible(rect) {
             use epaint::*;
             let Self {
                 texture_id,
@@ -91,6 +92,7 @@ impl Image {
                 ui.painter().add(Shape::mesh(mesh));
             }
         }
+    }
 }
 
 impl Widget for Image {

egui/src/widgets/label.rs

@@ -237,6 +237,8 @@ impl Widget for Label {
     fn ui(self, ui: &mut Ui) -> Response {
         let (pos, text_galley, response) = self.layout_in_ui(ui);
         response.widget_info(|| WidgetInfo::labeled(WidgetType::Label, text_galley.text()));
+
+        if ui.is_rect_visible(response.rect) {
             let response_color = ui.style().interact(&response).text_color();
 
             let underline = if response.has_focus() {
@@ -258,6 +260,7 @@ impl Widget for Label {
                 underline,
                 angle: 0.0,
             });
+        }
 
         response
     }

egui/src/widgets/progress_bar.rs

@@ -71,6 +71,8 @@ impl Widget for ProgressBar {
         let height = ui.spacing().interact_size.y;
         let (outer_rect, response) =
             ui.allocate_exact_size(vec2(desired_width, height), Sense::hover());
+
+        if ui.is_rect_visible(response.rect) {
             let visuals = ui.style().visuals.clone();
             let corner_radius = outer_rect.height() / 2.0;
             ui.painter().rect(
@@ -124,7 +126,9 @@ impl Widget for ProgressBar {
             if let Some(text_kind) = text {
                 let text = match text_kind {
                     ProgressBarText::Custom(text) => text,
-                ProgressBarText::Percentage => format!("{}%", (progress * 100.0) as usize).into(),
+                    ProgressBarText::Percentage => {
+                        format!("{}%", (progress * 100.0) as usize).into()
+                    }
                 };
                 let galley = text.into_galley(ui, Some(false), f32::INFINITY, TextStyle::Button);
                 let text_pos = outer_rect.left_center() - Vec2::new(0.0, galley.size().y / 2.0)
@@ -138,6 +142,7 @@ impl Widget for ProgressBar {
                     text_color,
                 );
             }
+        }
 
         response
     }

egui/src/widgets/selected_label.rs

@@ -58,6 +58,7 @@ impl Widget for SelectableLabel {
             WidgetInfo::selected(WidgetType::SelectableLabel, selected, text.text())
         });
 
+        if ui.is_rect_visible(response.rect) {
             let text_pos = ui
                 .layout()
                 .align_size_within_rect(text.size(), rect.shrink2(button_padding))
@@ -74,6 +75,8 @@ impl Widget for SelectableLabel {
             }
 
             text.paint_with_visuals(ui.painter(), text_pos, &visuals);
+        }
+
         response
     }
 }

egui/src/widgets/separator.rs

@@ -68,6 +68,8 @@ impl Widget for Separator {
         };
 
         let (rect, response) = ui.allocate_at_least(size, Sense::hover());
+
+        if ui.is_rect_visible(response.rect) {
             let points = if is_horizontal_line {
                 [
                     pos2(rect.left(), rect.center().y),
@@ -81,6 +83,8 @@ impl Widget for Separator {
             };
             let stroke = ui.visuals().widgets.noninteractive.bg_stroke;
             ui.painter().line_segment(points, stroke);
+        }
+
         response
     }
 }

egui/src/widgets/slider.rs

@@ -320,7 +320,7 @@ impl<'a> Slider<'a> {
         }
 
         // Paint it:
-        {
+        if ui.is_rect_visible(response.rect) {
             let value = self.get_value();
 
             let rail_radius = ui

egui/src/widgets/text_edit/builder.rs

@@ -507,6 +507,7 @@ impl<'t> TextEdit<'t> {
             text_draw_pos -= vec2(offset_x, 0.0);
         }
 
+        if ui.is_rect_visible(rect) {
             painter.galley(text_draw_pos, galley.clone());
 
             if text.as_ref().is_empty() && !hint_text.is_empty() {
@@ -535,7 +536,7 @@ impl<'t> TextEdit<'t> {
 
                     if interactive && text.is_mutable() {
                         // egui_web uses `text_cursor_pos` when showing IME,
-                    // so only set it when text is editable!
+                        // so only set it when text is editable and visible!
                         ui.ctx().output().text_cursor_pos = Some(
                             galley
                                 .pos_from_cursor(&cursor_range.primary)
@@ -545,6 +546,7 @@ impl<'t> TextEdit<'t> {
                     }
                 }
             }
+        }
 
         state.clone().store(ui.ctx(), id);
 

egui_demo_lib/src/apps/demo/toggle_switch.rs

@@ -41,7 +41,9 @@ pub fn toggle_ui(ui: &mut egui::Ui, on: &mut bool) -> egui::Response {
     response.widget_info(|| egui::WidgetInfo::selected(egui::WidgetType::Checkbox, *on, ""));
 
     // 4. Paint!
-    // First let's ask for a simple animation from egui.
+    // Make sure we need to paint:
+    if ui.is_rect_visible(rect) {
+        // Let's ask for a simple animation from egui.
         // egui keeps track of changes in the boolean associated with the id and
         // returns an animated value in the 0-1 range for how much "on" we are.
         let how_on = ui.ctx().animate_bool(response.id, *on);
@@ -59,6 +61,7 @@ pub fn toggle_ui(ui: &mut egui::Ui, on: &mut bool) -> egui::Response {
         let center = egui::pos2(circle_x, rect.center().y);
         ui.painter()
             .circle(center, 0.75 * radius, visuals.bg_fill, visuals.fg_stroke);
+    }
 
     // All done! Return the interaction response so the user can check what happened
     // (hovered, clicked, ...) and maybe show a tooltip:
@@ -76,6 +79,7 @@ fn toggle_ui_compact(ui: &mut egui::Ui, on: &mut bool) -> egui::Response {
     }
     response.widget_info(|| egui::WidgetInfo::selected(egui::WidgetType::Checkbox, *on, ""));
 
+    if ui.is_rect_visible(rect) {
         let how_on = ui.ctx().animate_bool(response.id, *on);
         let visuals = ui.style().interact_selectable(&response, *on);
         let rect = rect.expand(visuals.expansion);
@@ -86,6 +90,7 @@ fn toggle_ui_compact(ui: &mut egui::Ui, on: &mut bool) -> egui::Response {
         let center = egui::pos2(circle_x, rect.center().y);
         ui.painter()
             .circle(center, 0.75 * radius, visuals.bg_fill, visuals.fg_stroke);
+    }
 
     response
 }