@react-native-gpui/svg 15.15.0-alpha.0 → 15.15.0-alpha.1

package/desktop/src/lib.rs

@@ -3,9 +3,11 @@ use react_native_gpui::extensions::{
     register_component_renderer, ComponentNode, ComponentRenderer,
 };
 use rn_gpui_sys::ffi::RectF;
-use std::collections::HashMap;
-use std::hash::{Hash, Hasher};
-use std::sync::{Arc, Mutex, OnceLock, Weak};
+use std::sync::Arc;
+
+mod cache;
+mod key;
+mod raster;
 
 const COMPONENTS: &[&str] = &[
     "RNSVGSvgView",
@@ -27,11 +29,24 @@ const COMPONENTS: &[&str] = &[
     "RNSVGMarker",
     "RNSVGTextPath",
     "RNSVGUse",
+    "RNSVGFilter",
+    "RNSVGFeBlend",
+    "RNSVGFeColorMatrix",
+    "RNSVGFeComposite",
+    "RNSVGFeFlood",
+    "RNSVGFeGaussianBlur",
+    "RNSVGFeMerge",
+    "RNSVGFeOffset",
 ];
 
 struct SvgRenderer;
 
 impl ComponentRenderer for SvgRenderer {
+    // The SVG document is drawn from the shapes under its root.
+    fn reads_children(&self) -> bool {
+        true
+    }
+
     fn render(
         &self,
         node: &ComponentNode,
@@ -52,14 +67,37 @@ impl ComponentRenderer for SvgRenderer {
         let (scale_x, scale_y) = node.scale;
         let width = frame.w * scale_x;
         let height = frame.h * scale_y;
-        let document = svg_document(node, frame, cx);
         let scale = window.scale_factor();
-        let image = cached_svg_image(document, frame.w, frame.h, scale);
+        let image = raster::image_for(node, frame, scale, window, cx);
+        // Chrome paints an inline SVG at a whole CSS pixel: a box laid out at
+        // 2.5 is drawn at 3. The image is placed the same way, so a 15 point
+        // icon centred in a 20 point button lands where the web app's does.
         Some(
-            gpui::img(image)
-                .w(px(width))
-                .h(px(height))
-                .into_any_element(),
+            gpui::canvas(
+                |bounds, _, _| bounds,
+                move |_, bounds, window, _| {
+                    let snapped = gpui::Bounds::new(
+                        gpui::point(
+                            px((bounds.origin.x.as_f32() + 0.5).floor()),
+                            px((bounds.origin.y.as_f32() + 0.5).floor()),
+                        ),
+                        bounds.size,
+                    );
+                    if let Some(image) = &image {
+                        let _ = window.paint_image(
+                            snapped,
+                            snapped,
+                            gpui::Corners::default(),
+                            image.clone(),
+                            0,
+                            false,
+                        );
+                    }
+                },
+            )
+            .w(px(width))
+            .h(px(height))
+            .into_any_element(),
         )
     }
 }
@@ -70,13 +108,37 @@ pub fn rn_gpui_register() {
     }
 }
 
-fn svg_document(node: &ComponentNode, frame: RectF, cx: &App) -> String {
+/// Where one coverage sample sits, so a shape can be drawn once per sample.
+#[derive(Clone, Copy)]
+pub(crate) struct Sample {
+    /// The sample's offset from the pixel centre, in device pixels.
+    pub(crate) dx: f32,
+    pub(crate) dy: f32,
+    /// Device pixels per CSS pixel.
+    pub(crate) scale: f32,
+}
+
+/// Chrome rasterises with four coverage samples per pixel at these offsets (in
+/// pixels from the centre): the standard Direct3D 4x pattern. A pixel is
+/// therefore never covered by anything but 0, 1/4, 1/2, 3/4 or all, and the edge
+/// of an icon takes the same five steps here.
+pub(crate) const SAMPLE_OFFSETS: [(f32, f32); 4] = [
+    (-2.0 / 16.0, -6.0 / 16.0),
+    (6.0 / 16.0, -2.0 / 16.0),
+    (-6.0 / 16.0, 2.0 / 16.0),
+    (2.0 / 16.0, 6.0 / 16.0),
+];
+
+pub(crate) fn svg_document(node: &ComponentNode, frame: RectF, sample: Option<Sample>) -> String {
     let props = &node.props;
     let mut attributes = format!(
         "xmlns=\"http://www.w3.org/2000/svg\" width=\"{}\" height=\"{}\"",
         svg_number(frame.w),
         svg_number(frame.h)
     );
+    if sample.is_some() {
+        attributes.push_str(" shape-rendering=\"crispEdges\"");
+    }
     for (name, attribute) in [
         ("color", "color"),
         ("fill", "fill"),
@@ -112,11 +174,11 @@ fn svg_document(node: &ComponentNode, frame: RectF, cx: &App) -> String {
             .unwrap_or("miter");
         attributes.push_str(&format!(" stroke-linejoin=\"{join}\""));
     }
-    if let (Some(width), Some(height)) = (
+    let view_box = match (
         props.get("vbWidth").and_then(serde_json::Value::as_f64),
         props.get("vbHeight").and_then(serde_json::Value::as_f64),
     ) {
-        if width > 0.0 && height > 0.0 {
+        (Some(width), Some(height)) if width > 0.0 && height > 0.0 => {
             let min_x = props
                 .get("minX")
                 .and_then(serde_json::Value::as_f64)
@@ -125,6 +187,36 @@ fn svg_document(node: &ComponentNode, frame: RectF, cx: &App) -> String {
                 .get("minY")
                 .and_then(serde_json::Value::as_f64)
                 .unwrap_or(0.0);
+            let align = props.get("align").and_then(serde_json::Value::as_str);
+            let mode = match props
+                .get("meetOrSlice")
+                .and_then(serde_json::Value::as_i64)
+                .unwrap_or(0)
+            {
+                1 => "slice",
+                2 => "none",
+                _ => "meet",
+            };
+            Some((min_x, min_y, width, height, align, mode))
+        }
+        _ => None,
+    };
+    match (view_box, sample) {
+        (Some((min_x, min_y, width, height, align, mode)), sample) => {
+            // The sample's shift in user units: how many of them one device
+            // pixel covers depends on how the view box is fitted to the frame.
+            let (mut min_x, mut min_y) = (min_x, min_y);
+            if let Some(sample) = sample {
+                let fit_x = f64::from(frame.w * sample.scale) / width;
+                let fit_y = f64::from(frame.h * sample.scale) / height;
+                let (unit_x, unit_y) = match (align, mode) {
+                    (Some("none"), _) | (Some(_), "none") => (fit_x, fit_y),
+                    (_, "slice") => (fit_x.max(fit_y), fit_x.max(fit_y)),
+                    _ => (fit_x.min(fit_y), fit_x.min(fit_y)),
+                };
+                min_x += f64::from(sample.dx) / unit_x;
+                min_y += f64::from(sample.dy) / unit_y;
+            }
             attributes.push_str(&format!(
                 " viewBox=\"{} {} {} {}\"",
                 svg_number(min_x as f32),
@@ -132,16 +224,7 @@ fn svg_document(node: &ComponentNode, frame: RectF, cx: &App) -> String {
                 svg_number(width as f32),
                 svg_number(height as f32)
             ));
-            if let Some(align) = props.get("align").and_then(serde_json::Value::as_str) {
-                let mode = match props
-                    .get("meetOrSlice")
-                    .and_then(serde_json::Value::as_i64)
-                    .unwrap_or(0)
-                {
-                    1 => "slice",
-                    2 => "none",
-                    _ => "meet",
-                };
+            if let Some(align) = align {
                 attributes.push_str(&format!(
                     " preserveAspectRatio=\"{} {}\"",
                     svg_escape(align),
@@ -149,16 +232,28 @@ fn svg_document(node: &ComponentNode, frame: RectF, cx: &App) -> String {
                 ));
             }
         }
+        (None, Some(sample)) => {
+            // Without a view box the user unit is the CSS pixel; one is added
+            // only to carry the shift.
+            attributes.push_str(&format!(
+                " viewBox=\"{} {} {} {}\"",
+                svg_number(sample.dx / sample.scale),
+                svg_number(sample.dy / sample.scale),
+                svg_number(frame.w),
+                svg_number(frame.h)
+            ));
+        }
+        (None, None) => {}
     }
     let mut document = format!("<svg {attributes}>");
     for child in &node.children {
-        svg_node(child, cx, &mut document);
+        svg_node(child, &mut document);
     }
     document.push_str("</svg>");
     document
 }
 
-fn svg_node(node: &ComponentNode, cx: &App, output: &mut String) {
+fn svg_node(node: &ComponentNode, output: &mut String) {
     let props = &node.props;
     let element = match node.component.as_str() {
         "RNSVGCircle" => "circle",
@@ -179,11 +274,19 @@ fn svg_node(node: &ComponentNode, cx: &App, output: &mut String) {
         "RNSVGTSpan" => "tspan",
         "RNSVGTextPath" => "textPath",
         "RNSVGUse" => "use",
+        "RNSVGFilter" => "filter",
+        "RNSVGFeBlend" => "feBlend",
+        "RNSVGFeColorMatrix" => "feColorMatrix",
+        "RNSVGFeComposite" => "feComposite",
+        "RNSVGFeFlood" => "feFlood",
+        "RNSVGFeGaussianBlur" => "feGaussianBlur",
+        "RNSVGFeMerge" => "feMerge",
+        "RNSVGFeOffset" => "feOffset",
         _ => "",
     };
     if element.is_empty() {
         for child in &node.children {
-            svg_node(child, cx, output);
+            svg_node(child, output);
         }
         return;
     }
@@ -287,26 +390,101 @@ fn svg_node(node: &ComponentNode, cx: &App, output: &mut String) {
         attributes.push_str(&format!(" stroke-linejoin=\"{join}\""));
     }
     if let Some(matrix) = props.get("matrix").and_then(serde_json::Value::as_array) {
-        if matrix.len() >= 16 {
-            let values = [0, 1, 4, 5, 12, 13].map(|index| matrix[index].as_f64().unwrap_or(0.0));
-            attributes.push_str(&format!(
-                " transform=\"matrix({} {} {} {} {} {})\"",
-                values[0], values[1], values[2], values[3], values[4], values[5]
-            ));
+        let component = |index: usize| matrix.get(index).and_then(serde_json::Value::as_f64);
+        let values = match matrix.len() {
+            6 => [0, 1, 2, 3, 4, 5],
+            16.. => [0, 1, 4, 5, 12, 13],
+            _ => [usize::MAX; 6],
+        }
+        .map(component);
+        if let [Some(a), Some(b), Some(c), Some(d), Some(e), Some(f)] = values {
+            attributes.push_str(&format!(" transform=\"matrix({a} {b} {c} {d} {e} {f})\""));
         }
     }
+    if let Some(id) = props
+        .get("name")
+        .and_then(serde_json::Value::as_str)
+        .filter(|id| !id.is_empty())
+    {
+        attributes.push_str(&format!(" id=\"{}\"", svg_escape(id)));
+    }
+    if let Some(filter) = props
+        .get("filter")
+        .and_then(serde_json::Value::as_str)
+        .filter(|filter| !filter.is_empty())
+    {
+        attributes.push_str(&format!(" filter=\"url(#{})\"", svg_escape(filter)));
+    }
+    if element == "filter" {
+        attributes.push_str(" color-interpolation-filters=\"sRGB\"");
+    }
+    if element.starts_with("fe") || element == "filter" {
+        attributes.push_str(&filter_primitive_attributes(props));
+    }
     output.push('<');
     output.push_str(element);
     output.push_str(&attributes);
     output.push('>');
+    if element == "feMerge" {
+        for id in props
+            .get("nodes")
+            .and_then(serde_json::Value::as_array)
+            .into_iter()
+            .flatten()
+            .filter_map(serde_json::Value::as_str)
+        {
+            output.push_str(&format!("<feMergeNode in=\"{}\"/>", svg_escape(id)));
+        }
+    }
     for child in &node.children {
-        svg_node(child, cx, output);
+        svg_node(child, output);
     }
     output.push_str("</");
     output.push_str(element);
     output.push('>');
 }
 
+fn filter_primitive_attributes(props: &serde_json::Value) -> String {
+    let mut attributes = String::new();
+    let text = |name: &str| match props.get(name) {
+        Some(serde_json::Value::String(value)) if !value.is_empty() => Some(value.clone()),
+        Some(value) if value.is_array() || value.is_number() => svg_value(value),
+        _ => None,
+    };
+    for (name, attribute) in [
+        ("in1", "in"),
+        ("in2", "in2"),
+        ("result", "result"),
+        ("mode", "mode"),
+        ("type", "type"),
+        ("values", "values"),
+        ("operator1", "operator"),
+        ("k1", "k1"),
+        ("k2", "k2"),
+        ("k3", "k3"),
+        ("k4", "k4"),
+        ("dx", "dx"),
+        ("dy", "dy"),
+        ("edgeMode", "edgeMode"),
+        ("floodOpacity", "flood-opacity"),
+        ("filterUnits", "filterUnits"),
+        ("primitiveUnits", "primitiveUnits"),
+    ] {
+        if let Some(value) = text(name) {
+            attributes.push_str(&format!(" {attribute}=\"{}\"", svg_escape(&value)));
+        }
+    }
+    if let Some(color) = props.get("floodColor").and_then(svg_value) {
+        attributes.push_str(&format!(" flood-color=\"{}\"", svg_escape(&color)));
+    }
+    let deviation = |name: &str| props.get(name).and_then(serde_json::Value::as_f64);
+    if let Some(x) = deviation("stdDeviationX") {
+        let y = deviation("stdDeviationY").unwrap_or(x);
+        attributes.push_str(&format!(" stdDeviation=\"{x} {y}\""));
+    }
+    attributes
+}
+
 fn svg_property_is_set(props: &serde_json::Value, name: &str) -> bool {
     if !matches!(
         name,
@@ -398,40 +576,6 @@ fn svg_number(value: f32) -> String {
     }
 }
 
-fn cached_svg_image(
-    document: String,
-    width: f32,
-    height: f32,
-    scale: f32,
-) -> std::sync::Arc<gpui::Image> {
-    type SvgCache = HashMap<(u64, u32, u32, u32), Weak<gpui::Image>>;
-    static CACHE: OnceLock<Mutex<SvgCache>> = OnceLock::new();
-    let mut hasher = std::collections::hash_map::DefaultHasher::new();
-    document.hash(&mut hasher);
-    let key = (
-        hasher.finish(),
-        width.to_bits(),
-        height.to_bits(),
-        scale.to_bits(),
-    );
-    let cache = CACHE.get_or_init(|| Mutex::new(HashMap::new()));
-    let mut cache = cache
-        .lock()
-        .unwrap_or_else(|poisoned| poisoned.into_inner());
-    if let Some(image) = cache.get(&key).and_then(Weak::upgrade) {
-        return image;
-    }
-    let image = std::sync::Arc::new(gpui::Image::from_bytes(
-        gpui::ImageFormat::Svg,
-        document.into_bytes(),
-    ));
-    cache.insert(key, std::sync::Arc::downgrade(&image));
-    if cache.len() > 512 {
-        cache.retain(|_, image| image.strong_count() > 0);
-    }
-    image
-}
-
 #[cfg(test)]
 mod svg_paint_tests {
     use super::{svg_property_is_set, svg_value};