Add font weight support and add test

(still no text rotation support)

gen-test-data/vega-specs/text/bar_axis_labels.vg.json

@@ -0,0 +1,135 @@
+{
+  "$schema": "https://vega.github.io/schema/vega/v5.json",
+  "description": "A bar graph showing what activities consume what percentage of the day.",
+  "background": "white",
+  "padding": 5,
+  "width": 200,
+  "style": "cell",
+  "config": {"style": {"cell": {"stroke": "transparent"}}},
+  "data": [
+    {
+      "name": "source_0",
+      "values": [
+        {"Activity": "Sleeping", "Time": 8},
+        {"Activity": "Eating", "Time": 2},
+        {"Activity": "TV", "Time": 4},
+        {"Activity": "Work", "Time": 8},
+        {"Activity": "Exercise", "Time": 2}
+      ]
+    },
+    {
+      "name": "data_0",
+      "source": "source_0",
+      "transform": [
+        {
+          "type": "joinaggregate",
+          "as": ["TotalTime"],
+          "ops": ["sum"],
+          "fields": ["Time"]
+        },
+        {
+          "type": "formula",
+          "expr": "datum.Time/datum.TotalTime * 100",
+          "as": "PercentOfTotal"
+        },
+        {
+          "type": "stack",
+          "groupby": ["Activity"],
+          "field": "PercentOfTotal",
+          "sort": {"field": [], "order": []},
+          "as": ["PercentOfTotal_start", "PercentOfTotal_end"],
+          "offset": "zero"
+        },
+        {
+          "type": "filter",
+          "expr": "isValid(datum[\"PercentOfTotal\"]) && isFinite(+datum[\"PercentOfTotal\"])"
+        }
+      ]
+    }
+  ],
+  "signals": [
+    {"name": "y_step", "value": 12},
+    {
+      "name": "height",
+      "update": "bandspace(domain('y').length, 0.1, 0.05) * y_step"
+    }
+  ],
+  "marks": [
+    {
+      "name": "marks",
+      "type": "rect",
+      "style": ["bar"],
+      "from": {"data": "data_0"},
+      "encode": {
+        "update": {
+          "fill": {"value": "#4c78a8"},
+          "ariaRoleDescription": {"value": "bar"},
+          "description": {
+            "signal": "\"% of total Time: \" + (format(datum[\"PercentOfTotal\"], \"\")) + \"; Activity: \" + (isValid(datum[\"Activity\"]) ? datum[\"Activity\"] : \"\"+datum[\"Activity\"])"
+          },
+          "x": {"scale": "x", "field": "PercentOfTotal_end"},
+          "x2": {"scale": "x", "field": "PercentOfTotal_start"},
+          "y": {"scale": "y", "field": "Activity"},
+          "height": {"signal": "max(0.25, bandwidth('y'))"}
+        }
+      }
+    }
+  ],
+  "scales": [
+    {
+      "name": "x",
+      "type": "linear",
+      "domain": {
+        "data": "data_0",
+        "fields": ["PercentOfTotal_start", "PercentOfTotal_end"]
+      },
+      "range": [0, {"signal": "width"}],
+      "nice": true,
+      "zero": true
+    },
+    {
+      "name": "y",
+      "type": "band",
+      "domain": {"data": "data_0", "field": "Activity", "sort": true},
+      "range": {"step": {"signal": "y_step"}},
+      "paddingInner": 0.1,
+      "paddingOuter": 0.05
+    }
+  ],
+  "axes": [
+    {
+      "scale": "x",
+      "orient": "bottom",
+      "gridScale": "y",
+      "grid": true,
+      "tickCount": {"signal": "ceil(width/40)"},
+      "domain": false,
+      "labels": false,
+      "aria": false,
+      "maxExtent": 0,
+      "minExtent": 0,
+      "ticks": false,
+      "zindex": 0
+    },
+    {
+      "scale": "x",
+      "orient": "bottom",
+      "grid": false,
+      "title": "% of total Time",
+      "labelFlush": true,
+      "labelOverlap": true,
+      "tickCount": {"signal": "ceil(width/40)"},
+      "labelFont": "Helvetica",
+      "titleFont": "Helvetica",
+      "zindex": 0
+    },
+    {
+      "scale": "y",
+      "orient": "left",
+      "grid": false,
+      "labelFont": "Helvetica",
+      "titleFont": "Helvetica",
+      "zindex": 0
+    }
+  ]
+}

