Merge pull request #6675 from penpot/alotor-grid-helpers

✨ Add grid helpers to wasm

render-wasm/src/render/grid_layout.rs

@@ -0,0 +1,77 @@
+use skia_safe::{self as skia};
+use std::collections::HashMap;
+
+use crate::math::{Bounds, Matrix, Rect};
+use crate::shapes::modifiers::grid_layout::{calculate_tracks, create_cell_data};
+use crate::shapes::{modified_children_ids, Frame, Layout, Shape, StructureEntry, Type};
+use crate::uuid::Uuid;
+
+pub fn render_overlay(
+    zoom: f32,
+    canvas: &skia::Canvas,
+    shape: &Shape,
+    shapes: &HashMap<Uuid, &mut Shape>,
+    modifiers: &HashMap<Uuid, Matrix>,
+    structure: &HashMap<Uuid, Vec<StructureEntry>>,
+) {
+    let Type::Frame(Frame {
+        layout: Some(Layout::GridLayout(layout_data, grid_data)),
+        ..
+    }) = &shape.shape_type
+    else {
+        return;
+    };
+
+    let bounds = &HashMap::<Uuid, Bounds>::new();
+
+    let shape = &mut shape.clone();
+    if let Some(modifiers) = modifiers.get(&shape.id) {
+        shape.apply_transform(modifiers);
+    }
+
+    let layout_bounds = shape.bounds();
+    let children = modified_children_ids(shape, structure.get(&shape.id));
+
+    let column_tracks = calculate_tracks(
+        true,
+        shape,
+        layout_data,
+        grid_data,
+        &layout_bounds,
+        &grid_data.cells,
+        shapes,
+        bounds,
+    );
+
+    let row_tracks = calculate_tracks(
+        false,
+        shape,
+        layout_data,
+        grid_data,
+        &layout_bounds,
+        &grid_data.cells,
+        shapes,
+        bounds,
+    );
+
+    let cells = create_cell_data(
+        &layout_bounds,
+        &children,
+        shapes,
+        &grid_data.cells,
+        &column_tracks,
+        &row_tracks,
+        true,
+    );
+
+    let mut paint = skia::Paint::default();
+    paint.set_style(skia::PaintStyle::Stroke);
+    paint.set_color(skia::Color::from_rgb(255, 111, 224));
+
+    paint.set_stroke_width(1.0 / zoom);
+
+    for cell in cells.iter() {
+        let rect = Rect::from_xywh(cell.anchor.x, cell.anchor.y, cell.width, cell.height);
+        canvas.draw_rect(rect, &paint);
+    }
+}

render-wasm/src/render/surfaces.rs

@@ -17,14 +17,15 @@ const TILE_SIZE_MULTIPLIER: i32 = 2;
 #[repr(u32)]
 #[derive(Debug, PartialEq, Clone, Copy)]
 pub enum SurfaceId {
-    Target = 0b0000_0001,
-    Cache = 0b0000_0010,
-    Current = 0b0000_0100,
-    Fills = 0b0000_1000,
-    Strokes = 0b0001_0000,
-    DropShadows = 0b0010_0000,
-    InnerShadows = 0b0100_0000,
-    Debug = 0b1000_0000,
+    Target = 0b0_0000_0001,
+    Cache = 0b0_0000_0010,
+    Current = 0b0_0000_0100,
+    Fills = 0b0_0000_1000,
+    Strokes = 0b0_0001_0000,
+    DropShadows = 0b0_0010_0000,
+    InnerShadows = 0b0_0100_0000,
+    UI = 0b0_1000_0000,
+    Debug = 0b1_0000_0000,
 }
 
 pub struct Surfaces {
@@ -39,8 +40,10 @@ pub struct Surfaces {
     shape_strokes: skia::Surface,
     // used for rendering shadows
     drop_shadows: skia::Surface,
-    // used fo rendering over shadows.
+    // used for rendering over shadows.
     inner_shadows: skia::Surface,
+    // used for displaying auxiliary workspace elements
+    ui: skia::Surface,
     // for drawing debug info.
     debug: skia::Surface,
     // for drawing tiles.
@@ -74,6 +77,8 @@ impl Surfaces {
             gpu_state.create_surface_with_isize("shape_fills".to_string(), extra_tile_dims);
         let shape_strokes =
             gpu_state.create_surface_with_isize("shape_strokes".to_string(), extra_tile_dims);
+
+        let ui = gpu_state.create_surface_with_dimensions("ui".to_string(), width, height);
         let debug = gpu_state.create_surface_with_dimensions("debug".to_string(), width, height);
 
         let tiles = TileTextureCache::new();
@@ -85,6 +90,7 @@ impl Surfaces {
             inner_shadows,
             shape_fills,
             shape_strokes,
+            ui,
             debug,
             tiles,
             sampling_options,
@@ -198,6 +204,7 @@ impl Surfaces {
             SurfaceId::Fills => &mut self.shape_fills,
             SurfaceId::Strokes => &mut self.shape_strokes,
             SurfaceId::Debug => &mut self.debug,
+            SurfaceId::UI => &mut self.ui,
         }
     }
 
@@ -205,6 +212,7 @@ impl Surfaces {
         let dim = (target.width(), target.height());
         self.target = target;
         self.debug = self.target.new_surface_with_dimensions(dim).unwrap();
+        self.ui = self.target.new_surface_with_dimensions(dim).unwrap();
         // The rest are tile size surfaces
     }
 
@@ -261,6 +269,10 @@ impl Surfaces {
         self.canvas(SurfaceId::Debug)
             .clear(skia::Color::TRANSPARENT)
             .reset_matrix();
+
+        self.canvas(SurfaceId::UI)
+            .clear(skia::Color::TRANSPARENT)
+            .reset_matrix();
     }
 
     pub fn cache_current_tile_texture(

render-wasm/src/render/ui.rs

@@ -0,0 +1,43 @@
+use skia_safe::{self as skia, Color4f};
+use std::collections::HashMap;
+
+use crate::math::Matrix;
+use crate::render::grid_layout;
+use crate::shapes::{Shape, StructureEntry};
+use crate::uuid::Uuid;
+
+use super::{RenderState, SurfaceId};
+
+pub fn render(
+    render_state: &mut RenderState,
+    shapes: &HashMap<Uuid, &mut Shape>,
+    modifiers: &HashMap<Uuid, Matrix>,
+    structure: &HashMap<Uuid, Vec<StructureEntry>>,
+) {
+    let canvas = render_state.surfaces.canvas(SurfaceId::UI);
+
+    canvas.clear(Color4f::new(0.0, 0.0, 0.0, 0.0));
+    canvas.save();
+
+    let viewbox = render_state.viewbox;
+    let zoom = viewbox.zoom * render_state.options.dpr();
+
+    canvas.scale((zoom, zoom));
+
+    canvas.translate((-viewbox.area.left, -viewbox.area.top));
+
+    let canvas = render_state.surfaces.canvas(SurfaceId::UI);
+
+    if let Some(id) = render_state.show_grid {
+        if let Some(shape) = shapes.get(&id) {
+            grid_layout::render_overlay(zoom, canvas, shape, shapes, modifiers, structure);
+        }
+    }
+
+    canvas.restore();
+    render_state.surfaces.draw_into(
+        SurfaceId::UI,
+        SurfaceId::Target,
+        Some(&skia::Paint::default()),
+    );
+}