Merge pull request #511 from gridaco/canary

Grida Canvas - Outline Mode

Author: softmarshmallow

crates/grida-canvas-wasm/lib/bin/grida-canvas-wasm.js

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:a8761491f638c3b4591d3ab9c1d370eda5a29bfd327e2a935e0f9941c922b75b
-size 12873266
+oid sha256:dfacee3fc7189fd9e9ef8c69e97c71839200eb0fc53101a4186a3e085fc775bb
+size 12882632

crates/grida-canvas-wasm/lib/bin/grida_canvas_wasm.wasm

@@ -50,11 +50,7 @@ declare namespace canvas {
       cols: number,
       rows: number
     ): void;
-    _pointer_move(
-      state: GridaCanvasApplicationPtr,
-      x: number,
-      y: number
-    ): void;
+    _pointer_move(state: GridaCanvasApplicationPtr, x: number, y: number): void;
     _add_font(
       state: GridaCanvasApplicationPtr,
       family_ptr: number,
@@ -183,5 +179,15 @@ declare namespace canvas {
       state: GridaCanvasApplicationPtr,
       stable: boolean
     ): void;
+
+    _runtime_renderer_set_render_policy_flags(
+      state: GridaCanvasApplicationPtr,
+      flags: number
+    ): void;
+
+    _runtime_renderer_set_outline_mode(
+      state: GridaCanvasApplicationPtr,
+      enable: boolean
+    ): void;
   }
 }

crates/grida-canvas-wasm/lib/modules/canvas-bindings.d.ts

@@ -402,6 +402,16 @@ export class Scene {
     this.module._runtime_renderer_set_pixel_preview_stable(this.appptr, stable);
   }
 
+  runtime_renderer_set_render_policy_flags(flags: number) {
+    this._assertAlive();
+    this.module._runtime_renderer_set_render_policy_flags(this.appptr, flags);
+  }
+
+  runtime_renderer_set_outline_mode(enable: boolean) {
+    this._assertAlive();
+    this.module._runtime_renderer_set_outline_mode(this.appptr, enable);
+  }
+
   // ====================================================================================================
   // DEVTOOLS
   // ====================================================================================================

crates/grida-canvas-wasm/lib/modules/canvas.ts

