Add Text-on-path support

Author: jsjgdh

Cargo.lock

@@ -150,7 +150,7 @@ kurbo = { version = "0.13", features = ["serde"] }
 vello = "0.7"
 vello_encoding = "0.7"
 resvg = "0.47"
-usvg = "0.47"
+usvg = { version = "0.47", features = ["text", "system-fonts", "memmap-fonts"] }
 parley = "0.6"
 skrifa = "0.40"
 polycool = "0.4"

Cargo.toml

@@ -12,11 +12,10 @@ use graph_craft::document::value::TaggedValue;
 use graph_craft::document::{NodeId, NodeInput};
 use graphene_std::Color;
 use graphene_std::renderer::Quad;
-use graphene_std::renderer::convert_usvg_path::convert_usvg_path;
+use graphene_std::renderer::convert_usvg_path::{convert_tiny_skia_path, convert_usvg_path};
 use graphene_std::table::Table;
-use graphene_std::text::{Font, TypesettingConfig};
+use graphene_std::text::{Font, TextAnchor, TypesettingConfig};
 use graphene_std::vector::style::{Fill, Gradient, GradientStop, GradientStops, GradientType, PaintOrder, Stroke, StrokeAlign, StrokeCap, StrokeJoin};
-
 #[derive(ExtractField)]
 pub struct GraphOperationMessageContext<'a> {
 	pub network_interface: &'a mut NodeNetworkInterface,
