Add TextArea.transform

Cargo.toml

@@ -12,6 +12,7 @@ wgpu = "0.18"
 etagere = "0.2.8"
 cosmic-text = "0.10"
 lru = "0.11"
+glam = "0.24.2"
 
 [dev-dependencies]
 winit = "0.28.7"

examples/hello-world.rs

@@ -1,3 +1,5 @@
+use std::f32::consts::PI;
+
 use glyphon::{
     Attrs, Buffer, Color, Family, FontSystem, Metrics, Resolution, Shaping, SwashCache, TextArea,
     TextAtlas, TextBounds, TextRenderer,
@@ -113,6 +115,9 @@ async fn run() {
                                 bottom: 160,
                             },
                             default_color: Color::rgb(255, 255, 255),
+                            transform: glyphon::Mat3::IDENTITY,
+                            // transform: glyphon::Mat3::from_angle(PI / 2.0)
+                            //     * glyphon::Mat3::from_translation(glam::Vec2::new(200.0, -200.0)),
                         }],
                         &mut cache,
                     )

src/lib.rs

@@ -22,6 +22,7 @@ pub use cosmic_text::{
     ShapeWord, Shaping, Stretch, Style, SubpixelBin, SwashCache, SwashContent, SwashImage, Weight,
     Wrap,
 };
+pub use glam::Mat3;
 
 use etagere::AllocId;
 
@@ -46,8 +47,7 @@ pub(crate) struct GlyphDetails {
 #[repr(C)]
 #[derive(Clone, Copy, Debug)]
 pub(crate) struct GlyphToRender {
-    pos: [i32; 2],
-    dim: [u16; 2],
+    pos: glam::IVec2,
     uv: [u16; 2],
     color: u32,
     content_type: u32,
@@ -112,4 +112,6 @@ pub struct TextArea<'a> {
     pub bounds: TextBounds,
     // The default color of the text area.
     pub default_color: Color,
+    /// The 2D transformation
+    pub transform: Mat3,
 }

src/shader.wgsl

@@ -1,11 +1,10 @@
 struct VertexInput {
     @builtin(vertex_index) vertex_idx: u32,
     @location(0) pos: vec2<i32>,
-    @location(1) dim: u32,
-    @location(2) uv: u32,
-    @location(3) color: u32,
-    @location(4) content_type: u32,
-    @location(5) depth: f32,
+    @location(1) uv: u32,
+    @location(2) color: u32,
+    @location(3) content_type: u32,
+    @location(4) depth: f32,
 }
 
 struct VertexOutput {
@@ -35,32 +34,10 @@ var atlas_sampler: sampler;
 @vertex
 fn vs_main(in_vert: VertexInput) -> VertexOutput {
     var pos = in_vert.pos;
-    let width = in_vert.dim & 0xffffu;
-    let height = (in_vert.dim & 0xffff0000u) >> 16u;
     let color = in_vert.color;
     var uv = vec2<u32>(in_vert.uv & 0xffffu, (in_vert.uv & 0xffff0000u) >> 16u);
     let v = in_vert.vertex_idx % 4u;
-
-    switch v {
-        case 1u: {
-            pos.x += i32(width);
-            uv.x += width;
-        }
-        case 2u: {
-            pos.x += i32(width);
-            pos.y += i32(height);
-            uv.x += width;
-            uv.y += height;
-        }
-        case 3u: {
-            pos.y += i32(height);
-            uv.y += height;
-        }
-        default: {}
-    }
-
     var vert_output: VertexOutput;
-
     vert_output.position = vec4<f32>(
         2.0 * vec2<f32>(pos) / vec2<f32>(params.screen_resolution) - 1.0,
         in_vert.depth,

src/text_atlas.rs

@@ -325,15 +325,10 @@ impl TextAtlas {
                     shader_location: 3,
                 },
                 wgpu::VertexAttribute {
-                    format: VertexFormat::Uint32,
+                    format: VertexFormat::Float32,
                     offset: size_of::<u32>() as u64 * 5,
                     shader_location: 4,
                 },
-                wgpu::VertexAttribute {
-                    format: VertexFormat::Float32,
-                    offset: size_of::<u32>() as u64 * 6,
-                    shader_location: 5,
-                },
             ],
         }];
 

src/text_render.rs

@@ -2,7 +2,7 @@ use crate::{
     FontSystem, GlyphDetails, GlyphToRender, GpuCacheStatus, Params, PrepareError, RenderError,
     Resolution, SwashCache, SwashContent, TextArea, TextAtlas,
 };
-use std::{iter, mem::size_of, slice, sync::Arc};
+use std::{mem::size_of, slice, sync::Arc};
 use wgpu::{
     Buffer, BufferDescriptor, BufferUsages, DepthStencilState, Device, Extent3d, ImageCopyTexture,
     ImageDataLayout, IndexFormat, MultisampleState, Origin3d, Queue, RenderPass, RenderPipeline,
@@ -109,8 +109,11 @@ impl TextRenderer {
                     {
                         atlas.color_atlas.promote(physical_glyph.cache_key);
                     } else {
-                        let Some(image) = cache
-                            .get_image_uncached(font_system, physical_glyph.cache_key) else { continue };
+                        let Some(image) =
+                            cache.get_image_uncached(font_system, physical_glyph.cache_key)
+                        else {
+                            continue;
+                        };
 
                         let content_type = match image.content {
                             SwashContent::Color => ContentType::Color,
@@ -267,17 +270,46 @@ impl TextRenderer {
 
                     let depth = metadata_to_depth(glyph.metadata);
 
-                    glyph_vertices.extend(
-                        iter::repeat(GlyphToRender {
-                            pos: [x, y],
-                            dim: [width as u16, height as u16],
+                    {
+                        let mut g0 = GlyphToRender {
+                            pos: glam::IVec2 { x, y },
                             uv: [atlas_x, atlas_y],
                             color: color.0,
                             content_type: content_type as u32,
                             depth,
-                        })
-                        .take(4),
-                    );
+                        };
+
+                        let mut g1 = g0;
+                        g1.pos[0] += width;
+                        g1.uv[0] += width as u16;
+
+                        let mut g2 = g1;
+                        g2.pos[1] += height;
+                        g2.uv[1] += height as u16;
+
+                        let mut g3 = g0;
+                        g3.pos[1] += height;
+                        g3.uv[1] += height as u16;
+
+                        g0.pos = text_area
+                            .transform
+                            .transform_point2(g0.pos.as_vec2())
+                            .as_ivec2();
+                        g1.pos = text_area
+                            .transform
+                            .transform_point2(g1.pos.as_vec2())
+                            .as_ivec2();
+                        g2.pos = text_area
+                            .transform
+                            .transform_point2(g2.pos.as_vec2())
+                            .as_ivec2();
+                        g3.pos = text_area
+                            .transform
+                            .transform_point2(g3.pos.as_vec2())
+                            .as_ivec2();
+
+                        glyph_vertices.extend(&[g0, g1, g2, g3]);
+                    }
 
                     let start = 4 * glyphs_added as u32;
                     glyph_indices.extend([