Clip text to viewport bounds instead of layout bounds

wgpu/src/geometry.rs

@@ -328,15 +328,17 @@ impl Frame {
             Point::new(transformed.x, transformed.y)
         };
 
+        let bounds = Rectangle {
+            x: position.x,
+            y: position.y,
+            width: f32::INFINITY,
+            height: f32::INFINITY,
+        };
+
         // TODO: Use vectorial text instead of primitive
         self.primitives.push(Primitive::Text {
             content: text.content,
-            bounds: Rectangle {
-                x: position.x,
-                y: position.y,
-                width: f32::INFINITY,
-                height: f32::INFINITY,
-            },
+            bounds,
             color: text.color,
             size: text.size,
             line_height: text.line_height,
@@ -344,6 +346,7 @@ impl Frame {
             horizontal_alignment: text.horizontal_alignment,
             vertical_alignment: text.vertical_alignment,
             shaping: text.shaping,
+            viewport: bounds,
         });
     }
 

wgpu/src/layer.rs

@@ -75,6 +75,7 @@ impl<'a> Layer<'a> {
                 horizontal_alignment: alignment::Horizontal::Left,
                 vertical_alignment: alignment::Vertical::Top,
                 shaping: core::text::Shaping::Basic,
+                viewport: Rectangle::with_size(Size::INFINITY),
             };
 
             overlay.text.push(Text::Cached(text.clone()));
@@ -123,6 +124,7 @@ impl<'a> Layer<'a> {
                 paragraph,
                 position,
                 color,
+                viewport,
             } => {
                 let layer = &mut layers[current_layer];
 
@@ -130,12 +132,14 @@ impl<'a> Layer<'a> {
                     paragraph: paragraph.clone(),
                     position: *position + translation,
                     color: *color,
+                    viewport: *viewport + translation,
                 });
             }
             Primitive::Editor {
                 editor,
                 position,
                 color,
+                viewport,
             } => {
                 let layer = &mut layers[current_layer];
 
@@ -143,6 +147,7 @@ impl<'a> Layer<'a> {
                     editor: editor.clone(),
                     position: *position + translation,
                     color: *color,
+                    viewport: *viewport + translation,
                 });
             }
             Primitive::Text {
@@ -155,6 +160,7 @@ impl<'a> Layer<'a> {
                 horizontal_alignment,
                 vertical_alignment,
                 shaping,
+                viewport,
             } => {
                 let layer = &mut layers[current_layer];
 
@@ -168,6 +174,7 @@ impl<'a> Layer<'a> {
                     horizontal_alignment: *horizontal_alignment,
                     vertical_alignment: *vertical_alignment,
                     shaping: *shaping,
+                    viewport: *viewport + translation,
                 }));
             }
             Primitive::Quad {

wgpu/src/layer/text.rs

@@ -13,6 +13,7 @@ pub enum Text<'a> {
         paragraph: paragraph::Weak,
         position: Point,
         color: Color,
+        viewport: Rectangle,
     },
     /// An editor.
     #[allow(missing_docs)]
@@ -20,6 +21,7 @@ pub enum Text<'a> {
         editor: editor::Weak,
         position: Point,
         color: Color,
+        viewport: Rectangle,
     },
     /// A cached text.
     Cached(Cached<'a>),
@@ -53,4 +55,7 @@ pub struct Cached<'a> {
 
     /// The shaping strategy of the text.
     pub shaping: text::Shaping,
+
+    /// The viewport of the text.
+    pub viewport: Rectangle,
 }

wgpu/src/text.rs

@@ -120,9 +120,13 @@ impl Pipeline {
                     horizontal_alignment,
                     vertical_alignment,
                     color,
+                    viewport,
                 ) = match section {
                     Text::Paragraph {
-                        position, color, ..
+                        position,
+                        color,
+                        viewport,
+                        ..
                     } => {
                         use crate::core::text::Paragraph as _;
 
@@ -137,10 +141,14 @@ impl Pipeline {
                             paragraph.horizontal_alignment(),
                             paragraph.vertical_alignment(),
                             *color,
+                            *viewport,
                         )
                     }
                     Text::Editor {
-                        position, color, ..
+                        position,
+                        color,
+                        viewport,
+                        ..
                     } => {
                         use crate::core::text::Editor as _;
 
@@ -155,6 +163,7 @@ impl Pipeline {
                             alignment::Horizontal::Left,
                             alignment::Vertical::Top,
                             *color,
+                            *viewport,
                         )
                     }
                     Text::Cached(text) => {
@@ -173,6 +182,7 @@ impl Pipeline {
                             text.horizontal_alignment,
                             text.vertical_alignment,
                             text.color,
+                            text.viewport,
                         )
                     }
                 };
@@ -195,13 +205,8 @@ impl Pipeline {
                     alignment::Vertical::Bottom => bounds.y - bounds.height,
                 };
 
-                let section_bounds = Rectangle {
-                    x: left,
-                    y: top,
-                    ..bounds
-                };
-
-                let clip_bounds = layer_bounds.intersection(&section_bounds)?;
+                let clip_bounds =
+                    layer_bounds.intersection(&(viewport * scale_factor))?;
 
                 Some(glyphon::TextArea {
                     buffer,