✨ Render with dpr

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

@@ -18,6 +18,9 @@
 (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
 ;; the window started rendering elements so it could be useful to measure time between frames).
@@ -170,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")
         context (.getContext ^js canvas "webgl2" canvas-options)
-        dpr     (when use-dpr? js/window.devicePixelRatio)
 
         ;; Register the context with emscripten
         handle  (.registerContext ^js gl context #js {"majorVersion" 2})]
     (.makeContextCurrent ^js gl handle)
 
     ;; Initialize Wasm Render Engine
-    (h/call internal-module "_init" (.-width ^js canvas) (.-height ^js canvas))
+    (h/call internal-module "_init" (/ (.-width ^js canvas) dpr) (/ (.-height ^js canvas) dpr))
-    (h/call internal-module "_set_render_options" 0x01 (or dpr 0))
+    (h/call internal-module "_set_render_options" 0x01 dpr))
 
-    (set! (.-width canvas) (.-clientWidth ^js canvas))
+  (set! (.-width canvas) (* dpr (.-clientWidth ^js canvas)))
-    (set! (.-height canvas) (.-clientHeight ^js canvas))))
+  (set! (.-height canvas) (* dpr (.-clientHeight ^js canvas))))
 
 (defonce module
   (if (exists? js/dynamicImport)

render-wasm/src/main.rs

@@ -44,9 +44,7 @@ pub extern "C" fn set_render_options(debug: u32, dpr: f32) {
     let render_state = state.render_state();
 
     render_state.set_debug_flags(debug);
-    if dpr > 1.0 {
+    render_state.set_dpr(dpr);
-        render_state.set_dpr(Some(dpr));
-    }
 }
 
 #[no_mangle]
@@ -74,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);
 }
@@ -82,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

@@ -64,16 +64,29 @@ impl CachedSurfaceImage {
     }
 }
 
-#[derive(Debug, Default, Copy, Clone, PartialEq)]
+#[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 {
@@ -83,6 +96,7 @@ pub(crate) struct RenderState {
     pub debug_surface: skia::Surface,
     pub cached_surface_image: Option<CachedSurfaceImage>,
     options: RenderOptions,
+    pub viewbox: Viewbox,
 }
 
 impl RenderState {
@@ -104,6 +118,7 @@ impl RenderState {
             debug_surface,
             cached_surface_image: None,
             options: RenderOptions::default(),
+            viewbox: Viewbox::new(width as f32, height as f32),
         }
     }
 
@@ -111,21 +126,32 @@ impl RenderState {
         self.options.debug_flags = debug;
     }
 
