✨ Send fill + stops data in one call for linear fills

frontend/src/app/render_wasm/api.cljs

@@ -10,7 +10,6 @@
    ["react-dom/server" :as rds]
    [app.common.data :as d]
    [app.common.data.macros :as dm]
-   [app.common.math :as mth]
    [app.common.types.shape.layout :as ctl]
    [app.common.types.shape.path :as path]
    [app.common.uuid :as uuid]
@@ -50,6 +49,7 @@
 (def GRID-LAYOUT-COLUMN-ENTRY-SIZE 5)
 (def GRID-LAYOUT-CELL-ENTRY-SIZE 37)
 (def GRADIENT-STOP-SIZE 5)
+(def LINEAR-FILL-BASE-SIZE 21)
 
 (defn gradient-stop-get-entries-size
   [stops]
@@ -104,24 +104,7 @@
   (h/call wasm/internal-module "_render")
   (set! wasm/internal-frame-id nil))
 
-(defn- rgba-from-hex
-  "Takes a hex color in #rrggbb format, and an opacity value from 0 to 1 and returns its 32-bit rgba representation"
-  [hex opacity]
-  (let [rgb (js/parseInt (subs hex 1) 16)
-        a (mth/floor (* (or opacity 1) 0xff))]
-        ;; rgba >>> 0 so we have an unsigned representation
-    (unsigned-bit-shift-right (bit-or (bit-shift-left a 24) rgb) 0)))
 
-(defn- rgba-bytes-from-hex
-  "Takes a hex color in #rrggbb format, and an opacity value from 0 to 1 and returns an array with its r g b a values"
-  [hex opacity]
-  (let [rgb (js/parseInt (subs hex 1) 16)
-        a (mth/floor (* (or opacity 1) 0xff))
-        ;; rgba >>> 0 so we have an unsigned representation
-        r (bit-shift-right rgb 16)
-        g (bit-and (bit-shift-right rgb 8) 255)
-        b (bit-and rgb 255)]
-    [r g b a]))
 
 (defn cancel-render
   [_]
@@ -241,35 +224,37 @@
                 image    (:fill-image fill)]
             (cond
               (some? color)
-              (let [rgba (rgba-from-hex color opacity)]
+              (let [rgba (sr/hex->u32argb color opacity)]
                 (h/call wasm/internal-module "_add_shape_solid_fill" rgba))
 
               (some? gradient)
+              (case (:type gradient)
+                :linear
+                (let [stops  (:stops gradient)
+                      size   (+ LINEAR-FILL-BASE-SIZE (* (count stops) GRADIENT-STOP-SIZE))
+                      offset (mem/alloc-bytes size)
+                      heap   (mem/get-heap-u8)]
+                  (sr/serialize-linear-fill gradient opacity heap offset)
+                  (h/call wasm/internal-module "_add_shape_linear_fill"))
+                :radial
                 (let [stops (:stops gradient)
                       size  (gradient-stop-get-entries-size stops)
                       offset (mem/alloc-bytes size)
                       heap      (mem/get-heap-u8)
                       mem       (js/Uint8Array. (.-buffer heap) offset size)]
-                (if (= (:type gradient) :linear)
-                  (h/call wasm/internal-module "_add_shape_linear_fill"
-                          (:start-x gradient)
-                          (:start-y gradient)
-                          (:end-x gradient)
-                          (:end-y gradient)
-                          opacity)
                   (h/call wasm/internal-module "_add_shape_radial_fill"
                           (:start-x gradient)
                           (:start-y gradient)
                           (:end-x gradient)
                           (:end-y gradient)
                           opacity
-                          (:width gradient)))
+                          (:width gradient))
                   (.set mem (js/Uint8Array. (clj->js (flatten (map (fn [stop]
-                                                                   (let [[r g b a] (rgba-bytes-from-hex (:color stop) (:opacity stop))
+                                                                     (let [[r g b a] (sr/rgba-bytes-from-hex (:color stop) (:opacity stop))
                                                                            offset (:offset stop)]
                                                                        [r g b a (* 100 offset)]))
                                                                    stops)))))
-                (h/call wasm/internal-module "_add_shape_fill_stops"))
+                  (h/call wasm/internal-module "_add_shape_fill_stops")))
 
               (some? image)
               (let [id            (dm/get-prop image :id)
@@ -327,7 +312,7 @@
                           opacity
                           (:width gradient)))
                 (.set mem (js/Uint8Array. (clj->js (flatten (map (fn [stop]
-                                                                   (let [[r g b a] (rgba-bytes-from-hex (:color stop) (:opacity stop))
+                                                                   (let [[r g b a] (sr/rgba-bytes-from-hex (:color stop) (:opacity stop))
                                                                          offset (:offset stop)]
                                                                      [r g b a (* 100 offset)]))
                                                                  stops)))))
@@ -349,7 +334,7 @@
                   (store-image id)))
 
               (some? color)
-              (let [rgba (rgba-from-hex color opacity)]
+              (let [rgba (sr/hex->u32argb color opacity)]
                 (h/call wasm/internal-module "_add_shape_stroke_solid_fill" rgba)))))
         strokes))
 
