Merge pull request #5459 from penpot/ladybenko-9516-fix-blend

🐛 Fix blend mode against background

frontend/src/app/main/ui/workspace/viewport_wasm.cljs

@@ -284,7 +284,8 @@
              (p/fmap (fn [ready?]
                        (when ready?
                          (reset! canvas-init? true)
-                         (wasm.api/assign-canvas canvas)))))
+                         (wasm.api/assign-canvas canvas)
+                         (wasm.api/set-canvas-background background)))))
         (fn []
           (wasm.api/clear-canvas))))
 
@@ -304,6 +305,10 @@
       (when @canvas-init?
         (wasm.api/set-view zoom vbox)))
 
+    (mf/with-effect [background]
+      (when @canvas-init?
+        (wasm.api/set-canvas-background background)))
+
     (hooks/setup-dom-events zoom disable-paste in-viewport? read-only? drawing-tool drawing-path?)
     (hooks/setup-viewport-size vport viewport-ref)
     (hooks/setup-cursor cursor alt? mod? space? panning drawing-tool drawing-path? node-editing? z? read-only?)

frontend/src/app/render_wasm/api.cljs

@@ -345,6 +345,11 @@
   (set! (.-width canvas) (* dpr (.-clientWidth ^js canvas)))
   (set! (.-height canvas) (* dpr (.-clientHeight ^js canvas))))
 
+(defn set-canvas-background
+  [background]
+  (let [rgba (rgba-from-hex background 1)]
+    (h/call internal-module "_set_canvas_background" rgba)))
+
 (defonce module
   (delay
     (if (exists? js/dynamicImport)

render-wasm/src/main.rs

@@ -49,6 +49,14 @@ pub extern "C" fn set_render_options(debug: u32, dpr: f32) {
     render_state.set_dpr(dpr);
 }
 
+#[no_mangle]
+pub extern "C" fn set_canvas_background(raw_color: u32) {
+    let state = unsafe { STATE.as_mut() }.expect("got an invalid state pointer");
+
+    let color = skia::Color::new(raw_color);
+    state.set_background_color(color);
+}
+
 #[no_mangle]
 pub unsafe extern "C" fn render() {
     let state = unsafe { STATE.as_mut() }.expect("got an invalid state pointer");

render-wasm/src/render.rs

@@ -49,6 +49,7 @@ pub(crate) struct RenderState {
     options: RenderOptions,
     pub viewbox: Viewbox,
     images: ImageStore,
+    background_color: skia::Color,
 }
 
 impl RenderState {
@@ -72,6 +73,7 @@ impl RenderState {
             options: RenderOptions::default(),
             viewbox: Viewbox::new(width as f32, height as f32),
             images: ImageStore::new(),
+            background_color: skia::Color::TRANSPARENT,
         }
     }
 
@@ -97,6 +99,11 @@ impl RenderState {
         }
     }
 
+    pub fn set_background_color(&mut self, color: skia::Color) {
+        self.background_color = color;
+        let _ = self.render_all_from_cache();
+    }
+
     pub fn resize(&mut self, width: i32, height: i32) {
         let dpr_width = (width as f32 * self.options.dpr()).floor() as i32;
         let dpr_height = (height as f32 * self.options.dpr()).floor() as i32;
@@ -136,7 +143,7 @@ impl RenderState {
             .reset_matrix();
         self.final_surface
             .canvas()
-            .clear(skia::Color::TRANSPARENT)
+            .clear(self.background_color)
             .reset_matrix();
         self.debug_surface
             .canvas()

render-wasm/src/state.rs

@@ -1,4 +1,6 @@
 use std::collections::HashMap;
+
+use skia_safe as skia;
 use uuid::Uuid;
 
 use crate::render::RenderState;
@@ -57,4 +59,9 @@ impl<'a> State<'a> {
     pub fn current_shape(&'a mut self) -> Option<&'a mut Shape> {
         self.current_shape.as_deref_mut()
     }
+
+    pub fn set_background_color(&mut self, color: skia::Color) {
+        self.render_state.set_background_color(color);
+        self.render_all(true);
+    }
 }