diff --git a/frontend/src/app/render_wasm/api.cljs b/frontend/src/app/render_wasm/api.cljs index f660c25b66..5d0dacd1d9 100644 --- a/frontend/src/app/render_wasm/api.cljs +++ b/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) - (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) + (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)] (h/call wasm/internal-module "_add_shape_radial_fill" (:start-x gradient) (:start-y gradient) (:end-x gradient) (:end-y gradient) 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)) - offset (:offset stop)] - [r g b a (* 100 offset)])) - stops))))) - (h/call wasm/internal-module "_add_shape_fill_stops")) + (:width gradient)) + (.set mem (js/Uint8Array. (clj->js (flatten (map (fn [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"))) (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))) @@ -952,5 +937,4 @@ (p/merr (fn [cause] (js/console.error cause) (p/resolved false))))) - (p/resolved false)))) - + (p/resolved false)))) \ No newline at end of file diff --git a/frontend/src/app/render_wasm/serializers.cljs b/frontend/src/app/render_wasm/serializers.cljs index e42ff8c45a..a977a69b53 100644 --- a/frontend/src/app/render_wasm/serializers.cljs +++ b/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)] diff --git a/render-wasm/src/main.rs b/render-wasm/src/main.rs index 3334be6506..839c94f259 100644 --- a/render-wasm/src/main.rs +++ b/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( - start_x: f32, - start_y: f32, - end_x: f32, - end_y: f32, - opacity: f32, -) { +pub extern "C" fn add_shape_linear_fill() { with_current_shape!(state, |shape: &mut Shape| { - shape.add_fill(shapes::Fill::new_linear_gradient( - (start_x, start_y), - (end_x, end_y), - opacity, + let stops_offset = RAW_LINEAR_FILL_DATA_SIZE; + let bytes = mem::bytes(); + let raw_fill_data: [u8; RAW_LINEAR_FILL_DATA_SIZE] = + bytes[0..stops_offset].try_into().unwrap(); + let raw_fill = shapes::RawLinearFillData::from(raw_fill_data); + let stops: Vec = 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, )); }); } diff --git a/render-wasm/src/shapes/fills.rs b/render-wasm/src/shapes/fills.rs index 42ffa889d6..8704252639 100644 --- a/render-wasm/src/shapes/fills.rs +++ b/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, @@ -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, + ) -> 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),