diff --git a/frontend/src/app/main/ui/workspace/viewport_wasm.cljs b/frontend/src/app/main/ui/workspace/viewport_wasm.cljs index d5deb50c1..579b27c10 100644 --- a/frontend/src/app/main/ui/workspace/viewport_wasm.cljs +++ b/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) - :height (:height vport 0) + :width (* wasm.api/dpr (:width vport 0)) + :height (* wasm.api/dpr (:height vport 0)) :style {:background-color background :pointer-events "none"}}] diff --git a/frontend/src/app/render_wasm/api.cljs b/frontend/src/app/render_wasm/api.cljs index d55cbe64a..ac111c588 100644 --- a/frontend/src/app/render_wasm/api.cljs +++ b/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 "_set_render_options" 0x01 (or dpr 0)) + (h/call internal-module "_init" (/ (.-width ^js canvas) dpr) (/ (.-height ^js canvas) dpr)) + (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) diff --git a/render-wasm/src/main.rs b/render-wasm/src/main.rs index de5098fb3..76bd2bc74 100644 --- a/render-wasm/src/main.rs +++ b/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(Some(dpr)); - } + render_state.set_dpr(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] diff --git a/render-wasm/src/render.rs b/render-wasm/src/render.rs index 84dd6dc87..3573190df 100644 --- a/render-wasm/src/render.rs +++ b/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, } +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, 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) { - self.options.dpr = dpr; + 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) { @@ -203,16 +229,12 @@ impl RenderState { .clear(skia::Color::TRANSPARENT); } - pub fn navigate( - &mut self, - viewbox: &Viewbox, - shapes: &HashMap, - ) -> Result<(), String> { + pub fn navigate(&mut self, shapes: &HashMap) -> Result<(), String> { if let Some(cached_surface_image) = self.cached_surface_image.as_ref() { - if cached_surface_image.is_dirty(viewbox) { - self.render_all(viewbox, shapes, true); + if cached_surface_image.is_dirty(&self.viewbox) { + 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, generate_cached_surface_image: bool, ) { self.reset_canvas(); - self.scale(viewbox.zoom, viewbox.zoom); - self.translate(viewbox.pan_x, viewbox.pan_y); + self.scale( + 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_x = cached.viewbox.zoom * (viewbox.pan_x - cached.viewbox.pan_x); - let navigate_y = cached.viewbox.zoom * (viewbox.pan_y - cached.viewbox.pan_y); + 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, navigate_y)); + 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)); @@ -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( - &mut self, - id: &Uuid, - viewbox: &Viewbox, - shapes: &HashMap, - ) -> bool { + fn render_shape_tree(&mut self, id: &Uuid, shapes: &HashMap) -> 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(); diff --git a/render-wasm/src/state.rs b/render-wasm/src/state.rs index 363e3e867..024ed8898 100644 --- a/render-wasm/src/state.rs +++ b/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, pub current_shape: Option<&'a mut Shape>, pub shapes: HashMap, - 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 - .render_state - .navigate(&self.viewbox, &self.shapes) - .unwrap(); + 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.viewbox, &self.shapes, generate_cached_surface_image); + .render_all(&self.shapes, generate_cached_surface_image); } pub fn use_shape(&'a mut self, id: Uuid) { diff --git a/render-wasm/src/view.rs b/render-wasm/src/view.rs index 175af41b4..399d51138 100644 --- a/render-wasm/src/view.rs +++ b/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 { - self.pan_x = x; - self.pan_y = y; + pub fn new(width: f32, height: f32) -> Self { + let mut res = Self::default(); + 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 { - self.pan_x = x; - self.pan_y = y; - self.area.left = -x; - self.area.top = -y; - self + pub fn set_pan_xy(&mut self, pan_x: f32, pan_y: f32) { + self.pan_x = pan_x; + self.pan_y = pan_y; + self.area.left = -pan_x; + self.area.top = -pan_y; } - 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 } }