@@ -641,7 +626,7 @@
         (let [shadow (nth shadows index)
               color (dm/get-prop shadow :color)
               blur (dm/get-prop shadow :blur)
-              rgba (rgba-from-hex (dm/get-prop color :color) (dm/get-prop color :opacity))
+              rgba (sr/hex->u32argb (dm/get-prop color :color) (dm/get-prop color :opacity))
               hidden (dm/get-prop shadow :hidden)
               x (dm/get-prop shadow :offset-x)
               y (dm/get-prop shadow :offset-y)
@@ -864,7 +849,7 @@
 
 (defn set-canvas-background
   [background]
-  (let [rgba (rgba-from-hex background 1)]
+  (let [rgba (sr/hex->u32argb background 1)]
     (h/call wasm/internal-module "_set_canvas_background" rgba)
     (request-render "set-canvas-background")))
 
@@ -893,7 +878,7 @@
 
 (defn initialize
   [base-objects zoom vbox background]
-  (let [rgba (rgba-from-hex background 1)]
+  (let [rgba (sr/hex->u32argb background 1)]
     (h/call wasm/internal-module "_set_canvas_background" rgba)
     (h/call wasm/internal-module "_set_view" zoom (- (:x vbox)) (- (:y vbox)))
     (set-objects base-objects)))
@@ -953,4 +938,3 @@
                        (js/console.error cause)
                        (p/resolved false)))))
       (p/resolved false))))
-

frontend/src/app/render_wasm/serializers.cljs

@@ -7,9 +7,29 @@
 (ns app.render-wasm.serializers
   (:require
    [app.common.data.macros :as dm]
+   [app.common.math :as mth]
    [app.common.uuid :as uuid]
    [cuerdas.core :as str]))
 
