diff --git a/Cargo.lock b/Cargo.lock index 278db69a0c..bdf8a8e1e3 100644 --- a/Cargo.lock +++ b/Cargo.lock @@ -1837,6 +1837,7 @@ version = "0.0.0" dependencies = [ "bezier-rs", "bitflags 2.9.1", + "bytemuck", "derivative", "dyn-any", "env_logger", diff --git a/editor/Cargo.toml b/editor/Cargo.toml index a39aa5ef2e..f54ba79471 100644 --- a/editor/Cargo.toml +++ b/editor/Cargo.toml @@ -46,6 +46,7 @@ num_enum = { workspace = true } usvg = { workspace = true } once_cell = { workspace = true } web-sys = { workspace = true } +bytemuck = { workspace = true } # Required dependencies spin = "0.9.8" diff --git a/editor/src/messages/frontend/frontend_message.rs b/editor/src/messages/frontend/frontend_message.rs index c24ebc405c..55fa2c71f1 100644 --- a/editor/src/messages/frontend/frontend_message.rs +++ b/editor/src/messages/frontend/frontend_message.rs @@ -8,6 +8,7 @@ use crate::messages::portfolio::document::utility_types::wires::{WirePath, WireP use crate::messages::prelude::*; use crate::messages::tool::utility_types::HintData; use graph_craft::document::NodeId; +use graphene_std::raster::Image; use graphene_std::raster::color::Color; use graphene_std::text::Font; @@ -179,6 +180,9 @@ pub enum FrontendMessage { UpdateDocumentArtwork { svg: String, }, + UpdateImageData { + image_data: Vec<(u64, Image)>, + }, UpdateDocumentBarLayout { #[serde(rename = "layoutTarget")] layout_target: LayoutTarget, diff --git a/editor/src/node_graph_executor.rs b/editor/src/node_graph_executor.rs index 8c6a7d13a3..65d73271a3 100644 --- a/editor/src/node_graph_executor.rs +++ b/editor/src/node_graph_executor.rs @@ -213,7 +213,7 @@ impl NodeGraphExecutor { fn export(&self, node_graph_output: TaggedValue, export_config: ExportConfig, responses: &mut VecDeque) -> Result<(), String> { let TaggedValue::RenderOutput(RenderOutput { - data: graphene_std::wasm_application_io::RenderOutputType::Svg(svg), + data: graphene_std::wasm_application_io::RenderOutputType::Svg { svg, .. }, .. }) = node_graph_output else { @@ -350,15 +350,16 @@ impl NodeGraphExecutor { match node_graph_output { TaggedValue::RenderOutput(render_output) => { match render_output.data { - graphene_std::wasm_application_io::RenderOutputType::Svg(svg) => { + graphene_std::wasm_application_io::RenderOutputType::Svg { svg, image_data } => { // Send to frontend + responses.add(FrontendMessage::UpdateImageData { image_data }); responses.add(FrontendMessage::UpdateDocumentArtwork { svg }); } graphene_std::wasm_application_io::RenderOutputType::CanvasFrame(frame) => { let matrix = format_transform_matrix(frame.transform); - let transform = if matrix.is_empty() { String::new() } else { format!(" transform=\"{}\"", matrix) }; + let transform = if matrix.is_empty() { String::new() } else { format!(" transform=\"{matrix}\"") }; let svg = format!( - r#"
"#, + r#"
"#, frame.resolution.x, frame.resolution.y, frame.surface_id.0 ); responses.add(FrontendMessage::UpdateDocumentArtwork { svg }); diff --git a/frontend/src/components/panels/Document.svelte b/frontend/src/components/panels/Document.svelte index 70d4ea99ba..bd36152f04 100644 --- a/frontend/src/components/panels/Document.svelte +++ b/frontend/src/components/panels/Document.svelte @@ -192,12 +192,25 @@ const placeholders = window.document.querySelectorAll("[data-viewport] [data-canvas-placeholder]"); // Replace the placeholders with the actual canvas elements - placeholders.forEach((placeholder) => { + Array.from(placeholders).forEach((placeholder) => { const canvasName = placeholder.getAttribute("data-canvas-placeholder"); if (!canvasName) return; // Get the canvas element from the global storage // eslint-disable-next-line @typescript-eslint/no-explicit-any - const canvas = (window as any).imageCanvases[canvasName]; + let canvas = (window as any).imageCanvases[canvasName]; + + if (canvasName !== "0" && canvas.parentElement) { + var newCanvas = window.document.createElement("canvas"); + var context = newCanvas.getContext("2d"); + + newCanvas.width = canvas.width; + newCanvas.height = canvas.height; + + context?.drawImage(canvas, 0, 0); + + canvas = newCanvas; + } + placeholder.replaceWith(canvas); }); } diff --git a/frontend/wasm/src/editor_api.rs b/frontend/wasm/src/editor_api.rs index 57c5899e0b..c649ee17ac 100644 --- a/frontend/wasm/src/editor_api.rs +++ b/frontend/wasm/src/editor_api.rs @@ -16,13 +16,27 @@ use editor::messages::portfolio::utility_types::Platform; use editor::messages::prelude::*; use editor::messages::tool::tool_messages::tool_prelude::WidgetId; use graph_craft::document::NodeId; +use graphene_std::raster::Image; use graphene_std::raster::color::Color; +use js_sys::{Object, Reflect}; use serde::Serialize; use serde_wasm_bindgen::{self, from_value}; use std::cell::RefCell; -use std::sync::atomic::Ordering; +use std::sync::atomic::{AtomicU64, Ordering}; use std::time::Duration; +use wasm_bindgen::JsCast; use wasm_bindgen::prelude::*; +use web_sys::{CanvasRenderingContext2d, HtmlCanvasElement, ImageData, window}; + +static IMAGE_DATA_HASH: AtomicU64 = AtomicU64::new(0); + +fn calculate_hash(t: &T) -> u64 { + use std::collections::hash_map::DefaultHasher; + use std::hash::Hasher; + let mut hasher = DefaultHasher::new(); + t.hash(&mut hasher); + hasher.finish() +} /// Set the random seed used by the editor by calling this from JS upon initialization. /// This is necessary because WASM doesn't have a random number generator. @@ -37,6 +51,75 @@ pub fn wasm_memory() -> JsValue { wasm_bindgen::memory() } +fn render_image_data_to_canvases(image_data: &[(u64, Image)]) { + let window = match window() { + Some(window) => window, + None => { + error!("Cannot render canvas: window object not found"); + return; + } + }; + let document = window.document().expect("window should have a document"); + let window_obj = Object::from(window); + let image_canvases_key = JsValue::from_str("imageCanvases"); + + let canvases_obj = match Reflect::get(&window_obj, &image_canvases_key) { + Ok(obj) if !obj.is_undefined() && !obj.is_null() => obj, + _ => { + let new_obj = Object::new(); + if Reflect::set(&window_obj, &image_canvases_key, &new_obj).is_err() { + error!("Failed to create and set imageCanvases object on window"); + return; + } + new_obj.into() + } + }; + let canvases_obj = Object::from(canvases_obj); + + for (placeholder_id, image) in image_data.iter() { + let canvas_name = placeholder_id.to_string(); + let js_key = JsValue::from_str(&canvas_name); + + if Reflect::has(&canvases_obj, &js_key).unwrap_or(false) || image.width == 0 || image.height == 0 { + continue; + } + + let canvas: HtmlCanvasElement = document + .create_element("canvas") + .expect("Failed to create canvas element") + .dyn_into::() + .expect("Failed to cast element to HtmlCanvasElement"); + + canvas.set_width(image.width); + canvas.set_height(image.height); + + let context: CanvasRenderingContext2d = canvas + .get_context("2d") + .expect("Failed to get 2d context") + .expect("2d context was not found") + .dyn_into::() + .expect("Failed to cast context to CanvasRenderingContext2d"); + let u8_data: Vec = image.data.iter().flat_map(|color| color.to_rgba8_srgb()).collect(); + let clamped_u8_data = wasm_bindgen::Clamped(&u8_data[..]); + match ImageData::new_with_u8_clamped_array_and_sh(clamped_u8_data, image.width, image.height) { + Ok(image_data_obj) => { + if context.put_image_data(&image_data_obj, 0., 0.).is_err() { + error!("Failed to put image data on canvas for id: {placeholder_id}"); + } + } + Err(e) => { + error!("Failed to create ImageData for id: {placeholder_id}: {e:?}"); + } + } + + let js_value = JsValue::from(canvas); + + if Reflect::set(&canvases_obj, &js_key, &js_value).is_err() { + error!("Failed to set canvas '{canvas_name}' on imageCanvases object"); + } + } +} + // ============================================================================ /// This struct is, via wasm-bindgen, used by JS to interact with the editor backend. It does this by calling functions, which are `impl`ed @@ -88,6 +171,17 @@ impl EditorHandle { // Sends a FrontendMessage to JavaScript fn send_frontend_message_to_js(&self, mut message: FrontendMessage) { + if let FrontendMessage::UpdateImageData { ref image_data } = message { + let new_hash = calculate_hash(image_data); + let prev_hash = IMAGE_DATA_HASH.load(Ordering::Relaxed); + + if new_hash != prev_hash { + render_image_data_to_canvases(image_data.as_slice()); + IMAGE_DATA_HASH.store(new_hash, Ordering::Relaxed); + } + return; + } + if let FrontendMessage::UpdateDocumentLayerStructure { data_buffer } = message { message = FrontendMessage::UpdateDocumentLayerStructureJs { data_buffer: data_buffer.into() }; } diff --git a/node-graph/gcore/src/blending.rs b/node-graph/gcore/src/blending.rs index 921fb0d0ae..44404bd502 100644 --- a/node-graph/gcore/src/blending.rs +++ b/node-graph/gcore/src/blending.rs @@ -56,6 +56,10 @@ impl AlphaBlending { clip: if t < 0.5 { self.clip } else { other.clip }, } } + + pub fn opacity(&self, mask: bool) -> f32 { + self.opacity * if mask { 1. } else { self.fill } + } } #[cfg_attr(feature = "serde", derive(serde::Serialize, serde::Deserialize))] diff --git a/node-graph/gcore/src/raster.rs b/node-graph/gcore/src/raster.rs index 60106bdc70..617441b8f9 100644 --- a/node-graph/gcore/src/raster.rs +++ b/node-graph/gcore/src/raster.rs @@ -1,12 +1,3 @@ -use crate::GraphicGroupTable; -pub use crate::color::*; -use crate::raster_types::{CPU, RasterDataTable}; -use crate::vector::VectorDataTable; -use std::fmt::Debug; - -#[cfg(target_arch = "spirv")] -use spirv_std::num_traits::float::Float; - /// as to not yet rename all references pub mod color { pub use super::*; @@ -14,7 +5,14 @@ pub mod color { pub mod image; -pub use self::image::Image; +pub use self::image::{Image, TransformImage}; +use crate::GraphicGroupTable; +pub use crate::color::*; +use crate::raster_types::{CPU, RasterDataTable}; +use crate::vector::VectorDataTable; +#[cfg(target_arch = "spirv")] +use spirv_std::num_traits::float::Float; +use std::fmt::Debug; pub trait Bitmap { type Pixel: Pixel; diff --git a/node-graph/gcore/src/raster/image.rs b/node-graph/gcore/src/raster/image.rs index e93fe60ba2..d6bfa3ec0d 100644 --- a/node-graph/gcore/src/raster/image.rs +++ b/node-graph/gcore/src/raster/image.rs @@ -50,6 +50,13 @@ pub struct Image { // TODO: Currently it is always anchored at the top left corner at (0, 0). The bottom right corner of the new origin field would correspond to (1, 1). } +#[derive(Debug, Clone, dyn_any::DynAny, Default, PartialEq, serde::Serialize, serde::Deserialize, specta::Type)] +pub struct TransformImage(pub DAffine2); + +impl Hash for TransformImage { + fn hash(&self, _: &mut H) {} +} + impl Debug for Image

{ fn fmt(&self, f: &mut std::fmt::Formatter<'_>) -> std::fmt::Result { let length = self.data.len(); diff --git a/node-graph/gcore/src/vector/vector_nodes.rs b/node-graph/gcore/src/vector/vector_nodes.rs index ca2349feed..275377c47e 100644 --- a/node-graph/gcore/src/vector/vector_nodes.rs +++ b/node-graph/gcore/src/vector/vector_nodes.rs @@ -417,7 +417,6 @@ where // Create and add mirrored instance for mut instance in instance.instance_iter() { instance.transform = reflected_transform * instance.transform; - instance.source_node_id = None; result_table.push(instance); } @@ -448,6 +447,7 @@ async fn round_corners( .map(|source| { let source_transform = *source.transform; let source_transform_inverse = source_transform.inverse(); + let source_node_id = source.source_node_id; let source = source.instance; let upstream_graphic_group = source.upstream_graphic_group.clone(); @@ -542,7 +542,7 @@ async fn round_corners( instance: result, transform: source_transform, alpha_blending: Default::default(), - source_node_id: None, + source_node_id: *source_node_id, } }) .collect() @@ -645,7 +645,6 @@ async fn box_warp(_: impl Ctx, vector_data: VectorDataTable, #[expose] rectangle // Add this to the table and reset the transform since we've applied it directly to the points vector_data_instance.instance = result; vector_data_instance.transform = DAffine2::IDENTITY; - vector_data_instance.source_node_id = None; vector_data_instance }) .collect() @@ -917,7 +916,6 @@ async fn bounding_box(_: impl Ctx, vector_data: VectorDataTable) -> VectorDataTa result.style.set_stroke_transform(DAffine2::IDENTITY); vector_data_instance.instance = result; - vector_data_instance.source_node_id = None; vector_data_instance }) .collect() @@ -1013,7 +1011,6 @@ async fn offset_path(_: impl Ctx, vector_data: VectorDataTable, distance: f64, j } vector_data_instance.instance = result; - vector_data_instance.source_node_id = None; vector_data_instance }) .collect() @@ -1068,7 +1065,6 @@ async fn solidify_stroke(_: impl Ctx, vector_data: VectorDataTable) -> VectorDat } vector_data_instance.instance = result; - vector_data_instance.source_node_id = None; vector_data_instance }) .collect() diff --git a/node-graph/graph-craft/src/document/value.rs b/node-graph/graph-craft/src/document/value.rs index 8e244f0b2b..b6cdd179af 100644 --- a/node-graph/graph-craft/src/document/value.rs +++ b/node-graph/graph-craft/src/document/value.rs @@ -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)> }, Image(Vec), } diff --git a/node-graph/graph-craft/src/wasm_application_io.rs b/node-graph/graph-craft/src/wasm_application_io.rs index 732135b4c8..b52d4e0a80 100644 --- a/node-graph/graph-craft/src/wasm_application_io.rs +++ b/node-graph/graph-craft/src/wasm_application_io.rs @@ -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)?; diff --git a/node-graph/graster-nodes/src/dehaze.rs b/node-graph/graster-nodes/src/dehaze.rs index 6c6246b964..32fc6b20b8 100644 --- a/node-graph/graster-nodes/src/dehaze.rs +++ b/node-graph/graster-nodes/src/dehaze.rs @@ -31,7 +31,6 @@ async fn dehaze(_: impl Ctx, image_frame: RasterDataTable, strength: Percen }; image_frame_instance.instance = Raster::new_cpu(dehazed_image); - image_frame_instance.source_node_id = None; image_frame_instance }) .collect() diff --git a/node-graph/graster-nodes/src/filter.rs b/node-graph/graster-nodes/src/filter.rs index b5c4bbf9b4..80891e0170 100644 --- a/node-graph/graster-nodes/src/filter.rs +++ b/node-graph/graster-nodes/src/filter.rs @@ -36,7 +36,6 @@ async fn blur( }; image_instance.instance = blurred_image; - image_instance.source_node_id = None; image_instance }) .collect() diff --git a/node-graph/graster-nodes/src/std_nodes.rs b/node-graph/graster-nodes/src/std_nodes.rs index 3df24c364c..8c32c02a47 100644 --- a/node-graph/graster-nodes/src/std_nodes.rs +++ b/node-graph/graster-nodes/src/std_nodes.rs @@ -88,7 +88,6 @@ pub fn sample_image(ctx: impl ExtractFootprint + Clone + Send, image_frame: Rast let new_transform = image_frame_transform * DAffine2::from_translation(offset) * DAffine2::from_scale(size); image_frame_instance.transform = new_transform; - image_frame_instance.source_node_id = None; image_frame_instance.instance = Raster::new_cpu(image); Some(image_frame_instance) }) @@ -121,9 +120,10 @@ pub fn combine_channels( let alpha = alpha.filter(|i| i.instance.width > 0 && i.instance.height > 0); // Get this instance's transform and alpha blending mode from the first non-empty channel - let Some((transform, alpha_blending)) = [&red, &green, &blue, &alpha].iter().find_map(|i| i.as_ref()).map(|i| (i.transform, i.alpha_blending)) else { - return None; - }; + let (transform, alpha_blending, source_node_id) = [&red, &green, &blue, &alpha] + .iter() + .find_map(|i| i.as_ref()) + .map(|i| (i.transform, i.alpha_blending, i.source_node_id))?; // Get the common width and height of the channels, which must have equal dimensions let channel_dimensions = [ @@ -140,9 +140,7 @@ pub fn combine_channels( { return None; } - let Some(&(width, height)) = channel_dimensions.iter().flatten().next() else { - return None; - }; + let &(width, height) = channel_dimensions.iter().flatten().next()?; // Create a new image for this instance output let mut image = Image::new(width, height, Color::TRANSPARENT); @@ -179,7 +177,7 @@ pub fn combine_channels( instance: Raster::new_cpu(image), transform, alpha_blending, - source_node_id: None, + source_node_id, }) }) .collect() @@ -276,7 +274,6 @@ pub fn extend_image_to_bounds(_: impl Ctx, image: RasterDataTable, bounds: image_instance.instance = Raster::new_cpu(new_image); image_instance.transform = new_texture_to_layer_space; - image_instance.source_node_id = None; image_instance }) .collect() diff --git a/node-graph/gstd/src/wasm_application_io.rs b/node-graph/gstd/src/wasm_application_io.rs index a40309f88e..23f12bb59e 100644 --- a/node-graph/gstd/src/wasm_application_io.rs +++ b/node-graph/gstd/src/wasm_application_io.rs @@ -30,35 +30,6 @@ async fn create_surface<'a: 'n>(_: impl Ctx, editor: &'a WasmEditorApi) -> Arc, -// surface_handle: Arc, -// ) -> graphene_core::application_io::SurfaceHandleFrame { -// let image = image.instance_ref_iter().next().unwrap().instance; -// let image_data = image.image.data; -// let array: Clamped<&[u8]> = Clamped(bytemuck::cast_slice(image_data.as_slice())); -// if image.image.width > 0 && image.image.height > 0 { -// let canvas = &surface_handle.surface; -// canvas.set_width(image.image.width); -// canvas.set_height(image.image.height); -// // TODO: replace "2d" with "bitmaprenderer" once we switch to ImageBitmap (lives on gpu) from RasterData (lives on cpu) -// let context = canvas.get_context("2d").unwrap().unwrap().dyn_into::().unwrap(); -// let image_data = web_sys::ImageData::new_with_u8_clamped_array_and_sh(array, image.image.width, image.image.height).expect("Failed to construct RasterData"); -// context.put_image_data(&image_data, 0., 0.).unwrap(); -// } -// graphene_core::application_io::SurfaceHandleFrame { -// surface_handle, -// transform: image.transform, -// } -// } - #[node_macro::node(category("Web Request"))] async fn get_request(_: impl Ctx, _primary: (), #[name("URL")] url: String, discard_result: bool) -> String { #[cfg(target_arch = "wasm32")] @@ -187,7 +158,10 @@ fn render_svg(data: impl GraphicElementRendered, mut render: SvgRender, render_p render.wrap_with_transform(footprint.transform, Some(footprint.resolution.as_dvec2())); - RenderOutputType::Svg(render.svg.to_svg_string()) + RenderOutputType::Svg { + svg: render.svg.to_svg_string(), + image_data: render.image_data, + } } #[cfg(feature = "vello")] diff --git a/node-graph/gsvg-renderer/src/renderer.rs b/node-graph/gsvg-renderer/src/renderer.rs index 372da2a9f3..9751a27212 100644 --- a/node-graph/gsvg-renderer/src/renderer.rs +++ b/node-graph/gsvg-renderer/src/renderer.rs @@ -20,6 +20,7 @@ use graphene_core::{Artboard, ArtboardGroupTable, GraphicElement, GraphicGroupTa use num_traits::Zero; use std::collections::{HashMap, HashSet}; use std::fmt::Write; +use std::hash::{DefaultHasher, Hash, Hasher}; use std::ops::Deref; use std::sync::{Arc, LazyLock}; #[cfg(feature = "vello")] @@ -175,6 +176,10 @@ impl RenderParams { let alignment_parent_transform = Some(transform); Self { alignment_parent_transform, ..*self } } + + pub fn to_canvas(&self) -> bool { + !self.for_export && !self.thumbnail && !self.for_mask + } } pub fn format_transform_matrix(transform: DAffine2) -> String { @@ -243,8 +248,7 @@ impl GraphicElementRendered for GraphicGroupTable { attributes.push("transform", matrix); } - let factor = if render_params.for_mask { 1. } else { instance.alpha_blending.fill }; - let opacity = instance.alpha_blending.opacity * factor; + let opacity = instance.alpha_blending.opacity(render_params.for_mask); if opacity < 1. { attributes.push("opacity", opacity.to_string()); } @@ -299,8 +303,7 @@ impl GraphicElementRendered for GraphicGroupTable { }; let mut bounds = None; - let factor = if render_params.for_mask { 1. } else { alpha_blending.fill }; - let opacity = alpha_blending.opacity * factor; + let opacity = instance.alpha_blending.opacity(render_params.for_mask); if opacity < 1. || (render_params.view_mode != ViewMode::Outline && alpha_blending.blend_mode != BlendMode::default()) { bounds = self .instance_ref_iter() @@ -503,8 +506,7 @@ impl GraphicElementRendered for VectorDataTable { } attributes.push_val(fill_and_stroke); - let factor = if render_params.for_mask { 1. } else { instance.alpha_blending.fill }; - let opacity = instance.alpha_blending.opacity * factor; + let opacity = instance.alpha_blending.opacity(render_params.for_mask); if opacity < 1. { attributes.push("opacity", opacity.to_string()); } @@ -545,10 +547,13 @@ impl GraphicElementRendered for VectorDataTable { _ => instance.alpha_blending.blend_mode.to_peniko(), }; let mut layer = false; - let factor = if render_params.for_mask { 1. } else { instance.alpha_blending.fill }; - let opacity = instance.alpha_blending.opacity * factor; + + let opacity = instance.alpha_blending.opacity(render_params.for_mask); if opacity < 1. || instance.alpha_blending.blend_mode != BlendMode::default() { layer = true; + let weight = instance.instance.style.stroke().unwrap().weight; + let quad = Quad::from_box(layer_bounds).inflate(weight * element_transform.matrix2.determinant()); + let layer_bounds = quad.bounding_box(); scene.push_layer( peniko::BlendMode::new(blend_mode, peniko::Compose::SrcOver), opacity, @@ -945,56 +950,122 @@ impl GraphicElementRendered for RasterDataTable { fn render_svg(&self, render: &mut SvgRender, render_params: &RenderParams) { for instance in self.instance_ref_iter() { let transform = *instance.transform; - let image = &instance.instance; + if image.data.is_empty() { - return; + continue; } - let base64_string = image.base64_string.clone().unwrap_or_else(|| { - use base64::Engine; - - let output = image.to_png(); - let preamble = "data:image/png;base64,"; - let mut base64_string = String::with_capacity(preamble.len() + output.len() * 4); - base64_string.push_str(preamble); - base64::engine::general_purpose::STANDARD.encode_string(output, &mut base64_string); - base64_string - }); - render.leaf_tag("image", |attributes| { - attributes.push("width", 1.to_string()); - attributes.push("height", 1.to_string()); - attributes.push("preserveAspectRatio", "none"); - attributes.push("href", base64_string); - let matrix = format_transform_matrix(transform); - if !matrix.is_empty() { - attributes.push("transform", matrix); - } - let factor = if render_params.for_mask { 1. } else { instance.alpha_blending.fill }; - let opacity = instance.alpha_blending.opacity * factor; - if opacity < 1. { - attributes.push("opacity", opacity.to_string()); - } - if instance.alpha_blending.blend_mode != BlendMode::default() { - attributes.push("style", instance.alpha_blending.blend_mode.render()); + if render_params.to_canvas() { + let id = instance.source_node_id.map(|x| x.0).unwrap_or_else(|| { + let mut state = DefaultHasher::new(); + image.data().hash(&mut state); + state.finish() + }); + if !render.image_data.iter().any(|(old_id, _)| *old_id == id) { + render.image_data.push((id, image.data().clone())); } - }); + render.parent_tag( + "foreignObject", + |attributes| { + let mut transform_values = transform.to_scale_angle_translation(); + let size = DVec2::new(image.width as f64, image.height as f64); + transform_values.0 /= size; + + let matrix = DAffine2::from_scale_angle_translation(transform_values.0, transform_values.1, transform_values.2); + let matrix = format_transform_matrix(matrix); + if !matrix.is_empty() { + attributes.push("transform", matrix); + } + + attributes.push("width", size.x.to_string()); + attributes.push("height", size.y.to_string()); + + let opacity = instance.alpha_blending.opacity(render_params.for_mask); + if opacity < 1. { + attributes.push("opacity", opacity.to_string()); + } + + if instance.alpha_blending.blend_mode != BlendMode::default() { + attributes.push("style", instance.alpha_blending.blend_mode.render()); + } + }, + |render| { + render.leaf_tag( + "img", // Must be a self-closing (void element) tag, so we can't use `div` or `span`, for example + |attributes| { + attributes.push("data-canvas-placeholder", id.to_string()); + }, + ) + }, + ); + } else { + let base64_string = image.base64_string.clone().unwrap_or_else(|| { + use base64::Engine; + + let output = image.to_png(); + let preamble = "data:image/png;base64,"; + let mut base64_string = String::with_capacity(preamble.len() + output.len() * 4); + base64_string.push_str(preamble); + base64::engine::general_purpose::STANDARD.encode_string(output, &mut base64_string); + base64_string + }); + + render.leaf_tag("image", |attributes| { + attributes.push("width", "1"); + attributes.push("height", "1"); + attributes.push("preserveAspectRatio", "none"); + attributes.push("href", base64_string); + let matrix = format_transform_matrix(transform); + if !matrix.is_empty() { + attributes.push("transform", matrix); + } + + let opacity = instance.alpha_blending.opacity(render_params.for_mask); + if opacity < 1. { + attributes.push("opacity", opacity.to_string()); + } + if instance.alpha_blending.blend_mode != BlendMode::default() { + attributes.push("style", instance.alpha_blending.blend_mode.render()); + } + }); + } } } #[cfg(feature = "vello")] - fn render_to_vello(&self, scene: &mut Scene, transform: DAffine2, _: &mut RenderContext, _render_params: &RenderParams) { + fn render_to_vello(&self, scene: &mut Scene, transform: DAffine2, _: &mut RenderContext, render_params: &RenderParams) { use vello::peniko; for instance in self.instance_ref_iter() { let image = &instance.instance; if image.data.is_empty() { - return; + continue; } + + let alpha_blending = *instance.alpha_blending; + let blend_mode = alpha_blending.blend_mode.to_peniko(); + + let opacity = alpha_blending.opacity(render_params.for_mask); + let mut layer = false; + + if opacity < 1. || alpha_blending.blend_mode != BlendMode::default() { + if let Some(bounds) = self.bounding_box(transform, false) { + let blending = peniko::BlendMode::new(blend_mode, peniko::Compose::SrcOver); + let rect = kurbo::Rect::new(bounds[0].x, bounds[0].y, bounds[1].x, bounds[1].y); + scene.push_layer(blending, opacity, kurbo::Affine::IDENTITY, &rect); + layer = true; + } + } + let image = peniko::Image::new(image.to_flat_u8().0.into(), peniko::ImageFormat::Rgba8, image.width, image.height).with_extend(peniko::Extend::Repeat); - let transform = transform * *instance.transform * DAffine2::from_scale(1. / DVec2::new(image.width as f64, image.height as f64)); + let image_transform = transform * *instance.transform * DAffine2::from_scale(1. / DVec2::new(image.width as f64, image.height as f64)); + + scene.draw_image(&image, kurbo::Affine::new(image_transform.to_cols_array())); - scene.draw_image(&image, kurbo::Affine::new(transform.to_cols_array())); + if layer { + scene.pop_layer(); + } } } @@ -1029,12 +1100,14 @@ impl GraphicElementRendered for RasterDataTable { for instance in self.instance_ref_iter() { let blend_mode = *instance.alpha_blending; - let layer = blend_mode != Default::default(); - if layer { - let Some(bounds) = self.bounding_box(transform, true) else { return }; - let blending = peniko::BlendMode::new(blend_mode.blend_mode.to_peniko(), peniko::Compose::SrcOver); - let rect = kurbo::Rect::new(bounds[0].x, bounds[0].y, bounds[1].x, bounds[1].y); - scene.push_layer(blending, blend_mode.opacity, kurbo::Affine::IDENTITY, &rect); + let mut layer = false; + if blend_mode != Default::default() { + if let Some(bounds) = self.bounding_box(transform, true) { + let blending = peniko::BlendMode::new(blend_mode.blend_mode.to_peniko(), peniko::Compose::SrcOver); + let rect = kurbo::Rect::new(bounds[0].x, bounds[0].y, bounds[1].x, bounds[1].y); + scene.push_layer(blending, blend_mode.opacity, kurbo::Affine::IDENTITY, &rect); + layer = true; + } } let image = peniko::Image::new(