Implement text rendering for overlays

Author: TrueDoctor

editor/src/messages/portfolio/document/overlays/source-sans-pro-regular.ttf

@@ -10,6 +10,8 @@ use core::f64::consts::{FRAC_PI_2, PI, TAU};
 use glam::{DAffine2, DVec2};
 use graphene_std::Color;
 use graphene_std::math::quad::Quad;
+use graphene_std::table::Table;
+use graphene_std::text::{TextAlign, TypesettingConfig, load_font, to_path};
 use graphene_std::vector::click_target::ClickTargetType;
 use graphene_std::vector::{PointId, SegmentId, Vector};
 use std::collections::HashMap;
@@ -980,7 +982,7 @@ impl OverlayContextInternal {
 		// This matches the Canvas2D checkerboard pattern
 		let mut data = vec![0u8; (PATTERN_WIDTH * PATTERN_HEIGHT * 4) as usize];
 		let rgba = color.to_rgba8_srgb();
-		
+
 		// Set pixels at (0,0) and (2,2) to the specified color
 		let pixels = [(0, 0), (2, 2)];
 		for &(x, y) in &pixels {
@@ -1006,24 +1008,55 @@ impl OverlayContextInternal {
 	}
 
 	fn get_width(&self, text: &str) -> f64 {
-		// Basic text width estimation that matches the text() function implementation
-		// This uses the same character width estimation for consistency
-		// Note: This is primarily used for manual positioning calculations, but ideally
-		// the pivot system in text() should handle centering automatically
-		const CHAR_WIDTH: f64 = 7.0; // Approximate character width at 12px font size
-		text.len() as f64 * CHAR_WIDTH
+		// Use the actual text-to-path system to get precise text width
+		const FONT_SIZE: f64 = 12.0;
+
+		let typesetting = TypesettingConfig {
+			font_size: FONT_SIZE,
+			line_height_ratio: 1.2,
+			character_spacing: 0.0,
+			max_width: None,
+			max_height: None,
+			tilt: 0.0,
+			align: TextAlign::Left,
+		};
+
+		// Load Source Sans Pro font data
+		const FONT_DATA: &[u8] = include_bytes!("source-sans-pro-regular.ttf");
+		let font_blob = Some(load_font(FONT_DATA));
+
+		// Convert text to paths and calculate actual bounds
+		let text_table = to_path(text, font_blob, typesetting, false);
+		let text_bounds = self.calculate_text_bounds(&text_table);
+		text_bounds.width()
 	}
 
 	fn text(&mut self, text: &str, font_color: &str, background_color: Option<&str>, transform: DAffine2, padding: f64, pivot: [Pivot; 2]) {
-		// For now, implement a basic text rendering approach
-		// This is a simplified version that can be enhanced later with full font support
-		
-		// Calculate approximate text dimensions (basic estimation)
-		let char_width = 7.0; // Approximate character width at 12px font size
-		let char_height = 12.0; // Font size
-		let text_width = text.len() as f64 * char_width;
-		let text_height = char_height;
-		
+		// Use the proper text-to-path system for accurate text rendering
+		const FONT_SIZE: f64 = 12.0;
+
+		// Create typesetting configuration
+		let typesetting = TypesettingConfig {
+			font_size: FONT_SIZE,
+			line_height_ratio: 1.2,
+			character_spacing: 0.0,
+			max_width: None,
+			max_height: None,
+			tilt: 0.0,
+			align: TextAlign::Left, // We'll handle alignment manually via pivot
+		};
+
+		// Load Source Sans Pro font data
+		const FONT_DATA: &[u8] = include_bytes!("source-sans-pro-regular.ttf");
+		let font_blob = Some(load_font(FONT_DATA));
+
+		// Convert text to vector paths using the existing text system
+		let text_table = to_path(text, font_blob, typesetting, false);
+		// Calculate text bounds from the generated paths
+		let text_bounds = self.calculate_text_bounds(&text_table);
+		let text_width = text_bounds.width();
+		let text_height = text_bounds.height();
+
 		// Calculate position based on pivot
 		let mut position = DVec2::ZERO;
 		match pivot[0] {
@@ -1032,43 +1065,100 @@ impl OverlayContextInternal {
 			Pivot::End => position.x = -padding - text_width,
 		}
 		match pivot[1] {
-			Pivot::Start => position.y = padding + text_height,
-			Pivot::Middle => position.y = text_height / 2.0,
-			Pivot::End => position.y = -padding,
+			Pivot::Start => position.y = padding + text_height * 0.8, // Account for baseline
+			Pivot::Middle => position.y = text_height * 0.3,          // Center on x-height
+			Pivot::End => position.y = -padding - text_height * 0.2,
 		}
-		
+
 		let text_transform = transform * DAffine2::from_translation(position);
 		let device_transform = self.get_transform();
 		let combined_transform = kurbo::Affine::new(text_transform.to_cols_array());
 		let vello_transform = device_transform * combined_transform;
-		
+
 		// Draw background if specified
 		if let Some(bg_color) = background_color {
 			let bg_rect = kurbo::Rect::new(
-				-padding,
-				-padding, 
-				text_width + padding,
-				text_height + padding
-			);
-			self.scene.fill(
-				peniko::Fill::NonZero,
-				vello_transform,
-				Self::parse_color(bg_color),
-				None,
-				&bg_rect,
+				text_bounds.min_x() - padding,
+				text_bounds.min_y() - padding,
+				text_bounds.max_x() + padding,
+				text_bounds.max_y() + padding,
 			);
+			self.scene.fill(peniko::Fill::NonZero, vello_transform, Self::parse_color(bg_color), None, &bg_rect);
+		}
+
+		// Render the actual text paths
+		self.render_text_paths(&text_table, font_color, vello_transform);
+	}
+
+	// Calculate bounds of text from vector table
+	fn calculate_text_bounds(&self, text_table: &Table<Vector>) -> kurbo::Rect {
+		let mut min_x = f64::INFINITY;
+		let mut min_y = f64::INFINITY;
+		let mut max_x = f64::NEG_INFINITY;
+		let mut max_y = f64::NEG_INFINITY;
+
+		for row in text_table.iter() {
+			// Use the existing segment_bezier_iter to get all bezier curves
+			for (_, bezier, _, _) in row.element.segment_bezier_iter() {
+				let transformed_bezier = bezier.apply_transformation(|point| row.transform.transform_point2(point));
+
+				// Add start and end points to bounds
+				let points = [transformed_bezier.start, transformed_bezier.end];
+				for point in points {
+					min_x = min_x.min(point.x);
+					min_y = min_y.min(point.y);
+					max_x = max_x.max(point.x);
+					max_y = max_y.max(point.y);
+				}
+
+				// Add handle points if they exist
+				match transformed_bezier.handles {
+					bezier_rs::BezierHandles::Quadratic { handle } => {
+						min_x = min_x.min(handle.x);
+						min_y = min_y.min(handle.y);
+						max_x = max_x.max(handle.x);
+						max_y = max_y.max(handle.y);
+					}
+					bezier_rs::BezierHandles::Cubic { handle_start, handle_end } => {
+						for handle in [handle_start, handle_end] {
+							min_x = min_x.min(handle.x);
+							min_y = min_y.min(handle.y);
+							max_x = max_x.max(handle.x);
+							max_y = max_y.max(handle.y);
+						}
+					}
+					_ => {}
+				}
+			}
+		}
+
+		if min_x.is_finite() && min_y.is_finite() && max_x.is_finite() && max_y.is_finite() {
+			kurbo::Rect::new(min_x, min_y, max_x, max_y)
+		} else {
+			// Fallback for empty text
+			kurbo::Rect::new(0.0, 0.0, 0.0, 12.0)
+		}
+	}
+
+	// Render text paths to the vello scene using existing infrastructure
+	fn render_text_paths(&mut self, text_table: &Table<Vector>, font_color: &str, base_transform: kurbo::Affine) {
+		let color = Self::parse_color(font_color);
+
+		for row in text_table.iter() {
+			// Use the existing bezier_to_path infrastructure to convert Vector to BezPath
+			let mut path = BezPath::new();
+			let mut last_point = None;
+
+			for (_, bezier, start_id, end_id) in row.element.segment_bezier_iter() {
+				let move_to = last_point != Some(start_id);
+				last_point = Some(end_id);
+
+				self.bezier_to_path(bezier, row.transform.clone(), move_to, &mut path);
+			}
+
+			// Render the path
+			self.scene.fill(peniko::Fill::NonZero, base_transform, color, None, &path);
 		}
-		
-		// For now, draw a simple rectangle to represent text
-		// TODO: Implement proper font rendering using vello's text capabilities
-		let text_rect = kurbo::Rect::new(0.0, 0.0, text_width, text_height);
-		self.scene.stroke(
-			&kurbo::Stroke::new(1.0),
-			vello_transform,
-			Self::parse_color(font_color),
-			None,
-			&text_rect,
-		);
 	}
 
 	fn translation_box(&mut self, translation: DVec2, quad: Quad, typed_string: Option<String>) {