0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-01-21 06:02:32 -05:00

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

Device pixel ratio
This commit is contained in:
Aitor Moreno 2024-11-28 11:46:41 +01:00 committed by GitHub
commit 9a9815ebfa
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
6 changed files with 208 additions and 138 deletions

View file

@ -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"}}]

View file

@ -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)
(.-height ^js canvas)
1)
(set! (.-width canvas) (.-clientWidth ^js canvas))
(set! (.-height canvas) (.-clientHeight ^js canvas))))
;; Initialize Wasm Render Engine
(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) (* dpr (.-clientWidth ^js canvas)))
(set! (.-height canvas) (* dpr (.-clientHeight ^js canvas))))
(defonce module
(if (exists? js/dynamicImport)

View file

@ -1,11 +1,11 @@
pub mod debug;
pub mod images;
pub mod math;
pub mod render;
pub mod shapes;
pub mod state;
pub mod utils;
pub mod view;
mod debug;
mod images;
mod math;
mod render;
mod shapes;
mod state;
mod utils;
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) {
let state_box = Box::new(State::with_capacity(width, height, debug, 2048));
pub extern "C" fn init(width: i32, height: i32) {
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]

View file

@ -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
pub is_complete: bool,
has_all_shapes: 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) {
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 !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);
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(&self.viewbox) {
self.render_all(shapes, true);
} 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 = 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.render_all_from_cache()?;
}
}
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.translate(viewbox.x, viewbox.y);
let is_complete = self.render_shape_tree(&Uuid::nil(), viewbox, shapes);
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(), 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(),
is_complete,
viewbox: self.viewbox,
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(
&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);
}
@ -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();

View file

@ -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
.navigate(&self.viewbox, &self.shapes, self.debug);
// TODO: propagate error to main fn
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,
self.debug,
);
self.render_state
.render_all(&self.shapes, generate_cached_surface_image);
}
pub fn use_shape(&'a mut self, id: Uuid) {

View file

@ -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 y: f32,
pub pan_x: 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 {
self.x = x;
self.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.x,
-self.y,
-self.pan_x,
-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 {
self.x = x;
self.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
}
}