Merge pull request #5371 from penpot/ladybenko-9337-pixel-ratio

Device pixel ratio

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

@@ -270,7 +270,6 @@
         offset-y (if selecting-first-level-frame?
                    (:y first-shape)
                    (:y selected-frame))
-
         rule-area-size (/ rulers/ruler-area-size zoom)
         preview-blend (-> refs/workspace-preview-blend
                           (mf/deref))]
@@ -291,7 +290,7 @@
 
     (mf/with-effect [vport]
       (when @canvas-init?
-        (wasm.api/resize-canvas (:width vport) (:height vport))))
+        (wasm.api/resize-viewbox (:width vport) (:height vport))))
 
     (mf/with-effect [base-objects canvas-init?]
       (when @canvas-init?
@@ -351,8 +350,8 @@
                :ref canvas-ref
                :class (stl/css :render-shapes)
                :key (dm/str "render" page-id)
-               :width (:width vport 0)
+               :width (* wasm.api/dpr (:width vport 0))
-               :height (:height vport 0)
+               :height (* wasm.api/dpr (:height vport 0))
                :style {:background-color background
                        :pointer-events "none"}}]
 

frontend/src/app/render_wasm/api.cljs

@@ -16,6 +16,10 @@
 
 (defonce internal-frame-id nil)
 (defonce internal-module #js {})
+(defonce use-dpr? (contains? cf/flags :render-wasm-dpr))
+
+(def dpr
+  (if use-dpr? js/window.devicePixelRatio 1.0))
 
 ;; This should never be called from the outside.
 ;; This function receives a "time" parameter that we're not using but maybe in the future could be useful (it is the time since
@@ -169,31 +173,31 @@
        :stencil true
        :alpha true})
 
+
 (defn clear-canvas
   []
   ;; TODO: perform corresponding cleaning
   )
 
-(defn resize-canvas
+(defn resize-viewbox
   [width height]
-  (h/call internal-module "_resize_canvas" width height))
+  (h/call internal-module "_resize_viewbox" width height))
 
 (defn assign-canvas
   [canvas]
   (let [gl      (unchecked-get internal-module "GL")
-        init-fn (unchecked-get internal-module "_init")
-
         context (.getContext ^js canvas "webgl2" canvas-options)
 
         ;; Register the context with emscripten
         handle  (.registerContext ^js gl context #js {"majorVersion" 2})]
     (.makeContextCurrent ^js gl handle)
-    ;; Initialize Skia
+
-    (^function init-fn (.-width ^js canvas)
+    ;; Initialize Wasm Render Engine
-                       (.-height ^js canvas)
+    (h/call internal-module "_init" (/ (.-width ^js canvas) dpr) (/ (.-height ^js canvas) dpr))
-                       1)
+    (h/call internal-module "_set_render_options" 0x01 dpr))
-    (set! (.-width canvas) (.-clientWidth ^js canvas))
+
-    (set! (.-height canvas) (.-clientHeight ^js canvas))))
+  (set! (.-width canvas) (* dpr (.-clientWidth ^js canvas)))
+  (set! (.-height canvas) (* dpr (.-clientHeight ^js canvas))))
 
 (defonce module
   (if (exists? js/dynamicImport)

render-wasm/src/main.rs

@@ -1,11 +1,11 @@
-pub mod debug;
+mod debug;
-pub mod images;
+mod images;
-pub mod math;
+mod math;
-pub mod render;
+mod render;
-pub mod shapes;
+mod shapes;
-pub mod state;
+mod state;
-pub mod utils;
+mod utils;
-pub mod view;
+mod view;
 
 use skia_safe as skia;
 
@@ -31,13 +31,22 @@ 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, debug: u32) {
+pub extern "C" fn init(width: i32, height: i32) {
-    let state_box = Box::new(State::with_capacity(width, height, debug, 2048));
+    let state_box = Box::new(State::new(width, height, 2048));
     unsafe {
         STATE = Some(state_box);
     }
 }
 
+#[no_mangle]
+pub extern "C" fn set_render_options(debug: u32, dpr: f32) {
+    let state = unsafe { STATE.as_mut() }.expect("got an invalid state pointer");
+    let render_state = state.render_state();
+
+    render_state.set_debug_flags(debug);
+    render_state.set_dpr(dpr);
+}
+
 #[no_mangle]
 pub unsafe extern "C" fn render() {
     let state = unsafe { STATE.as_mut() }.expect("got an invalid state pointer");
@@ -63,7 +72,7 @@ pub extern "C" fn reset_canvas() {
 }
 
 #[no_mangle]
-pub extern "C" fn resize_canvas(width: i32, height: i32) {
+pub extern "C" fn resize_viewbox(width: i32, height: i32) {
     let state = unsafe { STATE.as_mut() }.expect("got an invalid state pointer");
     state.resize(width, height);
 }
@@ -71,19 +80,19 @@ pub extern "C" fn resize_canvas(width: i32, height: i32) {
 #[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);
+    state.render_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);
+    state.render_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);
+    state.render_state().viewbox.set_pan_xy(x, y);
 }
 
 #[no_mangle]

render-wasm/src/render.rs

@@ -55,8 +55,38 @@ impl GpuState {
 pub(crate) struct CachedSurfaceImage {
     pub image: Image,
     pub viewbox: Viewbox,
-    // is_complete indicates if stored image renders the complete shape tree
+    has_all_shapes: bool,
-    pub is_complete: bool,
+}
+
+impl CachedSurfaceImage {
+    fn is_dirty(&self, viewbox: &Viewbox) -> bool {
+        !self.has_all_shapes && !self.viewbox.area.contains(viewbox.area)
+    }
+}
+
+#[derive(Debug, Copy, Clone, PartialEq)]
+struct RenderOptions {
+    debug_flags: u32,
+    dpr: Option<f32>,
+}
+
+impl Default for RenderOptions {
+    fn default() -> Self {
+        Self {
+            debug_flags: 0x00,
+            dpr: None,
+        }
+    }
+}
+
+impl RenderOptions {
+    pub fn is_debug_visible(&self) -> bool {
+        self.debug_flags & debug::DEBUG_VISIBLE == debug::DEBUG_VISIBLE
+    }
+
+    pub fn dpr(&self) -> f32 {
+        self.dpr.unwrap_or(1.0)
+    }
 }
 
 pub(crate) struct RenderState {
@@ -65,6 +95,8 @@ pub(crate) struct RenderState {
     pub drawing_surface: skia::Surface,
     pub debug_surface: skia::Surface,
     pub cached_surface_image: Option<CachedSurfaceImage>,
+    options: RenderOptions,
+    pub viewbox: Viewbox,
 }
 
 impl RenderState {
@@ -85,20 +117,41 @@ impl RenderState {
             drawing_surface,
             debug_surface,
             cached_surface_image: None,
+            options: RenderOptions::default(),
+            viewbox: Viewbox::new(width as f32, height as f32),
+        }
+    }
+
+    pub fn set_debug_flags(&mut self, debug: u32) {
+        self.options.debug_flags = debug;
+    }
+
+    pub fn set_dpr(&mut self, dpr: f32) {
+        if Some(dpr) != self.options.dpr {
+            self.options.dpr = Some(dpr);
+            self.resize(
+                self.viewbox.width.floor() as i32,
+                self.viewbox.height.floor() as i32,
+            );
         }
     }
 
     pub fn resize(&mut self, width: i32, height: i32) {
-        let surface = self.gpu_state.create_target_surface(width, height);
+        let dpr_width = (width as f32 * self.options.dpr()).floor() as i32;
+        let dpr_height = (height as f32 * self.options.dpr()).floor() as i32;
+
+        let surface = self.gpu_state.create_target_surface(dpr_width, dpr_height);
         self.final_surface = surface;
         self.drawing_surface = self
             .final_surface
-            .new_surface_with_dimensions((width, height))
+            .new_surface_with_dimensions((dpr_width, dpr_height))
             .unwrap();
         self.debug_surface = self
             .final_surface
-            .new_surface_with_dimensions((width, height))
+            .new_surface_with_dimensions((dpr_width, dpr_height))
             .unwrap();
+
+        self.viewbox.set_wh(width as f32, height as f32);
     }
 
     pub fn flush(&mut self) {
@@ -176,87 +229,95 @@ impl RenderState {
             .clear(skia::Color::TRANSPARENT);
     }
 
-    pub fn navigate(&mut self, viewbox: &Viewbox, shapes: &HashMap<Uuid, Shape>, debug: u32) {
+    pub fn navigate(&mut self, shapes: &HashMap<Uuid, Shape>) -> Result<(), String> {
-        self.reset_canvas();
+        if let Some(cached_surface_image) = self.cached_surface_image.as_ref() {
-        if let Some(cached_surface_image) = &self.cached_surface_image {
+            if cached_surface_image.is_dirty(&self.viewbox) {
-            // If we are drawing something bigger than the visible let's do a redraw
+                self.render_all(shapes, true);
-            if !cached_surface_image.is_complete
-                && ((viewbox.x > cached_surface_image.viewbox.x)
-                    || (-viewbox.x + viewbox.area.width()
-                        > -cached_surface_image.viewbox.x
-                            + cached_surface_image.viewbox.area.width())
-                    || (viewbox.y > cached_surface_image.viewbox.y)
-                    || (-viewbox.y + viewbox.area.height()
-                        > -cached_surface_image.viewbox.y
-                            + cached_surface_image.viewbox.area.height()))
-            {
-                self.render_all(viewbox, shapes, true, debug);
             } else {
-                let image = &cached_surface_image.image;
+                self.render_all_from_cache()?;
-                let paint = skia::Paint::default();
-                self.final_surface.canvas().save();
-                self.drawing_surface.canvas().save();
-
-                let navigate_zoom = viewbox.zoom / cached_surface_image.viewbox.zoom;
-                let navigate_x = cached_surface_image.viewbox.zoom
-                    * (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
-                    .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();
             }
         }
 
-        self.flush();
+        Ok(())
     }
 
     pub fn render_all(
         &mut self,
-        viewbox: &Viewbox,
         shapes: &HashMap<Uuid, Shape>,
         generate_cached_surface_image: bool,
-        debug: u32, // Debug flags
     ) {
         self.reset_canvas();
-        self.scale(viewbox.zoom, viewbox.zoom);
+        self.scale(
-        self.translate(viewbox.x, viewbox.y);
+            self.viewbox.zoom * self.options.dpr(),
-        let is_complete = self.render_shape_tree(&Uuid::nil(), viewbox, shapes);
+            self.viewbox.zoom * self.options.dpr(),
+        );
+        self.translate(self.viewbox.pan_x, self.viewbox.pan_y);
+
+        let is_complete = self.render_shape_tree(&Uuid::nil(), shapes);
         if generate_cached_surface_image || self.cached_surface_image.is_none() {
             self.cached_surface_image = Some(CachedSurfaceImage {
                 image: self.final_surface.image_snapshot(),
-                viewbox: viewbox.clone(),
+                viewbox: self.viewbox,
-                is_complete,
+                has_all_shapes: is_complete,
             });
         }
-        if debug & debug::DEBUG_VISIBLE == debug::DEBUG_VISIBLE {
+
-            self.render_debug(viewbox);
+        if self.options.is_debug_visible() {
+            self.render_debug();
         }
 
         self.flush();
     }
 
-    fn render_debug_view(&mut self, viewbox: &Viewbox) {
+    fn render_all_from_cache(&mut self) -> Result<(), String> {
+        self.reset_canvas();
+
+        let cached = self
+            .cached_surface_image
+            .as_ref()
+            .ok_or("Uninitialized cached surface image")?;
+
+        let image = &cached.image;
+        let paint = skia::Paint::default();
+        self.final_surface.canvas().save();
+        self.drawing_surface.canvas().save();
+
+        let navigate_zoom = self.viewbox.zoom / cached.viewbox.zoom;
+        let navigate_x = cached.viewbox.zoom * (self.viewbox.pan_x - cached.viewbox.pan_x);
+        let navigate_y = cached.viewbox.zoom * (self.viewbox.pan_y - cached.viewbox.pan_y);
+
+        self.final_surface
+            .canvas()
+            .scale((navigate_zoom, navigate_zoom));
+        self.final_surface.canvas().translate((
+            navigate_x * self.options.dpr(),
+            navigate_y * self.options.dpr(),
+        ));
+        self.final_surface
+            .canvas()
+            .draw_image(image.clone(), (0, 0), Some(&paint));
+
+        self.final_surface.canvas().restore();
+        self.drawing_surface.canvas().restore();
+
+        self.flush();
+
+        Ok(())
+    }
+
+    fn render_debug_view(&mut self) {
         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 mut scaled_rect = self.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);
     }
 
@@ -269,18 +330,20 @@ impl RenderState {
             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) {
+    fn render_debug(&mut self) {
         let paint = skia::Paint::default();
-        self.render_debug_view(viewbox);
+        self.render_debug_view();
         self.debug_surface.draw(
             &mut self.final_surface.canvas(),
             (0.0, 0.0),
@@ -290,21 +353,16 @@ impl RenderState {
     }
 
     // Returns a boolean indicating if the viewbox contains the rendered shapes
-    fn render_shape_tree(
+    fn render_shape_tree(&mut self, id: &Uuid, shapes: &HashMap<Uuid, Shape>) -> bool {
-        &mut self,
-        id: &Uuid,
-        viewbox: &Viewbox,
-        shapes: &HashMap<Uuid, Shape>,
-    ) -> bool {
         let shape = shapes.get(&id).unwrap();
-        let mut is_complete = viewbox.area.contains(shape.selrect);
+        let mut is_complete = self.viewbox.area.contains(shape.selrect);
 
         if !id.is_nil() {
-            if !shape.selrect.intersects(viewbox.area) {
+            if !shape.selrect.intersects(self.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 is_complete;
+                return is_complete; // TODO return is_complete or return false??
             } else {
                 self.render_debug_shape(shape, true);
             }
@@ -321,7 +379,7 @@ impl RenderState {
         // draw all the children shapes
         let shape_ids = shape.children.iter();
         for shape_id in shape_ids {
-            is_complete = self.render_shape_tree(shape_id, viewbox, shapes) && is_complete;
+            is_complete = self.render_shape_tree(shape_id, shapes) && is_complete;
         }
 
         self.final_surface.canvas().restore();

render-wasm/src/state.rs

@@ -1,10 +1,8 @@
 use std::collections::HashMap;
 use uuid::Uuid;
 
-use crate::math;
 use crate::render::RenderState;
 use crate::shapes::Shape;
-use crate::view::Viewbox;
 
 /// This struct holds the state of the Rust application between JS calls.
 ///
@@ -12,36 +10,24 @@ use crate::view::Viewbox;
 /// 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 viewbox: Viewbox,
 }
 
 impl<'a> State<'a> {
-    pub fn with_capacity(width: i32, height: i32, debug: u32, capacity: usize) -> Self {
+    pub fn new(width: i32, height: i32, capacity: usize) -> Self {
         State {
-            debug,
             render_state: RenderState::new(width, height),
             current_id: None,
             current_shape: None,
             shapes: HashMap::with_capacity(capacity),
-            viewbox: Viewbox {
-                x: 0.,
-                y: 0.,
-                zoom: 1.,
-                width: width as f32,
-                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 {
@@ -49,17 +35,13 @@ impl<'a> State<'a> {
     }
 
     pub fn navigate(&mut self) {
-        self.render_state
+        // TODO: propagate error to main fn
-            .navigate(&self.viewbox, &self.shapes, self.debug);
+        let _ = self.render_state.navigate(&self.shapes).unwrap();
     }
 
     pub fn render_all(&mut self, generate_cached_surface_image: bool) {
-        self.render_state.render_all(
+        self.render_state
-            &self.viewbox,
+            .render_all(&self.shapes, generate_cached_surface_image);
-            &self.shapes,
-            generate_cached_surface_image,
-            self.debug,
-        );
     }
 
     pub fn use_shape(&'a mut self, id: Uuid) {

render-wasm/src/view.rs

@@ -1,49 +1,67 @@
-use skia_safe as skia;
+use crate::math::Rect;
 
 #[derive(Debug, Copy, Clone)]
 pub(crate) struct Viewbox {
-    pub x: f32,
+    pub pan_x: f32,
-    pub y: f32,
+    pub pan_y: f32,
     pub width: f32,
     pub height: f32,
     pub zoom: f32,
-    pub area: skia::Rect,
+    pub area: Rect,
+}
+
+impl Default for Viewbox {
+    fn default() -> Self {
+        Self {
+            pan_x: 0.,
+            pan_y: 0.,
+            width: 0.0,
+            height: 0.0,
+            zoom: 1.0,
+            area: Rect::new_empty(),
+        }
+    }
 }
 
 impl Viewbox {
-    pub fn set_all(&mut self, zoom: f32, x: f32, y: f32) -> &Self {
+    pub fn new(width: f32, height: f32) -> Self {
-        self.x = x;
+        let mut res = Self::default();
-        self.y = y;
+        res.width = width;
+        res.height = height;
+        res.area.set_xywh(0., 0., width, height);
+
+        res
+    }
+
+    pub fn set_all(&mut self, zoom: f32, pan_x: f32, pan_y: f32) {
+        self.pan_x = pan_x;
+        self.pan_y = pan_y;
         self.zoom = zoom;
         self.area.set_xywh(
-            -self.x,
+            -self.pan_x,
-            -self.y,
+            -self.pan_y,
             self.width / self.zoom,
             self.height / self.zoom,
         );
-        self
     }
 
-    pub fn set_zoom(&mut self, zoom: f32) -> &Self {
+    pub fn set_zoom(&mut self, zoom: f32) {
         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 {
+    pub fn set_pan_xy(&mut self, pan_x: f32, pan_y: f32) {
-        self.x = x;
+        self.pan_x = pan_x;
-        self.y = y;
+        self.pan_y = pan_y;
-        self.area.left = -x;
+        self.area.left = -pan_x;
-        self.area.top = -y;
+        self.area.top = -pan_y;
-        self
     }
 
-    pub fn set_wh(&mut self, width: f32, height: f32) -> &Self {
+    pub fn set_wh(&mut self, width: f32, height: f32) {
         self.width = width;
         self.height = height;
         self.area
             .set_wh(self.width / self.zoom, self.height / self.zoom);
-        self
     }
 }