mirror of
https://github.com/penpot/penpot.git
synced 2025-02-21 14:26:27 -05:00
✨ Render with dpr
This commit is contained in:
Belén Albeza
parent
5ce6cbff6f
commit
db9c93f3bf
6 changed files with 115 additions and 92 deletions
|
|
@ -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"}}]
|
||||
|
||||
|
|
|
|||
|
|
@ -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)
|
||||
|
|
|
|||
|
|
@ -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]
|
||||
|
|
|
|||
|
|
@ -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>) {
|
||||
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<Uuid, Shape>,
|
||||
) -> Result<(), String> {
|
||||
pub fn navigate(&mut self, 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) {
|
||||
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<Uuid, Shape>,
|
||||
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<Uuid, Shape>,
|
||||
) -> bool {
|
||||
fn render_shape_tree(&mut self, id: &Uuid, 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();
|
||||
|
|
|
|||
|
|
@ -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
|
||||
.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) {
|
||||
|
|
|
|||
|
|
@ -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
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue