Display images in the SVG viewport renderer via canvases instead of base64 PNGs (#2903)
Some checks are pending
Editor: Dev & CI / build (push) Waiting to run
Editor: Dev & CI / cargo-deny (push) Waiting to run

* add: move images as rendered canvases to node_graph_executor

* add: added the frontend message

* fix: bytemuck stuff

* fix: canvas element breaking

* fix: width issues

* fix: remove the old message

* npm: run lint-fix

* fix

* works finally

* fix transforms

* Fix self closing tag

* fix: reuse id

* fix: have it working with repeat instance

* cargo: fmt

* fix

* Avoid "canvas" prefix to IDs

* fix

* fix: vello issue from 6111440

* fix: gpu stuff

* fix: vello bbox

* Code review

---------

Co-authored-by: hypercube <0hypercube@gmail.com>
Co-authored-by: Keavon Chambers <keavon@keavon.com>
This commit is contained in:
mTvare 2025-07-25 05:44:38 +05:30 committed by GitHub
parent 45bd031a36
commit 72f1047a27
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
17 changed files with 280 additions and 117 deletions

View file

@ -7,6 +7,7 @@ pub use glam::{DAffine2, DVec2, IVec2, UVec2};
use graphene_application_io::SurfaceFrame;
use graphene_brush::brush_cache::BrushCache;
use graphene_brush::brush_stroke::BrushStroke;
use graphene_core::raster::Image;
use graphene_core::raster_types::CPU;
use graphene_core::transform::ReferencePoint;
use graphene_core::uuid::NodeId;
@ -424,10 +425,10 @@ pub struct RenderOutput {
pub metadata: RenderMetadata,
}
#[derive(Debug, Clone, PartialEq, dyn_any::DynAny, Hash, serde::Serialize, serde::Deserialize)]
#[derive(Debug, Clone, Hash, PartialEq, dyn_any::DynAny, serde::Serialize, serde::Deserialize)]
pub enum RenderOutputType {
CanvasFrame(SurfaceFrame),
Svg(String),
Svg { svg: String, image_data: Vec<(u64, Image<Color>)> },
Image(Vec<u8>),
}

View file

@ -3,6 +3,7 @@ use graphene_application_io::{ApplicationError, ApplicationIo, ResourceFuture, S
#[cfg(target_arch = "wasm32")]
use js_sys::{Object, Reflect};
use std::collections::HashMap;
use std::hash::Hash;
use std::sync::Arc;
#[cfg(target_arch = "wasm32")]
use std::sync::atomic::AtomicU64;
@ -39,7 +40,7 @@ impl Drop for WindowWrapper {
let wrapper = || {
if let Ok(canvases) = Reflect::get(&window, &image_canvases_key) {
// Convert key and value to JsValue
let js_key = JsValue::from_str(format!("canvas{}", self.window.window_id).as_str());
let js_key = JsValue::from_str(self.window.window_id.to_string().as_str());
// Use Reflect API to set property
Reflect::delete_property(&canvases.into(), &js_key)?;
@ -200,7 +201,7 @@ impl ApplicationIo for WasmApplicationIo {
}
// Convert key and value to JsValue
let js_key = JsValue::from_str(format!("canvas{}", id).as_str());
let js_key = JsValue::from_str(id.to_string().as_str());
let js_value = JsValue::from(canvas.clone());
let canvases = Object::from(canvases.unwrap());
@ -253,7 +254,7 @@ impl ApplicationIo for WasmApplicationIo {
let wrapper = || {
if let Ok(canvases) = Reflect::get(&window, &image_canvases_key) {
// Convert key and value to JsValue
let js_key = JsValue::from_str(format!("canvas{}", surface_id.0).as_str());
let js_key = JsValue::from_str(surface_id.0.to_string().as_str());
// Use Reflect API to set property
Reflect::delete_property(&canvases.into(), &js_key)?;