vega-wgpu-renderer/src/renderers/text.rs

@@ -1,11 +1,11 @@
 use crate::renderers::canvas::CanvasUniform;
 use crate::renderers::mark::MarkShader;
 use crate::scene::text::TextInstance;
-use crate::specs::text::{TextAlignSpec, TextBaselineSpec};
+use crate::specs::text::{FontWeightNameSpec, FontWeightSpec, TextAlignSpec, TextBaselineSpec};
 use glyphon::cosmic_text::Align;
 use glyphon::{
     Attrs, Buffer, Color, Family, FontSystem, Metrics, Resolution, Shaping, SwashCache, TextArea,
-    TextAtlas, TextBounds, TextRenderer,
+    TextAtlas, TextBounds, TextRenderer, Weight,
 };
 use wgpu::{
     CommandBuffer, CommandEncoderDescriptor, Device, MultisampleState, Operations, Queue,
@@ -69,12 +69,26 @@ impl TextMarkRenderer {
             .map(|instance| {
                 let mut buffer = Buffer::new(
                     &mut self.font_system,
-                    Metrics::new(instance.font_size, instance.font_size * 1.0),
+                    Metrics::new(instance.font_size, instance.font_size),
                 );
+                let family = match instance.font.to_lowercase().as_str() {
+                    "serif" => Family::Serif,
+                    "sans serif" => Family::SansSerif,
+                    "cursive" => Family::Cursive,
+                    "fantasy" => Family::Fantasy,
+                    "monospace" => Family::Monospace,
+                    _ => Family::Name(instance.font.as_str()),
+                };
+                let weight = match instance.font_weight {
+                    FontWeightSpec::Name(FontWeightNameSpec::Bold) => Weight::BOLD,
+                    FontWeightSpec::Name(FontWeightNameSpec::Normal) => Weight::NORMAL,
+                    FontWeightSpec::Number(w) => Weight(w as u16),
+                };
+
                 buffer.set_text(
                     &mut self.font_system,
                     &instance.text,
-                    Attrs::new().family(Family::SansSerif),
+                    Attrs::new().family(family).weight(weight),
                     Shaping::Advanced,
                 );
                 buffer.set_size(
@@ -102,8 +116,9 @@ impl TextMarkRenderer {
 
                 let top = match instance.baseline {
                     TextBaselineSpec::Alphabetic => instance.position[1] - height,
-                    TextBaselineSpec::Top => instance.position[1],
-                    TextBaselineSpec::Middle => instance.position[1] - height * 0.56,
+                    // Add half pixel for top baseline for better match with resvg
+                    TextBaselineSpec::Top => instance.position[1] + 0.5,
+                    TextBaselineSpec::Middle => instance.position[1] - height * 0.5,
                     TextBaselineSpec::Bottom => instance.position[1] - height,
                     TextBaselineSpec::LineTop => todo!(),
                     TextBaselineSpec::LineBottom => todo!(),

vega-wgpu-renderer/src/scene/text.rs

@@ -63,8 +63,8 @@ impl TextInstance {
             font: item_spec
                 .font
                 .clone()
-                .unwrap_or_else(|| "Liberation Sans".to_string()),
-            font_size: item_spec.fill_opacity.unwrap_or(12.0),
+                .unwrap_or_else(|| "Sans Serif".to_string()),
+            font_size: item_spec.font_size.unwrap_or(10.0),
             font_weight: item_spec.font_weight.unwrap_or_default(),
             font_style: item_spec.font_style.unwrap_or_default(),
             limit: item_spec.limit.unwrap_or(0.0),

vega-wgpu-renderer/tests/specs/text/bar_axis_labels.dims.json

@@ -0,0 +1,6 @@
+{
+  "width": 257,
+  "height": 102,
+  "origin_x": 51,
+  "origin_y": 5
+}