+(defn hex->u32argb
+  "Takes a hex color in #rrggbb format, and an opacity value from 0 to 1 and returns its 32-bit argb representation"
+  [hex opacity]
+  (let [rgb (js/parseInt (subs hex 1) 16)
+        a (mth/floor (* (or opacity 1) 0xff))]
+        ;; rgba >>> 0 so we have an unsigned representation
+    (unsigned-bit-shift-right (bit-or (bit-shift-left a 24) rgb) 0)))
+
+(defn rgba-bytes-from-hex
+  "Takes a hex color in #rrggbb format, and an opacity value from 0 to 1 and returns an array with its r g b a values"
+  [hex opacity]
+  (let [rgb (js/parseInt (subs hex 1) 16)
+        a (mth/floor (* (or opacity 1) 0xff))
+        ;; rgba >>> 0 so we have an unsigned representation
+        r (bit-shift-right rgb 16)
+        g (bit-and (bit-shift-right rgb 8) 255)
+        b (bit-and rgb 255)]
+    [r g b a]))
+
 (defn u8
   [value]
   (let [u8-arr (js/Uint8Array. 1)]

render-wasm/src/main.rs

@@ -16,7 +16,10 @@ mod wapi;
 mod wasm;
 
 use crate::mem::SerializableResult;
-use crate::shapes::{BoolType, ConstraintH, ConstraintV, StructureEntry, TransformEntry, Type};
+use crate::shapes::{
+    BoolType, ConstraintH, ConstraintV, StructureEntry, TransformEntry, Type,
+    RAW_LINEAR_FILL_DATA_SIZE, RAW_STOP_DATA_SIZE,
+};
 use crate::utils::uuid_from_u32_quartet;
 use crate::uuid::Uuid;
 use indexmap::IndexSet;
@@ -255,18 +258,26 @@ pub extern "C" fn add_shape_solid_fill(raw_color: u32) {
 }
 
 #[no_mangle]
-pub extern "C" fn add_shape_linear_fill(
+pub extern "C" fn add_shape_linear_fill() {
-    start_x: f32,
-    start_y: f32,
-    end_x: f32,
-    end_y: f32,
-    opacity: f32,
-) {
     with_current_shape!(state, |shape: &mut Shape| {
-        shape.add_fill(shapes::Fill::new_linear_gradient(
+        let stops_offset = RAW_LINEAR_FILL_DATA_SIZE;
-            (start_x, start_y),
+        let bytes = mem::bytes();
-            (end_x, end_y),
+        let raw_fill_data: [u8; RAW_LINEAR_FILL_DATA_SIZE] =
-            opacity,
+            bytes[0..stops_offset].try_into().unwrap();
+        let raw_fill = shapes::RawLinearFillData::from(raw_fill_data);
+        let stops: Vec<shapes::RawStopData> = bytes[stops_offset..]
+            .chunks(RAW_STOP_DATA_SIZE)
+            .map(|chunk| {
+                let data: [u8; RAW_STOP_DATA_SIZE] = chunk.try_into().unwrap();
+                shapes::RawStopData::from(data)
+            })
+            .collect();
+
+        shape.add_fill(shapes::Fill::new_linear_gradient_with_stops(
+            raw_fill.start(),
+            raw_fill.end(),
+            raw_fill.opacity(),
+            stops,
         ));
     });
 }

render-wasm/src/shapes/fills.rs

@@ -3,16 +3,58 @@ use skia_safe::{self as skia, Rect};
 use super::Color;
 use crate::uuid::Uuid;
 
+pub const RAW_LINEAR_FILL_DATA_SIZE: usize = 21;
+
+#[derive(Debug)]
+#[repr(C)]
+pub struct RawLinearFillData {
+    start_x: f32,
+    start_y: f32,
+    end_x: f32,
+    end_y: f32,
+    opacity: f32,
+    stop_count: u8,
+}
+
+impl From<[u8; 21]> for RawLinearFillData {
+    fn from(bytes: [u8; 21]) -> Self {
+        Self {
+            start_x: f32::from_le_bytes([bytes[0], bytes[1], bytes[2], bytes[3]]),
+            start_y: f32::from_le_bytes([bytes[4], bytes[5], bytes[6], bytes[7]]),
+            end_x: f32::from_le_bytes([bytes[8], bytes[9], bytes[10], bytes[11]]),
+            end_y: f32::from_le_bytes([bytes[12], bytes[13], bytes[14], bytes[15]]),
+            opacity: f32::from_le_bytes([bytes[16], bytes[17], bytes[18], bytes[19]]),
+            stop_count: bytes[20],
+        }
+    }
+}
+
+impl RawLinearFillData {
+    pub fn start(&self) -> (f32, f32) {
+        (self.start_x, self.start_y)
+    }
+
+    pub fn end(&self) -> (f32, f32) {
+        (self.end_x, self.end_y)
+    }
+
+    pub fn opacity(&self) -> f32 {
+        self.opacity
+    }
+}
+
+pub const RAW_STOP_DATA_SIZE: usize = 5;
+
 #[derive(Debug)]
 #[repr(C)]
 pub struct RawStopData {
-    color: [u8; 4],
+    color: u32,
     offset: u8,
 }
 
 impl RawStopData {
     pub fn color(&self) -> skia::Color {
-        skia::Color::from_argb(self.color[3], self.color[0], self.color[1], self.color[2])
+        skia::Color::from(self.color)
     }
 
     pub fn offset(&self) -> f32 {
@@ -20,13 +62,21 @@ impl RawStopData {
     }
 
     pub fn from_bytes(bytes: [u8; 5]) -> Self {
+        let color_bytes: [u8; 4] = bytes[0..4].try_into().unwrap();
         Self {
-            color: [bytes[0], bytes[1], bytes[2], bytes[3]],
+            color: u32::from_le_bytes(color_bytes),
             offset: bytes[4],
         }
     }
 }
 
+impl From<[u8; 5]> for RawStopData {
+    // TODO: remove from_bytes and copy its implementation here
+    fn from(bytes: [u8; 5]) -> Self {
+        Self::from_bytes(bytes)
+    }
+}
+
 #[derive(Debug, Clone, PartialEq)]
 pub struct Gradient {
     colors: Vec<Color>,
@@ -124,15 +174,31 @@ pub enum Fill {
 
 impl Fill {
     pub fn new_linear_gradient(start: (f32, f32), end: (f32, f32), opacity: f32) -> Self {
-        Self::LinearGradient(Gradient {
+        Self::new_linear_gradient_with_stops(start, end, opacity, vec![])
+    }
+
+    pub fn new_linear_gradient_with_stops(
+        start: (f32, f32),
+        end: (f32, f32),
+        opacity: f32,
+        stops: Vec<RawStopData>,
+    ) -> Self {
+        let mut gradient = Gradient {
             start,
             end,
             opacity,
             colors: vec![],
             offsets: vec![],
             width: 0.,
-        })
+        };
+
+        for stop in stops {
+            gradient.add_stop(stop.color(), stop.offset());
         }
+
+        Self::LinearGradient(gradient)
+    }
+
     pub fn new_radial_gradient(
         start: (f32, f32),
         end: (f32, f32),