-    pub fn set_dpr(&mut self, dpr: Option<f32>) {
+    pub fn set_dpr(&mut self, dpr: f32) {
-        self.options.dpr = dpr;
+        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) {
@@ -203,16 +229,12 @@ impl RenderState {
             .clear(skia::Color::TRANSPARENT);
     }
 
-    pub fn navigate(
+    pub fn navigate(&mut self, shapes: &HashMap<Uuid, Shape>) -> Result<(), String> {
-        &mut self,
-        viewbox: &Viewbox,
-        shapes: &HashMap<Uuid, Shape>,
-    ) -> Result<(), String> {
         if let Some(cached_surface_image) = self.cached_surface_image.as_ref() {
-            if cached_surface_image.is_dirty(viewbox) {
+            if cached_surface_image.is_dirty(&self.viewbox) {
-                self.render_all(viewbox, shapes, true);
+                self.render_all(shapes, true);
             } else {
-                self.render_all_from_cache(viewbox)?;
+                self.render_all_from_cache()?;
             }
         }
 
@@ -221,31 +243,33 @@ impl RenderState {
 
     pub fn render_all(
         &mut self,
-        viewbox: &Viewbox,
         shapes: &HashMap<Uuid, Shape>,
         generate_cached_surface_image: bool,
     ) {
         self.reset_canvas();
-        self.scale(viewbox.zoom, viewbox.zoom);
+        self.scale(
-        self.translate(viewbox.pan_x, viewbox.pan_y);
+            self.viewbox.zoom * self.options.dpr(),
+            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(), viewbox, shapes);
+        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,
                 has_all_shapes: is_complete,
             });
         }
 
         if self.options.is_debug_visible() {
-            self.render_debug(viewbox);
+            self.render_debug();
         }
 
         self.flush();
     }
 
-    fn render_all_from_cache(&mut self, viewbox: &Viewbox) -> Result<(), String> {
+    fn render_all_from_cache(&mut self) -> Result<(), String> {
         self.reset_canvas();
 
         let cached = self
@@ -258,16 +282,17 @@ impl RenderState {
         self.final_surface.canvas().save();
         self.drawing_surface.canvas().save();
 
-        let navigate_zoom = viewbox.zoom / cached.viewbox.zoom;
+        let navigate_zoom = self.viewbox.zoom / cached.viewbox.zoom;
-        let navigate_x = cached.viewbox.zoom * (viewbox.pan_x - cached.viewbox.pan_x);
+        let navigate_x = cached.viewbox.zoom * (self.viewbox.pan_x - cached.viewbox.pan_x);
-        let navigate_y = cached.viewbox.zoom * (viewbox.pan_y - cached.viewbox.pan_y);
+        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
+        self.final_surface.canvas().translate((
-            .canvas()
+            navigate_x * self.options.dpr(),
-            .translate((navigate_x, navigate_y));
+            navigate_y * self.options.dpr(),
+        ));
         self.final_surface
             .canvas()
             .draw_image(image.clone(), (0, 0), Some(&paint));
@@ -280,13 +305,13 @@ impl RenderState {
         Ok(())
     }
 
-    fn render_debug_view(&mut self, viewbox: &Viewbox) {
+    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;
@@ -316,9 +341,9 @@ impl RenderState {
         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),
@@ -328,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);
             }
@@ -359,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.
 ///
@@ -16,7 +14,6 @@ pub(crate) struct State<'a> {
     pub current_id: Option<Uuid>,
     pub current_shape: Option<&'a mut Shape>,
     pub shapes: HashMap<Uuid, Shape>,
-    pub viewbox: Viewbox,
 }
 
 impl<'a> State<'a> {
@@ -26,20 +23,11 @@ impl<'a> State<'a> {
             current_id: None,
             current_shape: None,
             shapes: HashMap::with_capacity(capacity),
-            viewbox: Viewbox {
-                pan_x: 0.,
-                pan_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 {
@@ -48,15 +36,12 @@ impl<'a> State<'a> {
 
     pub fn navigate(&mut self) {
         // TODO: propagate error to main fn
-        let _ = self
+        let _ = self.render_state.navigate(&self.shapes).unwrap();
-            .render_state
-            .navigate(&self.viewbox, &self.shapes)
-            .unwrap();
     }
 
     pub fn render_all(&mut self, generate_cached_surface_image: bool) {
         self.render_state
-            .render_all(&self.viewbox, &self.shapes, generate_cached_surface_image);
+            .render_all(&self.shapes, generate_cached_surface_image);
     }
 
     pub fn use_shape(&'a mut self, id: Uuid) {

render-wasm/src/view.rs

@@ -1,4 +1,4 @@
-use skia_safe as skia;
+use crate::math::Rect;
 
 #[derive(Debug, Copy, Clone)]
 pub(crate) struct Viewbox {
@@ -7,13 +7,35 @@ pub(crate) struct Viewbox {
     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) -> &mut Self {
+    pub fn new(width: f32, height: f32) -> Self {
-        self.pan_x = x;
+        let mut res = Self::default();
-        self.pan_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.pan_x,
@@ -21,29 +43,25 @@ impl Viewbox {
             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) -> &mut Self {
+    pub fn set_pan_xy(&mut self, pan_x: f32, pan_y: f32) {
-        self.pan_x = x;
+        self.pan_x = pan_x;
-        self.pan_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
     }
 }