@@ -394,7 +393,14 @@ impl MessageHandler<GraphOperationMessage, GraphOperationMessageContext<'_>> for
 				insert_index,
 				center,
 			} => {
-				let tree = match usvg::Tree::from_str(&svg, &usvg::Options::default()) {
+				let mut options = usvg::Options::default();
+				options.fontdb_mut().load_font_data(include_bytes!("../../../../font.ttf").to_vec());
+				options.font_family = "Source Sans Pro".to_string();
+
+				let svg = svg.replace("font-family=\"sans-serif\"", "font-family=\"Source Sans Pro\"");
+				let svg = svg.replace("font-family='sans-serif'", "font-family='Source Sans Pro'");
+
+				let tree = match usvg::Tree::from_str(&svg, &options) {
 					Ok(t) => t,
 					Err(e) => {
 						responses.add(DialogMessage::DisplayDialogError {
@@ -546,6 +552,7 @@ fn import_usvg_node(
 	insert_index: usize,
 	graphite_gradient_stops: &HashMap<String, GradientStops>,
 ) {
+	log::error!("DIAGNOSTIC: Visiting node root: {:?}", node);
 	let layer = modify_inputs.create_layer(id);
 
 	modify_inputs.network_interface.move_layer_to_stack(layer, parent, insert_index, &[]);
@@ -590,9 +597,7 @@ fn import_usvg_node(
 			warn!("Skip image");
 		}
 		usvg::Node::Text(text) => {
-			let font = Font::new(graphene_std::consts::DEFAULT_FONT_FAMILY.to_string(), graphene_std::consts::DEFAULT_FONT_STYLE.to_string());
-			modify_inputs.insert_text(text.chunks().iter().map(|chunk| chunk.text()).collect(), font, TypesettingConfig::default(), layer);
-			modify_inputs.fill_set(Fill::Solid(Color::BLACK));
+			import_usvg_text(modify_inputs, text, node.abs_transform(), layer);
 		}
 	}
 }
@@ -633,24 +638,21 @@ fn import_usvg_node_inner(
 			group_extents_map.insert(layer, child_extents);
 			total_extent
 		}
-		usvg::Node::Path(path) => {
-			import_usvg_path(modify_inputs, node, path, layer, graphite_gradient_stops);
-			0
-		}
 		usvg::Node::Image(_image) => {
 			warn!("Skip image");
 			0
 		}
 		usvg::Node::Text(text) => {
-			let font = Font::new(graphene_std::consts::DEFAULT_FONT_FAMILY.to_string(), graphene_std::consts::DEFAULT_FONT_STYLE.to_string());
-			modify_inputs.insert_text(text.chunks().iter().map(|chunk| chunk.text()).collect(), font, TypesettingConfig::default(), layer);
-			modify_inputs.fill_set(Fill::Solid(Color::BLACK));
+			import_usvg_text(modify_inputs, text, node.abs_transform(), layer);
+			0
+		}
+		usvg::Node::Path(path) => {
+			import_usvg_path(modify_inputs, node, path, layer, graphite_gradient_stops);
 			0
 		}
 	}
 }
 
-/// Helper to apply path data (vector geometry, fill, stroke, transform) to a layer.
 fn import_usvg_path(modify_inputs: &mut ModifyInputsContext, node: &usvg::Node, path: &usvg::Path, layer: LayerNodeIdentifier, graphite_gradient_stops: &HashMap<String, GradientStops>) {
 	let subpaths = convert_usvg_path(path);
 	let bounds = subpaths.iter().filter_map(|subpath| subpath.bounding_box()).reduce(Quad::combine_bounds).unwrap_or_default();
@@ -674,6 +676,53 @@ fn import_usvg_path(modify_inputs: &mut ModifyInputsContext, node: &usvg::Node,
 	}
 }
 
+fn import_usvg_text(modify_inputs: &mut ModifyInputsContext, text: &usvg::Text, transform: usvg::Transform, layer: LayerNodeIdentifier) {
+	use graphene_std::text::TextAnchor;
+	let font_family = text
+		.chunks()
+		.first()
+		.and_then(|chunk| chunk.spans().first())
+		.and_then(|span| span.font().families().first().map(|f| f.to_string()))
+		.unwrap_or_else(|| graphene_std::consts::DEFAULT_FONT_FAMILY.to_string());
+	let font_style = graphene_std::consts::DEFAULT_FONT_STYLE.to_string();
+	let font = Font::new(font_family, font_style);
+
+	let full_text: String = text.chunks().iter().map(|chunk| chunk.text()).collect();
+
+	// Check if any chunk uses text-on-path (TextFlow::Path)
+	let text_path_chunk = text.chunks().iter().find(|chunk| matches!(chunk.text_flow(), usvg::TextFlow::Path(_)));
+
+	if let Some(chunk) = text_path_chunk {
+		if let usvg::TextFlow::Path(text_path) = chunk.text_flow() {
+			let path_subpaths = convert_tiny_skia_path(text_path.path());
+			let start_offset = text_path.start_offset() as f64;
+			let anchor = match chunk.anchor() {
+				usvg::TextAnchor::Start => TextAnchor::Start,
+				usvg::TextAnchor::Middle => TextAnchor::Middle,
+				usvg::TextAnchor::End => TextAnchor::End,
+			};
+			let font_size = chunk.spans().first().map(|s| s.font_size().get()).unwrap_or(24.0) as f64;
+			let letter_spacing = chunk.spans().first().map(|s| s.letter_spacing()).unwrap_or(0.0) as f64;
+
+			let affine = DAffine2::from_cols_array(&[
+				transform.sx as f64,
+				transform.ky as f64,
+				transform.kx as f64,
+				transform.sy as f64,
+				transform.tx as f64,
+				transform.ty as f64,
+			]);
+			modify_inputs.insert_text_on_path(full_text, font, font_size, letter_spacing, path_subpaths, start_offset, anchor, affine, layer);
+			modify_inputs.fill_set(Fill::Solid(Color::BLACK));
+			return;
+		}
+	}
+
+	// Fallback: regular text
+	modify_inputs.insert_text(full_text, font, TypesettingConfig::default(), layer);
+	modify_inputs.fill_set(Fill::Solid(Color::BLACK));
+}
+
 /// Set correct positions for all imported layers in a single top-down O(n) pass.
 ///
 /// For each group's child stack:

editor/src/messages/portfolio/document/graph_operation/graph_operation_message_handler.rs

@@ -3,7 +3,8 @@ use crate::messages::portfolio::document::node_graph::document_node_definitions:
 use crate::messages::portfolio::document::utility_types::document_metadata::LayerNodeIdentifier;
 use crate::messages::portfolio::document::utility_types::network_interface::{self, InputConnector, NodeNetworkInterface, OutputConnector};
 use crate::messages::prelude::*;
-use glam::{DAffine2, IVec2};
+use glam::{DAffine2, DVec2, IVec2};
+use graphene_std::transform::Transform as _;
 use graph_craft::document::value::TaggedValue;
 use graph_craft::document::{NodeId, NodeInput};
 use graph_craft::{ProtoNodeIdentifier, concrete};
@@ -13,7 +14,7 @@ use graphene_std::raster::BlendMode;
 use graphene_std::raster_types::{CPU, Raster};
 use graphene_std::subpath::Subpath;
 use graphene_std::table::Table;
-use graphene_std::text::{Font, TypesettingConfig};
+use graphene_std::text::{Font, TextAnchor, TypesettingConfig};
 use graphene_std::vector::Vector;
 use graphene_std::vector::style::{Fill, Stroke};
 use graphene_std::vector::{PointId, VectorModificationType};
@@ -289,6 +290,64 @@ impl<'a> ModifyInputsContext<'a> {
 		self.network_interface.move_node_to_chain_start(&fill_id, layer, &[], self.import);
 	}
 
+
+	pub fn insert_text_on_path(&mut self, text: String, font: Font, font_size: f64, character_spacing: f64, path_subpaths: Vec<Subpath<PointId>>, start_offset: f64, text_anchor: TextAnchor, transform: DAffine2, layer: LayerNodeIdentifier) {
+		use graphene_std::text::TextPathSide;
+
+		// Create the path vector object
+		let path_vector = Table::new_from_element(Vector::from_subpaths(path_subpaths, true));
+
+		// Create the Text On Path node directly using the vector as a value input
+		let text_on_path_node = resolve_proto_node_type(graphene_std::text::text_on_path::IDENTIFIER)
+			.expect("Text On Path node does not exist")
+			.node_template_input_override([
+				Some(NodeInput::scope("editor-api")),
+				Some(NodeInput::value(TaggedValue::String(text), false)),
+				Some(NodeInput::value(TaggedValue::Vector(path_vector), false)), // path input passed as vector value directly
+				Some(NodeInput::value(TaggedValue::Font(font), false)),
+				Some(NodeInput::value(TaggedValue::F64(font_size), false)),
+				Some(NodeInput::value(TaggedValue::F64(character_spacing), false)),
+				Some(NodeInput::value(TaggedValue::F64(start_offset), false)), // start_offset
+				Some(NodeInput::value(TaggedValue::Bool(false), false)),       // start_offset_percent
+				Some(NodeInput::value(TaggedValue::TextPathSide(TextPathSide::Left), false)),
+				Some(NodeInput::value(TaggedValue::TextAnchor(text_anchor), false)),
+			]);
+
+		let text_on_path_id = NodeId::new();
+		self.network_interface.insert_node(text_on_path_id, text_on_path_node, &[]);
+		self.network_interface.move_node_to_chain_start(&text_on_path_id, layer, &[], self.import);
+
+		let (rotation, scale, skew): (f64, DVec2, f64) = transform.decompose_rotation_scale_skew();
+		let translation = transform.translation;
+		let rotation = rotation.to_degrees();
+		let skew = DVec2::new(skew.atan().to_degrees(), 0.);
+
+		let transform_node = resolve_network_node_type("Transform").expect("Transform node does not exist").node_template_input_override([
+			None,
+			Some(NodeInput::value(TaggedValue::DVec2(translation), false)),
+			Some(NodeInput::value(TaggedValue::F64(rotation), false)),
+			Some(NodeInput::value(TaggedValue::DVec2(scale), false)),
+			Some(NodeInput::value(TaggedValue::DVec2(skew), false)),
+		]);
+		let transform_id = NodeId::new();
+		self.network_interface.insert_node(transform_id, transform_node, &[]);
+		self.network_interface.move_node_to_chain_start(&transform_id, layer, &[], self.import);
+
+		let stroke = resolve_proto_node_type(graphene_std::vector_nodes::stroke::IDENTIFIER)
+			.expect("Stroke node does not exist")
+			.default_node_template();
+		let stroke_id = NodeId::new();
+		self.network_interface.insert_node(stroke_id, stroke, &[]);
+		self.network_interface.move_node_to_chain_start(&stroke_id, layer, &[], self.import);
+
+		let fill = resolve_proto_node_type(graphene_std::vector_nodes::fill::IDENTIFIER)
+			.expect("Fill node does not exist")
+			.default_node_template();
+		let fill_id = NodeId::new();
+		self.network_interface.insert_node(fill_id, fill, &[]);
+		self.network_interface.move_node_to_chain_start(&fill_id, layer, &[], self.import);
+	}
+
 	pub fn insert_image_data(&mut self, image_frame: Table<Raster<CPU>>, layer: LayerNodeIdentifier) {
 		let transform = resolve_network_node_type("Transform").expect("Transform node does not exist").default_node_template();
 		let image = resolve_proto_node_type(graphene_std::raster_nodes::std_nodes::image_value::IDENTIFIER)

editor/src/messages/portfolio/document/graph_operation/utility_types.rs

@@ -273,6 +273,8 @@ tagged_value! {
 	CentroidType(vector::misc::CentroidType),
 	BooleanOperation(vector::misc::BooleanOperation),
 	TextAlign(text_nodes::TextAlign),
+	TextPathSide(text_nodes::text_on_path::TextPathSide),
+	TextAnchor(text_nodes::text_on_path::TextAnchor),
 	ScaleType(core_types::transform::ScaleType),
 }
 

node-graph/graph-craft/src/document/value.rs

@@ -3,16 +3,22 @@ use vector_types::subpath::{ManipulatorGroup, Subpath};
 use vector_types::vector::PointId;
 
 pub fn convert_usvg_path(path: &usvg::Path) -> Vec<Subpath<PointId>> {
+	convert_tiny_skia_path(path.data())
+}
+
+pub fn convert_tiny_skia_path(path_data: &usvg::tiny_skia_path::Path) -> Vec<Subpath<PointId>> {
 	let mut subpaths = Vec::new();
 	let mut manipulators_list = Vec::new();
 
-	let mut points = path.data().points().iter();
+	let mut points = path_data.points().iter();
 	let to_vec = |p: &usvg::tiny_skia_path::Point| DVec2::new(p.x as f64, p.y as f64);
 
-	for verb in path.data().verbs() {
+	for verb in path_data.verbs() {
 		match verb {
 			usvg::tiny_skia_path::PathVerb::Move => {
-				subpaths.push(Subpath::new(std::mem::take(&mut manipulators_list), false));
+				if !manipulators_list.is_empty() {
+					subpaths.push(Subpath::new(std::mem::take(&mut manipulators_list), false));
+				}
 				let Some(start) = points.next().map(to_vec) else { continue };
 				manipulators_list.push(ManipulatorGroup::new(start, Some(start), Some(start)));
 			}
@@ -38,10 +44,14 @@ pub fn convert_usvg_path(path: &usvg::Path) -> Vec<Subpath<PointId>> {
 				manipulators_list.push(ManipulatorGroup::new(end, Some(second_handle), Some(end)));
 			}
 			usvg::tiny_skia_path::PathVerb::Close => {
-				subpaths.push(Subpath::new(std::mem::take(&mut manipulators_list), true));
+				if !manipulators_list.is_empty() {
+					subpaths.push(Subpath::new(std::mem::take(&mut manipulators_list), true));
+				}
 			}
 		}
 	}
-	subpaths.push(Subpath::new(manipulators_list, false));
+	if !manipulators_list.is_empty() {
+		subpaths.push(Subpath::new(manipulators_list, false));
+	}
 	subpaths
 }

node-graph/libraries/rendering/src/convert_usvg_path.rs

@@ -2,6 +2,7 @@ use core_types::{Ctx, table::Table};
 use graph_craft::wasm_application_io::WasmEditorApi;
 use graphic_types::Vector;
 pub use text_nodes::*;
+pub use text_nodes::text_on_path::{TextAnchor, TextPathSide};
 
 /// Draws a text string as vector geometry with a choice of font and styling.
 #[node_macro::node(category("Text"))]
@@ -74,3 +75,49 @@ fn text<'i: 'n>(
 
 	to_path(&text, &font, &editor_resources.font_cache, typesetting, separate_glyph_elements)
 }
+
+/// Flows text glyphs along a vector path following the SVG 2 text-on-path layout rules (§11.8).
+#[node_macro::node(category("Text"))]
+fn text_on_path<'i: 'n>(
+	_: impl Ctx,
+	#[scope("editor-api")]
+	editor_resources: &'i WasmEditorApi,
+	/// The text content to flow along the path.
+	#[default("Lorem ipsum")]
+	text: String,
+	/// The vector path that glyphs follow.
+	path: Table<Vector>,
+	/// The typeface used to draw the text.
+	font: Font,
+	/// The font size in pixels.
+	#[unit(" px")]
+	#[default(24.)]
+	#[hard_min(1.)]
+	size: f64,
+	/// Additional spacing, in pixels, added between each character.
+	#[unit(" px")]
+	#[step(0.1)]
+	character_spacing: f64,
+	/// Arc-length offset from the path start to the first glyph.
+	#[unit(" px")]
+	start_offset: f64,
+	/// If true, start_offset is treated as a 0–1 fraction of total path length.
+	start_offset_percent: bool,
+	/// Which side of the path direction to place text.
+	side: text_nodes::text_on_path::TextPathSide,
+	/// Text anchor point — affects where along the path the text is anchored.
+	text_anchor: text_nodes::text_on_path::TextAnchor,
+) -> Table<Vector> {
+	text_nodes::text_on_path::place_text_on_path(
+		&text,
+		&path,
+		&font,
+		size,
+		character_spacing,
+		start_offset,
+		start_offset_percent,
+		side,
+		text_anchor,
+		&editor_resources.font_cache,
+	)
+}

node-graph/nodes/gstd/src/text.rs

@@ -21,6 +21,7 @@ dyn-any = { workspace = true }
 glam = { workspace = true }
 parley = { workspace = true }
 skrifa = { workspace = true }
+kurbo = { workspace = true }
 log = { workspace = true }
 
 # Optional workspace dependencies