@@ -1,6 +1,6 @@
 {
   "name": "@grida/canvas-wasm",
-  "version": "0.90.0-canary.3",
+  "version": "0.90.0-canary.4",
   "private": false,
   "description": "WASM bindings for Grida Canvas",
   "keywords": [

crates/grida-canvas-wasm/package.json

@@ -609,6 +609,38 @@ pub unsafe extern "C" fn runtime_renderer_set_pixel_preview_stable(
     }
 }
 
+#[no_mangle]
+/// js::_runtime_renderer_set_render_policy_flags
+pub unsafe extern "C" fn runtime_renderer_set_render_policy_flags(
+    app: *mut UnknownTargetApplication,
+    flags: u32,
+) {
+    if let Some(app) = app.as_mut() {
+        app.runtime_renderer_set_render_policy_flags(flags);
+    }
+}
+
+#[no_mangle]
+/// js::_runtime_renderer_set_outline_mode
+///
+/// Back-compat shim: delegates to `runtime_renderer_set_render_policy_flags`.
+pub unsafe extern "C" fn runtime_renderer_set_outline_mode(
+    app: *mut UnknownTargetApplication,
+    enable: bool,
+) {
+    use cg::runtime::render_policy::{
+        RenderPolicy, RenderPolicyFlags, FLAG_RENDER_OUTLINES_ALWAYS,
+    };
+    if let Some(app) = app.as_mut() {
+        let flags: RenderPolicyFlags = if enable {
+            FLAG_RENDER_OUTLINES_ALWAYS
+        } else {
+            RenderPolicy::STANDARD.to_flags()
+        };
+        app.runtime_renderer_set_render_policy_flags(flags);
+    }
+}
+
 #[no_mangle]
 /// js::_devtools_rendering_set_show_fps_meter
 pub unsafe extern "C" fn devtools_rendering_set_show_fps_meter(

crates/grida-canvas-wasm/src/wasm_application.rs

@@ -0,0 +1,180 @@
+//! Golden: Outline Mode (Normal vs Outline)
+//!
+//! Renders the same scene twice:
+//! - Normal rendering (fills, strokes, effects)
+//! - Wireframe policy (geometry-only outlines, #444444)
+//!
+//! Output: `crates/grida-canvas/goldens/outline_mode.png`
+
+use cg::cg::prelude::*;
+use cg::node::{
+    factory::NodeFactory,
+    scene_graph::{Parent, SceneGraph},
+    schema::*,
+};
+use cg::runtime::{
+    camera::Camera2D,
+    render_policy::RenderPolicy,
+    scene::{Backend, FrameFlushResult, Renderer, RendererOptions},
+};
+use skia_safe::{surfaces, Color, Font, Paint as SkPaint, Rect};
+
+fn build_scene() -> Scene {
+    let nf = NodeFactory::new();
+
+    // 1. Circle (filled)
+    let mut circle = nf.create_ellipse_node();
+    // Camera is center-based (world origin at viewport center), so use signed positions.
+    circle.transform = math2::transform::AffineTransform::new(-32.0, -24.0, 0.0);
+    circle.size = Size {
+        width: 44.0,
+        height: 44.0,
+    };
+    circle.set_fill(Paint::Solid(SolidPaint {
+        color: CGColor::from_rgba(255, 0, 0, 255),
+        blend_mode: BlendMode::default(),
+        active: true,
+    }));
+    circle.strokes = Paints::new([Paint::Solid(SolidPaint::BLACK)]);
+    circle.stroke_width = SingularStrokeWidth(Some(3.0));
+
+    // 2. Triangle (regular polygon, filled)
+    let mut triangle = nf.create_regular_polygon_node();
+    triangle.transform = math2::transform::AffineTransform::new(32.0, -24.0, 0.0);
+    triangle.size = Size {
+        width: 44.0,
+        height: 44.0,
+    };
+    triangle.point_count = 3;
+    triangle.set_fill(Paint::Solid(SolidPaint {
+        color: CGColor::from_rgba(0, 153, 255, 255),
+        blend_mode: BlendMode::default(),
+        active: true,
+    }));
+    triangle.strokes = Paints::new([Paint::Solid(SolidPaint::BLACK)]);
+    triangle.stroke_width = SingularStrokeWidth(Some(3.0));
+
+    // 3. Text (single text node)
+    let mut text = nf.create_text_span_node();
+    text.transform = math2::transform::AffineTransform::new(-52.0, 28.0, 0.0);
+    text.text = "Outline".to_string();
+    text.fills = Paints::new([Paint::Solid(SolidPaint::BLACK)]);
+    text.text_style.font_size = 26.0;
+    text.text_style.font_family = "Geist Mono".to_string();
+
+    let mut graph = SceneGraph::new();
+    graph.append_children(
+        vec![
+            Node::Ellipse(circle),
+            Node::RegularPolygon(triangle),
+            Node::TextSpan(text),
+        ],
+        Parent::Root,
+    );
+
+    Scene {
+        name: "Outline Mode Golden".to_string(),
+        graph,
+        background_color: Some(CGColor::WHITE),
+    }
+}
+
+fn render_with_outline_mode(outline: bool) -> skia_safe::Image {
+    let (w, h) = (128u32, 128u32);
+    let scene = build_scene();
+
+    let mut camera = Camera2D::new(Size {
+        width: w as f32,
+        height: h as f32,
+    });
+    camera.set_zoom(1.0);
+
+    let mut renderer = Renderer::new_with_options(
+        Backend::new_from_raster(w as i32, h as i32),
+        None,
+        camera,
+        RendererOptions {
+            use_embedded_fonts: true,
+        },
+    );
+
+    renderer.load_scene(scene);
+    renderer.set_render_policy(if outline {
+        RenderPolicy::WIREFRAME_DEFAULT
+    } else {
+        RenderPolicy::STANDARD
+    });
+    renderer.queue_unstable();
+
+    match renderer.flush() {
+        FrameFlushResult::OK(_) => {}
+        _ => panic!("expected rendered frame"),
+    }
+
+    let surface = unsafe { &mut *renderer.backend.get_surface() };
+    let image = surface.image_snapshot();
+    renderer.free();
+    image
+}
+
+fn main() {
+    let normal = render_with_outline_mode(false);
+    let outline = render_with_outline_mode(true);
+
+    let padding = 16.0;
+    let label_h = 18.0;
+    let out_w = (normal.width() as f32 * 2.0 + padding * 3.0) as i32;
+    let out_h = (normal.height() as f32 + padding * 2.0 + label_h) as i32;
+
+    let mut surface = surfaces::raster_n32_premul((out_w, out_h)).expect("surface");
+    let canvas = surface.canvas();
+    canvas.clear(Color::WHITE);
+
+    let left_x = padding;
+    let top_y = padding + label_h;
+    let right_x = padding * 2.0 + normal.width() as f32;
+
+    // Draw images
+    canvas.draw_image(&normal, (left_x, top_y), None);
+    canvas.draw_image(&outline, (right_x, top_y), None);
+
+    // Labels
+    let font = Font::new(
+        cg::fonts::embedded::typeface(cg::fonts::embedded::geistmono::BYTES),
+        12.0,
+    );
+    let mut paint = SkPaint::default();
+    paint.set_color(Color::BLACK);
+    paint.set_anti_alias(true);
+    canvas.draw_str("Normal", (left_x, padding + 12.0), &font, &paint);
+    canvas.draw_str("Outline Mode", (right_x, padding + 12.0), &font, &paint);
+
+    // Frame separators (optional)
+    let mut border = SkPaint::default();
+    border.set_color(Color::from_argb(255, 220, 220, 220));
+    border.set_style(skia_safe::paint::Style::Stroke);
+    border.set_stroke_width(1.0);
+    canvas.draw_rect(
+        Rect::from_xywh(left_x, top_y, normal.width() as f32, normal.height() as f32),
+        &border,
+    );
+    canvas.draw_rect(
+        Rect::from_xywh(
+            right_x,
+            top_y,
+            normal.width() as f32,
+            normal.height() as f32,
+        ),
+        &border,
+    );
+
+    let image = surface.image_snapshot();
+    let data = image
+        .encode(None, skia_safe::EncodedImageFormat::PNG, None)
+        .expect("encode");
+    std::fs::write(
+        concat!(env!("CARGO_MANIFEST_DIR"), "/goldens/outline_mode.png"),
+        data.as_bytes(),
+    )
+    .expect("write png");
+}

crates/grida-canvas/examples/golden_outline_mode.rs

@@ -21,14 +21,18 @@ impl Default for PictureCacheStrategy {
 #[derive(Debug, Clone)]
 pub struct PictureCache {
     strategy: PictureCacheStrategy,
-    node_pictures: HashMap<NodeId, Picture>,
+    /// Fast-path store for the default render variant (variant key = 0).
+    default_store: HashMap<NodeId, Picture>,
+    /// Store for non-default render variants (variant key != 0).
+    variant_store: HashMap<(NodeId, u64), Picture>,
 }
 
 impl PictureCache {
     pub fn new() -> Self {
         Self {
             strategy: PictureCacheStrategy::default(),
-            node_pictures: HashMap::new(),
+            default_store: HashMap::new(),
+            variant_store: HashMap::new(),
         }
     }
 
@@ -42,22 +46,44 @@ impl PictureCache {
     }
 
     pub fn get_node_picture(&self, id: &NodeId) -> Option<&Picture> {
-        self.node_pictures.get(id)
+        self.default_store.get(id)
     }
 
     pub fn set_node_picture(&mut self, id: NodeId, picture: Picture) {
-        self.node_pictures.insert(id, picture);
+        self.default_store.insert(id, picture);
+    }
+
+    /// Lookup a picture for a node in a specific render variant.
+    ///
+    /// - `variant_key = 0` resolves to the default fast-path store.
+    pub fn get_node_picture_variant(&self, id: &NodeId, variant_key: u64) -> Option<&Picture> {
+        if variant_key == 0 {
+            return self.default_store.get(id);
+        }
+        self.variant_store.get(&(id.clone(), variant_key))
+    }
+
+    /// Store a picture for a node in a specific render variant.
+    ///
+    /// - `variant_key = 0` resolves to the default fast-path store.
+    pub fn set_node_picture_variant(&mut self, id: NodeId, variant_key: u64, picture: Picture) {
+        if variant_key == 0 {
+            self.default_store.insert(id, picture);
+            return;
+        }
+        self.variant_store.insert((id, variant_key), picture);
     }
 
     pub fn len(&self) -> usize {
-        self.node_pictures.len()
+        self.default_store.len() + self.variant_store.len()
     }
 
     pub fn depth(&self) -> Option<usize> {
         self.strategy.depth
     }
 
     pub fn invalidate(&mut self) {
-        self.node_pictures.clear();
+        self.default_store.clear();
+        self.variant_store.clear();
     }
 }

crates/grida-canvas/goldens/outline_mode.png

@@ -132,11 +132,22 @@ impl SceneCache {
         self.picture.get_node_picture(id)
     }
 
+    /// Return a picture for a specific node in a specific render variant if cached.
+    pub fn get_node_picture_variant(&self, id: &NodeId, variant_key: u64) -> Option<&Picture> {
+        self.picture.get_node_picture_variant(id, variant_key)
+    }
+
     /// Store a picture for a node.
     pub fn set_node_picture(&mut self, id: NodeId, picture: Picture) {
         self.picture.set_node_picture(id, picture);
     }
 
+    /// Store a picture for a node in a specific render variant.
+    pub fn set_node_picture_variant(&mut self, id: NodeId, variant_key: u64, picture: Picture) {
+        self.picture
+            .set_node_picture_variant(id, variant_key, picture);
+    }
+
     /// Query painter layer indices whose bounds intersect with the given rectangle.
     /// This includes layers that are:
     /// - Fully contained within the rectangle