Merge pull request #5343 from penpot/azazeln28-render-only-visible-shapes

🎉  Render only visible shapes

docker/devenv/Dockerfile

@@ -99,6 +99,7 @@ RUN set -ex; \
         libnss3 \
         libgbm1 \
         xvfb \
+        libfontconfig-dev \
     ; \
     rm -rf /var/lib/apt/lists/*;
 

frontend/src/app/main/ui/workspace/viewport_wasm.cljs

@@ -285,6 +285,10 @@
         (fn []
           (wasm.api/clear-canvas))))
 
+    (mf/with-effect [vport]
+      (when @canvas-init?
+        (wasm.api/resize-canvas (:width vport) (:height vport))))
+
     (mf/with-effect [base-objects canvas-init?]
       (when @canvas-init?
         (wasm.api/set-objects base-objects)))

frontend/src/app/render_wasm/api.cljs

@@ -120,13 +120,13 @@
   ;; https://rust-skia.github.io/doc/skia_safe/enum.BlendMode.html
   (h/call internal-module "_set_shape_blend_mode" (translate-blend-mode blend-mode)))
 
-(def debounce_render (fns/debounce render 100))
+(def debounce-render (fns/debounce render 100))
 
 (defn set-view
   [zoom vbox]
-  (h/call internal-module "_set_view" zoom (- (:x vbox)) (- (:y vbox)) (:width vbox) (:height vbox))
+  (h/call internal-module "_set_view" zoom (- (:x vbox)) (- (:y vbox)))
   (h/call internal-module "_navigate")
-  (debounce_render))
+  (debounce-render))
 
 (defn set-objects
   [objects]
@@ -163,6 +163,10 @@
   ;; TODO: perform corresponding cleaning
   )
 
+(defn resize-canvas
+  [width height]
+  (h/call internal-module "_resize_canvas" width height))
+
 (defn assign-canvas
   [canvas]
   (let [gl      (unchecked-get internal-module "GL")
@@ -175,7 +179,8 @@
     (.makeContextCurrent ^js gl handle)
     ;; Initialize Skia
     (^function init-fn (.-width ^js canvas)
-                       (.-height ^js canvas))
+                       (.-height ^js canvas)
+                       1)
     (set! (.-width canvas) (.-clientWidth ^js canvas))
     (set! (.-height canvas) (.-clientHeight ^js canvas))))
 

render-wasm/src/debug.rs

@@ -0,0 +1 @@
+pub const DEBUG_VISIBLE: u32 = 0x01;

render-wasm/src/main.rs

@@ -1,4 +1,6 @@
+pub mod debug;
 pub mod images;
+pub mod math;
 pub mod render;
 pub mod shapes;
 pub mod state;
@@ -29,8 +31,8 @@ fn init_gl() {
 
 /// This is called from JS after the WebGL context has been created.
 #[no_mangle]
-pub extern "C" fn init(width: i32, height: i32) {
+pub extern "C" fn init(width: i32, height: i32, debug: u32) {
-    let state_box = Box::new(State::with_capacity(width, height, 2048));
+    let state_box = Box::new(State::with_capacity(width, height, debug, 2048));
     unsafe {
         STATE = Some(state_box);
     }
@@ -39,7 +41,7 @@ pub extern "C" fn init(width: i32, height: i32) {
 #[no_mangle]
 pub unsafe extern "C" fn render() {
     let state = unsafe { STATE.as_mut() }.expect("got an invalid state pointer");
-    state.draw_all_shapes();
+    state.render_all();
 }
 
 #[no_mangle]
@@ -55,9 +57,27 @@ pub extern "C" fn reset_canvas() {
 }
 
 #[no_mangle]
-pub extern "C" fn set_view(zoom: f32, x: f32, y: f32, width: f32, height: f32) {
+pub extern "C" fn resize_canvas(width: i32, height: i32) {
     let state = unsafe { STATE.as_mut() }.expect("got an invalid state pointer");
-    state.set_view(zoom, (x, y), (width, height));
+    state.resize(width, height);
+}
+
+#[no_mangle]
+pub extern "C" fn set_view(zoom: f32, x: f32, y: f32) {
+    let state = unsafe { STATE.as_mut() }.expect("got an invalid state pointer");
+    state.viewbox.set_all(zoom, x, y);
+}
+
+#[no_mangle]
+pub extern "C" fn set_view_zoom(zoom: f32) {
+    let state = unsafe { STATE.as_mut() }.expect("got an invalid state pointer");
+    state.viewbox.set_zoom(zoom);
+}
+
+#[no_mangle]
+pub extern "C" fn set_view_xy(x: f32, y: f32) {
+    let state = unsafe { STATE.as_mut() }.expect("got an invalid state pointer");
+    state.viewbox.set_xy(x, y);
 }
 
 #[no_mangle]
@@ -68,14 +88,11 @@ pub extern "C" fn use_shape(a: u32, b: u32, c: u32, d: u32) {
 }
 
 #[no_mangle]
-pub unsafe extern "C" fn set_shape_selrect(x1: f32, y1: f32, x2: f32, y2: f32) {
+pub unsafe extern "C" fn set_shape_selrect(left: f32, top: f32, right: f32, bottom: f32) {
     let state = unsafe { STATE.as_mut() }.expect("got an invalid state pointer");
 
     if let Some(shape) = state.current_shape() {
-        shape.selrect.x1 = x1;
+        shape.selrect.set_ltrb(left, top, right, bottom);
-        shape.selrect.y1 = y1;
-        shape.selrect.x2 = x2;
-        shape.selrect.y2 = y2;
     }
 }
 

render-wasm/src/math.rs

@@ -0,0 +1,4 @@
+use skia_safe as skia;
+
+pub type Rect = skia::Rect;
+pub type Matrix = skia::Matrix;

render-wasm/src/render.rs

@@ -1,11 +1,12 @@
-use skia_safe::gpu::{self, gl::FramebufferInfo, DirectContext};
+use skia::gpu::{self, gl::FramebufferInfo, DirectContext};
-use skia_safe::{self as skia};
+use skia_safe as skia;
 use std::collections::HashMap;
 use uuid::Uuid;
 
-use crate::shapes::Shape;
+use crate::debug;
-use crate::view::View;
 use crate::images::Image;
+use crate::shapes::Shape;
+use crate::view::Viewbox;
 
 struct GpuState {
     pub context: DirectContext,
@@ -14,16 +15,16 @@ struct GpuState {
 
 impl GpuState {
     fn new() -> Self {
-        let interface = skia_safe::gpu::gl::Interface::new_native().unwrap();
+        let interface = skia::gpu::gl::Interface::new_native().unwrap();
-        let context = skia_safe::gpu::direct_contexts::make_gl(interface, None).unwrap();
+        let context = skia::gpu::direct_contexts::make_gl(interface, None).unwrap();
         let framebuffer_info = {
             let mut fboid: gl::types::GLint = 0;
             unsafe { gl::GetIntegerv(gl::FRAMEBUFFER_BINDING, &mut fboid) };
 
             FramebufferInfo {
                 fboid: fboid.try_into().unwrap(),
-                format: skia_safe::gpu::gl::Format::RGBA8.into(),
+                format: skia::gpu::gl::Format::RGBA8.into(),
-                protected: skia_safe::gpu::Protected::No,
+                protected: skia::gpu::Protected::No,
             }
         };
 
@@ -41,8 +42,8 @@ impl GpuState {
         gpu::surfaces::wrap_backend_render_target(
             &mut self.context,
             &backend_render_target,
-            skia_safe::gpu::SurfaceOrigin::BottomLeft,
+            skia::gpu::SurfaceOrigin::BottomLeft,
-            skia_safe::ColorType::RGBA8888,
+            skia::ColorType::RGBA8888,
             None,
             None,
         )
@@ -51,14 +52,15 @@ impl GpuState {
 }
 
 pub(crate) struct CachedSurfaceImage {
-  pub image: Image,
+    pub image: Image,
-  pub view: View,
+    pub viewbox: Viewbox,
 }
 
 pub(crate) struct RenderState {
     gpu_state: GpuState,
     pub final_surface: skia::Surface,
     pub drawing_surface: skia::Surface,
+    pub debug_surface: skia::Surface,
     pub cached_surface_image: Option<CachedSurfaceImage>,
 }
 
@@ -70,11 +72,15 @@ impl RenderState {
         let drawing_surface = final_surface
             .new_surface_with_dimensions((width, height))
             .unwrap();
+        let debug_surface = final_surface
+            .new_surface_with_dimensions((width, height))
+            .unwrap();
 
         RenderState {
             gpu_state,
             final_surface,
             drawing_surface,
+            debug_surface,
             cached_surface_image: None,
         }
     }
@@ -86,6 +92,10 @@ impl RenderState {
             .final_surface
             .new_surface_with_dimensions((width, height))
             .unwrap();
+        self.debug_surface = self
+            .final_surface
+            .new_surface_with_dimensions((width, height))
+            .unwrap();
     }
 
     pub fn flush(&mut self) {
@@ -105,22 +115,19 @@ impl RenderState {
     pub fn reset_canvas(&mut self) {
         self.drawing_surface
             .canvas()
-            .clear(skia_safe::Color::TRANSPARENT)
+            .clear(skia::Color::TRANSPARENT)
             .reset_matrix();
         self.final_surface
             .canvas()
-            .clear(skia_safe::Color::TRANSPARENT)
+            .clear(skia::Color::TRANSPARENT)
+            .reset_matrix();
+        self.debug_surface
+            .canvas()
+            .clear(skia::Color::TRANSPARENT)
             .reset_matrix();
     }
 
     pub fn render_single_shape(&mut self, shape: &Shape) {
-        let r = skia::Rect::new(
-            shape.selrect.x1,
-            shape.selrect.y1,
-            shape.selrect.x2,
-            shape.selrect.y2,
-        );
-
         // Check transform-matrix code from common/src/app/common/geom/shapes/transforms.cljc
         let mut matrix = skia::Matrix::new_identity();
         let (translate_x, translate_y) = shape.translation();
@@ -139,7 +146,7 @@ impl RenderState {
             1.,
         );
 
-        let mut center = r.center();
+        let mut center = shape.selrect.center();
         matrix.post_translate(center);
         center.negate();
         matrix.pre_translate(center);
@@ -147,7 +154,9 @@ impl RenderState {
         self.drawing_surface.canvas().concat(&matrix);
 
         for fill in shape.fills().rev() {
-            self.drawing_surface.canvas().draw_rect(r, &fill.to_paint());
+            self.drawing_surface
+                .canvas()
+                .draw_rect(shape.selrect, &fill.to_paint());
         }
 
         let mut paint = skia::Paint::default();
@@ -163,35 +172,39 @@ impl RenderState {
             .clear(skia::Color::TRANSPARENT);
     }
 
-    pub fn navigate(
+    pub fn navigate(&mut self, viewbox: &Viewbox, shapes: &HashMap<Uuid, Shape>, debug: u32) {
-        &mut self,
-        view: &View,
-        shapes: &HashMap<Uuid, Shape>,
-    ) {
         self.reset_canvas();
-
         if let Some(cached_surface_image) = &self.cached_surface_image {
             // If we are drawing something bigger than the visible let's do a redraw
-            if (view.x > cached_surface_image.view.x) ||
+            if (viewbox.x > cached_surface_image.viewbox.x)
-                (-view.x + view.width > -cached_surface_image.view.x + cached_surface_image.view.width) ||
+                || (-viewbox.x + viewbox.area.width()
-                (view.y > cached_surface_image.view.y) ||
+                    > -cached_surface_image.viewbox.x + cached_surface_image.viewbox.area.width())
-                (-view.y + view.height > -cached_surface_image.view.y + cached_surface_image.view.height) {         
+                || (viewbox.y > cached_surface_image.viewbox.y)
-                self.draw_all_shapes(view, shapes);
+                || (-viewbox.y + viewbox.area.height()
-            }
+                    > -cached_surface_image.viewbox.y + cached_surface_image.viewbox.area.height())
-            else {
+            {
-
+                self.render_all(viewbox, shapes, debug);
+            } else {
                 let image = &cached_surface_image.image;
                 let paint = skia::Paint::default();
                 self.final_surface.canvas().save();
                 self.drawing_surface.canvas().save();
 
-                let navigate_zoom = view.zoom / cached_surface_image.view.zoom;          
+                let navigate_zoom = viewbox.zoom / cached_surface_image.viewbox.zoom;
-                let navigate_x =  cached_surface_image.view.zoom * (view.x - cached_surface_image.view.x);
+                let navigate_x = cached_surface_image.viewbox.zoom
-                let navigate_y =  cached_surface_image.view.zoom * (view.y - cached_surface_image.view.y);
+                    * (viewbox.x - cached_surface_image.viewbox.x);
+                let navigate_y = cached_surface_image.viewbox.zoom
+                    * (viewbox.y - cached_surface_image.viewbox.y);
 
-                self.final_surface.canvas().scale((navigate_zoom, navigate_zoom));
+                self.final_surface
-                self.final_surface.canvas().translate((navigate_x, navigate_y));
+                    .canvas()
-                self.final_surface.canvas().draw_image(image.clone(), (0, 0), Some(&paint));
+                    .scale((navigate_zoom, navigate_zoom));
+                self.final_surface
+                    .canvas()
+                    .translate((navigate_x, navigate_y));
+                self.final_surface
+                    .canvas()
+                    .draw_image(image.clone(), (0, 0), Some(&paint));
 
                 self.final_surface.canvas().restore();
                 self.drawing_surface.canvas().restore();
@@ -201,39 +214,96 @@ impl RenderState {
         self.flush();
     }
 
-    pub fn draw_all_shapes(
+    pub fn render_all(
         &mut self,
-        view: &View,
+        viewbox: &Viewbox,
         shapes: &HashMap<Uuid, Shape>,
+        debug: u32, // Debug flags
     ) {
         self.reset_canvas();
-        self.scale(view.zoom, view.zoom);
+        self.scale(viewbox.zoom, viewbox.zoom);
-        self.translate(view.x, view.y);
+        self.translate(viewbox.x, viewbox.y);
-        self.render_shape_tree(Uuid::nil(), shapes);
+        self.render_shape_tree(&Uuid::nil(), viewbox, shapes);
-
         self.cached_surface_image = Some(CachedSurfaceImage {
             image: self.final_surface.image_snapshot(),
-            view: view.clone(),
+            viewbox: viewbox.clone(),
         });
+        if debug & debug::DEBUG_VISIBLE == debug::DEBUG_VISIBLE {
+            self.render_debug(viewbox);
+        }
 
         self.flush();
     }
 
-    fn render_shape_tree(&mut self, id: Uuid, shapes: &HashMap<Uuid, Shape>) {
+    fn render_debug_view(&mut self, viewbox: &Viewbox) {
+        let mut paint = skia::Paint::default();
+        paint.set_style(skia::PaintStyle::Stroke);
+        paint.set_color(skia::Color::from_argb(255, 255, 0, 255));
+        paint.set_stroke_width(1.);
+        let mut scaled_rect = viewbox.area.clone();
+        let x = 100. + scaled_rect.x() * 0.2;
+        let y = 100. + scaled_rect.y() * 0.2;
+        let width = scaled_rect.width() * 0.2;
+        let height = scaled_rect.height() * 0.2;
+        scaled_rect.set_xywh(x, y, width, height);
+        self.debug_surface.canvas().draw_rect(scaled_rect, &paint);
+    }
+
+    fn render_debug_shape(&mut self, shape: &Shape, intersected: bool) {
+        let mut paint = skia::Paint::default();
+        paint.set_style(skia::PaintStyle::Stroke);
+        paint.set_color(if intersected {
+            skia::Color::from_argb(255, 255, 255, 0)
+        } else {
+            skia::Color::from_argb(255, 0, 255, 255)
+        });
+        paint.set_stroke_width(1.);
+        let mut scaled_rect = shape.selrect.clone();
+        let x = 100. + scaled_rect.x() * 0.2;
+        let y = 100. + scaled_rect.y() * 0.2;
+        let width = scaled_rect.width() * 0.2;
+        let height = scaled_rect.height() * 0.2;
+        scaled_rect.set_xywh(x, y, width, height);
+        self.debug_surface.canvas().draw_rect(scaled_rect, &paint);
+    }
+
+    fn render_debug(&mut self, viewbox: &Viewbox) {
+        let paint = skia::Paint::default();
+        self.render_debug_view(viewbox);
+        self.debug_surface.draw(
+            &mut self.final_surface.canvas(),
+            (0.0, 0.0),
+            skia::SamplingOptions::new(skia::FilterMode::Linear, skia::MipmapMode::Nearest),
+            Some(&paint),
+        );
+    }
+
+    fn render_shape_tree(&mut self, id: &Uuid, viewbox: &Viewbox, shapes: &HashMap<Uuid, Shape>) {
         let shape = shapes.get(&id).unwrap();
 
+        if !id.is_nil() {
+            if !shape.selrect.intersects(viewbox.area) {
+                self.render_debug_shape(shape, false);
+                // TODO: This means that not all the shapes are renderer so we
+                // need to call a render_all on the zoom out.
+                return;
+            } else {
+                self.render_debug_shape(shape, true);
+            }
+        }
+
         // This is needed so the next non-children shape does not carry this shape's transform
         self.final_surface.canvas().save();
         self.drawing_surface.canvas().save();
 
-        if id != Uuid::nil() {
+        if !id.is_nil() {
             self.render_single_shape(shape);
         }
 
         // draw all the children shapes
-        let shape_ids = shape.children.clone();
+        let shape_ids = shape.children.iter();
         for shape_id in shape_ids {
-            self.render_shape_tree(shape_id, shapes);
+            self.render_shape_tree(shape_id, viewbox, shapes);
         }
 
         self.final_surface.canvas().restore();

render-wasm/src/shapes.rs

@@ -1,3 +1,4 @@
+use crate::math;
 use skia_safe as skia;
 use uuid::Uuid;
 
@@ -15,19 +16,6 @@ pub enum Kind {
     Frame,
 }
 
-pub struct Point {
-    pub x: f32,
-    pub y: f32,
-}
-
-#[derive(Debug, Clone, Copy, Default)]
-pub struct Rect {
-    pub x1: f32,
-    pub y1: f32,
-    pub x2: f32,
-    pub y2: f32,
-}
-
 type Color = skia::Color;
 
 #[derive(Debug, Clone, Copy)]
@@ -111,7 +99,7 @@ pub struct Shape {
     pub id: Uuid,
     pub children: Vec<Uuid>,
     pub kind: Kind,
-    pub selrect: Rect,
+    pub selrect: math::Rect,
     pub transform: Matrix,
     pub rotation: f32,
     fills: Vec<Fill>,
@@ -124,7 +112,7 @@ impl Shape {
             id,
             children: Vec::<Uuid>::new(),
             kind: Kind::Rect,
-            selrect: Rect::default(),
+            selrect: math::Rect::new_empty(),
             transform: Matrix::identity(),
             rotation: 0.,
             fills: vec![],

render-wasm/src/state.rs

@@ -1,9 +1,10 @@
 use std::collections::HashMap;
 use uuid::Uuid;
 
+use crate::math;
 use crate::render::RenderState;
 use crate::shapes::Shape;
-use crate::view::View;
+use crate::view::Viewbox;
 
 /// This struct holds the state of the Rust application between JS calls.
 ///
@@ -11,40 +12,50 @@ use crate::view::View;
 /// Note that rust-skia data structures are not thread safe, so a state
 /// must not be shared between different Web Workers.
 pub(crate) struct State<'a> {
+    pub debug: u32,
     pub render_state: RenderState,
     pub current_id: Option<Uuid>,
     pub current_shape: Option<&'a mut Shape>,
     pub shapes: HashMap<Uuid, Shape>,
-    pub view: View,
+    pub viewbox: Viewbox,
 }
 
 impl<'a> State<'a> {
-    pub fn with_capacity(width: i32, height: i32, capacity: usize) -> Self {
+    pub fn with_capacity(width: i32, height: i32, debug: u32, capacity: usize) -> Self {
         State {
+            debug,
             render_state: RenderState::new(width, height),
             current_id: None,
             current_shape: None,
             shapes: HashMap::with_capacity(capacity),
-            view: View {
+            viewbox: Viewbox {
                 x: 0.,
                 y: 0.,
                 zoom: 1.,
-                width: 0.,
+                width: width as f32,
-                height: 0.,
+                height: height as f32,
+                area: math::Rect::new_empty(),
             },
         }
     }
 
+    pub fn resize(&mut self, width: i32, height: i32) {
+        self.render_state.resize(width, height);
+        self.viewbox.set_wh(width as f32, height as f32);
+    }
+
     pub fn render_state(&'a mut self) -> &'a mut RenderState {
         &mut self.render_state
     }
 
     pub fn navigate(&mut self) {
-        self.render_state.navigate(&self.view, &self.shapes);
+        self.render_state
+            .navigate(&self.viewbox, &self.shapes, self.debug);
     }
 
-    pub fn draw_all_shapes(&mut self) {
+    pub fn render_all(&mut self) {
-        self.render_state.draw_all_shapes(&self.view, &self.shapes);
+        self.render_state
+            .render_all(&self.viewbox, &self.shapes, self.debug);
     }
 
     pub fn use_shape(&'a mut self, id: Uuid) {
@@ -60,20 +71,4 @@ impl<'a> State<'a> {
     pub fn current_shape(&'a mut self) -> Option<&'a mut Shape> {
         self.current_shape.as_deref_mut()
     }
-
-    pub fn set_view(&mut self, zoom: f32, pan: (f32, f32), size: (f32, f32)) {
-        let (x, y) = pan;
-        self.view.x = x;
-        self.view.y = y;
-
-        self.view.zoom = zoom;
-
-        let (w, h) = size;
-        if self.view.width != w || self.view.height != h {
-            self.view.width = w;
-            self.view.height = h;
-
-            self.render_state.resize(w as i32, h as i32);
-        }
-    }
 }

render-wasm/src/utils.rs

@@ -1,8 +1,7 @@
 use uuid::Uuid;
 
-pub fn uuid_from_u32_quartet(a: u32, b: u32, c: u32, d: u32) -> Uuid
+pub fn uuid_from_u32_quartet(a: u32, b: u32, c: u32, d: u32) -> Uuid {
-{
+    let hi: u64 = ((a as u64) << 32) | b as u64;
-  let hi: u64 = ((a as u64) << 32) | b as u64;
+    let lo: u64 = ((c as u64) << 32) | d as u64;
-  let lo: u64 = ((c as u64) << 32) | d as u64;
+    Uuid::from_u64_pair(hi, lo)
-  Uuid::from_u64_pair(hi, lo)
 }

render-wasm/src/view.rs

@@ -1,9 +1,49 @@
-#[derive(Debug, Clone, Copy)]
+use skia_safe as skia;
-pub(crate) struct View
+
-{
+#[derive(Debug, Copy, Clone)]
-  pub x: f32,
+pub(crate) struct Viewbox {
-  pub y: f32,
+    pub x: f32,
-  pub zoom: f32,
+    pub y: f32,
-  pub width: f32,
+    pub width: f32,
-  pub height: f32,
+    pub height: f32,
+    pub zoom: f32,
+    pub area: skia::Rect,
+}
+
+impl Viewbox {
+    pub fn set_all(&mut self, zoom: f32, x: f32, y: f32) -> &Self {
+        self.x = x;
+        self.y = y;
+        self.zoom = zoom;
+        self.area.set_xywh(
+            -self.x,
+            -self.y,
+            self.width / self.zoom,
+            self.height / self.zoom,
+        );
+        self
+    }
+
+    pub fn set_zoom(&mut self, zoom: f32) -> &Self {
+        self.zoom = zoom;
+        self.area
+            .set_wh(self.width / self.zoom, self.height / self.zoom);
+        self
+    }
+
+    pub fn set_xy(&mut self, x: f32, y: f32) -> &Self {
+        self.x = x;
+        self.y = y;
+        self.area.left = -x;
+        self.area.top = -y;
+        self
+    }
+
+    pub fn set_wh(&mut self, width: f32, height: f32) -> &Self {
+        self.width = width;
+        self.height = height;
+        self.area
+            .set_wh(self.width / self.zoom, self.height / self.zoom);
+        self
+    }
 }

render-wasm/test

@@ -0,0 +1,2 @@
+#!/usr/bin/env bash
+cargo test --bin render_wasm -- --show-output