mirror of
https://github.com/penpot/penpot.git
synced 2025-04-29 13:16:20 +02:00
✨ Send fill + stops data in one call for linear fills
This commit is contained in:
Belén Albeza
parent
16012a3881
commit
fccd1a5bd7
4 changed files with 143 additions and 62 deletions
|
|
@ -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))))
|
||||
|
|
@ -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)]
|
||||
|
|
|
|||
|
|
@ -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<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,
|
||||
));
|
||||
});
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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),
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue